/* ==========================================================================
   JED Waterproofing — custom layer on top of Tailwind
   ========================================================================== */

/* ---------- Base ---------- */
:root {
  --ink: #05121F;
  --navy: #0A1F33;
  --steel: #12314B;
  --cyan: #00C2FF;
  --aqua: #25E6C4;
  --foam: #7CF0DC;
  --sand: #F3C677;
  --header-h: 76px;

  /* Every inner page opens with a banner of exactly this height.
     The home page is exempt — it uses the full-height hero slider. */
  --banner-h: 260px;

  --font-display: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid spacing — sections breathe with the viewport */
  --gutter:  clamp(1.25rem, 0.55rem + 2.8vw, 2rem);
  --section-y: clamp(4rem, 2.6rem + 5.6vw, 7.5rem);

  /* Lead-in for the FIRST section after a page banner. The banner is already
     a 260px band, so stacking the full --section-y on top of it produced a
     ~200px void before any content. Roughly half the normal rhythm. */
  --section-y-lead: clamp(2.5rem, 1.9rem + 2.2vw, 4.25rem);

  /* Layout width is a FIXED px value on purpose.
     If it were rem-based it would scale with the fluid root font-size and the
     container would no longer match its header/footer/section siblings. */
  --shell: 1280px;
}

/* The single horizontal rhythm for the whole site.
   Every page, section, header and footer uses this, so the content column is
   byte-for-byte the same width on each page — no jumping between pages. */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   FLUID ROOT SCALE
   The whole interface scales with the device: one clamp() on the root font
   size makes every rem-based size (Tailwind text-*, spacing, icons) grow
   smoothly from a 320px phone up to a wide desktop, with no breakpoint jumps.
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6.5rem;
  font-size: clamp(16px, 15.1px + 0.38vw, 18.5px);
}

/* ---------- Fluid type scale ---------- */
.type-display-1 { font-size: clamp(2.35rem, 1.30rem + 4.35vw, 5rem);      line-height: 1.03; letter-spacing: -.028em; }
.type-display-2 { font-size: clamp(1.85rem, 1.28rem + 2.42vw, 3.35rem);   line-height: 1.08; letter-spacing: -.024em; }
.type-display-3 { font-size: clamp(1.45rem, 1.16rem + 1.28vw, 2.25rem);   line-height: 1.16; letter-spacing: -.018em; }
.type-display-4 { font-size: clamp(1.18rem, 1.06rem + 0.56vw, 1.6rem);    line-height: 1.28; letter-spacing: -.01em; }
.type-lead     { font-size: clamp(1rem, 0.94rem + 0.30vw, 1.185rem);      line-height: 1.62; }
.type-body     { font-size: clamp(0.935rem, 0.90rem + 0.175vw, 1.05rem);  line-height: 1.7; }
.type-eyebrow  { font-size: clamp(0.7rem, 0.665rem + 0.17vw, 0.79rem); letter-spacing: .22em; }

/* Hero headline — scales continuously with the viewport, no breakpoints */
.hero__title {
  font-size: clamp(2.15rem, 1.05rem + 4.55vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -.03em;
}

/* Long words and URLs must never blow out a narrow phone. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  text-wrap: balance;
}
p { text-wrap: pretty; }

[id] { scroll-margin-top: 6.5rem; }

body {
  background-color: var(--ink);
  overflow-x: hidden;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

::selection { background: rgba(0, 194, 255, .3); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #04101b; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--aqua), var(--cyan));
  border-radius: 99px;
  border: 3px solid #04101b;
}
::-webkit-scrollbar-thumb:hover { background: var(--foam); }

:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 999; background: var(--aqua); color: var(--ink);
  padding: .75rem 1.25rem; border-radius: 0 0 1rem 1rem; font-weight: 700;
  transition: transform .25s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
    .no-scrollbar::-webkit-scrollbar { display: none; }

    /* Carousel tracks scroll horizontally by design. Without this the track
       reports its full content width as page overflow. */
    [data-carousel-track] { overflow-x: auto; overscroll-behavior-x: contain; }

/* ---------- Typography helpers ---------- */
.grad-text {
  background: linear-gradient(100deg, #7CF0DC 0%, #25E6C4 28%, #00C2FF 65%, #7CF0DC 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientSlide 7s linear infinite;
}
@keyframes gradientSlide { to { background-position: 220% center; } }

.reveal-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--aqua);
}
.reveal-eyebrow::before {
  content: ''; width: 2rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--aqua), transparent);
}

