/*
 * FAQ mobile tabs toggle
 * Hide the FAQ tabs on small screens and provide a hamburger button
 * to toggle the list of categories. The button is hidden on larger
 * screens. Tabs become a vertical list when the menu is open.
 */
.faq__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 22px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.faq__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-dark);
  margin: 3px 0;
  border-radius: 2px;
  transition: background 0.3s ease;
}
@media (max-width: 640px) {
  /* Hide the tab bar and show hamburger on narrow screens */
  .faq__tabs {
    display: none;
    flex-direction: column;
    gap: 0;
    border-bottom: none;
    margin-bottom: 0.5rem;
  }
  .faq__tabs.open {
    display: flex;
  }
  .faq__hamburger {
    display: flex;
    margin-left: 1rem;
  }
  .faq__search-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .faq__tabs .faq__tab {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 0.8rem;
  }
}
.contact-hero {
  background-image: url('images/wow.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
}
.about-hero {
  background-image: url('images/van.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
}
/*
 * Stylesheet for South Downs Cleaning website
 * This CSS file defines the colour palette, typography, layout and responsive
 * behaviour for all pages. The design draws inspiration from modern cleaning
 * service websites and the company vans’ blue‑white colour scheme. Sections are
 * clearly separated with generous spacing and subtle shadows to create a
 * professional, clean look.
 */

/* Base typography styles
   These rules standardise heading sizes and weights across the site. */
h1 {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.2;
}
h2 {
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 1rem;
}
h3 {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 0.5rem;
}
h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 0.3rem;
}
p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-color);
}

/* Import a modern, clean typeface from Google Fonts.
 * If the import fails (e.g. due to network restrictions) the browser will
 * gracefully fall back to system fonts. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Colour variables for easy theme adjustments */
/*
 * Theme variables
 *
 * We refine the colour palette to achieve a deeper contrast and a more polished look.
 * Primary colours are blues inspired by the company vehicles and give a professional
 * yet modern feel. A subtle off‑white background keeps the site light and airy.
 */
:root {
  --primary: #005f99;        /* main brand colour (deep blue) */
  --primary-dark: #003f6e;   /* darker shade used for strips and headers */
  --secondary: #02a4df;      /* accent blue used for highlights and buttons */
  --accent: #0092c8;         /* alternative accent for gradients and hovers */
  --bg-light: #f8fafd;       /* light background to keep pages clean */
  --text-color: #27384e;     /* primary text colour */
  --heading-color: #102a43;  /* dark colour for headings */
}

/* Keyframe animations for hero section text */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-50px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal helper classes */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-light);
  font-weight: 400;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Header styles */
.header .top-bar {
  background: var(--primary);
  color: #fff;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.header .top-bar .contact-info a {
  margin-right: 1rem;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.header .top-bar .social-links a {
  color: #fff;
  margin-left: 0.5rem;
  font-size: 1rem;
}

/* Navigation bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--primary-dark);
  color: #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 999;
}
.navbar .logo {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}
.navbar ul.nav-links {
  display: flex;
  list-style: none;
  align-items: center;
}
.navbar ul.nav-links li {
  margin-left: 1.5rem;
}
.navbar ul.nav-links a {
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
  transition: color 0.2s ease;
}
.navbar ul.nav-links a:hover {
  color: var(--secondary);
}
.navbar .cta-button {
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  color: #fff;
  padding: 0.6rem 1.4rem;
  border-radius: 30px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.navbar .cta-button:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Dropdown menu for Services */
.navbar ul.nav-links li.dropdown {
  position: relative;
}
.navbar ul.nav-links li.dropdown > a {
  display: flex;
  align-items: center;
  gap: 4px;
}
.navbar ul.nav-links li.dropdown .fa-chevron-down {
  font-size: 0.75rem;
}
.navbar ul.nav-links li.dropdown ul.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--primary-dark);
  list-style: none;
  padding: 0.5rem 0;
  min-width: 180px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  border-radius: 0 0 4px 4px;
  z-index: 1000;
}
.navbar ul.nav-links li.dropdown ul.dropdown-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #fff;
  white-space: nowrap;
}
.navbar ul.nav-links li.dropdown ul.dropdown-menu li a:hover {
  background-color: var(--primary);
  color: var(--secondary);
}
.navbar ul.nav-links li.dropdown:hover ul.dropdown-menu {
  display: block;
}

@media (max-width: 768px) {
  /* Restructure the services dropdown on mobile: hide by default and show when the parent has the `open` class.
     The sub-menu flows within the mobile navigation panel rather than being absolutely positioned. */
  .navbar ul.nav-links li.dropdown ul.dropdown-menu {
    position: static;
    /* expand to full width inside the mobile nav */
    width: 100%;
    /* hide the submenu until the parent has class `open` */
    display: none;
    /* remove drop shadow and set background to match the mobile panel */
    box-shadow: none;
    background: var(--primary-dark);
    padding: 0;
  }
  /* reveal the submenu when `open` class is present on the list item */
  .navbar ul.nav-links li.dropdown.open ul.dropdown-menu {
    display: block;
  }
  .navbar ul.nav-links li.dropdown ul.dropdown-menu li a {
    display: block;
    padding: 0.4rem 1rem;
    width: 100%;
  }
}

/*
 * Sticky header
 *
 * To make both the top contact bar and the navigation bar remain visible
 * while scrolling, the entire header is set to sticky positioning.  The
 * navigation bar itself no longer needs to be sticky because it sits
 * inside the sticky header.  Adjusting the navbar to relative
 * positioning prevents a double‑sticky effect.
 */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header .navbar {
  position: relative;
  top: auto;
  z-index: auto;
}

/* Hero navigation (index page) */
.navbar.hero-nav {
  background: transparent;
  box-shadow: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}
.navbar.hero-nav .logo {
  color: #fff;
}
.navbar.hero-nav ul.nav-links a {
  color: #fff;
  transition: color 0.2s ease;
}
.navbar.hero-nav ul.nav-links a:hover {
  color: var(--secondary);
}
.navbar.hero-nav .cta-button {
  background: #fff;
  color: var(--primary);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background 0.2s ease;
}
.navbar.hero-nav .cta-button:hover {
  background: var(--secondary);
  color: #fff;
}

/* Hero section enhancements */
.hero .hero-content .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.hero .hero-content .rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.hero .hero-content .stars i {
  color: #ffd700;
  margin: 0 0.05rem;
}
.hero .hero-content .rating-text {
  font-size: 0.9rem;
  color: #fff;
}

/* Process timeline */
.process {
  padding: 4rem 1rem;
  background: #fff;
  text-align: center;
}
.process h2 {
  color: var(--heading-color);
  font-size: 2.4rem;
  margin-bottom: 2rem;
  position: relative;
}

/* decorative underline for section headings */
.process h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  border-radius: 2px;
}
.timeline {
  list-style: none;
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-left: 0;
}
.timeline li {
  position: relative;
  padding: 1rem 0 1rem 3rem;
  border-left: 3px solid var(--accent);
  margin-bottom: 1.5rem;
}
.timeline li:last-child {
  border-left: none;
}
.timeline li .circle {
  position: absolute;
  left: -1.7rem;
  top: 0;
  background: linear-gradient(180deg, var(--secondary), var(--accent));
  color: #fff;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.timeline li h3 {
  color: var(--primary-dark);
  margin-bottom: 0.5rem;
}
.timeline li p {
  color: var(--text-color);
  font-size: 0.9rem;
}

