/* ==========================================================================
   London Editors — premium modern light theme
   Display type: Plus Jakarta Sans 800  ·  Body: Inter
   Brand: #D00000 red  ·  #2172DD blue

   Sections: 1 Tokens · 2 Reset · 3 Typography · 4 Buttons · 5 Animation utils
             6 Header/Nav · 7 Hero · 8 Marquee · 9 Stats · 10 Quote card
             11 Challenge/Solution · 12 Services · 13 Promo · 14 About
             15 Subjects carousel · 16 Publishing · 17 Reviews · 18 FAQ
             19 CTA · 20 Contact · 21 Footer · 22 Floating · 23 Responsive
             24 Reduced motion / print
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  --bg:       #FFFFFF;
  --bg-soft:  #F7F9FC;
  --bg-tint:  #EFF3F9;

  --ink:      #0C1524;
  --text:     #2B3648;
  --text-2:   #55637A;
  --muted:    #8593A8;

  --red:      #D00000;
  --red-600:  #A80000;
  --red-100:  #FDECEC;
  --red-50:   #FEF6F6;

  --blue:     #2172DD;
  --blue-600: #1858B0;
  --blue-100: #E9F1FD;
  --blue-50:  #F4F8FE;

  --line:     #E4EAF2;
  --line-2:   #EEF2F8;

  --whatsapp: #25D366;

  /* Display: heavy geometric grotesque — bold, professional, matches the current site.
     Swap to "Poppins" or "Manrope" here if the client prefers; both are drop-in. */
  --font-display: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* Applied to the top AND bottom of every section, so adjacent sections were
     stacking up to 16rem of empty space between them at desktop width. */
  --section-y: clamp(2.75rem, 4.5vw, 4.5rem);
  --radius: 14px;
  --radius-lg: 20px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  /* Layered shadows: a tight contact shadow plus a wide ambient one reads
     far more like real depth than a single large blur. */
  --shadow-sm: 0 1px 2px rgba(12, 21, 36, .05), 0 4px 12px rgba(12, 21, 36, .04);
  --shadow-md: 0 2px 4px rgba(12, 21, 36, .05), 0 14px 34px rgba(12, 21, 36, .08);
  --shadow-lg: 0 4px 8px rgba(12, 21, 36, .05), 0 30px 62px rgba(12, 21, 36, .12);
  --shadow-red:  0 10px 26px rgba(208, 0, 0, .26);
  --shadow-blue: 0 10px 26px rgba(33, 114, 221, .26);
}

/* ── 2. RESET ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.06rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  background: var(--red); color: #fff;
  padding: .7rem 1.2rem; border-radius: 8px; font-weight: 700;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }
.ceo-card__photo {
    width: 100% !important;
}
/* ── 3. TYPOGRAPHY ─────────────────────────────────────────────────────── */
/* Section headings: uppercase two-tone, as on the current site */
.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 1.15rem + 3vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -.032em;
  text-transform: uppercase;
  color: var(--ink);
}
.h2--tight { line-height: 1.04;    letter-spacing: 2px !important; }
.h2 em { font-style: normal; color: var(--red); }
.h2 em.blue { color: var(--blue); }

/* A geometric sans needs negative tracking once it gets large, or the
   counters open up and it stops reading as one solid word. */
.panel__title, .quote-card__title, .contact-card h3, .cta-strip__title,
.srv-box__title, .grev__num,
.stat__num, .cta-stat strong, .about__stat strong {
  letter-spacing: -.028em;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}
.eyebrow--blue { color: var(--blue); }
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  animation: pulse 2.4s var(--ease-soft) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(208, 0, 0, .16); }
  50%      { box-shadow: 0 0 0 8px rgba(208, 0, 0, 0); }
}

.lede { color: var(--text-2); font-size: 1.05rem; max-width: 60ch; }
.lede--center { margin-inline: auto; text-align: center; }

.section-head { text-align: center; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.section-head .eyebrow { justify-content: center; }
/* Short brand rule under every section heading */
.section-head .h2::after {
  content: ""; display: block;
  width: 62px; height: 4px; border-radius: 999px;
  margin: 1.25rem auto 0;
  background: linear-gradient(90deg, var(--red), var(--blue));
}
.section-head .lede { margin-top: 1.25rem; }

.tick-list { display: grid; gap: .7rem; margin-top: 1.5rem; }
.tick-list li { display: flex; align-items: flex-start; gap: .65rem; color: var(--text-2); font-size: .96rem; }
.tick-list--2col { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex-shrink: 0; }
.ico--check { fill: none; color: var(--blue); width: 1.2em; height: 1.2em; margin-top: .25em; }
.ico--arrow { fill: none; transition: transform .35s var(--ease-out); }
.ico--lock { fill: none; }

.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  font-style: italic; font-weight: 500; line-height: 1.4;
  color: var(--ink);
  border-left: 3px solid var(--red);
  padding: .3rem 0 .3rem 1.4rem;
  margin: 1.7rem 0;
}
.pullquote cite {
  display: block; margin-top: .65rem;
  font-family: var(--font-body); font-style: normal;
  font-size: .86rem; color: var(--muted);
}

/* ── 4. BUTTONS ────────────────────────────────────────────────────────── */
.btn {
  --btn-py: .88rem; --btn-px: 1.7rem;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: var(--btn-py) var(--btn-px);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600; font-size: .93rem; letter-spacing: .01em;
  white-space: nowrap; cursor: pointer; overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
              background-color .3s var(--ease-out), border-color .3s, color .3s;
}
.btn { max-width: 100%; }
.btn--sm { --btn-py: .58rem; --btn-px: 1.15rem; font-size: .85rem; }
.btn--lg { --btn-py: 1.05rem; --btn-px: 2.1rem; font-size: .99rem; }
.btn--block { width: 100%; }

.btn--gold { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(208, 0, 0, .22); }
.btn--gold::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.34) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn--gold:hover { background: var(--red-600); transform: translateY(-3px); box-shadow: var(--shadow-red); }
.btn--gold:hover::after { transform: translateX(120%); }

.btn--ghost { border: 1.5px solid var(--line); color: var(--ink); background: var(--bg); }
.btn--ghost:hover { transform: translateY(-3px); border-color: var(--blue); color: var(--blue); box-shadow: var(--shadow-sm); }

.btn--whatsapp { background: var(--whatsapp); color: #063C1B; }
.btn--whatsapp:hover { background: #1EBE5D; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 26px rgba(37, 211, 102, .34); }

.btn--blue { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(33,114,221,.22); }
.btn--blue:hover { background: var(--blue-600); transform: translateY(-3px); box-shadow: var(--shadow-blue); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.btn--outline-dark { border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.btn--outline-dark:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-3px); }

.btn:hover .ico--arrow { transform: translateX(4px); }
.btn:active { transform: translateY(-1px); }
.btn.is-loading { pointer-events: none; opacity: .7; }

/* ── 5. ANIMATION UTILITIES ────────────────────────────────────────────── */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity .6s var(--ease-out), visibility .6s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__mark {
  font-family: var(--font-display); font-size: 3.2rem; font-weight: 800;
  letter-spacing: .12em; color: var(--ink);
  text-align: center; margin-bottom: 1.4rem;
  animation: markIn .9s var(--ease-out) both;
}
@keyframes markIn { from { opacity: 0; transform: translateY(14px); letter-spacing: .32em; } }
.preloader__bar { width: 180px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.preloader__bar span {
  display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: barSlide 1.1s var(--ease-soft) infinite;
}
@keyframes barSlide { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--red), var(--blue));
  will-change: transform;
}

.reveal, .reveal-word {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-word { transform: translateY(38px); filter: blur(6px); transition-duration: 1s; }
.reveal.is-visible, .reveal-word.is-visible { opacity: 1; transform: none; filter: none; }

.float { animation: floaty 6s var(--ease-soft) infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--whatsapp); flex-shrink: 0;
  animation: dotPulse 1.9s var(--ease-soft) infinite;
}
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ── 6. HEADER / NAV ───────────────────────────────────────────────────── */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  padding-block: 1.1rem;
  border-bottom: 1px solid transparent;
  transition: padding .35s var(--ease-out), background-color .35s var(--ease-out),
              box-shadow .35s var(--ease-out), border-color .35s;
}
.header.is-stuck {
  padding-block: .6rem;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(12, 21, 36, .06);
}
.header__inner { display: flex; align-items: center; gap: 1.5rem; }

