/* ==========================================================================
   COPASYSYEM - PRECISION AV INTEGRATION
   Light Theme & Ambient Background Pattern Design System
   (Modeled exactly on home.png)
   ========================================================================== */


:root {
  /* Brand Colors */
  --primary: #0066FF;
  --primary-dark: #004ecc;
  --primary-light: #3385ff;
  --primary-glow: rgba(0, 102, 255, 0.25);

  --accent-cyan: #00C2FF;
  --accent-cyan-light: #54e7e7;
  --accent-glow: rgba(0, 194, 255, 0.3);

  /* Light Theme Surfaces & Backgrounds */
  --bg-white: #FFFFFF;
  --bg-light-blue: #E8F2FC;
  --bg-soft-blue: #F0F6FD;
  --bg-card: #FFFFFF;
  --border-light: rgba(0, 102, 255, 0.12);
  --border-subtle: #E2E8F0;

  /* Dark Accents (Hero, Brands Strip, CTA & Footer Only) */
  --dark-hero-bg: #070F22;
  --dark-banner-bg: #071020;
  --dark-footer-bg: #070F22;

  /* Typography Colors */
  --text-title: #0A152E;      /* Bold Navy Heading */
  --text-body: #475569;       /* Slate Neutral Body */
  --text-muted: #5D6B80;      /* Secondary Muted */
  --text-light: #FFFFFF;      /* For dark areas */
  --text-light-muted: #94A3B8;

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Transitions & Shadows */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-card: 0 6px 20px rgba(0, 40, 120, 0.06);
  --shadow-hover: 0 16px 36px rgba(0, 60, 180, 0.12);
  --shadow-quote: 0 20px 45px rgba(0, 40, 120, 0.12);

  /* Layout */
  --container-max: 1240px;
  --header-height: 80px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 9999px;
}

/* ==========================================================================
   CSS Reset & Base Rules
   ========================================================================== */

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
  color: var(--text-body);
  background-color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ==========================================================================
   Scrollbar — themed from the palette (brand-blue thumb, sky-blue track).
   ::-webkit rules cover Chromium/Edge/Safari; the @supports guard applies
   the standard properties only where -moz-appearance exists (Firefox), so
   Chromium never lets scrollbar-color override the thumb treatment.
   ========================================================================== */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

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

::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: var(--radius-full);
  border: 3px solid var(--bg-light-blue);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-dark);
}

::-webkit-scrollbar-button:single-button {
  display: none;
}

@supports (-moz-appearance: none) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--bg-light-blue);
  }
}

body {
  overflow-x: hidden;
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
}

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

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  outline: none;
}

button {
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

/* ==========================================================================
   Container & Section Spacing
   ========================================================================== */

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

.section {
  padding-top: 60px;
  padding-bottom: 60px;
  position: relative;
}

.section-title-wrap {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px auto;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary);
  margin-bottom: 12px;
}

.section-badge i {
  font-size: 0.8rem;
}

.section-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--text-title);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ==========================================================================
   Page Hero Banner (inner pages: About, Services, Gallery, Contact)
   ========================================================================== */

.page-hero {
  background: var(--dark-hero-bg);
  background-image:
    radial-gradient(ellipse at 20% 60%, rgba(0, 102, 255, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(0, 194, 255, 0.15) 0%, transparent 50%);
  padding-top: calc(var(--header-height) + 60px);
  padding-bottom: 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(0, 102, 255, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.page-hero .section-badge {
  color: var(--accent-cyan);
  justify-content: center;
}

.page-hero-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.page-hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-light-muted);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto;
}


/* ==========================================================================
   Ambient Background Patterns (Per home.png)
   ========================================================================== */

/* 1. Crisp White Section with Soft Radial Blob */
.section-white-ambient {
  background: radial-gradient(circle at 8% 40%, rgba(210, 233, 255, 0.6) 0%, rgba(255, 255, 255, 0) 50%),
              #FFFFFF;
  position: relative;
}

/* 2. Soft Sky Blue Curved Wash for Services & Recent Installations */
.section-sky-pattern {
  background: radial-gradient(ellipse at 50% 0%, #DCEBFA 0%, #EAF3FD 50%, #F6FAFE 100%);
  position: relative;
}

.section-sky-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 90% 80%, rgba(195, 225, 255, 0.45) 0%, transparent 60%);
  pointer-events: none;
}

/* 3. Subtle Architecture / Timeline Background */
.section-timeline-pattern {
  background: linear-gradient(180deg, #E2EEFB 0%, #EEF6FD 50%, #E5F0FC 100%);
  position: relative;
}

/* 4. Why Choose Us with Left Organic Curved Shape */
.section-why-pattern {
  background: radial-gradient(circle at 10% 85%, rgba(190, 222, 255, 0.7) 0%, rgba(255, 255, 255, 0) 50%),
              #FFFFFF;
  position: relative;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  font-size: 0.94rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  transition: var(--transition-normal);
  text-align: center;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 4px 16px var(--primary-glow);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  box-shadow: 0 6px 22px rgba(0, 102, 255, 0.4);
  transform: translateY(-2px);
}

.btn-white {
  background-color: #FFFFFF;
  color: var(--text-title);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.btn-white:hover {
  background-color: #F1F5FB;
  transform: translateY(-2px);
}

.btn-outline-white {
  background-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
}

.btn-outline-white:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-outline-navy {
  background-color: #FFFFFF;
  color: var(--text-title);
  border: 1.5px solid var(--border-subtle);
  box-shadow: 0 2px 10px rgba(0, 40, 120, 0.06);
}

.btn-outline-navy:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--primary-glow);
}

