/* Nakoda Gold — shared stylesheet for interior pages.
   Tokens lifted verbatim from the homepage so the two never drift. */
:root{
  --green-900:#0C1F14; --green-800:#12301F; --green-700:#1B4429; --green:#006837;
  --gold:#CBA84A; --gold-soft:#E3C77A; --cream:#F8F4E5; --cream-2:#EFE8D3; --ink:#10241A;
  --pad:clamp(20px,5vw,84px); --rule:rgba(203,168,74,.34);
  --serif:'Playfair Display',Georgia,serif; --sans:'Jost',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-weight:400;font-size:clamp(15px,1.05vw,17px);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
section.blk p a:not(.btn){color:var(--green);text-decoration:underline;
  text-decoration-color:rgba(0,104,55,.35);text-underline-offset:3px}
section.blk p a:not(.btn):hover{text-decoration-color:var(--green)}
.dark section.blk p a:not(.btn),.dark p a:not(.btn){color:var(--gold-soft);
  text-decoration-color:rgba(227,199,122,.45)}
dl.spec dd a:not(.btn){color:var(--green);text-decoration:underline;
  text-decoration-color:rgba(0,104,55,.35);text-underline-offset:3px}
.dark dl.spec dd a:not(.btn){color:var(--gold-soft);text-decoration-color:rgba(227,199,122,.45)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,4.1rem);letter-spacing:-.015em}
h2{font-size:clamp(1.6rem,3.4vw,2.7rem);letter-spacing:-.01em}
h3{font-size:clamp(1.15rem,1.9vw,1.5rem)}
p{margin:0 0 1.05em}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.62;
  font-weight:500;font-family:var(--sans);margin:0}

/* header */
header.hdr{position:sticky;top:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:14px var(--pad);
  background:var(--cream);
  border-bottom:1px solid rgba(16,36,26,.10)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--serif);
  font-size:1.02rem;letter-spacing:.10em;text-transform:uppercase}
.brand img{width:34px;height:auto}
header.hdr nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,26px)}
header.hdr nav a{text-decoration:none;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:500;opacity:.82;white-space:nowrap}
header.hdr nav a:hover:not(.cta){opacity:1;color:var(--green)}
header.hdr nav a.cta{border:1px solid var(--green);border-radius:100px;padding:8px 17px;
  opacity:1;color:var(--green);transition:.3s var(--ease)}
header.hdr nav a.cta:hover{background:var(--green);color:var(--cream)}
@media(max-width:820px){ header.hdr nav a:not(.cta){display:none} }

/* -- Mobile menu ----------------------------------------------------------
   Below 820px the primary links were display:none with NOTHING in their place,
   so a phone visitor could reach the WhatsApp button and nothing else - 27 pages
   unreachable on the device most local searches come from.
   The panel sits ABOVE the header (z 120, vs 60 on inner pages and 100 on the
   homepage) so it behaves identically everywhere. Because it covers the header
   it carries its OWN brand and close button - relying on the header showing
   through left inner pages with no way out of the menu. */
.menu-btn{display:none;position:relative;width:42px;height:42px;
  border:1px solid rgba(16,36,26,.22);border-radius:100px;background:transparent;
  cursor:pointer;padding:0;flex:none;color:inherit}
/* currentColor, not a hardcoded ink: the homepage header flips to .dark over the
   green bands, and dark bars on a dark bar made the button invisible. */
.menu-btn span{position:absolute;left:12px;width:18px;height:1.5px;background:currentColor;
  transition:opacity .2s var(--ease)}
.menu-btn span:nth-child(1){top:17px}
.menu-btn span:nth-child(2){top:23px}
@supports(color:color-mix(in srgb,red,blue)){
  .menu-btn{border-color:color-mix(in srgb,currentColor 26%,transparent)}
}
@media(max-width:820px){
  .menu-btn{display:block}
  /* WhatsApp already floats bottom-right; a second copy in the header is
     redundant while navigation is missing. The menu takes its place, and
     the panel carries a WhatsApp CTA of its own. */
  header nav a.cta{display:none}
  header.hdr nav a.cta{display:none}
}

.mnav{position:fixed;inset:0;z-index:120;background:var(--cream);
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:clamp(70px,14vh,120px) var(--pad) var(--pad);
  opacity:0;visibility:hidden;transition:opacity .34s var(--ease),visibility .34s}
.mnav[data-open="true"]{opacity:1;visibility:visible}

/* top bar of the panel: brand on the left, close on the right, sitting where
   the real header was so the eye does not have to move to find the way out */
.mnav .m-top{position:absolute;top:0;left:0;right:0;height:64px;display:flex;
  align-items:center;justify-content:space-between;padding:0 var(--pad)}
