/* ==========================================================================
   Bright Flow Services — Global Design System
   --------------------------------------------------------------------------
   1. Tokens
   2. Reset & base
   3. Typography
   4. Layout primitives
   5. Buttons & links
   6. Utility bar
   7. Header & desktop navigation
   8. Mobile menu
   9. Page hero / home hero
   10. Sections, cards, CTA band
   11. Forms
   12. Footer
   13. Motion & utilities
   14. Homepage sections
   15. Service & detail pages
   16. Commercial pages
   17. Contact & estimate form
   18. Legal pages
   19. Production refinements (accessibility, responsiveness, motion)
   20. Hero typography accents, credentials, consultation section
   ========================================================================== */

/* Self-hosted variable fonts (latin subset, SIL Open Font License).
   Metric-matched local fallbacks keep text from shifting while they load. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif Fallback";
  font-style: italic;
  src: local("Times New Roman Italic"), local("Liberation Serif Italic"), local("Georgia Italic");
  size-adjust: 87.5%;
  ascent-override: 113.1%;
  descent-override: 35.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 106.3%;
  ascent-override: 91.1%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 97%;
  ascent-override: 109.9%;
  descent-override: 30.9%;
  line-gap-override: 0%;
}

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Brand */
  --navy-950: #060E1C;
  --navy-900: #0B172A;
  --navy-800: #12223B;
  --navy-700: #1C3050;
  --blue-600: #0F66D6;
  --blue-ink: #0F66D6;   /* brand blue for small text on light backgrounds (AA 5:1) */
  --blue-btn: #106CDE;   /* button fill: white text at AA 5:1 */
  --blue-btn-hover: #0C5BC0;
  --blue-500: #1479F6;
  --blue-400: #4C9BFF;
  --blue-100: #E3EFFE;
  --blue-50:  #F1F7FF;
  --white:    #FFFFFF;
  --gray-50:  #F5F7FA;
  --gray-100: #EDF0F5;
  --gray-200: #DFE4EC;
  --gray-300: #C6CEDA;
  --gray-500: #5E6A7D;
  --gray-600: #4E5A6D;
  --gray-700: #36404F;
  --amber:    #FFC24B; /* sparing accent: ratings, highlights */

  /* Semantic */
  --color-bg: var(--white);
  --color-bg-alt: var(--gray-50);
  --color-text: var(--navy-900);
  --color-text-muted: var(--gray-600);
  --color-border: var(--gray-200);
  --color-accent: var(--blue-500);
  --color-accent-strong: var(--blue-600);

  /* Typography */
  --font-display: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;

  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-h4: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-h2: clamp(1.875rem, 1.45rem + 1.9vw, 2.875rem);
  --fs-h1: clamp(2.375rem, 1.6rem + 3.6vw, 4.25rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --container: 1240px;
  --container-narrow: 820px;

  /* Shape & depth */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(11, 23, 42, 0.06);
  --shadow-sm: 0 2px 6px rgba(11, 23, 42, 0.05), 0 1px 2px rgba(11, 23, 42, 0.04);
  --shadow-md: 0 12px 28px -12px rgba(11, 23, 42, 0.18), 0 2px 6px rgba(11, 23, 42, 0.04);
  --shadow-lg: 0 30px 60px -24px rgba(11, 23, 42, 0.28), 0 8px 20px -10px rgba(11, 23, 42, 0.1);
  --shadow-blue: 0 14px 30px -12px rgba(20, 121, 246, 0.55);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  /* Header */
  --utility-h: 40px;
  --header-h: 76px;
}

/* 2. Reset & base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img, svg, video, picture { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
:where(h1, h2, h3, h4, p, figure, blockquote) { margin: 0; }

:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--blue-500); color: var(--white); }

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 1000;
  padding: var(--space-3) var(--space-5);
  background: var(--blue-500);
  color: var(--white);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-4); }

[hidden] { display: none !important; }

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

/* 3. Typography ------------------------------------------------------------ */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: inherit;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.015em; }

p { text-wrap: pretty; }
.lead { font-size: var(--fs-lg); line-height: 1.6; color: var(--color-text-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-ink);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.text-gradient {
  background: linear-gradient(100deg, var(--blue-400) 0%, #9CC9FF 55%, var(--white) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 4. Layout primitives ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--navy-900); color: var(--white); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }

.section-head {
  display: grid;
  gap: var(--space-4);
  max-width: 680px;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head p { color: var(--color-text-muted); font-size: var(--fs-lg); }
.section--dark .section-head p { color: rgba(255, 255, 255, 0.72); }

.grid { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.stack > * + * { margin-top: var(--space-4); }

/* 5. Buttons & links ------------------------------------------------------- */
.btn {
  --btn-bg: var(--blue-btn);
  --btn-fg: var(--white);
  --btn-border: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.btn svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.btn:hover svg.icon-arrow { transform: translateX(3px); }

.btn--primary { box-shadow: var(--shadow-blue); }
.btn--primary::after {
  /* soft light sweep */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
}
.btn--primary:hover { --btn-bg: var(--blue-btn-hover); transform: translateY(-1px); }
.btn--primary:hover::after { transform: translateX(120%); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-900);
  --btn-border: var(--gray-300);
}
.btn--ghost:hover { --btn-border: var(--navy-900); transform: translateY(-1px); }

.btn--light {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: var(--white);
  --btn-border: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(6px);
}
.btn--light:hover { --btn-bg: rgba(255, 255, 255, 0.16); --btn-border: rgba(255, 255, 255, 0.5); }

.btn--white { --btn-bg: var(--white); --btn-fg: var(--navy-900); box-shadow: var(--shadow-md); }
.btn--white:hover { transform: translateY(-1px); --btn-fg: var(--blue-600); }

.btn--lg { min-height: 56px; padding: 1rem 1.875rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--blue-ink);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

.icon { width: 20px; height: 20px; }

/* 6. Utility bar ----------------------------------------------------------- */
.utility-bar {
  position: relative;
  z-index: 60;
  height: var(--utility-h);
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-5);
}
.utility-bar__group { display: flex; align-items: center; gap: var(--space-5); }
.utility-bar__item { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.utility-bar__item svg { width: 14px; height: 14px; color: var(--blue-400); }
.utility-bar a:hover { color: var(--white); }
.utility-bar__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}
.utility-bar__secondary { display: none; }

@media (min-width: 900px) {
  .utility-bar__secondary { display: flex; }
}
@media (max-width: 599px) {
  .utility-bar__hide-sm { display: none; }
  .utility-bar .container { justify-content: center; }
}

/* 7. Header & desktop navigation ------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--white);
  background: transparent;
  transition:
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* The header overlaps the dark hero below it, then turns solid on scroll. */
.site-header ~ main { margin-top: calc(var(--header-h) * -1); }

.site-header.is-scrolled {
  color: var(--navy-900);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--gray-200);
  box-shadow: 0 6px 24px -14px rgba(11, 23, 42, 0.25);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 100%;
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  flex-shrink: 0;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--blue-400) 0%, var(--blue-500) 45%, var(--blue-600) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 18px -8px rgba(20, 121, 246, 0.8);
  transition: transform var(--dur) var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.04); }
.brand__mark svg { width: 22px; height: 22px; color: var(--white); }
.brand__text { display: grid; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.03em;
}
.brand__tag {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Primary nav (desktop) */
.primary-nav { display: none; }

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav__item { position: relative; }

.primary-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: inherit;
  border-radius: var(--radius-sm);
  opacity: 0.86;
  transition: opacity var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.primary-nav__link:hover,
.primary-nav__link[aria-current="page"],
.primary-nav__link[aria-expanded="true"] { opacity: 1; }
.primary-nav__link:hover::after,
.primary-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav__link .chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease);
}
.primary-nav__link[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.primary-nav__link--toggle::after { right: 1.7rem; }

/* Mega dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: min(760px, 94vw);
  padding: var(--space-3);
  color: var(--navy-900);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}
.dropdown::before {
  /* hover bridge between the trigger and the panel */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -16px;
  height: 16px;
}
.primary-nav__item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.dropdown__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.dropdown__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dropdown__heading {
  padding: 0.6rem 0.85rem 0.35rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.dropdown__heading a:hover { color: var(--blue-ink); }
.dropdown__group + .dropdown__group { border-left: 1px solid var(--gray-100); padding-left: var(--space-3); }
.dropdown__link { padding: 0.7rem 0.85rem; }
.dropdown__link {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem;
  border-radius: var(--radius);
  transition: background-color var(--dur-fast) var(--ease);
}
.dropdown__link:hover,
.dropdown__link:focus-visible { background: var(--gray-50); }
.dropdown__link[aria-current="page"] { background: var(--blue-50); }
.dropdown__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--blue-50);
  color: var(--blue-500);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dropdown__link:hover .dropdown__icon { background: var(--blue-500); color: var(--white); }
