/* ==========================================================================
   GARDEN WEDDINGS PLOVDIV / MARKOVO — Botanical Luxury & Champagne Gold v2.0
   Built with Modern Web Guidance:
   - CSS @layer cascade (reset, tokens, base, layout, components, utilities)
   - Botanical Luxury & Champagne Gold palette (#FAF7F2, #F3EDE3, #1C241E, #3B5249, #B69155)
   - Playfair Display headings + Manrope body, UI & tabular numbers
   - Symmetrical 4:3 (800x600) cards with CSS Grid align-items: stretch & flexbox footer alignment
   - Responsive across Desktop (1440x900), Tablet (<=1120px) and Mobile (<=640px) with zero horizontal overflow
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }
  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }
}

@layer tokens {
  :root {
    --in-oklab: ;
    --in-oklch: ;

    /* Botanical Luxury & Champagne Gold Palette */
    --gw-canvas: #FAF7F2;
    --gw-surface: #FFFFFF;
    --gw-stone-50: #F3EDE3;
    --gw-stone-100: #EAE1D3;
    --gw-stone-200: #DDD1BE;
    --gw-stone-300: #C8B8A2;

    /* Forest Charcoal Ink */
    --gw-ink: #1C241E;
    --gw-ink-secondary: #435046;
    --gw-ink-muted: #657368;

    /* Accent 1: Botanical Sage Green */
    --gw-sage: #3B5249;
    --gw-sage-light: #4A6B5D;
    --gw-sage-dark: #293B34;
    --gw-sage-soft: #EBF1EE;

    /* Accent 2: Champagne Gold */
    --gw-gold: #B69155;
    --gw-gold-dark: #9A7840;
    --gw-gold-light: #D4B275;
    --gw-gold-soft: #F7F1E5;
    --gw-gold-border: rgba(182, 145, 85, 0.26);

    /* Borders & Radii */
    --gw-border: rgba(28, 36, 30, 0.08);
    --gw-border-hover: rgba(182, 145, 85, 0.36);
    --gw-radius-sm: 0.75rem;
    --gw-radius-md: 1.125rem;
    --gw-radius-lg: 1.5rem;
    --gw-radius-xl: 2rem;
    --gw-radius-pill: 9999px;

    /* Soft Architectural Shadows */
    --gw-shadow-xs: 0 1px 3px rgba(28, 36, 30, 0.03), 0 4px 12px -2px rgba(28, 36, 30, 0.04);
    --gw-shadow-sm: 0 2px 6px rgba(28, 36, 30, 0.03), 0 10px 24px -4px rgba(28, 36, 30, 0.06);
    --gw-shadow-md: 0 6px 16px rgba(28, 36, 30, 0.05), 0 20px 44px -10px rgba(28, 36, 30, 0.09);
    --gw-shadow-lg: 0 12px 28px rgba(28, 36, 30, 0.06), 0 32px 64px -14px rgba(28, 36, 30, 0.12);
    --gw-shadow-gold: 0 8px 24px -6px rgba(182, 145, 85, 0.32);

    /* Motion Curves */
    --gw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --gw-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

    /* Typography — Modern Wedding Luxury (Playfair Display + Manrope) */
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  @supports (background: linear-gradient(in oklab, white, black)) {
    :root {
      --in-oklab: in oklab;
      --in-oklch: in oklch;
    }
  }
}

@layer base {
  html {
    color-scheme: light;
    scroll-behavior: smooth;
    font-family: var(--font-body);
    font-size-adjust: from-font;
    color: var(--gw-ink);
    background-color: var(--gw-canvas);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    max-width: 100%;
    @media (prefers-reduced-motion: reduce) {
      scroll-behavior: auto;
    }
  }

  @supports not (font-size-adjust: from-font) {
    html {
      line-height: 1.65;
    }
  }

  body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
    text-align: start;
  }

  header, main, footer, section, article, aside, nav, div, form {
    min-width: 0;
  }

  :target {
    scroll-margin-top: 5.5rem;
  }

  h1, h2 {
    font-family: var(--font-serif);
    font-size-adjust: from-font;
    color: var(--gw-ink);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 700;
    text-wrap: balance;
  }

  h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-size-adjust: from-font;
    color: var(--gw-ink);
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 700;
    text-wrap: balance;
  }

  p, li, blockquote {
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  a {
    color: inherit;
    text-decoration: none;
    transition:
      color 0.28s var(--gw-ease-out),
      background-color 0.28s var(--gw-ease-out),
      border-color 0.28s var(--gw-ease-out),
      opacity 0.28s var(--gw-ease-out),
      translate 0.28s var(--gw-ease-out),
      scale 0.28s var(--gw-ease-out),
      box-shadow 0.28s var(--gw-ease-out);
  }

  .gw-skip-link {
    position: absolute;
    top: -6rem;
    left: 1rem;
    background: var(--gw-ink);
    color: var(--gw-surface);
    padding: 0.65rem 1.2rem;
    border-radius: var(--gw-radius-pill);
    z-index: 9999;
    font-weight: 600;
    font-size: 0.875rem;
  }
  .gw-skip-link:focus {
    top: 1rem;
  }
}

