@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/fraunces.woff2) format("woff2");
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/manrope.woff2) format("woff2");
}

:root {
  --white: #ffffff;
  --sand: #f4eee6;
  --sand-deep: #e9dfd1;
  --rule: #e0d4c3;
  --tan: #b08559;
  --brown: #7a5232;
  --ink: #2a2019;
  --ink-muted: #66574a;
  --button: #3b2b20;
  --alert: #a3271c;
  --tan-light: #d9b48c;
  --on-dark: #d8cbbb;
  --wa: #1c7a4b;
  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --sans: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 10vw, 120px);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 17px/27px var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; touch-action: manipulation; text-underline-offset: 4px; text-decoration-color: var(--tan); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 3;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--white);
}
.skip:focus { left: 8px; }

.wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 450;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 1rem + 4.6vw, 4.9rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 1.5rem + 1.9vw, 3rem); line-height: 1.08; }
h3 { font-size: 18px; line-height: 25px; font-weight: 700; letter-spacing: -.005em; }

.eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--brown);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lead { font-size: clamp(18px, 17px + .3vw, 20px); line-height: 1.5; text-wrap: pretty; }
.muted { color: var(--ink-muted); }
.after { margin-top: 16px; }
.after-xs { margin-top: 4px; }
.after-s { margin-top: 12px; }
.after-m { margin-top: 20px; }
.after-l { margin-top: 28px; }
.section { padding-block: var(--section); }
.sand { background: var(--sand); }
.deep { background: var(--sand-deep); }
.deep .lines li { border-color: var(--tan); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 2px;
  background: var(--button);
  color: var(--white);
  font: 700 16px/1 var(--sans);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { background: var(--ink-muted); cursor: default; }
.more { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; }

/* Section heads and two column layouts */
.head { display: grid; gap: 12px 72px; margin-bottom: 40px; }
.split { display: grid; gap: 40px 72px; }
@media (min-width: 960px) {
  .head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
  .split.align-start { align-items: start; }
  .split.wide-left { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* Header */
.top { position: relative; z-index: 2; background: var(--white); border-bottom: 1px solid var(--rule); }
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: max(18px, env(safe-area-inset-top)) 18px;
}
.word {
  flex-shrink: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
}
.nav { display: none; align-items: center; gap: clamp(14px, 1.6vw, 24px); font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; white-space: nowrap; }
.nav a[aria-current="page"] { text-decoration: underline; }
.nav .cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 2px;
  background: var(--button);
  color: var(--white);
  font-weight: 700;
}

.menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 8px max(var(--gutter), env(safe-area-inset-right)) 20px max(var(--gutter), env(safe-area-inset-left));
  border-bottom: 1px solid var(--rule);
  background: var(--white);
}
.menu-panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--rule);
  font-size: 18px;
  text-decoration: none;
}
.menu-panel a[aria-current="page"] { font-weight: 700; }

@media (min-width: 1200px) {
  .nav { display: flex; }
  .menu { display: none; }
}

