*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F2EFEA; --ink:#17191C; --dark:#1F2328; --muted:#5F5951;
  --line:rgba(23,25,28,.15); --line-d:rgba(214,191,152,.20); --cream:#F4EFE7;
  --accent:#1F2328; --accent-ink:#F4EFE7; --navy-rgb:31,35,40;
  --ease:cubic-bezier(.4,0,.1,1); --pad:clamp(28px,6vw,96px); --maxw:1280px;
}
[data-accent="wine"]{ --accent:#4A2E22; }
[data-accent="olive"]{ --accent:#2F3A33; }
/* dark sections + footer: brass accent pops on navy */
.dark, footer{ --accent:#D6BF98; --accent-ink:#1F2328; }
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Archivo",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-weight:800;letter-spacing:-.028em;line-height:.98}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
/* Above-the-fold heroes animate in pure CSS. They used to wait for site.js (end of body) to add .in,
   so the hero image stayed at opacity 0 and mobile LCP swung between 3.3s and 7.8s (measured 2026-10-08). */
@keyframes plRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js .hero [data-reveal],.js .blog-hero [data-reveal]{opacity:1;transform:none;animation:plRise .8s var(--ease) both}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1!important;transform:none!important}html{scroll-behavior:auto}}

.eyebrow{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle}

.btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;padding:14px 26px;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-fill{background:var(--accent);color:var(--accent-ink)}
.btn-fill:hover{filter:brightness(1.05)}
.btn-line{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}

/* NAV */
nav{position:sticky;top:0;z-index:60;background:rgba(242,239,234,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
/* footer link groups are <nav> for semantics: undo the sticky header styling above */
footer nav{position:static;z-index:auto;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:-.02em;white-space:nowrap}
.brand svg{width:24px;height:24px}
.nav-links{display:flex;gap:30px;font-size:14.5px;font-weight:500}
.nav-links a{color:var(--ink);opacity:.75;transition:opacity .3s}
.nav-links a:hover{opacity:1}
.nav-right{display:flex;align-items:center;gap:20px}
@media(max-width:920px){.nav-links{display:none}}

/* HERO */
.hero{padding:clamp(48px,8vw,110px) 0 0}
.hero h1{font-size:clamp(2.4rem,6.6vw,5.2rem);font-weight:800;max-width:18ch}
.hero-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:clamp(30px,5vw,56px);flex-wrap:wrap}
.hero-sub p{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--muted);max-width:46ch;line-height:1.55}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

.band-img{position:relative;margin-top:clamp(34px,5vw,60px)}
.band-img .frame{position:relative;overflow:hidden;border-radius:20px}
.band-img img{width:100%;height:clamp(280px,52vw,620px);object-fit:cover}
.band-img .corner{position:absolute;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.band-img .tl{top:20px;left:22px;display:flex;gap:20px}
.band-img .br{bottom:20px;right:22px;opacity:.85}

/* SECTION shells */
.section{padding:clamp(64px,10vw,140px) 0}
.two-col{display:grid;grid-template-columns:0.7fr 1.6fr;gap:clamp(28px,6vw,90px);align-items:start}
.two-col h2{font-size:clamp(1.8rem,3.6vw,3rem)}
.two-col .lead{font-size:1.05rem;color:var(--muted);margin-top:20px;max-width:60ch;line-height:1.65}
@media(max-width:800px){.two-col{grid-template-columns:1fr;gap:22px}}

/* SYSTEM STEPS */
.disc-head{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;margin-bottom:clamp(40px,6vw,70px);max-width:16ch}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,34px)}
.step{border-top:1px solid var(--ink);padding-top:22px}
.step-no{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.05em}
.step h3{font-size:1.5rem;margin:14px 0 12px}
.step p{font-size:.98rem;color:var(--muted);line-height:1.6}
@media(max-width:860px){.steps-grid{grid-template-columns:1fr 1fr;gap:34px 26px}}
@media(max-width:520px){.steps-grid{grid-template-columns:1fr}}

/* DARK */
.dark{background:var(--dark);color:var(--cream)}
.dark.wine{--dark:#4A2E22}
.dark.olive{--dark:#2F3A33}
.dark .eyebrow{color:rgba(244,239,231,.6)}
/* soft brass tinted light section */
.tint{background:#E8E2D8}
.tint .step{border-top-color:#1F2328}
.dark-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,60px);align-items:center}
.dark-split h2{font-size:clamp(2rem,4.6vw,3.4rem);max-width:16ch}
.dark-split p{color:rgba(242,240,232,.62);margin-top:18px;max-width:44ch;font-size:1.05rem;line-height:1.6}
.dark-split .imgwrap{border-radius:20px;overflow:hidden}
.dark-split .imgwrap img{width:100%;height:clamp(260px,34vw,420px);object-fit:cover}
@media(max-width:820px){.dark-split{grid-template-columns:1fr;gap:30px}}

/* MARQUEE */
.marq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin-top:clamp(34px,5vw,54px)}
.marq-track{display:flex;gap:56px;white-space:nowrap;width:max-content;animation:scroll 34s linear infinite}
.marq span{font-size:clamp(1.4rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);opacity:.34;display:inline-flex;align-items:center;gap:56px}
.marq span::after{content:"\2022";color:var(--accent);opacity:.8}
@keyframes scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq-track{animation:none}}

