:root {
  /* === PREMIUM COLOR SYSTEM === */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fb;
  --bg-tertiary: #f0f2f7;
  --text-primary: #0b1120;
  --text-secondary: #4a5568;
  --text-muted: #8a96a8;
  --accent: #c8102e;
  --accent-hover: #a50d25;
  --accent-dark: #7d0a1c;
  --accent-soft: rgba(200, 16, 46, 0.07);
  --accent-light: #fde8ec;
  --white: #ffffff;
  --dark: #0b1120;
  --dark-card: #111827;
  --border-color: #e4e8f0;
  --border-light: rgba(228, 232, 240, 0.6);

  /* === TYPOGRAPHY ===
     One typeface (Inter — the standard choice for polished software
     products: GitHub, Stripe, Linear, Vercel) differentiated by weight
     and size instead of mixing a decorative serif display face with
     two different sans-serifs. Variables kept distinct (rather than
     collapsed into one) since many rules already reference them by
     role and that's worth preserving even though they now share a
     family. */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* === ELEVATED SHADOWS === */
  --shadow-xs: 0 1px 3px rgba(11, 17, 32, 0.04), 0 1px 2px rgba(11, 17, 32, 0.03);
  --shadow-sm: 0 4px 8px -2px rgba(11, 17, 32, 0.06), 0 2px 4px -2px rgba(11, 17, 32, 0.04);
  --shadow-md: 0 12px 24px -6px rgba(11, 17, 32, 0.09), 0 4px 8px -4px rgba(11, 17, 32, 0.05);
  --shadow-lg: 0 24px 48px -12px rgba(11, 17, 32, 0.14), 0 8px 16px -8px rgba(11, 17, 32, 0.06);
  --shadow-xl: 0 40px 80px -20px rgba(11, 17, 32, 0.18), 0 16px 32px -16px rgba(11, 17, 32, 0.08);
  --shadow-accent: 0 8px 30px -4px rgba(200, 16, 46, 0.35);
  --shadow-accent-lg: 0 16px 48px -8px rgba(200, 16, 46, 0.45);

  /* === BORDER RADIUS === */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* === TRANSITIONS === */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.55s cubic-bezier(0.16, 1, 0.3, 1);

  /* === LAYOUT === */
  --container-max-width: 1300px;

  /* Announcement bar height */
  --banner-h: 58px;
}

/* Accessibility: skip-to-content link, visually hidden until focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 10000;
  background: var(--accent);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
}

/* Accessibility: visible focus indicator fallback for any interactive
   element that doesn't already define its own :focus-visible style. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
  letter-spacing: -0.01em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Scroll Progress Bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  width: 0%;
  z-index: 1001;
  transition: width 0.1s ease-out;
}

/* Utilities */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-padding {
  padding: 100px 0;
}

@media (max-width: 1440px) {
  .section-padding {
    padding: 75px 0;
  }
}

@media (max-width: 768px) {
  .section-padding {
    padding: 60px 0;
  }
}

.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.5vw, 3.25rem);
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.section-title em {
  font-style: italic;
  color: var(--accent);
}

@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  max-width: 620px;
  margin: 0 auto 56px;
  line-height: 1.7;
  font-weight: 400;
}

/* Premium section label above titles */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 14px;
  padding: 6px 14px;
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(200, 16, 46, 0.15);
}

/* Top bar banner — sticky so it stays visible while scrolling.
   `sticky` (not `fixed`) is used deliberately: the banner keeps its place
   in normal document flow, so the rest of the page never needs a manual
   top-padding/margin compensation and there is zero layout-shift risk.
   The site-header (also `position: sticky`) is offset below it by
   `var(--banner-h)` so the two stack cleanly instead of overlapping once
   both are pinned. */
.top-banner {
  background: linear-gradient(120deg, #0f172a 0%, #1c2c4c 50%, #0f172a 100%);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: none;
  transition: box-shadow 0.25s ease;
  animation: tbFadeIn 0.5s ease-out both;

  /* Lets .top-banner-inner (and its children) query the bar's own
     rendered width via @container below, rather than assuming it always
     equals the viewport. Set here (not on -inner itself) because a
     container query can't restyle the element that establishes it. */
  container-type: inline-size;
  container-name: tb;
}

/* Elevation appears only once the page has actually scrolled — toggled by
   the existing rAF-throttled scroll listener in app.js (`.scrolled`), the
   same one already used for the header, so no extra scroll listener is added. */
.top-banner.scrolled {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.28);
}

@keyframes tbFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.top-banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(225, 29, 72, 0.7), transparent);
}

.top-banner-inner {
  /* Fluid design tokens — every size below scales continuously with
     viewport width instead of jumping between fixed breakpoints. Scoped
     to the banner (not :root) so they can't leak into or be confused
     with the rest of the site's design tokens. */
  --tb-pad-y: clamp(0.1875rem, 0.16rem + 0.15vw, 0.4375rem);
  --tb-pad-x: clamp(0.6875rem, 0.4rem + 1.4vw, 1.25rem);
  --tb-gap: clamp(0.375rem, 0.1rem + 1.1vw, 1.5rem);
  --tb-item-gap: clamp(0.25rem, 0.22rem + 0.2vw, 0.5rem);
  --tb-icon-size: clamp(1.125rem, 0.98rem + 0.65vw, 1.5rem);
  --tb-icon-font: clamp(0.5rem, 0.46rem + 0.25vw, 0.625rem);
  --tb-label-font: clamp(0.4375rem, 0.4rem + 0.2vw, 0.5rem);
  --tb-value-font: clamp(0.625rem, 0.52rem + 0.4vw, 0.75rem);
  --tb-phone-font: clamp(0.6875rem, 0.5rem + 0.7vw, 0.875rem);
  --tb-divider-h: clamp(0.875rem, 0.72rem + 0.6vw, 1.1875rem);
  --tb-cta-pad-y: clamp(0.25rem, 0.22rem + 0.2vw, 0.375rem);
  --tb-cta-pad-x: clamp(0.6875rem, 0.45rem + 1vw, 1rem);
  --tb-cta-font: clamp(0.625rem, 0.56rem + 0.25vw, 0.6875rem);

  max-width: var(--container-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--tb-gap);
  padding: var(--tb-pad-y) var(--tb-pad-x);
}

/* Shared icon + label/value pattern for the phone, email & location items.
   Grid (rather than inline-flex) gives the icon and text columns
   consistent, independently-sized tracks so every item lines up on the
   same baseline regardless of label/value length. */
.tb-item {
  display: grid;
  grid-template-columns: auto minmax(0, max-content);
  align-items: center;
  gap: var(--tb-item-gap);
  color: var(--white);
  text-decoration: none;
}

.tb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tb-icon-size);
  height: var(--tb-icon-size);
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(155deg, rgba(225, 29, 72, 0.28), rgba(225, 29, 72, 0.1));
  border: 1px solid rgba(225, 29, 72, 0.28);
  color: var(--accent-light);
  font-size: var(--tb-icon-font);
  transition: var(--transition-fast);
}

.tb-phone:active .tb-icon,
.tb-email:active .tb-icon,
.tb-location:active .tb-icon {
  transform: scale(0.9);
}

.tb-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.tb-label {
  font-size: var(--tb-label-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.62);
}

.tb-value {
  font-family: var(--font-heading);
  font-size: var(--tb-value-font);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white);
}

/* Phone number — primary CTA, so it gets extra weight/size and a red glow */
.tb-phone .tb-value {
  font-size: var(--tb-phone-font);
  font-weight: 700;
  text-shadow: 0 0 16px rgba(225, 29, 72, 0.45);
  transition: var(--transition-fast);
}

