/* ==========================================================================
   BRUSH & ROLL - COMPONENTS & LAYOUT SYSTEM
   ========================================================================= */

/* ==========================================================================
   1. Section Wrapper & Container Grid
   ========================================================================== */

.section-wrapper {
  padding: clamp(3rem, 8vw, 6rem) 0;
  position: relative;
  width: 100%;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

/* 12-Column Responsive Grid */
.container-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-lg);
}

.col-12 {
  grid-column: span 12;
}

.col-8 {
  grid-column: span 8;
}

.col-7 {
  grid-column: span 7;
}

.col-6 {
  grid-column: span 6;
}

.col-5 {
  grid-column: span 5;
}

.col-4 {
  grid-column: span 4;
}

.col-3 {
  grid-column: span 3;
}

.col-2 {
  grid-column: span 2;
}

@media (max-width: 991px) {
  .container-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .col-12 {
    grid-column: span 2;
  }

  .col-8,
  .col-7,
  .col-6,
  .col-5 {
    grid-column: span 2;
  }

  .col-4,
  .col-3,
  .col-2 {
    grid-column: span 1;
  }
}

@media (max-width: 575px) {
  .container-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .col-12 {
    grid-column: span 1;
  }

  .col-8,
  .col-7,
  .col-6,
  .col-5,
  .col-4,
  .col-3,
  .col-2 {
    grid-column: span 1;
  }
}

/* ==========================================================================
   2. Sticky Navigation Bar
   ========================================================================== */

/* Floating capsule geometry is constant; only the surface (background, border,
   shadow, blur) fades in on scroll. The blur lives on a ::before layer because
   backdrop-filter on the header itself would trap the fixed mobile drawer
   inside the header's containing block. */
.navbar-header {
  position: fixed;
  top: 12px;
  left: 16px;
  right: 16px;
  width: auto;
  max-width: 1280px;
  margin: 0 auto;
  z-index: 1000;
  background-color: transparent;
  transition: background-color var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  padding: 8px 0;
  border: 1px solid transparent;
  border-radius: 999px;
}

/* Navbar CTA is slimmer than the standard .btn pill used in heroes/footers */
.navbar-header .btn-cta {
  padding: 0.65rem 1.6rem;
  font-size: 0.8rem;
}

/* Frosted blur layer behind the capsule (fades in when scrolled) */
.navbar-header::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--transition-normal);
}

/* Scrolled: dark navy glass pill — keeps white content readable over ANY
   section scrolling beneath (light cards, green sections, video heroes) */
.navbar-header.nav-scrolled {
  background-color: rgba(29, 53, 87, 0.78);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 32px rgba(10, 25, 40, 0.35);
}

.navbar-header.nav-scrolled::before {
  opacity: 1;
}

/* Content inside the dark pill is always light for desktop navigation */
.navbar-header.nav-scrolled .nav-links .nav-link {
  color: rgba(255, 255, 255, 0.88);
}

.navbar-header.nav-scrolled .nav-links .nav-link:hover {
  color: var(--color-white);
}

.navbar-header.nav-scrolled .nav-links .nav-link::after {
  background-color: rgba(255, 255, 255, 0.85);
}

.navbar-header.nav-scrolled .nav-links .nav-link.active::after {
  background-color: var(--color-sage);
}

body:not(.menu-open) .navbar-header.nav-scrolled .nav-toggle-inner,
body:not(.menu-open) .navbar-header.nav-scrolled .nav-toggle-inner::before,
body:not(.menu-open) .navbar-header.nav-scrolled .nav-toggle-inner::after {
  background-color: var(--color-white);
}

/* CTA inverts to white inside the dark pill for maximum punch */
.navbar-header.nav-scrolled .btn-cta {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-navy);
}

.navbar-header.nav-scrolled .btn-cta:hover {
  background-color: var(--color-sand);
  border-color: var(--color-sand);
  color: var(--color-navy);
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  /* Frosted white chip (mirrors .footer-logo) — the dark logo lockup stays
     readable over dark heroes, green sections AND white cards alike */
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(29, 53, 87, 0.1);
  padding: 4px 6px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(10, 25, 40, 0.18);
  flex-shrink: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.nav-logo:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 6px 20px rgba(10, 25, 40, 0.25);
}

.logo-image {
  height: clamp(28px, 2.5vw, 36px);
  width: auto;
  object-fit: contain;
  transition: transform var(--transition-normal), height var(--transition-normal);
}

/* Removed logo-image shrink on scroll to keep same height as first slide */

.nav-logo:hover .logo-image,
.footer-logo:hover .logo-image {
  transform: scale(1.05);
}

.logo-text-stacked {
  display: flex;
  flex-direction: column;
  text-align: center;
  line-height: 0.92;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.75rem, 0.85vw, 0.92rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: font-size var(--transition-normal);
}

.nav-logo .logo-text-stacked {
  margin-left: -4px;
}

/* Removed logo-text-stacked shrink on scroll to keep same font-size as first slide */

/* Lockup always sits on the white chip, so it stays dark on every background */
.logo-line {
  display: block;
  color: var(--color-navy);
}

.logo-line-1 {
  align-self: flex-start;
}

.logo-line-2 {
  font-style: italic;
  font-size: 0.82rem;
  align-self: center;
  color: var(--color-teal);
}

.logo-line-3 {
  align-self: flex-end;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, var(--spacing-md));
  flex-wrap: nowrap;
}

.nav-link {
  font-family: var(--font-tags);
  font-size: clamp(0.75rem, 0.85vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  position: relative;
  padding: 0.25rem 0;
  white-space: nowrap;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
}

.nav-link:hover {
  color: var(--color-blue);
  transform: translateY(-1px);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.nav-link.active::after {
  background-color: var(--color-sage);
  transform: scaleX(1);
}

/* Mobile Navigation Toggle Button */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1100;
  position: relative;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color var(--transition-fast);
}

.nav-toggle:hover {
  background-color: rgba(29, 53, 87, 0.05);
}

.nav-toggle-box {
  display: block;
  width: 24px;
  height: 18px;
  position: relative;
}

.nav-toggle-inner,
.nav-toggle-inner::before,
.nav-toggle-inner::after {
  width: 24px;
  height: 2px;
  background-color: var(--color-navy);
  position: absolute;
  transition: transform var(--transition-normal), opacity var(--transition-normal), background-color var(--transition-normal);
  border-radius: 2px;
}

.nav-toggle-inner {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.nav-toggle-inner::before {
  content: '';
  top: -8px;
  left: 0;
}

.nav-toggle-inner::after {
  content: '';
  top: 8px;
  left: 0;
}

/* Morph Hamburger to X & ensure high-contrast close button when drawer is open */
.menu-open .nav-toggle-inner {
  transform: rotate(45deg);
}

.menu-open .nav-toggle-inner::before {
  opacity: 0;
  transform: translateY(8px);
}

.menu-open .nav-toggle-inner::after {
  transform: translateY(-8px) rotate(-90deg);
}

.menu-open .nav-toggle-inner,
.menu-open .nav-toggle-inner::before,
.menu-open .nav-toggle-inner::after,
body.menu-open .navbar-header .nav-toggle-inner,
body.menu-open .navbar-header .nav-toggle-inner::before,
body.menu-open .navbar-header .nav-toggle-inner::after {
  background-color: var(--color-navy) !important;
}

body.menu-open .nav-toggle {
  background-color: rgba(29, 53, 87, 0.1) !important;
}

body.menu-open .nav-toggle:hover {
  background-color: rgba(29, 53, 87, 0.2) !important;
}

/* Mobile Drawer & Overlay */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(29, 53, 87, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 320px;
  height: 100dvh;
  height: 100vh; /* fallback for older browsers */
  height: 100dvh;
  background-color: var(--color-mist);
  /* Soft Mist as requested */
  z-index: 1060;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xxl) var(--spacing-md) var(--spacing-xl);
  padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  overflow-y: auto;
}

/* Toggle Menu Open/Close States (Fallback if GSAP is not running) */
body.menu-open .nav-overlay {
  opacity: 1;
  visibility: visible;
}

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

/* Fallback CSS transitions if GSAP is disabled/not running */
body:not(.gsap-nav-anim) .nav-overlay {
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

body:not(.gsap-nav-anim) .nav-drawer {
  transition: transform var(--transition-normal);
}

/* Disable body scroll when menu open */
body.menu-open {
  overflow: hidden;
  height: 100vh;
}

/* Mobile Navigation Breakpoint Adjustments */
@media (max-width: 991px) {
  .navbar-header {
    top: 8px;
    left: 12px;
    right: 12px;
    padding: 4px 10px;
  }

  .nav-toggle {
    display: flex;
    width: 32px;
    height: 32px;
  }

  .nav-toggle-box {
    width: 18px;
    height: 12px;
  }

  .nav-toggle-inner,
  .nav-toggle-inner::before,
  .nav-toggle-inner::after {
    width: 18px;
    height: 1.5px;
    border-radius: 1px;
  }

  .nav-toggle-inner::before {
    top: -5px;
  }

  .nav-toggle-inner::after {
    top: 5px;
  }

  .menu-open .nav-toggle-inner::before {
    opacity: 0;
    transform: translateY(5px);
  }

  .menu-open .nav-toggle-inner::after {
    transform: translateY(-5px) rotate(-90deg);
  }

  /* Hide desktop links and CTA */
  .navbar-container .nav-links {
    display: none;
  }

  /* Compact logo symbol only on mobile */
  .nav-logo .logo-text-stacked {
    display: none !important;
  }

  .nav-logo {
    padding: 3px 6px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(10, 25, 40, 0.12);
  }

  .nav-logo .logo-image {
    height: 20px;
    width: auto;
  }

  .nav-drawer .nav-links-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
  }

  .nav-drawer .nav-link,
  .navbar-header .nav-drawer .nav-link,
  body.home-page .navbar-header .nav-drawer .nav-link,
  body.services-page .navbar-header .nav-drawer .nav-link {
    font-size: 1.25rem;
    padding: var(--spacing-xs) 0;
    width: fit-content;
    color: var(--color-navy) !important;
    font-weight: 600;
  }

  .nav-drawer .nav-link:hover,
  .nav-drawer .nav-link:focus,
  .navbar-header .nav-drawer .nav-link:hover,
  .navbar-header .nav-drawer .nav-link:focus,
  body.home-page .navbar-header .nav-drawer .nav-link:hover,
  body.services-page .navbar-header .nav-drawer .nav-link:hover {
    color: var(--color-blue) !important;
  }

  .nav-drawer .nav-link.active,
  .navbar-header .nav-drawer .nav-link.active,
  body.home-page .navbar-header .nav-drawer .nav-link.active,
  body.services-page .navbar-header .nav-drawer .nav-link.active {
    color: var(--color-navy) !important;
    font-weight: 700;
  }

  .nav-drawer .nav-link::after,
  .navbar-header .nav-drawer .nav-link::after,
  body.home-page .navbar-header .nav-drawer .nav-link::after,
  body.services-page .navbar-header .nav-drawer .nav-link::after {
    background-color: var(--color-navy) !important;
  }

  .nav-drawer .btn-cta {
    width: 100%;
    margin-top: auto;
  }
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-tags);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.9rem 2.2rem;
  border-radius: 50px;
  /* Pill Shape */
  cursor: pointer;
  transition: transform var(--transition-fast),
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal),
    box-shadow var(--transition-normal),
    letter-spacing var(--transition-fast);
  border: 2px solid transparent;
  outline: none;
  text-align: center;
}

/* Primary Navy Button */
.btn-primary {
  background-color: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

.btn-primary:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Outline Button */
.btn-outline {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.btn-outline:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* CTA Pill Button (Accentuated Primary) */
.btn-cta {
  background-color: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
  box-shadow: var(--shadow-sm);
}

.btn-cta:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* CTA Light (For Navy or Darker BGs) */
.btn-cta-light {
  background-color: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.btn-cta-light:hover {
  background-color: var(--color-sand);
  border-color: var(--color-sand);
  color: var(--color-navy);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   4. Basic Card Styles
   ========================================================================== */

.card {
  background-color: var(--color-white);
  border-radius: 12px;
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal),
    box-shadow var(--transition-normal);
  border: 1px solid rgba(29, 53, 87, 0.04);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   5. Hero Section
   ========================================================================== */

.hero-section {
  position: relative;
  min-height: 100dvh;
  /* Viewport Stability */
  display: flex;
  align-items: center;
  padding-top: 140px;
  /* Offset sticky header */
  padding-bottom: var(--spacing-xxl);
  background: linear-gradient(180deg, #e0f7fa 0%, #b2ebf2 40%, #88d8b0 100%);
  overflow: hidden;
  z-index: 10;
}

.blueprint-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.blueprint-lines {
  position: absolute;
  top: -50px;
  left: -50px;
  right: -50px;
  bottom: -50px;
  opacity: 0.12;
  background-image:
    linear-gradient(to right, rgba(69, 123, 157, 0.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(69, 123, 157, 0.25) 1px, transparent 1px);
  background-size: 50px 50px;
  /* blueprint-drift is in animations.css */
}

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

.hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eyebrow-tag {
  font-family: var(--font-tags);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-blue);
  margin-bottom: var(--spacing-sm);
  display: inline-block;
  will-change: transform, opacity;
}

.hero-section .eyebrow-tag {
  color: var(--color-white);
}

.hero-title {
  margin-bottom: var(--spacing-md);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Handwriting Reveal Title (SVG clip-path reveal, Satisfy script)
   Driven by js/handwriting-reveal.js — same technique as demo/3d-text-demo.html
   ========================================================================== */
.handwriting-reveal {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  cursor: pointer;
  margin-bottom: var(--spacing-md);
}

.handwriting-reveal .hw-text {
  font-family: 'Satisfy', cursive;
}

.handwriting-reveal .hw-line[data-line="1"] .hw-text {
  font-size: 72px;
}

.handwriting-reveal .hw-line[data-line="2"] .hw-text {
  font-size: 52px;
}

/* Pre-init / no-JS fallback: plain fills, glow and edge layers hidden.
   The engine adds .hw-ready once its gradients, clips and filters are in place. */
.handwriting-reveal:not(.hw-ready) .hw-line[data-line="1"] .hw-fill {
  fill: #4FD1C5;
}

.handwriting-reveal:not(.hw-ready) .hw-line[data-line="2"] .hw-fill {
  fill: rgba(255, 255, 255, 0.85);
}

.handwriting-reveal:not(.hw-ready) .hw-glow,
.handwriting-reveal:not(.hw-ready) .hw-edge {
  display: none;
}

/* Light-hero fallback fills (about/gallery/contact use data-theme="light") */
.handwriting-reveal[data-theme="light"]:not(.hw-ready) .hw-line[data-line="1"] .hw-fill {
  fill: #2AA79A;
}

.handwriting-reveal[data-theme="light"]:not(.hw-ready) .hw-line[data-line="2"] .hw-fill {
  fill: #1D3557;
}


.hero-word-wrapper {
  overflow: hidden;
  display: inline-block;
  margin-right: 0.25em;
  /* Space between words */
  vertical-align: bottom;
}

.hero-word {
  display: inline-block;
  will-change: transform;
}

/* Initially hide animated parts if JS is enabled to avoid flash */
.gsap-enabled .hero-word {
  transform: translateY(100%);
}

.gsap-enabled .hero-subtext,
.gsap-enabled .hero-actions,
.gsap-enabled .eyebrow-tag,
.gsap-enabled .hero-visual-col {
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}

.hero-subtext {
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  max-width: 55ch;
  margin-bottom: var(--spacing-lg);
  will-change: transform, opacity;
}

.hero-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
  will-change: transform, opacity;
}

/* Right Visual Column & Double-Bezel */
.hero-visual-col {
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
}

.double-bezel-outer {
  background: rgba(241, 243, 240, 0.4);
  border: 1px solid rgba(29, 53, 87, 0.05);
  padding: 10px;
  border-radius: 28px;
  /* concentric radius larger than inner */
  box-shadow: var(--shadow-sm);
  width: 100%;
  max-width: 500px;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.double-bezel-outer:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-lg);
}

.double-bezel-inner {
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid rgba(29, 53, 87, 0.08);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.hero-visual-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  /* premium vertical visual */
  background: linear-gradient(135deg, var(--color-sand) 0%, #DFD7C5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-character-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
}

.hero-char-video {
  position: absolute;
  top: 62px;
  left: 0;
  width: 100%;
  height: calc(100% - 62px);
  object-fit: contain;
  display: block;
  transform: scale(0.9) translateY(-12%);
  transform-origin: bottom center;
}

#hero-char-wave {
  transform: scale(0.875) translateY(-13.5%);
}

/* Subtle blueprint grid in the visual placeholder itself */
.hero-visual-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(29, 53, 87, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29, 53, 87, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: 1;
}

.placeholder-graphic {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-lg);
}

.paint-roller-icon {
  width: 70px;
  height: 70px;
  background-color: var(--color-navy);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal);
}

.double-bezel-outer:hover .paint-roller-icon {
  transform: scale(1.1) rotate(5deg);
}

.paint-roller-icon i {
  width: 32px;
  height: 32px;
}

.placeholder-tag {
  font-family: var(--font-tags);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-navy);
  margin-bottom: var(--spacing-xs);
}

.placeholder-sub {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-gray);
}

/* Mobile responsive adjustments */
@media (max-width: 991px) {
  .hero-section {
    padding-top: 120px;
    padding-bottom: var(--spacing-xl);
    min-height: auto;
  }

  .hero-container .container-grid {
    gap: var(--spacing-xl);
  }

  .hero-text-col {
    order: 1;
  }

  .hero-visual-col {
    order: 2;
    justify-content: flex-start;
  }

  .double-bezel-outer {
    max-width: 100%;
  }

  .hero-character-container {
    aspect-ratio: 16/10;
    /* horizontal scale for mobile */
  }
}

@media (max-width: 575px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

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

/* ==========================================================================
   6. Trust Bar Section
   ========================================================================== */

.trust-bar-section {
  position: relative;
  z-index: 20;
  margin-top: -3.5rem;
  padding-top: 0;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.trust-bar-section .double-bezel-outer {
  max-width: 100%;
  background: rgba(232, 224, 208, 0.45);
  /* Warm Sand with opacity for soft contrast */
  border: 1px solid rgba(29, 53, 87, 0.05);
  border-radius: 32px;
  box-shadow: var(--shadow-sm);
}

.trust-bar-inner {
  padding: var(--spacing-xl) var(--spacing-lg);
  background-color: var(--color-white);
  border-radius: 22px;
}

.trust-bar-items {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-xl);
}

.trust-bar-item {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  flex: 1;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

/* Sibling fade effect on hover */
.trust-bar-items:hover .trust-bar-item {
  opacity: 0.55;
}

.trust-bar-items:hover .trust-bar-item:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* Icon layout and style */
.trust-bar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: rgba(69, 123, 157, 0.08);
  /* Transparent Calm Blue background */
  color: var(--color-blue);
  flex-shrink: 0;
  transition: transform var(--transition-normal),
    background-color var(--transition-normal),
    color var(--transition-normal);
}

.trust-bar-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5px;
  /* Premium lightweight stroke */
}

.trust-bar-item:hover .trust-bar-icon {
  transform: scale(1.1) rotate(5deg);
  background-color: rgba(69, 123, 157, 0.15);
  color: var(--color-navy);
}

/* Typography styles */
.trust-bar-content {
  display: flex;
  flex-direction: column;
}

.trust-bar-title {
  font-family: var(--font-tags);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-navy);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.trust-bar-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-gray);
  margin-bottom: 0;
}

/* Divider styling for desktop */
.trust-bar-item:not(:last-child) {
  border-right: 1px solid rgba(29, 53, 87, 0.08);
  padding-right: var(--spacing-xl);
}

/* Responsive collapse styles */
@media (max-width: 991px) {
  .trust-bar-section {
    margin-top: 0;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-xl);
  }

  .trust-bar-items {
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .trust-bar-item {
    width: 100%;
  }

  .trust-bar-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid rgba(29, 53, 87, 0.08);
    padding-right: 0;
    padding-bottom: var(--spacing-lg);
  }
}

/* ==========================================================================
   7. Services Grid Section
   ========================================================================== */

.services-section {
  background-color: var(--color-mist);
}

