/* ============================================================
   GDOING — Design System
   Appliance repair, St. Augustine & Northeast Florida. Light theme
   in the old gdoing.com spirit: white surfaces, near-black ink and
   the brand brick-red accent (#b50500) on buttons and highlights.
   NOTE: --ws-* variable NAMES are the neutral engine prefix — keep
   them; only the VALUES are brand-specific.
   ============================================================ */

:root {
  /* ── Palette (sampled from the gdoing.com brand) ──────────── */
  --ws-sky:        #b50500;       /* brand red: primary CTAs + accents */
  --ws-sky-dark:   #8e0400;       /* hover/border */
  --ws-sky-soft:   #FBE4E2;       /* light red tint */
  --ws-pink:       #F5F5F5;       /* secondary card (light gray) */
  --ws-pink-dark:  #E4E4E4;
  --ws-cream:      #FDF4F3;       /* hero band only (red-tinted off-white) */
  --ws-cream-soft: #FEFAF9;
  --ws-surface:    #FFFFFF;       /* MAIN page background */
  --ws-white:      #FFFFFF;
  --ws-plum:       #1C1C1C;       /* dark headings + footer (brand ink) */
  --ws-plum-soft:  #2D2D2D;
  --ws-ink:        #2D2D2D;       /* body text */
  --ws-ink-soft:   #565656;       /* secondary text */
  --ws-muted:      #8A8A8A;
  --ws-line:       rgba(28, 28, 28, .12);
  --ws-line-soft:  rgba(28, 28, 28, .06);
  --ws-yellow:     #FFB300;       /* star accent (review stars stay gold) */
  --ws-orange:     #C0392B;       /* deep red decorative accent */
  --ws-orange-soft:#FFCF97;

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale (mobile baseline; desktop scaled below) */
  --fs-hero:    clamp(36px, 7.6vw, 64px);
  --fs-h2:      clamp(28px, 4.4vw, 40px);
  --fs-h3:      clamp(22px, 2.8vw, 28px);
  --fs-lg:      18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;

  /* ── Radii & shadows ─────────────────────────────────────── */
  --r-sm:  10px;
  --r-md:  18px;
  --r-lg:  28px;
  --r-xl:  44px;
  --r-pill: 999px;

  --shadow-soft:   0 12px 36px -18px rgba(20, 20, 20, .18);
  --shadow-card:   0 18px 50px -22px rgba(20, 20, 20, .22);
  --shadow-pop:    0 30px 70px -28px rgba(20, 20, 20, .30);

  /* ── Layout ──────────────────────────────────────────────── */
  --container:   1280px;
  --gutter:      24px;
  --section-y:   clamp(56px, 9vw, 96px);
  --section-y-sm:clamp(40px, 6vw, 64px);

  --tx-spring: cubic-bezier(.34, 1.56, .64, 1);
  --tx-base:   cubic-bezier(.2, .8, .2, 1);
}

/* ── Reset / base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ws-ink);
  background: var(--ws-surface);  /* off-white main bg per Figma */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;        /* Fredoka One has no other weights */
  color: var(--ws-plum);
  line-height: 1.08;
  margin: 0 0 .4em;
  letter-spacing: -.005em;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-lg); }
hr { border: 0; border-top: 1px solid var(--ws-line); margin: 32px 0; }
::selection { background: var(--ws-sky); color: var(--ws-plum); }

/* ── Layout primitives ───────────────────────────────────── */
.ws-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.ws-section {
  padding: var(--section-y) 0;
  position: relative;
}
.ws-section--cream { background: var(--ws-cream); }
.ws-section--sky   { background: var(--ws-sky); }
.ws-section--pink  { background: var(--ws-pink); }
.ws-section--white { background: var(--ws-white); }

.ws-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ws-plum-soft);
  padding: 6px 14px;
  background: rgba(255,255,255,.6);
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.ws-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  transition: transform .25s var(--tx-spring), box-shadow .25s var(--tx-base), background .2s, color .2s;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.ws-btn--primary {
  background: var(--ws-sky);
  color: var(--ws-plum);
  box-shadow: 0 8px 22px -10px rgba(64,0,40,.35);
}
.ws-btn--primary:hover {
  background: var(--ws-sky-dark);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 30px -10px rgba(64,0,40,.45);
}
.ws-btn--ghost {
  background: rgba(255,255,255,.85);
  color: var(--ws-plum);
  backdrop-filter: blur(6px);
}
.ws-btn--ghost:hover { background: var(--ws-white); transform: translateY(-2px); }
.ws-btn--plum {
  background: var(--ws-plum);
  color: var(--ws-white);
}
.ws-btn--plum:hover { background: var(--ws-plum-soft); transform: translateY(-2px); }
.ws-btn--lg { padding: 18px 36px; font-size: var(--fs-lg); }

/* ── Header (floating white pill island) ─────────────────── */
.ws-header {
  position: sticky; top: 0; z-index: 50;
  padding: 16px 0 0;
  pointer-events: none;     /* let click pass through gutters */
  background: var(--ws-cream);   /* cream band at the very top — matches the hero so there's
                                    no colour seam above the h1. */
  transition: background .3s ease;
}
/* Once the page is scrolled, the cream band fades to transparent so ONLY the white pill
   keeps floating (class toggled by the scroll listener in templates/partials/header.php). */
.ws-header.is-scrolled { background: transparent; }
.ws-header > .ws-container { pointer-events: none; }
.ws-header__island {
  pointer-events: auto;
  background: var(--ws-white);
  border-radius: var(--r-pill);
  padding: 12px 14px 12px 22px;
  display: flex; align-items: center; gap: 24px;
  box-shadow: 0 14px 36px -20px rgba(64, 0, 40, .25), 0 2px 8px -2px rgba(64,0,40,.08);
}
.ws-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}
.ws-logo__mark {
  width: 72px; height: 52px;
  display: block;
  flex-shrink: 0;
}
.ws-logo__wordmark {
  display: inline-flex; flex-direction: column;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.0;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ws-plum);
}
.ws-nav {
  display: flex; align-items: center; gap: 28px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 18px;
  margin: 0 auto;
}
.ws-nav a {
  color: var(--ws-plum);
  padding: 6px 2px;
  position: relative;
  transition: color .2s;
  text-decoration: none;
}
.ws-nav a::after {
  content: ''; position: absolute;
  left: 50%; bottom: 0; width: 0; height: 2px;
  background: var(--ws-plum);
  border-radius: 2px;
  transition: width .25s var(--tx-base), left .25s var(--tx-base);
}
.ws-nav a:hover::after,
.ws-nav a[aria-current="page"]::after { width: 100%; left: 0; }

.ws-header__right {
  display: flex; align-items: center; gap: 12px;
}
.ws-social {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ws-plum);
  color: var(--ws-white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s var(--tx-spring);
}
.ws-social:hover { background: var(--ws-sky-dark); transform: translateY(-1px); }
.ws-header__cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  color: var(--ws-plum);
  background: var(--ws-sky);
  border: 1.5px solid var(--ws-plum);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  text-decoration: none;
  box-shadow: 0 3px 0 0 var(--ws-plum);   /* candy lip — matches the site's buttons */
  transition: transform .16s var(--tx-spring), box-shadow .16s var(--tx-spring), background .2s;
  white-space: nowrap;
}
.ws-header__cta:hover  { background: var(--ws-sky-dark); transform: translateY(-1px); box-shadow: 0 4px 0 0 var(--ws-plum); }
.ws-header__cta:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--ws-plum); }

/* Click-to-call: a plum text link on desktop (NOT a second button); collapses to a
   round plum icon button on mobile (see the 880px query). Source = setting('phone'). */
.ws-header__phone {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ws-plum);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, transform .16s var(--tx-spring);
}
.ws-header__phone-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.ws-header__phone:hover { color: var(--ws-plum-soft); transform: translateY(-1px); }
.ws-header__phone:hover .ws-header__phone-num { text-decoration: underline; text-underline-offset: 3px; }

/* Drawer call row — a quiet link under the CTA (not a second filled button). */
.ws-drawer__phone {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 14px;
  color: var(--ws-plum);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
}
.ws-drawer__phone:hover { color: var(--ws-plum-soft); text-decoration: underline; text-underline-offset: 3px; }

.ws-burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: transparent;          /* integrate into the white pill — no separate cream chip */
  align-items: center; justify-content: center;
  border: 0;
  padding: 0;
  flex: 0 0 auto;                   /* never grow/shrink → stays inside the pill */
  transition: background .2s;
}
.ws-burger:hover { background: rgba(64, 0, 40, .07); }
.ws-burger span {
  display: block; width: 20px; height: 2px;
  background: var(--ws-plum); border-radius: 2px;
  position: relative;
}
.ws-burger span::before,
.ws-burger span::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--ws-plum); border-radius: 2px;
}
.ws-burger span::before { top: -6px; }
.ws-burger span::after  { top: 6px; }
/* Mobile drawer — white panel sliding in from the RIGHT over a dimmed backdrop */
.ws-drawer {
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .62);   /* soft frosted-white scrim (was plum — read as pink/purple) */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden;
  pointer-events: none;     /* CRITICAL: never intercept clicks while closed. This was the bug —
                               a full-screen pe:auto overlay kept eating EVERY click during the
                               .3s visibility transition after closing (or indefinitely while a
                               backgrounded tab paused that transition). pe:none fixes it instantly. */
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.ws-drawer[aria-hidden="false"] {
  opacity: 1; visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease, visibility 0s linear 0s;
}
.ws-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(340px, 86vw);
  background: var(--ws-white);
  border-radius: 24px 0 0 24px;
  box-shadow: -24px 0 60px -24px rgba(64, 0, 40, .4), -1px 0 0 rgba(64, 0, 40, .08);
  padding: 26px 28px 36px;
  display: flex; flex-direction: column; align-items: center;
  transform: translateX(100%);
  transition: transform .34s var(--tx-spring);
  overflow-y: auto;
}
.ws-drawer[aria-hidden="false"] .ws-drawer__panel { transform: translateX(0); }
.ws-drawer__close {
  position: absolute; top: 22px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ws-cream); color: var(--ws-plum);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; border: 0; cursor: pointer;
  transition: background .2s, transform .25s var(--tx-spring);
}
.ws-drawer__close:hover { background: var(--ws-sky); transform: rotate(90deg); }
.ws-drawer__title {
  font-family: var(--font-display); color: var(--ws-plum);
  font-size: 30px; line-height: 1; margin: 14px 0 0; text-align: center;
}
.ws-drawer__rule {
  display: block; width: 210px; max-width: 72%; height: 1px;
  background: rgba(64, 0, 40, .18); margin: 22px 0 10px;
}
.ws-drawer__nav {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; font-family: var(--font-ui); font-size: 21px; margin-top: 8px;
}
.ws-drawer__nav a {
  display: block; width: 100%; text-align: center;
  padding: 14px 16px; color: var(--ws-plum); border-radius: var(--r-md);
  transition: background .2s, color .2s;
}
.ws-drawer__nav a:hover { background: var(--ws-cream); }
.ws-drawer__cta {
  margin: 26px auto 6px; min-width: 210px;
  border: 1.5px solid var(--ws-plum);
  box-shadow: 0 3px 0 0 var(--ws-plum);   /* candy lip — matches the site's buttons */
}
.ws-drawer__cta:hover  { transform: translateY(-1px); box-shadow: 0 4px 0 0 var(--ws-plum); }
.ws-drawer__cta:active { transform: translateY(2px);  box-shadow: 0 1px 0 0 var(--ws-plum); }
.ws-drawer__social { display: flex; gap: 24px; justify-content: center; margin-top: 28px; }
.ws-drawer__social a { color: var(--ws-plum); display: inline-flex; transition: color .2s, transform .2s var(--tx-spring); }
.ws-drawer__social a:hover { color: var(--ws-orange); transform: translateY(-2px); }

/* ── Breadcrumbs — clean horizontal trail (blog post, CMS pages) ───────────
   render_breadcrumbs() emits <nav class="breadcrumb"><ol>…; without these rules
   the browser shows a raw bulleted/indented list (the "ugly" state). */
.breadcrumb { margin: 0 0 20px; }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 7px;
  font-family: var(--font-ui);
  font-size: 14px; line-height: 1.3;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.breadcrumb a {
  color: var(--ws-plum); opacity: .6;
  text-decoration: none; transition: opacity .2s;
}
.breadcrumb a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb .sep { color: var(--ws-plum); opacity: .28; user-select: none; }
.breadcrumb [aria-current="page"] {
  color: var(--ws-plum); opacity: .9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42ch;
}

