/* ==========================================================================
   Elm & Harlow
   Palette is sampled from the client's own photographs — see chips.md notes
   in the client CLAUDE.md. Nothing here is picked off a colour wheel.
   ========================================================================== */

:root{
  /* grounds */
  --plaster:  #EAE5DC;   /* light ground — lifted from their trim white */
  --plaster-2:#E1DBD0;   /* second light, for insets */
  --carbon:   #1C1A16;   /* dark ground — their shiplap charcoal, warmed */
  --carbon-2: #26231E;

  /* ink */
  --ink:      #22201C;
  --ink-60:   #6A655C;
  --ink-40:   #6B665E;
  --linen:    #E6E1D7;   /* ink on carbon */
  --linen-60: rgba(230,225,215,.62);
  --linen-35: #87827D;

  /* accent — the bronze glaze off their kitchen doors. Used once.
     --bronze-ink is the same colour taken to AA for small text. */
  --bronze:   #8A7455;
  --bronze-ink:#776449;

  /* hairlines */
  --rule:     #C6BDB0;
  --rule-dk:  rgba(230,225,215,.16);

  --pad:      clamp(20px, 4.4vw, 68px);
  --max:      1440px;

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-io:  cubic-bezier(.65,.02,.28,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--plaster);
  color:var(--ink);
  font-family:"Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variation-settings:"wdth" 100, "opsz" 14;
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
h1,h2,h3,p,figure,ol,ul{ margin:0 }
ol,ul{ list-style:none; padding:0 }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

::selection{ background:var(--ink); color:var(--plaster) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--plaster); padding:12px 18px;
}
.skip:focus{ left:8px; top:8px }

:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px }

/* --- shared bits ------------------------------------------------------- */

/* label/meta type: mono, tracked, tabular. Used for data only, never as an
   eyebrow above a heading. */
.mono{
  font-family:"DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

.h2{
  font-size:clamp(30px, 4.4vw, 62px);
  line-height:1.02;
  letter-spacing:-.032em;
  font-weight:500;
  font-variation-settings:"wdth" 96, "opsz" 60;
  max-width:16ch;
}
.h2--onDark{ color:var(--linen) }

/* text-roll on hover — one shared primitive */
.roll{ display:block; overflow:hidden; height:1.34em }
.roll__i{ display:block; height:1.34em; line-height:1.34em; transition:transform .5s var(--ease) }
a:hover .roll__i, button:hover .roll__i{ transform:translateY(-100%) }

.btn{
  display:inline-flex; align-items:center;
  padding:13px 26px;
  font-size:14px; font-weight:500; letter-spacing:-.005em;
  border-radius:0;
  transition:background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn--solid{ background:var(--ink); color:var(--plaster) }
.btn--solid:hover{ background:var(--bronze) }
.btn--line{ border:1px solid var(--rule); color:var(--ink) }
.btn--line:hover{ border-color:var(--ink) }
.btn--ghost{ border:1px solid var(--rule-dk); color:var(--linen) }
.btn--ghost:hover{ border-color:var(--linen) }

/* swatch dot used inline with captions */
.sw{ width:11px; height:11px; background:var(--sw); display:inline-block; flex:0 0 auto;
     box-shadow:inset 0 0 0 1px rgba(34,32,28,.18) }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background-color .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:var(--plaster);
  border-bottom-color:var(--rule);
}
.nav__in{
  max-width:var(--max); margin:0 auto;
  padding:18px var(--pad);
  display:flex; align-items:center; gap:32px;
}
.nav__mark{
  font-size:17px; font-weight:600; letter-spacing:-.03em;
  display:flex; align-items:baseline; gap:.28em; margin-right:auto;
}
.nav__amp{ color:var(--bronze); font-weight:400 }
.nav__des{ font-weight:400 }

.nav__links{ display:flex; gap:30px; font-size:14px; color:var(--ink-60) }
.nav__links a{ transition:color .35s var(--ease) }
.nav__links a:hover{ color:var(--ink) }

.nav__call{
  display:flex; align-items:center; gap:9px;
  font-family:"DM Mono", ui-monospace, monospace;
  font-size:13px; font-variant-numeric:tabular-nums;
  /* 13px of mono is a 17px hit area. Pad it out to a thumb-sized target
     without moving anything, since this is the main action on a phone. */
  padding:13px 4px;
  margin:-13px -4px;
}
.nav__dot{
  width:6px; height:6px; border-radius:50%; background:var(--bronze);
  flex:0 0 auto;
}

/* ==========================================================================
   HERO — split. Copy left, photo right, bleeding off the right edge.
   ========================================================================== */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:96px;
  position:relative;

  /* Left edge sits on the 1440 measure; the right side runs off the viewport.
     Using % (not vw) so a vertical scrollbar doesn't push the bleed over. */
  --lead: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
}
.hero__grid{
  flex:1;
  width:100%;
  padding:0 0 0 var(--lead);
  display:grid; grid-template-columns:1fr minmax(0, 46%);
  align-items:center; gap:clamp(24px,5vw,72px);
}