.logo { display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.logo__mark {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 6px 16px rgba(208, 0, 0, .26);
  transition: transform .4s var(--ease-out);
}
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); }
.logo__text { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--ink); }
.logo__text em { font-style: italic; color: var(--blue); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .2rem; }
.nav__link {
  position: relative; display: block;
  padding: .5rem .78rem;
  font-size: .91rem; font-weight: 500; color: var(--text-2);
  border-radius: 8px;
  transition: color .25s var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: .78rem; right: .78rem; bottom: .2rem;
  height: 2px; border-radius: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .38s var(--ease-out);
}
.nav__link:hover, .nav__link.is-active { color: var(--ink); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: .8rem; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--bg);
  padding: 11px 10px; flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease-out), opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(12, 21, 36, .38); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .35s var(--ease-out);
}
.nav-backdrop.is-open { opacity: 1; }

/* ── 7. HERO ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: clamp(7.5rem, 13vh, 10rem) clamp(4rem, 8vh, 6rem);
  overflow: hidden;
  background:
    radial-gradient(900px 560px at 80% 6%, rgba(33, 114, 221, .07), transparent 62%),
    radial-gradient(700px 480px at 4% 90%, rgba(208, 0, 0, .05), transparent 60%),
    var(--bg);
}

.hero__aurora { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(95px); opacity: .16; will-change: transform; }
.orb--1 { width: 470px; height: 470px; top: -12%; right: -6%;  background: var(--blue); animation: drift 24s var(--ease-soft) infinite; }
.orb--2 { width: 400px; height: 400px; bottom: -14%; left: -8%; background: var(--red);  animation: drift 30s var(--ease-soft) infinite reverse; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(48px, -32px) scale(1.1); }
  66%      { transform: translate(-32px, 40px) scale(.93); }
}

/* London skyline watermark.
   The PNG is white-on-transparent (alpha carries the luminance), so it is
   inverted to ink here for the light hero and used as-is on the dark CTA band. */
.hero__skyline {
  position: absolute; left: 50%; bottom: -1px;
  width: min(1600px, 132%);
  transform: translateX(-50%);
  pointer-events: none; z-index: 0;
  mask-image: linear-gradient(to top, #000 42%, transparent 96%);
  -webkit-mask-image: linear-gradient(to top, #000 42%, transparent 96%);
}
/* Painted as a CSS background rather than an <img> so the mobile breakpoint can
   drop it with background-image:none and a phone never fetches the 1.8 MB PNG.
   display:none on an <img> would still download it. */
.hero__skyline span {
  display: block; width: 100%;
  aspect-ratio: 2500 / 1272;
  background: url("../img/bg-new.png") center bottom / 100% auto no-repeat;
  filter: invert(1);
  opacity: .16;
  animation: skylineIn 2s var(--ease-out) both;
}
@keyframes skylineIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: .16; transform: none; }
}

.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.08fr minmax(340px, .92fr);
  gap: clamp(2rem, 4vw, 3.6rem); align-items: center;
}

.hero__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1.15rem;
  margin-bottom: 1.5rem;
  background: var(--red-50);
  border: 1px solid rgba(208, 0, 0, .22);
  border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  color: var(--red);
}
.hero__badge-seal { font-size: .8rem; line-height: 1; }

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.45rem, 1.05rem + 5.4vw, 5rem);
  font-weight: 800; line-height: 1.02;
  letter-spacing: -.042em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.hero__title .line { display: block; }
.hero__title .line--gold { color: var(--red); }

.hero__lede { font-size: clamp(1rem, .95rem + .28vw, 1.1rem); color: var(--text-2); max-width: 54ch; }
.hero__lede strong { color: var(--ink); font-weight: 700; }

.hero__proof { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.avatars { display: flex; flex-shrink: 0; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  /* The next disc plus its 3px ring sits on top of this one, so the overlap has
     to stay clear of the second initial — at -12px "AO" was reading as "AC". */
  margin-right: -6px;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  background: var(--bg-tint); color: var(--ink);
  box-shadow: 0 0 0 3px var(--bg), var(--shadow-sm);
  transition: transform .35s var(--ease-out);
}
.avatar:nth-child(even) { background: var(--red); color: #fff; }
.avatars:hover .avatar { transform: translateY(-4px); }
.hero__proof p { font-size: .84rem; line-height: 1.5; color: var(--text-2); }
.hero__proof strong { color: var(--ink); font-weight: 700; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

.scroll-cue { position: absolute; bottom: 1.6rem; left: 50%; z-index: 3; transform: translateX(-50%); opacity: .45; transition: opacity .3s; }
.scroll-cue:hover { opacity: 1; }
.scroll-cue__mouse { display: block; width: 23px; height: 37px; border: 1.5px solid var(--ink); border-radius: 13px; position: relative; }
.scroll-cue__mouse span {
  position: absolute; top: 7px; left: 50%; margin-left: -1.5px;
  width: 3px; height: 7px; border-radius: 2px; background: var(--red);
  animation: wheel 1.8s var(--ease-soft) infinite;
}
@keyframes wheel {
  0%   { opacity: 0; transform: translateY(0); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(13px); }
}

/* ── 8. MARQUEE BAND ───────────────────────────────────────────────────── */
.marquee-band { padding-block: 2.4rem; border-block: 1px solid var(--line); background: var(--bg-soft); overflow: hidden; }
.marquee-band__label {
  text-align: center; font-size: .74rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.5rem;
}
.marquee {
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; align-items: center; gap: 3.5rem; width: max-content; animation: scrollX 44s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track img {
  height: clamp(34px, 4.4vw, 52px); width: auto; max-width: none;
  filter: grayscale(1);
  opacity: .5;
  transition: filter .4s var(--ease-out), opacity .4s var(--ease-out);
}
.marquee__track img:hover { filter: none; opacity: 1; }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ── 9. STATS ──────────────────────────────────────────────────────────── */
.stats { padding-block: clamp(3rem, 6vw, 5rem); background: var(--bg); }
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat { background: var(--bg); padding: clamp(1.6rem, 3vw, 2.4rem) 1.4rem; text-align: center; transition: background-color .4s var(--ease-out); }
.stat:hover { background: var(--bg-soft); }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem); line-height: 1; color: var(--red); }
.stat:nth-child(even) .stat__num { color: var(--blue); }
.stat__stars { color: #F5A623; font-size: .8rem; letter-spacing: .18em; margin-top: .4rem; }
.stat__label { margin-top: .65rem; font-size: .85rem; color: var(--text-2); max-width: 22ch; margin-inline: auto; line-height: 1.5; }

/* ── 10. QUOTE CARD (in the hero) ──────────────────────────────────────── */
.quote-card {
  position: relative; z-index: 2;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 2.8vw, 2.3rem);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.quote-card__glow { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--red), var(--blue)); }

/* Fills the height of its grid row (used in the About section). The field group
   takes the slack and centres itself, so a taller neighbour column pads the
   card evenly instead of dumping all the space above the button. */
.quote-card--fill { display: flex; flex-direction: column; height: 100%; }
.quote-card--fill .quote-card__fields {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
}

.quote-card__pill {
  display: flex; width: fit-content; align-items: center; gap: .45rem;
  padding: .38rem .95rem; margin: 0 auto .9rem;
  background: var(--red-50);
  border: 1px solid rgba(208, 0, 0, .2);
  border-radius: 999px;
  font-size: .72rem; font-weight: 600;
  color: var(--red);
}
.quote-card__pill svg { width: 13px; height: 13px; }

.quote-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + .75vw, 1.7rem);
  font-weight: 800; line-height: 1.14;
  color: var(--ink); text-align: center;
  text-transform: uppercase; letter-spacing: -.01em;
}
.quote-card__sub {
  text-align: center; font-size: .78rem; color: var(--muted);
  margin-top: .45rem; padding-bottom: 1.2rem; margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
}

