/* ===================== Turtle Proper-Tease — Brand Layer (GLOBAL) ===================== */
:root{
  --sand:#f4e5d6; --sage:#8a9d91; --driftwood:#6b5743; --teal:#3d6f72; --coral:#d78973;
  --muted-blue:#8ea9b7; --pale-gray:#e9edf0; --offwhite:#fffaf5;
  --ink:#0f172a; --text:#27303b; --muted:#6b7280;
  --bg:#f6f7f9; --card:#ffffff; --border:#e5e7eb;
  --focus:#3d6f72;
  --radius-lg:12px; --radius-md:10px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 8px 20px rgba(0,0,0,.08);
  --font-sans:"Raleway", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif:"Merriweather", Georgia, Cambria, "Times New Roman", serif;
  --font-script:"Pacifico", cursive;
}

*{ box-sizing:border-box; }
html, body{ background:var(--bg); color:var(--text); }
body{ margin:0; font-family:var(--font-serif); font-size:15px; line-height:1.55; }
h1,h2,h3,h4{ margin:.2em 0 .4em; font-family:var(--font-sans); color:var(--ink); letter-spacing:.2px; }
a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===================== HEADER (COMPACT) ===================== */
.site-header.turtle-header{
  --H: 100px;                    /* target overall header height (desktop) */
  --gap: 6px;
  --maxw: 1100px;
  background:
    radial-gradient(1200px 300px at 50% -120px, color-mix(in srgb, var(--teal) 6%, transparent), transparent),
    linear-gradient(180deg, var(--offwhite), #fff);
  border-bottom:1px solid var(--border);
  position:relative;
  z-index:10;
  margin-top:6px;
}

.turtle-header .hdr-grid{
  height:auto;                   /* stop forcing height */
  min-height: var(--H);          /* only as tall as needed */
  max-width: var(--maxw);
  margin:0 auto;
  padding:0 12px;
  display:grid;
  grid-template-columns:minmax(220px,28%) 1fr;
  grid-template-rows:auto auto auto;   /* content height per row */
  gap: var(--gap);
  align-content:center;
}

.turtle-header .logo-side{
  grid-column:1; grid-row:1 / -1;
  display:grid; place-items:center;
  height: calc(var(--H) - 20px);      /* keep logo from forcing height */
  position:relative; text-decoration:none;
}
.turtle-header .logo-side img{
  position:absolute; inset:0; margin:auto;
  height:100%!important; width:auto!important; object-fit:contain; transition:opacity .18s;
}
.turtle-header .logo-side .logo-alt{ opacity:0; }
.turtle-header .logo-side:hover .logo-alt, .turtle-header .logo-side.active .logo-alt{ opacity:1; }
.turtle-header .logo-side:hover .logo-main, .turtle-header .logo-side.active .logo-main{ opacity:0; }

.turtle-header .right-stack{
  grid-column:2; grid-row:1 / -1;
  display:grid; grid-template-rows:auto auto auto;
  align-content:center;
}

.turtle-header .brand-title{
  margin:2px 0 0 0;
  color:#2f474b;
  font:800 1.05rem/1.1 var(--font-sans);    /* smaller */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.turtle-header .brand-title .sep{ opacity:.6; padding:0 .35ch; color:#8a9d91; }
.turtle-header .brand-tag{ margin-left:.4ch; font:800 .78rem/1 var(--font-sans); color:#d78973; }

.turtle-header .mid-inner{ display:grid; grid-template-columns:1fr; align-items:center; gap:6px; }

/* Weather pod tight */
#wx-pod{
  display:grid; grid-template-columns:auto 1fr; gap:6px;
  padding:4px 8px;
  border:1px solid #dbe5e0; border-radius:10px;
  background:#f6faf8; color:#36555a; box-shadow:var(--shadow-sm);
}
#wx-pod .wx-ic{ font-size:1rem; }
#wx-pod .wx-main{ font-weight:800; letter-spacing:.2px; font-size:.88rem; }
#wx-pod .wx-sub{ font-weight:600; opacity:.85; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#wx-pod .sep-dot{ margin:0 .35ch; opacity:.6; }

/* Nav row, tight gaps */
.turtle-header .nav-wrap{ position:relative; margin-top:6px; }
.turtle-header nav.th-nav{ display:flex; justify-content:flex-start; flex-wrap:wrap; gap:6px; }

/* === Header nav pills: small + oval + coral glass === */
.turtle-header nav.th-nav .btn{
  /* size + oval */
  min-height: 0 !important;               /* beat global button min-height */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;                            /* small pill */
  padding: 0 10px;                         /* comfy sides */
  line-height: 1;
  font-size: .70rem;
  border-radius: 999px;                    /* full oval */
  white-space: nowrap;

  /* coral glass idle (25%) */
  background: rgb(215 137 115 / 25%);      /* coral @ 25% */
  border: 1px solid rgb(215 137 115 / 40%);
  color: #2f474b;

  /* nice transitions */
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;

  /* optional frosted vibe over waves */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* hover/focus: more solid (75%) */
.turtle-header nav.th-nav .btn:hover,
.turtle-header nav.th-nav .btn:focus-visible{
  background: rgb(215 137 115 / 75%);      /* coral @ 75% */
  border-color: rgb(215 137 115 / 80%);
  color: #fff;
  text-decoration: none;
}

/* active: slightly less than hover */
.turtle-header nav.th-nav .btn:active{
  background: rgb(215 137 115 / 70%);
}

/* tiny variant if you use NAV_MODE=owner */
.turtle-header nav.th-nav .btn.btn--sm{
  height: 22px;
  padding: 0 8px;
  font-size: .62rem;
}

/* mobile: a touch taller for tap comfort, still oval */
@media (max-width: 700px){
  .turtle-header nav.th-nav .btn{
    height: 28px;
    padding: 0 10px;
    font-size: .72rem;
  }
  .turtle-header nav.th-nav .btn.btn--sm{
    height: 24px;
    padding: 0 8px;
    font-size: .66rem;
  }
}

/* ==== Waves & Clouds (do not affect layout height) ==== */
.turtle-header { overflow:hidden; } /* clip animated layers */

.sky-bg{
  position:absolute; inset:0 0 50% 0;     /* top half sky */
  z-index:0; pointer-events:none; opacity:.35;
}
.sky-svg{ position:absolute; inset:0; width:100%; height:100%; }
.sky-svg .cloud use{ fill:#9fb7b2; }
.cloud{ transform-origin:center; opacity:.35; }
.cloud-a{ transform: translateX(110%) translateY(16px) scale(1.0); animation: cloud-drift 60s linear infinite; }
.cloud-b{ transform: translateX(140%) translateY(44px) scale(1.25); animation: cloud-drift 85s linear infinite; opacity:.38; }
.cloud-c{ transform: translateX(120%) translateY(6px)  scale(0.85); animation: cloud-drift 70s linear infinite reverse; opacity:.42; }
@keyframes cloud-drift{
  0%{ transform: translateX(110%) translateY(var(--cy,16px)) scale(var(--cs,1)); }
  100%{ transform: translateX(-130%) translateY(var(--cy,16px)) scale(var(--cs,1)); }
}

/* Ocean position + top fade; NO background here (SVG now paints the sea) */
.ocean-bg{
  position:absolute; inset:50% 0 0 0;
  z-index:0; pointer-events:none; opacity:.65;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 12%, #000 28%, #000 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 12%, #000 28%, #000 100%);
  /* tiny bleed to avoid 1px antialias lines at edges */
  left:-1px; right:-1px; bottom:-1px;
}
.ocean-svg{ position:absolute; inset:0; width:200%; height:100%; }

/* Filled wave colors (keep subtle) */
.wave-fill{ stroke:none; }
.wave-back-fill  { fill:#8aa9a1; opacity:.36; }
.wave-mid-fill   { fill:#5b7e79; opacity:.32; }
.wave-front-fill { fill:#2f474b; opacity:.28; }

/* Optional detail strokes */
.wave{ fill:none; stroke-linejoin:round; }
.stroke-back  { stroke:#8aa9a1; stroke-width:2; opacity:.25; }
.stroke-mid   { stroke:#5b7e79; stroke-width:2; opacity:.23; }
.stroke-front { stroke:#2f474b; stroke-width:2; opacity:.20; }

/* Seamless loop: two strips sliding across a 200%-wide canvas */
.strip{ will-change: transform; }
.strip-1{ transform: translateX(0%); }
.strip-2{ transform: translateX(50%); }
.strip-1 .wave-fill,  .strip-2 .wave-fill,
.strip-1 .stroke-back, .strip-2 .stroke-back,
.strip-1 .stroke-mid,  .strip-2 .stroke-mid,
.strip-1 .stroke-front,.strip-2 .stroke-front { animation: wave-move var(--spd,22s) linear infinite; }
/* Layer speeds for parallax */
.strip .wave-back-fill,  .strip .stroke-back  { --spd: 32s; }
.strip .wave-mid-fill,   .strip .stroke-mid   { --spd: 22s; animation-direction: reverse; }
.strip .wave-front-fill, .strip .stroke-front { --spd: 14s; }

/* Add below your strip rules */
.strip{
  will-change: transform;
  animation: wave-bob var(--bob, 7s) ease-in-out infinite;  /* vertical bob */
}
.strip-2{ --bob: 8.5s; animation-delay: -4s; } /* desync the second strip a bit */

@keyframes wave-bob{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); } /* try -6 to -12px */
}

/* Slide left by exactly half; the twin strip covers the gap */
@keyframes wave-move{
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}


/* Keep header content above background layers */
.turtle-header .hdr-grid,
.turtle-header .right-stack,
.turtle-header .logo-side { position:relative; z-index:1; }

/* ==== Global button baseline (kept) ==== */
button, .btn{ min-height:44px; padding:10px 14px; } /* overridden by header rules */

/* ==== Mobile compaction ==== */
@media (max-width:760px){
  .site-header.turtle-header{ --H: 84px; margin-top:4px; }
  .turtle-header .hdr-grid{
    grid-template-columns:1fr; grid-template-rows:auto auto auto;
    gap:6px; padding:0 10px;
  }
  .turtle-header .logo-side{ height: calc(var(--H) - 14px); }
  .turtle-header .brand-title{ font-size:.96rem; }
  .turtle-header .brand-tag{ display:block; font-size:.78rem; margin-left:0; }
  #wx-pod{ padding:4px 8px; }
  #wx-pod .wx-sub{ display:none; }      /* hide second line on phones to save height */
  .turtle-header .nav-wrap{ margin-top:4px; }
  .turtle-header nav.th-nav{ gap:6px; }
  .turtle-header nav.th-nav .btn{ height:28px; padding:0 10px; font-size:.72rem; }
  .turtle-header nav.th-nav .btn.btn--sm{ height:24px; padding:0 8px; font-size:.66rem; }
  .sky-bg{ opacity:.18; }
  .ocean-bg{ opacity:.55; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .cloud, .strip .wave { animation:none !important; }
}
/* ===== Contact modal: hide by default, only show when .open ===== */
.tpt-modal,
.tpt-modal-backdrop{ display:none; }

.tpt-modal.open{ display:flex !important; }
.tpt-modal-backdrop.open{ display:block !important; }

/* Extra safety: if aria-hidden=true, force-hide (covers first paint) */
#contactSimpleModal[aria-hidden="true"],
#contactSimpleBackdrop[aria-hidden="true"]{
  display:none !important;
}

/* Modal layout + look */
.tpt-modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:9998;
}
.tpt-modal{
  position:fixed; inset:0;
  z-index:9999;
  align-items:center; justify-content:center;
  padding:20px;
}
.tpt-card{
  width:min(720px,94vw);
  background:#fff; border:1px solid #e8efe9;
  border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.25);
  overflow:hidden;
}
.tpt-card header{
  padding:12px 14px;
  background:#f6faf8; border-bottom:1px solid #e8efe9;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.tpt-card header h3{ margin:0; font:800 1.05rem var(--font-sans); color:#2f474b; }
.tpt-body{ padding:14px; }

/* Contact list + icon sizing */
.contact-quick{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:10px; }
.contact-quick .item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid #e8efe9;
  border-radius:12px; background:#f9fbfc;
}
.contact-quick svg{
  width:18px; height:18px; flex:0 0 18px; color:#3d6f72;
}
.contact-quick a{ color:#3d6f72; font-weight:800; text-decoration:none; word-break:break-word; }
.contact-quick .hint{ margin-left:auto; font-size:.8rem; color:#6b7d82; }

/* Mobile polish */
@media (max-width: 700px){
  .tpt-card{ width:94vw; }
}