/* ==========================================================================
   Miami Boat Party — "Midnight"
   Monochrome interface. The photograph is the only colour on the page.
   ========================================================================== */

:root{
  --ink:      #08090B;
  --ink-2:    #101216;
  --ink-3:    #171A1F;
  --paper:    #FFFFFF;
  --smoke:    rgba(255,255,255,.64);
  --smoke-2:  rgba(255,255,255,.44);
  --hair:     rgba(255,255,255,.14);
  --hair-2:   rgba(255,255,255,.30);

  --display:  "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --body:     "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:     "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut:      clamp(20px, 4vw, 56px);
  --max:      1320px;
  --bar:      0px;              /* mobile call bar height, set in media query */
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:var(--bar);
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:focus-visible{ outline:2px solid var(--paper); outline-offset:3px }

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.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;
}

/* ---------- type ---------------------------------------------------------- */

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--smoke);
  margin:0 0 18px;
}

.h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(52px, 11vw, 148px);
  line-height:.98;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0;
}

.h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(34px, 5.4vw, 74px);
  line-height:1.04;
  letter-spacing:.002em;
  text-transform:uppercase;
  margin:0 0 22px;
  text-wrap:balance;
}

.h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(22px, 2.5vw, 30px);
  line-height:1.12;
  text-transform:uppercase;
  margin:0 0 10px;
}

.lede{
  font-size:clamp(17px, 1.55vw, 20px);
  color:var(--smoke);
  max-width:56ch;
  margin:0;
}
.lede.tight{max-width:46ch}
.lede + .lede{margin-top:18px}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}

/* ---------- buttons ------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--display);
  font-size:clamp(17px, 1.6vw, 21px);
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:17px 28px;
  border-radius:2px;
  border:1px solid transparent;
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn-call{ background:var(--paper); color:var(--ink) }
.btn-call:hover{ transform:translateY(-2px) }
.btn-ghost{
  background:transparent;
  color:var(--paper);
  border-color:var(--hair-2);
  font-family:var(--body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  padding:16px 24px;
}
.btn-ghost:hover{ border-color:var(--paper) }
@media (prefers-reduced-motion:reduce){ .btn{transition:none} .btn-call:hover{transform:none} }

.btn .ico{width:17px;height:17px;flex:0 0 auto;fill:currentColor}

.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- nav ----------------------------------------------------------- */

.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(8,9,11,.86);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--hair);
}
.nav-in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:70px;
  max-width:var(--max); margin:0 auto; padding:0 var(--gut);
}
.brand{
  font-family:var(--display);
  font-size:20px;
  letter-spacing:.015em;
  text-transform:uppercase;
  line-height:1;
  flex:0 0 auto;
}
.nav-links{
  display:flex; gap:30px; list-style:none; margin:0; padding:0;
  font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--smoke);
}
.nav-links a:hover{color:var(--paper)}
.nav-tel{
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.01em;
  border:1px solid var(--hair-2); border-radius:2px; padding:9px 15px;
  flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
}
.nav-tel:hover{border-color:var(--paper)}
.nav-tel .ico{width:14px;height:14px;fill:currentColor}

@media (max-width:1020px){ .nav-links{display:none} }
@media (max-width:560px){ .nav-tel span{display:none} .nav-tel{padding:9px 11px} }

/* ---------- hero ---------------------------------------------------------- */

.hero{position:relative; isolation:isolate; overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:saturate(1.14) contrast(1.03)}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,9,11,.28) 0%, rgba(8,9,11,.02) 22%, rgba(8,9,11,.14) 46%, rgba(8,9,11,.52) 72%, rgba(8,9,11,.86) 92%, var(--ink) 100%);
}
.hero-in{
  max-width:var(--max); margin:0 auto; padding:clamp(90px,17vh,180px) var(--gut) clamp(38px,6vh,60px);
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:min(88vh, 860px);
}
.hero .eyebrow{color:rgba(255,255,255,.86)}
.hero .eyebrow, .hero .lede, .hero-note{text-shadow:0 1px 16px rgba(8,9,11,.9)}
.hero .h1{text-shadow:0 2px 30px rgba(8,9,11,.55)}
.hero .h1{max-width:11ch; margin-bottom:24px}
.hero .lede{margin-bottom:32px; color:rgba(255,255,255,.88)}
.hero-note{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,.62); margin:26px 0 0;
}