/* ---------- Backgrounds ---------- */
.hero-mesh {
  background:
    radial-gradient(52rem 32rem at 12% 8%,  rgba(0, 194, 255, .22), transparent 62%),
    radial-gradient(44rem 30rem at 88% 22%, rgba(37, 230, 196, .18), transparent 60%),
    radial-gradient(60rem 34rem at 60% 100%, rgba(10, 99, 196, .28), transparent 65%),
    linear-gradient(180deg, #04121F 0%, #072133 55%, #04121F 100%);
}

.water-grid {
  background-image:
    linear-gradient(rgba(124, 240, 220, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 240, 220, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(60% 60% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000 30%, transparent 100%);
}

.noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.mask-fade-left {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 35%);
  mask-image: linear-gradient(to right, transparent, #000 35%);
}

.stat-glow {
  background: radial-gradient(14rem 8rem at 50% 100%, rgba(0, 194, 255, .18), transparent 70%);
}

/* ==========================================================================
   PAGE BANNER
   The 260px band that opens every page except the home page (which uses the
   full-height hero slider). The site header is `sticky`, so it already sits
   in normal flow — the banner must NOT add its own top offset, that was the
   dead space above the breadcrumb. Content is optically centred instead of
   being pushed apart by padding.

   The scale below is budgeted, not guessed: at 1440px the root font is
   18.5px, so breadcrumbs + eyebrow + a two-line title + a two-line lead come
   to ~191px, and the 37px of padding brings that to exactly 260. A
   three-line lead still fits. min-height (never height) is deliberate: a
   four-line lead grows the band instead of clipping the text.
   ========================================================================== */
.page-banner {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* The band MUST differ from the page behind it. This used to be var(--ink),
     identical to the body background, which measured only 10 luminance levels
     of separation from the page and read as flat black — i.e. no banner at
     all. Ending on --navy keeps it in the existing section palette
     (bg-ink / bg-navy alternate throughout) while making the band legible. */
  background: linear-gradient(180deg, #072133 0%, var(--navy) 58%, #0B2439 100%);
  /* Hairline edge so the band has a defined bottom boundary against the page.
     Inset shadow avoids adding to layout height. */
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / .07);
  /* Lift the band above the first section's decorative blur circles. Those use
     `absolute ... -translate-y-1/2`, so they bleed ~13rem UP into the banner and,
     being positioned, would otherwise paint on top of the title and lead.
     z-index:1 clears them; service pages still win with .section-overlap z-10,
     so their quick-facts card keeps overlapping the banner as designed. */
  z-index: 1;
  min-height: var(--banner-h);
  padding-block: 1rem;
}
/* `position: relative` is load-bearing, not cosmetic. The background layer is
   an `absolute inset-0` div, and positioned descendants paint above
   non-positioned in-flow content. Without this the mesh, the banner photo and
   the scrim painted ON TOP of the breadcrumb, eyebrow, h1 and lead, which
   measured as dark navy (#06344b) where the white glyphs should be. */
.page-banner__inner { position: relative; width: 100%; min-width: 0; }

.page-banner__crumbs { margin-bottom: .5rem; }

/* Banner type sits one step below the home hero. At the 5rem display-1 size
   the headline cannot share 260px with a breadcrumb and a lead paragraph. */
.page-banner__title {
  font-size: clamp(1.45rem, .95rem + 1.05vw, 1.9rem);
  line-height: 1.08;
  letter-spacing: -.026em;
  margin-top: .6rem;
}
.page-banner__lead {
  font-size: clamp(.84rem, .82rem + .08vw, .9rem);
  line-height: 1.45;
  margin-top: .55rem;
}

/* Narrow phones: a two-line title plus a three-line lead can outrun 260px, so
   the band is allowed to breathe rather than squeezing the type any further. */
@media (max-width: 640px) {
  .page-banner { min-height: 0; padding-block: 1.6rem 1.85rem; }
  .page-banner__crumbs { margin-bottom: .7rem; }
  .page-banner__title { font-size: clamp(1.35rem, 1.05rem + 1.5vw, 1.7rem); margin-top: .7rem; }
  .page-banner__lead { margin-top: .65rem; }
}

/* --------------------------------------------------------------------------
   Lead-in rhythm for the first section after a banner.

   Every page's first content section carried a full --section-y of top
   padding (129px at 1440). Stacked on top of an already 260px-tall banner
   that produced a 130-215px void between the banner and the first real
   content. The banner is its own visual break, so the section after it
   only needs a reduced lead-in.

   Written as a sibling selector rather than per-page classes so it applies to
   every template (and any page added later) automatically. Text/comments
   between the two elements do not affect `+`.

   .section-overlap opts out: service pages pull their quick-facts card up by
   -mt-8 on purpose, and giving that section padding-top would break the
   overlap.
   -------------------------------------------------------------------------- */
.page-banner + section:not(.section-overlap) {
  padding-top: var(--section-y-lead);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  border-radius: 9999px; font-family: Montserrat, sans-serif; font-weight: 700;
  letter-spacing: .01em; white-space: nowrap;
  padding: .8rem 1.5rem; font-size: .875rem; line-height: 1;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background-color .3s, color .3s, border-color .3s;
  overflow: hidden; isolation: isolate;
}
.btn-sm { padding: .65rem 1.2rem; font-size: .8rem; }
.btn-lg { padding: 1.05rem 2rem; font-size: .95rem; }

.btn-primary {
  background: linear-gradient(115deg, #25E6C4, #00C2FF 55%, #0A8CFF);
  color: #04121F;
  box-shadow: 0 14px 40px -16px rgba(0, 194, 255, .85);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, #7CF0DC, #25E6C4 55%, #00C2FF);
  opacity: 0; transition: opacity .35s ease;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 55px -18px rgba(37, 230, 196, .9); }
.btn-primary:hover::after { opacity: 1; }

.btn-ghost {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  border-color: var(--aqua);
  color: var(--aqua);
  background: rgba(37, 230, 196, .08);
}

.btn-outline-aqua {
  border: 1.5px solid rgba(37, 230, 196, .5);
  color: var(--aqua);
  background: rgba(37, 230, 196, .06);
}
.btn-outline-aqua:hover { background: var(--aqua); color: var(--ink); border-color: var(--aqua); transform: translateY(-3px); }

/* ---------- Nav (crisp, high-contrast) ---------- */
.nav-bar {
    display: flex; align-items: center; gap: .1rem;
    padding: .28rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .075);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    }

/* The seven nav links plus the logo and both CTAs need more than the 1280px
   shell can give them, so the pills are compacted until there is room. */
@media (min-width: 1024px) and (max-width: 1439px) {
    #site-header > .shell { gap: .6rem; }
    #site-header .nav-bar { gap: 0; padding: .18rem; flex-shrink: 1; min-width: 0; }
    #site-header .nav-link {
        padding: .5rem .45rem;
        font-size: .7rem;
        letter-spacing: 0;
        gap: .1rem;
        white-space: nowrap;
        flex-shrink: 0;
    }
    #site-header .nav-link__chev { width: .6rem; height: .6rem; }
    #site-header .logo-tile { width: 2.15rem; height: 2.15rem; }
    #site-header .logo-tile img { width: 1.5rem; height: 1.5rem; }
}

/* Give the pill enough room back at very wide viewports, where the shell
   is already capped at 1280px and the links can breathe again. */
@media (min-width: 1280px) and (max-width: 1439px) {
    #site-header .nav-link { padding: .55rem .78rem; font-size: .765rem; }
}

.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: .22rem;
  padding: .58rem .8rem;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .004em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, .74);
  transition: color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
.nav-link__chev {
  opacity: .5;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .22s;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-link:hover .nav-link__chev { transform: rotate(180deg); opacity: .8; }

.nav-link.is-active {
  color: #04121F;
  background: linear-gradient(120deg, #7CF0DC 0%, #25E6C4 46%, #00C2FF 100%);
  box-shadow: 0 8px 22px -10px rgba(37, 230, 196, .95);
  font-weight: 700;
}
.nav-link.is-active .nav-link__chev { opacity: .6; }
.nav-link.is-active:hover { color: #04121F; background: linear-gradient(120deg, #7CF0DC 0%, #25E6C4 46%, #00C2FF 100%); }

/* Mega menu */
.nav-mega {
  border-radius: 1.35rem;
  transform-origin: top center;
}
.nav-mega__grid > a {
  transition: background-color .2s ease, transform .2s ease;
}
.nav-mega__grid > a:hover { background: rgba(255, 255, 255, .07); }

[data-nav-group]:hover .nav-mega,
[data-nav-group]:focus-within .nav-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Mobile drawer links */
.nav-drawer-link {
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.nav-drawer-link:active { transform: scale(.985); }

/* Header shell */
.header-shell {
  transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
#site-header.is-scrolled .header-shell {
  background: rgba(5, 18, 31, .88);
  box-shadow: 0 12px 40px -26px rgba(0, 0, 0, .95);
  border-color: rgba(255, 255, 255, .13);
}
#site-header.is-scrolled { --header-h: 66px; }

/* Logo lockup */
.logo-tile {
  display: grid; place-items: center;
  border-radius: .8rem;
  background: linear-gradient(140deg, rgba(37, 230, 196, .22), rgba(0, 194, 255, .12));
  box-shadow: inset 0 0 0 1px rgba(124, 240, 220, .28), 0 6px 18px -10px rgba(0, 194, 255, .8);
}


/* ---------- Footer ---------- */
.footer-head {
  font-family: Montserrat, sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--aqua);
}
.footer-link {
  display: inline-block; font-size: .84rem; color: rgba(255, 255, 255, .55);
  transition: color .25s, transform .25s;
}
.footer-link:hover { color: #fff; transform: translateX(4px); }

.social-btn {
  display: inline-flex; height: 2.35rem; width: 2.35rem; align-items: center; justify-content: center;
  border-radius: .8rem; border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .6);
  transition: all .3s;
}
.social-btn:hover { background: linear-gradient(135deg, var(--aqua), var(--cyan)); color: var(--ink); border-color: transparent; transform: translateY(-3px); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__group { display: flex; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  grid-template-areas: "stack";
  min-height: clamp(44rem, 92vh, 62rem);
  overflow: hidden;
  background: var(--ink);
}

/* Every slide occupies the same grid cell so the tallest one sets the height */
.hero__slide {
  grid-area: stack;
  position: relative;
  min-height: clamp(44rem, 92vh, 62rem);
  display: flex;
  align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1), visibility 1.1s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

.hero__controls {
  grid-area: stack;
  align-self: end;
  z-index: 6;
  width: 100%;
  pointer-events: none;
}
.hero__controls > * { pointer-events: auto; }

.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.18);
  transition: transform 9s linear;
}
.hero__slide.is-active .hero__media img { transform: scale(1.0); }

.hero__scrim {
  position: absolute; inset: 0;
  /* The copy column runs from the left gutter to roughly 46% of the width, so the
     wash stays heavy across that whole span and only thins out over the right-hand
     third where nothing is set. Previously it fell to .35 by 62%, letting a bright
     patch of the photo through behind the lead paragraph (4.1:1) and the warranty
     badge (3.5:1). */
  background:
    linear-gradient(90deg, rgba(4, 15, 26, .96) 0%, rgba(4, 15, 26, .93) 30%, rgba(4, 15, 26, .86) 48%, rgba(4, 15, 26, .58) 76%, rgba(4, 15, 26, .5) 100%),
    linear-gradient(180deg, rgba(4, 15, 26, .86) 0%, rgba(4, 15, 26, .3) 26%, rgba(4, 15, 26, .42) 60%, rgba(4, 15, 26, .96) 100%);
}

.hero__inner {
  position: relative; z-index: 3;
  width: 100%;
  padding-top: 4rem; padding-bottom: 8.5rem;
}

/* Word-by-word reveal */
.word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word-rise {
  display: inline-block;
  transform: translateY(105%) rotate(3deg);
  opacity: 0;
  transition: transform .85s cubic-bezier(.16, .84, .3, 1) var(--d, 0ms), opacity .6s ease var(--d, 0ms);
}
.hero__slide.is-active .word-rise { transform: translateY(0) rotate(0); opacity: 1; }

/* Transformed words must paint their own gradient, otherwise the
   background-clip on the parent may not reach through a new layer. */
.grad-text .word-rise {
  background-image: inherit;
  background-size: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientSlide 7s linear infinite;
}

.fade-up {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.16, .84, .3, 1) .35s, transform .8s cubic-bezier(.16, .84, .3, 1) .35s;
}
.hero__slide.is-active .fade-up { opacity: 1; transform: translateY(0); }

/* Floating badge */
.hero__badge {
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }

/* Water ripple rings */
.ripple {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(124, 240, 220, .28);
  pointer-events: none;
  animation: rippleOut 6s cubic-bezier(.2, .6, .3, 1) infinite;
}
.ripple:nth-child(2) { animation-delay: 2s; }
.ripple:nth-child(3) { animation-delay: 4s; }
@keyframes rippleOut {
  0%   { transform: scale(.3); opacity: .0; }
  15%  { opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Slide navigation */
.hero__dots { display: flex; align-items: center; gap: .7rem; }
.hero__dot {
  position: relative; height: 4px; width: 2.4rem; border-radius: 99px;
  background: rgba(255, 255, 255, .18); overflow: hidden; transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.hero__dot span {
  position: absolute; inset: 0; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--aqua), var(--cyan));
}
.hero__dot.is-active { width: 4.2rem; }
.hero__dot.is-active span { width: 100%; transition: width var(--slide-duration, 7s) linear; }
.hero__dot.is-active.is-paused span { animation-play-state: paused; }

.hero__arrow {
  display: inline-flex; height: 3rem; width: 3rem; align-items: center; justify-content: center;
  border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; background: rgba(255, 255, 255, .05); backdrop-filter: blur(8px);
  transition: all .3s;
}
.hero__arrow:hover { background: var(--aqua); color: var(--ink); border-color: var(--aqua); transform: scale(1.08); }

.carousel-btn {
  display: inline-flex; height: 2.75rem; width: 2.75rem; align-items: center; justify-content: center;
  border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .16); color: #fff;
  transition: all .3s;
}
.carousel-btn:hover { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }

/* ---------- Service cards ---------- */
.service-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: linear-gradient(140deg, rgba(0, 194, 255, .5), transparent 45%, rgba(37, 230, 196, .35));
  opacity: 0; transition: opacity .5s;
}
.service-card:hover::before { opacity: 1; }

/* ---------- Process ---------- */
.process-arrow {
  position: absolute; right: -1.35rem; top: 50%; transform: translateY(-50%);
  color: rgba(124, 240, 220, .45); z-index: 2;
}
@media (max-width: 1279px) { .process-arrow { display: none; } }

/* ---------- FAQ ---------- */
.faq summary::-webkit-details-marker { display: none; }
.faq__icon { transition: transform .4s cubic-bezier(.2,.8,.2,1), background-color .3s, color .3s; }
.faq[open] .faq__icon { transform: rotate(180deg); background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.faq__body { animation: faqIn .45s cubic-bezier(.16, .84, .3, 1); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Forms ---------- */
.quote-form {
    background: rgba(5, 18, 31, .55);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 2rem;
    padding: 1.75rem;
    }
    @media (min-width: 640px) { .quote-form { padding: 2.25rem; } }

    /* Grid and flex children default to min-width:auto, so a <select> whose
       longest option is wide ("Balcony & Deck Waterproofing") pushes the whole
       column past the viewport on narrow screens. Opt every field out of that. */
    .quote-form, .quote-form .field, .quote-form .field > div { min-width: 0; }
    .quote-form .field select, .quote-form .field input, .quote-form .field textarea { min-width: 0; }

.field label {
  display: block; margin-bottom: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.field input,
.field select,
.field textarea {
  width: 100%; border-radius: .9rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff; font-size: .9rem;
  padding: .85rem 1rem;
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; }
.field textarea { resize: vertical; min-height: 7rem; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .28); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan);
  background: rgba(0, 194, 255, .06);
  box-shadow: 0 0 0 4px rgba(0, 194, 255, .12);
}
.quote-form input[type="checkbox"] { accent-color: var(--cyan); }

/* Server-side validation states. The .field-error class predates
   aria-invalid; both are kept so hand-written markup still works. */
.field-error input,
.field-error select,
.field-error textarea,
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #F87171;
  background: rgba(248, 113, 113, .07);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, .12);
}

