/* ==========================================================================
   Carbon Six — site.css
   Direction: "Specification". Light, precise, engineering-document feel,
   with carbon bands carrying the moments that need weight.
   ========================================================================== */

:root{
  /* ground + ink */
  --ground:      #F5F7F8;
  --sheet:       #FFFFFF;
  --ink:         #141E27;
  --ink-2:       #3C4B57;
  --muted:       #6B7A86;
  --rule:        #D9E1E6;
  --rule-soft:   #E9EEF1;

  /* brand */
  --accent:      #1B5578;   /* deepened Carbon Six blue — text, links */
  --accent-br:   #2E80B4;   /* the logo blue — marks, rules, hovers */
  --accent-wash: #E7F1F7;

  /* carbon bands */
  --carbon:      #10161B;
  --carbon-2:    #1A252E;
  --carbon-ink:  #E8EEF2;
  --carbon-mute: #93A5B1;
  --carbon-rule: #2A3944;

  /* thermal accent — used exactly twice on this page */
  --heat:        #C4531B;

  /* type */
  --sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --gut: clamp(20px, 5vw, 40px);
  --max: 1140px;
  --read: 62ch;

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{ max-width:100%; }
a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--accent-br); }
:focus-visible{ outline:2px solid var(--accent-br); outline-offset:3px; }

.shell{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.reading{ max-width:var(--read); }

/* -------------------------------------------------------------------------
   Shared type
   ---------------------------------------------------------------------- */
.label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}
.h2{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(23px,3vw,30px);
  letter-spacing:-.014em;
  line-height:1.16;
  margin:0;
  text-wrap:balance;
}

/* -------------------------------------------------------------------------
   Masthead
   ---------------------------------------------------------------------- */
.masthead{
  background:var(--carbon);
  border-bottom:1px solid var(--carbon-rule);
}
.masthead .shell{
  display:flex; align-items:center; gap:24px;
  min-height:74px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--carbon-ink);
  margin-right:auto;
}
.brand svg, .brand img{ width:30px; height:auto; display:block; }
.brand span{
  font-family:var(--sans); font-weight:600; font-size:16px;
  letter-spacing:.055em; text-transform:uppercase;
}
.nav{ display:flex; gap:26px; align-items:center; }
.nav a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em;
  color:var(--carbon-mute); text-decoration:none;
}
.nav a:hover, .nav a[aria-current="page"]{ color:var(--carbon-ink); }
.nav-toggle{
  display:none; background:none; border:1px solid var(--carbon-rule);
  color:var(--carbon-ink); font-family:var(--mono); font-size:12px;
  padding:7px 12px; cursor:pointer; letter-spacing:.08em;
}

/* -------------------------------------------------------------------------
   Hero — carbon band
   ---------------------------------------------------------------------- */
.hero{
  background:var(--carbon);
  color:var(--carbon-ink);
  padding-block:clamp(55px,8vw,99px) clamp(60px,8vw,104px);
  position:relative;
  overflow:hidden;
}
.hero::after{
  /* faint hex lattice, structural not decorative: the mark's own geometry */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='194' viewBox='0 0 112 194'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M56 0 L112 32.3 L112 96.9 L56 129.2 L0 96.9 L0 32.3 Z'/%3E%3Cpath d='M56 64.7 L112 97 L112 161.6 L56 193.9 L0 161.6 L0 97 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:112px 194px;
  opacity:.05;
}
.hero .shell{ position:relative; z-index:1; }
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(38px,6vw,74px);
  align-items:center;
}
.hero .eyebrow{
  font-family:var(--mono); font-size:17.25px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-br); margin:0 0 28px;
}
.hero h1{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(30px,4.3vw,47px); line-height:1.12;
  letter-spacing:-.025em; margin:0 0 26px; text-wrap:balance;
}
.hero h1 em{ font-style:normal; color:var(--accent-br); }
.hero .sub{
  margin:0; font-size:clamp(17px,1.7vw,19.5px);
  color:var(--carbon-mute); max-width:52ch;
}

