/* ============================================================
   VillaCash — Field Manual, Premium Edition
   Mediterranean luxury: sand base, olive primary, terracotta urgency
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* palette */
  --sand:      #F4EDDF;
  --sand-2:    #ECE2CF;
  --sand-3:    #E2D6BD;
  --paper:     #FBF7EF;
  --espresso:  #221B11;
  --espresso-2:#2C2417;
  --muted:     #6E6353;
  --muted-2:   #8A7E6B;
  --ink:       #14110A;   /* dark cinematic sections */
  --ink-2:     #1D1810;
  --line:      rgba(34,27,17,0.14);
  --line-2:    rgba(34,27,17,0.08);

  --olive:     #3C7A57;
  --olive-dk:  #2C5C41;
  --olive-soft:#9DBBA6;
  --terra:     #C1654A;
  --terra-dk:  #A24E35;
  --gold:      #B9912F;

  --accent:    var(--olive);
  --accent-dk: var(--olive-dk);

  /* type */
  --display: 'Schibsted Grotesk', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 72px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* warmth tweak hook: data-warmth shifts the base hue */
[data-warmth="cool"]{ --sand:#F1EEE6; --sand-2:#E7E2D6; --paper:#FAF8F3; }
[data-warmth="warm"]{ --sand:#F6EAD6; --sand-2:#EFDFC4; --paper:#FDF6E9; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  background:var(--sand);
  color:var(--espresso);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
::selection{ background:var(--accent); color:#fff; }

/* image-slot theming */
image-slot{ --is-bg:rgba(255,255,255,.04); --is-fg:rgba(255,255,255,.55); }
.on-sand image-slot{ --is-bg:rgba(34,27,17,.05); --is-fg:rgba(34,27,17,.5); }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.accent{ color:var(--accent); }
.serif-no{ font-style:italic; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1!important; transform:none!important; }
  html{ scroll-behavior:auto; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--display); font-weight:600; font-size:15px;
  padding:15px 26px; border-radius:999px; letter-spacing:-.01em;
  transition:transform .25s var(--ease), background .25s, box-shadow .25s, color .25s;
  white-space:nowrap;
}
.btn .arr{ transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 10px 30px -10px color-mix(in oklab,var(--accent),#000 10%); }
.btn-primary:hover{ background:var(--accent-dk); transform:translateY(-2px); }
.btn-light{ background:var(--paper); color:var(--espresso); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -16px rgba(0,0,0,.5); }
.btn-ghost{ border:1.5px solid var(--line); color:var(--espresso); }
.btn-ghost:hover{ border-color:var(--espresso); }
.btn-ghost.on-dark{ border-color:rgba(255,255,255,.28); color:#fff; }
.btn-ghost.on-dark:hover{ border-color:#fff; background:rgba(255,255,255,.06); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut);
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:color-mix(in oklab, var(--sand), transparent 6%);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
  padding-block:14px;
}
.nav.on-hero:not(.solid){ color:#fff; }
.nav.on-hero:not(.solid) .nav-links a{ color:rgba(255,255,255,.82); }
.nav.on-hero:not(.solid) .brand .dot{ background:#fff; }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.03em; }
.brand .mark{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 12px -4px color-mix(in oklab,var(--accent),#000 20%);
}
.brand .mark svg{ width:18px; height:18px; }
.nav-links{ display:flex; align-items:center; gap:28px; font-family:var(--display); font-weight:500; font-size:14.5px; }
.nav-links a{ color:var(--muted); transition:color .2s; }
.nav-links a:hover{ color:var(--accent); }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-save{ font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.05em; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.nav-save .pulse{ width:8px; height:8px; border-radius:50%; background:var(--terra); box-shadow:0 0 0 0 var(--terra); animation:pulse 2.4s infinite; flex-shrink:0; }
.nav.on-hero:not(.solid) .nav-save{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--terra),transparent 40%)} 70%{box-shadow:0 0 0 9px transparent} 100%{box-shadow:0 0 0 0 transparent} }
@media (max-width:860px){ .nav-links{ display:none } .nav-save{ display:none } }

/* ============================================================
   STICKY OFFER BAR (bottom)
   ============================================================ */
.offerbar{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  transform:translateY(120%); transition:transform .5s var(--ease);
  padding:0 var(--gut) max(14px, env(safe-area-inset-bottom));
  pointer-events:none;
}
.offerbar.show{ transform:none; }
.offerbar-inner{
  pointer-events:auto;
  max-width:var(--maxw); margin:0 auto;
  background:var(--ink); color:#fff;
  border-radius:18px 18px 0 0;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:14px 16px 14px 24px;
  box-shadow:0 -20px 50px -24px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.08); border-bottom:none;
}
.offerbar .ob-status{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.7); }
.offerbar .ob-dot{ width:8px;height:8px;border-radius:50%; background:#5ec98a; box-shadow:0 0 10px #5ec98a; }
.ob-seats{ display:flex; align-items:baseline; gap:10px; }
.ob-seats .n{ font-family:var(--display); font-weight:800; font-size:22px; color:#fff; font-variant-numeric:tabular-nums; }
.ob-seats .l{ font-size:12.5px; color:rgba(255,255,255,.6); }
.ob-price{ margin-left:auto; display:flex; align-items:baseline; gap:10px; }
.ob-price .old{ font-family:var(--mono); font-size:13px; color:rgba(255,255,255,.42); text-decoration:line-through; }
.ob-price .now{ font-family:var(--display); font-weight:800; font-size:24px; }
.ob-bar{ flex-basis:100%; height:4px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.ob-bar > i{ display:block; height:100%; background:linear-gradient(90deg,var(--terra),var(--gold)); border-radius:99px; }
@media (max-width:680px){
  .offerbar-inner{ padding:12px 14px; gap:12px 16px; }
  .ob-status .txt{ display:none; }
  .ob-price .now{ font-size:20px; }
  .offerbar .btn{ padding:11px 18px; font-size:13.5px; }
}

/* ============================================================
   HERO (dark cinematic)
   ============================================================ */
.hero{ position:relative; min-height:100svh; background:var(--ink); color:#fff; overflow:hidden; display:flex; flex-direction:column; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(0.5px) saturate(1.06); transform:scale(1.04); }
@media (min-width:1100px){ .hero-media .hero-video{ filter:blur(1.8px) saturate(1.08); transform:scale(1.08); } }
.hero-media image-slot{ width:100%; height:100%; }
.hero-fallback{
  position:absolute; inset:-4%;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(231,178,116,.55), transparent 55%),
    radial-gradient(120% 120% at 18% 92%, rgba(60,122,87,.5), transparent 55%),
    linear-gradient(180deg,#2a2113,#14110a 70%);
  animation:slowpan 26s var(--ease) infinite alternate;
}
.hero-fallback::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(125deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px);
  mix-blend-mode:overlay; opacity:.5;
}
@keyframes slowpan{ from{ transform:scale(1.06) translate(-1.5%,-1%) } to{ transform:scale(1.14) translate(1.5%,1%) } }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(10,8,4,.82) 0%, rgba(10,8,4,.5) 42%, rgba(10,8,4,.12) 78%, rgba(10,8,4,.28) 100%),
    linear-gradient(180deg, rgba(10,8,4,.55) 0%, transparent 26%, transparent 52%, rgba(10,8,4,.9) 100%);
}
.hero-grain{ position:absolute; inset:0; z-index:2; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }

.hero-inner{ position:relative; z-index:5; flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(40px,7vh,90px); }
.hero-top{ padding-top:clamp(96px,14vh,150px); }

/* masthead meta row */
.masthead{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18);
  margin-bottom:clamp(28px,5vh,56px);
}
.masthead .cell{ padding:14px 18px 14px 0; }
.masthead .k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.masthead .v{ font-family:var(--display); font-weight:600; font-size:15.5px; margin-top:5px; color:#fff; display:flex; align-items:center; gap:7px; }
.masthead .v .gdot{ width:8px;height:8px;border-radius:50%; background:#5ec98a; box-shadow:0 0 9px #5ec98a; }
@media (max-width:680px){ .masthead{ grid-template-columns:repeat(2,1fr); } .masthead .cell{ border-top:1px solid rgba(255,255,255,.12); padding:12px 0; } }

.hero-vol{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:22px; }
.hero-h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(46px, 9vw, 132px); line-height:.92; letter-spacing:-.04em;
  text-wrap:balance; max-width:15ch;
}
.hero-h1 em{ font-style:italic; font-weight:500; color:var(--terra); }
.hero-h1 .strike{ position:relative; white-space:nowrap; }
.hero-h1 .strike::after{ content:""; position:absolute; left:-2%; right:-2%; top:54%; height:.07em; background:var(--terra); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease) .5s; }
.hero.lit .hero-h1 .strike::after{ transform:scaleX(1); }
.hero-sub{ margin-top:clamp(22px,3.5vh,34px); max-width:48ch; font-size:clamp(16px,1.5vw,19px); color:rgba(255,255,255,.82); }
.hero-sub b{ color:#fff; font-weight:700; }
.hero-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:30px; }
.hero-trust{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px; font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:rgba(255,255,255,.62); }
.hero-trust .sep{ width:4px;height:4px;border-radius:50%; background:rgba(255,255,255,.35); }
.scrollcue{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:6; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:rgba(255,255,255,.55); text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; }
.scrollcue .ln{ width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.6),transparent); animation:cue 2s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%{transform:scaleY(.2);opacity:.2} 50%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(.2);opacity:.2} }
.slot-note{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:3; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.55); text-align:center; pointer-events:none; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ background:var(--ink); color:var(--sand); padding:18px 0; overflow:hidden; border-top:1px solid rgba(255,255,255,.08); }
.marquee.light{ background:var(--accent); color:#fff; border:none; }
.marquee-track{ display:flex; gap:0; width:max-content; animation:scroll 38s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--display); font-weight:600; font-size:clamp(15px,1.6vw,19px); letter-spacing:-.01em; padding:0 26px; display:inline-flex; align-items:center; gap:26px; white-space:nowrap; }
.marquee-track .star{ color:color-mix(in oklab, currentColor, transparent 45%); }
@keyframes scroll{ to{ transform:translateX(-50%) } }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section{ position:relative; }
.section{ padding-block:clamp(72px,11vh,150px); }
.smark{ display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.smark .num{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.smark .ln{ height:1px; flex:1; background:var(--line); max-width:120px; }
.h2{ font-family:var(--display); font-weight:800; font-size:clamp(34px,5.2vw,68px); line-height:1; letter-spacing:-.035em; text-wrap:balance; }
.h2 em{ font-style:italic; font-weight:500; color:var(--accent); }
.lead{ font-size:clamp(17px,1.7vw,21px); color:var(--muted); max-width:60ch; }

/* PREMISE */
.premise{ background:var(--sand); }
.premise-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,5vw,80px); align-items:center; }
.premise-statement{ font-family:var(--display); font-weight:500; font-size:clamp(26px,3.6vw,46px); line-height:1.14; letter-spacing:-.025em; text-wrap:balance; }
.premise-statement b{ font-weight:800; }
.premise-statement em{ font-style:italic; color:var(--accent); }
.premise-fig{ position:relative; border-radius:18px; clip-path:inset(0 round 18px); aspect-ratio:4/5; box-shadow:0 40px 80px -40px rgba(34,27,17,.5); }
.premise-fig image-slot,
.premise-fig .premise-video{ width:100%; height:100%; object-fit:cover; }
.premise-tag{ position:absolute; left:16px; bottom:16px; z-index:2; background:rgba(20,17,10,.7); backdrop-filter:blur(6px); color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:.05em; padding:8px 12px; border-radius:8px; }
@media (max-width:860px){ .premise-grid{ grid-template-columns:1fr; } .premise-fig{ aspect-ratio:16/11; } }

