/* ═══════════════════════════════════════════════════════════════════
   PIECEWORK — style.css
   World: greige goods. Cloth off the loom, unbleached and undyed.
   Palette in the YEEZY register: bone, sand, taupe, onyx. Tonal, not
   contrasty. No chromatic accent anywhere — a solid onyx block IS the
   accent. Zero border-radius. No cards.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  --bone:   #E7E1D6;   /* the ground — unbleached calico */
  --sand:   #D8D0C2;   /* second field */
  --taupe:  #B6AB99;   /* rules and hairlines only, never text */
  --earth:  #564E41;   /* secondary text — passes on bone and on sand */
  --onyx:   #171614;   /* ink, and the dark field */
  --cinder: #23211E;   /* lifted panel inside the dark field */
  --pitch:  #0F0E0D;   /* input wells */
  --dust:   #A79E90;   /* secondary text on onyx */

  --rule-l: rgba(23,22,20,.17);
  --rule-d: rgba(231,225,214,.17);
  --rule-d-lit: rgba(231,225,214,.34);

  --display:"acumin-pro",system-ui,-apple-system,"Segoe UI",Helvetica,sans-serif;
  --text:   "acumin-pro",system-ui,-apple-system,"Segoe UI",Helvetica,sans-serif;

  --maxw: 1180px;
  --pad:  max(clamp(1.25rem,5vw,5rem), calc((100vw - var(--maxw)) / 2));

  --ease: cubic-bezier(.16,1,.3,1);

  /* ── CLOTH TEXTURE ────────────────────────────────────────────────
     All of it inline: no image files, no extra requests. A site that
     promises to open on one bar of signal cannot buy its depth with
     downloads.                                                       */

  /* fibre — the tooth of the paper and the fuzz of raw cotton */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");

  /* twill — the diagonal weave of drill and denim, 3px pick */
  --twill:  repeating-linear-gradient(63deg, transparent 0 3px, rgba(86,78,65,.052) 3px 4px);
  --twill-d:repeating-linear-gradient(63deg, transparent 0 3px, rgba(231,225,214,.030) 3px 4px);

  /* slub — irregular thread. A non-harmonic period beats against the
     twill so the weave never reads as graph paper.                   */
  --slub:  repeating-linear-gradient(63deg, transparent 0 17px, rgba(86,78,65,.032) 17px 18px);
  --slub-d:repeating-linear-gradient(63deg, transparent 0 17px, rgba(231,225,214,.020) 17px 18px);

  /* light falling across a bolt of cloth */
  --drape:  linear-gradient(102deg, rgba(86,78,65,.11) 0%, transparent 26%, transparent 64%, rgba(86,78,65,.075) 100%);
  --drape-d:linear-gradient(102deg, rgba(0,0,0,.42) 0%, transparent 28%, transparent 66%, rgba(0,0,0,.30) 100%);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  background:var(--bone);         /* paint the root, always */
  color:var(--onyx);
}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--text);
  font-size:clamp(1rem,.96rem + .22vw,1.125rem);
  line-height:1.62;
  font-weight:400;
  overflow-wrap:break-word;
  overflow-x:clip;                /* clip, not hidden — hidden kills sticky */
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ── browser surfaces: the parts nobody draws ─────────────────────── */
::selection{ background:var(--onyx); color:var(--bone); }
:root{ scrollbar-color: var(--taupe) var(--bone); scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bone); }
::-webkit-scrollbar-thumb{ background:var(--taupe); border:3px solid var(--bone); }
::-webkit-scrollbar-thumb:hover{ background:var(--earth); }
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--onyx);
  outline-offset:3px;
}
.sec--onyx :where(a,button,input,textarea,select,[tabindex]):focus-visible,
.foot :where(a,button):focus-visible{ outline-color:var(--bone); }
input,textarea{ caret-color:var(--bone); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--onyx); color:var(--bone);
  padding:.75rem 1.25rem; font-weight:600; text-decoration:none;
}
.skip:focus{ left:0; }

/* ═══ TYPE ════════════════════════════════════════════════════════
   One family, whole site. Scale and weight do all the work.        */

.h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.125rem,1.35rem + 3.3vw,3.75rem);
  line-height:.94;
  letter-spacing:-.035em;
  text-transform:uppercase;
  text-wrap:balance;
  margin:0;
  color:var(--onyx);
}
.h2--light{ color:var(--bone); }

.lede{
  font-size:clamp(1.0625rem,1rem + .38vw,1.3125rem);
  line-height:1.5;
  max-width:46ch;
  margin:0 0 1.1rem;
  color:var(--onyx);
}
.lede--quiet{ color:var(--earth); }

/* ═══ NAV ═════════════════════════════════════════════════════════ */