.tb-phone:hover .tb-icon {
  background: var(--accent);
  color: var(--text-primary);
  transform: scale(1.08);
}

.tb-phone:hover .tb-value {
  color: var(--accent-light);
  text-shadow: 0 0 22px rgba(225, 29, 72, 0.7);
}

/* Email — same icon/spacing language as phone & location, but a lighter
   touch on hover since phone stays the primary CTA */
.tb-email .tb-icon,
.tb-email .tb-value {
  transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.tb-email:hover .tb-icon {
  background: var(--accent);
  color: var(--text-primary);
  transform: scale(1.05);
}

.tb-email:hover .tb-value {
  color: var(--accent-light);
}

.tb-email .tb-value {
  overflow-wrap: anywhere;
}

/* Location — now clickable (links to #areas-covered), same hover language
   as phone & email so all three icons behave consistently */
.tb-location .tb-icon,
.tb-location .tb-value {
  transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.tb-location:hover .tb-icon {
  background: var(--accent);
  color: var(--text-primary);
  transform: scale(1.05);
}

.tb-location:hover .tb-value {
  color: var(--accent-light);
}

/* Divider */
.tb-divider {
  width: 1px;
  height: var(--tb-divider-h);
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}

/* CTA button — fluid padding/typography instead of a fixed width, so it
   scales with the rest of the bar rather than staying pixel-locked. */
.tb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.375rem, 0.3rem + 0.3vw, 0.5rem);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--tb-cta-font);
  letter-spacing: 0.02em;
  padding: var(--tb-cta-pad-y) var(--tb-cta-pad-x);
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.4);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), filter var(--transition-normal);
}

.tb-cta i {
  font-size: clamp(0.6875rem, 0.62rem + 0.25vw, 0.75rem);
  transition: transform var(--transition-fast);
}

.tb-cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.6);
  filter: brightness(1.05);
}

.tb-cta:hover i {
  transform: scale(1.15) rotate(8deg);
}

.tb-cta:active {
  transform: translateY(0) scale(0.97);
}

.tb-phone:focus-visible,
.tb-email:focus-visible,
.tb-location:focus-visible,
.tb-cta:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Below this, the fluid clamp() tokens above have already tightened
   padding/gaps/typography as far as they should go on their own — this
   only corrects the sticky-header offset estimate for small viewports
   (the real value is kept in sync by the ResizeObserver in app.js). */
@media (max-width: 768px) {
  :root {
    --banner-h: 36px;
  }
}

/* Mobile: icon-only compact mode. Below tablet width there isn't room to
   show full contact details without wrapping into several stacked rows,
   so the phone/email/location items collapse to just their icon — a
   single, evenly spaced, tap-friendly row that echoes the desktop bar's
   rhythm at a fraction of the height, sitting neatly above the logo
   instead of pushing it down the page. The number/email/area text stays
   in the markup — still readable by screen readers via each link's
   aria-label and still present for search engines — it's simply not
   duplicated on-screen once space is this tight. */
@container tb (max-width: 47.99rem) {
  .tb-text {
    display: none;
  }

  .tb-item {
    grid-template-columns: auto;
    gap: 0;
    /* Padding here (offset by an equal negative margin so it doesn't
       shift layout) extends the tap target past the visible circle —
       keeps it touch-friendly (still ~40px combined with the icon
       itself) even though its usual visual anchor, the label/value
       text, is hidden at this size. */
    padding: 0.4375rem;
    margin: -0.4375rem;
  }

  /* A slightly taller floor than the general fluid token here — this
     icon is the item's *only* visual anchor once the label/value text
     is hidden, so it stays legible/premium-looking even at the very
     tightest paddings above. */
  .tb-icon {
    width: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    height: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  }

  .tb-divider {
    height: 0.875rem;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 767px) {
    .tb-text {
      display: none;
    }

    .tb-item {
      grid-template-columns: auto;
      gap: 0;
      padding: 0.4375rem;
      margin: -0.4375rem;
    }
  }
}

/* Tablet band: there's room for every item to sit on one row exactly
   like desktop, full text included — it just needs a tighter version of
   the same fluid tokens than the general desktop curve would give it at
   this width, so the row's total content width comes in under the
   container instead of wrapping the CTA to a second line. */
@container tb (min-width: 48rem) and (max-width: 61.9rem) {
  .top-banner-inner {
    --tb-gap: clamp(0.375rem, 0.25rem + 0.8vw, 0.75rem);
    --tb-pad-x: clamp(0.625rem, 0.4rem + 0.8vw, 0.875rem);
    --tb-item-gap: 0.25rem;
    --tb-icon-size: 1.25rem;
    --tb-icon-font: 0.5625rem;
    --tb-label-font: 0.4375rem;
    --tb-value-font: 0.625rem;
    --tb-phone-font: 0.6875rem;
    --tb-cta-pad-x: clamp(0.625rem, 0.4rem + 0.8vw, 0.875rem);
    --tb-cta-font: 0.625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-banner {
    animation: none;
  }

  .top-banner * {
    transition: none !important;
  }

  .tb-cta:hover,
  .tb-phone:hover .tb-icon,
  .tb-email:hover .tb-icon,
  .tb-location:hover .tb-icon {
    transform: none !important;
  }
}

/* Header & Navbar */
.site-header {
  position: sticky;
  /* Sits directly beneath the sticky announcement bar instead of top:0,
     so the two never overlap once both are pinned. --banner-h is kept in
     sync with the banner's real rendered height by app.js. */
  top: var(--banner-h);
  background-color: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 30px rgba(15, 23, 42, 0.03);
  z-index: 999;
  transition: var(--transition-normal);
}

.site-header.scrolled {
  background-color: var(--white);
  box-shadow: var(--shadow-md);
  padding: 5px 0;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Fluid row height instead of a flat 80px at every size — scales
     smoothly from ~50px (mobile) to ~66px (large desktop) rather than
     jumping at a single breakpoint. */
  height: clamp(2.75rem, 2.4rem + 1.15vw, 3.875rem);
}

/* Branded Header Logo */
.logo-container {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  text-decoration: none;
  cursor: pointer;
  color: var(--text-primary);
  transition: var(--transition-fast);
}


.logo-icon {
  height: clamp(1.625rem, 1.4rem + 0.9vw, 2.3125rem);
  width: auto;
  object-fit: contain;
  transition: transform var(--transition-fast) var(--transition-ease);
  flex-shrink: 0;
}

.logo-container:hover .logo-icon {
  transform: scale(1.05);
}

.brand-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.brand-name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.2px;
  line-height: 1.1;
  transition: var(--transition-fast);
}

.brand-tagline {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-top: 2px;
  line-height: 1;
}

/* Fluid, slightly more compact sizing for the header specifically
   (scoped here rather than in the shared .brand-name/.brand-tagline
   rules above, which the footer logo also uses and must stay
   untouched). */
.site-header .brand-name {
  font-size: clamp(0.9375rem, 0.84rem + 0.5vw, 1.1875rem);
}

.site-header .brand-tagline {
  font-size: clamp(0.5rem, 0.47rem + 0.15vw, 0.625rem);
  letter-spacing: 2px;
  margin-top: 1px;
}

/* Footer-specific logo styles */
.footer-logo-container {
  color: var(--white);
  align-items: center;
}

.footer-logo-container .brand-name {
  color: var(--white);
}




.site-footer .logo-container {
  color: var(--text-primary);
  margin-bottom: 24px;
}
.site-footer .brand-name {
  color: var(--text-primary);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 22px;
}


.nav-link {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
  color: var(--text-secondary);
  padding: clamp(0.375rem, 0.32rem + 0.15vw, 0.5rem) 0;
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--accent);
  transition: var(--transition-normal);
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 100%;
}

/* Dropdown Menu */
.nav-item-dropdown {
  position: relative;
}

