/* ==========================================================================
   WritersHub Plus — Design System
   Apple-inspired foundations: optical typography, restrained depth,
   translucent chrome, spring motion, and full reduced-motion support.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand ------------------------------------------------------------------ */
  --brand-50:  #eef4ff;
  --brand-100: #d8e2ff;
  --brand-200: #b6c9fb;
  --brand-300: #86a6f2;
  --brand-400: #4f7fe0;
  --brand-500: #1f5cc4;
  --brand-600: #00408e;  /* primary — WritersHub blue */
  --brand-700: #003273;
  --brand-800: #002554;
  --brand-900: #001a3c;

  --accent-50:  #fff3ed;
  --accent-100: #ffe0d1;
  --accent-300: #ffab84;
  --accent-500: #ff6b35;  /* accent — WritersHub orange */
  --accent-600: #e2531e;
  --accent-700: #b53f13;

  --career-50:  #e6f4f1;
  --career-100: #cfeae5;
  --career-500: #00806f;
  --career-600: #006b5f;  /* career teal */
  --career-700: #00524a;

  /* Neutrals --------------------------------------------------------------- */
  --ink-900: #0b1220;
  --ink-800: #131b2b;
  --ink-700: #253044;
  --ink-600: #3d4861;
  --ink-500: #5a6580;
  --ink-400: #7d879e;
  --ink-300: #a8b1c4;
  --ink-200: #d2d8e4;
  --ink-100: #e7ebf3;
  --ink-50:  #f2f5fa;

  /* Semantic --------------------------------------------------------------- */
  --bg:             #ffffff;
  --bg-subtle:      #f7f9fc;
  --bg-sunken:      #eef2f8;
  --surface:        #ffffff;
  --text:           var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-500);
  --text-inverse:   #ffffff;
  --border:         #e3e8f0;
  --border-strong:  #cdd5e2;
  --focus:          #ff6b35;

  /* Type ------------------------------------------------------------------- */
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing (4px base) ----------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

  /* Section rhythm scales with viewport; rem so it grows with text size. */
  --section-y: clamp(3.5rem, 7vw, 7rem);
  --section-y-tight: clamp(2.5rem, 5vw, 4.5rem);

  /* Layout ----------------------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1320px;
  --container-prose: 46rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 68px;

  /* Radii ------------------------------------------------------------------ */
  --r-xs: 8px;  --r-sm: 10px;  --r-md: 14px;
  --r-lg: 20px; --r-xl: 26px;  --r-2xl: 34px; --r-full: 999px;

  /* Elevation — layered and low-contrast, never muddy ---------------------- */
  --sh-xs: 0 1px 2px rgba(11, 18, 32, 0.04), 0 1px 1px rgba(11, 18, 32, 0.03);
  --sh-sm: 0 2px 6px rgba(11, 18, 32, 0.05), 0 1px 2px rgba(11, 18, 32, 0.04);
  --sh-md: 0 8px 24px rgba(11, 18, 32, 0.07), 0 2px 6px rgba(11, 18, 32, 0.04);
  --sh-lg: 0 18px 48px rgba(11, 18, 32, 0.10), 0 4px 12px rgba(11, 18, 32, 0.05);
  --sh-xl: 0 32px 80px rgba(11, 18, 32, 0.14), 0 8px 20px rgba(11, 18, 32, 0.06);
  --sh-brand:  0 12px 32px rgba(0, 64, 142, 0.22);
  --sh-accent: 0 12px 32px rgba(255, 107, 53, 0.26);
  --sh-career: 0 12px 32px rgba(0, 107, 95, 0.22);

  /* Motion — springs for anything the user touches ------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-instant: 100ms;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  /* Nothing may ever push the page sideways. */
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Visible, consistent focus for keyboard users only. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

.wh-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wh-skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -130%);
  z-index: 200; background: var(--brand-600); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600; font-size: 0.9375rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.wh-skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   3. Typography — tracking and leading are size-specific, never global
   -------------------------------------------------------------------------- */
.wh-display {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  line-height: 1.04; letter-spacing: -0.028em; font-weight: 800;
}
.wh-h1 {
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.25rem);
  line-height: 1.07; letter-spacing: -0.024em; font-weight: 800;
}
.wh-h2 {
  font-size: clamp(1.625rem, 1.15rem + 1.9vw, 2.5rem);
  line-height: 1.14; letter-spacing: -0.018em; font-weight: 700;
}
.wh-h3 {
  font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.25; letter-spacing: -0.011em; font-weight: 700;
}
.wh-h4 {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.35; letter-spacing: -0.005em; font-weight: 700;
}
.wh-lead {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.55; letter-spacing: -0.006em; font-weight: 400;
  color: var(--text-secondary);
}
.wh-body    { font-size: 1rem;      line-height: 1.68; letter-spacing: 0;       color: var(--text-secondary); }
.wh-body-sm { font-size: 0.9375rem; line-height: 1.62; letter-spacing: 0.002em; color: var(--text-secondary); }
.wh-caption { font-size: 0.8125rem; line-height: 1.5;  letter-spacing: 0.01em;  color: var(--text-muted); }

/* Eyebrow — small text gets positive tracking so it stays legible. */
.wh-eyebrow {
  display: inline-block;
  font-size: 0.75rem; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: var(--sp-4);
}
.wh-eyebrow--accent  { color: var(--accent-600); }
.wh-eyebrow--career  { color: var(--career-600); }
.wh-eyebrow--on-dark { color: var(--brand-200); }

.wh-text-brand  { color: var(--brand-600); }
.wh-text-accent { color: var(--accent-600); }
.wh-text-career { color: var(--career-600); }
.wh-text-muted  { color: var(--text-muted); }
.wh-balance { text-wrap: balance; }
.wh-pretty  { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wh-container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}
.wh-container--wide  { max-width: var(--container-wide); }
.wh-container--prose { max-width: var(--container-prose); }

.wh-section { padding-block: var(--section-y); }
.wh-section--tight  { padding-block: var(--section-y-tight); }
.wh-section--subtle { background: var(--bg-subtle); }
.wh-section--sunken { background: var(--bg-sunken); }

.wh-section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.wh-section-head--center { margin-inline: auto; text-align: center; }
.wh-section-head > * + * { margin-top: var(--sp-4); }

.wh-stack   { display: flex; flex-direction: column; gap: var(--sp-4); }
.wh-stack-6 { display: flex; flex-direction: column; gap: var(--sp-6); }
.wh-cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.wh-grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.wh-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.wh-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.wh-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

/* A true split that collapses cleanly rather than squeezing. */
.wh-split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .wh-split { grid-template-columns: 1fr 1fr; }
  .wh-split--wide-left  { grid-template-columns: 1.1fr 0.9fr; }
  .wh-split--wide-right { grid-template-columns: 0.9fr 1.1fr; }
  .wh-split--flip > :first-child { order: 2; }
}

.wh-divider { height: 1px; border: 0; background: var(--border); }

/* --------------------------------------------------------------------------
   5. Buttons — feedback lands on pointer-down, not on release
   -------------------------------------------------------------------------- */
.wh-btn {
  --btn-bg: var(--brand-600);
  --btn-fg: #fff;
  --btn-border: transparent;
  --btn-shadow: var(--sh-brand);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 0.875rem 1.5rem;
  min-height: 48px;
  border: 1px solid var(--btn-border);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.005em;
  line-height: 1; text-align: center;
  cursor: pointer;
  box-shadow: var(--btn-shadow);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.wh-btn:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.wh-btn:active { transform: translateY(0) scale(0.97); transition-duration: var(--dur-instant); }

.wh-btn--primary { --btn-bg: var(--brand-600); }
.wh-btn--primary:hover { background: var(--brand-500); }

.wh-btn--accent { --btn-bg: var(--accent-500); --btn-shadow: var(--sh-accent); }
.wh-btn--accent:hover { background: var(--accent-600); }

.wh-btn--career { --btn-bg: var(--career-600); --btn-shadow: var(--sh-career); }
.wh-btn--career:hover { background: var(--career-500); }

.wh-btn--secondary {
  --btn-bg: #fff; --btn-fg: var(--brand-600);
  --btn-border: var(--border-strong); --btn-shadow: var(--sh-xs);
}
.wh-btn--secondary:hover { background: var(--brand-50); border-color: var(--brand-300); }

.wh-btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-shadow: none;
  --btn-border: transparent;
}
.wh-btn--ghost:hover { background: var(--ink-50); box-shadow: none; }

/* On a dark/brand background. */
.wh-btn--on-dark {
  --btn-bg: #fff; --btn-fg: var(--brand-700);
  --btn-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
.wh-btn--on-dark:hover { background: var(--brand-50); }

.wh-btn--outline-light {
  --btn-bg: transparent; --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.45); --btn-shadow: none;
}
.wh-btn--outline-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; box-shadow: none; }

.wh-btn--lg { padding: 1.0625rem 2rem; min-height: 56px; font-size: 1rem; }
.wh-btn--sm { padding: 0.625rem 1.125rem; min-height: 40px; font-size: 0.875rem; }
.wh-btn--block { display: flex; width: 100%; }

/* Text link that reads as an action. */
.wh-link {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-weight: 700; font-size: 0.9375rem; color: var(--brand-600);
  transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wh-link:hover { gap: 0.625rem; color: var(--brand-500); }
.wh-link--accent { color: var(--accent-600); }
.wh-link--accent:hover { color: var(--accent-500); }
.wh-link--career { color: var(--career-600); }
.wh-link--career:hover { color: var(--career-500); }

/* Inline prose links stay underlined so they are identifiable without colour. */
.wh-prose a, .wh-inline-link {
  color: var(--brand-600); font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--brand-600) 35%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wh-prose a:hover, .wh-inline-link:hover {
  color: var(--brand-500); text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   6. Icons
   -------------------------------------------------------------------------- */
/* Icons are inline <svg> referencing a per-page <symbol> sprite, so there is
   no icon web font to download and no ligature text can ever flash in.
   Size is driven by font-size, which keeps every existing size rule working
   and lets icons scale with surrounding type. */
.wh-i {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.135em;
  fill: currentColor;
  flex-shrink: 0;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
/* The sprite itself never renders. */
.wh-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wh-icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 3rem; height: 3rem;
  border-radius: var(--r-md);
  background: var(--brand-50); color: var(--brand-600);
  transition: transform var(--dur-base) var(--ease-spring),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.wh-icon-badge .wh-i { font-size: 26px; }
.wh-icon-badge--lg { width: 3.75rem; height: 3.75rem; border-radius: var(--r-lg); }
.wh-icon-badge--lg .wh-i { font-size: 32px; }
.wh-icon-badge--solid { background: var(--brand-600); color: #fff; box-shadow: var(--sh-brand); }
.wh-icon-badge--accent { background: var(--accent-50); color: var(--accent-600); }
.wh-icon-badge--accent-solid { background: var(--accent-500); color: #fff; box-shadow: var(--sh-accent); }
.wh-icon-badge--career { background: var(--career-50); color: var(--career-600); }
.wh-icon-badge--career-solid { background: var(--career-600); color: #fff; box-shadow: var(--sh-career); }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.wh-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.wh-card > * + * { margin-top: var(--sp-3); }
.wh-card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--border-strong);
}
.wh-card--interactive:hover .wh-icon-badge { transform: scale(1.06); }
.wh-card--interactive:active { transform: translateY(-1px) scale(0.995); transition-duration: var(--dur-instant); }
.wh-card--flat { box-shadow: none; }
.wh-card--subtle { background: var(--bg-subtle); box-shadow: none; }
.wh-card--pad-lg { padding: clamp(1.75rem, 3vw, 2.75rem); }

/* Card whose whole surface is clickable via a stretched link. */
.wh-card--link { cursor: pointer; }
.wh-stretched-link::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}

.wh-card__title { margin-top: var(--sp-5); }
.wh-card__foot { margin-top: auto; padding-top: var(--sp-5); }

/* Feature list inside cards. */
.wh-checklist { display: flex; flex-direction: column; gap: var(--sp-3); }
.wh-checklist li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: 0.9375rem; line-height: 1.55; color: var(--text-secondary);
}
.wh-checklist li .wh-i {
  font-size: 20px; color: var(--brand-600); flex-shrink: 0; margin-top: 0.15em;
}
.wh-checklist--accent li .wh-i { color: var(--accent-600); }
.wh-checklist--career li .wh-i { color: var(--career-600); }
.wh-checklist--on-dark li { color: rgba(255, 255, 255, 0.82); }
.wh-checklist--on-dark li .wh-i { color: var(--brand-200); }

/* Pill / tag. */
.wh-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-full);
  background: var(--brand-50); color: var(--brand-700);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2;
}
.wh-pill--accent { background: var(--accent-50); color: var(--accent-700); }
.wh-pill--career { background: var(--career-50); color: var(--career-700); }
.wh-pill--neutral { background: var(--ink-50); color: var(--ink-600); }
.wh-pill--on-dark { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Media inside cards — images keep their aspect and never overflow. */
.wh-media {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-sunken);
}
.wh-media > img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.wh-media--4x3 { aspect-ratio: 4 / 3; }
.wh-media--16x9 { aspect-ratio: 16 / 9; }
.wh-media--3x2 { aspect-ratio: 3 / 2; }
.wh-media--square { aspect-ratio: 1 / 1; }
.wh-card--interactive:hover .wh-media > img,
.wh-media--zoom:hover > img { transform: scale(1.04); }

