/* ============================================================
   LegalPath UK — "Folio Cream & Terracotta" Design System
   Warm folio-cream ground · ivory claymorphic surfaces · clay accent
   Display: Fraunces (100–900) · Body/UI: Inter (300–800)
   Technical/metadata: JetBrains Mono (100–800)
   Fully light, tactile, editorial. No dark grounds anywhere.
   ============================================================ */
:root{
  /* ---- palette (authoritative spec) ---- */
  --ground:#F4EFE6;           /* Folio Ground — main page background (linen cream) */
  --ground-deep:#EDE7DA;      /* subtle deeper cream — tinted sections / footer */
  --ink:#1B2A44;              /* Folio Ink — primary text & bold icons */
  --clay:#D8825A;             /* Clay / Terracotta — primary accent & CTAs */
  --clay-deep:#9E5232;        /* Deep Clay — muted shading, inner gradients */
  --clay-soft:#F7E6D9;        /* clay tint — soft fills, badges, callouts */
  --clay-softer:#FBF0E7;      /* whisper clay — hover fills */
  --ivory:#FBF8F1;            /* Ivory / Glass Surface — card canvas */
  --clay-card-bg:#FAF7F0;     /* warm ivory — claymorphic card background */
  --blue-grey:#41506B;        /* Muted Blue-Gray — supporting icons & subtitles */
  --quiet:#616C82;            /* Quiet Gray — sub-labels, helper text */
  --bronze:#B08758;           /* Soft Bronze Gold — trust & stars */
  --sage:#5E7A6B;             /* Sage — success / verified */
  --sage-soft:#E7EEE9;
  --sage-border:#CFDDD3;

  --muted:#41506B;            /* secondary text = muted blue-grey */
  --border:rgba(27,42,68,.09);       /* card hairline — 9% ink */
  --border-strong:rgba(27,42,68,.16);
  --border-line:#E4DCCE;             /* solid warm hairline for rules */

  --good:#5E7A6B; --warning:#A85A34; --warning-soft:#F6E5DB; --warning-border:#EAD2C2;

  /* ---- type ---- */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* ---- shape ---- */
  --radius:16px; --radius-lg:22px; --radius-clay:28px; --radius-pill:9999px;

  /* ---- claymorphism: exact spec recipes ---- */
  /* card: outer drop + top-left white highlight + bottom-right ink pocket */
  --clay-card:
    0 20px 40px rgba(27,42,68,.08),
    inset 8px 8px 16px rgba(255,255,255,.95),
    inset -8px -8px 16px rgba(27,42,68,.06);
  --clay-card-hover:  /* pressed: softened, contracted outer shadow */
    0 12px 28px rgba(27,42,68,.06),
    inset 8px 8px 16px rgba(255,255,255,.95),
    inset -8px -8px 16px rgba(27,42,68,.06);
  /* primary button: clay ambient glow + white shine + black pocket */
  --clay-btn-p:
    0 12px 24px rgba(216,130,90,.25),
    inset 4px 4px 8px rgba(255,255,255,.4),
    inset -4px -4px 8px rgba(0,0,0,.15);
  --clay-btn-p-hover:
    0 8px 18px rgba(216,130,90,.28),
    inset 4px 4px 8px rgba(255,255,255,.4),
    inset -4px -4px 8px rgba(0,0,0,.15);
  /* secondary button: soft ink glow + white edge + ink pocket */
  --clay-btn-s:
    0 12px 24px rgba(27,42,68,.06),
    inset 4px 4px 8px rgba(255,255,255,.95),
    inset -4px -4px 8px rgba(27,42,68,.05);
  --clay-btn-s-hover:
    0 8px 18px rgba(27,42,68,.08),
    inset 4px 4px 8px rgba(255,255,255,.95),
    inset -4px -4px 8px rgba(27,42,68,.05);
  /* pill badge */
  --clay-pill:
    0 6px 12px rgba(27,42,68,.03),
    inset 2px 2px 4px rgba(255,255,255,.95),
    inset -2px -2px 4px rgba(27,42,68,.03);
  /* concave input pocket */
  --clay-inset:
    inset 4px 4px 8px rgba(27,42,68,.05),
    inset -4px -4px 8px rgba(255,255,255,.9);

  --maxw:1180px; --gutter:clamp(1.15rem,5vw,2rem);
  --header-h:70px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ground);
  scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*{-webkit-tap-highlight-color:transparent}
body{
  margin:0;font-family:var(--font-body);font-size:17.5px;line-height:1.68;font-weight:400;
  color:var(--ink);background:var(--ground);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--clay-soft);color:var(--clay-deep)}
:focus-visible{outline:2.5px solid var(--clay-deep);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;color:var(--ink);
  font-weight:600;letter-spacing:-.02em;margin:0 0 .55em;text-wrap:balance;
  font-variation-settings:'opsz' 60}
h1{font-size:clamp(2.3rem,7vw,3.8rem);font-weight:600;line-height:1.04;letter-spacing:-.03em}
h2{font-size:clamp(1.65rem,4.5vw,2.45rem);letter-spacing:-.025em}
h3{font-size:clamp(1.14rem,3vw,1.3rem);font-weight:600;letter-spacing:-.01em}
/* 2026-07-26 (audit D15): these component titles were promoted h3 -> h2 to
   remove h1->h3 outline skips on pricing, how-it-works, contact and thank-you.
   Outline level and type scale are independent concerns, so they keep the h3
   visual scale here — the rendered pages are pixel-identical to before. */
.price-card h2,.step-big h2,.aside-card h2{
  font-size:clamp(1.14rem,3vw,1.3rem);font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:var(--clay-deep);text-decoration:none;text-underline-offset:3px}
img,svg{max-width:100%}
ul{margin:0;padding:0;list-style:none}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:760px;margin-inline:auto}
/* left-anchor non-centered reading columns to the main container's left edge,
   so they line up with the full-width page-hero above (centered .narrow stays centered) */
.narrow:not(.center){margin-left:max(0px,calc((100% - var(--maxw)) / 2));margin-right:auto}
/* 2026-07-26 (audit B8): these blocks are deliberately left-anchored to the
   page-hero edge, but their section heads stayed centred on the 760px column —
   which read as off-centre against the full-width sections above and below.
   Left-aligning them makes the column read as an intentional editorial measure. */
.narrow:not(.center) .section-head{max-width:none;margin-left:0;margin-right:auto;text-align:left}
.narrow:not(.center) .section-head h2::after{margin-left:0}
.center{text-align:center}
.muted-lead{color:var(--muted)}
/* compressed vertical rhythm: 28–37px section padding */
.section{padding:clamp(1.75rem,3.4vw,2.3rem) 0}
.section-tint{background:linear-gradient(180deg,var(--ground),var(--ground-deep))}
.section-head{max-width:660px;margin:0 auto clamp(.9rem,2.2vw,1.4rem);text-align:center}
.section-head p{color:var(--muted);font-size:1.08rem}
.section-head h2::after{content:"";display:block;width:46px;height:3px;margin:1rem auto 0;
  background:linear-gradient(90deg,var(--clay),var(--clay-deep));border-radius:3px}
.eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;font-weight:500;color:var(--clay-deep);margin-bottom:.75rem}

/* ---- skip link ---- */
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;
  padding:.7rem 1rem;border-radius:0 0 var(--radius) 0;z-index:200}
.skip-link:focus{left:0}