.field { margin-bottom: 1rem; position: relative; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label {
  display: block; margin-bottom: .4rem;
  font-size: .8rem; font-weight: 600; color: var(--text);
}
.field__opt { font-weight: 400; color: var(--muted); }

.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 1rem;
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: var(--ink); font-size: .94rem; font-family: var(--font-body);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder, .field textarea::placeholder { color: #A9B4C4; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); background: var(--bg);
  box-shadow: 0 0 0 4px rgba(33, 114, 221, .12);
}
.field.has-error input, .field.has-error select { border-color: var(--red); }
.field__error {
  display: block; font-size: .76rem; color: var(--red); margin-top: .28rem;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .25s, transform .25s;
}
.field.has-error .field__error { opacity: 1; transform: none; }

.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer; }
.ico--chev { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: none; color: var(--blue); pointer-events: none; }

.quote-card__note {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 1rem; font-size: .78rem; color: var(--muted); text-align: center;
}
.quote-card__note .ico--lock { color: var(--whatsapp); width: 1rem; height: 1rem; }

.form-status { margin-top: .85rem; font-size: .85rem; text-align: center; min-height: 1.2em; }
.form-status.is-ok  { color: #1B9E4B; }
.form-status.is-err { color: var(--red); }

/* ── 11. CHALLENGE / SOLUTION ──────────────────────────────────────────── */
/* This block closes with its own call to action and the next section is the
   same white, so a full section's padding on both sides of that seam reads as
   a void rather than a break. */
.compare { background: var(--bg); padding-bottom: clamp(1.25rem, 2.5vw, 2.5rem); }
.compare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }

.panel {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.panel--challenge { background: linear-gradient(168deg, var(--red-50) 0%, #FFFFFF 46%); }
.panel--solution  { background: linear-gradient(168deg, var(--blue-50) 0%, #FFFFFF 46%); }

.panel::before {
  content: ""; position: absolute; top: -70px; right: -70px;
  width: 210px; height: 210px; border-radius: 50%; pointer-events: none;
}
.panel--challenge::before { background: rgba(208, 0, 0, .07); }
.panel--solution::before  { background: rgba(33, 114, 221, .07); }

.panel::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.panel:hover::after { opacity: 1; }
.panel--challenge::after { background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(208, 0, 0, .07), transparent 62%); }
.panel--solution::after  { background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(33, 114, 221, .07), transparent 62%); }

.panel__head, .panel__body, .panel__foot { position: relative; z-index: 1; }
.panel__head { padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.4rem) 0; }

.panel__badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 1.1rem; }
.panel__badge svg { width: 25px; height: 25px; fill: none; stroke-width: 1.8; }
.panel--challenge .panel__badge { background: var(--red-100); color: var(--red); border: 1px solid rgba(208,0,0,.16); }
.panel--solution  .panel__badge { background: var(--blue-100); color: var(--blue); border: 1px solid rgba(33,114,221,.16); }

.panel__label { font-size: .73rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .55rem; }
.panel--challenge .panel__label { color: var(--red); }
.panel--solution  .panel__label { color: var(--blue); }

.panel__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
  line-height: 1.14; color: var(--ink); margin-bottom: .9rem;
}
.panel--challenge .panel__title em { font-style: normal; color: var(--red); }
.panel--solution  .panel__title em { font-style: normal; color: var(--blue); }
.panel__intro { color: var(--text-2); font-size: .97rem; }

.panel__body { flex: 1; padding: clamp(1.4rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.4rem); margin-top: 1.4rem; border-top: 1px solid var(--line); }
.panel__sublabel { font-size: .71rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }

.panel__items { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.panel__items li {
  display: flex; align-items: center; gap: .7rem;
  padding: .78rem .9rem; border-radius: 12px;
  font-size: .89rem; font-weight: 500; color: var(--ink); line-height: 1.35;
  transition: transform .35s var(--ease-out), background-color .35s, border-color .35s;
}
.panel--challenge .panel__items li { background: var(--red-50); border: 1px solid rgba(208,0,0,.1); }
.panel--solution  .panel__items li { background: var(--blue-50); border: 1px solid rgba(33,114,221,.1); }
.panel__items li:hover { transform: translateY(-2px); }
.panel--challenge .panel__items li:hover { background: var(--red-100); border-color: rgba(208,0,0,.22); }
.panel--solution  .panel__items li:hover { background: var(--blue-100); border-color: rgba(33,114,221,.22); }

.panel__mark { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; }
.panel__mark svg { width: 14px; height: 14px; fill: none; stroke-width: 2.6; }
.panel--challenge .panel__mark { background: rgba(208,0,0,.13); color: var(--red); }
.panel--solution  .panel__mark { background: rgba(33,114,221,.13); color: var(--blue); }

.panel__foot { padding: clamp(1.2rem, 2.4vw, 1.6rem) clamp(1.5rem, 3vw, 2.4rem); font-size: .91rem; line-height: 1.55; }
.panel--challenge .panel__foot { background: var(--bg-soft); color: var(--text-2); border-top: 1px solid var(--line); }
.panel--challenge .panel__foot strong { color: var(--red); }
.panel--solution  .panel__foot { background: var(--ink); color: #E6EBF3; }
.panel--solution  .panel__foot strong { color: #fff; }

/* ── 12. SERVICES — two feature boxes ─────────────────────────────────── */
.services { background: var(--bg); }
.srv-boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }

.srv-box {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: clamp(2.2rem, 4.5vw, 3.4rem) clamp(1.5rem, 3.5vw, 3rem);
  background: linear-gradient(172deg, var(--blue-50) 0%, var(--bg) 58%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s;
}
.srv-box:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(208, 0, 0, .2); }

/* Oversized service glyph, ghosted behind the content */
.srv-box__watermark {
  position: absolute; top: 50%; left: 50%;
  width: 300px; height: 300px;
  translate: -50% -48%;
  color: var(--ink); opacity: .04;
  pointer-events: none;
  transition: scale .8s var(--ease-out), rotate .8s var(--ease-out), opacity .5s;
}
.srv-box__watermark svg { width: 100%; height: 100%; }
.srv-box:hover .srv-box__watermark { scale: 1.09; rotate: -4deg; opacity: .06; }

.srv-box > *:not(.srv-box__watermark) { position: relative; z-index: 1; }

/* Label flanked by two short brand rules */
.srv-box__eyebrow {
  display: flex; align-items: center; gap: .85rem;
  font-size: .77rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--red);
}
.srv-box__eyebrow::before, .srv-box__eyebrow::after {
  content: ""; width: clamp(28px, 4vw, 46px); height: 3px;
  border-radius: 2px; background: var(--red);
}

.srv-box__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.65rem, 1.15rem + 2vw, 2.55rem);
  line-height: 1.08; letter-spacing: -.038em;
  text-transform: uppercase; color: var(--ink);
  margin-top: .75rem;
}

/* Rule · diamond · rule */
.srv-box__rule {
  display: flex; align-items: center; justify-content: space-between;
  width: 124px; height: 12px;
  margin: 1.15rem 0 1.35rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.5' y='2.5' width='7' height='7' transform='rotate(45 6 6)' fill='%23D00000'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.srv-box__rule::before, .srv-box__rule::after {
  content: ""; width: 44px; height: 3px; border-radius: 2px; background: var(--red);
}

