/* New Way Capital Advisory — shared stylesheet.
   One identity across the site, the email and the deliverables.

   DIRECTION. Serif display, deep forest ground for the bands, gold as the only
   accent. No violet anywhere: the mark's old centre node read as a generic AI
   product, and the palette must not reintroduce it.

   CONTRAST. The earlier version was one white sheet with hairlines, which reads
   as a draft. A firm that asks a regulated buyer to trust a document needs the
   page to look decided: dark hero, dark closing band, dark footer, and light
   only where there is something to read. */

:root{
  --forest:#0A2B24;      /* the dark bands */
  --forest-2:#0d3a30;    /* one step up, for panels inside a band */
  --green:#0F6E56;
  --green-dk:#0b5642;
  --gold:#C69749;
  --gold-lt:#e0bd84;
  --paper:#ffffff;
  --ground:#f5f3ee;
  --tint:#faf9f6;
  --ink:#16211d;
  --mute:#5f6b66;
  --rule:#d9d5cc;
  --soft:#ece9e1;
  --red:#9c3028;
  --display:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:Inter,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:16.5px/1.75 var(--serif)}
a{color:var(--green)}
::selection{background:var(--gold);color:#fff}

/* ---------- shell ---------- */
.page{max-width:1080px;margin:0 auto;background:var(--paper);
      box-shadow:0 0 0 1px var(--rule)}
.inner{padding:0 64px}
.narrow{max-width:730px}

/* ---------- masthead ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:28px;
     padding:20px 64px;background:var(--paper);border-bottom:3px solid var(--forest);
     flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand img{width:38px;height:38px;display:block}
.brand .nm{font:600 15px/1.15 var(--display);letter-spacing:.4px;color:var(--forest)}
.brand .nm span{display:block;font:italic 11.5px/1.4 var(--sans);letter-spacing:0;
                color:var(--mute);margin-top:3px}
nav{display:flex;gap:30px;flex-wrap:wrap}
nav a{font:600 11px/1 var(--sans);letter-spacing:1.5px;text-transform:uppercase;
      color:var(--forest);text-decoration:none;padding-bottom:5px;
      border-bottom:2px solid transparent}
nav a:hover{border-bottom-color:var(--gold)}
nav a[aria-current]{border-bottom-color:var(--gold);color:var(--green)}

/* ---------- hero: the dark band ---------- */
.hero{background:var(--forest);color:#fff;padding:64px 64px 58px;
      border-bottom:5px solid var(--gold)}
.eyebrow{font:600 10.5px/1 var(--sans);letter-spacing:3px;text-transform:uppercase;
         color:var(--gold)}
.hero h1{font:600 50px/1.08 var(--display);color:#fff;margin:22px 0 0;
   letter-spacing:-.015em;text-wrap:balance;max-width:16ch}
.hero .lede{font:19px/1.62 var(--serif);color:#cfdcd7;margin:20px 0 0;max-width:58ch}
.hero .focus{font:italic 19px/1.4 var(--display);color:var(--gold-lt);margin-top:12px}
h1{font:600 44px/1.1 var(--display);margin:18px 0 0;letter-spacing:-.015em;
   text-wrap:balance}

/* ---------- type ---------- */
h2{font:600 27px/1.24 var(--display);color:var(--forest);margin:52px 0 14px;
   letter-spacing:-.008em;padding-top:16px;border-top:2px solid var(--gold);
   display:table}
h3{font:600 17px/1.4 var(--display);color:var(--forest);margin:26px 0 6px}
p{margin:0 0 16px}
ol,ul{margin:14px 0 18px;padding-left:24px}
li{margin-bottom:10px}
li::marker{color:var(--green)}
strong{color:var(--forest)}
.lede{font-size:18.5px;line-height:1.68;margin:16px 0 0;max-width:60ch}
.small{font:13px/1.65 var(--sans);color:var(--mute)}

/* ---------- practice cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
       gap:0;margin:34px 0 10px;border-top:2px solid var(--forest)}
.card{background:var(--paper);padding:30px 32px 28px;display:flex;flex-direction:column;
      border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.card:last-child{border-right:0}
.card .kicker{font:600 10px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;
              color:var(--gold);margin-bottom:12px}
.card h3{font-size:23px;margin:0 0 12px;line-height:1.22}
.card p{font:15.5px/1.66 var(--serif);color:var(--ink);margin-bottom:16px;flex:1}
.card .meta{font:12px/1.55 var(--sans);color:var(--mute);margin-bottom:18px;
            padding-top:14px;border-top:1px solid var(--soft)}
.card a.go{font:600 11px/1 var(--sans);letter-spacing:1.4px;text-transform:uppercase;
           color:var(--green);text-decoration:none;border-bottom:2px solid var(--gold);
           padding-bottom:5px;align-self:flex-start}
.card a.go:hover{color:var(--forest);border-bottom-color:var(--forest)}

/* ---------- figures ---------- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
      border:2px solid var(--forest);margin:20px 0 30px}
.fig{padding:22px 22px;border-right:1px solid var(--rule);
     font:12px/1.5 var(--sans);color:var(--mute)}
.fig:last-child{border-right:0}
.fig b{display:block;font:600 30px/1.05 var(--display);color:var(--forest);
       margin-bottom:7px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.fig.g b{color:var(--green)}

/* ---------- the closing dark band ---------- */
.band{background:var(--forest);color:#fff;padding:46px 64px 40px;margin:52px 0 0}
.band h2{color:#fff;border-top-color:var(--gold);margin-top:0}
.band p{color:#cfdcd7;max-width:62ch}
.band strong{color:#fff}
.band a{color:var(--gold-lt)}

/* ---------- rails and buttons ---------- */
.rail{border-left:4px solid var(--gold);background:var(--tint);padding:22px 28px;
      margin:22px 0 28px}
.rail p:last-child{margin:0}
.cta{display:inline-block;background:var(--forest);color:#fff;text-decoration:none;
     font:600 11.5px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;
     padding:17px 30px;margin:6px 10px 10px 0;border:2px solid var(--forest)}
.cta:hover{background:var(--green);border-color:var(--green)}
.cta.alt{background:transparent;color:var(--forest)}
.cta.alt:hover{background:var(--forest);color:#fff}
.band .cta{background:var(--gold);border-color:var(--gold);color:var(--forest)}
.band .cta:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.band .cta.alt{background:transparent;color:#fff;border-color:#5d7c73}
.band .cta.alt:hover{background:#fff;color:var(--forest);border-color:#fff}

/* ---------- tables ---------- */
.wrap{overflow-x:auto;margin:18px 0 28px}
table{border-collapse:collapse;width:100%;font:14px/1.55 var(--sans);min-width:520px}
th{font:600 10px/1 var(--sans);letter-spacing:1.4px;text-transform:uppercase;
   color:#fff;background:var(--forest);text-align:left;padding:11px 14px 11px 12px;
   white-space:nowrap}
td{padding:12px 14px 12px 12px;border-bottom:1px solid var(--soft);vertical-align:top}
tr:nth-child(even) td{background:var(--tint)}
td.r{font-weight:600;white-space:nowrap;color:var(--forest)}

/* ---------- footer ---------- */
.ft{padding:44px 64px 46px;background:var(--forest);color:#a8bcb5;
    font:12px/1.72 var(--sans);border-top:5px solid var(--gold)}
.ft a{color:#cfdcd7;text-decoration:none}
.ft a:hover{color:var(--gold-lt)}
.ft .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
          gap:30px;margin-bottom:30px}
.ft h4{font:600 10px/1 var(--sans);letter-spacing:1.8px;text-transform:uppercase;
       color:var(--gold);margin:0 0 12px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:8px}
.ft p{margin:0 0 10px;max-width:80ch;color:#8fa39c;font-size:11px;line-height:1.7}

/* ---------- pipeline diagram ----------
   Boxes and rules rather than an image: legible at any width, it prints, and
   the text stays selectable and searchable. */
.flow{margin:30px 0 34px}
.flow .row{display:flex;justify-content:center;align-items:stretch;gap:14px;flex-wrap:wrap}
.flow .node{background:var(--paper);border:2px solid var(--forest);padding:14px 22px;
  text-align:center;min-width:215px;max-width:430px}
.flow .node .lbl{font:600 10px/1 var(--sans);letter-spacing:1.9px;text-transform:uppercase;
  color:var(--forest)}
.flow .node .sub{font:13.5px/1.5 var(--sans);color:var(--mute);margin-top:7px}
.flow .node.src{border-color:var(--gold);background:var(--tint)}
.flow .node.src .lbl{color:#8a6a1f}
.flow .node.key{background:var(--forest);border-color:var(--forest)}
.flow .node.key .lbl{color:var(--gold);font-size:11px;letter-spacing:2.2px}
.flow .node.key .sub{color:#cfdcd7}
.flow .node.term{border-color:var(--rule);border-width:1px}
.flow .node.term .lbl{color:var(--green)}
.flow .arm{display:flex;align-items:center;justify-content:center;padding:0 4px;
  font:17px/1 var(--sans);color:var(--gold)}
.flow .down{display:block;width:2px;height:24px;background:var(--forest);margin:0 auto;
  position:relative}
.flow .down::after{content:"";position:absolute;left:-4px;bottom:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid var(--forest)}
.flow .states{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.flow .st{font:600 10px/1 var(--sans);letter-spacing:1px;text-transform:uppercase;
  padding:7px 12px;white-space:nowrap;border:1px solid}
.flow .st.a{background:#e9f3ef;color:var(--green);border-color:#9ac7b7}
.flow .st.e{background:#f0efeb;color:#5b6067;border-color:#cfcbc2}
.flow .st.u{background:#fbf1dd;color:#8a6a1f;border-color:#dfc48d}
.flow .split{display:flex;justify-content:center;max-width:520px;margin:0 auto}
.flow .split .stem{width:2px;background:var(--forest);height:14px}
.flow .fork{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:flex-start}
.flow .branch{display:flex;flex-direction:column;align-items:center}
.flow figcaption{font:13px/1.65 var(--sans);color:var(--mute);text-align:center;
  margin:18px auto 0;max-width:56ch;border-top:1px solid var(--rule);padding-top:14px}

@media(max-width:760px){
  .top,.hero,.inner,.ft,.band{padding-left:24px;padding-right:24px}
  .hero h1{font-size:33px;max-width:none}
  .hero{padding-top:42px;padding-bottom:38px}
  .hero .lede{font-size:17px}
  h2{font-size:23px}
  .card{border-right:0}
  .flow .node{min-width:0;width:100%;padding:12px 16px}
}
@media print{
  .hero,.band,.ft{background:#fff;color:#000;border-color:#000}
  .hero h1,.band h2{color:#000}
  .hero .lede,.band p{color:#333}
  th{background:#fff;color:#000;border-bottom:2px solid #000}
  nav{display:none}
}

/* ---------- interaction ----------
   Restrained on purpose: a compliance buyer reads this page, and movement that
   draws attention to itself reads as marketing. Everything here responds to a
   deliberate act - a hover, a click - and nothing moves on its own. */
:root{--ease:cubic-bezier(.22,.61,.36,1)}
a,.cta,.card,.issue,summary,nav a,.tool{transition:background-color .18s var(--ease),
  color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),
  box-shadow .18s var(--ease)}
html{scroll-behavior:smooth}
.top{position:sticky;top:0;z-index:20;
     box-shadow:0 1px 0 rgba(10,43,36,.06),0 6px 18px -14px rgba(10,43,36,.5)}
.card:hover{background:var(--tint)}
.card:hover a.go{color:var(--forest)}
tbody tr:hover td,table tr:hover td{background:#f0efe9}
.cta:active{transform:translateY(1px)}

/* asymmetric split, so a page stops reading as one column of newsletter text */
.split2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(230px,.95fr);
        gap:44px;align-items:start;margin:26px 0 8px}
.aside{border-top:2px solid var(--forest);padding-top:18px;
       font:13.5px/1.6 var(--sans);color:var(--mute);position:sticky;top:96px}
.aside h4{font:600 10px/1 var(--sans);letter-spacing:1.8px;text-transform:uppercase;
          color:var(--gold);margin:0 0 12px}
.aside dl{margin:0;display:grid;grid-template-columns:1fr;gap:12px}
.aside dt{font:600 13px/1.4 var(--display);color:var(--forest)}
.aside dd{margin:2px 0 0;font-size:13px}

/* accordions: the service catalogue is long, and a wall of bullets is the
   single thing that made this read as a newsletter */
details.acc{border-top:1px solid var(--rule);margin:0}
details.acc:last-of-type{border-bottom:1px solid var(--rule)}
details.acc summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font:600 17px/1.35 var(--display);color:var(--forest)}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease)}
details.acc[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details.acc summary:hover{color:var(--green)}
details.acc .acc-body{padding:0 0 20px;font:15.5px/1.7 var(--serif)}
details.acc .acc-body p:last-child{margin:0}
details.acc .tag{display:inline-block;font:600 9.5px/1 var(--sans);letter-spacing:1.3px;
  text-transform:uppercase;color:var(--mute);border:1px solid var(--rule);
  padding:5px 9px;margin:0 6px 6px 0}

/* live tools */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;
       margin:20px 0 28px}
.tool{display:block;text-decoration:none;border:2px solid var(--forest);padding:20px 22px;
      background:var(--paper)}
.tool:hover{background:var(--forest)}
.tool:hover .tl,.tool:hover .td{color:#fff}
.tool:hover .tk{color:var(--gold-lt)}
.tool .tk{font:600 9.5px/1 var(--sans);letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:9px}
.tool .tl{font:600 18px/1.25 var(--display);color:var(--forest);display:block}
.tool .td{font:13px/1.55 var(--sans);color:var(--mute);display:block;margin-top:7px}

/* publication archive */
.issues{border-top:2px solid var(--forest);margin:22px 0 10px}
.issue{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:20px;align-items:baseline;
  padding:18px 4px;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.issue:hover{background:var(--tint)}
.issue .no{font:600 12px/1.4 var(--sans);letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold);font-variant-numeric:tabular-nums}
.issue .ti{font:600 17.5px/1.36 var(--display);color:var(--forest)}
.issue:hover .ti{color:var(--green)}
.issue .dt{display:block;font:12px/1.5 var(--sans);color:var(--mute);margin-top:5px;
  font-variant-numeric:tabular-nums}
.issue .langs{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.issue .lg{font:600 10px/1 var(--sans);letter-spacing:.8px;text-transform:uppercase;
  border:1px solid var(--rule);color:var(--mute);padding:6px 8px;text-decoration:none;
  background:var(--paper)}
.issue .lg:hover{background:var(--forest);color:#fff;border-color:var(--forest)}

@media(max-width:860px){
  .split2{grid-template-columns:1fr;gap:26px}
  .aside{position:static}
  .issue{grid-template-columns:56px 1fr;gap:12px}
  .issue .langs{grid-column:2;justify-content:flex-start;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  a,.cta,.card,.issue,summary,nav a,.tool,details.acc summary::after{transition:none}
}

/* ============================================================================
   AGGRESSIVE PASS — full bleed, wider palette, much more air.

   WHAT WAS WRONG. Every section sat inside one bordered 1080px sheet with the
   same padding, two colours and a 730px text column. That is the anatomy of a
   report, and no amount of accent colour fixes it while the container stays.

   WHAT CHANGED. The sheet is gone: sections run edge to edge and alternate
   ground, so scrolling the page changes colour instead of continuing a
   document. Vertical rhythm roughly doubles. The type scale opens at the top
   and stays quiet in the body, so the page has somewhere to shout and somewhere
   to be read. Claret joins green and gold as the third house colour — it is in
   the house palette already and it does the work purple was doing badly.
   ========================================================================= */

:root{
  --bone:#F7F4ED;        /* warm ground, one step off white */
  --sage:#E3EBE6;        /* pale green band */
  --sage-dk:#cfdcd4;
  --claret:#8E2F26;      /* the house red, used sparingly and never for a link */
  --claret-lt:#b8503f;
  --measure:34ch;
  --pad:clamp(64px,8.5vw,116px);
}

/* ---- the sheet dissolves ---- */
body{background:var(--paper)}
.page{max-width:none;background:transparent;box-shadow:none}
/* The ground colour has to run edge to edge, so `.inner` is full width and the
   1200px column is made by the padding instead of by max-width. `100%` rather
   than `100vw` - the viewport unit includes the scrollbar and pushes the page
   sideways. */
.inner{max-width:none;margin:0;padding:var(--pad) max(24px,calc((100% - 1200px) / 2))}
.narrow{max-width:64ch}

/* ---- masthead sits on the page, not on a card ---- */
.top{padding:0;background:var(--paper);border-bottom:1px solid var(--rule);
     box-shadow:none;display:block}
.top::after{content:"";display:block}
.topin{max-width:1200px;margin:0 auto;padding:22px 48px;display:flex;
       align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.top:has(.topin){padding:0}

/* ---- hero: the loudest thing on the site ---- */
.hero{background:var(--forest);padding:clamp(80px,12vw,164px) 48px clamp(70px,10vw,140px);
      border-bottom:0;position:relative;overflow:hidden}
.hero>*{max-width:1200px;margin-left:auto;margin-right:auto;position:relative;z-index:1}
.hero::before{content:"";position:absolute;inset:auto -12% -55% auto;width:62vw;height:62vw;
  border-radius:50%;background:radial-gradient(circle at 30% 30%,#12463a 0%,transparent 62%);
  opacity:.85;pointer-events:none}
.hero .eyebrow{letter-spacing:3.4px;font-size:11px}
/* `.hero > *` centres each child in a 1200px column; without resetting the left
   margin the headline's own max-width re-centres it and it drifts out of line
   with the masthead above it. Align left, keep the column centred. */
.hero h1{font-size:clamp(2.9rem,7.2vw,5.6rem);line-height:1.02;letter-spacing:-.03em;
   margin:26px auto 0 0;max-width:15ch}
.hero .lede{font-size:clamp(17px,1.55vw,21px);line-height:1.58;color:#b9cec7;
   margin:30px auto 0 0;max-width:52ch}
.hero .focus{margin-left:0}
.hero .focus{font-size:clamp(18px,2vw,24px)}

/* ---- alternating grounds ---- */
.sec-bone{background:var(--bone)}
.sec-sage{background:var(--sage)}
.sec-forest{background:var(--forest);color:#fff}
.sec-forest h2{color:#fff;border-top-color:var(--gold)}
.sec-forest p,.sec-forest li{color:#c5d6d0}
.sec-forest strong{color:#fff}
.sec-rule{border-top:1px solid var(--rule)}

/* ---- type opens up ---- */
h2{font-size:clamp(1.65rem,3vw,2.4rem);margin:0 0 22px;padding-top:20px;
   border-top-width:3px;letter-spacing:-.015em}
.inner>.narrow>h2:first-child,.inner>h2:first-child{margin-top:0}
h3{font-size:19px;margin:34px 0 8px}
p{margin:0 0 20px}
.lede{font-size:clamp(17px,1.4vw,20px)}

/* ---- eyebrow above a section, replacing the report-style rule ---- */
.kick{font:600 10.5px/1 var(--sans);letter-spacing:3px;text-transform:uppercase;
      color:var(--claret);margin:0 0 14px}
.sec-forest .kick{color:var(--gold)}

/* ---- practice cards: bigger, airier, no grid hairlines ---- */
.cards{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:2px;
       margin:44px 0 0;border-top:0;background:transparent}
.card{border:0;padding:44px 44px 40px;background:var(--paper);
      box-shadow:0 0 0 1px var(--rule)}
.card:hover{background:var(--paper);transform:translateY(-3px);
            box-shadow:0 0 0 1px var(--forest),0 26px 44px -30px rgba(10,43,36,.55)}
.card h3{font-size:clamp(1.35rem,2.2vw,1.85rem);margin:0 0 16px}
.card p{font-size:16px;line-height:1.7}
.sec-bone .card{background:var(--paper)}

/* ---- statistics get to be large ---- */
.figs{border:0;gap:2px;background:transparent;margin:36px 0 0;
      grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fig{border:0;box-shadow:0 0 0 1px var(--rule);background:var(--paper);padding:30px 26px 26px}
.fig b{font-size:clamp(2.4rem,4.6vw,3.5rem);line-height:.98;margin-bottom:12px}
.sec-forest .fig{background:transparent;box-shadow:0 0 0 1px #24564a;color:#a8bcb5}
.sec-forest .fig b{color:#fff}
.sec-forest .fig.g b{color:var(--gold)}

/* ---- pull quote: the page needs one place that is not prose ---- */
.pull{margin:48px 0;padding:0 0 0 34px;border-left:5px solid var(--claret);
      font:600 clamp(1.3rem,2.6vw,2rem)/1.34 var(--display);color:var(--forest);
      letter-spacing:-.012em;max-width:24ch}
.sec-forest .pull{color:#fff;border-left-color:var(--gold)}
.pull cite{display:block;margin-top:16px;font:400 13px/1.5 var(--sans);
           color:var(--mute);font-style:normal;letter-spacing:.02em}
.sec-forest .pull cite{color:#8fa39c}

/* ---- band inherits the new rhythm ---- */
.band{padding:var(--pad) 48px;margin:0}
.band>*{max-width:1200px;margin-left:auto;margin-right:auto}
.band h2{border-top-color:var(--gold)}

/* ---- tables stop being the default answer ---- */
.wrap{margin:26px 0 34px}
table{font-size:14.5px}
td{padding:15px 16px 15px 14px}
th{padding:13px 16px 13px 14px}

/* ---- footer ---- */
.ft{padding:var(--pad) 48px calc(var(--pad) * .7)}
.ft>*{max-width:1200px;margin-left:auto;margin-right:auto}
.ft .cols{gap:40px}

/* ---- split layout gets real air ---- */
.split2{gap:clamp(40px,5vw,84px);margin:0}
.aside{top:110px;border-top-width:3px;padding-top:24px}
.tools{gap:2px}
.tool{border:0;box-shadow:0 0 0 1px var(--forest);padding:30px 30px 28px}
.tool:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--forest),
            0 24px 40px -28px rgba(10,43,36,.6)}
.issues{border-top-width:3px}
.issue{padding:26px 6px}
.issue .ti{font-size:19px}

@media(max-width:760px){
  .hero,.band,.ft{padding-left:22px;padding-right:22px}
  .inner{padding-left:22px;padding-right:22px}
  .topin{padding:16px 22px}
  .card{padding:30px 26px}
  .pull{padding-left:20px;border-left-width:4px}
}

/* The closing band is `.band`, not `.sec-forest`, so it never picked up the
   dark-ground figure styling and the statistics rendered as white boxes on
   forest green. Same treatment, both selectors. */
.band .fig{background:transparent;box-shadow:0 0 0 1px #24564a;color:#a8bcb5}
.band .fig b{color:#fff}
.band .fig.g b{color:var(--gold)}
.band .figs{margin-top:40px}
.band .kick{color:var(--gold)}

/* ============================================================================
   TYPE + DEPTH PASS
   - Body moves to a modern sans at a smaller size. Times New Roman is gone from
     every stack; it was the fallback that made the page look like a court
     filing on any machine without Georgia.
   - `.fig b` was sized for numerals and clipped every word-based figure
     ("Determined" rendered as "Determ"). Words get their own size.
   - Cards gain real depth: layered shadows, a faint vertical gradient, and a
     lift on hover.
   ========================================================================= */

:root{
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',
         Roboto,'Helvetica Neue',Arial,sans-serif;
  --serif:var(--sans);
  --display:'Iowan Old Style','Palatino Linotype','Book Antiqua',Georgia,serif;
  --shadow-1:0 1px 1px rgba(10,43,36,.05),0 3px 6px rgba(10,43,36,.05),
             0 10px 18px -10px rgba(10,43,36,.13),0 26px 40px -26px rgba(10,43,36,.22);
  --shadow-2:0 2px 3px rgba(10,43,36,.07),0 8px 14px rgba(10,43,36,.08),
             0 20px 34px -14px rgba(10,43,36,.20),0 44px 62px -34px rgba(10,43,36,.34);
}
body{font:15.5px/1.68 var(--sans);letter-spacing:.002em}
p{margin:0 0 18px}
.lede{font-size:clamp(16px,1.25vw,18.5px);line-height:1.62}
.hero .lede{font:clamp(16px,1.35vw,19px)/1.6 var(--sans);color:#b9cec7}
.card p{font:15px/1.68 var(--sans)}
li{font-size:15.5px;line-height:1.68}
h3{font-size:17.5px}
table{font-size:14px}
details.acc .acc-body{font:15px/1.7 var(--sans)}
.fr dd,.issue .dt{font-family:var(--sans)}

/* ---- word-based statistics stop clipping ---- */
.fig b{overflow-wrap:anywhere;hyphens:none}
.fig.txt b{font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.12;letter-spacing:-.01em}

/* ---- depth ---- */
.card,.tool,.fig{border-radius:3px}
.card{box-shadow:var(--shadow-1);background:linear-gradient(180deg,#fff 0%,#fcfbf8 100%)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);
            background:linear-gradient(180deg,#fff 0%,#faf8f3 100%)}
.fig{box-shadow:var(--shadow-1);background:linear-gradient(180deg,#fff 0%,#fcfbf8 100%)}
.tool{box-shadow:var(--shadow-1),inset 0 0 0 1px rgba(10,43,36,.10);border:0}
.tool:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.band .fig,.sec-forest .fig{background:linear-gradient(180deg,#0f3a30 0%,#0c2f27 100%);
  box-shadow:inset 0 0 0 1px #24564a,0 18px 30px -22px rgba(0,0,0,.7)}
.issue:hover{box-shadow:var(--shadow-1);position:relative;z-index:1;border-radius:3px}

/* ---- portfolio dossiers ---- */
.dossiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px;
          margin:26px 0 30px}
.dossier{display:block;text-decoration:none;padding:26px 26px 24px;border-radius:3px;
  background:linear-gradient(180deg,#fff 0%,#fcfbf8 100%);box-shadow:var(--shadow-1);
  border-top:4px solid var(--gold)}
.dossier:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.dossier .cur{font:600 26px/1 var(--display);color:var(--forest);letter-spacing:-.01em}
.dossier .dl{display:block;font:600 9.5px/1 var(--sans);letter-spacing:1.7px;
  text-transform:uppercase;color:var(--claret);margin:12px 0 8px}
.dossier .dd{display:block;font:13px/1.55 var(--sans);color:var(--mute)}

/* The diagram was inheriting the 64-character prose measure, so its two-box row
   wrapped and the arrow between them pointed at nothing. Widen the column where
   a diagram lives, and keep the prose inside it at a readable measure. */
.narrow:has(.flow){max-width:940px}
.narrow:has(.flow)>p,.narrow:has(.flow)>ul,.narrow:has(.flow)>ol,
.narrow:has(.flow)>.rail,.narrow:has(.flow)>details{max-width:64ch}
.flow{width:100%}
.flow .row{gap:18px}

/* ---------- hero cubes ----------
   A cluster of isometric cubes sitting under the sphere, graded through the
   house greens. Decorative only, so it is aria-hidden and never intercepts a
   click; it hides below the breakpoint where it would crowd the headline. */
.hero .cubes{position:absolute;right:clamp(16px,5vw,96px);bottom:0;
  width:clamp(260px,30vw,420px);height:auto;z-index:0;pointer-events:none;
  opacity:.9;filter:drop-shadow(0 26px 34px rgba(0,0,0,.32))}
.hero::before{inset:auto -10% -30% auto;width:52vw;height:52vw;opacity:.7}
@media(max-width:900px){.hero .cubes{opacity:.42;width:240px;right:-30px}}
@media(max-width:620px){.hero .cubes{display:none}}

/* Alternative artwork, drawn from scratch and free of any rights question,
   is at /assets/hero-layers.svg - swap the url below to use it.
   The photograph occupies the right of the hero and dissolves toward the
   headline. ONE mask only: stacking two gradients with mask-composite left a
   hard vertical seam where the layers met, so the vertical softening is a
   gradient layered inside the background instead - same result, no compositing.
   mix-blend-mode is gone too; it was flattening the photograph's own light. */
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;
      overflow:hidden}
.hero::before{content:none}
.herophoto{position:absolute;inset:0 0 0 30%;z-index:0;pointer-events:none;
  background:
    linear-gradient(to bottom,#0A2B24 0%,rgba(10,43,36,0) 20%,
                    rgba(10,43,36,0) 78%,#0A2B24 100%),
    url("/assets/hero-photo.jpg") center right/cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.22) 26%,
     rgba(0,0,0,.72) 56%,#000 86%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.22) 26%,
     rgba(0,0,0,.72) 56%,#000 86%);
  opacity:.9}
.hero>*:not(.herophoto){position:relative;z-index:1}
@media(max-width:1100px){.herophoto{inset:0 0 0 46%;opacity:.62}}
@media(max-width:760px){.herophoto{display:none}}

/* ============================================================================
   LIGHT PASS — the dark grounds come out, and the hero carries the archive.

   WHAT CHANGED. The full-bleed forest grounds (hero, closing band, footer,
   .sec-forest) become paper and bone. Green is NOT removed: it is the colour of
   the mark and it still carries the rules, the headings, the links and the
   primary button. What goes is the dark ground, not the house colour.

   THE RISK, NAMED. The direction note at the top of this file argues the
   opposite — that one white sheet with hairlines "reads as a draft". That risk
   is real. So the hierarchy the dark bands used to carry is rebuilt here out of
   ground tone (paper / bone / sage), rule weight, and the gold and claret
   accents, rather than left to evaporate. Sections still change colour as the
   page scrolls; they now change within a lighter range.

   WHAT STAYS DARK ON PURPOSE. Small controls, not grounds: the primary button,
   the .tool hover inversion, the .flow key node, the .lg language chip on
   hover. A dark control on a white page is an anchor; a dark band is a theme.

   THE HERO. The photograph is replaced by the five most recent issues, dealt in
   one at a time oldest-to-newest so the current issue lands on top. It is an
   entrance and not a loop: it plays once, then nothing moves again unless the
   reader hovers it. That holds the interaction rule stated further up this file.
   ========================================================================= */

:root{
  --bone-2:#EFEADE;      /* a step under bone, so the footer separates */
  --mute-2:#4d5852;      /* darker mute, for small text on a tinted ground */
  --gold-dk:#8a6a1f;     /* gold that survives a light ground — see below */
}

/* ---- contrast: the one thing the dark grounds were hiding ----
   Gold #C69749 on forest green is about 5.9:1 and perfectly legible. On white
   it is 2.3:1, which fails WCAG AA (4.5:1) for the small caps it was used on.
   Every gold label that now sits on a light ground moves to --gold-dk (5.1:1
   on paper, 4.6:1 on bone). The colour survives; the contrast is repaired.

   This also buys a hierarchy the single gold did not have: claret marks a
   SECTION eyebrow, dark gold marks a COMPONENT label. Gold itself stays, but
   only where it is a rule, a border or a fill — never small text on light. */
.card .kicker{color:var(--gold-dk)}
.aside h4{color:var(--gold-dk)}
.tool .tk{color:var(--gold-dk)}
.issue .no{color:var(--gold-dk)}
/* .pubno is set at its own definition further down, not here — it is declared
   after this block and would override anything set at this point. */

::selection{background:var(--forest);color:#fff}

/* ---- hero ---- */
.hero{background:var(--paper);color:var(--ink);
      border-bottom:3px solid var(--forest);
      padding:clamp(58px,7vw,110px) 48px clamp(54px,6vw,96px)}
.hero::before{content:none}
.herophoto,.hero .cubes{display:none}
.hero h1{color:var(--forest)}
.hero .lede{color:var(--mute);font:clamp(16px,1.35vw,19px)/1.62 var(--sans)}
.hero .focus{color:var(--green)}
.eyebrow{color:var(--claret)}
/* .hero is a column flex container and `.hero>*` gives every child auto side
   margins, which on a flex item means shrink-to-fit AND centre. h1 and .lede
   already cancel it with margin-right:0; the eyebrow never did, so on every
   inner page it floated to the middle while the headline under it sat left.
   Only direct children are affected — inside .hero-pub the eyebrow is nested. */
.hero>.eyebrow{margin-left:0;margin-right:auto}

/* ---- hero, two columns: the words, then the archive ---- */
.hero-pub .heroin{width:100%;max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(296px,.9fr);
  gap:clamp(30px,4.5vw,72px);align-items:center}
.hero-pub .herotext{min-width:0}
.hero-pub h1{font-size:clamp(2.5rem,5.2vw,4.3rem);margin:24px 0 0;max-width:13ch}
.hero-pub .lede{margin-top:24px;max-width:46ch}

/* ---- the stack ---- */
/* The vertical step is deliberately larger than it looks like it needs to be.
   The point of the stack is that a reader can count five publications, so each
   card behind the top one has to clear the card in front by more than its own
   header row (border + padding + the issue/date line, about 54px). Anything
   tighter and the pile reads as four gold slivers under one cover. */
.pubstack{position:relative;display:block;text-decoration:none;color:inherit;
  width:100%;max-width:344px;margin-left:auto;
  height:clamp(368px,35vw,414px);
  --sp:10px;   /* horizontal step between cards */
  --sv:48px}   /* vertical step — must exceed the header row */
.pubstack:focus-visible{outline:3px solid var(--gold);outline-offset:8px}

.pub{position:absolute;left:0;top:0;width:min(264px,80%);
  --x:calc(var(--sp) * var(--i));--y:calc(var(--sv) * var(--i));
  opacity:0;animation:pubin .60s var(--ease) var(--d) forwards}
.pub:nth-child(1){--i:0;--r:-2.6deg;--d:.22s; z-index:1}
.pub:nth-child(2){--i:1;--r:-1.3deg;--d:.54s; z-index:2}
.pub:nth-child(3){--i:2;--r:0deg;   --d:.86s; z-index:3}
.pub:nth-child(4){--i:3;--r:1.3deg; --d:1.18s;z-index:4}
.pub:nth-child(5){--i:4;--r:2.6deg; --d:1.50s;z-index:5}

.pubcard{display:block;position:relative;padding:19px 21px 17px;border-radius:3px;
  background:linear-gradient(180deg,#fff 0%,#fcfbf8 100%);
  box-shadow:var(--shadow-1);border-top:4px solid var(--gold);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
/* the flash: a gold sheet over the card that burns off as it settles */
.pubcard::after{content:"";position:absolute;inset:-4px 0 0;border-radius:3px;
  background:var(--gold);opacity:0;pointer-events:none;
  animation:pubflash .60s var(--ease) var(--d) forwards}

.pubtop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-bottom:10px;border-bottom:1px solid var(--soft);margin-bottom:11px}
.pubno{font:600 10px/1 var(--sans);letter-spacing:1.7px;text-transform:uppercase;
  color:var(--gold-dk);font-variant-numeric:tabular-nums;white-space:nowrap}
.pubdt{font:11px/1 var(--sans);color:var(--mute);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.pubti{display:block;font:600 14px/1.34 var(--display);color:var(--forest);
  letter-spacing:-.008em;min-height:2.7em}
.publangs{display:flex;gap:4px;flex-wrap:wrap;margin-top:13px;
  padding-top:11px;border-top:1px solid var(--soft)}
.pl{font:600 9px/1 var(--sans);letter-spacing:.7px;text-transform:uppercase;
  color:var(--mute);border:1px solid var(--rule);padding:4px 6px;background:var(--paper)}

.pubfoot{position:absolute;right:0;bottom:0;z-index:6;text-align:right;
  font:600 10px/1.4 var(--sans);letter-spacing:1.6px;text-transform:uppercase;
  color:var(--mute);opacity:0;
  animation:pubfootin .5s var(--ease) 1.84s forwards}
.pubstack:hover .pubfoot{color:var(--green)}

/* The fan opens on hover — a deliberate act, per the interaction rule. The
   entrance animation holds its own transform on .pub, so the hover transform
   lives on the inner .pubcard where the two cannot fight. */
.pubstack:hover .pubcard{box-shadow:var(--shadow-2)}
.pubstack:hover .pub:nth-child(1) .pubcard{transform:translate(-10px,-10px)}
.pubstack:hover .pub:nth-child(2) .pubcard{transform:translate(-5px,-5px)}
.pubstack:hover .pub:nth-child(4) .pubcard{transform:translate(5px,5px)}
.pubstack:hover .pub:nth-child(5) .pubcard{transform:translate(10px,10px)}

@keyframes pubin{
  0%  {opacity:0;transform:translate(var(--x),calc(var(--y) - 34px)) rotate(var(--r)) scale(1.05)}
  38% {opacity:1}
  100%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}
}
@keyframes pubflash{0%{opacity:.30} 100%{opacity:0}}
@keyframes pubfootin{to{opacity:1}}

/* ---- the closing band stops being dark ---- */
.band{background:var(--bone);color:var(--ink);border-top:1px solid var(--rule)}
.band h2{color:var(--forest);border-top-color:var(--gold)}
.band p{color:var(--ink)}
.band strong{color:var(--forest)}
.band a{color:var(--green)}
.band .kick{color:var(--claret)}
.band .cta{background:var(--forest);border-color:var(--forest);color:#fff}
.band .cta:hover{background:var(--green);border-color:var(--green)}
.band .cta.alt{background:transparent;color:var(--forest);border-color:var(--forest)}
.band .cta.alt:hover{background:var(--forest);color:#fff}

/* ---- .sec-forest likewise ---- */
.sec-forest{background:var(--bone);color:var(--ink)}
.sec-forest h2{color:var(--forest);border-top-color:var(--gold)}
.sec-forest p,.sec-forest li{color:var(--ink)}
.sec-forest strong{color:var(--forest)}
.sec-forest .kick{color:var(--claret)}
.sec-forest .pull{color:var(--forest);border-left-color:var(--claret)}
.sec-forest .pull cite{color:var(--mute)}

/* ---- figure tiles were styled for a dark ground in both places ---- */
.band .fig,.sec-forest .fig{background:linear-gradient(180deg,#fff 0%,#fcfbf8 100%);
  box-shadow:var(--shadow-1);color:var(--mute)}
.band .fig b,.sec-forest .fig b{color:var(--forest)}
.band .fig.g b,.sec-forest .fig.g b{color:var(--green)}

/* ---- footer ---- */
.ft{background:var(--bone-2);color:var(--mute-2);border-top:3px solid var(--forest)}
.ft h4{color:var(--claret)}
.ft a{color:var(--forest)}
.ft a:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.ft p{color:var(--mute-2)}

/* ---- table headings: rule weight instead of a dark fill ---- */
th{background:var(--bone);color:var(--forest);
   border-bottom:2px solid var(--forest)}

@media(max-width:1040px){
  .hero-pub .heroin{grid-template-columns:1fr;gap:44px}
  .hero-pub h1{max-width:16ch}
  .hero-pub .lede{max-width:58ch}
  .pubstack{margin-left:0;--sp:15px;--sv:16px}
}
/* The .hero padding above is a shorthand, and it sits later in the file than
   the max-width:760px block that sets the 22px mobile gutter — so it silently
   reinstated a 48px gutter on phones. Restate it here, after everything. */
@media(max-width:760px){
  .hero{padding-left:22px;padding-right:22px}
}
@media(max-width:560px){
  .pubstack{--sp:7px;--sv:42px;height:352px;max-width:none}
  .pub{width:min(244px,92%)}
  .pubti{font-size:13.5px;min-height:2.7em}
}

@media(prefers-reduced-motion:reduce){
  .pub{animation:none;opacity:1;
       transform:translate(var(--x),var(--y)) rotate(var(--r))}
  .pubcard::after{animation:none;opacity:0}
  .pubfoot{animation:none;opacity:1}
  .pubcard{transition:none}
  .pubstack:hover .pub .pubcard{transform:none}
}

@media print{
  .hero{border-bottom:2px solid #000}
  .pubstack{display:none}
  .ft,.band{background:#fff}
}

/* ============================================================================
   SPLIT HERO PASS — the inner pages stop wasting their right-hand half.

   THE PROBLEM. Every page except the homepage stacked eyebrow, headline and
   lede in one left-hand column, so a 1200px hero carried roughly 600px of
   content and 600px of nothing. The headline got the whole width to itself and
   still only used half of it.

   THE FIX, WITHOUT TOUCHING EIGHT FILES. The three children are always the
   same, so the split is done entirely in CSS: .hero becomes a two-column grid,
   the eyebrow spans both, the headline takes column one and the lede moves to
   column two, bottom-aligned with the headline. No page markup changes.
   .hero-pub (the homepage) already has its own .heroin grid and is excluded.

   Note .focus rather than only .lede — /fiduciary/ uses .focus for its
   subtitle, and it has to land in the same place.

   THE REVEAL. The subtitle is masked and the mask sweeps left to right, so the
   line appears as if it is being written. It runs once on load, like the
   publication stack, which keeps the rule stated at the top of this file: the
   page settles and then nothing moves on its own.
   ========================================================================= */

.hero:not(.hero-pub){
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  column-gap:clamp(34px,5vw,80px);
  /* centre, not bottom-align: the headline and the lede share a common optical
     centre, so a two-line headline beside a three-line lede still reads as one
     horizontal band rather than two blocks sitting on different baselines. */
  align-items:center;
  padding-left:max(48px,calc((100% - 1200px) / 2));
  padding-right:max(48px,calc((100% - 1200px) / 2));
}
/* .hero>* gives every child auto side margins; in a grid that would centre each
   one inside its track. Cancel it, then place the three children explicitly. */
.hero:not(.hero-pub)>*{max-width:none;margin-left:0;margin-right:0}
.hero:not(.hero-pub)>.eyebrow{grid-column:1 / -1;margin:0 0 26px}
.hero:not(.hero-pub)>h1{grid-column:1;margin:0;max-width:none;
  font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:1.05}
.hero:not(.hero-pub)>.lede,
.hero:not(.hero-pub)>.focus{grid-column:2;margin:0;max-width:44ch}

/* ---- the writing reveal ----
   A mask whose leading edge is feathered, grown from zero width to past the
   end of the line. Reads as ink arriving rather than as a shutter opening.
   mask-size is not GPU-composited, but this is one short run on one small
   element, so the repaint cost is not worth a transform-based workaround. */
.hero:not(.hero-pub)>.lede,
.hero:not(.hero-pub)>.focus{
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 68%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right,#000 0,#000 68%,rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left top;mask-position:left top;
  /* Resting state is REVEALED, and the fill mode is `backwards` rather than
     `both`. With `both` the element holds the from-state — zero-width mask,
     i.e. invisible — whenever the animation does not run to completion, so a
     browser that hiccups on an animated mask-size would hide the subtitle for
     good. `backwards` applies the hidden state only during the delay and hands
     back to this visible base afterwards, so the failure mode is "no animation"
     instead of "no text". */
  -webkit-mask-size:135% 100%;mask-size:135% 100%;
  animation:inkwrite 1.15s cubic-bezier(.25,.6,.3,1) .3s backwards;
}
@keyframes inkwrite{
  from{-webkit-mask-size:0 100%;   mask-size:0 100%}
  to  {-webkit-mask-size:135% 100%;mask-size:135% 100%}
}

@media(max-width:900px){
  .hero:not(.hero-pub){grid-template-columns:1fr;row-gap:24px;align-items:start}
  .hero:not(.hero-pub)>h1,
  .hero:not(.hero-pub)>.lede,
  .hero:not(.hero-pub)>.focus{grid-column:1}
  .hero:not(.hero-pub)>.lede,
  .hero:not(.hero-pub)>.focus{max-width:58ch;padding-bottom:0}
  .hero:not(.hero-pub)>.eyebrow{margin-bottom:0}
}
/* Restated last: the grid padding above is more specific than the 760px gutter
   rule further up the file and would otherwise reinstate a 48px phone gutter. */
@media(max-width:760px){
  .hero:not(.hero-pub){padding-left:22px;padding-right:22px}
}

@media(prefers-reduced-motion:reduce){
  .hero:not(.hero-pub)>.lede,
  .hero:not(.hero-pub)>.focus{animation:none;
    -webkit-mask-image:none;mask-image:none}
}

/* ============================================================================
   SUBPAGE WIDTH PASS — subpages stop being a 64-character strip.

   THE PROBLEM. The homepage lays its sections out full width: .cards, .figs and
   .split2 all span the 1200px column. Every subpage instead wrapped everything
   in .inner > .narrow, which capped the WHOLE section at 64ch. So a table that
   wanted 900px was squeezed into 700 and scrolled sideways, a three-card grid
   collapsed to two, and the right-hand third of every section sat empty.

   THE FIX. The container goes full width; the measure moves onto the prose
   itself. Running text keeps a readable line length, while the structural
   children — tables, card grids, figure tiles, dossiers — get the whole column
   the way they do on the homepage. No page markup changes.

   WHY NOT JUST WIDEN THE PROSE. A 1200px line of body copy is roughly 150
   characters. That is unreadable, and the fact that it fills the width does not
   make it better. Empty space beside a paragraph is not a defect; empty space
   beside a table that is scrolling sideways is.
   ========================================================================= */

.inner>.narrow{max-width:none}

/* Prose and prose-like blocks keep a measure. Everything not listed here —
   .wrap tables, .tools, .dossiers, .figs, .cards, .split2, .flow — inherits the
   full width of the section, which is the point of this pass. */
.inner>.narrow>p,
.inner>.narrow>ul,
.inner>.narrow>ol,
.inner>.narrow>h3,
.inner>.narrow>blockquote,
.inner>.narrow>.rail,
.inner>.narrow>details.acc,
.inner>.narrow>dl{max-width:66ch}

/* An h2 is display:table, so it already hugs its own text and its gold rule
   stops with it. Nothing to constrain. */

/* The diagram override further up keyed off .narrow having a fixed max-width.
   Restate it so a .flow still gets room without dragging its prose wide. */
.narrow:has(.flow){max-width:none}
.narrow:has(.flow)>p,
.narrow:has(.flow)>ul,
.narrow:has(.flow)>ol,
.narrow:has(.flow)>.rail,
.narrow:has(.flow)>details{max-width:66ch}

@media(max-width:900px){
  .inner>.narrow>p,
  .inner>.narrow>ul,
  .inner>.narrow>ol,
  .inner>.narrow>h3,
  .inner>.narrow>blockquote,
  .inner>.narrow>.rail,
  .inner>.narrow>details.acc,
  .inner>.narrow>dl{max-width:none}
}

/* ============================================================================
   NAV SPACING — six items, two of them long, need room to read as six items.

   The original 30px gap was set when the nav carried five short labels. With
   "Portfolio Analytics and AMC Design" and "Property Valuation" in the row, the
   words run together and the eye stops finding the boundaries. The gap now
   scales with the viewport, and the row gap stays tighter than the column gap
   so a wrapped nav reads as two rows rather than a block of text.
   ========================================================================= */
nav{column-gap:clamp(28px,3vw,52px);row-gap:14px}

/* ============================================================================
   HERO SUBTITLE PASS — one typeface and one colour for the standfirst.

   THE INCONSISTENCY. The slot beside the headline was filled two different
   ways. /fiduciary/ used .focus — italic display serif, green. Every other page
   used .lede — roman sans, grey. Same position, same job, two typefaces and two
   colours, so the pages did not look like a set.

   THE RESOLUTION. Both take the .focus treatment: display serif italic in the
   house green. That is the reference the client picked, and it is the better of
   the two anyway — a serif italic standfirst is a long-standing editorial
   device for exactly this slot, and it separates the subtitle from the sans
   body copy underneath instead of competing with it.

   The size opens up as well; at this length the line can carry it, and the
   headline still leads because it is roman, heavier and far larger.

   Green on paper is 5.6:1, comfortably past the 4.5:1 minimum.
   ========================================================================= */

.hero .lede,
.hero .focus{
  font:italic clamp(19px,1.75vw,25px)/1.46 var(--display);
  color:var(--green);
  letter-spacing:-.004em;
}

/* The measure tightens as the size grows, so the line count stays sane. */
.hero:not(.hero-pub)>.lede,
.hero:not(.hero-pub)>.focus{max-width:30ch}
/* The homepage is the exception: its subtitle is the longest on the site AND
   its column is the narrowest, because the issue stack takes the other half.
   Same face, same colour, one step down in size and a wider measure, so it
   settles at four lines instead of six. */
.hero-pub .lede{font-size:clamp(17px,1.45vw,21px);max-width:38ch}

@media(max-width:900px){
  .hero:not(.hero-pub)>.lede,
  .hero:not(.hero-pub)>.focus{max-width:44ch}
  .hero-pub .lede{max-width:44ch}
}

/* ---- tool cards: say where they go, and whether you can get in ----
   The cards were already anchors, but nothing on them said so: no arrow, no
   underline, no colour change until hover. .ta gives each one a visible
   destination line AND states the access condition, because two of the three
   tools sit behind a login and a card that reads "open now" is a promise the
   click has to keep. */
.tool .ta{display:block;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--soft);
  font:600 10px/1.4 var(--sans);letter-spacing:1.4px;text-transform:uppercase;
  color:var(--mute)}
.tool .ta.open{color:var(--green)}
.tool:hover .ta{color:var(--gold-lt)}
.tool:hover .ta.open{color:#fff}
/* ============================================================================
   MASTHEAD ALIGNMENT — the brand moves to the left, and the nav breathes.

   THE MISALIGNMENT. .topin was max-width:1200px with margin:0 auto AND its own
   48px padding, so the masthead's left edge sat 48px inboard of every section
   below it, which use max(24px,(100% - 1200px)/2) as their gutter. The brand
   therefore floated right of the content it heads. Same gutter formula here and
   the mark lines up with the headline underneath it at every width.

   THE NAV. Six items, two of them long. The column gap opens further so the
   labels read as six destinations rather than one band of capitals; the row gap
   stays tight so the wrapped second row still belongs to the first.
   ========================================================================= */
.topin{max-width:none;margin:0;
  padding:22px max(24px,calc((100% - 1200px) / 2));
  align-items:flex-start;gap:18px 40px}
.brand{flex:0 0 auto}
nav{column-gap:clamp(34px,4vw,74px);row-gap:16px}

@media(max-width:760px){
  .topin{padding-left:22px;padding-right:22px}
  nav{column-gap:26px;row-gap:12px}
}

/* ============================================================================
   .inner.centre — a section whose column sits in the middle of the page.

   After the subpage width pass, .narrow is full width and the measure lives on
   its children, so those children align left and leave the right-hand side
   empty. Centring the children puts the column in the middle of the page with
   the space balanced either side. Opt-in per section, so the default reading
   position on every other section is unchanged.
   ========================================================================= */
/* Centre the COLUMN, not each child. Centring children individually looks
   correct in a mock-up and wrong on the page: the lede, the pull quote and the
   rail have different measures, so each lands on a different left edge and the
   section reads as ragged. Constraining .narrow itself and clearing the
   per-child measures gives every element one shared left edge. */
.inner.centre>.narrow{max-width:68ch;margin-left:auto;margin-right:auto}
.inner.centre>.narrow>*{max-width:none}

/* ---- .pull.long ----
   The base pull quote is sized for roughly twenty words at up to 2rem in a 24ch
   measure. A four-sentence position statement at that size becomes a wall, so
   the modifier drops the size and opens the measure: it still reads as a pull
   quote rather than as a headline that overran. */
.pull.long{font-size:clamp(1.05rem,1.6vw,1.38rem);line-height:1.44;max-width:52ch;
  margin:34px auto}