/* GRID HEAD */
.grid-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(34px,5vw,56px);flex-wrap:wrap}
.grid-head h2{font-size:clamp(1.9rem,4.4vw,3.2rem);max-width:12ch}
.grid-head p{color:var(--muted);max-width:40ch;font-size:1.02rem}

/* CASE STUDIES (rows) */
.cs-list{display:flex;flex-direction:column;gap:clamp(30px,4vw,54px)}
.cs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,50px);align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(20px,3vw,34px);box-shadow:0 20px 50px -30px rgba(23,25,28,.18)}
.cs.alt{direction:rtl}.cs.alt>*{direction:ltr}
.cs figure{overflow:hidden;border-radius:20px;background:#e6e3d9}
.cs figure img{width:100%;height:clamp(240px,30vw,400px);object-fit:cover;transition:transform .9s var(--ease)}
.cs:hover figure img{transform:scale(1.04)}
.cs-tag{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.cs:nth-of-type(1) .cs-tag{color:#1F2328}
.cs:nth-of-type(2) .cs-tag{color:#2F3A33}
.cs:nth-of-type(3) .cs-tag{color:#4A2E22}
.cs:nth-of-type(1) .cs-metrics b{color:#1F2328}
.cs:nth-of-type(2) .cs-metrics b{color:#2F3A33}
.cs:nth-of-type(3) .cs-metrics b{color:#4A2E22}
.cs:nth-of-type(4) .cs-tag{color:#1F2328}
.cs:nth-of-type(4) .cs-metrics b{color:#1F2328}
.cs-body h3{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:14px 0 14px}
.cs-body p{color:var(--muted);font-size:1.05rem;line-height:1.6;max-width:46ch}
.cs-metrics{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px}
.cs-metrics b{display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.cs-metrics span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media(max-width:800px){.cs,.cs.alt{grid-template-columns:1fr;direction:ltr}}

/* PROOF */
.proof-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,80px);align-items:center}
.proof-grid .imgwrap{border-radius:20px;overflow:hidden}
.proof-grid .imgwrap img{width:100%;height:clamp(300px,38vw,460px);object-fit:cover}
.proof-grid h2{font-size:clamp(1.8rem,3.8vw,2.9rem);max-width:15ch}
.proof-grid .lead{color:var(--muted);margin-top:18px;font-size:1.05rem;line-height:1.6;max-width:48ch}
.stat-row{display:flex;gap:40px;margin-top:38px;flex-wrap:wrap}
.stat-row .num{font-size:2.6rem;font-weight:800;letter-spacing:-.03em}
.stat-row .num small{color:var(--accent);font-size:1.6rem}
.stat-row .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@media(max-width:820px){.proof-grid{grid-template-columns:1fr;gap:30px}}

/* BLOG GRID (cards) */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,30px)}
.post{display:flex;flex-direction:column;padding:30px;border:1px solid var(--line-d);border-radius:10px;transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.post:hover{transform:translateY(-5px);border-color:var(--accent);background:rgba(242,240,232,.03)}
.post-cat{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.post h3{font-size:1.35rem;line-height:1.15;color:var(--cream)}
.post p{color:rgba(242,240,232,.6);font-size:.98rem;margin-top:12px;line-height:1.55;flex:1}
.post-link{margin-top:22px;font-size:.9rem;font-weight:600;color:var(--accent)}
@media(max-width:860px){.blog-grid{grid-template-columns:1fr}}

/* NUMBERED SERVICES */
.core-title{font-size:clamp(2.6rem,8vw,6rem);font-weight:800;line-height:.92;letter-spacing:-.03em;margin-bottom:clamp(40px,6vw,70px);color:var(--cream)}
.core-title.light{color:var(--ink)}
.core-title .ghost{color:transparent;-webkit-text-stroke:1px rgba(242,240,232,.32)}
.core-title .ghost.light{-webkit-text-stroke:1px rgba(18,17,14,.28)}
.srv-row{display:grid;grid-template-columns:60px 1fr 1.3fr;gap:24px;padding:32px 0;border-top:1px solid var(--line-d);align-items:baseline}
.srv-row:last-child{border-bottom:1px solid var(--line-d)}
.srv-row.light{border-top-color:var(--line)}
.srv-row.light:last-child{border-bottom-color:var(--line)}
.srv-row .no{font-size:14px;color:var(--accent);font-weight:600}
.srv-row h3{font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:700}
.srv-row p{color:rgba(242,240,232,.6);font-size:1.02rem;line-height:1.6}
.srv-row.light p{color:var(--muted)}
.srv-row .srv-link{grid-column:3;justify-self:start;margin-top:-10px;font-weight:600;font-size:1rem;color:var(--cream);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.srv-row.light .srv-link{color:var(--ink)}
.srv-row .srv-link:hover{color:var(--accent)}
@media(max-width:720px){.srv-row{grid-template-columns:1fr;gap:10px;padding:26px 0}.srv-row .srv-link{grid-column:1;margin-top:2px}}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,80px)}
.contact-grid h2{font-size:clamp(2rem,4.6vw,3.4rem);max-width:12ch}
.contact-info{margin-top:30px;font-size:1.02rem;line-height:2;color:rgba(242,240,232,.7)}
.contact-info a{color:var(--accent)}
form .frow{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{margin-bottom:26px}
.field label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,240,232,.5);margin-bottom:10px}
.field input,.field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-d);color:var(--cream);font-family:inherit;font-size:16px;padding:8px 0;transition:border-color .3s}
.field input::placeholder,.field textarea::placeholder{color:rgba(242,240,232,.32)}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)}
@media(max-width:720px){.contact-grid{grid-template-columns:1fr;gap:36px}form .frow{grid-template-columns:1fr}}

/* FOOTER */
footer{background:var(--dark);color:var(--cream);padding-top:clamp(50px,7vw,90px)}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:30px;padding-bottom:50px;border-bottom:1px solid var(--line-d)}
.foot-top p{color:rgba(242,240,232,.55);max-width:30ch;margin-top:14px;font-size:.96rem;line-height:1.6}
footer h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,240,232,.45);margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:11px}
footer li a{color:rgba(242,240,232,.7);font-size:.98rem;transition:color .3s}
footer li a:hover{color:var(--accent)}
.foot-word{font-size:clamp(3.4rem,17vw,13rem);font-weight:800;letter-spacing:-.04em;line-height:1;padding:40px 0 10px;color:var(--cream)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:24px 0 34px;border-top:1px solid var(--line-d);font-size:.82rem;color:rgba(242,240,232,.42)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}}

