/* Intrio — palette sampled from the studio's own built work (hue 20–30°) */
:root{
  --paper:#FBFAF8;        /* warm white — reads white, not cream */
  --paper-2:#F2EEE9;      /* raised surface */
  --ink:#17120F;          /* warm near-black type */
  --taupe:#756A5F;        /* secondary type — sampled; dark enough for AA on --paper-2 too */
  --line:#E3DCD3;         /* hairlines */
  --brass:#86653F;        /* accent — their fixtures; AA on both --paper and --paper-2 */

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --rule: 1px solid var(--line);

  --step--1: clamp(.72rem,.70rem + .08vw,.80rem);   /* 12-13px  labels   */
  --step-0 : clamp(.95rem,.92rem + .14vw,1.02rem);  /* 15-16px  body     */
  --step-1 : clamp(1.05rem,1rem + .42vw,1.32rem);   /* 17-21px  lede     */
  --step-2 : clamp(1.45rem,1.2rem + 1.1vw,2.05rem); /* 23-33px  section  */
  --step-3 : clamp(2rem,1.5rem + 2.4vw,3.3rem);     /* 32-53px  page ttl */
  --step-4 : clamp(2.4rem,1.7rem + 3.5vw,4.5rem);   /* 38-72px  hero     */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--step-0);line-height:1.65;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
  /* No overflow rule on html or body, deliberately. Setting overflow-x on body
     (hidden or clip) — and especially on html AND body together — stops iOS Safari
     scrolling the document. Nothing overflows horizontally (checked at 360/390/414
     on every page), so there is nothing to clip. */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}

.display{
  font-family:Fraunces,Georgia,serif;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 96;
  font-weight:300;line-height:.94;letter-spacing:-.02em;
}
.meta{
  font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.14em;color:var(--taupe);font-weight:500;line-height:1.5;
}
/* content that is information, not a label: never uppercase, never tracked */
.date{margin:0 0 .35rem;font-size:var(--step--1);color:var(--taupe);
  letter-spacing:0;text-transform:none;line-height:1.5}
/* same weight and colour as every other contact line — the heading above it is the
   only thing that should read differently */
.hours{margin:0;font-size:var(--step-0);color:var(--ink);
  letter-spacing:0;text-transform:none;line-height:1.65}
.shell{padding-inline:var(--pad)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;display:flex;
  align-items:center;justify-content:space-between;
  padding:1.15rem var(--pad);
  background:var(--paper);
  border-bottom:var(--rule);
}
.wordmark{display:block;line-height:0}
.wordmark img{width:clamp(84px,9vw,116px);height:auto}
.nav-links{display:flex;gap:clamp(1rem,2.5vw,2.4rem)}
.nav-links a{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;
  color:var(--taupe);transition:color .35s}
.nav-links a:hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding:clamp(7rem,16vh,10rem) var(--pad) clamp(1.5rem,4vw,2.5rem)}
.hero h1{margin:0;max-width:20ch;font-size:var(--step-4);text-wrap:balance}
.hero-arch{
  position:absolute;inset:0;z-index:-1;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);
  mask-image:linear-gradient(to bottom,#000 62%,transparent);
}
.hero-arch img{
  width:100%;height:100%;object-fit:cover;opacity:1;
  filter:saturate(.98);
}
.hero-arch::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,transparent 34%,var(--paper) 94%)}
.hero-head{align-self:end;max-width:none}
.hero-eyebrow{margin:0 0 1.1rem}
.hero-head h1{margin:0;font-size:var(--step-4);text-wrap:balance}
.hero-head h1 em,.hero h1 em{font-style:normal;color:var(--brass)}
.hero-foot{display:flex;justify-content:space-between;align-items:end;
  gap:2rem;flex-wrap:wrap;border-top:var(--rule);padding-top:1.2rem;margin-top:clamp(2rem,5vw,3.5rem)}
.hero-foot p{margin:0;max-width:38ch;color:var(--taupe)}

