/* Hero Carousel Shelf Container */
.shelf {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.shelf__viewport {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  position: relative;
}

/* Track Alignment & Slow Smooth Transition */
.shelf__track {
  display: flex;
  flex-direction: row;
  gap: 16px;
  /* 1.2s cubic-bezier se move hone ki speed bohot smooth aur slow ho jayegi */
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* At a time 1.5 Cards visible honge */
.shelf__item {
  flex: 0 0 calc(66.66% - 10.66px);
  min-width: 0;
}

.shelf__card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

img.service-icon {
    width: 20% !important;
    padding: 10px;
    border: 1px dashed #efefef;
    border-radius: 10px;
    margin-bottom: 9px;
}


/* Background & Outer Wrapper */
.bento-container {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}
.tile.tile-sky.tile-wide-2 {
    margin-bottom: -50px !important;
}

p.tile-text.text-left-big {
    font-size: 17px;
    margin-top: 10px;
}


/* Main 2-Column Outer Wrapper */
.bento-layout {
    display: flex;
    gap: 16px;
    width: 100%;
    max-width: 1100px;
}

/* Column General Styling */
.bento-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Row Inside Columns */
.tile-row {
    display: flex;
    gap: 16px;
    width: 100%;
    flex: 1;
}

/* Base Tile / Box Styling */
.tile {
    border-radius: 8px;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    border: none;
}

.tile-box {
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}

.tile-wide {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* Column Heights Control for Perfect Alignment */
.bento-col .tile-wide {
    height: 180px;
}

.bento-col .tile-row {
    height: 220px;
}

/* Color Matching */
.tile-sky {
    background-color: #c1e6ee; /* Sky Blue */
    color: #000000;
}

.tile-white {
    background-color: #ffffff; /* Pure White */
    color: #1a1a1a;
}

.tile-gold {
    background-color: #ffb800; /* Yellow / Gold */
    color: #000000;
}

/* Typography & Alignment */
.scopus-text {
    font-size: 21px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
    max-width: 65%;
    color: #000;
}

.tile.tile-white.tile-box {
    padding: 33px;
}

.tile-text {
    font-size: 15px;
    line-height: 1.35;
    margin: 0;
}

.bold {
    font-weight: 600;
}

.text-left { text-align: left; }
.text-center { text-align: center; }

/* Image Adjustments */
.tile-logo-aside {
    max-width: 140px;
    height: auto;
    object-fit: contain;
}

.logo-wos {
    height: 60px;
    width: auto;
    object-fit: contain;
    align-self: flex-start;
}

.logo-erih {
    height: 55px;
    width: auto;
    object-fit: contain;
    align-self: center;
}

.logo-hindex {
    height: 65px;
    width: auto;
    object-fit: contain;
    align-self: center;
}

.logo-scholar {
    height: 38px;
    width: auto;
    object-fit: contain;
    align-self: flex-start;
}

/* DOI Content Adjustments */
.doi-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 68%;
}

.doi-title {
    font-size: 19px;
    font-weight: 700;
    margin: 0;
    color: #000;
}

.doi-desc {
    font-size: 11.5px;
    line-height: 1.35;
    margin: 0;
    color: #1a1a1a;
}

.doi-img {
    max-width: 110px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .bento-layout {
        flex-direction: column;
    }
    
    .bento-col .tile-wide,
    .bento-col .tile-row {
        height: auto;
        min-height: 180px;
    }

    .tile-wide {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .scopus-text, .doi-content {
        max-width: 100%;
    }
}

.marquee-container {
    overflow: hidden;
    width: 100%;
    max-width: 880px;
    margin: 0px auto 0;
    white-space: nowrap;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 25s linear infinite;
}

/* User ki mouse hover par slide ko rokne ke liye (Optional) */
.marquee-track:hover {
    animation-play-state: paused;
}

.tags {
    display: flex;
    flex-wrap: nowrap; /* Wrap nahi hone dena */
    gap: 10px;
    padding-right: 10px; /* Gap maintain rakhne ke liye */
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


/* ==========================================================================
   Scholars Publication — Design System
   Forest #163300 · Bright Green #9FE871
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

::selection { background: var(--lime); color: var(--green-900); }
:focus-visible { outline: 3px solid var(--lime-600); outline-offset: 3px; border-radius: 4px; }

/* ---------- 2. Tokens ---------- */
:root {
  /* Brand: Forest #163300 + Bright Green #9FE871.
     --green-900 does double duty: headings on light backgrounds, and the
     background of every dark band. */
  --green-900: #163300;
  --green-800: #1D4405;
  --green-700: #24540A;
  --green-600: #2E6B14;
  --green-line: rgba(159, 232, 113, .18);

  /* The action colour: buttons, ticks, hovers, accents on dark bands.
     It is pale, so anything sitting ON it takes DARK GREEN text. */
  --lime:      #9FE871;
  --lime-400:  #B7EF92;
  --lime-600:  #86D555;
  --lime-700:  #5E9F33;
  --lime-tint: #EAF9DC;
  --lime-tint2:#F4FCEC;
  --accent-rgb: 159, 232, 113;

  /* Gold is now only the supplied artwork's colour — award medals, the
     money-back seal — plus the "Save More" word, as in the reference. */
  --gold:      #E8B33A;
  --gold-600:  #C9941C;
  --gold-700:  #8F6A10;
  --gold-tint: #FDF4DE;
  --gold-rgb:  232, 179, 58;

  --white:   #FFFFFF;
  --paper:   #F7FAF3;
  --paper-2: #EEF4E6;
  --text:    #17220F;
  --muted:   #56684B;
  --muted-2: #7D8E73;
  --line:    #E2EBD8;
  --line-2:  #EDF3E6;

  --on-dark:     #E4F0DA;
  --on-dark-dim: #A6BE97;

  /* One typeface for the whole site: Poppins.
     Both tokens point at it — the names are kept so the ~18 rules that already
     use var(--font-serif) for headings and var(--font-sans) for body carry on
     working. --font-serif is now the *display* role, not a serif. */
  --font-serif: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:  "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* Soft, low-contrast shadows — heavy drop shadows are what make a page look cheap */
  --sh-sm: 0 1px 2px rgba(22, 51, 0, .05), 0 4px 12px -6px rgba(22, 51, 0, .10);
  --sh-md: 0 2px 6px rgba(22, 51, 0, .05), 0 14px 34px -16px rgba(22, 51, 0, .20);
  --sh-lg: 0 4px 12px rgba(22, 51, 0, .05), 0 34px 70px -30px rgba(22, 51, 0, .32);
  --sh-lime: 0 10px 24px -12px rgba(94, 159, 51, .65);

  --wrap: 1180px;
  --wrap-narrow: 820px;
  --gutter: 24px;
  --header-h: 74px;

  --ease: cubic-bezier(.22, .8, .3, 1);
}

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding: clamp(62px, 7.5vw, 108px) 0; }
.section--tight { padding: clamp(44px, 5vw, 68px) 0; }
.section--paper { background: var(--paper); }
.section--paper2 { background: var(--paper-2); }
.section--mint { background: var(--lime-tint2); }
.section--ink { background: var(--green-900); color: var(--on-dark); }

.grid { display: grid; gap: 24px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- 4. Typography ---------- */
/* Poppins is geometric and wide, so it needs looser tracking and a touch more
   leading than the serif it replaced — tight negative tracking closes up the
   round bowls and makes the headings look cramped. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.012em;
  color: var(--green-900);
  text-wrap: balance;
}

/* Sizes matched to the reference screenshot — its headings are restrained:
   the hero sits around 38px, section headings around 31px, card titles 17px.
   Nothing here is display-scale. */
.h-display {
  font-size: clamp(1.9rem, 3vw, 2.35rem);
  font-weight: 800; line-height: 1.18; letter-spacing: -.005em;
  text-transform: uppercase;
}
.h1 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); font-weight: 800; letter-spacing: -.01em; }
.h2 { font-size: clamp(1.45rem, 2.3vw, 1.95rem); font-weight: 800; letter-spacing: -.01em; }
.h3 { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.35; }
.h4 { font-size: .9375rem; line-height: 1.4; }

.lead {
  font-size: clamp(.875rem, 1.05vw, .9375rem);
  font-weight: 400;   /* Poppins has no 450 — it would round unpredictably */
  color: var(--muted);
  line-height: 1.7;
  text-wrap: pretty;
}

/* The one accent word in a heading — "Save More On Your Order". */
.accent { color: var(--green-600); }
.section--ink .accent { color: var(--lime); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-600);
  margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--lime); }
