/* ==================================================================
   lamhokjun.com — the public site's one stylesheet
   Blend, per specs/lamhokjun-site-spec.md §0 and lamhokjun-pages-spec.md:
     structure    practice-botanical-vellum-broadsheet-light
     palette+type ai-field-journal-ivory-light

   Acceptance test: a field journal kept by one practitioner — ivory
   paper, a serif that speaks, hairlines instead of boxes, and one clay
   green action where you are meant to write back.

   Rules this file keeps:
     - every value below the :root block is a token
     - restrained deep-green contact actions (.btn)
     - no shadow anywhere
     - the manilla band (.feature) appears on /services/ only
   ================================================================== */

@font-face{font-family:'Source Serif 4';src:url(/fonts/source-serif-4-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(/fonts/source-serif-4-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Noto Serif TC';src:url(/fonts/noto-serif-tc-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Serif TC';src:url(/fonts/noto-serif-tc-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url(/fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url(/fonts/inter-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url(/fonts/inter-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url(/fonts/inter-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Noto Sans TC';src:url(/fonts/noto-sans-tc-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans TC';src:url(/fonts/noto-sans-tc-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Noto Sans TC';src:url(/fonts/noto-sans-tc-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Noto Sans TC';src:url(/fonts/noto-sans-tc-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  /* --- 1 colours ------------------------------------------------ */
  --color-slate-dark:#141413;
  --color-slate-medium:#3d3d3a;
  --color-ivory-medium:#f0eee6;
  --color-ivory-light:#faf9f5;
  --color-oat-warm:#e3dacc;
  --color-manilla:#f5e3c7;
  --color-stone:#cccbc8;
  --color-cloud-medium:#66665e;
  --color-green:#244c3c;
  --color-green-deep:#18382b;

  /* --- 2 surface ladder ----------------------------------------- */
  --surface-canvas:var(--color-ivory-medium);
  --surface-lifted:var(--color-ivory-light);
  --surface-feature:var(--color-manilla);
  --surface-band:var(--color-oat-warm);
  --surface-accent:var(--color-green);
  --surface-inversion:var(--color-slate-dark);

  /* --- 3 families — Latin first, CJK second --------------------- */
  --font-serif:'Source Serif 4','Noto Serif TC',Georgia,serif;
  --font-sans:'Inter','Noto Sans TC',system-ui,-apple-system,sans-serif;

  /* --- 4 weights ------------------------------------------------ */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* --- 5 type scale --------------------------------------------- */
  --text-caption:12px;      --leading-caption:1.4;    --tracking-caption:-0.24px;
  --text-body-sm:16px;      --leading-body-sm:1.4;    --tracking-body-sm:-0.08px;
  --text-body:20px;         --leading-body:1.4;
  --text-subheading:24px;   --leading-subheading:1.3; --tracking-subheading:-0.05px;
  --text-heading:48px;      --leading-heading:1.15;    --tracking-heading:-0.12px;
  --text-display:52px;      --leading-display:1.15;
  --text-name:132px;        --leading-name:0.92;      --tracking-name:-0.03em;
  --text-name-alt:68px;     --leading-name-alt:1.1;   --tracking-name-alt:-0.01em;

  /* --- 6 spacing ------------------------------------------------ */
  --spacing-4:4px;   --spacing-8:8px;   --spacing-12:12px; --spacing-16:16px;
  --spacing-24:24px; --spacing-32:32px; --spacing-40:40px; --spacing-60:60px;
  --spacing-76:76px; --spacing-100:100px;

  /* --- 7 layout ------------------------------------------------- */
  --gutter:80px;
  --measure:620px;
  --margin-col:128px;
  --section-gap:var(--spacing-100);

  /* --- 8 radii (per-element table; nothing invented) ------------ */
  --radius-link:0;
  --radius-button:0 0 8px 8px;
  --radius-image:4px;
  --radius-block:0;

  /* --- 9 elevation: none, anywhere. Both donors agree. ---------- */

  /* --- 10 motion ------------------------------------------------ */
  --motion-color:150ms ease-out;
  --motion-transform:200ms ease-out;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface-canvas);
  color:var(--color-slate-dark);
  font-family:var(--font-serif);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  font-weight:var(--weight-regular);
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--surface-band);color:var(--color-slate-dark)}

.pad{padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}

a{color:inherit}
:focus-visible{outline:2px solid var(--color-slate-dark);outline-offset:2px;border-radius:var(--radius-link)}

/* ---------- 0 nav — 70px, transparent, no border ---------------- */
.nav{
  height:70px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--spacing-24);font-family:var(--font-sans)}
.wordmark{
  font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:.08em;text-transform:uppercase;justify-self:start;
  text-decoration:none;
  -webkit-user-select:none;user-select:none}
a.wordmark{transition:color var(--motion-color)}
a.wordmark:hover{color:var(--color-cloud-medium)}
.nav-links{
  display:flex;gap:var(--spacing-24);justify-self:center;
  font-size:14px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-caption)}
.nav-links a{text-decoration:none;transition:color var(--motion-color)}
.nav-links a:hover{color:var(--color-cloud-medium)}
.nav-links a[aria-current="page"]{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lang{display:flex;justify-self:end;font-family:var(--font-sans);font-size:var(--text-caption)}
.lang button{
  font:inherit;border:0;background:transparent;color:var(--color-cloud-medium);
  padding:var(--spacing-4) var(--spacing-8);border-radius:var(--radius-link);
  cursor:pointer;transition:color var(--motion-color)}
.lang button:hover{color:var(--color-slate-dark)}
.lang button[aria-pressed="true"]{background:var(--surface-lifted);color:var(--color-slate-dark)}
.menu-toggle{display:none}

/* ---------- section rhythm ---------- */
section{padding-block:var(--section-gap)}
.ruled{border-top:1px solid var(--color-stone)}
/* a list that opens its section carries its own top hairline */
section.ruled:has(> .rows:first-child),
section.ruled:has(> .faq:first-child){border-top:0;padding-top:0}
/* the feature band butts the list above it: the tone change is the divider */
section:has(+ .feature){padding-bottom:0}

h2{
  font-family:var(--font-serif);font-size:var(--text-subheading);
  font-weight:var(--weight-semibold);line-height:var(--leading-subheading);
  letter-spacing:var(--tracking-subheading);margin:0 0 var(--spacing-40);
  text-wrap:balance}
p{margin:0 0 var(--spacing-24);max-width:var(--measure);text-wrap:pretty}
p:last-child{margin-bottom:0}

/* ---------- 1 hero (home only) ---------------------------------- */
.hero{padding-block:var(--spacing-60) var(--section-gap);min-height:82vh;
  display:flex;flex-direction:column;justify-content:center;position:relative}
.hero-name{
  font-size:var(--text-name);font-weight:var(--weight-regular);
  line-height:var(--leading-name);letter-spacing:var(--tracking-name);
  margin:0 0 var(--spacing-8);text-wrap:balance}
.hero-altname{
  font-size:var(--text-name-alt);font-weight:var(--weight-regular);
  line-height:var(--leading-name-alt);letter-spacing:var(--tracking-name-alt);
  color:var(--color-slate-dark);margin:0 0 var(--spacing-60)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--spacing-60);align-items:end}
.hero-sentence{
  font-size:var(--text-display);font-weight:var(--weight-regular);
  line-height:var(--leading-display);margin:0;max-width:14ch;
  overflow-wrap:anywhere;text-wrap:balance}
html[lang^="zh"] .hero-sentence{max-width:12em;line-break:strict;overflow-wrap:normal}
html[lang^="zh"] .hero-sentence span{display:inline-block}
html[lang^="zh"] .hero-name{letter-spacing:.02em}
.hero-support p{margin-bottom:var(--spacing-24)}
.hero-context{
  font-family:var(--font-sans);font-size:var(--text-body-sm);
  line-height:1.7;letter-spacing:var(--tracking-body-sm);
  color:var(--color-slate-dark)}
.hero-context b{font-weight:var(--weight-medium);color:var(--color-slate-dark)}
/* Portrait slot — reserved (spec §1.3). Unframed, 4px, no shadow, breaks
   the hairline below the hero on desktop; sits under the text below that. */
.portrait{display:block;width:280px;height:auto;border-radius:var(--radius-image);
  position:absolute;right:var(--gutter);bottom:calc(-1 * var(--spacing-60))}

/* ---------- 1b page head (inner pages) --------------------------- */
.page-head{padding-block:var(--spacing-60) var(--section-gap)}
.crumbs{
  font-family:var(--font-sans);font-size:var(--text-caption);
  letter-spacing:var(--tracking-caption);color:var(--color-cloud-medium);
  margin:0 0 var(--spacing-24)}
.crumbs a{text-decoration:none;transition:color var(--motion-color)}
.crumbs a:hover{color:var(--color-slate-dark)}
.page-title{
  font-size:var(--text-display);font-weight:var(--weight-regular);
  line-height:var(--leading-display);margin:0 0 var(--spacing-40);
  max-width:16ch;text-wrap:balance}
html[lang^="zh"] .page-title{max-width:12em}
.lede{max-width:var(--measure)}

/* ---------- 2 about facts ---------- */
.facts{
  list-style:none;margin:var(--spacing-40) 0 0;padding:0;max-width:var(--measure);
  font-family:var(--font-sans);font-size:var(--text-caption);
  letter-spacing:var(--tracking-caption)}
.facts li{
  padding:var(--spacing-12) 0;border-bottom:1px solid var(--color-stone);
  display:flex;justify-content:space-between;gap:var(--spacing-24)}
.facts li:first-child{border-top:1px solid var(--color-stone)}
.facts .k{color:var(--color-slate-dark);font-weight:var(--weight-semibold)}

/* ---------- 3 ruled rows ---------------------------------------
   One geometry for every list on the site: a 128px margin column, the
   entry, and (when the row is a link) an arrow. Never a card, never a
   grid of them. Areas, ventures, deadlines and notes all use it. */
.rows{list-style:none;margin:0;padding:0}
.rows > li{border-bottom:1px solid var(--color-stone)}
.rows > li:first-child{border-top:1px solid var(--color-stone)}
.row{
  display:grid;grid-template-columns:var(--margin-col) minmax(0,1fr) auto;
  gap:var(--spacing-32);align-items:baseline;
  padding:var(--spacing-24) var(--gutter);
  text-decoration:none;color:inherit;
  transition:background-color var(--motion-color)}
.row:hover{background:var(--surface-band)}
.row-go{
  font-family:var(--font-sans);font-size:var(--text-body-sm);
  transition:transform var(--motion-transform)}
a.row:hover .row-go{transform:translateX(var(--spacing-4))}
a.row:focus-visible{outline-offset:-2px}

/* margin column: the other language (areas), a month (deadlines) */
.row-m{
  font-family:var(--font-serif);font-size:var(--text-subheading);
  line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading);
  color:var(--color-slate-dark)}
html[lang^="zh"] .row-m.alt{
  font-family:var(--font-sans);font-size:var(--text-caption);
  line-height:var(--leading-caption);letter-spacing:var(--tracking-caption);
  color:var(--color-cloud-medium);padding-top:.5em}
/* margin column as meta: a role, a date */
.row-m.meta{
  font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-semibold);
  line-height:var(--leading-caption);letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-slate-dark);padding-top:.5em}
.row-t{
  font-size:var(--text-subheading);line-height:var(--leading-subheading);
  letter-spacing:var(--tracking-subheading)}
.row-d{
  font-size:var(--text-body);line-height:var(--leading-body);
  max-width:var(--measure);margin-top:var(--spacing-4)}
.row-f{
  font-family:var(--font-sans);font-size:var(--text-caption);
  letter-spacing:var(--tracking-caption);color:var(--color-cloud-medium);
  margin-top:var(--spacing-8)}
.rows-group{
  font-family:var(--font-sans);font-size:var(--text-caption);
  font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;
  margin:var(--spacing-60) 0 var(--spacing-16)}
.more{margin-top:var(--spacing-40)}

/* ---------- 4 the practice — the one feature band (/services/) -- */
.feature{background:var(--surface-feature);border-top:0}
.feature h2{
  font-family:var(--font-sans);font-size:var(--text-heading);
  font-weight:var(--weight-bold);line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading);margin:0 0 var(--spacing-40);
  max-width:18ch}
.feature .licence{
  font-family:var(--font-sans);font-size:var(--text-caption);
  letter-spacing:var(--tracking-caption);margin-top:var(--spacing-32);
  max-width:var(--measure)}

/* ---------- 5 prose: service pages and notes ------------------- */
.prose{max-width:var(--measure)}
.prose h2{margin:var(--spacing-60) 0 var(--spacing-24)}
.prose h2:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 var(--spacing-24);padding-left:1.2em;max-width:var(--measure)}
.prose li{margin-bottom:var(--spacing-8)}
.prose li::marker{color:var(--color-cloud-medium)}
.byline{
  font-family:var(--font-sans);font-size:var(--text-caption);
  letter-spacing:var(--tracking-caption);color:var(--color-cloud-medium);
  margin:0 0 var(--spacing-24)}
