/* ============ Beacon South Beach - Modern Art Deco system ============ */
:root{
  /* green scale - Bottle Green #04512A (swappable via the brand-green widget) */
  --em-950:#033B1F; --em-900:#04512A; --em-800:#04512A; --em-700:#04512A; --em-600:#067A3F;
  --em-300:#2CFF94; --em-100:#DCECE4;
  /* same green as --em-900, as an RGB triple, for shadows and overlays */
  --em-rgb:4,81,42;
  /* warm companions */
  --cream:#F4EFE6; --sand:#E8DCC8; --brass:#E8DCC8; --brass-soft:#F4EFE6;
  --accent-rgb:232,220,200; --on-accent:#23200F;
  /* accent = Bone (final). Deco rules on LIGHT backgrounds need their own
     token or bone-on-cream is invisible: */
  --rule-on-light:#C9BFA8;
  --ink:#1A1A18; --ink-soft:#4A4A44;
  --font-display:"Jost", "Avenir Next", "Helvetica Neue", sans-serif;
  --font-body:"Jost", "Avenir Next", "Helvetica Neue", sans-serif;
  --maxw:1180px;
  /* Real measured header: 127px with the Book Direct rail, 90px once it
     collapses on scroll. 76px was a leftover from an earlier layout and left
     subpage heroes only 23px of clearance under a header nearly twice that.
     Set to the collapsed height, which is what content actually clears while
     the page is being read. */
  --header-h:90px;
}
/* the rail is only present at the top of the page, so its height is a separate
   token - used where an element must clear the full, expanded header */
:root{--header-h-full:127px}
@media (max-width:860px){:root{--header-h:78px;--header-h-full:109px}}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--cream);line-height:1.6;font-weight:300;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--em-600);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* type */
/* Typography C (picked): one typeface, headlines in tracked caps. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.18;letter-spacing:.02em;
  text-transform:uppercase;text-wrap:balance}
.h-xl,.h-lg{line-height:1.08}
/* opt-out for anything that must stay sentence case (quotes, guest names, prices) */
.nocaps,blockquote{text-transform:none;letter-spacing:0}
.kicker{font-family:var(--font-display);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--em-700);display:flex;align-items:center;gap:14px;font-weight:500}
.kicker::before{content:"";width:34px;height:1px;background:var(--rule-on-light)}
.kicker.centered{justify-content:center}
.kicker.centered::after{content:"";width:34px;height:1px;background:var(--rule-on-light)}
.h-xl{font-size:clamp(38px,6vw,68px);letter-spacing:.01em}
.h-lg{font-size:clamp(30px,4vw,46px)}
.h-md{font-size:clamp(22px,2.6vw,28px)}
.lede{font-size:clamp(17px,1.6vw,19px);color:var(--ink-soft);max-width:58ch}

/* deco double rule */
.double-rule{height:7px;border-top:1px solid var(--rule-on-light);border-bottom:1px solid var(--rule-on-light);width:88px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:16px 30px 14px;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--em-700);color:var(--cream)}
.btn-primary:hover{background:var(--em-800)}
.btn-ghost{background:transparent;color:var(--cream);border-color:rgba(244,239,230,.55)}
.btn-ghost:hover{border-color:var(--cream);background:rgba(244,239,230,.08)}
.btn-dark-ghost{background:transparent;color:var(--em-800);border-color:var(--em-700)}
.btn-dark-ghost:hover{background:var(--em-700);color:var(--cream)}
.btn-brass{background:var(--brass);color:var(--on-accent);padding:13px 26px 11px;font-size:12px;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.btn-brass:hover{background:var(--brass-soft);box-shadow:0 4px 0 rgba(0,0,0,.22);transform:translateY(-1px)}
.btn-brass:active{box-shadow:0 1px 0 rgba(0,0,0,.22);transform:translateY(1px)}
:is(a,button,input,select):focus-visible{outline:2px solid var(--em-600);outline-offset:3px;border-radius:2px}

/* ============ header ============ */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .25s,box-shadow .25s;border-top:3px solid var(--brass)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);max-width:var(--maxw);margin:0 auto;padding:0 24px}
.site-header.scrolled{background:rgba(var(--em-rgb),.96);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(var(--accent-rgb),.35)}
.logo{display:flex;flex-direction:column;align-items:flex-start;line-height:1;color:var(--cream)}
.logo b{font-family:var(--font-display);font-weight:600;font-size:25px;letter-spacing:.34em;padding-right:-0.34em}
.logo span{font-family:var(--font-display);font-size:9px;letter-spacing:.42em;color:var(--brass-soft);margin-top:5px;text-transform:uppercase}
.main-nav{display:flex;gap:34px;align-items:center}
.main-nav a{font-family:var(--font-display);font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);opacity:.92;position:relative;padding:6px 0}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--brass);transition:right .25s}
.main-nav a.btn-brass{color:var(--on-accent);padding:13px 26px 11px;font-size:12px;opacity:1}
.main-nav a.btn-brass::after{display:none}
.main-nav a:hover::after{right:0}
.header-book{margin-left:8px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;color:var(--cream)}
.nav-toggle svg{display:block}

/* mobile overlay nav */
.mobile-nav{position:fixed;inset:0;z-index:70;background:var(--em-900);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;transform:translateY(-102%);visibility:hidden;transition:transform .35s cubic-bezier(.7,0,.3,1),visibility 0s linear .35s}
.mobile-nav.open{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.7,0,.3,1)}
.mobile-nav a{font-family:var(--font-display);font-size:26px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);padding:12px}
/* .mobile-nav a (0,1,1) outranks .btn-brass (0,1,0) - without this the CTA
   renders cream-on-bone and the label disappears. */
.mobile-nav a.btn-brass{color:var(--on-accent);font-size:14px;font-weight:600;letter-spacing:.2em;
  padding:17px 34px 15px;margin-top:18px}
.mobile-nav a.btn-brass:hover{color:var(--on-accent)}
.mobile-nav .btn{margin-top:22px}
.mobile-nav .close{position:absolute;top:22px;right:22px;background:none;border:0;color:var(--cream);cursor:pointer;padding:10px}
.mobile-nav .deco{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);color:var(--brass);font-family:var(--font-display);font-size:10px;letter-spacing:.4em;text-transform:uppercase}