/* Inline message rendered beneath a rejected field. */
.field__error {
  display: flex; align-items: flex-start; gap: .4rem;
  margin-top: .5rem;
  font-size: .74rem; font-weight: 500; line-height: 1.45;
  color: #FCA5A5;
}
.field__error::before {
  content: "!";
  flex: 0 0 auto;
  width: 1rem; height: 1rem; margin-top: .05rem;
  display: grid; place-items: center;
  border-radius: 9999;
  background: rgba(248, 113, 113, .18);
  border: 1px solid rgba(248, 113, 113, .5);
  font-size: .62rem; font-weight: 800;
}

/* ---------- Misc ---------- */
.ring-pulse {
  box-shadow: 0 0 0 0 rgba(0, 194, 255, .55);
  animation: ringPulse 2.6s infinite;
}
@keyframes ringPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 194, 255, .5); }
  70%  { box-shadow: 0 0 0 18px rgba(0, 194, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 194, 255, 0); }
}

.divider-wave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30c150 30 250-24 400-18s250 48 400 30 250-42 400-30v48H0Z' fill='%2305121F'/%3E%3C/svg%3E");
}

.lightning {
  background: linear-gradient(180deg, #EAF4FA 0%, #C9E6F5 100%);
  color: var(--ink);
}

.ticket {
  position: relative;
  background: linear-gradient(140deg, rgba(0, 194, 255, .18), rgba(37, 230, 196, .1));
  border: 1px dashed rgba(124, 240, 220, .45);
}

.gal-item { overflow: hidden; border-radius: 1.5rem; position: relative; }
.gal-item img { transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.gal-item:hover img { transform: scale(1.08); }
.gal-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4, 15, 26, .92));
  opacity: .9; transition: opacity .4s;
}
.gal-item:hover::after { opacity: 1; }

