/* ============================================================
   THEME: Coastal Classic — "the trustworthy pro"
   Deep navy + crisp white + sky blue + fresh grass green.
   Manrope everywhere, generous whitespace, soft shadows,
   16–20px radii. Light page, dramatic navy hero.
   Every rule scoped with [data-theme="coastal-classic"].
   Keyframes prefixed: cc-
   ============================================================ */

/* ---------- 1. Root custom properties ---------- */
html[data-theme="coastal-classic"] {
  --cc-navy: #0e1e42;
  --cc-navy-2: #14295c;
  --cc-navy-3: #1b3675;
  --cc-sky: #3b82f6;
  --cc-sky-light: #93c5fd;
  --cc-sky-dark: #2563eb;
  --cc-green: #15803d;      /* white text ≥4.9:1 (WCAG AA) */
  --cc-green-dark: #116932; /* white text ≥6:1 */
  --cc-green-light: #6ee7a0;
  --cc-white: #ffffff;
  --cc-bg: #f6f9fd;
  --cc-bg-alt: #eef4fb;
  --cc-ink: #16213c;
  --cc-ink-soft: #46557a;
  --cc-ink-faint: #566586; /* ≥4.5:1 on white and --cc-bg (WCAG AA) */
  --cc-line: #dde7f4;
  --cc-gold: #b7791f;       /* ≥3:1 non-text contrast on light cards */

  --cc-font: 'Manrope', system-ui, sans-serif;

  --cc-radius-sm: 12px;
  --cc-radius: 16px;
  --cc-radius-lg: 20px;

  --cc-shadow-sm: 0 2px 8px rgba(14, 30, 66, 0.06);
  --cc-shadow: 0 8px 30px rgba(14, 30, 66, 0.09);
  --cc-shadow-lg: 0 18px 50px rgba(14, 30, 66, 0.14);
  --cc-shadow-sky: 0 8px 26px rgba(59, 130, 246, 0.35);
  --cc-shadow-green: 0 8px 26px rgba(34, 169, 76, 0.35);
}

/* ---------- 2. Base body & typography ---------- */
[data-theme="coastal-classic"] body {
  font-family: var(--cc-font);
  background: var(--cc-bg);
  color: var(--cc-ink);
}

[data-theme="coastal-classic"] h1,
[data-theme="coastal-classic"] h2,
[data-theme="coastal-classic"] h3,
[data-theme="coastal-classic"] h4 {
  font-family: var(--cc-font);
  color: var(--cc-navy);
  letter-spacing: -0.015em;
}

[data-theme="coastal-classic"] .section-title .accent,
[data-theme="coastal-classic"] .hero-title .accent {
  color: var(--cc-sky);
}

/* ---------- 4. Header ---------- */
[data-theme="coastal-classic"] .site-header {
  background: var(--cc-white);
  border-bottom: 1px solid var(--cc-line);
}
[data-theme="coastal-classic"] .site-header.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 6px 24px rgba(14, 30, 66, 0.10);
  border-bottom: 1px solid rgba(221, 231, 244, 0.6);
}

[data-theme="coastal-classic"] .brand-logo {
  box-shadow: 0 0 0 3px var(--cc-white), 0 0 0 5px var(--cc-sky-light);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
[data-theme="coastal-classic"] .brand:hover .brand-logo {
  transform: rotate(-6deg) scale(1.05);
  box-shadow: 0 0 0 3px var(--cc-white), 0 0 0 5px var(--cc-sky);
}
[data-theme="coastal-classic"] .brand-name { color: var(--cc-navy); }
[data-theme="coastal-classic"] .brand-tag { color: var(--cc-sky-dark); }

[data-theme="coastal-classic"] .site-nav a { color: var(--cc-ink-soft); }
[data-theme="coastal-classic"] .site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cc-sky), var(--cc-green));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="coastal-classic"] .site-nav a:hover { color: var(--cc-navy); }
[data-theme="coastal-classic"] .site-nav a:hover::after { transform: scaleX(1); }

/* Header phone — #1 CTA */
[data-theme="coastal-classic"] .header-phone {
  background: linear-gradient(135deg, var(--cc-green), var(--cc-green-dark));
  color: var(--cc-white);
  box-shadow: var(--cc-shadow-green);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
[data-theme="coastal-classic"] .header-phone .phone-label { color: var(--cc-white); }
[data-theme="coastal-classic"] .header-phone:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(34, 169, 76, 0.45);
}

