/* ============================================================
   MAGOS Consulting / home.html  (the default site)
   "The Dossier": a document like page. Bone and warm paper
   surfaces, brass hairlines, mono figures in ruled registers,
   Instrument Serif headings. Dark bands as punctuation.
   Teal is the only glowing colour and the only signal colour.

   No build step. One stylesheet. The page reads completely
   with JavaScript disabled; .no-js rules below cover that.
   ============================================================ */

/* ------------------------------------------------------------
   Metric matched fallbacks.

   The three webfonts come from Google Fonts with font-display:swap,
   so the first paint uses a local face. Measured on this page's own
   headings and paragraphs, Georgia sets them about 31% wider than
   Instrument Serif and Helvetica Neue about 1% wider than Instrument
   Sans, which changed how many lines each took: the page moved upward
   when the swap landed (CLS 0.086, the shift arriving after the
   visitor was already reading on a slow connection).

   These faces scale a local font to the webfont's own advance widths
   and line box, so the swap no longer reflows anything. Nothing is
   downloaded for them. If a visitor has none of the named local
   fonts the face simply does not load and the stack falls through to
   the generic family, which is the behaviour this page had before.
   ------------------------------------------------------------ */
@font-face{
  font-family:"Instrument Sans Local";
  src:local("Helvetica Neue"),local("Arial"),local("Roboto");
  font-weight:400 700;font-style:normal;font-display:swap;
  size-adjust:101.1%;ascent-override:95.9%;descent-override:24.7%;line-gap-override:0%;
}
@font-face{
  font-family:"Instrument Serif Local";
  src:local("Georgia"),local("Times New Roman");
  font-weight:400;font-style:normal;font-display:swap;
  size-adjust:76.1%;ascent-override:130.1%;descent-override:40.7%;line-gap-override:0%;
}
@font-face{
  font-family:"JetBrains Mono Local";
  /* Chromium matches a local face on its full name, WebKit on its family
     name, so both spellings of Menlo are listed before the cross platform
     monospaces. Menlo, Monaco and Courier New all set this page's strings
     within 0.4% of JetBrains Mono. */
  src:local("Menlo-Regular"),local("Menlo"),local("Consolas"),local("Courier New");
  font-weight:400 500;font-style:normal;font-display:swap;
  size-adjust:99.8%;ascent-override:102.2%;descent-override:30.1%;line-gap-override:0%;
}

:root{
  /* teal: the only glowing colour */
  --teal:#2FB5A5; --teal-300:#7FE0D2; --teal-100:#C9F5EE; --teal-700:#137F79; --teal-glow:#9FF2E8;
  /* a deepened teal-700 used wherever teal carries small text or
     sits behind light text, so every pairing clears AA 4.5:1 */
  --teal-ink:#0E6762;
  /* warm complements */
  --crimson:#B5281F; --crimson-700:#7A1812; --rust:#C8651F; --ochre:#D9913A;
  --brass:#C7A356; --brass-700:#8A6B2F;
  /* a deepened brass used for label text on light surfaces (AA) */
  --label:#5E4518;
  /* paper */
  --bone:#E8DCC0; --paper:#F2EADB;
  /* warm charcoal */
  --ink-950:#14100E; --ink-900:#1E1613; --ink-800:#2A201B; --smoke:#3E2F28;
  --text-100:#F2EADB; --text-300:#C9BBA7;

  --rule:rgba(138,107,47,.34);
  --rule-mid:rgba(138,107,47,.52);
  --rule-ink:rgba(20,16,14,.16);
  --ink-70:rgba(20,16,14,.74);
  --ink-55:rgba(20,16,14,.68);

  --wrap:1180px;
  --gut:clamp(20px,5vw,56px);
  --serif:"Instrument Serif","Instrument Serif Local",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Instrument Sans Local",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","JetBrains Mono Local",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
/* The anchor landing offset follows the header, which is one 67px row at
   every width once the section menu and the view switch collapse behind the
   Sections button. Without JavaScript both of those stand as extra rows, so
   the no-js offsets are measured separately: 198px at 390, 119px at 700.
   An anchor must never stop under the bar. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
.no-js{scroll-padding-top:206px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-950);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink-950)}
:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px;border-radius:2px}
::selection{background:var(--teal-100);color:var(--ink-950)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{
  position:absolute;left:var(--gut);top:-200px;z-index:60;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink-950);color:var(--paper);padding:12px 18px;text-decoration:none;
}
.skip:focus{top:10px;color:var(--paper)}

/* ---------- document shell ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

.paper{
  position:relative;
  background-color:var(--paper);
  background-image:url("../assets/texture-bone-ledger-paper-620.webp");
  background-size:620px;
  background-blend-mode:multiply;
}
.paper--bone{background-color:var(--bone);background-size:720px}
.paper::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(242,234,219,.82),rgba(242,234,219,.62) 16%,rgba(242,234,219,.62) 84%,rgba(242,234,219,.78));
}
.paper--bone::after{
  background:linear-gradient(180deg,rgba(232,220,192,.84),rgba(232,220,192,.64) 16%,rgba(232,220,192,.64) 84%,rgba(232,220,192,.80));
}
.paper > *{position:relative;z-index:1}

.dark{
  position:relative;
  background-color:var(--ink-950);
  color:var(--text-100);
}
.dark__grain{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("../assets/texture-brushed-charcoal-560.webp");
  background-size:560px;opacity:.09;mix-blend-mode:screen;
}
.dark__smoke{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("../assets/instrument-smoke-backdrop-1024.webp");
  background-size:cover;background-position:50% 0;opacity:.34;
}
.dark > .wrap{position:relative;z-index:2}
.dark a{color:var(--teal-300)}
.dark a:hover{color:var(--teal-100)}
.dark :focus-visible{outline-color:var(--teal-300)}

/* ---------- type primitives ---------- */
.lbl{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--label);margin:0;
}
.dark .lbl{color:var(--brass)}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;margin:0}
h1{font-size:clamp(2.3rem,5.1vw,4.05rem);line-height:1.04}
h2{font-size:clamp(1.8rem,3.3vw,2.75rem);line-height:1.1}
h3{font-size:1.3125rem;line-height:1.24}
p{margin:0 0 1em}
.lede{font-size:clamp(1.0625rem,1.45vw,1.25rem);line-height:1.56;color:var(--ink-70)}
.dark .lede{color:var(--text-300)}
.fine{font-size:.875rem;line-height:1.55;color:var(--ink-55)}
.dark .fine{color:var(--text-300)}
.mw46{max-width:46em}