.section--ink .eyebrow { color: var(--lime); }

.section-head { max-width: 700px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head .lead { margin-top: 16px; }
.section--ink .section-head h2 { color: var(--white); }
.section--ink .lead { color: var(--on-dark-dim); }

/* Hand-drawn style highlight, sitting behind the text */
.mark { position: relative; white-space: nowrap; }
.mark::after {
  content: "";
  position: absolute;
  left: -.08em; right: -.08em; bottom: .06em;
  height: .3em;
  /* Gold, not green — a mid-green highlighter behind dark-green text is
     unreadable. Gold is also what the reference uses for "SAVE MORE". */
  background: var(--lime);
  border-radius: 2px 8px 3px 7px;
  z-index: -1;
}
.section--ink .mark::after { background: rgba(var(--accent-rgb), .3); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: var(--r-pill);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--lime { background: var(--lime); color: var(--green-900); box-shadow: var(--sh-lime); }
.btn--lime:hover { background: var(--lime-400); }

.btn--ink { background: var(--green-900); color: var(--white); box-shadow: var(--sh-md); }
.btn--ink:hover { background: var(--green-700); }

.btn--outline { border-color: var(--line); background: var(--white); color: var(--green-900); }
.btn--outline:hover { border-color: var(--green-900); box-shadow: var(--sh-sm); }

.btn--ghost-light { border-color: rgba(var(--accent-rgb), .4); color: var(--white); }
.btn--ghost-light:hover { background: rgba(var(--accent-rgb), .12); border-color: var(--lime); color: var(--lime); }

.btn--sm { padding: 11px 20px; font-size: .875rem; }
.btn--lg { padding: 18px 34px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .9375rem; color: var(--green-900);
  transition: gap .25s var(--ease), color .2s;
}
.link-arrow svg { width: 15px; height: 15px; }
.link-arrow:hover { color: var(--green-600); gap: 12px; }

/* ---------- 6. Top bar ---------- */
.topbar {
  background: var(--green-900);
  color: var(--on-dark-dim);
  font-size: .8125rem;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 40px; padding-block: 7px;
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.topbar a:hover { color: var(--lime); }
.topbar svg { width: 14px; height: 14px; opacity: .8; }
.topbar__stars { color: var(--lime); letter-spacing: 1px; }
.topbar b { color: var(--white); }

/* ---------- 7. Header ---------- */
.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s;
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 20px -18px rgba(22, 51, 0, .6); }
.header__inner { display: flex; align-items: center; gap: 26px; min-height: var(--header-h); }

.brand { display: flex; align-items: center; flex: none; }
.brand__logo { height: 42px; width: auto; display: block; }
.brand--light .brand__logo { filter: brightness(0) invert(1); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 600;
  color: var(--green-800);
  transition: color .2s, background-color .2s;
}
.nav__link:hover { background: var(--lime-tint); }
.nav__link.is-active { color: var(--green-900); font-weight: 700; background: var(--lime-tint); }

.header__cta { display: flex; align-items: center; gap: 12px; flex: none; }

.burger {
  display: none; width: 44px; height: 44px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--white); place-items: center;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--green-900); border-radius: 2px; position: relative; transition: background-color .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--green-900); border-radius: 2px;
  transition: transform .3s var(--ease), top .2s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
body.nav-open .burger span { background: transparent; }
body.nav-open .burger span::before { top: 0; transform: rotate(45deg); }
body.nav-open .burger span::after { top: 0; transform: rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(360px, 88vw);
  background: var(--white); z-index: 120;
  padding: 24px 24px 40px; overflow-y: auto;
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  box-shadow: -24px 0 60px -30px rgba(22, 51, 0, .5);
}
body.nav-open .drawer { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.drawer__close { width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line); display: grid; place-items: center; }
.drawer__close svg { width: 16px; height: 16px; }
.drawer nav > ul > li { border-bottom: 1px solid var(--line-2); }
.drawer nav a { display: block; padding: 14px 2px; font-size: 1.0625rem; font-weight: 500; color: var(--green-900); }
.drawer__foot { margin-top: 26px; display: grid; gap: 12px; }
.drawer__contact { margin-top: 24px; font-size: .875rem; color: var(--muted); display: grid; gap: 10px; }
.drawer__contact a { display: flex; align-items: center; gap: 10px; }
.drawer__contact svg { width: 15px; height: 15px; color: var(--green-600); }

.scrim {
  position: fixed; inset: 0;
  background: rgba(22, 51, 0, .5);
  z-index: 110; opacity: 0; visibility: hidden;
  transition: opacity .35s, visibility .35s;
}
body.nav-open .scrim { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

/* ==========================================================================
   8. HERO — light, editorial, with a flat cover shelf
   ========================================================================== */
.hero {
  position: relative;
  background: var(--white);
  padding: clamp(46px, 5.5vw, 78px) 0 clamp(56px, 6.5vw, 92px);
  overflow: hidden;
  isolation: isolate;
}
/* soft green wash behind the covers */
.hero::before {
  content: "";
  position: absolute; z-index: -2;
  top: -26%; right: -12%;
  width: 62vw; height: 62vw;
  max-width: 820px; max-height: 820px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .38), rgba(var(--accent-rgb), 0) 66%);
}
/* small dot field, bottom left — a printed-page texture rather than a gradient */
.hero::after {
  content: "";
  position: absolute; z-index: -2;
  left: -30px; bottom: -30px;
  width: 300px; height: 300px;
  background-image: radial-gradient(var(--lime-600) 1.3px, transparent 1.3px);
  background-size: 19px 19px;
  opacity: .3;
  -webkit-mask-image: linear-gradient(40deg, #000, transparent 68%);
  mask-image: linear-gradient(40deg, #000, transparent 68%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);   /* copy leads, covers sit beside it */
  gap: clamp(36px, 4vw, 58px);
  align-items: center;
}

.hero h1 { margin-bottom: 20px; }
.hero .lead { max-width: 52ch; }
.hero .btn-row { margin-top: 32px; }

/* rating pill */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 7px;
  border-radius: var(--r-pill);
  background: var(--lime-tint);
  border: 1px solid var(--lime);
  font-size: .8125rem; color: var(--green-800);
  margin-bottom: 22px;
}
.pill b { color: var(--green-900); font-weight: 700; }
.pill__stars { color: var(--lime-700); letter-spacing: .5px; }
.pill__dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lime); color: var(--green-900);
  display: grid; place-items: center;
}
.pill__dot svg { width: 12px; height: 12px; }