.services-header-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (min-width: 992px) {
  .services-header-col {
    position: sticky;
    top: 120px;
    align-self: start;
    height: fit-content;
  }
}

.services-title {
  margin-bottom: var(--spacing-md);
  color: var(--color-navy);
}

.services-intro {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-gray);
  margin-bottom: var(--spacing-lg);
}

/* Supply Options Callout Box */
.supply-options-card {
  background-color: var(--color-white);
  border: 1px solid rgba(168, 197, 160, 0.25);
  /* Sage-tinted border */
  border-radius: 18px;
  padding: var(--spacing-md);
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.supply-options-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.supply-options-icon {
  color: var(--color-sage);
  flex-shrink: 0;
  margin-top: 2px;
}

.supply-options-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2px;
}

.supply-options-title {
  font-family: var(--font-tags);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-navy);
  display: block;
  margin-bottom: 4px;
}

.supply-options-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-gray);
  margin-bottom: 0;
}

.services-header-actions {
  margin-top: var(--spacing-xs);
}

/* Services Grid & Cards */
.services-grid-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
  align-content: start;
}

.services-card {
  display: flex;
  flex-direction: column;
  box-shadow:
    var(--shadow-glass),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  /* Top refraction highlight */
}

.services-card.highlight-card {
  grid-column: span 2;
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(168, 197, 160, 0.4);
}

.services-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.services-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: rgba(69, 123, 157, 0.08);
  /* Calm Blue backdrop */
  color: var(--color-blue);
  flex-shrink: 0;
  transition:
    transform var(--transition-normal),
    background-color var(--transition-normal),
    color var(--transition-normal);
}

.services-card-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5px;
}

.services-card:hover .services-card-icon {
  transform: rotate(5deg) scale(1.05);
  background-color: rgba(69, 123, 157, 0.15);
  color: var(--color-navy);
}

.services-card-title {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0;
}

.services-card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-gray);
  margin-bottom: var(--spacing-md);
}

.season-note {
  display: inline-block;
  font-family: var(--font-tags);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-blue);
  background-color: rgba(69, 123, 157, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 0.35rem;
}

.services-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-tags);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
  margin-top: auto;
  /* Push to card bottom */
  transition: color var(--transition-fast);
  width: fit-content;
}

.services-card-link svg {
  width: 14px;
  height: 14px;
  stroke-width: 2px;
  transition: transform var(--transition-fast);
}

.services-card:hover .services-card-link {
  color: var(--color-navy);
}

.services-card:hover .services-card-link svg {
  transform: translateX(4px);
}

.desktop-only-actions {
  display: block;
}

.mobile-only-actions {
  display: none;
}

/* Responsiveness Adjustments */
@media (max-width: 991px) {
  .desktop-only-actions {
    display: none !important;
  }

  .mobile-only-actions {
    display: flex !important;
  }

  .services-section .services-header-col {
    grid-column: span 2;
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }

  .services-footer-cta {
    grid-column: span 2;
    margin-top: var(--spacing-xl);
    width: 100%;
  }

  .services-footer-cta .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    box-shadow: 0 6px 20px rgba(29, 53, 87, 0.3);
  }

  .services-grid-col {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .services-card.highlight-card {
    grid-column: span 1;
  }
}

/* ==========================================================================
   8. Before & After Slider Section
   ========================================================================== */

.before-after-section {
  background-color: var(--color-mist);
  position: relative;
  overflow: hidden;
}

.before-after-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--spacing-xl) auto;
}

.before-after-title {
  margin-bottom: var(--spacing-md);
  color: var(--color-navy);
}

.before-after-desc {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-gray);
  margin-bottom: 0;
}

/* Slider Bezel Frame (Double-Bezel) */
.slider-bezel-outer {
  background: rgba(232, 224, 208, 0.45);
  /* Warm Sand bezel with opacity */
  border: 1px solid rgba(29, 53, 87, 0.05);
  padding: 12px;
  border-radius: 36px;
  /* Concentric outer radius */
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.slider-bezel-outer:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.slider-bezel-inner {
  border-radius: 24px;
  /* Inner radius concentric with outer */
  overflow: hidden;
  border: 1px solid rgba(29, 53, 87, 0.08);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* Before & After Slider Container */
.before-after-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Wide premium aspect ratio */
  overflow: hidden;
  user-select: none;
  background-color: var(--color-mist);
  touch-action: pan-y;
  /* Allow default touch scroll vertically, override horizontally */
}

@media (max-width: 767px) {
  .before-after-slider {
    aspect-ratio: 1 / 1;
    /* Square aspect ratio on mobile: dramatically larger, 2x taller comparison view */
  }

  .slider-bezel-outer {
    padding: 6px;
    border-radius: 24px;
  }

  .slider-bezel-inner {
    border-radius: 18px;
  }
}

/* Image wrappers & layers */
.slider-img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.after-img-wrapper {
  z-index: 4;
}

.before-img-wrapper {
  z-index: 5;
  will-change: clip-path;
  /* clip-path inset is modified dynamically by JS */
  clip-path: inset(0 20% 0 0);
  /* Initial state: show 80% */
}

.slider-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Floating labels */
.slider-label {
  position: absolute;
  bottom: 24px;
  padding: 6px 14px;
  border-radius: 50px;
  font-family: var(--font-tags);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  z-index: 7;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  transition: opacity var(--transition-normal);
}

.before-label {
  left: 24px;
  background-color: var(--color-navy);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.after-label {
  right: 24px;
  background-color: var(--color-white);
  color: var(--color-navy);
  border: 1px solid rgba(29, 53, 87, 0.08);
}

@media (max-width: 575px) {
  .slider-label {
    bottom: 16px;
    padding: 4px 10px;
    font-size: 0.65rem;
  }

  .before-label {
    left: 16px;
  }

  .after-label {
    right: 16px;
  }
}

/* Drag Handle */
.slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: var(--color-white);
  z-index: 10;
  cursor: ew-resize;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}

/* Vertical paint seam */
.slider-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 6px;
  background: linear-gradient(to bottom,
      transparent,
      rgba(255, 255, 255, 0.4) 20%,
      rgba(255, 255, 255, 0.4) 80%,
      transparent);
  pointer-events: none;
}

/* Circular drag thumb */
.handle-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--color-navy);
  border: 2.5px solid var(--color-white);
  box-shadow: var(--shadow-lg), 0 0 15px rgba(29, 53, 87, 0.2);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  z-index: 11;
  outline: none;
  padding: 0;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Avoid mouse cursor flicker and support fine pointer hovers */
@media (hover: hover) and (pointer: fine) {
  .handle-button:hover {
    background-color: var(--color-blue);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(69, 123, 157, 0.4);
    transform: translate(-50%, -50%) scale(1.08);
  }
}

.handle-button:active {
  background-color: var(--color-navy);
  transform: translate(-50%, -50%) scale(0.96);
  box-shadow: var(--shadow-md);
}

/* Paint roller icon & comparison chevrons container */
.handle-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
}

.handle-chevron {
  color: rgba(255, 255, 255, 0.7);
  transition: transform var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.handle-button:hover .handle-chevron.left {
  transform: translateX(-2px);
  color: var(--color-sage);
}

.handle-button:hover .handle-chevron.right {
  transform: translateX(2px);
  color: var(--color-sage);
}

.roller-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.roller-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-white);
  stroke-width: 1.75px;
  transform-origin: center;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .handle-button:hover .roller-icon svg {
    color: var(--color-sage);
    transform: scale(1.08);
  }
}

@media (max-width: 767px) {
  .handle-button {
    width: 48px;
    height: 48px;
  }

  .roller-icon svg {
    width: 17px;
    height: 17px;
  }

  .handle-chevron {
    width: 10px;
    height: 10px;
  }
}

/* Floating Project Title Badge Overlay */
.slider-project-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 30px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.slider-project-badge .badge-num {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-sage);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.slider-project-badge .badge-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-white);
}

@media (max-width: 767px) {
  .slider-project-badge {
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    gap: 6px;
  }
  .slider-project-badge .badge-num {
    font-size: 0.68rem;
  }
  .slider-project-badge .badge-title {
    font-size: 0.75rem;
  }
}

/* Interactive Project Thumbnail Selector Strip */
.ba-thumbnail-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

@media (max-width: 767px) {
  .ba-thumbnail-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px;
  }

  .ba-thumb-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 6px;
    gap: 6px;
    border-radius: 14px;
    background-color: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .ba-thumb-card .thumb-img-box {
    width: 100%;
    height: 48px;
    border-radius: 8px;
  }

  .ba-thumb-card .thumb-info {
    width: 100%;
    text-align: center;
  }

  .ba-thumb-card .thumb-title {
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-white);
  }

  .ba-thumb-card.active {
    background-color: rgba(168, 197, 160, 0.22);
    border-color: var(--color-sage);
    box-shadow: 0 4px 16px rgba(168, 197, 160, 0.35);
  }

  .ba-thumb-card.active .thumb-title {
    color: var(--color-white);
  }
}

.ba-thumb-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
  position: relative;
  outline: none;
  width: 100%;
}

.ba-thumb-card:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.ba-thumb-card.active {
  background-color: rgba(168, 197, 160, 0.12);
  border-color: var(--color-sage);
  box-shadow: 0 0 20px rgba(168, 197, 160, 0.25), var(--shadow-md);
}

.thumb-img-box {
  position: relative;
  width: 76px;
  height: 54px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

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

.ba-thumb-card:hover .thumb-img-box img,
.ba-thumb-card.active .thumb-img-box img {
  transform: scale(1.08);
}

.thumb-tag {
  position: absolute;
  bottom: 3px;
  right: 3px;
  padding: 2px 5px;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 4px;
  background-color: rgba(15, 23, 42, 0.85);
  color: var(--color-sage);
  line-height: 1;
}

.thumb-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.thumb-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
}

.thumb-subtitle {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ba-thumb-card.active .thumb-title {
  color: var(--color-sage);
}

/* ==========================================================================
   9. Premium Placeholder Fallbacks (Before/After styling)
   ========================================================================== */

.slider-placeholder-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  box-sizing: border-box;
}

.before-fallback {
  background:
    radial-gradient(circle at 80% 20%, rgba(29, 53, 87, 0.02) 20%, transparent 20%),
    linear-gradient(135deg, #E8E0D0 0%, #D4C9B5 100%);
  /* Warm sand faded tone */
  /* Add subtle worn texture effect */
  background-size: 100% 100%, 30px 30px;
  background-image:
    linear-gradient(rgba(29, 53, 87, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 53, 87, 0.03) 1px, transparent 1px),
    linear-gradient(135deg, #E6DEC9 0%, #D4C9B5 100%);
}

.after-fallback {
  background:
    linear-gradient(135deg, var(--color-mist) 0%, #E2E6E1 100%);
  /* Soft fresh mist */
  /* Left edge refraction indicator of fresh paint roll */
  box-shadow: inset 8px 0 0 var(--color-sage);
}

.fallback-content {
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  z-index: 5;
}

.fallback-badge {
  font-family: var(--font-tags);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: var(--spacing-sm);
}

.before-fallback .fallback-badge {
  background-color: rgba(29, 53, 87, 0.15);
  color: var(--color-navy);
}

.after-fallback .fallback-badge {
  background-color: var(--color-sage);
  color: var(--color-navy);
}

.fallback-graphic-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
}

.before-fallback .fallback-graphic-icon {
  background-color: rgba(29, 53, 87, 0.05);
  color: var(--color-navy);
}

.after-fallback .fallback-graphic-icon {
  background-color: rgba(168, 197, 160, 0.15);
  color: var(--color-blue);
}

.fallback-graphic-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5px;
}

.fallback-content h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--color-navy);
}

.fallback-content p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-gray);
  margin-bottom: 0;
}

@media (max-width: 575px) {
  .fallback-content h3 {
    font-size: 1.15rem;
  }

  .fallback-content p {
    font-size: 0.85rem;
  }

  .fallback-graphic-icon {
    width: 44px;
    height: 44px;
    margin-bottom: var(--spacing-xs);
  }

  .fallback-graphic-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================================================
   10. Gallery Preview Section
   ========================================================================== */

.gallery-preview-section {
  background-color: var(--color-mist);
  position: relative;
  overflow: hidden;
}

.gallery-preview-header {
  max-width: 65ch;
  margin-bottom: var(--spacing-xl);
}

.gallery-preview-title {
  margin-bottom: var(--spacing-md);
  color: var(--color-navy);
}

.gallery-preview-desc {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-gray);
  margin-bottom: 0;
}

/* Asymmetric Staggered Grid (DESIGN_VARIANCE: 8) */
.gallery-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  align-items: start;
}

.gallery-card-wrapper {
  width: 100%;
  will-change: transform, opacity;
}

.gallery-preview-dots {
  display: none;
}

/* Swatch Card Styling */
.gallery-placeholder-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  transition: background-color var(--transition-normal);
}

/* Uniform card aspect ratios on desktop */
.card-left .gallery-placeholder-card,
.card-center .gallery-placeholder-card,
.card-right .gallery-placeholder-card {
  aspect-ratio: 4 / 5;
}

/* Strict Brand Palettes */
.sand-swatch {
  background: linear-gradient(135deg, var(--color-sand) 0%, #DFD7C5 100%);
}

.sage-swatch {
  background: linear-gradient(135deg, var(--color-sage) 0%, #98B690 100%);
}

.mist-swatch {
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-mist) 100%);
}

/* Faint blueprint canvas lines */
.gallery-placeholder-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(29, 53, 87, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29, 53, 87, 0.03) 1px, transparent 1px);
  background-size: 25px 25px;
  z-index: 1;
  pointer-events: none;
}

/* Liquid Glass refraction overlay */
.gallery-placeholder-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
  z-index: 3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Swatch interior content overlay */
.swatch-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-lg);
  flex-grow: 1;
}

.swatch-category {
  font-family: var(--font-tags);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-navy);
  opacity: 0.85;
  margin-bottom: var(--spacing-sm);
  background-color: rgba(255, 255, 255, 0.35);
  padding: 4px 10px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.swatch-icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-white);
  color: var(--color-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal);
}

.double-bezel-outer:hover .swatch-icon {
  transform: scale(1.1) rotate(-5deg);
}

.swatch-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.75px;
}

.swatch-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-navy);
}

/* Captions block overlay */
.swatch-caption {
  position: relative;
  z-index: 2;
  background-color: rgba(241, 243, 240, 0.92);
  /* Glassmorphic mist background */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--spacing-md);
  border-top: 1px solid rgba(29, 53, 87, 0.06);
  width: 100%;
  box-sizing: border-box;
  transition: background-color var(--transition-normal);
}

.double-bezel-outer:hover .swatch-caption {
  background-color: var(--color-white);
}

.swatch-caption h4 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 2px;
}

.swatch-caption p {
  font-family: var(--font-tags);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
  margin-bottom: 0;
}

/* Section CTA button container */
.gallery-preview-action {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-xl);
}

.gallery-preview-action .btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.gallery-preview-action .btn-outline svg {
  width: 16px;
  height: 16px;
  stroke-width: 2px;
  transition: transform var(--transition-fast);
}

.gallery-preview-action .btn-outline:hover svg {
  transform: translateX(4px);
}

/* Responsive collapse rules */
@media (max-width: 991px) {
  .gallery-preview-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Set uniform aspect ratio for column cards */
  .card-left .gallery-placeholder-card,
  .card-center .gallery-placeholder-card,
  .card-right .gallery-placeholder-card {
    aspect-ratio: auto;
    min-height: 280px;
  }

  /* Reset layout offset adjustments */
  .card-left .double-bezel-outer,
  .card-center .double-bezel-outer,
  .card-right .double-bezel-outer {
    transform: none !important;
  }
}

/* Phone View Horizontal Swipeable Peeking Deck (Image 2 style) */
@media (max-width: 767px) {
  .gallery-preview-header {
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 20px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  }

  .gallery-preview-header .eyebrow-tag {
    color: var(--color-sage) !important;
  }

  .gallery-preview-header .gallery-preview-title {
    color: var(--color-white) !important;
  }

  .gallery-preview-header .gallery-preview-desc {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  .gallery-preview-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    padding: 8px 16px 20px 16px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    scrollbar-width: none;
  }

  .gallery-preview-grid::-webkit-scrollbar {
    display: none;
  }

  .gallery-card-wrapper {
    flex: 0 0 82vw !important;
    width: 82vw !important;
    max-width: 310px !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .card-left .gallery-placeholder-card,
  .card-center .gallery-placeholder-card,
  .card-right .gallery-placeholder-card {
    aspect-ratio: 4 / 5 !important;
    min-height: auto !important;
    border-radius: 20px !important;
  }

  .gallery-placeholder-card {
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  }

  .gallery-card-wrapper .double-bezel-outer {
    padding: 4px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
  }

  .gallery-card-wrapper .double-bezel-inner {
    border-radius: 20px !important;
  }

  /* Mobile 3 Circular Dots Pagination */
  .gallery-preview-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 16px auto 24px auto;
  }

  .gallery-preview-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
  }

  .gallery-preview-dot:hover {
    background-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.15);
  }

  .gallery-preview-dot.active {
    background-color: var(--color-sage, #2a9d8f);
    border-color: var(--color-sage, #2a9d8f);
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(42, 157, 143, 0.65);
  }
}

/* ==========================================================================
   8. Reviews Section
   ========================================================================== */

.reviews-section {
  background-color: var(--color-sand);
  border-top: 1px solid rgba(29, 53, 87, 0.05);
  border-bottom: 1px solid rgba(29, 53, 87, 0.05);
}

.reviews-header {
  max-width: 800px;
  margin-bottom: var(--spacing-xl);
}

.reviews-title {
  margin-bottom: var(--spacing-sm);
}

.reviews-desc {
  font-size: 1.15rem;
  color: var(--color-gray);
  max-width: 65ch;
}

/* Row 1: Google Reviews Dashboard Widget Placeholder */
.google-reviews-row {
  margin-bottom: var(--spacing-xl);
}

.google-reviews-placeholder-card {
  background-color: var(--color-white);
  border: 1px solid rgba(29, 53, 87, 0.06);
  border-radius: 20px;
  padding: var(--spacing-lg) var(--spacing-xl);
  box-shadow: var(--shadow-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.google-reviews-placeholder-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.google-logo-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.google-icon {
  flex-shrink: 0;
}

.google-brand {
  font-family: var(--font-tags);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-navy);
}

.google-rating-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.google-score {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
}

.google-stars {
  display: flex;
  flex-direction: column;
}

.stars-row {
  display: flex;
  gap: 2px;
  margin-bottom: 2px;
}

.stars-row svg {
  color: #E2A03F;
}

.google-review-count {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-gray);
}

.google-actions .write-review-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.65rem 1.5rem;
  font-size: 0.75rem;
}

.google-actions .write-review-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 2px;
  transition: transform var(--transition-fast);
}

.google-actions .write-review-btn:hover svg {
  transform: translateY(-2px) translateX(2px);
}

/* Row 2: Manual Reviews Grid */
.manual-reviews-row {
  width: 100%;
}

.manual-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  transition: opacity var(--transition-normal);
}

/* Sibling fade effect on hover */
.manual-reviews-grid:hover .review-card {
  opacity: 0.6;
}

.manual-reviews-grid .review-card:hover {
  opacity: 1;
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Review Card Styling */
.review-card {
  background-color: var(--color-white);
  border: 1px solid rgba(29, 53, 87, 0.05);
  border-radius: 16px;
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 120px;
  transition: transform var(--transition-normal),
    box-shadow var(--transition-normal),
    opacity var(--transition-normal);
}

.review-card.stars-only {
  min-height: auto;
  justify-content: center;
}

.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.review-card.stars-only .review-card-header {
  margin-bottom: 0;
}

.reviewer-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reviewer-avatar-wrapper {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.reviewer-avatar-initial {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--font-tags);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.reviewer-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.reviewer-info {
  display: flex;
  flex-direction: column;
}

.reviewer-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-tags);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-blue);
  text-decoration: none;
  margin-top: 2px;
  transition: color var(--transition-fast);
}

.reviewer-google-badge:hover {
  color: var(--color-teal);
  text-decoration: underline;
}

.reviewer-google-badge svg {
  flex-shrink: 0;
}

.reviewer-name {
  font-family: var(--font-tags);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
  margin-bottom: 0;
}