/* ---------- top bar ---------- */
.bar{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule-mid);
}
.bar__in{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  min-height:66px;display:flex;align-items:center;gap:clamp(10px,2.4vw,34px);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink-950);flex:0 0 auto}
.brand img{width:30px;height:30px;border-radius:50%;border:1px solid var(--rule-mid)}
.brand__t{display:block}
.brand__n{
  display:block;font-family:var(--serif);font-size:1.3125rem;font-weight:400;
  letter-spacing:.055em;line-height:1;color:var(--ink-950);
}
.brand__s{
  display:block;font-family:var(--mono);font-size:.5938rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--label);margin-top:3px;
}

/* the section menu: a wrapping row by default (works with no JavaScript),
   a disclosure panel once the toggle button is live */
.bar__nav{display:flex;flex-wrap:wrap;gap:4px clamp(12px,1.8vw,24px);align-items:center}
.bar__nav a{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-70);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;
}
.bar__nav a:hover{color:var(--ink-950);border-bottom-color:var(--teal-ink)}
.bar__toggle{
  display:none;margin-left:auto;flex:0 0 auto;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-950);background:rgba(232,220,192,.7);
  border:1px solid var(--rule-mid);border-radius:0;padding:9px 12px;cursor:pointer;line-height:1;
  min-height:44px;
}
.bar__toggle:hover{background:var(--paper)}
.bar__bars{display:inline-block;width:9px;height:9px;margin-left:8px;position:relative;flex:0 0 auto}
.bar__bars::before,.bar__bars::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;
}
.bar__bars::before{top:2px}
.bar__bars::after{top:6px}
.bar__toggle[aria-expanded="true"] .bar__bars::before{top:4px}
.bar__toggle[aria-expanded="true"] .bar__bars::after{top:4px}

/* with JavaScript: below 900px the menu collapses behind the toggle */
@media (max-width:1079px){
  .js .bar__toggle{display:inline-flex}
  .js .bar__nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:1px solid var(--rule-mid);
    box-shadow:0 14px 28px rgba(20,16,14,.14);
    padding:8px var(--gut) 16px;gap:0;
  }
  .js .bar__nav.is-open{display:block}
  .js .bar__nav > a{display:block;padding:13px 0;border-bottom:1px solid var(--rule);font-size:.75rem}
  .js .bar__nav > a:last-of-type{border-bottom:0}
  .bar{position:sticky}
  .bar__in{position:relative;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .no-js .bar__nav{order:3;width:100%;padding-bottom:4px}
}

/* ---------- the view switch (main site / 3D journey) ---------- */
.vsw{
  display:flex;align-items:center;gap:0;
  border:1px solid var(--rule-mid);background:rgba(232,220,192,.7);
  flex:0 0 auto;
}
.vsw__k{
  font-family:var(--mono);font-size:.5938rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--label);padding:0 9px;border-right:1px solid var(--rule);
  align-self:stretch;display:flex;align-items:center;
}
.vsw__o{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  padding:9px 11px;text-decoration:none;color:var(--ink-70);white-space:nowrap;
  border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;min-height:44px;
}
.vsw__o:hover{color:var(--ink-950);background:rgba(47,181,165,.12)}
.vsw__o.is-on{
  color:var(--ink-950);background:var(--paper);
  border-bottom-color:var(--teal);font-weight:500;
}
.vsw__o::before{content:"";display:inline-block;flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:var(--rule-mid);margin-right:7px}
.vsw__o.is-on::before{background:var(--teal);box-shadow:0 0 7px var(--teal-glow)}
.vsw__o.is-last::before{background:var(--brass-700)}

/* The header below the desktop breakpoint, in two steps.
   560 to 899: brand, the section menu and the way across, all on one row,
   with the switch reduced to the option that does something (the visitor is
   already on the main site).
   Under 560: three controls will not sit on one row at 320 wide, so the
   switch takes a full row of its own, where it has the space to say what it
   is: View, Main site, 3D journey. */