.btn-sm {
  padding: 10px 22px;
  font-size: 0.88rem;
}

/* ==========================================================================
   Header & Navigation (Clean WHITE Navbar per home.png)
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: var(--transition-normal);
}

.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Brand Logo */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform var(--transition-normal);
}

.brand-logo:hover .site-logo-img {
  transform: scale(1.03);
}

.footer-logo-img {
  height: 52px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform var(--transition-normal);
  filter: drop-shadow(0 2px 8px rgba(0, 102, 255, 0.25));
}

.footer-logo-img:hover {
  transform: scale(1.03);
}

.hero-logo-img {
  height: 70px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.logo-spheres {
  display: flex;
  align-items: center;
  gap: 4px;
}

.logo-sphere {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #FFFFFF;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 2px 6px rgba(0,0,0,0.3);
}

.logo-sphere.red {
  background: radial-gradient(circle at 35% 35%, #ff4b4b, #b71c1c);
}

.logo-sphere.blue {
  background: radial-gradient(circle at 35% 35%, #3b82f6, #1d4ed8);
}

.logo-sphere.green {
  background: radial-gradient(circle at 35% 35%, #4ade80, #15803d);
}

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

.brand-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-title);
  line-height: 1.1;
}

.brand-sub {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--primary);
  text-transform: uppercase;
}

/* Nav Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: #334155;
  position: relative;
  padding: 6px 0;
  transition: var(--transition-fast);
}

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

.nav-link.active {
  color: var(--primary);
  font-weight: 700;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hamburger-btn {
  display: none;
  color: var(--text-title);
  font-size: 1.4rem;
  padding: 8px;
}

/* ==========================================================================
   Hero Section (Full-bleed operating-room photo, content overlaid left)
   .hero-media paints the photo edge-to-edge behind the content; its ::after
   paints the white diagonal wash that keeps headline text readable over
   the photo's busiest areas.
   ========================================================================== */

.hero-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--header-height) + 52px);
  padding-bottom: 120px;
  background-color: #F8FAFC;
  background-image: radial-gradient(circle at 85% 40%, rgba(0, 102, 255, 0.07) 0%, rgba(0, 102, 255, 0) 65%),
                    linear-gradient(135deg, #FFFFFF 0%, #F5F9FF 55%, #EDF4FD 100%);
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 102, 255, 0.08) 0%, rgba(0, 102, 255, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Parallax push: incoming and outgoing each travel exactly one viewport width
   so the two frames stay edge-to-adjacent and never open a seam. The parallax
   comes from opposing scale instead - the incoming slide shrinks from 1.08 as
   it travels in while the outgoing grows to 1.06 on its way out, so the two
   pictures move through the frame at visibly different rates. Only transforms
   animate, so the copy above stays pinned and fully opaque. */
.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% center;
  opacity: 0;
  transform: translate3d(100%, 0, 0) scale(1.12);
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  will-change: transform, opacity;
}

.hero-slide.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  z-index: 2;
}

/* The outgoing frame stays fully opaque and simply travels out beneath the
   incoming one, so the transition reads as one photo pushing the other rather
   than two half-transparent photos dissolving into each other. It is off
   canvas by the time .is-leaving is dropped, so the reset is never seen. */
.hero-slide.is-leaving {
  opacity: 1;
  transform: translate3d(-100%, 0, 0) scale(1.08);
  z-index: 1;
}

/* Entrance is a fade only. Any scale here would, with fill-mode both, pin the
   transform and permanently override the scale the .is-active class sets. */
.hero-slide:first-child {
  animation: heroMediaIn 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

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

/* z-index sits above .hero-slide (2 / 1) on purpose: the wash must composite
   over the photo, otherwise the copy has nothing protecting it and every
   banner renders unreadable. Do not drop this when editing the slide stack. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.45) 0%, rgba(248, 250, 252, 0) 14%),
    linear-gradient(0deg,   rgba(248, 250, 252, 0.70) 0%, rgba(248, 250, 252, 0) 16%),
    linear-gradient(102deg,
      rgba(248, 250, 252, 0.97) 0%,
      rgba(248, 250, 252, 0.95) 28%,
      rgba(248, 250, 252, 0.82) 38%,
      rgba(248, 250, 252, 0.55) 48%,
      rgba(248, 250, 252, 0.22) 58%,
      rgba(248, 250, 252, 0.05) 66%,
      rgba(248, 250, 252, 0)    72%);
}

@keyframes heroMediaIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 580px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-title);
  margin-bottom: 20px;
}

.hero-eyebrow i {
  color: var(--primary);
  font-size: 0.95rem;
}

.hero-title {
  font-size: clamp(2.7rem, 4.6vw, 4.25rem);
  font-weight: 800;
  color: var(--text-title);
  line-height: 1.06;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.hero-title-accent {
  color: var(--primary);
}

.hero-kicker {
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--text-title);
  margin-bottom: 28px;
}

.hero-description {
  font-size: 1.05rem;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 540px;
}

.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  list-style: none;
  margin-bottom: 34px;
}

.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-title);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.hero-trust-item i {
  color: var(--primary);
  font-size: 0.95rem;
}

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

.hero-actions .btn {
  padding: 17px 34px;
  font-size: 0.98rem;
}

.hero-dots {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin-top: 54px;
}

.hero-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(0, 102, 255, 0.28);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.hero-dot:hover {
  background: rgba(0, 102, 255, 0.55);
}

.hero-dot.is-active {
  background: var(--primary);
  transform: scale(1.25);
}

.hero-dot:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}



/* ==========================================================================
   Floating Quick Quote Bar (Pure White Card per home.png)
   ========================================================================== */

.quote-bar-wrapper {
  margin-top: -120px;
  position: relative;
  z-index: 50;
  margin-bottom: 48px;
}

.quote-bar-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-quote);
  padding: 32px 38px;
  border: 1px solid var(--border-light);
}

