/* ==========================================================================
   Cubic Smart Innovation LLC — plain, dependency-free CSS.
   No build step, no CDN. Fluid responsive layout leans on clamp() and
   auto-fit grids so most components need zero breakpoint-specific rules.

   Brand colors sampled directly from Brand_Assets logo files:
   core orange #FA5A1E, cyan #00AAE6 (used site-wide). --color-navy is
   repurposed as a dark neutral for structural UI (stat numbers, default
   icons) rather than introducing an off-brand third hue.

   The four-division logo system (Construction/Roofing/Restoration/Water
   Mitigation) adds a per-division underline accent on top of that base
   palette — --color-division-* below, used only on the Services page to
   tell the divisions apart, not as new site-wide brand colors.
   ========================================================================== */

:root {
  --font-display: 'Barlow Condensed', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --color-ink: #0B1220;
  --color-ink-soft: #131C2E;
  --color-navy: #123244;
  --color-navy-light: #00AAE6;
  --color-cyan: #00AAE6;
  --color-cyan-light: #4DC6F0;
  --color-orange: #FA5A1E;
  --color-orange-light: #FF7F4D;
  --color-alert: #DC2626;

  --color-paper: #F2F4F9;
  --color-paper-dim: #E7EBF3;
  --color-line: #E2E8F0;
  --color-muted: #64748B;
  --color-body: #1E293B;
  --color-white: #FFFFFF;

  /* Division accent colors — Services page only, matches each division's logo underline */
  --color-division-construction: #FA5A1E;
  --color-division-roofing: #E5342A;
  --color-division-restoration: #3FA535;
  --color-division-water: #00AAE6;

  --shadow-soft: 0 8px 30px -12px rgba(11, 18, 32, 0.25);
  --shadow-lift: 0 20px 50px -18px rgba(11, 18, 32, 0.45);

  --space-section: clamp(4rem, 3rem + 4vw, 7rem);
  --radius: 12px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-ink);
  color: rgba(255,255,255,0.82);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); letter-spacing: -0.01em; line-height: 1.08; }
p { margin: 0; }
::selection { background: var(--color-orange); color: white; }
:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-orange); color: white;
  padding: 0.75rem 1.25rem; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}
.section { padding-block: var(--space-section); }
.section-tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-dark { background: var(--color-ink); color: rgba(255,255,255,0.85); }
.section-dim { background: var(--color-ink-soft); }
.section-border-b { border-bottom: 1px solid var(--color-line); }

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-xs { gap: 0.5rem; }
.gap-sm { gap: 0.75rem; }
.gap-md { gap: 1.25rem; }
.gap-lg { gap: 2rem; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.max-w-content { max-width: 640px; }
.max-w-lead { max-width: 720px; }

/* These visibility utilities must win regardless of component rule order below,
   since their entire job is to override another class's display at a breakpoint. */
.hide-mobile { display: none !important; }
.show-mobile { display: block !important; }
@media (min-width: 860px) {
  .hide-mobile { display: revert !important; }
  .show-mobile { display: none !important; }
}
.hide-until-desktop { display: none !important; }
@media (min-width: 1080px) {
  .hide-until-desktop { display: flex !important; }
}
.hide-from-desktop { display: flex !important; }
@media (min-width: 1080px) {
  .hide-from-desktop { display: none !important; }
}

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-orange);
}
.eyebrow svg { width: 0.9rem; height: 0.9rem; }
.h1 { font-size: clamp(2.4rem, 1.9rem + 2.4vw, 3.75rem); font-weight: 800; }
.h2 { font-size: clamp(1.9rem, 1.6rem + 1.5vw, 2.85rem); font-weight: 800; }
.h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem); font-weight: 700; }
.lead { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: rgba(255,255,255,0.7); line-height: 1.6; }
.body-muted { color: rgba(255,255,255,0.65); font-size: 0.9375rem; line-height: 1.65; }
.small-muted { color: rgba(255,255,255,0.55); font-size: 0.8125rem; }
.on-dark { color: rgba(255,255,255,0.7); }
.on-dark-strong { color: rgba(255,255,255,0.92); }
.on-dark .eyebrow, .section-dark .eyebrow { color: var(--color-orange-light); }
.text-white { color: white; }
/* Repointed from near-black to white — the whole site is dark now, so every
   existing h2/h3.text-ink usage (originally meant for text on a white card)
   automatically becomes correct without touching each instance in HTML. */