.review-card-stars {
  display: flex;
  gap: 2px;
}

.review-card-stars svg {
  color: #E2A03F;
}

.review-card-body {
  flex-grow: 1;
  margin-bottom: 0;
}

.review-text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-gray);
  font-style: italic;
  margin-bottom: 0;
}

/* Skeletons Styling (Loading state) */
.review-skeleton-card {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(29, 53, 87, 0.04);
  border-radius: 16px;
  padding: var(--spacing-lg);
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  position: relative;
  overflow: hidden;
}

.review-skeleton-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.6) 20%,
      rgba(255, 255, 255, 0.8) 60%,
      rgba(255, 255, 255, 0) 100%);
  animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skeleton-header {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  align-items: center;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(29, 53, 87, 0.06);
}

.skeleton-meta {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-line {
  height: 12px;
  background-color: rgba(29, 53, 87, 0.06);
  border-radius: 4px;
}

.skeleton-line.short {
  width: 50%;
}

.skeleton-line.x-short {
  width: 25%;
}

.skeleton-line.medium {
  width: 75%;
}

.skeleton-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
  margin-bottom: var(--spacing-md);
}

.skeleton-footer {
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(29, 53, 87, 0.04);
}

/* Responsive Styles for Reviews (Mobile Touch Carousel & Compact Header) */
@media (max-width: 991px) {
  .manual-reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* 1. Compact & Harmonious Google Rating Summary Header on Mobile */
  .google-reviews-placeholder-card {
    flex-direction: column;
    align-items: stretch;
    padding: 1.15rem;
    gap: 0.85rem;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(29, 53, 87, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  }

  .google-logo-wrapper {
    gap: 8px;
  }

  .google-rating-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #f8fafc;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(29, 53, 87, 0.04);
  }

  .google-score {
    font-size: 2rem;
    line-height: 1;
    color: var(--color-navy);
  }

  .google-stars {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .google-review-count {
    font-size: 0.8rem;
    color: var(--color-gray);
    font-weight: 500;
  }

  .google-actions {
    width: 100%;
    margin-top: 0.2rem;
  }

  .google-actions .write-review-btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--color-navy) 0%, #1e3a5f 100%);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 4px 12px rgba(29, 53, 87, 0.15);
  }

  .google-actions .write-review-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(29, 53, 87, 0.25);
  }

  /* 2. Mobile Touch-Swipe Carousel for Review Cards */
  .manual-reviews-row {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
  }

  .manual-reviews-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 1.25rem 1.25rem 1.25rem !important;
    gap: 1rem !important;
    scrollbar-width: none;
  }

  .manual-reviews-grid::-webkit-scrollbar {
    display: none;
  }

  .manual-reviews-grid .review-card,
  .manual-reviews-grid .review-skeleton-card {
    flex: 0 0 84% !important;
    max-width: 325px !important;
    min-width: 270px !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    margin-bottom: 0 !important;
  }

  /* Disable sibling opacity dimming on touch */
  .manual-reviews-grid:hover .review-card {
    opacity: 1 !important;
  }

  /* 3. Mobile Swipe Hint Indicator */
  .reviews-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff !important;
    opacity: 1 !important;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }

  .swipe-pulse-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--color-sage, #2a9d8f);
    box-shadow: 0 0 8px rgba(42, 157, 143, 0.8);
    animation: swipe-dot-pulse 1.8s infinite;
  }

  .swipe-arrow-icon {
    color: var(--color-sage, #2a9d8f);
    stroke-width: 2.5;
    animation: swipe-arrow-bounce 1.5s ease-in-out infinite;
  }

  @keyframes swipe-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
  }

  @keyframes swipe-arrow-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
  }
}

@media (min-width: 769px) {
  .reviews-swipe-hint {
    display: none !important;
  }
}

/* ==========================================================================
   10. Paint Brands Strip Component
   ========================================================================== */

.brands-section {
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  background-color: var(--color-mist);
}

.brands-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto var(--spacing-xl);
}

.brands-title {
  margin-bottom: var(--spacing-sm);
}

.brands-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-gray);
}

/* Double-Bezel Frame for Logo Runway */
.brands-bezel-outer {
  max-width: 1200px;
  margin: 0 auto;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  transition: transform var(--transition-normal);
}

.brands-bezel-inner {
  background: transparent;
  border: none;
  overflow: hidden;
  position: relative;
}

/* Marquee Runway Layer and Fade Masks */
.brands-marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: var(--spacing-sm) 0;
  display: flex;
}

/* Gradient fade overlays for edges */
.brands-marquee-container::before,
.brands-marquee-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(50px, 12vw, 150px);
  z-index: 5;
  pointer-events: none;
}

.brands-marquee-container::before {
  left: 0;
  background: linear-gradient(to right, var(--color-mist) 20%, transparent 100%);
}

.brands-marquee-container::after {
  right: 0;
  background: linear-gradient(to left, var(--color-mist) 20%, transparent 100%);
}

/* Moving Track */
.brands-marquee-track {
  display: flex;
  width: max-content;
  gap: clamp(4rem, 10vw, 8rem);
  /* Generous breathing space for larger logos */
  padding-left: clamp(4rem, 10vw, 8rem);
  align-items: center;
  will-change: transform;
}

.brand-logo {
  height: clamp(55px, 8vw, 80px);
  /* Taller and much more prominent logos */
  width: auto;
  max-width: 220px;
  object-fit: contain;
  opacity: 0.9;
  filter: none;
  /* Keep them colorful */
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  user-select: none;
}

.brand-logo:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* Dynamic dark backgrounds setup when GSAP is enabled on the home page */
html.gsap-enabled body.home-page .brands-bezel-outer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html.gsap-enabled body.home-page .brands-bezel-inner {
  background: transparent !important;
  border: none !important;
}

html.gsap-enabled body.home-page .brand-logo {
  filter: none !important;
  /* Keep colorful on dark background */
  opacity: 0.95;
}

html.gsap-enabled body.home-page .brand-logo:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* Home page dark state text readability fixes */
html.gsap-enabled body.home-page .brands-title {
  color: #EFE3B8 !important;
  /* warm swatch-cream on charcoal-olive */
}

html.gsap-enabled body.home-page .brands-desc {
  color: rgba(255, 255, 255, 0.75) !important;
}

html.gsap-enabled body.home-page .brands-section .eyebrow-tag {
  color: #3BE3EA !important;
  /* Luminous teal tag */
}

/* Gradient fade overlays matching dynamic scroll background */
html.gsap-enabled body.home-page .brands-marquee-container::before {
  background: linear-gradient(to right, rgb(var(--bg-r1), var(--bg-g1), var(--bg-b1)) 10%, transparent 100%) !important;
}

html.gsap-enabled body.home-page .brands-marquee-container::after {
  background: linear-gradient(to left, rgb(var(--bg-r2), var(--bg-g2), var(--bg-b2)) 10%, transparent 100%) !important;
}

/* Mobile responsive adjustments - Expand brand logos runway to full phone screen edges */
@media (max-width: 991px) {
  .brands-section {
    overflow-x: clip;
  }

  .brands-bezel-outer {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  .brands-bezel-inner {
    width: 100%;
  }

  .brands-marquee-container {
    width: 100vw;
    max-width: 100vw;
  }

  .brands-marquee-container::before,
  .brands-marquee-container::after {
    width: clamp(25px, 8vw, 50px);
  }

  .brands-marquee-track {
    gap: clamp(2rem, 6vw, 3.5rem);
    padding-left: clamp(2rem, 6vw, 3.5rem);
  }

  .brand-logo {
    height: clamp(38px, 7vw, 55px);
    max-width: 150px;
  }
}

/* ==========================================================================
   9. Service Area Section
   ========================================================================== */

.service-area-section {
  background-color: var(--color-mist);
  border-top: 1px solid rgba(29, 53, 87, 0.05);
}

.service-area-header {
  margin-bottom: var(--spacing-xl);
  max-width: 800px;
}

.service-area-title {
  margin-bottom: var(--spacing-sm);
}

.service-area-desc {
  font-size: 1.1rem;
  color: var(--color-gray);
  max-width: 65ch;
}

/* Regional Bento List Column */
.regional-list-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: stretch;
}

.service-area-card-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-area-card {
  padding: var(--spacing-lg);
  background-color: var(--color-white);
  border-radius: 20px;
  border: 1px solid rgba(29, 53, 87, 0.06);
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-grow: 1;
}

.service-area-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-navy);
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
}

.service-area-card-intro {
  font-size: 0.95rem;
  color: var(--color-gray);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.service-area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.service-area-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.region-title {
  font-family: var(--font-tags);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
  border-bottom: 1px solid rgba(29, 53, 87, 0.06);
  padding-bottom: 6px;
  margin-bottom: var(--spacing-xs);
}

.city-pills-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.city-pill {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-navy);
  background: transparent;
  border: none;
  padding: 2px 0;
  cursor: default;
}



/* Map Visual Column */
.map-visual-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}

.map-bezel-outer {
  width: 100%;
  max-width: 100%;
  background: rgba(232, 224, 208, 0.35);
  /* Soft Warm Sand */
  border: 1px solid rgba(29, 53, 87, 0.05);
  border-radius: 32px;
  padding: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.map-bezel-outer:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.map-bezel-inner {
  border-radius: 22px;
  background-color: #faf9f6;
  /* Premium off-white editorial background */
  border: 1px solid rgba(29, 53, 87, 0.06);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  height: 100%;
  flex-grow: 1;
}

.map-container {
  width: 100%;
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-svg {
  width: 100%;
  height: auto;
  max-height: 480px;
  display: block;
}

/* SVG Elements Hover & Active Styles */
.map-lake-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  transition: stroke-width var(--transition-normal);
}

/* Node Animations */
@keyframes mapPulse {
  0% {
    r: 10px;
    opacity: 0.7;
  }

  100% {
    r: 28px;
    opacity: 0;
  }
}

@keyframes mapPulseActive {
  0% {
    r: 8px;
    opacity: 0.9;
  }

  50% {
    r: 32px;
    opacity: 0.35;
  }

  100% {
    r: 8px;
    opacity: 0.9;
  }
}

.pulse-ring {
  transform-origin: center;
  animation: mapPulse 3s infinite ease-out;
  pointer-events: none;
}

/* Specific ring animations offsets */
.ring-vernon {
  animation-delay: 0s;
}

.ring-kelowna {
  animation-delay: 1s;
}

.ring-penticton {
  animation-delay: 2s;
}

/* Interactive SVG Map Nodes */
.map-node {
  cursor: pointer;
}

.map-node .main-dot {
  transition: transform var(--transition-normal),
    r var(--transition-normal),
    stroke var(--transition-normal);
  transform-origin: center;
}

.map-node .map-hub-label {
  font-family: var(--font-tags);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  pointer-events: none;
  user-select: none;
  transition: transform var(--transition-normal), fill var(--transition-normal);
}

/* Hover & Active Hub Nodes */
.map-node:hover .main-dot,
.map-node.active-node .main-dot {
  transform: scale(1.3);
  r: 9px;
  stroke: var(--color-navy);
}

.map-node:hover .map-hub-label,
.map-node.active-node .map-hub-label {
  transform: translateX(2px) scale(1.05);
}

.map-node.active-node .pulse-ring {
  animation: mapPulseActive 1.5s infinite ease-in-out;
}

/* Sub-cities map nodes */
.sub-node {
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.sub-node circle {
  transition: r var(--transition-fast),
    fill var(--transition-fast),
    stroke var(--transition-fast);
}

.sub-node text {
  font-family: var(--font-tags);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  opacity: 0.65;
  transition: opacity var(--transition-fast),
    transform var(--transition-fast),
    fill var(--transition-fast);
}

.sub-node:hover circle,
.sub-node.active-city circle {
  r: 6px;
  stroke: var(--color-navy);
  stroke-width: 1.5px;
}

.sub-node:hover text,
.sub-node.active-city text {
  opacity: 1;
  fill: var(--color-navy);
  font-weight: 700;
}

/* Responsive Overrides */
@media (max-width: 991px) {
  .service-area-section .container-grid {
    gap: var(--spacing-xl);
  }

  .map-visual-col {
    order: 1;
    /* Map on top for mobile layout */
    margin-bottom: var(--spacing-sm);
  }

  .regional-list-col {
    order: 2;
  }

  .service-area-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .service-area-card-wrapper,
  .service-area-card,
  .map-bezel-outer,
  .map-bezel-inner {
    height: auto;
  }

  .map-svg {
    max-height: 400px;
  }
}

@media (max-width: 767px) {
  .service-area-section .regional-list-col {
    display: none !important;
  }

  .service-area-section .map-visual-col {
    margin-bottom: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 575px) {
  .service-area-card {
    padding: var(--spacing-md);
  }

  .map-bezel-outer {
    padding: 6px;
    border-radius: 24px;
  }

  .map-bezel-inner {
    border-radius: 18px;
  }
}

/* ==========================================================================
   10. Frequently Asked Questions (FAQ) Section
   ========================================================================== */

.faq-section {
  background-color: var(--color-mist);
  position: relative;
  overflow: hidden;
}

.faq-sidebar-col,
.faq-accordion-col {
  min-width: 0;
}

.faq-tabs-scroll-hint {
  display: none;
}

/* Keyframe animations for mobile FAQ scroll helper */
@keyframes bounceRight {

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

  50% {
    transform: translateX(4px);
  }
}

@keyframes fadeInHint {
  from {
    opacity: 0;
    transform: translateY(2px);
  }

  to {
    opacity: 0.75;
    transform: translateY(0);
  }
}

/* FAQ Media Placeholder Card */
.faq-video-placeholder {
  max-width: 100%;
  margin-bottom: var(--spacing-lg);
  position: relative;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* No cursor-spotlight layer here — the card is backgroundless, so the
   .double-bezel-outer::after radial reads as a stray box around the video */
.faq-video-placeholder::after {
  display: none !important;
}

.video-placeholder-inner {
  position: relative;
  aspect-ratio: 16 / 9;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible;
}

.faq-video-placeholder .faq-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

@media (min-width: 992px) {
  .faq-accordion-col {
    position: relative;
  }

  .faq-video-placeholder {
    position: absolute;
    top: -312px;
    /* Character renders at exactly half the video width (he fills 88.9% of
       the 16:9 frame height), so 500px width = exactly 250px tall.
       Positioned 30px higher as requested. */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    height: 420px;
    margin-bottom: 0;
    z-index: 1;
  }

  .faq-video-placeholder .double-bezel-inner,
  .faq-video-placeholder .video-placeholder-inner {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .faq-accordion-list {
    position: relative;
    z-index: 2;
    margin-top: 280px;
    /* Positioned 40px higher as requested */
  }
}

.faq-media-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background-color: #FAF9F6;
  border: 1px dashed rgba(29, 53, 87, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  position: relative;
  transition: border-color var(--transition-normal), background-color var(--transition-normal);
}

.faq-media-container:hover {
  border-color: rgba(29, 53, 87, 0.3);
  background-color: rgba(29, 53, 87, 0.01);
}

.placeholder-media-icon {
  width: 32px;
  height: 32px;
  color: var(--color-blue);
  opacity: 0.65;
  stroke-width: 1.5px;
}

.placeholder-media-text {
  font-family: var(--font-tags);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray);
  opacity: 0.8;
}

.faq-media-container video,
.faq-media-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sticky sidebar setup */
.faq-sidebar-sticky {
  position: sticky;
  top: 100px;
  padding-right: var(--spacing-md);
}

.faq-title {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  color: var(--color-navy);
  /* Narrow sticky sidebar: tuned down from the base h2 clamp so
     "Got Questions?" always holds its own line */
  font-size: clamp(2rem, 3.2vw, 2.6rem);
}

.faq-intro {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-gray);
  margin-bottom: var(--spacing-lg);
  max-width: 35ch;
}

/* Vertical Category Tabs */
.faq-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
}

.btn-faq-tab {
  background: transparent;
  border: none;
  color: var(--color-gray);
  text-align: left;
  font-family: var(--font-tags);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  border-radius: 30px;
  cursor: pointer;
  width: 100%;
  max-width: 260px;
  transition: background-color var(--transition-normal),
    color var(--transition-normal),
    padding-left var(--transition-normal),
    transform var(--transition-fast);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-faq-tab:hover {
  color: var(--color-blue);
  background-color: rgba(69, 123, 157, 0.05);
  padding-left: 1.5rem;
  transform: translateX(2px);
}

.btn-faq-tab.active {
  color: var(--color-white);
  background-color: var(--color-navy);
  padding-left: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.btn-faq-tab:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* Accordion Styling */
.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}

.faq-item {
  background-color: var(--color-white);
  border: 1px solid rgba(29, 53, 87, 0.06);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    background-color var(--transition-normal);
  will-change: border-color, box-shadow;
}

.faq-item:hover {
  border-color: rgba(69, 123, 157, 0.2);
  box-shadow: var(--shadow-sm);
}

.faq-item.active {
  border-color: rgba(168, 197, 160, 0.5);
  /* Sage border on active */
  box-shadow: var(--shadow-md);
}

.faq-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.4rem 1.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  outline: none;
}

.faq-question {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-navy);
  padding-right: var(--spacing-md);
  transition: color var(--transition-fast);
}

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

.faq-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(69, 123, 157, 0.05);
  color: var(--color-navy);
  flex-shrink: 0;
  transition: background-color var(--transition-normal),
    color var(--transition-normal),
    transform var(--transition-normal);
}

.faq-plus-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2px;
  transition: transform var(--transition-normal);
}

.faq-trigger:hover .faq-icon-wrapper {
  background-color: rgba(69, 123, 157, 0.12);
  color: var(--color-blue);
}

/* Active accordion styles */
.faq-item.active .faq-icon-wrapper {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.faq-item.active .faq-plus-icon {
  transform: rotate(45deg);
}

/* Accordion Answer Styling with Progressive Enhancement */
.faq-answer-container {
  /* Default styling: visible for non-JS browsers */
  height: auto;
  opacity: 1;
}

.js-enabled .faq-answer-container {
  /* JS enabled: collapsed by default, animated by GSAP */
  height: 0;
  overflow: hidden;
}

.faq-answer-content {
  padding: 0 1.75rem 1.5rem 1.75rem;
  position: relative;
}

.faq-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-gray);
  margin-bottom: 0;
  position: relative;
  z-index: 2;
  transition: color var(--transition-fast);
}

.faq-item.active .faq-text {
  color: var(--color-navy);
  /* Darker text on sage tint for maximum contrast */
}

/* The Paint-Fill Wipe Animation Container */
.faq-paint-fill {
  display: none;
  /* Hidden by default for non-JS */
}

.js-enabled .faq-paint-fill {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(168, 197, 160, 0.08);
  /* 8% opacity Fresh Sage */
  border-radius: 8px;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 1;
  pointer-events: none;
}

/* Paint Roller leading edge indicator */
.js-enabled .faq-paint-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--color-sage);
  box-shadow: 0 0 10px rgba(168, 197, 160, 0.8);
  border-radius: 2px;
}

/* ==========================================================================
   11. Book a Quote CTA Section
   ========================================================================== */

.cta-quote-section {
  background-color: var(--color-navy);
  color: var(--color-white);
  overflow: hidden;
  z-index: 10;
}

.cta-quote-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.04;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
}

.cta-quote-section .container {
  position: relative;
  z-index: 2;
}

.cta-info-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-title {
  color: var(--color-white);
  margin-bottom: var(--spacing-md);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
}

.cta-desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: var(--spacing-md);
}

.cta-desc:last-of-type {
  margin-bottom: var(--spacing-xl);
}

.cta-trust-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.cta-trust-item {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.cta-trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(168, 197, 160, 0.15);
  color: var(--color-sage);
  flex-shrink: 0;
}

.cta-trust-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2px;
}

.cta-trust-text h4 {
  font-family: var(--font-tags);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-white);
  margin-bottom: 4px;
}

.cta-trust-text p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Desktop spacing override: forces a 2-column empty gap in between text and form */
@media (min-width: 992px) {
  .cta-quote-section .cta-info-col {
    grid-column: span 5;
  }

  .cta-quote-section .cta-form-col {
    grid-column: 8 / span 5;
  }
}

