/* ============================================================
   NAVREN, shared stylesheet
   One file for every page. Change a token here and the whole
   site follows.
   ============================================================ */
/* ---------- self-hosted fonts ----------
   The same files Google served, moved to this origin so the browser does
   not spend a DNS lookup, a TLS handshake and a second request chain on
   fonts.googleapis.com before it can paint. Jost and Karla are variable
   fonts: one file backs every weight, which is why several rules below
   point at the same url. font-display is swap rather than block, so a
   slow font can never leave the page with no visible text at all; the
   four latin files are preloaded, so in practice the swap rarely shows. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jost-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jost-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jost-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jost-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/jost-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/jost-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/jost-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/jost-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/karla-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/karla-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/karla-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/karla-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/karla-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/karla-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/karla-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/karla-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  --paper:#F0F2F0;
  --white:#FFFFFF;
  --ink:#0E1513;
  --jade:#0D6B54;
  --jade-deep:#0A5744;
  --jade-wash:rgba(13,107,84,.07);
  --mist:#DCE3E0;
  /* body copy sat too light against the porcelain and receded. Darker
     reads better than heavier, which would fight the display face. */
  --slate:#4A5854;
  --slate-soft:#5E6B67;
  --line:#C9D3CF;
  --line-soft:#E3E8E6;

  --display:"Jost",system-ui,-apple-system,sans-serif;
  --body:"Karla",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --gut:clamp(20px,5vw,64px);
  --maxw:1240px;
  --navh:66px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,fieldset,legend,figure{margin:0;}
fieldset{border:0;padding:0;min-width:0;}
ul{list-style:none;padding:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--jade);color:#fff;}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:2px;}
/* Dark grounds need the light jade. --jade measures 2.86:1 on --ink, under
   the 3:1 a focus indicator has to clear to be seen. */
.foot :focus-visible,.imgband :focus-visible,.cta :focus-visible{outline-color:#5BD3A6;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}

/* ---------- utilities ---------- */
/* Read by a screen reader, never seen. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* Honeypot. aria-hidden and tabindex="-1" on the input keep it away from
   anyone using a keyboard or a screen reader; only a bot filling every
   field it can find will touch it. */
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}

/* ---------- shared type ---------- */
/* Uppercase plus wide tracking plus a mono face at 11px was three
   things working against legibility at once. Bigger, heavier, and less
   tracked fixes it without losing the label look. */
.eyebrow{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--jade);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--jade);flex:0 0 auto;}
.h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(26px,3.3vw,38px);line-height:1.04;text-wrap:balance;margin-top:14px;}
.lede{color:var(--slate);max-width:58ch;margin-top:13px;font-size:17.5px;line-height:1.6;}
.note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--slate);margin-top:18px;}

.btn{display:inline-flex;align-items:center;gap:9px;background:var(--jade);color:#fff;border-radius:4px;padding:12px 20px;font-weight:700;font-size:14.5px;transition:background .22s ease,transform .18s ease;}
.btn:hover{background:var(--jade-deep);transform:translateY(-1px);}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:4px;padding:12px 20px;font-weight:700;font-size:14.5px;background:var(--white);transition:border-color .22s ease,color .22s ease;}
.btn-ghost:hover{border-color:var(--jade);color:var(--jade);}
.inline{color:var(--jade);border-bottom:1px solid rgba(13,107,84,.35);}
/* green emphasis inside running copy */
.hl{color:var(--jade);font-weight:700;}

/* ============================================================
   NAV + MEGA MENU
   ============================================================ */
.nav{position:sticky;top:0;z-index:80;background:rgba(240,242,240,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.nav-bar{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:var(--navh);display:flex;align-items:center;justify-content:space-between;gap:20px;}
.word{display:inline-flex;align-items:center;}
.word img{height:23px;width:auto;display:block;}

.menu{display:flex;align-items:center;gap:4px;}
.menu > li{position:static;}
/* 11px rather than 9px: at 9px these rendered ~41.5px tall, under the
   44px a touch target should clear, which matters on the touch laptops
   and tablets that still get the desktop nav. The bar is a fixed 66px,
   so nothing moves. */
.menu-link,.menu-trigger{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 13px;border-radius:4px;
  font-weight:600;font-size:14.5px;color:var(--slate);
  transition:color .2s ease,background .2s ease;
}
.menu-link:hover,.menu-trigger:hover{color:var(--jade);background:var(--jade-wash);}
.menu-link.current{color:var(--jade);}
.menu-trigger .chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s ease;}
.has-mega.open > .menu-trigger{color:var(--jade);background:var(--jade-wash);}
.has-mega.open > .menu-trigger .chev{transform:translateY(1px) rotate(225deg);}
.nav-cta{margin-left:10px;}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--white);border-bottom:1px solid var(--line);
  box-shadow:0 26px 50px -34px rgba(14,21,19,.5);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  /* visibility is deliberately not transitioned. While it was, there was
     a frame or two after the menu opened where the panel was still
     computed hidden, and a Tab pressed in that window stepped straight
     over every link inside it to the next nav item. */
  transition:opacity .2s ease,transform .2s ease;
}
.has-mega.open .mega{opacity:1;visibility:visible;transform:none;}
.mega-in{max-width:var(--maxw);margin:0 auto;padding:26px var(--gut) 22px;}
.mega-cols{display:grid;gap:12px;}
.mega-cols.five{grid-template-columns:repeat(5,1fr);}
.mega-cols.who{grid-template-columns:repeat(4,1fr);}
.mega .seg{display:block;padding:15px 16px;border:1px solid var(--line);border-radius:6px;transition:border-color .22s ease,transform .22s ease;height:100%;}
.mega .seg:hover{border-color:var(--jade);transform:translateY(-2px);}
.mega .seg b{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.015em;}
.mega .seg span{display:block;margin-top:6px;font-size:13.5px;color:var(--slate);line-height:1.55;}
.mega-foot{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
}
.mega-foot p{font-size:14px;color:var(--slate);}
.mega-foot b{color:var(--ink);}

.nav-toggle{display:none;align-items:center;gap:8px;border:1px solid var(--line);border-radius:4px;padding:8px 13px;min-height:44px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;}