/* ============================================================
   VALUE STACK
   ============================================================ */
.stack{ background:var(--paper); }
.stack-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:46px; }
.stack-total{ text-align:right; }
.stack-total .k{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.stack-total .v{ font-family:var(--display); font-weight:800; font-size:clamp(40px,6vw,76px); line-height:1; letter-spacing:-.04em; color:var(--espresso); font-variant-numeric:tabular-nums; }
.stack-total .v .cur{ color:var(--accent); }
.stack-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.stack-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,3vw,46px); align-items:start;
  padding:clamp(22px,3vw,34px) 4px; border-bottom:1px solid var(--line);
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.stack-item:hover{ background:color-mix(in oklab,var(--accent),transparent 94%); padding-left:14px; }
.stack-item .rn{ font-family:var(--mono); font-size:13px; color:var(--accent); padding-top:8px; min-width:34px; }
.stack-item .body h3{ font-family:var(--display); font-weight:700; font-size:clamp(20px,2.3vw,28px); letter-spacing:-.02em; }
.stack-item .body p{ margin-top:8px; color:var(--muted); max-width:60ch; font-size:15.5px; }
.stack-item .val{ font-family:var(--mono); font-weight:500; font-size:clamp(16px,1.8vw,20px); color:var(--espresso); white-space:nowrap; padding-top:6px; font-variant-numeric:tabular-nums; }
@media (max-width:680px){
  .stack-item{ grid-template-columns:auto 1fr; }
  .stack-item .val{ grid-column:2; padding-top:2px; color:var(--accent); }
}