/* portrait slot */
.portrait-fig{ margin:0; display:flex; flex-direction:column; gap:14px; }
.portrait-id{ display:flex; flex-direction:column; gap:4px; }
.portrait-id b{
  font-family:var(--sans); font-weight:600; font-size:17px;
  letter-spacing:-.012em; color:var(--carbon-ink);
}
.portrait-id span{
  font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--carbon-mute);
}
.portrait{
  aspect-ratio:4/5; width:100%;
  background:var(--carbon-2);
  border:1px solid var(--carbon-rule);
  margin:0; overflow:hidden;
  display:grid; place-items:center; text-align:center;
}
.portrait img{
  width:100%; height:100%; object-fit:cover; display:block;
  grid-area:1/1;
}
/* the placeholder state keeps its own inset */
.portrait .ph{ padding:20px; }
.portrait .ph{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--carbon-mute); line-height:1.9; margin:0;
}
.portrait .ph b{ color:var(--carbon-ink); font-weight:500; display:block; }

/* -------------------------------------------------------------------------
   Proof strip
   ---------------------------------------------------------------------- */
.proof{
  background:var(--sheet);
  border-bottom:1px solid var(--rule);
}
.proof-head{
  display:flex; flex-wrap:wrap; gap:6px 28px; align-items:baseline;
  padding:20px 0 14px;
  border-bottom:1px solid var(--rule-soft);
}
.proof-head .label{ margin:0; }
.proof-head .proof-exit{ margin-left:auto; color:var(--accent); }
.proof-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.proof-item{
  padding:26px 0 24px;
  border-left:1px solid var(--rule-soft);
  padding-inline:clamp(14px,2.4vw,28px);
}
.proof-item:first-child{ border-left:0; padding-inline-start:0; }
.proof-item .fig{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(24px,3.1vw,33px); letter-spacing:-.02em;
  line-height:1.05; color:var(--ink);
  font-variant-numeric:tabular-nums; display:block; margin-bottom:7px;
}
.proof-item .cap{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0; line-height:1.5;
}

/* -------------------------------------------------------------------------
   Generic light section
   ---------------------------------------------------------------------- */
.band{ padding-block:clamp(52px,7vw,86px); }
.band--sheet{ background:var(--sheet); border-block:1px solid var(--rule); }

.sec-head{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:30px; padding-bottom:12px;
  border-bottom:1px solid var(--rule);
}
.sec-head .label{ flex:none; }
.sec-head .h2{ margin-left:auto; text-align:right; }

/* through-line */
.throughline p{
  margin:0 0 20px; font-size:clamp(18px,1.9vw,20.5px); line-height:1.58;
  max-width:var(--read); color:var(--ink-2);
}
.throughline p:first-child{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(21px,2.5vw,27px); line-height:1.28;
  letter-spacing:-.014em; color:var(--ink); max-width:24ch;
}
.throughline p:last-child{ margin-bottom:0; }
.throughline strong{ color:var(--ink); font-weight:600; }

/* -------------------------------------------------------------------------
   Arenas
   ---------------------------------------------------------------------- */
.arenas{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--rule);
}
.arena{
  padding:28px clamp(18px,2.4vw,30px) 30px;
  border-inline-end:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule);
  display:flex; flex-direction:column; gap:10px;
}
.arena:nth-child(3n){ border-inline-end:0; }
.arena .idx{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--accent-br); font-variant-numeric:tabular-nums;
}
.arena h3{
  font-family:var(--sans); font-weight:600; font-size:18.5px;
  letter-spacing:-.01em; margin:0; line-height:1.22;
}
.arena p{ margin:0; font-size:16.5px; color:var(--ink-2); }
.arena p + p{ margin:12px 0 0; }
.arena .more{
  margin-top:auto; padding-top:14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.07em;
  text-transform:uppercase; text-decoration:none;
}
.arena .more::after{ content:" →"; }

@media (max-width:880px){
  .arenas{ grid-template-columns:1fr; }
  .arena{ border-inline-end:0; }
}

/* -------------------------------------------------------------------------
   F1 — carbon band, the one heat accent
   ---------------------------------------------------------------------- */
.f1{
  background:var(--carbon-2); color:var(--carbon-ink);
  padding-block:clamp(46px,6vw,74px);
  border-block:1px solid var(--carbon-rule);
}
.f1 .label{ color:var(--heat); margin-bottom:20px; }
.f1 blockquote{
  margin:0; font-family:var(--sans); font-weight:500;
  font-size:clamp(20px,2.7vw,29px); line-height:1.3;
  letter-spacing:-.017em; max-width:26ch; text-wrap:balance;
}
.f1 blockquote em{ font-style:normal; color:var(--heat); }
.f1 .attrib{
  margin:24px 0 0; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--carbon-mute);
}

