/* ACCORP 2026 — global styles, primitives, components */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink-900);
  font-family:var(--font-ui);
  font-size:var(--t-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange-700);text-underline-offset:2px}
a:hover{color:var(--orange-800)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink-900);color:#fff;padding:var(--space-3) var(--space-4);z-index:999}
.skip-link:focus{left:0}

h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:400}
h1{font-family:var(--font-display);font-size:var(--t-hero);line-height:1.05;letter-spacing:-.02em}
h2{font-family:var(--font-display);font-size:var(--t-h2);line-height:1.15;letter-spacing:-.015em}
h3{font-size:var(--t-h3);line-height:1.3;font-weight:600}
h4{font-size:var(--t-h4);line-height:1.4;font-weight:600}
p{margin:0}
.measure{max-width:var(--measure)}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5)}
.section{padding-block:var(--space-10)}
.section--alt{background:var(--surface-alt)}
.section--dark{background:var(--surface-dark);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.stack{display:flex;flex-direction:column}
.stack-3{gap:var(--space-3)} .stack-4{gap:var(--space-4)}
.stack-5{gap:var(--space-5)} .stack-6{gap:var(--space-6)}

.kicker{
  font-size:var(--t-kicker);font-weight:500;color:var(--ink-500);
  margin-bottom:var(--space-2);
}
.section--dark .kicker{color:var(--ink-300)}
.lede{font-size:1.125rem;line-height:1.6;color:var(--ink-700);max-width:var(--measure)}
.section--dark .lede{color:var(--ink-300)}

/* ── Buttons ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 var(--space-5);
  border-radius:var(--radius-md);
  font-family:var(--font-ui);font-size:var(--t-small);font-weight:600;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background-color .18s ease,border-color .18s ease;
}
.btn--primary{background:var(--orange-500);color:var(--ink-900)}
.btn--primary:hover{background:var(--orange-600);color:var(--ink-900)}
.btn--secondary{background:transparent;color:var(--ink-900);border-color:var(--ink-300)}
.btn--secondary:hover{border-color:var(--ink-900);color:var(--ink-900)}
.btn--ghost-dark{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.24)}
.btn--ghost-dark:hover{background:rgba(255,255,255,.16);color:#fff}
.btn--lg{min-height:52px;padding:0 var(--space-6)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* ── Header ──────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.site-header.is-scrolled{border-bottom-color:var(--ink-100)}
.header-inner{
  display:flex;align-items:center;gap:var(--space-5);
  min-height:var(--header-h);
}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;flex-shrink:0}
.brand img{height:32px;width:auto}
.brand-name{font-family:var(--font-display);font-size:1.25rem;color:var(--ink-900);letter-spacing:-.01em}
.primary-nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-5)}
.primary-nav ul{display:flex;align-items:center;gap:var(--space-5);list-style:none;margin:0;padding:0}
.primary-nav a{
  color:var(--ink-700);text-decoration:none;font-size:var(--t-small);font-weight:500;
  padding-block:var(--space-2);
}
.primary-nav a:hover,.primary-nav a[aria-current="page"]{color:var(--orange-700)}
.nav-toggle{display:none;background:none;border:1px solid var(--ink-300);border-radius:var(--radius-sm);
  width:44px;height:44px;margin-left:auto;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink-900);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink-900)}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}

@media(max-width:1024px){
  .nav-toggle{display:flex}
  .primary-nav{
    /* z-index is the fix for the panel opening invisibly: the sticky header
       above it sits at 100, and without a stacking value this fixed panel
       painted behind the page content. Height is set explicitly rather than
       left to `inset`, which collapsed to the content height here. */
    position:fixed;left:0;right:0;top:var(--header-h);
    height:calc(100dvh - var(--header-h));
    z-index:99;
    background:var(--surface);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:var(--space-5);overflow-y:auto;margin-left:0;
    border-top:1px solid var(--ink-100);
  }
  /* dvh is not universal; vh is the floor, dvh wins where supported. */
  @supports not (height:100dvh){
    .primary-nav{height:calc(100vh - var(--header-h))}
  }
  .primary-nav[hidden]{display:none}
  .primary-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .primary-nav li{border-bottom:1px solid var(--ink-100)}
  .primary-nav a{display:block;padding:var(--space-4) 0;font-size:1.0625rem}
  /* `.primary-nav a` sets display:block and outranks `.btn`, which killed the
     flex centring and left the label hard against the left edge of a
     full-width button. Restore it at matching specificity. */
  .primary-nav .btn{
    display:flex;align-items:center;justify-content:center;
    text-align:center;margin-top:var(--space-5);
  }
}

/* ── Hero ────────────────────────────────────────────── */
.hero{padding-block:var(--space-10) var(--space-11)}
.hero-grid{display:grid;grid-template-columns:52fr 48fr;gap:var(--space-8);align-items:center}
.hero h1{margin-bottom:var(--space-5)}
.hero .lede{margin-bottom:var(--space-5)}
.credential-line{
  display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
  list-style:none;margin:0 0 var(--space-6);padding:0;
  font-size:var(--t-small);color:var(--ink-700);
}
.credential-line li{display:flex;align-items:center;gap:var(--space-2)}
.credential-line li::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--amber-500);flex-shrink:0;
}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--space-7)}}