.nav-item-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  min-width: 440px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
}

.dropdown-link {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.dropdown-link:hover {
  background-color: var(--bg-secondary);
  color: var(--accent);
}

/* Call to Action Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: var(--transition-normal);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--white);
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.4);
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: none;
}

.btn-primary:hover::after {
  animation: shimmer-effect 1.3s ease-out infinite;
}

@keyframes shimmer-effect {
  100% {
    left: 200%;
  }
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.6);
}

.btn-secondary {
  background-color: var(--white);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-secondary:hover {
  background-color: var(--bg-secondary);
  border-color: var(--text-secondary);
}



.btn-outline {
  background-color: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.btn-outline:hover {
  background-color: var(--accent-soft);
  transform: translateY(-2px);
}

/* Fluid, more compact button sizing for the header's own CTA ("Book
   Consultation") specifically — scoped so the rest of the site's
   buttons (hero, forms, etc.) are unaffected. */
.site-header .btn {
  padding: clamp(0.5rem, 0.42rem + 0.35vw, 0.75rem) clamp(1.125rem, 0.9rem + 1vw, 1.75rem);
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
}

/* Mobile Menu Toggle */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 24px;
  position: relative;
}

.mobile-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text-primary);
  position: absolute;
  left: 0;
  transition: var(--transition-normal);
}

.mobile-nav-toggle span:nth-child(1) { top: 0; }
.mobile-nav-toggle span:nth-child(2) { top: 11px; }
.mobile-nav-toggle span:nth-child(3) { bottom: 0; }

.mobile-nav-toggle.open span:nth-child(1) { transform: rotate(45deg); top: 11px; }
.mobile-nav-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.open span:nth-child(3) { transform: rotate(-45deg); bottom: 11px; }

@media (max-width: 1280px) and (min-width: 1025px) {
  .nav-menu {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  .mobile-nav-toggle {
    display: block;
  }

  .nav-menu {
    position: fixed;
    /* Matches .site-header's fluid rendered height at this breakpoint
       (~51px at 1024px down to ~48px at 768px) — see the note further
       down by the more specific <=768px override for why this is a
       static approximation of a fluid value rather than reading it
       directly. */
    top: 51px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 51px);
    background-color: var(--white);
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 24px;
    gap: 24px;
    overflow-y: auto;
    transition: var(--transition-slow);
    box-shadow: var(--shadow-lg);
  }
  
  .nav-menu.open {
    left: 0;
  }
  
  .nav-item-dropdown:hover .dropdown-menu {
    display: none;
  }
  
  .nav-item-dropdown.open .dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    padding-left: 20px;
    margin-top: 10px;
    width: 100%;
  }
  
  .nav-link {
    width: 100%;
    font-size: 1.25rem;
  }
}

/* .nav-container's height, the logo, and the brand text are all fluid
   now (see .nav-container, .logo-icon, .site-header .brand-name/
   .brand-tagline above) and scale down smoothly on their own — nothing
   to override here anymore. Only the mobile nav dropdown's offset/
   height still need a static sync value, since they can't reference the
   fluid height directly (.nav-menu is `position: fixed` but sits inside
   `.site-header`, which is `position: sticky`, and a sticky ancestor
   acts as the containing block for a fixed descendant, so `top` here is
   already relative to the header's own box, not the banner + header
   combined). ~48px matches .site-header's fluid rendered height at this
   breakpoint. */
@media (max-width: 768px) {
  .nav-menu {
    top: 48px;
    height: calc(100vh - 48px);
  }
}


/* Hero Section */
.hero {
  background:
    linear-gradient(135deg,
      rgba(11, 17, 32, 0.93) 0%,
      rgba(40, 10, 18, 0.75) 55%,
      rgba(11, 17, 32, 0.88) 100%),
    url('images/products/luxury_hero_blinds.jpg')
    no-repeat center center / cover;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--white);
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 65% 50%, rgba(200, 16, 46, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(200, 16, 46, 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 2;
}

@media (max-width: 1440px) {
  .hero {
    padding: 60px 0;
    min-height: auto;
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
}

.hero-content {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.8s forwards ease-out 0.2s;
}

.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--accent-light);
  margin-bottom: 20px;
  padding: 7px 16px;
  background: rgba(200, 16, 46, 0.18);
  border: 1px solid rgba(200, 16, 46, 0.4);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
}

.hero-tagline i {
  font-size: 0.65rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.5vw, 5rem);
  font-weight: 600;
  line-height: 1.07;
  margin-bottom: 26px;
  letter-spacing: -0.025em;
}

.hero-title em {
  font-style: italic;
  color: #ff6b7a;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.8rem;
  }
}

.hero-desc {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.72);
  margin-bottom: 44px;
  max-width: 560px;
  line-height: 1.75;
  font-weight: 300;
}

@media (max-width: 1024px) {
  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .hero-buttons {
    justify-content: center;
  }
}

.hero-badge-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 1024px) {
  .hero-badge-wrap {
    justify-content: center;
  }
}

.hero-badge {
  display: flex;
  flex-direction: column;
}
.hero-badge-title {
  font-weight: 700;
  font-size: 1.125rem;
}
.hero-badge-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.hero-image-container {
  position: relative;
  opacity: 0;
  transform: scale(0.95);
  animation: fadeIn 1s forwards ease-out 0.4s, floatCard 6s ease-in-out infinite 1.4s;
}

.hero-image-card {
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease,
              border-color 0.5s ease,
              background-color 0.5s ease;
}

.hero-image-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(200, 16, 46, 0.35);
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px rgba(200, 16, 46, 0.15);
}

.hero-image-card img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease-in-out;
}

.hero-image-card img.fade-out {
  opacity: 0;
}

.hero-image-card:hover img {
  transform: scale(1.02);
}

