/* Self-hosted fonts. These used to come from fonts.googleapis.com, which put a
   render-blocking stylesheet on a third-party origin in the critical path -
   measured at 189ms DNS plus 483ms TCP before a byte of CSS arrived. The rules
   now ship inside site.css: no extra request, no extra handshake, and no
   third-party call per visitor. unicode-range means latin-ext is only fetched
   if such a character actually appears, so it costs nothing on English pages. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin-ext.woff2?v=70) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin.woff2?v=70) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin-ext.woff2?v=70) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin.woff2?v=70) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-latin-ext.woff2?v=70) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-latin.woff2?v=70) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500-latin-ext.woff2?v=70) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500-latin.woff2?v=70) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600-latin-ext.woff2?v=70) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600-latin.woff2?v=70) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* =====================================================================
   TAXPLAN - production stylesheet
   Design system ported from casinghal/raysho-platform
   (live-sync/raysho-ai-production :: app/globals.css @theme + components/ui)
   Accent family: moss slate green so the two properties stay
   visually distinct while sharing one system.
   ===================================================================== */
:root{
  --paper:#faf9f6;
  --card:#ffffff;
  /* ink family in moss-charcoal - the last blue undertone removed */
  --ink:#171a12;
  --ink-2:#262b1e;
  --ink-soft:#474e3e;
  --ink-faint:#6c7062;
  --line:#e4e1da;

  /* Accent family - moss slate (henna green, grey-leaning) */
  --brand:#a3bd77;        /* bright variant, for dark surfaces */
  --accent:#4f6338;       /* white-on-accent 6.6:1 */
  --accent-deep:#3c4c2a;  /* hover */
  --accent-wash:#edf0e5;  /* tint */
  --accent-rgb:79 99 56;
  --wash-rgb:237 240 229;

  --risk-high:#b42318;
  --risk-high-wash:#fbeae9;
  --risk-mid:#b45309;
  --risk-mid-wash:#fdf3e7;
  --ok:#1e7f5c;
  --ok-wash:#e9f5f0;

  /* dark panels in moss charcoal - no navy anywhere */
  --dusk:#12170c;
  --dusk-2:#1b2312;
  --dusk-line:#37422a;
  --dusk-text:#eef1e8;
  --dusk-muted:#a8b394;

  --shadow-rest:0 1px 2px rgb(23 26 18 / .06);
  --shadow-lift:0 8px 30px rgb(23 26 18 / .1);
  --radius-card:10px;
  --radius-md:6px;
  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --container:72rem;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font-sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
  -webkit-tap-highlight-color:rgb(var(--accent-rgb)/.15)}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.tnum{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);
  color:#fff;padding:10px 18px;border-radius:0 0 var(--radius-md) 0;font-size:14px}
.skip:focus{left:0}

/* Container */
.ct{margin-inline:auto;width:100%;max-width:var(--container);padding-inline:20px}
@media(min-width:640px){.ct{padding-inline:32px}}

/* Section rhythm */
.sec{padding-block:64px}
@media(min-width:640px){.sec{padding-block:80px}}
@media(min-width:1024px){.sec{padding-block:96px}}
.sec--b{border-bottom:1px solid var(--line)}
.sec--t{border-top:1px solid var(--line)}
.sec--card{background:var(--card)}

/* Type */
h1,h2,h3,h4{font-weight:600;color:var(--ink);letter-spacing:-.02em;
  line-height:1.1;text-wrap:balance}
h1{font-size:2.25rem;color:var(--accent)}
@media(min-width:640px){h1{font-size:3rem}}
@media(min-width:1024px){h1{font-size:56px}}
/* Headings carry the moss accent; dark bands re-override below. */
h2{font-size:1.875rem;line-height:1.15;color:var(--accent)}
@media(min-width:1024px){h2{font-size:2.25rem}}
h3{font-size:1.125rem;letter-spacing:-.015em;line-height:1.3}
p{color:var(--ink-soft)}
.lead{font-size:1.125rem;line-height:1.625;color:var(--ink-soft);max-width:36rem}
.body-15{font-size:15px;line-height:1.6}

/* Labels - sentence case (uppercase eyebrow deliberately not used) */
.micro{font-size:13px;font-weight:600;letter-spacing:-.015em;color:var(--ink-faint)}
.micro--accent{color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:9999px;
  border:1px solid rgb(var(--accent-rgb)/.2);background:rgb(var(--wash-rgb)/.6);
  color:var(--accent-deep);padding:2px 10px;font-size:12px;font-weight:500;
  letter-spacing:-.015em}
.chip--neutral{border-color:var(--line);background:var(--paper);color:var(--ink-soft)}
.meta{font-size:13px;color:var(--ink-faint)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-md);font-weight:500;
  transition:background-color .15s,border-color .15s,color .15s}
.btn-sm{height:36px;padding-inline:16px;font-size:14px}
.btn-md{height:44px;padding-inline:20px;font-size:15px}
.btn-lg{height:48px;padding-inline:24px;font-size:16px}
/* Primary buttons carry the 3D treatment everywhere: gradient face, solid
   under-edge, lift on hover and a real press on click. The lip scales with
   the button so small buttons do not look heavy. */
