/* ============================================================
   compose.css — composure: frame, rhythm, measure
   29 Aug 2026

   Brief: "more sections, white space and elegance" — the
   qualities of the Watchtower site, not its skin. The palette,
   the faces and the ivory ground all stay exactly as they are.

   What was actually wrong, measured rather than guessed:

   1. THE FRAME WAS TOO WIDE. --max was 1560px. Nothing else in
      the design was built for a 1560px column, so lines ran long
      and the page read as sprawl rather than composure. The
      reference sits at 1280px. 1400 keeps this site's scale
      while pulling the edges in.

   2. THE RHYTHM WAS LUMPY, NOT GENEROUS. --bay was tied to vh
      (17vh), so section padding changed with window HEIGHT — a
      short laptop collapsed it to ~104px, a tall monitor blew it
      to 250px. Worse, adjacent sections were 3x apart: .thesis
      ran to 275px while .band sat at 86px. Air is only felt as
      elegance when it is even. Retied to vw and capped.

   3. ALMOST NOTHING HAD A MEASURE. Thirteen ch-caps on the whole
      homepage. Everything else ran the full container, which at
      1560px is well over 120 characters — roughly double what is
      comfortable. The single biggest lever here: a wide frame
      holding a NARROW column.

   4. THE LABEL RHYTHM WAS AD HOC. Every eyebrow sat a different
      distance from its heading. One interval, used everywhere,
      is most of what reads as "considered".

   Loaded last. Delete the <link> to revert entirely.
   ============================================================ */

/* ------------------------------------------------------------
   1 · FRAME
   ------------------------------------------------------------ */