@keyframes floatCard {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Trust bar */
.trust-bar {
  background: linear-gradient(135deg, var(--dark) 0%, #1a0a0f 50%, var(--dark) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 28px 0;
  position: relative;
  overflow: hidden;
}

.trust-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 120% at 50% 50%, rgba(200,16,46,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.trust-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  position: relative;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  padding: 10px 36px;
  border-right: 1px solid rgba(255,255,255,0.1);
}

.trust-item:last-child {
  border-right: none;
}

.trust-item .fa-circle-check {
  color: var(--accent) !important;
  font-size: 1.1rem;
}

.trust-item-text {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .trust-item {
    padding: 8px 18px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .trust-item:last-child {
    border-bottom: none;
  }
}

/* Why Choose Us Section */
.why-us {
  background-color: var(--bg-secondary);
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

@media (max-width: 1024px) {
  .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .why-us-grid {
    grid-template-columns: 1fr;
  }
}

.why-us-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .why-us-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .why-us-grid-3 {
    grid-template-columns: 1fr;
  }
}

.why-card {
  background: linear-gradient(160deg, #ffffff 0%, #fafafa 100%);
  padding: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.why-card-image {
  width: 100%;
  height: 180px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--border-color);
}

.why-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-card:hover .why-card-image img {
  transform: scale(1.06);
}

.why-card-body {
  padding: 30px 28px 36px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  opacity: 0;
  transition: opacity var(--transition-normal);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.why-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(200, 16, 46, 0.2);
}

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

.why-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-soft), rgba(200, 16, 46, 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--accent);
  font-size: 1.5rem;
  transition: transform var(--transition-normal), background var(--transition-normal);
  border: 1px solid rgba(200, 16, 46, 0.12);
}

.why-card:hover .why-icon {
  transform: scale(1.1) rotate(-3deg);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  border-color: transparent;
}

.why-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.why-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.why-text {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* =============================================
   Subpage Feature Cards — icon-only variant
   (no .why-card-image / .why-card-body wrapper)
   ============================================= */
.why-card.glass-card {
  overflow: visible;
  padding: 0;
  background: var(--white);
}

.why-card.glass-card .why-card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-card.glass-card:hover .why-card-img {
  transform: scale(1.04);
}

.why-card.glass-card .why-card-inner {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.why-card.glass-card .why-icon {
  margin-bottom: 18px;
  width: 52px;
  height: 52px;
  font-size: 1.3rem;
}

.why-card.glass-card .why-title {
  font-size: 1.15rem;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.why-card.glass-card .why-text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* How It Works Section */

.how-it-works {
  background-color: var(--white);
  position: relative;
}

.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background: linear-gradient(to bottom, var(--border-color), var(--accent-soft) 15%, var(--accent) 50%, var(--accent-hover));
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  z-index: 1;
}

@media (max-width: 768px) {
  .timeline::after {
    left: 31px;
  }
}

.timeline-item {
  padding: 10px 40px;
  position: relative;
  width: 50%;
  opacity: 0;
  transform: translateY(30px);
  transition: var(--transition-slow);
  z-index: 2;
}

.timeline-item.animate {
  opacity: 1;
  transform: translateY(0);
}

.timeline-item-left {
  left: 0;
}

.timeline-item-right {
  left: 50%;
}

@media (max-width: 768px) {
  .timeline-item {
    width: 100%;
    left: 0;
    padding-left: 70px;
    padding-right: 20px;
  }
}

.timeline-dot {
  width: 48px;
  height: 48px;
  position: absolute;
  background-color: var(--white);
  border: 3px solid var(--border-color);
  border-radius: 50%;
  top: 15px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.timeline-item.animate .timeline-dot {
  background: radial-gradient(circle, var(--accent) 0%, var(--accent-hover) 100%);
  color: var(--white);
  border-color: var(--white);
  transform: scale(1.12);
  animation: pulseGlow 2s infinite;
}

.timeline-item-left .timeline-dot {
  right: -24px;
}

.timeline-item-right .timeline-dot {
  left: -24px;
}

@media (max-width: 768px) {
  .timeline-dot {
    left: 10px !important;
  }
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0px rgba(225, 29, 72, 0.4), var(--shadow-sm);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(225, 29, 72, 0), var(--shadow-sm);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(225, 29, 72, 0), var(--shadow-sm);
  }
}

.timeline-card {
  padding: 32px;
  background-color: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 24px;
}

.timeline-card-content {
  flex: 1;
}

.timeline-card-image {
  width: 90px;
  height: 90px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background-color: var(--bg-light);
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.timeline-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.timeline-card:hover .timeline-card-image img {
  transform: scale(1.06);
}

@media (max-width: 576px) {
  .timeline-card {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 16px;
    padding: 24px;
  }
  .timeline-card-image {
    width: 100%;
    height: 130px;
  }
}

.timeline-item-left .timeline-card {
  border-right: 4px solid var(--accent);
}

.timeline-item-right .timeline-card {
  border-left: 4px solid var(--accent);
}

@media (max-width: 768px) {
  .timeline-item-left .timeline-card,
  .timeline-item-right .timeline-card {
    border-right: none;
    border-left: 4px solid var(--accent) !important;
  }
}

.timeline-item-left .timeline-card:hover {
  transform: translateX(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.timeline-item-right .timeline-card:hover {
  transform: translateX(8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

@media (max-width: 768px) {
  .timeline-item-left .timeline-card:hover,
  .timeline-item-right .timeline-card:hover {
    transform: translateY(-5px);
  }
}

.timeline-step-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  color: var(--text-primary);
}

.timeline-step-title i {
  color: var(--accent);
  margin-right: 12px;
  font-size: 1.15rem;
  background-color: var(--accent-soft);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-step-desc {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.timeline-cta-container {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

/* Blinds Range Section */
.blinds-range {
  background-color: var(--bg-secondary);
}

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

@media (max-width: 1024px) {
  .range-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .range-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   Blinds Range — Alternating Row Layout
   ============================================= */
.range-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 56px;
}

.range-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 48px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  background: var(--white);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.range-row:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.range-row-reverse {
  direction: rtl;
}

.range-row-reverse > * {
  direction: ltr;
}

.range-row-image {
  position: relative;
  overflow: hidden;
  height: 380px;
}

.range-row-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.range-row:hover .range-row-image img {
  transform: scale(1.05);
}

.range-row-content {
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.range-row-content h2,
.range-row-content h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
}

.range-row-content p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.75;
  margin: 0;
}

.range-row-features {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.range-row-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
}

.range-row-features li i {
  color: var(--accent);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.range-row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .range-row {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .range-row-reverse {
    direction: ltr;
  }
  .range-row-image {
    height: 260px;
  }
  .range-row-content {
    padding: 32px 28px;
  }
  .range-row-content h2,
  .range-row-content h3 {
    font-size: 1.4rem;
  }
}

@media (max-width: 480px) {
  .range-row-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .range-row-actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

.range-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.5s ease, 
              border-color 0.5s ease, 
              background-color 0.5s ease;
  display: flex;
  flex-direction: column;
}

.range-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 35px rgba(225, 29, 72, 0.1);
  border-color: rgba(225, 29, 72, 0.35);
  background: rgba(255, 255, 255, 0.85);
}

.range-image-wrapper {
  position: relative;
  padding-top: 66.67%;
  overflow: hidden;
  background-color: var(--bg-tertiary);
}

.range-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.range-card:hover .range-image-wrapper img {
  transform: scale(1.05);
}

.range-content {
  padding: 22px 24px 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.range-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.range-card:hover .range-title {
  color: var(--accent);
}

.range-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.65;
  margin-bottom: 0;
  flex-grow: 1;
}

/* Installations Gallery Section */
.gallery {
  background-color: var(--white);
}

.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.gallery-item {
  position: relative;
  flex: 0 0 calc(33.333% - 14px);
  padding-top: calc(33.333% - 14px);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  background-color: var(--bg-tertiary);
  will-change: transform, opacity;
}

.gallery-item.scroll-animate {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.gallery-item.scroll-animate.animated {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.gallery-item:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: var(--shadow-lg);
  z-index: 5;
}

@media (max-width: 1024px) {
  .gallery-item {
    flex: 0 0 calc(50% - 10px);
    padding-top: calc(50% - 10px);
  }
}

@media (max-width: 640px) {
  .gallery-item {
    flex: 0 0 100%;
    padding-top: 100%;
  }
}


.gallery-item > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition-normal);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-item:hover > img {
  transform: scale(1.08);
}

.gallery-zoom-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
  transition: var(--transition-normal);
}

.gallery-item:hover .gallery-zoom-icon {
  transform: scale(1);
}

.gallery-zoom-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Small always-on brand watermark in the corner of each installation
   photo — after gallery-overlay in the DOM so it stays above it (and
   thus stays legible) even when the hover overlay is showing. */
.gallery-watermark {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: #0f172a;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.gallery-watermark svg,
.gallery-watermark img {
  position: static !important;
  height: 16px !important;
  width: auto !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  transform: none !important;
  transition: none !important;
}

@media (max-width: 480px) {
  .gallery-watermark {
    font-size: 0.625rem;
    padding: 3px 8px 3px 5px;
    bottom: 8px;
    left: 8px;
  }

  .gallery-watermark svg,
  .gallery-watermark img {
    height: 13px;
    width: auto;
    object-fit: contain;
  }
}

/* Lightbox Modal */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 80%;
}

.lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  border: 4px solid rgba(255, 255, 255, 0.1);
  transform: scale(0.95);
  transition: var(--transition-normal);
}

.lightbox.open .lightbox-img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: none;
  border: none;
  color: var(--white);
  font-size: 2.5rem;
  cursor: pointer;
  line-height: 1;
}

.lightbox-prev, .lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.lightbox-prev:hover, .lightbox-next:hover {
  background-color: var(--accent);
  border-color: var(--accent);
}

.lightbox-prev { left: -70px; }
.lightbox-next { right: -70px; }

@media (max-width: 768px) {
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 10px; right: 10px; }
}

/* Reviews Carousel */
.reviews-section {
  background-color: var(--bg-secondary);
}

.reviews-carousel-container {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 60px;
}

.reviews-slider-wrap {
  overflow: hidden;
  width: 100%;
}

.reviews-slider {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
}

.review-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
}

.review-card {
  background-color: var(--white);
  padding: 50px 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  text-align: center;
  position: relative;
  transform: scale(0.96);
  opacity: 0.85;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.review-slide.active .review-card {
  transform: scale(1);
  opacity: 1;
  box-shadow: var(--shadow-lg);
}

.reviews-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
  z-index: 10;
}

.reviews-nav-btn:hover {
  background-color: var(--accent);
  color: var(--white);
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.08);
  box-shadow: var(--shadow-md);
}

.reviews-prev {
  left: 4px;
}

.reviews-next {
  right: 4px;
}

@media (max-width: 768px) {
  .reviews-carousel-container {
    padding: 20px 0;
  }
  .reviews-nav-btn {
    display: none;
  }
  .review-slide {
    padding: 0 10px;
  }
}


.review-quote-icon {
  font-size: 5rem;
  line-height: 1;
  color: var(--accent-soft);
  position: absolute;
  top: 15px;
  left: 30px;
  font-family: Georgia, serif;
}

.review-text {
  font-size: 1.125rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.review-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--accent-soft);
  border: 1px solid rgba(225, 29, 72, 0.15);
  padding: 6px 16px;
  border-radius: 30px;
  margin: 0 auto 20px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.review-slide.active .review-rating-badge {
  opacity: 1;
  transform: translateY(0);
}

.review-stars {
  color: var(--accent);
  display: flex;
  gap: 4px;
  font-size: 1rem;
}

.review-stars i {
  opacity: 0;
  transform: scale(0.6);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}

.review-slide.active .review-stars i {
  opacity: 1;
  transform: scale(1);
}

.review-slide.active .review-stars i:nth-child(1) { transition-delay: 0.2s; }
.review-slide.active .review-stars i:nth-child(2) { transition-delay: 0.3s; }
.review-slide.active .review-stars i:nth-child(3) { transition-delay: 0.4s; }
.review-slide.active .review-stars i:nth-child(4) { transition-delay: 0.5s; }
.review-slide.active .review-stars i:nth-child(5) { transition-delay: 0.6s; }

.rating-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

.review-author {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
}

.reviews-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}

.review-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--border-color);
  cursor: pointer;
  transition: var(--transition-fast);
}

.review-dot.active {
  background-color: var(--accent);
  transform: scale(1.2);
}

/* Commercial & Landlords */
.commercial {
  background-color: var(--white);
}

.commercial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  align-items: center;
}