/* ---------- sections ---------- */
section{padding:clamp(46px,6vw,78px) 0;}
.band{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
/* The blog's posts section sits on porcelain so it continues the strip the
   featured card hangs onto, and so the white post cards have a ground to
   read against. The top border would draw a seam across that join. */
.blog-page .band{background:var(--paper);border-top:0;}
/* a band that continues the section above it rather than starting a
   new thought, so it doesn't need the full run-up of space */
.band.tight{padding-top:clamp(28px,3.2vw,42px);}
.band.tight .phases{margin-top:0;}
.sec-head{max-width:60ch;}

/* ---------- page hero (interior pages) ---------- */
.phero{padding:clamp(42px,6vw,78px) 0 clamp(30px,3.5vw,46px);}
.phero h1{font-family:var(--display);font-weight:700;letter-spacing:-.024em;font-size:clamp(32px,5vw,56px);line-height:1.0;margin-top:18px;max-width:17ch;text-wrap:balance;}
/* The floor of the clamp is flat below 640px, so on the narrowest phones the
   headline ran past its line and broke where the markup did not ask it to.
   These two steps only bind under 375px, so every device at or above an
   iPhone renders exactly as before. */
@media (max-width:374px){ .phero h1{font-size:29px;} }
@media (max-width:344px){ .phero h1{font-size:26px;} }
.phero h1 mark{background:none;color:var(--jade);}
.phero .sub{margin-top:20px;color:var(--slate);max-width:52ch;font-size:17px;}
.phero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
/* Breadcrumb links have to look clickable at rest, not only on hover,
   or the whole row reads as a label. Current page stays grey. */
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-soft);margin-bottom:18px;}
.crumb a{color:var(--jade);font-weight:500;}
.crumb a:hover{color:var(--jade-deep);text-decoration:underline;text-underline-offset:3px;}

/* ---------- cards ---------- */
.cards{display:grid;gap:12px;margin-top:34px;}
.cards.c4{grid-template-columns:repeat(4,1fr);}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.cards.c2{grid-template-columns:repeat(2,1fr);}
.cards article{background:var(--white);border:1px solid var(--line);border-radius:7px;padding:22px 20px;display:flex;flex-direction:column;gap:10px;transition:border-color .25s ease,transform .25s ease;}
.cards article:hover{border-color:var(--jade);transform:translateY(-3px);}
.cards h3{font-family:var(--display);font-weight:700;font-size:18.5px;letter-spacing:-.015em;}
.cards p{font-size:15px;color:var(--slate);line-height:1.62;}
.cards em{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--jade);}
.cards .meta{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--jade);line-height:1.7;}

/* audience icons, one per card in the top right. Decorative only, so they
   sit quiet at low opacity and lift on hover. Scoped to #who so the other
   card grids on the site keep their existing spacing. */
#who .cards article{position:relative;}
#who .cards h3{padding-right:30px;}
.card-icon{
  position:absolute;top:19px;right:18px;width:21px;height:21px;
  color:var(--jade);opacity:.4;pointer-events:none;transition:opacity .25s ease;
}
.card-icon svg{
  width:100%;height:100%;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.cards article:hover .card-icon{opacity:.78;}
.cards article.featured .card-icon{opacity:.62;}

/* the same audience marks in the Who we help menu, scaled down to suit a
   panel roughly half the size of the homepage cards */
.mega-cols.who .seg{position:relative;}
.mega-cols.who .seg b{padding-right:24px;}
/* colour and margin are restated because `.mega .seg span` already claims
   both for the description text, and it outranks .card-icon. Without this
   the marks inherit slate instead of jade, since the SVGs stroke with
   currentColor. */
.mega-cols.who .seg .card-icon{
  top:14px;right:14px;width:17px;height:17px;
  margin-top:0;color:var(--jade);
}
.mega-cols.who .seg:hover .card-icon{opacity:.78;}

/* the speciality. Marked out rather than just listed first, so it reads
   as a deliberate focus instead of alphabetical accident. */
.cards article.featured{
  border-color:var(--jade);
  background:linear-gradient(180deg,var(--jade-wash),var(--white) 55%);
  box-shadow:0 20px 46px -34px rgba(13,107,84,.7);
}
.cards article.featured .flag,
.mega .seg.featured .flag{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--jade);border-radius:20px;padding:4px 10px;
  align-self:flex-start;display:inline-block;
}
.mega .seg.featured{
  border-color:var(--jade);
  background:linear-gradient(180deg,var(--jade-wash),var(--white) 60%);
}
.mega .seg.featured .flag{margin-bottom:9px;}

/* ---------- checklist ---------- */
.ticks{display:grid;gap:9px;margin-top:14px;}
.ticks li{font-size:15.5px;display:flex;gap:11px;align-items:baseline;color:var(--ink);}
.ticks li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--jade);flex:0 0 auto;transform:translateY(-2px);}

/* ---------- phases (approach / how we work) ---------- */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,28px);margin-top:34px;}
.phases.four{grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);}
/* the four-step process is the same idea at a tighter measure */
.phases.four h3{font-size:clamp(17px,1.9vw,20px);}
.phases.four p{font-size:15px;}
.phases article{padding-top:20px;border-top:2px solid var(--jade);}
.phases .when{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--jade);}
.phases h3{font-family:var(--display);font-weight:700;font-size:clamp(18px,2.1vw,22px);letter-spacing:-.018em;margin:9px 0 9px;}
.phases p{font-size:15.5px;color:var(--slate);line-height:1.62;}

/* ---------- left spine ----------
   One hairline holding the left edge of the content, capped in solid
   jade at the top of each section. It sits in the gutter rather than
   indenting anything, so no existing layout moves. Below 900px the
   gutter is too narrow to hold it without crowding the text, so it
   comes off rather than getting squeezed. */
@media (min-width:900px){
  section:not(.cta) > .wrap,
  main > .wrap{position:relative;}
  section:not(.cta) > .wrap::before,
  main > .wrap::before{
    content:"";position:absolute;top:0;bottom:0;
    left:calc(var(--gut) - 26px);width:1px;background:var(--line);
  }
  section:not(.cta) > .wrap::after,
  main > .wrap::after{
    content:"";position:absolute;top:0;
    left:calc(var(--gut) - 27px);width:3px;height:54px;background:var(--jade);
  }

  /* The blog runs without the gutter rule. Its banner is a full-bleed dark
     band, and the hairline cuts straight through it and past the edge of
     the featured panel, which reads as an artifact rather than as the
     structural mark it is on the porcelain pages. */
  .blog-page section:not(.cta) > .wrap::before,
  .blog-page section:not(.cta) > .wrap::after,
  .blog-page main > .wrap::before,
  .blog-page main > .wrap::after{content:none;}
}