.srv-box__text {
  color: var(--text-2); font-size: 1rem;
  max-width: 36ch; margin-bottom: 1.9rem;
}

.srv-box__foot {
  display: flex; align-items: center; gap: .55rem;
  margin-top: 1.5rem;
  font-size: .93rem; font-weight: 600; color: var(--ink);
}
.srv-box__foot svg { width: 19px; height: 19px; color: var(--blue); flex-shrink: 0; }

/* ── 12b. MID-PAGE CTA STRIP ──────────────────────────────────────────── */
.cta-strip { padding-block: clamp(1.5rem, 3vw, 2.5rem); background: var(--bg); }
.cta-strip__inner {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.5fr auto;
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center;
  padding: clamp(1.8rem, 3.5vw, 2.7rem) clamp(1.6rem, 3.5vw, 2.8rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
/* Brand bar down the leading edge */
.cta-strip__inner::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: linear-gradient(180deg, var(--red), var(--blue));
}
.cta-strip__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2rem);
  line-height: 1.14; letter-spacing: -.032em;
  text-transform: uppercase; color: var(--ink);
}
.cta-strip p { color: var(--text-2); margin-top: .65rem; max-width: 58ch; font-size: .97rem; }
.cta-strip__actions { display: flex; flex-wrap: wrap; gap: .8rem;     justify-content: center !important; }

.cta-strip__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    justify-content: center;
}

/* Free-revisions line that closes the challenge/solution block */
.revision-note {
  text-align: center; margin-top: 2rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 1rem + .9vw, 1.65rem);
  line-height: 1.35; letter-spacing: -.02em;
  color: var(--ink);
}


/* ── 13. PROMO ─────────────────────────────────────────────────────────── */
.promo { padding-block: clamp(2rem, 4vw, 3rem); background: var(--bg); }
.promo__inner {
  position: relative;
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(2.2rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(125deg, var(--red) 0%, #9C0033 56%, var(--blue) 100%);
  color: #fff; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.promo__glow { position: absolute; top: -60%; right: -10%; width: 460px; height: 460px; border-radius: 50%; background: rgba(255,255,255,.18); filter: blur(80px); pointer-events: none; }
.promo__copy { position: relative; }
.promo .eyebrow { color: rgba(255,255,255,.85); }
.promo .eyebrow__dot { animation: none; box-shadow: none; }
.promo .h2 { color: #fff; }
.promo .h2 em { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 9px; text-decoration-thickness: 3px; }
.promo .lede { color: rgba(255, 255, 255, .88); }
.promo__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.promo .btn--dark { background: #fff; color: var(--red); }

.promo__perks { position: relative; display: grid; gap: .8rem; }
.promo__perks li {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1.2rem;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  font-weight: 600; font-size: .93rem;
  transition: transform .35s var(--ease-out), background-color .35s;
}
.promo__perks li:hover { transform: translateX(6px); background: rgba(255, 255, 255, .22); }
.perk__no { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: rgba(255,255,255,.62); flex-shrink: 0; }

/* ── 14. ABOUT ─────────────────────────────────────────────────────────── */
.about { background: var(--bg-soft); }
/* align-items:stretch (the grid default, stated here because it is the whole
   point) makes both columns take the row height, so the form card ends up
   exactly as tall as the copy beside it. */
.about__wrap {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}

/* The 97.6% figure used to float on the photo; it now stands on its own. */
.about__stat {
  display: flex; align-items: center; gap: .9rem;
  width: fit-content;
  margin: 1.4rem 0 1.8rem;
  padding: .85rem 1.3rem .85rem 1.1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.about__stat strong {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 800;
  color: var(--blue); line-height: 1; letter-spacing: -.03em;
}
.about__stat span { font-size: .84rem; color: var(--text-2); line-height: 1.4; max-width: 22ch; }

.about__copy p { color: var(--text-2); margin-bottom: 1rem; }
.about__copy p strong { color: var(--ink); }
.about__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

/* ── 15. SUBJECTS CAROUSEL ─────────────────────────────────────────────── */
.subjects { background: var(--bg); }

.carousel { position: relative; }

.carousel__track {
  display: flex; gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: .4rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

/* Full-bleed rail: sits outside .container, so it spans the viewport and only
   the page gutter holds it off the edges. */
.carousel--bleed { padding-inline: var(--gutter); }
/* The default arrows hang off the rail by -14px, which puts them outside the
   viewport once the rail is full-bleed. Tuck them just inside instead. */
.carousel--bleed .carousel__arrow--prev { left: 4px; }
.carousel--bleed .carousel__arrow--next { right: 4px; }

/* Endless rail. Snap points and smooth scrolling both fight a position that is
   rewritten every frame, so neither applies here. */
.carousel--rail .carousel__track { scroll-snap-type: none; scroll-behavior: auto; }
.carousel--rail .subj-card { scroll-snap-align: none; }

/* Subjects rail. Seven covers in view at desktop width, stepping down on
   narrower screens so a card never gets too small to read. One gap variable
   drives every basis below. */
.subjects .carousel__track { --rail-gap: .9rem; gap: var(--rail-gap); }

.subj-card {
  flex: 0 0 calc((100% - 6 * var(--rail-gap, .9rem)) / 7);
  scroll-snap-align: start;
}
/* Stepped so a cover never drops below ~150px wide — the subject name printed
   on the artwork stops being readable under that. */
@media (max-width: 1280px) { .subj-card { flex-basis: calc((100% - 5 * var(--rail-gap, .9rem)) / 6); } }
@media (max-width: 1080px) { .subj-card { flex-basis: calc((100% - 4 * var(--rail-gap, .9rem)) / 5); } }
@media (max-width:  900px) { .subj-card { flex-basis: calc((100% - 3 * var(--rail-gap, .9rem)) / 4); } }
@media (max-width:  700px) { .subj-card { flex-basis: calc((100% - 2 * var(--rail-gap, .9rem)) / 3); } }
@media (max-width:  620px) {
  /* Tighter gap so three covers still have usable width on a phone. */
  .subjects .carousel__track { --rail-gap: .5rem; }
  .subj-card { flex-basis: calc((100% - 2 * var(--rail-gap, .9rem)) / 3); }
}

.subj-card > a {
  position: relative; display: block;
  /* Matches the artwork exactly (400x520), so no cover crops the subject name
     printed along the bottom of every file. */
  aspect-ratio: 400 / 520;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-tint);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.subj-card > a:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.subj-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.subj-card > a:hover img { transform: scale(1.06); }

/* Arrows sit over the rail, as on the current site */
.carousel__arrow {
  position: absolute; top: 50%; z-index: 4;
  transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transition: background-color .3s, color .3s, opacity .3s, transform .3s var(--ease-out);
}
.carousel__arrow svg { width: 18px; height: 18px; }
.carousel__arrow--prev { left: -14px; }
.carousel__arrow--next { right: -14px; }
.carousel__arrow:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-50%) scale(1.08); }
.carousel__arrow[disabled] { opacity: .3; pointer-events: none; }

.carousel__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.8rem; }
.carousel__dots button {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--line);
  transition: width .4s var(--ease-out), background-color .4s;
}
.carousel__dots button.is-active { width: 26px; background: var(--red); }

.subjects__more { text-align: center; margin-top: 2rem; color: var(--text-2); font-size: .93rem; }
.subjects__more a { color: var(--blue); font-weight: 600; border-bottom: 1.5px solid rgba(33,114,221,.3); transition: border-color .3s; }
.subjects__more a:hover { border-color: var(--blue); }

/* ── 16. PUBLISHING / STEPS ────────────────────────────────────────────── */
.publishing { background: var(--bg-soft); border-block: 1px solid var(--line); }

.workflow {
  max-width: 880px; margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.2rem, 3vw, 2.2rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.workflow:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.workflow img { width: 100%; height: auto; }

.publishing__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 3rem; }

/* ── 17. GOOGLE REVIEWS ───────────────────────────────────────────────── */
.greviews { background: var(--bg-soft); }

.grev-summary {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(1.1rem, 3vw, 2.4rem);
  max-width: 840px;
  margin: 0 auto clamp(2.2rem, 4vw, 3.2rem);
  padding: clamp(1.3rem, 2.6vw, 1.8rem) clamp(1.5rem, 3vw, 2.2rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.grev__brand { display: flex; align-items: center; gap: .8rem; }
.g-logo { width: 34px; height: 34px; flex-shrink: 0; }
.grev__brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.grev__brand-text strong { font-size: 1rem; font-weight: 700; color: var(--ink); }
.grev__brand-text span { font-size: .8rem; color: var(--muted); }

.grev__score {
  display: flex; align-items: center; gap: .9rem;
  padding-inline: clamp(.8rem, 2.4vw, 1.8rem);
  border-inline: 1px solid var(--line);
}
.grev__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 1.6rem + 1.4vw, 2.7rem);
  line-height: 1; letter-spacing: -.035em; color: var(--ink);
}
.grev__score-meta { display: flex; flex-direction: column; line-height: 1.35; }
.grev__stars { color: #FBBC05; letter-spacing: .1em; font-size: .98rem; }
.grev__score-meta > span:last-child { font-size: .8rem; color: var(--muted); }
.grev__cta { flex-shrink: 0; }

.g-card {
  flex: 0 0 calc((100% - 2 * 1.1rem) / 3);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 1.5rem 1.4rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s;
}
.g-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(33, 114, 221, .3); }

.g-card__top { display: flex; align-items: center; gap: .7rem; }
.g-card__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--blue-100); color: var(--blue);
  font-weight: 700; font-size: .84rem;
}
.g-card:nth-child(even) .g-card__avatar { background: var(--red-100); color: var(--red); }
.g-card__who { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.g-card__who strong { font-size: .95rem; font-weight: 700; color: var(--ink); }
.g-card__who span { font-size: .78rem; color: var(--muted); }
.g-card__logo { width: 20px; height: 20px; flex-shrink: 0; }

.g-card__stars { color: #FBBC05; letter-spacing: .1em; font-size: .92rem; margin: .95rem 0 .55rem; }
.g-card__text { font-size: .93rem; color: var(--text-2); }

/* ── 18. CORE VALUES / CEO CARD ───────────────────────────────────────── */
.values { background: var(--bg-soft); }
.values__grid {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}

.values__eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-size: .95rem; font-weight: 600; color: var(--blue);
  margin-bottom: 1.1rem;
}
.values__dash { width: 34px; height: 3px; border-radius: 2px; background: var(--blue); flex-shrink: 0; }

.values__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 1.25rem + 2.6vw, 3rem);
  line-height: 1.16; letter-spacing: -.032em;
  color: var(--ink);
}
.values__text {
  color: var(--text-2);
  font-size: clamp(1rem, .95rem + .35vw, 1.18rem);
  margin-top: 1.1rem; max-width: 46ch;
}
.values__copy .btn { margin-top: 2rem; }

