*, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      :root {
        --black: #0a0907;
        --deep: #100e0b;
        --dark: #1a1612;
        --teal: #1d4a47;
        --teal-light: #2a6b66;
        --gold: #c9a96e;
        --gold-dim: #8a6f3f;
        --cream: #e8dcc8;
        --cream-dim: #b8a888;
        --red-warm: #c0422a;
        --white: #f5f0e8;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        background: var(--black);
        color: var(--cream);
        font-family: 'Cormorant Garamond', serif;
        overflow-x: hidden;
        /* cursor handled in site.css */
      }
      /* Custom cursor */
      .cursor {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--gold);
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: transform 0.1s ease, background 0.2s ease, width 0.2s ease, height 0.2s ease;
        mix-blend-mode: difference;
      }
      .cursor-ring {
        width: 36px;
        height: 36px;
        border: 1px solid var(--gold);
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9998;
        transform: translate(-50%, -50%);
        transition: transform 0.15s ease, opacity 0.2s ease;
        opacity: 0.5;
      }
      /* Noise overlay */
      body::before {
        content: '';
        position: fixed;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
        opacity: 0.035;
        pointer-events: none;
        z-index: 100;
      }
      /* ───── HERO ───── */
      .hero {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
        overflow: hidden;
      }
      .hero-bg {
        position: absolute;
        inset: 0;
        background-image: url('/assets/images/extracted/listening-room-00.jpg');
        background-size: cover;
        background-position: center 40%;
      }
      .hero-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(10,9,7,0.92) 0%, rgba(10,9,7,0.6) 55%, rgba(10,9,7,0.2) 100%), linear-gradient(to top, rgba(10,9,7,0.85) 0%, transparent 50%);
      }
      /* Animated vinyl record */
      .vinyl {
        position: absolute;
        top: 8%;
        right: 6%;
        width: clamp(240px, 35vw, 520px);
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle at 50%, #1a1612 0%, #0f0d0a 18%, #1a1612 18.5%, #0f0d0a 20%, #1a1612 22%, #0f0d0a 24%, #1a1612 26%, #0f0d0a 28%, #1a1612 30%, #0f0d0a 50%, #0f0d0a 50%);
        box-shadow: 0 0 80px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.5);
        animation: spin 18s linear infinite;
        opacity: 0;
        animation-name: spinIn;
        animation-duration: 18s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
      }
      .vinyl::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle, var(--gold) 0%, var(--gold-dim) 60%, #4a3520 100%);
        box-shadow: 0 0 10px rgba(201,169,110,0.4);
      }
      @keyframes spinIn {
        0% {
          transform: rotate(0deg) scale(0.9);
          opacity: 0;
        }
        5% {
          opacity: 0.7;
          transform: rotate(50deg) scale(1);
        }
        100% {
          transform: rotate(360deg) scale(1);
          opacity: 0.7;
        }
      }
      .hero-content {
        position: relative;
        z-index: 2;
        padding: clamp(40px, 8vw, 100px);
        padding-bottom: clamp(60px, 10vw, 120px);
      }
      .eyebrow {
        font-family: 'Josefin Sans', sans-serif;
        font-weight: 100;
        font-size: clamp(9px, 1.1vw, 12px);
        letter-spacing: 0.35em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 24px;
        opacity: 0;
        animation: fadeUp 1s ease 0.4s forwards;
      }
      .hero-title {
        font-family: 'Playfair Display', serif;
        font-size: clamp(52px, 9vw, 130px);
        line-height: 0.9;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--white);
        margin-bottom: 16px;
        opacity: 0;
        animation: fadeUp 1s ease 0.6s forwards;
      }
      .hero-title em {
        display: block;
        font-style: italic;
        color: var(--gold);
      }
      .hero-sub {
        font-size: clamp(14px, 1.8vw, 20px);
        font-weight: 300;
        font-style: italic;
        color: var(--cream-dim);
        letter-spacing: 0.03em;
        margin-bottom: 48px;
        opacity: 0;
        animation: fadeUp 1s ease 0.8s forwards;
      }
      .hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 11px;
        font-weight: 300;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--cream);
        border: 1px solid rgba(201,169,110,0.4);
        padding: 18px 36px;
        transition: all 0.4s ease;
        opacity: 0;
        animation: fadeUp 1s ease 1s forwards;
        position: relative;
        overflow: hidden;
      }
      .hero-cta::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--gold);
        transform: translateX(-100%);
        transition: transform 0.4s ease;
        z-index: -1;
      }
      .hero-cta:hover {
        color: var(--black);
        border-color: var(--gold);
      }
      .hero-cta:hover::before {
        transform: translateX(0);
      }
      .hero-cta .arrow {
        transition: transform 0.3s ease;
      }
      .hero-cta:hover .arrow {
        transform: translateX(6px);
      }
      .scroll-line {
        position: absolute;
        bottom: 40px;
        /* Centered via auto margins + fit-content instead of
           translateX(-50%) because the fadeUp keyframes end at
           `transform: none`, which would overwrite the centering
           transform and pin the left edge at 50%. */
        left: 0;
        right: 0;
        margin-inline: auto;
        width: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        z-index: 2;
        opacity: 0;
        animation: fadeUp 1s ease 1.4s forwards;
      }
      .scroll-line span {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 9px;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--gold-dim);
      }
      .scroll-line::after {
        content: '';
        display: block;
        width: 1px;
        height: 50px;
        background: linear-gradient(to bottom, var(--gold-dim), transparent);
        animation: pulse 2s ease infinite;
      }
      @keyframes pulse {
        0%,100% {
          opacity: 0.4;
        }
        50% {
          opacity: 1;
        }
      }
      /* ───── DIVIDER ───── */
      .rule {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 0 clamp(40px, 8vw, 100px);
      }
      .rule::before, .rule::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(201,169,110,0.3));
      }
      .rule::after {
        background: linear-gradient(to left, transparent, rgba(201,169,110,0.3));
      }
      .rule-icon {
        width: 6px;
        height: 6px;
        border: 1px solid var(--gold);
        transform: rotate(45deg);
        flex-shrink: 0;
      }
      /* ───── ABOUT ───── */
      .about {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        min-height: 85vh;
        position: relative;
      }
      .about-visual {
        position: relative;
        overflow: hidden;
      }
      .about-visual-inner {
        position: absolute;
        inset: 0;
        background-image: url('/assets/images/extracted/listening-room-01.jpg');
        background-size: cover;
        background-position: center;
      }
      .about-visual-inner::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, transparent 60%, var(--dark) 100%);
      }
      .about-text {
        padding: clamp(60px, 8vw, 120px) clamp(40px, 6vw, 90px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
      }
      .about-text::before {
        content: '"';
        position: absolute;
        top: 30px;
        left: clamp(30px, 5vw, 70px);
        font-family: 'Playfair Display', serif;
        font-size: 200px;
        color: rgba(201,169,110,0.06);
        line-height: 1;
        pointer-events: none;
      }
      .section-label {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 10px;
        font-weight: 100;
        letter-spacing: 0.4em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 28px;
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .section-label::before {
        content: '';
        display: block;
        width: 32px;
        height: 1px;
        background: var(--gold);
      }
      .about-heading {
        font-family: 'Playfair Display', serif;
        font-size: clamp(32px, 4vw, 54px);
        line-height: 1.15;
        font-weight: 400;
        color: var(--white);
        margin-bottom: 32px;
      }
      .about-heading em {
        font-style: italic;
        color: var(--gold);
      }
      .about-body {
        font-size: clamp(15px, 1.3vw, 18px);
        font-weight: 300;
        line-height: 1.85;
        color: var(--cream-dim);
        max-width: 480px;
      }
      /* ───── FEATURES ───── */
      .features {
        padding: clamp(80px, 10vw, 140px) clamp(40px, 8vw, 100px);
        background: var(--deep);
        position: relative;
        overflow: hidden;
      }
      .features::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(201,169,110,0.3), transparent);
      }
      .features-header {
        text-align: center;
        margin-bottom: clamp(60px, 8vw, 100px);
      }
      .features-title {
        font-family: 'Playfair Display', serif;
        font-size: clamp(36px, 5vw, 64px);
        font-weight: 400;
        font-style: italic;
        color: var(--white);
      }
      .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1px;
        background: rgba(201,169,110,0.1);
        border: 1px solid rgba(201,169,110,0.1);
      }
      .feature-item {
        background: var(--deep);
        padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 44px);
        display: flex;
        flex-direction: column;
        gap: 16px;
        transition: background 0.4s ease;
        position: relative;
        overflow: hidden;
      }
      .feature-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--gold);
        transition: width 0.4s ease;
      }
      .feature-item:hover {
        background: rgba(29,74,71,0.2);
      }
      .feature-item:hover::after {
        width: 100%;
      }
      .feature-icon {
        font-size: 28px;
        line-height: 1;
      }
      .feature-name {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 11px;
        font-weight: 300;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--gold);
      }
      .feature-desc {
        font-size: 15px;
        font-weight: 300;
        line-height: 1.7;
        color: var(--cream-dim);
      }
      /* ───── CAPACITY BAND ───── */
      .capacity-band {
        padding: clamp(60px, 8vw, 100px) clamp(40px, 8vw, 100px);
        background: var(--teal);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        flex-wrap: wrap;
        position: relative;
        overflow: hidden;
      }
      .capacity-band::before {
        content: '15';
        position: absolute;
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
        font-family: 'Playfair Display', serif;
        font-size: 300px;
        font-weight: 700;
        color: rgba(255,255,255,0.04);
        line-height: 1;
        pointer-events: none;
        user-select: none;
      }
      .capacity-left {
        flex: 1;
        min-width: 260px;
      }
      .capacity-number {
        font-family: 'Playfair Display', serif;
        font-size: clamp(72px, 12vw, 160px);
        font-weight: 700;
        color: var(--gold);
        line-height: 0.85;
        letter-spacing: -0.04em;
      }
      /* .capacity-label sits on the teal capacity-band bg (#1d4a47).
         cream-dim only hit 3.52:1 there — swapped to plain --cream (7.3:1). */
      .capacity-label {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 11px;
        font-weight: 100;
        letter-spacing: 0.45em;
        text-transform: uppercase;
        color: var(--cream);
        margin-top: 16px;
      }
      .capacity-right {
        flex: 1.5;
        min-width: 280px;
      }
      .capacity-desc {
        font-size: clamp(18px, 2.2vw, 26px);
        font-weight: 300;
        font-style: italic;
        line-height: 1.6;
        color: var(--white);
      }
      /* ───── GALLERY ───── */
      .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 380px 280px;
        gap: 3px;
        background: var(--black);
      }
      .gallery-item {
        overflow: hidden;
        position: relative;
      }
      .gallery-item:first-child {
        grid-column: 1 / 3;
      }
      .gallery-swatch {
        position: absolute;
        inset: 0;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .gallery-item:hover .gallery-swatch {
        transform: scale(1.06);
      }
      .swatch-1 {
        background-image: url('/assets/images/extracted/listening-room-01.jpg');
        background-size: cover;
        background-position: center;
      }
      .swatch-2 {
        background-image: url('/assets/images/extracted/listening-room-03.jpg');
        background-size: cover;
        background-position: center;
      }
      .swatch-3 {
        background-image: url('/assets/images/extracted/listening-room-00.jpg');
        background-size: cover;
        background-position: center 30%;
      }
      .swatch-4 {
        background-image: url('/assets/images/extracted/private-events-00.jpg');
        background-size: cover;
        background-position: center;
      }
      .swatch-5 {
        background-image: url('/assets/images/extracted/listening-room-06.jpg');
        background-size: cover;
        background-position: center;
      }
      /* Decorative SVG inside each gallery swatch */
      .gallery-deco {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.15;
      }
      /* ───── BOOKING ───── */
      .booking {
        padding: clamp(80px, 12vw, 160px) clamp(40px, 8vw, 100px) clamp(180px, 20vw, 260px);
        text-align: center;
        position: relative;
        background: var(--black);
      }
      .booking::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(29,74,71,0.12) 0%, transparent 70%);
        pointer-events: none;
      }
      .booking-eyebrow {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 10px;
        font-weight: 100;
        letter-spacing: 0.45em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 32px;
      }
      .booking-title {
        font-family: 'Playfair Display', serif;
        font-size: clamp(40px, 7vw, 96px);
        font-weight: 400;
        color: var(--white);
        line-height: 1.1;
        margin-bottom: 20px;
      }
      .booking-title em {
        font-style: italic;
        color: var(--gold);
      }
      .booking-sub {
        font-size: clamp(15px, 1.5vw, 19px);
        font-weight: 300;
        font-style: italic;
        color: var(--cream-dim);
        max-width: 520px;
        margin: 0 auto 52px;
        line-height: 1.7;
      }
      .booking-actions {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
      }
      .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 11px;
        font-weight: 300;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--black);
        background: var(--gold);
        padding: 20px 44px;
        transition: all 0.35s ease;
        position: relative;
        overflow: hidden;
      }
      .btn-primary:hover {
        background: var(--cream);
      }
      .btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 11px;
        font-weight: 300;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--cream);
        border: 1px solid rgba(201,169,110,0.35);
        padding: 20px 44px;
        transition: all 0.35s ease;
      }
      .btn-secondary:hover {
        border-color: var(--gold);
        color: var(--gold);
      }
      /* ───── FOOTER ───── */
      footer {
        border-top: 1px solid rgba(201,169,110,0.15);
        padding: 36px clamp(40px, 8vw, 100px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
      }
      .footer-logo {
        font-family: 'Playfair Display', serif;
        font-size: 18px;
        font-style: italic;
        color: var(--gold);
        text-decoration: none;
        letter-spacing: 0.05em;
      }
      .footer-address {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 10px;
        font-weight: 100;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--cream-dim);
        text-align: center;
      }
      .footer-link {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 10px;
        font-weight: 100;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--gold-dim);
        text-decoration: none;
        transition: color 0.2s ease;
      }
      .footer-link:hover {
        color: var(--gold);
      }
      /* ───── ANIMATIONS ───── */
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .reveal {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.9s ease, transform 0.9s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      /* ───── RESPONSIVE ───── */
      @media (max-width: 800px) {
        .about {
          grid-template-columns: 1fr;
        }
        .about-visual {
          display: none;
        }
        .gallery {
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 220px 220px 220px;
        }
        .gallery-item:first-child {
          grid-column: 1 / 3;
        }
        .capacity-band {
          flex-direction: column;
          text-align: center;
        }
        .booking-actions {
          flex-direction: column;
          align-items: center;
        }
        footer {
          flex-direction: column;
          align-items: center;
          text-align: center;
        }
        /* Hero record-player illustration is desktop atmosphere; at mobile
           widths it collides with the eyebrow / title / CTA. Hide it. */
        .hero .illo-hero {
          display: none;
        }
      }
      /* Tighten the scroll-line ("Descend") on tablet-portrait and below —
         smaller line, closer to the container bottom. */
      @media (max-width: 1024px) {
        .hero .scroll-line {
          bottom: 24px;
        }
        .hero .scroll-line::after {
          height: 32px;
        }
      }
      /* Mobile phones only: hero content is compressed and the base
         padding-bottom is too small to keep the CTA button clear of the
         scroll-line. On tablet/desktop the base padding already gives
         enough headroom, so this override is scoped to ≤760px. */
      @media (max-width: 760px) {
        .hero .hero-content {
          padding-bottom: clamp(140px, 22vw, 180px);
        }
      }
      /* ── ILLUSTRATIONS ── */
      /* Listening man above footer */
      .illo-footer-wrap {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: clamp(120px, 14vw, 210px);
        opacity: 0.7;
        filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
      }
      .illo {
        position: absolute;
        pointer-events: none;
        user-select: none;
        z-index: 3;
      }
      /* Hero illo: man with cocktail — bottom right of hero */
      .illo-hero {
        bottom: clamp(60px, 10vw, 130px);
        right: clamp(20px, 6vw, 100px);
        width: clamp(213px, 24vw, 373px);
        opacity: 0.55;
      }
      @keyframes floatY {
        0%,100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-12px);
        }
      }
      /* About section illo: man browsing records — overlapping the two panels */
      .illo-about-wrap {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: clamp(120px, 14vw, 210px);
        opacity: 0.7;
        filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
      }
    
      nav {
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:500;
        padding:24px clamp(32px,6vw,80px);
        display:flex;
        align-items:center;
        justify-content:space-between;
        transition:background .4s
      }
      nav.scrolled {
        background:rgba(10,9,7,.95);
        backdrop-filter:blur(8px)
      }
      .nav-logo img {
        height:40px;
        width:auto;
        display:block
      }
      .nav-links {
        display:flex;
        gap:clamp(20px,3vw,44px);
        list-style:none;
        align-items:center
      }
      .nav-links a {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        font-weight:300;
        letter-spacing:.35em;
        text-transform:uppercase;
        color:var(--cream-dim);
        text-decoration:none;
        transition:color .25s
      }
      .nav-links a:hover,.nav-links a.active {
        color:var(--gold)
      }
      .nav-reserve {
        border:1px solid rgba(201,169,110,.4);
        padding:10px 22px;
        color:var(--cream)!important;
        transition:all .3s!important
      }
      .nav-reserve:hover {
        background:var(--gold);
        color:var(--black)!important;
        border-color:var(--gold)!important
      }
      /* hamburger */
      .nav-burger {
        display:none;
        flex-direction:column;
        gap:5px;
        cursor:pointer;
        background:none;
        border:none;
        padding:4px
      }
      .nav-burger span {
        display:block;
        width:24px;
        height:1px;
        background:var(--cream);
        transition:all .3s
      }
      /* mobile nav */
      .nav-mobile {
        display:none;
        position:fixed;
        inset:0;
        background:var(--black);
        z-index:490;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:32px
      }
      .nav-mobile.open {
        display:flex
      }
      .nav-mobile a {
        font-family:'Playfair Display',serif;
        font-size:clamp(28px,6vw,48px);
        font-style:italic;
        color:var(--white);
        text-decoration:none;
        transition:color .25s
      }
      .nav-mobile a:hover {
        color:var(--gold)
      }
      /* sections */
      .section-label {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        font-weight:100;
        letter-spacing:.4em;
        text-transform:uppercase;
        color:var(--gold);
        margin-bottom:28px;
        display:flex;
        align-items:center;
        gap:16px
      }
      .section-label::before {
        content:'';
        display:block;
        width:32px;
        height:1px;
        background:var(--gold)
      }
      /* footer */
      footer {
        border-top:1px solid rgba(201,169,110,.15);
        padding:36px clamp(32px,6vw,80px);
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:24px;
        flex-wrap:wrap
      }
      .footer-logo img {
        height:44px;
        width:auto
      }
      .footer-middle {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        font-weight:100;
        letter-spacing:.3em;
        text-transform:uppercase;
        color:var(--cream-dim);
        text-align:center
      }
      .footer-links {
        display:flex;
        gap:24px
      }
      .footer-links a {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        font-weight:100;
        letter-spacing:.3em;
        text-transform:uppercase;
        color:var(--gold-dim);
        text-decoration:none;
        transition:color .2s
      }
      .footer-links a:hover {
        color:var(--gold)
      }

      /* ── MOBILE OVERRIDES (placed at end of file so source order wins
         over the base .illo rules that sit further up) ── */
      @media (max-width: 800px) {
        /* Decorative illustrations (man browsing records / listening man):
           on desktop they float over their sections as atmospheric accents.
           On mobile there isn't room for that overlay — drop them into
           normal flow so they sit BELOW the copy as a decorative flourish
           between sections instead of colliding with the paragraph text
           and the booking CTA. */
        .illo-about-wrap,
        .illo-footer-wrap {
          position: relative;
          bottom: auto;
          left: auto;
          transform: none;
          display: block;
          margin: 32px auto 0;
          width: clamp(96px, 24vw, 140px);
        }
        /* The booking section reserves a big padding-bottom (180px+) so
           the desktop illo overlay has room to sit inside it. Now that
           the illo flows OUT of the section on mobile, that reserved
           space becomes dead air between the CTA and the illustration. */
        .booking {
          padding-bottom: clamp(48px, 10vw, 80px);
        }
      }