/* UA HEADING METRICS FOR THE H-4 LOWERED HEADINGS, hanks build 1, 2026-09-06.
   A lowered heading changes TAG, and the browser's own heading rules are keyed on the tag. These
   restore the original tag's UA font-size and margin at specificity zero, ahead of everything, so
   any author rule still wins. Chromium's measured values. */
:where(:is(h1,h2,h3,h4,h5,h6).was-h3){font-size:1.17em;margin-block-start:1em;margin-block-end:1em}
:where(:is(h1,h2,h3,h4,h5,h6).was-h4){font-size:1em;margin-block-start:1.33em;margin-block-end:1.33em}

/* Hank's — design tokens (rugged dark / steel blue / ember warm)
   Accent: HNK steel blue #2f6097 (from pos config) + ember amber energy secondary.
   Dark industrial ground. Bold uppercase display. Confident and local.
   doc-metadata (BgAI-SKL-018):
     created: 2026-07-18 · created_by: frontend-developer (FD) */

@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('https://media.beargrassai.com/hanks/fonts/archivo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('https://media.beargrassai.com/hanks/fonts/archivo-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('https://media.beargrassai.com/hanks/fonts/archivo-800.woff2') format('woff2');
}

:root {
  /* --- accents: HNK steel blue (primary) + ember amber (secondary energy) --- */
  --blue:       #2f6097;   /* HNK steel blue — primary CTA / accent */
  --blue-deep:  #234d7e;   /* hover / active depth */
  --blue-bright:#5b9fd6;   /* highlight / links on dark */
  --green:      #d4780a;   /* ember amber — secondary accent (reuses --green slot) */
  --green-deep: #b86200;
  --grad:       linear-gradient(118deg, #2f6097 0%, #d4780a 100%); /* steel-to-ember */

  /* --- dark core (near-black charcoal — industrial, graphic) --- */
  --dark:       #0d1117;
  --dark-alt:   #141921;
  --dark-card:  #1b2230;

  /* --- bright relief --- */
  --light:      #ffffff;
  --light-alt:  #f3f4f6;

  /* --- text --- */
  --ink:        #111318;
  --ink-muted:  #4e5566;
  --ink-light:  #eef0f4;
  --ink-dim:    #8493a8;

  /* --- rules / dividers --- */
  --line-dark:  rgba(255,255,255,.07);
  --line-light: rgba(17,19,24,.10);

  /* --- shadows --- */
  --shadow-sm:  0 6px 20px rgba(0,0,0,.32);
  --shadow-md:  0 20px 50px rgba(0,0,0,.48);
  --shadow-blue:0 16px 40px rgba(47,96,151,.32);

  /* --- radius (tighter than Safire — more angular / industrial) --- */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-pill:999px;

  /* --- max-width --- */
  --max:        1180px;

  /* --- section rhythm --- */
  --hero-min:        clamp(400px, 56vh, 600px);
  --hero-min-home:   clamp(560px, 82vh, 860px);
  --hero-pad-y:      clamp(3rem, 7vw, 5.5rem);
  --section-y:       clamp(3.5rem, 8vw, 6.5rem);

  /* --- typography --- */
  --font-head: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* booking widget aliases (schema 2026-08-21) */
  --bkm-surface: var(--dark-alt);
  --bkm-elevated: var(--dark-card);
  --bkm-ink: var(--ink-light);
  --bkm-ink-muted: var(--ink-dim);
  --bkm-accent: var(--blue);
  --bkm-accent-ink: #ffffff;
  --bkm-accent-soft: rgba(91, 159, 214, 0.18);
  --bkm-line: var(--line-dark);
  --bkm-font-display: var(--font-head);
  --bkm-font-body: var(--font-body);
  --bkm-radius: var(--radius);
  --bkm-radius-pill: var(--radius-pill);
  --bkm-scrim: rgba(4, 7, 12, 0.7);
  --bkm-danger: #e8896b;

  /* --- motion --- */
  --ease:       cubic-bezier(.2,.7,.2,1);
  --reveal-t:   .8s;
}

/* Hank's — site styles (adapted from Safire Wellness / City Cave structure)
   Dark industrial: confident bold-caps, rugged feel, steel blue + ember accent.
   doc-metadata (BgAI-SKL-018): created: 2026-07-18 · created_by: frontend-developer (FD) */

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--dark);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-deep); text-decoration: none; }
a:hover { color: var(--blue); }

/* DISPLAY CONFIDENCE: bold uppercase, tight-set headlines */
h1:where(:not([class*="was-h"])), h2:where(:not([class*="was-h"])), h3:where(:not([class*="was-h"])), h4:where(:not([class*="was-h"])) , :is(h1,h2,h3,h4,h5,h6):where(.was-h3), :is(h1,h2,h3,h4,h5,h6):where(.was-h4) {
  font-family: var(--font-head);
  line-height: 1.04;
  margin: 0 0 .6em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
}
h1:where(:not([class*="was-h"])) { font-size: clamp(2.8rem, 7vw, 5.4rem); }
h2:where(:not([class*="was-h"])) { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3:where(:not([class*="was-h"])) ,
:is(h1,h2,h3,h4,h5,h6):where(.was-h3) { font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; }
p { margin: 0 0 1rem; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 2.5rem); }
.section { padding: var(--section-y) 0; }

/* dark section */
.section--dark { background: var(--dark); color: var(--ink-light); }
.section--dark h1:where(:not([class*="was-h"])), .section--dark h2:where(:not([class*="was-h"])), .section--dark h3:where(:not([class*="was-h"])) , .section--dark :is(h1,h2,h3,h4,h5,h6):where(.was-h3) { color: var(--ink-light); }
.section--dark p, .section--dark li { color: var(--ink-dim); }
.section--dark a:not(.btn) { color: var(--blue-bright); }

/* dark-alt section */
.section--dark-alt { background: var(--dark-alt); color: var(--ink-light); }
.section--dark-alt h2:where(:not([class*="was-h"])), .section--dark-alt h3:where(:not([class*="was-h"])) , .section--dark-alt :is(h1,h2,h3,h4,h5,h6):where(.was-h3) { color: var(--ink-light); }
.section--dark-alt p { color: var(--ink-dim); }
.section--dark-alt a:not(.btn) { color: var(--blue-bright); }

