:root{
  --ink:#17233D;
  --ink-soft:#3A4E68;
  --ocean:#2C5D82;
  --ocean-deep:#142B42;
  --aqua:#5D8AA0;
  --aqua-pale:#E4ECEF;
  --sand:#F4EFE3;
  --sand-dim:#EAE2CE;
  --brass:#8A7328;
  --brass-deep:#5D4E1E;
  --white:#FFFFFF;
  --line: rgba(23,35,61,0.14);
  --shadow: 0 20px 50px -25px rgba(23,35,61,0.35);
  --radius: 14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces',serif;
  font-weight:650;
  line-height:1.05;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0;
}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ocean);
  font-weight:500;
}
.eyebrow.on-dark{ color:var(--aqua); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
section{ position:relative; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:999px;
  font-weight:600; font-size:0.98rem; cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--ocean); color:var(--white); box-shadow:0 12px 28px -12px rgba(28,110,140,0.55); }
.btn-primary:hover{ background:var(--ocean-deep); }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,0.4); color:var(--white); }
.btn-ghost:hover{ background:rgba(255,255,255,0.12); }
.btn-dark{ background:var(--ink); color:var(--white); }
.btn-dark:hover{ background:var(--ocean-deep); }
.btn-brass{ background:var(--brass); color:var(--white); }
.btn-brass:hover{ background:var(--brass-deep); }
.btn-outline{ background:transparent; border-color:var(--ocean); color:var(--ocean); }
.btn-outline:hover{ background:var(--aqua-pale); }

/* HEADER */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,239,227,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1120px; margin:0 auto; }
/* flex-shrink:0 on the brand and nowrap on the badge. Without them the header
   squeezes the wordmark as the viewport narrows, "POOL SERVICE OBX" wraps to
   three stacked lines, and the nav links get drawn straight over the top of it. */
.wordmark{ font-family:'Fraunces',serif; font-weight:650; font-size:1.18rem; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.wordmark span{ color:var(--ocean); }
.logo-img{ height:34px; width:auto; display:block; }
.wordmark-sub{
  font-family:'IBM Plex Mono',monospace; font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ocean-deep); background:var(--aqua-pale); padding:4px 10px; border-radius:999px; font-weight:600;
  white-space:nowrap;
}
footer .wordmark-sub{ color:var(--aqua); background:rgba(255,255,255,0.1); white-space:normal; }
.nav-links{ display:flex; align-items:center; gap:14px; }
.nav-links a{ font-size:0.86rem; font-weight:500; color:var(--ink-soft); white-space:nowrap; }
.nav-links a:hover, .nav-links a.active{ color:var(--ocean); }
.nav-call{
  display:flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:0.86rem;
  padding:8px 14px; border:1px solid var(--ocean); border-radius:999px; color:var(--ocean);
  white-space:nowrap; flex-shrink:0;
}
/* Seven items plus the wordmark and the phone pill need ~1050px of the header's
   1064px of usable width, so the desktop nav only fits at full size. Below that
   it hands off to the hamburger (which carries every link) rather than shrinking
   into itself - the squeeze is what produced overlapping text before. */
@media(max-width:1140px){ .nav-links{ gap:11px; } .nav-links a{ font-size:0.82rem; } }
@media(max-width:1080px){ .nav-links{ display:none; } }
@media(max-width:560px){ .nav-call{ display:none; } }

