/* ==========================================================================
   GLASS RIPPLE CO. — MAIN STYLESHEET
   --------------------------------------------------------------------------
   COMPLETE REPLACEMENT VERSION

   QUICK FIND GUIDE:
   01. BRAND COLORS / GLOBAL SETTINGS
   02. RESET / BASE STYLES
   03. TYPOGRAPHY
   04. BUTTONS / TEXT LINKS
   05. NAVBAR / LOGO
   06. HERO
   07. WAVE DIVIDER
   08. SECTION HEADINGS
   09. SERVICES
   10. HOW IT WORKS
   11. ABOUT
   12. CINEMATIC BREAK
   13. TESTIMONIALS
   14. FAQ
   15. FINAL CTA
   16. FOOTER
   17. REVEAL ANIMATIONS
   18. ACCESSIBILITY / REDUCED MOTION
   19. TABLET RESPONSIVE
   20. MOBILE RESPONSIVE
   21. SMALL MOBILE RESPONSIVE
   22. FEATURED BOOKING BUTTON
   ========================================================================== */


/* ==========================================================================
   01. BRAND COLORS / GLOBAL SETTINGS
   --------------------------------------------------------------------------
   EDIT HERE:
   - Brand colors
   - Site width
   - Corner radius
   - Navbar height
   - Shared animation speed
   ========================================================================== */

:root {

  /* ================= DARK COLORS ================= */

  --midnight: #0B0B0D;
  --graphite: #1A1B1F;
  --slate: #2B2E33;


  /* ================= LIGHT COLORS ================= */

  --ivory: #F1ECE4;
  --taupe: #D7CDC0;
  --light-gray: #E7E2DA;


  /* ================= ACCENT COLORS ================= */

  --copper: #C78456;
  --bronze: #B89A72;


  /* ================= SECONDARY TEXT ================= */

  --muted: #9A938A;


  /* ================= SHARED BORDER / SHADOW ================= */

  --border: rgba(241, 236, 228, 0.10);

  --shadow:
    0 26px 80px rgba(0, 0, 0, 0.30);


  /* ================= CONTENT WIDTH ================= */

  --container: 1180px;


  /* ================= CORNER ROUNDING ================= */

  --radius-sm: 4px;
  --radius-md: 8px;


  /* ================= NAVBAR HEIGHT ================= */

  --header-height: 86px;


  /* ================= STANDARD TRANSITION ================= */

  --transition:
    260ms cubic-bezier(.22, .61, .36, 1);
}



/* ==========================================================================
   02. RESET / BASE STYLES
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;

  /*
     Prevent anchor links from hiding underneath
     the fixed navbar.
  */
  scroll-padding-top:
    calc(var(--header-height) + 12px);
}


body {
  margin: 0;

  background: var(--midnight);
  color: var(--ivory);

  font-family: "Inter", sans-serif;

  line-height: 1.65;
  letter-spacing: 0.002em;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  overflow-x: hidden;
}


/* Prevent page scrolling while mobile menu is open */
body.menu-open {
  overflow: hidden;
}


/* Responsive images */
img {
  display: block;
  max-width: 100%;
}


/* Remove default link styling */
a {
  color: inherit;
  text-decoration: none;
}


/* Make buttons/forms inherit site typography */
button,
input,
textarea,
select {
  font: inherit;
}


/* Copper text selection */
::selection {
  background: var(--copper);
  color: var(--midnight);
}


/* Main centered page container */
.container {
  width:
    min(
      var(--container),
      calc(100% - 48px)
    );

  margin-inline: auto;
}


/* Standard section spacing */
.section {
  padding: 128px 0;
}



/* ==========================================================================
   03. TYPOGRAPHY
   --------------------------------------------------------------------------
   EDIT HERE:
   - Heading sizes
   - Weight
   - Letter spacing
   - Eyebrow labels
   ========================================================================== */

h1,
h2,
h3 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  line-height: 1.06;

  letter-spacing: -0.028em;

  text-wrap: balance;
}


/* Main hero heading */
h1 {
  font-size:
    clamp(
      3rem,
      7vw,
      6.5rem
    );

  font-weight: 500;
}


/* Major section headings */
h2 {
  font-size:
    clamp(
      2.35rem,
      4.2vw,
      4.35rem
    );

  font-weight: 500;
}


/* Smaller headings */
h3 {
  font-size:
    clamp(
      1.2rem,
      1.7vw,
      1.55rem
    );

  font-weight: 500;
}


/* Standard paragraphs */
p {
  margin: 0;
  color: var(--taupe);
}


/* Small uppercase heading above sections */
.eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 22px;

  color: var(--light-gray);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.69rem;
  font-weight: 600;

  letter-spacing: 0.21em;

  text-transform: uppercase;
}


/* Copper eyebrow variation */
.eyebrow.copper {
  color: var(--copper);
}



/* ==========================================================================
   04. BUTTONS / TEXT LINKS
   --------------------------------------------------------------------------
   Shared button styling.
   ========================================================================== */

