/* ============================================================
   DISSERTATIONIST — GLOBAL STYLESHEET
   Theme: "Ivory & Gilt"

   A formal, editorial identity for a UK academic practice.
   The whole site is set on warm ivory paper — never black.
   Drama comes from a high-contrast serif voice, gilt hairlines,
   engraved rules and deep crimson feature panels.

   COLOUR PLACEMENT MAP
   -------------------------------------------------------------
   ivory    → every background: hero, sections, footer, cards
   gilt     → rules, numerals, ornament, the mark of quality
   crimson  → the brand signature: primary actions, feature panels
   ink      → type only (headings and body), never a backdrop
   ============================================================ */

/* ------------------------------------------------------------a
   1. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
  /* Warm ivory paper scale — the site's canvas */
  --paper: #FDFBF6;
  --paper-2: #F7F3E9;
  --paper-3: #F0EADA;
  --paper-4: #E8E0CD;
  --line: #E2DAC7;
  --line-2: #EFE8D9;

  /* Gilt / champagne */
  --gilt-900: #5C4711;
  --gilt-800: #6E5514;
  --gilt-700: #8E6E1C;
  --gilt-600: #A98325;
  --gilt-500: #C09A2E;
  --gilt-400: #D9B85A;
  --gilt-300: #EBD79C;
  --gilt-200: #F5E9C8;
  --gilt-100: #FBF4E2;

  /* Crimson — the brand signature */
  --crimson-900: #4C0714;
  --crimson-800: #6E0D20;
  --crimson-700: #8E1230;
  --crimson-600: #AF1739;
  --crimson-500: #C92049;

  /* Ink — type colours only */
  --ink-900: #171E2E;
  --ink-800: #222C40;
  --ink-700: #2E3950;
  --slate: #4C566B;
  --slate-2: #6F7889;

  /* Legacy aliases — kept so every historic selector still resolves */
  --ink: var(--ink-900);
  --ink-2: var(--ink-700);
  --ink-950: var(--ink-900);
  --ink-850: var(--ink-800);
  --ink-600: var(--slate);
  --purple-700: var(--crimson-800);
  --purple-600: var(--crimson-700);
  --purple-500: var(--crimson-600);
  --green-900: #0A4128;
  --green-800: #0E5233;
  --green-500: #25D366;
  --gold: var(--gilt-500);

  --fill-crimson: linear-gradient(135deg, #8E1230 0%, #AF1739 55%, #6E0D20 100%);
  --fill-crimson-hover: linear-gradient(135deg, #AF1739 0%, #C92049 55%, #8E1230 100%);
  --fill-gilt: linear-gradient(135deg, #A98325 0%, #EBD79C 45%, #C09A2E 100%);
  --fill-paper: linear-gradient(160deg, #FFFDF8 0%, #F7F3E9 100%);
  --fill-royal: var(--fill-crimson);
  --fill-royal-hover: var(--fill-crimson-hover);
  --fill-ink: var(--fill-crimson);

  /* Shape system
     ---------------------------------------------------------------
     Large surfaces are square, small cards carry a 4px corner, and
     input-sized things get 2px. Buttons are squared off explicitly in
     section 31, because several of them sit on --r-sm. */
  --r-sm: 2px;    /* inputs, alerts, hairline chips */
  --r-md: 4px;    /* icon tiles, small cards          */
  --r-lg: 4px;    /* cards: stat, service, price, review */
  --r-xl: 0px;    /* large panels and sections        */
  --r-pill: 4px;  /* badges and labels                */

  /* Shadows are warm, not grey — they read as light on paper. */
  --shadow-sm: 0 1px 2px rgba(92, 71, 17, .05), 0 2px 8px rgba(92, 71, 17, .05);
  --shadow-md: 0 12px 30px -12px rgba(76, 58, 20, .16), 0 3px 10px rgba(76, 58, 20, .05);
  --shadow-lg: 0 36px 70px -30px rgba(76, 58, 20, .26), 0 12px 30px -16px rgba(76, 58, 20, .12);
  --shadow-xl: 0 56px 110px -40px rgba(76, 58, 20, .32), 0 20px 46px -24px rgba(76, 58, 20, .16);
  --shadow-crimson: 0 20px 46px -16px rgba(142, 18, 48, .42);
  --shadow-gilt: 0 20px 46px -16px rgba(169, 131, 37, .4);
  --shadow-purple: var(--shadow-crimson);

  --wrap: 1240px;
  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --serif: var(--display);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1;
}

img {
  max-width: 100%;
  display: block
}

a {
  color: inherit;
  text-decoration: none
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit
}

::selection {
  background: rgba(192, 154, 46, .26);
  color: var(--ink-900)
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  color: var(--ink-900);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -.018em;
  font-weight: 600;
}

h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.15rem);
  letter-spacing: -.03em;
  line-height: 1.04
}

h2 {
  font-size: clamp(2rem, 3.7vw, 3.1rem)
}

h3 {
  font-size: 1.35rem
}

p {
  margin: 0
}

/* The old markup marks most headings .smallcaps. Synthetic small caps look
   cheap in a high-contrast serif, so the class now buys optical refinement
   instead: tighter tracking rather than faked capitals. */
.smallcaps {
  font-variant: normal;
  letter-spacing: -.022em
}

/* Flex and grid items default to min-width:auto, which lets a long run of text
   push a track wider than the viewport on narrow screens. These opt out so
   every column can actually shrink, and long words break rather than overflow. */
h1,
h2,
h3,
h4,
p,
q,
li {
  overflow-wrap: break-word
}

.hero-grid>*,
.cmp-item>div,
.rev-who>div,
.g-pt>div,
.assure-card>div,
.fc-txt,
.ty-step,
.step,
.svc,
.price,
.rev,
.stat-card {
  min-width: 0
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 28px
}

.sec {
  padding: 112px 0;
  position: relative
}

.sec-tight {
  padding: 72px 0;
  position: relative
}

.center {
  text-align: center
}

/* Section background rhythm — two ivory tones, separated by a gilt seam. */
.bg-soft {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
  position: relative;
}

.bg-soft::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 74%);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gilt-500), transparent);
}

/* Retained utility: a deep crimson feature band. */
.bg-ink {
  background: var(--fill-crimson);
  color: rgba(255, 255, 255, .76);
  position: relative;
  overflow: hidden;
}

.bg-ink h2,
.bg-ink h3,
.bg-ink h4 {
  color: #fff
}

.bg-ink .sec-sub {
  color: rgba(255, 255, 255, .68)
}

.bg-ink .eyebrow {
  color: var(--gilt-300)
}

/* Eyebrow — a gilt rule and spaced caps */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--crimson-700);
  margin-bottom: 20px;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gilt-500));
}

.center .eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(270deg, transparent, var(--gilt-500));
}

.eyebrow.purple {
  color: var(--gilt-700)
}

.sec-sub {
  max-width: 680px;
  margin: 20px auto 0;
  color: var(--slate-2);
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Gilt wash beneath the emphasised phrase — a highlighter, not a marker pen.
   Painted as the element's own background so it needs no stacking context. */
.hl {
  color: var(--crimson-700);
  background-image: linear-gradient(90deg,
      rgba(192, 154, 46, .05), rgba(192, 154, 46, .32) 22%, rgba(192, 154, 46, .32) 78%, rgba(192, 154, 46, .05));
  background-repeat: no-repeat;
  background-size: 100% .3em;
  background-position: 0 84%;
}

.hl-p {
  color: var(--gilt-700)
}

/* Global paper grain — the whole site sits under one fine texture. */
.fx-grain {
  position: fixed;
  inset: -50%;
  z-index: 400;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* ------------------------------------------------------------
   3. BUTTONS
   ------------------------------------------------------------ */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 16px 30px;
  border: 0;
  border-radius: var(--r-sm);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .38s var(--ease-out), box-shadow .38s var(--ease-out),
    background .28s ease, color .28s ease, border-color .28s ease;
}

/* Sheen sweep — light catching a foil edge. */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .36), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--ease-out);
}

.btn:hover {
  transform: translateY(-4px)
}

.btn:hover::after {
  left: 150%
}

.btn:active {
  transform: translateY(-1px)
}

.btn:focus-visible {
  outline: 2px solid var(--gilt-600);
  outline-offset: 3px
}


/* .btn-royal {
  transition: transform 0.3s linear, box-shadow 0.3s linear, background 0.3s linear;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .btn-royal:hover {
    transition:  0.3s linear, box-shadow 0.3s linear, background 0.3s linear;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
    transition-delay: 0.15s;
    } */

.btn-royal {
  color: #fff;
  background: var(--fill-crimson);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease;
  animation: smoothUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s both;
  will-change: transform;
}

.btn-royal:hover {
  background: var(--fill-crimson-hover);
  transform: translateY(-8px);
}

@keyframes smoothUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* The "premium tier" button: gilt. */
.btn-purple {
  background: var(--fill-gilt);
  color: #3A2C08;
  box-shadow: var(--shadow-gilt), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.btn-purple:hover {
  background: linear-gradient(135deg, #C09A2E 0%, #F5E9C8 45%, #D9B85A 100%);
  box-shadow: 0 28px 58px -18px rgba(192, 154, 46, .55);
}

.btn-ink {
  background: linear-gradient(150deg, var(--ink-800), var(--ink-900));
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-ink:hover {
  box-shadow: var(--shadow-lg)
}

.btn-white {
  background: var(--paper);
  color: var(--crimson-800);
  box-shadow: 0 22px 46px -18px rgba(76, 7, 20, .5);
}

.btn-white:hover {
  background: #fff
}

.btn-ghost {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(6px);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, .2);
  border-color: #fff
}

.btn-outline {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--line);
}

.btn-outline:hover {
  background: rgba(142, 18, 48, .05);
  border-color: rgba(142, 18, 48, .4);
  color: var(--crimson-700);
}

.btn-lg {
  padding: 21px 42px;
  font-size: .83rem
}

.btn-block {
  width: 100%
}

.btn svg {
  flex: none;
  transition: transform .3s var(--ease-out)
}

.btn:hover svg:last-child {
  transform: translateX(5px)
}

/* ------------------------------------------------------------
   4. HEADER — ivory glass on a gilt hairline
   ------------------------------------------------------------ */
.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  --logo-h: 54px;
  background: rgba(253, 251, 246, .86);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.hdr.stuck {
  background: rgba(253, 251, 246, .95);
  border-bottom-color: rgba(192, 154, 46, .45);
  box-shadow: 0 18px 40px -30px rgba(76, 58, 20, .6);
  --logo-h: 46px;
}

.scroll-bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  z-index: 2;
  background: linear-gradient(90deg, var(--crimson-700), var(--gilt-500));
  transition: width .1s linear;
}

.hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
  transition: height .4s var(--ease);
}

.hdr.stuck .hdr-in {
  height: 72px
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 1 auto;
  min-width: 0
}

/* The supplied artwork is a JPG on a white field. Multiply blending drops that
   white into the ivory page, so the mark sits on the paper with no visible box.

   The mark is a wide lockup (1386×218). Sized by height alone it would run
   340px across, so the width is what actually caps it — and it has to be able
   to give way on a phone, or the header runs past the screen edge. Hence a
   fluid cap rather than a fixed 206px, with --logo-h as the ceiling. */
.logo-img {
  width: min(206px, 42vw);
  height: auto;
  max-height: var(--logo-h, 54px);
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: width .4s var(--ease), max-height .4s var(--ease), transform .35s var(--ease-out);
}

.logo:hover .logo-img {
  transform: scale(1.03)
}

/* Text fallback, kept for anywhere the image is not used. */
.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--fill-crimson);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  box-shadow: var(--shadow-crimson);
  transition: transform .35s var(--ease-out);
}

.logo:hover .logo-mark {
  transform: rotate(-8deg) scale(1.06)
}

.logo-txt {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -.025em
}

.logo-txt span {
  color: var(--crimson-700)
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px
}

.nav a {
  position: relative;
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink-700);
  transition: color .2s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--crimson-700), var(--gilt-500));
  border-radius: 2px;
  transition: width .34s var(--ease-out);
}

.nav a:hover {
  color: var(--ink-900)
}

.nav a:hover::after,
.nav a.on::after {
  width: 100%
}

.nav a.on {
  color: var(--crimson-700);
  font-weight: 700
}

.hdr-cta {
  display: flex;
  align-items: center;
  gap: 18px
}

.hdr-phone {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-800);
}

.hdr .btn {
  padding: 13px 24px;
  font-size: .7rem;
  letter-spacing: .16em
}

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer
}

.burger span {
  display: block;
  width: 24px;
  height: 1.8px;
  background: var(--ink-900);
  margin: 5px 0;
  border-radius: 2px;
  transition: .3s var(--ease)
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg)
}