@media (max-width:1023px){
  .bar .vsw__k{display:none}
  .bar .vsw__o{padding:9px 10px;font-size:.6563rem;letter-spacing:.04em}
  .bar .vsw__o::before{margin-right:6px}
}
@media (max-width:899px){
  /* the current view stays in the accessibility tree: it is the only thing
     that says which of the two views the visitor is reading */
  .bar__in > .vsw > .vsw__o.is-on{
    position:absolute;width:1px;height:1px;min-height:0;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .bar .vsw{margin-left:0}
  .bar .vsw__o::before{background:var(--teal);box-shadow:0 0 7px var(--teal-glow)}
  .bar .vsw__o.is-last::before{background:var(--brass-700);box-shadow:none}
}
@media (max-width:559px){
  .bar__in{flex-wrap:wrap}
  .bar__toggle{margin-left:auto}
  .bar__in > .vsw{order:3;width:100%;margin:0 0 2px}
  .bar__in > .vsw > .vsw__k{display:flex}
  .bar__in > .vsw > .vsw__o{flex:1 1 auto;justify-content:center;padding:10px 8px}
  /* with no JavaScript the switch keeps its own row here, so the current view
     is shown as well as announced */
  .bar__in > .vsw > .vsw__o.is-on{
    position:static;width:auto;height:auto;clip:auto;overflow:visible;
    display:inline-flex;min-height:44px;padding:10px 8px;border-bottom:2px solid var(--teal);
  }
  .bar__in > .vsw > .vsw__o.is-last::before{background:var(--brass-700);box-shadow:none}
}

/* The switch exists twice in the markup: once in the header row, once inside
   the Sections panel. Exactly one is ever displayed, and which one is settled
   by the class the inline script in <head> sets, so the header never changes
   height after the first paint. Below 900px with JavaScript the panel copy is
   the live one, which keeps the header to a single row and puts the default
   view's own navigation ahead of the alternate view. It carries the full
   label there: View, Main site, 3D journey. */
.bar__nav > .vsw{display:none}
@media (max-width:899px){
  .js .bar__in > .vsw{display:none}
  .js .bar__nav > .vsw{display:flex}
}
.bar__nav > .vsw{width:100%;margin:14px 0 2px}
.bar__nav > .vsw > .vsw__k{display:flex}
.bar__nav > .vsw > .vsw__o{flex:1 1 auto;justify-content:center;padding:10px 8px;font-size:.6875rem}
.bar__nav > .vsw > .vsw__o.is-on{
  position:static;width:auto;height:auto;clip:auto;overflow:visible;
  display:inline-flex;min-height:44px;border-bottom:2px solid var(--teal);
}
.bar__nav > .vsw > .vsw__o.is-on::before{background:var(--teal);box-shadow:0 0 7px var(--teal-glow)}
.bar__nav > .vsw > .vsw__o:not(.is-on)::before{background:var(--rule-mid);box-shadow:none}
.bar__nav > .vsw > .vsw__o.is-last::before{background:var(--brass-700);box-shadow:none}
@media (max-width:359px){
  .bar__in{gap:8px}
  .bar__toggle{padding-left:9px;padding-right:9px}
  .brand__n{font-size:1.1875rem}
  .brand img{width:26px;height:26px}
}

/* ---------- masthead ---------- */
.mast{padding:clamp(34px,5vw,58px) 0 clamp(40px,6vw,74px)}
.mast__rule{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  padding-bottom:12px;border-bottom:2px solid var(--ink-950);
}
.mast__rule .lbl{color:var(--ink-70)}
.mast__rule .lbl + .lbl{color:var(--label)}
.mast__rule-end{width:100%}
.mast__grid{display:grid;gap:clamp(28px,4vw,52px);padding-top:clamp(28px,4vw,46px)}
.mast__kicker{margin:0 0 18px}
h1 .glow{
  color:var(--teal-700);
  border-bottom:2px solid var(--teal);
  padding-bottom:2px;
}
.mast h1{margin-bottom:22px;max-width:19em}
.mast__sub{max-width:36em}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:26px 0 0}
.btn{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:14px 22px;border:1px solid var(--ink-950);
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  line-height:1;background:transparent;color:var(--ink-950);
  cursor:pointer;border-radius:0;text-align:center;
}
.btn--p{background:var(--teal-ink);border-color:var(--teal-ink);color:var(--paper)}
.btn--p:hover{background:var(--ink-950);border-color:var(--ink-950);color:var(--paper)}
.btn--g{background:transparent;color:var(--ink-950)}
.btn--g:hover{background:var(--ink-950);color:var(--paper)}
.dark .btn--g{border-color:var(--text-300);color:var(--text-100)}
.dark .btn--g:hover{background:var(--text-100);color:var(--ink-950)}

.plate{border:1px solid var(--rule-mid);padding:9px;background:rgba(232,220,192,.55)}
.plate img{filter:saturate(104%)}
.glance{margin:22px 0 0;border-top:1px solid var(--rule-mid)}
.glance > div{display:grid;gap:2px 16px;padding:11px 0;border-bottom:1px solid var(--rule)}
.glance dt{font-family:var(--mono);font-size:.6563rem;letter-spacing:.13em;text-transform:uppercase;color:var(--label)}
.glance dd{margin:0;font-size:.875rem;line-height:1.45;color:var(--ink-70)}
.plate figcaption{
  font-family:var(--mono);font-size:.6563rem;line-height:1.5;letter-spacing:.04em;
  color:var(--ink-55);margin-top:9px;padding-top:8px;border-top:1px solid var(--rule);
}

