/* Markinly design system — generated from the prototype build.
   Complete: shared layers + every page-level block. */

/* ══════════ BASE — design system v1 ══════════ */

/* ══════════════════════════════════════════════════════════════
   MARKINLY DESIGN SYSTEM v2 — "Editorial Light"
   Benchmark: McKinsey / BCG structural patterns, original execution.
   Light-first: white + warm off-whites, navy ink, gold accent.
══════════════════════════════════════════════════════════════ */
:root{
  --navy:#0B2540; --navy-d:#071A2E; --navy-l:#16375C; --navy-t:rgba(11,37,64,.06);
  --gold:#C09A3E; --gold-l:#D4B366; --gold-s:rgba(192,154,62,.1);
  --ink:#10202E; --muted:#4C6172; --light:#7E93A4;
  --white:#FFFFFF; --off:#FBFCFD; --surface:#F4F7FA; --surface-2:#EBF0F5;
  --border:#DCE5ED; --border-l:#EDF2F7;
  --green:#177245; --green-s:#EAF7F0;
  --serif:'Source Serif 4',Georgia,serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --max:1280px; --gut:44px;
  --r:4px; --rm:8px; --rl:14px;
  --s1:0 1px 2px rgba(11,37,64,.05); --s2:0 4px 16px rgba(11,37,64,.07);
  --s3:0 14px 44px rgba(11,37,64,.11); --sH:0 24px 64px rgba(11,37,64,.16);
  --ease:.2s ease; --easem:.36s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:17px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:var(--sans);cursor:pointer;border:none;background:none}