/* trust strip under the CTAs */
.hero__trust {
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 26px;
}
.hero__trust li { display: flex; align-items: center; gap: 9px; font-size: .9375rem; color: var(--text); font-weight: 600; }
.hero__trust svg { width: 17px; height: 17px; color: var(--lime-700); flex: none; }

/* ---------- 8b. Cover shelf — two large covers ---------- */
.shelf { position: relative; }
.shelf__viewport { overflow: hidden; }
.shelf__track { display: flex; gap: 24px; transition: transform .6s var(--ease); }
/* 1.5 covers in view, so each one is noticeably larger and the half-visible
   next cover still signals that it scrolls. */
.shelf__item { flex: 0 0 64%; }

.shelf__card {
  position: relative;
  aspect-ratio: 404 / 600;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 3px 6px rgba(22, 51, 0, .08), 0 24px 46px -18px rgba(22, 51, 0, .38);
  transition: transform .38s var(--ease), box-shadow .38s var(--ease);
}
/* thin spine edge so a flat cover still reads as a book */
.shelf__card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(22, 51, 0, .1),
              inset 7px 0 12px -9px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.shelf__card img { width: 100%; height: 100%; object-fit: cover; }
.shelf__item:hover .shelf__card {
  transform: translateY(-10px);
  box-shadow: 0 3px 6px rgba(22, 51, 0, .08), 0 34px 60px -20px rgba(22, 51, 0, .45);
}

.shelf__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.shelf__label { font-size: .875rem; color: var(--muted); font-weight: 500; }
.shelf__label b { color: var(--green-900); font-weight: 700; }
.shelf__ctrls { display: flex; gap: 10px; }
.shelf__btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white);
  display: grid; place-items: center; color: var(--green-900);
  box-shadow: var(--sh-sm);
  transition: background-color .2s, border-color .2s, transform .2s, opacity .2s;
}
.shelf__btn:hover { background: var(--lime); border-color: var(--lime); color: var(--green-900); transform: translateY(-2px); }
.shelf__btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.shelf__btn svg { width: 17px; height: 17px; }

/* ---------- 9. Stats ---------- */
.stats { background: var(--green-900); color: var(--on-dark); }
.stats__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stat { padding: 32px 16px; text-align: center; border-right: 1px solid var(--green-line); }
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  font-weight: 800; color: var(--white);
  letter-spacing: -.02em; line-height: 1;
}
.stat__num .suf { color: var(--lime); }
.stat__label { margin-top: 8px; font-size: .8125rem; font-weight: 500; color: var(--on-dark-dim); line-height: 1.45; }

/* ---------- 10. Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px;
  position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--lime); }

.card__icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--lime-tint); color: var(--green-700);
  margin-bottom: 18px;
  transition: background-color .3s, color .3s;
}
.card__icon svg { width: 23px; height: 23px; }
.card:hover .card__icon { background: var(--lime); color: var(--green-900); }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--muted); font-size: .9375rem; }
.card__link { margin-top: 18px; display: inline-flex; }

.card__num {
  position: absolute; top: 22px; right: 24px;
  font-family: var(--font-serif); font-size: .875rem; font-weight: 700;
  color: var(--lime-700); letter-spacing: .1em;
}

/* Feature tiles */
.feature {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--sh-sm); border-color: var(--lime); }
.feature__ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--lime-tint); color: var(--green-700);
  transition: background-color .3s, color .3s;
}
.feature:hover .feature__ico { background: var(--lime); color: var(--green-900); }
.feature__ico svg { width: 20px; height: 20px; }
.feature h4 { font-family: var(--font-sans); font-size: .9375rem; font-weight: 700; }
.feature p { font-size: .8125rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* ---------- 11. Split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 4.6vw, 68px); align-items: center; }
.split--wide-left { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }

.check-list { display: grid; gap: 13px; margin-top: 24px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .9375rem; color: var(--text); }
.check-list .tick {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--lime); color: var(--green-900);
  display: grid; place-items: center; margin-top: 1px;
}
.check-list .tick svg { width: 12px; height: 12px; }
.section--ink .check-list li { color: var(--on-dark); }

.inline-stats { display: flex; gap: 32px; margin-top: 30px; flex-wrap: wrap; }
.inline-stats div strong {
  display: block; font-family: var(--font-serif);
  font-size: 2rem; font-weight: 800; color: var(--green-900); line-height: 1;
}
.inline-stats div span { font-size: .8125rem; color: var(--muted); }

/* Cover collage used instead of stock photography */
.collage { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.collage__img {
  aspect-ratio: 404 / 600;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 2px 5px rgba(22, 51, 0, .07), 0 18px 38px -16px rgba(22, 51, 0, .3);
}
.collage__img img { width: 100%; height: 100%; object-fit: cover; }
.collage__img:first-child { transform: translateY(-18px); }
.collage__img:last-child { transform: translateY(18px); }
.collage__badge {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--green-900);
  color: var(--white);
  border-radius: var(--r-md);
  padding: 16px 22px;
  text-align: center;
  box-shadow: var(--sh-lg);
  z-index: 2;
  min-width: 168px;
}
.collage__badge strong { display: block; font-family: var(--font-serif); font-weight: 800; font-size: 1.6rem; color: var(--lime); line-height: 1; }
.collage__badge span { font-size: .75rem; color: var(--on-dark-dim); }

/* ---------- 12. Process ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; position: relative; }
.steps::before {
  content: "";
  position: absolute; top: 32px; left: 14%; right: 14%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--lime) 0 9px, transparent 9px 18px);
}
.step { text-align: center; position: relative; }
.step__badge {
  width: 64px; height: 64px; margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--lime); color: var(--green-900);
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 800;
  box-shadow: 0 0 0 8px var(--paper);
  transition: transform .35s var(--ease);
}
.section--paper2 .step__badge { box-shadow: 0 0 0 8px var(--paper-2); }
.step:hover .step__badge { transform: translateY(-4px); }
.step h3 { margin-bottom: 9px; }
.step p { color: var(--muted); font-size: .9375rem; max-width: 33ch; margin-inline: auto; }

/* ---------- 13. Marquee ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; gap: 14px; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--rev .marquee__track { animation-direction: reverse; }
@keyframes slide { to { transform: translateX(-50%); } }

.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: var(--r-pill);
  background: rgba(var(--accent-rgb), .07);
  border: 1px solid rgb(8 8 8 / 20%);
  font-size: .875rem; font-weight: 600; color: #000000;
  white-space: nowrap;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex: none; }

.covers-marquee .marquee__track { gap: 20px; animation-duration: 58s; }
/* A <figure>: the cover, then the journal name under it. The frame lives on
   the <img> rather than the figure, so the caption is not clipped. */
.cover-tile { width: clamp(138px, 13vw, 178px); flex: none; text-align: center; }
.cover-tile img {
  width: 100%;
  aspect-ratio: 404 / 530;
  object-fit: cover;
  border-radius: 11px;
  background: var(--green-800);
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .7),
              inset 0 0 0 1px rgba(255, 255, 255, .13);
}
.cover-tile figcaption {
  margin-top: 10px;
  font-size: .6875rem; line-height: 1.35;
  color: black;
}

section.section.section--ink-white{
    background: #9fe8712b;
}

/* Indexing row */
.index-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.index-item {
  text-align: center; padding: 24px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white);
  transition: border-color .3s, transform .3s var(--ease), background-color .3s;
}
.index-item:hover { border-color: var(--lime); background: var(--lime-tint2); transform: translateY(-3px); }
.index-item strong { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 1.0625rem; color: var(--green-900); }
.index-item span { font-size: .75rem; color: var(--muted-2); }

