/* cod3VIKING App Studio v3, Drafting.
   Paper and type from the Rune comp, drawing mechanic from Blueprint.
   No library, no CDN. Google Fonts is the only third party. */

:root{
  --paper:#efede7;
  --lift:#f7f5f0;
  --ink:#0f0f10;
  --ink-soft:#4a4a4e;
  --amber:#ffb000;
  --bone:#f3f1ea;
  --hair:rgba(15,15,16,.21);
  --hair-2:rgba(15,15,16,.11);
  --disp:"Unbounded",system-ui,sans-serif;
  --sans:"Archivo",system-ui,sans-serif;
  --mono:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(1.15rem,5vw,5.5rem);
  --max:1560px;
}

*{box-sizing:border-box}
/* class selectors beat the UA [hidden] rule, so make it win everywhere */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The grid is not wallpaper. It lives on the drawing sheet and nowhere else,
   so structure on the page comes from the 2px rules, hairlines and ink bands. */
body{
  background:var(--paper);
  color:var(--ink);
  font:400 1rem/1.55 var(--sans);
  overflow-x:hidden;
}

img,svg,iframe{max-width:100%}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:700;letter-spacing:-.04em;line-height:1.02}
p{margin:0}
a{color:var(--ink)}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;font:600 .85rem var(--sans);z-index:99;text-decoration:none}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;box-shadow:0 0 0 3px var(--ink)}

.gut{padding:0 var(--gut);max-width:var(--max);margin:0 auto}

/* ---- ink bands ----
   One class flips every token, so borders, hairlines, rules, links and the
   focus ring all invert for free. Amber-on-bone fails contrast, so the two
   places amber sits behind text pin the literal ink instead of var(--ink). */
.on-ink{
  --ink:var(--bone);
  --ink-soft:rgba(243,241,234,.72);
  --paper:#0f0f10;
  --lift:#191919;
  --hair:rgba(243,241,234,.24);
  --hair-2:rgba(243,241,234,.10);
  color:var(--bone);
  background-color:#0f0f10;
}
/* full bleed, but the copy stays on the same measure as every other section */
.bleed{max-width:none;padding-inline:max(var(--gut),calc(50% - var(--max)/2 + var(--gut)))}

/* ---- the one motion: rules draw across ---- */
.rule{height:2px;background:var(--ink);transform-origin:left center}
.rule.thin{height:1px;background:var(--hair)}
@media (prefers-reduced-motion:no-preference){
  /* JS adds .rv, so a page without it keeps every rule drawn */
  .rule.rv{transform:scaleX(0)}
  .rule.rv.is-in{animation:draw 1.6s cubic-bezier(.16,.84,.3,1) forwards;animation-delay:calc(var(--i,0)*200ms)}
  .rule.d1{--i:0}
  .rule.d2{--i:1}
  .rule.d3{--i:2}
}
@keyframes draw{to{transform:scaleX(1)}}

