/* ============================================================
   Hyndes Advisory & Accounts - shared design system ("Altitude")
   Single source of truth for every page. Values match the
   homepage demo exactly; inner-page + nav-dropdown styles added.
   ============================================================ */

:root{
  --navy:#0F2440;
  --navy-deep:#0A1A30;
  --gold:#C9A35C;
  --gold-text:#836327;
  --slate:#5F7AA0;
  --cream:#F0E9DA;
  --paper:#FBF9F4;
  --ink:#141F33;
  --ink-2:#586074;
  --hairline:#E6DDCB;
  --serif:"Marcellus",Georgia,serif;
  --sans:"Archivo",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --max:1180px;
  --pad:clamp(20px,5vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:var(--cream);padding:12px 20px;font-family:var(--mono);font-size:14px;
}
.skip-link:focus{left:12px;top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-text);margin:0 0 18px;font-weight:500;
}
.eyebrow.on-navy{color:var(--gold)}
.section{padding:clamp(40px,5.5vw,72px) 0}
.section-cream{background:var(--cream)}
.section-white{background:#fff;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.hr-rule{border:0;border-top:1px solid var(--hairline);margin:0}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 26px;border-radius:2px;
  font-family:var(--sans);font-weight:600;font-size:16px;text-decoration:none;
  line-height:1.25;text-align:center;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,opacity .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-outline-cream{border-color:rgba(240,233,218,.45);color:var(--cream);background:transparent}
.btn-outline-cream:hover{border-color:var(--cream)}
.btn-outline-navy{border-color:var(--navy);color:var(--navy);background:transparent}
.btn .arrow{font-family:var(--mono);font-weight:400}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,249,244,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:72px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.brand-mark{width:40px;height:40px;flex:none;border-radius:8px;background:var(--navy);padding:5px}
.brand-text{line-height:1.15}
.brand-name{font-family:var(--serif);font-weight:400;letter-spacing:.3em;font-size:16px;color:var(--navy)}
.brand-sub{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.primary-nav>ul{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.primary-nav a.nav-link{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  text-decoration:none;font-weight:500;font-size:15.5px;color:var(--ink);
  border-bottom:2px solid transparent;
}
.primary-nav a.nav-link:hover{color:var(--navy);border-bottom-color:var(--gold)}
.primary-nav a.nav-link[aria-current="page"]{color:var(--navy);border-bottom-color:var(--gold)}
.header-cta{margin-left:8px;min-height:44px;padding:10px 20px;font-size:15px}
.menu-btn{
  display:none;background:none;border:1px solid var(--hairline);border-radius:2px;
  width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer;flex:none;
}
.menu-btn svg{width:22px;height:22px;stroke:var(--navy);stroke-width:2;fill:none}

/* ---------- Services dropdown (desktop) ---------- */
.primary-nav li.has-dropdown{position:relative}
.nav-dropdown-btn{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;
  background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:15.5px;color:var(--ink);
  border-bottom:2px solid transparent;
}
.nav-dropdown-btn:hover{color:var(--navy);border-bottom-color:var(--gold)}
.nav-dropdown-btn[aria-current="page"]{color:var(--navy);border-bottom-color:var(--gold)}
.nav-dropdown-btn svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.5;fill:none;transition:transform .2s ease}
.nav-dropdown-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dropdown{
  display:block;
  position:absolute;top:calc(100% + 6px);left:0;min-width:300px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:3px;
  box-shadow:0 18px 44px -24px rgba(15,36,64,.55);
  list-style:none;margin:0;padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:120;
}
.primary-nav li.has-dropdown.open .dropdown,
.primary-nav li.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{
  display:block;padding:11px 14px;text-decoration:none;color:var(--ink);
  font-size:15px;font-weight:600;border-radius:2px;
}
.dropdown a:hover{background:var(--cream);color:var(--navy)}
.dropdown a .d-sub{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--ink-2);font-weight:400;margin-top:3px;text-transform:none;
}
.dropdown li+li{margin-top:1px}
.dropdown .d-lead{border-bottom:1px solid var(--hairline);margin-bottom:6px;padding-bottom:6px}

/* ---------- Mobile drawer ---------- */
.drawer{position:fixed;inset:0;z-index:150;display:none}
.drawer.open{display:block}
.drawer-scrim{position:absolute;inset:0;background:rgba(10,26,48,.55)}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(340px,88vw);
  background:var(--navy);color:var(--cream);
  padding:24px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;
  transform:translateX(100%);transition:transform .25s ease;
}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-close{
  align-self:flex-end;background:none;border:1px solid rgba(240,233,218,.35);border-radius:2px;
  width:48px;height:48px;color:var(--cream);font-size:22px;cursor:pointer;line-height:1;
}
.drawer nav ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.drawer nav a{
  display:flex;align-items:center;min-height:52px;padding:0 8px;
  color:var(--cream);text-decoration:none;font-size:20px;font-family:var(--serif);
  border-bottom:1px solid rgba(240,233,218,.14);
}
.drawer .drawer-group-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);padding:18px 8px 2px;
}
.drawer nav .drawer-sub a{font-size:17px;padding-left:22px;min-height:46px}
.drawer .btn{margin-top:24px}
.drawer-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-top:auto;padding-top:24px}