/* ============ hero ============ */
.hero{position:relative;min-height:92svh;display:flex;align-items:flex-end;color:var(--cream);isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:-2}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--em-rgb),.6) 0%,rgba(var(--em-rgb),.16) 38%,rgba(var(--em-rgb),.8) 100%),linear-gradient(100deg,rgba(var(--em-rgb),.5) 0%,rgba(var(--em-rgb),0) 55%)}
.hero-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:150px 24px 120px}
.hero .kicker{color:var(--brass-soft);text-shadow:0 1px 14px rgba(var(--em-rgb),.85),0 0 3px rgba(var(--em-rgb),.6)}
.hero .kicker::before{background:var(--brass-soft)}
.hero h1,.hero p{text-shadow:0 2px 22px rgba(var(--em-rgb),.45)}
.hero h1{max-width:12ch;margin:18px 0 16px;color:var(--cream)}
.hero p{max-width:52ch;font-size:clamp(16px,1.7vw,19px);opacity:.92;margin-bottom:34px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-est{position:absolute;right:34px;bottom:110px;writing-mode:vertical-rl;font-family:var(--font-display);font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:rgba(244,239,230,.65)}

/* ============ booking bar ============ */
.booking{position:relative;z-index:5;margin-top:-58px}
.booking-card{background:#fff;border:1px solid var(--sand);border-top:3px solid var(--rule-on-light);box-shadow:0 22px 44px -18px rgba(var(--em-rgb),.28);border-radius:3px;padding:26px 26px 22px;display:grid;grid-template-columns:repeat(5,1fr) auto;gap:18px;align-items:end}
.field label{display:block;font-family:var(--font-display);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--em-800);margin-bottom:7px}
.field input,.field select{width:100%;font-family:var(--font-body);font-size:16px;color:var(--ink);background:var(--cream);border:1px solid var(--sand);border-radius:2px;padding:12px 12px 10px;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23046307' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
.booking-note{grid-column:1/-1;font-size:13px;color:var(--ink-soft);display:flex;gap:8px;align-items:center;margin-top:2px}
.booking-note svg{flex:none}

/* ============ intro ============ */
.intro{padding:110px 0 90px}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.intro h2{margin:18px 0 20px}
.intro .double-rule{margin:26px 0}
.intro-figure{position:relative}
.intro-figure img{border-radius:3px;aspect-ratio:4/5;object-fit:cover}
.intro-figure::before{content:"";position:absolute;inset:-16px 16px 16px -16px;border:1px solid var(--brass);border-radius:3px;z-index:-1}
.intro-badge{position:absolute;right:-14px;bottom:36px;background:var(--em-900);color:var(--cream);border:1px solid var(--brass);border-radius:3px;padding:16px 20px 13px;text-align:center}
.intro-badge b{display:block;font-family:var(--font-display);font-size:26px;letter-spacing:.06em;color:var(--brass-soft)}
.intro-badge span{font-family:var(--font-display);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase}
.intro-stats{display:flex;gap:38px;margin-top:34px}
.stat b{display:block;font-family:var(--font-display);font-size:30px;font-weight:500;color:var(--em-700)}
.stat span{font-size:13px;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase}

/* ============ rooms ============ */
.rooms{padding:96px 0;background:linear-gradient(180deg,var(--cream) 0%,#EFE7D8 100%)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:52px}
.section-head h2{margin-top:16px}
.rooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.room-card{background:#fff;border:1px solid var(--sand);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;position:relative}
.room-card:hover{transform:translateY(-5px);box-shadow:0 24px 40px -20px rgba(var(--em-rgb),.3)}
.room-card figure{position:relative;aspect-ratio:16/10.6;overflow:hidden}
.room-card figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.room-card:hover figure img{transform:scale(1.05)}
.room-flag{position:absolute;top:14px;left:14px;background:var(--em-900);color:var(--brass-soft);font-family:var(--font-display);font-size:9.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;padding:8px 12px 6px;border-radius:2px}
.room-body{padding:24px 24px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.room-body h3{font-size:21px;letter-spacing:.02em}
.room-meta{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);display:flex;gap:14px;flex-wrap:wrap}
.room-meta span{display:flex;align-items:center;gap:6px}
.room-body p{font-size:15px;color:var(--ink-soft)}
.room-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--sand);display:flex;justify-content:space-between;align-items:center}
.room-price{font-size:13px;color:var(--ink-soft)}
.room-price b{font-family:var(--font-display);font-size:21px;font-weight:500;color:var(--em-800);letter-spacing:.02em}
.room-link{font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--em-700);display:flex;align-items:center;gap:8px}
.room-link:hover{color:var(--em-800)}

/* ============ features strip ============ */
.features{padding:100px 0}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.feature{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:3/3.8;display:flex;align-items:flex-end;color:var(--cream);isolation:isolate}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s}
.feature:hover img{transform:scale(1.05)}
.feature::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--em-rgb),0) 30%,rgba(var(--em-rgb),.88) 100%)}
.feature-body{padding:28px}
.feature-body .tag{font-family:var(--font-display);font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-soft)}
.feature-body h3{font-size:24px;margin:10px 0 8px}
.feature-body p{font-size:14.5px;opacity:.88}