/* ------------------------------------------------------------
   5. HERO — the ivory title page
   ------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 60px 0 60px;
}

/* Layer 1: soft crimson and gilt light washing across the paper.
   Three stacked layers, top to bottom:
     a. a warm-ivory scrim, near-opaque under the text column and released
        toward the right so the photograph still breathes behind the form;
     b. the crimson/gilt wash, kept as a tint rather than a mid-tone;
     c. the photograph itself. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(255, 251, 246, 0) 0%,
      rgb(255 251 246 / 95%) 44%,
      rgb(255 251 246 / 86%) 58%,
      rgb(255 250 244 / 55%) 78%,
      rgb(255 250 244 / 34%) 100%),
    linear-gradient(250deg, rgb(161 13 45 / 55%), rgb(255 144 144 / 26%), rgb(255 255 255 / 90%)),
    url(../img/hero.png) center / cover no-repeat;
}

/* Layer 2: an engraved rule grid — the ledger of an academic press. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(142, 110, 28, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 110, 28, .11) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(circle at 50% 35%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 12%, transparent 76%);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1
}

.hero-blob.a {
  width: 440px;
  height: 440px;
  top: -150px;
  right: -120px;
  border: 1px solid rgba(192, 154, 46, .35);
  animation: drift 20s ease-in-out infinite;
}

.hero-blob.b {
  width: 310px;
  height: 310px;
  bottom: -130px;
  left: -90px;
  border: 1px solid rgba(142, 18, 48, .16);
  animation: drift 26s ease-in-out infinite reverse;
}

@keyframes drift {

  0%,
  100% {
    transform: translate(0, 0) scale(1)
  }

  50% {
    transform: translate(26px, -30px) scale(1.07)
  }
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 64px;
  align-items: start;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  background: var(--gilt-100);
  border: 1px solid rgba(192, 154, 46, .4);
  color: var(--gilt-800);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crimson-600);
  animation: pulseDot 2.4s infinite;
}

@keyframes pulseDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }

  50% {
    opacity: .35;
    transform: scale(.75)
  }
}

.hero h1 {
  font-size: 45px;
  letter-spacing: -.032em;
  line-height: 1.06;
  color: var(--ink-900);
  text-transform: uppercase;
  font-weight: bolder;
}

/* The emphasised clause is set in crimson italic — the one flourish. */
.hero h1 em {
  font-size: 47px;
  font-weight: 700;
  display: inline-block;
  color: var(--crimson-700);
  padding-right: .06em;
  position: relative;
}

.hero h1 em::after {
  content: "";
  position: absolute;
  left: .04em;
  right: .1em;
  bottom: .02em;
  height: 2px;
  /*background: linear-gradient(90deg, transparent, var(--gilt-500), transparent);*/
}

/* Word-level entrance, applied by main.js. */
.hero h1 .w {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(28px);
  animation: wordIn .95s var(--ease-out) forwards;
}

@keyframes wordIn {
  to {
    opacity: 1;
    filter: blur(0);
    transform: none
  }
}

.hero-lead {
  margin-top: 28px;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink-800);
  max-width: 560px;
}

.hero-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 20px;
}

.hero-ticks span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
}

.hero-ticks i {
  color: var(--gilt-500);
  font-style: normal;
  font-size: 13px;
}

/* Reply-time line + hero action row */
.pg-reply {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 11px;
  margin-top: 20px;
  font-size: .9rem;
  color: var(--ink-900);
  position: relative;
  z-index: 2;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green-500);
  flex: none;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .6);
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0)
  }
}

.pg-reply b {
  color: var(--crimson-700);
  font-weight: 700
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px
}

.btn-wa {
  background: linear-gradient(135deg, #25D366, #12A150);
  color: #04240F;
  padding: 16px 28px;
  font-size: .87rem;
  letter-spacing: .02em;
  text-transform: none;
  font-weight: 700;
  box-shadow: 0 20px 40px -18px rgba(18, 161, 80, .7);
}

.btn-wa:hover {
  box-shadow: 0 26px 50px -18px rgba(18, 161, 80, .8)
}

.btn-intro {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--ink-900);
  padding: 16px 28px;
  font-size: .87rem;
  letter-spacing: .02em;
  text-transform: none;
  font-weight: 600;
}

.btn-intro:hover {
  background: var(--ink-900);
  color: var(--paper)
}

/* Green contact panel — retained for any page that still uses it */
.panel-green {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--green-800), var(--green-900));
  padding: 40px 48px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  margin-top: 24px;
}

.panel-green::before,
.panel-green::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  height: 210px;
  border-radius: 50%;
  border: 1px solid rgba(235, 215, 156, .25);
  pointer-events: none;
}

.panel-green::before {
  bottom: -120px;
  transform: rotate(-4deg)
}

.panel-green::after {
  bottom: -168px;
  transform: rotate(3deg)
}

.pg-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  position: relative;
  z-index: 2
}

.pg-top .pg-reply {
  margin-top: 0;
  margin-left: auto
}

.pg-rule {
  height: 1px;
  background: rgba(235, 215, 156, .22);
  margin: 28px 0 26px;
  position: relative;
  z-index: 2
}

.pg-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2
}

.pg-stats .n {
  font-family: var(--display);
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  font-weight: 600;
  color: var(--gilt-300);
  line-height: 1
}

.pg-stats .l {
  margin-top: 7px;
  font-size: .85rem;
  color: rgba(255, 255, 255, .66)
}

/* ------------------------------------------------------------
   6. LEAD FORM CARD — the certificate on the desk
   ------------------------------------------------------------ */
/* A crimson-to-gilt rule caps the head of the card, like an award certificate.
   It is painted as a background layer so it follows the rounded corners exactly
   — a positioned bar would overhang them. */
.form-card {
  position: relative;
  background:
    linear-gradient(90deg, var(--crimson-700), var(--gilt-500) 50%, var(--crimson-700)) top left/100% 4px no-repeat,
    #FFFDF8;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 44px 38px 34px;
  box-shadow: var(--shadow-xl);
}

.form-flag {
  position: absolute;
  top: -16px;
  right: 30px;
  background: var(--fill-crimson);
  color: #fff;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: var(--shadow-crimson);
}

.form-card h3 {
  font-size: 1.62rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.form-card>p {
  font-size: .92rem;
  color: var(--slate-2);
  margin-top: 8px
}

/* A gilt rule separates the card's title block from the fields, whether or not
   the optional standfirst paragraph is present. */
.form-card>form {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
}

.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.field {
  margin-bottom: 18px
}

.field label {
  display: block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--slate-2);
  margin-bottom: 9px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font-size: .94rem;
  color: var(--ink-900);
  transition: border-color .22s, box-shadow .22s, background .22s;
}

.field textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.6
}

.field select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236F7889' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 42px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #A9A493
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  background: #fff;
  border-color: var(--gilt-500);
  box-shadow: 0 0 0 3px rgba(192, 154, 46, .2);
}

.form-note {
  margin-top: 17px;
  text-align: center;
  font-size: .78rem;
  color: var(--slate-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.form-note b {
  color: var(--ink-700);
  font-weight: 600
}

.form-alert {
  margin-bottom: 22px;
  padding: 14px 17px;
  border-radius: var(--r-sm);
  background: rgba(201, 32, 73, .06);
  border: 1px solid rgba(142, 18, 48, .24);
  border-left: 3px solid var(--crimson-700);
  color: var(--crimson-800);
  font-size: .87rem;
  font-weight: 600;
}

/* Honeypot: reachable to bots, invisible to people. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ------------------------------------------------------------
   7. TRUST MARQUEE — an engraved ribbon under the hero
   ------------------------------------------------------------ */
.marquee {
  background: var(--paper-3);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  overflow: hidden;
  position: relative;
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 2;
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--paper-3), transparent)
}

.marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--paper-3), transparent)
}

.mq-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: scrollX 44s linear infinite
}

.marquee:hover .mq-track {
  animation-play-state: paused
}

@keyframes scrollX {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

.mq-item {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 0 34px;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ink-800);
  white-space: nowrap;
}

.mq-item::after {
  content: "";
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--gilt-600);
}

/* ------------------------------------------------------------
   8. GUARANTEE BAR + STAT CARDS
   ------------------------------------------------------------ */
.guarantee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: center;
  background: #FFFDF8;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 38px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.guarantee::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--crimson-700), var(--gilt-500));
}

.g-left {
  display: flex;
  align-items: center;
  gap: 20px
}

.g-shield {
  width: 62px;
  height: 62px;
  border-radius: var(--r-md);
  background: var(--fill-crimson);
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: var(--shadow-crimson);
}

.g-left h3 {
  font-size: 1.3rem;
  font-weight: 600
}

.g-left p {
  font-size: .9rem;
  color: var(--slate-2);
  margin-top: 5px
}

.g-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.g-pt {
  display: flex;
  gap: 12px;
  align-items: flex-start
}

.g-pt svg {
  flex: none;
  margin-top: 3px;
  stroke: var(--crimson-700);
  transition: transform .3s var(--ease-out)
}

.g-pt:hover svg {
  transform: scale(1.18) rotate(-6deg)
}

.g-pt b {
  display: block;
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin-bottom: 3px;
}

.g-pt span {
  font-size: .8rem;
  color: var(--slate-2)
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 28px
}

.stat-card {
  position: relative;
  overflow: hidden;
  background: #FFFDF8;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 38px 28px;
  text-align: center;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s;
}

/* Cursor-following highlight, driven by --mx/--my from main.js. */
.stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(192, 154, 46, .16), transparent 60%);
  transition: opacity .4s ease;
}

.stat-card:hover::after {
  opacity: 1
}

.stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--crimson-700), var(--gilt-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(192, 154, 46, .5);
}

.stat-card:hover::before {
  transform: scaleX(1)
}

.stat-card .n {
  font-family: var(--display);
  font-size: clamp(2.3rem, 3.6vw, 3rem);
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1;
  letter-spacing: -.03em;
}

.stat-card .n i {
  font-style: normal;
  color: var(--gilt-600)
}

.stat-card .l {
  margin-top: 14px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.stat-card .s {
  margin-top: 7px;
  font-size: .82rem;
  color: var(--slate-2)
}

/* ------------------------------------------------------------
   9. CHALLENGES vs EXPERT ASSISTANCE
   ------------------------------------------------------------ */
.cmp-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 56px
}

.cmp-intro h2 {
  font-size: clamp(1.9rem, 3.1vw, 2.65rem)
}

.cmp-intro .sec-sub {
  margin-left: 0;
  margin-right: 0;
  max-width: 46ch
}

.cmp-art {
  position: relative
}

.cmp-art::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 60% 45%, rgba(192, 154, 46, .2), transparent 62%);
}

.cmp-art img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin-left: auto;
  animation: floatY 8s ease-in-out infinite;
  filter: drop-shadow(0 26px 44px rgba(76, 58, 20, .18));
}

@keyframes floatY {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-16px)
  }
}

/* Award laurels. The source files carry a white plate, so they are multiplied
   straight into the ivory instead of shadowed — a drop-shadow would print the
   plate as a hard rectangle. Nothing between the image and the section may
   open a stacking context, or the blend gets isolated and the plate returns:
   hence no z-index here, and no reveal filter on the wrapper. */