/* Framed showcase image (hero art, about art). */
.wh-frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--bg-sunken);
}
.wh-frame > img { width: 100%; }
.wh-frame--ring { border: 1px solid rgba(255, 255, 255, 0.6); }

/* --------------------------------------------------------------------------
   8. Stats, steps, quotes
   -------------------------------------------------------------------------- */
.wh-stat { text-align: center; }
.wh-stat__value {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  line-height: 1; letter-spacing: -0.03em; font-weight: 800;
  color: var(--brand-600);
}
.wh-stat__label {
  margin-top: var(--sp-2);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-muted); line-height: 1.4;
}
.wh-stat--accent .wh-stat__value { color: var(--accent-500); }
.wh-stat--career .wh-stat__value { color: var(--career-600); }
.wh-stat--on-dark .wh-stat__value { color: #fff; }
.wh-stat--on-dark .wh-stat__label { color: rgba(255, 255, 255, 0.66); }

/* Numbered process steps with a connecting rule on wide screens. */
.wh-steps { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); position: relative; }
@media (min-width: 860px) {
  .wh-steps--4 { grid-template-columns: repeat(4, 1fr); }
  .wh-steps--3 { grid-template-columns: repeat(3, 1fr); }
}
.wh-step { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); }
.wh-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; flex-shrink: 0;
  border-radius: var(--r-full);
  background: #fff; border: 1.5px solid var(--brand-200); color: var(--brand-600);
  font-size: 1rem; font-weight: 800; letter-spacing: -0.01em;
  box-shadow: var(--sh-xs);
  position: relative; z-index: 1;
}
.wh-step--done .wh-step__num { background: var(--brand-600); border-color: var(--brand-600); color: #fff; box-shadow: var(--sh-brand); }
/* Connector sits behind the numbers and stops at the last step. */
@media (min-width: 860px) {
  .wh-step:not(:last-child)::before {
    content: ""; position: absolute;
    top: 1.5rem; left: 3rem; right: calc(-1 * clamp(1.5rem, 3vw, 2.5rem));
    height: 1.5px;
    background: linear-gradient(to right, var(--brand-200), var(--brand-100));
  }
}

.wh-quote {
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}
.wh-quote__mark { font-size: 34px; color: var(--brand-300); line-height: 1; }
.wh-quote__text { font-size: 1.0625rem; line-height: 1.6; color: var(--text); font-style: italic; letter-spacing: -0.004em; }
.wh-quote__cite { display: flex; flex-direction: column; gap: 0.125rem; margin-top: auto; font-style: normal; }
.wh-quote__name { font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.wh-quote__role { font-size: 0.8125rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.wh-hero {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(90rem 42rem at 50% -32%, var(--brand-50) 0%, rgba(247, 249, 252, 0) 62%),
    linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
  overflow: hidden;
  isolation: isolate;
}
/* Optional paper texture layer — decorative only. */
.wh-hero__texture {
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--hero-texture, none);
  background-size: cover; background-position: center;
  opacity: 0.06; pointer-events: none;
}
/* Soft colour blooms; large, slow, and semi-transparent so they never distract. */
.wh-hero__glow {
  position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(80px); opacity: 0.5; pointer-events: none;
}
.wh-hero__glow--brand  { width: 30rem; height: 30rem; top: -12rem; right: -10rem; background: rgba(0, 64, 142, 0.14); }
.wh-hero__glow--accent { width: 26rem; height: 26rem; bottom: -14rem; left: -10rem; background: rgba(255, 107, 53, 0.12); }

.wh-hero__inner { position: relative; z-index: 1; }
.wh-hero__title { margin-bottom: var(--sp-5); }
.wh-hero__lead { max-width: 38rem; }
.wh-hero__actions { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Compact page header for interior pages. */
.wh-pagehead {
  position: relative;
  padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(2.25rem, 4vw, 3.5rem);
  background:
    radial-gradient(70rem 34rem at 50% -40%, var(--brand-50) 0%, rgba(247, 249, 252, 0) 60%),
    var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.wh-pagehead__inner { position: relative; z-index: 1; max-width: 52rem; }
.wh-pagehead--center .wh-pagehead__inner { margin-inline: auto; text-align: center; }
.wh-pagehead__lead { margin-top: var(--sp-5); }
.wh-pagehead__actions { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.wh-pagehead--center .wh-pagehead__actions { justify-content: center; }

/* Trust strip. */
.wh-trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-8);
  margin-top: var(--sp-8); padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.wh-trust__item {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 0.875rem; font-weight: 600; color: var(--text-secondary);
}
.wh-trust__item .wh-i { font-size: 20px; color: var(--brand-600); }

/* --------------------------------------------------------------------------
   10. Banner / CTA band
   -------------------------------------------------------------------------- */
.wh-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-600) 45%, var(--brand-500) 100%);
  color: #fff;
}
.wh-cta::before,
.wh-cta::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.wh-cta::before {
  width: 34rem; height: 34rem; top: -17rem; right: -12rem;
  background: rgba(255, 255, 255, 0.07);
}
.wh-cta::after {
  width: 28rem; height: 28rem; bottom: -16rem; left: -10rem;
  background: rgba(255, 107, 53, 0.16);
}
.wh-cta__inner { position: relative; z-index: 1; text-align: center; max-width: 46rem; margin-inline: auto; }
.wh-cta__title { color: #fff; }
.wh-cta__lead { color: rgba(255, 255, 255, 0.82); margin-top: var(--sp-4); }
.wh-cta__actions {
  margin-top: var(--sp-10); display: flex; flex-wrap: wrap;
  gap: var(--sp-3); justify-content: center;
}
.wh-cta__note { margin-top: var(--sp-6); color: rgba(255, 255, 255, 0.62); font-size: 0.875rem; }

/* Inline "next step" band on a light background. */
.wh-callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
}
.wh-callout__text { flex: 1 1 20rem; }
.wh-callout__text > * + * { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   11. Prose (long-form SEO / policy content)
   -------------------------------------------------------------------------- */
.wh-prose { max-width: var(--container-prose); color: var(--text-secondary); }
.wh-prose > * + * { margin-top: 1.25em; }
.wh-prose h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.18; letter-spacing: -0.018em; font-weight: 700;
  color: var(--text); margin-top: 2em;
}
.wh-prose h3 {
  font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
  line-height: 1.3; letter-spacing: -0.01em; font-weight: 700;
  color: var(--text); margin-top: 1.75em;
}
.wh-prose h4 { font-size: 1.0625rem; font-weight: 700; color: var(--text); margin-top: 1.5em; }
.wh-prose > :first-child { margin-top: 0; }
.wh-prose p { line-height: 1.72; }
.wh-prose ul, .wh-prose ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.6em; }
.wh-prose ul { list-style: disc; }
.wh-prose ol { list-style: decimal; }
.wh-prose li { line-height: 1.68; padding-left: 0.25rem; }
.wh-prose li::marker { color: var(--brand-400); }
.wh-prose strong { color: var(--text); font-weight: 700; }
.wh-prose--wide { max-width: 58rem; }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.wh-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.wh-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.wh-field__label {
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.005em;
  color: var(--text);
}
.wh-field__hint { font-size: 0.8125rem; color: var(--text-muted); }
.wh-field__req { color: var(--accent-600); }

.wh-input, .wh-select, .wh-textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  min-height: 50px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 1rem; line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
  appearance: none;
}
.wh-input::placeholder, .wh-textarea::placeholder { color: var(--ink-400); }
.wh-input:hover, .wh-select:hover, .wh-textarea:hover { border-color: var(--ink-300); }
.wh-input:focus, .wh-select:focus, .wh-textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(0, 64, 142, 0.14);
}
.wh-textarea { min-height: 8.5rem; resize: vertical; }

.wh-select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235a6580' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.wh-field-row { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .wh-field-row--2 { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   13. Accordion (FAQ / expandable service detail)
   -------------------------------------------------------------------------- */