/* ---------- fact bar ------------------------------------------------------ */

.facts{border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.facts-in{
  max-width:var(--max); margin:0 auto; padding:0 var(--gut);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.fact{padding:22px 0 24px; border-right:1px solid var(--hair); padding-right:22px}
.fact:last-child{border-right:0}
.fact + .fact{padding-left:26px}
.fact b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(24px,2.6vw,34px); line-height:1.06; letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.fact span{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--smoke-2); margin-top:5px;
}
@media (max-width:760px){
  .facts-in{grid-template-columns:1fr 1fr}
  .fact:nth-child(2n){border-right:0}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .fact + .fact{padding-left:0}
  .fact:nth-child(2n){padding-left:26px}
}

/* ---------- section scaffolding ------------------------------------------- */

.section{padding:clamp(72px,10vw,132px) 0}
.section--hair{border-top:1px solid var(--hair)}

.section-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(24px,5vw,72px); align-items:end; margin-bottom:clamp(38px,5vw,64px);
}
@media (max-width:860px){ .section-head{grid-template-columns:1fr; gap:20px} }

/* ---------- split (image + copy) ------------------------------------------ */

.split{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,72px); align-items:start;
}
.split.flip .split-media{order:2}
@media (max-width:900px){
  .split{grid-template-columns:1fr; gap:30px}
  .split.flip .split-media{order:0}
}
.split-media img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:center 34%; border-radius:2px}
.split-body .h2{margin-bottom:20px}

.ticks{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:11px}
.ticks li{
  position:relative; padding-left:19px;
  font-size:15.5px; line-height:1.5; color:var(--smoke);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--paper);
}
.ticks b{color:var(--paper); font-weight:600}

/* ---------- occasion cards ------------------------------------------------ */

.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--hair)}
@media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .cards{grid-template-columns:1fr} }

.card{
  position:relative; background:var(--ink); overflow:hidden; isolation:isolate;
  min-height:330px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px 24px 24px;
}
.card img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover; opacity:.74; transition:transform .5s ease, opacity .3s ease;
}
.card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,9,11,.18) 0%, rgba(8,9,11,.62) 48%, rgba(8,9,11,.9) 84%);
}
.card:hover img{transform:scale(1.045); opacity:.86}
@media (prefers-reduced-motion:reduce){ .card img{transition:none} .card:hover img{transform:none} }
.card p{font-size:14.5px; color:var(--smoke); margin:0 0 14px}
.card .more{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
}

/* ---------- steps (a real sequence) --------------------------------------- */

.steps{counter-reset:s; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--hair)}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }
.step{background:var(--ink); padding:30px 26px 34px}
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--smoke-2); margin-bottom:20px;
}
.step p{font-size:15.5px; color:var(--smoke); margin:0}

/* ---------- reviews ------------------------------------------------------- */

.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--hair)}
@media (max-width:900px){ .reviews{grid-template-columns:1fr} }
.review{background:var(--ink-2); padding:30px 26px}
.review .stars{letter-spacing:.22em; font-size:13px; margin-bottom:16px; color:var(--paper)}
.review blockquote{margin:0 0 18px; font-size:16.5px; line-height:1.55}
.review cite{
  font-family:var(--mono); font-style:normal; font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--smoke-2);
}
.is-placeholder{outline:1px dashed var(--hair-2); outline-offset:-1px}

/* ---------- FAQ ----------------------------------------------------------- */

.faq{border-top:1px solid var(--hair); max-width:900px}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  cursor:pointer; list-style:none; padding:24px 0;
  font-family:var(--display); font-size:clamp(19px,2vw,25px); text-transform:uppercase;
  line-height:1.14; display:flex; justify-content:space-between; gap:24px; align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); font-size:20px; color:var(--smoke-2); flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 0 26px; color:var(--smoke); max-width:66ch; font-size:16px}

/* ---------- big CTA band -------------------------------------------------- */