/* Illustrative panel — real markup, not an image */
.hero-panel{
  background:var(--surface-dark);border-radius:var(--radius-xl);
  padding:var(--space-6);color:#fff;
}
.hero-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  padding-bottom:var(--space-4);border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:var(--space-5)}
.hero-panel-title{font-size:var(--t-small);font-weight:600;color:#fff}
.hero-panel-note{font-size:var(--t-micro);color:var(--ink-300)}
.panel-rows{display:flex;flex-direction:column;gap:var(--space-4)}
.panel-row{display:grid;grid-template-columns:1fr auto;gap:var(--space-2) var(--space-3);align-items:center}
.panel-label{font-size:var(--t-small);color:var(--ink-300)}
.panel-value{font-size:var(--t-small);font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.panel-bar{grid-column:1/-1;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.panel-bar i{display:block;height:100%;border-radius:3px;background:var(--orange-500)}
.panel-bar i.is-amber{background:var(--amber-500)}
.panel-foot{margin-top:var(--space-5);padding-top:var(--space-4);
  border-top:1px solid rgba(255,255,255,.12);font-size:var(--t-micro);color:var(--ink-300)}

/* ── Credential strip ────────────────────────────────── */
.cred-strip{padding-block:var(--space-8)}
.cred-strip h2{font-size:var(--t-h4);font-family:var(--font-ui);font-weight:600;margin-bottom:var(--space-2)}
.cred-groups{display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-8);margin-top:var(--space-5)}
.cred-group{display:flex;flex-direction:column;gap:var(--space-2)}
.cred-basis{font-size:var(--t-micro);color:var(--ink-500);font-weight:500}
.cred-marks{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;list-style:none;margin:0;padding:0}
.cred-marks li{font-size:var(--t-small);font-weight:600;color:var(--ink-700)}

/* ── Cards ───────────────────────────────────────────── */
.card-grid{display:grid;gap:var(--space-5)}
.card-grid--3{grid-template-columns:repeat(3,1fr)}
.card-grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1024px){.card-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.card-grid--3,.card-grid--2{grid-template-columns:1fr}}

.card{
  background:var(--surface);border:1px solid var(--ink-100);
  border-radius:var(--radius-lg);padding:var(--space-6);
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;gap:var(--space-3);
}
a.card{text-decoration:none;color:inherit;transition:border-color .18s ease,box-shadow .18s ease}
a.card:hover{border-color:var(--orange-300);box-shadow:var(--shadow-lift)}
.card-icon{
  width:44px;height:44px;border-radius:var(--radius-md);
  background:var(--orange-100);color:var(--orange-700);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.card-icon svg{width:22px;height:22px}
.card h3{color:var(--ink-900)}
.card p{font-size:var(--t-small);color:var(--ink-700)}
.card--lead{border-color:var(--orange-300);border-width:2px}
.card-tag{
  align-self:flex-start;font-size:var(--t-micro);font-weight:600;
  background:var(--amber-100);color:var(--amber-700);
  padding:2px var(--space-2);border-radius:var(--radius-sm);
}

/* ── Process ─────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);list-style:none;margin:0;padding:0}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{display:flex;flex-direction:column;gap:var(--space-2)}
.step-n{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-micro);font-weight:600;
  background:var(--ink-100);color:var(--ink-700);
}
.step:first-child .step-n{background:var(--amber-500);color:var(--ink-900)}
.step h3{font-size:var(--t-h4)}
.step p{font-size:var(--t-small);color:var(--ink-700)}

/* ── FAQ ─────────────────────────────────────────────── */
.faq{border-top:1px solid var(--ink-100)}
.faq-item{border-bottom:1px solid var(--ink-100)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  background:none;border:0;padding:var(--space-5) 0;cursor:pointer;
  font-family:var(--font-ui);font-size:var(--t-h4);font-weight:600;color:var(--ink-900);
  text-align:left;line-height:1.4;
}
.faq-mark{flex-shrink:0;width:20px;height:20px;position:relative}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;background:var(--orange-700);
  left:50%;top:50%;transform:translate(-50%,-50%)}
.faq-mark::before{width:14px;height:2px}
.faq-mark::after{width:2px;height:14px;transition:opacity .18s ease}
.faq-q[aria-expanded="true"] .faq-mark::after{opacity:0}
.faq-a{padding-bottom:var(--space-5);color:var(--ink-700);max-width:var(--measure)}
.faq-a[hidden]{display:none}

/* ── Booking panel ───────────────────────────────────── */
.booking{border-radius:var(--radius-xl);padding:var(--space-9) var(--space-8)}
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start}
@media(max-width:900px){.booking-grid{grid-template-columns:1fr}.booking{padding:var(--space-7) var(--space-5)}}
.contact-list{list-style:none;margin:var(--space-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.contact-list a{color:#fff;text-decoration:none;font-size:var(--t-small)}
.contact-list a:hover{color:var(--orange-300)}
.contact-label{display:block;font-size:var(--t-micro);color:var(--ink-300);margin-bottom:2px}

/* ── Forms ───────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font-size:var(--t-micro);font-weight:500;color:var(--ink-700)}
.section--dark .field label{color:var(--ink-300)}
.field input,.field textarea,.field select{
  min-height:46px;padding:var(--space-3) var(--space-4);
  border:1px solid var(--ink-300);border-radius:var(--radius-md);
  font-family:var(--font-ui);font-size:var(--t-small);
  background:var(--surface);color:var(--ink-900);width:100%;
}
.field textarea{min-height:110px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--orange-700);box-shadow:0 0 0 3px var(--orange-100);
}
.consent{display:flex;gap:var(--space-3);align-items:flex-start}
.consent input{width:18px;height:18px;min-height:0;flex-shrink:0;margin-top:3px}
.consent label{font-size:var(--t-micro);line-height:1.5}
.form-note{font-size:var(--t-micro);color:var(--ink-300);margin-top:var(--space-3)}

/* ── Footer ──────────────────────────────────────────── */
.site-footer{background:var(--surface-dark);color:#fff;padding-block:var(--space-9) var(--space-6)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-7)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-desc{font-size:var(--t-small);color:var(--ink-300);max-width:34ch;margin-top:var(--space-3)}
.footer-brand-name{font-family:var(--font-display);font-size:1.25rem;color:#fff}
.footer-col h3{font-size:var(--t-micro);font-weight:600;color:#fff;margin-bottom:var(--space-4);
  letter-spacing:.06em;text-transform:uppercase}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.footer-col a{color:var(--ink-300);text-decoration:none;font-size:var(--t-small)}
.footer-col a:hover{color:#fff}
.footer-addr{font-style:normal;font-size:var(--t-small);color:var(--ink-300);line-height:1.7}
.footer-bottom{
  margin-top:var(--space-8);padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);
  align-items:center;font-size:var(--t-micro);color:var(--ink-300);
}
.footer-bottom a{color:var(--ink-300);text-decoration:none}
.footer-bottom a:hover{color:#fff}
.footer-uen{font-variant-numeric:tabular-nums}

/* ── WhatsApp float — must never overlap a form field ── */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:90;
  display:flex;align-items:center;gap:var(--space-2);
  background:var(--ink-900);color:#fff;text-decoration:none;
  padding:var(--space-3) var(--space-4);border-radius:999px;
  font-size:var(--t-small);font-weight:600;box-shadow:var(--shadow-lift);
}
.wa-float:hover{color:#fff;background:#000}
.wa-float svg{width:18px;height:18px;flex-shrink:0}
@media(max-width:768px){
  .wa-float{right:12px;bottom:12px;padding:var(--space-3)}
  .wa-float .wa-label{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── Brand lockup ────────────────────────────────────── */
.brand-mark{height:32px;width:auto;flex-shrink:0}
.footer-brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-1)}
.footer-brand .brand-mark{height:30px}

/* ── Credential marks — real logos, one render each ──── */
.cred-marks li{display:flex;align-items:center}
.cred-marks li{
  display:flex;align-items:center;justify-content:center;
  height:44px;                 /* one optical band for every mark */
}
.cred-marks img{
  max-height:100%;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1);opacity:.72;
  transition:filter .18s ease,opacity .18s ease;
}
/* CSIS is a stacked lockup and reads small at a shared height; ACRA is wide. */
.cred-marks img[alt*="Chartered Secretaries"]{max-height:112%}
.cred-marks img[alt*="Corporate Regulatory"]{max-height:86%}
.cred-marks img[alt*="Chartered Certified"]{max-height:74%}
.cred-group:hover .cred-marks img,
.cred-marks img:hover{filter:grayscale(0);opacity:1}
@media(prefers-reduced-motion:reduce){.cred-marks img{transition:none}}

/* ── Service card media ──────────────────────────────── */
.card-media{
  margin:calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  overflow:hidden;aspect-ratio:16/9;max-width:100%;
}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card--media{padding-top:0;overflow:hidden}
.card--media .card-icon{margin-top:var(--space-6)}

/* ── Feature band — image beside copy ────────────────── */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
.feature--flip .feature-media{order:2}
@media(max-width:900px){.feature{grid-template-columns:1fr;gap:var(--space-6)}.feature--flip .feature-media{order:0}}
.feature-media{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/3;max-width:100%}
.feature-media img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Service page ────────────────────────────────────── */
.disclosure{
  margin-top:var(--space-5);padding:var(--space-4) var(--space-5);
  background:var(--amber-100);border:1px solid var(--amber-300);
  border-radius:var(--radius-md);
  font-size:var(--t-small);color:var(--ink-900);max-width:var(--measure);
}
.tick-list{
  list-style:none;margin:var(--space-5) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3) var(--space-5);
  max-width:none;
}
@media(max-width:768px){.tick-list{grid-template-columns:1fr}}
.tick-list li{
  position:relative;padding-left:var(--space-6);
  font-size:var(--t-small);color:var(--ink-700);line-height:1.55;
}
.tick-list li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:10px;height:6px;border-left:2px solid var(--orange-700);
  border-bottom:2px solid var(--orange-700);transform:rotate(-45deg);
}
.measure .tick-list{grid-template-columns:1fr}
.hero .feature-media{aspect-ratio:4/3}

/* ── Motion ──────────────────────────────────────────────────────────
   One orchestrated moment: the hero settles on load, and the engagement
   panel's bars fill to show the sequence the copy describes.
   Nothing animates on scroll — DESIGN_DIRECTION.md is explicit about that.
   Everything below is disabled under prefers-reduced-motion.            */

@media (prefers-reduced-motion: no-preference){

  /* Hero entrance — content is visible at rest and settles into place,
     never parked at opacity:0 waiting on JS. */
  .js-motion .hero h1,
  .js-motion .hero .lede,
  .js-motion .hero .credential-line,
  .js-motion .hero .btn-row,
  .js-motion .hero .disclosure{
    opacity:0;transform:translateY(10px);
    animation:accorp-rise .55s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .js-motion .hero h1{animation-delay:.04s}
  .js-motion .hero .lede{animation-delay:.12s}
  .js-motion .hero .credential-line{animation-delay:.20s}
  .js-motion .hero .disclosure{animation-delay:.20s}
  .js-motion .hero .btn-row{animation-delay:.28s}

  .js-motion .hero-panel,
  .js-motion .hero .feature-media{
    opacity:0;transform:translateY(14px) scale(.985);
    animation:accorp-panel .7s cubic-bezier(.22,.61,.36,1) .18s forwards;
  }

  /* The panel bars fill in sequence — the engagement progressing. */
  .js-motion .panel-bar i{
    transform-origin:left center;transform:scaleX(0);
    animation:accorp-fill .8s cubic-bezier(.33,1,.68,1) forwards;
  }
  .js-motion .panel-row:nth-child(1) .panel-bar i{animation-delay:.55s}
  .js-motion .panel-row:nth-child(2) .panel-bar i{animation-delay:.70s}
  .js-motion .panel-row:nth-child(3) .panel-bar i{animation-delay:.85s}
  .js-motion .panel-row:nth-child(4) .panel-bar i{animation-delay:1.0s}

  @keyframes accorp-rise{to{opacity:1;transform:none}}
  @keyframes accorp-panel{to{opacity:1;transform:none}}
  @keyframes accorp-fill{to{transform:scaleX(1)}}

  /* Interaction feedback — response to a person's action, not ambience. */
  a.card{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
  a.card:hover{transform:translateY(-2px)}
  .btn{transition:background-color .18s ease,border-color .18s ease,transform .12s ease}
  .btn:active{transform:translateY(1px)}
  .faq-a{animation:accorp-open .22s ease}
  @keyframes accorp-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .wa-float{transition:transform .18s ease,background-color .18s ease}
  .wa-float:hover{transform:translateY(-2px)}
}

/* ── Process steps: sequential light-up ──────────────────────────────
   The one place numbered markers are legitimate — the content really is
   a sequence. Each marker lights amber in turn, with a connecting rule
   drawing between them, so the eye reads 1 -> 2 -> 3 -> 4.
   Runs once when the section is reached; never loops.                  */

.steps{counter-reset:step;position:relative}
.step{position:relative}

/* connector between markers, desktop only */
@media(min-width:901px){
  .step::after{
    content:"";position:absolute;top:16px;left:calc(32px + var(--space-2));
    right:calc(var(--space-5) * -1 + var(--space-2));
    height:2px;background:var(--ink-100);
  }
  .step:last-child::after{display:none}
  .step::before{
    content:"";position:absolute;top:16px;left:calc(32px + var(--space-2));
    right:calc(var(--space-5) * -1 + var(--space-2));
    height:2px;background:var(--amber-500);
    transform:scaleX(0);transform-origin:left center;z-index:1;
  }
  .step:last-child::before{display:none}
}

.step-n{
  transition:background-color .35s ease,color .35s ease,transform .35s ease;
  will-change:background-color;
}

@media (prefers-reduced-motion: no-preference){
  /* Resting state while the sequence is armed: all markers neutral,
     including step 1, which is amber by default. */
  .js-motion .steps[data-seq="armed"] .step .step-n,
  .js-motion .steps[data-seq="armed"] .step:first-child .step-n{
    background:var(--ink-100);color:var(--ink-700);
  }

  /* Lit state. Matches the armed selectors' specificity so source order wins. */
  .js-motion .steps[data-seq="armed"] .step.is-lit .step-n,
  .js-motion .steps[data-seq="armed"] .step:first-child.is-lit .step-n{
    background:var(--amber-500);color:var(--ink-900);
    animation:accorp-pop .4s cubic-bezier(.34,1.56,.64,1);
  }
  .js-motion .step.is-lit::before{
    transform:scaleX(1);
    transition:transform .45s cubic-bezier(.33,1,.68,1);
  }

  @keyframes accorp-pop{
    0%{transform:scale(1)}
    45%{transform:scale(1.18)}
    100%{transform:scale(1)}
  }
}

/* Without JS or with reduced motion, step 1 stays amber as before and the
   connectors sit inert — the section reads exactly as it does today. */

/* ── Interaction feedback: response to what the visitor does ─────────
   Three additions only. Nothing here animates on its own.
   The process-step sequence above is unchanged.                       */

/* 1. Service card icon — confirms the whole card is the target,
      not just the heading. */
.card-icon{transition:background-color .18s ease,color .18s ease}
a.card:hover .card-icon{background:var(--orange-300);color:var(--orange-900)}

/* 2. FAQ rows — they read as plain text today, so the affordance is
      invisible until you hover. */
.faq-q{transition:color .15s ease}
.faq-q:hover{color:var(--orange-700)}
.faq-item{transition:background-color .15s ease}
.faq-item:hover{background:var(--orange-050)}
.section--alt .faq-item:hover{background:var(--surface)}
.faq-mark::before,.faq-mark::after{transition:background-color .15s ease}
.faq-q:hover .faq-mark::before,
.faq-q:hover .faq-mark::after{background:var(--orange-800)}

/* 3. Form fields — the label follows focus, so you can see where you are
      without hunting for the caret. */
.field label{transition:color .15s ease}
.field:focus-within label{color:var(--orange-700)}
.section--dark .field:focus-within label{color:var(--orange-300)}

@media(prefers-reduced-motion:reduce){
  .card-icon,.faq-q,.faq-item,.field label,
  .faq-mark::before,.faq-mark::after{transition:none}
}

/* ── Typography standardisation ──────────────────────────────────────
   Owner decision 2026-09-13: keep the system stack, apply it everywhere.
   These rules catch content that does NOT come from a theme template —
   WordPress editor output, plugin markup, Gravity Forms — so every page
   reads identically rather than only the hand-built ones.                */

/* Editor / plugin content inherits the same scale as template content. */
.entry-content,
.entry-content p,
.entry-content li,
.gform_wrapper,
.tablepress{
  font-family:var(--font-ui);
  font-size:var(--t-body);
  line-height:1.65;
  color:var(--ink-900);
}
.entry-content h1,.entry-content h2,
.gform_wrapper h2,.gform_wrapper h3{font-family:var(--font-display);font-weight:400}
.entry-content h3,.entry-content h4,
.entry-content h5,.entry-content h6{font-family:var(--font-ui);font-weight:600}

.entry-content h2{font-size:var(--t-h2);line-height:1.15;margin:var(--space-8) 0 var(--space-4)}
.entry-content h3{font-size:var(--t-h3);line-height:1.3;margin:var(--space-6) 0 var(--space-3)}
.entry-content h4{font-size:var(--t-h4);margin:var(--space-5) 0 var(--space-2)}
.entry-content p,
.entry-content ul,
.entry-content ol{margin:0 0 var(--space-4);max-width:var(--measure)}
.entry-content ul,.entry-content ol{padding-left:var(--space-5)}
.entry-content li{margin-bottom:var(--space-2)}
.entry-content a{color:var(--orange-700);text-underline-offset:2px}
.entry-content strong{font-weight:600}
.entry-content blockquote{
  margin:var(--space-6) 0;padding-left:var(--space-5);
  border-left:3px solid var(--orange-300);
  font-family:var(--font-display);font-size:1.25rem;line-height:1.4;color:var(--ink-700);
}
.entry-content img{border-radius:var(--radius-lg);margin-block:var(--space-5)}
.entry-content table{
  width:100%;border-collapse:collapse;margin-block:var(--space-5);
  font-size:var(--t-small);font-variant-numeric:tabular-nums;
}
.entry-content th,.entry-content td{
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--ink-100);text-align:left;
}
.entry-content th{font-weight:600;color:var(--ink-900)}
.entry-content code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9em;background:var(--surface-alt);padding:2px 5px;border-radius:var(--radius-sm);
}

/* Article / page header shared by every non-template page. */
.page-head{padding-block:var(--space-9) var(--space-6)}
.page-head h1{margin-bottom:var(--space-4)}
.page-head .lede{margin-top:var(--space-4)}

/* Gravity Forms inherits the theme's field styling rather than its own. */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea,
.gform_wrapper select{
  min-height:46px;padding:var(--space-3) var(--space-4);
  border:1px solid var(--ink-300);border-radius:var(--radius-md);
  font-family:var(--font-ui);font-size:var(--t-small);
  background:var(--surface);color:var(--ink-900);width:100%;
}
.gform_wrapper label{font-size:var(--t-micro);font-weight:500;color:var(--ink-700)}
.gform_wrapper .gform_button{
  min-height:46px;padding:0 var(--space-5);border:0;
  border-radius:var(--radius-md);cursor:pointer;
  background:var(--orange-500);color:var(--ink-900);
  font-family:var(--font-ui);font-size:var(--t-small);font-weight:600;
}
.gform_wrapper .gform_button:hover{background:var(--orange-600)}

/* ── Services hub: supporting sections ───────────────────────────────
   Each service is a bordered panel, not a run of text separated by hairlines.
   Left column carries the identity and the action; right carries the scope.
   The panel edge is what separates them, so spacing cannot collapse the way
   sibling margins did.                                                     */

.hub-sections{
  display:flex;flex-direction:column;
  gap:var(--space-6);
  margin-top:var(--space-8);
}

.hub-section{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--space-8);
  padding:var(--space-8);
  background:var(--surface);
  border:1px solid var(--ink-100);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  scroll-margin-top:calc(var(--header-h) + var(--space-5));
}
.section--alt .hub-section{background:var(--surface-alt);border-color:var(--ink-100)}

@media(max-width:900px){
  .hub-section{
    grid-template-columns:1fr;
    gap:var(--space-6);
    padding:var(--space-6);
  }
}

/* Left: index, name, proposition, action. */
.hub-section-rail{align-self:start;display:flex;flex-direction:column}
.hub-section-index{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--amber-100);color:var(--amber-700);
  font-size:var(--t-micro);font-weight:600;
  font-variant-numeric:tabular-nums;
  margin-bottom:var(--space-4);
}
.hub-section h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.5rem,2.2vw,1.75rem);line-height:1.15;letter-spacing:-.015em;
  margin:0 0 var(--space-3);
}
.hub-section-rail > p{
  color:var(--ink-700);font-size:var(--t-small);line-height:1.65;
  margin:0 0 var(--space-5);
}
/* The link follows the text rather than being pushed to the panel floor —
   margin-top:auto left a void under it whenever the scope list was the
   taller column. */
