:root{
    --noir:#0A0708;
    --smoke:#150E11;
    --smoke-2:#1C1216;
    --wine:#31101B;
    --ivory:#F1E9DE;
    --ivory-dim:rgba(241,233,222,.58);
    --ivory-faint:rgba(241,233,222,.30);
    --gold:#C9A96A;
    --gold-dim:rgba(201,169,106,.62);
    --gold-line:rgba(201,169,106,.24);
    --line-soft:rgba(241,233,222,.09);
    --oxblood:#6E1423;
    --display:'Bodoni Moda',serif;
    --body:'Jost',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--noir);color:var(--ivory);font-family:var(--body);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
    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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  ::selection{background:var(--oxblood);color:var(--ivory)}
  a{color:inherit;text-decoration:none}

  .eyebrow{font-size:.64rem;letter-spacing:.46em;text-transform:uppercase;color:var(--gold-dim)}
  .roman{font-family:var(--display);font-style:italic;color:var(--gold);font-size:1rem;letter-spacing:.08em}
  h2{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,5vw,4rem);line-height:1.07;margin:1rem 0}
  h2 em,h1 em,h3 em{font-style:italic}
  .lead{color:var(--ivory-dim);max-width:34rem;font-size:1.02rem}
  .subline{font-family:var(--display);font-style:italic;color:var(--ivory-dim);font-size:1.02rem}

  .btn{display:inline-block;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;padding:1rem 2.4rem;border:1px solid var(--gold-dim);transition:all .4s ease;background:transparent;color:var(--ivory);cursor:pointer;font-family:var(--body)}
  .btn:hover{background:var(--gold);border-color:var(--gold);color:var(--noir)}
  .btn:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
  .btn--fill{background:var(--oxblood);border-color:var(--oxblood)}
  .btn--fill:hover{background:var(--gold);border-color:var(--gold);color:var(--noir)}
  .btn--ghost{border-color:var(--line-soft);color:var(--ivory-dim)}
  .btn--ghost:hover{border-color:var(--gold);color:var(--ivory)}

  /* NAV */
  
  .wordmark{font-family:var(--display);font-size:1.05rem;letter-spacing:.26em;font-weight:500;text-transform:uppercase}
  .wordmark em{color:var(--gold);font-style:italic;text-transform:none;letter-spacing:.05em}
  
  
  
  

  /* HERO */
  header{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;isolation:isolate;overflow:hidden;padding:9rem 6vw 6rem}
  .halo{position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(ellipse 58% 44% at 50% 62%, rgba(110,20,35,.38), transparent 68%),
    radial-gradient(ellipse 28% 20% at 50% 56%, rgba(201,169,106,.11), transparent 70%);
    animation:breathe 7.5s ease-in-out infinite}
  @keyframes breathe{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
  header>.halo{z-index:-1;background:
    radial-gradient(ellipse 42% 58% at 73% 54%,rgba(110,20,35,.3),transparent 72%),
    radial-gradient(ellipse 26% 34% at 72% 50%,rgba(201,169,106,.1),transparent 76%)}
  .hero-logo{position:absolute;inset:0;z-index:-3;overflow:hidden;background:var(--noir)}
  .hero-logo::before{content:"";position:absolute;inset:0;z-index:1;background:
    linear-gradient(90deg,rgba(10,7,8,.98) 0%,rgba(10,7,8,.88) 31%,rgba(10,7,8,.28) 60%,rgba(10,7,8,.08) 100%),
    linear-gradient(180deg,rgba(10,7,8,.42),transparent 22%,transparent 72%,rgba(10,7,8,.78))}
  .hero-logo::after{content:"";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 12vw 5vw rgba(10,7,8,.68);pointer-events:none}
  .hero-logo video{width:100%;height:100%;display:block;object-fit:cover;object-position:68% 50%;opacity:.88;filter:contrast(1.08) saturate(.82);transform:scale(1.025)}
  .hero-grid{display:grid;grid-template-columns:minmax(0,36rem) 1fr;align-items:center;max-width:82rem;width:100%;margin:0 auto;text-align:left}
  .hero-copy{position:relative;padding:2.6rem 0 2.8rem 2.1rem;border-left:1px solid var(--gold-line);text-shadow:0 2px 32px rgba(10,7,8,.9)}
  .hero-copy::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:4.5rem;background:var(--gold)}
  .hero-copy .hero-cta{justify-content:flex-start}
  h1{font-family:var(--display);font-weight:400;font-size:clamp(2.9rem,5.9vw,5.35rem);line-height:1.02;letter-spacing:.01em}
  h1 .l2{display:block;font-style:italic;color:var(--gold)}
  .hero-motto{margin:2rem 0 2.8rem;font-family:var(--display);font-style:italic;font-size:clamp(1rem,2.2vw,1.4rem);color:var(--ivory-dim);max-width:32rem}
  .hero-cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

  /* MARQUEE */
  .marquee{border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);overflow:hidden;white-space:nowrap;padding:1rem 0}
  .marquee-track{display:inline-block;animation:slide 52s linear infinite;font-family:var(--display);font-style:italic;font-size:.98rem;letter-spacing:.12em;color:var(--gold-dim)}
  .marquee-track span{margin:0 2.4rem}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  section{padding:8rem 6vw;position:relative}
  .measure{max-width:74rem;margin:0 auto}

  /* CIRCLE */
  .circle{background:linear-gradient(180deg,var(--noir),var(--smoke) 55%,var(--noir))}
  .tenets{list-style:none;border-top:1px solid var(--gold-line)}
  .tenets li{display:flex;gap:1.5rem;align-items:baseline;padding:1.5rem 0;border-bottom:1px solid var(--gold-line)}
  .tenets .roman{min-width:1.9rem}
  .tenets strong{display:block;font-weight:500;font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.3rem}
  .tenets p{color:var(--ivory-dim);font-size:.9rem}
  .inline-cta{margin-top:2.3rem;display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center}
  .small-note{font-size:.66rem;letter-spacing:.2em;color:var(--ivory-faint);text-transform:uppercase}

  /* EVENINGS */
  .evenings{background:radial-gradient(ellipse 75% 90% at 50% 110%, rgba(110,20,35,.3), transparent 70%),linear-gradient(180deg,var(--noir),var(--wine) 150%);border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);text-align:center}
  .evenings .lead{margin:0 auto}
  .veil-card{max-width:44rem;margin:3.2rem auto 0;border:1px solid var(--gold-line);padding:3.6rem 2.6rem;position:relative;cursor:pointer;background:rgba(10,7,8,.5)}
  .veil-card::before{content:"";position:absolute;inset:.5rem;border:1px solid var(--line-soft);pointer-events:none}
  .veil-text{font-family:var(--display);font-style:italic;font-size:clamp(1.1rem,2.5vw,1.55rem);line-height:1.7;filter:blur(7px);opacity:.4;transition:filter 1.1s ease,opacity 1.1s ease}
  .veil-card:hover .veil-text,.veil-card:focus-within .veil-text,.veil-card.unveiled .veil-text{filter:blur(0);opacity:1}
  .veil-hint{margin-top:2rem;font-size:.58rem;letter-spacing:.44em;text-transform:uppercase;color:var(--gold-dim)}
  .marks{display:flex;justify-content:center;align-items:center;gap:1.8rem;flex-wrap:wrap;margin-top:3rem;font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--ivory-dim)}
  .marks i{font-style:normal;color:var(--gold-dim);font-size:.62rem}

  /* HOUSE */
  .rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
  .room{position:relative;min-height:25rem;border:1px solid var(--line-soft);padding:2.2rem 1.9rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:border-color .5s ease,transform .5s ease}
  .room:hover{border-color:var(--gold-line);transform:translateY(-6px)}
  .room::before{content:"";position:absolute;inset:0;opacity:.6;transition:opacity .6s ease}
  .room:hover::before{opacity:1}
  .room--earthy::before{background:radial-gradient(ellipse 130% 80% at 50% 115%, rgba(140,105,62,.42), transparent 70%)}
  .room--sky::before{background:radial-gradient(ellipse 130% 80% at 50% -15%, rgba(176,194,203,.26), transparent 70%)}
  .room--red::before{background:radial-gradient(ellipse 130% 80% at 50% 115%, rgba(147,32,47,.52), transparent 72%)}
  .room>*{position:relative}
  .room .roman{margin-bottom:auto;padding-bottom:4.5rem}
  .room h4{font-family:var(--display);font-weight:400;font-size:1.45rem;margin-bottom:.5rem}
  .room .temper{font-family:var(--display);font-style:italic;color:var(--gold-dim);font-size:.92rem;margin-bottom:.8rem}
  .room p{color:var(--ivory-dim);font-size:.87rem;margin-bottom:1rem}
  .room ul{list-style:none;margin-bottom:1.3rem}
  .room ul li{font-size:.76rem;letter-spacing:.06em;color:var(--ivory-faint);padding:.18rem 0}
  .room ul li::before{content:"— ";color:var(--gold-dim)}

  .hire{margin-top:1.4rem;border:1px solid var(--gold-line);padding:2.4rem 2.2rem;display:flex;align-items:center;justify-content:space-between;gap:2.2rem;flex-wrap:wrap;background:radial-gradient(ellipse 60% 130% at 92% 50%, rgba(110,20,35,.26), transparent 65%),var(--smoke)}
  .hire h4{font-family:var(--display);font-weight:400;font-size:1.5rem}
  .hire h4 em{color:var(--gold)}
  .hire p{color:var(--ivory-dim);font-size:.9rem;max-width:32rem;margin-top:.4rem}

  /* ON THE HOUSE */
  .onhouse{margin-top:1.4rem;border:1px solid var(--gold-line);padding:3rem 2.4rem;background:linear-gradient(140deg,var(--smoke-2),var(--noir))}
  .onhouse h3{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.2vw,2.4rem);margin:.6rem 0 1rem}
  .onhouse h3 em{color:var(--gold)}
  .onhouse p{color:var(--ivory-dim);font-size:.95rem;max-width:40rem;margin-bottom:1rem}
  .onhouse .btn{margin-top:.8rem}

  /* PRIVATE HIRE */
  .venue-hire{overflow:hidden;background:
    radial-gradient(ellipse 70% 90% at 100% 50%,rgba(110,20,35,.28),transparent 70%),
    linear-gradient(180deg,var(--noir),var(--smoke) 48%,var(--noir));border-bottom:1px solid var(--gold-line)}
  .venue-hire-grid{display:grid;grid-template-columns:1.02fr .98fr;max-width:84rem;min-height:42rem;margin:0 auto;border:1px solid var(--gold-line);background:var(--noir)}
  .venue-hire-copy{padding:clamp(3rem,6vw,6rem);display:flex;flex-direction:column;justify-content:center}
  .venue-hire-copy .lead{margin-top:1.2rem}
  .event-types{display:flex;flex-wrap:wrap;gap:.65rem 1.4rem;margin:2.2rem 0 0;padding-top:1.5rem;border-top:1px solid var(--gold-line)}
  .event-types span{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory-dim)}
  .event-types span::before{content:"◆";color:var(--gold-dim);font-size:.42rem;margin-right:.7rem;vertical-align:.12em}
  .planning-note{margin-top:2.2rem;padding-left:1.4rem;border-left:1px solid var(--gold);max-width:34rem}
  .planning-note h3{font-family:var(--display);font-weight:400;font-size:1.4rem;margin-bottom:.5rem}
  .planning-note h3 em{color:var(--gold)}
  .planning-note p{color:var(--ivory-dim);font-size:.92rem}
  .venue-hire-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.4rem}
  .venue-visual{position:relative;display:flex;flex-direction:column;justify-content:center;gap:1rem;min-height:42rem;padding:1rem;background:var(--smoke);overflow:hidden}
  .venue-visual::after{content:"";position:absolute;inset:1rem;border:1px solid rgba(201,169,106,.28);pointer-events:none}
  .venue-film{position:relative;z-index:1;width:100%;display:block;aspect-ratio:4/3;object-fit:cover;background:var(--noir);filter:saturate(.92) contrast(1.03)}
  .venue-brief{position:relative;z-index:1;padding:1.5rem 1.8rem;background:rgba(10,7,8,.94);border-left:1px solid var(--gold)}
  .venue-brief h3{font-family:var(--display);font-weight:400;font-size:clamp(1.55rem,3vw,2.2rem);line-height:1.12;margin:.7rem 0}
  .venue-brief h3 em{color:var(--gold)}
  .venue-brief p:not(.eyebrow){color:var(--ivory-dim);font-size:.9rem}
  .venue-privacy{margin-top:1.4rem;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-faint)}

  /* CODE */
  .code{background:linear-gradient(180deg,var(--noir),var(--smoke) 50%,var(--noir))}
  .clauses{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gold-line);border:1px solid var(--gold-line);margin-top:3rem}
  .clause{background:var(--noir);padding:2.2rem 1.9rem;transition:background .5s ease}
  .clause:hover{background:var(--smoke-2)}
  .clause h4{font-family:var(--display);font-weight:400;font-size:1.25rem;margin:.6rem 0 .5rem}
  .clause p{color:var(--ivory-dim);font-size:.87rem}

  /* GLIMPSE */
  .glimpse{background:linear-gradient(180deg,var(--noir),var(--smoke) 55%,var(--noir))}
  .glimpse-grid{columns:2;column-gap:1.4rem;margin-top:3rem}
  .glimpse-grid figure{break-inside:avoid;margin:0 0 1.4rem;border:1px solid var(--line-soft);overflow:hidden;position:relative;transition:border-color .5s ease}
  .glimpse-grid figure:hover{border-color:var(--gold-line)}
  .glimpse-grid img{width:100%;display:block;filter:saturate(.92);transition:transform 1.2s ease,filter .6s ease}
  .glimpse-grid figure:hover img{transform:scale(1.03);filter:saturate(1)}
  .glimpse-grid figcaption{position:absolute;inset:auto 0 0 0;padding:1.6rem 1.2rem .9rem;background:linear-gradient(transparent,rgba(10,7,8,.85));font-family:var(--display);font-style:italic;font-size:.95rem;color:var(--ivory-dim)}
  /* UPCOMING */
  .upcoming{text-align:center;border-top:1px solid var(--line-soft);background:linear-gradient(180deg,var(--noir),var(--smoke-2) 58%,var(--noir))}
  .upcoming h2{max-width:22ch;margin:1rem auto 2.6rem}
  .upcoming video{display:block;width:100%;max-width:420px;margin:0 auto;border:1px solid var(--gold-line)}
  .upcoming-title{display:block;margin-top:2.4rem;font-family:var(--display);font-size:clamp(1.1rem,2.8vw,1.6rem);letter-spacing:.38em;text-transform:uppercase;color:var(--gold)}
  .upcoming-sub{margin-top:.9rem;font-size:.72rem;letter-spacing:.24em;color:var(--ivory-faint)}
  .upcoming .lead{margin:1.4rem auto 0}
  .upcoming .foot-note{margin-top:1.4rem;font-size:.72rem;color:var(--ivory-faint)}

  /* LIST */
  .list{text-align:center;border-top:1px solid var(--line-soft);background:linear-gradient(180deg,var(--noir),var(--smoke))}
  .list .lead{margin:0 auto 2rem}
  .list form{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;max-width:34rem;margin:0 auto}
  .list input[type=email]{flex:1;min-width:16rem;background:transparent;border:1px solid var(--gold-line);color:var(--ivory);padding:1rem 1.2rem;font-family:var(--body);font-size:.9rem;letter-spacing:.04em}
  .list input[type=email]:focus{outline:none;border-color:var(--gold)}
  .list .consent{margin-top:1.2rem;font-size:.72rem;color:var(--ivory-faint);max-width:34rem;margin-left:auto;margin-right:auto}
  .hp{position:absolute;left:-9999px}

  /* COMPANIONS */
  .companions{border-top:1px solid var(--line-soft);background:linear-gradient(180deg,var(--noir),var(--smoke) 56%,var(--noir))}
  .companion-grid{display:grid;grid-template-columns:1.08fr 1fr .86fr;gap:1px;background:var(--gold-line);border:1px solid var(--gold-line);margin-top:3.4rem}
  .companion-card{background:var(--noir);padding:1rem;transition:background .5s ease}
  .companion-card:hover{background:var(--smoke-2)}
  .companion-photo{aspect-ratio:4/5;display:grid;place-items:center;background:linear-gradient(145deg,rgba(110,20,35,.26),rgba(201,169,106,.06) 46%,rgba(241,233,222,.025));border:1px solid var(--line-soft);color:var(--ivory-faint);font-family:var(--display);font-style:italic;font-size:.9rem;letter-spacing:.08em}
  .companion-card:nth-child(2) .companion-photo{background:linear-gradient(155deg,rgba(201,169,106,.1),rgba(110,20,35,.22) 58%,rgba(241,233,222,.025))}
  .companion-card:nth-child(3) .companion-photo{background:linear-gradient(145deg,rgba(241,233,222,.04),rgba(49,16,27,.58))}
  .companion-copy{padding:1.7rem 1rem 1.2rem}
  .companion-card h3{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.08}
  .companion-card h3 em{color:var(--gold)}
  .companion-copy p{min-height:3.2rem;margin:.8rem 0 1.5rem;color:var(--ivory-dim);font-size:.88rem}
  .companion-card .btn{padding:.75rem 1.3rem;font-size:.58rem}
  .booking-note{margin-top:2.4rem;padding:1.5rem 1.7rem;border-left:1px solid var(--gold);background:rgba(241,233,222,.025)}
  .booking-note p:first-child{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--ivory)}
  .booking-note p:last-child{margin-top:.55rem;color:var(--ivory-faint);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}

  /* WORK WITH US */
  .work-with-us{background:linear-gradient(180deg,var(--noir),var(--wine) 50%,var(--noir))}
  .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gold-line);border:1px solid var(--gold-line);margin-top:3.4rem}
  .work-point{background:rgba(10,7,8,.94);padding:2.2rem 1.9rem;transition:background .5s ease}
  .work-point:hover{background:var(--smoke-2)}
  .work-point h3{font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1.15;margin:.7rem 0 .65rem}
  .work-point p{color:var(--ivory-dim);font-size:.87rem}
  .work-cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-top:2.6rem;padding:2rem 0;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
  .work-cta p{font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,2.5vw,1.55rem);color:var(--ivory-dim)}

  /* CLOSE */
  .close{text-align:center;padding:8rem 6vw 6rem;position:relative;overflow:hidden}
  .close .halo{animation-duration:9s}
  .close h2{font-size:clamp(2.2rem,6vw,4.6rem)}
  .close .whisper{margin-top:2.6rem;font-family:var(--display);font-style:italic;color:var(--ivory-dim);font-size:1.05rem}

  footer{border-top:1px solid var(--gold-line);padding:4rem 6vw 2.4rem;background:var(--noir)}
  .foot-grid{max-width:74rem;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem;padding-bottom:3rem}
  .foot-brand p{margin-top:.9rem;color:var(--ivory-dim);font-size:.84rem;max-width:17rem;font-family:var(--display);font-style:italic}
  .foot-col h5{font-size:.6rem;letter-spacing:.36em;text-transform:uppercase;color:var(--gold-dim);font-weight:400;margin-bottom:1rem}
  .foot-col a{display:block;color:var(--ivory-dim);font-size:.85rem;padding:.3rem 0;transition:color .3s}
  .foot-col a:hover{color:var(--gold)}
  .foot-base{max-width:74rem;margin:0 auto;border-top:1px solid var(--line-soft);padding-top:1.8rem;display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory-faint)}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s ease}
  .reveal.in{opacity:1;transform:none}

  /* ── AGE GATE ── */
  #ls-gate{position:fixed;inset:0;z-index:9999;background:var(--noir);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 6vw;transition:opacity .6s ease}
  #ls-gate .halo{animation-duration:8s}
  #ls-gate>*{position:relative}
  .gate-seal{width:min(44vw,15rem);height:auto;margin-bottom:1.8rem;border-radius:50%;filter:drop-shadow(0 0 50px rgba(110,20,35,.5))}
  .gate-mark{font-family:var(--display);font-size:1.05rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:2.4rem}
  .gate-mark em{color:var(--gold);font-style:italic;text-transform:none;letter-spacing:.05em}
  #ls-gate h2{font-size:clamp(1.9rem,4.6vw,3.2rem);max-width:20em}
  #ls-gate p{color:var(--ivory-dim);max-width:30rem;margin:0 auto 2.6rem;font-size:.98rem}
  .gate-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
  .gate-foot{margin-top:3rem;font-size:.58rem;letter-spacing:.36em;text-transform:uppercase;color:var(--ivory-faint)}

  /* anchors clear the fixed nav */
  section[id],header[id],div[id],main[id]{scroll-margin-top:1.5rem}

  /* ── MENU TRIGGER ── */
  
  
  
  
  
  
  
  
  
  
  

  /* ── MENU PANEL ── */
  
  
  
  

  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    .halo,.marquee-track{animation:none}
    html{scroll-behavior:auto}
    .veil-text{filter:none;opacity:1}
    
    
  }
  @media (max-width:980px){
    header{justify-content:flex-end;padding:8rem 6vw 6.5rem}
    .hero-logo::before{background:
      linear-gradient(90deg,rgba(10,7,8,.7),rgba(10,7,8,.12) 70%),
      linear-gradient(180deg,rgba(10,7,8,.18),transparent 35%,rgba(10,7,8,.94) 88%,var(--noir))}
    .hero-logo video{object-position:60% 42%}
    .hero-grid{grid-template-columns:minmax(0,36rem) 1fr;margin:0;text-align:left}
    .venue-hire-grid{grid-template-columns:1fr}
    .venue-visual{min-height:30rem}
    .rooms,.clauses{grid-template-columns:1fr}
    .companion-grid,.work-grid{grid-template-columns:1fr}
    .glimpse-grid{columns:1}
    .room{min-height:21rem}
    section{padding:5.2rem 6vw}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  
  
  @media (max-width:560px){
    
    
    header{padding:7.5rem 5vw 5.8rem}
    .hero-logo video{object-position:58% 36%;transform:scale(1.08)}
    .hero-copy{padding:1.5rem 0 1.7rem 1.1rem}
    .hero-copy::before{height:3rem}
    h1{font-size:clamp(2.55rem,12.5vw,4rem)}
    .hero-motto{margin:1.35rem 0 1.8rem;font-size:1rem;max-width:24rem}
    .hero-cta{gap:.7rem}
    .hero-cta .btn{width:100%;text-align:center;padding:.9rem 1rem}
    .venue-hire{padding-left:5vw;padding-right:5vw}
    .venue-hire-copy{padding:3.2rem 1.5rem}
    .venue-visual{min-height:25rem;padding:1.2rem}
    .venue-brief{padding:1.4rem}
    .venue-hire-actions .btn{width:100%;text-align:center}
    .work-cta{align-items:flex-start;flex-direction:column}
    .work-cta .btn{width:100%;text-align:center}
    .foot-grid{grid-template-columns:1fr}
  }

/* ══════════════════════════════════════════════
   CHAPTERED SITE — shell, index, menu, chapters
   ══════════════════════════════════════════════ */

/* progressive enhancement: reveals only hide when JS is running */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s ease}
.js .reveal.in{opacity:1;transform:none}