/* figure strip under the masthead */
.strip{
  margin-top:clamp(30px,4vw,48px);
  border-top:1px solid var(--rule-mid);border-bottom:1px solid var(--rule-mid);
  display:grid;gap:0;
}
.strip__c{padding:20px 0 18px;border-top:1px solid var(--rule)}
.strip__c:first-child{border-top:0}
.strip__f{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,2.5vw,1.95rem);line-height:1;color:var(--teal-ink);margin:0 0 8px;
}
.strip__t{margin:0;font-size:.9375rem;line-height:1.45;color:var(--ink-70);max-width:26em}
/* provenance under every figure on the first screen */
.strip__g{
  margin:9px 0 0;font-family:var(--mono);font-size:.6875rem;line-height:1.45;
  letter-spacing:.09em;text-transform:uppercase;color:var(--teal-ink);
  border-top:1px solid var(--rule);padding-top:8px;max-width:26em;
}
.strip__g--rep{color:var(--label)}
.strip__g--own{color:var(--ink-55)}

/* ---------- contents table ---------- */
.toc{padding:clamp(30px,4vw,44px) 0 clamp(34px,5vw,56px);border-top:1px solid var(--rule-mid)}
.toc__h{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-bottom:18px}
.toc__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.toc__list a{
  display:flex;gap:14px;align-items:baseline;padding:12px 2px;
  border-top:1px solid var(--rule);text-decoration:none;color:var(--ink-950);
}
.toc__list li:last-child a{border-bottom:1px solid var(--rule)}
.toc__list a:hover{background:rgba(47,181,165,.09)}
.toc__n{font-family:var(--mono);font-size:.6875rem;color:var(--label);letter-spacing:.08em;flex:0 0 auto}
.toc__t{font-family:var(--serif);font-size:1.1875rem;line-height:1.2}
.toc__d{margin-left:auto;font-size:.8125rem;color:var(--ink-55);text-align:right;display:none}

/* ---------- section scaffolding ---------- */
.sec{padding:clamp(52px,7vw,96px) 0}
.sec__head{margin-bottom:clamp(26px,3.4vw,44px)}
.sec__eyebrow{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  padding-bottom:10px;margin-bottom:20px;border-bottom:1px solid var(--ink-950);
}
.dark .sec__eyebrow{border-bottom-color:var(--text-300)}
.sec__eyebrow .lbl:last-child{margin-left:auto;text-align:right}
.sec h2{max-width:24em}
.dark .sec h2,.dark h2{color:var(--bone)}
.sec__head .lede{margin-top:16px;max-width:40em}

.cols{display:grid;gap:clamp(24px,3vw,44px)}

/* ---------- definition block ---------- */
.defn{
  border-left:2px solid var(--teal);padding:4px 0 4px 20px;margin:0 0 clamp(26px,3vw,38px);
  max-width:44em;
}
.defn p{font-family:var(--serif);font-size:clamp(1.5rem,2vw,1.55rem);line-height:1.34;margin:0}
.defn p em{font-style:italic;color:var(--teal-ink)}

.grid4{display:grid;gap:0;border-top:1px solid var(--rule-mid)}
.grid4 article{padding:22px 0 20px;border-bottom:1px solid var(--rule)}
.grid4 h3{margin-bottom:8px}
.grid4 p{margin:0;font-size:.9375rem;color:var(--ink-70)}
.grid4 .lbl{margin-bottom:10px}
/* one card: the rule above it and the rule below it stop at the same measure */
.grid4--one{border-top:1px solid var(--rule-mid);max-width:46em}

/* ---------- services as a ruled register ---------- */
.reg{border-top:1px solid var(--ink-950);margin:0}
.reg__row{
  display:grid;gap:6px 26px;padding:22px 0;border-bottom:1px solid var(--rule);
}
.reg__n{font-family:var(--mono);font-size:.6875rem;color:var(--label);letter-spacing:.1em;padding-top:5px}
.reg__b h3{margin-bottom:7px}
.reg__b p{margin:0;color:var(--ink-70);font-size:.9688rem;max-width:46em}
.reg__k{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.reg__k li{white-space:nowrap}
.reg__k li{
  font-family:var(--mono);font-size:.6563rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-55);border:1px solid var(--rule);padding:4px 8px;background:rgba(232,220,192,.5);
}