.ceo-card {
  display: grid; grid-template-columns: minmax(0, .78fr) 1fr;
  align-items: stretch;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(.7rem, 1.4vw, 1rem);
  box-shadow: var(--shadow-md);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.ceo-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.ceo-card__photo {
  position: relative; overflow: hidden;
  border-radius: calc(var(--radius) - 2px);
  background: linear-gradient(160deg, var(--blue-100), var(--bg-tint));
  aspect-ratio: 1 / 1.14;
}
/* Falls back to the initials when the headshot file is missing */
.ceo-card__photo::after {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--blue); opacity: .5;
}
.ceo-card__photo img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}

.ceo-card__body {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.1rem, 2.2vw, 1.7rem) clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.4rem);
}
.ceo-card__quote {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.95rem, .88rem + .35vw, 1.2rem);
  line-height: 1.42; letter-spacing: -.02em;
  color: var(--ink);
}
.ceo-card__by { margin-top: auto; padding-top: 1.6rem; }
.ceo-card__by strong {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem);
  letter-spacing: -.028em; color: var(--ink);
}
.ceo-card__by span { display: block; margin-top: .1rem; font-size: 1rem; color: var(--blue); }

.ceo-card__li {
  position: absolute; right: clamp(1.1rem, 2vw, 1.5rem); bottom: clamp(1.1rem, 2vw, 1.4rem);
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--bg-tint); color: #fff;
  transition: background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.ceo-card__li svg { width: 24px; height: 24px; fill: currentColor; }
.ceo-card__li:hover { background: #0A66C2; transform: translateY(-3px); }
/* ── 19. CTA BAND ──────────────────────────────────────────────────────── */
.cta-band {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8rem);
  background: var(--ink); color: #fff;
  overflow: hidden;
}
.cta-band__glow {
  position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(208,0,0,.35), rgba(33,114,221,.2) 55%, transparent 72%);
  filter: blur(80px); pointer-events: none;
}
/* Same asset, kept white here — the band is dark */
.cta-band__skyline {
  position: absolute; left: 50%; bottom: -1px;
  width: min(1700px, 130%);
  transform: translateX(-50%);
  pointer-events: none; z-index: 0;
  mask-image: linear-gradient(to top, #000 34%, transparent 92%);
  -webkit-mask-image: linear-gradient(to top, #000 34%, transparent 92%);
}
/* Same trick as .hero__skyline — a background, so mobile can skip the download. */
.cta-band__skyline span {
  display: block; width: 100%;
  aspect-ratio: 1600 / 814;
  background: url("../img/london-skyline.png") center bottom / 100% auto no-repeat;
  opacity: .14;
}

.cta-band__inner { position: relative; z-index: 1; text-align: center; }

.cta-band__avail {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem 1.05rem; border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  font-size: .83rem; font-weight: 600; color: #E6EBF3;
  margin-bottom: 1.7rem;
}

.cta-band__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 1.35rem + 5.2vw, 5.1rem);
  line-height: 1.04; letter-spacing: -.042em;
  text-transform: uppercase; color: #fff;
}
.cta-band__title em { font-style: normal; color: #FF5A5A; }
.cta-band__sub { color: rgba(255,255,255,.72); max-width: 54ch; margin: 1.4rem auto 0; font-size: 1.02rem; }
.cta-band__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.4rem; }

.cta-stats {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2.6rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255,255,255,.14);
}
.cta-stat { text-align: center; min-width: 120px; }
.cta-stat strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); line-height: 1; color: #fff; }
/* Direct child only: the unit suffix (/5, +, %, h) is a span *inside* the
   strong, and an unscoped .cta-stat span turned it into a second block line. */
.cta-stat > span { display: block; margin-top: .45rem; font-size: .78rem; color: rgba(255,255,255,.6); letter-spacing: .06em; }
.cta-stat strong span { font-size: inherit; color: inherit; letter-spacing: inherit; }
.cta-plus { font-family: var(--font-display); font-size: 1.5rem; color: rgba(255,255,255,.28); line-height: 1; user-select: none; }