.wh-accordion { display: flex; flex-direction: column; gap: var(--sp-3); }
.wh-ac {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.wh-ac[open] { border-color: var(--brand-200); box-shadow: var(--sh-sm); }
.wh-ac__summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: 1.125rem clamp(1rem, 2vw, 1.5rem);
  cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 700; line-height: 1.4;
  letter-spacing: -0.005em; color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.wh-ac__summary::-webkit-details-marker { display: none; }
.wh-ac__summary:hover { background: var(--bg-subtle); }
/* Chevron drawn from a masked SVG so it still takes currentColor and needs
   no icon font. */
.wh-ac__summary::after {
  content: "";
  width: 24px; height: 24px; flex-shrink: 0;
  background: var(--brand-600);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform var(--dur-base) var(--ease-out);
}
/* If masking is unsupported the square fill would read as a bug, so fall back
   to no marker at all — <details> still communicates its state by opening. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .wh-ac__summary::after { display: none; }
}
.wh-ac[open] .wh-ac__summary::after { transform: rotate(180deg); }
.wh-ac__body {
  padding: 0 clamp(1rem, 2vw, 1.5rem) 1.25rem;
  color: var(--text-secondary); line-height: 1.68; font-size: 0.9375rem;
}
.wh-ac__body > * + * { margin-top: 0.75em; }

/* --------------------------------------------------------------------------
   14. Tables (pricing / comparison) — scroll inside their own container
   -------------------------------------------------------------------------- */
.wh-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.wh-table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.wh-table th, .wh-table td {
  padding: 0.9375rem 1.25rem; text-align: left;
  font-size: 0.9375rem; line-height: 1.5;
  border-bottom: 1px solid var(--border);
}
.wh-table thead th {
  background: var(--bg-subtle);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}
.wh-table tbody tr:last-child th, .wh-table tbody tr:last-child td { border-bottom: 0; }
.wh-table tbody th { font-weight: 700; color: var(--text); }
.wh-table td { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   15. Notice bar
   -------------------------------------------------------------------------- */
.wh-notice {
  background: var(--brand-800); color: #fff;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
  text-align: center; padding: 0.5rem var(--gutter);
  line-height: 1.45;
}
.wh-notice a { text-decoration: underline; text-underline-offset: 0.15em; }

/* --------------------------------------------------------------------------
   16. Scroll reveal — opacity + a short lift, never a long slide
   -------------------------------------------------------------------------- */
/* Gated on .wh-js: without JavaScript nothing is ever hidden.

   The lift uses the independent `translate` property rather than `transform`.
   Reveal and hover both want to move an element, and as `transform` the reveal
   rule won on specificity and silently killed the hover lift on every card
   that reveals -- which is nearly all of them. Kept on separate properties,
   the two compose instead of competing. */
.wh-js [data-reveal] {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 620ms var(--ease-out), translate 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, translate;
}
.wh-js [data-reveal].is-revealed { opacity: 1; translate: none; }

/* --------------------------------------------------------------------------
   17. Accessibility preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Reveals become an instant presence, not a slide. */
  .wh-js [data-reveal] { opacity: 1; translate: none; transition: none; }
  .wh-btn:hover, .wh-card--interactive:hover { transform: none; }
  .wh-media > img { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .wh-header__bar { background: #fff !important; backdrop-filter: none !important; }
  .wh-mobilenav__panel { background: #fff !important; backdrop-filter: none !important; }
  .wh-nav__menu { background: #fff !important; backdrop-filter: none !important; }
}

@media (prefers-contrast: more) {
  :root { --border: #9aa4b8; --border-strong: #6b7488; --text-secondary: #1d2637; --text-muted: #333d52; }
  .wh-card, .wh-quote, .wh-table-wrap, .wh-ac { border-width: 1.5px; }
  .wh-header__bar { background: #fff; backdrop-filter: none; border-bottom-color: var(--border-strong); }
  .wh-btn--secondary { border-width: 2px; }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */
@media print {
  .wh-header, .wh-mobilenav, .wh-notice, .wh-cta, .wh-skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal] { opacity: 1 !important; translate: none !important; }
}

/* ==========================================================================
   19. Header — a translucent layer content scrolls beneath
   ========================================================================== */
.wh-header {
  position: sticky; top: 0; z-index: 100;
  /* The bar itself paints the material; the wrapper stays transparent. */
}
.wh-header__bar {
  position: relative;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
/* Scroll edge effect: the separation appears only once content passes under. */
.wh-header.is-stuck .wh-header__bar {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 20px rgba(11, 18, 32, 0.06);
}

/* Three tracks with equal outer columns, so the navigation is centred on the
   bar itself rather than on whatever space the logo and actions leave over.
   The inner element is also the positioning context for the mega menu, which
   is how that panel is kept inside the site width. */
/* Equal outer tracks, so the middle track is centred on the bar itself and the
   navigation sits dead centre regardless of how wide the logo or the action
   buttons happen to be. The inner element is also the positioning context for
   the mega menu, which is how that panel is kept inside the site width. */
.wh-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  height: var(--header-h);
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wh-logo { grid-column: 1; display: flex; align-items: center; justify-self: start; }
.wh-logo img {
  /* Intrinsic 1024x273; height drives it and width stays auto so the
     aspect ratio can never be stretched. */
  height: 34px;
  width: auto;
  aspect-ratio: 1024 / 273;
  object-fit: contain;
  transition: transform var(--dur-base) var(--ease-spring);
}
.wh-logo:hover img { transform: scale(1.03); }
@media (min-width: 640px) { .wh-logo img { height: 38px; } }

/* Desktop navigation ------------------------------------------------------ */
.wh-nav { display: none; }
.wh-header__actions { grid-column: 3; justify-self: end; }

@media (min-width: 1024px) {
  .wh-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    grid-column: 2;
    min-width: 0;
  }
}

.wh-nav__item { position: relative; }
/* The mega panel resolves against .wh-header__inner instead, so it is bounded
   by the site container no matter where its trigger sits. */
.wh-nav__item--mega { position: static; }

.wh-nav__link,
.wh-nav__trigger {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 0; background: none;
  border-radius: var(--r-sm);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.003em;
  color: var(--text-secondary);
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.wh-nav__link:hover,
.wh-nav__trigger:hover { color: var(--brand-600); background: var(--brand-50); }
.wh-nav__link:active,
.wh-nav__trigger:active { transform: scale(0.97); transition-duration: var(--dur-instant); }

/* Active page — colour plus an underline, so it does not rely on hue alone. */
.wh-nav__link[aria-current="page"],
.wh-nav__item.is-active > .wh-nav__trigger {
  color: var(--brand-700); font-weight: 700;
}
.wh-nav__link[aria-current="page"]::after,
.wh-nav__item.is-active > .wh-nav__trigger::after {
  content: ""; position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: -0.4rem; height: 2px;
  border-radius: var(--r-full);
  background: var(--accent-500);
}
.wh-nav__item.is-active > .wh-nav__trigger::after { right: 1.9rem; }

.wh-nav__chev {
  font-size: 18px;
  transition: transform var(--dur-base) var(--ease-out);
}
.wh-nav__trigger[aria-expanded="true"] .wh-nav__chev { transform: rotate(180deg); }

/* Dropdown — anchored to its trigger, so it grows out of what opened it. */
.wh-nav__menu {
  position: absolute; top: calc(100% + 0.5rem); left: 0;
  min-width: 15rem;
  padding: var(--sp-2);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  transform-origin: top left;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.wh-nav__item.is-open > .wh-nav__menu {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-spring),
              visibility 0s;
}
.wh-nav__menu a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0.625rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem; font-weight: 600;
  color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wh-nav__menu a:hover { background: var(--brand-50); color: var(--brand-700); }
.wh-nav__menu a[aria-current="page"] { color: var(--brand-700); background: var(--brand-50); }
.wh-nav__menu a .wh-i { font-size: 20px; color: var(--brand-500); flex-shrink: 0; }
.wh-nav__menu hr { height: 1px; border: 0; background: var(--border); margin: var(--sp-2) 0.5rem; }
.wh-nav__menu .is-feature { color: var(--brand-700); font-weight: 700; }

/* Header actions ---------------------------------------------------------- */
.wh-header__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

.wh-header__login {
  display: none; align-items: center; gap: 0.375rem;
  padding: 0.5rem 0.75rem; border-radius: var(--r-sm);
  font-size: 0.9375rem; font-weight: 700;
  color: var(--accent-600);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wh-header__login:hover { background: var(--accent-50); color: var(--accent-700); }
.wh-header__login .wh-i { font-size: 20px; }
@media (min-width: 768px) { .wh-header__login { display: inline-flex; } }

.wh-header__cta { padding: 0.6875rem 1.25rem; min-height: 42px; font-size: 0.875rem; box-shadow: none; }
.wh-header__cta:hover { box-shadow: var(--sh-brand); }

/* Hamburger — an animated, accessible toggle. */
.wh-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.7);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.wh-burger:hover { background: #fff; border-color: var(--border-strong); }
.wh-burger:active { transform: scale(0.94); transition-duration: var(--dur-instant); }
@media (min-width: 1024px) { .wh-burger { display: none; } }

.wh-burger__box { position: relative; width: 20px; height: 14px; }
.wh-burger__box span {
  position: absolute; left: 0; width: 100%; height: 2px;
  border-radius: var(--r-full); background: var(--text);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.wh-burger__box span:nth-child(1) { top: 0; }
.wh-burger__box span:nth-child(2) { top: 6px; }
.wh-burger__box span:nth-child(3) { top: 12px; }
.wh-burger[aria-expanded="true"] .wh-burger__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.wh-burger[aria-expanded="true"] .wh-burger__box span:nth-child(2) { opacity: 0; }
.wh-burger[aria-expanded="true"] .wh-burger__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   20. Mobile navigation — enters and leaves along the same path
   ========================================================================== */
.wh-mobilenav {
  position: fixed; inset: 0; z-index: 150;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-base);
}
.wh-mobilenav.is-open { visibility: visible; transition-delay: 0s; }

.wh-mobilenav__scrim {
  position: absolute; inset: 0;
  background: rgba(11, 18, 32, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.wh-mobilenav.is-open .wh-mobilenav__scrim { opacity: 1; }

.wh-mobilenav__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(22rem, 88vw);
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--sh-xl);
  /* Slides in from the right and dismisses back to the right. */
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overscroll-behavior: contain;
}
.wh-mobilenav.is-open .wh-mobilenav__panel { transform: translateX(0); }

.wh-mobilenav__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 var(--sp-5); height: var(--header-h);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.wh-mobilenav__head img { height: 34px; width: auto; }
.wh-mobilenav__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border: 1px solid var(--border); background: #fff;
  border-radius: var(--r-sm); cursor: pointer; color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.wh-mobilenav__close:hover { background: var(--ink-50); }
.wh-mobilenav__close:active { transform: scale(0.94); transition-duration: var(--dur-instant); }

.wh-mobilenav__body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-5) var(--sp-5) var(--sp-8);
}
.wh-mobilenav__list { display: flex; flex-direction: column; gap: 0.125rem; }
.wh-mobilenav__link {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: 0.875rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.006em;
  color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wh-mobilenav__link:hover { background: var(--brand-50); color: var(--brand-700); }
.wh-mobilenav__link:active { background: var(--brand-100); }
.wh-mobilenav__link[aria-current="page"] { color: var(--brand-700); background: var(--brand-50); }
.wh-mobilenav__link[aria-current="page"]::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-500); flex-shrink: 0;
}

/* Collapsible group inside the mobile panel. */
.wh-mobilenav__group { border-radius: var(--r-sm); }
.wh-mobilenav__grouptrigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: var(--sp-3);
  padding: 0.875rem 0.75rem;
  border: 0; background: none; border-radius: var(--r-sm);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.006em;
  color: var(--text); text-align: left; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.wh-mobilenav__grouptrigger:hover { background: var(--brand-50); }
.wh-mobilenav__grouptrigger .wh-i {
  font-size: 22px; color: var(--brand-500);
  transition: transform var(--dur-base) var(--ease-out);
}
.wh-mobilenav__grouptrigger[aria-expanded="true"] .wh-i { transform: rotate(180deg); }

.wh-mobilenav__sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.wh-mobilenav__grouptrigger[aria-expanded="true"] + .wh-mobilenav__sub { grid-template-rows: 1fr; }
.wh-mobilenav__sub > div { overflow: hidden; }
.wh-mobilenav__sub a {
  display: block;
  padding: 0.6875rem 0.75rem 0.6875rem 1.5rem;
  margin-left: 0.5rem;
  border-left: 2px solid var(--border);
  font-size: 0.9375rem; font-weight: 600;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.wh-mobilenav__sub a:hover { color: var(--brand-600); border-color: var(--brand-400); }
.wh-mobilenav__sub a[aria-current="page"] { color: var(--brand-700); border-color: var(--accent-500); }

.wh-mobilenav__foot {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Body lock while the panel is open. */
body.wh-nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .wh-mobilenav__panel { transition: opacity var(--dur-fast) linear; transform: none; opacity: 0; }
  .wh-mobilenav.is-open .wh-mobilenav__panel { opacity: 1; }
  .wh-nav__menu { transition: opacity var(--dur-fast) linear, visibility 0s; transform: none; }
  .wh-nav__item.is-open > .wh-nav__menu { transform: none; }
}

/* ==========================================================================
   21. Footer
   ========================================================================== */
.wh-footer {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.72);
  /* Vibrancy: text over the dark ground gets a touch more weight and tracking. */
  letter-spacing: 0.004em;
}
.wh-footer__top {
  display: grid; gap: clamp(2.25rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
@media (min-width: 720px) { .wh-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wh-footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.wh-footer__brand { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 22rem; }
.wh-footer__tagline { font-size: 0.9375rem; line-height: 1.65; color: rgba(255, 255, 255, 0.62); }

.wh-footer__contact { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1); }
.wh-footer__contact a, .wh-footer__contact span {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 0.9375rem; font-weight: 600; color: rgba(255, 255, 255, 0.86);
  transition: color var(--dur-fast) var(--ease-out);
}
.wh-footer__contact a:hover { color: var(--accent-300); }
.wh-footer__contact .wh-i { font-size: 19px; color: var(--brand-300); flex-shrink: 0; }

.wh-footer__col h2, .wh-footer__col h3 {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: #fff; margin-bottom: var(--sp-5);
}
.wh-footer__col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.wh-footer__col a {
  font-size: 0.9375rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
  transition: color var(--dur-fast) var(--ease-out);
}
.wh-footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.wh-footer__col a[aria-current="page"] { color: #fff; font-weight: 700; }

.wh-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.52);
}
.wh-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.wh-footer__legal a { color: rgba(255, 255, 255, 0.62); transition: color var(--dur-fast) var(--ease-out); }
.wh-footer__legal a:hover { color: #fff; }

.wh-footer :focus-visible { outline-color: var(--accent-300); }

/* ==========================================================================
   22. Back to top
   ========================================================================== */
.wh-totop {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: var(--sh-md);
  color: var(--brand-600); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.9);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring),
              visibility 0s linear var(--dur-base);
}
.wh-totop.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wh-totop:hover { background: #fff; box-shadow: var(--sh-lg); }
.wh-totop:active { transform: scale(0.92); transition-duration: var(--dur-instant); }

/* ==========================================================================
   23. Mega menu — the Services panel
   ========================================================================== */
/* Anchored to .wh-header__inner, so its edges track the site container and it
   can never reach past the page. left/right pin it; width is whatever the
   container allows, capped so it stays a menu rather than a full-bleed band. */
.wh-nav__menu--mega {
  left: var(--gutter);
  right: var(--gutter);
  width: auto;
  max-width: 64rem;
  margin-inline: auto;
  transform-origin: top center;
  transform: translateY(-6px) scale(0.985);
  padding: var(--sp-6);
  /* A long list must scroll inside the panel rather than run off-screen. */
  max-height: calc(100vh - var(--header-h) - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wh-nav__item.is-open > .wh-nav__menu--mega { transform: translateY(0) scale(1); }

/* minmax(0,1fr) so a long service name can never widen a track. Three columns
   hold at every width the desktop nav is shown at; the fallback only exists
   for very narrow desktop windows. */
.wh-nav__mega {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-5);
}
@media (max-width: 860px) {
  .wh-nav__mega { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wh-nav__menu--mega a { padding-block: 0.5rem; }
.wh-nav__megacol { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.wh-nav__megatitle {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 0.75rem var(--sp-2);
}
.wh-nav__megafoot {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.wh-nav__megafoot a { flex: 1 1 12rem; }

@media (prefers-reduced-motion: reduce) {
  .wh-nav__menu--mega,
  .wh-nav__item.is-open > .wh-nav__menu--mega { transform: none; }
}

/* ==========================================================================
   24. Page compositions
   ========================================================================== */

/* Hero card stack. The two cards are a matched pair: a grid with equal rows
   gives them identical height, and stretching them to the track gives them
   identical width. Padding, radius, border, shadow and the hover lift all come
   from .wh-card and .wh-card--interactive, so neither card can drift. */
.wh-herocards {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--sp-5);
  align-items: stretch;
}
.wh-herocards .wh-card { padding: clamp(1.25rem, 2vw, 1.75rem); width: 100%; }
.wh-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.wh-card__head + * { margin-top: var(--sp-5); }
@media (min-width: 1100px) {
  .wh-herocards { gap: var(--sp-6); }
}

/* Path card — image bleeds to the card edge, badge straddles the crop. */
.wh-pathcard .wh-media {
  margin: calc(-1 * clamp(1.75rem, 3vw, 2.75rem)) calc(-1 * clamp(1.75rem, 3vw, 2.75rem)) 0;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.wh-pathcard__badge {
  margin-top: calc(-1 * clamp(1.5rem, 2.6vw, 2rem));
  position: relative;
  border: 3px solid var(--surface);
}
.wh-pathcard .wh-checklist { margin-top: var(--sp-5); }

.wh-steps-foot { margin-top: clamp(2.5rem, 4vw, 3.5rem); display: flex; justify-content: center; }

/* Stats band. */
.wh-statgrid {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border);
}

.wh-proof__lead { margin-top: var(--sp-5); }
.wh-logos {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: var(--sp-8);
}
.wh-logos li {
  font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.02em; color: var(--text-muted);
  opacity: 0.75;
}

/* Two-up media + copy block used on service and about pages. */
.wh-feature__media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); background: var(--bg-sunken); }
.wh-feature__media img { width: 100%; }
.wh-feature__body > * + * { margin-top: var(--sp-5); }
.wh-feature__body .wh-checklist { margin-top: var(--sp-6); }
.wh-feature__body .wh-cluster { margin-top: var(--sp-8); }

/* Simple bordered list of facts (support hours, quick specs). */
.wh-deflist { display: flex; flex-direction: column; }
.wh-deflist > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.wh-deflist > div:last-child { border-bottom: 0; padding-bottom: 0; }
.wh-deflist dt { font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.wh-deflist dd { margin: 0; font-size: 0.9375rem; color: var(--text-secondary); text-align: right; }

/* Contact channel rows. */
.wh-channel {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.wh-channel:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--border-strong); }
.wh-channel:hover .wh-icon-badge { transform: scale(1.06); }
.wh-channel__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.wh-channel__label { font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.wh-channel__value { font-size: 0.875rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.wh-channel__chev { color: var(--ink-300); flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.wh-channel:hover .wh-channel__chev { transform: translateX(3px); color: var(--brand-600); }

/* Pricing plan card. */
.wh-plan { position: relative; }
.wh-plan--featured { border-color: var(--brand-300); box-shadow: var(--sh-md); }
.wh-plan__flag {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background: var(--brand-600); color: #fff;
}
.wh-plan__price {
  display: flex; align-items: baseline; gap: 0.25rem;
  margin-top: var(--sp-4);
}
.wh-plan__amount {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: var(--text);
}
.wh-plan__unit { font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }

/* Alert / notice block inside content. */
.wh-note {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
}
.wh-note .wh-i { color: var(--brand-600); flex-shrink: 0; }
.wh-note__body > * + * { margin-top: var(--sp-2); }
.wh-note--accent { background: var(--accent-50); border-color: var(--accent-100); }
.wh-note--accent .wh-i { color: var(--accent-600); }

/* Numbered/lettered ordered content on guide pages. */
.wh-ordered { counter-reset: wh-step; display: flex; flex-direction: column; gap: var(--sp-5); }
.wh-ordered > li {
  counter-increment: wh-step;
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4);
  align-items: start;
}
.wh-ordered > li::before {
  content: counter(wh-step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--r-full);
  background: var(--brand-600); color: #fff;
  font-size: 0.875rem; font-weight: 800;
}
.wh-ordered__body > * + * { margin-top: var(--sp-2); }

/* Breadcrumb. */
.wh-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: var(--sp-5); }
.wh-crumbs li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--text-muted); }
.wh-crumbs li:not(:last-child)::after { content: "/"; color: var(--ink-300); }
.wh-crumbs a { font-weight: 600; color: var(--text-secondary); transition: color var(--dur-fast) var(--ease-out); }
.wh-crumbs a:hover { color: var(--brand-600); }
.wh-crumbs [aria-current="page"] { font-weight: 600; color: var(--text); }

/* ==========================================================================
   25. Composition adjustments
   ========================================================================== */

/* Hero: give the copy column enough room that the two primary actions sit on
   one line at desktop widths instead of wrapping. */
@media (min-width: 1100px) {
  .wh-hero .wh-split--wide-left { grid-template-columns: 1.22fr 0.78fr; }
}

/* Quote pairs live inside a narrower column than a normal 2-up grid, so they
   need a smaller track minimum before they collapse. */
.wh-grid--quotes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.wh-proof { margin-top: 0; }

/* ==========================================================================
   26. Selection
   Carried over from the old per-page Tailwind selection utilities, which
   varied from page to page; now one behaviour site-wide.
   ========================================================================== */
::selection { background: var(--brand-100); color: var(--brand-900); }

/* Services page ----------------------------------------------------------- */
.wh-services-callout { margin-top: clamp(2rem, 4vw, 3rem); }
.wh-howwork__lead { margin-top: var(--sp-5); }
.wh-howwork__quote { margin-top: var(--sp-8); }
.wh-howwork__steps { gap: var(--sp-6); }

/* Contact page ------------------------------------------------------------ */
.wh-contact { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 960px) { .wh-contact { grid-template-columns: 1.35fr 1fr; } }

.wh-contact__intro { margin-top: var(--sp-3); }
.wh-contact__form { margin-top: var(--sp-8); }
.wh-contact__privacy { margin-top: var(--sp-1); }
.wh-contact__aside { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 1.75rem); }

.wh-hours .wh-deflist { margin-top: var(--sp-5); }
.wh-hours__note { margin-top: var(--sp-5); font-style: italic; }

/* About page -------------------------------------------------------------- */
.wh-about__stats {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
  text-align: left;
}
.wh-about__stats .wh-stat { text-align: left; }

/* Two overlapping frames: a large plate with a smaller one tucked into its
   lower corner. Collapses to a simple stack on narrow screens. */
.wh-about__art { position: relative; display: grid; gap: var(--sp-4); }
.wh-about__art-sub { display: none; }
@media (min-width: 700px) {
  .wh-about__art { padding-bottom: 4.5rem; padding-left: 3rem; }
  .wh-about__art-sub {
    display: block;
    position: absolute; left: 0; bottom: 0;
    width: 46%;
    border: 5px solid var(--bg);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xl);
  }
}

.wh-about__support { margin-top: clamp(2rem, 4vw, 3rem); }
.wh-about__support .wh-icon-badge { flex-shrink: 0; }

/* ==========================================================================
   27. Search field
   ========================================================================== */
.wh-search { position: relative; max-width: 34rem; margin: var(--sp-8) auto 0; }
.wh-search__icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 22px; pointer-events: none;
}
.wh-search__input {
  width: 100%;
  padding: 0.9375rem 1rem 0.9375rem 3rem;
  min-height: 54px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  font-size: 1rem;
  box-shadow: var(--sh-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.wh-search__input::placeholder { color: var(--ink-400); }
.wh-search__input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(0, 64, 142, 0.14);
}

/* ==========================================================================
   28. FAQ page
   ========================================================================== */
.wh-faq { display: grid; gap: clamp(1.75rem, 3vw, 3rem); align-items: start; }
@media (min-width: 900px) { .wh-faq { grid-template-columns: 16rem 1fr; } }

.wh-faq__nav {
  padding: var(--sp-5);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
@media (min-width: 900px) { .wh-faq__nav { position: sticky; top: calc(var(--header-h) + 1.5rem); } }

.wh-faq__navtitle {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--sp-4);
}
.wh-faq__navlist { display: flex; flex-direction: column; gap: 0.125rem; }
.wh-faq__navlist a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0.625rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wh-faq__navlist a:hover { background: #fff; color: var(--brand-700); }
.wh-faq__navlist .wh-i { font-size: 20px; color: var(--brand-500); flex-shrink: 0; }

.wh-faq__body { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); min-width: 0; }
.wh-faq__group { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.wh-faq__group[hidden] { display: none; }
.wh-faq__grouptitle { margin-bottom: var(--sp-5); }
.wh-faq__empty {
  padding: var(--sp-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}
.wh-faq__help { margin-top: 0; }

/* ==========================================================================
   29. Dark band (secondary emphasis strip)
   ========================================================================== */
.wh-band {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.76);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.wh-band__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: clamp(2rem, 4vw, 3.5rem);
}
.wh-band__text { flex: 1 1 22rem; max-width: 30rem; }
.wh-band__title { color: #fff; }
.wh-band__lead { margin-top: var(--sp-3); font-size: 0.9375rem; line-height: 1.65; color: rgba(255, 255, 255, 0.68); }

.wh-styles { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); }
.wh-styles li { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.wh-styles__name {
  font-size: 1.375rem; font-weight: 800;
  letter-spacing: -0.02em; color: #fff; line-height: 1;
}
.wh-styles__meta {
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   30. Academic services page
   ========================================================================== */
.wh-hero__badge { margin-top: var(--sp-8); }

/* One tall lead card beside a 2x2 of shorter ones. */
.wh-acadgrid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
@media (min-width: 720px) { .wh-acadgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .wh-acadgrid { grid-template-columns: repeat(3, 1fr); }
  .wh-acadgrid__lead { grid-row: span 2; }
}

.wh-acadloop { margin-top: clamp(3rem, 6vw, 5rem); }
.wh-acadloop__lead { margin-top: var(--sp-5); }
.wh-acadloop__facts { margin-top: var(--sp-8); }

.wh-fact { gap: 0.25rem; padding: var(--sp-5); }
.wh-fact__value {
  font-size: 1.375rem; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--brand-600);
}
.wh-fact__label { font-size: 0.875rem; color: var(--text-secondary); }

/* ==========================================================================
   31. Career / job hunting page
   ========================================================================== */
.wh-proofnote {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-8); padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.wh-proofnote__value { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.wh-proofnote__label { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.1rem; }

.wh-jobs__docs { margin-top: clamp(2rem, 4vw, 3rem); }
.wh-jobs__doclist { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.wh-jobs__doclist a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 0.9375rem; font-weight: 700; color: var(--text);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.wh-jobs__doclist a:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--border-strong); }
.wh-jobs__doclist .wh-icon-badge { width: 2.5rem; height: 2.5rem; border-radius: var(--r-full); }
.wh-jobs__doclist .wh-icon-badge .wh-i { font-size: 21px; }

.wh-jobs__quote { max-width: 44rem; margin: clamp(3rem, 5vw, 4.5rem) auto 0; text-align: center; align-items: center; }
.wh-jobs__quote .wh-quote__cite { align-items: center; }

/* ==========================================================================
   32. Pricing page
   ========================================================================== */
.wh-price__head { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; max-width: var(--container); }
@media (min-width: 980px) { .wh-price__head { grid-template-columns: 1.15fr 0.85fr; } }
.wh-price__promise { background: var(--surface); }
.wh-price__promise .wh-checklist { margin-top: var(--sp-5); }
.wh-price__faq { max-width: 48rem; margin-inline: auto; }

.wh-assure { flex-direction: row; align-items: center; gap: var(--sp-4); padding: var(--sp-5); }
.wh-assure > * + * { margin-top: 0; }
.wh-assure__title { font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.wh-assure__note { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.1rem; }

/* Calculator -------------------------------------------------------------- */
.wh-calc { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; }
@media (min-width: 900px) { .wh-calc { grid-template-columns: 1.2fr 1fr; } }
.wh-calc__controls { gap: var(--sp-6); }
.wh-calc__controls > * + * { margin-top: var(--sp-6); }
.wh-calc__controls [hidden] { display: none; }

.wh-calc__result { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.wh-calc__summary { margin-top: var(--sp-5); }
.wh-calc__summary [hidden] { display: none; }
.wh-calc__label {
  margin-top: var(--sp-6);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.wh-calc__total {
  margin-top: var(--sp-2);
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: var(--brand-600);
}
.wh-calc__result .wh-btn { margin-top: var(--sp-6); }
.wh-calc__vat { margin-top: var(--sp-4); text-align: center; }

.wh-field__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }

/* Segmented control ------------------------------------------------------- */
.wh-segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.wh-segmented__opt { position: relative; display: block; }
/* Visually hidden rather than stretched over the face, so the face itself
   stays the hit target and nothing intercepts pointer events. */
.wh-segmented__opt input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wh-segmented__opt { cursor: pointer; }
.wh-segmented__face {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
  min-height: 5.25rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 0.8125rem; font-weight: 700; text-align: center;
  color: var(--text-muted);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.wh-segmented__face .wh-i { font-size: 24px; }
.wh-segmented__opt:hover .wh-segmented__face { border-color: var(--border-strong); color: var(--text-secondary); }
.wh-segmented__opt input:active + .wh-segmented__face { transform: scale(0.97); }
.wh-segmented__opt input:checked + .wh-segmented__face {
  border-color: var(--brand-600);
  background: var(--brand-50);
  color: var(--brand-700);
}
.wh-segmented__opt input:focus-visible + .wh-segmented__face {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

/* Range ------------------------------------------------------------------- */
.wh-range {
  width: 100%; height: 6px; margin: var(--sp-3) 0 0;
  appearance: none; -webkit-appearance: none;
  background: var(--ink-100);
  border-radius: var(--r-full);
  cursor: pointer;
}
.wh-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-600); border: 3px solid #fff;
  box-shadow: var(--sh-sm); cursor: grab;
  transition: transform var(--dur-fast) var(--ease-out);
}
.wh-range::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.wh-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-600); border: 3px solid #fff;
  box-shadow: var(--sh-sm); cursor: grab;
}
.wh-range:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.wh-range__scale {
  display: flex; justify-content: space-between;
  margin-top: var(--sp-2);
  font-size: 0.6875rem; font-weight: 600; color: var(--text-muted);
}

/* Stepper ----------------------------------------------------------------- */
.wh-stepper { display: flex; align-items: stretch; gap: var(--sp-2); }
.wh-stepper__btn {
  flex-shrink: 0;
  width: 50px; min-height: 50px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 1.25rem; font-weight: 700; line-height: 1;
  color: var(--brand-600); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.wh-stepper__btn:hover { background: var(--brand-50); border-color: var(--brand-300); }
.wh-stepper__btn:active { transform: scale(0.94); }
.wh-stepper__input {
  flex: 1; min-width: 0;
  padding: 0.875rem 0.5rem;
  min-height: 50px;
  text-align: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: 1.0625rem; font-weight: 700;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.wh-stepper__input:focus {
  outline: none; background: #fff;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(0, 64, 142, 0.14);
}

.wh-plan__rates { margin-top: var(--sp-5); }
.wh-plan__flag { position: absolute; top: 0; left: 50%; }

/* ==========================================================================
   33. Tabs
   ========================================================================== */
.wh-tabs__list {
  display: inline-flex; gap: var(--sp-1);
  padding: var(--sp-1);
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
  background: var(--bg-sunken);
  border-radius: var(--r-full);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wh-tabs__list::-webkit-scrollbar { display: none; }
.wh-tabs { display: flex; flex-direction: column; align-items: center; }
.wh-tabs__panel { width: 100%; }

.wh-tabs__tab {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.6875rem 1.25rem;
  border: 0; border-radius: var(--r-full);
  background: transparent;
  font-size: 0.9375rem; font-weight: 700; white-space: nowrap;
  color: var(--text-secondary); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.wh-tabs__tab .wh-i { font-size: 20px; }
.wh-tabs__tab:hover { color: var(--brand-600); }
.wh-tabs__tab:active { transform: scale(0.97); }
.wh-tabs__tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--brand-700);
  box-shadow: var(--sh-sm);
}

/* ==========================================================================
   34. How it works page
   ========================================================================== */
.wh-hiw__head { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; max-width: var(--container); }
@media (min-width: 980px) { .wh-hiw__head { grid-template-columns: 1.15fr 0.85fr; } }

.wh-hiw__timeline { background: var(--surface); }
.wh-timeline { display: flex; flex-direction: column; gap: 0; margin-top: var(--sp-6); }
.wh-timeline li {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) 0 var(--sp-3) 0;
  font-size: 0.9375rem; font-weight: 700; color: var(--text);
}
.wh-timeline li .wh-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--brand-50); color: var(--brand-600);
  font-size: 20px;
}
/* Connecting rail between the markers. */
.wh-timeline li:not(:last-child)::before {
  content: ""; position: absolute;
  left: 1.125rem; top: 2.5rem; bottom: -0.25rem;
  width: 1.5px; background: var(--brand-100);
}

.wh-hiw__stats {
  max-width: 34rem; margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   35. Intrinsic-width safety
   Grid and flex children default to min-width:auto, so a wide, unbreakable
   child can push a track past the viewport. A <select> is the usual culprit:
   its min-content width is set by its longest <option>, which on the pricing
   calculator is far wider than a phone screen.
   ========================================================================== */
.wh-select { min-width: 0; }
.wh-calc > *,
.wh-contact > *,
.wh-faq > *,
.wh-split > *,
.wh-price__head > *,
.wh-hiw__head > * { min-width: 0; }

/* Segment labels must be allowed to shrink and wrap rather than force width. */
.wh-segmented { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wh-segmented__face { overflow-wrap: anywhere; }

/* ==========================================================================
   36. 404
   ========================================================================== */
.wh-notfound {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70rem 34rem at 50% -30%, var(--brand-50) 0%, rgba(247, 249, 252, 0) 62%),
    var(--bg);
}
.wh-notfound__inner { position: relative; z-index: 1; max-width: 44rem; margin-inline: auto; text-align: center; }
.wh-notfound__icon { margin-bottom: var(--sp-6); }
.wh-notfound__lead { margin-top: var(--sp-5); }
.wh-notfound__actions { margin-top: var(--sp-8); }
.wh-notfound__links .wh-channel { height: 100%; }

/* ==========================================================================
   37. Policy pages
   ========================================================================== */
.wh-policy__stamp { margin-top: var(--sp-6); }
.wh-policy__glanceicon { color: var(--brand-500); margin-right: 0.5rem; font-size: 0.9em; }
.wh-policy__ask { margin-top: clamp(2rem, 4vw, 3rem); }
.wh-policy__body { max-width: 52rem; margin-inline: auto; }
.wh-policy__checks { margin-top: 1.25em; }
.wh-policy__rights { margin-top: 1.5em; }
.wh-policy__rights .wh-card { padding: var(--sp-5); }

.wh-policy__band { padding-block: clamp(2rem, 4vw, 3rem); }
.wh-policy__bandinner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-4); text-align: center;
}
.wh-policy__bandinner .wh-i { font-size: 30px; color: var(--brand-300); }

/* Buyer protection page ---------------------------------------------------- */
.wh-claim__steps { margin-top: var(--sp-8); }
.wh-claim__cta { margin-top: var(--sp-8); }

.wh-seal { align-items: center; text-align: center; background: var(--surface); }
.wh-seal__title {
  margin-top: var(--sp-5);
  font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text);
}
.wh-seal__meta {
  margin-top: var(--sp-2);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted);
}

/* Research paper page ------------------------------------------------------ */
.wh-eyebrow__icon { font-size: 1.15em; vertical-align: -0.18em; margin-right: 0.3rem; }
.wh-hero__checks { margin-top: var(--sp-8); }

.wh-rp__art { display: flex; flex-direction: column; gap: var(--sp-4); }
.wh-rp__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.wh-rp__stats .wh-fact { gap: 0.15rem; text-align: center; align-items: center; }
.wh-rp__stats .wh-fact__value { font-size: 1.5rem; }

.wh-rp__callout { margin-top: clamp(2rem, 4vw, 3rem); }

/* Dissertation page -------------------------------------------------------- */
.wh-step__icon { font-size: 1.15em; vertical-align: -0.18em; margin-right: 0.4rem; color: var(--brand-500); }
.wh-diss__styles { margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.wh-diss__styles .wh-fact { text-align: center; align-items: center; gap: 0.35rem; }
.wh-diss__styles .wh-fact__value { font-size: 1.125rem; }
.wh-diss__seal { text-align: center; align-items: center; background: var(--surface); }
.wh-diss__lead { margin-top: var(--sp-5); }
.wh-diss__checks { margin-top: var(--sp-8); }

/* ==========================================================================
   38. LinkedIn optimization page
   ========================================================================== */
.wh-li__art { position: relative; }
.wh-li__metric {
  flex-direction: row; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin-top: calc(-1 * var(--sp-8));
  margin-inline: auto;
  width: fit-content;
  max-width: 100%;
  position: relative; z-index: 1;
  box-shadow: var(--sh-lg);
}
.wh-li__metric > * + * { margin-top: 0; }
.wh-li__metric .wh-stat__value { font-size: 1.75rem; }
.wh-li__globe { font-size: 30px; color: var(--brand-300); margin-bottom: var(--sp-3); display: block; }
.wh-li__stats { flex: 1 1 20rem; }

/* Before / after comparison ------------------------------------------------ */
.wh-ba__eyebrow { margin-bottom: var(--sp-1); }
.wh-ba__mark { font-size: 26px; color: var(--ink-300); flex-shrink: 0; }
.wh-ba__mark--good { color: var(--career-600); }
.wh-ba__quote {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--border-strong);
  background: var(--bg-subtle);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.9375rem; line-height: 1.6; font-style: italic;
  color: var(--text-secondary);
}
.wh-ba--after .wh-ba__quote { border-left-color: var(--career-600); background: var(--career-50); color: var(--text); }
.wh-ba__verdict {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: 0.875rem; font-weight: 700; color: var(--text-muted);
}
.wh-ba__verdict .wh-i { font-size: 20px; }
.wh-ba__verdict--good { color: var(--career-600); }
.wh-ba--after { border-color: var(--career-100); box-shadow: var(--sh-md); }

/* Small arrow tag list ----------------------------------------------------- */
.wh-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.wh-tags li {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  font-size: 0.75rem; font-weight: 700; color: var(--text-secondary);
}
.wh-tags .wh-i { font-size: 15px; color: var(--brand-500); }

/* eCommerce page ----------------------------------------------------------- */
.wh-ec__lead { margin-top: var(--sp-5); }
.wh-ec__tags { margin-top: var(--sp-8); }
.wh-ec__tags li { padding: 0.5rem 1rem; font-size: 0.8125rem; background: var(--accent-50); color: var(--accent-700); }
.wh-ec__tags .wh-i { font-size: 18px; color: var(--accent-600); }
.wh-fact__icon { font-size: 22px; color: var(--accent-600); }

/* How to order page -------------------------------------------------------- */
.wh-hto__steps { gap: clamp(1.5rem, 3vw, 2.25rem); max-width: 48rem; margin-inline: auto; }
.wh-hto__steps > li::before { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
.wh-hto__faqlead { margin-top: var(--sp-3); }
.wh-hto__support {
  margin-top: var(--sp-6); padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.wh-hto__support > * + * { margin-top: var(--sp-2); }
.wh-hto__support .wh-link { margin-top: var(--sp-4); }

/* ==========================================================================
   39. Blog
   ========================================================================== */
.wh-blog__head { max-width: 52rem; }
.wh-blog__byline { margin-top: var(--sp-6); }

.wh-blog { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .wh-blog { grid-template-columns: 1fr 20rem; } }
.wh-blog__main { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); min-width: 0; }
.wh-blog__side { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 1.75rem); min-width: 0; }

.wh-blog__grouphead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--border);
}
.wh-blog__meta { display: flex; align-items: center; gap: 0.35rem; margin-top: var(--sp-5); }
.wh-blog__meta .wh-i { font-size: 17px; }

.wh-blog__signup { background: var(--brand-700); color: #fff; }
.wh-blog__signuptitle { color: #fff; }
.wh-blog__signuplead { color: rgba(255, 255, 255, 0.75); }
.wh-blog__form { margin-top: var(--sp-5); gap: var(--sp-3); }
.wh-blog__signup .wh-input {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.wh-blog__signup .wh-input::placeholder { color: rgba(255, 255, 255, 0.6); }
.wh-blog__signup .wh-input:focus {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}
.wh-blog__signupnote { color: rgba(255, 255, 255, 0.6); margin-top: var(--sp-4); }

.wh-blog__cats { margin-top: var(--sp-4); }
.wh-blog__cats li {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary);
}
.wh-blog__cats li:last-child { border-bottom: 0; padding-bottom: 0; }

.wh-blog__popular { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }
.wh-blog__popular li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.wh-blog__popular li > span:last-child { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.wh-blog__popular .wh-icon-badge { width: 2.5rem; height: 2.5rem; }
.wh-blog__popular .wh-icon-badge .wh-i { font-size: 20px; }
.wh-blog__poptitle { font-size: 0.875rem; font-weight: 700; line-height: 1.4; color: var(--text); }

/* AI pages ------------------------------------------------------------------ */
.wh-scan {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-8);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-secondary);
}
.wh-scan__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.55);
  animation: wh-pulse 2.4s var(--ease-out) infinite;
}
@keyframes wh-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 107, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wh-scan__dot { animation: none; }
}