.checks,.prose .checks{list-style:none;margin:0 0 var(--spacing-24);padding:0;max-width:var(--measure)}
.checks li{padding:var(--spacing-12) 0;border-bottom:1px solid var(--color-stone);margin:0}
.checks li:first-child{border-top:1px solid var(--color-stone)}
.note-draft{
  font-family:var(--font-sans);font-size:var(--text-caption);
  letter-spacing:var(--tracking-caption);color:var(--color-cloud-medium);
  max-width:var(--measure)}

/* ---------- 6 FAQ — native details, works without script ------- */
.faq{list-style:none;margin:0;padding:0}
.faq details{border-bottom:1px solid var(--color-stone)}
.faq li:first-child details{border-top:1px solid var(--color-stone)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--spacing-24);
  padding:var(--spacing-24) var(--gutter);
  font-size:var(--text-subheading);line-height:var(--leading-subheading);
  letter-spacing:var(--tracking-subheading);
  transition:background-color var(--motion-color)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--surface-band)}
.faq summary:focus-visible{outline-offset:-2px}
.faq summary::after{content:"+";font-family:var(--font-sans);font-size:var(--text-body-sm)}
.faq details[open] summary::after{content:"\2013"}
.faq .answer{padding:0 var(--gutter) var(--spacing-32)}