/* ── HERO (centered, cream bg) ───────────────────────────── */
.ws-hero {
  position: relative;
  padding: clamp(28px, 4vw, 52px) 0 clamp(60px, 6vw, 96px);
  overflow: hidden;
  text-align: center;
  background: var(--ws-cream);
}
.ws-hero__inner {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  position: relative;
}
.ws-hero__text {
  max-width: 880px;
  margin: 0 auto;
}
.ws-hero__title {
  font-size: var(--fs-hero);
  letter-spacing: -.012em;
  color: var(--ws-plum);
  margin-bottom: 18px;
  line-height: 1.05;
}
/* "Unforgettable" — wavy sky-blue underline as an SVG background */
.ws-hero__title .ws-wave {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.ws-hero__title .ws-wave::after {
  content: '';
  position: absolute;
  left: -2%; right: -2%; bottom: -12px;
  height: 20px;
  /* Smooth sine period that tiles seamlessly — thicker stroke, shorter wavelength
     → more frequent rounded humps (per Figma Unforgettable…2.svg). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' fill='none' preserveAspectRatio='none'><path d='M0 10 Q 25 2 50 10 T 100 10' stroke='%23b50500' stroke-width='5' stroke-linecap='round' fill='none'/></svg>");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 50px 18px;   /* shorter wavelength = more frequent waves */
}
/* "St. Augustine" — brand-red accent in the display face */
.ws-hero__title em {
  font-style: normal;
  color: var(--ws-sky);
  margin-left: .1em;
}
.ws-hero__sub {
  font-size: var(--fs-lg);
  color: var(--ws-plum-soft);
  max-width: 560px;
  margin: 0 auto;
}

/* Cream → off-white background divider arc, running THROUGH the photo middle */
.ws-hero { position: relative; }
.ws-hero__split {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;          /* divider sits ~through the middle of the photo */
  background: var(--ws-surface);
  /* Concave (hammock) top edge — the boundary sags LOW in the middle so the
     cream dips down behind the photo. SVG mask = region BELOW a ∪ curve. */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><path d='M0 0 C 420 70 1020 70 1440 0 L 1440 400 L 0 400 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><path d='M0 0 C 420 70 1020 70 1440 0 L 1440 400 L 0 400 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
  z-index: 0;
}
.ws-hero__inner { position: relative; z-index: 1; }

/* Hero photo collage — EXACT Figma "Frame 90225" geometry (viewBox 880×575).
   Three layers share the same coordinate space so everything lines up:
     .ws-collage__shape  white fill + outset stroke  → uniform white border + shadow
     .ws-collage__cloud  the photo, masked to the cloud outline
     .ws-collage__arcs   orange (left) + sky (right) 5px decorative strokes      */
.ws-collage {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 880 / 575;
  margin: 0 auto;
  --cloud-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 880 575'><path d='M364.498 99.713C435.84 42.2715 522.544 25.1484 586.308 63.7619C614.955 81.1098 635.445 107.573 647.491 139.474C696.209 101.384 749.618 88.4773 787.133 111.195C843.942 145.597 842.794 248.653 784.57 341.378C726.346 434.103 633.092 481.384 576.284 446.983C571.216 443.914 566.611 440.299 562.465 436.194C487.341 510.898 387.316 537.444 315.992 494.252C292.874 480.253 275.068 460.318 262.725 436.38C204.605 485.76 140.396 504.233 96.5913 477.707C32.6913 439.011 36.415 319.215 104.909 210.136C173.402 101.057 280.728 43.9999 344.628 82.6955C352.199 87.2802 358.82 93.0041 364.498 99.713Z' fill='white'/></svg>");
}
.ws-collage__shape,
.ws-collage__arcs {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.ws-collage__shape { z-index: 0; filter: drop-shadow(0 18px 36px rgba(64, 0, 40, .12)); }
.ws-collage__arcs  { z-index: 2; overflow: visible; }
/* Pre-shaped designer PNG (cloud + white border baked in) */
.ws-collage__photo {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  filter: drop-shadow(0 18px 36px rgba(64, 0, 40, .12));
}
.ws-collage__cloud {
  position: absolute; inset: 0; z-index: 1;
  background: var(--ws-cream-soft);
  -webkit-mask: var(--cloud-mask) center / 100% 100% no-repeat;
          mask: var(--cloud-mask) center / 100% 100% no-repeat;
  display: grid;
  grid-template-columns: repeat(var(--ws-cols, 1), 1fr);
  gap: 0;
}
.ws-collage__cloud > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Designer crop = vertical centre; nudge a touch lower so kids stay in frame */
  object-position: center 54%;
}
.ws-collage__cloud--single { grid-template-columns: 1fr; }

/* ── Feature badges (2x2 grid, outline icons) ────────────── */
.ws-features {
  background: var(--ws-surface);
  padding-bottom: var(--section-y);
}
.ws-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 48px;
  max-width: 720px;
}
.ws-feature {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.ws-feature__icon {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ws-plum);
  margin-bottom: 6px;
}
.ws-feature__icon svg { width: 48px; height: 48px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ws-feature__icon img { width: 48px; height: 48px; object-fit: contain; display: block; }
.ws-feature__title {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ws-plum);
  line-height: 1.1;
  margin: 0;
}
.ws-feature__text { font-size: 15px; color: var(--ws-plum); margin: 6px 0 0; max-width: 280px; line-height: 1.55; }
@media (min-width: 720px) {
  .ws-features__grid { grid-template-columns: 1fr 1fr; max-width: 760px; margin-left: auto; }
}

/* ── Intro (photo + heading + 2x2 features) — Figma-accurate ── */
.ws-intro {
  background: var(--ws-surface); /* off-white, NOT cream */
  padding: clamp(40px, 6vw, 80px) 0;
}
.ws-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
.ws-intro__left {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 440px; margin-inline: auto;
  text-align: center; /* Figma: centered heading + body under the photo */
}

/* Layered photo slider: front card 406×230 + a slice of the NEXT photo peeking
   below (361×233, rotated -2°). Proportions taken from Figma node 56:3368. */
.ws-intro__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 406 / 230;
  margin-bottom: clamp(20px, 3.4vw, 30px); /* room for the peek that overflows below */
}
.ws-intro__photo-peek {
  position: absolute;
  left: 4.6%; top: 12.6%;
  width: 88.9%; height: 101.3%;
  border-radius: 24px; overflow: hidden;
  z-index: 0;
  transform: rotate(-2deg);
  transform-origin: top left;
  box-shadow: 0 16px 30px -22px rgba(64,3,45,.45);
}
.ws-intro__photo-peek img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: opacity .3s ease;
}
.ws-intro__photo-frame {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  border-radius: 24px; overflow: hidden;
  background: var(--ws-white);
  box-shadow: 0 0 0 3px var(--ws-white), 0 18px 38px -22px rgba(64,3,45,.40);
}
.ws-intro__photo-track { position: absolute; inset: 0; }
.ws-intro__photo-ph { position: absolute; inset: 0; background: linear-gradient(135deg, var(--ws-sky-soft), var(--ws-pink)); }
.ws-intro__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transform: scale(1.06);
  transition: opacity .7s ease, transform 1.4s ease;
  will-change: opacity, transform;
}
.ws-intro__slide.is-active { opacity: 1; transform: scale(1); }
.ws-intro__photo:not(.is-slider) .ws-intro__slide { position: relative; opacity: 1; transform: none; transition: none; }

.ws-intro__photo-nav {
  position: absolute;
  right: 14px; bottom: 14px;
  display: flex; gap: 8px;
  z-index: 3;
}
.ws-intro__photo-nav button {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ws-white);
  color: var(--ws-plum);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(64,3,45,.45);
  transition: transform .2s var(--tx-spring), background .2s, color .2s;
}
.ws-intro__photo-nav button:hover { background: var(--ws-sky); transform: translateY(-1px) scale(1.05); }
.ws-intro__photo-nav button:active { transform: scale(.95); }

.ws-intro__title {
  font-size: clamp(30px, 3.6vw, 40px);
  color: var(--ws-plum);
  line-height: 1.05;
  margin: 6px 0 4px;
}
.ws-intro__body {
  color: var(--ws-plum);
  font-size: var(--fs-lg);
  line-height: 1.6;
  margin: 0;
}
.ws-intro__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  text-align: left;
}
@media (min-width: 640px) {
  .ws-intro__features { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
}
@media (min-width: 960px) {
  .ws-intro__grid { grid-template-columns: minmax(360px, 440px) 1fr; gap: 56px; align-items: start; }
  .ws-intro__left { margin-inline: 0; }
}
@media (min-width: 1100px) {
  .ws-intro__grid { gap: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-intro__slide { transition: opacity .2s ease; transform: none; }
  .ws-intro__slide.is-active { transform: none; }
}

/* ── About strip ─────────────────────────────────────────── */
.ws-about {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  padding: var(--section-y-sm) 0;
}
.ws-about h2 { margin-bottom: 14px; }
.ws-about p { font-size: var(--fs-lg); color: var(--ws-plum); max-width: 640px; }

/* Inline accent words (place names) with wavy underlines */
.ws-accent {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  font-weight: 600;
}
.ws-accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 8px;
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
}
.ws-accent--orange { color: var(--ws-orange); }
.ws-accent--orange::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8' fill='none'><path d='M2 5 Q 8 1 14 5 T 26 5 T 38 5 T 50 5 T 62 5 T 74 5 T 78 5' stroke='%23FF8023' stroke-width='2.4' stroke-linecap='round' fill='none'/></svg>");
}
.ws-accent--sky { color: var(--ws-sky-dark); }
.ws-accent--sky::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8' fill='none'><path d='M2 5 Q 8 1 14 5 T 26 5 T 38 5 T 50 5 T 62 5 T 74 5 T 78 5' stroke='%23b50500' stroke-width='2.4' stroke-linecap='round' fill='none'/></svg>");
}

/* ── Best programs (Spa + K-Pop, large cards) ────────────── */
.ws-programs__head { text-align: center; margin-bottom: 36px; }
.ws-programs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.ws-program {
  border-radius: 32px; /* Figma card radius */
  padding: clamp(24px, 5vw, 32px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.ws-program--pink { background: var(--ws-pink); }
.ws-program--cream { background: var(--ws-cream-soft); }
.ws-program--sky { background: var(--ws-sky-soft); } /* soft sky program-card variant */
.ws-program--white { background: var(--ws-white); }
/* Media = layered photo slider (same treatment as the intro block). The card
   behind shows the NEXT photo, tilted -2°, so a slice peeks below the main photo.
   Photo size per Figma ≈ 520×552 (slightly taller than square). */
.ws-program__media {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 520 / 552;
  margin-left: auto;
  margin-bottom: clamp(24px, 4vw, 40px); /* reserves room for the peek below */
}
.ws-program--reverse .ws-program__media { margin-left: 0; margin-right: auto; }

.ws-program__peek {
  position: absolute;
  left: 5%; top: 6%;
  width: 90%; height: 100%;
  border-radius: 24px; overflow: hidden;
  z-index: 0;
  transform: rotate(-2deg);
  transform-origin: top left;
  box-shadow: 0 18px 30px -22px rgba(64,3,45,.50);
}
.ws-program__peek img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s ease; }

.ws-program__frame {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  border-radius: 24px; overflow: hidden;
  background: var(--ws-white);
  box-shadow: 0 0 0 6px var(--ws-white), 0 20px 40px -22px rgba(64,3,45,.45);
}
.ws-program__track { position: absolute; inset: 0; }
.ws-program__ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.55);
  color: var(--ws-plum); font-family: var(--font-display); font-size: 24px; opacity: .6;
}
.ws-program__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transform: scale(1.06);
  transition: opacity .7s ease, transform 1.4s ease;
  will-change: opacity, transform;
}
.ws-program__slide.is-active { opacity: 1; transform: scale(1); }
.ws-program__media:not(.is-slider) .ws-program__slide { position: relative; opacity: 1; transform: none; transition: none; }

.ws-program__nav {
  position: absolute; right: 16px; bottom: 16px;
  display: flex; gap: 8px;
  z-index: 3;
}
.ws-program__nav button {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ws-white);
  color: var(--ws-plum);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(64,3,45,.45);
  transition: transform .2s var(--tx-spring), background .2s, color .2s;
}
.ws-program__nav button:hover { background: var(--ws-sky); transform: translateY(-1px) scale(1.05); }
.ws-program__nav button:active { transform: scale(.95); }
.ws-program__body h3 { font-size: clamp(32px, 3.8vw, 44px); margin-bottom: 20px; color: var(--ws-plum); }
.ws-program__body p  { color: var(--ws-plum); line-height: 1.65; font-size: var(--fs-lg); margin: 0; }
.ws-program__body p + p { margin-top: 16px; }
.ws-program__includes {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--ws-plum);
  margin: 24px 0 12px; /* paragraph → includes → list rhythm (Figma) */
}
.ws-program__list {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; /* 32px row pitch, ~30px columns */
}
.ws-program__list li {
  padding-left: 30px; position: relative;
  font-size: 17px; color: var(--ws-plum);
  line-height: 1.35;
}
.ws-program__list li::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 18px; height: 16px;
  background: no-repeat left center / 18px 13px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13' fill='none'><path d='M2 7L7 11L16 2' stroke='%2341042D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.ws-program__price-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: clamp(28px, 4vw, 44px); /* generous gap before price + button (Figma) */
  flex-wrap: wrap; gap: 16px;
}
.ws-program__price {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 40px);
  color: var(--ws-plum);
  line-height: 1;
}
.ws-program__duration {
  font-family: var(--font-body); /* Lora (serif), like the screenshot */
  font-size: 16px;
  color: var(--ws-plum);
  margin-top: 10px;
}
/* Program-card CTA pill: 184×64, 1.5px plum border, and a HARD 2px plum offset
   shadow (feOffset dy=2, no blur) = a candy-button lip, not a soft glow. */
.ws-program__cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  color: var(--ws-plum);
  background: var(--ws-white);
  border: 1.5px solid var(--ws-plum);
  border-radius: var(--r-pill);
  line-height: 1.2;
  padding: 20px 38px; /* ≈ Figma 184×64 pill */
  text-decoration: none;
  box-shadow: 0 2px 0 0 var(--ws-plum);
  transition: transform .15s var(--tx-spring), box-shadow .15s var(--tx-spring), background .2s;
  white-space: nowrap;
}
.ws-program__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 0 var(--ws-plum);
}
.ws-program__cta:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 0 var(--ws-plum);
}

/* ── Entertainment slider (legacy engine section, unused) ── */
/* Cream section, convex "hill" divider on top */
.ws-entertainment {
  position: relative;
  background: #F3E3CC; /* Figma section bg */
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.ws-entertainment::before { /* the cream bulges UP into the section above (a hill/mound) */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: clamp(28px, 4vw, 56px);
  background: #F3E3CC;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 C 470 -10 970 -10 1440 100 Z' fill='white'/></svg>") bottom center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 C 470 -10 970 -10 1440 100 Z' fill='white'/></svg>") bottom center / 100% 100% no-repeat;
  pointer-events: none;
}
.ws-entertainment__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.ws-entertainment__intro { max-width: 800px; }
.ws-entertainment__head p { color: var(--ws-plum); font-size: var(--fs-lg); margin: 0; line-height: 1.55; }
.ws-entertainment__nav { display: flex; gap: 12px; flex-shrink: 0; }
.ws-entertainment__arrow {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ws-white);
  color: var(--ws-plum);
  border: 1px solid rgba(64, 0, 40, .15);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px -8px rgba(64,0,40,.18);
  transition: background .2s, transform .2s var(--tx-spring), border-color .2s;
}
.ws-entertainment__arrow:hover {
  background: var(--ws-sky);
  border-color: var(--ws-plum);
  transform: translateY(-1px);
}
.ws-entertainment__arrow[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }

/* Horizontal scroll-snap slider */
.ws-cards {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 60px 0 22px; /* top room for the character pop-out beyond the card */
}
.ws-cards::-webkit-scrollbar { display: none; }
.ws-cards .ws-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(82vw, 320px);   /* mobile: one readable card + a peek of the next */
}
@media (min-width: 720px) {
  .ws-cards .ws-card { width: calc((100% - 40px) / 3); }
}
@media (min-width: 1024px) {
  .ws-cards .ws-card { width: calc((100% - 60px) / 4); }
}
@media (min-width: 1280px) {
  .ws-cards .ws-card { width: calc((100% - 80px) / 4.5); }
}

/* Progress bar under the slider */
.ws-entertainment__progress {
  position: relative;
  height: 2px;
  background: rgba(64, 0, 40, .15);
  border-radius: 2px;
  margin: 28px auto 0;
  max-width: 720px;
  overflow: hidden;
}
.ws-entertainment__progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--ws-plum);
  border-radius: 2px;
  width: 30%;
  transition: width .25s var(--tx-base), transform .25s var(--tx-base);
  transform-origin: left;
}
/* Card = rounded photo (3:2) + title/desc/meta + sky pill button, on the cream
   section (no white box). */
/* Card = WHITE card (rounded + shadow) with a colored "stage" at the top; the
   character PNG sits on the stage and pops out the top (3D look). Figma "card". */