.wh-cta__icon { font-size: 34px; color: rgba(255, 255, 255, 0.75); margin-bottom: var(--sp-4); }

/* ==========================================================================
   40. AI SEO, Review My Business, VerifiMe
   ========================================================================== */
.wh-seo__icon { margin-bottom: var(--sp-5); }
.wh-section-head--center .wh-seo__icon { margin-inline: auto; }
.wh-seo__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.wh-seo__head > div { flex: 1 1 26rem; max-width: 46rem; }

.wh-rmb__head,
.wh-vm__head { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; max-width: var(--container); }
@media (min-width: 980px) {
  .wh-rmb__head { grid-template-columns: 1.2fr 0.8fr; }
  .wh-vm__head { grid-template-columns: 1.25fr 0.75fr; }
}
.wh-rmb__score,
.wh-vm__seal { text-align: center; align-items: center; background: var(--surface); }
.wh-rmb__stars { margin-top: var(--sp-4); color: var(--accent-500); }
.wh-rmb__stars .wh-i { font-size: 32px; }
.wh-rmb__lead { margin-top: var(--sp-5); }
.wh-rmb__cta { margin-top: var(--sp-8); }
.wh-rmb__checks { margin-top: var(--sp-8); }

.wh-review { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--bg-subtle); border-radius: var(--r-md); }
.wh-review__rating { font-size: 0.9375rem; font-weight: 800; color: var(--accent-600); letter-spacing: 0.02em; }
.wh-review__text { margin-top: var(--sp-3); font-size: 1rem; line-height: 1.6; font-style: italic; color: var(--text); }
.wh-review__cite { margin-top: var(--sp-3); font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); }