.dropdown__icon svg { width: 20px; height: 20px; }
.dropdown__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.dropdown__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--gray-500);
}
.dropdown__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-2);
  padding: 0.9rem 1rem;
  background: var(--gray-50);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--gray-600);
}

/* Header actions */
.header-actions { display: flex; align-items: center; gap: var(--space-3); }

.header-phone {
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  line-height: 1.15;
}
.header-phone__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid currentColor;
  border-color: rgba(255, 255, 255, 0.25);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.is-scrolled .header-phone__icon { border-color: var(--gray-200); }
.header-phone:hover .header-phone__icon { background: var(--blue-500); border-color: var(--blue-500); color: var(--white); }
.header-phone__icon svg { width: 16px; height: 16px; }
.header-phone__label { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.header-phone__number { display: block; font-size: 0.9875rem; font-weight: 800; letter-spacing: -0.01em; }

.header-cta { display: none; }

/* Compact phone button (mobile) */
.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.is-scrolled .icon-btn { border-color: var(--gray-200); }
.icon-btn:hover { background: rgba(127, 127, 127, 0.12); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn--accent { background: var(--blue-500); border-color: var(--blue-500); color: var(--white); }
.is-scrolled .icon-btn--accent { border-color: var(--blue-500); }
.icon-btn--accent:hover { background: var(--blue-600); }

/* Hamburger */
.menu-toggle__bars {
  position: relative;
  width: 20px;
  height: 14px;
}
.menu-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), width var(--dur) var(--ease);
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 6px; width: 70%; }
.menu-toggle__bars span:nth-child(3) { top: 12px; }
.menu-toggle:hover .menu-toggle__bars span:nth-child(2) { width: 100%; }

@media (min-width: 640px) {
  .header-cta { display: inline-flex; }
}
@media (min-width: 1100px) {
  .primary-nav { display: block; }
  .header-phone { display: inline-flex; }
  .menu-toggle, .header-call-compact { display: none; }
}
@media (min-width: 1100px) and (max-width: 1239px) {
  .header-phone__text { display: none; }
}

/* 8. Mobile menu ----------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-slow);
}
.mobile-menu.is-open { visibility: visible; transition-delay: 0s; }

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 14, 28, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }

.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  background: var(--navy-900);
  background-image:
    radial-gradient(120% 60% at 100% 0%, rgba(20, 121, 246, 0.22) 0%, transparent 60%);
  color: var(--white);
  transform: translateX(100%);
  transition: transform 520ms var(--ease-out);
  box-shadow: -30px 0 60px -20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.mobile-menu__close svg { width: 22px; height: 22px; }

.mobile-menu__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--gutter) var(--space-6);
}

.mobile-nav { margin: 0; padding: 0; list-style: none; }
.mobile-nav > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 400ms var(--ease), transform 500ms var(--ease-out);
}
.mobile-menu.is-open .mobile-nav > li { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-nav > li:nth-child(1) { transition-delay: 90ms; }
.mobile-menu.is-open .mobile-nav > li:nth-child(2) { transition-delay: 130ms; }
.mobile-menu.is-open .mobile-nav > li:nth-child(3) { transition-delay: 170ms; }
.mobile-menu.is-open .mobile-nav > li:nth-child(4) { transition-delay: 210ms; }
.mobile-menu.is-open .mobile-nav > li:nth-child(5) { transition-delay: 250ms; }
.mobile-menu.is-open .mobile-nav > li:nth-child(6) { transition-delay: 290ms; }

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.05rem 0;
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--white);
}
.mobile-nav__link[aria-current="page"] { color: var(--blue-400); }
.mobile-nav__link svg {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.5);
  transition: transform var(--dur) var(--ease);
}
.mobile-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--blue-400); }

.mobile-subnav {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.mobile-subnav.is-open { grid-template-rows: 1fr; }
.mobile-subnav > ul {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mobile-subnav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.75);
}
.mobile-subnav a:hover,
.mobile-subnav a[aria-current="page"] { color: var(--white); }
.mobile-subnav a svg { width: 18px; height: 18px; color: var(--blue-400); }
.mobile-subnav li:last-child a { padding-bottom: 1.1rem; }

.mobile-menu__foot {
  flex-shrink: 0;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 14, 28, 0.4);
}
.mobile-menu__meta {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
}

/* 9. Heroes ---------------------------------------------------------------- */
.hero,
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-900);
}

/* Layered backdrop shared by both hero variants */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 60% at 85% 10%, rgba(20, 121, 246, 0.34) 0%, transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(20, 121, 246, 0.16) 0%, transparent 70%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%);
}
.hero__bg::before {
  /* fine blueprint grid */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 75%);
}
.hero__bg::after {
  /* bottom fade line */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(76, 155, 255, 0.5), transparent);
}