/* ── 20. CONTACT ───────────────────────────────────────────────────────── */
.contact { background: var(--bg); }
.contact__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.contact-card {
  display: block;
  padding: 2rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: transform .42s var(--ease-out), border-color .42s, box-shadow .42s;
}
.contact-card:not(.contact-card--static):hover { transform: translateY(-6px); border-color: rgba(33,114,221,.35); box-shadow: var(--shadow-md); }
.contact-card__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 14px;
  margin: 0 auto 1.2rem;
  background: var(--red-100); color: var(--red);
  transition: transform .4s var(--ease-out), background-color .4s, color .4s;
}
.contact-card:nth-child(even) .contact-card__icon { background: var(--blue-100); color: var(--blue); }
.contact-card__icon svg { width: 24px; height: 24px; }
.contact-card:hover .contact-card__icon { transform: scale(1.08) rotate(-6deg); background: var(--red); color: #fff; }
.contact-card:nth-child(even):hover .contact-card__icon { background: var(--blue); color: #fff; }
.contact-card h3 { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; color: var(--ink); margin-bottom: .3rem; }
.contact-card p { color: var(--text); font-size: .93rem; font-weight: 600; word-break: break-word; }
.contact-card__note { display: block; margin-top: .55rem; font-size: .78rem; color: var(--muted); }

/* ── 21. FOOTER ────────────────────────────────────────────────────────── */
.footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 5rem); }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3rem; }
.logo--footer { margin-bottom: 1.1rem; }
.footer__blurb { color: var(--text-2); font-size: .91rem; max-width: 34ch; }

.footer__social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.footer__social a {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text-2);
  transition: color .3s, border-color .3s, transform .3s var(--ease-out), background-color .3s;
}
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__social a:hover { color: #fff; background: var(--red); border-color: var(--red); transform: translateY(-3px); }

.footer__col h4 { font-size: .77rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 1.05rem; }
.footer__col ul { display: grid; gap: .55rem; }
.footer__col a, .footer__contact li { color: var(--text-2); font-size: .91rem; transition: color .28s, padding-left .28s var(--ease-out); }
.footer__col a:hover { color: var(--red); padding-left: 5px; }

.footer__disclaimer { padding-block: 1.4rem; border-top: 1px solid var(--line); }
.footer__disclaimer p { font-size: .81rem; color: var(--muted); line-height: 1.6; max-width: 78ch; }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.4rem; border-top: 1px solid var(--line);
  font-size: .83rem; color: var(--muted);
}

div#announce {
    margin-top: -19px;
    margin-bottom: 15px;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer__legal a:hover { color: var(--blue); }

/* ── 22. FLOATING ACTIONS ──────────────────────────────────────────────── */
.whatsapp-fab {
  position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 120;
  display: flex; align-items: center; gap: .6rem;
  height: 56px; padding: 0 1.1rem;
  border-radius: 999px;
  background: var(--whatsapp); color: #fff;
  box-shadow: 0 12px 30px rgba(37, 211, 102, .38);
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.whatsapp-fab svg { width: 27px; height: 27px; fill: currentColor; flex-shrink: 0; }
.whatsapp-fab__tip { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 600; font-size: .9rem; transition: max-width .45s var(--ease-out); }
.whatsapp-fab:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(37,211,102,.46); }
.whatsapp-fab:hover .whatsapp-fab__tip { max-width: 200px; }
.whatsapp-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--whatsapp);
  animation: ring 2.6s var(--ease-soft) infinite;
}
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.25); opacity: 0; } }