/* -------------------------------------------------------------------------
   Credibility list
   ---------------------------------------------------------------------- */
.credits{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--rule);
}
.credit{
  flex:1 1 200px;
  padding:16px 20px 16px 0;
  border-bottom:1px solid var(--rule-soft);
  display:flex; flex-direction:column; gap:3px;
}
.credit .who{
  font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:-.005em;
}
.credit .what{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}

/* -------------------------------------------------------------------------
   Currently + contact
   ---------------------------------------------------------------------- */
.now-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px);
}
/* One column left in this section, so hold a readable measure. */
.now-grid--single{ grid-template-columns:minmax(0,72ch); }
.now-grid p{ margin:0 0 16px; color:var(--ink-2); }
.now-grid p:last-child{ margin-bottom:0; }
.now-grid h3{
  font-family:var(--sans); font-weight:600; font-size:19px;
  margin:0 0 12px; letter-spacing:-.01em;
}
.mailto{
  display:inline-block; margin-top:6px;
  font-family:var(--sans); font-weight:600;
  font-size:clamp(19px,2.3vw,25px); letter-spacing:-.015em;
  text-decoration:none; color:var(--accent);
  border-bottom:2px solid var(--accent-br); padding-bottom:2px;
}
.mailto:hover{ color:var(--accent-br); }

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */
.site-foot{
  background:var(--carbon); color:var(--carbon-mute);
  padding-block:34px 40px;
  border-top:1px solid var(--carbon-rule);
}
.foot-grid{
  display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center;
}
.foot-mark{ width:40px; height:auto; display:block; }
.foot-nav{ display:flex; flex-wrap:wrap; gap:22px; }
.foot-nav a{
  font-family:var(--mono); font-size:12px; color:var(--carbon-mute);
  text-decoration:none; letter-spacing:.05em;
}
.foot-nav a:hover{ color:var(--carbon-ink); }
.legal{
  font-family:var(--mono); font-size:11px; line-height:1.9;
  letter-spacing:.04em; margin:22px 0 0; color:#6C7E8B;
  width:100%;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:minmax(0,1fr) 250px; }

}
@media (max-width:820px){
  .proof-head .proof-exit{ margin-left:0; }
  .proof-grid{ grid-template-columns:1fr 1fr; }
  .proof-item:nth-child(3){ border-left:0; padding-inline-start:0; }
  .proof-item:nth-child(-n+2){ border-bottom:1px solid var(--rule-soft); }
  .now-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  body{ font-size:16.5px; }
  .nav{
    display:none; position:absolute; top:74px; left:0; right:0;
    background:var(--carbon); border-bottom:1px solid var(--carbon-rule);
    flex-direction:column; align-items:flex-start; gap:0; padding:6px 0 14px;
    z-index:20;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:11px var(--gut); width:100%; font-size:14px; }
  .nav-toggle{ display:block; }
  .masthead{ position:relative; }
  .hero-grid{ grid-template-columns:1fr; }
  .portrait-fig{ max-width:260px; order:-1; }
  .arenas{ grid-template-columns:1fr; }
  .arena{ border-inline-end:0; }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .sec-head .h2{ margin-left:0; text-align:left; }
}
@media (max-width:480px){
  .proof-grid{ grid-template-columns:1fr; }
  .proof-item{ border-left:0; padding-inline-start:0; border-bottom:1px solid var(--rule-soft); }
  .proof-item:last-child{ border-bottom:0; }
}

/* ==========================================================================
   Inner pages — added for /track-record/ and /about/
   ========================================================================== */
.page-head{
  background:var(--carbon);
  color:var(--carbon-ink);
  border-bottom:1px solid var(--carbon-rule);
  padding-block:clamp(44px,6vw,74px) clamp(40px,5vw,60px);
  position:relative;
  overflow:hidden;
}
.page-head::after{
  /* same hex lattice as the home hero, so every page opens the same way */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='194' viewBox='0 0 112 194'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M56 0 L112 32.3 L112 96.9 L56 129.2 L0 96.9 L0 32.3 Z'/%3E%3Cpath d='M56 64.7 L112 97 L112 161.6 L56 193.9 L0 161.6 L0 97 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:112px 194px;
  opacity:.05;
}
.page-head .shell{ position:relative; z-index:1; }
.page-head .label{
  margin-bottom:22px; color:var(--accent-br);
  font-size:17.25px; letter-spacing:.14em;
}
.page-head .label a{ color:inherit; text-decoration:none; }
.page-head .label a:hover{ color:var(--carbon-ink); }
.page-head h1{
  font-family:var(--sans); font-weight:700; color:var(--carbon-ink);
  font-size:clamp(30px,4.4vw,46px); line-height:1.06;
  letter-spacing:-.024em; margin:0 0 18px; text-wrap:balance; max-width:18ch;
}
.page-head .standfirst{
  margin:0; font-size:clamp(17.5px,1.9vw,20px);
  color:var(--carbon-mute); max-width:58ch;
}
/* stacked, one-claim-per-line headers and standfirsts */
.page-head h1 br + *, .page-head h1{ }
.page-head h1:has(br){ line-height:1.1; max-width:none; }
.page-head .standfirst:has(br){ line-height:1.5; max-width:66ch; }