.cta-bezel-outer {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 28px;
  padding: 10px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  width: 100%;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.cta-bezel-outer:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.cta-bezel-inner {
  border-radius: 20px;
  overflow: hidden;
  background-color: #162943;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cta-form-card {
  padding: var(--spacing-xl) var(--spacing-lg);
  position: relative;
}

.cta-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md) var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.col-span-2 {
  grid-column: span 2;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: var(--font-tags);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  display: block;
}

.form-label .required {
  color: var(--color-sage);
}

.input-wrapper {
  position: relative;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  border-radius: 8px;
  transition: border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
  outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.form-select {
  appearance: none;
  cursor: pointer;
}

.select-wrapper-custom {
  position: relative;
}

.select-wrapper-custom::after {
  content: '';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  opacity: 0.65;
  transition: transform var(--transition-fast);
}

.select-wrapper-custom:focus-within::after {
  transform: translateY(-50%) rotate(180deg);
}

.form-textarea {
  min-height: 110px;
  resize: vertical;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--color-sage);
  box-shadow: 0 0 0 4px rgba(168, 197, 160, 0.15);
}

.form-select option {
  background-color: #162943;
  color: var(--color-white);
}

.form-select option:disabled {
  color: rgba(255, 255, 255, 0.35);
}

.form-group.has-error .form-input,
.form-group.has-error .form-select,
.form-group.has-error .form-textarea {
  border-color: #E63946;
  box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.15);
}

.error-msg {
  display: none;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #E63946;
  margin-top: 4px;
  animation: slideDownError 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.form-group.has-error .error-msg {
  display: block;
}

@keyframes slideDownError {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-submit-cta {
  width: 100%;
  background-color: var(--color-sage);
  color: var(--color-navy);
  border-color: var(--color-sage);
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 1.05rem 2.2rem;
  font-family: var(--font-tags);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 50px;
  cursor: pointer;
  transition: transform var(--transition-fast),
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal),
    box-shadow var(--transition-normal);
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  outline: none;
}

.btn-submit-cta:hover {
  background-color: #B9D5B1;
  border-color: #B9D5B1;
  color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(168, 197, 160, 0.25);
}

.btn-submit-cta:active {
  transform: translateY(0) scale(0.98);
}

.btn-submit-cta i {
  width: 18px;
  height: 18px;
  stroke-width: 2px;
}

.form-success-state,
.form-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  animation: fadeInState 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInState {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.success-icon-wrapper {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}

.success-paint-splat {
  position: absolute;
  inset: 0;
  background-color: rgba(168, 197, 160, 0.15);
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  animation: splatWobble 6s ease-in-out infinite;
}

@keyframes splatWobble {

  0%,
  100% {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  }

  50% {
    border-radius: 70% 30% 52% 48% / 60% 40% 60% 40%;
  }
}

.success-check-icon {
  width: 32px;
  height: 32px;
  color: var(--color-sage);
  z-index: 2;
  stroke-width: 3px;
}

.success-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--spacing-md);
}

.success-desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-xs);
  max-width: 35ch;
}

.success-desc-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--spacing-xl);
  max-width: 40ch;
}

.success-desc-sub strong {
  color: var(--color-white);
}

.btn-reset-form {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-white);
}

.btn-reset-form:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--color-white);
  color: var(--color-white);
}

.error-icon-wrapper {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(230, 57, 70, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E63946;
  margin-bottom: var(--spacing-lg);
}

.error-icon-wrapper svg {
  width: 32px;
  height: 32px;
  stroke-width: 2px;
}

.error-state-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--spacing-md);
}

.error-state-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--spacing-xl);
  max-width: 36ch;
}

.btn-retry-form {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-white);
  justify-content: center;
}

.btn-retry-form:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--color-white);
  color: var(--color-white);
}

/* Responsive FAQ overrides */
@media (max-width: 991px) {
  .faq-sidebar-col {
    grid-column: span 2;
    min-width: 0;
  }

  .faq-accordion-col {
    min-width: 0;
  }

  .faq-sidebar-sticky {
    position: static;
    padding-right: 0;
    margin-bottom: var(--spacing-xl);
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .faq-intro {
    max-width: 100%;
  }

  .faq-tabs-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-tags);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #38BDF8 !important; /* Electric Sky Blue - vibrant cyan accent */
    opacity: 1 !important;
    margin-bottom: var(--spacing-xs);
    align-self: flex-start;
    animation: fadeInHint 0.5s ease-out forwards;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
    pointer-events: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  }

  .faq-tabs-scroll-hint.scrolled {
    opacity: 0;
    transform: translateY(-4px);
  }

  .hint-pulse-icon {
    width: 14px;
    height: 14px;
    color: #38BDF8 !important;
    stroke-width: 2.8px;
    animation: bounceRight 1.5s infinite;
  }

  .faq-tabs {
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    padding-top: 4px;
    padding-bottom: var(--spacing-sm);
    gap: 10px;
    width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent !important;
  }

  .faq-tabs::-webkit-scrollbar {
    display: none;
  }

  .btn-faq-tab {
    flex-shrink: 0;
    max-width: none;
    width: auto;
    text-align: center;
    padding: 0.75rem 1.4rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    border-radius: 30px !important;
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #CBD5E1 !important; /* Soft slate silver - clear contrast, non-white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    -webkit-touch-callout: none;
    user-select: none;
  }

  .btn-faq-tab:hover {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    color: #38BDF8 !important;
    transform: translateY(-1px) !important;
  }

  .btn-faq-tab.active {
    background: #0F172A !important;
    border: 1.5px solid #38BDF8 !important; /* Electric Sky Blue border */
    color: #38BDF8 !important; /* Electric Sky Blue text - vibrant and high contrast */
    box-shadow: 0 4px 18px rgba(56, 189, 248, 0.4), inset 0 0 12px rgba(56, 189, 248, 0.15) !important;
    transform: translateY(-1px) !important;
    font-weight: 800 !important;
  }

  .faq-trigger {
    padding: 1.2rem 1.4rem;
  }

  .faq-question {
    font-size: 1.08rem;
  }

  .faq-answer-content {
    padding: 0 1.4rem 1.2rem 1.4rem;
  }

  .cta-quote-section .container-grid {
    gap: var(--spacing-xl);
  }
}

@media (max-width: 575px) {
  .faq-sidebar-col {
    grid-column: span 1;
  }

  .faq-accordion-col {
    grid-column: span 1;
  }

  .cta-form .form-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .col-span-2 {
    grid-column: span 1;
  }

  .cta-form-card {
    padding: var(--spacing-lg) var(--spacing-md);
  }
}

/* ==========================================================================
   12. Footer Component
   ========================================================================== */

.site-footer {
  background: linear-gradient(135deg, var(--color-navy) 0%, #204e5a 45%, var(--color-blue) 100%);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--spacing-md) 0 var(--spacing-xs) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-body);
}

.footer-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.footer-grid {
  row-gap: var(--spacing-md);
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--spacing-sm);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 8px 10px;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
}

.footer-logo:hover {
  background: rgba(255, 255, 255, 0.98);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.footer-logo .logo-image {
  height: 48px;
}

.footer-logo .logo-text-stacked {
  margin-left: -5px;
}

.footer-logo .logo-line {
  text-shadow: none;
}

.footer-tagline {
  font-family: var(--font-tags);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-sage);
  margin-bottom: var(--spacing-sm);
}

.footer-brand-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0;
  max-width: 32ch;
}

/* Footer Social Media Links */
.footer-social-block {
  margin-top: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-social-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 14px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  width: fit-content;
  transition: all var(--transition-normal);
  backdrop-filter: blur(8px);
}

.footer-social-badge:hover {
  background: linear-gradient(135deg, rgba(225, 48, 108, 0.22) 0%, rgba(253, 29, 29, 0.22) 50%, rgba(245, 96, 64, 0.22) 100%);
  border-color: rgba(225, 48, 108, 0.5);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(225, 48, 108, 0.25);
}

.footer-social-badge .social-icon {
  font-size: 1.25rem;
  color: #e1306c;
  display: flex;
  align-items: center;
  transition: transform var(--transition-fast);
}

.footer-social-badge:hover .social-icon {
  transform: scale(1.15) rotate(-5deg);
}

.footer-social-badge .social-handle {
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}

/* Trust Badges in Footer */
.footer-badges {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 12px;
  width: fit-content;
  transition: border-color var(--transition-normal), background-color var(--transition-normal), transform var(--transition-normal);
}

.footer-badge:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(168, 197, 160, 0.4);
  transform: translateY(-2px);
}

.footer-badge .badge-icon {
  width: 20px;
  height: 20px;
  color: var(--color-sage);
  stroke-width: 2px;
}

.footer-badge .badge-text {
  display: flex;
  flex-direction: column;
}

.footer-badge .badge-title {
  font-family: var(--font-tags);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
  line-height: 1.2;
}

.footer-badge .badge-desc {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.2;
}

/* Columns headings styling */
.footer-heading {
  font-family: var(--font-tags);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-white);
  margin-bottom: var(--spacing-sm);
  position: relative;
  display: inline-block;
}

.footer-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 24px;
  height: 2px;
  background-color: var(--color-sage);
  border-radius: 1px;
}

/* Nav & Link list styling */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.footer-links li a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.65);
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-links li a:hover {
  color: var(--color-sage);
  transform: translateX(4px);
}

.footer-links li a.active {
  color: var(--color-white);
  font-weight: 600;
}

/* Service areas in footer */
.footer-areas-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer-areas-list li {
  display: flex;
  flex-direction: column;
}

.area-group-title {
  font-family: var(--font-tags);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 2px;
}

.area-cities-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

/* Contact Info Column */
.footer-contact-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--spacing-md);
  max-width: 28ch;
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer-contact-info li {
  display: flex;
  align-items: flex-start;
}

.footer-contact-info .contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-contact-info .contact-link:hover {
  color: var(--color-sage);
  transform: translateX(4px);
}

.footer-contact-info .contact-link svg,
.footer-contact-info .contact-address svg {
  width: 16px;
  height: 16px;
  stroke-width: 2px;
  flex-shrink: 0;
  color: var(--color-sage);
}

.footer-contact-info .contact-address {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Bottom Bar */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-xs);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.footer-bottom .copyright {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0;
}

/* Hidden link but accessible to screen readers & visible on focus */
.footer-admin-link {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  cursor: default;
  transition: color var(--transition-fast);
}

.footer-admin-link:hover {
  color: rgba(255, 255, 255, 0.45);
}

.footer-admin-link:focus-visible {
  color: var(--color-sage);
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* Responsive Overrides */
@media (max-width: 991px) {
  .footer-brand-desc {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ── Mobile Footer Optimization (phone only) ── */
@media (max-width: 575px) {

  /* Reduce overall footer padding */
  .site-footer {
    padding: var(--spacing-sm) 0 var(--spacing-xs) 0;
  }

  /* Tighter container gap */
  .footer-container {
    gap: var(--spacing-xs);
  }

  /* Reduce grid gap between stacked columns */
  .footer-grid {
    row-gap: var(--spacing-sm);
  }

  /* ── Logo: smaller chip ── */
  .footer-logo {
    padding: 5px 8px;
    border-radius: 10px;
    margin-bottom: 0.5rem;
  }

  .footer-logo .logo-image {
    height: 32px;
  }

  .footer-logo .logo-text-stacked {
    font-size: 0.72rem;
    margin-left: -3px;
  }

  /* ── Tagline: slightly smaller ── */
  .footer-tagline {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.35rem;
  }

  /* ── Brand description: tighter ── */
  .footer-brand-desc {
    font-size: 0.8rem;
    line-height: 1.45;
    margin-bottom: 0;
  }

  /* ── Section headings: tighter ── */
  .footer-heading {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .footer-heading::after {
    width: 20px;
    bottom: -3px;
  }

  /* ── Navigation links: horizontal row layout ── */
  .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    column-gap: 0.65rem;
    row-gap: 0.25rem;
  }

  .footer-links li a {
    font-size: 0.76rem;
    padding: 0.15rem 0;
  }

  /* ── Contact description: smaller ── */
  .footer-contact-desc {
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    max-width: 100%;
  }

  /* ── Contact info: tighter list ── */
  .footer-contact-info {
    gap: 0.35rem;
  }

  .footer-contact-info .contact-link {
    font-size: 0.82rem;
    gap: 0.5rem;
  }

  .footer-contact-info .contact-link svg,
  .footer-contact-info .contact-address svg {
    width: 14px;
    height: 14px;
  }

  .footer-contact-info .contact-address {
    font-size: 0.82rem;
    gap: 0.5rem;
  }

  /* ── Trust badges: compact ── */
  .footer-badges {
    gap: 0.35rem;
  }

  .footer-badge {
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    gap: 0.5rem;
  }

  .footer-badge .badge-icon {
    width: 16px;
    height: 16px;
  }

  .footer-badge .badge-title {
    font-size: 0.68rem;
  }

  .footer-badge .badge-desc {
    font-size: 0.62rem;
  }

  /* ── Bottom bar: compact ── */
  .footer-bottom {
    padding-top: var(--spacing-xs);
    gap: 0.25rem;
  }

  .footer-bottom .copyright {
    font-size: 0.7rem;
  }
}

/* ==========================================================================
   Services Page Hero Section & Swatch Collage
   ========================================================================== */

.services-hero-section {
  position: relative;
  min-height: 80dvh;
  display: flex;
  align-items: center;
  padding-top: 140px;
  /* Offset sticky header */
  padding-bottom: var(--spacing-xxl);
  background-color: var(--color-mist);
  overflow: hidden;
  z-index: 10;
}

.services-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.services-hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.services-hero-title {
  margin-bottom: var(--spacing-md);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy);
}

.services-hero-subtext {
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--color-gray);
  max-width: 55ch;
  margin-bottom: var(--spacing-lg);
}

.services-hero-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
}

/* Collage Column */
.services-hero-visual-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.collage-bezel-outer {
  max-width: 480px;
  width: 100%;
  background: rgba(232, 224, 208, 0.35);
  /* Sand overlay */
  border-radius: 32px;
}

.collage-bezel-inner {
  background-color: var(--color-white);
  border-radius: 22px;
}

/* The Swatch Grid/Collage */
.swatch-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  background-color: var(--color-mist);
  overflow: hidden;
  padding: var(--spacing-lg);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.swatch-collage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(29, 53, 87, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29, 53, 87, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  z-index: 1;
  pointer-events: none;
}

/* Individual Swatch Panels */
.collage-swatch {
  position: relative;
  border-radius: 14px;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(29, 53, 87, 0.05);
  transition: transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  cursor: pointer;
  z-index: 2;
  overflow: hidden;
}

/* Swatch Navy (Top Left - Spans height slightly or offsets) */
.swatch-navy {
  background-color: var(--color-navy);
  color: var(--color-white);
  grid-row: 1 / span 2;
  transform: rotate(-1deg);
}

.swatch-navy .swatch-label {
  color: var(--color-white);
  opacity: 0.8;
}

.swatch-navy .swatch-code {
  color: var(--color-sage);
}

.swatch-navy .swatch-desc {
  color: var(--color-mist);
}

/* Swatch Sage (Top Right) */
.swatch-sage {
  background-color: var(--color-sage);
  color: var(--color-navy);
  transform: rotate(2deg) translateY(10px);
}

.swatch-sage .swatch-label {
  color: var(--color-navy);
  opacity: 0.7;
}

.swatch-sage .swatch-code {
  color: var(--color-navy);
  font-weight: 600;
}

.swatch-sage .swatch-desc {
  color: rgba(29, 53, 87, 0.8);
}

/* Swatch Sand (Bottom Right) */
.swatch-sand {
  background-color: var(--color-sand);
  color: var(--color-navy);
  transform: rotate(-2deg) translateY(-10px) translateX(-5px);
  background-image: repeating-linear-gradient(45deg, rgba(29, 53, 87, 0.01) 0px, rgba(29, 53, 87, 0.01) 2px, transparent 2px, transparent 10px);
  /* wood grain texture simulation */
}

.swatch-sand .swatch-label {
  color: var(--color-navy);
  opacity: 0.7;
}

.swatch-sand .swatch-code {
  color: var(--color-navy);
  font-weight: 600;
}

.swatch-sand .swatch-desc {
  color: rgba(29, 53, 87, 0.8);
}

/* Common Swatch Inner Labels */
.swatch-label {
  font-family: var(--font-tags);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.swatch-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.swatch-code {
  font-family: monospace;
  font-size: 0.9rem;
}

.swatch-desc {
  font-size: 0.85rem;
  line-height: 1.3;
}

/* Central Decorative Accent Circle */
.collage-accent {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid rgba(29, 53, 87, 0.1);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue);
  z-index: 10;
  pointer-events: none;
  transition: transform var(--transition-normal);
}

.collage-accent svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5px;
}

/* Collage Interactions & Hover Effects */
.swatch-collage:hover .collage-swatch {
  opacity: 0.75;
}

.swatch-collage:hover .collage-swatch:hover {
  opacity: 1;
  box-shadow: var(--shadow-lg);
  border-color: rgba(29, 53, 87, 0.15);
  z-index: 5;
}

.swatch-collage:hover .swatch-navy:hover {
  transform: scale(1.03) rotate(-2deg);
}

.swatch-collage:hover .swatch-sage:hover {
  transform: scale(1.03) rotate(3deg) translateY(5px);
}

.swatch-collage:hover .swatch-sand:hover {
  transform: scale(1.03) rotate(-3deg) translateY(-5px);
}

.swatch-collage:hover .collage-accent {
  transform: translate(-50%, -50%) scale(1.08) rotate(15deg);
}

/* For image overlay if used */
.collage-img-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

/* Media Query adjustments for Services Hero */
@media (max-width: 991px) {
  .services-hero-section {
    padding-top: 120px;
    padding-bottom: var(--spacing-xl);
    min-height: auto;
  }

  .services-hero-container .container-grid {
    gap: var(--spacing-xl);
  }

  .services-hero-text-col {
    order: 1;
  }

  .services-hero-visual-col {
    order: 2;
    justify-content: flex-start;
  }

  .collage-bezel-outer {
    max-width: 100%;
  }

  .swatch-collage {
    aspect-ratio: 16/10;
    /* wider layout on mobile tablet */
  }

  .swatch-navy {
    grid-row: span 1;
  }

  .swatch-collage {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
  }

  .collage-accent {
    left: 50%;
  }
}

@media (max-width: 768px) {
  .services-hero-section,
  .gallery-hero-section {
    padding-top: 70px !important;
    padding-bottom: var(--spacing-lg);
  }

  .blueprint-spotlight-main .gallery-hero-text-col {
    padding-top: 0 !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Phone view: Make "Every Shade, Meticulously Applied" handwriting text bigger */
  .gallery-hero-title .handwriting-reveal .hw-line[data-line="1"] .hw-text {
    font-size: 92px !important;
  }

  .gallery-hero-title .handwriting-reveal .hw-line[data-line="2"] .hw-text {
    font-size: 64px !important;
  }

  /* Center hero content in phone view */
  .hero-text-col,
  .services-hero-text-col,
  .about-hero-text-col,
  .gallery-hero-text-col,
  .contact-hero-text-col {
    text-align: center !important;
    align-items: center !important;
  }

  .hero-section .eyebrow-tag,
  .services-hero-section .eyebrow-tag,
  .about-hero-section .eyebrow-tag,
  .gallery-hero-section .eyebrow-tag,
  .contact-hero-section .eyebrow-tag {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: inline-block !important;
  }

  .hero-title,
  .services-hero-title,
  .about-hero-title,
  .gallery-hero-title,
  .contact-hero-title {
    width: 100% !important;
    text-align: center !important;
  }

  .handwriting-reveal {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-subtext,
  .services-hero-subtext,
  .about-hero-subtext,
  .gallery-hero-subtext,
  .contact-hero-subtext {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-actions,
  .services-hero-actions,
  .about-hero-actions,
  .gallery-hero-actions,
  .contact-hero-actions {
    justify-content: center !important;
    width: 100% !important;
  }

  .services-hero-visual-col,
  .gallery-hero-visual-col,
  .about-hero-visual-col,
  .contact-hero-visual-col {
    display: none !important;
  }

  .service-details-card {
    display: none !important;
  }

  /* Phone view: move video up above button, place button at the bottom of the slide */
  .service-block-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .service-text-col {
    display: contents !important;
  }

  .service-block-grid .eyebrow-tag {
    order: 1;
  }

  .service-block-grid .service-block-title {
    order: 2;
  }

  .service-block-grid .service-block-desc {
    order: 3;
    margin-bottom: var(--spacing-md);
  }

  .service-visual-col {
    order: 4;
    width: 100%;
    margin-bottom: var(--spacing-md);
  }

  .service-actions {
    order: 5;
    width: 100%;
  }

  .service-actions .btn {
    width: 100%;
    text-align: center;
  }
}





@media (max-width: 575px) {
  .services-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .services-hero-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Services Alternating Blocks & Layout
   ========================================================================== */

.service-block-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  overflow: hidden;
}

.service-block-section.bg-mist {
  background-color: var(--color-mist);
}

.service-block-section.bg-white {
  background-color: var(--color-white);
}

.service-block-grid {
  align-items: center;
  gap: clamp(3rem, 6vw, 5.5rem);
}

.service-text-col {
  display: flex;
  flex-direction: column;
}

.service-block-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 600;
  color: var(--color-navy);
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
}

.service-block-desc {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-gray);
  margin-bottom: var(--spacing-lg);
  max-width: 60ch;
}

/* Service Details Card styling */
.service-details-card {
  padding: var(--spacing-lg);
  background-color: var(--color-white);
  border-radius: 16px;
  border: 1px solid rgba(168, 197, 160, 0.25);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}

.details-group {
  margin-bottom: var(--spacing-md);
}

.details-group:last-child {
  margin-bottom: 0;
}

.details-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-family: var(--font-tags);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-navy);
  margin-bottom: var(--spacing-xs);
}