.mnav .m-brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  opacity:0;transition:opacity .3s var(--ease) .08s}
.mnav[data-open="true"] .m-brand{opacity:1}
.mnav .m-brand img{width:auto;height:26px;object-fit:contain}
.mnav .m-brand span{font-family:var(--serif);font-size:16px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:500;color:var(--ink)}
.mnav-close{position:relative;width:42px;height:42px;flex:none;padding:0;cursor:pointer;
  border:1px solid rgba(16,36,26,.22);border-radius:100px;background:transparent;color:var(--ink);
  opacity:0;transform:scale(.92);
  transition:opacity .3s var(--ease) .08s,transform .3s var(--ease) .08s}
.mnav[data-open="true"] .mnav-close{opacity:1;transform:none}
.mnav-close span{position:absolute;left:10px;top:20px;width:20px;height:1.5px;background:currentColor}
.mnav-close span:nth-child(1){transform:rotate(45deg)}
.mnav-close span:nth-child(2){transform:rotate(-45deg)}

/* direct-child links only, so the brand link in .m-top keeps header styling */
.mnav>a{font-family:var(--serif);font-size:clamp(1.6rem,7.5vw,2.3rem);line-height:1.25;
  text-decoration:none;color:var(--ink);padding:9px 0;opacity:0;transform:translateY(12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s}
.mnav[data-open="true"]>a{opacity:1;transform:none}
.mnav[data-open="true"]>a:nth-of-type(1){transition-delay:.06s}
.mnav[data-open="true"]>a:nth-of-type(2){transition-delay:.10s}
.mnav[data-open="true"]>a:nth-of-type(3){transition-delay:.14s}
.mnav[data-open="true"]>a:nth-of-type(4){transition-delay:.18s}
.mnav[data-open="true"]>a:nth-of-type(5){transition-delay:.22s}
.mnav[data-open="true"]>a:nth-of-type(6){transition-delay:.26s}
.mnav>a:active{color:var(--green)}
.mnav .m-cta{margin-top:22px;font-family:var(--sans);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;border:1px solid var(--green);color:var(--green);
  border-radius:100px;padding:15px 26px;text-align:center;align-self:flex-start}
.mnav .m-foot{margin-top:auto;font-family:var(--sans);font-size:12.5px;opacity:.7;
  line-height:1.7}
body.menu-open{overflow:hidden}

/* breadcrumb */
.crumbs{padding:16px var(--pad) 0;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--green)}

/* hero */
.phero{padding:clamp(34px,6vw,72px) 0 clamp(26px,4vw,48px)}
.phero .lede{font-size:clamp(1.02rem,1.55vw,1.3rem);max-width:62ch;margin-top:20px;opacity:.88}
.phero h1{margin-top:6px;text-wrap:balance}
.phero .lede{text-wrap:pretty}

/* generic blocks */
section.blk{padding:clamp(34px,5.5vw,72px) 0;border-top:1px solid rgba(16,36,26,.10)}
.grid2{display:grid;gap:clamp(22px,3.4vw,52px);grid-template-columns:1fr}
@media(min-width:860px){.grid2{grid-template-columns:1fr 1fr;align-items:center}}
.cards{display:grid;gap:clamp(16px,2.2vw,26px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{border:1px solid rgba(16,36,26,.14);padding:clamp(20px,2.4vw,30px);background:#fff}
/* On the dark band a white card inherits .dark's cream text and vanishes.
   Invert the treatment rather than patching the colour. */
.dark .card{background:transparent;border-color:rgba(203,168,74,.30);color:var(--cream)}
.dark .card h3{color:var(--gold-soft)}
.dark .card p{color:var(--cream);opacity:.84}
.dark .card a{color:var(--gold-soft)}
.card h3{margin-bottom:9px}
.card h3 a{text-decoration:none;color:var(--green)}
.card h3 a:hover{color:var(--ink)}
.card p{margin:0;font-size:.95em;opacity:.85}
figure{margin:0}
figure img{border-radius:2px}
figcaption{font-size:12px;opacity:.62;margin-top:9px;letter-spacing:.02em}

/* dark band */
.dark{background:var(--green-900);color:var(--cream)}
.dark h2,.dark h3{color:var(--cream)}
.dark .eyebrow{color:var(--gold);opacity:.9}
.dark a{color:var(--gold-soft)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--green);
  color:var(--green);text-decoration:none;padding:13px 26px;border-radius:100px;
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  transition:.3s var(--ease)}
.btn:hover{background:var(--green);color:var(--cream)}
.dark .btn{border-color:var(--gold);color:var(--gold)}
.dark .btn:hover{background:var(--gold);color:var(--green-900)}

/* faq */
.faq{border-top:1px solid rgba(16,36,26,.14)}
/* The padding used to sit on <details>, which put an 18px dead band above and
   below the only tappable thing here - the summary itself was a 28px strip.
   On the summary instead, the whole 64px row toggles the answer. */
.faq details{border-bottom:1px solid rgba(16,36,26,.14)}
.faq summary{padding:18px 0}
.faq details[open] summary{padding-bottom:10px}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.24rem);
  list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--sans);opacity:.5;flex:none}
.faq details[open] summary::after{content:'–'}
.faq details p{margin:0 0 18px;opacity:.88;max-width:74ch}

