/* Hammock Plumbing Co — Direction D: One-Page / Sticky Call
   Plus Jakarta Sans throughout (one geometric-sans family, no serif, no
   mono labels) — a "functional utility app" register, distinct from A/B/C.
   Built for the burst-pipe-on-a-phone scenario: everything on one scroll,
   a persistent call bar, big tap targets, urgent-but-trustworthy colour. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  /* Five-colour brand kit: paper/ink neutral pair; signal (urgent CTA
     orange), teal (secondary/trust accent) and sky (zone tint) all in use. */
  --paper: #F7F9FA;
  --paper-2: #EFF4F5;
  --ink: #16232E;
  --ink-soft: #4E5D68;
  --line: #DCE4E7;
  --signal: #FF6B35;
  --signal-deep: #E0501D;
  --signal-tint: #FFE9DF;
  --teal: #1B8A8A;
  --teal-deep: #146868;
  --teal-tint: #DCF0EE;
  --sky-tint: #DCEEF2;
  --card: #FFFFFF;
  --max: 720px;
  --gutter: clamp(18px, 5vw, 32px);
  --bar-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  padding-bottom:var(--bar-h);
  position:relative;
}
body::before{
  content:""; position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px;
  animation:grain-drift 10s steps(8) infinite;
}
@keyframes grain-drift{ from{ background-position:0 0; } to{ background-position:340px 170px; } }

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-weight:800; line-height:1.1; margin:0; letter-spacing:-.01em; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.eyebrow{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-deep); font-weight:700; }