/* ---------- how we report value (the closing note of section 03) ---------- */
.led__note{
  margin-top:clamp(34px,4vw,52px);padding-top:24px;border-top:2px solid var(--ink-950);
  display:grid;gap:20px;align-items:start;
}
.led__seal{width:84px;height:84px;border-radius:50%;border:1px solid var(--rule-mid);flex:0 0 auto}
.led__note h3{margin-bottom:10px;font-size:1.25rem}
.led__layers{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.led__layers li{font-size:.9063rem;line-height:1.55;color:var(--ink-70);padding-left:16px;position:relative}
.led__layers li::before{content:"";position:absolute;left:0;top:.56em;width:4px;height:4px;background:var(--teal-ink)}
.led__layers b{color:var(--ink-950);font-weight:500}

/* ---------- engagement timeline ---------- */
.tl{border-top:1px solid var(--ink-950);margin:0 0 clamp(28px,3.4vw,40px)}
.tl__row{display:grid;gap:4px 26px;padding:20px 0;border-bottom:1px solid var(--rule)}
.tl__w{font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;color:var(--teal-ink);padding-top:3px}
.tl__b h3{margin-bottom:7px;font-size:1.25rem}
.tl__b p{margin:0;color:var(--ink-70);font-size:.9375rem;max-width:46em}
.own{display:grid;gap:0;border:1px solid var(--rule-mid);background:rgba(232,220,192,.5)}
.own__c{padding:16px 18px;border-top:1px solid var(--rule)}
.own__c:first-child{border-top:0}
.own__c .lbl{margin-bottom:6px}
.own__c p{margin:0;font-size:.9063rem;color:var(--ink-70)}
.own__bar{height:4px;background:var(--rule);margin-bottom:12px;position:relative;overflow:hidden}
.own__bar span{position:absolute;inset:0 auto 0 0;background:var(--teal);display:block}

.terms{list-style:none;margin:clamp(26px,3vw,36px) 0 0;padding:0;border-top:1px solid var(--rule-mid)}
.terms > div{padding:16px 0;border-bottom:1px solid var(--rule);display:grid;gap:4px 24px}
.terms dt{margin-bottom:2px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--label);font-weight:500}
.terms dd{margin:0}
.terms p{margin:0;font-size:.9375rem;color:var(--ink-70)}

/* ---------- tools ---------- */
.spec{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-mid)}
.spec > div{display:grid;gap:3px 22px;padding:14px 0;border-bottom:1px solid var(--rule)}
.spec dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--label)}
.spec dd{margin:0;font-size:.9375rem;color:var(--ink-70)}
.counts{display:grid;gap:0;border:1px solid var(--ink-950);background:rgba(232,220,192,.55)}
.counts div{padding:18px 20px;border-top:1px solid var(--rule)}
.counts div:first-child{border-top:0}
.counts b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:1.625rem;line-height:1;color:var(--teal-700);margin-bottom:7px;font-weight:400}
.counts span{font-size:.875rem;color:var(--ink-70)}
.counts__note{margin:14px 0 0;font-size:.875rem;line-height:1.5;color:var(--ink-70)}
.counts__fam{margin:14px 0 0}

/* ---------- principals ---------- */
.ppl{display:grid;gap:0;border-top:1px solid var(--ink-950)}
.ppl article{padding:26px 0 24px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column}
.ppl h3{font-size:1.5rem;margin-bottom:4px}
.ppl__role{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--label);margin:0 0 14px}
.ppl p{font-size:.9375rem;color:var(--ink-70);margin:0 0 .85em}
.ppl ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.ppl li{font-family:var(--mono);font-size:.8125rem;letter-spacing:.02em;color:var(--ink-70);
  padding-left:15px;position:relative;line-height:1.55}
.tag{
  display:inline-block;margin-top:3px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-ink);border:1px solid var(--rule-mid);padding:1px 6px;white-space:nowrap;
}
.tag--rep{color:var(--label)}
/* Each partner carries an emblem for the discipline they own rather than a
   portrait, drawn in the same grammar as the case study series. A set of
   initials on a dark square read as a missing photograph; an instrument reads
   as a choice. The monogram stays as a small mark in the corner. */
.ppl__plate{
  position:relative;margin:0 0 16px;width:100%;max-width:220px;
  border:1px solid var(--rule-mid);background-color:var(--ink-950);
}
.ppl__plate img{aspect-ratio:1;width:100%;object-fit:cover;display:block}
.ppl__plate figcaption{
  position:absolute;left:0;bottom:0;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  color:var(--bone);background:rgba(20,16,14,.74);
  padding:5px 9px 4px;border-top:1px solid var(--brass-700);border-right:1px solid var(--brass-700);
}
.ppl li::before{content:"";position:absolute;left:0;top:.6em;width:4px;height:4px;background:var(--teal-ink)}

/* ---------- sectors band (dark, narrow) ---------- */
.band{padding:clamp(40px,5vw,60px) 0}
.band h2{font-size:clamp(1.55rem,2.6vw,2.1rem);color:var(--bone);max-width:28em}
.band .lede{max-width:44em;margin-top:14px}
.sectors{list-style:none;margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--smoke);
  display:flex;flex-wrap:wrap;gap:6px 8px}
.sectors li{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-300);border:1px solid var(--smoke);padding:4px 9px;
}

/* ---------- questions ---------- */
.qa{margin:0;border-top:1px solid var(--ink-950)}
.qa__row{padding:22px 0;border-bottom:1px solid var(--rule);display:grid;gap:8px 30px}
.qa dt{font-family:var(--serif);font-size:1.25rem;line-height:1.26;margin:0}
.qa dd{margin:0;font-size:.9375rem;color:var(--ink-70);max-width:46em}

