/* ============================================================
   MIAMI GTA6 TOURS — "Maison" system
   Luxury tour-house identity: bone ground, palm-green ink,
   brass accents. Cormorant Garamond display / Archivo text.
   ============================================================ */

:root{
  --bone:#F6F3EC;
  --linen:#EDE7DA;
  --palm:#0C211C;
  --palm-2:#122E27;
  --ink:#20302B;
  --mut:#6C7A73;
  --brass:#A8814C;
  --brass-2:#C9A063;
  --lagoon:#187264;
  --hair:rgba(32,48,43,.16);
  --hair-inv:rgba(246,243,236,.18);
  --max:1240px;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:16.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--lagoon);text-decoration:none}
::selection{background:var(--brass);color:#fff}

.shell{max-width:var(--max);margin:0 auto;padding:0 clamp(22px,4vw,56px)}

/* ---------- type ---------- */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;line-height:1.08;color:inherit}
h1{font-size:clamp(2.9rem,7.2vw,6.2rem);letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(2.1rem,4.6vw,3.8rem);letter-spacing:-.005em;text-wrap:balance}
h3{font-size:clamp(1.5rem,2.4vw,2rem)}
em,.it{font-style:italic}
h1 em,h2 em{color:var(--brass-2)}
p{margin-bottom:1.2em}

.kicker{
  font-family:var(--sans);font-size:.68rem;font-weight:500;
  letter-spacing:.42em;text-transform:uppercase;color:var(--brass);
  display:flex;align-items:center;gap:18px;margin-bottom:26px;
}
.kicker::before{content:"";width:44px;height:1px;background:var(--brass);flex:none}
.kicker.center{justify-content:center}
.kicker.center::after{content:"";width:44px;height:1px;background:var(--brass);flex:none}
.on-dark .kicker{color:var(--brass-2)}
.on-dark .kicker::before,.on-dark .kicker::after{background:var(--brass-2)}

.measure{max-width:62ch}
.lead{font-size:clamp(1.06rem,1.5vw,1.28rem);font-weight:300;color:var(--mut);line-height:1.85}
.on-dark .lead{color:#B9C6BE}

/* ---------- header ---------- */
.masthead{
  position:fixed;inset:0 0 auto 0;z-index:90;
  padding:0 clamp(22px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:86px;transition:background .4s ease,height .4s ease,box-shadow .4s ease;
}
.masthead.scrolled{background:rgba(246,243,236,.94);backdrop-filter:blur(14px);height:66px;box-shadow:0 1px 0 var(--hair)}
.wordmark{font-family:var(--serif);font-size:1.5rem;letter-spacing:.14em;color:#fff;white-space:nowrap;transition:color .4s}
.wordmark b{font-weight:500;color:var(--brass-2)}
.masthead.scrolled .wordmark{color:var(--ink)}
.masthead nav{display:flex;align-items:center;gap:clamp(18px,3vw,40px)}
.masthead nav a{
  font-size:.7rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.85);transition:color .3s;
}
.masthead.scrolled nav a{color:var(--ink)}
.masthead nav a:hover{color:var(--brass-2)}
.reserve-link{border-bottom:1px solid var(--brass-2);padding-bottom:4px;color:var(--brass-2)!important}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);
  font-size:.72rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  padding:19px 42px;border:1px solid transparent;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s;
}
.btn-brass{background:var(--brass);color:#fff}
.btn-brass:hover{background:var(--brass-2)}
.btn-line{border-color:rgba(255,255,255,.5);color:#fff}
.btn-line:hover{border-color:var(--brass-2);color:var(--brass-2)}
.btn-line-dark{border-color:var(--ink);color:var(--ink)}
.btn-line-dark:hover{border-color:var(--brass);color:var(--brass)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:#fff;isolation:isolate;
}
.hero-img{position:absolute;inset:0;z-index:-2}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(12,33,28,.42) 0%,rgba(12,33,28,.10) 34%,rgba(12,33,28,.20) 58%,rgba(12,33,28,.88) 100%);
}
.hero-inner{width:100%;padding-bottom:clamp(56px,9vh,120px)}
.hero .kicker{color:#E8CD9A;text-shadow:0 1px 18px rgba(12,33,28,.65)}
.hero .kicker::before{background:var(--brass-2)}
.hero h1{max-width:13ch;margin-bottom:26px;text-shadow:0 2px 40px rgba(12,33,28,.4)}
.hero .lead{color:rgba(246,243,236,.86);max-width:52ch;margin-bottom:40px}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap}