/* age gate: no flash, scroll locked before scripts load */
.ls-verified #ls-gate{display:none}
html.js:not(.ls-verified) body{overflow:hidden}
#ls-gate[aria-hidden="true"]:not([style*="display"]){pointer-events:none}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:9998;background:var(--noir);color:var(--gold);border:1px solid var(--gold);padding:.9rem 1.4rem;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase}
.skip:focus{left:1rem;top:1rem}

/* ── NAV: menu-first on every screen ── */

/* ── MENU PANEL: desktop + mobile ── */

/* ── HOME: the door ── */
.home header{min-height:auto;padding:9.5rem 6vw 4.5rem}
.home .hero-grid{align-items:end}

/* ── THE INDEX (menu as page content) ── */
.index{background:linear-gradient(180deg,var(--noir),var(--smoke) 52%,var(--noir));border-top:1px solid var(--gold-line);padding:5.5rem 6vw 6rem}
.index-head{max-width:44rem;margin-bottom:3rem}
.index-head h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.index-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--gold-line);border:1px solid var(--gold-line);max-width:76rem;margin:0 auto}
.index-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;min-height:11.5rem;padding:1.9rem 1.8rem;background:var(--noir);overflow:hidden;transition:background .5s ease;-webkit-tap-highlight-color:transparent}
.index-tile::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s ease;background:radial-gradient(ellipse 130% 90% at 50% 120%,rgba(110,20,35,.44),transparent 72%)}
.index-tile:nth-child(3n+1)::before{background:radial-gradient(ellipse 130% 90% at 50% 120%,rgba(140,105,62,.36),transparent 72%)}
.index-tile:nth-child(3n+2)::before{background:radial-gradient(ellipse 130% 90% at 50% -20%,rgba(176,194,203,.22),transparent 72%)}
.index-tile:hover::before,.index-tile:focus-visible::before{opacity:1}
.index-tile:hover,.index-tile:focus-visible{background:var(--smoke-2)}
.index-tile:focus-visible{outline:1px solid var(--gold);outline-offset:-3px}
.index-tile>*{position:relative}
.index-tile .roman{margin-bottom:auto}
.index-tile h3{font-family:var(--display);font-weight:400;font-size:clamp(1.45rem,2.4vw,1.95rem);line-height:1.1}
.index-tile h3 em{color:var(--gold)}
.index-tile p{color:var(--ivory-dim);font-size:.85rem}
@media (min-width:981px){.index-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){
  .index{padding:4rem 5vw 4.5rem}
  .index-grid{grid-template-columns:1fr}
  .index-tile{min-height:auto;padding:1.5rem 1.4rem}
  .index-tile .roman{margin-bottom:.7rem}
}

