/* ============================================================
   DF ACCOUNTING LTD - brand tokens
   ============================================================ */
:root{
  --ink:#123A33;          /* deep petrol green, wordmark */
  --ink-deep:#0D2C27;     /* deeper ground */
  --ink-soft:#1C4A42;
  --cream:#F2ECE1;        /* warm cream, logo ground */
  --cream-hi:#FAF6EF;
  --gold:#C8873C;
  --gold-hi:#DDA55E;
  --radius:14px;
  --maxw:1140px;
}

/* --- THEME: LIGHT ------------------------------------------ */
body.theme-light{
  --bg:var(--cream); --fg:var(--ink); --muted:#4A6B64;
  --line:rgba(18,58,51,.14); --card:#FBF8F2; --accent:var(--gold);
  --logo-ink:var(--ink); --logo-gold:var(--gold);
  --btn-fg:var(--cream-hi); --btn-bg:var(--ink);
}
body.theme-light .inv{
  --bg:var(--cream-hi); --fg:var(--ink); --muted:#4A6B64;
  --line:rgba(18,58,51,.14); --card:#F2ECE1; --accent:var(--gold);
  --logo-ink:var(--ink); --logo-gold:var(--gold);
  --btn-fg:var(--cream-hi); --btn-bg:var(--ink);
}

/* --- THEME: DARK ------------------------------------------- */
body.theme-dark{
  --bg:var(--ink); --fg:var(--cream); --muted:#A9C3BC;
  --line:rgba(242,236,225,.16); --card:#17443C; --accent:var(--gold-hi);
  --logo-ink:var(--cream); --logo-gold:var(--gold-hi);
  --btn-fg:var(--ink); --btn-bg:var(--cream);
}
body.theme-dark .inv{
  --bg:var(--ink-deep); --fg:var(--cream); --muted:#A9C3BC;
  --line:rgba(242,236,225,.16); --card:#153E37; --accent:var(--gold-hi);
  --logo-ink:var(--cream); --logo-gold:var(--gold-hi);
  --btn-fg:var(--ink); --btn-bg:var(--cream);
}

/* --- THEME: COMBINATION ------------------------------------ */
body.theme-combo{
  --bg:var(--cream); --fg:var(--ink); --muted:#4A6B64;
  --line:rgba(18,58,51,.14); --card:#FBF8F2; --accent:var(--gold);
  --logo-ink:var(--ink); --logo-gold:var(--gold);
  --btn-fg:var(--cream-hi); --btn-bg:var(--ink);
}
body.theme-combo .inv{
  --bg:var(--ink); --fg:var(--cream); --muted:#A9C3BC;
  --line:rgba(242,236,225,.16); --card:#17443C; --accent:var(--gold-hi);
  --logo-ink:var(--cream); --logo-gold:var(--gold-hi);
  --btn-fg:var(--ink); --btn-bg:var(--cream);
}

/* ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
section, footer, .inv{background:var(--bg); color:var(--fg)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:1.12; margin:0}
p{margin:0 0 18px}
a{color:inherit}

.eyebrow{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:700; color:var(--accent); margin:0 0 14px
}
.lede{font-size:19px; color:var(--muted); max-width:62ch}

/* ---------- logo lockup ---------- */
.logo{display:block; width:332px; height:auto; overflow:visible}
.logo .chev-gold{stroke:var(--logo-gold)}
.logo .chev-ink{stroke:var(--logo-ink)}
.logo .wordmark{fill:var(--logo-ink)}
.logo .strap{fill:var(--logo-gold)}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:var(--bg);
  border-bottom:1px solid var(--line); backdrop-filter:saturate(140%) blur(6px);
}
.nav-in{display:flex; align-items:center; gap:28px; padding:16px 26px; max-width:var(--maxw); margin:0 auto}
.nav-links{display:flex; gap:24px; margin-left:auto; align-items:center}
.nav-links a{
  text-decoration:none; font-size:17px; font-weight:500; color:var(--muted);
  transition:color .2s
}
.nav-links a:hover{color:var(--accent)}
.btn{
  display:inline-block; text-decoration:none; font-weight:600; font-size:15px;
  padding:12px 24px; border-radius:999px; white-space:nowrap; background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid transparent; transition:transform .18s ease, opacity .18s ease;
}
.btn:hover{transform:translateY(-2px); opacity:.92}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--line)}
.btn-gold{background:var(--gold); color:#20140A}
body.theme-dark .btn-gold, body.theme-combo .inv .btn-gold{background:var(--gold-hi); color:#20140A}
.btn-lg{padding:15px 30px; font-size:16px}
/* .nav-links a{color:var(--muted)} above has higher specificity than .btn's own
   color, so the nav "Book a call" pill was rendering muted grey-green text on its
   dark background (~2.1:1 contrast, fails WCAG AA). Restore the intended btn-fg
   colour at the specificity this needs to win at. */
.nav-links a.btn, .nav-links a.btn:hover{color:var(--btn-fg)}

/* ---------- mobile nav toggle ---------- */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:40px; height:40px; padding:0; border:1px solid var(--line); border-radius:10px;
  background:transparent; cursor:pointer; flex-shrink:0;
}
.nav-toggle-bar{display:block; width:20px; height:2px; background:var(--fg); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.nav.open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-toggle-bar:nth-child(2){opacity:0}
.nav.open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:86px 0 76px; position:relative; overflow:hidden}
.hero:after{
  content:''; position:absolute; right:-160px; top:-160px; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle, var(--accent) 0%, transparent 68%);
  opacity:.12; pointer-events:none
}
.hero h1{font-size:clamp(38px,5.6vw,62px); letter-spacing:-.01em; max-width:16ch}
.hero .lede{margin-top:22px; font-size:20px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
.hero-note{margin-top:26px; font-size:14.5px; color:var(--muted)}

/* ---------- trust strip ---------- */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0}
.strip-in{display:flex; flex-wrap:wrap; gap:14px 42px; justify-content:space-between}
.strip-item{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--muted)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none}

/* ---------- generic band ---------- */
.band{padding:82px 0}
.band-head{max-width:64ch; margin-bottom:44px}
.band-head h2{font-size:clamp(28px,3.7vw,42px)}
.band-head p{margin-top:16px; color:var(--muted); font-size:18px}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start}
.about-body p{font-size:18.5px; max-width:56ch}
.about-body .pull{
  font-family:'Fraunces',serif; font-size:22px; line-height:1.4; color:var(--fg);
  border-left:3px solid var(--accent); padding-left:20px; margin:28px 0 0
}
.side-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px
}
.side-card h3{font-size:19px; margin-bottom:14px}
.side-card ul{margin:0; padding:0; list-style:none}
.side-card li{
  font-size:15.5px; padding:9px 0 9px 24px; position:relative; color:var(--muted);
  border-bottom:1px solid var(--line)
}
.side-card li:last-child{border-bottom:0}
.side-card li a{text-decoration:none}
.side-card li a:hover, .side-card li a:focus-visible{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.side-card li:before{
  content:''; position:absolute; left:0; top:18px; width:10px; height:2px;
  background:var(--accent); border-radius:2px
}
.side-card .btn{margin-top:20px; width:100%; text-align:center}

/* ---------- services ---------- */
.pkg{
  border:1px solid var(--line); border-radius:18px; padding:38px 34px; background:var(--card);
  display:grid; grid-template-columns:1fr 1.25fr; gap:40px; align-items:center
}
.pkg-tag{
  display:inline-block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--accent); border:1px solid var(--accent);
  padding:5px 12px; border-radius:999px; margin-bottom:16px
}
.pkg h3{font-size:clamp(26px,3.2vw,34px)}
.pkg p{margin-top:14px; color:var(--muted); font-size:17px}
.svc-list{display:grid; grid-template-columns:repeat(2,1fr); gap:2px 0; margin:0; padding:0; list-style:none}
.svc-list li{
  display:flex; gap:12px; align-items:flex-start; padding:14px 0;
  border-bottom:1px solid var(--line); font-size:16.5px; font-weight:500
}
.svc-list li:nth-last-child(-n+2){border-bottom:0}
.tick{flex:none; margin-top:4px}
.svc-sub{display:block; font-size:13.5px; font-weight:400; color:var(--muted); margin-top:2px}
.fee-note{margin-top:26px; font-size:15px; color:var(--muted)}