.button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 50px;

  padding: 0 28px;

  border:
    1px solid transparent;

  border-radius:
    var(--radius-sm);

  font-size: 0.83rem;
  font-weight: 600;

  letter-spacing: 0.045em;

  cursor: pointer;

  transition:
    transform var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition);
}


/* Standard button lift */
.button:hover {
  transform: translateY(-2px);
}


/* Small navbar button */
.button-sm {
  min-height: 42px;

  padding:
    0 20px;
}


/* ================= COPPER BUTTON ================= */

.button-copper {
  background: var(--copper);
  color: #110F0D;

  box-shadow:
    0 10px 30px
    rgba(199, 132, 86, 0.12);
}


.button-copper:hover {
  background: #D08B5E;

  box-shadow:
    0 13px 34px
    rgba(199, 132, 86, 0.18);
}


/* ================= DARK BUTTON ================= */

.button-dark {
  background: var(--midnight);
  color: var(--ivory);
}


.button-dark:hover {
  background: var(--graphite);
}


/* ================= GLASS / GHOST BUTTON ================= */

.button-ghost {
  border-color:
    rgba(241, 236, 228, 0.28);

  background:
    rgba(11, 11, 13, 0.24);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}


.button-ghost:hover {
  border-color:
    rgba(241, 236, 228, 0.52);

  background:
    rgba(241, 236, 228, 0.055);
}


/* ================= COPPER OUTLINE BUTTON ================= */

.button-outline {
  border-color:
    rgba(199, 132, 86, 0.42);

  color: var(--ivory);
}


.button-outline:hover {
  border-color:
    var(--copper);

  background:
    rgba(199, 132, 86, 0.07);
}


/* ================= TEXT LINKS ================= */

.text-link {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--ivory);

  font-size: 0.84rem;
  font-weight: 600;

  letter-spacing: 0.025em;

  cursor: pointer;
}


.text-link span {
  color: var(--copper);

  transition:
    transform var(--transition);
}


.text-link:hover span {
  transform:
    translate(3px, -3px);
}


.text-link.large {
  font-size: 0.95rem;
}


/* Allows a button to visually behave like a text link */
.text-button {
  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;
}



/* ==========================================================================
   05. NAVBAR / LOGO
   --------------------------------------------------------------------------
   Stable desktop + mobile navigation.

   IMPORTANT:
   - Desktop navigation always stays visible.
   - Mobile menu always covers the viewport.
   - Mobile menu content is explicitly placed above its background.
   - No backdrop-filter is applied to the parent header.
   ========================================================================== */


/* ================= SITE HEADER ================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: var(--header-height);

  z-index: 1000;

  background: transparent;

  border-bottom: 1px solid transparent;

  /*
     IMPORTANT:
     Do NOT put backdrop-filter here.
     It causes issues with the fixed mobile menu.
  */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transition:
    background-color 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease;
}


/* ================= SCROLLED HEADER ================= */

.site-header.scrolled {
  /*
     Slight transparency without backdrop-filter.
     Much more reliable across Chrome / Opera / Safari.
  */
  background: rgba(11, 11, 13, 0.94);

  border-color: rgba(241, 236, 228, 0.08);

  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.14);
}


/* ================= NAVBAR LAYOUT ================= */

.navbar {
  position: relative;

  width: min(
    var(--container),
    calc(100% - 48px)
  );

  height: 100%;

  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ==========================================================================
   LOGO
   ========================================================================== */

.brand {
  position: relative;

  z-index: 3200;

  display: inline-flex;
  align-items: center;

  flex-shrink: 0;
}


.brand-logo {
  display: block;

  width: 200px;
  max-height: 67px;

  object-fit: contain;
  object-position: left center;

  transition:
    opacity var(--transition),
    transform var(--transition);
}


.brand:hover .brand-logo {
  opacity: 0.92;

  transform: translateY(-1px);
}


.footer-logo {
  width: 165px;
  max-height: 58px;
}


/* ==========================================================================
   DESKTOP NAVIGATION
   ========================================================================== */

.nav-menu {
  /*
     Explicit desktop state.
  */
  position: static;

  display: flex;
  align-items: center;

  gap: 30px;

  width: auto;
  height: auto;

  padding: 0;

  background: transparent;

  opacity: 1;
  visibility: visible;

  transform: none;

  overflow: visible;
}


/* ================= NAV LINKS ================= */

.nav-link {
  position: relative;

  display: inline-block;

  color: var(--taupe);

  font-size: 0.82rem;

  opacity: 1;
  visibility: visible;

  transition:
    color var(--transition);
}


.nav-link::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 100%;
  height: 1px;

  background: var(--copper);

  transform: scaleX(0);

  transform-origin: right;

  transition:
    transform var(--transition);
}


.nav-link:hover,
.nav-link.active {
  color: var(--ivory);
}


.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);

  transform-origin: left;
}


/* ==========================================================================
   HAMBURGER
   Hidden by default on desktop.
   ========================================================================== */

.nav-toggle {
  display: none;

  position: relative;

  width: 44px;
  height: 44px;

  padding: 10px;

  border: 0;

  background: transparent;

  cursor: pointer;
}