/* ── CHAPTER PAGES ── */
.chapter-head{position:relative;padding:9.5rem 6vw 3rem;border-bottom:1px solid var(--gold-line);overflow:hidden}
.chapter-head>.halo{z-index:0;opacity:.55}
.chapter-head .measure{position:relative;z-index:1}
.chapter-head h1{font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1.05;margin:.9rem 0}
.chapter-head h1 em{font-style:italic;color:var(--gold)}
.chapter-head .subline{margin-top:.5rem}
.chapter-head .lead{margin-top:1.1rem}
.chapter-crumb{display:flex;align-items:center;gap:.7rem;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory-faint);margin-bottom:1.6rem}
.chapter-crumb a{color:var(--gold-dim)}
.chapter-crumb a:hover{color:var(--gold)}
.chapter-body{padding:4.5rem 6vw 5rem}
.chapter-body>.measure>.reveal:first-child{margin-top:0}

/* ── PAGER ── */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;max-width:74rem;margin:1rem auto 0;background:var(--gold-line);border:1px solid var(--gold-line)}
.pager-wrap{padding:0 6vw 5.5rem}
.pager a{display:flex;flex-direction:column;gap:.35rem;padding:1.7rem 1.8rem;background:var(--noir);transition:background .5s ease}
.pager a:hover{background:var(--smoke-2)}
.pager a:focus-visible{outline:1px solid var(--gold);outline-offset:-3px}
.pager .dir{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim)}
.pager .where{font-family:var(--display);font-size:1.22rem}
.pager .next{text-align:right;align-items:flex-end}
@media (max-width:620px){
  .chapter-head{padding:8.5rem 5vw 2.4rem}
  .chapter-body{padding:3.4rem 5vw 3.6rem}
  .pager-wrap{padding:0 5vw 4rem}
  .pager{grid-template-columns:1fr}
  .pager a{padding:1.35rem 1.4rem}
  .pager .next{text-align:left;align-items:flex-start}
}