/* staged load-in */
.rise{opacity:0;transform:translateY(26px);animation:rise 1.1s cubic-bezier(.19,.7,.22,1) forwards}
.rise.d1{animation-delay:.15s}.rise.d2{animation-delay:.32s}
.rise.d3{animation-delay:.5s}.rise.d4{animation-delay:.68s}
@keyframes rise{to{opacity:1;transform:none}}

/* countdown strip */
.strip{
  background:var(--palm);color:var(--bone);
  display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,52px);
  padding:20px clamp(22px,4vw,56px);flex-wrap:wrap;
}
.strip .lbl{font-size:.66rem;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--brass-2)}
.strip .num{font-family:var(--serif);font-size:1.7rem;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.strip .num small{font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:#8FA098;margin-left:8px}
.strip .div{width:1px;height:30px;background:var(--hair-inv)}

/* ---------- sections ---------- */
.sect{padding:clamp(84px,11vw,150px) 0}
.sect-tight{padding:clamp(64px,8vw,110px) 0}
.on-dark{background:var(--palm);color:var(--bone)}
.on-linen{background:var(--linen)}

/* editorial intro */
.intro{text-align:center}
.intro h2{max-width:24ch;margin:0 auto 30px}
.intro .lead{margin:0 auto;max-width:58ch}
.intro .glyph{font-family:var(--serif);font-style:italic;color:var(--brass);font-size:1.9rem;margin-top:44px}

/* ---------- route (numbered itinerary) ---------- */
.route-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(50px,7vw,90px)}
.stop{
  display:grid;grid-template-columns:110px 1fr minmax(280px,420px);
  gap:clamp(26px,4vw,64px);align-items:center;
  padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--hair);
}
.stop:last-child{border-bottom:1px solid var(--hair)}
.stop-n{
  font-family:var(--serif);font-style:italic;font-size:clamp(2.4rem,4vw,3.6rem);
  color:var(--brass);line-height:1;
}
.stop h3{margin-bottom:10px}
.stop .where{font-size:.66rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--lagoon);margin-bottom:16px;display:block}
.stop p{color:var(--mut);font-size:.99rem;margin:0;max-width:52ch}
.stop-img{overflow:hidden;aspect-ratio:4/3}
.stop-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,.7,.2,1)}
.stop:hover .stop-img img{transform:scale(1.045)}
@media(max-width:900px){
  .stop{grid-template-columns:1fr}
  .stop-n{font-size:2rem}
}

/* ---------- full-bleed quote band ---------- */
.band{position:relative;min-height:74vh;display:flex;align-items:center;color:#fff;isolation:isolate}
.band-img{position:absolute;inset:0;z-index:-2}
.band-img img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(12,33,28,.5)}
.band blockquote{max-width:23ch;font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.25;text-wrap:balance}
.band cite{display:block;font-family:var(--sans);font-style:normal;font-size:.68rem;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--brass-2);margin-top:34px}