/* light section (the bright relief) */
.section--light { background: var(--light); color: var(--ink); }
.section--light h1:where(:not([class*="was-h"])), .section--light h2:where(:not([class*="was-h"])), .section--light h3:where(:not([class*="was-h"])) , .section--light :is(h1,h2,h3,h4,h5,h6):where(.was-h3) { color: var(--ink); }
.section--light p { color: var(--ink-muted); }

/* light-alt section */
.section--light-alt {
  background: var(--light-alt);
  color: var(--ink);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}
.section--light-alt h2:where(:not([class*="was-h"])), .section--light-alt h3:where(:not([class*="was-h"])) , .section--light-alt :is(h1,h2,h3,h4,h5,h6):where(.was-h3) { color: var(--ink); }
.section--light-alt p { color: var(--ink-muted); }

/* ============================================================
   ANNOUNCEMENT BAR (Kalispell)
   ============================================================ */
.announce-bar {
  background: var(--grad); color: #fff;
  text-align: center; font-family: var(--font-head); font-weight: 700;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .55rem 1.25rem;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10,16,23,.82);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--line-dark);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem clamp(1.25rem, 5vw, 2.5rem);
  max-width: var(--max); margin: 0 auto;
}
.brand {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 800; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink-light);
}
.brand img { height: 34px; width: auto; }
.brand-mark { height: 34px; width: 34px; flex: none; display: block; }
.footer-brand { display: flex; align-items: center; gap: .5rem; }
.footer-brand .brand-mark { height: 26px; width: 26px; }
.nav { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; align-items: center; }
.nav a:not(.btn) {
  color: var(--ink-dim); font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .3rem 0; border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav a:not(.btn):hover, .nav a:not(.btn).active, .nav a:not(.btn)[aria-current="page"] { color: var(--ink-light); border-color: var(--blue); }
.nav__cta { margin-left: .4rem; padding: .62rem 1.4rem; font-size: .8rem; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: .65rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: #fff;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 760px) {
  .site-header__bar { flex-wrap: wrap; }
  .nav-toggle { display: flex; }
  .nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: .35rem 0 .75rem;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) {
    font-size: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .nav a:not(.btn).active, .nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--blue); }
  .nav__cta {
    margin: .65rem 0 0;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ============================================================
   BUTTONS (confident blue pills)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .95rem 2.1rem; border-radius: var(--radius-pill);
  font-family: var(--font-head); font-weight: 700; font-size: .88rem;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1;
  cursor: pointer; border: 2px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
  text-decoration: none;
}
.btn--primary {
  background: var(--blue); color: #fff; border-color: var(--blue);
  box-shadow: var(--shadow-blue);
}
.btn--primary:hover {
  background: var(--blue-deep); border-color: var(--blue-deep); color: #fff;
  transform: translateY(-2px);
}
.btn--grad {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: var(--shadow-blue);
}
.btn--grad:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; }
.btn--ghost {
  background: rgba(255,255,255,.04); color: var(--ink-light);
  border-color: rgba(255,255,255,.4);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.12); border-color: #fff; color: #fff; transform: translateY(-2px);
}
.btn--light { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--light:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); }

/* ============================================================
   PAGE HERO (rotating images + Ken Burns zoom)
   ============================================================ */
.page-hero {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: var(--hero-min); background: var(--dark);
}
.page-hero--home { min-height: var(--hero-min-home); align-items: center; }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
/* each slide stacked; crossfade via .is-active */
.page-hero__media img,
.hero-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s var(--ease);
  will-change: opacity, transform;
}
.page-hero__media img:first-child, .hero-slide.is-active { opacity: 1; }
/* Single art-directed hero: <picture><source><img> means the img is NOT :first-child
   (the <source> precedes it), so force it visible. Hank's heroes are single, not slideshows. */