/* ── FOUNDER SECTION ── */
  .founder {
    background: linear-gradient(135deg, #0d2d5e 0%, #1a56a0 100%);
    padding: 0;
    overflow: hidden;
  }
 
  .founder-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
    gap: 3rem;
  }
 
  /* LEFT — image block */
  .founder-image {
    position: relative;
    min-height: 380px;
    max-width: 560px;
    width: 100%;
  }
  .founder-image img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: 12px;
    margin: auto;
  }
 
  /* RIGHT — text block */
  .founder-text {
    padding: 4rem 3.5rem 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
  }
 
  .founder-text h2 {
    font-family: 'Barlow', sans-serif;
    font-weight: 900;
    font-size: 3rem;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: .5px;
    color: #ffffff;
  }
  .founder-text h2 span {
    color: #3da5d4;
  }
 
  .founder-text .intro {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #ddeeff;
  }
 
  /* Quote block — left blue border */
  .founder-quote {
    border-left: 2px solid #3da5d4;
    padding-left: 1.4rem;
    margin: .4rem 0;
  }
  .founder-quote p {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.65;
    color: #ffffff;
    font-style: normal;
  }
 
  /* CTA button */
  .btn-founder {
    display: inline-block;
    margin-top: .6rem;
    align-self: flex-start;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: .9rem 2.4rem;
    border-radius: 50px;
    transition: background .2s, transform .15s;
  }
  .btn-founder:hover {
    background: #2b8fbf;
    transform: translateY(-1px);
  }
 
  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    .founder-container {
      grid-template-columns: 1fr;
    }
    .founder-image {
      min-height: 320px;
    }
    .founder-image img {
      border-radius: 0;
    }
    .founder-text {
      padding: 2.5rem 1.5rem;
    }
    .founder-text h2 {
      font-size: 2.2rem;
    }
  }

/* Credentials section */
.credentials {
  padding: 4rem 1rem;
  background: #fff;
  text-align: center;
}
.credentials h2 {
  color: var(--primary);
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
.cred-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.cred {
  background: var(--bg-light);
  padding: 2rem 1rem;
  border-radius: 8px;
  width: 220px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  text-align: center;
}
.cred h3 {
  color: var(--primary-dark);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.cred p {
  color: var(--text-color);
  font-size: 0.9rem;
}

/* Icon in each credential box */
.cred i {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

/* ── FAQ SECTION ── */
  .faq {
    background: var(--bg);
    padding: 3.5rem 2rem 4rem;
    max-width: 980px;
    margin: 0 auto;
  }
 
  /* Heading */
  .faq__heading {
    font-family: 'Barlow', sans-serif;
    font-weight: 800;
    font-size: 2.2rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-dark);
    margin-bottom: 1.6rem;
  }
  .faq__heading span {
    color: var(--accent);
  }
 
  /* Search bar */
  .faq__search-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.2rem;
  }
  .faq__search {
    display: flex;
    align-items: center;
    border-bottom: 1.5px solid #aaa;
    gap: .5rem;
    padding-bottom: .3rem;
  }
  .faq__search input {
    border: none;
    outline: none;
    font-size: .95rem;
    color: var(--text-mid);
    background: transparent;
    width: 180px;
    font-family: 'Lato', sans-serif;
  }
  .faq__search input::placeholder { color: #999; }
  .faq__search svg { color: #555; flex-shrink: 0; }
 
  /* Tabs */
  .faq__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
  }
  .faq__tab {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-size: .9rem;
    color: var(--text-mid);
    padding: .65rem 1.4rem;
    position: relative;
    transition: color .2s;
    white-space: nowrap;
  }
  .faq__tab:first-child { padding-left: 0; }
  .faq__tab.active {
    color: var(--accent);
    font-weight: 600;
  }
  .faq__tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
  }
 
  /* Tab panels */
  .faq__panel { display: none; }
  .faq__panel.active { display: block; }
 
  /* Accordion items */
  .faq__item {
    border-bottom: 1px solid var(--border);
  }
  .faq__item:first-child { border-top: 1px solid var(--border); }
 
  .faq__question {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.35rem 0;
    font-family: 'Lato', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--text-dark);
    text-align: left;
    gap: 1rem;
  }
  .faq__question:hover { color: var(--accent); }
 
  /* Chevron icon */
  .faq__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    transition: transform .25s ease;
  }
  .faq__item.open .faq__icon { transform: rotate(180deg); }
 
  /* Answer */
  .faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
  }
  .faq__item.open .faq__answer {
    max-height: 300px;
  }
  .faq__answer p {
    font-size: .92rem;
    line-height: 1.65;
    color: #444;
    padding-bottom: 1.2rem;
  }

/* Mobile menu */
.navbar input#toggle {
  display: none;
}
.navbar .hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  width: 30px;
}
.navbar .hamburger span {
  height: 3px;
  background: var(--primary);
  margin: 4px 0;
  border-radius: 2px;
  transition: 0.3s;
}

/* Hero banner */
/* Hero banner */
.hero {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero-slide.is-active {
  opacity: 1;
}

/* Hero container and layout */
.hero-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 5rem 1rem;
  position: relative;
  z-index: 2;
  color: #fff;
}
.hero-left {
  flex: 1 1 52%;
  min-width: 0;
  padding-right: 0.5rem;
}
.hero-right {
  flex: 0 1 430px;
  min-width: 360px;
  margin-top: 0;
  margin-left: auto;
  margin-right: -1rem;
}
.hero-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  justify-content: center;
  min-height: 260px;
}

.hero-feature-card {
  width: 100%;
  padding: 0.9rem 1.75rem;
  border-radius: 28px 0 0 28px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateX(48px);
  animation: heroFeatureIn 0.7s ease forwards;
  text-align: center;
}

.hero-feature-card:nth-child(1) { animation-delay: 0.15s; }
.hero-feature-card:nth-child(2) { animation-delay: 0.35s; }
.hero-feature-card:nth-child(3) { animation-delay: 0.55s; }
.hero-feature-card:nth-child(4) { animation-delay: 0.75s; }

@keyframes heroFeatureIn {
  from {
    opacity: 0;
    transform: translateX(48px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.hero-left .hero-actions {
  margin-top: 30px;
}
.hero-left .hero-actions a {
  min-width: 170px;
  padding: 0.8rem 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-title {
  font-size: 4.125rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.hero-title span {
  color: var(--secondary);
}
.hero-subtext {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #f2f8ff;
}
.hero .glass-card {
  background: rgba(255, 255, 255, 0.15);
  padding: 2rem;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.hero .glass-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: #fff;
}
.card-list {
  list-style: none;
  margin-bottom: 1rem;
}
.card-list li {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.card-list li i {
  color: var(--secondary);
  margin-right: 0.5rem;
}
.btn-primary.small {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  border-radius: 25px;
}
/* Overlay with a subtle gradient for a modern look */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.38) 100%);
  z-index: 1;
}
.hero .hero-content {
  position: relative;
  max-width: 900px;
  padding: 0 1rem;
  z-index: 1;
}
.hero .hero-content h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.8rem;
  animation: fadeInDown 1s ease forwards;
}
.hero .hero-content h1 span.highlight {
  color: var(--secondary);
}
.hero .hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  animation: fadeInUp 1.3s ease forwards;
  color: #eef6ff;
}
.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
  height: 50px;
  overflow: hidden;
}