.cmp-awards {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.cmp-art .award {
  width: 50%;
  max-width: 268px;
  height: auto;
  margin: 0;
  filter: none;
  mix-blend-mode: multiply;
  animation: floatY 8s ease-in-out infinite;
}

.cmp-art .award:last-child {
  animation-delay: -2.6s
}

/* The stock glow was sized for the old illustration; the laurels want a
   quieter halo, centred, or it multiplies into a visible tan box. */
.cmp-art.awards::before {
  inset: -14% -6%;
  background: radial-gradient(circle at 50% 50%, rgba(192, 154, 46, .13), transparent 66%);
}

/* Two independent stacks: each column carries its own kicker, rule and
   headline, then a tight run of rows. Rows are deliberately NOT aligned
   across the columns — each side reads as its own list. */
.cmp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.cmp-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Column masthead: kicker over a hairline rule, then the headline. */


/* The kicker is a tinted chip — it puts the column's colour on the page
   before you reach a single row. */
.cmp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.cmp-kicker svg {
  flex: none
}

/* The hairline under the kicker is drawn as a 1px background gradient on the
   headline, so it can fade out toward the right instead of stopping dead. */
.cmp-head h3 {
  margin-top: 5px;
  padding-top: 17px;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 1px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.022em;
  color: var(--ink-900);
  text-wrap: balance;
}

.cmp-head.problem .cmp-kicker {
  background: rgba(142, 18, 48, .09);
  color: var(--crimson-700);
  box-shadow: inset 0 0 0 1px rgba(142, 18, 48, .2);
}

.cmp-head.problem h3 {
  background-image: linear-gradient(90deg, rgba(142, 18, 48, .5), rgba(142, 18, 48, .1) 55%, transparent);
}

.cmp-head.solution .cmp-kicker {
  background: var(--gilt-100);
  color: var(--gilt-800);
  box-shadow: inset 0 0 0 1px rgba(192, 154, 46, .42);
}

.cmp-head.solution h3 {
  background-image: linear-gradient(90deg, var(--gilt-500), rgba(192, 154, 46, .2) 55%, transparent);
}

.cmp-item {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 12px;
  padding: 14px 16px 14px 19px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s, background .4s;
}

/* Each row carries a faint diagonal wash of its column's colour, strongest at
   the spine and gone by the time it reaches the text. */
.cmp-item.problem {
  background: linear-gradient(115deg, rgba(142, 18, 48, .075), rgba(142, 18, 48, .02) 52%, rgba(142, 18, 48, 0) 78%), var(--paper-2);
  border-color: rgba(142, 18, 48, .17);
}

.cmp-item.solution {
  background: linear-gradient(115deg, rgba(192, 154, 46, .13), rgba(192, 154, 46, .03) 52%, rgba(192, 154, 46, 0) 78%), #FFFDF6;
  border-color: rgba(192, 154, 46, .45);
}

/* Permanent accent spine, held back at rest and brought up on hover. */
.cmp-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  opacity: .5;
  transition: opacity .4s var(--ease-out);
}

.cmp-item:hover::before {
  opacity: 1
}

.cmp-item.problem::before {
  background: linear-gradient(180deg, var(--crimson-700), rgba(142, 18, 48, .2));
}

.cmp-item.solution::before {
  background: linear-gradient(180deg, var(--gilt-500), var(--crimson-700));
}

/* Rows are small now, so the lift is proportionally smaller. */
.cmp-item.problem:hover {
  transform: translateY(-2px);
  background: linear-gradient(115deg, rgba(142, 18, 48, .12), rgba(142, 18, 48, .03) 52%, rgba(142, 18, 48, 0) 78%), var(--paper-2);
  border-color: rgba(142, 18, 48, .34);
}

.cmp-item.solution:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--gilt-500)
}

.cmp-ico {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  margin-top: 1px;
  flex: none;
  display: grid;
  place-items: center;
  transition: background .3s, color .3s, box-shadow .3s, transform .35s var(--ease-out);
}

.cmp-ico svg {
  width: 14px;
  height: 14px;
}

.cmp-item.problem .cmp-ico {
  background: linear-gradient(140deg, rgba(142, 18, 48, .16), rgba(142, 18, 48, .06));
  color: var(--crimson-700);
  box-shadow: inset 0 0 0 1px rgba(142, 18, 48, .16);
}

.cmp-item.solution .cmp-ico {
  background: linear-gradient(140deg, var(--gilt-300), var(--gilt-100));
  color: var(--gilt-800);
  box-shadow: inset 0 0 0 1px rgba(192, 154, 46, .38);
}

.cmp-item.problem:hover .cmp-ico {
  background: var(--fill-crimson);
  color: #fff;
  transform: rotate(-7deg)
}

.cmp-item.solution:hover .cmp-ico {
  background: linear-gradient(140deg, var(--gilt-500), var(--gilt-700));
  color: #fff;
  transform: rotate(-7deg)
}

/* Row copy sits at list scale, not card scale — the column headline
   carries the weight here. */
.cmp-item h4 {
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink-900);
  margin-bottom: 4px;
}

.cmp-item.problem h4 {
  color: var(--ink-700)
}

.cmp-item p {
  font-size: .78rem;
  line-height: 1.55;
  color: var(--slate);
}

/* The pair sits centred beneath the two columns. A hard 276px left offset used
   to stand in for that centring, which pushed the WhatsApp call clean off the
   right edge of a phone — 101px of the page hung outside the viewport. */
.cmp-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 44px;
  margin-top: 75px;
}

/* ------------------------------------------------------------
   11. SERVICES
   ------------------------------------------------------------ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 60px
}

.svc {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #FFFDF8;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px 34px;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .4s;
}

.svc::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(192, 154, 46, .14), transparent 62%);
  transition: opacity .45s ease;
}

.svc:hover::after {
  opacity: 1
}

.svc::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--crimson-700), var(--gilt-500));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s var(--ease-out);
}

.svc:hover {
  transform: translateY(-9px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(192, 154, 46, .5)
}

.svc:hover::before {
  transform: scaleY(1)
}

.svc-no {
  position: absolute;
  top: 28px;
  right: 32px;
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 500;
  font-style: italic;
  color: var(--paper-4);
  line-height: 1;
  transition: color .4s ease, transform .5s var(--ease-out);
}

.svc:hover .svc-no {
  color: rgba(192, 154, 46, .45);
  transform: translateY(-4px)
}

.svc-ico {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--gilt-100);
  border: 1px solid rgba(192, 154, 46, .35);
  color: var(--crimson-700);
  margin-bottom: 26px;
  transition: transform .45s var(--ease-out), background .35s, color .35s, border-color .35s;
}

.svc:hover .svc-ico {
  background: var(--fill-crimson);
  color: #fff;
  border-color: transparent;
  transform: rotate(-7deg) scale(1.05);
}

.svc h3 {
  position: relative;
  z-index: 1;
  font-size: 1.24rem;
  font-weight: 600;
  margin-bottom: 12px
}

.svc p {
  position: relative;
  z-index: 1;
  font-size: .93rem;
  line-height: 1.75;
  margin-bottom: 26px
}

.svc-link {
  border: 1px solid var(--line);
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crimson-700);
  background: linear-gradient(11deg, rgb(237 67 108 / 22%), rgb(255 255 255 / 3%) 52%, rgba(142, 18, 48, 0) 78%), #ffffff;
  transition: gap .3s var(--ease-out), color .25s;
  width: 205px;
  height: 40px;
  padding: 10px;
  border-radius: var(--r-md);
}

.svc-link:hover {
  gap: 16px;
  color: var(--gilt-700)
}

/* ------------------------------------------------------------
   11b. PUBLISH BAND — crimson money-back strip under the services
   ------------------------------------------------------------ */
/* The copy is centred on the band as a whole, not on the space left over beside
   the seal — so the seal is lifted out of flow and the padding is kept
   symmetric to make room for it. That is what the old negative margins were
   reaching for; done this way it survives every width. */
.pub-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 64px;
  padding: 38px 210px;
  border-radius: var(--r-xl);
  background: var(--fill-crimson);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(235, 215, 156, .28);
  text-align: center;
}

/* Gilt ring + soft wash — the same treatment the crimson banner carries. */
.pub-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 470px;
  height: 470px;
  right: -195px;
  top: -220px;
  border-radius: 50%;
  border: 1px solid rgba(235, 215, 156, .22);
}

.pub-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at left center, rgba(255, 255, 255, .12), transparent 58%);
}

.pub-seal {
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: 150px;
  height: auto;
  filter: drop-shadow(0 16px 28px rgba(43, 4, 12, .5));
}

/* The block as a whole is centred on the band; inside it, everything hangs off
   the headline's left edge. `width: fit-content` is what makes that possible —
   it shrinks the column to the width of its widest child (the headline), so
   `align-items: flex-start` gives the buttons the headline's own starting x
   rather than the band's. `margin-inline: auto` then re-centres the group.

   Doing it this way means no measurement is hardcoded: the buttons follow the
   headline wherever it lands, at any width and any font size. */
.pub-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* The band sets text-align: center for everything inside it. On one line that
   is invisible here — the headline box is exactly as wide as its text — but
   the moment the line wraps, centred text would pull away from the buttons
   sitting at the left edge. Left is the alignment the group is built on. */
.pub-body h3 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: #fff;
  text-align: left;
}

/* Gilt hairline under the headline, fading either side. */
.pub-body h3::after {
  content: "";
  display: block;
  width: 128px;
  height: 1px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--gilt-400), transparent);
}

/* No negative margin here. The band centres its copy on itself and keeps the
   padding symmetric to clear the seal (see .pub-band above) — a hardcoded
   pull-left fights that at every width, and because the band is
   `overflow: hidden` the row does not just sit off-centre, it gets sliced
   off at the left edge once the band is narrower than the nudge. */
.pub-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  max-width: 100%;
}

.btn-hire {
  background: var(--fill-gilt);
  color: #3A2C08;
  padding: 16px 30px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  box-shadow: var(--shadow-gilt);
}

.btn-hire:hover {
  box-shadow: 0 26px 54px -18px rgba(169, 131, 37, .58)
}

.pub-band .btn-wa {
  padding: 16px 28px;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #04240F;
  box-shadow: 0 20px 44px -18px rgba(4, 36, 15, .75), inset 0 0 0 1px rgba(255, 255, 255, .18);
}

/* ------------------------------------------------------------
   12. BANNER
   ------------------------------------------------------------ */
section#banner {
  padding: 20px 0
}

.banner {
  max-width: 1180px;
  width: 100%;
  margin: 64px auto;
  position: relative;
  display: grid;
  grid-template-columns: 1.7fr auto;
  gap: 52px;
  align-items: center;
  padding: 58px 62px;
  border-radius: var(--r-xl);
  background: var(--fill-crimson);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(235, 215, 156, .28);
}

.banner::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  right: -230px;
  top: -260px;
  border: 1px solid rgba(235, 215, 156, .2);
}

.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at left center, rgba(255, 255, 255, .12), transparent 55%);
}

.banner h3 {
  font-size: 2.25rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.18;
  margin: 16px 0
}

.banner p {
  color: rgba(255, 255, 255, .82);
  font-size: 1rem;
  line-height: 1.8;
  max-width: 620px
}

.banner-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--fill-gilt);
  color: #3A2C08;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}

.banner-btns {
  display: flex;
  flex-direction: column;
  gap: 15px
}

.banner .btn {
  width: 242px;
  justify-content: center;
  padding: 18px;
  border-radius: var(--r-md)
}

.banner-features {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 32px
}

.banner-features span {
  color: rgba(255, 255, 255, .9);
  font-size: .9rem;
  font-weight: 500
}

/* ------------------------------------------------------------
   13. TRACK-CHANGES TERMINAL
   ------------------------------------------------------------ */
.terminal {
  max-width: 960px;
  margin: 56px auto 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #FFFDF8;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xl);
}

.t-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--fill-crimson);
  padding: 15px 20px;
}

.t-dots {
  display: flex;
  gap: 8px
}

.t-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: block;
  opacity: .9
}

.t-dots i:nth-child(1) {
  background: #FF9A8F
}

.t-dots i:nth-child(2) {
  background: #FFD98A
}

.t-dots i:nth-child(3) {
  background: #93E6A6
}

.t-file {
  font-family: var(--mono);
  font-size: .78rem;
  color: rgba(255, 255, 255, .72)
}

.t-tabs {
  margin-left: auto;
  display: flex;
  gap: 8px
}

.t-tab {
  padding: 8px 17px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .82);
  transition: .25s var(--ease);
}

.t-tab:hover {
  background: rgba(255, 255, 255, .24);
  color: #fff
}

.t-tab.on {
  background: var(--fill-gilt);
  color: #3A2C08;
  border-color: rgba(235, 215, 156, .7)
}

.t-body {
  padding: 40px 42px;
  min-height: 180px
}

.t-text {
  font-family: var(--display);
  font-size: 1.16rem;
  line-height: 2.1;
  color: var(--ink-800);
  animation: fadeIn .45s var(--ease);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(7px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.del {
  background: rgba(201, 32, 73, .1);
  color: var(--crimson-800);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  padding: 2px 6px;
  border-radius: 4px;
}

.ins {
  background: rgba(192, 154, 46, .18);
  color: var(--gilt-900);
  border-bottom: 2px solid rgba(192, 154, 46, .65);
  padding: 2px 6px;
  border-radius: 4px;
}

.t-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding: 15px 22px;
  font-size: .76rem;
  color: var(--slate-2);
}

.t-foot .lft {
  display: flex;
  align-items: center;
  gap: 9px
}

.t-foot .lft svg {
  color: var(--gilt-600)
}

#tCount {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--crimson-700)
}