.band{position:relative; isolation:isolate; overflow:hidden; border-top:1px solid var(--hair)}
.band img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; opacity:.5}
.band::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,9,11,.66), rgba(8,9,11,.9))}
.band-in{
  max-width:var(--max); margin:0 auto; padding:clamp(72px,10vw,128px) var(--gut);
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.band .h2{max-width:16ch}
.band .lede{margin:0 auto 32px; text-align:center}

/* ---------- footer -------------------------------------------------------- */

.footer{border-top:1px solid var(--hair); padding:64px 0 40px; color:var(--smoke)}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:52px;
}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr; gap:32px} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr} }
.footer h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--smoke-2); margin:0 0 16px; font-weight:500;
}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:15px}
.footer a:hover{color:var(--paper)}
.footer .brand{margin-bottom:16px; display:block}
.legal{
  border-top:1px solid var(--hair); padding-top:26px;
  display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--smoke-2);
}

/* ---------- mobile call bar ----------------------------------------------- */

.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:none; gap:2px; background:var(--hair);
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid var(--hair);
}
.callbar a,
.callbar button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 12px; font-family:var(--display); font-size:17px; letter-spacing:.03em;
  text-transform:uppercase; border:0; cursor:pointer;
}
.callbar .primary{background:var(--paper); color:var(--ink)}
.callbar .secondary{background:var(--ink-2); color:var(--paper); flex:0 0 42%;
  font-family:var(--body); font-size:12.5px; font-weight:600; letter-spacing:.04em;
  white-space:nowrap; padding-inline:8px}
.callbar .ico{width:16px;height:16px;fill:currentColor}

@media (max-width:820px){
  :root{--bar:62px}
  .callbar{display:flex}
}

/* ---------- reveal -------------------------------------------------------- */

@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease}
  .reveal.in{opacity:1; transform:none}
}

/* ==========================================================================
   Additions — 2026-08-30
   ========================================================================== */

/* ---------- rating row (replaces the hero eyebrow) ------------------------ */

.ratings{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 22px; padding:0; max-width:100%;
}
.rating{
  display:inline-flex; align-items:center; gap:7px;
  background:#FFFFFF; color:#0E1014;
  border-radius:3px; padding:8px 13px;
  box-shadow:0 6px 24px -12px rgba(0,0,0,.6);
}
@media (max-width:430px){
  .ratings{gap:7px}
  .rating{padding:7px 11px; gap:6px}
}
.rating-mark{flex:0 0 auto; display:block}
.rating .rating-brand{
  font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:-.005em;
  text-transform:none; color:inherit; line-height:1;
}
.rating b{
  font-family:var(--mono); font-size:13px; font-weight:600; color:inherit;
  font-variant-numeric:tabular-nums; line-height:1;
}

/* ---------- paired CTA: equal width, call + contact ----------------------- */

.cta-pair{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;
  width:100%; max-width:452px;
}
@media (max-width:430px){ .cta-pair{grid-template-columns:1fr; max-width:300px} }

.cta{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:2px; padding:11px 16px 12px; border-radius:2px; text-align:left;
  border:1px solid transparent; transition:transform .15s ease, border-color .15s ease;
}
.cta-primary{background:var(--paper); color:var(--ink)}
.cta-secondary{background:rgba(255,255,255,.04); color:var(--paper); border-color:var(--hair-2)}
.cta-primary:hover{transform:translateY(-2px)}
.cta-secondary:hover{border-color:var(--paper)}
@media (prefers-reduced-motion:reduce){ .cta{transition:none} .cta-primary:hover{transform:none} }
.cta b{
  display:flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:400; font-size:16px;
  letter-spacing:.035em; text-transform:uppercase; line-height:1.1;
}
.cta small{font-size:10.5px; line-height:1.35; opacity:.66; font-weight:500; letter-spacing:.01em}
.cta .ico{width:13px; height:13px; fill:currentColor; flex:0 0 auto}

/* ---------- hamburger nav ------------------------------------------------- */