.page-hero__media img { opacity: 1; }
.hero-slide.is-active { animation: kenburns 9s var(--ease) both; }
@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.14); }
}
.page-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(92deg, rgba(10,16,23,.94) 0%, rgba(10,16,23,.76) 52%, rgba(10,16,23,.46) 100%),
    linear-gradient(0deg, rgba(10,16,23,.55) 0%, rgba(10,16,23,0) 45%);
}
.page-hero__inner {
  position: relative; z-index: 2; padding: var(--hero-pad-y) 0;
  color: var(--ink-light); max-width: var(--max); margin: 0 auto; width: 100%;
  padding-left: clamp(1.25rem, 5vw, 2.5rem); padding-right: clamp(1.25rem, 5vw, 2.5rem);
}
.page-hero h1:where(:not([class*="was-h"])) { color: #fff; max-width: 16ch; margin-bottom: .7rem; }
.page-hero--home h1:where(:not([class*="was-h"])) { max-width: 18ch; }
.page-hero .hero-sub {
  font-family: var(--font-body); font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  color: var(--ink-light); opacity: .92; max-width: 46ch; margin-bottom: 2.2rem; line-height: 1.5;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.eyebrow--hero { color: var(--blue-bright); }

@media (max-width: 720px) {
  .page-hero__scrim {
    background: linear-gradient(180deg, rgba(10,16,23,.35) 0%, rgba(10,16,23,.85) 72%);
  }
}

/* ============================================================
   CTA BAND (accent gradient — a bright energetic beat)
   ============================================================ */
.cta-band { padding: clamp(2.25rem,5vw,3.25rem) 0; background: var(--grad); }
.cta-band__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.cta-band__text h2:where(:not([class*="was-h"])) { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0; }
.cta-band__text p { color: rgba(255,255,255,.9); margin: .4rem 0 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.cta-band .btn--primary { background: #fff; color: var(--blue-deep); border-color: #fff; box-shadow: 0 10px 30px rgba(4,10,20,.25); }
.cta-band .btn--primary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.cta-band .btn--ghost { border-color: rgba(255,255,255,.7); color: #fff; }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.15); border-color: #fff; }

/* ============================================================
   INTRO LEDE (bright relief section)
   ============================================================ */
.intro-lede__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.intro-lede__text p { max-width: 52ch; }
.intro-lede__text p + p { margin-top: .5rem; }
.intro-lede__text .btn { margin-top: 1.5rem; }
.intro-lede__media {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
}
.intro-lede__media img {
  width: 100%; height: 420px; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.intro-lede__media:hover img { transform: scale(1.07); }

@media (max-width: 800px) {
  .intro-lede__inner { grid-template-columns: 1fr; }
  .intro-lede__media { order: -1; }
  .intro-lede__media img { height: 280px; }
}

/* ============================================================
   SERVICE CARD GRID (image zoom on hover)
   ============================================================ */
.card-grid__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.card-grid__head p { max-width: 56ch; margin: 0 auto; }
.card-grid__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.service-card {
  background: var(--dark-card); border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(79,182,255,.4); }
.service-card__imgwrap { overflow: hidden; }
.service-card__img { width: 100%; height: 230px; object-fit: cover; transition: transform .8s var(--ease); }
.service-card:hover .service-card__img { transform: scale(1.09); }
.service-card__body { padding: 1.5rem 1.6rem 1.8rem; }
.service-card__body h3:where(:not([class*="was-h"])) ,
.service-card__body :is(h1,h2,h3,h4,h5,h6):where(.was-h3) { color: var(--ink-light); margin-bottom: .5rem; }
.service-card__body p { color: var(--ink-dim); font-size: .95rem; margin-bottom: 1.1rem; }
.service-card__link { color: var(--blue-bright); font-family: var(--font-head); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.service-card__link:hover { color: #fff; }

@media (max-width: 900px) { .card-grid__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .card-grid__grid { grid-template-columns: 1fr; } }

/* ============================================================
   AMENITIES (home bright relief)
   ============================================================ */
.amenities__head { text-align: center; max-width: 60ch; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.amenities__head p { margin: 0 auto; }
.amenities__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem;
  max-width: 880px; margin: 0 auto;
}
.amenities__grid li {
  background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; font-size: .92rem; color: var(--ink);
  display: flex; align-items: center; gap: .7rem;
  transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.amenities__grid li::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--grad); flex: none;
}
.amenities__grid li:hover { transform: translateY(-3px); border-color: rgba(31,157,240,.5); box-shadow: var(--shadow-sm); }
@media (max-width: 720px) { .amenities__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .amenities__grid { grid-template-columns: 1fr; } }

/* ============================================================
   BENEFIT LIST (catalog pages)
   ============================================================ */
.benefit-list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.benefit-list li {
  position: relative; padding: .5rem 0 .5rem 1.9rem; color: inherit;
  border-bottom: 1px solid var(--line-light);
}
.benefit-list li::before {
  content: ""; position: absolute; left: 0; top: .95rem;
  width: 12px; height: 12px; border-radius: 50%; background: var(--grad);
}
.section--dark .benefit-list li { border-color: var(--line-dark); }

/* ============================================================
   SERVICE DETAIL (services page — image zoom on hover)
   ============================================================ */
.service-detail__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
/* service-detail rows keep symmetric section padding so each alternating band is evenly spaced */
.service-detail--flip .service-detail__media { order: 2; }
.service-detail--flip .service-detail__text { order: 1; }
.service-detail__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.service-detail__media img { width: 100%; height: 440px; object-fit: cover; transition: transform 1.1s var(--ease); }
.service-detail__media:hover img { transform: scale(1.07); }
.service-detail__text .btn { margin-top: 1.25rem; }

@media (max-width: 800px) {
  .service-detail__inner { grid-template-columns: 1fr; }
  .service-detail--flip .service-detail__media { order: 0; }
  .service-detail--flip .service-detail__text { order: 0; }
  .service-detail__media img { height: 300px; }
}

/* ============================================================
   VALUES LIST (about)
   ============================================================ */
.values-list__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.values-list__head p { max-width: 56ch; }
.values-list__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.value-item {
  background: var(--dark-card); border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg); padding: 2.1rem 2.35rem;
  transition: transform .25s var(--ease), border-color .25s;
}
.value-item:hover { transform: translateY(-4px); border-color: rgba(79,182,255,.4); }
.value-item__num {
  font-family: var(--font-head); font-size: 2rem; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: .5rem;
}
.value-item h3:where(:not([class*="was-h"])) ,
.value-item :is(h1,h2,h3,h4,h5,h6):where(.was-h3) { color: var(--ink-light); font-size: 1.4rem; margin-bottom: .5rem; }
.value-item p { color: var(--ink-dim); margin: 0; }
@media (max-width: 700px) { .values-list__grid { grid-template-columns: 1fr; } }

/* ============================================================
   ABOUT TEXT
   ============================================================ */
.about-text__inner { max-width: 68ch; }
.about-text p { font-size: 1.08rem; line-height: 1.7; }

/* ============================================================
   CONTACT / BOOKING
   ============================================================ */
.booking-cta { text-align: center; }
.booking-cta p { max-width: 52ch; margin: 0 auto 1.5rem; }
.booking-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.contact-info__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.contact-info h3:where(:not([class*="was-h"])) ,
.contact-info :is(h1,h2,h3,h4,h5,h6):where(.was-h3) { color: var(--ink-light); font-size: .95rem; margin-bottom: .25rem; }
.contact-info p, .contact-info address { color: var(--ink-dim); font-style: normal; }
.contact-info a { color: var(--blue-bright); }
.contact-block { margin-bottom: 1.75rem; }
@media (max-width: 720px) { .contact-info__inner { grid-template-columns: 1fr; } }

/* ============================================================
   LEGAL TEXT
   ============================================================ */
.legal-text { background: var(--light); }
.legal-text__inner { max-width: 72ch; }
.legal-text h1:where(:not([class*="was-h"])), .legal-text h2:where(:not([class*="was-h"])), .legal-text h3:where(:not([class*="was-h"])) , .legal-text :is(h1,h2,h3,h4,h5,h6):where(.was-h3) { color: var(--ink); }
.legal-text p { color: var(--ink-muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #060b11; border-top: 1px solid var(--line-dark);
  padding: 3.5rem 0 2rem; color: var(--ink-dim);
}
.site-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.footer-brand { font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-light); margin-bottom: .6rem; }
.footer-brand p { color: var(--ink-dim); font-size: .9rem; margin-top: .4rem; }
.footer-col h4:where(:not([class*="was-h"])) ,
.footer-col :is(h1,h2,h3,h4,h5,h6):where(.was-h4) { color: var(--ink-light); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .75rem; }
.footer-col a { display: block; color: var(--ink-dim); font-size: .9rem; padding: .2rem 0; transition: color .18s; }
.footer-col a:hover { color: var(--blue-bright); }
.footer-bottom {
  border-top: 1px solid var(--line-dark); margin-top: 2.5rem; padding-top: 1.25rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; font-size: .85rem;
}
.footer-bottom a { color: var(--ink-dim); }
.footer-bottom a:hover { color: var(--blue-bright); }
@media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer__inner { grid-template-columns: 1fr; } }

/* ============================================================
   EYEBROW / UTILITY
   ============================================================ */
.eyebrow {
  font-family: var(--font-head); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--blue); margin: 0 0 .7rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--grad); display: inline-block; }
.section--light .eyebrow, .section--light-alt .eyebrow { color: var(--blue-deep); }
.lede { font-size: 1.15rem; line-height: 1.6; }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }

/* ============================================================
   SCROLL REVEAL (motion) — progressive + reduced-motion safe
   ============================================================ */
.reveal { opacity: 1; transform: none; }
.has-js .reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--reveal-t) var(--ease), transform var(--reveal-t) var(--ease); }
.has-js .reveal.in { opacity: 1; transform: none; }
.has-js .reveal.d1 { transition-delay: .08s; }
.has-js .reveal.d2 { transition-delay: .16s; }
.has-js .reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1 !important; transform: none !important; }
  .hero-slide.is-active { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   SERVICE CARD — PRICING BADGE
   ============================================================ */
.service-card__price {
  display: inline-block; font-size: .8rem; font-weight: 700; font-family: var(--font-head);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--green); margin: 0 0 .65rem; padding: .2rem .6rem;
  background: rgba(212,120,10,.12); border: 1px solid rgba(212,120,10,.22);
  border-radius: var(--radius-sm);
}
.price-badge {
  display: inline-block; font-size: .9rem; font-weight: 700; font-family: var(--font-head);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--green); margin: .75rem 0 0; padding: .3rem .8rem;
  background: rgba(212,120,10,.14); border: 1px solid rgba(212,120,10,.28);
  border-radius: var(--radius-sm);
}

