/* Soak N Wet — design tokens, shared UI, marquee, CTA, scroll animations */

:root {
  /* Core palette — cool-tinted neutrals + coastal blues (hex + OKLCH for future-proof mixing) */
  --ink: #0f2d3d;
  --ink2: #16425b;
  --ink3: #1e4f6e;
  --ink4: #2f6690;
  --cyan: #81c3d7;
  --cyan-dk: #3a7ca5;
  --surface: #d9dcd6;
  /* Legacy alias used across inline page styles */
  --white: #d9dcd6;
  --surface-bright: #e8ebe6;
  --muted: #3a7ca5;
  --muted2: #2f6690;
  --border: rgba(129, 195, 215, 0.14);
  --font-d: "Barlow Condensed", system-ui, sans-serif;
  --font-b: "Space Grotesk", system-ui, sans-serif;

  /* Semantic text */
  --text-primary: var(--ink);
  --text-on-dark: rgba(217, 220, 214, 0.92);
  --text-on-dark-muted: rgba(217, 220, 214, 0.78);
  /* High-contrast label for text on deep ink / navy buttons (fixes low-contrast CTAs) */
  --text-on-ink: #f2f8f7;
  --text-on-cyan: var(--ink);

  /* Spacing rhythm */
  --section-y: clamp(4.5rem, 8vw, 7.5rem);
  --section-x: clamp(1.5rem, 5vw, 4rem);
  --prose-width: 65ch;

  /* Type scale (marketing) — fluid; small type floors ~12px for labels */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.18vw, 0.9375rem);
  --text-body: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
  --text-lead: clamp(1.02rem, 0.96rem + 0.25vw, 1.125rem);
  --display-1: clamp(2.65rem, 4.8vw, 4.75rem);
  --display-2: clamp(2.25rem, 4vw, 3.75rem);
  /* Shared display roles (Barlow Condensed) */
  --text-page-headline: clamp(3.5rem, 7vw, 6.5rem);
  --text-section-title: clamp(2rem, 3.5vw, 3rem);
  --text-section-title-wide: clamp(2.25rem, 3.5vw, 4rem);
  --text-story-title: clamp(2.5rem, 4vw, 3.5rem);
  --text-values-title: clamp(2.5rem, 4.5vw, 4rem);
  --text-stat-hero: clamp(4rem, 9vw, 8rem);
  --text-svc-num: clamp(3rem, 8vw, 5rem);
  --text-val-num: clamp(3rem, 7vw, 4rem);
  --text-sb-num: clamp(3.5rem, 7vw, 6rem);
  --text-sr-bg: clamp(4rem, 14vw, 8rem);
  --text-sr-name: clamp(1.5rem, 2.5vw, 2rem);
  --text-quote-deco: clamp(4rem, 12vw, 10rem);
  --text-hiw-watermark: clamp(4rem, 11vw, 7rem);

  /* Page hero / mesh — single system: Home .hero, all .ph blocks, same tokens everywhere */
  --gradient-page-hero: linear-gradient(
    135deg,
    rgba(232, 235, 230, 1) 0%,
    rgba(217, 220, 214, 0.97) 22%,
    rgba(190, 224, 236, 0.88) 45%,
    rgba(129, 195, 215, 0.52) 68%,
    rgba(58, 124, 165, 0.4) 86%,
    rgba(22, 66, 91, 0.26) 100%
  );
  /* Soft bloom overlay (used by .ph::before / .hero::before — do not duplicate different values elsewhere) */
  --hero-mesh-bloom: radial-gradient(
    ellipse 78% 68% at 84% 38%,
    rgba(129, 195, 215, 0.34) 0%,
    rgba(58, 124, 165, 0.22) 48%,
    rgba(22, 66, 91, 0.12) 64%,
    transparent 76%
  );
  --hero-noise-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Layout */
  --nav-h: 82px;
  --shadow-nav: 0 12px 40px rgba(15, 45, 61, 0.12);
  --border-nav: rgba(129, 195, 215, 0.18);
  --radius-sm: 3px;
  --radius-cta: 10px;
  --border-ui: rgba(22, 66, 91, 0.1);
  /* Matches page chrome — same bloom on all page shells */
  --body-surface-bloom: radial-gradient(
    ellipse 100% 42% at 50% 0%,
    rgba(129, 195, 215, 0.09),
    transparent 58%
  );
}

html {
  scroll-behavior: smooth;
}