.hub-section-cta{
  align-self:flex-start;
  display:inline-flex;align-items:center;min-height:40px;
  font-size:var(--t-small);font-weight:600;
  color:var(--orange-700);text-decoration:none;
  border-bottom:1px solid var(--orange-300);
}
.hub-section-cta:hover{color:var(--orange-800);border-bottom-color:var(--orange-700)}

/* Right: the scope list. */
.hub-section-body{min-width:0}
.hub-scope-label{
  font-size:var(--t-micro);font-weight:600;color:var(--ink-500);
  margin:0 0 var(--space-4);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--ink-100);
}
.hub-section .tick-list{
  grid-template-columns:1fr;
  gap:var(--space-3);
  margin:0;
}
.hub-section .tick-list li{font-size:var(--t-small);line-height:1.6}

.hub-note{
  margin-top:var(--space-5);padding:var(--space-4) var(--space-5);
  background:var(--surface-alt);border-radius:var(--radius-md);
  font-size:var(--t-micro);line-height:1.65;color:var(--ink-700);max-width:none;
}
.section--alt .hub-note{background:var(--surface)}

/* ── Contact page ────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-9)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:var(--space-7)}}
.contact-aside{
  background:var(--surface-alt);border-radius:var(--radius-xl);
  padding:var(--space-7);align-self:start;
}
.contact-aside h2{font-size:var(--t-h3);font-family:var(--font-ui);font-weight:600}
.contact-addr{font-style:normal;color:var(--ink-700);line-height:1.7;margin-top:var(--space-4)}

.detail-list{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3) var(--space-5);margin:var(--space-5) 0 0}
.detail-list dt{font-size:var(--t-micro);font-weight:500;color:var(--ink-500)}
.detail-list dd{margin:0;font-size:var(--t-small);color:var(--ink-900)}
@media(max-width:480px){.detail-list{grid-template-columns:1fr;gap:var(--space-1)}
  .detail-list dd{margin-bottom:var(--space-3)}}

/* Honeypot: removed from view and from the accessibility tree, but still
   present in the DOM so bots fill it in. Never display:none — some bots
   skip hidden fields. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.notice{
  padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);
  margin-bottom:var(--space-6);font-size:var(--t-small);max-width:var(--measure);
}
.notice--ok{background:var(--amber-100);border:1px solid var(--amber-300);color:var(--ink-900)}
.notice--error{background:#FDECEA;border:1px solid #F3B4AE;color:var(--ink-900)}

/* ── Legal pages ─────────────────────────────────────── */
.legal{max-width:72ch}
.legal h2{font-size:1.5rem;margin:var(--space-8) 0 var(--space-3)}
.legal h3{font-size:var(--t-h4);margin:var(--space-6) 0 var(--space-2)}
.legal p,.legal li{color:var(--ink-700);font-size:var(--t-small);line-height:1.7}
.legal p{margin-bottom:var(--space-4)}
.legal ul{margin:0 0 var(--space-4);padding-left:var(--space-5)}
.legal li{margin-bottom:var(--space-2)}
.legal-updated{font-size:var(--t-micro);color:var(--ink-500);margin-bottom:var(--space-6)}