/* ---------- CAPID ---------- */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; margin-top:8px}
.pillar{padding:30px 26px 30px 0; border-top:2px solid var(--accent); margin-right:26px}
.pillar .ltr{
  font-family:'Fraunces',serif; font-size:44px; font-weight:700; line-height:1;
  color:var(--accent); display:block; margin:18px 0 12px
}
.pillar h3{font-size:19px; margin-bottom:8px}
.pillar p{font-size:15.5px; color:var(--muted); margin:0}
.capid-note{
  font-family:'Fraunces',serif; font-size:clamp(20px,2.4vw,26px); line-height:1.45;
  max-width:52ch; margin-top:46px
}

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px}
.step{border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; background:var(--card)}
.step-n{
  font-family:'Fraunces',serif; font-weight:700; font-size:13px; letter-spacing:.08em;
  color:var(--accent); display:block; margin-bottom:14px
}
.step h3{font-size:19px; margin-bottom:10px}
.step p{font-size:15.5px; color:var(--muted); margin:0}
.steps-5{grid-template-columns:repeat(5,1fr); gap:18px; counter-reset:none}
.steps-5 .step{padding:24px 20px}
.steps-5 .step h3{font-size:18px}
@media (max-width:1100px){
  .steps-5{grid-template-columns:repeat(2,1fr)}
  .steps-5 .step:last-child{grid-column:1/-1}
}
@media (max-width:640px){
  .steps-5{grid-template-columns:1fr}
}
.process-note{max-width:68ch; margin-top:34px}
.process-note p{color:var(--muted); font-size:17px}
.software{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:34px}
.software-label{font-size:14px; font-weight:600; color:var(--muted); margin-right:8px}
.chip{display:inline-block; border:1px solid var(--line); border-radius:999px; padding:8px 18px; font-size:15px; font-weight:600; color:var(--fg); background:var(--card); line-height:1.3}
.process-foot{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}

/* ---------- CTA ---------- */
.cta{padding:86px 0; text-align:center}
.cta h2{font-size:clamp(30px,4.2vw,46px); max-width:18ch; margin:0 auto}
.cta p{margin:20px auto 0; color:var(--muted); font-size:18.5px; max-width:56ch}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px}

/* ---------- footer ---------- */
.foot{background:var(--bg); color:var(--fg); padding:56px 0 40px; border-top:1px solid var(--line)}
.foot-grid{display:grid; grid-template-columns:1.45fr 1fr 1fr; gap:40px; align-items:start}
.foot h4{
  font-family:'Hanken Grotesk',sans-serif; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:700; color:var(--accent); margin:0 0 14px
}
.foot-col a{display:block; text-decoration:none; color:var(--muted); font-size:15.5px; padding:5px 0}
.foot-col a:hover{color:var(--accent)}
.foot-logo-link{display:block; text-decoration:none; line-height:0; overflow:visible; max-width:100%}
.foot-brand{min-width:0}
.foot-brand .logo{width:332px; max-width:100%; height:auto}
.foot-blurb{margin:18px 0 0; font-size:14.5px; color:var(--muted); max-width:44ch; line-height:1.6}
.foot-legal{
  margin-top:42px; padding-top:24px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--muted); line-height:1.7
}
.foot-legal strong{color:var(--fg); font-weight:600}

