/* ==========================================================================
   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;
  background:
    linear-gradient(90deg, rgba(4, 15, 26, .95) 0%, rgba(4, 15, 26, .8) 34%, rgba(4, 15, 26, .35) 62%, rgba(4, 15, 26, .65) 100%),
    linear-gradient(180deg, rgba(4, 15, 26, .8) 0%, transparent 30%, transparent 55%, rgba(4, 15, 26, .95) 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); }

.field-error input,
.field-error select,
.field-error textarea {
  border-color: #F87171;
  background: rgba(248, 113, 113, .07);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, .12);
}

/* ---------- 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; }

/* ---------- 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; }
}