@media (max-width: 1024px) {
  .commercial-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.commercial-card-visual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.visual-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.visual-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.commercial-content h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 16px;
}

.commercial-list {
  margin-bottom: 30px;
  display: grid;
  gap: 12px;
}

.commercial-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.commercial-list li svg {
  width: 20px;
  height: 20px;
  fill: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Supplier Trust Area */
.suppliers {
  background-color: var(--text-primary);
  color: var(--white);
  padding: 60px 0;
}

.suppliers-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 40px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.suppliers-flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

.supplier-logo {
  height: 45px;
  width: auto;
  opacity: 0.6;
  filter: brightness(0) invert(1);
  transition: var(--transition-fast);
}

.supplier-logo:hover {
  opacity: 1;
}

/* FAQs Section */
.faqs {
  background-color: var(--bg-secondary);
}

.faqs-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-tab-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.faq-tab-btn {
  padding: 10px 24px;
  border-radius: 50px;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition-normal);
}

.faq-tab-btn.active {
  background-color: var(--accent);
  color: var(--white);
  border-color: var(--accent);
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.2);
}

.faq-group {
  display: none;
}

.faq-group.active {
  display: grid;
  gap: 16px;
}

.faq-item {
  background-color: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition-normal);
}

.faq-header {
  padding: 24px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.faq-question {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.faq-icon-svg {
  width: 20px;
  height: 20px;
  fill: var(--text-secondary);
  transition: var(--transition-normal);
}

.faq-item.open .faq-icon-svg {
  transform: rotate(180deg);
  fill: var(--accent);
}

.faq-item.open {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal) ease-out;
  background-color: var(--bg-secondary);
}

.faq-content-inner {
  padding: 24px 30px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  border-top: 1px solid var(--border-color);
}

/* Appointment / Booking Form Section */
.booking-section {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
}

.booking-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .booking-card {
    grid-template-columns: 1fr;
  }
}

.booking-info {
  background-color: var(--text-primary);
  color: var(--white);
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 640px) {
  .booking-info {
    padding: 30px;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-group-full {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .form-group-full {
    grid-column: span 1;
  }
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  transition: var(--transition-fast);
}

.form-control:focus {
  background-color: var(--white);
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.form-success-message {
  display: none;
  text-align: center;
  padding: 40px 0;
}

.success-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #d1fae5;
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.success-icon-wrap svg {
  width: 40px;
  height: 40px;
  fill: currentColor;
}

.success-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Footer */
.site-footer {
  background-color: var(--text-primary);
  color: var(--white);
  padding: 80px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1.2fr;
  gap: 60px;
  margin-bottom: 60px;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-logo {
  height: 50px;
  width: auto;
  margin-bottom: 24px;
  filter: brightness(0) invert(1);
}

.footer-desc {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: 30px;
}

.footer-socials {
  display: flex;
  gap: 12px;
}

.footer-social-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.footer-social-btn i {
  font-size: 1.05rem;
}

.footer-social-btn:hover,
.footer-social-btn:focus-visible {
  transform: translateY(-3px) scale(1.08);
  color: var(--white);
}

/* Each channel hovers into its own recognizable brand color instead of
   one generic accent tint, so the row reads as distinct contact
   options rather than identical buttons. */
.footer-social-btn--phone:hover,
.footer-social-btn--email:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(225, 29, 72, 0.4);
}

.footer-social-btn--facebook:hover {
  background-color: #1877f2;
  border-color: #1877f2;
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4);
}

.footer-social-btn--whatsapp:hover {
  background-color: #25d366;
  border-color: #25d366;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}

.footer-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 8px;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--accent);
}

.footer-links {
  display: grid;
  gap: 12px;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.footer-links a:hover {
  color: var(--accent);
  padding-left: 5px;
}

.areas-covered-box {
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.areas-covered-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--white);
}

.areas-covered-list {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

.footer-regions-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 15px;
}

.footer-region-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-region-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-region-name::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.footer-city-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.footer-city-tags span {
  font-size: 0.78rem;
  color: var(--text-secondary);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 3px 10px;
  border-radius: 50px;
  transition: all 0.3s ease;
  cursor: default;
}

.footer-city-tags span:hover {
  background-color: rgba(225, 29, 72, 0.12);
  border-color: rgba(225, 29, 72, 0.4);
  color: var(--white);
  transform: translateY(-1px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer-bottom-links a:hover {
  color: var(--accent);
}

/* Scroll Animations */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.scroll-animate.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Keyframes */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Offers Grid CSS */
.offers-section {
  background-color: var(--white);
}
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}
@media (max-width: 360px) {
  .offers-grid {
    grid-template-columns: 1fr;
  }
}
.offer-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition-normal);
}
.offer-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.offer-image {
  height: 220px;
  position: relative;
  overflow: hidden;
}
.offer-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}
.offer-card:hover .offer-image img {
  transform: scale(1.06);
}
.offer-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: var(--accent);
  color: var(--white);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.offer-content {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.offer-price-tag {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 8px;
  font-family: var(--font-heading);
}
.offer-price-tag span {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.offer-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-primary);
  font-family: var(--font-heading);
}
.offer-card-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
  flex-grow: 1;
}
.offer-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.offer-card-features li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.offer-card-features li i {
  color: var(--accent);
}