/* ============================================================
   LEGAL TEXT PAGES (privacy / terms)
   ============================================================ */
.legal-text { background: var(--dark); color: var(--ink-light); }
.legal-text__inner { max-width: 72ch; padding: var(--section-y) 0; }
.legal-text h1:where(:not([class*="was-h"])) { color: var(--light); margin-bottom: 1rem; }
.legal-text p { color: var(--ink-dim); line-height: 1.7; }
/* Long-form policy pages (terms / refund / cancellation / privacy / contact):
   headings, lists and emphasis the stub pages never needed. */
.legal-text h2:where(:not([class*="was-h"])) {
  color: var(--light); font-size: 1.35rem; line-height: 1.25;
  margin: 2.25rem 0 .75rem; scroll-margin-top: 5rem;
}
.legal-text h3:where(:not([class*="was-h"])) ,
.legal-text :is(h1,h2,h3,h4,h5,h6):where(.was-h3) {
  color: var(--ink-light); font-size: 1.05rem;
  margin: 1.5rem 0 .5rem; scroll-margin-top: 5rem;
}
.legal-text p + p { margin-top: 1rem; }
.legal-text ul { margin: 1rem 0; padding-left: 1.15rem; list-style: disc; }
.legal-text li { color: var(--ink-dim); line-height: 1.7; margin-bottom: .55rem; }
.legal-text strong { color: var(--ink-light); font-weight: 700; }
.legal-text a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: .18em; }
.legal-text a:hover { color: var(--light); }

/* ============================================================
   PRICING BLOCKS
   ============================================================ */
.price-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; margin-top: 2rem;
}
.price-card {
  background: var(--dark-card); border: 1px solid var(--line-dark);
  border-radius: var(--radius); padding: 1.5rem 1.4rem; display: flex; flex-direction: column;
}
.price-card--soon { opacity: .82; }
.price-card__eyebrow {
  font-family: var(--font-head); font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--blue-bright); margin: 0 0 .5rem;
}
.price-card h3:where(:not([class*="was-h"])) ,
.price-card :is(h1,h2,h3,h4,h5,h6):where(.was-h3) { color: var(--ink-light); font-size: 1.15rem; margin: 0 0 .5rem; }
.price-card__amount { color: var(--green); font-weight: 800; font-size: 1.4rem; font-family: var(--font-head); margin: 0 0 .5rem; }
.price-card p { color: var(--ink-dim); line-height: 1.6; margin: 0 0 .5rem; font-size: .95rem; }
.price-card__note { color: var(--ink-dim); font-size: .82rem; font-style: italic; }
.price-badge--soon {
  display: inline-block; font-family: var(--font-head); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--blue-bright);
  border: 1px solid rgba(91,159,214,.4); border-radius: var(--radius-pill);
  padding: .25rem .8rem; margin-top: .5rem;
}

/* ============================================================
   CONTACT FORM (markulett-mailer, fleet pattern)
   ============================================================ */