[data-theme="coastal-classic"] .nav-toggle { color: var(--cc-navy); }

/* Mobile nav panel (breakpoint matches base.css: 1060px) */
@media (max-width: 1060px) {
  [data-theme="coastal-classic"] .site-nav {
    background: var(--cc-navy);
    box-shadow: -12px 0 40px rgba(14, 30, 66, 0.35);
  }
  [data-theme="coastal-classic"] .site-nav a { color: rgba(255, 255, 255, 0.88); }
  [data-theme="coastal-classic"] .site-nav a:hover { color: var(--cc-white); }
  [data-theme="coastal-classic"] body.nav-open .nav-toggle { color: var(--cc-white); }
  /* Backdrop blur re-filters the whole bar every scroll frame — too costly
     on phones. A near-opaque solid reads almost identically. */
  [data-theme="coastal-classic"] .site-header.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.97);
  }
  /* Stop the always-on shimmer layer on the offer banner on mobile */
  [data-theme="coastal-classic"] .offer .offer-inner::before { animation: none; }
}

/* ---------- 5. Buttons ---------- */
[data-theme="coastal-classic"] .btn-primary {
  background: linear-gradient(135deg, var(--cc-green), var(--cc-green-dark));
  color: var(--cc-white);
  box-shadow: var(--cc-shadow-green);
  position: relative;
  overflow: hidden;
}
[data-theme="coastal-classic"] .btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-260%) skewX(-20deg);
  transition: transform 0.6s ease; /* compositor-only, no layout thrash */
}
[data-theme="coastal-classic"] .btn-primary:hover::before { transform: translateX(320%) skewX(-20deg); }
[data-theme="coastal-classic"] .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(34, 169, 76, 0.45);
}
[data-theme="coastal-classic"] .btn-primary:active { transform: translateY(-1px); }

[data-theme="coastal-classic"] .btn-secondary {
  background: var(--cc-white);
  color: var(--cc-navy);
  border-color: var(--cc-line);
  box-shadow: var(--cc-shadow-sm);
}
[data-theme="coastal-classic"] .btn-secondary:hover {
  border-color: var(--cc-sky);
  color: var(--cc-sky-dark);
  transform: translateY(-3px);
  box-shadow: var(--cc-shadow);
}

[data-theme="coastal-classic"] .btn-ghost {
  background: transparent;
  color: var(--cc-sky-dark);
  border-color: var(--cc-sky-light);
}
[data-theme="coastal-classic"] .btn-ghost:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: var(--cc-sky);
  transform: translateY(-2px);
}

/* Hero variants of secondary/ghost sit on navy */
[data-theme="coastal-classic"] .hero .btn-secondary {
  background: rgba(255, 255, 255, 0.10);
  color: var(--cc-white);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
[data-theme="coastal-classic"] .hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--cc-white);
}

/* ---------- 6. Hero — dramatic navy ---------- */
[data-theme="coastal-classic"] .hero {
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(59, 130, 246, 0.28), transparent 60%),
    radial-gradient(800px 500px at -10% 105%, rgba(34, 169, 76, 0.16), transparent 55%),
    linear-gradient(165deg, var(--cc-navy) 0%, var(--cc-navy-2) 55%, var(--cc-navy-3) 100%);
  color: rgba(255, 255, 255, 0.92);
  padding-bottom: clamp(6rem, 11vw, 9.5rem); /* room for the wave */
}

[data-theme="coastal-classic"] .hero-kicker {
  color: var(--cc-sky-light);
}
[data-theme="coastal-classic"] .hero-title { color: var(--cc-white); }
[data-theme="coastal-classic"] .hero-sub { color: rgba(255, 255, 255, 0.78); }
[data-theme="coastal-classic"] .hero-trust li { color: rgba(255, 255, 255, 0.85); }