/* ── Select: match the text inputs exactly ───────────────────────────
   Browsers style <select> with their own chrome, so height, padding and
   type would drift from the inputs beside it. Reset it and draw one
   chevron, so the field row reads as one set.                          */
.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:calc(var(--space-4) + 22px);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236E6862' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--space-4) center;
  cursor:pointer;
  line-height:1.4;
  text-overflow:ellipsis;
}
.field select:invalid{color:var(--ink-500)}          /* the "Please choose" state */
.field select option{color:var(--ink-900)}
.field select option[value=""]{color:var(--ink-500)}

/* Inside the dark booking panel the chevron needs to read on white too —
   the control itself stays white, so the same chevron works. */
.section--dark .field select{background-color:var(--surface)}


/* ── Vertical rhythm ─────────────────────────────────────────────────
   Headings shipped with margin:0 and were being spaced by per-element
   inline styles, which meant any block without one sat flush against
   the text below it. Measured at 0px across 40 instances on 13 pages.

   Spacing now belongs to the relationship between elements, not to
   whichever element happened to get an inline style.                   */

/* A heading followed by prose, a list or a grid always gets air. */
h2 + p, h2 + .lede, h2 + ul, h2 + ol, h2 + .card-grid,
h2 + .faq, h2 + .steps, h2 + .tick-list, h2 + .detail-list,
h2 + .cred-groups, h2 + .booking-grid, h2 + form{
  margin-top:var(--space-4);
}
h3 + p, h3 + .lede, h3 + ul, h3 + ol, h3 + .tick-list{
  margin-top:var(--space-3);
}
.kicker + h1, .kicker + h2, .kicker + h3{margin-top:0}