::selection{background:var(--gold-s);color:var(--navy)}
input,textarea,select{font-family:var(--sans);font-size:1rem;border:1.5px solid var(--border);border-radius:var(--rm);width:100%;padding:13px 16px;background:var(--white);color:var(--ink);outline:none;appearance:none;-webkit-appearance:none;transition:border-color var(--ease),box-shadow var(--ease)}
input:focus,textarea:focus,select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,37,64,.09)}
textarea{resize:vertical;min-height:110px}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234C6172' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.skip{position:absolute;top:-100%;left:20px;background:var(--navy);color:#fff;padding:10px 20px;border-radius:var(--r);font-size:.85rem;z-index:9999;transition:top var(--ease)}
.skip:focus{top:12px}
/* Typography */
h1,h2,h3,.serif{font-family:var(--serif);color:var(--navy);line-height:1.08;font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,5vw,4.4rem)}
h2{font-size:clamp(1.85rem,3.4vw,2.7rem);line-height:1.12}
h3{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.22;letter-spacing:-.01em}
h4{font-size:1.02rem;font-family:var(--sans);font-weight:700;color:var(--navy)}
p{line-height:1.72}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.68rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--gold)}
.eyebrow.no-rule::before{display:none}
.eyebrow-w{color:var(--gold-l)}
.lede{font-size:clamp(1rem,1.5vw,1.16rem);color:var(--muted);line-height:1.75;max-width:66ch}
.center{text-align:center}.center .lede{margin-inline:auto}.center .eyebrow{justify-content:center}
.section-head{margin-bottom:52px;max-width:800px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:104px}.sec-sm{padding-block:72px}
.sec-off{background:var(--off)}.sec-surface{background:var(--surface)}.sec-navy{background:var(--navy)}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 28px;border-radius:var(--r);font-size:.89rem;font-weight:600;line-height:1;transition:all var(--ease);white-space:nowrap;cursor:pointer;border:none;font-family:var(--sans);min-height:48px}
.btn:focus-visible{outline:2px solid #0066CC;outline-offset:3px}
.btn-p{background:var(--navy);color:#fff;box-shadow:var(--s1)}
.btn-p:hover{background:var(--navy-d);box-shadow:var(--s2);transform:translateY(-1px)}
.btn-o{background:transparent;color:var(--navy);border:1.5px solid var(--border)}
.btn-o:hover{border-color:var(--navy);background:var(--surface)}
.btn-g{background:var(--gold);color:var(--navy-d);font-weight:700}
.btn-g:hover{background:#AE8A33;transform:translateY(-1px)}
.btn-ow{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.32)}
.btn-ow:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-sm{padding:10px 20px;font-size:.82rem;min-height:40px}
.btn-lg{padding:17px 36px;font-size:.95rem}
.arr{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.88rem;color:var(--navy);transition:gap var(--ease),color var(--ease);cursor:pointer}
.arr:hover{gap:11px;color:var(--gold)}
.arr svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* Badges */
.badge{display:inline-flex;align-items:center;height:23px;padding:0 10px;border-radius:3px;font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;width:fit-content}
.b-insight{background:#E8F1FD;color:#1450A3}.b-case{background:#FDF3E3;color:#96570E}
.b-video{background:var(--navy);color:#fff}.b-guide{background:#E9F8EF;color:#14713A}
.b-tool{background:#F3E9FA;color:#6D28A8}.b-template{background:#FDEAEA;color:#A32020}
.b-news{background:var(--surface-2);color:var(--muted)}.b-webinar{background:#E6F7F7;color:#0E6E6E}
/* Top progress + announcement */
#prog{position:fixed;top:0;left:0;height:2.5px;background:var(--gold);width:0%;z-index:9999;pointer-events:none}
.ann{background:var(--navy-d);padding:10px 0;position:relative;z-index:990}
.ann-in{display:flex;align-items:center;justify-content:center;gap:14px;flex:1;flex-wrap:wrap}
.ann-badge{background:var(--gold);color:var(--navy-d);font-size:.6rem;font-weight:800;padding:3px 9px;border-radius:2px;letter-spacing:.1em;text-transform:uppercase}
.ann-txt{font-size:.8rem;color:rgba(255,255,255,.85)}
.ann-lnk{color:var(--gold-l);font-weight:600;font-size:.8rem;white-space:nowrap}
.ann-lnk:hover{opacity:.85}
.ann-x{color:rgba(255,255,255,.4);font-size:1.1rem;padding:4px 12px;position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.ann-x:hover{color:#fff}
/* Header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:980;transition:background var(--easem),box-shadow var(--easem)}
.hdr.up{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--border);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:32px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-name{font-family:var(--serif);font-size:1.24rem;font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1}
.logo-sub{font-family:var(--sans);font-size:.57rem;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;display:block;margin-top:3px}
nav.desk-nav{display:flex;align-items:center}
.nav-a{display:block;padding:8px 14px;font-size:.88rem;font-weight:500;color:var(--muted);border-radius:var(--r);transition:color var(--ease),background var(--ease);white-space:nowrap}
.nav-a:hover,.nav-a.on{color:var(--navy);background:var(--surface)}
.hdr-actions{display:flex;align-items:center;gap:12px}
.burger{display:none;flex-direction:column;gap:5px;padding:9px;border-radius:var(--r)}
.burger:hover{background:var(--surface)}
.burger span{display:block;width:21px;height:2px;background:var(--navy);border-radius:2px;transition:transform var(--easem),opacity var(--ease)}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-nav{position:fixed;top:0;right:-320px;width:300px;height:100vh;background:#fff;box-shadow:-8px 0 48px rgba(11,37,64,.15);z-index:985;transition:right var(--easem);padding:100px 22px 32px;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
.mob-nav.show{right:0}
.mob-nav .nav-a{padding:13px 16px;font-size:1rem;color:var(--ink)}
.mob-nav .btn{width:100%;margin-top:12px}
.overlay{position:fixed;inset:0;background:rgba(11,37,64,.42);z-index:984;opacity:0;pointer-events:none;transition:opacity var(--easem)}
.overlay.on{opacity:1;pointer-events:all}
/* Image frames */
.frame{border-radius:var(--rm);overflow:hidden;position:relative;background:var(--surface-2)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.frame:hover img{transform:scale(1.035)}
.img-fell{display:flex;align-items:flex-end;justify-content:flex-start;color:rgba(255,255,255,.75);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;width:100%;height:100%;min-height:180px;text-align:left;padding:18px;position:absolute;inset:0;overflow:hidden}
.img-fell::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px);pointer-events:none}
.img-fell::after{content:'';position:absolute;width:62%;aspect-ratio:1;border-radius:50%;right:-18%;top:-22%;background:radial-gradient(circle at 35% 35%,rgba(217,188,114,.34),rgba(217,188,114,.05) 62%,transparent 70%);pointer-events:none}
.fell-a{background:linear-gradient(148deg,#0A2440 0%,#123454 55%,#1B4066 100%)}
.fell-b{background:linear-gradient(148deg,#0B2036 0%,#274A63 60%,#3E6478 100%)}
.fell-c{background:linear-gradient(148deg,#161F2B 0%,#33405E 55%,#556274 100%)}
.ta-av .img-fell,.abyline .img-fell,.pmeta .img-fell,.avatars .img-fell,.bk-top .img-fell{position:static;min-height:0;font-size:0;padding:0;border-radius:50%;width:44px;height:44px;flex-shrink:0}
.frame,.card-img,.hero-photo,.mtile-img,.vfacade,.ind,.fr-img,.featnl-img,.case-feat-img,.feat-img{position:relative}
/* Cards */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--rm);overflow:hidden;transition:box-shadow var(--easem),transform var(--easem);display:flex;flex-direction:column}
.card:hover{box-shadow:var(--s3);transform:translateY(-4px)}
.card-img{height:210px;overflow:hidden;position:relative;background:var(--surface-2)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .card-img img{transform:scale(1.05)}
.card-img .badge{position:absolute;top:14px;left:14px;z-index:2}
.card-bd{padding:24px;display:flex;flex-direction:column;gap:11px;flex:1}
.card-bd h3{font-size:1.08rem;line-height:1.3}
.card-bd p{font-size:.86rem;color:var(--muted);line-height:1.6;flex:1}
.card-meta{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border-l);font-size:.74rem;color:var(--light)}
/* Placeholder (client asset pending) */
.ph{background:var(--surface-2);border:1.5px dashed #C2CFDC;border-radius:var(--rm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;width:100%;min-height:180px;text-align:center}
.ph svg{width:30px;height:30px;stroke:#9BAFC1;fill:none}
.ph p{font-size:.7rem;color:var(--light);font-style:italic;line-height:1.5;max-width:260px}
/* Reveal animation */
[data-r]{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
[data-r].vis{opacity:1;transform:none}
[data-r][data-d="1"]{transition-delay:.08s}[data-r][data-d="2"]{transition-delay:.16s}
[data-r][data-d="3"]{transition-delay:.24s}[data-r][data-d="4"]{transition-delay:.32s}
/* Sticky mobile CTA */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:960;background:var(--white);border-top:1px solid var(--border);box-shadow:0 -6px 24px rgba(11,37,64,.08);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:none;gap:10px;transform:translateY(110%);transition:transform var(--easem)}
.mcta.on{transform:none}
.mcta .btn{flex:1;min-height:44px;font-size:.84rem}
/* Newsletter band */
.nl-band{background:var(--navy);border-radius:var(--rl);padding:56px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.nl-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 85% 20%,rgba(192,154,62,.16),transparent 60%);pointer-events:none}
.nl-band h2{color:#fff;position:relative}
.nl-band p{color:rgba(255,255,255,.66);font-size:.94rem;position:relative}
.nl-inline{display:flex;gap:0;position:relative;max-width:460px}
.nl-inline input{border-radius:var(--r) 0 0 var(--r);border:none;background:#fff;font-size:.9rem}
.nl-inline button{border-radius:0 var(--r) var(--r) 0;background:var(--gold);color:var(--navy-d);font-weight:700;padding:0 26px;white-space:nowrap;font-size:.86rem;transition:background var(--ease)}
.nl-inline button:hover{background:#AE8A33}
.nl-note{font-size:.72rem;color:rgba(255,255,255,.42)!important;margin-top:10px}
/* CTA band */
.cta-band{background:var(--navy);padding-block:88px;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(192,154,62,.14),transparent 70%)}
.cta-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px}
.cta-inner h2{color:#fff;font-style:italic}
.cta-inner p{color:rgba(255,255,255,.68);max-width:54ch}
/* Footer */
.footer{background:var(--navy-d);color:rgba(255,255,255,.6)}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:52px;padding-block:72px 44px;border-bottom:1px solid rgba(255,255,255,.07)}
.ft-brand .logo-name{color:#fff}.ft-brand .logo-sub{color:rgba(255,255,255,.35)}
.ft-brand p{font-size:.85rem;color:rgba(255,255,255,.48);line-height:1.65;margin-top:16px;max-width:32ch}
.ft-social{display:flex;gap:8px;margin-top:20px}
.ft-soc{width:35px;height:35px;border-radius:var(--r);background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:background var(--ease)}
.ft-soc:hover{background:rgba(255,255,255,.15)}
.ft-soc svg{width:15px;height:15px;stroke:rgba(255,255,255,.65);fill:none;stroke-linecap:round;stroke-linejoin:round}
.ft-col h5{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.32);margin-bottom:16px}
.ft-col a{display:block;font-size:.85rem;color:rgba(255,255,255,.58);margin-bottom:10px;transition:color var(--ease)}
.ft-col a:hover{color:#fff}
.ft-nl{display:flex;margin-top:14px}
.ft-nl input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:.83rem;padding:10px 14px;border-radius:var(--r) 0 0 var(--r)}
.ft-nl input::placeholder{color:rgba(255,255,255,.3)}
.ft-nl input:focus{border-color:var(--gold);box-shadow:none}
.ft-nl button{background:var(--gold);color:var(--navy-d);font-size:.78rem;font-weight:700;padding:10px 16px;border-radius:0 var(--r) var(--r) 0;white-space:nowrap}
.ft-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-block:26px;font-size:.75rem;color:rgba(255,255,255,.28)}
.ft-legal{display:flex;gap:20px}
.ft-legal a{color:rgba(255,255,255,.28)}.ft-legal a:hover{color:#fff}
/* ── Full site index band: every page, grouped, in the footer ── */
.ft-index{border-top:1px solid rgba(255,255,255,.07);padding-block:40px 8px}
.ft-ix-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.ft-ix-head h5{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.32)}
.ft-ix-head a{font-size:.75rem;color:var(--gold-l)}
.ft-ix-head a:hover{color:#fff}
.ft-ix{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 32px}
.ft-ix h6{font-family:var(--sans);font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:11px}
.ft-ix a{display:block;font-size:.79rem;line-height:1.5;color:rgba(255,255,255,.45);margin-bottom:8px;transition:color var(--ease)}
.ft-ix a:hover{color:#fff}
@media(max-width:1000px){.ft-ix{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.ft-ix{grid-template-columns:1fr 1fr;gap:22px}}
/* Modal */
.modal{position:fixed;inset:0;z-index:9998;background:rgba(7,26,46,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .28s ease}
.modal.on{opacity:1;pointer-events:all}
.modal-box{background:#fff;border-radius:var(--rl);max-width:520px;width:100%;padding:40px;position:relative;box-shadow:var(--sH);transform:translateY(14px);transition:transform .28s ease;max-height:90vh;overflow-y:auto}
.modal.on .modal-box{transform:none}
.modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:1.05rem;transition:background var(--ease)}
.modal-x:hover{background:var(--surface)}
/* FAQ */
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 0;text-align:left;font-size:.98rem;font-weight:600;color:var(--navy);transition:color var(--ease);font-family:var(--sans)}
.faq-btn:hover{color:var(--gold)}
.faq-btn svg{width:18px;height:18px;stroke:var(--muted);fill:none;flex-shrink:0;transition:transform var(--easem);stroke-width:2;stroke-linecap:round}
.faq-item.open .faq-btn svg{transform:rotate(45deg)}
.faq-ans{display:none;padding-bottom:24px;font-size:.92rem;color:var(--muted);line-height:1.74;max-width:74ch}
.faq-item.open .faq-ans{display:block}
/* Stats */
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center}
.stat-n{font-family:var(--serif);font-size:clamp(2.8rem,5.6vw,4.6rem);font-weight:600;color:var(--gold);line-height:1;letter-spacing:-.03em}
.stat-rule{display:block;width:32px;height:1px;background:rgba(192,154,62,.35);margin:14px auto}
.stat-l{font-size:.82rem;color:rgba(255,255,255,.58);line-height:1.45;max-width:20ch;margin-inline:auto}
/* Filter chips */
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{padding:9px 18px;border-radius:100px;font-size:.8rem;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--border);transition:all var(--ease);cursor:pointer}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* Breadcrumb */
.crumb{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--light);flex-wrap:wrap}
.crumb a:hover{color:var(--navy)}
.crumb span{color:#C3CFDA}
/* Utility grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
/* Video facade */
.vfacade{position:relative;border-radius:var(--rm);overflow:hidden;cursor:pointer;background:var(--navy-d)}
.vfacade img{width:100%;object-fit:cover;opacity:.82;transition:opacity var(--ease),transform .6s ease}
.vfacade:hover img{opacity:.65;transform:scale(1.03)}
.vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.vplay span{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:var(--s3);transition:transform var(--ease)}
.vfacade:hover .vplay span{transform:scale(1.08)}
.vplay svg{width:24px;height:24px;fill:var(--navy);margin-left:4px}
.vtime{position:absolute;bottom:14px;right:14px;background:rgba(7,26,46,.82);color:#fff;font-size:.7rem;font-weight:600;padding:4px 10px;border-radius:3px}
/* Lightbox */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(7,26,46,.94);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .28s ease}
.lb.on{opacity:1;pointer-events:all}
.lb-box{position:relative;width:92vw;max-width:920px;background:#000;border-radius:var(--rm);overflow:hidden;aspect-ratio:16/9}
.lb-x{position:absolute;top:-46px;right:0;background:rgba(255,255,255,.12);color:#fff;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.lb-x:hover{background:rgba(255,255,255,.26)}
.lb-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center;background:var(--navy-d)}
.lb-ph svg{width:44px;height:44px;stroke:rgba(255,255,255,.3);fill:none}
.lb-ph p{font-size:.8rem;color:rgba(255,255,255,.45);font-style:italic;max-width:40ch}
/* Back to top */
.btt{position:fixed;right:22px;bottom:24px;width:44px;height:44px;border-radius:50%;background:var(--white);border:1px solid var(--border);box-shadow:var(--s2);display:flex;align-items:center;justify-content:center;z-index:950;opacity:0;pointer-events:none;transition:opacity var(--ease),transform var(--ease)}
.btt.on{opacity:1;pointer-events:all}
.btt:hover{transform:translateY(-3px)}
.btt svg{width:16px;height:16px;stroke:var(--navy);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Responsive */
@media(max-width:1120px){
  :root{--gut:30px}
  .g4{grid-template-columns:1fr 1fr}
  .ft-top{grid-template-columns:1fr 1fr;gap:40px}
  .stats-inner{grid-template-columns:1fr 1fr}
  .nl-band{grid-template-columns:1fr;padding:44px;gap:28px}
}
@media(max-width:900px){
  .g2,.g3{grid-template-columns:1fr}
}
@media(max-width:820px){
  :root{--gut:20px}
  html{font-size:16px}
  .burger{display:flex}
  .desk-nav,.hdr-actions .btn{display:none}
  .sec{padding-block:72px}.sec-sm{padding-block:56px}
  .mcta{display:flex}
  .btt{bottom:80px}
  .footer{padding-bottom:64px}
}
@media(max-width:600px){
  .g4{grid-template-columns:1fr}
  .stats-inner{grid-template-columns:1fr 1fr;gap:28px}
  .ft-top{grid-template-columns:1fr;gap:34px}
  .btns .btn{width:100%}
  .nl-band{padding:32px 24px}
  .nl-inline{flex-direction:column;gap:10px}
  .nl-inline input,.nl-inline button{border-radius:var(--r);padding:13px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-r]{opacity:1;transform:none}
}
:focus-visible{outline:2px solid #0066CC;outline-offset:3px}
:focus:not(:focus-visible){outline:none}

/* ══════════ V3 — premium editorial layer ══════════ */

/* ── v3 tokens ── */
:root{
  --navy:#08213C; --navy-d:#051627; --navy-l:#123454;
  --gold:#B8923A; --gold-l:#D9BC72; --gold-s:rgba(184,146,58,.09);
  --ink:#0C1B28; --muted:#51667A; --light:#8298AB;
  --white:#FFFFFF; --off:#FAFBFC; --surface:#F3F6F9; --surface-2:#E9EEF4;
  --border:#E3E9F0; --border-l:#EEF2F7;
  --sans:'Instrument Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --max:1320px;
  --r:10px; --rm:16px; --rl:24px;
  --s1:0 1px 2px rgba(8,33,60,.04),0 1px 1px rgba(8,33,60,.03);
  --s2:0 2px 4px rgba(8,33,60,.04),0 8px 24px rgba(8,33,60,.07);
  --s3:0 4px 8px rgba(8,33,60,.05),0 24px 64px rgba(8,33,60,.12);
  --sH:0 8px 16px rgba(8,33,60,.07),0 32px 88px rgba(8,33,60,.18);
  --ease:.22s cubic-bezier(.4,0,.2,1); --easem:.5s cubic-bezier(.22,1,.36,1);
}
html{font-size:16.5px}
body{letter-spacing:-.006em}
/* Scrollbar */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:#C4D0DC;border-radius:8px;border:3px solid var(--surface)}
::-webkit-scrollbar-thumb:hover{background:var(--light)}
/* ── Display typography ── */
h1{font-size:clamp(2.7rem,5.6vw,5rem);letter-spacing:-.028em;line-height:1.02;text-wrap:balance;font-weight:600}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.024em;line-height:1.08;text-wrap:balance}
h3{letter-spacing:-.015em}
.lede{font-size:clamp(1.02rem,1.5vw,1.19rem);line-height:1.8}
.eyebrow{font-size:.66rem;letter-spacing:.22em;gap:12px}
.eyebrow::before{width:24px;height:1.5px}
.sec{padding-block:120px}.sec-sm{padding-block:84px}
.section-head{margin-bottom:60px}
/* ── Buttons: pill + arrow micro-motion ── */
.btn{border-radius:999px;padding:15px 30px;font-weight:600;letter-spacing:-.005em;
  transition:transform var(--ease),box-shadow var(--ease),background var(--ease),border-color var(--ease),color var(--ease)}
.btn-lg{padding:18px 38px}
.btn-sm{padding:11px 22px;border-radius:999px}
.btn-p{background:linear-gradient(180deg,var(--navy-l) -40%,var(--navy) 60%);box-shadow:var(--s1),inset 0 1px 0 rgba(255,255,255,.09)}
.btn-p:hover{background:var(--navy-d);transform:translateY(-2px);box-shadow:var(--s2)}
.btn-g{background:linear-gradient(180deg,var(--gold-l) -60%,var(--gold) 55%);box-shadow:var(--s1),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-g:hover{background:#A5822F;transform:translateY(-2px);box-shadow:0 12px 28px rgba(184,146,58,.32)}
.btn-o{border-width:1px;background:rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.btn-o:hover{transform:translateY(-2px)}
.btn-ow{border-width:1px}
.btn-ow:hover{transform:translateY(-2px)}
.arr svg{transition:transform var(--ease)}
.arr:hover svg{transform:translateX(3px)}
/* ── Glass header ── */
.hdr-in{height:80px}
.hdr.up{background:rgba(255,255,255,.82);box-shadow:0 1px 0 rgba(8,33,60,.06),0 12px 32px rgba(8,33,60,.05);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px)}
.logo-name{font-size:1.3rem;font-weight:700;letter-spacing:-.03em}
.logo-sub{letter-spacing:.14em}
.nav-a{position:relative;border-radius:999px;padding:9px 15px;font-size:.86rem}
.nav-a::after{content:'';position:absolute;left:15px;right:15px;bottom:5px;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform var(--ease)}
.nav-a:hover{background:transparent;color:var(--navy)}
.nav-a:hover::after,.nav-a.on::after{transform:scaleX(1)}
.nav-a.on{background:transparent}
.ann{padding:11px 0}
.ann-badge{border-radius:999px;padding:3px 11px}
/* ── Cards: bento treatment ── */
.card{border-radius:var(--rl);border-color:var(--border);box-shadow:var(--s1);
  transition:box-shadow var(--easem),transform var(--easem),border-color var(--easem)}
.card:hover{box-shadow:var(--s3);transform:translateY(-6px);border-color:#D3DDE7}
.card-img{height:228px}
.card-img img{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.card:hover .card-img img{transform:scale(1.06)}
.card-bd{padding:26px 26px 24px;gap:12px}
.badge{border-radius:999px;height:24px;padding:0 12px;letter-spacing:.08em;font-size:.6rem;backdrop-filter:blur(8px)}
.frame{border-radius:var(--rl)}
.chip{padding:10px 20px;border-width:1px;font-size:.82rem}
.chip.on{box-shadow:0 6px 18px rgba(8,33,60,.18)}
/* ── Inputs ── */
input,textarea,select{border-radius:14px;border-width:1px;background:var(--off);padding:14px 18px}
input:focus,textarea:focus,select:focus{background:var(--white);border-color:var(--navy);box-shadow:0 0 0 4px rgba(8,33,60,.07)}
/* ── Reveal: blur rise ── */
[data-r]{opacity:0;transform:translateY(26px);filter:blur(7px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1),filter .85s cubic-bezier(.22,1,.36,1)}
[data-r].vis{opacity:1;transform:none;filter:none}
/* ── Dark bands: layered glow ── */
.sec-navy,.cta-band{background:
  radial-gradient(ellipse 60% 80% at 12% -10%,rgba(18,52,84,.9),transparent 60%),
  radial-gradient(ellipse 50% 70% at 95% 110%,rgba(184,146,58,.13),transparent 55%),
  var(--navy)}
.cta-band{padding-block:104px}
.cta-band::before{background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(217,188,114,.12),transparent 70%)}
.cta-inner h2{font-size:clamp(2rem,3.8vw,3rem)}
.stat-n{background:linear-gradient(160deg,var(--gold-l) 20%,var(--gold) 80%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nl-band{border-radius:28px;padding:64px}
.nl-inline input{border-radius:999px 0 0 999px;background:#fff;padding-left:24px}
.nl-inline button{border-radius:0 999px 999px 0;padding:0 30px}
/* ── Logo marquee (built by JS from .logos-row) ── */
.logos-strip{border-block:1px solid var(--border-l);background:var(--white);padding-block:36px}
.logos-row.mk-marquee{flex-wrap:nowrap;justify-content:flex-start;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mk-track{display:flex;gap:14px;align-items:center;animation:mkScroll 30s linear infinite;flex-shrink:0;padding-right:14px}
.logos-row.mk-marquee:hover .mk-track{animation-play-state:paused}
@keyframes mkScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.logo-pill{border-radius:999px;height:38px;padding:0 22px;font-size:.68rem;color:var(--muted);
  background:var(--off);border-color:var(--border);white-space:nowrap;flex-shrink:0}
/* ── Shared component polish ── */
.faq-btn{font-size:1.02rem;padding:26px 0}
.faq-item.open{background:linear-gradient(90deg,var(--gold-s),transparent 60%);margin-inline:-18px;padding-inline:18px;border-radius:12px}
.faq-item.open .faq-btn{color:var(--navy)}
.modal-box{border-radius:26px;padding:44px}
.hdr-in{min-width:0}
.logo{min-width:0;overflow:hidden}
.logo-name{white-space:nowrap}
.hdr-actions{flex-shrink:0}
@media(max-width:520px){.logo-sub{display:none}.logo-name{font-size:1.15rem}}
@media(max-width:400px){.ann-txt{display:none}.ann-in{gap:10px}}
.mcta{background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.btt{border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px)}
.footer{background:
  radial-gradient(ellipse 70% 60% at 85% 0%,rgba(18,52,84,.55),transparent 55%),var(--navy-d)}
.ft-soc{border-radius:999px}
.ft-nl input{border-radius:999px 0 0 999px;background:rgba(255,255,255,.07)}
.ft-nl button{border-radius:0 999px 999px 0}
.vplay span{width:84px;height:84px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  box-shadow:0 8px 32px rgba(5,22,39,.35),inset 0 0 0 1px rgba(255,255,255,.6);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.vfacade:hover .vplay span{transform:scale(1.12)}
.vtime{border-radius:999px;padding:5px 12px;backdrop-filter:blur(6px)}
/* ── Page-level premium touches (apply where the class exists) ── */
.hero{background:
  radial-gradient(ellipse 44% 56% at 86% 6%,rgba(184,146,58,.10),transparent 62%),
  radial-gradient(ellipse 36% 44% at 4% 96%,rgba(8,33,60,.05),transparent 60%),
  linear-gradient(180deg,#FDFEFF, #FAFBFC)}
.hero-photo{border-radius:30px}
.hero-badge{border-radius:20px;backdrop-filter:blur(10px);background:rgba(255,255,255,.88)}
.hero-accent{border-radius:20px}
.hero-proof{gap:32px}
.hp-n{font-size:1.85rem;letter-spacing:-.03em}
.mosaic{gap:12px}
.mtile{border-radius:20px}
.mtile-promo{border-radius:20px}
.featnl{border-radius:28px}
.epi-main{border-radius:26px}
.epi-rail{border-radius:0 0 26px 26px}
.svc-box{border-radius:26px;padding:52px}
.svc-accent{height:4px;border-radius:99px;width:56px}
.step-n{width:58px;height:58px;box-shadow:var(--s1)}
.gauge-card{border-radius:26px}
.case-feat{border-radius:28px}
.cm{border-radius:16px}
.testi-card{border-radius:0 22px 22px 0;box-shadow:var(--s2)}
.quiz-shell{border-radius:28px;box-shadow:var(--sH)}
.qopt{border-radius:16px;border-width:1px}
.qopt:hover{transform:translateX(4px)}
.qopt .kbd{border-radius:8px}
.book-card{border-radius:28px;box-shadow:var(--sH)}
.bk-slot{border-radius:12px;border-width:1px}
.eng-card,.aside-cta2,.aside-card,.aside-cta{border-radius:22px}
.upgrade{border-radius:24px}
.takeaways{border-radius:20px}
.authorbox{border-radius:26px}
.cs-quote{border-radius:26px}
.glance{border-radius:24px}
.br{border-radius:22px}
.val-card,.mv-card,.mini{border-radius:20px}
.ind{border-radius:20px}
.path-card{border-radius:24px;border-width:1px}
.path-card:hover{transform:translateY(-3px);box-shadow:var(--s3)}
.path-ico{border-radius:18px}
.feat-post,.feat-res{border-radius:28px}
.lpf{border-radius:28px;box-shadow:var(--sH)}
.exp-box{padding:22px}
@media(max-width:820px){.sec{padding-block:84px}.hero-photo{border-radius:22px}}

/* ══════════ V4 — app layer (nav, modal, toasts) ══════════ */

/* ── Nav dropdown ── */
.nav-dd{position:relative}
.nav-dd .nav-a{display:inline-flex;align-items:center;gap:6px}
.nav-dd .nav-a svg{transition:transform var(--ease)}
.nav-dd:hover .nav-a svg,.nav-dd:focus-within .nav-a svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);min-width:340px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(18px);border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--sH);padding:10px;opacity:0;pointer-events:none;visibility:hidden;z-index:995;
  /* Closing is delayed so a brief cursor slip doesn't dismiss it; opening is instant. */
  transition:opacity .18s ease .22s,transform .18s ease .22s,visibility 0s linear .4s}
/* Invisible bridge across the gap. It is a CHILD of .nav-dd, so the cursor
   crossing it keeps :hover true and the panel stays open. */
.dd-panel::before{content:'';position:absolute;top:-18px;left:0;right:0;height:18px}
/* Extend the trigger's own hover area downward. */
.nav-dd::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px}
.nav-dd:hover .dd-panel,.nav-dd:focus-within .dd-panel{
  opacity:1;pointer-events:all;visibility:visible;transform:translate(-50%,0);
  transition:opacity .16s ease 0s,transform .16s ease 0s,visibility 0s linear 0s}
.dd-a{display:block;padding:12px 16px;border-radius:14px;transition:background var(--ease)}
.dd-a:hover{background:var(--surface)}
.dd-a strong{display:block;font-size:.88rem;color:var(--navy);font-weight:600}
.dd-a span{display:block;font-size:.74rem;color:var(--light);line-height:1.45;margin-top:2px}
.dd-all{background:var(--gold-s);margin-bottom:4px}
.dd-all:hover{background:rgba(184,146,58,.16)}
.mob-sub{padding-left:34px!important;font-size:.9rem!important;color:var(--muted)!important}
/* Mobile nav visibility — overrides the base `nav.desk-nav{display:flex}`
   rule, whose element+class specificity beat the base media query. */
@media(max-width:820px){
  nav.desk-nav{display:none}
  .hdr-actions .btn{display:none}
  .burger{display:flex}
}
/* ── Contextual lead modal ── */
.lead-modal .modal-box{max-width:560px;padding:0;overflow:hidden}
.lm-head{background:
  radial-gradient(ellipse 70% 100% at 100% 0%,rgba(184,146,58,.22),transparent 60%),var(--navy);
  padding:30px 36px}
.lm-head h3{color:#fff;font-size:1.3rem;letter-spacing:-.01em}
.lm-head p{color:rgba(255,255,255,.62);font-size:.84rem;margin-top:6px}
.lm-ctx{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
  color:var(--gold-l);border-radius:999px;padding:5px 14px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.lm-body{padding:28px 36px 34px}
.lm-step{display:none;flex-direction:column;gap:13px}
.lm-step.on{display:flex}
.lm-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lm-slot{padding:13px;border:1px solid var(--border);border-radius:14px;text-align:center;font-size:.84rem;font-weight:600;
  color:var(--navy);cursor:pointer;transition:all var(--ease);background:var(--off)}
.lm-slot:hover{border-color:var(--navy)}
.lm-slot.sel{background:var(--navy);color:#fff;border-color:var(--navy)}
.lm-note{font-size:.7rem;color:var(--light);text-align:center}
.lm-done{text-align:center;padding:10px 0}
/* The social-proof toast was removed in v13. It announced invented
   activity ("a founder in Manchester just booked…") as though it were
   real, which is a trust liability for a consultancy — and when its
   text had not yet been set it rendered as an empty floating box. */
/* ── Cookie notice ── */
/* Full-width, bottom-anchored, deliberately slim. Sits BELOW every other
   piece of fixed chrome (sticky CTA 960, toast 955, back-to-top 950). */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:930;background:var(--navy-d);
  color:rgba(255,255,255,.78);border-top:1px solid rgba(255,255,255,.1);border-radius:0;
  padding:10px 24px;display:flex;gap:18px;align-items:center;justify-content:center;
  font-size:.76rem;line-height:1.4;transform:translateY(100%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);box-shadow:0 -4px 20px rgba(0,0,0,.14)}
.cookiebar.on{transform:none}
.cookiebar a{color:var(--gold-l);font-weight:600}
.cookiebar .ck-txt{max-width:70ch}
.cookiebar .ck-actions{display:flex;gap:8px;flex-shrink:0}
.cookiebar .btn{min-height:32px;padding:6px 16px;font-size:.73rem;border-radius:999px}
/* Lift the other bottom-anchored chrome clear of the bar while it shows. */
body.ck-open .btt,body.ck-open .toast,body.ck-open .slidein{bottom:74px}
@media(max-width:820px){
  body.ck-open .btt{bottom:132px}
  body.ck-open .mcta{bottom:44px}
}
@media(max-width:700px){
  .cookiebar{flex-direction:column;gap:10px;padding:12px 18px;text-align:center}
  .cookiebar .ck-actions{width:100%;justify-content:center}
}

/* ══════════════════════════════════════════════════════════════
   OVERFLOW HARDENING
   Grid and flex children default to min-width:auto, so one wide
   child (a long word, a fixed-width control, a padded panel) can
   push the whole page sideways. These rules make every layout
   container shrinkable and cap the few blocks that were still
   overflowing at 390px.
══════════════════════════════════════════════════════════════ */
.g2>*,.g3>*,.g4>*,.book-grid>*,.hero-grid>*,.alayout>*,.detgrid>*,
.rlh-grid>*,.lanes>*,.smgrid>*,.freg>*,.jrail>*,.ft-top>*,.ft-ix>*{min-width:0}
.wrap,main,.sec,.sec-sm{max-width:100%}
main,.footer{overflow-x:clip}
.prose,.legal,.det-prose,.sm-node p,.lane p{overflow-wrap:anywhere}
@media(max-width:760px){
  .svc-box{padding:30px 22px}
  .book-grid{gap:28px}
  .bk-body,.bk-cal{min-width:0}
  .bk-slots{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .svc-box{padding:24px 18px}
}

/* ══════════ ASSESSMENT ══════════ */

.quiz-shell{max-width:760px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:28px;box-shadow:var(--sH);overflow:hidden}
.quiz-top{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--border-l);background:var(--off)}
.quiz-top .qt-lbl{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.quiz-top .qt-step{font-size:.72rem;color:var(--light)}
.qbar{height:4px;background:var(--surface-2)}
.qbar i{display:block;height:100%;background:var(--gold);width:0%;transition:width .4s ease}
.qbody{padding:44px 48px 48px;min-height:380px;display:flex;flex-direction:column}
.qq{display:none;flex-direction:column;flex:1;animation:qIn .35s ease}
.qq.on{display:flex}
@keyframes qIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.qq h3{font-size:clamp(1.25rem,2.2vw,1.6rem);margin-bottom:8px;line-height:1.3}
.qq .qhelp{font-size:.85rem;color:var(--light);margin-bottom:26px}
.qopts{display:flex;flex-direction:column;gap:10px}
.qopt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--border);border-radius:16px;cursor:pointer;transition:all var(--ease);font-size:.94rem;text-align:left;background:var(--white);width:100%}
.qopt:hover{border-color:var(--navy);background:var(--off);transform:translateX(4px)}
.qopt.sel{border-color:var(--gold);background:var(--gold-s);font-weight:600;color:var(--navy)}
.qopt .kbd{width:26px;height:26px;border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--muted);flex-shrink:0;background:var(--surface)}
.qopt.sel .kbd{background:var(--gold);border-color:var(--gold);color:var(--navy-d)}
.qnav{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:28px}
.qback{font-size:.82rem;font-weight:600;color:var(--light);display:inline-flex;gap:6px;align-items:center}
.qback:hover{color:var(--navy)}
.qfields{display:flex;flex-direction:column;gap:14px}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qresult{display:none;padding:0}
.qresult.on{display:block}
.qr-head{background:linear-gradient(150deg,var(--navy),var(--navy-l));padding:44px 48px;text-align:center;position:relative;overflow:hidden}
.qr-head::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(184,146,58,.2),transparent 65%)}
.qr-head>*{position:relative}
.qr-head .eyebrow{justify-content:center}
.qr-score{font-family:var(--serif);font-size:4.6rem;font-weight:600;color:#fff;line-height:1}
.qr-score span{font-size:1.6rem;color:rgba(255,255,255,.5)}
.qr-tier{display:inline-block;margin-top:12px;padding:6px 18px;border-radius:100px;background:var(--gold);color:var(--navy-d);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.qr-sum{color:rgba(255,255,255,.72);font-size:.92rem;max-width:52ch;margin:16px auto 0;line-height:1.65}
.qr-body{padding:40px 48px}
.qr-dims{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.qr-dim{display:grid;grid-template-columns:150px 1fr 44px;gap:14px;align-items:center;font-size:.85rem}
.qr-dim strong{color:var(--navy)}
.qr-dim .bar{height:9px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.qr-dim .bar i{display:block;height:100%;border-radius:5px;width:0;transition:width 1.1s cubic-bezier(.4,0,.2,1)}
.qr-dim span{text-align:right;font-weight:700;color:var(--navy)}
.qr-recs{background:var(--off);border:1px solid var(--border-l);border-radius:20px;padding:28px;margin-bottom:32px}
.qr-recs h4{margin-bottom:16px}
.qr-recs li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-l);font-size:.9rem;line-height:1.55}
.qr-recs li:last-child{border-bottom:none}
.qr-recs li b{color:var(--gold);flex-shrink:0}
.qr-ctas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* The recommended path: resources for the weakest dimensions, then the
   engagement that fits the band — the score leads somewhere, not to a
   dead end. */
.qr-path{border:1px solid var(--border);border-radius:20px;padding:28px;margin-bottom:32px}
.qr-path h4{margin-bottom:6px}
.qr-path-p{font-size:.85rem;color:var(--muted);margin-bottom:16px}
.qr-guides{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.qr-g{display:flex;flex-direction:column;gap:4px;border:1px solid var(--border);border-radius:14px;padding:14px 16px;font-size:.88rem;font-weight:600;color:var(--navy);transition:all var(--ease)}
.qr-g:hover{border-color:var(--brand);background:var(--off)}
.qr-g span{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--light)}
.qr-svc{display:flex;flex-direction:column;gap:6px;background:var(--navy);border-radius:16px;padding:20px 22px;color:#fff;transition:background var(--ease)}
.qr-svc .qs-k{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-l)}
.qr-svc strong{font-size:1.05rem;color:#fff}
.qr-svc .qs-d{font-size:.85rem;color:rgba(255,255,255,.75);line-height:1.5}
.qr-svc .arr{color:var(--gold-l);font-size:.85rem;margin-top:4px}
.qr-svc:hover{background:var(--navy-d)}
@media(max-width:600px){.qr-guides{grid-template-columns:1fr}}
#report{display:none}
@media print{
  body>*{display:none!important}
  #report{display:block!important;font-family:Georgia,serif;color:#10202E;padding:0 8mm}
  #report .rp-head{border-bottom:3px solid #B8923A;padding-bottom:14px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:flex-end}
  #report .rp-h1{font-size:22pt;color:#08213C;margin:0;font-weight:700}
  #report .rp-brand{font-size:10pt;color:#51667A}
  #report h2{font-size:14pt;color:#08213C;margin:18px 0 8px;border-bottom:1px solid #E3E9F0;padding-bottom:4px}
  #report p,#report li{font-size:10.5pt;line-height:1.6}
  #report table{width:100%;border-collapse:collapse;margin:10px 0}
  #report td,#report th{border:1px solid #E3E9F0;padding:6px 10px;font-size:10pt;text-align:left}
  #report th{background:#F3F6F9;color:#08213C}
  #report .rp-score{font-size:30pt;color:#B8923A;font-weight:bold}
  #report ul{padding-left:18px}#report ul li{list-style:disc;margin-bottom:5px}
  #report .rp-foot{margin-top:22px;padding-top:10px;border-top:1px solid #E3E9F0;font-size:8.5pt;color:#8298AB}
}
@media(max-width:900px){.qbody,.qr-body{padding:28px 22px}.qr-head{padding:32px 22px}.qrow,.qr-ctas{grid-template-columns:1fr}.qr-dim{grid-template-columns:110px 1fr 40px}}

/* ══════════ RESOURCE LIBRARY ══════════ */

.phero{padding-top:186px;padding-bottom:72px;background:var(--off);border-bottom:1px solid var(--border)}
.phero h1{font-size:clamp(2.1rem,4vw,3.3rem);max-width:24ch}
.phero .lede{margin-top:18px}
.typenav{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.typenav a{padding:10px 20px;border-radius:999px;font-size:.82rem;font-weight:600;border:1px solid var(--border);color:var(--muted);background:var(--white);transition:all var(--ease)}
.typenav a:hover{border-color:var(--navy);color:var(--navy)}
.typenav a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.detgrid{display:grid;grid-template-columns:minmax(0,720px) 320px;gap:60px;justify-content:center}
.det-prose{font-size:1rem;line-height:1.82}
.det-prose h2{font-size:1.55rem;margin:44px 0 16px;scroll-margin-top:110px}
.det-prose h2:first-child{margin-top:0}
.det-prose p{margin-bottom:20px}
.det-prose ul{margin-bottom:20px}
.det-prose ul li{position:relative;padding-left:26px;margin-bottom:10px}
.det-prose ul li::before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.det-aside{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:20px}
.aside-card{background:var(--white);border:1px solid var(--border);border-radius:22px;padding:26px}
.aside-card h5{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--light);margin-bottom:14px}
.aside-card ul li{padding:8px 0;border-bottom:1px solid var(--border-l);font-size:.85rem}
.aside-card ul li:last-child{border-bottom:none}
.aside-card ul a{color:var(--navy);font-weight:500;display:flex;gap:8px;align-items:flex-start}
.aside-card ul a::before{content:'→';color:var(--gold)}
.gatecard{background:linear-gradient(150deg,var(--navy),var(--navy-l));border-radius:24px;padding:30px;position:relative;overflow:hidden}
.gatecard::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 100% 0%,rgba(184,146,58,.22),transparent 60%)}
.gatecard>*{position:relative}
.gatecard h4{color:#fff;font-family:var(--serif);font-size:1.1rem;margin-bottom:6px}
.gatecard p{color:rgba(255,255,255,.62);font-size:.8rem;margin-bottom:16px;line-height:1.55}
.gatecard form{display:flex;flex-direction:column;gap:10px}
.gatecard input{background:rgba(255,255,255,.96);border:none;font-size:.86rem}
.gatecard .gk-done{display:none;text-align:center;color:#fff;padding:8px 0}
.hero-det{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero-det .frame{aspect-ratio:16/11;box-shadow:var(--s3)}
.inside-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.inside-item{display:flex;gap:12px;background:var(--off);border:1px solid var(--border-l);border-radius:16px;padding:16px 18px;font-size:.88rem;line-height:1.5}
.inside-item::before{content:'✓';color:var(--gold);font-weight:800}
.stepline{counter-reset:st;display:flex;flex-direction:column;gap:0;margin:26px 0}
.stepline li{counter-increment:st;display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--border-l);font-size:.92rem;align-items:flex-start}
.stepline li:last-child{border-bottom:none}
.stepline li::before{content:counter(st);width:30px;height:30px;border-radius:50%;background:var(--gold-s);color:var(--gold);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--serif)}
/* preview doc mock */
.docmock{background:var(--white);border:1px solid var(--border);border-radius:18px;box-shadow:var(--s3);padding:26px;transform:rotate(-1.2deg)}
.docmock .dm-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--gold);padding-bottom:10px;margin-bottom:14px}
.docmock .dm-head strong{font-family:var(--serif);color:var(--navy);font-size:.95rem}
.docmock .dm-head span{font-size:.6rem;color:var(--light);letter-spacing:.1em;text-transform:uppercase}
.docmock .dm-line{height:9px;border-radius:5px;background:var(--surface-2);margin-bottom:9px}
.docmock .dm-line.short{width:62%}
.docmock .dm-check{display:flex;gap:10px;align-items:center;font-size:.76rem;color:var(--muted);padding:7px 0;border-bottom:1px dashed var(--border-l)}
.docmock .dm-check::before{content:'☐';color:var(--gold);font-size:.9rem}
/* video pages */
.vwrap{max-width:960px;margin:0 auto}
.vchapters li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-l);font-size:.9rem;align-items:baseline}
.vchapters li:last-child{border-bottom:none}
.vchapters .tc{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--gold);font-weight:700;min-width:52px}
/* calculators */
.calc{max-width:860px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:28px;box-shadow:var(--sH);overflow:hidden}
.calc-head{background:linear-gradient(150deg,var(--navy),var(--navy-l));padding:30px 40px;position:relative;overflow:hidden}
.calc-head::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 100% at 100% 0%,rgba(184,146,58,.2),transparent 60%)}
.calc-head h3{color:#fff;position:relative}
.calc-head p{color:rgba(255,255,255,.6);font-size:.84rem;position:relative;margin-top:4px}
.calc-body{padding:36px 40px;display:grid;grid-template-columns:1fr 1fr;gap:44px}
.calc-fields{display:flex;flex-direction:column;gap:20px}
.cf-lab{font-size:.8rem;font-weight:700;color:var(--navy);display:flex;justify-content:space-between}
.cf-lab output{color:var(--gold);font-variant-numeric:tabular-nums}
input[type=range]{appearance:none;-webkit-appearance:none;height:6px;border-radius:4px;background:var(--surface-2);padding:0;border:none}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:var(--s2);border:3px solid #fff}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);cursor:pointer;border:3px solid #fff}
.calc-out{background:var(--off);border:1px solid var(--border-l);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:16px}
.co-big{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.1rem);font-weight:600;color:var(--navy);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.co-big small{font-size:1rem;color:var(--light);font-family:var(--sans);font-weight:500}
.co-row{display:flex;justify-content:space-between;font-size:.85rem;padding:8px 0;border-bottom:1px dashed var(--border-l)}
.co-row strong{color:var(--navy);font-variant-numeric:tabular-nums}
.co-note{font-size:.72rem;color:var(--light);line-height:1.5}
.co-bars{display:flex;flex-direction:column;gap:9px}
.co-bar{display:grid;grid-template-columns:96px 1fr 74px;gap:10px;align-items:center;font-size:.76rem;color:var(--muted)}
.co-bar .bg{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.co-bar .bg i{display:block;height:100%;border-radius:6px;background:var(--gold);transition:width .5s ease}
.co-bar strong{text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
.yn-grid{display:flex;flex-direction:column;gap:12px;max-width:660px;margin:0 auto}
.yn{display:flex;justify-content:space-between;align-items:center;gap:18px;background:var(--white);border:1px solid var(--border);border-radius:18px;padding:18px 22px}
.yn p{font-size:.94rem;color:var(--ink);margin:0}
.yn .yn-b{display:flex;gap:8px;flex-shrink:0}
.yn button{padding:9px 20px;border-radius:999px;border:1px solid var(--border);font-size:.8rem;font-weight:700;color:var(--muted);transition:all var(--ease)}
.yn button:hover{border-color:var(--navy);color:var(--navy)}
.yn button.sel-y{background:var(--green-s);border-color:var(--green);color:var(--green)}
.yn button.sel-n{background:var(--bad-s,#FBEAEA);border-color:#B23A3A;color:#B23A3A}
.kpi-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:8px}
.kpi-table th{text-align:left;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--light);border-bottom:2px solid var(--border);padding:10px 12px 10px 0}
.kpi-table td{border-bottom:1px solid var(--border-l);padding:13px 12px 13px 0;vertical-align:top}
.kpi-table td:first-child{font-weight:700;color:var(--navy);white-space:nowrap}
@media(max-width:1080px){.detgrid{grid-template-columns:1fr}.det-aside{position:static}}
@media(max-width:900px){.phero{padding-top:150px}.hero-det{grid-template-columns:1fr}.calc-body{grid-template-columns:1fr;padding:26px 22px}.inside-grid{grid-template-columns:1fr}}

/* ══════════ CASE STUDY ══════════ */

.phero{padding-top:186px;padding-bottom:72px;background:var(--off);border-bottom:1px solid var(--border)}
.phero h1{font-size:clamp(2.1rem,4vw,3.3rem);max-width:24ch}
.phero .lede{margin-top:18px}
.typenav{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.typenav a{padding:10px 20px;border-radius:999px;font-size:.82rem;font-weight:600;border:1px solid var(--border);color:var(--muted);background:var(--white);transition:all var(--ease)}
.typenav a:hover{border-color:var(--navy);color:var(--navy)}
.typenav a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.detgrid{display:grid;grid-template-columns:minmax(0,720px) 320px;gap:60px;justify-content:center}
.det-prose{font-size:1rem;line-height:1.82}
.det-prose h2{font-size:1.55rem;margin:44px 0 16px;scroll-margin-top:110px}
.det-prose h2:first-child{margin-top:0}
.det-prose p{margin-bottom:20px}
.det-prose ul{margin-bottom:20px}
.det-prose ul li{position:relative;padding-left:26px;margin-bottom:10px}
.det-prose ul li::before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.det-aside{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:20px}
.aside-card{background:var(--white);border:1px solid var(--border);border-radius:22px;padding:26px}
.aside-card h5{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--light);margin-bottom:14px}
.aside-card ul li{padding:8px 0;border-bottom:1px solid var(--border-l);font-size:.85rem}
.aside-card ul li:last-child{border-bottom:none}
.aside-card ul a{color:var(--navy);font-weight:500;display:flex;gap:8px;align-items:flex-start}
.aside-card ul a::before{content:'→';color:var(--gold)}
.gatecard{background:linear-gradient(150deg,var(--navy),var(--navy-l));border-radius:24px;padding:30px;position:relative;overflow:hidden}
.gatecard::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 100% 0%,rgba(184,146,58,.22),transparent 60%)}
.gatecard>*{position:relative}
.gatecard h4{color:#fff;font-family:var(--serif);font-size:1.1rem;margin-bottom:6px}
.gatecard p{color:rgba(255,255,255,.62);font-size:.8rem;margin-bottom:16px;line-height:1.55}
.gatecard form{display:flex;flex-direction:column;gap:10px}
.gatecard input{background:rgba(255,255,255,.96);border:none;font-size:.86rem}
.gatecard .gk-done{display:none;text-align:center;color:#fff;padding:8px 0}
.hero-det{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero-det .frame{aspect-ratio:16/11;box-shadow:var(--s3)}
.inside-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.inside-item{display:flex;gap:12px;background:var(--off);border:1px solid var(--border-l);border-radius:16px;padding:16px 18px;font-size:.88rem;line-height:1.5}
.inside-item::before{content:'✓';color:var(--gold);font-weight:800}
.stepline{counter-reset:st;display:flex;flex-direction:column;gap:0;margin:26px 0}
.stepline li{counter-increment:st;display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--border-l);font-size:.92rem;align-items:flex-start}
.stepline li:last-child{border-bottom:none}
.stepline li::before{content:counter(st);width:30px;height:30px;border-radius:50%;background:var(--gold-s);color:var(--gold);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--serif)}
/* preview doc mock */
.docmock{background:var(--white);border:1px solid var(--border);border-radius:18px;box-shadow:var(--s3);padding:26px;transform:rotate(-1.2deg)}
.docmock .dm-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--gold);padding-bottom:10px;margin-bottom:14px}
.docmock .dm-head strong{font-family:var(--serif);color:var(--navy);font-size:.95rem}
.docmock .dm-head span{font-size:.6rem;color:var(--light);letter-spacing:.1em;text-transform:uppercase}
.docmock .dm-line{height:9px;border-radius:5px;background:var(--surface-2);margin-bottom:9px}
.docmock .dm-line.short{width:62%}
.docmock .dm-check{display:flex;gap:10px;align-items:center;font-size:.76rem;color:var(--muted);padding:7px 0;border-bottom:1px dashed var(--border-l)}
.docmock .dm-check::before{content:'☐';color:var(--gold);font-size:.9rem}
/* video pages */
.vwrap{max-width:960px;margin:0 auto}
.vchapters li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-l);font-size:.9rem;align-items:baseline}
.vchapters li:last-child{border-bottom:none}
.vchapters .tc{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--gold);font-weight:700;min-width:52px}
/* calculators */
.calc{max-width:860px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:28px;box-shadow:var(--sH);overflow:hidden}
.calc-head{background:linear-gradient(150deg,var(--navy),var(--navy-l));padding:30px 40px;position:relative;overflow:hidden}
.calc-head::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 100% at 100% 0%,rgba(184,146,58,.2),transparent 60%)}
.calc-head h3{color:#fff;position:relative}
.calc-head p{color:rgba(255,255,255,.6);font-size:.84rem;position:relative;margin-top:4px}
.calc-body{padding:36px 40px;display:grid;grid-template-columns:1fr 1fr;gap:44px}
.calc-fields{display:flex;flex-direction:column;gap:20px}
.cf-lab{font-size:.8rem;font-weight:700;color:var(--navy);display:flex;justify-content:space-between}
.cf-lab output{color:var(--gold);font-variant-numeric:tabular-nums}
input[type=range]{appearance:none;-webkit-appearance:none;height:6px;border-radius:4px;background:var(--surface-2);padding:0;border:none}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:var(--s2);border:3px solid #fff}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);cursor:pointer;border:3px solid #fff}
.calc-out{background:var(--off);border:1px solid var(--border-l);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:16px}
.co-big{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.1rem);font-weight:600;color:var(--navy);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.co-big small{font-size:1rem;color:var(--light);font-family:var(--sans);font-weight:500}
.co-row{display:flex;justify-content:space-between;font-size:.85rem;padding:8px 0;border-bottom:1px dashed var(--border-l)}
.co-row strong{color:var(--navy);font-variant-numeric:tabular-nums}
.co-note{font-size:.72rem;color:var(--light);line-height:1.5}
.co-bars{display:flex;flex-direction:column;gap:9px}
.co-bar{display:grid;grid-template-columns:96px 1fr 74px;gap:10px;align-items:center;font-size:.76rem;color:var(--muted)}
.co-bar .bg{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.co-bar .bg i{display:block;height:100%;border-radius:6px;background:var(--gold);transition:width .5s ease}
.co-bar strong{text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
.yn-grid{display:flex;flex-direction:column;gap:12px;max-width:660px;margin:0 auto}
.yn{display:flex;justify-content:space-between;align-items:center;gap:18px;background:var(--white);border:1px solid var(--border);border-radius:18px;padding:18px 22px}
.yn p{font-size:.94rem;color:var(--ink);margin:0}
.yn .yn-b{display:flex;gap:8px;flex-shrink:0}
.yn button{padding:9px 20px;border-radius:999px;border:1px solid var(--border);font-size:.8rem;font-weight:700;color:var(--muted);transition:all var(--ease)}
.yn button:hover{border-color:var(--navy);color:var(--navy)}
.yn button.sel-y{background:var(--green-s);border-color:var(--green);color:var(--green)}
.yn button.sel-n{background:var(--bad-s,#FBEAEA);border-color:#B23A3A;color:#B23A3A}
.kpi-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:8px}
.kpi-table th{text-align:left;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--light);border-bottom:2px solid var(--border);padding:10px 12px 10px 0}
.kpi-table td{border-bottom:1px solid var(--border-l);padding:13px 12px 13px 0;vertical-align:top}
.kpi-table td:first-child{font-weight:700;color:var(--navy);white-space:nowrap}
@media(max-width:1080px){.detgrid{grid-template-columns:1fr}.det-aside{position:static}}
@media(max-width:900px){.phero{padding-top:150px}.hero-det{grid-template-columns:1fr}.calc-body{grid-template-columns:1fr;padding:26px 22px}.inside-grid{grid-template-columns:1fr}}

.chero{padding-top:176px;padding-bottom:72px;background:
  radial-gradient(ellipse 60% 80% at 12% -10%,rgba(18,52,84,.9),transparent 60%),
  radial-gradient(ellipse 50% 70% at 95% 110%,rgba(184,146,58,.13),transparent 55%),var(--navy);
  color:#fff;position:relative;overflow:hidden}
.chero .crumb,.chero .crumb a{color:rgba(255,255,255,.55)}
.chero .crumb strong{color:#fff!important}
.chero h1{color:#fff;font-size:clamp(2rem,3.9vw,3.3rem);max-width:24ch;margin-top:16px}
.chero .dek{color:rgba(255,255,255,.68);font-size:1.08rem;max-width:60ch;margin-top:18px;line-height:1.7}
.glance{background:var(--white);border:1px solid var(--border);border-radius:24px;box-shadow:var(--s3);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;transform:translateY(-52px);margin-bottom:-8px}
.gl{padding:26px 28px;border-right:1px solid var(--border-l)}
.gl:last-child{border-right:none}
.gl h5{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--light);margin-bottom:7px}
.gl p{font-size:.92rem;color:var(--navy);font-weight:600;line-height:1.4}
.bigres{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-block:8px 56px}
.br{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:34px;text-align:center}
.br strong{display:block;font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:600;color:var(--gold);line-height:1;letter-spacing:-.02em}
.br span{font-size:.84rem;color:var(--muted);display:block;margin-top:10px;line-height:1.45}
.sol-block{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px;background:var(--off);border:1px solid var(--border-l);border-radius:16px;margin-bottom:14px}
.sol-ico{width:44px;height:44px;border-radius:14px;background:var(--gold-s);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sol-ico svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sol-block h4{margin-bottom:5px}
.sol-block p{font-size:.88rem;color:var(--muted);margin:0}
.cs-quote{background:var(--navy);border-radius:26px;padding:44px;margin:48px 0;position:relative;overflow:hidden}
.cs-quote::before{content:'\201C';position:absolute;top:6px;left:24px;font-family:var(--serif);font-size:6rem;color:var(--gold);opacity:.25;line-height:1}
.cs-quote p{color:#fff;font-family:var(--serif);font-size:1.2rem;font-style:italic;line-height:1.6;position:relative;margin-bottom:14px}
.cs-quote footer{color:rgba(255,255,255,.6);font-size:.82rem}
.aside-cta2{background:linear-gradient(150deg,var(--navy),var(--navy-l));border-radius:24px;padding:28px;text-align:center}
.aside-cta2 h5{color:#fff;font-family:var(--serif);font-size:1.05rem;margin-bottom:8px;text-transform:none;letter-spacing:0}
.aside-cta2 p{color:rgba(255,255,255,.62);font-size:.8rem;margin-bottom:16px;line-height:1.55}
@media(max-width:900px){.glance{grid-template-columns:1fr 1fr}.gl{border-bottom:1px solid var(--border-l)}.bigres{grid-template-columns:1fr}.chero{padding-top:145px}}

/* ══════════ HOMEPAGE ══════════ */

/* HERO */
.hero{padding-top:172px;padding-bottom:100px;position:relative;overflow:hidden;background:
  radial-gradient(ellipse 55% 65% at 88% 8%,rgba(192,154,62,.08),transparent 60%),
  radial-gradient(ellipse 40% 50% at 5% 90%,rgba(11,37,64,.045),transparent 60%),var(--white)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center;position:relative}
.hero-kick{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.hero-kick::before{content:'';width:30px;height:2px;background:var(--gold)}
.hero-kick span{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero h1{margin-bottom:26px}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero-sub{max-width:56ch;color:var(--muted);font-size:1.1rem;line-height:1.75;margin-bottom:38px}
.hero-proof{display:flex;align-items:center;gap:26px;margin-top:44px;padding-top:34px;border-top:1px solid var(--border);flex-wrap:wrap}
.hp-i{display:flex;flex-direction:column;gap:2px}
.hp-n{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--navy);line-height:1}
.hp-l{font-size:.73rem;color:var(--muted);line-height:1.35}
.hp-d{width:1px;height:38px;background:var(--border)}
.hero-visual{position:relative}
.hero-photo{border-radius:var(--rl);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--s3);position:relative}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,26,46,.55));pointer-events:none}
.hero-caption{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff}
.hero-caption strong{font-family:var(--serif);font-size:1.05rem;display:block}
.hero-caption span{font-size:.72rem;opacity:.75}
.hero-accent{position:absolute;bottom:-22px;left:-26px;width:170px;height:170px;background:var(--gold-s);border:1px solid rgba(192,154,62,.25);border-radius:var(--r);z-index:-1}

@keyframes fU{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-kick{animation:fU .5s ease both}.hero h1{animation:fU .55s .06s ease both}
.hero-sub{animation:fU .55s .12s ease both}.hero .btns{animation:fU .55s .18s ease both}
.hero-proof{animation:fU .55s .28s ease both}.hero-visual{animation:fU .7s .1s ease both}
/* Logos */
.logos-strip{padding-block:40px;border-block:1px solid var(--border);background:var(--off)}
.logos-label{font-size:.7rem;font-weight:600;color:var(--light);letter-spacing:.11em;text-transform:uppercase;text-align:center;margin-bottom:22px}
.logos-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px}
.logo-pill{display:inline-flex;align-items:center;height:32px;padding:0 18px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);font-size:.66rem;font-weight:700;color:var(--light);letter-spacing:.09em;text-transform:uppercase}
/* ── INTELLIGENCE SHOWCASE — layout replicated from the McKinsey reference
   (dark editorial mosaic: promo block, offset middle column, tall feature
   panel, inline subscribe card) with original Markinly content ── */
.mck{background:
  radial-gradient(ellipse 70% 60% at 8% -10%,rgba(18,52,84,.85),transparent 62%),
  radial-gradient(ellipse 55% 70% at 98% 108%,rgba(184,146,58,.12),transparent 58%),
  var(--navy-d);padding-block:76px 88px;position:relative;overflow:hidden}
.mck .wrap{position:relative}
.mck-top{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start;margin-bottom:14px}
.mck-lead{max-width:480px}
.mck-lead .eyebrow{white-space:nowrap}
.mck-lead h2{color:#fff;font-size:clamp(2rem,3.6vw,3.05rem);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.mck-lead h2 em{font-style:italic;color:var(--gold-l)}
.mck-lead p{color:rgba(255,255,255,.6);font-size:.92rem;line-height:1.65;margin-top:18px;max-width:34ch}
.mck-go{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.32);margin-top:24px;transition:all var(--ease);background:transparent}
.mck-go:hover{background:var(--gold);border-color:var(--gold);transform:translateX(5px)}
.mck-go svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mck-go:hover svg{stroke:var(--navy-d)}
/* Mosaic: a structured 12-column mosaic. Tile sizes are deliberately
   varied — importance decides area — but every tile sits on the same
   grid, so it reads as designed, not as chaotic masonry. */
.mck-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:86px;grid-auto-flow:dense;gap:12px}
.mt-report {grid-column:1/6;grid-row:span 3}
.mt-video  {grid-column:6/9;grid-row:span 2}
.mt-feature{grid-column:9/13;grid-row:span 4}
.mt-article{grid-column:6/9;grid-row:span 3}
.mt-webinar{grid-column:1/6;grid-row:span 2}
.mt-template{grid-column:1/5;grid-row:span 2}
.mt-case   {grid-column:5/9;grid-row:span 2}
.mck-grid .mck-sub{grid-column:9/13;grid-row:span 3;display:flex;flex-direction:column;justify-content:center}
.mck-tile{position:relative;border-radius:14px;overflow:hidden;display:block;min-height:0;
  transition:transform var(--easem),box-shadow var(--easem)}
.mck-tile:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.42)}
.mck-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.mck-tile:hover img{transform:scale(1.06)}
.mck-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,18,32,.12) 0%,rgba(5,18,32,.5) 48%,rgba(5,18,32,.93) 100%)}
.mck-cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.mck-kind{display:block;font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px}
.mck-cap h3{color:#fff;font-family:var(--sans);font-size:.95rem;font-weight:600;line-height:1.34;letter-spacing:-.01em}
.mck-cap h3::after{content:' ›';color:rgba(255,255,255,.75)}
.mck-tall .mck-cap h3{font-size:1.12rem;line-height:1.3}
.mck-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--navy-d);font-size:.76rem;font-weight:700;
  padding:9px 16px;border-radius:6px;margin-top:14px;transition:background var(--ease)}
.mck-btn:hover{background:var(--gold-l)}
.mck-tile .img-fell{font-size:0}
.mck-tile .img-fell span{display:none}
/* Subscribe card — replicates the reference's inline subscribe panel */
.mck-sub{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:14px;padding:24px 22px}
.mck-sub p{color:rgba(255,255,255,.82);font-size:.86rem;line-height:1.55;margin-bottom:16px}
.mck-subrow{display:flex;gap:0}
.mck-subrow input{background:rgba(255,255,255,.96);border:none;border-radius:6px 0 0 6px;font-size:.84rem;padding:11px 14px;color:var(--ink)}
.mck-subrow button{background:var(--gold);border-radius:0 6px 6px 0;padding:0 16px;display:flex;align-items:center;justify-content:center;transition:background var(--ease)}
.mck-subrow button:hover{background:var(--gold-l)}
.mck-subrow button svg{width:16px;height:16px;stroke:var(--navy-d);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mck-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:rgba(255,255,255,.4);font-size:.68rem}
.mck-or::before,.mck-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.13)}
.mck-alts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mck-alt{display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:6px;padding:9px;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.82);transition:background var(--ease)}
.mck-alt:hover{background:rgba(255,255,255,.14)}
.mck-alt svg{width:13px;height:13px;fill:currentColor}
.mck-foot{display:flex;justify-content:space-between;align-items:center;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap;gap:14px}
.mck-foot span{color:rgba(255,255,255,.45);font-size:.8rem}
.mck-foot .arr{color:var(--gold-l)}
.mck-foot .arr:hover{color:#fff}
@media(max-width:1080px){
  .mck-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:78px}
  .mt-report {grid-column:1/4;grid-row:span 3}
  .mt-video  {grid-column:4/7;grid-row:span 3}
  .mt-feature{grid-column:1/4;grid-row:span 4}
  .mt-article{grid-column:4/7;grid-row:span 4}
  .mt-webinar{grid-column:1/4;grid-row:span 3}
  .mt-template{grid-column:4/7;grid-row:span 3}
  .mt-case   {grid-column:1/4;grid-row:span 3}
  .mck-grid .mck-sub{grid-column:4/7;grid-row:span 3}
}
@media(max-width:760px){
  .mck-top{grid-template-columns:1fr;gap:24px}
  .mck-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .mck-grid .mck-tile{grid-column:1;grid-row:auto;min-height:200px}
  .mck-grid .mt-feature{min-height:300px}
  .mck-grid .mck-sub{grid-column:1;grid-row:auto}
}
/* Featured newsletter band/* Featured newsletter band (McKinsey structural pattern) */
.featnl{background:var(--navy);border-radius:var(--rl);overflow:hidden;display:grid;grid-template-columns:1.15fr 1fr;min-height:320px;margin-top:56px}
.featnl-txt{padding:52px;display:flex;flex-direction:column;justify-content:center;position:relative}
.featnl-txt::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 90% at 0% 100%,rgba(192,154,62,.14),transparent 60%)}
.featnl-txt .eyebrow{position:relative}
.featnl-txt h2{color:#fff;position:relative;font-style:italic;margin-bottom:14px}
.featnl-txt p{color:rgba(255,255,255,.66);font-size:.93rem;position:relative;max-width:46ch;margin-bottom:24px}
.featnl-img{position:relative;min-height:280px}
.featnl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.featnl-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 0%,transparent 40%)}
/* Video / series band */
.series{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-l) 100%);padding-block:96px;position:relative;overflow:hidden}
.series::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 70% at 95% 10%,rgba(192,154,62,.13),transparent 60%)}
.series .wrap{position:relative}
.series h2{color:#fff}
.series-sub{color:rgba(255,255,255,.66);max-width:62ch;font-size:.98rem;margin-top:14px}
.epi-main{display:grid;grid-template-columns:1.35fr 1fr;gap:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--rl);overflow:hidden;margin-top:44px}
.epi-info{padding:40px;display:flex;flex-direction:column;justify-content:center}
.epi-date{font-size:.68rem;color:rgba(255,255,255,.45);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.epi-info h3{color:#fff;font-size:clamp(1.25rem,2vw,1.7rem);margin-bottom:14px}
.epi-info p{color:rgba(255,255,255,.62);font-size:.9rem;line-height:1.65;margin-bottom:24px}
.epi-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-top:none;border-radius:0 0 var(--rl) var(--rl);overflow:hidden}
.epi-cell{background:rgba(7,26,46,.55);padding:18px 20px;font-size:.78rem;color:rgba(255,255,255,.68);line-height:1.45;transition:background var(--ease);cursor:pointer;border-top:2px solid transparent}
.epi-cell:hover{background:rgba(7,26,46,.85);color:#fff}
.epi-cell.on{border-top-color:var(--gold);background:rgba(7,26,46,.85);color:#fff}
/* Help cards */
.help-card .card-img{height:190px}
.help-card h3{font-size:1.12rem}
/* Services 2 boxes */
.svc-box{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:48px;box-shadow:var(--s1);display:flex;flex-direction:column;transition:box-shadow var(--easem),transform var(--easem)}
.svc-box:hover{box-shadow:var(--s3);transform:translateY(-3px)}
.svc-accent{display:block;width:100%;height:3px;border-radius:2px;margin-bottom:34px}
.svc-box h3{font-size:clamp(1.35rem,2vw,1.7rem);margin:6px 0 16px;line-height:1.18}
.svc-box>p{font-size:.92rem;color:var(--muted);line-height:1.68;margin-bottom:26px}
.svc-inc{margin-bottom:30px}
.svc-inc li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-l);font-size:.88rem}
.svc-inc li:last-child{border-bottom:none}
.svc-inc li::before{content:'';width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8l4 4 8-8' stroke='%23C09A3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center;flex-shrink:0;margin-top:3px}
.svc-reads h5{font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--light);margin-bottom:12px}
.svc-reads ul{display:flex;flex-direction:column;gap:8px;margin-bottom:30px}
.svc-reads a{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:500;color:var(--navy);transition:color var(--ease),gap var(--ease)}
.svc-reads a::before{content:'→';color:var(--gold);font-size:.8rem}
.svc-reads a:hover{color:var(--gold);gap:10px}
.svc-box .btn{align-self:flex-start;margin-top:auto}
/* Process */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin-top:60px}
.proc-grid::before{content:'';position:absolute;top:26px;left:12%;right:12%;height:1px;background:var(--border)}
.proc-line{position:absolute;top:26px;left:12%;height:1px;background:var(--gold);width:0;transition:width 1.6s cubic-bezier(.4,0,.2,1);z-index:1}
.proc-line.go{width:76%}
.proc-step{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px}
.step-n{width:52px;height:52px;border-radius:50%;background:var(--white);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--navy);margin-bottom:20px;transition:all var(--easem)}
.proc-step:hover .step-n{background:var(--navy);border-color:var(--navy);color:var(--gold);transform:scale(1.08)}
.proc-step h4{font-size:.95rem;margin-bottom:8px}
.proc-step p{font-size:.84rem;color:var(--muted);line-height:1.55;max-width:23ch}
/* Assessment promo */
.assess{display:grid;grid-template-columns:1fr .9fr;gap:64px;align-items:center}
.assess-path{display:flex;flex-direction:column;gap:0;margin-bottom:30px;counter-reset:ap}
.assess-path li{display:grid;grid-template-columns:30px 92px 1fr;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--border-l);counter-increment:ap}
.assess-path li:last-child{border-bottom:none}
.assess-path li::before{content:counter(ap);width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:var(--gold-l);font-size:.72rem;font-weight:700;align-self:center}
.assess-path strong{font-size:.86rem;color:var(--navy)}
.assess-path span{font-size:.85rem;color:var(--muted);line-height:1.5}
@media(max-width:600px){.assess-path li{grid-template-columns:28px 1fr}.assess-path strong{grid-column:2}.assess-path span{grid-column:2}}
.gauge-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);box-shadow:var(--s3);padding:40px;text-align:center;max-width:420px;margin-inline:auto}
.gauge{position:relative;width:220px;height:120px;margin:0 auto 8px;overflow:hidden}
.gauge svg{width:220px;height:220px}
.gauge-num{position:absolute;left:0;right:0;bottom:0;font-family:var(--serif);font-size:2.6rem;font-weight:600;color:var(--navy);line-height:1}
.gauge-lbl{font-size:.74rem;color:var(--muted);margin-bottom:18px}
.gauge-rows{display:flex;flex-direction:column;gap:10px;text-align:left}
.grow{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--muted)}
.grow .bar{flex:1;height:6px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.grow .bar i{display:block;height:100%;border-radius:4px;background:var(--gold)}
.grow strong{width:118px;flex-shrink:0;color:var(--navy);font-weight:600}
.grow span{width:34px;text-align:right;font-weight:700;color:var(--navy)}
/* Case studies */
.res-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 40px;padding:26px 0;border-block:1px solid var(--border)}
.res-stats>div{display:flex;flex-direction:column;gap:6px}
.res-stats .rs-n{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--navy);line-height:1}
.res-stats .rs-l{font-size:.8rem;color:var(--muted);line-height:1.45}
@media(max-width:900px){.res-stats{grid-template-columns:1fr 1fr;gap:24px}}
.case-feat{display:grid;grid-template-columns:1.05fr 1fr;gap:0;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;box-shadow:var(--s2);margin-bottom:26px}
.case-feat-txt{padding:52px}
.case-feat-img{position:relative;min-height:380px}
.case-feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-block:26px}
.cm{background:var(--surface);border:1px solid var(--border);border-radius:var(--rm);padding:16px;text-align:center}
.cm strong{display:block;font-family:var(--serif);font-size:1.65rem;font-weight:600;color:var(--navy);line-height:1}
.cm span{font-size:.72rem;color:var(--muted);display:block;margin-top:5px;line-height:1.3}
/* Testimonials */
.testi-card{padding:44px 44px 44px 52px;border-left:3px solid var(--gold);position:relative;background:var(--white);border-radius:0 var(--rm) var(--rm) 0;box-shadow:var(--s1)}
.testi-card::before{content:'\201C';position:absolute;top:18px;left:16px;font-family:var(--serif);font-size:3.2rem;color:var(--gold);opacity:.3;line-height:1}
.testi-q{font-size:1.04rem;font-family:var(--serif);line-height:1.65;color:var(--navy);margin-bottom:22px;font-style:italic}
.testi-auth{display:flex;align-items:center;gap:12px}
.ta-av{width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--surface-2)}
.ta-av img{width:100%;height:100%;object-fit:cover}
.ta-info strong{display:block;font-size:.88rem}
.ta-info span{font-size:.78rem;color:var(--muted)}
@media(max-width:1120px){
  .mosaic{grid-template-columns:1fr 1fr}
  .mtile-promo{grid-column:1;grid-row:1;min-height:330px}
  .mgrid-mid{grid-column:2;grid-row:1}
  .mcol-r{grid-column:1/3;grid-row:2;grid-template-rows:none;grid-template-columns:1.4fr 1fr}
  .epi-rail{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-visual{max-width:430px;margin:0 auto}
  .assess,.case-feat,.featnl,.epi-main{grid-template-columns:1fr}
  .featnl-img{min-height:220px}
  .proc-grid{grid-template-columns:1fr 1fr;gap:40px}
  .proc-grid::before,.proc-line{display:none}
}
@media(max-width:600px){
  .hero{padding-top:130px;padding-bottom:64px}
  .mosaic,.mcol-r,.mgrid-mid-b{grid-template-columns:1fr}
  .mgrid-mid{grid-column:1}
  .mcol-r{grid-column:1}
  .case-metrics{grid-template-columns:1fr}
  .epi-rail{grid-template-columns:1fr}
  .case-feat-txt,.featnl-txt,.epi-info{padding:30px 24px}
}

/* ══════════ SERVICES ══════════ */

.phero{padding-top:186px;padding-bottom:88px;background:
  radial-gradient(ellipse 50% 60% at 92% 10%,rgba(192,154,62,.08),transparent 60%),var(--off);
  border-bottom:1px solid var(--border)}
.phero .crumb{margin-bottom:22px}
.phero h1{max-width:18ch;font-size:clamp(2.3rem,4.4vw,3.7rem)}
.phero .lede{margin-top:22px}
/* Progressive disclosure on the two pathway cards */
.eng-x{margin-top:4px;border-top:1px solid var(--border-l);padding-top:14px}
.eng-x summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--brand)}
.eng-x summary::-webkit-details-marker{display:none}
.eng-x summary::after{content:'+';font-size:1rem;color:var(--gold);transition:transform var(--ease)}
.eng-x[open] summary::after{content:'–'}
.eng-x .eng-xb{padding-top:14px;display:flex;flex-direction:column;gap:12px}
.eng-x .eng-xb p{font-size:.86rem;color:var(--muted);line-height:1.6}
.eng-x .eng-xb h5{font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--light)}
.eng-caps{display:flex;flex-wrap:wrap;gap:8px}
.eng-caps a{font-size:.76rem;font-weight:600;color:var(--navy);border:1px solid var(--border);border-radius:100px;padding:6px 13px;transition:all var(--ease)}
.eng-caps a:hover{border-color:var(--brand);color:var(--brand);background:var(--off)}
/* Capability rows */
.cap-next{margin-top:20px;padding-top:14px;border-top:1px solid var(--border-l);display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:.8rem}
.cap-next>span{font-weight:700;color:var(--light);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.cap-next a{color:var(--brand);font-weight:600}
.cap-next a:hover{color:var(--navy)}
.cap-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding-block:56px;border-bottom:1px solid var(--border-l)}
.cap-row:last-child{border-bottom:none}
.cap-row .frame{aspect-ratio:16/11}
.cap-n{font-family:var(--serif);font-size:.95rem;font-weight:600;color:var(--gold);display:block;margin-bottom:10px}
.cap-row h3{margin-bottom:14px}
.cap-row p{color:var(--muted);font-size:.94rem}
.cap-row ul{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.cap-row ul li{display:flex;gap:10px;font-size:.87rem;color:var(--ink)}
.cap-row ul li::before{content:'—';color:var(--gold);font-weight:700}
.cap-row .arr{margin-top:22px}
/* Transformation path */
.tpath{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:56px;position:relative}
.tpath::before{content:'';position:absolute;top:25px;left:10%;right:10%;height:1px;background:rgba(255,255,255,.16)}
.tp-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 14px;position:relative}
.tp-n{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.1rem;color:var(--gold-l);margin-bottom:18px;transition:all var(--easem)}
.tp-step:hover .tp-n{background:var(--gold);border-color:var(--gold);color:var(--navy-d);transform:scale(1.1)}
.tp-step h4{color:#fff;font-size:.92rem;margin-bottom:7px}
.tp-step p{font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.5;max-width:22ch}
/* Engagement cards */
.eng-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:40px;display:flex;flex-direction:column;gap:14px;transition:box-shadow var(--easem),transform var(--easem)}
.eng-card:hover{box-shadow:var(--s3);transform:translateY(-3px)}
.eng-card .badge{margin-bottom:4px}
.eng-card h3{font-size:1.25rem}
.eng-card p{font-size:.88rem;color:var(--muted);flex:1}
.eng-meta{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--border-l);font-size:.82rem;color:var(--muted)}
.eng-meta strong{color:var(--navy)}
@media(max-width:900px){
  .cap-row{grid-template-columns:1fr;gap:28px}
  .cap-row .frame{order:-1}
  .tpath{grid-template-columns:1fr 1fr;gap:32px}
  .tpath::before{display:none}
  .phero{padding-top:150px}
}