/* Animated circuit traces (decorative) */
.hero__circuit {
  position: absolute;
  top: 0;
  right: -6%;
  width: min(760px, 70vw);
  height: 100%;
  z-index: -1;
  opacity: 0.55;
  pointer-events: none;
}
.hero__circuit path { fill: none; stroke: rgba(76, 155, 255, 0.28); stroke-width: 1.25; }
.hero__circuit .pulse {
  stroke: var(--blue-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 60 1400;
  stroke-dashoffset: 1460;
  filter: drop-shadow(0 0 6px rgba(76, 155, 255, 0.9));
  animation: circuit-flow 6s linear infinite;
}
.hero__circuit .pulse:nth-of-type(2n) { animation-delay: -2s; animation-duration: 7.5s; }
.hero__circuit .pulse:nth-of-type(3n) { animation-delay: -4s; animation-duration: 9s; }
.hero__circuit circle { fill: var(--navy-900); stroke: rgba(76, 155, 255, 0.55); stroke-width: 1.5; }
@keyframes circuit-flow { to { stroke-dashoffset: 0; } }

.hero__inner {
  display: grid;
  align-content: center;
  gap: var(--space-6);
  min-height: min(92vh, 860px);
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
.hero__content { display: grid; gap: var(--space-5); max-width: 760px; }
.hero__content .eyebrow { color: var(--blue-400); }
.hero__lead { font-size: var(--fs-lg); color: rgba(255, 255, 255, 0.74); max-width: 600px; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  padding: 0.4rem 0.9rem 0.4rem 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
}
.hero__badge strong {
  padding: 0.2rem 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--blue-500);
  border-radius: var(--radius-pill);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-3) 0 0;
  padding: var(--space-5) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.78);
}
.trust-row li { display: inline-flex; align-items: center; gap: 0.5rem; }
.trust-row svg { width: 18px; height: 18px; color: var(--blue-400); }

/* Interior page hero */
.page-hero__inner {
  display: grid;
  gap: var(--space-4);
  padding-top: calc(var(--header-h) + clamp(3.5rem, 2.5rem + 4vw, 6.5rem));
  padding-bottom: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  max-width: 820px;
}
.page-hero .eyebrow { color: var(--blue-400); }
.page-hero h1 { font-size: clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem); }
.page-hero__lead { font-size: var(--fs-lg); color: rgba(255, 255, 255, 0.74); max-width: 640px; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
}
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.5; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, 0.9); }

/* 10. Sections, cards, CTA band ------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card p { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Service card: whole card is clickable via stretched link */
.service-card { overflow: hidden; }
.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--ease-out);
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--blue-50);
  color: var(--blue-500);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.service-card__icon svg { width: 26px; height: 26px; }
.service-card:hover .service-card__icon { background: var(--blue-500); color: var(--white); transform: rotate(-4deg); }
.service-card h3 { font-size: var(--fs-h4); }
.service-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.service-card .link-arrow { margin-top: auto; }

/* CTA band */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  color: var(--white);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(76, 155, 255, 0.45) 0%, transparent 55%),
    linear-gradient(135deg, var(--blue-600) 0%, var(--blue-500) 55%, #2B8BFF 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(90deg, transparent 30%, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.cta-band h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
.cta-band p { color: rgba(255, 255, 255, 0.85); font-size: var(--fs-lg); margin-top: var(--space-3); max-width: 560px; }
@media (min-width: 900px) {
  .cta-band { grid-template-columns: 1fr auto; gap: var(--space-7); }
}

/* 11. Forms ---------------------------------------------------------------- */
.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.45rem; }
.field__label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy-900);
}
.field__label .req { color: var(--blue-ink); }
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  color: var(--navy-900);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  appearance: none;
}
.field__textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.field__select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B778A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
}
.field__input::placeholder,
.field__textarea::placeholder { color: var(--gray-500); }
.field__input:hover,
.field__select:hover,
.field__textarea:hover { border-color: var(--gray-500); }
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(20, 121, 246, 0.15);
}
.field.is-invalid .field__input,
.field.is-invalid .field__select,
.field.is-invalid .field__textarea { border-color: #D93B3B; }
.field__error { font-size: var(--fs-xs); color: #C42F2F; }
.field__hint { font-size: var(--fs-xs); color: var(--gray-500); }

/* 12. Footer --------------------------------------------------------------- */
.site-footer {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  background: var(--navy-950);
  font-size: var(--fs-sm);
}
.site-footer a { transition: color var(--dur-fast) var(--ease); }
.site-footer a:hover { color: var(--white); }

.footer-cta { padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); }

.footer-main {
  display: grid;
  gap: var(--space-7) var(--space-6);
  padding-block: var(--space-8) var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .footer-main { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; max-width: 520px; }
}

.footer-brand { display: grid; gap: var(--space-5); align-content: start; max-width: 360px; }
.footer-brand .brand { color: var(--white); }
.footer-brand p { line-height: 1.7; }

.footer-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.footer-badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
}
.footer-badges svg { width: 14px; height: 14px; color: var(--blue-400); }

.footer-col h2 {
  margin-bottom: var(--space-5);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}
.footer-links { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }

.footer-contact { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.footer-contact li { display: flex; gap: 0.8rem; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; margin-top: 3px; color: var(--blue-400); }
.footer-contact strong { display: block; color: var(--white); font-weight: 600; }

.footer-social { display: flex; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--blue-500); border-color: var(--blue-500); }
.footer-social svg { width: 17px; height: 17px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }

/* Mobile sticky call bar */
.mobile-callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -8px 24px -12px rgba(11, 23, 42, 0.2);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}
.mobile-callbar.is-visible { transform: none; }
.mobile-callbar .btn { min-height: 46px; }
@media (min-width: 640px) { .mobile-callbar { display: none; } }
@media (max-width: 639px) { .site-footer { padding-bottom: 72px; } }

/* 13. Motion & utilities --------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease), transform 800ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

.hero .reveal-load {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 900ms var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

@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;
    transition-delay: 0ms !important;
  }
  .reveal, .hero .reveal-load { opacity: 1; transform: none; }
  .hero__circuit .pulse { display: none; }
}

.text-center { text-align: center; }
.mt-6 { margin-top: var(--space-6); }

/* 14. Homepage sections ---------------------------------------------------- */

/* Optional photography ------------------------------------------------------
   Any <img data-optional-img> fades in once loaded. If the file is missing,
   main.js removes it and the designed fallback underneath stays visible. */
[data-optional-img] {
  opacity: 0;
  color: transparent; /* never render alt text over the fallback art */
  transition: opacity 900ms var(--ease);
}
[data-optional-img].is-loaded { opacity: 1; }

/* Home hero */
.hero--home .hero__inner {
  grid-template-columns: 1fr;
  align-items: center;
  min-height: 0;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5.5rem));
  padding-bottom: clamp(6.5rem, 5rem + 5vw, 9.5rem); /* room for the trust strip overlap */
}
.hero--home h1 { font-size: clamp(2.25rem, 1.45rem + 3.4vw, 4rem); max-width: 15ch; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}
.hero__media:has(img)::after {
  /* elegant dark overlay: strongest behind the copy, lighter toward the photo */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 14, 28, 0.95) 0%, rgba(11, 23, 42, 0.86) 38%, rgba(11, 23, 42, 0.45) 75%, rgba(11, 23, 42, 0.3) 100%),
    linear-gradient(0deg, rgba(6, 14, 28, 0.85) 0%, transparent 35%);
}
@media (max-width: 899px) {
  .hero__media:has(img)::after {
    background: linear-gradient(180deg, rgba(6, 14, 28, 0.82) 0%, rgba(11, 23, 42, 0.88) 55%, rgba(6, 14, 28, 0.96) 100%);
  }
}
.hero__media:has(img) ~ .hero__circuit { display: none; }