/* ---------- Home hero ---------- */
.hero{background:var(--navy);color:var(--cream);position:relative;overflow:hidden}
.hero .contours{position:absolute;inset:0;opacity:.5;pointer-events:none}
.hero-inner{
  position:relative;display:grid;gap:clamp(22px,3vw,38px);
  padding-top:clamp(40px,5.5vw,72px);padding-bottom:0;
}
.hero h1{font-size:clamp(38px,6.2vw,72px);letter-spacing:-.01em;color:#fff;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-lede{font-size:clamp(17px,2vw,20px);color:var(--cream);max-width:52ch;opacity:.92;margin-top:22px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-qualifier{
  margin:clamp(24px,3vw,30px) 0 0;padding-left:16px;border-left:2px solid var(--gold);
  font-size:15px;line-height:1.6;color:var(--cream);opacity:.82;max-width:58ch;
}
.hero-chart{margin-top:clamp(2px,0.8vw,10px)}
.hero-chart svg{width:100%;height:auto}
/* The chart is a 1120x360 viewBox, so on a 375px phone it renders about a third
   of full size and the label type lands near 4px, which is unreadable. The labels
   are sized in user units, so scaling them up here restores legibility without
   touching the artwork or changing anything on desktop. Making the line itself
   read better on a narrow screen needs a different path, not a font change. */
@media (max-width:700px){
  .hero-chart svg text{font-size:30px;letter-spacing:2.5px}
  /* The summit label is centred on the peak at x=980. At this size that runs past
     the 1120 viewBox and gets clipped mid-word, so anchor it to end at the peak
     instead of straddling it. Reads as a label pointing at the summit either way. */
  .hero-chart svg .chart-label text{text-anchor:end}
}
.creds{
  border-top:1px solid rgba(240,233,218,.18);
  display:flex;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
}
.creds span{
  padding:16px 22px 16px 0;margin-right:22px;color:var(--cream);opacity:.85;
  display:inline-flex;align-items:center;gap:10px;
}
.creds span::before{content:"";width:7px;height:7px;background:var(--gold);flex:none;transform:rotate(45deg)}

/* chart animation */
.chart-line{stroke-dasharray:1600;stroke-dashoffset:1600;animation:draw 2.4s cubic-bezier(.5,0,.2,1) .3s forwards}
.chart-fill{opacity:0;animation:fadeIn 1s ease 1.6s forwards}
.chart-node{opacity:0;animation:fadeIn .5s ease forwards}
.chart-node:nth-of-type(1){animation-delay:.7s}
.chart-label{opacity:0;animation:fadeIn .8s ease 2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}