.hero-wave svg {
  display: block;
  width: 100%;
  height: 50px;
}
.hero-left p,
.hero-right p,
.hero-right li {
  color: #eef6ff;
}
/* Buttons reused across site */
.btn-primary {
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  color: #fff;
  padding: 0.8rem 1.6rem;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}
.btn-secondary {
  background: var(--primary-dark);
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-secondary:hover {
  background: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}

/* Sections */
.services {
  padding: 4rem 1.5rem;
  background: #f5f7fa;
  text-align: center;
}
.services h2 {
  font-size: 2.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #111;
  margin-bottom: 2rem;
}
.services h2 span { color: #3a9bd5; }

.service-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 380px));
  justify-content: center;
  gap: 1.5rem;
  max-width: 980px;
  margin: 0 auto;
}
.card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  height: 340px;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
.card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.card:hover img { transform: scale(1.07); }

.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
  transition: background 0.3s ease;
}
.card:hover .card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}
.card-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-label h3 {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
}
.card-arrow {
  width: 24px; height: 24px;
  color: #fff;
}

@media (max-width: 768px) {
  .service-cards { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 480px) {
  .service-cards { grid-template-columns: 1fr; }
}


.about-home {
  padding: 4rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  background: var(--bg-light);
}
.about-home .about-img img {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
}
.about-home .about-text {
  max-width: 600px;
}
.about-home .about-text h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary);
}
.about-home .about-text p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'Segoe UI', Arial, sans-serif; background: #fff; }
 
  .why-choose-us {
    padding: 5rem 2.5rem;
    background: #ffffff;
    overflow: hidden;
  }
  .why-wrapper {
    max-width: 1150px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 3rem;
    align-items: center;
  }
  .why-content h2 {
    font-size: 3rem;
    font-weight: 900;
    color: #0d0d0d;
    line-height: 1;
    margin-bottom: 2.5rem;
    letter-spacing: -1px;
    text-transform: uppercase;
  }
  .why-content h2 span { color: #3ab5f0; }
 
  .reasons { display: flex; flex-direction: column; gap: 1.8rem; }
  .reason { display: flex; align-items: center; gap: 1.2rem; }
 
  .icon-circle {
    width: 60px; height: 60px; min-width: 60px;
    border-radius: 50%;
    background: #ebebeb;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .icon-circle svg { width: 26px; height: 26px; }
 
  .reason-text h3 {
    font-size: 0.88rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.2px;
    color: #0d0d0d; margin-bottom: 0.2rem;
  }
  .reason-text p { font-size: 0.92rem; color: #666; line-height: 1.55; }
 
  .why-image-side { position: relative; height: 520px; }
  .blob-bg {
    position: absolute;
    top: -10px; right: -60px;
    width: 92%; height: 108%;
    background: #c8e8f8;
    border-radius: 55% 45% 40% 60% / 55% 40% 60% 45%;
    z-index: 0;
  }
  .img-grid {
    position: relative; z-index: 1;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 56% 42%;
    gap: 10px;
    padding-right: 10px;
  }
  .img-top    { grid-column:1/3; grid-row:1/2; border-radius:10px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,0.13); }
  .img-bottom-left  { grid-column:1/2; grid-row:2/3; border-radius:10px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,0.13); }
  .img-bottom-right { grid-column:2/3; grid-row:2/3; border-radius:10px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,0.13); }
  .img-grid > div img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; }
  .img-grid > div:hover img { transform: scale(1.05); }
 
  @media (max-width: 900px) {
    .why-wrapper { grid-template-columns: 1fr; }
    .why-image-side { height: 380px; margin-top: 2rem; }
    .blob-bg { right: -20px; width: 95%; }
  }

.testimonials {
  padding: 4rem 1rem;
  background: var(--bg-light);
  text-align: center;
}
.testimonials h2 {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 1rem;
}
.testimonial-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}
.testimonial {
  background: #fff;
  width: 300px;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
}
.testimonial p {
  font-style: italic;
  margin-bottom: 1.5rem;
  color: var(--text-color);
}
.testimonial h4 {
  font-weight: 600;
  color: var(--primary-dark);
}
.testimonial::before {
  content: '\201C';
  font-size: 3rem;
  color: var(--secondary);
  position: absolute;
  top: -20px;
  left: 10px;
}

.cta-section {
  padding: 4rem 1rem;
  background: var(--primary);
  color: #fff;
  text-align: center;
}
.cta-section h2 {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.cta-section p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color:#fff;
}
.cta-section .btn-primary {
  background: #fff;
  color: var(--primary);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.2s ease;
}
.cta-section .btn-primary:hover {
  background: var(--bg-light);
}

/* Process steps section */
/* Process section redesigned */
.process-section {
  padding: 4rem 2rem;
  background: linear-gradient(180deg, #0a1628 0%, #0f2a4a 30%, #1a4a7a 70%, #1e5a96 100%);
  color: #fff;
  font-family: 'Barlow', sans-serif;
}
.process-header {
  max-width: 1100px;
  margin: 0 auto 2.5rem auto;
}
.process-header h2 {
  font-size: 2.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}
.process-header h2 span {
  color: #4db8ff;
}
.process-header p {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  color: #b0c8e8;
  max-width: 650px;
  line-height: 1.6;
}
.process-container {
  max-width: 1100px;
  margin: 0 auto;
}
.process-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2rem;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(77, 184, 255, 0.15);
}
.process-row:last-child { border-bottom: none; }
.process-left-col {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}
.step-number {
  font-size: 3.5rem;
  font-weight: 800;
  color: #4db8ff;
  line-height: 1;
  min-width: 60px;
}
.step-text h3 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
  margin-bottom: 0.5rem;
}
.step-text p {
  font-size: 0.92rem;
  color: #9ab8d8;
  line-height: 1.65;
  max-width: 500px;
}
.process-divider {
  width: 100%;
  height: 1px;
  background: rgba(77, 184, 255, 0.2);
  margin-top: 1.2rem;
}
.process-image-col {
  width: 280px;
  height: 160px;
  border-radius: 6px;
  overflow: hidden;
}
.process-image-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.35s ease;
}
.process-image-col img:hover { transform: scale(1.04); }

@media (max-width: 700px) {
  .process-row { grid-template-columns: 1fr; }
  .process-image-col { width: 100%; height: 180px; }
}