:root{
  --max: 1400px;
  --gut: clamp(24px, 4.6vw, 76px);

  /* rhythm, tied to width not height, and capped */
  --bay:   clamp(92px, 9.2vw, 136px);   /* the default section */
  --bay-s: clamp(58px, 5.6vw, 82px);    /* evidence / marquee bands */
  --bay-l: clamp(116px, 12vw, 176px);   /* the two or three that carry weight */

  /* one interval, used everywhere */
  --step-label: 15px;   /* eyebrow  → heading */
  --step-lede:  24px;   /* heading  → lede     */
  --step-act:   42px;   /* lede     → action   */

  --hair: rgba(18,18,18,.085);
  --ease-c: cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------------------
   2 · RHYTHM
   Every section on one scale. The exceptions are deliberate and
   few: the two dark argument bands get --bay-l, the evidence
   band stays tight so it reads as a footnote, not a chapter.
   ------------------------------------------------------------ */
.thesis, .enq{ padding: var(--bay-l) 0; }
.adv, .shell, .index{ padding: var(--bay) 0; }
.between, .her{ padding: 0 0 var(--bay); }
.band{ padding: var(--bay-s) 0; }

/* inner pages inherit the same scale */
.sec, .phead, .rooms, .method-band, .closing, .sec.dark, .sec.plum, .sec.bone{
  padding-top: var(--bay);
  padding-bottom: var(--bay);
}
.phead{ padding-top: clamp(150px, 17vh, 210px); }

/* ------------------------------------------------------------
   3 · MEASURE
   A wide frame around a narrow column. Nothing runs the
   container. These caps are the difference between "airy" and
   "unfinished".
   ------------------------------------------------------------ */
.lede, .prose p, p.body, .thesis p, .shell p, .adv p,
.between p, .her p, .arrive .line, .cell p, .diag p{
  max-width: 64ch;
}
.lede, .arrive .line, .close .body{ max-width: 58ch; }
.thesis p, .enq p{ max-width: 54ch; }
.cell p, .oc p, .spec p, .expect p{ max-width: 42ch; }
.lw-note{ max-width: 62ch; }

/* headings break where they should, rather than where the
   container happens to end */
.thesis h2{ max-width: 15ch; }
.shell h2, .adv h2, .enq h2{ max-width: 17ch; }
.head-row h2{ max-width: 18ch; }
h2.display{ max-width: 19ch; }

/* ------------------------------------------------------------
   4 · THE LABEL → HEADING → LEDE INTERVAL
   One rhythm, applied everywhere, is most of what separates a
   considered page from a template.
   ------------------------------------------------------------ */
.label, .dn{
  display: block;
  margin-bottom: var(--step-label);
}
/* .band .meta carries the marquee and keeps its own larger drop */
.band .meta{ margin-bottom: clamp(30px,3.4vw,44px); }
.head-row h2 + p,
.phead h1 + .lede,
.lede{ margin-top: var(--step-lede); }
.cta-row, .acts, .btn-row{ margin-top: var(--step-act); }

/* the eyebrow itself, opened up. Note: NO padding-left here —
   that trick only applies to centred wide-tracked text, where the
   trailing letter-space pushes the line off-axis. On left-aligned
   labels it would break them off the margin instead. */
.label, .meta{
  letter-spacing: .28em;
  font-size: .68rem;
}
/* centred labels get the optical compensation */
.quote .label, .close .label, [style*="text-align:center"] > .label{
  padding-left: .28em;
}

/* ------------------------------------------------------------
   5 · WEIGHT
   Cormorant at 300 goes spindly between 2rem and 4rem — the
   sizes most headings actually sit at. It holds at 300 only
   when it is very large. Lift the middle of the scale to 400
   and leave the hero alone.
   ------------------------------------------------------------ */
.shell h2, .adv h2, .head-row h2, h2.display, .enq h2,
.mich h2, .between h2, .her h2, .cy, .rname, .ctitle{
  font-weight: 400;
  letter-spacing: -.018em;
}
.arrive h1, .thesis h2{ font-weight: 300; }   /* the very large ones stay light */

/* ------------------------------------------------------------
   6 · HAIRLINES
   Three weights were in play. One, used consistently, reads as
   a system; three read as accretion.
   ------------------------------------------------------------ */
.bordered, .bordered .cell, .grid-3 .cell, .drow, .arow, .stratum{
  border-color: var(--hair) !important;
}
/* the logo wall is deliberately unruled — see about.html */

/* single-pixel grid rules with no doubling — the gap IS the rule */
.grid-3.bordered{
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.grid-3.bordered .cell{ border: 0; background: var(--paper); }

/* ------------------------------------------------------------
   7 · RADIUS
   Nothing rounder than 3px. Soft corners at this scale read as
   software; sharp ones read as print.
   ------------------------------------------------------------ */
.btn, .field, input, textarea, select, .cell, .tile, .card, .spec, .diag{
  border-radius: 3px;
}

/* ------------------------------------------------------------
   8 · MOTION, RESTRAINED
   craft.css moved reveals 34px over 1.35s, which at this page
   length reads as a slideshow. A 14px rise over .55s is felt
   without being watched.
   ------------------------------------------------------------ */
.rv{
  transform: translateY(14px);
  transition: opacity .55s var(--ease-c), transform .55s var(--ease-c);
}
.rv.in{ transform: none; }
.rv.d1{ transition-delay: .05s }
.rv.d2{ transition-delay: .10s }
.rv.d3{ transition-delay: .15s }

@media (prefers-reduced-motion: reduce){
  .rv{ transform: none; transition: opacity .2s linear; }
}

/* ------------------------------------------------------------
   9 · MOBILE
   The reference gets MORE generous as it narrows, not less.
   ------------------------------------------------------------ */
@media (max-width: 760px){
  :root{ --gut: 24px; }
  .lede, .prose p, p.body, .arrive .line{ max-width: none; }
}

/* --- a11y pass 29 Aug: touch targets --- */
.nav .menu-btn{min-height:44px;min-width:44px;padding:14px 12px;margin:-14px 0;display:none}
@media(max-width:880px){.nav .menu-btn{display:block}}
@media(max-width:760px){
  .footer .col a,.footer .fine a{display:inline-block;padding:12px 0;margin:-6px 0}
  .nav-links.open a{padding:12px 0}
}
/* dark-section supporting copy: slight contrast lift */
.sec.dark p,.dark .cap{color:rgba(241,241,240,.82)}
/* archive teaser rows: non-interactive */
.row-soon{cursor:default}
.row-soon:hover{padding-left:0}
.soon{display:block;margin-top:6px;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted,#8a8378)}

/* --- campaign imagery bands (29 Aug) --- */
.imgband{height:clamp(300px,44vh,520px);background-size:cover;background-position:center;filter:grayscale(.25) contrast(1.04);}
.imgband.tall{height:clamp(340px,52vh,600px)}
.drow-private{cursor:default}
/* press: editorial archive covers */
body[data-page="press"] .media-grid{gap:clamp(42px,5vw,72px) clamp(24px,3vw,44px)}
body[data-page="press"] .mcard{padding:0;border:0}
body[data-page="press"] .mcard .thumb{display:block;aspect-ratio:4/3;margin-bottom:22px;background-size:cover;background-position:center;filter:none;border-radius:0;box-shadow:0 1px 0 rgba(250,250,249,.16);transition:transform .7s cubic-bezier(.16,.84,.28,1),filter .7s ease}
body[data-page="press"] .mcard:hover .thumb{transform:translateY(-6px);filter:brightness(1.04)}
body[data-page="press"] .mcard h3{max-width:17ch}
@media (prefers-reduced-motion:reduce){body[data-page="press"] .mcard:hover .thumb{transform:none}}

/* form feedback: designed states, not browser-default notices */
.form-note{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:16px;margin:22px 0 0;padding:18px 20px;background:var(--paper,#f2efe8);color:var(--ink,#121212);border-left:2px solid var(--aubergine,#291a26);font-size:.86rem;line-height:1.55;text-align:left}
.form-note-icon{display:block;width:38px;height:38px;background:center/contain no-repeat}
.form-note.is-success .form-note-icon{background-image:url('img/ui/state-success.svg')}
.form-note.is-fallback .form-note-icon{background-image:url('img/ui/state-mail.svg')}
form[data-netlify] button[aria-busy="true"]{display:inline-flex;align-items:center;gap:10px;cursor:wait;opacity:.82}
form[data-netlify] button[aria-busy="true"]::before{content:"";width:17px;height:17px;background:url('img/ui/state-sending.svg') center/contain no-repeat;animation:mve-spin 1.1s linear infinite}
@keyframes mve-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){form[data-netlify] button[aria-busy="true"]::before{animation:none}}


/* ── Hero CTA hierarchy (index is self-styled: fully specify) ── */
.arrive .acts.acts-tiered{align-items:center}
.arrive .acts.acts-tiered a.btn{font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  padding:15px 28px;background:var(--espresso);color:var(--paper);border:1px solid var(--espresso);
  border-radius:1px;transition:.25s}
.arrive .acts.acts-tiered a.btn:hover{background:transparent;color:var(--espresso);border-bottom-color:var(--espresso)}
.arrive .acts.acts-tiered a.quiet{border-bottom:1px solid var(--line);padding-bottom:8px}
.hero-diag{margin-top:20px;font-size:.85rem;color:var(--body,#333333)}
.hero-diag a{border-bottom:1px solid var(--stone)}

/* ── Fit band + What-I-build: index-native typography ───── */
.fitband,.sysbuild{padding:clamp(70px,10vh,120px) 0;border-top:1px solid var(--line);background:var(--paper)}
.fitband h2,.sysbuild h2{text-wrap:balance;font-family:var(--dsp);font-weight:300;font-size:clamp(2rem,4.6vw,3.7rem);line-height:1.08;letter-spacing:-.01em;max-width:24ch;margin:14px 0 0}
.fits{list-style:none;margin:34px 0 0;padding:0;columns:2;column-gap:64px;max-width:64rem}
.fits li{break-inside:avoid;padding:14px 0 14px 26px;position:relative;border-top:1px solid var(--line);font-size:.98rem;line-height:1.5}
.fits li::before{content:"—";position:absolute;left:0;color:var(--stone)}
@media(max-width:720px){.fits{columns:1}}

/* ── What I build · system map (artifact A3) ────────────── */
.sysmap-scroll{overflow-x:auto;margin-top:40px}
.sysmap{min-width:760px;width:100%;display:block;color:var(--ink)}
.sysmap-list{display:none;list-style:none;margin:34px 0 0;padding:0}
@media(max-width:720px){
  .sysbuild .sysmap-scroll{display:none}
  .sysmap-list{display:block}
  .sysmap-list li{padding:14px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:2.2em 1fr;gap:6px 10px;align-items:baseline}
  .sysmap-list li:nth-last-child(2){border-bottom:1px solid var(--line)}
  .sysmap-list .n{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;color:var(--stone)}
  .sysmap-list .l{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink)}
  .sysmap-list .a{grid-column:2;font-size:.9rem;font-style:italic;color:var(--body)}
  .sysmap-list .cap{margin-top:16px;font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--body);opacity:.75}
}
.sysmap .axis{stroke:currentColor;stroke-width:1}
.sysmap .node line{stroke:currentColor;stroke-width:1;opacity:.45}
.sysmap .node circle{fill:var(--paper);stroke:currentColor;stroke-width:1.2}
.sysmap .lbl{font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;fill:currentColor;font-weight:500}
.sysmap .ann{font-family:var(--sans);font-size:11.5px;fill:var(--body,#333333);font-style:italic;opacity:.8}
.sysmap .brace{fill:none;stroke:currentColor;stroke-width:.8;opacity:.5}
.sysmap .cap{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;fill:var(--body,#333333);opacity:.75}

/* ── Resilience for .rv (parity with .reveal failsafe) ──── */
@keyframes mve-rv-safety{to{opacity:1;transform:none}}
html.js .rv{animation:mve-rv-safety .8s ease 2.8s forwards}
@media (prefers-reduced-motion: reduce){html.js .rv{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}}

/* ---- full-screen menu, all widths (19 Sep 2026) ---------------------- */
.nav-in{gap:clamp(18px,3vw,44px)}
.nav-links{margin-left:auto}
.nav .menu-btn{display:inline-flex !important;margin:0;padding:10px 0 10px 14px;min-width:0;letter-spacing:.24em;font-size:.72rem;opacity:.9}
.nav .menu-btn:hover{opacity:1}
.nav .menu-btn::before{content:"";display:inline-block;width:16px;height:9px;margin-right:12px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.85}
.nav-links.open{display:none}
@media(max-width:880px){.nav-links{display:none}}
html.mvmenu-open{overflow:hidden}
.mvmenu{position:fixed;inset:0;z-index:400;background:#1A1A1A;color:#FAFAF9;visibility:hidden;transform:translateY(-100%);
  transition:transform .8s cubic-bezier(.77,0,.18,1),visibility 0s linear .8s;overflow:auto;-webkit-overflow-scrolling:touch}
.mvmenu.open{transform:none;visibility:visible;transition:transform .8s cubic-bezier(.77,0,.18,1),visibility 0s}
.mvmenu-in{min-height:100%;display:flex;flex-direction:column;padding:clamp(20px,2.4vw,30px) clamp(24px,6vw,90px) clamp(24px,3vw,40px)}
.mvmenu-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:clamp(24px,4vw,56px)}
.mvmenu-brand{font-family:var(--display);font-weight:300;font-size:1.05rem;letter-spacing:.32em;text-transform:uppercase;color:#FAFAF9;opacity:.9}
.mvmenu-x{background:none;border:0;color:#FAFAF9;font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;padding:10px 0;min-height:44px;opacity:.85}
.mvmenu-x:hover{opacity:1}
.mvmenu-x::after{content:"\2715";margin-left:12px;font-size:.9rem}
.mvmenu-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,100px);flex:1;align-content:center;padding:clamp(10px,2vw,30px) 0}
.mvmenu-primary{display:flex;flex-direction:column}
.mvmenu-primary a{font-family:var(--display);font-weight:200;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1.08;color:#FAFAF9;padding:clamp(8px,1vw,14px) 0;border-bottom:1px solid rgba(250,250,249,.14);
  opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,.61,.36,1),padding-left .5s ease}
.mvmenu-primary a:hover,.mvmenu-primary a[aria-current="page"]{padding-left:.3em}
.mvmenu-primary a[aria-current="page"]{color:#A3A3A1}
.mvmenu.open .mvmenu-primary a{opacity:1;transform:none}
.mvmenu.open .mvmenu-primary a:nth-child(1){transition-delay:.25s}
.mvmenu.open .mvmenu-primary a:nth-child(2){transition-delay:.32s}
.mvmenu.open .mvmenu-primary a:nth-child(3){transition-delay:.39s}
.mvmenu.open .mvmenu-primary a:nth-child(4){transition-delay:.46s}
.mvmenu.open .mvmenu-primary a:nth-child(5){transition-delay:.53s}
.mvmenu-groups{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,44px) clamp(24px,3vw,40px);align-self:center;
  opacity:0;transform:translateY(14px);transition:opacity .7s ease .5s,transform .8s cubic-bezier(.22,.61,.36,1) .5s}
.mvmenu.open .mvmenu-groups{opacity:1;transform:none}
.mvmenu-group b{display:block;font-family:var(--sans);font-weight:400;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:#A3A3A1;margin-bottom:12px}
.mvmenu-group a{display:block;font-family:var(--display);font-weight:300;font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.5;color:#FAFAF9;opacity:.86;transition:opacity .3s,padding-left .4s}
.mvmenu-group a:hover{opacity:1;padding-left:.25em}
.mvmenu-fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding-top:clamp(18px,3vw,36px);border-top:1px solid rgba(250,250,249,.14);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,250,249,.6)}
.mvmenu-fine a{color:#FAFAF9}
@media(max-width:880px){
  .mvmenu-grid{grid-template-columns:1fr;gap:clamp(28px,6vw,44px);align-content:start}
  .mvmenu-primary a{font-size:clamp(2rem,9vw,2.8rem)}
  .mvmenu-groups{grid-template-columns:1fr 1fr;gap:24px 20px}
  .mvmenu-group a{font-size:1.05rem}
}
@media(max-width:480px){.mvmenu-groups{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .mvmenu,.mvmenu.open,.mvmenu-primary a,.mvmenu-groups{transition:none}
  .mvmenu-primary a,.mvmenu-groups{opacity:1;transform:none}
}
/* footer, simplified: wordmark + fine print */
.footer{padding-top:clamp(40px,5vw,64px)}
.footer .wm-giant{margin-top:0;border-top:0;padding-top:0}

/* brand descriptor beside the monogram */
.nav .brandmark{gap:16px}
.nav .mark-desc{font-family:var(--sans);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--muted);border-left:1px solid var(--hair);padding-left:16px}
@media(max-width:600px){.nav .mark-desc{display:none}}

/* ---- dossier opening (Outpost pattern), 19 Sep 2026 ------------------ */
.dhead{padding:clamp(24px,3.6vw,52px) 0 0;overflow:hidden}
.dh-kicker{display:block;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(14px,1.6vw,22px)}
.dh-title{font-family:var(--display);font-weight:300;text-transform:uppercase;font-size:clamp(2.8rem,8.4vw,7.6rem);line-height:.92;letter-spacing:.005em;margin:0;max-width:100%;overflow-wrap:break-word;position:relative;z-index:1;color:var(--ink)}
.dh-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2vw,32px);margin-top:clamp(22px,2.6vw,40px);align-items:start}
.dh-grid.one{margin-top:clamp(18px,2vw,30px)}
.dh-hero{grid-column:6/13;aspect-ratio:4/3;background-size:cover;background-position:center;position:relative;z-index:2;border-radius:2px;filter:grayscale(.15) contrast(1.03)}
.dh-meta{grid-column:1/5;padding-top:clamp(40px,7vw,120px);display:grid;grid-template-columns:1fr 1fr;gap:26px 22px;align-content:start;position:relative;z-index:2}
.dh-meta b{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:8px}
.dh-meta span{display:block;font-size:.8rem;line-height:1.7;color:var(--ink)}
.dh-meta a{border-bottom:1px solid var(--hair)}
.dh-state{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2vw,32px);margin-top:clamp(48px,6vw,100px);padding-bottom:clamp(40px,5vw,80px);border-bottom:1px solid var(--hair)}
.dh-pull{grid-column:2/8;margin:0}
.dh-pull p{font-family:var(--display);font-weight:300;font-size:clamp(1.55rem,2.7vw,2.4rem);line-height:1.22;margin:0;color:var(--ink);text-wrap:balance}
.dh-pull cite{display:block;font-style:normal;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:18px}
.dh-body{grid-column:8/13;padding-top:6px}
.dh-body p{font-size:.9rem;line-height:1.75;color:var(--body,#333333);margin:0 0 22px;max-width:44ch}
.dh-body .btn{font-size:.66rem}
@media(max-width:900px){
  .dh-title{max-width:none;font-size:clamp(2.6rem,12vw,4.6rem)}
  .dh-grid{grid-template-columns:1fr;margin-top:clamp(18px,4vw,28px);gap:28px}
  .dh-hero{grid-column:auto;aspect-ratio:3/2}
  .dh-meta{grid-column:auto;padding-top:0;order:2}
  .dh-hero{order:1}
  .dh-state{grid-template-columns:1fr;gap:28px;margin-top:40px}
  .dh-pull,.dh-body{grid-column:auto}
}

/* --- dossier images: single aspect ratio, no crop -------------------- */
body[data-page="work"] .media-grid .mcard .thumb{aspect-ratio:3/2}
body[data-page="work"] .dh-hero{aspect-ratio:3/2}

/* --- sanitised document spread (services #sample) -------------------- */
.spread{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,34px);margin-top:clamp(30px,3.6vw,48px)}
.spread .pg{background:#fff;border:1px solid var(--hair);border-radius:2px;
  padding:clamp(28px,3vw,44px) clamp(26px,2.8vw,40px) clamp(32px,3.4vw,48px);
  box-shadow:0 1px 2px rgba(18,18,18,.03),0 12px 34px -22px rgba(18,18,18,.22);
  display:flex;flex-direction:column}
.pg-label{display:block;font-family:var(--sans);font-size:.54rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--stone,#A3A3A1);margin-bottom:clamp(22px,2.6vw,36px)}
.pg-kicker{display:block;font-family:var(--sans);font-size:.56rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.pg-line{font-family:var(--display);font-weight:300;font-size:clamp(1.05rem,1.5vw,1.36rem);
  line-height:1.38;color:var(--ink);margin:0 0 clamp(26px,2.8vw,38px);max-width:30ch}
.pg-note{display:block;font-family:var(--sans);font-size:.54rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone,#A3A3A1);margin:0 0 14px}
.pg-ev{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.pg-ev li{position:relative;padding-left:20px;font-size:.88rem;line-height:1.65;color:var(--body)}
.pg-ev li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--silver,#C8C8C6)}
.pg-seq{list-style:none;margin:0 0 clamp(28px,3vw,40px);padding:0;
  display:flex;flex-direction:column;gap:18px;counter-reset:s}
.pg-seq li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:0 14px;counter-increment:s}
.pg-seq li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:300;
  font-size:.8rem;color:var(--stone,#A3A3A1);line-height:1.6}
.pg-seq b{grid-column:2;font-family:var(--sans);font-weight:400;font-size:.56rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
.pg-seq span{grid-column:2;font-size:.88rem;line-height:1.62;color:var(--body)}
.pg-seq li:last-child span{color:var(--muted)}
.pg-move{font-size:.88rem;line-height:1.65;color:var(--body);margin:0;max-width:34ch}
@media(max-width:820px){ .spread{grid-template-columns:1fr} .spread .pg{min-height:0} }

/* --- services: the five engagements read as one sequence ------------- */
body[data-page="services"] #review,
body[data-page="services"] #focused,
body[data-page="services"] #strategic,
body[data-page="services"] #advisory,
body[data-page="services"] #embedded{
  padding-top:clamp(50px,5.4vw,82px);
  padding-bottom:clamp(50px,5.4vw,82px);
}
body[data-page="services"] #focused,
body[data-page="services"] #strategic,
body[data-page="services"] #advisory,
body[data-page="services"] #embedded{
  border-top:1px solid var(--line-fine,rgba(18,18,18,.08));
}

/* --- services: one dark close, continuous into the footer ------------ */
.svc-close{padding-bottom:clamp(64px,7vw,110px)}
.svc-close-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,90px);
  padding-bottom:clamp(44px,5vw,72px);border-bottom:1px solid var(--line-lt,rgba(250,250,249,.2))}
.svc-close-g p{margin:14px 0 0;max-width:42ch;font-size:.9rem;line-height:1.8}
.svc-close-g > div{display:flex;flex-direction:column}
.svc-close-g .go{margin-top:auto;padding-top:24px;display:inline-block;align-self:flex-start}
.svc-close-h{font-family:var(--display);font-weight:300;letter-spacing:-.025em;
  font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.02;
  margin:clamp(48px,5.6vw,82px) 0 clamp(30px,3.4vw,44px);max-width:20ch}
.svc-close .cta-row{margin:0}
@media(max-width:820px){ .svc-close-g{grid-template-columns:1fr;gap:34px} }

/* --- profile: the pull-quote band, light, a tonal step not a wall ---- */
.ab-quote{background:var(--paper-2,#F1F1F0)}
.ab-quote q{color:var(--ink)}
.ab-quote cite,.ab-quote .lux-caption{color:var(--muted)}
.ab-quote .testiline{color:var(--body)}

/* --- profile: one dark close, continuous into the footer ------------- */
.ab-close{padding-bottom:clamp(72px,8vw,124px)}
.ab-close h2{max-width:18ch;margin-inline:auto}

/* --- services: readable measure in the engagement body --------------- */
body[data-page="services"] .prod{grid-template-columns:.78fr 1.22fr}
body[data-page="services"] .prod .body p,
body[data-page="services"] .prod .body li{font-size:1rem;line-height:1.78;max-width:68ch}
body[data-page="services"] .prod .body p{margin:0 0 18px}
body[data-page="services"] .prod ul li{font-size:1rem;line-height:1.72;margin-bottom:9px}
@media(max-width:820px){ body[data-page="services"] .prod{grid-template-columns:1fr} }

/* --- field notes: a way onward at the end of a piece ----------------- */
.note-next{max-width:var(--measure,72ch);margin:0 auto clamp(46px,5.4vw,80px);
  padding-top:clamp(28px,3.2vw,44px);border-top:1px solid var(--line);text-align:left}
.note-next .label{display:block;margin-bottom:12px}
.note-next a{display:inline-block;font-family:var(--display);font-weight:300;
  letter-spacing:-.018em;font-size:clamp(1.25rem,2.4vw,1.85rem);line-height:1.2;
  color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:6px;
  transition:border-color .35s ease}
.note-next a:hover{border-bottom-color:var(--ink)}
.dark .note-next{border-top-color:var(--line-lt,rgba(250,250,249,.2))}
.dark .note-next a{color:var(--paper);border-bottom-color:var(--line-lt,rgba(250,250,249,.2))}


/* ── Enquiry: argument on the left, form on the right ──────────────────
   The old page opened with a six-field form and stacked five afterthoughts
   under the button, so proof sat below the ask where nobody reads it.     */
body[data-page="contact"] .enq-g{display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(34px,5.2vw,94px);align-items:start}
body[data-page="contact"] .enq-g .intake-form{margin:0;max-width:560px}
body[data-page="contact"] .enq-side .pg-seq{margin:clamp(20px,2.4vw,30px) 0 clamp(30px,3.4vw,44px)}
body[data-page="contact"] .enq-side .testiline{margin:0;max-width:34ch;font-size:1.06rem}
body[data-page="contact"] .enq-note{margin-top:clamp(26px,3vw,38px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line);font-size:.92rem;line-height:1.7;color:var(--muted);max-width:36ch}
body[data-page="contact"] .enq-form-h{font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1.2;letter-spacing:-.012em;
  color:var(--ink);margin:0 0 6px}
body[data-page="contact"] .enq-form-s{font-size:.92rem;color:var(--muted);margin:0 0 4px;max-width:44ch}
@media(max-width:880px){
  body[data-page="contact"] .enq-g{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
  body[data-page="contact"] .enq-g .intake-form{max-width:none}
}


/* ── The flagship reads as the flagship ────────────────────────────────
   Five engagements set out identically made the largest commitment look
   the same size as a two-week review. Strategic Build now sits on a
   tonal step, framed, with more air and a larger name. No new colour,
   no dark band: the page keeps its two-zone rhythm.                    */
body[data-page="services"] #strategic{
  background:var(--paper-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-top:clamp(66px,7.4vw,116px);
  padding-bottom:clamp(66px,7.4vw,116px);
}
body[data-page="services"] #strategic .head-row h2{
  font-size:clamp(2.2rem,4.6vw,3.7rem);
  line-height:1.04;
}
body[data-page="services"] #strategic .prod{
  background:var(--paper);
  border:1px solid var(--line);
  padding:clamp(26px,3.2vw,50px);
  margin-top:clamp(26px,3vw,44px);
  column-gap:clamp(30px,4vw,68px);
}
body[data-page="services"] #strategic .prod > div:first-child{
  align-self:start;
  position:sticky;
  top:calc(54px + clamp(24px,3vw,44px));   /* clears the sticky engagement nav */
}
body[data-page="services"] #strategic .prod .label{
  color:var(--ink);
}
body[data-page="services"] #strategic .prod h3{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.1rem,3.8vw,3.15rem);
  line-height:1.05;letter-spacing:-.018em;
  margin-top:6px;
}
body[data-page="services"] #strategic .prod .hook{
  font-size:clamp(1.02rem,1.3vw,1.2rem);
  line-height:1.5;max-width:30ch;margin-top:20px;
}
body[data-page="services"] #strategic .prod .bignum{
  display:none;                 /* the scale of the name carries the rank now */
}
body[data-page="services"] #strategic .buildmap-scroll{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(16px,2vw,26px) 0;
}
@media(max-width:860px){
  body[data-page="services"] #strategic .prod{padding:clamp(22px,4vw,30px)}
  body[data-page="services"] #strategic .prod .hook{max-width:none}
}

/* Anchor jumps from the engagement nav were landing under the sticky bar. */
body[data-page="services"] #review,
body[data-page="services"] #focused,
body[data-page="services"] #strategic,
body[data-page="services"] #advisory,
body[data-page="services"] #embedded{scroll-margin-top:62px}
@media(max-width:860px){
  body[data-page="services"] #strategic .prod > div:first-child{position:static}
}


/* ── One system, three layers ──────────────────────────────────────────
   Belief, practice, instrument. The relationship existed in one
   paragraph at the foot of shell-theory.html; it now appears where
   people actually decide.                                             */
.stack{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3.4vw,58px);margin-top:clamp(30px,3.6vw,52px);
  padding-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--line)}
