@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@500;600&display=swap');

:root{
  /* Brand */
  --navy:#0b1f3a;
  --navy2:#102a4d;
  --yellow:#f6c200;
  --yellow-dark:#d39f00;

  /* UI */
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --stroke: rgba(15,23,42,.12);

  --radius:14px;
  --shadow: 0 8px 22px rgba(2,6,23,.06);
  --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
  font-weight:400;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}

/* ===== Typography ===== */
h1,h2,h3{
  font-family:'Poppins', system-ui, sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--navy);
}

/* ===== Layout ===== */
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ===== Header / Nav ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--stroke);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  min-width: 220px;
}
.logoBox{
  width:44px;height:44px;
  border-radius:12px;
  background:linear-gradient(180deg,var(--yellow),rgba(246,194,0,.78));
  border:1px solid rgba(211,159,0,.55);
  display:grid;place-items:center;
  color:#111827;
  font-weight:700;
  flex: 0 0 auto;
}
.brandTitle{
  line-height:1.05;
  font-size: 15px;
}
.brandTitle span{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:500;
  margin-top: 2px;
}

.links{
  display:flex;
  gap:18px;
  align-items:center;
}
.links a{
  font-weight:500;
  color:var(--muted);
}
.links a:hover{color:var(--text)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:#fff;
  font-weight:600;
  white-space:nowrap;
}
.btn.primary{
  background:var(--yellow);
  border-color:rgba(211,159,0,.65);
  color:#111827;
}
.btn.secondary{
  background:#eef2ff;
  border-color:rgba(37,99,235,.20);
}
.btn.dark{
  background:var(--navy);
  border-color:rgba(11,31,58,.55);
  color:#fff;
}
.btn:active{transform:translateY(1px)}

/* ===== Fields ===== */
.field{
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.field:focus{
  border-color:rgba(211,159,0,.55);
  box-shadow:0 0 0 3px rgba(246,194,0,.22);
  outline:none;
}

/* =======================================================================
   HERO BANNER
   ======================================================================= */
.heroBanner{
  background:#fff;
  border-bottom:1px solid var(--stroke);
}
.heroBannerInner{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:26px;
  align-items:center;
  padding: 26px 0 14px;
}

/* Left copy */
.heroTitle{
  margin:0 0 10px;
  font-size:clamp(30px, 3.6vw, 48px);
  line-height:1.08;
}
.heroSub{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.65;
  max-width:60ch;
  font-size:15.5px;
}
.heroCtas{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Right image */
.heroVisual{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--stroke);
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
  background:#fff;
}
.heroVisual img{
  width:100%;
  aspect-ratio: 16 / 9;
  height:auto;
  object-fit:cover;
  object-position:center 35%;
}

/* Trust ticks row under hero */
.heroTrust{
  border-top:1px solid var(--stroke);
  background:#fff;
}
.heroTrustInner{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
  padding:10px 0;
}
.trustTick{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-weight:600;
  font-size:13px;
}
.tickMark{
  display:inline-grid;
  place-items:center;
  width:18px;height:18px;
  border-radius:99px;
  background: rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.35);
  color: rgba(11,31,58,.9);
  font-weight:700;
}

/* Availability strip */
.availabilityBar{
  background:#f7f8fc;
  border-bottom:1px solid var(--stroke);
}
.availabilityInner{
  display:flex;
  gap:14px;
  align-items:center;
  padding:14px 0;
}
.availLabel{
  font-weight:600;
  color:var(--navy);
  min-width:170px;
}
.availForm{
  flex:1;
  display:grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap:10px;
  align-items:center;
}
.availForm .btn{padding:10px 16px}

/* ===== Sections ===== */
.section{padding:26px 0}
.section h2{
  margin:0 0 8px;
  font-size:22px;
}
.section p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.65;
}