.cform { max-width: 640px; margin-top: 1.5rem; }
.cform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .cform .row2 { grid-template-columns: 1fr; } }
.cform .field { display: flex; flex-direction: column; margin-bottom: 1rem; }
.cform label { font-size: .82rem; font-weight: 700; color: var(--ink-light); margin-bottom: .35rem; }
.cform input, .cform textarea {
  background: var(--dark-card); border: 1px solid var(--line-dark); border-radius: var(--radius-sm);
  color: var(--ink-light); padding: .7rem .85rem; font: inherit; font-size: .95rem;
}
.cform input:focus, .cform textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.cform textarea { min-height: 130px; resize: vertical; }
.cform button[type=submit] {
  background: var(--grad); color: #fff; border: 0; border-radius: var(--radius-sm);
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .8rem 1.6rem; cursor: pointer;
}
.cform button[type=submit][disabled] { opacity: .55; cursor: default; }
.cform-status { margin-top: .9rem; font-size: .9rem; color: var(--ink-dim); }
.cform-status.is-ok { color: var(--blue-bright); }
.cform-status.is-err { color: #e8896b; }

/* Marked open items (visible review placeholders, pre-launch). */
.review-marker {
  display: inline-block; color: var(--green); font-style: italic; font-size: .92rem;
}

/* Booking modal chrome lives in @beargrass/booking-widget. Tenant paint is --bkm-* in tokens.css. */

/* ============================================================
   PHOTO BAND (splashy image + text, alternating)
   ============================================================ */
.photo-band__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.photo-band--flip .photo-band__media { order: 2; }
.photo-band__media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 3 / 2; }
.photo-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-band__text h2:where(:not([class*="was-h"])) { margin: .3rem 0 1rem; }
.photo-band__text p { color: var(--ink-dim); line-height: 1.7; }
@media (max-width: 760px) {
  .photo-band__inner { grid-template-columns: 1fr; }
  .photo-band--flip .photo-band__media { order: 0; }
}


/* ══ v1's /assets/css/booking-widget.css, VERBATIM ══════════════════════════════════════
   v1 links two stylesheets and CSS-2 allows one, so the widget sheet is appended rather than
   merged or pruned. Nothing in it paints at rest: every selector is inside `.bkm`, and no
   `.bkm` element exists in either version until a modal is mounted. It is kept whole because
   booking.js will need exactly these rules, and because a rule that stops EXISTING is a change
   to the stylesheet where a rule that stops MATCHING is not. */

/* Shared booking widget. Tokens only. Tenants alias --bkm-* from their paint.
   Do not assign --bkm-* on :root here: this sheet may load after the tenant
   stylesheet, and a later :root assignment would silently win. Defaults live
   in var(--token, fallback) on the rules that use them. */
