/* Setup Global — Design system (extracted from source; @layer removed for Elementor). Never wrap in @layer. */

/* Setup Global Child — Design Tokens
   Cascade order for the whole theme is declared here (loaded first). Colour and
   typography are owned by the Elementor UI; each colour var reads its Elementor
   global first and falls back to the exact prototype hex. No invented hues,
   tints or gradients — only exact prototype colours. See README.md § CSS. */




  :root {

    /* Brand colours — set in Elementor › Global Colors:
       Primary #2B2B2B · Secondary #656565 · Text #2B2B2B · Accent #BA9355
       Customs: Sand #F7F5F2 · White #FFFFFF · Dark #242424 · Green #4A744E · Success #59AB67 */
    --sg-ink:   var(--e-global-color-primary,   #2B2B2B);
    --sg-text:  var(--e-global-color-text,      #2B2B2B);
    --sg-muted: var(--e-global-color-secondary, #656565);
    --sg-gold:  var(--e-global-color-accent,    #BA9355);
    --sg-gold-text: #9A7A44;  /* gold as TEXT on light — AA contrast (brand gold kept for fills/icons/bars) */

    --sg-sand:    #F7F5F2;
    --sg-white:   #FFFFFF;
    --sg-dark:    #242424;
    --sg-green:   #4A744E;
    --sg-success: #59AB67;

    /* Neutral text scale — exact prototype greys, named by role */
    --sg-subtle:   #6E6E6E;   /* darkened for AA text contrast (~5:1 on white) */
    --sg-line:     #707070;
    --sg-disabled: #BEBEBE;
    /* Other exact greys available when a component needs them:
       #505050 · #727272 · #898989 · deep accents #0B0B0B · #000000 */

    /* State colours: alpha-only derivations of exact brand colours */
    --sg-focus:    rgba(154, 122, 68, .9);   /* deep gold — clearly visible focus ring (WCAG 2.2) */
    --sg-hairline: rgba(112, 112, 112, .28); /* #707070 @ 28% — subtle seams  */
    --sg-overlay:  rgba(36, 36, 36, .55);    /* #242424 @ 55% — image overlays */

    /* Radius — matched to each section's real corner radius as it is built */
    --sg-r-sm: 10px;
    --sg-r-md: 16px;
    --sg-r-lg: 22px;
    --sg-r-xl: 28px;
    --sg-r-pill: 999px;

    /* Shadow — soft, single-layer to avoid banding */
    --sg-shadow-sm: 0 1px 2px rgba(43, 43, 43, .05), 0 4px 12px rgba(43, 43, 43, .05);
    --sg-shadow-md: 0 8px 30px rgba(43, 43, 43, .08);
    --sg-shadow-lg: 0 20px 60px rgba(43, 43, 43, .12);
    --sg-focus-ring: 0 0 0 3px var(--sg-focus);

    /* Motion */
    --sg-dur-fast: 150ms;
    --sg-dur: 300ms;          /* matches the prototype's 300ms ease-out interactions */
    --sg-dur-slow: 450ms;
    --sg-dur-reveal: 650ms;
    --sg-ease: cubic-bezier(.4, 0, .2, 1);
    --sg-ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Layout / spacing (8-pt rhythm) */
    --sg-1: 4px;  --sg-2: 8px;  --sg-3: 12px; --sg-4: 16px; --sg-5: 24px;
    --sg-6: 32px; --sg-7: 48px; --sg-8: 64px; --sg-9: 96px; --sg-10: 128px;
    --sg-section-y: clamp(64px, 9vw, 128px);
    --sg-container: 1200px;
    --sg-gutter: clamp(20px, 5vw, 48px);

    /* Typography scale — shared heading sizes + line-heights */
    --sg-h2: clamp(1.9rem, 3vw, 2.4rem);
    --sg-h3: clamp(1.4rem, 2.4vw, 1.8rem);
    --sg-h4: clamp(1.2rem, 2vw, 1.5rem);
    --sg-lh-tight: 1.15;
    --sg-lh: 1.6;

    /* Sticky-header height. This is only a FALLBACK: sg.js measures the real
       header at runtime and overwrites this value, so design changes to the
       header need no code edits. See README.md § Dynamic header height. */
    --sg-header-h: 96px;
  }


/* Setup Global Child — Reset + Base
   Site-wide behaviours every component inherits. Kept intentionally small.
   NOTE: Elementor emits UNLAYERED CSS, which outranks any  where a component must beat Elementor, use the `overrides` layer or
   raise specificity. See README.md § CSS architecture. */




  /* Media never overflows its container */
  :where(img, svg, video, canvas) {
    max-width: 100%;
    height: auto;
  }



  /* Accessible focus: visible ring on keyboard focus only (WCAG 2.2 AA) */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--sg-gold-text);
    outline-offset: 2px;
    box-shadow: var(--sg-focus-ring);
    border-radius: var(--sg-r-sm);
  }

  /* Skip to content — visible on keyboard focus */
  .sg-skip-link {
    position: absolute; left: var(--sg-2); top: -60px; z-index: 2000;
    padding: 10px 18px; border-radius: var(--sg-r-sm);
    background: var(--sg-ink); color: var(--sg-white);
    font-weight: 600; text-decoration: none;
    transition: top var(--sg-dur-fast) var(--sg-ease);
  }
  .sg-skip-link:focus { top: var(--sg-2); }

  /* Smooth anchor scrolling with sticky-header offset (no library) */
  html {
    scroll-behavior: smooth;
  }
  :where([id]) {
    scroll-margin-top: calc(var(--sg-header-h) + var(--sg-4));
  }

  /* Optional content container (Elementor containers can be used instead) */
  .sg-container {
    width: 100%;
    max-width: var(--sg-container);
    margin-inline: auto;
    padding-inline: var(--sg-gutter);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }


/* Setup Global Child — Animation utilities
   One shared reveal architecture, many opt-in classes. Add a class to any
   element; sg.js adds `.is-visible` when it scrolls into view. All timing comes
   from tokens; stagger siblings with inline `--sg-i`. Hidden states apply only
   under html.sg-js, so content is never invisible if the script fails, and all
   motion is removed under prefers-reduced-motion. See README.md § Animation. */





  /* Shared: initial hidden state + transition for every reveal utility */
  .sg-js :is(
    .sg-fade, .sg-slide-up, .sg-slide-down, .sg-slide-left, .sg-slide-right,
    .sg-scale, .sg-zoom, .sg-blur, .sg-mask
  ) {
    opacity: 0;
    transition:
      opacity   var(--sg-dur-reveal) var(--sg-ease-out),
      transform var(--sg-dur-reveal) var(--sg-ease-out),
      filter    var(--sg-dur-reveal) var(--sg-ease-out),
      clip-path var(--sg-dur-reveal) var(--sg-ease-out);
    transition-delay: calc(var(--sg-i, 0) * 70ms);
    will-change: opacity, transform, filter;
  }

  /* Per-utility starting offset (only the property each one animates) */
  .sg-js .sg-slide-up    { transform: translateY(24px); }
  .sg-js .sg-slide-down  { transform: translateY(-24px); }
  .sg-js .sg-slide-left  { transform: translateX(24px); }   /* enters from the right */
  .sg-js .sg-slide-right { transform: translateX(-24px); }  /* enters from the left  */
  .sg-js .sg-scale       { transform: scale(.96); }
  .sg-js .sg-zoom        { transform: scale(1.08); }
  .sg-js .sg-blur        { filter: blur(12px); }
  .sg-js .sg-mask        { clip-path: inset(0 0 100% 0); }  /* wipes in bottom-up */

  /* Revealed: one rule settles every utility to its resting state */
  .sg-js :is(
    .sg-fade, .sg-slide-up, .sg-slide-down, .sg-slide-left, .sg-slide-right,
    .sg-scale, .sg-zoom, .sg-blur, .sg-mask
  ).is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(0);
  }

  /* Counter: sg.js animates the number on [data-sg-count]; class steadies width */
  .sg-counter {
    font-variant-numeric: tabular-nums;
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-js :is(
      .sg-fade, .sg-slide-up, .sg-slide-down, .sg-slide-left, .sg-slide-right,
      .sg-scale, .sg-zoom, .sg-blur, .sg-mask
    ) {
      opacity: 1;
      transform: none;
      filter: none;
      clip-path: none;
      transition: none;
    }
  }


/* Setup Global Child — Button (global, reusable: .sg-btn)
   Promoted from the header CTA so header, hero and booking share one button.
   States: hover (subtle brightness), active, focus (foundation ring), disabled,
   loading. Colours are exact palette only. Use with [data-sg-magnetic] for the
   pointer-only magnetic effect (handled globally in sg.js). */




  .sg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border: 1.5px solid transparent;
    border-radius: var(--sg-r-pill);
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter var(--sg-dur-fast) var(--sg-ease),
                transform var(--sg-dur-fast) var(--sg-ease),
                background var(--sg-dur-fast) var(--sg-ease),
                color var(--sg-dur-fast) var(--sg-ease);
    will-change: transform;
  }
  .sg-btn--primary { background: var(--sg-gold); color: var(--sg-ink); }
  .sg-btn--primary:hover { filter: brightness(0.94); }
  .sg-btn--ghost { background: transparent; color: var(--sg-ink); border-color: var(--sg-ink); }
  .sg-btn--ghost:hover { background: var(--sg-ink); color: var(--sg-sand); }
  .sg-btn--lg { padding: 16px 32px; font-size: 1.05rem; }
  .sg-btn:active { transform: scale(0.98); }

  .sg-btn[aria-disabled="true"],
  .sg-btn:disabled {
    background: var(--sg-disabled);
    color: var(--sg-white);
    border-color: transparent;
    cursor: not-allowed;
    pointer-events: none;
  }

  .sg-btn.is-loading { color: transparent; position: relative; }
  .sg-btn.is-loading::after {
    content: "";
    position: absolute; inset: 0; margin: auto;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--sg-ink); border-top-color: transparent;
    animation: sg-btn-spin 0.7s linear infinite;
  }
  @keyframes sg-btn-spin { to { transform: rotate(360deg); } }

  @media (prefers-reduced-motion: reduce) {
    .sg-btn, .sg-btn.is-loading::after { transition: none; animation-duration: 0.01ms; }
  }