/* ===== Tiles ===== */
.tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.tile{padding:16px}
.tileTop{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:6px;
}
.icoDot{
  width:42px;height:42px;
  border-radius:12px;
  background:#f3f4f6;
  border:1px solid rgba(15,23,42,.10);
  position:relative;
  flex:0 0 auto;
}
.icoDot::after{
  content:"";
  width:10px;height:10px;
  border-radius:99px;
  background:var(--yellow);
  border:1px solid rgba(211,159,0,.55);
  position:absolute;
  top:10px;left:10px;
}
.tile h3{margin:0;font-size:16px}
.tile p{margin:6px 0 0; color:var(--muted); line-height:1.6; font-size:14px}
.tile a{
  margin-top:10px;
  display:inline-flex;
  font-weight:600;
  color:var(--navy);
}
.tile a:hover{text-decoration:underline}

/* Make entire tile clickable */
.tileLink{
  display:block;
  color: inherit;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tileLink:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(2,6,23,.10);
  border-color: rgba(15,23,42,.18);
}
.tileLink:active{ transform: translateY(0px); }
.tileLink:focus-visible{
  outline: 3px solid rgba(246,194,0,.35);
  outline-offset: 3px;
}
.tileCta{
  display:inline-flex;
  margin-top: 10px;
  font-weight: 600;
  color: var(--navy);
}
.tileLink:hover .tileCta{ text-decoration: underline; }

/* ===== Trust strip ===== */
.trustStrip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.trustItem{padding:14px}
.trustItem b{font-weight:600}
.trustItem span{font-size:13px;color:var(--muted)}


/* ================= TESTIMONIAL SLIDER ================= */
.testimonialSlider{
  overflow: hidden;
  position: relative;
  margin-top: 10px;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.testimonialTrack{
  display: flex;
  gap: 16px;
  width: max-content;
  animation: scrollTestimonials 35s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}
.testimonialTrack .quote{
  min-width: 320px;
  max-width: 320px;
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine){
  .testimonialSlider:hover .testimonialTrack{
    animation-play-state: paused;
  }
}
.testimonialSlider.isPaused .testimonialTrack{
  animation-play-state: paused;
}
@keyframes scrollTestimonials{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .testimonialTrack{ animation: none !important; }
}

/* ===== Footer ===== */
.footer{
  margin-top:18px;
  border-top:1px solid var(--stroke);
  background:#fff;
  padding:22px 0;
}
.footerGrid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:14px;
}
.note{font-size:12px;color:var(--muted)}

/* ===== Mobile bar ===== */
.mobileBar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:12px;
  width:min(var(--max),calc(100% - 18px));
  z-index:80;
  display:none;
}
.mobileBarInner{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  padding:10px;
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(2,6,23,.16);
}

/* ===== Modal ===== */
.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.55);
  display:none;
  place-items:center;
  z-index:120;
}
.modal{
  width:min(650px,calc(100% - 18px));
  padding:16px;
  border-radius:16px;
}
.modal header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.x{
  width:42px;height:42px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:#fff;
  cursor:pointer;
}
form{display:grid; gap:10px}
textarea{min-height:110px; resize:vertical}

/* =======================================================================
   RESPONSIVE FIXES (iPhone + iPad)
   ======================================================================= */

@media (max-width: 980px){
  .heroBannerInner{grid-template-columns: 1fr; gap: 16px}
  .heroVisual img:not(.heroSlide){
    aspect-ratio: 16 / 10;
    object-position: center 40%;
  }
  .availabilityInner{flex-direction:column; align-items:stretch}
  .availLabel{min-width:unset}
  .availForm{grid-template-columns: 1fr; }

  .trustStrip{grid-template-columns: 1fr 1fr}
  .tiles{grid-template-columns: 1fr 1fr}
  .footerGrid{grid-template-columns: 1fr}

  .testimonialTrack .quote{ min-width: 300px; max-width: 300px; }
}

@media (max-width: 900px){
  .links > a:not(.btn){ display:none; }
  .brandTitle{ font-size: 14px; }
  .brandTitle span{ font-size: 11.5px; }
}

/* =========================================================
   MOBILE POLISH (NO scaling — proper sizing instead)
   ========================================================= */