/* ============ after dark ============ */
.night{background:var(--em-900);color:var(--cream);padding:110px 0;position:relative;overflow:hidden}
.night::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(var(--accent-rgb),.05) 0 1px,transparent 1px 90px)}
.night-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center;position:relative}
.night .kicker{color:var(--em-300)}
.night .kicker::before{background:var(--em-300)}
.night h2{color:var(--cream);margin:18px 0 20px}
.night p{color:#CFD8CD;max-width:52ch}
.night .double-rule{margin:26px 0;border-color:rgba(var(--accent-rgb),.55)}
.night-figure{position:relative}
.night-figure img{border-radius:3px;aspect-ratio:16/11;object-fit:cover}
.night-figure::before{content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid rgba(var(--accent-rgb),.5);border-radius:3px}
.night .btn{margin-top:8px}

/* ============ offers ============ */
.offers{padding:100px 0 110px;background:linear-gradient(180deg,#EFE7D8 0%,var(--cream) 26%)}
.offers-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,340px);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 26px;scrollbar-width:thin;scrollbar-color:var(--brass) transparent}
.offer{scroll-snap-align:start;background:#fff;border:1px solid var(--sand);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.offer figure{aspect-ratio:16/9.5;overflow:hidden}
.offer figure img{width:100%;height:100%;object-fit:cover}
.offer-body{padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.offer-body .pct{font-family:var(--font-display);font-weight:600;font-size:34px;color:var(--em-700);letter-spacing:.02em;line-height:1}
.offer-body .pct small{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.offer-body h3{font-size:19px}
.offer-body p{font-size:14.5px;color:var(--ink-soft)}
.offer-body .btn{margin-top:auto;align-self:flex-start;padding:12px 22px 10px}

/* ============ location ============ */
/* top padding was 0 because Offers (cream, self-padded) used to sit above.
   After Dark is edge-to-edge emerald, so the section needs its own gap. */
.location{padding:92px 0 110px}
.location-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:stretch}
.location h2{margin:16px 0 22px}
.walk-list{list-style:none;margin-top:26px;border-top:1px solid var(--sand)}
.walk-list li{display:flex;justify-content:space-between;gap:20px;padding:13px 2px;border-bottom:1px solid var(--sand);font-size:15.5px}
.walk-list b{font-weight:500;font-family:var(--font-display);letter-spacing:.04em}
.walk-list span{color:var(--em-700);font-family:var(--font-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;padding-top:3px}
.map-frame{border:1px solid var(--sand);border-radius:3px;overflow:hidden;min-height:420px;position:relative}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.82)}
.location-contact{margin-top:26px;display:flex;gap:34px;flex-wrap:wrap;font-size:15.5px}
.location-contact a{color:var(--em-800);border-bottom:1px solid var(--brass)}

/* ============ footer ============ */
.site-footer{background:var(--em-900);color:#CFD8CD;position:relative;border-top:3px solid var(--brass)}
.site-footer::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(var(--accent-rgb),.045) 0 1px,transparent 1px 72px);pointer-events:none}
.footer-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:48px;padding:76px 0 60px;position:relative}
.footer-brand .logo b{font-size:22px}
.footer-brand p{font-size:14.5px;margin-top:18px;max-width:30ch}
/* the address now sits in the brand column, linked through to Google Maps */
.footer-addr{display:inline-flex;align-items:flex-start;gap:11px;margin-top:24px;
  color:#CFD8CD;font-size:15px;line-height:1.55;transition:color .2s}
.footer-addr svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--brass)}
.footer-addr:hover{color:var(--cream)}
.footer-addr:hover svg{color:var(--brass-soft)}
.footer-addr:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.site-footer h4{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:20px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer-links a{color:#CFD8CD;font-size:15px;transition:color .2s}
.footer-links a:hover{color:var(--cream)}
.footer-contact{list-style:none;display:flex;flex-direction:column;gap:13px;font-size:15px}
.footer-contact a{display:inline-flex;align-items:center;gap:11px;color:#CFD8CD;transition:color .2s}
.footer-contact svg{width:16px;height:16px;flex:none;color:var(--brass)}
.footer-contact a:hover{color:var(--cream)}
.footer-contact a:hover svg{color:var(--brass-soft)}
.footer-contact a:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.newsletter p{font-size:14.5px;margin-bottom:16px}
.newsletter-form{display:flex;border:1px solid rgba(var(--accent-rgb),.5);border-radius:2px;overflow:hidden}
.newsletter-form input{flex:1;background:rgba(244,239,230,.06);border:0;padding:13px 14px;color:var(--cream);font-family:var(--font-body);font-size:15px;min-width:0}
.newsletter-form input::placeholder{color:rgba(207,216,205,.6)}
.newsletter-form button{background:var(--brass);color:var(--on-accent);border:0;font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:0 20px;cursor:pointer}
.newsletter-form button:hover{background:var(--brass-soft)}
.newsletter-msg{font-size:13px;margin-top:10px;min-height:18px;color:var(--em-300)}
/* the signup can genuinely fail now, so it needs a failure colour */
.newsletter-msg.is-bad{color:#F0B8A8}
.footer-bottom{border-top:1px solid rgba(var(--accent-rgb),.28);padding:24px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:rgba(207,216,205,.72);position:relative}
.footer-bottom a{color:rgba(207,216,205,.72)}
.footer-bottom a:hover{color:var(--cream)}

/* ============ mobile book bar ============ */
.mobile-book{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;background:var(--em-900);border-top:1px solid var(--brass);padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.mobile-book .btn{width:100%}

/* ============ reveal ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  /* the rail still collapses, it just snaps instead of sliding */
  .hdr-book,.site-header.scrolled .hdr-book{transition:none}
}

/* ============ responsive ============ */
@media (max-width:1020px){
  .booking-card{grid-template-columns:repeat(3,1fr)}
  .booking-card .btn{grid-column:1/-1}
  .rooms-grid{grid-template-columns:repeat(2,1fr)}
  .footer-main{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .main-nav{display:none}
  .nav-toggle{display:block}
  .intro-grid,.night-grid,.location-grid{grid-template-columns:1fr;gap:44px}
  .features-grid{grid-template-columns:1fr;gap:18px}
  .feature{aspect-ratio:16/10}
  .section-head{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-est{display:none}
  .mobile-book{display:block}
  body{padding-bottom:74px}
}

@media (max-width:640px){
  .booking-card{grid-template-columns:1fr 1fr;padding:20px 18px 18px}
  .rooms-grid{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr;gap:38px;padding:60px 0 48px}
  .hero-inner{padding:130px 24px 96px}
  .intro{padding:86px 0 70px}
  .intro-badge{right:8px}
}

/* ============ subpages ============ */
.subpage .site-header{background:rgba(var(--em-rgb),.96);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(var(--accent-rgb),.35)}
.page-hero{background:var(--em-900);color:var(--cream);padding:calc(var(--header-h-full) + 54px) 0 64px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(var(--accent-rgb),.05) 0 1px,transparent 1px 90px)}
.page-hero .wrap{position:relative}
.page-hero .kicker{color:var(--brass-soft)}
.page-hero .kicker::before{background:var(--brass-soft)}
.page-hero h1{color:var(--cream);margin:16px 0 14px}
.page-hero .lede{color:#CFD8CD}
.crumbs{font-family:var(--font-display);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(207,216,205,.75);margin-bottom:26px;display:flex;gap:10px}
.crumbs a{color:var(--brass-soft)}
.crumbs span::before{content:"-";margin-right:10px;color:rgba(var(--accent-rgb),.5)}

/* rooms index */
.rooms-page{padding:86px 0 100px}
.room-feature{display:grid;grid-template-columns:1.15fr 1fr;background:#fff;border:1px solid var(--sand);border-radius:3px;overflow:hidden;margin-bottom:26px}
.room-feature figure{position:relative;min-height:380px}
.room-feature figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room-feature .room-body{padding:44px 46px;justify-content:center;gap:14px}
.room-feature h3{font-size:clamp(24px,2.4vw,32px)}
.room-feature .room-desc{font-size:16px;color:var(--ink-soft)}
.room-feature .room-amenities{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{font-family:var(--font-display);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--em-800);background:var(--em-100);border:1px solid #CBE3CB;border-radius:2px;padding:7px 10px 5px}
.room-feature .room-foot{border-top:1px solid var(--sand);padding-top:18px;margin-top:8px}
.room-feature.flip figure{order:2}
.rooms-page .rooms-grid{margin-top:26px}

/* room detail */
.detail-layout{display:grid;grid-template-columns:1.55fr .85fr;gap:44px;align-items:start;padding:70px 0 100px}
.gallery-main{position:relative;border-radius:3px;overflow:hidden;cursor:zoom-in}
.gallery-main img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.gallery-main::after{content:"CLICK TO ENLARGE";position:absolute;right:14px;bottom:14px;background:rgba(var(--em-rgb),.82);color:var(--cream);font-family:var(--font-display);font-size:9px;letter-spacing:.24em;padding:8px 10px 6px;border-radius:2px}
.gallery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.gallery-thumb{border:1px solid var(--sand);border-radius:3px;overflow:hidden;padding:0;background:none;cursor:pointer;aspect-ratio:16/10}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}
.gallery-thumb:hover img{opacity:.85}
.gallery-thumb.active{outline:2px solid var(--em-700);outline-offset:2px}
.detail-body h2{font-size:22px;margin:38px 0 14px}
.detail-body .double-rule{margin:30px 0}
/* Was a stack of full-width white boxes: a 700px card holding eight words,
   which read as an empty form field. Now a rule-topped editorial grid in the
   same language as .group-perks. auto-fit matters because rooms carry one to
   three of these: a single item fills the row instead of hugging the left. */
.usp-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:26px 34px;margin-top:20px}
.usp-list li{display:block;background:none;border:0;border-top:2px solid var(--em-700);
  border-radius:0;padding:15px 0 0}
.usp-list b{font-family:var(--font-display);font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--em-800);display:block;margin-bottom:8px;line-height:1.35}
.usp-list p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:0}
@media (max-width:560px){
  .usp-list{grid-template-columns:1fr;gap:22px}
}
@media (max-width:480px){
  .room-carousel .gallery-thumb{flex:0 0 78%}
  .rc-arrow{opacity:1!important;width:34px;height:34px}
  .rc-arrow.prev{left:10px}
  .rc-arrow.next{right:10px}
}
.amenity-cols{columns:2;gap:40px;list-style:none;margin-top:6px}
.amenity-cols li{break-inside:avoid;padding:9px 0;border-bottom:1px solid var(--sand);font-size:15px;display:flex;gap:10px;align-items:center}
.amenity-cols li::before{content:"";width:5px;height:5px;background:var(--rule-on-light);transform:rotate(45deg);flex:none}
.book-side{position:sticky;top:calc(var(--header-h) + 22px);background:#fff;border:1px solid var(--sand);border-top:3px solid var(--rule-on-light);border-radius:3px;padding:26px;box-shadow:0 18px 38px -20px rgba(var(--em-rgb),.25)}
.book-side .price{font-size:14px;color:var(--ink-soft);margin-bottom:18px}
.book-side .price b{font-family:var(--font-display);font-size:30px;font-weight:500;color:var(--em-800)}
/* .booking-card sets align-items:end so the fields bottom-align with the
   button in its grid row. Flipped to a column here, `end` becomes the
   horizontal end, which right-aligned every label and shrank the inputs to
   content width. Stretch is what a column wants. */
.book-side .booking-card{display:flex;flex-direction:column;align-items:stretch;gap:14px;
  box-shadow:none;border:0;border-top:0;padding:0;margin:0}
.book-side .booking-card .field{width:100%}
.book-side .booking-card .btn{margin-top:4px}
/* BookingBar ships its own .booking > .wrap chrome for the homepage: a 24px
   gutter and a negative top margin that pulls the card over the hero. Neither
   belongs inside a 400px sidebar, and the gutter was costing 48px of field
   width. The mobile breakpoint also retunes .booking, so pin both here. */
.book-side .booking{margin-top:26px}
.book-side .booking .wrap{max-width:none;padding:0;margin:0}
.book-side .btn{width:100%}
.book-side .fine{font-size:12.5px;color:var(--ink-soft);margin-top:12px;display:flex;gap:8px;align-items:flex-start}
.detail-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:10px;font-family:var(--font-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(207,216,205,.9)}
.detail-meta span{display:flex;gap:8px;align-items:center}
.detail-meta svg{color:var(--brass-soft)}
.also-like{padding:0 0 110px}
.also-like h2{margin-bottom:30px}
.also-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(var(--em-rgb),.94);display:flex;align-items:center;justify-content:center;padding:5vmin;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s;cursor:zoom-out}
.lightbox.open{opacity:1;visibility:visible;transition:opacity .25s}
.lightbox img{max-width:100%;max-height:100%;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.5)}

@media (max-width:1020px){
  .detail-layout{grid-template-columns:1fr;gap:40px}
  .book-side{position:static}
}
@media (max-width:860px){
  .room-feature{grid-template-columns:1fr}
  .room-feature figure{min-height:260px}
  .room-feature.flip figure{order:0}
  .room-feature .room-body{padding:28px 24px}
  .also-grid{grid-template-columns:1fr}
  .amenity-cols{columns:1}
  .page-hero{padding:calc(var(--header-h-full) + 34px) 0 44px}
}

/* ============ logo image ============ */
.logo img{display:block;width:auto;align-self:flex-start;flex:none;object-fit:contain}
.site-header .logo img{height:38px}
.mobile-nav .logo img,.footer-brand .logo img{height:34px}
.logo .est{display:block;font-family:var(--font-display);font-size:8.5px;letter-spacing:.42em;
  color:var(--brass-soft);margin-top:6px;text-transform:uppercase}
.hdrC .logo .est{color:var(--em-700)}
@media (max-width:640px){
  .site-header .logo img{height:31px}
  .logo .est{font-size:7.5px;letter-spacing:.34em}
}

/* ============================================================
   PICKED LAYOUTS - assembled from the design lab
   Header B · Hero B · Intro C · Rooms B · Features C
   After Dark C · Offers B          (Booking/Location/Footer = A)
============================================================ */

/* ---------- Header B · Grand Centre ---------------------------------- */
/* header sits on an emerald hero panel of the SAME green - it needs its own
   bottom edge or the bar dissolves into the hero. */
.site-header{background:var(--em-900);border-bottom:1px solid rgba(var(--accent-rgb),.42);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
.site-header.scrolled{box-shadow:0 10px 30px -12px rgba(0,0,0,.8)}
.hdr-row{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  max-width:var(--maxw);margin:0 auto;padding:16px 24px;gap:56px}
.hdr-row .main-nav{display:flex;gap:30px}
.hdr-row .nav-left{justify-content:flex-end}
.hdr-row .logo{align-items:center;text-align:center;padding:0 10px}
.hdr-row .nav-toggle{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%)}
/* The Book Direct rail collapses on scroll. At 127px the full header ate a
   third of a phone screen; folding the rail away takes it to about 88px and
   leaves the logo and menu, which is what a scrolling reader needs.
   max-height is animated rather than height because the row has no fixed
   height, and 60px clears the tallest breakpoint. visibility flips only after
   the collapse finishes, so the link leaves the tab order without cutting the
   fade short. */
.hdr-book{border-top:1px solid rgba(var(--accent-rgb),.35);display:flex;justify-content:center;padding:10px;
  overflow:hidden;max-height:60px;visibility:visible;
  transition:max-height .34s cubic-bezier(.4,0,.2,1),padding .34s cubic-bezier(.4,0,.2,1),
    opacity .2s ease,border-top-color .34s ease,visibility 0s}
.site-header.scrolled .hdr-book{max-height:0;padding-top:0;padding-bottom:0;opacity:0;
  border-top-color:transparent;visibility:hidden;
  transition:max-height .34s cubic-bezier(.4,0,.2,1),padding .34s cubic-bezier(.4,0,.2,1),
    opacity .2s ease,border-top-color .34s ease,visibility 0s linear .34s}
.hdr-book a{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass-soft);transition:color .2s}
.hdr-book a:hover{color:#fff}

/* ---------- Hero B · Emerald Panel ----------------------------------- */
.hero-split{display:grid;grid-template-columns:.7fr 1.3fr;min-height:88svh;
  padding-top:var(--header-h-full);background:var(--em-950)}
.hero-split .panel{background:var(--em-950);color:var(--cream);display:flex;flex-direction:column;
  justify-content:center;padding:64px 56px;position:relative;overflow:hidden}
.hero-split .panel::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(var(--accent-rgb),.06) 0 1px,transparent 1px 64px)}
.hero-split .panel>*{position:relative}
.hero-split .kicker{color:var(--brass-soft);white-space:nowrap;letter-spacing:.24em;font-size:11.5px}
.hero-split .kicker::before{background:var(--brass-soft)}
.hero-split h1{font-size:clamp(34px,3.6vw,54px);color:var(--cream);margin:16px 0 14px;max-width:13ch}
.hero-split .panel p{color:#CFD8CD;max-width:44ch;margin-bottom:28px}
/* These are facts, not actions. Outlined pills sat directly above the ghost
   "Explore Rooms" button and read as buttons, so they now use the same
   rule-separated spec-line language as .detail-meta on the room pages. */
.hero-facts{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;margin-bottom:30px}
.hero-facts span{position:relative;color:var(--brass-soft);font-family:var(--font-display);
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:0 20px}
.hero-facts span:first-child{padding-left:0}
.hero-facts span:last-child{padding-right:0}
.hero-facts span + span::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:13px;background:rgba(var(--accent-rgb),.42)}
.hero-split figure{position:relative;min-height:420px}
.hero-split figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-split figure::after{content:"720 OCEAN DRIVE · EST 1936";position:absolute;left:22px;bottom:18px;
  background:rgba(var(--em-rgb),.78);color:var(--brass-soft);font-family:var(--font-display);
  font-size:9.5px;letter-spacing:.3em;padding:9px 12px 7px;border-radius:2px}

/* ---------- Intro C · Heritage Line ---------------------------------- */
.heritage{padding:90px 24px;background:linear-gradient(180deg,var(--cream) 0%,#EFE7D8 100%)}
.heritage .inner{max-width:var(--maxw);margin:0 auto}
.heritage h2{margin:16px 0 40px}
.tl{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}
.tl::before{content:"";position:absolute;top:86px;left:4%;right:4%;height:1px;
  background:var(--rule-on-light);opacity:.6}
.tl-item .year{font-family:var(--font-display);font-size:34px;font-weight:500;color:var(--em-700)}
.tl-item .dot{width:11px;height:11px;background:var(--rule-on-light);transform:rotate(45deg);
  margin:14px 0 20px;position:relative;z-index:1;border:2px solid var(--cream)}
.tl-item figure{aspect-ratio:16/10;overflow:hidden;border-radius:3px;border:1px solid var(--sand);margin-bottom:14px}
.tl-item img{width:100%;height:100%;object-fit:cover}
.tl-item b{font-family:var(--font-display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  display:block;margin-bottom:6px}
.tl-item p{font-size:14px;color:var(--ink-soft)}

/* ---------- Rooms B · The Parade ------------------------------------- */
.rooms-parade{padding:88px 0;background:var(--cream)}
.rooms-parade .head{max-width:var(--maxw);margin:0 auto 34px;padding:0 24px;display:flex;align-items:end;gap:24px}
.rooms-parade .arrows{margin-left:auto;display:flex;gap:10px}
.rooms-parade .arrow{width:46px;height:46px;border:1px solid var(--em-700);background:#fff;color:var(--em-800);
  border-radius:2px;cursor:pointer;display:grid;place-items:center;font-size:18px;transition:background .2s,color .2s}
.rooms-parade .arrow:hover{background:var(--em-700);color:var(--cream)}
.rooms-parade .arrow[disabled]{opacity:.3;cursor:default}
.rooms-parade .arrow[disabled]:hover{background:#fff;color:var(--em-800)}
.rooms-parade .track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(340px,420px);gap:22px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 24px 24px;scrollbar-width:none}
.rooms-parade .track::-webkit-scrollbar{display:none}
.rooms-parade .room-card{scroll-snap-align:start}
.rooms-parade .all-rooms{max-width:var(--maxw);margin:6px auto 0;padding:0 24px}

/* ---------- Features C · Story Bands --------------------------------- */
.story-bands{background:var(--cream)}
.story-bands .band{display:grid;grid-template-columns:1fr 1fr;min-height:380px}
.story-bands .band:nth-child(even) figure{order:2}
.story-bands figure{position:relative}
.story-bands figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-bands .txt{display:flex;flex-direction:column;justify-content:center;padding:56px 60px;background:#fff}
.story-bands .band:nth-child(2) .txt{background:var(--em-900);color:var(--cream)}
.story-bands .band:nth-child(2) .txt h3{color:var(--cream)}
.story-bands .band:nth-child(2) .txt p{color:#CFD8CD}
.story-bands .band:nth-child(2) .kicker{color:var(--em-300)}
.story-bands .band:nth-child(2) .kicker::before{background:var(--em-300)}
.story-bands h3{font-size:clamp(22px,2.4vw,30px);margin:14px 0 12px}
.story-bands p{color:var(--ink-soft);max-width:46ch}
.story-bands .link{margin-top:20px;font-family:var(--font-display);font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--em-700)}
.story-bands .band:nth-child(2) .link{color:var(--brass-soft)}

/* ---------- After Dark C · The Word of Mouth ------------------------- */
.night-quote{display:grid;grid-template-columns:.95fr 1.05fr;background:var(--em-900);color:var(--cream)}
.night-quote .quote{padding:80px 64px;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden}
.night-quote .quote::before{content:"\201C";font-family:var(--font-display);font-size:clamp(150px,14vw,260px);
  line-height:1;position:absolute;top:6px;left:34px;color:rgba(var(--accent-rgb),.18)}
/* the old clamp topped out at 30px while the panel kept growing, so wide
   screens showed a small quote in a big empty box. Let both scale - but the
   type is sized down and the measure widened, so the panel still fills. */
.night-quote blockquote{font-family:var(--font-display);font-size:clamp(19px,2vw,30px);line-height:1.45;
  max-width:40ch;position:relative}
.night-quote cite{display:block;margin-top:22px;font-style:normal;font-size:13.5px;letter-spacing:.08em;
  color:var(--brass-soft);text-transform:uppercase}
.night-quote .stars{color:var(--brass-soft);letter-spacing:6px;margin-bottom:18px;font-size:15px}
.night-quote .night-photo{position:relative;min-height:420px}
.night-quote .night-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* --- rotating guest reviews (cross-fade, 5s) --- */
.revs{position:relative;display:grid}
/* every slide stacks in the same cell so the section never jumps height */
.rev{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .8s ease;
  pointer-events:none}
.rev.is-on{opacity:1;visibility:visible;pointer-events:auto}
.rev figcaption{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.rev .who{font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
.rev .src{display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass-soft);opacity:.85}
.g-mark{width:15px;height:15px;flex:none}
.rev-dots{display:flex;gap:9px;margin-top:26px}
.rev-dots button{width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(var(--accent-rgb),.6);background:transparent;transition:background .25s,transform .25s}
.rev-dots button[aria-selected="true"]{background:var(--brass);transform:scale(1.25)}
.rev-dots button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.rev-dots:empty{display:none}
@media (prefers-reduced-motion:reduce){.rev{transition:none}}

/* ---------- Offers B · The Rate Card --------------------------------- */
.offers-grid{padding:92px 24px;background:var(--cream)}
.offers-grid .inner{max-width:var(--maxw);margin:0 auto}
.offers-grid .grid{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ocard{display:grid;grid-template-columns:200px 1fr;background:#fff;border:1px solid var(--sand);
  border-radius:3px;overflow:hidden}
.ocard figure{position:relative;min-height:100%}
.ocard figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ocard .body{padding:22px 24px;display:flex;flex-direction:column;gap:7px}
.ocard .pct{font-family:var(--font-display);font-size:30px;font-weight:600;color:var(--em-700);line-height:1}
.ocard .pct small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.ocard h3{font-size:18px}
.ocard p{font-size:13.5px;color:var(--ink-soft)}
.ocard .row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.ocard .terms{font-size:11.5px;color:var(--ink-soft);opacity:.75;border-top:1px dashed var(--sand);
  padding-top:8px;margin-top:auto}
.ocard .row .btn{padding:11px 18px 9px}
.ocard.wide{grid-column:1/-1;grid-template-columns:300px 1fr}

/* ---------- responsive for the picked layouts ------------------------ */
/* 35/65 leaves the copy column narrow; between stacking (980) and 1200 the
   fixed panel padding is what pushes the headline to a third line. */
@media (min-width:981px) and (max-width:1200px){
  .hero-split .panel{padding:64px 40px}
}
@media (max-width:980px){
  .hero-split{grid-template-columns:1fr;min-height:0}
  /* extra bottom padding + a shallower overlap: at -58px the booking card
     landed on top of the hero CTAs once this column stacked. */
  .hero-split .panel{padding:48px 28px 76px}
  .booking{margin-top:-32px}
  /* photo leads on small screens - the facade sells harder than the headline */
  .hero-split figure{min-height:320px;order:-1}
  /* the photo's own "720 OCEAN DRIVE" badge says this already */
  .hero-split .kicker{display:none}
  .night-quote{grid-template-columns:1fr}
  .night-quote .quote{padding:56px 28px}
  /* scoped to the photo on purpose: .rev is a <figure> too, and an unscoped
     rule here padded every review slide to 300px, leaving dead green below
     the quote. */
  .night-quote .night-photo{min-height:300px;order:-1}
  /* the ornament's ink starts ~0.074em inside its box, so a plain left:28px
     pushed it right of the text it is supposed to hang beside. */
  .night-quote .quote::before{left:calc(28px - .074em)}
  .story-bands .band{grid-template-columns:1fr;min-height:0}
  .story-bands .band:nth-child(even) figure{order:0}
  .story-bands figure{min-height:240px}
  .story-bands .txt{padding:44px 28px}
  .offers-grid .grid{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr;gap:36px}
  .tl::before{display:none}
}

@media (max-width:860px){
  .hdr-row{grid-template-columns:1fr;justify-items:center;padding:14px 24px}
  .hdr-row .main-nav{display:none}
  .hdr-row .nav-toggle{display:block}
  .hdr-book{padding:8px}
  .hdr-book a{font-size:9.5px;letter-spacing:.22em}
  .rooms-parade .track{grid-auto-columns:minmax(280px,86vw)}
  .rooms-parade .arrows{display:none}
  .ocard{grid-template-columns:1fr}
  .ocard figure{min-height:180px}
}

/* Footer, phone layout. The brand blurb was capped at 30ch and the three link
   groups each took a full-width row, so the footer ran longer than the page it
   closes. Brand goes full width, the two link groups sit side by side, and the
   mailing-list form keeps its own row because it holds an input. */
@media (max-width:640px){
  .footer-main{grid-template-columns:1fr 1fr;gap:34px 22px;padding:54px 0 44px}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{max-width:none;margin-top:14px}
  .footer-addr{margin-top:18px}
  .footer-main>div:last-child{grid-column:1/-1}
  .site-footer h4{margin-bottom:14px}
  .footer-links{gap:10px}
  .footer-links a{font-size:14px}
  .footer-contact{gap:12px;font-size:14px}
}

/* Offers, phone layout. One full-width card per offer meant five screens of
   scroll, so they go two-up. Everything inside scales down to match: the card
   is roughly half the width it was built for. The fifth offer keeps its
   full-width span but turns horizontal, so row three is not half empty. */
@media (max-width:640px){
  .offers-grid{padding:66px 24px 62px}
  .offers-grid .grid{grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
  /* 1fr is minmax(auto,1fr) and that auto floors at min-content, so the body
     held itself at 258px inside a 225px card and overflow:hidden clipped the
     copy and the button. minmax(0,...) lets it wrap instead. */
  .ocard{grid-template-columns:minmax(0,1fr)}
  .ocard figure{aspect-ratio:4/3;min-height:0}
  .ocard .body{padding:14px 14px 13px;gap:5px}
  .ocard .pct{font-size:22px}
  .ocard .pct small{font-size:10px}
  .ocard h3{font-size:14px;line-height:1.25}
  .ocard p{font-size:12px;line-height:1.45}
  .ocard .row{margin-top:6px}
  .ocard .row .btn{width:100%;font-size:10.5px;letter-spacing:.12em;padding:10px 8px 8px}
  .ocard .terms{font-size:10px;padding-top:7px}
  /* the fifth offer spans both columns, so it reads better side by side */
  .ocard.wide{grid-template-columns:40% minmax(0,1fr)}
  .ocard.wide figure{aspect-ratio:auto;min-height:100%}
  .ocard.wide .row .btn{width:auto;padding:10px 18px 8px}
}

/* Heritage timeline, phone layout. Stacked full-width cards ran to roughly
   three screens of scroll for what is a three-line story, so each era becomes
   a compact row: square thumbnail left, year + title + copy right. The photos
   still carry the point (same building, three eras) at thumbnail size. */
@media (max-width:640px){
  .heritage{padding:64px 24px 60px}
  .heritage h2{margin:12px 0 28px}
  .tl{gap:0}
  .tl-item{
    display:grid;
    /* 156px is the target. The clamp only bites on narrow phones, where a
       fixed 156 would leave the copy column under 160px. */
    grid-template-columns:clamp(120px,38%,156px) 1fr;
    grid-template-areas:
      "photo year"
      "photo title"
      "photo body"
      "credit credit";
    column-gap:16px;
    align-items:start;
    padding:20px 0;
    border-top:1px solid rgba(var(--em-rgb),.14);
  }
  .tl-item:first-child{border-top:0;padding-top:0}
  .tl-item:last-child{padding-bottom:0}
  /* the connector diamond belongs to the horizontal rule, which is gone here */
  .tl-item .dot{display:none}
  .tl-item figure{grid-area:photo;aspect-ratio:1;align-self:start;margin:0}
  .tl-item .year{grid-area:year;font-size:23px;line-height:1}
  .tl-item b{grid-area:title;margin:8px 0 5px;font-size:12.5px;letter-spacing:.08em}
  .tl-item>p:not(.tl-credit){grid-area:body;font-size:13px;line-height:1.55}
  .tl-item .tl-credit{grid-area:credit;margin-top:12px}
}

/* ---------- Rooms page B · filterable grid + chips -------------------- */
.room-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.fchip{font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--em-800);background:#fff;border:1px solid var(--sand);
  border-radius:2px;padding:11px 16px 9px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background .18s,color .18s,border-color .18s}
.fchip:hover{border-color:var(--em-700)}
.fchip .n{font-size:10px;opacity:.6;font-weight:500}
.fchip.is-on{background:var(--em-800);color:var(--cream);border-color:var(--em-800)}
.fchip.is-on .n{opacity:.75}
.filter-count{font-size:13px;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:26px}
.rooms-page .rooms-grid{grid-template-columns:repeat(3,1fr)}
.rooms-page .room-card[hidden]{display:none}
.room-amenities{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.room-amenities .chip{font-family:var(--font-display);font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--em-800);background:var(--em-100);border-radius:2px;padding:6px 9px 4px}
.no-match{padding:40px 0;color:var(--ink-soft);text-align:center}
.link-btn{background:none;border:0;color:var(--em-700);font:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:980px){.rooms-page .rooms-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.rooms-page .rooms-grid{grid-template-columns:1fr}
  .fchip{font-size:10.5px;padding:9px 12px 7px}}

/* ---------- Room detail B · full-bleed gallery first ------------------ */
.room-hero{position:relative;min-height:min(74svh,620px);display:flex;align-items:flex-end;
  color:var(--cream);isolation:isolate;padding-top:var(--header-h-full)}
.room-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.room-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(var(--em-rgb),.55) 0%,rgba(var(--em-rgb),0) 34%,rgba(10,26,12,.82) 100%)}
.room-hero .in{width:100%;padding:0 0 46px}
.room-hero .crumbs{color:rgba(244,239,230,.8)}
.room-hero .crumbs a{color:var(--brass-soft)}
.room-hero .kicker{color:var(--brass-soft)}
.room-hero .kicker::before{background:var(--brass-soft)}
.room-hero h1{color:var(--cream);margin:14px 0 16px;text-shadow:0 2px 22px rgba(0,0,0,.4)}
.room-hero .detail-meta{color:var(--cream);flex-wrap:wrap}
.room-hero .detail-meta .from{border-left:1px solid rgba(var(--accent-rgb),.45);padding-left:18px;
  color:var(--brass-soft);text-transform:none;letter-spacing:.02em}
.room-hero .detail-meta .from b{font-family:var(--font-display);font-size:19px;font-weight:600}

/* One-row looping photo carousel. Four visible, two on a tablet, one and a
   bit on a phone so the cut edge signals there is more to swipe to. Slide
   width lives here only: the component reads offsetLeft, so the gap and the
   breakpoints never have to be repeated in JS. */
.room-carousel{position:relative;padding:8px;background:var(--em-900)}
.room-carousel .viewport{overflow:hidden}
.room-carousel .track{display:flex;gap:8px;will-change:transform}
.room-carousel .gallery-thumb{flex:0 0 calc((100% - 24px) / 4);position:relative;border:0;padding:0;
  background:none;cursor:pointer;aspect-ratio:16/10;overflow:hidden;border-radius:2px}
.room-carousel .gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s,opacity .2s}
.room-carousel .gallery-thumb:hover img{transform:scale(1.05);opacity:.9}
.room-carousel .gallery-thumb:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}

.rc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(var(--em-rgb),.86);color:var(--cream);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.6);transition:background .2s,opacity .2s}
.rc-arrow:hover{background:var(--em-700)}
.rc-arrow:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.rc-arrow.prev{left:16px}
.rc-arrow.next{right:16px}
@media (hover:hover){
  .room-carousel .rc-arrow{opacity:0}
  .room-carousel:hover .rc-arrow,.room-carousel:focus-within .rc-arrow{opacity:1}
}
@media (max-width:760px){
  .room-carousel .gallery-thumb{flex:0 0 calc((100% - 8px) / 2)}
  .room-hero{min-height:min(62svh,480px)}
  .room-hero .detail-meta .from{border-left:0;padding-left:0}
}

/* ---------- skip link (keyboard users land here first) ---------------- */
.skip-link{position:absolute;left:16px;top:-60px;z-index:200;background:var(--brass);
  color:var(--on-accent);font-family:var(--font-display);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;padding:13px 20px 11px;border-radius:2px;
  transition:top .18s}
.skip-link:focus{top:16px}

/* ---------- legal / long-form pages ----------------------------------- */
.legal-page{background:var(--cream);padding:64px 0 96px}
.legal-page .wrap{max-width:800px}
.legal-updated{font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);padding-bottom:22px;border-bottom:1px solid var(--rule-on-light)}
.legal-page h2{font-size:clamp(19px,2.1vw,24px);margin:52px 0 14px;padding-top:6px}
.legal-page h3{font-size:15px;letter-spacing:.14em;color:var(--em-800);margin:30px 0 10px}
.legal-page p{margin-bottom:16px;color:var(--ink-soft)}
.legal-page ul,.legal-page ol{margin:0 0 18px 22px;color:var(--ink-soft)}
.legal-page li{margin-bottom:9px}
.legal-page b{color:var(--ink);font-weight:500}
.legal-page a{color:var(--em-700);text-decoration:underline;text-underline-offset:3px}
.legal-page kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:#fff;border:1px solid var(--sand);border-bottom-width:2px;border-radius:3px;padding:2px 6px}