/* ------------------------------------------------------------
   14. PROCESS
   ------------------------------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 64px
}

.step {
  position: relative;
  padding-top: 8px
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;
  left: 72px;
  right: -20px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--gilt-400) 0 6px, transparent 6px 14px);
}

.step .num {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #FFFDF8;
  color: var(--crimson-700);
  border: 1.5px solid var(--gilt-500);
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-out), color .3s, background .3s, box-shadow .4s;
}

.step:hover .num {
  transform: translateY(-6px);
  color: #fff;
  background: var(--fill-crimson);
  border-color: transparent;
  box-shadow: var(--shadow-crimson);
}

.step h3 {
  font-size: 1.14rem;
  font-weight: 600;
  margin-bottom: 10px
}

.step p {
  font-size: .91rem;
  line-height: 1.75
}

/* ------------------------------------------------------------
   15. PRICING
   ------------------------------------------------------------ */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 60px;
  align-items: start
}

.price {
  position: relative;
  overflow: hidden;
  background: #FFFDF8;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px 34px;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .4s;
}

.price::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(192, 154, 46, .12), transparent 62%);
  transition: opacity .45s ease;
}

.price:hover::after {
  opacity: 1
}

.price:hover {
  transform: translateY(-9px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(192, 154, 46, .5)
}

/* The recommended tier is the one crimson card on the page. */
/* overflow stays visible here so the "Most Popular" flag can sit proud of the
   card's top edge; the wash and spotlight inherit the radius to compensate. */
.price.hot {
  background: var(--fill-crimson);
  border: 1px solid transparent;
  padding-top: 48px;
  color: rgba(255, 255, 255, .78);
  overflow: visible;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(235, 215, 156, .3);
}

.price.hot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(560px 320px at 50% 0%, rgba(255, 255, 255, .14), transparent 62%);
}

/* Lift the card's own content above the highlight wash — but not the flag,
   which must stay pinned to the card's top edge. */
.price.hot>* {
  position: relative;
  z-index: 1
}

.price.hot>.hot-flag {
  position: absolute
}

.price.hot h3 {
  color: #fff
}

.price.hot:hover {
  transform: translateY(-12px)
}

.hot-flag {
  position: absolute;
  top: -14px;
  right: 26px;
  z-index: 2;
  background: var(--fill-gilt);
  color: #3A2C08;
  padding: 8px 19px;
  border-radius: var(--r-pill);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: var(--shadow-gilt);
}

.p-tag {
  display: inline-block;
  padding: 6px 15px;
  border-radius: var(--r-pill);
  background: var(--paper-3);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 18px;
}

.price.hot .p-tag {
  background: rgba(255, 255, 255, .16);
  color: var(--gilt-200)
}

.price h3 {
  font-size: 1.62rem;
  font-weight: 600;
  margin-bottom: 9px
}

.p-desc {
  font-size: .9rem;
  color: var(--slate-2);
  min-height: 46px
}

.price.hot .p-desc {
  color: rgba(255, 255, 255, .72)
}

.p-amt {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 24px 0 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-2);
}

.price.hot .p-amt {
  border-bottom-color: rgba(255, 255, 255, .22)
}

.p-amt .v {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1
}

.price.hot .p-amt .v {
  color: var(--gilt-200)
}

.p-amt .u {
  font-size: .86rem;
  color: var(--slate-2)
}

/* The feature list is ruled off from the description. When a .p-amt price block
   is present it already carries that rule, so the list drops its own. */
.p-list {
  list-style: none;
  margin: 26px 0 30px;
  padding: 24px 0 0;
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line-2);
}

.p-amt+.p-list {
  margin-top: 0;
  padding-top: 0;
  border-top: 0
}

.price.hot .p-list {
  border-top-color: rgba(255, 255, 255, .22)
}

.p-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .91rem;
  color: var(--ink-700)
}

.price.hot .p-list li {
  color: rgba(255, 255, 255, .9)
}

.p-list svg {
  flex: none;
  margin-top: 4px;
  color: var(--crimson-700)
}

.price.hot .p-list svg {
  color: var(--gilt-300)
}

/* ------------------------------------------------------------
   16. REAL RESULTS — before / after
   ------------------------------------------------------------ */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: stretch;
  margin-top: 56px
}

.ba {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: 38px 34px;
  border: 1px solid var(--line);
  background: #FFFDF8;
}

.ba.before {
  background: var(--paper-3)
}

.ba.after {
  background: #FFFDF8;
  border-color: rgba(192, 154, 46, .5);
  box-shadow: var(--shadow-lg);
}

.ba.after::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(520px 300px at 100% 0%, rgba(192, 154, 46, .14), transparent 62%);
}

.ba.after::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gilt-500), var(--crimson-700));
}

.ba.after>* {
  position: relative;
  z-index: 1
}

.ba-label {
  display: inline-flex;
  align-items: center;
  padding: 7px 17px;
  border-radius: var(--r-pill);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.ba.before .ba-label {
  background: rgba(76, 86, 107, .1);
  color: var(--slate)
}

.ba.after .ba-label {
  background: var(--gilt-100);
  color: var(--gilt-800)
}

.ba h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 14px
}

.ba.before h3 {
  color: var(--slate)
}

.ba.after h3 {
  color: var(--ink-900)
}

.ba p {
  font-size: .95rem;
  line-height: 1.8
}

/* The old markup carried inline red/green swatches; these classes replace them. */
.tone-poor {
  color: var(--crimson-700)
}

.tone-good {
  color: var(--gilt-700)
}

.ba-foot {
  margin-top: 30px;
  background: #FFFDF8;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gilt-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 24px 28px;
  display: flex;
  gap: 18px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.ba-foot svg {
  flex: none;
  color: var(--gilt-600)
}

.ba-foot p {
  font-size: .96rem;
  line-height: 1.75;
  color: var(--ink-700)
}

.ba-cta {
  margin-top: 38px;
  text-align: center
}

/* ------------------------------------------------------------
   17. REVIEWS
   ------------------------------------------------------------ */
/* Two ivory ribbons of testimony drifting past each other. Still no boxes —
   each entry is a slab divided from its neighbour by an engraved gilt rule,
   so the section reads as one continuous broadsheet in motion. */
.rev-sec {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-block: 1px solid var(--line);
}

.rev-sec>.wrap {
  position: relative;
  z-index: 1;
}

/* Two faint colour pools keep the paper from reading as dead white. */
.rev-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(760px circle at 86% 2%, rgba(192, 154, 46, .17), transparent 58%),
    radial-gradient(720px circle at 8% 98%, rgba(142, 18, 48, .09), transparent 60%);
}

/* The engraved ledger grid, as on the hero, masked away from the edges. */
.rev-sec::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(142, 110, 28, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 110, 28, .1) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 22%, #000 4%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 4%, transparent 62%);
}

.rev-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin-top: 36px
}

.rev-score {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  background: linear-gradient(150deg, #FFFDF6, #FBF5E6);
  border: 1px solid rgba(192, 154, 46, .42);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s;
}

.rev-score:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--gilt-500);
}

/* A slow gilt sheen crosses each readout, then rests for a few seconds. */
.rev-score::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: skewX(-18deg);
  animation: revSheen 6s ease-in-out infinite;
}

@keyframes revSheen {

  0%,
  74% {
    left: -60%
  }

  100% {
    left: 130%
  }
}

.rev-score .big {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(150deg, var(--crimson-700), var(--gilt-700) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.rev-score .meta {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--slate-2)
}

.rev-score .meta b {
  display: block;
  color: var(--ink-900);
  font-weight: 600
}

/* ---- The ribbons ------------------------------------------------------ */

/* Full-bleed: the ribbon runs edge to edge, escaping the centred .wrap. */
.rev-marquee {
  position: relative;
  z-index: 1;
  margin-top: 64px;
  /* Full-bleed without a transform: main.js's reveal helper sets
     `transform: none` for a second after the element enters, which would
     otherwise shunt a translateX-centred ribbon off to the right. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Both ends dissolve into the paper so cards arrive and leave, never
     appear to be clipped by an edge. */
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* Vertical padding gives the cards' shadows and hover lift room to breathe. */
.rev-row {
  overflow: hidden;
  padding: 14px 0 22px;
}

/* The loop is seamless only while padding-left equals the gap: that makes the
   track's border-box width exactly twice one set's advance, so translateX(-50%)
   lands card 7 precisely where card 1 began. Change one, change the other. */
.rev-track {
  display: flex;
  gap: 22px;
  width: max-content;
  padding-left: 22px;
  animation: revScroll 64s linear infinite;
}

@keyframes revScroll {
  to {
    transform: translateX(-50%)
  }
}

/* Reading beats motion: hovering anywhere over the ribbon holds it. */
.rev-marquee:hover .rev-track {
  animation-play-state: paused;
}

/* Letterpress cards: squared-off corners, a gilt hairline and a crimson-to-gilt
   rule stamped across the head — an academic index card, not a soft app tile. */
.rev {
  position: relative;
  flex: none;
  width: 396px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 30px 28px;
  border: 1px solid rgba(192, 154, 46, .34);
  border-radius: 4px;
  background: linear-gradient(160deg, #FFFDF7 0%, #FBF5E7 100%);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .4s;
}

.rev:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gilt-500);
}

/* Hover warms the card from the cursor — main.js feeds --mx / --my. */
.rev::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(192, 154, 46, .18), transparent 62%);
  transition: opacity .45s ease;
}

.rev:hover::after {
  opacity: 1
}

/* The crimson-to-gilt rule stamped across the head of every card. It reaches
   full width on hover, so the card the reader stops on marks itself. */
.rev::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--crimson-700), var(--gilt-500) 62%, rgba(192, 154, 46, .25));
  transform: scaleX(.34);
  transform-origin: left;
  transition: transform .55s var(--ease-out);
}

.rev:hover::before {
  transform: scaleX(1)
}

.stars {
  position: relative;
  z-index: 1;
  color: var(--gilt-500);
  font-size: 1rem;
  letter-spacing: 5px;
  text-shadow: 0 1px 1px rgba(142, 110, 28, .3);
}

/* Oversized open quote, pressed into the paper behind the text. */
.stars::after {
  content: "\201C";
  position: absolute;
  top: -26px;
  right: 0;
  font-family: var(--display);
  font-size: 6rem;
  line-height: 1;
  color: rgba(192, 154, 46, .2);
  pointer-events: none;
}

.rev q {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--ink-900);
  font-weight: 400;
  quotes: none;
}

.rev-who {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
  padding-top: 20px;
}

.rev-who::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(192, 154, 46, .55), rgba(192, 154, 46, .12) 58%, transparent);
}

.subj {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--fill-crimson);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  flex: none;
  box-shadow: 0 7px 16px -9px rgba(142, 18, 48, .8), inset 0 0 0 1px rgba(255, 255, 255, .2);
  transition: transform .45s var(--ease-out);
}

.rev:hover .subj {
  transform: rotate(-6deg) scale(1.07)
}

.rev:nth-child(even) .subj {
  background: var(--fill-gilt);
  color: #3A2C08;
  box-shadow: 0 7px 16px -9px rgba(142, 110, 28, .8), inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.rev:nth-child(3n) .subj {
  background: linear-gradient(150deg, var(--green-800), var(--green-900));
  color: var(--gilt-200);
  box-shadow: 0 7px 16px -9px rgba(4, 36, 15, .7), inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.rev-who b {
  display: block;
  font-size: .92rem;
  color: var(--ink-900);
  font-weight: 600
}

.rev-who span {
  font-size: .79rem;
  color: var(--slate-2)
}

.verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex: none;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(18, 161, 80, .1);
  box-shadow: inset 0 0 0 1px rgba(18, 161, 80, .3);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-800);
}

/* The stylesheet globally kills every animation under reduced motion, which
   stopped this ribbon dead. On the owner's instruction it is re-asserted here
   — deliberately, and for this one element only. !important and the class
   selector are both needed to beat the global `*{animation:none!important}`.
   Hover still parks it, so nothing is unreadable while it moves. */
@media (prefers-reduced-motion:reduce) {
  .rev-track {
    animation: revScroll 64s linear infinite !important;
  }

  .rev-marquee:hover .rev-track {
    animation-play-state: paused !important;
  }
}

/* ------------------------------------------------------------
   19. INNER PAGE HEAD
   ------------------------------------------------------------ */
.page-head {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: 82px 0 78px;
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 420px at 8% -12%, rgba(142, 18, 48, .09), transparent 62%),
    radial-gradient(620px 400px at 96% 16%, rgba(192, 154, 46, .2), transparent 62%);
}

.page-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gilt-500), transparent);
}

.page-head>* {
  position: relative;
  z-index: 1
}

.page-head h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  font-weight: 500
}

.page-head .sec-sub {
  margin-left: 0;
  margin-right: 0
}

.crumb {
  font-size: .8rem;
  color: var(--slate-2);
  margin-bottom: 18px;
  letter-spacing: .04em
}

