/* ============================================================================
   SKYLIFT — VIBRANT CLOUD DESIGN SYSTEM  (skylift-cloud.css)
   Shared, FROZEN design layer for the redesigned marketing site.
   Built in Thread 1 (Foundation). Threads 2–4 must treat this file as
   read-only — page-specific tweaks go in each page's own <style> block.

   Source of truth: SKYLIFT-00-plan.md "SHARED DESIGN SYSTEM — VIBRANT CLOUD"
   Fonts: Bricolage Grotesque (display) + General Sans (body).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --sky-base:      #F5FAFF;   /* page base pale sky */
  --white:         #FFFFFF;
  --peach-1:       #FDEBD8;   /* warm band top */
  --peach-2:       #FBE4CF;   /* warm band bottom */

  /* Ink */
  --ink:           #1B1F2A;   /* headings + body */
  --muted:         #5A6472;   /* secondary text */
  --hairline:      #E7EEF6;   /* dividers, card borders */

  /* Candy accents */
  --lime:          #C6F24E;   /* THE one primary-button color */
  --lime-deep:     #B6E637;   /* lime hover/edge */
  --lavender:      #C6B8F7;
  --pink:          #F7C0DD;
  --yellow:        #FCD34D;
  --sky-chip:      #BFE0FA;

  /* Icon-tile fills */
  --orange:        #F97316;
  --coral:         #EF4444;
  --violet:        #8B7CF0;
  --periwinkle:    #6E8BF5;

  /* Dark pill (nav pill / secondary) */
  --dark:          #1E2230;

  /* Radii */
  --r-card:        24px;
  --r-card-lg:     28px;
  --r-pill:        999px;
  --r-sm:          14px;

  /* Shadows — soft, blue-tinted */
  --shadow-sm:     0 2px 10px rgba(31, 78, 140, 0.06);
  --shadow-md:     0 10px 30px rgba(31, 78, 140, 0.09);
  --shadow-lg:     0 24px 60px rgba(31, 78, 140, 0.12);
  --shadow-lime:   0 10px 24px rgba(150, 200, 40, 0.35);

  /* Type */
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "General Sans", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* Layout */
  --maxw:          1160px;
  --gutter:        clamp(20px, 5vw, 40px);

  /* Motion */
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sky-base);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;   /* containing block for the absolute cloud-layer (full page height) */
}
/* Horizontal-overflow clip belongs on <html>, NOT <body>: body-level overflow-x turns the
   body into a scroll container and (with a tall absolute child) hijacks page scrolling. */
