/* =====================================================================
   Frozen Melon Ltd — site.css   ("warm editorial" build)
   A magazine, not a gateway: light warm-paper canvas, a fixed vertical
   side-rail for navigation, asymmetric ruled spreads, Fraunces display
   over Manrope. Deliberately unlike the dark centered corporate layout.
   Load Tailwind FIRST (preflight), then this file.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --rind:#0F3D2E; --rind-700:#15503B; --rind-600:#2F6B4F; --rind-300:#8FBBA6;
  --coral:#EF5B54; --coral-deep:#C0392E;
  --mint:#E4F0E7; --mint-200:#CFE6D6;
  --paper:#FBF8F1; --paper-200:#F3ECDE; --paper-300:#EBE2D0;
  --seed:#16211B; --body:#414A43; --line:#E4DAC6; --line-strong:#16211B;

  --shadow-sm:0 1px 2px rgba(22,33,27,.06);
  --shadow-md:0 12px 34px -16px rgba(22,33,27,.22);
  --shadow-lg:0 34px 70px -28px rgba(22,33,27,.30);

  --r-sm:10px; --r-md:16px; --r-lg:24px;
  --rail:250px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--seed);
  font-family:'Manrope',system-ui,sans-serif; font-size:16px; line-height:1.62;
  overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@supports not (overflow:clip){ body{ overflow-x:hidden; } }

h1,h2,h3,h4{ font-family:'Fraunces',Georgia,serif; color:var(--seed); font-weight:600;
  line-height:1.06; letter-spacing:-.015em; margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; display:block; }
::selection{ background:var(--mint-200); }
:focus-visible{ outline:3px solid var(--rind); outline-offset:3px; border-radius:3px; }

/* ---- editorial type ---- */
.display-1{ font-size:clamp(2.9rem,7vw,5.6rem); font-weight:600; line-height:1.0;
  letter-spacing:-.028em; font-optical-sizing:auto; }
.display-2{ font-size:clamp(1.9rem,3.8vw,2.9rem); line-height:1.05; letter-spacing:-.02em; }
.serif-ital{ font-style:italic; font-weight:600; }
.kicker{ font-family:'Manrope',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--body); }
.lead{ font-size:clamp(1.08rem,1.5vw,1.28rem); color:var(--body); line-height:1.6; }
.measure{ max-width:66ch; }

/* =====================================================================
   APP SHELL — fixed vertical side-rail + content column
   ===================================================================== */
.content{ min-height:100vh; }
.inner{ width:100%; max-width:1040px; margin-inline:auto; padding-inline:clamp(22px,5vw,64px); }

/* --- side rail (desktop) --- */
.side-rail{ display:none; }
@media (min-width:1024px){
  .side-rail{ display:flex; flex-direction:column; gap:22px; position:fixed; top:0; left:0;
    width:var(--rail); height:100vh; padding:30px 26px; background:var(--paper);
    border-right:1px solid var(--line); z-index:50; overflow-y:auto; }
  .content{ margin-left:var(--rail); }
}
.rail-nav{ display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.rail-nav a{ display:flex; align-items:baseline; gap:11px; padding:9px 8px; border-radius:8px;
  font-weight:600; font-size:.98rem; color:var(--seed); transition:background .2s var(--ease), color .2s var(--ease); }
.rail-nav a:hover{ background:var(--mint); color:var(--rind); }
.rail-nav .n{ font-family:'Fraunces',serif; font-size:.82rem; color:var(--coral-deep); font-weight:600;
  font-variant-numeric:tabular-nums; width:1.4em; }
.rail-foot{ margin-top:auto; display:flex; flex-direction:column; gap:12px; font-size:.86rem; }
.rail-foot .btn{ width:100%; }
.rail-contact a{ display:flex; align-items:center; gap:9px; color:var(--body); font-weight:600; padding:2px 0; }
.rail-contact a:hover{ color:var(--rind); }
.rail-contact svg{ width:16px; height:16px; color:var(--rind-600); flex:none; }
.rail-rule{ height:1px; background:var(--line); }

/* --- top bar + overlay (mobile) --- */
.topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:13px clamp(18px,5vw,28px); background:rgba(251,248,241,.9); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
@media (min-width:1024px){ .topbar{ display:none; } }
.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--line); border-radius:11px; background:#fff; cursor:pointer; color:var(--seed); }
.nav-overlay{ position:fixed; inset:0; z-index:60; background:var(--paper); padding:20px clamp(18px,5vw,28px);
  display:flex; flex-direction:column; }