/* ---------- journey invitation ---------- */
.inv{
  margin:clamp(44px,6vw,72px) 0 0;border:1px solid var(--rule-mid);
  background:rgba(232,220,192,.6);padding:clamp(22px,3vw,34px);
  display:grid;gap:22px;align-items:center;
}
.inv h2{font-size:clamp(1.45rem,2.4vw,2rem);margin-bottom:10px}
.inv p{margin:0;font-size:.9688rem;color:var(--ink-70);max-width:40em}
.inv__side{display:grid;gap:12px;justify-items:start}
.inv p.inv__note{font-family:var(--mono);font-size:.6563rem;line-height:1.7;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-55);max-width:22em}

/* ---------- contact ---------- */
.asks{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.no-js .asks,.no-js .asks__lbl{display:none}
.asks button{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.05em;
  background:rgba(242,234,219,.8);border:1px solid var(--rule-mid);border-radius:0;
  color:var(--ink-950);padding:9px 12px;cursor:pointer;line-height:1.3;text-align:left;
  display:inline-flex;align-items:center;min-height:44px;
}
.asks button:hover{background:#fff;border-color:var(--teal-ink)}
.asks__lbl{margin:0 0 10px}

.form{display:grid;gap:0;border-top:1px solid var(--ink-950)}
.f{padding:16px 0;border-bottom:1px solid var(--rule)}
.f label{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--label);margin-bottom:8px}
.f input,.f select,.f textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink-950);
  background:rgba(255,255,255,.88);border:1px solid var(--brass-700);border-radius:0;
  padding:11px 12px;line-height:1.45;
}
/* Safari ignores padding on a default appearance select, which collapsed this
   control to 25px beside 47px inputs. The box no longer depends on padding. */
.f select{
  appearance:none;-webkit-appearance:none;min-height:46px;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2314100E' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:10px 6px;
}
.f textarea{resize:vertical;min-height:118px}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--teal-ink);outline-offset:0;background:#fff}
.send{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:20px 0 0;margin:0}
.btn:disabled,.btn[aria-disabled="true"]{
  background:rgba(20,16,14,.07);border-color:rgba(20,16,14,.42);color:var(--ink-55);
  cursor:not-allowed;
}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{background:rgba(20,16,14,.07);color:var(--ink-55)}
.btn[hidden]{display:none}
.send__note{margin:0;font-size:.8125rem;color:var(--ink-55);max-width:30em}
.reach{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-mid)}
.reach li{padding:14px 0;border-bottom:1px solid var(--rule)}
.reach .lbl{margin-bottom:5px}
.reach p{margin:0;font-size:.9375rem;color:var(--ink-70)}
[data-config-row][hidden]{display:none}

/* ---------- footer ---------- */
.foot{padding:clamp(40px,5vw,62px) 0 34px}
.foot__grid{display:grid;gap:28px;padding-bottom:28px;border-bottom:1px solid var(--smoke)}
.foot .brand{color:var(--text-100)}
.foot .brand img{border-color:var(--smoke)}
.foot .brand__n{color:var(--text-100)}
.foot .brand__s{color:var(--brass)}
.foot__tag{margin:14px 0 0;font-family:var(--serif);font-size:1.25rem;color:var(--bone);max-width:20em}
.foot__note{margin:0;font-size:.8438rem;color:var(--text-300);max-width:34em}
.foot__nav{list-style:none;margin:0;padding:0;display:grid;gap:0}
.foot__nav a{display:block;padding:12px 0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;text-decoration:none}
.foot__base{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;padding-top:22px}
.foot__base p{margin:0;font-family:var(--mono);font-size:.6563rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-300)}
.foot__journey{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--text-100);
  border:1px solid var(--brass-700);padding:11px 16px;background:rgba(42,32,27,.7);
}
.foot__journey:hover{background:var(--text-100);color:var(--ink-950);border-color:var(--text-100)}
.foot__journey::before{content:"";display:inline-block;flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 7px var(--teal-glow);margin-right:9px}

/* ============================ 560px ============================ */
@media (min-width:560px){
  .no-js{scroll-padding-top:128px}
  .strip{grid-template-columns:repeat(3,1fr);column-gap:clamp(18px,3vw,34px)}
  .strip__c{border-top:0;padding-right:14px}
  .strip__c + .strip__c{border-left:1px solid var(--rule);padding-left:clamp(18px,3vw,30px)}
  .reg__row{grid-template-columns:3.2rem 1fr}
  .reg__k{grid-column:2}
  .tl__row{grid-template-columns:10.5rem 1fr}
  .terms > div{grid-template-columns:11.5rem 1fr}
  .spec > div{grid-template-columns:10.5rem 1fr}
  .own{grid-template-columns:repeat(3,1fr)}
  .own__c{border-top:0}
  .own__c + .own__c{border-left:1px solid var(--rule)}
  .toc__d{display:block}
}

/* ==================== 560 to 899: counts side by side ==================== */
@media (min-width:560px) and (max-width:899px){
  .counts{grid-template-columns:repeat(2,1fr)}
  .counts div{border-top:0}
  .counts div + div{border-left:1px solid var(--rule)}
}