/* Home hero: centred words, then one wide picture */
.hero { padding-top: clamp(44px, 7vw, 104px); background: var(--white); }
.hero-copy {
  max-width: 980px;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  text-align: center;
}
.hero h1 { font-size: clamp(2.7rem, 1rem + 5.2vw, 5.4rem); line-height: 1; }
.hero .lead { max-width: 33em; margin: 24px auto 0; color: var(--ink-muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }
.hero .actions { justify-content: center; margin-top: 32px; }
.hero-media { margin-top: clamp(40px, 6vw, 72px); aspect-ratio: 4 / 3; border-radius: clamp(18px, 2.4vw, 32px); }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) { .hero-media { aspect-ratio: 21 / 9; } }
.facts { display: grid; margin-top: clamp(28px, 4vw, 44px); text-align: center; }
.facts div { padding: 14px 12px; border-top: 1px solid var(--rule); }
.facts dt { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.facts dd { font-family: var(--serif); font-size: clamp(22px, 1rem + 1vw, 28px); line-height: 1.2; font-weight: 450; }
@media (min-width: 560px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts div { padding-block: 4px; border-top: 0; border-left: 1px solid var(--rule); }
  .facts div:first-child { border-left: 0; }
}

/* Inner page head */
.page-head { padding-block: clamp(40px, 6vw, 80px) clamp(44px, 7vw, 88px); background: var(--sand); }
.page-head .lead { margin-top: 20px; max-width: 36em; color: var(--ink-muted); }

/* Services, the one-stop grid */
.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 960px) {
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.services li { display: grid; align-content: start; gap: 6px; padding: clamp(20px, 3vw, 32px); background: var(--white); }
.services svg { width: 40px; height: 40px; margin-bottom: 14px; }
.services p { color: var(--ink-muted); font-size: 15px; line-height: 23px; }
.services .step { color: var(--brown); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .08em; }
@media (max-width: 559px) {
  .services { grid-template-columns: minmax(0, 1fr); }
  .services li { grid-template-columns: 40px minmax(0, 1fr); gap: 2px 16px; }
  .services svg { grid-row: span 3; margin-bottom: 0; }
}
.ic { fill: none; stroke: var(--brown); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Product cards */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.cards li { display: grid; align-content: start; gap: 10px; }
.cards .ph { aspect-ratio: 4 / 5; overflow: hidden; background: #f3ede4; }
.sand .cards .ph, .deep .cards .ph { background: var(--white); }
.cards img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform 500ms var(--ease-out); }
.ph.draw { display: grid; place-items: center; }
.ph.draw svg { width: 60%; fill: none; stroke: var(--brown); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cards p { margin-top: -6px; color: var(--ink-muted); font-size: 15px; line-height: 21px; }
.also { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.also li { padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); font-size: 15px; line-height: 21px; }
.product-groups { display: grid; gap: clamp(56px, 8vw, 88px); }
.product-groups h2 { margin-bottom: 8px; }
.product-groups .muted { margin-bottom: 24px; }

/* Ready design or your design */
.paths { display: grid; gap: 1px; margin-top: 28px; background: var(--rule); border: 1px solid var(--rule); }
.paths li { padding: 22px 24px; background: var(--white); }
.paths .step { display: block; margin-bottom: 6px; color: var(--brown); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.paths p { margin-top: 4px; color: var(--ink-muted); }

/* Photos */
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sand-deep); }
.tall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--sand-deep); }
.packshot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--white); border: 1px solid var(--rule); }

/* Lists with hairlines */
.lines { margin-top: 28px; }
.lines li { padding-block: 16px; border-top: 1px solid var(--rule); }
.lines li:last-child { border-bottom: 1px solid var(--rule); }
.lines p { margin-top: 4px; color: var(--ink-muted); }
.lines.plain li { padding-block: 12px; }

.spec-list { margin-top: 28px; }
.spec-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 12px;
  padding-block: 14px;
  border-top: 1px solid var(--rule);
}
.spec-list li:last-child { border-bottom: 1px solid var(--rule); }
.spec-list b {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--sand-deep);
  color: var(--brown);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}
.spec-list p { grid-column: 2; color: var(--ink-muted); }

/* Minimum order figures */
.moq { display: grid; gap: 1px; margin-top: 28px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 560px) { .moq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.moq div { padding: 24px; background: var(--white); }
.moq dt { font-family: var(--serif); font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 1; font-weight: 450; }
.moq dt small { margin-left: 6px; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.moq dd { margin-top: 10px; color: var(--ink-muted); }

/* Numbered tiles */
.tiles { display: grid; gap: 28px; }
.tiles li { padding-top: 14px; border-top: 1px solid var(--tan); }
.tiles .n { display: block; margin-bottom: 10px; color: var(--brown); font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: .08em; }
.tiles p { margin-top: 4px; color: var(--ink-muted); }
@media (min-width: 760px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 560px) and (max-width: 759px) {
  .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Process stages */
.stages { display: grid; gap: 32px 24px; }
@media (min-width: 560px) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; } }
.stage-photo { position: relative; background: var(--sand-deep); }
.stage-photo img, .stage-photo video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stage-photo video { position: absolute; inset: 0; height: 100%; }
.tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: var(--white);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}
.tag span { color: var(--brown); font-size: 13px; line-height: 1; font-weight: 800; }
.stages figcaption { padding-top: 12px; color: var(--ink-muted); }

