:root{
  --paper:#F3F3EF; --paper-2:#F8F8F5; --paper-3:#FCFCFA;
  --ink:#1C1917; --ink-soft:#4A443E; --ink-mute:#8D877F;
  --line:#DBDAD3; --accent:#D33A3A; --accent-deep:#BB2E2E;
  --serif:'Cormorant Garamond',Georgia,serif;
  --body:Georgia,'Times New Roman',serif;
  --ui:'Inter','Helvetica Neue',Arial,sans-serif;
  --maxw:1440px;
  --pad:clamp(20px,5vw,64px);
  --sec:clamp(88px,12vh,180px);
  --hdr-h:clamp(60px,8vh,76px);
}
*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;margin:0;text-wrap:pretty;}
p,li,dt,dd,blockquote,figcaption,.quip,.sub{text-wrap:pretty;}
em{font-style:italic;color:var(--accent);}
a{color:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.eyebrow{font-family:var(--ui);font-size:clamp(.68rem,.9vw,.8rem);text-transform:uppercase;letter-spacing:.26em;color:var(--accent);}
.slash{color:var(--accent);font-style:normal;font-family:var(--body);}
.quip{font-style:italic;font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5;color:var(--ink);}
.btn{display:inline-block;font-family:var(--ui);font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;
  padding:1.05em 2.4em;text-decoration:none;cursor:pointer;border:1px solid var(--ink);transition:background-color .18s,color .18s,border-color .18s;}
.btn--red{background:var(--accent);border-color:var(--accent);color:var(--paper);}
.btn--red:hover{background:var(--accent-deep);border-color:var(--accent-deep);}
.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn--ink:hover{background:#000;}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--paper);}
.btn--ghost-red{background:transparent;border-color:var(--accent);color:var(--accent);}
.btn--ghost-red:hover{background:var(--accent);border-color:var(--accent);color:var(--paper);}

/* ---------- TOP BAR ---------- */
#top{position:fixed;top:0;left:0;right:0;z-index:60;font-family:var(--ui);
  background:rgba(243,243,239,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;}
#top.scrolled{background:rgba(243,243,239,.94);border-bottom-color:var(--line);box-shadow:0 8px 24px rgba(28,25,23,.06);}
#top .inner{position:relative;display:flex;align-items:center;justify-content:space-between;height:clamp(60px,8vh,76px);padding:0 var(--pad);}
.logo{pointer-events:auto;text-decoration:none;display:inline-flex;align-items:center;}
.logo .mark{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,2vw,1.7rem);color:var(--ink);letter-spacing:-.01em;line-height:1;}
.logo .mark b{color:var(--accent);font-weight:600;}
.logo-tag{font-family:var(--ui);font-size:.55rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-mute);margin-left:.9rem;padding-left:.9rem;line-height:1;transform:translateY(5px);position:relative;}
.logo-tag::before{content:'';position:absolute;left:0;top:0;bottom:0;border-left:1px solid var(--line);transform:translateY(-1px);}
nav.menu{pointer-events:auto;display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.4rem);}
nav.menu a{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;text-decoration:none;color:var(--ink);transition:color .15s;}
nav.menu a:hover{color:var(--accent);}
.menu .navcta{color:var(--paper);background:var(--ink);border:1px solid var(--ink);padding:.72em 1.5em;}
.menu .navcta:hover{background:#000;color:var(--paper);}
#burger{pointer-events:auto;display:none;width:46px;height:46px;background:var(--paper);border:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;}
#burger span{width:20px;height:2px;background:var(--ink);display:block;}
@media(max-width:860px){nav.menu{display:none;}#burger{display:flex;}}
#mobmenu{position:fixed;top:70px;right:var(--pad);z-index:60;background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 32px rgba(28,25,23,.18);min-width:200px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.2,1),visibility 0s linear .2s;}
#mobmenu.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.2,1);}
#mobmenu a{display:block;padding:14px 22px;font-family:var(--ui);font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;text-decoration:none;color:var(--ink);}
#mobmenu a:hover{background:var(--paper-2);color:var(--accent);}

/* ---------- HERO SCROLL SCRUB ---------- */
#hero{position:relative;height:320vh;height:320svh;}            /* tall scroll track */
#hero .sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper);}
/* On short landscape (url bar is a disproportionate chunk of svh) use dvh
   instead so the hero fills the actual visible area dynamically. */
@media(orientation:landscape) and (max-height:600px){
  #hero{height:320dvh;}
  #hero .sticky{height:100dvh;}
}
#hero video,#hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;}
#hero .poster{display:none;}
#hero .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg, var(--paper) 0%, rgba(243,243,239,.86) 26%, rgba(243,243,239,.35) 46%, rgba(243,243,239,0) 62%);}
/* When the viewport is wider than 16:9, the video (which IS 16:9) scales to
   fill the width and gets cropped top+bottom. At 50% vertical the crop is
   symmetric, cutting off the chair/feet at the bottom. Bias upward (70%+)
   so the bottom stays in frame on ultrawide/short landscape viewports. */
@media(min-aspect-ratio:16/9){
  #hero video,#hero .poster{object-position:70% 70%;}
}
.hero-text{position:absolute;top:0;left:0;height:100%;width:min(660px,88vw);
  display:flex;flex-direction:column;justify-content:center;padding:0 0 0 clamp(40px,8vw,120px);will-change:opacity,transform;}
.hero-text .eyebrow{margin-bottom:1.2rem;}
.hero-text h1{font-size:clamp(2.6rem,6.5vw,5.6rem);line-height:1.05;margin-bottom:1.4rem;}
/* 1450 and smaller: shrink the hero headline. Narrower breakpoints below this
   override it in turn (source order = ascending specificity by width). */
@media(max-width:1450px){.hero-text h1{font-size:4rem;}}
.hero-text p{font-family:var(--body);color:var(--ink-soft);font-size:clamp(1.05rem,1.6vw,1.34rem);line-height:1.6;max-width:40ch;margin:0;}
.hero-text .cta{margin-top:2rem;}
.hero-text .btn{padding:1.3em 3.2em;font-size:.8rem;letter-spacing:.22em;}
#hero1{opacity:1;}
#hero2{opacity:0;}
.hero-hint{position:absolute;bottom:clamp(20px,4vh,34px);left:50%;transform:translateX(-50%);
  font-family:var(--ui);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute);z-index:5;}
.hero-hint::after{content:"";display:block;width:1px;height:26px;margin:8px auto 0;background:var(--ink-mute);opacity:.5;animation:hintpulse 1.8s ease-in-out infinite;}
@keyframes hintpulse{0%,100%{opacity:.2;transform:scaleY(.7)}50%{opacity:.7;transform:scaleY(1)}}

/* ---------- TICKER ---------- */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;border-top:1px solid var(--ink);}
.ticker .track{display:flex;white-space:nowrap;font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,2rem);
  padding:.7em 0;will-change:transform;}