/* Setup Global Child — Statistic (global, reusable: .sg-stat)
   Design-system stat block: a value (optionally animated by the foundation's
   [data-sg-count] count-up) plus a label. Minimal markup, exact-palette colours,
   shared typography. Reusable anywhere via the [sg_stat] shortcode or the raw
   markup. Supports numbers, percentages, prefixes, suffixes and decimals. */




  .sg-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sg-stat__num {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sg-gold-text);
    font-variant-numeric: tabular-nums;   /* steady width while counting */
  }
  .sg-stat__label {
    font-size: 0.8rem;
    color: var(--sg-muted);
  }

  /* Modifiers */
  .sg-stat--lg .sg-stat__num { font-size: clamp(2rem, 4vw, 3rem); }
  .sg-stat--center { align-items: center; text-align: center; }


/* Setup Global Child — Rating (global, reusable: .sg-rating)
   SVG star rating with full + half stars via width-clipping (no gradient IDs,
   no JS). Size via --sg-star. Exact-palette colours. Rendered server-side by
   the [sg_rating] shortcode; the whole thing is one role="img" with a label. */




  .sg-rating {
    --sg-star: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .sg-rating--sm { --sg-star: 14px; }
  .sg-rating--lg { --sg-star: 24px; }

  .sg-rating__stars { display: inline-flex; gap: 2px; }
  .sg-rating__star {
    position: relative;
    width: var(--sg-star);
    height: var(--sg-star);
    flex: none;
  }
  .sg-rating__star-bg,
  .sg-rating__star-fg { position: absolute; inset: 0; }
  .sg-rating__star-bg { color: var(--sg-disabled); }   /* empty portion */
  .sg-rating__star-fg { color: var(--sg-gold); overflow: hidden; } /* filled, clipped by width */
  .sg-rating__star svg {
    width: var(--sg-star);
    height: var(--sg-star);
    max-width: none;                                   /* keep full width so clipping shows a partial star */
    display: block;
  }

  .sg-rating__meta {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--sg-muted);
  }
  .sg-rating__value { font-weight: 700; color: var(--sg-ink); }


/* Setup Global Child — Section heading (global, reusable: .sg-section-head)
   Shared heading block for every section: optional kicker, two-tone H2, subhead.
   Centred by default; use --start for left-aligned sections. Exact-palette only. */




  .sg-section-head {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
  }
  .sg-section-head__kicker {
    display: inline-block;
    margin-bottom: var(--sg-3);
    color: var(--sg-gold-text);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .sg-section-head__title {
    margin: 0;
    font-size: var(--sg-h2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--sg-ink);
    text-wrap: balance;
  }
  .sg-section-head__title .sg-section-head__accent { color: var(--sg-gold-text); }
  .sg-section-head__sub {
    margin: var(--sg-4) 0 0;
    color: var(--sg-muted);
    font-size: 1.05rem;
    line-height: 1.6;
  }

  /* Modifier: left-aligned heading */
  .sg-section-head--start { text-align: start; margin-inline: 0; }


/* Setup Global Child — Steps (scoped: .sg-steps / .sg-step)
   Reusable process cards. Each card carries a dedicated decorative numeral
   element (.sg-step__number, aria-hidden) rather than a pseudo-element, so it
   stays flexible for future animation/layout. Hover communicates quality, not
   movement: refined shadow + a champagne hairline + a whisper scale. */




  .sg-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sg-5);
  }

  .sg-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sg-3);
    min-height: 260px;
    padding: var(--sg-6);
    background: var(--sg-white);
    border: 1px solid var(--sg-hairline);
    border-radius: var(--sg-r-lg);
    box-shadow: var(--sg-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--sg-dur) var(--sg-ease),
                border-color var(--sg-dur) var(--sg-ease),
                transform var(--sg-dur) var(--sg-ease);
  }
  /* Premium hover: quality over movement */
  .sg-step:hover {
    box-shadow: var(--sg-shadow-md);
    border-color: rgba(186, 147, 85, 0.45);   /* #BA9355 @ 45% — champagne hairline */
    transform: scale(1.006);                   /* whisper-subtle, not a lift */
  }

  .sg-step__title {
    margin: 0;
    color: var(--sg-gold-text);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .sg-step__desc {
    margin: 0;
    color: var(--sg-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 26ch;
  }
  .sg-step__tag {
    margin-top: auto;               /* anchors the tag to the bottom-left */
    color: var(--sg-gold-text);
    font-size: 0.85rem;
    font-weight: 700;
  }

  /* Dedicated decorative numeral (aria-hidden in markup) */
  .sg-step__number {
    position: absolute;
    right: var(--sg-5);
    bottom: var(--sg-3);
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--sg-gold);
    pointer-events: none;
    user-select: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-step { transition: box-shadow var(--sg-dur) var(--sg-ease), border-color var(--sg-dur) var(--sg-ease); }
    .sg-step:hover { transform: none; }
  }

  /* Tablet + mobile: full-width single column reads best for text cards */
  @media (max-width: 900px) {
    .sg-steps { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
    .sg-step { min-height: 0; }
  }


/* Setup Global Child — Myths / Q&A (scoped: .sg-myths*)
   Premium editorial "myth vs. truth" cards. Each card is an accessible
   disclosure: a <button> toggles a truth panel that expands with a smooth
   grid-rows animation (no JS height measurement, reduced-motion safe). */





  .sg-myths {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sg-5);
  }

  .sg-myth {
    display: flex;
    flex-direction: column;
    background: var(--sg-white);
    border: 1px solid var(--sg-hairline);
    border-radius: var(--sg-r-lg);
    box-shadow: var(--sg-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--sg-dur) var(--sg-ease), border-color var(--sg-dur) var(--sg-ease);
  }
  .sg-myth:hover { box-shadow: var(--sg-shadow-md); }
  .sg-myth.is-open { border-color: var(--sg-gold); }

  .sg-myth__toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--sg-4);
    width: 100%;
    margin: 0;
    padding: var(--sg-6);
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: var(--sg-ink);
  }
  .sg-myth__toggle:focus-visible {
    outline: 2px solid var(--sg-gold-text);
    outline-offset: -3px;
    border-radius: var(--sg-r-lg);
  }

  .sg-myth__q {
    display: flex;
    flex-direction: column;
    gap: var(--sg-1);
    flex: 1 1 auto;
    min-width: 0;
  }
  .sg-myth__kicker {
    color: var(--sg-gold-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  .sg-myth__question {
    margin: 0;
    font-size: var(--sg-h4);
    font-weight: 700;
    line-height: var(--sg-lh-tight);
    color: var(--sg-ink);
  }

  /* + indicator that rotates to × when open */
  .sg-myth__icon {
    flex: none;
    width: 28px;
    height: 28px;
    position: relative;
    margin-top: 2px;
    border-radius: var(--sg-r-pill);
    background: rgba(186, 147, 85, 0.12);
    transition: transform var(--sg-dur) var(--sg-ease), background var(--sg-dur) var(--sg-ease);
  }
  .sg-myth__icon::before,
  .sg-myth__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background: var(--sg-gold-text);
    transform: translate(-50%, -50%);
    border-radius: 2px;
  }
  .sg-myth__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--sg-dur) var(--sg-ease); }
  .sg-myth.is-open .sg-myth__icon { transform: rotate(135deg); background: rgba(186, 147, 85, 0.2); }

  /* Truth panel — grid-rows 0fr → 1fr expands smoothly without measuring height */
  .sg-myth__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--sg-dur) var(--sg-ease-out);
  }
  .sg-myth.is-open .sg-myth__panel { grid-template-rows: 1fr; }
  .sg-myth__panel-inner { overflow: hidden; }

  .sg-myth__answer {
    margin: 0;
    padding: 0 var(--sg-6) var(--sg-6);
    color: var(--sg-muted);
    line-height: var(--sg-lh);
  }
  .sg-myth__answer-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--sg-2);
    color: var(--sg-green);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .sg-myth__answer-label svg { width: 14px; height: 14px; }

  @media (max-width: 900px) {
    .sg-myths { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-myth,
    .sg-myth__icon,
    .sg-myth__icon::after,
    .sg-myth__panel { transition: none; }
  }


/* Setup Global Child — Testimonials (scoped: .sg-testimonials / .sg-video-card / .sg-lightbox)
   Video-testimonial cards open an accessible lightbox. Posters are lazy images;
   the video iframe is injected only on click (no iframes on load → fast, GDPR-
   friendly via youtube-nocookie). Hover communicates quality, not movement. */




  .sg-testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sg-5);
  }

  .sg-video-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--sg-white);
    border: 1px solid var(--sg-hairline);
    border-radius: var(--sg-r-lg);
    overflow: hidden;
    box-shadow: var(--sg-shadow-sm);
    transition: box-shadow var(--sg-dur) var(--sg-ease),
                border-color var(--sg-dur) var(--sg-ease),
                transform var(--sg-dur) var(--sg-ease);
  }
  .sg-video-card:hover {
    box-shadow: var(--sg-shadow-md);
    border-color: rgba(186, 147, 85, 0.45);
    transform: scale(1.006);
  }

  .sg-video-card__trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    aspect-ratio: 4 / 5;
  }
  .sg-video-card__poster {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 25%;
    display: block;
  }
  .sg-video-card__play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(247, 245, 242, 0.92);   /* sand @ 92% */
    color: var(--sg-ink);
    box-shadow: var(--sg-shadow-md);
    transition: transform var(--sg-dur) var(--sg-ease), background var(--sg-dur) var(--sg-ease);
  }
  .sg-video-card__trigger:hover .sg-video-card__play,
  .sg-video-card__trigger:focus-visible .sg-video-card__play {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--sg-gold);
  }
  .sg-video-card__meta {
    padding: var(--sg-4) var(--sg-5) var(--sg-5);
  }
  .sg-video-card__name { display: block; color: var(--sg-ink); font-weight: 700; font-size: 1.05rem; }
  .sg-video-card__note { display: block; color: var(--sg-muted); font-size: 0.85rem; margin-top: 2px; }

  /* Footer line under the grid */
  .sg-testimonials-more {
    margin-top: var(--sg-6);
    text-align: center;
    color: var(--sg-muted);
    font-size: 0.95rem;
  }
  .sg-testimonials-more a { color: var(--sg-gold-text); font-weight: 700; text-decoration: none; }
  .sg-testimonials-more a:hover { text-decoration: underline; }

  /* ---- Lightbox ---------------------------------------------------------- */
  .sg-lightbox {
    position: fixed; inset: 0; z-index: 1100;
    display: grid; place-items: center;
    padding: var(--sg-5);
  }
  .sg-lightbox[hidden] { display: none; }
  .sg-lightbox__scrim {
    position: absolute; inset: 0;
    background: var(--sg-overlay);
    opacity: 0;
    transition: opacity var(--sg-dur) var(--sg-ease);
  }
  .sg-lightbox.is-open .sg-lightbox__scrim { opacity: 1; }
  .sg-lightbox__dialog {
    position: relative; z-index: 1;
    width: min(920px, 100%);
    transform: scale(0.98);
    opacity: 0;
    transition: transform var(--sg-dur) var(--sg-ease-out), opacity var(--sg-dur) var(--sg-ease-out);
  }
  .sg-lightbox.is-open .sg-lightbox__dialog { transform: none; opacity: 1; }
  .sg-lightbox__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--sg-dark);
    border-radius: var(--sg-r-md);
    overflow: hidden;
  }
  .sg-lightbox__frame iframe,
  .sg-lightbox__frame video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; border: 0;
  }
  .sg-lightbox__close {
    position: absolute; top: -14px; right: -14px;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--sg-white); color: var(--sg-ink);
    box-shadow: var(--sg-shadow-md);
    cursor: pointer; font-size: 22px; line-height: 1;
  }
  .sg-lightbox__external {
    display: inline-block; margin-top: var(--sg-4);
    color: var(--sg-white); font-size: 0.9rem; text-decoration: none;
  }
  .sg-lightbox__external:hover { text-decoration: underline; }
  .sg-lightbox__external[hidden] { display: none; }

  /* ---- Responsive -------------------------------------------------------- */
  @media (max-width: 900px) {
    .sg-testimonials { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-video-card,
    .sg-video-card__play,
    .sg-lightbox__scrim,
    .sg-lightbox__dialog { transition: none; }
    .sg-video-card:hover { transform: none; }
  }
  .sg-lightbox__spinner {
    position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
    border-radius: 50%; border: 3px solid rgba(247, 245, 242, 0.25); border-top-color: var(--sg-gold);
    animation: sg-spin 0.8s linear infinite;
  }
  @keyframes sg-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .sg-lightbox__spinner { animation: none; } }