/* SIGNATURE ANIMATION 1 — slow drifting water-drop shapes */
[data-theme="coastal-classic"] .hero-shape {
  border-radius: 58% 42% 55% 45% / 60% 55% 45% 40%; /* droplet-ish blob */
  filter: blur(2px);
  opacity: 0.6;
}
[data-theme="coastal-classic"] .hero-shape.shape-1 {
  width: 220px;
  height: 240px;
  top: 8%;
  right: 10%;
  background: radial-gradient(circle at 32% 28%, rgba(147, 197, 253, 0.5), rgba(59, 130, 246, 0.12) 70%);
  animation: cc-drift-1 16s ease-in-out infinite;
}
[data-theme="coastal-classic"] .hero-shape.shape-2 {
  width: 130px;
  height: 145px;
  top: 55%;
  left: 44%;
  background: radial-gradient(circle at 30% 25%, rgba(110, 231, 160, 0.4), rgba(34, 169, 76, 0.08) 70%);
  animation: cc-drift-2 20s ease-in-out infinite;
}
[data-theme="coastal-classic"] .hero-shape.shape-3 {
  width: 90px;
  height: 100px;
  top: 16%;
  left: 6%;
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.35), rgba(147, 197, 253, 0.08) 70%);
  animation: cc-drift-3 13s ease-in-out infinite;
}

@keyframes cc-drift-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%      { transform: translate(-28px, 26px) rotate(8deg) scale(1.06); }
  66%      { transform: translate(18px, -18px) rotate(-6deg) scale(0.96); }
}
@keyframes cc-drift-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  40%      { transform: translate(24px, -30px) rotate(-10deg) scale(1.08); }
  75%      { transform: translate(-16px, 14px) rotate(6deg) scale(0.94); }
}
@keyframes cc-drift-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(20px, 24px) rotate(12deg); }
}

/* SIGNATURE ANIMATION 2 — animated wave divider at hero bottom.
   Two layered wave strips (radial-gradient scallops) sliding at
   different speeds for a gentle parallax swell.
   Strips are double-width and slide via transform (GPU-composited)
   rather than background-position (per-frame repaint) — cheap on phones. */
[data-theme="coastal-classic"] .hero-wave {
  left: 0;
  width: calc(100% + 200px);
  bottom: -2px;
  height: 76px;
  background:
    radial-gradient(circle at 25px -14px, transparent 34px, rgba(246, 249, 253, 0.45) 35px);
  background-size: 100px 76px;
  background-repeat: repeat-x;
  animation: cc-wave-back 13s linear infinite;
  will-change: transform;
}
[data-theme="coastal-classic"] .hero-wave::after {
  content: "";
  position: absolute;
  left: 0;
  width: calc(100% + 260px);
  bottom: 0;
  height: 58px;
  background:
    radial-gradient(circle at 40px -20px, transparent 40px, var(--cc-bg) 41px);
  background-size: 130px 58px;
  background-repeat: repeat-x;
  animation: cc-wave-front 9s linear infinite reverse;
  will-change: transform;
}
@keyframes cc-wave-back  { from { transform: translateX(-200px); } to { transform: translateX(0); } }
@keyframes cc-wave-front { from { transform: translateX(-260px); } to { transform: translateX(0); } }

/* Hero logo card — navy logo blends into navy hero, framed in glass */
[data-theme="coastal-classic"] .hero-logo-card {
  background: rgba(255, 255, 255, 0.06);
  padding: 14px;
  border: 1px solid rgba(147, 197, 253, 0.35);
  box-shadow: 0 24px 60px rgba(4, 10, 26, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  animation: cc-hero-float 7s ease-in-out infinite;
}
[data-theme="coastal-classic"] .hero-logo { border-radius: 14px; }
@keyframes cc-hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ---------- 7. Stats strip ---------- */
[data-theme="coastal-classic"] .stats {
  background: var(--cc-white);
  border-bottom: 1px solid var(--cc-line);
}
[data-theme="coastal-classic"] .stat-num,
[data-theme="coastal-classic"] .stat-suffix { color: var(--cc-sky-dark); }
[data-theme="coastal-classic"] .stat-suffix { color: var(--cc-green); }
[data-theme="coastal-classic"] .stat-label { color: var(--cc-ink-faint); }

/* ---------- 8. Section heads ---------- */
[data-theme="coastal-classic"] .section-kicker {
  color: var(--cc-sky-dark);
}
[data-theme="coastal-classic"] .section-kicker::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 3px;
  border-radius: 3px;
  margin-right: 0.6rem;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--cc-sky), var(--cc-green));
}
[data-theme="coastal-classic"] .section-title { color: var(--cc-navy); }
[data-theme="coastal-classic"] .section-sub { color: var(--cc-ink-soft); }