/* ---------- work index ---------- */
.section-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;border-bottom:var(--rule);padding-bottom:.9rem;margin-bottom:clamp(2rem,5vw,4rem)}
.section-head h2{margin:0;font-size:var(--step-1);font-weight:400;font-family:Fraunces,serif;
  font-variation-settings:"SOFT" 60,"WONK" 1}

.work{padding-block:clamp(4rem,10vw,9rem)}
/* four projects, so the grid is an explicit 2x2 at desktop rather than auto-fit —
   auto-fit gives 3 columns and strands the fourth card alone on its own row. */
.grid{display:grid;gap:clamp(2rem,4.5vw,4.5rem);grid-template-columns:1fr}
@media (min-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
.card{display:block;position:relative}
/* fail-safe: images are visible by default; JS opts in to the reveal */
.card.is-pending .card-fig{clip-path:inset(0 0 100% 0)}
.card-fig{
  /* <figure> carries a UA default margin:1em 40px — without this reset the image
     sits inset from the caption and rule below it. */
  margin:0;
  position:relative;overflow:hidden;background:var(--paper-2);
  aspect-ratio:4/3;
  transition:clip-path 1.1s cubic-bezier(.16,1,.3,1);
}
.card-fig img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .6s;
  filter:saturate(.98)}
.card:hover .card-fig img,
.card:focus-visible .card-fig img{transform:scale(1.05);filter:saturate(1) brightness(1)}
.card-body{display:flex;justify-content:space-between;gap:1rem;
  align-items:baseline;margin-top:1rem;border-top:var(--rule);padding-top:.75rem}
.card-body h2,.card-body h3{margin:0;font-size:var(--step-1);font-weight:400;font-family:Fraunces,serif;
  font-variation-settings:"SOFT" 60,"WONK" 1;line-height:1.1}
.card-idx{font-size:var(--step--1);color:var(--brass);letter-spacing:.14em}

/* first card runs full width — newest work leads */
/* ---------- studio ---------- */
.studio{padding-block:clamp(4rem,10vw,9rem);border-top:var(--rule)}
.studio-grid{display:grid;gap:clamp(2rem,5vw,5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));align-items:start}
.lede{font-family:Fraunces,serif;font-variation-settings:"SOFT" 60,"WONK" 1;
  font-weight:300;font-size:var(--step-2);line-height:1.25;margin:0 0 1.4rem}
.studio p{color:var(--taupe);max-width:52ch}
.stats{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));margin-top:2.5rem}
.stat b{display:block;font-family:Fraunces,serif;font-variation-settings:"SOFT" 60;
  font-size:var(--step-2);font-weight:300;color:var(--ink);line-height:1}
.stat span{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;color:var(--taupe)}

/* ---------- contact ---------- */
.contact{padding-block:clamp(4rem,10vw,9rem) 5rem;border-top:var(--rule)}
.contact h2{font-family:Fraunces,serif;font-variation-settings:"SOFT" 60,"WONK" 1;
  font-weight:300;font-size:var(--step-3);margin:0 0 2rem;max-width:14ch}
.contact-links{display:flex;flex-wrap:wrap;gap:2.5rem}
.clink{border-bottom:1px solid var(--line);padding-bottom:.35rem;transition:border-color .4s,color .4s}
.clink:hover{border-color:var(--brass);color:var(--brass)}
footer{border-top:var(--rule);padding:1.5rem var(--pad);display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--taupe);font-size:var(--step--1)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .card-fig{clip-path:none}
}