.ws-card {
  background: var(--ws-white);
  border-radius: 24px;
  display: flex; flex-direction: column;
  overflow: visible;              /* lets the character image rise above the card */
  padding-bottom: 24px;
  transition: transform .3s var(--tx-spring);
}
.ws-card:hover { transform: translateY(-4px); }

.ws-card__media {
  position: relative;
  margin: 0;                      /* edge-to-edge colour fill (Figma) */
  aspect-ratio: 300 / 200;
  border-radius: 24px 24px 0 0;   /* top corners match the card; flat bottom */
  background: var(--ws-sky);      /* per-card accent colour — set inline */
}
/* Cover mode — a rectangular photo fills the stage (clipped, rounded). */
.ws-card__media--cover { overflow: hidden; }
.ws-card__media--cover img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .6s var(--tx-base);
}
.ws-card:hover .ws-card__media--cover img { transform: scale(1.05); }
/* Pop-out mode — a transparent character PNG, bottom-anchored + taller than the
   stage so the head rises above it. */
.ws-card__media--pop { overflow: visible; }
.ws-card__media--pop img {
  position: absolute; left: 50%; bottom: 0;
  width: auto; height: 120%; max-width: 115%;  /* rises a bit above the card; capped horizontal spread */
  object-fit: contain; object-position: bottom center;
  transform: translateX(-50%);
  transform-origin: bottom center;   /* scale grows up from the floor, stays anchored */
  filter: drop-shadow(0 12px 16px rgba(64,3,45,.24));
  transition: transform .45s var(--tx-spring);
}
/* No separate lift (avoids double animation with the card) — just gently enlarge. */
.ws-card:hover .ws-card__media--pop img { transform: translateX(-50%) scale(1.06); }

.ws-card__body { padding: 18px 24px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ws-card__title {
  font-family: var(--font-ui);    /* Fredoka Medium — lighter than Fredoka One */
  font-weight: 500;
  font-size: 26px;
  color: var(--ws-plum);
  margin: 0; line-height: 1.1;
}
.ws-card__desc { font-family: var(--font-body); font-size: 16px; color: var(--ws-plum); margin: 0; line-height: 1.55; flex: 1; }
.ws-card__price {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-ui); color: var(--ws-plum);
  margin-top: 8px;
}
.ws-card__price-from { font-size: 17px; font-weight: 500; }
.ws-card__price-amt  { font-size: 26px; font-weight: 600; }
.ws-card__meta { font-family: var(--font-body); font-size: 16px; color: var(--ws-plum); }
.ws-card__cta {
  margin: 16px 8px 0;
  display: flex; align-items: center; justify-content: center;
  padding: 11px 20px;             /* slimmer → more elongated pill */
  background: var(--ws-sky-soft);
  color: var(--ws-plum);
  border: 1.5px solid var(--ws-plum);
  border-radius: var(--r-pill);
  box-shadow: 0 3px 0 0 var(--ws-plum);   /* thick plum bottom line (candy lip) */
  font-family: var(--font-ui); font-weight: 600; font-size: 17px;
  cursor: pointer;
  transition: transform .2s var(--tx-spring), box-shadow .2s var(--tx-spring);
}
.ws-card__cta:hover { transform: translateY(-2px); box-shadow: 0 5px 0 0 var(--ws-plum); }
.ws-card__cta:active { transform: translateY(1px); box-shadow: 0 1px 0 0 var(--ws-plum); }

/* ── Modal (entertainment "More info") ───────────────────── */
.ws-modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.ws-modal[aria-hidden="false"] { display: flex; animation: ws-modal-in .2s var(--tx-base); }
.ws-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .62);   /* soft frosted white (not plum) */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ws-modal__panel {
  position: relative;
  background: var(--ws-white);
  border-radius: 28px;
  max-width: 1040px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow: 0 40px 80px -30px rgba(64,3,45,.5);
  display: flex; flex-direction: column;
  padding: clamp(22px, 3vw, 38px);
  gap: clamp(16px, 2.2vw, 24px);
  animation: ws-modal-pop .25s var(--tx-spring);
}
.ws-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ws-white);
  color: var(--ws-plum);
  border: 1.5px solid var(--ws-plum);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .2s, transform .2s var(--tx-spring);
}
.ws-modal__close:hover { background: var(--ws-sky); transform: scale(1.05); }
.ws-modal__head { padding-right: 44px; }
.ws-modal__title {
  font-family: var(--font-display);
  color: var(--ws-plum);
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0; line-height: 1.05;
}
.ws-modal__subtitle {
  font-family: var(--font-body);
  color: var(--ws-sky-dark);
  font-size: clamp(16px, 1.9vw, 20px);
  margin: 6px 0 0;
}
.ws-modal__cols { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.6vw, 34px); align-items: start; }
@media (min-width: 760px) { .ws-modal__cols { grid-template-columns: minmax(0, 430px) 1fr; } }

/* popup gallery slider */
.ws-modal__gallery { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--ws-cream-soft); }
.ws-modal__gallery-track { position: absolute; inset: 0; }
.ws-modal__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.ws-modal__slide.is-active { opacity: 1; }
.ws-modal__gnav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ws-plum); border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(64,3,45,.4);
  transition: background .2s, transform .2s var(--tx-spring);
}
.ws-modal__gnav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.ws-modal__gnav--prev { left: 12px; }
.ws-modal__gnav--next { right: 12px; }
.ws-modal__gdots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; }
.ws-modal__gdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; transition: background .2s, transform .2s; }
.ws-modal__gdot.is-active { background: #fff; transform: scale(1.2); }

/* popup info column */
.ws-modal__info { display: flex; flex-direction: column; gap: 10px; }
.ws-modal__desc { font-family: var(--font-body); color: var(--ws-plum); font-size: 16px; line-height: 1.6; margin: 0; }
.ws-modal__included-title { font-family: var(--font-body); font-weight: 700; color: var(--ws-plum); font-size: 17px; margin-top: 4px; }
.ws-modal__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ws-modal__list li { position: relative; padding-left: 28px; color: var(--ws-plum); font-family: var(--font-body); font-size: 16px; line-height: 1.4; }
.ws-modal__list li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 13px;
  background: no-repeat left center / 18px 13px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13' fill='none'><path d='M2 7L7 11L16 2' stroke='%2341042D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.ws-modal__closing { font-family: var(--font-body); font-weight: 700; color: var(--ws-plum); font-size: 16px; line-height: 1.5; margin-top: 6px; }
.ws-modal__metaline { font-family: var(--font-ui); color: var(--ws-plum-soft); font-size: 15px; margin-top: 4px; }

/* rates / extras / book banner */
.ws-modal__banner {
  background: var(--ws-sky-soft);
  border-radius: 22px;
  padding: clamp(18px, 2.4vw, 28px);
  display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center;
}
@media (min-width: 760px) { .ws-modal__banner { grid-template-columns: 1fr 1fr auto; gap: 28px; } }
.ws-modal__banner-title { font-family: var(--font-ui); font-weight: 700; color: var(--ws-plum); font-size: 18px; margin-bottom: 8px; }
.ws-modal__rates { position: relative; }
@media (min-width: 760px) { .ws-modal__rates::after { content: ''; position: absolute; top: 2px; bottom: 2px; right: -14px; width: 2px; background: rgba(64,3,45,.18); } }
.ws-modal__rate { color: var(--ws-plum); font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
.ws-modal__rate strong { font-weight: 700; }
.ws-modal__book {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  background: var(--ws-sky-soft); color: var(--ws-plum);
  font-family: var(--font-ui); font-weight: 600; font-size: 18px;
  padding: 14px 30px; border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--ws-plum);
  box-shadow: 0 3px 0 0 var(--ws-plum);   /* sky candy button (site style) */
  transition: transform .2s var(--tx-spring), box-shadow .2s var(--tx-spring);
}
.ws-modal__book:hover { transform: translateY(-2px); box-shadow: 0 5px 0 0 var(--ws-plum); }
.ws-modal__book:active { transform: translateY(1px); box-shadow: 0 1px 0 0 var(--ws-plum); }

/* shared RATES grid + EXTRAS — compact two-column banner (table left, extras right, CTA below) */
.ws-modal__banner--table { grid-template-columns: 1fr; justify-items: center; gap: 12px 28px; padding: clamp(16px, 2vw, 24px); }
@media (min-width: 720px) {
  .ws-modal__banner--table {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    align-items: start;
    justify-items: start;
    column-gap: 30px;
    row-gap: 14px;
  }
  .ws-modal__banner--table .ws-modal__extras .ws-modal__banner-title { text-align: left; }
}
/* right column: EXTRAS + the Book button stacked. The button sits directly under
   EXTRAS, filling the space the taller table leaves — so the banner is only as
   tall as the table (no separate full-width button row). */
.ws-modal__side { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.ws-modal__side .ws-modal__book { margin-top: 2px; }
/* min-width:0 lets both columns shrink inside the capped modal panel (no overflow) */
.ws-modal__banner--table .ws-modal__rate-grid,
.ws-modal__banner--table .ws-modal__side { min-width: 0; }
.ws-modal__rate-grid { width: 100%; max-width: 440px; }
.ws-modal__banner--table .ws-modal__banner-title { text-align: center; margin-bottom: 6px; }
.ws-rate-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;
  table-layout: fixed;
  font-family: var(--font-ui);
}
.ws-rate-table th, .ws-rate-table td {
  border-radius: 11px;
  padding: 7px 5px;
  text-align: center;
  line-height: 1.12;
}
.ws-rate-table thead th, .ws-rate-table tbody th {
  background: var(--ws-sky-soft);
  color: var(--ws-plum);
  font-weight: 700;
  font-size: 13px;
}
.ws-rate-table__corner { background: transparent !important; }
.ws-rate-table td {
  background: #fff;
  color: var(--ws-plum);
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 1px 0 rgba(64,3,45,.05);
}
.ws-rate-table__na { color: rgba(64,3,45,.32); font-weight: 600; }
.ws-modal__banner--table .ws-modal__extras .ws-modal__rate { font-size: 15px; line-height: 1.5; }
@media (max-width: 520px) {
  .ws-rate-table { border-spacing: 5px; }
  .ws-rate-table th, .ws-rate-table td { padding: 6px 3px; border-radius: 9px; }
  .ws-rate-table thead th, .ws-rate-table tbody th { font-size: 12px; }
  .ws-rate-table td { font-size: 14px; }
}

@keyframes ws-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ws-modal-pop {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Decorations cards (2 large) ─────────────────────────── */
.ws-decorations__head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.ws-decorations__head p { color: var(--ws-ink-soft); font-size: var(--fs-lg); }
/* Decorations — cream section, layered photo slider + fixed white info block */
.ws-decorations { position: relative; padding-bottom: clamp(92px, 10vw, 140px); }
/* Decorations gallery — one large photo + a thumbnail strip to browse every photo. */
.ws-decogallery { display: flex; flex-direction: column; gap: clamp(44px, 5.5vw, 72px); max-width: 720px; margin-inline: auto; }

.ws-decogal { position: relative; }
.ws-decogal__stage { position: relative; margin-bottom: clamp(26px, 3.2vw, 44px); }

.ws-decogal__frame {
  position: relative;
  aspect-ratio: 4 / 3;                          /* full photo via contain + soft blurred fill */
  border-radius: 28px; overflow: hidden;
  background: var(--ws-cream-soft);
  box-shadow: 0 0 0 3px #fff, 0 26px 48px -30px rgba(64,3,45,.34);
}
.ws-decogal__track { position: absolute; inset: 0; }
.ws-decogal__ph { position: absolute; inset: 0; background: linear-gradient(135deg, var(--ws-sky-soft), var(--ws-pink)); }
.ws-decogal__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.ws-decogal__slide.is-active { opacity: 1; }
.ws-decogal__blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); filter: blur(22px) brightness(.92) saturate(1.05); }
.ws-decogal__img  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.ws-decogal__info {                            /* compact white block over the photo bottom */
  position: absolute; left: clamp(14px, 1.8vw, 24px); right: clamp(14px, 1.8vw, 24px); bottom: clamp(14px, 1.8vw, 22px); z-index: 2;
  background: var(--ws-white);
  border-radius: 18px;
  padding: clamp(11px, 1.3vw, 15px) clamp(16px, 2vw, 24px);
  box-shadow: 0 16px 30px -22px rgba(64,3,45,.32);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.ws-decogal__name { margin: 0; font-family: var(--font-ui); font-weight: 500; font-size: clamp(20px, 2.2vw, 27px); color: var(--ws-plum); line-height: 1.05; }
.ws-decogal__desc { margin: 3px 0 0; font-family: var(--font-body); font-size: clamp(13px, 1vw, 15px); line-height: 1.4; color: var(--ws-ink-soft); max-width: 52ch; }
.ws-decogal__info-side { display: flex; flex-direction: row; align-items: center; gap: 14px; flex-shrink: 0; }
.ws-decogal__price { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-ui); color: var(--ws-plum); white-space: nowrap; }
.ws-decogal__price-from { font-size: 15px; font-weight: 500; }
.ws-decogal__price-amt  { font-size: clamp(20px, 2vw, 26px); font-weight: 600; }
.ws-decogal__nav { display: flex; gap: 9px; }
.ws-decogal__nav button {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ws-sky); color: var(--ws-plum); border: 1.5px solid var(--ws-plum); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 0 var(--ws-plum);
  transition: transform .15s var(--tx-spring), background .2s;
}
.ws-decogal__nav button:hover { background: var(--ws-sky-dark); }
.ws-decogal__nav button:active { transform: translateY(3px); box-shadow: 0 0 0 0 var(--ws-plum); }

.ws-decogal__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 84px)); justify-content: center; gap: clamp(8px, 1vw, 12px); }
.ws-decogal__thumb {
  position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; cursor: pointer;
  padding: 0; border: 3px solid transparent; background: var(--ws-cream-soft);
  box-shadow: 0 0 0 1.5px rgba(64,3,45,.12);
  transition: transform .15s var(--tx-spring), border-color .2s, box-shadow .2s;
}
.ws-decogal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-decogal__thumb:hover { transform: translateY(-3px); }
.ws-decogal__thumb.is-active { border-color: var(--ws-sky-dark); box-shadow: 0 0 0 2px var(--ws-sky-dark), 0 10px 20px -12px rgba(64,3,45,.5); }
.ws-decogal__thumb:focus-visible { outline: 2px solid var(--ws-plum); outline-offset: 2px; }

