/* ===========================================================================
   Navig Partners - shared theme layer (editorial pass)
   Loaded after each page's base styles so it restyles every page alike.
   =========================================================================== */


/* centered section headers, twin rule lines */
.head{margin-left:auto;margin-right:auto;text-align:center;max-width:72ch}
.head p{margin-left:auto;margin-right:auto}
.head .eyebrow::after{content:"";width:38px;height:1px;background:var(--clay);flex:none}
.head .eyebrow.on-dark::after{background:#E0A582}
.final .head{margin-left:0;text-align:left}
.final .head p{margin-left:0}

/* light airy counters band */
.statband{background:var(--white);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:92px 0}
.statband .netbg{display:none}
.statband .st{border-left-color:var(--hair);text-align:center;padding:10px 20px}
.statband .st{padding:8px 22px}
.statband .st .n{color:var(--green);font-size:clamp(30px,3.8vw,47px);white-space:nowrap}
.statband .st .l{color:var(--ink-mute);margin:16px auto 0;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;max-width:24ch}
.statnote{color:var(--ink-mute);text-align:center;margin-top:44px}

/* principles: 4-up centered, bold icon on organic blob */
.pgrid{grid-template-columns:repeat(4,1fr);gap:56px 16px;border-top:none;margin-top:68px;margin-left:-24px;margin-right:-24px}
.pgrid .pr{border:none;padding:0;text-align:center}
.pgrid .pr:nth-child(odd){border-right:none;padding-right:0}
.pgrid .pr:nth-child(even){padding-left:0}
.pr .pn{flex-direction:column;gap:28px}
.pr .pi{width:118px;height:118px;background:transparent;position:relative;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .55s var(--ease)}
.pr .pi .blob{position:absolute;inset:0;width:100%;height:100%;fill:var(--green-pale);transition:fill .45s,transform .8s var(--ease)}
.pr .pi svg.ic{position:relative;z-index:2;width:48px;height:48px;fill:var(--green)}
.pr:hover .pi{transform:translateY(-6px)}
.pr:hover .pi .blob{transform:rotate(-14deg)}
.pr h4{font-size:21px;font-weight:600;line-height:1.32;min-height:2.64em;display:flex;align-items:center;justify-content:center}
.pr p{margin:14px 0 0;font-size:15.5px;line-height:1.68;max-width:none}

/* insight cards: meta + title above image, arrow under */
.icard .ik{order:1;margin-top:0}
.icard h4{order:2;margin-top:12px;min-height:56px}
.icard .ithumb{order:3;margin-top:22px}
.icard .more{order:4;margin-top:20px}

/* centered chips */
.tasks{justify-content:flex-start}
.tasks::after{content:"";flex:none;width:1px}
.fnote2{font-family:'Fraunces';font-size:19px;color:#DCE7E0;line-height:1.55}

@media (max-width:960px){
  .pgrid{grid-template-columns:1fr 1fr;margin-left:0;margin-right:0;gap:52px 30px}
}
@media (max-width:860px){
  .hero{padding:84px 0 104px}
}
@media (max-width:520px){
  .pgrid{grid-template-columns:1fr}
}

/* ============ NAV (shared across every page) ============
   Default = solid light bar (inner pages).
   body.home = transparent bar over the hero image, turning solid on scroll. */
header.nav{position:sticky;top:0;z-index:80;background:var(--paper);border-bottom:1px solid var(--hair);transition:background .35s,border-color .35s,box-shadow .35s}
header.nav.scr{box-shadow:0 14px 34px -26px rgba(16,42,32,.4)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:84px;max-width:none;padding:0 44px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:42px;width:auto;display:block}
.brand .lg-light{display:none}
.brand .lg-dark{display:block}
.nlinks{display:flex;align-items:center;gap:34px}
.nlinks a{font-size:12px;color:var(--ink-soft);font-weight:600;letter-spacing:.12em;text-transform:uppercase;position:relative;transition:color .25s}
.nlinks a:not(.ncta){padding:5px 0}
.nlinks a:not(.ncta)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--clay);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nlinks a:hover{color:var(--ink)}
.nlinks a:not(.ncta):hover::after,.nlinks a.on::after{transform:scaleX(1);transform-origin:left}
.ncta{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;background-color:var(--green);color:#fff!important;padding:16px 26px;font-weight:600;font-size:11.5px;letter-spacing:.14em;border:1px solid var(--green);border-radius:0;background-image:linear-gradient(var(--green-deep),var(--green-deep));background-repeat:no-repeat;background-position:0 100%;background-size:100% 0;transition:background-size .5s var(--ease),border-color .3s}
.ncta:hover{background-size:100% 100%;border-color:var(--green-deep);transform:none}
.ncta .a{transition:transform .3s var(--ease);font-size:13px;line-height:1}
.ncta:hover .a{transform:translateX(4px)}
.mbtn{display:none;background:none;border:1px solid var(--sand);border-radius:0;padding:9px 14px;cursor:pointer;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-family:'Inter';transition:color .35s,border-color .35s}

/* homepage: transparent over hero */
body.home header.nav{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom-color:transparent}
body.home header.nav .brand .lg-light{display:block}
body.home header.nav .brand .lg-dark{display:none}
body.home header.nav .nlinks a{color:#EAF1EC}
body.home header.nav .nlinks a:hover{color:#fff}
body.home header.nav .mbtn{color:#fff;border-color:rgba(255,255,255,.4)}
body.home header.nav.scr{position:fixed;background:var(--paper);border-bottom-color:var(--hair)}
body.home header.nav.scr .brand .lg-light{display:none}
body.home header.nav.scr .brand .lg-dark{display:block}
body.home header.nav.scr .nlinks a{color:var(--ink-soft)}
body.home header.nav.scr .nlinks a:hover{color:var(--ink)}
body.home header.nav.scr .mbtn{color:var(--ink);border-color:var(--sand)}

@media (max-width:860px){
  .nlinks{display:none}
  .mbtn{display:block}
  .nav-in{height:70px;padding:0 22px}
}

/* ============ BLOCK CONSISTENCY (homepage parity) ============
   The homepage uses a sharp-edged, hairline-ruled block language.
   Inner pages shipped with rounded cards and pill chips, so square
   everything off here, then restore the marks that are meant to be
   circular. --r is the shared card-radius token used by inner pages. */
:root{--r:0px}
header *, section *, footer *,
.ctaband *, .imgband *, .qband *, .statband *, .final *{border-radius:0!important}
.cap .ci,.ch .ci,.chip i,.dotok,.dotwarn,.fmid .ring,.fq .pl,.hvi .ck,
.pill i,.poslegend i,.pvn,.rklist li::before,.rrow .rm,.smid .node,
.vplay,.pr .pi{border-radius:50%!important}

/* cards: hairline border + lift on hover, no soft drop shadows */
.scard,.rolecard,.acard,.rcard,.vcard,.poscard,.riskbox,.svc,.cmpc,
.baitem,.drvc,.dec,.dil,.feat,.tm,.bn,.dob{box-shadow:none}
.scard:hover,.rolecard:hover,.acard:hover,.rcard:hover,.vcard:hover,
.poscard:hover,.svc:hover,.cmpc:hover,.baitem:hover,.drvc:hover,
.dec:hover,.tm:hover{box-shadow:none;transform:translateY(-4px)}

/* page hero: same rhythm as the homepage hero */
.phero{padding:64px 0 78px}
.phero h1{font-size:clamp(38px,5vw,62px);letter-spacing:-0.01em}
.phero .lede{font-size:clamp(17.5px,2vw,20px);line-height:1.7}
.crumb{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}

/* ============ TYPOGRAPHY (homepage parity) ============
   Pages shipped in two generations: index/providers carried the newer
   scale, the rest an older one (smaller h2, heavier weight, tighter
   tracking). Normalise everything to the homepage values. */
h1,h2,h3,h4,h5{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-0.01em;line-height:1.14}
h1,h2{font-weight:400}
h1 em,h2 em,h3 em{font-style:normal;color:var(--green)}
.head h2{font-size:clamp(30px,4vw,47px)}
.head p{font-size:18px;margin-top:22px;max-width:58ch}
.lede{font-size:clamp(17.5px,2vw,19.5px);line-height:1.72;max-width:52ch;margin-top:26px}


/* ============ CONTACT FORM (shared across every page) ============
   Minimal underline fields. Field icons are injected from the input's
   id, so no page needs extra markup - the same form HTML on every page
   picks up the same treatment. */
.fcard{background:transparent;border:none;padding:0}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:36px 34px;margin-bottom:36px}
.ffield{position:relative;display:block}
.ffield.full{grid-column:1/-1}
.ffield label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ffield input,.ffield select,.ffield textarea{width:100%;background-color:transparent;background-repeat:no-repeat;background-position:0 2px;background-size:19px 19px;border:none;border-bottom:1px solid var(--green-line);padding:0 0 15px 32px;color:#fff;font-family:'Inter';font-size:15.5px;transition:border-color .35s}
.ffield input::placeholder,.ffield textarea::placeholder{color:#8FBAA4;opacity:1}
.ffield input:focus,.ffield select:focus,.ffield textarea:focus{outline:none;border-bottom-color:var(--clay)}
.ffield select{appearance:none;cursor:pointer;color:#8FBAA4}
.ffield select:valid{color:#fff}
.ffield select option{background:#102A20;color:#fff}
.ffield textarea{resize:vertical;min-height:52px;line-height:1.6;background-position:0 3px}
.ffield #cf-name{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FBAA4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e")}
.ffield #cf-role{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FBAA4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 16v-4M12 8h.01'/%3e%3c/svg%3e")}
.ffield #cf-email{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FBAA4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='2' y='4' width='20' height='16' rx='2'/%3e%3cpath d='m2 7 10 6 10-6'/%3e%3c/svg%3e")}
.ffield #cf-phone{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FBAA4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2Z'/%3e%3c/svg%3e")}
.ffield #cf-biz{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FBAA4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 21h18M5 21V7l7-4 7 4v14'/%3e%3cpath d='M10 21v-5h4v5'/%3e%3c/svg%3e")}
.ffield #cf-city{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FBAA4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e")}
.ffield #cf-msg{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FBAA4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M17 3a2.8 2.8 0 0 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3e%3c/svg%3e")}

/* submit row: button right, consent (homepage) left */
.fbtnrow{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:4px}
.fsubmit{width:auto;margin:0;justify-content:center}
.fconsent{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:#8FBAA4;line-height:1.5;max-width:34ch;cursor:pointer}
.fconsent input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--clay);cursor:pointer;background:none;border:1px solid var(--green-line);padding:0}
.fprivacy{font-size:12.5px;color:#7FA894;margin-top:26px;line-height:1.65}
.formwrap{display:grid;grid-template-columns:1fr 1.1fr;gap:76px;align-items:start}
.fintro .flede{color:#AFC4B8;font-size:16.5px;margin:22px 0 0;line-height:1.7;max-width:46ch}
.fintro h3{font-size:20px;font-weight:600;color:#fff;margin-top:44px;padding-top:30px;border-top:1px solid var(--green-line)}
.fpts{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:15px}
.fpts li{font-size:15px;color:#B3C7BC;padding-left:28px;position:relative;line-height:1.55}
.fpts li::before{content:"";position:absolute;left:2px;top:3px;width:6px;height:11px;border:none;border-right:2px solid #6FA88E;border-bottom:2px solid #6FA88E;transform:rotate(43deg)}

@media (max-width:960px){.formwrap{grid-template-columns:1fr;gap:38px}}
@media (max-width:520px){.frow{grid-template-columns:1fr}.fbtnrow{gap:20px}}

/* Some pages declare `.nlinks a{padding:...}` which outranks `.ncta`
   (0,1,1 vs 0,1,0) and squashes the CTA. Re-assert with higher specificity. */
header.nav .nlinks a:not(.ncta){padding:5px 0}
header.nav .nlinks a.ncta{padding:16px 26px;border-radius:0;font-size:11.5px;letter-spacing:.14em;font-weight:600;text-transform:uppercase}

/* ============ MOBILE MENU ============
   Burger icon in place of the "Menu" label, and readable link colours
   once the panel is open (it drops on a light background, so the
   homepage's white-on-hero link colour has to be overridden). */
.mbtn{padding:10px;line-height:0}
.mburger{display:block;width:22px;height:16px;position:relative}
.mburger i{position:absolute;left:0;width:100%;height:2px;background:currentColor;transition:transform .35s var(--ease),opacity .25s,top .35s var(--ease)}
.mburger i:nth-child(1){top:0}
.mburger i:nth-child(2){top:7px}
.mburger i:nth-child(3){top:14px}
header.nav.menu-open .mburger i:nth-child(1){top:7px;transform:rotate(45deg)}
header.nav.menu-open .mburger i:nth-child(2){opacity:0}
header.nav.menu-open .mburger i:nth-child(3){top:7px;transform:rotate(-45deg)}

/* open panel sits on paper, so force dark links on every page */
/* must outrank `body.home header.nav{background:transparent}` (0,2,2),
   otherwise the bar stays see-through and the dark burger vanishes. */
header.nav.menu-open,
body.home header.nav.menu-open{background:var(--paper);border-bottom-color:var(--hair)}
header.nav.menu-open .brand .lg-light,
body.home header.nav.menu-open .brand .lg-light{display:none}
header.nav.menu-open .brand .lg-dark,
body.home header.nav.menu-open .brand .lg-dark{display:block}
header.nav.menu-open .mbtn,
body.home header.nav.menu-open .mbtn{color:var(--ink);border-color:var(--sand)}
header.nav.menu-open .nlinks a,
body.home header.nav.menu-open .nlinks a{color:var(--ink-soft)}
header.nav.menu-open .nlinks a:hover,
body.home header.nav.menu-open .nlinks a:hover{color:var(--ink)}
header.nav.menu-open .nlinks a.ncta,
body.home header.nav.menu-open .nlinks a.ncta{color:#fff!important}

/* ============ IMAGE HERO (providers) ============
   Same treatment as the homepage hero: lighter overlay so the photo
   reads, larger type, and vertically centred content. The generic
   .phero padding above is for the light heroes on the other pages. */
.phero-img{background:var(--green-deep);color:#DCE7E0;border-bottom:none;min-height:78vh;display:flex;align-items:center;padding:140px 0 104px;position:relative;overflow:hidden}
.phero-img .hero-bg{position:absolute;inset:0;background:var(--green-deep)}
.phero-img .hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.phero-img .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,30,22,.93) 0%,rgba(11,30,22,.82) 42%,rgba(11,30,22,.6) 100%)}
.phero-img .phero-grid{position:relative;z-index:2;width:100%}
.phero-img h1{color:#fff;font-size:clamp(42px,5.6vw,70px);max-width:15ch;text-shadow:0 2px 24px rgba(8,22,16,.45)}
.phero-img h1 em{color:#E9AF8B;font-style:normal}
.phero-img .lede{color:#D7E3DB;font-size:clamp(18px,2.1vw,21px);line-height:1.7;max-width:54ch;text-shadow:0 1px 16px rgba(8,22,16,.5)}
.phero-img .pill{border-color:rgba(255,255,255,.4);background:transparent;color:#DCE7E0}
.phero-img .crumb,.phero-img .crumb a{color:#9FB8AA}
.phero-img .crumb a:hover{color:#fff}
@media (max-width:860px){
  .phero-img{min-height:0;padding:96px 0 84px}
}

/* pathviz panel sits on the photo hero: drop the white card, heavy
   shadow and offset outline for the same open, hairline-ruled panel
   used on the homepage. */
.phero-img .pathviz{background:transparent;border:none;border-top:1px solid rgba(255,255,255,.22);padding:30px 0 0;box-shadow:none}
.phero-img .pathviz::before{display:none}
.phero-img .pv-top{border-bottom-color:rgba(255,255,255,.16);padding-bottom:14px;margin-bottom:6px}
.phero-img .pv-top span{color:#8FBAA4}
.phero-img .pvrow{border-bottom-color:rgba(255,255,255,.13);padding:17px 0}
.phero-img .pvrow .pt{color:#fff;font-weight:600}
.phero-img .pvrow .ps{color:#A8BEB2}
.phero-img .pvn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#E0A582;font-style:normal;font-weight:600}
.phero-img .pv-foot{background:transparent;border-top:1px solid rgba(255,255,255,.22);padding:18px 0 0;margin-top:22px;color:#8FBAA4}
.phero-img .pv-foot strong{color:#fff}

/* hero: give the copy column enough room for both CTAs to sit on one
   line - at 1.05fr the two long labels were wrapping onto two rows. */
.phero-img .phero-grid{grid-template-columns:1.2fr .8fr;gap:54px}
.phero-img .acts{flex-wrap:nowrap}
.phero-img .acts .btn{white-space:nowrap;padding:16px 24px;letter-spacing:.12em}
@media (max-width:1100px){
  .phero-img .acts{flex-wrap:wrap}
  .phero-img .acts .btn{white-space:normal}
}

/* Providers hero corrections.
   The nav on this page is sticky (it occupies its own space), unlike the
   homepage where it overlays the hero - so the big top padding pushed the
   lede off-screen. The photo is a busy dashboard shot, so the overlay
   needs to be heavier than the homepage's and the headline smaller. */
.phero-img{min-height:0;padding:76px 0 84px}
.phero-img .hero-bg::after{background:linear-gradient(100deg,rgba(11,30,22,.95) 0%,rgba(11,30,22,.9) 45%,rgba(11,30,22,.78) 100%)}
.phero-img h1{font-size:clamp(36px,4.4vw,54px);max-width:16ch}
.phero-img .lede{font-size:clamp(16.5px,1.7vw,18.5px);line-height:1.68;max-width:50ch;margin-top:22px}
.phero-img .acts{margin-top:32px}
.phero-img .crumb{margin-bottom:18px}
.phero-img .pill{margin-bottom:26px}
.phero-img .pathviz{padding:24px 0 0}
.phero-img .pvrow{padding:14px 0}
.phero-img .pvrow .pt{font-size:15px}
.phero-img .pvrow .ps{font-size:13px}
@media (max-width:860px){
  .phero-img{padding:56px 0 64px}
}

/* The hero got shorter, so `cover` was cropping the photo into a thin
   band and cutting the faces. Give it back some height and bias the
   crop upward so the people stay in frame. */
.phero-img{min-height:70vh}
.phero-img .hero-bg img{object-position:center 32%}
@media (max-width:860px){
  .phero-img{min-height:0}
  .phero-img .hero-bg img{object-position:center 28%}
}

/* ============ SEGMENT ROWS (shared) ============
   Asymmetric image + copy rows, alternating side per segment.
   Providers uses the same markup, so it picks this up too. */
.seg{display:flex;flex-direction:column;gap:88px;margin-top:64px}
.sgc{display:flex;align-items:center;gap:60px}
.sgc:nth-child(even){flex-direction:row-reverse}
.sgc .simg{flex:0 0 40%;height:480px;overflow:hidden}
.sgc .simg img{width:100%;height:100%;object-fit:cover;display:block}
.sgc .simg .imgph{height:480px;margin:0}
.sgc .sbody{flex:1;min-width:0}
.sgc-head{display:flex;align-items:center;gap:14px}
.sgc .sn{font-family:'Fraunces';font-size:15px;font-weight:600;color:var(--clay);line-height:1;padding-bottom:1px;border-bottom:1px solid var(--clay)}
.sgc .sk{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.sgc:nth-child(even) .sn,.sgc:nth-child(even) .sk{color:var(--green)}
.sgc:nth-child(even) .sn{border-bottom-color:var(--green)}
.sgc h3{font-size:29px;font-weight:500;margin-top:15px}
.sgc .sbody>p{color:var(--ink-soft);font-size:16px;margin-top:14px;line-height:1.65;max-width:52ch}
.sgc .tick{margin-top:30px;padding-top:24px;border-top:1px solid var(--hair);display:flex;gap:56px;justify-content:center;text-align:center}
.tick .ti .tl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.tick .ti .tv{font-family:'Fraunces';font-size:19px;font-weight:500;color:var(--green);margin-top:7px}
.needs{list-style:none;margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.needs li{font-size:14px;color:var(--ink-soft);padding-left:26px;position:relative;line-height:1.5}
.needs li .chk{position:absolute;left:0;top:1px;width:16px;height:16px}
.needs li .chk svg{width:16px;height:16px}
.sgc:nth-child(odd) .needs li .chk svg{stroke:var(--clay)}
.sgc:nth-child(even) .needs li .chk svg{stroke:var(--green)}
.needs li b{color:var(--ink);font-weight:600;display:block;margin-bottom:2px}
@media (max-width:860px){
  .seg{gap:52px}
  .sgc,.sgc:nth-child(even){flex-direction:column;align-items:stretch;gap:28px}
  .sgc .simg{flex:none;height:280px}
  .sgc .simg .imgph{height:280px}
  .needs{grid-template-columns:1fr}
}

/* ============ SEGMENT SLIDER ============
   One card at a time with prev/next arrows. Falls back to the stacked
   rows above if site.js does not run. */
.seg.seg-slider{flex-direction:row;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.seg.seg-slider::-webkit-scrollbar{display:none}
.seg.seg-slider .sgc{flex:0 0 100%;scroll-snap-align:start;align-items:center}
.segnav{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-top:34px}
.segcount{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.segcount b{color:var(--ink);font-weight:600}
.segbtn{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--sand);color:var(--ink);cursor:pointer;transition:border-color .3s,background .3s,color .3s,opacity .3s}
.segbtn svg{width:20px;height:20px}
.segbtn:hover:not(:disabled){border-color:var(--green);background:var(--green);color:#fff}
.segbtn:disabled{opacity:.32;cursor:default}
@media (max-width:860px){
  .seg.seg-slider .sgc{flex-direction:column;align-items:stretch}
  .segnav{justify-content:center;margin-top:28px}
}


/* ============ TASK CHIPS (shared) ============
   One row that scrolls sideways instead of wrapping onto a second line.
   justify-content stays flex-start: centring a scroll container makes
   the first chips unreachable. */
.tasks{display:flex;gap:10px;flex-wrap:nowrap;margin-top:48px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;justify-content:flex-start}
.tasks::-webkit-scrollbar{display:none}
.tasks::after{content:"";flex:none;width:1px}
.task{display:inline-flex;align-items:center;gap:9px;flex:none;white-space:nowrap;scroll-snap-align:start;padding:12px 18px;border:1px solid var(--sand);background:var(--white);font-size:13.5px;color:var(--ink-soft);transition:border-color .3s,color .3s,background .3s}
.task:hover{border-color:var(--green);color:var(--green-deep);background:var(--green-pale)}
.task i{width:6px;height:6px;background:var(--clay);display:block;flex:none}

/* segment rows are open editorial rows, not cards: strip the white box,
   border, padding, shadow and hover-lift some pages still declare. */
.sgc{background:transparent;border:none;padding:0;box-shadow:none;overflow:visible;transform:none}
.sgc:hover{transform:none;box-shadow:none;border-color:transparent}
.sgc::after{display:none}

/* kill the decorative rule some pages draw before the segment kicker -
   the numbered badge already carries that role. */
.sgc .sk::before,.sgc .sk::after{content:none;display:none}

/* ============ PROVIDERS: PATH SECTIONS ============
   The Duration / Cost / Outcome strips were free-flowing flex items, so
   the labels and values never lined up between paths. Put them on an
   even grid, and give the supporting card grids consistent gutters. */
.metaline{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;margin-top:34px;padding-top:26px;flex-wrap:nowrap}
.metaline .mi{padding-right:26px;border-right:1px solid currentColor;border-color:inherit}
.metaline .mi:last-child{border-right:none;padding-right:0}
.metaline .mi:not(:first-child){padding-left:26px}
.metaline .ml{display:block}
.metaline .mv{margin-top:8px;line-height:1.3}
.svclist li{line-height:1.6}
@media (max-width:860px){
  .metaline{grid-auto-flow:row;gap:22px}
  .metaline .mi,.metaline .mi:not(:first-child){border-right:none;padding:0}
}

/* empty square outlines read as unchecked checkboxes - use the same
   tick mark the rest of the site uses for list items. */
.svclist li::before{width:6px;height:11px;top:5px;left:2px;border:none;border-right:2px solid var(--clay);border-bottom:2px solid var(--clay);transform:rotate(43deg)}
.s-dark .svclist li::before,.s-green .svclist li::before{border-right-color:#6FA88E;border-bottom-color:#6FA88E}

/* centre each Duration / Cost / Outcome cell so the strip reads evenly */
.metaline .mi{text-align:center;padding-left:20px;padding-right:20px}
.metaline .mi:first-child{padding-left:0}
.metaline .mi:last-child{padding-right:0}
.metaline .mi:not(:first-child){padding-left:20px}
@media (max-width:860px){.metaline .mi{text-align:left}}

/* consent sits above the Send button, same order on every page */
.fbtnrow{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px}
.fconsent{order:1;max-width:none}
.fsubmit{order:2}

/* selects that only exist on some pages still get a field icon */
.ffield #cf-path,.ffield #cf-structure,.ffield #cf-topic,
.ffield #cf-type,.ffield #cf-want{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FBAA4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 16v-4M12 8h.01'/%3e%3c/svg%3e")}

/* On focus the page-level rules use a `background` shorthand, which resets
   background-repeat to `repeat` and tiles the field icon. Re-assert the
   background parts at the same specificity so the icon stays single. */
.ffield input:focus,.ffield select:focus,.ffield textarea:focus,
.ffield input:hover,.ffield select:hover,.ffield textarea:hover{background-color:transparent;background-repeat:no-repeat;background-size:19px 19px;background-position:0 2px}
.ffield textarea:focus,.ffield textarea:hover{background-position:0 3px}

/* Hard guard: every page declares `.ffield ... {background: <shorthand>}`
   in one state or another, and each of those resets background-repeat to
   `repeat`, tiling the icon. !important is the only reliable stop here. */
.ffield input,.ffield select,.ffield textarea,
.ffield input:focus,.ffield select:focus,.ffield textarea:focus,
.ffield input:hover,.ffield select:hover,.ffield textarea:hover,
.ffield input:active,.ffield select:active,.ffield textarea:active{
  background-repeat:no-repeat!important;
  background-size:19px 19px!important;
  background-color:transparent!important;
}
.ffield input,.ffield select{background-position:0 2px!important}
.ffield textarea{background-position:0 3px!important}

/* `.phero-img .phero-grid` (0,2,0) was outranking the page's own
   `.phero-grid{grid-template-columns:1fr}` (0,1,0) inside its media
   query, so the hero never stacked on small screens. */
@media (max-width:960px){
  .phero-img .phero-grid{grid-template-columns:1fr;gap:36px}
  .phero-img .pathviz{padding-top:26px}
  .phero-img h1{font-size:clamp(30px,7.4vw,40px);max-width:none}
  .phero-img .lede{font-size:16px;max-width:none}
  .phero-img .acts{flex-wrap:wrap}
  .phero-img .acts .btn{white-space:normal;flex:1 1 100%;justify-content:center}
}

/* ============ MOBILE RESPONSIVE PASS ============
   Shared rules so every page collapses cleanly on small screens.
   Several page-level grids sit at higher specificity than their own
   media queries, so these are declared last to win. */
@media (max-width:860px){
  .ftop{grid-template-columns:1fr 1fr;gap:34px 24px}
  .fbot{flex-direction:column;align-items:flex-start;gap:8px}
  .fdisc{font-size:12px}

  /* any multi-column grid drops to one column */
  .doors,.igrid,.pgrid,.wn2,.seg,.capgrid,.wfgrid,.ladder,.wngrid,
  .decgrid,.dilgrid,.sgrid,.feegrid,.rgrid,.vgrid,.agrid,.itgrid,
  .casegrid,.opsgrid,.drvwrap,.drv2,.chgrid,.cmprow,.tlgrid,
  .mgrid,.bgrid,.tgrid,.instr{grid-template-columns:1fr!important}

  .svc,.svc.rev,.wnwrap,.formwrap,.jgrid,.qgrid,.hero-grid,
  .phero-grid,.bacol{grid-template-columns:1fr!important;gap:34px}
  .svc.rev>*{order:0}

  /* full-bleed strips scroll instead of squashing */
  .wnstrip .wnc2{min-width:82vw}
  .stat-grid{grid-template-columns:1fr 1fr;gap:30px 0}
  .statband .st{padding:8px 14px;text-align:center}
  .statband .st .n{font-size:clamp(26px,7vw,34px)}

  section{padding:64px 0}
  .wrap{padding:0 20px}
  .head h2{font-size:clamp(26px,6.4vw,34px)}
  .head p{font-size:16px}
  .lede{font-size:16.5px}
  .acts{flex-direction:column;align-items:stretch}
  .acts .btn{justify-content:center;width:100%}
  .cta-in{flex-direction:column;align-items:flex-start;gap:22px}

  /* wide data rows stack */
  .lrow,.rt-row,.rrow,.tlrow,.cmprow,.mrow,.pvrow{grid-template-columns:1fr!important}
  table,.rtable{display:block;overflow-x:auto}
}
@media (max-width:520px){
  .stat-grid{grid-template-columns:1fr}
  .ftop{grid-template-columns:1fr}
  .nav-in{padding:0 16px}
  .brand img{height:34px}
  section{padding:54px 0}
}

/* footer brand: real logo instead of the old inline mark + wordmark */
.fbrand{display:block}
.fbrand img{height:46px;width:auto;display:block}
.fbrand svg{display:none}
@media (max-width:860px){.fbrand img{height:40px}}

/* footer centred on mobile, on every page */
@media (max-width:860px){
  footer .wrap{text-align:center}
  .ftop{grid-template-columns:1fr;gap:34px;justify-items:center}
  .fbrand{display:flex;justify-content:center}
  .fnote2{margin-left:auto;margin-right:auto;max-width:38ch}
  .fcol h5{display:inline-block}
  .fcol h5::after{margin-left:auto;margin-right:auto}
  .fbot{flex-direction:column;align-items:center;gap:10px;text-align:center}
  .fdisc{text-align:center;max-width:52ch;margin-left:auto;margin-right:auto}
}

/* mobile footer: use the full width - the ch-caps and wrap padding were
   squeezing the text into a narrow centre strip. */
@media (max-width:860px){
  footer{padding:56px 0 34px}
  footer .wrap{padding:0 16px}
  .fnote2{max-width:none}
  .fdisc{max-width:none}
  .ftop{gap:28px}
  .fbot{margin-top:36px;padding-top:22px}
}

/* investors: poscard keeps its own original card styling */

/* portrait image beside the six drivers (dark section) */
.drvimg{height:100%;min-height:420px;overflow:hidden}
.drvimg img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:960px){.drvimg{min-height:260px;margin-top:8px}}

/* ============ BUTTONS (homepage parity, every page) ============
   Older pages shipped pill buttons (rounded, sentence case, hover
   transform). Re-declare the homepage button language over them:
   uppercase micro-type and a bottom-up fill sweep. */
.btn{display:inline-flex;align-items:center;gap:11px;padding:17px 30px;font-family:'Inter';font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;border-radius:0;background-repeat:no-repeat;background-position:0 100%;background-size:100% 0;transition:color .4s,border-color .4s,background-size .5s var(--ease);transform:none}
.btn:hover{transform:none}
.btn .a{transition:transform .3s var(--ease);font-size:14px;line-height:1}
.btn:hover .a{transform:translateX(5px)}
.b-green{background-color:var(--green);color:#fff;background-image:linear-gradient(var(--green-deep),var(--green-deep))}
.b-green:hover{background-size:100% 100%;background-color:var(--green)}
.b-clay{background-color:var(--clay);color:#fff;background-image:linear-gradient(#9A5230,#9A5230)}
.b-clay:hover{background-size:100% 100%;background-color:var(--clay)}
.b-out{border-color:#B9B2A4;color:var(--ink);background-color:transparent;background-image:linear-gradient(var(--green),var(--green))}
.b-out:hover{background-size:100% 100%;color:#fff;border-color:var(--green);background-color:transparent}
.b-white{background-color:#fff;color:var(--green-deep);background-image:linear-gradient(var(--green-deep),var(--green-deep))}
.b-white:hover{background-size:100% 100%;color:#fff;background-color:#fff}
.b-ondark{border-color:rgba(255,255,255,.35);color:#fff;background-color:transparent;background-image:linear-gradient(#fff,#fff)}
.b-ondark:hover{background-size:100% 100%;color:var(--green-deep);border-color:#fff;background-color:transparent}

/* ============ PILL (homepage parity) ============
   Old pages style .pill as a rounded sentence-case chip; the generic
   border-radius reset loses to its class selector, so re-declare. */
.pill{display:inline-flex;align-items:center;gap:11px;padding:9px 18px;border:1px solid var(--sand);border-radius:0;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);background:transparent}
.pill i{width:6px;height:6px;border-radius:0;background:var(--clay);display:block;flex:none}
.phero-img .pill,.hero .pill{border-color:rgba(255,255,255,.4);color:#DCE7E0;background:transparent}
.phero-img .pill i,.hero .pill i{background:#E0A582}

/* ============ FULL PARITY AUDIT (old-gen pages vs homepage) ============
   Everything below re-declares the homepage component language at class
   level so the older pages cannot drift. */

/* section rhythm */
section{padding:112px 0}

/* eyebrow: uppercase micro-label with a leading rule line */
.eyebrow{display:inline-flex;align-items:center;gap:13px;font-family:'Inter';font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--clay);flex:none}
.eyebrow.on-dark{color:#83AC97}
.eyebrow.on-dark::before{background:#E0A582}
.eyebrow.on-clay{color:#8C4A2A}
.eyebrow.on-clay::before{background:#8C4A2A}

/* FAQ: serif question row with circled plus */
.fq summary{list-style:none;cursor:pointer;padding:26px 0;font-size:19px;font-weight:500;font-family:'Fraunces';display:flex;justify-content:space-between;gap:24px;align-items:center;transition:color .25s}
.fq summary:hover{color:var(--green)}
.fq summary::-webkit-details-marker{display:none}
.fq .pl{flex:none;width:36px;height:36px;border:1px solid var(--sand);border-radius:50%!important;display:flex;align-items:center;justify-content:center;font-family:'Inter';font-size:18px;font-weight:400;color:var(--clay);transition:transform .4s var(--ease),background .3s,border-color .3s;line-height:1}
.fq[open] .pl{transform:rotate(45deg);background:var(--clay);border-color:var(--clay);color:#fff}

/* small labels and chips inherit the uppercase micro-type */
.jtag,.badge,.ltag{letter-spacing:.12em;text-transform:uppercase;font-weight:600}

/* every square-outline list marker becomes the shared tick mark */
.opslist li::before,.feelist li::before,.needs li::before,
.dlist li::before,.fpts li::before{width:6px!important;height:11px!important;top:5px;left:2px;border:none!important;border-right:2px solid var(--clay)!important;border-bottom:2px solid var(--clay)!important;border-radius:0!important;transform:rotate(43deg)}
.s-dark .opslist li::before,.s-green .opslist li::before,
.s-dark .dlist li::before,.s-green .dlist li::before,
.s-dark .fpts li::before,.s-green .fpts li::before,
.final .fpts li::before{border-right-color:#6FA88E!important;border-bottom-color:#6FA88E!important}

/* ============ RISK SECTION (investors): editorial ledger ============
   Was a white warning-card with a clay side-bar and circle bullets.
   Now an open ruled list: each risk gets a small clay index number,
   rows divided by hairlines. */
.riskbox{background:transparent!important;border:none!important;border-top:1px solid var(--ink)!important;padding:34px 0 0!important;margin-top:48px}
.riskbox h3{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.rklist{margin-top:10px;grid-template-columns:1fr 1fr;gap:0 64px;counter-reset:risk}
.rklist li{counter-increment:risk;padding:20px 0 20px 44px;border-bottom:1px solid var(--hair);font-size:14.5px;line-height:1.6}
.rklist li::before{content:counter(risk,decimal-leading-zero);width:auto!important;height:auto!important;border:none!important;top:20px;left:0;font-family:'Fraunces';font-size:14px;font-weight:600;color:var(--clay);border-radius:0!important}
.rklist li b{display:block;margin-bottom:3px;font-size:15.5px}
@media (max-width:860px){.rklist{gap:0}}

/* drivers image: pin it inside its column instead of stretching the
   full section height, and let it follow the scroll */
.drvimg{height:auto;min-height:0;position:sticky;top:120px;align-self:start}
.drvimg img{width:100%;height:560px;object-fit:cover;display:block}
@media (max-width:960px){
  .drvimg{position:static}
  .drvimg img{height:260px}
}

/* how-it-works hero image + what-we-are table */
.pside{height:460px;overflow:hidden}
.pside img{width:100%;height:100%;object-fit:cover;display:block}
.roletable{display:grid;grid-template-columns:1fr 1fr;gap:0 70px;margin-top:56px;border-top:1px solid var(--ink)}
.rcol h5{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin:26px 0 6px;font-family:'Inter'}
.rcol:first-child h5{color:var(--green)}
.rcol:last-child h5{color:var(--clay)}
.roletable .rrow{display:flex;gap:14px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--hair);font-size:15.5px;color:var(--ink-soft);line-height:1.55}
.roletable .rrow .rm{flex:none;margin-top:4px}
.roletable .rrow b{color:var(--ink)}
@media (max-width:860px){
  .pside{height:280px}
  .roletable{grid-template-columns:1fr;gap:0}
}

/* ============ HOW-IT-WORKS: JOURNEY SPINE ============
   The step cards were bordered rounded boxes on the dark band - the
   generic card look. Open them up into ruled entries along the spine. */
.scard{background:transparent!important;border:none!important;border-top:1px solid var(--green-line)!important;border-radius:0!important;padding:18px 2px 22px!important;transform:none!important}
.scard:hover{transform:none!important}
.jt{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:11px 20px}
.converge{background:transparent;border-top:1px solid var(--clay);border-bottom:1px solid var(--clay);color:#E9AF8B;padding:24px 28px}
.converge b,.converge strong{color:#fff}

/* journey + role sections: mobile polish (layout unchanged on desktop) */
@media (max-width:860px){
  .spinerow{grid-template-columns:1fr!important}
  .scard{padding:16px 0 20px!important}
  .converge{padding:20px 16px;text-align:left}
  .jtoggle{gap:8px}
  .jt{padding:10px 14px;font-size:10.5px}
  .roletable{margin-top:40px}
  .rcol:last-child h5{margin-top:34px}
  .pside{height:240px;margin-top:6px}
}

/* ============ DILIGENCE: open ruled columns ============
   Four white icon-cards become numbered editorial groups, and the
   dashed footnote box becomes a ruled aside. */
.dilgrid{gap:0 70px;border-top:1px solid var(--ink);margin-top:56px;counter-reset:dil}
.dil{background:transparent;border:none;border-radius:0;padding:30px 0 34px;border-bottom:1px solid var(--hair);transition:none}
.dil:hover{transform:none;box-shadow:none}
.dil .di{display:none}
.dil{counter-increment:dil}
.dh{margin-bottom:16px;gap:14px}
.dh::before{content:counter(dil,decimal-leading-zero);font-family:'Fraunces';font-size:15px;font-weight:600;color:var(--clay);line-height:1;padding-bottom:1px;border-bottom:1px solid var(--clay)}
.dil h4{font-size:21px;font-weight:500}
.dilnote{margin-top:0;border:none;border-top:1px solid var(--clay);border-radius:0;background:transparent;padding:30px 0 0}
.dilnote .dx{display:none}
.dilnote h4,.dilnote b{color:var(--clay)}
@media (max-width:860px){.dilgrid{gap:0}}

/* diligence list markers: square outline -> shared tick */
.dil ul li::before{width:6px!important;height:11px!important;top:4px;left:2px;border:none!important;border-right:2px solid var(--green)!important;border-bottom:2px solid var(--green)!important;border-radius:0!important;transform:rotate(43deg)}

/* dilnote spans the full row width */
.dilnote{grid-column:1/-1}
.dilnote p{max-width:none;font-size:15.5px}

/* ============ SAFEGUARDS: numbered ruled ledger ============
   Nine white top-bar cards become open ruled entries with clay index
   numbers, matching the risk ledger and diligence groups. */
.sgrid{gap:0 56px;margin-top:56px;border-top:1px solid var(--ink);counter-reset:sgd}
.sg{background:transparent;border:none!important;border-bottom:1px solid var(--hair)!important;border-radius:0;padding:26px 0 28px;transition:none;counter-increment:sgd;position:relative}
.sg:hover{transform:none}
.sg h4{padding-left:40px;position:relative;font-size:18px;font-weight:500}
.sg h4::before{content:counter(sgd,decimal-leading-zero);position:absolute;left:0;top:2px;font-family:'Fraunces';font-size:14px;font-weight:600;color:var(--clay)}
.sg p{padding-left:40px}
@media (max-width:860px){.sgrid{gap:0}}

/* real photo in the wide image band */
.imgreal{height:560px;overflow:hidden}
.imgreal img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){.imgreal{height:260px}}

/* mission portrait photo (about) */
.mimg{height:100%;min-height:480px;overflow:hidden}
.mimg img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){.mimg{min-height:0;height:280px}}

/* team skill markers -> ticks, and the specialists note runs full width */
.tm ul li::before{width:6px!important;height:11px!important;top:4px;left:2px;border:none!important;border-right:2px solid var(--green)!important;border-bottom:2px solid var(--green)!important;border-radius:0!important;transform:rotate(43deg)}
.tnote{max-width:none!important}

/* light page heroes: the 132px desktop top-pad is dead space on mobile
   because the nav is sticky and already occupies its own row */
@media (max-width:860px){
  .phero{padding:44px 0 60px}
}

/* journey steps: left-aligned labels, colour-coded per track, and a
   track suffix on mobile where the two columns stack interleaved */
.scard{text-align:left}
.scard .st{text-align:left;padding:0;margin-bottom:9px}
.sc.tc .scard{border-top-color:rgba(224,165,130,.55)!important}
.sc.ti .scard{border-top-color:rgba(111,168,142,.55)!important}
.sc.ti .scard .st{color:#8FBAA4}
@media (max-width:860px){
  .sc.tc .scard .st::after{content:" \00b7 Provider"}
  .sc.ti .scard .st::after{content:" \00b7 Investor"}
  .sc.empty{display:none}
}

/* ============ WHO DOES WHAT: open ruled table ============
   White boxed table with tinted group bars becomes a ruled ledger.
   Group headers turn into small caps labels with a colour-coded rule;
   on mobile each row stacks into a block with the owner tag under
   the work name. */
.rtable{border:none;border-radius:0;background:transparent;overflow:visible;border-top:1px solid var(--ink)}
.rt-row{border-bottom:1px solid var(--hair)}
.rt-c{padding:22px 26px 22px 0}
.rt-row .rt-c:first-child{font-family:'Fraunces';font-size:17.5px;font-weight:500;color:var(--ink);letter-spacing:0;text-transform:none}
.rt-c .rn{font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:8px}
.rt-group{background:transparent!important;padding:30px 0 14px;border-bottom:1px solid var(--green);color:var(--green)}
.rt-group.ind{border-bottom-color:var(--clay);color:#8C4A2A}
@media (max-width:860px){
  .rt-row{grid-template-columns:1fr!important}
  .rt-c{padding:16px 0 4px}
  .rt-row .rt-c:last-child{padding:0 0 20px;font-size:14.5px}
  .rt-group{padding:26px 0 12px}
}

/* belt-and-braces: journey step labels stay left whatever else loads */
.scard .st{text-align:left!important;padding:0!important;border:none!important;display:block}

/* journey filter: the selected track shows alone (was only dimmed),
   and the toggle chips stay on one scrollable row on mobile */
.sc.dim{display:none!important}
@media (max-width:860px){
  .jtoggle{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .jtoggle::-webkit-scrollbar{display:none}
  .jt{flex:none;white-space:nowrap}
}

/* who-does-what: breathing room after the column divider */
.rt-row .rt-c:last-child{padding-left:30px}
@media (max-width:860px){.rt-row .rt-c:last-child{padding-left:0}}

/* featured insight photo (right column of the .feat grid) */
.featimg{height:400px;overflow:hidden}
.featimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.feat:hover .featimg img{transform:scale(1.04)}
@media (max-width:860px){.featimg{height:240px}}



/* principles tiles: finish the reference look - arrow link under each
   tile, and the blob warms on hover */
.pr .pmore{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green);padding-bottom:6px;border-bottom:1px solid var(--sand);transition:gap .3s var(--ease),border-color .3s}
.pr:hover .pmore{gap:14px;border-color:var(--green)}
.pr:hover .pi .blob{fill:var(--clay-soft)}
.pr p{color:var(--ink-soft)}





/* ============ PRINCIPLES: IMAGE SPLIT + ROTATING PANEL ============
   Reference pattern: two staggered photos on the left; on the right the
   section heading with one principle at a time, auto-rotating with
   prev/next arrows. */
.prwrap{display:grid;grid-template-columns:1.05fr .95fr;gap:74px;align-items:center}
.primgs{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.pImg{overflow:hidden}
.pImg img{width:100%;height:100%;object-fit:cover;display:block}
.pImg.a{height:440px;margin-top:56px}
.pImg.b{height:440px}
.prpanel .eyebrow{margin-bottom:20px}
.prh{font-size:clamp(30px,3.6vw,46px);line-height:1.16}
.prh em{font-style:normal;color:var(--ink);border-bottom:3px solid var(--clay);padding-bottom:2px}
.prsub{color:var(--ink-soft);font-size:16.5px;margin-top:18px;max-width:46ch;line-height:1.65}
.pgrid.pr-rotate{display:block;margin:30px 0 0;border:none;min-height:220px;overflow:visible}
.pgrid.pr-rotate .pr{display:none;border:none;padding:0;min-width:0;text-align:left}
.pgrid.pr-rotate .pr.act{display:grid;grid-template-columns:64px 1fr;gap:4px 22px;align-items:start;animation:fadeUp .5s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pr-rotate .pr .pn{display:contents}
.pr-rotate .pr .pi{grid-column:1;grid-row:1/4;width:64px;height:64px;margin-top:2px}
.pr-rotate .pr .pi svg.ic{width:26px;height:26px}
.pr-rotate .pr h4{grid-column:2;font-size:21px;font-weight:500;min-height:0;display:block;text-align:left}
.pr-rotate .pr p{grid-column:2;margin:8px 0 0;font-size:15px;line-height:1.68;text-align:left;max-width:none}
.pr-rotate .pr .pmore{grid-column:2;justify-self:start;margin-top:14px}
.prnav{justify-content:flex-start;margin-top:26px;gap:16px}
.prnav .segbtn{width:44px;height:44px}
@media (max-width:960px){
  .prwrap{grid-template-columns:1fr;gap:44px}
  .pImg.a{margin-top:0;height:300px}
  .pImg.b{height:300px;margin-top:44px}
  .pgrid.pr-rotate{min-height:0}
}
@media (max-width:560px){
  .primgs{gap:14px}
  .pImg.a,.pImg.b{height:210px}
  .pImg.b{margin-top:30px}
}

/* ============ WHY NOW: GHOST NUMERALS (reference-inspired) ============
   The six forces sit in a spacious 3x2 grid on the dark band, each led
   by an oversized outlined numeral that fills on hover - the premium
   numbered-features treatment, not a scrolling card row. */
.wnstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:58px 60px;overflow:visible;border-top:none;border-bottom:none;max-width:1230px;margin:66px auto 0;padding:0 34px;scroll-snap-type:none}
.wnc2{flex:none;min-width:0;border:none!important;padding:0;background:transparent!important}
.wnc2::after{display:none}
.wnc2 .num{font-family:'Fraunces';font-size:64px;font-weight:400;line-height:1;color:transparent;-webkit-text-stroke:1.2px #E0A582;opacity:.75;transition:opacity .4s}
@supports not (-webkit-text-stroke:1px red){.wnc2 .num{color:rgba(224,165,130,.5)}}
.wnc2:hover .num{opacity:1}
.wnc2 h4{font-size:19px;margin-top:16px;line-height:1.35}
.wnc2 p{font-size:14.5px;margin-top:11px;line-height:1.68}
@media (max-width:960px){.wnstrip{grid-template-columns:1fr 1fr;gap:44px 40px;padding:0 22px}}
@media (max-width:560px){.wnstrip{grid-template-columns:1fr;gap:38px}.wnc2 .num{font-size:52px}}

/* principles: all four shown stacked in the right panel (no rotation) */
#principles .pgrid{display:block;margin:30px 0 0;border:none;min-height:0;overflow:visible}
#principles .pgrid .pr{display:grid;grid-template-columns:54px 1fr;gap:2px 20px;align-items:start;text-align:left;padding:18px 0;border:none;border-bottom:1px solid var(--hair);min-width:0}
#principles .pgrid .pr:last-child{border-bottom:none}
#principles .pr .pn{display:contents}
#principles .pr .pi{grid-column:1;grid-row:1/3;width:54px;height:54px;margin-top:3px}
#principles .pr .pi svg.ic{width:22px;height:22px}
/* principles as a numbered accordion: muted "01." + bold title rows,
   tapping a row reveals its description */
#principles .pr .pi{display:none}
#principles .pgrid{counter-reset:prn}
#principles .pgrid .pr{counter-increment:prn;grid-template-columns:auto 1fr;gap:0 20px;align-items:baseline;cursor:pointer;padding:24px 0;transition:none;transform:none}
#principles .pr::before{content:"0" counter(prn) ".";grid-column:1;grid-row:1;font-family:'Fraunces';font-size:19px;font-weight:500;color:var(--ink-mute);opacity:.6;line-height:1.35}
#principles .pr h4{grid-column:2;grid-row:1;font-size:19px}
#principles .pr p{grid-column:2;max-height:0;overflow:hidden;margin:0;transition:max-height .45s var(--ease),margin .3s}
#principles .pr.open p{max-height:220px;margin-top:10px}
#principles .pr:hover h4{color:var(--clay)}
#principles .pr h4{grid-column:2;font-size:18px;font-weight:600;min-height:0;display:block;text-align:left;line-height:1.35}
#principles .pr p{grid-column:2;margin:7px 0 0;font-size:14px;line-height:1.62;text-align:left;max-width:none}
#principles .pr .pmore{display:none}

/* left photos sized to match the right panel's height */
.prwrap{align-items:stretch}
.primgs{align-items:stretch;align-self:stretch}
.pImg.a{height:auto;min-height:520px;margin-top:64px}
.pImg.b{height:auto;min-height:520px;margin-bottom:64px}
@media (max-width:960px){
  .pImg.a{min-height:300px;margin-top:0}
  .pImg.b{min-height:300px;margin-bottom:0;margin-top:44px}
}
@media (max-width:560px){.pImg.a,.pImg.b{min-height:210px}}

/* ============ INVESTMENT LADDER: services-index look ============
   Ancorathemes services listing: airy ruled rows, big serif titles that
   warm on hover, meta set quietly to the right - no boxed side card. */
.lad{border-top:1px solid var(--ink)}
.lrow{grid-template-columns:112px 1fr 210px;gap:44px;padding:42px 0;transition:none}
.lrow:hover{background:transparent;padding-left:0;padding-right:0}
.lmeter .lk{margin-bottom:12px}
.mbars{max-width:96px;gap:3px}
.mbars i{height:4px}
.lmain h4{font-size:clamp(21px,2.1vw,26px);font-weight:400;transition:color .3s}
.lrow:hover .lmain h4{color:var(--green)}
.lmain p{margin-top:12px;font-size:15px;line-height:1.66;max-width:64ch}
.ltags{margin-top:14px}
.ltag{background:transparent}
.lside{background:transparent;border:none;padding:0;text-align:right}
.lside .ls{font-size:10.5px}
.lside .lv{font-family:'Fraunces';font-size:19px;font-weight:400;color:var(--green);margin-top:8px}
@media (max-width:960px){
  .lrow{grid-template-columns:1fr;gap:14px;padding:30px 0}
  .lside{text-align:left;display:flex;align-items:baseline;gap:12px}
  .lside .lv{margin-top:0}
  .mbars{max-width:120px}
}


/* key phrases: quiet clay underline for scanning readers */
u{text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1.5px;text-underline-offset:4px}

/* segments checklist: the inline .chk icon is the tick - kill the
   CSS-drawn one so it doesn't double up */
.needs li::before{content:none!important;display:none!important}

/* ============ GLOBAL TYPE SCALE (final authority) ============
   Every page shipped its own drift: body copy anywhere from 14 to
   16.5px, block titles 17.5 to 27px, micro-labels 10.5 to 12.5px.
   One scale, forced last, desktop and mobile:
     display h2 . 32-48   block h3 . 22-26   item h4 . 19
     lede . 18-20         body . 15.5        meta caps . 11.5  */

/* body copy inside any band */
section p,.ctaband p,.qband p,.statband p{font-size:15.5px!important;line-height:1.7!important}
section li,.dlist li,.needs li,.svclist li,.fpts li,.rklist li{font-size:15px!important;line-height:1.65!important}

/* titles */
section h3{font-size:clamp(22px,2.2vw,26px)!important;line-height:1.3}
section h4{font-size:19px!important;line-height:1.4}
.jitem h4{font-size:22px!important}
.fq summary{font-size:19px!important}

/* intentional large text re-asserted over the body rule */
.head p{font-size:18px!important;line-height:1.65!important}
.lede,.hero .lede,.phero .lede{font-size:clamp(17.5px,2vw,20px)!important;line-height:1.7!important}
.phero-img .lede{font-size:clamp(17px,1.8vw,19px)!important}
.final p,.fintro .flede{font-size:17px!important}
.prsub{font-size:16.5px!important}
.cta-in p{font-size:16.5px!important}
.qgrid .q,.fnote2{font-size:inherit}
.qgrid .q{font-size:clamp(24px,3vw,34px)!important;line-height:1.4!important}

/* intentional small text re-asserted */
.statnote{font-size:13px!important}
.fprivacy,.fdisc{font-size:12.5px!important;line-height:1.6!important}
.crumb{font-size:11px!important}
.chartx span{font-size:11px!important}

/* micro-labels: one size everywhere */
.eyebrow,.tl,.lk,.ls,.kk,.sk,.ik,.ftag,.fdate,.hviz-top span,.pv-top span,
.pc-top span,.rc-top span,.jp-head .t,.rt-group,.rcol h5,.fcol h5,
.riskbox h3,.dh::before,.lside .ls,.tick .ti .tl{font-size:11.5px!important;letter-spacing:.16em}
.lmain h4{font-size:clamp(21px,2.1vw,25px)!important}

/* mobile: same scale, one notch tighter, no flat/oversize mix */
@media (max-width:860px){
  section p,.ctaband p,.qband p{font-size:15px!important}
  section li{font-size:14.5px!important}
  section h3{font-size:22px!important}
  section h4{font-size:18px!important}
  .jitem h4{font-size:20px!important}
  .head h2{font-size:clamp(27px,7vw,34px)!important}
  .head p{font-size:16.5px!important}
  .lede,.hero .lede,.phero .lede,.phero-img .lede{font-size:16.5px!important}
  .final p,.fintro .flede{font-size:16px!important}
  .qgrid .q{font-size:24px!important}
  .lmain h4{font-size:21px!important}
  .st .n{font-size:clamp(26px,7vw,34px)!important}
}

/* pill: flat everywhere - some pages shipped it green-filled with a
   drop shadow */
.pill{background:transparent!important;box-shadow:none!important;color:var(--ink-soft)!important;border-color:var(--sand)!important;font-size:11px!important;letter-spacing:.18em!important}
.phero-img .pill,.hero .pill{color:#DCE7E0!important;border-color:rgba(255,255,255,.4)!important}

/* ============ SECTION TINTS (guaranteed everywhere) ============
   insights.html never defined .s-clay, so its newsletter band rendered
   white-on-cream. Declare the band tints in the shared layer so no
   page can ship without them. */
.s-clay{background:var(--clay);color:#fff}
.s-clay h2,.s-clay h3,.s-clay h4{color:#fff}
.s-clay .cta-in p,.s-clay p{color:#F5DFD3}
.s-dark{background:var(--green-deep);color:#DCE7E0}
.s-green{background:var(--green);color:#E4EDE8}

/* newsletter band: square field to match the button, tidy on mobile */
.nlform input{border-radius:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.38)}
.nlnote{color:#F5DFD3!important}
@media (max-width:860px){
  .nlwrap{grid-template-columns:1fr;gap:26px}
  .nlform{flex-direction:column;gap:10px}
  .nlform input{width:100%;min-width:0;padding:15px 18px}
  .nlform .btn{width:100%;justify-content:center}
}

/* ============ READABILITY BUMP (overrides the scale above) ============
   body 16.5 . lists 16 . micro-labels 12.5 . disclaimers 13.5 */
section p,.ctaband p,.qband p,.statband p{font-size:16.5px!important;line-height:1.72!important}
section li,.dlist li,.needs li,.svclist li,.fpts li,.rklist li{font-size:16px!important;line-height:1.68!important}
.eyebrow,.tl,.lk,.ls,.kk,.sk,.ik,.ftag,.fdate,.hviz-top span,.pv-top span,
.pc-top span,.rc-top span,.jp-head .t,.rt-group,.rcol h5,.fcol h5,
.riskbox h3,.dh::before,.lside .ls,.tick .ti .tl{font-size:12.5px!important}
.statnote{font-size:14px!important}
.fprivacy,.fdisc{font-size:13.5px!important}
.crumb{font-size:12px!important}
section h4{font-size:20px!important}
.head p{font-size:19px!important}
@media (max-width:860px){
  section p,.ctaband p,.qband p{font-size:16px!important}
  section li{font-size:15.5px!important}
  section h4{font-size:19px!important}
  .head p{font-size:17px!important}
}

/* ============ FOUR PATHS: IMAGE + NUMBERED LIST ============
   Reference pattern: photo on the left with a caption card overlapping
   its corner; on the right the heading and a numbered list, each row
   expanding on click as before. The old data panel is retired. */
.jsplit{display:grid;grid-template-columns:.92fr 1.08fr;gap:80px;align-items:center}
.jimg{position:relative;padding-bottom:52px;padding-right:44px}
.jimg img{width:100%;height:600px;object-fit:cover;display:block}
.jcap{position:absolute;right:0;bottom:0;background:var(--clay);color:#fff;padding:30px 34px;max-width:290px}
.jcap h3{color:#fff!important;font-size:22px!important;line-height:1.3;font-weight:500}
.jh2{font-size:clamp(30px,3.6vw,46px);color:#fff;margin-top:20px}
.jsub{color:#A8BEB2;margin-top:16px;max-width:56ch}
.jright .jlist{margin-top:34px}
.jright .jexplore{margin-top:34px}
.jpanel-store{display:none}
.jitem{grid-template-columns:64px 1fr;padding:22px 0}
.jitem .jn{font-size:17px;color:#7FA894}
.jitem.act .jn{color:#E0A582}
@media (max-width:960px){
  .jsplit{grid-template-columns:1fr;gap:46px}
  .jimg{padding-right:24px;padding-bottom:44px}
  .jimg img{height:340px}
  .jcap{padding:20px 22px;max-width:240px}
  .jcap h3{font-size:18px!important}
}

/* segment index numbers: bigger so they actually register */
.sgc .sn{font-size:30px;font-weight:400;padding-bottom:3px;border-bottom-width:2px}
.sgc-head{gap:18px;align-items:baseline}
@media (max-width:860px){.sgc .sn{font-size:24px}}

/* four paths list: drop the clay side-bar and indent shift on the
   active row - the peach numeral already marks it; rows stay flush */
.jitem,.jitem.act{border-left:none!important;padding-left:0!important}

/* four paths list: no divider lines at all - whitespace does the work */
.jright .jlist{border-top:none}
.jright .jitem{border-bottom:none!important;padding-top:16px;padding-bottom:16px}

/* principles photos: shorter, top-aligned instead of stretching to the
   full panel height */
.prwrap{align-items:start}
.primgs{align-self:start;align-items:start;gap:16px}
.pImg.a{min-height:0;height:400px;margin-top:0}
.pImg.b{min-height:0;height:400px;margin-bottom:0}
@media (max-width:960px){.pImg.a,.pImg.b{height:280px}.pImg.a{margin-top:0}.pImg.b{margin-top:40px}}
@media (max-width:560px){.pImg.a,.pImg.b{height:200px}.pImg.b{margin-top:28px}}

/* principles photos: middle ground - taller than the last cut */
.pImg.a{height:500px;margin-top:56px}
.pImg.b{height:500px}
@media (max-width:960px){.pImg.a,.pImg.b{height:320px}}
@media (max-width:560px){.pImg.a,.pImg.b{height:220px}}

/* ============ WHY NOW: READING COLUMN ============
   Six forces as a single centred reading column instead of a 3x2 grid:
   one comfortable measure, numeral in the margin, generous leading -
   built for actually being read top to bottom. */
.wnstrip{display:block;max-width:780px;margin:58px auto 0;padding:0 34px;border:none}
.wnc2{display:grid;grid-template-columns:72px 1fr;gap:4px 26px;align-items:start;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.12)!important}
.wnc2:last-child{border-bottom:none!important}
.wnc2 .num{grid-column:1;grid-row:1/3;font-size:34px;color:#E0A582;-webkit-text-stroke:0;opacity:.95;margin-top:3px}
.wnc2 h4{grid-column:2;margin-top:0!important;font-size:20px!important}
.wnc2 p{grid-column:2;margin-top:8px!important;max-width:60ch}
@media (max-width:860px){
  .wnstrip{padding:0 22px}
  .wnc2{grid-template-columns:48px 1fr;gap:2px 18px}
  .wnc2 .num{font-size:26px}
}

/* ============ WHY NOW: MAGAZINE COLUMNS ============
   Reference: heading on the left, standfirst on the right, then the
   content set in newspaper columns with vertical rules between them. */
#whynow .head{display:grid;grid-template-columns:1fr 1fr;gap:12px 80px;text-align:left;max-width:1230px;margin:0 auto;align-items:center}
#whynow .head .eyebrow{grid-column:1;margin:0}
#whynow .head .eyebrow::after{display:none}
#whynow .head h2{grid-column:1;margin-top:14px}
#whynow .head p{grid-column:2;grid-row:1/3;align-self:center;margin:0!important;max-width:none}
.wnstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 0;max-width:1230px;margin:64px auto 0;padding:0 34px}
.wnc2{display:block;padding:0 34px;border:none!important}
.wnc2:nth-child(3n+1){padding-left:0}
.wnc2:nth-child(3n){padding-right:0}
.wnc2:not(:nth-child(3n+1)){border-left:1px solid rgba(255,255,255,.14)!important}
.wnc2 .num{font-size:15px;color:#E0A582;margin:0;opacity:1}
.wnc2 h4{margin-top:12px!important;font-size:19px!important;line-height:1.35}
.wnc2 p{margin-top:9px!important;max-width:none}
@media (max-width:960px){
  #whynow .head{grid-template-columns:1fr;gap:0}
  #whynow .head p{grid-column:1;grid-row:auto;margin-top:16px!important}
  .wnstrip{grid-template-columns:1fr 1fr;gap:40px 0;padding:0 22px}
  .wnc2{padding:0 26px}
  .wnc2:nth-child(3n+1){padding-left:26px}
  .wnc2:nth-child(3n){padding-right:26px}
  .wnc2:nth-child(odd){padding-left:0;border-left:none!important}
  .wnc2:nth-child(even){padding-right:0;border-left:1px solid rgba(255,255,255,.14)!important}
}
@media (max-width:560px){
  .wnstrip{grid-template-columns:1fr;gap:34px}
  .wnc2,.wnc2:nth-child(even),.wnc2:nth-child(odd){padding:0;border-left:none!important}
}

/* why-now header: standfirst aligns with the heading, not the eyebrow */
#whynow .head{align-items:start}
#whynow .head p{grid-row:2;align-self:start;margin-top:14px!important}
#whynow .head h2{align-self:start}

/* ============ LADDER ON MOBILE: sane order ============
   Title and copy first; the risk meter and character read as one quiet
   meta strip underneath instead of leading the block. */
@media (max-width:960px){
  .lrow{display:flex;flex-direction:column;gap:10px;padding:28px 0}
  .lmain{order:1}
  .lmain h4{font-size:20px!important}
  .ltags{margin-top:12px;gap:6px}
  .ltag{font-size:11.5px;padding:5px 10px}
  .lmeter{order:2;display:flex;align-items:center;gap:12px;margin-top:6px}
  .lmeter .lk{margin:0}
  .mbars{max-width:110px;flex:1}
  .lside{order:3;display:flex;align-items:baseline;gap:10px;text-align:left}
  .lside .lv{font-size:16px;margin:0}
}

/* why-now: kill the old scroll-strip min-width that was blowing the
   2-col mobile grid out past the section (82vw x 2 = overflow) */
.wnstrip .wnc2{min-width:0!important}
.wnstrip{overflow:visible}
section{overflow-x:clip}

/* ============ LADDER: numbered rungs + CTA ============ */
.lad{counter-reset:rung}
.lrow{counter-increment:rung;grid-template-columns:58px 104px 1fr 220px;gap:36px}
.lrow::before{content:counter(rung,decimal-leading-zero);font-family:'Fraunces';font-size:22px;color:var(--clay);line-height:1;margin-top:4px}
.ladcta{margin-top:38px}
@media (max-width:960px){
  .lrow::before{font-size:18px;order:0;margin:0}
  .lrow{gap:8px}
  .lmain{margin-top:-24px;padding-left:34px}
  .lmeter,.lside{padding-left:34px}
  .ladcta .btn{width:100%;justify-content:center}
}

/* ladder: numbering retired with the CTA - back to the clean rows */
.lrow{grid-template-columns:112px 1fr 210px;gap:44px}
.lrow::before{content:none}
@media (max-width:960px){
  .lrow{display:flex;flex-direction:column;gap:10px}
  .lmain{margin-top:0;padding-left:0}
  .lmeter,.lside{padding-left:0}
}

/* two doors on mobile: tighter card padding, calmer list rhythm */
@media (max-width:860px){
  .doors{gap:18px;margin-top:44px}
  .door{padding:28px 22px 30px}
  .door-head{gap:12px}
  .door .dn{font-size:22px}
  .door h3{margin-top:12px}
  .door>p{margin-top:12px}
  .dlist{margin-top:20px;gap:12px}
  .dlist li{padding-left:26px}
  .door .dgo{margin-top:24px}
}


/* ============ CAPITAL SOURCES: ruled index ============
   Six sources as a ledger of rows: serif name on the left, what that
   money wants on the right. No cards, no icons - reads like a who's-
   at-the-table index. */
.capgrid{display:block;margin-top:56px;border-top:1px solid rgba(255,255,255,.3)}
.cap{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start;border:none!important;background:transparent!important;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.12)!important;overflow:visible;transform:none!important}
.cap:hover{transform:none!important;background:transparent!important}
.cap .ci{display:none}
.cap h4{font-family:'Fraunces';font-size:22px!important;font-weight:400;color:#fff;line-height:1.3;transition:color .3s}
.cap:hover h4{color:#E9AF8B}
.cap p{margin:0!important;max-width:62ch}
@media (max-width:860px){
  .cap{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .cap h4{font-size:20px!important}
}

/* ============ CAPITAL SOURCES: full-width photo rows ============
   One source per row, full width, a photo behind each with a deep
   green wash; name in serif on the left, the description right.
   Overlay eases on hover so the image breathes. */
.capgrid{display:block;margin-top:56px}
.cap{position:relative;display:grid;grid-template-columns:320px 1fr;gap:44px;align-items:center;border:none!important;padding:38px 40px;margin-bottom:14px;background-size:cover!important;background-position:center 30%!important;overflow:hidden;transform:none!important}
.cap::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(11,30,22,.94) 0%,rgba(11,30,22,.86) 55%,rgba(11,30,22,.72) 100%);transition:background .45s}
.cap:hover::after{background:linear-gradient(95deg,rgba(11,30,22,.9) 0%,rgba(11,30,22,.8) 55%,rgba(11,30,22,.6) 100%)}
.cap>*{position:relative;z-index:2}
.cap .ci{display:none}
.cap h4{font-family:'Fraunces';font-size:23px!important;font-weight:400;color:#fff;line-height:1.3}
.cap p{margin:0!important;max-width:62ch;color:#C9DAD1!important}
.cap:nth-child(1){background:url("../img/w1.jpg") center 30%/cover no-repeat!important}
.cap:nth-child(2){background:url("../img/w2.jpg") center 30%/cover no-repeat!important}
.cap:nth-child(3){background:url("../img/w3.jpg") center 30%/cover no-repeat!important}
.cap:nth-child(4){background:url("../img/w4.jpg") center 30%/cover no-repeat!important}
.cap:nth-child(5){background:url("../img/w5.jpg") center 30%/cover no-repeat!important}
.cap:nth-child(6){background:url("../img/w6.jpg") center 30%/cover no-repeat!important}
@media (max-width:860px){
  .cap{grid-template-columns:1fr;gap:10px;padding:26px 22px}
  .cap h4{font-size:20px!important}
}

/* ============ CAPITAL SOURCES: SIX PHOTO TILES, ONE ROW ============
   Reference collage style: all six in a single edge-to-edge band,
   caption pinned to the bottom of each photo. Swipes on mobile. */
.capgrid{display:flex;margin:60px calc(50% - 50vw) 0;gap:0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.capgrid::-webkit-scrollbar{display:none}
.cap{flex:1 0 16.666%;min-width:250px;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;height:480px;margin:0;padding:26px 24px;gap:0}
.cap::after{background:linear-gradient(180deg,rgba(11,30,22,.18) 0%,rgba(11,30,22,.5) 45%,rgba(11,30,22,.94) 100%)}
.cap:hover::after{background:linear-gradient(180deg,rgba(11,30,22,.08) 0%,rgba(11,30,22,.4) 45%,rgba(11,30,22,.92) 100%)}
.cap h4{font-size:19px!important;line-height:1.3}
.cap p{margin-top:9px!important;font-size:13.5px!important;line-height:1.55!important;max-width:none;color:#C3D5CB!important}
@media (max-width:860px){
  .cap{min-width:76vw;height:420px}
}

/* photo tiles: heavier bottom plate + bigger type so captions read */
.cap::after{background:linear-gradient(180deg,rgba(11,30,22,.08) 0%,rgba(11,30,22,.28) 38%,rgba(11,30,22,.9) 62%,rgba(11,30,22,.985) 100%)!important}
.cap:hover::after{background:linear-gradient(180deg,rgba(11,30,22,0) 0%,rgba(11,30,22,.2) 38%,rgba(11,30,22,.88) 62%,rgba(11,30,22,.98) 100%)!important}
.cap{height:520px;padding:28px 26px 30px}
.cap h4{font-size:22px!important;text-align:left;text-shadow:0 1px 14px rgba(8,22,16,.8)}
.cap p{font-size:15px!important;line-height:1.6!important;text-shadow:0 1px 10px rgba(8,22,16,.9);color:#DCE7E0!important}
@media (max-width:860px){.cap{height:440px}.cap h4{font-size:20px!important}}

/* capital strip, proper: wider tiles you scroll through with arrows -
   six across was too cramped to read */
.cap{min-width:360px;flex:0 0 360px;height:500px}
.capnav{justify-content:flex-end;margin-top:22px;gap:12px;max-width:1230px;margin-left:auto;margin-right:auto;padding:0 34px}
.capnav .segbtn{border-color:rgba(255,255,255,.32);color:#fff}
.capnav .segbtn:hover{border-color:#fff;background:#fff;color:var(--green-deep)}
@media (max-width:860px){
  .cap{min-width:78vw;flex-basis:78vw;height:440px}
  .capnav{justify-content:center;padding:0 22px}
}

/* capital tiles: separated cards - photo on top, caption on a plain
   cream base below in dark text. No overlay, no shadows. */
.capgrid{gap:22px;padding:0 34px}
.cap{background-color:var(--paper)!important;background-size:100% 280px!important;background-position:top center!important;height:auto;min-height:0;justify-content:flex-start;padding:302px 24px 28px}
.cap::after{display:none!important}
.cap h4{color:var(--ink)!important;text-shadow:none!important;font-size:20px!important}
.cap p{color:var(--ink-soft)!important;text-shadow:none!important;font-size:14.5px!important}
@media (max-width:860px){
  .capgrid{padding:0 22px}
  .cap{background-size:100% 240px!important;padding:262px 20px 24px;height:auto}
}

/* soft backdrop where the photo meets the caption base */
.cap::after{display:block!important;content:"";position:absolute;left:0;right:0;top:190px;height:90px;background:linear-gradient(180deg,rgba(247,245,240,0) 0%,var(--paper) 100%)!important;pointer-events:none}
@media (max-width:860px){.cap::after{top:155px;height:85px}}

/* capital tiles, settled: photo strictly in the top 280px, caption on
   a plain white card below it. Backdrop fade removed. Selector matches
   the nth-child image rules' specificity so the crop actually wins. */
.capgrid .cap{background-color:#fff!important;background-size:100% 280px!important;background-position:top center!important;background-repeat:no-repeat!important;border:1px solid var(--hair)!important;padding:302px 24px 28px}
.capgrid .cap::after{display:none!important;content:none!important}
.capgrid .cap h4{color:var(--ink)!important;text-shadow:none!important}
.capgrid .cap p{color:var(--ink-soft)!important;text-shadow:none!important}
@media (max-width:860px){
  .capgrid .cap{background-size:100% 240px!important;padding:262px 20px 24px}
}


/* providers four paths: original cards, all four on one row */
.paths4{grid-template-columns:repeat(4,1fr);gap:18px}
.path{padding:30px 24px}
.path h3{font-size:20px!important}
@media (max-width:1100px){.paths4{grid-template-columns:1fr 1fr;gap:20px}}
@media (max-width:640px){.paths4{grid-template-columns:1fr}}

/* path sections: photo panel beside the checklist */
.svcimg{height:100%;min-height:460px;overflow:hidden;align-self:stretch}
.svcimg img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:960px){.svcimg{min-height:0;height:280px}}

/* path photo: the Duration / Cost / Outcome meta sits as a dark
   card overlapping the image's bottom-right corner, reference style */
.svcimg{position:relative;overflow:visible}
.svcimg .metaline{position:absolute;right:-34px;bottom:-34px;display:block;background:var(--clay);padding:24px 30px 22px;margin:0;border:none!important;max-width:320px;box-shadow:0 18px 40px rgba(16,42,32,.18)}
.svcimg .mi{padding:9px 0!important;border:none!important;text-align:left}
.svcimg .ml{color:#F3DCCD!important}
.svcimg .mv{color:#fff!important}
@media (max-width:960px){
  .svcimg{height:auto}
  .svcimg img{height:300px}
  .svcimg .metaline{position:static;max-width:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;padding:18px 20px}
  .svcimg .mi{text-align:center}
}

/* segments: Typical deal / Usually sits as the same clay card
   overhanging the segment photo corner */
.sgc .simg{position:relative;overflow:visible}
.sgc .simg .tick{position:absolute;right:-28px;bottom:-28px;display:block;margin:0;padding:22px 28px 20px;border:none!important;background:var(--clay);width:max-content;max-width:340px;text-align:left;box-shadow:0 18px 40px rgba(16,42,32,.18)}
/* the slider scroll container clips anything hanging outside a slide,
   so give each slide breathing room for the card's overhang */
.seg.seg-slider .sgc{padding-right:28px;padding-bottom:28px}
.sgc .simg .tick .ti{padding:8px 0}
.sgc .simg .tick .ti .tl{color:#F3DCCD!important}
.sgc .simg .tick .ti .tv{color:#fff!important}
@media (max-width:960px){
  .sgc .simg{overflow:visible;height:auto}
  .sgc .simg img{height:280px}
  .sgc .simg .tick{position:static;max-width:none;display:flex;gap:36px;justify-content:center;padding:16px 20px;text-align:center}
  .sgc .simg .tick .ti{padding:0}
}

/* insights: each card sits on a white panel against the paper background */
.icard{background:var(--white,#fff);padding:26px 26px 30px;box-shadow:0 16px 38px -26px rgba(22,33,27,.28);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.icard:hover{transform:translateY(-5px);box-shadow:0 24px 46px -24px rgba(22,33,27,.32)}
.icard:hover .ithumb{transform:none}

/* providers: Where are you today, four numbered white cards */
.todaygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
.tdc{background:var(--white,#fff);padding:30px 26px 32px;box-shadow:0 16px 38px -26px rgba(22,33,27,.28);transition:transform .5s var(--ease)}
.tdc:hover{transform:translateY(-5px)}
.tdc .tdn{display:block;font-family:'Fraunces';font-size:30px;font-weight:500;color:var(--clay);line-height:1}
.tdc h4{margin-top:16px;font-size:17.5px;line-height:1.4}
.tdc p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--ink-soft,#4A5550)}
@media (max-width:1100px){.todaygrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.todaygrid{grid-template-columns:1fr}}
/* providers hero lost its right-hand panel, so it runs single column */
.phero-img .phero-grid:has(>div:only-child){grid-template-columns:1fr}
.phero-img .phero-grid>div:only-child{max-width:780px}

/* investors: ecosystem drivers revamp, ruled 3x2 editorial grid on dark */
#drivers .drvwrap{display:block}
#drivers .drvimg{display:none}
#drivers .drv2{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid var(--green-line)}
#drivers .drvc{margin:0;background:transparent;border:none;border-bottom:1px solid var(--green-line);border-right:1px solid var(--green-line);padding:36px 30px 40px;transition:background .4s}
#drivers .drvc:nth-child(3n){border-right:none}
#drivers .drvc:hover{background:rgba(255,255,255,.045)}
#drivers .drvc .num{font-family:'Fraunces';font-size:28px;font-weight:500;color:#E0A582;line-height:1;background:none;border:none;width:auto;height:auto}
#drivers .drvc h4{margin-top:16px;color:#fff;font-size:17.5px;line-height:1.4}
#drivers .drvc p{margin-top:10px;color:#B3C7BC;font-size:14px;line-height:1.65}
@media (max-width:1000px){
  #drivers .drv2{grid-template-columns:1fr 1fr}
  #drivers .drvc:nth-child(3n){border-right:1px solid var(--green-line)}
  #drivers .drvc:nth-child(2n){border-right:none}
}
@media (max-width:640px){
  #drivers .drv2{grid-template-columns:1fr}
  #drivers .drvc{border-right:none!important;padding:26px 4px 30px}
}

/* investors: investment options as one horizontal card row */
#options .lad{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-top:52px;padding-bottom:6px}
#options .lad::-webkit-scrollbar{display:none}
#options .lrow{flex:0 0 330px;scroll-snap-align:start;display:block;margin:0;background:var(--white,#fff);border:1px solid var(--hair);padding:28px 26px 30px;box-shadow:0 16px 38px -28px rgba(22,33,27,.25)}
#options .lmeter{display:flex;align-items:center;justify-content:space-between}
#options .lmain{margin-top:18px}
#options .lmain h4{font-size:17.5px}
#options .lmain p{margin-top:10px;font-size:13.5px;line-height:1.6}
#options .ltags{margin-top:14px}
#options .lside{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
@media (max-width:640px){#options .lrow{flex-basis:280px}}
/* options row bleeds to the screen edges, no side padding */
#options .lad{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);scroll-padding-left:calc(50vw - 50%)}
/* light side padding on the options row */
#options .lad{padding-left:calc(50vw - 50% + 18px);padding-right:calc(50vw - 50% + 18px);scroll-padding-left:calc(50vw - 50% + 18px)}
/* mobile: options row stays inside the wrap, no bleed (it overflowed the page) */
@media (max-width:700px){
  #options .lad{margin-left:0;margin-right:0;padding-left:0;padding-right:0;scroll-padding-left:0}
}
/* options nav sits on a light section, dark buttons (capnav ones are white-on-dark, invisible here) */
#options .capnav{padding:0;max-width:none;justify-content:flex-end;margin-top:26px}
#options .capnav .segbtn{border-color:var(--sand);color:var(--ink)}
#options .capnav .segbtn:hover{border-color:var(--green);background:var(--green);color:#fff}
/* option card footer stacks vertically instead of the cramped 3-column row */
#options .lside{display:block;text-align:left}
#options .lside>*{margin:0;padding:0;border:none;width:auto;max-width:none}
#options .lside .lv{margin-top:6px;font-size:16px}
#options .lside .lv~*{margin-top:8px;font-size:13px;line-height:1.6}
/* mobile: wider option cards, arrows centered underneath */
@media (max-width:700px){
  #options .lrow{flex-basis:86vw}
  #options .capnav{display:flex;justify-content:center;margin-top:22px}
}
/* desktop: slightly wider option cards */
@media (min-width:701px){#options .lrow{flex-basis:365px}}

/* homepage investment ladder: same horizontal card row as investors #options */
#fund .lad{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-top:52px;padding-bottom:6px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc(50vw - 50% + 18px);padding-right:calc(50vw - 50% + 18px);scroll-padding-left:calc(50vw - 50% + 18px)}
#fund .lad::-webkit-scrollbar{display:none}
#fund .lrow{flex:0 0 365px;scroll-snap-align:start;display:block;margin:0;background:var(--white,#fff);border:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:28px 26px 30px;box-shadow:0 16px 38px -28px rgba(22,33,27,.25)}
#fund .lrow:hover{background:var(--white,#fff);padding-left:26px;padding-right:26px}
#fund .lmeter{display:flex;align-items:center;justify-content:space-between}
#fund .lmain{margin-top:18px}
#fund .lmain h4{font-size:17.5px}
#fund .lmain p{margin-top:10px;font-size:13.5px;line-height:1.6}
#fund .ltags{margin-top:14px}
#fund .lside{display:block;text-align:left;margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
#fund .lside>*{margin:0;padding:0;border:none;width:auto;max-width:none}
#fund .lside .lv{margin-top:6px;font-size:16px}
#fund .capnav{padding:0;max-width:none;justify-content:flex-end;margin-top:26px}
#fund .capnav .segbtn{border-color:var(--sand);color:var(--ink)}
#fund .capnav .segbtn:hover{border-color:var(--green);background:var(--green);color:#fff}
@media (max-width:700px){
  #fund .lad{margin-left:0;margin-right:0;padding-left:0;padding-right:0;scroll-padding-left:0}
  #fund .lrow{flex-basis:86vw}
  #fund .capnav{display:flex;justify-content:center;margin-top:22px}
}
/* homepage ladder: no risk meter on the cards */
#fund .lmeter{display:none}
#fund .lmain{margin-top:0}
/* option cards: equal height, Character footer pinned to the bottom */
#fund .lrow,#options .lrow{display:flex;flex-direction:column}
#fund .lside,#options .lside{margin-top:auto;padding-top:16px}
#fund .lmain,#options .lmain{padding-bottom:18px}

/* investors: risks as a 3-up card grid instead of one long list */
.riskbox{background:transparent;border:none;padding:0;box-shadow:none}
.rklist{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;column-count:auto;column-gap:0}
.rklist li{background:var(--paper,#F7F5F0);border:1px solid var(--hair);padding:24px 22px 26px;margin:0;line-height:1.62;font-size:14px;transition:transform .4s var(--ease)}
.rklist li:hover{transform:translateY(-4px)}
.rklist li::before{display:none}
.rklist li b{display:block;font-family:'Fraunces',Georgia,serif;font-size:17.5px;font-weight:500;margin-bottom:8px}
@media (max-width:1000px){.rklist{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.rklist{grid-template-columns:1fr}}

/* how-it-works diligence: alternating photo + checklist rows, providers style */
#diligence .dilgrid{display:block;margin-top:46px}
#diligence .dil{display:grid;grid-template-columns:.85fr 1.15fr;gap:0 60px;align-items:center;padding:46px 0;margin:0;background:transparent;border:none;box-shadow:none;border-bottom:1px solid var(--hair)}
#diligence .dil:last-child{border-bottom:none}
#diligence .dil .dimg{grid-column:1;grid-row:1/3;overflow:hidden;height:100%;min-height:400px}
#diligence .dil .dimg img{width:100%;height:100%;object-fit:cover;display:block}
#diligence .dil .dh{grid-column:2;grid-row:1;align-self:end}
#diligence .dil ul{grid-column:2;grid-row:2;margin-top:18px}
#diligence .dil:nth-child(even){grid-template-columns:1.15fr .85fr}
#diligence .dil:nth-child(even) .dimg{grid-column:2}
#diligence .dil:nth-child(even) .dh,#diligence .dil:nth-child(even) ul{grid-column:1}
@media (max-width:920px){
  #diligence .dil{display:block;padding:34px 0}
  #diligence .dil .dimg{min-height:0;height:240px;margin-bottom:22px}
}
/* mobile: contact form labels visible (placeholders alone left the two
   "Select one" dropdowns unidentifiable) */
@media (max-width:700px){
  .ffield label{position:static;width:auto;height:auto;margin:0 0 9px;padding:0;overflow:visible;clip:auto;white-space:normal;display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#8FBAA4}
}
/* mobile footer: Pages and Company side by side */
@media (max-width:860px){
  .ftop{grid-template-columns:1fr 1fr;gap:30px 16px}
  .ftop>div:first-child{grid-column:1/-1}
}

/* journeys filter: the selected track shows alone, single centered column */
#spine.v-provider .sc.ti,#spine.v-investor .sc.tc{display:none!important}
#spine.v-provider .trackhdr,#spine.v-investor .trackhdr{display:none}
#spine.v-provider .smid,#spine.v-investor .smid{display:none}
#spine.v-provider .spinerow,#spine.v-investor .spinerow{display:block;max-width:660px;margin:0 auto}
#spine.v-investor .spinerow:has(.ti.empty){display:none}
#spine.v-provider .sc,#spine.v-investor .sc{padding:12px 0}
/* mobile: tag each step with its track so the interleaved list reads clearly */
@media (max-width:860px){
  #spine .sc.tc .st::after{content:" - Provider";color:#8FBAA4}
  #spine .sc.ti .st::after{content:" - Investor";color:#E0A582}
}

/* journeys: metro-map spine. One continuous center line with numbered
   station nodes; each card hangs off its node with a connector tick.
   The meet point is a clay junction badge on the line. */
#spine{counter-reset:jstep}
#spine .trackhdr{grid-template-columns:1fr 92px 1fr;margin-bottom:4px}
#spine .trackhdr .thl.r{text-align:right}
#spine .spinerow{grid-template-columns:1fr 92px 1fr;gap:0;margin-bottom:0;counter-increment:jstep}
#spine .sc{padding:16px 0;display:flex;align-items:center}
#spine .scard{position:relative;background:rgba(255,255,255,.035);border:1px solid var(--green-line);padding:24px 26px 26px;width:100%;transition:background .35s,border-color .35s}
#spine .scard:hover{background:rgba(255,255,255,.06);border-color:#3E6D58}
#spine .scard .st{color:#E0A582;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
#spine .scard h4{color:#fff;margin-top:10px;font-size:18px}
#spine .scard p{color:#B3C7BC;margin-top:8px;font-size:14px;line-height:1.62}
#spine .sc.left .scard::after,#spine .sc.right .scard::before{content:"";position:absolute;top:50%;width:29px;height:1px;background:var(--green-line)}
#spine .sc.left .scard::after{right:-30px}
#spine .sc.right .scard::before{left:-30px}
#spine .sc.empty{opacity:1;border:none}
#spine .smid{display:flex}
#spine .smid .line{background:var(--green-line)}
#spine .smid .node{width:34px;height:34px;margin:0;background:var(--green-deep);border:1px solid #3E6D58;display:flex;align-items:center;justify-content:center}
#spine .smid .node::after{content:"0" counter(jstep);font-family:'Fraunces',Georgia,serif;font-size:12.5px;color:#E0A582}
#spine .converge{position:relative;background:var(--clay);border:none;text-align:center;margin:30px auto;padding:26px 34px;max-width:560px}
#spine .converge h4{color:#fff;font-size:20px}
#spine .converge p{color:#F3DCCD;margin-top:8px;max-width:56ch;margin-left:auto;margin-right:auto}
@media (max-width:860px){
  #spine .spinerow{grid-template-columns:1fr;gap:12px;margin-bottom:12px}
  #spine .smid{display:none}
  #spine .sc{padding:0}
  #spine .sc.left .scard::after,#spine .sc.right .scard::before{display:none}
  #spine .sc.empty{display:none}
  #spine .converge{margin:24px auto}
}
/* mobile: tighter section rhythm, less dead space */
@media (max-width:700px){
  section{padding:54px 0}
  .head h2{margin-top:10px}
  .head p{margin-top:14px}
  .formwrap{gap:30px}
}
/* contact: drop the Talk to us eyebrow */
.fintro .eyebrow{display:none}
/* contact (.final) sets its own 124px padding, so the generic mobile rule missed it */
@media (max-width:700px){.final{padding:50px 0}}
/* card footer divider runs the full card width */
#fund .lside,#options .lside{display:block;width:100%;align-self:stretch;border-top:1px solid var(--hair)}