.quote-bar-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--text-title);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.quote-bar-title i {
  color: var(--primary);
}

.quote-form-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1.2fr 1fr;
  gap: 16px;
  align-items: center;
}

.form-field {
  position: relative;
}

.form-input,
.form-select {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  background: #EDF3FA;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  color: var(--text-title);
  transition: var(--transition-fast);
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 46px 0 18px;
  background: #EDF3FA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M2 2L7 7L12 2' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center;
}

.form-input::placeholder {
  color: #8C9CAE;
}

.form-input:focus,
.form-select:focus {
  background-color: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
}

#quote,
#video-conferencing,
#control-room,
#security-systems,
#sound-systems {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.trust-badges-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 28px;
  width: 100%;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #EEF3FA;
}

.trust-badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-title);
}

.trust-badge-item i {
  color: var(--primary);
  font-size: 1.05rem;
}

/* Founder certification cards: fill the row on desktop, full-width stack on phones */
.founder-certs > div {
  flex: 1 1 240px;
}

@media (max-width: 768px) {
  .founder-certs {
    flex-direction: column;
  }

  .founder-certs > div {
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   About Us Section (White + Left Ambient Radial Glow)
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 769px) {
  .about-grid-reverse .about-media-col {
    order: 2;
  }
  .about-grid-reverse .about-content-col {
    order: 1;
  }
}

.about-media-col {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.about-content-col {
  position: relative;
  width: 100%;
}

.media-image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  background: #0E1626;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: transform 0.5s ease;
}

.media-image-frame:hover img {
  transform: scale(1.04);
}

.founder-portrait-frame {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  background: #F8FAFD;
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-portrait-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: inherit;
  transition: transform 0.4s ease;
}

.founder-portrait-frame:hover img {
  transform: scale(1.02);
}

.floating-team-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: #0066FF;
  border-radius: var(--radius-full);
  padding: 9px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 102, 255, 0.4);
}

.about-content-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* About Company copy block (About page, before Founder section) */
.about-copy-block {
  max-width: 940px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px 36px;
}

.about-copy-block p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-body);
}

/* ==========================================================================
   Services Section (Light Sky Blue Ambient Pattern per home.png)
   Interactive Multi-Card Carousel Slider with Responsive Proportions
   ========================================================================== */

.services-slider-wrapper {
  position: relative;
  margin-top: 16px;
  margin-bottom: 24px;
}

.services-slider-viewport {
  overflow: hidden;
  width: 100%;
  padding: 12px 4px 20px 4px;
}

.services-slider-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.services-slider-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  display: flex;
  flex-direction: column;
  position: relative;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.services-slider-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary);
}

.services-slider-card .service-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0E1626;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.services-slider-card .service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.services-slider-card:hover .service-card-media img {
  transform: scale(1.06);
}

.services-slider-card .service-icon-badge {
  position: absolute;
  bottom: 14px;
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF;
  border: 3.5px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 40, 120, 0.22);
  z-index: 10;
  transition: var(--transition-normal);
}

.services-slider-card:hover .service-icon-badge {
  transform: scale(1.12);
  background: var(--primary-dark);
}

.services-slider-card .service-card-body {
  padding: 30px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #FFFFFF;
}

.services-slider-card .service-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-title);
  text-transform: uppercase;
  margin-bottom: 8px;
  line-height: 1.3;
}

.services-slider-card .service-card-desc {
  font-size: 0.88rem;
  color: var(--text-body);
  line-height: 1.55;
  margin-bottom: 14px;
  flex-grow: 1;
}

.services-slider-card .service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: auto;
  transition: gap var(--transition-fast);
}

.services-slider-card:hover .service-card-link {
  gap: 12px;
  color: var(--primary-dark);
}

/* Slider Controls: Arrows & Dots */
.services-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 14px;
  margin-bottom: 34px;
}

.slider-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  color: var(--text-title);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0, 40, 120, 0.08);
  transition: var(--transition-fast);
  cursor: pointer;
}

.slider-nav-btn:hover:not(:disabled) {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--primary-glow);
}

.slider-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.services-slider-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #CBD5E1;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast);
}

.slider-dot.active {
  width: 28px;
  border-radius: 6px;
  background: var(--primary);
  box-shadow: 0 2px 8px var(--primary-glow);
}

@media (max-width: 991px) {
  .services-slider-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

@media (max-width: 640px) {
  .services-slider-card {
    flex: 0 0 100%;
  }
}

/* ==========================================================================
   Industries We Serve (White Background per home.png)
   ========================================================================== */

.industries-pills-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 0;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.industry-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background: #FFFFFF;
  border: 1.5px solid #C8DCF0;
  border-radius: var(--radius-full);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-title);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: var(--transition-normal);
}

.industry-pill i {
  color: var(--primary);
  font-size: 1rem;
}

.industry-pill:hover {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--primary-glow);
}

.industry-pill:hover i {
  color: #FFFFFF;
}

/* Compact pills: keep the wrap to two rows on tablet/desktop and shorten
   the stack on phones (must follow the base rules above to win the cascade) */