.text-ink { color: white; }
.text-navy { color: var(--color-navy); }
.text-orange { color: var(--color-orange); }
.italic { font-style: italic; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.btn-primary {
  background: var(--color-orange);
  color: white;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--color-orange-light); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.35);
  color: white;
}
.btn-outline:hover { border-color: white; background: rgba(255,255,255,0.08); }
.btn-outline-dark {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.35);
  color: white;
}
.btn-outline-dark:hover { border-color: white; background: rgba(255,255,255,0.08); }
.btn-sm { padding: 0.65rem 1.2rem; min-height: 40px; font-size: 0.875rem; }
.btn-block { width: 100%; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 1.75rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.card:hover {
  transform: perspective(800px) translateY(-3px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  box-shadow: var(--shadow-lift);
  border-color: rgba(250, 90, 30, 0.35);
}
.card-quiet { box-shadow: none; }
/* Left accent stripe tying a service card back to its division's color —
   set --division-accent inline (or inherit it from the division-header above). */
.card--accent { border-left: 4px solid var(--division-accent, var(--color-line)); }

.card-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 1rem; font-size: 0.875rem; font-weight: 700;
  color: var(--color-orange); cursor: pointer;
}
.card-link svg { width: 0.9rem; height: 0.9rem; transition: transform 180ms ease; }
.card-link:hover { text-decoration: underline; }
.card-link:hover svg { transform: translateX(3px); }

.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  color: var(--color-cyan-light);
}
.service-icon svg { width: 24px; height: 24px; }
.service-icon-sm { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; }
.service-icon-sm svg { width: 20px; height: 20px; }
.service-icon--orange { background: rgba(234, 88, 12, 0.1); color: var(--color-orange); }
/* Compound selector (not a bare modifier) so this reliably beats .service-icon's own
   rule regardless of source order — for an icon sitting directly on a dark section
   background, not inside a white .card (which keeps its normal tint either way). */
.service-icon.service-icon--on-dark { background: rgba(255,255,255,0.1); color: var(--color-cyan-light); }
.service-icon--cyan { background: rgba(8, 145, 178, 0.1); color: var(--color-cyan); }
.service-icon--green { background: rgba(63, 165, 53, 0.1); color: var(--color-division-restoration); }
.service-icon--red { background: rgba(229, 52, 42, 0.1); color: var(--color-division-roofing); }

/* Division banner — Services page. The division's own logo lockup as a real
   design element (not a small side-icon): a tinted card sized to let the
   logo breathe, with the accent color carried through the background,
   border and a soft glow, so it reads as a section-opener, not a divider. */
.division-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 1.75rem 2rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--division-accent, rgba(255,255,255,0.3)) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--division-accent, rgba(255,255,255,0.3)) 16%, var(--color-ink-soft)), var(--color-ink-soft) 70%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.division-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(45% 90% at 100% 0%, color-mix(in srgb, var(--division-accent, rgba(255,255,255,0.3)) 25%, transparent), transparent 70%);
  pointer-events: none;
}
.division-header img { position: relative; height: 92px; width: auto; flex-shrink: 0; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4)); }
.division-header-text { position: relative; display: flex; flex-direction: column; }
.division-header-name { font-family: var(--font-display); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.85rem); font-weight: 800; color: white; }
.division-header-tag { font-size: 0.9375rem; color: rgba(255,255,255,0.6); margin-top: 0.25rem; }
@media (max-width: 560px) {
  .division-header { flex-direction: column; text-align: center; padding: 1.5rem; }
  .division-header img { height: 72px; }
}

.stat-value { font-family: var(--font-display); font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem); font-weight: 800; color: white; }

/* Third-party certification marks (IICRC, etc.) keep their own official colors —
   a light plate lets the black wordmark stay legible on our dark background
   without us recoloring someone else's logo. Brand-colored glow + a slow shine
   sweep give the plate some dimension instead of sitting flat on the page. */