.crumb a {
  color: var(--crimson-700);
  font-weight: 600
}

.crumb a:hover {
  text-decoration: underline
}

.updated {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--gilt-100);
  border: 1px solid rgba(192, 154, 46, .4);
  color: var(--gilt-800);
  font-size: .76rem;
  font-weight: 600;
}

/* ------------------------------------------------------------
   20. LEGAL PAGES
   ------------------------------------------------------------ */
.legal {
  display: grid;
  grid-template-columns: 274px 1fr;
  gap: 60px;
  padding: 72px 0 96px
}

.toc {
  position: sticky;
  top: 104px;
  align-self: start;
  background: #FFFDF8;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}

.toc h4 {
  font-family: var(--display);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--slate-2);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  counter-reset: toc
}

.toc li {
  counter-increment: toc
}

.toc a {
  display: flex;
  gap: 10px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--slate);
  transition: color .2s
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--gilt-600);
  flex: none;
  padding-top: 2px;
}

.toc a:hover {
  color: var(--crimson-700)
}

.prose {
  max-width: 820px
}

.prose h2 {
  font-size: 1.55rem;
  font-weight: 600;
  margin: 52px 0 16px;
  scroll-margin-top: 110px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.prose h2:first-child {
  margin-top: 0
}

.prose h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 28px 0 11px
}

.prose p {
  margin-bottom: 16px;
  font-size: .98rem;
  line-height: 1.85
}

.prose ul {
  margin: 0 0 20px;
  padding-left: 24px;
  display: grid;
  gap: 10px
}

.prose li {
  font-size: .96rem;
  line-height: 1.8
}

.prose li::marker {
  color: var(--gilt-600)
}

.prose a {
  color: var(--crimson-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px
}

.prose strong {
  color: var(--ink-900);
  font-weight: 700
}

.note-box {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--crimson-700);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 22px 24px;
  margin: 24px 0;
}

.note-box p {
  margin-bottom: 0
}

.note-box.purple {
  border-left-color: var(--gilt-500)
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 22px;
  font-size: .9rem
}

.legal-table th,
.legal-table td {
  border: 1px solid var(--line);
  padding: 13px 15px;
  text-align: left;
  vertical-align: top
}

.legal-table th {
  background: var(--paper-3);
  color: var(--ink-900);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch
}

/* The wrapper only earns its keep if the table refuses to squeeze: without a
   floor, three columns compress to one word per line on a phone. */
.table-scroll .legal-table {
  min-width: 520px
}

/* ------------------------------------------------------------
   21. THANK-YOU PAGE
   ------------------------------------------------------------ */
.ty {
  position: relative;
  overflow: hidden;
  padding: 96px 0 108px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.ty::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 460px at 18% -12%, rgba(142, 18, 48, .09), transparent 62%),
    radial-gradient(700px 440px at 84% 112%, rgba(192, 154, 46, .22), transparent 62%);
}

.ty>* {
  position: relative;
  z-index: 1
}

.ty-card {
  position: relative;
  max-width: 790px;
  margin: 0 auto;
  background:
    linear-gradient(90deg, var(--crimson-700), var(--gilt-500) 50%, var(--crimson-700)) top left/100% 4px no-repeat,
    #FFFDF8;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 60px 50px 50px;
  text-align: center;
  box-shadow: var(--shadow-xl);
}

.ty-badge {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(37, 211, 102, .1);
  border: 1px solid rgba(14, 82, 51, .28);
  display: grid;
  place-items: center;
  margin: 0 auto 30px;
  color: var(--green-800);
  animation: popIn .6s var(--ease-out) both;
}

.ty-card h1 {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 500
}

.ty-card>p {
  margin: 18px auto 0;
  max-width: 580px;
  font-size: 1.02rem;
  line-height: 1.8
}

.ty-ref {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--ink-700);
}

.ty-ref b {
  color: var(--gilt-700)
}

.ty-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 42px 0 38px;
  text-align: left
}

.ty-step {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 22px
}

.ty-step .n {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fill-crimson);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 14px;
}

.ty-step:nth-child(2) .n {
  background: var(--fill-gilt);
  color: #3A2C08
}

.ty-step:nth-child(3) .n {
  background: linear-gradient(150deg, var(--green-800), var(--green-900))
}

.ty-step b {
  display: block;
  font-size: .96rem;
  color: var(--ink-900);
  font-weight: 600;
  margin-bottom: 6px
}

.ty-step span {
  font-size: .87rem;
  line-height: 1.7;
  display: block
}

.ty-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center
}

.ty-foot {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
  font-size: .86rem
}

.ty-foot a {
  color: var(--crimson-700);
  font-weight: 600
}

.ty-foot a:hover {
  text-decoration: underline
}

/* ------------------------------------------------------------
   22. FOOTER — deep parchment, gilt rules
   ------------------------------------------------------------ */
.ftr {
  position: relative;
  overflow: hidden;
  --logo-h: 50px;
  background: var(--paper-3);
  color: var(--slate);
  border-top: 1px solid var(--line);
}

.ftr::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(900px 420px at 50% -30%, rgba(192, 154, 46, .2), transparent 62%);
}

.ftr>* {
  position: relative;
  z-index: 1
}

.ftr .logo-txt {
  color: var(--ink-900)
}

.ftr .logo-txt span {
  color: var(--crimson-700)
}

/* The artwork is a JPG on white, so on the parchment footer it sits in its own
   paper chip rather than fighting the background. */
.logo-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 18px;
  align-self: flex-start;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease);
}

.logo-chip:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md)
}

/* Contact strip — the one crimson band in the footer */
.ftr-contactbar {
  background: var(--fill-crimson);
  border-bottom: 1px solid rgba(235, 215, 156, .3);
}

.fc-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0
}

.fc-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 26px;
  border-right: 1px solid rgba(255, 255, 255, .14);
  transition: background .25s;
}

.fc-item:first-child {
  padding-left: 0
}

.fc-item:last-child {
  border-right: 0
}

.fc-item:hover {
  background: rgba(255, 255, 255, .07)
}

.fc-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(235, 215, 156, .4);
  transition: transform .3s var(--ease-out);
}

.fc-ico.wa {
  background: linear-gradient(135deg, #25D366, #12A150);
  color: #04240F;
  border-color: transparent
}

.fc-item:hover .fc-ico {
  transform: translateY(-3px)
}

.fc-txt {
  display: flex;
  flex-direction: column;
  font-size: .92rem;
  color: #fff
}

.fc-txt b {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gilt-300);
  margin-bottom: 4px;
}

/* Guarantee badges */
.ftr-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 38px 0;
  border-bottom: 1px solid var(--line);
}

.fb-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: #FFFDF8;
  border: 1px solid var(--line);
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-800);
  text-align: center;
  transition: background .25s, border-color .25s, transform .35s var(--ease-out), box-shadow .35s;
}

.fb-item svg {
  flex: none;
  color: var(--crimson-700)
}

.fb-item:hover {
  border-color: rgba(192, 154, 46, .55);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Brand + assurance */
.ftr-main {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 60px;
  padding: 48px 0
}

.ftr-disclaimer {
  margin-top: 24px;
  font-size: .87rem;
  line-height: 1.8;
  max-width: 540px
}

.ftr-mbg {
  margin-top: 16px;
  font-size: .84rem;
  color: var(--slate-2)
}

.ftr-mbg a {
  color: var(--crimson-700);
  font-weight: 600
}

.ftr-mbg a:hover {
  text-decoration: underline
}

.ftr-assure {
  display: grid;
  gap: 15px;
  align-content: start
}

.assure-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  background: #FFFDF8;
  border: 1px solid var(--line);
}

.assure-card b {
  display: block;
  font-size: .9rem;
  color: var(--ink-900);
  font-weight: 700
}

.assure-card span {
  font-size: .8rem;
  color: var(--slate-2)
}

.assure-card.rating {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px
}

.assure-card.rating .stars {
  color: var(--gilt-500);
  font-size: 1.05rem;
  letter-spacing: 4px
}

.assure-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(37, 211, 102, .14);
  color: var(--green-800);
}

.pay-block {
  padding-top: 8px
}

.pay-label {
  display: block;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--slate-2);
  margin-bottom: 14px;
}

.pay-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.pay-chip {
  padding: 9px 15px;
  border-radius: 8px;
  background: #FFFDF8;
  color: var(--ink-900);
  border: 1px solid var(--line);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
}

/* Quick links */
.ftr-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.ftr-links a {
  font-size: .87rem;
  transition: color .2s
}

.ftr-links a:hover {
  color: var(--crimson-700)
}

/* Bottom bar */
.ftr-bot {
  border-top: 1px solid var(--line);
  padding: 24px 0 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  font-size: .81rem;
  color: var(--slate-2);
}

.ftr-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 26px
}

.ftr-legal a:hover {
  color: var(--crimson-700);
  text-decoration: underline
}

/* ------------------------------------------------------------
   22b. ENTRY POPUP
   ------------------------------------------------------------ */
.pop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px
}

.pop[hidden] {
  display: none
}

.pop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 34, 10, .5);
  backdrop-filter: blur(6px);
  animation: popFade .35s var(--ease);
}

@keyframes popFade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.pop-box {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  width: 100%;
  max-width: 920px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #FFFDF8;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  animation: popIn .5s var(--ease-out);
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(26px) scale(.97)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.pop-x {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  background: rgba(255, 255, 255, .94);
  color: var(--ink-900);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition: background .25s, transform .3s var(--ease-out);
}

.pop-x:hover {
  background: #fff;
  transform: rotate(90deg)
}

.pop-side {
  position: relative;
  overflow: hidden;
  background: var(--fill-crimson);
  color: rgba(255, 255, 255, .8);
  padding: 44px 38px;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
}

.pop-side::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(500px 320px at 10% 0%, rgba(255, 255, 255, .14), transparent 62%),
    radial-gradient(420px 300px at 90% 100%, rgba(192, 154, 46, .34), transparent 62%);
}

.pop-side>* {
  position: relative;
  z-index: 1
}

.pop-flag {
  display: inline-block;
  padding: 7px 17px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(235, 215, 156, .45);
  color: var(--gilt-200);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.pop-side h3 {
  color: #fff;
  font-size: 1.72rem;
  font-weight: 500;
  margin-bottom: 14px
}

.pop-side>p {
  font-size: .93rem;
  line-height: 1.75
}

.pop-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 13px
}

.pop-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .88rem;
  color: rgba(255, 255, 255, .92)
}

.pop-list svg {
  flex: none;
  margin-top: 3px;
  color: var(--gilt-300)
}

.pop-trust {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .8rem;
}

.pop-trust .stars {
  color: var(--gilt-300);
  font-size: .95rem;
  letter-spacing: 4px
}

.pop-form {
  padding: 44px 38px
}

.pop-form .field {
  margin-bottom: 16px
}

.pop-dismiss {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: .8rem;
  color: var(--slate-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pop-dismiss:hover {
  color: var(--crimson-700)
}

body.pop-open {
  overflow: hidden
}

/* Floating WhatsApp */
.float-wa {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 80;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #12A150);
  display: grid;
  place-items: center;
  color: #04240F;
  box-shadow: 0 16px 34px -10px rgba(18, 161, 80, .75);
  transition: transform .3s var(--ease-out);
}

.float-wa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--green-500);
  animation: ring 2.8s ease-out infinite;
}

@keyframes ring {
  0% {
    transform: scale(1);
    opacity: .7
  }

  100% {
    transform: scale(1.7);
    opacity: 0
  }
}

.float-wa:hover {
  transform: scale(1.1)
}

/* Back to top — injected by main.js */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(253, 251, 246, .94);
  color: var(--crimson-700);
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  box-shadow: var(--shadow-md);
  transition: opacity .35s var(--ease), transform .35s var(--ease-out),
    visibility .35s, background .25s, border-color .25s, color .25s;
}

.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none
}

.to-top:hover {
  background: var(--fill-crimson);
  color: #fff;
  border-color: transparent;
  transform: translateY(-3px)
}

/* ------------------------------------------------------------
   23. ANIMATION UTILITIES
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(8px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}

.reveal.in {
  opacity: 1;
  transform: none;
  filter: blur(0)
}

.reveal-l {
  opacity: 0;
  transform: translateX(-34px);
  filter: blur(8px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}

.reveal-r {
  opacity: 0;
  transform: translateX(34px);
  filter: blur(8px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}

.reveal-l.in,
.reveal-r.in {
  opacity: 1;
  transform: none;
  filter: blur(0)
}

/* Hero entrance sequence */
.anim-up {
  opacity: 0;
  transform: translateY(28px);
  animation: heroUp .95s var(--ease-out) forwards
}