.nav-toggle span {
  display: block;

  width: 100%;
  height: 1px;

  margin: 6px 0;

  background: var(--ivory);

  transition:
    transform var(--transition),
    opacity var(--transition);
}


/* Hamburger → X */

.nav-toggle.active span:nth-child(1) {
  transform:
    translateY(7px)
    rotate(45deg);
}


.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}


.nav-toggle.active span:nth-child(3) {
  transform:
    translateY(-7px)
    rotate(-45deg);
}



/* ==========================================================================
   MOBILE / TABLET NAVIGATION
   ========================================================================== */

@media (max-width: 980px) {


  /* ================= HAMBURGER ================= */

  .nav-toggle {
    display: block;

    position: relative;

    /*
       Must remain above menu overlay.
    */
    z-index: 5001;
  }



  /* ================= MOBILE MENU ================= */

  .nav-menu {
    position: fixed;

    /*
       Always covers the entire viewport.
    */
    inset: 0;

    width: 100vw;

    height: 100vh;
    height: 100dvh;

    min-height: 100vh;


    /*
       Mobile menu spacing.
    */
    padding:
      120px
      max(24px, calc((100vw - var(--container)) / 2))
      42px;


    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 26px;


    /*
       Premium translucent black background.
    */
    background:
      rgba(8, 8, 10, 0.93);


    /*
       Blur page behind menu.
       Safe because it is applied to nav-menu itself,
       not its fixed parent.
    */
    backdrop-filter:
      blur(16px)
      saturate(105%);

    -webkit-backdrop-filter:
      blur(16px)
      saturate(105%);


    /*
       Important stacking layer.
    */
    z-index: 5000;


    /*
       CLOSED STATE
    */
    transform:
      translateX(100%);

    opacity: 0;

    visibility: hidden;


    overflow-y: auto;

    overscroll-behavior: contain;


    transition:
      transform
      400ms
      cubic-bezier(.16, 1, .3, 1),

      opacity
      280ms
      ease,

      visibility
      0s
      linear
      400ms;
  }



  /* ================= MENU OPEN ================= */

  .nav-menu.open {
    transform:
      translateX(0);

    opacity: 1;

    visibility: visible;

    transition:
      transform
      400ms
      cubic-bezier(.16, 1, .3, 1),

      opacity
      280ms
      ease,

      visibility
      0s;
  }



  /* =========================================================
     CRITICAL FIX — MENU CONTENT

     Explicitly keeps every menu element above the dark panel.

     This is the part that addresses the EMPTY menu you're
     currently seeing.
     ========================================================= */

  .nav-menu > * {
    position: relative;

    z-index: 5002;

    opacity: 1;

    visibility: visible;
  }



  /* ================= MOBILE NAV LINKS ================= */

  .nav-menu .nav-link {
    display: inline-block;

    color: var(--ivory);

    font-family:
      "Montserrat",
      sans-serif;

    font-size:
      clamp(
        1.65rem,
        6vw,
        2.5rem
      );

    font-weight: 500;

    line-height: 1.15;

    opacity: 1;

    visibility: visible;
  }



  /* ================= ACTIVE UNDERLINE ================= */

  .nav-menu .nav-link::after {
    bottom: -7px;

    height: 1px;

    background: var(--copper);

    opacity: 0.85;
  }



  /* ================= MOBILE SESSION BUTTON ================= */

  .nav-menu .button {
    position: relative;

    z-index: 5002;

    display: inline-flex;

    margin-top: 18px;

    opacity: 1;

    visibility: visible;
  }

}
/* ==========================================================================
   06. HERO SECTION
   ========================================================================== */

.hero {
  position: relative;

  min-height: 100svh;

  display: grid;

  align-items: center;

  overflow: hidden;
}


/* Shared image setup */
.hero-media,
.cinematic-media {
  position: absolute;

  inset: -6%;

  background-size: cover;
  background-position: center;

  will-change: transform;
}



/* ================= HERO IMAGE =================
   EDIT THIS FILE PATH TO REPLACE HERO IMAGE.
   ============================================== */

.hero-media {
  background-image:
    url("Images/HeroImage.png");

  filter:
    saturate(0.68)
    contrast(1.04)
    brightness(0.94);
}



/* ================= HERO OVERLAY ================= */

.hero-overlay {
  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      90deg,
      rgba(11, 11, 13, 0.92) 0%,
      rgba(11, 11, 13, 0.67) 43%,
      rgba(11, 11, 13, 0.28) 75%,
      rgba(11, 11, 13, 0.48) 100%
    ),

    linear-gradient(
      180deg,
      rgba(11, 11, 13, 0.14) 0%,
      rgba(11, 11, 13, 0.16) 60%,
      rgba(11, 11, 13, 0.84) 100%
    );
}



/* ================= DECORATIVE GLOW ================= */

.hero-glow {
  position: absolute;

  border-radius: 50%;

  filter:
    blur(90px);

  opacity: 0.14;

  pointer-events: none;
}