/* Off-screen until focused — must not sit above the nav bar (blocks clicks / tel: links) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 0.65rem 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
  background: var(--cyan);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-nav);
  white-space: nowrap;
  pointer-events: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 0.75rem;
  top: 0.75rem;
  pointer-events: auto;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

#main-content {
  scroll-margin-top: calc(var(--nav-h) + 0.5rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

[data-stagger="0"] {
  transition-delay: 0ms;
}

/* Site-wide base: flat surface + one soft bloom (same token as page-home / contact) */
body {
  font-family: var(--font-b);
  font-size: var(--text-body);
  line-height: 1.65;
  background-color: var(--white);
  background-image: var(--body-surface-bloom);
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  body {
    background-image: radial-gradient(
      ellipse 100% 38% at 50% 0%,
      rgba(129, 195, 215, 0.07),
      transparent 55%
    );
  }
}

/* Prevent default browser purple visited links on CTAs/nav (marketing pages) */
a:visited {
  color: inherit;
}
nav .nav-links a:visited,
footer a:visited,
.btn-n:visited,
.btn-p:visited,
.btn-o:visited,
.phone-cta a:visited {
  color: inherit;
}

/* Nav link + CTA styling lives in site.css — nav[aria-label="Primary"] (all pages) */

/* Pre-footer phone CTA (all pages) */
.phone-cta {
  position: relative;
  background: var(--ink2);
  border-top: 1px solid var(--border);
  padding: clamp(5rem, 9vw, 9rem) var(--section-x);
  text-align: center;
  overflow: hidden;
  color: var(--white);
}
.phone-cta-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 40% 40% at 50% 50%,
    rgba(129, 195, 215, 0.14),
    transparent 70%
  );
}
.phone-cta-in {
  position: relative;
  z-index: 2;
}
.phone-cta .phone-cta-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1.25rem;
}
.phone-cta-num {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: clamp(2.5rem, 10vw, 8rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--cyan);
  text-decoration: none;
  display: block;
  margin-bottom: 2rem;
  transition: transform 0.25s ease, color 0.25s ease;
  word-break: keep-all;
  white-space: nowrap;
}
.phone-cta-num:hover {
  transform: scale(1.02);
  color: var(--white);
}

.phone-cta-num:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
  border-radius: 2px;
  color: var(--white);
}
.phone-cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

/* CTA pair uses .btn-n.btn-quote / .btn-n.btn-call (same as primary nav; see site.css) */

.phone-cta-note {
  color: var(--muted);
  font-size: var(--text-lead);
  max-width: 460px;
  margin: 0 auto 2rem;
  line-height: 1.8;
}

/* Double marquee */
.mq {
  border: none;
  padding: 0;
  background: var(--ink2);
  overflow: hidden;
  color: var(--white);
}
.mq-row {
  overflow: hidden;
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
  white-space: nowrap;
}
.mq-row:last-child {
  border-bottom: 1px solid var(--border);
}
.mq-track {
  display: inline-flex;
  animation: mq-ltr 30s linear infinite;
}
.mq-track:hover {
  animation-play-state: paused;
}
.mq-track-rev {
  animation: mq-rtl 40s linear infinite;
}
.mq-item:nth-child(odd) {
  color: var(--muted);
}
.mq-item:nth-child(even) {
  color: var(--cyan);
}
.mq-row-services .mq-item {
  font-size: 0.9rem;
}
.mq-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  margin: 0 0.85rem;
  vertical-align: middle;
}

@keyframes mq-ltr {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes mq-rtl {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Shared scroll-driven reveals (IntersectionObserver) */
[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
[data-animate="fade-up"].is-in {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade-left"] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo);
}
[data-animate="fade-left"].is-in {
  opacity: 1;
  transform: translateX(0);
}

[data-animate="fade-right"] {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo);
}
[data-animate="fade-right"].is-in {
  opacity: 1;
  transform: translateX(0);
}

[data-animate="hero-reveal"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
[data-animate="hero-reveal"].is-in {
  opacity: 1;
  transform: translateY(0);
}

[data-stagger="1"] {
  transition-delay: 0.08s;
}
[data-stagger="2"] {
  transition-delay: 0.16s;
}
[data-stagger="3"] {
  transition-delay: 0.24s;
}
[data-stagger="4"] {
  transition-delay: 0.32s;
}
[data-stagger="5"] {
  transition-delay: 0.4s;
}

[data-animate="fade-up"][data-hiw-delay="1"] {
  transition-delay: 0.15s;
}
[data-animate="fade-up"][data-hiw-delay="2"] {
  transition-delay: 0.3s;
}

[data-animate="fade-right"][data-svc-delay="1"] {
  transition-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .mq-track,
  .mq-track-rev {
    animation: none !important;
  }
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-animate].is-in {
    transition: none !important;
  }
}