.details-title i {
  width: 16px;
  height: 16px;
  color: var(--color-blue);
  stroke-width: 2px;
}

.details-list {
  padding-left: var(--spacing-md);
}

.details-list li {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-gray);
  line-height: 1.6;
  margin-bottom: var(--spacing-xs);
  list-style-type: disc;
}

.details-list li::marker {
  color: var(--color-sage);
}

.details-text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-gray);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Special Badges inside Details Card */
.seasonal-callout,
.worksafe-callout,
.eco-friendly-badge,
.supply-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  border-radius: 8px;
  margin-top: var(--spacing-md);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
}

.seasonal-callout {
  background-color: rgba(69, 123, 157, 0.06);
  border-left: 3px solid var(--color-blue);
  color: var(--color-navy);
}

.seasonal-callout i {
  color: var(--color-blue);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.worksafe-callout {
  background-color: rgba(29, 53, 87, 0.04);
  border-left: 3px solid var(--color-navy);
  color: var(--color-navy);
}

.worksafe-callout i {
  color: var(--color-navy);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.eco-friendly-badge {
  background-color: rgba(168, 197, 160, 0.12);
  border-left: 3px solid var(--color-sage);
  color: var(--color-navy);
}

.eco-friendly-badge i {
  color: var(--color-sage);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.supply-callout {
  background-color: rgba(232, 224, 208, 0.25);
  border-left: 3px solid var(--color-sand);
  color: var(--color-navy);
  margin-bottom: 0;
  padding: var(--spacing-sm);
}

.supply-callout i {
  color: var(--color-blue);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.service-actions {
  margin-top: var(--spacing-md);
}

.service-visual-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Let the bezel card fill the full service column width */
.service-visual-col .double-bezel-outer {
  max-width: 100%;
  width: 100%;
}

/* ==========================================================================
   Custom Graphic Placeholders (CSS Mockups)
   ========================================================================== */

.service-graphic-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #0a1628;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform var(--transition-slow);
}

/* Videos inside service cards: show fully, no cropping */
.service-graphic-placeholder video.service-block-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
}

.double-bezel-outer:hover .service-graphic-placeholder {
  transform: scale(1.02);
}

.placeholder-caption-text {
  display: none !important;
}

/* Graphic 1: Interior */
.graphic-interior {
  background: linear-gradient(135deg, #f7f9f6 0%, #e2e8e0 100%);
}

.room-corner-mockup {
  position: relative;
  width: 160px;
  height: 160px;
  transform: rotate(-5deg);
  transition: transform var(--transition-normal);
}

.double-bezel-outer:hover .room-corner-mockup {
  transform: rotate(0deg) scale(1.05);
}

.wall-face-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 130px;
  background-color: var(--color-white);
  border-right: 1px solid rgba(29, 53, 87, 0.08);
  box-shadow: inset 20px 0 30px rgba(29, 53, 87, 0.03);
}

.wall-face-right {
  position: absolute;
  left: 80px;
  top: 0;
  width: 80px;
  height: 130px;
  background-color: #eef2eb;
}

.accent-wall-stripe {
  position: absolute;
  right: 10px;
  top: 0;
  width: 30px;
  height: 130px;
  background-color: var(--color-sage);
  opacity: 0.85;
}

.wainscoting-panel {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 160px;
  height: 40px;
  background-color: #fafbfc;
  border-top: 2px solid rgba(29, 53, 87, 0.1);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.02);
}

.floor-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 160px;
  height: 30px;
  background-color: #d1dad0;
  box-shadow: inset 0 10px 15px rgba(29, 53, 87, 0.05);
}

.graphic-paint-roller {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  z-index: 5;
  transition: transform var(--transition-normal);
}

.double-bezel-outer:hover .graphic-paint-roller {
  transform: scale(1.1) rotate(15deg);
}

.swatch-strip-interactive {
  position: absolute;
  bottom: var(--spacing-xl);
  right: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}

.swatch-stripe {
  width: 36px;
  height: 14px;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-white);
  transition: transform var(--transition-fast);
  cursor: pointer;
}

.swatch-stripe:hover {
  transform: scaleX(1.2) translateX(-4px);
}

.sage-stripe {
  background-color: var(--color-sage);
}

.sand-stripe {
  background-color: var(--color-sand);
}

.navy-stripe {
  background-color: var(--color-navy);
}

/* Graphic 2: Exterior */
.graphic-exterior {
  background: linear-gradient(135deg, var(--color-navy) 0%, #0d1a2b 100%);
}

.house-facade-mockup {
  position: relative;
  width: 150px;
  height: 140px;
  transition: transform var(--transition-normal);
}

.double-bezel-outer:hover .house-facade-mockup {
  transform: translateY(-5px);
}

.house-roof {
  position: absolute;
  top: 0;
  left: 15px;
  width: 120px;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 50px solid var(--color-sand);
}

.house-roof::after {
  content: '';
  position: absolute;
  top: 44px;
  left: -60px;
  width: 120px;
  height: 6px;
  background-color: var(--color-white);
  border-radius: 4px;
}

.house-body {
  position: absolute;
  bottom: 0;
  left: 25px;
  width: 100px;
  height: 90px;
  background-color: rgba(255, 255, 255, 0.08);
  border-left: 2px dashed rgba(255, 255, 255, 0.15);
  border-right: 2px dashed rgba(255, 255, 255, 0.15);
  border-bottom: 2px solid var(--color-white);
}

.house-window {
  position: absolute;
  top: var(--spacing-sm);
  left: 15px;
  width: 26px;
  height: 32px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-blue);
  border-radius: 3px;
}

.house-window::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-blue);
}

.house-window::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--color-blue);
}

.house-door {
  position: absolute;
  bottom: 0;
  right: 15px;
  width: 24px;
  height: 48px;
  background-color: var(--color-sage);
  border: 1.5px solid var(--color-white);
  border-radius: 2px 2px 0 0;
}

.sun-element {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 32px;
  height: 32px;
  background-color: var(--color-sand);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(232, 224, 208, 0.3);
}

.sun-protection-badge {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background-color: rgba(232, 224, 208, 0.15);
  backdrop-filter: blur(4px);
  border-radius: 20px;
  border: 1px solid rgba(232, 224, 208, 0.2);
  color: var(--color-sand);
  font-family: var(--font-tags);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sun-protection-badge i {
  width: 12px;
  height: 12px;
}

/* Graphic 3: Deck */
.graphic-deck {
  background: linear-gradient(135deg, #eaddce 0%, #caae94 100%);
}

.wood-planks-mockup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 160px;
  transform: rotate(-10deg) scale(1.05);
  transition: transform var(--transition-normal);
}

.double-bezel-outer:hover .wood-planks-mockup {
  transform: rotate(-5deg) scale(1.1);
}

.wood-plank {
  height: 24px;
  width: 100%;
  background: linear-gradient(to right, #cfaf93, #bd9a7d);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

.wood-plank::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 10px);
  opacity: 0.35;
}

.plank-1 {
  background: linear-gradient(to right, #dec1a8, #cdab91);
}

.plank-2 {
  background: linear-gradient(to right, #caa688, #b89374);
}

.plank-3 {
  background: linear-gradient(to right, #bd9879, #aa8565);
}

.plank-4 {
  background: linear-gradient(to right, #ab8666, #977353);
}

.water-beads-indicator {
  position: absolute;
  bottom: var(--spacing-xl);
  right: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  border: 1px solid rgba(69, 123, 157, 0.2);
  color: var(--color-navy);
  font-family: var(--font-tags);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: var(--shadow-sm);
  z-index: 5;
}

.water-beads-indicator i {
  width: 12px;
  height: 12px;
  color: var(--color-blue);
}

/* Graphic 4: Fence */
.graphic-fence {
  background: linear-gradient(135deg, #eaf0e8 0%, #cbdacf 100%);
}

.fence-pickets-mockup {
  display: flex;
  gap: 6px;
  position: relative;
  width: 150px;
  height: 110px;
  align-items: flex-end;
  transition: transform var(--transition-normal);
}

.double-bezel-outer:hover .fence-pickets-mockup {
  transform: translateY(-3px);
}

.fence-picket {
  flex: 1;
  height: 100px;
  background-color: var(--color-white);
  border-radius: 2px 2px 0 0;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.04);
  position: relative;
}

.fence-picket::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 8px solid var(--color-white);
  transform: translateY(-8px);
}

.fence-rail {
  position: absolute;
  left: -10px;
  width: 170px;
  height: 8px;
  background-color: #eceff2;
  border-top: 1px solid rgba(29, 53, 87, 0.08);
  border-bottom: 1px solid rgba(29, 53, 87, 0.08);
  z-index: 2;
}

.top-rail {
  top: 25px;
}

.bottom-rail {
  bottom: 20px;
}

.fresh-paint-brushstroke {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.brushstroke-line {
  position: absolute;
  top: 40%;
  left: -20px;
  width: 190px;
  height: 24px;
  background-color: var(--color-sage);
  opacity: 0.85;
  transform: rotate(-15deg);
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(168, 197, 160, 0.3);
  transition: transform var(--transition-normal);
}

.double-bezel-outer:hover .brushstroke-line {
  transform: rotate(-12deg) scale(1.03);
}

/* Graphic 5: Drywall */
.graphic-drywall {
  background: linear-gradient(135deg, #eceff2 0%, #d5dde3 100%);
}

.drywall-panel-mockup {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  border: 1px solid rgba(29, 53, 87, 0.05);
}

.mesh-tape-strip {
  position: absolute;
  top: 0;
  left: 55px;
  width: 32px;
  height: 100%;
  background-color: rgba(29, 53, 87, 0.03);
  border-left: 1px dotted rgba(69, 123, 157, 0.3);
  border-right: 1px dotted rgba(69, 123, 157, 0.3);
  background-image:
    linear-gradient(rgba(69, 123, 157, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69, 123, 157, 0.15) 1px, transparent 1px);
  background-size: 4px 4px;
}

.plaster-mud-stroke {
  position: absolute;
  top: 30px;
  left: 45px;
  width: 55px;
  height: 80px;
  background-color: rgba(241, 243, 240, 0.95);
  border-radius: 6px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.02), 2px 2px 8px rgba(0, 0, 0, 0.03);
  transform: rotate(5deg);
  transition: transform var(--transition-normal);
}

.double-bezel-outer:hover .plaster-mud-stroke {
  transform: rotate(0deg) scale(1.05);
}

.sanded-smooth-zone {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45px;
  background-color: var(--color-mist);
  opacity: 0.9;
  border-top: 1px solid rgba(29, 53, 87, 0.05);
}

.plastering-tool-icon {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  z-index: 5;
}

.plastering-tool-icon i {
  width: 16px;
  height: 16px;
}

/* Graphic 6: Wash */
.graphic-wash {
  background: linear-gradient(135deg, #1d3557 0%, #457b9d 100%);
}

.pressure-spray-mockup {
  position: relative;
  width: 160px;
  height: 160px;
}

.dirty-layer {
  position: absolute;
  inset: 15px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  backdrop-filter: blur(1px);
}

.clean-path {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 80px;
  height: 130px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 8px 0 0 8px;
  box-shadow: inset 5px 0 15px rgba(255, 255, 255, 0.1);
  border-right: 2px solid var(--color-white);
}

.spray-water-beam {
  position: absolute;
  top: 50%;
  left: 95px;
  width: 0px;
  height: 2px;
  background-color: var(--color-white);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: width var(--transition-normal), opacity var(--transition-normal);
}

.double-bezel-outer:hover .spray-water-beam {
  width: 50px;
  opacity: 0.9;
}

.splash-particles {
  position: absolute;
  top: 50%;
  left: 90px;
  width: 10px;
  height: 10px;
  z-index: 5;
}

.particle {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  opacity: 0;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.pt-1 {
  width: 6px;
  height: 6px;
}

.pt-2 {
  width: 4px;
  height: 4px;
}

.pt-3 {
  width: 5px;
  height: 5px;
}

.pt-4 {
  width: 3px;
  height: 3px;
}

.double-bezel-outer:hover .pt-1 {
  transform: translate(-15px, -20px);
  opacity: 1;
}

.double-bezel-outer:hover .pt-2 {
  transform: translate(-20px, 15px);
  opacity: 1;
}

.double-bezel-outer:hover .pt-3 {
  transform: translate(-5px, -30px);
  opacity: 1;
}

.double-bezel-outer:hover .pt-4 {
  transform: translate(-25px, -5px);
  opacity: 1;
}

.wash-nozzle-badge {
  position: absolute;
  bottom: var(--spacing-xl);
  right: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  font-family: var(--font-tags);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wash-nozzle-badge i {
  width: 12px;
  height: 12px;
  color: var(--color-sage);
}

/* Graphic 7: Touchups */
.graphic-touchups {
  background: linear-gradient(135deg, #f0eae1 0%, #ded2c3 100%);
}

.color-match-mockup {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.original-color-bg {
  width: 120px;
  height: 120px;
  background-color: #dfd5c8;
  border-radius: 12px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
}

.spackled-spot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background-color: var(--color-white);
  border-radius: 50%;
  opacity: 0.85;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.brushed-blend-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 50px;
  height: 50px;
  background-color: #dfd5c8;
  border-radius: 50%;
  opacity: 0.95;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-normal);
  z-index: 2;
  border: 1px dashed rgba(29, 53, 87, 0.15);
}

.double-bezel-outer:hover .brushed-blend-circle {
  transform: translate(-50%, -50%) scale(1.1);
}

.precision-spotlight-badge {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background-color: var(--color-white);
  border-radius: 20px;
  border: 1px solid rgba(168, 197, 160, 0.3);
  color: var(--color-navy);
  font-family: var(--font-tags);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: var(--shadow-sm);
}

.precision-spotlight-badge i {
  width: 12px;
  height: 12px;
  color: var(--color-sage);
}


/* ==========================================================================
   Contractors Sub-Contractors Section Styles
   ========================================================================== */

.contractors-callout-section {
  background-color: var(--color-navy);
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  padding: clamp(4rem, 8vw, 6rem) 0;
  z-index: 10;
}

.contractors-container {
  position: relative;
  z-index: 5;
}

.contractors-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tag-white {
  color: var(--color-sage) !important;
}

.contractors-callout-section .contractors-title,
.contractors-title {
  color: var(--color-white) !important;
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.contractors-callout-section .contractors-desc,
.contractors-desc {
  color: #E2E8F0 !important;
  max-width: 65ch;
  margin-bottom: var(--spacing-lg);
  font-size: 1.1rem;
  line-height: 1.75;
}

.contractors-badges {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.c-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-tags);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.c-badge span.iconify {
  width: 16px;
  height: 16px;
  color: var(--color-sage);
}

.contractors-action-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

/* Media Showcase Spot (Image / Video / Animation player container) */
.contractors-media-spot {
  width: 100%;
  max-width: 420px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.contractors-media-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px;
  background: #0f1926;
}

.contractors-media-asset {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-normal);
}

.contractors-media-spot:hover .contractors-media-asset {
  transform: scale(1.05);
}

.media-overlay-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(15, 25, 42, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-white);
  font-family: var(--font-tags);
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.media-overlay-badge span.iconify {
  color: var(--color-teal);
}

.contractors-cta-box {
  background: rgba(15, 30, 51, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: var(--spacing-lg);
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateZ(0);
  overflow: hidden;
  position: relative;
}

.contractors-cta-box h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-white);
  margin-bottom: var(--spacing-xs);
}

.contractors-cta-box p {
  color: var(--color-mist);
  font-size: 0.95rem;
  margin-bottom: var(--spacing-lg);
  line-height: 1.5;
}

.contractors-cta-box .btn-cta-light {
  width: 100%;
}


/* ==========================================================================
   Responsive Overrides for Services Page blocks
   ========================================================================== */

/* Alternating Columns Layout configuration for desktop */
@media (min-width: 992px) {
  .service-block-section:nth-of-type(even) .service-text-col {
    grid-column-start: 7;
    grid-column-end: 13;
  }

  .service-block-section:nth-of-type(even) .service-visual-col {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 1;
    /* Visual stays left, text right */
  }
}

@media (max-width: 991px) {
  .service-block-section {
    padding: clamp(3rem, 6vw, 4.5rem) 0;
  }

  .service-block-grid {
    gap: var(--spacing-xl);
  }

  /* Stack column elements: Text first, Visual second */
  .service-text-col {
    order: 1;
  }

  .service-visual-col {
    order: 2;
    margin-top: var(--spacing-md);
  }

  .service-graphic-placeholder {
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }

  .service-visual-col .double-bezel-outer {
    max-width: 100%;
  }

  .contractors-callout-section .col-8,
  .contractors-callout-section .col-4 {
    grid-column: span 12;
  }

  .contractors-action-col {
    justify-content: flex-start;
    margin-top: var(--spacing-lg);
  }

  .contractors-cta-box {
    max-width: 100%;
    text-align: left;
  }

  .contractors-cta-box .btn-cta-light {
    width: auto;
  }
}

@media (max-width: 575px) {
  .service-actions .btn {
    width: 100%;
  }

  .c-badge {
    font-size: 0.75rem;
    padding: 4px 10px;
  }

  .service-graphic-placeholder {
    aspect-ratio: 16 / 9;
  }
}


/* ==========================================================================
   Gallery Page Hero Section & Filter Tabs
   ========================================================================== */

.gallery-hero-section {
  position: relative;
  min-height: 80dvh;
  display: flex;
  align-items: center;
  padding-top: 140px;
  /* Offset sticky header */
  padding-bottom: var(--spacing-xxl);
  background-color: var(--color-mist);
  overflow: hidden;
  z-index: 10;
}

.gallery-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.gallery-hero-container .container-grid {
  gap: 3.5rem;
  align-items: center;
}

.gallery-hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gallery-hero-title {
  margin-bottom: var(--spacing-md);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy);
}

.gallery-hero-subtext {
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--color-gray);
  max-width: 55ch;
  margin-bottom: var(--spacing-lg);
}

.gallery-hero-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
}

.gallery-hero-visual-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-visual-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--color-sand) 0%, #DFD7C5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px;
}

/* Subtle grid overlay inside visual placeholder */
.gallery-visual-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(29, 53, 87, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29, 53, 87, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: 1;
}

.gallery-placeholder-graphic {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-lg);
}

.gallery-camera-icon {
  width: 70px;
  height: 70px;
  background-color: var(--color-navy);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal);
}

.double-bezel-outer:hover .gallery-camera-icon {
  transform: scale(1.1) rotate(-5deg);
}

.gallery-camera-icon i {
  width: 32px;
  height: 32px;
  stroke-width: 1.5px;
}

.gallery-placeholder-tag {
  font-family: var(--font-tags);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-navy);
  margin-bottom: var(--spacing-xs);
}

.gallery-placeholder-sub {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-gray);
}