/* ============================ 900px ============================ */
@media (min-width:900px){
  .no-js{scroll-padding-top:90px}
  .bar__nav{margin-left:auto}
  .mast__rule-end{width:auto;margin-left:auto}
  .mast__grid{grid-template-columns:1.18fr .82fr;align-items:start}
  .glance > div{grid-template-columns:7rem 1fr}
  .mast h1{font-size:clamp(2.9rem,4.6vw,4.05rem)}
  .toc__list{grid-template-columns:1fr 1fr;column-gap:clamp(30px,4vw,60px)}
  .toc__list li:nth-last-child(2) a{border-bottom:1px solid var(--rule)}
  .cols--side{grid-template-columns:1.35fr .65fr}
  .cols--sideL{grid-template-columns:.65fr 1.35fr}
  .grid4{grid-template-columns:1fr 1fr;column-gap:clamp(26px,3.4vw,48px)}
  .reg__row{grid-template-columns:3.6rem 1fr minmax(10rem,13rem);column-gap:clamp(26px,3vw,40px)}
  .reg__k{grid-column:3;margin-top:4px;align-content:flex-start}
  .led__row{grid-template-columns:minmax(9.5rem,12rem) 1fr minmax(13rem,17rem)}
  .led__s{margin-top:0;padding-top:4px}
  .led__note{grid-template-columns:84px 1fr;column-gap:26px}
  .ppl{grid-template-columns:repeat(3,1fr);column-gap:clamp(24px,3.2vw,44px)}
  .ppl article{border-bottom:0}
  .ppl article + article{border-left:1px solid var(--rule);padding-left:clamp(24px,3.2vw,44px)}
  /* three columns read as one register: the roles reserve two lines so the
     bios start on the same line, and the credit lists sit on a common foot */
  .ppl__role{min-height:3.1em}
  .ppl ul{margin-top:auto;padding-top:12px}
  .qa__row{grid-template-columns:.78fr 1.22fr}
  .inv{grid-template-columns:1.3fr .7fr}
  .inv__side{justify-items:end;text-align:right}
  .foot__grid{grid-template-columns:1.1fr .9fr .6fr;gap:clamp(24px,3.4vw,52px)}
  .form{grid-template-columns:1fr 1fr;column-gap:clamp(22px,3vw,40px)}
  .f--full{grid-column:1 / -1}
  .f--send{grid-column:1 / -1;border-bottom:0}
}

/* ============================ 1440px ============================ */
@media (min-width:1440px){
  :root{--wrap:1280px}
  body{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* This page declares no transition, animation or @keyframes at all. If one
     is ever added, put its duration guard here. */
}

/* The owner's rule: the case studies, and everything else here, are not for
   printing or for saving as a PDF. The page cannot stop a screenshot, but it
   does not hand anyone a clean document either. Everything on screen stays
   readable; only the printed sheet is withheld. */
@media print{
  body > *{display:none !important}
  body::after{
    content:"MAGOS Consulting. This page is not available in print. Please read it at magos-consulting.vercel.app.";
    display:block;padding:24pt 0;font-family:Georgia,serif;font-size:12pt;line-height:1.5;color:#000;
  }
  body{background:#fff}
}

/* ============================================================
   CASE STUDIES (section 03)

   Four featured cases and four compact ones. The featured lead
   is a dark plate inside the paper section, which keeps the
   page's dark punctuation without a second full bleed band.
   Images are a commissioned series: one mechanism per case, the
   disordered state in rust on the left and the ordered state in
   teal on the right, the same grammar as the hero.
   ============================================================ */
.cases{display:grid;gap:clamp(44px,6vw,80px)}

/* ---- the shared parts of a case ---- */
.case__id{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  padding-bottom:9px;margin-bottom:16px;border-bottom:1px solid var(--rule-mid);
}
.case__sector{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal-ink);margin:0;
}
.case__when{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--label);margin:0 0 0 auto;
}
.case__who{font-size:.875rem;line-height:1.5;color:var(--ink-55);margin:0 0 18px;max-width:40em}
.case h3{margin-bottom:16px;max-width:17em}
.case__p{font-size:1rem;line-height:1.62;color:var(--ink-70);margin:0 0 .95em;max-width:38em}
.case__p:last-of-type{margin-bottom:0}

/* the figures: a ruled register, mono, tabular */
.case__res{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--ink-950)}
.case__res li{
  display:grid;gap:3px 22px;padding:13px 0;border-bottom:1px solid var(--rule);
  grid-template-columns:1fr;
}
.case__f{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.0625rem;line-height:1.32;
  color:var(--teal-ink);margin:0;
}
.case__w{font-size:.875rem;line-height:1.5;color:var(--ink-55);margin:0}

.case__tag{
  display:inline-block;margin:16px 0 0;
  font-family:var(--mono);font-size:.6563rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal-ink);border:1px solid var(--teal-ink);padding:5px 10px;
}
.case__tag--rep{color:var(--label);border-color:var(--rule-mid)}
.case__tag--idn{color:var(--ink-55);border-color:var(--rule-mid)}
.case__kept{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font-size:.875rem;line-height:1.55;color:var(--ink-55);max-width:42em;
}
.case__kept b{color:var(--ink-950);font-weight:500}

.case__fig{margin:0}
.case__fig img{width:100%;border:1px solid var(--rule-mid)}