/* ══════════ ABOUT ══════════ */

.phero{padding-top:186px;padding-bottom:96px;background:
  radial-gradient(ellipse 50% 60% at 90% 15%,rgba(192,154,62,.08),transparent 60%),var(--off);
  border-bottom:1px solid var(--border)}
.ab-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
.ab-grid h1{font-size:clamp(2.2rem,4.2vw,3.4rem)}
.ab-photo{position:relative}
.ab-photo .frame{aspect-ratio:4/5;border-radius:var(--rl);box-shadow:var(--s3)}
.ab-photo-tag{position:absolute;bottom:-18px;left:-20px;background:var(--white);border:1px solid var(--border);border-radius:var(--rm);box-shadow:var(--s3);padding:16px 22px}
.ab-photo-tag strong{font-family:var(--serif);color:var(--navy);display:block;font-size:1.02rem}
.ab-photo-tag span{font-size:.72rem;color:var(--muted)}
/* Mission/vision */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.mv-card{background:var(--white);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:0 var(--rm) var(--rm) 0;padding:40px;box-shadow:var(--s1)}
.mv-card h3{margin-bottom:14px}
.mv-card p{color:var(--muted);font-size:.94rem}
/* Values */
.val-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rm);padding:32px;transition:box-shadow var(--easem),transform var(--easem)}
.val-card:hover{box-shadow:var(--s2);transform:translateY(-3px)}
.val-ico{width:48px;height:48px;border-radius:var(--r);background:var(--gold-s);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.val-ico svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.val-card h4{margin-bottom:9px;font-size:1rem}
.val-card p{font-size:.85rem;color:var(--muted);line-height:1.6}
/* Timeline */
.timeline{position:relative;max-width:760px;margin:56px auto 0;padding-left:36px}
.timeline::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl-item{position:relative;padding-bottom:40px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:-34px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--white);border:3px solid var(--gold)}
.tl-item h4{font-family:var(--serif);font-size:1.08rem;margin-bottom:6px}
.tl-item .tl-when{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:8px}
.tl-item p{font-size:.9rem;color:var(--muted);max-width:60ch}
/* Industries */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ind{position:relative;border-radius:var(--rm);overflow:hidden;aspect-ratio:16/10}
.ind img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ind:hover img{transform:scale(1.05)}
.ind::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,26,46,.8))}
.ind span{position:absolute;left:18px;bottom:14px;z-index:2;color:#fff;font-weight:600;font-size:.92rem}
@media(max-width:900px){.ab-grid{grid-template-columns:1fr;gap:44px}.mv{grid-template-columns:1fr}.ind-grid{grid-template-columns:1fr 1fr}.phero{padding-top:150px;padding-bottom:72px}}
@media(max-width:600px){.ind-grid{grid-template-columns:1fr}}

/* ══════════ CONTACT ══════════ */

.quiz-shell{max-width:760px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:28px;box-shadow:var(--sH);overflow:hidden}
.quiz-top{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--border-l);background:var(--off)}
.quiz-top .qt-lbl{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.quiz-top .qt-step{font-size:.72rem;color:var(--light)}
.qbar{height:4px;background:var(--surface-2)}
.qbar i{display:block;height:100%;background:var(--gold);width:0%;transition:width .4s ease}
.qbody{padding:44px 48px 48px;min-height:380px;display:flex;flex-direction:column}
.qq{display:none;flex-direction:column;flex:1;animation:qIn .35s ease}
.qq.on{display:flex}
@keyframes qIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.qq h3{font-size:clamp(1.25rem,2.2vw,1.6rem);margin-bottom:8px;line-height:1.3}
.qq .qhelp{font-size:.85rem;color:var(--light);margin-bottom:26px}
.qopts{display:flex;flex-direction:column;gap:10px}
.qopt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--border);border-radius:16px;cursor:pointer;transition:all var(--ease);font-size:.94rem;text-align:left;background:var(--white);width:100%}
.qopt:hover{border-color:var(--navy);background:var(--off);transform:translateX(4px)}
.qopt.sel{border-color:var(--gold);background:var(--gold-s);font-weight:600;color:var(--navy)}
.qopt .kbd{width:26px;height:26px;border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--muted);flex-shrink:0;background:var(--surface)}
.qopt.sel .kbd{background:var(--gold);border-color:var(--gold);color:var(--navy-d)}
.qnav{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:28px}
.qback{font-size:.82rem;font-weight:600;color:var(--light);display:inline-flex;gap:6px;align-items:center}
.qback:hover{color:var(--navy)}
.qfields{display:flex;flex-direction:column;gap:14px}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qresult{display:none;padding:0}
.qresult.on{display:block}
.qr-head{background:linear-gradient(150deg,var(--navy),var(--navy-l));padding:44px 48px;text-align:center;position:relative;overflow:hidden}
.qr-head::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(184,146,58,.2),transparent 65%)}
.qr-head>*{position:relative}
.qr-head .eyebrow{justify-content:center}
.qr-score{font-family:var(--serif);font-size:4.6rem;font-weight:600;color:#fff;line-height:1}
.qr-score span{font-size:1.6rem;color:rgba(255,255,255,.5)}
.qr-tier{display:inline-block;margin-top:12px;padding:6px 18px;border-radius:100px;background:var(--gold);color:var(--navy-d);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.qr-sum{color:rgba(255,255,255,.72);font-size:.92rem;max-width:52ch;margin:16px auto 0;line-height:1.65}
.qr-body{padding:40px 48px}
.qr-dims{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.qr-dim{display:grid;grid-template-columns:150px 1fr 44px;gap:14px;align-items:center;font-size:.85rem}
.qr-dim strong{color:var(--navy)}
.qr-dim .bar{height:9px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.qr-dim .bar i{display:block;height:100%;border-radius:5px;width:0;transition:width 1.1s cubic-bezier(.4,0,.2,1)}
.qr-dim span{text-align:right;font-weight:700;color:var(--navy)}
.qr-recs{background:var(--off);border:1px solid var(--border-l);border-radius:20px;padding:28px;margin-bottom:32px}
.qr-recs h4{margin-bottom:16px}
.qr-recs li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-l);font-size:.9rem;line-height:1.55}
.qr-recs li:last-child{border-bottom:none}
.qr-recs li b{color:var(--gold);flex-shrink:0}
.qr-ctas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* The recommended path: resources for the weakest dimensions, then the
   engagement that fits the band — the score leads somewhere, not to a
   dead end. */
.qr-path{border:1px solid var(--border);border-radius:20px;padding:28px;margin-bottom:32px}
.qr-path h4{margin-bottom:6px}
.qr-path-p{font-size:.85rem;color:var(--muted);margin-bottom:16px}
.qr-guides{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.qr-g{display:flex;flex-direction:column;gap:4px;border:1px solid var(--border);border-radius:14px;padding:14px 16px;font-size:.88rem;font-weight:600;color:var(--navy);transition:all var(--ease)}
.qr-g:hover{border-color:var(--brand);background:var(--off)}
.qr-g span{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--light)}
.qr-svc{display:flex;flex-direction:column;gap:6px;background:var(--navy);border-radius:16px;padding:20px 22px;color:#fff;transition:background var(--ease)}
.qr-svc .qs-k{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-l)}
.qr-svc strong{font-size:1.05rem;color:#fff}
.qr-svc .qs-d{font-size:.85rem;color:rgba(255,255,255,.75);line-height:1.5}
.qr-svc .arr{color:var(--gold-l);font-size:.85rem;margin-top:4px}
.qr-svc:hover{background:var(--navy-d)}
@media(max-width:600px){.qr-guides{grid-template-columns:1fr}}
#report{display:none}
@media print{
  body>*{display:none!important}
  #report{display:block!important;font-family:Georgia,serif;color:#10202E;padding:0 8mm}
  #report .rp-head{border-bottom:3px solid #B8923A;padding-bottom:14px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:flex-end}
  #report .rp-h1{font-size:22pt;color:#08213C;margin:0;font-weight:700}
  #report .rp-brand{font-size:10pt;color:#51667A}
  #report h2{font-size:14pt;color:#08213C;margin:18px 0 8px;border-bottom:1px solid #E3E9F0;padding-bottom:4px}
  #report p,#report li{font-size:10.5pt;line-height:1.6}
  #report table{width:100%;border-collapse:collapse;margin:10px 0}
  #report td,#report th{border:1px solid #E3E9F0;padding:6px 10px;font-size:10pt;text-align:left}
  #report th{background:#F3F6F9;color:#08213C}
  #report .rp-score{font-size:30pt;color:#B8923A;font-weight:bold}
  #report ul{padding-left:18px}#report ul li{list-style:disc;margin-bottom:5px}
  #report .rp-foot{margin-top:22px;padding-top:10px;border-top:1px solid #E3E9F0;font-size:8.5pt;color:#8298AB}
}
@media(max-width:900px){.qbody,.qr-body{padding:28px 22px}.qr-head{padding:32px 22px}.qrow,.qr-ctas{grid-template-columns:1fr}.qr-dim{grid-template-columns:110px 1fr 40px}}

.phero{padding-top:186px;padding-bottom:72px;background:var(--off);border-bottom:1px solid var(--border)}
.phero h1{font-size:clamp(2.2rem,4.2vw,3.4rem)}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.path-card{background:var(--white);border:1px solid var(--border);border-radius:24px;padding:34px;display:flex;gap:20px;align-items:flex-start;cursor:pointer;transition:all var(--ease);text-align:left}
.path-card:hover{border-color:var(--navy);box-shadow:var(--s3);transform:translateY(-3px)}
.path-ico{width:52px;height:52px;border-radius:18px;background:var(--gold-s);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.path-ico svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.path-card h3{font-size:1.15rem;margin-bottom:6px}
.path-card p{font-size:.85rem;color:var(--muted);line-height:1.55}
.path-card .ptime{display:inline-block;margin-top:10px;font-size:.7rem;font-weight:700;color:var(--gold);letter-spacing:.08em;text-transform:uppercase}
/* Booking */
.book-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
.book-card{background:var(--white);border:1px solid var(--border);border-radius:28px;box-shadow:var(--sH);overflow:hidden}
.bk-top{padding:24px 30px;border-bottom:1px solid var(--border-l);display:flex;gap:14px;align-items:center}
.bk-top img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.bk-top h4{font-size:.98rem}
.bk-top span{font-size:.76rem;color:var(--muted);display:flex;gap:12px;margin-top:3px;flex-wrap:wrap}
.bk-body{display:grid;grid-template-columns:1.2fr 1fr;min-height:330px}
.bk-cal{padding:24px 26px;border-right:1px solid var(--border-l)}
.bk-cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.bk-cal-head strong{font-size:.9rem;color:var(--navy)}
.bk-cal-head .bk-arrows button{width:30px;height:30px;border-radius:10px;border:1px solid var(--border);color:var(--muted);font-size:.85rem}
.bk-cal-head .bk-arrows button:hover{border-color:var(--navy);color:var(--navy)}
.bk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:.76rem}
.bk-days .dw{color:var(--light);font-weight:700;font-size:.62rem;text-transform:uppercase;padding:6px 0}
.bk-d{padding:9px 0;border-radius:50%;color:var(--ink);cursor:pointer;transition:all var(--ease)}
.bk-d:hover{background:var(--surface)}
.bk-d.off{color:#C6D2DD;pointer-events:none}
.bk-d.sel{background:var(--navy);color:#fff;font-weight:700}
.bk-slots{padding:24px 26px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:330px}
.bk-slots h5{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--light);margin-bottom:6px}
.bk-slot{padding:11px;border:1px solid var(--border);border-radius:12px;text-align:center;font-size:.84rem;font-weight:600;color:var(--navy);cursor:pointer;transition:all var(--ease)}
.bk-slot:hover{border-color:var(--navy)}
.bk-slot.sel{background:var(--navy);color:#fff;border-color:var(--navy)}
.bk-confirm{padding:22px 30px;border-top:1px solid var(--border-l);display:none;gap:12px;flex-direction:column}
.bk-confirm.on{display:flex}
.bk-done{padding:44px 30px;text-align:center;display:none}
.bk-done.on{display:block}
.expect-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:20px;overflow:hidden;margin-top:24px}
.exp-box{background:var(--white);padding:22px;text-align:center}
.exp-n{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--gold);line-height:1;margin-bottom:6px}
.exp-box h5{font-size:.8rem;margin-bottom:4px}
.exp-box p{font-size:.74rem;color:var(--muted);line-height:1.4}
.ci-item{display:flex;align-items:flex-start;gap:12px;font-size:.9rem;padding:7px 0}
.ci-item svg{width:17px;height:17px;stroke:var(--gold);fill:none;flex-shrink:0;margin-top:3px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){.paths,.book-grid{grid-template-columns:1fr}.bk-body{grid-template-columns:1fr}.bk-cal{border-right:none;border-bottom:1px solid var(--border-l)}.phero{padding-top:150px}}

/* ══════════ INSIGHTS HUB ══════════ */

.phero{padding-top:186px;padding-bottom:64px;background:var(--off);border-bottom:1px solid var(--border)}
.phero h1{font-size:clamp(2.2rem,4.2vw,3.5rem)}
.phero .lede{margin-top:20px}
.filterbar{padding-block:22px;border-bottom:1px solid var(--border);position:sticky;top:76px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);z-index:900}
.filterbar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
.fsearch{position:relative;width:250px;max-width:100%}
.fsearch input{padding:10px 14px 10px 38px;font-size:.85rem;border-radius:100px}
.fsearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--light);fill:none;stroke-width:2;stroke-linecap:round}
/* Featured editorial split */
.feat-post{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;background:var(--white);box-shadow:var(--s2);margin-bottom:56px;transition:box-shadow var(--easem)}
.feat-post:hover{box-shadow:var(--s3)}
.feat-img{position:relative;min-height:380px}
.feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat-txt{padding:48px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.feat-txt h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.16}
.feat-txt p{color:var(--muted);font-size:.93rem}
.pmeta{display:flex;align-items:center;gap:10px;font-size:.76rem;color:var(--light)}
.pmeta img{width:28px;height:28px;border-radius:50%;object-fit:cover}
/* Grid of posts */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.nores{display:none;text-align:center;color:var(--muted);padding:56px 0;font-size:.95rem}
/* Pagination */
.pager{display:flex;justify-content:center;gap:8px;margin-top:56px}
.pg{width:42px;height:42px;border-radius:var(--r);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;color:var(--muted);transition:all var(--ease)}
.pg:hover{border-color:var(--navy);color:var(--navy)}
.pg.on{background:var(--navy);color:#fff;border-color:var(--navy)}
@media(max-width:1000px){.postgrid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.feat-post{grid-template-columns:1fr}.feat-img{min-height:240px}.feat-txt{padding:30px 24px}.phero{padding-top:150px}}
@media(max-width:640px){.postgrid{grid-template-columns:1fr}}

/* ══════════ ARTICLE ══════════ */

.ahero{padding-top:176px;padding-bottom:0;background:var(--off)}
.ahero .wrap{max-width:880px}
.ahero h1{font-size:clamp(2rem,3.8vw,3.2rem);margin-top:14px}
.dek{font-size:1.14rem;color:var(--muted);line-height:1.7;margin-top:20px;font-family:var(--serif);font-style:italic}
.abyline{display:flex;align-items:center;gap:14px;margin-top:30px;padding-bottom:40px}
.abyline img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.abyline .ab-i strong{display:block;font-size:.9rem;color:var(--navy)}
.abyline .ab-i span{font-size:.76rem;color:var(--light)}
.ahero-img{max-width:1100px;margin:0 auto;padding:0 var(--gut)}
.ahero-img .frame{aspect-ratio:21/9;border-radius:var(--rl);box-shadow:var(--s2);transform:translateY(48px);margin-top:-8px}
.acap{font-size:.72rem;color:var(--light);text-align:center;margin-top:56px;font-style:italic}
/* Article layout */
.alayout{display:grid;grid-template-columns:230px minmax(0,680px) 230px;gap:48px;justify-content:center;padding-top:64px}
.toc{position:sticky;top:120px;align-self:start;font-size:.82rem}
.toc h5{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--light);margin-bottom:14px}
.toc a{display:block;padding:7px 0 7px 14px;color:var(--muted);border-left:2px solid var(--border);transition:all var(--ease);line-height:1.4}
.toc a:hover{color:var(--navy)}
.toc a.on{color:var(--navy);border-left-color:var(--gold);font-weight:600}
.aside-r{position:sticky;top:120px;align-self:start}
.aside-cta{background:var(--surface);border:1px solid var(--border);border-radius:var(--rm);padding:24px;text-align:center}
.aside-cta h5{font-family:var(--serif);font-size:.98rem;color:var(--navy);margin-bottom:8px;line-height:1.3}
.aside-cta p{font-size:.76rem;color:var(--muted);margin-bottom:14px;line-height:1.5}
.aside-cta .btn{width:100%;font-size:.78rem;min-height:40px}
.share{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.share button{width:100%;display:flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--border);border-radius:var(--r);font-size:.76rem;font-weight:600;color:var(--muted);transition:all var(--ease);background:var(--white)}
.share button:hover{border-color:var(--navy);color:var(--navy)}
.share svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Prose */
.prose{font-size:1.02rem;line-height:1.85;color:var(--ink)}
.prose>p{margin-bottom:26px}
.prose>p:first-of-type::first-letter{font-family:var(--serif);font-size:3.6rem;font-weight:600;color:var(--navy);float:left;line-height:.82;margin:6px 12px 0 0}
.prose h2{font-size:1.7rem;margin:52px 0 20px;scroll-margin-top:110px}
.prose h3{font-size:1.25rem;margin:36px 0 14px}
.prose ul{margin:0 0 26px;padding-left:4px}
.prose ul li{position:relative;padding-left:26px;margin-bottom:12px}
.prose ul li::before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.prose strong{color:var(--navy)}
.prose a{color:var(--navy);font-weight:600;border-bottom:1.5px solid var(--gold);transition:background var(--ease)}
.prose a:hover{background:var(--gold-s)}
.pull{border-left:3px solid var(--gold);padding:8px 0 8px 28px;margin:40px 0;font-family:var(--serif);font-size:1.35rem;font-style:italic;color:var(--navy);line-height:1.5}
.statcall{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:40px 0}
.statcall .cm{padding:22px 14px}
.figure{margin:40px 0}
.figure .frame{aspect-ratio:16/9}
.figure figcaption{font-size:.76rem;color:var(--light);margin-top:10px;font-style:italic}
/* Content upgrade box */
.upgrade{background:linear-gradient(135deg,var(--navy),var(--navy-l));border-radius:var(--rl);padding:36px;margin:48px 0;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;position:relative;overflow:hidden}
.upgrade::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 100% at 100% 0%,rgba(192,154,62,.2),transparent 60%)}
.upgrade h4{color:#fff;font-family:var(--serif);font-size:1.2rem;margin-bottom:8px;position:relative}
.upgrade p{color:rgba(255,255,255,.65);font-size:.84rem;margin:0;position:relative;line-height:1.55}
.upgrade .btn{position:relative}
/* Key takeaways */
.takeaways{background:var(--green-s);border:1px solid var(--brand-b);border-radius:var(--rm);padding:30px 32px;margin:48px 0}
.takeaways h4{color:var(--green);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px}
.takeaways li{position:relative;padding-left:28px;margin-bottom:12px;font-size:.94rem;line-height:1.6}
.takeaways li::before{content:'✓';position:absolute;left:2px;color:var(--green);font-weight:700}
/* Author box */
.authorbox{display:grid;grid-template-columns:auto 1fr;gap:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:32px;margin-top:56px}
.authorbox img{width:92px;height:92px;border-radius:50%;object-fit:cover}
.authorbox h4{font-family:var(--serif);font-size:1.15rem;margin-bottom:4px}
.authorbox .ab-role{font-size:.76rem;color:var(--gold);font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:10px}
.authorbox p{font-size:.86rem;color:var(--muted);line-height:1.65;margin-bottom:12px}
@media(max-width:1180px){.alayout{grid-template-columns:200px minmax(0,1fr);gap:36px}.aside-r{display:none}}
@media(max-width:860px){.alayout{grid-template-columns:1fr}.toc{display:none}.ahero{padding-top:145px}
  .upgrade{grid-template-columns:1fr}.statcall{grid-template-columns:1fr}.authorbox{grid-template-columns:1fr}}

/* ══════════ CAMPAIGN LANDING ══════════ */

.lp-hdr{position:fixed;top:0;left:0;right:0;z-index:980;background:rgba(255,255,255,.97);border-bottom:1px solid var(--border);backdrop-filter:blur(12px)}
.lp-hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.lp-hero{padding-top:150px;padding-bottom:88px;background:
  radial-gradient(ellipse 55% 65% at 90% 5%,rgba(192,154,62,.09),transparent 60%),var(--off)}
.lp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
.lp-hero h1{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.lp-hero h1 em{font-style:italic;color:var(--gold)}
.lp-check{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.lp-check li{display:flex;gap:11px;font-size:.95rem}
.lp-check li svg{width:18px;height:18px;stroke:var(--gold);fill:none;flex-shrink:0;margin-top:3px;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lp-proofrow{display:flex;align-items:center;gap:18px;margin-top:32px;padding-top:26px;border-top:1px solid var(--border);flex-wrap:wrap}
.lp-proofrow .avatars{display:flex}
.lp-proofrow .avatars img{width:38px;height:38px;border-radius:50%;border:2px solid #fff;object-fit:cover;margin-left:-10px}
.lp-proofrow .avatars img:first-child{margin-left:0}
.lp-proofrow p{font-size:.8rem;color:var(--muted);max-width:30ch;line-height:1.45}
/* Form card */
.lpf{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);box-shadow:var(--s3);overflow:hidden;position:sticky;top:96px}
.lpf-head{background:var(--navy);padding:22px 30px;position:relative;overflow:hidden}
.lpf-head::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 100% at 100% 0%,rgba(192,154,62,.22),transparent 60%)}
.lpf-head h3{color:#fff;font-size:1.15rem;position:relative}
.lpf-head p{color:rgba(255,255,255,.6);font-size:.78rem;position:relative;margin-top:4px}
.lpf-steps{display:flex;border-bottom:1px solid var(--border-l)}
.lpf-step{flex:1;padding:12px 6px;text-align:center;font-size:.66rem;font-weight:700;color:var(--light);letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid transparent}
.lpf-step.on{color:var(--navy);border-bottom-color:var(--gold)}
.lpf-step.done{color:var(--gold)}
.lpf-body{padding:28px 30px 32px}
.lpf-pane{display:none;flex-direction:column;gap:13px}
.lpf-pane.on{display:flex}
.lpf-nav{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.lpf-suc{display:none;text-align:center;padding:14px 0}
.lpf-note{font-size:.68rem;color:var(--light);text-align:center;margin-top:12px}
.lp-band{background:var(--navy);padding-block:64px}
.lp-band .stats-inner{grid-template-columns:repeat(3,1fr)}
.lp-quote{max-width:780px;margin:0 auto;text-align:center}
.lp-quote p{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.6rem);font-style:italic;color:var(--navy);line-height:1.6}
.lp-quote footer{margin-top:18px;font-size:.85rem;color:var(--muted)}
@media(max-width:900px){.lp-grid{grid-template-columns:1fr}.lpf{position:static}.lp-hero{padding-top:120px}}

/* ══════════ RESOURCE HUB ══════════ */

.phero{padding-top:186px;padding-bottom:72px;background:var(--off);border-bottom:1px solid var(--border)}
.phero h1{font-size:clamp(2.1rem,4vw,3.3rem);max-width:24ch}
.phero .lede{margin-top:18px}
.typenav{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.typenav a{padding:10px 20px;border-radius:999px;font-size:.82rem;font-weight:600;border:1px solid var(--border);color:var(--muted);background:var(--white);transition:all var(--ease)}
.typenav a:hover{border-color:var(--navy);color:var(--navy)}
.typenav a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.detgrid{display:grid;grid-template-columns:minmax(0,720px) 320px;gap:60px;justify-content:center}
.det-prose{font-size:1rem;line-height:1.82}
.det-prose h2{font-size:1.55rem;margin:44px 0 16px;scroll-margin-top:110px}
.det-prose h2:first-child{margin-top:0}
.det-prose p{margin-bottom:20px}
.det-prose ul{margin-bottom:20px}
.det-prose ul li{position:relative;padding-left:26px;margin-bottom:10px}
.det-prose ul li::before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.det-aside{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:20px}
.aside-card{background:var(--white);border:1px solid var(--border);border-radius:22px;padding:26px}
.aside-card h5{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--light);margin-bottom:14px}
.aside-card ul li{padding:8px 0;border-bottom:1px solid var(--border-l);font-size:.85rem}
.aside-card ul li:last-child{border-bottom:none}
.aside-card ul a{color:var(--navy);font-weight:500;display:flex;gap:8px;align-items:flex-start}
.aside-card ul a::before{content:'→';color:var(--gold)}
.gatecard{background:linear-gradient(150deg,var(--navy),var(--navy-l));border-radius:24px;padding:30px;position:relative;overflow:hidden}
.gatecard::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 100% 0%,rgba(184,146,58,.22),transparent 60%)}
.gatecard>*{position:relative}
.gatecard h4{color:#fff;font-family:var(--serif);font-size:1.1rem;margin-bottom:6px}
.gatecard p{color:rgba(255,255,255,.62);font-size:.8rem;margin-bottom:16px;line-height:1.55}
.gatecard form{display:flex;flex-direction:column;gap:10px}
.gatecard input{background:rgba(255,255,255,.96);border:none;font-size:.86rem}
.gatecard .gk-done{display:none;text-align:center;color:#fff;padding:8px 0}
.hero-det{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero-det .frame{aspect-ratio:16/11;box-shadow:var(--s3)}
.inside-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.inside-item{display:flex;gap:12px;background:var(--off);border:1px solid var(--border-l);border-radius:16px;padding:16px 18px;font-size:.88rem;line-height:1.5}
.inside-item::before{content:'✓';color:var(--gold);font-weight:800}
.stepline{counter-reset:st;display:flex;flex-direction:column;gap:0;margin:26px 0}
.stepline li{counter-increment:st;display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--border-l);font-size:.92rem;align-items:flex-start}
.stepline li:last-child{border-bottom:none}
.stepline li::before{content:counter(st);width:30px;height:30px;border-radius:50%;background:var(--gold-s);color:var(--gold);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--serif)}
/* preview doc mock */
.docmock{background:var(--white);border:1px solid var(--border);border-radius:18px;box-shadow:var(--s3);padding:26px;transform:rotate(-1.2deg)}
.docmock .dm-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--gold);padding-bottom:10px;margin-bottom:14px}
.docmock .dm-head strong{font-family:var(--serif);color:var(--navy);font-size:.95rem}
.docmock .dm-head span{font-size:.6rem;color:var(--light);letter-spacing:.1em;text-transform:uppercase}
.docmock .dm-line{height:9px;border-radius:5px;background:var(--surface-2);margin-bottom:9px}
.docmock .dm-line.short{width:62%}
.docmock .dm-check{display:flex;gap:10px;align-items:center;font-size:.76rem;color:var(--muted);padding:7px 0;border-bottom:1px dashed var(--border-l)}
.docmock .dm-check::before{content:'☐';color:var(--gold);font-size:.9rem}
/* video pages */
.vwrap{max-width:960px;margin:0 auto}
.vchapters li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-l);font-size:.9rem;align-items:baseline}
.vchapters li:last-child{border-bottom:none}
.vchapters .tc{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--gold);font-weight:700;min-width:52px}
/* calculators */
.calc{max-width:860px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:28px;box-shadow:var(--sH);overflow:hidden}
.calc-head{background:linear-gradient(150deg,var(--navy),var(--navy-l));padding:30px 40px;position:relative;overflow:hidden}
.calc-head::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 100% at 100% 0%,rgba(184,146,58,.2),transparent 60%)}
.calc-head h3{color:#fff;position:relative}
.calc-head p{color:rgba(255,255,255,.6);font-size:.84rem;position:relative;margin-top:4px}
.calc-body{padding:36px 40px;display:grid;grid-template-columns:1fr 1fr;gap:44px}
.calc-fields{display:flex;flex-direction:column;gap:20px}
.cf-lab{font-size:.8rem;font-weight:700;color:var(--navy);display:flex;justify-content:space-between}
.cf-lab output{color:var(--gold);font-variant-numeric:tabular-nums}
input[type=range]{appearance:none;-webkit-appearance:none;height:6px;border-radius:4px;background:var(--surface-2);padding:0;border:none}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:var(--s2);border:3px solid #fff}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);cursor:pointer;border:3px solid #fff}
.calc-out{background:var(--off);border:1px solid var(--border-l);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:16px}
.co-big{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.1rem);font-weight:600;color:var(--navy);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.co-big small{font-size:1rem;color:var(--light);font-family:var(--sans);font-weight:500}
.co-row{display:flex;justify-content:space-between;font-size:.85rem;padding:8px 0;border-bottom:1px dashed var(--border-l)}
.co-row strong{color:var(--navy);font-variant-numeric:tabular-nums}
.co-note{font-size:.72rem;color:var(--light);line-height:1.5}
.co-bars{display:flex;flex-direction:column;gap:9px}
.co-bar{display:grid;grid-template-columns:96px 1fr 74px;gap:10px;align-items:center;font-size:.76rem;color:var(--muted)}
.co-bar .bg{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.co-bar .bg i{display:block;height:100%;border-radius:6px;background:var(--gold);transition:width .5s ease}
.co-bar strong{text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
.yn-grid{display:flex;flex-direction:column;gap:12px;max-width:660px;margin:0 auto}
.yn{display:flex;justify-content:space-between;align-items:center;gap:18px;background:var(--white);border:1px solid var(--border);border-radius:18px;padding:18px 22px}
.yn p{font-size:.94rem;color:var(--ink);margin:0}
.yn .yn-b{display:flex;gap:8px;flex-shrink:0}
.yn button{padding:9px 20px;border-radius:999px;border:1px solid var(--border);font-size:.8rem;font-weight:700;color:var(--muted);transition:all var(--ease)}
.yn button:hover{border-color:var(--navy);color:var(--navy)}
.yn button.sel-y{background:var(--green-s);border-color:var(--green);color:var(--green)}
.yn button.sel-n{background:var(--bad-s,#FBEAEA);border-color:#B23A3A;color:#B23A3A}
.kpi-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:8px}
.kpi-table th{text-align:left;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--light);border-bottom:2px solid var(--border);padding:10px 12px 10px 0}
.kpi-table td{border-bottom:1px solid var(--border-l);padding:13px 12px 13px 0;vertical-align:top}
.kpi-table td:first-child{font-weight:700;color:var(--navy);white-space:nowrap}
@media(max-width:1080px){.detgrid{grid-template-columns:1fr}.det-aside{position:static}}
@media(max-width:900px){.phero{padding-top:150px}.hero-det{grid-template-columns:1fr}.calc-body{grid-template-columns:1fr;padding:26px 22px}.inside-grid{grid-template-columns:1fr}}

.typegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tcard{background:var(--white);border:1px solid var(--border);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:8px;transition:all var(--easem)}
.tcard:hover{box-shadow:var(--s3);transform:translateY(-5px);border-color:#D3DDE7}
.tc-n{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tcard h3{font-size:1.02rem;line-height:1.28}
.tcard p{font-size:.8rem;color:var(--muted);line-height:1.55;flex:1}
.tcard .arr{font-size:.78rem;margin-top:6px}
.filterbar{padding-block:22px;border-block:1px solid var(--border);position:sticky;top:80px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);z-index:900}
.filterbar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
.fsearch{position:relative;width:250px;max-width:100%}
.fsearch input{padding:11px 14px 11px 38px;font-size:.85rem;border-radius:999px}
.fsearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--light);fill:none;stroke-width:2;stroke-linecap:round}
@media(max-width:1100px){.typegrid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.typegrid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════
   RESOURCE LIBRARY — v5 redesign
   Editorial hero with live counts · five textured format lanes ·
   featured trio · indexed grid
══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.reslib-hero{padding-top:172px;padding-bottom:76px;background:var(--off);
  border-bottom:1px solid var(--border);overflow:hidden}
.reslib-hero .wrap{position:relative;z-index:1}
.rlh-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:end;margin-top:14px}
.rlh-grid h1{font-size:clamp(2.05rem,4.1vw,3.35rem);line-height:1.08;letter-spacing:-.022em;margin-top:14px}
.rlh-grid .lede{margin-top:18px;max-width:52ch}
.rlh-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.rlh-actions .btn svg{stroke:currentColor;fill:none}

/* Count board — five rows, hairline separated, like an index card */
.rlh-stats{border:1px solid var(--border);border-radius:20px;background:var(--white);
  box-shadow:var(--s1);overflow:hidden}
.rlh-stat{display:flex;align-items:baseline;gap:14px;padding:15px 22px;
  border-bottom:1px solid var(--border-l);transition:background var(--ease);text-decoration:none}
.rlh-stat:last-child{border-bottom:none}
.rlh-stat:hover{background:var(--surface)}
.rlh-stat strong{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--gold);
  line-height:1;min-width:38px;font-variant-numeric:tabular-nums}
.rlh-stat span{font-size:.86rem;font-weight:500;color:var(--navy);flex:1}
.rlh-stat::after{content:'→';font-size:.85rem;color:var(--light);
  opacity:0;transform:translateX(-4px);transition:all var(--ease)}
.rlh-stat:hover::after{opacity:1;transform:none}

/* ── Format lanes ── */
.lanes{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.lane{position:relative;display:flex;flex-direction:column;gap:9px;padding:26px 22px 22px;
  background:var(--white);border:1px solid var(--border);border-radius:22px;
  overflow:hidden;transition:transform var(--easem),box-shadow var(--easem),border-color var(--easem);
  text-decoration:none}
.lane:hover{transform:translateY(-6px);box-shadow:var(--s3);border-color:#D3DDE7}
.lane::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold),rgba(192,154,62,0));
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1);z-index:2}
.lane:hover::after{transform:scaleX(1)}
.lane-n{font-family:var(--serif);font-size:.78rem;font-weight:700;letter-spacing:.08em;
  color:var(--gold);opacity:.75;font-variant-numeric:tabular-nums}