/* ---------- 14. Experts ---------- */
.expert {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.expert:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--lime); }
.expert__top { padding: 24px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid var(--line-2); }
.avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700;
  color: var(--green-900); background: var(--lime);
}
.expert__name { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700; color: var(--green-900); }
.expert__field { font-size: .8125rem; color: var(--muted); margin-top: 2px; }
.expert__rating { font-size: .8125rem; color: var(--lime-700); margin-top: 4px; font-weight: 600; }
.expert__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.expert__metrics div { padding: 16px 8px; text-align: center; border-right: 1px solid var(--line-2); }
.expert__metrics div:last-child { border-right: 0; }
.expert__metrics strong { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 1.1875rem; color: var(--green-900); }
.expert__metrics span { font-size: .6875rem; color: var(--muted-2); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- 15. Testimonials ---------- */
.tcard {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px;
  display: flex; flex-direction: column; gap: 16px; height: 100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--lime); }
.tcard__stars { color: var(--lime-700); letter-spacing: 2px; font-size: .9375rem; }
.tcard__body { font-family: var(--font-serif); font-weight: 500; font-size: 1.0625rem; line-height: 1.58; color: var(--green-800); flex: 1; }
.tcard__who { display: flex; align-items: center; gap: 12px; padding-top: 15px; border-top: 1px solid var(--line-2); }
/* Scoped to the text block — a bare `.tcard__who span` also matched the
   initials badge and knocked it out of its circle. */
.tcard__who > div span { display: block; font-size: .75rem; color: var(--muted-2); line-height: 1.35; }
.tcard__who b { display: block; font-size: .9375rem; color: var(--green-900); font-weight: 700; line-height: 1.3; }
.tcard__who .avatar {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; text-align: center;
  font-size: .875rem; font-weight: 700; line-height: 1;
  color: var(--green-900); background: var(--lime);
}

.slider { position: relative; }
.slider__viewport { overflow: hidden; padding: 4px; }
.slider__track { display: flex; gap: 22px; transition: transform .55s var(--ease); }
.slider__track > * { flex: 0 0 calc((100% - 44px) / 3); }
.slider__nav { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.slider__btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white);
  display: grid; place-items: center; color: var(--green-900);
  transition: background-color .2s, border-color .2s, transform .2s, opacity .2s;
}
.slider__btn:hover { background: var(--lime); border-color: var(--lime); color: var(--green-900); transform: translateY(-2px); }
.slider__btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.slider__btn svg { width: 16px; height: 16px; }

/* ---------- 16. Packages ---------- */
.plan {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 32px;
  display: flex; flex-direction: column; position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.plan--featured { background: var(--green-900); border-color: var(--green-900); box-shadow: var(--sh-lg); color: var(--on-dark); }
.plan--featured h3, .plan--featured .plan__price { color: var(--white); }
.plan__tag {
  position: absolute; top: 24px; right: 24px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--lime); color: var(--green-900);
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.plan__eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-600); }
.plan--featured .plan__eyebrow { color: var(--lime); }
.plan h3 { margin: 11px 0 8px; }
.plan__desc { font-size: .9375rem; color: var(--muted); min-height: 46px; }
.plan--featured .plan__desc { color: var(--on-dark-dim); }
.plan__price { font-family: var(--font-serif); font-weight: 800; font-size: 2.15rem; color: var(--green-900); margin: 20px 0 4px; line-height: 1; }
.plan__price small { font-size: .875rem; font-family: var(--font-sans); color: var(--muted); font-weight: 500; }
.plan--featured .plan__price small { color: var(--on-dark-dim); }
.plan__list { display: grid; gap: 11px; margin: 24px 0 28px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.plan--featured .plan__list { border-top-color: rgba(var(--accent-rgb), .2); }
.plan__list li { display: flex; align-items: flex-start; gap: 11px; font-size: .9rem; }
.plan__list .tick {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--lime); color: var(--green-900);
  display: grid; place-items: center; flex: none; margin-top: 2px;
}
.plan__list .tick svg { width: 11px; height: 11px; }
.plan .btn { margin-top: auto; }

/* ---------- 17. Accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 4px; text-align: left;
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600;
  color: var(--green-900); transition: color .2s;
}
.acc__q:hover { color: var(--green-600); }
.acc__ico {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--lime-tint); display: grid; place-items: center;
  color: var(--green-700);
  transition: transform .3s var(--ease), background-color .3s, color .3s;
}
.acc__ico svg { width: 13px; height: 13px; }
.acc__item.is-open .acc__ico { transform: rotate(45deg); background: var(--lime); color: var(--green-900); }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
.acc__item.is-open .acc__a { grid-template-rows: 1fr; }
.acc__a > div { overflow: hidden; }
.acc__a p { padding: 0 46px 24px 4px; color: var(--muted); font-size: .9375rem; }

/* ==========================================================================
   18. QUOTE / CONTACT CARD — two-panel, centred
   ========================================================================== */
.quote-card {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  max-width: 1040px;
  margin-inline: auto;
  background: var(--white);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}

.quote-card__aside {
  background: var(--green-900);
  color: var(--on-dark);
  padding: clamp(30px, 3.2vw, 44px);
  display: flex; flex-direction: column;
  position: relative;
  isolation: isolate;
}
.quote-card__aside::before {
  content: "";
  position: absolute; z-index: -1;
  right: -30%; top: -18%;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .22), transparent 66%);
}
.quote-card__aside h3 { color: var(--white); font-size: 1.5rem; margin-bottom: 12px; }
.quote-card__aside > p { font-size: .9375rem; color: var(--on-dark-dim); }

.quote-card__list { display: grid; gap: 14px; margin: 26px 0; }
.quote-card__list li { display: flex; align-items: flex-start; gap: 11px; font-size: .875rem; color: var(--on-dark); }
.quote-card__list .tick {
  width: 21px; height: 21px; flex: none; border-radius: 50%;
  background: var(--lime); color: var(--green-900);
  display: grid; place-items: center; margin-top: 1px;
}
.quote-card__list .tick svg { width: 11px; height: 11px; }

.quote-card__rating {
  margin-top: auto; padding-top: 24px;
  border-top: 1px solid var(--green-line);
}
.quote-card__rating .stars { color: var(--lime); letter-spacing: 2px; font-size: 1rem; }
.quote-card__rating p { font-size: .8125rem; color: var(--on-dark-dim); margin-top: 5px; }
.quote-card__wa {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px; padding: 12px 20px;
  border-radius: var(--r-pill);
  background: rgba(var(--accent-rgb), .12);
  border: 1px solid rgba(var(--accent-rgb), .3);
  color: var(--lime); font-size: .875rem; font-weight: 600;
  transition: background-color .25s, color .25s;
}
.quote-card__wa:hover { background: var(--lime); color: var(--green-900); }
.quote-card__wa svg { width: 17px; height: 17px; flex: none; }

.quote-card__form { padding: clamp(28px, 3.2vw, 44px); }
.quote-card__form > .eyebrow { margin-bottom: 6px; }
.quote-card__form h3 { font-size: 1.375rem; margin-bottom: 22px; }

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }

/* Form controls */
.field { display: grid; gap: 6px; }
.field label { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.input, .select, .textarea {
  width: 100%;
  min-width: 0;   /* a <select> is otherwise as wide as its longest option */
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--text);
  font-size: .9375rem;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--lime-600);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3);
}
.textarea { min-height: 104px; resize: vertical; }