/* Section intros: heading, then lede, then whatever follows. */
.section > .container > h2 + .lede,
.page-head h1 + .lede{margin-top:var(--space-4)}
.lede + .card-grid, .lede + .steps, .lede + .faq,
.lede + .tick-list, .lede + .hub-section, .lede + .btn-row{
  margin-top:var(--space-7);
}

/* FAQ answers sit under their question button, which is a flex child. */
.faq-q + .faq-a{margin-top:0}

/* Booking panel: the heading and lede need the same rhythm on dark. */
.booking h2 + .lede{margin-top:var(--space-4)}
.booking .lede + .contact-list{margin-top:var(--space-6)}

/* Consent checkbox: the label is the tap target, so give the row height
   even though the box itself is 18px. */
.consent{min-height:44px;align-items:center}
.consent label{padding-block:var(--space-2)}

/* ── Insights index ──────────────────────────────────────────────────
   A date rail beside each entry rather than a grid of identical cards.
   The list is short and the dates matter, so a reading list beats tiles. */
.insight-list{display:flex;flex-direction:column;margin-top:var(--space-7)}
.insight{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:var(--space-7);
  padding-block:var(--space-7);
  border-top:1px solid var(--ink-100);
}
.insight:last-child{border-bottom:1px solid var(--ink-100)}
@media(max-width:768px){
  .insight{grid-template-columns:1fr;gap:var(--space-3);padding-block:var(--space-6)}
}
.insight-meta time{
  font-size:var(--t-micro);font-weight:500;color:var(--ink-500);
  font-variant-numeric:tabular-nums;
}
.insight-body h2{
  font-size:clamp(1.375rem,2.2vw,1.625rem);line-height:1.2;
  margin-bottom:var(--space-3);
}
.insight-body h2 a{color:var(--ink-900);text-decoration:none}
.insight-body h2 a:hover{color:var(--orange-700)}
.insight-body p{color:var(--ink-700);font-size:var(--t-small);line-height:1.65;max-width:var(--measure)}
.insight-more{
  /* Padded to a 44px tap target without moving the underline: the extra
     height is inside the box, and the rule is drawn on a pseudo-element at
     the text baseline rather than on the element edge. */
  display:inline-flex;align-items:center;
  min-height:44px;margin-top:var(--space-2);
  font-size:var(--t-small);font-weight:600;color:var(--orange-700);
  text-decoration:underline;text-decoration-color:var(--orange-300);
  text-underline-offset:4px;text-decoration-thickness:1px;
}
.insight-more:hover{color:var(--orange-800);text-decoration-color:var(--orange-700)}