@media (max-width: 1080px) {
  .industries-pills-wrap {
    gap: 12px;
  }

  .industry-pill {
    padding: 10px 18px;
    font-size: 0.84rem;
  }
}

@media (max-width: 768px) {
  .industries-pills-wrap {
    gap: 10px;
  }

  .industry-pill {
    padding: 9px 15px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .industries-pills-wrap {
    gap: 8px;
  }

  .industry-pill {
    padding: 8px 13px;
    font-size: 0.76rem;
  }

  /* Reorder for tighter greedy packing: keeps the stack at ~4 rows */
  .industry-pill:nth-child(1) { order: 5; }
  .industry-pill:nth-child(2) { order: 1; }
  .industry-pill:nth-child(3) { order: 3; }
  .industry-pill:nth-child(4) { order: 4; }
  .industry-pill:nth-child(5) { order: 7; }
  .industry-pill:nth-child(6) { order: 6; }
  .industry-pill:nth-child(7) { order: 2; }
}

/* ==========================================================================
   Recent Installations (Light Sky Blue Wash per home.png)
   ========================================================================== */

.installations-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 44px;
}

.installation-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-normal);
}

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

.installation-media {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 10;
  background: #0E1626;
  overflow: hidden;
  display: block;
  line-height: 0;
  padding: 0;
}

.installation-media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.installation-card:hover .installation-media img {
  transform: scale(1.04);
}

.installation-tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.installation-body {
  padding: 22px;
}

.installation-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-title);
  margin-bottom: 6px;
}

.installation-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ==========================================================================
   Why Choose Us Section (White + Left Bottom Ambient Radial Glow per home.png)
   ========================================================================== */

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}

.why-left-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.why-feature-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.why-feature-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 10px rgba(0, 40, 120, 0.04);
  transition: var(--transition-normal);
  flex: 1 1 auto;
}

.why-feature-item:hover {
  border-color: var(--primary);
  transform: translateX(4px);
  box-shadow: var(--shadow-card);
}

.why-feature-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px var(--primary-glow);
}

.why-feature-text h3 {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text-title);
  margin-bottom: 2px;
}

.why-feature-text p {
  font-size: 0.88rem;
  color: var(--text-body);
}

/* ==========================================================================
   How We Work (Timeline with Connected Line per home.png)
   ========================================================================== */

.process-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
  margin-top: 55px;
}

/* Background Track (Spans center of Step 1 to center of Step 5: 10% to 90%) */
.process-timeline-track {
  position: absolute;
  top: 24px;
  left: 10%;
  width: 80%;
  height: 4px;
  background: #E2EAF5;
  border-radius: var(--radius-full);
  z-index: 1;
  overflow: hidden;
}

/* Animated Progress Fill */
.process-timeline-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0066FF 0%, #00C2FF 100%);
  border-radius: inherit;
  box-shadow: 0 0 14px rgba(0, 194, 255, 0.7);
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.process-step {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform var(--transition-normal);
}

.process-step-node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #CBDCEE;
  color: #94A3B8;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 40, 120, 0.08);
  margin-bottom: 16px;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.process-step.active .process-step-node {
  background: #0066FF;
  border-color: #0066FF;
  color: #FFFFFF;
  box-shadow: 0 0 20px rgba(0, 102, 255, 0.55), 0 4px 16px var(--primary-glow);
  transform: scale(1.15);
}

.process-step.active[data-step="5"] .process-step-node {
  background: linear-gradient(135deg, #0066FF, #00C2FF);
  border-color: #00C2FF;
  box-shadow: 0 0 24px rgba(0, 194, 255, 0.75);
}

.process-step:hover .process-step-node {
  transform: scale(1.2);
  border-color: var(--primary);
  color: var(--primary);
}

.process-step.active:hover .process-step-node {
  color: #FFFFFF;
}

.process-step-num {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.process-step.active .process-step-num {
  color: var(--primary);
}

.process-step-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-title);
  text-transform: uppercase;
  margin-bottom: 6px;
  transition: color 0.3s ease;
}

.process-step-desc {
  font-size: 0.84rem;
  color: var(--text-body);
  line-height: 1.45;
}

/* ==========================================================================
   Brand Integration Banner (Dark Strip per home.png)
   ========================================================================== */

.brands-strip {
  background: var(--dark-banner-bg);
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brands-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 26px;
}

.brands-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brands-label::after {
  content: '||';
  color: var(--accent-cyan);
  font-weight: 400;
}

.brands-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
}

.brand-item {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  transition: var(--transition-fast);
}

.brand-item:hover {
  color: #FFFFFF;
}

/* ==========================================================================
   Testimonials Section (White Background per home.png)
   ========================================================================== */

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

.testimonial-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid #E2E8F0;
  padding: 32px 26px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-normal);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary);
}

.star-rating {
  color: #F59E0B;
  display: flex;
  gap: 4px;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.testimonial-quote {
  font-size: 0.98rem;
  font-style: italic;
  color: var(--text-title);
  line-height: 1.6;
  margin-bottom: 22px;
}

.testimonial-author h3 {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-title);
}

.testimonial-author p {
  font-size: 0.84rem;
  color: var(--text-muted);
}

/* ==========================================================================
   CTA Banner (Deep Blue Geometric Card per home.png)
   ========================================================================== */