/* ===================================
   Floating WhatsApp Chat Widget
   =================================== */
.wa-chat-widget {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Freely draggable in any direction — see makeFreelyDraggable() in
     app.js, which converts this to explicit left/top positioning on
     init. The bottom/right above only matter as the pre-JS default.
     touch-action: none stops the page from scrolling under a touch
     drag instead of the widget moving. user-select/-webkit-user-drag
     stop the browser's own native text-selection/link-drag gestures
     from competing with the custom pointer-based drag on the anchor
     inside. */
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.wa-chat-widget .wa-icon-btn,
.wa-chat-widget .wa-bubble-content {
  -webkit-user-drag: none;
  user-select: none;
}

.wa-chat-widget.is-dragging {
  cursor: grabbing;
  transition: none;
  /* The infinite breathing-glow animation (below) sets its own
     `transform: scale()` on alternating cycles, which otherwise fights
     the per-frame translate3d() app.js applies while dragging — the
     widget would visibly snap back to the animation's transform mid-
     drag. Suspending it here (mirrors .bb-chat-toggle.is-dragging in
     chatbot.css) keeps the drag transform authoritative for the whole
     gesture. */
  animation: none;
  /* Hints the compositor to put this on its own GPU layer while it's
     actively being transformed, avoiding a layer-promotion hitch on the
     very first drag frame. Removed once the drag ends (see app.js) so
     the layer isn't kept around needlessly. */
  will-change: transform;
}

/* One-time eased settle after a drag ends — magnetic edge snap and the
   viewport-resize reposition both use this. Deliberately a plain
   ease-out curve (no overshoot) per "no bounce glitches". */
.wa-chat-widget.is-snapping {
  transition: left 0.32s cubic-bezier(0.22, 1, 0.36, 1), top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.wa-chat-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1e2a3a;
  border-radius: 50px;
  padding: 12px 14px 12px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  animation: waSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  border: 1px solid rgba(255,255,255,0.07);
  cursor: grab;
}

.wa-chat-widget.is-dragging .wa-chat-bubble {
  cursor: grabbing;
}

@keyframes waSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.wa-bubble-content {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.wa-bubble-line1 {
  font-size: 0.775rem;
  font-weight: 500;
  color: #94a3b8;
  margin: 0;
  letter-spacing: 0.01em;
}

.wa-bubble-line2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}

.wa-icon-btn {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.wa-icon-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.65);
  color: #ffffff;
}

/* Below 480px the "Need Help? Chat with..." bubble now stays visible
   (matching desktop/laptop) instead of collapsing to icon-only — just
   at a slightly tighter size so it still fits comfortably on the
   narrowest phones without overflowing. */
@media (max-width: 480px) {
  .wa-chat-bubble {
    gap: 8px;
    padding: 8px 10px 8px 14px;
  }

  .wa-bubble-line1 {
    font-size: 0.6875rem;
  }

  .wa-bubble-line2 {
    font-size: 0.8rem;
  }

  .wa-icon-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 1.3rem;
  }
}

/* Cookie Consent Banner */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 850px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  transform: translateY(150%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
  margin: 0 auto;
}

.cookie-banner.show {
  transform: translateY(0);
  opacity: 1;
}

.cookie-content {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  text-align: left;
}

.cookie-icon {
  font-size: 2.2rem;
  color: var(--accent);
  flex-shrink: 0;
}

.cookie-text h3 {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 6px;
  margin-top: 0;
}

.cookie-text p {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition-normal);
}

.cookie-accept {
  background-color: var(--accent);
  border: 1px solid var(--accent);
  color: var(--white);
}

.cookie-accept:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.cookie-decline {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-muted);
}

.cookie-decline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

@media (max-width: 768px) {
  .cookie-banner {
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    text-align: center;
  }
  .cookie-content {
    flex-direction: column;
    gap: 12px;
  }
  .cookie-actions {
    width: 100%;
  }
  .cookie-btn {
    flex: 1;
  }
}

/* Breadcrumbs Navigation */
.breadcrumbs-container {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 14px 0;
  font-size: 0.84rem;
  font-family: var(--font-body);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-secondary);
}

.breadcrumbs a {
  color: var(--text-secondary);
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}

.breadcrumbs a:hover {
  color: var(--accent);
}

.breadcrumbs .separator {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.breadcrumbs .active {
  color: var(--text-primary);
  font-weight: 600;
}

/* New Consultation Booking Card Style */
.new-booking-card {
  background-color: var(--white);
  border-radius: 24px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04), 0 5px 15px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-color);
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--font-body);
}

.new-booking-card-header {
  padding: 40px 40px 20px;
  text-align: left;
}

.new-booking-card-header h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.new-booking-form {
  padding: 0 40px 30px;
}

.new-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.new-form-group {
  display: flex;
  flex-direction: column;
}

.new-form-group-full {
  grid-column: span 2;
}

.new-form-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #7a7a7a;
  margin-bottom: 8px;
}

.new-required-star {
  color: #ff3b30;
  margin-left: 2px;
}

.new-form-control {
  width: 100%;
  padding: 14px 18px;
  border-radius: 6px;
  border: 1px solid transparent;
  background-color: #f7f7f7;
  font-size: 1rem;
  color: var(--text-primary);
  transition: all 0.2s ease;
  height: 52px;
}

select.new-form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px;
  padding-right: 40px;
}

.new-form-control:focus {
  background-color: var(--white);
  border-color: #ddd;
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
}

textarea.new-form-control {
  height: 120px;
  resize: vertical;
}

.new-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
  gap: 20px;
}

.new-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 60%;
}

.new-checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  cursor: pointer;
}

.new-checkbox-label {
  font-size: 0.9rem;
  color: #7a7a7a;
  line-height: 1.4;
}

.new-checkbox-label a {
  color: var(--text-primary);
  text-decoration: underline;
  font-weight: 500;
}

.new-submit-btn {
  background-color: #24303f;
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.new-submit-btn:hover {
  background-color: #1e293b;
  transform: translateY(-1px);
}

/* Review Footer Banner */
.new-booking-footer {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  padding: 24px 30px;
  text-align: center;
  color: var(--white);
}

.new-booking-footer-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 20px;
  letter-spacing: 0.2px;
}

.new-reviews-logos {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.new-review-logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.new-review-logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .new-booking-card-header h2 {
    font-size: 1.8rem;
  }
  .new-booking-card-header {
    padding: 30px 24px 15px;
  }
  .new-booking-form {
    padding: 0 24px 24px;
  }
  .new-form-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .new-form-group-full {
    grid-column: span 1;
  }
  .new-form-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 20px;
  }
  .new-checkbox-group {
    max-width: 100%;
  }
  .new-submit-btn {
    width: 100%;
    text-align: center;
  }
  .new-reviews-logos {
    flex-direction: column;
    gap: 24px;
  }
}

/* Interactive Coverage Map Styling */
.coverage-section {
  background-color: #f8fafc;
}

