/* ===== M.S.R.R & Co. — ledger layout in navy and gold =====
   Ruled entries, gold margin line, double-ruled totals, animated on load and on scroll. */
:root {
  --paper: #F7F4EE;        /* page */
  --sheet: #FFFFFF;        /* ledger sheet / panels */
  --ink: #1B2130;          /* text */
  --ink-soft: #5D6170;     /* secondary text */
  --rule: #E7E1D5;         /* ledger rule */
  --rule-strong: #B8975A;  /* heavier rule (gold) */
  --accent: #B8975A;       /* gold: margin line, ticks, highlights */
  --accent-ink: #7A5F2E;   /* darker gold for small text on light backgrounds */
  --primary: #0A1830;      /* navy: buttons, footer, headings */
  --primary-2: #112645;
  --serif: "Libre Caslon Text", Georgia, serif;
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --margin: 96px;          /* ledger margin column */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font: 400 16.5px/1.65 var(--sans); color: var(--ink); background: var(--paper);
  font-variant-numeric: lining-nums tabular-nums; overflow-x: hidden;
}
*, *::before, *::after { font-variant-numeric: lining-nums tabular-nums; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; color: var(--primary); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.container { width: min(1120px, 100% - 32px); margin-inline: auto; }
body.locked { overflow: hidden; }
.link {
  color: var(--primary); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule-strong);
  text-underline-offset: 4px; transition: color .2s;
}
.link:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.muted { color: var(--ink-soft); }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; }
.ca-logo { width: 44px; height: 44px; border-radius: 50%; background: #fff; flex: none; border: 1px solid var(--rule); }
.brand-text strong { display: block; font: 600 20px/1.1 var(--serif); }
.brand-text span { font-size: 13px; color: var(--ink-soft); }

.nav-links { display: flex; gap: 2px; list-style: none; align-items: center; }
.nav-links > li > a { display: block; padding: 8px 12px; font-size: 15px; font-weight: 500; position: relative; }
.nav-links > li > a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav-links > li > a:hover::after, .nav-links > li > a.active::after { transform: scaleX(1); }
.has-drop { position: relative; }
.has-drop small { font-size: 10px; color: var(--ink-soft); }
.drop {
  list-style: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; padding: 6px 0;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 3px;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility .2s;
}
.drop::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: none; }
.drop a { display: block; padding: 9px 16px; font-size: 15px; border-bottom: 1px solid var(--rule); }
.drop li:last-child a { border-bottom: 0; }
.drop a:hover, .drop a.current { color: var(--accent); background: var(--paper); }

.menu-btn { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; position: relative; }
.menu-btn span { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--ink); transition: .3s; }
.menu-btn span:nth-child(1) { top: 13px; } .menu-btn span:nth-child(2) { top: 19px; } .menu-btn span:nth-child(3) { top: 25px; }
.menu-open .menu-btn span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 3px;
  font: 600 15px/1.2 var(--sans); border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-2); }
.btn-quiet { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-quiet:hover { background: var(--ink); color: var(--paper); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== Hero: the ledger sheet ===== */
.hero { padding: 56px 0 80px; }
.sheet {
  position: relative; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 4px; overflow: hidden;
}
.sheet::before {                                   /* red double margin line */
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--margin); border-left: 3px double var(--accent);
  transform-origin: top; animation: drawY .9s ease-out both;
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 22px 32px 16px calc(var(--margin) + 28px); border-bottom: 2px solid var(--rule-strong);
}
.sheet-head h1 { font: 600 22px/1.3 var(--serif); }
.sheet-head h1 span { display: block; font: 400 15px/1.5 var(--sans); color: var(--ink-soft); }
.sheet-head .since { font: italic 500 19px var(--serif); color: var(--accent-ink); }
.ledger { list-style: none; }
.ledger li {
  display: grid; grid-template-columns: var(--margin) minmax(0, 1.1fr) minmax(0, 1fr); align-items: baseline;
  padding: 16px 32px 14px 0; border-bottom: 1px solid var(--rule);
  clip-path: inset(0 100% 0 0); animation: write .7s cubic-bezier(.5, 0, .2, 1) forwards;
}
.ledger li:nth-child(1) { animation-delay: .35s; }
.ledger li:nth-child(2) { animation-delay: .55s; }
.ledger li:nth-child(3) { animation-delay: .75s; }
.ledger li:nth-child(4) { animation-delay: .95s; }
.ledger .init { font: 600 22px var(--serif); color: var(--accent); text-align: center; }
.ledger .word { font: 500 clamp(44px, 7vw, 80px)/1 var(--serif); letter-spacing: -.015em; padding-left: 28px; }
.ledger .gloss { color: var(--ink-soft); max-width: 36ch; }
.ledger-total {
  display: grid; grid-template-columns: var(--margin) repeat(3, minmax(0, 1fr)); gap: 0 20px;
  padding: 18px 32px 18px 0; border-top: 1px solid var(--ink); border-bottom: 4px double var(--ink); margin-bottom: 1px;
  animation: fade .6s 1.4s both;
}
.ledger-total div:first-child { grid-column: 2; padding-left: 28px; }
.ledger-total dt { font-size: 13px; color: var(--ink-soft); }
.ledger-total dd { font: 500 18px/1.4 var(--serif); }
.sheet-foot { padding: 26px 32px 30px calc(var(--margin) + 28px); animation: fade .6s 1.5s both; }
.sheet-foot p { max-width: 62ch; margin-bottom: 20px; }
@keyframes write { to { clip-path: inset(0 0 0 0); } }
@keyframes drawY { from { transform: scaleY(0); } }
@keyframes fade { from { opacity: 0; } }

/* ===== Page head (inner pages) ===== */
.page-head { padding: 52px 0 0; }
.page-head .container { border-bottom: 4px double var(--rule-strong); padding-bottom: 34px; }
.crumbs { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; }
.crumbs a { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--accent); }
.page-head h1 { font-size: clamp(38px, 5.4vw, 58px); letter-spacing: -.01em; }
.page-head p { max-width: 60ch; color: var(--ink-soft); margin-top: 12px; font-size: 18px; }

/* ===== Account sections: head column + entries ===== */
.band { padding: 72px 0; }
.band + .band { border-top: 1px solid var(--rule); }
.account { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px 56px; }
.account-head h2 { font-size: clamp(26px, 3vw, 32px); }
.account-head p { color: var(--ink-soft); margin-top: 10px; font-size: 15px; max-width: 28ch; }
.prose p { max-width: 64ch; margin-bottom: 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-size: 26px; margin: 36px 0 12px; }
.prose ul { padding-left: 20px; max-width: 64ch; }
.prose li { margin-bottom: 8px; color: var(--ink-soft); }

/* Rows (ledger entries) */
.rows { border-top: 2px solid var(--rule-strong); border-bottom: 4px double var(--rule-strong); }
.row {
  display: grid; grid-template-columns: minmax(170px, .75fr) minmax(0, 1.25fr); gap: 8px 32px;
  padding: 22px 4px; border-bottom: 1px solid var(--rule); scroll-margin-top: 90px;
}
.row:last-child { border-bottom: 0; }
.row h3 { font-size: 21px; }
.row p { color: var(--ink-soft); max-width: 60ch; }
.row .sub { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
a.row { transition: background .2s; }
a.row:hover { background: var(--sheet); }
a.row:hover h3 { color: var(--accent); }
.row .live { margin-top: 8px; font-size: 14.5px; color: var(--ink); }
.row .live em { font-style: normal; color: var(--accent); font-weight: 600; }
.more { margin-top: 22px; }

.ticks { list-style: none; columns: 2; column-gap: 28px; margin-top: 12px; font-size: 15px; color: var(--ink-soft); }
.ticks li { break-inside: avoid; padding-left: 22px; position: relative; margin-bottom: 6px; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* Particulars table */
.particulars { width: 100%; border-collapse: collapse; border-top: 2px solid var(--rule-strong); border-bottom: 4px double var(--rule-strong); }
.particulars th, .particulars td { text-align: left; padding: 13px 4px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.particulars tr:last-child th, .particulars tr:last-child td { border-bottom: 0; }
.particulars th { font-weight: 400; color: var(--ink-soft); width: 38%; padding-right: 20px; font-size: 15px; }
.particulars td { font-weight: 500; }

/* Partners */
.partners { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--rule-strong); border-bottom: 4px double var(--rule-strong); }
.partner { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 28px 24px 28px 4px; border-bottom: 1px solid var(--rule); }
.partner:nth-child(odd) { border-right: 1px solid var(--rule); }
.partner:nth-child(even) { padding-left: 28px; }
.partner:nth-last-child(-n+2) { border-bottom: 0; }
.stamp {
  width: 64px; height: 64px; border: 2px solid var(--accent); border-radius: 3px; display: grid; place-items: center;
  font: 600 22px var(--serif); color: var(--primary); letter-spacing: .02em; background: rgba(184, 151, 90,.1);
}
.partner h3 { font-size: 22px; }
.partner .role { font-size: 14px; color: var(--ink-soft); margin-bottom: 10px; }
.partner p { color: var(--ink-soft); font-size: 15.5px; }

/* FAQ */
.acc { border-bottom: 1px solid var(--rule); }
.acc:first-child { border-top: 2px solid var(--rule-strong); }
.acc button {
  width: 100%; text-align: left; background: none; border: 0; padding: 20px 4px; font: 500 19px/1.4 var(--serif);
  cursor: pointer; display: flex; justify-content: space-between; gap: 20px;
}
.acc button::after { content: "+"; color: var(--accent); font: 400 26px/1 var(--sans); transition: transform .25s; }
.acc.open button::after { transform: rotate(45deg); }
.acc .panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; color: var(--ink-soft); }
.acc .panel p { padding: 0 4px 20px; max-width: 64ch; }

/* ===== Forms ===== */
.panel-box { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 28px; }
.field { margin-bottom: 16px; }
.field label, .label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--rule-strong); border-radius: 2px; font: inherit; font-size: 15.5px;
  background: #fff; color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.hint { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.form-note { font-size: 14px; color: var(--ink-soft); margin-top: 12px; }