@media (max-width: 760px) {
  .ws-decogal__info { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ws-decogal__info-side { width: 100%; justify-content: space-between; }
}

/* Phones: the desktop overlay covered the photo on small screens. Stack the
   white info card BELOW the photo instead — photo (4:3 card) on top, info card
   under it, both rounded. The thumbnail strip stays below as before. */
@media (max-width: 600px) {
  .ws-decogal__frame {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .ws-decogal__track {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    overflow: hidden;
    background: var(--ws-cream-soft);
    box-shadow: 0 0 0 3px #fff, 0 20px 40px -28px rgba(64,3,45,.34);
  }
  .ws-decogal__info {
    position: static;
    margin-top: 14px;
    box-shadow: 0 14px 30px -24px rgba(64,3,45,.30), 0 0 0 1.5px rgba(64,3,45,.06);
  }
}

/* Hammock (∪) divider blending into the sky "Our works" section below */
.ws-decorations::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(44px, 5vw, 80px);
  background: var(--ws-sky);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 0 C 460 92 980 92 1440 0 L1440 100 L0 100 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 0 C 460 92 980 92 1440 0 L1440 100 L0 100 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
  pointer-events: none; z-index: 0;
}

/* ── Works gallery (sky bg, double-row marquee) ──────────── */
.ws-works {
  background: var(--ws-sky);
  color: var(--ws-plum);
  overflow: hidden;
  position: relative;
}
.ws-works__head { text-align: center; max-width: 880px; margin: 0 auto 40px; padding: 0 var(--gutter); }
.ws-works__head h2 { color: var(--ws-plum); }
.ws-works__head p { color: var(--ws-plum); font-size: var(--fs-lg); line-height: 1.55; }

.ws-marquee { display: flex; flex-direction: column; gap: 18px; }
.ws-marquee__row {
  display: flex;
  overflow: hidden;                               /* JS animates the track via transform */
  cursor: grab; touch-action: pan-y;              /* vertical = page scroll, horizontal = drag */
  padding: 10px 0;                                /* room for the white frame */
  /* Mask out edges so images fade in/out smoothly */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ws-marquee__row.is-grabbing { cursor: grabbing; }
.ws-marquee__track {
  display: flex; flex-shrink: 0; gap: 18px; width: max-content;
  /* GPU-composited transform = sub-pixel smooth, no scrollLeft rounding jitter */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.ws-marquee__item {
  flex: 0 0 auto;
  width: 280px;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 0 0 3px #fff, 0 10px 22px -12px rgba(64,3,45,.30);  /* 3px white frame */
}
.ws-marquee__item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none; /* so drag works over the photos */
}
@media (min-width: 720px)  { .ws-marquee__item { width: 320px; } }
@media (min-width: 1024px) { .ws-marquee__item { width: 360px; } }

/* ── Reviews (light band; red stays on accents) ──────────── */
.ws-reviews {
  background: var(--ws-pink);
  position: relative;
  padding-bottom: clamp(64px, 8vw, 104px);
}
.ws-reviews > .ws-container { position: relative; z-index: 2; }
.ws-reviews h2 { color: var(--ws-plum); }
.ws-reviews__layout {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  align-items: start;
}

/* Google rating card (Figma: 312×432, #FAF8F5, soft plum shadow) */
.ws-google {
  background: var(--ws-surface);
  border-radius: 32px;
  padding: 40px 32px 32px;
  text-align: center;
  box-shadow: 0 8px 48px rgba(64, 4, 45, .10);
  align-self: start;
  display: flex; flex-direction: column; align-items: center;
  gap: 26px;
}
/* "5.0" — Fredoka (regular), NOT Fredoka One: the heavy display face read as
   chunky vs Figma. Lighter weight + open tracking matches the macOS-clean look. */
.ws-google__rating { font-family: var(--font-ui); font-weight: 500; font-size: clamp(68px, 7.5vw, 88px); color: var(--ws-plum); line-height: 1; letter-spacing: .5px; }
.ws-google__stars { color: var(--ws-orange); font-size: 24px; letter-spacing: 6px; }
.ws-google__count { font-family: var(--font-ui); font-weight: 400; color: var(--ws-plum); font-size: 18px; }
.ws-google__logo { display: flex; justify-content: center; }
.ws-google__logo svg { width: 104px; height: auto; display: block; }
.ws-google__btn {
  display: block; width: 100%;
  font-family: var(--font-ui); font-weight: 500; font-size: 16px;
  color: var(--ws-plum); text-align: center; text-decoration: none;
  background: var(--ws-sky);
  border: 1.5px solid var(--ws-plum);
  border-radius: var(--r-pill);
  padding: 17px 24px;
  box-shadow: 0 3px 0 0 var(--ws-plum);             /* hard candy lip */
  transition: transform .14s var(--tx-spring), box-shadow .14s var(--tx-spring);
}
.ws-google__btn:hover  { transform: translateY(-1px); box-shadow: 0 4px 0 0 var(--ws-plum); }
.ws-google__btn:active { transform: translateY(2px);  box-shadow: 0 1px 0 0 var(--ws-plum); }

/* Mobile: compact, HORIZONTAL rating cluster — the big "5.0" sits beside the
   stars + count (like Google's own widget), with the logo + full-width button
   below. Roughly halves the card height vs the stacked layout (client feedback). */
@media (max-width: 600px) {
  .ws-google {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    column-gap: 16px;
    row-gap: 2px;
    text-align: left;
    padding: 22px 24px 24px;
    border-radius: 28px;
  }
  .ws-google__rating { grid-column: 1; grid-row: 1 / span 2; align-self: center; font-size: 52px; letter-spacing: 0; line-height: .9; }
  .ws-google__stars  { grid-column: 2; grid-row: 1; align-self: end;   font-size: 22px; letter-spacing: 4px; }
  .ws-google__count  { grid-column: 2; grid-row: 2; align-self: start; font-size: 14px; color: var(--ws-muted); }
  .ws-google__logo   { grid-column: 1 / -1; grid-row: 3; justify-self: center; margin-top: 14px; }
  .ws-google__logo svg { width: 84px; }
  .ws-google__btn    { grid-column: 1 / -1; grid-row: 4; width: 100%; margin-top: 12px; padding: 14px 24px; }
}

/* Testimonials: a card-less list separated by thin hairlines (per Figma) */
.ws-testimonials { display: block; }
.ws-testimonial { padding: 32px 0; border-top: 1px solid rgba(64, 0, 40, .14); }
.ws-testimonial:first-child { border-top: 0; padding-top: 4px; }
.ws-testimonial__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ws-testimonial__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ws-sky-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  color: var(--ws-plum);
  font-size: 22px;
  overflow: hidden; flex-shrink: 0;
}
.ws-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ws-testimonial__name { font-family: var(--font-display); color: var(--ws-plum); font-size: 20px; line-height: 1.2; }
.ws-testimonial__role { font-family: var(--font-ui); color: var(--ws-muted); font-size: 14px; margin-top: 2px; }
.ws-testimonial__stars { color: var(--ws-plum); letter-spacing: 4px; margin-bottom: 14px; font-size: 20px; }
.ws-testimonial__text { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--ws-plum); margin: 0; max-width: 64ch; }

/* ── Booking section ("We create impressions") ───────────── */
/* Full-bleed photo background + gradient overlay, white form card on top. */
.ws-booking {
  position: relative;
  isolation: isolate;
  padding-top: clamp(80px, 10vw, 160px);
  padding-bottom: clamp(40px, 6vw, 80px);
  background-image: var(--ws-booking-bg, none);
  background-size: cover;
  background-position: center;
  color: var(--ws-plum);
}
.ws-booking > .ws-container { position: relative; z-index: 2; }
.ws-booking::before {
  content: '';
  position: absolute; inset: 0;
  /* deep plum bottom — the photo melts down into the plum footer */
  background: linear-gradient(180deg, transparent 50%, rgba(64, 0, 40, .30) 72%, rgba(64, 0, 40, .74) 90%, var(--ws-plum) 100%);
  z-index: -1;
  pointer-events: none;
}
/* Hammock (∪): the sky from Reviews dips into the photo at the top, so the photo
   itself is cut on the arc ("фотография идёт дугой"). Same sky as the section above. */
.ws-booking::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(48px, 6vw, 96px);
  background: var(--ws-sky);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 0 H1440 V8 C 980 92 460 92 0 8 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 0 H1440 V8 C 980 92 460 92 0 8 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
  z-index: 1; pointer-events: none;
}
.ws-booking__inner {
  position: relative;
  background: var(--ws-white);
  border-radius: 32px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 16px 64px rgba(30, 67, 107, .12);
  /* Mobile-first conversion order: promise (head) → form (action) → founder/trust (about).
     DOM order matches this, so the form is never buried under the bio on small screens. */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "form"
    "about";
  gap: 32px;
  align-items: start;
}
.ws-booking__head  { grid-area: head;  }
.ws-form           { grid-area: form;  }
.ws-booking__about { grid-area: about; }
/* >=720px: restore the original two-column look — intro stack (head over about) on the
   left, form spanning the right column. Row-gap is kept tight so the H2→bio rhythm matches
   the pre-split single-column intro; the large gap is column-only (intro ↔ form). */
@media (min-width: 720px) {
  .ws-booking__inner {
    grid-template-columns: 1fr 1.2fr;
    grid-template-areas:
      "head  form"
      "about form";
    grid-template-rows: auto 1fr;
    gap: 18px 48px;
  }
  .ws-booking__about { align-self: start; }
}
@media (min-width: 960px) {
  .ws-booking__inner {
    grid-template-columns: 472px 1fr;
    gap: 18px 96px;
    padding: 48px;
  }
}
.ws-booking__head h2 { font-size: clamp(36px, 5vw, 48px); line-height: 1.15; margin-bottom: 0; color: var(--ws-plum); }
.ws-booking__about p { color: var(--ws-plum); font-size: 18px; line-height: 32px; max-width: 472px; }
.ws-booking__about p + p { margin-top: 18px; }
.ws-founder {
  display: flex; align-items: center; gap: 24px;
  margin-top: 28px;
}
.ws-founder__pic {
  width: 160px; height: 160px; border-radius: 50%;
  background: var(--ws-pink-dark); overflow: hidden; flex-shrink: 0;
}
.ws-founder__pic img { width: 100%; height: 100%; object-fit: cover; }
.ws-founder__name { font-family: var(--font-display); color: var(--ws-plum); font-size: 28px; line-height: 1.05; margin-bottom: 6px; }
.ws-founder__role { font-family: var(--font-ui); color: var(--ws-muted); font-size: 16px; }
.ws-form {
  /* Unified single white surface — flush on the booking card, no nested card. */
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.ws-form__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.ws-input, .ws-textarea {
  width: 100%;
  font: 400 18px/1.33 var(--font-body);
  color: var(--ws-plum);
  background: rgba(243, 227, 204, .2);
  border: 1px solid rgba(65, 4, 45, .5);
  border-radius: 16px;
  padding: 24px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.ws-input:focus, .ws-textarea:focus {
  outline: none;
  border-color: var(--ws-plum);
  background: rgba(243, 227, 204, .35);
  box-shadow: 0 0 0 3px rgba(128, 216, 232, .35);
}

/* ── Accessibility: skip link + global keyboard focus ring ─────────── */
.ws-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 18px;
  background: var(--ws-plum);
  color: var(--ws-white);
  font: 600 16px/1 var(--font-ui);
  text-decoration: none;
  border-radius: 0 0 12px 0;
}
.ws-skip-link:focus {
  left: 16px;
  top: 16px;
  border-radius: 12px;
  outline: 3px solid var(--ws-sky);
  outline-offset: 2px;
}
/* Visible focus ring for keyboard users on all interactive elements.
   Form fields keep their bespoke ring above (outline:none + box-shadow). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
.ws-btn:focus-visible,
.ws-nav a:focus-visible,
.ws-header__cta:focus-visible {
  outline: 3px solid var(--ws-sky);
  outline-offset: 2px;
  border-radius: 4px;
}
.ws-input::placeholder, .ws-textarea::placeholder { color: var(--ws-plum); opacity: .55; }
.ws-textarea { min-height: 200px; resize: vertical; }
.ws-form__row { display: contents; }
.ws-form__submit-row {
  display: flex; justify-content: stretch;
  margin-top: 8px;
}
.ws-form__submit-row > button {
  /* Send request button — Figma: full-width sky pill with plum border + 2px solid drop shadow */
  width: 100%;
  background: var(--ws-sky);
  color: var(--ws-plum);
  border: 1.5px solid var(--ws-plum);
  border-radius: 64px;
  padding: 20px 40px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  box-shadow: 0 2px 0 var(--ws-plum);
  cursor: pointer;
  transition: transform .15s var(--tx-spring), box-shadow .15s var(--tx-base);
}
.ws-form__submit-row > button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--ws-plum);
}
.ws-form__submit-row > button:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 var(--ws-plum);
}
.ws-form__msg { padding: 12px 16px; border-radius: var(--r-md); font-size: 14px; margin-bottom: 12px; }
.ws-form__msg--ok { background: rgba(128,216,232,.25); color: var(--ws-plum); border: 1px solid var(--ws-sky-dark); }
.ws-form__msg--err { background: rgba(248,192,216,.4); color: var(--ws-plum-soft); border: 1px solid var(--ws-pink-dark); }
.ws-booking__connect {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgba(64, 0, 40, .12);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.ws-socials { display: flex; gap: 16px; }
.ws-socials a { color: var(--ws-plum); display: inline-flex; transition: color .2s, transform .2s var(--tx-spring); }
.ws-socials a:hover { color: var(--ws-orange); transform: translateY(-2px); }
.ws-email {
  color: var(--ws-plum); font-family: var(--font-ui); font-weight: 600; font-size: 18px;
  text-decoration: underline; text-decoration-color: var(--ws-orange);
  text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.ws-email:hover { text-decoration-color: var(--ws-plum); }
.ws-phone { color: var(--ws-plum); font-family: var(--font-ui); font-weight: 600; font-size: 18px; }
.ws-phone:hover { color: var(--ws-orange); }

/* ── Booking: mobile conversion polish (single column, < two-col breakpoint) ─────
   Order is head → form → about. Here we make the trust block readable & tappable
   without altering the desktop two-column layout above. */
@media (max-width: 719px) {
  /* The "about" trust block reads as a distinct, calmer section below the form. */
  .ws-booking__about {
    margin-top: 4px;
    padding-top: 28px;
    border-top: 1px solid rgba(64, 0, 40, .12);
  }
  /* Founder: smaller portrait so the name/role sit neatly beside it on narrow screens. */
  .ws-founder { gap: 18px; margin-top: 22px; }
  .ws-founder__pic { width: 96px; height: 96px; }
  .ws-founder__name { font-size: 24px; }
  /* The connect block no longer needs its own divider (about already has one). */
  .ws-booking__connect { margin-top: 22px; padding-top: 22px; }
  /* Comfortable, >=44px tap targets for email / phone / social icons. */
  .ws-booking__connect .ws-email,
  .ws-booking__connect .ws-phone {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .ws-socials { gap: 12px; }
  .ws-socials a {
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(135, 221, 237, .18);
  }
}

/* ── Footer ──────────────────────────────────────────────── */
.ws-footer {
  background: var(--ws-plum);
  color: rgba(255,255,255,.85);
  padding: clamp(48px, 7vw, 72px) 0 24px;
  font-family: var(--font-ui);
}
.ws-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  margin-bottom: 32px;
}
.ws-footer h4 { color: var(--ws-white); font-family: var(--font-display); font-size: 18px; margin: 0 0 14px; }
.ws-footer a { color: rgba(255,255,255,.78); transition: color .2s; }
.ws-footer a:hover { color: var(--ws-sky); }
.ws-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ws-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--ws-white); font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; font-size: 18px; letter-spacing: .04em; }
.ws-footer__brand .ws-logo__mark { width: 50px; height: 35px; filter: brightness(1.1); }
.ws-footer__brand-text { display: inline-flex; flex-direction: column; line-height: 1.05; }
.ws-footer__about { color: rgba(255,255,255,.70); font-size: 14px; max-width: 320px; line-height: 1.6; }
.ws-footer__contact { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: rgba(255,255,255,.78); }
.ws-footer__contact a { color: rgba(255,255,255,.92); }
.ws-footer__social { display: flex; gap: 10px; margin-top: 14px; }
.ws-footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
}
.ws-footer__social a:hover { background: var(--ws-sky); color: var(--ws-plum); }
.ws-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.ws-footer__bottom a:hover { color: var(--ws-sky); }