/* discipline groups ------------------------------------------------------ */
.disc{ padding-block:clamp(44px,6vw,72px); }
.disc + .disc{ border-top:1px solid var(--rule); }
.disc--sheet{ background:var(--sheet); }
.disc-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:8px; }
.disc-head .idx{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  color:var(--accent-br); font-variant-numeric:tabular-nums;
}
.disc-head h2{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(23px,3vw,31px); letter-spacing:-.016em;
  margin:0; line-height:1.14; text-wrap:balance;
}
.disc-intro{
  margin:0 0 34px; color:var(--ink-2);
  font-size:clamp(17px,1.8vw,19px); max-width:var(--read);
}

/* one record entry ------------------------------------------------------- */
.rec{
  display:grid; grid-template-columns:172px minmax(0,1fr);
  gap:clamp(18px,3vw,40px);
  padding:24px 0;
  border-top:1px solid var(--rule-soft);
}
.rec:last-child{ border-bottom:1px solid var(--rule-soft); }
.rec-meta{ display:flex; flex-direction:column; gap:4px; }
.rec-meta .org{
  font-family:var(--sans); font-weight:600; font-size:16.5px;
  letter-spacing:-.008em; line-height:1.2;
}
.rec-meta .yr{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.07em;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.rec-meta .via{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-top:3px;
}
.rec-meta .via--own{ color:var(--muted); }
.rec-body h3{
  font-family:var(--sans); font-weight:600; font-size:17px;
  line-height:1.2; margin:0 0 8px; letter-spacing:-.008em; color:var(--accent);
}
.rec-body p{ margin:0 0 10px; font-size:16.5px; color:var(--ink-2); }
.rec-body p:last-child{ margin-bottom:0; }
.rec-body ul{ margin:0; padding-left:1.1em; }
.rec-body li{ margin-bottom:7px; font-size:16.5px; color:var(--ink-2); }
.rec-body li:last-child{ margin-bottom:0; }
.rec-body strong{ color:var(--ink); font-weight:600; }

/* pull quote / testimonial ---------------------------------------------- */
.pull{
  background:var(--accent-wash);
  border-left:3px solid var(--accent-br);
  padding:26px clamp(22px,3vw,34px);
  margin-top:38px;
}
.pull blockquote{
  margin:0; font-family:var(--sans); font-weight:500;
  font-size:clamp(18px,2.1vw,22px); line-height:1.36;
  letter-spacing:-.012em; color:var(--ink); max-width:44ch; text-wrap:balance;
}
.pull .src{
  margin:16px 0 0; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
}

/* about — narrative ------------------------------------------------------ */
.prose p{ margin:0 0 20px; font-size:clamp(17.5px,1.85vw,19.5px); color:var(--ink-2); max-width:var(--read); }
.prose p:last-child{ margin-bottom:0; }
.prose p.lead{
  font-family:var(--sans); font-weight:500; color:var(--ink);
  font-size:clamp(20px,2.4vw,26px); line-height:1.3; letter-spacing:-.014em; max-width:26ch;
}
.prose strong{ color:var(--ink); font-weight:600; }

/* timeline --------------------------------------------------------------- */
.tl{ border-top:1px solid var(--rule); }
.tl-row{
  display:grid; grid-template-columns:118px minmax(0,1fr);
  gap:clamp(16px,3vw,34px);
  padding:17px 0; border-bottom:1px solid var(--rule-soft);
  align-items:baseline;
}
.tl-row .yr{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.tl-row .what{ font-size:16.5px; color:var(--ink-2); }
.tl-row .what b{
  font-family:var(--sans); font-weight:600; color:var(--ink);
  font-size:16.5px; display:block; margin-bottom:2px; letter-spacing:-.005em;
}
.tl-row.is-key{ background:var(--accent-wash); }
.tl-row.is-key .yr, .tl-row.is-key .what b{ color:var(--accent); }
.tl-row.is-key{ padding-inline:14px; margin-inline:-14px; }
/* Outbound corroboration under the timeline. The bug keeps LinkedIn blue
   per their brand guidelines; the label stays muted so it reads as a note. */
.tl-verify{ margin:18px 0 0; }
.tl-verify a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.02em;
  color:var(--muted);
  text-decoration:none;
}
.tl-verify a svg{ flex:none; color:#0A66C2; }
.tl-verify a:hover{ color:var(--accent); }


/* credentials grid ------------------------------------------------------- */
.creds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0; border-top:1px solid var(--rule); }
.creds > div{
  padding:18px 22px 20px 0; border-bottom:1px solid var(--rule-soft);
  display:flex; flex-direction:column; gap:4px;
}
.creds .k{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.creds .v{ font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:-.005em; }
.creds .v small{ display:block; font-family:var(--serif); font-weight:400; font-size:15px; color:var(--ink-2); margin-top:3px; letter-spacing:0; }

@media (max-width:720px){
  .rec{ grid-template-columns:1fr; gap:10px; }
  .rec-meta{ flex-direction:row; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .tl-row{ grid-template-columns:1fr; gap:3px; }
  .disc-head{ flex-direction:column; gap:6px; }
}

/* ==========================================================================
   Advisory · Notes · Founder brief
   ========================================================================== */

/* engagement shapes ------------------------------------------------------ */
/* One row per engagement, read down the list. The title column is kept
   narrow so the body gets the width, which is what keeps each row short. */
.shapes{ border-top:1px solid var(--rule); }
.shape{
  display:grid; grid-template-columns:46px minmax(0,3fr) minmax(0,7fr);
  gap:clamp(16px,3vw,40px);
  padding:22px 0; border-bottom:1px solid var(--rule-soft);
}
.shape .idx{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  color:var(--accent-br); font-variant-numeric:tabular-nums; padding-top:4px;
}
.shape h3{
  font-family:var(--sans); font-weight:600; font-size:19px;
  margin:0 0 6px; letter-spacing:-.012em; line-height:1.2;
}
.shape .who{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0;
}
.shape p.body{ margin:0; font-size:16.5px; color:var(--ink-2); }
.shape p.body + p.body{ margin-top:10px; }
@media (max-width:720px){
  .shape{ grid-template-columns:1fr; gap:8px; }
  .shape .idx{ padding-top:0; }
}

.stance{
  background:var(--carbon); color:var(--carbon-ink);
  padding-block:clamp(40px,5.5vw,64px);
}
.stance p{
  margin:0; font-family:var(--sans); font-weight:500;
  font-size:clamp(20px,2.7vw,30px); line-height:1.28;
  letter-spacing:-.018em; max-width:24ch; text-wrap:balance;
}
.stance p em{ font-style:normal; color:var(--accent-br); }

/* numbered process ------------------------------------------------------- */
ol.steps{
  margin:0; padding:0; list-style:none; counter-reset:s;
  border-top:1px solid var(--rule);
}
ol.steps > li{
  counter-increment:s; display:grid; grid-template-columns:44px minmax(0,1fr);
  gap:18px; padding:16px 0; border-bottom:1px solid var(--rule-soft);
}
ol.steps > li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono); font-size:11.5px; color:var(--accent-br);
  padding-top:4px; font-variant-numeric:tabular-nums;
}
ol.steps p{ margin:0; font-size:16.5px; color:var(--ink-2); }
ol.steps b{ font-family:var(--sans); font-weight:600; color:var(--ink); }

/* notes index ------------------------------------------------------------ */
.notes-list{ border-top:1px solid var(--rule); }
.note-item{
  display:grid; grid-template-columns:132px minmax(0,1fr);
  gap:clamp(16px,3vw,36px);
  padding:26px 0; border-bottom:1px solid var(--rule-soft);
}
.note-item .meta{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--muted); line-height:1.8;
}
.note-item .meta b{ display:block; color:var(--accent); font-weight:500; }
.note-item h3{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(19px,2.2vw,23px); letter-spacing:-.015em;
  margin:0 0 8px; line-height:1.2; text-wrap:balance;
}
.note-item h3 a{ text-decoration:none; color:var(--ink); }
.note-item h3 a:hover{ color:var(--accent); }
.note-item p{ margin:0 0 12px; font-size:16.5px; color:var(--ink-2); max-width:58ch; }
.note-item .go{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.07em;
  text-transform:uppercase; text-decoration:none;
}
.note-item .go::after{ content:" →"; }
.note-item.is-soon h3 a{ pointer-events:none; color:var(--muted); }