/* draft banner - remove this block once the pages are lawyer-approved */
.legal-warn{background:#FFF8E1;border:1px solid #E8D9A0;border-left:3px solid #C9A227;
  border-radius:3px;padding:18px 22px;margin:26px 0 8px;font-size:14.5px;color:var(--ink-soft)}
.legal-warn b{color:var(--ink)}
.todo{background:#FFE0D8;border:1px solid #E8A491;border-bottom-width:2px;color:#6E2410;
  font-size:.95em;font-weight:500;padding:2px 6px;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

.legal-toc{background:#fff;border:1px solid var(--sand);border-radius:3px;padding:24px 28px 20px;margin:26px 0 6px}
.legal-toc h2{font-size:11.5px!important;letter-spacing:.24em;color:var(--ink-soft);margin:0 0 14px!important;padding:0!important}
.legal-toc ol{margin:0 0 0 18px;font-size:14.5px}
.legal-toc li{margin-bottom:6px}
.legal-toc a{color:var(--em-700);text-decoration:none}
.legal-toc a:hover{text-decoration:underline}

.table-scroll{overflow-x:auto;margin:0 0 20px;border:1px solid var(--sand);border-radius:3px;background:#fff}
.legal-table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.legal-table th,.legal-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--sand);
  vertical-align:top;color:var(--ink-soft)}
.legal-table th{font-family:var(--font-display);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--em-800);background:var(--em-100);border-bottom-color:var(--rule-on-light)}
.legal-table tr:last-child td{border-bottom:0}
.legal-table b{color:var(--ink);font-weight:500}