/* chapter pages are short — soften section rhythm */
.chapter-body section{padding:0}
.chapter-body .measure{max-width:74rem}

footer{padding-bottom:max(2.4rem,calc(env(safe-area-inset-bottom) + 1rem))}
.foot-col a{min-height:34px;display:flex;align-items:center}

/* touch targets */
@media (pointer:coarse){
  .btn{padding:1.05rem 2.2rem}
  .foot-col a{min-height:40px}
}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .index-tile::before{transition:none}
}

/* ══════════════════════════════════════════════
   REFINEMENT — quieter menu, seamless entry
   ══════════════════════════════════════════════ */

/* Cross-document view transitions: entering a room is a dissolve, not a blink. */
@view-transition{navigation:auto}

footer{view-transition-name:site-foot}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:ease}

/* Fallback for browsers without view transitions: the page bows out before it leaves. */
html.is-leaving main,html.is-leaving footer,html.is-leaving .marquee{opacity:0;transition:opacity .17s ease}

/* Anything already on screen when a page opens arrives with it, not a beat later. */
.js .reveal.instant{transition:none}

/* ── THE MENU: a numeral and a name, nothing more ── */

/* ── THE INDEX: ten doors, read at a glance ── */
.index{padding-top:4.6rem}
.index-head{margin-bottom:2.4rem}
.index-head .eyebrow{display:block;margin-bottom:.9rem}
.index-tile{min-height:9.4rem;gap:.3rem;padding:1.7rem 1.6rem}
.index-tile .roman{font-size:.82rem}
.index-tile h3{font-size:clamp(1.38rem,2vw,1.72rem)}
.index-tile p{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ivory-faint)}
@media (max-width:620px){
  .index-tile{min-height:auto;padding:1.35rem 1.3rem}
  .index-tile .roman{margin-bottom:.55rem}
}

