:root{
  --bg:#05070a;            /* near pure black background */
  --card:#0d1117;          /* dark panels */
  --text:#f5f7fa;          /* main text */
  --muted:#9aa4b2;         /* softer paragraph text */
  --line:rgba(255,255,255,.06); /* subtle borders */
  --brand:#4da3ff;         /* accent blue */
  --brand2:#1f6feb;        /* deeper blue */
  --shadow: 0 12px 35px rgba(0,0,0,.65);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{color:inherit;text-decoration:none}
.container{width:min(1100px, 92vw); margin:0 auto}

/* ===== Header (stutter-free) ===== */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,.05);

  /* GPU-friendly */
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform .25s ease;

  overflow: visible;
}

/* Soft fade below header */
header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:22px;
  pointer-events:none;
  z-index:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent);
}

/* Move header up slightly on scroll */
header.shrink{
  transform: translate3d(0,-14px,0);
}

/* Layout stays centered */
.nav{
  position: relative;               /* IMPORTANT: anchor mobile dropdown */
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:flex-start;       /* avoids extra vertical centering space */
  gap:10px;
  padding-bottom: 8px;              /* keeps bottom tight */
}

/* Logo wrapper */
.brand{
  display:flex;
  justify-content:center;
  width:100%;
  margin-top: 8px; /* normal offset */
}

/* Logo shrink: transform only */
.brand img{
  height:70px; /* fixed */
  transform: translate3d(0,0,0) scale(1);
  transform-origin: center top;
  will-change: transform;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

/* Logo sits slightly lower in the shrink state */
header.shrink .brand img{
  transform: translate3d(0,12px,0) scale(0.82);
}

/* Menu stays centered */
.menu{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;

  transition: transform .25s ease;
  will-change: transform;
}

header.shrink .menu{
  transform: translate3d(0,-2px,0) scale(0.96);
  transform-origin: center top;
}

/* Menu links */
.menu a{
  position: relative;
  padding:8px 10px;
  border-radius:12px;
  color:#d1d5db;
  text-decoration:none;
  font-size: 0.95rem;
  transition: font-size .35s ease, background .2s ease, color .2s ease;
}

header.shrink .menu a{
  font-size: 0.9rem;
}

.menu a::after{
  content:"";
  position:absolute;
  left:10px;
  bottom:4px;
  width:0%;
  height:2px;
  background: linear-gradient(90deg, #c1121f, #780000);
  transition: width .3s ease;
}

.menu a:hover::after{
  width: calc(100% - 20px);
}

.menu a.active{
  background: rgba(193,18,31,.18);
  color: #ffffff;
  border: 1px solid rgba(193,18,31,.45);
}

.menu a.active::after{
  width: calc(100% - 20px);
}

/* =========================
   MOBILE HEADER TIGHTENING
   (stops header dropping too far)
========================= */
@media (max-width: 820px){

  /* tighter stacking so header doesn't feel tall */
  .nav{
    gap: 6px;
    padding-bottom: 6px;
  }

  .brand{
    margin-top: 6px;
  }

  /* If you have a menu button, keep it closer to logo */
  .nav-toggle{
    margin-top: 4px;
    margin-bottom: 0;
  }

  /*
    IMPORTANT:
    make the menu a dropdown overlay (NOT part of layout)
    so opening it does not make the header taller.
  */
  .menu{
    position: absolute;
    left: 50%;
    top: 100%;
    width: min(520px, 92vw);
    margin-top: 10px;

    /* overlay look */
    padding: 14px 14px;
    border-radius: 18px;
    background: rgba(5,7,10,.72);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);

    /* dropdown layout */
    display: flex;
    flex-direction: column;
    gap: 12px;

    /* CLOSED state */
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
    pointer-events: none;

    transition: opacity .18s ease, transform .18s ease;
  }

  /* OPEN state (your JS adds header.menu-open) */
  header.menu-open .menu{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
}
/* ===== HERO ===== */
.hero{
  position: relative;
  margin: 20px 0 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);

  height: 320px; /* keep your shorter hero */

  /* IMPORTANT: move image UP so we see more roof/top of car */
  background: url("../assets/hero.jpg") center 40% / cover no-repeat;
  background-clip: padding-box;
}

/* Even dark tint */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(0,0,0,.60);
}