.wh-vm__timing { margin-top: var(--sp-5); }
.wh-vm__quote { margin-top: var(--sp-6); }
.wh-vm__cta { margin-top: var(--sp-8); }
.wh-vm__compliance { flex: 1 1 24rem; max-width: 34rem; }
.wh-vm__compliance > * + * { margin-top: var(--sp-3); }
.wh-vm__badges { margin-top: var(--sp-6); }
.wh-vm__badges .wh-styles__name { font-size: 1.125rem; }

/* ==========================================================================
   41. Buttons must never widen the page
   A long unbreakable label (an email address, a URL) inside a pill button
   would otherwise set a min-content width wider than a phone screen.
   ========================================================================== */
.wh-btn {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.wh-btn .wh-i { flex-shrink: 0; }
.wh-link { max-width: 100%; overflow-wrap: anywhere; }
.wh-link .wh-i { flex-shrink: 0; }

/* ==========================================================================
   42. Polish
   ========================================================================== */

/* The about-page stats sit inside one column of a split, which is narrower
   than the default 3-up track minimum, so they need their own tighter grid. */
.wh-about__stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); }

/* A long support address in a narrow channel row breaks mid-word otherwise. */
.wh-channel__value { font-size: 0.8125rem; }
@media (min-width: 480px) { .wh-channel__value { font-size: 0.875rem; } }

