/* ---------------- BRAND FONT: Lynkco Type (self-hosted) ---------------- */
@font-face{font-family:'Lynkco Type';font-weight:300;font-style:normal;font-display:swap;
  src:url('../fonts/LynkcoType-Light.woff2') format('woff2'),url('../fonts/LynkcoType-Light.woff') format('woff');}
@font-face{font-family:'Lynkco Type';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/LynkcoType-Regular.woff2') format('woff2'),url('../fonts/LynkcoType-Regular.woff') format('woff');}
@font-face{font-family:'Lynkco Type';font-weight:500;font-style:normal;font-display:swap;
  src:url('../fonts/LynkcoType-Medium.woff2') format('woff2'),url('../fonts/LynkcoType-Medium.woff') format('woff');}
@font-face{font-family:'Lynkco Type';font-weight:700;font-style:normal;font-display:swap;
  src:url('../fonts/LynkcoType-Bold.woff2') format('woff2'),url('../fonts/LynkcoType-Bold.woff') format('woff');}

/* =========================================================
   Ferrari Roma Test Drive — front-end styles
   Palette comes from CSS vars injected by the theme (admin-controlled):
   --nav --ink --white --grey-1 --red --red-hover
   ========================================================= */

:root{
  --grey-line:#e4e4e4;
  --grey-line-dk:#333;
  --muted:#6f6f6f;
  --muted-dk:#9a9a9a;
  --maxw:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:'Lynkco Type',system-ui,-apple-system,sans-serif; font-weight:300; line-height:1.6;
  --display:'Lynkco Type',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
::selection{background:var(--red);color:#fff}
a{color:inherit}

/* ---------------- HEADER (logo only) ---------------- */
.lctd-nav{
  position:sticky; top:0; z-index:50; background:var(--nav);
  display:flex; align-items:center; justify-content:center;
  padding:14px 20px; border-bottom:1px solid rgba(0,0,0,.35);
}
.lctd-brand{display:inline-flex; align-items:center; justify-content:center; line-height:0; padding:12px 8px; min-height:44px; box-sizing:content-box}
.lctd-brand .custom-logo{height:40px;width:auto}
.lctd-logo{width:clamp(108px,14vw,138px); height:auto; color:#fff; fill:currentColor}

/* ---------------- HERO ---------------- */
.lctd-hero{
  position:relative; min-height:clamp(460px,80vh,860px);
  display:flex; align-items:flex-end; background:#000; overflow:hidden;
}
.lctd-hero-img{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 42%; background-repeat:no-repeat;
  animation:lctd-kenburns 20s ease-out infinite alternate;
}
/* Hero background video: covers the hero, sits under the scrim and text */
.lctd-hero-video{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center; background:#000; pointer-events:none;
}
/* Scrim: darkens the footage so the white hero text stays legible */
.lctd-hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.86) 100%),
    linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.42) 46%, rgba(0,0,0,.05) 78%);
}
/* When a hero video is present, hide the still image layers on desktop/tablet */
.has-hero-video .lctd-hero-img{ display:none; }
/* responsive hero image swap — each layer shows only in its breakpoint,
   and only when that image is actually provided (has-tablet-hero / has-mobile-hero) */
.lctd-hero-img--tablet,
.lctd-hero-img--mobile{ display:none; }

/* Tablet: 601px–1024px */
@media(min-width:601px) and (max-width:1024px){
  .has-tablet-hero .lctd-hero-img--desktop{ display:none; }
  .has-tablet-hero .lctd-hero-img--tablet{ display:block; background-position:center top; }
  /* video hero wins — never show a still image layer */
  .has-hero-video .lctd-hero-img{ display:none !important; }
}
/* Mobile: ≤600px (falls back to tablet image if no mobile image set) */
@media(max-width:600px){
  .has-mobile-hero .lctd-hero-img--desktop{ display:none; }
  .has-mobile-hero .lctd-hero-img--tablet{ display:none; }
  .has-mobile-hero .lctd-hero-img--mobile{ display:block; background-position:center top; }
  /* if only a tablet image exists (no mobile), keep showing tablet on phones */
  .has-tablet-hero:not(.has-mobile-hero) .lctd-hero-img--desktop{ display:none; }
  .has-tablet-hero:not(.has-mobile-hero) .lctd-hero-img--tablet{ display:block; background-position:center top; }
  /* video hero wins on mobile too — hide every still image layer */
  .has-hero-video .lctd-hero-img{ display:none !important; }
}
/* MOBILE (≤600px): text is NOT over the image — image on top, text in its own
   block underneath. Applies to both hero styles. */