/* Extra top/bottom shading (keeps edges consistent) */
.hero::after{
  content: "";
  position: absolute;
  inset: -1px;            /* tiny overdraw helps with 1px seams */
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.50) 0%,
    rgba(0,0,0,0) 22%,
    rgba(0,0,0,0) 78%,
    rgba(0,0,0,.50) 100%
  );
}

/* Content */
.hero-inner{
  position: relative;
  z-index: 1;

  height: 100%;
  width: min(780px, 92%);
  margin: 0 auto;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 6px;               /* tighter than before */
  padding: 10px 18px;     /* tighter top/bottom */
}

/* Tighten the kicker line */
.hero .kicker{
  margin: 0;
  line-height: 1.1;
}

/* Tighten the headline spacing */
.hero h1{
  margin: 0;
  line-height: 1.05;      /* makes headline block tighter */
}

/* Bring button closer */
.cta-row{
  margin-top: 2px;
}

/* Pills closer to button */
.hero-areas{
  margin-top: 2px;
  display: flex;
  gap: 8px;               /* slightly tighter horizontal spacing */
  justify-content: center;
  flex-wrap: wrap;
}

/* Optional: slightly smaller pills for tighter look */
.hero-areas .pill{
  padding: 5px 12px;
  font-size: .82rem;
}

/* Mobile */
@media (max-width: 900px){
  .hero{
    height: 260px;
    background-position: center 35%; /* keep car top visible on smaller screens */
  }

  .hero-inner{
    gap: 6px;
    padding: 10px 16px;
  }
}
/* ===== COVERAGE STRIP ===== */
.coverage-strip{
  margin: 26px 0 0;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  text-align: center;
}

.coverage-text{
  margin: 0 0 10px 0;
  font-size: 1rem;
  opacity: .9;
}

.coverage-pills{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pill{
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  background: rgba(193,18,31,.15);
  border: 1px solid rgba(193,18,31,.35);
  color: #fff;
}
.kicker{color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-size:.82rem}
h1{margin:10px 0 12px; font-size: clamp(2rem, 4vw, 3.1rem); line-height:1.1}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; justify-content:center;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
}
.btn:hover{background:rgba(255,255,255,.10)}
.btn.primary{
  background: linear-gradient(135deg, #c1121f, #780000);
  border:0;
  color:white;
  font-weight:600;
}
.btn.primary:hover{
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(193,18,31,.35);
}
section{margin:28px 0}
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: var(--shadow);
}
.card.pad{padding:22px}
h2{margin:0 0 10px; font-size:1.6rem}
p{margin:10px 0; color:var(--muted)}
ul{margin:12px 0 0; color:var(--muted)}
hr{border:0;border-top:1px solid var(--line); margin:16px 0}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.col-7{grid-column: span 7}
.col-5{grid-column: span 5}
@media (max-width: 900px){
  .col-7,.col-5{grid-column: span 12}
  .hero-inner{padding:34px 18px}
}