.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:2rem;
  padding:.9rem var(--pad);
  background:rgba(231,225,214,.9);
  border-bottom:1px solid var(--rule-l);
  color:var(--onyx);
}
@supports (backdrop-filter:blur(8px)){
  .nav{ backdrop-filter:blur(12px) saturate(1.1); }
}
.nav__mark{
  display:flex; align-items:baseline; gap:.6rem;
  text-decoration:none; margin-right:auto;
}
.nav__mark-name{
  font-family:var(--display); font-weight:700; font-size:1.1875rem;
  letter-spacing:-.02em; line-height:1; text-transform:uppercase;
}
.nav__mark-sub{
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--earth); font-weight:500;
}
.nav__links{ display:flex; gap:1.75rem; }
.nav__links a{
  font-size:.8125rem; letter-spacing:.09em; text-transform:uppercase;
  font-weight:500; text-decoration:none; color:var(--earth);
  padding:.35rem 0; position:relative; transition:color .2s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--onyx); transition:right .35s var(--ease);
}
.nav__links a:hover{ color:var(--onyx); }
.nav__links a:hover::after{ right:0; }
.nav__cta{
  font-size:.8125rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none;
  color:var(--bone); background:var(--onyx);
  padding:.62rem 1.15rem; white-space:nowrap;
  transition:background .2s var(--ease);
}
.nav__cta:hover{ background:var(--earth); }
@media (max-width:860px){
  .nav__links{ display:none; }
  .nav{ gap:1rem; }
}

/* ═══ HERO ════════════════════════════════════════════════════════ */

.hero{
  position:relative;
  background-color:var(--bone);   /* every section paints its own ground */
  background-image:var(--drape),var(--twill),var(--slub);
  color:var(--onyx);
  padding:clamp(4.5rem,11vh,9rem) var(--pad) 0;
  isolation:isolate;
}
/* the weave, seen close: warp and weft over the twill beneath */
.hero__weave{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(86,78,65,.11) 23px 24px),
    repeating-linear-gradient(0deg,  transparent 0 23px, rgba(86,78,65,.06)  23px 24px);
  -webkit-mask-image:linear-gradient(170deg,#000 0%,rgba(0,0,0,.55) 46%,transparent 88%);
          mask-image:linear-gradient(170deg,#000 0%,rgba(0,0,0,.55) 46%,transparent 88%);
}
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
  padding-bottom:clamp(3rem,8vh,5.5rem);
}
.hero__h{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.9rem,1.1rem + 8.4vw,6rem);
  line-height:.86;
  letter-spacing:-.042em;
  text-transform:uppercase;
  margin:0;
  color:var(--onyx);
}
.hero__body{ padding-bottom:.5rem; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; }

.tally{
  list-style:none; margin:0; padding:0 0 clamp(2.5rem,6vh,4rem);
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--rule-l);
}
.tally li{
  flex:1 1 12rem;
  padding:1.1rem 1.5rem 0 0;
  font-size:.8125rem; letter-spacing:.02em;
  color:var(--earth);
}
.tally li + li{ padding-left:1.5rem; border-left:1px solid var(--rule-l); }
.tally span{
  display:block; color:var(--onyx); font-weight:700;
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:.3rem;
}
@media (max-width:860px){
  .hero__inner{ grid-template-columns:1fr; align-items:start; }
  .hero__h{ margin-bottom:1.5rem; }
  .tally li + li{ padding-left:0; border-left:0; border-top:1px solid var(--rule-l); }
  .tally li{ flex:1 1 100%; }
}

/* ═══ BUTTONS ═════════════════════════════════════════════════════ */

.btn{
  display:inline-block; text-decoration:none;
  font-size:.75rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  padding:1.05rem 2.4rem; border:1px solid transparent;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  cursor:pointer;
}
.btn--solid{
  background:var(--onyx); color:var(--bone);
  box-shadow:0 12px 24px -12px rgba(23,22,20,.85);
}
.btn--solid:hover{ background:var(--earth); box-shadow:0 16px 30px -12px rgba(23,22,20,.9); }
.btn--invert{
  background:var(--bone); color:var(--onyx);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.75);
}
.btn--invert:hover{ background:var(--dust); }
.btn--ghost{ background:transparent; color:var(--onyx); border-color:var(--taupe); }
.btn--ghost:hover{ border-color:var(--onyx); background:rgba(23,22,20,.05); }
.btn--wide{ width:100%; font-size:.875rem; padding:1.1rem 1.75rem; }

/* ═══ SECTION SHELLS ══════════════════════════════════════════════ */

.sec{
  padding:clamp(5rem,13vh,10rem) var(--pad);   /* boutique air */
  position:relative;
  isolation:isolate;              /* keep blend modes inside the field */
}
.sec--bone{
  background-color:var(--bone); color:var(--onyx);
  background-image:var(--drape),var(--twill),var(--slub);
}
.sec--sand{
  background-color:var(--sand); color:var(--onyx);
  background-image:var(--drape),var(--twill),var(--slub);
}
.sec--onyx{
  background-color:var(--onyx); color:var(--bone);
  background-image:var(--drape-d),var(--twill-d),var(--slub-d);
}

/* fibre, over everything in the field */
.sec::after,.hero::after,.foot::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:var(--grain); background-size:260px 260px;
  opacity:.06; mix-blend-mode:multiply;
}
.sec--onyx::after,.foot::after{ opacity:.16; mix-blend-mode:overlay; }
.sec > *,.hero__inner,.hero .tally,.foot > *{ position:relative; z-index:2; }