/* ---------- Inner-page hero ---------- */
.page-hero{background:var(--navy);color:var(--cream);position:relative;overflow:hidden}
.page-hero .contours{position:absolute;inset:0;opacity:.5;pointer-events:none}
.page-hero .wrap{position:relative;padding-top:clamp(26px,4vw,48px);padding-bottom:clamp(36px,5.2vw,66px)}
.breadcrumb{margin-bottom:22px}
.breadcrumb ol{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
.breadcrumb a{color:var(--cream);opacity:.78;text-decoration:none}
.breadcrumb a:hover{opacity:1;text-decoration:underline}
.breadcrumb li[aria-current]{color:var(--gold)}
.breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--slate)}
.page-hero h1{font-size:clamp(38px,6vw,68px);color:#fff;letter-spacing:-.01em;max-width:17ch}
.page-hero h1 em{font-style:normal;color:var(--gold)}
.page-hero-lede{font-size:clamp(17px,2vw,20px);color:var(--cream);max-width:54ch;opacity:.92;margin-top:22px}
.page-hero-lede+.page-hero-lede{margin-top:0}

/* ---------- Prose ---------- */
.prose{max-width:66ch}
.prose p{color:var(--ink);font-size:16.5px}
.prose h2{font-size:clamp(28px,3.6vw,42px);margin:0 0 18px}
.prose h3{font-size:22px;margin:30px 0 10px}
.lead{font-size:clamp(18px,2.2vw,22px);color:var(--ink);line-height:1.5;max-width:56ch}

/* ---------- Pillars ---------- */
.pillars{border-bottom:1px solid var(--hairline)}
.pillars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.pillar{padding:24px 28px 24px 0;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:12px}
.pillar svg{width:34px;height:34px;stroke:var(--gold-text);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pillar h3{font-size:24px}
.pillar p{margin:0;color:var(--ink-2);font-size:15.5px}
.pillar .p-num{font-family:var(--mono);font-size:12px;color:var(--slate);letter-spacing:.14em}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,56px);align-items:start}
.about h2{font-size:clamp(34px,4.5vw,52px);max-width:16ch;margin-bottom:18px}
.about p{max-width:58ch;color:var(--ink)}
.about .muted{color:var(--ink-2)}
.facts{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--hairline)}
.facts li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hairline);font-size:15.5px}
.facts .f-key{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);flex:none;width:118px}
.signature{font-family:var(--serif);font-style:normal;letter-spacing:.06em;font-size:28px;color:var(--navy);margin-top:30px}
.signature small{display:block;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:6px}
/* About: facts as a wide, landscape strip below the story */
.facts-row{list-style:none;margin:clamp(30px,4vw,54px) 0 0;padding:clamp(24px,3vw,34px) 0 0;border-top:1px solid var(--hairline);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(22px,3vw,40px)}
.facts-row li{display:flex;flex-direction:column;gap:9px;font-size:15.5px;color:var(--ink);line-height:1.5}
.facts-row .f-key{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text)}
.portrait{
  background:var(--navy);color:var(--cream);border-radius:3px;
  aspect-ratio:4/5;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:28px;
}
.portrait .contours{position:absolute;inset:0;opacity:.6}
.portrait .p-mark{width:96px;height:96px;position:absolute;top:50%;left:50%;transform:translate(-50%,-72%)}
.portrait .p-name{position:relative;font-family:var(--serif);font-size:26px;color:#fff}
.portrait .p-role{position:relative;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.portrait .p-tag{
  position:absolute;top:20px;left:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);border:1px solid rgba(95,122,160,.5);padding:5px 10px;border-radius:2px;
}

/* ---- Portrait: Editorial arch (Option B, used on About) ---- */
.portrait.arch{
  background:var(--navy);padding:22px 22px 0;aspect-ratio:5/6;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
}
.portrait.arch .arch-panel{
  position:relative;width:100%;flex:1;min-height:0;overflow:hidden;
  background:
    radial-gradient(82% 60% at 50% 46%,rgba(255,253,247,.92),rgba(255,253,247,0) 62%),
    radial-gradient(125% 72% at 50% 3%,rgba(20,31,51,.16),rgba(20,31,51,0) 44%),
    linear-gradient(180deg,#e5d9c1 0%,#efe7d6 46%,#e7ddca 100%);
  border-radius:48% 48% 6px 6px/40% 40% 6px 6px;
}
.portrait.arch .subject{position:absolute;bottom:-15%;left:50%;transform:translateX(-50%);height:104%;width:auto;max-width:none}
.portrait.arch .cc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.portrait.arch .cc path{fill:none;stroke:var(--gold-text);stroke-opacity:.5;stroke-width:1.1}
.portrait.arch .rule{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.portrait.arch .rule path{fill:none;stroke:var(--gold);stroke-width:2}
.portrait.arch .rule .thin{stroke-width:1;stroke-opacity:.65}
.portrait.arch .cap{width:100%;text-align:center;padding:15px 0 20px}
.portrait.arch .p-name{position:relative;font-family:var(--serif);font-size:24px;color:#fff}
.portrait.arch .p-role{position:relative;display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-top:5px}

/* ---- Portrait: Summit contour (Option A, used on Home) ---- */
.portrait.summit{
  padding:0;aspect-ratio:5/6;
  background:radial-gradient(120% 90% at 50% 8%,#16335c 0%,var(--navy) 44%,var(--navy-deep) 100%);
}
.portrait.summit .glow{
  position:absolute;left:50%;top:42%;width:86%;height:76%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle at 50% 46%,rgba(240,233,218,.28),rgba(240,233,218,0) 63%);
}
.portrait.summit .art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.portrait.summit .art-fg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.portrait.summit .ring{fill:none;stroke:var(--gold);stroke-width:1}
.portrait.summit .ridge{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.portrait.summit .fr{fill:none;stroke:var(--gold);stroke-opacity:.5;stroke-width:1}
.portrait.summit .tk{fill:none;stroke:var(--gold);stroke-width:1.4}
.portrait.summit .subject{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;height:auto;max-width:none;z-index:1}
.portrait.summit .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 24px 20px;text-align:center;
  background:linear-gradient(0deg,rgba(10,26,48,.94),rgba(10,26,48,0));
}
.portrait.summit .p-name{position:relative;font-family:var(--serif);font-size:24px;color:#fff}
.portrait.summit .p-role{position:relative;display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-top:5px}

/* ---------- Hero chart caption ---------- */
.hero-chart .chart-caption{
  margin:0 0 18px;font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2.3vw,29px);line-height:1.16;
  color:var(--cream);max-width:22ch;
}

/* ---------- Editorial split section (founder story, career proof) ---------- */
.ed-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start}
.ed-grid h2{font-size:clamp(30px,3.8vw,44px);max-width:15ch}
.ed-body p{color:var(--ink);font-size:16.5px;line-height:1.7;max-width:62ch}
.ed-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--gold-text);text-decoration:none;
}
.ed-link:hover{text-decoration:underline}
.proof-list{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--hairline)}
.proof-list li{
  display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--hairline);
  font-size:16px;line-height:1.55;color:var(--ink);
}
.proof-list li::before{content:"";flex:none;width:8px;height:8px;margin-top:8px;background:var(--gold);transform:rotate(45deg)}
.proof-note{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);margin:16px 0 0;
}
@media (max-width:860px){.ed-grid{grid-template-columns:1fr}.ed-grid h2{max-width:20ch}}