@media (max-width:680px){
  .legal-page{padding:44px 0 64px}
  .legal-page h2{margin-top:40px}
  .legal-toc{padding:20px 20px 16px}
}

/* ---------- cookie notice --------------------------------------------
   Sits above the theme widget (z 120) and the mobile book bar (z 55),
   below the UserWay panel. Left inset clears the middle-left a11y icon. */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:130;background:var(--em-900);
  color:var(--cream);border-top:1px solid var(--brass);
  box-shadow:0 -14px 40px -18px rgba(0,0,0,.75);
  transform:translateY(100%);transition:transform .32s ease}
.cookie-bar.in{transform:none}
.cookie-in{max-width:var(--maxw);margin:0 auto;padding:18px 24px calc(18px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.cookie-bar p{flex:1;min-width:280px;font-size:14.5px;line-height:1.55;color:#CFD8CD;margin:0}
.cookie-bar a{color:var(--brass-soft);text-decoration:underline;text-underline-offset:3px}
.cookie-acts{display:flex;gap:10px;flex-wrap:wrap}
.cookie-bar button{font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding:13px 22px 11px;border-radius:2px;cursor:pointer;border:1px solid transparent;
  transition:background .18s,color .18s,border-color .18s}
.cookie-bar .btn-primary{background:var(--brass);color:var(--on-accent)}
.cookie-bar .btn-primary:hover{background:var(--brass-soft)}
.cookie-bar .btn-secondary{background:transparent;color:var(--cream);border-color:rgba(var(--accent-rgb),.55)}
.cookie-bar .btn-secondary:hover{border-color:var(--brass);color:var(--brass-soft)}
@media (prefers-reduced-motion:reduce){.cookie-bar{transition:none}}
@media (max-width:680px){
  .cookie-in{padding:16px 18px calc(16px + env(safe-area-inset-bottom));gap:14px}
  .cookie-bar p{font-size:13.5px;min-width:100%}
  .cookie-acts{width:100%}
  .cookie-bar button{flex:1}
}
/* keep the theme widget clear of the notice while it is showing */
body:has(.cookie-bar) .theme-widget,
body:has(.cookie-bar) .mobile-book{bottom:auto}

/* ---------- Group bookings page --------------------------------------- */
.groups-why{padding:88px 0 20px;background:var(--cream)}
.group-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:42px 0 34px}
.gcard{background:#fff;border:1px solid var(--sand);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.gcard figure{aspect-ratio:16/10;overflow:hidden}
.gcard figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gcard:hover figure img{transform:scale(1.04)}
.gcard .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.gcard h3{font-size:18px}
.gcard p{font-size:14px;color:var(--ink-soft)}
/* internal "must confirm before launch" marker. Deliberately loud - it is a
   checklist item, not decoration, and it must never slip through to the client. */
.gnote-line{font-size:12.5px!important;line-height:1.45;color:#6E2410!important;background:#FFE0D8;
  border:1px solid #E8A491;border-left:4px solid #C0442A;border-radius:3px;
  padding:9px 11px;margin-top:auto}
.gnote-line::before{content:"To confirm";display:block;font-family:var(--font-display);
  font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#A8371F;margin-bottom:3px}

.group-perks{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 8px;
  border-top:1px solid var(--rule-on-light);border-bottom:1px solid var(--rule-on-light)}
.group-perks li{padding:22px 20px;border-right:1px solid var(--rule-on-light)}
.group-perks li:last-child{border-right:0}
.group-perks b{display:block;font-family:var(--font-display);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--em-800);margin-bottom:6px}
.group-perks span{font-size:13.5px;color:var(--ink-soft)}

/* two-step enquiry form */
.groups-form{padding:56px 0 100px;background:var(--cream)}
.form-shell{max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--sand);
  border-top:3px solid var(--brass);border-radius:3px;padding:34px 36px 30px;
  box-shadow:0 24px 54px -26px rgba(var(--em-rgb),.4)}
.form-head .steps{font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--em-700);margin:16px 0 9px}
.step-bar{height:3px;background:var(--sand);border-radius:2px;overflow:hidden;margin-bottom:28px}
.step-bar span{display:block;height:100%;width:50%;background:var(--em-700);transition:width .3s}
.groups-form fieldset{border:0;padding:0;margin:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:18px}
.form-shell .field label .opt{font-weight:400;letter-spacing:.06em;text-transform:none;
  color:var(--ink-soft);opacity:.7;font-size:10.5px}
.form-shell textarea{width:100%;font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:var(--cream);border:1px solid var(--sand);border-radius:2px;padding:12px;resize:vertical}
.form-shell .field input:focus-visible,.form-shell .field select:focus-visible,
.form-shell textarea:focus-visible{outline:2px solid var(--em-700);outline-offset:1px}
.form-shell .invalid{border-color:#C1493A;background:#FFF6F4}
/* phone field: flag + dial code prefix, then the number.
   The select is sized to its content so long country names in the open list do
   not stretch the closed control. Flags are regional-indicator pairs: Apple,
   Android and Linux draw a flag, Windows draws the two letters, which is why
   the ISO code is in the option text as well. */
.phone-row{display:grid;grid-template-columns:118px 1fr;gap:8px}
/* Fixed, not auto: `auto` sizes a select to its widest option, so a long entry
   like the Trinidad code took half the field and left the number 131px. The
   closed control only ever shows "US +1"; the full names are in the open list. */
.phone-row .dial{width:100%;min-width:0;padding-right:24px;text-overflow:ellipsis;
  font-family:var(--font-body);font-size:15px;cursor:pointer}
.phone-row input{min-width:0}
.phone-row.invalid input,.phone-row.invalid .dial{border-color:#C1493A;background:#FFF6F4}
@media (max-width:420px){
  .phone-row{grid-template-columns:104px 1fr}
  .phone-row .dial{font-size:14px}
}

/* per-field message, under the control it belongs to */
/* Author rules outrank the browser's [hidden]{display:none}, so any class
   that sets `display` (like .field-err below) would keep a hidden element on
   screen. This puts the attribute back in charge everywhere. */
[hidden]{display:none!important}
.field-err{color:#A8331F;font-size:12.5px;line-height:1.4;margin-top:6px;
  display:flex;gap:6px;align-items:flex-start}
.field-err::before{content:"!";flex:none;width:14px;height:14px;border-radius:50%;
  background:#A8331F;color:#fff;font-size:9.5px;font-weight:700;line-height:14px;
  text-align:center;margin-top:1px}
.form-err{color:#A8331F;font-size:13.5px;margin:2px 0 14px}
.form-acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}
.form-foot{max-width:860px;margin:18px auto 0;font-size:13.5px;color:var(--ink-soft);text-align:center}
.form-done{text-align:center;padding:26px 0 10px}
.form-done .tick{width:52px;height:52px;margin:0 auto 18px;border-radius:50%;background:var(--em-100);
  color:var(--em-800);font-size:24px;display:grid;place-items:center}
.form-done h3{font-size:21px;margin-bottom:10px}
.form-done p{color:var(--ink-soft)}
.form-done .call{margin-top:14px;font-size:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:980px){
  .group-grid{grid-template-columns:1fr;gap:18px}
  .group-perks{grid-template-columns:1fr 1fr}
  .group-perks li:nth-child(2n){border-right:0}
  .group-perks li:nth-child(-n+2){border-bottom:1px solid var(--rule-on-light)}
  .grid-4{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .form-shell{padding:24px 20px 22px}
  .grid-2,.grid-4{grid-template-columns:1fr;gap:14px}
  .group-perks{grid-template-columns:1fr}
  .group-perks li{border-right:0;border-bottom:1px solid var(--rule-on-light)}
  .group-perks li:last-child{border-bottom:0}
  .form-acts{flex-direction:column-reverse}
  .form-acts .btn{width:100%}
}

/* ---------- floating widgets on mobile --------------------------------
   The sticky book bar is 70px tall. UserWay plants itself 13px off the
   bottom at 64px square, so it lands on top of the bar. Lift both above
   it and shrink them; UserWay writes inline styles, hence !important. */
@media (max-width:860px){
  #userwayAccessibilityIcon{
    left:14px!important; right:auto!important;
    bottom:84px!important; top:auto!important;
    transform:scale(.75)!important; transform-origin:left bottom!important;
  }
}

/* archival photo provenance - only the 1936 card carries one */
.tl-credit{font-size:11px!important;line-height:1.45;color:var(--ink-soft);opacity:.65;margin-top:8px}
.tl-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.tl-credit a:hover{color:var(--em-700);opacity:1}

/* ---------- per-card photo stepper ---------------------------------------
   Arrows are injected by JS only when a card figure holds more than one
   <img>, so adding a photo is just adding another <img> to the figure. */
.room-card figure{position:relative;overflow:hidden}
.room-card figure img{transition:opacity .45s ease}
.room-card figure img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden}
.room-card figure img.shot.is-on{opacity:1;visibility:visible;position:relative}
.shot-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:50%;background:rgba(255,255,255,.86);color:var(--em-900);
  font-size:15px;line-height:1;padding:0 1px 2px;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.45);
  opacity:0;transition:opacity .2s,background .2s}