/* long-form article ------------------------------------------------------ */
.article{ padding-block:clamp(40px,5.5vw,64px) clamp(52px,7vw,84px); }
.article .body{ max-width:66ch; }
.article .body > p{ margin:0 0 22px; font-size:clamp(17.5px,1.85vw,19.5px); color:var(--ink-2); }
.article .body > p.lead{
  font-family:var(--sans); font-weight:500; color:var(--ink);
  font-size:clamp(20px,2.4vw,25px); line-height:1.32; letter-spacing:-.014em;
  max-width:30ch; margin-bottom:28px;
}
.article .body h2{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(20px,2.3vw,25px); letter-spacing:-.015em;
  margin:44px 0 14px; line-height:1.2; text-wrap:balance;
}
.article .body h2:first-child{ margin-top:0; }
.article .body ul{ margin:0 0 22px; padding-left:1.15em; }
.article .body li{ margin-bottom:9px; font-size:17px; color:var(--ink-2); }
.article .body strong{ color:var(--ink); font-weight:600; }
/* Legal pages: a dated footnote under the last section. The generic
   .article .body > p rule out-specifies .label, so restate it here. */
.article .body > p.label{
  margin-top:40px;
  padding-top:16px;
  border-top:1px solid var(--rule-soft);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
}
.article .body blockquote{
  margin:28px 0; padding:0 0 0 22px; border-left:3px solid var(--accent-br);
  font-family:var(--sans); font-weight:500; font-size:clamp(18px,2vw,21px);
  line-height:1.34; letter-spacing:-.012em; color:var(--ink); max-width:40ch;
}
.byline{
  display:flex; flex-wrap:wrap; gap:6px 22px; margin:0 0 30px;
  padding-bottom:16px; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted);
}