/* File type and weight, shown next to any download link */
.file-note{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);margin:0;
}

/* ---------- Alternative CTA (resource download) ---------- */
.altcta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,36px);
  background:var(--cream);border:1px solid var(--hairline);border-radius:8px;
  padding:clamp(24px,3vw,38px);
}
.altcta-text{display:flex;gap:16px;align-items:flex-start;max-width:58ch}
.altcta-text>svg{
  width:30px;height:30px;flex:none;margin-top:3px;
  stroke:var(--gold-text);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.altcta h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:8px}
.altcta p{font-size:16px;color:var(--ink-2);line-height:1.6;margin:0}
.altcta .file-note{margin-top:10px}
.altcta .btn{flex:none}
@media (max-width:640px){.altcta .btn{width:100%}}

/* ---------- What you get strip ---------- */
.getstrip{background:var(--paper);border-bottom:1px solid var(--hairline);padding:clamp(20px,3vw,30px) 0}
.getstrip-inner{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,36px);flex-wrap:wrap}
.get-item{display:flex;align-items:center;gap:14px}
.get-item svg{width:26px;height:26px;flex:none;stroke:var(--gold-text);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.get-item strong{display:block;font-family:var(--serif);font-weight:400;font-size:19px;color:var(--navy);line-height:1.15}
.get-item span{font-size:13.5px;color:var(--ink-2)}
.get-arrow{color:var(--gold);font-size:20px;line-height:1}
@media (max-width:640px){
  .getstrip-inner{flex-direction:column;align-items:flex-start;gap:16px}
  .get-arrow{display:none}
  .get-item{width:100%}
}

/* ---------- Where should I start (buying path) ---------- */
.start-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(16px,2.4vw,26px)}
.start-col{
  display:flex;flex-direction:column;margin:0;
  background:#fff;border:1px solid var(--hairline);border-radius:8px;padding:clamp(22px,2.6vw,30px);
}
.start-col>div{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--hairline)}
.start-col>div:last-of-type{padding-bottom:0;margin-bottom:0;border-bottom:0}
.start-col dt{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:8px;
}
.start-col dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink)}
.start-col .start-name{display:block;font-family:var(--serif);font-size:22px;line-height:1.2;color:var(--navy);margin-bottom:5px}
.start-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--gold-text);text-decoration:none;
}
.start-link:hover{text-decoration:underline}
/* Full-width tax callout under the three columns. Tax sits deliberately apart
   from the three starting points, so it reads as a separate offering rather
   than a fourth column. */