.shot-nav.prev{left:10px}
.shot-nav.next{right:10px}
.shot-nav:hover{background:#fff}
.room-card:hover .shot-nav,.shot-nav:focus-visible{opacity:1}
.shot-nav:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.shot-count{position:absolute;right:10px;bottom:10px;z-index:3;
  background:rgba(var(--em-rgb),.82);color:var(--cream);
  font-family:var(--font-display);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  padding:4px 8px 3px;border-radius:2px;pointer-events:none}
/* touch devices have no hover, so keep the controls visible */
@media (hover:none){ .shot-nav{opacity:.92} }
@media (prefers-reduced-motion:reduce){ .room-card figure img{transition:none} }

/* ---------- photo carousel (hero + after dark) ------------------------
   Self-contained: it positions and sizes its own slides rather than relying on
   the <figure> rules at the drop site, so it behaves the same in both places.
   Slides stack in one box, so the container never changes height and only
   opacity animates. */
.pcarousel{position:relative;margin:0;overflow:hidden;min-height:420px}
.pshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease-in-out}
.pshot.is-on{opacity:1}
.pdots{position:absolute;right:20px;bottom:20px;z-index:3;display:flex;gap:9px}
.pdots button{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(var(--accent-rgb),.75);background:rgba(0,0,0,.28);
  transition:background .3s,transform .3s}