.form-note { font-size: .75rem; color: var(--muted-2); margin-top: 14px; text-align: center; }
.form-status {
  margin-top: 14px; padding: 13px 16px;
  border-radius: var(--r-sm);
  background: var(--lime-tint); border: 1px solid var(--lime);
  color: var(--green-700); font-size: .875rem; font-weight: 500;
  display: none;
}
.form-status.show { display: block; }

/* Contact detail row under the card */
.contact-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; max-width: 1040px; margin: 26px auto 0;
}
.contact-item {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .25s, transform .25s var(--ease);
}
.contact-item:hover { border-color: var(--lime); transform: translateY(-3px); }
.contact-item__ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  background: var(--lime-tint); color: var(--green-700);
  display: grid; place-items: center;
}
.contact-item__ico svg { width: 19px; height: 19px; }
.contact-item b { display: block; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; }
/* only the label span, so it can't override .contact-item__ico's colour */
.contact-item b + span { font-size: .9375rem; color: var(--green-900); font-weight: 500; }

/* ---------- 19. CTA band ---------- */
.cta-band {
  position: relative;
  background: var(--green-900);
  border-radius: var(--r-2xl);
  padding: clamp(38px, 5.5vw, 68px);
  overflow: hidden; text-align: center; isolation: isolate;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(600px 300px at 18% 0%, rgba(var(--accent-rgb), .24), transparent 62%),
    radial-gradient(540px 300px at 88% 100%, rgba(var(--accent-rgb), .15), transparent 64%);
}
.cta-band h2 { color: var(--white); }
.cta-band .lead { color: var(--on-dark-dim); margin: 16px auto 0; max-width: 56ch; }
.cta-band .btn-row { justify-content: center; margin-top: 30px; }
.cta-band__note { margin-top: 20px; font-size: .8125rem; color: var(--on-dark-dim); }

/* ---------- 20. Footer ---------- */
.footer { background: var(--green-900); color: var(--on-dark-dim); padding: clamp(54px, 6.5vw, 78px) 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 38px; padding-bottom: 48px; }
.footer__about { font-size: .9rem; margin-top: 20px; max-width: 34ch; line-height: 1.7; }
.footer h4 {
  font-family: var(--font-sans); font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--white); margin-bottom: 18px;
}
.footer ul { display: grid; gap: 11px; }
.footer li a { font-size: .9rem; transition: color .2s, padding-left .25s var(--ease); display: inline-block; }
.footer li a:hover { color: var(--lime); padding-left: 5px; }
.footer__contact li { display: flex; gap: 11px; align-items: flex-start; font-size: .9rem; }
.footer__contact svg { width: 15px; height: 15px; color: var(--lime); flex: none; margin-top: 4px; }
.footer__contact a:hover { padding-left: 0; }

.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .24);
  display: grid; place-items: center;
  transition: background-color .25s, border-color .25s, transform .25s var(--ease), color .25s;
}
.socials a:hover { background: var(--lime); border-color: var(--lime); color: var(--green-900); transform: translateY(-3px); }
.socials svg { width: 16px; height: 16px; }

.footer__bar {
  border-top: 1px solid var(--green-line);
  padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; font-size: .8125rem;
}
.footer__bar ul { display: flex; gap: 22px; }

/* ---------- 21. Floating WhatsApp ---------- */
.wa {
  position: fixed; left: 20px; bottom: 20px; z-index: 80;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 28px -10px rgba(37, 211, 102, .6);
  transition: transform .3s var(--ease);
}
.wa:hover { transform: scale(1.08) translateY(-2px); }
.wa svg { width: 27px; height: 27px; }
.wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366;
  animation: ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes ping {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- 22. Reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   23. LEGAL PAGES — page hero, table of contents, long-form prose
   Used by privacy-policy.php, refund-policy.php, terms-conditions.php
   ========================================================================== */
.page-hero {
  position: relative;
  background: var(--green-900);
  color: var(--on-dark);
  padding: clamp(38px, 5vw, 66px) 0 clamp(44px, 5.5vw, 72px);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(620px 320px at 12% 0%, rgba(var(--accent-rgb), .22), transparent 64%),
    radial-gradient(520px 300px at 92% 110%, rgba(var(--accent-rgb), .14), transparent 66%);
}
.page-hero h1 { color: var(--white); max-width: 18ch; }
.page-hero .eyebrow { color: var(--lime); }
.page-hero .lead { color: var(--on-dark-dim); max-width: 58ch; margin-top: 16px; }

.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  font-size: .8125rem; color: var(--on-dark-dim);
  margin-bottom: 22px;
}
.crumbs a { transition: color .2s; }
.crumbs a:hover { color: var(--lime); }
.crumbs span[aria-hidden] { opacity: .45; }
.crumbs [aria-current] { color: var(--white); font-weight: 600; }

.page-hero__meta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px; padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--green-line);
  background: rgba(var(--accent-rgb), .08);
  font-size: .8125rem; color: var(--on-dark-dim);
}
.page-hero__meta time { color: var(--lime); font-weight: 600; }

/* ---------- Layout: sticky contents + article ---------- */
.legal-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
}

.toc {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  box-shadow: var(--sh-sm);
}
.toc__title {
  font-size: .6875rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.toc ol { counter-reset: toc; display: grid; gap: 2px; }
.toc li { counter-increment: toc; }
.toc li a {
  display: flex; gap: 9px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: .8125rem; line-height: 1.45; font-weight: 500;
  color: var(--muted);
  transition: background-color .2s, color .2s;
}
.toc li a::before { content: counter(toc) "."; color: var(--lime-700); font-weight: 700; flex: none; }
.toc li a:hover { background: var(--lime-tint); color: var(--green-900); }

.toc__help {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line-2);
  font-size: .8125rem; color: var(--muted);
}
.toc__help p { margin-bottom: 4px; }
.toc__help b { color: var(--green-900); }
.toc__help .link-arrow { margin-top: 10px; font-size: .8125rem; word-break: break-all; }

/* ---------- Long-form prose ---------- */
.legal { max-width: 74ch; }
.legal > * + * { margin-top: 18px; }
.legal p, .legal li { color: var(--muted); line-height: 1.75; text-wrap: pretty; }
.legal a:not(.link-arrow) {
  color: var(--green-600); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(var(--accent-rgb), .8);
  transition: color .2s;
}
.legal a:not(.link-arrow):hover { color: var(--green-900); }
.legal b { color: var(--green-900); font-weight: 700; }

.legal h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  scroll-margin-top: calc(var(--header-h) + 24px);
  margin-top: 46px;
}
.legal h2:first-child { margin-top: 0; }

.legal__intro {
  padding: 20px 24px;
  border-left: 3px solid var(--lime);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--white);
  font-size: 1.0625rem;
}
.legal__intro, .legal__intro p { color: var(--text); }

.legal__list { display: grid; gap: 12px; margin-top: 16px; }
.legal__list > li { position: relative; padding-left: 26px; }
.legal__list > li::before {
  content: ""; position: absolute;
  left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px var(--lime-tint);
}

/* Tables — wrapped in .table-scroll so narrow screens scroll the table, not the page */
.table-scroll { overflow-x: auto; margin-top: 20px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--white); }
.legal__table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 520px; }
.legal__table th, .legal__table td { padding: 13px 18px; text-align: left; vertical-align: top; }
.legal__table thead th {
  background: var(--lime-tint);
  color: var(--green-900);
  font-size: .6875rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  white-space: nowrap;
}
.legal__table tbody tr + tr { border-top: 1px solid var(--line-2); }
.legal__table td { color: var(--muted); line-height: 1.6; }
.legal__table tbody tr:hover { background: var(--paper); }