.start-tax{
  margin-top:clamp(16px,2.4vw,26px);
  background:#fff;border:1px solid var(--hairline);border-left:3px solid var(--gold);
  border-radius:8px;padding:clamp(22px,2.6vw,30px);
}
.start-tax h3{font-family:var(--serif);font-size:22px;line-height:1.2;color:var(--navy);margin:0 0 8px}
.start-tax p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink);max-width:76ch}
.start-tax-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--gold-text);text-decoration:none;
}
.start-tax-link:hover{text-decoration:underline}
.start-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,2.6vw,32px);
  margin-top:clamp(26px,3.4vw,40px);
}
.start-cta p{margin:0;flex:1 1 340px;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}

/* ---------- Shared page components (Best for / What you get / flow / split / anchors) ---------- */
.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(18px,2.5vw,28px)}
.panel{background:#fff;border:1px solid var(--hairline);border-radius:8px;padding:clamp(22px,2.6vw,30px)}
.panel.tint{background:var(--cream)}
.panel h2{font-size:20px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.panel h2 svg{width:22px;height:22px;flex:none;stroke:var(--gold-text);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{padding:9px 0;border-top:1px solid var(--hairline);font-size:15.5px;color:var(--ink);line-height:1.5;display:flex;gap:11px}
.panel li:first-child{border-top:0}
.panel li::before{content:"";flex:none;width:7px;height:7px;margin-top:7px;border-radius:1px;background:var(--gold);transform:rotate(45deg)}
.panel.cross li::before{content:"\00d7";background:none;width:auto;height:auto;margin:0;transform:none;color:var(--slate);font-family:var(--mono);font-size:15px;line-height:1.5}

.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.flow-step{flex:1 1 150px;background:var(--cream);border:1px solid var(--hairline);border-radius:8px;padding:20px}
.flow-step .fnum{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gold-text)}
.flow-step h3{font-size:18px;margin:8px 0 6px}
.flow-step p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.5}
.flow-arrow{align-self:center;color:var(--gold);font-size:20px;line-height:1}
@media (max-width:680px){.flow-arrow{display:none}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,26px)}
.split-col{border:1px solid var(--hairline);border-radius:8px;padding:clamp(22px,2.6vw,30px);background:#fff}
.split-col.tint{background:var(--cream)}
.split-col .who{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin-bottom:8px}
.split-col h3{font-size:20px;margin-bottom:14px}
.split-col ul{list-style:none;margin:0;padding:0}
.split-col li{padding:9px 0;border-top:1px solid var(--hairline);font-size:15px;color:var(--ink);line-height:1.5}
.split-col li:first-child{border-top:0}
@media (max-width:640px){.split{grid-template-columns:1fr}}

.anchor-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,2.5vw,26px)}
.anchor-nav a{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--navy);border:1px solid var(--hairline);border-radius:100px;padding:8px 16px;text-decoration:none;background:#fff}
.anchor-nav a svg{width:15px;height:15px;flex:none;stroke:var(--gold-text);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.anchor-nav a:hover{border-color:var(--gold);color:var(--gold-text)}
.anchor-nav a:hover svg{stroke:var(--gold-text)}

/* ---------- Resource cards ---------- */
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(18px,2.5vw,26px)}
/* auto-fit lets two cards stretch the full container, which reads sparse. Cap the pair. */
.res-grid.res-grid-2{max-width:860px}
.res-card .file-note{margin:0 0 16px}
.res-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);border-radius:8px;padding:clamp(22px,2.6vw,30px)}
.res-card .res-meta{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin-bottom:14px}
.res-card .res-meta svg{width:18px;height:18px;flex:none;stroke:var(--gold-text);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.res-card h3{font-size:20px;margin-bottom:8px}
.res-card p{font-size:15px;color:var(--ink-2);line-height:1.55;margin:0 0 18px}
.res-card .res-cta{margin:auto 0 0}
.res-card .res-cta a{font-family:var(--mono);font-size:13px;color:var(--gold-text);text-decoration:none}
.res-card .res-cta a:hover{text-decoration:underline}
.res-card .res-cta .soon{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--slate)}

