/* Agency 504 · Round 08 scaffolding stylesheet
   One system: paper ground, green as the leading field, brass as the metal, carbon for type.
   Drafting conventions carry the structure: sheet labels, detail bubbles, dimension strings, a title block.
   FPO placeholders are deliberately visible. */

@font-face{font-family:"Barlow";font-weight:400;src:url(/fonts/Barlow-Regular.ttf?v=90af7bae) format("truetype");font-display:swap}
@font-face{font-family:"Barlow";font-weight:500;src:url(/fonts/Barlow-Medium.ttf?v=e0c9bb7c) format("truetype");font-display:swap}
@font-face{font-family:"Condensed";font-weight:900;src:url(/fonts/BarlowCondensed-Black.ttf?v=7385a0de) format("truetype");font-display:swap}
@font-face{font-family:"Mono";font-weight:400;src:url(/fonts/IBMPlexMono-Regular.ttf?v=560033d0) format("truetype");font-display:swap}

:root{
  --green:#173c32; --green-deep:#10291f; --plum:#392631; --brass:#b79b5f; --brass-deep:#8f7642;
  --paper:#f0ebdd; --paper-2:#e6e0d0; --carbon:#171917; --ink-2:#3d423e; --muted:#585d57;
  --line:rgba(23,25,23,.22); --line-strong:rgba(23,25,23,.5);
  --redline:#c8502e; --fpo:#c8502e;
  --display:"Condensed","Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --mono:"Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(20px,4.2vw,80px);
  --section:clamp(64px,9vw,128px);
  --measure:62ch;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
:root{--header-h:89px}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--carbon);font:400 18px/1.5 var(--body);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--redline);outline-offset:3px}
.on-dark :focus-visible,.on-plum :focus-visible{outline-color:var(--paper)}
.skip{position:fixed;top:-60px;left:20px;padding:10px 14px;background:var(--paper);color:var(--carbon);z-index:50;font-family:var(--mono);font-size:13px}
.skip:focus{top:10px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:900;line-height:.92;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(56px,8vw,132px)}
h2{font-size:clamp(46px,6.6vw,104px)}
h3{font-size:clamp(28px,3vw,46px)}
h1 em,h2 em{font-style:normal;color:var(--brass)}
.on-paper h1 em,.on-paper h2 em{color:var(--green)}
p{margin:0;max-width:var(--measure)}
.lead{font-size:clamp(21px,2.1vw,27px);line-height:1.35;font-weight:500}
.mono,.label,.sheet,figcaption{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.label{color:var(--muted)}
.on-dark .label,.on-plum .label,.on-dark .plate figcaption,.on-plum .plate figcaption{color:rgba(240,235,221,.72)}
h2.label{font-weight:400;line-height:1.5}
.stack{display:grid;gap:18px}
.tabular{font-variant-numeric:tabular-nums}

/* Surfaces */
.on-dark{background:var(--green);color:var(--paper)}
.on-plum{background:var(--plum);color:var(--paper)}
.on-paper{background:var(--paper);color:var(--carbon)}
.on-paper-2{background:var(--paper-2);color:var(--carbon)}
section.block{padding:var(--section) var(--gutter)}
.grid-2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px 5vw;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 3vw}
.section-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px 5vw;align-items:end;margin-bottom:clamp(28px,4vw,56px)}
.section-head p{align-self:end}