.cta-banner-wrap {
  position: relative;
  background: linear-gradient(135deg, #091734 0%, #004ecc 100%);
  border-radius: var(--radius-xl);
  padding: 55px 50px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 50, 160, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  color: #FFFFFF;
}

.cta-banner-content h2 {
  font-size: 2.1rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.cta-banner-content p {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.85);
}

.cta-banner-actions {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}

/* ==========================================================================
   Footer (Dark Navy / Black per home.png)
   ========================================================================== */

.site-footer {
  background: radial-gradient(ellipse at 85% 25%, rgba(0, 102, 255, 0.4) 0%, rgba(7, 15, 34, 1) 75%),
              var(--dark-footer-bg);
  color: var(--text-light-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 65px;
  padding-bottom: 28px;
}

.footer-grid-4 {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 45px;
  margin-bottom: 50px;
}

.footer-brand p {
  margin-top: 15px;
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 320px;
}

.footer-col-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 20px;
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-nav-link {
  font-size: 0.9rem;
  color: var(--text-light-muted);
  transition: var(--transition-fast);
}

.footer-nav-link:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.footer-contact-item i {
  color: var(--primary);
  width: 18px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.86rem;
}

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

/* ==========================================================================
   Dedicated Subpage Styles
   ========================================================================== */

.page-hero {
  position: relative;
  background: radial-gradient(ellipse at 80% 20%, rgba(0, 102, 255, 0.35) 0%, rgba(7, 15, 34, 1) 75%), #070F22;
  padding-top: calc(var(--header-height) + 45px);
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.page-hero-title {
  font-size: 2.7rem;
  font-weight: 800;
  color: #FFFFFF;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.page-hero-subtitle {
  font-size: 1.12rem;
  color: #CBD5E1;
  max-width: 640px;
  margin: 0 auto;
}

/* Gallery Filter & Grid */
.gallery-filter-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 38px;
}

.gallery-filter-btn {
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 700;
  background: #FFFFFF;
  border: 1.5px solid #C8DCF0;
  color: var(--text-title);
  transition: var(--transition-normal);
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 4px 14px var(--primary-glow);
}

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

.gallery-item-card {
  position: relative;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
    opacity var(--transition-normal);
  display: flex;
  flex-direction: column;
  height: auto;
  cursor: pointer;
  outline: none;
}

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

.gallery-item-card:focus-visible {
  box-shadow: var(--shadow-hover), 0 0 0 3px var(--primary-glow);
}

.gallery-item-card .installation-media {
  height: auto;
  flex: none;
  min-height: 0;
  aspect-ratio: 16 / 10;
  padding: 0;
  display: block;
  line-height: 0;
  background: #0E1626;
}

.gallery-item-card .installation-media img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-item-card:hover .installation-media img {
  transform: scale(1.05);
}

/* Expand affordance — injected by the gallery modal script */
.gallery-card-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary);
  font-size: 0.82rem;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 30, 90, 0.22);
  opacity: 0;
  transform: translateY(-4px);
  transition: var(--transition-normal);
  pointer-events: none;
  z-index: 2;
}

.gallery-item-card:hover .gallery-card-expand,
.gallery-item-card:focus-visible .gallery-card-expand {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item-card .installation-body {
  flex: 1;
  min-height: 0;
  padding: 16px 18px 18px;
}

.gallery-location-tag {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gallery-item-card .installation-title {
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 6px;
}

.gallery-item-card .installation-desc {
  font-size: 0.87rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Gallery expand modal — gallery page only */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 24px;
}

.gallery-modal[hidden] {
  display: none;
}

.gallery-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 34, 0.8);
  animation: gallery-modal-fade 0.25s ease both;
}

.gallery-modal-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(940px, 100%);
  min-height: min(440px, 78vh);
  max-height: 88vh;
  background: #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 90px rgba(0, 15, 50, 0.45);
  animation: gallery-modal-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gallery-modal-media {
  position: relative;
  flex: 1 1 58%;
  min-width: 0;
  background: #0E1626;
}

.gallery-modal-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-modal-body {
  flex: 1 1 42%;
  min-width: 0;
  max-height: 88vh;
  overflow-y: auto;
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gallery-modal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.gallery-modal-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(0, 60, 180, 0.25);
}

.gallery-modal-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.gallery-modal-title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-title);
  margin-bottom: 12px;
}

.gallery-modal-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.gallery-modal-close,
.gallery-modal-nav {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text-title);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 20, 60, 0.25);
  transition: var(--transition-normal);
}

.gallery-modal-close:hover,
.gallery-modal-nav:hover {
  background: var(--primary);
  color: #FFFFFF;
  transform: scale(1.06);
}

.gallery-modal-close:focus-visible,
.gallery-modal-nav:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.gallery-modal-close {
  top: 12px;
  right: 12px;
}

.gallery-modal-nav {
  top: 50%;
  transform: translateY(-50%);
}

.gallery-modal-nav:hover {
  transform: translateY(-50%) scale(1.06);
}

.gallery-modal-prev {
  left: 12px;
}

.gallery-modal-next {
  right: 12px;
}

@keyframes gallery-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes gallery-modal-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 820px) {
  .gallery-modal {
    padding: 14px;
  }

  .gallery-modal-dialog {
    flex-direction: column;
    min-height: 0;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 16px;
  }

  .gallery-modal-media {
    flex: none;
    aspect-ratio: 16 / 9;
  }

  .gallery-modal-body {
    flex: none;
    max-height: none;
    overflow: visible;
    padding: 20px 18px 24px;
    justify-content: flex-start;
  }

  .gallery-modal-title {
    font-size: 1.15rem;
  }
}

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

  .gallery-modal-dialog,
  .gallery-modal-backdrop {
    animation: none;
  }
}