@media (max-width: 760px){
  body{ padding-bottom: 92px; }
  .container{ padding: 0 18px; }

  /* Hide desktop links */
  .links{ display:none; }
  .mobileBar{ display:block; }

  /* ✅ IMPORTANT: hide topbar Call/Book on mobile (keep bottom bar) */
  .topbar [data-call],
  .topbar [data-book]{
    display:none !important;
  }

  /* Topbar spacing */
  .topbar{ padding: 2px 0; }
  .nav{ padding: 10px 0; position: relative; }

  .brand{
    gap: 12px;
    min-width: 0;
    margin-left: 6px;
  }
  .logoBox{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 16px;
    flex-shrink: 0;
  }
  .brandTitle{
    line-height: 1.15;
    font-size: 13.5px;
    min-width: 0;
  }
  .brandTitle span{
    font-size: 11.5px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
  }

  /* HERO: tighter sizing (this is your "scale down") */
  .heroBanner{
    background: var(--bg);
    border-bottom: 0;
    padding: 10px 0 0;
  }
  .heroBannerInner{
    grid-template-columns: 1fr;
    gap: 10px;             /* was 12 */
    padding: 0;
  }
  .heroCopy{
    background: #fff;
    border: 1px solid var(--stroke);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 14px;         /* was 16 */
  }
  .heroTitle{
    font-size: 30px;       /* was 32 */
    line-height: 1.07;
    margin: 0 0 8px;
  }
  .heroSub{
    font-size: 14px;       /* was 14.5 */
    line-height: 1.55;
    margin: 0 0 10px;
  }
  .heroCtas{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .heroCtas .btn{
    width: 100%;
    justify-content: center;
    padding: 11px 14px;    /* was 12px */
    border-radius: 14px;
    font-size: 14px;
  }
  .heroVisual{
    border-radius: 16px;   /* slightly tighter */
    box-shadow: var(--shadow);
  }
  .heroVisual img:not(.heroSlide){
    aspect-ratio: 16 / 10;
    object-position: center 40%;
  }

  /* Trust ticks card (slightly tighter) */
  .heroTrust{
    background: transparent;
    border-top: 0;
    padding: 0 0 10px;
  }
  .heroTrustInner{
    background: #fff;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 10px 12px;    /* tighter */
    gap: 10px;
  }
  .trustTick{ font-size: 12px; }

  /* Availability card — scaled down properly */
  .availabilityBar{
    background: transparent;
    border-bottom: 0;
    padding: 6px 0 0;
  }
  .availabilityInner{
    background: #fff;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 12px;         /* keep */
    margin: 0 0 14px;
  }
  .availLabel{
    margin: 0 0 8px;
    font-size: 14px;
  }
  .availForm{ grid-template-columns: 1fr; gap: 10px; }
  .availForm .field{
    padding: 9px 12px;
    font-size: 14px;
  }
  .availForm .btn{
    width: 100%;
    border-radius: 14px;
    padding: 11px 14px;
    font-size: 14px;
  }

  .tiles{grid-template-columns: 1fr}
  .trustStrip{grid-template-columns: 1fr}

  .testimonialTrack{ animation-duration: 45s; }
  .testimonialTrack .quote{ min-width: 280px; max-width: 280px; }
}

@media (max-width: 420px){
  .logoBox{ width:40px; height:40px; border-radius: 12px; }
  .brandTitle{ font-size: 13px; }
  .brandTitle span{ font-size: 11px; max-width: 185px; }
}

@media (min-width: 761px) and (max-width: 1024px){
  .container{
    padding-left: 28px;
    padding-right: 28px;
  }
  .heroBannerInner{ gap: 32px; }
}

/* =========================================================
   PREMIUM MOBILE MENU (slide-down)
   ========================================================= */

.mobileNavActions{
  display:none;
  align-items:center;
  gap:10px;
}

/* Premium icon button */
.menuBtn{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:grid;
  place-items:center;
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
  cursor:pointer;
}
.menuBtn:active{ transform: translateY(1px); }

/* Nudge hamburger left slightly */
@media (max-width: 760px){
  .menuBtn{ margin-right: 6px; }
  .mobileNavActions{ display:flex; margin-right: 2px; }
}

/* Hamburger icon */
.menuIcon{
  width:18px;
  height:2px;
  background: var(--navy);
  position:relative;
  border-radius:99px;
}
.menuIcon::before,
.menuIcon::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background: var(--navy);
  border-radius:99px;
}
.menuIcon::before{ top:-6px; }
.menuIcon::after{ top:6px; }