.ticker .track span{padding:0 2.9rem;flex-shrink:0;}

/* ---------- SECTION SHELL ---------- */
section.block{padding:var(--sec) 0;}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1;transform:none;}
.sectitle{font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.06;text-wrap:pretty;margin-bottom:clamp(2rem,5vh,3.5rem);}

/* ---------- RESULTS / WINS ---------- */
.win{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(2rem,5vh,4rem) 0;border-top:1px solid var(--line);}
.win:nth-child(even) .win-media{order:2;}
.win .stat{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,6vw,4.6rem);line-height:.95;letter-spacing:-.02em;margin-bottom:1rem;}
.win .stat .arrow{color:var(--accent);padding:0 .12em;}
.win h3{font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.14;margin-bottom:1rem;}
.win p{font-family:var(--body);color:var(--ink-soft);font-size:clamp(1rem,1.45vw,1.2rem);line-height:1.6;max-width:44ch;margin:0;}
.win-media{position:relative;background:var(--paper-2);border:1px solid var(--line);overflow:hidden;padding:clamp(7px,.85vw,12px);box-shadow:0 1px 3px rgba(28,25,23,.05);}
.win-media img,.cred-media img{box-shadow:0 0 0 1px rgba(28,25,23,.07);}
details.more{margin-top:1.3rem;border-top:1px solid var(--line);padding-top:1rem;}
details.more summary{font-family:var(--ui);font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);cursor:pointer;list-style:none;}
details.more summary::-webkit-details-marker{display:none;}
details.more summary::before{content:"+ ";}
details.more[open] summary::before{content:"− ";}
details.more p{margin-top:.9rem;}