/* ---------- 9. Services ---------- */
[data-theme="coastal-classic"] .services { background: var(--cc-bg); }

[data-theme="coastal-classic"] .service-card {
  background: var(--cc-white);
  border: 1px solid var(--cc-line);
  box-shadow: var(--cc-shadow-sm);
}
/* SIGNATURE ANIMATION 3 (family) — gentle card hover lifts */
[data-theme="coastal-classic"] .service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--cc-shadow-lg);
  border-color: rgba(59, 130, 246, 0.35);
}
[data-theme="coastal-classic"] .service-card h3 { color: var(--cc-navy); }
[data-theme="coastal-classic"] .service-card p { color: var(--cc-ink-soft); }

[data-theme="coastal-classic"] .service-icon {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(34, 169, 76, 0.12));
  border: 1px solid rgba(59, 130, 246, 0.18);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="coastal-classic"] .service-card:hover .service-icon {
  transform: scale(1.1) rotate(-5deg);
}

/* ---------- 10. Offer banner ---------- */
[data-theme="coastal-classic"] .offer .offer-inner {
  background:
    radial-gradient(700px 320px at 90% 0%, rgba(59, 130, 246, 0.35), transparent 60%),
    linear-gradient(140deg, var(--cc-navy), var(--cc-navy-3));
  color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--cc-shadow-lg);
  border: 1px solid rgba(147, 197, 253, 0.25);
  position: relative;
  overflow: hidden;
}
[data-theme="coastal-classic"] .offer .offer-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(147, 197, 253, 0.10) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: cc-offer-shimmer 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cc-offer-shimmer {
  0%, 55% { transform: translateX(-100%); }
  85%, 100% { transform: translateX(100%); }
}
[data-theme="coastal-classic"] .offer-badge {
  background: var(--cc-green);
  color: var(--cc-white);
  box-shadow: 0 4px 14px rgba(34, 169, 76, 0.4);
}
[data-theme="coastal-classic"] .offer-title { color: var(--cc-white); }
[data-theme="coastal-classic"] .offer-sub { color: rgba(255, 255, 255, 0.75); }

/* ---------- 11. About ---------- */
[data-theme="coastal-classic"] .about { background: var(--cc-white); }
[data-theme="coastal-classic"] .about-copy p { color: var(--cc-ink-soft); }
[data-theme="coastal-classic"] .about-points li { color: var(--cc-ink-soft); }
[data-theme="coastal-classic"] .about-points li strong { color: var(--cc-navy); }
[data-theme="coastal-classic"] .about-points li::before { color: var(--cc-green); }