.btn-p,.btn-3d{background:linear-gradient(180deg,#5d7442,var(--accent));color:#fff;
  
  box-shadow:0 4px 0 #33401f,0 8px 18px rgb(23 26 18/.22);
  transition:background .15s,transform .12s,box-shadow .12s}
.btn-p:hover,.btn-3d:hover{background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  color:#fff;transform:translateY(-2px);
  box-shadow:0 6px 0 #33401f,0 13px 26px rgb(23 26 18/.26)}
.btn-p:active,.btn-3d:active{transform:translateY(4px);
  box-shadow:0 0 0 #33401f,0 3px 8px rgb(23 26 18/.22)}
.btn-sm.btn-p{box-shadow:0 3px 0 #33401f,0 6px 14px rgb(23 26 18/.2)}
.btn-sm.btn-p:hover{box-shadow:0 5px 0 #33401f,0 10px 20px rgb(23 26 18/.24)}
.btn-sm.btn-p:active{box-shadow:0 0 0 #33401f,0 2px 6px rgb(23 26 18/.2)}
.btn-3d{border-radius:10px}
.btn-lg.btn-p,.btn-lg.btn-3d{box-shadow:0 5px 0 #33401f,0 12px 26px rgb(23 26 18/.25)}
.btn-lg.btn-p:hover,.btn-lg.btn-3d:hover{box-shadow:0 7px 0 #33401f,0 16px 32px rgb(23 26 18/.3)}
@media (prefers-reduced-motion:reduce){
  .btn-p,.btn-3d{transition:background .15s}
  .btn-p:hover,.btn-3d:hover,.btn-p:active,.btn-3d:active{transform:none}}
.btn-s{border:1px solid var(--line);background:var(--card);color:var(--ink)}
.btn-s:hover{border-color:var(--accent);color:var(--accent)}
.btn-d{background:var(--dusk-text);color:var(--ink)}
.btn-d:hover{background:#fff}

/* Card variants */
.c-asset{border-radius:var(--radius-card);border:1px solid var(--line);
  background:var(--card);box-shadow:var(--shadow-rest);
  transition:border-color .15s,box-shadow .15s}
.c-asset:hover{border-color:var(--accent);box-shadow:var(--shadow-lift)}
.c-diag{border-radius:var(--radius-card);border:1px solid var(--line);
  border-left:2px solid rgb(var(--accent-rgb)/.4);background:var(--card);
  box-shadow:var(--shadow-rest)}
.c-edit{border-radius:var(--radius-card);border:1px solid rgb(var(--accent-rgb)/.15);
  background:rgb(var(--wash-rgb)/.3);box-shadow:none}
.c-form{border-radius:12px;border:1px solid var(--line);background:var(--card);
  box-shadow:var(--shadow-lift)}
.c-dusk{border-radius:var(--radius-card);border:1px solid var(--dusk-line);
  background:var(--dusk-2)}
.c-dusk h2,.c-dusk h3{color:var(--dusk-text)}
.c-dusk .card-p{color:var(--dusk-muted)}
.c-dusk .card-lnk{color:var(--brand)}
.pad{padding:24px}
.pad-l{padding:28px}

/* Header */
.hdr{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);
  background:rgb(250 249 246 / .85);backdrop-filter:blur(8px)}
/* direct child only - the mobile menu nests its own .ct inside .hdr and
   must never inherit the fixed bar height */
.hdr>.ct{display:flex;height:76px;align-items:center;justify-content:space-between;gap:20px}
/* Brand lockup - moss mark, deep moss wordmark, ink tagline, no plate.
   Wordmark and tagline share a strict left edge. */
.logo{display:flex;align-items:center;gap:11px}
.logo .lg-m{height:54px;width:auto;flex:none}
.lg-t{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.lg-t img,.lg-t i{margin:0;padding:0;text-indent:0}
.lg-t img{height:36px;width:auto;display:block}
.lg-t i{font-style:italic;font-family:'Poppins',Inter,sans-serif;font-size:12px;
  font-weight:600;letter-spacing:.02em;line-height:1;color:#1c5450;white-space:nowrap;
  margin-left:8px}
@media(min-width:640px){
  .logo .lg-m{height:62px}
  .lg-t img{height:40px}
  .lg-t i{font-size:13px}}
.nav{display:none;align-items:center;gap:38px;list-style:none}
/* The desktop nav starts at 1000px, not 900px. "Fees and Tax Filings" is a
   long label, and at 900px the header was down to 20px of breathing room on
   each side of the nav - logo and CTA almost touching it. Below 1000px the
   burger menu is simply a better experience than a cramped row. */
@media(min-width:1000px){.nav{display:flex}}
/* Tighten the nav in the band where it only just fits */
@media(min-width:1000px) and (max-width:1220px){
  .nav{gap:22px}
  .nav a{font-size:14px}
}
.nav a{font-size:15px;color:var(--ink-soft);transition:color .15s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:500}
/* Services dropdown - accessible disclosure, hover-open on fine pointers */
.has-dd{position:relative}
.ddbtn{display:inline-flex;align-items:center;gap:6px;font-size:15px;
  color:var(--ink-soft);transition:color .15s;padding:4px 0}
.ddbtn:hover,.ddbtn[aria-expanded="true"]{color:var(--ink)}
.ddbtn svg{transition:transform .18s ease}
.ddbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
/* Mega panel: the full service tree from the original site, one open.
   Groups mirror the old nested flow - Tax, Advisory, International,
   Accounting & Bookkeeping - with their sub-services visible directly. */
.dd{position:absolute;top:calc(100% + 10px);left:-16px;width:560px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-lift);padding:18px;z-index:60;
  display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease}
.has-dd[data-open="true"] .dd{opacity:1;transform:none;pointer-events:auto}
.dd-group{list-style:none}
.dd-group>a{display:block;font-size:14px;font-weight:600;letter-spacing:-.015em;
  color:var(--accent);padding:4px 8px;border-radius:var(--radius-md)}
.dd-group>a:hover{color:var(--accent-deep);background:var(--accent-wash)}
.dd-group ul{list-style:none;margin-top:2px}
.dd-group ul a{display:block;padding:5px 8px 5px 16px;border-radius:var(--radius-md);
  font-size:13.5px;color:var(--ink-soft);position:relative}
.dd-group ul a::before{content:"";position:absolute;left:6px;top:50%;
  transform:translateY(-50%);width:4px;height:4px;border-radius:9999px;
  background:var(--line)}
.dd-group ul a:hover{background:var(--accent-wash);color:var(--ink)}
.dd-group ul a:hover::before{background:var(--accent)}
.dd-group>a[aria-current="page"]{color:var(--accent-deep);
  background:rgb(var(--wash-rgb)/.6)}
@media (prefers-reduced-motion:reduce){.dd{transition:none}.ddbtn svg{transition:none}}

/* Links read as links: blue wherever a link sits in readable content.
   Buttons, tiles and chips keep their own treatments. */
main p a:not(.btn),main li a:not(.btn):not(.card-lnk),
.faq-a a,.cbit a,.steps a,.panel-f a,.journey a{
  color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  font-weight:500}
main p a:not(.btn):hover,main li a:not(.btn):not(.card-lnk):hover{color:var(--accent-deep)}
.ftr .fg a{color:var(--accent)}
.ftr .fg a:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.dd-group ul a{color:var(--accent)}
.mnav a:not(.btn){color:var(--accent)}
.mgroup .mg-item ul a{color:var(--accent);opacity:.85}

/* Coarse pointers: inline text links get an invisible expanded tap area
   (padding pulled back by negative margin - zero layout shift) */
@media (pointer:coarse){
  .crumb a,main p a:not(.btn),main li a:not(.btn):not(.card-lnk),
  .steps a,.cbit a,.panel-f a,.mtel a,
  .tlink,.cta2 ul a{
    padding:12px 6px;margin:-12px -6px;position:relative;z-index:1}
  .secnav a{min-height:44px}
}

/* Anchored sections land clear of the sticky header */
[id]{scroll-margin-top:96px}

/* Scrollspy section rail (long service pages) */
.secnav{position:sticky;top:76px;z-index:30;background:rgb(250 249 246 / .92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.secnav .ct{display:flex;gap:8px;overflow-x:auto;padding-block:10px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.secnav .ct::-webkit-scrollbar{display:none}
.secnav a{flex:none;font-size:13px;font-weight:500;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:9999px;padding:6px 14px;
  background:var(--card);min-height:32px;display:inline-flex;align-items:center;
  transition:color .15s,border-color .15s,background .15s}
.secnav a:hover{color:var(--ink)}
.secnav a[aria-current="true"]{color:var(--accent-deep);border-color:var(--accent);
  background:var(--accent-wash)}

/* Mobile menu service groups */
.mgroup{border-bottom:1px solid var(--line)}
.mgroup summary{display:flex;align-items:center;justify-content:space-between;
  padding:13px 10px;font-size:16px;font-weight:600;color:var(--ink);
  cursor:pointer;list-style:none;min-height:46px}
.mgroup summary::-webkit-details-marker{display:none}
.mgroup summary::after{content:"+";color:var(--accent);font-weight:500}
.mgroup[open] summary::after{content:"−"}
.mgroup .mg-item{padding-left:10px}
.mgroup .mg-item>a{font-weight:600;color:var(--ink);padding:10px}
.mgroup .mg-item ul{list-style:none;margin:0 0 6px}
.mgroup .mg-item ul a{padding:8px 10px 8px 26px;font-size:14.5px;min-height:40px;
  color:var(--ink-faint)}

.hdr-r{display:flex;align-items:center;gap:10px}
/* Header CTA ladder:
     phone   (<640)   tap-to-call - someone on a phone looking for a local
                      accountant is far likelier to ring than fill a form
     tablet  (640+)   full "Book a consultation", burger still holds the nav
     desktop (900+)   full nav alongside it                                  */
.hdr-cta{display:none}
@media(min-width:640px){.hdr-cta{display:inline-flex}}
.hdr-call{display:inline-flex;height:44px;white-space:nowrap}
@media(min-width:640px){.hdr-call{display:none}}
.burger{display:grid;place-items:center;height:44px;width:44px;
  border-radius:var(--radius-md);border:1px solid var(--line);
  background:var(--card);flex:none}
@media(min-width:1000px){.burger{display:none}}
.mnav{display:none;border-top:1px solid var(--line);background:var(--paper)}
/* Scrolls within itself so a short viewport (landscape phone) can still reach
   the bottom items while body scroll is locked. */
.mnav[data-open="true"]{display:block;overflow-y:auto;
  max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media(min-width:1000px){.mnav[data-open="true"]{display:none}}
.mnav .ct{display:flex;flex-direction:column;gap:2px;padding-block:10px 18px;height:auto}
.mnav a{border-radius:var(--radius-md);padding:13px 10px;font-size:16px;
  color:var(--ink-soft);min-height:46px;display:flex;align-items:center}
.mnav a:hover,.mnav a:active{background:var(--accent-wash);color:var(--ink)}
.mnav .btn{margin-top:12px;width:100%;height:48px}
.mnav .mtel{margin-top:10px;text-align:center;font-size:13px;color:var(--ink-faint);
  padding:0;min-height:0;display:block}
.mnav .mtel a{display:inline;color:var(--accent);font-weight:500;padding:0;min-height:0}

/* Hero */
.hero{display:grid;gap:48px;align-items:center;padding-block:64px}
@media(min-width:640px){.hero{padding-block:80px}}
@media(min-width:1024px){.hero{grid-template-columns:1.05fr .95fr;padding-block:96px}}
.hero h1{margin-top:16px}
.hero .lead{margin-top:20px}
.hero-acts{margin-top:32px;display:flex;flex-direction:column;gap:12px}
@media(min-width:640px){.hero-acts{flex-direction:row;align-items:center}}
.hero .meta{margin-top:12px}

/* Panel */
.panel{border-radius:var(--radius-card);border:1px solid var(--line);
  background:var(--card);box-shadow:var(--shadow-lift);overflow:hidden}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line)}
.panel-h b{font-size:14px;font-weight:600;letter-spacing:-.015em}
.panel-b{padding:4px 18px 16px}
.prow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-block:11px;border-bottom:1px solid var(--line);font-size:14px}
.prow:last-child{border-bottom:0}
.prow span{color:var(--ink-soft)}
.prow b{font-weight:600;font-variant-numeric:tabular-nums}
.prow.tot{border-top:1px solid var(--ink);border-bottom:0;margin-top:4px;padding-top:12px}
.prow.tot span{color:var(--ink);font-weight:500}
.prow.tot b{font-size:20px;color:var(--accent)}
.panel-f{background:var(--accent-wash);border-top:1px solid var(--line);
  padding:11px 18px;font-size:13px;color:var(--accent-deep)}

/* Strip - a slow, quiet marquee on the dusk band. Duplicated list gives a
   seamless loop; hover pauses; reduced-motion renders it static. */
.strip{background:var(--dusk-2);border-block:1px solid var(--dusk-line);
  padding-block:16px;overflow:hidden}
.strip-track{display:flex;width:max-content;gap:56px;
  animation:strip-scroll 38s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip ul{display:flex;gap:56px;list-style:none;flex:none}
.strip li{display:inline-flex;align-items:center;gap:10px;font-size:14px;
  letter-spacing:.01em;color:var(--dusk-muted);white-space:nowrap}
.strip li::before{content:"";width:6px;height:6px;border-radius:9999px;background:var(--brand)}
@keyframes strip-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 28px))}
}
@media (prefers-reduced-motion:reduce){
  .strip-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .strip ul{flex-wrap:wrap;justify-content:center;row-gap:8px}
  .strip ul[aria-hidden="true"]{display:none}
}

/* Typewriter - home hero only. Full text stays in the DOM for no-JS and
   screen readers; JS animates a visual clone. */
.tw-wrap{position:relative}
.tw{border-right:2px solid var(--accent);padding-right:2px;
  animation:tw-caret 1s step-end infinite}
.tw.done{border-right-color:transparent;animation:none}
@keyframes tw-caret{0%,100%{border-right-color:var(--accent)}50%{border-right-color:transparent}}

/* Head block */
.hb{max-width:44rem;margin-bottom:40px}
.hb.mid{margin-inline:auto;text-align:center}
.hb h2{margin-top:12px}
.hb p{margin-top:14px;font-size:1.0625rem;line-height:1.6}

/* Grids */
.g{display:grid;gap:16px}
.g2,.g3,.g4{grid-template-columns:1fr}
@media(min-width:640px){.g2,.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.card-h3{margin-bottom:6px}
.card-p{font-size:14px;line-height:1.55;color:var(--ink-faint)}
.card-no{display:block;font-size:12px;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;margin-bottom:10px}
/* Cards in a grid align their CTA buttons to a shared baseline */
.g>.c-asset,.g>.c-dusk{display:flex;flex-direction:column}
.g>.c-asset .card-lnk,.g>.c-dusk .card-lnk{margin-top:auto;align-self:flex-start}
.g>.c-asset .card-p,.g>.c-dusk .card-p{margin-bottom:16px}

/* Card CTAs are visible buttons - a text-coloured link inside a card
   does not read as clickable. */
.card-lnk{display:inline-flex;align-items:center;justify-content:center;
  margin-top:14px;padding:8px 18px;min-height:38px;
  border:1.5px solid var(--accent);border-radius:var(--radius-md);
  font-size:14px;font-weight:500;color:var(--accent);background:transparent;
  transition:background-color .15s,color .15s,border-color .15s}
.card-lnk:hover,.c-asset:hover .card-lnk{background:var(--accent);color:#fff}
.c-dusk .card-lnk{border-color:var(--brand);color:var(--brand)}
.c-dusk .card-lnk:hover,.c-dusk:hover .card-lnk{background:var(--brand);
  color:var(--dusk)}

/* Split */
.split{display:grid;gap:40px;align-items:center}
@media(min-width:1024px){.split{grid-template-columns:1fr 1fr;gap:56px}}

/* Checks */
.checks{list-style:none;display:grid;gap:10px;margin-top:22px}
.checks li{display:grid;grid-template-columns:18px 1fr;gap:10px;
  font-size:15px;color:var(--ink-soft);line-height:1.5}
.checks li::before{content:"";width:14px;height:14px;border-radius:9999px;
  background:var(--accent-wash);border:1px solid var(--accent);margin-top:5px;
  background-image:linear-gradient(45deg,transparent 42%,var(--accent) 42%,var(--accent) 58%,transparent 58%)}

/* Stats */
.stats{display:flex;flex-wrap:wrap;gap:40px;margin-top:32px;list-style:none}
.stat b{display:block;font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1}
.stat span{display:block;margin-top:6px;font-size:13px;color:var(--ink-faint)}

/* CTA band */
.cta{border-radius:var(--radius-card);background:var(--dusk-2);padding:48px 32px;text-align:center}
.cta h2{color:var(--dusk-text);max-width:26ch;margin-inline:auto;margin-bottom:12px}
.cta p{color:var(--dusk-muted);max-width:52ch;margin-inline:auto;margin-bottom:28px;font-size:15px}
.cta-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* Service rows */
.srow{display:grid;gap:20px;padding-block:32px;border-bottom:1px solid var(--line);align-items:start}
@media(min-width:1024px){.srow{grid-template-columns:.8fr 1.2fr;gap:48px}}
.srow:last-child{border-bottom:0}
.srow h3{font-size:1.25rem;margin-bottom:8px}
.srow>div>p{font-size:15px;line-height:1.6}
.srow ul{list-style:none;display:grid;gap:10px}
.srow li{display:grid;grid-template-columns:14px 1fr;gap:10px;
  font-size:15px;color:var(--ink-soft);line-height:1.5}
.srow li::before{content:"";width:5px;height:5px;border-radius:9999px;
  background:var(--accent);margin-top:9px}

/* Page hero */
.phero{background:var(--card);border-bottom:1px solid var(--line);padding-block:48px 56px}
/* tool pages: the interactive card should sit above the fold */
.phero--snug{padding-block:32px 36px}
.sec--snug{padding-block:28px 64px}
@media(min-width:1024px){.sec--snug{padding-block:32px 80px}}
.phero h1{margin-top:14px;color:var(--accent)}
.phero p{margin-top:18px;font-size:1.125rem;line-height:1.6;max-width:40rem}
.crumb{font-size:13px;color:var(--ink-faint);margin-bottom:16px;list-style:none;
  display:flex;gap:6px;flex-wrap:wrap}
.crumb a{color:var(--accent)}

/* Calculator */
.calc{display:grid;gap:24px;align-items:start}
@media(min-width:1024px){.calc{grid-template-columns:1.3fr .7fr}}
/* Calculator cards sit on the light moss wash so they read as a device,
   not another content card. White inputs pop like keys. */
.c-form--calc{background:var(--accent-wash);border-color:#d0dabd}
.c-form--calc .step button{background:var(--card)}
.c-form--calc .step button:hover:not(:disabled){background:var(--accent);color:#fff}
.c-form--calc .c-edit{background:var(--card);border-color:#d0dabd}

.crow{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding-block:16px;border-bottom:1px solid var(--line)}
.crow:last-of-type{border-bottom:0;padding-bottom:0}
.crow h3,.crow h4{font-size:15px;font-weight:600;letter-spacing:-.015em;
  line-height:1.3;margin-bottom:2px}
.crow small{color:var(--ink-faint);font-size:13px}
.step{display:flex;align-items:center;border:1px solid var(--line);
  border-radius:var(--radius-md);overflow:hidden;background:var(--card)}
.step button{width:34px;height:34px;font-size:15px;color:var(--ink-soft);
  transition:background-color .15s,color .15s}
.step button:hover:not(:disabled){background:var(--accent-wash);color:var(--accent-deep)}
.step button:disabled{opacity:.3;cursor:not-allowed}
.step output{min-width:36px;height:34px;line-height:34px;text-align:center;
  font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;
  border-inline:1px solid var(--line)}
.tog{display:flex;border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;background:var(--card)}
.tog button{padding:8px 18px;font-size:14px;font-weight:500;color:var(--ink-faint);
  transition:background-color .15s,color .15s}
.tog button+button{border-left:1px solid var(--line)}
.tog button[aria-pressed="true"]{background:var(--accent);color:#fff}
.total{border-radius:var(--radius-card);background:var(--dusk-2);padding:28px;
  position:sticky;top:100px}
.total .amt{font-size:44px;font-weight:600;color:var(--dusk-text);line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-block:6px}
.total .note{color:var(--dusk-muted);font-size:13px;margin-bottom:20px}
.bd{list-style:none;display:grid;gap:9px;border-top:1px solid var(--dusk-line);
  padding-top:16px;margin-bottom:22px}
.bd li{display:flex;justify-content:space-between;gap:14px;font-size:13px;color:var(--dusk-muted)}
.bd li b{color:var(--dusk-text);font-weight:600;font-variant-numeric:tabular-nums}
.bd li.none{color:var(--ink-faint);justify-content:center;font-style:italic}
.total .btn{width:100%}
.steps{counter-reset:s;display:grid;gap:20px;margin-top:24px;list-style:none}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-size:12px;font-weight:600;color:var(--accent);padding-top:3px;
  font-variant-numeric:tabular-nums}
.steps li b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.steps li p{font-size:14px;margin-top:3px;color:var(--ink-faint);line-height:1.55}

/* Forms */
.fld{margin-bottom:14px}
.fld label{display:block;font-size:13px;font-weight:500;color:var(--ink-soft);margin-bottom:6px}
/* font-size must be >=16px: iOS Safari auto-zooms the page on focus below that,
   which strands the user zoomed in mid-form. */
.fld input,.fld select,.fld textarea{width:100%;padding:12px 13px;min-height:46px;
  border-radius:var(--radius-md);border:1px solid var(--line);background:var(--card);
  font-family:var(--font-sans);font-size:16px;color:var(--ink);
  transition:border-color .15s,box-shadow .15s}
/* 15px inputs only on mouse devices - touch devices keep 16px at every
   width, otherwise iPad and large-phone Safari zooms on focus */
@media(min-width:640px) and (pointer:fine){
  .fld input,.fld select,.fld textarea{font-size:15px;padding:10px 13px;min-height:0}
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-faint)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent);
  outline:none;box-shadow:0 0 0 3px rgb(var(--accent-rgb)/.1)}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--risk-high)}
.fld .err{display:none;font-size:12px;color:var(--risk-high);margin-top:5px}
.fld input[aria-invalid="true"]~.err,.fld textarea[aria-invalid="true"]~.err{display:block}
.fld textarea{min-height:96px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.f2{grid-template-columns:1fr 1fr}}
.fnote{font-size:12px;color:var(--ink-faint);margin-top:12px;text-align:center}
.hp{position:absolute;left:-9999px}
.formmsg{border-radius:var(--radius-md);padding:12px 16px;font-size:14px;margin-bottom:16px}
.formmsg--err{background:var(--risk-high-wash);color:var(--risk-high)}

/* Contact info */
.cinfo{border-radius:var(--radius-card);border:1px solid var(--line);
  background:var(--card);box-shadow:var(--shadow-rest);overflow:hidden;list-style:none}
.cbit{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 20px;
  border-bottom:1px solid var(--line);font-size:15px}
@media(min-width:640px){.cbit{grid-template-columns:96px 1fr;gap:16px}}
.cbit:last-child{border-bottom:0}
.cbit b{font-size:13px;color:var(--ink-faint);font-weight:600;letter-spacing:-.015em}
.cbit p{color:var(--ink);font-size:15px;line-height:1.5}
.cbit a{color:var(--accent)}

/* FAQ accordion - native details/summary so it is keyboard accessible,
   needs no JS, and every answer stays in the rendered HTML. */
.faq{display:grid;gap:12px;max-width:46rem}
.faq details{border-radius:var(--radius-card);border:1px solid var(--line);
  background:var(--card);box-shadow:var(--shadow-rest)}
.faq details[open]{border-color:rgb(var(--accent-rgb)/.4)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;cursor:pointer;font-weight:600;font-size:15px;
  letter-spacing:-.015em;color:var(--ink);list-style:none;min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:24px;height:24px;border-radius:9999px;
  border:1px solid var(--line);display:grid;place-items:center;
  font-size:15px;font-weight:500;color:var(--accent);transition:transform .15s}
.faq details[open] summary::after{content:"−";transform:rotate(180deg)}
.faq summary:hover{color:var(--accent)}
.faq .faq-a{padding:0 20px 18px;font-size:15px;line-height:1.6;color:var(--ink-soft)}

/* Notice */
.notice{border-radius:var(--radius-md);border:1px solid var(--line);
  border-left:2px solid rgb(var(--accent-rgb)/.4);background:var(--card);
  padding:14px 18px;font-size:13px;color:var(--ink-soft);line-height:1.55;margin-top:24px}
.notice b{color:var(--ink);font-weight:600}

/* Placeholder quote */
.quote{border-radius:var(--radius-card);border:1px dashed var(--ink-faint);
  background:rgb(var(--wash-rgb)/.3);padding:22px 24px;position:relative}
.quote p{font-size:15px;color:var(--ink-faint);font-style:italic;
  margin-bottom:12px;line-height:1.55}
.quote b{display:block;font-size:13px;color:var(--ink);font-weight:600}
.quote i{font-style:normal;font-size:12px;color:var(--ink-faint)}
.ph{position:absolute;top:-9px;right:14px;background:var(--paper);
  font-size:11px;color:var(--ink-faint);padding:1px 8px;
  border:1px solid var(--line);border-radius:9999px}

/* Footer */
.ftr{background:var(--card);border-top:1px solid var(--line);padding-block:52px 24px}
.ftr h2{font-size:13px;color:var(--ink-faint);margin-bottom:14px;
  font-weight:600;letter-spacing:-.015em}
.ftr a{display:block;color:var(--ink-soft);font-size:14px;line-height:2;transition:color .15s}
.ftr a:hover{color:var(--accent)}
/* the footer lockup must keep its flex row - .ftr a's display:block breaks it */
.ftr a.logo{display:flex;line-height:1.2}
.ftr p{color:var(--ink-faint);font-size:14px;line-height:1.6}
/* Links inside footer paragraphs must read as links - otherwise the plain
   address text and the tappable phone numbers look identical. */
.ftr p a{display:inline;color:var(--accent);font-weight:500}
.ftr ul{list-style:none}
.fg{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:640px){.fg{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.fg{grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px}}
.fbot{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
  font-size:13px;color:var(--ink-faint)}

/* =====================================================================
   JOURNEY - the end-to-end visual process strip
   ===================================================================== */
.journey{list-style:none;counter-reset:j;display:grid;gap:0;margin-top:32px}
.journey li{counter-increment:j;display:grid;grid-template-columns:44px 1fr;gap:16px;
  position:relative;padding-bottom:28px}
.journey li:last-child{padding-bottom:0}
.journey li::before{content:counter(j);width:36px;height:36px;border-radius:9999px;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;z-index:1}
.journey li:not(:last-child)::after{content:"";position:absolute;left:17px;top:40px;
  bottom:4px;width:2px;background:var(--line)}
.journey li.done::before{background:var(--ok)}
/* explicit placement: number owns column 1, text owns column 2 -
   auto-placement was dropping the body text into the 44px number column */
.journey li::before{grid-column:1;grid-row:1}
.journey li>b{grid-column:2;grid-row:1}
.journey li>p{grid-column:2;grid-row:2}
.journey b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;padding-top:6px}
.journey p{font-size:14px;color:var(--ink-faint);margin-top:3px;line-height:1.55}
/* who-does-it chips sit on their own line - inline they wrap mid-title */
.journey .you{display:block;width:max-content;margin-top:6px;font-size:11px;font-weight:600;
  border-radius:9999px;padding:1px 8px;background:var(--accent-wash);color:var(--accent-deep)}
.journey .us{display:block;width:max-content;margin-top:6px;font-size:11px;font-weight:600;
  border-radius:9999px;padding:1px 8px;background:var(--ok-wash);color:var(--ok)}
@media(min-width:900px){
  .journey--h{grid-template-columns:repeat(6,1fr);gap:24px}
  .journey--h li{grid-template-columns:1fr;padding-bottom:0;gap:0}
  /* stack: number, then title, then body - single column per step */
  .journey--h li::before{grid-column:1;grid-row:1}
  .journey--h li>b{grid-column:1;grid-row:2;padding-top:12px}
  .journey--h li>p{grid-column:1;grid-row:3;margin-top:4px}
  /* connector runs circle-to-circle, clear of all text */
  .journey--h li:not(:last-child)::after{left:48px;right:-24px;top:17px;bottom:auto;
    width:auto;height:2px}
}

/* Fees page: the journey film - animated overview above the six steps */
.jfilm{margin:26px auto 34px;max-width:44.8rem;border-radius:var(--radius-card);
  border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow-lift);
  background:var(--card)}
.jfilm video{width:100%;display:block}
.jfilm-stage{position:relative}
/* step heading above the film, follows the acts */
.jfilm-step{margin:0;padding:16px 18px 12px;font-size:1.05rem;font-weight:600;
  letter-spacing:-.015em;color:var(--accent);border-bottom:1px solid var(--line);
  min-height:52px;opacity:0;transition:opacity .35s}
.jfilm-step.show{opacity:1}
.jfilm-cap{padding:12px 18px;font-size:13px;color:var(--ink-faint);
  border-top:1px solid var(--line)}
/* reduced motion: the six written steps below carry the content */
@media (prefers-reduced-motion:reduce){.jfilm{display:none}}

/* =====================================================================
   INTAKE WIZARD (/file/)
   ===================================================================== */
.wiz{display:grid;gap:24px;align-items:start}
@media(min-width:1024px){.wiz{grid-template-columns:1.45fr .55fr}}

/* progress rail - a true stepper: numbered circles on a connector line */
.wiz-rail{list-style:none;display:flex;margin-bottom:30px}
.wiz-rail li{flex:1;display:flex;flex-direction:column;align-items:center;
  gap:7px;position:relative;text-align:center}
.wiz-rail li+li::before{content:"";position:absolute;top:16px;
  right:calc(50% + 22px);left:calc(-50% + 22px);height:2px;
  background:var(--line);transition:background .3s ease}
.wiz-rail .n{width:33px;height:33px;border-radius:9999px;display:grid;
  place-items:center;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink-faint);
  background:var(--card);border:2px solid var(--line);z-index:1;
  transition:background .25s ease,border-color .25s ease,color .25s ease,
    transform .25s ease,box-shadow .25s ease}
.wiz-rail .l{font-size:12px;font-weight:500;color:var(--ink-faint);
  letter-spacing:-.01em;transition:color .25s ease}
.wiz-rail li[aria-current="step"] .n{background:var(--accent);
  border-color:var(--accent);color:#fff;transform:scale(1.12);
  box-shadow:0 0 0 5px var(--accent-wash)}
.wiz-rail li[aria-current="step"] .l{color:var(--accent-deep);font-weight:600}
.wiz-rail li[aria-current="step"]::before{background:var(--accent)}
.wiz-rail li.done .n{background:var(--ok);border-color:var(--ok);color:#fff}
.wiz-rail li.done .l{color:var(--ink-soft)}
.wiz-rail li.done::before{background:var(--ok)}
@media(max-width:560px){
  .wiz-rail .l{display:none}
  .wiz-rail li[aria-current="step"] .l{display:block}
}
@media (prefers-reduced-motion:reduce){
  .wiz-rail .n,.wiz-rail .l,.wiz-rail li::before{transition:none}
  .wiz-rail li[aria-current="step"] .n{transform:none}
}

/* steps */
.wstep{border:0;padding:0;margin:0;min-width:0}
.wstep legend{display:block;width:100%}
/* legends receive programmatic focus for screen readers - no visible ring */
.wstep legend:focus,.wstep legend:focus-visible{outline:none}
.wstep[hidden]{display:none}
.wstep legend{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:4px;padding:0}
.wstep .sub{font-size:14px;color:var(--ink-faint);margin-bottom:18px}
.wnav{display:flex;justify-content:space-between;gap:12px;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--line)}
.wnav .spacer{flex:1}

/* tile radios - large selectable cards */
.tiles{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media(min-width:640px){.tiles--4{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative}
.tile input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tile span{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line);
  border-radius:var(--radius-card);padding:14px 16px;font-size:15px;font-weight:600;
  letter-spacing:-.015em;color:var(--ink);background:var(--card);min-height:52px;
  justify-content:center;transition:border-color .15s,background .15s;text-align:center}
.tile small{font-weight:400;font-size:12px;color:var(--ink-faint)}
.tile input:checked+span{border-color:var(--accent);background:var(--accent-wash);
  color:var(--accent-deep)}
.tile input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* yes/no chip pair + screener grid */
.screeners{display:grid;gap:2px;border:1px solid var(--line);border-radius:var(--radius-card);
  overflow:hidden;background:var(--card)}
.scr{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 16px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink)}
.scr:last-child{border-bottom:0}
.scr .yn{display:flex;border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;flex:none}
.scr .yn label{position:relative}
.scr .yn input{position:absolute;opacity:0;inset:0;cursor:pointer}
.scr .yn span{display:grid;place-items:center;min-width:52px;height:36px;
  font-size:13px;font-weight:500;color:var(--ink-faint);background:var(--card)}
.scr .yn label+label span{border-left:1px solid var(--line)}
.scr .yn input:checked+span{background:var(--accent);color:#fff}
.scr .yn input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-2px}

/* conditional follow-ups */
.follow{margin-top:10px;padding:14px 16px;border-left:2px solid rgb(var(--accent-rgb)/.4);
  background:rgb(var(--wash-rgb)/.35);border-radius:var(--radius-md)}
.follow[hidden]{display:none}

/* checklist panel */
.dcl[hidden]{display:none}
.dcl{margin-top:14px}
.dcl ul{list-style:none;display:grid;gap:8px;margin-top:10px}
.dcl li{display:grid;grid-template-columns:16px 1fr;gap:9px;font-size:14px;
  color:var(--ink-soft)}
.dcl li::before{content:"";width:6px;height:6px;border-radius:9999px;
  background:var(--accent);margin-top:7px}

/* sticky estimate summary */
/* The aside is the sticky unit, never the card alone - a sticky card
   inside the aside would slide over its journey-card sibling. */
.wsum{border-radius:var(--radius-card);border:1px solid var(--line);background:var(--card);
  box-shadow:var(--shadow-rest);overflow:hidden}
@media(min-width:1024px){.wiz>aside{position:sticky;top:100px;align-self:start}}
.wsum-h{padding:13px 18px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.wsum-b{padding:14px 18px}
.wsum .amt{font-size:32px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1}
.wsum .note{font-size:12px;color:var(--ink-faint);margin-top:6px}
.wsum ul{list-style:none;display:grid;gap:7px;border-top:1px solid var(--line);
  margin-top:12px;padding-top:12px}
.wsum li{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft)}
.wsum li b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}

/* income split bar */
.tbar{display:flex;height:14px;border-radius:9999px;overflow:hidden;
  border:1px solid var(--line);margin-top:14px}
.tbar[hidden]{display:none}
.tbar .seg{display:block;height:100%}
.tbar .seg--keep{background:var(--ok)}
.tbar .seg--tax{background:var(--accent)}
.tbar .seg--prem{background:var(--ink-faint)}
.tkey{display:flex;gap:16px;margin-top:8px;font-size:12px;color:var(--ink-faint);flex-wrap:wrap}
.tkey span{display:inline-flex;align-items:center;gap:6px}
.tkey i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* review step */
.rev-list{display:grid;gap:2px;border:1px solid var(--line);border-radius:var(--radius-card);
  overflow:hidden;background:var(--card)}
.rev-row{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
.rev-row:last-child{border-bottom:0}
.rev-row dt{color:var(--ink-faint);font-weight:500}
.rev-row dd{color:var(--ink)}
.rev-row button{color:var(--accent);font-size:13px;font-weight:500}
@media(max-width:560px){.rev-row{grid-template-columns:1fr;gap:2px}}

/* upload */
.upl{border:1.5px dashed var(--ink-faint);border-radius:var(--radius-card);
  padding:18px;text-align:center;background:rgb(var(--wash-rgb)/.25)}
.upl input{width:100%;font-size:14px}
.upl .hint{font-size:12px;color:var(--ink-faint);margin-top:8px}

/* Floating WhatsApp button - liquid blob morph + soft ripple.
   WhatsApp brand green kept for instant recognition. */
.wa{position:fixed;z-index:55;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  width:58px;height:58px;display:grid;place-items:center;
  background:#25d366;color:#fff;
  border-radius:46% 54% 52% 48% / 48% 46% 54% 52%;
  box-shadow:0 6px 20px rgb(18 140 70 / .35);
  animation:wa-liquid 7s ease-in-out infinite;
  transition:transform .18s ease,box-shadow .18s ease}
.wa:hover{transform:scale(1.07);box-shadow:0 10px 28px rgb(18 140 70 / .45)}
.wa:active{transform:scale(.97)}
.wa svg{width:30px;height:30px}
.wa::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:#25d366;opacity:.35;z-index:-1;
  animation:wa-ripple 3.2s ease-out infinite}
.wa::after{content:"Message us on WhatsApp";position:absolute;right:calc(100% + 12px);
  top:50%;transform:translateY(-50%);white-space:nowrap;
  background:var(--dusk-2);color:var(--dusk-text);font-size:13px;font-weight:500;
  padding:7px 12px;border-radius:var(--radius-md);
  opacity:0;pointer-events:none;transition:opacity .18s ease}
.wa:hover::after,.wa:focus-visible::after{opacity:1}
@keyframes wa-liquid{
  0%,100%{border-radius:46% 54% 52% 48% / 48% 46% 54% 52%}
  25%{border-radius:54% 46% 44% 56% / 52% 56% 44% 48%}
  50%{border-radius:48% 52% 56% 44% / 44% 52% 48% 56%}
  75%{border-radius:52% 48% 46% 54% / 56% 44% 52% 44%}
}
@keyframes wa-ripple{
  0%{transform:scale(1);opacity:.35}
  70%{transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}
}
@media(max-width:639px){
  .wa{width:54px;height:54px}
  .wa::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wa{animation:none;border-radius:50%}
  .wa::before{animation:none;opacity:0}
}
/* Phones and tablets, every page: no call buttons - the paths we want
   are WhatsApp chat and the forms. Laptop keeps the call buttons. */
@media(max-width:1023px){
  a.callfab,a.callfab:hover,.hdr-call{display:none}}

/* Floating call button - moss twin of the WhatsApp blob, stacked above it */
.callfab{position:fixed;z-index:55;
  right:max(18px,env(safe-area-inset-right));
  bottom:calc(max(18px,env(safe-area-inset-bottom)) + 70px);
  width:58px;height:58px;display:grid;place-items:center;
  background:var(--accent);color:#fff;
  border-radius:52% 48% 46% 54% / 46% 54% 48% 52%;
  box-shadow:0 6px 20px rgb(79 99 56 / .35);
  animation:wa-liquid 8s ease-in-out infinite reverse;
  transition:transform .18s ease,box-shadow .18s ease}
.callfab:hover{transform:scale(1.07);box-shadow:0 10px 28px rgb(79 99 56 / .45)}
.callfab:active{transform:scale(.97)}
.callfab svg{width:26px;height:26px}
.callfab::after{content:"Call 416-565-8299";position:absolute;right:calc(100% + 12px);
  top:50%;transform:translateY(-50%);white-space:nowrap;
  background:var(--dusk-2);color:var(--dusk-text);font-size:13px;font-weight:500;
  padding:7px 12px;border-radius:var(--radius-md);
  opacity:0;pointer-events:none;transition:opacity .18s ease}
.callfab:hover::after,.callfab:focus-visible::after{opacity:1}
@media(max-width:639px){
  .callfab{width:54px;height:54px;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 66px)}
  .callfab::after{display:none}
}
@media (prefers-reduced-motion:reduce){.callfab{animation:none;border-radius:50%}}

/* keep the floating buttons out of the way while the mobile menu is open */
body:has(.mnav[data-open="true"]) .wa,
body:has(.mnav[data-open="true"]) .callfab{display:none}

/* Reveal
   Fail-safe by design: content is visible by default. JS opts an element in
   by adding .will-animate, and a 1.2s watchdog reveals anything the observer
   never reached. Content can never be permanently invisible. */
.reveal{opacity:1;transform:none}
.reveal.will-animate{opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s ease}
.reveal.will-animate.is-visible{opacity:1;transform:translateY(0)}

/* =====================================================================
   MOBILE
   ===================================================================== */
@media(max-width:1023px){
  /* sticky totals fight thumb-scrolling on a phone */
  .total{position:static}
}

@media(max-width:639px){
  /* Notch / rounded-corner safe areas */
  .ct{padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right))}
  .ftr{padding-bottom:max(24px,env(safe-area-inset-bottom))}

  /* Tap targets: every interactive element clears 44px */
  .btn{min-height:44px}
  .btn-sm{height:auto;min-height:44px;padding-inline:14px}
  .step button{width:44px;height:44px}
  .step output{height:44px;line-height:44px}
  .tog button{min-height:44px;padding-inline:22px}
  .ftr a{line-height:1.9;padding-block:5px}
  .cbit a{display:inline-block;padding-block:3px}

  /* Headline tightening - 36px on a 390px screen needs less leading */
  h1{font-size:2rem;line-height:1.12}
  h2{font-size:1.5rem}
  .lead{font-size:1.0625rem}

  /* Trust strip reads as a list, not a wrapped ribbon */
  .strip{padding-block:12px}
  .strip .ct{gap:6px 18px;justify-content:flex-start;font-size:12px}

  /* Section rhythm: 64px is too airy on a small screen */
  .sec{padding-block:48px}
  .hero{padding-block:40px 48px}
  .hb{margin-bottom:28px}
  .cta{padding:32px 22px}
  .phero{padding-block:32px 40px}

  /* Stack CTA buttons full width - easier to hit, reads as a clear choice */
  .cta-acts .btn,.hero-acts .btn{width:100%}
  .cta-acts{flex-direction:column}

  /* Long unbroken strings (emails, phone numbers) must not force a scrollbar */
  .cbit p,.panel-f,.ftr p{overflow-wrap:break-word}

  /* Stats sit closer together */
  .stats{gap:24px 32px}
  .split{gap:32px}
}

/* Landscape phones: reclaim vertical space */
@media(max-height:500px) and (orientation:landscape){
  .hero{padding-block:32px}
  .sec{padding-block:40px}
  .hdr{position:static}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.will-animate{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  .hdr,.mnav,.ftr,.cta,.no-print{display:none!important}
  body{background:#fff}
}

/* =====================================================================
   HOME - editorial masthead hero (option A) + shared home sections
   ===================================================================== */
.mast .ct{padding-block:40px 34px}
.mast h1{color:var(--ink);font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.06;
  max-width:19ch;margin-top:12px}
.mast .tw{color:var(--accent)}
/* headline accents: both key phrases in moss, rest in ink */
.hl-red{color:#b2372e}
.hl-moss{color:var(--accent)}
.mast .tw-a{color:var(--ink)}
.mast .tw-b{color:var(--accent)}
.tw-typing::after{content:"";display:inline-block;width:3px;height:.9em;
  background:var(--accent);margin-left:4px;vertical-align:-.08em;
  animation:twblink 1.05s steps(1) infinite}
@keyframes twblink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tw-typing::after{display:none}}
.mast-row{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.mast-row{grid-template-columns:1.25fr .75fr}}
.mast-lead{margin-top:16px;font-size:1.02rem;color:var(--ink-soft);max-width:34rem;line-height:1.6}
.mast-acts{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:20px}
.tlink{font-size:15px;font-weight:600;color:var(--accent);text-decoration:underline;
  text-underline-offset:4px}
.tlink:hover{color:var(--accent-deep)}
/* the film: a full-width cinematic band under the masthead, facts on its lower edge */
.filmband{position:relative;border-top:1px solid var(--line)}
/* the framing (tower crown through the waterline) is baked into the video
   itself at 3.56:1. The height also respects the viewport so the masthead
   plus the whole scene fit the first screen with no scroll - when space is
   tight the crop trims evenly from the sky and water edges. */
.filmband video{width:100%;height:clamp(230px,min(28.1vw,calc(100vh - 450px)),740px);
  object-fit:cover;display:block;filter:saturate(1.04)}
@supports (height:100svh){
  .filmband video{height:clamp(230px,min(28.1vw,calc(100svh - 450px)),740px)}}
.film-meta{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(0deg,rgb(18 23 12/.35),transparent);padding:0 0 6px}
.film-meta .ct{display:flex;gap:14px;flex-wrap:nowrap;justify-content:space-between;
  font-size:clamp(13px,1.6vw,27px);letter-spacing:.05em;text-transform:uppercase;
  color:#fff;font-weight:600}
/* fully transparent fact chips - text floats straight on the film */
.film-meta .ct span{background:transparent;border:0;
  padding:clamp(8px,1vw,15px) clamp(14px,1.7vw,30px);white-space:nowrap;
  text-shadow:0 1px 3px rgb(0 0 0/.55),0 4px 14px rgb(0 0 0/.4)}
@media(max-width:639px){
  .film-meta{padding:0 0 4px}
  .film-meta .ct{flex-wrap:nowrap;gap:8px;justify-content:space-between;
    font-size:clamp(8.5px,2.5vw,10.5px);letter-spacing:.02em}
  .film-meta .ct span{padding:6px 2px}}
@media (prefers-reduced-motion:reduce){
  .filmband video{display:none}
  .filmband{background:url("/assets/img/hero-poster.jpg") center/cover no-repeat;
    height:clamp(230px,min(28.1vw,calc(100vh - 450px)),740px)}}

/* value strip */
.vstrip{background:var(--accent);color:#fff}
.vstrip .ct{display:grid;gap:24px;padding-block:34px;grid-template-columns:1fr}
@media(min-width:640px){.vstrip .ct{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.vstrip .ct{grid-template-columns:repeat(4,1fr)}}
.vstrip .ct>div>div{display:flex;gap:13px}
.v-ic{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid rgb(255 255 255/.55);
  display:grid;place-items:center;color:#fff}
.vstrip b{display:block;font-size:15.5px;margin-bottom:3px}
.vstrip p{font-size:13px;color:#dbe3cd;line-height:1.5}

/* six service tiles */
.svc6{margin-top:38px;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:600px){.svc6{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.svc6{grid-template-columns:repeat(3,1fr)}}
.stile{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:28px 24px;text-align:center;box-shadow:var(--shadow-rest);
  transition:box-shadow .22s,transform .22s}
.stile:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.st-ic{width:58px;height:58px;margin:0 auto 16px;border-radius:14px;background:var(--accent-wash);
  display:grid;place-items:center;color:var(--accent)}
.stile h3{font-size:1.04rem;letter-spacing:-.015em;color:var(--ink)}
.stile p{margin-top:8px;font-size:13.5px;color:var(--ink-faint)}
.sec-cta{text-align:center;margin-top:34px}

/* process band: AI film + steps */
.jproc{background:var(--dusk);color:var(--dusk-text)}
.jproc .ct{display:grid;gap:44px;padding-block:72px;align-items:center}
@media(min-width:960px){.jproc .ct{grid-template-columns:1.1fr .9fr}}
.jproc .micro{color:var(--brand)}
.jproc h2{color:var(--dusk-text);margin-top:10px}
.pvid{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--dusk-line);
  box-shadow:0 24px 70px rgb(0 0 0/.45);
  transform:perspective(1200px) rotateY(-4deg) rotateX(1.5deg);transition:transform .35s}
.pvid:hover{transform:perspective(1200px) rotateY(0) rotateX(0)}
@media (prefers-reduced-motion:reduce){.pvid{transform:none}}
.pvid video{width:100%;display:block}
.jsteps{list-style:none;display:grid;margin-top:26px;counter-reset:js}
.jsteps li{position:relative;padding:15px 0 15px 58px;counter-increment:js}
.jsteps li::before{content:counter(js,decimal-leading-zero);position:absolute;left:0;top:13px;
  width:40px;height:40px;border-radius:50%;border:1.5px solid var(--dusk-line);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;color:var(--brand);
  font-variant-numeric:tabular-nums}
.jsteps li:not(:last-child)::after{content:"";position:absolute;left:20px;top:56px;bottom:-2px;
  width:1.5px;background:var(--dusk-line)}
.jsteps b{display:block;font-size:15.5px;color:var(--dusk-text)}
.jsteps p{font-size:13.5px;color:var(--dusk-muted);margin-top:3px}

/* who-we-are office video slot */
.whyvid{border-radius:18px;background:linear-gradient(150deg,#e6e9db,#cbd4b8);min-height:340px;
  display:grid;place-items:center;text-align:center;padding:24px;box-shadow:var(--shadow-lift)}
/* temporary licensed footage until the real office video arrives */
.whyvid--film{padding:0;overflow:hidden;display:block;min-height:0}
.whyvid--film video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.wv-note{padding:10px 16px;font-size:12px;font-style:italic;color:var(--ink-faint);
  background:var(--card);border-top:1px solid var(--line);margin:0;max-width:none}
@media (prefers-reduced-motion:reduce){.whyvid--film video{display:none}
  .whyvid--film::before{content:"";display:block;aspect-ratio:16/9;
  background:url("/assets/img/office-poster.jpg") center/cover no-repeat}}
.wv-play{width:64px;height:64px;border-radius:50%;background:rgb(79 99 56/.9);color:#fff;
  display:grid;place-items:center;margin:0 auto 16px}
.wv-play svg{margin-left:4px}
.whyvid p{font-size:13px;font-style:italic;color:#3c4c2a;max-width:32ch}

/* three-up quotes */
@media(min-width:900px){.g.g3{grid-template-columns:repeat(3,1fr)}}

/* green closing band */
.cta2{background:var(--accent);color:#fff}
.cta2 .ct{display:grid;gap:30px;padding-block:52px;align-items:center}
@media(min-width:960px){.cta2 .ct{grid-template-columns:1.15fr auto 1fr}}
.cta2 h2{color:#fff}
.cta2 .sub{margin-top:10px;color:#dbe3cd;font-size:15px;max-width:34rem}
.btn-glass2{background:transparent;color:#fff;border:1.5px solid rgb(255 255 255/.75)}
.btn-glass2:hover{background:rgb(255 255 255/.12);color:#fff}
.cta2 ul{list-style:none;display:grid;gap:12px;font-size:14.5px}
.cta2 ul li{display:flex;gap:11px;align-items:flex-start;color:#dbe3cd}
.cta2 ul svg{flex:none;margin-top:2px}
main .cta2 ul li a:not(.btn),main .cta2 ul li a:not(.btn):hover{color:#fff;
  text-decoration:underline;text-underline-offset:3px;display:inline;padding:0;margin:0}

/* ---------- UAT fixes ---------- */
/* Visually hidden but announced - used for the wizard's fee-lines heading */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Journey timeline: match the film card's width so the two read as one block,
   and lift the you/us chips off the 11px floor. */
.journey--h{max-width:44.8rem;margin-inline:auto}
.journey .you,.journey .us{font-size:12.5px}

/* Fees page hero: use the empty right column for the reassurance line
   instead of leaving it blank. */
@media(min-width:900px){
  .phero--split .ct{display:grid;grid-template-columns:1.15fr .85fr;
    gap:40px;align-items:center}
  .phero--split .ct>nav{grid-column:1 / -1}
  .phero--split .phero-aside{align-self:center}
}
.phero-aside{background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:0 12px 12px 0;
  padding:18px 20px;margin-top:20px}
.phero-aside b{display:block;font-size:14.5px;color:var(--accent)}
.phero-aside p{font-size:13.5px;color:var(--ink-soft);margin-top:5px}

/* Real client testimonials - solid cards, readable text, moss quote mark.
   The placeholder styling above (dashed, faint italic) stays for any slot
   still waiting on a quote. */
/* cards hug their own content - a short quote should not be stretched to
   match a long one, which leaves a dead gap above the attribution */
.quotes-real{align-items:start}
.quotes-real .quote{border:1px solid var(--line);border-style:solid;
  background:var(--card);box-shadow:var(--shadow-rest);
  padding:30px 30px 26px;display:flex;flex-direction:column;position:relative}
.quotes-real .quote::before{content:"\201C";position:absolute;top:6px;left:22px;
  font-family:Georgia,serif;font-size:64px;line-height:1;color:var(--accent);
  opacity:.18;pointer-events:none}
.quotes-real .quote p{font-size:13.5px;line-height:1.7;color:var(--ink-soft);
  font-style:italic;position:relative}
.quotes-real .quote p + p{margin-top:12px}
.quotes-real .quote figcaption{margin-top:auto;padding-top:18px;
  border-top:1px solid var(--line)}
.quotes-real .quote b{font-size:14.5px;color:var(--accent);font-weight:600}
.quotes-real .quote i{display:block;margin-top:2px;font-size:12.5px;
  color:var(--ink-faint)}

/* ---------- Testimonials: horizontal scroller on a moss band ---------- */
.sec--quotes{background:var(--accent-wash);border-block:1px solid #dfe5d2}
.sec--quotes h2{color:var(--accent-deep)}
.qhint{margin-top:10px;font-size:14px;color:var(--ink-soft)}

.qwrap{position:relative;margin-top:34px}
/* the rail itself - scrolls horizontally, snaps card to card */
.quotes-real{display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;padding:4px 2px 18px;
  scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.quotes-real::-webkit-scrollbar{height:7px}
.quotes-real::-webkit-scrollbar-thumb{background:var(--accent);border-radius:9999px}
.quotes-real::-webkit-scrollbar-track{background:rgb(79 99 56/.12);border-radius:9999px}
.quotes-real:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.quotes-real .quote{flex:0 0 clamp(280px,84vw,420px);scroll-snap-align:start;
  border:1px solid var(--line);border-style:solid;background:var(--card);
  box-shadow:var(--shadow-rest);padding:30px 30px 26px;
  display:flex;flex-direction:column;position:relative;
  transition:box-shadow .2s,transform .2s}
.quotes-real .quote:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
@media(min-width:900px){.quotes-real .quote{flex-basis:420px}}

/* arrows - only shown by script when the rail actually overflows */
.qnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;border-radius:50%;border:1px solid #dfe5d2;
  background:var(--card);color:var(--accent);display:grid;place-items:center;
  box-shadow:0 4px 14px rgb(23 26 18/.14);cursor:pointer;
  transition:background .15s,color .15s,opacity .15s}
.qnav:hover{background:var(--accent);color:#fff}
.qnav[hidden]{display:none}
.qnav[disabled]{opacity:.35;cursor:default}
.qnav[disabled]:hover{background:var(--card);color:var(--accent)}
.qprev{left:-14px}
.qnext{right:-14px}
@media(max-width:1023px){.qnav{display:none}}