/* ── Service / legal page wrapper ────────────────────────── */
.ws-page {
  background: var(--ws-cream);
  padding: clamp(64px, 8vw, 112px) 0 var(--section-y);
}
.ws-page__inner {
  max-width: 820px;
  margin: 0 auto;
  background: var(--ws-white);
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
}
.ws-page__inner h1 { font-size: clamp(32px, 4.5vw, 48px); margin-bottom: 24px; }
.ws-page__inner h2 { margin-top: 36px; }
.ws-page__inner h3 { margin-top: 24px; }
.ws-page__inner p, .ws-page__inner li { color: var(--ws-ink-soft); font-size: 16px; line-height: 1.75; }
.ws-page__inner ul, .ws-page__inner ol { padding-left: 22px; }
/* Restore visible bullets on content lists: the engine reset (style.css
   `ul{list-style:none}`) left inner-page lists marker-less. Match the blog
   treatment (disc + brand-red marker); utility lists opt back out below. */
.ws-page__inner ul { list-style: disc; }
.ws-page__inner ul ul { list-style: circle; }
.ws-page__inner ol { list-style: decimal; }
.ws-page__inner li::marker { color: var(--gd-red); font-weight: 600; }
.ws-page__inner ul.zip-code-list,
.ws-page__inner ul.gd-citylist,
.ws-page__inner .gd-citylist ul { list-style: none; padding-left: 0; }
.ws-page__inner a { color: var(--ws-plum); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ws-sky); }
.ws-page__inner a:hover { text-decoration-color: var(--ws-plum); }

/* ── Blog list / post ────────────────────────────────────── */
.ws-blog { padding: clamp(64px, 7vw, 96px) 0; }
.ws-blog__head { text-align: center; margin-bottom: 40px; }
.ws-blog__head h1 { margin-bottom: 12px; }
.ws-bloglist { display: grid; grid-template-columns: 1fr; gap: 22px; }
.ws-blogcard {
  background: var(--ws-white); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  transition: transform .3s var(--tx-spring), box-shadow .3s var(--tx-base);
}
.ws-blogcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.ws-blogcard__media { aspect-ratio: 16/10; overflow: hidden; background: var(--ws-cream-soft); }
.ws-blogcard__media img { width: 100%; height: 100%; object-fit: cover; }
.ws-blogcard__body { padding: 22px 22px 26px; }
.ws-blogcard__cat { display: inline-block; font-family: var(--font-ui); font-size: 12px; color: var(--ws-plum); background: var(--ws-sky-soft); padding: 4px 10px; border-radius: var(--r-pill); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.ws-blogcard h3 { font-size: 20px; margin: 0 0 8px; }
.ws-blogcard__excerpt { color: var(--ws-ink-soft); font-size: 15px; margin: 0; }
.ws-blogcard__meta { font-family: var(--font-ui); font-size: 12px; color: var(--ws-muted); margin-top: 12px; }

.ws-post { background: var(--ws-cream); padding: clamp(64px, 8vw, 96px) 0; }
.ws-post__article { max-width: 760px; margin: 0 auto; }
.ws-post__hero { aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 28px; box-shadow: var(--shadow-soft); }
.ws-post__hero img { width: 100%; height: 100%; object-fit: cover; }
.ws-post__title { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: 14px; }
.ws-post__meta { font-family: var(--font-ui); color: var(--ws-muted); margin-bottom: 30px; font-size: 14px; }
.ws-post__body { background: var(--ws-white); padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); box-shadow: var(--shadow-soft); }
.ws-post__body p, .ws-post__body li { font-size: 17px; line-height: 1.75; color: var(--ws-ink-soft); }
.ws-post__body h2, .ws-post__body h3 { margin-top: 28px; }
.ws-post__body img { border-radius: var(--r-md); margin: 14px 0; }

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width: 720px) {
  .ws-features__grid { grid-template-columns: repeat(4, 1fr); }
  .ws-cards          { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .ws-gallery        { grid-template-columns: repeat(3, 1fr); }
  .ws-form__grid     { grid-template-columns: 1fr 1fr; }
  .ws-form__textarea-wrap { grid-column: 1 / -1; }
  .ws-bloglist       { grid-template-columns: 1fr 1fr; }
  .ws-program        { grid-template-columns: 1.15fr 1fr; padding: clamp(36px, 4.5vw, 56px); gap: clamp(32px, 4vw, 56px); }
  .ws-program--reverse { grid-template-columns: 1fr 1.15fr; }
  .ws-program--reverse .ws-program__media { order: -1; } /* photo LEFT, text RIGHT */
  .ws-reviews__layout { grid-template-columns: 312px 1fr; gap: clamp(48px, 6vw, 96px); }
  /* Match the Figma card exactly: 312×432, content distributed top→bottom */
  .ws-google { min-height: 432px; padding: 44px 32px 36px; justify-content: space-between; }
  /* .ws-booking__inner two-column layout is defined with its grid-template-areas above. */
  .ws-footer__grid    { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
}
@media (min-width: 960px) {
  .ws-hero__inner   { grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
  .ws-cards         { grid-template-columns: repeat(3, 1fr); }
  .ws-gallery       { grid-template-columns: repeat(4, 1fr); }
  .ws-bloglist      { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1180px) {
  .ws-cards { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 880px) {
  /* Mobile pill = logo · CTA button · burger. Nav + socials move into the drawer.
     Sizes tuned so logo + CTA + burger always fit INSIDE the pill (the burger no
     longer overflows past the rounded right edge). */
  .ws-nav, .ws-social { display: none; }
  .ws-burger { display: flex; width: 40px; height: 40px; }
  .ws-header__island { gap: 10px; justify-content: space-between; padding: 8px 10px 8px 16px; min-width: 0; }
  .ws-logo { flex: 0 1 auto; min-width: 0; }
  .ws-logo__mark { width: 50px; height: 36px; }
  .ws-logo__wordmark { font-size: 15px; }
  .ws-header__right { gap: 8px; margin-left: 0; flex: 0 0 auto; }
  .ws-header__cta { display: inline-flex; padding: 9px 16px; font-size: 14px; flex: 0 0 auto; }
  /* Phone collapses to a round plum icon button (tap-to-call); the number hides. */
  .ws-header__phone {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--ws-plum); color: var(--ws-white);
    justify-content: center; gap: 0; flex: 0 0 auto;
  }
  .ws-header__phone-num { display: none; }
  .ws-header__phone-ico { width: 20px; height: 20px; }
  .ws-header__phone:hover { color: var(--ws-white); background: var(--ws-plum-soft); }
}
@media (max-width: 400px) {
  .ws-logo__wordmark { display: none; }      /* very small phones: logo mark only, keeps the CTA roomy */
  .ws-header__cta { padding: 10px 16px; }
}

/* ── Motion: reduced ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Tiny utility ────────────────────────────────────────── */
.ws-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   GDOING layer — migration-specific components
   (nav dropdown, migrated content, sticky mobile call bar)
   ============================================================ */

/* ── Header logo sizing (SVG lockup 600×120) ─────────────── */
.ws-logo__mark { object-fit: contain; }
@media (min-width: 901px) {
  .ws-logo__mark { width: 190px; height: 38px; }
}
@media (max-width: 900px) {
  /* Compact lockup that still fits the pill island next to burger + CTA */
  .ws-logo__mark { width: 140px !important; height: 28px !important; }
}
@media (max-width: 480px) {
  /* The sticky call bar + drawer already carry the phone — drop the chip */
  .ws-header__phone { display: none !important; }
  .ws-logo__mark { width: 128px !important; height: 26px !important; }
}

/* ── Nav dropdown (Services) ─────────────────────────────── */
.ws-nav__drop { position: relative; display: inline-flex; }
.ws-nav__drop > a { display: inline-flex; align-items: center; gap: 4px; }
.ws-nav__caret { font-size: 10px; opacity: .55; transition: transform .2s var(--tx-base); }
.ws-nav__menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  background: var(--ws-white);
  border: 1px solid var(--ws-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 8px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .18s var(--tx-base), transform .18s var(--tx-base), visibility .18s;
  z-index: 60;
}
.ws-nav__drop:hover .ws-nav__menu,
.ws-nav__drop:focus-within .ws-nav__menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.ws-nav__drop:hover .ws-nav__caret { transform: rotate(180deg); }
.ws-nav__menu a {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--ws-ink);
  white-space: nowrap;
}
.ws-nav__menu a:hover { background: var(--ws-sky-soft); color: var(--ws-sky-dark); }

/* ── Migrated page content (converted WordPress copy) ────── */
.ws-page__inner h2 { margin-top: 44px; }
.ws-page__inner h3 { margin-top: 32px; }
.ws-page__inner figure { margin: 28px 0; }
.ws-page__inner figure img,
.ws-page__inner img,
.ws-post__body img {
  max-width: 100%; height: auto;
  border-radius: var(--r-md);
  display: block;
}
.ws-page__inner table, .ws-post__body table {
  width: 100%; border-collapse: collapse; margin: 24px 0;
  font-size: var(--fs-sm);
}
.ws-page__inner table td, .ws-page__inner table th,
.ws-post__body table td, .ws-post__body table th {
  border: 1px solid var(--ws-line);
  padding: 10px 14px; text-align: left; vertical-align: top;
}
.ws-page__inner table th, .ws-post__body table th { background: var(--ws-pink); }

/* In-content CTA buttons (converted core/button blocks) */
.content-cta { margin: 20px 0; }
.content-cta .btn,
a.btn.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--ws-sky); color: #fff;
  font-weight: 700; font-size: var(--fs-body);
  padding: 13px 26px; border-radius: var(--r-pill);
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(181, 5, 0, .55);
  transition: transform .15s var(--tx-base), background .15s var(--tx-base);
}
.content-cta .btn:hover, a.btn.btn-primary:hover { background: var(--ws-sky-dark); transform: translateY(-1px); }

/* FAQ accordions (converted cozy accordions → <details>) */
.faq-list { margin: 24px 0; display: flex; flex-direction: column; gap: 10px; }
details.faq-item {
  border: 1px solid var(--ws-line-soft);
  border-radius: var(--r-md);
  background: var(--ws-white);
  padding: 0;
  overflow: hidden;
  transition: box-shadow .2s var(--tx-base);
}
details.faq-item[open] { box-shadow: var(--shadow-soft); border-color: var(--ws-sky-soft); }
details.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px;
  font-weight: 600; font-size: var(--fs-lg); color: var(--ws-plum);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ws-sky-soft); color: var(--ws-sky-dark);
  font-weight: 700; font-size: 18px; line-height: 1;
  transition: transform .2s var(--tx-base);
}
details.faq-item[open] summary::after { content: '–'; transform: rotate(180deg); }
details.faq-item .faq-answer { padding: 0 20px 18px; color: var(--ws-ink-soft); }
details.faq-item .faq-answer > :first-child { margin-top: 0; }

/* ── Sticky mobile call bar ──────────────────────────────── */
.gd-callbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--ws-plum);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
}
.gd-callbar a {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 10px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: 15px;
  text-decoration: none;
}
.gd-callbar__call { background: var(--ws-sky); color: #fff; }
.gd-callbar__form { background: #fff; color: var(--ws-plum); }
@media (max-width: 900px) {
  .gd-callbar { display: flex; }
  body { padding-bottom: 68px; }
}

/* ── Narrow-phone typography safety (≤ 420px) ─────────────── */
@media (max-width: 420px) {
  .ws-hero__title { font-size: clamp(28px, 8.6vw, 36px); }
  .ws-hero__sub   { font-size: 15px; }
  .ws-section h2  { overflow-wrap: anywhere; }
}

/* Migrated benefit icons (old 3-column icon rows were unwrapped to a linear
   flow) — small decorative PNGs must not render at content width. */
.ws-page__inner img[src*="icon"],
.ws-page__inner img[src*="-mark"],
.ws-post__body img[src*="icon"] {
  width: 56px; height: 56px;
  object-fit: contain;
  border-radius: 0;
  margin: 8px 0 0;
}

/* ── Visible breadcrumbs (deep geo-cluster pages) ─────────── */
.gd-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 18px 4px 0;
  font-size: var(--fs-sm); color: var(--ws-muted);
}
.gd-crumbs a { color: var(--ws-ink-soft); text-decoration: none; }
.gd-crumbs a:hover { color: var(--ws-sky-dark); text-decoration: underline; }
.gd-crumbs__sep { opacity: .5; }
.gd-crumbs span[aria-current] { color: var(--ws-ink); font-weight: 600; }


/* ============================================================
   GDOING SKIN v2 — faithful port of the original gdoing.com look
   (flat white, near-black ink, brand-red #b50500 rectangles).
   This layer overrides the donor engine styles above; gd-* classes
   belong to the rewritten section templates.
   ============================================================ */

:root {
  --gd-red: #b50500;
  --gd-red-dark: #8e0400;
  --gd-ink: #1c1c1e;
  --gd-text: #4b4f54;
  --gd-muted: #6b7075;
  --gd-band: #f5f5f6;
  --gd-line: #e6e7e9;
  --gd-radius: 6px;
}

/* ── Base typography: the original uses a clean geometric sans ── */
body { background: #fff; color: var(--gd-text); }
h1, h2, h3, h4 { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--gd-ink); letter-spacing: -.01em; }
.gd-h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; margin: 0 0 28px; text-align: left; }

/* ── Buttons: small red rectangles (the signature element) ───── */
.gd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--gd-red); color: #fff !important;
  font-weight: 600; font-size: 14px; line-height: 1;
  padding: 12px 20px; border: 0; border-radius: var(--gd-radius);
  text-decoration: none !important; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.gd-btn:hover { background: var(--gd-red-dark); transform: translateY(-1px); }