@media (max-width:720px){
  .note-item{ grid-template-columns:1fr; gap:8px; }
  .note-item .meta{ display:flex; gap:14px; }
  .note-item .meta b{ display:inline; }
}

/* ==========================================================================
   Contact form
   ========================================================================== */
.form-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(30px,5vw,64px); align-items:start;
}
form.enquiry{ display:flex; flex-direction:column; gap:20px; max-width:34rem; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.field label .req{ color:var(--accent-br); }
.field input, .field textarea, .field select{
  font-family:var(--serif); font-size:16.5px; color:var(--ink);
  background:var(--sheet); border:1px solid var(--rule);
  padding:11px 13px; border-radius:0; width:100%;
}
.field textarea{ min-height:150px; resize:vertical; line-height:1.5; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:2px solid var(--accent-br); outline-offset:-1px; border-color:var(--accent-br);
}
.field .hint{ font-size:14.5px; color:var(--muted); margin:0; }
/* honeypot — must never be visible or focusable to a human */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
button.send{
  align-self:flex-start;
  font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:-.005em;
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  padding:13px 26px; cursor:pointer;
}
button.send:hover{ background:var(--accent-br); border-color:var(--accent-br); }
.form-note{
  font-family:var(--mono); font-size:11.5px; line-height:1.8;
  letter-spacing:.03em; color:var(--muted); margin:0;
}
.aside-card{
  background:var(--sheet); border:1px solid var(--rule); padding:24px;
  display:flex; flex-direction:column; gap:14px;
}
.aside-card h3{
  font-family:var(--sans); font-weight:600; font-size:16px;
  margin:0; letter-spacing:-.008em;
}
.aside-card p{ margin:0; font-size:16px; color:var(--ink-2); }
.aside-mark{ border-top:1px solid var(--rule-soft); padding-top:18px; }
.aside-mark img{ width:84px; height:auto; display:block; }
.aside-card .direct{
  font-family:var(--sans); font-weight:600; font-size:17px;
  text-decoration:none; color:var(--accent); word-break:break-all;
}
@media (max-width:820px){ .form-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Scope-vs-seats comparison
   ========================================================================== */
.compare{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--rule); background:var(--sheet);
  margin-top:36px; box-shadow:0 1px 2px rgba(20,30,39,.04);
}
.compare-col{ display:flex; flex-direction:column; }
.compare-col + .compare-col{ border-left:1px solid var(--rule); }
.compare-col > h3{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; margin:0;
  padding:16px clamp(18px,2.4vw,26px);
  border-bottom:1px solid var(--rule);
  color:var(--muted); background:var(--ground);
}
.compare-col--ours > h3{ color:var(--accent); background:var(--accent-wash); }
.compare-col ul{ list-style:none; margin:0; padding:0; }
.compare-col li{
  padding:14px clamp(18px,2.4vw,26px);
  border-bottom:1px solid var(--rule-soft);
  font-size:16px; color:var(--ink-2); line-height:1.5;
}
.compare-col li:last-child{ border-bottom:0; }
.compare-col--ours li{ color:var(--ink); }
@media (max-width:720px){
  .compare{ grid-template-columns:1fr; }
  .compare-col + .compare-col{ border-left:0; border-top:1px solid var(--rule); }
}

/* ==========================================================================
   Full-bleed photograph band
   ========================================================================== */
.shot{ margin:0; }
.shot img{ display:block; width:100%; height:auto; background:var(--carbon); }
.shot figcaption{
  padding:14px 0 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.07em;
  color:var(--muted); line-height:1.7;
}
.shot figcaption b{ color:var(--ink-2); font-weight:500; }
.shot-wrap{ background:var(--ground); padding-bottom:clamp(34px,4.5vw,52px); }

/* ==========================================================================
   Quote laid over a photograph
   ========================================================================== */
.shot-frame{ position:relative; }
.shot-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center;
  /* dark on the left where the track is, clearing to nothing over the figure */
  background:linear-gradient(90deg,
    rgba(10,16,21,.93) 0%,
    rgba(10,16,21,.86) 34%,
    rgba(10,16,21,.55) 56%,
    rgba(10,16,21,.10) 76%,
    rgba(10,16,21,0) 88%);
}
.shot-overlay .shell{ width:100%; }
.shot-overlay .label{ color:var(--accent-br); margin-bottom:clamp(10px,1.6vw,20px); }
.shot-overlay blockquote{
  margin:0; font-family:var(--sans); font-weight:500; color:var(--carbon-ink);
  font-size:clamp(15px,2.3vw,29px); line-height:1.28;
  letter-spacing:-.017em; max-width:26ch; text-wrap:balance;
}
.shot-overlay blockquote em{ font-style:normal; color:var(--accent-br); }
.shot-overlay .attrib{
  margin:clamp(14px,1.9vw,24px) 0 0;
  font-family:var(--mono); font-size:clamp(10px,.95vw,12px);
  letter-spacing:.11em; text-transform:uppercase; color:var(--carbon-mute);
}

