/* ============================================================================
   Afritrust Investment Limited — landing page
   Built to the approved design basis (runway C1–C7) and the responsive spec.

   Purple #66327C and gold #FFBC2D are sampled from the company letterhead, not
   approximated. Everything else is a step from one of those two.

   THE OPERATIVE COLOUR RULE, from the brand basis: gold is a FILL, not a text
   colour on light. It measures 1.68:1 on white and is unreadable as words.
   Where gold has to be read on a light ground, use --gold-deep. Gold as type is
   correct only on deep purple.
   ========================================================================= */

:root{
  /* inherited — sampled from the letterhead, never adjusted */
  --purple:#66327C;
  --gold:#FFBC2D;

  /* derived — each one a step from a brand colour */
  --purple-900:#33193E;    /* deepest ground, footer */
  --purple-800:#4B2459;    /* dark surfaces, hero ground */
  --purple-400:#8A5FA0;    /* borders and muted text on dark */
  --purple-50:#F0E8F4;     /* tinted panels and card fills */
  --gold-deep:#7D600E;     /* gold when it has to be read as words */
  --ink:#1C1720;           /* body copy */
  --ink-muted:#5A5460;     /* captions, secondary text */
  --ink-body:#3B3542;      /* secondary body inside panels */
  --paper:#FBFAFB;         /* page ground */
  --line:#E5E1E8;          /* rules and dividers */

  /* supporting — documented in the pre-build audit */
  --field-line:#D2CBD9;    /* input boundary */
  --placeholder:#736B7D;   /* placeholder text, meets AA */
  --numeral:#7D6C8E;       /* step and row numerals */
  --lilac:#D9CBE2;         /* body copy on purple */
  --lilac-muted:#B9A6C6;   /* captions and meta on purple */
  --white:#FFFFFF;

  --head:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* THE BODY FACE CARRIES THE NAIRA SIGN AND MANROPE DOES NOT. Anything that
     renders ₦ must resolve to this stack. tools/naira.spec.mjs enforces it. */
  --sans:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --t-control:120ms;
  --t-menu:180ms;
  --ease:cubic-bezier(.2,0,.2,1);

  --gutter:56px;
  --maxw:1288px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is not decoration. Every <img> carries width= and height=
   attributes so the browser can reserve the right box before the file
   arrives — but those attributes are also PRESENTATIONAL HINTS, i.e. real
   `width:900px; height:672px` declarations. A rule that sets only `width:100%`
   overrides the width hint and leaves the height one standing, so the picture
   is squeezed into a box of the wrong shape. That is what happened to the
   Why Afritrust and Partner photographs (47% and 54% distorted on desktop,
   61% and 71% on a phone) and, less visibly, to the reversed logo in the
   mobile menu and the footer, both squashed 9%.
   Declaring it here fixes the whole class of it. The rules below that
   deliberately set a height — the hero, the thumbnails, the context band —
   are more specific and still win. */
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head); margin:0; letter-spacing:-.02em}
h1{font-size:58px; line-height:1.04; font-weight:800}
h2{font-size:38px; line-height:1.12; font-weight:800}
h3{font-size:20px; line-height:1.3; font-weight:700; letter-spacing:-.01em}
h4{font-size:16px; line-height:1.35; font-weight:700}
p{margin:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
section{padding:84px 0}

/* Hidden by translation, not by left:-9999px. The old trick puts a real box
   9999px outside the page and some browsers count that in the scrollable area,
   which is how a page ends up able to scroll sideways by a few pixels for no
   visible reason. */
.skip{
  position:absolute; left:0; top:0; z-index:100;
  background:var(--purple); color:#FFF; padding:12px 18px;
  transform:translateY(-140%);
}
.skip:focus{transform:none}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--purple); outline-offset:2px;
}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 26px; border:1px solid transparent; border-radius:3px;
  font-family:var(--sans); font-size:16.5px; font-weight:700; text-decoration:none;
  cursor:pointer; transition:background var(--t-control) var(--ease), border-color var(--t-control) var(--ease);
}
/* Gold on purple-900 text: 7.36:1. The primary action everywhere except the
   calculator, where the ground is gold and this would vanish. */
