:root{
  --cf-navy:#0B2545; --cf-blue:#1B4965; --cf-gold:#F0B429; --cf-cream:#FFF8F2; --cf-red:#C0392B; --cf-ink:#0B2545; --cf-muted:#556987;
  --container:1100px;
  --hero-bg:#EAF4FB;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--cf-ink);background:var(--cf-cream);line-height:1.5;min-height:100vh}

/* Utilities */
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
@media (max-width:375px){
  .container{padding:0 12px}
}
a{color:var(--cf-blue);text-decoration:none}
a:hover{text-decoration:underline}
a:focus{outline:2px solid var(--cf-gold);outline-offset:2px}
img{display:block;max-width:100%;height:auto}

/* Header / Nav */
.header{background:var(--cf-navy);color:#fff;position:sticky;top:0;z-index:9998}
.nav-container{max-width:var(--container);margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-brand{display:flex;align-items:center;gap:10px}
.nav-logo{width:48px;height:48px;object-fit:contain;border-radius:10px;background:#fff;padding:4px}
.nav-brand-text h2{font-size:1.15rem;margin:0}
.nav-brand-text span{font-size:.9rem;color:#dce7f1}

.nav-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:18px}
.nav-link{color:#fff;opacity:.9;display:block}
.nav-link:hover{opacity:1}
@media (max-width:900px){
  .nav-link{padding:8px 12px;margin:-8px -12px;min-height:44px;display:flex;align-items:center}
}
.book-now{background:var(--cf-gold);color:var(--cf-navy)!important;padding:9px 14px;border-radius:10px;font-weight:700;display:inline-flex;align-items:center;gap:8px}
.mascot-stamp-btn{width:16px;height:16px;vertical-align:-2px}

.nav-toggle{display:none;background:transparent;border:0;color:#fff;cursor:pointer}
.nav-toggle:focus{outline:2px solid var(--cf-gold);outline-offset:4px;border-radius:4px}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px}

@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-menu{position:absolute;right:16px;top:64px;background:var(--cf-navy);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:12px;display:none;flex-direction:column;gap:12px;min-width:220px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.25)}
  .nav-menu.open{display:flex}
}
@media (max-width:400px){
  .nav-menu{right:8px;left:8px;min-width:auto;max-width:calc(100vw - 16px)}
}

/* Hero */
.hero{ background: var(--hero-bg); padding:48px 0 56px }
.hero-row{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
@media (max-width:900px){ 
  .hero{margin-top:0;padding-top:3rem;padding-bottom:40px}
  .hero-row{grid-template-columns:1fr;gap:24px} 
}
@media (max-width:480px){
  .hero{margin-top:0;padding-top:4rem;padding-bottom:32px}
  .hero-row{gap:20px}
}
@media (max-width:375px){
  .hero{padding-top:3.5rem;padding-bottom:28px}
  .hero-row{gap:16px}
}

.mascot-hero{
  width:clamp(260px,42vw,520px);
  aspect-ratio:1/1;
  border-radius:16px;
  border: 1px solid rgba(11,37,69,.08);
  box-shadow: 0 10px 30px rgba(11,37,69,.12);
  background:#fff;
  justify-self:end;
  margin-bottom:1rem;
}
@media (max-width:900px){ 
  .mascot-hero{justify-self:start;width:clamp(220px,60vw,400px);margin-bottom:0}
}
@media (max-width:480px){
  .mascot-hero{width:clamp(200px,75vw,320px)}
}
@media (max-width:375px){
  .mascot-hero{width:280px;max-width:calc(100vw - 32px)}
}
.mascot-hero img{width:100%;height:100%;object-fit:contain;transform:scale(1.35)}

.hero-content .hero-kicker{letter-spacing:.12em;font-weight:700;color:var(--cf-blue);margin:0 0 8px}
.hero-content h1{
  margin:.1rem 0 .5rem;
  font-size:clamp(1.6rem,3vw,2.4rem);
  color:#0B2545;
  line-height:1.2;
}
@media (max-width:480px){
  .hero-content .hero-kicker{font-size:.82rem;margin-bottom:6px}
  .hero-content h1{font-size:clamp(1.4rem,5vw,1.8rem);margin:.1rem 0 .4rem}
  .hero-content > p{font-size:.95rem}
}
@media (max-width:375px){
  .hero-content .hero-kicker{font-size:.8rem}
  .hero-content h1{font-size:1.5rem;line-height:1.25}
  .hero-content > p{font-size:.92rem;line-height:1.5}
}

.hero-ctas{display:flex;gap:12px;margin:16px 0 12px;flex-wrap:wrap}
@media (max-width:560px){
  .hero-ctas{gap:10px}
}
@media (max-width:400px){
  .hero-ctas{flex-direction:column;gap:10px}
  .hero-ctas .btn{justify-content:center;width:100%}
}

.btn{display:inline-flex;align-items:center;gap:.35rem;border-radius:10px;padding:10px 14px;font-weight:700;border:1px solid transparent;font-size:1rem;transition:transform .15s ease,box-shadow .15s ease;min-height:44px}
.btn:hover{transform:translateY(-1px)}
@media (max-width:480px){
  .btn{padding:9px 12px;font-size:.92rem}
}
@media (max-width:375px){
  .btn{padding:10px 12px;font-size:.9rem}
}

.btn-primary{background:var(--cf-gold);color:var(--cf-navy);border-color:var(--cf-gold)}
.btn-primary:focus{outline:3px solid var(--cf-blue);outline-offset:3px}
.btn-secondary{background:#fff;color:var(--cf-blue);border-color:#e9eef4}
.btn-secondary:focus{outline:3px solid var(--cf-gold);outline-offset:3px}
.hero-trust span{display:inline-block;margin-right:12px;margin-top:6px;color:var(--cf-muted);font-size:.95rem}
@media (max-width:480px){
  .hero-trust{margin-top:8px}
  .hero-trust span{font-size:.88rem;margin-right:10px;margin-top:5px}
}

.hero p{ color:#556987 }

/* Sections */
.section-title{margin:0 0 .5rem}
.how-it-works{padding:36px 0}
.how-it-works-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.step{background:#fff;border:1px solid rgba(11,37,69,.08);border-radius:12px;padding:16px;box-shadow:0 2px 12px rgba(11,37,69,.06)}
.step-number{width:28px;height:28px;border-radius:999px;background:var(--cf-gold);color:var(--cf-navy);display:inline-grid;place-items:center;font-weight:800;margin-bottom:6px}

.services-grid-section{padding:12px 0 36px}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.services-grid figure{background:#fff;border:1px solid rgba(11,37,69,.08);border-radius:12px;padding:12px;text-align:center;box-shadow:0 2px 12px rgba(11,37,69,.06)}
.services-grid figure img{max-width:160px;margin:6px auto 8px}
.services-grid figure figcaption{font-weight:600;color:var(--cf-ink)}

.why-choose-us{padding:24px 0}
.why-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.why-gallery img{background:#fff;border:1px solid rgba(11,37,69,.08);border-radius:12px;padding:10px}

.values{padding:12px 0 36px}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.value-item{background:#fff;border:1px solid rgba(11,37,69,.08);border-radius:12px;padding:18px;box-shadow:0 2px 12px rgba(11,37,69,.06)}
.value-icon{font-size:1.4rem}

.services-preview{padding:12px 0 36px}
.service-card{background:#fff;border:1px solid rgba(11,37,69,.08);border-radius:12px;padding:18px;box-shadow:0 2px 12px rgba(11,37,69,.06)}
.service-link{font-weight:700}

/* Footer */
.footer{background:#0a203a;color:#dce7f1;margin-top:8px}
.footer .container{padding:28px 16px}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.footer a{color:#f1f6fb}
.footer-logo{width:48px;height:48px;background:#fff;border-radius:10px;padding:4px;margin-bottom:6px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:16px;padding-top:12px;text-align:center}

/* Sticky Book Now */
.sticky-book-btn{position:fixed;right:16px;bottom:16px;z-index:100;background:var(--cf-gold);color:var(--cf-navy);border-radius:999px;padding:10px 14px;font-weight:800;border:1px solid var(--cf-gold);display:inline-flex;align-items:center;gap:.4rem;box-shadow:0 6px 16px rgba(11,37,69,.18);min-height:44px}
.sticky-book-btn:hover{text-decoration:none}
@media (max-width:400px){
  .sticky-book-btn{right:12px;bottom:12px;padding:9px 12px;font-size:.9rem}
}

/* Mascot helpers used across the site */
.mascot{aspect-ratio:1/1}
.mascot-stamp-card{width:18px;height:18px;vertical-align:-2px;opacity:.9}

.mascot-hero{ position:relative; border:1px solid rgba(11,37,69,.08); border-radius:16px; background:#fff; box-shadow:0 10px 30px rgba(11,37,69,.12); padding:10px 10px 42px; }
.mascot-caption{
  position:absolute; left:14px; right:14px; bottom:10px;
  background:rgba(255,255,255,.9); border:1px solid rgba(11,37,69,.08);
  border-radius:10px; padding:6px 10px; font-size:.9rem; color:#243B53;
  z-index:1;
}

.about-maui{ padding:22px 0 10px; }
.about-row{ display:grid; grid-template-columns:160px 1fr; gap:16px; align-items:center; overflow:visible; }
.about-maui-container{ width:160px; aspect-ratio:1/1; border-radius:12px; border:1px solid rgba(11,37,69,.08); background:#fff; overflow:visible; }
.about-maui-img{ width:100%; height:100%; object-fit:contain; transform:scale(1.625); }
.about-bullets{ margin:10px 0 0; padding-left:18px; }
@media (max-width:800px){ .about-row{ grid-template-columns:1fr; } .about-maui-container{ width:120px; } }

.badge-maui{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; font-size:.8rem; letter-spacing:.02em;
  background:rgba(240,180,41,.16); color:#8a6510;
  border:1px solid rgba(240,180,41,.38); border-radius:999px;
  padding:4px 10px;
}
.badge-maui img{ width:14px; height:14px; }
@media (max-width:480px){
  .badge-maui{font-size:.75rem;padding:3px 9px;gap:.35rem}
  .badge-maui img{width:13px;height:13px}
}

.caption-pill{
  position:absolute; left:12px; top:12px;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(11,37,69,.12);
  box-shadow:0 2px 6px rgba(11,37,69,.08);
  font-size:.85rem; color:#243B53;
  z-index:1;
}
@media (max-width:480px){
  .caption-pill{font-size:.8rem;padding:5px 9px;left:10px;top:10px}
}
@media (max-width:375px){
  .caption-pill{font-size:.78rem;padding:4px 8px;left:8px;top:8px;gap:.3rem}
  .caption-pill strong{font-size:.85rem}
}
.caption-pill img{ opacity:.9; border-radius:50% }

/* === About-section portrait only === */
.about-portrait-card{
position: relative;
width: 160px; /* matches the left column */
border-radius: 18px;
padding: 12px;
background: radial-gradient(110% 80% at 30% 20%, #F7FBFF 0%, #EAF4FB 70%); /* on-brand sky */
border: 1px solid rgba(11,37,69,.10);
box-shadow: 0 12px 28px rgba(11,37,69,.14);
}
.about-portrait-card::after{
content:"";
position:absolute; inset:8px; /* thin inner keyline */
border-radius: 14px;
box-shadow: inset 0 0 0 2px #F0B429; /* gold accent */
pointer-events:none;
opacity:.85;
}
.about-portrait-img{
display:block;
width:100%;
height:auto;
object-fit: contain;
border-radius: 12px;
filter: drop-shadow(0 8px 18px rgba(11,37,69,.20));
/* gentle fade at the very bottom so the crop feels intentional */
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,0) 100%);
}
@media (max-width: 800px){
.about-portrait-card{ width:120px; padding:10px }
}

/* ==== How It Works (polished) ==== */
.how-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  margin-top:12px;
}
.step-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(11,37,69,.10);
  border-radius:14px;
  padding:16px;
  box-shadow:0 2px 12px rgba(11,37,69,.06);
  display:flex; flex-direction:column; gap:10px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.step-card:hover{ box-shadow:0 8px 24px rgba(11,37,69,.12); transform:translateY(-2px); }

.step-num{
  position:absolute; left:12px; top:12px;
  width:26px; height:26px; border-radius:999px;
  display:grid; place-items:center;
  background:#F0B429; color:#0B2545; font-weight:800; font-size:.9rem;
  border:1px solid rgba(240,180,41,.55);
  z-index:1;
}

.step-head{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.step-icon{ width:56px; height:56px; flex:0 0 56px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(180deg,#F7FBFF 0%, #EAF4FB 100%); border:1px solid rgba(11,37,69,.10); }
.step-title{ margin:0; font-size:1.05rem; color:#0B2545; }
.step-desc{ margin:0 0 6px; color:#556987; }

.step-cta{
  margin-top:auto;
  font-weight:700;
  color:#1B4965;
  text-decoration:none;
}
.step-cta:hover{ text-decoration:underline; }

/* --- Service strip --- */
.service-strip{ padding:8px 0 12px; }
.service-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.service-chips a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:10px 12px; border-radius:999px;
  background:#fff; border:1px solid rgba(11,37,69,.10);
  box-shadow:0 1px 6px rgba(11,37,69,.06);
  font-weight:700; color:#0B2545; text-decoration:none;
}
.service-chips a:hover{ box-shadow:0 4px 14px rgba(11,37,69,.10); transform:translateY(-1px); }
.chip-icon{ font-size:1rem }

/* --- Services mini row --- */
.services-preview{ padding:16px 0 24px; }
.services-mini{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.mini-card{
  background:#fff; border:1px solid rgba(11,37,69,.10); border-radius:14px;
  padding:16px; box-shadow:0 2px 12px rgba(11,37,69,.06);
  display:flex; flex-direction:column; gap:10px;
}
.mini-icon{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(180deg,#F7FBFF 0%, #EAF4FB 100%); border:1px solid rgba(11,37,69,.10); }
.mini-card h3{ margin:0; font-size:1.05rem; color:#0B2545 }
.mini-card p{ margin:0; color:#556987 }
.mini-cta{ margin-top:auto; font-weight:700; color:#1B4965; text-decoration:none }
.mini-cta:hover{ text-decoration:underline }

/* --- Values spacing tweak --- */
.values{ padding:10px 0 24px }

/* Favorites cards differentiate from chips */
.favorites .services-mini{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.favorites .mini-card{
  background:#fff; border:1px solid rgba(11,37,69,.10); border-radius:14px;
  padding:16px; box-shadow:0 2px 12px rgba(11,37,69,.06);
  display:flex; flex-direction:column; gap:8px; transition:box-shadow .2s, transform .2s;
}
.favorites .mini-card:hover{ box-shadow:0 8px 24px rgba(11,37,69,.12); transform:translateY(-2px); }

.favorites .mini-icon{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(180deg,#F7FBFF 0%, #EAF4FB 100%); border:1px solid rgba(11,37,69,.10); }

.favorites .mini-card h3{ margin:2px 0 0; font-size:1.05rem; color:#0B2545; }
.favorites .mini-meta{ margin:0; color:#556987; font-size:.9rem; }
.favorites .mini-meta .tag{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:rgba(240,180,41,.16); color:#8a6510; border:1px solid rgba(240,180,41,.38);
  font-weight:700; font-size:.78rem; letter-spacing:.02em;
}

.favorites .mini-cta{ margin-top:auto; font-weight:700; color:#1B4965; text-decoration:none; }
.favorites .mini-cta:hover{ text-decoration:underline; }

/* --- Service strip context --- */
.strip-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items:end;
}
.strip-head .kicker{
  margin:0 0 2px;
  font-size:.8rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#6a7c92;
}
.strip-sub{
  margin:4px 0 0; color:#6a7c92; font-size:.95rem;
}
.strip-cta{
  align-self:end;
  padding:8px 12px; border-radius:999px; text-decoration:none;
  background:#fff; border:1px solid rgba(11,37,69,.10); color:#1B4965; font-weight:700;
}
.strip-cta:hover{ box-shadow:0 4px 14px rgba(11,37,69,.10); transform:translateY(-1px); }

.service-strip{ padding:14px 0 12px; }
.service-chips{ grid-column:1 / -1; margin-top:4px; }  /* chips span full width under header+cta */

@media (max-width: 860px){
  .strip-row{ grid-template-columns:1fr; }
  .strip-cta{ justify-self:start; }
  .service-chips{ margin-top:2px; }
}

/* Booking page styles */
.book-container{max-width:1100px;margin:0 auto;padding:1.25rem}
.embed-shell{border:1px solid #e6e6e6;border-radius:16px;padding:.5rem;background:#fff}
.alt-links{margin-top:.75rem;display:flex;gap:.5rem;flex-wrap:wrap}
.notice{font-size:.95rem;opacity:.8;margin:.5rem 0}
section{scroll-margin-top:80px}

/* Back bar — light theme */
.backbar{
  position: sticky;
  top: 0;
  z-index: 9997;
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .5rem 1rem;
  border-bottom: 1px solid #eaeaea;
  backdrop-filter: saturate(120%) blur(3px);
}
.backbar--light{
  /* pick the one that best matches your page bg; first is clean white, second is a soft cream */
  background: #ffffff;            /* option A */
  /* background: #fff7ef; */      /* option B (cream) */
  color: #0f172a;
}
.backbar a{
  color: inherit;
  text-decoration: none;
}
.backbar a:hover{ text-decoration: underline; }
.backbar .backlink{ font-weight: 650; }
.backbar .sep{ opacity: .55; }
.backbar a:focus-visible{
  outline: 2px solid #1e90ff;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Remove any previous:
@media (prefers-color-scheme: dark){ .backbar{ background:#111; ... } }
That rule forces the bar black even on light pages when the OS is in dark mode. */

.pricing-card .pricing-header{
  /* hard reset to kill legacy layout */
  all: revert;
  display: grid !important;
  grid-template-columns: 112px minmax(0,1fr);
  grid-template-areas:
    "art title"
    "subtitle subtitle"
    "duration duration";
  align-items: start;
  column-gap: .9rem;
  row-gap: .45rem;
  padding-right: .25rem;
}

.svc-art{
  grid-area: art !important;
  justify-self: start !important;
  align-self: start !important;
  width:112px; height:112px;
  border:1px solid #eaeaea; border-radius:14px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  /* neutralize any legacy positioning */
  position: static !important;
  float: none !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 0 !important;
}
.svc-art img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }

.pkg-title{
  grid-area: title !important;
  margin:0;
  font-size:1.15rem;
  line-height:1.25;
  text-align:left !important;
  hyphens:none;
  word-break:keep-all;
}

.pkg-subtitle{
  grid-area: subtitle !important;
  margin:0; opacity:.9;
}

.pkg-duration{
  grid-area: duration !important;
  margin:0; opacity:.7;
}

/* Mobile: stack pic → title → subtitle → duration */
@media (max-width:640px){
  .pricing-card .pricing-header{
    grid-template-columns:1fr;
    grid-template-areas:
      "art"
      "title"
      "subtitle"
      "duration";
  }
  .svc-art{ width:96px; height:96px; }
}

/* Hide any legacy tiny icons inside header */
.pricing-card .pricing-header > img,
.pricing-card .pricing-header .icon,
.pricing-card .pricing-header .old-art{ display:none !important; }

.muted{ color: #6a7c92; font-size: 0.9rem; }

.shed-buster-banner{
  display: grid;
  grid-template-columns: 140px 1fr 380px;         /* image | title/badge | price tiers */
  grid-template-areas:
    "art head tiers"
    "desc desc tiers"
    "breeds breeds tiers";
  gap: 1rem 1.25rem;
  align-items: start;
  border: 2px solid #f7c66b;                      /* keep your gold outline */
  background: #fff6e8;                            /* soft panel bg (match your design) */
  border-radius: 16px;
  padding: 1rem;
}

.svc-art--banner{ grid-area: art; width:140px; height:140px; object-fit:contain; display:block; }

.shed-head{
  grid-area: head;
  display: flex;
  align-items: center;
  gap: .5rem .75rem;
  flex-wrap: wrap;
}
.shed-head h3{ margin:0; }
.shed-head .badge{ white-space:nowrap; }

.tiers{
  grid-area: tiers;
  display: grid;
  grid-template-columns: 1fr 1fr;                 /* two columns on desktop */
  gap: .75rem;
}
.tiers .tier{ margin:0; }                         /* preserve existing tier styles */

.shed-desc{ grid-area: desc; margin: 0; }
.shed-breeds{ grid-area: breeds; margin: .25rem 0 0; font-size: .95rem; }

/* Responsive adjustments for narrower screens */
@media (max-width: 1100px){
  .shed-buster-banner{
    grid-template-columns: 120px 1fr;             /* stack tiers below on medium screens */
    grid-template-areas:
      "art head"
      "tiers tiers"
      "desc desc"
      "breeds breeds";
  }
  .svc-art--banner{ width:120px; height:120px; }
}
@media (max-width: 640px){
  .shed-buster-banner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "art"
      "head"
      "tiers"
      "desc"
      "breeds";
  }
  .svc-art--banner{ width:96px; height:96px; }
  .tiers{ grid-template-columns: 1fr; }           /* single column tiers on mobile */
}

/* Simple, readable bullets for policy details */
.policy-bullets{
  margin:.5rem 0 0 1.1rem;
  padding:0;
}
.policy-bullets li{
  margin:.25rem 0;
  line-height:1.4;
}

/* --- Contact help section --- */
.contact-help{ margin-top:2rem; }
.contact-help .contact-lede{ margin:.5rem 0 1rem; opacity:.85; }

.contact-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:.75rem;
}

.contact-card{
  display:flex; align-items:center; gap:.75rem;
  padding:14px 16px;
  border:1px solid #e8e8e8; border-radius:12px; background:#fff;
  text-decoration:none; color:inherit;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.contact-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); border-color:#e0e0e0; }
.contact-card:focus-visible{ outline:2px solid #1e90ff; outline-offset:2px; }

.contact-icon{
  width:44px; height:44px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f6fbff; color:#0B2545; /* tweak to your brand primary */
  border:1px solid #e6f0ff;
}
.contact-text strong{ display:block; font-size:1rem; line-height:1.2; color:#0B2545; }
.contact-text span{ display:block; font-size:.95rem; opacity:.85; }

/* home-specific spacing tweak, keeps it tight above the CTA */
.home-contact{ padding-bottom:.5rem; }

/* tighten spacing under this section if it sits above the footer */
section.contact-help{ padding-bottom:.5rem; }

:root{
  --sa-card-bg:#ffffff; --sa-text:#0f172a; --sa-muted:#475569; --sa-border:#e2e8f0;
  --sa-badge-bg:#eef2ff; --sa-badge-text:#3730a3; --sa-input-bg:#ffffff; --sa-input-text:#0f172a;
}
@media (prefers-color-scheme: dark){
  :root{
    --sa-card-bg:#0b1220; --sa-text:#e5e7eb; --sa-muted:#9ca3af; --sa-border:#243044;
    --sa-badge-bg:#1f2a44; --sa-badge-text:#c7d2fe; --sa-input-bg:#0f172a; --sa-input-text:#e5e7eb;
  }
}
/* inputs */
.service-search{display:grid;gap:.4rem;margin:1rem 0 1.25rem}
.service-search input{padding:.75rem .95rem;border:1px solid var(--sa-border);border-radius:.7rem;width:100%;background:var(--sa-input-bg);color:var(--sa-input-text)}
.hint{color:var(--sa-muted)} .zip-examples{display:block;opacity:.9}
/* badges */
.primary-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin:.25rem 0 1rem}
.badge{padding:.42rem .7rem;border-radius:999px;font-weight:650;font-size:.92rem;background:var(--sa-badge-bg);color:var(--sa-badge-text);border:1px solid var(--sa-border)}
/* cards */
.county-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media (min-width:1024px){.town-list{columns:3 210px}}
.county-card{background:var(--sa-card-bg);border:1px solid var(--sa-border);border-radius:1rem;padding:1rem 1.1rem;box-shadow:0 2px 6px rgba(0,0,0,.05);color:var(--sa-text)}
.county-card h3{margin:.2rem 0 .6rem;color:var(--sa-text);font-weight:750}
.town-list{column-gap:1.25rem;margin:0;padding-left:1rem}
.town-list li{break-inside:avoid;margin:.14rem 0;color:var(--sa-text)}
/* details + CTA */
details{border:1px dashed var(--sa-border);border-radius:.75rem;padding:.9rem 1rem;background:transparent;color:var(--sa-text)}
details summary{cursor:pointer}.expanded-note p{color:var(--sa-muted)}
.cta-card{margin:1.25rem 0 0;padding:1rem 1.1rem;background:color-mix(in oklab,var(--sa-badge-bg) 40%,transparent);border:1px solid var(--sa-border);border-radius:1rem}
/* highlight on match */
.town-list li[style*="font-weight: 700"]{text-decoration:underline}
/* Helper classes */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0 }
.mb-6 { margin-bottom:1.5rem }
.mt-6 { margin-top:1.5rem }
.h2 { font-size:1.5rem; font-weight:700; margin-bottom:.5rem }

/* === Brand tokens for CTA === */
:root{
  --brand-50:#eaf2ff;
  --brand-200:#bfdbfe;
  --brand-400:#60a5fa;
  --brand-500:#3b82f6;
  --brand-700:#1d4ed8;
}
@media (prefers-color-scheme: dark){
  :root{
    --brand-50:#0b1f33;
    --brand-200:#1f3b57;
    --brand-400:#3b82f6; /* keep vivid for borders/links */
    --brand-500:#60a5fa;
    --brand-700:#93c5fd;
  }
}

/* CTA card: higher contrast, brand-tinted */
.cta-card{
  margin:1.25rem 0 0; padding:1rem 1.1rem;
  background: var(--brand-50);
  border:1px solid var(--brand-200);
  border-radius:1rem;
}
.cta-card h3{ margin:0 0 .35rem; color: var(--sa-text); }
.cta-card a{ color: var(--brand-700); text-decoration: underline; }
.cta-card .btn{ display:inline-block; margin-top:.6rem }

/* details border a bit lighter so it doesn't look disabled */
details{ border-color: var(--sa-border); background: transparent; }

/* Keep clean spacing when the section blurb is removed */
.service-areas-section > .container > header.mb-6 { margin-bottom: 1rem; }
@media (min-width: 768px){
  .service-areas-section > .container > header.mb-6 { margin-bottom: 1.25rem; }
}

/* === Nautical theme tokens === */
:root{
  --naut-navy: #0b2a3c;      /* deep navy */
  --naut-blue: #1565c0;      /* ocean blue accent */
  --naut-sea:  #e9f6ff;      /* sea-foam bg */
  --naut-foam: #cfeaff;      /* lighter foam tint */
  --naut-rope: #c9a76a;      /* rope tan */
}
@media (prefers-color-scheme: dark){
  :root{
    --naut-navy: #041d2a;
    --naut-blue: #5aa9ff;
    --naut-sea:  #0a2533;
    --naut-foam: #123247;
    --naut-rope: #b99457;
  }
}

/* === Nautical callout === */
.note-callout.nautical{
  position: relative;
  margin: 1rem 0 1rem;
  padding: .95rem 1.1rem .95rem 1.1rem;
  background: linear-gradient(180deg, var(--naut-sea) 0%, color-mix(in oklab, var(--naut-sea) 70%, transparent) 100%);
  border: 1px solid color-mix(in oklab, var(--naut-blue) 35%, var(--sa-border));
  border-left: 6px solid var(--naut-navy);
  border-radius: .9rem;
}

/* Anchor chip */
.note-callout.nautical .note-title{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .35rem;
  color: var(--sa-text);
  font-weight: 800;
  letter-spacing: .2px;
}
.note-callout.nautical .note-title::before{
  content: "⚓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem; height: 1.35rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--naut-blue) 18%, white);
  color: var(--naut-navy);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--naut-blue) 25%, transparent);
}

/* Body copy */
.note-callout.nautical p{
  margin: 0;
  color: var(--sa-muted);
}

/* Optional rope top border (subtle). Comment out if you don't want it. */
.note-callout.nautical::before{
  content: "";
  position: absolute;
  left: .9rem; right: .9rem; top: .55rem; height: 3px;
  background: repeating-linear-gradient(
     45deg,
     var(--naut-rope) 0 6px,
     color-mix(in oklab, var(--naut-rope) 75%, #8a6a35) 6px 12px
  );
  border-radius: 999px;
  opacity: .45;
}

/* Optional tiny wave footer. Remove if not desired. */
.note-callout.nautical::after{
  content: "";
  position: absolute;
  left: .9rem; right: .9rem; bottom: .6rem; height: 6px;
  background:
    radial-gradient(8px 6px at 8px 6px, var(--naut-foam) 55%, transparent 56%) repeat-x;
  background-size: 16px 6px;
  opacity: .35;
}

/* === Captain's Note legibility tweaks === */
/* Slightly lighter sea bg + stronger text colors */
.note-callout.nautical{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--naut-sea) 90%, white) 0%,
    color-mix(in oklab, var(--naut-sea) 60%, transparent) 100%
  );
  border-color: color-mix(in oklab, var(--naut-blue) 40%, var(--sa-border));
  box-shadow: 0 1px 0 rgba(0,0,0,.04) inset, 0 1px 3px rgba(0,0,0,.06);
}

/* Title + body now use main text color for AA-ish contrast */
.note-callout.nautical .note-title{ color: var(--sa-text); }
.note-callout.nautical p{ color: var(--sa-text); }

/* Make the anchor chip clearer against the lighter bg */
.note-callout.nautical .note-title::before{
  background: color-mix(in oklab, var(--naut-blue) 12%, white);
  color: var(--naut-navy);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--naut-blue) 22%, transparent);
}

/* Subtle decorations: reduce intensity; auto-disable for high-contrast users */
.note-callout.nautical::before{ opacity: .25; } /* rope */
.note-callout.nautical::after{ opacity: .22; }  /* waves */

@media (prefers-contrast: more){
  .note-callout.nautical::before,
  .note-callout.nautical::after{ display: none; }
}

/* Dark mode: lift background a touch so text pops more */
@media (prefers-color-scheme: dark){
  .note-callout.nautical{
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--naut-sea) 55%, transparent) 0%,
      color-mix(in oklab, var(--naut-sea) 35%, transparent) 100%
    );
    border-color: color-mix(in oklab, var(--naut-blue) 45%, var(--sa-border));  
  }
}

/* hidden-page helper */
.coming-soon{
  margin:1.25rem 0; padding:1rem 1.1rem;
  background: color-mix(in oklab, var(--brand-50, #eaf2ff) 60%, white);
  border:1px solid var(--brand-200, #bfdbfe);
  border-radius:.9rem;
}
.coming-soon h2{ margin:0 0 .35rem; }

/* === Header brand color lock === */
:root { --brand-text-on-navy: #ffffff; }

.header, .site-header { /* keep as generic wrappers */
  --brand-text-color: var(--brand-text-on-navy);
}

/* common brand selectors — add more if your markup differs */
.site-brand a,
.site-brand .brand-link,
.header .brand-link,
.header .brand a,
.navbar .brand a,
.logo-title,
.brand-title,
.nav-brand h2,
.nav-brand-text h2 {
  color: var(--brand-text-color) !important;
  text-decoration: none;
}

/* states */
.site-brand a:hover,
.site-brand a:focus,
.header .brand a:hover,
.header .brand a:focus,
.logo-title:hover,
.brand-title:hover,
.nav-brand h2:hover,
.nav-brand-text h2:hover {
  color: var(--brand-text-color) !important;
  opacity: .92;
}

/* if any page adds a "scrolled" or "sticky" class, keep it white */
.header.sticky .brand a,
.header.scrolled .brand a,
.header.is-stuck .brand a,
.header.sticky .nav-brand h2,
.header.scrolled .nav-brand h2 {
  color: var(--brand-text-color) !important;
}

/* Footer mascot visibility guard */
.footer .brand img,
.site-footer .brand img,
.footer .logo img,
.footer-logo.mascot {
  display: inline-block;
  max-width: 48px;
  height: auto;
  image-rendering: auto;
  -webkit-mask-image: none; /* avoid accidental theming */
  mask-image: none;
}

/* Footer Mascot Styling */
.footer-logo.mascot {
  width: 56px;
  height: auto;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 0.5rem;
  image-rendering: auto;
}

/* Footer grid: 3 columns on desktop, stack on small screens */
.site-footer .footer-grid,
.footer .footer-grid,
.site-footer .cols,
.footer .cols,
.footer .footer-content {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px){
  .site-footer .footer-grid,
  .footer .footer-grid,
  .site-footer .cols,
  .footer .cols,
  .footer .footer-content {
    grid-template-columns: 1fr;
  }
}

/* Footer mascot sizing (safe default) */
.site-footer .brand img { width: 56px; height: auto; border-radius: 8px; display: inline-block; margin-bottom: .5rem; }

/* === Social icon brand colors === */
:root{
  --fb-blue: #1877F2;
  --ig-pink: #E4405F;
}

.nav-social .fb .icon,
.footer-social-icons .fb .icon { color: var(--fb-blue); fill: var(--fb-blue); }

.nav-social .ig .icon,
.footer-social-icons .ig .icon { color: var(--ig-pink); fill: var(--ig-pink); stroke: var(--ig-pink); }

/* Hover/Focus lift (applies to both header + footer) */
.nav-social .social-link:hover .icon,
.nav-social .social-link:focus .icon,
.footer-social-icons .social-link:hover .icon,
.footer-social-icons .social-link:focus .icon {
  transform: translateY(-1px);
  opacity: 1;
}

/* If prior rules forced white fills, make sure brand colors win */
.nav-social .icon,
.footer-social-icons .icon {
  transition: opacity .15s ease, transform .15s ease;
  opacity: .95;
  fill: currentColor;
}

/* Header placement breathing room if needed */
.nav-social{ display:inline-flex; gap:.6rem; align-items:center; margin-right:.5rem; }
.nav-social .social-link{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; }
.nav-social .icon{ width:20px; height:20px; }
.nav-social .social-link:focus{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; border-radius:8px; }
@media (max-width: 1024px){ .nav-social{ margin-right:.25rem; } }

/* Footer "Follow us" highlight */
.footer-social{
  margin-top: 1rem;
  text-align: center;
}
.footer-social .follow-text{
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 1rem;
  margin: 0 0 .5rem;
}
.footer-social .follow-text::after{
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: .35rem auto 0;
  background: linear-gradient(90deg, var(--fb-blue), var(--ig-pink));
  border-radius: 2px;
}
.footer-social-icons{
  display:flex; justify-content:center; gap:.85rem;
}
.footer-social-icons .social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
}
.footer-social-icons .icon{
  width:22px; height:22px;
}

/* Footer mascot visibility guard */
.footer-logo.mascot,
.site-footer .brand img,
.footer .brand img,
.footer .footer-logo img {
  display: inline-block !important;
  width: 56px !important;
  height: auto !important;
  object-fit: contain !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* --- Footer brand centering (does NOT affect header) --- */
.site-footer .brand,
.footer .brand {
  text-align: center;
}
.site-footer .brand .footer-logo,
.footer .brand .footer-logo {
  display: block;
  margin: 0 auto .5rem;
  width: 56px;
  height: auto;
  border-radius: 8px;
}

/* If your grid left-aligns by default, keep other columns left: */
.site-footer .footer-grid > :not(:first-child),
.footer .footer-grid > :not(:first-child),
.footer .footer-content > :not(:first-child) {
  text-align: left;
}


/* === Brand Link Styles (Header Mascot + Text as Homepage Link) === */
.brand-link { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.5rem; 
  text-decoration: none; 
  color: inherit; 
  cursor: pointer; 
}
.brand-link:visited { 
  color: inherit; 
}
.brand-link:hover { 
  text-decoration: none; 
}
.brand-link:focus-visible { 
  outline: 2px solid currentColor; 
  outline-offset: 3px; 
  border-radius: 4px;
}
.brand-visual, .brand-text { 
  display: inline-flex; 
  align-items: center; 
}
.site-header .brand-link { 
  text-decoration: none !important; 
  color: inherit !important; 
}
.header .brand-link {
  text-decoration: none !important; 
  color: inherit !important; 
}