.pdots button[aria-selected="true"]{background:var(--brass);transform:scale(1.25)}
.pdots button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
/* the hero keeps its "720 Ocean Drive" badge, so lift the dots clear of it */
.hero-split .pdots{bottom:20px;right:20px}
@media (prefers-reduced-motion:reduce){.pshot{transition:none}}
@media (max-width:980px){
  .hero-split .pcarousel{min-height:320px;order:-1}
  .pdots{right:16px;bottom:16px}
}

/* ============ contact page ============================================
   Reuses .page-hero, .form-shell, .map-frame and .gnote-line. Only the
   page's own layout lives here. */
.contact-hero .lede{max-width:54ch}
.contact-main{padding:64px 0 100px;background:var(--cream)}

/* three direct routes, above the form: a guest with a problem today wants
   the phone number, not a textarea */
.contact-cards{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-bottom:52px}
.contact-cards li{background:#fff;border:1px solid var(--sand);border-top:3px solid var(--brass);
  border-radius:3px;padding:24px 24px 20px;display:flex;flex-direction:column;gap:7px}
.contact-cards .ci{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:var(--em-100);color:var(--em-800);margin-bottom:6px}
.contact-cards .ci svg{width:17px;height:17px}
.contact-cards h2{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-soft)}
.contact-cards .cval{font-family:var(--font-display);font-size:19px;font-weight:500;color:var(--em-800);
  letter-spacing:.01em;text-transform:none}