/* ---------- CREDIBILITY ---------- */
.cred{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;}
.cred h2{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.14;}
.cred .brands{margin-top:1.6rem;font-family:var(--ui);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);}
.cred-media{position:relative;background:var(--paper-2);border:1px solid var(--line);overflow:hidden;padding:clamp(7px,.85vw,12px);box-shadow:0 1px 3px rgba(28,25,23,.05);}

/* ---------- ROME ---------- */
.rome{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden;}
.rome::before{content:'';position:absolute;inset:0;background:url('../assets/images/rome-bg.png') center center/cover no-repeat;opacity:.07;pointer-events:none;z-index:0;}
.rome .wrap{position:relative;z-index:1;}
.rome-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,7rem);margin-bottom:clamp(3rem,6vh,5rem);}
.rome h2{font-size:clamp(1.9rem,4vw,3.2rem);margin:0;}
.rome p{font-family:var(--body);color:var(--ink-soft);font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.62;max-width:52ch;margin:0;}
.rome .term{color:var(--accent);font-weight:700;font-style:normal;}
.rome-rule{display:flex;align-items:center;gap:1.2rem;margin:0 0 clamp(3rem,6vh,5rem);}
.rome-rule::before,.rome-rule::after{content:'';flex:1;height:1px;background:linear-gradient(to center,var(--line),transparent);}
.rome-rule::before{background:linear-gradient(to right,transparent,var(--line));}
.rome-rule::after{background:linear-gradient(to left,transparent,var(--line));}
.rome-rule .orn{color:var(--line);font-size:.55rem;letter-spacing:.1em;line-height:1;display:flex;align-items:center;gap:.45rem;flex-shrink:0;}
.rome-rule .orn::before,.rome-rule .orn::after{content:'';display:block;width:4px;height:4px;border-right:1px solid var(--ink-mute);border-bottom:1px solid var(--ink-mute);transform:rotate(45deg);opacity:.55;}
.rome-rule .orn span{display:block;width:5px;height:5px;border-right:1px solid var(--ink-mute);border-bottom:1px solid var(--ink-mute);transform:rotate(45deg) translateY(-1px);opacity:.7;}
.formula{display:flex;align-items:center;gap:1.6rem;font-family:var(--serif);}
.formula .eq-label{color:var(--accent);font-size:clamp(1.6rem,3.2vw,2.8rem);font-weight:600;white-space:nowrap;}
.formula .eq-sign{color:var(--ink-mute);font-size:clamp(1.8rem,3.4vw,3rem);font-weight:300;line-height:1;}
.formula .frac{display:inline-flex;flex-direction:column;align-items:center;flex:1;}
.formula .frac .num{color:var(--ink);padding:.1em .5em .3em;font-size:clamp(1.4rem,2.8vw,2.4rem);line-height:1.2;}
.formula .frac .bar{width:100%;height:2px;background:var(--ink);opacity:.45;}
.formula .frac .den{display:flex;align-items:baseline;white-space:nowrap;gap:.4em;padding:.3em .5em .05em;font-size:clamp(1rem,2vw,1.7rem);line-height:1.5;color:var(--ink);}
.formula .frac .den .tok-var{color:var(--accent);}
.formula .frac .den .tok-plus{color:var(--ink);font-weight:500;}
@media(max-width:860px){.rome-top{grid-template-columns:1fr;}
  .rome h2{text-align:center;}
  /* Kill the faint temple bg image on mobile — too busy behind the formula. */
  .rome::before{display:none;}
  /* Stack the formula: big centered "ROME™" label on top, the "=" dropped
     (redundant once stacked), then breathing room before the fraction. */
  .formula{flex-direction:column;align-items:center;gap:1.6rem;}
  .formula .eq-sign{display:none;}
  .formula .eq-label{font-size:clamp(2.2rem,9vw,3rem);}
  .formula .frac{width:100%;}
  .formula .frac .den{white-space:normal;flex-wrap:wrap;justify-content:center;}}

/* ---------- THEATER ---------- */
.theater{text-align:center;position:relative;}
.theater h2{font-size:clamp(2.2rem,5.6vw,4.8rem);line-height:1.06;text-wrap:pretty;margin:0 auto 1.6rem;}
.theater p{font-family:var(--body);color:var(--ink-soft);font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.62;max-width:52ch;margin:0 auto;}
.theater .curtain{position:absolute;inset:0;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 26px);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 40%);mask-image:linear-gradient(to bottom,#000,transparent 40%);}

/* ---------- STRONG LINE ---------- */
.strong{text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);}
.strong h2{font-size:clamp(2rem,5vw,4.2rem);line-height:1.08;text-wrap:pretty;margin:0 auto 1.6rem;}
.strong .cta{margin-top:.4rem;}