/* ============================================================
   IMAGE BANDS  —  direction A + D  (DRAFT)
   The photograph becomes the section rather than sitting in a box:
   dropped to roughly 15% brightness under an ink veil, and recoloured
   into ink / jade / porcelain so every image on the site shares one
   finish regardless of where it came from.

   There are no real photographs yet. The .sim-* classes below are CSS
   gradient meshes standing in for them, marked "simulated" on the
   page. Dropping a real shot in means replacing the contents of the
   .shot div with an <img> and deleting the .sim-* class. Nothing else
   changes.
   ============================================================ */
.imgband{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);}
.imgband > .shot{
  position:absolute;inset:0;z-index:0;
  filter:grayscale(1) contrast(1.12) brightness(1.04);
}
.imgband > .shot img{width:100%;height:100%;object-fit:cover;display:block;}

/* D, the two-tone finish: jade into the midtones, porcelain lifting
   the highlights back out so it doesn't go flat. Both layers are held
   back from full strength, because at full strength the multiply
   crushes the highlights and there is no tonal range left to see. */
.imgband::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--jade);mix-blend-mode:multiply;opacity:.88;}
.imgband::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:#EAF2EE;mix-blend-mode:lighten;opacity:.26;}

/* A, the veil that takes the picture down to a background.

   The alpha here is the whole trick, and it is easy to get wrong in
   the safe direction. At .94 the photograph spans nine levels out of
   255 and is invisible; the section just looks like flat ink. So the
   veil is heavy only where the copy actually sits, and clears to .34
   on the right where nothing is on top of it. That keeps roughly a
   hundred levels of image visible.

   The corollary: a band can only host copy that stops before the veil
   thins out. Anything full-width, like the four-step grid, needs its
   own section on porcelain. */
.imgband > .veil{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(14,21,19,.93) 0%, rgba(14,21,19,.86) 30%,
    rgba(14,21,19,.64) 58%, rgba(14,21,19,.34) 100%);}
.imgband > .wrap{position:relative;z-index:4;}