/* ---------- commitments list ---------- */
.commitments{margin:26px 0 0; padding:0; list-style:none; border-top:1px solid var(--line)}
.commitments li{
  padding:16px 0; border-bottom:1px solid var(--line);
  font-size:15.5px; color:var(--muted); line-height:1.55
}
.commitments li span{
  display:block; font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:18px; color:var(--fg); margin-bottom:4px
}

/* ---------- portraits ---------- */
.portrait{
  position:relative; border-radius:16px; overflow:hidden; background:var(--card);
  border:1px solid var(--line); line-height:0
}
.portrait img{width:100%; height:auto; display:block}
.portrait:after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--accent)
}
.hero-split{display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:center}
.hero-split .portrait{max-width:360px; margin-left:auto}
.about-portrait{max-width:330px}
#about .portrait img{max-height:430px; object-fit:cover; object-position:center 22%}
/* .about-portrait (about.html and contact.html sidebar photos) never got the same
   height-cap/crop treatment as the homepage's #about photo above — it was scoped to
   an id that only exists on index.html, so these two rendered as full, uncropped
   532x799-ish portraits (~495-500px tall) next to a much shorter sidebar card,
   reading as oversized. Capping and cropping to match fixes both pages at once. */
.about-portrait img{max-height:380px; object-fit:cover; object-position:center 20%}
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr; gap:34px}
  .hero-split .portrait{max-width:300px; margin:0}
}

/* ---------- year-round callout ---------- */
.yearround{
  margin:34px 0 0; padding:30px 32px;
  border:1px solid var(--accent); border-radius:var(--radius);
  background:transparent; display:flex; gap:24px; align-items:flex-start
}
.yearround-mark{flex:none; width:44px; height:44px; color:var(--accent); margin-top:2px}
.yearround-mark svg{width:100%; height:100%; display:block}
.yearround h3{
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:21px;
  margin:0 0 10px; line-height:1.25
}
.yearround p{margin:0; font-size:16px; color:var(--muted); max-width:76ch}
@media (max-width:640px){
  .yearround{flex-direction:column; gap:16px; padding:26px 22px}
}

/* ---------- service add-ons ---------- */
.addon-head{margin:64px 0 26px}
.addon-head h3{font-size:clamp(22px,2.7vw,28px)}
.addon-head p{margin-top:10px; color:var(--muted); font-size:16.5px}
.addons{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px}
.addon{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  padding:30px 26px
}
.addon h4{
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:20px;
  margin:0 0 12px; line-height:1.25
}
.addon > p{font-size:15.5px; color:var(--muted); margin:0 0 18px}
.addon ul{margin:0; padding:0; list-style:none; border-top:1px solid var(--line)}
.addon li{
  font-size:15px; padding:9px 0 9px 20px; position:relative;
  border-bottom:1px solid var(--line)
}
.addon li:before{
  content:''; position:absolute; left:0; top:17px; width:9px; height:2px;
  background:var(--accent); border-radius:2px
}
.addon-note{
  margin:16px 0 0 !important; font-size:13.5px; font-style:italic; color:var(--muted)
}

/* ---------- testimonials ---------- */
.quotes{columns:2; column-gap:24px}
.quote{
  break-inside:avoid; margin:0 0 24px; padding:30px 28px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  display:inline-block; width:100%
}
.quote h3{
  font-size:19px; margin:0 0 16px; color:var(--fg);
  padding-left:26px; position:relative
}
.quote h3:before{
  content:'\201C'; position:absolute; left:-2px; top:-10px;
  font-family:'Fraunces',Georgia,serif; font-size:44px; line-height:1;
  color:var(--accent); opacity:.85
}
.quote blockquote{
  margin:0; font-size:15.5px; line-height:1.72; color:var(--muted)
}
.quote figcaption{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line)
}
.quote .client{
  font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent)
}
.quote .when{font-size:13px; color:var(--muted)}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .quotes{columns:1}
  .about-grid{grid-template-columns:1fr; gap:36px}
  .pkg{grid-template-columns:1fr; gap:28px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav-links a:not(.btn){display:none}
  .hero{padding:56px 0 52px}
  .band{padding:60px 0}
  .svc-list{grid-template-columns:1fr}
  .svc-list li{border-bottom:1px solid var(--line)}
  .svc-list li:last-child{border-bottom:0}
  .pillar{margin-right:0}
  .foot-grid{grid-template-columns:1fr}
  .logo{width:172px}
  .nav-in{gap:8px; padding:12px 16px}
  .nav-links .btn{padding:11px 18px; font-size:14.5px}
  .nav-toggle{width:36px; height:36px}
}