/* ==========================================================================
   43. Translucency as an enhancement, not a dependency
   The default backgrounds below are near-solid so text stays legible when
   backdrop-filter is unavailable, disabled, or not composited. Where the
   browser does support it, the surfaces become properly translucent and the
   content scrolls underneath as intended.
   ========================================================================== */
.wh-header__bar        { background: rgba(255, 255, 255, 0.97); }
.wh-header.is-stuck .wh-header__bar { background: rgba(255, 255, 255, 0.98); }
.wh-nav__menu          { background: rgba(255, 255, 255, 0.99); }
.wh-mobilenav__panel   { background: rgba(255, 255, 255, 0.99); }
.wh-totop              { background: rgba(255, 255, 255, 0.97); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* The bar is the one surface meant to read as translucent: content scrolls
     under it, and it never carries more than a line of text. */
  .wh-header__bar      { background: rgba(255, 255, 255, 0.72); }
  .wh-header.is-stuck .wh-header__bar { background: rgba(255, 255, 255, 0.86); }
  .wh-totop            { background: rgba(255, 255, 255, 0.82); }
}

/* Menus stay opaque. They float over hero artwork and headline type, and a
   light translucent panel stacked over that loses legibility -- the blur
   softens what is behind but does not stop it reading through. Depth here
   comes from shadow and the bright top edge instead. */
.wh-nav__menu,
.wh-mobilenav__panel {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ==========================================================================
   44. Design system v2
   A deliberate step away from the boxed, hairline-bordered look: deeper brand
   ink, warmer neutrals, larger display type, softer geometry, and elevation
   carried by light rather than outlines. Everything here overrides section 1
   onward, so the whole site moves together.
   ========================================================================== */
:root {
  /* Brand — deeper, less primary-blue, with more range at the light end. */
  --brand-50:  #eef3fd;
  --brand-100: #dbe6fa;
  --brand-200: #bcd0f4;
  --brand-300: #8fb0ea;
  --brand-400: #5b86dc;
  --brand-500: #2a5fc4;
  --brand-600: #10408f;
  --brand-700: #0a3070;
  --brand-800: #082450;
  --brand-900: #061936;

  /* Accent — slightly deeper so it holds up as a text colour too. */
  --accent-50:  #fff4ef;
  --accent-100: #ffe2d5;
  --accent-300: #ffab84;
  --accent-500: #f9642c;
  --accent-600: #dd4d18;
  --accent-700: #b03a10;

  --career-50:  #e8f5f2;
  --career-100: #cdeae4;
  --career-500: #0a7f6e;
  --career-600: #076a5c;
  --career-700: #055046;

  /* Neutrals — a trace of blue so they sit under the brand without going grey. */
  --ink-900: #0a1020;
  --ink-800: #121a2c;
  --ink-700: #222c42;
  --ink-600: #3b465e;
  --ink-500: #5b6780;
  --ink-400: #8b95aa;
  --ink-300: #b3bccd;
  --ink-200: #d7dde8;
  --ink-100: #e9edf4;
  --ink-50:  #f4f6fa;

  --bg:             #ffffff;
  --bg-subtle:      #f6f8fc;
  --bg-sunken:      #eaeff7;
  --surface:        #ffffff;
  --border:         #e6eaf2;
  --border-strong:  #ccd4e2;
  --focus:          #f9642c;

  /* Larger, more confident display sizes and a roomier page rhythm. */
  --section-y: clamp(4rem, 8vw, 8.5rem);
  --section-y-tight: clamp(3rem, 5.5vw, 5rem);
  --container: 1220px;
  --container-wide: 1340px;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --header-h: 74px;

  /* Softer geometry throughout. */
  --r-xs: 10px;  --r-sm: 12px;  --r-md: 16px;
  --r-lg: 22px;  --r-xl: 30px;  --r-2xl: 40px;

  /* Elevation does the work that borders used to. */
  --sh-xs: 0 1px 2px rgba(10, 16, 32, 0.05);
  --sh-sm: 0 2px 8px rgba(10, 16, 32, 0.05), 0 1px 2px rgba(10, 16, 32, 0.04);
  --sh-md: 0 10px 30px rgba(10, 16, 32, 0.07), 0 2px 8px rgba(10, 16, 32, 0.04);
  --sh-lg: 0 22px 58px rgba(10, 16, 32, 0.10), 0 6px 16px rgba(10, 16, 32, 0.05);
  --sh-xl: 0 40px 96px rgba(10, 16, 32, 0.15), 0 10px 26px rgba(10, 16, 32, 0.07);
  --sh-brand:  0 14px 34px rgba(16, 64, 143, 0.26);
  --sh-accent: 0 14px 34px rgba(249, 100, 44, 0.28);
  --sh-career: 0 14px 34px rgba(7, 106, 92, 0.24);

  /* A faint dotted field used behind heroes and closing bands. */
  --wh-dots: radial-gradient(currentColor 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
   Typography — more contrast between display and body
   -------------------------------------------------------------------------- */
.wh-display {
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem);
  line-height: 1.02; letter-spacing: -0.034em;
}
.wh-h1 {
  font-size: clamp(2.25rem, 1.35rem + 3.7vw, 3.9rem);
  line-height: 1.05; letter-spacing: -0.03em;
}
.wh-h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.85rem);
  line-height: 1.11; letter-spacing: -0.024em;
}
.wh-h3 {
  font-size: clamp(1.25rem, 1.08rem + 0.8vw, 1.625rem);
  line-height: 1.22; letter-spacing: -0.015em;
}
.wh-lead {
  font-size: clamp(1.0625rem, 0.99rem + 0.55vw, 1.375rem);
  line-height: 1.55; letter-spacing: -0.008em;
  color: var(--text-secondary);
}
.wh-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
}

/* --------------------------------------------------------------------------
   Surfaces — a hairline ring instead of a hard border
   -------------------------------------------------------------------------- */
.wh-card {
  border-color: transparent;
  box-shadow: var(--sh-sm), 0 0 0 1px rgba(10, 16, 32, 0.05);
  border-radius: var(--r-lg);
}
.wh-card--interactive:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(16, 64, 143, 0.12);
  border-color: transparent;
}
.wh-card--subtle {
  background: var(--bg-subtle);
  box-shadow: 0 0 0 1px rgba(10, 16, 32, 0.045);
}
.wh-card--flat { box-shadow: 0 0 0 1px rgba(10, 16, 32, 0.05); }

.wh-quote {
  border-color: transparent;
  box-shadow: var(--sh-sm), 0 0 0 1px rgba(10, 16, 32, 0.05);
}
.wh-channel {
  border-color: transparent;
  box-shadow: var(--sh-xs), 0 0 0 1px rgba(10, 16, 32, 0.05);
}
.wh-channel:hover { box-shadow: var(--sh-md), 0 0 0 1px rgba(16, 64, 143, 0.12); }

.wh-ac {
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(10, 16, 32, 0.06);
  border-radius: var(--r-md);
}
.wh-ac[open] { box-shadow: var(--sh-sm), 0 0 0 1px rgba(16, 64, 143, 0.16); }

.wh-table-wrap { border-color: transparent; box-shadow: 0 0 0 1px rgba(10, 16, 32, 0.06); }

/* Icon badges pick up a soft tint ring so they read as objects, not blocks. */
.wh-icon-badge { border-radius: var(--r-md); }
.wh-icon-badge--lg { border-radius: var(--r-lg); }

/* --------------------------------------------------------------------------
   Buttons — a touch tighter, with a light top edge on solid fills
   -------------------------------------------------------------------------- */
.wh-btn {
  padding: 0.8125rem 1.5rem;
  min-height: 46px;
  font-size: 0.9375rem;
  letter-spacing: -0.006em;
}
.wh-btn--lg { padding: 1rem 2rem; min-height: 54px; font-size: 1rem; }
.wh-btn--sm { padding: 0.5625rem 1.125rem; min-height: 38px; }
.wh-btn--primary,
.wh-btn--accent,
.wh-btn--career { border-top-color: rgba(255, 255, 255, 0.24); }
.wh-btn--secondary {
  box-shadow: 0 0 0 1px var(--border-strong), var(--sh-xs);
  border-color: transparent;
}
.wh-btn--secondary:hover {
  background: var(--brand-50);
  box-shadow: 0 0 0 1px var(--brand-300), var(--sh-sm);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   Sections — alternating tone with a soft seam rather than a hard edge
   -------------------------------------------------------------------------- */
.wh-section--subtle {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-subtle) 6%, var(--bg-subtle) 94%, var(--bg) 100%);
}
.wh-section--sunken { background: var(--bg-sunken); }
.wh-section-head { margin-bottom: clamp(2.75rem, 4.5vw, 4.5rem); }

/* --------------------------------------------------------------------------
   Hero — a wider bloom and a faint dotted field for texture
   -------------------------------------------------------------------------- */
.wh-hero {
  padding-block: clamp(3.5rem, 7vw, 7rem) clamp(4rem, 8vw, 7.5rem);
  background:
    radial-gradient(120rem 52rem at 50% -38%, var(--brand-50) 0%, rgba(246, 248, 252, 0) 60%),
    linear-gradient(180deg, #fbfcfe 0%, #ffffff 62%);
}
.wh-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  color: rgba(16, 64, 143, 0.09);
  background-image: var(--wh-dots);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 55% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}