/* Sheet marker (replaces "01 /" eyebrows): a detail bubble + sheet code */
.sheet-mark{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.sheet-mark .bubble{min-width:30px;height:30px;padding:0 9px;box-sizing:border-box;border:1.5px solid currentColor;border-radius:15px;display:grid;place-items:center;font-family:var(--mono);font-size:12px;letter-spacing:0;white-space:nowrap}
.sheet-mark .sheet{opacity:.75}

/* Header */
.site-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:18px var(--gutter);background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.site-header .wordmark{display:block;line-height:0}
.site-header .wordmark img{height:52px;width:auto}
@media (max-width:600px){.site-header .wordmark img{height:40px}}
.site-header .descriptor{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.site-nav{display:flex;gap:clamp(14px,2vw,30px);align-items:center;font-weight:500;font-size:17px}
.site-nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.site-nav a[aria-current=page]{border-bottom-color:var(--green)}
.site-nav a.cta{border:1.5px solid var(--carbon);padding:8px 14px;border-radius:2px}
.menu-toggle{display:none;font:500 16px var(--body);background:none;border:1.5px solid var(--carbon);padding:8px 12px;border-radius:2px}
.header-cta{display:none}
@media (min-width:375px) and (max-width:900px){.header-cta{display:inline-block;grid-column:2;grid-row:1;justify-self:end;font:500 15px var(--body);text-decoration:none;border:1.5px solid var(--carbon);padding:7px 10px;border-radius:2px;white-space:nowrap}}
@media (max-width:900px){
  .site-header{grid-template-columns:auto 1fr auto}
  .site-header .descriptor{display:none}
  .menu-toggle{display:inline-block;justify-self:end;grid-column:3}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:12px var(--gutter) 20px;gap:4px}
  .site-nav.open{display:flex}
  .site-nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .site-nav a.cta{border:1.5px solid var(--carbon);padding:12px 14px;margin-top:10px;text-align:center}
  .site-header:not(.nav-ready) .site-nav{display:flex;position:static;border:0}
  .site-header:not(.nav-ready) .menu-toggle{display:none}
}

/* Hero with the signature sequence */
.hero{padding:clamp(24px,3vw,40px) var(--gutter) clamp(24px,3vw,40px);display:grid;gap:22px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:'copy turn' 'more turn';grid-template-rows:auto 1fr;gap:24px 4vw;align-items:start}
.hero-copy{grid-area:copy;display:grid;gap:22px}
.hero-more{grid-area:more}.hero-turn,.hero-plate{grid-area:turn}
.hero-plate{margin:0;display:grid;gap:8px}
.hero-plate img{width:100%;aspect-ratio:6/5;object-fit:contain;background:var(--paper);border:1px solid rgba(240,235,221,.25);border-radius:2px}
.hero-plate figcaption{display:flex;justify-content:space-between;gap:12px;color:rgba(240,235,221,.72);text-transform:uppercase}
/* the hero turntable: the cart alone on the page's own ground, big; poster underneath, video fades in when it can play */
.hero-turn{margin:0;display:grid;gap:8px;justify-items:center}
.hero-turn .turn-stage{position:relative;width:min(100%,600px);aspect-ratio:4/5}
.hero-turn img,.hero-turn video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.hero-turn video{opacity:0;transition:opacity .5s}
.hero-turn.live video{opacity:1}
.hero-turn.live img{opacity:0;transition:opacity .5s .2s}
.hero-turn figcaption{width:min(100%,600px);display:flex;justify-content:space-between;gap:12px;color:rgba(240,235,221,.72);text-transform:uppercase;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}
.hero-turn figcaption span:last-child,.hero-plate figcaption span:last-child{white-space:nowrap}
@media (max-width:900px){.hero-turn .turn-stage,.hero-turn figcaption{width:min(100%,440px)}}
.hero-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hero .hero-title{max-width:12ch;font-size:clamp(56px,8vw,132px)}
/* the H1 is the label row above the slogan: same look as the label it replaced */
.hero h1.hero-top{font-size:12.5px;font-weight:400;line-height:1.5;max-width:none;text-wrap:wrap}
.hero .promise{display:grid;gap:14px;max-width:44ch}
.hero .promise p{font-size:clamp(19px,1.7vw,24px);line-height:1.35}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.button{display:inline-block;font:500 17px var(--body);text-decoration:none;padding:12px 18px;border:1.5px solid currentColor;border-radius:2px}
.button.solid{background:var(--paper);color:var(--green);border-color:var(--paper)}
.on-paper .button.solid{background:var(--green);color:var(--paper);border-color:var(--green)}
.button{transition:background-color .15s,color .15s,border-color .15s}
.button.solid:hover{background:var(--brass);border-color:var(--brass);color:var(--carbon)}
.on-paper .button.solid:hover,.on-paper-2 .button.solid:hover{background:var(--green-deep);border-color:var(--green-deep);color:var(--paper)}
.text-link{font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}

/* Signature sequence */
.sequence{position:relative;padding:0 var(--gutter)}
.sequence .track{height:325vh}  /* 195 source frames from the finished sketch; the same scroll per frame the 240-frame track had */
.sequence .stage{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:16px 0 18px}
.sequence .stage-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.sequence .station-name{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.4vw,52px);line-height:1;letter-spacing:-.02em}
.sequence .station-name span{display:inline-block;min-width:1.2em;color:var(--brass)}
.sequence .frame-wrap{min-height:0;min-width:0;display:grid;place-items:center}  /* min sizes 0 so a stale sheet size never inflates the row before it is re-measured */
.sequence .frame-box{position:relative;width:100%}  /* sized by sequence.js to the room its row has; the frame fills it */
.sequence .frame{position:relative;overflow:hidden;border:1px solid rgba(240,235,221,.2);background:var(--paper);border-radius:2px;width:100%;height:100%;aspect-ratio:1.92;box-sizing:border-box}
.sequence .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.sequence .layer.on{opacity:1}
.sequence .ruler{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(23,25,23,.12)}
.sequence .ruler i{display:block;height:100%;width:0;background:var(--brass)}
.callouts{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
.callouts.on{opacity:1}
.callout{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;white-space:nowrap}
.callout b{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--redline);color:var(--redline);background:rgba(240,235,221,.9);display:grid;place-items:center;font:400 11px var(--mono)}
.callout span{font:400 11.5px var(--mono);letter-spacing:.05em;color:var(--redline);background:rgba(240,235,221,.9);padding:2px 6px;border:1px solid rgba(200,80,46,.35)}
.sequence.callouts-off .callouts{display:none}  /* a small sheet with no legend: numbers alone would say nothing */
.dimension{position:absolute;right:3%;top:21%;bottom:8%;width:1px;background:var(--redline);opacity:0;transition:opacity .3s}  /* spans the cart's measured extent at source frames 180-200; the crop is horizontal only, so the percentages hold */
.dimension.on{opacity:1}
.dimension:before,.dimension:after{content:"";position:absolute;left:-6px;width:13px;height:1px;background:var(--redline)}
.dimension:before{top:0}.dimension:after{bottom:0}
.dimension span{position:absolute;top:50%;left:8px;transform:rotate(90deg) translate(-50%,0);transform-origin:left top;font:400 12px var(--mono);color:var(--redline);letter-spacing:.06em;white-space:nowrap}
/* 'Skip the motion' comes first, at the left, clear of a host badge in the bottom-right corner */
.sequence .stage-foot{display:flex;justify-content:flex-start;gap:16px 28px;flex-wrap:wrap;align-items:center}
@media (min-width:601px){.sequence .stage-foot{padding-right:224px}}  /* the controls wrap before they reach the badge's 202 px */
.sequence .controls{display:flex;gap:8px;flex-wrap:wrap}
.sequence .controls button{font:400 13px var(--mono);background:none;border:1px solid rgba(240,235,221,.45);padding:9px 14px;min-height:40px;border-radius:2px;color:inherit;cursor:pointer}
.sequence .controls button[aria-pressed=true]{background:var(--paper);color:var(--green);border-color:var(--paper)}
.sequence input[type=range]{width:min(320px,100%);accent-color:var(--brass)}
.sequence .parts-list{position:absolute;left:-9999px}
@media (max-width:600px){
  .callout span{display:none}
  .sequence .stage{grid-template-rows:auto 1fr auto auto}
  .sequence .parts-list{position:static;display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;padding:0;list-style:none;counter-reset:part;font:400 12px/1.6 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:rgba(240,235,221,.72);transition:color .3s}  /* the key keeps its space and stays legible; it turns brass while the balloons it keys are on */
  .sequence.labels-on .parts-list{color:var(--brass)}
  .sequence .parts-list li{counter-increment:part}
  .sequence .parts-list li:before{content:counter(part) " ";color:var(--paper);opacity:.7}
}
/* reduced motion / no-JS: a four-frame strip instead of the scroll */
.sequence-strip{padding:16px var(--gutter) var(--section)}
.sequence-strip .strip-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:14px}
.sequence-strip .strip-head h2{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.4vw,52px);line-height:1;letter-spacing:-.02em;margin:0}
.sequence-strip .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sequence-strip figure{margin:0;display:grid;gap:8px}
.sequence-strip img{aspect-ratio:1.92;object-fit:cover;border:1px solid var(--line);background:var(--paper-2)}
html.js .sequence-strip{display:none}
html.js.motion-off .sequence-strip{display:block}
html.js.motion-off .sequence{display:none}
/* a viewport too short for a sticky stage (a phone on its side) gets the strip too */
@media (max-height:419px){html.js .sequence-strip{display:block} html.js .sequence{display:none}}
html:not(.js) .sequence{display:none}