.anim-up.d1 {
  animation-delay: .05s
}

.anim-up.d2 {
  animation-delay: .18s
}

.anim-up.d3 {
  animation-delay: .34s
}

.anim-up.d4 {
  animation-delay: .5s
}

.anim-up.d5 {
  animation-delay: .66s
}

@keyframes heroUp {
  to {
    opacity: 1;
    transform: none
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }

  .reveal,
  .reveal-l,
  .reveal-r,
  .anim-up,
  .hero h1 .w {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .fx-grain {
    display: none
  }
}

/* ------------------------------------------------------------
   23A. GOOGLE REVIEWS TRUST BAND
   A slim rating strip between the packages and the results: the
   mark on the left, the claim in the middle, the order on the right.
   ------------------------------------------------------------ */
.gr-sec {
  padding: 0 0 40px
}

.gr-band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 44px;
  padding: 24px 40px;
  border-radius: var(--r-xl);
  background: var(--fill-paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.gr-score {
  text-align: center
}

/* The artwork carries deep transparent margins top and bottom. Clipping them
   away — and pulling the same amount back with negative margin — lets the
   logo sit on the band's own rhythm instead of a tall empty box. */
.gr-logo {
  width: 196px;
  height: auto;
  margin: -56px auto;
  clip-path: inset(28% 0 28% 0);
}

.gr-meta {
  margin-top: 6px;
  font-size: .8rem;
  color: var(--slate-2);
  white-space: nowrap;
}

.gr-meta b {
  color: var(--ink-900);
  font-weight: 700
}

.gr-meta span {
  color: var(--slate)
}

/* Two lines: the claim, then the guarantee that stands behind it. */
.gr-claim {
  position: relative;
  padding-left: 44px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-900);
  letter-spacing: -.01em;
}

.gr-claim::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 62%;
  background: linear-gradient(180deg, transparent, var(--gilt-400), transparent);
}

.gr-claim span {
  display: block;
  font-weight: 500;
  color: var(--slate);
}



@media (max-width:980px) {
  .gr-band {
    grid-template-columns: auto 1fr;
    gap: 20px 34px;
  }


}

@media (max-width:680px) {
  .gr-band {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 18px 24px 26px;
    gap: 16px;
  }

  .gr-claim {
    padding-left: 0
  }

  /* The gilt rule turns horizontal once the band stacks. */
  .gr-claim::before {
    left: 50%;
    top: -14px;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gilt-400), transparent);
  }


}

/* ------------------------------------------------------------
   23B. CLOSING CTA — PROOFREADING / EDITING / TRANSLATION
   The last word before the footer: one large ask, set beside the
   open book. Kept on plain paper so the crimson call carries it.
   ------------------------------------------------------------ */
/* `isolation` makes this section the blend root, so the book's multiply below
   sees the paper and the wash — and nothing further up the page. */
.need-sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper-2);
  border-block: 1px solid var(--line);
}

/* A single warm pool behind the artwork, and the gilt seam on top. */
.need-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(820px circle at 78% 40%, rgba(192, 154, 46, .18), transparent 62%);
}

.need-sec::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 74%);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gilt-500), transparent);
}

.need-grid {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  align-items: center;
  gap: 60px;
}

/* --- Left column: the ask --- */
.need-rated {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  color: var(--slate);
}

.need-rated b {
  color: var(--ink-900);
  font-weight: 700
}

.need-stars {
  color: var(--gilt-500);
  letter-spacing: .12em;
  font-size: .92rem;
}

.need-title {
  margin-top: 18px;
  font-size: clamp(2.1rem, 3.6vw, 3.15rem);
  line-height: 1.08;
}

.need-lead {
  margin-top: 20px;
  max-width: 460px;
  font-size: 1.08rem;
  color: var(--slate-2);
}

.need-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Three plain assurances, divided by gilt hairlines. */
.need-ticks {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-2);
}

.need-ticks li {
  display: flex;
  align-items: center;
  gap: 22px;
}

.need-ticks li+li::before {
  content: "";
  width: 1px;
  height: 12px;
  background: var(--gilt-400);
  opacity: .7;
}

/* --- Right column: the book, plus its credential --- */
.need-art {
  margin: 0;
  position: relative;
}

/* The photograph is a JPEG-style cut-out on white. Multiplying it into the
   paper drops that white away without needing a transparent PNG. */
.need-book {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;

}

.need-seal {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  text-align: right;
}

/* Gilt blob — the award mark, drawn rather than shipped as an image. */
.seal-mark {
  flex: none;
  width: 112px;
  height: 112px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  padding: 6px;
  text-align: center;
  color: #3A2C08;
  background: var(--fill-gilt);
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  box-shadow: var(--shadow-gilt), inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.seal-mark b {
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .04em;
}

.seal-mark i {
  font-style: normal;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--gilt-900);
}

.seal-cap {
  display: block;
  max-width: 250px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--slate-2);
}

.seal-cap b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -.01em;
}

@media (max-width:980px) {
  .need-grid {
    grid-template-columns: 1fr;
    gap: 44px;
    text-align: center;
  }

  .need-lead {
    margin-inline: auto
  }

  .need-actions,
  .need-ticks {
    justify-content: center
  }

  .need-seal {
    justify-content: center;
    text-align: left;
  }
}

@media (max-width:680px) {
  .need-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .seal-mark {
    width: 92px;
    height: 92px
  }

  .seal-cap {
    max-width: 210px
  }
}

/* ------------------------------------------------------------
   24. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:1080px) {
  .sec {
    padding: 88px 0
  }

  .hero {
    padding: 76px 0 92px
  }

  /* The grid stacks here, so the text runs the full width — the scrim has to
     cover evenly rather than fading out to the right. */
  .hero::before {
    background:
      linear-gradient(180deg,
        rgb(255 251 246 / 96%) 0%,
        rgb(255 251 246 / 94%) 58%,
        rgb(255 250 244 / 84%) 100%),
      linear-gradient(250deg, rgb(161 13 45 / 50%), rgb(255 144 144 / 24%), rgb(255 255 255 / 88%)),
      url(../img/hero.png) center / cover no-repeat;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 52px
  }

  .hero-lead {
    max-width: none
  }

  .form-card {
    max-width: 620px
  }

  .panel-green {
    padding: 38px 40px
  }

  .guarantee {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .g-points {
    grid-template-columns: repeat(2, 1fr)
  }

  /* Four stat cards across a tablet left each numeral in a 150px column. */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .svc-grid,
  .price-grid {
    grid-template-columns: 1fr 1fr
  }

  .price.hot {
    grid-column: span 2;
    max-width: 540px;
    margin-inline: auto;
    width: 100%
  }

  .steps {
    grid-template-columns: 1fr 1fr;
    gap: 34px
  }

  .step:not(:last-child)::after {
    display: none
  }

  .cmp-intro {
    grid-template-columns: 1fr;
    gap: 38px
  }

  .cmp-art {
    max-width: 480px;
    margin-inline: auto
  }

  .cmp-art img {
    margin-inline: auto
  }

  .cmp-awards {
    justify-content: center
  }

  .ba-grid {
    grid-template-columns: 1fr;
    gap: 22px
  }

  /* Stacked: the seal drops back into flow above the copy. */
  .pub-band {
    padding: 40px 34px
  }

  .pub-seal {
    position: static;
    transform: none;
    width: 118px;
    margin: 0 auto 26px
  }

  .pub-body h3::after {
    margin-inline: auto;
    background: linear-gradient(90deg, transparent, var(--gilt-400), transparent)
  }

  .banner {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 44px 40px
  }

  .banner .btn {
    width: 100%
  }

  .fc-row {
    grid-template-columns: 1fr
  }

  .fc-item {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    padding-left: 0
  }

  .fc-item:last-child {
    border-bottom: 0
  }

  .ftr-badges {
    grid-template-columns: 1fr 1fr
  }

  .ftr-main {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 0
  }

  .ftr-disclaimer {
    max-width: none
  }

  .pop-box {
    grid-template-columns: 1fr;
    max-width: 540px
  }

  .pop-side {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 32px 30px
  }

  .pop-list,
  .pop-trust {
    display: none
  }

  .legal {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 56px 0 78px
  }

  .toc {
    position: static
  }

  .toc ol {
    grid-template-columns: 1fr 1fr;
    display: grid
  }
}

@media (max-width:980px) {
  .hdr {
    --logo-h: 46px
  }

  .hdr.stuck {
    --logo-h: 40px
  }

  .nav {
    gap: 22px
  }

  .nav a {
    font-size: .84rem
  }

  .hdr-phone {
    display: none
  }

  /* Still two columns here, but they need less air between them. */
  .cmp-grid {
    gap: 28px
  }

  .cmp-head h3 {
    font-size: 1.44rem
  }

  /* Narrower slabs so more than one entry stays on screen. */
  .rev {
    width: 344px;
    padding: 32px 26px 30px;
  }

  .rev q {
    font-size: 1.08rem
  }
}

@media (max-width:820px) {

  .nav,
  .hdr-phone {
    display: none
  }

  .burger {
    display: block
  }

  .nav.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background: rgba(253, 251, 246, .99);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    padding: 16px 28px 24px;
    box-shadow: var(--shadow-lg);
    animation: fadeIn .3s var(--ease);
  }

  .hdr.stuck .nav.open {
    top: 72px
  }

  .nav.open a {
    padding: 13px 0;
    width: 100%;
    border-bottom: 1px solid var(--line-2)
  }

  .nav.open a::after {
    display: none
  }
}

@media (max-width:680px) {
  .hdr {
    --logo-h: 38px
  }

  .hdr.stuck {
    --logo-h: 34px
  }

  .hdr-in {
    height: 70px;
    gap: 12px
  }

  .hdr.stuck .hdr-in {
    height: 64px
  }

  .nav.open {
    top: 70px
  }

  .hdr.stuck .nav.open {
    top: 64px
  }

  .hdr .btn {
    padding: 11px 16px;
    font-size: .64rem;
    letter-spacing: .1em
  }

  .wrap {
    padding-inline: 20px
  }

  .sec {
    padding: 68px 0
  }

  .sec-tight {
    padding: 52px 0
  }

  .hero {
    padding: 56px 0 74px
  }

  .hero-ticks {
    padding-left: 18px
  }

  .hero-actions {
    flex-direction: column
  }

  .btn-wa,
  .btn-intro {
    width: 100%
  }

  .form-card {
    padding: 34px 24px 28px
  }

  .f-row {
    grid-template-columns: 1fr;
    gap: 0
  }

  .panel-green {
    padding: 30px 24px;
    margin-top: 24px
  }

  .pg-top .pg-reply {
    margin-left: 0;
    width: 100%
  }

  .pg-stats {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center
  }

  .guarantee {
    padding: 28px 24px
  }

  .g-points,
  .stat-grid,
  .svc-grid,
  .price-grid,
  .steps {
    grid-template-columns: 1fr
  }

  /* One slab at a time, with the edge fade pulled in so the entry that is
     centred stays fully legible. */
  .rev {
    width: 80vw;
    max-width: 340px;
    padding: 30px 22px 26px;
  }

  .rev-marquee {
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }

  /* The two columns stack whole — each keeps its own kicker and headline,
     so the rows stay labelled without needing per-row tags. */
  .cmp-grid {
    grid-template-columns: 1fr;
    gap: 44px
  }

  .cmp-btn {
    flex-direction: column;
    gap: 14px;
    margin-top: 48px
  }

  .cmp-btn .btn {
    width: 100%;
    justify-content: center
  }

  .cmp-head h3 {
    font-size: 1.5rem
  }

  .price.hot {
    grid-column: auto;
    max-width: none
  }

  .banner {
    padding: 32px 26px;
    text-align: center;
    margin: 40px auto
  }

  .banner-btns {
    width: 100%
  }

  /* Two 150px fades met in the middle of a phone and swallowed the ribbon. */
  .marquee::before,
  .marquee::after {
    width: 56px
  }

  .t-body {
    padding: 28px 22px
  }

  /* The filename is one unbreakable mono token — let it break rather than
     push the terminal bar past the screen. */
  .t-file {
    min-width: 0;
    font-size: .68rem;
    overflow-wrap: anywhere;
  }

  .t-text {
    font-size: 1.02rem;
    line-height: 1.95
  }

  .t-tabs {
    width: 100%;
    margin-left: 0
  }

  .t-bar {
    flex-wrap: wrap;
    gap: 10px
  }

  .ba {
    padding: 30px 24px
  }

  .ba-foot {
    flex-direction: column;
    text-align: center;
    gap: 14px
  }

  /* btn-lg carries 42px of side padding and never wraps — on a narrow phone
     that one line was wider than the column holding it. */
  .ba-cta .btn,
  .need-actions .btn {
    width: 100%;
    justify-content: center
  }

  .btn-lg {
    padding: 19px 22px;
    font-size: .76rem
  }

  .cta {
    padding: 58px 26px
  }

  .cta-btns .btn {
    width: 100%
  }

  .pub-band {
    padding: 34px 22px;
    border-radius: var(--r-lg)
  }

  /* Stacked and full-width, so there is no left edge to hang the buttons off
     any more — the seal is centred above the copy and the band reads as one
     centred column again. */
  .pub-body {
    align-items: center;
    width: 100%
  }

  .pub-body h3 {
    text-align: center
  }

  .pub-btns {
    flex-direction: column;
    width: 100%
  }

  /* The band's two calls are .gold-btn/.wa-btn, not .btn — the old selector
     here matched nothing, so the stacked buttons were left at content width. */
  .pub-btns .btn,
  .pub-btns .gold-btn,
  .pub-btns .wa-btn {
    width: 100%;
    justify-content: center
  }

  .toc ol {
    grid-template-columns: 1fr
  }

  .prose h2 {
    font-size: 1.3rem
  }

  .page-head {
    padding: 58px 0 54px
  }

  .ty {
    padding: 64px 0 76px
  }

  .ty-card {
    padding: 42px 26px 34px
  }

  .ty-steps {
    grid-template-columns: 1fr
  }

  .ty-btns .btn {
    width: 100%
  }

  .ftr-badges {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 0
  }

  .fb-item {
    justify-content: flex-start
  }

  .ftr-links {
    gap: 10px 20px
  }

  .ftr-bot {
    justify-content: center;
    text-align: center
  }

  .pop {
    padding: 14px
  }

  .pop-side {
    padding: 28px 24px
  }

  .pop-side h3 {
    font-size: 1.4rem
  }

  .pop-form {
    padding: 28px 24px
  }

  .float-wa {
    width: 52px;
    height: 52px;
    left: 18px;
    bottom: 18px
  }

  .to-top {
    width: 44px;
    height: 44px;
    right: 18px;
    bottom: 18px
  }
}