/* The `hidden` attribute must win — an author `display` value overrides UA
   `[hidden]{display:none}`, so restate it or the overlay is stuck open. */
.nav-overlay[hidden]{ display:none; }
/* Desktop uses the side rail; the overlay never applies there. */
@media (min-width:1024px){ .nav-overlay, .topbar{ display:none !important; } }
.nav-overlay .ov-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.nav-overlay a.ov-link{ display:flex; align-items:baseline; gap:12px; padding:15px 4px; font-family:'Fraunces',serif;
  font-size:1.5rem; border-bottom:1px solid var(--line); }
.nav-overlay a.ov-link .n{ font-size:.9rem; color:var(--coral-deep); font-variant-numeric:tabular-nums; }
.nav-overlay .ov-foot{ margin-top:auto; display:flex; flex-direction:column; gap:12px; padding-top:20px; }

/* --- brand mark --- */
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.01em; color:var(--seed); }
.brand .mark{ width:34px; height:34px; flex:none; }
.brand .word{ font-size:1.05rem; }
.brand .sub{ display:block; font-family:'Manrope',sans-serif; font-weight:600; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--body); margin-top:1px; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:700;
  font-size:.96rem; border-radius:999px; padding:13px 24px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
  white-space:nowrap; }
.btn-primary{ background:var(--rind); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--rind-700); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-ghost{ background:transparent; color:var(--rind); border-color:var(--seed); }
.btn-ghost:hover{ background:var(--seed); color:var(--paper); transform:translateY(-1px); }
.btn svg{ width:18px; height:18px; }
.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--rind);
  border-bottom:2px solid var(--coral); padding-bottom:2px; transition:gap .2s var(--ease); }
.link-arrow:hover{ gap:12px; }
.link-arrow svg{ width:17px; height:17px; }

/* =====================================================================
   CHAPTER FRAME — the editorial signature
   ===================================================================== */
.chapter{ padding-block:clamp(56px,8vw,104px); }
.chapter-head{ display:grid; grid-template-columns:auto 1fr; gap:6px 20px; align-items:baseline;
  border-top:2px solid var(--line-strong); padding-top:16px; margin-bottom:clamp(30px,4vw,50px); }
.chapter-head .idx{ font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600; color:var(--coral-deep);
  font-variant-numeric:tabular-nums; }
.chapter-head .kicker{ grid-column:2; }
.chapter-head h2{ grid-column:2; margin-top:8px; }
.chapter-head .stand{ grid-column:2; color:var(--body); font-size:1.06rem; margin-top:14px; max-width:60ch; }

/* =====================================================================
   HERO (light)
   ===================================================================== */
.hero{ position:relative; padding-block:clamp(40px,7vw,84px) clamp(46px,7vw,88px);
  border-bottom:1px solid var(--line); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.7; pointer-events:none;
  background:radial-gradient(46% 52% at 100% 0%, rgba(228,240,231,.9), transparent 60%),
             radial-gradient(40% 40% at 0% 100%, rgba(239,91,84,.06), transparent 60%); }