/* ============================================================
   REELS GALLERY
   ============================================================ */
.reels{ background:var(--ink); color:#fff; overflow:hidden; }
.reels .lead{ color:rgba(255,255,255,.6); }
.reels .smark .num{ color:var(--olive-soft); }
.reels .smark .ln{ background:rgba(255,255,255,.16); }
.reels-stage{ margin-top:54px; display:flex; gap:clamp(14px,2vw,26px); justify-content:center; align-items:center; perspective:1600px; }
.phone{
  position:relative; flex:0 0 auto; width:clamp(150px,17vw,232px); aspect-ratio:9/19;
  border-radius:30px; background:#0b0a07; padding:8px;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,255,255,.12);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.phone .screen{ position:relative; width:100%; height:100%; border-radius:23px; clip-path:inset(0 round 23px); background:#15120c; }
.phone .screen image-slot{ width:100%; height:100%; }
.phone .screen .reel-video{ width:100%; height:100%; object-fit:cover; display:block; border-radius:23px; }
.phone .notch{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:30%; height:13px; background:#000; border-radius:999px; z-index:4; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.phone .ui{ position:absolute; inset:0; z-index:3; pointer-events:none; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; background:linear-gradient(180deg,transparent 50%,rgba(8,6,3,.7)); }
.phone .ui .cap{ font-family:var(--display); font-weight:700; font-size:13px; }
.phone .ui .meta{ font-family:var(--mono); font-size:9.5px; color:rgba(255,255,255,.7); margin-top:3px; display:flex; gap:10px; }
.phone .ui .rail{ position:absolute; right:10px; bottom:54px; display:flex; flex-direction:column; gap:13px; }
.phone .ui .rail i{ width:24px;height:24px;border-radius:50%; background:rgba(255,255,255,.14); backdrop-filter:blur(4px); display:grid; place-items:center; font-style:normal; font-size:11px; }
.phone .slot-mini{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:rgba(255,255,255,.4); text-align:center; padding:14px; }
.phone.p0{ transform:rotateY(16deg) translateZ(-40px) translateY(26px) scale(.9); opacity:.85; }
.phone.p1{ transform:rotateY(9deg) translateY(8px) scale(.97); }
.phone.p2{ transform:translateY(-8px) scale(1.06); z-index:3; box-shadow:0 60px 90px -34px rgba(0,0,0,.8), inset 0 0 0 1.5px rgba(255,255,255,.18); }
.phone.p3{ transform:rotateY(-9deg) translateY(8px) scale(.97); }
.phone.p4{ transform:rotateY(-16deg) translateZ(-40px) translateY(26px) scale(.9); opacity:.85; }
.reels-stage:hover .phone{ filter:saturate(1.05); }
.reels-foot{ margin-top:46px; display:flex; gap:34px; flex-wrap:wrap; justify-content:center; font-family:var(--mono); font-size:12.5px; color:rgba(255,255,255,.6); }
.reels-foot b{ color:#fff; font-family:var(--display); font-weight:700; font-size:18px; display:block; }
@media (max-width:860px){
  .reels-stage{ overflow-x:auto; justify-content:flex-start; padding-bottom:14px; scroll-snap-type:x mandatory; }
  .phone{ width:200px; scroll-snap-align:center; }
  .phone.p0,.phone.p1,.phone.p2,.phone.p3,.phone.p4{ transform:none; opacity:1; }
}

/* ============================================================
   BOOKING DEMO
   ============================================================ */
.booking{ background:var(--sand-2); }
.booking-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,5vw,72px); align-items:start; }
@media (max-width:980px){ .booking-grid{ grid-template-columns:1fr; } }
.booking-copy .feat{ display:flex; gap:14px; margin-top:22px; }
.booking-copy .feat .ic{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:color-mix(in oklab,var(--accent),transparent 86%); color:var(--accent); display:grid; place-items:center; font-family:var(--mono); font-weight:600; font-size:14px; }
.booking-copy .feat h4{ font-family:var(--display); font-weight:700; font-size:17px; }
.booking-copy .feat p{ color:var(--muted); font-size:15px; margin-top:3px; }

.engine{
  background:var(--paper); border-radius:22px; padding:clamp(18px,2.4vw,28px); transform:translateZ(0);
  box-shadow:0 50px 90px -50px rgba(34,27,17,.6), 0 0 0 1px var(--line-2);
}
.engine-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--line); }
.engine-top .url{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.engine-top .lock{ color:var(--accent); }
.engine-top .badge-direct{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--accent); background:color-mix(in oklab,var(--accent),transparent 88%); padding:5px 9px; border-radius:7px; }
.engine-villa{ display:flex; align-items:center; gap:14px; padding:16px 0; }
.engine-villa .thumb{ width:64px; height:64px; border-radius:12px; overflow:hidden; flex:0 0 auto; }
.engine-villa .thumb image-slot{ width:100%; height:100%; }
.engine-villa h3{ font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em; }
.engine-villa .loc{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; margin-top:2px; }
.engine-villa .stars{ color:var(--gold); font-size:13px; letter-spacing:1px; }