.maps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.maps figure { border: 1px solid var(--rule-strong); border-radius: 4px; overflow: hidden; background: var(--sheet); }
.maps iframe { width: 100%; height: 300px; border: 0; display: block; }
.maps figcaption { padding: 10px 14px; font-size: 14px; color: var(--ink-soft); border-top: 1px solid var(--rule); }

/* ===== Footer ===== */
.site-footer { background: #050E1F; color: #97A3B6; padding: 64px 0 0; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 40px; }
.site-footer h4 { color: #fff; font-size: 19px; margin-bottom: 14px; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 9px; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.site-footer h4 { color: var(--accent) !important; }
.site-footer .brand-text strong { color: #fff; }
.site-footer .brand-text span { color: var(--accent); }
.site-footer .ca-logo { border-color: transparent; }
.site-footer b { color: #fff; font-weight: 600; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15); margin-top: 52px; padding: 20px 0; font-size: 14px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* ===== ICAI disclaimer ===== */
.disclaimer-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(30, 43, 36, .55);
  display: grid; place-items: center; padding: 16px; animation: fade .25s ease;
}
.disclaimer-box {
  background: var(--sheet); max-width: 620px; width: 100%; border-radius: 4px; border: 1px solid var(--rule-strong);
  padding: 34px 36px; max-height: 90vh; overflow-y: auto; border-top: 4px double var(--accent);
}
.disclaimer-box h2 { font-size: 28px; margin-bottom: 10px; }
.disclaimer-box p, .disclaimer-box li { color: var(--ink-soft); font-size: 15px; }
.disclaimer-box ul { margin: 14px 0 24px 20px; }
.disclaimer-box li { margin-bottom: 8px; }

/* ===== Floating WhatsApp / call ===== */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 45; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.fab-btn {
  display: flex; align-items: center; height: 52px; border-radius: 26px; color: #fff; overflow: hidden;
  box-shadow: 0 4px 14px rgba(30, 43, 36, .25);
}
.fab-btn svg { width: 52px; height: 52px; padding: 13px; flex: none; }
.fab-btn span { max-width: 0; white-space: nowrap; font-weight: 600; font-size: 14px; transition: max-width .3s, padding .3s; }
.fab-btn:hover span, .fab-btn:focus-visible span { max-width: 180px; padding-right: 18px; }
.fab-wa { background: #1FA855; }
.fab-call { background: var(--primary); display: none; }

.to-top {
  position: fixed; left: 20px; bottom: 20px; z-index: 40; width: 44px; height: 44px; border-radius: 3px;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule-strong); cursor: pointer; font-size: 18px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.to-top.show { opacity: 1; pointer-events: auto; }

/* ===== Tools: shared ===== */
[hidden] { display: none !important; }
.tabs { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--rule-strong); margin-bottom: 20px; }
.tab {
  background: none; border: 0; padding: 12px 14px; font-size: 15px; font-weight: 500; color: var(--ink-soft);
  cursor: pointer; position: relative; margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.tab.sm { padding: 9px 11px; font-size: 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filters button {
  background: transparent; border: 1px solid var(--rule-strong); border-radius: 3px; padding: 6px 12px;
  font-size: 14px; cursor: pointer;
}
.filters button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.note { font-size: 14px; color: var(--ink-soft); border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; margin-top: 32px; max-width: 80ch; }
.fade-in { animation: fade .3s ease both; }

/* Calendar */
.upcoming { border-top: 2px solid var(--rule-strong); border-bottom: 4px double var(--rule-strong); }
.up {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px 120px; gap: 16px; align-items: baseline;
  padding: 16px 4px; border-bottom: 1px solid var(--rule);
}
.up:last-child { border-bottom: 0; }
.up .left { font: 600 20px var(--serif); color: var(--accent-ink); }
.up h3 { font: 600 16.5px/1.4 var(--sans); }
.up .when, .up .cat { font-size: 14.5px; color: var(--ink-soft); }
.cal-list { border-top: 2px solid var(--rule-strong); border-bottom: 4px double var(--rule-strong); }
.due {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 130px; gap: 18px; align-items: baseline;
  padding: 15px 4px; border-bottom: 1px solid var(--rule);
}
.due:last-child { border-bottom: 0; }
.due.past { opacity: .45; }
.due .date strong { font: 600 26px/1 var(--serif); }
.due .date span { font-size: 13px; color: var(--ink-soft); margin-left: 4px; }
.due h4 { font: 600 16px/1.4 var(--sans); }
.due p { font-size: 14.5px; color: var(--ink-soft); margin-top: 2px; }
.cat { font-size: 14px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.cat::before { content: ""; width: 9px; height: 9px; border-radius: 1px; background: var(--c); flex: none; }
.cat-it { --c: #2F5E8C; } .cat-tds { --c: #6B4C9A; } .cat-gst { --c: #2E7D4F; } .cat-roc { --c: #A62B22; } .cat-pay { --c: #B06A12; }
.empty { padding: 32px 4px; color: var(--ink-soft); }

/* Calculators */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: start; }
.calc fieldset { border: 0; margin-bottom: 10px; }
.calc legend { font: 600 19px var(--serif); margin-bottom: 12px; }
.result { position: sticky; top: 96px; }
.verdict { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 20px 24px; margin-bottom: 16px; border-left: 4px solid var(--primary); }
.verdict small { font-size: 14px; color: var(--ink-soft); }
.verdict strong { display: block; font: 600 30px/1.2 var(--serif); color: var(--primary); margin: 2px 0 4px; }
.verdict p { color: var(--ink-soft); font-size: 15px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.regime { border: 1px solid var(--rule-strong); border-radius: 4px; padding: 18px; background: var(--sheet); }
.regime.best { border-color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); }
.regime h4 { font-size: 19px; margin-bottom: 6px; }
.regime .total { font: 600 26px var(--serif); }
.bar { height: 6px; background: var(--paper); border: 1px solid var(--rule); margin: 10px 0 12px; }
.bar i { display: block; height: 100%; background: var(--primary); transition: width .4s ease; }
.lines { list-style: none; font-size: 14.5px; }
.lines li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
.lines li b { color: var(--ink); font-weight: 600; }
.lines li.tot { color: var(--ink); font-weight: 600; border-top: 1px solid var(--ink); border-bottom: 4px double var(--ink); margin-top: -1px; }
.big-out { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--sheet); margin-bottom: 16px; }
.big-out div { padding: 16px 18px; border-right: 1px solid var(--rule); }
.big-out div:last-child { border-right: 0; }
.big-out span { font-size: 14px; color: var(--ink-soft); display: block; }
.big-out strong { font: 600 22px var(--serif); }
.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 3px; overflow: hidden; margin-bottom: 14px; flex-wrap: wrap; }
.seg button { border: 0; background: #fff; padding: 8px 14px; font-size: 14px; font-weight: 500; cursor: pointer; border-right: 1px solid var(--rule); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--primary); color: #fff; }
.check { display: flex; gap: 10px; align-items: center; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }

/* ===================================================================
   ANIMATION LAYER
   =================================================================== */

/* Hero: navy band with a moving gold network behind the ledger sheet */
.hero {
  position: relative; overflow: hidden; padding: 64px 0 90px;
  background: radial-gradient(1100px 560px at 85% 10%, #1A3760 0%, transparent 60%), var(--primary);
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; pointer-events: none; }
.hero .container { position: relative; z-index: 1; }
.sheet { box-shadow: 0 30px 70px rgba(0, 0, 0, .35); border-color: transparent; animation: sheetIn .9s var(--ease) both; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(40px) scale(.97); } }
.hero .glow {
  position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -120px; bottom: -200px; z-index: 0;
  background: radial-gradient(circle, rgba(184, 151, 90,.35), transparent 65%); animation: float 9s ease-in-out infinite;
}
.ledger li { transition: background .3s; }
.ledger li:hover { background: linear-gradient(90deg, rgba(184, 151, 90,.12), transparent 70%); }
.ledger li:hover .word { color: var(--accent-ink); transform: translateX(8px); }
.ledger .word { display: inline-block; transition: transform .4s var(--ease), color .3s; }
.ledger .init { transition: transform .4s var(--ease); }
.ledger li:hover .init { transform: scale(1.35); }
.ledger-total dd { color: var(--primary); }

/* Page heads: soft floating gold circles + drawing double rule */
.page-head { position: relative; overflow: hidden; }
.page-head::before, .page-head::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(184, 151, 90,.35); pointer-events: none;
  animation: float 12s ease-in-out infinite;
}
.page-head::before { width: 380px; height: 380px; right: -110px; top: -160px; }
.page-head::after { width: 220px; height: 220px; right: 200px; top: 40px; animation-delay: -6s; border-style: dashed; }
.page-head .container { border-bottom: 0; position: relative; }
.page-head .container::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  transform: scaleX(0); transform-origin: left; animation: drawX 1s .35s var(--ease) forwards;
}
.page-head h1, .page-head p, .crumbs { animation: rise .8s var(--ease) both; }
.page-head h1 { animation-delay: .1s; }
.page-head p { animation-delay: .2s; }
@keyframes drawX { to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes float { 50% { transform: translateY(18px) rotate(6deg); } }

/* Scroll reveal (classes added by main.js) */
.rv { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.rv-left { transform: translateX(-40px); }
.rv.rv-zoom { transform: scale(.94); }
.rv.in { opacity: 1; transform: none; }
.account-head h2 { position: relative; display: inline-block; }
.account-head h2::after {
  content: ""; position: absolute; left: 0; bottom: -8px; width: 48px; height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .8s .3s var(--ease);
}
.account-head.in h2::after { transform: scaleX(1); }

/* Rows: gold bar grows on hover, entry slides */
.row, .particulars tr, .up, .due { position: relative; }
a.row::before, .rows .row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
  transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease);
}
.row:hover::before { transform: scaleY(1); }
.row > * { transition: transform .35s var(--ease); }
.row:hover > * { transform: translateX(10px); }
a.row:hover h3 { color: var(--accent-ink); }
.particulars tr { transition: background .25s; }
.particulars tr:hover { background: rgba(184, 151, 90,.08); }
.due { transition: background .25s, transform .3s var(--ease); }
.due:hover { background: rgba(184, 151, 90,.07); transform: translateX(6px); }

/* Ticks draw in one after another */
.ticks li::before { color: var(--accent); display: inline-block; transform: scale(0) rotate(-40deg); transition: transform .4s var(--ease); }
.in .ticks li::before, .ticks.in li::before { transform: none; }
.ticks li:nth-child(2)::before { transition-delay: .08s; } .ticks li:nth-child(3)::before { transition-delay: .16s; }
.ticks li:nth-child(4)::before { transition-delay: .24s; } .ticks li:nth-child(5)::before { transition-delay: .32s; }
.ticks li:nth-child(6)::before { transition-delay: .4s; }

/* Partner stamps land like a rubber stamp */
.partner.in .stamp { animation: stamp .6s var(--ease) both; }
@keyframes stamp { 0% { transform: scale(1.8) rotate(-12deg); opacity: 0; } 60% { transform: scale(.94) rotate(2deg); opacity: 1; } 100% { transform: none; } }
.partner:hover .stamp { transform: rotate(-6deg) scale(1.06); transition: transform .3s var(--ease); background: var(--primary); color: var(--accent); }

/* Buttons: lift + gold shine sweep */
.btn { position: relative; overflow: hidden; transition: background .25s, color .25s, transform .25s var(--ease), box-shadow .25s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(10, 24, 48,.18); }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg);
}
.btn:hover::after { animation: shine .8s ease; }
@keyframes shine { to { left: 130%; } }
.btn-primary { background: var(--primary); }
.btn-gold { background: var(--accent); color: var(--primary); }
.btn-gold:hover { background: #C8A96F; }
.hero .btn-quiet { border-color: var(--primary); }

/* Scroll progress bar */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; background: var(--accent); transform: scaleX(0); transform-origin: left; }

/* WhatsApp pulse */
.fab-wa { position: relative; }
.fab-wa::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #1FA855; animation: ping 2.4s ease-out infinite;
}
@keyframes ping { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
.fab-btn { animation: fabIn .6s 1.2s var(--ease) both; transition: transform .25s var(--ease); }
.fab-btn:hover { transform: translateY(-3px); }
@keyframes fabIn { from { opacity: 0; transform: translateY(30px) scale(.8); } }

/* ===== CA logo cursor (mouse / trackpad only) ===== */
@media (pointer: fine) {
  html, body { cursor: url("../images/ca-cursor.png") 16 16, auto; }
  a, button, select, label, summary, [role="tab"], .tab, .seg button, .filters button, .acc button {
    cursor: url("../images/ca-cursor-hover.png") 16 16, pointer;
  }
  input, textarea { cursor: text; }
}

/* ===================================================================
   UI/UX PRO MAX FIXES — accessibility, targets, motion timing, CTA path
   =================================================================== */
:root { --dur-fast: .2s; --dur-base: .3s; --dur-reveal: .6s; --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* Contrast: gold as text only in its darker ink shade on light backgrounds */
.ledger .init, .row .live em, .since { color: var(--accent-ink); }

/* Visible focus: navy ring on light surfaces, gold ring on dark ones */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 3px; }
.site-footer :focus-visible { outline-color: var(--accent); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--primary); outline-offset: 0; }