.card{position:relative}
.card-loc{position:absolute;top:1rem;left:1rem;z-index:2;
  background:rgba(23,18,15,.74);
  background:color-mix(in oklab,var(--ink) 74%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:.3rem .6rem;
  font-size:var(--step--1);letter-spacing:.14em;color:var(--paper);opacity:0;transition:opacity .5s}
.card:hover .card-loc,.card:focus-visible .card-loc{opacity:1}
.card-body h2{font-size:var(--step-1)}

.hero-plate{margin:0 var(--pad) clamp(3rem,7vw,6rem);overflow:hidden;background:var(--paper-2)}
.hero-plate img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
@media (max-width:640px){.hero-plate img{aspect-ratio:4/5}}
.card-new{position:absolute;top:1rem;right:1rem;z-index:2;background:var(--ink);
  color:var(--paper);padding:.3rem .6rem;font-size:var(--step--1);letter-spacing:.14em}

/* ---------- interior pages ---------- */
.page-head{padding-block:clamp(7rem,16vh,10rem) clamp(1.5rem,4vw,2.5rem)}
.page-head h1{margin:.4rem 0 0;font-size:var(--step-3);max-width:18ch;text-wrap:balance}
.page-head .meta a{color:var(--taupe);border-bottom:1px solid var(--line)}
.page-head .meta a:hover{color:var(--ink)}
.page-lede{margin:1.25rem 0 0;max-width:56ch;color:var(--taupe);font-size:var(--step-1);line-height:1.55}
.seeall{color:var(--taupe)}
.seeall:hover{color:var(--ink)}

.prose{padding-block:0 clamp(4rem,9vw,7rem);max-width:none}
/* two-column editorial: label left, body right. Keeps a readable measure
   without stranding one narrow column against an empty half-page. */
.prose-row{display:grid;gap:.5rem 3.5rem;margin:0 0 clamp(2.5rem,5vw,4rem);
  align-items:start;max-width:74rem}
.prose-row:last-child{margin-bottom:0}
@media (min-width:900px){
  .prose-row{grid-template-columns:15rem minmax(0,42rem)}
  .prose-row h2{position:sticky;top:6.5rem}
  /* intro statements read as a lead-in, not a label */
  .prose-row--wide{grid-template-columns:minmax(0,58rem);gap:.9rem}
  .prose-row--wide h2{position:static;font-size:var(--step-2);max-width:24ch}
}
.prose-body > *:last-child{margin-bottom:0}
/* long-form: one centred measure. padding-inline is already on .shell, so the
   centred column must not add its own or the text is inset twice and misaligns. */
.prose.narrow{max-width:40rem;margin-inline:auto;padding-inline:0}
@media (min-width:900px){
  .page-head.post-head{max-width:40rem;margin-inline:auto;padding-inline:0}
}
.prose h2{font-family:Fraunces,serif;font-variation-settings:"SOFT" 60,"WONK" 1;
  font-weight:400;font-size:var(--step-1);margin:0 0 .6rem;line-height:1.25;color:var(--ink);
  text-wrap:balance}

.prose p{margin:0 0 1.15rem;color:var(--taupe)}
/* body copy is uniform; the page lede is the only elevated paragraph */
.contact-grid p,.form-note p{font-size:var(--step-0);line-height:1.65}
.contact-grid p{color:var(--ink)}

/* project page */
.project-head .facts{display:grid;gap:1.25rem 2.5rem;margin:2.5rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(9rem,auto));border-top:var(--rule);padding-top:1.25rem}
.facts div{display:grid;gap:.2rem}
.facts dt{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em;color:var(--taupe)}
.facts dd{margin:0;font-size:var(--step-0)}
.project{padding-block:clamp(2rem,5vw,3.5rem) clamp(3rem,7vw,5rem);
  display:grid;gap:clamp(1rem,2.5vw,2rem)}
.shot{margin:0;overflow:hidden;background:var(--paper-2);aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
/* the wide tiles that span the full column */

@media (min-width:900px){
  .project{grid-template-columns:repeat(2,1fr)}
  /* an odd gallery would leave the last tile alone in a half-width row:
     let it span instead, so it reads as a closing image, not a gap */
  .shot:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:21/9}
}
.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:var(--rule);padding-block:1.25rem;margin-bottom:clamp(3rem,7vw,5rem)}

/* journal */
/* Explicit column counts, not auto-fit: with 6 posts auto-fit gave 4+2 at 1680px
   and 5+1 at 1920px. 6 divides evenly by 3, 2 and 1, so these never orphan a card. */
