/* ============================================================
   BRAND FACES — Canela (Commercial Type) + Neue Haas Grotesk (Monotype)
   Drop the licensed .woff2 files into a /fonts folder beside this file
   and the whole site switches over. Nothing else needs changing.
   ============================================================ */
@font-face{font-family:'Canela';font-weight:400;font-style:normal;font-display:swap;
  src:local('Canela'),local('Canela-Regular'),url('fonts/Canela-Regular.woff2') format('woff2')}
@font-face{font-family:'Canela';font-weight:400;font-style:italic;font-display:swap;
  src:local('Canela Italic'),url('fonts/Canela-Italic.woff2') format('woff2')}
@font-face{font-family:'Canela';font-weight:500;font-style:normal;font-display:swap;
  src:local('Canela Medium'),url('fonts/Canela-Medium.woff2') format('woff2')}
@font-face{font-family:'Canela Deck';font-weight:400;font-style:normal;font-display:swap;
  src:local('Canela Deck'),url('fonts/CanelaDeck-Regular.woff2') format('woff2')}
@font-face{font-family:'Neue Haas Grotesk';font-weight:400;font-style:normal;font-display:swap;
  src:local('Neue Haas Grotesk Display Pro'),local('NHaasGroteskDSPro-55Rg'),
      url('fonts/NHaasGroteskDSPro-55Rg.woff2') format('woff2')}
@font-face{font-family:'Neue Haas Grotesk';font-weight:500;font-style:normal;font-display:swap;
  src:local('Neue Haas Grotesk Display Pro Medium'),local('NHaasGroteskDSPro-65Md'),
      url('fonts/NHaasGroteskDSPro-65Md.woff2') format('woff2')}
@font-face{font-family:'Neue Haas Grotesk';font-weight:600;font-style:normal;font-display:swap;
  src:local('Neue Haas Grotesk Display Pro Bold'),local('NHaasGroteskDSPro-75Bd'),
      url('fonts/NHaasGroteskDSPro-75Bd.woff2') format('woff2')}

/* ============================================================
   GLASSHOUSE — DESIGN SYSTEM
   Concept: the site is a building you walk into. Outside is
   daylight (bone); inside is the deep green room (moss).
   Signature: the mullion — a hairline glazing frame that holds
   the page, and panes that slide apart to reveal what's behind.
   ============================================================ */
:root{
  --open-fill:var(--sage);
  /* ---- colour: taken from the brand palette document ---------------- */
  --sage:#AFBBA4;        /* PRIMARY. the one green */
  --mist:#B0BDC4;        /* dusty blue — daylight only */
  --cream:#F2EDE5;       /* warm paper */
  --paper:#F7F7F5;       /* cool glass white */
  --brown:#4A3A2E;       /* deep brown — the innermost room */
  --brown-deep:#3A2D24;  /* darker still — the footer, the last thing */
  --ink:#241E18;         /* warm dark brown for type. never pure black */
  --stone:#857A70;       /* warm grey — placeholders and empty frames, never brand */

  /* ---- room defaults (each .room- class overrides these) ------------ */
  --bg:var(--cream);
  --fg:var(--ink);
  --line:rgba(20,20,15,.15);
  --muted:#6B6058;
  --body-2:#57514A;
  --tone-bg:var(--cream);
  --tone-fg:var(--ink);
  --tone-line:rgba(20,20,15,.15);
  --deep:var(--ink);

  /* ---- type -------------------------------------------------------- */
  /* Canela and Neue Haas Grotesk are licensed faces. If they are installed
     locally, or once they are self-hosted, they are picked up first;
     Fraunces and Inter stand in until then. */
  --display:'Canela','Canela Deck','Fraunces','Playfair Display',Georgia,serif;
  --display-deck:'Canela Deck','Canela','Fraunces',Georgia,serif;   /* the logo cut */
  --sans:'Neue Haas Grotesk','Neue Haas Grotesk Display Pro','Neue Haas Grotesk Text Pro','Helvetica Neue','Inter',Helvetica,Arial,sans-serif;
  --t-hero:clamp(3.1rem,10.5vw,10rem);
  --t-xl:clamp(2.4rem,6vw,5.2rem);
  --t-lg:clamp(1.8rem,3.6vw,3rem);
  --t-md:clamp(1.25rem,2vw,1.7rem);
  --t-body:clamp(1rem,1.05vw,1.125rem);
  --t-label:.6875rem;

  --maxw:1280px;
  --gut:clamp(1.25rem,5vw,5.5rem);
  --pad:max(var(--gut),calc((100vw - var(--maxw)) / 2));
  --edge:calc(var(--pad) - var(--gut) * .52);
  --sec:clamp(4rem,7.5vw,8rem);
  --ease:cubic-bezier(.22,.61,.24,1);
  --ease-pane:cubic-bezier(.65,0,.15,1);
}

/* ============================================================
   ROOMS — the further in you go, the warmer and greener it gets.
   glass (outside) -> cream -> sage -> brown (innermost)
   ============================================================ */
.room{background:var(--bg);color:var(--fg)}
.room-glass{--open-fill:var(--sage);--bg:var(--cream);
  background-image:radial-gradient(120% 85% at 78% -8%,color-mix(in srgb,var(--mist) 42%,transparent) 0%,transparent 56%);
  --line:rgba(36,30,24,.15);--muted:#6B6058;--body-2:#57514A}
.room-cream{--open-fill:var(--sage);--bg:var(--cream);--line:rgba(20,20,15,.15);--muted:#6B6058;--body-2:#57514A}
.room-sage {--open-fill:var(--cream);--bg:var(--sage); --line:rgba(36,30,24,.26);--muted:#414D3B;--body-2:#272E22}
.room-brown{--open-fill:#5A4838;--bg:var(--brown);--fg:var(--cream);--line:rgba(242,237,229,.26);--muted:#B4A99C;--body-2:#D6CFC5}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-weight:400;font-size:var(--t-body);
  line-height:1.62;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.01em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
::selection{background:var(--sage);color:var(--paper)}
:focus-visible{outline:2px solid var(--sage);outline-offset:4px;border-radius:1px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--cream);padding:.9rem 1.4rem}
.skip:focus{left:0}

/* ---------- type roles ---------- */
.display{font-family:var(--display);font-weight:400;line-height:.92;letter-spacing:-.02em;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 144}  /* the axes are ignored by Canela */
.it,em{font-style:italic;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 144}
.hero-type{font-size:var(--t-hero);line-height:.84;letter-spacing:-.038em}
.xl{font-size:var(--t-xl);line-height:.95}
.lg{font-size:var(--t-lg);line-height:1.02}
.md{font-size:var(--t-md);line-height:1.25}
.label{
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:.13em;
  font-weight:500;color:var(--muted);line-height:1
}
.lede{font-size:clamp(1.08rem,1.6vw,1.4rem);line-height:1.42;letter-spacing:-.012em;max-width:36ch;color:var(--body-2)}
.measure{max-width:58ch}
.tnum{font-variant-numeric:tabular-nums}
em,.it{font-style:italic}

/* ---------- the mullion: fixed glazing frame ---------- */
.mullion{position:fixed;inset:0;pointer-events:none;z-index:60}
.mullion span{position:absolute;background:var(--tone-line);transition:background .7s var(--ease)}
.mullion .v{top:0;bottom:0;width:1px}
.mullion .v1{left:var(--edge)}
.mullion .v2{right:var(--edge)}
.mullion .h{left:0;right:0;height:1px;top:var(--navh)}
@media(max-width:700px){.mullion .v{display:none}}

/* ---------- nav ---------- */
:root{--navh:82px}
@media(max-width:700px){:root{--navh:64px}}
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--navh);z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  color:var(--tone-fg);
  background:var(--tone-bg);
  background:color-mix(in srgb,var(--tone-bg) 90%,transparent);
  backdrop-filter:blur(9px);
  transition:background .5s var(--ease),color .5s var(--ease);
}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{height:clamp(15px,1.5vw,19px);width:auto;transition:filter .5s var(--ease)}
body.is-dark .brand img{filter:invert(1)}
/* while the menu is open the header sits on the brown doors */
.menu-open .nav{background:transparent;backdrop-filter:none;color:var(--cream)}
.menu-open .brand img{filter:invert(1)}
.menu-open .nav-links,.menu-open .nav-cta{opacity:0;pointer-events:none}
.foot__logo{height:52px;width:auto;filter:invert(1);margin-bottom:2rem}
.nav-links{display:flex;gap:clamp(1rem,2.2vw,2.4rem);align-items:center}
.nav-links a{
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:.11em;font-weight:500;
  position:relative;padding:.45rem 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-cta{display:inline-flex;align-items:center;gap:.5rem;margin-left:clamp(1rem,2vw,2rem);
  background:var(--brown);color:var(--cream);padding:.85rem 1.3rem;
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:.11em;font-weight:600;
  transition:background .4s var(--ease),transform .4s var(--ease)}
.nav-cta:hover{background:var(--mist);color:var(--ink)}
.nav-cta:hover .arrow{transform:translateX(4px)}
@media(max-width:820px){.nav-cta{display:none}}
.nav-toggle{display:none;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.13em;
  font-weight:500;padding:.9rem 0 .9rem 1rem;min-height:44px}
@media(max-width:820px){
  .nav-links{display:none}
  .nav-toggle{display:block}
}
/* mobile menu — two doors opening */
.menu{position:fixed;inset:0;z-index:69;display:none}
.menu.open{display:block}
.menu__door{position:absolute;top:0;bottom:0;width:50.5%;background:var(--brown);
  transition:transform .7s var(--ease-pane)}
.menu__door.l{left:0;transform:translateX(-101%)}
.menu__door.r{right:0;transform:translateX(101%)}
.menu.open .menu__door{transform:translateX(0)}
.menu__inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;
  gap:.2rem;padding:var(--navh) var(--pad) 3rem;opacity:0;transition:opacity .4s .35s var(--ease)}
.menu.open .menu__inner{opacity:1}
.menu__inner a{font-family:var(--display);font-size:clamp(2.2rem,11vw,3.4rem);color:var(--cream);line-height:1.12}
.menu__inner a small{font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;color:var(--muted);
  display:inline-block;vertical-align:super;margin-left:.5rem}
.menu__foot{margin-top:2.4rem;color:var(--muted);font-size:.85rem;line-height:1.8}
.menu__foot a{font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--cream);
  border-bottom:1px solid var(--line);padding-bottom:.15rem;
  display:inline-block;max-width:100%;overflow-wrap:anywhere}