.stack > div{min-width:0}
.stack p{font-size:.95rem;line-height:1.7;color:var(--body);margin:12px 0 0;max-width:34ch}
.stack p b{display:block;font-family:var(--display,var(--dsp,Georgia,serif));font-weight:300;
  font-size:clamp(1.12rem,1.5vw,1.34rem);line-height:1.25;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:6px}
.dark .stack,.sec.dark .stack{border-top-color:rgba(241,241,240,.22)}
.dark .stack p,.sec.dark .stack p{color:rgba(241,241,240,.72)}
.dark .stack p b,.sec.dark .stack p b{color:var(--paper-2)}
@media(max-width:820px){.stack{grid-template-columns:1fr;gap:26px}
  .stack p{max-width:none}}


/* ── One banner, every page ────────────────────────────────────────────
   The homepage runs a 1284px content column and inner pages run 1180px,
   so the same banner sat 52px further in on 32 of 33 pages. The nav bar
   now uses the homepage's measure everywhere. Body width is untouched. */
/* banner geometry now lives in assets/nav.css, the single source */


/* ── Field Note imagery ────────────────────────────────────────────────
   The four notes ran 500 to 900 words with no image at all, on a site
   where every other page is picture-led. Each note now opens with the
   image its index card uses, so the index and the article agree, and
   carries one numbered plate mid-argument in the Fig. device.         */