.cal{ margin-top:6px; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-head .mo{ font-family:var(--display); font-weight:700; font-size:16px; }
.cal-head button{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--muted); transition:background .2s,color .2s; }
.cal-head button:hover{ background:var(--sand-2); color:var(--espresso); }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
.cal-dow span{ text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:var(--muted-2); text-transform:uppercase; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-cell{ aspect-ratio:1; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:13.5px; position:relative; transition:background .18s, color .18s, transform .18s; }
.cal-cell.empty{ pointer-events:none; }
.cal-cell .pday{ font-family:var(--display); font-weight:600; }
.cal-cell .pp{ font-family:var(--mono); font-size:8.5px; color:var(--muted-2); }
.cal-cell.sel-able{ cursor:pointer; }
.cal-cell.sel-able:hover{ background:var(--sand-2); }
.cal-cell.peak .pp{ color:var(--terra); }
.cal-cell.in-range{ background:color-mix(in oklab,var(--accent),transparent 86%); }
.cal-cell.endpoint{ background:var(--accent); color:#fff; transform:scale(1); }
.cal-cell.endpoint .pp{ color:rgba(255,255,255,.8); }
.cal-cell.disabled{ color:var(--muted-2); opacity:.45; pointer-events:none; }

.engine-summary{ margin-top:18px; border-top:1px dashed var(--line); padding-top:16px; min-height:250px; }
.sum-row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:14.5px; }
.sum-row .lbl{ color:var(--muted); display:flex; align-items:center; gap:8px; }
.sum-row .amt{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.sum-row.saved .lbl{ color:var(--accent); font-weight:600; }
.sum-row.saved .amt{ color:var(--accent); font-weight:600; }
.sum-row.ota .amt{ color:var(--terra); text-decoration:line-through; opacity:.8; }
.sum-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; padding-top:14px; border-top:1px solid var(--line); }
.sum-total .lbl{ font-family:var(--display); font-weight:700; font-size:16px; }
.sum-total .amt{ font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.engine-hint{ margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--muted-2); text-align:center; }

/* ============================================================
   OFFER / PRICING
   ============================================================ */
.offer{ background:var(--ink); color:#fff; }
.offer .smark .num{ color:var(--olive-soft); }
.offer .smark .ln{ background:rgba(255,255,255,.16); }
.offer-grid{ display:grid; grid-template-columns:1fr .9fr; gap:clamp(40px,6vw,90px); align-items:center; }
@media (max-width:980px){ .offer-grid{ grid-template-columns:1fr; } }
.offer-h2{ font-family:var(--display); font-weight:800; font-size:clamp(34px,5vw,66px); line-height:1; letter-spacing:-.035em; }
.offer-h2 em{ font-style:italic; font-weight:500; color:var(--terra); }
.offer .lead{ color:rgba(255,255,255,.7); margin-top:22px; }
.guarantee{ display:inline-flex; align-items:center; gap:14px; margin-top:30px; padding:14px 18px; border:1px solid rgba(255,255,255,.16); border-radius:14px; }
.guarantee .seal{ width:48px;height:48px; border-radius:50%; border:1.5px dashed var(--olive-soft); color:var(--olive-soft); display:grid; place-items:center; font-family:var(--mono); font-size:9px; line-height:1; text-align:center; font-weight:600; }
.guarantee .gt{ font-family:var(--display); font-weight:700; font-size:15px; }
.guarantee .gs{ font-size:13px; color:rgba(255,255,255,.6); }

.receipt{ background:var(--paper); color:var(--espresso); border-radius:18px; clip-path:inset(0 round 18px); box-shadow:0 60px 100px -50px rgba(0,0,0,.7); }
.receipt-top{ background:var(--espresso); color:var(--sand); padding:20px 26px; display:flex; justify-content:space-between; align-items:center; }
.receipt-top .t{ font-family:var(--display); font-weight:800; font-size:18px; }
.receipt-top .o{ font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.55); }
.receipt-body{ padding:26px; }
.rec-row{ display:flex; justify-content:space-between; align-items:baseline; padding:11px 0; font-size:15px; border-bottom:1px dashed var(--line); }
.rec-row .l{ color:var(--muted); }
.rec-row .v{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.rec-row.disc .v{ color:var(--terra); }
.rec-row.bonus .v{ color:var(--accent); }
.rec-pay{ display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; }
.rec-pay .l{ font-family:var(--display); font-weight:700; font-size:17px; }
.rec-pay .v{ font-family:var(--display); font-weight:900; font-size:clamp(40px,6vw,58px); letter-spacing:-.04em; line-height:.9; }
.rec-pay .v .cur{ font-size:.5em; vertical-align:top; color:var(--accent); }
.rec-split{ margin-top:6px; font-family:var(--mono); font-size:12px; color:var(--muted); text-align:right; }
.rec-split b{ color:var(--espresso); }
.receipt-body .btn{ width:100%; justify-content:center; margin-top:20px; }
.rec-foot{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:14px; font-family:var(--mono); font-size:11px; color:var(--muted); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ background:var(--sand); }
.faq-list{ margin-top:40px; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; gap:20px; padding:24px 4px; text-align:left; }
.faq-q .qn{ font-family:var(--mono); font-size:12px; color:var(--accent); flex:0 0 auto; }
.faq-q .qt{ font-family:var(--display); font-weight:700; font-size:clamp(18px,2.2vw,24px); letter-spacing:-.02em; flex:1; }
.faq-q .qi{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; position:relative; transition:border-color .25s, background .25s, color .25s; }
.faq-q .qi::before,.faq-q .qi::after{ content:""; position:absolute; background:currentColor; transition:transform .3s var(--ease); }
.faq-q .qi::before{ width:12px; height:1.8px; }
.faq-q .qi::after{ width:1.8px; height:12px; }
.faq-item.open .qi{ background:var(--accent); border-color:var(--accent); color:#fff; }
.faq-item.open .qi::after{ transform:scaleY(0); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq-a-inner{ padding:0 50px 26px; color:var(--muted); font-size:16px; max-width:72ch; }
.faq-a-inner a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{ background:var(--ink); color:#fff; text-align:center; position:relative; overflow:hidden; }
.final::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 60% at 50% 18%, rgba(193,101,74,.28), transparent 60%); }
.final-inner{ position:relative; z-index:2; }
.final h2{ font-family:var(--display); font-weight:800; font-size:clamp(38px,7vw,96px); line-height:.95; letter-spacing:-.04em; text-wrap:balance; max-width:18ch; margin-inline:auto; }
.final h2 em{ font-style:italic; font-weight:500; color:var(--terra); }
.final p{ margin-top:22px; color:rgba(255,255,255,.7); font-size:clamp(16px,1.6vw,19px); max-width:56ch; margin-inline:auto; text-wrap:pretty; }
.final .btn{ margin-top:34px; }
.final-meta{ margin-top:24px; font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.5); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink-2); color:rgba(255,255,255,.55); padding:40px var(--gut); border-top:1px solid rgba(255,255,255,.08); }
.foot-inner{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; }
.foot a{ color:var(--olive-soft); }
.foot .stars{ letter-spacing:6px; color:rgba(255,255,255,.25); }

/* tweaks button placement default handled by panel */

/* ============================================================
   Reels Plans — addon pricing tiers
   ============================================================ */
.reels-plans{ background:var(--sand-2); color:var(--ink); padding:120px 0; }
.rp-head{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:48px; max-width:980px; }
.rp-head .h2{ color:var(--ink); max-width:14ch; }
.rp-head .lead{ color:var(--muted); max-width:42ch; }
@media (max-width:820px){ .rp-head{ grid-template-columns:1fr; gap:18px; } }

.rp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:820px){ .rp-grid{ grid-template-columns:1fr; } }