.hero-glow-one {
  width: 420px;
  height: 420px;

  left: -140px;
  bottom: 5%;

  background:
    var(--copper);
}


.hero-glow-two {
  width: 280px;
  height: 280px;

  right: 2%;
  top: 18%;

  background:
    var(--bronze);

  opacity: 0.065;
}



/* ================= HERO CONTENT ================= */

.hero-content {
  position: relative;

  z-index: 2;

  padding-top:
    calc(
      var(--header-height)
      + 72px
    );

  padding-bottom:
    120px;
}


.hero-content h1 {
  max-width: 920px;
}


.hero-content h1 span {
  color:
    var(--taupe);
}


.hero-copy {
  max-width: 700px;

  margin-top: 30px;

  color:
    rgba(
      241,
      236,
      228,
      0.76
    );

  font-size:
    clamp(
      1.02rem,
      1.5vw,
      1.18rem
    );

  line-height: 1.78;
}


.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 38px;
}



/* ================= TRUST ROW ================= */

.trust-row {
  display: flex;

  flex-wrap: wrap;

  gap:
    16px
    34px;

  max-width: 880px;

  margin-top: 64px;

  padding-top: 22px;

  border-top:
    1px solid
    rgba(241, 236, 228, 0.12);

  color:
    rgba(241, 236, 228, 0.70);

  font-size: 0.77rem;

  letter-spacing: 0.025em;
}


.trust-row > div {
  display: flex;

  align-items: center;

  gap: 9px;
}


.trust-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--copper);

  box-shadow:
    0 0 0 4px
    rgba(199, 132, 86, 0.09);
}



/* ================= SCROLL INDICATOR ================= */

.scroll-indicator {
  position: absolute;

  z-index: 3;

  right:
    clamp(
      24px,
      4vw,
      70px
    );

  bottom: 46px;

  display: flex;

  align-items: center;

  gap: 14px;

  transform:
    rotate(90deg);

  transform-origin:
    right bottom;

  color:
    rgba(241, 236, 228, 0.50);

  font-size: 0.62rem;

  letter-spacing: 0.20em;

  text-transform: uppercase;
}


.scroll-line {
  position: relative;

  width: 44px;
  height: 1px;

  overflow: hidden;

  background:
    rgba(241, 236, 228, 0.32);
}


.scroll-line::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    var(--copper);

  transform:
    translateX(-100%);

  animation:
    scrollPulse
    2.4s
    ease-in-out
    infinite;
}


@keyframes scrollPulse {

  50%,
  100% {
    transform:
      translateX(100%);
  }

}



/* ==========================================================================
   07. WAVE DIVIDER
   ========================================================================== */

.wave-divider {
  position: relative;

  z-index: 3;

  height: 86px;

  margin-top: -1px;
}


.wave-divider svg {
  display: block;

  width: 100%;
  height: 100%;
}


.wave-divider-dark {
  background: transparent;
}


.wave-divider-dark path {
  fill: var(--midnight);
}



/* ==========================================================================
   08. SHARED SECTION HEADINGS
   ========================================================================== */

.section-heading {
  max-width: 760px;

  margin-bottom: 62px;
}


.section-heading h2 {
  margin-bottom: 20px;
}


.section-heading p:not(.eyebrow) {
  max-width: 650px;

  font-size: 0.98rem;

  line-height: 1.75;
}


.section-heading.centered {
  margin-inline: auto;

  text-align: center;
}


.section-heading.centered p:not(.eyebrow) {
  margin-inline: auto;
}



/* ==========================================================================
   09. SERVICES SECTION
   ========================================================================== */

.services-section {
  background:
    var(--midnight);

  padding-top: 72px;
}


.service-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 18px;
}



/* ================= SERVICE CARD ================= */

.service-card {
  position: relative;

  min-height: 430px;

  padding: 34px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(43, 46, 51, 0.56),
      rgba(26, 27, 31, 0.72)
    );

  border:
    1px solid
    rgba(241, 236, 228, 0.09);

  border-radius:
    var(--radius-md);

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, 0.14);

  transition:
    transform
    360ms
    cubic-bezier(.2, .7, .2, 1),

    border-color
    360ms
    ease,

    box-shadow
    360ms
    ease;
}


.service-card::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at top left,
      rgba(199, 132, 86, 0.09),
      transparent 46%
    );

  opacity: 0;

  transition:
    opacity 360ms ease;
}


.service-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(199, 132, 86, 0.27);

  box-shadow:
    var(--shadow);
}


.service-card:hover::before {
  opacity: 1;
}


.service-card > * {
  position: relative;

  z-index: 1;
}



/* ================= SERVICE ICON ================= */

.service-icon {
  width: 52px;
  height: 52px;

  display: grid;

  place-items: center;

  margin-bottom: 72px;

  border:
    1px solid
    rgba(199, 132, 86, 0.25);

  border-radius: 50%;
}