.gd-btn--sm { padding: 9px 14px; font-size: 13px; }
.gd-btn--ghost { background: #e9eaec; color: var(--gd-ink) !important; }
.gd-btn--ghost:hover { background: #dcdee1; }

/* ── Header: flat white bar (replaces the donor pill island) ─── */
.ws-header { background: #fff; padding: 0; border-bottom: 1px solid var(--gd-line); }
.ws-header.is-scrolled { background: #fff; box-shadow: 0 4px 18px -12px rgba(0,0,0,.25); }
.ws-header__island {
  background: transparent; border-radius: 0; box-shadow: none;
  padding: 14px 0; gap: 28px;
}
.gd-logo-text {
  font-size: 22px; font-weight: 800; letter-spacing: .01em;
  color: var(--gd-ink); white-space: nowrap;
}
.ws-nav a { font-size: 14.5px; color: var(--gd-ink); font-weight: 500; }
.ws-nav a:hover { color: var(--gd-red); }
.ws-header .ws-social { display: none; }              /* original header has no socials */
.ws-header__phone { display: none; }                  /* phone lives in drawer + call bar */
.ws-header__cta {
  background: var(--gd-red); color: #fff !important;
  font-weight: 600; font-size: 14px;
  padding: 11px 18px; border-radius: var(--gd-radius);
  box-shadow: none; text-decoration: none;
  transition: background .15s ease;
}
.ws-header__cta:hover { background: var(--gd-red-dark); transform: none; }
.ws-nav__menu { border-radius: var(--gd-radius); }

/* ── Hero: gray band, big black headline, diagonal photo ─────── */
.gd-hero { background: var(--gd-band); border-bottom: 1px solid var(--gd-line); overflow: hidden; }
.gd-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center; gap: 32px;
  min-height: 420px;
}
.gd-hero__copy { padding: 48px 0; }
.gd-hero__title {
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 800; line-height: 1.08; margin: 0 0 18px;
  color: var(--gd-ink);
}
.gd-hero__title em, .gd-hero__title .ws-wave { font-style: normal; color: inherit; }
.gd-hero__title .ws-wave::after { display: none; }    /* no wavy underline in the original */
.gd-hero__sub {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gd-muted); margin: 0 0 26px;
}
.gd-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.gd-hero__media { position: relative; align-self: stretch; display: flex; }
.gd-hero__media img {
  width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  filter: grayscale(1);                                /* the original photo is b/w */
}

/* ── Our Services: flat 3-col grid, engraving images ─────────── */
.gd-services { padding: clamp(48px, 7vw, 80px) 0; }
.gd-services__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 56px;
}
.gd-service__media { display: block; }
.gd-service__media img {
  width: 100%; height: 230px; object-fit: contain; display: block;
  mix-blend-mode: multiply;                            /* engravings sit on pure white */
}
.gd-service__title { font-size: 22px; font-weight: 700; margin: 18px 0 8px; }
.gd-service__desc { font-size: 14px; line-height: 1.6; color: var(--gd-text); margin: 0 0 14px; }

/* ── CTA strip (gray band) + centered panel variant ──────────── */
.gd-cta-strip { background: var(--gd-band); padding: 34px 0; }
.gd-cta-strip__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.gd-cta-strip__text { font-size: clamp(19px, 2vw, 24px); font-weight: 700; margin: 0; max-width: 640px; }
.gd-cta-strip__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.gd-cta-panel-wrap { padding: clamp(36px, 5vw, 56px) 0; }
.gd-cta-panel {
  background: var(--gd-band); border-radius: 10px;
  padding: clamp(32px, 5vw, 56px); text-align: center;
}
.gd-cta-panel h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 10px; }
.gd-cta-panel p { max-width: 640px; margin: 0 auto 20px; font-size: 14.5px; }
.gd-cta-panel__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Why Choose Us ────────────────────────────────────────────── */
.gd-why { padding: clamp(48px, 7vw, 80px) 0; }
.gd-why__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; }
.gd-why__grid--noimg { grid-template-columns: minmax(0, 720px); }
.gd-why__item { margin-bottom: 26px; }
.gd-why__item h3 { font-size: 21px; font-weight: 700; margin: 0 0 8px; }
.gd-why__item p { font-size: 13.5px; line-height: 1.65; color: var(--gd-text); margin: 0; }
.gd-why__media img {
  width: 100%; max-width: 460px; border-radius: 10px; display: block;
  filter: grayscale(1);
}

/* ── Service Areas: pins + ZIP checklist ─────────────────────── */
.gd-areas { padding: clamp(48px, 7vw, 80px) 0 clamp(36px, 5vw, 56px); }
.gd-areas__panel { background: var(--gd-band); border-radius: 10px; padding: clamp(28px, 4.5vw, 56px); }
.gd-areas__intro { max-width: 760px; margin: 0 auto 34px; text-align: center; font-size: 14.5px; line-height: 1.65; }
.gd-areas__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 18px; max-width: 980px; margin: 0 auto;
}
.gd-areas__city {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--gd-ink); font-size: 15.5px; font-weight: 500;
  text-decoration: none; text-align: center;
}
.gd-areas__city svg { color: var(--gd-red); }
a.gd-areas__city:hover span { color: var(--gd-red); text-decoration: underline; }
.gd-areas__ziptitle { text-align: center; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; margin: 44px 0 14px; }
.gd-areas__zipintro { max-width: 860px; margin: 0 auto 26px; text-align: center; font-size: 14.5px; line-height: 1.65; }
.gd-areas__zips {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px 24px; max-width: 860px;
}
.gd-areas__zips li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--gd-ink); justify-content: center; }
.gd-areas__zips svg { color: var(--gd-red); flex: 0 0 auto; }

/* ── Get Your Appliance Repaired Today! + Order Request card ─── */
.gd-request { padding: clamp(48px, 7vw, 80px) 0; position: relative; }
.gd-anchor { position: absolute; top: -90px; }
.gd-request__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.gd-contact { margin-bottom: 30px; }
.gd-contact__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.gd-contact__head svg { color: var(--gd-red); flex: 0 0 auto; }
.gd-contact__head h3 { font-size: 22px; font-weight: 700; margin: 0; }
.gd-contact__value { font-size: 17px; color: var(--gd-ink); text-decoration: none; display: block; }
a.gd-contact__value:hover { color: var(--gd-red); }
.gd-contact__value--plain { white-space: pre-line; }
.gd-contact__rule { display: block; height: 2px; background: var(--gd-ink); margin-top: 16px; max-width: 560px; }
.gd-order__card {
  background: #fff; border-radius: 8px;
  border: 1px solid var(--gd-line);
  border-left: 6px solid #3f4247;                      /* the dark side bar */
  box-shadow: 0 18px 44px -26px rgba(0,0,0,.35);
  padding: clamp(24px, 3.6vw, 44px);
  max-width: 560px; margin-left: auto;
}
.gd-order__title { text-align: center; font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; margin: 0 0 8px; }
.gd-order__note { text-align: center; font-size: 13.5px; color: var(--gd-muted); margin: 0 0 22px; }
.gd-order__fields { display: flex; flex-direction: column; gap: 12px; }
.gd-order__fields .ws-input,
.gd-order__fields .ws-textarea,
.gd-order__fields .ws-select {
  width: 100%; background: #fff;
  border: 1px solid #d6d8db; border-radius: var(--gd-radius);
  padding: 12px 14px; font-size: 14px; color: var(--gd-ink);
  font-family: inherit;
}
.gd-order__fields .ws-input:focus,
.gd-order__fields .ws-textarea:focus,
.gd-order__fields .ws-select:focus { outline: 2px solid rgba(181, 5, 0, .35); border-color: var(--gd-red); }
.gd-order__fields .ws-textarea { min-height: 96px; resize: vertical; }
.gd-order__submit { text-align: center; margin-top: 18px; }
.gd-order__submit .gd-btn { min-width: 130px; }

/* ── Appliance Repair News cards ─────────────────────────────── */
.gd-news { padding: clamp(48px, 7vw, 80px) 0; }
.gd-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.gd-news__card {
  border: 1px solid var(--gd-line); border-radius: 8px; background: #fff;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.gd-news__card:hover { box-shadow: 0 16px 36px -22px rgba(0,0,0,.3); transform: translateY(-2px); }
.gd-news__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.gd-news__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gd-news__body { padding: 18px 20px 22px; text-align: center; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gd-news__body h3 { font-size: 15.5px; font-weight: 600; line-height: 1.45; margin: 0; }
.gd-news__body h3 a { color: var(--gd-ink); text-decoration: none; }
.gd-news__body h3 a:hover { color: var(--gd-red); }
.gd-news__body p { font-size: 13px; color: var(--gd-muted); line-height: 1.6; margin: 0; flex: 1; }
.gd-news__body .gd-btn { align-self: center; }

/* ── Footer: light gray, 4 columns + badge strip ─────────────── */
.gd-footer { background: #f1f1f2; color: var(--gd-text); padding: clamp(40px, 6vw, 64px) 0 24px; margin-top: 40px; }
.gd-footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
}
.gd-footer__brand { font-size: 21px; margin-bottom: 14px; }
.gd-footer__about { font-size: 13px; line-height: 1.65; margin: 0 0 12px; }
.gd-footer__callnote { font-size: 13px; margin: 0 0 16px; color: var(--gd-ink); }
.gd-footer__social { display: flex; gap: 12px; }
.gd-footer__social a { color: var(--gd-ink); }
.gd-footer__social a:hover { color: var(--gd-red); }
.gd-footer h4, .gd-footer__coltitle {
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gd-ink); margin: 0 0 16px; font-weight: 700;
}
.gd-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gd-footer ul a { color: var(--gd-text); text-decoration: none; font-size: 14px; }
.gd-footer ul a:hover { color: var(--gd-red); }
.gd-footer__contact { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.gd-footer__contact strong { color: var(--gd-ink); }
.gd-footer__contact a { color: var(--gd-text); text-decoration: none; }
.gd-footer__contact a:hover { color: var(--gd-red); }
.gd-footer__badges {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--gd-line);
}
.gd-footer__badges img {
  height: 56px; width: auto; background: #fff;
  border: 1px solid var(--gd-line); border-radius: 4px; padding: 6px 10px;
  object-fit: contain;
}
.gd-footer__bottom { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--gd-line); font-size: 12.5px; color: var(--gd-muted); }

/* ── Reviews strip alignment with the flat skin ──────────────── */
.ws-reviews { background: var(--gd-band); }
.ws-google__btn {
  border-radius: var(--gd-radius);
  background: var(--gd-red); color: #fff;
  border: 0; box-shadow: none;
  padding: 14px 24px;
}
.ws-google__btn:hover  { background: var(--gd-red-dark); color: #fff; transform: none; box-shadow: none; }
.ws-google__btn:active { transform: none; box-shadow: none; }

/* ── Inner pages inherit the flat skin ───────────────────────── */
.ws-page__inner h1 { font-weight: 800; }
.content-cta .btn, a.btn.btn-primary {
  border-radius: var(--gd-radius); box-shadow: none;
  padding: 12px 20px; font-size: 14px; font-weight: 600;
}
details.faq-item { border-radius: 8px; }
.ws-btn, .ws-btn--primary { border-radius: var(--gd-radius) !important; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .gd-services__grid { gap: 36px; }
  .gd-areas__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .gd-areas__zips { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .gd-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .gd-hero__copy { padding: 40px 0 8px; }
  .gd-hero__media { order: -1; margin: 0 calc(-1 * var(--gutter)); }
  .gd-hero__media img { min-height: 240px; max-height: 320px; clip-path: none; }
  .gd-services__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gd-why__grid { grid-template-columns: 1fr; gap: 30px; }
  .gd-why__media { order: -1; }
  .gd-why__media img { max-width: 340px; }
  .gd-request__grid { grid-template-columns: 1fr; gap: 36px; }
  .gd-order__card { margin-left: 0; max-width: none; }
  .gd-news__grid { grid-template-columns: 1fr; }
  .gd-footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .gd-logo-text { font-size: 19px; }
}
@media (max-width: 560px) {
  .gd-services__grid { grid-template-columns: 1fr; }
  .gd-service__media img { height: 190px; }
  .gd-areas__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gd-areas__zips { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gd-footer__grid { grid-template-columns: 1fr; }
  .gd-cta-strip__row { flex-direction: column; align-items: flex-start; }
}

/* Inner pages: flat white canvas like the original (no tinted backdrop) */
.ws-page { background: #fff; }
.ws-page__inner { box-shadow: none; }


/* ============================================================
   GDOING SKIN v2.1 — migrated-content layout patterns
   (rebuilt grids from the old theme's flattened columns/sliders)
   ============================================================ */

/* Content column rhythm */
.ws-page__inner { max-width: 900px; }
.ws-page__inner h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; }
.ws-page__inner h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; margin: 48px 0 16px; }
.ws-page__inner h3 { font-size: 20px; font-weight: 700; margin: 30px 0 10px; }
.ws-page__inner p  { line-height: 1.75; }
.ws-page__inner > p { margin: 0 0 16px; }

/* Feature cards (What We Offer / Why Choose Us rows) */
.gd-featgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin: 26px 0 34px;
}
.gd-feat {
  background: var(--gd-band);
  border: 1px solid var(--gd-line);
  border-radius: 8px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
}
.gd-feat img {
  width: 40px !important; height: 40px !important;
  object-fit: contain; border-radius: 0; margin: 2px 0 0 !important;
  grid-row: 1 / span 2;
}
.gd-feat h3, .gd-feat h4 { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; color: var(--gd-ink); }
.gd-feat p  { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--gd-text); grid-column: 2; }

/* Brand logo grid (was a broken swiper slider) */
.gd-logogrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  align-items: center;
  background: var(--gd-band);
  border-radius: 10px;
  padding: 26px;
  margin: 26px 0 34px;
}
.gd-logogrid__cell {
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--gd-line);
  border-radius: 6px;
  padding: 12px 14px;
  min-height: 64px;
}
.gd-logogrid__cell img {
  max-height: 36px !important; max-width: 100% !important;
  width: auto !important; height: auto !important;
  object-fit: contain; margin: 0 !important; border-radius: 0;
  filter: grayscale(1); opacity: .85; transition: filter .2s ease, opacity .2s ease;
}
.gd-logogrid__cell:hover img { filter: none; opacity: 1; }

/* Photo galleries (was stacked full-width images) */
.gd-gallery {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 26px 0 34px;
}
.gd-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-gallery__item { margin: 0 !important; }
.gd-gallery__item img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; display: block; margin: 0 !important;
}

/* Consecutive in-content CTA buttons sit side by side */
.content-cta { display: inline-block; margin: 8px 12px 8px 0; }
.content-cta + .content-cta { margin-left: 0; }

@media (max-width: 720px) {
  .gd-featgrid { grid-template-columns: 1fr; }
  .gd-gallery, .gd-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-logogrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); padding: 18px; }
}
@media (max-width: 460px) {
  .gd-gallery, .gd-gallery--4 { grid-template-columns: 1fr; }
}