.nav-toggle{
  display:none; align-items:center; justify-content:center; gap:0;
  width:40px; height:38px; border:1px solid var(--hair-2); border-radius:2px;
  background:transparent; color:var(--paper); cursor:pointer; padding:0; flex:0 0 auto;
}
.nav-toggle i{display:block; width:17px; height:1.5px; background:currentColor; position:relative}
.nav-toggle i::before,.nav-toggle i::after{
  content:""; position:absolute; left:0; width:17px; height:1.5px; background:currentColor;
  transition:transform .22s ease, opacity .18s ease;
}
.nav-toggle i::before{top:-5.5px}
.nav-toggle i::after{top:5.5px}
.nav-toggle[aria-expanded="true"] i{background:transparent}
.nav-toggle[aria-expanded="true"] i::before{transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i::after{transform:translateY(-5.5px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){ .nav-toggle i::before,.nav-toggle i::after{transition:none} }

.nav-panel{
  display:none; border-top:1px solid var(--hair);
  background:rgba(8,9,11,.97);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
}
.nav-panel[data-open="true"]{display:block}
.nav-panel ul{list-style:none; margin:0; padding:6px var(--gut) 14px; display:grid}
.nav-panel a{
  display:block; padding:15px 0; border-bottom:1px solid var(--hair);
  font-family:var(--display); font-size:21px; text-transform:uppercase; letter-spacing:.02em;
}
.nav-panel li:last-child a{border-bottom:0}

@media (max-width:1020px){ .nav-toggle{display:flex} }
@media (min-width:1021px){ .nav-panel{display:none !important} }

/* ---------- occasion cards: title first, copy on reveal ------------------- */

.card img{opacity:.9}
.card::after{
  background:linear-gradient(180deg, rgba(8,9,11,.12) 0%, rgba(8,9,11,.46) 46%, rgba(8,9,11,.88) 88%);
}
.card:hover img{opacity:1}
.card .h3{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:0}
.card .h3 em{font-style:normal; font-size:22px; line-height:1; opacity:.8}
.card p{
  max-height:0; opacity:0; overflow:hidden; margin:0;
  transition:max-height .38s ease, opacity .26s ease, margin .38s ease;
}
.card:hover p,
.card:focus-visible p,
.card.is-peeking p{max-height:160px; opacity:1; margin:12px 0 0}
.card .more{display:none}
@media (prefers-reduced-motion:reduce){ .card p{transition:none} }

/* ---------- reviews: horizontal rail -------------------------------------- */

.rail{
  display:flex; gap:2px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  background:var(--hair); padding:0;
  scrollbar-width:thin; scrollbar-color:var(--hair-2) transparent;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--hair-2)}
.rail::-webkit-scrollbar-track{background:transparent}
.rail .review{
  flex:0 0 clamp(272px, 76vw, 352px); scroll-snap-align:start;
  display:flex; flex-direction:column; gap:0;
}
.review-top{display:flex; align-items:center; gap:13px; margin-bottom:16px}
.review-top img{width:46px; height:46px; border-radius:50%; object-fit:cover; flex:0 0 auto}
.review-who{display:grid; gap:3px; min-width:0}
.review-who b{font-size:14.5px; font-weight:600; line-height:1.2}
.review-verified{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--smoke-2);
}
.review-verified svg{width:11px; height:11px; flex:0 0 auto}
.rail-hint{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--smoke-2); margin:16px 0 0;
}

/* ---------- contact dialog ------------------------------------------------ */