.coverage-grid {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 30px;
  margin-top: 40px;
  background-color: var(--white);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.coverage-control-card {
  /* min-width: 0 overrides the browser default of min-width: auto on
     grid/flex items — without it, a grid track sized as "1fr" still
     won't shrink narrower than its content's intrinsic width, so on
     mobile the postcode input/tab buttons were silently forcing this
     column (and the whole grid) wider than the viewport, getting
     clipped by overflow:hidden instead of actually fitting the screen. */
  min-width: 0;
  padding: 30px;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--border-color);
}

.coverage-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 25px;
}

.coverage-tab-btn {
  padding: 14px 20px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: #f8fafc;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.coverage-tab-btn i {
  color: var(--text-muted);
  font-size: 1.1rem;
}

.coverage-tab-btn:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

.coverage-tab-btn.active {
  background-color: #24303f;
  color: var(--white);
  border-color: #24303f;
}

.coverage-tab-btn.active i {
  color: var(--accent);
}

.postcode-checker-box {
  background-color: #f8fafc;
  padding: 20px;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  margin-bottom: 25px;
}

.postcode-checker-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.postcode-checker-title i {
  color: var(--accent);
}

.postcode-checker-input-wrap {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.postcode-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  font-size: 0.95rem;
  background-color: var(--white);
  text-transform: uppercase;
}

.postcode-input:focus {
  outline: none;
  border-color: var(--accent);
}

.postcode-btn {
  padding: 10px 16px;
  background-color: #24303f;
  color: var(--white);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.postcode-btn:hover {
  background-color: #1e293b;
}

.postcode-result {
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  display: none;
}

.postcode-result.success {
  color: #10b981;
  display: block;
}

.postcode-result.error {
  color: #ef4444;
  display: block;
}

.coverage-details-info {
  margin-bottom: 25px;
}

.coverage-details-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.coverage-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coverage-details-item {
  font-size: 0.9rem;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

.coverage-details-item i {
  color: var(--accent);
  margin-top: 3px;
  font-size: 0.8rem;
}

.coverage-map-wrap {
  min-width: 0;
  width: 100%;
  height: 400px;
  position: relative;
  background-color: #e5e7eb;
}

#map,
#map-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Ensure Leaflet zoom controls and styles look clean */
.leaflet-container {
  font-family: inherit !important;
}

.leaflet-bar {
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.leaflet-bar a {
  background-color: var(--white) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  transition: all 0.2s ease !important;
}

.leaflet-bar a:hover {
  background-color: #f8fafc !important;
}

/* Responsive map rules */
@media (max-width: 992px) {
  .coverage-grid {
    grid-template-columns: 1fr;
  }
  .coverage-control-card {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  .coverage-map-wrap {
    height: 300px;
  }
}


/* ============================================================
   TRUSTPILOT WIDGET STYLES
   ============================================================ */

.trustpilot-microbox {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1.5px solid rgba(0, 182, 122, 0.3);
  padding: 10px 22px;
  border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(0, 182, 122, 0.1);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}

.trustpilot-microbox:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 182, 122, 0.2);
  border-color: #00b67a;
}

.trustpilot-microbox:hover .fa-arrow-up-right-from-square {
  color: #00b67a !important;
}

.tp-star-icon {
  animation: tp-pulse 2.8s ease-in-out infinite;
}

@keyframes tp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 182, 122, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(0, 182, 122, 0); }
}

/* Floating Trustpilot Badge (bottom-left) */
.tp-floating-badge {
  position: fixed;
  bottom: 90px;
  left: 20px;
  z-index: 9990;
  background: var(--white);
  border: 1.5px solid rgba(0, 182, 122, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.tp-floating-badge:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 36px rgba(0, 182, 122, 0.22);
}

.tp-floating-logo {
  background: #00b67a;
  color: #fff;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: sans-serif;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.tp-floating-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tp-floating-score {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.tp-floating-count {
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1;
}

.tp-stars-green {
  color: #00b67a;
  font-size: 0.75rem;
  letter-spacing: 1px;
}

/* Hide floating badge on very small screens if it overlaps WA */
@media (max-width: 480px) {
  .tp-floating-badge {
    bottom: 80px;
    left: 12px;
    min-width: 150px;
    padding: 8px 10px;
  }
}

/* Fix Leaflet map controls overlapping sticky header on scroll */
#map,
.leaflet-container {
  z-index: 990 !important;
}

/* ============================================================
   GLASSMORPHISM & PREMIUM SCROLL REVEAL STYLES
   ============================================================ */

/* Frost glass card container */
.glass-card {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.05) !important;
  transition: transform var(--transition-normal) var(--transition-ease),
              box-shadow var(--transition-normal) var(--transition-ease),
              border-color var(--transition-normal) !important;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(225, 29, 72, 0.45) !important;
  box-shadow: 0 12px 40px 0 rgba(225, 29, 72, 0.12) !important;
  transform: translateY(-4px) !important;
}

/* Glassmorphism for specific elements */
.timeline-card,
.postcode-checker-box {
  background: rgba(248, 250, 252, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(203, 213, 225, 0.6) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}

.new-booking-card {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06) !important;
}

/* Scroll reveal system with premium flex scale-up motion */
.reveal-fade-up,
.scroll-animate {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal-fade-up.revealed,
.scroll-animate.animated {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Delayed transition utilities for staggered grids */
.delay-100 { transition-delay: 100ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }

/* Breathing blinking glow for floating contact widgets */
.wa-chat-widget,
.tp-floating-badge {
  animation: breathing-glow 3s ease-in-out infinite alternate;
}

@keyframes breathing-glow {
  0% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }
  100% {
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.15), 0 0 10px rgba(225, 29, 72, 0.1);
    transform: scale(1.02);
  }
}

/* Booking Header Subtitle & accent */
.new-booking-subtitle {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-top: 8px;
  font-weight: 500;
  line-height: 1.4;
}

.booking-header-accent-line {
  width: 70px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: 50px;
  margin-top: 15px;
}

/* Form inputs hover & focus animations */
.new-form-control {
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  background-color: rgba(247, 247, 247, 0.6) !important;
  transition: border-color var(--transition-normal),
              box-shadow var(--transition-normal),
              background-color var(--transition-normal) !important;
}

.new-form-control:hover {
  border-color: rgba(225, 29, 72, 0.25) !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.new-form-control:focus {
  background-color: var(--white) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.15) !important;
  outline: none;
}

/* Submit Button Theme Sync with Shimmer & Scale Animation */
.new-submit-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.3) !important;
  transition: transform var(--transition-normal),
              box-shadow var(--transition-normal) !important;
  position: relative;
  overflow: hidden;
}

.new-submit-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: none;
}

.new-submit-btn:hover::after {
  animation: shimmer-effect 1.3s ease-out infinite;
}

.new-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.5) !important;
}

/* Action alignment responsive flex overrides */
@media (max-width: 640px) {
  .new-form-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .new-checkbox-group {
    max-width: 100% !important;
  }
  .new-submit-btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* Custom styling for the second dropdown ("Areas Covered") to be a single-column layout on desktop */
@media (min-width: 1025px) {
  .nav-item-dropdown:nth-of-type(2) .dropdown-menu {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    gap: 4px;
  }
}

/* ====================================================================
   🏆 PREMIUM DESIGN UPGRADE — BlissfulBlinds v3.0
   Elevating every key section with premium typography, refined
   spacing, glass morphism, and sophisticated micro-interactions.
   ==================================================================== */

/* --- HERO BUTTON ENHANCEMENTS --- */
.hero .btn-primary {
  padding: 16px 36px;
  font-size: 1rem;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-accent);
}

.hero .btn-secondary {
  padding: 15px 32px;
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: white;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
}

.hero .btn-secondary:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
  color: white;
}

.hero-badge-wrap {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 44px;
  padding-top: 28px;
}

.hero-badge-title {
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-heading);
}