.post-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(4rem,9vw,7rem);
  grid-template-columns:1fr}
@media (min-width:640px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.post-grid{grid-template-columns:repeat(3,1fr)}}
/* the homepage teaser runs 4 posts, so it stays 2x2 and matches the project grid */
@media (min-width:1000px){.post-grid--2{grid-template-columns:repeat(2,1fr)}}
.post-card h2,.post-card h3{margin:.15rem 0 0;font-family:Fraunces,serif;font-variation-settings:"SOFT" 60,"WONK" 1;
  font-weight:400;font-size:var(--step-1);line-height:1.2;max-width:24ch}
.post-fig{margin:0 0 .9rem;overflow:hidden;background:var(--paper-2);aspect-ratio:4/3}
.post-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.post-card:hover .post-fig img{transform:scale(1.04)}
.post-hero{margin:0 auto clamp(2.5rem,5vw,3.5rem);overflow:hidden;max-width:54rem;padding-inline:var(--pad)}
.post-hero img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
@media (max-width:640px){.post-hero img{aspect-ratio:4/3}}
.post-title{font-size:var(--step-2);max-width:24ch}

/* contact */
.prose.contact-page{max-width:none}
.contact-grid{display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),18rem));
  border-top:var(--rule);padding-top:2rem;max-width:62rem}
.contact-grid .meta{line-height:1.9}
.contact-grid h2{margin:0 0 .8rem;font-size:var(--step-0);text-transform:uppercase;
  letter-spacing:.18em;font-family:Inter,sans-serif;font-weight:500;color:var(--taupe)}
.contact-grid p{margin:0 0 .5rem;color:var(--ink)}
.form-note{margin-top:2.5rem;padding:1.15rem 1.4rem;background:var(--paper-2);max-width:46rem}
.form-note p{margin:0;color:var(--ink)}

footer{gap:1.5rem}
footer a{border-bottom:1px solid transparent}
footer a:hover{border-color:var(--line);color:var(--ink)}

/* ---------- mobile ---------- */
.wordmark{flex:0 0 auto}
@media (max-width:760px){
  .nav{flex-direction:column;align-items:flex-start;gap:.55rem;
       padding-block:.75rem;background:var(--paper)}
  .nav-links{gap:1.05rem;flex-wrap:wrap}
  .nav-links a{font-size:var(--step--1);letter-spacing:.12em}
  .wordmark img{width:76px}
  .hero{padding-top:clamp(7.5rem,20vh,9rem)}
  .page-head{padding-top:clamp(7.5rem,20vh,9rem)}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:.75rem}
  .project-head .facts{grid-template-columns:repeat(2,1fr);gap:1rem}
  .pager{flex-direction:column;gap:.6rem}
  footer{flex-direction:column;gap:.5rem}
}
@media (max-width:420px){
  .nav-links{gap:.8rem}
  .nav-links a{font-size:var(--step--1);letter-spacing:.1em}
}

/* ---------- hero video ---------- */
.hero-plate{position:relative}
.hero-still,.hero-video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.hero-video{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .9s ease}
.hero-video.is-playing{opacity:1}
@media (max-width:640px){
  .hero-still,.hero-video{aspect-ratio:4/5}
}

/* ---------- full-screen scroll-scrubbed hero ---------- */
.hero-scroll{position:relative;height:520vh;margin-bottom:clamp(3rem,8vw,7rem)}
.hero-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink)}
.hero-sticky .hero-still,
.hero-sticky .hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.hero-sticky .hero-video{opacity:0;transition:opacity .8s ease}
.hero-sticky .hero-video.is-ready{opacity:1}
.hero-veil{position:absolute;inset:0;pointer-events:none;
  background:
    /* keeps the nav legible whatever the frame is doing */
    linear-gradient(to bottom,rgba(12,9,8,.46) 0,rgba(12,9,8,.14) 120px,rgba(12,9,8,0) 200px),
    /* carries the headline over the bright frames */
    linear-gradient(to top,rgba(12,9,8,.60) 0,rgba(12,9,8,.30) 38%,rgba(12,9,8,0) 68%),
    linear-gradient(to right,rgba(12,9,8,.40) 0%,rgba(12,9,8,.12) 55%,rgba(12,9,8,0) 100%)}
