:root {
  --stage-width: 1200px;
  --black: #000;
  --gold: #d6bd82;
  --gold-soft: rgba(214, 189, 130, 0.2);
  --focus: rgba(196, 153, 83, 0.75);
  --mob-section-height: 78vh;     /* per-section cap on mobile */
  --mob-header-height: 56px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--black); }

body {
  margin: 0;
  background: var(--black);
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  overflow-x: hidden;
}

.site-shell {
  width: 100%;
  background: var(--black);
}

img { -webkit-user-drag: none; user-select: none; }


/* ═══════════════════════════════════════════════════════
   LAYOUT SWITCHING
   ═══════════════════════════════════════════════════════ */
.mobile-layout { display: none; }
.mob-nav-toggle { display: none; }

@media (max-width: 768px) {
  .desktop-layout { display: none !important; }
  .mobile-layout  { display: block !important; }
}


/* ═══════════════════════════════════════════════════════
   DESKTOP STYLES (>768px) — unchanged from v5.3
   ═══════════════════════════════════════════════════════ */
.visual-section {
  position: relative;
  top: auto;
  width: 100%;
  max-width: var(--stage-width);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  line-height: 0;
  background: var(--black);
  pointer-events: none;
}

.desktop-layout > *:nth-child(1)  { z-index:  10; }
.desktop-layout > *:nth-child(2)  { z-index:  20; }
.desktop-layout > *:nth-child(3)  { z-index:  30; }
.desktop-layout > *:nth-child(4)  { z-index:  55; }
.desktop-layout > *:nth-child(5)  { z-index:  50; }
.desktop-layout > *:nth-child(6)  { z-index:  60; }
.desktop-layout > *:nth-child(7)  { z-index:  70; }
.desktop-layout > *:nth-child(8)  { z-index:  80; }
.desktop-layout > *:nth-child(9)  { z-index:  90; }
.desktop-layout > *:nth-child(10) { z-index: 100; }
.desktop-layout > *:nth-child(11) { z-index: 110; }
.desktop-layout > *:nth-child(12) { z-index: 120; }
.desktop-layout > *:nth-child(13) { z-index: 130; }
.desktop-layout > *:nth-child(14) { z-index: 140; }
.desktop-layout > *:nth-child(15) { z-index: 150; }
.desktop-layout > *:nth-child(16) { z-index: 160; }
.desktop-layout > *:nth-child(17) { z-index: 170; }
.desktop-layout > *:nth-child(18) { z-index: 180; }
.desktop-layout > *:nth-child(19) { z-index: 190; }
.desktop-layout > *:nth-child(20) { z-index: 200; }

.visual-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 20px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
  pointer-events: none;
  z-index: 1;
}
.header-section::before { display: none; }

.section-art {
  display: block;
  width: 100%;
  height: auto;
  margin: 0; padding: 0; border: 0;
  position: relative;
  z-index: 0;
  pointer-events: none !important;
}

.hero-layer {
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
  left: 0;
  pointer-events: none !important;
}
.hero-bg   { top: 0; z-index: 1; }
.hero-copy { top: 0; z-index: 2; opacity: 1 !important; }

.header-section        { aspect-ratio: 1200 / 112; }
.menu-hero-divider     { aspect-ratio: 1200 / 112; }
.hero-section          { aspect-ratio: 1200 / 900; }
.hero-offer-section    { aspect-ratio: 1200 / 450; }
.connector-section     { aspect-ratio: 1200 / 112; }
.ornament-section      { aspect-ratio: 1200 / 112; }
.showcase-section      { aspect-ratio: 1200 / 450; }
.services-section      { aspect-ratio: 1200 / 900; }
.cta-project-section   { aspect-ratio: 1200 / 225; }
.fast-offer-section    { aspect-ratio: 1200 / 450; }
.dracula-case-section  { aspect-ratio: 1200 / 900; }
.certificate-section   { aspect-ratio: 1200 / 900; }
.ai-disclosure-section { aspect-ratio: 1200 / 900; }
.final-cta-section     { aspect-ratio: 1200 / 225; }


/* ═══════════════════════════════════════════════════════
   SHARED HOTSPOT BASE
   ═══════════════════════════════════════════════════════ */
.hotspot {
  position: absolute;
  display: block;
  z-index: 2147483647;
  pointer-events: auto !important;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.hotspot:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  background: rgba(196,153,83,0.08);
}


/* ═══════════════════════════════════════════════════════
   DESKTOP HOTSPOT POSITIONS
   ═══════════════════════════════════════════════════════ */
.menu-work      { left:37.0%; top:12%; width: 8.0%; height:55%; }
.menu-services  { left:26.0%; top:12%; width: 9.5%; height:55%; }
.menu-case-one  { left:48.0%; top:12%; width:12.0%; height:55%; }
.menu-start     { left:63.5%; top:0%;  width:21.0%; height:92%; }