/* MOBILE MENU */
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;
}
.menu-toggle span{
  display:block; width:100%; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{
  display:none; flex-direction:column;
  max-height:0; overflow:hidden;
  background:var(--white); border-top:1px solid var(--line);
  transition:max-height .25s ease;
}
.mobile-menu.open{ max-height:520px; }
.mobile-menu a{
  padding:14px 28px; font-size:0.98rem; color:var(--ink-soft);
  border-bottom:1px solid var(--line); text-decoration:none;
}
.mobile-menu a.active{ color:var(--ocean); font-weight:600; }
.mobile-menu .mobile-menu-call{ color:var(--ocean); font-weight:600; font-family:'IBM Plex Mono',monospace; }
@media(max-width:1080px){
  .menu-toggle{ display:flex; }
  .mobile-menu{ display:flex; }
}

/* PAGE HERO (interior pages, smaller than homepage hero) */
.page-hero{
  background:linear-gradient(180deg, var(--ink) 0%, var(--ocean-deep) 55%, var(--ocean) 100%);
  color:var(--white);
  padding:72px 0 64px;
}
.page-hero h1{ color:var(--white); font-size:clamp(2rem,4vw,2.9rem); max-width:680px; }
.page-hero p.lead{ margin-top:16px; font-size:1.08rem; color:rgba(255,255,255,0.82); max-width:560px; }
.page-hero .hero-cta-row{ margin-top:28px; display:flex; gap:16px; flex-wrap:wrap; }
.waterline{ display:block; width:100%; height:56px; margin-top:-1px; }

/* TRUST BAR */
.trust{ background:var(--white); border-bottom:1px solid var(--line); padding:26px 0; }
.trust-row{ display:flex; flex-wrap:wrap; gap:32px; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:0.82rem; letter-spacing:0.04em; color:var(--ink-soft); }
.trust-row strong{ color:var(--ink); font-weight:600; }
.flag{ font-size:0.68rem; background:var(--aqua-pale); color:var(--ocean-deep); border-radius:5px; padding:1px 7px; margin-left:6px; font-family:'Inter',sans-serif; font-weight:600; vertical-align:middle; }

/* SECTIONS */
.section{ padding:80px 0; }
.section.tight{ padding:56px 0; }
.section-head{ max-width:660px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-top:10px; }
.section-head p{ margin-top:14px; color:var(--ink-soft); font-size:1.03rem; }
.fade{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.fade.in{ opacity:1; transform:none; }
.alt-bg{ background:var(--sand-dim); }

/* CHEMISTRY GRID (reused) */
.chem-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media(max-width:760px){ .chem-grid{ grid-template-columns:1fr; } }
.chem-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.chem-index{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--brass-deep); letter-spacing:0.08em; margin-bottom:14px; display:block; }
.chem-card h3{ font-size:1.12rem; font-weight:650; }
.chem-card p{ margin-top:8px; color:var(--ink-soft); font-size:0.95rem; }

/* PACKAGE TIERS (service page) */
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px){ .tier-grid{ grid-template-columns:1fr; } }
.tier-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media(max-width:760px){ .tier-grid-2{ grid-template-columns:1fr; } }
.tier-group-label{ font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ocean); margin:0 0 14px; }
.tier-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 26px; display:flex; flex-direction:column;
}
.tier-card.featured{ border-color:var(--ocean); box-shadow:var(--shadow); position:relative; }
.tier-badge{
  position:absolute; top:-13px; left:26px;
  background:var(--ocean); color:var(--white);
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.06em;
  padding:4px 12px; border-radius:999px;
}
.tier-name{ font-family:'Fraunces',serif; font-weight:650; font-size:1.3rem; }
.tier-price{ margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:0.92rem; color:var(--ink-soft); }
.tier-list{ list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:10px; flex:1; }
.tier-list li{ font-size:0.93rem; color:var(--ink-soft); padding-left:20px; position:relative; }
.tier-list li::before{ content:"✓"; position:absolute; left:0; color:var(--ocean); font-weight:700; }
.tier-card .btn{ margin-top:24px; justify-content:center; }

/* TOWN / SERVICE AREA GRID */
.town-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:860px){ .town-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .town-grid{ grid-template-columns:1fr; } }
.town-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; position:relative;
}
.town-card h3{ font-size:1.05rem; font-weight:650; }
.town-card p{ margin-top:8px; font-size:0.9rem; color:var(--ink-soft); }
.town-card .flag{ position:absolute; top:20px; right:20px; }
.map-block{
  aspect-ratio:16/7; border-radius:var(--radius);
  background:linear-gradient(155deg, var(--aqua-pale), var(--sand-dim));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  font-family:'IBM Plex Mono',monospace; font-size:0.85rem; color:var(--ocean-deep);
  margin-bottom:44px;
}
@media(max-width:560px){ .map-block{ aspect-ratio:4/5; } }
.map-block iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* REPAIR GRID */
.repair-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media(max-width:760px){ .repair-grid{ grid-template-columns:1fr; } }
.repair-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.repair-card h3{ font-size:1.1rem; font-weight:650; }
.repair-card p{ margin-top:8px; color:var(--ink-soft); font-size:0.95rem; }