/* ============ header ============ */
.site-head{display:flex;align-items:flex-end;gap:1.5rem;padding:clamp(1rem,2.2vw,1.9rem) var(--gut) 1.05rem;max-width:var(--max);margin:0 auto}
.mark{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit;min-height:44px}
.mark svg{display:block;flex:none}
.mark-tile{display:block;flex:none;width:48px;height:48px}
.wordmark-img{display:block;height:28px;width:auto}
@media (max-width:480px){.wordmark-img{height:22px}.mark-tile{width:40px;height:40px}}
.foot-mark{display:block;width:180px;height:auto;margin-bottom:.3rem}
.mark-stack{display:grid;gap:.28rem}
.brandrow{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.wordmark{font:700 1.02rem/1 var(--disp);letter-spacing:-.03em}
.studio-tag{font:500 .64rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.lockup{font:400 .74rem/1.2 var(--sans);color:var(--ink-soft)}
.site-nav{margin-left:auto;display:flex;gap:clamp(.9rem,2vw,2.1rem);align-items:center}
.site-nav a{color:var(--ink);text-decoration:none;white-space:nowrap;font:600 .7rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;padding:.8rem 0 .5rem;border-bottom:2px solid transparent;display:inline-block;min-height:44px;line-height:28px}
.site-nav a:hover{border-bottom-color:var(--amber)}
.site-nav .nav-start{border-bottom-color:var(--ink)}
.site-nav .nav-start:hover{border-bottom-color:var(--amber)}

/* ============ shared section furniture ============ */
section{padding:clamp(2.4rem,6vh,4.6rem) var(--gut);max-width:var(--max);margin:0 auto}
.sec-head{max-width:46ch;margin-bottom:clamp(1.6rem,4vh,2.8rem)}
.sec-kicker{font:500 .68rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.85rem}
.sec-kicker::before{content:"";display:inline-block;width:20px;height:3px;background:var(--amber);vertical-align:.22em;margin-right:.6em}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.9rem)}
/* the arc: the work peaks, the two ink bands step up because ink absorbs weight */
.work .sec-head h2{font-size:clamp(2rem,4.8vw,4.2rem)}
.services .sec-head h2,.serious .sec-head h2{font-size:clamp(1.9rem,4.2vw,3.6rem)}
/* a 46ch body measure stacks a 3.6rem headline four lines deep. Give it room. */
.services .sec-head,.serious .sec-head{max-width:min(740px,82%)}
.sec-hint{font:400 .78rem/1.4 var(--mono);color:var(--ink-soft);margin-top:.8rem}
.sec-note{font:400 .78rem/1.4 var(--mono);color:var(--ink-soft);margin-top:.5rem;min-height:1.2em}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:1rem 1.7rem;border:2px solid var(--ink);background:transparent;color:var(--ink);font:600 .95rem/1 var(--sans);text-decoration:none;cursor:pointer}
/* amber is reserved for the two real moves: send the job, start a brief */
.btn.solid{background:var(--amber);border-color:var(--amber);color:#0f0f10;font:700 .95rem/1 var(--disp);letter-spacing:-.02em}
.btn.solid:hover,.btn.solid:focus-visible{background:#0f0f10;border-color:var(--amber);color:var(--amber)}
.on-ink .btn.solid:hover,.on-ink .btn.solid:focus-visible{background:var(--bone);border-color:var(--bone);color:#0f0f10}
/* the stepper's Continue stays ink so it never competes with the send */
.btn.ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.ink:hover,.btn.ink:focus-visible{background:transparent;color:var(--ink)}
.btn[aria-busy="true"]{opacity:.6;cursor:progress}

/* ============ 1. hero, the brief builder ============ */
.hero{padding-top:clamp(1.8rem,5vh,3.6rem)}
.hero-head{margin-bottom:clamp(1.4rem,3vh,2.2rem)}
h1{font-size:clamp(2rem,6vw,5.2rem);max-width:14ch;letter-spacing:-.045em}
h1 .accent{color:var(--ink);background:var(--amber);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .12em;margin:0 -.02em}
.hero-lede{margin-top:clamp(1rem,2vh,1.6rem);max-width:44ch;font-size:clamp(1.08rem,1.35vw,1.32rem);color:var(--ink)}

.brief-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(1.6rem,3.5vw,3.6rem);align-items:start;margin-top:clamp(1.6rem,4vh,2.6rem)}

.brief{display:grid;gap:clamp(1.5rem,3vh,2.4rem);min-width:0}

/* the progress rail */
.rail{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .55rem}
.rail li{display:flex;align-items:center;gap:.55rem}
.rail li+li::before{content:"\00B7";color:var(--ink-soft);font-size:1.1rem;line-height:1}
.rail-step{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.4rem .1rem;border:0;background:transparent;cursor:pointer;color:var(--ink-soft);font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.rail-step:disabled{cursor:default;opacity:.7}
.rail-num{font-weight:500}
.rail-step.is-at{color:var(--amber)}
.rail-step.is-at .rail-name{color:var(--ink)}
.rail-step.is-done .rail-num::after{content:"\2713";color:var(--amber);margin-left:.4em}

.step{border:0;border-top:2px solid var(--ink);margin:0;padding:1.2rem 0 0;display:grid;gap:.9rem;min-width:0}
.step-name:focus{outline:none}
.step-name:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.step-nav{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.4rem}
.linkback{border:0;background:transparent;padding:.5rem .1rem;min-height:44px;cursor:pointer;color:var(--ink-soft);font:400 .78rem/1 var(--mono);text-decoration:underline;text-underline-offset:4px}
.linkback:hover{color:var(--ink);text-decoration-color:var(--amber)}
.step-head{display:flex;align-items:baseline;gap:.8rem}
.step-num{font:500 .72rem/1 var(--mono);color:var(--ink-soft);letter-spacing:.1em}
/* Unbounded is a display face. At 1.2rem Archivo is the sharper read. */
.step-name{font:700 1.2rem/1.2 var(--sans);letter-spacing:-.02em}
.step-helper{font-size:.88rem;color:var(--ink-soft);max-width:52ch;margin-top:-.4rem}

.field-label{font:600 .74rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.field{display:grid;gap:.45rem;min-width:0}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1rem}

textarea,input[type="text"],input[type="email"],input[type="tel"],input[type="url"]{
  width:100%;background:var(--lift);border:2px solid var(--ink);border-radius:0;
  padding:.85rem .95rem;color:var(--ink);font:400 .95rem/1.5 var(--mono);
  min-height:52px;
}
textarea{resize:vertical;min-height:120px}
textarea::placeholder,input::placeholder{color:#6d6c67}
textarea:focus,input:focus{outline:2px solid var(--amber);outline-offset:2px;box-shadow:0 0 0 3px var(--ink)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#8f2f24}

.count{font:400 .72rem/1.3 var(--mono);color:var(--ink-soft);text-align:right}
#phone-help{text-align:left}
.field-error{font:500 .8rem/1.4 var(--sans);color:#8f2f24}
.form-error{border:2px solid #8f2f24;background:var(--lift);padding:.85rem 1rem}

/* chips */
.chiprow{display:grid;gap:.55rem;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  min-height:44px;padding:.6rem 1rem;border:1.5px solid var(--hair);background:transparent;
  color:var(--ink);font:500 .87rem/1.2 var(--sans);cursor:pointer;text-align:left;
}
.chip:hover{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber)}
.chip[aria-checked="true"],.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip[aria-checked="true"]:hover,.chip[aria-pressed="true"]:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}

/* the consent text is legal and verbatim, so it gets a box instead of floating */
.consent{display:grid;gap:.55rem;border:1.5px solid var(--hair);background:var(--lift);padding:.95rem 1.05rem}
.consent-line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;font-size:.82rem;line-height:1.5;color:var(--ink-soft);cursor:pointer;padding:.1rem 0}
.consent-line input{width:22px;height:22px;margin:.15rem 0 0;accent-color:var(--ink);flex:none}
.consent-links{font-size:.78rem;color:var(--ink-soft)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.submit-row{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;border-top:1px solid var(--hair);padding-top:1.2rem}
.submit-legal{font:400 .72rem/1.5 var(--sans);color:var(--ink-soft);max-width:44ch;display:grid;gap:.2rem}
.submit-legal a{color:var(--ink-soft)}

.brief-done{border:2px solid var(--ink);background:var(--lift);padding:clamp(1.4rem,3vw,2.4rem);display:grid;gap:.9rem;align-content:start}
.done-kicker{font:500 .68rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.brief-done h2{font-size:clamp(1.35rem,2.4vw,2rem);max-width:20ch}
.done-fallback,.done-receipt{font-size:.85rem;color:var(--ink-soft)}
.done-receipt{font-family:var(--mono);font-size:.78rem}

/* the working drawing */
.board-wrap{position:sticky;top:1.2rem;border:2px solid var(--ink);background:var(--lift);padding:.85rem;min-width:0}
.board-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--hair)}
.board-label{font:500 .66rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.board-mode{font:500 .66rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.board{display:block;width:100%;height:auto;margin:.6rem 0}
.board-foot{font:400 .72rem/1.4 var(--mono);color:var(--ink-soft);border-top:1px solid var(--hair);padding-top:.6rem}

/* svg ink */
.board .st,.dwg .st{fill:none;stroke:var(--ink);stroke-width:1.4}
.board .hair,.dwg .hair{fill:none;stroke:var(--hair);stroke-width:1}
.board .key,.dwg .key{fill:none;stroke:var(--amber);stroke-width:2.2}
.board .fillkey,.dwg .fillkey{fill:var(--amber);stroke:none}
.board rect.hair,.dwg rect.hair{fill:var(--hair);stroke:none}
.board text{font:500 9px var(--mono);fill:var(--ink-soft);letter-spacing:.06em}
.board text.dim{fill:var(--ink-soft)}

/* the one place the drafting grid survives: this is the sheet, not the page */
.board{
  background-image:
    linear-gradient(to right,var(--hair-2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--hair-2) 1px,transparent 1px);
  background-size:44px 44px;
}

/* the title block. Hairline cells, ink text, nothing amber. */
.board .tb rect,.board .tb line{fill:none;stroke:var(--hair);stroke-width:1}
.board .tb text{font:500 10px var(--mono);fill:var(--ink);letter-spacing:.02em}
.board .tb .tb-l{fill:var(--ink-soft)}

/* the receipt stamp: the outline draws, then the word fills */
.board .stamp rect{fill:none;stroke:var(--amber);stroke-width:5}
.board .stamp text{font:700 46px/1 var(--disp);letter-spacing:.04em;text-anchor:middle;
  fill:var(--amber);fill-opacity:0;stroke:var(--amber);stroke-width:1.2;paint-order:stroke}
.board .stamp.is-on text{fill-opacity:1}
@media (prefers-reduced-motion:no-preference){
  .board .stamp text{transition:fill-opacity .35s ease}
}

/* ============ 2. the work ============ */
.work{padding-bottom:0}
.case{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.6rem,4vw,4rem);align-items:start;padding:clamp(2rem,5vh,3.4rem) 0;scroll-margin-top:1.5rem}
.case:focus{outline:none}
.case:focus-visible{outline:2px solid var(--amber);outline-offset:8px;box-shadow:0 0 0 3px var(--ink)}
.case-copy{min-width:0}
.case-num{font:500 .68rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7rem}
/* the board yielded to this product, so the case says so while the match holds */
.case.is-match .case-num::after{content:"\2713";color:var(--amber);margin-left:.7em;font-size:1.1em}
.case-copy h3{font-size:clamp(1.5rem,3vw,2.5rem);margin-bottom:.8rem}
.case-what{font-size:clamp(1rem,1.1vw,1.12rem);max-width:52ch;margin-bottom:1.4rem}
.case-dl{margin:0;display:grid;gap:.35rem}
.case-dl dt{font:600 .7rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:1.1rem;border-top:1px solid var(--hair);padding-top:.9rem}
.case-dl dd{margin:0;max-width:62ch;color:var(--ink);font-size:.94rem}
/* the constraint and the decision, one line each. The full argument folds below. */
.case-one{font-size:1.1rem;font-weight:500;line-height:1.4;max-width:46ch}
.case-more{margin-top:1.2rem;border-top:1px solid var(--hair);padding-top:.9rem}
.case-more summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;font:400 .78rem/1.4 var(--mono);color:var(--ink-soft)}
.case-more summary::-webkit-details-marker{display:none}
.case-more summary::before{content:"\2713";color:var(--amber);margin-right:.6em;font-size:.9em}
.case-more summary:hover{color:var(--ink)}
.case-more[open] summary::before{content:"\2715"}
.case-more-body{display:grid;gap:.4rem;padding-bottom:.4rem}
.case-more-h{font:600 .7rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:.7rem}
.case-more-body p{font-size:.92rem;max-width:62ch;color:var(--ink-soft)}
.case-list{margin:.3rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem}
.case-list li{position:relative;padding-left:1.15rem;font-size:.92rem}
/* a 7px bar reads as a dash on a page that has none. A square does not. */
.case-list li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--ink)}
.case-status{font-family:var(--mono);font-size:.85rem;line-height:1.5}

.case-stage{position:sticky;top:1.2rem;min-width:0;display:grid;gap:.6rem;justify-items:center}
.device{border:2px solid var(--ink);background:var(--lift);width:100%;position:relative}
.device.laptop{padding:26px 10px 10px}
.device.laptop::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;border-bottom:1px solid var(--hair)}
.device.laptop::after{content:"";position:absolute;left:12px;top:9px;width:34px;height:7px;background:var(--amber);box-shadow:44px 0 0 var(--hair),88px 0 0 var(--hair)}
.device.phone{max-width:340px;padding:28px 10px 22px;border-radius:26px}
.device.phone::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:11px;width:74px;height:7px;background:var(--hair);border-radius:4px}
.device-screen{background:var(--paper);border:1px solid var(--hair);overflow:hidden;position:relative;display:block}
.device.laptop .device-screen{aspect-ratio:16/10}
.device.phone .device-screen{aspect-ratio:9/17;border-radius:6px}
/* the poster paints first and the live frame fades in over it, so the screen
   is never a white rectangle waiting for an iframe */