/* Gallery Section Header */
.gallery-section-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.gallery-section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--spacing-xs);
}

.gallery-section-subtitle {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--color-gray);
  max-width: 600px;
  margin: 0 auto;
}

/* Ensure gallery hero elements are fully visible and readable */
.gallery-hero-subtext,
.gallery-hero-actions,
.gallery-hero-visual-col,
.gsap-enabled .gallery-hero-subtext,
.gsap-enabled .gallery-hero-actions,
.gsap-enabled .gallery-hero-visual-col {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Media Query adjustments for Gallery Hero */
@media (max-width: 991px) {
  .gallery-hero-section {
    padding-top: 120px;
    padding-bottom: var(--spacing-xl);
    min-height: auto;
  }

  .gallery-hero-container .container-grid {
    gap: var(--spacing-xl);
  }

  .gallery-hero-text-col {
    order: 1;
  }

  .gallery-hero-visual-col {
    order: 2;
    justify-content: flex-start;
  }

  .gallery-visual-placeholder {
    aspect-ratio: 16/10;
  }

}

@media (max-width: 575px) {
  .gallery-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .gallery-hero-actions .btn {
    width: 100%;
  }
}


/* Gallery Grid & Placeholders */
.gallery-grid-section {
  background-color: var(--color-white);
  padding: var(--spacing-xxl) 0;
}

/* ==========================================================================
   Smooth Blue Gradient Background — (Gallery Page)
   Organic mesh gradient flowing from deeper blue-indigo (left) to softer
   periwinkle-lavender (right), matching the Keelcode reference aesthetic.
   No grid lines. Content sits directly on the gradient — no glass panels.
   ========================================================================== */

main.blueprint-spotlight-main {
  position: relative;
  isolation: isolate;
  background-color: #4f56e8;
}

.spotlight-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* --- Smooth organic mesh gradient: blue-indigo → periwinkle-lavender ----- */
.spotlight-base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 140% 80% at 0% 50%, #3b44c7 0%, transparent 70%),
    radial-gradient(ellipse 100% 120% at 100% 20%, #9b8ce8 0%, transparent 65%),
    radial-gradient(ellipse 80% 90% at 80% 90%, #8078d4 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 30% 90%, #5b5bd6 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 55% 40%, #6e6cf0 0%, transparent 50%),
    linear-gradient(120deg, #3b3fc7 0%, #5254db 25%, #6b6bf0 50%, #8b85e8 75%, #a89de6 100%);
}

/* No grid lines — clean smooth canvas */
.spotlight-base::before {
  display: none;
}

/* Soft ambient glow overlays for depth */
.spotlight-base::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 15% 30%, rgba(99, 130, 255, 0.35), transparent 70%),
    radial-gradient(ellipse 45% 55% at 85% 70%, rgba(160, 140, 230, 0.30), transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 10%, rgba(120, 110, 240, 0.20), transparent 60%);
}

/* --- Interactive Cursor Spotlight Light Aura ----------------------------- */
.spotlight-reveal {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: radial-gradient(circle 400px at var(--spot-x, 50%) var(--spot-y, 50%),
      rgba(255, 255, 255, 0.12) 0%, rgba(180, 170, 255, 0.08) 40%, transparent 75%);
  pointer-events: none;
}

main.blueprint-spotlight-main.is-spotlight-active .spotlight-reveal {
  opacity: 1;
}

/* --- Let the gradient show through hero & grid sections ------------------ */
.blueprint-spotlight-main .gallery-hero-section,
.blueprint-spotlight-main .gallery-grid-section {
  background-color: transparent;
}

.blueprint-spotlight-main .gallery-grid-section .container {
  position: relative;
  z-index: 2;
}

/* --- No glass panel — content sits directly on the gradient -------------- */
.blueprint-spotlight-main .gallery-hero-text-col,
.blueprint-spotlight-main .gallery-section-header {
  position: relative;
  z-index: 2;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: var(--spacing-lg);
  box-shadow: none;
}

.blueprint-spotlight-main .eyebrow-tag {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
  padding: 6px 16px;
  border-radius: 9999px;
}

.blueprint-spotlight-main .gallery-hero-subtext,
.blueprint-spotlight-main .gallery-section-subtitle {
  color: rgba(255, 255, 255, 0.88);
}

.blueprint-spotlight-main .gallery-hero-title {
  color: #ffffff;
}

.blueprint-spotlight-main .gallery-section-title {
  color: #ffffff;
}

/* Hero Action Buttons */
.blueprint-spotlight-main .gallery-hero-actions .btn-primary {
  background: #ffffff;
  color: #3b3fc7;
  border: 1px solid #ffffff;
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.75rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
}

.blueprint-spotlight-main .gallery-hero-actions .btn-primary:hover {
  background: #f0efff;
  color: #3535b8;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.blueprint-spotlight-main .gallery-hero-actions .btn-outline {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 9999px;
  padding: 0.75rem 1.75rem;
  font-weight: 500;
  transition: all 0.25s ease;
}

.blueprint-spotlight-main .gallery-hero-actions .btn-outline:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
}

/* Filter Tab Pills on Blue Canvas */
.blueprint-spotlight-main .btn-filter-tab {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.95);
}

.blueprint-spotlight-main .btn-filter-tab:hover {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
  transform: translateY(-2px);
}

.blueprint-spotlight-main .btn-filter-tab.active {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #3b3fc7;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Load More Button on Blue Canvas */
.blueprint-spotlight-main .gallery-load-more .btn {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  transition: all 0.25s ease;
}

.blueprint-spotlight-main .gallery-load-more .btn:hover {
  background: #ffffff;
  color: #3b3fc7;
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* --- Fallbacks ----------------------------------------------------------- */
@supports not (mask-image: radial-gradient(circle, black, transparent)) {
  .spotlight-reveal {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-reveal {
    display: none;
  }
}

.gallery-grid {
  width: 100%;
  display: block;
  /* Override default grid */
  column-count: 3;
  column-gap: var(--spacing-lg);
}

/* --- Dimensional swatch cards: unique silhouette + extruded 3D edge -------- */
.gallery-card {
  /* Shape variables — overridden per data-shape below */
  --radius: 18px;
  --clip: none;
  --edge: #16294a;

  display: inline-block;
  /* Required for column masonry flow */
  width: 100%;
  margin-bottom: calc(var(--spacing-lg) + 22px);
  /* extra room for extrusion + cast shadow */
  break-inside: avoid;
  position: relative;
  isolation: isolate;
  background: transparent;
  border: none;
  cursor: pointer;
  vertical-align: top;
  text-align: left;
}

/* Card silhouettes — rounded corners so media is shown full without polygon cropping */
.gallery-card[data-shape="slant"],
.gallery-card[data-shape="notch"],
.gallery-card[data-shape="corner"] {
  --radius: 18px;
  --clip: none;
}

/* Extrusion edge tints (brand palette, darker than the face) */
.gallery-card[data-tone="navy"] {
  --edge: #16294a;
}

.gallery-card[data-tone="blue"] {
  --edge: #35617e;
}

.gallery-card[data-tone="sage"] {
  --edge: #87a57e;
}

.gallery-card[data-tone="sand"] {
  --edge: #cfc3a5;
}

.gallery-card[data-tone="mist"] {
  --edge: #c6ccc5;
}

/* Extruded thickness — same silhouette, darker tone, offset behind the face */
.gallery-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  clip-path: var(--clip);
  background: var(--edge);
  background: linear-gradient(150deg,
      color-mix(in srgb, var(--edge) 82%, white) 0%,
      var(--edge) 45%,
      color-mix(in srgb, var(--edge) 70%, black) 100%);
  transform: translate(9px, 11px);
  z-index: -1;
}

/* Soft cast shadow — blurred copy of the silhouette sitting off the wall */
.gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  clip-path: var(--clip);
  background: rgba(29, 53, 87, 0.35);
  transform: translate(15px, 24px);
  filter: blur(16px);
  z-index: -2;
  animation: gallery-shadow-breathe 5s ease-in-out infinite alternate;
}

@keyframes gallery-shadow-breathe {
  from {
    transform: translate(15px, 24px) scale(0.99);
    opacity: 0.85;
  }

  to {
    transform: translate(17px, 28px) scale(1.02);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-card::after {
    animation: none;
  }
}

/* Card face — holding image/video + caption in full resolution */
.card-shell {
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  clip-path: var(--clip);
  overflow: hidden;
  background-color: var(--color-mist);
}

.card-shell>img,
.card-shell>video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: center center;
  transition: transform var(--transition-normal);
}

/* Video badge overlay indicator */
.video-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(29, 53, 87, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 3;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.gallery-card:hover .video-badge {
  background: var(--color-teal);
  transform: scale(1.12);
}

/* Hover = centered zoom preview of the photo/video */
.gallery-card:hover .card-shell>img,
.gallery-card:hover .card-shell>video {
  transform: scale(1.06);
}

/* Keyboard focus — ring on the face, not the clipped wrapper */
.gallery-card:focus-visible {
  outline: none;
}

.gallery-card:focus-visible .card-shell {
  outline: 3px solid var(--color-teal);
  outline-offset: 3px;
}

/* Placeholder card styling (non-image fallbacks) — color lives on the shell */
.gallery-card.is-placeholder .card-shell {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  text-align: center;
  background-color: inherit;
  color: inherit;
}

.gallery-card.is-placeholder:nth-child(even) .card-shell {
  aspect-ratio: 4 / 5;
  /* Dynamic variety for masonry */
}

.gallery-card.is-placeholder:nth-child(3n) .card-shell {
  aspect-ratio: 1.2 / 1;
}

/* Mist placeholder keeps a hairline definition without a rectangular border */
.gallery-card.is-placeholder.bg-card-mist {
  border: none;
}

.gallery-card.is-placeholder.bg-card-mist .card-shell {
  box-shadow: inset 0 0 0 1px rgba(29, 53, 87, 0.08);
}

.gallery-card-icon {
  font-size: 2.2rem;
  margin-bottom: var(--spacing-sm);
  display: block;
}

.gallery-card.is-placeholder h3 {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.gallery-card-tag {
  font-family: var(--font-tags);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Brand backgrounds for placeholders */
.bg-card-sand {
  background-color: var(--color-sand);
  color: var(--color-navy);
}

.bg-card-sage {
  background-color: var(--color-sage);
  color: var(--color-navy);
}

.bg-card-mist {
  background-color: var(--color-mist);
  color: var(--color-navy);
  border: 1px solid rgba(29, 53, 87, 0.08);
}

.bg-card-navy {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.bg-card-navy .gallery-card-tag {
  color: var(--color-sage);
}

/* ==========================================================================
   Gatefold Binder — closed double-door portfolio cover
   Two navy doors swing open in 3D (GSAP rotationY) to reveal the grid.
   Doors & badge stay hidden unless JS adds .binder-armed (no-JS / reduced
   motion fallback keeps the grid fully visible).
   ========================================================================== */
.gatefold-binder {
  position: relative;
  perspective: 1800px;
  perspective-origin: 50% 50%;
}

.gatefold-door,
.gatefold-logo-badge {
  display: none;
}

.gatefold-binder.binder-armed .gatefold-door,
.gatefold-binder.binder-armed .gatefold-logo-badge {
  display: flex;
}

/* --- Binder doors -------------------------------------------------------- */
.gatefold-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.1%;
  /* slight overlap so no grid peeks through the seam */
  z-index: 5;
  align-items: stretch;
  justify-content: stretch;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  background: linear-gradient(135deg, #24436e 0%, var(--color-navy) 45%, #152741 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  cursor: pointer;
  /* cover layer: click anywhere on the binder opens it */
}

.gatefold-binder.is-open .gatefold-door {
  pointer-events: none;
}

.gatefold-door-left {
  left: 0;
  transform-origin: left center;
  border-radius: var(--radius-gallery) 6px 6px var(--radius-gallery);
  border-right: 1px solid rgba(232, 224, 208, 0.18);
}

.gatefold-door-right {
  right: 0;
  transform-origin: right center;
  border-radius: 6px var(--radius-gallery) var(--radius-gallery) 6px;
  border-left: 1px solid rgba(29, 53, 87, 0.55);
}

/* Blueprint texture, matching the hero's .blueprint-lines motif */
.gatefold-door::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image:
    linear-gradient(to right, rgba(69, 123, 157, 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(69, 123, 157, 0.35) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

/* Stitched warm-sand inner frame — presentation-binder detailing */
.gatefold-door-frame {
  position: absolute;
  inset: clamp(14px, 3vw, 34px);
  border: 1px dashed rgba(232, 224, 208, 0.4);
  pointer-events: none;
}

.gatefold-door-left .gatefold-door-frame {
  border-radius: 20px 4px 4px 20px;
  border-right-style: solid;
  border-right-color: rgba(232, 224, 208, 0.2);
}

.gatefold-door-right .gatefold-door-frame {
  border-radius: 4px 20px 20px 4px;
  border-left-style: solid;
  border-left-color: rgba(232, 224, 208, 0.2);
}

/* Shade layer GSAP sweeps up while the doors rotate (adds depth) */
.gatefold-door-shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.gatefold-door-left .gatefold-door-shade {
  background: linear-gradient(to right, rgba(10, 20, 35, 0.85), rgba(10, 20, 35, 0.1));
}

.gatefold-door-right .gatefold-door-shade {
  background: linear-gradient(to left, rgba(10, 20, 35, 0.85), rgba(10, 20, 35, 0.1));
}

/* --- Center brand badge on the seam -------------------------------------- */
.gatefold-logo-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: clamp(170px, 24vw, 240px);
  aspect-ratio: 1 / 1;
  padding: var(--spacing-md);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at 32% 28%, #fbf7ee 0%, var(--color-sand) 58%, #d9cdb6 100%);
  box-shadow:
    0 0 0 6px rgba(232, 224, 208, 0.16),
    0 0 0 7px rgba(42, 157, 143, 0.35),
    var(--shadow-lift);
  transition: box-shadow var(--transition-normal);
}

.gatefold-logo-badge:hover,
.gatefold-logo-badge:focus-visible {
  box-shadow:
    0 0 0 6px rgba(232, 224, 208, 0.2),
    0 0 0 8px rgba(42, 157, 143, 0.55),
    var(--shadow-glow-teal);
}

.gatefold-badge-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.gatefold-badge-logo {
  height: clamp(44px, 7vw, 64px);
  width: auto;
  object-fit: contain;
}

.gatefold-badge-text {
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
}

.gatefold-hint {
  font-family: var(--font-tags);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-blue);
}

/* Once fully opened, the cover layer is gone and the grid is interactive */
.gatefold-binder.is-open {
  perspective: none;
}

/* --- Responsive adjustments ---------------------------------------------- */
@media (max-width: 991px) {
  .gatefold-binder {
    perspective: 1200px;
  }
}

@media (max-width: 575px) {
  .gatefold-logo-badge {
    width: clamp(150px, 52vw, 190px);
  }

  .gatefold-door-frame {
    inset: 12px;
  }
}

/* Load More Section container */
.gallery-load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-xl);
  width: 100%;
}

/* ==========================================================================
   Gallery Lightbox Dialog Overlay
   ========================================================================== */
.gallery-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(29, 53, 87, 0.95);
  /* Deep translucent navy backdrop */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.gallery-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
}

.lightbox-media {
  max-width: 100%;
  max-height: 70dvh;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.2);
}

/* Lightbox Placeholder Card (when displaying missing asset) */
.lightbox-placeholder-card {
  width: 500px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.lightbox-placeholder-card .gallery-card-icon {
  font-size: 3.5rem;
  margin-bottom: var(--spacing-md);
}

.lightbox-placeholder-card h3 {
  font-size: 1.6rem;
  margin-bottom: var(--spacing-sm);
}

.lightbox-placeholder-card .gallery-card-tag {
  font-size: 0.9rem;
}

.lightbox-caption {
  display: none;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-top: var(--spacing-md);
  text-align: center;
  max-width: 60ch;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.lightbox-meta {
  display: none;
  font-family: var(--font-tags);
  font-size: 0.8rem;
  color: var(--color-sage);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: var(--spacing-xs);
}

/* Control UI Buttons — Premium 3D Tactile Orbs */
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  color: var(--color-white);
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 1;
  z-index: 2010;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-sizing: border-box;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(15, 30, 50, 0.7) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 10px 24px -4px rgba(0, 0, 0, 0.6),
    inset 0 2px 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 6px 0 rgba(0, 0, 0, 0.45),
    0 0 14px rgba(42, 157, 143, 0.25);
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  will-change: transform;
}

.lightbox-close {
  top: 30px;
  right: 30px;
  width: 58px;
  height: 58px;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 62px;
  height: 62px;
  user-select: none;
}

.lightbox-close svg,
.lightbox-prev svg,
.lightbox-next svg {
  width: 26px;
  height: 26px;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.lightbox-prev {
  left: 30px;
}

.lightbox-next {
  right: 30px;
}

/* 3D Hover elevation & glow */
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45) 0%, rgba(42, 157, 143, 0.35) 50%, rgba(15, 30, 50, 0.85) 100%);
  border-color: rgba(42, 157, 143, 0.8);
  color: var(--color-white);
  box-shadow:
    0 16px 32px -6px rgba(0, 0, 0, 0.75),
    inset 0 2px 3px 0 rgba(255, 255, 255, 0.7),
    inset 0 -3px 8px 0 rgba(0, 0, 0, 0.5),
    0 0 26px rgba(42, 157, 143, 0.65);
}

.lightbox-close:hover {
  transform: scale(1.12) rotate(90deg);
}

.lightbox-prev:hover {
  transform: translateY(-50%) scale(1.12) rotate(-5deg);
}

.lightbox-next:hover {
  transform: translateY(-50%) scale(1.12) rotate(5deg);
}

.lightbox-prev:hover svg {
  transform: translateX(-2px);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 10px rgba(42, 157, 143, 0.9));
}

.lightbox-next:hover svg {
  transform: translateX(2px);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 10px rgba(42, 157, 143, 0.9));
}

.lightbox-close:hover svg {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 10px rgba(42, 157, 143, 0.9));
}

/* 3D Tactile Press / Active state */
.lightbox-close:active,
.lightbox-prev:active,
.lightbox-next:active {
  box-shadow:
    0 4px 12px -2px rgba(0, 0, 0, 0.6),
    inset 0 3px 8px 0 rgba(0, 0, 0, 0.7);
}

.lightbox-close:active {
  transform: scale(0.94) rotate(90deg);
}

.lightbox-prev:active {
  transform: translateY(-50%) scale(0.94);
}

.lightbox-next:active {
  transform: translateY(-50%) scale(0.94);
}

/* Focus styling for keyboard accessibility */
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
  outline: 2px solid var(--color-sage);
  outline-offset: 2px;
}

/* Breakpoint adjustments for Masonry & Lightbox */
@media (max-width: 991px) {
  .gallery-grid {
    column-count: 2;
  }
}

@media (max-width: 767px) {
  /* Hide 3D flip gate doors on mobile for instant load */
  .gatefold-door,
  .gatefold-logo-badge {
    display: none !important;
  }

  .gallery-grid {
    column-count: 2 !important;
    column-gap: 0.75rem !important;
  }

  .gallery-card {
    margin-bottom: 1rem !important;
  }

  .lightbox-close {
    top: 15px;
    right: 15px;
    width: 48px;
    height: 48px;
  }

  .lightbox-prev,
  .lightbox-next {
    width: 46px;
    height: 46px;
  }

  .lightbox-close svg,
  .lightbox-prev svg,
  .lightbox-next svg {
    width: 20px;
    height: 20px;
  }

  .lightbox-prev {
    left: 15px;
  }

  .lightbox-next {
    right: 15px;
  }
}

@media (max-width: 575px) {
  .gallery-grid {
    column-count: 2 !important;
    column-gap: 0.65rem !important;
  }

  .gallery-card.is-placeholder .card-shell {
    aspect-ratio: 1.2 / 1;
  }

  /* Tighter extrusion + shadow on small screens */
  .gallery-card::before {
    transform: translate(5px, 6px);
  }

  .gallery-card::after {
    transform: translate(8px, 12px);
    filter: blur(12px);
    animation: none;
  }
}

/* ==========================================================================
   About Page Sections & Components
   ========================================================================== */

.about-hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 140px;
  padding-bottom: var(--spacing-xxl);
  background: transparent;
  overflow: hidden;
  z-index: 10;
}