/* Quick-route panel on the right of the hero */
.hero-panel {
  display: none;
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.hero-panel__title {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.hero-panel ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hero-panel a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem;
  border-radius: var(--radius);
  transition: background-color var(--dur-fast) var(--ease);
}
.hero-panel a:hover { background: rgba(255, 255, 255, 0.08); }
.hero-panel__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(20, 121, 246, 0.18);
  color: var(--blue-400);
}
.hero-panel__icon svg { width: 20px; height: 20px; }
.hero-panel__text { flex: 1; display: grid; line-height: 1.3; }
.hero-panel__text strong { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; }
.hero-panel__text span { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.6); }
.hero-panel a > svg:last-child { width: 16px; height: 16px; color: rgba(255, 255, 255, 0.4); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.hero-panel a:hover > svg:last-child { transform: translateX(3px); color: var(--white); }

@media (min-width: 1024px) {
  .hero--home .hero__inner {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
    gap: clamp(3rem, 5vw, 6rem);
    min-height: min(86vh, 800px);
  }
  .hero-panel { display: block; }
}

/* Trust strip (overlaps the bottom of the hero) */
.trust-strip {
  position: relative;
  z-index: 2;
  margin-top: calc(clamp(4rem, 3rem + 3vw, 6rem) * -1);
}
.trust-strip__list {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: var(--space-2) clamp(1.25rem, 1rem + 1vw, 2rem);
  list-style: none;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.trust-strip__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) 0;
}
.trust-strip__item + .trust-strip__item { border-top: 1px solid var(--gray-100); }
.trust-strip__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--blue-50);
  color: var(--blue-500);
}
.trust-strip__icon svg { width: 22px; height: 22px; }
.trust-strip h3 { font-size: 1.0625rem; letter-spacing: -0.015em; margin-bottom: 0.25rem; }
.trust-strip p { font-size: var(--fs-sm); line-height: 1.55; color: var(--color-text-muted); }

@media (min-width: 700px) {
  .trust-strip__list { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
  .trust-strip__item:nth-child(2) { border-top: 0; }
}
@media (min-width: 1100px) {
  .trust-strip__list { grid-template-columns: repeat(4, 1fr); column-gap: 0; padding: var(--space-3) var(--space-2); }
  .trust-strip__item { flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-5); }
  .trust-strip__item + .trust-strip__item { border-top: 0; border-left: 1px solid var(--gray-100); }
}

/* Split section head: title left, action right */
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5) var(--space-7);
  max-width: none;
}
.section-head--split > div { display: grid; gap: var(--space-4); max-width: 640px; }

/* Category (Residential / Commercial) image cards */
.category-grid { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); }
@media (min-width: 860px) { .category-grid { grid-template-columns: 1fr 1fr; } }

.category-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(440px, 380px + 12vw, 560px);
  padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
  overflow: hidden;
  color: var(--white);
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.category-card__media { position: absolute; inset: 0; z-index: -1; }
.category-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 900ms var(--ease), transform 1200ms var(--ease-out);
}
.category-card:hover .category-card__media img { transform: scale(1.045); }
.category-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 14, 28, 0.1) 0%, rgba(6, 14, 28, 0.35) 40%, rgba(6, 14, 28, 0.94) 100%);
}

/* Designed fallback when no photo is present */
.category-card__art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 85% 10%, rgba(20, 121, 246, 0.45) 0%, transparent 60%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
}
.category-card__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 80% 20%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 80% 20%, #000 10%, transparent 70%);
}
.category-card__art svg {
  position: absolute;
  top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  right: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  width: 34%;
  max-width: 190px;
  height: auto;
  color: var(--blue-400);
  opacity: 0.55;
  stroke-width: 0.9;
  transition: transform 1200ms var(--ease-out), opacity var(--dur) var(--ease);
}
.category-card:hover .category-card__art svg { transform: translateY(-6px) scale(1.03); opacity: 0.75; }

.category-card__body { display: grid; gap: var(--space-4); max-width: 500px; }
.category-card__body .eyebrow { color: var(--blue-400); }
.category-card h3 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.category-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.category-card p { color: rgba(255, 255, 255, 0.78); }
.category-card .link-arrow { color: var(--white); }

.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chip-list li {
  padding: 0.35rem 0.8rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
}

/* Small audience tags on service cards */
.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.tag {
  padding: 0.2rem 0.6rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
}
.section--alt .service-card .tag { background: var(--white); }
.service-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }

/* Why choose us */
.why {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 60% at 0% 0%, rgba(20, 121, 246, 0.22) 0%, transparent 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(20, 121, 246, 0.14) 0%, transparent 70%);
}
.why__layout { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: start; }
@media (min-width: 1024px) {
  .why__layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .why__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.why__intro { display: grid; gap: var(--space-5); }
.why__intro .eyebrow { color: var(--blue-400); }
.why__intro p { color: rgba(255, 255, 255, 0.72); font-size: var(--fs-lg); }

.feature-grid { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
.feature {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feature:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(76, 155, 255, 0.35); transform: translateY(-3px); }
.feature__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-2);
  border-radius: 14px;
  color: var(--white);
  background: linear-gradient(145deg, var(--blue-400), var(--blue-600));
  box-shadow: 0 10px 22px -10px rgba(20, 121, 246, 0.9);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.1875rem; letter-spacing: -0.015em; }
.feature p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.68); }

/* Process steps */
.process { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.process__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
  padding-bottom: var(--space-6);
}
.process__step:last-child { padding-bottom: 0; }
.process__num {
  position: relative;
  z-index: 1;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--blue-ink);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.process__step:hover .process__num { background: var(--blue-btn); color: var(--white); border-color: var(--blue-btn); }
.process__step::before {
  /* connector line */
  content: "";
  position: absolute;
  top: 56px;
  bottom: 0;
  left: 27px;
  width: 2px;
  background: linear-gradient(180deg, var(--blue-100), var(--gray-200));
}
.process__step:last-child::before { display: none; }
.process__step h3 { font-size: var(--fs-h4); align-self: end; }
.process__step p { font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 46ch; }

@media (min-width: 900px) {
  .process { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  .process__step { grid-template-columns: 1fr; gap: var(--space-3); padding-bottom: 0; }
  .process__num { grid-row: auto; margin-bottom: var(--space-3); }
  .process__step::before {
    top: 27px;
    bottom: auto;
    left: 72px;
    right: calc(var(--space-6) * -1 + 16px);
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-100), var(--gray-200));
  }
}

/* Service area */
.area__layout { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 960px) { .area__layout { grid-template-columns: 1.05fr 0.95fr; } }
.area__content { display: grid; gap: var(--space-5); }
.area__content > p { color: var(--color-text-muted); font-size: var(--fs-lg); }

.area-list h3 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.area-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.area-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
}
.area-chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); }
.area-chips:empty, .area-list:has(.area-chips:empty) { display: none; }