.lane .badge{align-self:flex-start}
.lane h3{font-size:1.02rem;line-height:1.28;margin-top:2px}
.lane p{font-size:.8rem;color:var(--muted);line-height:1.58;flex:1}
.lane .arr{font-size:.78rem;margin-top:8px}

/* ── Featured trio ── */
.feat-card{position:relative;overflow:hidden;background:var(--navy);border-color:var(--navy-l);
  display:flex;color:#fff}
.feat-card .fc-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:11px;
  padding:32px 28px;width:100%}
.feat-card h3{color:#fff;font-size:1.24rem;line-height:1.24}
.feat-card p{color:rgba(255,255,255,.72);font-size:.86rem;line-height:1.62;flex:1}
.feat-card .badge{align-self:flex-start;background:rgba(192,154,62,.2);color:var(--gold-l);
  border-color:rgba(192,154,62,.34)}
.feat-card .arr{color:var(--gold-l);font-size:.82rem;margin-top:4px}
.feat-card .arr svg{stroke:var(--gold-l)}
.feat-card:hover{transform:translateY(-6px);box-shadow:var(--sH);border-color:var(--gold)}

@media(max-width:1180px){
  .lanes{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:980px){
  .rlh-grid{grid-template-columns:1fr;gap:34px;align-items:start}
  .rlh-stats{max-width:520px}
}
@media(max-width:760px){
  .reslib-hero{padding-top:132px;padding-bottom:52px}
  .lanes{grid-template-columns:1fr}
  .lane{padding:22px 20px}
  .rlh-actions .btn{flex:1;justify-content:center}
}

/* ══════════════════════════════════════════════════════════════
   RESOURCE LIBRARY — rebuilt
   Organised the way someone actually looks for something: search first,
   one clear starting point, then a shelf per format showing real items,
   then a complete index. No decorative pattern on any component.
══════════════════════════════════════════════════════════════ */

/* ── Hero: search-led ── */
.rl-hero .wrap{max-width:900px;text-align:center}
.rl-search{position:relative;max-width:620px;margin:30px auto 0}
.rl-search input{width:100%;height:58px;border-radius:999px;padding:0 60px 0 54px;
  font-size:.98rem;background:rgba(255,255,255,.07);border:1px solid var(--hair-w2);color:#fff}
.rl-search input::placeholder{color:rgba(255,255,255,.45)}
.rl-search input:focus{background:rgba(255,255,255,.12);border-color:var(--gold);box-shadow:none;outline:none}
.rl-search .ico{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.5)}
.rl-search kbd{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-family:inherit;
  font-size:.66rem;color:rgba(255,255,255,.42);border:1px solid var(--hair-w2);border-radius:6px;padding:3px 8px}
.rl-counts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.rl-count{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.055);border:1px solid var(--hair-w2);
  font-size:.8rem;color:rgba(255,255,255,.82);transition:all var(--ease)}
.rl-count:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff}
.rl-count b{color:var(--gold-l);font-weight:700}
.rl-count .ico{width:15px;height:15px;color:var(--gold-l)}

/* ── Start here: one lead card plus two supporting ── */
.rl-start{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px}
.rl-lead{position:relative;overflow:hidden;border-radius:22px;padding:34px 32px;display:flex;flex-direction:column;
  background:linear-gradient(158deg,var(--navy-deep),var(--navy) 66%,var(--navy-l) 160%);
  border:1px solid var(--navy-l);color:rgba(255,255,255,.72);
  transition:transform var(--easem),box-shadow var(--easem)}