.gallery{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.gallery a, .gallery img{
  width:100%;
  display:block;
  border-radius:16px;
}
.gallery img{
  aspect-ratio: 4/3;
  object-fit: cover;
  border:1px solid var(--line);
  transition: transform .16s ease, filter .16s ease;
}
.gallery img:hover{transform: translateY(-2px); filter:brightness(1.05)}
@media (max-width: 900px){ .gallery{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 640px){ .gallery{grid-template-columns: repeat(2, 1fr)} }

.form{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
.form .full{grid-column: span 2}
label{font-size:.9rem; color:var(--muted)}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
textarea{min-height:130px; resize:vertical}
input:focus, textarea:focus{border-color: rgba(58,160,255,.55)}
small{color:var(--muted)}
@media (max-width: 700px){
  .form{grid-template-columns: 1fr}
  .form .full{grid-column: span 1}
}

.icon-row{
  display:flex;
  justify-content:center;  /* centers horizontally */
  align-items:center;
  gap:18px;                /* spacing between icons */
  flex-wrap:wrap;          /* wraps nicely on mobile */
  margin-top:18px;
}

.icon-chip{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.icon-chip img{height:22px; width:22px}
footer{
  margin:32px 0 40px;
  color:rgba(232,238,246,.7);
  text-align:center;
  font-size:.92rem;

}
.terms-title{
  text-align: center;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 28px;
  position: relative;
  text-shadow: 0 0 8px rgba(193,18,31,.35),
               0 0 18px rgba(193,18,31,.25);
}
.terms-title::after{
  content:"";
  display:block;
  margin:14px auto 0;
  width:120px;
  height:2px;
  border-radius:2px;
  background: linear-gradient(90deg, transparent, #c1121f, transparent);
  opacity:.7;
}

/* Privacy & Terms section heading styling */
.card h3{
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
  position: relative;
  padding-left: 16px;
}
.card h3::after{
  content:"";
  position:absolute;
  left:16px;
  bottom:-4px;
  width:50px;
  height:2px;
  background: linear-gradient(90deg, #c1121f, #780000);
  border-radius:2px;
}

/* Red accent underline */
.card h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:50px;
  height:2px;
  background: linear-gradient(90deg, #c1121f, #780000);
  border-radius:2px;
}
/* Style smaller clause numbers like 1.1, 2.3 etc */
.card p{
  margin-bottom: 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* Make leading clause numbers slightly lighter */
.card p strong{
  color: #c9d1d9;
  font-weight: 600;
}
.clause{
  font-weight:700;
  color:#ffffff;
  margin-right:6px;
  padding-left:8px;
  position:relative;
}

.clause::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:3px;
  height:14px;
  border-radius:2px;
  background: linear-gradient(180deg, #c1121f, #780000);
}
/* Center the special contact heading underline */
h3.contact-title{
  text-align:center;
  width:100%;
  position:relative;
}

h3.contact-title::after{
  content:"";
  position:relative;     /* override absolute positioning */
  display:block;
  margin:8px auto 0;     /* centers underline */
  left:auto;             /* cancel earlier left value */
  width:60px;
  height:2px;
  border-radius:2px;
  background: linear-gradient(90deg, #c1121f, #780000);
}
/* ===== Contact CTA Buttons (match BOOK NOW) ===== */
.icon-chip.cta-chip{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: linear-gradient(135deg, #c1121f, #780000);
  color: #ffffff;
  font-weight: 600;

  padding: 12px 18px;
  border-radius: 16px;
  text-decoration: none;

  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* ===== Contact CTA Buttons (subtle style) ===== */
.icon-chip.cta-chip{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: rgba(193,18,31,0.08); /* soft red tint instead of solid */
  color: #ffffff;
  font-weight: 600;

  padding: 12px 18px;
  border-radius: 16px;
  text-decoration: none;

  border: 1px solid rgba(193,18,31,0.25);
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

/* Keep original icon colours */
.icon-chip.cta-chip img{
  width: 22px;
  height: 22px;
  filter: none; /* removes forced white */
}

/* Subtle hover glow + lift */
.icon-chip.cta-chip:hover{
  background: rgba(193,18,31,0.14);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(193,18,31,.18);
}

/* Click press */
.icon-chip.cta-chip:active{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.store-buttons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:18px;
}

.store-badge{
  height:48px;      /* app badges size */
  width:auto;
  transition: transform .2s ease, filter .2s ease;
}

/* Slightly taller book images for balance */
.book-badge{
  height:70px;
  border-radius:6px;
}

.store-badge:hover,
.book-badge:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.store-grid{
  display:grid;
  grid-template-columns: repeat(2, auto);
  justify-content:center;
  align-items:center;
  gap:22px 32px;
  margin-top:24px;
}

/* Store badges (top row) */
.store-badge{
  height:50px;
  width:auto;
  transition: transform .2s ease, filter .2s ease;
}

/* App images (bottom row) */
.app-badge{
  height:80px;
  width:auto;
  border-radius:8px;
  transition: transform .2s ease, filter .2s ease;
}

.store-badge:hover,
.app-badge:hover{
  transform: translateY(-3px);
  filter: brightness(1.05);
}
.store-columns{
  display:flex;
  justify-content:center;
  gap:50px;
  margin-top:24px;
  flex-wrap:wrap;
}

.store-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

/* Store badges */
.store-badge{
  height:50px;
  width:auto;
}

/* App images */
.app-badge{
  height:80px;
  width:auto;
  border-radius:8px;
  transition: transform .2s ease, filter .2s ease;
}

.app-badge:hover,
.store-badge:hover{
  transform: translateY(-3px);
  filter: brightness(1.05);
}
/* Matches the screenshot layout */
.app-badges-wrap{
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 90px;                 /* space between left/right blocks */
  justify-items: center;
  align-items: start;
  margin: 28px auto 0;
  width: min(980px, 100%);
}

/* Each side (Google Play / App Store) */
.store-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;                 /* gap between badge and app icons */
}

/* Store badges */
.store-badge-img{
  height: 64px;              /* tweak to match your screenshot */
  width: auto;
  display: block;
}

/* Row of the two app icons */
.apps-row{
  display: flex;
  gap: 26px;                 /* space between Car Theory and Hazard */
  justify-content: center;
  align-items: center;
}

/* App icons */
.app-icon-img{
  height: 118px;             /* tweak to match your screenshot */
  width: 118px;
  border-radius: 26px;       /* roundness like the screenshot */
  display: block;
}

/* Optional: subtle hover lift (remove if you want EXACT static look) */
.store-badge-img:hover,
.app-icon-img:hover{
  transform: translateY(-2px);
  transition: transform .2s ease, filter .2s ease;
}

/* Mobile: stack the two blocks */
@media (max-width: 720px){
  .app-badges-wrap{
    grid-template-columns: 1fr;
    gap: 42px;
  }
}
/* Centered section title */
.center-title{
  text-align:center;
  margin: 28px 0 18px;
  position: relative;
}

/* Center the red underline for this heading */
.center-title::after{
  content:"";
  display:block;
  margin:8px auto 0;
  width:70px;
  height:2px;
  border-radius:2px;
  background: linear-gradient(90deg, #c1121f, #780000);
}
/* ===== DVSA APPS SECTION ===== */
/* ===== FORCE CENTERED UNDERLINE FOR DVSA TITLE ===== */
h3.dvsa-title{
  text-align: center !important;
  width: 100%;
  position: relative;
  padding-left: 0 !important;
}

/* Kill any inherited underline styles */
h3.dvsa-title::before{
  content: none !important;
}

h3.dvsa-title::after{
  content: "" !important;
  position: relative !important;   /* override absolute positioning */
  left: auto !important;           /* cancel left offsets */
  right: auto !important;
  display: block !important;
  margin: 8px auto 0 !important;   /* centers underline */
  width: 70px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #c1121f, #780000);
}
/* ===== DVSA APPS SECTION ===== */

/* Force centered red underline */

/* Layout wrapper */
.app-badges-wrap{
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 90px;
  justify-items: center;
  align-items: start;
  margin: 28px auto 0;
  width: min(980px, 100%);
}

/* Each column */
.store-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

/* Store badges */
.store-badge-img{
  height: 64px;
  width: auto;
}

/* Row of app icons */
.apps-row{
  display: flex;
  gap: 26px;
  justify-content: center;
  align-items: center;
}

/* App icons */
.app-icon-img{
  height: 118px;
  width: 118px;
  border-radius: 26px;
}

/* Subtle hover lift */
.store-badge-img:hover,
.app-icon-img:hover{
  transform: translateY(-2px);
  transition: transform .2s ease, filter .2s ease;
}

/* Mobile stacking */
@media (max-width: 720px){
  .app-badges-wrap{
    grid-template-columns: 1fr;
    gap: 42px;
  }
}
/* DVSA title uses the SAME size/style as other section titles */
.section-title.dvsa-title{
  text-align: center !important;
  width: 100%;
  padding-left: 0 !important;
}

/* Override default left-aligned underline */
.section-title.dvsa-title::before{
  content: none !important;
}

.section-title.dvsa-title::after{
  content: "" !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  display: block !important;
  margin: 10px auto 0 !important;
  width: 90px; /* same visual weight as others */
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #c1121f, #780000);
}
/* ===== Videos section ===== */

/* Optional: make this section wider so the 2 columns look bigger */
.video-section{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.video-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;              /* smaller gap = bigger cards */
  margin-top: 18px;
  width: 100%;
}

.video-card{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.video-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(193,18,31,.18);
}

/* Responsive 16:9 iframe */
.video-embed{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Stack on small screens */
@media (max-width: 720px){
  .video-grid{
    grid-template-columns: 1fr;
  }

  .video-section{
    max-width: 100%;
  }
}

/* ===== Books section (match screenshot) ===== */
.books-section{
  padding: 44px 0 10px;
}

.books-title{
  text-align: center;
  font-weight: 600;
  line-height: 1.15;
  margin: 8px 0 26px;
}

.books-subtitle{
  display: block;
  font-weight: 500;
  font-size: 2.2rem;
  opacity: 0.95;
  margin-top: 6px;
}

/* Desktop — 4 in a row */
.books-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  justify-items: center;
  align-items: end;
  margin-top: 18px;
}

/* Book cover sizing */
.book-cover{
  height: 360px;
  width: auto;
  display: block;
  border-radius: 6px;
  transition: transform .2s ease, filter .2s ease;
}

.book-link:hover .book-cover{
  transform: translateY(-4px);
  filter: brightness(1.03);
}

/* Tablet & Mobile — ALWAYS 2 x 2 layout */
@media (max-width: 1100px){
  .books-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }
  .book-cover{
    height: 320px;
  }
}

/* Smaller phones — still 2 per row, just smaller books */
@media (max-width: 560px){
  .book-cover{
    height: 260px;
  }
}

/* Shared centered red underline style */
.fancy-underline{
  text-align: center;
  position: relative;
  padding-left: 0 !important;
}

.fancy-underline::before{
  content: none !important; /* remove any default left underline */
}

.fancy-underline::after{
  content: "" !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  display: block;
  margin: 10px auto 0;
  width: 90px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #c1121f, #780000);
}
/* Floating Book Now button (hidden initially) */
.floating-book-btn{
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;

  padding: 14px 20px;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #c1121f, #780000);
  box-shadow: 0 12px 28px rgba(0,0,0,.4);

  transform: translateX(-120%);   /* hidden off-screen */
  opacity: 0;
  transition: transform .4s ease, opacity .3s ease, box-shadow .2s ease, filter .2s ease;
}

.floating-book-btn{
  position: fixed;
  bottom: 40px;          /* was 20px — now sits higher */
  left: 24px;
  z-index: 9999;

  padding: 18px 26px;    /* bigger button */
  font-size: 1.05rem;    /* slightly larger text */
  border-radius: 16px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #c1121f, #780000);
  box-shadow: 0 14px 32px rgba(0,0,0,.45);

  transform: translateX(-120%);
  opacity: 0;
  transition: transform .4s ease, opacity .3s ease, box-shadow .2s ease, filter .2s ease;
}

.floating-book-btn.show{
  transform: translateX(0);
  opacity: 1;
  animation: pulseOnce 0.6s ease-out; /* the one-time pulse on entry */
}

.floating-book-btn:hover{
  animation: hoverPulse 0.6s ease-in-out infinite;
  box-shadow: 0 18px 40px rgba(193,18,31,.35); /* red glow */
  filter: brightness(1.08);
}

.floating-book-btn:active{
  transform: translateX(0) translateY(-2px);
}
@media (max-width: 600px){
  .floating-book-btn{
    padding: 14px 18px;
    font-size: 0.95rem;
    bottom: 28px;
    left: 16px;
  }
}
@keyframes pulseOnce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* When button becomes visible */
.floating-book-btn.show{
  transform: translateX(0);
  opacity: 1;
  animation: pulseOnce 0.6s ease-out;
}
@keyframes hoverPulse {
  0%   { transform: translateX(0) translateY(-4px) scale(1); }
  50%  { transform: translateX(0) translateY(-4px) scale(1.06); }
  100% { transform: translateX(0) translateY(-4px) scale(1); }
}
/* ===== Contact header row (title + icons) ===== */
.contact-header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.contact-title{
  margin: 0;
  white-space: nowrap;
}

.contact-header-row .icon-row{
  margin: 0;
}

@media (max-width: 700px){
  .contact-header-row{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .contact-title{
    margin-bottom: 10px;
  }
}

/* ===== Contact form layout (2 columns like your screenshot) ===== */
.contact-form{
  display: flex;
  flex-direction: column;
  gap: 10px; /* tighter row spacing */
}

.form-row.two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px; /* tighter column spacing */
}

.form-row.one{
  display: block;
}

.form-field label{
  display: block;
  margin: 0 0 4px 0; /* tighter label gap */
}

/* Inputs + textarea fill their column */
.form-field input,
.form-field textarea{
  width: 100%;
  padding: 12px 14px; /* slightly tighter */
}

/* ===== Textarea styling (match inputs) ===== */
.contact-form textarea{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 140px;
  max-height: 240px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* ===== Focus + invalid styling ===== */
.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: #c1121f;
  box-shadow: 0 0 0 3px rgba(193,18,31,.25);
}

.contact-form input.invalid,
.contact-form textarea.invalid{
  border-color: #c1121f;
  box-shadow: 0 0 0 3px rgba(193,18,31,.25);
}

/* ===== Error messages (tight + consistent) ===== */
.contact-form .error-message{
  display: block;
  color: #ff4d4d;
  font-size: 0.8rem;
  min-height: 0;
  margin: 4px 0 8px 0;
}

.contact-form .error-message:empty{
  margin: 0 0 8px 0;
}

/* ===== Submit button ===== */
.contact-submit-btn{
  margin-top: 10px;
  padding: 14px 22px;
  border-radius: 14px;
  border: none;
  cursor: pointer;

  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #c1121f, #780000);
  box-shadow: 0 12px 28px rgba(0,0,0,.4);

  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.contact-submit-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(193,18,31,.35);
  filter: brightness(1.08);
}

.contact-submit-btn:active{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.45);
}

/* ===== Mobile: stack 2-column rows ===== */
@media (max-width: 720px){
  .form-row.two{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* =========================
   Pills (base + hero)
========================= */

/* Base pill style (used site-wide if needed) */
.pill{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(193,18,31,.35);
  background: rgba(193,18,31,.10);
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: .95rem;
}

/* Pills inside hero */
.hero-areas{
  margin-top: 18px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Make hero pills slightly stronger + clearer on the image */
.hero-areas .pill{
  padding: 6px 14px;
  font-size: .85rem;
  background: rgba(193,18,31,.22);
  border-color: rgba(193,18,31,.45);
  color: #fff;
  backdrop-filter: blur(4px);
}

/* =========================
   MOBILE NAV TOGGLE + MENU
========================= */

/* Hide toggle on desktop */
.nav-toggle{
  display: none;
}

/* MOBILE ONLY */
@media (max-width: 820px){

  /* Keep header stack tight + anchor dropdown */
  .nav{
    gap: 6px;
    padding-bottom: 6px;
    position: relative; /* anchors absolute dropdown */
  }

  .brand{
    margin-top: 6px;
  }

  /* --- Toggle button --- */
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 4px;
    margin-bottom: 0;

    padding: 10px 18px;
    border-radius: 16px;

    font-weight: 700;
    font-size: .98rem;
    color: #fff;

    background: rgba(193,18,31,.18);
    border: 1px solid rgba(193,18,31,.45);

    box-shadow: 0 8px 18px rgba(0,0,0,.35);
    cursor: pointer;
    position: relative;

    transition:
      transform .35s cubic-bezier(.22,.61,.36,1),
      box-shadow .25s ease,
      filter .25s ease,
      margin-top .35s cubic-bezier(.22,.61,.36,1),
      padding .35s cubic-bezier(.22,.61,.36,1),
      font-size .35s cubic-bezier(.22,.61,.36,1);
  }

  .nav-toggle:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(193,18,31,.22);
    filter: brightness(1.06);
  }

  /* Scrolled (header.shrink): smaller + closer to logo */
  header.shrink .nav-toggle{
    margin-top: 0;
    padding: 8px 16px;
    font-size: .90rem;
    transform: translateY(-2px) scale(.92);
  }

  /* Toggle underline OFF by default */
  .nav-toggle::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 42px;                /* smaller underline */
    height: 2px;
    border-radius: 2px;

    background: linear-gradient(90deg, #c1121f, #780000);
    opacity: 0;

    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .25s ease, opacity .25s ease;
  }

  /* Toggle underline ON only when menu is open */
  header.menu-open .nav-toggle::after{
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }

  /* =========================
     DROPDOWN MENU (absolute, animated)
  ========================= */
  .menu{
    position: absolute;
    left: 50%;
    top: 100%;
    width: min(520px, 92vw);
    margin-top: 10px;

    padding: 16px;
    border-radius: 18px;
    background: rgba(5,7,10,.72);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;

    /* CLOSED */
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
    pointer-events: none;

    transition: opacity .18s ease, transform .18s ease;
  }

  /* OPEN */
  header.menu-open .menu{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  /* =========================
     LINKS (uniform button sizing)
  ========================= */
  .menu a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    width: 100%;               /* ✅ uniform size in each grid cell */
    min-height: 64px;          /* ✅ top 4 same height */

    padding: 14px 12px;
    border-radius: 18px;

    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    text-decoration: none;

    background: rgba(193,18,31,.18);
    border: 1px solid rgba(193,18,31,.45);
    box-shadow: 0 8px 18px rgba(0,0,0,.35);

    position: relative;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }

  .menu a:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(193,18,31,.22);
    filter: brightness(1.06);
  }

  /* ✅ IMPORTANT:
     wrap the text in a span so underline can match TEXT width only */
  .menu a .link-text{
    position: relative;
    display: inline-block;
    padding-bottom: 6px; /* gives space for underline */
  }

  /* Underline (TEXT width only) */
  .menu a .link-text::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;

    width: 100%;              /* ✅ exactly the text width */
    height: 2px;
    border-radius: 2px;

    background: linear-gradient(90deg, #c1121f, #780000);
    opacity: 0;

    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .25s ease, opacity .25s ease;
  }

  .menu a.active .link-text::after{
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }

  /* 2x2x1 layout: last 2 items span full width + match each other */
  .menu a:nth-child(5),
  .menu a:nth-child(6){
    grid-column: span 2;
    min-height: 64px;         /* ✅ bottom 2 same height */
  }
}/* Remove old full-width underline from mobile dropdown links */
.menu a::after{
  display: none;
}/* Wrapper for text */
.menu a .link-text{
  position: relative;
  display: inline-block;
}

/* Underline (hidden by default) */
.menu a .link-text::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px; /* space below text */
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #c1121f, #780000);

  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .25s ease, opacity .25s ease;
}

/* Show underline on HOVER */
.menu a:hover .link-text::after{
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

/* Keep underline visible when ACTIVE page */
.menu a.active .link-text::after{
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}
.ticks{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.ticks li{
  margin: 10px 0;
  padding-left: 28px;
  position: relative;
  opacity: .95;
}

.ticks li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(193,18,31,.95);
  font-weight: 900;
}
.section-title{
  position: relative;
  padding-left: 0;
  text-align: center;
}

.section-title::after{
  content: "";
  display: block;
  width: 90px;
  height: 2px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #c1121f, #780000);
}.left-align{
  text-align: left;
}

.left-align::after{
  margin-left: 0;   /* ensures underline starts under text */
}