.area-note {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.area-note > svg { width: 22px; height: 22px; margin-top: 2px; color: var(--blue-500); }
.area-note p { font-size: var(--fs-sm); color: var(--color-text-muted); }
.area-note strong { display: block; margin-bottom: 0.15rem; font-family: var(--font-display); font-size: 1rem; color: var(--navy-900); }

.area-map {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  width: 100%;
  margin-inline: auto;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 60% 55%, rgba(20, 121, 246, 0.3) 0%, transparent 70%),
    linear-gradient(160deg, var(--navy-800), var(--navy-950));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.area-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.area-map > svg { position: absolute; inset: 8%; width: 84%; height: 84%; }
.area-map .fl-shape {
  fill: rgba(20, 121, 246, 0.16);
  stroke: var(--blue-400);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 18px rgba(20, 121, 246, 0.45));
}
.area-map__label {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
}
.area-map__label svg { width: 16px; height: 16px; color: var(--blue-400); }

/* Reviews (hidden until real testimonials are supplied) */
.review-grid { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); }
@media (min-width: 900px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.review__stars { display: flex; gap: 2px; color: var(--amber); }
.review__stars svg { width: 18px; height: 18px; fill: currentColor; }
.review blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--navy-900); }
.review figcaption { margin-top: auto; display: grid; font-size: var(--fs-sm); color: var(--gray-500); }
.review figcaption strong { font-family: var(--font-display); color: var(--navy-900); }

/* Final CTA */
.final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 3.5rem + 6vw, 8.5rem);
  color: var(--white);
  text-align: center;
  background: var(--navy-900);
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 70% at 50% 110%, rgba(20, 121, 246, 0.55) 0%, transparent 70%),
    radial-gradient(30% 40% at 10% 0%, rgba(20, 121, 246, 0.18) 0%, transparent 70%);
}
.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, #000 10%, transparent 70%);
}
.final-cta__inner { display: grid; justify-items: center; gap: var(--space-5); max-width: 760px; margin-inline: auto; }
.final-cta__mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-2);
  border-radius: 18px;
  background: linear-gradient(145deg, var(--blue-400), var(--blue-600));
  box-shadow: 0 0 0 10px rgba(20, 121, 246, 0.12), 0 20px 40px -12px rgba(20, 121, 246, 0.8);
}
.final-cta__mark svg { width: 30px; height: 30px; color: var(--white); }
.final-cta h2 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); }
.final-cta p { font-size: var(--fs-lg); color: rgba(255, 255, 255, 0.74); max-width: 580px; }
.final-cta .btn-row { justify-content: center; margin-top: var(--space-2); }
.final-cta__alt { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.6); }
.final-cta__alt a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.35); }
.final-cta__alt a:hover { text-decoration-color: var(--white); }

@media (max-width: 479px) {
  .hero .btn-row .btn, .final-cta .btn-row .btn { width: 100%; }
}

/* Homepage: small-screen refinements */
@media (max-width: 699px) {
  .trust-strip__list { grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); padding: var(--space-2) var(--space-4); }
  .trust-strip__item { flex-direction: column; gap: var(--space-3); padding: var(--space-4) 0; }
  .trust-strip__item:nth-child(2) { border-top: 0; }
  .trust-strip__icon { width: 40px; height: 40px; border-radius: 11px; }
  .trust-strip__icon svg { width: 20px; height: 20px; }
  .trust-strip h3 { font-size: 0.9375rem; line-height: 1.3; margin: 0; }
  .trust-strip p { display: none; }
}
@media (max-width: 639px) {
  .category-card { min-height: 0; padding-top: clamp(150px, 42vw, 220px); }
  .category-card__art svg { top: 1.5rem; right: 1.5rem; width: 30%; }
}

/* 15. Service & detail pages ----------------------------------------------- */

/* Interior hero with optional photo and an "at a glance" aside */
.page-hero--media .hero__media img { object-position: center; }
.page-hero--media .hero__media:has(img)::after {
  background:
    linear-gradient(90deg, rgba(6, 14, 28, 0.94) 0%, rgba(11, 23, 42, 0.84) 45%, rgba(11, 23, 42, 0.5) 100%),
    linear-gradient(0deg, rgba(6, 14, 28, 0.7) 0%, transparent 40%);
}
@media (max-width: 899px) {
  .page-hero--media .hero__media:has(img)::after { background: rgba(8, 17, 32, 0.86); }
}
.page-hero__grid { display: grid; gap: var(--space-7); align-items: center; }
.page-hero__grid .page-hero__inner { max-width: 760px; }
.page-hero__grid .hero-panel { margin-top: var(--space-6); }
@media (min-width: 1024px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.75fr); gap: clamp(3rem, 5vw, 6rem); }
  .page-hero__grid .hero-panel { margin-top: calc(var(--header-h) + 1.5rem); }
}

.hero-checklist { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.hero-checklist li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.hero-checklist svg { width: 18px; height: 18px; margin-top: 2px; color: var(--blue-400); }

.hero-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.hero-chips li {
  padding: 0.35rem 0.8rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
}
@media (min-width: 1024px) { .hero-chips { display: none; } }

/* Prose + side card layout */
.split { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }

.prose { display: grid; gap: var(--space-5); }
.prose > p { color: var(--color-text-muted); font-size: var(--fs-lg); line-height: 1.7; }
.prose > p:first-of-type { color: var(--navy-900); }

.panel-card {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.panel-card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-5); }
@media (min-width: 960px) { .panel-card--sticky { position: sticky; top: calc(var(--header-h) + 1.5rem); } }

.checklist { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.checklist li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.55; color: var(--gray-700); }
.checklist svg { width: 20px; height: 20px; margin-top: 1px; color: var(--blue-500); }

/* Benefit cards */
.benefit { gap: var(--space-3); }
.benefit .service-card__icon { width: 48px; height: 48px; border-radius: 14px; margin-bottom: var(--space-2); }
.benefit .service-card__icon svg { width: 22px; height: 22px; }
.benefit h3 { font-size: 1.125rem; letter-spacing: -0.015em; }

/* Signs list */
.signs { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .signs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .signs { grid-template-columns: repeat(3, 1fr); } }
.signs li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy-900);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.signs__num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--blue-ink);
  background: var(--blue-50);
  border-radius: 50%;
}

/* Safety callout */
.callout {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #5A4410;
  background: #FFF8E8;
  border: 1px solid #F6DFA6;
  border-radius: var(--radius);
}
.callout svg { width: 22px; height: 22px; margin-top: 1px; color: #C98A00; }
.callout strong { color: #3D2E08; }

/* Process with a custom step count: <ol class="process process--custom" style="--steps: 5"> */
@media (min-width: 900px) {
  .process--custom { grid-template-columns: repeat(var(--steps, 4), 1fr); }
}
.process-note { margin-top: var(--space-6); font-size: var(--fs-sm); color: var(--gray-500); text-align: center; }

/* FAQ accordion (native <details>, no JS needed) */
.faq { display: grid; gap: var(--space-3); }
.faq details {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq details[open] { border-color: var(--blue-100); box-shadow: var(--shadow-md); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231479F6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue-600); }
.faq__answer { padding: 0 var(--space-6) var(--space-5); color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.7; }
@media (max-width: 599px) {
  .faq summary { padding: var(--space-4) var(--space-5); font-size: 1rem; }
  .faq__answer { padding: 0 var(--space-5) var(--space-4); }
}

/* Service cards with highlight list (residential overview) */
.service-card__list { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.service-card__list li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: var(--fs-xs); font-weight: 500; color: var(--gray-700); }
.service-card__list svg { width: 16px; height: 16px; margin-top: 1px; color: var(--blue-500); }

.section-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-7); }