.legal__related {
  margin-top: 46px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .875rem;
}

/* ==========================================================================
   24. THANK-YOU PAGE + form plumbing
   ========================================================================== */
.thanks-badge {
  display: flex; align-items: flex-start; gap: 20px;
  max-width: 760px; margin-inline: auto;
  padding: clamp(24px, 3vw, 34px);
  background: var(--white);
  border: 1px solid var(--lime);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
.thanks-badge__tick {
  width: 54px; height: 54px; flex: none; border-radius: 50%;
  background: var(--lime); color: var(--green-900);
  display: grid; place-items: center;
  box-shadow: var(--sh-lime);
}
.thanks-badge__tick svg { width: 26px; height: 26px; }
.thanks-badge p { color: var(--muted); font-size: .9375rem; margin-top: 8px; }

/* Cards that are whole links (the "while you wait" row) */
a.card { display: block; }
a.card:hover .link-arrow { color: var(--green-600); gap: 12px; }

/* Spam trap: hidden from people, visible to bots. Never display: none —
   some bots skip fields that are display: none. */
.hp-field {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- 25. Responsive ---------- */
@media (max-width: 1120px) {
  .nav__link { padding: 9px 12px; font-size: .9rem; }
}

@media (max-width: 1040px) {
  .stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:nth-child(3n) { border-right: 0; }
  .stat:nth-child(-n+3) { border-bottom: 1px solid var(--green-line); }
  .index-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 1000px) {
  .nav, .header__cta .btn { display: none; }
  .burger { display: grid; margin-left: auto; }
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero .lead { max-width: none; }
  .split, .split--wide-left { grid-template-columns: 1fr; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slider__track > * { flex: 0 0 calc((100% - 22px) / 2); }
  .quote-card { grid-template-columns: 1fr; }
  .contact-row { grid-template-columns: 1fr; }
  .quickbar__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-split { grid-template-columns: 1fr; }
  .offer-split .offer-card { position: static; max-width: 420px; margin-inline: auto; }
  .hero__quals ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-layout { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc ol { grid-template-columns: 1fr 1fr; display: grid; column-gap: 14px; }
  .legal { max-width: none; }
}

@media (max-width: 760px) {
  :root { --gutter: 18px; }
  .topbar__left { display: none; }
  .topbar__inner { justify-content: center; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .index-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slider__track > * { flex: 0 0 100%; }
  .shelf__item { flex: 0 0 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bar { justify-content: center; text-align: center; }
  .footer__bar ul { justify-content: center; flex-wrap: wrap; gap: 16px; }
  .btn-row .btn { flex: 1 1 auto; }
  .acc__a p { padding-right: 8px; }
  .brand__logo { height: 36px; }
  .collage__badge { min-width: 150px; padding: 13px 18px; }
  .toc ol { grid-template-columns: 1fr; }
  .legal h2 { margin-top: 38px; }
  .legal__intro { padding: 16px 18px; }
  .thanks-badge { flex-direction: column; gap: 16px; }
}

@media (max-width: 460px) {
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-right: 1px solid var(--green-line); border-bottom: 1px solid var(--green-line); }
  .stat:nth-child(2n) { border-right: 0; }
  .index-row { grid-template-columns: 1fr; }
  .brand__logo { height: 32px; }
}

/* ---------- Automatic quote popup ---------- */
.quote-popup {
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center;
  padding: 24px;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.quote-popup.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.quote-popup__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 25, 20, .72);
  backdrop-filter: blur(5px);
}
.quote-popup__dialog {
  position: relative; z-index: 1;
  width: min(760px, 100%); max-height: min(90vh, 900px);
  overflow-y: auto;
  background: var(--white); border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
  transform: translateY(18px) scale(.98);
  transition: transform .3s ease;
}
.quote-popup.is-open .quote-popup__dialog { transform: translateY(0) scale(1); }
.quote-popup__close {
  position: absolute; right: 16px; top: 14px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--green-900);
  font-size: 28px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
}
.quote-popup__header { padding: 30px 34px 12px; }
.quote-popup__eyebrow {
  display: inline-block; margin-bottom: 8px; font-size: .72rem;
  font-weight: 800; letter-spacing: .12em; color: var(--green-600);
}
.quote-popup__header h2 { margin: 0 50px 7px 0; font-size: clamp(1.65rem, 4vw, 2.25rem); }
.quote-popup__header p { margin: 0; color: var(--muted); }
.quote-popup__form { padding: 8px 34px 34px; }
.quote-popup__form .quote-card__form { padding: 0; }
.quote-popup__form .form-note { margin-bottom: 0; }
body.popup-open { overflow: hidden; }
@media (max-width: 760px) {
  .quote-popup { padding: 10px; }
  .quote-popup__dialog { max-height: 94vh; border-radius: 18px; }
  .quote-popup__header { padding: 24px 20px 8px; }
  .quote-popup__form { padding: 8px 20px 24px; }
}

/* ==========================================================================
   26. SECTIONS CARRIED OVER FROM THE OLD SITE
   Discipline tags · institutions band · rating badge · offer ribbon ·
   footer trust badges. Built from the existing tokens so they sit inside the
   design system rather than beside it.
   ========================================================================== */

/* Discipline tags, under the services grid */
.tags {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; max-width: 880px; margin: 34px auto 0;
}
.tag {
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--lime-tint2); border: 1px solid var(--line);
  font-size: .8125rem; font-weight: 600; color: var(--green-800);
  transition: background-color .25s, border-color .25s, transform .25s var(--ease);
}
.tag:hover { background: var(--lime); border-color: var(--lime); transform: translateY(-2px); }

/* Trusted by leading institutions */
.inst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 640px; margin-inline: auto; }
.inst__item {
  text-align: center; padding: 32px 20px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  transition: border-color .3s, transform .3s var(--ease);
}
.inst__item:hover { border-color: var(--lime); transform: translateY(-3px); }
.inst__num {
  font-family: var(--font-serif); font-weight: 800; line-height: 1;
  font-size: clamp(2.1rem, 4.6vw, 2.9rem); color: var(--green-900);
}
.inst__num .suf { color: var(--lime-700); }
.inst__label { margin-top: 9px; font-size: .875rem; font-weight: 600; color: var(--muted); }

/* Rating badge above the testimonials */
.rating-badge {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 18px; width: fit-content;
  margin: 0 auto clamp(30px, 4vw, 44px);
  padding: 14px 26px; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-sm);
}
.rating-badge__score { font-family: var(--font-serif); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--green-900); }
.rating-badge__stars { color: var(--lime-700); letter-spacing: 2px; }
.rating-badge__text { font-size: .8125rem; color: var(--muted); }
.rating-badge__text b { color: var(--green-900); }
.rating-badge__sep { width: 1px; height: 26px; background: var(--line); }

/* Trust badges in the footer. Styled text, not logos — see README action items:
   only use the real marks once you have permission from each provider. */
.trust-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.trust-badge {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 9px 15px; border-radius: var(--r-sm);
  border: 1px solid rgba(var(--accent-rgb), .24);
  background: rgba(var(--accent-rgb), .06);
  transition: border-color .25s, background-color .25s;
}
.trust-badge:hover { border-color: var(--lime); background: rgba(var(--accent-rgb), .12); }
.trust-badge b { font-size: .8125rem; font-weight: 700; line-height: 1.2; color: var(--white); }
.trust-badge span { font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-dim); }