/* Setup Global Child — Booking (scoped: .sg-booking)
   A styled facade (scarcity + CTA) that lazy-loads the brand-themed Calendly
   inline embed on click, so Calendly's script never loads on page load. The
   embed opens in place — visitors book without leaving the site. */




  .sg-booking {
    max-width: 760px;
    margin-inline: auto;
    background: var(--sg-white);
    border: 1px solid var(--sg-hairline);
    border-radius: var(--sg-r-lg);
    box-shadow: var(--sg-shadow-md);
    overflow: hidden;
  }

  .sg-booking__facade {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sg-4);
    padding: var(--sg-9) var(--sg-6);
    text-align: center;
  }
  .sg-booking__scarcity {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--sg-green);
    font-weight: 600;
    font-size: 0.9rem;
  }
  .sg-booking__scarcity::before {
    content: "";
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--sg-green);
  }
  .sg-booking__note {
    margin: 0;
    color: var(--sg-subtle);
    font-size: 0.85rem;
  }

  /* Loaded state: swap facade for the embed */
  .sg-booking.is-loaded .sg-booking__facade { display: none; }
  .sg-booking__embed { min-height: 700px; }
  .sg-booking__embed .calendly-inline-widget { min-width: 320px; height: 700px; }
  .sg-booking__loading {
    padding: var(--sg-9) var(--sg-6);
    text-align: center;
    color: var(--sg-muted);
    font-size: 0.95rem;
  }
  .sg-booking__embed:focus { outline: none; }

  @media (max-width: 640px) {
    .sg-booking__facade { padding: var(--sg-7) var(--sg-5); }
    .sg-booking__embed,
    .sg-booking__embed .calendly-inline-widget { height: 640px; }
  }
  .sg-booking__fallback { padding: var(--sg-8) var(--sg-6); text-align: center; color: var(--sg-ink); font-size: 1rem; line-height: 1.6; }


/* Setup Global Child — Social proof (scoped: .sg-quote / .sg-trust)
   A legal-authority quote (large § mark, attributed) and a centred row of trust
   badges. Badges reuse the .sg-stat component; only the quote and the row layout
   are defined here. Exact-palette only, typography-led. */




  .sg-quote {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
  }
  .sg-quote__mark {
    display: block;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1;
    font-weight: 700;
    color: var(--sg-gold-text);
  }
  .sg-quote__text {
    margin: var(--sg-4) 0 0;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    line-height: 1.4;
    font-weight: 500;
    color: var(--sg-ink);
    text-wrap: balance;
  }
  .sg-quote__cite {
    display: block;
    margin-top: var(--sg-5);
    font-style: normal;
    font-size: 0.95rem;
    color: var(--sg-muted);
  }
  .sg-quote__cite strong { color: var(--sg-ink); font-weight: 700; }

  /* Trust badge row — items are .sg-stat components */
  .sg-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--sg-6) var(--sg-8);
    margin-top: var(--sg-9);
    padding-top: var(--sg-6);
    border-top: 1px solid var(--sg-hairline);
    max-width: 64rem;
    margin-inline: auto;
  }
  .sg-trust .sg-stat { align-items: center; text-align: center; }

  @media (max-width: 640px) {
    .sg-trust { gap: var(--sg-5) var(--sg-6); }
    .sg-trust .sg-stat { flex: 1 1 40%; }
  }