.hero__copy{ padding-bottom:clamp(20px,4vh,48px); max-width:660px }

.hero__name{
  font-size:clamp(58px, 10.4vw, 148px);
  line-height:.86;
  letter-spacing:-.042em;
  font-weight:500;
  font-variation-settings:"wdth" 96, "opsz" 96;
  display:flex; flex-wrap:wrap; align-items:baseline;
  column-gap:.22em;
  margin-bottom:clamp(20px,3vh,34px);
}
.hero__name .ln{
  display:block; overflow:hidden;
  /* The mask has to clear the glyphs on BOTH axes, then be cancelled in
     layout. Vertically: line-height is .86, so ascenders and descenders sit
     outside the content box. Horizontally: negative letter-spacing is applied
     after the last glyph too, so the box ends up narrower than the ink and
     the trailing letter gets sliced — it took the P and the & off. */
  padding:.14em .14em .24em .14em;
  margin:-.14em -.14em -.24em -.14em;
}
.hero__name .ln--amp{ color:var(--bronze); font-weight:300 }
/* Each line rises from behind its own mask — the same move as the statement
   and the hero photo. Deliberately NOT per-character: splitting the wordmark
   into inline-blocks drops the font's kerning, and "Design" then collides
   (D-e, s-i, g-n) at any tracking tight enough to look like a wordmark.
   Every hidden-until-animated state is gated on .js so the page is fully
   readable with scripts off. */
.hero__name .lnm{ display:block }
.js .hero__name .lnm{ transform:translateY(145%) }
.hero.is-in .hero__name .lnm{
  transform:none;
  transition:transform .95s var(--ease-io);
  transition-delay:var(--d, 0s);
}
.hero__name .ln:nth-child(2) .lnm{ --d:.07s }
.hero__name .ln:nth-child(3) .lnm{ --d:.14s }

.hero__line{
  font-size:clamp(16px,1.35vw,19px);
  line-height:1.5;
  color:var(--ink-60);
  max-width:44ch;
  margin-bottom:clamp(24px,3.4vh,38px);
}
.js .hero__line{ opacity:0; transform:translateY(12px) }
.hero.is-in .hero__line{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease) .5s, transform .7s var(--ease) .5s;
}

.hero__acts{ display:flex; flex-wrap:wrap; gap:10px }
.js .hero__acts{ opacity:0 }
.hero.is-in .hero__acts{ opacity:1; transition:opacity .7s var(--ease) .66s }

/* the photograph: full height of the hero, bleeding off the right edge.
   A roller pass wipes it up from the bottom on load. */
.hero__shot{
  position:relative; align-self:stretch;
  display:flex; flex-direction:column;
  min-height:0;
}
.hero__shotwrap{
  flex:1; position:relative; min-height:0;
  overflow:hidden;
}
.js .hero__shotwrap{ clip-path:inset(100% 0 0 0) }
.hero.is-in .hero__shotwrap{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s var(--ease-io) .1s;
}
.hero__shot img{
  width:100%; height:100%; object-fit:cover; object-position:center 32%;
  transform:scale(1.08);
}
.hero.is-in .hero__shot img{
  transform:none;
  transition:transform 1.5s var(--ease-io) .1s;
}
.hero__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:9px;
  padding:44px clamp(16px,2vw,26px) clamp(16px,2vw,24px);
  font-family:"DM Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#F2EEE7;
  text-shadow:0 1px 10px rgba(20,18,15,.55);
  background:linear-gradient(to top, rgba(20,18,15,.62), rgba(20,18,15,0));
}
.js .hero__cap{ opacity:0 }
.hero__cap .sw{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.4) }
.hero.is-in .hero__cap{ opacity:1; transition:opacity .6s var(--ease) 1s }