.bkm {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.bkm[hidden] { display: none; }
.bkm__backdrop {
  position: absolute;
  inset: 0;
  background: var(--bkm-scrim, rgba(16, 13, 9, 0.72));
}
.bkm__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow: auto;
  background: var(--bkm-surface, #1f1a14);
  border: 1px solid var(--bkm-line, #3a3127);
  border-radius: var(--bkm-radius, 8px);
  color: var(--bkm-ink, #f3eadb);
}
.bkm__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 1.1rem 1.3rem 0.6rem;
}
.bkm__step {
  font-family: var(--bkm-font-body, inherit);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bkm-accent, #d9a441);
  margin: 0;
  flex: 1;
}
.bkm__close {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--bkm-ink, #f3eadb);
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.45rem;
}
.bkm__close:hover { color: var(--bkm-accent, #d9a441); }
.bkm__title {
  font-size: 1.45rem;
  margin: 0;
  flex: 0 0 100%;
  font-family: var(--bkm-font-display, inherit);
}
.bkm__body { padding: 0.4rem 1.3rem 1.4rem; }
.bkm__lead {
  color: var(--bkm-ink-muted, #cfc1a6);
  line-height: 1.55;
  margin: 0.3rem 0 0.75rem;
}
.bkm__note {
  color: var(--bkm-ink-muted, #cfc1a6);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 1rem 0;
}
.bkm__note--tight { margin: 0 0 1rem; font-size: 0.86rem; }
.bkm__hint {
  color: var(--bkm-accent, #d9a441);
  font-size: 0.88rem;
  margin: 0.55rem 0 0.2rem;
}
.bkm__err {
  color: var(--bkm-danger, #e8896b);
  font-size: 0.88rem;
  margin: 0.6rem 0 0;
}
.bkm__choices { display: grid; gap: 0.6rem; }
.bkm__choice {
  text-align: left;
  background: var(--bkm-elevated, #2a2319);
  border: 1px solid var(--bkm-line, #3a3127);
  border-radius: var(--bkm-radius, 6px);
  padding: 0.9rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--bkm-ink, #f3eadb);
  font: inherit;
}
.bkm__choice:hover:not([disabled]) { border-color: var(--bkm-accent, #d9a441); }
.bkm__choice[disabled] { opacity: 0.5; cursor: default; }
.bkm__choice-name {
  font-weight: 700;
  font-family: var(--bkm-font-display, inherit);
}
.bkm__choice-sub {
  color: var(--bkm-ink-muted, #cfc1a6);
  font-size: 0.85rem;
}
.bkm__soon {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bkm-accent, #d9a441);
  border: 1px solid var(--bkm-accent, #d9a441);
  border-radius: var(--bkm-radius-pill, 999px);
  padding: 0.1rem 0.5rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.bkm__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
@media (max-width: 480px) {
  .bkm__grid { grid-template-columns: 1fr; }
}
.bkm__field { display: flex; flex-direction: column; min-width: 0; }
.bkm__field label,
.bkm__field .bkm__label {
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--bkm-ink, #f3eadb);
}
.bkm__field input,
.bkm__field select {
  background: var(--bkm-elevated, #2a2319);
  border: 1px solid var(--bkm-line, #3a3127);
  border-radius: var(--bkm-radius, 6px);
  color: var(--bkm-ink, #f3eadb);
  padding: 0.65rem 0.7rem;
  font: inherit;
  font-size: 1rem;
  width: 100%;
  min-height: 44px;
  color-scheme: dark;
  box-sizing: border-box;
}
.bkm__field input:focus,
.bkm__field select:focus {
  outline: 2px solid var(--bkm-accent, #d9a441);
  outline-offset: 1px;
}
.bkm__date-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  border-radius: var(--bkm-radius, 6px);
  border: 1px solid var(--bkm-line, #3a3127);
  background: var(--bkm-elevated, #2a2319);
  color: var(--bkm-ink, #f3eadb);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.bkm__date-btn.is-empty .bkm__date-text {
  color: var(--bkm-ink-muted, #cfc1a6);
  font-weight: 500;
}
.bkm__date-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bkm__cal-icon {
  flex-shrink: 0;
  color: var(--bkm-ink, #f3eadb);
  display: block;
}
.bkm__field--date,
.bkm__field--wide { grid-column: 1 / -1; }
.bkm__cal {
  margin-top: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--bkm-line, #3a3127);
  border-radius: var(--bkm-radius, 6px);
  background: var(--bkm-elevated, #2a2319);
}
.bkm__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.bkm__cal-title {
  font-weight: 700;
  font-family: var(--bkm-font-display, inherit);
  font-size: 0.95rem;
}
.bkm__cal-nav {
  width: 40px;
  height: 40px;
  border: 1px solid var(--bkm-line, #3a3127);
  border-radius: 3px;
  background: transparent;
  color: var(--bkm-ink, #f3eadb);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.bkm__cal-dow,
.bkm__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  text-align: center;
}
.bkm__cal-dow {
  margin-bottom: 0.35rem;
  color: var(--bkm-ink-muted, #cfc1a6);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bkm__cal-blank { min-height: 40px; }
.bkm__cal-day {
  min-height: 40px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--bkm-ink, #f3eadb);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bkm__cal-day:hover:not(:disabled) {
  background: var(--bkm-accent-soft, rgba(217, 164, 65, 0.12));
}
.bkm__cal-day.is-on {
  background: var(--bkm-accent, #d9a441);
  color: var(--bkm-accent-ink, #15120e);
}
.bkm__cal-day.is-disabled,
.bkm__cal-day:disabled {
  color: var(--bkm-ink-muted, #cfc1a6);
  cursor: not-allowed;
  text-decoration: line-through;
}
.bkm__cal-note {
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  color: var(--bkm-ink-muted, #cfc1a6);
}
.bkm__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.bkm__chip {
  appearance: none;
  border: 1px solid var(--bkm-line, #3a3127);
  background: var(--bkm-elevated, #2a2319);
  color: var(--bkm-ink, #f3eadb);
  border-radius: var(--bkm-radius-pill, 999px);
  padding: 0.55rem 0.85rem;
  min-height: 44px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.1;
}
.bkm__chip.is-on {
  background: var(--bkm-accent, #d9a441);
  border-color: var(--bkm-accent, #d9a441);
  color: var(--bkm-accent-ink, #15120e);
}
.bkm__chips--nums .bkm__chip {
  min-width: 44px;
  justify-content: center;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}
.bkm__locked {
  margin: 0;
  padding: 0.7rem 0.85rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  background: var(--bkm-elevated, #2a2319);
  border: 1px solid var(--bkm-line, #3a3127);
  border-radius: var(--bkm-radius, 6px);
  color: var(--bkm-ink, #f3eadb);
  font-weight: 600;
}
@media (max-width: 480px) {
  .bkm__dialog { max-height: 100dvh; }
  .bkm__date-text { font-size: 16px; }
  .bkm__chip { font-size: 16px; }
}
.bkm__summary { margin: 0.5rem 0 0; }
.bkm__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bkm-line, #3a3127);
}
.bkm__row dt { color: var(--bkm-ink-muted, #cfc1a6); margin: 0; }
.bkm__row dd { margin: 0; text-align: right; font-weight: 600; }
.bkm__actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.4rem;
}
.bkm__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 44px;
  padding: 0.65rem 1.1rem;
  border-radius: var(--bkm-radius, 6px);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.bkm__btn--primary {
  background: var(--bkm-accent, #d9a441);
  border: 1px solid var(--bkm-accent, #d9a441);
  color: var(--bkm-accent-ink, #15120e);
}
.bkm__btn--ghost {
  background: transparent;
  border: 1px solid var(--bkm-line, #3a3127);
  color: var(--bkm-ink, #f3eadb);
}
.bkm__btn:disabled { opacity: 0.55; cursor: default; }
.bkm__policy {
  margin: 0.9rem 0 0;
  padding: 0.8rem 0.95rem;
  max-height: 11rem;
  overflow-y: auto;
  background: var(--bkm-elevated, #2a2319);
  border: 1px solid var(--bkm-line, #3a3127);
  border-radius: var(--bkm-radius, 6px);
  font-size: 0.86rem;
  color: var(--bkm-ink-muted, #cfc1a6);
  line-height: 1.55;
}
.bkm__policy p { margin: 0 0 0.6rem; }
.bkm__policy p:last-child { margin-bottom: 0; }
.booking-view {
  margin-top: 1.2rem;
  padding: 1.2rem;
  background: var(--bkm-elevated, #2a2319);
  border: 1px solid var(--bkm-line, #3a3127);
  border-radius: var(--bkm-radius, 6px);
  color: var(--bkm-ink-muted, #cfc1a6);
  line-height: 1.6;
}
.booking-view h3 {
  color: var(--bkm-ink, #f3eadb);
  margin: 0 0 0.4rem;
  font-family: var(--bkm-font-display, inherit);
}
/* Beat tenant `.section--light p|h3` so the dark card stays readable. */
.section--light .booking-view,
.section--light .booking-view p,
.section--light .booking-view a {
  color: var(--bkm-ink-muted, #cfc1a6);
}
.section--light .booking-view h3 {
  color: var(--bkm-ink, #f3eadb);
}
.section--light .booking-view a {
  color: var(--bkm-accent, #d9a441);
}


/* ══ ADDITIONS, hanks build 1, 2026-09-06 ════════════════════════════════════════════════════════════════
   Written by mkcss.py. Every rule restores something v1 drew with markup or with script that the closed v2
   vocabulary cannot carry. Nothing here is new design and nothing here is a client preference. */


/* ── THE PHONE MENU. v1's is a <button class="nav-toggle" aria-expanded> driven by a 20-line inline script;
   JS-5 forbids the script, so v2 carries a <details class="nav-drawer"> holding a <summary> with v1's own
   three bars and its own copy of the five links. These four rules are what make its BOXES v1's boxes, and
   each was measured in Chromium before it was written:
     * `display:contents` on BOTH the <details> and its `::details-content` makes the <summary> and the
       drawer <nav> direct flex items of `.site-header__bar`, exactly as v1's <button> and <nav> are. Without
       the second rule the nav is trapped inside the `::details-content` box and never takes v1's own
       `flex-basis:100%` row: measured closed 374x92 / open 374x92 with the nav at 28x54, against v1's open
       374x162 with the nav at 334x54. With it, v1's numbers.
     * a <summary> is `display:list-item` with a marker; `.nav-toggle`'s own `display` (none, then flex under
       760px) removes the list box and these two rules remove the marker in both engines.
   Dismissal on link click, dismissal on Escape, and the burger-to-X transform v1 writes on
   `[aria-expanded="true"]` are a DECLARED CIRCLE against nav.js. */
details.nav-drawer { display: contents }
details.nav-drawer::details-content { display: contents }
summary.nav-toggle { list-style: none }
summary.nav-toggle::-webkit-details-marker { display: none }

/* P-57 "AN ELEMENT THAT CHANGES TAG": the UA rules keyed on <button> do not follow the class onto a
   <summary>, and no author stylesheet mentions them. Measured in Chromium 2026-09-06 with v1's own
   `.nav-toggle` rules applied to both tags: the only computed differences are `text-align` (center against
   start), the `font` shorthand, and `appearance` -- and the three bars land at the IDENTICAL offset
   (10.390625,14, 22x2) on both, because the box is 44x44 by explicit width/height and the gap is 5px.
   So this restores nothing that moves; it is written anyway, at specificity zero, because the next element
   this build converts may not be text-free and the rule is where the measurement lives. */
:where(summary.was-button) { text-align: center; font: 400 13.3333px Arial }

/* THE DRAWER'S COPY OF THE LINKS IS NEVER SHOWN ON THE DESKTOP BAR. v1's `.nav{display:flex}` would paint
   it beside the real one above 760px, so it is switched off at (0,2,0) and switched back on only when the
   <details> is open, inside v1's own breakpoint, at (0,2,1). Below 760 v1's own `.nav{display:none}` already
   hides the desktop copy, and `.nav.is-open` -- the class the deleted script set -- can no longer fire. */
.nav-drawer .nav { display: none }
@media (max-width: 760px) {
  .nav-drawer[open] > .nav { display: flex }
}

/* ── INHERITED v1 DEFECT, FIXED. Contrast, and it is v1's own token that fixes it. hanks build 1,
   2026-09-06. v1 aliases the booking widget's accent to its CTA blue (`--bkm-accent: var(--blue)`,
   #2f6097) and the widget draws every link inside `.booking-view` with it, on `--bkm-elevated`
   (`--dark-card`, #1b2230): 2.46:1, measured by contrast.mjs on /booked. It never showed on v1 because
   the box is EMPTY at rest -- booking-view.js only writes into it when a booking id is in the URL -- so
   the defect is latent in v1 and becomes visible the moment anything is server-rendered there, which is
   what `[MARK]`'s fallback ruling asks for. The value is v1's OWN `--blue-bright`, whose own comment in
   v1's `:root` reads "highlight / links on dark". AFTER, measured on the built page: 5.59:1. The first
   selector restates the widget's own (0,2,1) so this rule wins on source order rather than on weight;
   the second reaches a `.booking-view` on any band. Nothing else on the site uses either. */
.section--light .booking-view a, .booking-view a { color: var(--blue-bright) }

/* ── INHERITED v1 DEFECT, FIXED. Contrast, and v1's own stylesheet already contains the fix. hanks
   build 1, 2026-09-06. v1 writes `.eyebrow--hero{color:var(--blue-bright)}` at styles.css line 335 and
   then `.eyebrow{...color:var(--blue)}` at line 539 -- BOTH (0,1,0), so the later one wins and the
   author's own hero value never lands. ONE element on the whole site is affected: "Whitefish, Montana"
   on the home hero, 12.8px/700, which needs 4.5:1.
   BEFORE, measured against the ACTUAL painted backdrop sampled out of the rendered page (the most
   common pixel inside the element's own box, (9,15,21) -- contrast.mjs assumes the nearest painted
   ancestor, which over a photograph it cannot know): #2f6097 on rgb(9,15,21) = 2.97:1.
   AFTER: #5b9fd6 on rgb(9,15,21) = 6.76:1. The value is v1's own `--blue-bright`, whose own comment in
   v1's `:root` reads "highlight / links on dark", and it is v1's own rule reaching the element it was
   written for. (0,2,0) so it beats `.eyebrow` on weight rather than on source order.
   The second flag contrast.mjs raises on this page, `.btn--ghost` "How It Works" at 1.14:1, is an
   INSTRUMENT ARTEFACT and is not changed: the tool read the button's OWN `rgba(255,255,255,.04)`
   background as the backdrop. Sampled out of the rendered page the real backdrop is rgb(19,24,29) and
   the ratio is 15.6:1. */
.eyebrow.eyebrow--hero { color: var(--blue-bright) }

/* ── THE ONE RULE THE SERVER-RENDERED BOOKING BAND NEEDS, and BOTH of its numbers are v1's own.
   hanks build 1, 2026-09-06. The band on /pricing is drawn entirely with v1's own components, and every
   one of them spaces itself except `.hero-actions`, which in v1 appears ONLY inside a `.page-hero__inner`
   where the hero's own padding does the work -- so it declares no margin at all. Measured on the built
   page before this rule: the call button's top edge sat 3px below the price cards and the note sat
   directly under the button, with the button's own box-shadow bleeding over both. `2rem` is v1's own
   `.price-grid{margin-top:2rem}`, which is the gap it puts between a block and the card row; `1rem` is
   v1's own `p{margin:0 0 1rem}`. Scoped to `#book` so no other `.hero-actions` on the site can be
   reached -- the three hero ones are measured at 0 differing pixels and must stay that way. */
#book .hero-actions { margin: 2rem 0 1rem }

/* The four chooser tiles are LINKS (MeatCheck 2026-09-06, blocker 12: drawn inert they carried full card
   chrome and did nothing, which is dead decoration). v1 declares no hover state for `.price-card` because
   v1's are not links, so they need one -- and it is HOVER ONLY, so the RESTING state every capture on this
   board measures is untouched and the pixel diff is unaffected. The value is v1's own `--blue`, the colour
   its own `.nav a:not(.btn):hover` already uses for exactly this signal. */
a.price-card:hover { border-color: var(--blue) }

/* ── INHERITED v1 DEFECT, FIXED. THE CONTACT FORM'S LABELS ARE INVISIBLE. hanks build 1, 2026-09-06,
   found by MeatCheck (blocker 1) and by nothing else in the kit -- the route's pixel diff is 0 at both
   widths, which is exactly right, because v1 draws it the same way. v1 writes
   `.cform label{...color:var(--ink-light)}`, a colour authored for a dark band, and puts the form inside
   `<section class="section section--light">`, whose own rule is `background:var(--light)` -- white.
   MEASURED on the built page: #eef0f4 on #ffffff = 1.14:1, on all four labels ("Name", "Email",
   "Subject", "Message"), where WCAG 1.4.3 requires 4.5:1. A visitor sees four unlabelled boxes on the one
   page whose entire job is to let a customer make contact. AFTER: #111318 on #ffffff = 18.63:1. The value
   is v1's OWN `--ink`, which is what `.section--light` already sets for that band's text; the selector is
   scoped to `.section--light` so a form on a dark band keeps v1's value untouched.
   `contrast.mjs` did not catch it, which is its own finding: the tool reads each element's nearest
   PAINTED ancestor background, and a <label> whose own background is `rgba(0,0,0,0)` inside a `.field`
   flex column inside a `.wrap` resolved to something it scored as passing. Named in NOTES.md. */
.section--light .cform label { color: var(--ink) }

/* ── INHERITED v1 DEFECT, FIXED. HORIZONTAL SCROLL ON A PHONE. hanks build 1, 2026-09-06, found by
   MeatCheck (blocker 5) and then bounded by `overflow.mjs`, which is new in this build because no other
   instrument here can see it: bands.mjs and rects.mjs read heights and tops, and pixdiff photographs a
   fullPage capture whose WIDTH is the overflowing width on both sides, so an identical overflow is 0
   differing pixels. MEASURED over all 13 routes at 390 and at 320, both sides:
     /cancellation-policy  scrollWidth 397 against a 390 viewport, and 397 against 320. IDENTICAL on v1.
     /fulfillment          scrollWidth 346 against 320. IDENTICAL on v1.
     the other 11 routes   exactly the viewport at both widths, both sides.
   The cause is one unbreakable word: the h1 "Cancellation and Rescheduling Policy" sets RESCHEDULING at
   44.8px in a 350px column with `overflow-wrap:normal`, so the text overruns its own box (which is why no
   element's bounding rect is over the viewport and nothing but the document's scrollWidth shows it). WCAG
   1.4.10 Reflow forbids two-dimensional scrolling at 320px. AFTER: 390 and 320 on every route, both
   widths, no overflow. `break-word` fires ONLY when a word would otherwise overflow, so no other heading
   on the site rewraps -- asserted by re-running the whole sweep after this rule landed. */
:is(h1,h2,h3,h4,h5,h6) { overflow-wrap: break-word }

/* ── INHERITED v1 DEFECT, FIXED. THE HEADER'S PRIMARY BUTTON IS DRAWN WITH A SEAM. hanks build 1,
   2026-09-06, found by MeatCheck (blocker 14) on all 13 routes and confirmed at 4x device scale on both
   sides. v1 writes `.btn{border:2px solid ...}` and `.btn--grad{background:var(--grad);
   border-color:transparent}`. The CSS defaults are `background-origin:padding-box` and
   `background-clip:border-box`, so the gradient is SIZED to the padding box and PAINTED over the border
   box -- and the 2px ring outside the padding box is filled by the gradient's own `repeat`, showing the
   END of the previous tile down the left edge and the START of the next down the right. The result is an
   orange crescent on the left of a pill whose fill starts blue, and a blue crescent on the right of a
   fill that ends orange: it reads as two misregistered shapes. One declaration, no new value:
   `background-origin:border-box` sizes the gradient to the box it is already painted over, so there is
   one continuous gradient and no seam. It reaches only `.btn--grad`, which on this site is the header
   CTA and nothing else (`.cform button[type=submit]` carries the same gradient with `border:0`, so it
   never had the seam). */
.btn--grad { background-origin: border-box }

/* ── INHERITED v1 DEFECT, FIXED. THE SITE'S ONLY TAPPABLE PHONE NUMBER FAILS CONTRAST, ON ALL 13 ROUTES.
   hanks build 1, 2026-09-06. Found only after contrast.mjs was widened -- see its own docstring: the
   instrument read ten tag names inside `<main>` and the footer was outside its scope entirely, so this sat
   on every page of the site and scored zero. v1 writes `a{color:var(--blue-deep)}` as its base link colour
   (#234d7e, a HOVER depth token) and the footer paints `#060b11`. MEASURED: 2.29:1 on `<a href="tel:...">`
   in `address.footer-contact`, where WCAG 1.4.3 requires 4.5:1 -- and that link is the one action this
   business most needs a visitor to take, the only tappable number on the site, and it is on every page.
   AFTER: 6.93:1, with v1's OWN `--blue-bright`, whose own comment in v1's `:root` reads "highlight / links
   on dark" -- the third time this build has used the token v1 declared for exactly this and never wired up.
   Scoped to the footer's address block, so no other link on the site moves. */
.footer-contact a { color: var(--blue-bright) }

/* GLYPHS, generated by extract-v1.py 2026-09-05. Every inline SVG v1 carried, keyed by content hash and
   drawn as a mask so the element that carries it holds no markup. Decoration is stylesheet, not content. */

/* INLINE STYLES, generated by extract-v1.py 2026-09-05. v1 wrote these as style="" attributes; H-13 forbids the
   attribute, so each distinct declaration list is one utility class, named by hash, carried by the same element. */