/* ==========================================================================
   Craft & Commerce — v4
   The deployed site's text and structure, reset in Libre Caslon on warm ink.
   Red is reserved for two marks: the ampersand and the period in "Be believed."
   ========================================================================== */

@font-face{font-family:'Caslon Display';src:url('../fonts/caslon-display-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Caslon';src:url('../fonts/caslon-text-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Caslon';src:url('../fonts/caslon-text-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Caslon';src:url('../fonts/caslon-text-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#111009;      /* ground */
  --ink-2:#1A1812;    /* a half step up, for the fixed nav */
  --paper:#F2EDE1;    /* type on ink; ground for reading sections */
  --beige:#E6D9BD;    /* the button — reader beige, warmer than the paper */
  --soft:#A39C8A;     /* secondary text on ink */
  --graphite:#4A463C; /* secondary text on paper */
  --ash:#7A7466;      /* labels on paper */
  --rule:#34312A;     /* hairlines on ink */
  --rule-p:#CFC6B3;   /* hairlines on paper */
  --red:#C4241B;
  --display:'Caslon Display','Libre Caslon Display',Georgia,serif;
  --text:'Caslon','Libre Caslon Text',Georgia,'Times New Roman',serif;
  --wrap:1240px;
  --pad:clamp(96px,11vw,168px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--text);font-size:18px;line-height:1.7;
  word-spacing:.1em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:color .12s,background-color .12s,border-color .12s}
img{display:block;max-width:100%}
em{font-style:italic;color:inherit}
b,strong{font-weight:400;color:var(--paper)}
h1,h2,.hdr,.wm .l{text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.rv{opacity:1;transform:none}   /* motion off: the page is still */

/* ---------- layout primitives (deployed class names) ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(24px,4.5vw,64px)}
.sec{padding:var(--pad) 0}
.rail{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:3.5rem;align-items:start}
.slug{font-style:italic;font-size:16px;line-height:1.5;color:var(--soft);padding-top:.9rem;border-top:1px solid var(--rule);word-spacing:0}
.slug .sub{display:block;font-style:normal;font-size:13px;color:#6E685B;margin-top:.2rem}
h2{font-family:var(--display);font-weight:400;font-size:clamp(38px,4.6vw,64px);line-height:1.04;letter-spacing:-.018em;word-spacing:0}
.lede{margin-top:1.6rem;max-width:40ch;font-size:clamp(20px,1.7vw,23px);line-height:1.5;color:var(--soft)}

/* ---------- buttons: Book is the solid one, always bold ---------- */
.btn{display:inline-block;font-family:var(--text);font-weight:700;font-size:15px;letter-spacing:.01em;word-spacing:.04em;
  line-height:1;padding:19px 30px;border:1px solid transparent}
.btn-gold,a.btn[href^="mailto:"]{background:var(--beige);color:var(--ink);border-color:var(--beige)}
.btn-gold:hover,a.btn[href^="mailto:"]:hover{background:var(--paper);border-color:var(--paper)}
.btn-line{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn-line:hover{background:var(--paper);color:var(--ink)}
.paper a.btn[href^="mailto:"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.paper a.btn[href^="mailto:"]:hover{background:var(--red);border-color:var(--red)}

/* ---------- fixed nav (appears after the plate, as deployed) ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:.85rem clamp(24px,4.5vw,64px);background:var(--ink-2);border-bottom:1px solid var(--rule);
  opacity:0;pointer-events:none;transition:opacity .2s}
nav.show{opacity:1;pointer-events:auto}
.mark{font-family:var(--text);font-weight:700;font-size:16px;word-spacing:.02em}
.mark .a,footer .a{color:var(--red);font-family:var(--text);font-weight:400;font-style:normal}
.nl{display:flex;align-items:center;gap:1.9rem}
.nl a{font-size:15px;color:var(--soft)}
.nl a:hover{color:var(--paper)}
.nl .cta{font-weight:700;color:var(--ink);background:var(--beige);padding:.62rem 1.05rem;line-height:1}
.nl .cta:hover{color:var(--ink);background:var(--paper)}

/* ==========================================================================
   PLATE — ink on the left, the photograph on the right
   ========================================================================== */
.plate{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) clamp(420px,45vw,760px)}
.plt{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:9.5rem clamp(32px,4vw,64px) 5.5rem clamp(24px,4.5vw,64px)}
.ptop{position:absolute;top:2.4rem;left:clamp(24px,4.5vw,64px);right:clamp(32px,4vw,64px);display:flex;justify-content:space-between;gap:2rem}
.ptop .nm{font-weight:700;font-size:16px;color:var(--paper);white-space:nowrap}
.ptop .loc{display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-size:14.5px;line-height:1.45;color:var(--soft)}
.ptop .loc .tail{font-style:italic}
.wm .l{font-family:var(--display);font-weight:400;font-size:clamp(64px,8.2vw,126px);line-height:.94;letter-spacing:-.022em;word-spacing:0}
.wm .amp{color:var(--red)}
.wm .rule{display:none}
.wm .tag{margin-top:2.2rem;font-style:italic;font-size:18px;color:var(--soft);word-spacing:.06em}
.wm .plain{margin-top:.5rem;font-size:clamp(22px,2vw,28px);line-height:1.35;color:var(--paper);max-width:24ch}
.pacts{display:flex;gap:.9rem;margin-top:2.8rem;flex-wrap:wrap}
.cue{position:absolute;bottom:2.2rem;left:clamp(24px,4.5vw,64px);font-style:italic;font-size:14px;color:#6E685B}
.ph{position:relative;margin:0;background:#2A2620;min-height:100%}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:74% 38%}

/* ==========================================================================
   BE BELIEVED
   ========================================================================== */
.bb{padding:clamp(120px,14vw,200px) 0 clamp(110px,12vw,176px);border-top:1px solid var(--rule)}
.bb h1{font-family:var(--display);font-weight:400;font-size:clamp(84px,15.5vw,236px);line-height:.86;letter-spacing:-.035em;word-spacing:0}
.bb h1 .b{font-style:normal;color:var(--paper)}
.bb h1 .p{color:var(--red)}
.bb .offer{margin-top:3.4rem;max-width:38ch;font-size:clamp(22px,2vw,28px);line-height:1.38;color:var(--paper)}
.bb .kicker{margin-top:2.4rem;font-style:italic;font-size:clamp(22px,2vw,28px);line-height:1.35;color:var(--soft)}
.bb .kicker b{font-style:normal;color:var(--paper)}
.bb .forwho{margin-top:2.6rem;max-width:56ch;font-size:18px;line-height:1.7;color:var(--soft)}

/* ==========================================================================
   THE APPROACH
   ========================================================================== */
.diff .hdr{font-family:var(--display);font-size:clamp(30px,3vw,42px);line-height:1.1;letter-spacing:-.014em;word-spacing:0;margin-bottom:1.4rem}
.diff>p{max-width:56ch;color:var(--soft)}
.map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:3rem;border-top:1px solid var(--rule)}
.step{padding:1.8rem 1.6rem 1.8rem 0;border-right:1px solid var(--rule)}
.step+.step{padding-left:1.6rem}
.step:last-child{border-right:none}
.step .n{display:block;font-style:italic;font-size:14px;color:#6E685B}
.step .h{display:block;margin:.5rem 0 .7rem;font-family:var(--display);font-size:30px;line-height:1.05;color:var(--paper);word-spacing:0}
.step p{font-size:16px;line-height:1.62;color:var(--soft)}
.map-note{margin-top:1.4rem;font-style:italic;font-size:17px;color:var(--soft)}
.mv{margin-top:5rem;border-top:1px solid var(--rule)}
.mvrow{display:grid;grid-template-columns:3rem 11rem minmax(0,1fr);gap:2rem;align-items:start;padding:2.8rem 0;border-bottom:1px solid var(--rule)}
.mvrow .rn{font-family:var(--display);font-style:normal;font-size:28px;line-height:1;color:var(--soft)}
.mvrow .disc{font-style:italic;font-size:17px;line-height:1.4;color:var(--paper)}
.mvrow .disc span{display:block;font-style:normal;font-size:14px;color:var(--soft);margin-top:.2rem}
.mvrow .t{display:block;font-family:var(--display);font-size:clamp(24px,2.2vw,30px);line-height:1.15;color:var(--paper);margin-bottom:.9rem;word-spacing:0}
.mvrow p{max-width:58ch;font-size:17px;line-height:1.72;color:var(--soft)}
.mvrow .tools{display:block;margin-top:1rem;font-style:italic;font-size:15px;line-height:1.6;color:#7C7667}
.mvseal{margin-top:4rem;max-width:36ch;font-family:var(--display);font-size:clamp(28px,2.8vw,38px);line-height:1.18;color:var(--soft);word-spacing:0}
.mvseal b{color:var(--paper)}
.results{margin-top:4.5rem;max-width:52ch}
.results .rl{display:block;font-style:italic;font-size:16px;color:var(--soft);margin-bottom:1.1rem}
.results p{font-size:clamp(20px,1.7vw,23px);line-height:1.45;color:var(--paper);padding:.9rem 0;border-top:1px solid var(--rule)}
.results p:last-child{border-bottom:1px solid var(--rule)}
.proof{margin-top:5.5rem;padding-top:2.4rem;border-top:1px solid var(--rule)}
.proof .pl{display:block;font-style:italic;font-size:16px;color:var(--soft);margin-bottom:1.3rem}
.proof .pbody{max-width:40ch;font-family:var(--display);font-size:clamp(26px,2.4vw,34px);line-height:1.2;color:var(--paper);word-spacing:0}
.proof .pline{margin-top:1.3rem;max-width:52ch;color:var(--soft)}
.proof .pline b{font-style:italic;color:var(--paper)}
.prow{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:2rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.prow:first-of-type{margin-top:2.2rem;border-top:1px solid var(--rule)}
.prow .k{font-style:italic;font-size:16px;color:var(--paper)}
.prow .v{font-size:16.5px;line-height:1.65;color:var(--soft)}

/* ==========================================================================
   SERVICES — paper
   ========================================================================== */
.paper{background:var(--paper);color:var(--ink)}
.paper .slug{color:var(--graphite);border-top-color:var(--rule-p)}
.paper .slug .sub{color:var(--ash)}
.paper .lede{color:var(--graphite)}
.paper b,.paper strong{color:var(--ink)}
.idx{margin-top:3.6rem;border-top:1px solid var(--ink)}
.tier{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:1.6rem;align-items:start;padding:2.6rem 0;border-bottom:1px solid var(--rule-p)}
.tier .tn{font-family:var(--display);font-style:normal;font-size:28px;line-height:1.05;color:var(--ash)}
.tier .th{display:block;font-family:var(--display);font-size:clamp(28px,2.6vw,38px);line-height:1.08;color:var(--ink);margin-bottom:.8rem;word-spacing:0}
.tier .tw{font-family:var(--text);font-style:italic;font-size:17px;color:var(--ash);white-space:nowrap}
.tier p{max-width:60ch;font-size:17px;line-height:1.7;color:var(--graphite)}
.tier .tgo{display:block;margin-top:1rem;font-style:italic;font-size:19px;line-height:1.45;color:var(--ink)}
.teams{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:1.6rem;align-items:baseline;padding:2.2rem 0 0}
.teams .tml{grid-column:1/-1;font-style:italic;font-size:16px;color:var(--ash);margin-bottom:-.6rem}
.teams p{grid-column:2;max-width:60ch;font-size:17px;line-height:1.7;color:var(--graphite)}

/* ==========================================================================
   THE TERMINAL
   ========================================================================== */
#terminal h2 em{font-style:italic}
.tframe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:4rem;margin-top:3.2rem;align-items:start}
.tcopy p{font-size:17px;line-height:1.72;color:var(--soft)}
.tcopy p+p{margin-top:1.1rem}
.tcopy strong{color:var(--paper)}
.prin{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
.prin .pl{display:block;font-style:italic;font-size:16px;color:var(--soft);margin-bottom:.6rem}
.prin p{font-family:var(--display);font-size:clamp(24px,2.1vw,30px);line-height:1.2;color:var(--paper)!important;word-spacing:0}
.prin p b{font-style:italic}
.quad{border:0;padding:0}
.quad .ql{display:block;font-style:italic;font-size:16px;color:var(--soft);margin-bottom:1rem}
.quad svg{width:100%;height:auto;display:block}
.quad svg rect{fill:none}
.quad svg [stroke="#b8290a"]{stroke:#6E685B;stroke-width:1}
.quad svg path[stroke^="url"]{stroke:var(--soft)}
.quad svg [stroke="#c9a84c"]{stroke:var(--paper)}
.quad svg [fill="#c9a84c"]{fill:var(--paper)}
.quad svg text{font-family:var(--text);word-spacing:0}
.quad .ax{font-size:10px;fill:var(--soft);letter-spacing:.02em;text-transform:none}
.quad .qq{font-size:10.5px;fill:#8C8676;letter-spacing:0}
.quad .qq.hi{fill:var(--paper)}
.quad .qs{font-size:9.5px;fill:var(--soft);font-style:italic;letter-spacing:0}
.quad .amp2{fill:var(--red)}
.qcap{margin-top:1rem;font-style:italic;font-size:15.5px;line-height:1.6;color:var(--soft)}
.built{margin-top:5rem;padding-top:2.2rem;border-top:1px solid var(--rule)}
.built .bl{display:block;font-style:italic;font-size:16px;color:var(--soft);margin-bottom:1.2rem}
.brow{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:2rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.brow .bk{font-style:italic;font-size:16.5px;color:var(--paper)}
.brow .bv{font-size:16.5px;line-height:1.65;color:var(--soft)}

/* ==========================================================================
   ABOUT — paper
   ========================================================================== */
.abt{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:4rem;align-items:start}
.portrait img{width:100%;height:auto}
.portrait .cap{margin-top:.8rem;font-style:italic;font-size:14.5px;color:var(--ash)}
.abt-body p{font-size:17.5px;line-height:1.75;color:var(--graphite)}
.abt-body p+p{margin-top:1.2rem}
.abt-body .first{font-family:var(--display);font-size:clamp(26px,2.5vw,34px);line-height:1.22;color:var(--ink);margin-bottom:1.6rem;word-spacing:0}

/* ==========================================================================
   BEGIN + footer
   ========================================================================== */
.close{padding:var(--pad) 0 calc(var(--pad) * .8);border-top:1px solid var(--rule)}
.close h2{font-size:clamp(46px,6vw,88px);line-height:.98;letter-spacing:-.024em}
.close h2 em{font-style:italic}
.close .say{margin:1.8rem 0 2.8rem;font-style:italic;font-size:clamp(22px,2vw,28px);color:var(--soft)}
footer{border-top:1px solid var(--rule);padding:1.8rem clamp(24px,4.5vw,64px);display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  font-size:14.5px;color:var(--soft)}
footer a:hover{color:var(--paper)}

/* ==========================================================================
   Tablet & mobile
   ========================================================================== */
@media (max-width:1024px){
  .nl{gap:1.1rem}
  .nl a:not(.cta){display:none}
}
@media (max-width:900px){
  .plate{display:flex;flex-direction:column;min-height:0}
  .ph{order:-1;aspect-ratio:1/1;width:100%;min-height:0}
  .ph img{object-position:82% 36%}
  .plt{padding:2.4rem 24px 3.6rem}
  .ptop{position:static;margin-bottom:2.6rem}
  .cue{display:none}
  .rail{grid-template-columns:1fr;gap:1.6rem}
  .map{grid-template-columns:1fr 1fr}
  .step,.step+.step{padding:1.5rem 1.2rem 1.5rem 0;border-right:none;border-bottom:1px solid var(--rule)}
  .step:nth-child(2n){padding-left:1.2rem;border-left:1px solid var(--rule)}
  .mvrow{grid-template-columns:2.6rem minmax(0,1fr);gap:1rem}
  .mvrow .body{grid-column:1/-1;margin-top:.6rem}
  .prow,.brow{grid-template-columns:1fr;gap:.3rem}
  .tframe,.abt{grid-template-columns:1fr;gap:2.8rem}
}
@media (max-width:600px){
  body{font-size:17px}
  .map{grid-template-columns:1fr}
  .step:nth-child(2n){padding-left:0;border-left:none}
  .step,.step+.step{padding:1.3rem 0}
  .btn{width:100%;text-align:center}
  .pacts{flex-direction:column}
  .tier{grid-template-columns:2.4rem minmax(0,1fr);gap:1rem}
  .teams{grid-template-columns:1fr}
  .teams .tml{margin-bottom:.4rem}
  .teams p{grid-column:1}
  .ptop{flex-direction:column;gap:.6rem}
  .ptop .loc{align-items:flex-start;text-align:left}
  footer{flex-direction:column;gap:.6rem}
}

/* nav: never wrap */
.mark,.nl .cta{white-space:nowrap}
@media (max-width:600px){
  nav{padding:.7rem 18px}
  .mark{font-size:15px}
  .nl .cta{font-size:13px;padding:.55rem .8rem}
}

/* ==========================================================================
   v5 — gold, used judiciously, and only on ink (it fails contrast on paper)
   ========================================================================== */
:root{--gold:#D6B25C}
/* the matrix: the promise in the upper right shines, and so does "now" */
.quad svg [fill="#c9a84c"]{fill:var(--gold)}
.quad svg [stroke="#c9a84c"]{stroke:var(--gold)}
.quad .qq.hi{fill:var(--gold)}
.quad .qs{fill:#B9A06A}
/* the thesis of the method */
.mvseal b{color:var(--gold)}
/* the close */
.close h2 em{color:var(--gold)}
/* and one you only find by reaching for it: Book a Conversation warms to gold */
.btn-gold:hover,a.btn[href^="mailto:"]:hover,.nl .cta:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.paper a.btn[href^="mailto:"]:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* publication names set in italic, as they would be in print */
.prow .v em{font-style:italic}

/* v6 — the "excavate" line now leads Why me; four parallel pillars follow */
.proof .pline{margin:0 0 2.4rem;max-width:36ch;font-family:var(--display);font-size:clamp(26px,2.4vw,34px);line-height:1.22;color:var(--paper);word-spacing:0}
.proof .pline b{font-style:italic;color:var(--paper)}

/* v7 — photographs */
.ph img{object-position:50% 26%}
.field{margin:3.6rem 0 0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2.6rem;align-items:center}
.field img{width:100%;height:auto}
.field blockquote{font-style:italic;font-size:clamp(20px,1.75vw,24px);line-height:1.45;color:var(--paper)}
.field .src{display:block;margin-top:1.1rem;font-size:14.5px;color:var(--soft)}
.field .src em{font-style:italic}
footer .cr{flex-basis:100%;font-style:italic;font-size:13.5px;color:#6E685B}
@media (max-width:900px){
  .ph img{object-position:50% 22%}
  .field{grid-template-columns:1fr;gap:1.4rem}
}

/* v8 — the desk photo returns; credits recede; the Terminal as an instrument; the Ideas feed */
.ph img{object-position:74% 38%}
@media (max-width:900px){.ph img{object-position:82% 36%}}
.field .src{font-size:13.5px;color:#7C7667}
footer .cr{font-size:11.5px;font-style:normal;color:#4E4A40;letter-spacing:.01em}
#terminal .lede{max-width:44ch}
.inv{margin-top:3.4rem;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.inv p{font-size:17px;color:var(--soft)}
.ideas{border-top:1px solid var(--rule-p)}
.ilist{border-top:1px solid var(--ink)}
.idea{display:grid;grid-template-columns:minmax(0,1fr) 11rem;column-gap:2rem;align-items:baseline;padding:1.7rem 0;border-bottom:1px solid var(--rule-p);color:var(--ink)}
.idea .t{grid-column:1;font-family:var(--display);font-size:clamp(24px,2.2vw,31px);line-height:1.14;word-spacing:0}
.idea.lead .t{font-size:clamp(30px,3vw,42px)}
.idea .dk{grid-column:1;margin-top:.5rem;font-style:italic;font-size:17.5px;line-height:1.5;color:var(--graphite)}
.idea .d{grid-column:2;grid-row:1;justify-self:end;font-style:italic;font-size:14.5px;color:var(--ash);white-space:nowrap}
.idea:hover .t{color:var(--red)}
.ideas .more{display:inline-block;margin-top:1.8rem;font-weight:700;font-size:15px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px}
.ideas .more:hover{color:var(--red);border-bottom-color:var(--red)}
@media (max-width:600px){.idea{grid-template-columns:1fr}.idea .d{grid-column:1;grid-row:auto;justify-self:start;margin-top:.5rem}}

/* v9 — more air after the plate; a quieter opening line; the poster moment moves to the close */
.bb{padding-top:clamp(190px,21vw,310px);padding-bottom:clamp(120px,13vw,190px)}
.bb h1{font-size:clamp(46px,6vw,88px);line-height:1.04;letter-spacing:-.022em}
.bb h1 em{font-style:italic;color:var(--soft)}
.bb .offer{margin-top:3rem}
.close h2{font-size:clamp(38px,4.6vw,64px);line-height:1.04}
.finale{margin:1.6rem 0 3rem;font-family:var(--display);font-size:clamp(72px,13vw,200px);line-height:.9;letter-spacing:-.035em;color:var(--paper);word-spacing:0;white-space:nowrap}
.finale .p{color:var(--red)}
@media (max-width:900px){
  .plt{padding-bottom:4.8rem}
  .bb{padding-top:clamp(150px,34vw,210px)}
}

/* v10 — the Terminal, in use: today's job, inbound, outbound, scored out of 100 */
:root{--go:#7FA074;--hold:#D6B25C;--stop:#C4241B}
.app{margin:4.2rem 0 0;background:#171510;border:1px solid var(--rule)}
.app-bar{display:flex;justify-content:space-between;align-items:baseline;padding:1rem 1.6rem;border-bottom:1px solid var(--rule)}
.app-name{font-weight:700;font-size:15px;color:var(--paper)}
.app-day{font-style:italic;font-size:15px;color:var(--soft)}
.app-bet{display:flex;gap:1.2rem;align-items:baseline;flex-wrap:wrap;padding:1.1rem 1.6rem;border-bottom:1px solid var(--rule)}
.app-bet .k{font-style:italic;font-size:15px;color:var(--soft)}
.app-bet .v{font-family:var(--display);font-size:clamp(20px,1.8vw,24px);color:var(--paper);word-spacing:0}
.app-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr)}
.app-grid>section{padding:1.6rem;border-right:1px solid var(--rule)}
.app-grid>section:last-child{border-right:none}
.app h3{font-style:italic;font-weight:400;font-size:15px;color:var(--soft);margin-bottom:1.1rem}
.today ol{list-style:none;counter-reset:t}
.today li{counter-increment:t;position:relative;padding:0 0 1rem 2.1rem;font-family:var(--display);font-size:clamp(20px,1.7vw,24px);line-height:1.22;color:var(--paper);word-spacing:0}
.today li::before{content:counter(t);position:absolute;left:0;top:.08em;font-family:var(--text);font-style:italic;font-size:15px;color:var(--gold)}
.today .rest{margin-top:.4rem;padding-top:1rem;border-top:1px solid var(--rule);font-style:italic;font-size:16px;color:var(--soft)}
.op{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:.9rem;align-items:start;padding:.85rem 0;border-top:1px solid var(--rule)}
.op:first-of-type{border-top:none;padding-top:0}
.sc{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:2px solid;border-radius:50%;
  font-family:var(--text);font-weight:700;font-size:14px;color:var(--paper);word-spacing:0}
.sc.g{border-color:var(--go)} .sc.y{border-color:var(--hold)} .sc.r{border-color:var(--stop)}
.op-t b{display:block;font-weight:700;font-size:15px;line-height:1.3;color:var(--paper)}
.op-t span{display:block;margin-top:.15rem;font-size:14.5px;line-height:1.45;color:var(--soft)}
.vd{font-style:italic;font-size:14px;color:var(--soft);padding-top:.1rem;white-space:nowrap}
.app figcaption{padding:.9rem 1.6rem;border-top:1px solid var(--rule);font-style:italic;font-size:14px;color:#7C7667}
@media (max-width:1100px){
  .app-grid{grid-template-columns:1fr 1fr}
  .app-grid>.today{grid-column:1/-1;border-right:none;border-bottom:1px solid var(--rule)}
  .app-grid>.flow:nth-child(2){border-right:1px solid var(--rule)}
}
@media (max-width:640px){
  .app-grid{grid-template-columns:1fr}
  .app-grid>section,.app-grid>.flow:nth-child(2){border-right:none;border-bottom:1px solid var(--rule);padding:1.3rem 1.1rem}
  .app-grid>section:last-child{border-bottom:none}
  .app-bar,.app-bet,.app figcaption{padding-left:1.1rem;padding-right:1.1rem}
}
/* on desktop the app breaks out of the text column to the full page width, like a magazine figure */
@media (min-width:901px){ .app{margin-left:-14rem} }

/* v12 — Robin's notes: labelled lists, one About, plain-language descriptors, a few more red moments */
.lbl{display:block;font-style:italic;font-size:16px;color:var(--soft);margin:3.2rem 0 1rem}
.lbl+.map{margin-top:0}
.step .n{font-family:var(--display);font-style:normal;font-size:30px;line-height:1;color:var(--red)}   /* large enough for red on ink */
.disc2{margin-top:4.2rem}
.d2{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;border-top:1px solid var(--rule);padding-top:1.6rem}
.d2 .k{display:block;font-style:italic;font-size:17px;color:var(--paper);margin-bottom:.6rem}
.d2 p{font-size:17px;line-height:1.7;color:var(--soft)}
.d2 p b{color:var(--paper)}
.ex{margin-top:4rem;max-width:34ch;font-family:var(--display);font-size:clamp(26px,2.5vw,34px);line-height:1.22;color:var(--ink);word-spacing:0}
.ex em{font-style:italic}
.creds{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--rule-p);max-width:70ch;font-size:17px;line-height:1.8;color:var(--graphite)}
.creds .k{font-style:italic;color:var(--ink)}
.paper .field{margin-top:3.4rem}
.paper .field blockquote{color:var(--ink)}
.paper .field .src{color:var(--ash)}
#terminal .kick{margin-bottom:1rem;font-style:italic;font-size:19px;color:var(--soft)}
.ideas h2{margin-bottom:2rem;font-size:clamp(30px,3vw,42px);color:var(--ink)}
@media (max-width:900px){.d2{grid-template-columns:1fr;gap:1.6rem}}

/* v13 — the Services headline and point of view */
#services h2{font-size:clamp(40px,5vw,70px);line-height:1.02}
#services h2 em{font-style:italic;color:var(--graphite)}
.pov{margin-top:2rem;max-width:30ch;font-family:var(--display);font-size:clamp(24px,2.3vw,32px);line-height:1.22;color:var(--ink);word-spacing:0;padding-left:1.4rem;border-left:2px solid var(--ink)}
#services .lede{margin-top:2.2rem}

/* v15 — the audience: every room is a relationship */
.room{margin-top:3.6rem;padding-top:1.8rem;border-top:1px solid var(--rule);max-width:58ch}
.room .rh2{font-family:var(--display);font-size:clamp(28px,2.8vw,38px);line-height:1.12;color:var(--paper);word-spacing:0;margin-bottom:1rem}
.room p:not(.rh2){font-size:17px;line-height:1.72;color:var(--soft)}


/* ==========================================================================
   v17 — multi-page: home keeps the arc; the depth moves to its own pages
   ========================================================================== */
body.sub main{padding-top:64px}
nav.show{opacity:1;pointer-events:auto}
.nl a[aria-current="page"]{color:var(--paper);border-bottom:1px solid var(--paper);padding-bottom:2px}
.more-link{margin-top:2.6rem}
.more-link a{font-weight:700;font-size:16px;border-bottom:1px solid currentColor;padding-bottom:3px}
.paper .more-link a{color:var(--ink)}
.tline{padding:clamp(80px,9vw,128px) 0}
.tl-k{font-style:italic;font-size:19px;color:var(--soft)}
.tl-h{margin-top:.6rem;font-family:var(--display);font-size:clamp(34px,4vw,56px);line-height:1.04;color:var(--paper);word-spacing:0}
.pcta{padding:clamp(72px,8vw,112px) 0;border-top:1px solid var(--rule)}
.pc-l{font-family:var(--display);font-size:clamp(28px,3vw,42px);line-height:1.1;color:var(--paper);margin-bottom:2rem;word-spacing:0}
.ideas .empty{padding:1.7rem 0;font-style:italic;font-size:19px;color:var(--graphite);border-bottom:1px solid var(--rule-p)}
/* phone menu */
.mm{display:none;position:relative}
.mm summary{list-style:none;cursor:pointer;font-weight:700;font-size:15px;color:var(--paper);padding:.5rem 0}
.mm summary::-webkit-details-marker{display:none}
.mm-p{position:absolute;right:0;top:2.6rem;min-width:200px;background:var(--ink-2);border:1px solid var(--rule);padding:.6rem 1.2rem}
.mm-p a{display:block;padding:.75rem 0;font-size:17px;color:var(--paper);border-bottom:1px solid var(--rule)}
.mm-p a:last-child{border-bottom:0}
@media (max-width:1024px){ .mm{display:block} .nl{margin-left:auto;margin-right:1.2rem} }
.mm-cta{display:none!important}
@media (max-width:520px){ .nl .cta{display:none} .nl{margin-right:0} .mm-cta{display:block!important;font-weight:700} }

/* ==========================================================================
   v18 — client first. Same ink, paper, beige and red; Caslon for the voice,
   Franklin Gothic (Libre Franklin) for the working labels; a little grain.
   ========================================================================== */
@font-face{font-family:'Franklin';src:url(../fonts/libre-franklin-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Franklin';src:url(../fonts/libre-franklin-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Franklin';src:url(../fonts/libre-franklin-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap}
:root{--label:'Franklin','Libre Franklin','Helvetica Neue',Arial,sans-serif;--pencil:#2B2924}

/* grain: printed, not rendered */
body{position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.07;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* labels: the working typeface, sitewide */
.slug,.slug-l,.lbl,.kick{font-family:var(--label);font-style:normal;font-weight:800;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;line-height:1.5}
.slug-l{color:var(--soft)} .paper .slug-l{color:var(--ash)}
.nl a:not(.cta),.mm summary{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.nl .cta,.btn{font-family:var(--label);font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.step .n{color:var(--soft)}   /* red stays on the ampersand and the period only */

/* 01 opening */
.h-open{padding:calc(64px + clamp(64px,8vw,120px)) 0 clamp(72px,8vw,112px);overflow:hidden;border-bottom:1px solid var(--rule)}
.kick{color:var(--soft)}
.h-open h1{font-family:var(--display);font-weight:400;font-size:clamp(56px,11.4vw,176px);line-height:.9;letter-spacing:-.03em;margin:2.2rem 0 0 -.04em;word-spacing:0;color:var(--paper)}
.h-open h1 em{font-family:var(--text);font-style:italic;letter-spacing:-.045em}
.h-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);gap:3rem;align-items:end;margin-top:clamp(48px,6vw,88px)}
.h-side{font-family:var(--label);font-size:13px;line-height:1.7;color:var(--soft);border-top:1px solid var(--rule);padding-top:1rem;max-width:20rem}
.h-side span{display:block;margin-top:.6rem;color:#6E685B}
.h-dek p{font-size:21px;line-height:1.5;color:var(--soft)}
.h-dek b{color:var(--paper);font-weight:400}
.h-acts{display:flex;align-items:center;gap:1.8rem;margin-top:1.8rem;flex-wrap:wrap}
.h-text{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);border-bottom:1px solid var(--rule);padding-bottom:3px}
.h-text:hover{color:var(--paper);border-color:var(--paper)}

/* 02 the problem, on a page */
.h-prob h2,.h-change h2{font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.02em}
.sheet{margin:clamp(48px,5vw,72px) 0 0}
.sh-page{position:relative;background:#FBF8F0;border:1px solid var(--rule-p);box-shadow:0 1px 0 #DCD3C0,8px 10px 0 -3px #E4DCCB;
  padding:clamp(28px,4vw,56px);transform:rotate(-.5deg);display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:2.4rem 3rem;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 33px,#E9E2D2 33px,#E9E2D2 34px);background-position:0 1.2rem}
.sh-title{grid-column:1/-1;font-family:var(--label);font-weight:800;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--ash);border-bottom:2px solid var(--pencil);padding-bottom:.7rem}
.sh-text p{font-size:18px;line-height:1.85;color:var(--graphite);margin-bottom:1rem}
.sh-text s{text-decoration-thickness:1.6px;text-decoration-color:var(--pencil);color:#8A8475}
.sh-text u{text-decoration-thickness:1.5px;text-underline-offset:3px}
.sh-notes{border-left:1px solid var(--pencil);padding-left:1.6rem;align-self:start}
.sh-h{font-family:var(--label);font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pencil);margin:0 0 .8rem}
.sh-h:not(:first-child){margin-top:2rem}
.sh-notes ul{list-style:none}
.sh-notes li,.sh-n{font-family:var(--label);font-weight:600;font-size:14.5px;line-height:1.5;color:var(--pencil);margin-bottom:.55rem}
.sh-notes li::before{content:"→ "}
.sh-say{font-family:var(--display);font-size:30px;line-height:1.1;color:var(--ink);margin-top:1.6rem}
.sh-fix{grid-column:1/-1;border:1.5px solid var(--pencil);border-radius:999px/60%;padding:clamp(24px,3vw,40px) clamp(28px,5vw,72px);text-align:left}
.sh-fix-h{font-family:var(--display);font-size:clamp(28px,3vw,42px);line-height:1.08;color:var(--ink)}
.sh-fix-b{margin-top:.9rem;font-size:19px;line-height:1.55;color:var(--graphite);max-width:40rem}
.sheet figcaption{margin-top:1.4rem;font-family:var(--label);font-size:12.5px;color:var(--ash)}

/* 03 the rooms, set like a program */
.h-rooms{border-top:1px solid var(--rule)}
.h-head{display:flex;justify-content:space-between;align-items:baseline}
.rooms{list-style:none;margin-top:2.6rem}
.rooms li{display:grid;grid-template-columns:5.5rem minmax(0,24rem) minmax(0,1fr) 7rem;gap:1.6rem;align-items:baseline;border-top:1px solid var(--rule);padding:1.7rem 0}
.rooms li:last-child{border-bottom:1px solid var(--rule)}
.rooms .n{font-family:var(--label);font-weight:600;font-size:13px;color:var(--soft)}
.rooms .t{font-family:var(--display);font-size:clamp(36px,4vw,58px);line-height:1;letter-spacing:-.01em;color:var(--paper)}
.rooms .d{font-size:18px;line-height:1.5;color:var(--soft);max-width:32rem}
.rooms .w{font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);text-align:right}

/* 04 what changes */
.ba{width:100%;max-width:52rem;border-collapse:collapse;margin-top:2.8rem}
.ba th{font-family:var(--label);font-weight:800;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ash);text-align:left;padding:0 0 .9rem;border-bottom:2px solid var(--ink)}
.ba td{font-size:21px;padding:1.05rem 1.4rem 1.05rem 0;border-bottom:1px solid var(--rule-p);vertical-align:top;width:50%}
.ba td:first-child{color:var(--ash)}
.ba td:last-child{font-family:var(--display);font-size:24px;color:var(--ink)}

/* 05 method: each verb gets a plain-English line */
.h-map{margin-top:3rem}
.step .g{display:block;font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:.5rem 0 .2rem}

/* 07 proof */
.h-proof{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch}
.h-ph{margin:0;min-height:640px}
.h-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;filter:grayscale(1) contrast(1.04)}
.h-pt{padding:clamp(56px,7vw,112px) clamp(24px,5vw,80px)}
.h-pt h2{font-size:clamp(36px,3.8vw,56px);line-height:1.02;letter-spacing:-.015em;margin:1.2rem 0 1.6rem}
.h-pt>p{font-size:19px;line-height:1.6;color:var(--graphite);max-width:34rem}
.cv{display:grid;grid-template-columns:5.5rem 1fr;border-top:2px solid var(--ink);margin-top:2.2rem;max-width:34rem}
.cv dt,.cv dd{padding:.75rem 0;border-bottom:1px solid var(--rule-p);font-size:16px;line-height:1.45}
.cv dt{font-family:var(--label);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding-top:1rem}
.h-cap{background:var(--paper);color:var(--ash);font-family:var(--label);font-size:12px;padding:.8rem clamp(24px,4.5vw,64px) 1.4rem}

@media (max-width:1024px){
  .h-row{grid-template-columns:1fr;gap:2rem}
  .h-side{order:2}
  .sh-page{grid-template-columns:1fr;transform:none}
  .sh-notes{border-left:0;border-top:1px solid var(--pencil);padding:1.4rem 0 0}
  .rooms li{grid-template-columns:4rem 1fr;gap:.4rem 1rem}
  .rooms .d{grid-column:2}
  .rooms .w{grid-column:2;text-align:left}
  .h-proof{grid-template-columns:1fr}
  .h-ph{min-height:0;aspect-ratio:3/2}
}
@media (max-width:600px){
  .h-open h1{font-size:clamp(52px,15vw,72px)}
  .sh-fix{border-radius:28px}
  .sh-text p{font-size:16.5px}
  .ba td{font-size:17px} .ba td:last-child{font-size:19px}
  .h-head{flex-direction:column;gap:.3rem}
}
/* compact services on the homepage */
.svc{list-style:none;margin-top:2.6rem;border-top:1px solid var(--rule-p)}
.svc li{display:grid;grid-template-columns:3rem minmax(0,15rem) 9rem minmax(0,1fr);gap:1.2rem;align-items:baseline;padding:1.3rem 0;border-bottom:1px solid var(--rule-p)}
.svc .sn{font-family:var(--display);color:var(--ash);font-size:20px}
.svc .st{font-family:var(--display);font-size:28px;line-height:1.1;color:var(--ink)}
.svc .sw{font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.svc .sg{font-style:italic;font-size:18px;color:var(--graphite);line-height:1.45}
.svc-also{margin-top:1.4rem;font-size:17px;color:var(--graphite)}
.tml{font-family:var(--label);font-style:normal;font-weight:800;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase}
@media (max-width:1024px){.svc li{grid-template-columns:2.4rem 1fr;gap:.3rem 1rem}.svc .sw,.svc .sg{grid-column:2}}
.h-who{margin-top:1rem;font-family:var(--label);font-weight:600;font-size:13px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--paper)!important;line-height:1.6!important}
.sh-tog{display:none}
@media (max-width:600px){
  .sh-page.clip .sh-more{display:none}
  .sh-tog{display:inline-block;margin:.2rem 0 .4rem;background:none;border:0;border-bottom:1px solid var(--pencil);padding:0 0 3px;cursor:pointer;
    font-family:var(--label);font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pencil)}
}

/* ==========================================================================
   v19 — louder, once. A heavy condensed grotesque (Archivo, SIL OFL) for the
   three biggest moments; red as a full room at the close.
   ========================================================================== */
@font-face{font-family:'Archivo X';src:url(../fonts/archivo-wdth.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{--shout:'Archivo X','Archivo Narrow','Arial Narrow',Impact,sans-serif}
.shout,.h-open .hx,.rooms .t,.close.red .finale{font-family:var(--shout);font-weight:900;font-stretch:62%;text-transform:uppercase;letter-spacing:-.005em;word-spacing:.04em}

/* opening: the blunt line, then the actor's line */
.h-open h1{font-size:inherit;margin-top:2rem;letter-spacing:0}
.h-open .hx{display:block;font-size:clamp(64px,12.6vw,204px);line-height:.84;color:var(--paper)}
.h-open .hi{display:block;font-family:var(--text);font-style:italic;font-weight:400;font-size:clamp(40px,7.2vw,118px);line-height:1.02;letter-spacing:-.035em;color:var(--paper);margin-top:.12em}
@media (prefers-reduced-motion:no-preference){
  .h-open .hx,.h-open .hi{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .h-open .hi{animation-delay:.18s}
  @keyframes rise{from{opacity:0;transform:translateY(.25em)}to{opacity:1;transform:none}}
}

/* rooms: set like a fight card */
.rooms .t{font-size:clamp(44px,5.4vw,84px);line-height:.9;transition:transform .35s ease}
.rooms li:hover .t{transform:translateX(10px)}

/* the red room */
.close.red{background:var(--red);border-top:0;color:var(--paper)}
.close.red .slug{color:var(--paper);border-top-color:rgba(242,237,225,.45)}
.close.red h2{color:var(--paper)}
.close.red h2 em{color:var(--paper);opacity:.85}
.close.red .finale{font-size:clamp(84px,15.5vw,250px);line-height:.84;margin:2rem 0 2.8rem;color:var(--paper);white-space:normal}
.close.red .finale .p{color:var(--ink)}
.btn-ink,.close.red a.btn[href^="mailto:"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover,.close.red a.btn[href^="mailto:"]:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.close.red + footer{border-top:0}
@media (max-width:600px){ .h-open .hx{font-size:clamp(56px,17vw,80px)} .h-open .hi{font-size:clamp(36px,10.4vw,52px)} }
/* v19 fit: keep the loud lines whole */
.rooms li{grid-template-columns:5.5rem minmax(0,30rem) minmax(0,1fr) 7rem}
.rooms .t{font-size:clamp(40px,4.6vw,70px);white-space:nowrap}
.close.red .finale{font-size:clamp(64px,10.6vw,164px);white-space:nowrap}
@media (max-width:1024px){.rooms li{grid-template-columns:4rem 1fr}.rooms .t{white-space:normal}}
@media (max-width:600px){.close.red .finale{font-size:clamp(56px,19vw,96px);white-space:normal}}

/* ==========================================================================
   v20 — back to Caslon for the big lines; a real conversation in the opening.
   ========================================================================== */
.h-open .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,4vw,64px);align-items:end}
.h-open .kick{grid-column:1/-1}
.h-open h1{grid-column:1;font-family:var(--display);font-weight:400;font-size:clamp(50px,6.9vw,112px);line-height:.94;letter-spacing:-.028em;margin:1.8rem 0 0 -.03em;color:var(--paper);text-transform:none}
.h-open h1 em{font-family:var(--text);font-style:italic;letter-spacing:-.04em}
.h-photo{grid-column:2;margin:0;align-self:end}
.h-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.h-open .h-row{grid-column:1/-1}
@media (prefers-reduced-motion:no-preference){
  .h-open h1,.h-photo{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .h-photo{animation-delay:.15s}
}
.rooms .t{font-family:var(--display);font-weight:400;font-stretch:normal;text-transform:none;letter-spacing:-.01em;font-size:clamp(36px,4vw,58px);line-height:1}
.close.red.caslon .finale{font-family:var(--display);font-weight:400;font-stretch:normal;text-transform:none;letter-spacing:-.035em;font-size:clamp(72px,12.5vw,200px);line-height:.9}
.close.red.caslon .finale .p{color:var(--ink)}
@media (max-width:1024px){
  .h-open .wrap{grid-template-columns:1fr}
  .h-photo{grid-column:1;margin-top:2.4rem}
}
@media (max-width:600px){.h-open h1{font-size:clamp(46px,13vw,64px)}.close.red.caslon .finale{font-size:clamp(56px,17vw,90px)}}
.h-open .wrap{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.h-open h1{font-size:clamp(46px,6.3vw,98px)}
.h-open h1 .ln{display:block;white-space:nowrap}
@media (max-width:600px){.h-open h1 .ln{white-space:normal}}
.h-set{margin:2.6rem 0 0}
.h-set img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;object-position:50% 30%}
.h-set figcaption,.field2 figcaption{margin-top:.7rem;font-family:var(--label);font-size:12px;color:var(--soft)}
.field2{margin:3rem 0 0}
.field2 img{display:block;width:100%;height:auto}
.paper .field2 figcaption{color:var(--ash)}
.h-photo figcaption{margin-top:.7rem;font-family:var(--label);font-size:12px;line-height:1.5;color:var(--soft)}
/* v20 teaser trims */
.h-map .step{padding-bottom:1.2rem}
@media (min-width:1025px){.h-proof .h-ph{min-height:520px}}

/* homepage rhythm: tighter between sections, so it reads as a front page, not a scroll */
body.home .sec{padding:clamp(72px,7vw,108px) 0}
body.home .close{padding:clamp(80px,8vw,120px) 0 clamp(72px,7vw,104px)}
.sh-page.clip .sh-more{display:none}
.sh-tog{display:inline-block;margin:.2rem 0 .4rem;background:none;border:0;border-bottom:1px solid var(--pencil);padding:0 0 3px;cursor:pointer;
  font-family:var(--label);font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pencil)}
.h-desk{margin:2.4rem 0 .4rem}
.h-desk img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:60% 28%}
/* v21 calmer opening: headline + one short paragraph + one button, beside the photo */
.h-open .wrap{grid-template-rows:auto auto auto;align-items:start}
.h-open h1{grid-column:1;grid-row:2}
.h-photo{grid-column:2;grid-row:2/4;align-self:center;margin-top:1.8rem}
.h-open .h-row{grid-column:1;grid-row:3;display:block;margin-top:clamp(28px,3vw,44px);max-width:34rem}
@media (max-width:1024px){
  .h-photo{grid-column:1;grid-row:auto;margin-top:2.4rem}
  .h-open h1,.h-open .h-row{grid-row:auto}
}
@media (max-width:1024px){ .h-open .wrap{grid-template-columns:minmax(0,1fr)} .h-open .h-row{max-width:none} }

/* ==========================================================================
   v21 — the front door: the photograph is the entrance
   ========================================================================== */
.h-door{position:relative;margin-top:61px;height:calc(100vh - 61px);min-height:560px;max-height:1000px;overflow:hidden;background:var(--ink)}
.door-ph,.door-ph img{position:absolute;inset:0;width:100%;height:100%}
.door-ph img{object-fit:cover;object-position:50% 38%}
.door-ph::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 30% 40% at 44% 38%,rgba(17,16,9,.62),rgba(17,16,9,0) 100%),
             linear-gradient(to bottom,rgba(17,16,9,.35) 0%,rgba(17,16,9,0) 22%,rgba(17,16,9,0) 70%,var(--ink) 100%)}
.door-tx{position:absolute;left:44%;top:15%;transform:translateX(-50%);width:min(40vw,600px);text-align:center;z-index:2}
.door-tx .kick{color:var(--paper);opacity:.8;margin-bottom:1.4rem}
.door-tx h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,4.1vw,76px);line-height:.98;letter-spacing:-.025em;color:var(--paper);text-shadow:0 2px 24px rgba(0,0,0,.45)}
.door-tx h1 em{font-family:var(--text);font-style:italic;letter-spacing:-.04em}
@media (prefers-reduced-motion:no-preference){.door-tx{animation:fadeup 1s .2s cubic-bezier(.2,.7,.2,1) both}
  @keyframes fadeup{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}}
.door-sub{padding:clamp(40px,4vw,64px) 0 clamp(64px,6vw,96px);text-align:center;border-bottom:1px solid var(--rule)}
.door-sub p{font-size:clamp(20px,1.7vw,24px);line-height:1.5;color:var(--soft);max-width:34rem;margin:0 auto 1.8rem}
.door-sub b{color:var(--paper);font-weight:400}
.h-who2{font-family:var(--label);font-weight:600;font-size:12.5px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)!important;line-height:1.6!important;margin-bottom:.8rem}
@media (max-width:760px){
  .h-door{height:auto;min-height:0;max-height:none}
  .door-ph,.door-ph img{position:static;height:auto}
  .door-ph img{aspect-ratio:3/2}
  .door-ph::after{display:none}
  .door-tx{position:static;transform:none;width:auto;text-align:left;padding:2rem 24px 0;animation:none}
  .door-tx h1{font-size:clamp(42px,12vw,58px);text-shadow:none}
  .door-sub{text-align:left;padding-top:1.4rem}
  .door-sub p{margin-left:0}
  .door-sub .btn{width:100%}
}
.rooms li{grid-template-columns:5.5rem minmax(0,24rem) minmax(0,1fr)}
@media (max-width:1024px){.rooms li{grid-template-columns:4rem 1fr}}
/* soft skills */
.door-sub{padding:clamp(28px,3vw,44px) 0 clamp(56px,5vw,80px)}
.soft h2{font-size:clamp(38px,4.6vw,68px);line-height:1.02;letter-spacing:-.02em}
.soft-list{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem 0;margin-top:2.2rem;max-width:46rem}
.soft-list li{font-family:var(--display);font-size:clamp(22px,2.1vw,30px);line-height:1.5;color:var(--paper)}
.soft-list li:not(:last-child)::after{content:"·";color:var(--soft);margin:0 .55em}
.soft-ai{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--rule);max-width:46rem;font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.soft-ai{font-family:var(--text);font-style:italic;font-weight:400;font-size:clamp(22px,2vw,28px);letter-spacing:0;text-transform:none;color:var(--paper)}

/* v23 — the author's portrait as the front door: headline sits in the open wall to his right (our left) */
.door-ph img{object-position:58% 30%}
.door-ph::after{background:radial-gradient(ellipse 34% 46% at 24% 40%,rgba(17,16,9,.66),rgba(17,16,9,0) 100%),
  linear-gradient(to bottom,rgba(17,16,9,.30) 0%,rgba(17,16,9,0) 22%,rgba(17,16,9,0) 70%,var(--ink) 100%)}
@media (min-width:761px){.door-tx{left:24%;width:min(38vw,560px)}}
@media (max-width:760px){.door-ph img{object-position:50% 50%}}

/* v24 — the pitch, compact: one line before, one line after (full markup lives on Approach) */
.ba1{margin:clamp(40px,4vw,60px) 0 0;max-width:46rem;border-top:2px solid var(--ink);padding-top:1.4rem}
.ba-l{font-family:var(--label);font-weight:800;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ash);margin-bottom:.6rem}
.ba-before{font-size:19px;line-height:1.6;color:#8A8475;margin-bottom:1.8rem}
.ba-before s{text-decoration-thickness:1.6px;text-decoration-color:var(--pencil)}
.ba-after{font-family:var(--display);font-size:clamp(28px,3vw,42px);line-height:1.08;color:var(--ink)}
.ba1 figcaption{margin-top:1.4rem;font-family:var(--label);font-size:12.5px;color:var(--ash)}
.ba1 figcaption a{color:var(--ink);border-bottom:1px solid currentColor;padding-bottom:2px;margin-left:.4rem}
#first-read{scroll-margin-top:90px}
/* v25 — "believe it." in gold, echoing the gold line at the close */
.door-tx h1 em.gold{color:var(--gold)}
/* v26 — the label's ampersand is the logo's ampersand: Caslon, red, a touch larger */
.amp-k{font-family:var(--text);font-weight:400;font-size:1.55em;line-height:0;letter-spacing:0;color:var(--red);vertical-align:-.08em;margin:0 .1em}

/* v28 — the Sports Illustrated quote sits inside the photograph */
.field.over{display:block;position:relative;overflow:hidden}
.field.over img{display:block;width:100%;height:auto}
.field.over::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(17,16,9,.86) 0%,rgba(17,16,9,.62) 34%,rgba(17,16,9,0) 60%)}
.field.over figcaption{position:absolute;z-index:1;left:clamp(20px,3.4vw,44px);bottom:clamp(20px,3.4vw,44px);width:42%}
.paper .field.over blockquote{color:var(--paper);font-size:clamp(17px,1.5vw,21px);line-height:1.45}
.paper .field.over .src{color:var(--beige);font-family:var(--label);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.paper .field.over .src em{font-style:normal}
@media (max-width:760px){
  .field.over::after{display:none}
  .field.over figcaption{position:static;width:auto;margin-top:1.2rem}
  .paper .field.over blockquote{color:var(--ink)}
  .paper .field.over .src{color:var(--ash)}
}

/* v29 — the label moves below the headline: lower right of the photo on desktop, after the headline on phones */
.door-kick{position:absolute;z-index:2;right:clamp(24px,5vw,80px);bottom:clamp(56px,9vh,110px);text-align:right;color:var(--paper);opacity:.85;line-height:1.75}
@media (max-width:760px){.door-kick{position:static;text-align:left;padding:1.4rem 24px 0;opacity:.8}}

/* v30 — the name signs the opening: wordmark over the label, lower right (one red ampersand, in the wordmark) */
.door-sign{position:absolute;z-index:2;right:clamp(24px,5vw,80px);bottom:clamp(56px,9vh,110px);text-align:right}
.door-sign .door-kick{position:static;margin-top:.7rem;padding:0}
.door-mark{font-family:var(--text);font-weight:700;font-size:clamp(24px,2.2vw,34px);line-height:1;letter-spacing:-.005em;color:var(--paper)}
.door-mark .a{color:var(--red);font-weight:400}
@media (max-width:760px){
  .door-sign{position:static;text-align:left;padding:1.4rem 24px 0}
  .door-mark{font-size:24px}
}
@media (max-width:760px){.door-mark{display:none}.door-sign .door-kick{margin-top:0}}