/* ---------- experiences ---------- */
.exps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(46px,6vw,80px)}
.exp{background:var(--bone);display:flex;flex-direction:column;border:1px solid var(--hair)}
.on-linen .exp{background:#FBF9F4}
.exp-img{overflow:hidden;aspect-ratio:4/3}
.exp-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,.7,.2,1)}
.exp:hover .exp-img img{transform:scale(1.05)}
.exp-body{padding:clamp(28px,3vw,42px);display:flex;flex-direction:column;flex:1}
.exp .tag{font-size:.62rem;font-weight:500;letter-spacing:.36em;text-transform:uppercase;color:var(--lagoon);margin-bottom:14px}
.exp h3{margin-bottom:6px}
.exp .price{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--brass);margin-bottom:20px}
.exp ul{list-style:none;padding:0;margin:0 0 30px}
.exp li{padding:9px 0;font-size:.93rem;color:var(--mut);border-bottom:1px solid var(--hair)}
.exp li:last-child{border:0}
.exp .btn{margin-top:auto;align-self:flex-start}
.exp.hallmark{outline:1px solid var(--brass);outline-offset:-1px}

/* ---------- fleet (dark) ---------- */
.fleet{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:center}
.fleet-img{overflow:hidden}
.fleet-img img{width:100%;height:auto}
.fleet h2{margin-bottom:24px}
.fleet p{color:#B9C6BE;max-width:50ch}
.spec-row{display:flex;gap:clamp(26px,4vw,60px);flex-wrap:wrap;margin:36px 0 44px;border-top:1px solid var(--hair-inv);padding-top:30px}
.spec b{font-family:var(--serif);font-size:1.9rem;font-weight:400;display:block;color:var(--brass-2);font-variant-numeric:tabular-nums}
.spec span{font-size:.64rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#8FA098}
@media(max-width:920px){.fleet{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--hair)}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.45rem);padding:26px 0;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);font-style:italic;color:var(--brass);font-size:1.5rem;flex:none}
.faq details[open] summary::after{content:"—";font-size:1rem}
.faq details p{color:var(--mut);max-width:68ch;padding-bottom:28px;margin:0;font-size:.97rem}

/* ---------- reserve band ---------- */
.reserve{text-align:center}
.reserve h2{max-width:20ch;margin:0 auto 22px}
.reserve p{max-width:52ch;margin:0 auto 44px}
.capture{display:flex;max-width:560px;margin:0 auto;border:1px solid var(--hair-inv)}
.capture input{
  flex:1;min-width:0;background:transparent;border:0;color:var(--bone);
  font-family:var(--sans);font-weight:300;font-size:.95rem;padding:19px 24px;
}
.capture input::placeholder{color:#7E8F87}
.capture input:focus{outline:none}
.capture .btn{border:0}
.fineprint{font-size:.72rem;letter-spacing:.08em;color:#7E8F87;margin-top:22px}

/* ---------- footer ---------- */
.colophon{background:var(--palm);color:#8FA098;border-top:1px solid var(--hair-inv)}
.colophon-grid{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;padding:clamp(56px,7vw,90px) 0 40px}
.colophon .wordmark{color:var(--bone);font-size:1.3rem}
.colophon h4{font-size:.62rem;font-weight:500;letter-spacing:.36em;text-transform:uppercase;color:var(--brass-2);margin-bottom:20px}
.colophon a{display:block;color:#B9C6BE;font-size:.9rem;font-weight:300;padding:5px 0}
.colophon a:hover{color:var(--brass-2)}
.legal{border-top:1px solid var(--hair-inv);padding:30px 0 44px;font-size:.74rem;line-height:1.8;max-width:88ch}

/* ---------- interior pages ---------- */
.pagehero{position:relative;min-height:56vh;display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.pagehero .hero-img{position:absolute;inset:0;z-index:-2}
.pagehero .hero-img img{width:100%;height:100%;object-fit:cover}
.pagehero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,33,28,.3),rgba(12,33,28,.78))}
.pagehero .hero-inner{padding-bottom:64px}
.pagehero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);max-width:18ch}