/* the fold — cloth turned over at the top of each field */
.sec::before{
  content:''; position:absolute; left:0; right:0; top:0; height:88px;
  pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(86,78,65,.10), transparent);
}
.sec--onyx::before{ background:linear-gradient(180deg, rgba(0,0,0,.55), transparent); }
.sec--onyx + .sec--onyx::before{ display:none; }

.sec__head{ max-width:38ch; margin-bottom:clamp(2.5rem,6vh,4rem); }
.sec__intro{
  margin:1.1rem 0 0; font-size:1.0625rem; line-height:1.55;
  color:var(--earth); max-width:44ch;
}
.sec__intro--light{ color:var(--dust); }

/* ═══ LEDGER — the piece ticket, opened out ═══════════════════════ */

.ledger{ margin:0; border-top:1px solid var(--rule-l); }
.ledger__row{
  display:grid;
  grid-template-columns:minmax(9rem,15ch) minmax(0,1fr);
  gap:clamp(1rem,4vw,3.5rem);
  padding:1.4rem 0;
  border-bottom:1px solid var(--rule-l);
}
.ledger dt{
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--onyx);
  padding-top:.3rem;
}
.ledger dd{
  margin:0; max-width:66ch; color:var(--earth);
  font-size:1.0625rem; line-height:1.55;
}
@media (max-width:680px){
  .ledger__row{ grid-template-columns:1fr; gap:.4rem; }
}

/* ═══ WORK — three pieces off the bolt ════════════════════════════ */

.piece{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  column-gap:clamp(2rem,5vw,4.5rem);
  row-gap:1.75rem;
  padding:clamp(2.75rem,6vh,4.5rem) 0;
  border-top:1px solid var(--rule-d);
  align-items:start;
}
.piece:last-child{ border-bottom:1px solid var(--rule-d); }

.piece__ticket{ grid-column:1; grid-row:1; }
.piece__body  { grid-column:1; grid-row:2; }
.piece__plate { grid-column:2; grid-row:1 / span 2; }

.piece:nth-of-type(even) .piece__ticket,
.piece:nth-of-type(even) .piece__body { grid-column:2; }
.piece:nth-of-type(even) .piece__plate{ grid-column:1; }

.piece__no{
  display:inline-block;
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--onyx); background:var(--bone);
  padding:.32rem .62rem; margin-bottom:1.1rem;
  font-variant-numeric:tabular-nums;
}
.piece__ticket dl{ margin:0; display:grid; gap:.55rem; }
.piece__ticket dl > div{
  display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:1rem;
  font-size:.8125rem; line-height:1.4;
}
.piece__ticket dt{
  letter-spacing:.15em; text-transform:uppercase; font-size:.6875rem;
  color:var(--dust); font-weight:600; padding-top:.12rem;
}
.piece__ticket dd{ margin:0; color:var(--bone); }
.piece__ticket a{ color:var(--bone); text-decoration:underline; text-decoration-color:var(--rule-d-lit); text-underline-offset:.28em; }
.piece__ticket a:hover{ text-decoration-color:var(--bone); }

.piece__name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.625rem,1.15rem + 1.9vw,2.5rem);
  line-height:1; letter-spacing:-.032em; text-transform:uppercase;
  margin:1.6rem 0 1rem; color:var(--bone);
}
.piece__body p{ margin:0 0 1rem; color:var(--dust); max-width:52ch; }

.piece__plate{
  position:relative; display:block; text-decoration:none;
  aspect-ratio:16/10; overflow:hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(231,225,214,.045) 7px 8px),
    repeating-linear-gradient(0deg,  transparent 0 7px, rgba(231,225,214,.045) 7px 8px),
    var(--cinder);
  border:1px solid var(--rule-d);
  /* the plate sits ON the cloth, not in it */
  box-shadow:0 26px 50px -18px rgba(0,0,0,.72), 0 4px 12px -4px rgba(0,0,0,.45);
  transition:box-shadow .5s var(--ease);
}
.piece__plate:hover{
  box-shadow:0 34px 64px -18px rgba(0,0,0,.8), 0 6px 16px -4px rgba(0,0,0,.5);
}
.piece__plate img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .8s var(--ease), filter .5s var(--ease);
  filter:saturate(.9);
}
.piece__plate:hover img{ transform:scale(1.028); filter:saturate(1); }

/* the live site, running in the frame. Screenshot stays underneath as the
   fallback for anything that refuses to be framed. */
.piece__live{
  position:absolute; inset:0; overflow:hidden;
  opacity:0; transition:opacity .9s var(--ease);
  pointer-events:none;
}
.piece__live.is-ready{ opacity:1; }
.piece__live iframe{
  display:block; border:0; width:1280px; height:800px;
  transform-origin:top left; pointer-events:none;
}
.piece__plate-url{
  position:absolute; left:0; bottom:0;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600;
  color:var(--onyx); background:var(--bone);
  padding:.5rem .85rem;
  transform:translateY(100%);
  transition:transform .4s var(--ease);
}
.piece__plate:hover .piece__plate-url,
.piece__plate:focus-visible .piece__plate-url{ transform:translateY(0); }