/* ── FOOTER: the menu handles navigation, so the footer stops repeating it ── */
.foot-grid{grid-template-columns:1.6fr 1fr;gap:3rem}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:2.2rem}}

/* ── the door: the hero film is decoration, so it never blocks the menu ── */
.hero-logo{background:var(--noir)}
.hero-logo video{opacity:0;transition:opacity 1.2s ease}
.hero-logo video.playing{opacity:.88}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:1ms}
  html.is-leaving main,html.is-leaving footer,html.is-leaving .marquee{transition:none}
  .hero-logo video{transition:none}
}

/* ══════════════════════════════════════════════
   SIMPLIFIED — three ways in, not ten doors
   The house has three kinds of visitor. The menu,
   the door and the pager now all say so.
   ══════════════════════════════════════════════ */

/* ── the trigger ── */

/* ── the panel ── */

/* a set: a numeral, a name, and a hairline that runs out to the margin */

/* the three sets settle in, one after the other */

/* the foot: one door, one quieter door, and the ornament between the lines */

/* ── THE DOOR: three ways in ── */
.index-head h2 em{color:var(--gold)}
.index-grid--paths{grid-template-columns:1fr}
.index-grid--paths .index-tile{min-height:13.5rem;gap:.55rem;padding:2rem 1.8rem}
.index-grid--paths .index-tile h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-top:.2rem}
.index-grid--paths .index-tile p{font-size:.92rem;letter-spacing:0;text-transform:none;color:var(--ivory-dim);line-height:1.6}
.tile-go{display:flex;align-items:center;gap:.55rem;margin-top:.9rem;
  font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim);transition:color .4s ease}