.cert-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2.1rem;
  background: rgba(255,255,255,0.98);
  border-radius: 16px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow:
    0 18px 44px -10px rgba(0, 170, 230, 0.45),
    0 12px 34px -12px rgba(250, 90, 30, 0.35);
}
.cert-badge img { position: relative; z-index: 1; height: 92px; width: auto; display: block; }
.cert-badge::after {
  content: '';
  position: absolute;
  top: -60%; left: -60%;
  width: 35%; height: 220%;
  background: linear-gradient(120deg, transparent, rgba(0, 170, 230, 0.35), transparent);
  transform: rotate(20deg);
  animation: badge-shine 5s ease-in-out infinite;
}
@keyframes badge-shine {
  0%, 30% { left: -60%; }
  70%, 100% { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
  .cert-badge::after { display: none; }
}
.stat-value.stat-value--on-dark { color: white; }
.stat-card { padding: 1.75rem 1.25rem; }

/* ---------- Timeline (About page) ---------- */
.timeline { position: relative; max-width: 720px; margin-inline: auto; }
.timeline::before {
  content: ''; position: absolute; left: 90px; top: 6px; bottom: 6px;
  width: 2px; background: rgba(255,255,255,0.15);
}
.timeline-item {
  position: relative; display: grid;
  grid-template-columns: 70px 40px 1fr; column-gap: 1rem;
  padding-bottom: 2.75rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-year {
  grid-column: 1; font-family: var(--font-display); font-size: 1.25rem;
  font-weight: 800; color: var(--color-orange); text-align: right; padding-top: 0.2rem;
}
.timeline-dot {
  grid-column: 2; position: relative; z-index: 1;
  width: 16px; height: 16px; border-radius: 999px; background: var(--color-orange);
  box-shadow: 0 0 0 4px var(--color-ink), 0 0 0 6px rgba(255,255,255,0.15);
  margin-inline: auto; margin-top: 0.4rem;
}
.timeline-body { grid-column: 3; }
@media (max-width: 640px) {
  .timeline::before { left: 7px; }
  .timeline-item { grid-template-columns: 16px 1fr; row-gap: 0.35rem; }
  .timeline-dot { grid-column: 1; grid-row: 1; margin-inline: 0; }
  .timeline-year { grid-column: 2; grid-row: 1; text-align: left; padding-top: 0; }
  .timeline-body { grid-column: 2; grid-row: 2; }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-ink); transition: box-shadow 200ms ease; }
.site-header.is-scrolled { box-shadow: 0 12px 28px -16px rgba(0,0,0,0.55); }
.top-bar { background: var(--color-orange); color: white; }
.top-bar-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.5rem; font-size: 0.8125rem; font-weight: 600; }
.top-bar-inner a { display: inline-flex; align-items: center; gap: 0.4rem; }
.top-bar-inner a:hover { text-decoration: underline; }
.top-bar-inner svg { width: 0.875rem; height: 0.875rem; }

.nav-row { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; }
.brand { display: flex; align-items: center; gap: 0.65rem; }
.brand-mark {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.brand-mark svg { width: 68%; height: 68%; }
/* Logo art is true alpha-transparent PNG/WebP — no plate needed, it sits directly
   on the dark header/footer. Drop the glass-badge background/border entirely. */
.brand-mark--logo { background: none; border: none; }
.brand-mark--logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name-main { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: white; letter-spacing: -0.01em; }
.brand-name-sub { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-cyan-light); }

.nav-links { display: none; align-items: center; gap: 2rem; font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.8); }
@media (min-width: 1080px) { .nav-links { display: flex; } }
.nav-links a { position: relative; transition: color 180ms ease; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: white; }
.nav-links a::after {
  content: '';
  position: absolute; left: 50%; right: 50%; bottom: -6px;
  height: 2px; background: var(--color-orange);
  transition: left 220ms ease, right 220ms ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { left: 0; right: 0; }

.nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;
  padding: 0.5rem 0.85rem; font-size: 0.8125rem; font-weight: 700;
  color: rgba(255,255,255,0.85); cursor: pointer; transition: border-color 180ms ease, color 180ms ease;
}
.lang-toggle:hover { border-color: rgba(255,255,255,0.4); color: white; }
.nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2); color: white; cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
@media (min-width: 1080px) { .nav-toggle { display: none; } }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 0.75rem 0 1.5rem;
}
.mobile-menu.is-open { display: flex; }
@media (min-width: 1080px) { .mobile-menu { display: none !important; } }
.mobile-menu a { padding: 0.65rem 0.25rem; font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.85); border-radius: 6px; }
.mobile-menu a[aria-current="page"] { color: white; }
.mobile-menu-actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.mobile-menu-actions > * { flex: 1; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--color-ink); }
.hero-glow {
  position: absolute; inset: 0; opacity: 0.4; pointer-events: none;
  background: radial-gradient(60% 50% at 80% 20%, var(--color-navy) 0%, transparent 70%);
}
.hero-grid {
  position: relative;
  display: grid;
  gap: 3.5rem;
  align-items: center;
  padding-block: clamp(3.5rem, 3rem + 3vw, 6rem);
}
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.hero-note { margin-top: 1.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.5); }