html { overflow-x: hidden; }
/* Universal sky — one calm sky behind every page (fixed so it never scroll-janks).
   Sits at z-index -1 behind all content; cards/bands/hero float on top of it.
   Dial intensity with the alpha values below (higher = more visible clouds). */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 460px at 12% -8%, rgba(206,232,251,0.55), transparent 62%),
    radial-gradient(1000px 420px at 92% 4%,  rgba(214,205,247,0.40), transparent 62%),
    radial-gradient(900px 520px at 50% 112%, rgba(226,240,253,0.55), transparent 60%),
    linear-gradient(180deg, #E9F1FC 0%, #F1F7FE 46%, #F6FBFF 100%);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 3px solid var(--periwinkle); outline-offset: 3px; border-radius: 4px; }

/* ----------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.08; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: -0.01em; }
p  { color: var(--muted); }
strong { color: var(--ink); font-weight: 600; }

.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--muted); line-height: 1.55; }

/* Eyebrow — small uppercase label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  padding: 7px 15px; border-radius: var(--r-pill);
  background: var(--white); box-shadow: var(--shadow-sm);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime); flex: none;
}
.eyebrow.is-lavender { background: var(--lavender); color: var(--ink); box-shadow: none; }
.eyebrow.is-pink     { background: var(--pink);     color: var(--ink); box-shadow: none; }
.eyebrow.is-sky      { background: var(--sky-chip);  color: var(--ink); box-shadow: none; }
.eyebrow.is-lavender::before,
.eyebrow.is-pink::before,
.eyebrow.is-sky::before { display: none; }

/* Highlighter pills — sit behind 1–3 key words in a headline.
   Rotate lime → lavender → pink → sky; no two adjacent headlines the same. */
.hl {
  display: inline-block;
  padding: 0.02em 0.28em;
  border-radius: 14px;
  background: var(--lime);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl.is-sky      { background: var(--sky-chip); }
.hl.is-lavender { background: var(--lavender); }
.hl.is-pink     { background: var(--pink); }
.hl.is-yellow   { background: var(--yellow); }

/* ----------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(64px, 9vw, 120px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.center { text-align: center; }
.measure { max-width: 720px; margin-inline: auto; }
.measure-sm { max-width: 560px; margin-inline: auto; }
.stack-sm > * + * { margin-top: 14px; }
.stack   > * + * { margin-top: 22px; }
.stack-lg > * + * { margin-top: 40px; }

/* Section backgrounds */
/* Warm band + hero stay as accent bands; plain/"white" sections are transparent so the
   universal sky shows through (cards remain solid for legibility). */
.section--peach { background: linear-gradient(180deg, var(--peach-1), var(--peach-2)); }
.section--white { background: transparent; }
.section--sky   { background: transparent; }

/* ----------------------------------------------------------------------------
   5. CLOUD / SKY DECOR
   -------------------------------------------------------------------------- */
/* Soft sky wash used in heroes + final CTA. Real sky photos layer on top of the
   gradient (which stays as the fallback if an image fails). A light scrim over each
   image keeps the dark headline + muted body text readable.
   Heroes are <header class="sky-wash">, final-CTA/last sections are <section class="sky-wash">. */
.sky-wash {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #E9E3FC 0%, #E4EFFB 46%, #F5FAFF 100%);
}
header.sky-wash {
  background:
    linear-gradient(180deg, rgba(246,251,255,0.34) 0%, rgba(246,251,255,0.06) 44%, rgba(246,251,255,0.62) 100%),
    url("/uploads/sky-hero.webp") center top / cover no-repeat,
    linear-gradient(180deg, #CFE4FB, #EAF4FE);
}
section.sky-wash {
  background:
    linear-gradient(180deg, rgba(255,251,246,0.46) 0%, rgba(255,251,246,0.16) 45%, rgba(255,251,246,0.34) 100%),
    url("/uploads/sky-footer.webp") center / cover no-repeat,
    linear-gradient(180deg, #FBE8D6, #F5FAFF);
}
.cloud-blob { display: none; }  /* retired: the real Skylift Cloud images replace the SVG clouds */

/* Soft blends: fade the top/bottom edge of each photo band into the neighbouring sky
   so sections don't hard-cut. Sits above the band photo, below the content. */
.sky-wash::before, .sky-wash::after {
  content: ""; position: absolute; left: 0; right: 0; height: 110px; z-index: 0; pointer-events: none;
}
.sky-wash::before { top: -1px;    background: linear-gradient(180deg, #EFF5FE 0%, rgba(239,245,254,0) 100%); }
.sky-wash::after  { bottom: -1px; background: linear-gradient(0deg,  #EFF5FE 0%, rgba(239,245,254,0) 100%); }
.sky-wash > * { position: relative; z-index: 1; }
/* Hero: a taller, near-white top fade so the sticky nav eases into the blue sky. */
header.sky-wash::before {
  height: 230px;
  background: linear-gradient(180deg, #FAFCFF 0%, rgba(250,252,255,0.72) 24%, rgba(250,252,255,0.28) 58%, rgba(250,252,255,0) 100%);
}
/* Final-CTA sunset band: a taller, softer top fade so it eases out of the section above. */
section.sky-wash::before {
  height: 240px;
  background: linear-gradient(180deg, #F3F7FE 0%, rgba(243,247,254,0.74) 26%, rgba(243,247,254,0.30) 62%, rgba(243,247,254,0) 100%);
}
/* the final-CTA band sits above the dark footer, so it needs no bottom blend */
main > section.sky-wash:last-of-type::after { display: none; }

/* Decorative parallax clouds (Skylift Cloud 1-3), injected as body's first child + moved
   on scroll by skylift-cloud.js. Behind all content; visible in the open-sky sections. */
.cloud-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.cloud-layer .cloud { position: absolute; display: block; max-width: none; will-change: transform; }
/* floating low-opacity white cloud blobs */
.cloud-blob {
  position: absolute; pointer-events: none; z-index: 0;
  color: #fff; opacity: 0.9;
  filter: drop-shadow(0 8px 16px rgba(31,78,140,0.05));
}
.cloud-blob svg { width: 100%; height: auto; }
.sky-wash > .container, .section > .container { position: relative; z-index: 1; }

/* Wavy cloud-edge divider (place at bottom of a section) */
.cloud-edge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; line-height: 0; }
.cloud-edge svg { width: 100%; height: auto; display: block; }

/* Doodles — sparkles + tiny clouds scattered off-grid */
.doodle { position: absolute; pointer-events: none; z-index: 1; opacity: 0.9; }
.doodle--spark { color: var(--yellow); }
.doodle--spark.is-pink { color: var(--pink); }
.doodle--spark.is-lavender { color: var(--lavender); }
.doodle--spark.is-lime { color: var(--lime-deep); }

/* ----------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 15px 26px; border-radius: var(--r-pill);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
  white-space: nowrap; line-height: 1;
}
.btn:hover  { transform: scale(1.02); }
.btn:active { transform: scale(0.98); }

.btn-lime   { background: var(--lime); color: var(--ink); box-shadow: var(--shadow-lime); }
.btn-lime:hover { background: var(--lime-deep); }

.btn-dark   { background: var(--dark); color: #fff; }
.btn-dark:hover { background: #2a3042; }

.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.6px var(--ink); }
.btn-outline:hover { box-shadow: inset 0 0 0 1.6px var(--ink); background: rgba(27,31,42,0.04); }

/* text-link CTA with underline-on-hover (arrow inline) */
.btn-text {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--ink);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color 0.18s var(--ease);
}
.btn-text:hover { border-bottom-color: var(--ink); }

.btn-block { width: 100%; }

/* ----------------------------------------------------------------------------
   7. CARDS + ICON TILES
   -------------------------------------------------------------------------- */
.card {
  background: var(--white); border-radius: var(--r-card);
  box-shadow: var(--shadow-md); padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(231,238,246,0.9);
}
.card--flat { box-shadow: var(--shadow-sm); }
.tilt-l { transform: rotate(-1.4deg); }
.tilt-r { transform: rotate(1.4deg); }

.icon-tile {
  width: 52px; height: 52px; border-radius: 15px;
  display: grid; place-items: center; color: #fff; flex: none;
  box-shadow: var(--shadow-sm);
}
.icon-tile svg { width: 26px; height: 26px; }
.icon-tile.is-coral      { background: var(--coral); }
.icon-tile.is-violet     { background: var(--violet); }
.icon-tile.is-periwinkle { background: var(--periwinkle); }
.icon-tile.is-orange     { background: var(--orange); }
.icon-tile.is-yellow     { background: var(--yellow); color: var(--ink); }
.icon-tile.is-pink       { background: var(--pink);  color: var(--ink); }
.icon-tile.is-lime       { background: var(--lime);  color: var(--ink); }

/* Numeral used in step cards */
.step-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 2.6rem; color: var(--hairline); line-height: 1;
}

/* Generic 3-up / 2-up grids */
.grid { display: grid; gap: clamp(16px, 2.4vw, 24px); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* ----------------------------------------------------------------------------
   8. CHIPS (placeholder [Name, Business, City] etc.)
   -------------------------------------------------------------------------- */
.chip {
  display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--muted);
  padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px dashed var(--hairline); background: #fff;
}
.chip--solid { border-style: solid; }

/* ----------------------------------------------------------------------------
   9. SITE-MOCKUP SHOWCASE (browser frames, 3D perspective row)
   -------------------------------------------------------------------------- */
.browser-frame {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--hairline);
}
.browser-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--hairline); background: #fff;
}
.browser-dots { display: flex; gap: 6px; }
.browser-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.browser-dots i:nth-child(1){ background: var(--pink); }
.browser-dots i:nth-child(2){ background: var(--yellow); }
.browser-dots i:nth-child(3){ background: var(--lime); }
.browser-url {
  flex: 1; font-size: 0.78rem; color: var(--muted);
  background: var(--sky-base); border-radius: var(--r-pill); padding: 5px 12px;
}
.browser-shot {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: linear-gradient(160deg, #F3F7FC, #ECF3FB); color: var(--muted);
  text-align: center; padding: 20px; font-size: 0.9rem;
}
.browser-shot img { width: 100%; height: 100%; object-fit: cover; }

/* Perspective row: center frame front, siblings recede */
.showcase { position: relative; display: flex; justify-content: center; align-items: center; gap: clamp(-40px, -3vw, 0px); }
.showcase .browser-frame { flex: 1 1 0; max-width: 420px; }
.showcase .is-back {
  transform: perspective(1400px) scale(0.9); opacity: 0.72; z-index: 0;
  margin-inline: -30px;
}
.showcase .is-front { z-index: 2; transform: translateY(-14px); }
.tag-live {
  position: absolute; top: -14px; right: 8px; z-index: 3;
  background: var(--lime); color: var(--ink);
  font-weight: 700; font-size: 0.82rem; padding: 7px 14px; border-radius: var(--r-pill);
  transform: rotate(3deg); box-shadow: var(--shadow-sm);
}

/* ----------------------------------------------------------------------------
   9b. PLAN CARDS + FEATURE LISTS + COMPARISON TABLE (shared: Plans, Services)
   -------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan {
  position: relative; background: #fff; border-radius: var(--r-card-lg);
  box-shadow: var(--shadow-md); padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(231,238,246,0.9); text-align: left;
}
.plan__name { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }
.plan__tagline { color: var(--muted); font-size: 0.95rem; margin-top: 2px; }
.plan__price { margin-top: 16px; font-family: var(--font-display); font-weight: 800; font-size: 2.9rem; color: var(--ink); line-height: 1; }
.plan__price span { font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--muted); }
.plan__rule { border: 0; border-top: 1px solid var(--hairline); margin: 20px 0; }
.plan__cont { font-weight: 600; color: var(--ink); font-size: 0.95rem; margin-bottom: 12px; }
.plan--featured {
  border: 2px solid var(--lime); box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
}
.plan__badge {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  background: var(--lime); color: var(--ink); font-weight: 700; font-size: 0.82rem;
  padding: 7px 18px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: var(--shadow-sm);
}
.plan__cta { margin-top: 24px; }
.plan__start { display: block; text-align: center; margin-top: 12px; font-weight: 600; font-size: 0.92rem; }
.plan__start .btn-text { color: var(--muted); }
.plan__start .btn-text:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Feature list: check bullets (default) / sparkle bullets (.feat--spark) */
.feat { list-style: none; padding: 0; margin: 0; }
.feat li { position: relative; padding-left: 30px; margin-bottom: 11px; color: var(--muted); font-size: 0.97rem; line-height: 1.45; }
.feat li strong { color: var(--ink); }
.feat li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 19px; height: 19px;
  background: no-repeat center / 13px, #E7F7C9; border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a8f16' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.feat--spark li::before {
  background-color: #EDE8FC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B7CF0'%3E%3Cpath d='M12 0c.6 6 5.4 10.8 12 12-6.6 1.2-11.4 6-12 12-.6-6-5.4-10.8-12-12C6.6 10.8 11.4 6 12 0z'/%3E%3C/svg%3E");
}

/* Comparison table */
.cmp {
  width: 100%; border-collapse: collapse; background: #fff; overflow: hidden;
  border-radius: var(--r-card); box-shadow: var(--shadow-md); text-align: left;
}
.cmp th, .cmp td { padding: 16px 20px; border-bottom: 1px solid var(--hairline); }
.cmp thead th { font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; color: var(--ink); background: #fff; }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td.sep { color: var(--muted); }
.cmp .col-skylift { background: #FBFEF4; font-weight: 600; color: var(--ink); }
.cmp thead .col-skylift { background: #F1FADF; }
.cmp .yes { color: #17864a; font-weight: 700; }
.pill-mini { display: inline-block; background: var(--lime); color: var(--ink); font-weight: 700; font-size: 0.78rem; padding: 3px 11px; border-radius: var(--r-pill); }
@media (max-width: 780px) {
  .plans { grid-template-columns: 1fr; }
  .plan--featured { transform: none; }
  .cmp { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ----------------------------------------------------------------------------
   9c. BOOKING CALENDAR (skylift-calendar.js) — /booking, /drop-in, /contractors/booking
   -------------------------------------------------------------------------- */
.skycal { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card-lg); box-shadow: var(--shadow-md); padding: clamp(20px, 3vw, 30px); max-width: 560px; margin-inline: auto; }
.skycal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.skycal-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.skycal-nav { width: 40px; height: 40px; border-radius: 12px; font-size: 1.4rem; color: var(--ink); background: var(--sky-base); display: grid; place-items: center; }
.skycal-nav:hover:not(:disabled) { background: #e6eef8; }
.skycal-nav:disabled { opacity: 0.35; cursor: default; }
.skycal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.skycal-week span { text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.skycal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.skycal-day { aspect-ratio: 1; border-radius: 10px; font-weight: 600; font-size: 0.95rem; color: var(--ink); background: transparent; display: grid; place-items: center; }
.skycal-day.is-empty { visibility: hidden; }
.skycal-day.is-off { color: var(--hairline); cursor: default; }
.skycal-day.is-loading { color: var(--hairline); }
.skycal-day.is-open { background: #EDF7D6; color: #3f6a0e; }
.skycal-day.is-open:hover { background: var(--lime); }
.skycal-day.is-sel { background: var(--lime); color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
.skycal-note { color: var(--muted); font-size: 0.92rem; margin-top: 14px; text-align: center; }
.skycal-slots-h { font-family: var(--font-display); font-weight: 700; margin: 20px 0 10px; }
.skycal-slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.skycal-slot { padding: 11px 8px; border-radius: var(--r-pill); border: 1.5px solid var(--hairline); background: #fff; font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.skycal-slot:hover { border-color: var(--ink); }
.skycal-slot.is-sel { background: var(--lime); border-color: var(--lime); }
.skycal-form:not(:empty) { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.skycal-picked { background: var(--sky-base); border-radius: var(--r-sm); padding: 12px 16px; margin-bottom: 16px; font-size: 0.95rem; color: var(--ink); }
.skycal-done { text-align: center; padding: 20px 8px; }

/* ----------------------------------------------------------------------------
   10. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.accordion { max-width: 760px; margin-inline: auto; }
.acc-item {
  background: #fff; border-radius: 18px; box-shadow: var(--shadow-sm);
  margin-bottom: 14px; overflow: hidden; border: 1px solid rgba(231,238,246,0.9);
}
.acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; text-align: left; font-family: var(--font-display);
  font-weight: 700; font-size: 1.08rem; color: var(--ink);
}
.acc-icon { flex: none; width: 22px; height: 22px; position: relative; transition: transform 0.25s var(--ease); }
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: var(--ink);
}
.acc-icon::before { width: 100%; height: 2.2px; top: 50%; transform: translateY(-50%); }
.acc-icon::after  { height: 100%; width: 2.2px; left: 50%; transform: translateX(-50%); transition: opacity 0.25s var(--ease); }
.acc-item[open] .acc-icon::after { opacity: 0; }
.acc-body { padding: 0 24px 22px; color: var(--muted); }
.acc-body p { color: var(--muted); }
/* <details>/<summary> native version */
details.acc-item summary { list-style: none; cursor: pointer; }
details.acc-item summary::-webkit-details-marker { display: none; }

/* ----------------------------------------------------------------------------
   11. NAV (global, sticky)
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.site-nav.is-stuck { border-bottom-color: var(--hairline); box-shadow: var(--shadow-sm); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
.nav-logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 1.32rem; color: var(--ink); letter-spacing: -0.02em; }
.nav-logo svg { width: 30px; height: 30px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-weight: 500; font-size: 0.98rem; color: var(--ink);
  padding: 8px 14px; border-radius: var(--r-pill); transition: background 0.15s var(--ease);
}
.nav-links a:hover { background: rgba(27,31,42,0.05); }
.nav-links a.is-active { background: var(--lime); font-weight: 600; }
.nav-links > .btn { display: none; }   /* in-menu Book-a-call: mobile dropdown only */
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content:""; display:block; width: 22px; height: 2.2px; background: var(--ink); position: relative; transition: 0.2s var(--ease); }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after  { position: absolute; top: 7px; }

@media (max-width: 860px) {
  .nav-links, .nav-right .btn-dark { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-nav.is-open .nav-links {
    display: flex; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; padding: 14px var(--gutter) 20px;
    box-shadow: var(--shadow-md); border-top: 1px solid var(--hairline);
  }
  .site-nav.is-open .nav-links a { padding: 13px 12px; }
  .site-nav.is-open .nav-links > .btn { display: inline-flex; margin-top: 8px; }
}

/* ----------------------------------------------------------------------------
   12. FOOTER (global)
   -------------------------------------------------------------------------- */
.site-footer { position: relative; background: var(--dark); color: #fff; padding-block: clamp(48px, 7vw, 80px) 40px; }
.site-footer a { color: rgba(255,255,255,0.78); transition: color 0.15s var(--ease); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; }
.footer-logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: #fff; margin-bottom: 14px; }
.footer-logo svg { width: 28px; height: 28px; }
.footer-tag { color: rgba(255,255,255,0.66); max-width: 320px; font-size: 0.95rem; }
.footer-col h4 { color: rgba(255,255,255,0.5); font-family: var(--font-body); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col a { display: block; padding: 5px 0; font-size: 0.96rem; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.55); font-size: 0.88rem; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ----------------------------------------------------------------------------
   13. STICKY MOBILE CTA BAR
   -------------------------------------------------------------------------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; gap: 10px; padding: 12px var(--gutter);
  background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
  border-top: 1px solid var(--hairline);
}
.mobile-cta .btn { flex: 1; padding: 13px; }
@media (max-width: 860px) { .mobile-cta { display: flex; } body { padding-bottom: 76px; } }

/* ----------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */
.field { display: block; margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; color: var(--ink); }
.field .req { color: var(--coral); }
.input, .textarea, select.input {
  width: 100%; font: inherit; color: var(--ink);
  padding: 13px 16px; border-radius: var(--r-sm);
  border: 1.6px solid var(--hairline); background: #fff;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.input:focus, .textarea:focus, select.input:focus {
  outline: none; border-color: var(--periwinkle);
  box-shadow: 0 0 0 3px rgba(110,139,245,0.16);
}
.textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */
.form-status { font-size: 0.95rem; font-weight: 600; margin-top: 6px; }
.form-status.is-ok  { color: #17864a; }
.form-status.is-err { color: var(--coral); }

/* ----------------------------------------------------------------------------
   15. MOTION — reveal on scroll (progressive; no-JS shows everything)
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
[data-stagger] > * { transition-delay: var(--d, 0s); }

@keyframes drift { from { transform: translateY(0);} to { transform: translateY(-14px);} }
.drift { animation: drift 7s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .drift { animation: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* ----------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */
.dotsep { color: var(--muted); }
.dotsep > * + *::before { content: "·"; margin: 0 10px; color: var(--hairline); }
.wrap-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wrap-cta.center { justify-content: center; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; }
@media (max-width: 780px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .showcase { flex-direction: column; gap: 18px; }
  .showcase .is-back { display: none; }
  .showcase .is-front { transform: none; }
  .tilt-l, .tilt-r { transform: none; }
}