/* ---- the lead case: a dark plate ---- */
.case--lead{
  background-color:var(--ink-950);
  background-image:url("../assets/texture-brushed-charcoal-560.webp");
  background-size:560px;background-blend-mode:soft-light;
  border:1px solid var(--smoke);
  padding:0 0 clamp(24px,3vw,40px);
}
/* the lead image is a banner, not a plate: a 3:2 render cropped to a letterbox
   so the case opens with the mechanism and the reader still sees the writing */
.case--lead .case__fig img{
  border:0;border-bottom:1px solid var(--smoke);
  aspect-ratio:2.5/1;object-fit:cover;object-position:center 52%;
}
@media (max-width:759px){.case--lead .case__fig img{aspect-ratio:16/10}}
.case--lead .case__in{padding:clamp(24px,3vw,40px) clamp(20px,3vw,40px) 0}
.case--lead h3{color:var(--bone);font-size:clamp(1.5rem,2.5vw,2.05rem)}
.case--lead .case__id{border-bottom-color:var(--smoke)}
.case--lead .case__sector{color:var(--teal-300)}
.case--lead .case__when{color:var(--brass)}
.case--lead .case__who,.case--lead .case__w,.case--lead .case__kept{color:var(--text-300)}
.case--lead .case__p{color:var(--text-100);opacity:.92}
.case--lead .case__res{border-top-color:var(--brass-700)}
.case--lead .case__res li{border-bottom-color:var(--smoke)}
.case--lead .case__f{color:var(--teal-300)}
.case--lead .case__tag{color:var(--teal-300);border-color:var(--teal-700)}
.case--lead .case__kept{border-top-color:var(--smoke)}
.case--lead .case__kept b{color:var(--bone)}

/* ---- compact cases ---- */
.ccards{display:grid;gap:clamp(30px,4vw,44px)}
.ccard .case__fig img{aspect-ratio:3/2;object-fit:cover}
.ccard .case__id{margin-top:16px}
.ccard h3{font-size:1.1875rem;margin:4px 0 12px;max-width:18em}
.ccard .case__res{margin-top:18px}
.ccard .case__f{font-size:.9375rem}

/* ---- the remaining record ---- */
.record{margin-top:clamp(40px,5vw,64px);padding-top:clamp(26px,3vw,36px);border-top:2px solid var(--ink-950)}
.record__h{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;margin-bottom:6px}
.record__l{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--rule-mid)}
.record__l li{display:grid;gap:2px 22px;padding:12px 0;border-bottom:1px solid var(--rule)}
.record__f{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1rem;
  color:var(--teal-ink);margin:0;
}
.record__w{font-size:.9375rem;line-height:1.5;color:var(--ink-70);margin:0}
.record__s{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--label);margin:0}

/* ---- the closing ask ---- */
.cases__ask{
  margin-top:clamp(34px,4vw,52px);padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--rule-mid);
  display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:space-between;
}
.cases__ask p{margin:0;max-width:34em;font-size:1.0625rem;line-height:1.5}

@media (min-width:760px){
  .case__res li{grid-template-columns:minmax(150px,.34fr) 1fr;align-items:baseline}
  .ccards{grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,52px)}
  .record__l li{grid-template-columns:minmax(130px,.22fr) 1fr minmax(180px,.3fr);align-items:baseline}
}
@media (min-width:980px){
  .case--lead .case__in{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,3.4vw,52px)}
  .case--lead .case__res{margin-top:0}
  /* featured cases alternate the image side */
  .case--f{
    display:grid;grid-template-columns:1.12fr .88fr;
    grid-template-areas:"txt fig" "txt side";
    grid-template-rows:auto 1fr;
    gap:clamp(22px,2.6vw,34px) clamp(28px,3.6vw,56px);align-items:start;
  }
  .case--f .case__fig{grid-area:fig}
  .case--f .case__txt{grid-area:txt}
  .case--f .case__side{grid-area:side}
  /* alternate the side the image sits on, so the set has a rhythm */
  .case--f:nth-of-type(odd){grid-template-columns:.88fr 1.12fr;grid-template-areas:"fig txt" "side txt"}
}

/* ---------- the entry point, ahead of the case book ----------
   Four of five buyers in the cold panel said the fixed scope discovery was
   the thing they would actually buy, and that the page buried it behind
   eight figure programs they would each have to defend to someone else. It
   now sits above the proof rather than after it. */
.start{
  border:1px solid var(--ink-950);background:rgba(242,234,219,.6);
  padding:clamp(20px,2.6vw,32px);margin:0 0 clamp(40px,5vw,66px);
}
.start__h{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;justify-content:space-between;
  padding-bottom:10px;margin-bottom:18px;border-bottom:1px solid var(--rule-mid);
}
.start__g{display:grid;gap:clamp(18px,2.4vw,34px)}
.start h3{margin-bottom:12px;max-width:16em}
.start__l{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.start__l li{
  font-size:.875rem;line-height:1.5;color:var(--ink-70);
  padding:10px 0 10px 16px;border-bottom:1px solid var(--rule);position:relative;
}
.start__l li::before{content:"";position:absolute;left:0;top:1.05em;width:4px;height:4px;background:var(--teal-ink)}
@media (min-width:860px){
  .start__g{grid-template-columns:1.06fr .94fr;align-items:start}
}