/* Footer with separate residential / commercial columns */
@media (min-width: 1024px) and (max-width: 1199px) {
  .footer-brand { grid-column: 1 / -1; max-width: 560px; }
}
@media (min-width: 1200px) {
  .footer-main { grid-template-columns: 1.35fr 1fr 1.05fr 0.75fr 1.1fr; gap: var(--space-7) var(--space-5); }
  .footer-brand { grid-column: auto; }
}

/* Grouped mobile sub-navigation */
.mobile-subnav__heading a {
  padding-top: 0.9rem !important;
  font-family: var(--font-display);
  font-size: 0.6875rem !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* 16. Commercial pages ----------------------------------------------------- */

/* Hero that leaves room for an overlapping strip */
.page-hero--overlap .page-hero__inner { padding-bottom: clamp(6.5rem, 5rem + 4vw, 9rem); }

/* Audience panel */
.audience-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.audience-list li { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--gray-100); }
.audience-list li:first-child { border-top: 0; padding-top: 0; }
.audience-list .trust-strip__icon { width: 42px; height: 42px; border-radius: 12px; }
.audience-list strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--navy-900); }
.audience-list p { font-size: var(--fs-sm); line-height: 1.55; color: var(--color-text-muted); }

/* Bento grid of commercial service tiles */
.bento { display: grid; gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento > :first-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento > :nth-child(1), .bento > :nth-child(2) { grid-column: span 3; }
  .bento > :nth-child(n+3) { grid-column: span 2; }
}

.svc-tile {
  --tile-fg: var(--navy-900);
  --tile-muted: var(--gray-600);
  --tile-line: var(--gray-200);
  --tile-accent: var(--blue-ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 300px;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
  color: var(--tile-fg);
  background: var(--white);
  border: 1px solid var(--tile-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.svc-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.svc-tile--dark {
  --tile-fg: var(--white);
  --tile-muted: rgba(255, 255, 255, 0.72);
  --tile-line: rgba(255, 255, 255, 0.12);
  --tile-accent: var(--blue-400);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(20, 121, 246, 0.4) 0%, transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy-950));
  border-color: transparent;
}
.svc-tile--blue {
  --tile-fg: var(--white);
  --tile-muted: rgba(255, 255, 255, 0.85);
  --tile-line: rgba(255, 255, 255, 0.22);
  --tile-accent: var(--white);
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(76, 155, 255, 0.55) 0%, transparent 60%),
    linear-gradient(135deg, var(--blue-600), var(--blue-500));
  border-color: transparent;
}
.svc-tile--tint { background: linear-gradient(180deg, var(--blue-50), var(--white) 70%); border-color: var(--blue-100); }
.svc-tile--dark::after, .svc-tile--blue::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 60% 70% at 90% 10%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 90% 10%, #000 10%, transparent 70%);
}
.svc-tile__top { display: flex; align-items: center; justify-content: space-between; }
.svc-tile__num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--tile-muted);
}
.svc-tile__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  color: var(--tile-accent);
  background: color-mix(in srgb, var(--tile-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tile-accent) 22%, transparent);
  transition: transform var(--dur) var(--ease);
}
.svc-tile:hover .svc-tile__icon { transform: rotate(-6deg); }
.svc-tile__icon svg { width: 26px; height: 26px; }
.svc-tile h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); margin-top: auto; }
.svc-tile h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc-tile p { color: var(--tile-muted); font-size: var(--fs-sm); max-width: 52ch; }
.svc-tile__scope { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.svc-tile__scope li {
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tile-fg);
  border: 1px solid var(--tile-line);
  border-radius: var(--radius-pill);
}
.svc-tile .link-arrow { color: var(--tile-accent); }
@media (min-width: 1100px) {
  .bento > :nth-child(-n+2) { min-height: 360px; }
  .bento > :nth-child(-n+2) h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
}

/* Industry applications */
.industry-grid { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .industry-grid { grid-template-columns: repeat(3, 1fr); } }
.industry {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.industry:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(76, 155, 255, 0.35); }
.industry__head { display: flex; align-items: center; gap: var(--space-4); }
.industry__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: var(--blue-400);
  background: rgba(20, 121, 246, 0.16);
  border: 1px solid rgba(76, 155, 255, 0.25);
}
.industry__icon svg { width: 22px; height: 22px; }
.industry h3 { font-size: 1.1875rem; letter-spacing: -0.015em; }
.industry p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.68); }
.industry__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.industry__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--blue-400);
}
.industry__links a:hover { color: var(--white); }
.industry__links svg { width: 13px; height: 13px; }

/* Consultation CTA */
.consult {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  color: var(--white);
  background:
    radial-gradient(60% 90% at 100% 100%, rgba(20, 121, 246, 0.5) 0%, transparent 65%),
    radial-gradient(40% 60% at 0% 0%, rgba(20, 121, 246, 0.2) 0%, transparent 70%),
    var(--navy-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.consult::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent 20%, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000);
}
@media (min-width: 960px) { .consult { grid-template-columns: 1.2fr 0.8fr; align-items: center; } }
.consult__copy { display: grid; gap: var(--space-5); }
.consult__copy .eyebrow { color: var(--blue-400); }
.consult h2 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); }
.consult__copy > p { color: rgba(255, 255, 255, 0.76); font-size: var(--fs-lg); max-width: 560px; }
.consult__list {
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
}
.consult__list .hero-checklist { margin-bottom: 0; }
.panel-card__sub {
  margin: var(--space-6) 0 var(--space-3) !important;
  padding-top: var(--space-5);
  border-top: 1px solid var(--gray-100);
  font-size: var(--fs-xs) !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.hero-panel .hero-checklist { gap: var(--space-3); margin-bottom: var(--space-5); }
@media (min-width: 900px) {
  .process--custom .process__step h3 { align-self: start; min-height: 2.5em; display: flex; align-items: flex-end; }
}

/* 17. Contact & estimate form ---------------------------------------------- */
.mini-steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.mini-steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.mini-steps strong { display: block; font-family: var(--font-display); font-size: 0.9375rem; color: var(--white); }
.mini-steps span:not(.mini-step__num) { display: block; font-size: var(--fs-xs); line-height: 1.5; color: rgba(255, 255, 255, 0.65); }
.mini-step__num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--white);
  background: var(--blue-btn);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(20, 121, 246, 0.2);
}

/* Tap-to-call card (mobile & tablet) */
.call-card-wrap { position: relative; z-index: 2; margin-top: calc(var(--space-6) * -1); }
.call-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  color: var(--white);
  background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-blue);
}
.call-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.call-card__icon svg { width: 22px; height: 22px; }
.call-card__text { flex: 1; display: grid; line-height: 1.3; }
.call-card__text strong { font-family: var(--font-display); font-size: 1rem; }
.call-card__text span { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.call-card > svg:last-child { width: 20px; height: 20px; }
@media (min-width: 1024px) { .call-card-wrap { display: none !important; } }

/* Layout */
.contact-layout { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr); }
  .contact-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.contact-aside { display: grid; gap: var(--space-5); }