.hero-badge-sub {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
}

/* --- SECTION BACKGROUND ALTERNATION --- */
.why-us {
  background: linear-gradient(180deg, #f8f9fb 0%, #ffffff 100%);
  position: relative;
}

.how-it-works {
  background: #ffffff;
}

/* --- OFFER CARDS — PREMIUM UPGRADE --- */
.offer-card {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal) !important;
  background: #ffffff;
}

.offer-card:hover {
  transform: translateY(-12px) !important;
  box-shadow: var(--shadow-xl) !important;
  border-color: rgba(200, 16, 46, 0.25) !important;
}

.offer-badge {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 5px 14px !important;
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.4) !important;
}

.offer-price-tag {
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}

.offer-price-tag span {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0 !important;
}

.offer-card-title {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* --- RANGE ROWS (PRODUCT SECTION) — PREMIUM UPGRADE --- */
.range-row {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  border: 1px solid var(--border-color) !important;
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal) !important;
}

.range-row:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(200, 16, 46, 0.15) !important;
}

.range-row-image img {
  transition: transform 0.7s var(--ease-premium) !important;
}

.range-row:hover .range-row-image img {
  transform: scale(1.04) !important;
}

.range-row-content h3 {
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

/* --- TIMELINE ENHANCEMENTS --- */
.timeline-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-color) !important;
  background: #ffffff !important;
  box-shadow: var(--shadow-sm) !important;
}

.timeline-step-title {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* --- FOOTER PREMIUM UPGRADE --- */
.site-footer {
  background: #f7f9fc !important; /* Soft premium off-white/light-grey */
  position: relative;
  overflow: hidden;
  padding: 0 !important; /* Fix double padding */
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 25%, var(--gold) 50%, var(--accent) 75%, transparent 100%);
}

.site-footer::after {
  content: '';
  position: absolute;
  top: -200px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(200, 16, 46, 0.02) 0%, transparent 65%);
  pointer-events: none;
}

.footer-grid {
  position: relative;
  z-index: 1;
  padding-top: 60px !important;
  padding-bottom: 50px !important;
  display: grid !important;
  grid-template-columns: 1.4fr 0.8fr 1.8fr !important;
  gap: 60px !important;
}

@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 50px !important;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding-top: 40px !important;
    padding-bottom: 30px !important;
  }
}

.footer-desc {
  font-size: 0.9375rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
}

.footer-title {
  font-family: var(--font-heading) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--text-primary) !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.footer-links a {
  color: var(--text-secondary) !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  transition: color var(--transition-fast), padding-left var(--transition-fast) !important;
  display: block;
  padding: 5px 0 !important;
}

.footer-links a:hover {
  color: var(--accent) !important;
  padding-left: 6px !important;
}

.footer-social-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  color: var(--text-secondary) !important;
  font-size: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--transition-normal) !important;
}

.footer-social-btn:hover {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: white !important;
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 8px 24px rgba(200, 16, 46, 0.2) !important;
}

.footer-region-name {
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  font-family: var(--font-heading) !important;
}

.footer-city-tags span {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-xs) !important;
  font-size: 0.75rem !important;
  padding: 3px 10px !important;
  transition: all var(--transition-fast) !important;
}

.footer-city-tags span:hover {
  background: rgba(200, 16, 46, 0.08) !important;
  border-color: rgba(200, 16, 46, 0.25) !important;
  color: var(--accent) !important;
}

.footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.footer-bottom p {
  color: var(--text-muted) !important;
  font-size: 0.8125rem !important;
}

.footer-bottom-links a {
  color: var(--text-muted) !important;
  font-size: 0.8125rem !important;
}

.footer-bottom-links a:hover {
  color: var(--accent) !important;
}

/* Areas covered box in footer */
.areas-covered-box {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px 24px 32px 24px !important; /* Added extra bottom padding to prevent overflow */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.areas-covered-title {
  font-family: var(--font-heading) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--text-primary) !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Elegant office classes */
.footer-office-elegant {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-office-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.footer-office-item i {
  color: var(--gold);
  font-size: 1.1rem;
  margin-top: 4px;
}
.footer-office-title {
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: block;
}
.footer-office-text {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
}
.footer-office-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  transition: color var(--transition-fast) var(--transition-ease);
}
.footer-office-link:hover {
  color: var(--accent-hover);
}

/* Office info block in footer */
.footer-office-info {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px 18px !important;
}

/* --- REVIEWS / TESTIMONIALS UPGRADE --- */
.review-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-color) !important;
  background: linear-gradient(150deg, #fff 0%, #fafafa 100%) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal) !important;
}

.review-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-6px) !important;
}

/* --- BOOKING FORM ENHANCEMENT --- */
.new-booking-card {
  border-radius: var(--radius-xl) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow: 0 32px 80px rgba(11, 17, 32, 0.08) !important;
}

/* --- GALLERY / RECENT INSTALLATIONS --- */
.gallery-item,
.installation-card {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal) !important;
}

.gallery-item:hover,
.installation-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* --- NAVIGATION PREMIUM UPGRADE --- */
.nav-link {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

.site-header {
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.35) !important;
}

.dropdown-menu {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 16px 40px rgba(11, 17, 32, 0.12) !important;
}

.dropdown-link:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* --- SCROLL REVEAL ANIMATION --- */
.scroll-animate {
  opacity: 0;
  transform: translateY(36px) scale(0.98);
  transition: opacity 0.75s var(--ease-premium), transform 0.75s var(--ease-premium);
}

.scroll-animate.animated {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered delays for grids */
.scroll-animate:nth-child(2) { transition-delay: 90ms; }
.scroll-animate:nth-child(3) { transition-delay: 180ms; }
.scroll-animate:nth-child(4) { transition-delay: 270ms; }
.scroll-animate:nth-child(5) { transition-delay: 360ms; }

/* --- BTN ENHANCEMENTS --- */
.btn {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  border-radius: var(--radius-pill) !important;
}

.btn-primary {
  box-shadow: var(--shadow-accent) !important;
}

.btn-primary:hover {
  box-shadow: var(--shadow-accent-lg) !important;
  transform: translateY(-2px) !important;
}

/* --- PREMIUM SECTION DIVIDER --- */
.section-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: var(--radius-pill);
  margin: 20px auto 0;
}

/* --- SCROLLBAR PREMIUM STYLE --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* --- TEXT SELECTION --- */
::selection {
  background: var(--accent);
  color: white;
}

/* --- ANIMATIONS --- */
@keyframes shimmerBg {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* --- MOBILE RESPONSIVE POLISH --- */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 100px 0 60px;
  }
  .trust-bar .trust-flex {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 24px;
  }
  .trust-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    width: 100%;
    padding: 12px 0 !important;
  }
  .trust-item:last-child {
    border-bottom: none !important;
  }
}

/* --- FOOTER BOTTOM LEGAL DISCLOSURE PREMIUM DESIGN --- */
.footer-bottom {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.footer-bottom-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
  width: 100% !important;
}

.footer-bottom-row p {
  margin: 0 !important;
  color: var(--text-muted) !important;
  font-size: 0.8125rem !important;
}

.footer-bottom-links {
  display: flex !important;
  gap: 20px !important;
  margin: 0 !important;
}

.footer-legal-disclosure {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-top: 15px !important;
  width: 100% !important;
}

.footer-legal-disclosure p {
  margin: 0 !important;
  font-size: 0.72rem !important;
  line-height: 1.65 !important;
  color: var(--text-muted) !important;
  opacity: 0.55 !important;
  font-weight: 400 !important;
  letter-spacing: 0.010em !important;
}

@media (max-width: 768px) {
  .footer-bottom-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }
  
  .footer-legal-disclosure p {
    text-align: center !important;
  }
}