.tile-go::after{content:"";width:1.4rem;height:1px;background:var(--gold-dim);transition:width .45s ease,background .4s ease}
.index-tile:hover .tile-go,.index-tile:focus-visible .tile-go{color:var(--gold)}
.index-tile:hover .tile-go::after,.index-tile:focus-visible .tile-go::after{width:2.4rem;background:var(--gold)}
@media (min-width:760px){.index-grid--paths{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.index-grid--paths .index-tile{min-height:auto;padding:1.7rem 1.4rem}}

/* the quieter doors, kept out of the way but never hidden */
.index-more{max-width:76rem;margin:2.6rem auto 0}
.index-more .eyebrow{display:block;margin-bottom:1.1rem;font-size:.55rem;letter-spacing:.42em}
.more-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 2.4rem;
  border-top:1px solid var(--gold-line)}
.more-links a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.86rem .1rem;
  border-bottom:1px solid var(--line-soft);font-family:var(--display);font-size:1.06rem;
  transition:color .35s ease,border-color .4s ease}
.more-links a span{flex:none;font-family:var(--body);font-size:.53rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ivory-faint);transition:color .35s ease}
.more-links a:hover{color:var(--gold);border-color:var(--gold-line)}
.more-links a:hover span{color:var(--gold-dim)}
.more-links a:focus-visible{outline:1px solid var(--gold);outline-offset:2px}

/* ── A GLIMPSE: the films live here, where anyone looking would look ── */
.film{margin:0 0 2.6rem;border:1px solid var(--line-soft);background:var(--noir);transition:border-color .5s ease}
.film:hover{border-color:var(--gold-line)}
.film video{display:block;width:100%;height:auto;background:#000}
.film figcaption{padding:1.1rem 1.3rem 1.25rem}
.film figcaption .eyebrow{display:block;margin-bottom:.45rem;font-size:.55rem;letter-spacing:.34em}
.film figcaption p{font-family:var(--display);font-style:italic;font-size:1rem;color:var(--ivory-dim)}
.film--tall{max-width:26rem;margin-left:auto;margin-right:auto}
.glimpse-mark{display:flex;align-items:center;gap:1rem;margin:0 0 1.6rem;
  font-size:.55rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ivory-faint)}
.glimpse-mark::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(201,169,106,.24),transparent)}
@media (min-width:900px){
  .film-pair{display:grid;grid-template-columns:1.55fr 1fr;gap:1.6rem;align-items:start}
  .film-pair .film{margin-bottom:0}
  .film--tall{max-width:none}
}
.glimpse-mark--second{margin-top:3.4rem}
.film figcaption a{color:var(--gold-dim);border-bottom:1px solid rgba(201,169,106,.32);transition:color .35s ease,border-color .35s ease}
.film figcaption a:hover{color:var(--gold);border-color:var(--gold)}

/* ══════════════════════════════════════════════
   SEAMLESS — the menu pops out, the page stays
   The top bar retreats while you read and returns
   the moment you look for it. The menu is a panel
   anchored to its own trigger, not a wall: the page
   behind it stays visible, scrollable and clickable.
   ══════════════════════════════════════════════ */

/* ── the bar: no band across the page, only a scrim once you have left the top ── */

/* ── the trigger: always legible, whatever is behind it ── */

/* ── the panel ── */

/* the notch that ties the panel to the trigger it came out of */

/* wide screens: the three sets open side by side, and the page still frames it */

/* ═══════════════════════════════════════════════════════════════
   THE MENU — one definition, nothing layered over it.

   There is no top bar. Nothing is pinned across the page, so the
   view is clear from edge to edge. The only permanent chrome is a
   tab on the right edge; the whole menu drops down from it, and
   choosing anything puts it away again.

   Built to render the same on Android and iOS. The notes below
   mark each place where the two platforms would otherwise differ.
   Every rule for the tab and the panel lives in this block.
   ═══════════════════════════════════════════════════════════════ */

/* One number governs the tab's width and the panel's offset, so the
   two cannot drift apart the way earlier versions of this did. */
:root{--tab-w:3.15rem}

/* ── 1 · the tab on the edge ────────────────────────────────────
   Sized to be spotted straight away and to be an easy target: 50px
   wide by roughly 90 tall, comfortably over both the 44px iOS and
   48dp Android minimums for something you have to hit with a thumb. */
.menu-tab{position:fixed;z-index:80;
  /* honour the safe area on both axes. On an Android phone with no
     cutout these insets are 0 and the tab sits 1.5rem down; on an
     iPhone they lift it clear of the island and, in landscape, off
     the curved edge. Same visual result, correct on both. */
  top:max(1.5rem,env(safe-area-inset-top,0px));
  right:env(safe-area-inset-right,0px);
  width:var(--tab-w);min-height:5.4rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  padding:1.05rem .5rem 1.15rem;
  border:1px solid var(--gold-line);border-right:0;
  /* opaque enough to read on its own, because a few Android WebViews
     ship with backdrop-filter disabled and would drop the blur */
  background:rgba(11,8,9,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--ivory);
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  /* iOS paints a grey flash on tap and Android does not; kill both */
  -webkit-tap-highlight-color:transparent;
  view-transition-name:menu-tab;
  transition:opacity .4s ease,border-color .4s ease,background .4s ease,color .4s ease}