.prose{max-width:72ch}
.prose h2{margin:clamp(48px,6vw,72px) 0 22px}
.prose h3{font-family:var(--serif);margin:38px 0 10px}
.prose p,.prose li{color:#4A5A53}
.prose ul{padding-left:22px}
.prose li{margin-bottom:8px}
.prose blockquote{
  font-family:var(--serif);font-style:italic;font-size:1.4rem;line-height:1.5;color:var(--brass);
  border-left:1px solid var(--brass);padding-left:28px;margin:40px 0;max-width:44ch;
}
.landmark{border-top:1px solid var(--hair);padding:36px 0 8px;margin-top:8px}
.landmark .where{font-size:.64rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--lagoon);display:block;margin:6px 0 14px}
.landmark-img{overflow:hidden;max-width:560px;margin:20px 0 28px;aspect-ratio:3/2}
.landmark-img img{width:100%;height:100%;object-fit:cover}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.19,.7,.22,1),transform 1s cubic-bezier(.19,.7,.22,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise,.reveal{opacity:1;transform:none}
}

/* wide tables etc. */
.scrollwrap{overflow-x:auto}

/* ---------- mobile refinements ---------- */
@media(max-width:760px){
  .masthead nav a:not(.reserve-link){display:none}
  .wordmark{font-size:1.02rem;letter-spacing:.1em}
  .hero::after{background:linear-gradient(178deg,rgba(12,33,28,.5) 0%,rgba(12,33,28,.26) 36%,rgba(12,33,28,.5) 60%,rgba(12,33,28,.92) 100%)}
  .strip{gap:14px}
  .strip .div{display:none}
  .exps{grid-template-columns:1fr}
  .colophon-grid{gap:34px}
}

/* ---------- editorial imagery layers ---------- */

/* intro with flanking offset images */
.intro-stage{position:relative}
.intro-stage .intro{position:relative;z-index:1}
.flank{position:absolute;top:50%;width:clamp(150px,17vw,250px);z-index:0}
.flank img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.flank figcaption{font-size:.6rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);margin-top:12px}
.flank-l{left:clamp(10px,3vw,40px);transform:translateY(-58%) rotate(-1.2deg)}
.flank-r{right:clamp(10px,3vw,40px);transform:translateY(-38%) rotate(1.2deg)}
@media(max-width:1080px){.flank{display:none}}

/* the homage / the original pairs */
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,54px);margin-top:clamp(46px,6vw,80px)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--palm);padding:2px}
.pair figure{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5}
.pair img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,.7,.2,1)}
.pair figure:hover img{transform:scale(1.06)}
.pair figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;
  font-size:.56rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:#F6F3EC;
  background:linear-gradient(180deg,transparent,rgba(12,33,28,.82));
}
.pair-title{font-family:var(--serif);font-size:clamp(1.2rem,1.8vw,1.5rem);margin-top:18px}
.pair-sub{font-size:.85rem;color:var(--mut);margin-top:4px}
@media(max-width:820px){.pairs{grid-template-columns:1fr}}

/* fleet duo collage */
.fleet-media{position:relative;padding-bottom:clamp(40px,5vw,70px)}
.fleet-media .fm-main{width:88%}
.fleet-media .fm-inset{
  position:absolute;right:0;bottom:0;width:52%;
  border:6px solid var(--palm);box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.fleet-media img{width:100%;display:block}

/* veiled section background (reserve) */
.veiled{position:relative;isolation:isolate}
.veil{position:absolute;inset:0;z-index:-1}
.veil img{width:100%;height:100%;object-fit:cover}
.veil::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,33,28,.93),rgba(12,33,28,.88))}

/* prose figures */
.prose figure{margin:34px 0}
.prose figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.prose figcaption{font-size:.62rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);margin-top:12px}

/* film strip */
.filmstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--palm);padding:2px}
.filmstrip figure{margin:0;overflow:hidden;aspect-ratio:1}
.filmstrip img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,.7,.2,1)}
.filmstrip figure:hover img{transform:scale(1.07)}
@media(max-width:640px){.filmstrip{grid-template-columns:repeat(2,1fr)}}