/* spec list */
dl.spec{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0;font-size:.95em}
/* Two columns leave the description about 220px wide on a phone, so a one-line
   answer wrapped to four. Stack it: label above, answer at full width. */
@media(max-width:620px){
  dl.spec{grid-template-columns:1fr;gap:0}
  dl.spec dt{padding-top:18px;margin-bottom:5px}
  dl.spec dt:first-of-type{padding-top:0}
}
dl.spec dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;
  padding-top:4px;font-weight:500}
dl.spec dd{margin:0}

/* footer ─────────────────────────────────────────────────────────
   Two zones, not an auto-fit grid. The address block is text-heavy and
   was demanding its own row in auto-fit, orphaning it beside three empty
   columns. Explicit columns fix the ratio instead of hoping it wraps well. */
/* .wrap lives in the global layout rules, but the homepage has its own inline
   <style> and only receives THIS block — without a scoped copy the footer loses
   its max-width and padding and sits flush against the left edge. */
footer.ft .wrap{max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
footer.ft{background:var(--green-900);color:var(--cream);
  padding:clamp(52px,7vw,96px) 0 clamp(26px,3vw,38px);
  border-top:1px solid rgba(203,168,74,.28)}
footer.ft a{color:var(--cream);text-decoration:none;
  transition:color .25s var(--ease),opacity .25s var(--ease)}
footer.ft a:hover{color:var(--gold-soft)}

.ft-top{display:grid;gap:clamp(38px,5vw,72px);grid-template-columns:1fr}
@media(min-width:900px){ .ft-top{grid-template-columns:minmax(280px,1.05fr) 2fr;gap:clamp(44px,5vw,88px)} }

/* brand / NAP block */
.ft-mark{display:inline-flex;align-items:center;gap:11px;font-family:var(--serif);
  font-size:1.06rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:20px}
.ft-mark img{width:42px;height:auto;opacity:.95}
.ft-addr{font-style:normal;font-size:.94em;line-height:1.72;opacity:.8;
  max-width:34ch;margin:0 0 16px}
.ft-line{margin:0 0 14px;font-size:.94em}
.ft-line a{border-bottom:1px solid rgba(203,168,74,.4);padding-bottom:1px}
.ft-hours{opacity:.8;line-height:1.6}
.ft-hours span{opacity:.62}
.ft-social{display:flex;flex-wrap:wrap;gap:8px 18px;margin:20px 0 0;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.ft-social a{opacity:.78}
.ft-social a:hover{opacity:1}

/* link columns */
.ft-cols{display:grid;gap:clamp(26px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.ft-col .ft-h,.ft-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-family:var(--sans);font-weight:500;color:var(--gold);margin:0 0 15px}
.ft-col ul{list-style:none;margin:0;padding:0}
.ft-col li{margin-bottom:9px;font-size:.93em;line-height:1.45}
.ft-col a{opacity:.8}
.ft-col a:hover{opacity:1}

/* base bar */
.ft-base{margin-top:clamp(42px,5vw,70px);padding-top:22px;
  border-top:1px solid rgba(248,244,229,.14);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  align-items:center;font-size:12px;opacity:.66}
.ft-legal{display:flex;gap:20px}
.ft-legal a{opacity:.9}

/* sticky CTA */
.wafloat{position:fixed;right:16px;bottom:16px;z-index:80;display:inline-flex;align-items:center;
  gap:9px;background:#25D366;color:#08301b;text-decoration:none;padding:12px 19px;border-radius:100px;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.26);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.wafloat:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.32)}
.wafloat svg{flex:none}
@media(min-width:860px){.wafloat{right:24px;bottom:24px}}
/* Collapse to the icon on phones, matching the homepage's 560px breakpoint.
   At 400px this stayed a full-width pill on a 440px screen (iPhone Pro Max) and
   sat on top of the footer's social row - "Maps" was completely covered. */
@media(max-width:560px){.wafloat span{display:none}.wafloat{padding:14px}}
/* and reserve the space it occupies so the last footer row is never underneath it */
@media(max-width:820px){footer.ft{padding-bottom:clamp(76px,14vw,96px)}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}}

/* ── Mobile ergonomics ────────────────────────────────────────────────────
   Footer and breadcrumb links rendered 17–20px tall, under the 24px WCAG 2.5.8
   minimum and well under a comfortable thumb target. Padding rather than
   font-size keeps the typography as designed; the list rhythm is pulled in to
   compensate so the footer does not grow taller. */
[id]{scroll-margin-top:88px}
.crumbs a{display:inline-block;padding:6px 0}
@media(max-width:820px){
  .ft-social{gap:0 18px}
  .ft-social a{display:inline-block;padding:12px 0}
  .ft-col li{margin-bottom:0}
  .ft-col a{display:inline-block;padding:10px 0}
  .ft-col .ft-h{margin-bottom:8px}
  .ft-legal a{display:inline-block;padding:11px 0}
  .ft-base{gap:4px 28px}
}