/* ==========================================================================
   STATEMENT — type only. Each line rises from behind a hard edge, which is
   the same roller-pass move as the hero photo and the fan-deck wipe.
   ========================================================================== */
.stmt{ background:var(--plaster); padding:clamp(90px,15vh,190px) var(--pad) }
.stmt__in{ max-width:var(--max); margin:0 auto }
.stmt__l{
  font-size:clamp(34px, 7.6vw, 112px);
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:400;
  font-variation-settings:"wdth" 94, "opsz" 96;
  overflow:hidden;
  padding:.1em .12em .2em .12em;
  margin:-.1em -.12em -.2em -.12em;
}
.stmt__l:nth-child(2){ padding-left:clamp(0px,8vw,140px) }
.stmt__l:nth-child(3){ padding-left:clamp(0px,3.5vw,62px) }

.stmt__m{ display:block }
.js .stmt__m{
  transform:translateY(135%);
  transition:transform 1.05s var(--ease-io);
}
.stmt__l:nth-child(2) .stmt__m{ transition-delay:.09s }
.stmt__l:nth-child(3) .stmt__m{ transition-delay:.18s }
.stmt.is-in .stmt__m{ transform:none }

/* ==========================================================================
   THE FAN DECK
   ========================================================================== */
.deck{
  background:var(--plaster);
  padding:clamp(20px,4vh,40px) 0 clamp(90px,14vh,150px);
}
.deck__head{
  max-width:var(--max); margin:0 auto;
  padding:0 var(--pad) clamp(34px,5vh,58px);
  display:grid; grid-template-columns:1fr minmax(0,42%); gap:clamp(20px,4vw,60px);
  align-items:end;
  border-bottom:1px solid var(--rule);
  padding-bottom:clamp(28px,4vh,46px);
}
.deck__sub{ color:var(--ink-60); font-size:15px; max-width:46ch; line-height:1.55 }

.deck__body{
  max-width:var(--max); margin:0 auto;
  padding:clamp(30px,5vh,54px) var(--pad) 0;
  display:grid; grid-template-columns:minmax(0,258px) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);
  align-items:start;
}

/* chips — the grid break: they run off the left edge of the measure */
.deck__chips{
  display:flex; flex-direction:column;
  margin-left:calc(var(--pad) * -1);
  padding-left:var(--pad);
  border-top:1px solid var(--rule);
}
.chip{
  display:grid; grid-template-columns:26px 1fr auto;
  align-items:center; gap:14px;
  padding:13px 0;
  text-align:left;
  border-bottom:1px solid var(--rule);
  color:var(--ink-60);
  transition:color .4s var(--ease), padding-left .5s var(--ease);
}
.chip__c{
  width:26px; height:26px; background:var(--c);
  /* Taupe and Chalk are within 1.5:1 of the ground — without this they
     read as a hole in the page rather than as a chip. */
  box-shadow:inset 0 0 0 1px rgba(34,32,28,.18);
  transition:transform .5s var(--ease);
}
.chip__t{ font-size:14.5px; letter-spacing:-.012em }
.chip__h{
  font-family:"DM Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.05em; color:var(--ink-40);
  font-variant-numeric:tabular-nums;
  transition:color .4s var(--ease);
}
.chip:hover{ color:var(--ink); padding-left:7px }
.chip:hover .chip__c{ transform:scale(1.14) }
.chip.is-on{ color:var(--ink); padding-left:7px }
.chip.is-on .chip__c{ transform:scale(1.14) }
.chip.is-on .chip__h{ color:var(--bronze-ink) }