.rl-lead:hover{transform:translateY(-4px);box-shadow:var(--sH)}
.rl-lead .ico-box{margin-bottom:18px}
.rl-lead h3{color:#fff;font-size:1.42rem;line-height:1.2;margin-bottom:10px}
.rl-lead p{color:rgba(255,255,255,.66);font-size:.9rem;line-height:1.62;flex:1;margin-bottom:18px}
.rl-lead .rl-meta{display:flex;gap:16px;font-size:.74rem;color:rgba(255,255,255,.5);
  padding-top:16px;border-top:1px solid var(--hair-w);margin-bottom:16px}
.rl-lead .arr{color:var(--gold-l);font-size:.85rem}

/* ── A shelf per format ── */
.shelf{padding-block:clamp(38px,4vw,58px);border-top:1px solid var(--border)}
.shelf:first-of-type{border-top:none}
.shelf-hd{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.shelf-hd .ico-box{width:42px;height:42px;border-radius:12px}
.shelf-hd h2{font-size:1.36rem;margin:0;flex-shrink:0}
.shelf-hd p{font-size:.85rem;color:var(--muted);margin:0;flex:1;min-width:220px;line-height:1.55}
.shelf-hd .shelf-n{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);background:var(--gold-s);border:1px solid rgba(184,146,58,.25);
  border-radius:999px;padding:5px 12px}
.shelf-hd .arr{font-size:.82rem;white-space:nowrap}
.shelf-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shelf-row.four{grid-template-columns:repeat(4,1fr)}

/* Item card: image, type, title, one line of meta. */
/* The resource item is the site's standard card — it adds the image crop
   and the meta row, and inherits border, radius and hover from .card. */
.ritem{display:flex;flex-direction:column;overflow:hidden}
.ritem-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.ritem-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.ritem:hover .ritem-img img{transform:scale(1.05)}
.ritem-img .badge{position:absolute;left:12px;top:12px;z-index:2}
.ritem-bd{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.ritem-bd h3{font-size:.96rem;line-height:1.34;margin:0}
.ritem-bd p{font-size:.81rem;color:var(--muted);line-height:1.55;margin:0;flex:1}
.ritem-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:1px solid var(--border-l);font-size:.73rem;color:var(--light)}
.ritem-meta .arr{font-size:.75rem}

/* ── Complete index ── */
.rl-index{background:var(--off);border-top:1px solid var(--border)}
.idx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.idx-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.idx-filter{display:flex;gap:6px;flex-wrap:wrap}
.idx-filter button{font-size:.78rem;font-weight:600;color:var(--muted);background:var(--white);
  border:1px solid var(--border);border-radius:999px;padding:8px 15px;cursor:pointer;transition:all var(--ease)}
.idx-filter button:hover{border-color:var(--navy);color:var(--navy)}
.idx-filter button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.idx-list{background:var(--white);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.idx-row{display:grid;grid-template-columns:118px minmax(0,1fr) 150px 92px;gap:18px;align-items:center;
  padding:15px 22px;border-bottom:1px solid var(--border-l);transition:background var(--ease)}
.idx-row:last-child{border-bottom:none}
.idx-row:hover{background:var(--surface)}
.idx-row .idx-k{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.idx-row .idx-k .ico{width:14px;height:14px;color:var(--gold)}
.idx-row h4{font-size:.92rem;font-weight:600;color:var(--navy);margin:0;line-height:1.35}
.idx-row .idx-m{font-size:.76rem;color:var(--light)}
.idx-row .idx-go{font-size:.76rem;font-weight:600;color:var(--navy);text-align:right;white-space:nowrap}
.idx-empty{padding:52px 20px;text-align:center;color:var(--muted);font-size:.9rem}

@media(max-width:1080px){
  .rl-start{grid-template-columns:1fr 1fr}
  .rl-lead{grid-column:1/-1}
  .shelf-row,.shelf-row.four{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .rl-start,.shelf-row,.shelf-row.four{grid-template-columns:1fr}
  .idx-row{grid-template-columns:1fr;gap:6px;padding:16px 18px}
  .idx-row .idx-go{text-align:left}
  .rl-search input{height:52px;font-size:.9rem}
}

/* ══════════ LEGAL / UTILITY PAGES ══════════ */

.phero{padding-top:186px;padding-bottom:72px;background:var(--off);border-bottom:1px solid var(--border)}
.phero h1{font-size:clamp(2.1rem,4vw,3.3rem);max-width:24ch}
.phero .lede{margin-top:18px}
.typenav{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.typenav a{padding:10px 20px;border-radius:999px;font-size:.82rem;font-weight:600;border:1px solid var(--border);color:var(--muted);background:var(--white);transition:all var(--ease)}
.typenav a:hover{border-color:var(--navy);color:var(--navy)}
.typenav a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.detgrid{display:grid;grid-template-columns:minmax(0,720px) 320px;gap:60px;justify-content:center}
.det-prose{font-size:1rem;line-height:1.82}
.det-prose h2{font-size:1.55rem;margin:44px 0 16px;scroll-margin-top:110px}
.det-prose h2:first-child{margin-top:0}
.det-prose p{margin-bottom:20px}
.det-prose ul{margin-bottom:20px}
.det-prose ul li{position:relative;padding-left:26px;margin-bottom:10px}
.det-prose ul li::before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.det-aside{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:20px}
.aside-card{background:var(--white);border:1px solid var(--border);border-radius:22px;padding:26px}
.aside-card h5{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--light);margin-bottom:14px}
.aside-card ul li{padding:8px 0;border-bottom:1px solid var(--border-l);font-size:.85rem}
.aside-card ul li:last-child{border-bottom:none}
.aside-card ul a{color:var(--navy);font-weight:500;display:flex;gap:8px;align-items:flex-start}
.aside-card ul a::before{content:'→';color:var(--gold)}
.gatecard{background:linear-gradient(150deg,var(--navy),var(--navy-l));border-radius:24px;padding:30px;position:relative;overflow:hidden}
.gatecard::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 100% 0%,rgba(184,146,58,.22),transparent 60%)}
.gatecard>*{position:relative}
.gatecard h4{color:#fff;font-family:var(--serif);font-size:1.1rem;margin-bottom:6px}
.gatecard p{color:rgba(255,255,255,.62);font-size:.8rem;margin-bottom:16px;line-height:1.55}
.gatecard form{display:flex;flex-direction:column;gap:10px}
.gatecard input{background:rgba(255,255,255,.96);border:none;font-size:.86rem}
.gatecard .gk-done{display:none;text-align:center;color:#fff;padding:8px 0}
.hero-det{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero-det .frame{aspect-ratio:16/11;box-shadow:var(--s3)}
.inside-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.inside-item{display:flex;gap:12px;background:var(--off);border:1px solid var(--border-l);border-radius:16px;padding:16px 18px;font-size:.88rem;line-height:1.5}
.inside-item::before{content:'✓';color:var(--gold);font-weight:800}
.stepline{counter-reset:st;display:flex;flex-direction:column;gap:0;margin:26px 0}
.stepline li{counter-increment:st;display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--border-l);font-size:.92rem;align-items:flex-start}
.stepline li:last-child{border-bottom:none}
.stepline li::before{content:counter(st);width:30px;height:30px;border-radius:50%;background:var(--gold-s);color:var(--gold);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--serif)}
/* preview doc mock */
.docmock{background:var(--white);border:1px solid var(--border);border-radius:18px;box-shadow:var(--s3);padding:26px;transform:rotate(-1.2deg)}
.docmock .dm-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--gold);padding-bottom:10px;margin-bottom:14px}
.docmock .dm-head strong{font-family:var(--serif);color:var(--navy);font-size:.95rem}
.docmock .dm-head span{font-size:.6rem;color:var(--light);letter-spacing:.1em;text-transform:uppercase}
.docmock .dm-line{height:9px;border-radius:5px;background:var(--surface-2);margin-bottom:9px}
.docmock .dm-line.short{width:62%}
.docmock .dm-check{display:flex;gap:10px;align-items:center;font-size:.76rem;color:var(--muted);padding:7px 0;border-bottom:1px dashed var(--border-l)}
.docmock .dm-check::before{content:'☐';color:var(--gold);font-size:.9rem}
/* video pages */
.vwrap{max-width:960px;margin:0 auto}
.vchapters li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-l);font-size:.9rem;align-items:baseline}
.vchapters li:last-child{border-bottom:none}
.vchapters .tc{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--gold);font-weight:700;min-width:52px}
/* calculators */
.calc{max-width:860px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:28px;box-shadow:var(--sH);overflow:hidden}
.calc-head{background:linear-gradient(150deg,var(--navy),var(--navy-l));padding:30px 40px;position:relative;overflow:hidden}
.calc-head::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 100% at 100% 0%,rgba(184,146,58,.2),transparent 60%)}
.calc-head h3{color:#fff;position:relative}
.calc-head p{color:rgba(255,255,255,.6);font-size:.84rem;position:relative;margin-top:4px}
.calc-body{padding:36px 40px;display:grid;grid-template-columns:1fr 1fr;gap:44px}
.calc-fields{display:flex;flex-direction:column;gap:20px}
.cf-lab{font-size:.8rem;font-weight:700;color:var(--navy);display:flex;justify-content:space-between}
.cf-lab output{color:var(--gold);font-variant-numeric:tabular-nums}
input[type=range]{appearance:none;-webkit-appearance:none;height:6px;border-radius:4px;background:var(--surface-2);padding:0;border:none}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:var(--s2);border:3px solid #fff}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);cursor:pointer;border:3px solid #fff}
.calc-out{background:var(--off);border:1px solid var(--border-l);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:16px}
.co-big{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.1rem);font-weight:600;color:var(--navy);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.co-big small{font-size:1rem;color:var(--light);font-family:var(--sans);font-weight:500}
.co-row{display:flex;justify-content:space-between;font-size:.85rem;padding:8px 0;border-bottom:1px dashed var(--border-l)}
.co-row strong{color:var(--navy);font-variant-numeric:tabular-nums}
.co-note{font-size:.72rem;color:var(--light);line-height:1.5}
.co-bars{display:flex;flex-direction:column;gap:9px}
.co-bar{display:grid;grid-template-columns:96px 1fr 74px;gap:10px;align-items:center;font-size:.76rem;color:var(--muted)}
.co-bar .bg{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.co-bar .bg i{display:block;height:100%;border-radius:6px;background:var(--gold);transition:width .5s ease}
.co-bar strong{text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
.yn-grid{display:flex;flex-direction:column;gap:12px;max-width:660px;margin:0 auto}
.yn{display:flex;justify-content:space-between;align-items:center;gap:18px;background:var(--white);border:1px solid var(--border);border-radius:18px;padding:18px 22px}
.yn p{font-size:.94rem;color:var(--ink);margin:0}
.yn .yn-b{display:flex;gap:8px;flex-shrink:0}
.yn button{padding:9px 20px;border-radius:999px;border:1px solid var(--border);font-size:.8rem;font-weight:700;color:var(--muted);transition:all var(--ease)}
.yn button:hover{border-color:var(--navy);color:var(--navy)}
.yn button.sel-y{background:var(--green-s);border-color:var(--green);color:var(--green)}
.yn button.sel-n{background:var(--bad-s,#FBEAEA);border-color:#B23A3A;color:#B23A3A}
.kpi-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:8px}
.kpi-table th{text-align:left;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--light);border-bottom:2px solid var(--border);padding:10px 12px 10px 0}
.kpi-table td{border-bottom:1px solid var(--border-l);padding:13px 12px 13px 0;vertical-align:top}
.kpi-table td:first-child{font-weight:700;color:var(--navy);white-space:nowrap}
@media(max-width:1080px){.detgrid{grid-template-columns:1fr}.det-aside{position:static}}
@media(max-width:900px){.phero{padding-top:150px}.hero-det{grid-template-columns:1fr}.calc-body{grid-template-columns:1fr;padding:26px 22px}.inside-grid{grid-template-columns:1fr}}

.legal{max-width:780px;margin:0 auto;font-size:.98rem;line-height:1.85}
.legal h2{font-size:1.4rem;margin:42px 0 14px;scroll-margin-top:110px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.05rem;margin:26px 0 10px}
.legal p{margin-bottom:16px;color:var(--ink)}
.legal ul{margin-bottom:18px}
.legal ul li{position:relative;padding-left:26px;margin-bottom:9px}
.legal ul li::before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.legal table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.88rem}
.legal th{text-align:left;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--light);border-bottom:2px solid var(--border);padding:10px 12px 10px 0}
.legal td{border-bottom:1px solid var(--border-l);padding:12px 12px 12px 0;vertical-align:top}
.legal td:first-child{font-weight:600;color:var(--navy);white-space:nowrap}
/* Tables must never push the page sideways on small screens. */
.legal .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0}
@media(max-width:760px){
  .legal table{font-size:.82rem}
  .legal td:first-child{white-space:normal}
  .legal th,.legal td{padding:10px 10px 10px 0}
}
.legal .note{background:var(--off);border:1px solid var(--border-l);border-left:3px solid var(--gold);border-radius:0 16px 16px 0;padding:20px 24px;font-size:.9rem;color:var(--muted);margin:24px 0}

/* ══════════ SITEMAP ══════════ */

.phero{padding-top:186px;padding-bottom:72px;background:var(--off);border-bottom:1px solid var(--border)}
.phero h1{font-size:clamp(2.1rem,4vw,3.3rem);max-width:24ch}
.phero .lede{margin-top:18px}
.typenav{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.typenav a{padding:10px 20px;border-radius:999px;font-size:.82rem;font-weight:600;border:1px solid var(--border);color:var(--muted);background:var(--white);transition:all var(--ease)}
.typenav a:hover{border-color:var(--navy);color:var(--navy)}
.typenav a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.detgrid{display:grid;grid-template-columns:minmax(0,720px) 320px;gap:60px;justify-content:center}
.det-prose{font-size:1rem;line-height:1.82}
.det-prose h2{font-size:1.55rem;margin:44px 0 16px;scroll-margin-top:110px}
.det-prose h2:first-child{margin-top:0}
.det-prose p{margin-bottom:20px}
.det-prose ul{margin-bottom:20px}
.det-prose ul li{position:relative;padding-left:26px;margin-bottom:10px}
.det-prose ul li::before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.det-aside{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:20px}
.aside-card{background:var(--white);border:1px solid var(--border);border-radius:22px;padding:26px}
.aside-card h5{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--light);margin-bottom:14px}
.aside-card ul li{padding:8px 0;border-bottom:1px solid var(--border-l);font-size:.85rem}
.aside-card ul li:last-child{border-bottom:none}
.aside-card ul a{color:var(--navy);font-weight:500;display:flex;gap:8px;align-items:flex-start}
.aside-card ul a::before{content:'→';color:var(--gold)}
.gatecard{background:linear-gradient(150deg,var(--navy),var(--navy-l));border-radius:24px;padding:30px;position:relative;overflow:hidden}
.gatecard::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 100% 0%,rgba(184,146,58,.22),transparent 60%)}
.gatecard>*{position:relative}
.gatecard h4{color:#fff;font-family:var(--serif);font-size:1.1rem;margin-bottom:6px}
.gatecard p{color:rgba(255,255,255,.62);font-size:.8rem;margin-bottom:16px;line-height:1.55}
.gatecard form{display:flex;flex-direction:column;gap:10px}
.gatecard input{background:rgba(255,255,255,.96);border:none;font-size:.86rem}
.gatecard .gk-done{display:none;text-align:center;color:#fff;padding:8px 0}
.hero-det{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero-det .frame{aspect-ratio:16/11;box-shadow:var(--s3)}
.inside-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.inside-item{display:flex;gap:12px;background:var(--off);border:1px solid var(--border-l);border-radius:16px;padding:16px 18px;font-size:.88rem;line-height:1.5}
.inside-item::before{content:'✓';color:var(--gold);font-weight:800}
.stepline{counter-reset:st;display:flex;flex-direction:column;gap:0;margin:26px 0}
.stepline li{counter-increment:st;display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--border-l);font-size:.92rem;align-items:flex-start}
.stepline li:last-child{border-bottom:none}
.stepline li::before{content:counter(st);width:30px;height:30px;border-radius:50%;background:var(--gold-s);color:var(--gold);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--serif)}
/* preview doc mock */
.docmock{background:var(--white);border:1px solid var(--border);border-radius:18px;box-shadow:var(--s3);padding:26px;transform:rotate(-1.2deg)}
.docmock .dm-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--gold);padding-bottom:10px;margin-bottom:14px}
.docmock .dm-head strong{font-family:var(--serif);color:var(--navy);font-size:.95rem}
.docmock .dm-head span{font-size:.6rem;color:var(--light);letter-spacing:.1em;text-transform:uppercase}
.docmock .dm-line{height:9px;border-radius:5px;background:var(--surface-2);margin-bottom:9px}
.docmock .dm-line.short{width:62%}
.docmock .dm-check{display:flex;gap:10px;align-items:center;font-size:.76rem;color:var(--muted);padding:7px 0;border-bottom:1px dashed var(--border-l)}
.docmock .dm-check::before{content:'☐';color:var(--gold);font-size:.9rem}
/* video pages */
.vwrap{max-width:960px;margin:0 auto}
.vchapters li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-l);font-size:.9rem;align-items:baseline}
.vchapters li:last-child{border-bottom:none}
.vchapters .tc{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--gold);font-weight:700;min-width:52px}
/* calculators */
.calc{max-width:860px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:28px;box-shadow:var(--sH);overflow:hidden}
.calc-head{background:linear-gradient(150deg,var(--navy),var(--navy-l));padding:30px 40px;position:relative;overflow:hidden}
.calc-head::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 100% at 100% 0%,rgba(184,146,58,.2),transparent 60%)}
.calc-head h3{color:#fff;position:relative}
.calc-head p{color:rgba(255,255,255,.6);font-size:.84rem;position:relative;margin-top:4px}
.calc-body{padding:36px 40px;display:grid;grid-template-columns:1fr 1fr;gap:44px}
.calc-fields{display:flex;flex-direction:column;gap:20px}
.cf-lab{font-size:.8rem;font-weight:700;color:var(--navy);display:flex;justify-content:space-between}
.cf-lab output{color:var(--gold);font-variant-numeric:tabular-nums}
input[type=range]{appearance:none;-webkit-appearance:none;height:6px;border-radius:4px;background:var(--surface-2);padding:0;border:none}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:var(--s2);border:3px solid #fff}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);cursor:pointer;border:3px solid #fff}
.calc-out{background:var(--off);border:1px solid var(--border-l);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:16px}
.co-big{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.1rem);font-weight:600;color:var(--navy);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.co-big small{font-size:1rem;color:var(--light);font-family:var(--sans);font-weight:500}
.co-row{display:flex;justify-content:space-between;font-size:.85rem;padding:8px 0;border-bottom:1px dashed var(--border-l)}
.co-row strong{color:var(--navy);font-variant-numeric:tabular-nums}
.co-note{font-size:.72rem;color:var(--light);line-height:1.5}
.co-bars{display:flex;flex-direction:column;gap:9px}
.co-bar{display:grid;grid-template-columns:96px 1fr 74px;gap:10px;align-items:center;font-size:.76rem;color:var(--muted)}
.co-bar .bg{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.co-bar .bg i{display:block;height:100%;border-radius:6px;background:var(--gold);transition:width .5s ease}
.co-bar strong{text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
.yn-grid{display:flex;flex-direction:column;gap:12px;max-width:660px;margin:0 auto}
.yn{display:flex;justify-content:space-between;align-items:center;gap:18px;background:var(--white);border:1px solid var(--border);border-radius:18px;padding:18px 22px}
.yn p{font-size:.94rem;color:var(--ink);margin:0}
.yn .yn-b{display:flex;gap:8px;flex-shrink:0}
.yn button{padding:9px 20px;border-radius:999px;border:1px solid var(--border);font-size:.8rem;font-weight:700;color:var(--muted);transition:all var(--ease)}
.yn button:hover{border-color:var(--navy);color:var(--navy)}
.yn button.sel-y{background:var(--green-s);border-color:var(--green);color:var(--green)}
.yn button.sel-n{background:var(--bad-s,#FBEAEA);border-color:#B23A3A;color:#B23A3A}
.kpi-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:8px}
.kpi-table th{text-align:left;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--light);border-bottom:2px solid var(--border);padding:10px 12px 10px 0}
.kpi-table td{border-bottom:1px solid var(--border-l);padding:13px 12px 13px 0;vertical-align:top}
.kpi-table td:first-child{font-weight:700;color:var(--navy);white-space:nowrap}
@media(max-width:1080px){.detgrid{grid-template-columns:1fr}.det-aside{position:static}}
@media(max-width:900px){.phero{padding-top:150px}.hero-det{grid-template-columns:1fr}.calc-body{grid-template-columns:1fr;padding:26px 22px}.inside-grid{grid-template-columns:1fr}}

/* ══════════ SITEMAP — architecture map ══════════ */
.sm-hero{padding-top:172px;padding-bottom:64px;background:var(--off);border-bottom:1px solid var(--border);overflow:hidden}
.sm-hero .wrap{position:relative;z-index:1}
.sm-hero h1{font-size:clamp(2rem,3.9vw,3.1rem);line-height:1.09;letter-spacing:-.02em;margin-top:14px}
.sm-hero .lede{max-width:58ch;margin-top:16px}
.sm-count{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:20px;overflow:hidden;margin-top:38px}
.sm-count div{background:var(--white);padding:20px 22px}
.sm-count strong{display:block;font-family:var(--serif);font-size:1.85rem;font-weight:600;color:var(--navy);line-height:1;
  font-variant-numeric:tabular-nums}
.sm-count span{display:block;font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--light);margin-top:8px}

/* Sticky in-page jump rail */
.sm-jump{position:sticky;top:80px;z-index:900;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);padding-block:14px}
.sm-jump .wrap{display:flex;gap:8px;flex-wrap:wrap}
.sm-jump a{font-size:.78rem;font-weight:600;color:var(--muted);border:1px solid var(--border);
  background:var(--white);border-radius:999px;padding:8px 16px;transition:all var(--ease)}
.sm-jump a:hover{border-color:var(--navy);color:var(--navy)}

/* Tier block: a numbered rail with the group's pages beside it */
.tier{display:grid;grid-template-columns:236px minmax(0,1fr);gap:48px;padding-block:52px;
  border-top:1px solid var(--border);scroll-margin-top:150px}
.tier:first-of-type{border-top:none}
.tier-side{position:sticky;top:150px;align-self:start}
.tier-n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--gold);color:var(--gold);border-radius:11px;font-family:var(--serif);
  font-size:.92rem;font-weight:700;margin-bottom:14px}
.tier-side h2{font-size:1.32rem;line-height:1.24}
.tier-side p{font-size:.82rem;color:var(--muted);line-height:1.6;margin-top:9px}
.tier-side .tier-meta{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--light);margin-top:14px;display:block}

.smgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.smgrid.one{grid-template-columns:1fr}
.sm-node{position:relative;display:block;background:var(--white);border:1px solid var(--border);
  border-radius:18px;padding:20px 22px;transition:all var(--easem);overflow:hidden}
.sm-node:hover{border-color:#D3DDE7;box-shadow:var(--s2);transform:translateY(-3px)}
.sm-node::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.sm-node:hover::before{transform:scaleY(1)}
.sm-node .sn-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sm-node h3{font-size:.98rem;line-height:1.3}
.sm-node .sn-u{font-size:.68rem;color:var(--light);font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  white-space:nowrap}
.sm-node p{font-size:.8rem;color:var(--muted);line-height:1.56;margin-top:7px}
.sm-node .sn-f{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sm-node-static{cursor:default}
.sm-node-static:hover{transform:none;box-shadow:none;border-color:var(--border)}
.sm-node-static:hover::before{transform:scaleY(0)}
.sn-tag{font-size:.63rem;font-weight:700;letter-spacing:.05em;color:var(--navy);background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:3px 9px}
.sn-tag.gold{background:var(--gold-s);border-color:rgba(184,146,58,.28);color:var(--gold)}

/* Compact child list inside a tier (individual resources, articles) */
.sm-list{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;background:var(--white);
  border:1px solid var(--border);border-radius:18px;padding:18px 22px;margin-top:14px}
.sm-list a{display:block;font-size:.83rem;color:var(--muted);padding:7px 0;
  border-bottom:1px solid var(--border-l);transition:color var(--ease)}
.sm-list a:hover{color:var(--navy)}
.sm-list h4{grid-column:1/-1;font-size:.64rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--light);padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:2px}
.sm-list h4:not(:first-child){margin-top:18px}

/* Feature register */
.freg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fcell{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:24px;
  transition:all var(--easem)}
.fcell:hover{box-shadow:var(--s2);border-color:#D3DDE7}
.fcell h4{font-size:.94rem;margin-bottom:6px}
.fcell .fc-k{font-size:.62rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:11px}
.fcell ul{margin:0}
.fcell li{position:relative;padding-left:19px;font-size:.81rem;color:var(--muted);line-height:1.55;margin-bottom:8px;
  list-style:none}
.fcell li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:1px;
  transform:rotate(45deg);background:var(--gold)}

/* Journey rail */
.jrail{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:j;position:relative;margin-top:8px}
.jstep{position:relative;padding:26px 22px 24px;background:var(--white);border:1px solid var(--border);
  border-right:none}
.jstep:first-child{border-radius:20px 0 0 20px}
.jstep:last-child{border-right:1px solid var(--border);border-radius:0 20px 20px 0}
.jstep .js-n{font-family:var(--serif);font-size:.74rem;font-weight:700;color:var(--gold);letter-spacing:.08em}
.jstep h4{font-size:.94rem;margin:9px 0 7px;line-height:1.3}
.jstep p{font-size:.78rem;color:var(--muted);line-height:1.55}
.jstep .js-a{display:block;font-size:.72rem;color:var(--navy);font-weight:600;margin-top:11px}

@media(max-width:1100px){
  .freg{grid-template-columns:1fr 1fr}
  .jrail{grid-template-columns:1fr 1fr}
  .jstep{border-right:1px solid var(--border);border-radius:0!important;margin-bottom:-1px;margin-right:-1px}
  .sm-count{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:900px){
  .tier{grid-template-columns:1fr;gap:26px;padding-block:40px}
  .tier-side{position:static}
}
@media(max-width:700px){
  .sm-hero{padding-top:132px;padding-bottom:46px}
  .smgrid,.sm-list,.freg,.jrail{grid-template-columns:1fr}
  .sm-count{grid-template-columns:1fr 1fr}
  .sm-node .sn-u{display:none}
}

/* ══════════ MISC ══════════ */
.bm-label{font-weight:600}
.markinly-lead-form{display:flex;flex-direction:column;gap:10px}
.markinly-lead-form.cform{display:block}
/* .resgrid is the filter hook on the library grid; layout comes from .g3 */
.resgrid{position:relative}

/* ══════════ ICON SYSTEM ══════════ */

/* ══════════ ICON SYSTEM ══════════════════════════════════════════════
   One family, one weight, one colour source. Sizes are set by the block
   the icon sits in, never by the icon itself.
════════════════════════════════════════════════════════════════════ */
.ico{flex-shrink:0;stroke:currentColor;fill:none;vertical-align:middle}
.ico-box{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;flex-shrink:0;
  background:var(--gold-s);border:1px solid rgba(184,146,58,.24);color:var(--gold);
  transition:all var(--easem)}
.ico-box.sq{border-radius:12px}
.ico-box.lg{width:56px;height:56px;border-radius:16px}
.ico-box.sm{width:36px;height:36px;border-radius:11px}
.ico-box.navy{background:var(--navy-t);border-color:var(--border);color:var(--navy)}
.ico-box.dk{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--gold-l)}
.card:hover .ico-box,.cap:hover .ico-box,.lane:hover .ico-box,.svc-box:hover .ico-box{
  background:var(--gold);border-color:var(--gold);color:var(--navy-d);transform:translateY(-2px)}
.ico-inline{width:15px;height:15px;margin-right:7px;color:var(--gold)}
.arr .ico,.mck-btn .ico,.btn .ico{width:15px;height:15px}

/* ══════════ V5 — premium layer ══════════ */

/* ══════════════════════════════════════════════════════════════════════
   MARKINLY — DESIGN SYSTEM v5  ·  "Premium Editorial, dark-led"
   Loaded last, so it is the final word on:
     · header that fits at every width
     · breadcrumb bar pinned to where the header ends
     · dark, patterned page heroes with a consistent height envelope
     · buttons that render correctly in every context
     · richer pattern vocabulary, orchestrated light ↔ dark
     · coloured client wordmarks
     · a proper multi-tier footer
══════════════════════════════════════════════════════════════════════ */

:root{
  --hdr-h:72px;
  --hero-min:clamp(320px,44vh,430px);
  --hero-max:600px;
  --ink-dk:#050F1C;
  --navy-deep:#061529;
  --hair-w:rgba(255,255,255,.10);
  --hair-w2:rgba(255,255,255,.16);
}

/* ══════════ 1 · HEADER ══════════════════════════════════════════════
   The old header carried a wordmark plus a 40-character tagline, six nav
   items, a search field, a saved counter and a full-width CTA — roughly
   1420px of content in a 1366px viewport, so the CTA fell off the right
   edge. Rebuilt to fit: the tagline moves to the footer, the nav loses
   its duplicate Case Studies entry, and search and saved become icons.
════════════════════════════════════════════════════════════════════ */
.hdr-in{height:var(--hdr-h);gap:20px;min-width:0}
.hdr.up{background:rgba(255,255,255,.92);box-shadow:0 1px 0 var(--border),0 6px 28px rgba(8,33,60,.06)}

.logo{gap:10px;align-items:center}
.logo-name{font-size:1.22rem;line-height:1}
/* The tagline is footer-only from v5 — it was the width the header could not afford. */
.hdr .logo-sub{display:none}

nav.desk-nav{gap:1px;min-width:0;flex-shrink:1}
.nav-a{padding:8px 12px;font-size:.855rem;letter-spacing:-.005em}
.hdr-actions{gap:8px;flex-shrink:0}

/* Icon-only chrome buttons */
.hdr-ico{width:38px;height:38px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--white);color:var(--muted);cursor:pointer;
  transition:all var(--ease);position:relative;flex-shrink:0;padding:0}
.hdr-ico:hover{border-color:var(--navy);color:var(--navy);transform:translateY(-1px)}
.hdr-ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hdr-ico .saved-count{position:absolute;top:-4px;right:-4px;margin:0}

.hdr .btn-sm{padding:10px 18px;font-size:.82rem;min-height:38px}

@media(min-width:1101px){
  .hdr-actions .burger{display:none}
}
@media(max-width:1180px){
  .nav-a{padding:8px 9px;font-size:.82rem}
  .hdr .btn-sm{padding:10px 15px}
}
@media(max-width:1100px){
  nav.desk-nav{display:none}
  .hdr-actions .btn{display:none}
  .burger{display:flex}
  .hdr-in{height:64px}
}
/* ══════════ 2 · BREADCRUMB BAR ══════════════════════════════════════
   Sits immediately below the header, edge to edge, before the hero.
   Positioned absolutely inside the hero so no template markup changes.
════════════════════════════════════════════════════════════════════ */
/* Pinned to exactly where the fixed header ends. The offset parent is the
   hero section, so this holds whether or not the announcement bar is showing. */