.to-top {
  position: fixed; right: 1.4rem; bottom: 5.6rem; z-index: 119;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s, background-color .3s, color .3s, border-color .3s;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ── 23. RESPONSIVE ──────────────────────────────────────────────────────
   Mobile / desktop copy swaps. Both versions of a sentence sit in the DOM and
   CSS picks one, so there is a single set of PHP templates to maintain rather
   than a separate mobile build. Put .only-mobile on block elements (p, li,
   div, ul); add .is-inline for a <span> inside a running sentence.          */
.only-mobile { display: none !important; }

@media (max-width: 1100px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .nav__list { gap: 0; }
  .nav__link { padding: .5rem .55rem; font-size: .86rem; }
  .grev__score { border-inline: 0; }
  .carousel__arrow--prev { left: -8px; }
  .carousel__arrow--next { right: -8px; }
}

/* The two compare panels hold a 2-column list each, so they keep working side
   by side well below 1100px — stacking them there left a ~950px-wide panel
   with two short columns of text floating in it. */
@media (max-width: 900px) {
  .compare__grid { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  html { scroll-padding-top: 84px; }

  .nav {
    position: fixed; inset: 0 0 0 auto; z-index: 145;
    width: min(330px, 84vw);
    margin: 0; padding: 6.5rem 2rem 2rem;
    background: var(--bg);
    border-left: 1px solid var(--line);
    box-shadow: -20px 0 50px rgba(12,21,36,.1);
    transform: translateX(100%);
    transition: transform .45s var(--ease-out);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .2rem; }
  .nav__link { padding: .9rem .4rem; font-size: 1.04rem; }
  .nav__link::after { left: .4rem; right: auto; width: 26px; bottom: .55rem; }
  .nav-toggle { display: flex; }

  .hero { min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { text-align: left; }
  .hero__proof, .hero__cta { display: flex; flex-direction: row; flex-wrap: wrap; gap: .8rem; }

  .quote-card { max-width: 520px; margin-inline: auto; width: 100%; }
  .scroll-cue { display: none; }

  /* Stacked: the "Dear Student" copy reads first, then the form. Nothing is
     stretching to match anything any more, so the fill card goes back to its
     natural height. */
  .about__wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .about__copy { order: 1; }
  .quote-card--fill { order: 2; height: auto; }
  .quote-card--fill .quote-card__fields { display: block; }

  .promo__inner { grid-template-columns: 1fr; }

  .g-card    { flex-basis: calc((100% - 1.1rem) / 2); }

  .srv-boxes { grid-template-columns: 1fr; }
  .values__grid { grid-template-columns: 1fr; }

  .cta-strip__inner { grid-template-columns: 1fr; text-align: center; }
  .cta-strip p { margin-inline: auto; }
  .cta-strip__actions { justify-content: center; }
  .cta-strip__inner::before { inset: 0 0 auto 0; width: auto; height: 5px; background: linear-gradient(90deg, var(--red), var(--blue)); }
}

/* ── The mobile cut ────────────────────────────────────────────────────────
   Below 760px the page switches to its short form: the long-form copy is
   swapped for the .only-mobile version, ornament is dropped, and anything
   that is duplicated elsewhere on the page comes out.                      */
@media (max-width: 760px) {
  .only-desktop { display: none !important; }
  .only-mobile  { display: block !important; }
  .only-mobile.is-inline      { display: inline !important; }
  .only-mobile.is-flex        { display: flex !important; }
  .only-mobile.is-inline-flex { display: inline-flex !important; }

  html { scroll-padding-top: 76px; }

  /* Ornament. The two skyline PNGs are ~2.3 MB between them and are pure
     decoration — killing the background here means a phone never fetches
     either file, which is the single biggest mobile win on this page. */
  .hero__skyline, .cta-band__skyline { display: none; }
  .hero__skyline span, .cta-band__skyline span { background-image: none; }
  .hero__aurora, .promo__glow, .cta-band__glow,
  .srv-box__watermark, .panel::before { display: none; }

  /* Header: logo + burger only. The WhatsApp FAB already covers "chat now". */
  .header { padding-block: .7rem; }
  .header__inner { justify-content: space-between; gap: .75rem; }
  .header__actions .btn--gold { display: none; }
  .logo__mark { width: 38px; height: 38px; border-radius: 10px; font-size: .96rem; }
  .logo__text { font-size: 1.12rem; }

  /* Hero */
  .hero { padding-block: 6.5rem 3rem; }
  .hero__badge { font-size: .72rem; padding: .42rem .9rem; margin-bottom: 1.1rem; }
  .hero__title { font-size: clamp(2rem, 8.4vw, 2.9rem); margin-bottom: 1.1rem; }
  .hero__lede { font-size: 1rem; }
  .hero__proof { margin-top: 1.5rem; }
  .hero__cta { margin-top: 1.5rem; }

  /* Section rhythm — desktop spacing reads as dead air on a phone. */
  :root { --section-y: 3.25rem; }
  .section-head { margin-bottom: 2rem; }
  .lede { font-size: 1rem; }

  /* Panels */
  .panel__head { padding: 1.5rem 1.3rem 0; }
  .panel__body { padding: 1.3rem; margin-top: 1.2rem; }
  .panel__foot { padding: 1.1rem 1.3rem; font-size: .88rem; }
  .panel__title { font-size: 1.42rem; }

  /* Services */
  .srv-box { padding: 2rem 1.4rem; }
  .srv-box__title { font-size: 1.85rem; }

  /* Promo */
  .promo__inner { padding: 1.9rem 1.4rem; }
  .h2--tight { letter-spacing: .01em !important; }
  /* At this size the 9px offset reads as a divider rule, not an underline. */
  .promo .h2 em { text-underline-offset: 4px; text-decoration-thickness: 2px; }
  .promo__perks li { padding: .75rem 1rem; font-size: .88rem; }

  /* About */
  .about__stat { margin: 1.1rem 0 1.4rem; padding: .7rem 1rem .7rem .9rem; gap: .75rem; }
  .about__stat strong { font-size: 1.7rem; }
  .pullquote { margin: 1.3rem 0; padding-left: 1.1rem; }

  /* Reviews */
  .grev-summary { padding: 1.1rem 1.2rem; }
  .grev__cta { display: none; }

  /* CEO card */
  .ceo-card__quote { font-size: .98rem; }
  .ceo-card__li { display: none; }

  /* CTA band */
  .cta-band { padding-block: 3.5rem; }
  .cta-band__title { font-size: clamp(2rem, 8.6vw, 3rem); }
  .cta-band__sub { font-size: .97rem; margin-top: 1.1rem; }
  .cta-band__buttons { margin-top: 1.8rem; }
  .cta-stats { margin-top: 2.4rem; padding-top: 1.8rem; }

  /* Footer */
  .footer__top { padding-bottom: 2rem; }
  .footer__blurb { max-width: none; }
  .footer__bottom { justify-content: center; text-align: center; }
  .footer__legal { justify-content: center; gap: 1rem; }
  .footer__col a, .footer__contact li { word-break: break-word; }
}

@media (max-width: 620px) {
  .stats__grid   { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .footer__top   { grid-template-columns: 1fr; gap: 1.8rem; }
  .field-row     { grid-template-columns: 1fr; }
  .panel__items  { grid-template-columns: 1fr; }

  /* One full-width button per row beats two cramped half-width ones. */
  .hero__cta .btn, .cta-band__buttons .btn, .about__cta .btn,
  .publishing__cta .btn, .promo__cta .btn, .cta-strip__actions .btn { flex: 1 1 100%; }

  .hero__proof { flex-direction: row; align-items: center; gap: .9rem; }
  .avatar { width: 34px; height: 34px; font-size: .68rem; margin-right: -5px; }
  .avatar:last-child { margin-right: 0; }
  .hero__proof p { font-size: .8rem; }

  .g-card    { flex-basis: 86%; }
  .ceo-card  { grid-template-columns: 1fr; }
  /* The source is a 1024x1024 square; anything wider crops his chin off. */
  .ceo-card__photo { aspect-ratio: 1 / 1; }
  .ceo-card__by { padding-right: 0; }
  .carousel__arrow { display: none; }
  .grev__score { border-inline: 0; padding-inline: 0; }
  .grev-summary { gap: 1.1rem; }

  .cta-plus  { display: none; }
  .cta-stats { gap: 1.5rem 1rem; }
  .cta-stat  { min-width: 0; flex: 1 1 40%; }
}

/* ── Small phones ─────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  :root { --gutter: 1rem; }
  /* Buttons are nowrap by default; below this width a long label would push
     the page sideways, so let those wrap rather than overflow. */
  .btn { white-space: normal; --btn-px: 1.3rem; }
  .hero__title { font-size: clamp(1.75rem, 8.6vw, 2.3rem); }
  .cta-band__title { font-size: 1.95rem; }
  .h2 { font-size: 1.6rem; }
  .srv-box__title { font-size: 1.55rem; }
  .quote-card { padding: 1.25rem 1.1rem; }
  .grev-summary { flex-direction: column; text-align: center; }
  .grev__brand { flex-direction: column; text-align: center; gap: .5rem; }
  .grev__brand-text { align-items: center; }
}

/* ── Touch-target and input hygiene ───────────────────────────────────────
   16px is the threshold below which iOS Safari zooms the page on focus, and
   there is no way back out of that zoom with the viewport meta we want. */
@media (hover: none) and (pointer: coarse) {
  .field input, .field select, .field textarea { font-size: 16px; padding: .82rem 1rem; }
  .btn { --btn-py: 1rem; }
  .btn--sm { --btn-py: .7rem; }
  .carousel__dots { padding-block: .4rem; }
  .carousel__dots button { height: 10px; }
  /* Hover-only affordances never resolve on touch, so pin them open/closed. */
  .btn:hover, .panel:hover, .srv-box:hover, .g-card:hover,
  .subj-card > a:hover, .workflow:hover, .ceo-card:hover { transform: none; }
}

/* ── Floating actions ─────────────────────────────────────────────────────
   Both live bottom-LEFT on small screens: the Tawk.to chat bubble owns the
   bottom-right corner and the three of them stacked there is a thumb trap. */
@media (max-width: 760px) {
  .whatsapp-fab {
    left: 1rem; right: auto;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    width: 52px; height: 52px; padding: 0;
    justify-content: center; gap: 0;
  }
  .whatsapp-fab svg { width: 25px; height: 25px; }
  .whatsapp-fab__tip, .whatsapp-fab:hover .whatsapp-fab__tip { max-width: 0; }
  .to-top {
    left: 1rem; right: auto;
    bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
    width: 40px; height: 40px;
  }
}

/* ── 24. REDUCED MOTION / PRINT ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-word { opacity: 1 !important; transform: none !important; filter: none !important; }
  .marquee__track, .orb, .float { animation: none; }
  .carousel__track { scroll-behavior: auto; }
}

@media print {
  body { background: #fff; color: #000; }
  .header, .whatsapp-fab, .to-top, .preloader, .scroll-progress,
  .marquee-band, .hero__aurora, .scroll-cue, .carousel__arrow { display: none !important; }
  .reveal, .reveal-word { opacity: 1 !important; transform: none !important; }
  .cta-band, .promo__inner, .panel--solution .panel__foot { background: #fff !important; color: #000 !important; }
}

/* ── 25. LEGAL PAGES (privacy / terms / refund) ───────────────────────── */
.legal-hero {
  position: relative; overflow: hidden;
  padding: clamp(8rem, 15vh, 11rem) 0 clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(720px 420px at 82% 10%, rgba(33, 114, 221, .08), transparent 62%),
    radial-gradient(560px 380px at 6% 90%, rgba(208, 0, 0, .05), transparent 60%),
    var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.legal-hero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  line-height: 1.08; letter-spacing: -.04em;
  text-transform: uppercase; color: var(--ink);
}
.legal-hero__meta { margin-top: .9rem; font-size: .9rem; color: var(--muted); }
.legal-hero__lede { margin-top: 1.2rem; max-width: 62ch; color: var(--text-2); font-size: 1.05rem; }

.legal { background: var(--bg); }
.legal__wrap {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}

.legal__toc { position: sticky; top: 110px; }
.legal__toc h2 {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .9rem;
}
.legal__toc ol { display: grid; gap: .1rem; counter-reset: toc; }
.legal__toc a {
  display: block; padding: .45rem .7rem;
  border-left: 2px solid var(--line);
  font-size: .88rem; color: var(--text-2);
  transition: color .25s, border-color .25s, background-color .25s;
}
.legal__toc a:hover { color: var(--red); border-left-color: var(--red); background: var(--bg-soft); }

.legal__body { max-width: 72ch; }
.legal__body > section + section { margin-top: 2.4rem; }
.legal__body h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem);
  letter-spacing: -.025em; color: var(--ink);
  margin-bottom: .8rem;
  scroll-margin-top: 110px;
}
.legal__body h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; color: var(--ink);
  margin: 1.4rem 0 .5rem;
}
.legal__body p, .legal__body li { color: var(--text-2); font-size: .97rem; }
.legal__body p + p { margin-top: .9rem; }
.legal__body ul, .legal__body ol { margin: .9rem 0 0 0; display: grid; gap: .5rem; }
.legal__body ul li { position: relative; padding-left: 1.2rem; }
.legal__body ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}
.legal__body ol { counter-reset: li; }
.legal__body ol li { position: relative; padding-left: 1.8rem; counter-increment: li; }
.legal__body ol li::before {
  content: counter(li) "."; position: absolute; left: 0;
  font-weight: 700; color: var(--red); font-size: .9rem;
}
.legal__body a { color: var(--blue); font-weight: 600; border-bottom: 1px solid rgba(33,114,221,.3); }
.legal__body a:hover { border-bottom-color: var(--blue); }
.legal__body strong { color: var(--ink); }