/* ---------- 7 contact — the one clay mark ---------------------- */
.contact-block{
  background:var(--surface-lifted);border:1px solid var(--color-stone);
  border-radius:var(--radius-block);padding:var(--spacing-32);
  max-width:var(--measure)}
.contact-actions{
  display:flex;align-items:center;gap:var(--spacing-24);
  flex-wrap:wrap;margin-top:var(--spacing-24)}
.btn{
  display:inline-block;background:var(--surface-accent);color:var(--color-ivory-light);
  font-family:var(--font-sans);font-size:var(--text-body-sm);
  font-weight:var(--weight-medium);line-height:1;letter-spacing:var(--tracking-body-sm);
  padding:var(--spacing-12) 31px;text-decoration:none;
  border-radius:var(--radius-button);
  transition:background-color var(--motion-color),transform var(--motion-transform)}
.btn:hover{background:var(--color-green-deep)}
.btn:active{transform:scale(.98)}
.link{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-thickness var(--motion-color)}
.link:hover{text-decoration-thickness:2px}
.prose a,.lede a,.answer a,.row-d a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover,.lede a:hover,.answer a:hover,.row-d a:hover{text-decoration-thickness:2px}
.details{
  list-style:none;margin:var(--spacing-40) 0 0;padding:0;max-width:var(--measure)}
.details li{
  display:grid;grid-template-columns:var(--margin-col) minmax(0,1fr);gap:var(--spacing-24);
  padding:var(--spacing-12) 0;border-bottom:1px solid var(--color-stone)}
.details li:first-child{border-top:1px solid var(--color-stone)}
.details .k{
  font-family:var(--font-sans);font-size:var(--text-caption);
  letter-spacing:var(--tracking-caption);color:var(--color-slate-dark);font-weight:var(--weight-semibold);padding-top:.5em}