@media (max-width:880px){
  .piece{ grid-template-columns:1fr; }
  .piece__ticket,.piece__body,.piece__plate,
  .piece:nth-of-type(even) .piece__ticket,
  .piece:nth-of-type(even) .piece__body,
  .piece:nth-of-type(even) .piece__plate{ grid-column:1; grid-row:auto; }
  .piece__plate-url{ transform:translateY(0); }
}

/* the one authored moment: cloth coming off the bolt.
   Default is fully visible — only the JS build hides it first. */
.js .reveal .piece__plate{ clip-path:inset(0 0 100% 0); }
.js .reveal .piece__ticket,
.js .reveal .piece__body{ opacity:0; transform:translateY(14px); }
.js .reveal.is-in .piece__plate{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--ease);
}
.js .reveal.is-in .piece__ticket,
.js .reveal.is-in .piece__body{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease) .12s, transform .7s var(--ease) .12s;
}
.js .reveal.is-in .piece__body{ transition-delay:.2s; }

/* ═══ PROCESS ═════════════════════════════════════════════════════ */

.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--rule-l);
}
.steps li{ padding:2rem clamp(1rem,2.5vw,2rem) 0 0; }
.steps li + li{
  padding-left:clamp(1rem,2.5vw,2rem);
  border-left:1px solid var(--rule-l);
}
.steps__n{
  display:block;
  font-family:var(--display); font-weight:700;
  font-size:2.25rem; line-height:1; letter-spacing:-.04em;
  color:var(--taupe); margin-bottom:.9rem;
  font-variant-numeric:tabular-nums;
}
.steps h3{
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; margin:0 0 .6rem; color:var(--onyx);
}
.steps p{ margin:0; font-size:.9375rem; line-height:1.55; color:var(--earth); }
@media (max-width:900px){
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps li:nth-child(odd){ padding-left:0; border-left:0; }
  .steps li:nth-child(n+3){ border-top:1px solid var(--rule-l); margin-top:2rem; }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
  .steps li{ padding:1.75rem 0 0; border-left:0 !important; margin-top:0 !important; }
  .steps li + li{ border-top:1px solid var(--rule-l); }
}

/* ═══ PRICE ═══════════════════════════════════════════════════════ */

.price{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}
.price__fig{ border-top:3px solid var(--onyx); padding-top:1.25rem; }
.price__from{
  display:block; font-size:.6875rem; letter-spacing:.24em;
  text-transform:uppercase; font-weight:700; color:var(--earth);
  margin-bottom:.5rem;
}
.price__num{
  display:block;
  font-family:var(--display); font-weight:700;
  font-size:clamp(3.75rem,2rem + 8.5vw,6rem);
  line-height:.82; letter-spacing:-.05em; color:var(--onyx);
  font-variant-numeric:tabular-nums;
}
.price__body p{ margin:1.1rem 0 0; max-width:56ch; color:var(--earth); }
.price__body .h2 + p{ margin-top:1.4rem; }
.price__notes{ margin:2.5rem 0 0; border-top:1px solid var(--rule-l); }
.price__notes > div{
  display:grid; grid-template-columns:minmax(8rem,13ch) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);
  padding:1.15rem 0; border-bottom:1px solid var(--rule-l);
}
.price__notes dt{
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--onyx); padding-top:.28rem;
}
.price__notes dd{ margin:0; font-size:.9375rem; line-height:1.55; color:var(--earth); }
@media (max-width:820px){
  .price{ grid-template-columns:1fr; }
  .price__notes > div{ grid-template-columns:1fr; gap:.35rem; }
}

/* ═══ WHO ═════════════════════════════════════════════════════════ */

.sec--who{ padding-bottom:clamp(2rem,5vh,3.5rem); }
.who{
  display:grid;
  grid-template-columns:minmax(0,.58fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.who__portrait{
  aspect-ratio:4/5;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(231,225,214,.045) 7px 8px),
    repeating-linear-gradient(0deg,  transparent 0 7px, rgba(231,225,214,.045) 7px 8px),
    var(--cinder);
  border:1px solid var(--rule-d);
  overflow:hidden;
  box-shadow:0 26px 50px -18px rgba(0,0,0,.7), 0 4px 12px -4px rgba(0,0,0,.4);
}
.who__portrait img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.2) saturate(.85); }
.who__body p{ margin:1.3rem 0 0; color:var(--dust); max-width:54ch; }
@media (max-width:760px){
  .who{ grid-template-columns:1fr; }
  .who__portrait{ max-width:20rem; }
}

/* ═══ ENQUIRE ═════════════════════════════════════════════════════ */

.sec--enq{ padding-top:clamp(3rem,7vh,5rem); }
.enquire{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
  border-top:1px solid var(--rule-d);
  padding-top:clamp(2.5rem,6vh,4rem);
}
.enquire__side p{ margin:1.3rem 0 0; color:var(--dust); max-width:36ch; }
.enquire__alt{ font-size:.9375rem; }
.enquire__alt a{ color:var(--bone); text-underline-offset:.28em; }