/* ---- buttons (claymorphic) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-body);font-weight:600;font-size:.97rem;line-height:1;
  padding:.95rem 1.75rem;border-radius:var(--radius-pill);border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .25s ease,background .2s ease,border-color .2s ease,color .2s ease;
  text-decoration:none;min-height:48px;letter-spacing:.005em}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn svg{width:19px;height:19px;flex:none}
/* primary — clay terracotta */
.btn-accent{background:var(--clay-deep);color:#fff;font-weight:700;
  border-color:rgba(27,42,68,.15);box-shadow:var(--clay-btn-p)}
/* secondary — ivory cream */
.btn-outline{background:var(--clay-card-bg);color:var(--ink);
  border-color:rgba(27,42,68,.12);box-shadow:var(--clay-btn-s)}
/* ghost — used where secondary emphasis is wanted; treated as secondary on light */
.btn-ghost{background:var(--clay-card-bg);color:var(--ink);
  border-color:rgba(27,42,68,.12);box-shadow:var(--clay-btn-s)}
/* Green darkened 2026-07-26 (audit A2): #1FA855 measured 3.09:1 with white
   (needs 4.5:1). #10854A measures 4.69:1 and still reads as WhatsApp green. */
.btn-whatsapp{background:#10854A;color:#fff;border-color:rgba(0,0,0,.08);
  box-shadow:0 12px 24px rgba(31,168,85,.22),inset 4px 4px 8px rgba(255,255,255,.28),inset -4px -4px 8px rgba(0,0,0,.14)}
.btn-lg{padding:1.12rem 2.1rem;font-size:1.04rem}
.btn-sm{padding:.6rem 1.25rem;font-size:.89rem;min-height:42px}
.btn-block{display:flex;width:100%}
.btn-outline svg{width:19px;height:19px}

/* ---- header (light frosted cream) ---- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(244,239,230,.82);
  backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--border);transition:box-shadow .25s ease,background .25s ease}
.site-header.scrolled{box-shadow:0 1px 0 var(--border),0 12px 30px -14px rgba(27,42,68,.16);
  background:rgba(244,239,230,.94)}
.header-inner{display:flex;align-items:center;gap:1rem;min-height:var(--header-h);position:relative}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);
  font-weight:600;font-size:1.22rem;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:url(../img/logo-mark.png?v=20260726e) center 46%/138% no-repeat,var(--clay-card-bg);
  box-shadow:0 6px 14px rgba(27,42,68,.16),0 1px 2px rgba(27,42,68,.12);
  transition:transform .25s ease}
.brand-mark svg{display:none}
.brand-text strong{color:var(--clay-deep);font-weight:600}
.nav-desktop{display:none;margin-left:auto;align-items:center;gap:.1rem}
.nav-link{font-family:var(--font-body);font-weight:600;font-size:.95rem;color:var(--ink);
  padding:.62rem .9rem;border-radius:var(--radius-pill);background:none;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;letter-spacing:.005em;
  transition:background .2s ease,color .2s ease}
.caret{width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  border-top:5.5px solid currentColor;opacity:.55;transition:transform .2s}
/* :focus-within stays unguarded — it is the keyboard path into the mega menu
   and must work on every device. The :hover half lives in the hover-capable
   media query at the end of this file (audit D13). */
.has-mega:focus-within .caret{transform:rotate(180deg)}
.header-cta{display:none;margin-left:.4rem}
.hamburger{margin-left:auto;width:46px;height:46px;border:1px solid rgba(27,42,68,.12);
  background:var(--clay-card-bg);border-radius:13px;display:grid;place-content:center;gap:5px;cursor:pointer;padding:0;
  box-shadow:var(--clay-btn-s)}
.hamburger span{display:block;width:20px;height:2px;background:var(--ink);
  border-radius:2px;transition:transform .25s,opacity .2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mega menu (desktop) — claymorphic ivory */
.has-mega{position:static}
.mega{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%) translateY(8px);
  width:min(92vw,960px);background:var(--clay-card-bg);border:1px solid var(--border);border-radius:var(--radius-clay);
  box-shadow:0 24px 50px rgba(27,42,68,.14),inset 6px 6px 14px rgba(255,255,255,.9),inset -6px -6px 14px rgba(27,42,68,.05);
  padding:1.6rem;opacity:0;visibility:hidden;
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.mega::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:var(--radius-clay) var(--radius-clay) 0 0;
  background:linear-gradient(90deg,var(--clay),var(--clay-deep) 55%,var(--clay))}
/* :focus-within (keyboard) and .open (JS toggle) stay unguarded; the :hover
   half is in the hover-capable media query at the end of this file. */
.has-mega:focus-within .mega,.mega.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;padding:0}
.mega-col{display:flex;flex-direction:column;gap:.12rem}
.mega-head{font-family:var(--font-mono);font-weight:500;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--clay-deep);margin-bottom:.45rem}
.mega-col a{padding:.42rem .55rem;border-radius:10px;color:var(--ink);font-size:.94rem;transition:background .18s,color .18s}
.mega-cta{background:linear-gradient(165deg,var(--clay-softer),var(--clay-soft));border:1px solid var(--border);
  border-radius:var(--radius);padding:1.05rem}
.mega-cta p{font-size:.9rem;color:var(--muted);margin:.2rem 0 .75rem}

/* mobile menu — full-screen light overlay, large touch targets */
.mobile-menu{position:fixed;inset:var(--header-h) 0 0;z-index:99;
  background-color:var(--ground);
  background-image:linear-gradient(180deg,var(--ground),var(--ground-deep));
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  animation:menuin .35s cubic-bezier(.16,1,.3,1)}
@keyframes menuin{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.mobile-menu-inner{padding:1.2rem var(--gutter) 1.8rem;display:flex;flex-direction:column;gap:.15rem}
.mobile-menu a{padding:1rem .4rem;font-family:var(--font-display);font-weight:500;font-size:1.22rem;
  color:var(--ink);border-bottom:1px solid var(--border);min-height:48px;display:flex;align-items:center}
.mobile-menu .btn{margin-top:1.4rem;border-bottom:none;font-family:var(--font-body);font-size:1rem;color:#fff}
.m-acc{border-bottom:1px solid var(--border)}
.m-acc summary{padding:1rem .4rem;font-family:var(--font-display);font-weight:500;font-size:1.22rem;color:var(--ink);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px}
.m-acc summary::-webkit-details-marker{display:none}
.m-acc summary::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--clay);
  border-bottom:1.5px solid var(--clay);transform:rotate(45deg);transition:transform .2s;margin-right:.3rem}
.m-acc[open] summary::after{transform:rotate(-135deg)}
.m-acc-body{display:flex;flex-direction:column;padding-left:.7rem;padding-bottom:.5rem}
.m-acc-body a{font-family:var(--font-body);font-size:.98rem;font-weight:500;padding:.7rem .4rem;
  color:var(--muted);border-bottom:1px solid var(--border)}

/* ---- hero (light, editorial) ---- */
.hero{position:relative;overflow:hidden;color:var(--ink);
  background:var(--ground)}
.hero-bg{position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(52% 60% at 88% 6%,rgba(216,130,90,.14),transparent 66%),
   radial-gradient(46% 55% at 2% 96%,rgba(65,80,107,.08),transparent 72%)}
.hero-inner{position:relative;display:grid;gap:1.8rem;
  padding:clamp(1.6rem,4.5vw,2.4rem) var(--gutter) clamp(1.6rem,4vw,2.2rem)}
.hero h1{color:var(--ink);margin-bottom:.65rem;font-variation-settings:'opsz' 120}
.hero .hl{font-style:italic;font-weight:500;color:var(--clay-deep);position:relative;white-space:nowrap}
.hero .hl::after{content:"";position:absolute;left:.02em;right:.05em;bottom:.02em;height:.06em;
  background:linear-gradient(90deg,var(--clay),rgba(216,130,90,.2));border-radius:2px;opacity:.85}