/* -- Masthead --------------------------------------------------------
   One component for every page that is not a service page. Headline over a
   full-bleed image band; the band collapses to flat ink when no image is
   set, so utility pages (Terms, Privacy) share the type and spacing without
   carrying a photo they do not need.

   The image is a real <img> in its own element rather than a CSS
   background, so the browser treats it as an LCP candidate and
   fetchpriority applies. The scrim above it is weighted to the left where
   the text sits, leaving the right of the photograph visible instead of
   flattened to grey. */
.masthead{
  position:relative;isolation:isolate;
  background:var(--surface-dark);color:#fff;
  padding-block:var(--space-10) var(--space-9);
  overflow:hidden;
}
.masthead--lg{padding-block:var(--space-11) var(--space-10)}

.masthead-bg{position:absolute;inset:0;z-index:-2}
.masthead-bg img{width:100%;height:100%;object-fit:cover;display:block}

/* Contrast is measured against the lightest point the headline can sit
   over, not the average of the image. */
.masthead--image::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(8,8,8,.94) 0%,
      rgba(8,8,8,.89) 38%,
      rgba(8,8,8,.66) 72%,
      rgba(8,8,8,.54) 100%),
    linear-gradient(180deg,
      rgba(8,8,8,0) 30%,
      rgba(8,8,8,.30) 100%);
}
/* A low warm wash in the top shadows keeps the band from reading as a
   neutral stock-photo overlay. */