/* ==========================================================================
   About Page: Scroll-Stacked Watercolor Scene
   One fixed full-viewport background holds 4 progressive versions of the
   same artwork (empty fields → sketched houses → painted houses → trees
   & mailboxes). js/about-scene.js fades each layer in as its section
   scrolls into view, so the valley appears to be built while you read.
   Without JS or under reduced motion every layer stays visible and the
   complete final scene is shown statically.
   ========================================================================== */

.about-scene-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.abs-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: opacity, transform;
}

video.abs-layer {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.abs-1 {
  z-index: 1;
  background-image: url('../images/about/layer1.webp');
}

.abs-2 {
  z-index: 2;
  background-image: url('../images/about/layer2.webp');
}

.abs-3 {
  z-index: 3;
  background-image: url('../images/about/layer3.webp');
}

.abs-4 {
  z-index: 4;
  background-image: url('../images/about/layer4.webp');
}

/* Only hide the progressive layers when JS will reveal them on scroll;
   main.js sets .gsap-enabled solely when GSAP loads and motion is allowed */
html.gsap-enabled .abs-2,
html.gsap-enabled .abs-3,
html.gsap-enabled .abs-4 {
  opacity: 0;
}

/* Subtle white veil keeping body text readable over the artwork */
.abs-scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.12) 45%,
      rgba(255, 255, 255, 0.3) 100%);
}

/* Content and footer sit above the fixed scene */
.about-scene main,
.about-scene .site-footer {
  position: relative;
  z-index: 2;
}

/* Let the scene show through the page sections */
.about-scene .our-story-section,
.about-scene .team-section,
.about-scene .service-area-section {
  /* !important needed: styles.css forces .service-area-section white with
     !important for the home page, which would otherwise hide the scene */
  background-color: transparent !important;
  border-top: 0;
}

/* Hero typography sizing is handled by the handwriting-reveal engine's
   auto-fitted SVG viewBox (see js/handwriting-reveal.js) */

.about-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.about-hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy);
  margin-bottom: var(--spacing-md);
}

.about-hero-subtext {
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--color-gray);
  max-width: 55ch;
  margin-bottom: var(--spacing-lg);
}

.about-hero-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
}

.about-hero-visual-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-hero-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--color-sand) 0%, #DFD7C5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.about-hero-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(29, 53, 87, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29, 53, 87, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: 1;
}

.our-story-section {
  position: relative;
  background-color: var(--color-white);
  padding: clamp(4rem, 10vw, 7rem) 0;
}

.story-text-col {
  display: flex;
  flex-direction: column;
}

.story-title {
  margin-bottom: var(--spacing-md);
}

.story-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  line-height: 1.6;
  color: var(--color-blue);
  border-left: 3px solid var(--color-sage);
  padding-left: var(--spacing-md);
  margin: var(--spacing-md) 0 var(--spacing-lg) 0;
}

.story-values-col {
  display: flex;
  flex-direction: column;
}

.values-heading {
  margin-bottom: var(--spacing-xs);
}

.values-intro {
  font-size: 1rem;
  color: var(--color-gray);
  margin-bottom: var(--spacing-lg);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.value-card {
  padding: var(--spacing-md);
  height: 100%;
}

.value-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.value-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(168, 197, 160, 0.15);
  /* Sage transparency */
  color: var(--color-navy);
  flex-shrink: 0;
}

.value-icon-wrapper svg {
  width: 16px;
  height: 16px;
  stroke-width: 2px;
}

/* Let's give values custom colors for specific badges */
.value-card:nth-child(2) .value-icon-wrapper {
  background-color: rgba(69, 123, 157, 0.12);
  /* Blue transparency */
}

.value-card:nth-child(3) .value-icon-wrapper {
  background-color: rgba(29, 53, 87, 0.08);
  /* Navy transparency */
}

.value-card:nth-child(4) .value-icon-wrapper {
  background-color: rgba(232, 224, 208, 0.3);
  /* Sand transparency */
}

.value-title {
  font-family: var(--font-tags);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-navy);
  margin-bottom: 0;
}

.value-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-gray);
  margin-bottom: 0;
}

/* Responsive Overrides for About Page */
@media (max-width: 991px) {
  .about-hero-section {
    padding-top: 120px;
    padding-bottom: var(--spacing-xl);
    min-height: auto;
  }

  .about-hero-placeholder {
    aspect-ratio: 16/10;
  }

  .about-hero-text-col {
    order: 1;
  }

  .about-hero-visual-col {
    order: 2;
    margin-top: var(--spacing-md);
  }

  .our-story-grid {
    gap: var(--spacing-xl);
  }
}

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

/* ==========================================================================
   About Page: Team Section
   ========================================================================== */

.team-section {
  position: relative;
  background-color: var(--color-mist);
  padding: clamp(4rem, 10vw, 7rem) 0;
  border-top: 1px solid rgba(29, 53, 87, 0.05);
}

.team-header {
  margin-bottom: var(--spacing-xxl);
  max-width: 65ch;
}

.team-title {
  margin-bottom: var(--spacing-sm);
}

.team-intro {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--color-gray);
  margin-bottom: 0;
}

.team-grid {
  display: flex;
  justify-content: center;
  gap: 3.5rem;
  flex-wrap: wrap;
  row-gap: 2.5rem;
}

.team-card-col {
  display: flex;
  width: 100%;
  max-width: 360px;
}

.team-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  padding: var(--spacing-lg);
  border-radius: 24px;
  width: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

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

/* Portrait photo container matching visual showcase aesthetics */
.team-card .double-bezel-outer {
  margin-bottom: var(--spacing-sm);
  width: 100%;
}

.team-photo-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.4;
  background: linear-gradient(135deg, var(--color-sand) 0%, #DFD7C5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
}

.team-photo-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(29, 53, 87, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29, 53, 87, 0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 1;
}

.team-photo-placeholder .placeholder-graphic {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-md);
}

.team-photo-placeholder .user-avatar-icon {
  width: 56px;
  height: 56px;
  background-color: var(--color-navy);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal);
}

.team-card:hover .user-avatar-icon {
  transform: scale(1.08) rotate(-3deg);
}

.team-photo-placeholder .user-avatar-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5px;
}

.team-photo-placeholder .placeholder-tag {
  font-family: var(--font-tags);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-navy);
  margin-bottom: 2px;
}

.team-photo-placeholder .placeholder-sub {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-gray);
}

.team-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.team-role-tag {
  font-family: var(--font-tags);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-blue);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.team-member-name {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0;
  text-align: center;
}

.team-member-bio {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-gray);
  margin-bottom: var(--spacing-md);
  flex-grow: 1;
}

.team-skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: auto;
}

.team-skill-badge {
  font-family: var(--font-tags);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  background-color: rgba(168, 197, 160, 0.12);
  /* Sage transparent */
  color: var(--color-navy);
  border: 1px solid rgba(168, 197, 160, 0.2);
  border-radius: 20px;
}

.team-card-col:nth-child(2) .team-skill-badge {
  background-color: rgba(69, 123, 157, 0.08);
  /* Blue transparent */
  border-color: rgba(69, 123, 157, 0.15);
}

.team-card-col:nth-child(3) .team-skill-badge {
  background-color: rgba(232, 224, 208, 0.25);
  /* Sand transparent */
  border-color: rgba(232, 224, 208, 0.4);
}

/* Responsive adjustments for Team Grid */
@media (max-width: 991px) {
  .team-grid {
    gap: var(--spacing-lg);
  }
}

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

  .team-card-col {
    grid-column: span 12;
  }

  .team-header {
    margin-bottom: var(--spacing-xl);
  }
}

/* ==========================================================================
   Contact Page Sections & Components
   ========================================================================== */

.contact-hero-section {
  position: relative;
  min-height: 75dvh;
  display: flex;
  align-items: center;
  padding-top: 140px;
  padding-bottom: var(--spacing-xxl);
  background-color: var(--color-mist);
  overflow: hidden;
  z-index: 10;
}

.contact-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.contact-hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy);
  margin-bottom: var(--spacing-md);
}

.contact-hero-subtext {
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--color-gray);
  max-width: 55ch;
  margin-bottom: var(--spacing-lg);
}

.contact-hero-visual-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-hero-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--color-sand) 0%, #DFD7C5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.contact-hero-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(29, 53, 87, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29, 53, 87, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: 1;
}

.contact-section {
  padding-bottom: clamp(4rem, 10vw, 8rem);
  background-color: var(--color-mist);
}

/* ==========================================================================
   Contact Page — Pinned Background Video + Warm Tint (video palette)
   Sticky-background pattern: an absolute wrapper spans all of <main>, and the
   viewport-sized sticky child pins the video to the screen while scrolling,
   then rides up with the end of main as the footer enters (a sticky element
   can never leave its containing block, so the footer is never overlapped).
   ========================================================================== */
.contact-page main {
  position: relative;
}

/* Full-height background layer spanning all of main */
.page-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #F4E9DA;
  /* warm cream fallback while/if the video can't play */
}

/* Pinned to the screen while scrolling main; rides up with the end of main
   when the footer arrives, so the video glides away instead of being chopped */
.page-bg-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #F4E9DA;
}

.page-bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Light warm tint sampled from the video: cream wall → peach → terracotta.
   Kept subtle so the video stays clearly visible. */
.page-bg-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
      rgba(244, 233, 218, 0.66) 0%,
      rgba(229, 168, 127, 0.52) 50%,
      rgba(196, 113, 74, 0.46) 100%);
}

/* Let the video show through on the contact page */
body.contact-page {
  background-color: #F4E9DA;
}

.contact-page .contact-hero-section,
.contact-page .contact-section {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

/* The video replaces the blueprint lines in the hero */
.contact-page .contact-hero-section .blueprint-background {
  display: none;
}

/* Hero text on the light warm tint: navy body + terracotta accent */
.contact-page .contact-hero-section .eyebrow-tag {
  color: #B85C38;
}

.contact-page .contact-hero-subtext {
  color: rgba(29, 53, 87, 0.8);
}

/* Response promise card: frosted light bg so navy/gray text stays readable */
.contact-page .response-promise-card {
  background-color: rgba(255, 255, 255, 0.85);
  border-color: rgba(184, 92, 56, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Scrolled navbar on contact uses the shared dark-glass pill (see .navbar-header.nav-scrolled) */

@media (prefers-reduced-motion: reduce) {
  .page-bg-video video {
    display: none;
    /* static warm gradient tint remains */
  }
}

/* Desktop spacing override: forces a 2-column empty gap in between text and form */
@media (min-width: 992px) {
  .contact-section .contact-info-col {
    grid-column: span 5;
  }

  .contact-section .contact-form-col {
    grid-column: 8 / span 5;
  }
}

.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Response Promise Card */
.response-promise-card {
  background-color: rgba(168, 197, 160, 0.08);
  /* Sage tint */
  border: 1px solid rgba(168, 197, 160, 0.25);
  border-radius: 16px;
  padding: var(--spacing-lg);
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.response-promise-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.response-promise-icon {
  background-color: rgba(168, 197, 160, 0.15);
  color: var(--color-navy);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.response-promise-icon i {
  width: 20px;
  height: 20px;
}

.response-promise-title {
  font-family: var(--font-tags);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-navy);
  margin-bottom: 4px;
  display: block;
}

.response-promise-desc {
  font-size: 0.95rem;
  color: var(--color-gray);
  margin-bottom: 0;
  line-height: 1.6;
}

/* Contact details block */
.contact-details-block {
  background-color: var(--color-white);
  border: 1px solid rgba(29, 53, 87, 0.06);
  border-radius: 16px;
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.contact-details-heading {
  font-family: var(--font-tags);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-blue);
  margin-bottom: var(--spacing-md);
}

.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.contact-detail-item {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.contact-detail-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(69, 123, 157, 0.06);
  color: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-normal), background-color var(--transition-normal);
}

.contact-detail-item:hover .contact-detail-icon {
  transform: scale(1.1);
  background-color: rgba(69, 123, 157, 0.12);
}

.contact-detail-icon i {
  width: 18px;
  height: 18px;
}

.contact-detail-label {
  font-family: var(--font-tags);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray);
  display: block;
}

.contact-detail-value {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-navy);
  display: block;
  margin-top: 2px;
}

.contact-detail-value a {
  color: var(--color-navy);
  transition: color var(--transition-fast);
}

.contact-detail-value a:hover {
  color: var(--color-blue);
}

/* Map Bezel & Box styling */
.map-bezel-outer {
  max-width: 100%;
}

.map-placeholder-box {
  width: 100%;
  aspect-ratio: 16/10;
  position: relative;
  background-color: var(--color-mist);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Styled map SVG layout inside mock iframe */
.map-mockup-svg {
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

.map-mockup-overlay {
  position: absolute;
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  right: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(29, 53, 87, 0.08);
  border-radius: 8px;
  padding: var(--spacing-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
  z-index: 5;
}

.map-mockup-text h4 {
  font-family: var(--font-tags);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-navy);
}

.map-mockup-text p {
  font-size: 0.8rem;
  color: var(--color-gray);
  margin-bottom: 0;
}

/* Map pulse point for map pin */
.map-mockup-pin {
  cursor: pointer;
}

.map-pin-pulse {
  animation: mapPulse 2s infinite;
}

@keyframes mapPulse {
  0% {
    r: 6;
    opacity: 0.8;
  }

  50% {
    r: 18;
    opacity: 0;
  }

  100% {
    r: 6;
    opacity: 0;
  }
}

/* Responsive adjustments for Contact Page */
@media (max-width: 991px) {
  .contact-hero-section {
    padding-top: 120px;
    padding-bottom: var(--spacing-xl);
    min-height: auto;
  }

  .contact-hero-visual-col {
    order: 2;
    justify-content: flex-start;
    margin-top: var(--spacing-lg);
  }

  .contact-hero-placeholder {
    aspect-ratio: 16/10;
  }

  .contact-section .container-grid {
    gap: var(--spacing-xl);
  }

  .contact-info-col {
    order: 2;
  }

  .contact-form-col {
    order: 1;
  }
}

/* ==========================================================================
   Admin Portal Sections & Components
   ========================================================================== */

/* Password Gate Overlay */
.admin-password-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(29, 53, 87, 0.65);
  /* Deep Navy back-tint */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 1;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.admin-password-overlay.hide {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.02);
}

.password-card {
  width: 100%;
  max-width: 440px;
  background-color: var(--color-white);
  border: 1px solid rgba(168, 197, 160, 0.25);
  box-shadow: var(--shadow-lg);
  border-radius: 20px;
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  transform: scale(0.95);
  opacity: 0;
  animation: passwordEntryShow 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes passwordEntryShow {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.password-icon-wrapper {
  width: 60px;
  height: 60px;
  background-color: rgba(69, 123, 157, 0.08);
  color: var(--color-blue);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.password-icon-wrapper i {
  width: 24px;
  height: 24px;
}

.password-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--color-navy);
  margin-bottom: var(--spacing-xs);
}

.password-desc {
  font-size: 0.95rem;
  color: var(--color-gray);
  margin-bottom: var(--spacing-lg);
}

.password-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.password-input-group {
  position: relative;
}

.password-input {
  width: 100%;
  padding: 0.9rem 1.2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  background-color: var(--color-mist);
  border: 1px solid rgba(29, 53, 87, 0.1);
  color: var(--color-navy);
  border-radius: 10px;
  outline: none;
  text-align: center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.password-input:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 4px rgba(69, 123, 157, 0.1);
}

.btn-admin-login {
  width: 100%;
  background-color: var(--color-navy);
  color: var(--color-white);
  padding: 0.9rem;
  border-radius: 50px;
  font-family: var(--font-tags);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-normal), transform var(--transition-fast);
}

.btn-admin-login:hover {
  background-color: var(--color-blue);
}

.btn-admin-login:active {
  transform: scale(0.97);
}

.password-error-message {
  color: #E63946;
  font-size: 0.85rem;
  margin-top: var(--spacing-xs);
  display: none;
  animation: slideDownError 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Dashboard Panel Layout */
.admin-dashboard-section {
  padding: 160px 0 var(--spacing-xxl);
  background-color: var(--color-mist);
  min-height: 100dvh;
}

.admin-header {
  margin-bottom: var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.admin-title-wrap h1 {
  font-size: clamp(2.2rem, 4vw, 3rem);
}

.btn-logout {
  padding: 0.6rem 1.4rem;
  font-size: 0.75rem;
}

/* Form Styles for Admin (re-adapting dark inputs to light backgrounds) */
.admin-form-container {
  background-color: var(--color-white);
  border: 1px solid rgba(29, 53, 87, 0.05);
  box-shadow: var(--shadow-sm);
  border-radius: 20px;
  padding: var(--spacing-lg);
}

.admin-form-title {
  font-family: var(--font-tags);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-blue);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid rgba(29, 53, 87, 0.05);
  padding-bottom: var(--spacing-xs);
}

.admin-form .form-group {
  margin-bottom: var(--spacing-md);
}

.admin-form .form-group:last-of-type {
  margin-bottom: var(--spacing-lg);
}

.admin-form .form-label {
  color: var(--color-navy);
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
}

.admin-form .form-input,
.admin-form .form-select {
  background-color: var(--color-mist);
  border: 1px solid rgba(29, 53, 87, 0.1);
  color: var(--color-navy);
}

.admin-form .form-input::placeholder {
  color: rgba(29, 53, 87, 0.35);
}

.admin-form .form-input:hover,
.admin-form .form-select:hover {
  background-color: rgba(29, 53, 87, 0.02);
  border-color: rgba(29, 53, 87, 0.25);
}

.admin-form .form-input:focus,
.admin-form .form-select:focus {
  background-color: var(--color-white);
  border-color: var(--color-blue);
  box-shadow: 0 0 0 4px rgba(69, 123, 157, 0.1);
}

.admin-form .form-select option {
  background-color: var(--color-white);
  color: var(--color-navy);
}

/* File Drag & Drop Zone */
.upload-drag-zone {
  border: 2px dashed rgba(29, 53, 87, 0.18);
  border-radius: 12px;
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  background-color: rgba(241, 243, 240, 0.5);
  cursor: pointer;
  transition: border-color var(--transition-normal), background-color var(--transition-normal);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.upload-drag-zone:hover,
.upload-drag-zone.dragover {
  border-color: var(--color-sage);
  background-color: rgba(168, 197, 160, 0.08);
}

.upload-drag-zone i {
  width: 36px;
  height: 36px;
  color: var(--color-blue);
  transition: transform var(--transition-normal);
}

.upload-drag-zone:hover i,
.upload-drag-zone.dragover i {
  transform: translateY(-4px) scale(1.05);
  color: var(--color-navy);
}

.drag-zone-title {
  font-family: var(--font-tags);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-navy);
}

.drag-zone-text {
  font-size: 0.85rem;
  color: var(--color-gray);
}

.drag-zone-preview {
  margin-top: var(--spacing-xs);
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(29, 53, 87, 0.1);
  display: none;
}

/* Gallery Manager Grid */
.admin-manager-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.manager-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(29, 53, 87, 0.08);
  padding-bottom: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.manager-count-text {
  font-family: var(--font-tags);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray);
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-md);
  max-height: 700px;
  overflow-y: auto;
  padding-right: var(--spacing-xs);
}

/* Custom Scrollbar for Grid */
.admin-grid::-webkit-scrollbar {
  width: 6px;
}

.admin-grid::-webkit-scrollbar-track {
  background: transparent;
}

.admin-grid::-webkit-scrollbar-thumb {
  background: rgba(29, 53, 87, 0.12);
  border-radius: 10px;
}

.admin-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(29, 53, 87, 0.25);
}

.admin-card {
  background-color: var(--color-white);
  border: 1px solid rgba(29, 53, 87, 0.05);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.admin-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.admin-card-img-wrap {
  position: relative;
  aspect-ratio: 16/11;
  overflow: hidden;
  background-color: var(--color-mist);
}

.admin-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-card-action-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(29, 53, 87, 0.4);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-fast);
}

.admin-card:hover .admin-card-action-overlay {
  opacity: 1;
}