.device-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent;opacity:0}
.device-screen iframe.is-on{opacity:1}
.device-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.device-screen>.poster{position:absolute;inset:0}
@media (prefers-reduced-motion:no-preference){.device-screen iframe{transition:opacity .45s ease}}
.st-shot{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.st-shot.is-on{opacity:1;position:relative}
@media (prefers-reduced-motion:reduce){.st-shot{transition:none}}
.shot-controls{display:flex;gap:.5rem;align-items:center;justify-content:center;padding-top:.5rem}
.shot-step{min-height:44px;min-width:44px;border:1.5px solid var(--hair);background:transparent;color:var(--ink);font:500 .8rem var(--mono);cursor:pointer}
.shot-step:hover{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber)}
.shot-of{font:400 .72rem var(--mono);color:var(--ink-soft)}
.frame-tag{font:400 .7rem/1.3 var(--mono);color:var(--ink-soft);text-align:center;min-height:1.3em}
/* the LeadAXE controls get their height before they exist, so nothing shifts */
.shot-slot{width:100%;min-height:54px;display:flex;align-items:center;justify-content:center}

/* ============ 3. how we build ============ */
.steps{list-style:none;margin:0 0 clamp(2.2rem,5vh,3.6rem);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(1.3rem,3vw,2.6rem)}
.bstep{display:grid;gap:.55rem;align-content:start;border-top:2px solid var(--ink);padding-top:1.1rem}
.bstep-draw{background:var(--lift);border:1px solid var(--hair);padding:.5rem;margin-bottom:.5rem}
.dwg{display:block;width:100%;height:auto}
.bstep-num{font:500 .7rem/1 var(--mono);letter-spacing:.18em;color:var(--ink-soft)}
.bstep h3{font-size:1.25rem}
.bstep p{font-size:.93rem;color:var(--ink);max-width:40ch}
.bstep-out{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);border-top:1px solid var(--hair);padding-top:.6rem;margin-top:.3rem}