/* ABOUT PAGE */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media(max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
.about-photo{
  aspect-ratio:4/5; border-radius:var(--radius); position:relative; overflow:hidden;
  background:linear-gradient(155deg, rgba(79,184,201,0.35), rgba(14,42,59,0.6));
  display:flex; align-items:flex-end; padding:18px;
  border:1px solid var(--line);
}
.about-photo span{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:rgba(255,255,255,0.85); }
.timeline{ display:flex; flex-direction:column; gap:0; margin-top:8px; }
.timeline-row{ display:grid; grid-template-columns:110px 1fr; gap:20px; padding:20px 0; border-top:1px solid var(--line); }
.timeline-row:first-child{ border-top:none; }
.timeline-year{ font-family:'IBM Plex Mono',monospace; font-size:0.85rem; color:var(--ocean); font-weight:500; }
.timeline-row h4{ font-family:'Fraunces',serif; font-weight:650; font-size:1.02rem; }
.timeline-row p{ margin-top:6px; font-size:0.92rem; color:var(--ink-soft); }

/* PROOF (reused) */
.proof{ background:var(--ocean-deep); color:var(--white); }
.proof-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
@media(max-width:900px){ .proof-grid{ grid-template-columns:1fr; } }
.proof-stat{ font-family:'Fraunces',serif; font-weight:650; font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1; color:var(--white); }
.proof-stat .unit{ font-size:0.4em; color:var(--aqua); font-weight:600; margin-left:4px; }
.proof-copy{ margin-top:18px; color:rgba(255,255,255,0.82); font-size:1rem; max-width:440px; }
.proof-photos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.photo-block{
  aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; position:relative;
  background:linear-gradient(155deg, rgba(79,184,201,0.35), rgba(14,42,59,0.6));
  display:flex; align-items:flex-end; padding:16px;
  border:1px solid rgba(255,255,255,0.15);
}
.photo-block img, .photo-block video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.photo-block .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,42,59,0) 45%, rgba(14,42,59,0.8) 100%); z-index:1; }
.photo-block span{ position:relative; z-index:2; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:rgba(255,255,255,0.92); }

/* REVIEWS */
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px){ .reviews-grid{ grid-template-columns:1fr; } }
.review-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.stars{ color:var(--brass); font-size:0.95rem; letter-spacing:2px; margin-bottom:14px; }
.review-card p{ font-size:0.96rem; color:var(--ink-soft); }
.review-name{ margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--ink); }
.review-cta{
  margin-top:36px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  padding:24px 28px; background:var(--aqua-pale); border-radius:var(--radius);
}
.review-cta p{ font-size:0.96rem; color:var(--ocean-deep); font-weight:500; }

/* SALTWATER BAND */
.salt-band{ background:linear-gradient(90deg, var(--brass) 0%, var(--brass-deep) 100%); color:var(--white); }
.salt-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:36px 0; }
.salt-inner h3{ color:var(--white); font-size:1.35rem; }
.salt-inner p{ margin-top:6px; color:rgba(255,255,255,0.88); font-size:0.98rem; max-width:480px; }

/* CTA / FORM */
.cta-section{ background:var(--sand-dim); }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media(max-width:860px){ .cta-grid{ grid-template-columns:1fr; } }
.cta-copy h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); }
.cta-copy p{ margin-top:16px; color:var(--ink-soft); font-size:1.05rem; max-width:420px; }
.cta-phone{ margin-top:28px; display:inline-flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',monospace; font-size:1.1rem; font-weight:500; color:var(--ocean); }
form{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); }
.form-row{ margin-bottom:18px; }
.form-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label{ display:block; font-size:0.82rem; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
input, select, textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:8px;
  font-family:'Inter',sans-serif; font-size:0.95rem; color:var(--ink); background:var(--sand);
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--aqua); outline-offset:1px; }
textarea{ min-height:88px; resize:vertical; }
.form-submit{ width:100%; justify-content:center; margin-top:6px; }

/* CONTACT PAGE EXTRAS */
.contact-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
@media(max-width:820px){ .contact-info-grid{ grid-template-columns:1fr; } }
.info-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.info-card h4{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ocean); margin-bottom:10px; }
.info-card p{ font-size:0.95rem; color:var(--ink-soft); line-height:1.6; }