.masthead{ display:flex; align-items:center; gap:16px; font-family:'Manrope',sans-serif; font-weight:700;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--body); margin-bottom:clamp(28px,5vw,52px); }
.masthead .ln{ flex:1; height:1px; background:var(--line); }
.masthead .dot{ width:7px; height:7px; border-radius:50%; background:var(--coral); flex:none; }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:clamp(34px,5vw,56px); align-items:end; }
@media (min-width:900px){ .hero-grid{ grid-template-columns:1.12fr .88fr; } }
.hero h1{ max-width:16ch; }
.hero h1 .serif-ital{ color:var(--coral-deep); }
.hero-lead{ margin-top:26px; max-width:40ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center; margin-top:32px; }
.hero-figure figcaption{ font-size:.82rem; color:var(--body); text-align:center; margin-top:12px;
  max-width:36ch; margin-inline:auto; line-height:1.5; }
.arc-svg{ width:100%; height:auto; overflow:visible; }

/* in-this-issue index strip */
.issue{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:clamp(40px,6vw,66px); }
.issue ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .issue ol{ grid-template-columns:repeat(5,1fr); } }
.issue li a{ display:block; padding:18px 4px; border-left:1px solid var(--line); padding-left:16px;
  transition:background .2s var(--ease); }
.issue li:first-child a{ border-left:0; padding-left:4px; }
.issue li a:hover{ background:var(--mint); }
.issue .n{ font-family:'Fraunces',serif; color:var(--coral-deep); font-size:.8rem; }
.issue .t{ display:block; font-weight:700; font-size:.96rem; margin-top:4px; }
@media (max-width:759px){ .issue li:nth-child(odd) a{ border-left:0; padding-left:4px; } }

/* =====================================================================
   WHAT WE DO — asymmetric ruled index
   ===================================================================== */
.svc{ display:grid; grid-template-columns:1fr; gap:6px 30px; padding:26px 0; border-top:1px solid var(--line);
  transition:padding-left .25s var(--ease); }
.svc:first-of-type{ border-top:0; }
@media (min-width:820px){ .svc{ grid-template-columns:auto 1fr auto; align-items:start; }
  .svc:hover{ padding-left:10px; } }
.svc-no{ font-family:'Fraunces',serif; font-size:clamp(1.6rem,3vw,2.3rem); color:var(--coral-deep);
  font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.svc-body h3{ font-size:clamp(1.4rem,2.6vw,2rem); }
.svc-body p{ color:var(--body); margin-top:10px; max-width:56ch; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.tag{ font-size:.76rem; font-weight:600; color:var(--rind); background:var(--mint); border-radius:999px; padding:5px 12px; }
.svc-side{ font-size:.8rem; color:var(--body); max-width:22ch; }
.svc-side b{ display:block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--seed); margin-bottom:4px; }
@media (max-width:819px){ .svc-side{ display:none; } }

/* =====================================================================
   HOW WE SOURCE — horizontal ruled timeline
   ===================================================================== */
.timeline{ position:relative; }
.tl-rail{ position:absolute; left:0; right:0; top:11px; height:2px; background:var(--line); }
.tl-rail::after{ content:""; position:absolute; left:0; top:0; height:100%; width:calc(var(--p,0)*100%);
  background:var(--coral); transition:width .12s linear; }
.tl-steps{ display:grid; gap:26px; grid-template-columns:1fr; }
@media (min-width:760px){ .tl-steps{ grid-template-columns:repeat(4,1fr); gap:0; } }
.step{ padding-right:22px; position:relative; }
@media (max-width:759px){ .step{ padding-left:26px; } .tl-rail{ left:5px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .tl-rail::after{ width:100%; height:calc(var(--p,0)*100%); } }
.step-dot{ width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--rind-300);
  position:relative; z-index:2; margin-bottom:20px; }
@media (max-width:759px){ .step-dot{ position:absolute; left:0; top:2px; } }
.step.is-active .step-dot, .step.is-done .step-dot{ background:var(--coral); border-color:var(--coral); }
.step .lbl{ font-family:'Fraunces',serif; color:var(--coral-deep); font-weight:600; font-size:.82rem; letter-spacing:.06em; }
.step h3{ font-size:1.18rem; margin:6px 0 8px; }
.step p{ color:var(--body); font-size:.95rem; max-width:30ch; }
html.reveal-on .step{ opacity:.5; transition:opacity .4s var(--ease); }
html.reveal-on .step.is-active, html.reveal-on .step.is-done{ opacity:1; }

/* =====================================================================
   MANIFESTO — big pull-quote (replaces the dark comparison)
   ===================================================================== */
.manifesto{ position:relative; }
.pullquote{ font-family:'Fraunces',serif; font-weight:600; font-size:clamp(1.9rem,4.4vw,3.3rem);
  line-height:1.12; letter-spacing:-.02em; max-width:20ch; }
.pullquote .hl{ color:var(--coral-deep); font-style:italic; }
.manifesto .mark{ font-family:'Fraunces',serif; font-size:5rem; line-height:0; color:var(--coral);
  display:block; height:.5em; }
.manifesto-foot{ display:grid; gap:26px; grid-template-columns:1fr; margin-top:clamp(34px,5vw,52px);
  padding-top:30px; border-top:1px solid var(--line); }
@media (min-width:760px){ .manifesto-foot{ grid-template-columns:repeat(3,1fr); } }
.mf{ }
.mf h4{ font-family:'Manrope',sans-serif; font-weight:800; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--coral-deep); margin-bottom:8px; }
.mf p{ color:var(--body); font-size:.98rem; }