/* Stage matrix: small leather goods and bags */
.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { padding: 12px 12px 12px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.matrix thead th { border-top: 0; padding-block: 0 12px; color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.matrix tbody th { font-weight: 600; }
.matrix tbody th small { display: block; color: var(--ink-muted); font-size: 14px; line-height: 20px; font-weight: 400; }
.matrix td { width: 22%; text-align: center; }
.matrix thead th:not(:first-child) { text-align: center; }
.matrix tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
.yes, .no { display: inline-block; width: 14px; height: 14px; border-radius: 999px; vertical-align: middle; }
.yes { background: var(--brown); }
.no { border: 1.5px solid var(--tan); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.key span { display: inline-flex; align-items: center; gap: 8px; }

/* Order steps */
.run { padding-block: var(--section); background: var(--sand); }
.run h2 { margin-bottom: 44px; }
.steps { position: relative; display: grid; gap: 28px; }
.steps::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--tan) 0 9px, transparent 9px 16px);
}
.steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 16px; }
.steps .n {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  outline: 6px solid var(--sand);
  background: var(--button);
  color: var(--white);
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
}
.steps h3 { padding-top: 5px; }
.steps p { color: var(--ink-muted); }
.steps .when { color: var(--brown); font-size: 14px; line-height: 20px; font-weight: 700; }
.steps li:last-child { background: var(--sand); }
.run.white { background: var(--white); }
.run.white .steps .n { outline-color: var(--white); }
.run.white .steps li:last-child { background: var(--white); }
@media (min-width: 1000px) {
  .steps li:last-child { background: none; }
  .steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .steps::before {
    top: 17px;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--tan) 0 9px, transparent 9px 16px);
  }
  .steps li { grid-template-columns: 1fr; justify-items: start; align-content: start; gap: 6px 0; }
  .steps .n { grid-row: auto; margin-bottom: 10px; }
  .steps h3 { padding-top: 0; }
}