.rp-card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--sand-3);
  border-radius:18px;
  padding:36px 32px 32px;
  box-shadow:0 1px 0 rgba(20,17,10,.04), 0 18px 40px -28px rgba(20,17,10,.22);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.rp-card:hover{ transform:translateY(-2px); border-color:var(--muted-2); }
.rp-card.featured{
  background:var(--ink); color:var(--paper);
  border-color:var(--ink);
  box-shadow:0 1px 0 rgba(20,17,10,.04), 0 24px 52px -28px rgba(0,0,0,.45);
}
.rp-card.featured .rp-tag,
.rp-card.featured .rp-cad{ color:var(--gold); }
.rp-card.featured .rp-foot{ color:rgba(255,255,255,.55); border-top-color:rgba(255,255,255,.12); }
.rp-card.featured .ck{ color:var(--gold); }

.rp-badge{
  position:absolute; top:-14px; right:24px;
  background:var(--gold); color:var(--ink);
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
}

.rp-tag{
  font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}
.rp-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:6px; }
.rp-price .cur{ font-family:var(--display); font-weight:700; font-size:28px; opacity:.7; }
.rp-price .num{ font-family:var(--display); font-weight:800; font-size:72px; line-height:.95; letter-spacing:-.03em; }
.rp-price .per{ font-family:var(--mono); font-size:14px; opacity:.6; margin-left:4px; }
.rp-cad{ font-family:var(--mono); font-size:13px; color:var(--muted); margin-bottom:22px; letter-spacing:.02em; }