.hero-visual { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin-inline: auto; display: none; }
@media (min-width: 620px) { .hero-visual { display: block; } }
.ripple-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ripple {
  position: absolute;
  width: 176px; height: 176px;
  border: 2px solid rgba(34, 184, 214, 0.4);
  border-radius: 999px;
  animation: ripple 3.2s ease-out infinite;
}
.ripple:nth-child(2) { animation-delay: 0.9s; }
.ripple:nth-child(3) { animation-delay: 1.8s; }
@keyframes ripple {
  0% { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}
.ripple-core {
  position: relative;
  width: 176px; height: 176px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-navy), var(--color-ink-soft));
  box-shadow: var(--shadow-lift);
  outline: 1px solid rgba(255,255,255,0.15);
}
.ripple-core svg { width: 64px; height: 64px; color: var(--color-cyan-light); }
.ripple-core img { width: 112px; height: auto; display: block; }

.floating-badge {
  position: absolute;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem; border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
/* Compound selector — .glass's own `position: relative` (needed for its ::before
   sheen) would otherwise win over .floating-badge's `position: absolute` since
   both are single-class rules and .glass is declared later in the file. */
.floating-badge.glass { position: absolute; width: auto; }
/* Independent, offset bob so the two badges don't move in lockstep — reads as
   two things quietly floating rather than one mechanical loop. */
.floating-badge--top { top: 1rem; left: -0.5rem; animation: badge-float 4.5s ease-in-out infinite; }
.floating-badge--bottom { bottom: 1.5rem; right: -0.75rem; animation: badge-float 4.5s ease-in-out infinite; animation-delay: -2.2s; }
@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .floating-badge--top, .floating-badge--bottom { animation: none; }
}
.floating-badge .stat-value { font-size: 1.25rem; color: white; }
.floating-badge .small-muted { color: rgba(255,255,255,0.65); }

/* ---------- Process ---------- */
.process-grid { position: relative; }
.process-line { display: none; }
@media (min-width: 1080px) {
  .process-line { display: block; position: absolute; left: 0; right: 0; top: 1.5rem; height: 1px; background: rgba(255,255,255,0.15); }
}
.process-step { position: relative; text-align: center; }
.process-num {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-inline: auto;
  border-radius: 999px; background: var(--color-navy); color: white;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 800;
}
.process-num--accent { background: var(--color-orange); }

/* ---------- Testimonials ---------- */
.testimonial p { color: rgba(255,255,255,0.88); font-size: 0.9375rem; line-height: 1.65; }
.testimonial footer { margin-top: 1.25rem; font-size: 0.875rem; font-weight: 700; color: rgba(255,255,255,0.55); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-ink); color: rgba(255,255,255,0.65); }
.footer-grid { display: grid; gap: 3rem; padding-block: 4rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-heading { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: white; }
.footer-links { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1rem; font-size: 0.9375rem; }
.footer-links a:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); }
.footer-bottom-inner {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding-block: 1.5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.45);
}
@media (min-width: 700px) { .footer-bottom-inner { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.875rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.field input, .field select, .field textarea {
  font: inherit;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: white;
  min-height: 46px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.35); }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-cyan);
  box-shadow: 0 0 0 3px rgba(0, 170, 230, 0.25), 0 0 22px -4px rgba(0, 170, 230, 0.4);
}
.field input, .field select, .field textarea {
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.form-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-grid--full { grid-column: 1 / -1; }

.contact-option {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.5rem; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}

.success-panel { text-align: center; padding: 2.5rem 1.5rem; }
.success-icon {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-inline: auto;
  border-radius: 999px; background: rgba(8, 145, 178, 0.1); color: var(--color-cyan);
}
.success-icon svg { width: 28px; height: 28px; }
.hidden { display: none !important; }

/* ---------- Areas / list chips ---------- */
/* Flex-wrap + centered, not a grid — with an odd item count a grid leaves the
   last row ragged/left-aligned (looks unfinished); a centered flex row settles
   any leftover count in the middle instead, which reads as intentional. */
.chip-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.chip {
  position: relative;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.1rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  font-size: 0.9375rem; font-weight: 600; color: white;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}
.chip:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.09); }
.chip svg { width: 16px; height: 16px; color: var(--color-orange); flex-shrink: 0; }