.area-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.05rem; border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  font-size: .82rem; color: rgba(255, 255, 255, .65);
  transition: all .3s;
}
.area-pill::before {
  content: ''; height: 6px; width: 6px; border-radius: 99px;
  background: rgba(124, 240, 220, .55); transition: background .3s, box-shadow .3s;
}
.area-pill:hover {
  border-color: rgba(37, 230, 196, .5); color: #fff; transform: translateY(-2px);
  background: rgba(37, 230, 196, .07);
}
.area-pill:hover::before { background: var(--aqua); box-shadow: 0 0 10px var(--aqua); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity .9s cubic-bezier(.16, .84, .3, 1), transform .9s cubic-bezier(.16, .84, .3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   LIGHT THEME
   ==========================================================================

   The site was authored dark: deep-navy sections with white text at a dozen
   opacity steps and translucent white surfaces. Converting it to light grey
   means inverting that whole relationship, which the templates express
   through Tailwind utilities rather than CSS variables.

   Strategy — two rules, and the second one is the subtle part:

   1. --ink KEEPS its original dark value. It is not "the page background",
      it is the ink-on-bright-accent colour: `bg-aqua text-ink`, `bg-cyan
      text-ink` and `from-aqua to-cyan text-ink` appear 19 times across the
      templates. Flipping the variable to a light grey would have put pale
      text on saturated cyan. Instead the *utilities* that painted section
      backgrounds (bg-ink, bg-navy and their alpha steps) are remapped to
      light greys below, leaving --ink free to do its real job.

   2. Utility overrides are prefixed with `body` (specificity 0,2,0) because
      the Tailwind Play CDN injects its generated stylesheet at the end of
      <head>, i.e. AFTER this file. Equal specificity would lose on document
      order; the extra class guarantees these win.

   Photo-backed regions stay dark and re-assert white type, because white
   copy over a photo is correct at any theme. Those are `.hero`, the inner
   `.page-banner`, and anything marked `.on-dark` in the templates.
   ========================================================================== */

:root {
  /* Light-theme surface ramp */
  --page:    #F1F4F7;
  --surface: #F8FAFB;
  --panel:   #E4EAEF;
  --line:    rgba(11, 32, 51, .12);

  /* Text ramp — replaces white-at-opacity as the readable greys */
  --tx:      #0B2033;
  --tx-mid:  #33475B;
  --tx-soft: #55697D;

  /* Accents darkened for use as TEXT on light ground. The bright originals
     (--cyan #00C2FF, --aqua #25E6C4) only reach ~1.9:1 on #F1F4F7 and are
     unreadable as type; these clear 4.5:1 while staying in the brand family.
     The bright values remain in use for fills, gradients and buttons. */
  --aqua-ink: #0B7C66;
  --cyan-ink:  #0369A1;
  --foam-ink:  #0F766E;
  --sand-ink:  #8A5A08;
}

/* The <body> element itself carries `bg-ink text-white` utilities. A
   `body .bg-ink` selector only ever matches DESCENDANTS of body, never body,
   so the element's own utilities need explicitly compounded selectors
   (0,1,1) to outrank the single-class Tailwind rules. */
body            { background-color: var(--page); color: var(--tx); }
body.bg-ink     { background-color: var(--page); }
body.text-white { color: var(--tx); }

::selection { background: rgba(0, 194, 255, .28); color: #071A28; }

::-webkit-scrollbar-track { background: #E4EAEF; }
::-webkit-scrollbar-thumb { border-color: #E4EAEF; }

/* ---------- Section backgrounds: navy/ink -> light grey ---------- */
body .bg-ink  { background-color: var(--surface); }
body .bg-navy { background-color: var(--panel); }

body .bg-ink\/40  { background-color: rgba(248, 250, 251, .40); }
body .bg-ink\/50  { background-color: rgba(248, 250, 251, .50); }
body .bg-ink\/60  { background-color: rgba(248, 250, 251, .60); }
body .bg-ink\/70  { background-color: rgba(248, 250, 251, .72); }
body .bg-ink\/80  { background-color: rgba(248, 250, 251, .80); }
body .bg-ink\/85  { background-color: rgba(248, 250, 251, .85); }
body .bg-ink\/90  { background-color: rgba(248, 250, 251, .90); }
body .bg-ink\/95  { background-color: rgba(248, 250, 251, .95); }

body .bg-navy\/40 { background-color: rgba(228, 234, 239, .40); }
body .bg-navy\/60 { background-color: rgba(228, 234, 239, .60); }
body .bg-navy\/80 { background-color: rgba(228, 234, 239, .80); }

/* ---------- White type -> dark ink ramp ---------- */
/* Ghost step-numerals (`.05`–`.10`) were white-on-navy watermarks sitting in
   the corner of each step card. White on a light card makes them vanish
   entirely, so they get a faint INK tint instead. Intentionally far below AA
   — they are ornament, not content. */
body .text-white\/5       { color: rgba(11, 32, 51, .07); }
body .text-white\/8       { color: rgba(11, 32, 51, .08); }
body .text-white\/10      { color: rgba(11, 32, 51, .09); }
/* Tailwind's arbitrary-value utilities embed a literal `.` in the class name,
   which is not a legal identifier character — so the correct selector is
   `.text-white\/\[ \.05\]` with the dot escaped. Writing it unescaped makes the
   whole rule invalid and the browser discards it SILENTLY, which is how a dozen
   overrides here went missing. Matching with `[class~="…"]` avoids identifier
   escaping altogether and cannot fail this way. */
body [class~="text-white/[.05]"] { color: rgba(11, 32, 51, .07); }
body [class~="text-white/[.06]"] { color: rgba(11, 32, 51, .08); }
body [class~="text-white/[.08]"] { color: rgba(11, 32, 51, .09); }
body [class~="text-white/[.10]"] { color: rgba(11, 32, 51, .11); }
/* Same numeral lights up cyan on card hover; on light ground the brand cyan
   needs the same darkening treatment as .text-cyan. */
body .group:hover .text-cyan\/10,
body .group:hover .text-cyan\/20 { color: rgba(3, 105, 161, .22); }

/* Body-copy ramp. Translucent ink looks like the natural translation of the
   old white-at-opacity steps, but alpha compositing over #F1F4F7 washes out
   far faster than it appears on screen: rgba(11,32,51,.50) — which reads as a
   perfectly confident mid-grey — only reaches 3.19:1 and fails AA at 13px.
   These are SOLID greys spanning 5.1:1 to 15:1, so the original hierarchy
   survives and every step clears 4.5:1. */
body .text-white      { color: var(--tx); }
body .text-white\/85  { color: var(--tx); }
body .text-white\/80  { color: #16293B; }
body .text-white\/75  { color: #16293B; }
body .text-white\/70  { color: #22384C; }
body .text-white\/65  { color: #22384C; }
body .text-white\/60  { color: var(--tx-mid); }
body .text-white\/55  { color: var(--tx-mid); }
body .text-white\/50  { color: #3E5165; }
body .text-white\/45  { color: #3E5165; }
body .text-white\/40  { color: #4C6076; }
body .text-white\/35  { color: #4C6076; }
body .text-white\/30  { color: var(--tx-soft); }
body .text-white\/25  { color: var(--tx-soft); }

/* ---------- Accent type: readable versions of the brand hues ---------- */
body .text-aqua  { color: var(--aqua-ink); }
body .text-cyan  { color: var(--cyan-ink); }
body .text-foam  { color: var(--foam-ink); }
body .text-sand  { color: var(--sand-ink); }

/* The alpha variants of those accents were missed by the first pass and are the
   worst offenders on the site: bright mint at 80% on a white card measured 1.43:1,
   which is invisible. Used by the mega-menu and drawer service prices, the
   related-service cards and the review quote mark. Dark regions re-brighten these
   further down, so the two never collide. */
body .text-aqua\/80, body .text-aqua\/60, body .text-aqua\/40 { color: var(--aqua-ink); }
body .text-cyan\/80, body .text-cyan\/60, body .text-cyan\/40, body .text-cyan\/20 { color: var(--cyan-ink); }
body .text-sand\/70, body .text-sand\/60 { color: var(--sand-ink); }
body .text-cyan\/10 { color: rgba(3, 105, 161, .34); }

/* ---------- Borders: white hairlines -> ink hairlines ---------- */
body .border-white\/10 { border-color: rgba(11, 32, 51, .12); }
body .border-white\/12 { border-color: rgba(11, 32, 51, .14); }
body .border-white\/15 { border-color: rgba(11, 32, 51, .18); }
body .border-white\/20 { border-color: rgba(11, 32, 51, .24); }
body .border-white\/30 { border-color: rgba(11, 32, 51, .32); }

/* ---------- Translucent white surfaces -> white cards ---------- */
body [class~="bg-white/[.02]"] { background-color: rgba(255, 255, 255, .72); }
body [class~="bg-white/[.03]"] { background-color: rgba(255, 255, 255, .78); }
body [class~="bg-white/[.04]"] { background-color: rgba(255, 255, 255, .82); }
body [class~="bg-white/[.05]"] { background-color: rgba(255, 255, 255, .86); }
body [class~="bg-white/[.06]"] { background-color: rgba(255, 255, 255, .90); }
body [class~="bg-white/[.07]"] { background-color: rgba(255, 255, 255, .94); }

/* Soft white sheen gradients used on cards */
body [class~="from-white/[.06]"] { --tw-gradient-from: rgba(255, 255, 255, .92) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); }
body [class~="from-white/[.07]"] { --tw-gradient-from: #fff var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); }
body [class~="to-white/[.02]"]   { --tw-gradient-to: transparent var(--tw-gradient-to-position); }

/* Cyan/aqua hairline rings around tinted icon tiles */
body .ring-cyan\/20, body .ring-cyan\/25 { --tw-ring-color: rgba(0, 194, 255, .38); }
body .ring-aqua\/30                      { --tw-ring-color: rgba(37, 230, 196, .45); }

/* ---------- Dark regions keep LIGHT ink ----------
   The light theme darkens every accent and white-ramp utility so it reads on
   pale sections. That is exactly wrong inside .hero / .page-banner / .on-dark /
   .gal-item, which still sit on dark photography: the gradient headline and the
   eyebrow were repainted in dark ink over a dark backdrop and dropped to ~2.2:1,
   i.e. invisible. Everything overridden for light ground is restored here.

   White is restored as three buckets rather than the original alpha steps. Over a
   photograph the faint steps (white/25 was 2.4:1 composited on the hero image)
   are simply not readable, so the floor is raised while keeping enough spread for
   headline / body / supporting hierarchy. */
body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white,
body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white\/65,
body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white\/70,
body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white\/75,
body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white\/80,
body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white\/85 { color: #fff; }

body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white\/55, body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white\/60 { color: rgba(255, 255, 255, .92); }

body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white\/40, body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white\/45, body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white\/50 { color: rgba(255, 255, 255, .84); }

body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white\/25, body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white\/30, body :is(.hero, .page-banner, .on-dark, .gal-item) .text-white\/35 { color: rgba(255, 255, 255, .76); }

body :is(.hero, .page-banner, .on-dark, .gal-item) .text-aqua { color: #7CF0DC; }
body :is(.hero, .page-banner, .on-dark, .gal-item) .text-cyan { color: #7CE9FF; }
body :is(.hero, .page-banner, .on-dark, .gal-item) .text-foam { color: #A7F3E0; }
body :is(.hero, .page-banner, .on-dark, .gal-item) .text-sand { color: #F3C677; }

/* Gradient display type is repainted in its original bright brand gradient. */
body :is(.hero, .page-banner, .on-dark, .gal-item) .grad-text {
  background-image: linear-gradient(100deg, #7CF0DC 0%, #25E6C4 28%, #00C2FF 65%, #7CF0DC 100%);
}
body :is(.hero, .page-banner, .on-dark, .gal-item) .reveal-eyebrow { color: #7CF0DC; }
body :is(.hero, .page-banner, .on-dark, .gal-item) .reveal-eyebrow::before {
  background: linear-gradient(90deg, #7CF0DC, transparent);
}

/* Translucent accent utilities keep their hue but lose their alpha indoors: on a
   dark ground a 40%-opacity cyan separator only reached 2.2:1. */
body :is(.hero, .page-banner, .on-dark, .gal-item) [class*="text-cyan/"] { color: #7CE9FF; }
body :is(.hero, .page-banner, .on-dark, .gal-item) [class*="text-aqua/"] { color: #7CF0DC; }
body :is(.hero, .page-banner, .on-dark, .gal-item) [class*="text-sand/"] { color: #F3C677; }

/* Glass panels over photography need a DARK wash. Lightened for the pale
   sections, bg-ink/50 over a bright patch of the hero composited to a mid grey
   and left the warranty badge at 3.5:1. */
body :is(.hero, .page-banner, .on-dark, .gal-item) [class*="bg-ink/"],
body :is(.hero, .page-banner, .on-dark, .gal-item) [class*="bg-navy/"] {
  background-color: rgba(5, 18, 31, .82);
}
body :is(.hero, .page-banner, .on-dark, .gal-item) [class*="border-white/"] {
  border-color: rgba(255, 255, 255, .24);
}
/* Chips sitting over a photo stay DARK, so their white ink keeps its contrast.
   `.on-dark` very often shares the SAME element as its own `bg-ink/…` utility
   (index.php stat chip, guarantee.php warranty card), and a descendant selector
   like `.on-dark .bg-ink\/90` silently misses that case — the chip then inherits
   the light `body .bg-ink\/90` and renders white-on-white. The `[class*=…]`
   form matches whichever element carries both, at higher specificity than the
   single-class light rule it has to beat. */
body .on-dark[class*="bg-ink/"]   { background-color: rgba(5, 18, 31, .86); }
body .on-dark[class*="border-white/"] { border-color: rgba(255, 255, 255, .18); }
body .on-dark[class*="bg-ink/"] > *,
body .on-dark[class*="bg-ink/"] span,
body .on-dark[class*="bg-ink/"] p { color: #fff; }
/* Nested chips (utility on a child rather than the .on-dark element itself) */
body .on-dark .bg-ink\/70,
body .on-dark .bg-ink\/85,
body .on-dark .bg-ink\/90 { background-color: rgba(5, 18, 31, .86); }
body .on-dark .border-white\/10,
body .on-dark .border-white\/15,
body .on-dark .border-white\/20 { border-color: rgba(255, 255, 255, .18); }

/* ---------- Meshes ---------- */
.hero-mesh {
  background:
    radial-gradient(52rem 32rem at 12% 8%,  rgba(0, 150, 210, .13), transparent 62%),
    radial-gradient(44rem 30rem at 88% 22%, rgba(20, 190, 165, .13), transparent 60%),
    radial-gradient(60rem 34rem at 60% 100%, rgba(10, 99, 196, .10), transparent 65%),
    linear-gradient(180deg, #FFFFFF 0%, #F1F5F8 55%, #FFFFFF 100%);
}

/* Dark twin for the inner page banner, which sits on its own navy gradient. */
.mesh-dark {
  background:
    radial-gradient(52rem 32rem at 12% 8%,  rgba(0, 194, 255, .22), transparent 62%),
    radial-gradient(44rem 30rem at 88% 22%, rgba(37, 230, 196, .18), transparent 60%),
    radial-gradient(60rem 34rem at 60% 100%, rgba(10, 99, 196, .28), transparent 65%),
    linear-gradient(180deg, #04121F 0%, #072133 55%, #04121F 100%);
}

.water-grid {
  background-image:
    linear-gradient(rgba(11, 32, 51, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 32, 51, .05) 1px, transparent 1px);
}

.stat-glow { background: radial-gradient(14rem 8rem at 50% 100%, rgba(0, 150, 210, .13), transparent 70%); }
.ripple     { border-color: rgba(3, 105, 161, .22); }

/* ---------- Gradient display type ---------- */
.grad-text {
  background-image: linear-gradient(100deg, #0F766E 0%, #0B7C66 26%, #0369A1 62%, #0F766E 100%);
}

/* ---------- Eyebrows ---------- */
.reveal-eyebrow        { color: var(--aqua-ink); }
.reveal-eyebrow::before { background: linear-gradient(90deg, var(--aqua-ink), transparent); }

/* ---------- Buttons ---------- */
.btn-ghost {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(11, 32, 51, .18);
  color: var(--tx);
}
.btn-ghost:hover {
  border-color: var(--aqua-ink);
  color: var(--aqua-ink);
  background: rgba(11, 122, 102, .07);
}

.btn-outline-aqua { border-color: rgba(11, 124, 102, .45); color: var(--aqua-ink); background: rgba(11, 124, 102, .05); }
.btn-outline-aqua:hover { background: var(--aqua-ink); color: #fff; border-color: var(--aqua-ink); }

.btn-primary { color: #04121F; }

/* ---------- Nav ---------- */
.nav-bar {
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 0 0 1px rgba(11, 32, 51, .10);
}
.nav-link { color: rgba(11, 32, 51, .78); }
.nav-link:hover { color: var(--tx); background: rgba(11, 32, 51, .06); }
.nav-mega__grid > a:hover { background: rgba(11, 32, 51, .05); }

.header-shell { background: rgba(241, 244, 247, .82); border-color: rgba(11, 32, 51, .10); }
#site-header.is-scrolled .header-shell {
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 12px 34px -24px rgba(11, 32, 51, .45);
  border-color: rgba(11, 32, 51, .12);
}

/* ---------- Footer ---------- */
.footer-head  { color: var(--aqua-ink); }
.footer-link  { color: rgba(11, 32, 51, .68); }
.footer-link:hover { color: var(--aqua-ink); }
.social-btn   { border-color: rgba(11, 32, 51, .16); color: rgba(11, 32, 51, .62); }
.social-btn:hover { color: #04121F; }

/* ---------- Forms ---------- */
.quote-form { background: #FFFFFF; border-color: rgba(11, 32, 51, .12); }

/* rgba(11,32,51,.58) only reaches 4.17:1 on the form's white card, which fails
   AA for these 13px labels. */
.field label { color: #55697D; } /* --tx-soft, 5.67:1 on white */
.field input,
.field select,
.field textarea {
  background: #FFFFFF;
  border-color: rgba(11, 32, 51, .16);
  color: var(--tx);
}
.field input::placeholder,
.field textarea::placeholder { color: #6B7C8F; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--cyan-ink);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(3, 105, 161, .13);
}
.quote-form input[type="checkbox"] { accent-color: var(--cyan-ink); }

/* Form-level error banner. text-red-100 / text-red-300 are pale-on-pale and
   effectively invisible on a white card (#FEE2E2 on a 7%-red tint is ~1.1:1),
   and this state only renders after a POST so a plain GET audit never sees it. */
body .bg-red-500\/10     { background-color: rgba(220, 38, 38, .07); }
body .border-red-400\/40 { border-color: rgba(220, 38, 38, .30); }
body .text-red-100      { color: #991B1B; }  /* 7.5:1 */
body .text-red-300      { color: #B91C1C; }  /* 5.9:1 */

/* Field-level validation state. Also POST-only, so a GET audit misses it:
   #FCA5A5 on a white card is 1.90:1 — unreadable at the 11.8px this message
   uses — and the old #F87171 field border was only 2.79:1 against white. */
.field__error { color: #B91C1C; }
.field__error::before {
  background: #DC2626;
  border-color: #DC2626;
  color: #FFFFFF;                                /* 4.9:1 on the badge */
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #DC2626;
  background: rgba(220, 38, 38, .05);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .10);
}
.field-error input,
.field-error select,
.field-error textarea {
  border-color: #DC2626;
  background: rgba(220, 38, 38, .05);
}

/* ---------- Misc components ---------- */
.process-arrow { color: rgba(11, 124, 102, .45); }

.carousel-btn { border-color: rgba(11, 32, 51, .18); color: var(--tx); background: rgba(255, 255, 255, .7); }
.carousel-btn:hover { background: var(--cyan-ink); border-color: var(--cyan-ink); color: #fff; }

.area-pill { border-color: rgba(11, 32, 51, .14); background: rgba(255, 255, 255, .72); color: rgba(11, 32, 51, .76); }
.area-pill::before { background: rgba(11, 124, 102, .55); }
.area-pill:hover { border-color: rgba(11, 124, 102, .5); color: var(--tx); background: rgba(11, 124, 102, .07); }
.area-pill:hover::before { background: var(--aqua-ink); box-shadow: 0 0 10px rgba(11, 124, 102, .5); }

.ticket { background: linear-gradient(140deg, rgba(3, 105, 161, .10), rgba(11, 124, 102, .07)); border-color: rgba(11, 124, 102, .35); }

.divider-wave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30c150 30 250-24 400-18s250 48 400 30 250-42 400-30v48H0Z' fill='%23F1F4F7'/%3E%3C/svg%3E");
}

.skip-link { color: #04121F; }
.service-card::before { background: linear-gradient(140deg, rgba(0, 150, 210, .45), transparent 45%, rgba(20, 190, 165, .3)); }
.faq__icon { color: var(--cyan-ink); }
.faq[open] .faq__icon { background: var(--cyan-ink); color: #fff; border-color: var(--cyan-ink); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .word-rise { transform: none !important; opacity: 1 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .fade-up { opacity: 1 !important; transform: none !important; }
  .hero__media img { transform: scale(1) !important; }
  .ripple { display: none; }
  .grad-text, .grad-text .word-rise { animation: none !important; }
}

/* ---------- Print ---------- */
@media print {
  header, footer, #mobile-nav, .fixed { display: none !important; }
  body { background: #fff; color: #000; }
}