/* Full strength by default, so on a phone — where there is no pointer
   to hover with — the tab is always at its most visible. Only a device
   that can actually hover gets the resting dim. */
@media (hover:hover){
  .menu-tab{opacity:.88}
  .menu-tab:hover{opacity:1;border-color:var(--gold-dim);background:rgba(28,18,22,.9);color:var(--ivory)}
  .menu-tab:hover .menu-glyph i{background:var(--gold)}
  .menu-tab:hover .menu-glyph i:nth-child(2){width:100%}
}
.menu-tab:focus-visible{opacity:1;outline:1px solid var(--gold);outline-offset:3px}
.menu-tab[aria-expanded="true"]{opacity:1;border-color:var(--gold-dim);
  background:rgba(28,18,22,.92);color:var(--ivory)}

/* The word runs down the tab, so it can be this size and still stay
   narrow. The -webkit- prefixes cover older iOS WebKit, which needs
   them for vertical text. */
.menu-tab-word{-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;
  -webkit-text-orientation:mixed;text-orientation:mixed;
  line-height:1;
  /* letter-spacing leaves a gap after the final letter, which in vertical
     text lands under it and reads as the word sitting low. Reclaim it, so
     the word is optically centred the same way on both platforms. */
  margin-inline-end:-.26em}

.menu-glyph{position:relative;display:block;width:1.3rem;height:.5rem;flex:none}
.menu-glyph i{position:absolute;left:0;width:100%;height:1px;background:var(--gold-dim);
  transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .25s ease,
             width .4s cubic-bezier(.4,0,.2,1),background .35s ease}
.menu-glyph i:nth-child(1){top:0}
.menu-glyph i:nth-child(2){top:.245rem;width:62%}
.menu-glyph i:nth-child(3){top:.49rem}
/* three lines fold into two crossed ones */
.menu-tab[aria-expanded="true"] .menu-glyph i:nth-child(1){transform:translateY(.245rem) rotate(45deg)}
.menu-tab[aria-expanded="true"] .menu-glyph i:nth-child(2){opacity:0;width:0}
.menu-tab[aria-expanded="true"] .menu-glyph i:nth-child(3){transform:translateY(-.245rem) rotate(-45deg);width:100%}

/* ── 2 · the panel that drops from it ───────────────────────────
   It comes down the right edge alongside the tab. The page behind
   stays lit, scrollable and clickable the whole time. */
#ls-menu{position:fixed;z-index:79;
  top:max(1.5rem,env(safe-area-inset-top,0px));
  right:calc(var(--tab-w) + env(safe-area-inset-right,0px));
  width:min(20rem,calc(100vw - var(--tab-w) - env(safe-area-inset-right,0px) - 1.5rem));
  /* 100vh is the tallest the viewport ever gets, which on iOS Safari
     means the bottom of this panel — the two buttons — hides behind
     the URL bar, while Android Chrome measures it differently again.
     svh is the *small* viewport: the height that is always on screen.
     The vh line stays first as the fallback for older phones. */
  max-height:calc(100vh - max(1.5rem,env(safe-area-inset-top,0px)) - 2.5rem);
  max-height:calc(100svh - max(1.5rem,env(safe-area-inset-top,0px)) - 2.5rem);
  display:flex;flex-direction:column;
  background:rgba(11,8,9,.96);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid var(--gold-line);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.92);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-1.25rem);
  transition:opacity .3s ease,transform .46s cubic-bezier(.19,1,.22,1),visibility .3s ease}
#ls-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}

/* ── 3 · the brand, and the way home ───────────────────────────
   With no bar across the page, the wordmark lives here instead —
   so home is one tap away without anything sitting over the view. */
.menu-home{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex:none;padding:1.1rem 1.35rem 1rem;
  border-bottom:1px solid var(--gold-line);
  -webkit-tap-highlight-color:transparent;
  transition:background .3s ease}
.menu-home:focus-visible{background:rgba(201,169,106,.05);outline:1px solid var(--gold);outline-offset:-1px}
.menu-home .wordmark{font-size:.9rem;text-shadow:none}

/* ── 4 · all of it, in three groups ────────────────────────────
   Each entry says what it is, so you can choose without opening
   the page to find out. */
.menu-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* without this, reaching the end of the list hands the scroll to the
     page behind — and iOS and Android disagree about when */
  overscroll-behavior:contain;
  padding:1.15rem 1.35rem 1.25rem;scrollbar-width:none}
.menu-body::-webkit-scrollbar{display:none}

.menu-set+.menu-set{margin-top:1.4rem}
.menu-set-head{margin-bottom:.4rem;padding-bottom:.4rem;
  border-bottom:1px solid rgba(201,169,106,.16);
  font-size:.5rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ivory-faint)}

.menu-set a{position:relative;display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:.62rem .1rem .62rem .7rem;min-height:44px;
  -webkit-tap-highlight-color:transparent;
  transition:background .3s ease}
/* a hairline draws itself down the entry, instead of text that jumps sideways */
.menu-set a::before{content:"";position:absolute;left:0;top:.48rem;bottom:.48rem;width:1px;
  background:var(--gold);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .35s cubic-bezier(.19,1,.22,1)}
.menu-set a:focus-visible::before,
.menu-set a[aria-current="page"]::before{transform:scaleY(1)}
.menu-set a:focus-visible{background:rgba(201,169,106,.05);outline:1px solid var(--gold);outline-offset:2px}

.menu-label{font-family:var(--display);font-weight:400;font-size:1.1rem;line-height:1.2;
  color:var(--ivory);transition:color .3s ease}