.ledger{border-top:2px solid var(--ink);padding-top:1.2rem}
.ledger-head{font:500 .68rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem}
.ledger-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ledger-list li{display:grid;grid-template-columns:minmax(0,1fr);padding:.72rem 0;border-bottom:1px solid var(--hair);align-items:baseline}
.ledger-list time{font:400 .78rem/1 var(--mono);color:var(--ink-soft);white-space:nowrap}
.ledger-list span{font-size:.93rem}

/* ============ 4. portfolio ============ */
.pf-chips{margin-bottom:1.4rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:clamp(.9rem,2vw,1.6rem)}
.card{display:grid;gap:0;border:2px solid var(--ink);background:var(--lift);padding:0;cursor:pointer;text-align:left;color:inherit;font:inherit;min-width:0}
.card:hover{box-shadow:0 0 0 3px var(--amber)}
.card-shot{display:block;position:relative;background:var(--paper);border-bottom:1px solid var(--hair);aspect-ratio:4/3;overflow:hidden}
.card-shot img{width:100%;height:100%;object-fit:cover;display:block}
.card-kind{position:absolute;right:.5rem;top:.5rem;background:var(--ink);color:var(--paper);font:500 .62rem/1 var(--mono);letter-spacing:.12em;padding:.35rem .5rem;text-transform:uppercase}
.card-body{display:grid;gap:.3rem;padding:.85rem .95rem 1rem}
.card-cat{font:500 .62rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.card-title{font:600 .98rem/1.3 var(--sans)}

/* lightbox */
.lb{border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:0;width:min(1180px,94vw);max-width:94vw;max-height:92vh;overflow:hidden;display:none}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb::backdrop{background:rgba(15,15,16,.72)}
.lb-bar{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.lb-meta{min-width:0}
.lb-cat{font:500 .62rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.lb-title{font:700 1.05rem/1.2 var(--disp);letter-spacing:-.03em;margin-top:.25rem}
.lb-count{font:400 .74rem var(--mono);color:var(--ink-soft);margin-left:auto}
.lb-btn{min-height:44px;padding:.6rem 1.05rem;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 .8rem var(--sans);cursor:pointer}
.lb-btn:hover{box-shadow:0 0 0 2px var(--amber)}
.lb-stage{background:var(--lift);display:grid;place-items:center;overflow:auto;min-height:0;padding:1rem}
.lb-stage img{max-width:100%;max-height:64vh;object-fit:contain;cursor:zoom-in;display:block}
.lb-stage.is-zoomed img{max-height:none;max-width:none;width:auto;cursor:zoom-out}
.lb-stage iframe{width:100%;height:64vh;border:0;background:#fff}
.lb-foot{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-top:2px solid var(--ink);flex-wrap:wrap}
.lb-caption{font-size:.85rem;color:var(--ink-soft);max-width:70ch;min-width:0}
.lb-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}
.lb-action{min-height:44px;display:inline-flex;align-items:center;padding:.6rem 1.05rem;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 .8rem var(--sans);cursor:pointer;text-decoration:none}
.lb-action:hover{box-shadow:0 0 0 2px var(--amber)}

/* ============ 5. serious, ink band that runs into the footer ============ */
.serious{padding-bottom:clamp(2.4rem,5vh,3.6rem)}
.proofs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(1.2rem,2.5vw,2.6rem)}
.proofs li{border-top:2px solid var(--ink);padding-top:1rem;display:grid;gap:.5rem;align-content:start}
.proof-num{font:700 clamp(1.9rem,2.6vw,2.4rem)/1 var(--disp);letter-spacing:-.05em;color:var(--amber)}
.proof-title{font:700 1rem/1.2 var(--sans);letter-spacing:-.02em;margin-bottom:.25rem}
.proofs p{font-size:.93rem;max-width:42ch}
.proof-src{font:400 .74rem var(--mono)}
.proof-src a{color:var(--ink-soft)}
.serious-cta{margin-top:clamp(1.8rem,4vh,2.8rem)}
@media (min-width:900px){
  .proofs{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 05 closes the section across the full width, so no orphan */
  .proofs li:last-child{grid-column:1/-1}
  .proofs li:last-child p{max-width:74ch}
}

/* ============ footer ============ */
.site-foot{padding:0 0 clamp(2rem,5vh,3.2rem)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(1.4rem,3vw,3rem);padding:clamp(2rem,4vh,3rem) var(--gut) 1.6rem;max-width:var(--max);margin:0 auto}
.foot-brand{display:grid;gap:.45rem;align-content:start}
.foot-brand svg{margin-bottom:.3rem}
.foot-nav{display:grid;gap:.5rem;align-content:start}
.foot-head{font:500 .64rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.3rem}
.foot-nav a{color:var(--ink-soft);text-decoration:none;font-size:.88rem;min-height:44px;display:flex;align-items:center}
.foot-nav a:hover{color:var(--ink)}
.on-ink .foot-head{color:rgba(243,241,234,.92)}
.foot-fineprint{padding:0 var(--gut);max-width:var(--max);margin:0 auto}
.foot-legal,.foot-fine{margin:0;font-size:.76rem;line-height:1.6;color:var(--ink-soft)}
.foot-legal{max-width:92ch;margin-bottom:1rem}

/* ============ breakpoints ============ */
/* the device leads on 01 and 03 and follows on 02, so three cases do not
   stack identically. DOM order stays copy first: the running screen is the
   thing you interact with after you have read what it is. */
@media (min-width:1081px){
  .case{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .case .case-stage{order:-1}
  .case[data-case="2"]{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .case[data-case="2"] .case-stage{order:0}
  .device.phone{max-width:400px}
}
@media (max-width:1080px){
  .brief-grid{grid-template-columns:minmax(0,1fr)}
  /* the drawing sits under the step it is reacting to, not above it */
  .board-wrap{position:static}
  .case{grid-template-columns:minmax(0,1fr)}
  .case-stage{position:static;order:-1;justify-items:start}
  .device.phone{max-width:300px}
}
@media (max-width:899px){
  /* below here the conversion path is the fixed bar, not a nav link */
  .site-nav{display:none}
  .site-head{align-items:center}
}
@media (max-width:720px){
  .submit-row{flex-direction:column;align-items:stretch}
  .submit-row .btn{width:100%}
  .lb-bar,.lb-foot{gap:.6rem}
  .lb-count{margin-left:0}
  .lb-nav{margin-left:0;width:100%}
  .lb-nav .lb-btn{flex:1}
}
@media (min-width:1900px){
  .hero-lede,.case-what{font-size:1.2rem}
  .case-dl dd{font-size:1rem}
}

/* ============ 1b. services, full bleed ink band ============ */
.svc{list-style:none;margin:0;padding:0;counter-reset:svc;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0;border-top:2px solid var(--ink)}
@media (min-width:900px){.svc{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svc li{counter-increment:svc;display:grid;gap:.4rem;align-content:start;padding:1.3rem clamp(.9rem,2vw,1.6rem) 1.7rem;border-bottom:1px solid var(--hair);border-right:1px solid var(--hair)}
.svc li::before{
  content:counter(svc,decimal-leading-zero);
  font:700 1.7rem/1 var(--disp);letter-spacing:-.05em;
  color:var(--amber);width:max-content;padding:0 .1em .04em;margin-bottom:.55rem;
}
/* 01 is most of what the studio does, so it does not sit at the weight of 06 */
.svc-lead::before{font-size:clamp(2.1rem,3.2vw,2.6rem)}
.svc-lead h3{font-size:1.3rem}
.svc-lead p{max-width:62ch;font-size:.96rem}
.svc li:last-child p{max-width:56ch}
@media (min-width:900px){
  .svc-lead{grid-column:span 2}
  .svc li:last-child{grid-column:1/-1}
}
.svc h3{font-size:1.05rem;letter-spacing:-.03em}
.svc p{font-size:.9rem;color:var(--ink-soft);max-width:34ch}
@media (hover:hover){
  .svc li:hover{background:var(--lift)}
  .svc li:hover::before{background:var(--amber);color:#0f0f10}
}

/* ============ 6. rhythm ============ */
/* the section head stops being a lonely left column. The note rides the
   kicker's line like a drawing annotation, not the headline's last baseline. */
.sec-head.wide{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.9rem 2rem}
.sec-head-main{max-width:46ch;min-width:0}
.head-note{font:400 .78rem/1.4 var(--mono);color:var(--ink-soft);text-align:right;padding-top:.1rem}
@media (min-width:861px){
  /* these two heads get a wider measure so the headline stops stacking */
  .sec-head.wide .sec-head-main{max-width:min(760px,60%)}
}
@media (max-width:860px){.head-note{text-align:left;width:100%}}

/* 13 cards fill 16 cells when the first one takes a 2 by 2 slot, no orphan row */
@media (min-width:768px) and (max-width:1099px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card:first-child{grid-column:span 2;grid-row:span 2;grid-template-rows:minmax(0,1fr) auto}
  .card:first-child .card-shot{aspect-ratio:auto;min-height:0}
}
@media (min-width:1100px){
  .gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
  .card:first-child{grid-column:span 2;grid-row:span 2;grid-template-rows:minmax(0,1fr) auto}
  .card:first-child .card-shot{aspect-ratio:auto;min-height:0}
}

.bstep{transition:border-color .18s ease}
.bstep:hover{border-top-color:var(--amber)}
.bstep-out::before{content:"";display:inline-block;width:11px;height:3px;background:var(--amber);vertical-align:.22em;margin-right:.55em}
.ledger-list li:first-child span::before{content:"";display:inline-block;width:7px;height:7px;background:var(--amber);margin-right:.55em}

/* ============ 7. motion. Every rule here is optional by design ============ */
@media (hover:hover){
  .card-title{position:relative}
  .card-title::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:3px;background:var(--amber)}
  .card:hover .card-title::after{right:0}
}
@media (prefers-reduced-motion:no-preference){
  /* JS adds .rv only once it has an observer, so a failed IO never hides copy */
  .rv:not(.rule){transition:opacity .85s ease,transform .85s cubic-bezier(.16,.84,.3,1);transition-delay:calc(var(--i,0)*70ms)}
  .rv:not(.rule):not(.is-in){opacity:0;transform:translateY(14px)}
  .chip{transition:background .12s ease,border-color .12s ease,color .12s ease}
  .svc li::before{transition:background .16s ease,color .16s ease}
  .btn{transition:background .16s ease,color .16s ease,border-color .16s ease}
  .btn:active{transform:scale(.98)}
  .card{transition:transform .18s ease,box-shadow .18s ease}
  .card:hover{transform:translateY(-3px)}
  .card-title::after{transition:right .26s cubic-bezier(.16,.84,.3,1)}
}

/* ============ 8. round two ============ */

/* E1.1 three equal cells, no separators, so the rail never wraps */
@media (max-width:480px){
  .rail{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:.2rem;align-items:start}
  .rail li+li::before{content:none}
  .rail-step{flex-wrap:wrap;gap:.15rem .4rem;padding:.4rem 0}
}
/* at 360 and below the three labels only hold one line if the tracking gives way */
@media (max-width:380px){
  .rail-step{font-size:.7rem;letter-spacing:.05em}
}

/* E2.10 below 900 the nav is gone, so the conversion path is a bar */
.mcta{display:none}
@media (max-width:899px){
  .mcta{
    position:fixed;bottom:0;left:0;right:0;height:52px;z-index:60;
    padding-bottom:env(safe-area-inset-bottom);box-sizing:content-box;
    display:flex;align-items:center;justify-content:center;
    background:var(--amber);color:#0f0f10;text-decoration:none;
    font:700 .88rem/1 var(--disp);letter-spacing:-.02em;
  }
  .mcta.is-off{display:none}
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:no-preference){
  /* E2.9 one step hands off to the next instead of cutting */
  .step.is-out{opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease}
  .step.is-in-step{animation:stepin .28s cubic-bezier(.16,.84,.3,1)}
  @keyframes stepin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .chip:active{transform:scale(.96)}
}

/* ============ 9. the sheet assembles itself ============ */
/* Each generated part is a <g> that travels in from its own direction and
   settles; the strokes ink themselves while it is still moving. Every from
   state lives inside the keyframes, inside this guard, so reduced motion gets
   the finished sheet with nothing hidden and nothing to wait for. */
@media (prefers-reduced-motion:no-preference){
  .board .pt,.dwg.dwg-rv.is-in .pt{
    animation-duration:.8s;
    animation-timing-function:cubic-bezier(.16,.84,.3,1);
    animation-fill-mode:both;
    animation-delay:calc(var(--i,0)*70ms);
  }
  .board .pt-fade,.dwg.dwg-rv.is-in .pt-fade{animation-name:pt-fade;animation-duration:.7s}
  .board .pt-down,.dwg.dwg-rv.is-in .pt-down{animation-name:pt-down;animation-duration:.76s}
  .board .pt-up,.dwg.dwg-rv.is-in .pt-up{animation-name:pt-up;animation-duration:.84s}
  .board .pt-left,.dwg.dwg-rv.is-in .pt-left{animation-name:pt-left;animation-duration:.9s}
  .board .pt-right,.dwg.dwg-rv.is-in .pt-right{animation-name:pt-right}
  .board .pt-slide{animation-name:pt-slide;animation-duration:.95s}

  /* the title block lands last, once, on load */
  .board .tb{animation:pt-up .84s cubic-bezier(.16,.84,.3,1) both 1s}

  /* the minis hold still until they are on screen, then assemble once. The
     travel scales down with the drawing, or 40 units reads as a lurch. */
  .dwg .pt{--off:.34}
  .dwg.dwg-rv .pt{opacity:0}
  .dwg .pt:nth-of-type(2){--i:1}
  .dwg .pt:nth-of-type(3){--i:2}
  .dwg .pt:nth-of-type(4){--i:3}
  .dwg .pt:nth-of-type(5){--i:4}

  @keyframes pt-fade{from{opacity:0}to{opacity:1}}
  @keyframes pt-down{from{opacity:0;transform:translateY(calc(var(--off,1)*-30px))}to{opacity:1;transform:none}}
  @keyframes pt-up{from{opacity:0;transform:translateY(calc(var(--off,1)*30px))}to{opacity:1;transform:none}}
  @keyframes pt-left{from{opacity:0;transform:translateX(calc(var(--off,1)*-46px))}to{opacity:1;transform:none}}
  @keyframes pt-right{from{opacity:0;transform:translateX(calc(var(--off,1)*40px))}to{opacity:1;transform:none}}
  @keyframes pt-slide{from{opacity:0;transform:translateX(72px)}to{opacity:1;transform:none}}
}