/* Contact Grid & Map Container */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.contact-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-col-info .map-embed-container {
  flex: 1 1 275px;
  min-height: 220px;
}

.contact-col-form .contact-card-box {
  flex: 1;
}

.contact-card-box {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 38px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
}

.contact-info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 26px;
}

.contact-info-card {
  background: #F4F8FC;
  border: 1px solid #DCE8F5;
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-info-card i {
  font-size: 1.35rem;
  color: var(--primary);
}

.contact-info-card h3 {
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--text-title);
}

.contact-info-card p,
.contact-info-card a {
  font-size: 0.9rem;
  color: var(--text-body);
}

.map-embed-container {
  width: 100%;
  height: 275px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
}

.map-embed-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */


@media (max-width: 1080px) {
  .hero-section {
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 140px;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-media img {
    object-position: center 45%;
  }

  /* On tablet/mobile content stacks vertically — mirror the desktop approach
     but top→bottom instead of left→right: strong white at the top (text zone),
     fading to fully transparent by 65% so the image shows in the lower half. */
  .hero-media::after {
    background:
      linear-gradient(180deg,
        rgba(248, 250, 252, 0.98) 0%,
        rgba(248, 250, 252, 0.97) 30%,
        rgba(248, 250, 252, 0.88) 45%,
        rgba(248, 250, 252, 0.55) 55%,
        rgba(248, 250, 252, 0.18) 63%,
        rgba(248, 250, 252, 0)    70%);
  }

  .services-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  .process-timeline {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .process-timeline::before {
    display: none;
  }

  .process-timeline-track {
    display: none;
  }

  .footer-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .section {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .why-grid {
    gap: 40px;
  }

  /* Quote bar — 2x2 fields keep every input usable on tablets */
  .quote-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Trust badges — one horizontal line while it fits (tablet) */
  .trust-badges-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    justify-content: safe center;
    gap: 10px 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .trust-badge-item {
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .trust-badges-row::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 96px;
  }

  .hero-media img {
    object-position: center 40%;
  }

  .hero-title {
    font-size: clamp(2.1rem, 7.5vw, 2.75rem);
    letter-spacing: -1px;
    margin-bottom: 16px;
  }

  .hero-kicker {
    letter-spacing: 3px;
  }

  .hero-eyebrow {
    letter-spacing: 2px;
  }

  .hero-trust-row {
    gap: 12px 20px;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
    min-width: 180px;
  }

  .hero-dots {
    margin-top: 40px;
  }

  .section-badge {
    justify-content: center;
  }

  .section-title {
    font-size: 1.8rem;
    text-align: center;
  }

  .section-subtitle {
    text-align: center;
  }

  .quote-bar-title {
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .trust-badges-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .about-grid {
    display: flex;
    flex-direction: column;
  }

  .about-media-col {
    order: -1;
    width: 100%;
  }

  .about-content-col {
    text-align: center;
    align-items: center;
  }

  .about-content-col .section-badge {
    margin-left: auto;
    margin-right: auto;
  }

  .about-content-col > div {
    text-align: center;
    width: 100%;
    justify-content: center !important;
  }

  .why-left-col {
    text-align: center;
    align-items: center;
  }

  .why-left-col .section-badge {
    margin-left: auto;
    margin-right: auto;
  }

  .why-left-col > div {
    text-align: center;
    width: 100%;
  }

  .brands-wrap {
    justify-content: center;
    text-align: center;
  }

  .brands-label {
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .brands-label::after {
    display: none;
  }

  .brands-list {
    justify-content: center;
  }

  .about-copy-block {
    padding: 24px 20px;
  }

  .about-copy-block p {
    font-size: 0.98rem;
    line-height: 1.7;
  }

  .quote-form-grid {
    grid-template-columns: 1fr;
  }

  .quote-bar-wrapper {
    margin-top: -74px;
    margin-bottom: 40px;
  }

  .services-grid-4,
  .installations-grid-3,
  .testimonials-grid-3 {
    grid-template-columns: 1fr;
  }

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

  .gallery-item-card {
    height: auto;
  }

  .cta-banner-wrap {
    flex-direction: column;
    text-align: center;
    padding: 38px 24px;
  }

  .cta-banner-actions {
    width: 100%;
    flex-direction: column;
  }

  .hamburger-btn {
    display: block;
  }

  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background: #FFFFFF;
    flex-direction: column;
    padding: 26px 20px;
    gap: 18px;
    border-bottom: 1px solid var(--border-subtle);
    transform: translateY(-150%);
    transition: transform var(--transition-normal);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .nav-menu a {
    display: block;
    padding: 8px 0;
  }

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

  .header-cta .btn {
    display: none;
  }

  .contact-info-cards {
    grid-template-columns: 1fr;
  }

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

  .section {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .why-grid {
    gap: 24px;
  }

  .why-grid {
    gap: 32px;
  }

  .services-grid-4,
  .installations-grid-3,
  .testimonials-grid-3 {
    gap: 18px;
  }
}

/* ==========================================================================
   Scroll Reveal Animation System (only active when JS is available)
   ========================================================================== */
html.js .reveal,
html.js .reveal-left,
html.js .reveal-right,
html.js .reveal-scale {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.js .reveal {
  transform: translateY(28px);
}

html.js .reveal-left {
  transform: translateX(-40px);
}

html.js .reveal-right {
  transform: translateX(40px);
}

html.js .reveal-scale {
  transform: scale(0.96);
}

html.js .reveal.in,
html.js .reveal-left.in,
html.js .reveal-right.in,
html.js .reveal-scale.in {
  opacity: 1;
  transform: none;
}

/* ── Page Hero: always show immediately — content is above-the-fold
   and IntersectionObserver won't reliably fire for elements already
   in the viewport (especially on mobile). ── */
html.js .page-hero .reveal,
html.js .page-hero .reveal-left,
html.js .page-hero .reveal-right,
html.js .page-hero .reveal-scale {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Staggered groups: one observer trigger, cascading children */
html.js .stagger-children > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.js .stagger-children > *:nth-child(1) { transition-delay: 0s; }
html.js .stagger-children > *:nth-child(2) { transition-delay: 0.07s; }
html.js .stagger-children > *:nth-child(3) { transition-delay: 0.14s; }
html.js .stagger-children > *:nth-child(4) { transition-delay: 0.21s; }
html.js .stagger-children > *:nth-child(5) { transition-delay: 0.28s; }
html.js .stagger-children > *:nth-child(6) { transition-delay: 0.35s; }
html.js .stagger-children > *:nth-child(7) { transition-delay: 0.42s; }
html.js .stagger-children > *:nth-child(8) { transition-delay: 0.49s; }
html.js .stagger-children > *:nth-child(9) { transition-delay: 0.56s; }
html.js .stagger-children > *:nth-child(10) { transition-delay: 0.63s; }
html.js .stagger-children > *:nth-child(11) { transition-delay: 0.7s; }
html.js .stagger-children > *:nth-child(12) { transition-delay: 0.77s; }
html.js .stagger-children > *:nth-child(n+13) { transition-delay: 0.84s; }

html.js .stagger-children.in > * {
  opacity: 1;
  transform: none;
}

/* Alternating content rows slide in from their own side */
html.js .about-grid.stagger-children > *:first-child {
  transform: translateX(-40px);
}

html.js .about-grid.stagger-children > *:last-child {
  transform: translateX(40px);
}

html.js .stagger-children.in > *,
html.js .about-grid.stagger-children.in > * {
  opacity: 1;
  transform: none;
}

/* Subtle press feedback */
.btn:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal-left,
  html.js .reveal-right,
  html.js .reveal-scale,
  html.js .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-media img {
    animation: none;
  }

  html.js .process-timeline-progress {
    transition: none;
  }
}

/* ==========================================================================
   Mobile density pass — shorter sections on phones without removing
   content (must stay last so it wins the cascade over earlier blocks)
   ========================================================================== */
@media (max-width: 768px) {
  .section {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  /* Recent Installations — stacked single column (section only has 3 cards) */
  .installations-grid-3 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .installation-media {
    aspect-ratio: 16 / 9;
  }

  .installation-body {
    padding: 14px;
  }

  .installation-title {
    font-size: 0.95rem;
  }

  .installation-desc {
    font-size: 0.8rem;
    line-height: 1.45;
  }

  /* Why Choose Us — tighter cards, shallower media */
  .why-left-col {
    gap: 12px;
  }

  .why-left-col .media-image-frame {
    aspect-ratio: 16 / 8;
  }

  .why-feature-list {
    gap: 9px;
  }

  .why-feature-item {
    gap: 12px;
    padding: 11px 13px;
  }

  .why-feature-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 0.95rem;
  }

  .why-feature-text p {
    font-size: 0.83rem;
    line-height: 1.45;
  }

  /* How We Work — 2-col step grid, final step centered */
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .process-timeline > .process-step:last-child {
    grid-column: 1 / -1;
  }

  .process-step-node {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    font-size: 0.95rem;
  }

  .process-step-title {
    font-size: 0.92rem;
    margin-bottom: 4px;
  }

  .process-step-desc {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  /* Service / about split rows — denser stacked layout */
  .about-grid {
    gap: 18px;
  }

  .about-content-col .section-badge {
    margin-bottom: 8px;
  }

  .about-content-col .section-title {
    font-size: 1.45rem;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  .about-content-col p {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
  }

  .about-content-col ul {
    margin-top: 6px !important;
    gap: 6px !important;
  }

  .about-content-col li {
    font-size: 0.87rem;
  }

  .media-image-frame {
    aspect-ratio: 16 / 8;
  }

  .floating-team-badge {
    font-size: 0.78rem;
    padding: 8px 14px;
  }
}

/* Pass 2 — further mobile density */
@media (max-width: 768px) {
  .section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .page-hero {
    padding-top: calc(var(--header-height) + 26px);
    padding-bottom: 40px;
  }

  .page-hero-title {
    font-size: 1.9rem;
    margin-bottom: 8px;
  }

  .page-hero-subtitle {
    font-size: 0.98rem;
  }

  .about-grid {
    gap: 14px;
  }

  .about-content-col .section-title {
    font-size: 1.3rem;
  }

  .about-content-col p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  .about-content-col li {
    font-size: 0.83rem;
  }

  .media-image-frame {
    aspect-ratio: 16 / 7;
  }

  /* Testimonials — one-card horizontal snap carousel */
  .testimonials-grid-3 {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .testimonials-grid-3::-webkit-scrollbar {
    display: none;
  }

  .testimonials-grid-3 > .testimonial-card {
    flex: 0 0 88%;
    scroll-snap-align: start;
  }

  .why-left-col .media-image-frame {
    aspect-ratio: 16 / 7;
  }

  .why-feature-item {
    padding: 9px 12px;
  }

  .installation-media {
    aspect-ratio: 16 / 8;
  }
}

/* Pass 3 — final mobile density */
@media (max-width: 768px) {
  .section {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .hero-section {
    padding-bottom: 74px;
  }

  .hero-dots {
    margin-top: 26px;
  }

  /* Quote bar — single-column full-width fields on phones */
  .quote-bar-card {
    padding: 22px 18px;
  }

  .quote-form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .form-input,
  .form-select {
    height: 48px;
    font-size: 0.92rem;
  }

  /* Trust badges — 2x2 when one line no longer fits */
  .trust-badges-row {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    column-gap: 18px;
    row-gap: 10px;
    overflow: visible;
  }

  .trust-badge-item {
    font-size: 0.8rem;
    white-space: nowrap;
    gap: 6px;
  }

  .trust-badge-item i {
    font-size: 0.9rem;
  }

  .why-left-col .media-image-frame {
    aspect-ratio: 16 / 6;
  }

  .why-feature-text p {
    font-size: 0.8rem;
  }

  /* Services quick-nav pills — inline sizes need !important to shrink */
  .industries-pills-wrap {
    gap: 8px !important;
  }

  .industries-pills-wrap a.industry-pill {
    font-size: 0.74rem !important;
    padding: 7px 13px !important;
  }

  /* Services quick-nav — 2-col chip grid instead of wrapping rows */
  .services-pills-nav {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px !important;
  }

  .industries-pills-wrap.services-pills-nav .industry-pill {
    justify-content: center;
    text-align: center;
    gap: 4px !important;
    font-size: 0.62rem !important;
    padding: 6px 6px !important;
    letter-spacing: 0 !important;
    order: 0 !important;
  }

  .services-pills-nav .industry-pill i {
    font-size: 0.8rem;
  }

  /* Gallery page — uniform 2-col grid with equal-height rows on phones */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    columns: unset;
  }

  .gallery-item-card {
    height: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    box-shadow: 0 2px 10px rgba(0, 40, 120, 0.07);
  }

  .gallery-item-card .installation-media {
    height: auto;
    flex: none;
    aspect-ratio: 4 / 3;
  }

  .gallery-item-card .installation-body {
    padding: 14px 14px 16px;
  }

  .gallery-location-tag {
    font-size: 0.74rem;
    margin-bottom: 4px;
    gap: 5px;
  }

  .gallery-item-card .installation-title {
    font-size: 0.96rem;
    line-height: 1.3;
    margin-bottom: 5px;
  }

  /* 2-col compact cards — location + title only; full text lives in the modal */
  .gallery-item-card .installation-desc {
    display: none;
  }

  .gallery-filter-bar {
    gap: 8px;
    margin-bottom: 18px;
  }

  .gallery-filter-btn {
    padding: 7px 13px;
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   Services quick-nav — two rows on tablet/desktop (must follow base rules)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1080px) {
  .industries-pills-wrap.services-pills-nav .industry-pill {
    font-size: 0.64rem !important;
    padding: 8px 8px !important;
  }

  .cta-banner-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }

  .cta-banner-content h2 {
    font-size: 1.8rem;
  }
}

@media (min-width: 1081px) {
  .industries-pills-wrap.services-pills-nav {
    max-width: 1040px;
  }

  .industries-pills-wrap.services-pills-nav .industry-pill {
    padding: 9px 14px !important;
  }
}

/* Headings — keep to two lines on phones */
@media (max-width: 480px) {
  .page-hero-title {
    font-size: clamp(1.3rem, 6.2vw, 1.75rem);
  }

  .cta-banner-content h2 {
    font-size: clamp(1.5rem, 7vw, 1.8rem);
  }
}

/* Feature checklists: icon vertically centered on desktop, top-aligned below */
@media (min-width: 992px) {
  .about-content-col ul li {
    align-items: center !important;
  }

  .about-content-col ul li i {
    margin-top: 0 !important;
  }
}

/* Services quick-nav: last pill spans two pill slots so the final row looks balanced */
@media (min-width: 769px) {
  .services-pills-nav .industry-pill:last-child {
    flex: 1 1 auto;
    max-width: calc(50% - 5px);
    justify-content: center;
  }
}

/* Same idea on phones/tablets, where the nav is a 2-col grid */
@media (max-width: 768px) {
  .services-pills-nav .industry-pill:last-child {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* ==========================================================================
   Styled dropdown popup for the service select (native popup isn't themable)
   ========================================================================== */
.select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid #E3EBF7;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(15, 42, 84, 0.16), 0 4px 12px rgba(15, 42, 84, 0.08);
  max-height: 274px;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.2s;
}

.select-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-title);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.select-option span {
  min-width: 0;
}

.select-option i {
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--primary);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.select-option:hover,
.select-option.is-active {
  background: #EDF3FA;
  outline: none;
}

.select-option.is-selected {
  color: var(--primary);
}

.select-option.is-selected i {
  opacity: 1;
  transform: scale(1);
}

.form-select.is-open {
  background-color: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.form-select option {
  padding: 8px 10px;
}

/* Trust badges — phones: single stack of 4, group centered, icons share one start point */
@media (max-width: 480px) {
  .trust-badges-row {
    display: grid;
    grid-template-columns: max-content;
    justify-content: center;
    justify-items: start;
    row-gap: 10px;
    overflow: visible;
  }

  .trust-badge-item {
    font-size: 0.8rem;
    white-space: nowrap;
    gap: 6px;
  }

  .trust-badge-item i {
    font-size: 0.9rem;
  }
}