/* ---------- Booking embed (cal.com) ---------- */
.cal-embed{width:100%;background:#fff;border:1px solid var(--hairline);border-radius:8px;overflow:hidden;min-height:640px}
.cal-embed iframe{width:100%;display:block;border:0}
.cal-fallback{font-size:14.5px;color:var(--ink-2);margin-top:16px;line-height:1.6}
.cal-fallback a{color:var(--gold-text)}
.cal-embed .cal-placeholder{padding:clamp(44px,6vw,76px) 24px;text-align:center}
.cal-embed .cal-placeholder svg{width:44px;height:44px;stroke:var(--gold-text);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.cal-embed .cal-placeholder strong{display:block;font-family:var(--serif);font-weight:400;font-size:21px;color:var(--navy);margin-bottom:8px}
.cal-embed .cal-placeholder p{margin:0 auto;max-width:46ch;font-size:15px;color:var(--ink-2);line-height:1.55}
@media (max-width:600px){.cal-embed{min-height:560px}}

/* ---------- Services ---------- */
.services{background:#fff;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.svc{
  display:grid;grid-template-columns:minmax(90px,2fr) minmax(0,6fr) minmax(0,4fr);
  gap:clamp(20px,4vw,56px);padding:clamp(24px,3vw,38px) 0;border-top:1px solid var(--hairline);align-items:start;
}
.svc:first-of-type{border-top:0}
.svc-num{
  font-family:var(--serif);font-size:clamp(64px,9vw,128px);line-height:.9;color:var(--hairline);
  -webkit-text-stroke:1px var(--gold);color:transparent;
}
.svc-tag{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin-bottom:10px}
.svc h3{font-size:clamp(26px,3vw,36px);margin-bottom:14px}
.svc-body p{color:var(--ink-2);max-width:52ch;margin:0}
.svc-list{list-style:none;margin:6px 0 0;padding:0}
.svc-list li{padding:11px 0;border-bottom:1px solid var(--hairline);font-size:15px;color:var(--ink);display:flex;gap:12px;align-items:baseline}
.svc-list li::before{content:"+";font-family:var(--mono);color:var(--gold-text)}
.svc-note{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:14px;line-height:1.6}
/* Card-level CTA. Only service 04 carries one, because it is the one service
   with a dedicated page the visitor is being sent to (Andrew's T-06, 2026-08-16).
   Sits inside .svc-body rather than as a fourth child of the .svc grid, which
   would wrap it onto a new row under the numeral. */
.svc-cta{margin-top:16px}
.svc-cta a{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-text);text-decoration:none;border-bottom:1px solid var(--gold);
  padding-bottom:4px;transition:opacity .2s ease;
}
.svc-cta a:hover{opacity:.68}
.svc-cta .arrow{margin-left:6px;display:inline-block}

/* ---------- Who I help ---------- */
.who-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;border-left:1px solid var(--hairline)}
.who-item{padding:30px 28px;border-right:1px solid var(--hairline);border-top:2px solid var(--gold)}
.who-item h3{font-size:26px;margin-bottom:10px}
.who-item .w-num{font-family:var(--mono);font-size:12px;color:var(--slate);letter-spacing:.14em;display:block;margin-bottom:16px}
.who-item p{margin:0;color:var(--ink-2);font-size:15.5px}