/* Services */
.services .grid-3 article{border-top:1.5px solid rgba(240,235,221,.35);padding-top:18px;display:grid;gap:12px;align-content:start}
/* the three cards share six rows (label, title, body, list, photo, link), so their photos line up and come out one size (owner direction, October 20) */
.services .grid-3 > article{grid-row:span 6;grid-template-rows:subgrid;row-gap:12px}
.services .grid-3 > article > img,.services .grid-3 > article > .fpo{width:100%;aspect-ratio:4/3;object-fit:cover;align-self:start}
.services .grid-3 > article > ul{align-self:start}
.services article h3{font-size:clamp(36px,4.2vw,64px)}
.services article ul{margin:0;padding-left:1.1em;display:grid;gap:4px;font-size:16.5px;color:rgba(240,235,221,.85)}
.services article a{font-weight:500}

/* Work cards */
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:28px 3vw}
.work-card{text-decoration:none;display:grid;gap:12px;color:inherit}
.work-card .cover{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);border-radius:2px;position:relative}
.work-card .cover img{width:100%;height:100%;object-fit:cover}
.work-card h3{font-size:clamp(28px,2.8vw,44px)}
/* titles sit above the photos (owner direction, October 20); each card spans five shared rows so a row of cards keeps
   its titles, photos and captions level however long a title runs */