.lead{font-size:clamp(1.08rem,2.6vw,1.26rem);line-height:1.6}
.hero-copy{text-align:center}
.hero .lead{color:var(--muted);max-width:54ch;margin-inline:auto}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;margin:1.3rem 0 .9rem}
/* Fixes the orphaned word "control" on narrow phones (audit C12). NB: the
   audit originally proposed text-wrap:balance — that was wrong here. balance
   equalises line lengths and moves the break to before a "·", leaving the
   separator dangling at the start of line 2. pretty targets the short last
   line instead, which is the actual defect, and never strands a separator.
   Browsers without pretty fall back to normal wrapping (the previous behaviour). */
.hero-micro{display:flex;align-items:flex-start;justify-content:center;gap:.45rem;font-size:.93rem;
  color:var(--muted);letter-spacing:.005em;text-align:left;text-wrap:pretty}
.hero-micro svg{width:17px;height:17px;color:var(--sage);flex:none;margin-top:3px}
/* ============================================================
   Hero visual — sculptural clay composition: three floating
   step-cards on a two-tier pedestal, copper orbit ring, arch
   backdrop. Card copy is real text; every shape is decorative.
   All internal metrics are container-query units (cqw) so the
   whole assembly scales as a single object, like a render.
   Geometry is proportioned to a 748 x 884 stage.
   ============================================================ */
.hero-visual{container-type:inline-size;width:100%;max-width:480px;margin-inline:auto}
.hv-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:748/884}

/* ground shadow the whole object sits in */
.hv-shadow{position:absolute;z-index:0;left:-2%;right:2%;bottom:0;height:22%;
  background:radial-gradient(52% 50% at 46% 62%,rgba(27,42,68,.20),transparent 70%);
  filter:blur(1.2cqw)}

/* --- arch backdrop: front face + extruded right side --- */
.hv-arch,.hv-arch-side{position:absolute;top:1.7%;height:84.5%;width:76.5%;
  border-radius:50% 50% 5% 5% / 38% 38% 3% 3%}