/* ---------- 8 footer — the only inversion ---------------------- */
.site-footer{
  background:var(--surface-inversion);color:var(--color-ivory-light);
  padding-block:var(--spacing-60);font-family:var(--font-sans);
  font-size:var(--text-caption);letter-spacing:var(--tracking-caption);line-height:1.7}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-40)}
.site-footer a{color:var(--color-cloud-medium);text-decoration:none;
  transition:color var(--motion-color)}
.site-footer a:hover{color:var(--color-ivory-light)}
.site-footer a:focus-visible{outline-color:var(--color-ivory-light)}
.footer-cols ul{list-style:none;margin:0;padding:0}
.footer-col-3{text-align:right;justify-self:end;max-width:30ch;text-wrap:pretty}

/* ---------- 9 services drop-down (v3) ---------------------------
   A full-width lifted band under the nav: three columns, hairlines,
   no shadow. Opens on hover / keyboard focus on desktop, on the
   chevron button everywhere. */
.nav{position:sticky;top:0;z-index:20;background:var(--surface-canvas);
  transition:border-color var(--motion-color);border-bottom:1px solid transparent}
.nav.scrolled{border-bottom-color:var(--color-stone)}
.nav-links{align-self:stretch;align-items:center}
.nav-drop{display:flex;align-items:center;gap:var(--spacing-4);height:100%}
.drop-btn{
  font:inherit;border:0;background:transparent;color:inherit;cursor:pointer;
  padding:var(--spacing-4);display:inline-flex;align-items:center;
  border-radius:var(--radius-link)}
.drop-btn svg{width:10px;height:10px;transition:transform var(--motion-transform)}
.nav-drop.open .drop-btn svg{transform:rotate(180deg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.drop{
  position:absolute;left:0;right:0;top:100%;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spacing-40);
  padding:var(--spacing-40) var(--gutter) var(--spacing-60);
  background:var(--surface-lifted);
  border-top:1px solid var(--color-stone);border-bottom:1px solid var(--color-stone);
  opacity:0;visibility:hidden;transform:translateY(calc(-1 * var(--spacing-8)));
  transition:opacity var(--motion-transform),transform var(--motion-transform),visibility 0s linear 200ms}
@media (hover:hover) and (min-width:640px){
  .nav-drop:hover .drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
}
.nav-drop.open .drop,.nav-drop:focus-within .drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.drop-col{display:flex;flex-direction:column;gap:var(--spacing-8)}
.drop a{font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);text-decoration:none}
.drop a:hover{text-decoration:underline;text-underline-offset:3px}
.drop .drop-h{
  font-family:var(--font-serif);font-size:var(--text-subheading);
  line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading);
  padding-bottom:var(--spacing-12);margin-bottom:var(--spacing-4);
  border-bottom:1px solid var(--color-stone)}
.drop .drop-d{
  font-family:var(--font-sans);font-size:var(--text-caption);color:var(--color-cloud-medium);
  letter-spacing:var(--tracking-caption);margin:0 0 var(--spacing-8)}

/* ---------- 10 illustrations ------------------------------------
   Line drawings in the palette's own inks; they draw themselves once
   (the animation lives inside each SVG and honours reduced motion). */
.illo{display:block;width:100%;max-width:480px;height:auto}
.illo-wide{display:block;width:100%;height:auto}
.hero .illo-wide{margin-top:var(--spacing-60)}
.icon{display:block;width:48px;height:48px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);
  gap:var(--spacing-60);align-items:center}
.split > div > h2:first-child{margin-top:0}

/* ---------- 11 service grid — hairline cells, never cards -------- */
.svc-grid{list-style:none;margin:0 var(--gutter);padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--color-stone);border:1px solid var(--color-stone)}
.svc-grid.pad{padding-inline:0}
.svc-grid > li{background:var(--surface-canvas);display:flex}
/* a short last row stretches, so no empty hairline cells are left */
.svc-grid > li:last-child:nth-child(3n+1){grid-column:span 3}
.svc-grid > li:last-child:nth-child(3n+2){grid-column:span 2}
.svc{display:flex;flex-direction:column;gap:var(--spacing-12);width:100%;
  padding:var(--spacing-32);text-decoration:none;color:inherit;
  transition:background-color var(--motion-color)}
.svc:hover{background:var(--surface-band)}
.svc-t{font-size:var(--text-subheading);line-height:var(--leading-subheading);
  letter-spacing:var(--tracking-subheading)}
.svc-d{font-size:var(--text-body-sm);line-height:var(--leading-body)}
.svc .row-go{margin-top:auto;padding-top:var(--spacing-12)}
a.svc:hover .row-go{transform:translateX(var(--spacing-4))}
a.svc:focus-visible{outline-offset:-2px}
.hero-links{display:flex;flex-wrap:wrap;gap:var(--spacing-24);margin-top:var(--spacing-24)}

/* ---------- 12 motion: reveal on scroll ---------------------------
   Only when script runs and the reader has not asked for less motion;
   without it every element is simply visible. */
html.anim .rv{opacity:1;transform:translateY(var(--spacing-4));
  transition:transform 180ms ease-out;
  transition-delay:var(--d,0ms)}
html.anim .rv.in{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(var(--spacing-24))}to{opacity:1;transform:none}}
/* The introduction stays readable from the first paint. */