/* too little image height on a phone — stack instead of overlaying */
@media (max-width:760px){
  .shot-overlay{
    position:static; background:var(--carbon);
    padding-block:26px 30px;
  }
  .shot-overlay blockquote{ font-size:19px; max-width:none; }
  .shot-overlay .attrib{ margin-top:16px; font-size:10.5px; }
}

/* contact form: error returned by send.php */
.form-error{
  margin:0 0 22px; max-width:34rem;
  background:var(--flag-wash, #FBF2E2);
  border:1px solid #E4CFA4; border-left:3px solid #9A6614;
  padding:13px 17px; font-size:16px; color:var(--ink-2);
}

/* About: the mark beside "Where the name comes from" ---------------------- */
.name-grid{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(170px,22vw,260px);
  gap:clamp(28px,5vw,72px); align-items:end;
}
/* Home: the same move, a size down, so About keeps the explained one. */
.name-grid--sm{ grid-template-columns:minmax(0,1fr) clamp(130px,16vw,190px); }
.name-mark{ margin:0; }
/* The artwork has a little air below the rings; drop it so the rings,
   not the image box, sit on the baseline of the last line. */
@media (min-width:721px){ .name-mark{ margin-bottom:-9px; } }
.name-mark img{ width:100%; height:auto; display:block; }
@media (max-width:720px){
  .name-grid{ grid-template-columns:1fr; }
  .name-mark{ max-width:150px; }
  .foot-nav{ margin-left:0; width:100%; gap:14px 20px; }
}