.rp-list{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:11px; }
.rp-list li{ display:grid; grid-template-columns:18px 1fr; gap:12px; align-items:start; font-size:15px; line-height:1.5; }
.rp-list .ck{ color:var(--accent); font-weight:700; margin-top:1px; }

.rp-foot{
  font-family:var(--mono); font-size:12px;
  letter-spacing:.04em; color:var(--muted-2);
  border-top:1px dashed var(--sand-3);
  padding-top:14px;
}

.rp-note{
  margin-top:40px;
  font-size:14.5px; color:var(--muted);
  font-style:italic;
  text-align:center;
}

/* ============================================================
   Phone overlays — IG / TikTok / YouTube Shorts
   Compact platform-accurate UI on each .reel mockup
   ============================================================ */
.phone .ui.plat{ padding:0; background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 18%, transparent 55%, rgba(0,0,0,.7)); }

/* Top bar (sits just BELOW the dynamic island / notch) */
.phone .ptop{ position:absolute; top:28px; left:0; right:0; height:26px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; gap:8px; z-index:4; pointer-events:none; }
.phone .ptop .ic-l, .phone .ptop .ic-r{ width:18px; height:18px; color:#fff; display:inline-block; }
.phone .ptop .ic{ display:inline-block; width:100%; height:100%; }

.phone .ptop.tt .ttab{ font-family:var(--display); font-weight:700; font-size:11px; color:rgba(255,255,255,.55); padding:0 4px; letter-spacing:-.01em; }
.phone .ptop.tt .ttab.on{ color:#fff; border-bottom:2px solid #fff; padding-bottom:1px; }

.phone .ptop.ig{ justify-content:space-between; }
.phone .ptop.ig .ig-title{ font-family:'Schibsted Grotesk', sans-serif; font-weight:800; font-size:14px; color:#fff; letter-spacing:-.02em; }

.phone .ptop.yt{ justify-content:space-between; }
.phone .ptop.yt .yt-mark{ display:inline-flex; align-items:center; gap:6px; color:#fff; line-height:1; }
.phone .ptop.yt .yt-mark .ic{ width:22px; height:15px; display:inline-flex; align-items:center; }
.phone .ptop.yt .yt-mark .ic svg{ display:block; }
.phone .ptop.yt .yt-mark b{ font-family:'Schibsted Grotesk', sans-serif; font-weight:700; font-size:13px; letter-spacing:-.02em; line-height:1; }

/* Right rail (icons + counts) */
.phone .prail{ position:absolute; right:6px; bottom:78px; display:flex; flex-direction:column; align-items:center; gap:13px; z-index:4; pointer-events:none; }
.phone .prail .r-item{ display:flex; flex-direction:column; align-items:center; gap:2px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.phone .prail .r-item .ic{ width:22px; height:22px; display:inline-block; }
.phone .prail .r-item b{ font-family:var(--display); font-weight:600; font-size:9px; letter-spacing:0; }
.phone .prail .r-av{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#B9912F,#3C7A57); border:2px solid #fff; position:relative; }
.phone .prail .r-av .dot-plus{ position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); width:14px; height:14px; border-radius:50%; background:#FF2E55; color:#fff; font-weight:900; font-size:11px; line-height:14px; text-align:center; font-family:var(--display); }
.phone .prail .r-av.ig::before, .phone .prail .r-av.yt::before{ content:''; position:absolute; inset:0; border-radius:50%; background:linear-gradient(135deg,#B9912F 0%, #C1654A 50%, #3C7A57 100%); }

/* TikTok-specific */
.phone .prail.tt .r-disc{ width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 50% 50%, #fff 0 6px, transparent 6px), radial-gradient(circle, #14110A 0% 100%); border:2px solid #fff; animation:tt-spin 5s linear infinite; }
@keyframes tt-spin{ to { transform: rotate(360deg) } }

/* Instagram-specific */
.phone .prail.ig{ gap:14px; }
.phone .prail.ig .r-item .ic{ stroke-width:1.8; }

/* YouTube-specific */
.phone .prail.yt{ gap:11px; bottom:74px; }

/* Bottom block */
.phone .pbot{ position:absolute; left:0; right:0; bottom:0; padding:0 10px 12px; z-index:3; color:#fff; }
.phone .pbot .phandle{ display:flex; align-items:center; gap:6px; font-family:var(--display); font-weight:800; font-size:11px; }
.phone .pbot .phandle b{ font-weight:800; }
.phone .pbot .pcap{ font-family:var(--display); font-weight:500; font-size:10.5px; margin-top:4px; line-height:1.3; opacity:.94; }
.phone .pbot .pmusic{ display:flex; align-items:center; gap:5px; margin-top:6px; font-family:var(--display); font-weight:500; font-size:9.5px; color:rgba(255,255,255,.85); overflow:hidden; }
.phone .pbot .pmusic .ic{ width:11px; height:11px; flex-shrink:0; color:#fff; }
.phone .pbot .pmusic .ticker{ white-space:nowrap; }

/* Instagram pbot specifics */
.phone .pbot.ig .phandle .av{ width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#B9912F,#C1654A); display:inline-block; border:1.5px solid #fff; }
.phone .pbot.ig .phandle .follow{ font-family:var(--display); font-weight:700; font-size:9.5px; padding:2px 7px; border:1px solid #fff; border-radius:5px; }

/* YouTube pbot specifics */
.phone .pbot.yt .phandle .av{ width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#B9912F,#3C7A57); display:inline-block; border:1.5px solid rgba(255,255,255,.25); }
.phone .pbot.yt .phandle .subs{ font-family:var(--display); font-weight:800; font-size:9.5px; padding:3px 9px; background:#FF0033; color:#fff; border-radius:999px; margin-left:4px; letter-spacing:.01em; }

/* Compact on small/edge phones */
@media (max-width:780px){
  .phone .ptop{ top:32px; height:26px; padding:0 8px; }
  .phone .prail{ right:4px; bottom:70px; gap:10px; }
  .phone .prail .r-item .ic{ width:20px; height:20px; }
  .phone .pbot .pcap{ font-size:9.5px; }
}

/* members-only — slim editorial divider line above plans grid */
.rp-members{
  display:flex; align-items:center; gap:18px;
  margin:8px 0 32px;
}
.rp-members .rp-mline{
  flex:1; height:0; border-top:1px dashed rgba(34,27,17,.22);
}
.rp-members .rp-mtxt{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.rp-members .rp-mtxt svg{ color:var(--gold); flex-shrink:0; }
.rp-members .rp-x{ color:var(--gold); font-weight:700; letter-spacing:.08em; }
@media (max-width:680px){
  .rp-members .rp-mtxt{ font-size:10.5px; letter-spacing:.1em; gap:6px; white-space:normal; text-align:center; }
  .rp-members{ gap:10px; }
}

/* ============================================================
   Final CTA — live countdown + seats progress (FOMO)
   ============================================================ */
.fcd{
  margin-top:44px;
  display:inline-flex; flex-direction:column; align-items:center; gap:8px;
}
.fcd-label{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.fcd-clock{
  display:inline-flex; align-items:flex-start; gap:8px;
  font-feature-settings:'tnum' 1; font-variant-numeric:tabular-nums;
}
.fcd-unit{ display:flex; flex-direction:column; align-items:center; min-width:72px; }
.fcd-unit .n{
  font-family:var(--display); font-weight:800;
  font-size:clamp(54px,7vw,80px); line-height:.95;
  letter-spacing:-.04em;
  color:#fff;
  text-shadow:0 0 24px rgba(201,162,74,.18);
}
.fcd-unit .l{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin-top:6px;
}
.fcd-sep{
  font-family:var(--display); font-weight:800;
  font-size:clamp(48px,6.5vw,72px); line-height:.95;
  color:var(--gold);
  animation:fcd-blink 1.1s infinite;
  margin-top:-2px;
}
@keyframes fcd-blink{ 50% { opacity:.25; } }

.fcd-seats{
  margin:28px auto 18px;
  width:min(440px, 90%);
}
.fcd-seats-bar{
  position:relative;
  height:8px; width:100%;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
}
.fcd-seats-bar i{
  position:absolute; top:0; left:0; bottom:0;
  background:linear-gradient(90deg, var(--terra), var(--gold) 70%, #F2D88B);
  border-radius:999px;
  box-shadow:0 0 14px rgba(201,162,74,.5);
  animation:fcd-pulse 2.4s ease-in-out infinite;
}
@keyframes fcd-pulse{
  0%,100% { box-shadow:0 0 12px rgba(201,162,74,.35); }
  50%     { box-shadow:0 0 22px rgba(201,162,74,.6); }
}
.fcd-seats-meta{
  margin-top:10px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:rgba(255,255,255,.62);
}
.fcd-seats-meta b{ color:#fff; font-weight:700; }
.fcd-seats-meta .dot{ color:var(--terra); font-size:8px; }
.fcd-seats-meta .left b{ color:var(--terra); }

@media (max-width:600px){
  .fcd-unit{ min-width:56px; }
  .fcd-unit .n{ font-size:48px; }
  .fcd-sep{ font-size:42px; }
}

/* offer bar — neutral retail (no urgency theatre) */
.offerbar .ob-tag{
  font-family:var(--mono); font-size:12px;
  color:rgba(255,255,255,.5); letter-spacing:.04em;
}
.offerbar .ob-once{
  font-family:var(--mono); font-size:12px;
  color:rgba(255,255,255,.55); margin-left:6px;
}
.offerbar .ob-price .now{
  font-family:var(--display); font-weight:800; font-size:24px;
  color:#fff; letter-spacing:-.01em;
}
.offerbar .ob-price{ margin-left:auto; display:flex; align-items:baseline; gap:6px; }