/* ---------- inner-page hero ---------- */
.phero{padding:74px 0 58px; position:relative; overflow:hidden}
.phero:after{
  content:''; position:absolute; right:-170px; top:-190px; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle, var(--accent) 0%, transparent 68%);
  opacity:.12; pointer-events:none
}
.phero h1{font-size:clamp(34px,5vw,54px); letter-spacing:-.01em; max-width:17ch}
.phero .lede{margin-top:20px}
.phero .hero-cta{margin-top:30px}

/* ---------- long-form prose ---------- */
.prose{max-width:64ch}
.prose p{font-size:18px}
.prose h3{
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:22px;
  margin:38px 0 12px
}
.prose .pull{
  font-family:'Fraunces',serif; font-size:22px; line-height:1.42; color:var(--fg);
  border-left:3px solid var(--accent); padding-left:20px; margin:30px 0
}

/* ---------- two-column split ---------- */
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start}

/* ---------- sector grid ---------- */
.sectors{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px}
.sector{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  padding:20px 20px 20px 40px; position:relative; font-weight:600; font-size:16px
}
.sector:before{
  content:''; position:absolute; left:20px; top:27px; width:11px; height:2px;
  background:var(--accent); border-radius:2px
}
.sector span{display:block; font-weight:400; font-size:14px; color:var(--muted); margin-top:5px}

/* ---------- fact list ---------- */
.facts{margin:0; padding:0; list-style:none; border-top:1px solid var(--line)}
.facts li{padding:15px 0; border-bottom:1px solid var(--line); font-size:15.5px}
/* .facts lists live inside .side-card containers, so they were also picking up
   .side-card li:before's little accent dash. .facts has no left padding to make
   room for it, so the dash landed right on top of the first letter of each label
   (e.g. "REGISTERED"). Cancel it here rather than just hiding it on mobile, since
   it was never wanted on .facts at any width. */
.facts li:before{content:none}
.facts b{
  display:block; font-family:'Hanken Grotesk',sans-serif; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin-bottom:5px; font-weight:700
}

/* ---------- detailed service blocks ---------- */
.svc-detail{border-top:2px solid var(--accent); padding:30px 0 34px; margin-top:0}
.svc-detail .n{
  font-family:'Fraunces',serif; font-weight:700; font-size:13px; letter-spacing:.1em;
  color:var(--accent); display:block; margin-bottom:10px
}
.svc-detail h3{font-family:'Fraunces',serif; font-weight:600; font-size:24px; margin:0 0 12px}
.svc-detail p{font-size:16.5px; color:var(--muted); max-width:70ch; margin:0}
.svc-detail .inc{
  margin:16px 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:4px 24px
}
.svc-detail .inc li{font-size:15px; padding:6px 0 6px 20px; position:relative; color:var(--muted)}
.svc-detail .inc li:before{
  content:''; position:absolute; left:0; top:15px; width:9px; height:2px;
  background:var(--accent); border-radius:2px
}