/* My Maps embeds always include a header strip (map name + creator + "Made
   with Google My Maps") that Google gives no option to hide. Crop it by
   sizing the iframe taller than the visible container and shifting it up
   by the header's height, so overflow:hidden clips the strip off. */
.map-embed {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.14);
  overflow: hidden;
  position: relative;
}
.map-embed iframe {
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  height: calc(100% + 70px);
  border: 0;
}

/* ---------- Values / certs ---------- */
.cert-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cert-item { display: flex; align-items: center; gap: 0.85rem; padding: 1.1rem 1.25rem; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.cert-item svg { width: 20px; height: 20px; color: var(--color-cyan); flex-shrink: 0; }

/* ---------- Reveal animation (IntersectionObserver-driven) ----------
   Blur-to-focus rather than a flat slide-fade — elements resolve into
   place like a lens focusing, instead of the generic AOS fade-up look. */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  filter: blur(6px);
  transition: opacity 650ms ease, transform 650ms ease, filter 650ms ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

.hero-anim {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  filter: blur(6px);
  animation: hero-in 750ms ease forwards;
}
.hero-anim--1 { animation-delay: 40ms; }
.hero-anim--2 { animation-delay: 140ms; }
.hero-anim--3 { animation-delay: 260ms; }
.hero-anim--4 { animation-delay: 380ms; }
.hero-anim--5 { animation-delay: 480ms; }
@keyframes hero-in {
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ---------- Ambient glow field (slow-drifting blooms behind dark sections) ----------
   --scroll-shift is set by initScrollParallax() as each section moves through the
   viewport, layered on top of the blobs' own independent drift keyframes below. */
.glow-field {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  transform: translateY(var(--scroll-shift, 0px));
}
.glow-field::before,
.glow-field::after {
  content: '';
  position: absolute;
  width: 55%; height: 55%;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
}
.glow-field::before {
  top: -12%; right: -8%;
  background: var(--color-orange);
  animation: drift-a 26s ease-in-out infinite;
}
.glow-field::after {
  bottom: -18%; left: -10%;
  background: var(--color-cyan);
  animation: drift-b 32s ease-in-out infinite;
}
@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, -4%) scale(1.08); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, 3%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .glow-field::before, .glow-field::after { animation: none; }
}

/* ---------- Glass surfaces (frosted panels for dark sections) ----------
   .glass is the visual treatment only — layout/position stays on whatever
   component class it's paired with (.floating-badge, .stat-card, etc). */
.glass {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}
/* Cursor-tracked light sheen — JS sets --px/--py on mousemove; static center otherwise.
   Shared with .card and .chip so every glass surface sitewide (service cards,
   testimonials, values, contact options, area chips) matches. */
.glass::before, .card::before, .chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(160px circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,0.16), transparent 60%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.glass:hover::before, .card:hover::before, .chip:hover::before { opacity: 1; }
.glass:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.28); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.55); }
@media (hover: none) {
  .glass::before, .card::before, .chip::before { display: none; }
}

/* ---------- Button click bloom ---------- */
.btn { position: relative; overflow: hidden; }
.btn-bloom {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: bloom-out 550ms ease-out forwards;
}
@keyframes bloom-out {
  to { transform: translate(-50%, -50%) scale(18); opacity: 0; }
}

/* Utility spacing (small, deliberately scoped set) */
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 2.5rem; } .mt-6 { margin-top: 3.5rem; }