.menu-note{flex:none;font-size:.46rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory-faint);transition:color .3s ease}
.menu-set a:focus-visible .menu-label{color:var(--gold)}
.menu-set a:focus-visible .menu-note{color:var(--gold-dim)}
.menu-set a[aria-current="page"] .menu-label{color:var(--gold);font-style:italic}
.menu-set a[aria-current="page"] .menu-note{color:var(--gold-dim)}

/* Hover belongs to devices that have a pointer. On a phone these would
   otherwise stick to the last thing tapped, which is the kind of thing
   that makes one platform feel unlike the other. */
@media (hover:hover){
  .menu-home:hover{background:rgba(201,169,106,.05)}
  .menu-home:hover .wordmark{color:var(--gold)}
  .menu-set a:hover{background:rgba(201,169,106,.05)}
  .menu-set a:hover::before{transform:scaleY(1)}
  .menu-set a:hover .menu-label{color:var(--gold)}
  .menu-set a:hover .menu-note{color:var(--gold-dim)}
}

/* ── 5 · the two things worth asking for ──────────────────────── */
.menu-foot{flex:none;display:flex;flex-direction:column;gap:.5rem;
  padding:.95rem 1.35rem 1.05rem;
  border-top:1px solid var(--gold-line);background:rgba(21,14,17,.5)}
.menu-foot .btn{width:100%;text-align:center;padding:.85rem 1rem;min-height:44px;
  font-size:.48rem;letter-spacing:.2em;-webkit-tap-highlight-color:transparent}
.menu-foot .btn--ghost{border-color:var(--gold-line);color:var(--ivory-dim)}
@media (hover:hover){
  .menu-foot .btn--ghost:hover{border-color:var(--gold-dim);color:var(--ivory)}
}

/* ── 6 · one tab, one size, every phone ────────────────────────
   The tab is deliberately NOT reduced on small screens — it is the
   only way into the site, and it should be the same thing to find
   whatever you are holding. Only the panel's width adapts. */
@media (max-width:560px){
  #ls-menu{width:calc(100vw - var(--tab-w) - env(safe-area-inset-right,0px) - env(safe-area-inset-left,0px) - 1rem);
    max-height:calc(100vh - max(1.5rem,env(safe-area-inset-top,0px)) - 2rem);
    max-height:calc(100svh - max(1.5rem,env(safe-area-inset-top,0px)) - 2rem)}
}
@media (max-width:360px){.menu-note{display:none}}
@media (min-width:981px){
  #ls-menu{width:21.5rem;max-height:min(34rem,calc(100vh - 4rem));
    max-height:min(34rem,calc(100svh - 4rem))}
  .menu-label{font-size:1.16rem}
}
/* A short landscape phone has no room for a full-height drop, so the
   panel keeps its own scroll and stays inside the visible viewport. */
@media (max-height:460px){
  .menu-tab{top:max(.75rem,env(safe-area-inset-top,0px));
    min-height:0;gap:.75rem;padding:.85rem .5rem .95rem}
  #ls-menu{top:max(.75rem,env(safe-area-inset-top,0px));
    max-height:calc(100vh - max(.75rem,env(safe-area-inset-top,0px)) - 1.25rem);
    max-height:calc(100svh - max(.75rem,env(safe-area-inset-top,0px)) - 1.25rem)}
}

/* ── 7 · motion, only where it earns its place ────────────────── */
#ls-menu.is-open .menu-body{animation:ls-rise .5s cubic-bezier(.19,1,.22,1) both}
@keyframes ls-rise{from{opacity:0;translate:0 .5rem}to{opacity:1;translate:0 0}}

@media (prefers-reduced-motion:reduce){
  .menu-tab,.menu-glyph i,.menu-set a,.menu-set a::before,.menu-label,.menu-note,.menu-home{transition:none}
  #ls-menu{transform:none;transition:opacity .01s linear,visibility .01s linear}
  #ls-menu.is-open{transform:none}
  #ls-menu.is-open .menu-body{animation:none}
}

/* ── OPS: the app page ── */
.ops-films{display:grid;grid-template-columns:1fr;gap:1.6rem;justify-items:center;margin-top:0}
.ops-films .film--tall{width:100%;max-width:24rem;margin:0}
@media (min-width:760px){.ops-films{grid-template-columns:minmax(0,24rem);justify-content:center}}
.ops .tenets p strong{color:var(--ivory);font-weight:500}
.ops .clause .roman{display:block}
.ops .clause .plan-price{font-family:var(--display);font-size:clamp(2rem,4vw,2.8rem);line-height:1;margin:.7rem 0 .2rem;color:var(--ivory)}
.ops .clause h4{margin-top:.4rem}
.ops .clause p:not(.plan-price){color:var(--ivory-dim);font-size:.9rem}
.ops .work-cta .inline-cta{flex:none}
.ops .onhouse .roman{display:block;margin-bottom:.2rem}
.ops .numbers{margin-top:3.2rem}
.ops .numbers .roman{display:block;margin-bottom:.2rem}
.ops .numbers-grid{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 1.6rem}
@media (min-width:760px){.ops .numbers-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ops .numbers-grid li{border-top:1px solid rgba(255,255,255,.12);padding-top:.8rem}
.ops .numbers-grid strong{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2rem,4.5vw,3rem);line-height:1;color:var(--ivory)}
.ops .numbers-grid span{display:block;margin-top:.45rem;color:var(--ivory-dim);font-size:.9rem;line-height:1.4}
.ops .numbers-note{margin-top:1.4rem;color:var(--ivory-dim);font-size:.85rem;max-width:40rem}
.ops .faq{margin-top:3.2rem}
.ops .faq .roman{display:block;margin-bottom:.2rem}
.ops .faq details{border-top:1px solid rgba(255,255,255,.12);padding:.95rem 0}
.ops .faq details:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.ops .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline;font-family:var(--display);font-size:1.12rem;line-height:1.3;color:var(--ivory)}
.ops .faq summary::-webkit-details-marker{display:none}
.ops .faq summary::after{content:"+";flex:none;font-size:1.3rem;line-height:1;color:var(--ivory-dim)}
.ops .faq details[open] summary::after{content:"\2013"}
.ops .faq p{color:var(--ivory-dim);font-size:.95rem;margin:.65rem 0 0;max-width:40rem}