.btn-card-delete {
  background-color: #E63946;
  color: var(--color-white);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.btn-card-delete:hover {
  background-color: #c92f3b;
  transform: scale(1.1);
}

.btn-card-delete:active {
  transform: scale(0.95);
}

.btn-card-delete i {
  width: 18px;
  height: 18px;
}

.admin-card-info {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.admin-card-caption {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.admin-card-tag {
  font-family: var(--font-tags);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
  background-color: rgba(69, 123, 157, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
}

.admin-card-date {
  font-size: 0.75rem;
  color: var(--color-gray);
}

/* Skeleton Loading State for Admin Cards */
.admin-card.is-skeleton {
  pointer-events: none;
}

.admin-card.is-skeleton .admin-card-img-wrap {
  background: linear-gradient(90deg, #F1F3F0 25%, #E2E5E1 50%, #F1F3F0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite linear;
}

.admin-card.is-skeleton .skeleton-text {
  height: 12px;
  background: linear-gradient(90deg, #F1F3F0 25%, #E2E5E1 50%, #F1F3F0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite linear;
  border-radius: 4px;
  margin-bottom: 6px;
}

.admin-card.is-skeleton .skeleton-text.short {
  width: 60%;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Empty State Styling */
.admin-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-xxl) var(--spacing-lg);
  background-color: var(--color-white);
  border: 1px dashed rgba(29, 53, 87, 0.12);
  border-radius: 12px;
  color: var(--color-gray);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.admin-empty-state i {
  width: 48px;
  height: 48px;
  color: var(--color-blue);
  opacity: 0.7;
}

/* Notification Banners */
.admin-notification-toast {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  background-color: var(--color-white);
  border-left: 4px solid var(--color-blue);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-md);
  border-radius: 8px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
}

.admin-notification-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.admin-notification-toast.success {
  border-left-color: var(--color-sage);
}

.admin-notification-toast.error {
  border-left-color: #E63946;
}

.admin-notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-notification-icon.success {
  color: var(--color-sage);
}

.admin-notification-icon.error {
  color: #E63946;
}

.admin-notification-icon i {
  width: 22px;
  height: 22px;
}

.admin-notification-text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-navy);
}

@media (max-width: 991px) {
  .admin-dashboard-section {
    padding-top: 120px;
  }
}

/* ==========================================================================
   26. Real Asset Image & Video Overlays
   ========================================================================== */

.hero-image,
.gallery-hero-image,
.about-hero-image,
.contact-hero-image,
.team-image,
.service-block-img,
.faq-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 5;
  transition: transform var(--transition-slow);
}

.team-image {
  object-position: top center;
}

/* Ensure gallery preview images scale and overlay perfectly */
.gallery-preview-img {
  width: 100%;
  height: 100%;
  /* Grow via flexbox */
  flex-grow: 1;
  object-fit: cover;
  display: block;
  z-index: 2;
  transition: transform var(--transition-slow);
}

/* Interactive hover zooms on premium double-bezel cards */
.double-bezel-outer:hover .hero-image,
.double-bezel-outer:hover .gallery-hero-image,
.double-bezel-outer:hover .about-hero-image,
.double-bezel-outer:hover .contact-hero-image,
.double-bezel-outer:hover .team-image,
.double-bezel-outer:hover .service-block-img,
.double-bezel-outer:hover .gallery-preview-img {
  transform: scale(1.04);
}

/* ==========================================================================
   Home page dark-state text readability fixes (all sections)
   Applies only when the dark dynamic scroll background is active.
   ========================================================================== */

/* Hero title uses the SVG handwriting reveal (teal gradient fills are set
   by js/handwriting-reveal.js) */

/* Section titles: bold per-section colors (scroll story-beat palette)
   Services=forest green, Before/After=bronze, Gallery=plum,
   Reviews=indigo, Service Area=copper, FAQ=midnight steel */
html.gsap-enabled body.home-page .services-title {
  color: #C2EFB4;
  /* luminous spring sage on forest green */
}

html.gsap-enabled body.home-page .before-after-title {
  color: #F5CD85;
  /* bright amber on bronze */
}

html.gsap-enabled body.home-page .gallery-preview-title {
  color: #DFA9E8;
  /* orchid on plum */
}

html.gsap-enabled body.home-page .reviews-title {
  color: #C3D0FF;
  /* lifted periwinkle on indigo */
}

html.gsap-enabled body.home-page .service-area-title {
  color: #FFC49B;
  /* luminous apricot on copper */
}

html.gsap-enabled body.home-page .faq-title {
  color: #B4DCFF;
  /* bright ice blue on midnight steel */
}

/* CTA title: gold on near-black navy */
html.gsap-enabled body.home-page .cta-title {
  color: #E8C07A;
}

/* Section intros/descriptions: gray -> soft white */
html.gsap-enabled body.home-page .services-intro,
html.gsap-enabled body.home-page .before-after-desc,
html.gsap-enabled body.home-page .gallery-preview-desc,
html.gsap-enabled body.home-page .reviews-desc,
html.gsap-enabled body.home-page .service-area-desc,
html.gsap-enabled body.home-page .faq-intro {
  color: rgba(255, 255, 255, 0.78);
}

/* Eyebrow tags: dull blue -> luminous teal (matches existing brands-section fix).
   .section-wrapper scope keeps the hero eyebrow white and the CTA eyebrow sage. */
html.gsap-enabled body.home-page .section-wrapper .eyebrow-tag {
  color: #3BE3EA;
}

/* Outline buttons on dark sections ("View Our Work", "View Full Gallery") */
html.gsap-enabled body.home-page .hero-section .btn-outline,
html.gsap-enabled body.home-page .gallery-preview-action .btn-outline {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.65);
}

html.gsap-enabled body.home-page .hero-section .btn-outline:hover,
html.gsap-enabled body.home-page .gallery-preview-action .btn-outline:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
}

/* FAQ category tabs: readable inactive/hover/active states on dark bg */
html.gsap-enabled body.home-page .btn-faq-tab {
  color: #CBD5E1;
}

html.gsap-enabled body.home-page .btn-faq-tab:hover {
  color: #38BDF8;
  background-color: rgba(30, 41, 59, 0.85);
  border-color: rgba(56, 189, 248, 0.5);
}

html.gsap-enabled body.home-page .btn-faq-tab.active {
  color: #38BDF8 !important;
  background-color: #0F172A !important;
  border-color: #38BDF8 !important;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.4), inset 0 0 12px rgba(56, 189, 248, 0.15) !important;
}


/* Readability halo: keep headings/labels legible where they overlap the house video */
html.gsap-enabled body.home-page .hero-title,
html.gsap-enabled body.home-page .services-title,
html.gsap-enabled body.home-page .before-after-title,
html.gsap-enabled body.home-page .gallery-preview-title,
html.gsap-enabled body.home-page .reviews-title,
html.gsap-enabled body.home-page .brands-title,
html.gsap-enabled body.home-page .service-area-title,
html.gsap-enabled body.home-page .faq-title,
html.gsap-enabled body.home-page .cta-title {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.45);
}

html.gsap-enabled body.home-page .section-wrapper .eyebrow-tag,
html.gsap-enabled body.home-page .hero-section .eyebrow-tag,
html.gsap-enabled body.home-page .hero-subtext,
html.gsap-enabled body.home-page .services-intro,
html.gsap-enabled body.home-page .before-after-desc,
html.gsap-enabled body.home-page .gallery-preview-desc,
html.gsap-enabled body.home-page .reviews-desc,
html.gsap-enabled body.home-page .brands-desc,
html.gsap-enabled body.home-page .service-area-desc,
html.gsap-enabled body.home-page .faq-intro,
html.gsap-enabled body.home-page .cta-desc {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.35);
}



/* ==========================================================================
   Services Page — Dark Hero + Scroll-to-Stack Cards
   ========================================================================== */

/* Dark hero so the shared white/transparent navbar (same as home) stays readable */
body.services-page .services-hero-section {
  background: linear-gradient(135deg, var(--color-navy) 0%, #204e5a 45%, var(--color-blue) 100%);
}

body.services-page .services-hero-title {
  color: var(--color-white);
}

body.services-page .services-hero-subtext {
  color: rgba(255, 255, 255, 0.85);
}

body.services-page .services-hero-section .eyebrow-tag {
  color: var(--color-white);
}

/* Outline button on the dark hero */
body.services-page .services-hero-section .btn-outline {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.65);
}

body.services-page .services-hero-section .btn-outline:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Stacking card deck: each service section is a full-width card that sticks
   at the top while the next card scrolls over it. Pure CSS sticky layout;
   GSAP adds the recede (scale/dim) effect on desktop.
   -------------------------------------------------------------------------- */

.stack-card {
  position: relative;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -18px 50px rgba(9, 24, 43, 0.35);
  /* Solid brand-family backgrounds — no white cards */
  color: var(--color-white);
}

/* Dim overlay driven by GSAP via the --dim custom property (0 by default) */
.stack-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: #05101F;
  opacity: var(--dim, 0);
  pointer-events: none;
  z-index: 6;
}

.stack-card>.container,
.stack-card>.blueprint-background {
  position: relative;
  z-index: 2;
}

/* Per-card backgrounds (deep, brand-family hues so the white navbar and
   light text stay readable on every card while stacked) */
.stack-card.card-navy {
  background: linear-gradient(165deg, #1D3557 0%, #14263F 100%);
}

.stack-card.card-blue {
  background: linear-gradient(165deg, #457B9D 0%, #35617E 100%);
}

.stack-card.card-teal {
  background: linear-gradient(165deg, #2A9D8F 0%, #1F7A6F 100%);
}

.stack-card.card-slate {
  background: linear-gradient(165deg, #3E5C76 0%, #2E4759 100%);
}

.stack-card.card-marine {
  background: linear-gradient(165deg, #1B4965 0%, #12344B 100%);
}

.stack-card.card-cyan {
  background: linear-gradient(165deg, #0E7C86 0%, #0A5B63 100%);
}

.stack-card.card-midnight {
  background: linear-gradient(165deg, #12263F 0%, #0C1A2E 100%);
}

/* Contractors banner keeps its navy base; add subtle depth to match the deck */
.stack-card.contractors-callout-section {
  background: linear-gradient(165deg, #1D3557 0%, #0F1E33 100%);
}

/* Light text system on every (dark) card */
.stack-card .eyebrow-tag {
  color: var(--color-sage);
}

.stack-card .service-block-title {
  color: var(--color-white);
}

.stack-card .service-block-desc {
  color: rgba(255, 255, 255, 0.85);
}

/* White quote buttons pop on dark cards (mirrors .btn-cta-light) */
.stack-card .btn-primary {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-navy);
}

.stack-card .btn-primary:hover {
  background-color: var(--color-sand);
  border-color: var(--color-sand);
  color: var(--color-navy);
}

/* Footer must paint above the stuck deck while it scrolls in */
body.services-page .site-footer {
  position: relative;
  z-index: 20;
}

/* Dark backdrop behind the whole deck: the transparent rounded top corners of
   each card reveal this (or the previous dark card) instead of the light body
   background — no pale wedges at the hero seam or while scrolling */
body.services-page #services-list {
  background-color: #1D3557;
}

/* Sticky stacking + per-card rest offsets (desktop layout) */
@media (min-width: 992px) {
  #services-list>.stack-card {
    position: sticky;
    top: var(--stack-top, 0px);
    /* Subtract the stick offset so the card's bottom edge lands cleanly at the
       viewport bottom when stuck */
    min-height: calc(100vh - var(--stack-top, 0px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: max(54px, calc(var(--stack-top, 0px) + 0.5rem));
    padding-bottom: clamp(1rem, 2.5vh, 2rem);
    will-change: transform;
    box-sizing: border-box;
  }

  #services-list>.stack-card .service-block-grid {
    align-items: center;
    gap: clamp(1rem, 2vw, 2.5rem);
  }

  #services-list>.stack-card .service-block-title {
    font-size: clamp(1.4rem, 2.2vw, 2.2rem);
    margin-bottom: clamp(0.25rem, 0.8vh, 0.6rem);
  }

  #services-list>.stack-card .service-block-desc {
    font-size: clamp(0.85rem, 0.95vw, 1rem);
    line-height: 1.5;
    margin-bottom: clamp(0.4rem, 1.2vh, 0.85rem);
  }

  #services-list>.stack-card .service-details-card {
    padding: clamp(10px, 1.3vw, 18px);
    margin-bottom: clamp(0.3rem, 1vh, 0.6rem);
  }

  #services-list>.stack-card .details-group {
    margin-bottom: clamp(0.25rem, 0.6vh, 0.4rem);
  }

  #services-list>.stack-card .details-title {
    font-size: clamp(0.82rem, 0.9vw, 0.92rem);
    margin-bottom: clamp(0.25rem, 0.5vh, 0.4rem);
  }

  #services-list>.stack-card .details-list li,
  #services-list>.stack-card .details-text {
    font-size: clamp(0.78rem, 0.88vw, 0.88rem);
    line-height: 1.4;
  }

  #services-list>.stack-card .details-list li {
    margin-bottom: 2px;
  }

  #services-list>.stack-card .seasonal-callout,
  #services-list>.stack-card .worksafe-callout,
  #services-list>.stack-card .eco-friendly-badge,
  #services-list>.stack-card .supply-callout {
    padding: 6px 12px;
    margin-top: clamp(0.25rem, 0.6vh, 0.4rem);
    font-size: clamp(0.78rem, 0.85vw, 0.85rem);
  }

  #services-list>.stack-card .service-actions {
    margin-top: clamp(0.4rem, 1vh, 0.75rem);
  }

  #services-list>.stack-card .service-visual-col img {
    height: 100%;
    min-height: 220px;
    max-height: clamp(260px, 42vh, 460px);
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
  }

  #services-list>.stack-card:nth-child(1) {
    --stack-top: 0px;
    z-index: 1;
  }

  #services-list>.stack-card:nth-child(2) {
    --stack-top: 14px;
    z-index: 2;
  }

  #services-list>.stack-card:nth-child(3) {
    --stack-top: 28px;
    z-index: 3;
  }

  #services-list>.stack-card:nth-child(4) {
    --stack-top: 42px;
    z-index: 4;
  }

  #services-list>.stack-card:nth-child(5) {
    --stack-top: 56px;
    z-index: 5;
  }

  #services-list>.stack-card:nth-child(6) {
    --stack-top: 70px;
    z-index: 6;
  }

  #services-list>.stack-card:nth-child(7) {
    --stack-top: 84px;
    z-index: 7;
  }

  #services-list>.stack-card:nth-child(8) {
    --stack-top: 98px;
    z-index: 8;
  }
}

@media (max-width: 991px) {
  .stack-card {
    border-radius: 0;
  }

  #services-list>.stack-card {
    position: relative !important;
    top: auto !important;
    min-height: auto !important;
    display: block !important;
    will-change: auto;
    padding-top: clamp(2.5rem, 5vh, 4rem) !important;
    padding-bottom: clamp(2.5rem, 5vh, 4rem) !important;
  }

  /* Tighten inner spacing so cards flow cleanly */
  #services-list>.stack-card .service-block-grid {
    gap: 1.25rem;
  }

  #services-list>.stack-card .service-text-col {
    order: 1;
  }

  #services-list>.stack-card .service-visual-col {
    order: 2;
    margin-top: 0.5rem;
  }

  #services-list>.stack-card .service-block-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    margin-bottom: 0.5rem;
  }

  #services-list>.stack-card .service-block-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.85rem;
  }

  #services-list>.stack-card .service-details-card {
    padding: 14px;
    margin-bottom: 0.75rem;
  }

  #services-list>.stack-card .details-group {
    margin-bottom: 0.4rem;
  }

  #services-list>.stack-card .details-list li,
  #services-list>.stack-card .details-text {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  #services-list>.stack-card .details-list li {
    margin-bottom: 3px;
  }

  #services-list>.stack-card .seasonal-callout,
  #services-list>.stack-card .worksafe-callout,
  #services-list>.stack-card .eco-friendly-badge,
  #services-list>.stack-card .supply-callout {
    padding: 6px 12px;
    margin-top: 0.4rem;
    font-size: 0.85rem;
  }

  #services-list>.stack-card .service-actions {
    margin-top: 0.5rem;
  }

  #services-list>.stack-card .eyebrow-tag {
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    margin-bottom: 0.4rem;
  }

  /* Contractors card — extra compact on mobile since it has more content */
  #services-list>.stack-card.contractors-callout-section {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  #services-list>.stack-card.contractors-callout-section .contractors-title {
    font-size: clamp(1.3rem, 5.5vw, 1.8rem);
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    line-height: 1.25;
  }

  #services-list>.stack-card.contractors-callout-section .contractors-desc {
    font-size: 0.82rem;
    line-height: 1.45;
    margin-bottom: 0.5rem;
  }

  #services-list>.stack-card.contractors-callout-section .contractors-badges {
    gap: 0.4rem;
    margin-bottom: 0.5rem;
  }

  #services-list>.stack-card.contractors-callout-section .c-badge {
    font-size: 0.65rem;
    padding: 5px 10px;
  }

  #services-list>.stack-card.contractors-callout-section .contractors-action-col {
    margin-top: 0;
    gap: 0.5rem;
  }

  #services-list>.stack-card.contractors-callout-section .contractors-media-spot {
    max-width: 100%;
  }

  #services-list>.stack-card.contractors-callout-section .contractors-media-wrapper {
    aspect-ratio: 16 / 8;
  }

  #services-list>.stack-card.contractors-callout-section .contractors-cta-box {
    padding: 0.75rem;
  }

  #services-list>.stack-card.contractors-callout-section .contractors-cta-box h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }

  #services-list>.stack-card.contractors-callout-section .contractors-cta-box p {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
  }
}


/* ==========================================================================
   27. Typography Animation & Polish
   Word-mask reveals, eyebrow tracking settle, button/nav micro-interactions.
   Driven by js/typography-animations.js — hero handwriting engine untouched.
   ========================================================================== */

/* Word-mask spans injected by js/typography-animations.js */
.tl-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Slight bottom pad so descenders (g, y, p) are not clipped by the mask */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.tl-word {
  display: inline-block;
  will-change: transform;
}

/* Button micro-interactions: tracking expand + icon nudge on hover */
.btn:hover {
  letter-spacing: 0.16em;
}

.btn i,
.btn svg {
  transition: transform var(--transition-fast);
}

.btn:hover i,
.btn:hover svg {
  transform: translateX(3px);
}

/* Primary CTA sheen sweep (transform-only, runs once per hover) */
.btn-cta {
  position: relative;
  overflow: hidden;
}

.btn-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-12deg);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.btn-cta:hover::before {
  transform: translateX(220%) skewX(-12deg);
}

/* Small-size legibility floors */
@media (max-width: 480px) {
  .eyebrow-tag {
    font-size: 0.78rem;
  }
}

.footer-tagline {
  font-size: 0.8rem;
}

/* Reduced motion: disable hover micro-interactions along with everything else */
@media (prefers-reduced-motion: reduce) {

  .btn,
  .btn i,
  .btn svg,
  .btn-cta::before,
  .nav-link::after,
  .navbar-header,
  .navbar-header::before,
  .nav-logo {
    transition: none !important;
  }
}

/* ==========================================================================
   Gallery Category Filter Tabs
   ========================================================================== */
.gallery-section-header {
  text-align: center;
  margin-bottom: var(--spacing-xl, 2.5rem);
}

.gallery-section-title {
  font-family: var(--font-display, inherit);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-navy, #1D3557);
  margin-bottom: 0.5rem;
}

.gallery-section-subtitle {
  font-family: var(--font-body, inherit);
  font-size: 1.1rem;
  color: var(--color-gray, #6C757D);
  max-width: 600px;
  margin: 0 auto 1.5rem auto;
  line-height: 1.6;
}

.gallery-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.btn-filter-tab {
  font-family: var(--font-tags, sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.55rem 1.25rem;
  border-radius: 50px;
  border: 1.5px solid rgba(29, 53, 87, 0.15);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-navy, #1D3557);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-filter-tab:hover {
  background-color: var(--color-navy, #1D3557);
  border-color: var(--color-navy, #1D3557);
  color: var(--color-white, #FFFFFF);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(29, 53, 87, 0.18);
}

.btn-filter-tab.active {
  background-color: var(--color-navy, #1D3557);
  border-color: var(--color-navy, #1D3557);
  color: var(--color-white, #FFFFFF);
  box-shadow: 0 4px 14px rgba(29, 53, 87, 0.25);
}