.hero-claim    { left:26.5%; top:55%; width:30.0%; height:20%; }
.hero-services { left:58.0%; top:55%; width:16.0%; height:20%; }

.package-fast   { left:12.8%; top:95.3%; width:12.4%; height:4.2%; }
.package-launch { left:43.9%; top:95.3%; width:12.4%; height:4.2%; }
.package-brand  { left:75.2%; top:95.3%; width:12.4%; height:4.2%; }

.cta-project-left  { left:16.7%; top:25.5%; width:24.4%; height:50.0%; }
.cta-project-right { left:52.7%; top:24.0%; width:27.8%; height:51.0%; }

.fast-offer-hotspot    { left:25.0%; top:15.0%; width:50.0%; height:72.0%; }
.dracula-case-hotspot  { left:66.0%; top: 8.7%; width:25.4%; height:19.0%; }
.certificate-hotspot   { left:15.9%; top:56.5%; width:39.6%; height:15.0%; }
.ai-disclosure-hotspot { left:40.2%; top:18.0%; width:34.0%; height:64.0%; }
.final-cta-left  { left:19.6%; top:24.0%; width:26.5%; height:51.0%; }
.final-cta-right { left:49.5%; top:29.0%; width:31.0%; height:45.0%; }


/* ═══════════════════════════════════════════════════════
   MOBILE STYLES (≤768px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  body {
    padding-top: var(--mob-header-height);
  }

  /* ─── HAMBURGER HEADER ─────────────────────────── */
  .mob-header {
    position: fixed;
  top: 13px; left: 0; right: 0;
    height: var(--mob-header-height);
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--gold-soft);
  }
  section.mob-section.mob-fast-offer.wk-visible

 {
    aspect-ratio: inherit;
}
   section.mob-section.mob-fast-offer.abajo.wk-visible {
      
        padding-bottom: 40px;
        padding-top: 40px;
	}

  .mob-brand {
    color: var(--gold);
    text-decoration: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    letter-spacing: 2.5px;
    font-weight: 700;
    pointer-events: auto;
  }

  /* Hamburger icon (3 lines → X animation) */
  .mob-burger {
	          top: -17px;
    position: relative;
    width: 32px;
    height: 24px;
    cursor: pointer;
    z-index: 10000;
    pointer-events: auto;
    display: block;
  }
  .mob-burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gold);
    transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease, bottom 0.3s ease;
    border-radius: 1px;
  }
  .mob-burger span:nth-child(1) { top: 4px; }
  .mob-burger span:nth-child(2) { top: 11px; }
  .mob-burger span:nth-child(3) { top: 18px; }

  /* Burger → X when checkbox is checked */
  .mob-nav-toggle:checked ~ .mob-header .mob-burger span:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
  }
  .mob-nav-toggle:checked ~ .mob-header .mob-burger span:nth-child(2) {
    opacity: 0;
  }
  .mob-nav-toggle:checked ~ .mob-header .mob-burger span:nth-child(3) {
    top: 11px;
    transform: rotate(-45deg);
  }

  /* Nav menu (slides down) */
  .mob-nav {
    position: fixed;
    top: var(--mob-header-height);
    left: 0; right: 0;
    background: rgba(0, 0, 0, 0.98);
    border-bottom: 1px solid var(--gold-soft);
    display: flex;
    flex-direction: column;
    transform: translateY(-110%);
    transition: transform 0.35s ease;
    z-index: 9998;
    pointer-events: none;
  }
  .mob-nav-toggle:checked ~ .mob-header .mob-nav {
    transform: translateY(0);
    pointer-events: auto;
  }
  
  section.mob-section.mob-hero-bg {
    width: 100%;
}
  section.mob-section.mob-hourglass

 {
    width: 100%;
}
section.mob-section.mob-cta-buttons

 {
    aspect-ratio: inherit;
}

  .mob-nav-link {
    color: var(--gold);
    text-decoration: none;
    padding: 18px 24px;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: Georgia, "Times New Roman", serif;
    border-bottom: 1px solid var(--gold-soft);
    transition: background 0.2s, color 0.2s;
  }
  .mob-nav-link:active,
  .mob-nav-link:hover {
    background: rgba(214, 189, 130, 0.08);
  }
  .mob-nav-link:last-child {
    border-bottom: none;
  }
  .mob-nav-cta {
    color: #fff;
    background: linear-gradient(180deg, #5a1818 0%, #3a0d0d 100%);
    font-weight: 700;
    text-align: center;
    border-bottom: none;
  }
  .mob-nav-cta:active,
  .mob-nav-cta:hover {
    background: linear-gradient(180deg, #6a1f1f 0%, #4a1414 100%);
  }

  /* Overlay backdrop when menu open */
  .mob-nav-overlay {
    position: fixed;
    inset: var(--mob-header-height) 0 0 0;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9997;
  }
  .mob-nav-toggle:checked ~ .mob-header .mob-nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* ─── MOBILE SECTIONS ─────────────────────────── */
  .mob-section {
    position: relative;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    line-height: 0;
    background: var(--black);
    overflow: hidden;
    /* Aspect ratio matches image so hotspot %s stay accurate, BUT capped at 78vh */
    aspect-ratio: 450 / 800;
  
  }
section.mob-section.mob-pkg-launch.wk-visible {
    aspect-ratio: 450 / 690;
}
section.mob-section.mob-pkg-brand.wk-visible

 {
	    aspect-ratio: 450 / 690;
}
section.mob-section.mob-media-badge.wk-visible {
	 aspect-ratio: 450 / 690;
}
section.mob-section.mob-hero-bg.wk-visible {
    aspect-ratio: inherit;
    /* aspect-ratio: 450 / 600; */
    padding-bottom: 50px;
}
  .mob-art {
    display: block;
    width: 100%;
    height: 107%;
    object-fit: contain;
    object-position: center;
    margin: 0; padding: 0; border: 0;
    pointer-events: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  /* When max-height clips the section, center the (now narrower) section */
  .mob-section {
    display: flex;
    align-items: center;
    justify-content: center;
  }


  /* ─── MOBILE HOTSPOT POSITIONS (% of mob-section) ───── */
  /* 6 · CTA buttons */
  .mob-claim-btn         { left:6%;  top:35%; width:88%; height:10%; }
  .mob-view-services-btn { left:16%; top:51%; width:64%; height:9%;  }

  /* 9 · Fast Asset package */
  .mob-pkg-fast-btn   { left:22%; top:92%; width:56%; height:6%; }

  /* 10 · Launch Cabinet package */
  .mob-pkg-launch-btn { left:22%; top:92%; width:56%; height:6%; }

  /* 11 · Brand Cabinet package */
  .mob-pkg-brand-btn  { left:22%; top:92%; width:56%; height:6%; }

  /* 20 · CTA Project Form */
  .mob-cta-project-top    { left:12%; top:7%;  width:76%; height:32%; }
  .mob-cta-project-bottom { left:12%; top:56%; width:76%; height:30%; }

  /* 21 · Fast Horror Assets detailed */
  .mob-fast-detailed-btn { left:6%; top:24%; width:88%; height:50%; }

  /* 23 · Dracula case study button */
  .mob-dracula-btn { left:18%; top:3%; width:64%; height:11%; }

  /* 24 · Certificate */
  .mob-certificate-btn { left:10%; top:78%; width:80%; height:7%; }

  /* 27 · AI disclosure text */
  .mob-ai-btn { left:5%; top:6%; width:90%; height:85%; }

  /* 28 · Final CTA */
  .mob-final-top    { left:12%; top:13%; width:76%; height:22%; }
  .mob-final-bottom { left:8%;  top:67%; width:84%; height:14%; }


  /* ─── EXTRA SMALL PHONES (<400px) ─────────────────── */
  @media (max-width: 400px) {
    :root { --mob-section-height: 75vh; }
    .mob-brand { font-size: 12px; letter-spacing: 2px; }
    .mob-nav-link { padding: 16px 20px; font-size: 15px; }
  }

  /* ─── LANDSCAPE PHONES (short height) ────────────── */
  @media (orientation: landscape) and (max-height: 500px) {
    :root { --mob-section-height: 90vh; }
  }

  /* ─── TABLET RANGE (601–768px) ────────────────────── */
  @media (min-width: 601px) and (max-width: 768px) {
    .mob-section {
      max-width: 520px;
    }
  }
}


/* ═══════════════════════════════════════════════════════
   ACCESSIBILITY & REDUCED MOTION
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1200px) { body { overflow-x: hidden; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .section-art, .hero-copy, .mob-art,
  .mob-nav, .mob-burger span, .mob-nav-overlay {
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════
   PAGE VEIL — the darkness lifts
   A full-screen black veil dissolves when the page is
   ready, as if adjusting to light in a darkened room.
   ═══════════════════════════════════════════════════════ */
#site-veil {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 999999;
  opacity: 1;
  pointer-events: none;
  /* slow, deliberate ease — like a fog slowly dissipating */
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.6, 1);
}
#site-veil.wk-lifted {
  opacity: 0;
}


/* ═══════════════════════════════════════════════════════
   SCROLL REVEAL — sections materialise from darkness
   Scoped to .wk-js so without JavaScript everything
   stays fully visible — never a blank white screen.
   ═══════════════════════════════════════════════════════ */
.wk-js .visual-section,
.wk-js .mob-section {
  opacity: 0;
  transition: opacity 1.1s ease;
}
.wk-js .visual-section.wk-visible,
.wk-js .mob-section.wk-visible {
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════
   REDUCED MOTION — instant reveal, no animation
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #site-veil {
    transition: none !important;
  }
  .wk-js .visual-section,
  .wk-js .mob-section {
    opacity: 1 !important;
    transition: none !important;
  }
}