/* the plate */
.deck__plate{ display:flex; flex-direction:column }
.plate{
  position:relative; overflow:hidden;
  aspect-ratio:16/11;
  background:var(--plaster-2);
}
.plate__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  opacity:0;
}
.plate__img.is-on{ opacity:1 }
/* the roller pass: a band in the incoming chip's own colour sweeps across */
.plate__wipe{
  position:absolute; inset:0;
  background:var(--wipe, var(--ink));
  transform:translateX(-101%);
  will-change:transform;
}
.plate__wipe.is-run{
  animation:rollerpass .92s var(--ease-io) forwards;
}
@keyframes rollerpass{
  0%   { transform:translateX(-101%) }
  46%  { transform:translateX(0) }
  54%  { transform:translateX(0) }
  100% { transform:translateX(101%) }
}

.plate__meta{
  display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:clamp(16px,3vw,44px);
  padding-top:18px;
  border-top:1px solid var(--rule);
  margin-top:18px;
}
.plate__l{ display:flex; flex-direction:column; gap:3px }
.plate__hex{
  font-family:"DM Mono", ui-monospace, monospace;
  font-size:12px; letter-spacing:.06em; color:var(--bronze-ink);
  font-variant-numeric:tabular-nums;
}
.plate__name{ font-size:20px; letter-spacing:-.025em; font-weight:500 }
.plate__r{ display:flex; flex-direction:column; gap:5px }
.plate__room{
  font-family:"DM Mono", ui-monospace, monospace;
  font-size:10.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-40);
}
.plate__note{ font-size:15px; color:var(--ink-60); max-width:52ch; line-height:1.5 }

/* ==========================================================================
   SERVICES — carbon ground, list not cards
   ========================================================================== */
.svc{ background:var(--carbon); color:var(--linen); position:relative; isolation:isolate }
.svc__in{
  max-width:var(--max); margin:0 auto;
  padding:clamp(80px,13vh,150px) var(--pad) clamp(50px,8vh,90px);
  position:relative; z-index:2;
}
.svc__in .h2{ margin-bottom:clamp(34px,5vh,64px) }

.svc__list{ border-top:1px solid var(--rule-dk) }
.svc__row{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(14px,4vw,60px);
  padding:clamp(20px,3vh,30px) 0;
  border-bottom:1px solid var(--rule-dk);
  transition:padding-left .55s var(--ease);
}
.svc__row:hover{ padding-left:clamp(0px,1.2vw,18px) }
.svc__n{
  font-size:clamp(20px,2.1vw,29px);
  letter-spacing:-.028em; font-weight:500; line-height:1.1;
  font-variation-settings:"wdth" 96, "opsz" 30;
}
.svc__d{ color:var(--linen-60); font-size:15.5px; line-height:1.55; max-width:56ch }

/* four-up strip, deliberately not equal — sizes step down */
.svc__strip{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:0 var(--pad) clamp(80px,12vh,140px);
  display:grid; grid-template-columns:1.35fr 1.1fr .9fr .8fr;
  gap:clamp(8px,1.1vw,16px);
  align-items:end;
}
.svc__strip figure{ overflow:hidden }
.svc__strip img{
  width:100%; object-fit:cover;
  filter:saturate(.92);
}
.svc__strip figure:nth-child(1) img{ height:clamp(220px,38vh,420px) }
.svc__strip figure:nth-child(2) img{ height:clamp(190px,32vh,350px) }
.svc__strip figure:nth-child(3) img{ height:clamp(160px,27vh,290px) }
.svc__strip figure:nth-child(4) img{ height:clamp(140px,23vh,240px) }

/* ==========================================================================
   PROCESS — pinned media, steps scroll past it
   ========================================================================== */
.proc{
  background:var(--plaster);
  max-width:var(--max); margin:0 auto;
  padding:clamp(80px,13vh,150px) var(--pad);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,50%);
  gap:clamp(28px,5vw,80px);
  align-items:start;
}
.proc__sticky{
  position:sticky; top:110px;
  order:2;
}
.proc__media{
  position:relative; overflow:hidden;
  aspect-ratio:4/5; background:var(--plaster-2);
}
.proc__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
/* Only the incoming photo animates: it wipes down over the previous one
   (.was-on), which stays fully visible underneath until the wipe is done.
   Animating both at once left the bottom of the frame bare mid-wipe. */