/* ---------- loading sequence: the glasshouse turns, then opens -------
   W 280 · D 200 · wall 150 · roof rise 84  ->  roof slope 131 at 50deg */
.loader{position:fixed;inset:0;z-index:200;background:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1.6rem,4vw,2.6rem);
  perspective:1100px;perspective-origin:50% 44%;transition:opacity .6s var(--ease)}
.loader.out{opacity:0;pointer-events:none}
.loader.done{display:none}
.loader__scene{transform-style:preserve-3d;animation:ghPush 1s 1.9s var(--ease-pane) forwards}
.gh{position:relative;width:280px;height:150px;transform-style:preserve-3d;
  transform:rotateX(6deg) rotateY(-48deg);animation:ghTurn 1.5s var(--ease) forwards}
@media(max-width:640px){.gh{transform:scale(.62) rotateX(6deg) rotateY(-48deg)}}
.gh__f{position:absolute;border:1px solid #7E9174;background:none}
.gh__front,.gh__back{inset:0}
.gh__front{transform:translateZ(100px);transform-style:preserve-3d;
  border:1px solid #7E9174;background:none;
  display:grid;grid-template-columns:repeat(3,1fr)}
.gh__back{transform:rotateY(180deg) translateZ(100px)}
.gh__side{width:200px;height:150px;left:40px;top:0}
.gh__left{transform:rotateY(-90deg) translateZ(140px)}
.gh__right{transform:rotateY(90deg) translateZ(140px)}
.gh__gable{width:200px;height:84px;left:40px;top:-84px;
  clip-path:polygon(0 100%,50% 0,100% 100%);border:0;background:none;
  box-shadow:inset 0 0 0 1px #7E9174}
.gh__gable.l{transform:rotateY(-90deg) translateZ(140px)}
.gh__gable.r{transform:rotateY(90deg) translateZ(140px)}
.gh__roof{width:280px;height:131px;left:0;top:-131px;transform-origin:50% 100%;
  background:none;box-shadow:inset 0 0 0 1px #7E9174}
.gh__roof.f{transform:translateZ(100px) rotateX(50deg)}
.gh__roof.b{transform:translateZ(-100px) rotateX(-50deg)}
/* the two doors of the front elevation */
.gh__pane{background:none}
.gh__door{background:none;border:1px solid #7E9174;
  transform-origin:left center;transform-style:preserve-3d;
  animation:ghDoorOpen 1s 1.15s var(--ease-pane) forwards}
@keyframes ghTurn{from{transform:rotateX(6deg) rotateY(-48deg) scale(.80);opacity:0}
  35%{opacity:1} to{transform:rotateX(4deg) rotateY(0deg) scale(.86);opacity:1}}
@media(max-width:640px){@keyframes ghTurn{from{transform:scale(.58) rotateX(6deg) rotateY(-48deg);opacity:0}
  35%{opacity:1} to{transform:scale(.62) rotateX(4deg) rotateY(0deg);opacity:1}}}
@keyframes ghDoorOpen{to{transform:rotateY(-72deg)}}
@keyframes ghPush{to{transform:translateZ(760px);opacity:0}}
.loader__mark{height:clamp(26px,4.4vw,40px);width:auto;opacity:0;
  animation:fadeUp .8s .75s var(--ease) forwards}
.loader__skip{position:absolute;bottom:clamp(1.2rem,4vw,2.4rem);font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:.22em;color:var(--muted);opacity:0;
  animation:fadeUp .6s 1.2s var(--ease) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- layout ---------- */
main{padding-top:var(--navh)}
html.js .route{display:none}
html.js .route.active{display:block}
html:not(.js) .loader{display:none}
html:not(.js) .work-row__reveal{grid-template-rows:1fr}
html:not(.js) .work-row__body{opacity:1;padding-top:1.4rem}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.sec--tight{padding-top:clamp(2.5rem,5vw,5rem);padding-bottom:clamp(2.5rem,5vw,5rem)}
.proof{padding-top:clamp(2.6rem,5vw,4.5rem);padding-bottom:clamp(2.6rem,5vw,4.5rem)}
/* stacked blocks in one room must not double their padding */
.sec+.sec,.sec+.sec--tight,.sec--tight+.sec,.sec--tight+.sec--tight{padding-top:0}
.bleed+.wrap{padding-top:clamp(2.5rem,5vw,4.5rem)}
/* a colour change is already a break — do not also pay full padding both sides */
.room>.wrap.sec:first-child{padding-top:clamp(3rem,5.5vw,5.5rem)}
.room>.wrap.sec:last-child{padding-bottom:clamp(3rem,5.5vw,5.5rem)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2.5vw,2.5rem)}
@media(max-width:820px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* eyebrow used as a room label on the sill */
.sill{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:clamp(1.4rem,2.6vw,2.4rem)}
/* header-only blocks: top padding, then straight into the content beneath */
.page-head{padding-top:clamp(2.2rem,4.5vw,4rem);padding-bottom:0}
.page-head .sill{margin-bottom:clamp(1rem,2vw,1.6rem)}
.sill::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-pane{clip-path:inset(0 50% 0 50%);transition:clip-path 1.05s var(--ease-pane)}
.rv-pane.in{clip-path:inset(0 0 0 0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.85rem;padding:1.1rem 1.7rem;
  border:1px solid var(--line);border-radius:0;
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:.11em;font-weight:500;
  position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--fg);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease-pane)}
.btn:hover{color:var(--bg);border-color:var(--fg)}
.btn:hover::before{transform:scaleY(1)}
.btn--solid{background:var(--brown);color:var(--cream);border-color:var(--brown);font-weight:600}
.btn--solid::before{background:var(--mist)}
.btn--solid:hover{color:var(--ink);border-color:var(--mist)}
/* inside the brown room it starts cream, and still lands on the blue */
.room-brown .btn--solid{background:var(--cream);color:var(--brown);border-color:var(--cream)}
.room-brown .btn--solid::before{background:var(--mist)}
.room-brown .btn--solid:hover{color:var(--ink);border-color:var(--mist)}
.arrow{transition:transform .45s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}

/* ---------- placeholder media (obvious, replaceable) ---------- */
.ph{
  position:relative;overflow:hidden;background:
   linear-gradient(150deg,color-mix(in srgb,var(--stone) 26%,var(--paper)) 0%,var(--paper) 54%,color-mix(in srgb,var(--stone) 14%,var(--paper)) 100%);
  display:block;
}
.ph::after{
  content:attr(data-ph);position:absolute;left:0;bottom:0;
  font-family:var(--sans);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);opacity:.5;padding:.5rem .6rem;
}
.ph::before{
  content:"";position:absolute;inset:8px;border:1px dashed rgba(35,32,28,.16);
}
.ph[data-tone="dark"]{background:linear-gradient(150deg,color-mix(in srgb,var(--stone) 55%,var(--paper)) 0%,color-mix(in srgb,var(--stone) 34%,var(--paper)) 100%)}
.ph[data-tone="dark"]::after{color:var(--ink);opacity:.5}
.ph[data-tone="dark"]::before{border-color:rgba(20,20,15,.18)}
.pic{display:block;width:100%;max-width:100%;min-width:0;height:auto;object-fit:cover;background:color-mix(in srgb,var(--stone) 22%,var(--paper))}
.card__frame .pic{transition:transform 1.1s var(--ease)}
.card:hover .card__frame .pic{transform:scale(1.035)}
/* ---------- phone mockup ---------- */
.phone{position:relative;width:min(268px,66vw);aspect-ratio:9/19.5;flex:0 0 auto;
  border-radius:40px;background:var(--ink);padding:8px;
  box-shadow:0 40px 70px -34px rgba(36,30,24,.5),0 0 0 1px rgba(36,30,24,.1);
  animation:float 7s ease-in-out infinite}
.phone video,.phone .pic{width:100%;height:100%;object-fit:cover;border-radius:33px;background:#111}
.phone__island{position:absolute;top:19px;left:50%;transform:translateX(-50%);
  width:74px;height:21px;border-radius:12px;background:var(--ink);z-index:2}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.phone-wrap{display:flex;justify-content:center;gap:1.2rem;align-items:flex-end}
.phone-frame{position:relative;flex:0 0 auto}
.phone-panel{position:absolute;left:clamp(12px,2vw,22px);right:calc(-1 * clamp(12px,2vw,22px));
  bottom:calc(-1 * clamp(12px,2vw,22px));height:54%;background:var(--sage)}
.phone{position:relative;z-index:1}
.phone-cap{writing-mode:vertical-rl;font-size:var(--t-label);text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted);padding-bottom:.4rem}
@media(max-width:900px){.phone-cap{display:none}}

/* ---------- full-bleed media bands ---------- */
.bleed{width:100%;position:relative}
.bleed .pic,.bleed .ph{width:100%}

/* ---------- content wall — a strip of real client stills, desktop only ---------- */
.wall{--wall-gap:clamp(.4rem,.8vw,.8rem);overflow:hidden;margin-inline:var(--edge);
  margin-block:0;padding-bottom:clamp(2.5rem,5vw,4rem);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.2rem,#000 calc(100% - 2.2rem),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 2.2rem,#000 calc(100% - 2.2rem),transparent 100%)}
.wall__track{display:flex;width:max-content;will-change:transform;backface-visibility:hidden;
  animation:wallSlide 64s linear infinite}
.wall__track>*{flex:0 0 auto;width:clamp(132px,13vw,190px);margin-right:var(--wall-gap)}
@keyframes wallSlide{to{transform:translate3d(-50%,0,0)}}
@media(max-width:700px){.wall{display:none}}

/* ---------- art-direction placeholders ---------- */
.brief{display:flex;align-items:flex-end}
.brief::after{content:none}
.brief__in{position:relative;z-index:1;padding:clamp(1rem,2vw,1.8rem);max-width:48ch;display:block}
.brief__in p{font-size:clamp(.92rem,1.2vw,1.05rem);line-height:1.4;color:var(--ink);
  margin:.6rem 0 0;opacity:.72}
.brief__in .label{color:var(--ink);opacity:.5}
.hero-bg{display:none}
.r45{aspect-ratio:4/5}.r11{aspect-ratio:1/1}.r916{aspect-ratio:9/16}.r169{aspect-ratio:16/9}.r43{aspect-ratio:4/3}.r32{aspect-ratio:3/2}

/* ---------- the phone's short route ---------- */
.phone-only-block{display:none}
@media(max-width:700px){
  .wide-only{display:none}
  .phone-only-block{display:block}
  .ph-line{font-size:1.05rem;color:var(--body-2);margin-bottom:1.2rem;max-width:22ch}
  .ph-cta{width:100%;justify-content:center}
  .ph-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin-top:clamp(1.6rem,5vw,2.4rem)}
  .ph-statement{font-size:clamp(1.7rem,7.4vw,2.3rem);line-height:1.08;max-width:16ch;margin-top:clamp(1.6rem,5vw,2.2rem)}
}

/* ---------- home: hero ---------- */
.hero{padding-top:clamp(1.6rem,4vw,3.2rem);padding-bottom:clamp(2rem,4.5vw,3.5rem);position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
@media(max-width:900px){.hero__grid{grid-template-columns:minmax(0,1fr);gap:2.5rem}}
.hero h1{margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.only-phone,.txt-phone{display:none}
.txt-wide{display:inline}
@media(max-width:700px){
  .only-wide,.txt-wide{display:none}
  .only-phone{display:inline-flex}
  .txt-phone{display:inline}
}
.hero-last{display:flex;align-items:flex-end;gap:clamp(.65rem,1.5vw,1.2rem)}
.scroll-cue{flex:0 0 auto;width:clamp(52px,5vw,72px);aspect-ratio:1;border-radius:50%;
  background:var(--brown);display:grid;place-items:center;cursor:pointer;border:0;padding:0;
  margin-bottom:clamp(.5rem,1.2vw,1.1rem);
  animation:cueIn .6s 1.55s both,cueBob 2.8s 2.4s ease-in-out infinite;
  transition:background .4s var(--ease)}
.scroll-cue svg{width:100%;height:100%;display:block}
.scroll-cue .cue-arrow{fill:none;stroke:var(--cream);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s cubic-bezier(.34,1.25,.5,1),stroke .35s var(--ease)}
.scroll-cue:hover .cue-arrow,.scroll-cue:focus-visible .cue-arrow{transform:translateY(4px)}
.scroll-cue:active .cue-arrow{transform:translateY(7px)}
.scroll-cue:hover{background:var(--mist)}
.scroll-cue:hover .cue-arrow,.scroll-cue:focus-visible .cue-arrow{stroke:var(--ink)}
@keyframes cueIn{from{opacity:0}to{opacity:1}}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.hero h1 .ln{display:block;overflow:hidden;
  /* the mask has to clear the glyphs — line-height is .84, so a tall ascender
     or an italic terminal would otherwise be shaved off. The negative margins
     cancel the padding, so the layout is unchanged. */
  padding:.16em .14em .14em 0;margin:-.16em -.14em -.14em 0}
.hero h1 .ln i{display:block;font-style:normal;transform:translateY(125%);
  animation:lineUp 1.05s 1.15s var(--ease-pane) forwards}
.hero h1 .ln:nth-child(2) i{animation-delay:1.25s}
.hero h1 .ln:nth-child(3) i{animation-delay:1.35s}
@keyframes lineUp{to{transform:none}}
.hero h1 .thin{color:var(--ink)}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;align-items:center;margin-top:2rem}
/* window stack — content seen through panes */
.windows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.5rem,1vw,.9rem)}
.window{position:relative}
.window:first-child{grid-column:1/-1}
.win-cap{display:flex;justify-content:space-between;margin-top:.5rem;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}


/* ---------- work rows (editorial, not a grid) ---------- */
.work-row{display:block;border-top:1px solid var(--line);padding:clamp(1.6rem,3vw,2.4rem) 0;position:relative}
.work-row__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:baseline}
.work-row__name{font-family:var(--display);font-size:clamp(2rem,6.4vw,5rem);line-height:1;
  transition:transform .6s var(--ease),opacity .6s var(--ease)}