/* =====================================================================
   ORIGINS — editorial ruled list
   ===================================================================== */
.origin{ display:grid; grid-template-columns:1fr auto; gap:6px 24px; align-items:center;
  padding:20px 0; border-top:1px solid var(--line); }
.origin:first-of-type{ border-top:2px solid var(--line-strong); }
.origin .region{ font-family:'Fraunces',serif; font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:600;
  display:flex; align-items:center; gap:14px; }
.origin .region .d{ width:9px; height:9px; border-radius:2px; background:var(--rind-600); flex:none; }
.origin .meta{ display:flex; gap:22px; align-items:baseline; text-align:right; }
.origin .mode{ color:var(--body); font-weight:600; font-size:.92rem; }
.origin .transit{ color:var(--coral-deep); font-weight:700; font-size:.9rem; letter-spacing:.02em; }
@media (max-width:540px){ .origin{ grid-template-columns:1fr; } .origin .meta{ text-align:left; justify-content:flex-start; } }

/* =====================================================================
   GOODS — two-column ruled list
   ===================================================================== */
.goods{ display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:760px){ .goods{ grid-template-columns:1fr 1fr; column-gap:48px; } }
.good{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:24px 0; border-top:1px solid var(--line); }
.good .ico{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--mint);
  color:var(--rind); flex:none; }
.good .ico svg{ width:22px; height:22px; }
.good h3{ font-size:1.16rem; }
.good p{ color:var(--body); font-size:.92rem; margin-top:5px; }
.good .held{ margin-top:10px; font-size:.78rem; color:var(--body); }
.good .held b{ color:var(--seed); font-weight:700; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; }

/* =====================================================================
   FAQ — borderless ruled Q&A
   ===================================================================== */
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:22px 0; font-family:'Fraunces',serif; font-weight:600;
  font-size:clamp(1.15rem,2.2vw,1.5rem); display:flex; justify-content:space-between; gap:18px; align-items:baseline; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .chev{ width:22px; height:22px; flex:none; color:var(--coral-deep); transition:transform .25s var(--ease); align-self:center; }
.faq details[open] summary .chev{ transform:rotate(45deg); color:var(--coral); }
.faq .ans{ padding:0 0 24px; color:var(--body); line-height:1.62; max-width:64ch; }

/* =====================================================================
   ENQUIRY — light close
   ===================================================================== */