/* Slide-down panel */
.mobileMenu{
  position: fixed;
  inset: 0;
  background: rgba(244,246,251,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
  z-index: 120;
  overflow-y: auto;
}

.mobileMenuInner{
  padding: 84px 18px 18px;
  min-height: 100%;
}

/* ===== Premium mobile menu header ===== */
.mobileMenuHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
  padding:6px 0;
}

.mobileMenuHeader{
  max-width: 420px;
  margin: 0 auto 6px;
}

.mobileMenuTitle{
  font-size:14px;
  font-weight:700;
  color:var(--navy);
  letter-spacing:-0.01em;
  opacity:.85;
}

.menuClose{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.9);
  cursor:pointer;
}

/* ===== Links card ===== */
.mobileMenuLinks{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.mobileMenuLinks a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  font-weight:700;
  color: var(--navy);
  border-top:1px solid rgba(15,23,42,.08);
  transition: background 0.15s ease;
}

.mobileMenuLinks a:first-child{ border-top:0; }

.mobileMenuLinks a:hover{
  background: rgba(15,23,42,.03);
}

.mobileMenuLinks a:active{
  background: rgba(15,23,42,.05);
}

.mobileMenuLinks a::after{
  content:"›";
  color: rgba(11,31,58,.55);
  font-weight:900;
}

.mobileMenuLinks{
  max-width: 420px;
  margin: 0 auto;
}

/* No duplicate CTA buttons inside menu */
.mobileMenuCtas{ display:none; }

.mobileMenu.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 380px){
  .mobileMenuInner{ padding-left: 16px; padding-right: 16px; }
}

/* =========================================
   MOBILE: subtle scale-down for hero + availability
   ========================================= */
@media (max-width: 760px){

  /* scale down hero block slightly */
  .heroBanner{
    transform: scale(0.95);
    transform-origin: top center;
  }

  /* pull next section up so no awkward gap */
  .heroBanner + .availabilityBar{
    margin-top: -12px;
  }

  /* scale down availability card slightly */
  .availabilityBar{
    transform: scale(0.95);
    transform-origin: top center;
  }

  /* tighten spacing below availability */
  .availabilityBar + .section{
    margin-top: -10px;
  }
}


/* ===== Cross-page mobile fixes ===== */
@media (max-width: 760px){
  .mobileBarInner > .btn,
  .availForm > .btn{
    min-width:0;
    width:100%;
  }

  .mobileBarInner{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobileBarInner .btn{
    padding: 10px 8px;
    font-size: 14px;
  }

  .availabilityInner .availForm[style]{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap:10px;
    justify-content:stretch !important;
  }

  .availabilityInner .availForm[style] .btn{
    padding: 10px 8px;
    font-size: 14px;
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:50;
    background:#fff;
    border-bottom:1px solid var(--stroke);
    overflow: visible;
  }

  .heroBanner,
  .availabilityBar{
    transform:none !important;
  }

  .heroBanner + .availabilityBar,
  .availabilityBar + .section{
    margin-top: 0 !important;
  }
}

.heroSlider{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 0;
  background: #fff;
}

.heroSlide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0;
  transition: opacity 1s ease;
}

.heroSlide.active{
  opacity: 1;
  z-index: 1;
}

/* Override the generic .heroVisual img rule for slider images */
.heroSlider .heroSlide{
  aspect-ratio: auto;
  height: 100%;
}

@media (max-width: 760px){
  .heroSlider{
    aspect-ratio: 4 / 3;
  }

  .heroSlide{
    object-position: center 30%;
  }
}



.section .container{
  align-items: stretch;
}