.work-row__no{font-size:var(--t-label);letter-spacing:.13em;color:var(--brown);white-space:nowrap;opacity:.85}
.work-row__reveal{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease)}
.work-row.open .work-row__reveal,.work-row:focus-visible .work-row__reveal{grid-template-rows:1fr}
.work-row__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start;
  overflow:hidden;min-height:0;opacity:0;padding-top:0;
  transition:opacity .35s var(--ease),padding-top .55s var(--ease)}
.work-row.open .work-row__body,.work-row:focus-visible .work-row__body{opacity:1;padding-top:1.4rem}
/* the open row leads slightly, so the eye knows which one it is */
.work-row.open .work-row__name{transform:translateX(clamp(.4rem,1.4vw,1.4rem))}
.work-row.open .work-row__no{opacity:1}
.work-row__desc{display:block;max-width:42ch;color:var(--muted);font-size:.95rem}
.work-row__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.work-row__go{display:block;margin-top:clamp(1.6rem,3vw,2.4rem)}
.work-row__go .btn{pointer-events:none;padding:1.35rem 2.2rem;font-size:.78rem;letter-spacing:.11em}
@media(max-width:820px){.work-row__go .btn{padding:1.2rem 1.8rem;font-size:.72rem}}
.tag{border:1px solid var(--line);padding:.35rem .7rem;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.work-row__media{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
@media(max-width:820px){
  .work-row__body{grid-template-columns:minmax(0,1fr)}
  .work-row__media{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
@media(max-width:820px){.metrics{grid-template-columns:minmax(0,1fr)}}
.metric{padding:clamp(1.5rem,2.6vw,2.4rem) 0 clamp(1rem,2vw,1.8rem);border-top:1px solid var(--line);
  position:relative;cursor:default}
.metric__rule{position:absolute;top:-1px;left:0;right:0;height:1px;background:currentColor;opacity:.45;
  transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--ease)}
.metric.in .metric__rule{transform:scaleX(1)}
.metrics .metric+.metric{border-left:1px solid var(--line);padding-left:clamp(1.2rem,2.4vw,2.4rem)}
@media(max-width:820px){.metrics .metric+.metric{border-left:0;padding-left:0}}
.room-glass .metric__fig,.room-cream .metric__fig,.room-sage .metric__fig{color:var(--brown)}
.metric__fig{font-family:var(--display);font-size:clamp(2.05rem,4.6vw,4.3rem);line-height:1;
  letter-spacing:-.03em;display:block;font-variant-numeric:tabular-nums;
  white-space:nowrap;min-height:1em}
.metric__lab{margin-top:.85rem;max-width:24ch;font-size:.9rem;color:var(--body-2);display:block}

/* ---------- services list ---------- */
.svc{border-top:1px solid var(--line);display:block;text-align:left;
  transition:background .5s var(--ease)}
.svc:last-of-type{border-bottom:1px solid var(--line)}
.svc.open{background:var(--open-fill)}
.svc__hd{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;
  padding:clamp(1rem,2vw,1.5rem) clamp(.8rem,1.6vw,1.4rem)}
.svc__ti{font-family:var(--display);font-size:clamp(1.4rem,3.2vw,2.5rem);line-height:1.06;
  transition:transform .5s var(--ease)}
.svc.open .svc__ti,.svc__hd:hover .svc__ti{transform:translateX(clamp(.2rem,.6vw,.6rem))}
.svc__meta{display:flex;align-items:center;gap:clamp(1rem,2vw,1.8rem);flex:0 0 auto}
.svc__ix{font-size:var(--t-label);letter-spacing:.13em;color:var(--muted);transition:color .5s var(--ease)}
.svc.open .svc__ix{color:var(--brown)}
/* 0fr -> 1fr animates to the content's own height, so nothing jumps */
.svc__pn{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.svc.open .svc__pn{grid-template-rows:1fr}
.svc__pn-in{overflow:hidden;min-height:0}
.svc__pn-in p{margin:0;padding:0 clamp(.8rem,1.6vw,1.4rem) clamp(1.2rem,2.4vw,1.9rem);
  font-size:.98rem;line-height:1.55;color:var(--body-2);max-width:56ch;
  opacity:0;transform:translateY(6px);transition:opacity .4s .12s var(--ease),transform .45s .12s var(--ease)}
.svc.open .svc__pn-in p{opacity:1;transform:none}
@media(min-width:900px){                      /* copy sits in the right half, no dead space */
  .svc__pn-in{display:grid;grid-template-columns:42% minmax(0,1fr)}
  .svc__pn-in p{grid-column:2;padding-left:0}
}
.svc__sign{width:13px;height:13px;position:relative;flex:0 0 auto}
.svc__sign::before,.svc__sign::after{content:"";position:absolute;background:currentColor;
  transition:transform .45s var(--ease),background .5s var(--ease)}
.svc__sign::before{top:6px;left:0;width:13px;height:1px}
.svc__sign::after{left:6px;top:0;height:13px;width:1px}
.svc.open .svc__sign::after{transform:scaleY(0)}
.svc.open .svc__sign::before,.svc.open .svc__sign::after{background:var(--brown)}

/* ---------- services page ---------- */
.svc-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,4rem);
  align-items:start;margin-top:clamp(1.6rem,3vw,2.4rem)}
@media(max-width:820px){.svc-top{grid-template-columns:minmax(0,1fr);gap:2rem}}
.svc-index{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(1rem,2vw,2rem)}
@media(max-width:520px){.svc-index{grid-template-columns:minmax(0,1fr)}}
.svc-index button{display:flex;align-items:baseline;gap:.7rem;width:100%;text-align:left;
  border-top:1px solid var(--line);padding:.62rem 0;font-size:.88rem;color:var(--body-2);
  transition:color .35s var(--ease),padding-left .35s var(--ease)}
.svc-index button:hover{color:var(--fg);padding-left:.4rem}
.svc-index__n{font-size:9.5px;letter-spacing:.13em;color:var(--muted)}

.svc-block{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,4.5rem);align-items:center;
  padding-block:clamp(2.8rem,6vw,5.5rem);border-top:1px solid var(--line)}
.svc-block:last-of-type{border-bottom:1px solid var(--line)}
@media(max-width:820px){.svc-block{grid-template-columns:minmax(0,1fr);gap:1.8rem}}
/* the fold header is a phone affordance — above 700px it is not rendered at
   all, so the grid sees only the body and the media, exactly as before */
.svc-fold__sum{display:none}
.svc-block:nth-child(even) .svc-block__media{order:-1}
@media(max-width:820px){.svc-block:nth-child(even) .svc-block__media{order:0}}
.svc-block__body h2{font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.06;margin:.9rem 0 0;max-width:20ch}
.svc-block__note{margin:1rem 0 0;color:var(--body-2);font-size:.95rem;line-height:1.55;max-width:52ch}
.caps{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(1rem,2vw,2rem)}
@media(max-width:520px){.caps{grid-template-columns:minmax(0,1fr)}}
.caps li{border-top:1px solid var(--line);padding:.5rem 0;font-size:.85rem;color:var(--body-2)}
.svc-block__proof{display:inline-grid;gap:.35rem;margin-top:1.8rem;padding:1rem 1.3rem;
  background:var(--sage);color:var(--ink);transition:transform .5s var(--ease)}
.svc-block__proof:hover{transform:translateX(6px)}
.svc-block__proof .label{color:rgba(36,30,24,.6)}
.svc-block__fig{font-size:.82rem;color:rgba(36,30,24,.75)}
/* the media sits proud of a colour panel, so it reads as framed rather than dropped in */
.svc-block__media{position:relative}
.svc-block__media::before{content:"";position:absolute;left:clamp(.8rem,2vw,1.6rem);
  right:calc(-1 * clamp(.8rem,2vw,1.6rem));bottom:calc(-1 * clamp(.8rem,2vw,1.6rem));
  top:clamp(3rem,8vw,6rem);background:var(--sage)}
.svc-block:nth-child(even) .svc-block__media::before{
  left:calc(-1 * clamp(.8rem,2vw,1.6rem));right:clamp(.8rem,2vw,1.6rem)}
.svc-block__media .pic,.svc-block__media .ph{position:relative;z-index:1}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
@media(max-width:820px){.steps{grid-template-columns:minmax(0,1fr);gap:2rem}}
.step{border-top:1px solid var(--line);padding-top:1.2rem}
.step__n{font-size:9.5px;letter-spacing:.13em;color:var(--muted);display:block;margin-bottom:.9rem}
.step h3{margin-bottom:.8rem}
.step p{color:var(--body-2);font-size:.92rem;line-height:1.55}

.contact-panel{padding:clamp(1.6rem,3.5vw,2.6rem)}
/* the whole left column travels with the form, not just the sage block */
.contact-aside{position:sticky;top:calc(var(--navh) + 1.5rem);align-self:start}
@media(max-width:820px){.contact-aside{position:static}}
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
@media(max-width:820px){.faq-wrap{grid-template-columns:minmax(0,1fr);gap:2rem}}

/* ---------- quote ---------- */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem) clamp(2rem,5vw,5rem)}
@media(max-width:820px){.quotes{grid-template-columns:minmax(0,1fr);gap:2.2rem}}
@media(max-width:700px){.quotes .quote:nth-child(n+2){display:none}}
@media(max-width:820px){.quotes{grid-template-columns:minmax(0,1fr);gap:2.2rem}}
.quotes .quote{margin:0;max-width:26ch;border-top:1px solid var(--line);padding-top:1.2rem}
@media(max-width:700px){.quotes .quote{max-width:30ch;font-size:1.6rem}}
.quote{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.18;letter-spacing:-.01em;max-width:22ch}
.quote--wide{max-width:26ch}
.attrib{margin-top:1.6rem;font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- cta ---------- */
.cta{text-align:center;padding-block:clamp(3.5rem,7vw,6rem)}
.cta h2{margin-bottom:1.8rem;max-width:16ch;margin-inline:auto}
.cta__mail{margin-top:1.6rem;font-size:.95rem;color:var(--body-2)}
.cta__mail a{border-bottom:1px solid var(--line);color:var(--fg)}
.cta__mail a:hover{border-color:var(--fg)}

/* ---------- work index ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(2rem,4vw,3rem)}
.filters button{border:1px solid var(--line);padding:.7rem 1.1rem;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.filters button:hover{border-color:var(--fg)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem) clamp(1.2rem,2.5vw,2.5rem)}
@media(max-width:700px){.cards{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,7vw,2.6rem)}}

/* the whole card is the target: one block, one hairline, one arrow */
.card{display:flex;flex-direction:column;height:100%}
.card__frame{display:block;position:relative;overflow:hidden;background:color-mix(in srgb,var(--stone) 22%,var(--paper))}
.card__frame .pic,.card__frame .ph{transition:transform 1.2s var(--ease)}
.card:hover .card__frame .pic,.card:hover .card__frame .ph{transform:scale(1.04)}
/* the number is always on show — it is the reason to click */
.card__tag{position:absolute;left:0;bottom:0;display:flex;align-items:baseline;gap:.5rem;
  background:var(--brown);color:var(--cream);padding:.6rem .9rem;
  transition:padding .45s var(--ease)}
.card:hover .card__tag{padding:.6rem 1.3rem}
.card__tag b{font-family:var(--display);font-weight:400;font-size:1.05rem;line-height:1}
.card__tag span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.card__meta{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  border-top:1px solid var(--line);margin-top:1rem;padding-top:.9rem}
.card__name{font-family:var(--display);font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.05;
  transition:transform .5s var(--ease)}
.card:hover .card__name{transform:translateX(4px)}
.card__desc{display:block;color:var(--body-2);font-size:.92rem;line-height:1.5;
  max-width:44ch;margin-top:.6rem}
.card__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.card__tags i{font-style:normal;border:1px solid var(--line);padding:.3rem .55rem;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card__cta{display:flex;align-items:center;gap:.6rem;margin-top:auto;padding-top:1.2rem;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.card__cta .arrow{transition:transform .45s var(--ease)}
.card:hover .card__cta .arrow{transform:translateX(6px)}

/* ---------- case study ---------- */
.cs-hero{padding-top:clamp(1.6rem,4vw,3rem)}
.cs-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,4.5rem);align-items:center;margin-top:clamp(1rem,2vw,2rem)}
@media(max-width:820px){.cs-top{grid-template-columns:minmax(0,1fr);gap:2.5rem}}
.cs-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(1rem,2.5vw,2.5rem);
  margin:clamp(2rem,4vw,3rem) 0 0}