/* content sitting on a band goes light */
.imgband .eyebrow{color:#5BD3A6;}
.imgband .eyebrow::before{background:#5BD3A6;}
.imgband .h2{color:#fff;}
.imgband .lede{color:#B9CCC5;}
/* hero copy, which uses its own set of elements */
.imgband h1{color:#fff;}
.imgband h1 mark{color:#5BD3A6;}
.imgband .sub{color:#B9CCC5;}
.imgband .hl{color:#5BD3A6;}
.imgband .crumb{color:#8DA49D;}
.imgband .crumb a{color:#5BD3A6;}
.imgband .btn{background:#5BD3A6;color:var(--ink);}
.imgband .btn:hover{background:#7DE0BA;}
.imgband .phases article{border-top-color:#5BD3A6;}
.imgband .phases .when{color:#5BD3A6;}
.imgband .phases h3{color:#fff;}
.imgband .phases p{color:#B9CCC5;}
.imgband .btn-ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#DCE7E2;}
.imgband .btn-ghost:hover{border-color:#5BD3A6;color:#5BD3A6;}

/* The spine survives onto a band, just inverted. Needs the element
   qualifier to match the specificity of section:not(.cta) > .wrap
   above, otherwise the grey line wins and sits on a dark photo. */
@media (min-width:900px){
  section.imgband > .wrap::before{background:rgba(255,255,255,.22);}
  section.imgband > .wrap::after{background:#5BD3A6;}
  /* a light band keeps the ordinary spine */
  section.imgband.light > .wrap::before{background:var(--line);}
  section.imgband.light > .wrap::after{background:var(--jade);}
}

/* ---------- split band ----------
   Copy on a solid panel, photograph holding the right edge. Keeps the
   .imgband class for its light-on-dark type rules and inverted spine,
   but drops the jade/porcelain tinting layers: those exist to colour a
   photograph and only mute a flat panel. */
.splitband{background:linear-gradient(100deg,#16382C 0%,#113026 58%,#0D2620 100%);}
.splitband::before,.splitband::after{content:none;}
.splitband .split-media img{display:block;width:100%;height:100%;object-fit:cover;}

@media (min-width:900px){
  .splitband{min-height:clamp(360px,32vw,450px);display:flex;flex-direction:column;justify-content:center;}
  /* the section is a flex container here, so .wrap needs an explicit width.
     Its auto side margins are cross-axis margins in a column flex layout,
     and those shrink-wrap the element instead of letting it fill the row. */
  .splitband > .wrap{width:100%;}
  /* pinned rather than made a grid column, so .wrap stays a direct child
     of the section: both the spine and the page gutter alignment key off
     that relationship. */
  .splitband .split-media{position:absolute;top:0;right:0;bottom:0;width:45%;z-index:1;}
  /* The copy has to stop before the photo starts, and the photo's left
     edge is at 55vw while the copy's left edge is wherever the centred
     .wrap begins. Past roughly 2200px those two diverge: .wrap is pinned
     at --maxw and drifts right, so a plain vw cap lets the text run under
     the photo. Subtracting the wrap offset and the gutter keeps a 40px
     gap at every width instead. A page hero carries its copy straight in
     .wrap rather than a .sec-head, so that case caps one level down. */
  .splitband .sec-head,
  .splitband.phero > .wrap > *{
    max-width:min(46ch, calc(55vw - max(0px, (100vw - var(--maxw)) / 2) - var(--gut) - 40px));
  }
}
@media (max-width:899px){
  .splitband{padding-bottom:0;}
  .splitband .split-media{margin-top:clamp(30px,6vw,44px);height:clamp(210px,46vw,300px);}
}

/* ---------- light variant ----------
   Same idea, inverted: the photograph sits under a porcelain wash
   instead of an ink one, so the section keeps the light background
   and black text the rest of the site uses. The image reads as
   texture rather than as a dark panel.

   The photograph keeps its own colours. The duotone from the dark
   variant is off entirely here: any strength of jade multiply turns
   the picture green, and even a 10% tint reads once the rest of the
   frame is washed this pale. */
.imgband.light{background:var(--paper);}
/* photograph stays in its own colours: no greyscale, no jade tint,
   nothing on top of it but the wash */
.imgband.light > .shot{filter:none;}
.imgband.light::before{content:none;}
.imgband.light::after{content:none;}
/* Light copy on a light wash is the harder direction: body text is
   --slate, a midtone, so the *dark* parts of the photo are what
   threaten it, and this photo has a lot of dark wood.

   So the wash is held heavy across the copy and dropped hard once
   past it. The copy never reaches beyond about 56%, which is what
   buys the steep fall to .22 at the right edge: that side carries no
   text, so nothing there has to survive it. Measured worst case for
   body copy is 4.79:1. */
.imgband.light > .veil{background:linear-gradient(96deg,
  rgba(240,242,240,.95) 0%, rgba(240,242,240,.92) 30%,
  rgba(240,242,240,.85) 60%, rgba(240,242,240,.22) 100%);}

/* everything goes back to the normal palette */
.imgband.light .eyebrow{color:var(--jade);}
.imgband.light .eyebrow::before{background:var(--jade);}
.imgband.light h1,.imgband.light .h2{color:var(--ink);}
.imgband.light h1 mark{color:var(--jade);}
.imgband.light .sub,.imgband.light .lede{color:var(--slate);}
.imgband.light .hl{color:var(--jade);}
/* --slate-soft sits at only 4.35:1 over the darkest corner of a hero
   photo, under the 4.5 floor. --slate is the same family, one step down. */
.imgband.light .crumb{color:var(--slate);}
.imgband.light .crumb a{color:var(--jade);}
.imgband.light .btn{background:var(--jade);color:#fff;}
.imgband.light .btn:hover{background:var(--jade-deep);}
.imgband.light .btn-ghost{background:var(--white);border-color:var(--line);color:var(--ink);}
.imgband.light .btn-ghost:hover{border-color:var(--jade);color:var(--jade);}
.imgband.light .phases article{border-top-color:var(--jade);}
.imgband.light .phases .when{color:var(--jade);}
.imgband.light .phases h3{color:var(--ink);}
.imgband.light .phases p{color:var(--slate);}

/* ---------- split (text + panel) ---------- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,52px);align-items:start;}
.panel{background:var(--white);border:1px solid var(--line);border-radius:9px;padding:24px;}
.panel.accent{border-left:3px solid var(--jade);border-radius:0 9px 9px 0;}
.panel h3{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.018em;margin-bottom:10px;}
.panel p{font-size:15px;color:var(--slate);line-height:1.65;}
.panel .stat{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--jade);margin-bottom:9px;}

/* ---------- faq ---------- */
.faq{margin-top:30px;border-top:1px solid var(--line);}

/* ---------- blog post body ---------- */
/* Nothing new visually: the measure follows .faq .answer, the colour and
   line-height follow .lede, and headings keep the .h2 treatment used on
   every other page. Only the vertical rhythm of running prose is new,
   because no page carried long-form copy before. */
/* ---------- blog post cards ---------- */
/* A wrapping grid: image on top, then category tags, title, excerpt and a
   read link. The card surface, border, radius and hover lift are the same
   ones .cards article already uses, so this reads as the site's card in a
   different arrangement rather than a new component. */
/* One up on a phone, two from tablet, three on a wide screen. */
.postrow{
  display:grid;grid-template-columns:1fr;
  gap:30px 24px;margin-top:26px;
}
@media (min-width:700px){ .postrow{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .postrow{grid-template-columns:repeat(3,1fr);} }
.postrow > article{
  background:var(--white);border:1px solid var(--line);border-radius:7px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .25s ease,transform .25s ease;
}
.postrow > article:hover{border-color:var(--jade);transform:translateY(-3px);}
.postrow .thumb{display:block;background:var(--mist);}
.postrow .thumb img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;}
.postrow .card-in{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.postrow .tags{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--jade);text-transform:uppercase;font-weight:500;
}
/* Categories read as a list separated by a rule, not as one run-on string. */
.tags .tag-div{display:inline-block;margin:0 7px;opacity:.55;}
.postrow .byline{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--slate-soft);text-transform:uppercase;
}
.postrow h3{
  font-family:var(--display);font-weight:700;font-size:19px;
  letter-spacing:-.018em;line-height:1.2;text-wrap:balance;
}
.postrow .excerpt{font-size:15px;color:var(--slate);line-height:1.6;}
.postrow .read{margin-top:auto;padding-top:4px;}
.postrow > article[hidden]{display:none;}
.postrow-foot{margin-top:22px;}

/* ---------- blog hero: dark band, split into a text card and a photo ----------
   Same idea as a magazine cover: a plain "Blog" label up top, then one split
   panel doing the introducing instead of a paragraph of standfirst copy. */
.blog-hero{background:var(--ink);padding:clamp(28px,4vw,44px) 0 0;}
/* The page heading, light on the band, with the short rule the eyebrow uses. */
.blog-banner-title{
  font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;line-height:1;
  display:flex;align-items:center;gap:14px;
}
.blog-banner-title::before{content:"";width:34px;height:2px;background:#5BD3A6;flex:0 0 auto;}

/* ---------- featured-post slider ---------- */
.blog-slider{margin-top:24px;}
.blog-slider__track{display:grid;}
/* Slides stack on one cell and cross-fade; only the current one takes part
   in layout, hit-testing and the tab order. */
.blog-slide{
  grid-area:1/1;display:grid;grid-template-columns:1fr;
  opacity:0;visibility:hidden;transition:opacity .45s ease;
}
.blog-slide.is-on{opacity:1;visibility:visible;}
.js .blog-slide:not(.is-on){pointer-events:none;}
@media (prefers-reduced-motion:reduce){ .blog-slide{transition:none;} }

/* Two separate blocks rather than one joined rectangle. The photo sits high
   on the right; the title card drops below it on the left and slides under
   its edge, so the pair reads as a cover and a title rather than a single
   panel cut down the middle. Square corners, since nothing is a card here.
   Below 900px they stack and all of the offsetting comes off. */
@media (min-width:900px){
  /* The band stops short of the section, so the title card crosses the
     ink edge and hangs into the light instead of ending flush with it.
     The strip below is porcelain, not white: the card is white, and on a
     white strip its bottom edge simply vanished. The posts section below
     takes the same ground so there is no seam where they meet.

     The photo sits 112px above the card (its own margin-top), so with a
     strip shorter than that offset the photo's bottom edge landed inside
     the ink and never reached the porcelain at all - a block of bare dark
     green below the photo with nothing in it. 137px clears that at every
     width from 900px up, so the photo now crosses the seam by a real
     margin instead of stopping short of it. */
  .blog-hero{
    --strip:137px;
    background:linear-gradient(var(--ink) 0 calc(100% - var(--strip)),
                               var(--paper) calc(100% - var(--strip)) 100%);
  }
  /* Geometry measured off the reference's own rendered slide. The two
     blocks are one size there - identical width and height - so they share
     a ratio instead of each having their own. Each is 53% of the slide and
     they cross by 6%, which is why 53 + 53 - 6 comes back to 100. The
     photo sits exactly 125px above the card at every width, and the height
     is fixed rather than derived, stepping 400 -> 475 around 1400px. */
  /* Their blocks are a fixed height, so the ratio is set by how wide the
     slide is. Theirs runs 91.5% of the viewport and caps at 1550, which is
     wider than this site's 1240 measure - so the hero gets its own width
     and the heading rides along with it, keeping the label aligned to the
     card's edge. Measured against their page this lands within a few px at
     every width and exactly on 1550 at 1920. */
  .blog-hero{padding-top:69px;}
  .blog-hero > .wrap{
    width:min(81.4vw,1385px);max-width:none;
    padding-left:0;padding-right:0;
  }
  /* Their heading is not aligned to the slide: it sits in its own fixed
     1170 container centred on the viewport, so it runs flush with the card
     on a narrow screen and indents from it on a wide one. Taken at their
     figure rather than scaled with the slide, since the ask was for this
     one to land exactly where theirs does - which it now does to the pixel
     at 1280, 1600 and 1920. The margin recentres it on the viewport from
     inside a wrap that is narrower than it. */
  .blog-banner-title{
    --tw:min(1170px,calc(100vw - 40px));
    width:var(--tw);
    margin-left:calc(50% - var(--tw) / 2);
  }
  /* title baseline to the top of the slide */
  .blog-slider{margin-top:46px;}
  /* The middle column is the overlap itself, so both blocks are literally
     the same track count wide - 47 + 6 and 6 + 47 - and come out identical
     without any arithmetic. A negative percentage margin cannot do this:
     percentages on a grid item resolve against its own grid area, not the
     grid, so the offset lands short. */
  .blog-slide{
    grid-template-columns:47% 6% 47%;
    align-items:start;
  }
  .blog-slide__card,
  .blog-slide__photo{height:358px;}
  .blog-slide__card{
    grid-column:1 / 3;grid-row:1;z-index:1;
    margin-top:112px;
    /* keep the copy clear of the photo's overhanging edge */
    padding-right:clamp(56px,7vw,104px);
  }
  .blog-slide__photo{
    grid-column:2 / 4;grid-row:1;z-index:2;
  }
}
@media (min-width:1400px){
  .blog-slide__card,
  .blog-slide__photo{height:426px;}
}
.blog-slide__card{
  background:var(--white);padding:clamp(30px,4vw,56px) clamp(24px,3.4vw,44px);
  display:flex;flex-direction:column;justify-content:center;gap:16px;
}
.blog-slide__card .pin{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;gap:8px;margin-bottom:-6px;
}
.blog-slide__card .pin::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--jade);flex:0 0 auto;}
.blog-slide__card .tags{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--jade);
}
.blog-slide__card h3{
  font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.05;
  font-size:clamp(26px,3.2vw,38px);text-wrap:balance;
}
.blog-slide__card h3 a{color:inherit;}
.blog-slide__card h3 a:hover{color:var(--jade);}
.blog-slide__card .read a{font-weight:700;}
.blog-slide__photo{display:block;background:var(--mist);min-height:220px;}
.blog-slide__photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* Arrows and dots. The strip carries a hidden attribute in the markup and
   the script only reveals it once there is a second slide to move to. */
.blog-slider{position:relative;}
.blog-slider__controls{
  display:flex;align-items:center;gap:16px;
  padding:16px 2px 4px;
}
/* display:flex outranks the browser's [hidden]{display:none}, so a single
   featured post would still draw a pair of dead arrows without this. */
.blog-slider__controls[hidden]{display:none;}

.blog-slider__arrow{
  width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;
  background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:50%;
  cursor:pointer;transition:border-color .2s ease,background .2s ease,opacity .2s ease;
}
.blog-slider__arrow svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.blog-slider__arrow:hover:not(:disabled){border-color:#5BD3A6;background:rgba(91,211,166,.12);}
.blog-slider__arrow:disabled{opacity:.3;cursor:default;}
.blog-slider__dots{display:flex;align-items:center;gap:9px;margin-right:auto;}
.blog-slider__dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.32);transition:background .2s ease,transform .2s ease;
}
.blog-slider__dots button[aria-selected="true"]{background:#5BD3A6;transform:scale(1.25);}

/* Once the two blocks stagger, the controls go where the reference puts
   them: arrows pinned to the outer edges and centred on the photo, dots
   centred underneath. The arrows cross both the white card and the photo,
   so they carry their own ink disc - a white-stroked arrow alone vanishes
   against the card. The dots land on the white strip, so they invert too.
   This block has to sit after the base rules above, not before: it is the
   same specificity, so order is the only thing deciding it. */
@media (min-width:900px){
  .blog-slider__controls{display:block;padding:0;}
  /* Outside the slide, in the band's margin, the way the reference places
     them - not laid over the card, where a white-stroked arrow disappeared.
     The 10% trim to the slide is what opens up the room for them. */
  .blog-slider__arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  }
  .blog-slider__arrow:disabled{opacity:.35;}
  .blog-slider__arrow[data-prev]{left:-52px;}
  .blog-slider__arrow[data-next]{right:-52px;}
  .blog-slider__dots{justify-content:center;margin:0;padding:18px 0 4px;}
  .blog-slider__dots button{background:rgba(14,21,19,.34);}
  .blog-slider__dots button[aria-selected="true"]{background:var(--jade);}
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- blog toolbar: search + topic dropdown ---------- */
/* Same surface language as .topic (mono label, white field, jade on focus),
   just laid out as a search box and a select instead of a row of chips. */
.blog-toolbar{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.blog-search{
  position:relative;flex:1 1 260px;
}
.blog-search svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;stroke:var(--slate-soft);fill:none;stroke-width:1.8;
  pointer-events:none;
}
.blog-search input{
  width:100%;min-height:46px;padding:0 14px 0 40px;
  font-family:var(--body);font-size:15px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  transition:border-color .2s ease;
}
.blog-search input::placeholder{color:var(--slate-soft);}
.blog-search input:focus-visible{outline:2px solid var(--jade);outline-offset:1px;}
.blog-filter{position:relative;flex:0 0 auto;}
.blog-filter select{
  appearance:none;min-height:46px;padding:0 38px 0 16px;
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  cursor:pointer;transition:border-color .2s ease;
}
.blog-filter select:hover,.blog-filter select:focus-visible{border-color:var(--jade);outline:none;}
.blog-filter::after{
  content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--jade);border-bottom:2px solid var(--jade);
  transform:translateY(-65%) rotate(45deg);pointer-events:none;
}

/* ---------- blog images inside a post ---------- */
.post-body figure{margin:28px 0;}
.post-body figure img{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:7px;
}
.post-body figcaption{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--slate-soft);margin-top:10px;
}

/* ---------- blog topic filter ---------- */
/* Borrowed wholesale from what already exists: the mono label treatment of
   .eyebrow, the border and radius of .btn-ghost, and .jade-wash for the
   active state, so the chips read as part of the site rather than a widget. */
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}
.topic{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);
  background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:9px 14px;min-height:44px;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.topic:hover{border-color:var(--jade);color:var(--jade);}
.topic.is-on{background:var(--jade-wash);border-color:var(--jade);color:var(--jade);}
.topic-count{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate-soft);margin-top:14px;min-height:1.1em;
}
.topic-empty{margin-top:20px;color:var(--slate);font-size:16px;}
.cards article[hidden]{display:none;}

/* ---------- post frame ----------
   The whole post - banner, byline, article - as one full-bleed section
   running edge to edge, the way the rest of the site's sections do. It
   was briefly inset from the browser edges with visible porcelain margin
   on both sides, which read as the post not being full screen, so that
   margin, the rounded corners and the shadow are gone; .post-frame is now
   just the wrapper the centering and the white-background fix hang off
   of, with no width or spacing of its own. */
/* .blog-page .band sets the listing page's post grid onto paper, since
   its white cards need something to read against - but every blog page
   carries that body class, including this one, so the article section
   inside the frame was inheriting it too: a paper band directly under a
   white byline row, two shades of "white" touching with nothing between
   them. Restore plain white for the band inside the frame specifically,
   without touching the listing page's grid. */
.post-frame .band{background:var(--white);}

.post-hero{background:var(--ink);padding:56px 0 clamp(80px,10vw,120px);}
/* Crumb, tags and title are centre-aligned text, not left-aligned text in
   a centred box - the request was for the words themselves to sit in the
   middle, not just the column holding them. */
.post-hero .wrap{text-align:center;display:flex;flex-direction:column;align-items:center;}
.post-hero .crumb{color:#8DA49D;margin-bottom:22px;}
.post-hero .crumb a{color:#5BD3A6;}
.post-hero .tags{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:#5BD3A6;margin-bottom:16px;
}
.post-hero h1{
  font-family:var(--display);font-weight:700;color:#fff;
  letter-spacing:-.022em;line-height:1.08;text-wrap:balance;
  font-size:clamp(30px,4.2vw,48px);max-width:20ch;
}

/* The byline sits directly in the white area now, not a floating card of
   its own - the frame is what makes it read as "resting on a section",
   so it does not also need its own box. A small negative margin still
   pulls it up to cross the ink/white seam. Centred, same as the banner
   above it. */
.post-hero-byline{
  position:relative;z-index:1;background:var(--white);
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:clamp(-40px,-4vw,-24px);padding:22px var(--gut) 6px;
}
.post-hero-byline .avatar{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  background:var(--jade);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:16px;
}
.post-hero-byline .byline-text{color:var(--slate);font-size:15px;}
.post-hero-byline .byline-text b{color:var(--ink);font-weight:700;}
.post-hero-byline .dot{color:var(--line);margin:0 2px;}

.post-body{max-width:84ch;margin:0 auto;}
.post-body p{color:var(--slate);font-size:16.5px;line-height:1.7;margin-top:16px;}
.post-body p.lede{color:var(--slate);font-size:17.5px;line-height:1.6;margin-top:0;}
.post-body .h2{margin-top:38px;}
.post-body .h2 + p{margin-top:12px;}
.post-body .ticks{margin-top:16px;}
.post-body b.hl{font-weight:700;}
.post-body b{color:var(--ink);}
.post-body code{font-family:var(--mono);font-size:.88em;background:var(--mist);padding:1px 6px;border-radius:3px;color:var(--ink);}

/* Underlines in a post carry meaning: the author marks takeaways with them,
   so they get a solid ink rule rather than the browser's hairline default. */
.post-body u{
  text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:3px;text-decoration-color:var(--ink);
}
/* Footnote markers. Bold in the source; here they also jump to the entry. */
.post-body .cite{font-weight:700;color:var(--jade);white-space:nowrap;}
.post-body .cite:hover{color:var(--jade-deep);}

/* The "We write for the TL;DR crowd" box that opens the piece. Same surface
   as .panel.accent so a boxed aside reads as the site's, not the PDF's. */
.post-body .tldr{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--jade);
  border-radius:0 9px 9px 0;padding:24px 26px;margin-bottom:32px;
}
.post-body .tldr p{margin-top:13px;font-size:15.5px;line-height:1.65;}
.post-body .tldr p:first-child{margin-top:0;}

/* Bulleted list, filled markers, matching the dot used in the legal pages. */
.post-body ul.dots{margin-top:16px;display:grid;gap:10px;}
.post-body ul.dots li{
  color:var(--slate);font-size:16.5px;line-height:1.7;
  padding-left:22px;position:relative;
}
.post-body ul.dots li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--jade);
}

/* The four-step framework table, and the one thing in the piece a reader
   should leave with. So it is built as a spotlight rather than a box: ink
   ground against the porcelain band, and wider than the reading measure, so
   it interrupts the column instead of sitting politely inside it. The
   breakout only runs once there is gutter to spend - below 1000px the panel
   stays exactly as wide as the text. */
.post-body .steps{
  display:grid;grid-template-columns:1fr;margin:40px 0;
  background:var(--ink);border-radius:12px;overflow:hidden;
  box-shadow:0 20px 44px rgba(14,21,19,.20);
}
@media (min-width:720px){ .post-body .steps{grid-template-columns:1fr 1fr;} }
@media (min-width:1000px){ .post-body .steps{width:calc(100% + 180px);} }
.post-body .step{padding:28px 30px 32px;border-bottom:1px solid rgba(255,255,255,.13);}
.post-body .step:last-child{border-bottom:0;}
@media (min-width:720px){
  .post-body .step:nth-child(odd){border-right:1px solid rgba(255,255,255,.13);}
  .post-body .step:nth-last-child(-n+2){border-bottom:0;}
}
/* "STEP 1:" stays a quiet label; "DEFINE" is what has to be memorable, so
   it gets the display face at heading size. */
.post-body .step-head{margin:0 0 16px;}
.post-body .step-n{
  display:block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#5BD3A6;margin-bottom:7px;
}
.post-body .step-w{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(23px,2.7vw,31px);letter-spacing:-.022em;line-height:1;color:#fff;
}
.post-body .step ul{display:grid;gap:11px;}
.post-body .step li{
  color:#B9CCC5;font-size:15.5px;line-height:1.6;
  padding-left:21px;position:relative;
}
/* Hollow rings, the way the source document marks these sub-points. */
.post-body .step li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:7px;height:7px;border-radius:50%;border:1.5px solid #5BD3A6;
}

/* The entries carry their own [n] markers, as the source document does, so
   the list must not also draw the browser's numbering. */
.post-body .sources{margin-top:14px;display:grid;gap:12px;list-style:none;padding-left:0;}
.post-body .sources li{
  font-size:13.5px;color:var(--slate-soft);line-height:1.6;
  overflow-wrap:anywhere;
}
.post-body .sources li b{color:var(--jade);font-family:var(--mono);font-size:12.5px;}
.post-body .sources .srclink{color:var(--slate);}

.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 44px 19px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--jade);border-bottom:2px solid var(--jade);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg);}
.faq summary:hover{color:var(--jade);}
.faq .answer{padding:0 44px 20px 0;color:var(--slate);font-size:16px;line-height:1.65;max-width:70ch;}

/* ---------- closing CTA ---------- */
.cta{background:var(--ink);color:#DCE7E2;}
.cta .wrap{padding-top:clamp(48px,6vw,78px);padding-bottom:clamp(48px,6vw,78px);}
.cta .eyebrow{color:#5BD3A6;}
.cta .eyebrow::before{background:#5BD3A6;}
.cta h2{font-family:var(--display);font-weight:700;letter-spacing:-.024em;font-size:clamp(26px,3.8vw,42px);line-height:1.04;margin-top:15px;max-width:20ch;color:#fff;text-wrap:balance;}
.cta p{margin-top:16px;color:#A9BDB6;max-width:50ch;font-size:16.5px;}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.cta .btn{background:#5BD3A6;color:var(--ink);}
.cta .btn:hover{background:#7DE0BA;}
.cta .btn-ghost{background:transparent;border-color:rgba(255,255,255,.25);color:#DCE7E2;}
.cta .btn-ghost:hover{border-color:#5BD3A6;color:#5BD3A6;}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#A9BDB6;}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px);padding-top:clamp(40px,5vw,60px);padding-bottom:36px;}
/* light logo file rather than a CSS invert, which flattened the jade
   square to white along with the letters */
.foot-brand img{height:22px;width:auto;display:block;}
.foot-brand p{margin-top:14px;font-size:15px;color:#9FB6AE;max-width:34ch;line-height:1.65;}
.contact-address{font-style:normal;font-size:16px;line-height:1.75;}
.contact-address a{border-bottom:0;}
.contact-address a:hover{text-decoration:underline;text-underline-offset:3px;}
/* ---------- footer social ---------- */
/* Brand marks are filled rather than stroked, unlike .card-icon, because a
   logo outline stops being recognisable. Colour, border and hover come from
   the footer's existing palette. 44px boxes so they are a real tap target. */
.foot-social{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;margin-bottom:22px;}  /* sits closer to the logo than to the paragraph below, so it reads as
     part of the brand block rather than a lead-in to the copy */
.foot-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.16);border-radius:4px;
  color:#A9BDB6;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.foot-social a:hover{color:#5BD3A6;border-color:#5BD3A6;background:rgba(91,211,166,.08);}
.foot-social a:focus-visible{outline:2px solid #5BD3A6;outline-offset:2px;}
.foot-social svg{width:17px;height:17px;display:block;fill:currentColor;}

.foot-address{margin-top:28px;font-style:normal;font-size:14px;color:#8DA49D;line-height:1.7;}
.foot-address b{display:block;color:#C3D2CC;font-weight:600;font-size:14px;margin-bottom:3px;}
.foot h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#5BD3A6;font-weight:500;margin-bottom:13px;}
.foot ul{display:grid;gap:9px;}
.foot li a{font-size:14px;color:#A9BDB6;transition:color .2s ease;}
.foot li a:hover{color:#fff;}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  padding-top:20px;padding-bottom:32px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:#8DA49D;
}
.foot-bottom a:hover{color:#5BD3A6;}

/* ---------- footer: Small Business Initiative callout ---------- */
/* Same row treatment as the newsletter signup below it, so the two read
   as a matched pair rather than one looking bolted on. */
.foot-sbi{
  border-top:1px solid rgba(255,255,255,.1);
  display:grid;grid-template-columns:1.4fr 1fr;
  gap:20px clamp(24px,4vw,48px);align-items:center;
  padding:26px 0;
}
.foot-sbi p{font-size:14px;color:#9FB6AE;max-width:44ch;line-height:1.65;}
.foot-sbi-actions{display:flex;gap:12px;flex-wrap:wrap;}
.foot-sbi-actions a{
  display:flex;align-items:center;justify-content:center;
  flex:1 1 140px;min-height:44px;padding:13px 20px;
  border-radius:2px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:500;
}
.foot-sbi a.btn-sbi{
  background:#5BD3A6;color:var(--ink);
  transition:background .2s ease;
}
.foot-sbi a.btn-sbi:hover{background:#7BE0BA;}
.foot-sbi a.btn-sbi:focus-visible{outline:2px solid #5BD3A6;outline-offset:2px;}

/* Join now: starts as a thin outline, fills in from the middle
   outward on hover/focus via a scaleX(0) -> scaleX(1) pseudo-element
   rather than animating background directly, which is what makes it
   expand from center instead of sliding in from one edge. */
.foot-sbi a.btn-join{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid #5BD3A6;color:#5BD3A6;background:transparent;
  transition:color .3s ease;
}
.foot-sbi a.btn-join::before{
  content:"";position:absolute;inset:0;
  background:#5BD3A6;
  transform:scaleX(0);transform-origin:center;
  transition:transform .35s cubic-bezier(.22,.65,.25,1);
  z-index:-1;
}
.foot-sbi a.btn-join:hover,
.foot-sbi a.btn-join:focus-visible{ color:var(--ink); }
.foot-sbi a.btn-join:hover::before,
.foot-sbi a.btn-join:focus-visible::before{ transform:scaleX(1); }
.foot-sbi a.btn-join:focus-visible{outline:2px solid #5BD3A6;outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  .foot-sbi a.btn-join::before{transition-duration:.001ms;}
}
@media (max-width:820px){
  .foot-sbi{grid-template-columns:1fr;}
}

/* ---------- footer newsletter ---------- */
/* Sits between the link columns and the legal row. Netlify Forms captures
   it from the static markup; site.js intercepts the submit so a subscriber
   is not thrown to a success page from the bottom of whatever they were
   reading. Falls back to a native POST if the script never runs. */
.foot-news{
  border-top:1px solid rgba(255,255,255,.1);
  display:grid;grid-template-columns:1.4fr 1fr;
  gap:20px clamp(24px,4vw,48px);align-items:center;
  padding:26px 0;
}
.foot-news p{font-size:14px;color:#9FB6AE;max-width:44ch;line-height:1.65;}
.foot-news form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;}
.foot-news .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}
.foot-news input[type="email"]{
  flex:1 1 200px;min-width:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:2px;
  padding:11px 13px;
  font-family:var(--body);font-size:14px;color:#fff;
  transition:border-color .2s ease,background .2s ease;
}
.foot-news input[type="email"]::placeholder{color:#7E938C;}
/* The ring has to be the light jade here: the global --jade only reaches
   2.86:1 against the footer ink, under the 3:1 required of a UI element. */
.foot-news input[type="email"]:focus-visible{
  outline:2px solid #5BD3A6;outline-offset:2px;
  border-color:#5BD3A6;background:rgba(255,255,255,.09);
}
.foot-news input[type="email"]:focus{
  border-color:#5BD3A6;background:rgba(255,255,255,.09);
}
.foot-news button{
  flex:0 0 auto;background:#5BD3A6;color:var(--ink);
  border:0;border-radius:2px;padding:11px 20px;min-height:44px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:500;
  cursor:pointer;transition:background .2s ease;
}
.foot-news button:focus-visible{outline:2px solid #5BD3A6;outline-offset:2px;}
.foot-news button:hover{background:#7BE0BA;}
.foot-news button:disabled{opacity:.55;cursor:default;}
.foot-news .news-state{
  flex:1 1 100%;margin:0;min-height:1.1em;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
}
.foot-news .news-state.ok{color:#5BD3A6;}
.foot-news .news-state.fail{color:#E58C74;}
@media (max-width:820px){
  .foot-news{grid-template-columns:1fr;}
  /* The content grids above the footer collapse at 1080px while this
     stayed at four columns until 640px, so on a tablet the page read as
     two columns above a cramped four-column footer. Collapsing here
     lines it up with the two rows directly above it. */
  .foot-top{grid-template-columns:1fr 1fr;}
}

/* ---------- reveal (gated on .js so a script failure can't blank a page) ---------- */
/* Soft focus. Content arrives slightly out of focus and settles,
   rather than sliding. --i is the element's index within its own
   group, set in site.js, so a row of four staggers in order instead
   of by arbitrary position in the document. */
.js .reveal{opacity:0;filter:blur(9px);transform:scale(.988);}
.js .reveal.in{
  opacity:1;filter:blur(0);transform:none;
  transition:opacity .42s ease,
             filter .42s cubic-bezier(.22,.65,.25,1),
             transform .42s cubic-bezier(.22,.65,.25,1);
  transition-delay:calc(var(--i,0) * 45ms);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .cards.c4{grid-template-columns:repeat(2,1fr);}
  .cards.c3{grid-template-columns:repeat(2,1fr);}
  .phases{grid-template-columns:1fr;}
  /* .phases.four is 0,2,0 so a plain .phases rule can't override it,
     media query or not. It has to be matched selector for selector. */
  .phases.four{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;}
  .mega-cols.five{grid-template-columns:repeat(3,1fr);}
  .mega-cols.who{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .nav-toggle{display:inline-flex;}
  .nav-panel{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--white);border-bottom:1px solid var(--line);
    max-height:calc(100vh - var(--navh));overflow-y:auto;
    box-shadow:0 26px 50px -34px rgba(14,21,19,.5);
  }
  .nav-panel.open{display:block;}
  .nav-bar{position:relative;}
  .menu{flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 18px;}
  .menu-link,.menu-trigger{
    width:100%;justify-content:space-between;padding:14px 0;border-radius:0;
    border-bottom:1px solid var(--line-soft);font-size:16px;color:var(--ink);
  }
  .menu-link:hover,.menu-trigger:hover{background:none;}
  .mega{
    position:static;opacity:1;visibility:visible;transform:none;transition:none;
    box-shadow:none;border-bottom:0;display:none;background:var(--paper);
    border-radius:6px;margin:10px 0 4px;
  }
  .has-mega.open .mega{display:block;}
  .mega-in{padding:14px;}
  .mega-cols.five,.mega-cols.who{grid-template-columns:1fr;gap:10px;}
  .mega-foot{margin-top:14px;}
  .nav-cta{margin:14px 0 0;justify-content:center;}
}
@media (max-width:640px){
  .cards.c4,.cards.c3,.cards.c2{grid-template-columns:1fr;}
  /* one per row on a phone, so the four steps read as a list
     rather than four squeezed columns */
  .phases,.phases.four{grid-template-columns:1fr;}
  .phases.four h3{font-size:20px;}
  /* .foot-top drops to two columns at 820px now, so it no longer needs
     a rule here; 560px still takes it down to one. */
  /* On a phone the copy runs the full width, so there is no clear
     side for the veil to thin out into. Flat, and set by measuring
     the worst pixel in the photo rather than by eye: .72 leaves the
     body copy at about 6.5:1, which is still well clear of AA. */
  .imgband > .veil{background:rgba(14,21,19,.72);}
  /* Flat, because full-width copy leaves no side to open up into.
     .85 is the floor: below it the body copy drops under 4.5:1. */
  .imgband.light > .veil{background:rgba(240,242,240,.85);}
}
@media (max-width:560px){ .foot-top{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .js .reveal{opacity:1;transform:none;filter:none;}
}

/* ---------- page transition ----------
   A porcelain panel carrying the wordmark covers the page on arrival and
   clears itself on a CSS timer that needs no script, so a slow or broken
   site.js can never leave a visitor staring at a blank panel. Arriving and
   leaving get a pseudo-element each rather than sharing one, so neither
   has to cancel the other's animation mid-flight. Both hang off <html>,
   which is why no page needed extra markup.
   Reduced motion is already covered by the block above: it flattens every
   animation and transition to .001ms, so the panel never appears. */
html.js::before,
html.js::after{
  content:"";position:fixed;inset:0;z-index:9999;
  background:var(--paper) url("../images/navren-logo.png") no-repeat center / min(200px,42vw) auto;
}
/* arriving: hold briefly, then fade off the page */
html.js::before{animation:pt-arrive .8s ease forwards;}
@keyframes pt-arrive{
  0%,42%{opacity:1;visibility:visible;}
  100%  {opacity:0;visibility:hidden;}
}
/* leaving: site.js adds .is-leaving, and the panel fades back in.
   visibility is delayed out so it stops catching clicks only once faded. */
html.js::after{opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s;}
html.js.is-leaving::after{opacity:1;visibility:visible;transition:opacity .22s ease;}