/* ── TOKENS ── */
    :root {
      --bg:       oklch(97% 0.012 78);
      --bg-alt:   oklch(93.5% 0.018 74);
      --bg-dark:  oklch(12% 0.014 60);
      --ink:      oklch(14% 0.012 58);
      --ink-mid:  oklch(38% 0.010 62);
      --ink-soft: oklch(58% 0.008 65);
      --gold:     oklch(68% 0.10 76);
      --gold-lt:  oklch(87% 0.055 76);
      --rule:     oklch(82% 0.035 74);
      --ff-d: 'Cormorant Garamond', Georgia, serif;
      --ff-b: 'Jost', Helvetica, sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--ff-b);
      font-weight: 300;
      font-size: 16px;
      line-height: 1.65;
      overflow-x: hidden;
    }

    /* grain */
    body::after {
      content: '';
      position: fixed; inset: 0; z-index: 9999; pointer-events: none;
      opacity: 0.025;
      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)'/%3E%3C/svg%3E");
      background-size: 160px;
    }

    /* ── NAV ── */
    #nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 500;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.5rem 4rem;
      transition: background 0.4s, padding 0.3s;
    }
    #nav.scrolled {
      background: rgba(250,247,243,0.94);
      backdrop-filter: blur(12px);
      padding: 1rem 4rem;
      box-shadow: 0 1px 0 var(--rule);
    }

    .nav-logo {
      font-family: var(--ff-d);
      font-size: 1.05rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #fff;
      text-decoration: none;
      transition: color 0.3s;
    }
    #nav.scrolled .nav-logo { color: var(--ink); }
    .img1 {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background-image: url("/images/dj_jay.webp");
  background-size: cover;
  background-position: center;
  position: relative;
}
    .nav-links { display: flex; gap: 2.2rem; list-style: none; }
    .nav-links a {
      font-size: 0.68rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      text-decoration: none;
      transition: color 0.2s;
    }
    #nav.scrolled .nav-links a { color: var(--ink-soft); }
    .nav-links a:hover { color: var(--gold) !important; }

    .nav-cta {
      font-size: 0.65rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--bg-dark);
      background: var(--gold);
      padding: 0.6rem 1.4rem;
      text-decoration: none;
      transition: opacity 0.2s;
    }
    .nav-cta:hover { opacity: 0.85; }
    #nav.scrolled .nav-cta { color: var(--bg-dark); }

    /* ── HERO ── */
    #hero {
      position: relative;
      width: 100%; height: 100vh; min-height: 680px;
      display: flex; flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
    }

    /* ── video layer ── */
    .hero-video-wrap {
      position: absolute; inset: 0; z-index: 0;
      overflow: hidden;
    }

    /* real <video> when provided */
    .hero-video-wrap video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }

    /* placeholder until real video is dropped in */
    .hero-video-ph {
      position: absolute; inset: 0;
      /* deep cinematic dark — replace this background with your video */
      background:
        radial-gradient(ellipse 80% 60% at 60% 40%, oklch(18% 0.025 260) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 20% 70%, oklch(14% 0.018 50) 0%, transparent 60%),
        oklch(9% 0.010 55);
    }
    /* subtle animated shimmer to suggest movement */
    .hero-video-ph::before {
      content: '';
      position: absolute; inset: 0;
      background:
        repeating-linear-gradient(
          -38deg,
          transparent 0px, transparent 60px,
          rgba(196,164,107,0.025) 60px, rgba(196,164,107,0.025) 61px
        );
      animation: shimmer 18s linear infinite;
    }
    @keyframes shimmer {
      from { background-position: 0 0; }
      to   { background-position: 200px 200px; }
    }
    /* placeholder label */
    .hero-video-label {
      position: absolute;
      bottom: 1.4rem; left: 50%;
      transform: translateX(-50%);
      font-family: monospace; font-size: 0.6rem; letter-spacing: 0.14em;
      color: rgba(255,255,255,0.12); white-space: nowrap;
      z-index: 1;
    }

    /* ── gradient veil — bottom half only, breathes ── */
    .hero-overlay {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(
        to bottom,
        transparent                0%,
        transparent               28%,
        rgba(6,5,3,0.18)          48%,
        rgba(6,5,3,0.62)          68%,
        rgba(6,5,3,0.88)          82%,
        rgba(6,5,3,0.96)         100%
      );
    }
    /* very faint vignette around edges for depth */
    .hero-overlay::after {
      content: '';
      position: absolute; inset: 0;
      box-shadow: inset 0 0 120px rgba(0,0,0,0.35);
    }

    /* ── hero content — lower third ── */
    .hero-content {
      position: relative; z-index: 2;
      padding: 0 5.5rem 5rem;
      max-width: 72rem;
    }

    .hero-location {
      font-family: var(--ff-b);
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.8rem;
      display: flex; align-items: center; gap: 1rem;
      opacity: 0.9;
    }
    .hero-location::before {
      content: '';
      display: block; width: 2.2rem; height: 1px;
      background: var(--gold); opacity: 0.8;
    }

    .hero-h1 {
      font-family: var(--ff-d);
      font-weight: 300;
      font-size: clamp(3.6rem, 8.5vw, 8rem);
      line-height: 0.92;
      color: oklch(97% 0.006 75);
      letter-spacing: -0.02em;
      margin-bottom: 0;
      text-wrap: balance;
    }

    .hero-brand {
      font-family: var(--ff-d);
      font-style: italic;
      font-size: clamp(1.1rem, 2.2vw, 1.75rem);
      font-weight: 300;
      color: oklch(87% 0.055 76);
      letter-spacing: 0.04em;
      margin-top: 1rem;
      margin-bottom: 2rem;
      display: block;
    }

    .hero-rule {
      width: 3rem; height: 1px;
      background: var(--gold); opacity: 0.65;
      margin-bottom: 1.4rem;
    }

    .hero-tagline {
      font-family: var(--ff-b);
      font-weight: 300;
      font-size: clamp(0.72rem, 1.1vw, 0.88rem);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      line-height: 1.6;
    }

    /* ── scroll indicator — centered bottom ── */
    .hero-scroll {
      position: absolute;
      bottom: 2.6rem; left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
      text-decoration: none;
    }
    .hero-scroll-label {
      font-family: var(--ff-b);
      font-size: 0.55rem; letter-spacing: 0.35em; text-transform: uppercase;
      color: rgba(255,255,255,0.3);
    }
    .hero-scroll-line {
      width: 1px; height: 3.5rem;
      background: linear-gradient(to bottom, rgba(196,164,107,0.6), transparent);
      animation: scrollPulse 2.4s ease-in-out infinite;
      transform-origin: top;
    }
    @keyframes scrollPulse {
      0%   { transform: scaleY(0); opacity: 0; }
      30%  { opacity: 1; }
      100% { transform: scaleY(1); opacity: 0; }
    }

    /* ── fade transition to next section ── */
    .hero-fade {
      position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
      height: 8rem;
      background: linear-gradient(to bottom, transparent, oklch(12% 0.014 60));
      pointer-events: none;
    }

    .btn-primary {
      display: inline-flex; align-items: center; gap: 0.8rem;
      font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase;
      color: var(--bg-dark); background: var(--gold);
      padding: 0.9rem 2rem; text-decoration: none;
      transition: opacity 0.2s;
    }
    .btn-primary:hover { opacity: 0.85; }

    .btn-ghost {
      display: inline-flex; align-items: center; gap: 0.7rem;
      font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase;
      color: rgba(255,255,255,0.65);
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,0.3);
      padding-bottom: 0.25rem;
      transition: color 0.2s, border-color 0.2s;
    }
    .btn-ghost:hover { color: var(--gold); border-color: var(--gold); }

    /* ── PROOF BAND ── */
    #proof {
      background: var(--bg-dark);
      padding: 1.4rem 4rem;
      display: flex; align-items: center; gap: 2.5rem;
      overflow: hidden;
    }
    .proof-label {
      font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
      color: oklch(45% 0.01 60);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .proof-divider {
      width: 1px; height: 1.2rem;
      background: oklch(25% 0.01 60);
      flex-shrink: 0;
    }
    .proof-logos {
      display: flex; align-items: center; gap: 2.8rem;
      flex-wrap: wrap;
    }
    .proof-item {
      font-family: var(--ff-d);
      font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: oklch(55% 0.012 65);
      white-space: nowrap;
    }

    /* ── SECTION HELPERS ── */
    .section-wrap { padding: 7rem 5rem; }
    .section-wrap.alt { background: var(--bg-alt); }
    .section-wrap.dark { background: var(--bg-dark); color: var(--bg); }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 0.8rem;
      font-size: 0.62rem; letter-spacing: 0.35em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 2rem;
    }
    .eyebrow::before {
      content: ''; display: block; width: 1.8rem; height: 1px; background: var(--gold);
    }

    .section-title {
      font-family: var(--ff-d); font-weight: 300;
      font-size: clamp(2.2rem, 3.8vw, 3.4rem);
      line-height: 1.08; margin-bottom: 1.6rem;
    }
    .section-title em { font-style: italic; color: var(--gold); }
    .dark .section-title em { color: var(--gold-lt); }

    /* ── ABOUT ── */
    .about-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 7rem; align-items: center;
    }

    .about-img {
      position: relative;
    }
    .about-ph {
      width: 100%; aspect-ratio: 4/5;
      background: linear-gradient(155deg, var(--gold-lt), var(--rule));
      position: relative;
      display: flex; align-items: center; justify-content: center;
    }
    .about-ph::before {
      content: '';
      position: absolute; inset: 0;
      background-image: repeating-linear-gradient(
        -45deg, transparent, transparent 14px,
        rgba(160,130,75,0.065) 14px, rgba(160,130,75,0.065) 15px
      );
    }
    .about-ph-label {
      font-family: monospace; font-size: 0.7rem; letter-spacing: 0.08em;
      color: var(--ink-soft); text-align: center; padding: 1rem; position: relative;
    }
    .about-frame {
      position: absolute; top: -1.2rem; left: -1.2rem;
      right: 1.2rem; bottom: 1.2rem;
      border: 1px solid var(--gold-lt);
      pointer-events: none;
    }

    .about-text p {
      color: var(--ink-mid); font-size: 1.02rem; line-height: 1.82;
      max-width: 46ch; margin-bottom: 1.3rem;
    }

    .about-quote {
      margin: 2rem 0;
      padding-left: 1.4rem;
      border-left: 2px solid var(--gold);
    }
    .about-quote p {
      font-family: var(--ff-d); font-style: italic;
      font-size: 1.15rem; color: var(--ink); line-height: 1.55;
    }

    .about-pills {
      display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem;
    }
    .pill {
      font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
      border: 1px solid var(--rule); color: var(--ink-soft);
      padding: 0.35rem 0.9rem;
    }

    /* ── PRESTATIONS ── */
    .presta-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border: 1px solid var(--rule);
    }

    .presta-card {
      padding: 2.4rem 2rem;
      border-right: 1px solid var(--rule);
      text-decoration: none; color: inherit;
      transition: background 0.3s;
      display: flex; flex-direction: column;
      gap: 1rem;
    }
    .presta-card:last-child { border-right: none; }
    .presta-card:hover { background: var(--bg-alt); }

    .presta-num {
      font-family: var(--ff-d); font-weight: 300;
      font-size: 2.4rem; color: var(--gold-lt);
      line-height: 1;
    }

    .presta-name {
      font-family: var(--ff-d); font-weight: 500;
      font-size: 1.28rem; line-height: 1.2;
      color: var(--ink);
    }

    .presta-sub {
      font-size: 0.72rem; letter-spacing: 0.08em;
      color: var(--ink-soft); text-transform: uppercase;
      letter-spacing: 0.15em;
    }

    .presta-body {
      font-size: 0.9rem; color: var(--ink-mid);
      line-height: 1.7; flex: 1;
    }

    .presta-link {
      font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--gold); display: inline-flex; align-items: center; gap: 0.5rem;
      margin-top: auto;
    }
    .presta-link svg { transition: transform 0.2s; }
    .presta-card:hover .presta-link svg { transform: translateX(4px); }

    /* ── GALLERY ── */
    .gallery-intro {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 3rem; align-items: end;
      margin-bottom: 2.8rem;
    }
    .gallery-desc {
      font-size: 0.95rem; color: var(--ink-soft); line-height: 1.75;
      max-width: 38ch; align-self: end;
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 0.6rem;
    }

    .g-item { position: relative; overflow: hidden; }
    .g-item:nth-child(1) { grid-column: 1/6; grid-row: 1/3; }
    .g-item:nth-child(2) { grid-column: 6/9; }
    .g-item:nth-child(3) { grid-column: 9/13; }
    .g-item:nth-child(4) { grid-column: 6/10; }
    .g-item:nth-child(5) { grid-column: 10/13; }

    .g-ph {
      width: 100%; min-height: 200px; height: 100%;
      background: linear-gradient(130deg, var(--bg-alt), var(--gold-lt));
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      font-family: monospace; font-size: 0.65rem; letter-spacing: 0.08em;
      color: var(--ink-soft); text-align: center; padding: 1rem;
      position: relative;
    }
    .g-ph::before {
      content: ''; position: absolute; inset: 0;
      background-image: repeating-linear-gradient(
        45deg, transparent, transparent 12px,
        rgba(160,130,75,0.055) 12px, rgba(160,130,75,0.055) 13px
      );
    }
    .g-ph span { position: relative; }

    .g-caption {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 0.6rem 0.8rem;
      background: linear-gradient(to top, rgba(10,8,5,0.7), transparent);
      font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      opacity: 0; transition: opacity 0.3s;
    }
    .g-item:hover .g-caption { opacity: 1; }

    /* ── AVIS ── */
    .avis-stars {
      color: var(--gold); font-size: 1rem; letter-spacing: 0.1em;
      margin-bottom: 0.6rem;
    }

    .avis-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem;
    }

    .avis-card {
      padding: 2.2rem;
      border: 1px solid var(--rule);
      display: flex; flex-direction: column; gap: 1rem;
    }

    .avis-quote {
      font-family: var(--ff-d); font-style: italic;
      font-size: 1.1rem; line-height: 1.6; color: var(--ink);
      flex: 1;
    }
    .avis-quote::before { content: '\201C'; }
    .avis-quote::after  { content: '\201D'; }

    .avis-author {
      font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--ink-soft);
    }
    .avis-event {
      font-size: 0.72rem; color: var(--gold); letter-spacing: 0.05em;
      margin-top: 0.15rem;
    }

    /* ── ZONE ── */
    .zone-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 6rem; align-items: center;
    }

    .zone-map {
      aspect-ratio: 4/3;
      background: var(--bg-alt);
      border: 1px solid var(--rule);
      position: relative;
      display: flex; align-items: center; justify-content: center;
    }
    .zone-map-ph {
      font-family: monospace; font-size: 0.7rem; letter-spacing: 0.08em;
      color: var(--ink-soft); text-align: center;
    }
    .zone-map::before {
      content: ''; position: absolute; inset: 0;
      background-image: repeating-linear-gradient(
        0deg, transparent, transparent 28px,
        var(--rule) 28px, var(--rule) 29px
      ),
      repeating-linear-gradient(
        90deg, transparent, transparent 28px,
        var(--rule) 28px, var(--rule) 29px
      );
      opacity: 0.4;
    }

    .zone-cities {
      display: flex; flex-wrap: wrap; gap: 0.5rem;
      margin-top: 1.6rem;
    }

    .zone-city {
      font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--ink-mid); padding: 0.3rem 0.7rem;
      border: 1px solid var(--rule);
    }

    .zone-note {
      margin-top: 1.6rem;
      font-size: 0.85rem; color: var(--ink-soft); line-height: 1.7;
      font-style: italic;
    }

    /* ── CONTACT ── */
    .contact-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 8rem; align-items: start;
    }

    .contact-left h2 { color: var(--bg); }
    .contact-left p {
      color: oklch(65% 0.01 60); font-size: 0.97rem;
      line-height: 1.78; max-width: 38ch; margin-bottom: 2.5rem;
    }

    .contact-info-block { border-top: 1px solid oklch(22% 0.01 60); padding-top: 1.8rem; }
    .ci-row { margin-bottom: 1.2rem; }
    .ci-key { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.15rem; }
    .ci-val { font-size: 0.97rem; color: var(--bg); }
    .ci-val a { color: var(--bg); text-decoration: none; }
    .ci-val a:hover { color: var(--gold); }

    .form { display: flex; flex-direction: column; gap: 1.5rem; }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
    .form-group { display: flex; flex-direction: column; gap: 0.45rem; }
    .form-label { font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
    .form-input, .form-select, .form-textarea {
      background: transparent; border: none;
      border-bottom: 1px solid oklch(28% 0.01 60);
      color: var(--bg);
      font-family: var(--ff-b); font-weight: 300; font-size: 0.93rem;
      padding: 0.55rem 0; outline: none; width: 100%;
      transition: border-color 0.2s;
    }
    .form-input::placeholder, .form-textarea::placeholder { color: oklch(42% 0.01 60); }
    .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--gold); }
    .form-select { cursor: pointer; }
    .form-select option { background: var(--bg-dark); color: var(--bg); }
    .form-textarea { resize: none; height: 5.5rem; }

    .btn-submit {
      align-self: flex-start;
      background: var(--gold); border: none;
      color: var(--bg-dark);
      font-family: var(--ff-b); font-weight: 400;
      font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase;
      padding: 1rem 2.4rem; cursor: pointer;
      transition: opacity 0.2s;
    }
    .btn-submit:hover { opacity: 0.85; }

    /* ── FOOTER ── */
    footer {
      background: var(--bg-dark);
      border-top: 1px solid oklch(18% 0.01 60);
      padding: 2rem 5rem;
      display: flex; align-items: center; justify-content: space-between;
    }
    .ft-brand { font-family: var(--ff-d); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bg); }
    .ft-tagline { font-family: var(--ff-d); font-style: italic; font-size: 0.85rem; color: oklch(48% 0.01 60); }
    .ft-copy { font-size: 0.6rem; letter-spacing: 0.1em; color: oklch(38% 0.01 60); }
    .ft-links { display: flex; gap: 1.8rem; }
    .ft-links a { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: oklch(48% 0.01 60); text-decoration: none; transition: color 0.2s; }
    .ft-links a:hover { color: var(--gold); }

    /* ── ANIMATIONS ── */
    .reveal {
      opacity: 0; transform: translateY(18px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible { opacity: 1; transform: none; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: none; }
    }
    .hero-location { animation: fadeUp 0.9s 0.5s  cubic-bezier(.22,.8,.36,1) both; }
    .hero-h1       { animation: fadeUp 1.1s 0.72s cubic-bezier(.22,.8,.36,1) both; }
    .hero-brand    { animation: fadeUp 0.8s 1.05s cubic-bezier(.22,.8,.36,1) both; }
    .hero-rule     { animation: fadeUp 0.6s 1.22s cubic-bezier(.22,.8,.36,1) both; }
    .hero-tagline  { animation: fadeUp 0.8s 1.35s cubic-bezier(.22,.8,.36,1) both; }
    .hero-scroll   { animation: fadeUp 0.7s 1.8s  cubic-bezier(.22,.8,.36,1) both; }

    /* ── TWEAKS ── */
    #tweaks-panel {
      display: none; position: fixed;
      bottom: 1.5rem; right: 1.5rem; z-index: 9998;
      background: var(--bg); border: 1px solid var(--rule);
      box-shadow: 0 8px 32px rgba(0,0,0,0.14);
      padding: 1.4rem 1.6rem; width: 230px;
      font-family: var(--ff-b);
    }
    #tweaks-panel.open { display: block; }
    #tweaks-panel h3 { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.2rem; }
    .tw-row { margin-bottom: 1rem; }
    .tw-row label { display:block; font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:0.35rem; }
    .tw-row select, .tw-row input[type=color] { width:100%; font-family:var(--ff-b); font-size:0.8rem; padding:0.4rem; border:1px solid var(--rule); background:var(--bg); color:var(--ink); cursor:pointer; }
    .tw-row input[type=color] { height:2.1rem; padding:0.1rem; }

    /* ── RESPONSIVE ── */
    @media (max-width: 960px) {
      #nav { padding: 1.2rem 2rem; }
      #nav.scrolled { padding: 0.9rem 2rem; }
      .section-wrap { padding: 5rem 2rem; }
      .hero-content { padding: 0 2.5rem 4rem; }
      .about-grid, .zone-grid, .contact-grid, .gallery-intro { grid-template-columns: 1fr; gap: 3rem; }
      .presta-grid { grid-template-columns: 1fr 1fr; }
      .presta-card { border-bottom: 1px solid var(--rule); }
      .presta-card:nth-child(odd) { border-right: 1px solid var(--rule); }
      .presta-card:nth-child(even) { border-right: none; }
      .avis-grid { grid-template-columns: 1fr; }
      .gallery-grid { grid-template-columns: repeat(2,1fr); }
      .g-item:nth-child(n) { grid-column: auto; grid-row: auto; }
      footer { flex-direction: column; gap: 1rem; text-align: center; }
      #proof { padding: 1.2rem 2rem; }
    }