/* Hammock Plumbing Co — Direction B: Quiet Luxury / Minimal Residential
   Fraunces (soft display serif, italic accents) + Inter (light sans).
   Stone-neutral palette, one restrained bronze accent, maximum whitespace. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600&display=swap');

:root{
  /* Five-colour brand kit. Stone/ink are the neutral pair; bronze, sage and
     umber are the three hues actually in play — sage for the quiet mid-page
     drift, umber for the one deliberate deep beat, bronze throughout. */
  --stone: #F3EFE8;
  --stone-2: #EAE3D7;
  --ink: #2B2823;
  --ink-soft: #6B6355;
  --hair: #DCD3C1;
  --bronze: #9B7A42;
  --bronze-deep: #7C5F30;
  --bronze-tint: #F1E8D7;
  --sage: #7C8B75;
  --sage-tint: #ECEEE6;
  --umber: #4A3B2E;
  --card: #FBFAF6;
  --max: 1320px;
  --gutter: clamp(24px, 6vw, 96px);
}

*,*::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(--stone); color:var(--ink);
  font-family:'Inter', system-ui, sans-serif; font-weight:300;
  font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
  position:relative;
}
/* Barely-there grain — restraint means it should be felt, not seen. */
body::before{
  content:""; position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:.028; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  animation:grain-drift 14s steps(6) infinite;
}
@keyframes grain-drift{ from{ background-position:0 0; } to{ background-position:200px 400px; } }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; font-weight:400; line-height:1.08; margin:0; letter-spacing:-.01em; }
em{ font-style:italic; font-weight:400; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.label{ font-size:11px; text-transform:uppercase; letter-spacing:.22em; color:var(--bronze-deep); font-weight:500; }

/* ---------- Header ---------- */
.masthead{ position:sticky; top:0; z-index:50; background:rgba(243,239,232,.9); backdrop-filter:blur(8px); }
.masthead-inner{ display:flex; align-items:center; justify-content:space-between; padding:30px var(--gutter); max-width:var(--max); margin:0 auto; }
.brand{ font-family:'Fraunces', serif; font-size:19px; letter-spacing:.02em; }
.nav-links{ display:flex; align-items:center; gap:48px; }
.nav-links a{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .25s ease, color .25s ease; }
.nav-links a:hover{ border-color:var(--bronze); color:var(--bronze-deep); }
.nav-links a.call{ color:var(--bronze-deep); font-weight:500; }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; width:44px; height:44px; position:relative; }
.nav-toggle span{ display:block; width:22px; height:1px; background:var(--ink); position:absolute; left:11px; transition:transform .25s ease, opacity .25s ease; }
.nav-toggle span:nth-child(1){ top:19px; } .nav-toggle span:nth-child(2){ top:25px; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; height:min(92vh, 920px); min-height:520px; overflow:hidden; }
.hero img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,27,20,.18) 0%, rgba(30,27,20,.05) 40%, rgba(30,27,20,.55) 100%); }
.hero-scrim{ position:absolute; inset:0; background:#1A140D; opacity:0; pointer-events:none; }
.hero-text{
  position:absolute; left:0; right:0; bottom:0; padding:0 var(--gutter) clamp(40px,6vw,80px);
  max-width:var(--max); margin:0 auto; color:#F7F4EC;
}
.hero-text .label{ color:#E7D9BB; }
.hero-text h1{ font-size:clamp(40px,7vw,96px); margin-top:16px; font-weight:300; }
.hero-text h1 em{ display:block; }

/* ---------- Intro statement ---------- */
.intro{ padding:clamp(80px,12vw,160px) var(--gutter) clamp(50px,8vw,100px); max-width:900px; margin:0 auto; text-align:center; }
.intro .label{ display:block; margin-bottom:28px; }
.intro p{ font-family:'Fraunces', serif; font-weight:300; font-size:clamp(24px,3.4vw,36px); line-height:1.45; color:var(--ink); }
.intro p em{ color:var(--bronze-deep); }

.intro-cta{ margin-top:40px; display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; padding:16px 30px; border:1px solid var(--ink); transition:all .3s ease; }
.btn-solid{ background:var(--ink); color:var(--stone); }
.btn-solid:hover{ background:var(--bronze-deep); border-color:var(--bronze-deep); transform:translateY(-1px); box-shadow:0 10px 26px -14px rgba(43,40,35,.5); }
.btn-solid:active{ transform:translateY(0) scale(.97); box-shadow:none; }
.btn-line:hover{ background:var(--ink); color:var(--stone); transform:translateY(-1px); }
.btn-line:active{ transform:translateY(0) scale(.97); }

/* ---------- Divider ---------- */
.hr{ max-width:var(--max); margin:0 auto; height:1px; background:var(--hair); }

/* ---------- Offerings list (no boxes, no numbers-as-graphics; quiet list) ---------- */
.offerings{ padding:clamp(70px,10vw,130px) var(--gutter); max-width:var(--max); margin:0 auto; }
.offerings-head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:64px; align-items:end; }
.offerings-head h2{ font-size:clamp(34px,4.4vw,54px); font-weight:300; }
.offerings-head p{ color:var(--ink-soft); max-width:44ch; font-size:15px; }

.offering-row{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:24px; padding:30px 4px; margin:0 -4px; border-top:1px solid var(--hair); transition:background-color .3s ease; }
.offering-row:last-child{ border-bottom:1px solid var(--hair); }
.offering-row a{ display:contents; }
.offering-name{ font-family:'Fraunces', serif; font-size:clamp(24px,3vw,32px); font-weight:400; transition:color .3s ease, padding-left .3s ease; }
.offering-row:hover{ background:var(--sage-tint); }
.offering-row:hover .offering-name{ color:var(--bronze-deep); padding-left:14px; }
.offering-row:active{ background:var(--bronze-tint); }
.offering-row:active .offering-name{ padding-left:18px; }
.offering-desc{ color:var(--ink-soft); font-size:14px; max-width:42ch; margin-top:8px; }
.offering-index{ font-size:12px; color:var(--ink-soft); letter-spacing:.1em; transition:color .3s ease; }
.offering-row:hover .offering-index{ color:var(--sage); }
@media (max-width:820px){ .offerings-head{ grid-template-columns:1fr; } .offering-row{ grid-template-columns:1fr; } }

/* ---------- Full bleed break ---------- */
.break{ position:relative; height:clamp(320px,52vw,640px); overflow:hidden; }
.break img{ width:100%; height:100%; object-fit:cover; }
/* Colour-grade toward the brand palette — bronze shadow, sage lift —
   rather than a photo dropped in untouched. */
.break::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(155,122,66,.16) 0%, transparent 50%, rgba(124,139,117,.16) 100%);
  mix-blend-mode:multiply;
}