@media(max-width:520px){.cs-facts{grid-template-columns:minmax(0,1fr)}}
.cs-facts div{border-top:1px solid var(--line);padding:.7rem 0}
.cs-facts__wide{grid-column:1/-1}
.cs-facts dt{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.cs-facts dd{margin:0;font-size:.9rem;line-height:1.45}

/* everything the client made is vertical, so the page is too */
.phone--static{animation:none}
.cs-phone{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.cs-phone .phone{width:min(276px,72vw)}
.cs-phone .pic{width:100%;height:100%;object-fit:cover;border-radius:33px}
.cs-phone__badge{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  background:var(--bg);color:var(--fg);border:1px solid var(--line);
  padding:.4rem .7rem;font-size:9px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;z-index:2}
.cs-phone figcaption{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);text-align:center}

.metrics--sub{margin-top:clamp(1rem,2vw,2rem)}
.metrics--sub .metric__fig{font-size:clamp(1.6rem,3vw,2.6rem)}

.cs-chapter{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:clamp(1rem,3vw,3rem);border-top:1px solid var(--line);padding-top:1.4rem;
  margin-bottom:clamp(2rem,4vw,3rem)}
@media(max-width:820px){.cs-chapter{grid-template-columns:minmax(0,1fr);gap:.8rem}}

.cs-feed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.6rem,1.4vw,1.2rem)}
@media(max-width:820px){.cs-feed{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-feed__item{position:relative;display:block;overflow:hidden}
.cs-feed__item .pic{transition:transform 1.2s var(--ease)}
/* a clip fills its slot exactly as a still does */
.clip{display:block;width:100%;height:auto;object-fit:cover;background:color-mix(in srgb,var(--stone) 22%,var(--paper))}
.cs-feed__item .clip,.cs-feed__item .pic{aspect-ratio:9/16}
.phone .clip{width:100%;height:100%;object-fit:cover}
.cs-feed__item:hover .pic{transform:scale(1.04)}
.cs-feed__badge{position:absolute;left:.6rem;top:.6rem;background:var(--brown);color:var(--cream);
  padding:.3rem .55rem;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.cs-feed__slot{opacity:.85}

.case-end{background:var(--brown);color:var(--cream)}
.next-project{display:block;position:relative;overflow:hidden;color:var(--cream);
  padding:clamp(3rem,8vw,7rem) var(--pad) clamp(2rem,5vw,3.5rem);text-align:center}
.case-end__cta{text-align:center;padding:0 var(--pad) clamp(3rem,7vw,6rem);
  display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.case-end__cta .label{color:var(--muted)}
.case-end__cta::before{content:"";display:block;width:min(320px,60%);height:1px;
  background:var(--line);margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.case-end .btn--solid{background:var(--mist);color:var(--ink);border-color:var(--mist)}
.case-end .btn--solid::before{background:var(--cream)}
.case-end .btn--solid:hover{color:var(--brown);border-color:var(--cream)}
@media(max-width:700px){
  .case-end__cta .btn{width:100%;justify-content:center}
}
.next-project .display{transition:transform .8s var(--ease)}
.next-project:hover .display{transform:translateY(-6px)}

/* ---------- about ---------- */
.about-open{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.5rem,4vw,4.5rem);margin-top:clamp(2rem,4vw,3rem);align-items:start}
@media(max-width:820px){.about-open{grid-template-columns:minmax(0,1fr);gap:2.2rem}}
.about-lead{font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.35;letter-spacing:-.018em;
  max-width:34ch;margin:0}
.about-sign{margin-top:1.8rem;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.1;max-width:16ch}
.facts{margin:0;display:grid;gap:0}
.facts div{border-top:1px solid var(--line);padding:.7rem 0;display:grid;
  grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:1rem;align-items:baseline}
.facts dt{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font-size:.9rem;line-height:1.4}

/* window wall */
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.6rem,1.6vw,1.4rem);
  align-items:start;padding-bottom:clamp(1rem,3vw,3rem)}
.collage figure{margin:0}
.collage figcaption{margin-top:.5rem;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.collage .pic{width:100%}
.c1{grid-column:span 7}
.c2{grid-column:span 5;margin-top:clamp(2rem,6vw,5rem)}
.c3{grid-column:2/6}
.c4{grid-column:7/11;margin-top:clamp(1rem,3vw,2.5rem)}
@media(max-width:700px){
  .collage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c1,.c2,.c3,.c4{grid-column:span 1;margin-top:0}
}

/* the people */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
@media(max-width:900px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.people{grid-template-columns:minmax(0,1fr);gap:2.5rem}}
.person{display:flex;flex-direction:column}
.person__words{display:flex;flex-direction:column;flex:1}
.person__img{overflow:hidden;margin-bottom:1.1rem}
.person__img .pic{transition:transform 1.2s var(--ease)}
.person:hover .person__img .pic{transform:scale(1.03)}
.person h3{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.05;margin-bottom:.45rem}
.person p{color:var(--body-2);font-size:.92rem;line-height:1.55;margin:.9rem 0 0;max-width:38ch}
.person__note{font-style:italic}
.person__leads{margin-top:auto;padding-top:1.1rem;font-size:.85rem;
  display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.person p+p{margin-top:.75rem}
.person__note{margin-top:1.1rem!important}
/* the fold is a phone thing only — above 700px the whole bio prints */
.person__rest{display:block}
.person__rest p:first-child{margin-top:.75rem}   /* what p+p gave it before */
.person__more{display:none}

/* With only one or two of you, three columns leave a third of the panel bare.
   Two across instead, each with the portrait beside the words, which also
   gives a long biography a sensible measure to be read at. */
@media(min-width:781px){
  .people--few{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:clamp(2rem,4vw,4rem)}
  .people--few .person{display:grid;
    grid-template-columns:clamp(150px,15vw,215px) minmax(0,1fr);
    column-gap:clamp(1.1rem,2vw,1.9rem);align-items:start}
  .people--few .person__img{grid-column:1;grid-row:1 / span 10;margin-bottom:0;
    position:sticky;top:calc(var(--navh) + 1.5rem)}
  .people--few .person__words{grid-column:2}
  .people--few .person h3{margin-top:-.25rem}
  .people--few .person p{max-width:46ch}
}
.people__note{margin-top:clamp(2rem,4vw,3rem);padding-top:1.2rem;border-top:1px solid var(--line);
  max-width:64ch;font-size:.95rem;line-height:1.6;color:var(--body-2)}
.people__note a{border-bottom:1px solid var(--brown);color:var(--brown)}
.people__note a:hover{background:var(--brown);color:var(--cream)}

/* values */
.values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
@media(max-width:820px){.values{grid-template-columns:minmax(0,1fr)}}
.value{padding:clamp(1.6rem,3vw,2.6rem) 0;border-top:1px solid var(--line)}
.value:nth-child(even){padding-left:clamp(1.2rem,3vw,3rem);border-left:1px solid var(--line)}
@media(max-width:820px){.value:nth-child(even){padding-left:0;border-left:0}}
.value h3{font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.06;margin:.9rem 0 0;max-width:16ch}
.value p{color:var(--body-2);font-size:.92rem;line-height:1.55;max-width:42ch;margin-top:.9rem}

/* ---------- journal ---------- */
.jrn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,3.5vw,3rem) clamp(1.2rem,2.5vw,2.5rem)}
@media(max-width:900px){.jrn{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.jrn{grid-template-columns:minmax(0,1fr)}}
.jrn a{display:flex;flex-direction:column;height:100%}
.jrn__frame{display:block;overflow:hidden;position:relative}
.jrn__frame .pic{transition:transform 1.2s var(--ease)}
.jrn a:hover .jrn__frame .pic{transform:scale(1.04)}
.jrn__meta{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  border-top:1px solid var(--line);margin-top:1rem;padding-top:.8rem}
.jrn h3{font-family:var(--display);font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.14;
  margin:.7rem 0 0;transition:transform .5s var(--ease)}
.jrn a:hover h3{transform:translateX(4px)}
.jrn p{font-size:.9rem;line-height:1.5;color:var(--body-2);margin:.6rem 0 0;max-width:42ch}

.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media(max-width:820px){.feature{grid-template-columns:minmax(0,1fr);gap:1.5rem}}
.feature .pic{width:100%}
.feature h2{margin:1rem 0 .8rem}

.article-body{max-width:64ch;margin:0 auto}
.article-body h3{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);margin:2.4rem 0 .8rem}
.article-body blockquote{margin:2.4rem 0;padding-left:1.4rem;border-left:1px solid var(--sage);
  font-family:var(--display);font-size:1.35rem;line-height:1.3}

/* ---------- careers / faq ---------- */
.vac{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;
  border-top:1px solid var(--line);padding:clamp(1.2rem,2.4vw,1.8rem) 0}
.vac:last-of-type{border-bottom:1px solid var(--line)}
.vac h3{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,2rem)}
.vac .label{margin-top:.5rem}
.empty{border:1px dashed var(--line);padding:clamp(2rem,5vw,3.5rem);text-align:center}

/* ---------- contact form ---------- */
.form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,2.4vw,2rem)}
@media(max-width:700px){.form{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:.55rem}
.field.full{grid-column:1/-1}
.field label{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.98rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.7rem 0;border-radius:0;transition:border-color .4s var(--ease)}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sage);outline:none}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.form-note{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:1rem}
.form-note small{color:var(--muted);font-size:.78rem}