/* Quote form section */
.quote-form-section {
  padding: 5rem 2rem;
  background: #f8fafd;
  position: relative;
  overflow: hidden;
}
.quote-container {
  max-width: 1060px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: start; position: relative; z-index: 1;
}
.quote-form-wrap { animation: slideUp 0.7s cubic-bezier(.22,.68,0,1.2) both; }
.quote-image-wrap { animation: slideUp 0.7s 0.15s cubic-bezier(.22,.68,0,1.2) both; display: flex; flex-direction: column; gap: 1.4rem; }
.qf-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #02a4df; margin-bottom: 0.6rem; }
.qf-title { font-size: 2.4rem; font-weight: 700; color: #003f6e; line-height: 1.15; margin-bottom: 0.7rem; }
.qf-title span { color: #005f99; }
.qf-sub { font-size: 0.92rem; color: #27384e; line-height: 1.65; margin-bottom: 1.8rem; max-width: 420px; }
.qf-card { background: #fff; border: 1px solid #dde8f5; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 24px rgba(0,63,110,0.07); }
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-bottom: 0.9rem; }
.qf-field { display: flex; flex-direction: column; gap: 0.3rem; }
.qf-full { margin-bottom: 0.9rem; }
.qf-field label { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #005f99; }
.qf-field input, .qf-field textarea, .qf-field select {
  background: #f8fafd; border: 1px solid #c8ddef; border-radius: 7px;
  padding: 0.65rem 0.85rem; color: #102a43; font-size: 0.88rem;
  font-family: 'Montserrat', sans-serif; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s; resize: none; width: 100%;
}
.qf-field input::placeholder, .qf-field textarea::placeholder { color: #a0b8cc; }
.qf-field input:focus, .qf-field textarea:focus, .qf-field select:focus {
  border-color: #02a4df; background: #fff; box-shadow: 0 0 0 3px rgba(2,164,223,0.1);
}
.qf-field select option { background: #fff; color: #102a43; }
.qf-btn {
  position: relative; width: 100%; padding: 0.85rem 1.5rem;
  background: linear-gradient(90deg, #02a4df, #0092c8); border: none;
  border-radius: 8px; color: #fff; font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem; font-weight: 700; cursor: pointer; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(2,164,223,0.3); margin-top: 0.3rem;
}
.qf-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; }
.qf-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(2,164,223,0.4); }
.qf-btn:hover::before { left: 100%; }
.qi-img-frame { position: relative; border-radius: 12px; overflow: hidden; height: 260px; border: 1px solid #dde8f5; box-shadow: 0 4px 16px rgba(0,63,110,0.08); }
.qi-img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.qi-img-frame:hover img { transform: scale(1.04); }
.qi-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,40,80,0.75) 0%, transparent 55%); }
.qi-img-badge { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.qi-tag { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 20px; }
.qi-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem; }
.qi-card { background: #fff; border: 1px solid #dde8f5; border-radius: 10px; padding: 1rem; text-align: center; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; box-shadow: 0 2px 8px rgba(0,63,110,0.05); }
.qi-card:hover { transform: translateY(-4px); border-color: #02a4df; box-shadow: 0 8px 20px rgba(2,164,223,0.12); }
.qi-card-icon { font-size: 1.3rem; margin-bottom: 0.4rem; color: #02a4df; }
.qi-card h4 { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: #003f6e; margin-bottom: 0.2rem; }
.qi-card p { font-size: 0.7rem; color: #27384e; line-height: 1.4; }
.qi-guarantee { background: #eef6fb; border: 1px solid #b8d9ef; border-radius: 10px; padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: 1rem; }
.qi-g-icon { width: 42px; height: 42px; background: linear-gradient(135deg, #02a4df, #005f99); border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.2rem; }
.qi-g-text h4 { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #003f6e; margin-bottom: 0.2rem; }
.qi-g-text p { font-size: 0.8rem; color: #27384e; line-height: 1.5; }
@media (max-width: 780px) {
  .quote-container { grid-template-columns: 1fr; }
  .qf-row { grid-template-columns: 1fr; }
  .qi-cards { grid-template-columns: 1fr 1fr; }
}

/* Dark strip for why choose us */
.dark-strip {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary));
  color: #fff;
}
.dark-strip h2 {
  color: #fff;
}
.dark-strip .reasons {
  gap: 2rem;
}
.dark-strip .reason {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.dark-strip .reason h3 {
  color: #fff;
}
.dark-strip .reason i {
  color: var(--secondary);
}
.dark-strip .reason p {
  color: #e8f0f8;
}

/* Page headers for inner pages */
.page-header {
  background: var(--primary-dark);
  color: #fff;
  text-align: center;
  padding: 3rem 1rem;
}

/* Contact page styles */
.contact-section {
  padding: 4rem 1rem;
  background: #fff;
}
.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.contact-form {
  flex: 1 1 400px;
  background: var(--bg-light);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.contact-form h2 {
  margin-bottom: 1rem;
  color: var(--primary-dark);
}
.contact-form label {
  font-weight: 600;
  color: var(--primary-dark);
  margin-top: 1rem;
  display: block;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  font-family: inherit;
}
.contact-form fieldset {
  margin-top: 1rem;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 6px;
}
.contact-form fieldset legend {
  font-weight: 600;
  color: var(--primary-dark);
  padding: 0 0.5rem;
}
.contact-form .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
}
.contact-form .checkbox-group label {
  font-weight: normal;
  color: var(--text-color);
}
.contact-form .property-type {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.contact-form button {
  margin-top: 1rem;
}
.contact-info-box {
  flex: 1 1 300px;
  background: var(--bg-light);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.contact-info-box h2 {
  margin-bottom: 1rem;
  color: var(--primary-dark);
}
.contact-info-box ul {
  margin: 0.5rem 0 1rem;
  padding-left: 1rem;
  list-style: disc;
  color: var(--text-color);
}
.contact-info-box .map-placeholder {
  background: #e7eef6;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  color: var(--primary-dark);
  font-style: italic;
}
.page-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.page-header p {
  font-size: 1rem;
  max-width: 800px;
  margin: 0 auto;
}
.gallery-header {
  background: var(--secondary);
}

/* Custom hero styles for gallery and contact pages */
.gallery-hero {
  background-image: url('images/hero1.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
}
.gallery-hero::after,
.contact-hero::after,
.about-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%);
  z-index: 0;
}
.gallery-hero h1,
.contact-hero h1,
.about-hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.gallery-hero p,
.contact-hero p,
.about-hero p {
  position: relative;
  z-index: 1;
  color: #e6eff8;
  font-size: 1rem;
  max-width: 700px;
  margin: 0.5rem auto 0;
}

/* About page specifics */
.about-details {
  padding: 4rem 1rem;
  background: #fff;
  max-width: 1000px;
  margin: 0 auto;
}

/* Approach section on About page */
.approach {
  padding: 4.5rem 1.5rem 5rem;
  background: #fff;
}
.approach-shell {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: 6rem;
  align-items: start;
}
.approach-left h2 {
  margin: 0 0 1.1rem;
  font-family: 'Barlow', sans-serif;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: #050505;
}
.approach-intro {
  max-width: 470px;
  margin: 0 0 2.6rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #111;
  text-align: left;
}
.approach-visual {
  position: relative;
  min-height: 370px;
  padding: 0 0 0 50px;
  transform: translateY(-20px);
  isolation: isolate;
}
.approach-visual::before {
  content: "";
  position: absolute;
  left: -102px;
  top: 1.1rem;
  width: 255px;
  height: 325px;
  background: linear-gradient(180deg, #66b5f0 0%, #49a4ef 58%, #7dc2f5 100%);
  border-radius: 180px;
  z-index: -2;
}
.approach-visual::after {
  content: "";
  position: absolute;
  left: -96px;
  top: 204px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #4d9feb;
  box-shadow:
    190px -202px 0 0 #8dc7f3,
    324px -172px 0 0 rgba(188, 224, 250, 0.9);
  z-index: -1;
}
.approach-visual img {
  width: min(100%, 410px);
  display: block;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  object-fit: cover;
  aspect-ratio: 1.18 / 0.84;
}
.approach-list {
  display: grid;
  gap: 2rem;
  padding-top: 0.25rem;
}
.approach-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1.45rem;
  align-items: start;
  transition: transform 0.25s ease;
}
.approach-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #15366f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  box-shadow: 0 10px 24px rgba(21, 54, 111, 0.14);
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.approach-copy {
  text-align: left;
}
.approach-copy h3 {
  margin: 0 0 0.35rem;
  font-family: 'Barlow', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.12;
  text-transform: uppercase;
  color: #101010;
  transition: color 0.25s ease;
}
.approach-copy p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: #1a1a1a;
  transition: color 0.25s ease;
}
.approach-item:hover .approach-icon {
  transform: scale(1.08);
  background: #1f6ed4;
  box-shadow: 0 14px 28px rgba(31, 110, 212, 0.22);
}
.approach-item:hover .approach-copy h3,
.approach-item:hover .approach-copy p {
  color: #1f6ed4;
}

@media (max-width: 960px) {
  .approach-shell {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .approach-visual {
    min-height: 360px;
  }

  .approach-list {
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .approach {
    padding: 4rem 1.2rem 4.25rem;
  }

  .approach-left h2 {
    font-size: 2.45rem;
  }

  .approach-intro {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .approach-visual {
    min-height: 280px;
    padding-top: 2rem;
  }

  .approach-visual::before {
    left: -52px;
    width: 210px;
    height: 280px;
  }

  .approach-visual::after {
    left: -40px;
    top: 165px;
    width: 42px;
    height: 42px;
    box-shadow:
      154px -146px 0 0 #8dc7f3,
      256px -126px 0 0 rgba(188, 224, 250, 0.9);
  }

  .approach-visual img {
    width: 100%;
  }

  .approach-item {
    grid-template-columns: 58px 1fr;
    gap: 1rem;
  }

  .approach-icon {
    width: 52px;
    height: 52px;
    font-size: 1.1rem;
  }

  .approach-copy h3 {
    font-size: 1.05rem;
  }

  .approach-copy p {
    font-size: 0.92rem;
  }
}

/* Promise section on About page */
.promise {
  padding: 4rem 1rem;
  background: var(--bg-light);
  text-align: center;
}
.promise h2 {
  color: var(--heading-color);
  font-size: 2.4rem;
  margin-bottom: 2rem;
  position: relative;
}
.promise h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  border-radius: 2px;
}
.promise-list {
  list-style: none;
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.promise-list li {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: relative;
  padding-left: 3rem;
  font-size: 0.9rem;
  color: var(--text-color);
}
.promise-list li::before {
  content: '\f00c'; /* FontAwesome check icon */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--secondary);
  font-size: 1.3rem;
}
.about-details h2 {
  color: var(--primary);
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.about-details p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.mission-values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}
.value-box {
  background: var(--bg-light);
  width: 280px;
  border-radius: 8px;
  padding: 2rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s ease;
}
.value-box i {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 1rem;
}
.value-box h3 {
  font-size: 1.3rem;
  color: var(--primary-dark);
  margin-bottom: 0.5rem;
}
.value-box p {
  font-size: 0.9rem;
  color: var(--text-color);
}
.value-box:hover {
  transform: translateY(-5px);
}

/* Founder story section on About page */
.founder-story {
  padding: 4rem 1rem;
  background: var(--bg-light);
}
.founder-story .founder-container {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  grid-template-areas: "text image";
  align-items: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.founder-story .founder-text {
  grid-area: text;
}
.founder-story .founder-image {
  grid-area: image;
}
.founder-story .founder-image img {
  width: 100%;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.founder-story .founder-text h2 {
  margin: 0 0 1.1rem;
  font-family: 'Barlow', sans-serif;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: #050505;
}
.founder-story .founder-text p {
  color: var(--text-color);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.clean-hero {
  padding: 4.5rem 1.5rem;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,0.12), transparent 30%),
    linear-gradient(135deg, #eef8ff 0%, #ffffff 60%, #f7fbff 100%);
}

.clean-hero__inner {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 56px 64px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(160,210,240,0.35);
  border-radius: 32px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(15,40,65,0.10), inset 0 1px 0 rgba(255,255,255,0.75);
  max-width: 960px;
  width: min(95%, 960px);
  margin: 0 auto;
}

.clean-copy { flex: 1 1 320px; }

.clean-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(56,189,248,0.10);
  border: 1px solid rgba(56,189,248,0.22);
  color: #0284c7;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.clean-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #38bdf8;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.clean-copy h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  line-height: 1.05;
  color: #14212b;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.clean-copy h2 span {
  background: linear-gradient(90deg, #38bdf8, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.clean-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: #5f7486;
  line-height: 1.8;
  max-width: 340px;
  margin-bottom: 32px;
}

.clean-stats {
  display: flex;
  gap: 28px;
  margin-bottom: 36px;
}

.clean-stat-item { text-align: left; }

.clean-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: #14212b;
  line-height: 1;
}

.clean-stat-label {
  font-size: 11px;
  color: rgba(20,33,43,0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}

.clean-divider {
  width: 1px;
  background: rgba(20,33,43,0.10);
  height: 40px;
  align-self: center;
}

.clean-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-clean {
  position: relative;
  border: none;
  outline: none;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 14px 32px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s;
  box-shadow: 0 8px 24px rgba(14,165,233,0.25);
  overflow: hidden;
}

.btn-clean::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .25s;
}

.btn-clean:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(14,165,233,0.35);
}

.btn-clean:hover::after { opacity: 1; }
.btn-clean:active { transform: translateY(0); }
.btn-clean:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-pill {
  font-size: 13px;
  color: #0284c7;
  font-weight: 500;
  opacity: 0;
  transition: opacity .4s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-pill.visible { opacity: 1; }

.status-pill .dot {
  width: 7px;
  height: 7px;
  background: #38bdf8;
  border-radius: 50%;
  animation: pulse 1s ease-in-out infinite;
}

.window-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.window-outer {
  position: relative;
  width: 280px;
  height: 340px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.22));
}

.frame-outer {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #5a3518, #3b1f08);
  border-radius: 10px;
  z-index: 1;
  box-shadow: inset -4px -4px 10px rgba(0,0,0,0.25), inset 3px 3px 8px rgba(255,190,100,0.12);
}

.frame-inner {
  position: absolute;
  inset: 10px;
  background: linear-gradient(160deg, #7c4e2a, #4a2d0e);
  border-radius: 6px;
  z-index: 2;
  overflow: hidden;
}

.glass-pane {
  position: absolute;
  inset: 8px;
  border-radius: 4px;
  overflow: hidden;
  z-index: 3;
}

#photoBg {
  position: absolute;
  inset: 0;
  background-image: url('images/2.jpg');
  background-size: cover;
  background-position: center top;
  z-index: 0;
  filter: brightness(1.05) saturate(1.1);
}

#soapCanvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

#revealCanvas {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: crosshair;
}

.dividers {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}

.dividers::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, #7c4e2a, #4a2d0e);
  transform: translateX(-50%);
  box-shadow: inset -1px 0 2px rgba(0,0,0,0.3), inset 1px 0 2px rgba(255,180,80,0.15);
}

.dividers::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 6px;
  width: 100%;
  background: linear-gradient(90deg, #7c4e2a, #4a2d0e);
  transform: translateY(-50%);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,180,80,0.15);
}

.sparkle {
  position: absolute;
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  color: rgba(255,255,255,0.95);
  font-size: 18px;
  text-shadow: 0 0 8px rgba(56,189,248,0.9);
}

.glass-pane.done .sparkle { animation: sparkleAnim 1.2s ease forwards; }
.glass-pane.done .sparkle.s1 { animation-delay: 0.1s; top: 10%; left: 18%; }
.glass-pane.done .sparkle.s2 { animation-delay: 0.3s; top: 18%; left: 72%; }
.glass-pane.done .sparkle.s3 { animation-delay: 0.5s; top: 52%; left: 38%; }
.glass-pane.done .sparkle.s4 { animation-delay: 0.2s; top: 68%; left: 78%; }
.glass-pane.done .sparkle.s5 { animation-delay: 0.4s; top: 78%; left: 12%; }

@keyframes sparkleAnim {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.4) rotate(20deg); }
  70% { opacity: 0.8; transform: scale(1.1) rotate(30deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(45deg); }
}

.sheen {
  position: absolute;
  inset: 0;
  z-index: 12;
  background: linear-gradient(130deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

#wiper {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transform-origin: top center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22px;
}

#wiper .squeegee-blade {
  width: 110px;
  height: 14px;
  background: linear-gradient(180deg, #2a2a2a 0%, #111 60%, #1a1a1a 100%);
  border-radius: 3px 3px 4px 4px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -2px 0 rgba(0,0,0,0.5);
  position: relative;
}

#wiper .squeegee-blade::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 4px;
  right: 4px;
  height: 5px;
  background: #333;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

#wiper .rubber-lip {
  width: 106px;
  height: 6px;
  background: linear-gradient(180deg, #555 0%, #222 100%);
  border-radius: 0 0 3px 3px;
  margin-top: -1px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

#wiper .handle {
  width: 10px;
  height: 56px;
  background: linear-gradient(90deg, #888 0%, #ccc 35%, #999 65%, #777 100%);
  border-radius: 5px;
  margin-top: 2px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.35), inset -1px 0 2px rgba(255,255,255,0.2);
}

#wiper .water-trail {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(140,200,240,0.5), transparent);
  border-radius: 2px;
  pointer-events: none;
}

.clean-track { width: 280px; }

.track-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.track-label span {
  font-size: 11px;
  color: rgba(20,33,43,0.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.track-label .pct {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  color: #38bdf8;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(20,33,43,0.08);
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #06b6d4, #38bdf8);
  border-radius: 99px;
  transition: width .3s ease;
  box-shadow: 0 0 8px rgba(56,189,248,0.35);
}

.hint {
  font-size: 11px;
  color: rgba(20,33,43,0.4);
  letter-spacing: 0.06em;
  text-align: center;
  margin-top: 8px;
  transition: opacity .4s;
}

@media (max-width: 768px) {
  .founder-story .founder-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "image";
  }

  .clean-hero__inner {
    flex-direction: column;
    align-items: center;
    padding: 36px 28px;
    gap: 40px;
  }

  .clean-copy {
    text-align: center;
  }

  .clean-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .clean-stats {
    justify-content: center;
  }

  .clean-cta-row {
    justify-content: center;
  }

  .clean-copy h2 {
    font-size: 36px;
  }
}

.meet-founder {
  background: linear-gradient(135deg, #0d2d5e 0%, #1f4f93 100%);
  padding: 5rem 1.5rem;
}

.meet-founder__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: 4rem;
  align-items: start;
}

.meet-founder__image h2 {
  margin: 0 0 1.75rem;
  font-family: 'Barlow', sans-serif;
  font-size: clamp(2.175rem, 4.4vw, 3.975rem);
  line-height: 0.98;
  text-transform: uppercase;
  color: #ffffff;
}

.meet-founder__image h2 span {
  color: #45a9e6;
}

.meet-founder__image img {
  width: 100%;
  display: block;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  object-fit: cover;
}

.meet-founder__content p {
  margin: 0 0 1.2rem;
  color: #eef5ff;
  font-size: 1.05rem;
  line-height: 1.8;
}

.meet-founder__quote {
  margin-top: 0.6rem;
  padding-left: 1.6rem;
  border-left: 3px solid #45a9e6;
  transform: translateY(-14px);
}

.meet-founder__quote p {
  margin-bottom: 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffffff;
}

@media (max-width: 768px) {
  .meet-founder {
    padding: 4rem 1.25rem;
  }

  .meet-founder__container {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .meet-founder__image h2 {
    font-size: 1.775rem;
  }

  .meet-founder__content p,
  .meet-founder__quote p {
    font-size: 1rem;
  }

  .meet-founder__quote {
    transform: none;
  }
}

/* Gallery page specifics */
/* ── Gallery Grid ─────────────────────────────── */
.image-gallery { padding: 3rem 1.5rem; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}

.gallery-card {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.gallery-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Before – desaturated base layer */
.img-before {
  z-index: 1;
  filter: brightness(0.8);
  transition: filter 0.7s ease;
}

/* After – hidden on top */
.img-after {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* Hover reveal */
.gallery-card:hover .img-before { filter: saturate(1) brightness(1); }
.gallery-card:hover .img-after  { opacity: 1; }

/* Badges */
.badge {
  position: absolute;
  bottom: 10px;
  z-index: 3;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.badge-before {
  left: 10px;
  background: rgba(0,0,0,0.5);
  color: #ccc;
  border: 1px solid rgba(255,255,255,0.15);
}

.badge-after {
  right: 10px;
  background: rgba(34,160,90,0.9);
  color: #fff;
  opacity: 0;
  transition: opacity 0.5s ease 0.2s;
}

.gallery-card:hover .badge-before { opacity: 0; }
.gallery-card:hover .badge-after  { opacity: 1; }

/* Responsive */
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* Promise list icons on about page */
.promise-list {
  list-style: none;
  padding-left: 0;
  max-width: 800px;
  margin: 0 auto;
}
.promise-list li {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}
.promise-list li i {
  color: var(--secondary);
  margin-right: 0.6rem;
  font-size: 1.2rem;
}

.reviews {
  padding: 4rem 1rem;
  background: var(--bg-light);
  text-align: center;
}
.reviews h2 {
  color: var(--primary);
  margin-bottom: 1rem;
  font-size: 2rem;
}
.review-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}
.review {
  background: #fff;
  width: 300px;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
}
.review p {
  font-style: italic;
  margin-bottom: 1rem;
  color: var(--text-color);
}
.review h4 {
  font-weight: 600;
  color: var(--primary-dark);
}
.review::before {
  content: '\201C';
  font-size: 3rem;
  color: var(--secondary);
  position: absolute;
  top: -20px;
  left: 10px;
}

/* Footer styles */
footer {
  background: #0d2d52;
  color: #fff;
  padding: 3rem 1rem;
}

/*
 * Enhanced styling for the "Why Choose Us" section.
 * The original design was very minimal, so here we apply our brand
 * gradient as a background and glassy cards for each reason. White
 * typography improves contrast against the darker backdrop. The
 * overrides below come after the base definitions to ensure they
 * take precedence.
 */
.why-choose-us {
  background: #ffffff;
  color: #111;
}

.why-choose-us h2 {
  color: #0d0d0d;
}

.why-choose-us .reasons .reason {
  background: transparent;
  border: none;
  color: #111;
}

.why-choose-us .reasons .reason h3 {
  color: #0d0d0d;
}

.why-choose-us .reasons .reason p {
  color: #666;
}

.why-choose-us .reasons .reason:hover {
  background: transparent;
}

.why-choose-us .icon-circle {
  background: #ebebeb;
}
/*
 * List enhancements
 * Add icons to service area lists and footer quick links. These rules
 * position the icons neatly to the left of the text and provide a
 * consistent colour accent across the site.
 */
.service-areas li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.service-areas li i {
  color: var(--secondary);
}
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/*
 * Form label icons
 * When icons are placed inside form labels (e.g., on the contact page),
 * these rules ensure they align neatly with text and adopt the brand
 * accent colour. A small margin separates the icon from the label text.
 */
form label i {
  /* Icons inside form labels need to be clearly visible and aligned */
  margin-right: 0.5rem;
  color: var(--secondary);
  font-size: 1.2rem;
  vertical-align: middle;
  display: inline-block;
}
.footer-links ul li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
.footer-links ul li i {
  margin-right: 0.5rem;
  color: var(--secondary);
}

/* =============================================================
 * Parallax CTA section
 * A visually engaging banner that uses a fixed background image
 * to create a subtle parallax effect as users scroll. An overlay
 * tint improves text legibility. Place this section above the
 * primary call to action on the home page.
 */
.parallax-cta {
  position: relative;

  background-image: url('images/van.jpg');
  background-size: cover;
  background-position: center;

  /* 🔥 REAL PARALLAX */
  background-attachment: fixed;

  padding: 6rem 1rem;
  min-height: 400px;

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

  text-align: center;
  overflow: hidden;
}

/* overlay */
.parallax-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0, 40, 70, 0.7),
    rgba(0, 63, 110, 0.7)
  );
  z-index: 1;
}

/* content */
.parallax-cta .parallax-content {
  position: relative;
  z-index: 2;

  color: #fff;
  max-width: 800px;
  padding: 1rem;
}

.parallax-cta .parallax-content h2 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
  color: #fff;
  font-weight: 700;
}

.parallax-cta .parallax-content p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #e6eff8;
  line-height: 1.6;
}

/* 🔥 hover animation (premium feel) */
.parallax-cta .btn-primary {
  transition: all 0.3s ease;
}

.parallax-cta .btn-primary:hover {
  transform: translateY(-3px);
}

/* 🔥 MOBILE FIX (IMPORTANT) */
@media (max-width: 768px) {
  .parallax-cta {
    background-attachment: scroll; /* iPhone fix */
    min-height: 300px;
    padding: 4rem 1rem;
  }

  .parallax-cta .parallax-content h2 {
    font-size: 2rem;
  }

  .parallax-cta .parallax-content p {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  /* Tune timeline spacing on narrow devices */
  .timeline li {
    padding-left: 2rem;
  }
  .timeline li .circle {
    left: -1.4rem;
    width: 2rem;
    height: 2rem;
  }
  /* Stack gallery pairs vertically sooner */
  .gallery-pair {
    flex-direction: column;
  }
  .gallery-pair .half {
    min-width: 100%;
  }
  /* Smaller headline sizes for mobile */
  .parallax-cta .parallax-content h2 {
    font-size: 2rem;
  }
  .parallax-cta .parallax-content p {
    font-size: 1rem;
  }
  .contact-form h2 {
    font-size: 1.6rem;
  }
}

@media (max-width: 576px) {
  /* Extra small devices: reduce spacing and font sizes */
  .parallax-cta {
    padding: 4rem 1rem;
  }
  .parallax-cta .parallax-content h2 {
    font-size: 1.8rem;
  }
  .parallax-cta .parallax-content p {
    font-size: 0.95rem;
  }
}

/*
 * Additional breakpoints for very small devices (e.g. iPhone SE, Galaxy
 * Fold screens) and large desktop displays. We shrink the hero
 * headline and adjust spacing on narrow viewports to prevent text
 * overflow. On ultra‑wide screens we scale up the hero headline
 * slightly for better visual balance.
 */
@media (max-width: 425px) {
  .hero-title {
    font-size: 2.2rem;
    line-height: 1.2;
  }
  .hero-subtext {
    font-size: 0.95rem;
  }
  .hero-container {
    padding: 3rem 1rem;
  }
  .card {
    width: 100%;
  }
  .review {
    width: 100%;
  }
  .cred-list {
    flex-wrap: wrap;
    gap: 1.5rem;
  }
}

@media (min-width: 1400px) {
  .hero-title {
    font-size: 4rem;
  }
  .hero-subtext {
    font-size: 1.3rem;
  }
  .card {
    width: 320px;
  }
}

/*
 * Reviews styling
 * Add a subtle quotation mark to each review. The pseudo-element is
 * positioned absolutely relative to the card and uses the accent
 * colour for consistency with other decorative elements.
 */
.review p {
  position: relative;
  padding-left: 1.8rem;
}
.review p::before {
  content: '\201C';
  font-size: 3rem;
  color: var(--secondary);
  position: absolute;
  left: 0;
  top: -0.5rem;
  line-height: 1;
}
.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}
.footer-content h3,
.footer-content h4 {
  margin-bottom: 0.5rem;
  color: #fff;
}
.footer-content p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #fff ;
}
.footer-links ul {
  list-style: none;
}
.footer-links li {
  margin-bottom: 0.5rem;
}
.footer-links a {
  color: #fff;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}
.footer-links a:hover {
  color: var(--secondary);
}
.footer-contact .footer-social a {
  color: #fff;
  font-size: 1.3rem;
  margin-right: 0.5rem;
  transition: color 0.2s ease;
}
.footer-contact .footer-social a:hover {
  color: var(--secondary);
}
.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .navbar ul.nav-links {
    /* Position the mobile menu below the navbar and anchor it to the right side */
    position: absolute;
    top: 100%;
    /* Remove bottom constraint so height is determined by max-height */
    bottom: auto;
    /* Anchor the mobile menu to the top right corner */
    right: 0;
    left: auto;
    /* Limit the menu width to a portion of the screen */
    width: 70%;
    /* Height will be controlled via max-height */
    background: var(--primary-dark);
    flex-direction: column;
    /* Align items to the start so they sit neatly within the menu */
    align-items: flex-start;
    padding: 0.5rem 1.5rem;
    /* Initially hide by setting max-height to zero */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    /* Show a shadow for separation */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    /* Round the bottom corners of the dropdown panel */
    border-radius: 0 0 12px 12px;
  }
  .navbar ul.nav-links li {
    margin: 1rem 0;
  }
  .navbar .hamburger {
    display: flex;
  }
  input#toggle:checked ~ ul.nav-links {
    /* Expand the menu to fill the remaining viewport height when toggled */
    max-height: calc(100vh - 100%);
  }
  .about-home {
    flex-direction: column;
    text-align: center;
  }
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  .footer-links,
  .footer-contact {
    margin-top: 1rem;
  }
  .process-container {
    flex-direction: column;
  }
  .process-right {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-image img {
    height: 150px;
  }
  /* Hero responsiveness */
  .hero-container {
    flex-direction: column;
    text-align: center;
  }
  .hero-left,
  .hero-right {
    flex: 1 1 100%;
    padding: 0;
  }
  .hero-right {
    margin-top: 2rem;
  }
  .hero-title {
    font-size: 2.4rem;
  }
  .navbar ul.nav-links a {
    color: #fff;
    padding: 0.8rem 0;
  }
}

/* 🔥 IMPORTANT (TEXT SELECTION FIX) */
.before-after-section,
.before-after-section * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.before-after-section {
  padding: 5rem 1rem;
  text-align: center;
  background: #f8fafc;
}

.before-after-section h2 {
  font-size: 2.2rem;
  margin-bottom: 2rem;
}

/* container */
.ba-container {
  position: relative;
  max-width: 900px;
  margin: auto;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

/* images */
.ba-img {
  width: 100%;
  display: block;
  pointer-events: none;
}

/* overlay */
.ba-overlay {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
}

/* slider line */
.ba-slider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: white;
  cursor: ew-resize;
  z-index: 10;
}

/* handle */
.handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55px;
  height: 55px;
  background: #0ea5e9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  border: 4px solid white;
}

/* hover effect */
.handle:hover {
  transform: translate(-50%, -50%) scale(1.05);
}
.success-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-box {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  width: 300px;
  animation: fadeIn 0.3s ease;
}

.popup-icon {
  font-size: 40px;
  color: #0ea5e9;
  margin-bottom: 10px;
}

.popup-box h3 {
  margin: 10px 0;
}

.popup-box p {
  font-size: 14px;
  color: #555;
}

.popup-box button {
  margin-top: 15px;
  padding: 10px 20px;
  border: none;
  background: #0ea5e9;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

@keyframes fadeIn {
  from {opacity: 0; transform: scale(0.9);}
  to {opacity: 1; transform: scale(1);}
}

/* ================================================================
   VIDEO STORIES
   Responsive portrait video cards for the home and service pages.
   Videos never autoplay and use lightweight poster images until played.
   ================================================================ */
.video-eyebrow {
  display: inline-block;
  margin-bottom: 0.8rem;
  color: #34b8f0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.portrait-video-card {
  width: min(100%, 360px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(159, 210, 242, 0.45);
  border-radius: 22px;
  background: #071a2e;
  box-shadow: 0 24px 55px rgba(0, 35, 66, 0.24);
}

.portrait-video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 478 / 850;
  border: 0;
  background: #061321;
  object-fit: contain;
}

.portrait-video-card figcaption {
  display: grid;
  gap: 0.28rem;
  padding: 1rem 1.1rem 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}

.portrait-video-card figcaption strong {
  color: #fff;
  font-size: 0.96rem;
  line-height: 1.35;
}

.portrait-video-card figcaption span {
  color: #b8d2e8;
  font-size: 0.8rem;
  line-height: 1.5;
}

.plans-video-section {
  padding: 5.5rem 1.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 18%, rgba(25, 139, 210, 0.25), transparent 32%),
    linear-gradient(135deg, #061321 0%, #0c2845 50%, #0d3c66 100%);
}

.plans-video-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}

.plans-video-copy h2 {
  max-width: 650px;
  margin: 0 0 1rem;
  color: #fff;
  font-family: 'Barlow', 'Montserrat', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-transform: uppercase;
}

.plans-video-copy h2 span {
  color: #4db8ff;
}

.plans-video-intro {
  max-width: 610px;
  margin: 0 0 2rem;
  color: #c2d8eb;
  font-size: 1rem;
}

.plan-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.plan-option {
  min-height: 178px;
  padding: 1.2rem;
  border: 1px solid rgba(77, 184, 255, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.plan-option:hover {
  transform: translateY(-4px);
  border-color: rgba(77, 184, 255, 0.62);
  background: rgba(255, 255, 255, 0.085);
}

.plan-number {
  display: block;
  margin-bottom: 1.4rem;
  color: #4db8ff;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
}

.plan-option h3 {
  margin: 0 0 0.45rem;
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan-option p {
  margin: 0;
  color: #a9c5dc;
  font-size: 0.82rem;
  line-height: 1.55;
}

.plans-video-cta {
  display: inline-block;
}

.testimonials-intro {
  max-width: 640px;
  margin: 0 auto;
  color: #51677c;
}

.testimonial-feature {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 1040px;
  margin: 2.5rem auto 0;
  text-align: left;
}

.testimonial-video-card {
  justify-self: center;
}

.testimonial-quotes {
  display: grid;
  gap: 1.25rem;
}

.testimonial-wide {
  width: auto;
  margin: 0;
  padding: 1.7rem 1.8rem;
}

.testimonial-wide p {
  margin-bottom: 1rem;
}

.testimonial-wide cite {
  color: var(--primary-dark);
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 700;
}

.service-video-section {
  padding: 5rem 1.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 16%, rgba(2, 164, 223, 0.12), transparent 30%),
    linear-gradient(180deg, #eef8fd 0%, #f9fcff 100%);
}

.service-video-shell {
  display: grid;
  grid-template-columns: minmax(280px, 370px) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6.5rem);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

.service-video-section--reverse .service-video-media {
  order: 2;
}

.service-video-section--reverse .service-video-copy {
  order: 1;
}

.service-video-media {
  justify-self: center;
}

.service-video-copy h2 {
  margin: 0 0 1rem;
  color: var(--primary-dark);
  font-family: 'Barlow', 'Montserrat', sans-serif;
  font-size: clamp(2.15rem, 4vw, 3.35rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.07;
  text-transform: uppercase;
}

.service-video-copy h2 span {
  color: var(--secondary);
}

.service-video-copy > p {
  max-width: 620px;
  margin: 0 0 1.5rem;
  color: #40576c;
  font-size: 1rem;
}

.video-benefits {
  display: grid;
  gap: 0.85rem;
  margin: 0 0 0.4rem;
  padding: 0;
  list-style: none;
}

.video-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: #19334b;
  font-size: 0.95rem;
  line-height: 1.5;
}

.video-benefits i {
  display: inline-grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  place-items: center;
  background: #dff3fc;
  color: var(--secondary);
  font-size: 0.76rem;
}

@media (max-width: 900px) {
  .plans-video-shell,
  .testimonial-feature,
  .service-video-shell {
    grid-template-columns: 1fr;
  }

  .plans-video-copy,
  .service-video-copy {
    text-align: center;
  }

  .plans-video-intro,
  .service-video-copy > p {
    margin-right: auto;
    margin-left: auto;
  }

  .plan-options {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
  }

  .plans-video-shell > .portrait-video-card,
  .service-video-media {
    justify-self: center;
  }

  .service-video-section--reverse .service-video-media,
  .service-video-media {
    order: 2;
  }

  .service-video-section--reverse .service-video-copy,
  .service-video-copy {
    order: 1;
  }

  .video-benefits {
    width: min(100%, 560px);
    margin-right: auto;
    margin-left: auto;
    text-align: left;
  }

  .testimonial-quotes {
    width: min(100%, 720px);
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .plans-video-section,
  .service-video-section {
    padding: 4rem 1rem;
  }

  .plan-options {
    grid-template-columns: 1fr;
  }

  .plan-option {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 0.9rem;
    min-height: 0;
    text-align: left;
  }

  .plan-number {
    margin: 0;
  }

  .portrait-video-card {
    width: min(100%, 345px);
    border-radius: 18px;
  }

  .testimonial-wide {
    padding: 1.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan-option {
    transition: none;
  }

  .plan-option:hover {
    transform: none;
  }
}