/* ---------- Top bar ---------- */
.topbar{ position:sticky; top:0; z-index:100; background:rgba(247,249,250,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px var(--gutter); max-width:var(--max); margin:0 auto; }
.brand{ font-weight:800; font-size:17px; text-decoration:none; }
.brand small{ display:block; font-weight:500; font-size:11px; color:var(--ink-soft); }
.topbar-call{
  display:inline-flex; align-items:center; gap:8px; background:var(--signal); color:#fff;
  padding:11px 18px; border-radius:999px; font-weight:700; font-size:14.5px; text-decoration:none;
  transition:background .2s ease, transform .15s ease; min-height:44px;
}
.topbar-call:hover{ background:var(--signal-deep); transform:translateY(-1px); }
.topbar-call:active{ transform:translateY(0) scale(.96); }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,35,46,.72) 0%, rgba(22,35,46,.55) 55%, var(--paper) 100%); }
.hero-inner{ position:relative; max-width:var(--max); margin:0 auto; padding:clamp(44px,10vw,80px) var(--gutter) clamp(60px,10vw,100px); color:#fff; }
.hero-inner .eyebrow{ color:#BEEAE6; }
.hero-inner h1{ font-size:clamp(34px,8vw,54px); margin-top:14px; color:#fff; }
.hero-inner p{ margin-top:16px; max-width:44ch; color:#D9E2E6; font-size:16.5px; }
.hero-cta{ margin-top:26px; display:flex; flex-direction:column; gap:12px; max-width:360px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 24px; border-radius:14px; font-weight:700; font-size:16px; text-decoration:none; transition:transform .15s ease, background .2s ease, box-shadow .2s ease; min-height:52px; }
.btn-signal{ background:var(--signal); color:#fff; box-shadow:0 10px 26px -10px rgba(255,107,53,.6); }
.btn-signal:hover{ background:var(--signal-deep); transform:translateY(-2px); }
.btn-signal:active{ transform:translateY(0) scale(.97); box-shadow:0 4px 12px -6px rgba(255,107,53,.5); }
.btn-outline-light{ border:1.5px solid rgba(255,255,255,.55); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn-outline-light:active{ transform:translateY(0) scale(.97); }

.hero-stats{ position:relative; display:flex; gap:0; margin-top:32px; border-top:1px solid rgba(255,255,255,.2); padding-top:20px; max-width:360px; }
.hero-stats div{ flex:1; }
.hero-stats .num{ font-size:26px; font-weight:800; color:#fff; }
.hero-stats .lbl{ font-size:11.5px; color:#BFCBD1; text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }

/* ---------- Quick-tap service cards ---------- */
.services{ padding:clamp(40px,8vw,64px) var(--gutter); max-width:var(--max); margin:0 auto; }
.services h2{ font-size:clamp(24px,5vw,32px); }
.services > p{ color:var(--ink-soft); margin-top:8px; font-size:15px; }
.svc-cards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.svc-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px;
  text-decoration:none; color:inherit; transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease;
  min-height:44px;
}
.svc-card:hover{ border-color:var(--teal); box-shadow:0 12px 28px -16px rgba(27,138,138,.35); transform:translateY(-2px); }
.svc-card:active{ transform:translateY(0) scale(.98); background:var(--teal-tint); }
.svc-card .ico{ width:34px; height:34px; border-radius:10px; background:var(--sky-tint); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.svc-card h3{ font-size:15.5px; margin-top:12px; font-weight:700; }
.svc-card p{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; line-height:1.4; }
.svc-card.wide{ grid-column:1/-1; display:flex; align-items:center; gap:14px; }
.svc-card.wide h3{ margin-top:0; }

/* ---------- Colour zones ---------- */
.zone-services{ background:var(--sky-tint); border-radius:28px 28px 0 0; }
.zone-trust{ background:var(--teal-tint); }
.zone-about{ background:var(--paper); }
.zone-hours{ background:var(--signal-tint); }
.zone-contact{ background:var(--paper-2); }
html.bg-scroll-live .zone-services,
html.bg-scroll-live .zone-trust,
html.bg-scroll-live .zone-about,
html.bg-scroll-live .zone-hours,
html.bg-scroll-live .zone-contact{ background:transparent; }

/* ---------- Trust band ---------- */
.trust{ padding:clamp(44px,9vw,72px) var(--gutter); text-align:center; }
.trust .stars{ color:var(--signal); font-size:22px; letter-spacing:3px; }
.trust h2{ font-size:clamp(28px,6vw,40px); margin-top:14px; }
.trust p{ margin-top:10px; color:var(--ink-soft); font-size:14.5px; }

/* ---------- About strip ---------- */
.about-strip{ padding:clamp(40px,8vw,64px) var(--gutter); max-width:var(--max); margin:0 auto; }
.about-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:22px; }
.about-item{ display:flex; gap:14px; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:16px; transition:transform .15s ease, box-shadow .2s ease; }
.about-item:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -18px rgba(22,35,46,.3); }
.about-item .n{ font-weight:800; font-size:20px; color:var(--teal-deep); min-width:28px; }
.about-item h3{ font-size:15.5px; }
.about-item p{ font-size:13.5px; color:var(--ink-soft); margin-top:4px; }

/* ---------- Hours ---------- */
.hours{ padding:clamp(40px,8vw,64px) var(--gutter); max-width:var(--max); margin:0 auto; }
.hours h2{ font-size:clamp(24px,5vw,32px); }
.hours-table{ width:100%; border-collapse:collapse; margin-top:20px; background:var(--card); border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.hours-table td{ padding:13px 16px; border-bottom:1px solid var(--line); font-size:14.5px; }
.hours-table tr:last-child td{ border-bottom:none; }
.hours-table td:last-child{ text-align:right; color:var(--ink-soft); }
.hours-table tr.today{ background:var(--signal-tint); }
.hours-table tr.today td{ color:var(--signal-deep); font-weight:700; }

/* ---------- Map + contact ---------- */
.contact{ padding:clamp(40px,8vw,64px) var(--gutter) clamp(70px,10vw,100px); max-width:var(--max); margin:0 auto; }
.contact h2{ font-size:clamp(24px,5vw,32px); }
.map-frame{ position:relative; width:100%; height:260px; border-radius:16px; border:1px solid var(--line); overflow:hidden; margin-top:20px; filter:saturate(.9); }
.map-frame iframe{ width:100%; height:100%; border:0; }
.contact-card{ margin-top:18px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; }
.contact-card .row{ display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.contact-card .row:last-child{ border-bottom:none; }
.contact-card .row a{ font-weight:700; color:var(--teal-deep); text-decoration:none; }
.contact-card .row a:hover{ color:var(--signal); }
.contact-card .row a:active{ color:var(--signal-deep); }

/* ---------- Footer ---------- */
footer{ padding:28px var(--gutter) 24px; border-top:1px solid var(--line); max-width:var(--max); margin:0 auto; }
footer .fmeta{ font-size:12px; color:var(--ink-soft); }
.credits{ margin-top:14px; font-size:10.5px; color:#8A97A0; line-height:1.8; }
.credits a{ color:#8A97A0; text-decoration:underline; text-underline-offset:2px; }

/* ---------- Persistent sticky call bar ---------- */
.call-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:500; height:var(--bar-h);
  background:var(--ink); display:flex; align-items:stretch;
  box-shadow:0 -8px 24px -12px rgba(0,0,0,.35);
}
.call-bar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:10px;
  color:#fff; text-decoration:none; font-weight:700; font-size:16px;
  transition:background .2s ease;
}
.call-bar a.primary{ background:var(--signal); flex:1.4; }
.call-bar a.primary:active{ background:var(--signal-deep); }
.call-bar a:not(.primary):active{ background:rgba(255,255,255,.08); }
.call-bar .pulse{ width:9px; height:9px; border-radius:50%; background:#fff; animation:call-pulse 1.8s ease-in-out infinite; }
@keyframes call-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.5; transform:scale(1.4); } }

/* reveal-on-scroll: visible by default (no-JS / GSAP-blocked fallback) */
.reveal{ opacity:1; }
.count-up{ font-variant-numeric:tabular-nums; }