.enq-grid{ display:grid; grid-template-columns:1fr; gap:clamp(30px,5vw,56px); }
@media (min-width:860px){ .enq-grid{ grid-template-columns:1fr 1fr; align-items:start; } }
.enq-lead .pullquote{ font-size:clamp(1.7rem,3.6vw,2.6rem); max-width:16ch; }
.enq-contact{ margin-top:28px; display:grid; gap:14px; }
.enq-contact a, .enq-contact div{ display:flex; align-items:center; gap:12px; color:var(--seed); font-weight:600; }
.enq-contact svg{ width:19px; height:19px; color:var(--rind-600); flex:none; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:700; font-size:.82rem; margin-bottom:7px; }
.input, textarea.input{ width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px;
  background:#fff; font:inherit; font-size:16px; color:var(--seed);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.input:focus{ border-color:var(--rind); outline:none; box-shadow:0 0 0 3px rgba(15,61,46,.14); }
textarea.input{ resize:vertical; min-height:120px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ font-size:.82rem; color:var(--body); margin-top:8px; }

/* =====================================================================
   COLOPHON FOOTER (light)
   ===================================================================== */
.colophon{ border-top:2px solid var(--line-strong); padding-block:clamp(40px,5vw,60px) 30px; }
.colophon-grid{ display:grid; gap:28px; grid-template-columns:1fr; }
@media (min-width:760px){ .colophon-grid{ grid-template-columns:1.7fr 1fr 1fr; } }
.colophon .addr{ font-size:.92rem; line-height:1.7; color:var(--body); margin-top:16px; max-width:34ch; }
.colophon h4{ font-family:'Manrope',sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--seed); margin-bottom:14px; }
.colophon ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.92rem; }
.colophon a{ color:var(--body); } .colophon a:hover{ color:var(--rind); }
.colophon-bar{ margin-top:38px; padding-top:20px; border-top:1px solid var(--line); display:flex;
  flex-wrap:wrap; gap:10px 20px; justify-content:space-between; font-size:.8rem; color:var(--body); }

/* =====================================================================
   UTILITIES
   ===================================================================== */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:80; background:var(--coral);
  transform:scaleX(0); transform-origin:0 50%; }
@media (min-width:1024px){ .scroll-progress{ left:var(--rail); } }
@media (prefers-reduced-motion:reduce){ .scroll-progress{ display:none; } }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--rind); color:#fff;
  padding:12px 18px; border-radius:0 0 12px 0; font-weight:700; }
.skip-link:focus{ left:0; }

/* Scroll reveal is an ENHANCEMENT and must never gate visibility. The hidden
   state is scoped to `html.reveal-on`, a class that ONLY site.js adds once it is
   running and about to reveal. If the script does not execute (blocked, static
   preview), the class is never set and all content is visible by default. The
   1.6s fallback animation is a second safety net for a flaky IntersectionObserver. */
html.reveal-on .reveal{ opacity:0; transform:translateY(20px);
  animation:reveal-fallback .01s linear 1.6s forwards; }