/* Raw image-grid divs migrated from the old theme (photo case rows) */
.image-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 26px 0 34px;
}
.image-grid img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; display: block; margin: 0 !important;
}
@media (max-width: 720px) { .image-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .image-grid { grid-template-columns: 1fr; } }

/* In-content city list (map pins migrated from the old area blocks) */
.gd-citylist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 16px;
  background: var(--gd-band);
  border-radius: 10px;
  padding: 26px;
  margin: 26px 0 34px;
}
.gd-citycell {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; font-size: 15px; font-weight: 500; color: var(--gd-ink);
}
.gd-citycell svg { color: var(--gd-red); }
@media (max-width: 720px) { .gd-citylist { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Old-theme "Service Areas" pin cards (markup classes kept from WP) */
.location-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 16px;
  background: var(--gd-band);
  border-radius: 10px;
  padding: 28px 26px;
  margin: 26px 0 34px;
}
.location-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.location-card figure { margin: 0 !important; }
.location-card img { width: 44px !important; height: 44px !important; object-fit: contain; margin: 0 !important; }
.location-card h3, .location-card h4 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.location-card h3 a, .location-card h4 a { color: var(--gd-ink); text-decoration: none; }
.location-card h3 a:hover, .location-card h4 a:hover { color: var(--gd-red); }
@media (max-width: 720px) { .location-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ZIP-code coverage chips */
ul.zip-code-list {
  list-style: none; padding: 0; margin: 22px 0 30px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px;
}
li.zip-code-item {
  margin: 0; background: var(--gd-band); border: 1px solid var(--gd-line);
  border-radius: var(--gd-radius); padding: 9px 8px; text-align: center;
  font-weight: 600; font-size: 14.5px; color: var(--gd-ink);
}
li.zip-code-item::before { content: "\2713\00a0"; color: var(--gd-red); font-weight: 700; }

/* In-article conversion callout (migrated .repair-box blocks) */
.repair-box { margin: 30px 0; }
.repair-box__content {
  display: flex; align-items: center; gap: 22px; justify-content: space-between;
  background: var(--gd-band); border-left: 3px solid var(--gd-red);
  border-radius: var(--gd-radius); padding: 22px 24px;
}
.repair-box__text strong { display: block; font-size: 17px; margin-bottom: 4px; color: var(--gd-ink); }
.repair-box__text p { margin: 0; color: var(--gd-muted); font-size: 15px; }
a.repair-box__btn {
  flex-shrink: 0; display: inline-block; background: var(--gd-red); color: #fff;
  font-weight: 600; font-size: 14px; text-decoration: none; border-radius: var(--gd-radius);
  padding: 12px 20px; transition: background .15s ease;
}
a.repair-box__btn:hover { background: var(--gd-red-dark); color: #fff; }
a.repair-box__service {
  display: inline-block; margin-top: 8px; color: var(--gd-red);
  font-weight: 600; font-size: 14px; text-decoration: none;
}
a.repair-box__service:hover { color: var(--gd-red-dark); text-decoration: underline; }
@media (max-width: 620px) { .repair-box__content { flex-direction: column; align-items: flex-start; } }

/* Safety: any leftover pin/marker images in content stay icon-sized */
.ws-page__inner img[src*="pin"], .ws-post__body img[src*="pin"] {
  width: 44px !important; height: 44px !important; object-fit: contain; margin: 0 !important;
}

/* Anchor jumps (#request) land on the Order Request card with breathing room */
.gd-order { scroll-margin-top: 96px; }
#estimate { scroll-margin-top: 84px; }

/* ============================================================
   GDOING SKIN v3 — professional conversion pass (2026-07)
   Same brand tokens (red #b50500 · ink #1c1c1e · band #f5f5f6 ·
   Inter); this layer upgrades hierarchy, cards, forms and the
   lead-capture UX. Overrides v2 where selectors collide.
   ============================================================ */

:root {
  --gd3-card-shadow: 0 1px 2px rgba(28,28,30,.05), 0 14px 34px -22px rgba(28,28,30,.22);
  --gd3-pop-shadow:  0 28px 70px -30px rgba(28,28,30,.40);
  --gd3-focus: 0 0 0 3px rgba(181,5,0,.18);
}

/* ── Shared section rhythm & headers ─────────────────────────── */
.gd-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gd-red);
  margin: 0 0 12px;
}
.gd-kicker::before {
  content: ""; width: 22px; height: 2px; background: var(--gd-red);
  display: inline-block;
}
.gd-h2 { letter-spacing: -.02em; }
.gd-sechead { max-width: 720px; margin-bottom: 34px; }
.gd-sechead .gd-h2 { margin-bottom: 10px; }
.gd-sechead__lead { font-size: 15.5px; line-height: 1.65; color: var(--gd-text); margin: 0; }

/* ── Buttons: size ramp + secondary styles ───────────────────── */
.gd-btn { font-size: 15px; padding: 13px 22px; box-shadow: 0 10px 22px -12px rgba(181,5,0,.55); }
.gd-btn:hover { box-shadow: 0 12px 26px -12px rgba(142,4,0,.6); }
.gd-btn--sm { padding: 9px 14px; font-size: 13px; box-shadow: none; }
.gd-btn--lg { padding: 16px 28px; font-size: 16px; font-weight: 700; }
.gd-btn--ghost { box-shadow: none; }
.gd-btn--outline {
  background: transparent; color: var(--gd-ink) !important;
  border: 1.5px solid rgba(28,28,30,.35); box-shadow: none;
}
.gd-btn--outline:hover { background: rgba(28,28,30,.06); border-color: var(--gd-ink); }
.gd-btn--outline-inv {
  background: transparent; color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.55); box-shadow: none;
}
.gd-btn--outline-inv:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ── Header: visible phone number on desktop (trust + calls) ── */
@media (min-width: 1120px) {
  .ws-header__phone {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--gd-ink); text-decoration: none;
    font-weight: 700; font-size: 15px; letter-spacing: .01em;
  }
  .ws-header__phone-ico { width: 17px; height: 17px; color: var(--gd-red); }
  .ws-header__phone:hover { color: var(--gd-red); transform: none; }
}

/* ── HERO v3: headline + trust checks + lead form card ───────── */
.gd-hero { position: relative; }
.gd-hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(40px, 5.5vw, 72px) 0;
  min-height: 0;
}
.gd-hero__copy { padding: 0; position: relative; z-index: 2; }
.gd-hero__title { margin-bottom: 14px; }
.gd-hero__sub {
  font-size: 16.5px; line-height: 1.6;
  letter-spacing: 0; text-transform: none;   /* v2 made this ALL-CAPS — professional lead line instead */
  color: var(--gd-text); max-width: 560px; margin: 0 0 22px;
}
.gd-hero__checks {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.gd-hero__checks li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15.5px; font-weight: 600; color: var(--gd-ink);
}
.gd-hero__checks li::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--gd-red);
}
.gd-hero__proof {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.gd-hero__phone {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--gd-ink);
}
.gd-hero__phone-ico {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--gd-line); color: var(--gd-red);
  box-shadow: var(--gd3-card-shadow);
}
.gd-hero__phone-ico svg { width: 20px; height: 20px; }
.gd-hero__phone-label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gd-muted); }
.gd-hero__phone-num { display: block; font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.gd-hero__phone:hover .gd-hero__phone-num { color: var(--gd-red); }
.gd-hero__rating {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding-left: 18px; border-left: 1px solid var(--gd-line);
}
.gd-hero__rating-stars { color: #f5a623; font-size: 15px; letter-spacing: 2px; line-height: 1; }
.gd-hero__rating-note { font-size: 12.5px; color: var(--gd-muted); font-weight: 600; }

/* Diagonal b/w technician photo — kept as brand DNA, now a backdrop
   strip that bleeds to the right screen edge behind the form column. */
.gd-hero__photo {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: 44%; overflow: hidden; z-index: 0; pointer-events: none;
}
.gd-hero__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  opacity: .92;
}
.gd-hero__photo::after {           /* soft wash so the card always reads */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gd-band) 0%, rgba(245,245,246,.35) 30%, rgba(245,245,246,0) 60%);
}
.gd-hero__form { position: relative; z-index: 2; }

/* ── Lead form card (hero + reusable) ────────────────────────── */
.gd-lead {
  background: #fff; border-radius: 10px;
  border: 1px solid var(--gd-line);
  border-top: 4px solid var(--gd-red);
  box-shadow: var(--gd3-pop-shadow);
  padding: clamp(22px, 2.6vw, 30px);
}
.gd-lead__title { font-size: 21px; font-weight: 800; color: var(--gd-ink); margin: 0 0 4px; letter-spacing: -.01em; }
.gd-lead__note { font-size: 13.5px; color: var(--gd-muted); margin: 0 0 18px; line-height: 1.5; }
.gd-lead__fields { display: flex; flex-direction: column; gap: 12px; }
.gd-lead .ws-input, .gd-lead .ws-select, .gd-lead .ws-textarea {
  width: 100%; background: #fff;
  border: 1px solid #d6d8db; border-radius: var(--gd-radius);
  padding: 13px 14px; font-size: 16px; color: var(--gd-ink);
  font-family: inherit; min-height: 48px;
}
.gd-lead .ws-input:focus, .gd-lead .ws-select:focus, .gd-lead .ws-textarea:focus {
  outline: none; border-color: var(--gd-red); box-shadow: var(--gd3-focus);
}
.gd-lead__submit { margin-top: 16px; }
.gd-lead__submit .gd-btn { width: 100%; }
.gd-lead__foot {
  margin: 12px 0 0; text-align: center;
  font-size: 12.5px; color: var(--gd-muted); line-height: 1.5;
}
.gd-lead__foot::before { content: "✓ "; color: var(--gd-red); font-weight: 700; }
.gd-lead .ws-form__msg { border-radius: var(--gd-radius); padding: 12px 14px; font-size: 14px; margin-bottom: 12px; }

/* ── Our Services: bordered cards, whole-card hover ──────────── */
.gd-services__grid { gap: 22px; }
.gd-service {
  position: relative;
  background: #fff; border: 1px solid var(--gd-line); border-radius: 10px;
  padding: 26px 24px 22px;
  display: flex; flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.gd-service:hover {
  border-color: rgba(181,5,0,.45);
  box-shadow: var(--gd3-card-shadow);
  transform: translateY(-3px);
}
.gd-service__media { order: -1; }
.gd-service__media img { height: 168px; margin: 0 auto 6px; }
.gd-service__title { font-size: 20px; margin: 12px 0 8px; }
.gd-service__desc { flex: 1; font-size: 14px; margin-bottom: 16px; }
.gd-service .gd-btn.gd-btn--sm {
  align-self: flex-start;
  background: transparent; color: var(--gd-red) !important;
  padding: 0; border-radius: 0; font-size: 14.5px; font-weight: 700;
}
.gd-service .gd-btn.gd-btn--sm:hover { background: transparent; color: var(--gd-red-dark) !important; transform: none; }
.gd-service .gd-btn.gd-btn--sm::after { content: "→"; transition: transform .18s ease; }
.gd-service .gd-btn.gd-btn--sm span { display: none; }         /* hide the old arrow glyph */
.gd-service:hover .gd-btn.gd-btn--sm::after { transform: translateX(4px); }
/* Whole card clickable via the stretched media link */
.gd-service__media::after { content: ""; position: absolute; inset: 0; }

/* ── CTA strip: ink band for rhythm between white sections ───── */
.gd-cta-strip { background: var(--gd-ink); padding: clamp(36px, 4.5vw, 52px) 0; }
.gd-cta-strip__text { color: #fff; }
.gd-cta-strip .gd-btn--ghost { background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.55); }
.gd-cta-strip .gd-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.gd-cta-panel { border-top: 4px solid var(--gd-red); }

/* ── Why Choose Us: check-led feature rows + framed portrait ── */
.gd-why__item { position: relative; padding-left: 40px; margin-bottom: 24px; }
.gd-why__item::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 26px; height: 26px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat,
    var(--gd-red);
}
.gd-why__item h3 { font-size: 19px; }
.gd-why__item p { font-size: 14px; }
.gd-why__media { position: relative; }
.gd-why__media img { border-radius: 12px; border: 1px solid var(--gd-line); box-shadow: var(--gd3-card-shadow); }
.gd-why__caption {
  position: absolute; left: 18px; bottom: 18px;
  background: #fff; border-radius: 8px; border: 1px solid var(--gd-line);
  box-shadow: var(--gd3-card-shadow);
  padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--gd-ink);
}
.gd-why__caption small { display: block; font-size: 11.5px; font-weight: 600; color: var(--gd-muted); letter-spacing: .04em; text-transform: uppercase; }

/* ── Service Areas: white city tiles inside the gray panel ──── */
.gd-areas__grid { gap: 14px; max-width: 1020px; }
.gd-areas__city {
  background: #fff; border: 1px solid var(--gd-line); border-radius: 8px;
  padding: 18px 12px 16px; gap: 8px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.gd-areas__city:hover { border-color: rgba(181,5,0,.45); box-shadow: var(--gd3-card-shadow); transform: translateY(-2px); }
a.gd-areas__city:hover span { color: var(--gd-red); text-decoration: none; }

/* ── Reviews: two-column card wall + Google badge on cards ──── */
.ws-reviews__layout { align-items: start; }
.ws-testimonials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ws-testimonial {
  background: #fff; border: 1px solid var(--gd-line); border-radius: 10px;
  padding: 20px 20px 18px; box-shadow: none;
}
.ws-testimonial__head { position: relative; }
.ws-testimonial__g {
  position: absolute; right: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1px solid var(--gd-line);
  display: inline-flex; align-items: center; justify-content: center;
}
.ws-testimonial__g svg { width: 12px; height: 12px; }
.ws-testimonial__stars { color: #f5a623; }
.ws-testimonial__text { font-size: 14px; line-height: 1.65; }

/* ── Order Request (booking) v3: red top bar + 2-col fields ─── */
.gd-request { background: var(--gd-band); }
.gd-order__card {
  border-left: 1px solid var(--gd-line);
  border-top: 4px solid var(--gd-red);
  border-radius: 10px;
  box-shadow: var(--gd3-card-shadow);
}
.gd-order__title { text-align: left; font-size: clamp(22px, 2.4vw, 27px); }
.gd-order__note { text-align: left; margin-bottom: 20px; }
.gd-order__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gd-order__fields .ws-input, .gd-order__fields .ws-select {
  min-height: 48px; font-size: 16px;
}
.gd-order__fields .ws-textarea { font-size: 16px; }
/* selects and textareas span the full card width */
.gd-order__fields .ws-select,
.gd-order__fields .ws-textarea { grid-column: 1 / -1; }
.gd-order__fields .ws-input:focus, .gd-order__fields .ws-textarea:focus, .gd-order__fields .ws-select:focus {
  outline: none; border-color: var(--gd-red); box-shadow: var(--gd3-focus);
}
.gd-order__submit { text-align: left; }
.gd-order__submit .gd-btn { width: 100%; padding: 15px 24px; font-size: 15.5px; font-weight: 700; }
.gd-order__subnote { margin: 10px 0 0; font-size: 12.5px; color: var(--gd-muted); text-align: center; }
.gd-order__subnote::before { content: "✓ "; color: var(--gd-red); font-weight: 700; }
/* Contact rows: red icon chips instead of heavy black rules */
.gd-contact { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: start; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--gd-line); }
.gd-contact:last-child { border-bottom: 0; }
.gd-contact__head { display: contents; }
.gd-contact__head svg {
  width: 48px; height: 48px; padding: 12px; border-radius: 10px;
  background: #fff; border: 1px solid var(--gd-line); color: var(--gd-red);
  grid-row: 1 / span 2;
}
.gd-contact__head h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gd-muted); margin: 2px 0 4px; }
.gd-contact__value { font-size: 19px; font-weight: 700; grid-column: 2; }
.gd-contact__value--plain { font-weight: 600; font-size: 16px; }
.gd-contact__rule { display: none; }