/* ---------- Difference (navy band) ---------- */
.diff{background:var(--navy-deep);color:var(--cream);position:relative;overflow:hidden}
.diff .contours{position:absolute;inset:0;opacity:.4;pointer-events:none}
.diff .wrap{position:relative}
.diff h2{color:#fff;font-size:clamp(32px,4.5vw,50px);max-width:18ch}
.diff h2 em{color:var(--gold);font-style:normal}
.diff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;margin-top:clamp(24px,3vw,38px);border-top:1px solid rgba(240,233,218,.18)}
.diff-item{padding:20px 28px 20px 0;border-bottom:1px solid rgba(240,233,218,.18)}
.diff-item .d-num{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.14em}
.diff-item h3{font-size:23px;color:#fff;margin:12px 0 8px}
.diff-item p{margin:0;font-size:15px;color:var(--cream);opacity:.8}

/* ---------- Process ---------- */
.process-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;position:relative;margin-top:clamp(20px,3.2vw,36px)}
.step{padding:0 28px 8px 0;position:relative}
.step::before{content:"";position:absolute;top:9px;left:0;right:0;height:1px;background:var(--hairline)}
.step::after{content:"";position:absolute;top:5px;left:0;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
.step .s-num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gold-text);display:block;padding-top:28px}
.step h3{font-size:22px;margin:10px 0 8px}
.step p{margin:0;font-size:15px;color:var(--ink-2)}
.step:nth-child(1){margin-top:44px}
.step:nth-child(2){margin-top:30px}
.step:nth-child(3){margin-top:15px}
.step:nth-child(4){margin-top:0}

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy);color:var(--cream);position:relative;overflow:hidden}
.cta-band .contours{position:absolute;inset:0;opacity:.45;pointer-events:none}
.cta-inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.cta-band h2{color:#fff;font-size:clamp(30px,4vw,46px);max-width:20ch}
.cta-band h2 em{color:var(--gold);font-style:normal}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,52px);align-items:start}
.contact h2{font-size:clamp(34px,4.5vw,50px);margin-bottom:24px}
.contact-details{list-style:none;margin:0;padding:0}
.contact-details li{padding:16px 0;border-bottom:1px solid var(--hairline)}
.contact-details .c-key{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);display:block;margin-bottom:4px}
.contact-details a{color:var(--navy);font-weight:600;text-decoration:none;font-size:18px}
.contact-details a:hover{text-decoration:underline}
.book-panel{background:var(--navy);color:var(--cream);border-radius:3px;padding:30px;margin-top:32px;position:relative;overflow:hidden}
.book-panel .contours{position:absolute;inset:0;opacity:.5;pointer-events:none}
.book-panel > *{position:relative}
.book-panel h3{font-size:26px;color:#fff;margin-bottom:8px}
.book-panel p{font-size:15px;opacity:.85;margin-bottom:20px}
.form-card{background:#fff;border:1px solid var(--hairline);border-radius:3px;padding:clamp(24px,4vw,40px)}
.form-card h3{font-size:26px;margin-bottom:6px}
.form-card .form-sub{color:var(--ink-2);font-size:15px;margin-bottom:26px}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:12px 14px;font:inherit;color:var(--ink);
  background:var(--paper);border:1px solid var(--hairline);border-radius:2px;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Honeypot. Moved off-screen rather than display:none or visibility:hidden, because
   some bots skip fields hidden those two ways and this one only works if they fill it.
   Never focusable and never announced, so no real visitor can reach it by accident. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Turnstile mount, injected by script.js only once a sitekey is configured. */
.ts-field{margin-top:18px;min-height:0}
.ts-field:empty{display:none}
.form-note{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:14px}
.form-status{font-family:var(--mono);font-size:13px;line-height:1.5;margin-top:14px}
.form-status:empty{margin-top:0}
.form-status.is-ok{color:#1d6a46}
.form-status.is-err{color:#b3261e}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:var(--cream)}
.footer-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:clamp(32px,5vw,64px);padding:clamp(34px,5vw,56px) 0 30px}
.footer-top h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:500}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:4px}
.footer-links a{color:var(--cream);text-decoration:none;opacity:.85;display:inline-flex;min-height:40px;align-items:center}
.footer-links a:hover{opacity:1;text-decoration:underline}
.footer-brand-blurb{opacity:.8;font-size:15px;max-width:38ch;margin-top:16px}
.disclaimer{border-top:1px solid rgba(240,233,218,.15);padding:28px 0;font-size:13px;line-height:1.7;opacity:.72;max-width:88ch}
.disclaimer a{color:var(--cream)}
.legal{
  border-top:1px solid rgba(240,233,218,.15);padding:22px 0 34px;
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:12px;opacity:.65;
}
.legal-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.legal a{color:var(--cream);text-decoration:none}
.legal a:hover{text-decoration:underline;opacity:1}

/* ---------- FAQ (native details/summary, no JS) ---------- */
.faq{max-width:840px}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-item:first-child{border-top:1px solid var(--hairline)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:24px 48px 24px 0;position:relative;
  font-family:var(--serif);font-size:clamp(19px,2.4vw,24px);line-height:1.25;color:var(--navy);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:4px;top:22px;
  font-family:var(--mono);font-size:26px;line-height:1;color:var(--gold-text);
}
.faq-item[open] summary::after{content:"-"}
.faq-item summary:hover{color:var(--gold-text)}
.faq-item summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}
.faq-answer{padding:0 48px 26px 0;color:var(--ink-2);font-size:16px;line-height:1.65;max-width:72ch}
.faq-answer p{margin:0 0 12px}
.faq-answer p:last-child{margin-bottom:0}
.faq-answer a{color:var(--navy);font-weight:600}