html.reveal-on .reveal.is-visible{ opacity:1; transform:none; animation:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
html.reveal-on .reveal[data-delay="1"].is-visible{ transition-delay:.06s; }
html.reveal-on .reveal[data-delay="2"].is-visible{ transition-delay:.12s; }
html.reveal-on .reveal[data-delay="3"].is-visible{ transition-delay:.18s; }
@keyframes reveal-fallback{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ html.reveal-on .reveal{ opacity:1; transform:none; animation:none; } }

/* Placeholder highlight — delete this rule once every [token] is filled */
.ph{ background:#FDECA8; color:#5a4a00; padding:0 .2em; border-radius:3px; font-weight:700; }

/* =====================================================================
   POLISH PASS — depth, rhythm, editorial signatures
   ===================================================================== */

/* Subtle paper grain sits between the body canvas and content, so the warm
   paper reads as a surface rather than a flat fill. pointer-events:none. */
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Giant ghosted chapter numeral behind each section head */
.chapter-head{ position:relative; }
.chapter-head[data-fig]::before{ content:attr(data-fig); position:absolute; top:-.42em; right:-.04em;
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(5rem,15vw,12rem); line-height:.72;
  letter-spacing:-.05em; color:var(--seed); opacity:.05; pointer-events:none; z-index:0; }
.chapter-head > *{ position:relative; z-index:1; }
@media (max-width:860px){ .chapter-head[data-fig]::before{ display:none; } }

/* Type rhythm */
h1,h2,h3{ font-feature-settings:"liga" 1,"dlig" 1,"calt" 1; }
.display-1{ letter-spacing:-.032em; }
.display-2{ letter-spacing:-.024em; }

/* Hero: a soft coral glow behind the arc figure adds depth */
.hero-figure{ position:relative; }
.hero-figure::before{ content:""; position:absolute; inset:-14% -10% 20% 8%; z-index:-1;
  background:radial-gradient(60% 60% at 70% 34%, rgba(239,91,84,.12), transparent 70%); }

/* Service rows: a coral marker slides in on hover */
.svc{ position:relative; }
.svc::before{ content:""; position:absolute; left:-14px; top:30px; width:6px; height:6px; border-radius:50%;
  background:var(--coral); opacity:0; transform:scale(.4); transition:opacity .25s var(--ease), transform .25s var(--ease); }
@media (min-width:820px){ .svc:hover::before{ opacity:1; transform:scale(1); } }

/* Side-rail scroll spy */
.rail-nav a{ position:relative; }
.rail-nav a::before{ content:""; position:absolute; left:-26px; top:9px; bottom:9px; width:3px;
  background:var(--coral); border-radius:2px; transform:scaleY(0); transform-origin:50% 0;
  transition:transform .25s var(--ease); }
.rail-nav a.active::before{ transform:scaleY(1); }
.rail-nav a.active{ color:var(--rind); background:var(--mint); }
.rail-nav a.active .n{ color:var(--coral-deep); }

/* --------- Manifesto as a dark feature spread (one intentional dark moment) --------- */
.manifesto{ background:var(--rind); color:#E7F0EA; }
.manifesto::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:radial-gradient(46% 60% at 92% 0%, rgba(239,91,84,.18), transparent 60%),
             radial-gradient(40% 60% at 0% 100%, rgba(143,187,166,.16), transparent 60%); }
.manifesto{ position:relative; isolation:isolate; }
.manifesto .inner{ position:relative; z-index:1; }
.manifesto .chapter-head{ border-top-color:rgba(231,240,234,.28); }
.manifesto .chapter-head .idx,
.manifesto .kicker{ color:#EF9A94; }
.manifesto h2{ color:#fff; }
.manifesto .chapter-head[data-fig]::before{ color:#fff; opacity:.09; }
.manifesto .pullquote{ color:#fff; }
.manifesto .pullquote .hl{ color:#EF9A94; }
.manifesto .mark{ color:var(--coral); }
.manifesto-foot{ border-top-color:rgba(231,240,234,.18); }
.manifesto .mf h4{ color:#EF9A94; }
.manifesto .mf p{ color:#CFE0D5; }

/* --------- Buy or sell: two-sides-of-the-trade panels --------- */
.sides{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:820px){ .sides{ grid-template-columns:1fr 1fr; } }
.side{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px);
  box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.side:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.side h3{ font-size:clamp(1.4rem,2.6vw,1.85rem); display:flex; align-items:center; gap:14px; }
.side-ico{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:none;
  background:var(--mint); color:var(--rind); }
.side-ico svg{ width:24px; height:24px; }
.side > p{ color:var(--body); margin-top:14px; max-width:46ch; }
.side ul{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; }
.side li{ display:flex; gap:11px; color:var(--seed); font-weight:500; line-height:1.45; }
.side li svg{ width:19px; height:19px; flex:none; margin-top:2px; color:var(--coral); }

/* --------- Hero figure: framed, centred panel so the diagram holds the column --------- */
.hero-grid{ align-items:center; }
.hero-figure{ background:radial-gradient(125% 92% at 50% 0%, var(--mint), #fff 72%);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-md);
  padding:clamp(26px,3vw,44px); display:flex; flex-direction:column; justify-content:center; }
.hero-figure::before{ display:none; }   /* panel now provides the depth; drop the old glow */
.hero-figure .arc-svg{ width:100%; max-width:430px; margin:0 auto; }

/* =====================================================================
   RESTRAINT PASS — smaller, grounded type + denser spacing.
   Kills the oversized "AI landing page" look: headline drops from ~90px
   to ~48px, decorative ghost numerals removed, sections tightened.
   ===================================================================== */
.display-1{ font-size:clamp(1.9rem,3.2vw,2.95rem); line-height:1.14; letter-spacing:-.018em; }
.display-2{ font-size:clamp(1.35rem,2vw,1.8rem); line-height:1.15; letter-spacing:-.012em; }
.lead{ font-size:clamp(1rem,1.1vw,1.1rem); line-height:1.6; }
.hero{ padding-block:clamp(28px,3.5vw,48px) clamp(32px,4vw,54px); }
.hero-lead{ margin-top:16px; }
.hero-actions{ margin-top:24px; }
.chapter{ padding-block:clamp(38px,5vw,62px); }
.chapter-head{ margin-bottom:clamp(22px,2.6vw,32px); }
.chapter-head h2{ margin-top:6px; }
.chapter-head .stand{ font-size:1rem; margin-top:10px; }
/* remove the oversized ghosted chapter numerals (a design flourish that reads as AI) */
.chapter-head[data-fig]::before{ display:none; }
.svc{ padding:20px 0; }
.svc-no{ font-size:clamp(1.1rem,1.6vw,1.35rem); }
.svc-body h3{ font-size:clamp(1.1rem,1.5vw,1.3rem); }
.svc-body p{ margin-top:7px; }
.side h3{ font-size:clamp(1.12rem,1.6vw,1.35rem); }
.good h3{ font-size:1.1rem; }
.faq summary{ font-size:clamp(1rem,1.3vw,1.15rem); padding:17px 0; }
.pullquote{ font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.32; max-width:36ch; }
.enq-lead .pullquote{ font-size:clamp(1.15rem,1.8vw,1.45rem); }
.manifesto .mark{ font-size:2.8rem; }
.nav-overlay a.ov-link{ font-size:1.18rem; }
.masthead{ margin-bottom:clamp(22px,3vw,36px); }

/* =====================================================================
   PLAIN PASS — all-sans headings + light manifesto (client: less "designed")
   ===================================================================== */
/* Every serif use switches to Manrope so nothing falls back to Georgia. */
h1,h2,h3,h4,
.rail-nav .n, .nav-overlay a.ov-link, .chapter-head .idx, .issue .n, .svc-no,
.step .lbl, .pullquote, .manifesto .mark, .origin .region, .faq summary{
  font-family:'Manrope',system-ui,sans-serif;
}
h1,h2,h3,h4{ letter-spacing:-.02em; }
.pullquote{ font-weight:700; letter-spacing:-.01em; }
.serif-ital{ font-style:normal; color:var(--coral-deep); }   /* was a serif italic flourish */

/* Manifesto: dark feature band -> plain light section */
.manifesto{ background:transparent; color:var(--seed); }
.manifesto::after{ display:none; }
.manifesto .chapter-head{ border-top-color:var(--line-strong); }
.manifesto .chapter-head .idx,
.manifesto .kicker{ color:var(--coral-deep); }
.manifesto h2{ color:var(--seed); }
.manifesto .pullquote{ color:var(--seed); }
.manifesto .pullquote .hl{ color:var(--coral-deep); }
.manifesto .mark{ color:var(--coral); }
.manifesto-foot{ border-top-color:var(--line); }
.manifesto .mf h4{ color:var(--coral-deep); }
.manifesto .mf p{ color:var(--body); }