.note-hero{margin:0 0 clamp(30px,3.6vw,52px)}
.note-hero img{width:100%;height:auto;display:block;aspect-ratio:16/7;object-fit:cover;
  filter:grayscale(1) contrast(1.04)}
.note-hero figcaption{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:.92rem;color:var(--muted);margin-top:14px;line-height:1.5}

.note-plate{margin:clamp(40px,4.6vw,68px) 0;padding:clamp(18px,2.2vw,30px);
  border:1px solid var(--line);background:var(--paper-2)}
.note-plate img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;
  filter:grayscale(1) contrast(1.04)}
.note-plate figcaption{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:.94rem;line-height:1.55;color:var(--muted);margin-top:16px}
.note-plate figcaption span{font-style:normal;font-family:'Jost',var(--sans);
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
  margin-right:14px;white-space:nowrap}
@media(max-width:700px){
  .note-hero img{aspect-ratio:4/3}
  .note-plate{padding:14px}
}


/* ── Field Notes index ─────────────────────────────────────────────────
   Four notes in a three-column grid left an orphan on the second row,
   and the card images were the last warm ones on a monochrome site.   */
body[data-page="field-notes"] .media-grid{
  grid-template-columns:repeat(2,1fr);
  gap:clamp(40px,4.6vw,76px) clamp(28px,3.4vw,56px);
  max-width:1180px;
}
body[data-page="field-notes"] .mcard .thumb{
  aspect-ratio:16/10;
  filter:grayscale(1) contrast(1.05);
  transition:filter .5s var(--ease-c,ease), transform .6s var(--ease-c,ease);
}
body[data-page="field-notes"] .mcard:hover .thumb{filter:grayscale(1) contrast(1.12)}
body[data-page="field-notes"] .mcard h3{margin-top:14px}
body[data-page="field-notes"] .mcard .meta{letter-spacing:.2em}
@media(max-width:760px){
  body[data-page="field-notes"] .media-grid{grid-template-columns:1fr}
}

/* the plate now matches the hero's measure instead of running full bleed */
.note-plate{max-width:none}
body[data-page="note"] .note-plate,.note-plate{margin-left:0;margin-right:0}

/* ---- split page head: the note opens on its picture (22 Sep 2026) ------
   The image used to sit ~950px down the page, below the fold, so a note
   opened as a wall of type. It now sits beside the title. Greyscale is
   not decoration: every image on this site is greyscale and these photos
   carry a warm cast that would otherwise be the only beige on the site. */
.phs-img{display:flex;flex-direction:column}
.phs-img img{flex:1 1 auto;filter:grayscale(1) contrast(1.04)}
.phs-img figcaption{flex:0 0 auto;font-family:var(--display);font-style:italic;font-weight:300;
  font-size:.92rem;line-height:1.55;color:var(--muted);margin-top:14px}
@media(max-width:860px){.phs-img figcaption{margin-top:10px}}