/* ---------- Legal / policy pages ---------- */
.policy{max-width:760px}
.policy h2{font-size:clamp(24px,3vw,32px);margin:40px 0 14px}
.policy h2:first-child{margin-top:0}
.policy h3{font-size:19px;margin:24px 0 8px}
.policy p,.policy li{color:var(--ink-2);font-size:16px;line-height:1.7}
.policy ul{margin:0 0 16px;padding-left:22px}
.policy li{margin-bottom:6px}
.policy .updated{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:32px}
.policy a{color:var(--navy);font-weight:600}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .primary-nav,.header-cta{display:none}
  .menu-btn{display:inline-flex}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .portrait{max-width:420px}
  .svc{grid-template-columns:1fr}
  .svc-num{font-size:64px}
  .footer-top{grid-template-columns:1fr}
  .step:nth-child(n){margin-top:0}
  .who-item{border-right:0;border-left:0}
  .who-grid{border-left:0}
}
@media (max-width:480px){
  .field-row{grid-template-columns:1fr}
}

/* ---------- Cookie consent banner (injected by script.js) ---------- */
#cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:140;
  background:var(--navy-deep);color:var(--cream);
  border-top:2px solid var(--gold);
  box-shadow:0 -8px 32px rgba(10,26,48,.34);
  animation:cookieUp .32s ease both;
}
#cookie-banner .cookie-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding-top:16px;
  padding-bottom:max(16px,env(safe-area-inset-bottom,16px));
}
#cookie-banner p{
  margin:0;flex:1 1 320px;min-width:0;
  font-size:14.5px;line-height:1.6;color:var(--cream);
}
#cookie-banner a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
#cookie-banner a:hover{color:var(--cream)}
#cookie-banner .cookie-btns{display:flex;gap:12px;flex-shrink:0}
#cookie-banner .cookie-btn{min-height:44px;padding:10px 22px;font-size:15px}
@keyframes cookieUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (max-width:640px){
  #cookie-banner .cookie-inner{flex-direction:column;align-items:stretch;gap:14px}
  /* flex-basis maps to height once the row flips to a column, so the 320px
     basis above must be dropped or the copy crushes the buttons out of view. */
  #cookie-banner p{flex:0 0 auto}
  #cookie-banner .cookie-btns{width:100%}
  #cookie-banner .cookie-btn{flex:1}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
  .chart-line{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .chart-fill,.chart-node,.chart-label{opacity:1;animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  #cookie-banner{animation:none}
}