/* Skip link */
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--primary); color: #fff; padding: 12px 18px;
  border-radius: 3px; font-weight: 600; transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* Touch targets: 44px minimum for tool controls */
.filters button, .seg button, .tab.sm, .tab { min-height: 44px; }
.filters { gap: 8px; }

/* Header CTA */
.nav-cta { margin-left: 10px; }
.nav-links > li > a.nav-cta-btn {
  background: var(--accent); color: var(--primary); border-radius: 3px; padding: 10px 18px; font-weight: 600;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.nav-links > li > a.nav-cta-btn::after { display: none; }
.nav-links > li > a.nav-cta-btn:hover { background: #C8A96F; transform: translateY(-2px); }
.nav-links > li > a.nav-cta-btn.active { box-shadow: inset 0 -3px 0 var(--primary); }

/* Motion tokens: quicker, decelerating entries; snappy hovers */
.rv { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.row > *, a.row::before, .rows .row::before { transition-duration: var(--dur-base); transition-timing-function: var(--ease-out); }
.particulars tr, .due, .link, .tab, .filters button, .seg button { transition-duration: var(--dur-fast); }

/* Form errors next to the field, announced */
.field .error { display: none; color: #B42318; font-size: 14px; margin-top: 6px; font-weight: 500; }
.field.invalid .error { display: block; }
.field.invalid input, .field.invalid textarea { border-color: #B42318; }
.error-summary {
  display: none; border: 2px solid #B42318; border-radius: 3px; padding: 14px 18px; margin-bottom: 18px; background: #FEF3F2;
}
.error-summary.show { display: block; }
.error-summary h3 { font: 600 17px var(--sans); color: #B42318; margin-bottom: 6px; }
.error-summary a { color: #B42318; text-decoration: underline; }
.form-ok { display: none; border-left: 4px solid var(--accent); background: #fff; padding: 12px 16px; margin-top: 14px; }
.form-ok.show { display: block; }

/* ===================================================================
   HOME PAGE — varied, interactive sections
   =================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 720px) { .hero-split .sheet { --margin: 44px; } .hero-split .ledger .gloss { padding-left: 18px; } }
.sec { padding: 96px 0; position: relative; }
.sec-title { max-width: 640px; margin-bottom: 44px; }
.sec-title.center { margin-inline: auto; text-align: center; }
.sec-title h2 { font-size: clamp(30px, 4vw, 44px); }
.sec-title p { color: var(--ink-soft); margin-top: 12px; font-size: 17px; }
.sec-title .kicker { display: inline-block; color: var(--accent-ink); font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.sec-dark { background: var(--primary); color: #CDD4E0; overflow: hidden; }
.sec-dark h2, .sec-dark h3 { color: #fff; }
.sec-dark .sec-title p { color: #97A3B6; }
.sec-dark .kicker { color: var(--accent); }
.sec-white { background: #fff; }

/* Hero split */
.hero-split { padding: 72px 0 120px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero-copy { color: #CDD4E0; }
.hero-copy .kick { color: var(--accent); font-weight: 600; letter-spacing: .5px; font-size: 15px; animation: rise .8s .1s var(--ease-out) both; }
.hero-copy h1 { color: #fff; font-size: clamp(44px, 6vw, 76px); line-height: 1.02; margin: 14px 0 16px; animation: rise .8s .2s var(--ease-out) both; }
.hero-copy .for { font: 500 clamp(20px, 2.4vw, 28px)/1.3 var(--serif); color: #fff; animation: rise .8s .3s var(--ease-out) both; }
.rotator { display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.3em; color: var(--accent); }
.rotator span { grid-area: 1 / 1; transform: translateY(110%); opacity: 0; transition: transform .6s var(--ease-out), opacity .6s; white-space: nowrap; }
.rotator span.on { transform: none; opacity: 1; }
.rotator span.out { transform: translateY(-110%); opacity: 0; }
.hero-copy .lead { margin: 20px 0 30px; font-size: 17.5px; max-width: 52ch; animation: rise .8s .4s var(--ease-out) both; }
.hero-copy .actions { animation: rise .8s .5s var(--ease-out) both; }
.btn-light { border: 1.5px solid rgba(255,255,255,.45); color: #fff; background: transparent; }
.btn-light:hover { background: #fff; color: var(--primary); }
.chips-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; animation: rise .8s .6s var(--ease-out) both; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 14px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(184, 151, 90,.35); color: #E9ECF2; backdrop-filter: blur(6px);
}
.chip b { color: var(--accent); font-weight: 600; }

.tilt-wrap { perspective: 1200px; position: relative; }
.tilt { transform-style: preserve-3d; transition: transform .5s var(--ease-out); will-change: transform; }
.hero-split .sheet { --margin: 64px; }
.hero-split .ledger li { grid-template-columns: var(--margin) minmax(0, 1fr); padding: 12px 22px 12px 0; }
.hero-split .ledger .word { font-size: clamp(34px, 3.6vw, 52px); }
.hero-split .ledger .gloss { grid-column: 2; padding-left: 28px; font-size: 14.5px; margin-top: 4px; }
.hero-split .sheet-head { padding: 18px 22px 12px calc(var(--margin) + 28px); }
.hero-split .ledger-total { grid-template-columns: var(--margin) repeat(3, minmax(0, 1fr)); padding: 14px 22px 14px 0; gap: 0 14px; }
.hero-split .ledger-total dd { font-size: 15px; }
.seal {
  position: absolute; width: 132px; height: 132px; right: -34px; top: -44px; z-index: 3; transform: translateZ(60px);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
.seal svg { width: 100%; height: 100%; animation: spin 18s linear infinite; }
.seal .core { position: absolute; inset: 30px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; text-align: center; border: 2px solid var(--accent); }
.seal .core strong { font: 700 22px/1 var(--serif); color: var(--accent); display: block; }
.seal .core span { font-size: 10px; color: #CDD4E0; letter-spacing: 1px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Stats */
.stats-wrap { margin-top: -64px; position: relative; z-index: 5; }
.stats {
  display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(10, 24, 48,.14);
}
.stat { padding: 28px 18px; text-align: center; border-right: 1px solid var(--rule); position: relative; transition: background .3s; }
.stat:last-child { border-right: 0; }
.stat::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transition: transform .35s var(--ease-out); }
.stat:hover { background: #FBF8F0; }
.stat:hover::after { transform: scaleX(1); }
.stat strong { display: block; font: 700 clamp(30px, 3.4vw, 42px)/1 var(--serif); color: var(--primary); }
.stat strong sup { font-size: .5em; color: var(--accent-ink); }
.stat span { font-size: 14px; color: var(--ink-soft); margin-top: 8px; display: block; }

/* Service explorer */
.explorer { display: grid; grid-template-columns: 330px 1fr; gap: 28px; align-items: stretch; }
.svc-list { display: flex; flex-direction: column; gap: 6px; }
.svc-tab {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; min-height: 56px; padding: 10px 16px;
  background: #fff; border: 1px solid var(--rule); border-radius: 10px; font-weight: 600; font-size: 15.5px; position: relative; overflow: hidden;
  transition: border-color .2s, background .2s, transform .25s var(--ease-out);
}
.svc-tab:hover { transform: translateX(4px); border-color: var(--accent); }
.svc-tab .ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: rgba(184, 151, 90,.14); color: var(--accent-ink); flex: none; transition: background .25s, color .25s; }
.svc-tab .ic svg { width: 19px; height: 19px; }
.svc-tab[aria-selected="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.svc-tab[aria-selected="true"] .ic { background: var(--accent); color: var(--primary); }
.svc-tab .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); width: 0; }
.svc-tab[aria-selected="true"] .bar.run { animation: fillbar var(--cycle, 5s) linear forwards; }
@keyframes fillbar { to { width: 100%; } }
.svc-panel {
  background: #fff; border-radius: 14px; padding: 40px; box-shadow: 0 18px 50px rgba(10, 24, 48,.08); position: relative; overflow: hidden;
  border: 1px solid var(--rule);
}
.svc-panel::before {
  content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; right: -90px; top: -90px;
  background: radial-gradient(circle, rgba(184, 151, 90,.18), transparent 70%);
}
.svc-panel .big-ic { width: 72px; height: 72px; border-radius: 18px; background: var(--primary); color: var(--accent); display: grid; place-items: center; margin-bottom: 22px; }
.svc-panel .big-ic svg { width: 36px; height: 36px; }
.svc-panel h3 { font-size: 32px; margin-bottom: 10px; }
.svc-panel > div > p { color: var(--ink-soft); font-size: 17px; max-width: 56ch; }
.svc-panel .ticks { margin: 20px 0 26px; font-size: 16px; }
.swap-in > * { animation: rise .5s var(--ease-out) both; }
.swap-in > *:nth-child(2) { animation-delay: .05s; } .swap-in > *:nth-child(3) { animation-delay: .1s; }
.swap-in > *:nth-child(4) { animation-delay: .15s; } .swap-in > *:nth-child(5) { animation-delay: .2s; }
.swap-in .big-ic { animation: popIc .6s var(--ease-out) both; }
@keyframes popIc { from { transform: scale(.4) rotate(-30deg); opacity: 0; } }

/* Timeline */
.timeline-h { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding-top: 44px; }
.timeline-h::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: rgba(255,255,255,.14); }
.timeline-h .fill { position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease-out); }
.timeline-h.in .fill { transform: scaleX(1); }
.tl { position: relative; opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.timeline-h.in .tl { opacity: 1; transform: none; }
.tl::before {
  content: ""; position: absolute; top: -40px; left: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary); border: 3px solid var(--accent); transform: scale(0); transition: transform .5s var(--ease-out);
}
.timeline-h.in .tl::before { transform: scale(1); }
.tl .yr { font: 700 30px/1 var(--serif); color: var(--accent); }
.tl h3 { font-size: 18px; margin: 10px 0 6px; }
.tl p { font-size: 14.5px; color: #97A3B6; }
.tl:hover::before { box-shadow: 0 0 0 8px rgba(184, 151, 90,.2); }

/* Quick tax check + tool cards */
.tools-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; }
.taxcheck {
  background: linear-gradient(140deg, var(--primary), var(--primary-2)); color: #CDD4E0; border-radius: 16px; padding: 36px; position: relative; overflow: hidden;
}
.taxcheck::after { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; right: -100px; bottom: -140px; border: 1px solid rgba(184, 151, 90,.3); }
.taxcheck h3 { color: #fff; font-size: 26px; }
.taxcheck .sub { font-size: 14.5px; margin: 6px 0 24px; }
.taxcheck label { display: flex; justify-content: space-between; font-weight: 600; color: #fff; margin-bottom: 12px; }
.taxcheck label output { color: var(--accent); font: 700 22px var(--serif); }
.range { width: 100%; appearance: none; -webkit-appearance: none; height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); outline-offset: 6px; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 4px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3); transition: transform .2s; }
.range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 4px solid #fff; }
.tc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0 20px; }
.tc-out div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 16px 18px; }
.tc-out span { font-size: 13.5px; display: block; }
.tc-out strong { font: 700 28px var(--serif); color: #fff; }
.tc-bar { height: 10px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; margin-bottom: 8px; }
.tc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #E2D1AC); border-radius: 5px; transition: width .4s var(--ease-out); }
.tc-note { font-size: 13px; color: #97A3B6; margin-bottom: 20px; }
.tool-stack { display: grid; gap: 24px; }
.tool-card {
  display: block; background: #fff; border: 1px solid var(--rule); border-radius: 16px; padding: 28px; position: relative; overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.tool-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(10, 24, 48,.12); border-color: var(--accent); }
.tool-card .ic { width: 52px; height: 52px; border-radius: 12px; background: rgba(184, 151, 90,.14); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: 16px; transition: transform .4s var(--ease-out), background .3s, color .3s; }
.tool-card:hover .ic { transform: rotate(-10deg) scale(1.08); background: var(--primary); color: var(--accent); }
.tool-card .ic svg { width: 26px; height: 26px; }
.tool-card h3 { font-size: 21px; margin-bottom: 6px; }
.tool-card p { color: var(--ink-soft); font-size: 15px; }
.tool-card .countdown { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.tool-card .countdown strong { font: 700 34px/1 var(--serif); color: var(--primary); }
.tool-card .countdown span { font-size: 14px; color: var(--ink-soft); }
.tool-card .go { margin-top: 14px; display: inline-block; font-weight: 600; color: var(--accent-ink); }

/* Sector marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee + .marquee { margin-top: 14px; }
.track { display: flex; gap: 14px; width: max-content; animation: marq 38s linear infinite; }
.marquee.rev .track { animation-direction: reverse; animation-duration: 44s; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.sector {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: #fff; border: 1px solid var(--rule);
  font-weight: 600; white-space: nowrap; transition: background .25s, color .25s, border-color .25s;
}
.sector::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sector:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Partner flip cards */
.flip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.flip { perspective: 1000px; height: 310px; border: 0; background: none; padding: 0; text-align: left; width: 100%; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s var(--ease-out); }
.flip:hover .flip-in, .flip:focus-visible .flip-in, .flip.flipped .flip-in { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; padding: 26px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.face.front { background: #fff; border: 1px solid var(--rule); }
.face.front .stamp { width: 84px; height: 84px; font-size: 28px; border-radius: 50%; margin-bottom: 16px; }
.face.front .portrait { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; margin-bottom: 16px;
  padding: 4px; background: #fff; border: 2px solid var(--accent); box-shadow: 0 10px 24px -12px rgba(10, 24, 48, .45); transition: transform .4s var(--ease); }
.flip:hover .face.front .portrait { transform: scale(1.04); }
.face.front h3 { font-size: 20px; }
.face.front small { color: var(--ink-soft); margin-top: 4px; font-size: 14px; }
.face.front .hint-flip { margin-top: 12px; font-size: 12.5px; color: var(--accent-ink); }
.face.back { background: var(--primary); color: #CDD4E0; transform: rotateY(180deg); border: 1px solid var(--accent); }
.face.back h3 { color: var(--accent); font-size: 19px; margin-bottom: 10px; }
.face.back p { font-size: 14.5px; }

/* Contact band */
.cta-band { background: radial-gradient(900px 400px at 10% 110%, #1A3760, transparent 60%), var(--primary); color: #CDD4E0; overflow: hidden; position: relative; }
.cta-band .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(184, 151, 90,.3); animation: pulseRing 6s ease-out infinite; pointer-events: none; }
.cta-band .ring.r1 { width: 300px; height: 300px; right: 8%; top: 50%; margin-top: -150px; }
.cta-band .ring.r2 { width: 300px; height: 300px; right: 8%; top: 50%; margin-top: -150px; animation-delay: -3s; }
@keyframes pulseRing { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
.cta-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
.cta-grid h2 { color: #fff; font-size: clamp(30px, 4vw, 44px); }
.cta-grid > div > p { margin: 14px 0 26px; font-size: 17px; }
.office-cards { display: grid; gap: 16px; }
.office-card {
  display: flex; gap: 16px; align-items: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 20px; transition: transform .3s var(--ease-out), border-color .3s, background .3s;
}
.office-card:hover { transform: translateX(-6px); border-color: var(--accent); background: rgba(255,255,255,.09); }
.office-card .pin { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--primary); display: grid; place-items: center; flex: none; }
.office-card:hover .pin { animation: bounce .6s var(--ease-out); }
@keyframes bounce { 40% { transform: translateY(-8px); } }
.office-card .pin svg { width: 22px; height: 22px; }
.office-card h3 { font-size: 18px; margin-bottom: 4px; }
.office-card p { font-size: 14.5px; }

@media (max-width: 980px) {
  .hero-grid, .explorer, .tools-grid, .cta-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(3) { border-right: 0; }
  .stat:nth-child(-n+3) { border-bottom: 1px solid var(--rule); }
  .flip-grid { grid-template-columns: 1fr 1fr; }
  .timeline-h { grid-template-columns: 1fr; padding: 0 0 0 36px; gap: 28px; }
  .timeline-h::before, .timeline-h .fill { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .timeline-h .fill { transform: scaleY(0); transform-origin: top; }
  .timeline-h.in .fill { transform: scaleY(1); }
  .tl::before { top: 4px; left: -36px; }
  .svc-list { flex-direction: row; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .svc-tab { flex: none; width: auto; scroll-snap-align: start; }
  .seal { right: -10px; top: -50px; width: 110px; height: 110px; }
  .seal .core { inset: 25px; }
}
@media (max-width: 720px) {
  .sec { padding: 72px 0; }
  .hero-split .ledger li { padding-right: 16px; }
  .hero-split .ledger-total { grid-template-columns: var(--margin) minmax(0, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(n) { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .flip-grid { grid-template-columns: 1fr; }
  .svc-panel { padding: 26px; }
  .tc-out { grid-template-columns: 1fr; }
  .taxcheck { padding: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee .track > [aria-hidden] { display: none; }
  .tl, .timeline-h .fill, .tl::before { opacity: 1; transform: none; }
  .rotator span { transition: none; }
}

/* ===================================================================
   INTERACTIVE HERO COPY
   =================================================================== */
/* Cursor spotlight */
.hero-split::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(184, 151, 90,.16), transparent 60%);
}
.hero-split.lit::after { opacity: 1; }

/* Firm name: per-letter rise, hover lift, periodic shimmer */
.hero-copy h1.hero-name { animation: none; display: flex; flex-wrap: wrap; position: relative; overflow: hidden; width: fit-content; padding-bottom: 6px; }
.hero-name .ch {
  display: inline-block; opacity: 0; transform: translateY(40px) rotate(6deg); color: #fff;
  animation: chIn .8s var(--ease-out) forwards; animation-delay: calc(.15s + var(--i) * .05s);
  transition: transform .3s var(--ease-out), color .3s, text-shadow .3s; cursor: default;
}
.hero-name .ch.sp { width: .25em; }
.hero-name .ch.amp { color: var(--accent); font-style: italic; }
.hero-name .ch:hover { transform: translateY(-10px) scale(1.08); color: var(--accent); text-shadow: 0 12px 24px rgba(184, 151, 90,.35); }
@keyframes chIn { to { opacity: 1; transform: none; } }
.hero-name::after {                                   /* gold light sweeping across the name */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(100deg, transparent, rgba(243,227,184,.95), transparent); transform: translateX(-120%);
}
.hero-name.shimmer::after { animation: nameSweep 1.4s ease-in-out; }
@keyframes nameSweep { to { transform: translateX(260%); } }

/* Typewriter */
.typer { color: var(--accent); }
.caret { display: inline-block; width: 3px; height: 1.05em; background: var(--accent); margin-left: 3px; vertical-align: -0.15em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Lead: word-by-word reveal + clickable highlights */
.hero-copy .lead { animation: none; }
.lead .w { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(8px); animation: wIn .6s var(--ease-out) forwards; animation-delay: calc(.5s + var(--d) * .035s); }
@keyframes wIn { to { opacity: 1; filter: none; transform: none; } }
.hl {
  font: inherit; color: #fff; background: none; border: 0; padding: 0 3px; margin: 0 -1px; cursor: pointer; border-radius: 3px; position: relative;
  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 0 100%;
  background-size: 0% 2px; transition: background-size .35s var(--ease-out), color .25s;
  animation: wIn .6s var(--ease-out) forwards, ulIn .7s var(--ease-out) forwards !important;
  animation-delay: calc(.5s + var(--d) * .035s), calc(1.4s + var(--k) * .18s) !important;
}
@keyframes ulIn { to { background-size: 100% 2px; } }
.hl:hover, .hl:focus-visible { background-size: 100% 100% !important; color: var(--primary); outline: none; }
.hl::after {
  content: "View"; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 6px); opacity: 0; pointer-events: none;
  font-size: 11.5px; font-weight: 700; background: #fff; color: var(--primary); padding: 3px 8px; border-radius: 4px; transition: .2s; white-space: nowrap;
}
.hl:hover::after, .hl:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Magnetic buttons with icons */
.magnetic { transition: transform .25s var(--ease-out), background .25s, color .25s, box-shadow .25s; will-change: transform; }
.btn-ic { width: 18px; height: 18px; flex: none; }
.bounce-y { animation: nudge 1.6s ease-in-out infinite; }
.btn:hover .ring-ic { animation: ringIt .6s ease-in-out; }
@keyframes ringIt { 20%, 60% { transform: rotate(-16deg); } 40%, 80% { transform: rotate(16deg); } }

/* Chips: copy, tooltip, office popover */
.chips-row { position: relative; }
.chip-btn { font: inherit; font-size: 14px; cursor: pointer; position: relative; transition: transform .25s var(--ease-out), border-color .25s, background .25s; min-height: 40px; }
.chip-btn:hover, .chip-btn:focus-visible { transform: translateY(-3px); border-color: var(--accent); background: rgba(184, 151, 90,.12); }
.chip-ic { width: 15px; height: 15px; opacity: .8; transition: transform .25s; }
#chip-off[aria-expanded="true"] .chip-ic { transform: rotate(180deg); }
.tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); opacity: 0; pointer-events: none; white-space: nowrap;
  background: #fff; color: var(--primary); font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 6px; transition: .2s var(--ease-out);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: #fff; }
.chip-btn:hover .tip, .chip-btn:focus-visible .tip, .tip.show { opacity: 1; transform: translate(-50%, 0); }
.tip.ok { background: #2E9E6A; color: #fff; } .tip.ok::after { border-top-color: #2E9E6A; }
.office-pop {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 5; width: min(420px, 100%); display: grid; gap: 8px; padding: 10px;
  background: #fff; border-radius: 12px; box-shadow: 0 20px 44px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .25s var(--ease-out);
}
.office-pop.open { opacity: 1; visibility: visible; transform: none; }
.office-pop a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink-soft); font-size: 14px; border-left: 3px solid var(--accent); transition: background .2s; }
.office-pop a:hover { background: var(--paper); }
.office-pop b { display: block; color: var(--primary); }

/* ===================================================================
   HOME: page cards (one per page, interactive)
   =================================================================== */
.page-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pcard {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 18px; overflow: hidden;
  background: #fff; border: 1px solid var(--rule); min-height: 230px; isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.pcard.rv.in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.pcard.span2 { grid-column: span 2; }
.pcard.span4 { grid-column: span 4; flex-direction: row; align-items: center; min-height: 0; gap: 22px; }
.pcard.span4 > div { flex: 1; }
.pcard::before {                                  /* glow that follows the cursor */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%), rgba(184, 151, 90,.22), transparent 60%);
}
.pcard:hover { box-shadow: 0 26px 50px rgba(10, 24, 48,.14); border-color: var(--accent); }
.pcard:hover::before { opacity: 1; }
.pcard .pc-ic {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: rgba(184, 151, 90,.14); color: var(--accent-ink); transition: transform .45s var(--ease-out), background .3s, color .3s;
}
.pcard .pc-ic svg { width: 27px; height: 27px; }
.pcard:hover .pc-ic { transform: rotate(-10deg) scale(1.1); background: var(--primary); color: var(--accent); }
.pcard h3 { font-size: 23px; }
.pcard p { color: var(--ink-soft); font-size: 15px; }
.pc-go { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--accent-ink); font-size: 15px; }
.pc-go i { position: relative; width: 22px; height: 2px; background: currentColor; transition: width .3s var(--ease-out); }
.pc-go i::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.pcard:hover .pc-go i { width: 40px; }
.pcard.dark { background: linear-gradient(140deg, var(--primary), var(--primary-2)); border-color: transparent; }
.pcard.dark h3 { color: #fff; } .pcard.dark p { color: #CDD4E0; } .pcard.dark .pc-go { color: var(--accent); }
.pcard.dark .pc-ic { background: rgba(184, 151, 90,.18); color: var(--accent); }
.pcard.dark::after {                              /* animated road line hinting at the journey */
  content: ""; position: absolute; left: -10%; right: -10%; bottom: 26px; height: 2px; z-index: -1;
  background: repeating-linear-gradient(90deg, rgba(184, 151, 90,.6) 0 14px, transparent 14px 26px); animation: roadMove 1.2s linear infinite;
}
@keyframes roadMove { to { background-position: 26px 0; } }
.pcard.gold { background: linear-gradient(120deg, #B8975A, #D8C192); border-color: transparent; }
.pcard.gold h3, .pcard.gold .pc-go { color: var(--primary); } .pcard.gold p { color: #3B3220; }
.pcard.gold .pc-ic { background: var(--primary); color: var(--accent); }
.slide-x { animation: slideX 1.6s ease-in-out infinite; }
@keyframes slideX { 50% { transform: translateX(4px); } }
@media (max-width: 980px) {
  .page-cards { grid-template-columns: 1fr 1fr; }
  .pcard.span2, .pcard.span4 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .page-cards { grid-template-columns: 1fr; }
  .pcard.span2, .pcard.span4 { grid-column: auto; }
  .pcard.span4 { flex-direction: column; align-items: flex-start; }
  .pcard { min-height: 0; }
}

/* ===================================================================
   INNER PAGES — animated navy banner, sticky section heads, page features
   =================================================================== */
.page-head {
  background: radial-gradient(900px 420px at 85% 0%, #1A3760, transparent 60%), var(--primary);
  padding: 64px 0 84px; color: #CDD4E0;
}
.page-head #hero-canvas { opacity: .5; }
.page-head .container { z-index: 1; }
.page-head h1 { color: #fff; }
.page-head p { color: #CDD4E0; }
.crumbs { color: #97A3B6; }
.page-head .crumbs a { color: #E9ECF2; text-decoration-color: var(--accent); }
.page-head .crumbs a:hover { color: var(--accent); }
.page-head::before { border-color: rgba(184, 151, 90,.4); }
.page-head::after { border-color: rgba(184, 151, 90,.3); }
.ph-w { display: inline-block; opacity: 0; transform: translateY(28px) rotate(3deg); animation: chIn .8s var(--ease-out) forwards; animation-delay: calc(.1s + var(--i) * .08s); }
.page-head h1.split { animation: none; }
.page-head + .stats-wrap { margin-top: -48px; }

@media (min-width: 981px) {
  .account-head { position: sticky; top: 104px; align-self: start; }
}

/* Article / portal cards (Knowledge hub) */
.filters.pill button { border-radius: 999px; padding: 8px 18px; }
.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.art-grid .pcard { min-height: 250px; transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s, opacity .35s; }
.art-grid .pcard.hide { display: none; }
.art-grid .pcard.enter { animation: cardIn .45s var(--ease-out) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.tag { display: inline-block; align-self: flex-start; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgba(184, 151, 90,.16); color: var(--accent-ink); }
.pcard time { font-size: 13.5px; color: var(--ink-soft); }
.portal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.portal-grid .pcard { min-height: 0; padding: 22px; }
.portal-grid .pcard h3 { font-size: 19px; }
.ext { width: 16px; height: 16px; vertical-align: -2px; margin-left: 4px; }

/* Careers: expandable role cards */
.roles { display: grid; gap: 14px; }
.role { background: #fff; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.role.open { border-color: var(--accent); box-shadow: 0 18px 40px rgba(10, 24, 48,.1); }
.role > button {
  width: 100%; display: grid; grid-template-columns: 54px 1fr auto; gap: 18px; align-items: center; text-align: left;
  background: none; border: 0; padding: 20px 24px; cursor: pointer; font: inherit; min-height: 44px;
}
.role .pc-ic { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: rgba(184, 151, 90,.14); color: var(--accent-ink); transition: transform .4s var(--ease-out), background .3s, color .3s; }
.role .pc-ic svg { width: 26px; height: 26px; }
.role:hover .pc-ic, .role.open .pc-ic { transform: rotate(-8deg); background: var(--primary); color: var(--accent); }
.role h3 { font-size: 22px; }
.role small { color: var(--ink-soft); font-size: 14.5px; display: block; margin-top: 2px; }
.role .plus { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--accent); position: relative; transition: transform .35s var(--ease-out), background .3s; }
.role .plus::before, .role .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--accent-ink); }
.role .plus::after { transform: rotate(90deg); transition: transform .35s var(--ease-out); }
.role.open .plus { transform: rotate(180deg); background: var(--accent); }
.role.open .plus::after { transform: rotate(0); }
.role-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.role.open .role-body { grid-template-rows: 1fr; }
.role-body > div { overflow: hidden; }
.role-inner { padding: 0 24px 26px 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
.role-inner h4 { font: 700 15px var(--sans); color: var(--primary); margin-bottom: 8px; }
.role-inner .ticks { columns: 1; margin-top: 0; }
.role-inner .actions { grid-column: 1 / -1; margin-top: 8px; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: st; }
.step3 { position: relative; padding: 26px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); transition: transform .3s var(--ease-out), border-color .3s; }
.step3:hover { transform: translateY(-6px); border-color: var(--accent); }
.step3::before {
  counter-increment: st; content: counter(st); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: var(--primary); font: 700 20px var(--serif); margin-bottom: 14px;
}
.step3.in::before { animation: pop2 .6s var(--ease-out) both; }
@keyframes pop2 { 0% { transform: scale(0); } 70% { transform: scale(1.2); } }
.step3 h3 { font-size: 20px; margin-bottom: 6px; }
.step3 p { font-size: 15px; }

/* Contact: map tabs and copy buttons */
.map-tabs { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.map-tabs button {
  min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--rule-strong); background: #fff; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s, border-color .2s;
}
.map-tabs button svg { width: 16px; height: 16px; }
.map-tabs button[aria-selected="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.map-stage { position: relative; margin-top: 14px; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule-strong); height: 360px; background: var(--paper); }
.map-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transform: scale(1.03); transition: opacity .5s, transform .6s var(--ease-out); pointer-events: none; }
.map-stage iframe.on { opacity: 1; transform: none; pointer-events: auto; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 4px 10px; min-height: 30px; border-radius: 999px; border: 1px solid var(--rule-strong);
  background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; vertical-align: middle; transition: background .2s, color .2s, border-color .2s;
}
.copy-btn svg { width: 13px; height: 13px; }
.copy-btn:hover { border-color: var(--accent); color: var(--primary); }
.copy-btn.ok { background: #2E9E6A; border-color: #2E9E6A; color: #fff; }

/* Calendar: due dates cascade in */
.due.cascade { animation: cascadeIn .45s var(--ease-out) both; }
@keyframes cascadeIn { from { opacity: 0; transform: translateX(-24px); } }
.due.cascade.past { animation-name: cascadeInPast; }
@keyframes cascadeInPast { from { opacity: 0; transform: translateX(-24px); } to { opacity: .45; } }

/* Calculators: winner pulse */
.regime.best { animation: bestPulse 2.4s ease-in-out infinite; }
@keyframes bestPulse { 50% { box-shadow: inset 0 3px 0 var(--primary), 0 0 0 6px rgba(184, 151, 90,.18); } }

@media (max-width: 980px) {
  .art-grid { grid-template-columns: 1fr 1fr; }
  .portal-grid { grid-template-columns: 1fr 1fr; }
  .steps3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .art-grid, .portal-grid { grid-template-columns: 1fr; }
  .role-inner { grid-template-columns: 1fr; padding-left: 24px; }
  .role > button { grid-template-columns: 44px 1fr auto; gap: 12px; padding: 16px; }
  .role .pc-ic { width: 44px; height: 44px; }
  .map-stage { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-w { opacity: 1; transform: none; }
  .role-body { transition: none; }
}

/* ===================================================================
   HOW WE WORK — common 5-step flow + per-service tracks
   =================================================================== */
/* Part 1: five common steps, drawn on scroll */
.flow5 { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding-top: 12px; }
.flow5::before, .flow5 .fl-line { content: ""; position: absolute; left: 10%; right: 10%; top: 40px; height: 3px; border-radius: 2px; }
.flow5::before { background: var(--rule); }
.flow5 .fl-line { background: linear-gradient(90deg, var(--accent), #E2D1AC); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out); }
.flow5.in .fl-line { transform: scaleX(1); }
.flow5 .fl-dot { position: absolute; top: 34px; left: 10%; width: 15px; height: 15px; border-radius: 50%; background: var(--primary); border: 3px solid var(--accent); opacity: 0; }
.flow5.in .fl-dot { opacity: 1; animation: flDot 5s 1.6s ease-in-out infinite; }
@keyframes flDot { 0% { left: 10%; } 100% { left: calc(90% - 15px); } }
.fstep { position: relative; text-align: center; padding: 0 6px; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.flow5.in .fstep { opacity: 1; transform: none; }
.fstep .node {
  position: relative; z-index: 1; width: 58px; height: 58px; margin: 12px auto 16px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 8px var(--paper);
  transition: transform .35s var(--ease-out), background .3s, color .3s;
}
.fstep .node svg { width: 26px; height: 26px; }
.fstep:hover .node { transform: scale(1.12) rotate(-6deg); background: var(--primary); color: var(--accent); }
.fstep .num { font: 700 13px var(--sans); color: var(--accent-ink); letter-spacing: .5px; }
.fstep h3 { font-size: 20px; margin: 4px 0 6px; }
.fstep p { font-size: 14.5px; color: var(--ink-soft); }

/* Part 2: service tracks */
.tracks { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.tracks > *, .explorer > * { min-width: 0; }   /* let the tab strips scroll inside instead of widening the page */
@media (max-width: 980px) {
  /* backdrop-filter would make the off-screen mobile menu part of the page width */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
}
.track-tabs { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 100px; }
.track-panel { background: #fff; border: 1px solid var(--rule); border-radius: 18px; padding: 36px 38px; box-shadow: 0 18px 50px rgba(10, 24, 48,.08); position: relative; overflow: hidden; min-height: 520px; }
.track-panel::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; right: -100px; top: -110px; background: radial-gradient(circle, rgba(184, 151, 90,.16), transparent 70%); pointer-events: none; }
.tp-head { display: flex; gap: 18px; align-items: center; margin-bottom: 8px; }
.tp-head .big-ic { width: 64px; height: 64px; border-radius: 16px; background: var(--primary); color: var(--accent); display: grid; place-items: center; flex: none; animation: popIc .6s var(--ease-out) both; }
.tp-head .big-ic svg { width: 32px; height: 32px; }
.tp-head h2 { font-size: clamp(26px, 3vw, 34px); }
.tp-head .cycle { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent-ink); background: rgba(184, 151, 90,.14); padding: 4px 10px; border-radius: 999px; margin-top: 4px; }
.tp-intro { color: var(--ink-soft); font-size: 16.5px; max-width: 62ch; margin: 10px 0 26px; animation: rise .5s .05s var(--ease-out) both; }
.tsteps { list-style: none; position: relative; counter-reset: ts; }
.tsteps::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: var(--rule); }
.tsteps::after { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; animation: growDown 1.4s .15s var(--ease-out) forwards; }
@keyframes growDown { to { transform: scaleY(1); } }
.tsteps li { position: relative; padding: 0 0 22px 64px; opacity: 0; transform: translateX(-16px); animation: stepIn .5s var(--ease-out) forwards; animation-delay: calc(.2s + var(--i) * .16s); }
.tsteps li:last-child { padding-bottom: 0; }
@keyframes stepIn { to { opacity: 1; transform: none; } }
.tsteps li::before {
  counter-increment: ts; content: counter(ts); position: absolute; left: 0; top: -2px; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 2px solid var(--accent); color: var(--primary); font: 700 17px var(--serif);
  transition: background .25s, color .25s, transform .25s var(--ease-out);
}
.tsteps li:hover::before { background: var(--primary); color: var(--accent); transform: scale(1.1); }
.tsteps h4 { font: 700 17px/1.3 var(--sans); color: var(--primary); padding-top: 2px; }
.tsteps p { font-size: 15px; color: var(--ink-soft); margin-top: 3px; max-width: 60ch; }
.tp-docs { margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--rule-strong); animation: rise .5s .6s var(--ease-out) both; }
.tp-docs h4 { font: 700 14px var(--sans); color: var(--primary); margin-bottom: 10px; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-chips span { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; padding: 7px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); transition: border-color .2s, background .2s; }
.doc-chips span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.doc-chips span:hover { border-color: var(--accent); background: #fff; }
.tp-foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* Commitments */
.commit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.commit div { padding: 24px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); transition: transform .3s var(--ease-out), border-color .3s; }
.commit div:hover { transform: translateY(-6px); border-color: var(--accent); }
.commit svg { width: 34px; height: 34px; color: var(--accent); margin-bottom: 12px; }
.commit h3 { font-size: 19px; margin-bottom: 6px; }
.commit p { font-size: 14.5px; }

@media (max-width: 980px) {
  .flow5 { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
  .flow5::before, .flow5 .fl-line { left: 29px; right: auto; top: 20px; bottom: 20px; width: 3px; height: auto; }
  .flow5 .fl-line { transform: scaleY(0); transform-origin: top; }
  .flow5.in .fl-line { transform: scaleY(1); }
  .flow5 .fl-dot { display: none; }
  .fstep { display: grid; grid-template-columns: 58px 1fr; gap: 0 18px; text-align: left; padding: 0 0 20px; }
  .fstep .node { grid-row: span 3; margin: 0; }
  .tracks { grid-template-columns: 1fr; }
  .track-tabs { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .track-tabs .svc-tab { flex: none; scroll-snap-align: start; }
  .commit { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .track-panel { padding: 24px 20px; min-height: 0; }
  .commit { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fstep, .tsteps li { opacity: 1; transform: none; }
  .flow5 .fl-line, .tsteps::after { transform: none; }
}

/* ===================================================================
   CLIENT TOOLS — notice guide, filings check, document checklists
   =================================================================== */
.tool-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
.tool-layout.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tool-side { position: sticky; top: 100px; display: grid; gap: 14px; }
.tool-card-box { background: #fff; border: 1px solid var(--rule); border-radius: 18px; padding: 28px 30px; box-shadow: 0 18px 50px rgba(10, 24, 48,.07); }
.tool-note { font-size: 13.5px; color: var(--ink-soft); background: #fff; border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 12px; padding: 14px 16px; }
.search-box { position: relative; }
.search-box input { width: 100%; min-height: 48px; padding: 12px 16px 12px 44px; border: 1px solid var(--rule-strong); border-radius: 12px; font: inherit; background: #fff; }
.search-box input:focus { outline: 3px solid var(--primary); outline-offset: 0; }
.search-box svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ink-soft); }
.group-label { font: 700 12.5px var(--sans); letter-spacing: .6px; color: var(--accent-ink); margin: 6px 0 2px; text-transform: uppercase; }
.pick-list { display: grid; gap: 6px; }
.pick {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px; text-align: left; font: 600 14.5px var(--sans);
  background: #fff; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--ease-out);
}
.pick:hover { border-color: var(--accent); transform: translateX(4px); }
.pick[aria-selected="true"], .pick[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.pick .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--u, var(--accent)); }
.urg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.urg.high { background: #FEE4E2; color: #B42318; } .urg.med { background: #FEF0C7; color: #93370D; } .urg.low { background: #DCFAE6; color: #067647; }
.n-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.n-head h2 { font-size: clamp(24px, 3vw, 32px); }
.n-head .law { font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.n-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.n-block { background: var(--paper); border-radius: 14px; padding: 18px 20px; animation: rise .45s var(--ease-out) both; }
.n-block:nth-child(2) { animation-delay: .06s; } .n-block:nth-child(3) { animation-delay: .12s; } .n-block:nth-child(4) { animation-delay: .18s; }
.n-block.wide { grid-column: 1 / -1; }
.n-block h3 { font: 700 15px var(--sans); color: var(--primary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.n-block h3 svg { width: 18px; height: 18px; color: var(--accent-ink); }
.n-block p, .n-block li { font-size: 15px; color: var(--ink-soft); }
.n-block ol { padding-left: 20px; } .n-block li { margin-bottom: 6px; }
.n-block .ticks { columns: 1; margin-top: 0; }
.n-foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* Filings check: questions */
.q-list { display: grid; gap: 16px; }
.q { background: #fff; border: 1px solid var(--rule); border-radius: 16px; padding: 20px 22px; transition: border-color .3s, box-shadow .3s; }
.q.answered { border-color: var(--accent); }
.q legend { font: 700 16.5px/1.4 var(--sans); color: var(--primary); margin-bottom: 4px; }
.q .hint { margin: 0 0 12px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts label { position: relative; cursor: pointer; }
.opts input { position: absolute; opacity: 0; pointer-events: none; }
.opts span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--rule-strong);
  background: #fff; font-size: 14.5px; font-weight: 500; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease-out);
}
.opts label:hover span { border-color: var(--accent); transform: translateY(-2px); }
.opts input:checked + span { background: var(--primary); color: #fff; border-color: var(--primary); }
.opts input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.q-progress { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.q-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #E2D1AC); transition: width .4s var(--ease-out); }
.res-empty { color: var(--ink-soft); font-size: 15px; }
.res-group { margin-top: 18px; animation: rise .45s var(--ease-out) both; }
.res-group h3 { font: 700 15px var(--sans); color: var(--primary); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.res-group h3 .cat { font-size: 12.5px; }
.res-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.res-item:last-child { border-bottom: 0; }
.res-item b { color: var(--ink); font-weight: 600; }
.res-item small { display: block; color: var(--ink-soft); font-size: 13px; }
.res-item .when { color: var(--accent-ink); font-weight: 700; white-space: nowrap; font-size: 13.5px; text-align: right; }
.res-count { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; }
.res-count span { font-size: 13.5px; background: var(--paper); padding: 6px 12px; border-radius: 999px; }
.res-count b { color: var(--primary); }

/* Document checklists */
.prof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.prof {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left; padding: 18px; border-radius: 14px; min-height: 120px;
  background: #fff; border: 1px solid var(--rule); cursor: pointer; font: inherit; transition: border-color .2s, transform .25s var(--ease-out), background .2s, box-shadow .25s;
}
.prof:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(10, 24, 48,.08); }
.prof[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.prof .pc-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: rgba(184, 151, 90,.15); color: var(--accent-ink); }
.prof[aria-pressed="true"] .pc-ic { background: var(--accent); color: var(--primary); }
.prof .pc-ic svg { width: 22px; height: 22px; }
.prof b { font-size: 15px; line-height: 1.3; }
.cl-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 8px; }
.cl-bar .q-progress { flex: 1; min-width: 160px; }
.cl-bar output { font-weight: 700; color: var(--primary); font-size: 14.5px; }
.cl-group { margin-top: 18px; animation: rise .45s var(--ease-out) both; }
.cl-group h3 { font-size: 20px; margin-bottom: 8px; }
.cl-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background .2s; }
.cl-item:hover { background: var(--paper); }
.cl-item input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary); flex: none; cursor: pointer; }
.cl-item span { font-size: 15px; }
.cl-item input:checked + span { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--accent); }

@media (max-width: 980px) {
  .tool-layout, .tool-layout.even { grid-template-columns: 1fr; }
  .tool-side { position: static; }
  .prof-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .n-grid { grid-template-columns: 1fr; }
  .tool-card-box { padding: 22px 18px; }
  .res-item { grid-template-columns: 1fr; }
  .res-item .when { text-align: left; }
}
@media print {
  .site-header, .site-footer, .page-head, .fab, .to-top, .progress, .no-print, .skip-link { display: none !important; }
  body { background: #fff; }
  .cl-group { break-inside: avoid; }
  .tool-card-box { box-shadow: none; border: 0; padding: 0; }
}

/* ===================================================================
   M.S.R.R MONOGRAM — header, footer, intro
   =================================================================== */
.brand-wrap { display: flex; align-items: center; gap: 14px; }
.msrr-mark { width: 48px; height: 48px; flex: none; overflow: visible; }
.msrr-mark polygon { transform-box: fill-box; transition: transform .35s var(--ease-out); }
.brand:hover .msrr-mark .mk1 { transform: translateY(-3px); transition-delay: 0s; }
.brand:hover .msrr-mark .mk2 { transform: translateY(-3px); transition-delay: .05s; }
.brand:hover .msrr-mark .mk3 { transform: translateY(-3px); transition-delay: .1s; }
.brand:hover .msrr-mark .mk4 { transform: translateY(-5px); transition-delay: .15s; }
.ca-badge { display: flex; align-items: center; padding-left: 14px; border-left: 1px solid var(--rule); }
.ca-badge .ca-logo { width: 38px; height: 38px; }
.site-footer .msrr-mark { --mk-bg: #050E1F; --mk1: #F7F4EE; --mk2: #CDD4E0; --mk3: #E2D1AC; --mk4: #B8975A; }
.site-footer .ca-badge { border-left-color: rgba(255,255,255,.18); }
@media (max-width: 1100px) and (min-width: 981px) { .ca-badge { display: none; } }   /* keep the desktop menu on one line */
@media (max-width: 420px) { .site-header .ca-badge { display: none; } }

/* Intro: the four strokes rise in order — Monitor, Solve, Refine, Report */
.intro-mark { width: 104px; height: 104px; display: block; margin: 0 auto 26px; overflow: visible; }
.intro-mark .im { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); animation: markGrow .6s cubic-bezier(.16, 1, .3, 1) forwards; }
.intro-mark .im1 { animation-delay: .15s; }
.intro-mark .im2 { animation-delay: .3s; }
.intro-mark .im3 { animation-delay: .45s; }
.intro-mark .im4 { animation-delay: .6s; }
@keyframes markGrow { to { transform: scaleY(1); } }
@media (max-width: 720px) { .intro-mark { width: 80px; height: 80px; } }
@media (prefers-reduced-motion: reduce) { .intro-mark .im { transform: none; } }

/* ===================================================================
   INTRO SPLASH — firm name animates in before the home page
   =================================================================== */
html.intro-on, html.intro-on body { overflow: hidden; }
html.intro-on .hero, html.intro-on .hero *, html.intro-on .hero *::before, html.intro-on .hero *::after,
html.intro-on .fab-btn { animation-play-state: paused !important; }
.intro {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(900px 520px at 50% 46%, #1A3760, transparent 70%), #061126;
}
.intro::before {                                   /* faint ledger lines */
  content: ""; position: absolute; inset: 0; opacity: 0; animation: fadeIn 1.2s .1s forwards;
  background: repeating-linear-gradient(0deg, transparent 0 47px, rgba(184, 151, 90,.07) 47px 48px);
}
.intro-inner { position: relative; text-align: center; padding: 0 20px; }
.intro-logo {
  width: 92px; height: 92px; border-radius: 50%; background: #fff; margin: 0 auto 28px; display: block;
  animation: introLogo 1s .1s cubic-bezier(.16, 1, .3, 1) both, logoGlow 1.8s 1.1s ease-out;
}
@keyframes introLogo { from { transform: scale(0) rotate(-200deg); opacity: 0; } }
@keyframes logoGlow { 0% { box-shadow: 0 0 0 0 rgba(184, 151, 90,.6); } 100% { box-shadow: 0 0 0 34px rgba(184, 151, 90,0); } }
.intro-name {
  position: relative; display: flex; justify-content: center; flex-wrap: wrap; perspective: 600px;
  font: 700 clamp(48px, 9.5vw, 116px)/1.05 var(--serif); color: #fff; letter-spacing: .01em;
}
.intro-name span {
  display: inline-block; opacity: 0; transform: translateY(70%) rotateX(-90deg); transform-origin: 50% 100%;
  animation: letterIn .8s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(.6s + var(--i) * .07s);
}
.intro-name span.amp { color: var(--accent); font-style: italic; }
.intro-name span.sp { width: .28em; }
@keyframes letterIn { to { opacity: 1; transform: none; } }
.intro-sweep {                                    /* gold shimmer across the name */
  position: absolute; inset: -10% -20%; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(100deg, transparent 35%, rgba(226, 209, 172,.95) 50%, transparent 65%);
  transform: translateX(-100%); animation: sweep 1.3s 1.55s ease-in-out forwards;
}
@keyframes sweep { to { transform: translateX(100%); } }
.intro-rule {
  width: min(440px, 72vw); height: 2px; margin: 24px auto 18px; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: drawX .9s 1.5s cubic-bezier(.16, 1, .3, 1) forwards;
}
.intro-tag { color: #CDD4E0; letter-spacing: .32em; text-transform: uppercase; font-size: clamp(11px, 1.4vw, 14px); font-weight: 600; opacity: 0; animation: fadeUp .8s 1.8s forwards; }
.intro-frn { margin-top: 12px; color: var(--accent); font-size: 14px; opacity: 0; animation: fadeUp .8s 2.05s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { to { opacity: 1; } }
.intro-corner { position: absolute; width: 60px; height: 60px; border-color: var(--accent); border-style: solid; opacity: 0; animation: fadeIn .8s .3s forwards; }
.intro-corner.tl { top: 28px; left: 28px; border-width: 2px 0 0 2px; }
.intro-corner.tr { top: 28px; right: 28px; border-width: 2px 2px 0 0; }
.intro-corner.bl { bottom: 28px; left: 28px; border-width: 0 0 2px 2px; }
.intro-corner.br { bottom: 28px; right: 28px; border-width: 0 2px 2px 0; }
.intro-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; animation: drawX 3.2s linear forwards; }
.intro-skip {
  position: absolute; right: 28px; bottom: 34px; min-height: 44px; padding: 10px 18px; border-radius: 999px; z-index: 2;
  background: rgba(255,255,255,.06); border: 1px solid rgba(184, 151, 90,.5); color: #E9ECF2; font-weight: 600; font-size: 14px;
  opacity: 0; animation: fadeIn .6s .8s forwards; transition: background .2s, color .2s;
}
.intro-skip:hover { background: var(--accent); color: var(--primary); }
.intro.leave { animation: curtain 1s cubic-bezier(.76, 0, .24, 1) forwards; pointer-events: none; }
.intro.leave .intro-inner { animation: innerOut .7s cubic-bezier(.76, 0, .24, 1) forwards; }
@keyframes curtain { to { clip-path: inset(0 0 100% 0); } }
@keyframes innerOut { to { transform: translateY(-60px) scale(1.04); opacity: 0; } }
@media (max-width: 720px) {
  .intro-corner { width: 36px; height: 36px; }
  .intro-corner.tl, .intro-corner.tr { top: 18px; } .intro-corner.bl, .intro-corner.br { bottom: 18px; }
  .intro-corner.tl, .intro-corner.bl { left: 18px; } .intro-corner.tr, .intro-corner.br { right: 18px; }
  .intro-skip { right: 50%; transform: translateX(50%); bottom: 36px; }
  .intro-logo { width: 72px; height: 72px; }
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .account { grid-template-columns: 1fr; }
  .account-head p { max-width: 60ch; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .calc { grid-template-columns: 1fr; }
  .result { position: static; }
  .menu-btn { display: block; z-index: 2; }
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--sheet); flex-direction: column;
    align-items: stretch; padding: 90px 24px 24px; gap: 0; border-left: 1px solid var(--rule-strong); overflow-y: auto;
    transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility .3s;
  }
  .menu-open .nav-links { transform: none; visibility: visible; }
  .nav-links > li > a { font-size: 18px; padding: 12px 4px; border-bottom: 1px solid var(--rule); }
  .nav-links > li > a::after { display: none; }
  .nav-links > li > a.active { color: var(--accent); }
  .drop { position: static; opacity: 1; visibility: inherit; transform: none; border: 0; background: none; padding: 0 0 0 14px; min-width: 0; }
  .drop a { border-bottom: 1px solid var(--rule); padding: 10px 4px; font-size: 16px; }
  .has-drop small { display: none; }
  .fab-call { display: flex; }
  .up { grid-template-columns: 90px minmax(0, 1fr); }
  .up .when, .up .cat { grid-column: 2; }
}
@media (max-width: 720px) {
  :root { --margin: 44px; }
  .band { padding: 56px 0; }
  .ledger li { grid-template-columns: var(--margin) minmax(0, 1fr); padding-right: 18px; }
  .ledger .init { font-size: 17px; }
  .ledger .word { font-size: 44px; padding-left: 18px; }
  .ledger .gloss { grid-column: 2; padding-left: 18px; margin-top: 6px; font-size: 15px; }
  .ledger-total { grid-template-columns: var(--margin) minmax(0, 1fr); padding-right: 18px; row-gap: 12px; }
  .ledger-total div, .ledger-total div:first-child { grid-column: 2; padding-left: 18px; }
  .sheet-head { padding: 18px 18px 14px calc(var(--margin) + 18px); }
  .sheet-foot { padding: 22px 18px 24px calc(var(--margin) + 18px); }
  .row { grid-template-columns: 1fr; }
  .ticks { columns: 1; }
  .partners { grid-template-columns: 1fr; }
  .partner:nth-child(n) { border-right: 0; padding: 24px 4px; }
  .partner:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
  .form-row, .maps, .compare, .footer-grid { grid-template-columns: 1fr; }
  .big-out { grid-template-columns: 1fr; }
  .big-out div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .due { grid-template-columns: 56px minmax(0, 1fr); }
  .due .cat { grid-column: 2; }
  .panel-box { padding: 20px; }
  .fab { right: 14px; bottom: 14px; }
  .to-top { left: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ledger li { clip-path: none; }
  .rv { opacity: 1; transform: none; }
  .hero-name .ch, .lead .w { opacity: 1; transform: none; filter: none; }
  .hl { background-size: 100% 2px; }
  .ticks li::before { transform: none; }
  .page-head .container::after, .account-head h2::after { transform: none; }
}

/* ===================================================================
   CHANGE 9 — Libre Caslon: Display for large headings, Text for smaller ones.
   Numbers in counters and results use Inter so digits stay regular height.
   =================================================================== */
h1, h2, .hero-name, .hero-copy h1, .intro-name, .page-head h1, .ledger .word, .sec-title h2, .account-head h2 {
  font-family: var(--display); font-weight: 400; letter-spacing: -.005em;
}
h3, h4 { font-family: var(--serif); font-weight: 700; }
.hero-copy .for, .mock-tag { font-family: var(--serif); }
.stat strong, .big-out strong, .regime .total, .tc-out strong, .countdown strong, .tl .yr, .due .date strong,
.up .left, .j-num, .seal .core strong, .tc-out strong, .total, .taxcheck label output, .tsteps li::before, .step3::before {
  font-family: var(--sans); font-weight: 700; letter-spacing: -.01em;
}

/* ===================================================================
   CHANGE 10 — ledger ink illustrations (see INK in main.js)
   =================================================================== */
.ink-art { width: 100%; height: 100%; overflow: visible; }
.ink-art .ink { fill: none; stroke: #0A1830; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ink-art .ink-soft { fill: none; stroke: #8FA0B8; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ink-art .rule-l, .ink-art .rule-l path { fill: none; stroke: #D9C79A; stroke-width: .8; }
.ink-art .gold-s { fill: none; stroke: #B8975A; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ink-art .gold-f { fill: #B8975A; }
.ink-art .stampc { fill: none; stroke: #A88A52; stroke-width: 1.3; stroke-dasharray: 2.4 1.6; }
.ink-art .draw { stroke-dasharray: 320; stroke-dashoffset: 320; animation: inkDraw 1.8s .15s ease-out forwards; }
.rv:not(.in) .ink-art .draw { animation-play-state: paused; }
@keyframes inkDraw { to { stroke-dashoffset: 0; } }
/* tile used on page cards */
.pc-ink {
  width: 78px; height: 78px; flex: none; border-radius: 16px; display: grid; place-items: center; padding: 8px;
  background: #FBF8F1; border: 1px solid #EFE6D2; transition: transform .45s var(--ease-out), box-shadow .3s;
}
.pcard:hover .pc-ink { transform: rotate(-4deg) scale(1.06); box-shadow: 0 10px 22px rgba(10, 24, 48,.12); }
.pcard.dark .pc-ink { border-color: rgba(184, 151, 90,.5); }
.pcard.gold .pc-ink { border-color: #fff; }
/* larger tile in the service explorer and How we work panels */
.big-ink {
  width: 112px; height: 112px; flex: none; border-radius: 20px; display: grid; place-items: center; padding: 12px; margin-bottom: 18px;
  background: #FBF8F1; border: 1px solid #EFE6D2; animation: popIc .6s var(--ease-out) both;
}
.tp-head .big-ink { margin-bottom: 0; width: 96px; height: 96px; }
@media (max-width: 640px) { .big-ink { width: 88px; height: 88px; } .pc-ink { width: 66px; height: 66px; } }
@media (prefers-reduced-motion: reduce) { .ink-art .draw { stroke-dashoffset: 0; animation: none; } }

/* Knowledge hub: articles not yet published */
.art-grid .pcard.soon { cursor: default; }
.soon-badge {
  position: absolute; top: 22px; right: 22px; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: var(--primary); background: #FBF8F1; border: 1px dashed var(--accent); padding: 4px 10px; border-radius: 999px;
}
.art-grid .pcard.soon h3, .art-grid .pcard.soon p { padding-right: 4px; }
.art-grid .pcard.soon .tag { margin-right: 96px; }

/* 404 page */
.nf { text-align: center; padding: 90px 0 110px; }
.nf .big { font: 700 clamp(90px, 16vw, 170px)/1 var(--sans); color: var(--primary); letter-spacing: -4px; }
.nf .big span { color: var(--accent); }
.nf h1 { font-size: clamp(30px, 4vw, 42px); margin: 10px 0 12px; }
.nf p { color: var(--ink-soft); max-width: 52ch; margin: 0 auto 26px; }
.nf .actions { justify-content: center; }