.hero-copy{position:absolute;left:0;right:0;bottom:clamp(3.5rem,10vh,7rem);color:#FBFAF8}
.hero-copy .meta{color:rgba(251,250,248,.72)}
.hero-copy h1{margin:.5rem 0 0;font-size:var(--step-4);max-width:20ch;color:#FBFAF8;text-wrap:balance;
  text-shadow:0 1px 30px rgba(12,9,8,.35)}
.hero-copy h1 em{font-style:normal;color:#D8B487}
.hero-sub{margin:1.25rem 0 0;max-width:46ch;color:rgba(251,250,248,.88);font-size:var(--step-1);line-height:1.55;
  text-shadow:0 1px 20px rgba(12,9,8,.4)}
/* capability strip: a hairline row, no bullets or separators — the spacing does it */
.hero-caps{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;
  margin:1.4rem 0 0;padding:1.05rem 0 0;
  /* the rule is as wide as the items themselves — 46ch here would be measured
     against this row's 12px type, not the subline's, and would wrap the last item */
  width:fit-content;max-width:100%;
  border-top:1px solid rgba(251,250,248,.3);
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;
  color:rgba(251,250,248,.86);line-height:1.5;
  text-shadow:0 1px 20px rgba(12,9,8,.45)}
@media (max-width:760px){
  /* phones scrub a canvas frame sequence (see site.js): a full-screen pinned
     pane. 600vh of travel, so each swipe moves the walkthrough less and it feels weighted */
  .hero-scroll{height:600vh}
  .hero-sticky{position:sticky;top:0;height:100vh;height:100svh}
  .hero-veil{background:linear-gradient(to top,rgba(12,9,8,.72) 0%,rgba(12,9,8,.34) 55%,rgba(12,9,8,.12) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .hero-scroll{height:auto}
  .hero-sticky{position:relative;height:min(88svh,44rem)}
  .hero-cue{display:none}
}

/* ---------- nav over the video hero ---------- */
.wordmark{position:relative;display:block;line-height:0}
.wordmark img{width:clamp(84px,9vw,116px);height:auto;display:block}
.mark-light{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.nav--over{background:transparent;border-bottom-color:transparent;
  transition:background .45s ease,border-color .45s ease}
.nav--over .nav-links a{color:rgba(251,250,248,.86);text-shadow:0 1px 12px rgba(12,9,8,.5)}
.nav--over .nav-links a:hover{color:#FBFAF8}
.nav--over .mark-dark{opacity:0}
.nav--over .mark-light{opacity:1}
/* once past the hero it returns to the normal light bar */
.nav--over.is-solid{background:var(--paper);border-bottom-color:var(--line)}
.nav--over.is-solid .nav-links a{color:var(--taupe)}
.nav--over.is-solid .nav-links a:hover{color:var(--ink)}
.nav--over.is-solid .mark-dark{opacity:1}
.nav--over.is-solid .mark-light{opacity:0}

.btn{display:inline-block;text-align:center;background:var(--ink);color:var(--paper);
  padding:.95rem 1.5rem;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;
  transition:background .3s}
.btn:hover{background:var(--brass)}

/* lists inside journal posts */
.post-list{margin:0 0 1.15rem;padding:0 0 0 1.1rem;color:var(--taupe)}
.post-list li{margin:0 0 .5rem;line-height:1.65}
.post-list li::marker{color:var(--brass)}

/* ---------- enquiry form ---------- */
.enquiry{display:grid;gap:1.5rem;max-width:34rem;margin-top:2.5rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{display:grid;gap:.45rem}
.field-pair{display:grid;gap:1.5rem}
@media (min-width:560px){.field-pair{grid-template-columns:1fr 1fr}}
.enquiry label{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;color:var(--taupe)}
.enquiry .opt{text-transform:none;letter-spacing:0;color:var(--taupe)}
.enquiry input,.enquiry select,.enquiry textarea{
  font:inherit;font-size:var(--step-0);color:var(--ink);background:var(--paper);
  border:1px solid var(--line);padding:.7rem .85rem;width:100%;
  transition:border-color .25s}
.enquiry textarea{resize:vertical;min-height:7rem;line-height:1.6}
.enquiry input:hover,.enquiry select:hover,.enquiry textarea:hover{border-color:var(--taupe)}
.enquiry input:focus-visible,.enquiry select:focus-visible,.enquiry textarea:focus-visible{
  border-color:var(--ink);outline:2px solid var(--brass);outline-offset:2px}
.enquiry [aria-invalid="true"]{border-color:#9A3A2E}
.field-hint{margin:.1rem 0 0;font-size:var(--step--1);color:var(--taupe);line-height:1.55}
.field-error{margin:.1rem 0 0;font-size:var(--step--1);color:#8C3125;line-height:1.55}
.enquiry .btn{justify-self:start;border:0;cursor:pointer}
.enquiry .btn:disabled{opacity:.55;cursor:default}
.form-status{margin:0;font-size:var(--step-0);line-height:1.6;min-height:1.5em}
.form-status.is-ok{color:var(--ink)}
.form-status.is-error{color:#8C3125}

/* ---------- homepage sections ---------- */
.band{padding-block:clamp(4rem,9vw,7.5rem)}
.band--tint{background:var(--paper-2)}
.band + .band{border-top:var(--rule)}
.band--tint + .band,.band + .band--tint{border-top:0}

/* meet the team */
.team-grid,.founder-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (min-width:900px){
  /* photo column deliberately narrow — the picture is a supporting note, not the subject */
  /* same proportions as the founder row below, so the two sections line up */
  /* heading + one sentence beside a square photo: centre it so the space around it balances */
  .team-grid{grid-template-columns:minmax(0,24rem) minmax(0,1fr);align-items:center}
  /* the message is long, so it gets the rest of the row instead of a fixed 36rem */
  .founder-grid{grid-template-columns:minmax(0,24rem) minmax(0,1fr)}
}
/* square: the new plate is portrait, so a landscape frame would crop the group */
.team-photo{margin:0;aspect-ratio:1/1;background:var(--paper);overflow:hidden}
.founder-photo{margin:0;aspect-ratio:3/4;background:var(--paper);overflow:hidden}
.team-photo img,.founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* empty slots read as a considered placeholder, not a broken image */
.team-body p,.founder-note p{color:var(--taupe);margin:0 0 1.1rem;max-width:44ch}
.lead{font-family:Fraunces,serif;font-variation-settings:"SOFT" 60,"WONK" 1;
  font-weight:300;font-size:var(--step-2);line-height:1.25;color:var(--ink)!important;
  margin:0 0 1.2rem!important;max-width:22ch}

.founder-note{margin:0;border-left:2px solid var(--brass);padding-left:clamp(1.25rem,3vw,2rem)}
/* set the body in two columns on wide screens so it reads across rather than
   running down in one long ribbon */
.founder-body p{max-width:none}
@media (min-width:1080px){
  /* one column, full width of the message area — two columns could never end level,
     and the ragged bottom was worse than the extra measure */
  /* justified, but never break a word — the column is wide enough that justification
     spreads across many words per line, so the gaps stay small without hyphens */
  .founder-body,.team-body{text-align:justify;hyphens:none;-webkit-hyphens:none;
    overflow-wrap:normal;word-break:normal}
  .team-body p{max-width:none}
  .founder-body p{margin-bottom:.9rem}
  .founder-note .lead{max-width:30ch}
  /* motto and signature sit side by side under the columns so the row closes off */
  .founder-close{display:flex;align-items:baseline;justify-content:space-between;
    gap:2rem;flex-wrap:wrap;margin-top:1.8rem;
    border-top:1px solid var(--line);padding-top:1.4rem}
  .founder-close .founder-motto{margin:0!important}
  .founder-close .founder-sign{margin-top:0!important;text-align:right}
}
@media (min-width:1500px){.founder-note .lead{max-width:34ch}}
/* the closing line is the one people remember — set it, don't bury it in the body */
.founder-motto{margin:1.6rem 0 0!important;font-family:Fraunces,serif;
  font-variation-settings:"SOFT" 60,"WONK" 1;font-weight:400;
  font-size:var(--step-1);line-height:1.35;color:var(--ink)!important;max-width:30ch!important}
.founder-note .founder-sign{display:block;margin-top:1.6rem;padding:0;border:0;gap:0;
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;color:var(--ink)}
.founder-sign span{display:block;margin-top:.3rem;letter-spacing:.14em;color:var(--taupe)}

/* what we do */
.do-grid{display:grid;gap:clamp(1.75rem,4vw,3rem)}
@media (min-width:700px){.do-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.do-grid{grid-template-columns:repeat(4,1fr)}}
.do-grid article{border-top:var(--rule);padding-top:1.1rem}
.do-grid h3{margin:0 0 .55rem;font-family:Fraunces,serif;
  font-variation-settings:"SOFT" 60,"WONK" 1;font-weight:400;font-size:var(--step-1);line-height:1.25}
.do-grid p{margin:0;color:var(--taupe);line-height:1.65}

/* homepage contact */
#contact .contact-grid{border-top:0;padding-top:0}
#contact .contact-grid h3{margin:0 0 .8rem;font-size:var(--step-0);text-transform:uppercase;
  letter-spacing:.18em;font-family:Inter,sans-serif;font-weight:500;color:var(--taupe)}
#contact .contact-grid p{margin:0 0 .5rem;color:var(--ink)}
#contact .contact-cta{margin:clamp(2rem,4vw,3rem) 0 0}

/* ---------- Teddie, coming soon ---------- */
/* visually hidden but still focusable — the colour radios are driven by their
   labels, yet must stay reachable by keyboard and announced by screen readers. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* the grid is a <fieldset> so the four colours form one named radio group */
.teddie-grid{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  border:0;padding:0;margin:0;min-width:0}
@media (min-width:900px){
  .teddie-grid{grid-template-columns:minmax(0,30rem) minmax(0,34rem);justify-content:start}
}
.teddie-shot{margin:0;background:var(--paper-2);overflow:hidden;
  position:relative;aspect-ratio:1/1}
/* all four renders stack in the same square box, so swapping colour never shifts layout */
.teddie-shot .tc-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;opacity:0;transition:opacity .45s ease}
#tc-sage:checked  ~ .teddie-shot .tc-sage,
#tc-dusty-blush:checked ~ .teddie-shot .tc-dusty-blush,
#tc-warm-grey:checked ~ .teddie-shot .tc-warm-grey,
#tc-light-beige:checked   ~ .teddie-shot .tc-light-beige{opacity:1}

/* the colour is the label — chips only, no type */
.swatches{margin:0 0 1.6rem}
.swatch-row{display:flex;flex-wrap:wrap;gap:.9rem}
.swatch{display:block;cursor:pointer;padding:5px}   /* padding keeps a 54px tap target */
.swatch-chip{display:block;width:44px;height:44px;  /* square, like the rest of the site */
  box-shadow:inset 0 0 0 1px rgba(23,18,15,.14);transition:box-shadow .25s}
.swatch:hover .swatch-chip{box-shadow:inset 0 0 0 1px rgba(23,18,15,.32)}
/* selected: a square ring offset off the chip, matching the site's hairline language */
#tc-sage:checked  ~ .teddie-body .swatch-sage  .swatch-chip,
#tc-dusty-blush:checked ~ .teddie-body .swatch-dusty-blush .swatch-chip,
#tc-warm-grey:checked ~ .teddie-body .swatch-warm-grey .swatch-chip,
#tc-light-beige:checked   ~ .teddie-body .swatch-light-beige   .swatch-chip{
  box-shadow:inset 0 0 0 1px rgba(23,18,15,.2),0 0 0 1px var(--paper-2),0 0 0 3px var(--ink)}
/* keyboard focus has to show on the label, since the input itself is off-screen */
#tc-sage:focus-visible  ~ .teddie-body .swatch-sage,
#tc-dusty-blush:focus-visible ~ .teddie-body .swatch-dusty-blush,
#tc-warm-grey:focus-visible ~ .teddie-body .swatch-warm-grey,
#tc-light-beige:focus-visible   ~ .teddie-body .swatch-light-beige{outline:2px solid var(--brass);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.teddie-shot .tc-img{transition:none}}
.teddie-flag{display:inline-block;margin:0 0 1rem;padding:.32rem .7rem;
  border:1px solid var(--brass);color:var(--brass)}
.teddie-name{margin:0 0 .6rem;font-family:Fraunces,serif;
  font-variation-settings:"SOFT" 60,"WONK" 1;font-weight:300;
  font-size:var(--step-3);line-height:1}
.teddie-body p{color:var(--taupe);margin:0 0 1.1rem;max-width:42ch}
.teddie-note{color:var(--ink)!important}
.teddie-body .btn{margin-top:.6rem}

/* ---------- contact icons + map ---------- */
.clink{display:inline-flex;align-items:center;gap:.55rem}
.clink .ico{flex:0 0 auto;color:var(--taupe);transition:color .4s}
.clink:hover .ico{color:var(--brass)}

.map-block{margin:clamp(3rem,7vw,5rem) 0 0}
.map-label{margin:0 0 .35rem}
.map-addr{margin:0 0 .9rem;font-size:var(--step-0);color:var(--ink)}
/* square frame, hairline, matching the rest of the site */
.map-frame{position:relative;aspect-ratio:16/9;border:1px solid var(--line);
  background:var(--paper-2);overflow:hidden}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:640px){.map-frame{aspect-ratio:4/3}}
.map-note{margin:.9rem 0 0}

/* ---------- touch targets ----------
   Nav, "see all" and footer links render 15-19px tall, which is fiddly on a phone.
   Pad the hit area vertically and pull the padding back with negative margin so
   the visual spacing stays exactly as designed. */
@media (max-width:760px) and (pointer:coarse),(max-width:760px){
  .nav-links a,.seeall,footer a{
    padding-block:.65rem;margin-block:-.65rem;
    display:inline-block}
  .nav-links{row-gap:0}
}

/* ---------- team roles ----------
   Six roles: 1 -> 2 -> 3 columns, so every row is always full. */
.team-roles{display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,3rem);
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);border-top:var(--rule)}
@media (min-width:640px){.team-roles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.team-roles{grid-template-columns:repeat(3,1fr)}}
/* subgrid: each card spans three row tracks shared with its neighbours, so the
   role name, text and quote each start on the same line across the whole row,
   however long each person's text is */
.role{margin:0;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
@supports not (grid-template-rows:subgrid){
  .role{display:flex;flex-direction:column}
  .role-quote{margin-top:auto!important}
}
.role-name{margin:0 0 .7rem;font-family:Inter,system-ui,sans-serif;font-size:var(--step--1);
  font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--taupe)}
/* short card text stays left-aligned: justifying a narrow card opens gaps between words */
.role-text{margin:0 0 1.1rem;color:var(--taupe);line-height:1.65;text-align:left}
.role-quote{margin:0;font-family:Fraunces,serif;font-variation-settings:"SOFT" 60,"WONK" 1;
  font-weight:400;font-size:var(--step-1);line-height:1.35;color:var(--ink)}

/* phone hero frame sequence: fades in over the poster once its first frame is drawn */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .5s ease}
.hero-canvas.is-ready{opacity:1}

/* Lenis inertial scrolling: desktop only (site.js never starts it on phones) */
@media (min-width:761px){
  html.lenis, html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto!important}
  .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
}