/* ---------- VSL ---------- */
.vsl{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.vsl .label{margin-bottom:1rem;}
.vsl h2{font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.14;}
.vsl-media{position:relative;background:var(--paper-2);border:1px solid var(--line);padding:clamp(7px,.85vw,12px);box-shadow:0 1px 3px rgba(28,25,23,.05);}
.vsl-inner{position:relative;aspect-ratio:1376/768;overflow:hidden;box-shadow:0 0 0 1px rgba(28,25,23,.07);}
/* video shows through the transparent screen window punched out of vsl-frame.png (measured green-screen rect on the 1376x768 image) */
.vsl-video{position:absolute;left:14.971%;top:22.656%;width:53.488%;height:55.469%;
  overflow:hidden;background:#000;}
.vsl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.vsl-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:2;}

/* ---------- FAQ ---------- */
.faq h2{font-size:clamp(1.8rem,3.6vw,3rem);margin-bottom:clamp(1.6rem,4vh,2.6rem);}
.faq details{border-top:1px solid var(--line);}
.faq details:last-child{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:1.4rem 3rem 1.4rem 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.7rem);color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%) rotate(0deg);color:var(--accent);font-family:var(--ui);font-size:1.4rem;transition:transform .3s cubic-bezier(.4,0,.2,1);}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq details{overflow:hidden;}
.faq details p{font-family:var(--body);color:var(--ink-soft);font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.64;max-width:64ch;margin:0 0 1.5rem;}

/* ---------- FINAL CTA ---------- */
.final{text-align:center;background:var(--ink);color:var(--paper);}
.final .ticker2{color:var(--paper);opacity:.5;font-family:var(--ui);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:2rem;}
.final .ticker2 .dot{color:var(--accent);}
.final h2{color:var(--paper);font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.2;text-wrap:pretty;margin:0 auto 2.4rem;}
.final .btn--red{color:var(--paper);}
.final .btn,.strong .btn{font-size:.82rem;padding:1.25em 2.9em;}