[data-theme="coastal-classic"] .about-logo-card {
  background: linear-gradient(160deg, var(--cc-navy), var(--cc-navy-3));
  padding: 16px;
  box-shadow: var(--cc-shadow-lg);
  border: 1px solid rgba(147, 197, 253, 0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
[data-theme="coastal-classic"] .about-logo { border-radius: 14px; }
[data-theme="coastal-classic"] .about-logo-card:hover {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 26px 60px rgba(14, 30, 66, 0.22);
}

/* ---------- 12. How it works ---------- */
[data-theme="coastal-classic"] .how { background: var(--cc-bg-alt); }
[data-theme="coastal-classic"] .step {
  background: var(--cc-white);
  border: 1px solid var(--cc-line);
  box-shadow: var(--cc-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
[data-theme="coastal-classic"] .step:hover {
  transform: translateY(-6px);
  box-shadow: var(--cc-shadow);
}
[data-theme="coastal-classic"] .step h3 { color: var(--cc-navy); }
[data-theme="coastal-classic"] .step p { color: var(--cc-ink-soft); }
[data-theme="coastal-classic"] .step-num {
  background: linear-gradient(135deg, var(--cc-sky), var(--cc-sky-dark));
  color: var(--cc-white);
  box-shadow: var(--cc-shadow-sky);
}

/* ---------- 13. Reviews ---------- */
[data-theme="coastal-classic"] .reviews { background: var(--cc-white); }
[data-theme="coastal-classic"] .review-card {
  background: var(--cc-bg);
  border: 1px solid var(--cc-line);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
[data-theme="coastal-classic"] .review-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--cc-shadow);
  border-color: rgba(59, 130, 246, 0.3);
}
[data-theme="coastal-classic"] .review-stars { color: var(--cc-gold); }
[data-theme="coastal-classic"] .review-card p { color: var(--cc-ink-soft); }
[data-theme="coastal-classic"] .review-card footer { color: var(--cc-ink-faint); }
[data-theme="coastal-classic"] .review-card cite { color: var(--cc-navy); }

/* ---------- 14. Areas ---------- */
[data-theme="coastal-classic"] .areas { background: var(--cc-bg-alt); }
[data-theme="coastal-classic"] .areas-list li {
  background: var(--cc-white);
  color: var(--cc-ink-soft);
  border: 1px solid var(--cc-line);
  box-shadow: var(--cc-shadow-sm);
}
[data-theme="coastal-classic"] .areas-list li:hover {
  background: var(--cc-sky-dark); /* white text ≥5:1 */
  border-color: var(--cc-sky-dark);
  color: var(--cc-white);
  transform: translateY(-3px);
}

/* ---------- 15. Contact ---------- */
[data-theme="coastal-classic"] .contact { background: var(--cc-white); }
[data-theme="coastal-classic"] .contact-copy > p { color: var(--cc-ink-soft); }

[data-theme="coastal-classic"] .contact-method {
  background: var(--cc-bg);
  border: 1px solid var(--cc-line);
}
[data-theme="coastal-classic"] .contact-method:hover {
  transform: translateY(-4px);
  box-shadow: var(--cc-shadow);
  border-color: rgba(59, 130, 246, 0.35);
}
[data-theme="coastal-classic"] .method-icon {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(34, 169, 76, 0.14));
  border: 1px solid rgba(59, 130, 246, 0.2);
}
[data-theme="coastal-classic"] .method-body strong { color: var(--cc-navy); }
[data-theme="coastal-classic"] .method-body span { color: var(--cc-ink-faint); }

/* First contact method (the phone) gets the strongest treatment */
[data-theme="coastal-classic"] .contact-methods .contact-method:first-child {
  background: linear-gradient(135deg, var(--cc-green), var(--cc-green-dark));
  border-color: transparent;
  box-shadow: var(--cc-shadow-green);
}
[data-theme="coastal-classic"] .contact-methods .contact-method:first-child .method-icon {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}
[data-theme="coastal-classic"] .contact-methods .contact-method:first-child .method-body strong,
[data-theme="coastal-classic"] .contact-methods .contact-method:first-child .method-body span {
  color: var(--cc-white);
}
[data-theme="coastal-classic"] .contact-methods .contact-method:first-child:hover {
  box-shadow: 0 14px 36px rgba(34, 169, 76, 0.45);
}

/* Contact form card */
[data-theme="coastal-classic"] .contact-form {
  background: var(--cc-white);
  border: 1px solid var(--cc-line);
  box-shadow: var(--cc-shadow-lg);
}
[data-theme="coastal-classic"] .contact-form h3 { color: var(--cc-navy); }
[data-theme="coastal-classic"] .form-field label { color: var(--cc-ink-soft); }
[data-theme="coastal-classic"] .form-field input,
[data-theme="coastal-classic"] .form-field textarea {
  background: var(--cc-bg);
  border-color: var(--cc-line);
  color: var(--cc-ink);
}
[data-theme="coastal-classic"] .form-field input::placeholder,
[data-theme="coastal-classic"] .form-field textarea::placeholder {
  color: var(--cc-ink-faint);
  opacity: 1; /* --cc-ink-faint already ≥5:1 on the input bg */
}
[data-theme="coastal-classic"] .form-field input:focus,
[data-theme="coastal-classic"] .form-field textarea:focus {
  outline: none;
  border-color: var(--cc-sky);
  background: var(--cc-white);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}
[data-theme="coastal-classic"] .form-note { color: var(--cc-ink-faint); }
[data-theme="coastal-classic"] .form-success {
  background: rgba(34, 169, 76, 0.1);
  border: 1px solid rgba(34, 169, 76, 0.35);
  color: var(--cc-green-dark);
}
[data-theme="coastal-classic"] .form-success a { color: var(--cc-green-dark); }

/* ---------- 16. Footer ---------- */
[data-theme="coastal-classic"] .site-footer {
  background: var(--cc-navy);
  color: rgba(255, 255, 255, 0.72);
}
[data-theme="coastal-classic"] .footer-logo {
  border: 1px solid rgba(147, 197, 253, 0.3);
  box-shadow: 0 8px 24px rgba(4, 10, 26, 0.4);
}
[data-theme="coastal-classic"] .footer-brand p { color: rgba(255, 255, 255, 0.65); }
[data-theme="coastal-classic"] .footer-col h4 { color: var(--cc-sky-light); }
[data-theme="coastal-classic"] .footer-col a { color: rgba(255, 255, 255, 0.78); transition: color 0.25s ease, transform 0.25s ease; }
[data-theme="coastal-classic"] .footer-col a:hover { color: var(--cc-green-light); transform: translateX(3px); }
[data-theme="coastal-classic"] .footer-col p { color: rgba(255, 255, 255, 0.6); }
[data-theme="coastal-classic"] .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- 17. Floating call button ---------- */
/* SIGNATURE ANIMATION 4 — pulsing floating call button */
[data-theme="coastal-classic"] .floating-call {
  background: linear-gradient(135deg, var(--cc-green), var(--cc-green-dark));
  color: var(--cc-white);
  box-shadow: 0 10px 30px rgba(34, 169, 76, 0.5);
  position: fixed;
  animation: cc-call-bob 3.2s ease-in-out infinite;
}
/* Pulse ring uses transform+opacity (GPU-composited), not box-shadow */
[data-theme="coastal-classic"] .floating-call::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 3px solid rgba(34, 169, 76, 0.55);
  animation: cc-call-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes cc-call-pulse {
  0%   { transform: scale(1); opacity: 0.9; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}
@keyframes cc-call-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* Press feedback must clear the bob animation, which otherwise owns transform */
[data-theme="coastal-classic"] .floating-call:active { animation: none; transform: scale(0.96); }

/* ---------- 18. Reveal-on-scroll personality ----------
   The hidden state applies only while JS is running (html.js) AND the element
   has not been revealed yet (:not(.visible)). Once .visible is added the
   element stops matching the hidden rule entirely, so there is no specificity
   battle — a revealed element can never be re-hidden. And with no JS (no
   html.js) nothing is hidden, so content never blanks. The reveal is just the
   element's natural state (opacity 1, no transform); the transition on the
   always-matching rule animates the change. */
html.js[data-theme="coastal-classic"] .reveal {
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
html.js[data-theme="coastal-classic"] .reveal:not(.visible) {
  opacity: 0;
  transform: translateY(26px);
}
/* Hero media pops in with a touch of scale for extra polish */
html.js[data-theme="coastal-classic"] .hero-media.reveal:not(.visible) {
  transform: translateY(26px) scale(0.95);
}

/* ---------- 19. Responsive polish ---------- */
@media (max-width: 1060px) {
  [data-theme="coastal-classic"] .hero-shape.shape-1 { width: 140px; height: 155px; right: -6%; }
  [data-theme="coastal-classic"] .hero-shape.shape-2 { display: none; }
  [data-theme="coastal-classic"] .hero-shape.shape-3 { width: 64px; height: 72px; }
  /* tile widths must divide the keyframe translate distances (200px / 260px) */
  [data-theme="coastal-classic"] .hero-wave { height: 52px; background-size: 100px 52px; }
  [data-theme="coastal-classic"] .hero-wave::after { height: 40px; background-size: 130px 40px; }
  [data-theme="coastal-classic"] .hero { padding-bottom: clamp(5rem, 14vw, 7rem); }
  [data-theme="coastal-classic"] .hero-logo-card { animation: none; }
  [data-theme="coastal-classic"] .header-phone {
    box-shadow: 0 6px 18px rgba(34, 169, 76, 0.4);
  }
}

/* ---------- 20. Reduced motion (extra safety on top of base) ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-theme="coastal-classic"] .hero-shape,
  [data-theme="coastal-classic"] .hero-wave,
  [data-theme="coastal-classic"] .hero-wave::after,
  [data-theme="coastal-classic"] .hero-logo-card,
  [data-theme="coastal-classic"] .floating-call,
  [data-theme="coastal-classic"] .floating-call::before,
  [data-theme="coastal-classic"] .offer .offer-inner::before {
    animation: none !important;
  }
}