.js .proc__img{ clip-path:inset(0 0 100% 0) }
.js .proc__img.was-on{ clip-path:inset(0); z-index:1 }
.js .proc__img.is-on{
  clip-path:inset(0); z-index:2;
  transition:clip-path .85s var(--ease-io);
  will-change:clip-path;
}

.proc__steps{ order:1 }
.proc__intro{ margin-bottom:clamp(34px,6vh,72px) }
.proc__lede{
  color:var(--ink-60); font-size:16px; line-height:1.55; max-width:42ch;
  margin-top:16px;
}
.proc__step{
  padding:clamp(24px,4vh,40px) 0;
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:52px 1fr; gap:0 20px;
}
.proc__step:last-child{ border-bottom:1px solid var(--rule) }

.proc__num{
  font-family:"DM Mono", ui-monospace, monospace;
  font-size:12px; letter-spacing:.1em; color:var(--ink-40);
  font-variant-numeric:tabular-nums; padding-top:.45em;
  grid-row:1 / span 2;
  transition:color .5s var(--ease);
}
.proc__step.is-on .proc__num{ color:var(--bronze-ink) }
.proc__step h3{
  font-size:clamp(20px,2.1vw,27px); letter-spacing:-.028em; font-weight:500; line-height:1.15;
  font-variation-settings:"wdth" 96, "opsz" 28;
  color:var(--ink-60);
  transition:color .5s var(--ease);
}
.proc__step.is-on h3{ color:var(--ink) }
.proc__step p{ color:var(--ink-60); font-size:15.5px; line-height:1.55; max-width:44ch; margin-top:9px }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ background:var(--carbon-2); color:var(--linen); isolation:isolate }
.about__in{
  max-width:var(--max); margin:0 auto;
  padding:clamp(80px,13vh,150px) var(--pad);
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,5vw,84px);
  align-items:center;
  position:relative; z-index:2;
}
.about__txt .h2{ margin-bottom:26px }
.about__txt p{ color:var(--linen-60); font-size:16px; line-height:1.6; max-width:46ch; margin-bottom:18px }
.about__txt .btn{ margin-top:14px }

.about__pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,1.2vw,16px); align-items:start }
.about__pair figure{ overflow:hidden }
.about__pair figure:nth-child(2){ margin-top:clamp(28px,6vw,74px) }
.about__pair img{ width:100%; height:clamp(230px,40vh,430px); object-fit:cover }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--carbon); color:var(--linen); overflow:hidden; isolation:isolate; position:relative }
.foot__in{
  max-width:var(--max); margin:0 auto;
  padding:clamp(80px,13vh,140px) var(--pad) clamp(40px,6vh,70px);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(34px,5vw,80px);
  position:relative; z-index:2;
}
.foot__eyebrow{
  font-family:"DM Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--linen-35);
  margin-bottom:18px;
}
.foot__num{
  display:inline-block;
  font-size:clamp(38px,6.4vw,86px);
  letter-spacing:-.045em; line-height:1; font-weight:500;
  font-variation-settings:"wdth" 94, "opsz" 80;
  font-variant-numeric:tabular-nums;
  transition:color .45s var(--ease);
}
.foot__num:hover{ color:var(--bronze) }
.foot__note{ color:var(--linen-60); font-size:15.5px; line-height:1.55; max-width:40ch; margin-top:22px }

.foot__cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  align-content:start; padding-top:8px;
}
.foot__cols div{ display:flex; flex-direction:column; gap:8px }
.foot__k{
  font-family:"DM Mono", ui-monospace, monospace;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--linen-35);
  margin-bottom:2px;
}
.foot__cols a, .foot__cols span:not(.foot__k){ font-size:14.5px; color:var(--linen-60) }
.foot__cols a{ transition:color .35s var(--ease) }
.foot__cols a:hover{ color:var(--linen) }

/* giant faint wordmark */
.foot__mark{
  position:relative; z-index:2;
  font-size:clamp(72px,17.5vw,260px);
  line-height:.78;
  letter-spacing:-.055em; font-weight:500;
  font-variation-settings:"wdth" 90, "opsz" 96;
  color:rgba(230,225,215,.055);
  padding:0 var(--pad) .16em;
  max-width:var(--max); margin:0 auto;
  white-space:nowrap;
  user-select:none;
}