/* ---------- Trust strip ---------- */
.trust{ padding:clamp(70px,9vw,110px) var(--gutter); text-align:center; }
.trust .stars{ letter-spacing:4px; color:var(--bronze); font-size:15px; margin-bottom:22px; }
.trust h2{ font-size:clamp(30px,4vw,44px); font-weight:300; }
.trust p{ margin-top:16px; color:var(--ink-soft); font-size:14px; letter-spacing:.04em; }

/* ---------- Contact ---------- */
.contact{ padding:clamp(70px,9vw,130px) var(--gutter) clamp(90px,10vw,150px); max-width:var(--max); margin:0 auto; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.contact-grid h2{ font-size:clamp(32px,4.5vw,52px); font-weight:300; margin-bottom:10px; }
.contact-col .label{ display:block; margin-bottom:18px; }
.info-line{ display:flex; justify-content:space-between; padding:16px 4px; margin:0 -4px; border-top:1px solid var(--hair); font-size:14.5px; transition:background-color .25s ease; }
.info-line:last-child{ border-bottom:1px solid var(--hair); }
.info-line span:last-child{ color:var(--ink-soft); text-align:right; }
.info-line.now span:last-child{ color:var(--bronze-deep); font-weight:500; }
.info-line.now{ background:var(--bronze-tint); }
.info-line a{ transition:color .2s ease; }
.info-line a:hover{ color:var(--bronze-deep); }
.info-line a:active{ color:var(--umber); }

/* ---------- Colour zones ----------
   Flat fallback per section for no-JS/reduced-motion; script.js adds
   .bg-scroll-live to make these transparent so a slow, scrub-driven <body>
   colour cross-fade can show through instead — restrained tints, a long
   scroll distance per transition, matching this direction's quiet pace. */
.zone-offerings{ background:var(--sage-tint); }
.zone-trust{ background:var(--bronze-tint); }
.zone-contact{ background:var(--stone-2); }
html.bg-scroll-live .zone-offerings,
html.bg-scroll-live .zone-trust,
html.bg-scroll-live .zone-contact{ background:transparent; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- Footer ---------- */
footer{ padding:36px var(--gutter) 30px; border-top:1px solid var(--hair); }
.footer-inner{ max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); letter-spacing:.03em; }
.credits{ max-width:var(--max); margin:18px auto 0; font-size:10.5px; color:#A79E8C; line-height:1.8; }
.credits a{ color:#A79E8C; text-decoration:underline; text-underline-offset:2px; }

/* reveal-on-scroll: 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:780px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .mobile-panel{
    display:none; position:fixed; inset:0; z-index:300;
    background:var(--stone); 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:24px var(--gutter); border-bottom:1px solid var(--hair); }
  .mobile-panel-close{ background:none; border:1px solid var(--ink); width:44px; height:44px; font-size:22px; line-height:1; cursor:pointer; color:var(--ink); }
  .mobile-panel-links{ display:flex; flex-direction:column; padding:8px var(--gutter) 24px; overflow-y:auto; }
  .mobile-panel a{ padding:20px 4px; border-bottom:1px solid var(--hair); font-family:'Fraunces',serif; font-size:24px; min-height:44px; display:flex; align-items:center; transition:background-color .15s ease, padding-left .15s ease; }
  .mobile-panel a.call{ color:var(--bronze-deep); }
  .mobile-panel a:active{ background:var(--sage-tint); padding-left:14px; }
}
html.nav-locked{ overflow:hidden; }

/* ---------- Map ---------- */
.map-frame{ position:relative; width:100%; height:clamp(280px,42vw,460px); border:1px solid var(--hair); overflow:hidden; filter:sepia(.08) saturate(.85) contrast(1.01); }
.map-frame iframe{ width:100%; height:100%; border:0; }

/* ---------- Cinematic hero pin (GSAP) ---------- */
.hero-pin-wrap{ position:relative; }
@media (min-width:781px){
  .hero{ will-change:transform; }
}