.service-icon svg {
  width: 27px;
  height: 27px;

  fill: none;

  stroke:
    var(--copper);

  stroke-width: 1.2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.card-number {
  position: absolute;

  top: 32px;
  right: 32px;

  color:
    rgba(241, 236, 228, 0.20);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.70rem;

  letter-spacing: 0.14em;
}


.service-card h3 {
  margin-bottom: 18px;
}


.service-card p {
  margin-bottom: 28px;

  font-size: 0.90rem;

  line-height: 1.72;
}


.service-card .text-link {
  margin-top: auto;
}



/* ==========================================================================
   10. HOW IT WORKS / PROCESS SECTION
   ========================================================================== */

.process-section {
  background:
    var(--graphite);

  border-block:
    1px solid
    rgba(241, 236, 228, 0.045);
}


.process-grid {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 36px;
}


.process-line {
  position: absolute;

  top: 30px;
  left: 6%;
  right: 6%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(199, 132, 86, 0.34),
      transparent
    );
}


.process-step {
  position: relative;

  padding-top: 4px;

  text-align: center;
}


.step-number {
  position: relative;

  z-index: 2;

  display: inline-grid;

  place-items: center;

  width: 54px;
  height: 54px;

  margin-bottom: 26px;

  background:
    var(--graphite);

  border:
    1px solid
    rgba(199, 132, 86, 0.38);

  border-radius: 50%;

  color:
    var(--copper);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.70rem;

  letter-spacing: 0.10em;
}


.process-step h3 {
  margin-bottom: 12px;

  font-size: 1.03rem;

  letter-spacing: -0.01em;
}


.process-step p {
  max-width: 230px;

  margin-inline: auto;

  font-size: 0.84rem;

  line-height: 1.7;
}



/* ==========================================================================
   11. ABOUT / WHY GLASS RIPPLE
   ========================================================================== */

.about-section {
  background:
    var(--midnight);
}


.about-grid {
  display: grid;

  grid-template-columns:
    1.05fr
    0.95fr;

  align-items: center;

  gap:
    clamp(
      54px,
      8vw,
      110px
    );
}


.about-image-wrap {
  position: relative;
}



/* ================= ABOUT IMAGE ================= */

.about-image {
  min-height: 540px;

  aspect-ratio: 4 / 5;

  background:

    linear-gradient(
      180deg,
      rgba(11, 11, 13, 0.04),
      rgba(11, 11, 13, 0.42)
    ),

    url(
      "https://images.unsplash.com/photo-1627924531443-5a3261bcac81?auto=format&fit=crop&w=1600&q=86"
    )
    center / cover;

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--shadow);
}



/* ================= IMAGE BADGE ================= */

.image-badge {
  position: absolute;

  right: -28px;
  bottom: 36px;

  width:
    min(
      290px,
      72%
    );

  padding:
    22px 24px;

  background:
    rgba(26, 27, 31, 0.84);

  border:
    1px solid
    rgba(241, 236, 228, 0.10);

  border-radius:
    var(--radius-sm);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  box-shadow:
    0 20px 50px
    rgba(0, 0, 0, 0.28);
}


.badge-label {
  display: block;

  margin-bottom: 7px;

  color:
    var(--copper);

  font-size: 0.65rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}


.image-badge strong {
  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.93rem;

  font-weight: 500;

  line-height: 1.45;
}



/* ================= ABOUT COPY ================= */

.about-copy h2 {
  margin-bottom: 24px;
}


.about-copy > p:not(.eyebrow) {
  margin-bottom: 18px;
}


.about-copy .lead {
  color:
    var(--light-gray);

  font-size: 1.10rem;

  line-height: 1.72;
}



/* ================= FEATURE LIST ================= */

.feature-list {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    16px
    24px;

  margin:
    34px 0 38px;
}


.feature-list > div {
  display: flex;

  align-items: center;

  gap: 11px;

  color:
    var(--light-gray);

  font-size: 0.84rem;
}


.check {
  color:
    var(--copper);

  font-size: 0.8rem;
}



/* ==========================================================================
   12. CINEMATIC BREAK
   ========================================================================== */

.cinematic-break {
  position: relative;

  min-height: 620px;

  display: grid;

  place-items: center;

  overflow: hidden;
}



/* ================= CINEMATIC IMAGE ================= */

.cinematic-media {
  background-image:
    url(
      "Images/ridebetterdrivesmarterbackground.png"
    );

  filter:
    saturate(0.60)
    contrast(1.05)
    brightness(0.92);
}


.cinematic-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(11, 11, 13, 0.70),
      rgba(11, 11, 13, 0.50) 45%,
      rgba(11, 11, 13, 0.80)
    );
}


.cinematic-content {
  position: relative;

  z-index: 2;

  width:
    min(
      900px,
      calc(100% - 48px)
    );

  text-align: center;
}


.cinematic-content h2 {
  font-size:
    clamp(
      2.8rem,
      6vw,
      6rem
    );

  font-weight: 500;

  text-shadow:
    0 8px 30px
    rgba(0, 0, 0, 0.24);
}


.cinematic-content p:not(.eyebrow) {
  margin-top: 18px;

  color:
    rgba(241, 236, 228, 0.78);

  font-size: 1rem;

  letter-spacing: 0.05em;
}



/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */

.testimonials-section {
  background:
    var(--graphite);
}


.testimonial-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;
}


.testimonial-card {
  position: relative;

  margin: 0;

  padding: 34px;

  overflow: hidden;

  background:
    rgba(11, 11, 13, 0.42);

  border:
    1px solid
    rgba(241, 236, 228, 0.09);

  border-radius:
    var(--radius-md);
}


/* Fine copper accent */
.testimonial-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 34px;

  width: 38px;
  height: 1px;

  background:
    rgba(199, 132, 86, 0.65);
}


.stars {
  color:
    var(--bronze);

  font-size: 0.67rem;

  letter-spacing: 0.19em;

  opacity: 0.80;
}


.testimonial-card blockquote {
  margin:
    26px 0 28px;

  color:
    var(--ivory);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.78;
}


.testimonial-card figcaption {
  color:
    var(--muted);

  font-size: 0.72rem;

  letter-spacing: 0.10em;

  text-transform: uppercase;
}



/* ==========================================================================
   14. FAQ
   ========================================================================== */

.faq-section {
  background:
    var(--midnight);
}


.faq-grid {
  display: grid;

  grid-template-columns:
    0.78fr
    1.22fr;

  gap:
    clamp(
      54px,
      8vw,
      110px
    );

  align-items: start;
}


.faq-intro {
  position: sticky;

  top:
    calc(
      var(--header-height)
      + 38px
    );
}


.faq-intro h2 {
  margin-bottom: 20px;
}


.faq-intro p:not(.eyebrow) {
  max-width: 430px;

  margin-bottom: 32px;
}


.faq-list {
  border-top:
    1px solid
    var(--border);
}


.faq-item {
  border-bottom:
    1px solid
    var(--border);
}


.faq-question {
  width: 100%;

  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 24px;

  padding:
    24px 0;

  border: 0;

  background:
    transparent;

  color:
    var(--ivory);

  text-align: left;

  cursor: pointer;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.98rem;
  font-weight: 500;

  transition:
    color var(--transition);
}


.faq-question:hover {
  color:
    var(--taupe);
}



/* ================= FAQ PLUS ICON ================= */

.faq-icon {
  width: 30px;
  height: 30px;

  display: grid;

  place-items: center;

  flex:
    0 0 30px;

  border:
    1px solid
    rgba(199, 132, 86, 0.28);

  border-radius: 50%;

  color:
    var(--copper);

  font-size: 1.2rem;

  line-height: 1;

  transition:
    transform var(--transition),
    background-color var(--transition),
    border-color var(--transition);
}


.faq-question[aria-expanded="true"] .faq-icon {
  transform:
    rotate(45deg);

  background:
    rgba(199, 132, 86, 0.07);

  border-color:
    rgba(199, 132, 86, 0.48);
}



/* ================= FAQ ANSWER ================= */

.faq-answer {
  display: grid;

  grid-template-rows:
    0fr;

  transition:
    grid-template-rows
    330ms
    ease;
}


.faq-answer > p {
  overflow: hidden;

  padding-right: 56px;

  font-size: 0.89rem;

  line-height: 1.74;
}


.faq-item.open .faq-answer {
  grid-template-rows:
    1fr;
}


.faq-item.open .faq-answer > p {
  padding-bottom: 26px;
}



/* ==========================================================================
   15. FINAL CTA
   ========================================================================== */

.final-cta {
  position: relative;

  overflow: hidden;

  padding:
    116px 0;

  background:
    linear-gradient(
      135deg,
      #D7CDC0 0%,
      #E1D8CC 100%
    );

  color:
    var(--midnight);
}



/* Decorative circular rings */
.final-cta-accent {
  position: absolute;

  right: -120px;
  top: -160px;

  width: 500px;
  height: 500px;

  border:
    1px solid
    rgba(11, 11, 13, 0.10);

  border-radius: 50%;

  box-shadow:
    0 0 0 70px
      rgba(11, 11, 13, 0.022),

    0 0 0 150px
      rgba(11, 11, 13, 0.017);
}


.final-cta-inner {
  position: relative;

  z-index: 1;

  max-width: 850px;

  text-align: center;
}


.final-cta .eyebrow {
  color:
    rgba(11, 11, 13, 0.62);
}


.final-cta h2 {
  margin-bottom: 22px;
}


.final-cta p:not(.eyebrow) {
  max-width: 640px;

  margin:
    0 auto 34px;

  color:
    rgba(11, 11, 13, 0.66);

  font-size: 1rem;
}



/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.site-footer {
  padding:
    66px 0 28px;

  background:
    #08080A;

  border-top:
    1px solid
    rgba(241, 236, 228, 0.055);
}


.footer-grid {
  display: grid;

  grid-template-columns:
    1.4fr
    0.7fr
    0.9fr;

  gap: 60px;
}


.footer-brand p {
  max-width: 360px;

  margin-top: 18px;

  font-size: 0.78rem;

  line-height: 1.65;
}


.footer-links,
.footer-contact {
  display: grid;

  align-content: start;

  gap: 12px;
}