/* Setup Global Child — Team (scoped: .sg-team)
   Faithful reproduction of the prototype: one premium champagne editorial card.
   Left — compact founder panel (portrait + name/role row, trust statement, 2×2
   stat pills). Right — dominant landscape team photo (~63%) with two overlay
   badges. Footer — office locations inside the same parent card. Champagne tints
   are alpha of the exact Champagne Gold (#BA9355). */




  .sg-team {
    --champ: rgba(186, 147, 85, 0.12);        /* card fill */
    --champ-strong: rgba(186, 147, 85, 0.17); /* pills / footer accents */
    max-width: 1120px;
    margin-inline: auto;
    background: var(--champ);
    border: 1px solid rgba(186, 147, 85, 0.22);
    border-radius: var(--sg-r-xl);
    box-shadow: var(--sg-shadow-sm);
    overflow: hidden;
  }

  /* Body: founder panel + dominant photo */
  .sg-team__body {
    display: grid;
    grid-template-columns: 0.58fr 1fr;   /* founder ~37% · photo ~63% */
    gap: var(--sg-6);
    padding: var(--sg-6);
    align-items: stretch;
  }

  /* Left — founder panel */
  .sg-team__info { display: flex; flex-direction: column; padding: var(--sg-3) var(--sg-3) var(--sg-3) var(--sg-4); }
  .sg-team__founder { display: flex; align-items: center; gap: var(--sg-4); }
  .sg-team__portrait { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; }
  .sg-team__name { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--sg-ink); }
  .sg-team__role { margin: 4px 0 0; color: var(--sg-gold-text); font-weight: 600; font-size: 0.82rem; }
  .sg-team__quote { margin: var(--sg-5) 0 0; color: var(--sg-ink); font-size: 1rem; line-height: 1.55; max-width: 34ch; }

  .sg-team__divider { border: 0; border-top: 1px solid var(--sg-hairline); margin-top: auto; } /* anchors pills to the bottom */
  .sg-team__stats { display: flex; flex-wrap: wrap; gap: var(--sg-3); margin-top: var(--sg-5); }
  .sg-team__stat {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 10px 16px;
    background: var(--champ-strong);
    border-radius: var(--sg-r-pill);
    font-size: 0.8rem; color: var(--sg-muted); line-height: 1.2;
  }
  .sg-team__stat strong { color: var(--sg-ink); font-weight: 700; }
  .sg-team__stat-star { width: 13px; height: 13px; color: var(--sg-gold); flex: none; }

  /* Right — dominant photo */
  .sg-team__media { position: relative; min-height: 440px; border-radius: 18px; overflow: hidden; }
  .sg-team__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .sg-team__badge {
    position: absolute; top: var(--sg-4);
    padding: 7px 13px; border-radius: var(--sg-r-pill);
    background: rgba(247, 245, 242, 0.82);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--sg-ink); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  }
  .sg-team__badge--left { left: var(--sg-4); }
  .sg-team__badge--right { right: var(--sg-4); }

  /* Footer — office locations inside the same card */
  .sg-team__footer {
    display: flex; align-items: center; gap: var(--sg-6);
    padding: var(--sg-5) var(--sg-6);
    border-top: 1px solid rgba(186, 147, 85, 0.20);
  }
  .sg-team__footer-label { flex: none; font-weight: 700; color: var(--sg-ink); }
  .sg-team__footer-list { flex: 1; display: flex; justify-content: space-around; flex-wrap: wrap; gap: var(--sg-3) 0; }
  .sg-team__location { display: inline-flex; align-items: center; gap: 8px; padding: 0 var(--sg-5); color: var(--sg-muted); border-left: 1px solid var(--sg-hairline); }
  .sg-team__location--hq { color: var(--sg-gold-text); font-weight: 600; }
  .sg-team__location-flag { font-size: 1.05rem; line-height: 1; }

  /* Responsive: one card, stacked */
  @media (max-width: 860px) {
    .sg-team__body { grid-template-columns: 1fr; gap: var(--sg-5); }
    .sg-team__media { min-height: 0; aspect-ratio: 16 / 10; }
    .sg-team__footer { flex-direction: column; align-items: flex-start; gap: var(--sg-3); }
    .sg-team__footer-list { justify-content: flex-start; gap: var(--sg-4) var(--sg-5); }
    .sg-team__location:first-child { border-left: 0; padding-left: 0; }
  }


/* Setup Global Child — Calculator (scoped: .sg-calc)
   Tax-savings tool: inputs + live animated before/after comparison + projection
   + booking CTA. Client-side compute (no reload). Exact-palette; reuses .sg-btn. */




  .sg-calc {
    max-width: 760px;
    margin-inline: auto;
    background: var(--sg-white);
    border: 1px solid var(--sg-hairline);
    border-radius: var(--sg-r-lg);
    box-shadow: var(--sg-shadow-md);
    padding: var(--sg-7) var(--sg-6);
  }

  .sg-calc__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-4);
  }
  .sg-calc__field { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; }
  .sg-calc__label { font-size: 0.85rem; font-weight: 600; color: var(--sg-muted); }
  .sg-calc__input,
  .sg-calc__select {
    padding: 13px 15px;
    border: 1px solid var(--sg-hairline);
    border-radius: var(--sg-r-md);
    background: var(--sg-white);
    color: var(--sg-ink);
    font: inherit;
    width: 100%;
  }

  .sg-calc__compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sg-5);
    margin-top: var(--sg-7);
  }
  .sg-calc__panel {
    text-align: center;
    padding: var(--sg-6);
    border-radius: var(--sg-r-lg);
  }
  .sg-calc__panel--before { background: var(--sg-sand); }
  .sg-calc__panel--after { background: var(--sg-dark); }
  .sg-calc__panel-label { font-size: 0.85rem; opacity: 0.85; }
  .sg-calc__panel--after .sg-calc__panel-label { color: var(--sg-white); }
  .sg-calc__panel-value {
    display: block;
    margin-top: 6px;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .sg-calc__panel--before .sg-calc__panel-value { color: var(--sg-ink); }
  .sg-calc__panel--after .sg-calc__panel-value { color: var(--sg-gold); }
  .sg-calc__arrow { color: var(--sg-gold); font-size: 1.5rem; line-height: 1; }

  .sg-calc__headline {
    margin: var(--sg-6) 0 0;
    text-align: center;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: var(--sg-ink);
  }
  .sg-calc__headline strong { color: var(--sg-gold-text); }
  .sg-calc__projected { margin: var(--sg-2) 0 0; text-align: center; color: var(--sg-muted); font-size: 0.95rem; }
  .sg-calc__cta { display: flex; justify-content: center; margin-top: var(--sg-6); }

  @media (max-width: 560px) {
    .sg-calc__compare { grid-template-columns: 1fr; }
    .sg-calc__arrow { transform: rotate(90deg); justify-self: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-calc__panel-value { transition: none; }
  }


/* Calculator refinements: deliberate transition + expanded result */

  .sg-calc__panel-value { transition: opacity var(--sg-dur) var(--sg-ease); }
  @keyframes sg-calc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
  .sg-calc.is-calculating .sg-calc__panel-value { animation: sg-calc-pulse 0.6s ease-in-out infinite; }

  .sg-calc__explain { margin-top: var(--sg-6); text-align: center; }
  .sg-calc__meaning { max-width: 48ch; margin: 0 auto; color: var(--sg-ink); font-size: 1.05rem; line-height: 1.6; }
  .sg-calc__value {
    list-style: none; margin: var(--sg-5) 0 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sg-3) var(--sg-5);
  }
  .sg-calc__value li { display: inline-flex; align-items: center; gap: 8px; color: var(--sg-muted); font-size: 0.9rem; }
  .sg-calc__value li::before { content: "✓"; color: var(--sg-gold); font-weight: 700; }

  @media (prefers-reduced-motion: reduce) {
    .sg-calc.is-calculating .sg-calc__panel-value { animation: none; }
  }


/* Setup Global Child — Wizard engine (scoped: .sg-wizard, host .sg-matcher)
   Reusable multi-step flow: progress, accessible radio/checkbox cards, Back/Next.
   Generic — any stepped questionnaire can mount into it. Exact-palette, .sg-btn. */




  .sg-matcher {
    max-width: 760px;
    margin-inline: auto;
    background: var(--sg-white);
    border: 1px solid var(--sg-hairline);
    border-radius: var(--sg-r-lg);
    box-shadow: var(--sg-shadow-md);
    padding: var(--sg-7) var(--sg-6);
  }

  .sg-wizard__progress { margin-bottom: var(--sg-6); }
  .sg-wizard__progress-label { font-size: 0.85rem; font-weight: 600; color: var(--sg-muted); }
  .sg-wizard__bar {
    height: 6px; margin-top: 8px;
    background: var(--sg-sand); border-radius: var(--sg-r-pill); overflow: hidden;
  }
  .sg-wizard__bar-fill {
    height: 100%; width: 0;
    background: var(--sg-gold); border-radius: var(--sg-r-pill);
    transition: width var(--sg-dur) var(--sg-ease-out);
  }

  .sg-wizard__step { border: 0; margin: 0; padding: 0; min-inline-size: auto; }
  .sg-wizard__legend {
    padding: 0;
    font-size: var(--sg-h4);
    font-weight: 700; line-height: 1.25;
    color: var(--sg-ink);
  }
  .sg-wizard__legend:focus-visible { outline: 2px solid var(--sg-gold); outline-offset: 4px; border-radius: var(--sg-r-sm); }

  .sg-wizard__options {
    display: grid; grid-template-columns: 1fr; gap: var(--sg-3);
    margin-top: var(--sg-5);
  }
  @media (min-width: 520px) {
    .sg-wizard__options--multi { grid-template-columns: 1fr 1fr; }
  }

  .sg-wizard__option {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
    border: 1.5px solid var(--sg-hairline);
    border-radius: var(--sg-r-md);
    cursor: pointer;
    transition: border-color var(--sg-dur-fast) var(--sg-ease), background var(--sg-dur-fast) var(--sg-ease);
  }
  .sg-wizard__option:hover { border-color: rgba(186, 147, 85, 0.45); }
  .sg-wizard__option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .sg-wizard__option:focus-within { border-color: var(--sg-gold); box-shadow: var(--sg-focus-ring); }
  .sg-wizard__option-mark {
    flex: none; width: 22px; height: 22px;
    border: 2px solid var(--sg-line); border-radius: 50%;
    display: grid; place-items: center;
    transition: border-color var(--sg-dur-fast) var(--sg-ease);
  }
  .sg-wizard__option input:checked ~ .sg-wizard__option-mark { border-color: var(--sg-gold); }
  .sg-wizard__option input:checked ~ .sg-wizard__option-mark::after {
    content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sg-gold);
  }
  .sg-wizard__option:has(input:checked) { border-color: var(--sg-gold); background: var(--sg-sand); }
  .sg-wizard__option-label { font-weight: 500; color: var(--sg-ink); }

  .sg-wizard__error {
    display: flex; align-items: center; gap: 8px;
    margin: var(--sg-3) 0 0;
    color: var(--sg-gold-text); font-weight: 600; font-size: 0.9rem;
  }
  .sg-wizard__error-icon { flex: none; }
  .sg-wizard__options[aria-invalid="true"] .sg-wizard__option { border-color: rgba(186, 147, 85, 0.6); }

  .sg-wizard__nav {
    display: flex; justify-content: space-between; gap: var(--sg-4);
    margin-top: var(--sg-7);
  }
  .sg-wizard__back[disabled] { visibility: hidden; }

  @media (prefers-reduced-motion: reduce) {
    .sg-wizard__bar-fill, .sg-wizard__option, .sg-wizard__option-mark { transition: none; }
  }
  .sg-matcher__note { text-align: center; color: var(--sg-muted); padding: var(--sg-6); margin: 0; }