.form__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem 1.25rem;
}
.field{ margin:0; display:flex; flex-direction:column; gap:.45rem; }
.field--wide{ grid-column:1 / -1; }
.field label{
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--dust);
}
.field input,.field textarea{
  font:inherit; font-size:1rem;
  color:var(--bone); background:var(--pitch);
  border:1px solid var(--rule-d-lit); border-radius:0;
  padding:.8rem .9rem;
  transition:border-color .2s var(--ease);
  width:100%;
  box-shadow:inset 0 3px 8px -2px rgba(0,0,0,.6);   /* a well, not a rectangle */
}
.field textarea{ resize:vertical; min-height:7rem; }
.field input::placeholder,.field textarea::placeholder{ color:var(--dust); }
.field input:hover,.field textarea:hover{ border-color:rgba(231,225,214,.5); }
.field input:focus,.field textarea:focus{ border-color:var(--bone); outline:none; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.consent{
  display:flex; gap:.7rem; align-items:flex-start;
  margin:1.4rem 0 1.6rem; font-size:.875rem; color:var(--dust);
}
.consent input{ margin-top:.28rem; accent-color:var(--bone); width:1rem; height:1rem; flex:none; }
.consent a{ color:var(--bone); text-underline-offset:.28em; }

.form__fallback{ margin:1rem 0 0; font-size:.8125rem; color:var(--dust); }
.form__fallback a{ color:var(--bone); text-underline-offset:.28em; }

@media (max-width:820px){ .enquire{ grid-template-columns:1fr; } }
@media (max-width:560px){ .form__grid{ grid-template-columns:1fr; } }

/* ═══ FOOTER ══════════════════════════════════════════════════════ */

.foot{
  background-color:var(--onyx); color:var(--bone);
  background-image:var(--drape-d),var(--twill-d),var(--slub-d);
  padding:clamp(3rem,7vh,4.5rem) var(--pad) 7rem;
  border-top:1px solid var(--rule-d);
  position:relative; isolation:isolate;
}
.foot__top{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.75rem;
  padding-bottom:2.5rem;
}
.foot__mark{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2rem,1.2rem + 3vw,3.25rem);
  letter-spacing:-.04em; line-height:1; text-transform:uppercase;
  text-decoration:none;
}
.foot__line{ margin:0; color:var(--dust); font-size:.9375rem; }
.foot__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem;
  padding-top:1.5rem; border-top:1px solid var(--rule-d);
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dust);
}
.foot__bottom p{ margin:0; }
.foot__bottom nav{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.foot__bottom a{ text-decoration:none; }
.foot__bottom a:hover{ color:var(--bone); }

/* ═══ MOBILE CALL BAR ═════════════════════════════════════════════ */

.mcall{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:var(--bone); color:var(--onyx);
  border-top:1px solid var(--onyx);
  text-align:center; text-decoration:none;
  font-weight:700; font-size:.8125rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));
}
@media (max-width:760px){
  .mcall{ display:block; }
  .foot{ padding-bottom:6.5rem; }
}

/* ═══ WORK PAGE — the pattern book ════════════════════════════════
   A different skeleton from the homepage: contents index up front,
   then each piece full-bleed on its own field, plate on a plinth,
   spec column sticky beside the reasoning.                          */

.hero--work{ padding-bottom:clamp(3rem,8vh,5rem); }
.wk-head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
  padding-bottom:clamp(3rem,8vh,5rem);
}
.wk-head .lede{ margin-bottom:.5rem; max-width:38ch; }
@media (max-width:860px){
  .wk-head{ grid-template-columns:1fr; align-items:start; }
}

/* contents — the pattern book's index */
.contents{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--rule-l);
}
.contents a{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) auto;
  gap:1.5rem; align-items:baseline;
  padding:1.6rem 0;
  border-bottom:1px solid var(--rule-l);
  text-decoration:none;
  transition:padding-left .35s var(--ease), background .35s var(--ease);
}
.contents a:hover{ padding-left:1rem; background:rgba(23,22,20,.035); }
.contents__no{
  font-size:.6875rem; letter-spacing:.3em; font-weight:600;
  color:var(--earth); font-variant-numeric:tabular-nums;
}
.contents__name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.375rem,1rem + 1.6vw,2.125rem);
  letter-spacing:-.025em; text-transform:uppercase; line-height:1;
  color:var(--onyx);
}
.contents__meta{
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:500; color:var(--earth); text-align:right;
}
@media (max-width:640px){
  .contents a{ grid-template-columns:3.5rem minmax(0,1fr); }
  .contents__meta{ display:none; }
}