.crumbbar{position:absolute;left:0;right:0;top:var(--hdr-h);z-index:3;
  border-bottom:1px solid var(--hair-w);background:rgba(5,15,28,.34);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.crumbbar .wrap{display:flex;align-items:center;min-height:46px}
.crumbbar .crumb{margin:0;font-size:.75rem;color:rgba(255,255,255,.5)}
.crumbbar .crumb a{color:rgba(255,255,255,.62)}
.crumbbar .crumb a:hover{color:#fff}
.crumbbar .crumb strong,.crumbbar .crumb span:last-child{color:#fff!important;font-weight:600}
.crumbbar .crumb span{color:rgba(255,255,255,.28)}
/* Light-surface variant, for the few pages that keep a pale hero. */
.hero-light .crumbbar{background:rgba(255,255,255,.72);border-bottom-color:var(--border)}
.hero-light .crumbbar .crumb{color:var(--light)}
.hero-light .crumbbar .crumb a{color:var(--muted)}
.hero-light .crumbbar .crumb a:hover{color:var(--navy)}
.hero-light .crumbbar .crumb strong{color:var(--navy)!important}
.hero-light .crumbbar .crumb span{color:var(--border)}

/* ══════════ 3 · DARK PAGE HERO ══════════════════════════════════════
   Every interior page now opens on the same dark, patterned band with a
   fixed height envelope and vertically centred content, so moving between
   pages feels like one site rather than a series of layouts.
════════════════════════════════════════════════════════════════════ */
.phero,.reslib-hero,.sm-hero,.ahero{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(165deg,var(--navy-deep) 0%,var(--navy) 46%,var(--navy-l) 130%);
  border-bottom:none;
  padding-top:calc(var(--hdr-h) + 46px);
  padding-bottom:clamp(44px,5vw,72px);
  min-height:var(--hero-min);
  display:flex;align-items:center}
.phero > .wrap,.reslib-hero > .wrap,.sm-hero > .wrap,.ahero > .wrap{
  width:100%;position:static;padding-top:clamp(30px,4vw,52px)}
/* Content sits above the pattern layers without the wrap becoming the
   positioning context — otherwise the breadcrumb bar anchors to the wrap
   instead of the section and drops below the header. */
.phero > .wrap > *,.reslib-hero > .wrap > *,.sm-hero > .wrap > *,.ahero > .wrap > *,
.chero > .wrap > *{position:relative;z-index:2}
.phero > .wrap > .crumbbar,.reslib-hero > .wrap > .crumbbar,.sm-hero > .wrap > .crumbbar,
.ahero > .wrap > .crumbbar,.chero > .wrap > .crumbbar{position:absolute;z-index:3}
.phero::before,.reslib-hero::before,.sm-hero::before,.ahero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--hair-w) 1px,transparent 1px),
    linear-gradient(to bottom,var(--hair-w) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(ellipse 92% 86% at 22% 24%,#000 12%,transparent 76%);
  mask-image:radial-gradient(ellipse 92% 86% at 22% 24%,#000 12%,transparent 76%);
  opacity:.85}
.phero::after,.reslib-hero::after,.sm-hero::after,.ahero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 54% 76% at 88% 8%,rgba(184,146,58,.20),transparent 62%),
    radial-gradient(ellipse 60% 70% at 4% 96%,rgba(28,84,140,.30),transparent 66%)}

.phero h1,.reslib-hero h1,.sm-hero h1,.ahero h1{color:#fff;letter-spacing:-.024em}
.phero h1 em,.reslib-hero h1 em,.sm-hero h1 em{color:var(--gold-l);font-style:italic}
.phero .lede,.reslib-hero .lede,.sm-hero .lede,.ahero .lede{color:rgba(255,255,255,.70)}
.phero .eyebrow,.reslib-hero .eyebrow,.sm-hero .eyebrow,.ahero .eyebrow{color:var(--gold-l)}
.phero .eyebrow::before,.reslib-hero .eyebrow::before,.sm-hero .eyebrow::before{background:var(--gold)}
.phero .dek,.ahero .dek{color:rgba(255,255,255,.72)}
.phero .btn-o,.reslib-hero .btn-o,.sm-hero .btn-o{
  background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.phero .btn-o:hover,.reslib-hero .btn-o:hover,.sm-hero .btn-o:hover{
  background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.5)}
.phero .btn-p,.reslib-hero .btn-p,.sm-hero .btn-p{
  background:linear-gradient(180deg,var(--gold-l) -50%,var(--gold) 58%);color:var(--navy-d);font-weight:700}
.phero .typenav a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.72)}
.phero .typenav a:hover{border-color:rgba(255,255,255,.4);color:#fff}
.phero .typenav a.on{background:var(--gold);border-color:var(--gold);color:var(--navy-d)}
.phero .badge{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
/* Tall content (a hero carrying a form or stat rail) is allowed to grow to
   the cap, then the section scrolls with the page rather than clipping. */
.phero.hero-tall,.reslib-hero,.sm-hero{min-height:auto;max-width:none}
.reslib-hero,.sm-hero{align-items:center;min-height:var(--hero-min)}
.phero.hero-center{text-align:center}
.phero.hero-center .lede{margin-inline:auto}
.phero.hero-center .eyebrow{justify-content:center}
.phero.hero-center .btns{justify-content:center}
@media(max-width:900px){
  :root{--hero-min:clamp(280px,40vh,360px)}
  .phero,.reslib-hero,.sm-hero,.ahero{padding-top:calc(var(--hdr-h) + 40px)}
}
@media(max-width:700px){
  .crumbbar .wrap{min-height:40px}
  .crumbbar .crumb{font-size:.7rem}
}

/* Article hero keeps its own rhythm but shares the dark treatment. */
.ahero{display:block;min-height:auto;padding-bottom:0}
.ahero .abyline .ab-i strong{color:#fff}
.ahero .abyline .ab-i span{color:rgba(255,255,255,.5)}
.ahero .badge{background:rgba(184,146,58,.2);border-color:rgba(184,146,58,.36);color:var(--gold-l)}
.ahero-img .frame{transform:translateY(56px);box-shadow:0 30px 70px rgba(3,11,22,.42)}

/* Resource-library hero: the count board needs light-on-dark treatment. */
.rlh-stats{background:rgba(255,255,255,.045);border-color:var(--hair-w2);box-shadow:none;
  backdrop-filter:blur(10px)}
.rlh-stat{border-bottom-color:var(--hair-w)}
.rlh-stat:hover{background:rgba(255,255,255,.07)}
.rlh-stat strong{color:var(--gold-l)}
.rlh-stat span{color:rgba(255,255,255,.86)}
.rlh-stat::after{color:rgba(255,255,255,.5)}
.sm-count{background:var(--hair-w);border-color:var(--hair-w2)}
.sm-count div{background:rgba(255,255,255,.05);backdrop-filter:blur(8px)}
.sm-count strong{color:#fff}
.sm-count span{color:rgba(255,255,255,.5)}

/* ══════════ 4 · BUTTONS ═════════════════════════════════════════════
   The v4 export shipped a global `.markinly-lead-form{flex-direction:column}`
   rule that also caught the inline newsletter rows, so their submit buttons
   lost the height they were inheriting from the row and collapsed into thin
   bars. Rows are now explicitly restored and every control has a real
   minimum height of its own, so no context can flatten one again.
════════════════════════════════════════════════════════════════════ */
button,.btn,input[type=submit]{font-family:var(--sans)}
.btn{min-height:46px;padding-block:0;align-items:center}
.btn-sm{min-height:38px}
.btn-lg{min-height:54px}
.btn svg{flex-shrink:0}

/* Inline "input + button" rows must stay rows. */
form.mck-subrow,form.nl-inline,form.ft-nl,
.markinly-lead-form.mck-subrow,.markinly-lead-form.nl-inline,.markinly-lead-form.ft-nl{
  display:flex!important;flex-direction:row!important;align-items:stretch;flex-wrap:nowrap}
form.mck-subrow > input:not([type=hidden]),
form.nl-inline > input:not([type=hidden]),
form.ft-nl > input:not([type=hidden]){flex:1 1 auto;min-width:0}
form.mck-subrow > button,form.nl-inline > button,form.ft-nl > button{
  flex:0 0 auto;min-height:48px;display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;cursor:pointer;line-height:1}
form.mck-subrow > button{min-width:52px;padding-inline:16px}
form.nl-inline > button,form.ft-nl > button{padding-inline:22px;font-size:.84rem}
form.ft-nl > button{min-height:46px}
/* Stacked forms keep column layout but their buttons get a real height. */
.markinly-lead-form:not(.mck-subrow):not(.nl-inline):not(.ft-nl){
  display:flex;flex-direction:column;gap:10px}
.markinly-lead-form .btn,.markinly-lead-form button[type=submit]{min-height:48px}
.slidein form button,.gatecard form button,.lm-form button{min-height:48px}
@media(max-width:520px){
  form.nl-inline,form.ft-nl{flex-wrap:wrap}
  form.nl-inline > button,form.ft-nl > button{width:100%;border-radius:999px!important;margin-top:8px}
}

/* ══════════ 5 · EXTENDED PATTERN VOCABULARY ════════════════════════
   Light sections and dark sections now alternate deliberately, each with
   its own texture, so the grid motif reads as a system rather than noise.
════════════════════════════════════════════════════════════════════ */
.sec-navy,.sec-dark{background:linear-gradient(168deg,var(--navy-deep),var(--navy) 60%,var(--navy-l) 150%);color:rgba(255,255,255,.72)}
.pat-blueprint{position:relative;isolation:isolate}
.pat-blueprint::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(11,37,64,.10) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(11,37,64,.10) 1px,transparent 1px),
    linear-gradient(to right,rgba(11,37,64,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(11,37,64,.045) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.28) 70%,transparent);
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.28) 70%,transparent)}
.pat-blueprint > *{position:relative;z-index:1}
.pat-mesh{position:relative;isolation:isolate}
.pat-mesh::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,rgba(11,37,64,.035) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(-45deg,rgba(11,37,64,.035) 0 1px,transparent 1px 18px);
  -webkit-mask-image:radial-gradient(ellipse 76% 72% at 50% 46%,#000 26%,transparent 78%);
  mask-image:radial-gradient(ellipse 76% 72% at 50% 46%,#000 26%,transparent 78%)}
.pat-mesh > *{position:relative;z-index:1}
.pat-dk-mesh::before{
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 20px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 20px)}
.pat-dk-dots{position:relative;isolation:isolate}
.pat-dk-dots::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1.2px,transparent 1.2px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 78% 74% at 50% 40%,#000 22%,transparent 78%);
  mask-image:radial-gradient(ellipse 78% 74% at 50% 40%,#000 22%,transparent 78%)}
.pat-dk-dots > *{position:relative;z-index:1}
/* A hairline "seam" between a dark band and the light band below it. */
.seam-top{position:relative}
.seam-top::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(184,146,58,.5),transparent)}

/* ══════════ 6 · CLIENT WORDMARKS ═══════════════════════════════════
   Text pills replaced with coloured, weighted wordmarks — each client gets
   its own accent, so the band reads as real logos rather than placeholders.
════════════════════════════════════════════════════════════════════ */
.mk-wrap{padding-block:34px}
.logo-pill{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:12px;
  background:var(--white);border:1px solid var(--border);box-shadow:0 1px 2px rgba(11,37,64,.04);
  font-family:var(--sans);font-size:.84rem;font-weight:700;letter-spacing:-.01em;
  color:var(--navy);white-space:nowrap;transition:all var(--easem);opacity:1}