/* ---------- footer ---------- */
.foot{background:var(--brown-deep);border-top:4px solid var(--mist);color:var(--cream);padding:clamp(3rem,7vw,6rem) var(--pad) 2rem}
.foot a:hover{color:var(--muted)}
.foot__top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem;padding-bottom:clamp(2.5rem,5vw,4rem)}
@media(max-width:820px){.foot__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:560px){.foot__top{grid-template-columns:minmax(0,1fr)}}
.foot .btn--solid{background:var(--mist);color:var(--ink);border-color:var(--mist)}
.foot .btn--solid::before{background:var(--cream)}
.foot .btn--solid:hover{color:var(--brown);border-color:var(--cream)}
.foot__mail{display:block;margin-top:1.6rem;font-family:var(--display);
  font-size:clamp(1.05rem,1.8vw,1.4rem);border-bottom:1px solid var(--line);padding-bottom:.3rem;width:fit-content}
.foot__mail:hover{border-color:var(--cream)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.88rem}
.foot .label{color:#A79C91;margin-bottom:1.2rem;display:block}
.foot__base{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:1.5rem;font-size:.75rem;color:#A79C91}

/* ============================================================
   LARGE SCREENS — the layout gets more generous, not just wider
   ============================================================ */
@media(min-width:1400px){
  .hero__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:5rem}
  .phone{width:320px}
  .about-open{gap:6rem}
  .svc-block{gap:6rem}
  .people{gap:4rem}
  .founder{gap:4rem}
  .lede{max-width:38ch}
}
@media(min-width:1900px){
  /* past the container width the page is centred, so lift the type a step */
  :root{--t-body:1.18rem;--t-label:.75rem}
  .measure{max-width:62ch}
}

/* ============================================================
   MOBILE PASS
   ============================================================ */
@media(max-width:820px){
  /* the 12-column grid halves, so anything asked for 7 columns
     would have spilled into a 13th. Everything goes full width. */
  .grid>*{grid-column:1/-1!important}
  .grid{gap:clamp(1.2rem,4vw,2rem)}
  .sill{flex-wrap:wrap;gap:.5rem 1rem}
  .sill::after{min-width:2rem}
  .card__meta{flex-wrap:wrap;gap:.2rem .8rem}
  /* thumb-sized targets */
  .filters button,.svc-index button{min-height:44px}
  .btn{padding:1.15rem 1.5rem}
}
@media(max-width:700px){
  /* --- the footer lifts to cream so the page doesn't end in a long brown run --- */
  .foot{background:var(--cream);color:var(--ink);
        --line:rgba(20,20,15,.15);--muted:#6B6058}
  .foot__logo{filter:none}                    /* the lockup is a white knockout */
  .foot a{color:var(--ink)}
  .foot a:hover{color:var(--brown)}
  .foot .label{color:#6B6058}
  .foot__mail{border-bottom-color:rgba(20,20,15,.2)}
  .foot__mail:hover{border-color:var(--ink)}
  .foot .btn--solid{background:var(--brown);color:var(--cream);border-color:var(--brown)}
  .foot .btn--solid::before{background:var(--mist)}
  .foot .btn--solid:hover{color:var(--ink);border-color:var(--mist)}
  .foot__base{border-top-color:rgba(20,20,15,.15)}

  /* --- the header is fixed cream-and-ink on phones, never sampled --- */
  .nav{background:var(--cream);color:var(--ink);backdrop-filter:none;
       border-bottom:1px solid rgba(36,30,24,.10)}
  .nav-toggle{color:var(--ink)}
  .is-dark .brand img{filter:none}
  .menu-open .nav{background:transparent;color:var(--cream);border-bottom:0}
  .menu-open .nav-toggle{color:var(--cream)}
  .menu-open .brand img{filter:invert(1)}

  /* --- the phone hero: headline, one line, one button --- */
  .scroll-cue{display:none}            /* scrolling is the default gesture on touch */
  .lede{font-size:1.12rem}
  .hero__meta{margin-top:1.6rem;gap:.8rem}
  .hero__meta .btn:not(.btn--solid){display:none}   /* Get in touch lives in the menu */
  .hero__meta .btn{width:100%;justify-content:center}
  .hero{padding-bottom:clamp(1.5rem,4vw,2.5rem)}
  .windows:empty{display:none}

  /* --- the film fills the first screen, the words sit on top of it --- */
  .room-glass{position:relative;overflow:hidden;background-image:none}
  /* the cream type belongs to the hero, not the room — the nav samples the room,
     and inheriting cream there made MENU white on a cream bar */
  .hero{--fg:var(--cream);--body-2:rgba(242,237,229,.88);--muted:rgba(242,237,229,.72);
    --line:rgba(242,237,229,.28);color:var(--cream)}
  .hero-bg{display:block;position:absolute;inset:0;z-index:0}
  .hero-bg .phone-wrap,.hero-bg .phone-frame{display:block;height:100%}
  .hero-bg .phone{width:100%;height:100%;aspect-ratio:auto;border-radius:0;padding:0;
    background:none;box-shadow:none;animation:none}
  .hero-bg video{width:100%;height:100%;object-fit:cover;border-radius:0}
  .hero-bg .phone__island,.hero-bg .phone-panel,.hero-bg .phone-cap{display:none}
  /* a scrim, or the type would sit on whatever the film happens to be doing */
  .hero-bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(30,25,20,.52) 0%,rgba(30,25,20,.34) 42%,rgba(30,25,20,.72) 100%)}
  .hero{position:relative;z-index:1;min-height:calc(100svh - var(--navh) - 2px);
    display:flex;flex-direction:column;justify-content:center;
    padding-top:clamp(2rem,8vw,3rem);padding-bottom:clamp(2.5rem,9vw,4rem)}
  .hero h1,.hero .lede{color:var(--cream)}
  .hero .lede{max-width:22ch}
  /* on the film the button needs to be the lightest thing, not the darkest */
  .hero__meta .btn--solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}
  .hero__meta .btn--solid::before{background:var(--mist)}
  .hero__meta .btn--solid:hover{color:var(--ink)}

  /* --- every project stays open: predictable beats clever on touch --- */
  .work-row__reveal{grid-template-rows:1fr}
  .work-row__body{opacity:1;padding-top:1.2rem}

  /* --- proof gets room --- */
  .metrics .metric{padding-block:clamp(1.2rem,4vw,1.8rem)}

  /* iOS zooms the page in when a focused field is under 16px */
  .field input,.field select,.field textarea{font-size:16px}
  .brand img{height:17px}
  .work-row__media{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-row__media>*:nth-child(3){display:none}
  .hero__meta{gap:1rem 1.5rem}
  .hero__meta .label{order:-1}
  .phone{width:min(252px,64vw)}
  .about-lead{font-size:1.15rem}
  .cs-facts{gap:1rem}
  .quote{max-width:none}
  }
@media(max-width:420px){
  .svc-block__media::before{display:none}   /* the offset panel gets cramped */
  .collage{gap:.5rem}
  .metric__lab{max-width:none}
}
/* short landscape phones: the loading house must still fit */
@media(max-height:520px){
  .gh{transform:scale(.5) rotateX(6deg) rotateY(-48deg)}
  @keyframes ghTurn{from{transform:scale(.46) rotateX(6deg) rotateY(-48deg);opacity:0}
    35%{opacity:1} to{transform:scale(.5) rotateX(4deg) rotateY(0deg);opacity:1}}
  .loader__mark{height:24px}
  .loader__skip{bottom:.8rem}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .rv-pane{clip-path:none}
  .hero h1 .ln i{transform:none}
  .loader{display:none}
  .work-row__reveal{grid-template-rows:1fr}
  .work-row__body{opacity:1;padding-top:1.2rem}
  .phone{animation:none}
  .wall__track{animation:none}
  .scroll-cue{animation:none;opacity:1}
  .scroll-cue .cue-arrow{transition:none}
}


/* ---------- phones: the house is drawn, not animated ----------
   A rotating box inside a perspective context makes the phone rebuild the whole
   3D layer on every frame, which is what the stutter was. Here the geometry is
   set once and never transformed again — only opacity animates, which the
   compositor handles for free. The door softens open instead of swinging. */
@media(max-width:700px){
  .loader{perspective:900px}
  .gh{transform:scale(.62) rotateX(4deg) rotateY(0deg);animation:none;opacity:1}
  .gh__door{animation:ghDoorSoften .8s .85s var(--ease) forwards}
  .loader__scene{animation:none}
  .loader__mark{animation:fadeUp .6s .3s var(--ease) forwards}
  .loader__skip{animation:fadeUp .5s .85s var(--ease) forwards}
  .ph-cta--second{width:100%;justify-content:center;margin-top:.7rem}
}
@media(max-width:700px) and (max-height:560px){
  .gh{transform:scale(.5) rotateX(4deg) rotateY(0deg)}
}
@keyframes ghDoorSoften{to{opacity:0}}


/* ---------- phones: the footer centres, and stops repeating itself ----------
   The closing invitation sits directly above the footer, so on a narrow screen
   its button and the footer's were the same call twice in a row. */
@media(max-width:700px){
  .foot__cta{display:none}
  .foot__top{justify-items:center;text-align:center}
  .foot__top > div{display:flex;flex-direction:column;align-items:center}
  .foot__logo{margin-bottom:1.4rem}
  .foot__mail{margin-top:1.1rem;width:auto}
  .foot ul{justify-items:center}
  .foot .label{margin-bottom:.9rem}
  .foot__base{justify-content:center;text-align:center}
}


/* ---------- breadcrumbs ---------- */
.crumbs{padding:.9rem var(--pad) 0;background:var(--cream)}
.crumbs[hidden]{display:none}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.5rem;opacity:.5}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current="page"]{color:var(--ink)}
@media(max-width:700px){
  .crumbs{padding-top:.7rem}
  .crumbs ol{font-size:.62rem;letter-spacing:.12em;gap:.4rem}
}