/* Very narrow phones: keep the logo and CTA on one line. */
@media (max-width:420px) {
  .hdr {
    --logo-h: 32px
  }

  .wrap {
    padding-inline: 16px
  }

  .hdr .btn {
    padding: 10px 12px;
    font-size: .6rem;
    letter-spacing: .08em
  }

  /* Down at 320px the mark, the sample button and the burger are fighting for
     the same row — surrender the gaps first, then the mark. */
  .hdr-in {
    gap: 10px
  }

  .hdr-cta {
    gap: 8px
  }

  .logo-img {
    width: min(206px, 38vw)
  }

  /* At 320px a nowrap label is wider than the screen; let labels take two
     lines rather than run off the edge. */
  .btn {
    white-space: normal
  }

  .need-title,
  .gr-claim {
    hyphens: auto
  }

  .gr-meta {
    white-space: normal
  }

  .seal-cap {
    max-width: 180px;
    font-size: .74rem
  }
}

/* ============================================================
   19. BUTTON SYSTEM - three classes, used site-wide
   ============================================================ */

.wa-btn,
.red-btn,
.gold-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 16px 30px;
  margin: 0;
  border: 0;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transform: translateY(0);
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    box-shadow .42s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}


.wa-btn svg,
.red-btn svg,
.gold-btn svg {
  flex: none;
  transform: none;
  transition: none;
}

.wa-btn,
.red-btn,
.gold-btn {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.wa-btn:hover,
.red-btn:hover,
.gold-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.wa-btn:active,
.red-btn:active,
.gold-btn:active {
  transform: translateY(0);
}

.wa-btn {
  color: #04240F;
  background: linear-gradient(135deg, #25D366 0%, #1BBF5C 55%, #12A150 100%);
  box-shadow: 0 18px 38px -18px rgba(18, 161, 80, .70);
}

.wa-btn:hover,
.wa-btn:focus-visible {
  box-shadow: 0 28px 52px -18px rgba(18, 161, 80, .80);
}

.wa-btn::before {
  background: radial-gradient(125% 105% at 50% 115%,
      rgba(255, 255, 255, .58) 0%,
      rgba(255, 255, 255, .26) 40%,
      rgba(255, 255, 255, 0) 74%);
}


.red-btn {
  color: #fff;
  background: linear-gradient(135deg, #8E1230 0%, #AF1739 55%, #6E0D20 100%);
  box-shadow: 0 18px 38px -18px rgba(142, 18, 48, .70);
}

.red-btn:hover,
.red-btn:focus-visible {
  box-shadow: 0 28px 52px -18px rgba(142, 18, 48, .80);
}

.red-btn::before {
  background: radial-gradient(125% 105% at 50% 115%,
      rgba(255, 235, 240, .58) 0%,
      rgba(255, 215, 225, .24) 40%,
      rgba(255, 255, 255, 0) 74%);
}

.gold-btn {
  color: #1b1402;
  background: linear-gradient(135deg, #b18a27 0%, #EBD79C 45%, #c29b30 100%);
  box-shadow: 0 18px 38px -18px rgba(180, 140, 39, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, .5);
}

.gold-btn:hover,
.gold-btn:focus-visible {
  box-shadow: 0 28px 52px -18px rgba(169, 131, 37, .70),
    inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* Gold is already a pale surface, so a plain white glow barely
   registers on it - this one is pushed brighter and warmer to
   land with the same strength as the other two. */
.gold-btn::before {
  background: radial-gradient(125% 105% at 50% 115%,
      rgba(255, 252, 236, .95) 0%,
      rgba(255, 246, 214, .48) 40%,
      rgba(255, 255, 255, 0) 74%);
}


/* alligment */
#redBtn2,
#redBtn4,
#redBtn5,
#redBtn10,
#goldBtn2 {
  width: 100%;
}

#redBtn3,
#redBtn7,
#redBtn8 {
  padding: 21px 42px;
  font-size: .83rem;
}

#redBtn9 {
  padding: 13px 24px;
  font-size: .7rem;
  letter-spacing: .16em;
}

#waBtn1 {
  padding: 16px 28px;
  font-size: .87rem;
  letter-spacing: .02em;
  text-transform: none;
}

#redBtn1 {
  padding: 16px 28px;
  font-size: .87rem;
  letter-spacing: .02em;
  text-transform: none;
  font-weight: 600;
  border: 1px solid #ad9e9e;
  background: none;
  color: #514c4c;
}

#redBtn1:hover {
  background: #171e2e;
  color: var(--paper);
}


/* Publish band pair. */
#waBtn2 {
  padding: 16px 28px;
  font-size: .72rem;
  letter-spacing: .15em;
  height: 57px;
  width: 250px;

}



#goldBtn1 {
  font-size: .72rem;
  letter-spacing: .15em;
}

/* ---- responsive holds ---- */
@media (max-width:1024px) {
  #redBtn9 {
    padding: 11px 16px;
    font-size: .64rem;
    letter-spacing: .1em;
  }
}

@media (max-width:680px) {

  #waBtn1,
  #redBtn1,
  #waBtn2,
  #redBtn3,
  #waBtn3,
  #goldBtn1,
  #waBtn4,
  #redBtn7,
  #redBtn8,
  #waBtn5,
  #redBtn11 {
    width: 100%;
  }

  #redBtn3,
  #redBtn7,
  #redBtn8 {
    padding: 19px 22px;
    font-size: .76rem;
  }
}

@media (max-width:420px) {
  #redBtn9 {
    padding: 10px 12px;
    font-size: .6rem;
    letter-spacing: .08em;
  }

  .wa-btn,
  .red-btn,
  .gold-btn {
    white-space: normal;
  }
}


/* ------------------------------------------------------------
   30. SMOOTH HOVER LAYER
   Every hover on the site used to land in ~.2-.4s, which reads as a
   snap rather than a move. This section is the single place where
   hover timing lives: it restates the *transition* on each
   interactive family (never the look) with longer durations and a
   softer curve, and it fills in the elements that had no transition
   at all and so changed instantly.

   It sits last on purpose — same specificity as the original rules,
   so it wins on source order and the rules above stay readable as
   the description of how a thing looks.
   ------------------------------------------------------------ */
:root {
  /* Colour, opacity, small icon nudges — the quiet stuff. */
  --hov-fast: .34s;
  /* The default: lifts, shadows, borders, backgrounds. */
  --hov: .5s;
  /* Long travel: sheens, underline sweeps, marquee-scale moves. */
  --hov-slow: .72s;

  /* Silky decelerate — starts immediately, coasts to a stop. */
  --ease-hover: cubic-bezier(.22, 1, .36, 1);
  /* A touch of overshoot, for icons that rotate or pop. */
  --ease-back: cubic-bezier(.34, 1.42, .64, 1);
}

/* ---- 30.1 Buttons -------------------------------------------------- */
.btn {
  transition:
    transform var(--hov) var(--ease-hover),
    box-shadow var(--hov) var(--ease-hover),
    background var(--hov) var(--ease-hover),
    background-color var(--hov) var(--ease-hover),
    color var(--hov-fast) var(--ease-hover),
    border-color var(--hov) var(--ease-hover),
    filter var(--hov) var(--ease-hover);
}

.btn::after {
  transition: left var(--hov-slow) var(--ease-hover);
}

.btn svg {
  transition: transform var(--hov) var(--ease-back);
}

/* .btn-royal replaced the shared transition with a shorter, narrower
   one, so its shadow jumped while the lift glided. Restored to the
   full set — the entry animation below it is untouched. */
.btn-royal {
  transition:
    transform var(--hov) var(--ease-hover),
    box-shadow var(--hov) var(--ease-hover),
    background var(--hov) var(--ease-hover),
    background-color var(--hov) var(--ease-hover);
}

/* The standalone button system (wa/red/gold) declares its timing twice;
   this collapses both to the shared curve. */
.wa-btn,
.red-btn,
.gold-btn,
#redBtn1 {
  transition:
    transform var(--hov) var(--ease-hover),
    box-shadow var(--hov) var(--ease-hover),
    background var(--hov) var(--ease-hover),
    background-color var(--hov) var(--ease-hover),
    color var(--hov-fast) var(--ease-hover),
    border-color var(--hov) var(--ease-hover);
}

/* Press should read as quicker than release — that is what makes a
   button feel physical rather than syrupy. */
.btn:active,
.wa-btn:active,
.red-btn:active,
.gold-btn:active {
  transition-duration: .13s;
}

/* ---- 30.2 Header --------------------------------------------------- */
/* The logo also shrinks with the header on scroll, so width/max-height
   have to stay in the list — only the hover scale is retimed. */
.logo-img {
  transition:
    width .4s var(--ease),
    max-height .4s var(--ease),
    transform var(--hov) var(--ease-back);
}

.logo-mark {
  transition: transform var(--hov) var(--ease-back);
}

.nav a {
  transition: color var(--hov-fast) var(--ease-hover);
}

.nav a::after {
  transition: width var(--hov) var(--ease-hover);
}

.burger span {
  transition: transform var(--hov) var(--ease-hover),
    opacity var(--hov-fast) var(--ease-hover);
}

/* ---- 30.3 Cards and panels ----------------------------------------- */
.stat-card,
.cmp-item,
.svc,
.price,
.rev,
.rev-score,
.logo-chip,
.fb-item,
.t-tab,
.pop-x,
.float-wa {
  transition:
    transform var(--hov) var(--ease-hover),
    box-shadow var(--hov) var(--ease-hover),
    border-color var(--hov) var(--ease-hover),
    background var(--hov) var(--ease-hover),
    background-color var(--hov) var(--ease-hover),
    color var(--hov-fast) var(--ease-hover);
}

/* .to-top also fades itself in on scroll; keep opacity/visibility in
   the list or it would pop into view. */
.to-top {
  transition:
    opacity var(--hov) var(--ease-hover),
    visibility var(--hov),
    transform var(--hov) var(--ease-hover),
    box-shadow var(--hov) var(--ease-hover),
    border-color var(--hov) var(--ease-hover),
    background var(--hov) var(--ease-hover),
    color var(--hov-fast) var(--ease-hover);
}

/* Accent rules and glows that wipe in behind a card. */
.stat-card::before,
.stat-card::after,
.svc::before,
.svc::after,
.price::after,
.rev::before,
.rev::after,
.cmp-item::before {
  transition:
    transform var(--hov-slow) var(--ease-hover),
    opacity var(--hov) var(--ease-hover);
}