/* ---------- MID SECTION MODIFIER (VSL — between light and dark) ---------- */
.block--mid{background:#3a3835;color:var(--paper);}
.block--mid h1,.block--mid h2,.block--mid h3,.block--mid p{color:var(--paper);}
.block--mid .label{color:rgba(243,243,239,.5);}
.block--mid .eyebrow{color:var(--accent);}
.block--mid .vsl-media{background:#2e2c2a;border-color:#4a4845;}

/* ---------- DARK SECTION MODIFIER (reusable) ---------- */
/* Add class "block--dark" to any <section class="block ..."> to invert it. */
.block--dark{background:var(--ink);color:var(--paper);border-color:#2c2825;}
.block--dark h1,.block--dark h2,.block--dark h3,.block--dark p{color:var(--paper);}
.block--dark .brands,.block--dark .label{color:rgba(243,243,239,.55);}
.block--dark .win p,.block--dark p{color:rgba(243,243,239,.78);}
.block--dark .line{border-color:#2c2825;}
/* em stays --accent red (reads well on dark); media mats invert to stay off-white-on-dark */
.block--dark .cred-media,.block--dark .win-media,.block--dark .vsl-media{background:#232019;border-color:#2c2825;}

/* ---------- FOOTER ---------- */
footer{background:var(--paper);border-top:1px solid var(--line);padding:2.4rem 0;}
footer .inner{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-family:var(--ui);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);}
footer a{color:var(--ink);text-decoration:none;}
footer a:hover{color:var(--accent);}

/* ---------- BOOKING MODAL ---------- */
#modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(28,25,23,.55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;}
#modal.open{opacity:1;visibility:visible;}
#modal.open .modal-card{transform:translateY(0);}
.modal-card{background:var(--paper);border:1px solid var(--line);max-width:520px;width:100%;max-height:92vh;overflow-y:auto;
  padding:clamp(1.8rem,4vw,2.8rem);box-shadow:0 30px 80px rgba(28,25,23,.3);position:relative;
  transform:translateY(10px);transition:transform .25s ease;}
.modal-card h3{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.4rem;}
.modal-card .sub{font-family:var(--body);color:var(--ink-soft);font-size:1rem;margin-bottom:1.6rem;}
.field{margin-bottom:1rem;}
.field label{display:block;font-family:var(--ui);font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-mute);margin-bottom:.4rem;}
.field label .req{color:var(--accent);}
.field input,.field textarea{width:100%;font-family:var(--body);font-size:1rem;padding:.7em .8em;background:var(--paper-3);
  border:1px solid var(--line);color:var(--ink);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.field .hint{font-family:var(--body);font-style:italic;font-size:.86rem;color:var(--ink-mute);margin-top:.4rem;}
.modal-card .close{position:absolute;top:1rem;right:1.2rem;font-family:var(--ui);font-size:1.2rem;line-height:1;color:var(--ink-mute);cursor:pointer;border:0;background:none;padding:.2rem .4rem;}
#schedStep,#confirmStep{display:none;}

/* Scheduling: mini calendar + day's times */
.modal-card.wide{max-width:680px;}
.sched-wrap{display:grid;grid-template-columns:266px 1fr;gap:1.8rem;margin-top:.4rem;}
@media(max-width:600px){.modal-card.wide{max-width:520px;}.sched-wrap{grid-template-columns:1fr;gap:1.2rem;}}

.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem;}
.cal-title{font-family:var(--serif);font-size:1.3rem;color:var(--ink);letter-spacing:-.01em;}
.cal-nav{font-family:var(--ui);font-size:1.15rem;line-height:1;width:32px;height:32px;border:1px solid var(--line);background:var(--paper-3);color:var(--ink-soft);cursor:pointer;border-radius:50%;transition:border-color .15s,color .15s;}
.cal-nav:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.cal-nav:disabled{opacity:.28;cursor:default;}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;margin-bottom:.4rem;}
.cal-dow span{font-family:var(--ui);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);text-align:center;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.28rem;}
.cal-cell{font-family:var(--ui);font-size:.82rem;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1px solid transparent;background:none;color:var(--ink-mute);border-radius:50%;padding:0;}
.cal-cell.empty{visibility:hidden;}
.cal-cell.avail{color:var(--ink);background:var(--paper-3);border-color:var(--line);cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.cal-cell.avail:hover{border-color:var(--accent);color:var(--accent);}
.cal-cell.sel{background:var(--accent);color:var(--paper);border-color:var(--accent);}

.times-day{font-family:var(--serif);font-size:1.2rem;color:var(--ink);margin-bottom:.9rem;letter-spacing:-.01em;}
.times-body{max-height:320px;overflow-y:auto;padding-right:.3rem;}
.time-group{margin-bottom:1.1rem;}
.time-group:last-child{margin-bottom:0;}
.time-group-label{font-family:var(--ui);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.55rem;}
.time-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem;}
.slot{font-family:var(--ui);font-size:.8rem;padding:.7em;border:1px solid var(--line);background:var(--paper-3);text-align:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.slot:hover{border-color:var(--accent);color:var(--accent);}
.slot[aria-pressed="true"]{background:var(--accent);color:var(--paper);border-color:var(--accent);}
.slot[disabled]{opacity:.5;pointer-events:none;}
.sched-status{font-family:var(--body);font-style:italic;font-size:.82rem;color:var(--ink-mute);margin-top:1rem;}

/* Confirm bar: deliberate booking, not click-to-book */
.sched-tz{font-family:var(--ui);font-size:.78rem;color:var(--ink-mute);margin:-.6rem 0 1.1rem;}
.sched-foot{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);}
.sched-pick{font-family:var(--ui);font-size:.9rem;color:var(--ink-soft);line-height:1.2;}
.sched-pick.set{color:var(--ink);}
.sched-pick .pick-time{font-family:var(--serif);font-size:1.45rem;line-height:1.05;color:var(--ink);letter-spacing:-.01em;display:block;}
.sched-pick .pick-tz{font-family:var(--ui);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);margin-top:.3rem;display:block;}
.sched-foot .btn{white-space:nowrap;flex:0 0 auto;}
.sched-foot .btn[disabled]{opacity:.35;pointer-events:none;}
@media(max-width:600px){.sched-foot{flex-direction:column;align-items:stretch;gap:.9rem;}.sched-foot .btn{width:100%;}}