/* ---------- pictures inside an article ---------- */
.article-fig{margin:clamp(2rem,4vw,3rem) 0}
.article-fig img{width:100%;height:auto;display:block}
.article-fig figcaption{margin-top:.7rem;font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
@media(min-width:900px){
  .article-fig--wide{width:min(112%,calc(100% + 8vw));margin-left:-4vw}
}

/* ============================================================
   THE PHONE HOMEPAGE — seven full screens, one job each
   ============================================================ */
#phoneReel{display:none}

/* ============================================================
   SELECTED WORK — one card, both screens.
   The phone swipes it; the desktop swipes it too, by trackpad or by the
   two arrows. A card is a link, so a tap or a click opens the case study.
   Which case studies appear is the "Show on the homepage" tick in the
   editor — there is no cap on the number.
   ============================================================ */
.pcards{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.pcards::-webkit-scrollbar{display:none}
.pcard{flex:0 0 76%;scroll-snap-align:center;position:relative;overflow:hidden;
  aspect-ratio:9/12;background:#111;display:block}
.pcard .pic,.pcard img,.pcard video{width:100%;height:100%;object-fit:cover}
.pcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(36,30,24,0) 38%,rgba(36,30,24,.86) 100%)}
.pcard__in{position:absolute;left:0;right:0;bottom:0;padding:1.1rem;z-index:1;color:var(--cream)}
.pcard__fig,.pcard__lab,.pcard__name{display:block}
.pcard__fig{font-family:var(--display);font-weight:300;font-size:2.2rem;line-height:.9;letter-spacing:-.03em}
.pcard__lab{font-size:.76rem;color:rgba(242,237,229,.78);margin-top:.3rem;max-width:20ch}
.pcard__name{margin-top:.7rem;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(242,237,229,.7)}
/* how far through the cards you are — and that there are more */
.pcards__rail{position:relative;height:2px;background:rgba(20,20,15,.16);overflow:hidden}
.pcards__bar{position:absolute;inset:0 auto 0 0;width:30%;background:var(--ink);
  transition:transform .12s linear}

/* ---- the desktop rail ---- */
.wcards{padding:.2rem 0 1.4rem;gap:clamp(1rem,1.6vw,1.5rem);scroll-snap-type:x proximity}
.wcards .pcard{flex:0 0 clamp(240px,25%,340px);scroll-snap-align:start;
  transition:transform .5s var(--ease)}
.wcards .pcard__fig{font-size:clamp(2rem,2.6vw,2.9rem)}
.wcards__foot{display:flex;align-items:center;gap:1.4rem}
.wcards__foot .pcards__rail{flex:1}
.pcards__arrows{display:flex;gap:.5rem;flex:none}
.pcards__arrow{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;padding:0;
  transition:background .35s var(--ease),color .35s var(--ease),opacity .3s var(--ease)}
.pcards__arrow:hover:not(:disabled){background:var(--brown);color:var(--cream);border-color:var(--brown)}
.pcards__arrow:disabled{opacity:.3;cursor:default}
@media(hover:hover){
  .wcards .pcard:hover{transform:translateY(-6px)}
}
@media(prefers-reduced-motion:reduce){
  .wcards .pcard,.wcards .pcard:hover{transition:none;transform:none}
}
@media(max-width:700px){
  .wcards__foot .pcards__arrows{display:none}
}

@media(max-width:700px){
  body.has-reel #phoneReel{display:block}
  /* the reel replaces the stacked homepage on a phone */
  body.has-reel .route[data-route="home"] > .room{display:none}
  body.has-reel .crumbs{display:none}
  body.has-reel main{padding-top:0}

  .ppanel{position:relative;min-height:100svh;display:flex;flex-direction:column;
    justify-content:center;padding:calc(var(--navh) + 1.5rem) 0 clamp(7.5rem,20vw,9rem);
    scroll-snap-align:start;background:var(--cream);color:var(--ink)}
  .ppanel__in{padding:0 var(--pad);position:relative;z-index:1}
  #phoneReel{scroll-snap-type:y proximity}

  /* 1 the door */
  .ppanel--door{justify-content:flex-end;overflow:hidden;color:var(--cream);background:var(--ink)}
  .pfilm{position:absolute;inset:0;z-index:0}
  .pfilm video{width:100%;height:100%;object-fit:cover;display:block}
  .pfilm::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(36,30,24,.58) 0%,rgba(36,30,24,.18) 38%,rgba(36,30,24,.86) 100%)}
  .pdoor__h{font-family:var(--display);font-weight:300;font-size:clamp(3.4rem,18vw,5rem);
    line-height:.86;letter-spacing:-.04em;color:var(--cream)}
  .pdoor__h em{font-style:normal;display:block}
  .pdoor__lede{margin-top:1.1rem;max-width:22ch;color:rgba(242,237,229,.88);font-size:1.02rem}

  /* 2 the claim */
  /* the seal bleeds off the right edge on purpose, but unclipped it widened the
     phone's layout viewport to 487px against a 390px screen — which pushed
     anything positioned from the right off the side of the phone */
  .ppanel--claim{overflow:hidden}
  .pclaim{font-family:var(--display);font-weight:300;font-size:clamp(1.95rem,9vw,2.7rem);
    line-height:1.02;letter-spacing:-.03em;max-width:15ch;margin-top:1rem}
  .pclaim em{font-style:normal;font-family:var(--ui);font-weight:600;font-size:.62em;
    letter-spacing:-.01em;vertical-align:.06em}
  .pseal{position:absolute;right:-3.4rem;bottom:-2rem;width:13rem;height:13rem;opacity:.42;
    animation:pspin 34s linear infinite;pointer-events:none}
  @keyframes pspin{to{transform:rotate(360deg)}}
  .pseal text{font-family:var(--display);font-size:10.5px;letter-spacing:.3em;fill:var(--sage)}

  /* 3 the numbers */
  .ppanel--proof{background:var(--sage)}
  .pstat{padding:clamp(1.4rem,6vw,2.2rem) 0;border-top:1px solid rgba(36,30,24,.22)}
  .pstat:last-of-type{border-bottom:1px solid rgba(36,30,24,.22)}
  .pstat b{display:block;font-family:var(--display);font-weight:300;
    font-size:clamp(2.8rem,15vw,4.2rem);line-height:.88;letter-spacing:-.04em}
  .pstat span{display:block;margin-top:.45rem;max-width:24ch;font-size:.9rem;color:rgba(36,30,24,.72)}
  .ppanel--proof .label{color:rgba(36,30,24,.62)}

  /* 4 the work */
  .ppanel--work{background:var(--ink);color:var(--cream)}
  .ppanel--work .label{color:rgba(242,237,229,.55)}
  .pwork__h{font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,8.5vw,2.5rem);
    line-height:1;letter-spacing:-.03em;margin-top:.7rem;max-width:14ch;color:var(--cream)}
  .pcards{padding:1rem var(--pad) 1.1rem}
  .pcard{flex:0 0 76%;max-height:44svh}
  .pcards__rail{margin:0 var(--pad) 1.1rem;background:rgba(242,237,229,.22)}
  .pcards__bar{background:var(--cream)}
  .pbtn--ghost{border-color:rgba(242,237,229,.45);color:var(--cream);background:none}
  /* the button must never crowd the arrow below it */
  .ppanel--work .ppanel__in:last-child{padding-bottom:.4rem}
  .pbtn--cream{background:var(--cream);color:var(--ink);border-color:var(--cream)}

  /* 5 the voice */
  .ppanel--voice{background:var(--paper)}
  .pquote{font-family:var(--display);font-weight:300;font-size:clamp(1.45rem,6.6vw,2rem);
    line-height:1.16;letter-spacing:-.02em;max-width:20ch;margin:1rem 0 0}
  .pquote__who{margin-top:1.4rem}

  /* 6 what we do — each service opens for what it actually means */
  .pdoes{list-style:none;margin:1.1rem 0 0;padding:0}
  .pdoes li{border-top:1px solid rgba(36,30,24,.16)}
  .pdoes li:last-child{border-bottom:1px solid rgba(36,30,24,.16)}
  .pdoes summary{display:flex;align-items:baseline;gap:.9rem;padding:.72rem .1rem;
    font-family:var(--display);font-weight:300;font-size:1.08rem;letter-spacing:-.02em;
    cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
  .pdoes summary::-webkit-details-marker{display:none}
  .pdoes summary::marker{content:""}
  .pdoes i{font-style:normal;font-family:var(--ui);font-size:.6rem;letter-spacing:.2em;
    color:var(--muted);min-width:1.7rem}
  .pdoes__chev{margin-left:auto;font-weight:300;color:var(--muted);font-size:1.05rem;
    line-height:1;display:inline-block;transition:transform .28s var(--ease)}
  .pdoes details[open] .pdoes__chev{transform:rotate(45deg)}
  .pdoes details[open] summary{padding-bottom:.35rem}
  /* the description lines up with the title, not the number */
  .pdoes__body{padding:0 .1rem .9rem 2.7rem;max-width:40ch}
  .pdoes__body p{margin:0;font-size:.85rem;line-height:1.5;color:rgba(36,30,24,.72)}
  .pdoes__more{display:inline-flex;align-items:center;gap:.45rem;margin-top:.75rem;
    font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
    border-bottom:1px solid rgba(36,30,24,.3);padding-bottom:.15rem}

  /* 7 the invitation */
  .ppanel--invite{background:var(--brown);color:var(--cream);text-align:center;
    min-height:calc(100svh + 4rem)}
  .pinvite__h{font-family:var(--display);font-weight:300;font-size:clamp(2.5rem,12vw,3.6rem);
    line-height:.96;letter-spacing:-.035em;max-width:12ch;margin:0 auto 1.6rem}
  .pmail{margin-top:1.4rem;font-size:.88rem;color:rgba(242,237,229,.72)}
  .pmail a{border-bottom:1px solid rgba(242,237,229,.4)}

  /* the arrow — same place on every panel */
  .pnext{position:absolute;left:50%;bottom:clamp(1.5rem,5vw,2.2rem);transform:translateX(-50%);
    z-index:5;display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;
    background:none;border:0;padding:.3rem;color:inherit;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .pnext em{font-style:normal;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
    font-weight:500;opacity:.62}
  .pnext span{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
    border:1px solid currentColor;opacity:.45;animation:pnudge 3s ease-in-out infinite}
  .pnext:active span{opacity:1}
  @keyframes pnudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

  /* the rail */
  .prail{position:fixed;top:calc(var(--navh) - .55rem);left:var(--pad);right:var(--pad);
    display:flex;gap:4px;z-index:40;transition:opacity .3s ease,transform .3s ease}
  .prail button{flex:1;height:20px;padding:9px 0 0;background:none;border:0;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .prail span{display:block;height:2px;background:rgba(36,30,24,.2);overflow:hidden;border-radius:2px}
  .prail b{display:block;height:100%;width:0;background:var(--ink);transition:width .35s ease}
  body.reel-dark .prail span{background:rgba(242,237,229,.28)}
  body.reel-dark .prail b{background:var(--cream)}
  /* the header bar stays cream over a dark panel, so the wordmark stays dark
     too — inverting it here would put white on cream (see .is-dark rule above) */
  /* a 667pt phone has ~180px less to play with — tighten rather than spill */
  @media(max-height:700px){
    .pcard{max-height:34svh}
    .pwork__h{font-size:clamp(1.55rem,7.2vw,2rem)}
    .pdoes summary{padding:.6rem .1rem;font-size:1rem}
    .pdoes__body p{font-size:.8rem;line-height:1.45}
    .pdoes__body{padding-left:.1rem;padding-bottom:.75rem}
  }

  body.reel-tuck .prail{transform:translateY(-160%);opacity:0}
  body.reel-tuck .mullion{transform:translateY(-100%);opacity:0}
  .mullion{transition:transform .35s ease,opacity .35s ease}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .pnext span,.pseal{animation:none}
}


/* ============================================================
   Phone ergonomics
   Thumb-sized targets, nothing set below 11px, and the services
   page folded down. All of it inside @media(max-width:700px);
   the desktop layout is untouched.
   ============================================================ */
@media(max-width:700px){

  /* --- hit areas -----------------------------------------------------
     The padding grows the touch box, the negative margin gives the space
     back to the layout, so the page looks identical and taps land. */
  .crumbs a{display:inline-block;padding:1rem 0;margin:-1rem 0}
  .foot nav a,.foot ul a{display:inline-block;padding:.8rem 0;margin:-.3rem 0}
  .foot__mail{display:inline-block;padding:.5rem 0}
  .sill a.label{display:inline-block;padding:1.1rem 0;margin:-1.1rem 0}
  .caps a{display:block;padding:.78rem 0;margin:-.78rem 0}
  /* an address in a sentence: inline padding grows the tap box without
     changing the line box, so the paragraph does not reflow */
  p a[href^="mailto:"],p a[href^="tel:"]{padding:.6rem 0}
  .card__cta{display:inline-block;padding-top:1.25rem;padding-bottom:.7rem}
  .people__note a{display:inline-block;padding:.85rem 0;margin:-.85rem 0}
  .svc-index button{min-height:44px}

  /* --- nothing below 11px --------------------------------------------- */
  .crumbs ol{font-size:11px}
  .card__tag span,.card__tags i,.svc-index__n,.step__n,
  .facts dt,.cs-facts dt,.collage figcaption,.cs-top figcaption,
  .field label,.filters button,.card__cta .arrow,
  .cs-phone__badge,.cs-feed__badge{font-size:11px}

  /* --- the services page folds ----------------------------------------- */
  /* Contact, on a phone: the form comes before "What happens next".
     Someone on a phone should meet the three boxes straight after the
     invitation, not scroll past a three-step explanation to reach them.
     The two sit in the same column on a wide screen, where they are read
     side by side with the form and the order does not arise. */
  .contact-aside{display:contents;opacity:1;transform:none}
  .contact-panel{order:1}
  .contact-form-col{order:2}
  .contact-next{order:3;margin-top:.4rem}

  /* A bio written for a wide screen is a screen and a half in this column.
     First paragraph, then the rest behind a button. */
  .person__rest{display:none}
  .person__words.is-open .person__rest{display:block}
  .person__more{display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;
    margin-top:.9rem;padding:.4rem 0 .5rem;min-height:44px;background:none;border:0;
    border-bottom:1px solid rgba(36,30,24,.3);color:var(--brown);cursor:pointer;
    font-family:var(--ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    font-weight:500;-webkit-tap-highlight-color:transparent}
  .person__more b{font-weight:400;font-size:1.05rem;line-height:1}
  .person__words.is-open .person__more b{font-size:1.15rem}

  /* the jump list said the same seven names as the list right below it */
  .svc-index{display:none}
  .svc-top{display:block}
  .svc-block{display:block;padding-block:0}
  .svc-fold__sum{display:flex;align-items:baseline;gap:.9rem;width:100%;
    padding:1.05rem .1rem;text-align:left;background:none;border:0;color:inherit;
    cursor:pointer;min-height:44px;box-sizing:border-box;
    -webkit-tap-highlight-color:transparent}
  .svc-block.is-folded>.svc-block__body,
  .svc-block.is-folded>.svc-block__media{display:none}
  .svc-fold__n{font-family:var(--ui);font-size:11px;letter-spacing:.2em;
    color:var(--muted);min-width:2rem}
  .svc-fold__t{font-family:var(--display);font-weight:300;font-size:1.14rem;letter-spacing:-.02em}
  .svc-fold__chev{margin-left:auto;color:var(--muted);font-weight:300;font-size:1.15rem;
    line-height:1;display:inline-block;transition:transform .28s var(--ease)}
  .svc-block:not(.is-folded)>.svc-fold__sum .svc-fold__chev{transform:rotate(45deg)}
  .svc-block__body>.label{display:none}          /* the summary already says it */
  .svc-block__body h2{margin-top:0;font-size:1.3rem;max-width:24ch}
  .svc-block__media{margin-top:1.4rem;padding-bottom:1.9rem}
}



/* ============================================================
   SERVICES ON A PHONE — the seven as cards you swipe.
   Same card frame as the work, so the three main pages move the same way.
   The rail is only ever built under 700px; above it the page keeps the
   two-column blocks it has always had.
   ============================================================ */
.svc-rail-wrap:empty{display:none}
.svc-rail-wrap{margin-top:-1.75rem}
.svcards{padding:.4rem var(--pad) 1.1rem;gap:.7rem}
.svcards .pcard{flex:0 0 76%;aspect-ratio:9/13;max-height:none;scroll-snap-align:center}
.svccard__n,.svccard__t,.svccard__l{display:block}
.svccard__n{font-size:9.5px;letter-spacing:.2em;color:rgba(242,237,229,.6)}
.svccard__t{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  margin:.3rem 0 .5rem;color:rgba(242,237,229,.92)}
.svccard__l{font-family:var(--display);font-weight:300;font-size:1.22rem;line-height:1.12;
  letter-spacing:-.02em}
.svc-rail-wrap .pcards__rail{margin:0 var(--pad) 1.6rem;background:rgba(20,20,15,.16)}
.svc-rail-wrap .pcards__bar{background:var(--ink)}

/* ============================================================
   Contact
   Chips instead of dropdowns, a visible focus state, inline
   errors, and "what happens next" under the panel.
   ============================================================ */

/* --- what happens next --- */
.next{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.next__list{list-style:none;margin:1rem 0 0;padding:0;counter-reset:none}
.next__list li{display:flex;gap:1rem;align-items:baseline;padding:.95rem 0;
  border-top:1px solid var(--line);color:var(--body-2);font-size:.92rem;line-height:1.5}
.next__list li:last-child{border-bottom:1px solid var(--line)}
.next__n{font-family:var(--ui);font-size:11px;letter-spacing:.2em;color:var(--muted);
  min-width:1.9rem;flex:none}

/* --- chips --- */
.chips{border:0;padding:0;margin:.9rem 0 .5rem;min-width:0}
.chips+.chips{margin-top:1.5rem}
.chips.full{grid-column:1/-1}
.chips legend{padding:0;float:left;width:100%}
.chips__hint{clear:both;margin:.35rem 0 0;font-size:.78rem;color:var(--muted)}
.chips__row{clear:both;display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.85rem}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.05rem;
  border:1px solid var(--line);font-size:.84rem;color:var(--body-2);white-space:nowrap;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.chip input:hover+span{border-color:var(--muted);color:var(--fg)}
.chip input:checked+span{background:var(--sage);border-color:var(--sage);color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}

/* --- fields --- */
.field input,.field select,.field textarea{border-bottom-width:1px}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-width:2px;padding-bottom:calc(.7rem - 1px)}
.field.is-filled label{color:var(--fg)}
.field.is-bad input,.field.is-bad textarea{border-color:#B4544A}
.field__err{font-size:.78rem;color:#B4544A;min-height:0}
.field:not(.is-bad) .field__err{display:none}

/* a field only a robot fills in */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- sending, and what comes back --- */
.form.is-sending{opacity:.55;pointer-events:none}
.form-done{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1.6rem}
.form-done h2{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 .6rem}
.form-done p{margin:0;color:var(--body-2)}

@media(max-width:700px){
  .chips__row{gap:.45rem}
  .chip span{font-size:.82rem;padding:.5rem .9rem}
  .next__list li{font-size:.9rem}
  /* the button is the last thing a thumb reaches for — give it the full width */
  .form-note{flex-direction:column;align-items:stretch;gap:1rem}
  .form-note .btn{width:100%;justify-content:center}
  .form-note small{order:2;text-align:center}
}


/* ============================================================
   The corner knock
   A pill in the bottom-right that opens one field. Same endpoint
   as the contact form, tagged so the two can be told apart.
   Never on the contact page — it would be asking twice.
   ============================================================ */
.knock{position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:65;
  display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.knock[hidden]{display:none}
.knock.is-in{opacity:1;transform:none;pointer-events:auto}

.knock__gh{width:34px;height:34px;flex:none;background:var(--sage);color:var(--ink);
  display:grid;place-items:center;font-family:var(--display);font-weight:400;
  font-size:15px;letter-spacing:-.03em;line-height:1}

.knock__gh--lg{width:52px;height:52px}
.knock__gh svg{display:block}
.knock__trigger{display:inline-flex;padding:0;background:none;border:0;cursor:pointer;
  color:var(--ink);transition:transform .35s var(--ease)}
.knock__trigger .knock__gh{box-shadow:0 10px 30px rgba(36,30,24,.24)}
.knock__trigger:hover{transform:translateY(-2px)}
.knock__trigger:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.knock.is-open .knock__trigger{display:none}

/* on the phone homepage the reel puts its arrow in the bottom centre and this
   would land on top of it, so there — and only there — it moves to the left */
.knock.knock--left{right:auto;left:1rem;align-items:flex-start}

.knock__panel{width:330px;max-width:calc(100vw - 2rem);background:var(--cream);
  border:1px solid var(--line);box-shadow:0 22px 60px rgba(36,30,24,.22);text-align:left}
.knock__panel[hidden]{display:none}
.knock.is-open .knock__panel{animation:knockRise .34s var(--ease) both}
@keyframes knockRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.knock__top{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;background:var(--sage)}
.knock__top .knock__gh{background:var(--cream);width:28px;height:28px;font-size:13px}
.knock__t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink)}
.knock__x{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--ink);
  font-size:16px;line-height:1;padding:.6rem;margin:-.6rem -.35rem -.6rem 0;opacity:.65}
.knock__x:hover{opacity:1}
.knock__body{padding:1.35rem 1.15rem 1.25rem}
.knock__h{font-family:var(--display);font-weight:300;font-size:1.5rem;line-height:1.08;
  letter-spacing:-.02em;margin:0 0 .45rem}
.knock__p{margin:0;font-size:.88rem;color:var(--body-2);line-height:1.5}
.knock__label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:1.25rem 0 .4rem}
.knock__body input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);padding:.6rem 0;border-radius:0;
  transition:border-color .3s var(--ease)}