.wh-hero__glow--brand  { width: 36rem; height: 36rem; filter: blur(96px); }
.wh-hero__glow--accent { width: 30rem; height: 30rem; filter: blur(96px); }

.wh-pagehead {
  padding-block: clamp(3rem, 5.5vw, 5rem) clamp(2.5rem, 4.5vw, 4rem);
  border-bottom: 0;
  background:
    radial-gradient(90rem 42rem at 50% -44%, var(--brand-50) 0%, rgba(246, 248, 252, 0) 58%),
    linear-gradient(180deg, #f8fafd 0%, #ffffff 100%);
}
.wh-pagehead::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
}

/* --------------------------------------------------------------------------
   Closing CTA — deeper field, dotted texture, no hard circles
   -------------------------------------------------------------------------- */
.wh-cta {
  background:
    radial-gradient(60rem 40rem at 78% 8%, rgba(249, 100, 44, 0.30) 0%, transparent 62%),
    linear-gradient(135deg, var(--brand-800) 0%, var(--brand-700) 42%, var(--brand-600) 100%);
}
.wh-cta::before {
  content: "";
  position: absolute; inset: 0;
  width: auto; height: auto; top: 0; right: 0; border-radius: 0;
  color: rgba(255, 255, 255, 0.16);
  background-image: var(--wh-dots);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(80% 70% at 20% 100%, #000 0%, transparent 72%);
  mask-image: radial-gradient(80% 70% at 20% 100%, #000 0%, transparent 72%);
}
.wh-cta::after { display: none; }
.wh-cta__lead { color: rgba(255, 255, 255, 0.86); }
.wh-cta__inner { max-width: 50rem; }

.wh-callout {
  background: linear-gradient(135deg, var(--brand-50) 0%, #fff6f1 100%);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(16, 64, 143, 0.10);
  border-radius: var(--r-xl);
}

/* --------------------------------------------------------------------------
   Steps — a filled rail rather than an outlined circle
   -------------------------------------------------------------------------- */
.wh-step__num {
  background: var(--brand-50);
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--brand-200);
  color: var(--brand-700);
  font-size: 0.9375rem;
}
.wh-step--done .wh-step__num {
  background: var(--brand-600);
  box-shadow: var(--sh-brand);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Media — deeper crops, softer frames
   -------------------------------------------------------------------------- */
.wh-frame { border-radius: var(--r-2xl); box-shadow: var(--sh-xl); }
.wh-media { border-radius: var(--r-md); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.wh-input, .wh-select, .wh-textarea {
  background: var(--bg-subtle);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  border-radius: var(--r-md);
}
.wh-input:hover, .wh-select:hover, .wh-textarea:hover { box-shadow: inset 0 0 0 1px var(--ink-300); }
.wh-input:focus, .wh-select:focus, .wh-textarea:focus {
  background: #fff;
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--brand-500), 0 0 0 4px rgba(42, 95, 196, 0.16);
}

/* ==========================================================================
   45. Footer v2
   One shared component: brand block, four link columns, legal bar. The seam
   at the top is a soft gradient rather than a hard edge, and the whole thing
   sits on the same ink as the closing CTA so the page ends deliberately.
   ========================================================================== */
.wh-footer {
  position: relative;
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.004em;
  overflow: hidden;
}
/* Faint dotted field, fading out downward, matching the CTA band. */
.wh-footer::before {
  content: "";
  position: absolute; inset: 0;
  color: rgba(255, 255, 255, 0.075);
  background-image: var(--wh-dots);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(75% 62% at 78% 0%, #000 0%, transparent 74%);
  mask-image: radial-gradient(75% 62% at 78% 0%, #000 0%, transparent 74%);
  pointer-events: none;
}
.wh-footer > * { position: relative; z-index: 1; }

.wh-footer__top {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(2.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .wh-footer__top { grid-template-columns: minmax(0, 20rem) 1fr; } }

/* Brand ------------------------------------------------------------------- */
.wh-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.wh-footer__logo { display: inline-flex; }
.wh-footer__logo img {
  height: 34px;
  width: auto;
  aspect-ratio: 1024 / 273;
  object-fit: contain;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.wh-footer__logo:hover img { opacity: 0.82; }

.wh-footer__tagline {
  font-size: 0.9375rem; line-height: 1.65;
  color: rgba(255, 255, 255, 0.58);
  max-width: 22rem;
  margin: 0;
}

.wh-footer__contact { display: flex; flex-direction: column; gap: var(--sp-3); }
.wh-footer__contact a,
.wh-footer__contact span {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: 0.9375rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease-out);
}
.wh-footer__contact a:hover { color: var(--accent-300); }
.wh-footer__contact .wh-i { font-size: 18px; color: var(--brand-300); }

.wh-footer__cta { margin-top: var(--sp-1); }

/* Link columns ------------------------------------------------------------ */
.wh-footer__nav {
  display: grid;
  gap: clamp(2rem, 3.5vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}
.wh-footer__col h2 {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--sp-5);
}
.wh-footer__col ul { display: flex; flex-direction: column; gap: 0.875rem; }
.wh-footer__col a {
  display: inline-block;
  font-size: 0.9375rem; font-weight: 500; line-height: 1.35;
  color: rgba(255, 255, 255, 0.64);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wh-footer__col a:hover { color: #fff; transform: translateX(3px); }
.wh-footer__col a[aria-current="page"] { color: #fff; font-weight: 700; }

/* Legal bar --------------------------------------------------------------- */
.wh-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  padding-block: var(--sp-6) clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.8125rem;
}
.wh-footer__copy { color: rgba(255, 255, 255, 0.48); margin: 0; }
.wh-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.wh-footer__legal a {
  color: rgba(255, 255, 255, 0.58);
  transition: color var(--dur-fast) var(--ease-out);
}
.wh-footer__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }

.wh-footer :focus-visible { outline-color: var(--accent-300); }

/* Proof section — heading and logos on one row, quotes full width below, so
   each quote gets a comfortable measure instead of a squeezed column. */
.wh-proof { display: flex; flex-direction: column; gap: clamp(2.5rem, 4vw, 3.5rem); }
.wh-proof__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-6) clamp(2rem, 4vw, 4rem);
}
.wh-proof__head > div { flex: 1 1 26rem; max-width: 40rem; }
.wh-proof__lead { margin-top: var(--sp-4); }
.wh-proof .wh-logos { margin-top: 0; flex: 0 0 auto; }
.wh-proof__quotes { margin-top: 0; }

/* On the dark footer a coloured glow reads as a halo, so the CTA there gets a
   flat fill and lifts only on hover. */
.wh-footer__cta { box-shadow: none; }
.wh-footer__cta:hover { box-shadow: var(--sh-accent); }

/* ==========================================================================
   46. Fieldset reset
   A <fieldset> ships a browser border and inset padding, which drew a stray
   box around the calculator's service-type group with the legend notched into
   it. Grouping semantics are kept; the chrome is not.
   ========================================================================== */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; display: block; }

/* The urgency read-out is a value, not a label, so it keeps its own casing:
   uppercasing turned "7d" into something that reads as "7D"/"70". */
[data-quote-urgency-badge] {
  text-transform: none;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  min-width: 3.25rem;
  justify-content: center;
}

/* ==========================================================================
   47. Active-state containment
   The mega menu's item is position:static so the panel can resolve against
   the header container. That also made the trigger's active underline resolve
   there, stretching it across the whole bar, so the trigger carries its own
   positioning context.
   ========================================================================== */
.wh-nav__link,
.wh-nav__trigger { position: relative; }

/* A two-up stat pair inside a narrow measure needs a tighter track than the
   generic 2-column grid, which would otherwise collapse to a single column. */
.wh-hiw__stats,
.wh-acadloop__facts,
.wh-li__stats,
.wh-rp__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ==========================================================================
   48. Header balance and mega-menu containment
   Three corrections, scoped to the header only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Even spacing around the navigation.

   The actions block (Login + Order Now) is wider than the logo, so centring
   the nav on the bar necessarily leaves a bigger gap on the logo side than on
   the button side. The middle track is therefore the space *between* the logo
   and the actions, and the nav is centred inside it: the gap to the logo and
   the gap to the buttons come out equal at every width.
   -------------------------------------------------------------------------- */
.wh-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
.wh-logo { grid-column: 1; justify-self: start; }
.wh-header__actions { grid-column: 3; justify-self: end; }

@media (min-width: 1024px) {
  .wh-nav {
    grid-column: 2;
    display: flex;
    justify-content: center;
    min-width: 0;
  }
  /* Keep a real gutter on both sides at narrow desktop widths, where the
     nav would otherwise crowd the Order Now button. */
  .wh-header__inner { gap: clamp(1rem, 2.5vw, 2.5rem); }
}
@media (min-width: 1024px) and (max-width: 1200px) {
  .wh-nav { gap: 0; }
  .wh-nav__link,
  .wh-nav__trigger { padding-inline: 0.55rem; }
}

/* --------------------------------------------------------------------------
   2. The mega panel is a solid surface.

   It sits inside .wh-header__bar, which carries a backdrop-filter and a
   semi-transparent background. The panel must not inherit any of that: the
   colour is stated without an alpha channel, filtering is switched off, and
   the panel isolates itself so no ancestor compositing group can tint it.
   -------------------------------------------------------------------------- */
.wh-nav__menu,
.wh-nav__menu--mega {
  background-color: #fff;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
}
.wh-nav__item.is-open > .wh-nav__menu { opacity: 1; }

/* Fade the panel in by movement and scale only. Cross-fading a menu over page
   content is what reads as "see-through" during the transition. */
.wh-nav__menu {
  transition: visibility 0s linear var(--dur-base),
              transform var(--dur-base) var(--ease-out);
  opacity: 1;
  visibility: hidden;
}
.wh-nav__item.is-open > .wh-nav__menu {
  visibility: visible;
  transition: transform var(--dur-base) var(--ease-spring), visibility 0s;
}

/* --------------------------------------------------------------------------
   3. The panel can never exceed the page width.

   It is pinned to the header container's inner edges, and additionally capped
   against the viewport so no scrollbar can ever be introduced by it.
   -------------------------------------------------------------------------- */
.wh-nav__menu--mega {
  left: var(--gutter);
  right: var(--gutter);
  width: auto;
  max-width: min(64rem, calc(100vw - (2 * var(--gutter))));
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .wh-nav__menu,
  .wh-nav__item.is-open > .wh-nav__menu { transition: visibility 0s; transform: none; }
}

/* ==========================================================================
   49. Hero rhythm and small-laptop fit
   ========================================================================== */

/* --------------------------------------------------------------------------
   Top spacing.

   The hero box already begins flush against the header; the gap was its own
   padding-top, which at 7vw reached 101px on a 1440 screen and pushed the
   headline 169px below the nav. Padding is now capped and answers to viewport
   *height* as well as width, so it stays proportional instead of growing with
   the window on short screens.
   -------------------------------------------------------------------------- */
.wh-hero {
  padding-block: clamp(2rem, min(4vw, 5vh), 4rem) clamp(2.5rem, min(5vw, 6vh), 5rem);
}
.wh-pagehead {
  padding-block: clamp(1.75rem, min(3.5vw, 4.5vh), 3.25rem) clamp(1.75rem, min(3.5vw, 4.5vh), 3rem);
}

/* --------------------------------------------------------------------------
   Small-laptop fit.

   A 1366x768 or 1280x720 screen leaves roughly 690px under the header. The
   hero was 791px. Everything below scales the same proportions down rather
   than cropping anything: padding, headline, lead, and the gaps between them
   all tighten together, so the section still breathes.

   Scoped by height so large monitors, tablets and phones are untouched, and
   by width so it only applies where the two-column hero actually runs.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-height: 940px) {
  .wh-hero { padding-block: clamp(1.75rem, 4.5vh, 3rem) clamp(2rem, 5vh, 3.5rem); }

  .wh-hero .wh-split { gap: clamp(1.5rem, 3vw, 3rem); }

  .wh-hero__title {
    font-size: clamp(1.9rem, 1.1rem + 2.2vw, 2.9rem);
    line-height: 1.06;
  }
  .wh-hero__lead {
    font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.0625rem);
    line-height: 1.5;
  }
  .wh-hero__title { margin-bottom: var(--sp-4); }
  .wh-hero__actions { margin-top: var(--sp-6); }
  .wh-hero__badge { margin-top: var(--sp-5); }
  .wh-hero__checks { margin-top: var(--sp-5); }

  .wh-trust { margin-top: var(--sp-5); padding-top: var(--sp-4); gap: var(--sp-3) var(--sp-6); }
  .wh-trust__item { font-size: 0.8125rem; }

  .wh-proofnote { margin-top: var(--sp-5); padding-top: var(--sp-4); }

  /* The card pair drives the hero's height, so it tightens with everything
     else. Both cards keep identical padding. */
  .wh-herocards { gap: var(--sp-4); }
  .wh-herocards .wh-card { padding: clamp(1.1rem, 1.7vw, 1.5rem); }
  .wh-herocards .wh-card__head + * { margin-top: var(--sp-4); }
  .wh-herocards .wh-h3 { font-size: clamp(1.05rem, 0.92rem + 0.45vw, 1.25rem); }
  .wh-herocards .wh-body-sm { font-size: 0.875rem; line-height: 1.55; }
  .wh-herocards .wh-icon-badge { width: 2.5rem; height: 2.5rem; }
  .wh-herocards .wh-icon-badge .wh-i { font-size: 19px; }
  .wh-herocards .wh-link { font-size: 0.875rem; }

  .wh-hero__actions .wh-btn--lg { padding: 0.8125rem 1.375rem; min-height: 46px; font-size: 0.9rem; }
}

/* Very short laptops (720p) need one more step. */
@media (min-width: 1024px) and (max-height: 760px) {
  .wh-hero { padding-block: clamp(1rem, 2.5vh, 1.75rem) clamp(1.125rem, 3vh, 2rem); }
  .wh-hero__title { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); }
  .wh-trust { margin-top: var(--sp-4); padding-top: var(--sp-3); }
  .wh-herocards .wh-card { padding: 0.875rem 1rem; }
}

/* ==========================================================================
   50. Consistent page openings
   Two-column heroes and page heads centred their text column against the card
   or image beside it, so the headline's distance from the nav depended on how
   tall that neighbour happened to be: 72px on most pages but 166px on How It
   Works. Aligning the columns to the top makes every page open at the same
   height, and the neighbour keeps its own vertical rhythm.
   ========================================================================== */
@media (min-width: 900px) {
  .wh-hero .wh-split,
  .wh-hiw__head,
  .wh-price__head,
  .wh-rmb__head,
  .wh-vm__head {
    align-items: start;
  }
}

/* The companion card in a page head still sits optically with the copy rather
   than hard against the top edge. */
@media (min-width: 980px) {
  .wh-hiw__timeline,
  .wh-price__promise,
  .wh-rmb__score,
  .wh-vm__seal { margin-top: var(--sp-2); }
}

/* The eyebrow was inline-block, so it sat baseline-aligned inside its parent's
   line box and started ~8px lower than a block-level first child. Pages opening
   with an eyebrow therefore began slightly deeper than pages opening with a
   breadcrumb. Making it block removes the line box from the equation. */
.wh-eyebrow { display: block; }

/* ==========================================================================
   51. One spacing system for the nav -> hero lead-in
   Every page opens with the same measured gap between the navigation and the
   first thing in the hero. It scales with width only, never with viewport
   height, so a short laptop window cannot squeeze it shut -- that is what
   left the headline 16px under the nav at 1366x648.
   ========================================================================== */
:root {
  /* The single value every page opens with. */
  --space-lead-in: clamp(2.25rem, 1.5rem + 1.6vw, 3.5rem);
  /* Space closing a hero or page head before the next section begins. */
  --space-lead-out: clamp(2.25rem, 1.5rem + 1.8vw, 3.75rem);
}

.wh-hero { padding-block: var(--space-lead-in) var(--space-lead-out); }
.wh-pagehead { padding-block: var(--space-lead-in) var(--space-lead-out); }

/* The height tiers keep tightening the hero's *content* so it still fits a
   small laptop, but they no longer touch the lead-in: the gap under the nav
   is the one measurement that stays put everywhere. */
@media (min-width: 1024px) and (max-height: 940px) {
  .wh-hero { padding-block: var(--space-lead-in) var(--space-lead-out); }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .wh-hero { padding-block: var(--space-lead-in) var(--space-lead-out); }
}

/* --------------------------------------------------------------------------
   Section rhythm on short windows.

   A section's 109px top padding is right on a tall monitor and reads as a dead
   band on a 648px-high laptop window, where it lands between the hero and the
   next heading. Capping it against viewport height keeps the proportion.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-height: 900px) {
  :root {
    --section-y: clamp(2.75rem, min(6vw, 8.5vh), 5.5rem);
    --section-y-tight: clamp(2.25rem, min(4.5vw, 6vh), 4rem);
  }
}

/* The 404 opens with an icon badge rather than an eyebrow, and used the
   generic section rhythm, so it began deeper than every other page. It now
   takes the same lead-in as a hero or page head. */
.wh-notfound { padding-block: var(--space-lead-in) var(--space-lead-out); }



/* ==========================================================================
   53. Homepage hero — the stage
   A centred statement with two matched service tiles beneath it, replacing
   the asymmetric two-column arrangement.

   Built on the Apple design foundations: optical typography (tracking and
   leading tuned per size, not one global value), depth carried by light
   rather than outlines, motion that starts on pointer-down and settles on a
   spring, and every effect withdrawn under the accessibility preferences.
   ========================================================================== */

.wh-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 68rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Type. Display sizes get negative tracking because letters read too far
   apart as they grow; the lead sits at a comfortable measure so the eye never
   has to travel more than about 60 characters.
   -------------------------------------------------------------------------- */
.wh-stage .wh-hero__title {
  font-size: clamp(2.35rem, 1.15rem + 4.1vw, 4.35rem);
  line-height: 1.015;
  letter-spacing: -0.036em;
  font-weight: 800;
  max-width: 20ch;
  margin-bottom: 0;
}
.wh-stage .wh-hero__lead {
  margin-top: clamp(1rem, 1.6vw, 1.5rem);
  max-width: 40rem;
  font-size: clamp(1.0625rem, 0.98rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
  letter-spacing: -0.007em;
  text-wrap: pretty;
}

.wh-stage .wh-hero__actions {
  margin-top: clamp(1.75rem, 2.6vw, 2.5rem);
  justify-content: center;
  gap: var(--sp-3);
}

/* --------------------------------------------------------------------------
   Service tiles. Two equal tracks, so the pair is identical in width and
   height by construction; everything else they share comes from .wh-card.
   -------------------------------------------------------------------------- */
.wh-stage .wh-herocards {
  width: 100%;
  margin-top: clamp(2rem, 3.4vw, 3.25rem);
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: clamp(0.875rem, 1.5vw, 1.25rem);
  text-align: left;
}
@media (min-width: 760px) {
  .wh-stage .wh-herocards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wh-tile {
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
  padding: clamp(1.1rem, 1.7vw, 1.5rem);
  /* A bright top edge reads as light catching the surface, the same cue a
     physical card gets from a light source above it. */
  border-top: 1px solid rgba(255, 255, 255, 0.9);
}
.wh-tile > * + * { margin-top: 0; }

/* The glyph plate. Rounded-square with an inner highlight, so it reads as an
   object sitting on the tile rather than a flat swatch. */
.wh-tile__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(2.75rem, 3.6vw, 3.25rem);
  aspect-ratio: 1;
  border-radius: 30%;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 16px rgba(10, 16, 32, 0.16);
  transition: transform var(--dur-base) var(--ease-spring);
}
.wh-tile__glyph .wh-i { font-size: clamp(21px, 2vw, 25px); }
.wh-tile__glyph--brand { background: linear-gradient(150deg, var(--brand-500), var(--brand-700)); }
.wh-tile__glyph--career { background: linear-gradient(150deg, var(--career-500), var(--career-700)); }

.wh-tile__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.wh-tile__tag { margin-bottom: var(--sp-2); }
.wh-tile__title { font-size: clamp(1.0625rem, 0.95rem + 0.42vw, 1.25rem); line-height: 1.25; }
.wh-tile__desc { margin-top: var(--sp-2); font-size: 0.875rem; line-height: 1.55; }
.wh-tile__cta { margin-top: var(--sp-3); font-size: 0.875rem; }

/* Response: the surface answers the press itself, immediately, rather than
   waiting for the click to resolve. */
.wh-tile:active { transform: translateY(-1px) scale(0.988); transition-duration: var(--dur-instant); }
.wh-card--interactive.wh-tile:hover .wh-tile__glyph { transform: scale(1.06) rotate(-3deg); }
.wh-card--interactive.wh-tile:hover .wh-tile__cta { gap: 0.625rem; }

/* --------------------------------------------------------------------------
   Trust strip. A quiet footer to the stage, centred, with hairline dividers
   instead of a full rule so it stays subordinate to the tiles.
   -------------------------------------------------------------------------- */
.wh-stage .wh-trust {
  margin-top: clamp(1.5rem, 2.4vw, 2.25rem);
  padding-top: 0;
  border-top: 0;
  justify-content: center;
  gap: var(--sp-4) clamp(1.25rem, 2.4vw, 2.25rem);
}
.wh-stage .wh-trust__item { font-size: 0.8125rem; color: var(--text-muted); }
.wh-stage .wh-trust__item .wh-i { color: var(--brand-500); font-size: 17px; }
@media (min-width: 640px) {
  .wh-stage .wh-trust__item + .wh-trust__item { position: relative; }
  .wh-stage .wh-trust__item + .wh-trust__item::before {
    content: "";
    position: absolute;
    left: calc(-1 * clamp(0.625rem, 1.2vw, 1.125rem));
    top: 50%;
    width: 1px; height: 0.9em;
    transform: translateY(-50%);
    background: var(--border-strong);
  }
}

/* --------------------------------------------------------------------------
   Short laptop windows. The stage compresses proportionally rather than
   cropping: type, gaps and tile padding all step down together.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-height: 940px) {
  .wh-stage .wh-hero__title { font-size: clamp(2.1rem, 1rem + 3.1vw, 3.35rem); }
  .wh-stage .wh-hero__lead { font-size: 1.0625rem; margin-top: var(--sp-4); }
  .wh-stage .wh-hero__actions { margin-top: var(--sp-6); }
  .wh-stage .wh-herocards { margin-top: var(--sp-8); }
  .wh-stage .wh-trust { margin-top: var(--sp-5); }
  .wh-tile { padding: clamp(0.95rem, 1.4vw, 1.25rem); }
  .wh-tile__desc { font-size: 0.85rem; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .wh-stage .wh-hero__title { font-size: clamp(1.95rem, 0.9rem + 2.8vw, 2.9rem); }
  .wh-stage .wh-hero__lead { font-size: 1rem; }
  .wh-stage .wh-herocards { margin-top: var(--sp-6); }
  .wh-stage .wh-trust { margin-top: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   Preferences. Reduced motion keeps the state changes but drops the movement;
   reduced transparency and increased contrast restore hard edges.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wh-tile,
  .wh-tile__glyph,
  .wh-tile:active,
  .wh-card--interactive.wh-tile:hover .wh-tile__glyph { transform: none; transition: none; }
}
@media (prefers-contrast: more) {
  .wh-tile { border-top-color: var(--border-strong); }
  .wh-stage .wh-trust__item { color: var(--text); }
}

/* The 20ch measure keeps the headline compact on wide screens, but on a phone
   it forces an awkward four-line break; below the tile breakpoint the line can
   use the full column. */
@media (max-width: 759px) {
  .wh-stage .wh-hero__title { max-width: none; }
}

/* A little more headroom on 720p-class windows, taken evenly from the joints
   rather than from any single element. */
@media (min-width: 1024px) and (max-height: 760px) {
  .wh-stage .wh-hero__lead { margin-top: var(--sp-3); }
  .wh-stage .wh-hero__actions { margin-top: var(--sp-5); }
  .wh-tile { padding: 0.9rem 1rem; }
  .wh-tile__desc { margin-top: 0.35rem; }
  .wh-tile__cta { margin-top: 0.5rem; }
}

/* Very short windows (a 720p screen with browser chrome, or a split view).
   The stage keeps its structure and simply reads one step smaller. */
@media (min-width: 1024px) and (max-height: 680px) {
  .wh-stage .wh-hero__title { font-size: clamp(1.8rem, 0.85rem + 2.4vw, 2.55rem); }
  .wh-stage .wh-hero__lead { font-size: 0.95rem; line-height: 1.5; }
  .wh-stage .wh-hero__actions { margin-top: var(--sp-4); }
  .wh-stage .wh-herocards { margin-top: var(--sp-5); }
  .wh-stage .wh-trust { margin-top: var(--sp-3); }
  .wh-tile__desc { font-size: 0.8125rem; }
}