/* PRICE SUMMARY STRIP */
.price-summary{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:24px 0 40px; }
@media(max-width:760px){ .price-summary{ grid-template-columns:repeat(2,1fr); } }
.price-summary-item{
  display:block; background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:12px 10px; text-align:center; text-decoration:none; transition:border-color .15s ease;
}
.price-summary-item:hover{ border-color:var(--ocean); }
.price-summary-item .ps-name{ font-size:0.74rem; color:var(--ink-soft); display:block; }
.price-summary-item .ps-price{ font-family:'IBM Plex Mono',monospace; font-size:0.92rem; font-weight:600; color:var(--ink); display:block; margin-top:4px; }

/* HERO PRICE STRIP — prominent, on dark hero background */
.hero-price-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
@media(max-width:760px){ .hero-price-strip{ grid-template-columns:repeat(2,1fr); } }
.hero-price-item{
  display:block; background:var(--white); border-radius:10px;
  padding:14px 10px; text-align:center; text-decoration:none;
  box-shadow:var(--shadow); transition:transform .15s ease;
}
.hero-price-item:hover{ transform:translateY(-2px); }
.hero-price-item .hp-name{ font-size:0.72rem; color:var(--ink-soft); display:block; }
.hero-price-item .hp-price{ font-family:'IBM Plex Mono',monospace; font-size:1.05rem; font-weight:600; color:var(--ocean-deep); display:block; margin-top:5px; }
.hero-price-item .hp-cue{ font-size:0.68rem; color:var(--ocean); display:block; margin-top:6px; }

/* INLINE TRUST STRIP (proof near pricing) */
.proof-inline{
  background:var(--aqua-pale); border-radius:12px; padding:16px 20px; margin:0 0 8px;
  display:flex; gap:28px; flex-wrap:wrap; align-items:center;
}
.proof-inline span{ font-size:0.9rem; color:var(--ocean-deep); }
.proof-inline a{ font-size:0.9rem; color:var(--ocean-deep); text-decoration:underline; }

/* TEXT SHORTCUT LINK */
.text-shortcut{ display:block; margin-top:10px; font-size:0.82rem; color:var(--ocean); text-align:center; text-decoration:none; }
.text-shortcut:hover{ text-decoration:underline; }

/* CHECKLIST SECTION */
.checklist-quote{
  font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:1.15rem;
  color:var(--ink); border-left:3px solid var(--ocean); padding-left:20px; margin:0 0 32px; max-width:640px;
}
.checklist-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 24px; }
@media(max-width:760px){ .checklist-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .checklist-grid{ grid-template-columns:1fr; } }
.checklist-item{ display:flex; align-items:baseline; gap:8px; font-size:0.95rem; color:var(--ink-soft); }
.checklist-item::before{ content:"✓"; color:var(--ocean); font-weight:700; flex-shrink:0; }
.proof .checklist-item::before{ color:var(--aqua); }

/* PILLAR BADGE ROW */
.pillar-row{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 32px; }
.pillar-badge{
  font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--ocean-deep);
  background:var(--aqua-pale); padding:6px 14px; border-radius:999px;
}

/* REVIEW SUBMISSION FORM */
.star-rating{ display:flex; gap:6px; margin-bottom:4px; }
.star-btn{
  background:none; border:none; cursor:pointer; padding:2px;
  font-size:1.8rem; line-height:1; color:var(--line);
}
.star-btn.filled{ color:var(--brass); }
.review-form-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; max-width:520px;
}

/* GALLERY */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-item{
  border-radius:var(--radius); overflow:hidden; position:relative;
  aspect-ratio:4/3; border:1px solid var(--line);
}
.gallery-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gallery-item .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,42,59,0) 55%, rgba(14,42,59,0.78) 100%); }
.gallery-caption{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:rgba(255,255,255,0.95); letter-spacing:0.03em;
}

/* FOOTER */
footer{ background:var(--ink); color:rgba(255,255,255,0.7); padding:56px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.12); }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
footer h4{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:14px; }
footer .wordmark{ color:var(--white); }
footer .wordmark span{ color:var(--aqua); }
footer p.tag{ margin-top:10px; font-size:0.92rem; color:rgba(255,255,255,0.55); max-width:280px; }
.footer-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.footer-list li{ font-size:0.92rem; }
.footer-list a:hover{ color:var(--aqua); }
.footer-bottom{ padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.8rem; color:rgba(255,255,255,0.4); font-family:'IBM Plex Mono',monospace; }