.section .card{
  height: 100%;
}

.tileButtons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.tileList{
  margin:12px 0 0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
}

.tileList li{
  margin-bottom:4px;
}

/* =========================================================
   2026 PREMIUM REFRESH OVERRIDES
   ========================================================= */
:root{
  --bg:#f7f7f3;
  --card:#ffffff;
  --text:#111827;
  --muted:#5b6472;
  --stroke: rgba(15,23,42,.10);
  --navy:#101828;
  --navy2:#1a2332;
  --yellow:#f6c200;
  --yellow-dark:#d9a400;
  --radius:18px;
  --shadow:0 18px 40px rgba(15,23,42,.08);
}

body{
  background:
    radial-gradient(circle at top right, rgba(246,194,0,.10), transparent 22%),
    linear-gradient(180deg, #f9f8f2 0%, #f5f6f8 32%, #f8f8f5 100%);
}

.topbar{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 30px rgba(15,23,42,.04);
}
.links a,
.brandTitle span{color:#5d6574}
.links a[style*="var(--text)"],
.links a:hover{color:var(--navy)!important;}

.btn{
  border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.10);
}
.btn.primary{
  background:linear-gradient(180deg, #ffd84d 0%, var(--yellow) 100%);
  border-color:rgba(217,164,0,.55);
}
.btn.secondary{
  background:rgba(255,255,255,.78);
  border-color:rgba(15,23,42,.10);
}
.btn.dark{
  background:linear-gradient(180deg, #1b2434 0%, #101828 100%);
  border-color:rgba(16,24,40,.72);
}

.card{
  border-radius:20px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 14px 36px rgba(15,23,42,.06);
}

.heroBanner{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(246,194,0,.16), transparent 24%),
    linear-gradient(135deg, #0d1522 0%, #111827 52%, #171c28 100%);
  border-bottom:0;
}
.heroBanner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.45), transparent 90%);
  pointer-events:none;
}
.heroBannerInner{
  position:relative;
  z-index:1;
  padding:42px 0 28px;
  gap:42px;
}
.heroCopy{
  max-width:620px;
}
.heroTitle,
.heroBanner .heroCopy h1,
.heroBanner .heroCopy h2,
.heroBanner .heroCopy h3{color:#fff;}
.heroTitle{
  font-size:clamp(40px, 5vw, 72px);
  line-height:1.02;
  max-width:10ch;
  margin-bottom:16px;
}
.heroSub{
  color:rgba(255,255,255,.78);
  font-size:18px;
  max-width:55ch;
  margin-bottom:22px;
}
.heroCopy::before{
  content:"WEST LONDON • MANUAL & AUTOMATIC LESSONS";
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);
  font-size:12px;
  letter-spacing:.14em;
  font-weight:700;
}
.heroCtas{gap:14px;}
.heroVisual{
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.heroVisual img{object-position:center 28%;}
.heroSlider{background:#0f172a;}
.heroTrust{
  position:relative;
  z-index:1;
  border-top:1px solid rgba(255,255,255,.08);
  background:transparent;
}
.heroTrustInner{
  padding:14px 0 18px;
  gap:12px;
}
.trustTick{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.82);
  font-size:13px;
}
.tickMark{
  background:rgba(246,194,0,.18);
  border-color:rgba(246,194,0,.25);
  color:#fff;
}

.availabilityBar{
  position:relative;
  margin-top:-18px;
  padding-bottom:6px;
  background:transparent;
  border-bottom:0;
  z-index:2;
}
.availabilityInner{
  padding:16px;
  background:linear-gradient(180deg, #161f2d 0%, #101828 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  box-shadow:0 22px 52px rgba(15,23,42,.18);
}
.availLabel{
  min-width:160px;
  color:#fff;
  font-size:16px;
}
.availForm .field{
  background:rgba(255,255,255,.97);
  border-color:transparent;
}
.availForm .btn.primary{min-width:120px;}

.section{padding:40px 0;}
.section h2{font-size:clamp(28px, 3vw, 40px); margin-bottom:10px;}
.section > .container > p:first-of-type{max-width:64ch;}

.section:nth-of-type(even):not(.availabilityBar){
  position:relative;
}
.section:nth-of-type(even):not(.availabilityBar)::before{
  content:"";
  position:absolute;
  inset:12px 0;
  background:rgba(255,255,255,.48);
  border-top:1px solid rgba(15,23,42,.05);
  border-bottom:1px solid rgba(15,23,42,.05);
  z-index:-1;
}

.trustStrip,.tiles,.quotes,.footerGrid{gap:18px;}
.trustItem,.tile,.quote{padding:20px;}
.trustItem{
  background:rgba(255,255,255,.86);
}
.trustItem b,
.tile h3{font-size:19px; color:var(--navy);}
.tile{
  background:rgba(255,255,255,.92);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 46px rgba(15,23,42,.10);
}
.icoDot{
  background:linear-gradient(180deg, rgba(246,194,0,.18), rgba(246,194,0,.10));
  border-color:rgba(246,194,0,.18);
}
.icoDot::after{
  width:12px;height:12px;top:14px;left:14px;
}
.quote{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
}
.testimonialTrack .quote{
  border-radius:22px;
}

.footer{
  background:linear-gradient(180deg, #121925 0%, #0e1420 100%);
  border-top:0;
  padding:32px 0 110px;
}
.footer strong,
.footer a{color:#fff;}
.footer .note{color:rgba(255,255,255,.68);}


/* Contact page specific */
.contactTiles{
  display:grid;
  grid-template-columns:1fr 1fr 1.2fr;
  gap:18px;
  align-items:start;
}
.contactTiles .tile{height:auto;}
.tileButtons{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.tileList{margin:14px 0 0;padding-left:18px;color:var(--muted);line-height:1.7;font-size:14px;}
.tileList li{margin-bottom:4px;}

/* ===== Testimonials + Review/Image layout ===== */
.quotes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.quote{
  padding:16px;
  border-radius:20px;
  background:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 14px 36px rgba(15,23,42,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.quote:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(15,23,42,.12);
  border-color:rgba(15,23,42,.15);
}

.quote p{
  margin:0;
  line-height:1.65;
}

.quote p::before{
  content:"“";
  font-size:28px;
  font-weight:700;
  color:var(--yellow);
  margin-right:6px;
}

.quote .who{
  margin-top:10px;
  font-size:13px;
  font-weight:600;
  color:var(--navy);
}

.reviewActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
  margin-bottom:24px;
}

.reviewRowGap{
  margin-top:18px;
}

.reviewImageGap{
  margin-top:20px;
}

.googleReviewBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.googleLogo{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:0 0 auto;
}

.passGallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.passGallery img{
  width:100%;
  height:260px;
  object-fit:cover;
  object-position:center top;
  border-radius:20px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 14px 36px rgba(15,23,42,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}

.passGallery img:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(15,23,42,.12);
}


/* Reveal animations */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .65s ease, transform .65s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal.reveal-delay-1{transition-delay:.08s}
.reveal.reveal-delay-2{transition-delay:.16s}
.reveal.reveal-delay-3{transition-delay:.24s}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.is-visible{opacity:1;transform:none;transition:none;}
}

@media (max-width: 980px){
  .heroBannerInner{gap:24px;padding:34px 0 22px;}
  .heroTitle{max-width:12ch;font-size:clamp(34px, 8vw, 56px);}
  .heroCopy::before{font-size:11px;letter-spacing:.10em;}
  .availabilityBar{margin-top:-10px;}
  .contactTiles{grid-template-columns:1fr;}
}

@media (max-width: 760px){
  body{background:#f5f6f8;}
  .topbar{background:rgba(255,255,255,.92);}
  .menuBtn,.menuClose{background:rgba(255,255,255,.95);}
  .heroBanner{padding-top:8px;background:linear-gradient(180deg, #111827 0%, #171d2b 100%);}
  .heroBannerInner{padding:0;gap:14px;}
  .heroCopy{
    padding:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:none;
  }
  .heroCopy::before{margin-bottom:14px;}
  .heroTitle{font-size:42px;max-width:none;}
  .heroSub{font-size:15px;}
  .heroVisual{border-radius:22px;}
  .heroTrustInner{background:transparent;border:0;box-shadow:none;padding:4px 0 14px;}
  .trustTick{width:100%;justify-content:flex-start;}
  .availabilityBar{margin-top:0;padding-top:10px;}
  .availabilityInner{
    background:#111827;
    border-radius:22px;
    padding:14px;
    box-shadow:0 18px 40px rgba(15,23,42,.20);
  }
  .availLabel{margin-bottom:0;}
  .section{padding:30px 0;}
  .passGallery img{height:220px;}
  .quotes{grid-template-columns:1fr;}
  .quote{padding:18px;}
}


/* ===== FINAL LIGHT PREMIUM OVERRIDES ===== */
.btn.secondary{
  background:#fff;
  border-color:rgba(15,23,42,.12);
}

.heroBanner{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 14%, rgba(246,194,0,.18), transparent 22%),
    radial-gradient(circle at 12% 24%, rgba(16,24,40,.04), transparent 28%),
    linear-gradient(180deg, #fbfaf4 0%, #f7f7f4 56%, #f5f6f8 100%);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.heroBanner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(15,23,42,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15,23,42,.02) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.18), transparent 85%);
  pointer-events:none;
}
.heroBannerInner{
  position:relative;
  z-index:1;
  padding:40px 0 26px;
  gap:44px;
}
.heroCopy{max-width:620px;}
.heroCopy::before{
  content:"WEST LONDON • MANUAL & AUTOMATIC LESSONS";
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.82);
  color:rgba(15,23,42,.72);
  font-size:12px;
  letter-spacing:.14em;
  font-weight:700;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.heroTitle,
.heroBanner .heroCopy h1,
.heroBanner .heroCopy h2,
.heroBanner .heroCopy h3{
  color:#101828;
}
.heroTitle{
  font-size:clamp(36px, 4.2vw, 64px);
  line-height:1.05;
  max-width:9ch;
  margin-bottom:16px;
}
.heroSub{
  color:#415062;
  font-size:18px;
  max-width:58ch;
  margin-bottom:24px;
}
.heroVisual{
  border-radius:28px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  box-shadow:0 24px 60px rgba(15,23,42,.12);
}
.heroSlider{background:#eef1f4;}
.heroVisual img{object-position:center 30%;}
.heroTrust{
  position:relative;
  z-index:1;
  border-top:1px solid rgba(15,23,42,.06);
  background:transparent;
}
.heroTrustInner{
  padding:12px 0 18px;
  gap:12px;
}
.trustTick{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(15,23,42,.08);
  color:#334155;
  font-size:13px;
  box-shadow:0 10px 20px rgba(15,23,42,.04);
}
.tickMark{
  background:rgba(246,194,0,.16);
  border-color:rgba(246,194,0,.24);
  color:#111827;
}

.availabilityBar{
  position:relative;
  margin-top:-12px;
  padding-bottom:6px;
  background:transparent;
  border-bottom:0;
  z-index:2;
}
.availabilityInner{
  padding:14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  box-shadow:0 20px 48px rgba(15,23,42,.10);
}
.availLabel{
  min-width:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:16px;
  background:#101828;
  color:#fff;
  font-size:16px;
  font-weight:700;
}
.availForm .field{
  background:#fff;
  border-color:rgba(15,23,42,.10);
}
.availForm .btn.primary{min-width:120px;}

.section{padding:38px 0;}
.section:nth-of-type(even):not(.availabilityBar)::before{
  background:rgba(255,255,255,.55);
}
.trustItem,
.tile,
.quote{
  background:rgba(255,255,255,.92);
}
.tile:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 46px rgba(15,23,42,.10);
}
.icoDot{
  background:linear-gradient(180deg, rgba(246,194,0,.18), rgba(246,194,0,.08));
  border-color:rgba(246,194,0,.18);
}

.footer{
  background:linear-gradient(180deg, #151c29 0%, #101722 100%);
}

@media (max-width: 980px){
  .heroBannerInner{gap:26px;padding:34px 0 22px;}
  .heroTitle{max-width:11ch;font-size:clamp(36px, 8vw, 58px);}
  .heroCopy::before{font-size:11px;letter-spacing:.10em;}
  .availabilityBar{margin-top:-8px;}
}

@media (max-width: 760px){
  body{background:#f5f6f8;}
  .topbar{background:rgba(255,255,255,.94);}
  .heroBanner{
    padding-top:8px;
    background:
      radial-gradient(circle at 80% 12%, rgba(246,194,0,.16), transparent 24%),
      linear-gradient(180deg, #fbfaf4 0%, #f5f6f8 100%);
  }
  .heroBannerInner{padding:0;gap:14px;}
  .heroCopy{
    padding:18px;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    box-shadow:0 14px 36px rgba(15,23,42,.06);
  }
  .heroTitle{font-size:38px;max-width:none;}
  .heroSub{font-size:15px;color:#4b5563;}
  .heroVisual{border-radius:22px;}
  .heroTrustInner{
    background:transparent;
    border:0;
    box-shadow:none;
    padding:4px 0 14px;
  }
  .trustTick{width:100%;justify-content:flex-start;background:#fff;}
  .availabilityBar{margin-top:0;padding-top:10px;}
  .availabilityInner{
    background:#fff;
    border-radius:22px;
    padding:14px;
    box-shadow:0 18px 40px rgba(15,23,42,.10);
  }
  .availLabel{margin-bottom:0; width:100%;}

  .quotes{
    grid-template-columns:1fr;
  }

  .passGallery{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }

  .passGallery img{
    height:180px;
  }
}

.heroBannerInner{
  position: relative; /* already exists but ensure it’s there */
}

.heroBrandMark{
  position: absolute;

  /* anchor it to image area */
  top: 20px;
  left: calc(50% + 300px);
  transform: translateX(-50%);

  font-family: 'Poppins', sans-serif;
  font-weight: 700;

  font-size: 85px;              /* bigger */
  letter-spacing: 0.18em;

  color: var(--navy);

  z-index: 3;
  pointer-events: none;
  user-select: none;
}

/* Slight glow tint for modern feel */
.heroBrandMark::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(246,194,0,0.2), transparent 70%);
  filter: blur(40px);
  z-index: -1;
}

/* Mobile fix */
@media (max-width: 760px){
  .heroBrandMark{
    font-size: 40px;
    top: 0;
    right: 10px;
  }
}

@media (max-width: 1200px){
  .heroBrandMark{
    left: calc(50% + 230px);
    font-size: 30px;
  }
}

@media (max-width: 980px){
  .heroBrandMark{
    display: none;
  }
}

.reviewActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
  margin-bottom:24px;
}

.googleReviewBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.googleLogo{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:0 0 auto;
}

.passComingCard{
  max-width: 760px;
  margin: 0 auto;
  padding: 54px 28px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,250,250,.94));
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 22px 60px rgba(15,23,42,.10);
  border-radius: 28px;
  animation: passFadeUp .55s ease;
}

.passComingBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(246,194,0,.14);
  border: 1px solid rgba(246,194,0,.26);
  color: var(--navy);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.passComingTitle{
  margin: 0 0 12px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.02;
  color: var(--navy);
}

.passComingText{
  max-width: 560px;
  margin: 0 auto 24px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}

.passComingActions{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@keyframes passFadeUp{
  from{
    opacity: 0;
    transform: translateY(18px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px){
  .passComingCard{
    padding: 38px 18px;
    border-radius: 22px;
  }

  .passComingText{
    font-size: 15px;
  }

  .passComingActions{
    flex-direction: column;
  }

  .passComingActions .btn{
    width: 100%;
  }
}

.btn.ghost{
  background: transparent;
  border: none;
  color: var(--muted);
  font-weight: 600;
}

.btn.ghost:hover{
  color: var(--navy);
  text-decoration: underline;
}