/* MOBILE NAV (hamburger) */
.nav-toggle{display:none;width:44px;height:44px;border:none;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:10px}
.nav-toggle span{display:block;height:2px;width:22px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{flex-direction:column;padding:12px var(--pad) 22px;background:rgba(242,239,234,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.mobile-menu:not([hidden]){display:flex}
.mobile-menu a{padding:13px 0;font-size:1.05rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.mobile-menu a.btn{justify-content:center;color:var(--accent-ink);border-bottom:none;margin-top:12px}
@media(max-width:920px){.nav-toggle{display:flex}}
@media(min-width:921px){.mobile-menu{display:none!important}}

/* MOBILE FLOATING CTA */
.mobile-cta{display:none;position:fixed;left:14px;right:14px;bottom:14px;z-index:70;justify-content:center;align-items:center;text-align:center;padding:16px 20px;border-radius:100px;background:var(--dark);color:var(--cream);font-weight:700;font-size:15px;letter-spacing:-.01em;box-shadow:0 16px 38px -10px rgba(0,0,0,.55);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.mobile-cta.hide{opacity:0;pointer-events:none;transform:translateY(22px)}
@media(max-width:720px){.mobile-cta{display:flex}}

/* CONTACT FORM CARD */
/* Form card is SOLID WHITE (2026-09-17, Michael: the translucent form on olive was hard to see) */
.form-card{background:#fff;color:var(--ink);border:0;border-radius:20px;padding:clamp(24px,4vw,40px);box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
.form-card .field{margin-bottom:20px}
.form-card .field label{color:var(--ink);font-weight:600;letter-spacing:.12em}
.form-card .field input,.form-card .field textarea{background:#F7F4EF;border:1.5px solid #8C857B;border-radius:10px;padding:13px 15px;color:var(--ink);resize:vertical}
.form-card .field input::placeholder,.form-card .field textarea::placeholder{color:#5F5951}
.form-card .field input:focus,.form-card .field textarea:focus{border-color:#1F2328;background:#fff;box-shadow:0 0 0 3px rgba(31,35,40,.14)}
.form-card .btn-fill{width:100%;justify-content:center;margin-top:6px;background:#1F2328;color:#fff;padding:17px 26px;font-size:16px}

/* CLIENT LOGO STRIP */
.logos-sec{padding-bottom:clamp(44px,7vw,80px)}
.logos-head{font-size:clamp(1.05rem,1.9vw,1.35rem);font-weight:600;color:var(--muted);text-align:center;margin-bottom:clamp(24px,4vw,40px);letter-spacing:-.01em}
.logo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.logo-tile{background:#fff;border:1px solid var(--line);border-radius:18px;height:160px;display:flex;align-items:center;justify-content:center;padding:34px}
.logo-tile img{max-width:100%;max-height:88px;width:auto;object-fit:contain}
.logo-tile img.logo-dark{filter:brightness(0) opacity(.85)}
@media(max-width:640px){.logo-strip{grid-template-columns:repeat(2,1fr);gap:14px}.logo-tile{height:120px;padding:22px}.logo-tile img{max-height:60px}}

/* INTRO BLOCK (single column) */
.intro-block{max-width:820px}
.intro-block h2{margin-bottom:26px}
.intro-block .lead{font-size:1.1rem;color:var(--muted);margin-top:20px;max-width:64ch;line-height:1.7}
.intro-block .lead:first-of-type{margin-top:0}

/* TEAM */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);max-width:860px}
.team-photo{border-radius:20px;overflow:hidden;aspect-ratio:4/5;margin-bottom:20px;background:#e5dfd5}
.team-photo img{width:100%;height:100%;object-fit:cover}
.team-card h3{font-size:1.5rem;margin-bottom:4px}
.team-role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
.team-card p{color:var(--muted);font-size:1rem;line-height:1.6;max-width:44ch}
@media(max-width:640px){.team-grid{grid-template-columns:1fr;max-width:420px}}

/* CASE STUDY BRAND LOGO */
.cs-brand{margin-bottom:22px;display:flex;align-items:center;min-height:56px}
.cs-brand img{max-height:70px;max-width:100%;width:auto;height:auto;object-fit:contain}
.cs-brand img.logo-dark{filter:brightness(0)}
.cs-body .cs-tag{margin-bottom:12px}
.cs-body .cs-tag+p{margin-top:0}

/* OCEANBOTICS LOGO CASE-STUDY TILE */
.cs figure.cs-logo{background:var(--dark);display:flex;align-items:center;justify-content:center;padding:clamp(30px,5vw,60px);min-height:clamp(240px,30vw,400px)}
.cs figure.cs-logo img{width:auto;max-width:72%;max-height:120px;object-fit:contain}

/* BLOG POST THUMBNAIL + META */
.post-thumb{border-radius:14px;overflow:hidden;margin-bottom:18px;aspect-ratio:16/10;background:rgba(255,255,255,.04)}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post:hover .post-thumb img{transform:scale(1.05)}
.post-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.post-meta .post-cat{margin-bottom:0}
.post-date{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dark .post-date{color:rgba(242,240,232,.42)}

/* BLOG ARTICLE HERO IMAGE */
.article-hero{border-radius:20px;overflow:hidden;margin:0 0 42px;aspect-ratio:16/9;background:#e6e3d9}
.article-hero img{width:100%;height:100%;object-fit:cover}

/* FIX: CTA button text was inheriting .article a colour (navy on navy + underline) */
.article a.btn{color:var(--accent-ink);text-decoration:none}
.article a.btn-line{color:var(--ink)}

/* ARTICLE (blog) */
.article{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,80px) var(--pad) clamp(60px,9vw,120px)}
.article .kicker{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.article h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.02;margin-bottom:22px}
.article .byline{font-size:.9rem;color:var(--muted);margin-bottom:40px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.article h2{font-size:clamp(1.4rem,2.8vw,2rem);margin:44px 0 16px}
.article h3{font-size:1.25rem;margin:30px 0 12px}
.article p{font-size:1.08rem;line-height:1.7;color:#2c2b26;margin-bottom:20px}
.article ul,.article ol{margin:0 0 22px 22px}
.article li{font-size:1.06rem;line-height:1.65;margin-bottom:10px;color:#2c2b26}
.article a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article .cta-box{margin-top:50px;padding:36px;border:1px solid var(--line);border-radius:12px;background:rgba(192,128,95,.06)}
.article .cta-box h3{margin-top:0}
.article .author-box{display:flex;gap:28px;align-items:center;margin-top:64px;padding:34px 36px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,#fff 0%,var(--cream) 100%);box-shadow:0 24px 55px -34px rgba(23,25,28,.28)}
.article .author-box img{width:288px;height:324px;border-radius:20px;object-fit:cover;object-position:center 18%;flex-shrink:0}
.article .author-box .author-label{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.article .author-box .author-name{font-weight:800;font-size:1.5rem;line-height:1;letter-spacing:-.028em;color:var(--ink);display:inline-flex;align-items:center;gap:16px}
.li-link{display:inline-flex;align-items:center;color:#0A66C2;transition:opacity .2s}
.li-link:hover{opacity:.65}
.team-card .team-name{display:flex;align-items:center;gap:14px}
.article .author-box .author-role{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:7px 0 13px}
.article .author-box p{font-size:1.02rem;line-height:1.62;color:var(--muted);margin:0;max-width:54ch}
@media(max-width:560px){.article .author-box{flex-direction:column;text-align:center;gap:20px;padding:30px 24px}.article .author-box img{width:260px;height:292px}.article .author-box p{max-width:none}}
/* ============================================================
   ARTICLE DIAGRAMS
   Reusable visual blocks for blog posts. Pure CSS + inline SVG,
   no libraries, CSP-safe. Six types:
     .dg-track  timeline / sequence over time
     .dg-ladder ranked tiers (warmest to coldest, biggest to smallest)
     .dg-map    A maps to B (audience -> message, problem -> fix)
     .dg-split  proportional split of one total
     .dg-flow   process steps with arrows
     .dg-phase  phased plan cards (week 1 / week 2)
   Every one is one column on mobile. Colour encodes magnitude only
   (single navy hue, light to dark); identity is always carried by a
   label as well, never by colour alone.
   ============================================================ */
.article .dg{margin:40px 0 44px}
/* the text column is only ~588px, too tight for a five step diagram, so figures
   break out of it on wide screens and stay inside it everywhere else */
@media(min-width:1040px){
  .article .dg{width:940px;max-width:calc(100vw - 64px);margin-left:50%;transform:translateX(-50%)}
}
.article .dg-label{display:flex;align-items:center;gap:12px;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.article .dg-label::after{content:"";flex:1;height:1px;background:var(--line)}
.article .dg figcaption{font-size:.86rem;line-height:1.55;color:var(--muted);margin-top:14px}
.article .dg-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(20px,3.4vw,30px);box-shadow:0 22px 48px -36px rgba(var(--navy-rgb),.34)}

/* -- TRACK: a sequence across time ------------------------------------ */
/* vertical rail by default, horizontal only where there is room for it.
   Each node draws its own connector to the next, so the rail darkens step by
   step and never overshoots the final marker. */
.dg-track{display:grid;gap:0;padding-left:28px}
.dg-node{position:relative;padding:0 0 20px}
.dg-node:last-child{padding-bottom:0}
.dg-node::after{content:"";position:absolute;left:-28px;top:3px;width:14px;height:14px;border-radius:50%;background:rgba(var(--navy-rgb),var(--heat,.35));box-shadow:0 0 0 3px #fff}
.dg-node::before{content:"";position:absolute;left:-22px;top:19px;bottom:-2px;width:2px;background:rgba(var(--navy-rgb),var(--heat,.35))}
.dg-node:last-child::before{display:none}
.dg-node .t-when{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.dg-node .t-what{font-size:.95rem;line-height:1.45;color:#2c2b26;margin-top:5px}
@media(min-width:1040px){
  .dg-track{grid-auto-flow:column;grid-auto-columns:1fr;padding-left:0}
  .dg-node{padding:30px 18px 0 0}
  .dg-node::after{left:0;top:2px}
  /* right:0 lands exactly on the next node's marker, so the line never pokes past it */
  .dg-node::before{left:14px;right:0;top:8px;bottom:auto;width:auto;height:2px}
}

/* -- LADDER: ranked tiers --------------------------------------------- */
.dg-ladder{display:grid;gap:9px}
.dg-rung{display:grid;grid-template-columns:5px 1fr auto;gap:16px;align-items:center;padding:15px 18px;border-radius:14px;background:var(--cream);border:1px solid var(--line)}
.dg-rung .r-heat{align-self:stretch;border-radius:100px;background:rgba(var(--navy-rgb),var(--heat,.4))}
.dg-rung .r-name{font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.dg-rung .r-why{font-size:.9rem;line-height:1.45;color:var(--muted);margin-top:4px}
.dg-rung .r-tag{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:#fff;border:1px solid var(--line);border-radius:100px;padding:6px 12px;white-space:nowrap}
@media(max-width:560px){.dg-rung{grid-template-columns:5px 1fr;gap:12px}.dg-rung .r-tag{grid-column:2;justify-self:start;margin-top:8px}}

/* -- MAP: A maps to B -------------------------------------------------- */
.dg-map{display:grid;gap:0}
.dg-pair{display:grid;grid-template-columns:1fr 26px 1.15fr;gap:14px;align-items:center;padding:16px 2px;border-top:1px solid var(--line)}
.dg-pair:first-child{border-top:0;padding-top:2px}
.dg-pair .m-from{font-size:.96rem;font-weight:700;line-height:1.35;color:var(--ink)}
.dg-pair .m-to{font-size:.94rem;line-height:1.45;color:#2c2b26}
.dg-arrow{width:22px;height:22px;color:rgba(var(--navy-rgb),.45);flex:0 0 auto}
@media(max-width:560px){
  .dg-pair{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .dg-pair .dg-arrow{transform:rotate(90deg)}
}

/* -- SPLIT: proportional bar ------------------------------------------ */
.dg-split{display:flex;gap:2px;height:52px}
.dg-split .s-seg{display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;letter-spacing:-.01em;border-radius:3px}
/* pale segments sit at 1.28:1 against a white card, so they carry a hairline
   edge and an in-bar label rather than relying on the fill alone */
.dg-split .s-seg.is-light,.dg-key i.is-light{box-shadow:inset 0 0 0 1px rgba(var(--navy-rgb),.28)}
.dg-split .s-seg:first-child{border-radius:8px 3px 3px 8px}
.dg-split .s-seg:last-child{border-radius:3px 8px 8px 3px}
.dg-key{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px}
.dg-key .s-key{display:flex;align-items:center;gap:9px;font-size:.9rem;color:#2c2b26}
.dg-key i{width:12px;height:12px;border-radius:3px;flex:0 0 auto}

/* -- FUNNEL: magnitude bars, stage by stage --------------------------- */
/* the value sits in its own fixed gutter so bar widths stay exactly
   proportional at every screen size, including the 100% row */
.dg-funnel{display:grid;gap:12px}
.f-row{display:grid;grid-template-columns:minmax(104px,24%) 1fr;gap:16px;align-items:center}
.f-label{font-size:.92rem;font-weight:700;line-height:1.3;color:var(--ink)}
.f-wrap{display:flex;align-items:center;gap:10px;min-width:0}
.f-scale{flex:1 1 auto;min-width:0}
.f-bar{width:var(--pct,100%);height:34px;border-radius:4px;background:rgba(var(--navy-rgb),var(--heat,.85))}
.f-val{flex:0 0 auto;min-width:48px;font-size:.88rem;font-weight:800;color:var(--ink);white-space:nowrap}
@media(max-width:560px){.f-row{grid-template-columns:1fr;gap:7px}.f-bar{height:28px}}

/* -- FLOW: process steps ---------------------------------------------- */
/* stacked by default, one unwrapped row where there is room. Never wraps, so a
   chevron can never end up dangling at the end of a line. */
.dg-flow{display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap}
.dg-step{flex:1 1 140px;min-width:0;padding:16px 15px;border-radius:14px;background:var(--cream);border:1px solid var(--line)}
.dg-step .s-no{font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);opacity:.75}
.dg-step .s-name{font-size:.95rem;font-weight:700;line-height:1.3;margin-top:7px;color:var(--ink)}
.dg-step .s-note{font-size:.85rem;line-height:1.45;color:var(--muted);margin-top:6px}
.dg-chev{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0 7px;color:rgba(var(--navy-rgb),.4)}
.dg-chev svg{width:18px;height:18px}
.dg-loop{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:.86rem;line-height:1.5;color:var(--muted)}
.dg-loop svg{flex:0 0 auto;margin-top:2px}
.dg-chev{padding:7px 0}
.dg-chev svg{transform:rotate(90deg)}
@media(min-width:1040px){
  .dg-flow{flex-direction:row}
  .dg-chev{padding:0 7px}
  .dg-chev svg{transform:none}
}

/* -- PHASE: phased plan cards ----------------------------------------- */
.dg-phase{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.dg-pcard{padding:22px;border-radius:16px;background:var(--cream);border:1px solid var(--line)}
.dg-pcard .p-tag{display:inline-block;font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;background:var(--dark);color:var(--cream);border-radius:100px;padding:6px 13px}
.dg-pcard .p-name{font-size:1.05rem;font-weight:700;line-height:1.3;margin-top:13px;color:var(--ink)}
.article .dg-pcard ul{list-style:none;margin:12px 0 0;padding:0}
.article .dg-pcard li{position:relative;padding-left:20px;font-size:.92rem;line-height:1.5;color:#2c2b26;margin-bottom:8px}
.article .dg-pcard li:last-child{margin-bottom:0}
.dg-pcard li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:rgba(var(--navy-rgb),.45)}

/* ============================================================
   END-OF-POST QUIZ
   Two questions, self-marking, no backend. State is carried by
   a glyph and a label as well as colour, so it reads without it.
   ============================================================ */
.article .quiz{margin-top:56px;padding:clamp(24px,3.6vw,34px);border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,#fff 0%,var(--cream) 100%);box-shadow:0 22px 48px -36px rgba(var(--navy-rgb),.34)}
.article .quiz-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.article .quiz h3{font-size:1.4rem;margin:9px 0 0}
.article .quiz-intro{font-size:.95rem;color:var(--muted);margin:8px 0 0}
.article .quiz-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:24px}
.article .quiz-q{margin:0;padding-top:22px;border-top:1px solid var(--line)}
.article .quiz-q:first-child{padding-top:0;border-top:0}
.article .q-text{font-size:1.02rem;font-weight:700;line-height:1.45;color:var(--ink);margin:0 0 14px}
.article .q-text b{color:var(--accent);font-weight:800;margin-right:7px}
.q-opts{display:grid;gap:8px}
/* appearance:none is required: Chrome repaints a disabled button with the native
   control background, which wipes out the navy fill on the revealed answer */
.q-opt{appearance:none;-webkit-appearance:none;display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;font:inherit;font-size:.97rem;line-height:1.45;color:#2c2b26;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.q-opt::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:2px;border:2px solid rgba(var(--navy-rgb),.35);border-radius:50%;font-size:.72rem;font-weight:800;line-height:15px;text-align:center}
.q-opt:hover:not(:disabled){border-color:rgba(var(--navy-rgb),.45);background:var(--cream)}
.q-opt:disabled{cursor:default}
.q-opt.is-right{border-color:var(--dark);background:var(--dark);color:var(--cream);font-weight:600}
.q-opt.is-right::before{content:"\2713";border-color:var(--cream);color:var(--cream)}
.q-opt.is-wrong{opacity:.72;border-color:var(--line)}
.q-opt.is-wrong::before{content:"\2715";border-color:rgba(var(--navy-rgb),.35);color:var(--muted)}
.q-opt .q-mark{margin-left:auto;padding-left:12px;font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;align-self:center}
.q-why{font-size:.95rem;line-height:1.6;color:var(--muted);margin:13px 0 0;padding-left:15px;border-left:2px solid rgba(var(--navy-rgb),.3)}
.q-why b{color:var(--ink)}

.blog-hero{padding:clamp(50px,8vw,90px) 0 0}
.blog-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);max-width:14ch}
.blog-hero p{color:var(--muted);font-size:1.15rem;margin-top:20px;max-width:52ch}
.blog-hero .blog-services{font-size:1rem;max-width:68ch}
.blog-hero .blog-services a,.article .related-service a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.blog-hero .blog-services a:hover,.article .related-service a:hover{color:var(--accent)}
.blog-list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);padding:clamp(40px,6vw,80px) 0}
.blog-card{display:flex;flex-direction:column;border-top:1px solid var(--ink);padding-top:26px}
.blog-card .post-cat{color:var(--accent)}
.blog-card h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:14px 0 12px;line-height:1.1}
.blog-card p{color:var(--muted);font-size:1rem;line-height:1.55;flex:1}
.blog-card .post-link{margin-top:20px;font-weight:600;color:var(--accent);font-size:.92rem}
@media(max-width:760px){.blog-list{grid-template-columns:1fr}}

.article .related{margin-top:60px;padding-top:34px;border-top:1px solid var(--line)}
.article .related h2{font-size:1.25rem;margin:0 0 22px;letter-spacing:-.02em}
.article .related-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.article .related-list a{display:flex;flex-direction:column;gap:9px;padding:22px;border:1px solid var(--line);border-radius:12px;text-decoration:none;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.article .related-list a:hover{border-color:var(--accent);transform:translateY(-3px)}
.article .related-cat{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.article .related-title{font-size:1rem;font-weight:600;line-height:1.35;color:var(--ink)}
.article .related-service{margin:24px 0 0;color:var(--muted);font-size:1rem;line-height:1.6}
@media(max-width:760px){.article .related-list{grid-template-columns:1fr;gap:14px}}

.article .standfirst{font-size:1.18rem;line-height:1.55;color:var(--muted);margin:0 0 6px;max-width:62ch}
.article .page-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0 10px;padding:26px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,#fff 0%,var(--cream) 100%)}
.article .page-metrics div{display:flex;flex-direction:column;gap:5px}
.article .page-metrics b{font-size:clamp(1.5rem,3vw,2rem);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.article .page-metrics span{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.article .table-wrap{overflow-x:auto;margin:26px 0;-webkit-overflow-scrolling:touch}
.article .data-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.article .data-table caption{text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:12px}
.article .data-table th,.article .data-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.article .data-table thead th{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom-width:2px}
.article .data-table tbody th{font-weight:600;color:var(--ink)}
.article .data-table tbody tr:last-child th,.article .data-table tbody tr:last-child td{border-bottom:none}
.article .faq{margin-top:56px;padding-top:34px;border-top:1px solid var(--line)}
.article .faq dt{font-weight:700;font-size:1.08rem;color:var(--ink);margin-top:26px}
.article .faq dd{margin:9px 0 0;color:var(--muted);line-height:1.62}
@media(max-width:760px){.article .page-metrics{grid-template-columns:1fr;gap:14px;padding:20px}}

.cs-body .cs-name{font-size:1.45rem;line-height:1.1;letter-spacing:-.028em;margin:6px 0 10px;color:var(--ink)}
.cs-body .cs-link{display:inline-block;margin-top:18px;font-weight:600;font-size:.92rem;color:var(--accent);text-decoration:none}
.cs-body .cs-link:hover{text-decoration:underline}
.logo-names{margin-top:22px;text-align:center;font-size:.92rem;color:var(--muted)}
.faq-sec .faq-list{max-width:78ch}
.faq-sec .faq-list dt{font-weight:700;font-size:1.1rem;color:var(--ink);margin-top:28px}
.faq-sec .faq-list dd{margin:9px 0 0;color:var(--muted);line-height:1.62}
footer .foot-h{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);opacity:.65;margin:0 0 14px}

.article .cites{font-size:.86rem;color:var(--muted);margin-top:-6px}
.article .cites a{color:var(--accent)}

/* ---- "Get the quick brief from your AI" -------------------------------- */
/* Panel at the top of every blog post: five chips that open an assistant with
   this page's URL and a fixed prompt already typed. Markup and prompt come from
   .claude/scripts/lib/ai-brief.cjs, shared with the marketlead.com.au blog. Chips
   are plain anchors, so the block needs no JS. Scoped under .article because
   `.article a` paints links navy and underlines them, which wrecks a chip. */
.article .ai-brief{margin:0 0 40px;padding:22px 24px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,#fff 0%,var(--cream) 100%)}
.article .ai-brief-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.article .ai-brief-lead{font-size:.97rem;line-height:1.55;color:var(--muted);margin:0 0 16px;max-width:60ch}
.article .ai-chips{display:flex;flex-wrap:wrap;gap:8px}
.article .ai-chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;box-sizing:border-box;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:.82rem;font-weight:600;letter-spacing:.02em;text-decoration:none;transition:border-color .18s var(--ease),background .18s var(--ease)}
.article .ai-chip:hover{background:var(--cream);border-color:var(--accent);color:var(--ink)}
.article .ai-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.article .ai-chip svg{display:block;flex:none}

/* WIDE COMMERCIAL PAGES (2026-09-17, Michael: case studies and service pages read "very narrow down the middle").
   Blog posts keep the 760px reading column; build-pages.mjs pages get the wide one. */
.article.article-wide{max-width:calc(1160px + 2 * var(--pad))}
.article.article-wide .standfirst{max-width:none}

/* CASE STUDY CARDS: product photo, client logo, results overlaid, whole card clickable */
.article .cs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:36px 0 10px}
.article a.cs-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;border-radius:20px;overflow:hidden;background:var(--dark);color:#fff;text-decoration:none;isolation:isolate;box-shadow:0 26px 50px -34px rgba(23,25,28,.55)}
.cs-card .cs-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--ease)}
.cs-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,20,22,0) 0%,rgba(20,20,22,.2) 25%,rgba(20,20,22,.88) 52%,rgba(20,20,22,.97) 100%)}
.cs-card:hover .cs-card-img,.cs-card:focus-visible .cs-card-img{transform:scale(1.05)}
.cs-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cs-card-logo{position:absolute;top:18px;left:18px;display:flex;align-items:center;height:52px;padding:10px 16px;background:#fff;border-radius:12px;box-shadow:0 8px 20px -10px rgba(0,0,0,.35)}
.cs-card-logo img{height:30px;max-width:150px;width:auto;object-fit:contain}
.cs-card-logo img.logo-dark{filter:brightness(0)}
.cs-card-body{display:flex;flex-direction:column;gap:8px;padding:24px}
.cs-card-tag{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#D6BF98}
.cs-card-name{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.08}
.cs-card-metrics{display:flex;gap:22px;margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.cs-card-metrics span{display:flex;flex-direction:column;gap:3px}
.cs-card-metrics b{font-size:1.35rem;letter-spacing:-.02em;text-transform:none;color:#fff;white-space:nowrap}
.cs-card-cta{margin-top:10px;font-weight:600;font-size:.95rem;color:#fff}
.cs-card:hover .cs-card-cta{text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.article .cs-grid{grid-template-columns:1fr}.article a.cs-card{min-height:420px}}

/* SMALL PHONES (2026-09-17): keep "Harvest Lead" on one line and stop the footer grid pushing past 360px */
@media(max-width:420px){
  .foot-top>div{min-width:0}
  footer li a{overflow-wrap:anywhere}
  .brand{font-size:18px;gap:7px}
  .nav-right{gap:10px}
  nav .nav-right .btn{padding:10px 16px!important;font-size:14px}
}


/* CASE STUDY PAGES + AUTHOR PHOTO (2026-09-17) */
.article .byline.has-avatar{display:flex;align-items:center;gap:12px}
.article .byline-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 18%;flex-shrink:0}
.article .cs-page-logo{display:inline-flex;align-items:center;height:64px;padding:12px 20px;margin-bottom:26px;background:#fff;border:1px solid var(--line);border-radius:14px}
.article .cs-page-logo img{height:38px;width:auto;max-width:220px;object-fit:contain}
.article .cs-page-logo img.logo-dark{filter:brightness(0)}
.article .cs-chart{margin:26px 0 8px;padding:26px 28px;background:#fff;border:1px solid var(--line);border-radius:14px}
.article .cs-chart figcaption{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.article .cs-chart figcaption b{font-size:1.05rem;color:var(--ink)}
.article .cs-chart figcaption span{font-size:.92rem;color:var(--muted)}
.cs-bar-row{display:grid;grid-template-columns:160px 1fr 70px;align-items:center;gap:14px;margin-top:12px}
.cs-bar-label{font-size:.92rem;font-weight:600;color:var(--ink)}
.cs-bar-track{height:34px}
.cs-bar{display:block;height:100%;width:var(--pct);background:#1F2328;border-radius:0 4px 4px 0}
.cs-bar-val{font-weight:800;font-size:1.1rem;color:var(--ink);text-align:right}
@media(max-width:560px){.cs-bar-row{grid-template-columns:1fr 64px;row-gap:6px}.cs-bar-label{grid-column:1 / -1}}
.article .contact-page{max-width:760px;margin:30px 0 10px}