/* ---------- pillar deep-dive ---------- */
.pillar-full{
  display:grid; grid-template-columns:120px 1fr; gap:34px; align-items:start;
  padding:44px 0; border-top:1px solid var(--line)
}
.pillar-full:first-of-type{border-top:2px solid var(--accent)}
.pillar-full .big{
  font-family:'Fraunces',serif; font-weight:700; font-size:86px; line-height:.85;
  color:var(--accent)
}
.pillar-full h3{font-family:'Fraunces',serif; font-weight:600; font-size:26px; margin:0 0 6px}
.pillar-full .kicker{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--accent); margin:0 0 16px
}
.pillar-full p{font-size:16.5px; color:var(--muted); max-width:68ch}
.pillar-full .commit{
  margin-top:18px; padding:18px 20px; border-left:3px solid var(--accent);
  background:var(--card); border-radius:0 var(--radius) var(--radius) 0
}
.pillar-full .commit b{
  display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:7px
}
.pillar-full .commit p{margin:0; font-size:16px; color:var(--fg)}

/* ---------- contact panels ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px}
.cpanel{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  padding:32px 28px; display:flex; flex-direction:column
}
.cpanel h3{font-family:'Fraunces',serif; font-weight:600; font-size:21px; margin:0 0 10px}
.cpanel p{font-size:15.5px; color:var(--muted); flex:1}
.cpanel .btn{margin-top:6px; text-align:center}
.cpanel .big-link{
  font-family:'Fraunces',serif; font-size:19px; word-break:break-word;
  text-decoration:none; color:var(--accent); display:inline-block; margin-top:4px
}

/* ---------- nav active ---------- */
.nav-links a.active{color:var(--accent); font-weight:700}

@media (max-width:900px){
  .split{grid-template-columns:1fr; gap:34px}
  .pillar-full{grid-template-columns:1fr; gap:12px; padding:34px 0}
  .pillar-full .big{font-size:60px}
}

/* ---------- skip link (accessibility) ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
  background:var(--ink); color:var(--cream-hi); padding:14px 22px; border-radius:0 0 10px 0;
  font-weight:600; font-size:15px; text-decoration:none; z-index:100
}
.skip-link:focus{left:0; top:0; width:auto; height:auto; overflow:visible}

/* ---------- tools nav / promo ---------- */
.tools-promo{
  border:1px solid var(--accent); border-radius:var(--radius); background:transparent;
  padding:32px 30px; display:flex; gap:24px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  margin-top:20px
}
.tools-promo-text h3{font-size:20px; margin-bottom:8px}
.tools-promo-text p{margin:0; color:var(--muted); font-size:15px; max-width:52ch}
.tools-promo-links{display:flex; gap:12px; flex-wrap:wrap}
.tool-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.tool-card-link{
  display:block; text-decoration:none; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); padding:28px 26px; transition:.18s
}
.tool-card-link:hover{border-color:var(--accent); transform:translateY(-2px)}
.tool-card-link .tag{
  display:inline-block; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--accent); margin-bottom:12px
}
.tool-card-link h3{font-size:19px; margin-bottom:8px; color:var(--fg)}
.tool-card-link p{margin:0; font-size:15px; color:var(--muted)}
.tool-card-link .go{display:block; margin-top:14px; font-size:14px; font-weight:600; color:var(--accent)}
@media (max-width:640px){ .tool-cards{grid-template-columns:1fr} }