/* Callout used for the important warnings */
.legal-note {
  margin-top: 1.2rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius);
  background: var(--red-50);
  border: 1px solid rgba(208, 0, 0, .18);
  border-left: 4px solid var(--red);
}
.legal-note p { color: var(--text); font-size: .94rem; }
.legal-note--blue { background: var(--blue-50); border-color: rgba(33,114,221,.18); border-left-color: var(--blue); }

.legal__contact {
  margin-top: 2.6rem; padding: 1.5rem 1.6rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.legal__contact h2 { margin-bottom: .6rem; }

@media (max-width: 900px) {
  .legal__wrap { grid-template-columns: 1fr; }
  .legal__toc { position: static; }
  .legal__toc ol { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ── 26. ANNOUNCEMENT BAR ─────────────────────────────────────────────── */
/* Lives inside .header so the fixed stack stays one element. It collapses
   away as soon as the header sticks, to give the page its height back. */
.announce {
  background: linear-gradient(90deg, var(--ink) 0%, #16233a 55%, var(--red) 190%);
  color: #fff;
  overflow: hidden;
  max-height: 60px;
  transition: max-height .4s var(--ease-out), opacity .3s var(--ease-out);
}
.header.is-stuck .announce { max-height: 0; opacity: 0; }

.announce__inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .3rem .9rem;
  padding-block: .55rem;
  text-align: center;
}
.announce__bolt { color: var(--gold, #F5B301); font-size: 1rem; line-height: 1; }
.announce__text { font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.92); }
.announce__wa {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .84rem; font-weight: 700; color: #fff;
  padding: .12rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2);
  transition: background-color .25s, transform .25s;
  white-space: nowrap;
}
.announce__wa:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }

/* Mobile announcement bar. These live here rather than in section 23 because
   the rules they override are defined above — a later same-specificity rule
   would otherwise win regardless of the media query. */
@media (max-width: 760px) {
  /* The phone number goes: the WhatsApp FAB is one tap away on every screen,
     and the full sentence wrapped to three lines and ate the fold. */
  .announce__wa   { display: none; }
  .announce       { max-height: 44px; }
  .announce__inner { padding-block: .4rem; gap: .3rem .5rem; flex-wrap: nowrap; }
  .announce__text { font-size: .73rem; line-height: 1.3; }
  .announce__bolt { font-size: .85rem; }
  /* Re-tuned for the smaller header padding at this width, or the bar floats. */
  div#announce { margin-top: -.7rem; margin-bottom: .55rem; }
}

/* ── 27. LEAD POPUP ───────────────────────────────────────────────────── */
.popup { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.2rem; }
.popup[hidden] { display: none; }

.popup__backdrop {
  position: absolute; inset: 0;
  background: rgba(9, 16, 28, .62);
  backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .35s var(--ease-out);
}
.popup.is-open .popup__backdrop { opacity: 1; }

.popup__dialog {
  position: relative;
  display: grid; grid-template-columns: .82fr 1fr;
  width: min(880px, 100%);
  max-height: calc(100vh - 2.4rem);
  /* dvh so the dialog isn't clipped behind mobile Safari's collapsing toolbar */
  max-height: calc(100dvh - 2.4rem);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px rgba(9, 16, 28, .38);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.popup.is-open .popup__dialog { opacity: 1; transform: none; }

.popup__close {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.9); color: var(--ink);
  border: 1px solid var(--line);
  transition: background-color .25s, transform .25s, color .25s;
}
.popup__close svg { width: 17px; height: 17px; }
.popup__close:hover { background: var(--red); color: #fff; transform: rotate(90deg); }

/* Left panel — the offer */
.popup__aside {
  padding: 2.2rem 1.9rem;
  background:
    radial-gradient(420px 300px at 20% 12%, rgba(255,255,255,.09), transparent 60%),
    linear-gradient(155deg, var(--ink) 0%, #16233a 100%);
  color: #fff;
  display: flex; flex-direction: column; justify-content: center;
}
.popup__badge {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(245, 179, 1, .16);
  border: 1px solid rgba(245, 179, 1, .3);
  color: #F5B301;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.popup__pct {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.2rem, 2rem + 4vw, 4.6rem);
  line-height: .92; letter-spacing: -.05em;
  margin-top: 1rem; color: #fff;
}
.popup__pct span { color: var(--red); }
.popup__pctlabel { font-size: .95rem; color: rgba(255,255,255,.7); margin-top: .3rem; }

.popup__perks { display: grid; gap: .6rem; margin-top: 1.6rem; }
.popup__perks li {
  position: relative; padding-left: 1.6rem;
  font-size: .88rem; color: rgba(255,255,255,.86);
}
.popup__perks li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 15px; height: 8px;
  border-left: 2px solid #4ADE80; border-bottom: 2px solid #4ADE80;
  transform: rotate(-45deg);
}
.popup__aside-note {
  margin-top: 1.6rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem; color: rgba(255,255,255,.55);
}

/* Right panel — the form */
.popup__form { padding: 2.2rem 1.9rem; display: flex; flex-direction: column; }
.popup__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 1.2rem + .9vw, 1.85rem);
  letter-spacing: -.03em; color: var(--ink);
}
.popup__sub { font-size: .9rem; color: var(--text-2); margin: .4rem 0 1.3rem; }
.popup__form .field { margin-bottom: .85rem; }
.popup__note {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: .9rem; font-size: .78rem; color: var(--muted);
}
.popup__note .ico { width: 13px; height: 13px; }
.popup__dismiss {
  margin-top: .5rem;
  font-size: .8rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .25s;
}
.popup__dismiss:hover { color: var(--red); }

@media (max-width: 780px) {
  .popup { padding: .8rem; }
  .popup__dialog { grid-template-columns: 1fr; }
  /* On a phone the offer panel eats the fold — show the form first. */
  .popup__aside { order: 2; padding: 1.4rem; }
  .popup__form  { order: 1; padding: 2rem 1.3rem 1.2rem; }
  .popup__pct   { font-size: 2.5rem; margin-top: .6rem; }
  .popup__perks { grid-template-columns: 1fr 1fr; gap: .5rem .9rem; margin-top: 1.1rem; }
  .popup__perks li { font-size: .8rem; }
  .popup__title { font-size: 1.32rem; }
  .popup__sub   { margin-bottom: 1rem; }
  .popup__form .field { margin-bottom: .7rem; }
}
@media (max-width: 460px) {
  .popup__perks { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .popup__backdrop, .popup__dialog { transition: none; }
}