/* ── News / blog-preview cards: editorial left-aligned ───────── */
.gd-news__body { text-align: left; }
.gd-news__meta { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gd-muted); }
.gd-news__meta b { color: var(--gd-red); font-weight: 700; }
.gd-news__body h3 { font-size: 17px; }
.gd-news__body .gd-btn { align-self: flex-start; background: transparent; color: var(--gd-red) !important; padding: 0; font-weight: 700; font-size: 14.5px; box-shadow: none; }
.gd-news__body .gd-btn:hover { background: transparent; color: var(--gd-red-dark) !important; transform: none; }
.gd-news__body .gd-btn::after { content: " →"; }

/* ── Inner pages: flat white head with red accent rule ───────── */
.ws-page { padding-top: clamp(18px, 3vw, 34px); }
.ws-page .gd-crumbs { margin-bottom: clamp(18px, 3vw, 30px); }
.ws-page__inner h1 { position: relative; padding-bottom: 18px; margin-bottom: 22px; }
.ws-page__inner h1::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 64px; height: 4px; border-radius: 2px; background: var(--gd-red);
}
/* First paragraph reads as a lead line, not an ALL-CAPS kicker */
.ws-page__inner > p:first-of-type {
  font-size: 17.5px; line-height: 1.65; color: var(--gd-text);
  letter-spacing: 0; text-transform: none;
}
/* In-content CTA pair: primary red + quiet outline */
.content-cta .btn { box-shadow: 0 10px 22px -12px rgba(181,5,0,.55); }
.content-cta + .content-cta .btn {
  background: transparent; color: var(--gd-ink);
  border: 1.5px solid rgba(28,28,30,.35); box-shadow: none;
}
.content-cta + .content-cta .btn:hover { background: rgba(28,28,30,.06); border-color: var(--gd-ink); color: var(--gd-ink); }

/* ── Service cards grid inside CMS content (city pages, hub) ─── */
.gd-svc-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin: 26px 0 38px;
}
.gd-svc-card {
  position: relative;
  background: #fff; border: 1px solid var(--gd-line); border-radius: 10px;
  padding: 20px 20px 18px;
  display: flex; flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.gd-svc-card:hover { border-color: rgba(181,5,0,.45); box-shadow: var(--gd3-card-shadow); transform: translateY(-3px); }
.gd-svc-card figure { margin: 0 0 4px !important; }
.gd-svc-card figure img {
  width: 100% !important; height: 120px !important; object-fit: contain;
  mix-blend-mode: multiply; margin: 0 auto !important;
}
.gd-svc-card h3 { margin: 10px 0 6px !important; font-size: 18px !important; }
.gd-svc-card p { flex: 1; margin: 0 0 12px !important; font-size: 13.5px !important; line-height: 1.6 !important; }
.gd-svc-card .gd-svc-card__link {
  font-size: 14px; font-weight: 700; color: var(--gd-red); text-decoration: none;
}
.gd-svc-card .gd-svc-card__link::after { content: ""; position: absolute; inset: 0; }
.gd-svc-card .gd-svc-card__link span::after { content: " →"; }
@media (max-width: 900px) { .gd-svc-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .gd-svc-cards { grid-template-columns: 1fr; } }

/* ── FAQ accordions: card look, red plus marker ──────────────── */
details.faq-item {
  background: #fff; border: 1px solid var(--gd-line); border-radius: 10px;
  padding: 0; margin: 0 0 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
details.faq-item[open] { border-color: rgba(181,5,0,.35); box-shadow: var(--gd3-card-shadow); }
details.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  font-size: 16.5px; font-weight: 700; color: var(--gd-ink);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "+"; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gd-band); color: var(--gd-red);
  font-size: 19px; font-weight: 700; line-height: 1;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
details.faq-item[open] summary::after { content: "–"; background: var(--gd-red); color: #fff; }
details.faq-item > *:not(summary) { padding: 0 20px; }
details.faq-item > p:last-child, details.faq-item > div:last-child { padding-bottom: 18px; }

/* ── Responsive: hero stacks with the form right after the copy ─ */
@media (max-width: 1100px) {
  .gd-hero__photo { display: none; }
  .gd-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); }
}
@media (max-width: 900px) {
  .gd-hero__grid { grid-template-columns: 1fr; gap: 26px; padding: 30px 0 36px; }
  .gd-hero__copy { padding: 0; }
  .gd-hero__media { display: none; }
  .gd-hero__checks { gap: 8px; margin-bottom: 20px; }
  .gd-hero__checks li { font-size: 14.5px; }
  .gd-order__fields { grid-template-columns: 1fr; }
  .ws-testimonials { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gd-hero__proof { gap: 14px; }
  .gd-hero__rating { padding-left: 14px; }
  .gd-lead { padding: 20px 18px; }
}

/* ── Trustindex live Google-reviews widget (ws-reviews v3.1) ── */
.gd-ti { min-height: 240px; }
.gd-ti .ti-widget { margin: 0 auto; }

/* ============================================================
   GDOING SKIN v3.2 — wide inner pages + conversion chrome
   (inner CMS/service/city/about pages leave the narrow column:
   full-container layout, readable text measure, trust row under
   the H1, refined header nav + dropdown. Brand tokens unchanged.)
   ============================================================ */

/* ── Inner pages: full-width canvas, editorial text measure ── */
.ws-page__inner { max-width: none; }
.ws-page__inner > h1 { max-width: 980px; font-size: clamp(32px, 4vw, 50px); }
.ws-page__inner > p,
.ws-page__inner > ul,
.ws-page__inner > ol,
.ws-page__inner > blockquote,
.ws-page__inner > h2,
.ws-page__inner > h3,
.ws-page__inner > h4,
.ws-page__inner > details { max-width: 860px; }
.ws-page__inner > p:first-of-type { font-size: 18.5px; }
/* Standalone content photos: capped editorial figures, not full-bleed walls */
.ws-page__inner > figure { margin: 30px 0 34px; }
.ws-page__inner > figure img {
  /* Natural aspect ratio, capped both ways — portraits keep faces, landscapes
     stay editorial-width. No cover-crop: content photos vary in orientation. */
  width: auto; max-width: min(100%, 860px); max-height: 520px;
  border-radius: 12px;
  border: 1px solid var(--gd-line);
  display: block;
}
/* Structured grids span the full container width */
.ws-page__inner .gd-svc-cards,
.ws-page__inner .gd-featgrid,
.ws-page__inner .gd-logogrid,
.ws-page__inner .location-grid,
.ws-page__inner .image-grid,
.ws-page__inner .gd-gallery,
.ws-page__inner ul.zip-code-list,
.ws-page__inner .gd-citylist { max-width: none; }
/* Feature cards: 4-up row on wide screens (was a 2-col half-empty band) */
.gd-featgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .gd-featgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .gd-featgrid { grid-template-columns: 1fr; } }
.gd-feat { background: #fff; }
ul.zip-code-list { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* ── Trust row under inner-page H1 (setting: page_trust_note) ── */
.gd-pagetrust {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -6px 0 26px;
  font-size: 14px; font-weight: 600; color: var(--gd-text);
}
.gd-pagetrust__stars { color: #f5a623; font-size: 15px; letter-spacing: 2px; line-height: 1; }

/* ── Header nav: sliding red underline + current-page state ── */
.ws-nav { gap: 26px; }
.ws-nav > a, .ws-nav .ws-nav__drop > a {
  position: relative; padding: 6px 0;
}
.ws-nav > a::after, .ws-nav .ws-nav__drop > a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px; border-radius: 1px;
  background: var(--gd-red);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .22s ease;
}
.ws-nav > a:hover::after, .ws-nav .ws-nav__drop > a:hover::after,
.ws-nav > a[aria-current="page"]::after,
.ws-nav .ws-nav__drop > a[aria-current="page"]::after { transform: scaleX(1); }
.ws-nav a[aria-current="page"] { color: var(--gd-red); font-weight: 600; }

/* Dropdown: refined card panel */
.ws-nav__menu {
  border-radius: 10px;
  border: 1px solid var(--gd-line);
  border-top: 3px solid var(--gd-red);
  box-shadow: var(--gd3-pop-shadow);
  padding: 8px;
  min-width: 230px;
}
.ws-nav__menu a {
  display: block; padding: 10px 14px;
  border-radius: var(--gd-radius);
  font-size: 14px; color: var(--gd-ink);
}
.ws-nav__menu a:hover { background: var(--gd-band); color: var(--gd-red); }
.ws-nav__menu a[aria-current="page"] { color: var(--gd-red); font-weight: 600; }
.ws-nav__caret { font-size: 10px; opacity: .55; margin-left: 2px; }

/* Mobile drawer: current page marker */
.ws-drawer__nav a[aria-current="page"] { color: var(--gd-red); font-weight: 600; background: var(--gd-band); }

/* ── Attached conversion sections on inner pages breathe more ── */
.ws-page + .ws-reviews, .ws-page ~ .gd-request { border-top: 1px solid var(--gd-line-soft, rgba(28,28,30,.06)); }

/* ── Contacts page: form-first rhythm ── */
.ws-page--contacts .ws-page__inner > p:first-of-type { font-size: 19px; }

@media (max-width: 900px) {
  .ws-page__inner > figure img { max-height: 340px; }
}

/* ============================================================
   GDOING SKIN v3.3 — service-page hero form, about E-E-A-T
   patterns, seamless footer seam.
   ============================================================ */

/* ── Service-page head band: H1 + trust left, lead form right ── */
.gd-svchero {
  background: var(--gd-band);
  border-bottom: 1px solid var(--gd-line);
  margin-bottom: clamp(26px, 4vw, 40px);
}
.gd-svchero .gd-crumbs { margin: 0 0 18px; padding-top: clamp(18px, 3vw, 30px); }
.gd-svchero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding-bottom: clamp(28px, 4vw, 44px);
}
.gd-svchero__copy h1 {
  position: relative;
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1.12;
  color: var(--gd-ink); letter-spacing: -.02em;
  padding-bottom: 18px; margin: 0 0 18px;
}
.gd-svchero__copy h1::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 64px; height: 4px; border-radius: 2px; background: var(--gd-red);
}
.gd-svchero__lead {
  font-size: 16.5px; line-height: 1.65; color: var(--gd-text);
  max-width: 560px; margin: 0 0 18px;
}
.gd-svchero .gd-pagetrust { margin: 0 0 20px; }
.gd-svchero__phone {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--gd-ink);
}
.gd-svchero__phone .ico {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--gd-line); color: var(--gd-red);
  box-shadow: var(--gd3-card-shadow);
}
.gd-svchero__phone .ico svg { width: 19px; height: 19px; }
.gd-svchero__phone small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gd-muted); }
.gd-svchero__phone b { display: block; font-size: 18px; font-weight: 800; }
.gd-svchero__phone:hover b { color: var(--gd-red); }
/* Inside the band the page content's duplicate heading elements are hidden by
   the template (first <p> is lifted into the band), nothing to do here. */
@media (max-width: 900px) {
  .gd-svchero__grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ── Stats strip (About page + reusable) ─────────────────────── */
.gd-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin: 28px 0 36px;
  max-width: none !important;
}
.gd-stat {
  background: #fff; border: 1px solid var(--gd-line); border-radius: 10px;
  border-top: 4px solid var(--gd-red);
  box-shadow: var(--gd3-card-shadow);
  padding: 20px 18px 16px; text-align: center;
}
.gd-stat b {
  display: block; font-size: clamp(26px, 3vw, 36px); font-weight: 800;
  color: var(--gd-ink); letter-spacing: -.02em; line-height: 1;
  margin-bottom: 6px;
}
.gd-stat span { font-size: 13px; font-weight: 600; color: var(--gd-muted); }
@media (max-width: 760px) { .gd-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ── Founder card (About page E-E-A-T) ───────────────────────── */
.gd-founder {
  display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px); align-items: center;
  background: var(--gd-band); border: 1px solid var(--gd-line); border-radius: 12px;
  padding: clamp(20px, 3vw, 32px);
  margin: 30px 0 38px;
  max-width: none !important;
}
.gd-founder figure { margin: 0 !important; }
.gd-founder figure img {
  width: 100% !important; max-width: none !important; max-height: none !important;
  aspect-ratio: 4 / 4.6; object-fit: cover; object-position: top;
  border-radius: 10px; border: 1px solid var(--gd-line); display: block;
}
.gd-founder__kicker {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gd-red);
  margin-bottom: 6px;
}
.gd-founder__body h2 { margin: 0 0 12px !important; font-size: clamp(24px, 2.6vw, 32px) !important; }
.gd-founder__body p { margin: 0 0 14px !important; font-size: 15px !important; line-height: 1.7 !important; }
.gd-founder__body blockquote {
  margin: 0; padding: 14px 18px;
  background: #fff; border-left: 4px solid var(--gd-red); border-radius: 6px;
  font-size: 16.5px; font-weight: 600; font-style: italic; color: var(--gd-ink);
}
@media (max-width: 760px) {
  .gd-founder { grid-template-columns: 1fr; }
  .gd-founder figure img { max-width: 320px !important; margin: 0 auto !important; }
}

/* ── Credentials checklist (About) ───────────────────────────── */
ul.gd-cred {
  list-style: none; padding: 0; margin: 22px 0 34px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; max-width: none !important;
}
ul.gd-cred li {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--gd-line); border-radius: 10px;
  padding: 14px 16px; font-size: 14px; line-height: 1.6; color: var(--gd-text);
}
ul.gd-cred li::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--gd-red);
}
ul.gd-cred li strong { color: var(--gd-ink); }
@media (max-width: 700px) { ul.gd-cred { grid-template-columns: 1fr; } }

/* ── Footer: kill the white seam above it ────────────────────── */
.gd-footer { margin-top: 0; }
/* Sections keep their own rhythm; when a gray band section (request/reviews)
   is the last block, it now meets the footer's light gray directly. */

@media (max-width: 560px) {
  .gd-svchero__copy h1 { font-size: 27px; }
}