.contact-aside .callout { margin-top: 0; }
.panel-card--flat { box-shadow: none; }
.panel-card .h4 { margin-bottom: var(--space-5); }

.contact-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--gray-100); }
.contact-list li:first-child { padding-top: 0; border-top: 0; }
.contact-list__icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; color: var(--blue-500); background: var(--blue-50); }
.contact-list__icon svg { width: 19px; height: 19px; }
.contact-list__label { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500); }
.contact-list__value { display: block; font-family: var(--font-display); font-weight: 700; color: var(--navy-900); overflow-wrap: anywhere; }
.contact-list__value a:hover { color: var(--blue-600); }
.contact-list__value small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-xs); color: var(--gray-500); }
.is-placeholder { font-family: var(--font-body); font-weight: 500; font-style: italic; color: var(--gray-500); }

.link-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.link-list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.75rem 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.link-list a:hover { background: var(--gray-50); color: var(--blue-600); }
.link-list svg { width: 18px; height: 18px; color: var(--blue-500); }
.link-list svg:last-child { margin-left: auto; width: 16px; height: 16px; color: var(--gray-500); }
.callout--compact { padding: var(--space-5); }

/* Form panel */
.form-panel {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.form-panel__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.form-panel__head h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.form-panel__head p { color: var(--color-text-muted); font-size: var(--fs-sm); }
.req { color: var(--blue-ink); font-weight: 700; }

.estimate-form { gap: var(--space-6); }
.form__group { display: grid; gap: var(--space-5); margin: 0; padding: 0; border: 0; min-width: 0; }
.form__legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-1);
  padding: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-100);
}
.form__legend + * { clear: both; }
.form__legend .field__optional { letter-spacing: 0; text-transform: none; }
.field__optional { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 400; color: var(--gray-500); }
.field__hint { display: flex; justify-content: space-between; gap: var(--space-4); }
.field__count { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.field__error { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; }
.field__error::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C42F2F' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field.is-invalid .field__input:focus,
.field.is-invalid .field__textarea:focus { box-shadow: 0 0 0 4px rgba(217, 59, 59, 0.15); }

/* Radio "pill" choices */
.choice-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1.15rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.choice span svg { width: 17px; height: 17px; color: var(--gray-500); }
.choice:hover span { border-color: var(--gray-500); }
.choice input:checked + span { color: var(--blue-600); background: var(--blue-50); border-color: var(--blue-500); }
.choice input:checked + span svg { color: var(--blue-500); }
.choice input:focus-visible + span { box-shadow: 0 0 0 4px rgba(20, 121, 246, 0.2); border-color: var(--blue-500); }

/* Honeypot: removed from view and from the accessibility tree */
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Summary & states */
.form-summary {
  padding: var(--space-5);
  color: #7A1F1F;
  background: #FDF1F1;
  border: 1px solid #F3C9C9;
  border-left: 4px solid #D93B3B;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.form-summary ul { margin: var(--space-2) 0 0; padding-left: 1.2rem; }
.form-summary a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-summary:focus, .form-state:focus, .form-success:focus { outline: none; }

.form-state {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  font-size: var(--fs-sm);
  line-height: 1.6;
  border-radius: var(--radius);
}
.form-state > svg { width: 22px; height: 22px; margin-top: 1px; }
.form-state--info { color: #5A4410; background: #FFF8E8; border: 1px solid #F6DFA6; }
.form-state--info > svg { color: #C98A00; }
.form-state--error { color: #7A1F1F; background: #FDF1F1; border: 1px solid #F3C9C9; }
.form-state--error > svg { color: #D93B3B; }
.form-state__alt { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }
.form-state__alt a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--gray-100);
}
.form__privacy { display: flex; gap: 0.6rem; align-items: flex-start; max-width: 420px; font-size: var(--fs-xs); line-height: 1.55; color: var(--gray-500); }
.form__privacy svg { width: 16px; height: 16px; margin-top: 1px; color: var(--gray-500); }
.form__privacy a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 599px) { .form__submit { width: 100%; } }

/* Submit loading state */
.btn__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.btn.is-loading { cursor: progress; opacity: 0.9; }
.btn.is-loading .btn__spinner { display: inline-block; }
.btn.is-loading svg { display: none; }
.btn:disabled { pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-success { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-7) 0; text-align: center; }
.form-success__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  color: var(--white);
  background: linear-gradient(145deg, #34D399, #10B981);
  box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.12);
}
.form-success__icon svg { width: 34px; height: 34px; }
.form-success h3 { font-size: var(--fs-h3); }
.form-success p { max-width: 460px; color: var(--color-text-muted); }
.form-success .btn-row { justify-content: center; margin-top: var(--space-3); }

/* 18. Legal pages ---------------------------------------------------------- */
.legal { display: grid; gap: var(--space-6); }
.legal__notice {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #5A4410;
  background: #FFF8E8;
  border: 1px solid #F6DFA6;
  border-radius: var(--radius);
}
.legal__notice > svg { width: 22px; height: 22px; margin-top: 2px; color: #C98A00; }
.legal__notice code { font-size: 0.9em; }
.legal__meta { font-size: var(--fs-sm); color: var(--gray-500); }
.legal__section { display: grid; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--gray-200); }
.legal__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.legal__head h2 { font-size: var(--fs-h4); }
.legal__section p, .legal__section li { color: var(--gray-700); font-size: 1rem; line-height: 1.75; }
.legal__section ul { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-2); }
.legal__section a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; }
.review-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A5A00;
  background: #FFF3D6;
  border: 1px solid #F6DFA6;
  border-radius: var(--radius-pill);
}
.review-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E0A100; }
.legal__placeholder { padding: 0.05rem 0.3rem; font-style: italic; color: #8A5A00; background: #FFF8E8; border-radius: 4px; }

/* Contextual links inside body copy */
.prose a, .section-head p a, .faq__answer a, .service-card p a {
  color: var(--blue-600);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(20, 121, 246, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.prose a:hover, .section-head p a:hover, .faq__answer a:hover { text-decoration-color: currentColor; }
.section--dark .section-head p a { color: var(--blue-400); }
.prose a.link-arrow { text-decoration: none; }
.footer-links--dark a { color: var(--navy-900); font-weight: 500; }
.footer-links--dark a:hover { color: var(--blue-600); }


/* 19. Production refinements ----------------------------------------------- */

/* Contrast: blue text on dark surfaces uses the lighter brand tint */
.section--dark .eyebrow, .final-cta .eyebrow, .consult .eyebrow { color: var(--blue-400); }
/* Blue surfaces carrying white text are a shade deeper so text stays at AA */
.cta-band {
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(76, 155, 255, 0.35) 0%, transparent 55%),
    linear-gradient(135deg, #0B56B8 0%, var(--blue-btn) 60%, #1270E6 100%);
}
.svc-tile--blue {
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(76, 155, 255, 0.4) 0%, transparent 60%),
    linear-gradient(135deg, #0B56B8, var(--blue-btn));
}
.call-card { background: linear-gradient(135deg, #0B56B8, var(--blue-btn)); }

/* Focus: always visible, and white on blue surfaces */
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; }
.cta-band :focus-visible, .svc-tile--blue :focus-visible, .call-card:focus-visible,
.btn--primary:focus-visible, .mobile-menu :focus-visible, .site-footer :focus-visible,
.hero :focus-visible, .page-hero :focus-visible, .section--dark :focus-visible, .final-cta :focus-visible, .consult :focus-visible {
  outline-color: var(--white);
}
.btn--primary:focus-visible { box-shadow: 0 0 0 4px var(--blue-ink); }
/* Whole-card links: show the focus ring on the card, not on the title text */
.service-card h3 a:focus-visible, .category-card h3 a:focus-visible, .svc-tile h3 a:focus-visible { outline: none; }
.service-card:has(h3 a:focus-visible), .svc-tile:has(h3 a:focus-visible) { outline: 3px solid var(--blue-500); outline-offset: 3px; }
.category-card:has(h3 a:focus-visible) { outline: 3px solid var(--blue-400); outline-offset: 4px; }
.service-card:has(h3 a:focus-visible) { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Buttons may wrap on narrow screens instead of overflowing */
.btn { white-space: normal; text-align: center; text-wrap: balance; }
.header-cta, .dropdown .btn { white-space: nowrap; }
@media (max-width: 479px) {
  .btn-row .btn--lg, .cta-band .btn-row .btn, .consult .btn-row .btn, .page-hero .btn-row .btn { width: 100%; }
  .btn--lg { padding-inline: 1.25rem; }
}

/* Utility bar: shorter message on small phones */
.utility-bar__short { display: none; }
@media (max-width: 479px) {
  .utility-bar__long { display: none; }
  .utility-bar__short { display: inline; }
}

/* Comfortable touch targets (WCAG 2.2 target size) */
.footer-links { gap: 0.25rem; }
.footer-links a { display: inline-block; padding: 0.35rem 0; }
.footer-bottom ul { gap: var(--space-1) var(--space-5); }
.footer-bottom a { display: inline-block; padding: 0.4rem 0; }
.breadcrumb a, .breadcrumb [aria-current="page"] { display: inline-block; padding: 0.3rem 0; }
.industry__links a { padding: 0.35rem 0; }
.contact-list__value a { display: inline-block; padding: 0.2rem 0; }
.link-arrow { min-height: 32px; }
@media (max-width: 767px) {
  .footer-links a { padding: 0.45rem 0; }
}

/* Motion: entrances are quick and never hold back the largest text */
.reveal { transform: translateY(16px); transition: opacity 600ms var(--ease), transform 700ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.hero .reveal-load { animation-duration: 700ms; }
.hero h1.reveal-load { opacity: 1; animation-name: rise-soft; }
@keyframes rise-soft { from { transform: translateY(10px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero .reveal-load, .hero h1.reveal-load { opacity: 1 !important; transform: none !important; animation: none !important; }
  .btn:hover, .card:hover, .svc-tile:hover, .category-card:hover, .feature:hover, .service-card:hover { transform: none; }
}

/* Hero & interior hero photos (when added) paint immediately: no fade for the LCP image */
.hero__media img { opacity: 1; }

/* Small-screen polish */
@media (max-width: 374px) {
  :root { --gutter: 1rem; }
  .brand__name { font-size: 1.0625rem; }
  .brand__mark { width: 38px; height: 38px; }
  .header-actions { gap: var(--space-2); }
  .trust-strip__list { grid-template-columns: 1fr; }
  .trust-strip__item { flex-direction: row; align-items: center; padding: var(--space-3) 0; }
  .trust-strip__item:nth-child(2) { border-top: 1px solid var(--gray-100); }
  .choice span { padding-inline: 0.9rem; }
}
/* Large screens: keep line lengths and section rhythm in check */
@media (min-width: 1800px) {
  :root { --section-y: 8.5rem; }
  .hero--home .hero__inner { min-height: 760px; }
}
.hero__media picture, .category-card__media picture { display: contents; }
.footer-contact a { display: inline-block; padding: 0.25rem 0; }
.service-card__top { flex-wrap: wrap; }
.service-card__top .tag-list { justify-content: flex-end; }
.breadcrumb li { display: inline-flex; align-items: center; }
@media (min-width: 700px) and (max-width: 859px) {
  .category-grid { grid-template-columns: 1fr 1fr; }
  .category-card { min-height: 460px; }
  .category-card .chip-list li:nth-child(n+4) { display: none; }
}
@media (max-width: 959px) { .area-map { max-width: 420px; } }


/* 20. Hero typography accents, credentials, consultation section ----------- */
/* Two restrained accents: a warm "Florida" and an italic serif phrase in brand blue */
.accent-sun {
  background: linear-gradient(100deg, #FFC24B 0%, #FFD884 55%, #FFE9B8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.accent-serif {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.16em;
  letter-spacing: -0.005em;
  line-height: 0.95;
  padding-right: 0.08em; /* keeps the italic overhang inside the gradient clip */
  background: linear-gradient(100deg, var(--blue-400) 0%, #8CC2FF 50%, #DCEBFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-title .accent-serif { display: inline-block; }
.hero__lead strong { color: var(--white); font-weight: 600; }
.accent-serif-sm {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.16em;
  line-height: 1;
  color: #BFDBFF;
}

/* Credentials chips */
.hero-creds { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.hero-creds li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
}
.hero-creds svg { width: 15px; height: 15px; color: #FFC24B; }

/* Consultation section (homepage) */
.consult-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-y);
  color: var(--white);
  background: var(--navy-900);
}
.consult-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 60% at 0% 0%, rgba(20, 121, 246, 0.28) 0%, transparent 70%),
    radial-gradient(50% 60% at 100% 100%, rgba(20, 121, 246, 0.22) 0%, transparent 70%);
}
.consult-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 70% at 15% 30%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 15% 30%, #000 10%, transparent 70%);
}
.consult-section__layout { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
@media (min-width: 1024px) {
  .consult-section__layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .consult-section__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.consult-section__intro { display: grid; gap: var(--space-5); }
.consult-section__intro .eyebrow { color: var(--blue-400); }
.consult-section__intro h2 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.125rem); }
.consult-section__intro > p { color: rgba(255, 255, 255, 0.74); font-size: var(--fs-lg); max-width: 520px; }
.consult-section .form-panel { color: var(--navy-900); }

.contact-methods { display: grid; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; max-width: 460px; }
.contact-methods a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.contact-methods a:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(76, 155, 255, 0.45); transform: translateX(3px); }
.contact-methods__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--white);
  background: linear-gradient(145deg, var(--blue-400), var(--blue-btn));
}
.contact-methods__icon svg { width: 20px; height: 20px; }
.contact-methods small { display: block; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.6); }
.contact-methods strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.consult-section :focus-visible { outline-color: var(--white); }
.consult-section .form-panel :focus-visible { outline-color: var(--blue-500); }
@media (prefers-reduced-motion: reduce) { .contact-methods a:hover { transform: none; } }
.mobile-callbar .btn { white-space: nowrap; }

/* Commercial grids sized to their current item counts (3 services, 4 industries) */
@media (min-width: 1100px) {
  .bento > :nth-child(3):last-child { grid-column: 1 / -1; min-height: 280px; }
  .bento > :nth-child(3):last-child p { max-width: 70ch; }
}
@media (min-width: 1024px) {
  .industry-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .industry-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
}