/* Setup Global Child — Results Experience (scoped: .sg-results)
   A strategic-consultancy style recommendation, not a quiz result: a match ring,
   confidence, a balanced advantages/considerations pair, a fact overview
   (setup time/cost, tax, banking, residency), recommended next steps, CTA, and
   the runner-up options. Exact-palette; reuses .sg-btn. */




  .sg-results__header {
    display: flex; align-items: center; gap: var(--sg-6); flex-wrap: wrap;
  }
  .sg-results__intro { flex: 1 1 260px; }
  .sg-results__eyebrow {
    color: var(--sg-gold-text); font-weight: 700; font-size: 0.8rem;
    letter-spacing: 0.12em; text-transform: uppercase;
  }
  .sg-results__title { margin: 6px 0 0; font-size: var(--sg-h3); font-weight: 700; color: var(--sg-ink); }
  .sg-results__confidence { margin: 8px 0 0; color: var(--sg-muted); font-size: 0.9rem; }
  .sg-results__confidence-band { font-weight: 700; color: var(--sg-ink); }

  .sg-results__ring { flex: none; }
  .sg-results__ring-track { stroke: var(--sg-sand); }
  .sg-results__ring-fill {
    stroke: var(--sg-gold);
    transform: rotate(-90deg); transform-origin: center;
    transition: stroke-dashoffset var(--sg-dur-reveal) var(--sg-ease-out);
  }
  .sg-results__ring-num { fill: var(--sg-ink); font-size: 24px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }

  .sg-results__summary { margin: var(--sg-6) 0 0; color: var(--sg-ink); font-size: 1.05rem; line-height: 1.6; }

  .sg-results__balance {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sg-5);
    margin-top: var(--sg-7);
  }
  .sg-results__panel {
    padding: var(--sg-5);
    background: var(--sg-white);
    border: 1px solid var(--sg-hairline);
    border-radius: var(--sg-r-md);
  }
  .sg-results__panel-title { margin: 0 0 var(--sg-3); font-size: 0.95rem; font-weight: 700; color: var(--sg-ink); }
  .sg-results__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .sg-results__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--sg-muted); font-size: 0.95rem; line-height: 1.4; }
  .sg-results__list--adv li::before { content: "✓"; flex: none; color: var(--sg-gold); font-weight: 700; }
  .sg-results__list--con li::before {
    content: "i"; flex: none;
    width: 18px; height: 18px; border: 1.5px solid var(--sg-line); border-radius: 50%;
    display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; font-style: italic; color: var(--sg-ink);
  }

  .sg-results__overview {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sg-4);
    margin-top: var(--sg-7); padding-top: var(--sg-6); border-top: 1px solid var(--sg-hairline);
  }
  .sg-results__fact-label { font-size: 0.8rem; color: var(--sg-muted); }
  .sg-results__fact-value { margin-top: 2px; font-size: 1.1rem; font-weight: 700; color: var(--sg-ink); }

  .sg-results__actions { margin-top: var(--sg-7); }
  .sg-results__actions-title { margin: 0 0 var(--sg-3); font-weight: 700; color: var(--sg-ink); }
  .sg-results__steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
  .sg-results__steps li { display: flex; align-items: flex-start; gap: 12px; color: var(--sg-ink); }
  .sg-results__steps li::before {
    counter-increment: step; content: counter(step);
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: var(--sg-sand); color: var(--sg-gold-text); font-weight: 700; font-size: 0.85rem;
    display: grid; place-items: center;
  }

  .sg-results__cta { display: flex; justify-content: center; margin-top: var(--sg-7); }

  .sg-results__others { margin-top: var(--sg-7); padding-top: var(--sg-6); border-top: 1px solid var(--sg-hairline); }
  .sg-results__others-title { margin: 0 0 var(--sg-3); font-size: 0.85rem; font-weight: 600; color: var(--sg-muted); }
  .sg-results__others-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .sg-results__other { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--sg-hairline); border-radius: var(--sg-r-sm); }
  .sg-results__other-score { font-weight: 700; color: var(--sg-gold-text); }

  .sg-results__restart { margin-top: var(--sg-5); text-align: center; }
  .sg-results__restart button { background: none; border: 0; color: var(--sg-muted); text-decoration: underline; cursor: pointer; font: inherit; }
  .sg-results__restart button:hover { color: var(--sg-ink); }

  @media (max-width: 640px) {
    .sg-results__balance { grid-template-columns: 1fr; }
    .sg-results__header { justify-content: center; text-align: center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sg-results__ring-fill { transition: none; }
  }


/* Setup Global Child — Comparison Experience (scoped: .sg-compare)
   Premium comparison cards for the top recommendations across the key
   dimensions (taxes, banking, reputation, setup speed, cost, family, crypto,
   privacy). Each dimension is a labelled bar so options compare at a glance; the
   top match is highlighted. Exact-palette. */




  .sg-compare { margin-top: var(--sg-8); padding-top: var(--sg-7); border-top: 1px solid var(--sg-hairline); }
  .sg-compare__title { margin: 0; text-align: center; font-size: var(--sg-h4); font-weight: 700; color: var(--sg-ink); }
  .sg-compare__sub { margin: 6px 0 0; text-align: center; color: var(--sg-muted); font-size: 0.95rem; }

  .sg-compare__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sg-5);
    margin-top: var(--sg-7);
  }
  .sg-compare__card {
    position: relative;
    padding: var(--sg-6);
    background: var(--sg-white);
    border: 1px solid var(--sg-hairline);
    border-radius: var(--sg-r-lg);
    box-shadow: var(--sg-shadow-sm);
  }
  .sg-compare__card--top { border-color: rgba(186, 147, 85, 0.5); box-shadow: var(--sg-shadow-md); }
  .sg-compare__badge {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: var(--sg-gold); color: var(--sg-ink);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 4px 12px; border-radius: var(--sg-r-pill); white-space: nowrap;
  }
  .sg-compare__name { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--sg-ink); }
  .sg-compare__match { margin: 2px 0 0; color: var(--sg-gold-text); font-weight: 700; font-size: 0.9rem; }

  .sg-compare__dims { margin-top: var(--sg-5); display: flex; flex-direction: column; gap: var(--sg-4); }
  .sg-compare__dim-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; font-size: 0.82rem; color: var(--sg-muted); }
  .sg-compare__dim-val { font-weight: 700; color: var(--sg-ink); }
  .sg-compare__bar { height: 6px; background: var(--sg-sand); border-radius: var(--sg-r-pill); overflow: hidden; }
  .sg-compare__bar-fill { height: 100%; width: 0; background: var(--sg-gold); border-radius: var(--sg-r-pill); transition: width var(--sg-dur-slow) var(--sg-ease-out); }

  @media (max-width: 900px) {
    .sg-compare__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
    .sg-compare__badge { left: auto; right: var(--sg-5); transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sg-compare__bar-fill { transition: none; }
  }


/* Setup Global Child — Header component (scoped: .sg-header*)
   Premium sticky header: transparent over the hero, solid on scroll with zero
   layout shift (position:fixed, only background/shadow transition). Mega menu,
   app-like mobile drawer, expandable search, magnetic CTA. All colours/type via
   tokens + Elementor globals. No global selectors — every rule is namespaced. */





  /* Component-scoped variables (override per-instance in Elementor if needed) */
  .sg-header {
    --sgh-h: 84px;
    --sgh-h-mobile: 68px;
    --sgh-pad-x: var(--sg-gutter);
    --sgh-fg: var(--sg-ink);          /* text over the hero (light hero → ink) */
    --sgh-fg-muted: var(--sg-muted);
    --sgh-bg: transparent;            /* transparent state */
    --sgh-bg-solid: var(--sg-sand);   /* solidified state */
    --sgh-accent: var(--sg-gold);

    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    background: var(--sgh-bg);
    transition: background var(--sg-dur) var(--sg-ease),
                box-shadow var(--sg-dur) var(--sg-ease),
                border-color var(--sg-dur) var(--sg-ease);
    border-bottom: 1px solid transparent;
  }

  .sg-header.is-solid {
    background: var(--sgh-bg-solid);
    border-bottom-color: var(--sg-hairline);
    box-shadow: var(--sg-shadow-sm);
  }

  .sg-header__bar {
    display: flex;
    align-items: center;
    gap: var(--sg-5);
    height: var(--sgh-h);
    max-width: var(--sg-container);
    margin-inline: auto;
    padding-inline: var(--sgh-pad-x);
  }

  .sg-header__logo {
    display: inline-flex;
    align-items: center;
    margin-inline-end: auto;      /* pushes nav + actions right */
    color: var(--sgh-fg);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
  }
  .sg-header__logo img { display: block; height: 32px; width: auto; }

  /* ---- Desktop navigation ------------------------------------------------ */
  .sg-header__nav { display: flex; }
  .sg-header__menu {
    display: flex;
    align-items: center;
    gap: var(--sg-2);
    margin: 0; padding: 0; list-style: none;
  }
  .sg-header__item { position: relative; }

  .sg-header__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 0; background: none;
    font: inherit; font-weight: 500; font-size: 0.95rem;
    color: var(--sgh-fg);
    text-decoration: none;
    border-radius: var(--sg-r-sm);
    cursor: pointer;
    transition: color var(--sg-dur-fast) var(--sg-ease),
                background var(--sg-dur-fast) var(--sg-ease);
  }
  .sg-header__link:hover { color: var(--sgh-accent); }
  .sg-header__link[aria-current="page"] { color: var(--sgh-accent); }
  /* Elegant underline that grows from the left on hover / active */
  .sg-header__link::after {
    content: "";
    position: absolute; left: 14px; right: 14px; bottom: 6px;
    height: 1.5px; background: var(--sgh-accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--sg-dur) var(--sg-ease-out);
  }
  .sg-header__link:hover::after,
  .sg-header__link[aria-current="page"]::after,
  .sg-header__item.is-open > .sg-header__link::after { transform: scaleX(1); }
  .sg-header__chevron { transition: transform var(--sg-dur-fast) var(--sg-ease); }
  .sg-header__item.is-open .sg-header__chevron { transform: rotate(180deg); }

  /* ---- Mega menu --------------------------------------------------------- */
  .sg-header__mega {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    width: min(920px, calc(100vw - 2 * var(--sg-gutter)));
    transform: translateX(-50%) translateY(-8px);
    background: var(--sg-white);
    border: 1px solid var(--sg-hairline);
    border-radius: var(--sg-r-lg);
    box-shadow: var(--sg-shadow-lg);
    padding: var(--sg-6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--sg-dur) var(--sg-ease-out),
                transform var(--sg-dur) var(--sg-ease-out),
                visibility 0s linear var(--sg-dur);
  }
  .sg-header__item.is-open > .sg-header__mega {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity var(--sg-dur) var(--sg-ease-out),
                transform var(--sg-dur) var(--sg-ease-out),
                visibility 0s;
  }
  /* Editable content grid (Elementor template drops in here) */
  .sg-header__mega-grid {
    display: grid;
    grid-template-columns: repeat(var(--sgh-mega-cols, 3), 1fr);
    gap: var(--sg-5);
  }
  .sg-header__mega-link {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px; border-radius: var(--sg-r-md);
    text-decoration: none; color: var(--sg-ink);
    transition: background var(--sg-dur-fast) var(--sg-ease);
  }
  .sg-header__mega-link:hover { background: var(--sg-sand); }
  .sg-header__mega-icon {
    flex: none; width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--sg-r-sm);
    background: var(--sg-sand); color: var(--sgh-accent);
    font-size: 20px;
  }
  .sg-header__mega-title { font-weight: 700; font-size: 0.95rem; }
  .sg-header__mega-desc { color: var(--sg-muted); font-size: 0.85rem; margin-top: 2px; }
  .sg-header__mega-featured {
    background: var(--sg-dark); color: var(--sg-white);
    border-radius: var(--sg-r-md); padding: var(--sg-5);
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--sg-4);
  }
  .sg-header__mega-featured .sg-header__cta { align-self: flex-start; }

  /* ---- Actions (search / language / CTA / toggle) ------------------------ */
  .sg-header__actions { display: flex; align-items: center; gap: var(--sg-3); }

  .sg-header__icon-btn {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border: 0; background: none; color: var(--sgh-fg);
    border-radius: var(--sg-r-pill); cursor: pointer; font-size: 20px;
    transition: background var(--sg-dur-fast) var(--sg-ease), color var(--sg-dur-fast) var(--sg-ease);
  }
  .sg-header__icon-btn:hover { color: var(--sgh-accent); background: var(--sg-hairline); }

  /* Expandable search */
  .sg-header__search { position: relative; display: flex; align-items: center; }
  .sg-header__search-field {
    width: 0; opacity: 0; padding: 0; border: 0;
    background: var(--sg-white); color: var(--sg-ink);
    height: 42px; border-radius: var(--sg-r-pill);
    transition: width var(--sg-dur) var(--sg-ease-out),
                opacity var(--sg-dur) var(--sg-ease-out),
                padding var(--sg-dur) var(--sg-ease-out);
  }
  .sg-header__search.is-open .sg-header__search-field {
    width: min(260px, 40vw); opacity: 1; padding: 0 18px;
    border: 1px solid var(--sg-hairline);
  }

  /* Language switcher (plugin-agnostic; markup filled by a filter) */
  .sg-header__lang { position: relative; }
  .sg-header__lang-list {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 160px; margin: 0; padding: 6px; list-style: none;
    background: var(--sg-white); border: 1px solid var(--sg-hairline);
    border-radius: var(--sg-r-md); box-shadow: var(--sg-shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--sg-dur-fast) var(--sg-ease-out),
                transform var(--sg-dur-fast) var(--sg-ease-out),
                visibility 0s linear var(--sg-dur-fast);
  }
  .sg-header__lang.is-open .sg-header__lang-list {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--sg-dur-fast) var(--sg-ease-out),
                transform var(--sg-dur-fast) var(--sg-ease-out), visibility 0s;
  }
  .sg-header__lang-list a {
    display: block; padding: 8px 12px; border-radius: var(--sg-r-sm);
    color: var(--sg-ink); text-decoration: none; font-size: 0.9rem;
  }
  .sg-header__lang-list a:hover { background: var(--sg-sand); }

  /* Primary CTA — supports icon, hover, focus, active, disabled, loading */
  .sg-header__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    background: var(--sgh-accent); color: var(--sg-ink);
    border: 0; border-radius: var(--sg-r-pill);
    font: inherit; font-weight: 700; font-size: 0.95rem;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: filter var(--sg-dur-fast) var(--sg-ease),
                transform var(--sg-dur-fast) var(--sg-ease);
    will-change: transform;
  }
  .sg-header__cta:hover { filter: brightness(0.94); }
  .sg-header__cta:active { transform: scale(0.98); }
  .sg-header__cta[aria-disabled="true"],
  .sg-header__cta:disabled { background: var(--sg-disabled); color: var(--sg-white); cursor: not-allowed; pointer-events: none; }
  .sg-header__cta.is-loading { color: transparent; position: relative; }
  .sg-header__cta.is-loading::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--sg-ink); border-top-color: transparent;
    animation: sgh-spin 0.7s linear infinite;
  }
  @keyframes sgh-spin { to { transform: rotate(360deg); } }

  /* Burger toggle — hidden on desktop */
  .sg-header__toggle { display: none; }

  /* ---- Mobile drawer ----------------------------------------------------- */
  .sg-header__scrim {
    position: fixed; inset: 0; z-index: 1001;
    background: var(--sg-overlay);
    opacity: 0; visibility: hidden;
    transition: opacity var(--sg-dur) var(--sg-ease), visibility 0s linear var(--sg-dur);
  }
  .sg-header.is-drawer-open .sg-header__scrim { opacity: 1; visibility: visible; transition: opacity var(--sg-dur) var(--sg-ease); }

  .sg-header__drawer {
    position: fixed; top: 0; right: 0; z-index: 1002;
    height: 100dvh; width: min(88vw, 400px);
    background: var(--sg-sand);
    display: flex; flex-direction: column;
    padding: calc(var(--sgh-h-mobile) + var(--sg-4)) var(--sg-5) var(--sg-6);
    transform: translateX(100%);
    transition: transform var(--sg-dur) var(--sg-ease-out);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .sg-header.is-drawer-open .sg-header__drawer { transform: translateX(0); }
  .sg-header__drawer a,
  .sg-header__drawer button {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 8px;               /* large, swipe-friendly touch targets */
    min-height: 52px;
    font-size: 1.05rem; font-weight: 500;
    color: var(--sg-ink); text-decoration: none;
    border-bottom: 1px solid var(--sg-hairline); background: none; border-left: 0; border-right: 0; border-top: 0;
    width: 100%; text-align: start;
  }
  .sg-header__drawer .sg-header__cta {
    justify-content: center; margin-top: var(--sg-5); border-bottom: 0; min-height: 56px;
  }

  /* ---- Responsive -------------------------------------------------------- */
  @media (max-width: 1024px) {
    .sg-header__bar { height: var(--sgh-h-mobile); }
    .sg-header__nav,
    .sg-header__search,
    .sg-header__lang,
    .sg-header__actions > .sg-header__cta { display: none; }
    .sg-header__toggle { display: grid; }
  }
  @media (min-width: 1025px) {
    .sg-header__drawer, .sg-header__scrim { display: none; }
  }

  /* ---- Reduced motion ---------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .sg-header, .sg-header *,
    .sg-header__mega, .sg-header__drawer, .sg-header__search-field {
      transition-duration: 0.01ms !important;
      animation: none !important;
    }
  }


/* Drawer-internal layout: reuse nav + mega markup as a stacked mobile menu */

  .sg-header__drawer-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .sg-header__drawer-menu .sg-header__item { width: 100%; }
  .sg-header__drawer .sg-header__link {
    width: 100%;
    justify-content: space-between;
    font-size: 1.05rem;
    padding: 16px 8px;
    min-height: 52px;
  }
  .sg-header__drawer .sg-header__link::after { content: none; }
  /* Mega panels flatten into an inline, always-visible sublist inside the drawer */
  .sg-header__drawer .sg-header__mega {
    position: static;
    width: auto;
    inset: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 8px 12px;
  }
  .sg-header__drawer .sg-header__mega[hidden] { display: block; } /* show even if source was collapsed */
  .sg-header__drawer .sg-header__mega-grid { grid-template-columns: 1fr; gap: 4px; }
  .sg-header__drawer .sg-header__mega-link { padding: 12px 8px; }


/* Setup Global Child — Hero (scoped: .sg-hero*)
   Cinematic full-bleed hero: content composed over sand on the left, the real
   prototype photograph bleeding full-height on the right (under the transparent
   header). Typography and spacing carry the design — no decorative effects.
   LCP-safe: the H1 and image paint immediately (never faded in); only the
   supporting elements get a short CSS entrance. Each breakpoint is laid out
   intentionally, not merely rescaled. */





  .sg-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    background: var(--sg-sand);
    overflow: hidden;
  }

  .sg-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--sg-container);
    margin-inline: auto;
    padding: calc(var(--sg-header-h) + var(--sg-7)) var(--sg-gutter) var(--sg-8);
  }

  .sg-hero__content { max-width: 34rem; }

  /* Eyebrow trust badge */
  .sg-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--sg-green);
    font-size: 0.9rem; font-weight: 600;
  }
  .sg-hero__badge::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--sg-green);
  }

  /* Headline — the primary design element */
  .sg-hero__title {
    margin: var(--sg-4) 0 0;
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--sg-ink);
    text-wrap: balance;
  }
  .sg-hero__title .sg-hero__accent { color: var(--sg-gold-text); }

  .sg-hero__subhead {
    margin: var(--sg-5) 0 0;
    max-width: 32rem;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.6;
    color: var(--sg-muted);
  }

  /* CTA + microcopy */
  .sg-hero__actions {
    margin-top: var(--sg-6);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-4);
  }
  .sg-hero__microcopy { color: var(--sg-subtle); font-size: 0.85rem; }

  /* Trust stats */
  .sg-hero__stats {
    margin-top: var(--sg-7);
    display: flex; flex-wrap: wrap; gap: var(--sg-5) var(--sg-7);
    padding-top: var(--sg-5);
    border-top: 1px solid var(--sg-hairline);
  }

  /* Media — full-bleed photograph behind the content (matches prototype).
     A left-anchored sand scrim keeps the headline legible (AA) while the photo
     stays visible on the right. */
  .sg-hero__media {
    position: absolute; inset: 0;
    width: 100%;
    z-index: 1;
  }
  .sg-hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(95deg, var(--sg-sand) 6%, rgba(247, 245, 242, 0.82) 30%, rgba(247, 245, 242, 0.35) 52%, rgba(247, 245, 242, 0) 70%);
    pointer-events: none;
  }
  .sg-hero__img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 40%;   /* focal point — editable in Elementor */
    display: block;
  }

  /* Entrance: supporting elements only (H1 + image are instant → LCP-safe) */
  @keyframes sg-hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .sg-hero__badge,
  .sg-hero__subhead,
  .sg-hero__actions,
  .sg-hero__stats { animation: sg-hero-in var(--sg-dur-reveal) var(--sg-ease-out) both; }
  .sg-hero__subhead { animation-delay: 0.08s; }
  .sg-hero__actions { animation-delay: 0.16s; }
  .sg-hero__stats   { animation-delay: 0.24s; }

  /* ---- Laptop ------------------------------------------------------------ */
  @media (max-width: 1366px) {
    .sg-hero__content { max-width: 32rem; }
  }

  /* ---- Tablet: photo becomes a full-width banner below the message ------- */
  @media (max-width: 1024px) {
    .sg-hero { min-height: auto; flex-direction: column; align-items: stretch; }
    .sg-hero__inner {
      order: 1;
      padding: calc(var(--sg-header-h) + var(--sg-7)) var(--sg-gutter) var(--sg-6);
    }
    .sg-hero__content { max-width: 42rem; }
    .sg-hero__media {
      position: relative; order: 2;
      width: 100%; height: 46vh; min-height: 320px;
    }
    .sg-hero__media::after { display: none; }
    .sg-hero__img { object-position: 50% 35%; }
  }

  /* ---- Mobile ------------------------------------------------------------ */
  @media (max-width: 768px) {
    .sg-hero__inner { padding-top: calc(var(--sg-header-h) + var(--sg-6)); }
    .sg-hero__badge { flex-wrap: wrap; font-size: 0.8rem; }
    .sg-hero__title { font-size: clamp(1.5rem, 6.6vw, 2.1rem); text-wrap: wrap; overflow-wrap: break-word; }
    .sg-hero__actions { flex-direction: column; align-items: stretch; }
    .sg-hero__actions .sg-btn { width: 100%; }
    .sg-hero__microcopy { text-align: center; }
    .sg-hero__stats { gap: var(--sg-5) var(--sg-6); }
    .sg-hero__stats .sg-stat { flex: 1 1 40%; }
    .sg-hero__media { height: 40vh; min-height: 260px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-hero__badge, .sg-hero__subhead, .sg-hero__actions, .sg-hero__stats { animation: none; }
  }


/* Setup Global Child — Floating WhatsApp widget (scoped: .sg-wa*)
   Official WhatsApp-green aesthetic: a green gradient pill with a white glyph and
   white text, so it reads instantly as "chat with us on WhatsApp". A real link
   (works without JS); JS only toggles .is-hidden while a real overlay is open.

   Two transform layers so animations never fight:
     .sg-wa        — fixed wrapper, owns the hover LIFT.
     .sg-wa__inner — the visible pill, owns the soft FLOAT + fade-in entrance.
   Reduced-motion safe. */





  .sg-wa {
    position: fixed;
    right: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-right, 0px));
    bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
    z-index: 900; /* below the WP admin bar (100000+) */
    display: inline-block;
    text-decoration: none;
    max-width: calc(100vw - 2 * clamp(16px, 3vw, 28px));
    transition: transform 280ms var(--sg-ease-out);
  }
  .sg-wa:hover { transform: translateY(-4px); }
  .sg-wa:active { transform: translateY(-1px); }
  .sg-wa:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: var(--sg-r-pill); }

  .sg-wa__inner {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-3);
    padding: 8px 20px 8px 8px;
    border-radius: var(--sg-r-pill);
    /* Official WhatsApp green, with a subtle depth gradient. */
    background: linear-gradient(150deg, #25d366 0%, #1ebe5d 55%, #12a150 100%);
    color: #fff;
    /* Soft green glow + grounding shadow. */
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.34), 0 3px 10px rgba(18, 68, 40, 0.18);
    transition: box-shadow 280ms var(--sg-ease-out);
    /* Fade-in entrance (opacity only → never conflicts with the float, never stuck). */
    animation: sg-wa-in 420ms var(--sg-ease-out), sg-wa-float 3.6s ease-in-out infinite;
  }
  .sg-wa:hover .sg-wa__inner {
    box-shadow: 0 18px 46px rgba(37, 211, 102, 0.5), 0 5px 14px rgba(18, 68, 40, 0.22);
  }
  @keyframes sg-wa-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sg-wa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

  .sg-wa__avatar {
    flex: none;
    width: 46px; height: 46px;
    position: relative;
    border-radius: var(--sg-r-pill);
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); /* white ring lifts the photo off the green */
  }
  .sg-wa__avatar img,
  .sg-wa__monogram { width: 100%; height: 100%; border-radius: var(--sg-r-pill); }
  .sg-wa__avatar img { object-fit: cover; display: block; }
  .sg-wa__monogram {
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1.1rem;
  }

  /* Online dot — the ONLY looping pulse. Sits on the avatar, so it stays crisp. */
  .sg-wa__avatar::after {
    content: "";
    position: absolute;
    right: 0; bottom: 0;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #7bed9f; /* bright "online" green */
    box-shadow: 0 0 0 2px #1cbf5b;
    animation: sg-wa-pulse 2.4s var(--sg-ease-out) infinite;
  }
  @keyframes sg-wa-pulse {
    0%   { box-shadow: 0 0 0 2px #1cbf5b, 0 0 0 0 rgba(255, 255, 255, 0.55); }
    70%  { box-shadow: 0 0 0 2px #1cbf5b, 0 0 0 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 2px #1cbf5b, 0 0 0 0 rgba(255, 255, 255, 0); }
  }

  .sg-wa__text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; min-width: 0; }
  .sg-wa__name { font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em; color: #fff; text-shadow: 0 1px 1px rgba(0, 60, 25, 0.18); }
  .sg-wa__reply { font-size: 0.8rem; color: rgba(255, 255, 255, 0.92); }

  /* White WhatsApp glyph in a soft translucent disc. */
  .sg-wa__icon {
    flex: none;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    transition: transform 280ms var(--sg-ease-out);
  }
  .sg-wa__icon svg { width: 20px; height: 20px; }
  .sg-wa:hover .sg-wa__icon { transform: scale(1.1) rotate(-6deg); }

  /* Hidden while a real overlay is open (toggled by whatsapp.js via events). */
  .sg-wa.is-hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 280ms var(--sg-ease), transform 280ms var(--sg-ease), visibility 0s linear 280ms;
  }

  /* Compact on small phones — keep name + icon, drop the reply line. */
  @media (max-width: 480px) {
    .sg-wa__inner { padding: 7px 15px 7px 7px; gap: var(--sg-2); }
    .sg-wa__avatar { width: 42px; height: 42px; }
    .sg-wa__reply { display: none; }
    .sg-wa__name { font-size: 0.92rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-wa { transition: opacity var(--sg-dur) var(--sg-ease); }
    .sg-wa:hover { transform: none; }
    .sg-wa__inner { animation: none; }
    .sg-wa:hover .sg-wa__inner { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.34), 0 3px 10px rgba(18, 68, 40, 0.18); }
    .sg-wa:hover .sg-wa__icon { transform: none; }
    .sg-wa__avatar::after { animation: none; }
  }


/* Setup Global Child — FAQ / Q&A (scoped: .sg-faq*)
   A premium single-column accordion. Each row is an accessible disclosure
   (button + region) whose answer expands with a smooth grid-rows animation
   (no JS height measurement, reduced-motion safe). Paired with a schema.org
   FAQPage JSON-LD block rendered server-side for SEO. */





  .sg-faq {
    max-width: 820px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sg-3);
  }

  .sg-faq__item {
    background: var(--sg-white);
    border: 1px solid var(--sg-hairline);
    border-radius: var(--sg-r-lg);
    box-shadow: var(--sg-shadow-sm);
    transition: box-shadow var(--sg-dur) var(--sg-ease), border-color var(--sg-dur) var(--sg-ease);
    overflow: hidden;
  }
  .sg-faq__item:hover { box-shadow: var(--sg-shadow-md); }
  .sg-faq__item.is-open { border-color: var(--sg-gold); }

  .sg-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sg-4);
    width: 100%;
    margin: 0;
    padding: var(--sg-5) var(--sg-6);
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: var(--sg-lh-tight);
    color: var(--sg-ink);
  }
  .sg-faq__q:focus-visible { outline: 2px solid var(--sg-gold-text); outline-offset: -3px; border-radius: var(--sg-r-lg); }

  /* + / × indicator */
  .sg-faq__icon {
    flex: none;
    width: 26px; height: 26px;
    position: relative;
    border-radius: var(--sg-r-pill);
    background: rgba(186, 147, 85, 0.12);
    transition: transform var(--sg-dur) var(--sg-ease), background var(--sg-dur) var(--sg-ease);
  }
  .sg-faq__icon::before,
  .sg-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 11px; height: 2px;
    background: var(--sg-gold-text);
    transform: translate(-50%, -50%);
    border-radius: 2px;
  }
  .sg-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--sg-dur) var(--sg-ease); }
  .sg-faq__item.is-open .sg-faq__icon { transform: rotate(135deg); background: rgba(186, 147, 85, 0.2); }

  .sg-faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--sg-dur) var(--sg-ease-out);
  }
  .sg-faq__item.is-open .sg-faq__panel { grid-template-rows: 1fr; }
  .sg-faq__panel-inner { overflow: hidden; }

  .sg-faq__a {
    margin: 0;
    padding: 0 var(--sg-6) var(--sg-5);
    color: var(--sg-muted);
    line-height: var(--sg-lh);
  }

  @media (max-width: 600px) {
    .sg-faq__q { padding: var(--sg-4) var(--sg-5); font-size: 1rem; }
    .sg-faq__a { padding: 0 var(--sg-5) var(--sg-4); }
  }

  @media (prefers-reduced-motion: reduce) {
    .sg-faq__item,
    .sg-faq__icon,
    .sg-faq__icon::after,
    .sg-faq__panel { transition: none; }
  }