.foot__base{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:26px var(--pad) 30px;
  border-top:1px solid var(--rule-dk);
  margin-top:clamp(24px,4vh,44px);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:"DM Mono", ui-monospace, monospace;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--linen-35);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .deck__body{ grid-template-columns:minmax(0,220px) minmax(0,1fr) }
  .proc{ grid-template-columns:1fr }
  .proc__sticky{ order:1; top:76px; margin-bottom:30px }
  .proc__media{ aspect-ratio:16/10 }
  .proc__steps{ order:2 }
  .about__in{ grid-template-columns:1fr }
  .foot__in{ grid-template-columns:1fr }
}

@media (max-width: 860px){
  .nav__links{ display:none }
  .hero{ padding-top:78px; min-height:auto }
  .hero__grid{
    grid-template-columns:1fr;
    padding:0 var(--pad);
    gap:30px;
  }
  .hero__copy{ padding-top:clamp(24px,7vh,60px); padding-bottom:0; order:1 }
  .hero__shot{ order:2; margin-right:calc(var(--pad) * -1); margin-left:calc(var(--pad) * -1) }
  .hero__shot img{ height:clamp(320px,52svh,480px) }
  .hero__cap{ padding-left:var(--pad) }
  .hero__name{ font-size:clamp(52px,15.5vw,96px) }


  .stmt__l{ font-size:clamp(30px,9vw,54px) }
  .stmt__l:nth-child(2){ padding-left:0 }
  .stmt__l:nth-child(3){ padding-left:0 }

  .deck__head{ grid-template-columns:1fr }
  .deck__body{ grid-template-columns:1fr }
  /* chips become a horizontal fan on small screens */
  .deck__chips{
    flex-direction:row; overflow-x:auto; gap:0;
    border-top:0; border-bottom:1px solid var(--rule);
    margin:0 calc(var(--pad) * -1) 26px;
    padding:0 var(--pad) 14px;
    scroll-snap-type:x mandatory;
    /* Without this the snapport starts at the padding box, so the browser
       scrolls 20px on load to snap chip 1 and the strip sits out of line
       with every other left edge on the page. */
    scroll-padding-left:var(--pad);
    -webkit-overflow-scrolling:touch;
  }
  .deck__chips::-webkit-scrollbar{ display:none }
  .chip{
    grid-template-columns:1fr; gap:8px;
    flex:0 0 auto; width:104px;
    padding:0 12px 0 0; border-bottom:0;
    scroll-snap-align:start;
  }
  .chip:hover, .chip.is-on{ padding-left:0 }
  .chip__c{ width:100%; height:74px }
  .chip__t{ font-size:13px }
  .chip__h{ font-size:10px }

  .plate__meta{ grid-template-columns:1fr; gap:12px }

  .svc__row{ grid-template-columns:1fr; gap:8px }
  .svc__strip{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .svc__strip figure:nth-child(n) img{ height:clamp(150px,26vh,220px) }

  .about__pair figure:nth-child(2){ margin-top:26px }
  .about__pair img{ height:clamp(190px,28vh,280px) }

  .foot__cols{ grid-template-columns:1fr 1fr; gap:26px }
  .foot__cols div{ gap:2px }
  .foot__cols a{ padding:9px 0 }
  .foot__base{ font-size:9.5px }
}

@media (max-width: 460px){
  .foot__cols{ grid-template-columns:1fr }
}

/* ==========================================================================
   REDUCED MOTION — everything lands in its final state, nothing moves.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  /* .js-scoped so these outrank the hidden-state gates above. */
  .js .hero__name .lnm{ transform:none }
  .js .hero__line, .js .hero__acts, .js .hero__cap{ opacity:1; transform:none }
  .js .hero__shotwrap{ clip-path:none }
  .js .hero__shot img{ transform:none }
  .js .stmt__m{ transform:none }
  .js .proc__img{ clip-path:inset(0) }
  .js .proc__img:not(.is-on){ opacity:0 }
}