.work-grid.aligned > .work-card{grid-row:span 5;grid-template-rows:subgrid;row-gap:12px;align-content:start}
.work-card h3{align-self:end}
.work-card .meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
a.work-card .cover{transition:border-color .2s} a.work-card:hover .cover,a.work-card:focus-visible .cover{border-color:var(--carbon)} a.work-card:hover h3,a.work-card:focus-visible h3{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px}
.our-part{display:inline-flex;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.our-part b{padding:3px 8px;border:1px dashed var(--muted);border-radius:2px;font-weight:400;color:var(--muted)}
.our-part b.lit{opacity:1;background:var(--green);color:var(--paper);border-color:var(--green);border-style:solid}
.on-dark .our-part b.lit{background:var(--brass);color:var(--carbon);border-color:var(--brass)}

/* Process */
.process ol{margin:0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid rgba(240,235,221,.3)}
.process li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px 18px;padding:20px 0;border-bottom:1px solid rgba(240,235,221,.3)}
.process li .bubble{width:32px;height:32px;border:1.5px solid var(--brass);border-radius:50%;display:grid;place-items:center;font:400 12px var(--mono);color:var(--brass)}
.process li h3{font:500 clamp(22px,2vw,28px)/1.15 var(--body);letter-spacing:0}
.process li p{grid-column:2;color:rgba(240,235,221,.85)}