/* ==========================================================================
   27. REFERENCE-SITE SECTIONS
   Quick-quote bar · countdown offer card · partner tiles · institution logo
   wall · guarantee seal · testimonial ribbons · award badges · pay chips.
   ========================================================================== */

/* --- Quick-quote bar: the green strip directly under the hero ----------- */
/* Same green as the stats band directly below it, so the two read as one
   continuous block — exactly as they do in the reference. */
.quickbar { background: var(--green-900); padding: 26px 0 30px; }
.quickbar__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.quickbar .input, .quickbar .select { background: var(--white); border-color: transparent; padding: 13px 15px; }
.quickbar__actions { grid-column: 1 / -1; display: flex; justify-content: center; }
.quickbar .form-status { grid-column: 1 / -1; margin-top: 0; }

/* --- Stats band: icon on the left, figures beside it, as in the reference */
.stats .stat { display: flex; align-items: center; gap: 14px; text-align: left; }
.stat__ico { width: 34px; height: 34px; flex: none; color: var(--lime); }
.stat__ico svg { width: 34px; height: 34px; }
.stats .stat__num { font-size: 1.1875rem; }
.stats .stat__label { margin-top: 2px; font-size: .75rem; }

/* --- Hero: rating row --------------------------------------------------- */
.hero__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; }
.rating-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 18px; border-radius: 6px; background: #E2E6E0;
}
.rating-chip__stars { color: var(--lime-700); letter-spacing: 1.5px; font-size: 1.0625rem; line-height: 1; }
.rating-chip b { font-size: 1rem; color: var(--green-900); }
.hero__reviews { font-size: .8125rem; font-weight: 600; color: var(--green-900); line-height: 1.4; max-width: 13ch; }

/* --- Hero: "Top Qualified Professionals Online 24/7" -------------------- */
.hero__quals { margin-top: 26px; }
.hero__quals h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 16px; }
.hero__quals ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; }
.hero__quals li { display: flex; align-items: center; gap: 9px; font-size: .8125rem; color: var(--text); }
.qtick {
  width: 17px; height: 17px; flex: none; border-radius: 50%;
  background: var(--lime-700); color: var(--white);
  display: grid; place-items: center;
}
.qtick svg { width: 10px; height: 10px; }

/* --- CTA band: copy left, award medals right ---------------------------- */
.cta-split { display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; text-align: left; }
.cta-split__body { flex: 1 1 360px; }
.cta-split .btn-row { justify-content: flex-start; margin-top: 24px; }
/* Three medals, no gaps — the middle one is larger and sits on top of both
   neighbours, so they read as one cluster. */
.awards { display: flex; align-items: center; flex: none; gap: 0; }
.award, .award-main { position: relative; height: auto; transition: transform .3s var(--ease); }
.award { width: clamp(112px, 11.5vw, 152px); }
/* The middle medal is larger and pulled over both neighbours, so the three
   read as one cluster with no gaps. */
.award-main {
  width: clamp(132px, 13.5vw, 182px);
  margin-inline: -20px;
  z-index: 2;
}
.award:hover, .award-main:hover { transform: translateY(-5px) scale(1.05); z-index: 3; }

/* Plain white text with a dot, not a filled button — as in the reference. */
.btn--dot {
  background: none; border: 0; box-shadow: none; padding: 0;
  color: var(--white); font-weight: 700; gap: 11px;
}
.btn--dot::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--white); flex: none; }
.btn--dot:hover { color: var(--lime); transform: none; }
.btn--dot:hover::before { background: var(--lime); }

