:root{
      --onyx:#0F1117;--ink:#E8E6E3;--muted:#B8BDC9;--gold:#C9A86A;--rose:#E9B4B7;
      --panel:#141824;--edge:#2A2F3A;--radius:16px;--shadow:0 16px 44px rgba(0,0,0,.35);--maxw:1200px
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{font:16px/1.65 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;color:var(--ink);background:var(--onyx)}
    a{color:var(--ink);text-decoration:none}
    a:hover{text-decoration:underline}
    img{max-width:100%;display:block}
    .container{max-width:var(--maxw);margin:auto;padding:0 20px}

    header.top{position:sticky;top:0;z-index:60;background:rgba(20,24,36,.65);backdrop-filter:blur(10px);border-bottom:1px solid var(--edge)}
    .nav{height:70px;display:flex;align-items:center;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:14px;font-weight:700}
    .brand svg{width:36px;height:36px}
    .controls{display:flex;gap:10px;align-items:center}
    .cta{display:inline-block;padding:10px 16px;border-radius:999px;background:linear-gradient(135deg,var(--gold),#b8935c);color:#111;border:1px solid #b8935c;font-weight:600;transition:transform .18s ease, box-shadow .18s ease}
    .cta.secondary{background:#1a2030;color:var(--ink);border-color:#394356}
    .cta:hover{opacity:.92;text-decoration:none;transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.32)}

    .lang{position:relative;display:inline-grid;grid-auto-flow:column;gap:0;border:1px solid var(--edge);border-radius:999px;overflow:hidden}
    .lang button{position:relative;padding:8px 12px;background:transparent;border:0;color:var(--muted);font-weight:600;cursor:pointer}
    .lang .slider{position:absolute;inset:2px auto 2px 2px;width:50%;background:#111523;border-radius:999px;border:1px solid #30384a;transition:transform .25s ease}
    .lang[data-active="fr"] .slider{transform:translateX(100%)}
    .lang[data-active="en"] .btn-en{color:var(--gold)}
    .lang[data-active="fr"] .btn-fr{color:var(--gold)}

    [data-obs]{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
    [data-obs].in{opacity:1;transform:none}

    :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
    ::selection{background:rgba(201,168,106,.35);color:var(--ink)}



    /* Hero */
    .hero{position:relative;padding:0 0 36px;border-bottom:1px solid var(--edge)}
    /* wider on larger screens */
    .hero > .container{max-width:min(1600px,96vw)}
    .stage{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--edge);box-shadow:var(--shadow);margin-top:14px}
    .hero .media-wrap{position:relative;width:100%;height:62vh;min-height:420px;overflow:hidden}

    /* full-bleed hero on phones (edge-to-edge), keep text padded */
    @media (max-width:640px){
      .hero > .container{max-width:100vw;padding:0}
      .hero .stage{margin-top:0;border-radius:0;border-left:0;border-right:0}
      .hero .content{padding:16px 16px calc(18px + env(safe-area-inset-bottom))}
    }

    /* HERO FILL & ZOOM FIX */
    .hero .media-wrap picture{position:absolute;inset:0;display:block;z-index:0}
    .hero .media-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(15%) brightness(90%);will-change:transform;backface-visibility:hidden;transform-origin:center}
    .hero .media-wrap .veil{position:absolute;inset:0;z-index:3;
      background:
        radial-gradient(1200px 520px at 50% 80%, rgba(201,168,106,.10), rgba(20,24,36,.25) 65%, rgba(20,24,36,.45) 100%),
        linear-gradient(180deg, rgba(15,17,23,0) 0%, rgba(15,17,23,.32) 58%, rgba(15,17,23,.62) 100%);
    }
    .hero .content{position:absolute;inset:auto 0 0 0;padding:20px;background:linear-gradient(180deg, rgba(12,14,20,.18), rgba(12,14,20,.55));pointer-events:auto;z-index:4}

    /* kicker removed */

    h1{font-family:"Playfair Display", Georgia, serif;font-size:clamp(30px,5vw,50px);line-height:1.15;margin:10px 0 6px;color:var(--ink)}
    /* subhead: single-span (no duplicates) */
    .hero .subhead{margin:6px 0 0 0;color:var(--muted);font-size:clamp(14px,2.6vw,18px);min-height:1.6em}
    .hero .subhead span{display:inline-block;opacity:1;transition:opacity .4s ease}
    .hero .subhead span.fadeout{opacity:0}

    /* minimalist bottom link + arrow (hide on small screens) */
    .hero .bottom-link{
      position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom) + 12px); transform:translateX(-50%);
      display:flex; flex-direction:column; align-items:center; gap:6px; z-index:5;
      pointer-events:auto;
    }
    .hero .bottom-link a{
      font-weight:600; letter-spacing:.2px; color:#e8e6e3; text-decoration:none; padding:8px 12px;
      background:rgba(15,17,23,.42); border:1px solid #2a3040; border-radius:999px;
    }
    .hero .bottom-link a:hover{ text-decoration:underline }
    .hero .bottom-link svg{ width:16px; height:16px; opacity:.85 }
    @media (max-width:768px){ .hero .bottom-link{ display:none } }

    section{padding:56px 0;scroll-margin-top:72px}
    .card{background:var(--panel);border:1px solid var(--edge);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
    .section-title{font-family:"Playfair Display", Georgia, serif;color:var(--ink);font-size:clamp(22px,3.4vw,32px);margin:0 0 8px;text-wrap:balance}
    .muted{color:var(--muted)}
    .rule{height:1px;background:#2a3040;margin:24px 0} .tiny{font-size:12px;line-height:1.45}

    .gallery{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:14px}
    .portrait{position:relative;border-radius:14px;overflow:hidden;border:1px solid #2d3340;background:#0f1320;min-height:200px;aspect-ratio:3/4;transform:translateY(10px);opacity:0;content-visibility:auto;contain-intrinsic-size:480px 640px}
    .portrait.in{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease}
    .portrait img{width:100%;height:100%;object-fit:cover;filter:contrast(100%) saturate(96%)}
    figcaption{position:absolute;inset:auto 0 0 0;color:#fff;padding:12px 12px 10px;background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));font-weight:600;letter-spacing:.2px}

    .rates-table{width:100%;border-collapse:collapse;margin-top:8px}
    .rates-table th,.rates-table td{padding:14px 10px;border-bottom:1px dashed #384152;text-align:left}
    .pill-note{display:flex;gap:12px;align-items:flex-start;margin:16px 0;padding:10px 12px;border-radius:12px;border:1px dashed #3a4152;background:#121726}
    .badge{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--rose);color:#1c1a1a;font-size:12px;border:1px solid #7b5a61}

    footer{padding-bottom:40px}
    footer .tiny{color:var(--muted)}

    /* Gentle hero entrance (kicker removed) */
    @keyframes riseFade { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
    @media (prefers-reduced-motion: no-preference) {
      .hero h1 { animation: riseFade .7s ease .22s both; }
    }
    .cta { position: relative; isolation:isolate; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 24px rgba(0,0,0,.18); }
    .cta::after { content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s ease;
                  background: radial-gradient(120px 40px at 50% 120%, rgba(201,168,106,.28), rgba(201,168,106,0)); z-index:-1; }
    .cta:hover::after { opacity:.8; }
    .cta:active { transform: translateY(0) scale(.98); box-shadow: 0 6px 18px rgba(0,0,0,.26); }
  

    .brand .lunar-logo{ width:36px; height:36px; display:inline-block; vertical-align:middle; margin-right:2px; }
    .brand .lunar-logo svg{ width:100%; height:100%; display:block; }
    @media (prefers-reduced-motion: reduce){ .brand .lunar-logo .ring{ stroke-width: .6 !important; } }
  

  .brand span{
    font-family: "eds-market-main-script", "Playfair Display", Georgia, serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(22px, 3.6vw, 34px);
    letter-spacing: .4px;
    line-height: 1;
  }


  @media (prefers-reduced-motion: no-preference){
    .hero .media-wrap .veil{ background-position:50% 80%,50% 0%; background-size:140% 140%,100% 100%; animation: auroraShift 32s ease-in-out infinite alternate; }
    @keyframes auroraShift{ 0%{background-position:50% 80%,50% 0%;filter:saturate(1) brightness(1)} 50%{background-position:58% 72%,50% 0%;filter:saturate(1.03) brightness(1.01)} 100%{background-position:44% 66%,50% 0%;filter:saturate(1.06) brightness(1.02)} }
  }
  @media (prefers-reduced-motion: reduce){ .hero .media-wrap .veil{ animation:none !important } }

  header.top .cta{ position:relative; padding-left:42px; }
  header.top .cta::before{
    content:""; position:absolute; left:12px; top:50%; width:18px; height:18px; transform: translateY(-50%) translateX(-6px) scale(.9);
    background-repeat:no-repeat; background-size:contain; background-position:center;
    opacity:0; filter: drop-shadow(0 0 8px rgba(233,180,183,.22)); animation: iconSlide 6s ease-in-out infinite;
  }
  header.top .cta[href^="tel:"]::before{ background-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="%23E9B4B7" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5.4 2.8h3a1.6 1.6 0 0 1 1.6 1.5l.2 2a1.6 1.6 0  0 1-.5 1.3L8.6 9a12.6 12.6 0  0 0 6.4 6.4l1.4-1.1c.4-.3.9-.5 1.3-.5l2 .2a1.6 1.6 0  0  1 1.5 1.6v3a1.6 1.6 0  0 1-1.6 1.6h-.8C10.6 21.2 2.8 13.4 2.8 4.4v-.8A1.6 1.6 0  0 1 4.4 2h1z"/></g></svg>'); animation-delay:.2s; }
  @keyframes iconSlide{ 0%,10%{ transform:translateY(-50%) translateX(-8px) scale(.9); opacity:0 } 18%,30%{ transform:translateY(-50%) translateX(0) scale(1); opacity:.95 } 38%,80%{ transform:translateY(-50%) translateX(0) scale(1); opacity:.95 } 88%,100%{ transform:translateY(-50%) translateX(-8px) scale(.9); opacity:0 } }
  @media (hover:hover){ header.top .cta::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; background: radial-gradient(60% 60% at 50% 50%, rgba(233,180,183,.20), transparent 60%); opacity:0; filter: blur(8px); transition: opacity .3s ease; } header.top .cta:hover::after, header.top .cta:focus-visible::after{ opacity:.35 } }
  

  /* === Neon pill style for HEADER CTA (Call) ===
     Keep the left icon padding from your design-enhancements */
  header.top .cta,
  header.top .cta.secondary{
    min-width: 150px;                  /* consistent size */
    text-align: center;
    border-radius: 999px;
    background: rgba(20,24,36,.55) !important;
    color: #e8e6e3 !important;
    border: 1px solid rgba(233,180,183,.45) !important;
    box-shadow:
      0 0 0 2px rgba(233,180,183,.20) inset,
      0 0 12px rgba(255, 0, 170, .55),
      0 0 28px rgba(255, 0, 170, .28) !important;
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
    padding-left: 42px !important;     /* preserve space for the icon ::before */
  }
  header.top .cta:hover,
  header.top .cta.secondary:hover{
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow:
      0 0 0 2px rgba(233,180,183,.30) inset,
      0 0 16px rgba(255, 0, 170, .70),
      0 0 36px rgba(255, 0, 170, .36) !important;
  }
  header.top .cta:active,
  header.top .cta.secondary:active{
    transform: translateY(0) scale(.98);
  }

  /* If you previously forced a dark gradient for CALL (cta-contrast-fix),
     this line neutralizes it so the neon wins */
  header.top .cta[href^="tel:"]{
    background: rgba(20,24,36,.55) !important;
    border-color: rgba(233,180,183,.45) !important;
    color: #e8e6e3 !important;
  }

  /* Optional: on very narrow screens, make both header CTAs equal width */
  @media (max-width: 768px){
    header.top .controls{ gap: 8px; }
    header.top .cta, header.top .cta.secondary{
      min-width: 160px;
    }
  }


    header.top .cta[href^="tel:"]{
      background: linear-gradient(135deg, #1A2030, #111523) !important;
      border-color: #4a556e !important;
      color: var(--ink) !important;
    }
    header.top .cta[href^="tel:"]::before{
      background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="%23C9A86A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5.4 2.8h3a1.6 1.6 0 0 1 1.6 1.5l.2 2a1.6 1.6 0  0 1-.5 1.3L8.6 9a12.6 12.6 0  0 0 6.4 6.4l1.4-1.1c.4-.3.9-.5 1.3-.5l2 .2a1.6 1.6 0  0 1 1.5 1.6v3a1.6 1.6 0  0 1-1.6 1.6h-.8C10.6 21.2 2.8 13.4 2.8 4.4v-.8A1.6 1.6 0  0 1 4.4 2h1z"/></g></svg>');
    }
    header.top .cta[href^="tel:"]::after{
      background: radial-gradient(60% 60% at 50% 50%, rgba(201,168,106,.25), transparent 60%);
    }
  

  .hamburger{ display:none; position:relative; width:44px; height:44px; margin-left:8px;
    border:1px solid var(--edge); border-radius:10px; background:#111523; }
  .hamburger .bar{ position:absolute; left:10px; right:10px; height:2px; background:#e8e6e3; border-radius:2px; }
  .hamburger .bar:nth-child(1){ top:13px } .hamburger .bar:nth-child(2){ top:21px } .hamburger .bar:nth-child(3){ top:29px }
  .hamburger[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(8px) rotate(45deg) }
  .hamburger[aria-expanded="true"] .bar:nth-child(2){ opacity:0 }
  .hamburger[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

  #navDrawer{ position:fixed; inset:auto 0 0 0; top:70px; z-index:80; background:rgba(15,17,23,.85); backdrop-filter: blur(8px);
    border-top:1px solid var(--edge); padding:12px; }
  #navDrawer[hidden]{ display:none !important; }
  #navDrawer .drawer-inner{ max-width:var(--maxw); margin:auto; padding:0 20px; display:grid; gap:12px; }
  #navDrawer .drawer-row{ display:flex; gap:8px; flex-wrap:wrap; }
  #navDrawer .btn-en, #navDrawer .btn-fr{
    padding:10px 14px; border-radius:999px; background:#111523; border:1px solid #30384a; color:var(--ink); font-weight:600;
  }

  @media (max-width: 768px){
    header.top .controls{ display:none !important; }
    .hamburger{ display:inline-block; }
    header.top .brand{ gap:10px }
  }

  @media (max-width: 768px){
    .brand span.sms-mode{ position:relative; padding-left:26px; }
    .brand span.sms-mode::before{
      content:""; position:absolute; left:0; top:50%; width:18px; height:18px; transform:translateY(-50%);
      background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="%23E9B4B7" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3.5 6l7.7 6a2 2 0 0 0 2.6 0L21 6"/></g></svg>') center/contain no-repeat;
      filter: drop-shadow(0 0 6px rgba(233,180,183,.35));
      opacity:.9;
      animation: smsPing 6s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce){
      .brand span.sms-mode::before{ animation: none; }
    }
    @keyframes smsPing{
      0%,70%{ transform:translateY(-50%) scale(1); opacity:.9 }
      73%{ transform:translateY(-48%) scale(1.08); opacity:1 }
      76%{ transform:translateY(-50%) scale(1); opacity:.9 }
      100%{ transform:translateY(-50%) scale(1); opacity:.9 }
    }
  }


  /* One source of truth for header height */
  :root{ --header-h: 70px; }

  /* Ensure sticky header always beats hero/webgl/video */
  header.top{ z-index: 120 !important; }
  /* The hamburger should never be covered */
  .hamburger{ z-index: 121; }

  /* Drawer sits EXACTLY under the header and is on top of everything */
  #navDrawer{
    position: fixed;
    left: 0; right: 0;
    top: var(--header-h) !important;
    z-index: 200 !important;              /* above header (120), hero, page video */
    transform: translateY(-6px);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
  }
  #navDrawer[hidden]{ display:none !important; visibility:hidden !important; opacity:0 !important; }

  /* Visible state (JS toggles [hidden]) */
  #navDrawer:not([hidden]){
    transform: none;
    opacity: 1;
  }

  /* Prevent background scroll when drawer is open */
  body.nav-open{ overflow: hidden; }

  /* iOS safe-area nicety */
  @supports (padding: max(0px)){
    #navDrawer .drawer-inner{ padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  }


  /* Hide the header when scrolled down (JS toggles header-auto-hide) */
  body.header-auto-hide header.top{
    transform: translateY(-100%);
    transition: transform .18s ease;
    will-change: transform;
    pointer-events: none; /* don't block the hotspot while hidden */
  }

  /* Show the header (JS toggles header-show) */
  body.header-show header.top{
    transform: translateY(0);
    pointer-events: auto;
  }

  /* The thin, invisible hover strip at the very top that reveals header */
  .header-hotspot{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 14px;               /* easy to hit */
    z-index: 10000;             /* above everything, incl. header when hidden */
    pointer-events: auto;
  }


  /* Invisible hover strip at the very top that "catches" the pointer */
  .header-hotspot{
    position: fixed !important;   /* override any global rules */
    left: 0; right: 0; top: 0;
    height: 24px;                 /* slightly taller for easier hit */
    z-index: 10000 !important;    /* always above page content & hidden header */
    pointer-events: auto;
    background: transparent;
  }

  /* Smooth slide for the header */
  header.top{
    transition: transform .18s ease;
    will-change: transform;
  }

  /* Hidden when scrolled and not actively showing */
  body.header-auto-hide:not(.header-show) header.top{
    transform: translateY(-100%);
    pointer-events: none; /* avoid fighting the hotspot while hidden */
  }

  /* Visible near the top, or when hovering/focused */
  body.header-show header.top,
  body:not(.header-auto-hide) header.top{
    transform: translateY(0);
    pointer-events: auto;
  }


  /* Make header always visible & fixed */
  header.top{
    position: fixed !important;
    left: 0; right: 0; top: 0;
    transform: none !important;
    z-index: 200 !important; /* above everything else you have */
  }

  /* Neutralize any auto-hide transforms */
  body.header-auto-hide header.top,
  body.header-show header.top{
    transform: none !important;
    pointer-events: auto !important;
  }

  /* Kill the hover strip */
  .header-hotspot{ display: none !important; }
  
  /* Keep anchor scrolling tidy with a fixed header */
  :root{ --header-h: 70px; }
  section, [id]{ scroll-margin-top: var(--header-h); }


  /* Reserve space for the vertical scrollbar to avoid layout shift */
  html { overflow-y: scroll; scrollbar-gutter: stable; }

  /* Firefox: simple color pairing (thumb track) */
  html {
    scrollbar-width: thin;
    scrollbar-color: #ff38ce rgba(20,24,36,0.35); /* thumb, track */
  }

  /* Chromium/WebKit (Chrome, Edge, Safari) */
  ::-webkit-scrollbar {
    width: 12px;            /* visible, but not bulky */
    height: 12px;           /* for any horizontal bars that appear */
  }

  ::-webkit-scrollbar-track {
    background: rgba(20,24,36,0.35);             /* dark, semi-transparent track */
    border-radius: 8px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    /* Neon pink thumb with a subtle glow */
    background: linear-gradient(180deg, #ff4ad5, #ff2fcf);
    border: 3px solid rgba(20,24,36,0.35);       /* creates an inset gutter so it pops */
    box-shadow:
      0 0 10px rgba(255, 47, 207, 0.55),
      0 0 18px rgba(255, 47, 207, 0.35) inset;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff67dc, #ff42d4);
    box-shadow:
      0 0 12px rgba(255, 47, 207, 0.75),
      0 0 22px rgba(255, 47, 207, 0.45) inset;
  }

  /* Optional: slightly thinner on very small screens (where overlay scrollbars may be used anyway) */
  @media (max-width: 600px) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
  }


  /* Kill the empty band above the day heading */
  .list .day { padding-top: 0; }

  .list .day .head{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: .25rem .75rem;
    padding: 8px 12px 6px !important;   /* reduce top padding */
    background: transparent !important;  /* remove old stripe bg if any */
    margin-top: 0 !important;
  }

  /* Ensure day/date stack cleanly on narrow screens */
  @media (max-width:640px){
    .list .day .head .left{ display:flex; flex-direction:column; gap:.1rem; }
  }

  /* Just in case any inner elements carried margin-tops */
  .list .day .head .dow,
  .list .day .head .date { margin: 0 !important; }


  :root{ --header-h: 70px; }
  header.top{ z-index: 120 !important; }
  .hamburger{ z-index: 121; }
  #navDrawer{
    position: fixed; left:0; right:0; top: var(--header-h) !important;
    z-index: 200 !important; transform: translateY(-6px); opacity: 0;
    background: rgba(12,14,20,.86); backdrop-filter: blur(10px);
    border-top:1px solid #2c3242; box-shadow: 0 -10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,56,206,.15);
    transition: transform .18s ease, opacity .18s ease; padding:16px 0;
  }
  #navDrawer[hidden]{ display:none !important; visibility:hidden !important; opacity:0 !important; }
  #navDrawer:not([hidden]){ transform:none; opacity:1; }
  #navDrawer .drawer-inner{ max-width:var(--maxw); margin:auto; padding:0 20px; display:grid; gap:14px; }
  #navDrawer .drawer-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
  body.nav-open{ overflow:hidden; }
  @supports (padding: max(0px)){ #navDrawer .drawer-inner{ padding-bottom:max(16px, env(safe-area-inset-bottom)); } }


  header.top .links{ display:flex; gap:36px; align-items:center; margin-left:40px; }
  header.top .links a{ font-weight:600; color:var(--ink); }
  header.top .links a:hover{ text-decoration:underline; }
  @media (max-width: 900px){ header.top .links{ display:none !important; } }
  .hamburger{
    position:relative; width:44px; height:44px; margin-left:8px;
    border:1px solid #30384a; border-radius:10px; background:#111523;
    box-shadow: inset 0 0 12px rgba(255,56,206,.20), 0 0 14px rgba(255,56,206,.18);
  }
  .hamburger .bar{
    position:absolute; left:10px; right:10px; height:2px; border-radius:2px;
    background:#ff38ce; box-shadow: 0 0 6px rgba(255,56,206,.9), 0 0 14px rgba(255,56,206,.45);
    transition: transform .18s ease, opacity .18s ease;
  }
  .hamburger .bar:nth-child(1){ top:13px } .hamburger .bar:nth-child(2){ top:21px } .hamburger .bar:nth-child(3){ top:29px }
  .hamburger[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(8px) rotate(45deg) }
  .hamburger[aria-expanded="true"] .bar:nth-child(2){ opacity:0 }
  .hamburger[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }
  #navDrawer .drawer-row a{
    display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; text-decoration:none;
    background: rgba(20,24,36,.55); color:#e8e6e3; border:1px solid rgba(233,180,183,.45);
    box-shadow: inset 0 0 0 2px rgba(233,180,183,.20), 0 0 12px rgba(255,0,170,.55), 0 0 28px rgba(255,0,170,.28);
  }


  header.top .cta, header.top .cta.secondary{
    min-width:150px; text-align:center; border-radius:999px;
    background: rgba(20,24,36,.55) !important; color:#e8e6e3 !important;
    border:1px solid rgba(233,180,183,.45) !important;
    box-shadow: 0 0 0 2px rgba(233,180,183,.20) inset, 0 0 12px rgba(255,0,170,.55), 0 0 28px rgba(255,0,170,.28) !important;
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease; padding-left:42px !important;
  }
  header.top .cta:hover, header.top .cta.secondary:hover{
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px rgba(233,180,183,.30) inset, 0 0 16px rgba(255,0,170,.70), 0 0 36px rgba(255,0,170,.36) !important;
    text-decoration:none;
  }


  @media (max-width: 768px){
    .brand span.sms-mode{ position:relative; padding-left:26px; }
    .brand span.sms-mode::before{
      content:""; position:absolute; left:0; top:50%; width:18px; height:18px; transform:translateY(-50%);
      background:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="%23E9B4B7" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3.5 6l7.7 6a2 2 0 0 0 2.6 0L21 6"/></g></svg>') center/contain no-repeat;
      filter: drop-shadow(0 0 6px rgba(233,180,183,.35)); opacity:.9;
      animation: smsPing 6s ease-in-out infinite;
    }
    @keyframes smsPing{ 0%,70%{opacity:.9} 73%{opacity:1} 76%{opacity:.9} 100%{opacity:.9} }
  }


  /* Floating, centered tray that hugs content */
  #weekStickyNav{
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 2200;

    /* Tray width: centered, never off-screen */
    width: min(96vw, 640px);          /* cap like your screenshot */
    box-sizing: border-box;

    /* Pretty tray background (keeps your original vibe) */
    background: rgba(12,14,20,.86);
    backdrop-filter: blur(8px);
    border: 1px solid #2c3242;
    box-shadow: 0 -10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
    border-radius: 18px;

    /* Layout */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding:
      10px
      12px
      calc(10px + env(safe-area-inset-bottom))
      12px;

    /* Don’t let anything clip the tray */
    overflow: visible;
  }

  /* Pills: keep your visuals; just size predictably */
  #weekStickyNav .btn{
    flex: 0 1 auto;                /* no stretching */
    min-width: 128px;              /* clean labels */
    min-height: 44px;              /* tap target */
    white-space: nowrap;
    padding-inline: 16px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    width: auto;                   /* neutralize any global fixed widths */
  }

  /* Ultra-narrow phones: wrap to two rows gracefully */
  @media (max-width: 380px){
    #weekStickyNav{
      flex-wrap: wrap;
      row-gap: 10px;
      width: min(96vw, 520px);     /* a touch narrower so two-up fits */
    }
    #weekStickyNav .btn{
      flex: 1 1 48%;
      text-align: center;
    }
    #weekStickyNav .btn:last-child{
      flex-basis: 100%;
    }
  }

  /* Hide the tray on larger screens if you want it mobile-only */
  @media (min-width: 769px){
    #weekStickyNav{ display: none; }
  }