/* ===========================================================================
   Still Waters Retreat House — shared stylesheet
   Extracted from the approved single-page mockup (2026-08-08, full build
   Batch 1). Everything above the "FULL BUILD ADDITIONS" marker is the
   client-approved CSS moved verbatim. Palette, type and layout are LOCKED
   per BUILD-REPORT section 3 — do not redesign.
   =========================================================================== */

/* --- self-hosted fonts (Batch 2) ------------------------------------------
   Latin subsets pulled from Google Fonts and served from /fonts, so the site
   makes no request to fonts.googleapis.com or fonts.gstatic.com. All three
   families are SIL Open Font License, which permits self-hosting.
   font-display:swap everywhere: text paints immediately in the fallback and
   reflows when the webfont lands, rather than sitting invisible.
   Instrument Sans ships as a single variable file per style covering 400-700,
   so the whole family is two requests instead of six.
   ------------------------------------------------------------------------- */
@font-face{
  font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/instrument-serif-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/instrument-serif-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/instrument-sans-var-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('/fonts/instrument-sans-var-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/space-mono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/space-mono-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --navy:#2e535b;
  --navy-2:#24434a;
  --navy-3:#38626b;
  --gold:#cba86a;
  --gold-soft:#dcc28e;
  --cream:#faf8f1;
  --paper:#ffffff;
  --ink:#1d2a2e;
  --muted:#5f6f72;
  --line:#e4ded0;
  --line-dark:#33565e;
  --shadow:0 18px 50px rgba(36,67,74,.14);
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Instrument Sans',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Instrument Serif',Georgia,serif;line-height:1.06;font-weight:400;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.gold{color:var(--gold)}
.ital{font-style:italic;font-weight:600}
.eyebrow{font-family:'Space Mono',monospace;font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;vertical-align:middle;margin:0 10px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:1rem;padding:15px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--navy-2);box-shadow:0 12px 30px rgba(203,168,106,.35)}
.btn-gold:hover{background:var(--gold-soft)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-ink{background:var(--navy);color:#fff}
.btn-ink:hover{background:var(--navy-3)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(36,67,74,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-dark)}
/* NO gap here — see the 1280+ floor in the NAV MODE SWITCH block. A gap on
   the base rule overflows the row at 360px, where brand + Menu chip + phone
   pill already fill the width and there is no slack to give. */
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;font-family:'Instrument Serif';font-weight:400;font-size:1.16rem;letter-spacing:-.01em;white-space:nowrap}
@media(max-width:480px){
  .nav .brand{font-size:1.02rem;gap:8px}
  header .nav .callbtn{font-size:0;gap:0;padding:11px 13px}
}
@media(max-width:350px){.nav .brand{font-size:.9rem}}
.brand .mark{width:36px;height:36px;border-radius:50%;background:#faf8f1;overflow:hidden;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.brand .mark img{width:100%;height:100%;object-fit:cover;display:block}
.navlinks{display:flex;gap:26px}
.navlinks a{color:#d3dee0;font-size:.92rem;font-weight:500;transition:color .15s;white-space:nowrap}
.navlinks a:hover{color:var(--gold)}
/* white-space:nowrap — at 1100 the number was breaking to three lines inside
   the pill. The pill must size to its content and let the row give by gap. */
.nav .callbtn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--navy-2);font-weight:700;padding:10px 18px;border-radius:999px;font-size:.92rem;white-space:nowrap}
.nav .callbtn:hover{background:var(--gold-soft)}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--navy-2);color:#fff;padding:96px 0 104px}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(102deg,rgba(21,42,47,.82) 0%,rgba(21,42,47,.42) 48%,rgba(21,42,47,.16) 100%),
  linear-gradient(180deg,rgba(21,42,47,0) 32%,rgba(21,42,47,.5) 100%)}
.hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-bg .g1{position:absolute;width:120%;height:120%;top:-30%;left:-25%;background:radial-gradient(closest-side,rgba(203,168,106,.16),transparent 70%);animation:drift1 16s ease-in-out infinite alternate}
.hero-bg .g2{position:absolute;width:90%;height:90%;bottom:-25%;right:-20%;background:radial-gradient(closest-side,rgba(96,138,132,.45),transparent 70%);animation:drift2 20s ease-in-out infinite alternate}
.sparks span{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.0;animation:spark 7s linear infinite}
.sparks span:nth-child(1){left:12%;top:30%;animation-delay:0s}
.sparks span:nth-child(2){left:78%;top:22%;animation-delay:1.4s}
.sparks span:nth-child(3){left:62%;top:62%;animation-delay:2.7s}
.sparks span:nth-child(4){left:30%;top:70%;animation-delay:4s}
.sparks span:nth-child(5){left:88%;top:54%;animation-delay:5.3s}
@keyframes drift1{to{transform:translate(60px,40px)}}
@keyframes drift2{to{transform:translate(-50px,-30px)}}
@keyframes spark{0%{opacity:0;transform:translateY(8px) scale(.6)}20%{opacity:.9}60%{opacity:.5}100%{opacity:0;transform:translateY(-26px) scale(1)}}
.hero .wrap{position:relative;z-index:2}
.hero-pill{display:inline-flex;align-items:center;color:#eaf1f0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:8px 16px;border-radius:999px;margin-bottom:26px}
.hero h1{max-width:none}
.h1-caps{display:block;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(.95rem,1.8vw,1.25rem);letter-spacing:.34em;text-transform:uppercase;color:#e8e2d4;margin-bottom:16px;padding-left:.12em}
.h1-ital{display:block;font-style:italic;font-size:clamp(1.75rem,4.9vw,4rem);line-height:1.12;white-space:nowrap}
.h1-ital .em{color:var(--gold-soft)}
.stitch{position:relative;display:inline-block;padding-bottom:.14em;line-height:1.05}
.stitch:after{content:"";position:absolute;left:0;bottom:.02em;height:.09em;width:100%;background-image:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) .4em,transparent .4em,transparent .74em);background-repeat:no-repeat;background-size:0% 100%;animation:stitchdraw 7s cubic-bezier(.45,.05,.35,.95) infinite;animation-delay:1.6s}
@keyframes stitchdraw{0%{background-size:0% 100%;opacity:1}55%{background-size:100% 100%;opacity:1}88%{background-size:100% 100%;opacity:1}96%{background-size:100% 100%;opacity:0}97%{background-size:0% 100%;opacity:0}100%{background-size:0% 100%;opacity:1}}
@media (prefers-reduced-motion:reduce){.stitch:after{animation:none;background-size:100% 100%}}
.hero p.sub{font-size:1.16rem;color:#d0dcda;max-width:52ch;margin:24px 0 34px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-trust{display:flex;flex-wrap:wrap;gap:6px 0;align-items:center;margin-top:30px;color:#b6c6c4;font-size:.9rem;font-weight:500}
.hero-trust b{color:#fff;font-weight:600}
.verse{font-family:'Instrument Serif';font-style:italic;color:#e6ded0}
.hero-seal{position:absolute;right:5%;top:50%;margin-top:calc(clamp(160px,15vw,240px) / -2);width:clamp(160px,15vw,240px);aspect-ratio:1/1;border-radius:50%;background:#faf8f1;box-shadow:0 24px 70px rgba(21,42,47,.45),0 0 0 6px rgba(220,194,142,.35);overflow:hidden;z-index:3}
.hero-seal img{width:100%;height:100%;object-fit:cover;display:block}
.hero-seal.rise{animation-delay:.9s}
@media(max-width:1080px){
  .hero-seal{position:static;width:110px;margin:0 auto 26px;box-shadow:0 14px 40px rgba(21,42,47,.4),0 0 0 4px rgba(220,194,142,.35)}
  .hero .wrap{text-align:left}
}

/* entrance: staggered line-mask reveal + fade-up support */
.hl{display:block;overflow:hidden;padding-bottom:.3em;margin-bottom:-.3em}
.hl-in{display:inline-block;transform:translateY(112%);animation:lineup 1s cubic-bezier(.22,1,.36,1) forwards}
.hl:nth-of-type(1) .hl-in{animation-delay:.16s}
.hl:nth-of-type(2) .hl-in{animation-delay:.3s}
@keyframes lineup{to{transform:translateY(0)}}
.rise{opacity:0;transform:translateY(18px);animation:riseup .9s cubic-bezier(.22,1,.36,1) forwards}
.hero .hero-pill.rise{animation-delay:.04s}
.hero p.sub.rise{animation-delay:.52s}
.hero .hero-cta.rise{animation-delay:.66s}
.hero .hero-trust.rise{animation-delay:.8s}
@keyframes riseup{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.hl-in,.rise{animation:none;transform:none;opacity:1}}

/* trust bar */
.trustbar{background:var(--navy);color:#fff;border-top:1px solid var(--line-dark)}
.trustbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tstat{padding:30px 22px;text-align:center;border-right:1px solid var(--line-dark)}
.tstat:last-child{border-right:none}
.tstat .n{font-family:'Instrument Serif';font-size:1.95rem;font-weight:400;color:var(--gold)}
.tstat .l{font-family:'Space Mono',monospace;font-size:.72rem;color:#c4d2d0;margin-top:6px;letter-spacing:.02em;text-transform:uppercase}
@media(max-width:680px){.trustbar .wrap{grid-template-columns:1fr 1fr}.tstat:nth-child(2){border-right:none}.tstat:nth-child(1),.tstat:nth-child(2){border-bottom:1px solid var(--line-dark)}}
/* Same min-width:auto grid trap as .area-wrap below. At 320 the two columns
   are 160px each, and "Susquehanna" plus this rule's letter-spacing exceeds
   what is left after the 22px side padding, so the track refused to shrink
   and pushed the page 2px wide. Only bites at 320; 360 up was already clean. */
.trustbar .wrap>*{min-width:0}
.tstat .l{overflow-wrap:anywhere}

/* sections */
section{padding:84px 0}
.sec-head{max-width:62ch;margin-bottom:48px}
.sec-head .eyebrow{color:var(--gold);display:block;margin-bottom:14px}
.sec-head h2{font-size:clamp(2rem,4vw,2.85rem);color:var(--navy-2)}
.sec-head p{color:var(--muted);font-size:1.08rem;margin-top:16px;max-width:54ch}

/* house cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:0;overflow:hidden;transition:transform .18s ease,box-shadow .2s ease,border-color .2s}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#ddceac}
.svc-img{position:relative;aspect-ratio:16/10;width:100%;background:#31555d}
.svc-img img{width:100%;height:100%;object-fit:cover;display:block}
.svc-body{padding:32px 26px 28px}
.svc .ic{position:absolute;left:20px;bottom:-23px;width:46px;height:46px;border-radius:11px;background:linear-gradient(150deg,#f6eedb,#ecd8ad);display:grid;place-items:center;box-shadow:0 8px 20px rgba(36,67,74,.25);z-index:2}
.svc h3{font-size:1.22rem;color:var(--navy-2);margin-bottom:8px}
.svc p{color:var(--muted);font-size:.95rem;margin-bottom:14px}
.svc ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.svc li{font-size:.8rem;color:var(--navy-3);background:#eef1e5;border:1px solid var(--line);padding:5px 11px;border-radius:999px;font-weight:500}
.svc.feat{background:var(--navy-2);border-color:var(--navy-3)}
.svc.feat .svc-body h3,.svc.feat .svc-body p{color:#fff}
.svc.feat .svc-body p{color:#cfdcda}
.svc.feat .ic{background:linear-gradient(150deg,var(--gold),#b08c4d)}
.svc.feat li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#eef4f3}
.svc.feat .svc-img:after{content:"The heart of the house";position:absolute;top:14px;right:14px;background:var(--gold);color:var(--navy-2);font-family:'Space Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.04em;padding:5px 10px;border-radius:6px;text-transform:uppercase}
@media(max-width:860px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* gallery */
.work{background:var(--navy-2);color:#fff}
.work .sec-head h2{color:#fff}
.work .sec-head p{color:#c1cfcd}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--navy-3);background:#20393f}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.tile:hover img{transform:scale(1.05)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:32px 16px 14px;background:linear-gradient(transparent,rgba(21,42,47,.92));color:#fff;font-family:'Instrument Serif';font-weight:400;font-size:1.12rem;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.tile .cap span{display:block;font-family:'Space Mono',monospace;font-weight:700;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:4px;text-shadow:none}
.work .note{margin-top:22px;font-size:.86rem;color:#9db1af}
@media(max-width:760px){.gal{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.gal{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.step{position:relative;padding:30px 22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.step:before{counter-increment:s;content:"0" counter(s);font-family:'Space Mono',monospace;font-size:1.6rem;font-weight:700;color:var(--gold);display:block;margin-bottom:12px}
.step h3{font-size:1.12rem;color:var(--navy-2);margin-bottom:7px}
.step p{color:var(--muted);font-size:.92rem}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}

/* founding list */
.reviews{background:var(--cream)}
.rev-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.rcard h3{font-size:1.15rem;color:var(--navy-2);margin-bottom:10px}
.rcard p{font-size:.96rem;color:var(--muted)}
.rcard .pn{font-family:'Space Mono',monospace;font-size:1.4rem;font-weight:700;color:var(--gold);display:block;margin-bottom:10px}
@media(max-width:860px){.rev-cards{grid-template-columns:1fr}}

/* family */
.family{background:var(--paper)}
.family-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.family-img{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);aspect-ratio:4/5;background:#eef1e5}
.family-img img{width:100%;height:100%;object-fit:cover}
.family-copy .eyebrow{color:var(--gold);display:block;margin-bottom:14px}
.family-copy h2{font-size:clamp(2rem,4vw,2.7rem);color:var(--navy-2)}
.family-copy p{color:var(--muted);font-size:1.05rem;margin-top:16px;max-width:52ch}
.family-copy .verse-line{font-family:'Instrument Serif';font-style:italic;font-size:1.12rem;color:var(--navy-3);margin-top:22px}
@media(max-width:820px){.family-wrap{grid-template-columns:1fr;gap:34px}}

/* getting here */
.areas{background:var(--navy);color:#fff}
.areas .sec-head h2{color:#fff}
.areas .sec-head p{color:#c1cfcd}
.area-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.area-list{display:flex;flex-wrap:wrap;gap:10px}
.area-list span{background:rgba(255,255,255,.06);border:1px solid var(--line-dark);padding:9px 16px;border-radius:999px;font-size:.9rem;color:#e0eae8}
.area-card{background:var(--navy-2);border:1px solid var(--navy-3);border-radius:var(--radius);padding:30px}
.area-card h3{color:#fff;font-size:1.3rem;margin-bottom:14px}
.area-card .row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-dark);font-size:.95rem;color:#d3dedd}
.area-card .row:last-child{border-bottom:none}
.area-card .row b{color:#fff}
@media(max-width:760px){.area-wrap{grid-template-columns:1fr}}
/* Grid items default to min-width:auto, so a track cannot shrink below its
   content's min-content width. The email address is one unbreakable ~298px
   token; with the card's padding that floored this column at 360px and
   pushed the section 24px past the viewport at 360px wide. min-width:0 lets
   the track shrink, overflow-wrap lets the address break instead of
   overflowing. Inherited from the single-page mockup — the same section had
   this at 360px before the split; it only became visible once the page was
   QA'd at 360 on its own. */
.area-wrap>*{min-width:0}
.area-card .row span{overflow-wrap:anywhere}
.nap .row span{overflow-wrap:anywhere}

/* lead + final cta */
.lead{background:var(--cream)}
.lead-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.lead-copy .eyebrow{color:var(--gold);display:block;margin-bottom:14px}
.lead-copy h2{font-size:clamp(2rem,4vw,2.7rem);color:var(--navy-2);max-width:16ch}
.lead-copy p{color:var(--muted);font-size:1.05rem;margin:16px 0 24px;max-width:46ch}
.lead-pts{list-style:none;display:grid;gap:12px;margin-top:10px}
.lead-pts li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;color:var(--ink)}
.lead-pts .ck{flex:none;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--navy-2);display:grid;place-items:center;font-weight:700;font-size:.8rem}
form.card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:var(--shadow)}
form.card h3{font-size:1.35rem;color:var(--navy-2);margin-bottom:6px}
form.card .fhint{font-size:.88rem;color:var(--muted);margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--navy-3);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:.98rem;color:var(--ink);background:#fbf9f3;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;transition:border-color .15s,background .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:#fff}
.field textarea{resize:vertical;min-height:84px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form .submit{width:100%;justify-content:center;margin-top:6px}
.form-note{font-size:.78rem;color:var(--muted);text-align:center;margin-top:14px}
.thanks{display:none;text-align:center;padding:30px 10px}
.thanks .big{font-family:'Instrument Serif';font-size:1.6rem;color:var(--navy-2);margin-bottom:8px}
.thanks p{color:var(--muted)}
@media(max-width:820px){.lead-wrap{grid-template-columns:1fr;gap:34px}}

.finalcta{background:linear-gradient(155deg,var(--navy-2),var(--navy-3));color:#fff;text-align:center}
.finalcta h2{font-size:clamp(2rem,4.5vw,3rem);max-width:20ch;margin:0 auto}
.finalcta p{color:#cfdcda;max-width:48ch;margin:18px auto 30px;font-size:1.08rem}
.finalcta .hero-cta{justify-content:center}
.finalcta .micro{margin-top:20px;color:#a9bcba;font-size:.88rem}

/* faq */
.faq{background:var(--paper)}
.faq-list{max-width:820px;margin:0 auto}
details{border-bottom:1px solid var(--line);padding:20px 0}
details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:'Instrument Serif';font-weight:400;font-size:1.2rem;color:var(--navy-2)}
details summary::-webkit-details-marker{display:none}
details summary .pl{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-weight:700;transition:transform .2s}
details[open] summary .pl{transform:rotate(45deg)}
details p{color:var(--muted);margin-top:14px;font-size:.98rem;max-width:70ch}

/* footer */
footer{background:var(--navy-2);color:#b3c3c1;padding:60px 0 30px;border-top:1px solid var(--line-dark)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line-dark)}
.foot-grid .brand{margin-bottom:16px}
.foot-blurb{font-size:.92rem;max-width:34ch;color:#a9bcba}
.foot-col h4{color:#fff;font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.foot-col a,.foot-col p{display:block;color:#b3c3c1;font-size:.93rem;margin-bottom:10px}
.foot-col a:hover{color:var(--gold)}
.vet{display:inline-flex;align-items:center;gap:8px;background:rgba(203,168,106,.12);border:1px solid rgba(203,168,106,.3);color:var(--gold-soft);font-size:.78rem;font-weight:600;padding:6px 13px;border-radius:999px;margin-top:6px;font-style:italic;font-family:'Instrument Serif'}
.foot-bottom{padding-top:24px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.82rem;color:#8fa3a1}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:30px}}

/* sticky mobile call bar */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px 14px;background:rgba(36,67,74,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line-dark)}
.mobile-bar a{flex:1;justify-content:center;font-size:.95rem;padding:13px}
@media(max-width:860px){.mobile-bar{display:flex}body{padding-bottom:74px}}

.vet-badge{display:inline-flex;align-items:center;gap:8px;color:#e7efee;font-size:.84rem;font-weight:600;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:999px}


/* ZFM watermark ribbon + footer credit removed in Batch 2 — this is a paid
   build, so the mockup attribution comes off. Rules deleted rather than
   commented out so nothing can reintroduce them by restoring markup. */

/* ===========================================================================
   FULL BUILD ADDITIONS — Batch 1 (five-page scaffold)
   Everything below is new structure only. No change to approved sections.
   =========================================================================== */

/* --- nav: multi-page state + extensibility -------------------------------
   Built to survive a 6th and 7th nav item (city/demographic pages later).
   No fixed widths anywhere: the link row shrinks by gap, then the whole
   nav collapses to the menu panel at --nav-collapse. Raise that breakpoint
   rather than shrinking type when items are added. */
.navlinks a[aria-current="page"]{color:var(--gold)}
.navlinks a[aria-current="page"]:after{content:"";display:block;height:1.5px;background:var(--gold);margin-top:5px;opacity:.75}

/* Nav-mode switch lives at the END of this block, below every base rule.
   See "NAV MODE SWITCH" for why the position is load-bearing. */

/* header actions: gold "Check availability" + ghost click-to-call, mirroring
   the approved hero CTA pairing. BUILD-REPORT s6 wants both CTAs present and
   above the fold on Home. The call button keeps its approved icon + number;
   only its fill changes to ghost so two gold pills don't sit side by side. */
/* NO margin-left:auto here. An auto margin absorbs ALL free space in the
   row, which starved the space-between distribution and left exactly 0px
   between the wordmark and the first nav link — the brand visibly touching
   "Home" at 1280+. The row has 61px of slack; space-between now shares it
   between both gaps instead of dumping it all on one side. */
.nav-actions{display:flex;align-items:center;gap:10px}
.nav .navcta{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--navy-2);font-weight:700;padding:10px 18px;border-radius:999px;font-size:.92rem;white-space:nowrap}
.nav .navcta:hover{background:var(--gold-soft)}
.nav .callbtn.outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.nav .callbtn.outline:hover{border-color:#fff;background:rgba(255,255,255,.06)}
/* below 860 the sticky mobile bar carries Check availability, so drop it here */
@media(max-width:860px){.nav .navcta{display:none}.nav .callbtn.outline{background:var(--gold);color:var(--navy-2);border-color:transparent}}

.navtoggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;font-family:inherit;font-size:.88rem;font-weight:600;padding:9px 14px;border-radius:999px;cursor:pointer}
.navtoggle:hover{background:rgba(255,255,255,.14)}
.navtoggle svg{display:block}
.navpanel{display:none;background:var(--navy-2);border-top:1px solid var(--line-dark)}
.navpanel.open{display:block}
.navpanel a{display:block;color:#d3dee0;font-size:1rem;font-weight:500;padding:15px 0;border-bottom:1px solid var(--line-dark)}
.navpanel a:last-child{border-bottom:none}
.navpanel a:hover{color:var(--gold)}
.navpanel a[aria-current="page"]{color:var(--gold)}

/* --- NAV MODE SWITCH — single source of truth, declared LAST -------------
   Exactly one nav mode renders at any viewport width:
     <= 1279px   inline links hidden, Menu chip shown
     >= 1280px   inline links shown, Menu chip hidden
   The boundary is 1279/1280: no overlap band, no gap band.

   THESE RULES MUST STAY BELOW THE .navlinks AND .navtoggle BASE RULES.
   A media query contributes NO specificity, so `.navtoggle{display:none}`
   inside one ties exactly with the plain `.navtoggle{display:inline-flex}`
   base rule (both are a single class, 0-1-0) and the cascade falls back to
   source order. That is precisely what broke this header: the base rule sat
   further down the file than its media query and therefore won at every
   width, so the Menu chip rendered alongside the inline links from 1025px
   up. .navlinks escaped the same bug only because its base rule happened to
   sit ABOVE its query. Declaring the switch last makes the order correct by
   construction rather than by luck.

   Collapse point is 1280, not 1024: five nav items plus the full wordmark,
   the gold CTA and the phone pill do not fit on one line below that. When a
   6th or 7th nav item lands, raise this number — do not shrink type. */
@media(max-width:1279px){
  .navlinks{display:none}
}
@media(min-width:1280px){
  .navtoggle{display:none}
  /* Separation floor, scoped to the ONLY mode that renders inline links.
     space-between still distributes slack on top of this; the floor just
     guarantees the brand can never touch the first link if a 6th nav item
     or a longer wordmark eats the slack. Deliberately NOT on the base .nav
     rule: at 360px the header has no slack and a gap there pushes the row
     21px wide, giving every page horizontal scroll. */
  .nav{gap:24px}
}
/* The shortened wordmark is the collapsed nav state, so this is ONE band
   covering the entire collapsed range — not a set of per-device bands.
   "Still Waters" below 1280, "Still Waters Retreat House" from 1280 up
   alongside the inline links. It is the same boundary as the nav mode
   switch above, deliberately: brand length and nav mode are one decision.

   This replaced a 861-1279 band that left the full wordmark showing from
   320-860. That arrangement had two cliffs, both measured, both real:

     320-480  brand + Menu chip + icon-only pill filled the inner width
              exactly. Wordmark sat flush against the chip (gap 0) and no
              separation floor could be added without causing scroll.
     481-519  the pill flips from icon-only back to the full number at 481
              (+127px) while the chip is still present. 27px of horizontal
              overflow on all five pages, gap 0, and it did not clear until
              520. This one predated the nav rework.

   Shortening the wordmark is what creates the slack; the gaps are the
   consequence, not separate fixes. Do NOT reintroduce a mid-range band to
   show "Retreat House" on tablets — that is exactly what produced both
   cliffs. If the wordmark must come back below 1280, the phone pill has to
   give up its number first, and that trade needs measuring. */
@media(max-width:1279px){
  .nav .brand .brand-ext{display:none}
}

/* --- compact page hero for interior pages --------------------------------
   The homepage keeps the approved video hero untouched. Interior pages get
   this quieter band so the locked hero stays unique to Home. */
.pagehero{position:relative;overflow:hidden;background:var(--navy-2);color:#fff;padding:64px 0 60px}
.pagehero:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 130% at 82% 8%,rgba(203,168,106,.16),transparent 62%)}
.pagehero .wrap{position:relative;z-index:2}
.pagehero .eyebrow{color:var(--gold-soft);display:block;margin-bottom:14px}
.pagehero h1{font-size:clamp(2.1rem,4.6vw,3.3rem);max-width:20ch}
.pagehero p{color:#cfdcda;font-size:1.08rem;margin-top:18px;max-width:56ch}
.pagehero .hero-cta{margin-top:28px}
.crumb{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#9db1af;margin-bottom:18px}
.crumb a:hover{color:var(--gold)}
.crumb span{opacity:.55;margin:0 8px}

/* --- home: house teaser (trimmed cards linking to /house) ----------------- */
.teaser-more{margin-top:34px;text-align:center}

/* --- retreats: rate slots ------------------------------------------------
   A slot renders EITHER a price or a request-CTA. Which one is undecided
   (public vs gated pricing awaits client intake), so both states are
   supported and the copy is placeholder-marked. */
.rate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rate{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;display:flex;flex-direction:column}
.rate.feat{background:var(--navy-2);border-color:var(--navy-3)}
.rate.feat h3,.rate.feat .price{color:#fff}
.rate.feat p,.rate.feat li{color:#cfdcda}
.rate.feat .rate-list li:before{color:var(--gold-soft)}
.rate h3{font-size:1.3rem;color:var(--navy-2);margin-bottom:6px}
.rate .rate-kicker{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:block}
.rate .price{font-family:'Instrument Serif';font-size:2.1rem;color:var(--navy-2);line-height:1.1;margin:10px 0 4px}
.rate .price small{font-family:'Instrument Sans',sans-serif;font-size:.86rem;color:var(--muted);font-weight:500}
.rate p{color:var(--muted);font-size:.96rem;margin-bottom:16px}
.rate-list{list-style:none;display:grid;gap:9px;margin:6px 0 22px}
.rate-list li{font-size:.94rem;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
/* Gold dot bullet, geometry copied from .dot (5px round, currentColor).
   Replaces a rendered em dash: the content gate covers output, not just
   source, and this marker reached the page. background:currentColor rather
   than a hard-coded gold is what keeps the .rate.feat override on the next
   line working, since that rule recolors the marker via `color`.
   margin-top centers the dot on the first line: line-height 1.6 at .94rem
   gives a 24.06px line box, so (24.06 - 5) / 2 = 9.53px = .63em. */
.rate-list li:before{content:"";color:var(--gold);background:currentColor;width:5px;height:5px;border-radius:50%;margin-top:.63em;flex:none}
.rate .btn{margin-top:auto;justify-content:center}
@media(max-width:900px){.rate-grid{grid-template-columns:1fr}}

/* --- book: two booking paths --------------------------------------------
   Path A is a placeholder container for CE calendar + Stripe wiring. It must
   NOT look like a working calendar — a fake calendar reads as a broken one. */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.path{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:32px;height:100%}
.path .path-tag{font-family:'Space Mono',monospace;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:12px}
.path h2{font-size:1.6rem;color:var(--navy-2);margin-bottom:10px}
.path>p{color:var(--muted);font-size:.98rem;margin-bottom:18px}
.path-note{font-size:.86rem;color:var(--muted);margin-top:16px}
.slot{border:1.5px dashed var(--line);border-radius:14px;background:#fbf9f3;padding:34px 24px;text-align:center;color:var(--muted)}
.slot .slot-title{font-family:'Instrument Serif';font-size:1.2rem;color:var(--navy-2);margin-bottom:8px}
.slot p{font-size:.92rem;max-width:38ch;margin:0 auto}
@media(max-width:900px){.paths{grid-template-columns:1fr}}

/* --- shared: NAP block ---------------------------------------------------- */
.nap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.nap .row{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:var(--ink)}
.nap .row svg{flex:none;margin-top:3px}
.nap .row b{display:block;color:var(--navy-2)}
@media(max-width:760px){.nap{grid-template-columns:1fr;gap:14px}}

/* --- placeholder image disclaimer (Batch 4) ------------------------------
   BUILD-REPORT s2 + s4.1: the client accepted launching with placeholder
   imagery rather than waiting on photography, on condition that every
   AI/placeholder image carries a visible in-progress note so no visitor is
   misled. This is that note.

   APPLIES TO AI/PLACEHOLDER IMAGERY ONLY. The client's real photos — the
   work-1..6 renovation gallery, the family portrait, the hero video and its
   poster, the logo — get NO tag. Tagging her own photographs would undercut
   the "built from your own posts" story and imply the house is less real
   than it is.

   Swap procedure is a content operation, not a markup edit: replace the file,
   flip real:true in images/manifest.json, delete the figcaption line.

   Chip sits TOP-left. The bottom edge is structurally spoken for on these
   cards: .ic hangs over the image at bottom:-23px and the caption sits
   directly under it, so a bottom chip crowds both. The top-left corner is
   free on every card except the featured one, handled below.

   Colour: #eaf1f0 on rgba(36,67,74,.82). The 18% that shows through is the
   photo, so contrast is checked against the worst case, a white image behind
   the chip — that composites to roughly rgb(75,101,107) and still leaves
   5.4:1, past AA for normal text. --gold-soft was the alternative and only
   makes 3.6:1 against that same worst case, so it is not used here. */
figure.ph{position:absolute;inset:0;margin:0}
figure.ph img{width:100%;height:100%;object-fit:cover;display:block}
/* WRAPS, never clips. The shortened copy fits one line at 390 and up, which
   is the normal case. At 320 the narrowest card leaves less room than the
   longest variant needs, so the chip takes a second line and stays whole —
   nowrap + overflow:hidden would silently cut the disclaimer off on the one
   screen where it most needs reading, and ellipsis is barred by the gate. */
.ph-tag{
  position:absolute;left:12px;top:12px;
  width:fit-content;max-width:calc(100% - 24px);
  display:block;white-space:normal;text-wrap:balance;
  background:rgba(36,67,74,.82);color:#eaf1f0;
  font-family:'Space Mono',monospace;font-size:10px;line-height:1.35;
  letter-spacing:.01em;padding:5px 10px;border-radius:8px;
  backdrop-filter:blur(2px);
}
/* The featured card's "heart of the house" ribbon owns the top-right corner
   and stays. Chip and ribbon would share the top line, so on that card only
   the chip drops beneath the ribbon. Narrowing its max-width instead would
   force a two-line wrap at every width, and one line is the normal case. */
.svc.feat .ph-tag{top:46px}

/* --- draft copy marker (awaiting client intake) --------------------------
   Visible in preview so nobody mistakes draft copy for approved copy.
   Markers stay ON until real copy lands (Batch 5 + intake); internal
   previews show them by design.
   NAMED .draft, NOT .ph — Batch 4 reserves figure.ph and .ph-tag for the
   image disclaimer component. A shared name would paint every placeholder
   image with this gold highlight. */
.draft{background:rgba(203,168,106,.16);border-bottom:1px dashed var(--gold);padding:0 3px}

/* --- live availability grid ----------------------------------------------
   Injected into #calendarSlot by app.js only when /api/availability returns
   real weekends. .slot-live drops the dashed placeholder treatment the slot
   carries while online booking is still being connected, so the section stops
   reading as a stub the moment it holds live data. Every value below is an
   existing token: this is the same page, not a widget bolted onto it. */
/* The container ships EMPTY and stays invisible until app.js has real weekends
   to show. No border, no padding, no min-height while empty: a bordered empty
   box above the booking paths would read as something that failed to load,
   which is exactly the impression the fail-silent design exists to avoid.
   .is-live is added only once the grid is populated. */
.avail-slot{display:none}
.avail-slot.is-live{display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px;margin:0 0 30px;box-shadow:var(--shadow)}
@media(max-width:640px){.avail-slot.is-live{padding:20px 16px;margin-bottom:22px}}
.avail-head{margin-bottom:14px}
.avail-head p{font-size:.92rem;color:var(--muted);margin-top:6px}
.avail-month{grid-column:1/-1;font-family:'Space Mono',monospace;font-weight:700;font-size:.7rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:10px 0 2px}
.avail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.avail-cell{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;
  background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:13px 14px;
  font:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s,transform .15s}
.avail-cell:hover{border-color:var(--gold);transform:translateY(-1px)}
.avail-cell:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* Held weekends are not buttons and must not look like one. Muted, no hover,
   no pointer: the only affordance on this grid is a weekend you can have. */
.avail-cell.is-held{background:transparent;cursor:default;opacity:.55}
.avail-cell.is-held:hover{border-color:var(--line);transform:none}
.avail-dates{font-family:'Instrument Serif',Georgia,serif;font-size:1.12rem;line-height:1.15}
.avail-tag{font-size:.72rem;padding:2px 9px;border-radius:20px;background:rgba(99,153,34,.13);color:#3b6d11}
.avail-cell.is-held .avail-tag{background:rgba(95,111,114,.14);color:var(--muted)}
.avail-foot{font-size:.82rem;color:var(--muted);margin-top:14px}
@media(max-width:520px){.avail-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}}