dialog.sheet{
  border:1px solid var(--hair-2); border-radius:3px; padding:0;
  background:var(--ink-2); color:var(--paper);
  width:min(440px, calc(100vw - 32px)); max-height:calc(100vh - 32px);
}
dialog.sheet::backdrop{background:rgba(4,5,6,.78); backdrop-filter:blur(3px)}
.sheet-in{padding:30px 28px 28px}
.sheet h2{
  font-family:var(--display); font-weight:400; font-size:30px; line-height:1.06;
  text-transform:uppercase; margin:0 0 10px;
}
.sheet-note{font-size:14.5px; color:var(--smoke); margin:0 0 22px}
.field{display:grid; gap:6px; margin-bottom:14px}
.field label{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--smoke);
}
.field input{
  background:var(--ink); color:var(--paper); border:1px solid var(--hair-2);
  border-radius:2px; padding:12px 13px; font-family:var(--body); font-size:16px;
}
.field input:focus{outline:2px solid var(--paper); outline-offset:1px; border-color:transparent}
.consent{
  display:flex; gap:10px; align-items:flex-start;
  font-size:12.5px; color:var(--smoke); line-height:1.45; margin:16px 0 20px;
}
.consent input{margin-top:3px; flex:0 0 auto; accent-color:#fff}
.sheet-actions{display:flex; gap:10px; align-items:center}
.sheet-submit{
  flex:1; background:var(--paper); color:var(--ink); border:0; border-radius:2px;
  padding:15px 20px; font-family:var(--display); font-size:18px; letter-spacing:.03em;
  text-transform:uppercase; cursor:pointer;
}
.sheet-close{
  background:transparent; color:var(--smoke); border:1px solid var(--hair-2);
  border-radius:2px; padding:14px 18px; font-family:var(--body); font-size:13px;
  font-weight:600; cursor:pointer;
}
.sheet-close:hover{color:var(--paper); border-color:var(--paper)}
.sheet-done{display:none; text-align:center; padding:8px 0 4px}
.sheet-done b{
  display:block; font-family:var(--display); font-weight:400; font-size:26px;
  text-transform:uppercase; margin-bottom:8px;
}
.sheet-done p{color:var(--smoke); font-size:14.5px}
dialog.sheet[data-state="done"] form{display:none}
dialog.sheet[data-state="done"] .sheet-done{display:block}

/* ---------- mobile call bar: only after scrolling ------------------------- */

.callbar{
  transform:translateY(115%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.callbar.is-in{transform:none}
@media (prefers-reduced-motion:reduce){ .callbar{transition:none} }

/* ---------- hero: less dead space above the headline on small screens ----- */

@media (max-width:820px){
  .hero-in{
    padding-top:clamp(26px,5vh,48px);
    padding-bottom:26px;
    min-height:min(62vh, 540px);
  }
  /* l'hero e' piu' corto: il testo occupa una quota maggiore dell'immagine,
     quindi le fermate scure vanno alzate o il copy finisce sullo skyline chiaro */
  .hero::before{
    background:linear-gradient(180deg, rgba(8,9,11,.30) 0%, rgba(8,9,11,.04) 15%,
      rgba(8,9,11,.32) 36%, rgba(8,9,11,.70) 62%, rgba(8,9,11,.90) 88%, var(--ink) 100%);
  }
  .hero .h1{margin-bottom:16px}
  .hero .lede{margin-bottom:22px; font-size:16px}
  .hero .ratings{margin-bottom:16px}
  .hero-note{margin-top:18px}
}

/* ==========================================================================
   Light sections — 2026-08-30
   Every component reads its colours from tokens, so a section only has to
   swap the token values to flip. Nothing below re-styles a component.
   ========================================================================== */

.section--light{
  --paper:#12141A;
  --ink:#F5F3EE;
  --ink-2:#EDEAE3;
  --ink-3:#E3DFD6;
  --smoke:rgba(18,20,26,.70);
  --smoke-2:rgba(18,20,26,.52);
  --hair:rgba(18,20,26,.15);
  --hair-2:rgba(18,20,26,.34);
  background:var(--ink);
  color:var(--paper);
}
.section--light + .section--hair{border-top:0}

/* ---------- CTA pair: tighter still --------------------------------------- */

.cta-pair{max-width:414px; gap:9px}
.cta-block{margin-top:26px}
.cta-aside{margin:14px 0 0; font-size:14px}
.cta-aside a{color:var(--smoke); border-bottom:1px solid var(--hair-2); padding-bottom:2px}
.cta-aside a:hover{color:var(--paper)}
.band .cta-pair{margin-inline:auto}
.cta{padding:9px 14px 10px}
.cta b{font-size:15px; letter-spacing:.04em}
.cta small{font-size:10px; opacity:.62}
.cta .ico{width:12px; height:12px}
@media (max-width:430px){ .cta-pair{max-width:284px} }