.contact-cards .cval:hover{color:var(--em-700);text-decoration:underline;text-underline-offset:3px}
.contact-cards p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.contact-cards .gnote-line{margin-top:auto}

.contact-split{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:start}
/* the shell is centred and capped for the group page's single column; here it
   sits in a grid track that already sets its width */
.contact-split .form-shell{max-width:none;margin:0}
.contact-side{display:flex;flex-direction:column;gap:26px}
.contact-side .map-frame{min-height:300px}

.contact-faq dl{margin-top:18px;border-top:1px solid var(--rule-on-light)}
.contact-faq dl>div{padding:16px 0;border-bottom:1px solid var(--rule-on-light)}
.contact-faq dt{font-family:var(--font-display);font-size:12.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--em-800);margin-bottom:7px}
.contact-faq dd{font-size:14px;color:var(--ink-soft);line-height:1.6}
.contact-faq dd p{margin:0}
.contact-faq dd .gnote-line{margin-top:10px}
.faq-foot{margin-top:18px;font-size:14px;color:var(--ink-soft)}
.faq-foot a{color:var(--em-700);text-decoration:underline;text-underline-offset:3px}

/* single-column field row, to match .grid-2 / .grid-4 */
.grid-1{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:18px}
.form-intro{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:12px 0 24px;max-width:52ch}

@media (max-width:980px){
  .contact-split{grid-template-columns:1fr;gap:34px}
  .contact-cards{grid-template-columns:1fr;gap:14px}
  .contact-cards li{padding:20px 20px 17px}
  .contact-side .map-frame{min-height:260px}
}
@media (max-width:640px){
  .contact-main{padding:48px 0 76px}
  .contact-cards{margin-bottom:36px}
  .grid-1{gap:14px;margin-bottom:14px}
}