/* Hammock Plumbing Co — Direction C: Bold Modern / High Contrast
   Bebas Neue (huge condensed display) + Space Grotesk (body/UI) + JetBrains Mono (labels/data).
   Near-black ground, one electric accent lifted from the torch-flame photo. Dark mode only, by design. */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* Five-colour brand kit — bg/fg neutral pair, accent (electric blue),
     danger-pop (signal red, matches the red-backdrop fitting photo) and
     amber all load-bearing, not just "dark bg + one blue." */
  --bg: #0A0B0D;
  --panel: #131519;
  --panel-2: #1B1E24;
  --line: #2A2E36;
  --fg: #F3F3EF;
  --fg-dim: #9AA0AA;
  --accent: #43B7F0;
  --accent-deep: #1F8FC9;
  --danger-pop: #C43B1F;
  --amber: #F0A93E;
  --max: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
}

*,*::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(--bg); color:var(--fg);
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
  position:relative;
}
/* Grain reads as "technical texture" here, not paper — sharper, a touch
   more visible than the warmer sites, on brand for this direction's
   confidence. */
body::before{
  content:""; position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  animation:grain-drift 7s steps(8) infinite;
}
@keyframes grain-drift{ from{ background-position:0 0; } to{ background-position:320px 160px; } }
img{ max-width:100%; display:block; }
a{ color:inherit; }
.display{ font-family:'Bebas Neue', sans-serif; text-transform:uppercase; line-height:.92; letter-spacing:.005em; margin:0; }
.mono{ font-family:'JetBrains Mono', monospace; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.tag{ font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }

/* ---------- Header ---------- */
.masthead{ position:sticky; top:0; z-index:50; background:rgba(10,11,13,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.masthead-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px var(--gutter); max-width:var(--max); margin:0 auto; }
.brand{ font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:.04em; text-decoration:none; line-height:1.4; }
.brand b{ display:block; font-size:15px; color:var(--fg); }
.brand span{ color:var(--fg-dim); }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ text-decoration:none; font-family:'JetBrains Mono', monospace; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dim); transition:color .2s ease; }
.nav-links a:hover{ color:var(--fg); }
.nav-links a.call{ background:var(--accent); color:#04191F; padding:11px 20px; font-weight:700; transition:background .2s ease, transform .15s ease; }
.nav-links a.call:hover{ background:var(--amber); transform:translateY(-1px); }
.nav-links a.call:active{ transform:translateY(0) scale(.95); }
.mobile-panel a{ transition:background-color .15s ease, padding-left .15s ease; }
.mobile-panel a:active{ background:var(--panel); padding-left:14px; }

.nav-toggle{ display:none; background:none; border:1px solid var(--line); width:44px; height:44px; cursor:pointer; }
.nav-toggle span{ display:block; width:16px; height:1.5px; background:var(--fg); margin:4px auto; transition:transform .25s ease, opacity .25s ease; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.35) brightness(.42) contrast(1.15); }
.hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,11,13,.55) 0%, rgba(10,11,13,.75) 55%, var(--bg) 100%); }
.hero-inner{ position:relative; max-width:var(--max); margin:0 auto; padding:clamp(90px,14vw,180px) var(--gutter) clamp(50px,7vw,90px); }
.hero-inner .tag{ display:inline-block; margin-bottom:22px; }
.hero-inner h1{ font-size:clamp(58px,11vw,168px); color:var(--fg); }
.hero-inner h1 .accent{ color:var(--accent); }
.hero-sub{ margin-top:26px; max-width:52ch; color:var(--fg-dim); font-size:17px; }
.hero-cta{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 28px; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; transition:all .2s ease; }
.btn-solid{ background:var(--accent); color:#04191F; font-weight:700; }
.btn-solid:hover{ background:var(--amber); transform:translateY(-2px); box-shadow:0 10px 28px -12px rgba(240,169,62,.5); }
.btn-solid:active{ background:var(--amber); transform:translateY(0) scale(.96); box-shadow:none; }
.btn-outline{ border:1px solid var(--line); color:var(--fg); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn-outline:active{ transform:translateY(0) scale(.96); }

.hero-stats{ position:relative; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }
.hero-stats div{ padding:26px var(--gutter); border-right:1px solid var(--line); }
.hero-stats div:last-child{ border-right:none; }
.hero-stats .display{ font-size:clamp(34px,4.5vw,58px); color:var(--fg); }
.hero-stats .mono{ font-size:11px; color:var(--fg-dim); letter-spacing:.1em; text-transform:uppercase; margin-top:6px; display:block; }
@media (max-width:760px){ .hero-stats{ grid-template-columns:1fr; } .hero-stats div{ border-right:none; border-bottom:1px solid var(--line); } }

/* ---------- Services grid ---------- */
.section{ padding:clamp(60px,9vw,110px) var(--gutter); max-width:var(--max); margin:0 auto; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:48px; }
.section-head h2{ font-size:clamp(42px,7vw,86px); color:var(--fg); }
.section-head .tag{ margin-bottom:14px; display:block; }

.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.svc-card{ background:var(--panel); padding:34px 28px; border-left:3px solid transparent; transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.svc-card:hover{ background:var(--panel-2); border-left-color:var(--accent); transform:translateX(4px); }
.svc-card:active{ background:var(--panel-2); border-left-color:var(--amber); transform:translateX(4px) scale(.99); }
.svc-card .idx{ font-family:'JetBrains Mono',monospace; color:var(--accent); font-size:12px; letter-spacing:.08em; transition:color .2s ease; }
.svc-card:hover .idx{ color:var(--amber); }
.svc-card h3{ font-family:'Bebas Neue',sans-serif; text-transform:uppercase; font-size:28px; letter-spacing:.01em; margin:14px 0 12px; line-height:1.05; }
.svc-card p{ color:var(--fg-dim); font-size:14px; margin:0; }
@media (max-width:900px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---------- Full bleed photo break ---------- */
.break{ position:relative; height:clamp(280px,44vw,520px); overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.break img{ width:100%; height:100%; object-fit:cover; }
/* Colour-grade toward the brand palette — cool blue shadow, warm amber
   lift — instead of the photo sitting untouched against the dark UI. */
.break::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(160deg, rgba(67,183,240,.35) 0%, transparent 45%, rgba(240,169,62,.3) 100%);
  mix-blend-mode:overlay;
}
.break-tag{ position:absolute; left:var(--gutter); bottom:24px; z-index:2; background:var(--bg); border:1px solid var(--line); padding:10px 16px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-dim); }

/* ---------- Giant stat band ---------- */
.giant{ text-align:center; padding:clamp(60px,10vw,120px) var(--gutter); border-bottom:1px solid var(--line); }
.giant .display{ font-size:clamp(90px,20vw,260px); color:var(--fg); }
.giant .tag{ display:block; margin-top:10px; }

/* ---------- Services detail spreads (services.html) ---------- */
.svc-detail{ display:grid; grid-template-columns:140px 1fr; gap:32px; padding:40px 0; border-bottom:1px solid var(--line); }
.svc-detail .idx{ font-family:'Bebas Neue',sans-serif; font-size:64px; color:var(--panel-2); -webkit-text-stroke:1.5px var(--line); }
.svc-detail h3{ font-family:'Bebas Neue',sans-serif; font-size:clamp(30px,4vw,44px); text-transform:uppercase; color:var(--fg); margin-bottom:12px; }
.svc-detail p{ color:var(--fg-dim); max-width:64ch; font-size:15.5px; }
.svc-detail .tags{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.svc-detail .tags span{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); padding:5px 10px; }
@media (max-width:700px){ .svc-detail{ grid-template-columns:1fr; } .svc-detail .idx{ font-size:40px; } }

/* ---------- Contact ---------- */
.contact{ background:var(--panel); border-top:1px solid var(--line); }
.contact-grid{ max-width:var(--max); margin:0 auto; padding:clamp(60px,9vw,110px) var(--gutter); display:grid; grid-template-columns:1.1fr .9fr; gap:56px; }
.contact-grid h2{ font-family:'Bebas Neue',sans-serif; text-transform:uppercase; font-size:clamp(44px,7vw,90px); color:var(--fg); }
.contact-grid .huge-phone{ display:inline-block; margin-top:24px; font-family:'JetBrains Mono',monospace; font-size:clamp(20px,3vw,30px); color:var(--accent); text-decoration:none; border-bottom:2px solid var(--accent); padding-bottom:4px; transition:color .2s ease, border-color .2s ease; }
.contact-grid .huge-phone:hover{ color:var(--amber); border-color:var(--amber); }
.contact-grid .huge-phone:active{ color:var(--danger-pop); border-color:var(--danger-pop); }
.hours-grid{ display:grid; grid-template-columns:1fr auto; gap:0; }
.hours-grid .d{ padding:12px 0; border-bottom:1px solid var(--line); font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-dim); }
.hours-grid .t{ padding:12px 0; border-bottom:1px solid var(--line); font-family:'JetBrains Mono',monospace; font-size:12.5px; text-align:right; color:var(--fg); }
.hours-grid .today .d, .hours-grid .today .t{ color:var(--accent); }
.addr{ margin-top:26px; color:var(--fg-dim); font-size:14.5px; line-height:1.7; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
footer{ padding:34px var(--gutter) 26px; border-top:1px solid var(--line); }
.footer-inner{ max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--fg-dim); letter-spacing:.03em; }
.credits{ max-width:var(--max); margin:16px auto 0; font-family:'JetBrains Mono',monospace; font-size:10px; color:#5B6068; line-height:1.8; }
.credits a{ color:#5B6068; text-decoration:underline; text-underline-offset:2px; }

/* Visible by default (no-JS / GSAP-blocked fallback); GSAP applies the
   hidden starting state itself right before animating. */
.reveal{ opacity:1; }
.count-up{ font-variant-numeric:tabular-nums; }

/* ---------- Mobile nav panel ----------
   A sibling of <header>, not nested inside it: .masthead has backdrop-filter,
   and a backdrop-filter/filter/transform ancestor creates a new containing
   block for position:fixed descendants — nesting collapsed this panel's
   "fixed" box down to the header bar instead of the viewport, which read as
   a transparent sliver instead of a real menu. */
.mobile-panel{ display:none; }
@media (max-width:800px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .mobile-panel{
    display:none; position:fixed; inset:0; z-index:300;
    background:var(--bg); flex-direction:column;
    opacity:0; transition:opacity .3s ease;
  }
  .mobile-panel.open{ display:flex; opacity:1; }
  .mobile-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:16px var(--gutter); border-bottom:1px solid var(--line); }
  .mobile-panel-close{ background:none; border:1px solid var(--line); width:44px; height:44px; font-size:20px; line-height:1; cursor:pointer; color:var(--fg); }
  .mobile-panel-links{ display:flex; flex-direction:column; padding:8px var(--gutter) 24px; overflow-y:auto; }
  .mobile-panel a{ padding:18px 4px; border-bottom:1px solid var(--line); font-family:'Bebas Neue',sans-serif; font-size:30px; text-transform:uppercase; text-decoration:none; color:var(--fg); min-height:44px; display:flex; align-items:center; }
  .mobile-panel a.call{ color:var(--accent); }
}
html.nav-locked{ overflow:hidden; }

/* ---------- Colour zones ----------
   Flat fallback per section for no-JS/reduced-motion; script.js adds
   .bg-scroll-live to make these transparent so a fast, punchy scrub-driven
   <body> colour cross-fade shows through instead — short scroll distance
   per transition, real hue shifts (blue-black / red-black), matching this
   direction's high-contrast energy rather than a slow drift. */
.zone-services{ background:#0A141F; }
.zone-giant{ background:#170A0A; }
.zone-contact{ background:var(--panel); }
html.bg-scroll-live .zone-services,
html.bg-scroll-live .zone-giant,
html.bg-scroll-live .zone-contact{ background:transparent; }

/* ---------- Map ---------- */
.map-frame{ position:relative; width:100%; height:clamp(280px,42vw,460px); border:1px solid var(--line); overflow:hidden; filter:grayscale(.4) brightness(.75) contrast(1.1) invert(.92) hue-rotate(180deg); }
.map-frame iframe{ width:100%; height:100%; border:0; }