/* Setup Global Child — Footer (scoped: .sg-footer*)
   Dark production footer built from the design tokens: brand + socials, a nav
   column, a legal column (Impressum / Datenschutz / AGB), and a contact column
   (address / email / phone), with a bottom bar for copyright + "Powered by". */





  .sg-footer {
    background: var(--sg-dark);
    color: rgba(255, 255, 255, 0.72);
    padding: var(--sg-9) var(--sg-gutter) var(--sg-6);
    font-size: 0.92rem;
    line-height: 1.6;
  }
  .sg-footer__inner { max-width: var(--sg-container); margin-inline: auto; }

  .sg-footer__grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.4fr;
    gap: var(--sg-8) var(--sg-6);
  }

  /* Brand column */
  .sg-footer__brand-name {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
  }
  .sg-footer__brand-name span { color: var(--sg-gold); }
  .sg-footer__tagline { margin: var(--sg-3) 0 var(--sg-5); max-width: 34ch; color: rgba(255, 255, 255, 0.6); }

  .sg-footer__socials { display: flex; gap: var(--sg-3); }
  .sg-footer__social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    transition: background var(--sg-dur) var(--sg-ease), color var(--sg-dur) var(--sg-ease), transform var(--sg-dur) var(--sg-ease-out);
  }
  .sg-footer__social:hover { background: var(--sg-gold); color: var(--sg-dark); transform: translateY(-2px); }
  .sg-footer__social:focus-visible { outline: 2px solid var(--sg-gold); outline-offset: 2px; }
  .sg-footer__social svg { width: 18px; height: 18px; }

  /* Link columns */
  .sg-footer__col-title {
    margin: 0 0 var(--sg-4);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
  }
  .sg-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-2); }
  .sg-footer__link {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color var(--sg-dur) var(--sg-ease);
  }
  .sg-footer__link:hover { color: var(--sg-gold); }
  .sg-footer__link:focus-visible { outline: 2px solid var(--sg-gold); outline-offset: 2px; border-radius: 3px; }

  /* Contact column */
  .sg-footer__contact { font-style: normal; display: flex; flex-direction: column; gap: var(--sg-3); }
  .sg-footer__contact-row { display: flex; gap: var(--sg-3); align-items: flex-start; min-width: 0; }
  .sg-footer__contact-row > span,
  .sg-footer__contact-row > a { min-width: 0; overflow-wrap: break-word; }
  .sg-footer__contact-icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--sg-gold); }
  .sg-footer__contact-row a { color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color var(--sg-dur) var(--sg-ease); }
  .sg-footer__contact-row a:hover { color: var(--sg-gold); }

  /* Bottom bar */
  .sg-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sg-3);
    margin-top: var(--sg-8);
    padding-top: var(--sg-5);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
  }
  .sg-footer__powered { color: rgba(255, 255, 255, 0.6); }
  .sg-footer__powered strong { color: var(--sg-gold); font-weight: 600; }

  @media (max-width: 900px) {
    .sg-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sg-7) var(--sg-6); }
    .sg-footer__brand { grid-column: 1 / -1; }
  }
  @media (max-width: 560px) {
    .sg-footer__grid { grid-template-columns: 1fr; }
    .sg-footer__bottom { flex-direction: column; align-items: flex-start; }
  }


body{margin:0;font-family:"Helvetica Neue",Inter,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--sg-ink);background:var(--sg-sand)}