@media(max-width:600px){
  .lctd-hero{
    display:block;               /* stop the flex bottom-align overlay */
    min-height:0;
    background:var(--nav);       /* dark band behind the text block */
  }
  .lctd-hero--roma{ background:#f4f3f1; min-height:0; }

  /* image becomes a real block at the top, shown in full (landscape, uncropped).
     The bundled key visual is ~2.04:1, so use 2/1 here — 16/9 would crop ~13%
     off each side and clip the car nose and the "03" graphic. */
  .lctd-hero-img{
    position:relative; inset:auto;
    width:100%; height:auto; aspect-ratio:2/1;
    background-size:cover; background-position:center;
    animation:none;
  }
  /* A purpose-made mobile upload is usually portrait, so give it a taller frame. */
  .has-mobile-hero .lctd-hero-img--mobile{ aspect-ratio:4/5; }
  /* keep whichever image layer is active as a block (handled by has-* rules above),
     just ensure the desktop layer also behaves as a block when it's the one showing */
  .lctd-hero:not(.has-mobile-hero):not(.has-tablet-hero):not(.has-hero-video) .lctd-hero-img--desktop{ display:block; }

  /* hero video wins on mobile — video is the ONLY hero visual, no still image under it */
  .has-hero-video .lctd-hero-img,
  .has-hero-video .lctd-hero-img--desktop,
  .has-hero-video .lctd-hero-img--tablet,
  .has-hero-video .lctd-hero-img--mobile{ display:none !important; }

  /* hero video also becomes a stacked block on top, text below */
  .has-hero-video .lctd-hero-video{
    position:relative; inset:auto; width:100%; height:auto; aspect-ratio:2/1; display:block;
  }

  .lctd-hero-scrim{ display:none; }   /* no dark overlay needed anymore */

  /* text block sits under the image, full width, normal flow */
  .lctd-hero-inner{
    position:relative; z-index:2;
    max-width:none; margin:0; text-align:center;
    padding:28px 22px 34px;
  }
  .lctd-hero-head{ color:#fff; }
  .lctd-hero-sub p{ color:#dcdcdc; }
  /* Roma (light) variant keeps dark text on its light band */
  .lctd-hero--roma .lctd-hero-head{ color:var(--ink); }
  .lctd-hero--roma .lctd-hero-sub p{ color:#2c2c2c; }
}
@keyframes lctd-kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.lctd-hero-inner{
  position:relative; z-index:2; width:100%;
  padding:0 clamp(20px,5vw,64px) clamp(44px,6vw,88px);
  max-width:var(--maxw); margin:0 auto;
}

/* When using the official Roma image (cars up top, white gradient bottom):
   CENTERED heading + intro on the white band, matching ferrari.com layout. */
.lctd-hero--roma{ background:#f4f3f1; align-items:stretch; min-height:clamp(560px,94vh,1040px); }
.lctd-hero--roma .lctd-hero-img{
  background-position:center top; background-size:cover; animation:none;
}
.lctd-hero--roma .lctd-hero-scrim{ display:none; }
.lctd-hero--roma .lctd-hero-inner{
  align-self:flex-end; text-align:center; max-width:1000px;
  padding-bottom:clamp(34px,4.5vw,60px);
}
.lctd-hero--roma .lctd-hero-head{ color:var(--ink); }
.lctd-hero--roma .lctd-hero-sub p{ color:#2c2c2c; }

/* centered hero heading — bold, uppercase, wide (reference style) */
.lctd-hero-head{
  margin:0; font-family:var(--display); font-weight:700; text-transform:uppercase; color:#fff;
  font-size:clamp(30px,5.8vw,72px); line-height:.98; letter-spacing:-.02em;
  animation:lctd-up .7s .1s both;
}
.lctd-hero-sub{ margin-top:clamp(16px,2vw,26px); animation:lctd-up .7s .2s both; }
.lctd-hero-sub p{
  margin:6px 0; color:#eaeaea; font-weight:300;
  font-size:clamp(14px,1.7vw,20px); line-height:1.6;
}
.lctd-hero-cta{ margin-top:clamp(24px,3.5vw,38px); animation:lctd-up .7s .3s both; }
.lctd-btn-red{
  display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  background:var(--red); color:#fff; border:0;
  padding:16px clamp(28px,4vw,42px);
  font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  transition:transform .2s, background .2s, box-shadow .2s;
  box-shadow:0 10px 30px rgba(0,181,173,.28);
}
.lctd-btn-red:hover{background:var(--red-hover); transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,181,173,.36)}
.lctd-btn-red:focus-visible{outline:3px solid var(--red); outline-offset:3px}
.lctd-arrow{transition:transform .2s}
.lctd-btn-red:hover .lctd-arrow{transform:translateX(4px)}
/* scroll cue */
.lctd-scrollcue{
  width:26px; height:44px; border:1.5px solid rgba(255,255,255,.55); border-radius:14px;
  display:inline-flex; justify-content:center; padding-top:8px; text-decoration:none;
}
.lctd-scrollcue span{ width:3px; height:8px; border-radius:2px; background:#fff; animation:lctd-scroll 1.6s ease-in-out infinite; }
@keyframes lctd-scroll{0%,100%{opacity:0;transform:translateY(0)}40%{opacity:1}80%{opacity:0;transform:translateY(12px)}}
@keyframes lctd-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------------- BOOKING ---------------- */
.lctd-booking{
  max-width:var(--maxw); margin:0 auto; position:relative;
  padding:clamp(52px,8vw,110px) clamp(20px,5vw,40px);
}
.lctd-booking::before{
  content:"01"; position:absolute; top:clamp(10px,2vw,24px); right:clamp(12px,3vw,32px);
  font-size:clamp(80px,16vw,200px); font-weight:200; line-height:1; color:#f4f2f0;
  letter-spacing:-.04em; z-index:0; pointer-events:none; user-select:none; opacity:.55;
}
.lctd-booking > *{ position:relative; z-index:1; }
.lctd-kicker{
  display:inline-flex; align-items:center; gap:12px;
  font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--red); margin-bottom:16px;
}
.lctd-kicker::before{ content:""; width:28px; height:2px; background:var(--red); display:inline-block; }
.lctd-booking h2{
  margin:0 0 18px; font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(30px,5.2vw,60px); line-height:.98; letter-spacing:-.02em;
}
.lctd-lead{color:var(--muted); max-width:56ch; font-size:clamp(14px,1.6vw,17px); margin:0 0 52px; line-height:1.75}

.lctd-step{
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); margin:0 0 24px; display:flex; align-items:center; gap:14px;
}
.lctd-step b{
  width:28px; height:28px; border-radius:50%; border:1.5px solid var(--ink);
  display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:13px;
  transition:background .3s, color .3s, border-color .3s;
}
.lctd-step.done b{ background:var(--red); border-color:var(--red); color:#fff; }

/* date cards — modern interactive rail */
.lctd-dates{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.lctd-dates.is-single{display:block}

/* Single date: a compact, elegant banner (auto-selected) — not a giant clickable square */
.lctd-dates.is-single{max-width:720px}
.lctd-dates.is-single .lctd-date{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(24px,5vw,56px);
  padding:26px clamp(24px,4vw,38px); border-radius:18px; cursor:default;
}
.lctd-dates.is-single .lctd-date .dow{grid-column:1; grid-row:1; align-self:end; margin-bottom:-2px}
.lctd-dates.is-single .lctd-date .row{grid-column:1; grid-row:2; flex-direction:row; align-items:baseline; gap:12px; margin:0}
.lctd-dates.is-single .lctd-date .num{font-size:clamp(56px,9vw,84px); line-height:.9}
.lctd-dates.is-single .lctd-date .mon{margin:0}
.lctd-dates.is-single .lctd-date-foot{grid-column:2; grid-row:1 / span 2; margin:0; padding:0 0 0 clamp(20px,3vw,36px); border:0; border-left:1px solid rgba(255,255,255,.09); display:flex; flex-direction:column; justify-content:center; gap:14px; min-width:0; height:70%; align-self:center}
.lctd-dates.is-single .lctd-date .avail{margin:0; order:1; gap:10px; font-size:13px}
.lctd-dates.is-single .lctd-date .avail b{white-space:nowrap; font-size:15px}
.lctd-dates.is-single .lctd-date .avail em{white-space:nowrap}
.lctd-dates.is-single .lctd-date .meter{order:2; margin:0; height:8px; max-width:none}
.lctd-dates.is-single .lctd-date-cta{display:none} /* auto-selected — no button needed */
.lctd-dates.is-single .lctd-date-glow{width:40%; right:0; top:-40%}
/* not interactive, so no hover lift */
.lctd-dates.is-single .lctd-date:hover{transform:none}
.lctd-dates.is-single .lctd-date.active{transform:none}
.lctd-dates.is-single .lctd-date.active::before{top:16px; bottom:16px}
@media(max-width:720px){
  .lctd-dates.is-single .lctd-date{grid-template-columns:1fr; gap:18px}
  .lctd-dates.is-single .lctd-date-foot{grid-column:1; grid-row:3; padding:18px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.09); height:auto}
  .lctd-dates.is-single .lctd-date .meter{max-width:none}
}

.lctd-date{
  position:relative; isolation:isolate; cursor:pointer; text-align:left; font-family:inherit;
  color:#f4f4f4; overflow:hidden; border:1px solid rgba(255,255,255,.10);
  border-radius:20px; padding:28px 30px 26px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0,181,173,.16), transparent 42%),
    linear-gradient(160deg, #1c1c1e 0%, #121213 60%, #0d0d0e 100%);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;
  transform:translateZ(0);
  animation:lctd-date-in .7s cubic-bezier(.2,.7,.2,1) both;
}
.lctd-dates.is-single .lctd-date{padding:22px clamp(22px,4vw,34px)}
@keyframes lctd-date-in{from{opacity:0; transform:translateY(26px) scale(.97)} to{opacity:1; transform:none}}

/* faint moving tech grid */
.lctd-date-grid{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:26px 26px; mask-image:radial-gradient(120% 100% at 100% 0%, #000 30%, transparent 78%);
  animation:lctd-grid-pan 9s linear infinite;
}
@keyframes lctd-grid-pan{from{background-position:0 0,0 0} to{background-position:26px 0,0 26px}}

/* red glow blob that drifts */
.lctd-date-glow{
  position:absolute; z-index:-1; width:60%; aspect-ratio:1; right:-10%; top:-30%;
  background:radial-gradient(circle, rgba(0,181,173,.55), transparent 62%);
  filter:blur(24px); opacity:.55; pointer-events:none;
  animation:lctd-glow-drift 7s ease-in-out infinite alternate;
}
@keyframes lctd-glow-drift{from{transform:translate(0,0) scale(1)} to{transform:translate(-14%,18%) scale(1.18)}}

/* sweeping shimmer line on hover/active */
.lctd-date::after{
  content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transition:none;
}
.lctd-date:hover::after, .lctd-date.active::after{animation:lctd-sheen 1.1s ease}
@keyframes lctd-sheen{from{left:-60%} to{left:120%}}

.lctd-date:hover{transform:translateY(-6px); border-color:rgba(255,255,255,.2);
  box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(0,181,173,.25), inset 0 1px 0 rgba(255,255,255,.06)}
.lctd-date:focus-visible{outline:2px solid var(--red); outline-offset:3px}
.lctd-date.active{
  border-color:rgba(0,181,173,.7); transform:translateY(-6px);
  box-shadow:0 26px 70px rgba(0,0,0,.55), 0 0 30px rgba(0,181,173,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
/* glowing accent rail on the left, animated when active */
.lctd-date.active::before{
  content:""; position:absolute; left:0; top:20px; bottom:20px; width:4px; z-index:2;
  background:linear-gradient(180deg, var(--red), #00E0D5); border-radius:0 4px 4px 0;
  box-shadow:0 0 14px rgba(0,181,173,.9); animation:lctd-rail 1.6s ease-in-out infinite}
@keyframes lctd-rail{0%,100%{opacity:.6} 50%{opacity:1}}

.lctd-date .dow{font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:#b9b9bd}

.lctd-date .row{display:flex; align-items:baseline; gap:14px; margin:18px 0 2px}
.lctd-date .num{
  font-family:var(--display); font-size:clamp(62px,11vw,104px); font-weight:700; line-height:.82; letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff 30%, #cfcfd4); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lctd-date.active .num{background:linear-gradient(180deg,#fff, #5FE3DC); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 22px rgba(0,181,173,.4))}
.lctd-date .mon{font-size:14px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#c7c7cc}

.lctd-date-foot{display:block; margin-top:22px}
.lctd-date .meter{height:7px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.lctd-date .meter i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, #00B5AD, #00E0D5); box-shadow:0 0 14px rgba(0,181,173,.85);
  width:0; transition:width 1s cubic-bezier(.2,.7,.2,1); position:relative}
.lctd-date .meter i::after{content:""; position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation:lctd-meter-scan 2.6s ease-in-out infinite}
@keyframes lctd-meter-scan{0%{transform:translateX(-100%)} 60%,100%{transform:translateX(220%)}}
.lctd-date .avail{margin-top:12px; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:space-between; color:#eaeaea}
.lctd-date .avail em{font-style:normal; color:#8b8b90; font-weight:400; letter-spacing:.02em}

.lctd-date-cta{
  display:flex; align-items:center; gap:8px; margin-top:22px;
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#fff;
  opacity:.75; transition:opacity .3s, gap .3s;
}
.lctd-date-cta i{font-style:normal; color:var(--red); transition:transform .3s}
.lctd-date:hover .lctd-date-cta, .lctd-date.active .lctd-date-cta{opacity:1; gap:12px}
.lctd-date:hover .lctd-date-cta i, .lctd-date.active .lctd-date-cta i{transform:translateX(4px)}

.lctd-date.soldout{opacity:.55; filter:grayscale(.5)}
.lctd-date.soldout .num{background:linear-gradient(180deg,#bdbdbd,#8a8a8a); -webkit-background-clip:text; background-clip:text; color:transparent}
.lctd-date.soldout .meter i{background:#7a7a7a; box-shadow:none}
.lctd-date.soldout .lctd-date-cta{opacity:.5}
.lctd-date.soldout .lctd-date-cta i{display:none}

@media(prefers-reduced-motion:reduce){
  .lctd-date, .lctd-date-grid, .lctd-date-glow, .lctd-date.active::before,
  .lctd-date .meter i::after{animation:none !important}
  .lctd-date::after{display:none}
}

/* slots panel reveal */
.lctd-panel-slots{max-height:0; opacity:0; overflow:hidden; transition:max-height .55s ease, opacity .45s ease}
.lctd-panel-slots.open{max-height:2000px; opacity:1; padding-top:52px}
.lctd-slots-top{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px}
.lctd-for{font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase}
.lctd-for span{color:var(--red)}
.lctd-legend{display:flex; gap:18px; flex-wrap:wrap; font-size:11px; color:var(--muted); letter-spacing:.04em}
.lctd-legend i{display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:-1px; border:1px solid}
.lg-open i{background:#fff; border-color:var(--ink)}
.lg-one i{background:#fff; border-color:var(--muted)}
.lg-full i{background:#ececec; border-color:#d5d5d5}

.lctd-slot-group{margin-bottom:30px}
.lctd-slot-group:last-child{margin-bottom:0}
.lctd-group-head{
  display:flex; align-items:center; gap:14px; margin:0 0 18px;
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
}
.lctd-group-head::after{content:""; flex:1; height:1px; background:var(--grey-line)}
.lctd-slots{display:block}
.lctd-slot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:14px;
}
.lctd-slot{
  position:relative; isolation:isolate; cursor:pointer; text-align:left; color:#f4f4f4; font-family:inherit;
  overflow:hidden; border:1px solid rgba(255,255,255,.10); border-radius:16px;
  padding:24px 26px 22px; display:block;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0,181,173,.14), transparent 46%),
    linear-gradient(160deg, #1c1c1e 0%, #131314 62%, #0e0e0f 100%);
  box-shadow:0 10px 28px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
  animation:lctd-fade .45s both;
}
.lctd-slot::after{
  content:""; position:absolute; top:0; bottom:0; width:36%; left:-60%; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
}
.lctd-slot:hover:not(.full){transform:translateY(-5px); border-color:rgba(0,181,173,.45);
  box-shadow:0 22px 48px rgba(0,0,0,.45), 0 0 24px rgba(0,181,173,.22), inset 0 1px 0 rgba(255,255,255,.07)}
.lctd-slot:hover:not(.full)::after{animation:lctd-sheen 1s ease}
.lctd-slot:focus-visible{outline:2px solid var(--red); outline-offset:3px}
.lctd-slot .t{display:block; font-family:var(--display); font-size:clamp(15px,1.25vw,18px); font-weight:600; letter-spacing:-.01em; line-height:1.25; color:#fff; white-space:nowrap}
.lctd-slot .c{display:block; margin-top:9px; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#9a9aa0; line-height:1.3}
.lctd-slot.one{border-color:rgba(0,224,213,.45)}
.lctd-slot.one .c{color:#7FEFE9}
.lctd-slot.full{cursor:not-allowed; opacity:.5; filter:grayscale(.4); box-shadow:none; transform:none}
.lctd-slot.full .t{color:#bdbdbd}
.lctd-slot.full .c{color:#8a8a8a}
.lctd-slot.full::after{display:none}
.lctd-dots{display:flex; gap:5px; margin-top:14px}
.lctd-dots b{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.14); display:block; transition:background .2s}
.lctd-dots b.on{background:var(--red)}
.lctd-slot.full .lctd-dots b{background:rgba(255,255,255,.2)}
.lctd-slotbar{display:block; width:100%; height:7px; margin-top:16px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.lctd-slotbar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#00B5AD,#00E0D5); box-shadow:0 0 12px rgba(0,181,173,.7); transition:width .5s ease}
.lctd-slot.full .lctd-slotbar i{background:#7a7a7a; box-shadow:none}
@keyframes lctd-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------------- STATS BAND ---------------- */
.lctd-stats{background:linear-gradient(180deg,#0e0e0f,#151517); color:#fff; padding:clamp(44px,7vw,74px) clamp(20px,5vw,40px); border-top:1px solid rgba(255,255,255,.06)}
.lctd-stats-in{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,4vw,40px)}
.lctd-stat{position:relative; text-align:center; padding:8px 6px;
  opacity:0; transform:translateY(20px); animation:lctd-stat-in .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(var(--i) * .12s)}
@keyframes lctd-stat-in{to{opacity:1; transform:none}}
.lctd-stat + .lctd-stat::before{content:""; position:absolute; left:calc(-1 * clamp(10px,2vw,20px)); top:50%; transform:translateY(-50%); width:1px; height:56%; background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent)}
.lctd-stat-val{font-family:var(--display); font-size:clamp(30px,5vw,58px); font-weight:700; letter-spacing:-.03em; line-height:1; white-space:nowrap;
  background:linear-gradient(180deg,#fff,#5FE3DC); -webkit-background-clip:text; background-clip:text; color:transparent}
.lctd-stat-label{margin-top:12px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#a2a2a8}
@media(max-width:760px){
  .lctd-stats-in{grid-template-columns:1fr 1fr; gap:clamp(24px,6vw,36px)}
  .lctd-stat:nth-child(odd)::before{display:none}
  .lctd-stat:nth-child(3)::before,.lctd-stat:nth-child(4)::before{display:none}
}
@media(max-width:420px){
  .lctd-stats-in{grid-template-columns:1fr}
  .lctd-stat::before{display:none !important}
  .lctd-stat{padding:14px 6px; border-top:1px solid rgba(255,255,255,.07)}
  .lctd-stat:first-child{border-top:0}
}
@media(prefers-reduced-motion:reduce){ .lctd-stat{animation:none; opacity:1; transform:none} }

/* ---------------- VIDEO SECTION ---------------- */
.lctd-video{position:relative; width:100%; background:#000; overflow:hidden; line-height:0}
.lctd-video-el{display:block; width:100%; height:auto; max-height:88vh; object-fit:cover; margin:0 auto}
/* When there's overlaid text, force a cinematic min-height and cover-fit */
.lctd-video:not(.no-text) .lctd-video-el{min-height:clamp(420px,62vh,760px); height:clamp(420px,62vh,760px); object-fit:cover}
.lctd-video-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.72) 100%)}
.lctd-video-inner{position:absolute; z-index:2; left:0; right:0; bottom:0; line-height:1.1;
  max-width:var(--maxw); margin:0 auto; padding:clamp(30px,6vw,72px) clamp(20px,5vw,48px)}
.lctd-video-head{margin:0; color:#fff; font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(28px,5.2vw,68px); letter-spacing:.03em; line-height:1.02;
  opacity:0; transform:translateY(22px); animation:lctd-vfade .9s ease forwards .2s}
.lctd-video-sub{margin:16px 0 0; color:#eaeaea; font-weight:300; font-size:clamp(14px,1.7vw,19px);
  letter-spacing:.02em; max-width:60ch;
  opacity:0; transform:translateY(22px); animation:lctd-vfade .9s ease forwards .38s}
@keyframes lctd-vfade{to{opacity:1; transform:none}}
/* Manual play button (only when autoplay is off) */
.lctd-video-play{position:absolute; z-index:3; inset:0; margin:auto; width:84px; height:84px; border:0; cursor:pointer;
  border-radius:50%; background:rgba(0,181,173,.92); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 40px rgba(0,0,0,.4); transition:transform .2s, background .2s}
.lctd-video-play:hover{transform:scale(1.06); background:var(--red)}
.lctd-video-play svg{margin-left:4px}
.lctd-video.playing .lctd-video-play{display:none}
@media(max-width:600px){
  .lctd-video:not(.no-text) .lctd-video-el{min-height:clamp(340px,64vh,520px); height:clamp(340px,64vh,520px)}
  .lctd-video-inner{text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .lctd-video-head,.lctd-video-sub{animation:none; opacity:1; transform:none}
}

/* ---------------- FEATURE BLOCK ---------------- */
.lctd-feature{background:var(--grey-1); color:#fff; padding:clamp(52px,8vw,92px) clamp(20px,5vw,40px)}
.lctd-feature-in{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,56px); align-items:center}
.lctd-fk{font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--muted-dk); margin-bottom:14px}
.lctd-feature h3{margin:0; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(26px,4vw,46px); line-height:1; letter-spacing:-.02em}
.lctd-feature p{color:#cfcfcf; margin:16px 0 0; font-weight:300; font-size:15px}
.lctd-feature ul{list-style:none; margin:0; padding:0}
.lctd-feature li{padding:15px 0; border-top:1px solid var(--grey-line-dk); font-size:14px; display:flex; justify-content:space-between; gap:16px}
.lctd-feature li span:first-child{color:var(--muted-dk); letter-spacing:.1em; text-transform:uppercase; font-size:11px}

/* ---------------- FOOTER ---------------- */
.lctd-footer{ background:var(--nav); color:#fff; position:relative; overflow:hidden; }
.lctd-footer-accent{ height:4px; background:linear-gradient(90deg, var(--red), #00E0D5, var(--red)); }

/* statement CTA */
.lctd-footer-cta{
  position:relative; text-align:center;
  padding:clamp(56px,9vw,110px) clamp(20px,5vw,40px) clamp(40px,6vw,64px);
  border-bottom:1px solid var(--grey-line-dk);
}
.lctd-footer-mark{ margin-bottom:22px; }
.lctd-flogo-big{ width:clamp(150px,22vw,210px); height:auto; color:var(--red); fill:currentColor; opacity:.95; }
.lctd-footer-cta h2{
  margin:0; font-weight:200; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(36px,7vw,86px); line-height:.95;
}
.lctd-footer-cta h2 em{ font-style:normal; font-weight:600; color:#fff; }
.lctd-footer-cta p{
  max-width:46ch; margin:20px auto 0; color:var(--muted-dk);
  font-size:clamp(14px,1.6vw,17px); font-weight:300;
}
.lctd-footer-btn{
  display:inline-flex; align-items:center; gap:12px; margin-top:32px; cursor:pointer;
  background:var(--red); color:#fff; border:0; padding:17px 46px;
  font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  transition:transform .2s, background .2s, box-shadow .2s;
  box-shadow:0 12px 34px rgba(0,181,173,.34);
}
.lctd-footer-btn:hover{ background:var(--red-hover); transform:translateY(-3px); box-shadow:0 18px 46px rgba(0,181,173,.42); }
.lctd-footer-btn .lctd-arrow{ transition:transform .2s; }
.lctd-footer-btn:hover .lctd-arrow{ transform:translateX(4px); }

/* columns */
.lctd-footer-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(24px,4vw,56px);
  padding:clamp(44px,6vw,72px) clamp(20px,5vw,40px);
}
.lctd-footer-brandcol .lctd-flogo{ width:132px; height:auto; color:#fff; fill:currentColor; margin-bottom:18px; }
.lctd-footer-name{ display:block; font-size:12px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; }
.lctd-footer-note{ margin:14px 0 0; color:var(--muted-dk); font-size:12.5px; font-weight:300; line-height:1.7; max-width:32ch; }
.lctd-footer-col h4{
  margin:0 0 16px; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#fff;
}
.lctd-footer-col ul{ list-style:none; margin:0; padding:0; }
.lctd-footer-col li{
  font-size:13px; font-weight:300; color:#d7d7db; padding:7px 0;
  display:flex; justify-content:space-between; gap:14px; border-bottom:1px solid rgba(255,255,255,.06);
}
.lctd-footer-col li span{ color:var(--muted-dk); text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; }

.lctd-socials{ display:flex; gap:10px; }
.lctd-social{
  width:40px; height:40px; border:1px solid var(--grey-line-dk); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; font-size:11px; font-weight:600; letter-spacing:.05em;
  transition:background .2s, border-color .2s, transform .2s;
}
.lctd-social:hover{ background:var(--red); border-color:var(--red); transform:translateY(-3px); }

/* baseline */
.lctd-footer-base{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:22px clamp(20px,5vw,40px); border-top:1px solid var(--grey-line-dk);
  color:var(--muted-dk); font-size:11px; letter-spacing:.06em;
}
.lctd-footer-tag{ text-transform:uppercase; letter-spacing:.24em; color:#8a8a90; }

@media(max-width:820px){ .lctd-footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .lctd-footer-grid{ grid-template-columns:1fr; } .lctd-footer-base{ flex-direction:column; text-align:center; } }

/* ---------------- MODAL ---------------- */
.lctd-overlay{
  position:fixed; inset:0; background:rgba(18,18,18,.6); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:16px; z-index:70;
}
.lctd-overlay.show{display:flex}
.lctd-modal{
  background:var(--white); border-top:3px solid var(--red);
  width:100%; max-width:460px; padding:clamp(24px,5vw,38px); max-height:94vh; overflow-y:auto;
  box-shadow:0 40px 90px rgba(0,0,0,.35); animation:lctd-rise .3s ease;
}
@keyframes lctd-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.lctd-mlogo{width:120px; height:auto; color:var(--ink); fill:currentColor; margin-bottom:18px}
.lctd-modal h3{margin:0 0 6px; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(20px,4vw,24px); letter-spacing:-.01em}
.lctd-msub{color:var(--muted); font-size:13px; letter-spacing:.03em; margin:0 0 24px}
.lctd-msub b{color:var(--ink); font-weight:500}
.lctd-field{margin-bottom:15px}
.lctd-field label{display:block; font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.lctd-field input{width:100%; background:#fff; border:1px solid var(--grey-line); padding:12px 13px; font-family:inherit; font-size:16px; font-weight:300; color:var(--ink)}
.lctd-field input::placeholder{color:#b0b0b0}
.lctd-field input:focus{outline:none; border-color:var(--ink)}

.lctd-plusone{margin:4px 0 2px}
.lctd-plusone .q{font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:9px}
.lctd-toggle{display:flex; gap:9px}
.lctd-toggle button{flex:1; background:#fff; border:1px solid var(--grey-line); color:var(--muted); padding:12px; font-family:inherit; font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:12px; cursor:pointer; transition:all .18s}
.lctd-toggle button.sel{border-color:var(--ink); color:var(--ink); background:#fafafa}
.lctd-guest{max-height:0; overflow:hidden; transition:max-height .3s ease}
.lctd-guest.show{max-height:120px}

.lctd-mbtns{display:flex; gap:10px; margin-top:26px}
.lctd-act{flex:1; padding:14px; border:0; font-family:inherit; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:12px; cursor:pointer; transition:all .18s}
.lctd-confirm{background:var(--red); color:#fff}
.lctd-confirm:hover{background:var(--red-hover)}
.lctd-confirm:disabled{opacity:.6;cursor:wait}
.lctd-cancel{background:#fff; color:var(--muted); border:1px solid var(--grey-line)}
.lctd-cancel:hover{color:var(--ink); border-color:var(--ink)}
.lctd-err{color:var(--red); font-size:12.5px; margin-top:12px; min-height:16px}

.lctd-done{text-align:center}
.lctd-check{width:60px; height:60px; margin:2px auto 18px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px}
.lctd-rec{margin:22px 0; padding:18px; border:1px solid var(--grey-line); background:#fafafa; text-align:left; font-size:13.5px; line-height:1.85}
.lctd-rec span{color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:10px; display:block; margin-top:8px}
.lctd-rec span:first-child{margin-top:0}
.lctd-rec b{color:var(--ink); font-weight:500}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:760px){
  .lctd-feature-in{grid-template-columns:1fr}
}
@media(max-width:680px){
  /* Decorative section numeral: keep it clear of the right edge on phones */
  .lctd-booking::before{ font-size:clamp(64px,18vw,110px); right:14px; top:14px; opacity:.4; }
  /* Time slots stack full-width on phones — never a cramped 2-up grid */
  .lctd-slot-grid{grid-template-columns:1fr !important; gap:14px}
  .lctd-slot{padding:22px 24px}
  .lctd-slot .t{font-size:18px; white-space:nowrap}
}
@media(max-width:400px){
  .lctd-slot .t{font-size:16px; white-space:normal}
}
@media(max-width:520px){
  .lctd-dates:not(.is-single){grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .lctd-hero-img{animation:none!important}
}

.lctd-req{color:var(--red,#00B5AD);font-weight:700;}