/* ---------- 13 home: numbers, ribbon, timeline (v4) --------------- */
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--color-stone);border-bottom:1px solid var(--color-stone)}
.stats > li{padding:var(--spacing-40) var(--gutter);display:flex;flex-direction:column;gap:var(--spacing-8)}
.stats > li + li{border-left:1px solid var(--color-stone)}
.stat-n{font-size:var(--text-display);line-height:var(--leading-display);font-variant-numeric:tabular-nums}
.stat-l{font-family:var(--font-sans);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);
  color:var(--color-slate-dark);max-width:24ch}

.ribbon{overflow:hidden;border-bottom:1px solid var(--color-stone);padding-block:var(--spacing-24);
  white-space:nowrap}
.ribbon-track{display:inline-flex;gap:var(--spacing-40);padding-left:var(--spacing-40);
  font-size:var(--text-subheading);letter-spacing:var(--tracking-subheading);
  animation:ribbon 60s linear infinite}
.ribbon-track span{display:inline-flex;align-items:center;gap:var(--spacing-40)}
.ribbon-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-slate-dark)}
@keyframes ribbon{to{transform:translateX(-50%)}}

.timeline{list-style:none;margin:0;padding:0 0 0 var(--spacing-40);max-width:var(--measure);position:relative}
.timeline::before{content:"";position:absolute;left:7px;top:var(--spacing-12);bottom:var(--spacing-12);width:1px;
  background:var(--color-slate-dark);transform-origin:top}
html.anim .timeline::before{transform:scaleY(0);transition:transform 1800ms ease-out}
html.anim .timeline.in::before{transform:scaleY(1)}
.timeline > li{position:relative;padding-bottom:var(--spacing-40)}
.timeline > li:last-child{padding-bottom:0}
.timeline > li::before{content:"";position:absolute;left:calc(-1 * var(--spacing-40));top:var(--spacing-8);
  width:15px;height:15px;border-radius:50%;border:1px solid var(--color-slate-dark);background:var(--surface-canvas)}
.timeline > li.now::before{background:var(--color-slate-dark)}
.tl-m{font-family:var(--font-sans);font-size:var(--text-caption);letter-spacing:.08em;text-transform:uppercase;
  font-weight:var(--weight-semibold)}
.tl-t{font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading);
  margin-top:var(--spacing-4)}
.tl-d{margin-top:var(--spacing-4);max-width:var(--measure)}

/* FAQ answers ease open */
html.anim .faq details[open] .answer{animation:rise 400ms ease-out both}

/* ---------- 14 profits tax estimator (v5) --------------------------
   The "financial engine": controls on the left, live results on the
   right, the IRD-style line items below. Tiles are level-1 lifted
   surfaces with hairlines; the savings tile spends the page's one
   manilla surface. Chart inks are an ordinal ramp validated against the
   lifted surface: slate-dark / cloud-dark / cloud-medium. */
:root{
  --text-figure:40px;   /* (derived) result figures: between subheading and display */
  --chart-1:var(--color-slate-dark);
  --chart-2:#87867f;    /* cloud-dark, the palette donor's reserved grey */
  --chart-3:var(--color-cloud-medium);
}
.kicker{font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 var(--spacing-16)}
.pill{display:inline-flex;align-items:center;gap:var(--spacing-8);font-family:var(--font-sans);
  font-size:var(--text-caption);letter-spacing:var(--tracking-caption);
  border:1px solid var(--color-stone);background:var(--surface-lifted);padding:var(--spacing-4) var(--spacing-12)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-slate-dark)}
.pill.off::before{background:transparent;border:1px solid var(--color-slate-dark)}

.engine{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--spacing-40);align-items:start}
.panel{background:var(--surface-lifted);border:1px solid var(--color-stone);padding:var(--spacing-32)}
.panel h2{margin-bottom:var(--spacing-8)}
.panel .sub{font-family:var(--font-sans);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);
  margin:0 0 var(--spacing-24);padding-bottom:var(--spacing-24);border-bottom:1px solid var(--color-stone);max-width:none}
.field{margin-bottom:var(--spacing-32)}
.field:last-child{margin-bottom:0}
.field-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--spacing-16);margin-bottom:var(--spacing-12)}
.field label,.field .lbl{font-family:var(--font-sans);font-size:var(--text-body-sm);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-body-sm)}
.field-val{font-size:var(--text-subheading);font-variant-numeric:tabular-nums;white-space:nowrap}
.field-hint{font-family:var(--font-sans);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);
  color:var(--color-slate-dark);margin-top:var(--spacing-8)}
.scale{display:flex;justify-content:space-between;font-family:var(--font-sans);font-size:var(--text-caption);
  color:var(--color-cloud-medium);margin-top:var(--spacing-8)}

.panel input{color:var(--color-slate-dark)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;
  background:linear-gradient(to right,var(--color-slate-dark) var(--p,0%),var(--color-stone) var(--p,0%))}
input[type=range]::-moz-range-track{height:2px;background:var(--color-stone)}
input[type=range]::-moz-range-progress{height:2px;background:var(--color-slate-dark)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-9px;border-radius:50%;
  background:var(--surface-lifted);border:1px solid var(--color-slate-dark);
  transition:transform var(--motion-transform)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--surface-lifted);
  border:1px solid var(--color-slate-dark)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:focus-visible{outline:2px solid var(--color-slate-dark);outline-offset:4px}