.footer-links a,
.footer-contact a,
.footer-contact span {
  color:
    var(--muted);

  font-size: 0.78rem;

  letter-spacing: 0.02em;

  transition:
    color var(--transition);
}


.footer-links a:hover,
.footer-contact a:hover {
  color:
    var(--ivory);
}


.footer-bottom {
  display: flex;

  justify-content: space-between;

  gap: 24px;

  margin-top: 58px;

  padding-top: 24px;

  border-top:
    1px solid
    rgba(241, 236, 228, 0.075);

  color:
    #6E6963;

  font-size: 0.68rem;

  letter-spacing: 0.02em;
}



/* ==========================================================================
   17. REVEAL ANIMATIONS
   ========================================================================== */

.reveal {
  opacity: 0;

  transform:
    translateY(18px);

  transition:
    opacity
    820ms
    cubic-bezier(.2, .7, .2, 1),

    transform
    820ms
    cubic-bezier(.2, .7, .2, 1);
}


.reveal.visible {
  opacity: 1;

  transform:
    translateY(0);
}


.delay-1 {
  transition-delay: 90ms;
}


.delay-2 {
  transition-delay: 180ms;
}


.delay-3 {
  transition-delay: 270ms;
}



/* ==========================================================================
   18. ACCESSIBILITY / REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }


  .reveal {
    opacity: 1;

    transform: none;
  }


  .hero-media,
  .cinematic-media {
    transform:
      none !important;
  }

}



/* ==========================================================================
   19. TABLET / SMALL LAPTOP — 980px AND BELOW
   --------------------------------------------------------------------------
   IMPORTANT:
   This section contains layout changes ONLY.

   Mobile navigation is already handled in Section 05.
   ========================================================================== */

@media (max-width: 980px) {


  /* Slightly shorter navbar */
  :root {
    --header-height: 76px;
  }


  /* Smaller overall section spacing */
  .section {
    padding:
      104px 0;
  }


  /* Smaller logo */
  .brand-logo {
    width: 155px;

    max-height: 54px;
  }



  /* ================= SERVICES ================= */

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


  .service-card {
    min-height: auto;
  }


  .service-icon {
    margin-bottom: 52px;
  }



  /* ================= HOW IT WORKS ================= */

  .process-grid {
    grid-template-columns:
      repeat(2, 1fr);

    gap:
      48px 24px;
  }


  .process-line {
    display: none;
  }



  /* ================= ABOUT + FAQ ================= */

  .about-grid,
  .faq-grid {
    grid-template-columns:
      1fr;
  }


  .about-grid {
    gap: 72px;
  }


  .about-image {
    min-height: 620px;

    aspect-ratio:
      16 / 12;
  }


  .image-badge {
    right: 24px;
  }



  /* ================= TESTIMONIALS ================= */

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



  /* ================= FAQ ================= */

  .faq-intro {
    position: static;
  }


  .faq-intro p:not(.eyebrow) {
    max-width: 620px;
  }

}



/* ==========================================================================
   20. MOBILE — 700px AND BELOW
   ========================================================================== */

@media (max-width: 700px) {


  /* Smaller horizontal margins */
  .container {
    width:
      min(
        calc(100% - 32px),
        var(--container)
      );
  }


  /* Reduced section spacing */
  .section {
    padding:
      84px 0;
  }


  /* Smaller eyebrow labels */
  .eyebrow {
    font-size: 0.62rem;

    line-height: 1.5;
  }


  /* Smaller logo */
  .brand-logo {
    width: 138px;

    max-height: 50px;
  }



  /* ================= HERO ================= */

  .hero {
    min-height: 920px;
  }


  .hero-media {
    background-position:
      58% center;
  }


  .hero-content {
    padding-top: 154px;

    padding-bottom: 104px;
  }


  .hero-copy {
    font-size: 0.96rem;
  }


  .hero-actions {
    flex-direction: column;

    align-items: stretch;
  }


  .hero-actions .button {
    width: 100%;
  }



  /* ================= TRUST ROW ================= */

  .trust-row {
    display: grid;

    grid-template-columns:
      repeat(2, 1fr);

    gap:
      15px 12px;

    margin-top: 44px;
  }



  /* Hide desktop scroll indicator */
  .scroll-indicator {
    display: none;
  }


  .wave-divider {
    height: 56px;
  }



  /* ================= SECTION HEADINGS ================= */

  .section-heading {
    margin-bottom: 44px;
  }



  /* ================= SERVICES ================= */

  .service-card {
    padding: 28px;
  }


  .card-number {
    top: 28px;
    right: 28px;
  }



  /* ================= PROCESS ================= */

  .process-grid {
    grid-template-columns:
      1fr;

    gap: 34px;
  }


  .process-step {
    display: grid;

    grid-template-columns:
      54px 1fr;

    column-gap: 18px;

    text-align: left;
  }


  .process-step .step-number {
    grid-row:
      span 2;

    margin: 0;
  }


  .process-step h3 {
    align-self: end;
  }


  .process-step p {
    max-width: none;

    margin:
      4px 0 0;
  }



  /* ================= ABOUT ================= */

  .about-image {
    min-height: 500px;

    aspect-ratio:
      4 / 5;
  }


  .image-badge {
    left: 18px;
    right: 18px;
    bottom: 18px;

    width: auto;
  }


  .feature-list {
    grid-template-columns:
      1fr;
  }



  /* ================= CINEMATIC BREAK ================= */

  .cinematic-break {
    min-height: 500px;
  }


  .cinematic-content {
    width:
      min(
        calc(100% - 32px),
        900px
      );
  }



  /* ================= TESTIMONIALS ================= */

  .testimonial-card {
    padding: 28px;
  }



  /* ================= FAQ ================= */

  .faq-question {
    padding:
      21px 0;

    font-size: 0.92rem;
  }


  .faq-answer > p {
    padding-right: 36px;
  }



  /* ================= FINAL CTA ================= */

  .final-cta {
    padding:
      90px 0;
  }


  .final-cta .button {
    width: 100%;
  }



  /* ================= FOOTER ================= */

  .footer-grid {
    grid-template-columns:
      1fr;

    gap: 34px;
  }


  .footer-bottom {
    flex-direction: column;

    margin-top: 42px;
  }

}