/* Icons and numerals inside those cards — a hair of overshoot. */
.cmp-ico,
.svc-ico,
.svc-no,
.g-pt svg,
.rev .subj,
.fc-ico,
.step .num {
  transition:
    transform var(--hov) var(--ease-back),
    background var(--hov) var(--ease-hover),
    background-color var(--hov) var(--ease-hover),
    color var(--hov-fast) var(--ease-hover),
    border-color var(--hov) var(--ease-hover),
    box-shadow var(--hov) var(--ease-hover);
}

.svc-link {
  transition:
    gap var(--hov) var(--ease-hover),
    color var(--hov-fast) var(--ease-hover),
    background var(--hov) var(--ease-hover);
}

/* ---- 30.4 Footer --------------------------------------------------- */
.fc-item {
  transition: background var(--hov) var(--ease-hover);
}

.ftr-links a,
.ftr-legal a,
.toc a,
.crumb a,
.ty-foot a,
.ftr-mbg a,
.pop-dismiss {
  transition: color var(--hov-fast) var(--ease-hover),
    background-size var(--hov) var(--ease-hover);
}

/* Underlines were drawn with text-decoration, which cannot animate —
   the line simply appeared. Same look, painted as a background so it
   can sweep in from the left. */
.crumb a,
.ty-foot a,
.ftr-mbg a,
.ftr-legal a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  padding-bottom: 2px;
}

.crumb a:hover,
.ty-foot a:hover,
.ftr-mbg a:hover,
.ftr-legal a:hover {
  text-decoration: none;
  background-size: 100% 1px;
}

/* ---- 30.5 Form fields ---------------------------------------------- */
.field input,
.field select,
.field textarea {
  transition:
    border-color var(--hov) var(--ease-hover),
    box-shadow var(--hov) var(--ease-hover),
    background var(--hov) var(--ease-hover);
}

/* ---- 30.6 Scroll-reveal keeps priority ------------------------------ */
/* main.js hangs .reveal on the cards above while they scroll into view,
   and that class carries its own, wider transition (opacity and filter
   as well). Because this section sits after section 23, the card rules
   would otherwise outrank it on source order and the entrance would
   snap on with no fade. Restated here so it wins again; main.js strips
   the helper class a second later and hover timing takes over. */
.reveal,
.reveal-l,
.reveal-r {
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out),
    filter .9s var(--ease-out);
}

/* ---- 30.7 Compositing ---------------------------------------------- */
/* Hover-capable pointers only: promoting these to their own layer keeps
   the lift from shimmering mid-transition, and there is no reason to
   pay for it on a touch device that never hovers. */
@media (hover:hover) and (pointer:fine) {

  .btn,
  .wa-btn,
  .red-btn,
  .gold-btn,
  .stat-card,
  .cmp-item,
  .svc,
  .price,
  .rev,
  .rev-score,
  .logo-chip,
  .fb-item {
    backface-visibility: hidden;
  }

  .btn:hover,
  .wa-btn:hover,
  .red-btn:hover,
  .gold-btn:hover,
  .stat-card:hover,
  .cmp-item:hover,
  .svc:hover,
  .price:hover,
  .rev:hover,
  .rev-score:hover,
  .logo-chip:hover,
  .fb-item:hover {
    will-change: transform, box-shadow;
  }
}



/*this is ture focus*/

/* =========================================
   TEXT TYPE
========================================= */

#text-type {
    display: inline;
    white-space: pre-wrap;
}

.text-type__cursor {
    display: inline-block;
    margin-left: 0.25rem;
    opacity: 1;
    font-weight: inherit;
}

/* Cursor blinking */

.text-type__cursor.blink {
    animation: textTypeBlink 0.7s infinite;
}

@keyframes textTypeBlink {
    0%,
    45% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

/* =========================================================================
   31. SHAPE SYSTEM
   -------------------------------------------------------------------------
   Three corner treatments, and nothing in between:

     Buttons          → 0     dead square
     Large sections   → 0     dead square
     Small cards      → 4px   just enough to soften
     Inputs / chips   → 2px

   Most of this comes from the --r-* tokens up in :root. This section only
   handles the cases the tokens cannot reach on their own: buttons that share
   a token with cards, large panels that share one with small cards, and a
   handful of hardcoded radii.

   Genuinely circular UI is left alone on purpose — the floating WhatsApp
   bubble, the popup close button, step numerals, avatars and status dots.
   ========================================================================= */

/* ---- 31.1 Buttons: square ---------------------------------------------- */
.btn,
.btn-wa,
.btn-intro,
.wa-btn,
.red-btn,
.gold-btn,
.banner .btn,
.t-tab {
  border-radius: 0;
}

/* ---- 31.2 Large sections: square --------------------------------------- */
/* These sit on --r-lg alongside the small cards, so they need saying twice.
   Everything on --r-xl is already square from the token. */
.guarantee,
.terminal,
.pub-band {
  border-radius: 0;
}

/* ---- 31.3 Small cards and tiles: 4px ----------------------------------- */
/* .cmp-item rides --r-sm, which is the 2px input radius — it is a card, so
   it is lifted back to the card corner here. The rest are hardcoded radii
   left over from the old rounded scale. */
.cmp-item,
.logo-mark,
.cmp-ico,
.subj,
.fc-ico,
.assure-ico,
.pay-chip {
  border-radius: 4px;
}

/* =========================================================================
   32. MOBILE — the minimalist pass
   -------------------------------------------------------------------------
   The desktop page is a showcase; the phone page is a lead form with just
   enough proof around it. Three things happen below 680px:

     1. Ornament is removed, not shrunk — blobs, the trust ribbon, award
        art, the book figure, window chrome. None of it survives the trip
        down to 375px, and all of it costs scroll.
     2. Supporting copy is cut. Every headline keeps its meaning without the
        sentence underneath it, so section subtitles and the long comparison
        descriptions come out. The hero swaps to a shorter line instead.
     3. What is left gets thumb-sized: 16px inputs (anything smaller makes
        Safari zoom the page on focus), 50px tap targets, full-width buttons.

   This section sits last on purpose. It restates a few rules already set in
   the 680px block above so it wins on source order rather than by piling on
   specificity.
   ========================================================================= */

/* ---- 32.1 Viewport utilities ------------------------------------------- */
/* .d-only / .m-only swap a long line of copy for a short one.
   .m-hide drops an element on phones only — never put it on a form field:
   a hidden <select> still posts its default value, which would label every
   mobile lead with whatever option happened to be first. */
.m-only {
  display: none;
}

@media (max-width:680px) {

  .d-only,
  .m-hide {
    display: none !important;
  }

  .m-only {
    display: inline;
  }
}

/* ---- 32.2 Phone layout ------------------------------------------------- */
@media (max-width:680px) {

  /* Nothing is allowed to push the page sideways. */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  img,
  svg,
  video,
  iframe {
    max-width: 100%;
  }

  /* --- Rhythm: sections get shorter, not just narrower --- */
  .sec {
    padding: 52px 0
  }

  .sec-tight {
    padding: 38px 0
  }

  .hero {
    padding: 40px 0 54px
  }

  /* --- Type scale: vw-driven so nothing overflows at 320px --- */
  h1 {
    font-size: clamp(1.85rem, 8.2vw, 2.4rem);
    line-height: 1.14;
    letter-spacing: -.02em;
  }

  h2 {
    font-size: clamp(1.45rem, 6.2vw, 1.9rem);
    line-height: 1.18;
  }

  h3 {
    font-size: 1.14rem
  }

  .hero-lead {
    font-size: 1rem;
    line-height: 1.6
  }

  .eyebrow {
    font-size: .64rem;
    letter-spacing: .14em;
    margin-bottom: 10px;
  }

  /* --- Ornament: gone, not shrunk ---------------------------------------
     Award art, the money-back seal and the book figure are all large
     decorative images at the bottom of a long scroll. The terminal's traffic
     lights and filename are window dressing around the diff that matters. */
  .hero-blob,
  .marquee,
  .cmp-art,
  .cmp-art.awards,
  .pub-seal,
  .need-art,
  .t-dots,
  .t-file,
  .to-top,
  .rev::before,
  .stat-card .s,
  .g-left p,
  .ftr-links {
    display: none !important;
  }

  /* Supporting sentences under a headline. Scoped to the homepage sections —
     .page-head .sec-sub is the summary line on the legal pages and stays. */
  .center>.sec-sub,
  .cmp-intro .sec-sub {
    display: none
  }

  /* The comparison becomes two short labelled lists. Each row's heading is a
     full statement on its own; the paragraph under it was the single longest
     block of copy on the phone page. */
  .cmp-item p {
    display: none
  }

  .cmp-item {
    padding: 15px 16px;
    gap: 12px;
    align-items: center;
  }

  .cmp-item h4 {
    font-size: .96rem;
    line-height: 1.35;
    margin: 0;
  }

  .cmp-grid {
    gap: 30px
  }

  .cmp-col {
    gap: 10px
  }

  /* --- Grids: 2x2 beats four tall cards in a column --- */
  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px
  }

  .ftr-badges {
    grid-template-columns: 1fr 1fr;
    gap: 10px
  }

  .g-points {
    grid-template-columns: 1fr;
    gap: 14px
  }

  /* --- Cards tighten up --- */
  .stat-card {
    padding: 20px 14px
  }

  .stat-card .n {
    font-size: 2rem
  }

  .stat-card .l {
    font-size: .62rem;
    letter-spacing: .08em;
    margin-top: 8px;
  }

  .guarantee {
    padding: 22px 20px
  }

  .form-card {
    padding: 26px 20px 22px
  }

  .price {
    padding: 26px 22px
  }

  .ba {
    padding: 24px 20px
  }

  .fb-item {
    padding: 13px 14px;
    font-size: .78rem;
    gap: 9px;
  }

  /* --- Touch targets, and no zoom-on-focus ------------------------------
     Safari zooms the whole page when a focused input is under 16px. */
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
    padding: 14px 14px;
  }

  .field label {
    font-size: .62rem;
    margin-bottom: 6px
  }

  .field {
    margin-bottom: 13px
  }

  .btn,
  .red-btn,
  .gold-btn,
  .wa-btn {
    min-height: 50px
  }

  .nav.open a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* --- Every call to action goes full width --- */
  .hero-actions,
  .pub-btns,
  .need-actions,
  .cmp-btn,
  .ba-cta,
  .banner-btns,
  .cta-btns {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions>*,
  .pub-btns>*,
  .need-actions>*,
  .cmp-btn>*,
  .ba-cta>*,
  .banner-btns>*,
  .cta-btns>* {
    width: 100%;
    justify-content: center;
  }

  /* --- Terminal: the diff, and nothing around it --- */
  .t-bar {
    padding: 10px 14px
  }

  .t-tabs {
    width: 100%;
    margin-left: 0
  }

  .t-tab {
    flex: 1;
    text-align: center
  }

  .t-text {
    font-size: .95rem;
    line-height: 1.85
  }

  .t-foot {
    font-size: .68rem;
    padding: 11px 14px
  }

  /* --- Reviews --- */
  .rev {
    width: 84vw;
    max-width: 320px;
    padding: 24px 20px 22px;
  }

  .rev-head {
    gap: 12px
  }

  /* --- Closing CTA --- */
  .need-grid {
    grid-template-columns: 1fr
  }

  .need-title {
    font-size: clamp(1.5rem, 6.4vw, 1.95rem)
  }

  .need-ticks {
    gap: 8px
  }

  /* --- Popup: name, email, phone. That is the whole ask. --- */
  .pop-box {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .pop-side {
    padding: 20px 20px 16px
  }

  .pop-side>p {
    display: none
  }

  .pop-side h3 {
    font-size: 1.2rem
  }

  .pop-list,
  .pop-trust {
    display: none
  }

  .pop-form {
    padding: 20px 20px 22px
  }

  /* --- Footer --- */
  .fc-item {
    padding: 15px 0
  }

  .ftr-main {
    gap: 26px;
    padding: 28px 0
  }

  .ftr-disclaimer {
    font-size: .79rem;
    line-height: 1.7
  }

  .assure-card {
    padding: 14px 16px
  }

  .pay-chip {
    padding: 7px 11px;
    font-size: .66rem
  }

  .ftr-bot {
    font-size: .76rem
  }
}

/* ---- 32.3 Small phones (≤420px) ---------------------------------------- */
@media (max-width:420px) {

  .sec {
    padding: 44px 0
  }

  .sec-tight {
    padding: 32px 0
  }

  /* "Money-Back Guarantee" will not sit beside a neighbour at this width. */
  .ftr-badges {
    grid-template-columns: 1fr
  }

  .stat-card .n {
    font-size: 1.8rem
  }

  .hero-ticks {
    font-size: .86rem
  }

  .pill {
    font-size: .6rem;
    padding: 7px 14px
  }
}