/* case study shell — inherits its field colour from .sec--onyx/.sec--sand */
.cs{
  padding:clamp(5rem,13vh,10rem) var(--pad);
  position:relative; isolation:isolate;
}
.cs > *{ position:relative; z-index:2; }
.cs::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:var(--grain); background-size:260px 260px;
  opacity:.06; mix-blend-mode:multiply;
}
.cs.sec--onyx::after{ opacity:.16; mix-blend-mode:overlay; }
.cs::before{
  content:''; position:absolute; left:0; right:0; top:0; height:88px;
  pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(86,78,65,.10), transparent);
}
.cs.sec--onyx::before{ background:linear-gradient(180deg, rgba(0,0,0,.55), transparent); }

/* the plate on its plinth — centred like an object in a boutique */
.cs__plate{
  position:relative; display:block; text-decoration:none;
  width:min(100%, 880px);
  margin:0 auto clamp(3rem,8vh,5.5rem);
  aspect-ratio:16/10; overflow:hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(231,225,214,.045) 7px 8px),
    repeating-linear-gradient(0deg,  transparent 0 7px, rgba(231,225,214,.045) 7px 8px),
    var(--cinder);
  border:1px solid var(--rule-d);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.75), 0 6px 18px -6px rgba(0,0,0,.45);
  transition:box-shadow .5s var(--ease);
}
.sec--sand .cs__plate{
  border-color:var(--rule-l);
  box-shadow:0 40px 80px -24px rgba(56,50,41,.55), 0 6px 18px -6px rgba(56,50,41,.3);
}
.cs__plate:hover{
  box-shadow:0 52px 96px -24px rgba(0,0,0,.82), 0 8px 22px -6px rgba(0,0,0,.5);
}
.cs__plate img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .8s var(--ease), filter .5s var(--ease);
  filter:saturate(.9);
}
.cs__plate:hover img{ transform:scale(1.024); filter:saturate(1); }
.cs__plate--product img{ object-position:center; }
.cs__plate .piece__plate-url{
  position:absolute; left:0; bottom:0;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--onyx); background:var(--bone);
  padding:.5rem .85rem;
  transform:translateY(100%); transition:transform .4s var(--ease);
}
.cs__plate:hover .piece__plate-url,
.cs__plate:focus-visible .piece__plate-url{ transform:translateY(0); }

/* spec + reasoning */
.cs__grid{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5.5rem);
  align-items:start;
  max-width:1020px; margin:0 auto;
}
.cs__spec{ position:sticky; top:5.5rem; }
.cs__name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.625rem,1.15rem + 1.9vw,2.5rem);
  line-height:1; letter-spacing:-.032em; text-transform:uppercase;
  margin:1.4rem 0 1.5rem;
}
.sec--onyx .cs__name{ color:var(--bone); }
.sec--sand .cs__name{ color:var(--onyx); }
.cs__spec dl{ margin:0; display:grid; gap:.6rem; border-top:1px solid var(--rule-d); padding-top:1.2rem; }
.sec--sand .cs__spec dl{ border-top-color:var(--rule-l); }
.cs__spec dl > div{
  display:grid; grid-template-columns:7rem minmax(0,1fr); gap:1rem;
  font-size:.8125rem; line-height:1.45;
}
.cs__spec dt{
  letter-spacing:.26em; text-transform:uppercase; font-size:.625rem;
  font-weight:600; padding-top:.15rem;
}
.sec--onyx .cs__spec dt{ color:var(--dust); }
.sec--sand .cs__spec dt{ color:var(--earth); }
.cs__spec dd{ margin:0; }
.sec--onyx .cs__spec dd{ color:var(--bone); }
.sec--sand .cs__spec dd{ color:var(--onyx); }
.cs__spec a{ text-underline-offset:.28em; }

.piece__no--dark{ color:var(--bone); background:var(--onyx); }