/* Person / about */
.person{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px 5vw;align-items:start}
.person .portrait{aspect-ratio:4/5}
.person-title{margin-bottom:clamp(28px,4vw,48px)}
.person img.portrait{width:100%;height:auto;object-fit:cover;border-radius:2px;display:block}
.person dt{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.person dd{margin:0}

/* Spec table / facts */
.facts{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:8px 24px;margin:0;font-size:16.5px;max-width:60ch}
.facts dt{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.facts dd{margin:0}

/* Plates / figures */
.plate{margin:0;display:grid;gap:10px}
.plate img{width:100%;border:1px solid var(--line);background:#fff;border-radius:2px}
.plate figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;text-transform:none;letter-spacing:.02em;color:var(--muted)}
.two-up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 3vw}
.film{display:grid;gap:12px}
.film video{width:100%;border:1px solid var(--line);background:#000;border-radius:2px}

/* FAQ */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 0;font:500 20px var(--body);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";content:"+" / "";font-family:var(--mono);color:var(--muted)}
.faq details[open] summary:after{content:"–";content:"–" / ""}
.faq details p{padding:0 0 20px;color:var(--ink-2)}

/* Contact */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:'form top' 'form more';grid-template-rows:auto 1fr;gap:40px 6vw;align-items:start}
.contact-layout > form{grid-area:form}.contact-top{grid-area:top}.contact-more{grid-area:more;align-content:start}
#inquiry{padding-top:clamp(20px,3vw,40px)}
.intro-compact h1{font-size:clamp(48px,6.5vw,104px)}
.req{font:400 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
form.inquiry [aria-invalid=true]{border-color:var(--redline);box-shadow:0 0 0 1px var(--redline)}
form.inquiry{display:grid;gap:20px}
form.inquiry label{display:grid;gap:6px;font:500 15px var(--body)}
form.inquiry input,form.inquiry select,form.inquiry textarea{font:400 17px var(--body);padding:11px 12px;border:1px solid var(--line-strong);border-radius:2px;background:#fff;color:var(--carbon);width:100%}
form.inquiry textarea{min-height:140px;resize:vertical}
.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:560px){.field-trio{grid-template-columns:1fr}}
form.inquiry .hint{margin:0 0 10px;font-size:15px;color:var(--ink-2)}
.checks{display:flex;gap:10px;flex-wrap:wrap}
.checks label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);padding:9px 12px;border-radius:2px;font-weight:500;cursor:pointer}
.checks input{accent-color:var(--green);width:auto}
.form-note{border-left:3px solid var(--redline);padding:10px 14px;background:rgba(200,80,46,.06);font-size:15px}
.form-result{display:grid;gap:10px;border:1px solid var(--line-strong);padding:18px;background:#fff;border-radius:2px}
.form-result pre{white-space:pre-wrap;font:400 14px/1.5 var(--mono);margin:0}
.form-result{scroll-margin-top:calc(var(--header-h) + 20px)}
.form-result:focus:not(:focus-visible){outline:none}
.contact-aside{display:grid;gap:22px}
.contact-aside .direct{display:grid;gap:4px;font-size:17px}

/* Round 09 (change brief, October 19): footer contact block, lineage line, job card, search landing pages */
.title-block .title-logo{display:block;line-height:0;margin:4px 0 6px}
.title-block .title-logo img{height:34px;width:auto}
.contact-block{font-style:normal;display:grid;gap:4px}
.contact-block a{text-decoration:none;border-bottom:1px solid var(--line)}
.lineage{font-weight:500;border-left:3px solid var(--green);padding-left:14px}
.job-card{border-top:1.5px solid var(--carbon);padding-top:14px}
.link-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.link-index li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.link-index a{display:grid;gap:8px;padding:20px;text-decoration:none;height:100%}
@media (min-width:1101px){.link-index{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}}
.link-index a:hover strong,.link-index a:focus-visible strong{text-decoration:underline}
.link-index strong::after{content:"\00a0→";content:"\00a0→" / ""}
.link-index strong{font-family:var(--display);font-weight:900;font-size:clamp(26px,2.4vw,34px);line-height:1;text-transform:uppercase}
.link-index span:last-child{color:var(--ink-2);font-size:16px}
.handles{margin:0;padding-left:1.2em;display:grid;gap:10px}
.facts .source{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:6px}

/* Statement / closing */
.closing{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px 5vw;align-items:end}
.closing h2{font-size:clamp(56px,9vw,150px);line-height:.86}
.closing .button{justify-self:start;padding:14px 22px}

/* Title block footer */
.title-block{margin:0 var(--gutter) 28px;border:1.5px solid var(--carbon);display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;background:#fff}
.title-block > div{padding:12px 14px;border-right:1px solid var(--line);display:grid;gap:4px;align-content:start;min-width:0}
.title-block > div:last-child{border-right:0}
.title-block .v{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
.title-block .v.big{font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:-.01em;line-height:1}
.title-block nav{display:flex;gap:14px;flex-wrap:wrap;font-size:15px}
.title-block .note{font-size:15px;font-style:italic;color:var(--ink-2);max-width:none}
.site-footer{padding:0 var(--gutter) 96px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.site-footer button{font:inherit;background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer}
@media (pointer:coarse){.title-block nav a,.contact-aside .direct a,.person dd a{display:inline-block;padding:10px 0}.site-footer button{padding:12px 0}}

/* FPO placeholders: visibly marked. Replaced at the content sweep. */
.fpo{position:relative;display:grid;place-items:center;background:repeating-linear-gradient(45deg,rgba(200,80,46,.06) 0 10px,transparent 10px 20px);border:1.5px dashed var(--fpo);border-radius:2px;color:var(--fpo);min-height:120px;overflow:hidden;width:100%}
.fpo svg{position:absolute;inset:0;width:100%;height:100%}
.fpo svg line{stroke:var(--fpo);stroke-width:1;opacity:.55}
.fpo .fpo-label{position:relative;z-index:1;background:var(--paper);padding:8px 12px;border:1px solid var(--fpo);font:400 12px/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase;text-align:center;max-width:90%}
.fpo .fpo-label b{display:block;font-weight:400;font-size:11px;opacity:.8}
.on-dark .fpo .fpo-label,.on-plum .fpo .fpo-label{background:var(--green-deep)}
.fpo-text{color:var(--fpo);border-bottom:1px dashed var(--fpo);font-style:italic}
.fpo-text:before{content:"[";}
.fpo-text:after{content:"]";}

/* 404 */
.notfound{min-height:60vh;display:grid;align-content:center;gap:20px}

/* Responsive */
.hero-grid{--x:0}
@media (max-width:900px){
  .hero-grid,.grid-2,.grid-3,.section-head,.person,.contact-layout,.closing,.field-pair{grid-template-columns:1fr}
  .hero-grid{grid-template-areas:'copy' 'turn' 'more';grid-template-rows:auto}
  .contact-layout{grid-template-areas:'top' 'form' 'more';grid-template-rows:auto}
  .person .portrait{max-width:420px}
  .sequence-strip .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .title-block{grid-template-columns:1fr 1fr}
  .title-block > div:nth-child(2n){border-right:0}
  .title-block > div{border-bottom:1px solid var(--line)}
  .sequence .track{height:265vh}
}
@media (min-width:561px) and (max-width:900px){#crew .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){
  body{font-size:17px}
  .title-block{grid-template-columns:1fr}
  .title-block > div{border-right:0}
  .sequence-strip .tiles{grid-template-columns:1fr 1fr}
  .two-up{grid-template-columns:1fr}
  .facts{grid-template-columns:7.5rem minmax(0,1fr);column-gap:14px}
  .title-block nav{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
}
html.motion-off *{animation:none!important;transition:none!important}
@media (max-height:500px) and (orientation:landscape){.site-header{position:relative}}

/* Round 09, after the brief audit and the capabilities deck */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.site-header .descriptor span{display:block}
@media (max-width:900px){
  .site-header{row-gap:4px;column-gap:10px}
  .site-header .descriptor{display:block;grid-column:1 / -1;grid-row:2;font-size:10.5px;line-height:1.4;margin-top:0}
  .site-header .descriptor span{display:inline}
  .site-header .descriptor span + span::before{content:" · "}
}
/* narrow phones: two clean lines instead of a wrap that leaves a dangling " · " */
@media (max-width:520px){
  .site-header .descriptor span{display:block}
  .site-header .descriptor span + span::before{content:none}
}
.hero-stats{display:flex;flex-wrap:wrap;gap:12px 26px;margin:6px 0 0;padding-top:18px;border-top:1px solid rgba(240,235,221,.28)}
.hero-stats div{display:grid;gap:2px;align-content:start}
.hero-stats dt{font-family:var(--display);font-weight:900;font-size:clamp(34px,3.2vw,52px);line-height:1;color:var(--brass)}
.hero-stats dd{margin:0;font-family:var(--mono);font-size:11px;max-width:16ch;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.hero .lineage{border-left-color:var(--brass)}
.person-name{font-size:clamp(30px,3vw,44px)}
.person-name span{display:block;font-family:var(--body);font-weight:500;font-size:clamp(18px,1.6vw,22px);letter-spacing:0;line-height:1.3;margin-top:6px;text-transform:none}
h1.kicker{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;margin:0 0 16px;opacity:.85}
.display-title{margin:0;max-width:none;font-family:var(--display);font-weight:900;line-height:.92;letter-spacing:-.02em;font-size:clamp(56px,8vw,132px);text-wrap:balance}
.display-title em{font-style:normal;color:var(--brass)}
section.block.page-intro{padding-top:clamp(40px,5vw,72px)}
@media (max-width:400px){h1,.display-title{font-size:min(56px,14.5vw)}}
.more-link{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
.cta-cover{aspect-ratio:4 / 3;display:grid;place-items:center;border:1.5px solid currentColor;font-family:var(--display);font-weight:900;font-size:clamp(26px,2.4vw,36px);text-transform:uppercase;background:var(--green);color:var(--paper);border-color:var(--green)}
.produce .plate img{width:100%;height:auto}
.cover-photo .plate img{width:100%;max-height:78vh;object-fit:cover}
#way article h3{margin-bottom:12px}

/* even plate rows (owner direction, October 20): every image in a two-up shares one 4:3 frame */
.two-up .plate img{width:100%;aspect-ratio:4/3;display:block}
.two-up.fit-cover .plate img{object-fit:cover}
.two-up.fit-contain .plate img{object-fit:contain;background:var(--paper-2);border:1px solid var(--line)}
.cart-viewer .controls button{font:400 13px var(--mono);letter-spacing:.04em;background:none;color:var(--carbon);border:1px solid var(--line-strong);padding:10px 14px;min-height:40px;border-radius:2px;cursor:pointer}
.cart-viewer .controls button[aria-pressed=true],.cart-viewer .controls button[data-on='1']{background:var(--green);color:var(--paper);border-color:var(--green)}
button.button{background:none;color:inherit;cursor:pointer}
/* design review, October 20 */
@media (min-width:901px){.work-grid[data-n='4']{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:901px){.facts-block .grid-2 > div:first-child{position:sticky;top:calc(var(--header-h) + 24px)}}
.plate-link{display:block}
.turn-meta{display:inline-flex;gap:14px;align-items:baseline}
.turn-pause{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.process + .block.on-dark{border-top:1px solid rgba(240,235,221,.25)}

/* review fixes (October 20): the link-index tiles share rows so titles, eyebrows and lines align however a title wraps;
   the 'By the job' line runs the row's width; the footer motion toggle shows when it is pressed */
.link-index li{display:grid;grid-row:span 3;grid-template-rows:subgrid}
.link-index a{grid-row:span 3;grid-template-rows:subgrid;align-content:start}
.link-index a > span:first-child{align-self:end}
p.label.by-the-job{max-width:none}
.site-footer button[data-motion][aria-pressed=true]{text-decoration:none;border-bottom:1.5px solid currentColor}

/* owner answers (October 20): service pages open with a photograph in the right half; the cart sequence scrolls about a
   quarter shorter (same frames, built faster); the brief preview can be emailed to Tim */
section.block.intro-photo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px clamp(24px,4vw,64px);align-items:center}
.intro-photo .intro-copy{display:grid;gap:0;align-content:start;min-width:0}
.intro-photo .intro-copy .lead{margin-top:22px}
.intro-photo .display-title{font-size:clamp(48px,6.4vw,104px)}
.intro-figure{margin:0;min-width:0}
.intro-figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;display:block}
@media (max-width:900px){section.block.intro-photo{grid-template-columns:1fr}.intro-figure{order:2}}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.site-nav .nav-phone{display:none}
@media (max-width:900px){.site-nav .nav-phone{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.04em}}
.result-fallback{display:grid;gap:12px}
#result-message{font-weight:500}
/* home hero: the services as a bulleted row (owner direction, October 20: "I wouldn't make it a sentence"); each item carries its own bullet, so a wrap never strands one */
.hero-offer{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:clamp(16px,1.35vw,19px);line-height:1.4}
.hero-offer li{white-space:nowrap}
.hero-offer li::before{content:"•";margin-right:.45em;color:var(--brass)}
.services li a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}