/* Booked confirmation */
.booked{text-align:center;padding:1rem 0 .4rem;}
.booked-mark{color:var(--accent);display:inline-flex;margin-bottom:1.2rem;}
.booked-mark circle{stroke-dasharray:158;stroke-dashoffset:158;animation:booked-ring .5s ease forwards;}
.booked-mark path{stroke-dasharray:40;stroke-dashoffset:40;animation:booked-check .35s ease .4s forwards;}
@keyframes booked-ring{to{stroke-dashoffset:0;}}
@keyframes booked-check{to{stroke-dashoffset:0;}}
.booked h3{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:1.2rem;}
.booked-when{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.7rem);color:var(--ink);background:var(--paper-3);border:1px solid var(--line);padding:.7em 1em;display:inline-block;margin-bottom:1rem;letter-spacing:-.01em;}
.booked-note{font-family:var(--body);color:var(--ink-soft);font-size:.98rem;margin-bottom:1.4rem;}
.booked-next{list-style:none;margin:0 auto;padding:0;max-width:34ch;text-align:left;}
.booked-next li{font-family:var(--body);font-size:.9rem;color:var(--ink-soft);padding-left:1.3rem;position:relative;margin-bottom:.55rem;}
.booked-next li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;background:var(--accent);border-radius:50%;}

@media(max-width:860px){
  /* Section rhythm is too airy on a phone — trim the vertical padding so
     sections don't leave ~100px dead space above titles / between blocks. */
  :root{--sec:clamp(60px,9vh,110px);}
  .win,.cred,.vsl{grid-template-columns:1fr;}
  /* Last win's own bottom padding stacks on the section padding — drop it so
     the gap before the next section isn't doubled up. */
  .win:last-child{padding-bottom:0;}
  .win:nth-child(even) .win-media{order:0;}
  .hero-text{width:min(560px,92vw);}
  #hero{height:280vh;}
}
/* ---------- MOBILE PORTRAIT HERO (vertical 9:16 video) ---------- */
@media(max-width:860px) and (orientation:portrait){
  /* Never crop or gap the 9:16 video left/right on mobile — width is sacred.
     Span the full width and let height follow the video's ratio, pinned to the
     BOTTOM. Viewport taller than 9:16 => gap at the TOP (hidden by the solid
     #F2F2EE bg). Viewport wider than 9:16 => the TOP is cropped, which is safe
     because the subject (IDIO) sits at the bottom of the frame. */
  #hero .sticky{background:#F2F2EE;}
  #hero video,#hero .poster{inset:auto 0 0 0;width:100%;height:auto;}
  /* Scrim flips: solid paper at the TOP (where the text lives) fading downward
     into the clear subject band, instead of the desktop left-to-right scrim. */
  #hero .scrim{
    background:linear-gradient(180deg, var(--paper) 0%, rgba(243,243,239,.9) 30%, rgba(243,243,239,.4) 46%, rgba(243,243,239,0) 58%);}
  /* Text moves to the top band, full width, top-aligned. */
  .hero-text{width:100%;justify-content:flex-start;
    padding:clamp(88px,15vh,150px) var(--pad) 0;}
  .hero-text h1{font-size:clamp(2.3rem,8.5vw,3.4rem);}
  .hero-text p{font-size:clamp(1.05rem,4.4vw,1.28rem);max-width:32ch;}
  .hero-hint{display:none;}
}
/* ---------- TABLET PORTRAIT HERO (band around the tested 601x838) ---------- */
/* Band derived explicitly, not guessed:
     - width floor 540px: NOT symmetric around 601 — the largest common
       phones (iPhone Pro Max etc.) cap out around 430-480px CSS width, so
       540 gives real clearance above every phone while still leaving 61px
       of margin below the tested 601 (not sitting exactly on it). Ceiling
       721px = 601+120 (symmetric on the high side, since there's no phone
       to avoid up there).
     - height center = midpoint of the tested device's svh (838, chrome
       expanded/worst-case) and lvh (934, chrome collapsed) = 886, ±120 →
       766-1006. Using the midpoint instead of either single reading avoids
       picking a side arbitrarily, since address-bar reveal shifts which
       one is "the" height in practice.
   Real margin on every edge (not a boundary sitting exactly on the tested
   value): a boundary sitting exactly ON a tested value is fragile — real
   devices can measure a few px off from what's shown on screen (subpixel/
   zoom/DPR rounding), so an exact edge can silently fail to match the very
   size it was built for (confirmed: this happened with a min-width:601px
   edge on the actual test device). No orientation condition: the width/
   height bounds themselves already guarantee a portrait-shaped viewport
   (height > width throughout this band), so adding orientation was
   redundant and just another way for the rule to silently fail to match.
   Nothing outside this box is touched: phones (<540px wide) and shorter/
   taller views keep the untouched padding above; wider views (desktop,
   larger tablets) never match.
   Floored against the fixed header's height + a small gap so the heading
   can never slide under/behind the header even at the low end of this
   height band. */