.masthead--image::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(233,104,36,.12),rgba(233,104,36,0) 58%);
  mix-blend-mode:screen;
}

.masthead-inner{position:relative}
.masthead h1{color:#fff;max-width:19ch;margin:0;text-wrap:balance}
.masthead--lg h1{max-width:16ch}
.masthead-lede{
  margin-top:var(--space-5);max-width:58ch;
  color:rgba(255,255,255,.93);
  font-size:1.125rem;line-height:1.6;
}
.masthead-meta{
  margin-top:var(--space-4);
  display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:center;
  color:rgba(255,255,255,.88);
  font-family:var(--font-ui);font-size:var(--t-small);
}
.masthead-meta a{color:var(--orange-300);text-decoration:none}
.masthead-meta a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.masthead-meta .sep{color:rgba(255,255,255,.34)}
.masthead-actions{margin-top:var(--space-7)}
/* The outlined button is drawn for light grounds; on the band it needs a
   light edge or it vanishes into the photograph. */
.masthead .btn--secondary{
  border-color:rgba(255,255,255,.45);color:#fff;background:transparent;
}
.masthead .btn--secondary:hover{border-color:#fff;background:rgba(255,255,255,.10)}

/* -- Single article --------------------------------------------------
   The body was max-width:72ch inside a wide container with no centring, so
   at 1440px the text sat left with ~636px of dead white beside it. The
   column is centred now, and that space carries a contents rail where the
   viewport is wide enough to hold one. */
.article-head{max-width:72ch}
.article-head .kicker{display:flex;gap:var(--space-2);align-items:center}
.article-head .kicker a{color:var(--orange-700);text-decoration:none}

.article-figure{margin:0}
.article-figure img{display:block;width:100%;height:auto;border-radius:var(--radius-xl)}
.article-figure figcaption{
  margin-top:var(--space-3);
  font-family:var(--font-ui);font-size:var(--t-micro);color:var(--ink-500);
}

.article-layout{
  display:grid;grid-template-columns:minmax(0,72ch);
  gap:var(--space-8);
  width:fit-content;max-width:100%;
  margin-inline:auto;
}
/* Single column: contents first (it is a contents list, so it belongs above
   what it lists), then the article, then the closing panel. Explicit order
   stops the three from being stacked in source order in one cell. */
@media (max-width:1179px){
  .article-layout > .article-rail{order:1;margin-bottom:var(--space-2)}
  .article-layout > .article-body{order:2}
  .article-layout > .article-cta{order:3}
  /* The rail's own CTA duplicates the closing panel on one column. */
  .article-rail-cta{display:none}
}
.article-body{max-width:72ch;min-width:0}

/* The rail appears only where there is real room beside the measure.
   Below that the article is one centred column, which is the correct
   reading layout rather than a degraded one. */
@media (min-width:1180px){
  .article-layout{
    grid-template-columns:minmax(0,72ch) 17rem;
    align-items:start;
  }
}
/* Sticky ONLY where the rail has a column of its own. In the single-column
   layout it shares a cell with the closing panel, and a sticky element there
   detaches and lands on top of it — the overlap reported on iPhone. */
.article-rail{align-self:start;font-family:var(--font-ui)}
@media (min-width:1180px){
  .article-rail{position:sticky;top:6rem}
}
.article-toc-label{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-500);margin:0 0 var(--space-3);
}
.article-toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.article-toc a{
  display:block;padding:var(--space-2) 0 var(--space-2) var(--space-4);
  border-left:1px solid var(--ink-100);
  color:var(--ink-700);text-decoration:none;
  font-size:var(--t-small);line-height:1.45;
  transition:color .18s ease,border-color .18s ease;
}
.article-toc a:hover{color:var(--orange-700);border-left-color:var(--orange-300)}
.article-toc a[aria-current="true"]{
  color:var(--ink-900);font-weight:600;border-left-color:var(--orange-500);
}
.article-rail-cta{
  margin-top:var(--space-7);padding-top:var(--space-5);
  border-top:1px solid var(--ink-100);
}
.article-rail-cta p{font-size:var(--t-small);color:var(--ink-700);margin:0 0 var(--space-4)}

/* Timeline. The ACRA piece carried its review dates as a plain bullet
   list, which buried the thing a reader scans for: where the process has
   got to. As a sequence the shape is legible before the words are. */
.timeline{list-style:none;margin:var(--space-6) 0 0;padding:0;position:relative}
.timeline::before{
  content:"";position:absolute;left:5px;top:8px;bottom:8px;
  width:1px;background:var(--ink-100);
}
.timeline li{position:relative;padding-left:var(--space-6);padding-bottom:var(--space-5)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:0;top:5px;
  width:11px;height:11px;border-radius:50%;
  background:var(--surface);border:2px solid var(--ink-300);
}
.timeline li[data-state="done"]::before{background:var(--orange-500);border-color:var(--orange-500)}
.timeline li[data-state="now"]::before{
  background:var(--surface);border-color:var(--orange-500);
  box-shadow:0 0 0 4px var(--orange-100);
}
.timeline-date{
  display:block;font-family:var(--font-ui);
  font-size:var(--t-small);font-weight:600;color:var(--ink-900);
}
.timeline-what{
  display:block;margin-top:2px;
  font-family:var(--font-ui);font-size:var(--t-small);color:var(--ink-700);
}
.timeline li[data-state="pending"] .timeline-date{color:var(--ink-500)}

/* Scenario list. "What this means for you" is four conditional cases; as
   running paragraphs the condition and its consequence ran together. */
.entry-content .scenarios,
.entry-content .timeline{padding-left:0;list-style:none}
.entry-content .scenarios li,
.entry-content .timeline li{margin-bottom:0}

.scenarios{
  list-style:none;margin:var(--space-6) 0 0;padding:0;
  display:flex;flex-direction:column;gap:1px;
  background:var(--ink-100);
  border:1px solid var(--ink-100);border-radius:var(--radius-lg);overflow:hidden;
}
.scenarios li{background:var(--surface);padding:var(--space-5) var(--space-6)}
.scenario-if{
  display:block;font-family:var(--font-ui);
  font-size:var(--t-small);font-weight:600;color:var(--ink-900);
  margin-bottom:var(--space-2);
}
.scenario-then{display:block;font-size:var(--t-small);line-height:1.6;color:var(--ink-700)}

.article-cta{
  max-width:72ch;margin-top:var(--space-9);
  padding:var(--space-7);
  background:var(--surface-alt);border-radius:var(--radius-xl);
}
/* Inside the reading grid it occupies the measure column, under the text it
   follows rather than under the whole spread. */
.article-layout > .article-cta{grid-column:1;margin-top:var(--space-9)}
.section--alt .article-cta{background:var(--surface)}
.article-cta h2{font-size:1.5rem;margin-bottom:var(--space-3)}
.article-cta p{color:var(--ink-700);font-size:var(--t-small);margin-bottom:var(--space-5);max-width:var(--measure)}

/* ── Careers ─────────────────────────────────────────────────────────  */
.career-note{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
}
.career-note h3{color:#fff;font-size:var(--t-h4);margin-bottom:var(--space-4)}
.career-note .tick-list li{color:var(--ink-300)}
.career-note .tick-list li::before{border-color:var(--amber-500)}


/* Available to screen readers and to search engines, not painted. */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Audit threshold check ───────────────────────────────────────────
   A tool, not a card: it takes input and returns a considered answer,
   so it gets a full panel and its own result surface.                  */
.tool{
  background:var(--surface-alt);
  border:1px solid var(--ink-100);
  border-radius:var(--radius-xl);
  padding:var(--space-8);
}
.section--alt .tool{background:var(--surface)}
@media(max-width:768px){.tool{padding:var(--space-6)}}

.tool-head{max-width:var(--measure);margin-bottom:var(--space-6)}
.tool-head h2{margin-bottom:var(--space-3)}
.tool-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media(max-width:700px){.tool-row-3{grid-template-columns:1fr}}
.tool-form .field{margin-bottom:var(--space-4)}
.tool-form .btn{margin-top:var(--space-2)}

.tool-result{
  margin-top:var(--space-6);padding:var(--space-6);
  background:var(--surface);border:1px solid var(--ink-100);
  border-radius:var(--radius-lg);
}
.section--alt .tool-result{background:var(--surface-alt)}
.tool-result[hidden]{display:none}

.tool-verdict{
  display:inline-flex;align-items:center;
  font-size:var(--t-micro);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--radius-sm);
  margin-bottom:var(--space-4);
}
.tool-verdict.is-likely{background:var(--amber-100);color:var(--amber-700)}
.tool-verdict.is-required{background:var(--orange-100);color:var(--orange-700)}
.tool-verdict.is-neutral{background:var(--ink-100);color:var(--ink-700)}

.tool-result h3{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin-bottom:var(--space-4)}

.tool-criteria{list-style:none;margin:0 0 var(--space-5);padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.tool-criteria li{display:flex;gap:var(--space-3);align-items:baseline;font-size:var(--t-small);color:var(--ink-700)}
.tool-mark{font-weight:700;width:16px;flex-shrink:0}
.tool-criteria .is-met .tool-mark{color:var(--amber-700)}
.tool-criteria .is-not .tool-mark{color:var(--ink-500)}
.tool-rule{color:var(--ink-500);font-size:var(--t-micro)}

.tool-result > p{font-size:var(--t-small);color:var(--ink-700);margin-bottom:var(--space-5);max-width:var(--measure)}

.tool-note{
  padding:var(--space-4) var(--space-5);margin-bottom:var(--space-4);
  background:var(--amber-100);border:1px solid var(--amber-300);
  border-radius:var(--radius-md);
  font-size:var(--t-small);line-height:1.6;color:var(--ink-900);
}
.tool-note--stop{background:var(--orange-100);border-left-color:var(--orange-500)}

.tool-disclaim{
  margin-top:var(--space-5);padding-top:var(--space-4);
  border-top:1px solid var(--ink-100);
  font-size:var(--t-micro);line-height:1.6;color:var(--ink-500);max-width:none;
}
.tool-disclaim a{color:var(--orange-700)}


/* ── Threshold check: capture step ───────────────────────────────────
   Appears only after a result, so it asks for details at the moment the
   visitor has just been given something useful.                        */
.tool-capture{
  margin-top:var(--space-6);padding-top:var(--space-6);
  border-top:1px solid var(--ink-100);
}
.tool-capture h4{
  font-family:var(--font-display);font-weight:400;
  font-size:1.25rem;line-height:1.25;margin-bottom:var(--space-3);
}
.tool-capture-note{
  font-size:var(--t-small);color:var(--ink-700);
  margin-bottom:var(--space-5);max-width:var(--measure);
}
.tool-capture-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media(max-width:600px){.tool-capture-row{grid-template-columns:1fr}}
.tool-capture-form .field{margin-bottom:var(--space-4)}
.tool-capture-alt{
  margin-top:var(--space-4);font-size:var(--t-micro);color:var(--ink-500);
}
.tool-capture-alt a{color:var(--orange-700)}


/* Anchor targets sit clear of the sticky header. */
#fee-estimate,#audit-threshold-check{scroll-margin-top:calc(var(--header-h) + var(--space-5))}


/* Form notes inherit the tool's full width without this — measured at 162
   characters, well past a readable line. */
.form-note,.tool-capture-note{max-width:var(--measure)}