.knock__body input:focus{outline:none;border-bottom:2px solid var(--sage);padding-bottom:calc(.6rem - 1px)}
.knock__err{display:none;font-size:.78rem;color:#B4544A;margin-top:.5rem}
.knock.is-bad .knock__err{display:block}
.knock.is-bad .knock__body input{border-color:#B4544A}
.knock__go{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  margin-top:1.1rem;min-height:48px;background:var(--brown);color:var(--cream);
  border:1px solid var(--brown);cursor:pointer;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;transition:background .3s var(--ease)}
.knock__go:hover{background:var(--ink)}
.knock.is-sending .knock__go{opacity:.55;pointer-events:none}
.knock__alt{display:flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:44px;margin-top:.35rem;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.knock__alt:hover{color:var(--ink)}
.knock__done{padding:2rem 1.15rem 1.9rem;text-align:center}
.knock__done .knock__gh{width:54px;height:54px;font-size:22px;margin:0 auto .9rem}
.knock__done h2{font-family:var(--display);font-weight:300;font-size:1.75rem;
  letter-spacing:-.02em;margin:0 0 .5rem}
.knock__done p{font-size:.88rem;color:var(--body-2);margin:0}

@media(prefers-reduced-motion:reduce){
  .knock,.knock.is-open .knock__panel{transition:none;animation:none}
}
@media(max-width:700px){
  /* clear of the reel's arrow, and never over the rail */
  .knock{right:1rem;bottom:1rem}
  .knock__label-t{font-size:11px}
}