.cs__body h3{
  font-size:.6875rem; letter-spacing:.3em; text-transform:uppercase;
  font-weight:700; margin:2.4rem 0 .8rem;
}
.cs__body h3:first-child{ margin-top:.4rem; }
.sec--onyx .cs__body h3{ color:var(--dust); }
.sec--sand .cs__body h3{ color:var(--earth); }
.cs__body p{ margin:0 0 1rem; max-width:58ch; }
.sec--onyx .cs__body p{ color:var(--bone); }
.sec--sand .cs__body p{ color:#3E3830; }

@media (max-width:860px){
  .cs__grid{ grid-template-columns:1fr; }
  .cs__spec{ position:static; top:auto; }   /* reset the offset too */
}

/* close */
.wk-close{ text-align:center; }
.wk-close .lede{ margin:1.4rem auto 2.2rem; }
.wk-close .hero__acts{ justify-content:center; margin-top:0; }

/* ═══ LEGAL ═══════════════════════════════════════════════════════ */
.legal__body{ max-width:62ch; margin-top:clamp(2rem,5vh,3rem); }
.legal__body h2{
  font-size:.6875rem; letter-spacing:.3em; text-transform:uppercase;
  font-weight:700; color:var(--earth); margin:2.2rem 0 .7rem;
}
.legal__body p{ margin:0 0 1rem; color:#3E3830; }
.legal__body a{ color:var(--onyx); text-underline-offset:.28em; }
.legal__date{ margin-top:2.5rem; font-size:.8125rem; color:var(--earth); }

.sec__more{
  display:block; margin-top:1rem;
  font-size:.6875rem; letter-spacing:.26em; text-transform:uppercase;
  font-weight:700; text-decoration:none; color:var(--bone);
}
.sec__more:hover{ text-decoration:underline; text-underline-offset:.35em; }

/* ═══ CASE-STUDY TESTIMONIAL ══════════════════════════════════════
   Lives at the end of the case it belongs to, so the quote sits
   beside the evidence rather than in a strip of its own.           */

.cs__quote{
  max-width:38ch;
  margin:clamp(3.5rem,9vh,6rem) auto 0;
  padding-top:clamp(2rem,5vh,3rem);
  border-top:1px solid var(--rule-d);
  text-align:center;
}
.sec--sand .cs__quote{ border-top-color:var(--rule-l); }

.cs__quote p{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);
  line-height:1.3; letter-spacing:-.018em;
  margin:0 0 1.6rem; text-wrap:balance;
}
.sec--onyx .cs__quote p{ color:var(--bone); }
.sec--sand .cs__quote p{ color:var(--onyx); }

.cs__quote footer{ display:grid; gap:.3rem; }
.cs__quote-who{
  font-size:.6875rem; letter-spacing:.26em; text-transform:uppercase;
  font-weight:700;
}
.cs__quote-role{
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:500;
}
.sec--onyx .cs__quote-who{ color:var(--bone); }
.sec--onyx .cs__quote-role{ color:var(--dust); }
.sec--sand .cs__quote-who{ color:var(--onyx); }
.sec--sand .cs__quote-role{ color:var(--earth); }

/* ═══ BRAND MARKS ═════════════════════════════════════════════════
   Traced from the supplied artwork to vector, then painted with
   currentColor via mask so one file serves the onyx nav and the
   bone footer. No second asset, no recolour on the server.        */

.brand-mark,
.brand-word{
  display:block;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.brand-mark{
  -webkit-mask-image:url("mark.svg"); mask-image:url("mark.svg");
  aspect-ratio:181/179;
}
.brand-word{
  -webkit-mask-image:url("wordmark.svg"); mask-image:url("wordmark.svg");
  aspect-ratio:418/94;
}

/* nav lockup */
.nav__mark{ gap:.7rem; }
.nav__mark .brand-mark{ height:1.5rem; }
.nav__mark .brand-word{ height:1.05rem; }
.nav__mark-sub{ align-self:center; }

/* footer */
.foot__mark{ display:block; }
.foot__mark .brand-word{ width:min(19rem,60vw); height:auto; }

.vh{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── nav lockup, second pass: bigger, cleaner, no location tag ───── */
.nav{ padding-top:1.15rem; padding-bottom:1.15rem; }
.nav__mark{ align-items:center; gap:.85rem; }
.nav__mark .brand-mark{ height:2rem; }
.nav__mark .brand-word{ height:1.75rem; }
@media (max-width:560px){
  .nav__mark .brand-mark{ height:1.75rem; }
  .nav__mark .brand-word{ height:1.5rem; }
}

/* ── wordmark sits midway between the mark and the nav links ──────
   The anchor stretches to fill the run between them; auto margins
   then centre the wordmark inside whatever space is left. Works at
   every width, no breakpoint needed. Pointer events are switched
   off on the stretched anchor and back on for the artwork, so the
   empty band isn't a surprise click target. */
.nav{ gap:0; }                    /* the bar's own gap would sit outside the
                                     stretched anchor and shove the wordmark
                                     left of the true midpoint */
.nav__mark{
  flex:1 1 auto;
  pointer-events:none;
  gap:0;
}
.nav__mark .brand-mark{ flex:none; pointer-events:auto; }
.nav__mark .brand-word{
  margin:0 auto;                  /* centres in whatever run is left */
  padding:0 1.25rem;              /* never butts up against either neighbour */
  box-sizing:content-box;
  pointer-events:auto;
}

/* ═══ HERO — CRAFT PASS ═══════════════════════════════════════════
   Same composition. What changes: vertical rhythm, a real third
   tier in the type scale, the stat row demoted out of the
   big-number-plus-label template, and one entrance in the same
   cloth grammar the work plates use.                               */

/* ── rhythm ──────────────────────────────────────────────────────
   The copy column hung off the headline's bottom edge, which put
   it wherever the headline happened to end. Pin it to a baseline
   of its own instead.                                             */
.hero__inner{
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:end;
  gap:clamp(1.75rem,4vw,5rem);
  padding-bottom:clamp(3.5rem,9vh,6rem);
}
.hero__body{ padding-bottom:.65rem; }
.hero__body .lede{ max-width:40ch; margin-bottom:1.5rem; }

.hero__h{ margin:0; }
.hero__h .ln{ display:block; }

/* ── a real third tier ───────────────────────────────────────────
   Two paragraphs at nearly the same size read as one grey block.
   The price becomes a label: display / body / label.              */
.hero__price{
  margin:0 0 1.9rem;
  padding-top:1.1rem;
  border-top:1px solid var(--rule-l);
  font-size:.6875rem; letter-spacing:.26em; text-transform:uppercase;
  font-weight:700; color:var(--onyx);
}
.hero__acts{ margin-top:0; }

/* ── the stat row, demoted ───────────────────────────────────────
   Was a bold label stacked over small text, three across — the
   hero-metric template. Now one weight, one size, hairline-split,
   printed along the edge like a stamp on a selvedge.              */
.tally{
  display:flex; flex-wrap:wrap; gap:0;
  list-style:none; margin:0; padding:0 0 clamp(2.75rem,7vh,4.5rem);
  border-top:1px solid var(--rule-l);
}
.tally li{
  flex:0 1 auto;
  padding:1.05rem 1.9rem 0 0;
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--earth);
}
.tally li + li{ padding-left:1.9rem; border-left:1px solid var(--rule-l); }

@media (max-width:860px){
  .hero__inner{ grid-template-columns:1fr; align-items:start; }
  .hero__h{ margin-bottom:1.75rem; }
  .tally li{ flex:1 1 100%; padding-right:0; }
  .tally li + li{ padding-left:0; border-left:0; border-top:1px solid var(--rule-l); }
}

/* ── entrance ────────────────────────────────────────────────────
   Every keyframe starts from a VISIBLE state. Two earlier attempts
   failed the same way: one gated visibility on requestAnimationFrame,
   the other on a CSS animation starting at opacity 0. In both cases
   a stalled timeline left the hero blank.

   Nothing here can hide content. Worst case — animations never run
   at all — the hero renders slightly dimmed and 16px low, which is
   recoverable. Blank is not.                                       */

@keyframes pw-rise{ from{ opacity:.3; transform:translateY(16px); } }

.hero__h .ln:nth-child(1){ animation:pw-rise .85s var(--ease) backwards; }
.hero__h .ln:nth-child(2){ animation:pw-rise .85s var(--ease) .07s backwards; }
.hero__body             { animation:pw-rise .85s var(--ease) .18s backwards; }
.tally                  { animation:pw-rise .9s  var(--ease) .30s backwards; }

/* the portrait is already graded warm and dark in-camera; the section's
   own filter would double-flatten it */
.who__portrait img{ filter:saturate(.95) contrast(1.02); }

/* ═══ MOBILE MENU ═════════════════════════════════════════════════
   Below 860px the nav links were display:none with nothing in their
   place — Work, Process and Price were simply unreachable on a
   phone. Built on <details>, so it opens and closes with no
   JavaScript at all; the script below only closes it after an
   in-page jump, which is an enhancement, not a dependency.        */

.menu{ display:none; }

@media (max-width:860px){
  .menu{ display:block; flex:none; }
  .nav__cta{ display:none; }        /* the panel and the call bar both carry it */

  /* backdrop-filter establishes a containing block for fixed-position
     descendants, so the panel was sizing itself against the header
     instead of the viewport — 88px tall rather than full screen.
     The blur is a nicety; drop it where the panel has to work. */
  .nav{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bone); }
}

.menu__btn{
  list-style:none;
  display:grid; place-items:center;
  width:2.75rem; height:2.75rem;
  margin-right:-.6rem;              /* optical: align the bars to the page edge */
  cursor:pointer;
}
.menu__btn::-webkit-details-marker{ display:none; }
.menu__btn > span,
.menu__btn > span::before{
  content:''; display:block;
  width:1.5rem; height:2px;
  background:var(--onyx);
  transition:transform .32s var(--ease);
}
.menu__btn > span{ position:relative; }
.menu__btn > span::before{ position:absolute; top:-7px; left:0; }
.menu[open] .menu__btn > span{ transform:rotate(45deg); }
.menu[open] .menu__btn > span::before{ transform:translateY(7px) rotate(-90deg); }

.menu__panel{
  position:fixed; left:0; right:0; top:var(--nav-h,79px); bottom:0;
  z-index:99;
  background-color:var(--onyx);
  background-image:var(--drape-d),var(--twill-d),var(--slub-d);
  color:var(--bone);
  padding:clamp(2rem,7vh,3.5rem) var(--pad) calc(2rem + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  overflow-y:auto;
  animation:pw-menu .38s var(--ease);
}
@keyframes pw-menu{ from{ opacity:.4; transform:translateY(-10px); } }

.menu__links{ display:grid; gap:0; border-top:1px solid var(--rule-d); }
.menu__links a{
  display:block; text-decoration:none; color:var(--bone);
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.75rem,9vw,2.5rem); line-height:1;
  letter-spacing:-.03em;
  padding:1.15rem 0;
  border-bottom:1px solid var(--rule-d);
}
.menu__links a:active{ color:var(--dust); }

.menu__cta{ margin-top:auto; text-align:center; }
.menu__tel{
  display:block; margin-top:1.25rem; text-align:center;
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--dust); text-decoration:none;
}

/* the panel covers the page; stop what is behind it from scrolling too */
body:has(.menu[open]){ overflow:hidden; }

/* the headline is three lines now; stagger the third */
.hero__h .ln:nth-child(3){ animation:pw-rise .85s var(--ease) .14s backwards; }