.num{font:inherit;font-family:var(--font-serif);font-size:var(--text-body);width:100%;
  background:var(--surface-canvas);border:1px solid var(--color-stone);border-radius:var(--radius-block);
  padding:var(--spacing-8) var(--spacing-12);color:var(--color-slate-dark);font-variant-numeric:tabular-nums}
.num:focus{outline:2px solid var(--color-slate-dark);outline-offset:0;border-color:var(--color-slate-dark)}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--color-stone)}
.seg label{display:flex;align-items:center;justify-content:center;gap:var(--spacing-8);cursor:pointer;
  padding:var(--spacing-12);font-family:var(--font-sans);font-size:var(--text-body-sm);text-align:center;
  transition:background-color var(--motion-color)}
.seg label + label{border-left:1px solid var(--color-stone)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--surface-band)}
.seg label:has(input:focus-visible){outline:2px solid var(--color-slate-dark);outline-offset:-2px}
.switch{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-16);
  border:1px solid var(--color-stone);padding:var(--spacing-16);cursor:pointer}
.switch input{width:20px;height:20px;accent-color:var(--color-slate-dark);flex:none;cursor:pointer}
.tier-btn{display:flex;align-items:center;gap:var(--spacing-16);width:100%;margin-top:var(--spacing-12);
  font:inherit;font-family:var(--font-sans);font-size:var(--text-body-sm);text-align:left;color:var(--color-slate-dark);
  background:var(--surface-canvas);border:1px solid var(--color-stone);padding:var(--spacing-16);cursor:pointer;
  transition:background-color var(--motion-color),border-color var(--motion-color)}
.tier-btn[aria-pressed=true]{background:var(--surface-band);border-color:var(--color-slate-dark)}
.tier-btn:hover{border-color:var(--color-slate-dark)}
.tier-btn:focus-visible{outline:2px solid var(--color-slate-dark);outline-offset:2px}
.tier-btn .field-hint{margin:0}
.tier-state{flex:none;min-width:3.5em;text-align:center;font-weight:var(--weight-semibold);letter-spacing:.06em;
  text-transform:uppercase;font-size:var(--text-caption);padding:var(--spacing-4) var(--spacing-8);
  border:1px solid var(--color-slate-dark)}
.tier-btn[aria-pressed=true] .tier-state{background:var(--color-slate-dark);color:var(--surface-lifted)}
.tier-note{font-family:var(--font-sans);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);
  color:var(--color-slate-dark);margin-top:var(--spacing-12);padding:var(--spacing-12) var(--spacing-16);
  border-left:3px solid var(--color-slate-dark);background:var(--surface-band)}
.tier-note a{font-weight:var(--weight-semibold)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-16)}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-16)}
.tile{background:var(--surface-lifted);border:1px solid var(--color-stone);padding:var(--spacing-24)}
.tile.wide{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-24)}
.tile.save{background:var(--surface-feature);border-color:var(--surface-feature)}
.tile-l{font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:.06em;text-transform:uppercase}
.tile-v{font-size:var(--text-figure);line-height:1.1;margin-top:var(--spacing-8);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.tile-s{font-family:var(--font-sans);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);margin-top:var(--spacing-8)}
.tile .icon{width:56px;height:56px}

.chart-box{background:var(--surface-lifted);border:1px solid var(--color-stone);padding:var(--spacing-24);margin-top:var(--spacing-16)}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--spacing-16);flex-wrap:wrap;
  margin-bottom:var(--spacing-16)}
.chart-t{font-family:var(--font-sans);font-size:var(--text-body-sm);font-weight:var(--weight-semibold)}
.chart-sub{font-family:var(--font-sans);font-size:var(--text-caption);color:var(--color-slate-dark)}
.stack{display:flex;gap:2px;height:28px}
.stack > span{display:block;height:100%;min-width:0;transition:flex-grow 500ms ease-out;position:relative;cursor:default}
.stack > span:first-child{border-radius:4px 0 0 4px}
.stack > span:last-child{border-radius:0 4px 4px 0}
.stack .s1{background:var(--chart-1)}
.stack .s2{background:var(--chart-2)}
.stack .s3{background:var(--chart-3)}
.legend{display:flex;flex-wrap:wrap;gap:var(--spacing-8) var(--spacing-24);margin-top:var(--spacing-16);
  font-family:var(--font-sans);font-size:var(--text-caption);letter-spacing:var(--tracking-caption)}
.legend span{display:inline-flex;align-items:center;gap:var(--spacing-8);font-variant-numeric:tabular-nums}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.legend .k1 i{background:var(--chart-1)} .legend .k2 i{background:var(--chart-2)} .legend .k3 i{background:var(--chart-3)}
.curve{display:block;width:100%;height:auto;overflow:visible}
.curve .grid{stroke:var(--color-stone);stroke-width:1}
.curve .axis{font-family:var(--font-sans);font-size:11px;fill:var(--color-slate-dark)}
.curve .line{fill:none;stroke:var(--chart-1);stroke-width:2;stroke-linejoin:round}
.curve .ref{stroke:var(--chart-2);stroke-width:1;stroke-dasharray:4 4}
.curve .dot{fill:var(--surface-lifted);stroke:var(--chart-1);stroke-width:2}
.curve .hair{stroke:var(--color-slate-dark);stroke-width:1;opacity:0}
.curve .hdot{fill:var(--chart-1);opacity:0}
.curve.hover .hair,.curve.hover .hdot{opacity:1}
.chart-wrap{position:relative}
.tip{position:absolute;pointer-events:none;background:var(--surface-canvas);border:1px solid var(--color-slate-dark);
  padding:var(--spacing-8) var(--spacing-12);font-family:var(--font-sans);font-size:var(--text-caption);
  line-height:1.5;white-space:nowrap;opacity:0;transform:translate(-50%,calc(-100% - 12px));
  transition:opacity var(--motion-color);font-variant-numeric:tabular-nums}
