/* ============================================================
   Webrex Studio — Homepage stylesheet
   Black • White • Green theme. Self-contained.
   Loaded site-wide (base, base-home, base-apps layouts).
   No Tailwind, no shared site-wide overrides — clean slate.
   ============================================================ */

/* ---------- Web fonts (site-wide): Poppins body + PP Editorial New / Fraunces accent ---------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@1,400;1,500;1,600&display=swap");

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Design tokens ----------
   Brand-aligned palette: pure white/black surfaces, Shopify brand greens. */
:root {
  /* Surfaces — pure black/white */
  --w-surface-light: #FFFFFF;
  --w-surface-dark:  #000000;

  /* Ink */
  --w-ink-light:        #FFFFFF;
  --w-ink-dark:         #000000;
  --w-ink-muted-light:  #B5B5B5;  /* secondary text on dark */
  --w-ink-muted-dark:   #555555;  /* secondary text on light */

  /* Hairlines (1px) */
  --w-rule-light: #E5E5E5;
  --w-rule-dark:  #1A1A1A;

  /* Accent — Shopify brand greens */
  --w-accent:        #5E8E3E;  /* Shopify Dark Green — readable on white */
  --w-accent-bright: #95BF47;  /* Shopify Guacamole Green — iconic brand fill */
  --w-accent-soft:   #4A6F31;  /* darker Shopify green — shadow moments */

  /* Decorative corner rings — ONE source of truth, used everywhere (process,
     why-choose, hero). Same green, opacity fading outward: inner ring strongest,
     outer ring barely-there (soft / blurred feel). */
  --w-ring-1: rgba(149, 191, 71, 0.95);
  --w-ring-2: rgba(159, 197, 89, 0.62);
  --w-ring-3: rgba(170, 203, 107, 0.38);
  --w-ring-4: rgba(180, 210, 126, 0.18);

  /* Radius */
  --w-radius-sm:   8px;
  --w-radius-md:   16px;
  --w-radius-lg:   24px;
  --w-radius-pill: 999px;

  /* Motion */
  --w-motion-fast:   200ms;
  --w-motion-base:   400ms;
  --w-motion-medium: 700ms;
  --w-motion-slow:   1200ms;
  --w-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --w-ease-snap: cubic-bezier(0.65, 0, 0.35, 1);

  /* Fonts */
  --w-font-display: "Poppins", system-ui, sans-serif;
  --w-font-italic:  "PP Editorial New", "Fraunces", Georgia, serif;
  --w-font-body:    "Poppins", system-ui, sans-serif;
  --w-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Default theme cascade — light */
  --w-bg:            var(--w-surface-light);
  --w-ink:           var(--w-ink-dark);
  --w-ink-muted:     var(--w-ink-muted-dark);
  --w-rule:          var(--w-rule-light);
  --w-accent-themed: var(--w-accent);
}

/* ---------- Theme switching via data-theme attribute ---------- */
[data-theme="dark"] {
  --w-bg:            var(--w-surface-dark);
  --w-ink:           var(--w-ink-light);
  --w-ink-muted:     var(--w-ink-muted-light);
  --w-rule:          var(--w-rule-dark);
  --w-accent-themed: var(--w-accent-bright);
}
[data-theme="light"] {
  --w-bg:            var(--w-surface-light);
  --w-ink:           var(--w-ink-dark);
  --w-ink-muted:     var(--w-ink-muted-dark);
  --w-rule:          var(--w-rule-light);
  --w-accent-themed: var(--w-accent);
}
section[data-theme] {
  background: var(--w-bg);
  color: var(--w-ink);
}


/* ---------- Body baseline ----------
   Default to white. Sections override per [data-theme] as the user scrolls. */