/* Timeline bar */
.timeline { margin-top: 56px; }
.timeline h3 { margin-bottom: 16px; }
.bar-track { display: flex; gap: 4px; }
.bar-track div { min-width: 0; padding: 12px 14px; border-radius: 2px; background: var(--white); border: 1px solid var(--rule); }
.bar-track .sample { flex: 2.5 1 0; }
.bar-track .prod { flex: 7 1 0; background: var(--sand-deep); border-color: var(--sand-deep); }
.bar-track b { display: block; font-size: 15px; line-height: 21px; }
.bar-track span { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.pay { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; padding-left: calc(2.5 / 9.5 * 100%); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.pay b { color: var(--brown); }
.total { margin-top: 16px; font-weight: 600; }
@media (max-width: 559px) {
  .bar-track { flex-direction: column; }
  .pay { flex-direction: column; gap: 4px; padding-left: 0; }
}

/* Who does what */
.duty { width: 100%; border-collapse: collapse; }
.duty th, .duty td { padding: 16px 20px 16px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.duty thead th { border-top: 0; padding-block: 0 12px; color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.duty tbody th { font-weight: 700; white-space: nowrap; }
.duty td { color: var(--ink-muted); }
.duty tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
@media (max-width: 759px) {
  .duty thead { position: absolute; left: -999px; }
  .duty tbody tr { display: block; padding-block: 14px; border-top: 1px solid var(--rule); }
  .duty tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  .duty tbody tr > * { display: block; padding: 0; border: 0 !important; }
  .duty tbody td { margin-top: 6px; }
  .duty td::before { content: attr(data-who) ": "; color: var(--ink); font-weight: 700; }
}

/* Questions */
.qa { display: grid; gap: 0 72px; }
@media (min-width: 760px) { .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa div { padding-block: 20px 24px; border-top: 1px solid var(--rule); }
.qa dt { font-size: 18px; line-height: 25px; font-weight: 700; }
.qa dd { margin-top: 6px; color: var(--ink-muted); }
.faq-group + .faq-group { margin-top: clamp(48px, 7vw, 72px); }
.faq-group h2 { margin-bottom: 24px; }

/* Photo with a caption set on it */
.shot { position: relative; overflow: hidden; background: var(--sand-deep); }
.shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 64px clamp(16px, 2.4vw, 28px) clamp(16px, 2vw, 24px);
  background: linear-gradient(180deg, rgba(26, 18, 12, 0), rgba(26, 18, 12, .8));
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(20px, 1rem + .9vw, 28px);
  line-height: 1.15;
  font-weight: 450;
  letter-spacing: -.01em;
  pointer-events: none;
}
.shot figcaption span {
  display: block;
  margin-bottom: 8px;
  color: var(--sand);
  font: 700 12px/16px var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Dark bands: the unit in numbers, final inspection, contact */
.proof, .talk { background: var(--ink); color: var(--sand); }
.proof { padding-block: clamp(48px, 7vw, 88px); }
.proof .eyebrow, .talk .eyebrow { color: var(--tan-light); }
.proof h2, .talk h2, .proof h3 { color: var(--white); }
.proof .lead, .talk-head p { color: var(--on-dark); }
h2.eyebrow { font-family: var(--sans); }
.narrow { max-width: 44em; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin-top: 28px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stats.light { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats div { padding-top: 16px; border-top: 1px solid rgba(244, 238, 230, .3); }
.stats dt { color: var(--white); font-family: var(--serif); font-size: clamp(2.3rem, 1.6rem + 2.2vw, 3.6rem); line-height: 1; font-weight: 450; letter-spacing: -.02em; }
.stats dd { margin-top: 10px; color: var(--on-dark); font-size: 15px; line-height: 21px; }
.stats.light { margin-top: 0; }
.stats.light div { border-color: var(--tan); }
.stats.light dt { color: var(--ink); }
.stats.light dd { color: var(--ink-muted); }
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(244, 238, 230, .24); border: 1px solid rgba(244, 238, 230, .24); }
.points li { padding: clamp(16px, 2.4vw, 26px); background: var(--ink); }
.points p { margin-top: 4px; color: var(--on-dark); font-size: 15px; line-height: 22px; }

/* Brands the unit has produced for */
.brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 760px) { .brands { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.brands li { display: grid; place-items: center; min-height: clamp(92px, 11vw, 124px); padding: 18px; background: var(--white); }
.brands img { width: auto; max-width: min(150px, 82%); max-height: 46px; filter: grayscale(1); opacity: .86; transition: filter 200ms ease, opacity 200ms ease; }
.fine { max-width: 62em; margin-top: 14px; color: var(--ink-muted); font-size: 13px; line-height: 19px; }

/* Buyer facts */
.glance { display: grid; gap: 0 56px; }
@media (min-width: 760px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .glance { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.glance div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding-block: 16px; border-top: 1px solid var(--rule); }
.glance dt { color: var(--brown); font-size: 12px; line-height: 24px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.glance dd { font-size: 16px; line-height: 24px; }

/* Stage by stage flow */
.flow { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 560px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } .flow.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.flow li { padding: clamp(18px, 2.2vw, 26px); background: var(--white); }
.flow .n { display: block; margin-bottom: 14px; color: var(--tan); font-family: var(--serif); font-size: 32px; line-height: 1; font-weight: 450; }
.flow p { margin-top: 4px; color: var(--ink-muted); font-size: 15px; line-height: 22px; }
@media (min-width: 560px) and (max-width: 959px) { .flow.five li:last-child { grid-column: 1 / -1; } }

/* On-page links */
.jump { border-bottom: 1px solid var(--rule); }
.jump .wrap { display: flex; flex-wrap: wrap; gap: 4px 28px; padding-block: 10px; font-size: 15px; font-weight: 600; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brown); text-decoration: none; }
.product-groups > div, #moq { scroll-margin-top: 24px; }

/* Contact band and contact options */
.talk { padding-block: clamp(56px, 8vw, 96px); }
.talk-head p { margin-top: 10px; }
.ways { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 560px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ways { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ways.light { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 920px; } }
.ways a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-content: center;
  gap: 0 14px;
  height: 100%;
  min-height: 76px;
  padding: 14px 18px;
  border: 1px solid rgba(244, 238, 230, .34);
  border-radius: 2px;
  color: var(--white);
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out);
}
.ways a:active { transform: scale(.98); }
.ways svg { grid-row: span 2; align-self: center; width: 32px; height: 32px; color: var(--tan-light); }
.ui { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ways b { font-size: 17px; line-height: 24px; }
.ways span { color: var(--on-dark); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.talk .ways li:first-child a { border-color: var(--sand); background: var(--sand); color: var(--ink); }
.talk .ways li:first-child span { color: var(--ink-muted); }
.talk .ways li:first-child svg { color: var(--brown); }
.ways.light a { border-color: var(--tan); background: var(--white); color: var(--ink); }
.ways.light span { color: var(--ink-muted); }
.ways.light svg { color: var(--brown); }

/* WhatsApp button, on every page */
.wa-float {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(76px, calc(env(safe-area-inset-bottom) + 76px)); /* clears the host badge in the corner */
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px 0 14px;
  border-radius: 999px;
  background: var(--wa);
  color: var(--white);
  font: 700 15px/1 var(--sans);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(26, 18, 12, .24);
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.wa-float svg { width: 26px; height: 26px; }
.wa-float:active { transform: scale(.97); }
@media (max-width: 559px) {
  .wa-float { width: 52px; padding: 0; justify-content: center; }
  .wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media print { .wa-float { display: none; } }

/* Enquiry */
.enquiry .lead { margin-top: 16px; }
.enquiry .ways { margin-top: 28px; }
.page-head .actions { margin-top: 28px; }
.deep .btn { margin-top: 4px; }
.contact-grid { display: grid; gap: 32px 72px; }
@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head form" "help form";
  }
  .c-head { grid-area: head; }
  .c-form { grid-area: form; }
  .c-help { grid-area: help; }
}
.helps h3 { font-family: var(--sans); font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: 0; }
.helps ul { margin-top: 10px; }
.helps li { padding-block: 10px; border-top: 1px solid var(--rule); }
.contact-line { margin-top: 28px; }
.contact-line a { overflow-wrap: anywhere; }

.job {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--tan);
}
.cell {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 12px 16px;
  background: var(--white);
  transition: background-color 150ms ease;
}
.cell.wide { grid-column: 1 / -1; }
.cell:focus-within { background: var(--sand); outline: 2px solid var(--ink); outline-offset: -2px; }
.cell span { color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 700; }
.cell span i { font-style: normal; font-weight: 400; }
.cell input, .cell textarea {
  width: 100%;
  min-height: 34px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 400 17px/26px var(--sans);
  resize: vertical;
}
.cell input::placeholder, .cell textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.cell:has(:user-invalid) span { color: var(--alert); }

.job-foot {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px 32px;
  padding: 16px;
  background: var(--white);
}
.job-foot .btn { width: 100%; }
.privacy { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.privacy a { color: var(--brown); overflow-wrap: anywhere; }
.oops { grid-column: 1 / -1; color: var(--alert); font-weight: 700; }
.oops a { color: inherit; overflow-wrap: anywhere; }

@media (max-width: 559px) {
  .cell { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .job-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .job-foot .btn { width: auto; }
}

.sent { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--tan); background: var(--white); }
.sent:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.sent h2 { font-size: 40px; line-height: 1; }
.sent p { margin-top: 8px; }

/* Long text */
.prose { max-width: 42em; }
.prose h2 { margin-top: 40px; font-size: 26px; line-height: 32px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 10px; }

/* Footer */
footer { padding-block: 48px max(32px, env(safe-area-inset-bottom)); background: var(--sand); border-top: 1px solid var(--rule); font-size: 15px; line-height: 23px; }
.foot { display: grid; gap: 28px 56px; }
.foot .word { display: inline-block; margin-bottom: 8px; }
.foot ul { display: grid; align-content: start; gap: 6px; }
.foot p { color: var(--ink-muted); }
.foot p + p { margin-top: 10px; }
.foot a { text-decoration: none; }
.foot .mail { overflow-wrap: anywhere; color: var(--ink); text-decoration: underline; }
.foot-base { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink-muted); font-size: 14px; }
@media (min-width: 760px) {
  .foot { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .foot ul { gap: 0; }
  .foot ul a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover, .nav .cta:hover { background: var(--ink); }
  .cards li:hover img { transform: scale(1.03); }
  .brands li:hover img { filter: none; opacity: 1; }
  .jump a:hover { text-decoration: underline; }
  .ways a:hover { border-color: var(--tan-light); background: rgba(244, 238, 230, .08); }
  .talk .ways li:first-child a:hover { background: var(--white); }
  .ways.light a:hover { border-color: var(--brown); background: var(--sand); }
  .wa-float:hover { background: #166640; }
  .btn[disabled]:hover { background: var(--ink-muted); }
  .nav a:not(.cta):hover, .foot a:hover { text-decoration: underline; }
}

/* v5: a calmer layout. More space, centred heads, soft rounded tiles in place of ruled grids. */
:root { --section: clamp(80px, 11vw, 136px); --r: 20px; }
html { scroll-padding-top: 88px; }
.top { position: sticky; top: 0; z-index: 4; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }
.btn { padding: 0 30px; border-radius: 999px; }
.nav .cta { padding: 0 18px; border-radius: 999px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.center { text-align: center; }
.head.center { display: block; max-width: 44em; margin: 0 auto clamp(32px, 4vw, 52px); text-align: center; }
.head.center .muted { margin-top: 14px; font-size: 18px; line-height: 27px; }
.run .head h2 { margin-bottom: 0; }
.after-xl { margin-top: clamp(32px, 4vw, 56px); }
.tight { padding-block: clamp(36px, 5vw, 64px) var(--section); }
.fine { margin-inline: auto; text-align: center; }

/* Three ways in */
.doors { display: grid; gap: 12px; }
@media (min-width: 760px) { .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.doors a { display: grid; align-content: start; gap: 6px; height: 100%; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r); background: var(--sand); text-decoration: none; transition: background-color 200ms ease; }
.doors .eyebrow { margin-bottom: 6px; font-size: 12px; }
.doors b { font-family: var(--serif); font-size: clamp(24px, 1.2rem + .8vw, 30px); line-height: 1.1; font-weight: 450; letter-spacing: -.01em; }
.doors span:not(.eyebrow) { color: var(--ink-muted); font-size: 16px; line-height: 24px; }
.doors i { margin-top: 14px; color: var(--brown); font-size: 15px; font-style: normal; font-weight: 700; }
.doors i::after { content: " \203A"; }

/* The range as a chart */
.range { display: grid; gap: clamp(28px, 4vw, 40px) 12px; }
.range-group h3 { margin-bottom: 14px; color: var(--brown); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.range ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.range li { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 18px 8px 16px; border-radius: 16px; background: var(--sand); font-size: 14px; line-height: 19px; font-weight: 600; text-align: center; }
.sand .range li { background: var(--white); }
.range svg { width: 64px; fill: none; stroke: var(--brown); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 560px) { .range ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1100px) {
  .range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range-group:first-child { grid-column: 1 / -1; }
  .range-group:first-child ul { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* Photos and tiles */
.cards .ph, .shot, .stage-photo, .packshot img { border-radius: var(--r); }
.stage-photo { overflow: hidden; }
.ph.plain img { mix-blend-mode: normal; }
.cards h3 { font-size: 16px; line-height: 22px; font-weight: 600; }
@media (min-width: 1100px) { .cards.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }
.services, .flow, .brands { gap: 12px; border: 0; background: none; }
.services li, .flow li { border-radius: var(--r); background: var(--sand); }
.sand .services li, .sand .flow li { background: var(--white); }
.brands li { border: 1px solid var(--rule); border-radius: 16px; }
.stats.light { text-align: center; }
@media (min-width: 760px) { .stats.light { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.stats.light div { padding-top: 0; border-top: 0; }
.also { justify-content: center; }
@media (hover: hover) and (pointer: fine) {
  .doors a:hover { background: var(--sand-deep); }
  .btn.ghost:hover { background: var(--ink); color: var(--white); }
}

/* Draft review tags. The live build leaves these out. */
.q, .draft-note { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cards img, .wa-float, .ways a { transition: none; }
}
.draft .q {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 2px;
  background: #ffe14d;
  color: #2a2019;
  font: 700 12px/18px var(--sans);
  letter-spacing: 0;
  vertical-align: middle;
  text-indent: 0;
  text-transform: none;
}
.draft .draft-note {
  display: block;
  padding: 8px var(--gutter);
  background: #ffe14d;
  color: #2a2019;
  font: 600 13px/18px var(--sans);
  text-align: center;
}