/* ==========================================================================
   21. SMALL MOBILE — 420px AND BELOW
   ========================================================================== */

@media (max-width: 420px) {


  /* Prevent oversized hero heading */
  h1 {
    font-size:
      clamp(
        2.7rem,
        14vw,
        4rem
      );
  }


  h2 {
    font-size:
      clamp(
        2.2rem,
        11vw,
        3.2rem
      );
  }


  /* Trust points stack */
  .trust-row {
    grid-template-columns:
      1fr;
  }


  /* Shorter about image */
  .about-image {
    min-height: 440px;
  }


  /* Smaller navbar logo */
  .brand-logo {
    width: 126px;
  }

}



/* ==========================================================================
   22. FEATURED SESSION REQUEST BUTTON
   --------------------------------------------------------------------------
   Main functional Glass Ripple booking CTA.

   EFFECT:
   Three copper points expand into separate broken
   frame sections when the customer hovers.

   HTML SHOULD INCLUDE:

   <button class="button button-dark booking-featured">
     <span class="booking-featured-label">
       Request Your Session
     </span>

     <svg class="booking-featured-frame" ...>
       ...
     </svg>
   </button>
   ========================================================================== */


/* ================= FEATURED BUTTON BASE ================= */

.booking-featured {
  position: relative;

  /*
     Allows decorative SVG to extend outside button.
  */
  overflow: visible;

  isolation: isolate;

  transition:
    transform
    400ms
    cubic-bezier(.22, .8, .25, 1),

    background-color
    400ms
    ease;
}



/* ================= BUTTON LABEL ================= */

.booking-featured-label {
  position: relative;

  z-index: 3;
}



/* ================= OUTER SVG FRAME =================
   Adjust this to control the gap around the button.

   Current:
   12px vertical
   18px horizontal
   =================================================== */

.booking-featured-frame {
  position: absolute;

  inset:
    -12px
    -18px;

  width:
    calc(100% + 36px);

  height:
    calc(100% + 24px);

  overflow: visible;

  pointer-events: none;

  z-index: -1;
}



/* ================= COPPER FRAME LINES ================= */

.booking-frame-line {
  fill: none;

  stroke:
    var(--copper);

  /*
     Increase this value to make outline thicker.
  */
  stroke-width: 1.6;

  vector-effect:
    non-scaling-stroke;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;


  /*
     At rest, each line collapses into a tiny point.
  */
  stroke-dasharray:
    0.002 0.998;

  opacity: 0.52;


  /*
     Very subtle resting glow.
  */
  filter:
    drop-shadow(
      0 0 2px
      rgba(199, 132, 86, 0.35)
    );


  transition:
    stroke-dasharray
    850ms
    cubic-bezier(.16, 1, .3, 1),

    opacity
    350ms
    ease,

    filter
    700ms
    ease;
}



/* ================= STAGGERED DRAW TIMING ================= */

.frame-line-1 {
  transition-delay: 0ms;
}


.frame-line-2 {
  transition-delay: 55ms;
}


.frame-line-3 {
  transition-delay: 110ms;
}



/* ================= FRAME DRAW ON HOVER ================= */

.booking-featured:hover .booking-frame-line,
.booking-featured:focus-visible .booking-frame-line {

  stroke-dasharray:
    1 0;

  opacity: 1;

  filter:
    drop-shadow(
      0 0 3px
      rgba(199, 132, 86, 0.72)
    )

    drop-shadow(
      0 0 9px
      rgba(199, 132, 86, 0.24)
    );
}



/* Tiny movement only */
.booking-featured:hover,
.booking-featured:focus-visible {
  transform:
    translateY(-1px);
}



/* ================= FEATURED BUTTON REDUCED MOTION ================= */

@media (prefers-reduced-motion: reduce) {

  .booking-frame-line {
    stroke-dasharray:
      1 0;

    opacity: 1;

    transition: none;
  }

}