/* PROMO POP-UP
   Deliberately not a full-screen mobile interstitial: Google demotes those in
   mobile search, and this site is being built to be found. On phones it is a
   bottom sheet that leaves the page readable behind it; on desktop, a centered
   card. Injected by promo.js so the markup lives in one place. */
.promo-backdrop{
  position:fixed; inset:0; background:rgba(20,43,66,0.45); z-index:900;
  opacity:0; transition:opacity .25s ease; display:none;
}
.promo-backdrop.show{ display:block; opacity:1; }
@media(max-width:640px){ .promo-backdrop{ background:rgba(20,43,66,0.28); } }

.promo{
  position:fixed; z-index:901; background:var(--white); border-radius:var(--radius);
  box-shadow:0 30px 70px -20px rgba(23,35,61,0.5); padding:30px 32px 28px;
  max-width:440px; width:calc(100% - 32px);
  left:50%; top:50%; transform:translate(-50%,-46%);
  opacity:0; pointer-events:none; transition:opacity .28s ease, transform .28s ease;
}
.promo.show{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
@media(max-width:640px){
  .promo{
    top:auto; bottom:0; left:0; transform:translateY(16px);
    width:100%; max-width:none; border-radius:var(--radius) var(--radius) 0 0;
    padding:26px 22px 24px;
  }
  .promo.show{ transform:translateY(0); }
}
@media(prefers-reduced-motion:reduce){
  .promo, .promo-backdrop{ transition:none; }
}
.promo-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--brass); margin:0 0 10px;
}
.promo h3{ font-size:1.42rem; line-height:1.18; margin:0; }
.promo p{ margin:12px 0 0; color:var(--ink-soft); font-size:0.97rem; line-height:1.6; }
.promo .btn{ margin-top:20px; width:100%; justify-content:center; text-align:center; }
.promo-dismiss{
  display:block; width:100%; margin-top:12px; background:none; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:0.86rem; color:var(--ink-soft); text-decoration:underline;
}
.promo-close{
  position:absolute; top:12px; right:14px; background:none; border:none; cursor:pointer;
  font-size:1.5rem; line-height:1; color:var(--ink-soft); padding:6px 10px; border-radius:8px;
}
.promo-close:hover{ color:var(--ink); background:var(--sand-dim); }
.promo-close:focus-visible, .promo-dismiss:focus-visible, .promo .btn:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}

/* SISTER COMPANY CARD (Four Seasons Pool Builders, Colin's construction side)
   Styled deliberately unlike the service tiers so it reads as a different
   business rather than another Four Seasons Pool Service plan. Its own name,
   phone, email and license sit together as one unambiguous contact block, which
   also keeps the two businesses' listings distinct as far as search engines
   are concerned. */
.sister{
  background:var(--white); border:1px solid var(--line);
  border-left:4px solid var(--ocean-deep); border-radius:var(--radius);
  padding:30px 32px; max-width:760px;
}
.sister-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.sister-name{ font-family:'Fraunces',serif; font-weight:650; font-size:1.3rem; color:var(--ink); }
.sister-tag{
  font-family:'IBM Plex Mono',monospace; font-size:0.74rem; letter-spacing:0.05em;
  color:var(--ink-soft); margin-top:6px; text-transform:uppercase;
}
.sister-badge{
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; background:var(--brass); color:var(--white);
  padding:5px 12px; border-radius:999px; white-space:nowrap; flex-shrink:0;
}
.sister-contact{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.sister-link{ font-family:'IBM Plex Mono',monospace; font-size:0.88rem; color:var(--ocean); text-decoration:underline; }
.sister-fine{ margin-top:18px; font-size:0.82rem; color:var(--ink-soft); line-height:1.55; }

/* Contact / quote forms: honeypot field + submit status message */
.hp-field{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.form-status{
  margin-top:14px; font-size:0.92rem; color:var(--ocean-deep); min-height:1.4em;
}
.form-status.error{ color:#A33B2E; }