/* WhatsApp green, not brand green */
.btn--wa { background: #25D366; color: var(--white); box-shadow: 0 8px 20px -10px rgba(37, 211, 102, .8); }
.btn--wa:hover { background: #1FBF5A; }
.btn--wa svg { width: 18px; height: 18px; }

/* --- Offer card beside the services grid -------------------------------- */
.offer-split {
  display: grid; grid-template-columns: 372px minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 52px); align-items: start;
}
.offer-split .offer-card { max-width: none; margin: 0; }

/* --- Limited-time offer card, flip-clock countdown ---------------------- */
.offer-card {
  max-width: 420px; margin: 0 auto clamp(30px, 4vw, 46px);
  background: #F0F0F0; border: 0; border-radius: 8px;
  padding: 26px 24px 28px; text-align: center;
}
.offer-card__label { font-size: 1.125rem; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; color: #1C1C1C; }

.countdown { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: 18px 0 16px; }
.countdown__group { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.countdown__group > span { font-size: .625rem; color: #6C6C6C; letter-spacing: .03em; }
.countdown__digits { display: flex; gap: 4px; }
.flip {
  position: relative;
  width: 38px; height: 54px; border-radius: 4px;
  background: linear-gradient(#4E4E4E 0 50%, #2E2E2E 50% 100%);
  color: var(--white);
  font-weight: 700; font-size: 2rem; line-height: 54px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
.flip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.countdown__sep { font-size: 1.6rem; font-weight: 700; color: #2E2E2E; padding-bottom: 14px; }

.offer-card__save {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  font-size: 1.8rem; font-weight: 800; line-height: 1.1; color: #111;
}
.offer-card__save em { font-style: normal; background: var(--green-900); color: var(--white); padding: 1px 14px 4px; border-radius: 4px; }
.offer-card__sub { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: #2E2E2E; margin-top: 9px; }

.offer-card__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 20px; text-align: left; }
/* Three fields across a 372px card is tight, so the padding and type are
   stepped down and the placeholders are kept short. */
.offer-card__form .input, .offer-card__form .select {
  min-width: 0; width: 100%;
  background: var(--white); border: 1px solid #DCDCDC; border-radius: 4px;
  padding: 13px 9px; font-size: .6875rem;
  text-overflow: ellipsis;
}
.offer-card__form .input::placeholder { font-size: .6875rem; }
.offer-card__form .btn { grid-column: 1 / -1; border-radius: 4px; margin-top: 4px; }
.offer-card__form .form-status { grid-column: 1 / -1; }

/* --- Partner tiles: a bento grid, two of them double-width -------------- */
.partner-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.partner-tile {
  padding: 22px; border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .3s var(--ease);
}
.partner-tile:hover { transform: translateY(-4px); }
.partner-tile--wide { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
.partner-tile--wide > div { flex: 1 1 auto; }
.partner-tile__head { font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.partner-tile span { font-size: .8125rem; line-height: 1.55; display: block; }
.partner-tile__head + span { margin-top: 7px; }
.partner-tile__logo { max-width: 150px; max-height: 38px; width: auto; height: auto; object-fit: contain; object-position: left center; }
.partner-tile__logo--sq { max-width: 56px; max-height: 56px; }
.partner-tile__logo--aside { flex: none; max-width: 120px; max-height: 92px; opacity: .55; }

.partner-tile--light { background: var(--white); color: var(--green-900); }
.partner-tile--light span { color: var(--muted); }
.partner-tile--gold  { background: #FFC20E; color: #1A1A1A; }
.partner-tile--gold span { color: rgba(26, 26, 26, .82); }
.partner-tile--sky   { background: linear-gradient(135deg, #E2F1F5, #CFE7EE); color: #123A47; }
.partner-tile--sky span { color: #3C5F6B; }

/* --- Institution logo grids -------------------------------------------- */
.inst-logos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); }
.inst-logos figcaption {
  margin-bottom: 14px; text-align: center;
  font-size: .9375rem; font-weight: 700; color: var(--lime);
}
.inst-logos img { width: 100%; height: auto; border-radius: var(--r-md); }

/* --- Money-back guarantee band ----------------------------------------- */
.guarantee {gap:30px; display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: row;}
.guarantee__body {  text-align: left; }
.guarantee .btn-row { justify-content: left; margin-top: 20px; }
/* Sized so it holds one line beside the seal; it wraps again under 900px. */
.guarantee__body h2 { font-size: clamp(1.05rem, 1.7vw, 1.45rem); white-space: nowrap; text-wrap: nowrap; }
.seal { width: clamp(150px, 15vw, 186px); height: auto; flex: none; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35)); }

@media (max-width: 900px) {
  .guarantee { flex-wrap: wrap; justify-content: center; }
  .guarantee__body { text-align: center; }
  .guarantee .btn-row { justify-content: center; }
  .guarantee__body h2 { white-space: normal; text-wrap: balance; font-size: 1.3rem; }
}

/* --- Testimonial ribbon ------------------------------------------------ */
.tcard__ribbon {
  align-self: flex-start; margin-bottom: 13px;
  padding: 6px 15px; border-radius: var(--r-pill);
  background: var(--gold-tint); border: 1px solid var(--gold);
  font-size: .6875rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold-700);
}

/* --- Footer: review badges and the pale trust panel --------------------- */
.footer-reviews { display: flex; justify-content: center; gap: clamp(40px, 12vw, 150px); flex-wrap: wrap; padding: 30px 0 26px; }
.footer-reviews img { height: 100px; width: auto; }

.footer-panel {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
  background: rgba(255, 255, 255, .06);
  border-radius: 12px; padding: 20px 28px; margin-bottom: 26px;
}
.footer-panel__pay { max-width: 300px; height: auto; }
.footer-panel__mbg { display: flex; align-items: center; gap: 12px; max-width: 300px; }
.footer-panel__mbg img { width: 46px; height: auto; flex: none; }
.footer-panel__mbg p { font-size: .75rem; line-height: 1.45; color: var(--on-dark); }
.footer-panel__mbg a { color: var(--lime); text-decoration: underline; }
.footer-panel__dmca { height: 52px; width: auto; }

/* Quick-links column: a green chevron before each item, as in the reference */
.footer__links { display: grid; gap: 12px; }
.footer__links li a { display: inline-flex; align-items: baseline; gap: 9px; }
.footer__links li a::before { content: "\203A"; color: var(--lime); font-weight: 700; font-size: 1.0625rem; line-height: 1; }
.footer__copy { font-size: .8125rem; line-height: 1.6; margin-top: 22px; }
.footer__copy b { display: block; color: var(--white); }

/* Footer is now three columns and has no bottom bar. */
.footer { padding-bottom: 30px; }
.footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; padding-bottom: 8px; }

/* --- About: the supplied collage ---------------------------------------- */
.about-art img { width: 100%; height: auto; border-radius: 14px; }

/* --- Expert cards: photo on top, details beneath ------------------------ */
.expert__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 20%; display: block; }
.expert__top { display: block; padding: 16px 20px; }

/* ==========================================================================
   28. MOBILE
   Card grids that sit in 3 or 4 columns on desktop become swipeable
   carousels — `.m-carousel` in the markup. It is a CSS scroll-snap strip, so
   there is no JavaScript involved and the native touch scroll does the work.
   Everything else here just tightens the rhythm.
   This block is last in the file on purpose, so it wins.
   ========================================================================== */
@media (max-width: 760px) {

  /* Utilities used in the markup */
  .m-hide { display: none !important; }

  /* --- Any column grid → a swipeable strip ------------------------------- */
  .m-carousel {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-bottom: 16px;
    /* break out of the wrap so cards can bleed to the screen edge */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .m-carousel::-webkit-scrollbar { display: none; }
  .m-carousel > * {
    flex: 0 0 82%;          /* a sliver of the next card shows it can swipe */
    min-width: 0;
    scroll-snap-align: center;
  }
  .m-carousel > *::before { display: none; }   /* kill the .steps connector */
  .steps.m-carousel::before { display: none; }

  /* --- Rhythm: tighter sections, smaller headings ------------------------ */
  .section        { padding: 42px 0; }
  .section--tight { padding: 30px 0; }
  .section-head   { margin-bottom: 24px; }
  .section-head .lead { margin-top: 10px; }
  .h-display { font-size: 1.9rem; }
  .h2        { font-size: 1.45rem; }
  .hero      { padding-top: 30px; }

  /* --- Hero ------------------------------------------------------------- */
  .hero__rating { gap: 12px; }
  .hero__quals ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* --- Contact: straight to the form ------------------------------------
     The aside's four promises restate the section lead just above it.      */
  .quote-card__aside { display: none; }

  /* --- Stats: four numbers, not six ------------------------------------- */
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(n+5) { display: none; }
  .stat { border-right: 1px solid var(--green-line); border-bottom: 1px solid var(--green-line); }
  .stat:nth-child(2n)  { border-right: 0; }
  .stat:nth-child(n+3) { border-bottom: 0; }

  /* --- About: the check-list is trimmed, the collage stays -------------- */
  .check-list li:nth-child(n+3) { display: none; }

  /* --- FAQ: the four that actually get asked ---------------------------- */
  .acc__item:nth-child(n+5) { display: none; }

  /* --- Footer ------------------------------------------------------------ */
  .footer { padding-top: 40px; }
  .footer__grid { gap: 26px; }
  .footer-reviews { gap: 34px; padding: 22px 0 18px; }
  .footer-reviews img { height: 46px; }
  .footer-panel { padding: 18px 20px; justify-content: center; text-align: center; }
  .footer-panel__mbg { text-align: left; }
  .footer-panel__dmca { height: 42px; }

  /* --- Carried-over sections -------------------------------------------- */
  .tags { margin-top: 26px; gap: 8px; }
  .tag:nth-child(n+11) { display: none; }   /* 10 disciplines, not 18 */
  .tag { padding: 7px 13px; font-size: .75rem; }
  .quickbar__form { grid-template-columns: minmax(0, 1fr); }
  .inst-logos { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rating-badge { padding: 12px 18px; gap: 8px 12px; }
  .rating-badge__sep { display: none; }

  /* Our Services: the offer card sits above, then the cards swipe. */
  .offer-split { gap: 30px; }
  .offer-split .section-head { text-align: center; margin-inline: auto; }
  .offer-card { padding: 22px 18px 24px; }
  .offer-card__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .offer-card__form .input, .offer-card__form .select { padding: 14px 11px; font-size: .8125rem; }
  .flip { width: 34px; height: 48px; font-size: 1.7rem; line-height: 48px; }

  /* Partner: wide tiles stack, and the aside logo stops dominating. */
  .partner-tile--wide { flex-direction: column; align-items: flex-start; }
  .partner-tile__logo--aside { max-width: 86px; max-height: 60px; align-self: flex-end; margin-top: -8px; }

  /* Awards + seal stay clustered, just smaller. */
  .cta-split { justify-content: center; text-align: center; }
  .cta-split .btn-row { justify-content: center; }
  .award { width: 92px; }
  .award-main { width: 112px; margin-inline: -14px; }
  .seal { width: 132px; }

  /* Cards in a swipe strip need a floor, or long copy squashes them. */
  .m-carousel .card,
  .m-carousel .expert,
  .m-carousel .partner-tile { height: 100%; }
  .m-carousel .step p { max-width: none; }
}