@media(min-width:540px) and (max-width:721px) and (min-height:766px) and (max-height:1006px){
  .hero-text{padding:max(calc(var(--hdr-h) + 16px), clamp(26px,4.8vh,52px)) var(--pad) 0;}
}
/* ---------- LANDSCAPE TABLET HERO (text sizing) ---------- */
/* Landscape tablets (both short and medium-height) need a desktop-like layout
   but with the text column at ~1/3 of screen width — not the ~2/3 that desktop
   rules produce at these widths. Covers the tested devices:
     - 1006×433-529 (short landscape tablet)
     - 1024×653-728 (larger landscape tablet)
   orientation:landscape used correctly here (genuinely targeting landscape,
   not as a proxy for size). max-height:850px stays below desktop monitors
   (typically 900px+). Floor 768px safely above phone-landscape widths. */
@media(orientation:landscape) and (min-width:768px) and (max-width:1300px) and (max-height:850px){
  .hero-text{width:min(420px,40vw);}
  .hero-text h1{font-size:clamp(2.1rem,3.9vw,2.9rem);margin-bottom:.9rem;}
  .hero-text p{font-size:clamp(1.15rem,1.5vw,1.3rem);}
  .hero-text .cta{margin-top:1.2rem;}
}
/* Just above the square band the wide 16:9 clip cover-crops so tightly that the
   subject creeps left into the headline. Buy back width for the desktop clip
   (raising the square band's ceiling) by: shrinking the headline, pushing the
   crop hard right so the subject stays parked, and lifting the text into the
   top paper zone so it clears the monitors. Scales back to defaults by ~7:5. */
@media(min-aspect-ratio:5/4) and (max-aspect-ratio:7/5){
  #hero video{object-position:100% 50%;}
  .hero-text{justify-content:flex-start;padding-top:clamp(90px,15vh,150px);
    width:min(780px,92vw);padding-left:clamp(40px,7vw,120px);}
  .hero-text h1{font-size:clamp(2.6rem,4.6vw,3.4rem);}
}
/* ---------- SQUARE HERO (in-between near-square aspect ratios) ---------- */
/* Placed AFTER the mobile block so it wins the cascade inside its band (a
   portrait viewport between 5:6 and 1:1 matches both rules; square must win to
   match the square clip the JS loads). Narrow band where neither the wide
   desktop crop nor the tall mobile crop reads well. The 1:1 clip's scene is
   weighted bottom-right with solid #F2F2EE paper across the top-left, so anchor
   it bottom-right (any crop eats paper, never the subject) and lay a top-left
   paper gradient for text readability over the busier final frame. */
@media(min-aspect-ratio:5/6) and (max-aspect-ratio:5/4){
  #hero .sticky{background:#F2F2EE;}
  #hero video,#hero .poster{inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 100%;}
  #hero .scrim{
    background:linear-gradient(125deg, var(--paper) 0%, rgba(243,243,239,.92) 20%, rgba(243,243,239,.5) 40%, rgba(243,243,239,0) 60%);}
  /* Lift the text into the top paper zone — at the taller end of the square
     band, vertically-centered text lands on the busy scene; keep it up high.
     The scene sits at the BOTTOM here, so the top text band has the full width
     free: widen the column and trim the left pad so the headline holds 2 lines
     instead of wrapping to 3. */
  .hero-text{justify-content:flex-start;padding-top:clamp(80px,12vh,150px);
    width:min(760px,94vw);padding-left:clamp(32px,6vw,80px);}
  .hero-text h1{font-size:clamp(2.4rem,5.6vw,3.4rem);}
}
@media(prefers-reduced-motion:reduce){
  #hero{height:auto;}
  #hero .sticky{position:relative;height:auto;min-height:100vh;min-height:100svh;}
  #hero video{display:none;}
  #hero .poster{display:block;position:relative;height:56vh;}
  .hero-text{position:relative;width:100%;height:auto;padding:2rem var(--pad);}
  #hero2{opacity:1;}
  .reveal{opacity:1;transform:none;transition:none;}
  .faq summary::after{transition:none;}
}