.tip.on{opacity:1}

.audit-wrap{overflow-x:auto;border:1px solid var(--color-stone);background:var(--surface-lifted)}
.audit{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:640px}
.audit th,.audit td{padding:var(--spacing-12) var(--spacing-16);border-bottom:1px solid var(--color-stone);text-align:right}
.audit th:first-child,.audit td:first-child{text-align:left}
.audit thead th{font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:.06em;text-transform:uppercase}
.audit td{font-size:var(--text-body-sm)}
.audit td.rate{font-family:var(--font-sans);font-size:var(--text-caption)}
.audit tr.total td{font-weight:var(--weight-semibold);border-top:1px solid var(--color-slate-dark);border-bottom:0;
  font-size:var(--text-body)}
.audit tr.sub td{color:var(--color-slate-dark)}
.audit tr.minor td{font-size:var(--text-caption);font-family:var(--font-sans)}
.flash{animation:flash 600ms ease-out}
@keyframes flash{from{background:var(--surface-band)}to{background:transparent}}

/* ---------- responsive: three tiers ---------- */
@media (max-width:1199px){
  :root{--gutter:40px;--section-gap:var(--spacing-76);
        --text-name:88px;--text-name-alt:44px;--text-display:48px;--text-heading:44px}
  .hero-grid{grid-template-columns:1fr;gap:var(--spacing-40);align-items:start}
  .portrait{position:static;width:100%;max-width:var(--measure);margin-top:var(--spacing-40)}
  .split{grid-template-columns:1fr;gap:var(--spacing-40)}
  .engine{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-grid > li:last-child:nth-child(n){grid-column:auto}
  .svc-grid > li:last-child:nth-child(odd){grid-column:span 2}
  .drop{gap:var(--spacing-24)}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
  .footer-col-3{text-align:left}
}
@media (max-width:639px){
  :root{--gutter:24px;--text-name:52px;--text-name-alt:30px;
        --text-display:32px;--text-heading:32px}
  .nav{grid-template-columns:1fr auto;height:auto;padding-block:var(--spacing-16);
       row-gap:var(--spacing-12)}
  .nav-links{display:none;grid-column:1 / -1;justify-self:start;
             flex-direction:column;gap:var(--spacing-8)}
  .nav.open .nav-links{display:flex}
  .nav-links{align-self:auto;align-items:flex-start}
  .nav-drop{flex-wrap:wrap;height:auto}
  .drop{position:static;display:none;grid-template-columns:1fr;gap:var(--spacing-24);
        width:100%;padding:var(--spacing-16) 0 var(--spacing-16) var(--spacing-16);
        background:transparent;border:0;border-left:1px solid var(--color-stone);
        opacity:1;visibility:visible;transform:none;transition:none}
  .nav-drop.open .drop{display:grid}
  .nav-drop:focus-within:not(.open) .drop{display:none}
  .drop .drop-h{font-size:var(--text-body);padding-bottom:var(--spacing-8)}
  .svc-grid{grid-template-columns:1fr}
  .svc-grid > li:last-child:nth-child(odd){grid-column:auto}
  .svc{padding:var(--spacing-24)}
  .menu-toggle{
    display:inline-block;font:inherit;font-size:var(--text-caption);border:0;
    background:transparent;color:var(--color-slate-dark);padding:var(--spacing-4) 0;
    cursor:pointer;text-decoration:underline;text-underline-offset:3px;
    justify-self:end;margin-right:var(--spacing-16)}
  .lang{justify-self:end}
  .hero-sentence{max-width:none}
  .row{grid-template-columns:minmax(0,1fr) auto;gap:var(--spacing-4) var(--spacing-16)}
  .row-m{grid-column:1 / -1}
  .row-m.alt,.row-m.meta{padding-top:0}
  .row-m:not(.meta):not(.alt){font-size:var(--text-body)}
  .row > div:not(.row-m){grid-column:1}
  .details li{grid-template-columns:1fr;gap:2px}
  .btn{display:block;text-align:center;width:100%}
  .facts li{flex-direction:column;gap:2px}
  .footer-cols{grid-template-columns:1fr;gap:0}
  .footer-cols > div{padding-block:var(--spacing-24)}
  .footer-cols > div + div{border-top:1px solid var(--color-slate-medium)}
}
@media (max-width:639px){
  .stats{grid-template-columns:1fr}
  :root{--text-figure:30px}
  .tiles{grid-template-columns:1fr}
  .panel{padding:var(--spacing-24)}
  .two{grid-template-columns:1fr}
  .tile.wide .icon{display:none}
  .stats > li + li{border-left:0;border-top:1px solid var(--color-stone)}
  .stats > li{padding-block:var(--spacing-24)}
  .ribbon-track{font-size:var(--text-body)}
}
/* Public refresh: compact introduction, early services and explanatory visuals. */
.home .hero{min-height:0;padding-block:48px 56px}
.home .hero-name{font-size:clamp(32px,4vw,56px);line-height:1.1}
.home .hero-altname{font-size:20px;margin-bottom:32px;color:var(--color-slate-medium)}
.home .hero-grid{grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
.home .hero-sentence{font-size:clamp(36px,4.3vw,60px);max-width:20ch;overflow-wrap:normal}
.home .hero-support p{margin-bottom:20px}
.home .hero-context{font-size:14px;margin-top:24px;color:var(--color-slate-medium)}
.home section:not(.hero){padding-block:56px}
.home h2{font-size:30px;margin-bottom:28px}
.btn{min-height:44px;line-height:1.4;border-radius:4px;padding:12px 24px}
.service-choices,.credentials,.milestones,.process-flow{list-style:none;padding:0;margin:0;display:grid}
.service-choices,.credentials{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.service-choices li{border-top:1px solid var(--color-stone)}
.service-choices a{display:flex;flex-direction:column;height:100%;padding:24px 0 12px;text-decoration:none}
.service-choices img{object-fit:contain;object-position:left;width:64px;height:64px;margin-bottom:16px}
.service-choices h3,.credentials h3{font-size:24px;font-weight:400;margin:0 0 12px}
.service-choices p,.credentials p{font-size:18px;color:var(--color-slate-medium)}
.service-go{color:var(--color-green);margin-top:auto;padding-top:20px;transition:transform 150ms ease-out}
.service-choices a:hover h3{text-decoration:underline;text-underline-offset:5px}
.service-choices a:hover .service-go{transform:translateX(4px)}
.credentials h3{font-size:22px}
.home #credentials > p:first-of-type{max-width:800px;margin-bottom:32px}
.office-map{margin-top:28px;padding-top:24px;border-top:1px solid var(--color-stone);font-size:16px;line-height:1.7}
.credentials p{font-size:16px;font-family:var(--font-sans)}
.story-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.story-visual{margin:0;text-align:center}
.story-visual img{display:block;width:100%;height:auto}
.story-visual figcaption{font:14px/1.5 var(--font-sans);color:var(--color-slate-medium);margin-top:24px}
#journey{margin-top:48px;scroll-margin-top:90px}
#journey > h3{font-size:20px;margin-bottom:24px}
.milestones{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.milestones li{border-top:1px solid var(--color-stone);padding-top:16px}
.milestones h4{font:500 14px/1.5 var(--font-sans);margin:0 0 12px;color:var(--color-green)}
.milestones p{font-size:17px;color:var(--color-slate-medium)}
.outcome h2{max-width:28ch}
.service-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.service-intro .page-title{font-size:clamp(32px,3.5vw,48px);max-width:20ch;margin-bottom:24px}
.chat-demo{margin:0;padding:24px;background:var(--surface-lifted);border:1px solid var(--color-stone);font-family:var(--font-sans);font-size:15px}
.chat-demo figcaption,.chat-note{font-size:12px;line-height:1.6;color:var(--color-slate-medium)}
.chat-heading{padding:16px 0;border-bottom:1px solid var(--color-stone);font-weight:600;margin-bottom:20px}
.chat-message{padding:12px 16px;max-width:90%;margin-bottom:12px;border-radius:8px;background:var(--surface-canvas)}
.chat-message.customer{margin-left:auto;border:1px solid var(--color-stone)}
.chat-message.assistant{border-left:3px solid var(--color-green)}
.chat-message small{display:block;font-size:11px;margin-bottom:6px;color:var(--color-slate-medium)}
.chat-message p{margin:0;line-height:1.6}
.chat-note{margin-top:20px}
.process-flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;counter-reset:step}
.process-flow li{position:relative;border-top:1px solid var(--color-stone);padding-top:20px;counter-increment:step}
.process-flow li::before{content:counter(step,decimal-leading-zero);display:block;color:var(--color-green);font:500 16px/1.4 var(--font-sans);margin-bottom:16px}
.process-flow li:not(:last-child)::after{content:'→';position:absolute;top:-16px;right:0;background:var(--surface-canvas);padding-left:8px;color:var(--color-green)}
.process-flow h3{font-size:21px;line-height:1.3;font-weight:400;margin:0 0 12px}
.process-flow p{font-size:17px;color:var(--color-slate-medium)}
@media (min-width:640px) and (max-width:1000px){
  .nav{grid-template-columns:1fr auto auto;gap:16px}
  .wordmark{font-size:11px;letter-spacing:.02em}
  .nav-links{gap:16px}
  .process-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .home .hero-grid,.story-grid,.service-intro{grid-template-columns:1fr;gap:28px}
  .home .hero-sentence{max-width:none}
  .home .hero{padding-top:32px}
  .story-visual{max-width:540px;margin-inline:auto}
  .milestones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-intro .page-title{max-width:24ch}
  .chat-demo{max-width:600px;width:100%}
}
@media (max-width:639px){
  .service-choices,.credentials,.milestones,.process-flow{grid-template-columns:1fr;gap:24px}
  .home section:not(.hero){padding-block:40px}
  .home .hero{padding-bottom:36px}
  .home .hero-altname{margin-bottom:24px;font-size:18px}
  .home .hero-support p{font-size:18px}
  .home .hero-context{font-size:14px!important}
  .home h2{font-size:26px}
  .home .contact-actions{gap:16px}
  .nav .menu-toggle,.lang{font-size:14px}
  .process-flow li:not(:last-child)::after{content:'↓'}
  .chat-demo{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important}
  .ribbon-track{animation:none}
}