:root {
    --bg: #080810;
    --bg2: #0d0d1a;
    --fg: #f0eee8;
    --fg-dim: #9896a0;
    --accent: #c8a96e;
    --accent2: #7b5cff;
    --accent3: #e8c4f0;
    --red: #d94040;
    --border: rgba(200, 169, 110, 0.18);
    --font-display: 'Cormorant Garamond', serif;
    --font-sans: 'Syne', sans-serif;
    /* --font-mono removed — using font-sans for all labels */
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    font-size: 16px;
  }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    overflow-x: hidden;
    cursor: none;
  }

  /* CUSTOM CURSOR */
  .cursor {
    position: fixed;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.1s, width 0.3s, height 0.3s, background 0.3s;
    mix-blend-mode: difference;
  }

  .cursor-ring {
    position: fixed;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(200, 169, 110, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: transform 0.18s ease, width 0.3s, height 0.3s, opacity 0.3s;
  }

  .cursor.hover {
    width: 20px;
    height: 20px;
    background: var(--accent2);
  }

  .cursor-ring.hover {
    width: 72px;
    height: 72px;
    opacity: 0.4;
  }

  /* NOISE OVERLAY */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
  }

  /* NAV */
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 201;
    padding: 28px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transform: none !important;
    transition: background 0.4s, padding 0.4s;
  }

  nav.scrolled {
    background: rgba(8, 8, 16, 0.92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
  }

  .nav-logo {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    color: var(--fg);
    text-decoration: none;
    text-transform: uppercase;
  }

  .nav-links {
    display: flex;
    gap: 40px;
    list-style: none;
  }

  .nav-links a {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-dim);
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
  }

  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.3s;
  }

  .nav-links a:hover {
    color: var(--fg);
  }

  .nav-links a:hover::after {
    width: 100%;
  }

  .nav-book {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--accent);
    padding: 10px 24px;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
  }

  .nav-book:hover {
    background: var(--fg);
  }

  /* HERO */
  #hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    padding: 40px 80px 0;
    overflow: hidden;
  }



  .hero-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 80% at 65% 40%, rgba(123, 92, 255, 0.18) 0%, transparent 70%),
      radial-gradient(ellipse 40% 40% at 20% 80%, rgba(200, 169, 110, 0.06) 0%, transparent 60%),
      linear-gradient(160deg, #0d0820 0%, #080810 50%, #0d0a1a 100%);
  }

  .hero-grid-line {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(200, 169, 110, 0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(200, 169, 110, 0.04) 1px, transparent 1px);
    background-size: 80px 80px;
  }

  .hero-label {
    position: absolute;
    top: 120px;
    right: 48px;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: var(--fg-dim);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 10;
  }

  /* Ghost word — absolute inside hero-stack, so it centres behind the images */
  .hero-word-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: clamp(4rem, 9vw, 11rem);
    font-weight: 300;
    letter-spacing: 0.18em;
    color: rgba(200, 169, 110, 0.22);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    opacity: 0;
    transition: opacity 1.4s 0.08s ease;
    will-change: transform;
  }

  /* ── AMBIENT ORB ─────────────────────────────────────────── */
  .hero-orb {
    position: absolute;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123, 92, 255, 0.09) 0%, transparent 65%);
    top: -180px;
    right: -40px;
    pointer-events: none;
    z-index: 1;
    animation: orbFloat 14s ease-in-out infinite;
  }

  @keyframes orbFloat {

    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }

    38% {
      transform: translate(-70px, 80px) scale(1.07);
    }

    72% {
      transform: translate(40px, 140px) scale(0.94);
    }
  }

  /* Content — left column */
  .hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 0 80px;
    max-width: 600px;
  }

  .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 28px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s 0.15s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hero-tag::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--accent);
  }

  .hero-h1 {
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 8vw, 9rem);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--fg);
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 1s 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hero-h1 em {
    font-style: italic;
    color: var(--accent3);
  }

  .hero-h1 .accent-word {
    color: transparent;
    -webkit-text-stroke: 1px rgba(200, 169, 110, 0.6);
  }

  .hero-desc {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    color: var(--fg-dim);
    line-height: 1.9;
    max-width: 280px;
    margin-top: 32px;
    margin-bottom: 52px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s 0.44s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s 0.44s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s 0.62s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Stacked images — right column */
  .hero-stack {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Wrapper: explicit size, flex-centered in hero-stack */
  .hero-imgs {
    position: relative;
    width: 295px;
    height: 430px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.1s 0s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s 0s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
  }

  /* Both images fill the exact same box — rotation alone creates the stack effect */
  .hero-img-back,
  .hero-img-front {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  /* Back: identical to mobile — rotation only, no scale */
  .hero-img-back {
    z-index: 1;
    transform: rotate(-6deg);
    border: 1px solid rgba(200, 169, 110, 0.35);
  }

  /* Front: matching tilt to complete the polaroid stack */
  .hero-img-front {
    z-index: 2;
    transform: rotate(5deg);
    box-shadow:
      0 0 0 1px rgba(123, 92, 255, 0.22),
      0 24px 60px rgba(0, 0, 0, 0.55);
  }

  .hero-img-back img,
  .hero-img-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  .btn-primary {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--accent);
    padding: 14px 32px;
    text-decoration: none;
    border: none;
    cursor: none;
    transition: background 0.3s, transform 0.3s;
    display: inline-block;
  }

  .btn-primary:hover {
    background: var(--fg);
    transform: translateY(-2px);
  }

  .btn-outline {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-dim);
    background: transparent;
    padding: 14px 32px;
    text-decoration: none;
    border: 1px solid var(--border);
    cursor: none;
    transition: color 0.3s, border-color 0.3s, transform 0.3s;
    display: inline-block;
  }

  .btn-outline:hover {
    color: var(--fg);
    border-color: var(--accent);
    transform: translateY(-2px);
  }

  .hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: var(--fg-dim);
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.9s 0.9s ease;
  }

  /* Hero visible state — triggered by JS when hero section enters viewport */
  #hero.hero-in-view .hero-tag,
  #hero.hero-in-view .hero-h1,
  #hero.hero-in-view .hero-desc,
  #hero.hero-in-view .hero-ctas,
  #hero.hero-in-view .hero-imgs {
    opacity: 1;
    transform: translateY(0);
  }

  #hero.hero-in-view .hero-word-bg,
  #hero.hero-in-view .hero-scroll {
    opacity: 1;
  }

  .scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    animation: scrollPulse 2s 2s infinite;
  }

  /* MARQUEE */
  .marquee-wrap {
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 18px 0;
    background: var(--bg2);
  }

  .marquee-track {
    display: flex;
    gap: 0;
    animation: marquee 20s linear infinite;
    white-space: nowrap;
  }

  .marquee-item {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--fg-dim);
    padding: 0 40px;
    flex-shrink: 0;
  }

  .marquee-item .dot {
    color: var(--accent);
    margin-left: 40px;
  }

  /* SECTION BASE */
  section {
    position: relative;
    z-index: 2;
  }

  .section-label {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    color: var(--accent);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 48px;
  }

  .section-label::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--accent);
    flex-shrink: 0;
  }

  .section-h2 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .section-h2 em {
    font-style: italic;
    color: var(--accent3);
  }

  /* ── WORKS ──────────────────────────────────────────────── */
  #works {
    padding: 120px 48px;
    background: var(--bg);
    position: relative;
    /* anchor pour le canvas grain */
  }

  .works-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 72px;
    gap: 40px;
  }

  .works-header-left {
    flex-shrink: 0;
  }

  .works-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    max-width: 320px;
  }

  .works-subtitle {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--fg-dim);
    line-height: 1.8;
    text-align: right;
    margin: 0;
  }

  .works-count {
    font-family: var(--font-sans);
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(200, 169, 110, 0.4);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .works-count::before {
    content: '';
    width: 24px;
    height: 1px;
    background: rgba(200, 169, 110, 0.3);
  }

  /* ── Works Filter ────────────────────────────────────────────── */
  .works-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 48px 52px;
    flex-wrap: wrap;
  }

  .wf-btn {
    font-family: var(--font-sans);
    font-size: 0.56rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-dim);
    background: transparent;
    border: 1px solid rgba(200, 169, 110, 0.18);
    padding: 7px 18px;
    cursor: none;
    border-radius: 2px;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  }

  .wf-btn:hover {
    color: var(--fg);
    border-color: rgba(200, 169, 110, 0.48);
    background: rgba(200, 169, 110, 0.04);
  }

  .wf-btn.wf-active {
    color: var(--accent);
    border-color: rgba(200, 169, 110, 0.65);
    background: rgba(200, 169, 110, 0.08);
  }

  /* ── THE ARCHIVE — drag-to-scroll film strip ─────────────────── */
  .works-film {
    margin: 0 -48px;
    overflow: hidden;
    padding: 48px 48px 96px;
    cursor: grab;
    user-select: none;
  }

  .works-film.dragging {
    cursor: grabbing;
  }

  .works-track {
    display: flex;
    align-items: flex-end;
    width: max-content;
    will-change: transform;
  }

  .works-end-cap {
    flex-shrink: 0;
    width: 140px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wec-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
  }

  .wec-bar {
    display: block;
    width: 2px;
    border-radius: 2px;
    background: rgba(200, 169, 110, 0.28);
  }

  .wec-bar:nth-child(1) { height: 16px; }
  .wec-bar:nth-child(2) { height: 34px; }
  .wec-bar:nth-child(3) { height: 10px; }
  .wec-bar:nth-child(4) { height: 44px; }
  .wec-bar:nth-child(5) { height: 22px; }

  /* Card: 2:3 portrait, soft desaturate at rest, curtain reveal */
  .work-card {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    aspect-ratio: 2 / 3;
    background: var(--bg2);
    filter: saturate(0.80);
    clip-path: inset(0 100% 0 0);
    /* transform handled entirely by JS RAF — no CSS transition on it */
    transition:
      filter 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.38s ease;
  }

  /* Desktop card widths — center card taller via wider width + 2:3 ratio */
  .wc-1 {
    width: 308px;
    margin-right: 28px;
  }

  .wc-2 {
    width: 288px;
    margin-right: 20px;
  }

  .wc-3 {
    width: 320px;
    margin-right: 34px;
    filter: saturate(1.0);
  }

  .wc-4 {
    width: 294px;
    margin-right: 22px;
  }

  .wc-5 {
    width: 314px;
  }

  /* Hover: filter + shadow only — transform (lift + tilt) handled by JS RAF */
  .work-card:hover {
    filter: saturate(1.08) brightness(1.06) contrast(1.02);
    box-shadow: 0 24px 60px rgba(200, 169, 110, 0.18), 0 6px 20px rgba(0, 0, 0, 0.50);
    z-index: 10;
  }

  /* Bottom gold line */
  .work-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 5;
  }

  .work-card:hover::after {
    width: 100%;
  }

  /* Film grain — animated SVG noise overlay */
  .work-card::before {
    content: '';
    position: absolute;
    inset: -80%;
    width: 260%;
    height: 260%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.07;
    z-index: 9;
    pointer-events: none;
    mix-blend-mode: overlay;
    animation: grainShift 0.38s steps(2) infinite;
  }

  @keyframes grainShift {
    0% {
      transform: translate(0, 0);
    }

    50% {
      transform: translate(-3%, -5%);
    }

    100% {
      transform: translate(4%, 2%);
    }
  }

  /* Large editorial number — parallax bg */
  .wnum-bg {
    position: absolute;
    bottom: -18px;
    left: -10px;
    font-family: var(--font-display);
    font-size: clamp(7rem, 10vw, 11rem);
    font-weight: 100;
    line-height: 1;
    color: rgba(200, 169, 110, 0.07);
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    user-select: none;
    transition: color 1.0s;
  }

  .work-card:hover .wnum-bg {
    color: rgba(200, 169, 110, 0.16);
  }

  /* Video layer — oversized wrap gives parallax room to shift */
  .work-vid-wrap {
    position: absolute;
    inset: -12%;
    background: var(--bg2);
    will-change: transform;
  }

  .work-vid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .work-card:hover .work-vid {
    transform: scale(1.10);
  }

  /* ── Filter hide states ──────────────────────────────────────── */
  .work-card.wc-out {
    opacity: 0;
    pointer-events: none;
  }

  .work-card.wc-hidden {
    width: 0 !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    pointer-events: none;
  }

  /* ── Play overlay ────────────────────────────────────────────── */
  .work-play-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.45s ease;
  }

  .work-play-btn {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1.5px solid rgba(200, 169, 110, 0.65);
    background: rgba(8, 8, 16, 0.52);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200, 169, 110, 0.90);
    flex-shrink: 0;
    transition: border-color 0.35s ease, background 0.35s ease;
  }

  .work-play-btn svg {
    position: relative;
    z-index: 2;
    margin-left: 3px;
  }

  .wplay-ring {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 110, 0.38);
    animation: wplayRipple 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .wplay-ring:nth-child(2) { animation-delay: 0.92s; }
  .wplay-ring:nth-child(3) { animation-delay: 1.84s; }

  @keyframes wplayRipple {
    0%   { transform: scale(1);   opacity: 0.62; }
    100% { transform: scale(2.5); opacity: 0; }
  }

  .work-play-overlay.is-playing {
    opacity: 0;
  }

  .work-card:hover .work-play-btn {
    border-color: rgba(200, 169, 110, 0.88);
    background: rgba(8, 8, 16, 0.68);
  }

  /* Gradient overlay */
  .work-gradient {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(8, 8, 16, 0.95) 0%, rgba(8, 8, 16, 0.26) 36%, transparent 62%),
      linear-gradient(to bottom, rgba(8, 8, 16, 0.28) 0%, transparent 22%);
    z-index: 2;
  }

  /* Top bar */
  .work-card-top {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
  }

  .work-type-tag {
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--accent);
    padding: 4px 10px;
  }

  .work-yr {
    font-family: var(--font-sans);
    font-size: 0.52rem;
    letter-spacing: 0.14em;
    color: rgba(240, 238, 232, 0.4);
  }

  /* Bottom info */
  .work-card-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 18px 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    z-index: 3;
  }

  .work-card-info {
    flex: 1;
    min-width: 0;
  }

  .work-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--fg);
    line-height: 1.2;
    margin-bottom: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Genre appears on hover — spaced gold caps */
  .work-genre {
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.45s 0.08s, transform 0.45s 0.08s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .work-card:hover .work-genre {
    opacity: 1;
    transform: translateY(0);
  }

  .work-arrow {
    font-size: 1rem;
    color: rgba(240, 238, 232, 0.25);
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s;
    display: block;
  }

  .work-card:hover .work-arrow {
    transform: translate(4px, -4px);
    color: var(--accent);
  }

  /* Cursor ●PLAY label */
  #cursorPlay {
    position: fixed;
    pointer-events: none;
    font-family: var(--font-sans);
    font-size: 0.45rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg);
    background: rgba(8, 8, 16, 0.88);
    border: 1px solid rgba(200, 169, 110, 0.5);
    padding: 5px 10px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 9002;
    white-space: nowrap;
    transform: translate(14px, -100%);
  }

  #cursorPlay.show {
    opacity: 1;
  }

  /* ABOUT */
  #about {
    padding: 140px 48px;
    background: var(--bg2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    overflow: clip;
  }

  .about-visual {
    position: sticky;
    top: 100px;
  }

  .about-imgs-wrap {
    position: relative;
    will-change: transform;
    transform-origin: center center;
    transform-style: preserve-3d;
  }

  .about-img-word {
    display: none;
  }

  .about-imgs {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 2/3;
    margin: 0 auto 28px;
    z-index: 1;
  }

  .about-img-third,
  .about-img-second,
  .about-img-first {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  /* Back-left — JS drives transform + opacity via Lissajous float */
  .about-img-third {
    z-index: 1;
    opacity: 0;
    filter: brightness(0.68);
    border: 1px solid rgba(200, 169, 110, 0.55);
    box-shadow:
      -6px 14px 32px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(200, 169, 110, 0.28);
    will-change: transform, opacity;
    transition: filter 0.5s ease, border-color 0.5s ease;
  }

  /* Back-right — JS drives transform + opacity */
  .about-img-second {
    z-index: 2;
    opacity: 0;
    filter: brightness(0.68);
    border: 1px solid rgba(200, 169, 110, 0.55);
    box-shadow:
      6px 14px 32px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(200, 169, 110, 0.28);
    will-change: transform, opacity;
    transition: filter 0.5s ease, border-color 0.5s ease;
  }

  .about-img-first {
    z-index: 3;
    transform: rotate(-0.5deg);
    box-shadow:
      0 0 0 1px rgba(123, 92, 255, 0.22),
      0 24px 60px rgba(0, 0, 0, 0.55);
    will-change: box-shadow;
  }

  /* Hover: both back layers brighten equally */
  .about-imgs:hover .about-img-third,
  .about-imgs:hover .about-img-second {
    filter: brightness(0.72);
    border-color: rgba(200, 169, 110, 0.45);
  }

  /* Artsy corner brackets — wedding/music portrait feel */
  .about-imgs::before,
  .about-imgs::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: rgba(200, 169, 110, 0.48);
    border-style: solid;
    pointer-events: none;
    z-index: 5;
    transition: border-color 0.5s ease;
  }
  .about-imgs::before {
    top: -6px;
    left: -9px;
    border-width: 1px 0 0 1px;
  }
  .about-imgs::after {
    bottom: -7px;
    right: -9px;
    border-width: 0 1px 1px 0;
  }
  .about-imgs:hover::before,
  .about-imgs:hover::after {
    border-color: rgba(200, 169, 110, 0.80);
  }

  .about-img-third img,
  .about-img-second img,
  .about-img-first img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  .about-img-cta {
    display: flex;
    justify-content: center;
    margin-top: 8px;
    position: relative;
    z-index: 1;
  }

  /* Monogram bar below image — visible bar + AS initials */
  .about-monogram {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 30px 4px 0;
  }

  .about-mono-line {
    flex: 1;
    height: 4px;
    background: linear-gradient(to right, transparent, rgba(200, 169, 110, 0.50) 35%, rgba(200, 169, 110, 0.50) 65%, transparent);
  }

  .about-mono-initials {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 300;
    letter-spacing: 0.52em;
    color: var(--accent);
    opacity: 0.60;
    padding-right: 0.52em;
    text-transform: uppercase;
  }

  /* Vertical label along right edge of image column */
  .about-side-label {
    position: absolute;
    right: -46px;
    top: 46%;
    transform: translateY(-50%) rotate(90deg);
    font-family: var(--font-sans);
    font-size: 0.44rem;
    letter-spacing: 0.28em;
    color: rgba(200, 169, 110, 0.24);
    white-space: nowrap;
    text-transform: uppercase;
    pointer-events: none;
  }

  .about-deco-line {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 1px;
    height: 100px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    opacity: 0.55;
  }

  .about-deco-dot {
    position: absolute;
    bottom: -12px;
    left: 40px;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(200, 169, 110, 0.16);
    border-radius: 50%;
  }

  /* .about-text {} */
  .about-bio {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--fg);
    margin-top: 10px;
    margin-bottom: 44px;
    font-style: italic;
  }

  .about-detail {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--fg-dim);
    line-height: 2;
    margin-bottom: 56px;
  }

  .about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(200, 169, 110, 0.14);
    margin-bottom: 48px;
    overflow: hidden;
  }

  .stat-item {
    padding: 22px 18px 20px;
    display: flex;
    flex-direction: column;
  }

  .stat-item:first-child { padding-left: 10px; }
  .stat-item:last-child  { padding-right: 0; }

  .stat-item + .stat-item {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
  }

  .stat-idx {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.42rem;
    letter-spacing: 0.26em;
    color: rgba(200, 169, 110, 0.28);
    margin-bottom: 12px;
  }

  /* ── Split-flap stat counters ── */
  .stat-counter {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 16px;
  }

  .sf-group {
    display: flex;
    gap: 3px;
  }

  .sf-window {
    position: relative;
    width: 62px;
    height: 76px;
    overflow: hidden;
    /* border-radius: 5px; */
    background: rgba(12, 10, 26, 0.96);
    border: 1px solid rgba(200, 169, 110, 0.12);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 4px 20px rgba(0, 0, 0, 0.45);
    display: inline-block;
    flex-shrink: 0;
  }

  /* Bottom-half deeper tint — split-panel depth */
  .sf-window::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50%;
    background: rgba(0, 0, 0, 0.22);
    z-index: 2;
    pointer-events: none;
  }

  /* Split divider */
  .sf-window::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 2px;
    background: rgba(6, 6, 18, 1);
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 0 0 0.5px rgba(200, 169, 110, 0.14);
  }

  .sf-tape {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .sf-tape.sf-animate {
    transition: transform 1.9s cubic-bezier(0.34, 1.12, 0.64, 1);
  }

  .sf-cell {
    width: 62px;
    height: 76px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 4.5rem;
    font-weight: 300;
    color: var(--fg);
    letter-spacing: -0.01em;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    user-select: none;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  @keyframes sfGlow {
    0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(200,169,110,0.12); }
    42%  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 2px rgba(200,169,110,0.55), 0 0 28px rgba(200,169,110,0.40), 0 0 58px rgba(200,169,110,0.16); }
    100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(200,169,110,0.12); }
  }

  .sf-window.sf-glow {
    animation: sfGlow 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .sf-suffix {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 300;
    color: var(--accent);
    letter-spacing: -0.01em;
    line-height: 76px;
    padding-left: 3px;
    flex-shrink: 0;
    align-self: flex-start;
  }

  .stat-bar {
    width: 20px;
    height: 1px;
    background: var(--accent);
    opacity: 0.50;
    margin-bottom: 11px;
    flex-shrink: 0;
  }

  .stat-label {
    font-family: var(--font-sans);
    font-size: 0.52rem;
    letter-spacing: 0.20em;
    color: var(--fg-dim);
    text-transform: uppercase;
    line-height: 1.80;
  }

  /* ── TESTIMONIALS — Stacking carousel ── */
  #testimonials {
    padding: 140px 48px;
    position: relative;
    overflow-x: hidden;
    border-top: 1px solid rgba(200,169,110,0.07);
    background:
      radial-gradient(ellipse 32% 75% at 0% 52%, rgba(123,92,255,0.13) 0%, transparent 65%),
      radial-gradient(ellipse 32% 75% at 100% 48%, rgba(200,169,110,0.10) 0%, transparent 65%),
      radial-gradient(ellipse 80% 50% at 16% 90%, rgba(123,92,255,0.07) 0%, transparent 55%),
      radial-gradient(ellipse 62% 40% at 84% 8%,  rgba(200,169,110,0.06) 0%, transparent 60%),
      radial-gradient(ellipse 160% 40% at 50% 110%, rgba(4,4,12,1) 0%, transparent 56%),
      linear-gradient(162deg, #0c0b1d 0%, #0e0d20 22%, #0a0a18 55%, #080810 100%);
  }
  #testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 62px,
        rgba(200,169,110,0.016) 62px,
        rgba(200,169,110,0.016) 63px
      );
  }
  #testimonials::after {
    content: '\201C';
    position: absolute;
    font-family: var(--font-display);
    font-size: clamp(16rem, 42vw, 36rem);
    line-height: 0.72;
    color: rgba(200,169,110,0.026);
    top: 18px;
    left: -0.05em;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }

  .testi-header {
    margin-bottom: 72px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }

  /* ── Testimonials trust social proof ── */
  .testi-trust {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-bottom: 6px;
  }

  /* Fan card container — fixed size accommodates full spread */
  .testi-fan-wrap {
    position: relative;
    width: 224px;
    height: 80px;
  }

  .testi-fan-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    overflow: hidden;
    margin: -27px 0 0 -27px;
    box-shadow:
      0 0 0 1.5px rgba(200, 169, 110, 0.22),
      0 6px 20px rgba(0, 0, 0, 0.55);
    will-change: transform;
    transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Z-order: child 1 is front (visible), child 5 is deepest behind */
  .testi-fan-card:nth-child(1) { z-index: 5; }
  .testi-fan-card:nth-child(2) { z-index: 4; }
  .testi-fan-card:nth-child(3) { z-index: 3; }
  .testi-fan-card:nth-child(4) { z-index: 2; }
  .testi-fan-card:nth-child(5) { z-index: 1; }

  .testi-fan-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  /* ── Fan open: cards deal out from behind the front card ── */
  /* Cards from back emerge first (delay 0), front card moves last (delay 0.28s) */
  .testi-fan-wrap.fan-open .testi-fan-card:nth-child(5) {
    transform: translateX(78px) translateY(11px) rotate(26deg);
    transition-delay: 0s;
  }
  .testi-fan-wrap.fan-open .testi-fan-card:nth-child(4) {
    transform: translateX(39px) translateY(4px) rotate(13deg);
    transition-delay: 0.07s;
  }
  .testi-fan-wrap.fan-open .testi-fan-card:nth-child(3) {
    transform: translateX(0px) translateY(-2px) rotate(1deg);
    transition-delay: 0.13s;
  }
  .testi-fan-wrap.fan-open .testi-fan-card:nth-child(2) {
    transform: translateX(-39px) translateY(4px) rotate(-12deg);
    transition-delay: 0.19s;
  }
  .testi-fan-wrap.fan-open .testi-fan-card:nth-child(1) {
    transform: translateX(-78px) translateY(11px) rotate(-25deg);
    transition-delay: 0.27s;
  }

  /* Trust copy: number + label */
  .testi-trust-copy {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .testi-trust-num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1;
    color: var(--accent);
    letter-spacing: -0.01em;
  }

  .testi-trust-label {
    font-family: var(--font-sans);
    font-size: 0.54rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-dim);
    line-height: 1.75;
  }

  .testi-stage {
    position: relative;
    max-width: 1020px;
    margin: 0 auto;
    z-index: 1;
  }
  .testi-stage::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    height: 140px;
    background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(200,169,110,0.055) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
  }

  .testi-stack {
    position: relative;
    height: 370px;
    perspective: 1200px;
    margin-bottom: 52px;
  }

  /* Glass card */
  .testi-card {
    position: absolute;
    inset: 0;
    padding: 52px 58px;
    cursor: none;
    user-select: none;
    background: rgba(11, 9, 24, 0.76);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(200, 169, 110, 0.08);
    transform-origin: 50% 100%;
    will-change: transform, filter;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
  }

  /* SVG string-vibration border */
  .testi-border-svg {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    pointer-events: none;
    overflow: visible;
    z-index: 10;
  }
  .testi-border-path { fill: none; stroke: rgba(200,169,110,0.24); stroke-width: 1; }

  /* Treble clef texture — 5% opacity */
  .testi-clef {
    position: absolute;
    top: -16px; right: 24px;
    font-size: 12rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.048;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    font-family: var(--font-display);
  }

  .testi-text {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.78;
    color: var(--fg);
    position: relative;
    z-index: 2;
    margin-bottom: 28px;
  }

  /* Portée — two thin gold lines */
  .testi-staff {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 36px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
  }
  .testi-staff span { display: block; width: 100%; height: 1px; background: var(--accent); opacity: 0.40; }

  .testi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 2;
  }
  .testi-author {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--fg);
    margin-bottom: 3px;
  }
  .testi-role {
    font-family: var(--font-sans);
    font-size: 0.54rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
  .testi-tag {
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: 0.42rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid rgba(200,169,110,0.24);
    padding: 4px 10px;
  }

  /* ── Side-nav row ── */
  .testi-nav-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    position: relative;
    isolation: isolate;
  }

  /* Side-light glows flanking the card stack */
  .testi-nav-row::before,
  .testi-nav-row::after {
    content: '';
    position: absolute;
    top: -24px;
    bottom: -24px;
    width: 220px;
    pointer-events: none;
    z-index: -1;
  }
  .testi-nav-row::before {
    left: 0;
    background: radial-gradient(ellipse 100% 70% at 0% 50%, rgba(123,92,255,0.16) 0%, transparent 70%);
  }
  .testi-nav-row::after {
    right: 0;
    background: radial-gradient(ellipse 100% 70% at 100% 50%, rgba(200,169,110,0.13) 0%, transparent 70%);
  }

  .testi-nav-slot {
    flex-shrink: 0;
    width: 130px;
    display: flex;
    align-items: center;
  }

  /* Override reso-stage/btn sizing for nav slots */
  .testi-nav-slot .reso-stage { width: 100%; }
  .testi-nav-slot .btn-outline {
    width: 100% !important;
    justify-content: center;
    cursor: none;
  }

  /* Stack override inside nav-row */
  .testi-nav-row .testi-stack {
    flex: 1;
    margin-bottom: 0;
  }

  /* ── Mobile prev/next nav (hidden on desktop) ── */
  .testi-mob-nav {
    display: none;
    justify-content: center;
    gap: 20px;
    margin: 20px 0 8px;
  }

  .testi-mob-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 110, 0.30);
    background: rgba(200, 169, 110, 0.05);
    color: var(--fg-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
  }

  .testi-mob-btn:hover {
    border-color: rgba(200, 169, 110, 0.70);
    background: rgba(200, 169, 110, 0.12);
    color: var(--accent);
  }

  /* ── Bottom bar: wire + counter ── */
  .testi-bottom {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  /* Wire + ring progress */
  .testi-wire-wrap { flex: 1; position: relative; height: 14px; }
  .testi-wire-svg  { position: absolute; inset: 0; width: 100%; height: 100%; }
  .testi-ring {
    position: absolute;
    top: 50%; left: 0%;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    background: rgba(200,169,110,0.10);
    transform: translate(-50%, -50%);
    transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 8px rgba(200,169,110,0.28);
  }

  .testi-counter {
    font-family: var(--font-sans);
    font-size: 0.48rem;
    letter-spacing: 0.20em;
    color: var(--fg-dim);
    display: flex;
    gap: 6px;
    text-transform: uppercase;
  }
  .testi-current { color: var(--accent); }
  .testi-counter-sep { opacity: 0.32; }

  /* ── Testimonials: two-column body (text + image stack) ── */
  .testi-body {
    display: grid;
    grid-template-columns: 1fr 158px;
    gap: 32px;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 2;
  }

  .testi-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-width: 0;
  }

  /* ── Image stack — mirrors .hero-imgs pattern ── */
  .testi-img-stack {
    position: relative;
    width: 158px;
    height: 158px;
    flex-shrink: 0;
    align-self: center;
  }

  .testi-img-back,
  .testi-img-front {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .testi-img-back {
    z-index: 1;
    transform: rotate(-5deg);
    border: 1px solid rgba(200,169,110,0.35);
  }

  .testi-img-front {
    z-index: 2;
    transform: rotate(4deg);
    box-shadow:
      0 0 0 1px rgba(123,92,255,0.22),
      0 14px 42px rgba(0,0,0,0.60);
  }

  .testi-img-back img,
  .testi-img-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  /* BLOG */
  #blog {
    padding: 140px 48px;
    background: var(--bg);
  }

  .blog-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 72px;
  }

  .blog-link-all {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: gap 0.3s;
  }

  .blog-link-all:hover {
    gap: 18px;
  }

  .blog-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2px;
  }

  .blog-card {
    background: var(--bg2);
    position: relative;
    overflow: hidden;
    cursor: none;
    transition: background 0.3s;
  }

  .blog-card:hover {
    background: #111120;
  }

  .blog-card-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
  }

  .blog-card-img-placeholder {
    width: 100%;
    height: 220px;
    background: radial-gradient(ellipse at 50% 50%, var(--bc, rgba(123, 92, 255, 0.2)) 0%, rgba(8, 8, 16, 0.9) 80%);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .blog-card:first-child .blog-card-img-placeholder {
    height: 300px;
    --bc: rgba(200, 169, 110, 0.2);
  }

  .blog-card:nth-child(2) .blog-card-img-placeholder {
    --bc: rgba(217, 64, 64, 0.15);
  }

  .blog-card:nth-child(3) .blog-card-img-placeholder {
    --bc: rgba(232, 196, 240, 0.15);
  }

  .blog-card:hover .blog-card-img-placeholder {
    transform: scale(1.04);
  }

  .blog-card-body {
    padding: 36px 32px 40px;
  }

  .blog-card-cat {
    font-family: var(--font-sans);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .blog-card-cat::before {
    content: '';
    width: 18px;
    height: 1px;
    background: var(--accent);
  }

  .blog-card-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--fg);
    margin-bottom: 12px;
  }

  .blog-card:first-child .blog-card-title {
    font-size: 1.7rem;
  }

  .blog-card-excerpt {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--fg-dim);
    line-height: 1.8;
    margin-bottom: 20px;
  }

  .blog-card-date {
    font-family: var(--font-sans);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    color: rgba(152, 150, 160, 0.5);
    text-transform: uppercase;
  }

  /* ── CONTACT ─────────────────────────────────────────────── */
  #contact {
    padding: 140px 48px;
    position: relative;
    background:
      radial-gradient(ellipse 55% 70% at 4% 38%, rgba(200, 169, 110, 0.07) 0%, transparent 65%),
      radial-gradient(ellipse 42% 55% at 96% 60%, rgba(123, 92, 255, 0.09) 0%, transparent 62%),
      radial-gradient(ellipse 100% 32% at 50% 108%, rgba(4, 4, 12, 0.95) 0%, transparent 55%),
      linear-gradient(155deg, #0c0b1e 0%, #0a0914 35%, #0d0d1a 70%, #080810 100%);
  }

  /* Strategic grid — hero density, visible only in header band + bottom-right corner */
  #contact::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(200, 169, 110, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(200, 169, 110, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: linear-gradient(180deg,
      rgba(0,0,0,0.9) 0%,
      rgba(0,0,0,0.6) 10%,
      rgba(0,0,0,0) 26%,
      rgba(0,0,0,0) 62%,
      rgba(0,0,0,0.4) 78%,
      rgba(0,0,0,0.65) 100%
    );
    mask-image: linear-gradient(180deg,
      rgba(0,0,0,0.9) 0%,
      rgba(0,0,0,0.6) 10%,
      rgba(0,0,0,0) 26%,
      rgba(0,0,0,0) 62%,
      rgba(0,0,0,0.4) 78%,
      rgba(0,0,0,0.65) 100%
    );
  }

  /* Contact decorative elements */
  .contact-deco-ghost {
    position: absolute;
    top: 5%;
    right: -1%;
    font-family: var(--font-display);
    font-size: clamp(7rem, 22vw, 18rem);
    font-weight: 300;
    color: transparent;
    -webkit-text-stroke: 1px rgba(200, 169, 110, 0.04);
    letter-spacing: 0.12em;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    z-index: 0;
  }

  /* .contact-deco-vline {
    position: absolute;
    left: 220px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(200, 169, 110, 0.10) 18%,
      rgba(200, 169, 110, 0.10) 82%,
      transparent 100%);
    pointer-events: none;
    z-index: 0;
  } */

  .contact-deco-num {
    position: absolute;
    bottom: 5%;
    left: 48px;
    font-family: var(--font-display);
    font-size: clamp(6rem, 16vw, 14rem);
    font-weight: 300;
    color: transparent;
    -webkit-text-stroke: 1px rgba(200, 169, 110, 0.055);
    letter-spacing: 0.06em;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    z-index: 0;
  }

  /* Contact content above deco */
  .contact-header,
  .contact-info-row,
  .contact-body {
    position: relative;
    z-index: 1;
  }

  /* Header */
  .contact-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 72px;
  }

  .contact-header-left {
    flex-shrink: 0;
  }

  .contact-intro {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.75;
    color: var(--fg-dim);
    max-width: 340px;
    margin: 0;
  }

  /* Info cards */
  .contact-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border);
    margin-bottom: 64px;
  }

  .contact-info-card {
    padding: 36px 40px;
    border-right: 1px solid var(--border);
    transition: background 0.3s;
    position: relative;
    overflow: hidden;
  }

  .contact-info-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .contact-info-card:hover::before {
    transform: scaleY(1);
  }

  .contact-info-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .contact-info-card:hover::after {
    width: 100%;
  }

  .contact-info-card:last-child {
    border-right: none;
  }

  .contact-info-card:hover {
    background: rgba(200, 169, 110, 0.025);
  }

  .contact-info-icon {
    display: block;
    font-size: 0.9rem;
    color: var(--accent);
    margin-bottom: 20px;
    opacity: 0.65;
  }

  .contact-info-label {
    font-family: var(--font-sans);
    font-size: 0.56rem;
    letter-spacing: 0.24em;
    color: var(--fg-dim);
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .contact-info-val {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--fg);
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Body: form + map */
  .contact-body {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 72px;
    align-items: start;
  }

  /* ── FORM ── */

  .booking-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    color: var(--accent);
    text-transform: uppercase;
    padding: 8px 18px;
    border: 1px solid rgba(200, 169, 110, 0.25);
    margin-bottom: 40px;
  }

  .booking-tag::before {
    content: '●';
    font-size: 0.45rem;
  }

  .form-step {
    border-top: 1px solid var(--border);
    padding-top: 32px;
    margin-bottom: 36px;
  }

  .form-step-label {
    font-family: var(--font-sans);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .form-step-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  .form-group {
    margin-bottom: 24px;
  }

  .form-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.56rem;
    letter-spacing: 0.2em;
    color: var(--fg-dim);
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: none;
    border-bottom: 1px solid rgba(200, 169, 110, 0.30);
    color: #f0ede6;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    padding: 13px 9px;
    outline: none;
    transition: border-color 0.3s, background 0.3s;
    appearance: none;
    border-radius: 0;
  }

  .form-input::placeholder,
  .form-textarea::placeholder {
    color: rgba(200, 195, 185, 0.45);
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    border-bottom-color: var(--accent);
    background: rgba(255, 255, 255, 0.10);
  }

  .form-textarea {
    min-height: 120px;
    resize: vertical;
    padding-top: 12px;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .form-select option {
    background: #0d0d1a;
    color: var(--fg);
  }

  .form-select { cursor: pointer; }

  /* ── Custom Select Dropdown ─────────────────────────────────── */
  .cselectw { position: relative; }

  .csel-trigger, .cal-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(8, 8, 20, 0.65);
    border: 1px solid rgba(200, 169, 110, 0.20);
    border-radius: 2px;
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    padding: 13px 14px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  }
  .csel-trigger:focus, .cal-trigger:focus,
  .csel-trigger.is-open, .cal-trigger.is-open {
    border-color: rgba(200, 169, 110, 0.55);
    background: rgba(10, 9, 22, 0.88);
    outline: none;
    box-shadow: 0 0 0 1px rgba(200, 169, 110, 0.10), 0 4px 24px rgba(0,0,0,0.28);
  }
  .csel-placeholder { color: rgba(200, 195, 185, 0.42); }
  .csel-chevron, .cal-chevron {
    color: rgba(200, 169, 110, 0.42);
    flex-shrink: 0;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s;
  }
  .csel-trigger.is-open .csel-chevron,
  .cal-trigger.is-open  .cal-chevron { transform: rotate(180deg); color: var(--accent); }
  .cal-ico { color: rgba(200, 169, 110, 0.42); flex-shrink: 0; }
  #cselLabel, #calLabel { flex: 1; }

  .csel-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 320;
    list-style: none;
    padding: 6px 0;
    margin: 0;
    background: rgba(7, 7, 20, 0.97);
    backdrop-filter: blur(28px);
    border: 1px solid rgba(200, 169, 110, 0.16);
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(200,169,110,0.04), 0 14px 44px rgba(0,0,0,0.58);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.22,1,0.36,1), transform 0.22s cubic-bezier(0.22,1,0.36,1);
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(200,169,110,0.18) transparent;
  }
  .csel-panel.is-open {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
  }
  .csel-opt {
    font-family: var(--font-sans);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: var(--fg-dim);
    padding: 10px 14px 10px 24px;
    cursor: pointer;
    position: relative;
    transition: background 0.14s, color 0.14s, padding-left 0.18s;
  }
  .csel-opt::before {
    content: '';
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 3px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.18s;
  }
  .csel-opt:hover, .csel-opt.is-focused {
    background: rgba(200,169,110,0.06); color: var(--fg); padding-left: 28px;
  }
  .csel-opt:hover::before, .csel-opt.is-focused::before { background: rgba(200,169,110,0.55); }
  .csel-opt.is-selected { color: var(--accent); }
  .csel-opt.is-selected::before { background: var(--accent); }

  /* ── Custom Calendar ─────────────────────────────────────────── */
  .calpicker { position: relative; }

  .cal-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 320;
    background: rgba(7, 7, 20, 0.97);
    backdrop-filter: blur(28px);
    border: 1px solid rgba(200, 169, 110, 0.16);
    border-radius: 3px;
    padding: 18px;
    box-shadow: 0 0 0 1px rgba(200,169,110,0.04), 0 18px 56px rgba(0,0,0,0.64), 0 0 60px rgba(123,92,255,0.04);
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity 0.26s cubic-bezier(0.22,1,0.36,1), transform 0.26s cubic-bezier(0.22,1,0.36,1);
  }
  .cal-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

  .cal-nav-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

  .cal-nav {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid rgba(200,169,110,0.18);
    background: transparent;
    color: rgba(200,169,110,0.60);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
  }
  .cal-nav:hover { border-color: rgba(200,169,110,0.50); background: rgba(200,169,110,0.08); color: var(--accent); }

  .cal-title {
    font-family: var(--font-display);
    font-size: 0.95rem; font-weight: 300; letter-spacing: 0.04em;
    color: var(--fg);
  }

  .cal-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    margin-bottom: 6px;
  }
  .cal-weekdays span {
    font-family: var(--font-sans); font-size: 0.44rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(200,169,110,0.38); text-align: center; padding: 3px 0;
  }

  .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }

  .cal-day {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-sans); font-size: 0.60rem; letter-spacing: 0;
    color: var(--fg);
    border-radius: 50%; border: none;
    background: transparent; cursor: pointer;
    transition: background 0.16s, color 0.16s;
  }
  .cal-day:hover:not(.cal-day-empty):not(.cal-day-past) {
    background: rgba(200,169,110,0.12); color: var(--accent);
  }
  .cal-day-empty    { pointer-events: none; }
  .cal-day-past     { color: rgba(150,148,160,0.28); pointer-events: none; }
  .cal-day-today    { border: 1px solid rgba(200,169,110,0.40); color: var(--accent); }
  .cal-day-selected { background: var(--accent) !important; color: #080810 !important; font-weight: 700; }
  .cal-day-selected:hover { background: #d4b87a !important; }

  /* Budget radio */
  .budget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 4px;
  }

  .budget-option {
    position: relative;
    cursor: pointer;
  }

  .budget-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .budget-option span {
    display: block;
    padding: 11px 6px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-dim);
    border: 1px solid var(--border);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .budget-option input:checked+span {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
  }

  .budget-option:hover span {
    border-color: rgba(200, 169, 110, 0.5);
    color: var(--fg);
  }

  .btn-submit {
    width: 100%;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    padding: 20px 32px;
    cursor: none;
    transition: color 0.35s;
    position: relative;
    overflow: hidden;
    margin-top: 12px;
  }

  .btn-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: translateX(-100%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
  }

  .btn-submit:hover::before {
    transform: translateX(0);
  }

  .btn-submit:hover {
    color: var(--bg);
  }

  .btn-submit span {
    position: relative;
    z-index: 1;
  }

  /* ============================================================
     RESONANCE BUTTON SYSTEM
     ============================================================ */

  /* Stage — magnetic anchor */
  .reso-stage {
    display: inline-block;
    position: relative;
  }

  .reso-stage--full {
    display: block;
    width: 100%;
  }

  /* Reset base button layout to accept reso-inner structure */
  .btn-primary,
  .btn-outline,
  .btn-submit {
    padding: 0 !important;
    display: inline-flex !important;
    align-items: stretch;
  }

  .btn-submit {
    display: flex !important;
  }

  /* nav-book: no !important on display so mobile media query can override it */
  .nav-book {
    padding: 0 !important;
    display: inline-flex;
    align-items: stretch;
  }

  /* Kill old hover side-effects */
  .btn-primary:hover {
    background: var(--accent);
    transform: none;
  }

  .btn-outline:hover {
    transform: none;
  }

  .btn-submit::before {
    display: none !important;
  }

  .btn-submit:hover {
    color: var(--accent);
  }

  .nav-book:hover {
    background: var(--accent);
  }


  /* Waveform SVG */
  .reso-wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }

  .rw1,
  .rw2 {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.4;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    opacity: 0;
    transition: stroke-dashoffset 0.55s ease, opacity 0.4s;
  }

  .btn-primary .rw1,
  .btn-primary .rw2 {
    stroke: #080810;
  }

  .nav-book .rw1,
  .nav-book .rw2 {
    stroke: #080810;
  }

  .btn-primary:hover .rw1,
  .btn-outline:hover .rw1,
  .btn-submit:hover .rw1,
  .nav-book:hover .rw1 {
    stroke-dashoffset: 0;
    opacity: 0.55;
    animation: rsWave 3s linear infinite 0.5s;
  }

  .btn-primary:hover .rw2,
  .btn-outline:hover .rw2,
  .btn-submit:hover .rw2,
  .nav-book:hover .rw2 {
    stroke-dashoffset: 0;
    opacity: 0.22;
    animation: rsWave 3s linear infinite 0.72s;
  }

  /* Inner layout */
  .reso-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    width: 100%;
  }

  .nav-book .reso-inner {
    padding: 10px 18px;
    gap: 8px;
  }

  .btn-submit .reso-inner {
    justify-content: center;
    padding: 18px 32px;
  }

  /* Text track */
  .reso-track {
    display: inline-flex;
    flex-direction: column;
    height: 1.1em;
    overflow: hidden;
    flex: 1;
  }

  .reso-track span {
    display: block;
    line-height: 1.1;
    transition: transform 0.66s cubic-bezier(0.7, 0, 0.2, 1);
    font-family: var(--font-sans);
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    white-space: nowrap;
  }

  .reso-track span:nth-child(2) {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.02em;
  }

  .btn-primary:hover .reso-track span,
  .btn-outline:hover .reso-track span,
  .btn-submit:hover .reso-track span,
  .nav-book:hover .reso-track span {
    transform: translateY(-100%);
  }

  /* Play/Pause dot */
  .reso-dot,
  .reso-dot-soft {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 110, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.3s;
  }

  .reso-dot {
    background: rgba(200, 169, 110, 0.1);
  }

  .reso-dot-soft {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.18);
  }

  /* On gold-filled buttons — invert dot colors */
  .btn-primary .reso-dot,
  .nav-book .reso-dot {
    border-color: rgba(8, 8, 16, 0.28);
    background: rgba(8, 8, 16, 0.14);
  }

  .btn-primary .reso-play,
  .nav-book .reso-play {
    color: var(--bg);
  }

  .btn-primary .rbar,
  .nav-book .rbar {
    background: var(--bg);
  }

  /* Pulsing ring */
  .reso-dot::after,
  .reso-dot-soft::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 110, 0.4);
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
  }

  .btn-primary:hover .reso-dot::after,
  .btn-outline:hover .reso-dot::after,
  .btn-outline:hover .reso-dot-soft::after,
  .btn-submit:hover .reso-dot::after,
  .nav-book:hover .reso-dot::after {
    animation: rsRing 1.9s ease-out infinite;
  }

  /* Play icon */
  .reso-play {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transition: opacity 0.28s, transform 0.28s;
  }

  /* Pause bars */
  .reso-pause {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.28s, transform 0.28s;
  }

  .rbar {
    display: block;
    width: 2px;
    height: 9px;
    border-radius: 1px;
    background: var(--accent);
  }

  /* Play → Pause morph on hover */
  .btn-primary:hover .reso-play,
  .btn-outline:hover .reso-play,
  .btn-submit:hover .reso-play,
  .nav-book:hover .reso-play {
    opacity: 0;
    transform: scale(0.4);
  }

  .btn-primary:hover .reso-pause,
  .btn-outline:hover .reso-pause,
  .btn-submit:hover .reso-pause,
  .nav-book:hover .reso-pause {
    opacity: 1;
    transform: scale(1);
  }

  /* Responsive padding for reso-inner */
  @media (max-width: 900px) {

    .btn-primary .reso-inner,
    .btn-outline .reso-inner {
      padding: 13px 22px;
    }
  }

  @media (max-width: 400px) {

    .btn-primary .reso-inner,
    .btn-outline .reso-inner {
      padding: 12px 18px;
    }
  }

  /* Keyframes */
  @keyframes rsRing {
    0% {
      opacity: 0.65;
      transform: scale(0.6);
    }

    100% {
      opacity: 0;
      transform: scale(2.5);
    }
  }

  @keyframes rsWave {
    to {
      stroke-dashoffset: -200;
    }
  }

  /* ── MAP ── */
  .contact-map-wrap {
    position: sticky;
    top: 110px;
    will-change: transform;
  }

  .map-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-sans);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-dim);
    margin-bottom: 16px;
  }

  .map-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: pulseDot 2.4s ease-in-out infinite;
  }

  @keyframes pulseDot {

    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(200, 169, 110, 0.5);
    }

    50% {
      box-shadow: 0 0 0 6px rgba(200, 169, 110, 0);
    }
  }

  .map-frame {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-bottom: none;
    position: relative;
  }

  /* ── LEAFLET MAP ── */
  #leaflet-map {
    width: 100%;
    height: 100%;
    background: #08080f;
  }

  /* CartoDB Dark Matter is already near-black — brightness(1.05) keeps roads readable.
     hue-rotate pushes the faint blue-grays into deeper navy. */
  #leaflet-map .leaflet-tile-pane {
    filter: hue-rotate(195deg) brightness(1.05) saturate(0.60);
    transition: filter 0.7s ease;
  }
  .map-frame:hover #leaflet-map .leaflet-tile-pane {
    filter: hue-rotate(190deg) brightness(1.14) saturate(0.72);
  }

  .leaflet-control-attribution,
  .leaflet-control-zoom { display: none !important; }

  /* ── Map decorative overlay (injected by JS) ── */
  .lf-overlay {
    position: absolute; inset: 0; pointer-events: none; z-index: 450;
  }

  /* Gold corner brackets */
  .lf-corner {
    position: absolute; width: 18px; height: 18px;
  }
  .lf-corner-tl { top: 13px; left: 13px;
    border-top: 1px solid rgba(200,169,110,0.60); border-left: 1px solid rgba(200,169,110,0.60); }
  .lf-corner-tr { top: 13px; right: 13px;
    border-top: 1px solid rgba(200,169,110,0.60); border-right: 1px solid rgba(200,169,110,0.60); }
  .lf-corner-bl { bottom: 13px; left: 13px;
    border-bottom: 1px solid rgba(200,169,110,0.60); border-left: 1px solid rgba(200,169,110,0.60); }
  .lf-corner-br { bottom: 13px; right: 13px;
    border-bottom: 1px solid rgba(200,169,110,0.60); border-right: 1px solid rgba(200,169,110,0.60); }

  /* Coordinate readout — centered top */
  .lf-coords {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    font-family: 'Syne', sans-serif; font-size: 0.39rem; letter-spacing: 0.24em;
    text-transform: uppercase; color: rgba(200,169,110,0.52); white-space: nowrap;
  }

  /* City stamp — centered bottom */
  .lf-city-stamp {
    position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%);
    font-family: 'Syne', sans-serif; font-size: 0.37rem; letter-spacing: 0.32em;
    text-transform: uppercase; color: rgba(200,169,110,0.32); white-space: nowrap;
  }

  /* Scan lines — extremely subtle horizontal repeat */
  .lf-scanlines {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 2px,
      rgba(0,0,10,0.06) 2px, rgba(0,0,10,0.06) 3px
    );
  }

  /* Vignette — edges fade toward near-black */
  .lf-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(5,5,12,0.70) 100%);
  }

  /* ── Custom gold marker ── */
  .lf-marker {
    position: relative; width: 48px; height: 48px; cursor: pointer;
    opacity: 0; transform: scale(0.25); transition: none;
  }
  .lf-marker.lf-revealed {
    opacity: 1; transform: scale(1);
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .lf-marker-dot {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px rgba(200,169,110,0.22), 0 0 14px rgba(200,169,110,0.70);
    z-index: 4;
  }

  .lf-marker-ring {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid rgba(200,169,110,0.38); z-index: 3;
  }

  /* Crosshair arms */
  .lf-marker-arm { position: absolute; background: rgba(200,169,110,0.38); }
  .lf-arm-n, .lf-arm-s { width: 1px; height: 11px; left: 50%; transform: translateX(-50%); }
  .lf-arm-n { top: 1px; }
  .lf-arm-s { bottom: 1px; }
  .lf-arm-e, .lf-arm-w { height: 1px; width: 11px; top: 50%; transform: translateY(-50%); }
  .lf-arm-e { right: 1px; }
  .lf-arm-w { left: 1px; }

  .lf-marker-pulse {
    position: absolute; top: 50%; left: 50%;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(200,169,110,0.80);
    opacity: 0; animation: lf-pulse 2.8s ease-out infinite; z-index: 1;
  }

  @keyframes lf-pulse {
    0%   { transform: translate(-50%, -50%) scale(0.26); opacity: 0.90; }
    100% { transform: translate(-50%, -50%) scale(2.30); opacity: 0; }
  }

  /* ── Leaflet vector layers (concentric rings) ── */
  .lf-ring path { fill: none !important; }

  /* ── Popup ── */
  .lf-popup .leaflet-popup-content-wrapper {
    background: rgba(8, 8, 18, 0.95) !important;
    border: 1px solid rgba(200, 169, 110, 0.20) !important;
    border-radius: 0 !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.75) !important;
    backdrop-filter: blur(16px);
    padding: 0 !important;
  }
  .lf-popup .leaflet-popup-tip-container { display: none !important; }
  .lf-popup .leaflet-popup-content { margin: 0 !important; }

  .lf-popup-inner { padding: 20px 26px; }

  .lf-popup-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem; font-weight: 400; color: #f0ead8;
    letter-spacing: 0.01em; margin-bottom: 5px;
  }
  .lf-popup-sub {
    font-family: 'Syne', sans-serif; font-size: 0.50rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(240,234,216,0.42); margin-bottom: 14px;
  }
  .lf-popup-tag {
    display: inline-block; font-family: 'Syne', sans-serif;
    font-size: 0.44rem; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--accent); border: 1px solid rgba(200,169,110,0.28); padding: 3px 10px;
  }

  .map-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border);
  }

  .map-info-item {
    padding: 18px 24px;
    border-right: 1px solid var(--border);
  }

  .map-info-item:last-child {
    border-right: none;
  }

  .map-info-label {
    font-family: var(--font-sans);
    font-size: 0.5rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-dim);
    margin-bottom: 6px;
  }

  .map-info-val {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 300;
    color: var(--fg);
  }

  /* ── ABOUT GALLERY MODAL ── */
  .ag-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ag-modal.ag-open {
    pointer-events: all;
    opacity: 1;
  }

  /* Gold shimmer sweep on open */
  .ag-modal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
      transparent 0%,
      rgba(200, 169, 110, 0.06) 48%,
      rgba(200, 169, 110, 0.11) 50%,
      rgba(200, 169, 110, 0.06) 52%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 5;
    opacity: 0;
  }

  .ag-modal.ag-open::after {
    animation: agSweep 1.1s 0.08s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  @keyframes agSweep {
    0%   { transform: translateX(-100%); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
  }

  .ag-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 12, 0.96);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: backdrop-filter 0.7s ease, -webkit-backdrop-filter 0.7s ease;
  }

  .ag-modal.ag-open .ag-backdrop {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  .ag-ghost {
    position: absolute;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 300;
    color: transparent;
    -webkit-text-stroke: 1px rgba(200, 169, 110, 0.055);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    letter-spacing: 0.18em;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.9s 0.45s ease, transform 0.9s 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ag-modal.ag-open .ag-ghost {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .ag-close {
    position: absolute;
    top: 32px;
    right: 40px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(200, 169, 110, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.4s 0.3s, transform 0.4s 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s;
  }

  .ag-modal.ag-open .ag-close {
    opacity: 1;
    transform: translateY(0);
  }

  .ag-close:hover { border-color: var(--accent); }

  .ag-close span {
    position: absolute;
    width: 18px;
    height: 1px;
    background: var(--fg-dim);
    transition: background 0.3s;
  }

  .ag-close span:first-child { transform: rotate(45deg); }
  .ag-close span:last-child  { transform: rotate(-45deg); }
  .ag-close:hover span { background: var(--accent); }

  /* Orbit container */
  .ag-orbit-wrap {
    position: relative;
    width: 640px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    transform: scale(0.72);
    transition:
      transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
      opacity   0.6s ease 0.08s;
  }

  .ag-modal.ag-open .ag-orbit-wrap {
    opacity: 1;
    transform: scale(1);
  }

  /* Decorative orbit ring — rotates in */
  .ag-orbit-ring-deco {
    position: absolute;
    width: 490px;
    height: 490px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 110, 0.07);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    pointer-events: none;
    z-index: 0;
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
  }

  .ag-modal.ag-open .ag-orbit-ring-deco {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  .ag-orbit-ring-deco::after {
    content: '';
    position: absolute;
    inset: 70px;
    border-radius: 50%;
    border: 1px solid rgba(123, 92, 255, 0.055);
  }

  .ag-orbit-stage {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  /* Image slots */
  .ag-slot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 230px;
    height: 326px;
    overflow: hidden;
    cursor: pointer;
    will-change: transform, opacity;
    transition:
      transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
      opacity   0.78s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.5s;
  }

  .ag-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    pointer-events: none;
  }

  .ag-slot-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 4, 12, 0.55) 0%, transparent 55%);
    transition: opacity 0.5s;
  }

  /* Center position */
  .ag-slot[data-pos="0"] {
    transform: translate(-50%, -50%) scale(1);
    z-index: 3;
    opacity: 1;
    box-shadow:
      0 0 0 1px rgba(123, 92, 255, 0.22),
      0 32px 80px rgba(0, 0, 0, 0.75);
    pointer-events: none;
    cursor: default;
  }

  .ag-slot[data-pos="0"] .ag-slot-grad {
    opacity: 0;
  }

  /* Right orbit */
  .ag-slot[data-pos="1"] {
    transform: translate(calc(-50% + 218px), calc(-50% + 38px)) scale(0.66) rotate(7deg);
    z-index: 2;
    opacity: 0.52;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  }

  .ag-slot[data-pos="1"]:hover {
    opacity: 0.76;
    transform: translate(calc(-50% + 212px), calc(-50% + 30px)) scale(0.68) rotate(5.5deg);
  }

  /* Left orbit */
  .ag-slot[data-pos="2"] {
    transform: translate(calc(-50% - 218px), calc(-50% + 38px)) scale(0.66) rotate(-7deg);
    z-index: 2;
    opacity: 0.52;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  }

  .ag-slot[data-pos="2"]:hover {
    opacity: 0.76;
    transform: translate(calc(-50% - 212px), calc(-50% + 30px)) scale(0.68) rotate(-5.5deg);
  }

  /* Nav bar */
  .ag-nav-bar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 24px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s 0.42s, transform 0.4s 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ag-modal.ag-open .ag-nav-bar {
    opacity: 1;
    transform: translateY(0);
  }

  .ag-nav-btn {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(200, 169, 110, 0.22);
    background: transparent;
    color: var(--fg-dim);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s, color 0.3s, background 0.3s;
  }

  .ag-nav-btn:hover {
    border-color: var(--accent);
    color: var(--bg);
    background: var(--accent);
  }

  .ag-dots {
    display: flex;
    gap: 9px;
    align-items: center;
  }

  .ag-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(200, 169, 110, 0.25);
    transition: background 0.35s, transform 0.35s;
  }

  .ag-dot.ag-dot-active {
    background: var(--accent);
    transform: scale(1.6);
  }

  .ag-hint {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-sans);
    font-size: 0.38rem;
    letter-spacing: 0.24em;
    color: rgba(200, 169, 110, 0.28);
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
  }

  /* Gallery modal responsive */
  @media (max-width: 700px) {
    .ag-orbit-wrap {
      width: 100vw;
      height: 420px;
    }

    .ag-slot {
      width: 170px;
      height: 241px;
    }

    .ag-slot[data-pos="1"] {
      transform: translate(calc(-50% + 35vw), calc(-50% + 28px)) scale(0.64) rotate(7deg);
    }

    .ag-slot[data-pos="1"]:hover {
      transform: translate(calc(-50% + 33vw), calc(-50% + 22px)) scale(0.66) rotate(5.5deg);
    }

    .ag-slot[data-pos="2"] {
      transform: translate(calc(-50% - 35vw), calc(-50% + 28px)) scale(0.64) rotate(-7deg);
    }

    .ag-slot[data-pos="2"]:hover {
      transform: translate(calc(-50% - 33vw), calc(-50% + 22px)) scale(0.66) rotate(-5.5deg);
    }

    .ag-close {
      top: 20px;
      right: 20px;
    }

    .ag-orbit-ring-deco {
      width: 380px;
      height: 380px;
    }
  }

  /* ── SOCIAL PILL (footer) ── */
  .social-pill {
    font-family: var(--font-sans);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-dim);
    border: 1px solid var(--border);
    padding: 9px 18px;
    text-decoration: none;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
    cursor: none;
  }

  .social-pill:hover {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
  }

  /* ── FOOTER ── */
  footer {
    background: #050508;
    border-top: 1px solid var(--border);
    padding: 56px 48px 36px;
  }

  .footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 40px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--border);
    gap: 32px;
    flex-wrap: wrap;
  }

  .footer-logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.22em;
    color: var(--fg);
    text-transform: uppercase;
    font-style: italic;
  }

  .footer-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
  }

  .footer-copy {
    font-family: var(--font-sans);
    font-size: 0.55rem;
    letter-spacing: 0.16em;
    color: rgba(152, 150, 160, 0.5);
    text-transform: uppercase;
  }

  .footer-links {
    display: flex;
    gap: 20px;
    align-items: center;
  }

  .footer-links a {
    font-family: var(--font-sans);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(152, 150, 160, 0.35);
    text-decoration: none;
    transition: color 0.3s;
  }

  .footer-links a:hover {
    color: var(--accent);
  }

  .footer-credit {
    font-family: var(--font-sans);
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    color: rgba(152, 150, 160, 0.25);
    text-transform: uppercase;
    text-align: right;
  }

  /* BIG TEXT DECO */
  .big-text-deco {
    font-family: var(--font-display);
    font-size: clamp(5rem, 12vw, 11rem);
    font-weight: 300;
    color: transparent;
    -webkit-text-stroke: 1px rgba(200, 169, 110, 0.07);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  /* ── BRIDGE: Testimonials → Contact ────────────────────────── */
  .btc-bridge {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 72px 48px 110px;
    background: linear-gradient(to bottom,
      rgba(12, 11, 29, 1)    0%,
      rgba(8,  8,  20, 0.90) 40%,
      rgba(8,  8,  18, 0.28) 74%,
      rgba(8,  8,  18, 0)   100%
    );
    margin-top: -1px;
    margin-bottom: -58px;
  }

  /* soft ambient orbs */
  .btc-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(52px);
  }
  .btc-orb-l {
    width: 340px; height: 340px;
    left: -60px; top: -120px;
    background: radial-gradient(circle, rgba(123, 92, 255, 0.18) 0%, transparent 68%);
    animation: btcDrift 9s ease-in-out infinite alternate;
  }
  .btc-orb-r {
    width: 280px; height: 280px;
    right: -40px; bottom: -90px;
    background: radial-gradient(circle, rgba(200, 169, 110, 0.16) 0%, transparent 68%);
    animation: btcDrift 11s ease-in-out infinite alternate-reverse;
  }
  .btc-orb-c {
    width: 220px; height: 220px;
    left: 50%; top: -60px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(232, 196, 240, 0.10) 0%, transparent 70%);
    animation: btcDrift 14s ease-in-out infinite alternate;
  }

  @keyframes btcDrift {
    from { transform: translateY(0)  translateX(0); }
    to   { transform: translateY(14px) translateX(8px); }
  }
  .btc-orb-c { animation-name: btcDriftC; }
  @keyframes btcDriftC {
    from { transform: translateX(-50%) translateY(0); }
    to   { transform: translateX(-50%) translateY(-12px); }
  }

  /* flowing wave lines */
  .btc-waves {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  /* wave draw-in animation — triggered when .btc-drawn is added via JS */
  .btc-w1 {
    fill: none; stroke: rgba(200, 169, 110, 0.22); stroke-width: 1;
    stroke-dasharray: 3000; stroke-dashoffset: 3000;
    transition: stroke-dashoffset 2.0s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .btc-w2 {
    fill: none; stroke: rgba(123, 92, 255, 0.14); stroke-width: 0.8;
    stroke-dasharray: 3000; stroke-dashoffset: 3000;
    transition: stroke-dashoffset 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
  }
  .btc-w3 {
    fill: none; stroke: rgba(232, 196, 240, 0.09); stroke-width: 0.7;
    stroke-dasharray: 3000; stroke-dashoffset: 3000;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.65s;
  }
  .btc-w4 {
    fill: none; stroke: rgba(200, 169, 110, 0.07); stroke-width: 1.4;
    stroke-dasharray: 8 20;
    opacity: 0;
    transition: opacity 0.8s ease 1.2s;
  }

  .btc-drawn .btc-w1 { stroke-dashoffset: 0; }
  .btc-drawn .btc-w2 { stroke-dashoffset: 0; }
  .btc-drawn .btc-w3 { stroke-dashoffset: 0; }
  .btc-drawn .btc-w4 { opacity: 1; }

  /* ── Newsletter card ───────────────────────────────────────── */
  .btc-nl {
    position: relative;
    z-index: 3;
    max-width: 860px;
    margin: 0 auto;
    padding: 52px 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center;
    background:
      radial-gradient(ellipse 70% 80% at 0% 0%,   rgba(123, 92, 255, 0.09) 0%, transparent 55%),
      radial-gradient(ellipse 60% 70% at 100% 100%, rgba(200, 169, 110, 0.07) 0%, transparent 55%),
      rgba(10, 9, 22, 0.76);
    backdrop-filter: blur(28px);
    border: 1px solid rgba(200, 169, 110, 0.14);
    border-radius: 3px;
    box-shadow:
      0 0 0 1px rgba(200, 169, 110, 0.05),
      inset 0 1px 0 rgba(200, 169, 110, 0.07),
      0 28px 72px rgba(0, 0, 0, 0.52),
      0 0 100px rgba(123, 92, 255, 0.06);
  }

  .btc-nl-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.50rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
  }

  .btc-nl-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 300;
    color: var(--fg);
    line-height: 1.18;
    margin-bottom: 16px;
  }

  .btc-nl-title em {
    font-style: italic;
    color: var(--fg);
    opacity: 0.85;
  }

  .btc-nl-desc {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    color: var(--fg-dim);
    line-height: 1.75;
  }

  .btc-nl-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
  }

  .btc-nl-field {
    position: relative;
    display: flex;
    align-items: center;
  }

  .btc-nl-ico {
    position: absolute;
    left: 13px;
    color: rgba(200, 169, 110, 0.40);
    pointer-events: none;
    flex-shrink: 0;
  }

  .btc-nl-input {
    width: 100%;
    background: rgba(8, 8, 16, 0.70);
    border: 1px solid rgba(200, 169, 110, 0.16);
    border-radius: 2px;
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    padding: 14px 14px 14px 38px;
    outline: none;
    transition: border-color 0.3s, background 0.3s;
  }

  .btc-nl-input::placeholder { color: rgba(152, 150, 160, 0.50); }
  .btc-nl-input:focus {
    border-color: rgba(200, 169, 110, 0.45);
    background: rgba(10, 9, 22, 0.85);
  }

  .btc-nl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-family: var(--font-sans);
    font-size: 0.56rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--accent);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.3s, transform 0.25s;
  }

  .btc-nl-btn:hover { background: #d4b87a; transform: translateY(-1px); }
  .btc-nl-arrow { transition: transform 0.25s; }
  .btc-nl-btn:hover .btc-nl-arrow { transform: translateX(3px); }

  .btc-nl-ok {
    position: absolute;
    bottom: -22px;
    left: 0; right: 0;
    font-family: var(--font-sans);
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    color: var(--accent);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
  }
  .btc-nl-ok.show { opacity: 1; }

  @media (max-width: 780px) {
    .btc-bridge { padding: 52px 24px 90px; }
    .btc-nl { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; }
  }

  @media (max-width: 480px) {
    .btc-bridge { padding: 44px 16px 76px; }
    .btc-nl { padding: 28px 20px; }
    .btc-nl-title { font-size: 1.5rem; }
  }

  /* centered emblem */
  .btc-chord {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .btc-chord-line {
    display: block;
    height: 1px;
    width: clamp(60px, 10vw, 120px);
  }
  .btc-chord-l { background: linear-gradient(to left,  rgba(200, 169, 110, 0.45), transparent); }
  .btc-chord-r { background: linear-gradient(to right, rgba(200, 169, 110, 0.45), transparent); }

  .btc-diamond-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
  }
  .btc-diamond-outer {
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid rgba(200, 169, 110, 0.28);
    transform: rotate(45deg);
    border-radius: 1px;
  }
  .btc-diamond {
    position: absolute;
    width: 6px; height: 6px;
    background: rgba(200, 169, 110, 0.72);
    transform: rotate(45deg);
    border-radius: 0.5px;
    box-shadow: 0 0 10px rgba(200, 169, 110, 0.55), 0 0 24px rgba(200, 169, 110, 0.22);
  }

  /* subtle pixel-noise overlay via SVG filter */
  .btc-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
  }

  /* ANIMATIONS */
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(32px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes marquee {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }

  @keyframes scrollPulse {

    0%,
    100% {
      transform: scaleY(1);
      opacity: 1;
    }

    50% {
      transform: scaleY(0.5);
      opacity: 0.4;
    }
  }

  /* REVEAL on scroll */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-delay-1 {
    transition-delay: 0.1s;
  }

  .reveal-delay-2 {
    transition-delay: 0.2s;
  }

  .reveal-delay-3 {
    transition-delay: 0.32s;
  }


  /* ============================================================
     HAMBURGER & MOBILE OVERLAY MENU
     ============================================================ */

  /* Wrapper — hidden on desktop, shown on mobile */
  .nav-hamburger-wrap {
    display: none;
    flex-shrink: 0;
    z-index: 201;
    position: relative;
  }

  .nav-hamburger {
    cursor: none;
    background: rgba(10, 10, 15, 0.45);
    border: 1px solid rgba(200, 169, 110, 0.28);
    /* border-radius: 5px; */
    padding: 10px 11px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, background 0.3s ease;
    backdrop-filter: blur(10px);
  }

  .nav-hamburger:hover {
    border-color: rgba(200, 169, 110, 0.55);
    background: rgba(200, 169, 110, 0.06);
  }

  .hbar {
    display: block;
    width: 17px;
    height: 1px;
    background: white;
    /* border-radius: 1px; */
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, background 0.3s ease;
    transform-origin: center;
  }

  .nav-hamburger:hover .hbar {
    background: rgba(200, 169, 110, 0.55);
  }

  /* Open: bars cross into X */
  .nav-hamburger.open .hbar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-hamburger.open .hbar:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-hamburger.open .hbar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* ============================================================
     NAV OVERLAY v2 — Premium circular reveal from corner
     Split layout: image left · links right
     ============================================================ */

  /* ── Base ── */
  .nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(5, 5, 12, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    /* Circular clip from hamburger corner (top-right) */
    clip-path: circle(0px at calc(100% - 46px) 42px);
    opacity: 1;
    /* override old opacity:0 */
    transition: none;
    /* kill old opacity transition */
    pointer-events: none;
    will-change: clip-path;

    /* Split layout */
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: center;
    overflow: hidden;
    padding: 80px 0 40px;
  }

  /* ── Open: elastic circle expands from corner ── */
  .nav-overlay.open {
    pointer-events: all;
    animation: nmReveal 0.92s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  /* ── Closing: circle collapses back to corner ── */
  .nav-overlay.closing {
    animation: nmHide 0.58s cubic-bezier(0.55, 0, 1, 0.45) forwards;
    pointer-events: none;
  }

  @keyframes nmReveal {
    0% {
      clip-path: circle(0px at calc(100% - 46px) 42px);
    }

    68% {
      clip-path: circle(174% at calc(100% - 46px) 42px);
    }

    82% {
      clip-path: circle(162% at calc(100% - 46px) 42px);
    }

    100% {
      clip-path: circle(167% at calc(100% - 46px) 42px);
    }
  }

  @keyframes nmHide {
    0% {
      clip-path: circle(167% at calc(100% - 46px) 42px);
    }

    100% {
      clip-path: circle(0px at calc(100% - 46px) 42px);
    }
  }

  /* ── Decorative background ── */
  .nm-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(200, 169, 110, 0.028) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(200, 169, 110, 0.028) 1px, transparent 1px);
    background-size: 72px 72px;
    pointer-events: none;
    z-index: 0;
  }

  .nm-ghost {
    position: absolute;
    bottom: -2%;
    left: 0;
    right: 0;
    font-family: var(--font-display);
    font-size: clamp(5rem, 19vw, 13rem);
    font-weight: 300;
    color: transparent;
    -webkit-text-stroke: 1px rgba(200, 169, 110, 0.045);
    letter-spacing: 0.2em;
    text-align: center;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    z-index: 0;
    line-height: 1;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s 0.22s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.22s;
  }

  .nav-overlay.open .nm-ghost {
    opacity: 1;
    transform: translateY(0);
  }

  .nav-overlay.closing .nm-ghost {
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }

  .nm-ring {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 110, 0.065);
    top: 50%;
    left: 23%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.9s 0.28s;
  }

  .nm-ring::after {
    content: '';
    position: absolute;
    inset: 70px;
    border-radius: 50%;
    border: 1px solid rgba(123, 92, 255, 0.055);
  }

  .nav-overlay.open .nm-ring {
    opacity: 1;
  }

  .nav-overlay.closing .nm-ring {
    opacity: 1;
    transition: none;
  }

  /* Corner brackets */
  .nm-corner {
    position: absolute;
    width: 52px;
    height: 52px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s 0.52s;
  }

  .nav-overlay.open .nm-corner {
    opacity: 1;
  }

  .nav-overlay.closing .nm-corner {
    opacity: 1;
    transition: none;
  }

  .nm-corner-tl {
    top: 88px;
    left: 20px;
    border-top: 1px solid rgba(200, 169, 110, 0.45);
    border-left: 1px solid rgba(200, 169, 110, 0.45);
  }

  .nm-corner-br {
    bottom: 24px;
    right: 20px;
    border-bottom: 1px solid rgba(200, 169, 110, 0.45);
    border-right: 1px solid rgba(200, 169, 110, 0.45);
  }

  /* Vertical divider */
  .nm-divider {
    position: absolute;
    left: 46%;
    top: 80px;
    bottom: 40px;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(200, 169, 110, 0.18) 18%,
        rgba(200, 169, 110, 0.18) 82%,
        transparent);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition:
      opacity 0.4s 0.38s,
      transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.32s;
  }

  .nav-overlay.open .nm-divider {
    opacity: 1;
    transform: scaleY(1);
  }

  .nav-overlay.closing .nm-divider {
    opacity: 1;
    transform: scaleY(1);
    transition: none;
  }

  /* ── Image panel (left) ── */
  .nm-img-panel {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 24px;
    gap: 0;
  }

  .nm-img-frame {
    position: relative;
    width: 100%;
    max-width: 240px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(200, 169, 110, 0.22),
      0 28px 64px rgba(0, 0, 0, 0.65);

    /* Starts centered/full, transitions to left-shifted & smaller */
    opacity: 0;
    transform: translateX(6%) scale(1.05);
    transition:
      opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.26s,
      transform 0.88s cubic-bezier(0.16, 1, 0.3, 1) 0.26s;
  }

  .nav-overlay.open .nm-img-frame {
    opacity: 1;
    transform: translateX(-9%) scale(0.91);
  }

  .nav-overlay.closing .nm-img-frame {
    opacity: 1;
    transform: translateX(-9%) scale(0.91);
    transition: none;
  }

  .nm-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  .nm-img-grad {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(5, 5, 12, 0.88) 0%, rgba(5, 5, 12, 0.08) 38%, transparent 55%),
      linear-gradient(to bottom, rgba(5, 5, 12, 0.32) 0%, transparent 18%);
    z-index: 1;
  }

  .nm-img-meta {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    width: 100%;
    max-width: 240px;
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.5s 0.58s,
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.58s;
  }

  .nav-overlay.open .nm-img-meta {
    opacity: 1;
    transform: translateY(0);
  }

  .nav-overlay.closing .nm-img-meta {
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }

  .nm-img-tag {
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--accent);
    padding: 3px 10px;
  }

  .nm-img-label {
    font-family: var(--font-sans);
    font-size: 0.52rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(152, 150, 160, 0.5);
  }

  /* ── Nav panel (right) ── */
  .nm-nav-panel {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 0 36px 0 28px;
    gap: 0;
  }

  .nm-links {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 36px;
  }

  .nm-item {
    border-bottom: 1px solid rgba(200, 169, 110, 0.1);
    overflow: hidden;
  }

  .nm-item:first-child {
    border-top: 1px solid rgba(200, 169, 110, 0.1);
  }

  .nm-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 4px;
    text-decoration: none;
    opacity: 0;
    transform: translateX(28px);
    transition:
      opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      color 0.2s;
  }

  /* Staggered entrance */
  .nav-overlay.open .nm-item:nth-child(1) .nm-link {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.44s, 0.44s, 0s;
  }

  .nav-overlay.open .nm-item:nth-child(2) .nm-link {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.52s, 0.52s, 0s;
  }

  .nav-overlay.open .nm-item:nth-child(3) .nm-link {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.60s, 0.60s, 0s;
  }

  .nav-overlay.open .nm-item:nth-child(4) .nm-link {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.68s, 0.68s, 0s;
  }

  .nav-overlay.open .nm-item:nth-child(5) .nm-link {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.76s, 0.76s, 0s;
  }

  /* Freeze during close */
  .nav-overlay.closing .nm-link {
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .nm-link:hover {
    color: var(--accent);
  }

  .nm-link:hover .nm-num {
    color: rgba(200, 169, 110, 0.55);
  }

  .nm-link:hover .nm-arrow {
    transform: translate(5px, -5px);
    color: var(--accent);
  }

  .nm-num {
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: rgba(200, 169, 110, 0.28);
    flex-shrink: 0;
    transition: color 0.2s;
  }

  .nm-text {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 4.5vw, 2.3rem);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: var(--fg);
    flex: 1;
    transition: color 0.2s;
  }

  .nm-arrow {
    font-size: 0.75rem;
    color: rgba(200, 169, 110, 0.28);
    flex-shrink: 0;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
  }

  /* Panel footer */
  .nm-foot {
    display: flex;
    flex-direction: column;
    gap: 18px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s 0.84s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.84s;
  }

  .nav-overlay.open .nm-foot {
    opacity: 1;
    transform: translateY(0);
  }

  .nav-overlay.closing .nm-foot {
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }

  .nm-book {
    display: inline-flex;
    align-self: flex-start;
    align-items: stretch;
    padding: 0 !important;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg);
    background: transparent;
    border: 1px solid rgba(200, 169, 110, 0.45);
    text-decoration: none;
    transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
    cursor: none;
  }

  .nm-book .reso-inner {
    padding: 12px 28px;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    gap: 0;
  }

  .nm-book:hover {
    border-color: var(--accent);
    background: rgba(200, 169, 110, 0.08);
    color: var(--fg);
  }

  .nm-book:hover .rw1 {
    stroke-dashoffset: 0;
    opacity: 0.55;
    animation: rsWave 3s linear infinite 0.5s;
  }

  .nm-book:hover .rw2 {
    stroke-dashoffset: 0;
    opacity: 0.22;
    animation: rsWave 3s linear infinite 0.72s;
  }

  .nm-socials {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
  }

  .nm-socials a {
    font-family: var(--font-sans);
    font-size: 0.52rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(152, 150, 160, 0.48);
    text-decoration: none;
    position: relative;
    transition: color 0.3s;
  }

  .nm-socials a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.3s;
  }

  .nm-socials a:hover {
    color: var(--accent);
  }

  .nm-socials a:hover::after {
    width: 100%;
  }

  /* ── Responsive: tablet narrow ── */
  @media (max-width: 700px) {
    .nav-overlay {
      grid-template-columns: 40% 60%;
      padding: 72px 0 28px;
    }

    .nm-img-panel {
      padding: 0 16px 0 18px;
    }

    .nm-img-frame {
      max-width: 190px;
    }

    .nm-nav-panel {
      padding: 0 20px 0 18px;
    }

    .nm-text {
      font-size: clamp(1.35rem, 6vw, 1.9rem);
    }

    .nm-divider {
      left: 40%;
    }

    .nm-ring {
      left: 20%;
      width: 380px;
      height: 380px;
    }
  }

  /* ── Responsive: small mobile ── */
  @media (max-width: 480px) {
    .nav-overlay {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      align-items: flex-start;
      padding: 0;
      overflow-y: auto;
    }

    .nm-img-panel {
      flex-direction: row;
      gap: 16px;
      align-items: center;
      justify-content: flex-start;
      height: auto;
      padding: calc(64px + 16px) 24px 16px;
    }

    .nm-img-frame {
      max-width: 88px;
      flex-shrink: 0;
      aspect-ratio: 3 / 4;
    }

    .nav-overlay.open .nm-img-frame {
      transform: translateX(0) scale(0.94);
    }

    .nm-img-meta {
      margin-top: 0;
      padding-left: 0;
    }

    .nm-nav-panel {
      height: auto;
      justify-content: flex-start;
      padding: 8px 24px 40px;
    }

    .nm-divider {
      display: none;
    }

    .nm-ring {
      display: none;
    }

    .nm-text {
      font-size: clamp(1.55rem, 9.5vw, 2.1rem);
    }

    .nm-link {
      padding: 12px 4px;
    }

    .nm-ghost {
      font-size: clamp(4rem, 21vw, 7rem);
      letter-spacing: 0.14em;
    }

    .nm-corner-tl {
      top: 70px;
      left: 16px;
    }

    .nm-corner-br {
      bottom: 16px;
      right: 16px;
    }


  }

  /* ============================================================
     1200px — Tablet Landscape / Small Laptop
     ============================================================ */
  @media (max-width: 1200px) {
    nav {
      padding: 24px 40px;
    }


    .nav-links {
      gap: 28px;
    }

    #hero {
      padding: 0 40px;
    }

    .hero-content {
      max-width: 460px;
      padding: 100px 0 60px;
    }

    .hero-imgs {
      width: 255px;
      height: 370px;
    }

    #works {
      padding: 100px 40px;
    }

    #about {
      padding: 120px 40px;
      gap: 60px;
    }

    #testimonials {
      padding: 120px 40px;
    }
    .testi-stack     { height: 400px; }
    .testi-card      { padding: 44px 44px; }
    .testi-img-stack { width: 148px; height: 148px; }
    .testi-nav-slot  { width: 115px; }

    #blog {
      padding: 120px 40px;
    }

    #contact {
      padding: 120px 40px;
      gap: 80px;
    }

    footer {
      padding: 48px 40px 32px;
    }

    .big-text-deco {
      padding: 0 40px !important;
    }
  }


  /* ============================================================
     900px — Tablet Portrait
     ============================================================ */
  @media (max-width: 900px) {

    /* NAV */
    nav {
      padding: 20px 24px;
    }


    .nav-links {
      display: none;
    }

    .nav-book {
      display: none;
    }

    .nav-hamburger-wrap {
      display: flex;
    }

    /* HERO */
    #hero {
      grid-template-columns: 1fr;
      padding: calc(72px + 48px) 24px 80px;
      min-height: 100svh;
      align-items: flex-start;
    }

    .hero-label {
      display: none;
    }

    .hero-stack {
      order: 1;
      width: 100%;
      height: auto;
      min-height: 300px;
      max-height: 500px;
      padding-bottom: 20px;
    }

    .hero-imgs {
      width: min(48vw, 300px);
      height: min(64vw, 400px);
    }

    /* Restore rotations for mobile */
    .hero-img-back {
      transform: rotate(-6deg);
    }

    .hero-img-front {
      transform: rotate(5deg);
    }

    .hero-content {
      order: 2;
      max-width: 100%;
      padding: 40px 0 0;
    }

    /* Make "ANIYE" large enough to overflow beyond images and be visible */
    .hero-word-bg {
      font-size: clamp(4rem, 22vw, 9rem);
    }

    .hero-h1 {
      font-size: clamp(3.5rem, 11vw, 6rem);
    }

    .hero-desc {
      max-width: 100%;
      font-size: 0.8rem;
    }

    .hero-scroll {
      display: none;
    }

    /* MARQUEE */
    .marquee-item {
      font-size: 0.88rem;
      padding: 0 28px;
    }

    /* WORKS */
    #works {
      padding: 80px 24px;
    }

    .works-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      margin-bottom: 48px;
    }

    .works-header-right {
      align-items: flex-start;
      max-width: 100%;
      width: 100%;
    }

    .works-subtitle {
      text-align: left;
    }

    .works-count {
      display: none;
    }

    /* WORKS — film strip adapts on tablet */
    .works-film {
      margin: 0 -24px;
      padding: 32px 24px 64px;
    }

    /* Tablet — ~2.5 cards visible at once */
    .wc-1 {
      width: 34vw;
      margin-right: 14px;
    }

    .wc-2 {
      width: 30vw;
      margin-right: 12px;
    }

    .wc-3 {
      width: 40vw;
      margin-right: 14px;
    }

    .wc-4 {
      width: 30vw;
      margin-right: 12px;
    }

    .wc-5 {
      width: 34vw;
    }

    /* Touch: full natural color */
    .work-card {
      filter: saturate(1.0);
    }

    .work-card:hover {
      box-shadow: none;
    }

    .wc-3 {
      filter: saturate(1.0);
    }

    .work-genre {
      opacity: 1;
      transform: translateY(0);
    }

    /* ABOUT */
    #about {
      grid-template-columns: 1fr;
      padding: 80px 24px;
      gap: 48px;
    }

    .about-visual {
      position: static;
    }

    .about-imgs {
      max-width: min(360px, 70vw);
    }

  .about-deco-line {
    right: -12px;
  }

  .about-side-label {
    display: none;
  }

  /* TESTIMONIALS */
  #testimonials    { padding: 80px 24px; }
  .testi-header    { flex-direction: column; align-items: flex-start; gap: 32px; }
  .testi-trust     { align-items: flex-start; flex-direction: row; align-items: center; gap: 28px; }
  .testi-stack     { height: 420px; }
  .testi-card      { padding: 40px 36px; }
  .testi-body      { grid-template-columns: 1fr 120px; gap: 22px; }
  .testi-img-stack { width: 120px; height: 120px; }
  /* Compact icon-only nav buttons at this width */
  .testi-nav-slot  { width: 48px; }
  .testi-nav-slot .reso-track { display: none; }
  .testi-nav-slot .reso-inner { padding: 11px; gap: 0; justify-content: center; }
  .testi-nav-row   { gap: 12px; }

  /* BLOG */
  #blog {
    padding: 80px 24px;
  }

  .blog-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 48px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .blog-card:first-child .blog-card-title {
    font-size: 1.45rem;
  }

  /* CONTACT */
  #contact {
    padding: 80px 24px;
  }

  .contact-deco-vline { display: none; }
  .contact-deco-num   { left: 24px; }

  .contact-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 48px;
  }

  .contact-intro {
    max-width: 100%;
  }

  .contact-info-row {
    grid-template-columns: 1fr;
  }

  .contact-info-card {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .contact-info-card:last-child {
    border-bottom: none;
  }

  .contact-body {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .contact-map-wrap {
    position: static;
  }

  .map-frame {
    height: 300px;
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* FOOTER */
  footer {
    padding: 48px 24px 32px;
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .footer-socials {
    justify-content: flex-start;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .footer-credit {
    text-align: left;
  }

  /* BIG DECO */
  .big-text-deco {
    padding: 0 24px !important;
  }
  }


  /* ============================================================
     600px — Mobile Portrait
     ============================================================ */
  @media (max-width: 600px) {

    /* NAV */
    nav {
      padding: 18px 20px;
    }

    .nav-logo {
      font-size: 0.9rem;
      letter-spacing: 0.18em;
    }

    /* HERO — single column, images top / content bottom */
    #hero {
      grid-template-columns: 1fr;
      padding: calc(68px + 40px) 20px 60px;
      min-height: auto;
      align-items: flex-start;
    }

    .hero-stack {
      order: 1;
      width: 100%;
      height: auto;
      min-height: 260px;
      max-height: 420px;
      padding-bottom: 16px;
    }

    .hero-imgs {
      width: min(54vw, 260px);
      height: min(72vw, 347px);
    }

    /* Restore rotations for mobile */
    .hero-img-back {
      transform: rotate(-6deg);
    }

    .hero-img-front {
      transform: rotate(5deg);
    }

    .hero-content {
      order: 2;
      padding: 36px 0 0;
      max-width: 100%;
    }

    /* Large enough to overflow beyond images and stay visible */
    .hero-word-bg {
      font-size: clamp(4rem, 26vw, 7rem);
      letter-spacing: 0.14em;
    }

    .hero-tag {
      margin-bottom: 20px;
      font-size: 0.57rem;
    }

    .hero-h1 {
      font-size: clamp(2.9rem, 14vw, 4.5rem);
      line-height: 0.88;
    }

    .hero-desc {
      font-size: 0.76rem;
      margin-top: 20px;
      margin-bottom: 36px;
      max-width: 100%;
    }

    .hero-ctas {
      gap: 10px;
    }

    .btn-primary,
    .btn-outline {
      padding: 13px 22px;
      font-size: 0.62rem;
    }

    .hero-orb {
      display: none;
    }

    /* MARQUEE */
    .marquee-track {
      animation-duration: 14s;
    }

    .marquee-item {
      font-size: 0.78rem;
      padding: 0 20px;
    }

    .marquee-item .dot {
      margin-left: 20px;
    }

    /* WORKS */
    #works {
      padding: 60px 20px;
    }

    .works-film {
      margin: 0 -20px;
      padding: 24px 20px 52px;
    }

    /* Mobile — ~2 cards visible, peek of next invites dragging */
    .wc-1 {
      width: 48vw;
      margin-right: 12px;
    }

    .wc-2 {
      width: 44vw;
      margin-right: 10px;
    }

    .wc-3 {
      width: 54vw;
      margin-right: 12px;
    }

    .wc-4 {
      width: 44vw;
      margin-right: 10px;
    }

    .wc-5 {
      width: 48vw;
    }

    /* ABOUT */
    #about {
      padding: 60px 20px;
      gap: 40px;
    }

    .about-visual {
      position: static;
    }

    .about-imgs {
      max-width: min(280px, 72vw);
    }

    .about-bio {
      font-size: 1.2rem;
    }

    .sf-window { width: 46px; height: 46px; }
    .sf-cell   { width: 46px; height: 46px; font-size: 2.6rem; padding: 0; }
    .sf-suffix { font-size: 1.8rem; line-height: 46px; }
    .stat-idx  { display: none; }
    .stat-item { padding: 18px 8px 16px; }

    .about-deco-line,
    .about-deco-dot {
      display: none;
    }

    /* TESTIMONIALS */
    #testimonials    { padding: 60px 16px; }
    .testi-fan-wrap  { width: 180px; height: 70px; }
    .testi-fan-card  { width: 46px; height: 46px; border-radius: 8px; margin: -23px 0 0 -23px; }
    .testi-fan-wrap.fan-open .testi-fan-card:nth-child(5) { transform: translateX(64px) translateY(9px) rotate(26deg); }
    .testi-fan-wrap.fan-open .testi-fan-card:nth-child(4) { transform: translateX(32px) translateY(3px) rotate(13deg); }
    .testi-fan-wrap.fan-open .testi-fan-card:nth-child(3) { transform: translateX(0px) translateY(-2px) rotate(1deg); }
    .testi-fan-wrap.fan-open .testi-fan-card:nth-child(2) { transform: translateX(-32px) translateY(3px) rotate(-12deg); }
    .testi-fan-wrap.fan-open .testi-fan-card:nth-child(1) { transform: translateX(-64px) translateY(9px) rotate(-25deg); }
    .testi-trust-num { font-size: 1.8rem; }
    .testi-stack     { height: 460px; }
    .testi-card      { padding: 32px 28px; }
    .testi-text      { font-size: 0.97rem; }
    .testi-clef      { font-size: 9rem; right: 12px; }
    .testi-body      { grid-template-columns: 1fr 96px; gap: 18px; }
    .testi-img-stack { width: 96px; height: 96px; }
    /* Side nav slots hidden → mobile nav shown below stack */
    .testi-nav-slot  { display: none; }
    .testi-mob-nav   { display: flex; }
    .testi-nav-row   { gap: 0; margin-bottom: 0; }

    /* BLOG */
    #blog {
      padding: 60px 20px;
    }

    .blog-card-img-placeholder,
    .blog-card:first-child .blog-card-img-placeholder {
      height: 180px;
    }

    .blog-card-body {
      padding: 22px 20px 26px;
    }

    .blog-card-title {
      font-size: 1.1rem;
    }

    .blog-card:first-child .blog-card-title {
      font-size: 1.2rem;
    }

    /* CONTACT */
    #contact {
      padding: 60px 20px;
    }

    .contact-deco-ghost { font-size: clamp(5rem, 28vw, 9rem); top: 3%; }
    .contact-deco-num   { display: none; }

    .contact-header {
      margin-bottom: 36px;
    }

    .contact-intro {
      font-size: 1.05rem;
    }

    .contact-info-card {
      padding: 28px 24px;
    }

    .budget-grid {
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .map-frame {
      height: 260px;
    }

    .map-info-row {
      grid-template-columns: repeat(3, 1fr);
    }

    /* FOOTER */
    footer {
      padding: 44px 20px 28px;
    }

    .footer-logo {
      font-size: 1.25rem;
    }

    .footer-socials {
      gap: 8px;
    }

    .social-pill {
      padding: 8px 14px;
      font-size: 0.56rem;
    }

    /* SECTION HEADINGS */
    .section-h2 {
      font-size: clamp(2.4rem, 10vw, 4rem);
    }

    /* BIG DECO */
    .big-text-deco {
      padding: 0 20px !important;
      -webkit-text-stroke-width: 0.5px;
    }

    /* CURSOR — hide on touch screens */
    .cursor,
    .cursor-ring {
      display: none !important;
    }

    body {
      cursor: auto;
    }

    .btn-primary,
    .btn-outline,
    .btn-submit,
    .social-pill,
    .nav-hamburger,
    .work-card,
    .blog-card,
    .testi-card,
    .nav-book,
    .blog-link-all,
    .budget-option,
    .form-select,
    .footer-links a,
    .nm-link,
    .nm-book,
    .nm-socials a {
      cursor: pointer;
    }
  }


  /* ============================================================
     400px — Small Mobile
     ============================================================ */
  @media (max-width: 400px) {
    nav {
      padding: 16px 16px;
    }

    .nav-logo {
      font-size: 0.82rem;
      letter-spacing: 0.14em;
    }

    #hero {
      padding: calc(68px + 34px) 16px 44px;
    }

    .hero-stack {
      height: auto;
      min-height: unset;
      max-height: unset;
      padding-bottom: 12px;
    }

    .hero-imgs {
      width: min(52vw, 220px);
      height: min(70vw, 294px);
    }

    .hero-img-back {
      transform: rotate(-6deg);
    }

    .hero-img-front {
      transform: rotate(5deg);
    }

    .hero-h1 {
      font-size: clamp(2.5rem, 16vw, 3.6rem);
    }

    .btn-primary,
    .btn-outline {
      padding: 12px 18px;
    }

    #works {
      padding: 52px 16px;
    }

    #about {
      padding: 52px 16px;
    }

    .about-imgs {
      max-width: min(240px, 78vw);
    }

    .sf-window { width: 40px; height: 40px; }
    .sf-cell   { width: 40px; height: 40px; font-size: 2.4rem; padding: 0; }
    .sf-suffix { font-size: 1.3rem; line-height: 40px; }
    .stat-item { padding: 14px 8px 12px; }

    #testimonials {
      padding: 52px 16px;
    }

    .testi-trust { display: none; }

    .testi-stack     { height: auto; min-height: 380px; }
    .testi-card {
      padding: 28px 20px;
    }

    .testi-body      { grid-template-columns: 1fr 78px; gap: 14px; }
    .testi-img-stack { width: 78px; height: 78px; }
    .testi-nav-slot  { display: none; }
    .testi-mob-nav   { display: flex; }
    .testi-nav-row   { gap: 0; }

    .form-row { grid-template-columns: 1fr; gap: 0; }

    #blog {
      padding: 52px 16px;
    }

    #contact {
      padding: 48px 16px;
    }

    .contact-info-card {
      padding: 24px 20px;
    }

    .budget-grid {
      grid-template-columns: 1fr 1fr;
    }

    .map-frame {
      height: 220px;
    }

    footer {
      padding: 40px 16px 24px;
    }

    .footer-links {
      gap: 14px;
    }

    .big-text-deco {
      padding: 0 16px !important;
    }
  }


  /* ============================================================
     Touch / Pointer-coarse — No cursor, always-on overlays
     ============================================================ */
  @media (pointer: coarse) {

    .cursor,
    .cursor-ring {
      display: none !important;
    }

    body {
      cursor: auto;
    }

    a,
    button,
    .work-card,
    .video-card,
    .blog-card,
    .testi-card,
    .testi-nav-slot .btn-outline,
    .social-pill,
    .nav-hamburger {
      cursor: pointer;
    }

    /* Work cards: accent line + arrow always active on touch */
    .work-card::after {
      width: 100%;
    }

    .work-arrow {
      transform: translate(4px, -4px);
      color: var(--accent);
    }
  }


  /* ============================================================
     Works Video Modal
     ============================================================ */

  .wk-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    align-items: center;
    justify-content: center;
  }

  .wk-modal.wk-open {
    display: flex;
  }

  /* backdrop */
  .wk-overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 12, 0.92);
    cursor: pointer;
  }

  /* close button */
  .wk-close {
    position: fixed;
    top: 28px;
    right: 36px;
    z-index: 10;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 110, 0.35);
    background: rgba(8, 8, 16, 0.60);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .wk-close:hover {
    border-color: rgba(200, 169, 110, 0.75);
    background: rgba(200, 169, 110, 0.10);
    transform: rotate(90deg);
  }

  .wkx-bar {
    position: absolute;
    width: 18px;
    height: 1.2px;
    background: rgba(200, 169, 110, 0.85);
    border-radius: 1px;
    transition: background 0.3s;
  }

  .wkx-bar:nth-child(1) { transform: rotate(45deg); }
  .wkx-bar:nth-child(2) { transform: rotate(-45deg); }

  .wk-close:hover .wkx-bar { background: var(--accent); }

  /* arrows */
  .wk-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 110, 0.28);
    background: rgba(8, 8, 16, 0.52);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200, 169, 110, 0.70);
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.3s;
  }

  .wk-arrow-prev { left: 24px; }
  .wk-arrow-next { right: 24px; }

  .wk-arrow:hover {
    border-color: rgba(200, 169, 110, 0.70);
    background: rgba(200, 169, 110, 0.10);
    color: var(--accent);
  }

  .wk-arrow-prev:hover { transform: translateY(-50%) translateX(-3px); }
  .wk-arrow-next:hover { transform: translateY(-50%) translateX(3px); }

  /* stage */
  .wk-stage {
    position: relative;
    z-index: 5;
    width: min(90vw, 1000px);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* video wrapper — 16:9 */
  .wk-vid-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(200, 169, 110, 0.12),
      0 32px 80px rgba(0, 0, 0, 0.80);
  }

  .wk-vid {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* playback controls */
  .wk-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 14px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(to top, rgba(4, 4, 12, 0.82) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.28s ease;
    z-index: 4;
  }

  .wk-vid-wrap:hover .wk-controls { opacity: 1; }

  /* always visible on touch */
  @media (pointer: coarse) {
    .wk-controls { opacity: 1; }
  }

  .wk-ctrl-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(200, 169, 110, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
  }

  .wk-ctrl-btn:hover { color: var(--accent); transform: scale(1.15); }

  /* play / pause icon swap */
  .wk-icon-play  { display: block; }
  .wk-icon-pause { display: none; }
  .wk-vid-wrap.wk-playing .wk-icon-play  { display: none; }
  .wk-vid-wrap.wk-playing .wk-icon-pause { display: block; }

  /* progress bar */
  .wk-progress {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: height 0.2s;
  }

  .wk-progress:hover { height: 5px; }

  .wk-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: var(--accent);
    border-radius: 2px;
    pointer-events: none;
  }

  .wk-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%) scale(0);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
    pointer-events: none;
    transition: transform 0.2s;
  }

  .wk-progress:hover .wk-progress-thumb { transform: translate(-50%, -50%) scale(1); }

  /* ended overlay */
  .wk-ended {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 4, 12, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    cursor: pointer;
  }

  .wk-ended.wk-show {
    opacity: 1;
    pointer-events: auto;
  }

  .wk-replay-btn {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1.5px solid rgba(200, 169, 110, 0.65);
    background: rgba(8, 8, 16, 0.60);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200, 169, 110, 0.90);
    transition: border-color 0.3s, background 0.3s;
  }

  .wk-replay-btn svg { margin-left: 3px; }

  .wk-replay-btn:hover {
    border-color: var(--accent);
    background: rgba(200, 169, 110, 0.12);
  }

  .wk-replay-ring {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 110, 0.45);
    animation: wplayRipple 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* foot bar — meta + counter */
  .wk-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 2px;
  }

  .wk-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }

  .wk-meta-tag {
    font-family: var(--font-sans);
    font-size: 0.52rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid rgba(200, 169, 110, 0.40);
    padding: 3px 8px;
    border-radius: 2px;
  }

  .wk-meta-title {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: var(--fg);
    letter-spacing: 0.04em;
  }

  .wk-meta-genre {
    font-family: var(--font-sans);
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }

  .wk-meta-yr {
    font-family: var(--font-sans);
    font-size: 0.52rem;
    letter-spacing: 0.14em;
    color: rgba(200, 169, 110, 0.45);
  }

  .wk-counter {
    font-family: var(--font-sans);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    color: var(--fg-dim);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .wk-counter-sep {
    margin: 0 4px;
    opacity: 0.45;
  }

  /* modal entrance animation */
  .wk-stage { animation: none; }
  .wk-modal.wk-open .wk-stage  { animation: wkFadeUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .wk-modal.wk-open .wk-overlay { animation: wkFadeIn 0.28s ease forwards; }

  @keyframes wkFadeUp {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes wkFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* small screens */
  @media (max-width: 600px) {
    .wk-arrow-prev { left: 10px; }
    .wk-arrow-next { right: 10px; }
    .wk-close { top: 16px; right: 16px; }
    .wk-stage { width: 95vw; }
    .wk-meta-title { font-size: 0.80rem; }
  }


  /* ============================================================
     LARGE SCREENS — centred layout (≥ 1537px)
     All section content is capped at 1440px and centred.
     --pg-pad grows as viewport grows, keeping content at 1440px.
     ============================================================ */
  @media (min-width: 1537px) {

    :root {
      /* grows from 48px as viewport exceeds 1536px */
      --pg-pad: calc((100vw - 1440px) / 2);
    }

    /* ── Nav ── */
    nav {
      padding-left:  var(--pg-pad);
      padding-right: var(--pg-pad);
    }

    /* ── Hero ── (base 80px — grows once formula exceeds 80px, i.e. viewport > 1600px) */
    #hero {
      padding-left:  max(80px, var(--pg-pad));
      padding-right: max(80px, var(--pg-pad));
    }

    /* ── Works ── */
    #works {
      padding-left:  var(--pg-pad);
      padding-right: var(--pg-pad);
    }
    /* film strip expands full-width by inverting the section padding */
    .works-film {
      margin-left:   calc(-1 * var(--pg-pad));
      margin-right:  calc(-1 * var(--pg-pad));
      padding-left:  var(--pg-pad);
      padding-right: var(--pg-pad);
    }
    /* filter bar: section handles horizontal placement, remove own side padding */
    .works-filter {
      padding-left:  0;
      padding-right: 0;
    }

    /* ── About ── */
    #about {
      padding-left:  var(--pg-pad);
      padding-right: var(--pg-pad);
    }

    /* ── Testimonials ── */
    #testimonials {
      padding-left:  var(--pg-pad);
      padding-right: var(--pg-pad);
    }

    /* ── Bridge / Newsletter ── */
    .btc-bridge {
      padding-left:  var(--pg-pad);
      padding-right: var(--pg-pad);
    }

    /* ── Contact ── */
    #contact {
      padding-left:  var(--pg-pad);
      padding-right: var(--pg-pad);
    }

    /* ── Footer ── */
    footer {
      padding-left:  var(--pg-pad);
      padding-right: var(--pg-pad);
    }
  }

  /* ============================================================
     ULTRA-WIDE (≥ 2161px) — cap content at 1840px
     Above 2160px, content starts growing beyond 1440px
     to avoid a too-narrow strip on very large monitors.
     ============================================================ */
  @media (min-width: 2161px) {
    :root { --pg-pad: min(calc((100vw - 1440px) / 2), 560px); }
  }