.logo-pill:hover{box-shadow:var(--s2);transform:translateY(-2px);border-color:#D3DDE7}
.logo-pill .lp-m{width:22px;height:22px;border-radius:6px;flex-shrink:0;display:grid;place-items:center;
  font-size:.66rem;font-weight:800;color:#fff;letter-spacing:0}
.lp-tnt   .lp-m{background:linear-gradient(140deg,#C2410C,#EA6A21)}
.lp-chest .lp-m{background:linear-gradient(140deg,#155E40,#2A8A63)}
.lp-rump  .lp-m{background:linear-gradient(140deg,#6D28D9,#9155EC)}
.lp-lov   .lp-m{background:linear-gradient(140deg,#BE185D,#E0468A)}
.lp-luxe  .lp-m{background:linear-gradient(140deg,#8A6A1F,#C6A24A)}
.lp-data  .lp-m{background:linear-gradient(140deg,#0E4C8A,#2879C9)}
.lp-tnt   {color:#8A2C05}
.lp-chest {color:#12503A}
.lp-rump  {color:#54209E}
.lp-lov   {color:#96114A}
.lp-luxe  {color:#6E5417}
.lp-data  {color:#0B3C6D}
.mk-track{align-items:center}
.mk-fade-l,.mk-fade-r{width:110px}

/* ══════════ 7 · FOOTER ═════════════════════════════════════════════ */
.footer{background:linear-gradient(180deg,var(--ink-dk),#03101F 70%);position:relative;isolation:isolate}
.footer::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 62%);
  mask-image:linear-gradient(180deg,#000,transparent 62%)}
.footer > *{position:relative;z-index:1}
.footer .wrap{position:relative;z-index:1}

/* Call-to-action strip that opens the footer */
.ft-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding-block:40px;border-bottom:1px solid var(--hair-w)}
.ft-cta h3{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.7rem);color:#fff;line-height:1.22;margin:0}
.ft-cta p{font-size:.88rem;color:rgba(255,255,255,.5);margin:8px 0 0;max-width:52ch}
.ft-cta .btns{display:flex;gap:10px;flex-wrap:wrap}

.ft-top{grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:44px;padding-block:56px 40px}
.ft-brand p{color:rgba(255,255,255,.46);max-width:36ch}
.ft-brand .ft-brand .logo-sub{display:block;color:rgba(255,255,255,.34)}
.ft-col h5{color:rgba(255,255,255,.36)}
.ft-col a{color:rgba(255,255,255,.6)}
.ft-col a:hover{color:#fff;padding-left:3px}
.ft-col a{transition:color var(--ease),padding-left var(--ease)}

/* Social row — six channels, evenly weighted */
.ft-social{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.ft-soc{width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--hair-w);transition:all var(--easem)}
.ft-soc svg{width:16px;height:16px;fill:rgba(255,255,255,.62);stroke:none}
.ft-soc:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.ft-soc:hover svg{fill:var(--navy-d)}

/* Contact rail under the brand column */
.ft-meta{margin-top:22px;display:flex;flex-direction:column;gap:7px}
.ft-meta a,.ft-meta span{display:flex;align-items:center;gap:9px;font-size:.8rem;color:rgba(255,255,255,.5)}
.ft-meta a:hover{color:#fff}
.ft-meta svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}

/* Site index */
.ft-index{border-top:1px solid var(--hair-w);padding-block:36px 10px}
.ft-ix{gap:24px 30px}
.ft-ix h6{color:rgba(255,255,255,.5)}
.ft-ix a{color:rgba(255,255,255,.4);font-size:.775rem;margin-bottom:7px}
.ft-ix a:hover{color:#fff}
.ft-ix-flow{display:flex;flex-wrap:wrap;gap:6px 22px}
.ft-ix-flow a{margin-bottom:0}
.ft-bot{border-top:1px solid var(--hair-w);color:rgba(255,255,255,.32);padding-block:22px;padding-right:64px}
.ft-legal{gap:18px;flex-wrap:wrap}
/* Clear the floating chrome so nothing lands on top of the footer links. */
.footer{padding-bottom:26px}
@media(max-width:1000px){
  .ft-top{grid-template-columns:1fr 1fr;gap:36px}
  .ft-cta{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
  .ft-top{grid-template-columns:1fr;gap:30px}
}

/* ══════════ 8 · SECTION RHYTHM & POLISH ════════════════════════════ */
.section-head{margin-bottom:44px}
.sec-navy .section-head h2,.sec-dark .section-head h2{color:#fff}
.sec-navy .lede,.sec-dark .lede{color:rgba(255,255,255,.62)}
.sec-navy .eyebrow,.sec-dark .eyebrow{color:var(--gold-l)}
.cta-band{position:relative;isolation:isolate;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1.1px,transparent 1.1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 20%,transparent 76%);
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 20%,transparent 76%)}
.cta-band .wrap{position:relative;z-index:1}

/* Card lift, consistent everywhere */
.card{transition:transform var(--easem),box-shadow var(--easem),border-color var(--easem)}
.card:hover{transform:translateY(-5px)}

/* Image fallback tile: the label used to collide with the caption that sat
   on top of it. It now sits centred, at a modest weight, and any element
   layered above it wins. */
.img-fell{display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.34);padding:22px}
.card-img .img-fell,.frame .img-fell,.mck-tile .img-fell{font-size:.64rem}
.hero-visual .img-fell span,.mck-tile .img-fell span{display:none}

/* Floating chrome stack: never let two of these share the same corner. */
.slidein{bottom:96px}
body.ck-open .slidein{bottom:150px}
@media(max-width:1100px){.slidein{display:none}}

/* ══════════ 9 · HOMEPAGE HERO — dark, patterned, panel-led ═════════ */
.hero{
  background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 44%,var(--navy-l) 128%)!important;
  padding-top:calc(var(--hdr-h) + 78px);padding-bottom:clamp(72px,7vw,108px);
  position:relative;isolation:isolate;overflow:hidden;color:rgba(255,255,255,.72)}
.hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--hair-w) 1px,transparent 1px),
    linear-gradient(to bottom,var(--hair-w) 1px,transparent 1px),
    linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 96% 92% at 18% 22%,#000 8%,transparent 74%);
  mask-image:radial-gradient(ellipse 96% 92% at 18% 22%,#000 8%,transparent 74%)}
.hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 66% at 84% 6%,rgba(184,146,58,.22),transparent 62%),
    radial-gradient(ellipse 58% 64% at 2% 96%,rgba(28,84,140,.34),transparent 66%)}
.hero > .wrap{position:relative;z-index:2}
.hero-kick span{color:rgba(255,255,255,.62)}
.hero h1{color:#fff}
.hero h1 em{color:var(--gold-l)}
.hero-sub{color:rgba(255,255,255,.68)}
.hero-proof{border-top-color:var(--hair-w)}
.hero .hp-n{color:#fff}
.hero .hp-l{color:rgba(255,255,255,.5)}
.hero .hp-d{background:var(--hair-w2)}
.hero .btn-o{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.3)}
.hero .btn-o:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.5)}
.hero .btn-p{background:linear-gradient(180deg,var(--gold-l) -50%,var(--gold) 58%);color:var(--navy-d);font-weight:700}
.hero-accent{background:rgba(184,146,58,.10);border-color:rgba(184,146,58,.24)}
.hero-badge{background:rgba(255,255,255,.06);border-color:var(--hair-w2);backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(3,11,22,.4)}
.hero-badge .hb-n{color:var(--gold-l)}
.hero-badge .hb-l{color:rgba(255,255,255,.6)}

@media(max-width:980px){
  .hero-badge{position:static;margin-top:16px;min-width:0}
  .hero-accent{display:none}
}
/* Light logo band sits directly beneath the dark hero. */
.logos-strip{background:var(--white);border-top:none;position:relative;z-index:2}
.logos-label{color:var(--muted)}


/* ══════════ 11 · HERO VISUAL FURNITURE ════════════════════════════ */
.hero-accent{display:none}
.hero-badge{position:static;min-width:0;margin-top:16px;padding:14px 20px;border-radius:16px;
  display:inline-flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--hair-w2);backdrop-filter:blur(14px)}
.hero-badge .hb-n{font-size:1.8rem}
.hero-badge .hb-l{margin-top:0;font-size:.7rem}



/* ══════════ 12 · HERO CONTENT ALIGNMENT ═══════════════════════════
   Item: "middle the entire section contents". Simple heroes centre their
   copy inside the height envelope; heroes that carry a grid keep that grid
   left-aligned so the layout still reads.
════════════════════════════════════════════════════════════════════ */
.phero > .wrap{text-align:center}
.phero > .wrap > h1{max-width:20ch;margin-inline:auto}
.phero > .wrap > .lede{max-width:72ch;margin-inline:auto}
.phero > .wrap > .eyebrow{justify-content:center}
.phero > .wrap > .btns{justify-content:center}
.phero > .wrap > .typenav{justify-content:center}
.phero > .wrap > .ab-grid,.phero > .wrap > .paths,
.phero > .wrap > .hero-det,.phero > .wrap > .det-head{text-align:left}
.crumbbar .wrap{text-align:left}
/* Detail-page heroes carry a two-column layout — keep those left-aligned. */
.phero:has(.hero-det) > .wrap,.phero:has(.det-head) > .wrap{text-align:left}
.phero:has(.hero-det) > .wrap > h1,.phero:has(.det-head) > .wrap > h1{margin-inline:0;max-width:26ch}
.phero:has(.hero-det) > .wrap > .lede,.phero:has(.det-head) > .wrap > .lede{margin-inline:0}

/* Contact "paths" cards, on dark */
.phero .paths{margin-top:38px}
.phero .path-card{background:rgba(255,255,255,.05);border-color:var(--hair-w2);backdrop-filter:blur(10px)}
.phero .path-card:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3)}
.phero .path-card h3{color:#fff}
.phero .path-card p{color:rgba(255,255,255,.6)}
.phero .path-card .ptime{color:var(--gold-l)}
.phero .path-ico{background:rgba(184,146,58,.16);border-color:rgba(184,146,58,.3)}
.phero .path-ico svg{stroke:var(--gold-l)}

/* About hero: the credentials panel that replaced the portrait. */
.ab-grid{align-items:center}
.cred-panel{position:relative;border-radius:24px;padding:28px;
  background:linear-gradient(168deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  border:1px solid var(--hair-w2);backdrop-filter:blur(16px);
  box-shadow:0 30px 70px rgba(3,11,22,.42),inset 0 1px 0 rgba(255,255,255,.12);overflow:hidden}
.cred-panel::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(150deg,#000,transparent 70%);
  mask-image:linear-gradient(150deg,#000,transparent 70%)}
.cred-panel > *{position:relative;z-index:1}
.cp-k{display:block;font-size:.64rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-l);margin-bottom:18px}
.cp-rows{display:flex;flex-direction:column}
.cp-r{display:flex;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--hair-w)}
.cp-r:last-child{border-bottom:none}
.cp-r strong{font-family:var(--serif);font-size:1.6rem;font-weight:600;color:#fff;line-height:1;
  min-width:56px;font-variant-numeric:tabular-nums}
.cp-r span{font-size:.83rem;color:rgba(255,255,255,.62);line-height:1.5}
.cp-foot{display:flex;align-items:center;gap:9px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--hair-w);font-size:.76rem;color:rgba(255,255,255,.6)}
.cp-dot{width:7px;height:7px;border-radius:999px;background:#5FC98E;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(95,201,142,.5);animation:availPulse 2.6s infinite}
@media(prefers-reduced-motion:reduce){.cp-dot{animation:none}}
@media(max-width:900px){.cp-r strong{font-size:1.35rem;min-width:46px}}


/* ══════════ 13 · MONOGRAM AVATAR ══════════════════════════════════ */
.ava-mono{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:999px;flex-shrink:0;
  background:linear-gradient(150deg,var(--navy-l),var(--navy));
  color:var(--gold-l);font-family:var(--serif);font-size:.95rem;font-weight:700;letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.authorbox .ava-mono{width:74px;height:74px;font-size:1.5rem}
.pmeta .ava-mono{width:34px;height:34px;font-size:.74rem}
.ahero .ava-mono{border-color:rgba(255,255,255,.2)}

/* ══════════ 14 · IMAGE FRAMES ═════════════════════════════════════
   Generated artwork is landscape; every frame crops it consistently so no
   card, tile or hero shows a distorted or letterboxed image.
════════════════════════════════════════════════════════════════════ */
.card-img img,.frame img,.mck-tile img,.feat-img img,.hero-photo img,.ab-photo img{
  width:100%;height:100%;object-fit:cover;display:block}
.card-img,.frame{background:var(--navy)}


/* ══════════ 15 · CASE-STUDY & LEGAL HEROES ═══════════════════════
   These carried their own hero rules and so missed the shared envelope.
   They now use the same dark treatment, height envelope and pinned
   breadcrumb bar as every other page.
════════════════════════════════════════════════════════════════════ */
.chero{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(165deg,var(--navy-deep) 0%,var(--navy) 46%,var(--navy-l) 130%)!important;
  padding-top:calc(var(--hdr-h) + 46px)!important;
  padding-bottom:clamp(44px,5vw,72px);
  min-height:var(--hero-min);display:flex;align-items:center}
.chero > .wrap{width:100%;position:static;padding-top:clamp(30px,4vw,52px)}
.chero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--hair-w) 1px,transparent 1px),
    linear-gradient(to bottom,var(--hair-w) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(ellipse 92% 86% at 22% 24%,#000 12%,transparent 76%);
  mask-image:radial-gradient(ellipse 92% 86% at 22% 24%,#000 12%,transparent 76%)}
.chero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 54% 76% at 88% 8%,rgba(184,146,58,.20),transparent 62%),
    radial-gradient(ellipse 60% 70% at 4% 96%,rgba(28,84,140,.30),transparent 66%)}
.chero .eyebrow{color:var(--gold-l)}
.chero .badge{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}

/* One height envelope for every page hero, so navigating between pages
   never feels like the header jumps. */
.phero,.chero,.reslib-hero,.sm-hero{min-height:var(--hero-min)}
/* One source of vertical rhythm: the section clears the header and the
   breadcrumb bar, the wrap adds the content inset. No stacked paddings. */
.phero,.chero,.reslib-hero,.sm-hero{
  padding-top:calc(var(--hdr-h) + 46px)!important;
  padding-bottom:clamp(40px,4.2vw,62px)!important}
.phero > .wrap,.chero > .wrap,.reslib-hero > .wrap,.sm-hero > .wrap{
  padding-top:clamp(32px,3.6vw,50px);padding-bottom:0}


/* ══════════════════════════════════════════════════════════════════════
   v6 · HEADER, PATTERN DISCIPLINE, TYPE SCALE
   The final layer. Three jobs:
     · a sticky header with a solid background at rest and glass on scroll
     · patterns confined to section backgrounds — never on components
     · one type, colour and spacing scale everything else defers to
══════════════════════════════════════════════════════════════════════ */

/* ── 1 · STICKY HEADER ────────────────────────────────────────────────
   Was position:fixed with JavaScript setting `top` to the announcement
   bar's live position. That is what produced the gap while scrolling —
   the JS ran on scroll, so the header always lagged the bar by a frame.
   position:sticky removes the whole class of problem: the bar scrolls
   away in normal flow, the header docks at zero, and no script is
   involved in the positioning at all.
──────────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;left:auto;right:auto;z-index:980;
  background:var(--navy-deep);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.hdr::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(184,146,58,.34),transparent);
  opacity:1;transition:opacity .3s ease}
/* Scrolled: the blurred translucent glass. */
.hdr.up{background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--border);
  box-shadow:0 6px 30px rgba(8,33,60,.08)}
.hdr.up::after{opacity:0}
.ann{position:relative;z-index:981}

/* Type colours per header state */
.hdr .logo-name{color:#fff}
.hdr .logo-sub{color:rgba(255,255,255,.40)}
.hdr .nav-a{color:rgba(255,255,255,.76)}
.hdr .nav-a:hover,.hdr .nav-a.on{color:#fff;background:rgba(255,255,255,.09)}
.hdr .hdr-ico,.hdr .hdr-search{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.8)}
.hdr .hdr-ico:hover,.hdr .hdr-search:hover{background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.34);color:#fff}
.hdr .hdr-search kbd{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.7)}
.hdr .btn-p{background:linear-gradient(180deg,var(--gold-l) -40%,var(--gold) 60%);color:var(--navy-d);
  font-weight:700;box-shadow:0 6px 20px rgba(184,146,58,.26)}
.hdr .burger span{background:#fff}

.hdr.up .logo-name{color:var(--navy)}
.hdr.up .logo-sub{color:var(--light)}
.hdr.up .nav-a{color:var(--muted)}
.hdr.up .nav-a:hover,.hdr.up .nav-a.on{color:var(--navy);background:var(--surface)}
.hdr.up .hdr-ico,.hdr.up .hdr-search{background:var(--white);border-color:var(--border);color:var(--muted)}
.hdr.up .hdr-ico:hover,.hdr.up .hdr-search:hover{border-color:var(--navy);color:var(--navy);background:var(--white)}
.hdr.up .hdr-search kbd{background:var(--surface);border-color:var(--border);color:var(--light)}
.hdr.up .burger span{background:var(--navy)}

/* Wordmark without the glyph */
.logo{gap:0}
.logo-name{font-family:var(--serif);font-size:1.3rem;font-weight:700;letter-spacing:-.022em;line-height:1.05}
.hdr .logo-sub{display:block;font-size:.55rem;letter-spacing:.16em;margin-top:2px}
@media(max-width:1240px){.hdr .logo-sub{display:none}}

/* ── 2 · BREADCRUMB BAR ───────────────────────────────────────────────
   With a sticky header, the hero's top edge IS the header's bottom edge,
   so top:0 puts the bar exactly where the header ends — no offset maths.
──────────────────────────────────────────────────────────────────── */
.crumbbar{top:0}

/* ── 3 · HEROES ───────────────────────────────────────────────────────
   No header offset needed now the header is in flow.
──────────────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(52px,6vw,86px)!important}
.phero,.chero,.reslib-hero,.sm-hero,.ahero{
  padding-top:calc(46px + clamp(30px,3.4vw,48px))!important;
  padding-bottom:clamp(40px,4.2vw,62px)!important}
.phero > .wrap,.chero > .wrap,.reslib-hero > .wrap,.sm-hero > .wrap,.ahero > .wrap{
  padding-top:0}
@media(max-width:900px){
  .phero,.chero,.reslib-hero,.sm-hero,.ahero{padding-top:calc(44px + 30px)!important}
}

/* ── 4 · PATTERN DISCIPLINE ───────────────────────────────────────────
   Patterns belong on section backgrounds. On a card, a tile or a panel
   they compete with the content and read as noise. Every component-level
   pattern is switched off here, in one place, so it cannot creep back.
──────────────────────────────────────────────────────────────────── */
.card,.lane,.tcard,.feat-card,.mck-tile,.fcell,.sm-node,.svc-box,.cm,.gl,
.path-card,.cmp,.aside-cta,.gatecard,.upgrade,.takeaways,.mv-card,.jstep,
.step,.cap,.res-card,.recent-chip,.logo-pill,.rlh-stats,.sm-count,
.ops-panel,.cred-panel,.mck-sub,.slidein,.toast,.cookiebar,.modal-box{
  --pat-line:transparent;--pat-line-strong:transparent;--pat-line-dk:transparent}
.card::before,.lane::before,.tcard::before,.mck-tile::before,.fcell::before,
.sm-node::before,.svc-box::before,.path-card::before,.jstep::before,
.ops-panel::before,.cred-panel::before,.feat-card::before{
  background-image:none!important}
.pat-ticks::before,.pat-ticks::after{display:none}
.surface-tex{background-image:none}
/* Keep the deliberate accents that are not patterns: the brass rule that
   draws in on a lane hover, and the card's own left marker. */
.lane::after,.sm-node::before{background-image:none}
.lane::after{background:linear-gradient(90deg,var(--gold),rgba(192,154,62,0))!important}
.sm-node::before{background:var(--gold)!important}

/* Feature card keeps its dark ground, loses its grid. */
.feat-card{background:linear-gradient(160deg,var(--navy-deep),var(--navy) 70%,var(--navy-l) 150%)}

/* ── 5 · TYPE, COLOUR & SPACING SCALE ─────────────────────────────────
   One scale, applied everywhere, so headings and body copy match across
   pages instead of each template setting its own clamp.
──────────────────────────────────────────────────────────────────── */
:root{
  --t-h1:clamp(2.1rem,3.8vw,3.25rem);
  --t-h2:clamp(1.65rem,2.7vw,2.35rem);
  --t-h3:clamp(1.05rem,1.4vw,1.2rem);
  --t-lede:clamp(1rem,1.15vw,1.14rem);
  --t-body:.95rem;
  --t-small:.82rem;
  --t-micro:.68rem;
  --sec-y:clamp(64px,7vw,104px);
  --sec-y-sm:clamp(48px,5vw,76px);
}
h1,.h1{font-size:var(--t-h1);line-height:1.08;letter-spacing:-.024em}
h2,.h2{font-size:var(--t-h2);line-height:1.14;letter-spacing:-.018em}
h3,.h3{font-size:var(--t-h3);line-height:1.28;letter-spacing:-.008em}
.lede{font-size:var(--t-lede);line-height:1.72}
.sec{padding-block:var(--sec-y)}
.sec-sm{padding-block:var(--sec-y-sm)}
.eyebrow{font-size:var(--t-micro);letter-spacing:.16em}
.badge{font-size:.62rem;letter-spacing:.09em}
.section-head{margin-bottom:clamp(32px,3.6vw,52px)}

/* Buttons: one set of proportions everywhere. */
.btn{border-radius:999px;font-weight:650;letter-spacing:-.003em;min-height:46px;padding:0 26px;font-size:.875rem}
.btn-sm{min-height:38px;padding:0 18px;font-size:.81rem}
.btn-lg{min-height:54px;padding:0 32px;font-size:.94rem}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* Cards: one border, one radius, one lift. */
.card,.tcard,.lane,.fcell,.sm-node,.mv-card,.svc-box,.path-card{
  border-radius:20px;border:1px solid var(--border);background:var(--white);
  transition:transform var(--easem),box-shadow var(--easem),border-color var(--easem)}
.card:hover,.tcard:hover,.lane:hover,.fcell:hover,.sm-node:hover,.mv-card:hover,.path-card:hover{
  transform:translateY(-4px);box-shadow:var(--s3);border-color:#D3DDE7}


/* ── 6 · PATTERN WEIGHT ───────────────────────────────────────────────
   Section patterns are texture, not decoration you notice. Dropped to
   roughly a third of their previous strength and pulled further behind
   the content so nothing has to compete with a visible grid.
──────────────────────────────────────────────────────────────────── */
:root{
  --pat-line:rgba(11,37,64,.030);
  --pat-line-strong:rgba(11,37,64,.045);
  --pat-line-dk:rgba(255,255,255,.028);
  --pat-size:44px;
  --pat-size-lg:110px;
}
.pat-blueprint::before{
  background-image:
    linear-gradient(to right,rgba(11,37,64,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(11,37,64,.05) 1px,transparent 1px),
    linear-gradient(to right,rgba(11,37,64,.022) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(11,37,64,.022) 1px,transparent 1px);
  background-size:150px 150px,150px 150px,30px 30px,30px 30px;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.18) 62%,transparent);
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.18) 62%,transparent)}
.pat-mesh::before{
  background-image:
    repeating-linear-gradient(45deg,rgba(11,37,64,.018) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(-45deg,rgba(11,37,64,.018) 0 1px,transparent 1px 22px)}
.pat-dots::before{background-size:30px 30px}
.pat-diag::before{
  background-image:repeating-linear-gradient(115deg,rgba(11,37,64,.022) 0 1px,transparent 1px 32px)}
.pat-glow-tr::before{background:radial-gradient(ellipse 46% 58% at 88% 4%,rgba(184,146,58,.055),transparent 62%)}
.pat-glow-bl::before{background:radial-gradient(ellipse 42% 54% at 6% 96%,rgba(11,37,64,.035),transparent 62%)}
.pat-grid.pat-glow-tr::after,.pat-grid-lg.pat-glow-tr::after,.pat-dots.pat-glow-tr::after{
  background:radial-gradient(ellipse 46% 58% at 88% 4%,rgba(184,146,58,.06),transparent 62%)}
.rule-node::after{opacity:.8}

/* Hero headline: a comfortable measure rather than a narrow column. */
.phero > .wrap > h1{max-width:24ch}
.reslib-hero h1,.sm-hero h1{max-width:26ch}


/* ── 7 · STICKY STACKING ──────────────────────────────────────────────
   Sub-navigation bars used to carry hand-tuned pixel offsets that assumed
   a fixed header. They now all key off --hdr-h, so they dock directly
   beneath the header at any size and can never overlap it.
──────────────────────────────────────────────────────────────────── */
/* Nothing floats below the header: the sticky sub-menus are gone. The
   filter bars and the sitemap jump nav remain, in normal document flow. */
.quicknav{display:none!important}
.filterbar,.sm-jump{position:static!important;top:auto!important;backdrop-filter:none!important}
.toc,.aside-r,.det-side,.tier-side{top:calc(var(--hdr-h) + 28px)!important}
.lp-nav{top:var(--hdr-h)!important}
/* Anchor targets clear the header plus any sub-bar above them. */
[id]{scroll-margin-top:calc(var(--hdr-h) + 64px)}



/* ── 8 · CAPABILITY GRID ──────────────────────────────────────────── */
.capgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cap{background:var(--white);border:1px solid var(--border);border-radius:20px;
  padding:30px 28px 26px;display:flex;flex-direction:column;gap:14px}
.cap h3{font-size:1.04rem;line-height:1.3;margin:0}
.cap p{font-size:.855rem;color:var(--muted);line-height:1.62;flex:1;margin:0}
.cap .arr{font-size:.8rem;margin-top:2px}
.capfoot{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-top:22px;padding:30px 34px;border-radius:22px;
  background:linear-gradient(160deg,var(--navy-deep),var(--navy) 70%,var(--navy-l) 165%);
  color:rgba(255,255,255,.72)}
.capfoot-t{flex:1;min-width:280px}
.capfoot h3{color:#fff;font-family:var(--serif);font-size:1.3rem;margin:0 0 8px}
.capfoot p{font-size:.88rem;color:rgba(255,255,255,.62);margin:0;max-width:62ch;line-height:1.62}
.capfoot .btn-o{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28)}
.capfoot .btn-o:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.5)}
.capfoot .btn-p{background:linear-gradient(180deg,var(--gold-l) -50%,var(--gold) 58%);color:var(--navy-d);font-weight:700}
@media(max-width:1080px){.capgrid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.capgrid{grid-template-columns:1fr}.capfoot{padding:26px 22px}}


/* ── 9 · HERO PORTRAIT ────────────────────────────────────────────────
   The portrait is back, with a score card overlapping it so the proof sits
   beside the person rather than replacing them.
──────────────────────────────────────────────────────────────────── */
.hero-visual{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.hero-photo{position:relative;margin:0;width:100%;aspect-ratio:4/5;max-height:560px;
  border-radius:24px;overflow:hidden;background:var(--navy);
  box-shadow:0 34px 80px rgba(3,11,22,.5);border:1px solid var(--hair-w2)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 42%,rgba(4,14,26,.78) 100%)}
.hero-caption{position:absolute;left:24px;bottom:22px;z-index:2;color:#fff;margin:0}
.hero-caption strong{font-family:var(--serif);font-size:1.08rem;display:block;line-height:1.2}
.hero-caption span{font-size:.74rem;color:rgba(255,255,255,.66)}

.hero-score{position:absolute;right:-26px;bottom:64px;z-index:3;width:246px;
  background:rgba(9,26,46,.9);border:1px solid var(--hair-w2);border-radius:18px;padding:18px 20px;
  backdrop-filter:blur(20px);box-shadow:0 22px 54px rgba(3,11,22,.5)}
.hs-k{display:block;font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-l);margin-bottom:13px}
.hs-row{display:flex;align-items:center;gap:14px}
.hs-ring{position:relative;width:56px;height:56px;flex-shrink:0;border-radius:999px;display:grid;place-items:center;
  background:conic-gradient(var(--gold) calc(var(--pct) * 1%),rgba(255,255,255,.11) 0)}
.hs-ring::after{content:'';position:absolute;inset:6px;border-radius:999px;background:#0A2038}
.hs-ring span{position:relative;z-index:1;font-family:var(--serif);font-size:1.15rem;font-weight:600;color:#fff}
.hs-t strong{display:block;font-size:.9rem;color:#fff;line-height:1.25}
.hs-t span{font-size:.72rem;color:rgba(255,255,255,.55)}
.hs-lnk{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--hair-w);width:100%;font-size:.76rem;font-weight:600;color:var(--gold-l)}
.hs-lnk:hover{color:#fff}

@media(max-width:1180px){.hero-score{right:-10px;width:224px}}
@media(max-width:980px){
  .hero-photo{aspect-ratio:16/11;max-height:380px}
  .hero-photo img{object-position:50% 28%}
  .hero-score{position:static;width:100%;margin-top:14px}
  .hero-badge{margin-top:12px}
}


/* ── 10 · ABOUT PORTRAIT ─────────────────────────────────────────── */
.ab-frame{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/5;max-height:520px;
  background:var(--navy);border:1px solid var(--hair-w2);box-shadow:0 30px 70px rgba(3,11,22,.45)}
.ab-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.ab-frame::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(4,14,26,.8) 100%)}
.ab-frame figcaption{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff}
.ab-frame figcaption strong{display:block;font-family:var(--serif);font-size:1.05rem;line-height:1.2}
.ab-frame figcaption span{font-size:.74rem;color:rgba(255,255,255,.66)}
.ab-record{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:14px;
  background:var(--hair-w);border:1px solid var(--hair-w2);border-radius:16px;overflow:hidden}
.abr{background:rgba(255,255,255,.045);padding:14px 12px;text-align:center;backdrop-filter:blur(8px)}
.abr strong{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--gold-l);line-height:1}
.abr span{display:block;font-size:.68rem;color:rgba(255,255,255,.55);margin-top:5px;line-height:1.3}
@media(max-width:900px){.ab-frame{aspect-ratio:16/11;max-height:340px}}


/* ── 11 · FOOTER, TRIMMED ─────────────────────────────────────────────
   Was carrying a full site index and three paragraphs of prose. It is
   navigation now: five columns, short labels, and the complete index left
   where it belongs — on the sitemap page, which this links to twice.
──────────────────────────────────────────────────────────────────── */
.ft-cta{padding-block:34px}
.ft-cta h3{font-size:clamp(1.24rem,2vw,1.55rem)}
.ft-cta p{font-size:.86rem;margin-top:6px;max-width:56ch}
.ft-top{grid-template-columns:1.55fr .85fr .85fr .8fr 1.05fr;gap:34px;padding-block:46px 34px}
.ft-brand p{font-size:.83rem;max-width:32ch;margin-top:14px}
.ft-brand .ft-social{margin-top:18px}
.ft-col h5{margin-bottom:14px}
.ft-col a{font-size:.83rem;margin-bottom:9px}
.ft-nlcol p{font-size:.8rem;color:rgba(255,255,255,.46);line-height:1.55;margin-bottom:0}
.ft-nlcol .ft-nl{margin-top:12px}
.ft-meta{margin-top:16px;gap:6px}
.ft-meta a,.ft-meta span{font-size:.78rem}
.ft-soc{width:34px;height:34px;border-radius:10px}
.ft-soc svg{width:15px;height:15px}
.ft-bot{padding-block:20px;padding-right:64px;font-size:.74rem}
.ft-legal{gap:16px}
@media(max-width:1100px){
  .ft-top{grid-template-columns:1fr 1fr 1fr;gap:30px}
  .ft-brand{grid-column:1/-1}
  .ft-nlcol{grid-column:1/-1;max-width:420px}
}
@media(max-width:620px){
  .ft-top{grid-template-columns:1fr 1fr}
  .ft-nlcol{grid-column:1/-1}
}


/* ── 12 · IMAGE BANDS & CARD MEDIA ────────────────────────────────────
   The site is media-led: a full-bleed band between major sections, and a
   photograph on the cards that carry one. Every frame crops consistently.
──────────────────────────────────────────────────────────────────── */
.sec-band{position:relative;margin:0;overflow:hidden;background:var(--navy)}
.sec-band img{width:100%;height:clamp(240px,32vw,430px);object-fit:cover;display:block}
.sec-band figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:56px var(--gut) 24px;color:rgba(255,255,255,.86);font-size:.86rem;
  background:linear-gradient(180deg,transparent,rgba(4,14,26,.86))}
.sec-band figcaption > span{display:block;max-width:min(70ch,var(--maxw,1240px));margin-inline:auto}
.sec-band.tall img{height:clamp(300px,40vw,540px)}

/* The image bleeds to the card's edges: the inset matches .eng-card padding. */
.eng-img{margin:-40px -40px 22px;
  overflow:hidden;background:var(--navy)}
.eng-img img{width:100%;height:210px;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.eng-card:hover .eng-img img{transform:scale(1.04)}
.eng-card{overflow:hidden}

/* Two-up media rows used on detail pages */
.media-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:36px 0}
.media-2 figure{margin:0}
.media-2 .frame{aspect-ratio:4/3}
.media-2 figcaption{font-size:.76rem;color:var(--light);margin-top:9px;font-style:italic}

/* A short strip of supporting images */
.media-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.media-strip .frame{aspect-ratio:1/1;border-radius:14px}
@media(max-width:900px){
  .media-2{grid-template-columns:1fr}
  .media-strip{grid-template-columns:1fr 1fr}
  .eng-img img{height:180px}
}


/* Process steps carry a photograph above the number. */
.proc-img{margin:-26px -26px 18px;overflow:hidden;border-radius:18px 18px 0 0;background:var(--navy)}
.proc-img img{width:100%;height:150px;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.proc-step:hover .proc-img img{transform:scale(1.05)}
.proc-step{overflow:hidden;background:var(--white);border:1px solid var(--border);border-radius:18px;padding:26px}
@media(max-width:900px){.proc-img img{height:130px}}


/* ══════════════════════════════════════════════════════════════════════
   v8 · LIGHT REBRAND — the final word on colour and surface
   Built from the client's own brand assets, not a guessed palette:
     · logo blue  #1470B8 and its family, sampled from the supplied banner
     · logo yellow #F5A800 / #FAC850, sampled the same way
     · faint white matte grounds — no dark heroes, no dark footer
     · the crisscross grid patterns removed entirely
══════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────
   Every earlier layer keys off these names, so redefining them recolours
   the whole system in one place. "navy" now reads as deep brand-blue ink;
   "gold" is the logo's yellow; grounds are Apple-adjacent matte whites. */
:root{
  --navy:#12385C;            /* deep blue ink — headings, primary buttons */
  --navy-d:#0C2A47;
  --navy-l:#1470B8;          /* THE logo blue — links, accents, focus */
  --navy-deep:#0C2A47;
  --brand:#1470B8;
  --brand-sky:#7EBEF5;
  --gold:#E89B00;            /* logo yellow, darkened for contrast on white */
  --gold-l:#FAC850;          /* the sampled banner yellow */
  --gold-s:rgba(245,168,0,.10);
  --ink:#1A2530; --muted:#4E5D6C; --light:#87939F;
  --white:#FFFFFF;
  --off:#F5F6F8;             /* the faint white matte ground */
  --surface:#F0F2F5; --surface-2:#E9ECF0;
  --border:#E2E6EA; --border-l:#EEF1F4;
  --green:#1E7A4E; --green-s:#EAF6EF;
  --ink-dk:#0C2A47; --hair-w:rgba(255,255,255,.12); --hair-w2:rgba(255,255,255,.2);
  --s1:0 1px 2px rgba(18,42,66,.05),0 1px 8px rgba(18,42,66,.04);
  --s2:0 4px 16px rgba(18,42,66,.07);
  --s3:0 12px 36px rgba(18,42,66,.09);
  --sH:0 20px 52px rgba(18,42,66,.13);
}
body{background:var(--off);color:var(--ink)}

/* ── 2 · PATTERNS: GONE ─────────────────────────────────────────────
   The client is right that the graph-paper crisscross reads as noise.
   Every pattern pseudo-element is switched off at the source; the classes
   stay in the markup but paint nothing. */
.pat-grid::before,.pat-grid-lg::before,.pat-dots::before,.pat-diag::before,
.pat-grid-dk::before,.pat-glow-tr::before,.pat-glow-bl::before,
.pat-blueprint::before,.pat-mesh::before,.pat-dk-mesh::before,.pat-dk-dots::before,
.pat-grid.pat-glow-tr::after,.pat-grid-lg.pat-glow-tr::after,
.pat-dots.pat-glow-tr::after,.pat-grid-dk.pat-glow-tr::after{
  content:none!important;background:none!important;background-image:none!important}
.footer::before,.cta-band::before{content:none!important}
/* Heroes drop their grid-and-glow layers and instead carry the client's own
   triangle banner, faint, fading into the matte ground. Their pseudo-
   elements are redefined below rather than removed. */
:root{--banner-url:url('/wp-content/uploads/2026/09/Copy-of-holiday-markinly-banner.png')}
.hero::before,.phero::before,.chero::before,.reslib-hero::before,
.sm-hero::before,.ahero::before{
  content:''!important;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--banner-url) repeat top left / 1100px auto!important;
  opacity:.32;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.4) 58%,transparent 94%)!important;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.4) 58%,transparent 94%)!important}
.hero::after,.phero::after,.chero::after,.reslib-hero::after,
.sm-hero::after,.ahero::after{
  content:''!important;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(245,246,248,.2) 0%,rgba(245,246,248,.66) 60%,var(--off) 100%)!important;
  -webkit-mask-image:none!important;mask-image:none!important}
.hero > .wrap{position:relative;z-index:2}
/* The Resources area carries the brand visual larger and stronger — the
   library is the page the client most wants branded. */
.rl-hero::before,.reslib-hero::before{opacity:.5!important;background-size:1400px auto!important}
/* The interior heroes keep a static wrap (the breadcrumb bar anchors to the
   section) — their children already carry position:relative from the v5
   layer, so raising their z-index puts content above both banner layers. */
.phero > .wrap > *,.chero > .wrap > *,.reslib-hero > .wrap > *,
.sm-hero > .wrap > *,.ahero > .wrap > *{z-index:3}
.rule-node{background:var(--border)}
.seam-top::after{content:none!important}

/* ── 3 · SURFACES: FAINT WHITE MATTE ────────────────────────────────
   Two grounds only — white and the faint matte — alternating by section,
   separated by hairlines. Nothing else. */
.sec,.sec-sm{background:transparent}
.sec-off,.sec-surface,.rl-index{background:var(--white);border-block:1px solid var(--border-l)}
.logos-strip{background:var(--white);border-block:1px solid var(--border-l)}
/* Client logo pills carry the client's real logo files; the monogram and
   name inside each pill are the fallback and stay hidden while the image
   loads successfully. */
.logo-pill.lp-img{padding:10px 24px}
.logo-pill.lp-img .lp-m,.logo-pill.lp-img .lp-t{display:none}
.logo-pill img{height:38px;width:auto;max-width:150px;object-fit:contain;display:block}
@media(max-width:520px){.logo-pill img{height:30px;max-width:116px}}

/* ── 4 · LIGHT HEROES with the brand banner as a faint backdrop ─────
   The client supplied their triangle banner for exactly this. It sits at
   low opacity behind the hero copy, fading out to the matte ground. */
.hero,.phero,.chero,.reslib-hero,.sm-hero,.ahero{
  background:var(--off)!important;
  color:var(--ink);isolation:isolate}

.hero h1,.phero h1,.chero h1,.reslib-hero h1,.sm-hero h1,.ahero h1{color:var(--navy)}
.hero h1 em,.phero h1 em,.reslib-hero h1 em,.sm-hero h1 em{color:var(--brand);font-style:italic}
.hero-sub,.hero .hero-sub{color:var(--muted)}
.phero .lede,.reslib-hero .lede,.sm-hero .lede,.ahero .lede,.chero .dek,.ahero .dek{color:var(--muted)}
.phero .eyebrow,.reslib-hero .eyebrow,.sm-hero .eyebrow,.ahero .eyebrow,.chero .eyebrow{color:var(--brand)}
.eyebrow{color:var(--brand)}
.eyebrow::before{background:var(--gold-l)}
.hero-kick span{color:var(--muted)}
.hero-kick::before{background:var(--gold-l)}
.hero .hp-n{color:var(--navy)} .hero .hp-l{color:var(--muted)} .hero .hp-d{background:var(--border)}
.hero-proof{border-top-color:var(--border)}
.phero .btn-o,.reslib-hero .btn-o,.sm-hero .btn-o,.hero .btn-o{
  background:var(--white);color:var(--navy);border-color:var(--border)}
.phero .btn-o:hover,.reslib-hero .btn-o:hover,.sm-hero .btn-o:hover,.hero .btn-o:hover{
  border-color:var(--brand);color:var(--brand);background:var(--white)}
.phero .btn-p,.reslib-hero .btn-p,.sm-hero .btn-p,.hero .btn-p{
  background:var(--brand);color:#fff;font-weight:650;box-shadow:0 6px 18px rgba(20,112,184,.24)}
.phero .badge,.chero .badge{background:var(--white);border-color:var(--border);color:var(--muted)}
.phero .typenav a{background:var(--white);border-color:var(--border);color:var(--muted)}
.phero .typenav a:hover{border-color:var(--brand);color:var(--brand)}
.phero .typenav a.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* Hero furniture on light ground */
.hero-photo,.ab-frame{border-color:var(--border);box-shadow:var(--s3)}
.hero-score{background:var(--white);border:1px solid var(--border);box-shadow:var(--s3);backdrop-filter:none}
.hs-k{color:var(--brand)}
.hs-ring{background:conic-gradient(var(--brand) calc(var(--pct) * 1%),var(--surface-2) 0)}
.hs-ring::after{background:var(--white)}
.hs-ring span{color:var(--navy)}
.hs-t strong{color:var(--navy)} .hs-t span{color:var(--light)}
.hs-lnk{border-top-color:var(--border-l);color:var(--brand)}
.hs-lnk:hover{color:var(--navy-d)}
.hero-badge{background:var(--white);border:1px solid var(--border);backdrop-filter:none;box-shadow:var(--s1)}
.hero-badge .hb-n{color:var(--brand)} .hero-badge .hb-l{color:var(--muted)}
.ab-record{background:var(--border);border-color:var(--border)}
.abr{background:var(--white);backdrop-filter:none}
.abr strong{color:var(--brand)} .abr span{color:var(--muted)}
.rlh-stats{background:var(--white);border-color:var(--border);box-shadow:var(--s1);backdrop-filter:none}
.rlh-stat{border-bottom-color:var(--border-l)}
.rlh-stat:hover{background:var(--off)}
.rlh-stat strong{color:var(--brand)} .rlh-stat span{color:var(--ink)} .rlh-stat::after{color:var(--light)}
.sm-count{background:var(--border);border-color:var(--border)}
.sm-count div{background:var(--white);backdrop-filter:none}
.sm-count strong{color:var(--navy)} .sm-count span{color:var(--light)}
.rl-search input{background:var(--white);border-color:var(--border);color:var(--ink);box-shadow:var(--s1)}
.rl-search input::placeholder{color:var(--light)}
.rl-search input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(20,112,184,.12)}
.rl-search .ico{color:var(--light)}
.rl-search kbd{color:var(--light);border-color:var(--border)}
.rl-count{background:var(--white);border-color:var(--border);color:var(--muted)}
.rl-count:hover{border-color:var(--brand);color:var(--brand);background:var(--white)}
.rl-count b{color:var(--brand)} .rl-count .ico{color:var(--gold)}
.cred-panel{display:none}

/* Breadcrumb bar on light */
.crumbbar{background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border-bottom-color:var(--border-l)}
.crumbbar .crumb{color:var(--light)}
.crumbbar .crumb a{color:var(--muted)} .crumbbar .crumb a:hover{color:var(--brand)}
.crumbbar .crumb strong,.crumbbar .crumb span:last-child{color:var(--navy)!important}
.crumbbar .crumb span{color:var(--border)}

/* ── 5 · HEADER: WHITE, ALWAYS ──────────────────────────────────────
   Solid white at rest, translucent glass when scrolled. Dark type in
   both states — the light heroes make the old inverted state pointless. */
.hdr{background:var(--white);border-bottom:1px solid var(--border-l)}
.hdr::after{content:none}
.hdr .logo-name,.hdr.up .logo-name{color:var(--navy)}
.hdr .logo-sub,.hdr.up .logo-sub{color:var(--light)}
.hdr .nav-a,.hdr.up .nav-a{color:var(--muted)}
.hdr .nav-a:hover,.hdr .nav-a.on,.hdr.up .nav-a:hover,.hdr.up .nav-a.on{
  color:var(--brand);background:rgba(20,112,184,.07)}
.hdr .hdr-ico,.hdr .hdr-search,.hdr.up .hdr-ico,.hdr.up .hdr-search{
  background:var(--white);border-color:var(--border);color:var(--muted)}
.hdr .hdr-ico:hover,.hdr .hdr-search:hover,.hdr.up .hdr-ico:hover,.hdr.up .hdr-search:hover{
  border-color:var(--brand);color:var(--brand);background:var(--white)}
.hdr .hdr-search kbd,.hdr.up .hdr-search kbd{background:var(--off);border-color:var(--border);color:var(--light)}
/* The header CTA carries the logo's yellow — the one place the accent is
   always on screen — while body primaries stay brand blue. Both header
   states share it, including the stale :not(.up) rule from the dark era. */
.hdr .btn-p,.hdr.up .btn-p,.hdr:not(.up) .btn-p{
  background:linear-gradient(180deg,var(--gold-l) -30%,#F0A800 70%);color:#3A2A00;font-weight:700;
  box-shadow:0 4px 14px rgba(240,168,0,.3)}
.hdr .btn-p:hover,.hdr:not(.up) .btn-p:hover{filter:brightness(1.05);transform:translateY(-1px)}
.hdr .burger span,.hdr.up .burger span,.hdr:not(.up) .burger span{background:var(--navy)}
.hdr.up{background:rgba(255,255,255,.82)}
/* Header logo image — sized intrinsically in the v12 brand layer. The
   old fixed height + object-fit:contain is deliberately gone: forcing a
   height into a capped box is what letterboxed the mark and left white
   space around it. */

/* Announcement bar: deep brand blue with the yellow badge */
.ann{background:var(--navy-d)}
.ann-badge{background:var(--gold-l);color:var(--navy-d)}
.ann-lnk{color:var(--gold-l)}

/* ── 6 · BUTTONS & CONTROLS IN BRAND COLOUR ─────────────────────────*/
.btn-p{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(20,112,184,.22)}
.btn-p:hover{background:#1160A0;box-shadow:0 6px 20px rgba(20,112,184,.3);transform:translateY(-1px)}
.btn-g{background:linear-gradient(180deg,var(--gold-l) -30%,#F0A800 70%);color:#3A2A00;font-weight:700;
  box-shadow:0 4px 14px rgba(240,168,0,.28)}
.btn-g:hover{filter:brightness(1.05)}
.btn-o{background:var(--white);color:var(--navy);border:1.5px solid var(--border)}
.btn-o:hover{border-color:var(--brand);color:var(--brand)}
.btn-ow{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
a{color:var(--brand)}
.arr{color:var(--navy)} .arr:hover{color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand)}
.idx-filter button.on{background:var(--brand);border-color:var(--brand)}
.tcar-dot.on{background:var(--brand)}
.ico-box{background:rgba(20,112,184,.08);border-color:rgba(20,112,184,.18);color:var(--brand)}
.card:hover .ico-box,.cap:hover .ico-box,.lane:hover .ico-box,.svc-box:hover .ico-box{
  background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}
.ico-box.dk{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.ico-inline{color:var(--brand)}
.sn-tag{color:var(--navy)}
.lane::after{background:linear-gradient(90deg,var(--brand),rgba(20,112,184,0))!important}
.sm-node::before{background:var(--brand)!important}
.tc-n,.lane-n,.cap-n{color:var(--brand)}
.step-n,.js-n{color:var(--brand)}
.op-pill{color:var(--green)}
.prose a{color:var(--brand);border-bottom-color:var(--gold-l)}
.pull{border-left-color:var(--gold-l);color:var(--navy)}
.toc a.on{border-left-color:var(--brand);color:var(--brand)}
.legal ul li::before{background:var(--gold)}
.upgrade{background:linear-gradient(135deg,var(--navy-d),#155081)}
.takeaways h4{color:var(--green)}

/* ── 7 · REMAINING DARK BANDS → BRAND BLUE, USED SPARINGLY ──────────
   One deep-blue accent band per page is plenty. Everything else is light. */
.sec-navy,.sec-dark{background:linear-gradient(160deg,#0C2A47,#12385C 55%,#155081 140%);color:rgba(255,255,255,.78)}
.cta-band{background:linear-gradient(160deg,#0C2A47,#12385C 55%,#155081 140%)}
.capfoot{background:linear-gradient(160deg,#0C2A47,#12385C 60%,#155081 150%)}
.capfoot .btn-p{background:var(--gold-l);color:#3A2A00;font-weight:700}
.feat-card,.rl-lead{background:linear-gradient(158deg,#0C2A47,#12385C 62%,#155081 150%);border-color:#1B4A73}
.rl-lead .rl-meta{border-top-color:rgba(255,255,255,.14)}
.rl-lead .arr,.feat-card .arr{color:var(--gold-l)}
.rl-lead .arr .ico,.feat-card .arr .ico{stroke:var(--gold-l)}
.mck,.mck-tile{background-color:transparent}
section.mck{background:linear-gradient(168deg,#0C2A47,#113A61 60%,#155081 150%)}
.mck-sub{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.mck-subrow button{background:var(--gold-l)} .mck-subrow button svg{stroke:#3A2A00}
.lm-head{background:linear-gradient(160deg,#0C2A47,#12385C)}
.footer{background:var(--surface);color:var(--muted)}

/* ── 8 · LIGHT FOOTER ───────────────────────────────────────────────*/
.footer .wrap{position:relative}
.ft-cta{border-bottom-color:var(--border)}
.ft-cta h3{color:var(--navy)}
.ft-cta p{color:var(--muted)}
.ft-cta .btn-ow{background:var(--white);color:var(--navy);border-color:var(--border)}
.ft-cta .btn-ow:hover{border-color:var(--brand);color:var(--brand)}
.ft-brand .logo-name{color:var(--navy)} .ft-brand .logo-sub{color:var(--light)}
.ft-brand p{color:var(--muted)}
.ft-col h5{color:var(--light)}
.ft-col a{color:var(--muted)}
.ft-col a:hover{color:var(--brand)}
.ft-nlcol p{color:var(--muted)}
.ft-nl input{background:var(--white);border:1px solid var(--border);color:var(--ink)}
.ft-nl input::placeholder{color:var(--light)}
.ft-nl button{background:var(--brand);color:#fff}
.ft-soc{background:var(--white);border-color:var(--border)}
.ft-soc svg{fill:var(--muted)}
.ft-soc:hover{background:var(--brand);border-color:var(--brand)}
.ft-soc:hover svg{fill:#fff}
.ft-meta a,.ft-meta span{color:var(--muted)}
.ft-meta a:hover{color:var(--brand)}
.ft-meta svg{stroke:var(--brand)}
.ft-bot{border-top-color:var(--border);color:var(--light)}
.ft-legal a{color:var(--light)} .ft-legal a:hover{color:var(--brand)}
.ft-logo-sq{height:44px;width:44px;margin-bottom:6px}

/* Gauges, rings, misc accents */
.gauge-fg,.gauge .fg{stroke:var(--brand)!important}
.availPulse,.avail .dot{background:var(--green)}
.op-dot,.cp-dot{background:var(--green)}
.badge{background:var(--white)}
.logos-label{color:var(--light)}
.mcta{background:rgba(255,255,255,.94);border-top:1px solid var(--border)}
.cookiebar{background:var(--navy-d)}
.btt{background:var(--white);border:1px solid var(--border)}
.btt svg{stroke:var(--navy)}
.slidein,.toast{border-color:var(--border)}
.tcar-arrow{border-color:var(--border)}
.q-bar i{background:var(--brand)}
.quiz-progress .on{background:var(--brand)}

/* ── 9 · MOBILE-FIRST SPACING ───────────────────────────────────────
   Phones get their own rhythm rather than a scaled-down desktop:
   tighter section padding, full-width buttons, calmer type. */
@media(max-width:700px){
  :root{--sec-y:56px;--sec-y-sm:42px;--gut:18px}
  h1,.h1{font-size:clamp(1.85rem,7.8vw,2.3rem)}
  h2,.h2{font-size:clamp(1.45rem,6vw,1.8rem)}
  .lede{font-size:.96rem;line-height:1.66}
  .hero{padding-top:36px!important;padding-bottom:44px!important}
  .phero,.chero,.reslib-hero,.sm-hero,.ahero{
    padding-top:74px!important;padding-bottom:36px!important;min-height:0}
  .crumbbar .wrap{min-height:38px}
  .btns .btn{flex:1 1 auto;justify-content:center;min-width:0}
  .hero-proof{gap:0;justify-content:space-between}
  .hp-n{font-size:1.4rem}
  .hp-l{font-size:.68rem}
  .section-head{margin-bottom:26px}
  .card-bd{padding:16px 16px 18px}
  .capfoot{flex-direction:column;align-items:stretch;text-align:left}
  .ft-cta .btns{width:100%}
  .sec-band img{height:190px}
  .sec-band figcaption{padding:34px var(--gut) 16px;font-size:.78rem}
  .shelf-hd{gap:10px}
  .shelf-hd p{display:none}
  .idx-row{padding:13px 16px}
  .rl-counts{gap:6px}
  .rl-count{padding:8px 13px;font-size:.75rem}
  .footer{padding-bottom:84px}   /* clear the sticky mobile CTA */
}
@media(max-width:430px){
  .logos-row{gap:8px}
  .logo-pill{padding:9px 14px;font-size:.78rem}
  .btn-lg{min-height:50px;font-size:.9rem}
  .mcta{padding:10px 14px}
  .mcta .btn{font-size:.8rem;padding:0 14px}
}


/* ══════════ V6 — v12 BRAND SYSTEM (final override) ══════════ */

/* ══════════════════════════════════════════════════════════════════
   v12 · BRAND SYSTEM — logo inks + near-black + light neutrals only
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────
   --navy is remapped to near-black: every heading, border and control
   that referenced it through nine earlier layers now renders in the
   approved neutral without touching a single one of those rules. */
:root{
  --brand:#1070B6;          /* logo blue — sampled */
  --brand-d:#0C5488;        /* the same blue, darker: hover / active */
  --brand-l:#4E9BD4;
  --brand-s:rgba(16,112,182,.07);
  --brand-b:rgba(16,112,182,.20);
  --gold:#EAAF33;           /* logo gold — sampled */
  --gold-d:#B8851C;         /* gold dark enough for text on white */
  --gold-l:#F4D488;
  --gold-s:rgba(234,175,51,.13);

  --ink:#15191E;            /* near-black: body copy */
  --navy:#12161B;           /* near-black: headings (token kept for reuse) */
  --navy-d:#0A0D11;
  --navy-l:#2B323A;
  --navy-deep:#0A0D11;
  --navy-t:rgba(18,22,27,.06);
  --muted:#535C66;
  --light:#7E8892;

  --white:#FFFFFF;
  --off:#FAFBFC;            /* off-white */
  --surface:#F4F6F8;        /* light neutral */
  --surface-2:#E9EDF1;
  --border:#E2E7EC;
  --border-l:#EDF1F4;
  --green:#1C7A47;
}
body{background:var(--white);color:var(--ink)}

/* ── 2 · HEADER LOGO ────────────────────────────────────────────────
   Sized intrinsically. width and height stay `auto`, so the browser
   renders the file at its own aspect ratio and the two max-* caps
   simply bound it — no fixed frame, no object-fit letterboxing, no
   stretching, whatever proportions the supplied file turns out to
   have. The anchor shrink-wraps the image, so no container whitespace
   is left around it. Height is a variable: Appearance → Customize →
   Markinly → Header logo height tunes it without touching CSS. */
:root{--logo-h:54px}
.hdr .logo,.logo{padding:0;line-height:0;gap:0;flex-shrink:0}
.logo-img{
  display:block;
  width:auto!important;
  height:auto!important;
  max-height:var(--logo-h);
  max-width:min(48vw,300px);
  /* no object-fit: with auto dimensions the box IS the image's own ratio */
  object-position:left center;
  image-rendering:auto}
.hdr-in{align-items:center}
.hdr .logo{display:inline-flex;align-items:center}
@media(max-width:1100px){:root{--logo-h:48px}}
@media(max-width:600px){:root{--logo-h:42px}.logo-img{max-width:56vw}}
/* The wordmark fallback only appears if the file fails to load. */
.logo>div{line-height:1.1}

/* Footer brand mark — same intrinsic treatment, no fixed square. */
.ft-logo-sq{
  width:auto!important;height:auto!important;
  max-height:58px;max-width:190px;margin-bottom:10px;display:block}

/* ── 3 · CLIENT / PARTNER LOGOS ─────────────────────────────────────
   No boxes: the marks sit directly on the light ground.

   Alignment is the point here. Every logo occupies a cell of identical
   height and identical width, and is centred in it both ways — so the
   marks share one horizontal centre line and sit on an even rhythm
   across the row, however different their shapes are. Inside that cell
   the image is still bounded rather than forced: `width` and `height`
   stay auto, so nothing is ever stretched to fill the cell.

   Optical sizing then does the last bit by hand-eye rules: a square
   badge at the same pixel height as a long wordmark always looks
   bigger, so squarish marks are given slightly less height and very
   wide ones slightly more. The class comes from the file's real
   proportions, measured in the browser after it loads. */
.logos-strip{background:var(--white);border-block:1px solid var(--border-l);padding-block:56px}
.logos-label{color:var(--light);letter-spacing:.14em;margin-bottom:38px}
/* A grid, not a wrapping flex row: with a fixed column count the marks
   line up in columns as well as rows, so the block is aligned in both
   directions however many logos there are. Eight divides evenly by four
   and by two, so no row is ever left short. */
.logos-row{display:grid!important;grid-template-columns:repeat(4,1fr);
  gap:30px 24px;max-width:1080px;margin-inline:auto;
  justify-items:center;align-items:center;--cell-h:74px}
.logo-pill,.logo-pill.lp-img{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;height:var(--cell-h);
  background:none!important;border:none!important;box-shadow:none!important;
  border-radius:0;padding:0;min-height:0;transform:none}
.logo-pill:hover{transform:none;box-shadow:none!important}
.logo-pill img{
  display:block;
  width:auto!important;height:auto!important;
  max-height:74%;max-width:86%;
  opacity:.88;transition:opacity var(--ease)}
.logo-pill:hover img{opacity:1}
/* Optical correction from each file's real proportions: a square badge
   at the same height as a long wordmark always reads larger. */
.logo-pill.lg-square img{max-height:60%;max-width:60%}
.logo-pill.lg-tall   img{max-height:56%;max-width:50%}
.logo-pill.lg-wide   img{max-height:82%;max-width:100%}
/* Text fallback, shown only when a logo file fails to load. */
.logo-pill:not(.lp-img){gap:9px;color:var(--muted);font-size:.84rem;font-weight:600;
  letter-spacing:.01em;text-transform:none;line-height:1.25}
.logo-pill:not(.lp-img) .lp-m{width:25px;height:25px;border-radius:7px;flex-shrink:0;
  display:grid;place-items:center;font-size:.6rem;font-weight:800;color:#fff}
.logo-pill:not(.lp-img) .lp-t{display:inline}
/* The marquee is gone: a static, evenly spaced grid reads calmer and
   lets every mark be seen at full size. */
.mk-marquee{display:grid!important;animation:none!important}
.mk-track{display:contents!important;animation:none!important}
@media(max-width:1000px){
  .logos-row{grid-template-columns:repeat(3,1fr);gap:26px 18px;--cell-h:64px}
}
@media(max-width:700px){
  .logos-strip{padding-block:40px}
  .logos-row{grid-template-columns:repeat(2,1fr);gap:22px 14px;--cell-h:56px}
  .logo-pill:not(.lp-img){font-size:.78rem}
}

/* ── 4 · NO DARK BANDS ──────────────────────────────────────────────
   Every remaining dark surface becomes light. Photographs keep their
   own dark overlays — that is legibility, not decoration. */
section.mck,.series,.sec-navy,.sec-dark,.cta-band,.capfoot,
.featnl,.feat-card,.rl-lead,.upgrade,.lm-head,.qr-head,.nl-band{
  background:var(--surface)!important;color:var(--muted)!important}
section.mck::before,.series::before,.cta-band::before,
.featnl-txt::before,.qr-head::before{content:none!important;background:none!important}

section.mck h2,.series h2,.sec-navy h2,.cta-band h2,.capfoot h3,
.featnl-txt h2,.feat-card h3,.rl-lead h3,.qr-head h2,.nl-band h2,
.mck-lead h2,.epi-info h3,.tp-step h4,.upgrade h4,.lm-head h3{
  color:var(--navy)!important}
section.mck p,.series p,.sec-navy p,.cta-band p,.capfoot p,
.featnl-txt p,.feat-card p,.rl-lead p,.qr-sum,.nl-band p,
.mck-lead p,.epi-info p,.tp-step p,.series-sub,.mck-sub p,
.lm-head p{   /* v21: .lm-head p was missing here, leaving the booking
                 dialog's subtitle white-on-white and unreadable */
  color:var(--muted)!important}
.eyebrow-w{color:var(--brand)!important}
.eyebrow-w::before{background:var(--gold)!important}
.mck-lead h2 em,.cta-band h2 em,.featnl-txt h2 em{color:var(--brand)!important}

/* Showcase mosaic on light */
section.mck{padding-block:70px 80px;border-block:1px solid var(--border-l)}
.mck-go{border-color:var(--border)}
.mck-go svg{stroke:var(--navy)}
.mck-go:hover{background:var(--brand);border-color:var(--brand)}
.mck-go:hover svg{stroke:#fff}
.mck-foot{border-top-color:var(--border)}
.mck-foot span{color:var(--muted)}
.mck-foot .arr{color:var(--brand)}
.mck-foot .arr:hover{color:var(--navy)}
.mck-sub{background:var(--white)!important;border:1px solid var(--border)!important;
  border-radius:16px;box-shadow:var(--s1)}
.mck-subrow input{background:var(--white);border:1px solid var(--border);border-right:none;
  border-radius:8px 0 0 8px;color:var(--ink)}
.mck-subrow button{background:var(--brand);border-radius:0 8px 8px 0}
.mck-subrow button svg{stroke:#fff}
.mck-subrow button:hover{background:var(--brand-d)}
.mck-or{color:var(--light)}
.mck-or::before,.mck-or::after{background:var(--border)}
.mck-alt{background:var(--white);border:1px solid var(--border);color:var(--muted)}
.mck-alt:hover{background:var(--off);border-color:var(--brand);color:var(--brand)}
.mck-btn{background:var(--white);color:var(--navy)}
.mck-btn:hover{background:var(--gold)}

/* Video / series band on light */
.series{border-block:1px solid var(--border-l)}
.epi-main{background:var(--white)!important;border:1px solid var(--border)!important}
.epi-rail{background:var(--border-l);border:1px solid var(--border);border-top:none}
.epi-cell{background:var(--white);color:var(--muted)}
.epi-cell:hover{background:var(--off);color:var(--navy)}
.epi-cell.on{background:var(--off);color:var(--navy);border-top-color:var(--gold)}
.epi-date{color:var(--light)}
.vfacade{background:var(--surface-2)}
.vplay span{background:rgba(255,255,255,.94)}
.vplay svg{fill:var(--brand)}
.vtime{background:rgba(18,22,27,.72);color:#fff}
.lb-ph{background:var(--surface);color:var(--muted)}
.lb-ph svg{fill:var(--brand)}
.lb-ph p{color:var(--muted)}

/* Featured newsletter on light — overrides the page-level dark-background
   styles so every piece of text remains readable on the white card. */
.featnl{background:var(--surface)!important;border:1px solid var(--border);
  box-shadow:var(--s2);overflow:hidden}
.featnl-txt::before{display:none!important}
.featnl-txt h2{color:var(--navy)!important;font-style:normal!important}
.featnl-txt p{color:var(--muted)!important}
.featnl-txt .eyebrow{color:var(--brand)!important}
.featnl-img::after{background:linear-gradient(90deg,var(--surface) 0%,transparent 44%)!important}
/* Inline email form inside the featnl and elsewhere on light backgrounds */
.nl-inline input{background:var(--white);border:1px solid var(--border);color:var(--ink)}
.nl-inline button{background:var(--brand);color:#fff}
.nl-inline button:hover{background:var(--brand-d)}
.gk-done{color:var(--green)!important}

/* Closing CTA band on light — a quiet brand-tinted ground with a
   hairline, not a slab of colour. */
.cta-band{background:var(--off)!important;border-block:1px solid var(--border);padding-block:82px}
.cta-band .btn-ow,.ft-cta .btn-ow,.capfoot .btn-ow{
  background:var(--white)!important;color:var(--navy)!important;border:1.5px solid var(--border)!important}
.cta-band .btn-ow:hover,.ft-cta .btn-ow:hover{border-color:var(--brand)!important;color:var(--brand)!important}

/* Capability footer panel + feature cards on light */
.capfoot{background:var(--white)!important;border:1px solid var(--border);border-radius:var(--rl)}
.capfoot .btn-p{background:var(--brand);color:#fff}
.feat-card,.rl-lead{background:var(--white)!important;border:1px solid var(--border)!important;
  box-shadow:var(--s1)}
.feat-card .arr,.rl-lead .arr{color:var(--brand)!important}
.feat-card .arr .ico,.rl-lead .arr .ico{stroke:var(--brand)!important}
.rl-lead .rl-meta{border-top-color:var(--border)!important;color:var(--light)!important}
.rl-lead .ico-box,.feat-card .ico-box,.ico-box.dk{
  background:var(--brand-s)!important;border-color:var(--brand-b)!important;color:var(--brand)!important}
.upgrade,.lm-head{border:1px solid var(--border)}
.b-video{background:var(--brand-s);color:var(--brand-d)}
.skip{background:var(--brand)}

/* Assessment result header on light */
.qr-head{border-bottom:1px solid var(--border)}
.qr-score{color:var(--navy)!important}
.qr-score span{color:var(--light)!important}
.qr-tier{background:var(--gold);color:#241A02}
.qr-svc{background:var(--white)!important;border:1px solid var(--border)!important}
.qr-svc strong{color:var(--navy)!important}
.qr-svc .qs-k{color:var(--brand)!important}
.qr-svc .qs-d{color:var(--muted)!important}
.qr-svc:hover{background:var(--off)!important;border-color:var(--brand)!important}
.qr-svc .arr{color:var(--brand)!important}

/* Cookie notice — light, quiet, and out of the way */
.cookiebar{background:var(--white)!important;border-top:1px solid var(--border);
  box-shadow:0 -8px 30px rgba(18,22,27,.06);color:var(--muted)}
.cookiebar p,.cookiebar span{color:var(--muted)!important}
.cookiebar a{color:var(--brand)}
.cookiebar .btn-ow{background:var(--white)!important;color:var(--navy)!important;
  border:1.5px solid var(--border)!important}

/* ── 5 · BUTTON HIERARCHY ───────────────────────────────────────────
   One primary per section. Primary is solid brand blue; secondary is a
   hairline ghost; anything else is a text link. Gold stops being a
   second loud button and goes back to being an accent. */
.btn-p,.btn-g{background:var(--brand)!important;color:#fff!important;font-weight:650;
  border:none;box-shadow:0 4px 14px rgba(16,112,182,.22)!important}
.btn-p:hover,.btn-g:hover{background:var(--brand-d)!important;filter:none;
  box-shadow:0 6px 20px rgba(16,112,182,.28)!important;transform:translateY(-1px)}
.btn-o,.btn-ow{background:var(--white)!important;color:var(--navy)!important;
  border:1.5px solid var(--border)!important;box-shadow:none!important;font-weight:600}
.btn-o:hover,.btn-ow:hover{border-color:var(--brand)!important;color:var(--brand)!important;
  background:var(--white)!important;transform:translateY(-1px)}
/* The header keeps one solid primary — no gold slab. */
.hdr .btn-p,.hdr.up .btn-p,.hdr:not(.up) .btn-p{
  background:var(--brand)!important;color:#fff!important;
  box-shadow:0 4px 14px rgba(16,112,182,.22)!important}
.hdr .btn-p:hover,.hdr:not(.up) .btn-p:hover{background:var(--brand-d)!important}
.hdr .burger span{background:var(--navy)!important}
/* A section's secondary action, demoted to a link where two buttons
   were competing. */
.btns .btn-link{background:none!important;border:none!important;box-shadow:none!important;
  color:var(--brand)!important;font-weight:600;padding:0 4px;min-height:48px;
  display:inline-flex;align-items:center;gap:7px}
.btns .btn-link:hover{color:var(--navy)!important;transform:none;gap:10px}
.btns .btn-link .ico{stroke:currentColor}
.btn-note{font-size:.78rem;color:var(--light);align-self:center}

/* ── 6 · ACCENTS — where the gold is allowed to live ────────────────
   The short decorative dash that sat before every eyebrow label and the
   hero kicker is gone: it added visual noise ahead of the words without
   carrying any meaning. The eyebrow now stands on its own. */
.eyebrow::before,.hero-kick::before,.eyebrow.no-rule::before{
  content:none!important;display:none!important}
.eyebrow,.hero-kick{gap:0}
.testi-card{border-left-color:var(--gold)}
.testi-card::before{color:var(--gold)}
.grow .bar i{background:var(--brand)}
.gauge #gauge-arc,#gauge-arc{stroke:var(--gold)}
.badge{background:var(--white);border:1px solid var(--border);color:var(--muted)}
.b-case{background:var(--brand-s);color:var(--brand-d);border-color:var(--brand-b)}
.b-insight{background:var(--off);color:var(--muted)}
.b-guide,.b-template,.b-tool{background:var(--gold-s);color:#6E5111;border-color:rgba(234,175,51,.32)}
.ico-box{background:var(--brand-s);border-color:var(--brand-b);color:var(--brand)}
a{color:var(--brand)}
.prose a{border-bottom-color:var(--gold)}
.hs-ring{background:conic-gradient(var(--brand) calc(var(--pct) * 1%),var(--surface-2) 0)}

/* ── 7 · INDUSTRY LABEL on a case study card ────────────────────────
   The fastest read on a case card: which industry it came from. */
/* Namespaced deliberately: .ind already belongs to the About page's
   industry image tiles (16:10 box with a dark gradient overlay), and a
   shared stylesheet meant that rule was styling this label — which is
   what put a grey gradient block inside every case-study card. */
.cs-ind{display:inline-flex;align-items:center;font-size:.68rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--brand-d);
  margin-bottom:2px}
.cs-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);
  border-radius:var(--rl);overflow:hidden;transition:box-shadow var(--easem),transform var(--easem)}
.cs-card:hover{box-shadow:var(--s3);transform:translateY(-3px);border-color:var(--brand-b)}
.cs-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.cs-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.cs-card:hover .cs-img img{transform:scale(1.04)}
.cs-bd{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;gap:9px}
.cs-bd h3{font-size:1.05rem;line-height:1.3}
.cs-bd p{font-size:.86rem;color:var(--muted);line-height:1.6;flex:1}
.cs-res{display:flex;align-items:baseline;gap:8px;padding-top:12px;margin-top:2px;
  border-top:1px solid var(--border-l)}
.cs-res strong{font-family:var(--serif);font-size:1.3rem;color:var(--brand);line-height:1}
.cs-res span{font-size:.78rem;color:var(--muted)}
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1000px){.cs-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cs-grid{grid-template-columns:1fr}}

/* ── 8 · THE PROCESS RAIL — one connected visual, both pages ────────
   The step-to-step line the client singled out. Light ground, gold
   rail, numbered nodes; the homepage uses the same component one size
   up (.rail-lg). */
.rail{position:relative;display:grid;gap:0;margin-top:52px}
.rail-5{grid-template-columns:repeat(5,1fr)}
.rail-4{grid-template-columns:repeat(4,1fr)}
.rail::before{content:'';position:absolute;top:27px;left:10%;right:10%;height:2px;
  background:var(--border);border-radius:2px}
.rail::after{content:'';position:absolute;top:27px;left:10%;height:2px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--brand));border-radius:2px;
  transition:width 1.7s cubic-bezier(.4,0,.2,1)}
.rail.go::after{width:80%}
.rail-step{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 16px}
.rail-n{width:56px;height:56px;border-radius:50%;background:var(--white);
  border:2px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--brand);
  margin-bottom:20px;transition:all var(--easem)}
.rail-step:hover .rail-n{border-color:var(--brand);background:var(--brand);color:#fff;
  transform:scale(1.06);box-shadow:0 8px 22px rgba(16,112,182,.25)}
.rail-step h4{font-size:.98rem;color:var(--navy);margin-bottom:8px}
.rail-step p{font-size:.85rem;color:var(--muted);line-height:1.55;max-width:24ch}
.rail-lg .rail-n{width:68px;height:68px;font-size:1.35rem;border-width:2px}
.rail-lg::before,.rail-lg::after{top:33px;height:3px}
.rail-lg .rail-step h4{font-size:1.05rem}
.rail-lg .rail-step p{font-size:.89rem;max-width:26ch}
@media(max-width:900px){
  .rail,.rail-5,.rail-4{grid-template-columns:1fr 1fr;gap:34px 12px}
  .rail::before,.rail::after{display:none}
  .rail-step{padding:0 6px}
}
@media(max-width:520px){
  .rail,.rail-5,.rail-4{grid-template-columns:1fr;gap:22px;text-align:left}
  .rail-step{flex-direction:row;align-items:flex-start;gap:16px;text-align:left}
  .rail-n,.rail-lg .rail-n{width:46px;height:46px;font-size:1rem;margin-bottom:0;flex-shrink:0}
  .rail-step p{max-width:none}
}
/* The old markup keeps working: .tpath and .proc-grid inherit the rail. */
.tpath::before{background:var(--border)!important}
.tp-n{background:var(--white)!important;border:2px solid var(--border)!important;color:var(--brand)!important}
.tp-step:hover .tp-n{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
.proc-line{background:linear-gradient(90deg,var(--gold),var(--brand))!important;height:2px}
.proc-grid::before{background:var(--border)}
.step-n{border-color:var(--border);color:var(--brand)}
.proc-step:hover .step-n{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── 9 · THE SCOPE CARD — one Health Scope design, two sizes ────────
   The structured, bordered treatment the client prefers, shared by the
   homepage and the Services page. */
.scope{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);
  box-shadow:var(--s2);overflow:hidden}
.scope-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 26px;border-bottom:1px solid var(--border);background:var(--off)}
.scope-hd .sc-k{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand)}
.scope-hd .sc-s{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--navy);line-height:1}
.scope-hd .sc-s em{font-style:normal;font-size:.82rem;color:var(--light)}
.scope-rows{padding:8px 26px 20px}
.scope-row{display:grid;grid-template-columns:150px 1fr 42px;gap:16px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--border-l)}
.scope-row:last-child{border-bottom:none}
.scope-row strong{font-size:.88rem;color:var(--navy);font-weight:600}
.scope-row .sc-bar{height:8px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.scope-row .sc-bar i{display:block;height:100%;border-radius:5px;background:var(--brand);
  width:0;transition:width 1.1s cubic-bezier(.4,0,.2,1)}
.scope-row .sc-v{text-align:right;font-weight:700;color:var(--navy);font-size:.88rem}
.scope-ft{padding:18px 26px;border-top:1px solid var(--border);background:var(--off);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.scope-ft span{font-size:.8rem;color:var(--muted)}
.scope-lg .scope-hd{padding:26px 32px}
.scope-lg .scope-hd .sc-s{font-size:2rem}
.scope-lg .scope-rows{padding:10px 32px 24px}
.scope-lg .scope-row{padding:17px 0;grid-template-columns:172px 1fr 46px}
.scope-lg .scope-row strong{font-size:.94rem}
.scope-lg .scope-row .sc-bar{height:10px}
.scope-lg .scope-ft{padding:22px 32px}
@media(max-width:600px){
  .scope-row,.scope-lg .scope-row{grid-template-columns:110px 1fr 36px;gap:10px}
  .scope-hd,.scope-rows,.scope-ft,.scope-lg .scope-hd,.scope-lg .scope-rows,.scope-lg .scope-ft{
    padding-left:18px;padding-right:18px}
  .scope-ft{flex-direction:column;align-items:stretch}
  .scope-ft .btn{width:100%;justify-content:center}
}

/* ── 10 · THE NINE OPERATING SYSTEMS INDEX ──────────────────────────
   A scannable numbered list of all nine, so the full set is visible at
   a glance before anyone scrolls the detailed rows. */
.sys-index{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;background:var(--white)}
.sys-item{display:flex;gap:14px;padding:20px 22px;border-right:1px solid var(--border-l);
  border-bottom:1px solid var(--border-l);transition:background var(--ease)}
.sys-item:hover{background:var(--off)}
.sys-item:nth-child(3n){border-right:none}
.sys-item:nth-last-child(-n+3){border-bottom:none}
.sys-n{font-family:var(--serif);font-size:.9rem;font-weight:600;color:var(--gold-d);flex-shrink:0;
  padding-top:2px}
.sys-b strong{display:block;font-size:.92rem;color:var(--navy);font-weight:600;margin-bottom:4px;
  line-height:1.3}
.sys-b span{font-size:.8rem;color:var(--muted);line-height:1.5;display:block}
.sys-item:hover .sys-b strong{color:var(--brand)}
@media(max-width:920px){
  .sys-index{grid-template-columns:1fr 1fr}
  .sys-item:nth-child(3n){border-right:1px solid var(--border-l)}
  .sys-item:nth-child(2n){border-right:none}
  .sys-item:nth-last-child(-n+3){border-bottom:1px solid var(--border-l)}
  .sys-item:nth-last-child(-n+1){border-bottom:none}
}
@media(max-width:600px){
  .sys-index{grid-template-columns:1fr}
  .sys-item{border-right:none!important}
  .sys-item:nth-last-child(-n+3){border-bottom:1px solid var(--border-l)}
  .sys-item:last-child{border-bottom:none}
}

/* ── 11 · VIDEO SECTION ─────────────────────────────────────────────
   Built for a real film. The frame holds a 16:9 embed the moment a URL
   is set; until then it shows the poster and a clearly-labelled slot. */
.vid-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:0;background:var(--white);
  border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;box-shadow:var(--s1)}
.vid-frame{position:relative;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.vid-frame img,.vid-frame iframe,.vid-frame video{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;border:0}
.vid-frame .vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vid-side{padding:34px 36px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.vid-side .eyebrow{margin-bottom:2px}
.vid-side h3{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.25}
.vid-side p{font-size:.89rem;color:var(--muted);line-height:1.65}
.vid-slot{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;
  background:rgba(255,255,255,.92);border-top:1px solid var(--border);
  font-size:.72rem;color:var(--muted);text-align:center}
@media(max-width:860px){
  .vid-wrap{grid-template-columns:1fr}
  .vid-side{padding:26px 22px}
}

/* ── 12 · QUIET INTERACTIONS ────────────────────────────────────────
   The exit-intent overlay and the promotional top bar are gone. What
   remains never covers content: one slim mobile action bar and the
   cookie notice. */
.ann{display:none!important}
#exit-modal{display:none!important}
.mcta{background:rgba(255,255,255,.96);border-top:1px solid var(--border);
  box-shadow:0 -6px 24px rgba(18,22,27,.07)}
.mcta .btn{min-height:46px}
.resume-bar{background:var(--off);border:1px solid var(--border);color:var(--muted)}

/* ── 12b · THE LAST FIVE OFF-SYSTEM COLOURS ─────────────────────────
   Found by measuring every painted colour on all 55 pages: the campaign
   landing bands, the takeaway panel's mint border, the client-logo text
   fallbacks (six invented brand hues), and the calculators' warning red.
   All folded into the logo palette. */
.lp-band,.lpf-head{background:var(--surface)!important;color:var(--muted)!important}
.lp-band .stat-n,.lpf-head h3{color:var(--navy)!important}
.lp-band .stat-l{color:var(--muted)!important}
.lp-band .stat-rule{background:var(--gold)!important}
.lpf-head p{color:var(--muted)!important}
.lpf-head{border-bottom:1px solid var(--border)}
.lp-check li svg{stroke:var(--brand)}
.takeaways{background:var(--brand-s)!important;border-color:var(--brand-b)!important}
.takeaways h4{color:var(--brand-d)!important}
/* The client-logo text fallback: one brand monogram, not six hues. */
.logo-pill[class*="lp-"] .lp-m{background:var(--brand)!important}
.logo-pill[class*="lp-"]{color:var(--navy)!important}
/* Calculator negatives read as caution in the logo gold, not an alien red. */
.co-row strong[style*="B23A3A"],.qr-dim .bar i[style*="B23A3A"]{color:var(--gold-d)!important;background:var(--gold)!important}

/* ── 12c · NOTHING STACKS ON TOP OF ANYTHING ────────────────────────
   Three things live at the bottom edge: the cookie notice, the sticky
   action bar on small screens, and the back-to-top button. They were
   overlapping each other. The notice now publishes its own measured
   height as --ck-h (0 once dismissed), and everything above it is
   positioned from that — so the stack stays correct at any text size
   and however the notice wraps. */
:root{--ck-h:0px}
/* mcta sits flush at the bottom edge (bottom:0) until the cookie notice
   appears, at which point --ck-h is set to the notice's measured height
   and the bar lifts exactly clear of it. When the notice is dismissed,
   --ck-h returns to 0px and the bar drops back down. */
.mcta{bottom:var(--ck-h)!important}
.btt{bottom:calc(var(--ck-h) + 22px)!important}
@media(max-width:1100px){
  /* the sticky action bar is on screen here, so the button clears it too */
  .btt{bottom:calc(var(--ck-h) + 94px)!important}
}
@media(max-width:700px){
  body.ck-open .footer{padding-bottom:calc(var(--ck-h) + 96px)}
}

/* ── 13 · FINAL CONSISTENCY SWEEP ───────────────────────────────────*/
h1,h2,h3,h4,.serif{color:var(--navy)}
.sec-off,.sec-surface{background:var(--off);border-block:1px solid var(--border-l)}
.sec-surface{background:var(--surface)}
.card{background:var(--white);border-color:var(--border)}
.card:hover{border-color:var(--brand-b)}
.cap,.eng-card,.svc-box,.gauge-card,.testi-card,.faq-item{background:var(--white)}
.cap{border-color:var(--border)}
.cap:hover{border-color:var(--brand-b)}
.eng-x summary{color:var(--brand)}
.eng-x summary::after{color:var(--gold-d)}
.eng-caps a:hover{border-color:var(--brand);color:var(--brand)}
.cap-next a{color:var(--brand)}
.cap-next a:hover{color:var(--navy)}
.res-stats .rs-n{color:var(--brand)}
.assess-path li::before{background:var(--brand);color:#fff}
.hero h1 em{color:var(--brand)}
.stat-n{color:var(--navy)}
.stat-rule{background:var(--gold)}
.stat-l{color:var(--muted)}
input,textarea,select{background:var(--white);border-color:var(--border);color:var(--ink)}
input:focus,textarea:focus,select:focus{border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(16,112,182,.13)}
::selection{background:var(--gold-s);color:var(--navy)}

/* ── 14 · TOUCH TARGETS ─────────────────────────────────────────────
   Measured at 390px: a handful of controls sat under the 34px minimum.
   On phones every real control gets a comfortable target, and inline
   text links get vertical padding rather than being enlarged. */
@media(max-width:700px){
  .btn,.btn-sm,button.btn,a.btn{min-height:46px;padding-block:11px}
  .btn-sm{font-size:.85rem}
  .filterbar .chip,.idx-filter button,.rl-count,.typenav a,.eng-caps a{min-height:40px;
    display:inline-flex;align-items:center}
  .arr,.qback,.cap-next a,.sys-item{padding-block:10px}
  .arr{min-height:40px;align-items:center}
  .btns .btn-link{min-height:46px}
  .mck-alt{min-height:44px}
  .faq-btn{padding-block:20px}
  /* The cookie bar's own buttons carry a tighter min-height of their own. */
  .ck-actions .btn,.cookiebar .btn{min-height:44px!important;padding-block:10px}
  /* Calendar month arrows on the booking panel. */
  .bk-arrows button{min-width:40px;min-height:40px}
  .qback{min-height:40px;display:inline-flex;align-items:center}
}

/* ── 15 · SCROLL REVEAL: SAFE BY CONSTRUCTION ───────────────────────
   Two faults found by measuring the live page, both of which left real
   content invisible:

   1. Nested reveals. A grid carrying [data-r] whose children each carry
      their own [data-r] meant the container faded in while its cards
      stayed at opacity:0 and blur(7px) — the "Six businesses" section
      showed a heading above an empty white block. A revealed parent now
      reveals everything inside it.
   2. No fallback. Every [data-r] element starts invisible in CSS and is
      only shown by script, so one JS failure — or a browser without
      IntersectionObserver — hid the entire site. The hidden state is now
      applied only once scripting has confirmed itself, so the default,
      no-JS state is fully visible content. */
[data-r]{opacity:1;transform:none;filter:none;
  transition:opacity .3s ease,transform .3s ease}
/* The staggered delays are gone. With them, a card could take three
   quarters of a second to appear — long enough that a reader scrolling
   at a normal pace arrives before the content does. The reveal is a
   light polish now, not something anyone waits for. */
[data-r][data-d="1"],[data-r][data-d="2"],
[data-r][data-d="3"],[data-r][data-d="4"]{transition-delay:0s!important}
html.js [data-r]:not(.vis){opacity:0;transform:translateY(14px);filter:none}
/* Anything already on screen when the page loads appears immediately —
   it should not fade in under the reader. */
html.js [data-r].no-tr{transition:none!important}
html.js [data-r].vis [data-r],
html.js [data-r].vis [data-r]:not(.vis){opacity:1!important;transform:none!important;filter:none!important}
[data-r],[data-r].vis{filter:none!important}
@media(prefers-reduced-motion:reduce){
  html.js [data-r]:not(.vis){opacity:1;transform:none;filter:none}
}