.hv-arch-side{left:17.2%;z-index:1;
  background:linear-gradient(100deg,#DCCBB5,#F3EADD 45%,#EADDCB);
  box-shadow:0 5cqw 7cqw -2.5cqw rgba(27,42,68,.22)}
.hv-arch{left:15%;z-index:2;
  background:
    radial-gradient(52% 30% at 32% 8%,rgba(255,255,255,.42),transparent 68%),
    radial-gradient(66% 48% at 94% 99%,rgba(70,46,26,.20),transparent 72%),
    linear-gradient(160deg,#E6D5C0 0%,#D9C4A9 38%,#C9AF91 72%,#BC9F80 100%);
  box-shadow:inset 0 .2cqw 0 rgba(255,255,255,.45)}

/* --- two-tier pedestal: cylinder silhouette + lit top face --- */
.hv-tier{position:absolute;z-index:4}
.hv-tier i{position:absolute;left:0;right:0;top:0;height:66%;border-radius:50%;display:block}
.hv-tier-lo{left:2.1%;width:80.7%;top:84.8%;height:17%;border-radius:50%/33%;
  background:linear-gradient(180deg,#DFCFB7 34%,#D0BB9F 70%,#C2AB8C);
  box-shadow:0 2cqw 3cqw -1cqw rgba(27,42,68,.20)}
.hv-tier-lo i{background:linear-gradient(168deg,#EFE3D1,#E2D2BA);
  box-shadow:inset 0 .3cqw .6cqw rgba(255,255,255,.55)}
.hv-tier-up{left:6.1%;width:72.7%;top:79.2%;height:14.7%;border-radius:50%/34.5%;
  background:linear-gradient(180deg,#E7DBC7 30%,#D8C5AB 72%,#CBB69A);
  box-shadow:0 1.6cqw 2.4cqw -.8cqw rgba(27,42,68,.22)}
.hv-tier-up i{background:linear-gradient(168deg,#FAF5EC,#EDE2D0);
  box-shadow:inset 0 .35cqw .8cqw rgba(255,255,255,.8)}
/* fine sandstone grain on the lower plinth */
.hv-tier-lo::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.16;
  mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:22cqw 22cqw}

/* --- copper orbit ring: threads behind the cards and the plinth --- */
.hv-ring{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;
  filter:drop-shadow(0 .4cqw .5cqw rgba(27,42,68,.20))}

/* --- the three step cards --- */
.hv-card{position:absolute;display:grid;
  grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;align-items:start;
  column-gap:1.5cqw;padding:6.8cqw 2.7cqw 2.4cqw;
  border-radius:4.4cqw;transform-origin:50% 50%}
/* the body block carries the card's text size so its ch-based max-width
   resolves against that size, not the inherited page size */
.hv-body{grid-column:2;grid-row:1;min-width:0;
  font-size:clamp(11px,2.35cqw,12px);line-height:1.4}
.hv-foot{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:flex-end;
  gap:2.2cqw;margin-top:1.8cqw}
.hv-rule{flex:0 1 52%;height:1px;border-radius:1px}
.hv-title{display:block;text-align:center;font-family:var(--font-body);font-weight:700;
  letter-spacing:-.015em;line-height:1.18;color:var(--ink);
  font-size:clamp(13px,3.05cqw,15.5px);margin-bottom:.4em}
.hv-card p{margin:0;font-size:1em;line-height:inherit;color:#3A4257}
/* a shade deeper than --clay-deep: these numerals sit on the warmest part of
   each card's gradient, where the token itself would only reach 4.0:1 */
.hv-num{font-family:var(--font-display);font-style:italic;font-weight:500;line-height:1;
  font-size:clamp(12px,2.9cqw,14.5px);color:#8A4526}
/* Text blocks are measured in ch, so each card keeps the reference's exact
   line breaks (3 / 4 / 3) at every scale rather than only at one width. */
.hv-c1 .hv-body{max-width:20.5ch}
.hv-c2 .hv-body{max-width:20.8ch}
.hv-c3 .hv-body{max-width:22ch}

/* clay icon tile — raised squircle, same recipe as the site's tiles */
.hv-icon{grid-column:1;grid-row:1;display:grid;place-items:center;width:9.6cqw;height:9.6cqw;
  border-radius:30%;background:linear-gradient(158deg,#FBEEE4,#F0D9C6);
  box-shadow:
    0 1cqw 1.5cqw -.5cqw rgba(146,80,48,.28),
    inset .45cqw .45cqw .9cqw rgba(255,255,255,.95),
    inset -.45cqw -.55cqw .9cqw rgba(168,90,52,.16)}
.hv-icon svg{width:54%;height:54%;color:var(--clay-deep)}

/* card 1 — ivory, tipped clockwise, highest in the stack */
.hv-c1{left:14.2%;top:9.9%;width:47%;min-height:28.2%;z-index:7;
  transform:rotate(8.3deg);
  background:linear-gradient(152deg,#FEFDFB 0%,#FAF6EF 46%,#EDE4D6 100%);
  box-shadow:
    0 1.5cqw 0 -.35cqw #E2D5C2,
    0 2.6cqw 3.2cqw -1cqw rgba(27,42,68,.30),
    0 5.5cqw 7cqw -2.6cqw rgba(27,42,68,.20),
    inset .8cqw .8cqw 1.6cqw rgba(255,255,255,.95),
    inset -.8cqw -.9cqw 1.6cqw rgba(27,42,68,.08)}
.hv-c1 .hv-rule{background:linear-gradient(90deg,transparent,rgba(158,82,50,.32))}

/* card 2 — warm cream, near level */
.hv-c2{left:21.3%;top:35.8%;width:51.3%;min-height:26.5%;z-index:6;
  transform:rotate(-2deg);
  background:linear-gradient(152deg,#FCF7ED 0%,#F3EADA 46%,#E5D6C0 100%);
  box-shadow:
    0 1.6cqw 0 -.35cqw #D9C8AF,
    0 2.8cqw 3.4cqw -1cqw rgba(27,42,68,.28),
    0 5.5cqw 7cqw -2.6cqw rgba(27,42,68,.18),
    inset .8cqw .8cqw 1.6cqw rgba(255,255,255,.9),
    inset -.8cqw -.9cqw 1.6cqw rgba(27,42,68,.08)}
.hv-c2 .hv-rule{background:linear-gradient(90deg,transparent,rgba(158,82,50,.32))}

/* card 3 — terracotta, front-most plane, resting on the plinth */
.hv-c3{left:18.6%;top:58.5%;width:54.3%;min-height:26.5%;z-index:5;
  transform:rotate(-3deg);
  background:linear-gradient(152deg,#E8B189 0%,#D9A17C 44%,#C98D64 76%,#B97C52 100%);
  box-shadow:
    0 1.8cqw 0 -.35cqw #B06B43,
    0 3cqw 3.6cqw -1cqw rgba(101,52,26,.38),
    0 6cqw 7.5cqw -2.6cqw rgba(27,42,68,.22),
    inset .9cqw .9cqw 1.8cqw rgba(255,255,255,.5),
    inset -.9cqw -1cqw 1.8cqw rgba(120,58,28,.22)}
.hv-c3 .hv-icon{background:linear-gradient(158deg,#E3A87E,#CE8657);
  box-shadow:
    0 1.1cqw 1.6cqw -.5cqw rgba(101,52,26,.34),
    inset .5cqw .5cqw 1cqw rgba(255,255,255,.55),
    inset -.5cqw -.6cqw 1cqw rgba(120,58,28,.24)}
.hv-c3 .hv-icon svg{color:#fff}
/* 2026-07-26 (audit #26): measured against the darkest stop of this card's own
   gradient (#B97C52), these were 4.15 / 4.02 / 3.91:1 — all short of the 4.5:1
   AA minimum. Deepened rather than lightening the gradient, so card 3 keeps its
   terracotta depth; the title stays in the navy family to match cards 1 and 2.
   Now 5.04 / 4.78 / 4.79:1 at the card's darkest point. */
.hv-c3 .hv-title{color:#101A2B}
.hv-c3 p{color:#2A1C0E}
.hv-c3 .hv-num{color:#331709}
.hv-c3 .hv-rule{background:linear-gradient(90deg,transparent,rgba(94,48,22,.42))}

/* Narrow stages (mobile, and the tight 880–1024px two-column band): the type
   hits its legibility floor, so the cards take a larger share of the stage and
   the furniture stays proportional. Keeps the render readable, never shrinks
   copy below 11px. */
@container (max-width:442px){
  .hv-card{padding:5.6cqw 3.2cqw 2.6cqw;column-gap:1.4cqw}
  .hv-icon{width:9.4cqw;height:9.4cqw}
  /* cards are proportionally taller here, so the cascade is re-pitched to keep
     every heading clear of the card in front of it */
  .hv-c1{left:9%;top:7%;width:54%;min-height:26%}
  .hv-c2{left:15%;top:34.5%;width:60%;min-height:26%}
  .hv-c3{left:13%;top:64%;width:63%;min-height:26%}
}
@container (max-width:345px){
  /* smallest stages need a little more headroom than the 748:884 frame gives */
  .hv-stage{aspect-ratio:748/1010}
  .hv-arch,.hv-arch-side{border-radius:50% 50% 5% 5% / 34% 34% 3% 3%}
  .hv-card{padding:5.2cqw 2.8cqw 2.4cqw}
  .hv-icon{width:8.6cqw;height:8.6cqw}
  .hv-c1{left:5%;top:6%;width:63%}
  .hv-c2{left:11%;top:34%;width:69%}
  .hv-c3{left:9%;top:64.5%;width:72%}
}

/* trust bar — light band, bronze icons */
.trust-bar{background:var(--ivory);color:var(--muted);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;
  padding:1rem 0;font-family:var(--font-mono);font-size:.76rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.trust-inner span{display:inline-flex;align-items:center;gap:.5rem}
.trust-inner svg{width:15px;height:15px;color:var(--bronze)}

/* finder cards (claymorphic) */
.finder-grid{display:grid;gap:.85rem}
.finder-card{display:flex;align-items:center;gap:1rem;background:var(--clay-card-bg);
  border:1px solid var(--border);border-radius:var(--radius-clay);padding:1.05rem 1.1rem;box-shadow:var(--clay-card);
  transition:transform .18s ease,box-shadow .25s ease}
.finder-card:hover{text-decoration:none}
.finder-icon{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:16px;
  background:linear-gradient(160deg,var(--clay-softer),var(--clay-soft));color:var(--clay-deep);
  border:1px solid #EEDBCB;box-shadow:inset 2px 2px 4px rgba(255,255,255,.85),inset -2px -2px 4px rgba(168,90,52,.08);
  transition:background .25s ease,color .25s ease,transform .25s ease}
.finder-icon svg{width:25px;height:25px}
.finder-text{font-family:var(--font-display);font-weight:500;color:var(--ink);font-size:1.08rem;line-height:1.3;letter-spacing:-.01em}
.finder-go{margin-left:auto;color:var(--clay);opacity:.6;transition:transform .22s,opacity .22s}
.finder-go svg{width:21px;height:21px}

/* core cards (claymorphic) */
.core-grid{display:grid;gap:.85rem}
.core-card{background:var(--clay-card-bg);border:1px solid var(--border);border-radius:var(--radius-clay);
  padding:1.4rem;box-shadow:var(--clay-card);position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .25s ease}
.core-card::after{content:"";position:absolute;left:1.75rem;right:auto;top:0;width:36px;height:3px;
  background:linear-gradient(90deg,var(--clay),var(--clay-deep));border-radius:0 0 3px 3px;opacity:0;transition:opacity .25s ease}
.core-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;
  background:linear-gradient(160deg,#EEF1F6,#E4E9F1);color:var(--blue-grey);border:1px solid #DEE3EC;
  box-shadow:inset 2px 2px 4px rgba(255,255,255,.9),inset -2px -2px 4px rgba(65,80,107,.08);margin-bottom:1.05rem}
.core-icon svg{width:26px;height:26px}
.core-card h3{margin-bottom:.4rem}
.core-card p{color:var(--muted);margin:0;font-size:.97rem}

/* steps */
.steps{display:grid;gap:.9rem;max-width:780px;margin:0 auto 1.3rem}
.step{display:flex;gap:1.1rem;background:var(--clay-card-bg);border:1px solid var(--border);border-radius:var(--radius-clay);
  padding:1.05rem 1.1rem;box-shadow:var(--clay-card)}
.step-num{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;
  background:var(--clay-deep);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:1.08rem;
  box-shadow:inset 3px 3px 6px rgba(255,255,255,.4),inset -3px -3px 6px rgba(0,0,0,.16),0 6px 14px rgba(216,130,90,.28)}
.step h3{margin:.2rem 0 .3rem}
.step p{margin:0;color:var(--muted);font-size:.97rem}
.steps-big{display:grid;gap:.9rem;counter-reset:s}
.step-big{display:flex;gap:1.4rem;background:var(--clay-card-bg);border:1px solid var(--border);
  border-radius:var(--radius-clay);padding:1.4rem;box-shadow:var(--clay-card)}
.step-big .step-num{width:56px;height:56px;font-size:1.35rem}
.step-big h2{margin:.25rem 0 .4rem}
.step-big p{margin:0;color:var(--muted)}

/* do/dont */
.dodont-grid{display:grid;gap:.9rem}
.panel{border-radius:var(--radius-clay);padding:1.5rem;border:1px solid var(--border);
  background:var(--clay-card-bg);box-shadow:var(--clay-card)}
.panel h3{display:flex;align-items:center;gap:.55rem;margin-bottom:1.05rem}
.panel h3 svg{width:23px;height:23px}
.panel-do{background:linear-gradient(170deg,#FCFBF6,var(--sage-soft));border-color:var(--sage-border)}
/* Heading colours darkened 2026-07-26 (audit A4): against the darkest point of
   each panel's own gradient these measured 3.98:1 and 4.11:1 (need 4.5:1).
   Now 5.28:1 and 4.63:1. Tokens themselves are unchanged — they still pass
   everywhere else they are used (ticks, borders, success states). */
.panel-do h3{color:#4E6659}
.panel-dont{background:linear-gradient(170deg,#FCFBF6,var(--warning-soft));border-color:var(--warning-border)}
.panel-dont h3{color:var(--clay-deep)}
.ticks li,.crosses li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.72rem;font-size:.99rem}
.ticks li svg{width:19px;height:19px;color:var(--sage);flex:none;margin-top:3px}
.crosses .x{color:var(--warning);font-weight:700;font-size:1.2rem;line-height:1.2;flex:none;width:19px;text-align:center}
.ticks.two-col{display:grid}

/* free note — clay pill-flavoured callout */
.free-note{background:var(--clay-card-bg);border-radius:var(--radius);padding:1.05rem 1.3rem;
  font-size:.99rem;color:var(--ink);display:inline-block;border:1px solid rgba(216,130,90,.18);
  box-shadow:var(--clay-pill)}
.free-note a{color:var(--clay-deep);font-weight:600;text-decoration:underline;text-decoration-color:rgba(168,90,52,.35)}

/* cta band — warm clay panel */
/* Gradient darkened 2026-07-26 (audit A1): white text on the previous
   --clay start measured 2.89:1 and failed WCAG AA. Every point of the band is
   now >=4.7:1 with white, including under the ::before highlight. */
.cta-band{background:linear-gradient(155deg,#964C2E 0%,#7E3F24 130%);color:#fff;position:relative;overflow:hidden;
  box-shadow:0 24px 50px -18px rgba(168,90,52,.4),inset 6px 6px 16px rgba(255,255,255,.22),inset -8px -8px 18px rgba(0,0,0,.14)}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 85% 10%,rgba(255,255,255,.12),transparent 60%)}
.cta-inner{text-align:center;padding:clamp(1.5rem,4vw,2.3rem) 0;position:relative}
.cta-band h2{color:#FFFFFF;max-width:20ch;margin:0 auto .65rem;font-variation-settings:'opsz' 100}
.cta-band p{color:rgba(255,255,255,.9);max-width:46ch;margin:0 auto 1.8rem}
/* button on clay band → ivory secondary so it reads clearly */
.cta-band .btn-accent{background:var(--clay-card-bg);color:var(--clay-deep);font-weight:700;
  border-color:rgba(255,255,255,.5);box-shadow:0 12px 24px rgba(0,0,0,.14),inset 4px 4px 8px rgba(255,255,255,.9),inset -4px -4px 8px rgba(168,90,52,.12)}

/* page hero (inner pages) */
.page-hero{background:
   radial-gradient(44% 125% at 100% -18%,rgba(216,130,90,.16),transparent 56%),
   radial-gradient(32% 78% at 83% 58%,rgba(216,130,90,.07),transparent 64%),
   radial-gradient(42% 95% at 110% 128%,rgba(65,80,107,.06),transparent 62%),
   var(--ground);
  padding:clamp(1.2rem,3.5vw,1.9rem) 0 clamp(1.1rem,3vw,1.6rem);border-bottom:1px solid var(--border)}
.page-hero h1{margin-bottom:.55rem;font-variation-settings:'opsz' 100}
.page-hero .lead{color:var(--muted);max-width:62ch}
.page-hero .btn{margin-top:1.3rem}
.crumbs{font-family:var(--font-mono);font-size:.75rem;color:var(--muted);margin:-.35rem 0 .5rem;display:flex;flex-wrap:wrap;gap:.45rem;
  align-items:center;font-weight:400;text-transform:uppercase;letter-spacing:.08em}
/* 2026-07-26 (audit A3): links were 48x20px and failed the WCAG 2.5.8 24x24
   minimum. padding-block lifts the hit area to ~31px; the negative margin-top
   and reduced margin-bottom cancel the added height exactly, so the hero
   rhythm below is unchanged. */
.crumbs a{color:var(--clay-deep);display:inline-block;padding-block:.35rem}
/* separators bound to each crumb (via ::after) so a "/" can never wrap to a
   line on its own; the literal separator spans are hidden */
.crumbs span{display:none}
.crumbs a::after{content:"/";margin-left:.45rem;color:var(--muted);opacity:.45;font-weight:400}
.service-hero{background:
   radial-gradient(44% 125% at 100% -18%,rgba(216,130,90,.17),transparent 56%),
   radial-gradient(32% 78% at 83% 58%,rgba(216,130,90,.08),transparent 64%),
   radial-gradient(42% 95% at 110% 128%,rgba(65,80,107,.06),transparent 62%),
   var(--ground)}

/* callout */
.callout{display:flex;gap:.95rem;align-items:flex-start;background:linear-gradient(165deg,var(--clay-softer),var(--clay-soft));
  border:1px solid rgba(216,130,90,.2);border-left:3px solid var(--clay);border-radius:var(--radius);
  padding:1rem 1.2rem;margin:1.1rem auto;max-width:900px;box-shadow:inset 2px 2px 4px rgba(255,255,255,.6)}
.callout svg{width:23px;height:23px;color:var(--clay-deep);flex:none;margin-top:2px}
/* max-width caps the measure at a comfortable reading length — this ran to
   96 characters per line on wide viewports (audit C11). */
.callout p{margin:0;font-size:.99rem;color:var(--clay-deep);max-width:65ch}

/* service layout */
.svc-layout{display:grid;gap:1.6rem}
.svc-main h2{margin-top:1.6rem}
.svc-main h2:first-child{margin-top:0}
.svc-boundary{margin:1.2rem 0}
.svc-boundary .signpost{font-size:.92rem;color:var(--muted);margin:.6rem 0 0}
.aside-card{background:var(--clay-card-bg);border:1px solid var(--border);border-radius:var(--radius-clay);
  padding:1.4rem;box-shadow:var(--clay-card);position:relative;overflow:hidden}
.aside-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--clay),var(--clay-deep) 60%,var(--clay))}
.aside-card h2{margin-bottom:.5rem}
.aside-card p{color:var(--muted);font-size:.95rem}
/* 2026-07-26 (audit B9): "Message us on WhatsApp" wrapped to two lines in the
   320px aside, making that button 63px against its 48px sibling. Trimming the
   inline padding lets it sit on one line so the stacked pair matches. */
.aside-card .btn{margin-top:.6rem;padding-inline:1.15rem;min-height:52px}
.aside-note{font-family:var(--font-mono);font-size:.76rem;text-align:center;color:var(--muted);margin:.85rem 0 0;letter-spacing:.02em}

/* accordion */
.acc-group{display:flex;flex-direction:column;gap:.6rem;max-width:820px}
.acc{background:var(--clay-card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--clay-pill);transition:box-shadow .25s ease}
.acc[open]{box-shadow:var(--clay-card)}
.acc summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font-family:var(--font-display);
  font-weight:500;font-size:1.1rem;color:var(--ink);display:flex;justify-content:space-between;
  align-items:center;gap:1rem;letter-spacing:-.01em;transition:background .2s ease}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--clay);
  border-bottom:1.5px solid var(--clay);transform:rotate(45deg);transition:transform .22s;flex:none;margin-right:.2rem}
.acc[open] summary::after{transform:rotate(-135deg)}
.acc-body{padding:0 1.2rem 1rem}
.acc-body p{margin:0;color:var(--muted)}

/* related */
.rel-grid{display:grid;gap:.85rem}
.rel-card{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--clay-card-bg);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.15rem 1.3rem;
  font-family:var(--font-display);font-weight:500;font-size:1.04rem;color:var(--ink);box-shadow:var(--clay-card);letter-spacing:-.01em;
  transition:transform .18s ease,box-shadow .25s ease}
.rel-card:hover{text-decoration:none}
.rel-card svg{width:19px;height:19px;color:var(--clay-deep);flex:none}

/* category grid */
.cat-grid{display:grid;gap:.9rem}
.cat-block{background:var(--clay-card-bg);border:1px solid var(--border);border-radius:var(--radius-clay);
  padding:1.4rem;box-shadow:var(--clay-card)}
.cat-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;
  background:linear-gradient(160deg,#EEF1F6,#E4E9F1);color:var(--blue-grey);border:1px solid #DEE3EC;
  box-shadow:inset 2px 2px 4px rgba(255,255,255,.9),inset -2px -2px 4px rgba(65,80,107,.08);margin-bottom:.95rem}
.cat-icon svg{width:27px;height:27px}
.cat-block p{color:var(--muted)}
.cat-links li{margin-top:.5rem}
.cat-links a{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.72rem .95rem;border-radius:12px;background:var(--clay-softer);color:var(--ink);font-weight:600;
  font-size:.95rem;border:1px solid rgba(216,130,90,.12);transition:background .2s ease,transform .2s ease}
.cat-links svg{width:17px;height:17px;flex:none;color:var(--clay-deep)}

/* pricing */
.price-grid{display:grid;gap:1rem;margin-bottom:1.4rem}
.price-card{background:var(--clay-card-bg);border:1px solid var(--border);border-radius:var(--radius-clay);
  padding:1.6rem;box-shadow:var(--clay-card);position:relative;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .25s ease}
.price-card.featured{border:1px solid rgba(216,130,90,.35);
  background:linear-gradient(178deg,#FFFDFA,#FFF6EF 50%,var(--clay-card-bg))}
.price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--clay-deep);
  /* .68rem = 10.9px, below a comfortable legibility floor for uppercase mono
     (audit C10). Raised to the shared 12px metadata tier. */
  color:#fff;font-family:var(--font-mono);font-weight:500;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.42rem 1.05rem;border-radius:var(--radius-pill);white-space:nowrap;border:1px solid rgba(27,42,68,.15);
  box-shadow:0 8px 16px rgba(216,130,90,.25),inset 2px 2px 4px rgba(255,255,255,.4),inset -2px -2px 4px rgba(0,0,0,.15)}
.price{font-family:var(--font-display);font-weight:600;font-size:2.1rem;color:var(--ink);margin:.35rem 0;
  font-variation-settings:'opsz' 80;letter-spacing:-.02em}
.price-desc{color:var(--muted);font-size:.95rem;min-height:2.5em}
.price-feat{margin:.85rem 0 1.1rem}
.price-card .btn{margin-top:auto}
.price-placeholder{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--warning);
  background:var(--warning-soft);border:1px solid var(--warning-border);border-radius:12px;padding:.5rem .9rem;margin-top:1rem}
.price-placeholder svg{width:18px;height:18px;flex:none}

/* support directory */
.support-grid{display:grid;gap:.9rem}
.support-card{background:var(--clay-card-bg);border:1px solid var(--border);border-radius:var(--radius-clay);
  padding:1.25rem;box-shadow:var(--clay-card)}
.support-card h3{color:var(--blue-grey);font-size:1.1rem;margin-bottom:.7rem}
.support-card li{margin-bottom:.4rem}
.support-card a{display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:.55rem .2rem;border-bottom:1px dashed var(--border-line);color:var(--ink);font-size:.96rem}
.support-card svg{width:16px;height:16px;color:var(--clay-deep);flex:none}

/* contact */
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:1.3rem}
.contact-form{background:var(--clay-card-bg);border:1px solid var(--border);border-radius:var(--radius-clay);
  padding:1.5rem;box-shadow:var(--clay-card);min-width:0}
.field{margin-bottom:1.15rem;display:flex;flex-direction:column;gap:.42rem}
.field label{font-weight:600;font-size:.93rem;color:var(--ink);letter-spacing:.005em}
.field .opt{color:var(--quiet);font-weight:400}
/* 2026-07-26 (audit D14): required fields were only signalled on submit.
   aria-hidden because the input's own required attribute already exposes this
   to assistive tech — this marker is for sighted users only. */
.field .req,.checkbox .req{color:var(--clay-deep);font-weight:500}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:1rem;
  padding:.85rem 1.05rem;border:1px solid rgba(27,42,68,.22);border-radius:13px;background:#fff;
  color:var(--ink);width:100%;box-shadow:var(--clay-inset);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
/* 2026-07-26 (audit A5): the old focus ring composited to 1.14:1 against the
   page and the --clay border to 2.89:1 — both under the 3:1 required by WCAG
   1.4.11. The soft ring is kept for mouse users; keyboard users additionally
   get the same solid 2.5px --clay-deep outline used site-wide (4.95:1). */
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--clay-deep);
  background:#fff;box-shadow:var(--clay-inset),0 0 0 3.5px rgba(158,82,50,.28)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2.5px solid var(--clay-deep);outline-offset:2px}
.checkbox{display:flex;gap:.7rem;align-items:flex-start;font-size:.94rem;color:var(--muted);margin:.4rem 0 1.25rem}
.checkbox input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--clay)}
.form-note{font-size:.84rem;color:var(--muted);text-align:center;margin:.85rem 0 0}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.form-status{margin:.7rem 0 0;font-size:.95rem;text-align:center;min-height:1.2em}
.form-status.sending{color:var(--muted)}
.form-status.error{color:var(--warning);font-weight:600}
.contact-aside{min-width:0}
.contact-aside .aside-card hr{border:none;border-top:1px solid var(--border-line);margin:1.35rem 0}
.contact-aside .btn{margin-top:.6rem}

/* thank you */
.thanks{background:linear-gradient(170deg,var(--ground),var(--ground-deep));text-align:center}
.thanks-tick{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 1.3rem;border-radius:50%;
  background:var(--sage);color:#fff;
  box-shadow:inset 3px 3px 6px rgba(255,255,255,.35),inset -3px -3px 6px rgba(0,0,0,.14),0 14px 28px rgba(94,122,107,.3)}
.thanks-tick svg{width:40px;height:40px;stroke-width:2.5}
.thanks-actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:1.2rem}

/* founder */
.founder-photo{display:grid;place-items:center;width:124px;height:124px;margin:0 auto 1.3rem;border-radius:50%;
  background:linear-gradient(160deg,#EEF1F6,#E4E9F1);color:var(--blue-grey);border:1px solid #DEE3EC;
  box-shadow:inset 6px 6px 14px rgba(255,255,255,.9),inset -6px -6px 14px rgba(65,80,107,.1),0 14px 28px rgba(27,42,68,.08)}
.founder-photo svg{width:60px;height:60px}

/* legal */
.legal-body h2{margin-top:1.5rem;font-size:1.38rem}
.legal-body p{color:var(--muted)}

/* footer — light, centred, folio ink */
.site-footer{background:var(--ground-deep);color:var(--muted);margin-top:auto;position:relative;
  border-top:1px solid var(--border)}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--clay) 30%,var(--clay-deep) 50%,var(--clay) 70%,transparent)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:start;text-align:center;
  padding:clamp(1.8rem,4vw,2.6rem) var(--gutter) 1.5rem;max-width:var(--maxw);margin-inline:auto}
.footer-grid .brand-foot{justify-content:center}
.f-brand p{margin-inline:auto}
.f-col h2{color:var(--clay-deep);font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.13em;margin-bottom:1rem;font-weight:500}
.f-col a{display:block;color:var(--muted);padding:.34rem 0;font-size:.94rem;transition:color .2s ease}
.f-col a.brand-foot{display:flex}
.brand-foot{color:var(--ink);margin-bottom:.9rem}
.brand-foot .brand-text{color:var(--ink)}
.brand-foot .brand-text strong{color:var(--clay-deep)}
.f-brand p{font-size:.94rem;color:var(--muted);max-width:34ch}
.f-contact a{color:var(--clay-deep);display:inline}
.disclaimer-strip{background:rgba(27,42,68,.03);font-size:.82rem;border-top:1px solid var(--border)}
.disclaimer-strip p{margin:0;padding:.85rem 0;color:var(--muted);line-height:1.55;text-align:center;
  max-width:80ch;margin-inline:auto}
.copyright{background:rgba(27,42,68,.05)}
/* --quiet measured 4.29:1 here at 11.8px; --muted gives 6.06:1 (audit A6). */
.copyright p{margin:0;padding:.75rem 0;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.03em;color:var(--muted);text-align:center}

/* mobile sticky action bar */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:.6rem;
  padding:.6rem calc(.85rem + env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) calc(.85rem + env(safe-area-inset-left));
  background:rgba(244,239,230,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--border);box-shadow:0 -8px 26px -10px rgba(27,42,68,.14)}
.mbar-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:.55rem;border-radius:16px;font-weight:700;font-size:.79rem;min-height:52px;letter-spacing:.01em}
.mbar-btn svg{width:20px;height:20px}
.mbar-whatsapp{background:#10854A;color:#fff;
  box-shadow:inset 2px 2px 4px rgba(255,255,255,.25),inset -2px -2px 4px rgba(0,0,0,.14)}
.mbar-book{background:var(--clay-deep);color:#fff;
  box-shadow:inset 2px 2px 4px rgba(255,255,255,.35),inset -2px -2px 4px rgba(0,0,0,.15)}
.mbar-btn:hover{text-decoration:none}
body{padding-bottom:74px} /* room for mobile bar */

/* reveal animation (staggered inside grids) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.finder-grid .reveal:nth-child(2),.core-grid .reveal:nth-child(2),.price-grid .reveal:nth-child(2),
.steps .reveal:nth-child(2),.acc-group .reveal:nth-child(2){transition-delay:.08s}
.finder-grid .reveal:nth-child(3),.core-grid .reveal:nth-child(3),.price-grid .reveal:nth-child(3),
.steps .reveal:nth-child(3),.acc-group .reveal:nth-child(3){transition-delay:.16s}
.finder-grid .reveal:nth-child(4),.core-grid .reveal:nth-child(4),
.steps .reveal:nth-child(4){transition-delay:.24s}
.finder-grid .reveal:nth-child(5){transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* hover-only tactile press: ease DOWN 1px + soften/contract shadow */
@media (hover:hover) and (pointer:fine){
  /* Moved here 2026-07-26 (audit D13): these were unguarded, so on touch
     devices a tap left the element stuck in its hover state until the user
     tapped elsewhere. The two mega-menu rules were split first — their
     :focus-within and .open halves stay unguarded above so keyboard and JS
     access keep working on every device. Pure text-decoration:none resets
     were deliberately left in place: they are inert once a:hover is guarded. */
  a:hover{text-decoration:underline}
  .btn-accent:hover{background:var(--clay-deep);box-shadow:var(--clay-btn-p-hover)}
  .btn-outline:hover{color:var(--clay-deep);border-color:rgba(27,42,68,.12);box-shadow:var(--clay-btn-s-hover)}
  .btn-ghost:hover{color:var(--clay-deep);box-shadow:var(--clay-btn-s-hover)}
  .btn-whatsapp:hover{background:#0D6E3D;box-shadow:0 8px 18px rgba(16,133,74,.26),inset 4px 4px 8px rgba(255,255,255,.28),inset -4px -4px 8px rgba(0,0,0,.14)}
  .brand:hover .brand-mark{transform:rotate(-4deg) scale(1.04)}
  .nav-link:hover{background:var(--clay-softer);text-decoration:none;color:var(--clay-deep)}
  .mega-col a:hover{background:var(--clay-softer);color:var(--clay-deep);text-decoration:none}
  .mobile-menu a:hover{text-decoration:none;color:var(--clay-deep)}
  .core-card:hover::after{opacity:1}
  .cta-band .btn-accent:hover{color:var(--clay-deep);box-shadow:0 8px 18px rgba(0,0,0,.16),inset 4px 4px 8px rgba(255,255,255,.9),inset -4px -4px 8px rgba(168,90,52,.12)}
  .acc summary:hover{background:var(--clay-softer)}
  .cat-links a:hover{background:var(--clay-soft);text-decoration:none;color:var(--clay-deep)}
  .support-card a:hover{color:var(--clay-deep)}
  .f-col a:hover{color:var(--clay-deep);text-decoration:none}
  .f-contact a:hover{color:var(--ink)}
  .has-mega:hover .caret{transform:rotate(180deg)}
  .has-mega:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .btn-accent:hover{transform:translateY(1px)}
  .btn-outline:hover,.btn-ghost:hover{transform:translateY(1px)}
  .finder-card:hover{transform:translateY(1px);box-shadow:var(--clay-card-hover)}
  .finder-card:hover .finder-go{opacity:1;transform:translateX(4px)}
  .finder-card:hover .finder-icon{background:linear-gradient(160deg,var(--clay),var(--clay-deep));color:#fff}
  .core-card:hover{transform:translateY(1px);box-shadow:var(--clay-card-hover)}
  .rel-card:hover{transform:translateY(1px);box-shadow:var(--clay-card-hover)}
  .price-card:hover{transform:translateY(1px);box-shadow:var(--clay-card-hover)}
  .cat-links a:hover{transform:translateX(3px)}
}

/* ============================================================
   Homepage refinement layer (scoped to body.home)
   ============================================================ */
.home .section{padding:clamp(1.5rem,3.2vw,2.1rem) 0}
.home .section-head{margin-bottom:clamp(.85rem,2vw,1.25rem)}
.home .dodont{padding-top:0}

.home .hero h1{font-size:clamp(2.5rem,7vw,4.2rem)}
.home .hero .lead{font-size:clamp(1.05rem,2.1vw,1.15rem)}
@keyframes homeRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.home .hero h1{animation:homeRise .85s cubic-bezier(.16,1,.3,1) .05s both}
.home .hero .lead{animation:homeRise .85s cubic-bezier(.16,1,.3,1) .18s both}
.home .hero-actions{animation:homeRise .85s cubic-bezier(.16,1,.3,1) .32s both}
.home .hero-micro{animation:homeRise .85s cubic-bezier(.16,1,.3,1) .46s both}
.home .hero-visual{animation:homeRise 1s cubic-bezier(.16,1,.3,1) .55s both}
@media (prefers-reduced-motion:reduce){
  .home .hero h1,.home .hero .lead,.home .hero-actions,.home .hero-micro,.home .hero-visual{animation:none}
}

/* trust bar: clay dot separators */
.home .trust-inner{gap:.7rem 2.6rem;padding:1.05rem 0;font-size:.75rem;letter-spacing:.1em}
@media (min-width:600px){
  .home .trust-inner span{position:relative}
  .home .trust-inner span:not(:last-child)::after{content:"";position:absolute;right:-1.45rem;top:50%;
    width:3px;height:3px;border-radius:50%;background:var(--bronze);opacity:.6;transform:translateY(-50%)}
}

/* do/don't: hairline row dividers */
.home .ticks li,.home .crosses li{margin-bottom:0;padding:.62rem 0}
.home .panel li:not(:last-child){border-bottom:1px solid rgba(27,42,68,.07)}
.home .panel ul{margin-top:.2rem}

/* support note: clay-edged aside */
.home .free-note{border-left:3px solid var(--clay);text-align:left}

/* CTA: floating inset clay panel */
@media (min-width:600px){
  .home .cta-band{width:min(calc(100% - 2 * var(--gutter)),var(--maxw));margin:0 auto clamp(1.3rem,3vw,2.1rem);
    border-radius:var(--radius-clay)}
  .home .cta-inner{padding:clamp(1.5rem,4vw,2.3rem) clamp(1.5rem,4vw,3rem)}
}

/* tablet: centre the orphan fifth finder card */
@media (min-width:600px) and (max-width:879px){
  .home .finder-card:nth-child(5){grid-column:1/-1}
}

@media (min-width:880px){
  /* finder: editorial 3 + 2 arrangement */
  .home .finder-grid{grid-template-columns:repeat(6,1fr);gap:1.1rem}
  .home .finder-card{grid-column:span 2;padding:1.9rem 1.4rem 1.6rem}
  .home .finder-card:nth-child(4){grid-column:2/4}
  .home .finder-card:nth-child(5){grid-column:4/6}
  .home .finder-icon{width:60px;height:60px}

  /* steps: connected horizontal timeline */
  .home .steps{grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:none;margin-bottom:1.6rem}
  .home .step{flex-direction:column;align-items:flex-start;gap:0;padding:0;
    background:transparent;border:none;box-shadow:none;position:relative}
  .home .step:not(:last-child)::after{content:"";position:absolute;top:22px;left:58px;right:-2rem;height:1.5px;
    background:linear-gradient(90deg,rgba(216,130,90,.5),rgba(216,130,90,.15));pointer-events:none}
  .home .step .step-num{position:relative;z-index:1}
  .home .step h3{margin:1.05rem 0 .35rem}
}

/* ================================================================
   Native scroll-snap (homepage only, body.home).
   proximity — not mandatory — so a fast fling can sail past several
   sections at once and a section taller than the viewport never
   traps the scroll; it only snaps once the scroll naturally comes
   to rest near a section start. No JS: the ease/inertia on snap is
   the browser's own native scroll-snap physics.
   ================================================================ */
body.home{
  height:100vh;height:100dvh;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  scroll-behavior:smooth;
  scroll-snap-type:y proximity;
  scroll-padding-top:var(--header-h);
}
body.home #main > section,
body.home .site-footer{
  scroll-snap-align:start;
}
@media (prefers-reduced-motion:reduce){
  body.home{scroll-snap-type:none}
}

/* ===================== breakpoints ===================== */
@media (max-width:599px){
  .section{padding:1.6rem 0}
  .hero-inner{padding-top:1.5rem;padding-bottom:1.5rem}
  .page-hero{padding:1.2rem 0 1rem}
  .cta-inner{padding:1.6rem 0}
  .section-head{margin-bottom:1rem}
  .panel,.price-card,.step-big{padding:1.15rem}
  .contact-form{padding:1.15rem}
  /* trust stats compress to a tight 2-column grid (no wasted vertical space) */
  .trust-inner{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.2rem;justify-items:center}
  .home .trust-inner{gap:.9rem 1.2rem}
  .home .trust-inner span:not(:last-child)::after{display:none}
  /* comfortable touch targets for footer nav links (mobile) */
  .f-col > a:not(.brand-foot){min-height:44px;display:flex;align-items:center;justify-content:center}
  /* equal-width stacked action buttons on the thank-you page */
  .thanks-actions .btn{width:100%}
}
/* full-width, equal-width hero CTAs while the hero is single-column (<880) */
@media (max-width:879px){
  .hero-actions .btn,.page-hero .btn{width:100%}
}
@media (min-width:600px){
  .finder-grid{grid-template-columns:1fr 1fr}
  .core-grid{grid-template-columns:1fr 1fr}
  .dodont-grid{grid-template-columns:1fr 1fr}
  .ticks.two-col{grid-template-columns:1fr 1fr;column-gap:1.2rem}
  .cat-grid{grid-template-columns:1fr 1fr}
  .cat-block:nth-child(5){grid-column:1/-1}
  .support-grid{grid-template-columns:1fr 1fr}
  .rel-grid{grid-template-columns:repeat(3,1fr)}
  .thanks-actions{flex-wrap:nowrap}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;text-align:left}
  .footer-grid .brand-foot{justify-content:flex-start}
  .f-brand p{margin-inline:0}
}
/* Desktop nav appears only once the header has room for it — prevents the
   brand and "How it works" from wrapping in the ~880–955px band. Content
   columns still switch at 880 below (they fit fine there). */
@media (min-width:960px){
  :root{--header-h:78px}
  .nav-desktop{display:flex}
  .header-cta{display:inline-flex}
  .hamburger{display:none}
  .mobile-menu{display:none!important}
  .mobile-bar{display:none}
  body{padding-bottom:0}
}
@media (min-width:880px){
  .hero-inner{grid-template-columns:1.1fr .9fr;align-items:center;gap:3.2rem}
  .hero-copy{text-align:left}
  .hero .lead{margin-inline:0;max-width:46ch}
  .hero-actions{justify-content:flex-start}
  .hero-micro{justify-content:flex-start}
  .core-grid{grid-template-columns:repeat(4,1fr)}
  .finder-grid{grid-template-columns:repeat(5,1fr)}
  .finder-card{flex-direction:column;text-align:center;align-items:center;gap:.75rem;padding:1.7rem 1rem}
  .finder-go{margin:auto 0 0}
  .svc-layout{grid-template-columns:1fr 320px;gap:2.2rem;align-items:start}
  /* 2026-07-26 (audit B7): .aside-card was already position:sticky, but
     align-items:start collapsed .svc-aside to its content height (356px), so
     the sticky card had no travel room and scrolled away — leaving ~1020px of
     dead right column. Stretching only the aside to the row height gives the
     card somewhere to stick without altering the main column. */
  .svc-aside{align-self:stretch}
  .aside-card{position:sticky;top:calc(var(--header-h) + 1rem)}
  .contact-layout{grid-template-columns:1.4fr .9fr;align-items:start}
  .price-grid{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(6,1fr)}
  .cat-block{grid-column:span 2}
  .cat-block:nth-child(4){grid-column:2/4}
  .cat-block:nth-child(5){grid-column:4/6}
}