/* ---------- FAQ accordion ---------- */
.faq-list{margin:0; padding:0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{
  width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:18px; color:var(--fg); font-variation-settings:inherit;
}
.faq-q .plus{
  flex:none; width:26px; height:26px; position:relative; transition:transform .25s ease
}
.faq-q .plus:before, .faq-q .plus:after{
  content:''; position:absolute; background:var(--accent); border-radius:2px
}
.faq-q .plus:before{left:2px; right:2px; top:12px; height:2px}
.faq-q .plus:after{top:2px; bottom:2px; left:12px; width:2px; transition:opacity .2s ease}
.faq-item.open .faq-q .plus:after{opacity:0}
.faq-a{
  max-height:0; overflow:hidden; transition:max-height .3s ease
}
.faq-a-in{padding:0 4px 24px; font-size:15.5px; color:var(--muted); max-width:70ch}
.faq-a-in p{margin:0}
.faq-item.open .faq-a{max-height:600px}

/* ---------- progressive disclosure (service details) ---------- */
.svc-detail{cursor:default}
.svc-detail-head{
  display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.svc-detail-head .htext{flex:1}
.svc-detail-toggle{
  flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:.2s; background:var(--bg)
}
.svc-detail-toggle svg{width:14px; height:14px; transition:transform .25s ease}
.svc-detail.open .svc-detail-toggle svg{transform:rotate(180deg)}
.svc-detail.open .svc-detail-toggle{border-color:var(--accent)}
.svc-detail p.svc-summary{margin:10px 0 0}
.svc-detail-body{max-height:0; overflow:hidden; transition:max-height .35s ease}
.svc-detail.open .svc-detail-body{max-height:600px}
.svc-detail-body .inner{padding-top:16px}
.svc-expand-all{
  margin-top:6px; background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; font-size:13.5px; font-weight:600; color:var(--fg); cursor:pointer; font-family:inherit
}
.svc-expand-all:hover{border-color:var(--accent)}

/* ---------- interactive CAPID checklist ---------- */
.capid-check{margin:26px 0 0; padding:0; list-style:none; border-top:1px solid var(--line)}
.capid-check li{border-bottom:1px solid var(--line)}
.capid-check button{
  width:100%; text-align:left; background:transparent; border:0; cursor:pointer; font-family:inherit;
  padding:16px 0; display:flex; align-items:flex-start; gap:14px; color:inherit
}
.capid-check .box{
  flex:none; width:20px; height:20px; margin-top:2px; border-radius:5px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:.15s
}
.capid-check .box svg{width:12px; height:12px; opacity:0; transition:.15s; stroke:var(--btn-fg)}
.capid-check li.checked .box{background:var(--accent); border-color:var(--accent)}
.capid-check li.checked .box svg{opacity:1}
.capid-check .txt span{
  display:block; font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:16.5px; color:var(--fg); margin-bottom:3px
}
.capid-check .txt p{margin:0; font-size:14.5px; color:var(--muted); line-height:1.55}
.capid-check-note{margin-top:16px; font-size:13px; color:var(--muted); font-style:italic}

/* ---------- 404 page ---------- */
.err404{padding:120px 0; text-align:center}
.err404 .code{font-family:'Fraunces',serif; font-weight:700; font-size:clamp(60px,10vw,120px); color:var(--accent); line-height:1}
.err404 h1{margin-top:10px}
.err404 p{margin:18px auto 0; max-width:52ch; color:var(--muted); font-size:18px}
.err404 .hero-cta{justify-content:center; margin-top:30px}

/* ---------- tablet-width nav fix (7 nav items now that Tools exists) ---------- */
/* The full 6-link text nav plus the Book a call button no longer fits between
   roughly 641px and 1040px now that Tools has been added. Rather than fight it
   with ever-smaller type, extend the same "logo + single CTA" collapse the
   design already uses below 640px up through this whole band — every page
   still reaches About/Services/Method/Testimonials/Tools/Contact via the
   footer nav, which is unaffected. */
@media (max-width:1100px) and (min-width:641px){
  .nav-links a:not(.btn){display:none}
  .logo{width:250px}
  .nav-in{gap:14px}
}

/* ---------- mobile/tablet nav: hamburger menu ----------
   Below 1100px the links above collapse away, leaving only "Book a call"
   reachable from the bar — everything else was previously reachable only by
   scrolling all the way to the footer nav. This restores it via a proper
   toggle: the hamburger button is a sibling of .nav-links (added in the page
   markup, not inside it) so it stays put in the bar and keeps acting as the
   close control once .nav-links becomes an open dropdown panel. */
@media (max-width:1100px){
  .nav-toggle{display:flex}
  .nav.open .nav-links{
    display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:stretch; margin-left:0; gap:0; background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:0 16px 28px rgba(13,44,39,.16); padding:6px 26px 22px; max-height:calc(100vh - 100%);
    overflow-y:auto;
  }
  .nav.open .nav-links a:not(.btn){
    display:block; padding:14px 2px; border-bottom:1px solid var(--line); font-size:17px; color:var(--fg);
  }
  .nav.open .nav-links a.btn{display:block; width:100%; text-align:center; margin-top:14px}
}

/* ---------- eight-link nav fit (adding Industries + Blog pushed the full
   desktop nav past the fixed 1140px --maxw container at every width above
   1100px, not just a narrow band, since the container doesn't grow with the
   viewport). Tightening gaps and type size here closes that gap without
   touching the already-tuned collapse tiers below 1100px. ---------- */
@media (min-width:1101px){
  .nav-in{gap:18px}
  .nav-links{gap:14px}
  .nav-links a{font-size:15.5px}
  .nav-links .btn{padding:11px 18px; font-size:14.5px}
}

/* ---------- narrow-device nav fix (pre-existing overflow below ~380px) ---------- */
/* At the smallest real device widths (320-360px), the fixed-width logo plus the
   "Book a call" button don't fit inside the nav row and force horizontal scroll.
   Shrinking the logo further here closes that gap without touching the 640px tier. */
@media (max-width:380px){
  .logo{width:130px}
  .nav-in{padding:10px 14px; gap:6px}
  .nav-links .btn{padding:9px 14px; font-size:13.5px}
  .nav-toggle{width:32px; height:32px}
}

/* ---------- long ghost-button text on narrow screens ---------- */
/* Prose CTAs like "The framework behind these commitments" are short one-line
   links on desktop but don't fit alongside .btn's white-space:nowrap at
   320-360px. Let text CTAs wrap below 480px; short button labels are
   unaffected since they never needed the nowrap in the first place. */
@media (max-width:480px){
  .btn{white-space:normal; text-align:center}
}

/* ---------- long-form article body (blog / industries / services pages) ---------- */
/* Extends .prose (used for the single "Why this matters" block on services.html)
   with heading, list and blockquote styling, since these new content-heavy pages
   render full articles rather than one or two short paragraphs. */
.article-body h2{
  font-size:clamp(22px,2.6vw,28px); margin:42px 0 14px; letter-spacing:-.005em
}
.article-body h2:first-child{margin-top:0}
.article-body h3{margin:32px 0 10px}
.article-body ul{margin:0 0 20px; padding-left:22px}
.article-body li{margin:0 0 8px; color:var(--fg)}
.article-body strong{font-weight:700}
.article-body blockquote{
  margin:28px 0; padding:18px 24px; border-left:3px solid var(--accent);
  background:var(--card); border-radius:0 var(--radius) var(--radius) 0;
  font-family:'Fraunces',Georgia,serif; font-size:19px; line-height:1.5; font-style:italic
}
.article-body blockquote p{margin:0}
.article-body a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}

/* ---------- hub page card grids (blog.html / industries.html) ---------- */
.hub-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; margin-top:36px
}
.hub-card{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; text-decoration:none; color:var(--fg); transition:transform .2s ease, border-color .2s ease
}
.hub-card:hover{transform:translateY(-3px); border-color:var(--accent)}
.hub-card .eyebrow{margin-bottom:10px}
.hub-card h3{font-size:20px; margin:0 0 10px; line-height:1.28}
.hub-card p{font-size:15px; color:var(--muted); margin:0}
.hub-card .arrow{display:inline-block; margin-top:14px; font-size:14px; font-weight:700; color:var(--accent)}

/* ---------- "read more" link under each Clarity Package summary on services.html ---------- */
.svc-more{margin-top:12px !important}
.svc-more a{color:var(--accent); text-decoration:underline; text-underline-offset:2px; font-weight:600; font-size:14.5px}