@layer layout {
  .gw-container {
    width: 100%;
    max-width: 78rem;
    margin-inline: auto;
    padding-inline: clamp(1.15rem, 3.8vw, 2.5rem);
  }

  .gw-section {
    padding-block: clamp(3.75rem, 6.5vw, 6rem);
  }

  .gw-section-compact {
    padding-block: clamp(2.5rem, 4.5vw, 4rem);
  }

  .gw-section-white {
    background-color: var(--gw-surface);
  }

  .gw-section-soft {
    background: linear-gradient(180deg var(--in-oklab), var(--gw-stone-50) 0%, var(--gw-canvas) 100%);
  }

  .gw-section-botanical {
    background:
      radial-gradient(circle at 85% 15%, rgba(182, 145, 85, 0.16), transparent 50%),
      linear-gradient(135deg var(--in-oklab), #FAF7F2 0%, #EFE8DC 100%);
    color: var(--gw-ink);
    border-block: 1px solid var(--gw-border);
  }

  .gw-section-header {
    max-width: 46rem;
    margin-inline: auto;
    margin-bottom: clamp(2.15rem, 3.8vw, 3.1rem);
    text-align: center;
  }
  .gw-section-header-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: clamp(1.85rem, 3.2vw, 2.75rem);
    flex-wrap: wrap;
  }
  .gw-section-title {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.85rem);
    font-weight: 700;
    margin-bottom: 0.55rem;
  }
  .gw-section-subtitle {
    font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    color: var(--gw-ink-secondary);
    max-width: 58ch;
    margin-inline: auto;
  }

  .gw-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.4rem, 2.8vw, 2.35rem);
    align-items: stretch;
  }
  .gw-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.2rem, 2.3vw, 1.85rem);
    align-items: stretch;
  }
  .gw-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.1rem, 1.9vw, 1.55rem);
    align-items: stretch;
  }

  .gw-blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: clamp(1.75rem, 3.5vw, 2.75rem);
    align-items: start;
  }

  .gw-card-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  @media (max-width: 70rem) {
    .gw-grid-4,
    .gw-grid-3 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 62rem) {
    .gw-blog-layout {
      grid-template-columns: minmax(0, 1fr);
    }
    .gw-blog-layout > aside {
      position: static !important;
    }
  }
  @media (max-width: 56rem) {
    .gw-grid-2 {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @media (max-width: 40rem) {
    .gw-grid-3, .gw-grid-4 {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @media (max-width: 24rem) {
    .gw-card-actions-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

@layer components {
  /* ─── Sticky Botanical Luxury Header ─────────────────────────────────── */
  .gw-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 247, 242, 0.88);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(28, 36, 30, 0.07);
    transition:
      background-color 0.3s var(--gw-ease-out),
      box-shadow 0.3s var(--gw-ease-out);
  }
  .gw-header.is-scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--gw-shadow-xs);
  }

  .gw-header .gw-container {
    max-width: 88rem;
  }

  .gw-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.75rem;
    gap: 0.75rem;
    transition: height 0.3s var(--gw-ease-out);
  }
  .gw-header.is-scrolled .gw-header-inner {
    height: 4.1rem;
  }

  .gw-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    flex-shrink: 0;
  }
  .gw-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .gw-brand-img,
  .gw-brand img {
    height: 3.1rem;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    display: block;
    transition: scale 0.25s var(--gw-ease-out);
  }
  .gw-header.is-scrolled .gw-brand-img {
    height: 2.65rem;
  }
  .gw-footer .gw-brand-img {
    height: 3.45rem;
  }
  .gw-brand:hover .gw-brand-img {
    scale: 1.03;
  }
  .gw-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.05;
    user-select: none;
  }
  .gw-brand-title {
    font-family: var(--font-serif);
    font-size: 1.24rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gw-ink);
  }
  .gw-brand-sub {
    font-family: var(--font-body);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--gw-gold-dark);
    text-transform: uppercase;
    margin-top: 2px;
  }

  .gw-nav {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.08rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(28, 36, 30, 0.07);
    padding: 0.22rem;
    border-radius: var(--gw-radius-pill);
  }
  .gw-nav a {
    padding: 0.38rem 0.56rem;
    border-radius: var(--gw-radius-pill);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gw-ink-secondary);
    white-space: nowrap;
  }
  .gw-nav a:hover {
    color: var(--gw-ink);
    background-color: var(--gw-gold-soft);
  }
  .gw-nav a.is-active {
    color: var(--gw-ink);
    font-weight: 600;
    background-color: var(--gw-surface);
    box-shadow: 0 1px 4px rgba(28, 36, 30, 0.07);
  }

  .gw-header-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .gw-header-phone {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gw-ink-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.36rem 0.52rem;
    border-radius: var(--gw-radius-pill);
    white-space: nowrap;
  }
  .gw-header-phone:hover {
    color: var(--gw-gold-dark);
    background: var(--gw-gold-soft);
  }

  .gw-burger {
    display: none;
    background: var(--gw-surface);
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius-pill);
    width: 2.65rem;
    height: 2.65rem;
    align-items: center;
    justify-content: center;
    color: var(--gw-ink);
    cursor: pointer;
  }

  @media (max-width: 94rem) {
    .gw-header-phone {
      display: none;
    }
  }
  @media (max-width: 76rem) {
    .gw-nav {
      display: none;
    }
    .gw-burger {
      display: inline-flex;
    }
  }
  @media (max-width: 40rem) {
    .gw-header-cta .gw-btn {
      display: none;
    }
    .gw-brand-img {
      height: 2.35rem;
    }
    .gw-brand-title {
      font-size: 1.15rem;
    }
    .gw-brand-sub {
      font-size: 0.56rem;
    }
  }

  /* ─── Off-Canvas Mobile Drawer ─────────────────────────────────────────── */
  .gw-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(28, 36, 30, 0.32);
    backdrop-filter: blur(6px);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s var(--gw-ease-out);
  }
  .gw-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .gw-drawer {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: min(21.5rem, calc(100vw - 1.5rem));
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius-lg);
    z-index: 201;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    translate: calc(100% + 1.5rem) 0;
    transition: translate 0.36s var(--gw-ease-soft);
    box-shadow: var(--gw-shadow-lg);
    overflow-y: auto;
  }
  .gw-drawer.is-open {
    translate: 0 0;
  }
  .gw-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-block: 1.15rem;
  }
  .gw-drawer-links a {
    padding: 0.65rem 0.9rem;
    border-radius: var(--gw-radius-sm);
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--gw-ink-secondary);
  }
  .gw-drawer-links a:hover,
  .gw-drawer-links a.is-active {
    background: var(--gw-gold-soft);
    color: var(--gw-ink);
    font-weight: 600;
  }

  /* ─── Buttons & Badges ─────────────────────────────────────────────────── */
  .gw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.78rem 1.45rem;
    border-radius: var(--gw-radius-pill);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    border: 1px solid transparent;
    text-align: center;
    transition:
      background-color 0.28s var(--gw-ease-out),
      border-color 0.28s var(--gw-ease-out),
      color 0.28s var(--gw-ease-out),
      translate 0.28s var(--gw-ease-out),
      scale 0.28s var(--gw-ease-out),
      box-shadow 0.28s var(--gw-ease-out);
  }
  .gw-btn:hover {
    translate: 0 -2px;
    @media (prefers-reduced-motion: reduce) {
      translate: none;
    }
  }
  .gw-btn:active {
    scale: 0.985;
  }

  .gw-btn-gold {
    background: linear-gradient(135deg var(--in-oklab), #C8A467 0%, #B69155 55%, #9A7840 100%);
    color: #FFFFFF;
    box-shadow: var(--gw-shadow-gold);
  }
  .gw-btn-gold:hover {
    background: linear-gradient(135deg var(--in-oklab), #BC975A 0%, #9A7840 100%);
    box-shadow: 0 12px 28px -6px rgba(182, 145, 85, 0.42);
  }

  .gw-btn-sage,
  .gw-btn-dark {
    background: var(--gw-sage);
    color: #FFFFFF;
    box-shadow: var(--gw-shadow-xs);
  }
  .gw-btn-sage:hover,
  .gw-btn-dark:hover {
    background: var(--gw-sage-dark);
    box-shadow: var(--gw-shadow-sm);
  }

  .gw-btn-outline {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(12px);
    border-color: rgba(28, 36, 30, 0.14);
    color: var(--gw-ink);
    box-shadow: var(--gw-shadow-xs);
  }
  .gw-btn-outline:hover {
    background: var(--gw-surface);
    border-color: var(--gw-gold);
    box-shadow: var(--gw-shadow-sm);
  }

  .gw-btn-whatsapp {
    background: var(--gw-sage-soft);
    border-color: rgba(59, 82, 73, 0.22);
    color: var(--gw-sage-dark);
  }
  .gw-btn-whatsapp:hover {
    background: var(--gw-sage);
    color: #FFFFFF;
  }

  .gw-header-cta .gw-btn {
    padding: 0.56rem 1.1rem;
    font-size: 0.82rem;
  }

  .gw-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.36rem 0.9rem;
    border-radius: var(--gw-radius-pill);
    background: var(--gw-gold-soft);
    border: 1px solid rgba(182, 145, 85, 0.24);
    color: var(--gw-gold-dark);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.9rem;
  }

  .gw-sku-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: var(--gw-radius-pill);
    background: var(--gw-stone-50);
    border: 1px solid var(--gw-border);
    color: var(--gw-sage);
    font-size: 0.74rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

  /* ─── Botanical Luxury Hero Section (with 2x2 Video Grid) ──────────────── */
  .gw-hero {
    position: relative;
    background:
      radial-gradient(circle at 82% 18%, rgba(182, 145, 85, 0.18), transparent 45%),
      radial-gradient(circle at 12% 85%, rgba(59, 82, 73, 0.08), transparent 50%),
      linear-gradient(180deg var(--in-oklab), #FCFBF8 0%, #F3EDE3 100%);
    padding-block: clamp(2.5rem, 4.8vw, 4.5rem);
    border-bottom: 1px solid var(--gw-border);
    overflow: hidden;
  }

  .gw-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.08fr;
    gap: clamp(1.75rem, 3.5vw, 3.1rem);
    align-items: center;
  }
  @media (max-width: 62rem) {
    .gw-hero-grid {
      grid-template-columns: 1fr;
    }
  }

  .gw-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2.15rem, 1.5rem + 2.5vw, 3.35rem);
    font-weight: 700;
    color: var(--gw-ink);
    margin-bottom: 1rem;
    line-height: 1.1;
  }
  .gw-hero-title span {
    color: var(--gw-gold-dark);
    font-style: italic;
  }

  .gw-hero-lead {
    font-size: clamp(0.96rem, 0.92rem + 0.22vw, 1.06rem);
    color: var(--gw-ink-secondary);
    margin-bottom: 1.45rem;
    max-width: 52ch;
    line-height: 1.65;
  }

  .gw-hero-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.55rem;
  }
  @media (max-width: 34rem) {
    .gw-hero-highlights {
      grid-template-columns: 1fr;
    }
  }
  .gw-hero-stat {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius-md);
    padding: 0.65rem 0.85rem;
  }
  .gw-hero-stat strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gw-sage);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
  }
  .gw-hero-stat span {
    font-size: 0.74rem;
    color: var(--gw-ink-secondary);
    font-weight: 500;
  }

  .gw-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
  }
  .gw-hero-actions .gw-btn {
    padding: 0.7rem 1.08rem;
    font-size: 0.83rem;
    white-space: nowrap;
  }
  @media (max-width: 36rem) {
    .gw-hero-actions .gw-btn {
      flex: 1 1 calc(50% - 0.5rem);
      padding: 0.72rem 0.85rem;
    }
    .gw-hero-actions .gw-btn:first-child {
      flex: 1 1 100%;
    }
  }

  /* 2x2 Interactive Video Grid in Hero */
  .gw-hero-showcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.65rem, 1.8vw, 1rem);
  }
  @media (max-width: 24rem) {
    .gw-hero-showcase {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .gw-hero-card {
    position: relative;
    border-radius: var(--gw-radius-lg);
    overflow: hidden;
    background: #1C241E;
    aspect-ratio: 4 / 3;
    box-shadow: var(--gw-shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.82);
  }
  .gw-hero-card img,
  .gw-hero-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    scale: 1;
    transition: scale 0.65s var(--gw-ease-out);
  }
  .gw-hero-card:hover img,
  .gw-hero-card:hover video {
    scale: 1.05;
  }
  .gw-hero-video-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 3;
    padding: 0.22rem 0.6rem;
    border-radius: var(--gw-radius-pill);
    background: rgba(28, 36, 30, 0.72);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #FAF7F2;
    font-size: 0.68rem;
    font-weight: 600;
    pointer-events: none;
  }
  .gw-hero-card-overlay {
    position: absolute;
    inset: auto 0.6rem 0.6rem 0.6rem;
    padding: 0.55rem 0.8rem;
    border-radius: var(--gw-radius-md);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 16px rgba(28, 36, 30, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    transition: translate 0.3s var(--gw-ease-out), background-color 0.3s var(--gw-ease-out);
  }
  @media (max-width: 32rem) {
    .gw-hero-card-overlay {
      inset: auto 0.45rem 0.45rem 0.45rem;
      padding: 0.42rem 0.6rem;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.08rem;
    }
  }
  .gw-hero-card-overlay strong {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gw-ink);
  }
  .gw-hero-card-overlay span {
    font-size: 0.74rem;
    color: var(--gw-gold-dark);
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* ─── Symmetrical 4:3 Pillar, Package & Wedding Portfolio Cards ────────── */
  .gw-card,
  .gw-pillar-card {
    background: var(--gw-surface);
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius-lg);
    padding: 1.15rem;
    box-shadow: var(--gw-shadow-xs);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition:
      translate 0.35s var(--gw-ease-out),
      box-shadow 0.35s var(--gw-ease-out),
      border-color 0.35s var(--gw-ease-out);
  }
  .gw-card:hover,
  .gw-pillar-card:hover {
    translate: 0 -4px;
    box-shadow: var(--gw-shadow-md);
    border-color: var(--gw-border-hover);
  }

  .gw-card-media {
    position: relative;
    border-radius: var(--gw-radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1.05rem;
    background: var(--gw-stone-100);
  }
  .gw-card-media img,
  .gw-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    scale: 1;
    transition: scale 0.6s var(--gw-ease-out);
  }
  .gw-card:hover .gw-card-media img,
  .gw-card:hover .gw-card-media video,
  .gw-pillar-card:hover .gw-card-media img,
  .gw-pillar-card:hover .gw-card-media video {
    scale: 1.045;
  }

  .gw-card-zoom-btn {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 4;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    color: var(--gw-ink);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(28, 36, 30, 0.12);
  }

  .gw-card-badge {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    color: var(--gw-ink);
    padding: 0.28rem 0.72rem;
    border-radius: var(--gw-radius-pill);
    font-size: 0.71rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 2px 8px rgba(28, 36, 30, 0.08);
  }
  .gw-card-badge.is-promo {
    background: rgba(255, 252, 245, 0.95);
    color: var(--gw-gold-dark);
    border-color: var(--gw-gold-border);
  }

  .gw-card-title {
    font-family: var(--font-heading);
    font-size: 1.06rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
    color: var(--gw-ink);
    line-height: 1.32;
  }
  .gw-card-desc {
    font-size: 0.87rem;
    color: var(--gw-ink-secondary);
    margin-bottom: 0.95rem;
    line-height: 1.55;
  }

  .gw-spec-list,
  .gw-check-list {
    list-style: none;
    margin-bottom: 0.95rem;
    border-top: 1px solid var(--gw-border);
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
  }
  .gw-spec-list li,
  .gw-check-list li {
    font-size: 0.82rem;
    color: var(--gw-ink-secondary);
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
  }
  .gw-spec-list li::before,
  .gw-check-list li::before {
    content: "✦";
    color: var(--gw-gold);
    font-weight: 700;
    flex-shrink: 0;
  }

  .gw-price-box {
    background: var(--gw-stone-50);
    border: 1px solid rgba(28, 36, 30, 0.06);
    border-radius: var(--gw-radius-sm);
    padding: 0.68rem 0.88rem;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .gw-price-label {
    font-size: 0.72rem;
    color: var(--gw-ink-muted);
    font-weight: 500;
  }
  .gw-price-value {
    font-family: var(--font-heading);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--gw-ink);
    font-variant-numeric: tabular-nums;
  }
  .gw-price-value small {
    font-size: 0.76rem;
    color: var(--gw-ink-muted);
    font-weight: 500;
  }

  .gw-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gw-gold-dark);
    padding-top: 0.2rem;
  }

  /* ─── Filter Tabs & Symmetrical 24-Item Weddings Gallery ───────────────── */
  .gw-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 2.15rem;
  }
  .gw-filter-btn {
    padding: 0.54rem 1.12rem;
    border-radius: var(--gw-radius-pill);
    border: 1px solid var(--gw-border);
    background: var(--gw-surface);
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--gw-ink-secondary);
    cursor: pointer;
    transition: all 0.24s var(--gw-ease-out);
  }
  .gw-filter-btn:hover {
    border-color: var(--gw-gold-light);
    color: var(--gw-ink);
  }
  .gw-filter-btn.is-active {
    background: var(--gw-sage);
    color: #FFFFFF;
    border-color: var(--gw-sage);
    box-shadow: var(--gw-shadow-xs);
  }

  .gw-project-card {
    background: var(--gw-surface);
    border-radius: var(--gw-radius-lg);
    overflow: hidden;
    border: 1px solid var(--gw-border);
    box-shadow: var(--gw-shadow-xs);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition:
      opacity 0.32s var(--gw-ease-out),
      translate 0.32s var(--gw-ease-out),
      box-shadow 0.32s var(--gw-ease-out),
      border-color 0.32s var(--gw-ease-out);
  }
  .gw-project-card[hidden] {
    display: none !important;
  }
  .gw-project-card:hover {
    translate: 0 -4px;
    box-shadow: var(--gw-shadow-md);
    border-color: var(--gw-border-hover);
  }

  .gw-project-media {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--gw-stone-100);
  }
  .gw-project-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    scale: 1;
    transition: scale 0.6s var(--gw-ease-out);
  }
  .gw-project-card:hover .gw-project-media img {
    scale: 1.05;
  }
  .gw-project-pill {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    padding: 0.26rem 0.68rem;
    border-radius: var(--gw-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    font-size: 0.71rem;
    font-weight: 600;
    color: var(--gw-ink);
    box-shadow: 0 2px 8px rgba(28, 36, 30, 0.08);
  }
  .gw-project-body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    gap: 0.6rem;
  }
  .gw-project-body h3 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gw-ink);
    line-height: 1.36;
    margin: 0;
  }
  .gw-project-meta {
    font-size: 0.78rem;
    color: var(--gw-ink-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding-top: 0.5rem;
    margin-top: auto;
    border-top: 1px solid rgba(28, 36, 30, 0.06);
  }
  .gw-project-meta strong {
    color: var(--gw-gold-dark);
    font-weight: 600;
    white-space: nowrap;
  }

  /* ─── Interactive Wedding Budget Calculator (EUR / €) ──────────────────── */
  .gw-calc-shell {
    background: var(--gw-surface);
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius-xl);
    padding: clamp(1.4rem, 3.2vw, 2.6rem);
    box-shadow: var(--gw-shadow-md);
  }
  .gw-calc-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.65rem;
  }
  @media (max-width: 48rem) {
    .gw-calc-tabs {
      grid-template-columns: 1fr;
    }
  }
  .gw-calc-tab {
    padding: 0.88rem 1rem;
    border-radius: var(--gw-radius-md);
    border: 1px solid var(--gw-border);
    background: var(--gw-stone-50);
    cursor: pointer;
    text-align: start;
    transition: all 0.24s var(--gw-ease-out);
  }
  .gw-calc-tab:hover {
    background: var(--gw-surface);
    border-color: var(--gw-gold-light);
  }
  .gw-calc-tab.is-active {
    background: var(--gw-gold-soft);
    border-color: var(--gw-gold);
    box-shadow: var(--gw-shadow-xs);
  }
  .gw-calc-tab strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gw-ink);
    margin-bottom: 0.15rem;
  }
  .gw-calc-tab span {
    font-size: 0.78rem;
    color: var(--gw-ink-muted);
  }
  .gw-calc-tab.is-active span {
    color: var(--gw-gold-dark);
    font-weight: 600;
  }

  .gw-calc-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(1.4rem, 2.8vw, 2.35rem);
    align-items: stretch;
  }
  @media (max-width: 58rem) {
    .gw-calc-grid {
      grid-template-columns: 1fr;
    }
  }

  .gw-calc-controls {
    background: var(--gw-stone-50);
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius-lg);
    padding: clamp(1.2rem, 2.4vw, 1.8rem);
  }
  .gw-calc-summary {
    background:
      radial-gradient(circle at 90% 10%, rgba(182, 145, 85, 0.22), transparent 55%),
      linear-gradient(145deg var(--in-oklab), #FAF6EE 0%, #EFE6D5 100%);
    border: 1px solid var(--gw-gold-border);
    border-radius: var(--gw-radius-lg);
    padding: clamp(1.3rem, 2.4vw, 1.95rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .gw-calc-addons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 1.1rem;
  }
  @media (max-width: 38rem) {
    .gw-calc-addons {
      grid-template-columns: 1fr;
    }
  }
  .gw-addon-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.68rem 0.8rem;
    background: var(--gw-surface);
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius-sm);
    cursor: pointer;
    font-size: 0.81rem;
    line-height: 1.35;
    transition: border-color 0.2s var(--gw-ease-out), background-color 0.2s var(--gw-ease-out);
  }
  .gw-addon-check:hover {
    border-color: var(--gw-gold);
  }
  .gw-addon-check input[type="checkbox"] {
    margin-top: 0.15rem;
    accent-color: var(--gw-sage);
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }
  .gw-addon-check strong {
    display: block;
    color: var(--gw-ink);
    font-weight: 600;
  }
  .gw-addon-check span {
    color: var(--gw-gold-dark);
    font-weight: 600;
    font-size: 0.76rem;
  }

  .gw-calc-price-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(182, 145, 85, 0.24);
    border-radius: var(--gw-radius-md);
    padding: 1.2rem;
    margin-block: 0.95rem;
    box-shadow: var(--gw-shadow-xs);
  }
  .gw-calc-total-eur {
    font-family: var(--font-serif);
    font-size: clamp(2.1rem, 3.2vw, 2.75rem);
    font-weight: 700;
    color: var(--gw-ink);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
  }

  .gw-field {
    margin-bottom: 1.05rem;
  }
  .gw-field label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--gw-ink);
    margin-bottom: 0.38rem;
  }
  .gw-input, .gw-select, .gw-textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0.78rem 0.95rem;
    border-radius: var(--gw-radius-sm);
    border: 1px solid rgba(28, 36, 30, 0.15);
    background: var(--gw-surface);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--gw-ink);
    transition: border-color 0.2s var(--gw-ease-out), box-shadow 0.2s var(--gw-ease-out);
  }
  .gw-input:focus, .gw-select:focus, .gw-textarea:focus {
    outline: none;
    border-color: var(--gw-gold);
    box-shadow: 0 0 0 3px rgba(182, 145, 85, 0.16);
  }

  .gw-range {
    width: 100%;
    accent-color: var(--gw-gold);
    cursor: pointer;
    height: 6px;
  }

  /* ─── Contact & Date Availability Form ─────────────────────────────────── */
  #rezervaciya,
  #ogled,
  #gw-calculator,
  #video-reels,
  #svatbi-showcase,
  #napravleniya {
    scroll-margin-top: 6rem;
  }

  .gw-card.gw-prose {
    justify-content: flex-start;
    padding: clamp(1.35rem, 2.8vw, 2.35rem);
    gap: 0.65rem;
  }

  .gw-booking-split {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(1.65rem, 3.6vw, 3rem);
    align-items: stretch;
    margin-top: clamp(2.75rem, 5vw, 4.5rem);
    padding-top: clamp(2.25rem, 4vw, 3.5rem);
    border-top: 1px solid var(--gw-border);
  }
  @media (max-width: 60rem) {
    .gw-booking-split {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .gw-booking-aside {
    background: var(--gw-surface);
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius-xl);
    padding: clamp(1.45rem, 3vw, 2.5rem);
    box-shadow: var(--gw-shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .gw-card.gw-booking-card {
    background: linear-gradient(145deg var(--in-oklab), #FAF7F2 0%, #F1EAE0 100%);
    border: 1px solid var(--gw-gold-border);
    border-radius: var(--gw-radius-xl);
    padding: clamp(1.45rem, 3.2vw, 2.5rem);
    box-shadow: var(--gw-shadow-md);
    justify-content: flex-start;
    gap: 1.25rem;
  }

  .gw-form-row-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
  }
  @media (max-width: 40rem) {
    .gw-form-row-2 {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ─── Pricing Table ────────────────────────────────────────────────────── */
  .gw-table-wrap {
    overflow-x: auto;
    border-radius: var(--gw-radius-lg);
    border: 1px solid var(--gw-border);
    background: var(--gw-surface);
    box-shadow: var(--gw-shadow-xs);
  }
  .gw-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
  }
  .gw-table th {
    background: var(--gw-stone-50);
    color: var(--gw-ink);
    padding: 0.9rem 1.15rem;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    border-bottom: 1px solid var(--gw-border);
  }
  .gw-table td {
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--gw-border);
    font-size: 0.88rem;
    color: var(--gw-ink-secondary);
    font-variant-numeric: tabular-nums;
  }
  .gw-table tr:last-child td {
    border-bottom: none;
  }
  .gw-table tr:hover td {
    background: var(--gw-canvas);
  }

  /* ─── Process Steps, Reviews & Native <details> FAQ ────────────────────── */
  .gw-step-card {
    background: var(--gw-surface);
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius-lg);
    padding: 1.45rem;
    box-shadow: var(--gw-shadow-xs);
  }
  .gw-step-num {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: var(--gw-radius-pill);
    background: var(--gw-gold-soft);
    color: var(--gw-gold-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.84rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
  }

  .gw-faq-item {
    background: var(--gw-surface);
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius-md);
    margin-bottom: 0.65rem;
    overflow: hidden;
  }
  .gw-faq-item[open] {
    border-color: var(--gw-gold-border);
    box-shadow: var(--gw-shadow-xs);
  }
  .gw-faq-item summary {
    padding: 1rem 1.25rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.94rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--gw-ink);
  }
  .gw-faq-item summary::-webkit-details-marker {
    display: none;
  }
  .gw-faq-item summary::after {
    content: "+";
    font-size: 1.2rem;
    color: var(--gw-gold);
    font-weight: 600;
  }
  .gw-faq-item[open] summary::after {
    content: "−";
  }
  .gw-faq-body {
    padding: 0 1.25rem 1.1rem;
    color: var(--gw-ink-secondary);
    font-size: 0.89rem;
    line-height: 1.65;
  }

  /* ─── Page Hero & Single Package Showcase ──────────────────────────────── */
  .gw-page-hero {
    background:
      radial-gradient(circle at 80% 20%, rgba(182, 145, 85, 0.16), transparent 50%),
      linear-gradient(180deg var(--in-oklab), #FAF7F2 0%, #F1EAE0 100%);
    color: var(--gw-ink);
    padding-block: clamp(2.35rem, 4.2vw, 3.75rem);
    border-bottom: 1px solid var(--gw-border);
  }
  .gw-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--gw-ink-muted);
    margin-bottom: 0.7rem;
  }

  .gw-single-showcase {
    position: relative;
    border-radius: var(--gw-radius-lg);
    overflow: hidden;
    border: 1px solid var(--gw-border);
    margin-bottom: 1.65rem;
    background: linear-gradient(180deg, #F8F5EF 0%, #EFE8DC 100%);
    min-height: clamp(15rem, 42vw, 23rem);
    max-height: clamp(22rem, 66dvh, 36rem);
    padding: clamp(0.65rem, 1.8vw, 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    box-shadow: var(--gw-shadow-sm);
  }
  .gw-single-showcase-ambient {
    position: absolute;
    inset: -2rem;
    background-size: cover;
    background-position: center;
    filter: blur(36px) saturate(1.05) brightness(1.06);
    opacity: 0.28;
    pointer-events: none;
  }
  .gw-single-showcase-img {
    position: relative;
    z-index: 2;
    max-height: clamp(20rem, 62dvh, 34rem);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin-inline: auto;
    border-radius: var(--gw-radius-md);
    box-shadow: 0 10px 30px rgba(28, 36, 30, 0.14);
  }
  .gw-single-showcase-zoom {
    position: absolute;
    bottom: 0.85rem;
    right: 0.85rem;
    z-index: 3;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    color: var(--gw-ink);
    padding: 0.38rem 0.82rem;
    border-radius: var(--gw-radius-pill);
    font-size: 0.76rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  }

  /* ─── Vertical 9:16 Video Reels Cards ──────────────────────────────────── */
  @media (max-width: 42rem) {
    .gw-reels-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.85rem;
    }
  }
  @media (max-width: 24rem) {
    .gw-reels-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .gw-reel-card {
    position: relative;
    border-radius: var(--gw-radius-lg);
    overflow: hidden;
    background: #1C241E;
    border: 1px solid var(--gw-border);
    box-shadow: var(--gw-shadow-sm);
    cursor: pointer;
    transition:
      opacity 0.32s var(--gw-ease-out),
      translate 0.32s var(--gw-ease-out),
      box-shadow 0.32s var(--gw-ease-out),
      border-color 0.32s var(--gw-ease-out);
  }
  .gw-reel-card[hidden] {
    display: none !important;
  }
  .gw-reel-card:hover {
    translate: 0 -4px;
    box-shadow: var(--gw-shadow-md);
    border-color: var(--gw-gold-border);
  }
  .gw-reel-media {
    position: relative;
    aspect-ratio: 9 / 15;
    width: 100%;
    overflow: hidden;
    background: #1C241E;
  }
  .gw-reel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    scale: 1;
    transition: scale 0.6s var(--gw-ease-out);
  }
  .gw-reel-card:hover .gw-reel-video {
    scale: 1.03;
  }
  .gw-reel-badge {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 3;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    color: var(--gw-ink);
    padding: 0.28rem 0.7rem;
    border-radius: var(--gw-radius-pill);
    font-size: 0.71rem;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  }
  .gw-reel-play-btn {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 3;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    color: var(--gw-gold-dark);
    font-size: 0.84rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  }
  .gw-reel-overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 2.4rem 1rem 0.95rem;
    background: linear-gradient(180deg, rgba(20, 28, 22, 0) 0%, rgba(20, 28, 22, 0.86) 55%, rgba(20, 28, 22, 0.96) 100%);
    color: #FFFFFF;
  }
  .gw-reel-cat {
    display: inline-block;
    font-size: 0.69rem;
    font-weight: 600;
    color: #EAD2AC;
    margin-bottom: 0.22rem;
  }
  .gw-reel-title {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
    margin-bottom: 0.42rem;
  }
  .gw-reel-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.84);
  }
  .gw-reel-meta strong {
    color: #EAD2AC;
    font-weight: 600;
  }

  /* ─── Studio Lightbox <dialog> ─────────────────────────────────────────── */
  .gw-lightbox {
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius-lg);
    padding: 0;
    max-width: min(68rem, 94vw);
    width: 100%;
    background: var(--gw-surface);
    color: var(--gw-ink);
    box-shadow: var(--gw-shadow-lg);
    margin: auto;
    overflow: hidden;
  }
  .gw-lightbox::backdrop {
    background: rgba(20, 28, 22, 0.74);
    backdrop-filter: blur(10px);
  }
  .gw-lightbox-inner {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .gw-lightbox-stage {
    position: relative;
    background: linear-gradient(180deg, #F6F3EC 0%, #EAE1D3 100%);
    min-height: min(62vh, 32rem);
    max-height: 78vh;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .gw-lightbox-media {
    max-height: 75vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin-inline: auto;
    border-radius: var(--gw-radius-md);
    box-shadow: 0 10px 32px rgba(28, 36, 30, 0.15);
  }
  .gw-lightbox-media[hidden] {
    display: none !important;
  }
  .gw-lightbox-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    background: rgba(255, 255, 255, 0.94);
    color: var(--gw-ink);
    border: 1px solid rgba(28, 36, 30, 0.12);
    border-radius: 999px;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 12;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  }
  .gw-lightbox-nav {
    position: absolute;
    top: 42%;
    translate: 0 -50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--gw-ink);
    border: 1px solid rgba(28, 36, 30, 0.12);
    border-radius: 999px;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }
  .gw-lightbox-nav.is-prev { left: 0.85rem; }
  .gw-lightbox-nav.is-next { right: 0.85rem; }
  .gw-lightbox-nav[hidden] {
    display: none !important;
  }
  .gw-lightbox-footer {
    padding: 1.1rem 1.45rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #FFFFFF;
    border-top: 1px solid var(--gw-border);
  }

  /* ─── Footer & Sticky Mobile Quick-Action Bar ──────────────────────────── */
  .gw-footer {
    background: linear-gradient(180deg var(--in-oklab), #F3EDE3 0%, #E8DFD1 100%);
    color: var(--gw-ink-secondary);
    padding-top: 3.75rem;
    padding-bottom: 2.5rem;
    margin-top: auto;
    border-top: 1px solid var(--gw-border);
  }
  .gw-footer h4 {
    color: var(--gw-ink);
    font-size: 0.94rem;
    font-weight: 700;
    margin-bottom: 0.95rem;
  }
  .gw-footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.52rem;
    font-size: 0.87rem;
  }
  .gw-footer-links a:hover {
    color: var(--gw-gold-dark);
  }

  .gw-mobile-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 95;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--gw-border);
    padding: 0.55rem 0.7rem;
    grid-template-columns: 1fr 1fr 1.18fr;
    gap: 0.45rem;
    box-shadow: 0 -4px 20px rgba(28, 36, 30, 0.07);
  }
  @media (max-width: 48rem) {
    .gw-mobile-bar {
      display: grid;
    }
    body {
      padding-bottom: 4.25rem;
    }
  }

  /* ─── Gentle Scroll-Reveal Animation ───────────────────────────────────── */
  .gw-reveal {
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 0.55s var(--gw-ease-out),
      translate 0.55s var(--gw-ease-out);
  }
  .js-gw-anim .gw-reveal:not(.is-visible) {
    @media (prefers-reduced-motion: no-preference) {
      opacity: 0;
      translate: 0 16px;
    }
  }
}

@layer utilities {
  .gw-text-gold { color: var(--gw-gold-dark); }
  .gw-text-sage { color: var(--gw-sage); }
  .gw-text-center { text-align: center; }
}