.btn-gold{background:var(--gold); color:var(--purple-900)}
.btn-gold:hover{background:#F0A800}
.btn-gold:active{background:#DE9B00}
.btn-purple{background:var(--purple); color:#FFF}
.btn-purple:hover{background:var(--purple-800)}
.btn-ghost{background:transparent; border-color:var(--field-line); color:var(--purple)}
.btn-ghost:hover{border-color:var(--purple)}
.btn-on-dark{background:transparent; border-color:var(--purple-400); color:#FFF}
.btn-on-dark:hover{border-color:#FFF}
.btn[disabled]{opacity:.6; cursor:default}

/* ------------------------------------------------------------------- header */
.header{
  position:sticky; top:0; z-index:40; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-in{display:flex; align-items:center; gap:32px; height:84px}
.brand{display:flex; align-items:center; flex-shrink:0}
.brand img{width:206px; height:auto}
.nav{display:flex; gap:26px; margin-left:12px}
.nav a{
  font-size:16px; font-weight:600; color:var(--ink); text-decoration:none;
  padding:6px 0; position:relative;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--gold); transition:width var(--t-control) var(--ease);
}
.nav a:hover::after{width:100%}
.header .btn{margin-left:auto}
.burger{
  display:none; margin-left:auto; width:46px; height:46px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:3px; cursor:pointer;
}
.burger span, .burger span::before, .burger span::after{
  content:''; display:block; width:20px; height:2px; background:var(--ink); position:relative;
}
.burger span::before{position:absolute; top:-6px}
.burger span::after{position:absolute; top:6px}

/* --------------------------------------------------------------- mobile menu */
.menu{
  position:fixed; inset:0; z-index:50; background:var(--purple-900); color:#FFF;
  padding:24px var(--gutter) 40px; overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity var(--t-menu) var(--ease), visibility var(--t-menu);
}
.menu[data-open="true"]{opacity:1; visibility:visible}
.menu-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:36px}
.menu-top img{width:190px}
.menu-close{
  width:46px; height:46px; background:transparent; border:1px solid var(--purple-400);
  border-radius:3px; color:#FFF; font-size:26px; line-height:1; cursor:pointer;
}
.menu nav{display:flex; flex-direction:column; gap:2px; margin-bottom:28px}
.menu nav a{
  font-family:var(--head); font-size:26px; font-weight:700; text-decoration:none;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12);
}
.menu .btn{width:100%}
.menu-foot{margin-top:32px; color:var(--lilac); font-size:15px; line-height:1.7}
.menu-foot a{color:#FFF}

/* --------------------------------------------------------------------- hero */
.hero{position:relative; background:var(--purple-800); color:#FFF; overflow:hidden}
/* The wrapper is a <picture>, and object-fit does not apply to it — it has to
   go on the <img> inside, or the photograph keeps its own aspect ratio and
   stops short of the band. */
.hero-bg{position:absolute; inset:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 42%}
/* The scrim is calibrated to keep the headline legible over the photograph —
   measured, not eyeballed. Do not lighten it without re-measuring. */
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(75,36,89,.96) 0%, rgba(75,36,89,.88) 42%, rgba(75,36,89,.72) 100%);
}
.hero-in{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 580px; gap:64px; align-items:center; padding:72px 0 80px}
.hero h1{margin-top:14px; max-width:13ch}
.hero-sub{margin-top:22px; font-size:19px; line-height:1.55; color:var(--lilac); max-width:46ch}
.hero-rule{margin:30px 0 18px; width:100%; max-width:520px; height:1px; background:rgba(255,255,255,.24); border:0}
.hero-line{display:flex; flex-wrap:wrap; gap:22px; align-items:baseline}
.hero-tag{font-weight:700; color:var(--gold); font-size:16.5px}
.hero-phone{color:#FFF; text-decoration:none; font-size:16.5px}

.eyebrow{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--gold-deep);
}
.hero .eyebrow{color:var(--gold)}

/* ------------------------------------------------------------ section marker */
.marker{display:flex; align-items:flex-start; gap:12px}
.marker svg{flex-shrink:0; width:22px; height:22px; margin-top:2px; color:var(--gold)}
.marker .eyebrow{display:block; margin-bottom:6px}
.lead{margin-top:14px; font-size:18px; line-height:1.6; color:var(--ink-muted); max-width:58ch}
.on-purple .lead{color:var(--lilac)}

/* ------------------------------------------------------------------- panels */
.card{background:#FFF; border:1px solid var(--line); border-radius:4px}
.panel{background:#FFF; border:1px solid var(--line); border-radius:4px; padding:30px}

/* -------------------------------------------------------------------- forms */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.field > label{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--ink-muted);
}
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:16.5px; color:var(--ink);
  background:#FFF; border:1px solid var(--field-line); border-bottom-width:2px;
  border-radius:3px; padding:13px 14px; width:100%;
  transition:border-color var(--t-control) var(--ease);
}
.field textarea{resize:vertical; min-height:52px}
.field input::placeholder, .field textarea::placeholder{color:var(--placeholder)}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--purple)}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select{border-color:#A3232A}
.field .hint{font-size:14px; color:var(--ink-muted)}
.err{font-size:14px; line-height:1.45; color:#A3232A; min-height:0}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
/* The honeypot is clipped to nothing rather than parked off-canvas, for the
   same reason as the skip link — and it stays out of the accessibility tree
   via aria-hidden and tabindex, so no person ever meets it. */
.hp{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.form-msg{margin-top:14px; font-size:15px; line-height:1.5}
.form-msg[data-kind="error"]{color:#A3232A}
.consent{margin-top:14px; font-size:14.5px; line-height:1.55; color:var(--ink-muted)}
.consent a{color:var(--purple); font-weight:700}
.done h3{color:var(--ink)}
.done p{margin-top:12px; color:var(--ink-muted)}

/* ---------------------------------------------------------- hero lead form */
.lead-form{background:#FFF; border-radius:5px; padding:30px; color:var(--ink); box-shadow:0 20px 50px rgba(28,23,32,.22)}
.lead-form h2{font-size:24px; margin-bottom:20px}
.lead-form .btn{width:100%}
.reassure{margin-top:14px; text-align:center; font-size:14.5px; line-height:1.55; color:var(--ink-muted)}
.reassure strong{color:var(--ink)}

/* ---------------------------------------------------------------- verticals */
.vert{display:grid; grid-template-columns:44px 176px minmax(0,1fr) 340px; gap:28px; padding:34px 0; border-top:1px solid var(--line)}
.vert:first-child{border-top:0}
.vert-n{font-family:var(--head); font-size:15px; font-weight:700; color:var(--numeral); font-variant-numeric:tabular-nums; padding-top:5px}
.vert-img img{width:176px; height:118px; object-fit:cover; border-radius:3px}
.vert-body p{margin-top:10px; color:var(--ink-muted); line-height:1.6}
.vert-meta .eyebrow{display:block; margin-bottom:4px}
.vert-meta p{font-size:15.5px; line-height:1.5; color:var(--ink-body); margin-bottom:14px}
.inline-link{display:inline-flex; align-items:center; gap:6px; color:var(--purple); font-weight:700; text-decoration:none; font-size:15.5px}
.inline-link:hover{text-decoration:underline}
/* Every chevron that sits inside a line of text is sized here, once. */
.inline-link svg{width:14px; height:14px; flex-shrink:0}
.calc-break > svg{width:20px; height:20px; color:var(--gold); flex-shrink:0}

/* -------------------------------------------------------------------- solar */
.solar{background:var(--purple-50)}
.packs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:38px}
.pack{background:#FFF; border:1px solid var(--line); border-top:4px solid var(--purple); border-radius:3px; padding:24px; display:flex; flex-direction:column}
.pack.is-popular{border-top-color:var(--gold)}
.pack-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tag{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  background:var(--gold); color:var(--purple-900); padding:3px 8px; border-radius:2px;
}
.pack p{margin-top:10px; color:var(--ink-muted); font-size:16px; line-height:1.55}
.pack .eyebrow{margin-top:auto; padding-top:16px}
.pack .inline-link{margin-top:8px}
.solar-close{margin-top:30px; color:var(--ink-muted); max-width:62ch}

/* --------------------------------------------------------------- calculator
   THE ROLES INVERT ON THIS BAND. Gold is the ground, so purple carries both the
   artwork and the type. Headings are purple-900 (9.25:1 on gold), body is
   purple-800 (7.36:1), labels are purple (5.40:1). --ink-muted is NOT used on
   gold: it measures 4.35:1 and fails for body text. */
.calc{background:var(--gold); position:relative; overflow:hidden}
.calc .eyebrow{color:var(--purple-800)}
.calc .marker svg{color:var(--purple-900)}
.calc h2{color:var(--purple-900)}
.calc .lead{color:var(--purple-800)}
.calc-chevron{position:absolute; right:-90px; top:50%; transform:translateY(-50%); width:420px; color:var(--purple-900); pointer-events:none}
.calc-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; margin-top:36px; max-width:1000px}
.calc-inputs{background:#FFF; border-radius:4px; padding:26px}
.calc-inputs .eyebrow{color:var(--purple); display:block; margin-bottom:16px}
.calc-fields{display:grid; grid-template-columns:1fr 1fr; gap:0 20px}
.calc-out{background:var(--purple-800); color:#FFF; border-radius:4px; overflow:hidden; align-self:start}
.calc-out-row{display:grid; grid-template-columns:1fr 1fr}
.calc-cell{padding:22px 24px}
.calc-cell + .calc-cell{border-left:1px solid rgba(255,255,255,.16)}
.calc-cell .eyebrow{color:var(--lilac-muted); display:block; margin-bottom:8px}
/* Figures are Source Sans 3 and must stay that way — Manrope has no ₦. */
.figure{font-family:var(--sans); font-size:31px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums}
.calc-cell small{display:block; margin-top:8px; font-size:14.5px; line-height:1.5; color:var(--lilac)}
.calc-break{display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--purple-900); padding:20px 24px}
.calc-break .eyebrow{color:var(--gold); display:block; margin-bottom:4px}
.calc-break .figure{color:var(--gold); font-family:var(--head); font-size:30px}
.calc-break .note{margin-left:auto; max-width:26ch; text-align:right; font-size:14.5px; line-height:1.45; color:var(--lilac)}
.calc-cta{position:relative; display:flex; align-items:center; gap:24px; flex-wrap:wrap; background:#FFF; border-radius:4px; padding:22px 26px; margin-top:22px; max-width:1000px}
.calc-cta .carry{font-weight:700; color:var(--ink)}
.calc-disc{border-left:2px solid var(--line); padding-left:18px; margin-left:auto; max-width:44ch; font-size:14.5px; line-height:1.5; color:var(--ink-muted)}

/* ------------------------------------------------------------------ process */
.steps{list-style:none; margin:34px 0 0; padding:0}
.step{display:grid; grid-template-columns:66px minmax(0,1fr); gap:20px; padding:26px 0; border-top:1px solid var(--line)}
.step-n{font-family:var(--head); font-size:20px; font-weight:700; color:var(--numeral); font-variant-numeric:tabular-nums}
.step p{margin-top:8px; color:var(--ink-muted); max-width:56ch}
.badge{
  display:inline-block; margin-top:14px; padding:7px 13px; border-radius:3px;
  background:var(--purple-50); color:var(--purple-900);
  font-size:13.5px; font-weight:700;
}
.docs{margin-top:20px; background:#FFF; border:1px solid var(--line); border-radius:4px; padding:24px}
/* While closed the whole card is the control, so the whole card says so. */
.docs:has(.docs-fold:not([open])){cursor:pointer}
.docs:has(.docs-fold:not([open])):hover{border-color:var(--purple)}
/* The document list folds. The summary is the whole heading row, so the hit
   area is the full width and not just the words; the browser's own triangle
   is replaced by the brand chevron, which turns to point down when open. */
.docs-fold summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  cursor:pointer; list-style:none; user-select:none;
}
.docs-fold summary::-webkit-details-marker{display:none}
.docs-fold summary:focus-visible{outline:2px solid var(--purple); outline-offset:6px; border-radius:2px}
.docs-fold summary .eyebrow{margin:0}
.docs-fold summary svg{width:16px; height:16px; flex-shrink:0; color:var(--purple); transition:transform .2s ease}
.docs-fold[open] summary{margin-bottom:16px}
.docs-fold[open] summary svg{transform:rotate(90deg)}
.doc-groups{display:grid; grid-template-columns:1fr 1fr; gap:22px 34px}
.doc-group h4{font-size:15.5px; margin-bottom:8px}
.doc-group ul{margin:0; padding-left:20px; color:var(--ink-muted); font-size:15.5px; line-height:1.7}
.docs-route{margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:15.5px; line-height:1.6; color:var(--ink-muted)}
.docs-route strong{color:var(--ink)}
.fraud{margin-top:14px; border-left:3px solid var(--gold); padding:2px 0 2px 14px; font-size:15.5px; line-height:1.55; color:var(--ink-body)}

/* -------------------------------------------------------------- context band */
.context{position:relative; height:250px; overflow:hidden; background:var(--purple-800)}
.context picture{position:absolute; inset:0}
.context img{width:100%; height:100%; object-fit:cover; object-position:50% 40%}
.context .scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(51,25,62,.42) 0%, rgba(51,25,62,.82) 100%)}
.context .cap{position:absolute; left:0; right:0; bottom:26px; display:flex; gap:14px; flex-wrap:wrap; align-items:baseline; color:#FFF}
.context .cap strong{color:var(--gold)}
.context .cap span{color:var(--lilac)}

/* ------------------------------------------------------------------ audience */
.on-purple{background:var(--purple); color:#FFF}
.on-purple h2, .on-purple h3{color:#FFF}
.on-purple .eyebrow{color:var(--gold)}
.on-purple .marker svg{color:var(--gold)}
.aud{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; margin-top:36px}
.aud-col{border-top:1px solid rgba(255,255,255,.28); padding-top:16px}
.aud-col p{margin-top:10px; color:var(--lilac); font-size:16px; line-height:1.55}

/* -------------------------------------------------------------------- why us */
.why-grid{display:grid; grid-template-columns:minmax(0,1fr) 480px; gap:56px; margin-top:30px; align-items:start}
.admission{font-size:19px; line-height:1.55; color:var(--ink-muted); max-width:52ch}
.admission strong{color:var(--ink)}
.values{display:grid; grid-template-columns:1fr 1fr; gap:0 40px; margin-top:28px}
.value{border-top:1px solid var(--line); padding:18px 0}
.value:nth-last-child(1){grid-column:1 / -1}
.value p{margin-top:8px; color:var(--ink-muted); font-size:16px; line-height:1.55}
.why-note{margin-top:22px; font-size:15.5px; line-height:1.6; color:var(--ink-muted); max-width:58ch}
.why-img img{width:100%; border-radius:4px}

/* -------------------------------------------------------------------- quote */
.quote{background:var(--purple-800); color:#FFF; position:relative; overflow:hidden}
.quote-chevron{position:absolute; left:-70px; bottom:-40px; width:330px; color:rgba(255,255,255,.05); pointer-events:none}
.quote-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 700px; gap:56px; align-items:start}
.quote h2{color:#FFF}
.quote .lead{color:var(--lilac)}
/* --gold-deep is for gold that has to be READ ON LIGHT. On this dark band it
   measures 2.09:1 and fails outright — the eyebrow and the marker take the
   full gold, which is 7.36:1 on purple-800. Every dark band on this site needs
   this pair of rules; the audit is what caught their absence here. */
.quote .eyebrow{color:var(--gold)}
.quote .marker svg{color:var(--gold)}
.quote-rule{margin:28px 0 0; width:100%; max-width:500px; height:1px; background:rgba(255,255,255,.22); border:0}
.assure{display:flex; gap:12px; margin-top:24px}
.assure svg{flex-shrink:0; width:18px; height:18px; margin-top:3px; color:var(--gold)}
.assure h3{font-size:17px; font-weight:700; font-family:var(--sans)}
.assure p{margin-top:4px; color:var(--lilac); font-size:15.5px; line-height:1.5}
.quote-card{background:#FFF; border-radius:5px; padding:32px; color:var(--ink)}
.quote-acts{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}

/* ----------------------------------------------------------------- partners */
.partners{background:var(--purple-50)}
.partner-grid{display:grid; grid-template-columns:minmax(0,1fr) 500px; gap:56px; margin-top:30px; align-items:start}
.partner-body p{margin-top:16px; color:var(--ink-muted); max-width:52ch}
.partner-body img{margin-top:26px; width:100%; max-width:560px; border-radius:4px}
.partner-card{background:#FFF; border:1px solid var(--line); border-radius:4px; padding:28px}
.partner-card .eyebrow{display:block; margin-bottom:16px}
.gets{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:12px}
.gets li{display:flex; gap:11px; align-items:flex-start; font-size:16.5px}
.gets svg{flex-shrink:0; width:16px; height:16px; margin-top:5px; color:var(--purple)}
.partner-card .btn{width:100%}
.partner-note{margin-top:14px; font-size:14.5px; line-height:1.5; color:var(--ink-muted)}

/* ------------------------------------------------------------------- footer */
.footer{background:var(--purple-900); color:#FFF; padding:64px 0 36px}
.footer-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px}
.footer img.logo{width:212px}
.footer-tag{margin-top:18px; color:var(--gold); font-weight:700; font-size:17px}
.footer p{color:var(--lilac); font-size:15.5px; line-height:1.7}
.footer a{color:#FFF}
.footer h4{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; color:var(--lilac-muted); margin-bottom:8px;
}
.footer .block + .block{margin-top:24px}
.footer-links{margin-top:18px; display:flex; gap:24px; flex-wrap:wrap}
.footer-links a{font-size:15.5px}
.footer-base{
  margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16);
  display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between;
  font-size:13.5px; color:var(--lilac-muted);
}

/* ------------------------------------------------------------ cookie consent
   Substantial rather than a thin strip — the GAID asks for a prominent notice.
   Both buttons are identical, which is the point: "equally accessible" is the
   wording of the requirement.

   A CENTRED MODAL. This was a bottom-left bar, placed there because a
   bottom-right card covered the hero form's submit button on a first screen.
   Centring sidesteps where-to-put-it entirely at the cost of standing in front
   of the whole page — including the lead form this site converts on — until
   the visitor answers. That is a deliberate client decision, not a default.

   The backdrop dims rather than blurs: a blur filter on a full-screen layer is
   a repaint on every scroll and this sits over the largest image on the site. */
.cookiebar-backdrop{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(28,23,32,.62);
  animation:cookiebar-fade .18s ease-out;
}
.cookiebar{
  width:440px; max-width:100%;
  max-height:calc(100vh - 40px); overflow-y:auto;
  background:var(--purple-900); color:#FFF;
  border:1px solid var(--purple-400); border-radius:4px; padding:30px 30px 26px;
  box-shadow:0 24px 64px rgba(28,23,32,.46);
  animation:cookiebar-rise .2s ease-out;
}
@keyframes cookiebar-fade{from{opacity:0}to{opacity:1}}
@keyframes cookiebar-rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
/* Someone who asks for less motion gets the dialog, not the movement. */
@media (prefers-reduced-motion:reduce){
  .cookiebar-backdrop,.cookiebar{animation:none}
}
/* Nothing behind a modal should scroll. Set on <html> by the component so the
   page cannot slide underneath the dialog on a phone. */
.cookiebar-open,.cookiebar-open body{overflow:hidden}
.cookiebar h2{font-family:var(--sans); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--lilac-muted); margin-bottom:10px}
.cookiebar p{font-size:14.5px; line-height:1.6; color:var(--lilac)}
.cookiebar-acts{display:flex; gap:10px; margin-top:18px}
.cookiebar-acts .btn{flex:1 1 0; min-width:0; background:transparent; border:1px solid var(--purple-400); color:#FFF}
.cookiebar-acts .btn:hover{border-color:#FFF; background:var(--purple-800)}
.cookiebar-more{margin-top:14px}
.cookiebar-more a{color:#FFF; font-size:13.5px}

/* --------------------------------------------------------------------- doc */
.doc{max-width:720px}
.doc h2{font-size:24px; margin-top:38px}
.doc p{margin-top:14px; color:var(--ink-muted)}
.doc p.intro{color:var(--ink); font-size:18px}
.doc a{color:var(--purple); font-weight:700}
.doc ul{margin-top:14px; padding-left:22px; color:var(--ink-muted); line-height:1.7}

/* ================================================================ breakpoints
   880px is the one that matters: the nav collapses to a full-screen overlay and
   every multi-column grid becomes one. Touch targets stay 44px throughout.
   The packages never become a carousel and the calculator keeps all seven
   inputs — both are in the approved responsive spec. */
@media (max-width:1180px){
  :root{--gutter:40px}
  .hero-in{grid-template-columns:minmax(0,1fr) 460px; gap:40px}
  .quote-grid{grid-template-columns:minmax(0,1fr) 560px; gap:40px}
  .why-grid,.partner-grid{grid-template-columns:minmax(0,1fr) 380px; gap:36px}
  .vert{grid-template-columns:36px 150px minmax(0,1fr) 280px; gap:22px}
  .packs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aud{grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 30px}
}
@media (max-width:880px){
  :root{--gutter:20px}
  section{padding:56px 0}
  h1{font-size:38px}
  h2{font-size:29px}
  .nav{display:none}
  .header > .wrap > .btn{display:none}
  .burger{display:flex}
  .hero-in{grid-template-columns:minmax(0,1fr); gap:32px; padding:44px 0 52px}
  .hero h1{max-width:none}
  .hero-scrim{background:linear-gradient(180deg, rgba(75,36,89,.90) 0%, rgba(75,36,89,.95) 100%)}
  .vert{grid-template-columns:minmax(0,1fr); gap:14px; padding:28px 0}
  .vert-n{display:none}
  .vert-img img{width:100%; height:170px}
  .vert-meta{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .packs{grid-template-columns:minmax(0,1fr)}
  .calc-grid,.calc-fields,.quote-grid,.why-grid,.partner-grid,.footer-grid,.form-row,.doc-groups,.values{grid-template-columns:minmax(0,1fr); gap:0}
  .calc-grid,.quote-grid,.why-grid,.partner-grid,.footer-grid{gap:28px}
  .doc-groups{gap:20px}
  .values{gap:0}
  .calc-chevron,.quote-chevron{display:none}
  .calc-out-row{grid-template-columns:minmax(0,1fr)}
  .calc-cell + .calc-cell{border-left:0; border-top:1px solid rgba(255,255,255,.16)}
  .calc-break .note{margin-left:0; text-align:left; max-width:none}
  .calc-disc{margin-left:0; border-left:0; border-top:1px solid var(--line); padding:14px 0 0}
  .aud{grid-template-columns:minmax(0,1fr)}
  .quote-card,.lead-form{padding:24px}
  .quote-acts .btn{flex:1 1 100%}
  .cookiebar-backdrop{padding:16px}
  .cookiebar{width:auto; padding:24px 20px 20px}
  /* Two full-width buttons rather than two half-width ones: at this size a
     side-by-side pair leaves "Decline" on two lines while "Accept" sits on
     one, and a pair of buttons that are not the same shape is exactly the
     imbalance the identical styling exists to avoid. */
  .cookiebar-acts{flex-direction:column; margin-top:16px; gap:10px}
  .context{height:200px}
}
@media (max-width:520px){
  h1{font-size:32px}
  .vert-meta{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important; animation:none!important; scroll-behavior:auto!important}
}
@media print{
  .header,.menu,.burger,.cookiebar,.cookiebar-backdrop,.calc-chevron,.quote-chevron{display:none}
  body{background:#FFF}
}