body.webrex-home {
  background: #FFFFFF;
  color: var(--w-ink-dark);
  font-family: var(--w-font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.webrex-home main { background: #FFFFFF; }

/* ---------- Typography helpers ---------- */
.w-display { font-family: var(--w-font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.w-italic  { font-family: var(--w-font-italic);  font-style: italic; font-weight: 400; color: var(--w-accent-themed); }
.w-mono    { font-family: var(--w-font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }

/* ---------- Container ---------- */
.w-container { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px)  { .w-container { padding: 0 3rem; } }
@media (min-width: 1024px) { .w-container { padding: 0 5rem; } }

/* ---------- Section rhythm ---------- */
.w-section          { padding: 6rem 0; }
.w-section--tight   { padding: 3rem 0; }
.w-section--hero    { padding: 6rem 0 4rem; }
@media (min-width: 768px) {
  .w-section       { padding: 8rem 0; }
  .w-section--hero { padding: 8rem 0 6rem; }
}

/* ---------- Dot indicator ---------- */
.w-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--w-accent-themed); vertical-align: middle; }
.w-dot--sm { width: 4px; height: 4px; }
.w-dot--md { width: 6px; height: 6px; }
.w-dot--lg { width: 8px; height: 8px; }
.w-dot--outline { background: transparent; border: 1px solid var(--w-accent-themed); }
.w-dot--pulse { animation: w-pulse 1.8s var(--w-ease-out) infinite; }
@keyframes w-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50%      { transform: scale(1);   opacity: 1; }
}

/* ---------- Section header ---------- */
.w-section-header { margin-bottom: 4rem; }
.w-section-eyebrow { font-family: var(--w-font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--w-ink-muted); margin-bottom: 1.5rem; display: block; }
.w-section-eyebrow .w-dot { margin: 0 6px; }
.w-section-title { font-family: var(--w-font-display); font-weight: 600; font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--w-ink); margin-bottom: 1rem; }
.w-section-intro { font-size: 1.25rem; line-height: 1.55; color: var(--w-ink-muted); max-width: 56ch; }

/* CTA buttons → /assets/css/buttons.css (sitewide single source of truth) */

/* ---------- Card ---------- */
.w-card {
  background: transparent;
  border: 1px solid var(--w-rule);
  border-radius: var(--w-radius-md);
  padding: 1.5rem;
  transition: border-color var(--w-motion-fast) var(--w-ease-out);
}
.w-card:hover { border-color: var(--w-accent-themed); }
.w-card-image { aspect-ratio: 4 / 3; border-radius: var(--w-radius-sm); overflow: hidden; margin-bottom: 1rem; background: var(--w-rule); }
.w-card-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Tag pill ---------- */
.w-tag {
  display: inline-block;
  font-family: var(--w-font-mono);
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid var(--w-rule);
  border-radius: var(--w-radius-pill);
  color: var(--w-ink-muted);
}

/* ---------- Rule ---------- */
.w-rule   { width: 100%; height: 1px; background: var(--w-rule); border: 0; margin: 0; }
.w-rule-v { width: 1px;  height: 100%; background: var(--w-rule); }

/* ---------- Floating pill nav ----------
   AUTO-INVERTS to contrast with the section behind it (driven by motion-v2.js
   IntersectionObserver, which writes body[data-theme="light"|"dark"]):

     body[data-theme="dark"]  → nav is WHITE + BLACK text + DARK logo
     body[data-theme="light"] → nav is BLACK + WHITE text + LIGHT logo

   Default (no JS yet / page just loaded) = WHITE nav so the hero (dark) is
   contrasted from the first paint. */
.w-nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 100;
  display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap;
  gap: 22px;
  padding: 10px 10px 10px 24px;
  background: #FFFFFF;
  border-radius: var(--w-radius-pill);
  color: #000000;
  font-family: var(--w-font-display);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em;
  max-width: calc(100vw - 24px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  transition: background-color 500ms var(--w-ease-out),
              color            500ms var(--w-ease-out),
              opacity          300ms var(--w-ease-out),
              transform        300ms var(--w-ease-out);
}
/* ── Auto-invert nav based on section behind it (set by IntersectionObserver) ──
   dark section → white pill    |    light section → black pill              ── */
body[data-theme="dark"]  .w-nav { background: #FFFFFF; color: #000000; }
body[data-theme="light"] .w-nav { background: #000000; color: #FFFFFF; }

/* CTA button inside nav flips too (border = currentColor already handles border) */
body[data-theme="dark"]  .w-nav .w-cta-primary,
body[data-theme="dark"]  .w-nav .w-cta-secondary { background: #000000; color: #FFFFFF; }
body[data-theme="light"] .w-nav .w-cta-primary,
body[data-theme="light"] .w-nav .w-cta-secondary { background: #FFFFFF; color: #000000; }

/* Nav links & chevron inherit the pill's color automatically via currentColor */
/* Active dropdown link colour stays green regardless of pill mode */
body[data-theme="dark"]  .w-nav .w-nav__link--has-dropdown:hover,
body[data-theme="dark"]  .w-nav .w-nav__item.is-open .w-nav__link--has-dropdown,
body[data-theme="light"] .w-nav .w-nav__link--has-dropdown:hover,
body[data-theme="light"] .w-nav .w-nav__item.is-open .w-nav__link--has-dropdown { color: #95BF47; }

/* No explicit z-index needed on nav flex children —
   the mega dropdown uses clip-path to erase the overlap zone entirely. */

/* Logo — only ONE variant visible at a time. Crossfade implicit via the
   nav's color transition. Default = dark wordmark (matches the initial
   WHITE nav over the dark hero). */
.w-nav__logo { display: flex; align-items: center; line-height: 0; flex-shrink: 0; }
.w-nav__logo img { height: 20px; width: auto; display: block; }
.w-nav__logo .logo-dark  { display: block; }
.w-nav__logo .logo-light { display: none;  }
body[data-theme="dark"]  .w-nav__logo .logo-dark  { display: block; }
body[data-theme="dark"]  .w-nav__logo .logo-light { display: none;  }
body[data-theme="light"] .w-nav__logo .logo-dark  { display: none;  }
body[data-theme="light"] .w-nav__logo .logo-light { display: block; }

.w-nav__divider {
  width: 1px; height: 14px;
  background: currentColor; opacity: 0.2;
  flex-shrink: 0;
}
.w-nav__links {
  display: flex; align-items: center; gap: 22px;
  flex-wrap: nowrap; white-space: nowrap;
  /* No position:relative — dropdown positions relative to .w-nav (position:fixed) */
}
.w-nav__link {
  color: inherit; position: relative; padding: 4px 0;
  opacity: 0.85; white-space: nowrap;
  transition: opacity var(--w-motion-fast) var(--w-ease-out),
              color   var(--w-motion-fast) var(--w-ease-out);
}
.w-nav__link:hover { opacity: 1; color: var(--w-accent-bright); }
.w-nav__link--active { opacity: 1; }
.w-nav__link--active::after {
  content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--w-accent-bright);
}

/* ============================================================
   Nav CTA — pill button on the nav bar.

   DEFAULT (white nav — all pages):  BLACK pill, WHITE text.
   data-theme="light" (black nav):   WHITE pill, BLACK text.
   data-theme="dark"  (white nav):   same as default = BLACK pill.

   Hover on all states: Shopify-green arc expands from bottom-center.
   ============================================================ */

/* ── Default: BLACK button on WHITE nav (applies everywhere) ── */
.w-nav__cta,
.w-nav__cta:link,
.w-nav__cta:visited,
.w-nav__cta:hover,
.w-nav__cta:focus,
.w-nav__cta:active,
.w-nav__cta * {
  color: #FFFFFF !important;
}
.w-nav__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  background: #000000;
  border: 1.5px solid currentColor; /* always matches text colour */
  border-radius: var(--w-radius-pill);
  font-family: var(--w-font-display);
  font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
  flex-shrink: 0;
  transition: transform var(--w-motion-fast) var(--w-ease-out);
}
.w-nav__cta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--w-accent-bright);
  clip-path: circle(0% at 50% 100%);
  transition: clip-path 600ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: clip-path;
  z-index: 0;
}
.w-nav__cta > *,
.w-nav__cta .w-nav__cta-label,
.w-nav__cta .w-nav__cta-arrow {
  position: relative; z-index: 1;
  color: #FFFFFF !important;
}
.w-nav__cta .w-nav__cta-arrow path { stroke: #FFFFFF !important; }
.w-nav__cta:hover::before { clip-path: circle(150% at 50% 100%); }
.w-nav__cta:hover { transform: none; }
/* On hover, text transitions from white → black as green fill covers */
.w-nav__cta:hover,
.w-nav__cta:hover *,
.w-nav__cta:hover .w-nav__cta-label,
.w-nav__cta:hover .w-nav__cta-arrow { color: #000000 !important; }
.w-nav__cta:hover .w-nav__cta-arrow path { stroke: #000000 !important; }
.w-nav__cta-arrow { transition: transform var(--w-motion-fast) var(--w-ease-out); }
.w-nav__cta:hover .w-nav__cta-arrow { transform: translateX(3px); }

/* ── data-theme="dark" (white nav): same as default = BLACK button ── */
body[data-theme="dark"] .w-nav__cta { background: #000000; }
body[data-theme="dark"] .w-nav__cta,
body[data-theme="dark"] .w-nav__cta * { color: #FFFFFF !important; }
body[data-theme="dark"] .w-nav__cta .w-nav__cta-arrow path { stroke: #FFFFFF !important; }
body[data-theme="dark"] .w-nav__cta:hover,
body[data-theme="dark"] .w-nav__cta:hover * { color: #000000 !important; }
body[data-theme="dark"] .w-nav__cta:hover .w-nav__cta-arrow path { stroke: #000000 !important; }

/* ── data-theme="light" (BLACK nav): WHITE button, BLACK text ── */
body[data-theme="light"] .w-nav__cta,
body[data-theme="light"] .w-nav__cta:link,
body[data-theme="light"] .w-nav__cta:visited,
body[data-theme="light"] .w-nav__cta:hover,
body[data-theme="light"] .w-nav__cta:focus,
body[data-theme="light"] .w-nav__cta:active,
body[data-theme="light"] .w-nav__cta * { color: #000000 !important; }
body[data-theme="light"] .w-nav__cta { background: #FFFFFF; }
body[data-theme="light"] .w-nav__cta > *,
body[data-theme="light"] .w-nav__cta .w-nav__cta-label,
body[data-theme="light"] .w-nav__cta .w-nav__cta-arrow { color: #000000 !important; }
body[data-theme="light"] .w-nav__cta .w-nav__cta-arrow path { stroke: #000000 !important; }
body[data-theme="light"] .w-nav__cta:hover,
body[data-theme="light"] .w-nav__cta:hover * { color: #000000 !important; }

/* Hide the nav CTA below 1100px to keep nav single-line; nav scales down below 760px */
@media (max-width: 1100px) {
  .w-nav__cta { display: none; }
}
@media (max-width: 760px) {
  .w-nav { gap: 14px; padding: 10px 16px; font-size: 0.8125rem; }
  .w-nav__logo img { height: 18px; }
  .w-nav__links { gap: 16px; }
}

/* ---------- Mobile / tablet nav: full-width white bar, hamburger left ---------- */
.w-nav__toggle { display: none; }
.w-nav-mobile { display: none; }

@media (max-width: 1024px) {
  /* Turn the floating pill into a full-width white top bar */
  .w-nav,
  body[data-theme="dark"]  .w-nav,
  body[data-theme="light"] .w-nav {
    top: 0; left: 0; right: 0;
    transform: none;
    width: 100%; max-width: none;
    border-radius: 0;
    padding: 14px 18px;
    gap: 14px;
    justify-content: flex-start;
    background: #FFFFFF !important;
    color: #000000 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
  .w-nav__links,
  .w-nav__divider,
  .w-nav__cta { display: none !important; }

  /* Hamburger pinned to the LEFT */
  .w-nav__toggle {
    order: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 26px; height: 24px;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #000000;
    flex-shrink: 0;
  }
  .w-nav__toggle span {
    display: block; height: 2px; width: 22px; border-radius: 2px;
    background: currentColor;
    transition: transform 280ms var(--w-ease-out, cubic-bezier(0.16,1,0.3,1)), opacity 200ms ease;
  }
  .w-nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .w-nav__toggle.is-open span:nth-child(2) { opacity: 0; }
  .w-nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Logo centered in the bar, always the dark wordmark on white */
  .w-nav__logo { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  .w-nav__logo .logo-dark  { display: block !important; }
  .w-nav__logo .logo-light { display: none  !important; }

  /* Full-width dropdown panel below the bar */
  .w-nav-mobile {
    display: flex; flex-direction: column;
    position: fixed;
    top: 56px; left: 0; right: 0;
    transform: translateY(-8px);
    z-index: 99;
    width: 100%;
    background: #FFFFFF; color: #000000;
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
    border-top: 1px solid #EEEEEE;
    padding: 10px 14px 16px;
    opacity: 0; pointer-events: none;
    transition: opacity 260ms var(--w-ease-out, ease), transform 260ms var(--w-ease-out, ease);
  }
  .w-nav-mobile.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .w-nav-mobile__link {
    display: block; padding: 13px 12px; border-radius: 10px;
    color: #1A1A1A; text-decoration: none;
    border-bottom: 1px solid #F0F0F0;
    font-family: var(--w-font-display); font-size: 1rem; font-weight: 500;
    transition: background-color 200ms ease, color 200ms ease;
  }
  .w-nav-mobile__link:hover { background: #F4F4F4; color: var(--w-accent); }
  .w-nav-mobile__cta {
    display: block; text-align: center; margin-top: 12px;
    padding: 13px 14px; border-radius: 999px;
    background: var(--w-accent-bright, #95BF47); color: #0A0A0A !important;
    font-family: var(--w-font-display); font-weight: 600; text-decoration: none;
  }
}

/* Hidden state — applied by motion-v2.js while intro animation plays */
body.js-ready .w-nav--hidden {
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(-12px);
}

/* ---------- Booking popup modal ---------- */
.w-cal-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}
.w-cal-modal.is-open { display: flex; }
.w-cal-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: w-cal-fade 220ms ease;
}
.w-cal-modal__dialog {
  position: relative; z-index: 1;
  box-sizing: border-box;
  width: 100%; max-width: 1040px;
  height: min(78vh, 680px);
  padding-top: 46px;            /* white header strip for the close button */
  background: #FFFFFF; border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
  animation: w-cal-pop 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.w-cal-modal__close {
  position: absolute; top: 8px; right: 12px; left: auto; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: #000000; color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.w-cal-modal__close:hover { background: var(--w-accent-bright, #95BF47); color: #0A0A0A; transform: rotate(90deg); }
.w-cal-modal__loading {
  position: absolute; inset: 46px 0 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--w-font-mono); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #888888;
  background: #FFFFFF;
}
/* Scroll container for the inline Cal.com embed (fixes mobile time scrolling). */
.w-cal-modal__frame {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #FFFFFF;
}
.w-cal-modal__frame iframe { width: 100% !important; border: 0; background: #FFFFFF; }

@keyframes w-cal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes w-cal-pop  { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (max-width: 768px) {
  .w-cal-modal { padding: 12px; }
  .w-cal-modal__dialog { height: 88vh; max-width: 100%; border-radius: 16px; }
}

/* ---------- Marquee ---------- */
.w-marquee        { display: flex; overflow: hidden; gap: 0; padding: 12px 0; border-top: 1px solid var(--w-rule); border-bottom: 1px solid var(--w-rule); }
.w-marquee__track { display: flex; gap: 28px; animation: w-marquee 28s linear infinite; white-space: nowrap; padding-right: 28px; }
@keyframes w-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Reveal animations (active only after JS marks body.js-ready) ---------- */
body.js-ready .w-reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--w-motion-medium) var(--w-ease-out),
              transform var(--w-motion-medium) var(--w-ease-out);
}
body.js-ready .w-reveal.is-visible { opacity: 1; transform: translateY(0); }

body.js-ready .w-reveal-mask {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--w-motion-medium) var(--w-ease-snap);
}
body.js-ready .w-reveal-mask.is-visible { clip-path: inset(0 0 0 0); }

/* ---------- Video modal ---------- */
.w-video-modal {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.92);
  align-items: center; justify-content: center;
  padding: 24px;
}
.w-video-modal.is-open { display: flex; }
.w-video-modal__close {
  position: absolute; top: 24px; right: 24px;
  background: none; border: none; color: var(--w-ink-light);
  font-size: 32px;
}
.w-video-modal__player {
  max-width: 880px; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--w-radius-lg); background: #000;
}

/* ---------- Intro animation overlay ---------- */
.w-intro {
  position: fixed; inset: 0; z-index: 200;
  background: #000000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: clip-path 800ms var(--w-ease-snap);
}
.w-intro.is-retracting { clip-path: inset(100% 0 0 0); }
.w-intro__logo {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--w-ease-out), transform 1.2s var(--w-ease-out);
  height: 56px; width: auto;
}
.w-intro__logo.is-visible { opacity: 1; transform: translateY(0); }
.w-intro__skip {
  position: absolute; bottom: 24px; right: 24px;
  color: var(--w-ink-muted-light);
  font-family: var(--w-font-mono);
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: none; border: none; pointer-events: auto;
}
.w-intro__skip:hover { color: var(--w-ink-light); }

/* ---------- Green dot cursor ----------
   A small Shopify-Guacamole dot follows the mouse with a slight lag.
   The native system cursor is NOT hidden (kept for accessibility).
   Initialized + driven by setupCursorDot() in motion-v2.js. */
.w-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--w-accent-bright);   /* Shopify Guacamole #95BF47 */
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity 220ms var(--w-ease-out),
              width   220ms var(--w-ease-out),
              height  220ms var(--w-ease-out);
  will-change: transform;
  mix-blend-mode: normal;
}
.w-cursor-dot.is-active { opacity: 1; }
/* Grow slightly when hovering interactive elements */
.w-cursor-dot.is-hover { width: 18px; height: 18px; opacity: 0.85; }
/* Hide entirely on touch devices */
@media (hover: none), (pointer: coarse) {
  .w-cursor-dot { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   NAV DROPDOWNS — hover mega-menu & list dropdowns
   ══════════════════════════════════════════════════════════════ */

/* Wrapper that provides position context for the floating card.
   padding-bottom + margin-bottom only applied when IS open — this bridges
   the gap so cursor can move from text to panel without closing the menu,
   but does NOT trigger the dropdown by hovering below the nav text. */
.w-nav__item {
  position: static;
  display: flex;
  align-items: center;
}
.w-nav__item.is-open {
  padding-bottom: 48px;
  margin-bottom: -48px;
}

/* Nav link as a button (for items with dropdowns) */
.w-nav__link--has-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 0.85;
  transition: opacity 180ms ease, color 180ms ease;
}
.w-nav__link--has-dropdown:hover,
.w-nav__item.is-open .w-nav__link--has-dropdown { opacity: 1; color: var(--w-accent-bright); }
.w-nav__chevron {
  display: block;
  transition: transform 220ms var(--w-ease-out, cubic-bezier(0.16,1,0.3,1));
  opacity: 0.4;
}
.w-nav__item.is-open .w-nav__chevron { transform: rotate(180deg); opacity: 0.8; }

/* ── Mega dropdown panels — position:fixed siblings of <nav>
   .w-nav  is z:100  →  pill floats on top of these panels (z:99).
   ─────────────────────────────────────────────────────────────────
   top: 36px  =  nav viewport top (16px) + nav midpoint (20px)
                 → panel card top starts halfway behind the pill,
                   nav pill covers the upper half seamlessly.
   Content inside starts below nav via padding-top: 24px
   (16px gap + midpoint offset = content at ≈ nav bottom).
   Width: calc(100vw - 48px) capped at 860px, centred in viewport.
   ───────────────────────────────────────────────────────────────── */
.w-nav__dropdown {
  display: none;                /* hidden by default; overridden by --mega */
}
/* ── Outer shell: position + animation only, overflow:visible so arrow shows ── */
.w-nav__dropdown--mega {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100vw - 48px), 860px);
  min-width: 700px;
  overflow: visible;
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.w-nav__dropdown--mega.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Arrow: fades in with a tiny upward nudge ── */
.w-nav__dropdown--mega::before {
  content: '';
  position: absolute;
  top: -16px;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%) translateY(6px);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 16px solid #ffffff;
  filter: drop-shadow(0 -2px 3px rgba(0,0,0,0.08));
  z-index: 2;
  opacity: 0;
  transition: opacity 220ms ease 60ms,
              transform 260ms cubic-bezier(0.16,1,0.3,1) 60ms;
}
.w-nav__dropdown--mega.is-open::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Inner content wrapper — clips rounded corners, holds background ── */
/* clip-path drives the open/close animation: reveals top→bottom, collapses bottom→top */
.w-nav__mega-inner {
  display: flex;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(0,0,0,0.15), 0 6px 20px rgba(0,0,0,0.07);
  clip-path: inset(0 0 100% 0 round 24px);
  transition: clip-path 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.w-nav__dropdown--mega.is-open .w-nav__mega-inner {
  clip-path: inset(0 0 0% 0 round 24px);
}

/* Left panel */
.w-nav__mega-cats {
  background: #f4f4f4;
  border-radius: 22px 0 0 22px; /* matches inner wrapper left corners */
  padding: 10px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.w-nav__mega-heading {
  padding: 10px 14px 6px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.28);
}
a.w-nav__mega-heading--link {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: rgba(0,0,0,0.28);
  transition: color 150ms ease;
}
a.w-nav__mega-heading--link:hover { color: #4a7c23; }
a.w-nav__mega-cat { text-decoration: none; }
.w-nav__mega-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 11px;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: var(--w-font-display, "Poppins", sans-serif);
  font-size: 0.825rem;
  font-weight: 500;
  color: rgba(0,0,0,0.48);
  text-align: left;
  width: 100%;
  transition: background 140ms ease, color 140ms ease;
}
.w-nav__mega-cat .cat-arrow {
  opacity: 0; transform: translateX(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
  flex-shrink: 0; color: #95BF47;
}
.w-nav__mega-cat:hover { background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.72); }
.w-nav__mega-cat.is-active {
  background: #ffffff; color: #000000;
  box-shadow: 0 1px 8px rgba(0,0,0,0.09);
}
.w-nav__mega-cat.is-active .cat-arrow { opacity: 1; transform: translateX(0); }

/* Right panel */
.w-nav__mega-subs {
  padding: 10px 12px;
  flex: 1;
  min-width: 0;
}
.w-nav__mega-sub-heading {
  padding: 10px 12px 6px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.26);
}
.w-nav__mega-sub-heading--link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: rgba(0,0,0,0.35);
  transition: color 0.2s;
  border-radius: 6px;
}
.w-nav__mega-sub-heading--link:hover {
  color: #3a6b00;
}
.w-nav__mega-sub { display: none; flex-direction: column; gap: 2px; }
.w-nav__mega-sub.is-active { display: flex; }

/* Sub-item link */
.w-nav__mega-sub a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 140ms ease;
}
.w-nav__mega-sub a:hover { background: rgba(149,191,71,0.1); }

/* Icon square */
.w-nav__mega-sub .sub-icon {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(0,0,0,0.04);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease;
  color: rgba(0,0,0,0.38);
}
.w-nav__mega-sub a:hover .sub-icon { background: rgba(149,191,71,0.18); color: #4a7c23; }

/* Text group */
.w-nav__mega-sub .sub-text { display: flex; flex-direction: column; gap: 2px; }
.w-nav__mega-sub .sub-text-label {
  display: block;
  font-size: 0.825rem; font-weight: 500;
  color: rgba(0,0,0,0.76);
  line-height: 1.2;
  transition: color 140ms ease;
}
.w-nav__mega-sub a:hover .sub-text-label { color: #2d5a12; }
.w-nav__mega-sub .sub-text-hint {
  display: block;
  font-size: 0.7rem;
  color: rgba(0,0,0,0.34);
  line-height: 1.2;
}

/* ── Apps dropdown ─────────────────────────────────────────────── */
/* inherits default width: min(calc(100vw - 48px), 860px) from --mega */

.w-nav__mega-inner--apps {
  flex-direction: column;
  padding: 20px 24px 18px;
  gap: 14px;
}

.w-nav__apps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.w-nav__apps-title {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.28);
}
.w-nav__apps-viewall {
  font-size: 0.75rem;
  font-weight: 500;
  color: #4a7c23;
  text-decoration: none;
  transition: color 140ms ease;
}
.w-nav__apps-viewall:hover { color: #2d5a12; }

.w-nav__apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.w-nav__app-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 150ms ease;
}
.w-nav__app-card:hover { background: rgba(0,0,0,0.04); }

.w-nav__app-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 150ms ease;
}
.w-nav__app-icon img { width: 36px; height: 36px; object-fit: cover; border-radius: 10px; }
.w-nav__app-card:hover .w-nav__app-icon { transform: scale(1.06); }

.w-nav__app-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.w-nav__app-name {
  font-size: 0.78rem; font-weight: 500;
  color: rgba(0,0,0,0.80);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 140ms ease;
}
.w-nav__app-card:hover .w-nav__app-name { color: #1a1a1a; }
.w-nav__app-desc {
  font-size: 0.67rem;
  color: rgba(0,0,0,0.38);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.w-nav__app-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
}
.w-nav__app-badge--free  { background: rgba(74,124,35,0.12); color: #3a6b18; }
.w-nav__app-badge--trial { background: rgba(245,158,11,0.12); color: #92400e; }

/* Dropdown section label */
.w-nav__dropdown-section {
  padding: 8px 14px 4px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.28);
}

/* ── Mobile nav: expandable service sections ── */
.w-nav-mobile__section { border-bottom: 1px solid rgba(0,0,0,0.07); }
.w-nav-mobile__section-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 12px; width: 100%; background: none; border: none;
  font-family: var(--w-font-display, "Poppins", sans-serif);
  font-size: 1rem; font-weight: 500; color: #1A1A1A;
  cursor: pointer; text-align: left;
}
.w-nav-mobile__section-toggle svg { transition: transform 220ms ease; opacity: 0.4; }
.w-nav-mobile__section-toggle.is-open svg { transform: rotate(180deg); opacity: 0.7; }
.w-nav-mobile__section-body {
  max-height: 0; overflow: hidden;
  transition: max-height 280ms cubic-bezier(0.4,0,0.2,1);
}
.w-nav-mobile__section-body.is-open { max-height: 500px; }
.w-nav-mobile__sub-link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 10px 28px;
  color: rgba(0,0,0,0.55); font-size: 0.875rem; font-weight: 450;
  text-decoration: none;
  transition: color 130ms ease;
}
.w-nav-mobile__sub-link:hover { color: #3a6e1c; }
.w-nav-mobile__section-body .w-nav-mobile__cat-label {
  padding: 8px 12px 4px 16px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(0,0,0,0.3);
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .w-marquee__track { animation: none; }
  .w-intro { transition-duration: 200ms; }
}