/* ==========================================================================
   MUSKOKA HOT TUB - ORGANISMS
   Tier 3 of 4. Consumes tokens from foundations.css only.

   Contents
     1. Site header and desktop nav
     2. Mobile drawer nav (pattern ref: hottubshamilton.ca, reskinned)
     3. Floating call button
     4. Reviews wall
   ========================================================================== */


/* ==========================================================================
   1. SITE HEADER
   ========================================================================== */

.mht-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--mht-abyss);
}

.mht-header__inner {
  max-width: var(--mht-container-wide);
  margin: 0 auto;
  padding: var(--mht-gap-4) var(--mht-section-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mht-gap-6);
}

.mht-header__logo { display: inline-flex; align-items: center; }
.mht-header__logo img { height: 44px; width: auto; display: block; }

.mht-nav { display: none; }

.mht-nav__list {
  display: flex;
  align-items: center;
  gap: var(--mht-gap-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Small, tracked, upper-case. Slim by reference to the outdoor brands, which
   all run a quiet nav and let the photograph carry the top of the page. */
.mht-nav__list a {
  color: var(--mht-mist);
  font-size: var(--mht-small);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--mht-gap-3) 0;
}
.mht-nav__list a:hover,
.mht-nav__list .current-menu-item > a { color: var(--mht-steam); }

/* The phone stays the one accent in the nav, but outlined rather than filled
   so it is a doorway, not the loudest thing on the page. It fills on hover. */
.mht-header__phone {
  display: none;
  /* On the dark header. Steam, not ember: ember is near-black in Forest
     Floor and would vanish here. */
  border: 1px solid var(--mht-steel);
  color: var(--mht-steam);
  font-weight: 600;
  font-size: var(--mht-small);
  letter-spacing: .02em;
  padding: 8px var(--mht-gap-5);
  border-radius: var(--mht-r-btn);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--mht-t-fast) var(--mht-ease), color var(--mht-t-fast) var(--mht-ease);
}
.mht-header__phone:hover { background: var(--mht-steam); border-color: var(--mht-steam); color: var(--mht-abyss); }

/* Hamburger */
.mht-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.mht-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--mht-steam);
  transition: transform var(--mht-t-base) var(--mht-ease), opacity var(--mht-t-base) var(--mht-ease);
}
.mht-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mht-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mht-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
  .mht-nav { display: block; }
  .mht-header__phone { display: inline-block; }
  .mht-burger { display: none; }
}


/* ==========================================================================
   2. MOBILE DRAWER
   Structure follows the reference: location card with directions CTA on top,
   soft curved seam, then large accordion rows. Reskinned to Deep Water.
   ========================================================================== */

.mht-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.mht-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(14, 28, 38, .55);
  opacity: 0;
  transition: opacity var(--mht-t-slow) var(--mht-ease);
}
.mht-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 92vw);
  background: var(--mht-white);
  border-radius: 16px 0 0 16px;
  transform: translateX(102%);
  transition: transform var(--mht-t-slow) var(--mht-ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Keeps the last row clear of the floating call button. */
  padding-bottom: 96px;
}
.mht-drawer.is-open { pointer-events: auto; }
.mht-drawer.is-open .mht-drawer__scrim { opacity: 1; }
.mht-drawer.is-open .mht-drawer__panel { transform: translateX(0); }

/* Location card */
.mht-drawer__card {
  position: relative;
  background: var(--mht-surface-2);
  padding: var(--mht-gap-6) var(--mht-gap-6) var(--mht-gap-7);
}
.mht-drawer__eyebrow {
  font-size: var(--mht-micro);
  font-weight: 600;
  letter-spacing: var(--mht-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mht-muted);
  margin: 0 0 2px;
}
.mht-drawer__title {
  font-family: var(--mht-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--mht-ink);
  margin: 0 0 var(--mht-gap-4);
  padding-bottom: var(--mht-gap-4);
  border-bottom: 1px solid var(--mht-border);
}
.mht-drawer__addr {
  display: flex;
  gap: var(--mht-gap-3);
  align-items: flex-start;
  font-size: var(--mht-small);
  line-height: 1.5;
  color: var(--mht-ink-2);
  margin: 0 0 var(--mht-gap-5);
}
.mht-drawer__addr svg { flex: none; margin-top: 2px; color: var(--mht-tide); }
.mht-drawer__directions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mht-gap-3);
  min-height: 48px;
  background: var(--mht-ember);
  color: var(--mht-ember-ink);
  font-size: var(--mht-small);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--mht-r-btn);
  text-decoration: none;
}
.mht-drawer__directions:hover { background: var(--mht-ember-strong); color: var(--mht-ember-ink); }
.mht-drawer__close {
  position: absolute;
  top: var(--mht-gap-4);
  right: var(--mht-gap-4);
  width: 40px;
  height: 40px;
  border-radius: var(--mht-r-pill);
  border: 0;
  background: var(--mht-white);
  color: var(--mht-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--mht-shadow-1);
}
/* Soft curved seam between the card and the list. */
.mht-drawer__card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 18px;
  background: var(--mht-white);
  border-radius: 100% 100% 0 0 / 200% 200% 0 0;
}

/* Rows */
.mht-drawer__list { padding: var(--mht-gap-3) 0 0; }
.mht-drawer__row { border-bottom: 1px solid var(--mht-surface-2); }
.mht-drawer__rowbtn,
.mht-drawer__rowlink {
  display: flex;
  align-items: center;
  gap: var(--mht-gap-4);
  width: 100%;
  min-height: 60px;
  padding: var(--mht-gap-4) var(--mht-gap-6);
  background: transparent;
  border: 0;
  font-family: var(--mht-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--mht-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mht-drawer__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--mht-r-pill);
  background: var(--mht-surface-2);
  color: var(--mht-tide);
}
.mht-drawer__chev {
  margin-left: auto;
  color: var(--mht-muted-2);
  transition: transform var(--mht-t-base) var(--mht-ease);
}
.mht-drawer__rowbtn[aria-expanded="true"] .mht-drawer__chev { transform: rotate(180deg); }

.mht-drawer__sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--mht-t-slow) var(--mht-ease);
}
.mht-drawer__sub a {
  display: block;
  padding: 12px var(--mht-gap-6) 12px 86px;
  font-size: var(--mht-small);
  color: var(--mht-ink-2);
  text-decoration: none;
  min-height: 44px;
}
.mht-drawer__sub a:hover { color: var(--mht-ink); background: var(--mht-surface-1); }
.mht-drawer__sub .is-view-all { color: var(--mht-ember-deep); font-weight: 600; }

@media (min-width: 1024px) { .mht-drawer { display: none; } }


/* ==========================================================================
   3. FLOATING CALL BUTTON (mobile only)
   ========================================================================== */

.mht-callfab {
  position: fixed;
  right: var(--mht-gap-5);
  bottom: var(--mht-gap-5);
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--mht-r-pill);
  background: var(--mht-ember);
  color: var(--mht-ember-ink);
  box-shadow: var(--mht-shadow-3);
  text-decoration: none;
}
.mht-callfab:hover { background: var(--mht-ember-strong); color: var(--mht-ember-ink); }
@media (min-width: 1024px) { .mht-callfab { display: none; } }


/* ==========================================================================
   4. REVIEWS WALL
   Columns of Google review cards drifting vertically at offset speeds, fade
   masks top and bottom, pause on hover. Reduced motion gets a static grid.
   ========================================================================== */

.mht-reviews {
  padding: var(--mht-section-y-md) var(--mht-section-x);
  background: var(--mht-white);
}
.mht-reviews__head { text-align: center; max-width: 640px; margin: 0 auto var(--mht-gap-8); }

.mht-reviews__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mht-gap-3);
  padding: 8px 16px;
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-pill);
  background: var(--mht-surface-1);
  font-size: var(--mht-small);
  font-weight: 600;
  color: var(--mht-ink);
  text-decoration: none;
  margin-bottom: var(--mht-gap-6);
}
.mht-reviews__stars { color: var(--mht-ember); letter-spacing: 2px; }

.mht-reviews__title {
  font-family: var(--mht-display);
  font-size: var(--mht-h2);
  line-height: var(--mht-lh-head);
  color: var(--mht-ink);
  margin: 0;
}
.mht-reviews__title em {
  display: block;
  font-style: italic;
  color: var(--mht-ember-deep);
}
.mht-reviews__sub {
  font-size: var(--mht-body-sz);
  color: var(--mht-ink-2);
  margin: var(--mht-gap-4) 0 0;
}

.mht-reviews__wall {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mht-gap-5);
  max-width: var(--mht-container-default);
  margin: 0 auto;
}
@media (min-width: 700px)  { .mht-reviews__wall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mht-reviews__wall { grid-template-columns: repeat(3, 1fr); } }

.mht-reviews__col { position: relative; overflow: hidden; max-height: 560px; }
.mht-reviews__col {
  /* #000 here is a mask alpha channel, not a brand colour. A mask reads only
     opacity, so this value is structural and correctly not a token. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
}
.mht-reviews__track {
  display: flex;
  flex-direction: column;
  gap: var(--mht-gap-5);
  animation: mht-drift 46s linear infinite;
}
.mht-reviews__col:nth-child(2) .mht-reviews__track { animation-duration: 58s; }
.mht-reviews__col:nth-child(3) .mht-reviews__track { animation-duration: 52s; }
.mht-reviews__wall:hover .mht-reviews__track { animation-play-state: paused; }

@keyframes mht-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.mht-review {
  background: var(--mht-white);
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-card);
  box-shadow: var(--mht-shadow-1);
  padding: var(--mht-gap-6);
}
.mht-review__stars { color: var(--mht-ember); letter-spacing: 3px; font-size: var(--mht-small); }
.mht-review__text {
  font-size: var(--mht-small);
  line-height: 1.65;
  color: var(--mht-ink-2);
  margin: var(--mht-gap-4) 0 var(--mht-gap-5);
}
.mht-review__author {
  font-size: var(--mht-small);
  font-weight: 600;
  color: var(--mht-ink);
  padding-top: var(--mht-gap-4);
  border-top: 1px solid var(--mht-surface-2);
}
.mht-review__source {
  display: block;
  font-size: var(--mht-micro);
  font-weight: 400;
  color: var(--mht-muted);
  margin-top: 2px;
}

/* Reduced motion or few reviews: still, honest grid. */
@media (prefers-reduced-motion: reduce) {
  .mht-reviews__track { animation: none; }
  .mht-reviews__col { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .mht-reviews__track > .is-clone { display: none; }
}
.mht-reviews--static .mht-reviews__track { animation: none; }
.mht-reviews--static .mht-reviews__col { max-height: none; -webkit-mask-image: none; mask-image: none; }
.mht-reviews--static .is-clone { display: none; }


/* ==========================================================================
   5. FOOTER (minimal until the full organism is designed)
   ========================================================================== */

.mht-footer {
  background: var(--mht-abyss);
  color: var(--mht-mist);
  padding: var(--mht-section-y-sm) var(--mht-section-x);
  margin-top: var(--mht-section-y-md);
}
.mht-footer__legal {
  max-width: var(--mht-container-wide);
  margin: 0 auto;
  font-size: var(--mht-small);
}


/* ==========================================================================
   6. ARCHIVE AND MODEL PAGE
   ========================================================================== */

.mht-crumbs {
  padding: var(--mht-gap-5) 0 0;
  font-size: var(--mht-small);
  color: var(--mht-muted);
}
.mht-crumbs a { color: var(--mht-muted); text-decoration: none; }
.mht-crumbs a:hover { color: var(--mht-ink); text-decoration: underline; }
.mht-crumbs span { margin: 0 var(--mht-gap-3); color: var(--mht-muted-2); }

.mht-count {
  font-size: var(--mht-small);
  color: var(--mht-muted);
  margin: 0 0 var(--mht-gap-6);
}

/* Grouped pillar sections */
.mht-group { margin-bottom: var(--mht-gap-9); }
.mht-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mht-gap-5);
  flex-wrap: wrap;
  padding-bottom: var(--mht-gap-4);
  margin-bottom: var(--mht-gap-6);
  border-bottom: 1px solid var(--mht-border);
}
.mht-group__title { margin: 0; font-size: var(--mht-h3); }
.mht-group__all {
  font-size: var(--mht-small);
  font-weight: 600;
  color: var(--mht-tide);
  text-decoration: none;
  white-space: nowrap;
}
.mht-group__all:hover { color: var(--mht-ink); text-decoration: underline; }

/* Category filters. Four short sets of toggle chips above the grouped grid.
   Hidden until the script shows it, so a visitor without JavaScript gets the
   grouped view and nothing that looks broken. */
.mht-filters {
  margin: 0 0 var(--mht-gap-8);
  padding: var(--mht-gap-6);
  background: var(--mht-surface-1);
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-card);
}
/* With JavaScript on, hold the bar's space from the first paint and only
   reveal it once the script is ready. Showing it late pushed the whole grid
   down, which was most of the /hot-tubs/ layout shift (decision 108). */
body:not(.no-js) .mht-filters[hidden] { display: block; visibility: hidden; }
.mht-filters__row { display: flex; flex-wrap: wrap; gap: var(--mht-gap-6) var(--mht-gap-8); align-items: flex-start; }
.mht-filters__set { border: 0; margin: 0; padding: 0; min-width: 0; flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: var(--mht-gap-3); align-items: center; }
.mht-filters__set legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--mht-gap-3);
  font-size: var(--mht-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mht-muted);
}
.mht-chipbtn {
  appearance: none;
  min-height: 40px;
  padding: 8px var(--mht-gap-5);
  font: inherit;
  font-size: var(--mht-small);
  font-weight: 600;
  color: var(--mht-ink);
  background: var(--mht-white);
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-pill);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--mht-t-fast) var(--mht-ease), border-color var(--mht-t-fast) var(--mht-ease), color var(--mht-t-fast) var(--mht-ease);
}
.mht-chipbtn:hover { border-color: var(--mht-ember); }
.mht-chipbtn[aria-pressed="true"] { background: var(--mht-ember); border-color: var(--mht-ember); color: var(--mht-ember-ink); }
.mht-chipbtn:focus-visible { outline: 2px solid var(--mht-ember); outline-offset: 2px; }
.mht-chipbtn[disabled] { opacity: .4; cursor: default; }
.mht-filters__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mht-gap-5);
  margin: var(--mht-gap-6) 0 0;
  min-height: 24px;
  font-size: var(--mht-small);
  color: var(--mht-muted);
}
.mht-filters__clear {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--mht-tide);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.mht-filters__none { margin: var(--mht-gap-7) 0; font-size: var(--mht-lead); color: var(--mht-ink-2); }
.mht-filters__none a { color: var(--mht-tide); font-weight: 600; }

/* A family card names its versions under the spec line. */
.mht-card__versions { margin: var(--mht-gap-3) 0 0; font-size: var(--mht-small); line-height: 1.45; color: var(--mht-muted); }
.mht-card__versions b { font-weight: 600; color: var(--mht-ink-2); }

/* Sister versions on the model page. */
.mht-versions { margin: var(--mht-gap-6) 0 0; padding: var(--mht-gap-5); background: var(--mht-surface-1); border: 1px solid var(--mht-border); border-radius: var(--mht-r-md); }
.mht-versions__label { margin: 0 0 var(--mht-gap-4); font-size: var(--mht-small); color: var(--mht-muted); }
.mht-versions__list { display: flex; flex-wrap: wrap; gap: var(--mht-gap-3); list-style: none; margin: 0; padding: 0; }
.mht-versions__list a { display: inline-block; padding: 8px var(--mht-gap-5); font-size: var(--mht-small); font-weight: 600; color: var(--mht-ink); background: var(--mht-white); border: 1px solid var(--mht-border); border-radius: var(--mht-r-pill); text-decoration: none; }
.mht-versions__list a:hover { border-color: var(--mht-ember); }

/* Six cards per group until a filter is on. Every model is in the page so the
   filters are instant; this only holds the long tail back by default. */
.mht-grid--capped > .mht-card:nth-child(n+7) { display: none; }

/* Filtering: the groups dissolve into one grid and only matches show. */
.mht-groups.is-filtering { display: grid; gap: var(--mht-gap-6); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .mht-groups.is-filtering { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mht-groups.is-filtering { grid-template-columns: repeat(3, 1fr); } }
.mht-groups.is-filtering .mht-group,
.mht-groups.is-filtering .mht-grid { display: contents; }
.mht-groups.is-filtering .mht-group__head { display: none; }
.mht-groups.is-filtering .mht-card { display: flex; }
.mht-groups.is-filtering .mht-card[hidden] { display: none; }
[data-mht-filter-scope] .mht-card[hidden] { display: none; }

/* Model page layout */
.mht-model { display: grid; gap: var(--mht-gap-8); }
@media (min-width: 900px) { .mht-model { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.mht-model__media img { width: 100%; height: auto; border-radius: var(--mht-r-card); display: block; }
/* A grid item defaults to min-width: auto, so the nowrap thumbnail strip set
   the track width and any gallery of four or more pushed the page sideways on
   phones. Zero lets the strip scroll inside the column instead. */
.mht-model__media { min-width: 0; }
.mht-model__detail h1 { margin-bottom: var(--mht-gap-4); }

/* CTA band */
/* Closing CTA. Light tint between a dark band and the dark footer. The
   footer's own top margin is zeroed after it, because the section already
   carries its padding and the gap showed as a white strip. */
.mht-cta {
  background: var(--mht-surface-2);
  border-top: 1px solid var(--mht-border);
  padding: var(--mht-section-y-md) var(--mht-section-x);
}
.mht-cta__inner { display: grid; gap: var(--mht-gap-7); }
@media (min-width: 900px) {
  .mht-cta__inner { grid-template-columns: 1.3fr 1fr; align-items: center; }
}
.mht-cta__copy { min-width: 0; }
.mht-cta__title { margin-bottom: var(--mht-gap-4); }
.mht-cta__text { color: var(--mht-ink-2); max-width: 50ch; margin: 0; }
.mht-cta__side { display: flex; flex-direction: column; gap: var(--mht-gap-5); }
@media (min-width: 900px) { .mht-cta__side { align-items: flex-start; padding-left: var(--mht-gap-8); border-left: 1px solid var(--mht-border); } }
.mht-cta__nap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
  font-size: var(--mht-small);
  color: var(--mht-ink-2);
}
.mht-cta__hours { color: var(--mht-muted); margin-top: var(--mht-gap-2); }
.mht-cta__actions { display: flex; gap: var(--mht-gap-4); flex-wrap: wrap; margin: 0; }





/* ==========================================================================
   8. HERO, full-bleed video over a poster
   The poster always renders and carries the LCP. The video fades in over it
   once it is actually playing, so there is never a flash of empty box.
   Copy is centred, with a stat strip under it.
   ========================================================================== */

.mht-hero--video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(560px, 92vh, 940px);
  background: var(--mht-abyss);
  overflow: hidden;
  margin-top: calc(-1 * var(--mht-header-h, 68px));
}
.mht-hero__media { position: absolute; inset: 0; }
.mht-hero__media img,
.mht-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
.mht-hero__media img { z-index: 0; }
.mht-hero__video { z-index: 1; opacity: 0; transition: opacity .9s var(--mht-ease); }
.mht-hero__video.is-ready { opacity: 1; }

/* Weighted top and bottom: the header sits over the top edge and the copy
   over the middle, so both ends need holding. */
.mht-hero--video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(14, 28, 38, .80) 0%,
    rgba(14, 28, 38, .46) 38%,
    rgba(14, 28, 38, .30) 70%,
    rgba(14, 28, 38, .48) 100%);
}
.mht-hero--video .mht-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: var(--mht-section-y-lg);
  padding-bottom: var(--mht-section-y-md);
}
.mht-hero--video .mht-eyebrow { display: flex; align-items: center; justify-content: center; }
.mht-hero__title {
  color: var(--mht-steam);
  font-size: clamp(2.4rem, 4.6vw, 4.25rem);
  font-weight: var(--mht-wt-display);
  line-height: 1.02;
  letter-spacing: -.014em;
  max-width: 17ch;
  margin-inline: auto;
  margin-bottom: var(--mht-gap-6);
}
.mht-hero__lede {
  color: var(--mht-mist);
  font-size: var(--mht-lead);
  line-height: 1.6;
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--mht-gap-7);
}
.mht-hero__actions { display: flex; flex-wrap: wrap; gap: var(--mht-gap-4); margin: 0; justify-content: center; align-items: center; }

.mht-hero__stats {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-top: var(--mht-gap-9);
  padding-top: var(--mht-gap-7);
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: grid;
  gap: var(--mht-gap-6);
  grid-template-columns: repeat(3, 1fr);
}
.mht-hero__stat b {
  display: block;
  font-family: var(--mht-display);
  font-weight: var(--mht-wt-display);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.1;
  color: var(--mht-steam);
}
.mht-hero__stat span { display: block; margin-top: 4px; font-size: var(--mht-small); color: var(--mht-mist); }
/* Phones: the hero is the headline and two buttons. The reasons are said
   again further down the page. */
@media (max-width: 760px) { .mht-hero__stats { display: none; } }

.mht-hero__motion {
  position: absolute;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--mht-r-pill);
  background: rgba(14, 28, 38, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  color: var(--mht-steam);
  font: 600 12px/1 var(--mht-body);
  cursor: pointer;
}
.mht-hero__motion:hover { background: rgba(14, 28, 38, .88); }
/* The display rule above out-ranked [hidden], so the button showed on phones
   where the video never loads. It appears only once the video is playing. */
.mht-hero__motion[hidden] { display: none; }
.mht-hero__motion-icon { font-size: 9px; letter-spacing: 1px; }
.mht-hero__motion-text { white-space: nowrap; }

/* Reduced motion: the poster is the hero and the control is pointless. */
@media (prefers-reduced-motion: reduce) {
  .mht-hero__video { display: none; }
  .mht-hero__motion { display: none !important; }
}

/* Retained for inner pages, which still use a still image hero. */
.mht-hero--bleed {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 78vh, 820px);
  background: var(--mht-abyss);
  overflow: hidden;
  margin-top: calc(-1 * var(--mht-header-h, 68px));
}
.mht-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; display: block; }
.mht-hero--bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 28, 38, .78) 0%, rgba(14, 28, 38, .42) 34%, rgba(14, 28, 38, 0) 62%);
  pointer-events: none;
}
.mht-hero--bleed .mht-hero__inner { position: relative; z-index: 1; width: 100%; padding-top: var(--mht-section-y-md); padding-bottom: var(--mht-section-y-md); }
.mht-hero--bleed .mht-hero__title { max-width: 18ch; margin-inline: 0; }
.mht-hero--bleed .mht-hero__lede { margin-inline: 0; }
.mht-hero--bleed .mht-hero__actions { justify-content: flex-start; }

.mht-eyebrow--onDark { color: var(--mht-mist); }
.mht-eyebrow--onDark::before { background: var(--mht-steel); }

@media (max-width: 899px) {
  .mht-hero--video { min-height: clamp(520px, 84vh, 720px); }
}


/* ==========================================================================
   1a. HEADER, overlay variant
   On the homepage the header sits transparent over the hero and becomes the
   normal solid bar once the page scrolls. A class on body switches it, and
   main.js toggles is-scrolled.
   ========================================================================== */

:root { --mht-header-h: 68px; }

.home .mht-header {
  /* Not fully transparent: a tinted, blurred bar with a hairline, so the nav
     sits on something over the video instead of floating on it. */
  background: rgba(14, 28, 38, .55);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12);
  transition: background-color var(--mht-t-base) var(--mht-ease),
              box-shadow var(--mht-t-base) var(--mht-ease);
}
.home .mht-header.is-scrolled { background: rgba(14, 28, 38, .94); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6); }


/* ==========================================================================
   9. CATEGORY TILES
   Four doors, one large. Full-bleed photograph with the label set over it on
   a bottom scrim. No border, no description. The earlier row of six small
   thumbnails gave patio furniture the same weight as hot tubs and gave none
   of them enough room to be a photograph.
   ========================================================================== */

.mht-cats {
  display: grid;
  gap: var(--mht-gap-4);
  grid-template-columns: 1fr;
  grid-auto-rows: clamp(200px, 56vw, 300px);
  list-style: none;
  padding: 0;
  margin: var(--mht-gap-8) 0 0;
}
@media (min-width: 700px) {
  .mht-cats { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(220px, 30vw, 300px); }
  .mht-cat--lead { grid-column: 1 / -1; }
  .mht-cat:nth-child(2) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .mht-cats { grid-template-columns: 1.35fr 1fr 1fr; grid-auto-rows: clamp(230px, 21vw, 320px); gap: var(--mht-gap-5); }
  .mht-cat--lead { grid-column: 1; grid-row: 1 / span 2; }
  .mht-cat:nth-child(2) { grid-column: 2 / span 2; }
}

.mht-cat { margin: 0; min-width: 0; }
.mht-cat__link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--mht-r-card);
  background: var(--mht-abyss);
  color: var(--mht-steam);
  text-decoration: none;
}
.mht-cat__media { position: absolute; inset: 0; display: block; }
.mht-cat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--mht-t-slow) var(--mht-ease);
}
.mht-cat__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 28, 38, .86) 0%, rgba(14, 28, 38, .42) 34%, rgba(14, 28, 38, 0) 62%);
  pointer-events: none;
}
.mht-cat__label {
  position: absolute;
  z-index: 1;
  left: var(--mht-gap-6);
  right: var(--mht-gap-6);
  bottom: var(--mht-gap-6);
  display: block;
}
.mht-cat__title {
  display: block;
  font-family: var(--mht-display);
  font-weight: var(--mht-wt-display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  line-height: 1.1;
  color: var(--mht-steam);
}
.mht-cat--lead .mht-cat__title { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); }
.mht-cat__meta {
  display: block;
  margin-top: var(--mht-gap-3);
  font-size: var(--mht-small);
  letter-spacing: .04em;
  color: var(--mht-mist);
}
.mht-cat__link:hover .mht-cat__media img { transform: scale(1.04); }
.mht-cat__link:focus-visible { outline: 2px solid var(--mht-ember); outline-offset: 4px; }

.mht-cats__also {
  margin: var(--mht-gap-6) 0 0;
  font-size: var(--mht-small);
  color: var(--mht-muted);
}
.mht-cats__also a { color: var(--mht-tide); font-weight: 600; text-decoration: none; }
.mht-cats__also a:hover { color: var(--mht-ink); text-decoration: underline; }

.mht-cats__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mht-gap-5) var(--mht-gap-6);
  margin: var(--mht-gap-7) 0 0;
}
.mht-cats__footlink { color: var(--mht-tide); font-weight: 600; text-decoration: none; }
.mht-cats__footlink:hover { color: var(--mht-ink); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .mht-cat__link:hover .mht-cat__media img { transform: none; }
}

/* ==========================================================================
   10. SIZE LINKS
   ========================================================================== */

.mht-sizes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mht-gap-4);
  list-style: none;
  padding: 0;
  margin: var(--mht-gap-7) 0 0;
}
@media (min-width: 560px)  { .mht-sizes { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .mht-sizes { grid-template-columns: repeat(8, 1fr); } }
.mht-sizes li { margin: 0; min-width: 0; }
.mht-size {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: var(--mht-gap-5);
  background: var(--mht-white);
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-card);
  text-decoration: none;
  transition: border-color var(--mht-t-fast) var(--mht-ease);
}
.mht-size:hover { border-color: var(--mht-ember); }
.mht-size__n {
  font-family: var(--mht-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--mht-ink);
}
.mht-size__label { font-size: var(--mht-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--mht-muted); margin-top: 4px; }
/* Who the size suits. Replaces a model count, which helped nobody choose. */
.mht-size__suits { margin-top: var(--mht-gap-4); font-size: var(--mht-small); line-height: 1.35; font-weight: 600; color: var(--mht-ink-2); }


/* ==========================================================================
   11. SHOWROOM BLOCK
   ========================================================================== */

.mht-showroom { display: grid; gap: var(--mht-gap-8); }
@media (min-width: 900px) { .mht-showroom { grid-template-columns: 1.05fr 1fr; align-items: start; } }
.mht-showroom__media img { width: 100%; height: auto; border-radius: var(--mht-r-card); display: block; }
/* Grid child. Declared so the class-coverage check passes and so the column
   has a floor width rather than collapsing on narrow content. */
.mht-showroom__copy { min-width: 0; }

.mht-showroom__nap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
  font-size: var(--mht-body-sz);
  color: var(--mht-mist);
  margin: var(--mht-gap-6) 0 var(--mht-gap-5);
}
.mht-showroom__nap a { color: inherit; font-weight: 600; }
.mht-showroom__hours { font-size: var(--mht-small); color: var(--mht-mist); margin-bottom: var(--mht-gap-6); }
.mht-showroom__hours p { margin-bottom: var(--mht-gap-3); }
.mht-showroom__actions { display: flex; flex-wrap: wrap; gap: var(--mht-gap-4); margin: var(--mht-gap-7) 0 var(--mht-gap-6); }


/* ==========================================================================
   12. CONTACT
   ========================================================================== */

.mht-contact { display: grid; gap: var(--mht-gap-8); }
@media (min-width: 860px) { .mht-contact { grid-template-columns: 1fr 1.15fr; align-items: start; } }
.mht-contact__phone { font-family: var(--mht-display); font-size: var(--mht-h3); margin-bottom: var(--mht-gap-3); }
.mht-contact__phone a { color: var(--mht-ink); text-decoration: none; }
.mht-contact__phone a:hover { color: var(--mht-tide); }


/* ==========================================================================
   13. FOOTER
   NAP first, as three large columns. Seating links in one row. Wordmark at
   full container width. Thin legal row. No link grid: the nav carries those.
   ========================================================================== */

.mht-footer {
  background: var(--mht-abyss);
  color: var(--mht-mist);
  padding: var(--mht-section-y-md) var(--mht-section-x) var(--mht-gap-6);
  margin-top: 0;
}

.mht-footer__nap {
  display: grid;
  gap: var(--mht-gap-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--mht-gap-8);
  border-bottom: 1px solid var(--mht-deep);
}
@media (min-width: 760px) { .mht-footer__nap { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mht-footer__nap { grid-template-columns: 1.3fr 1.3fr 1fr auto; } }

.mht-footer__col { display: flex; flex-direction: column; gap: var(--mht-gap-3); }
.mht-footer__label {
  font-family: var(--mht-body);
  font-size: var(--mht-micro);
  font-weight: 600;
  letter-spacing: var(--mht-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mht-steel);
}
.mht-footer__big {
  font-family: var(--mht-display);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.2;
  color: var(--mht-steam);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.mht-footer__big:hover { color: var(--mht-steam); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.mht-footer__hours { font-size: var(--mht-small); color: var(--mht-mist); }
.mht-footer__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--mht-gap-3);
  font-size: var(--mht-small);
  font-weight: 600;
  color: var(--mht-mist);
  text-decoration: none;
}
.mht-footer__rating:hover { color: var(--mht-steam); }
/* The stars were ember, navy on the navy footer. */
.mht-footer .mht-reviews__stars { color: var(--mht-steam); }

.mht-footer__sizes-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mht-gap-4) var(--mht-gap-6);
  padding: var(--mht-gap-6) 0;
  border-bottom: 1px solid var(--mht-deep);
}
.mht-footer__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mht-gap-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.mht-footer__sizes li { margin: 0; }
.mht-footer__sizes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding-inline: 8px;
  border: 1px solid var(--mht-steel);
  border-radius: var(--mht-r-md);
  font-size: var(--mht-small);
  font-variant-numeric: tabular-nums;
  color: var(--mht-mist);
  text-decoration: none;
  transition: border-color var(--mht-t-fast) var(--mht-ease), color var(--mht-t-fast) var(--mht-ease);
}
.mht-footer__sizes a:hover { background: var(--mht-steam); border-color: var(--mht-steam); color: var(--mht-abyss); }

/* The wordmark at container width. It is decoration, not navigation, so it
   is aria-hidden and the logo in the header remains the link home. */
/* Capped. At container width the logo was a billboard; the reference that
   does this uses a geometric wordmark, and ours has a mark and two lines of
   type that do not want to be a metre wide. */

.mht-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mht-gap-5);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--mht-gap-5);
  border-top: 1px solid var(--mht-deep);
  font-size: var(--mht-micro);
  color: var(--mht-steel);
}
.mht-footer__legal p { margin: 0; }
.mht-footer__links { display: flex; flex-wrap: wrap; gap: var(--mht-gap-5); }
.mht-footer__links a { color: var(--mht-mist); text-decoration: none; }
.mht-footer__links a:hover { color: var(--mht-steam); text-decoration: underline; }


/* ==========================================================================
   14. GALLERY, revised
   Arrows on the main image, thumbnails below. No lightbox: manufacturer
   sources run 450 to 1200px, so enlarging past native only shows the
   interpolation.
   ========================================================================== */

/* The arrows are absolute, so their nearest positioned ancestor has to be the
   image frame. Without this they anchor to the page and land outside it. */
.mht-gallery { position: relative; }
.mht-gallery .mht-gallery__main { position: relative; }

.mht-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--mht-ink);
  cursor: pointer;
  transition: background-color var(--mht-t-fast) var(--mht-ease),
              border-color var(--mht-t-fast) var(--mht-ease);
}
.mht-gallery__arrow:hover { background: var(--mht-white); border-color: var(--mht-border-2); }
.mht-gallery__arrow:focus-visible { outline: 2px solid var(--mht-ember); outline-offset: 2px; }
.mht-gallery__arrow--prev { left: var(--mht-gap-4); }
.mht-gallery__arrow--next { right: var(--mht-gap-4); }

/* Thumbnail strip. Restored: an earlier rebuild truncated the gallery section
   and cut these, so the thumbs fell back to plain list items, stacking
   vertically with bullets. */
.mht-gallery__thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--mht-gap-4);
  margin: var(--mht-gap-4) 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}
/* Cleared on the item as well as the list: the prose and patterns tiers both
   style bare list items and those rules reach in here. */
.mht-gallery__thumbs > li {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: none;
}
.mht-gallery__thumbs > li::before { content: none; }

.mht-gallery__thumb {
  display: block;
  width: 92px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-md);
  background: var(--mht-surface-1);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--mht-t-fast) var(--mht-ease);
}
.mht-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mht-gallery__thumb:hover { border-color: var(--mht-border-2); }
.mht-gallery__thumb[aria-current="true"] { border-color: var(--mht-ember); border-width: 2px; }
.mht-gallery__thumb:focus-visible { outline: 2px solid var(--mht-ember); outline-offset: 2px; }

.mht-gallery__count {
  position: absolute;
  right: var(--mht-gap-4);
  bottom: var(--mht-gap-4);
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--mht-r-pill);
  background: rgba(14, 28, 38, .72);
  color: var(--mht-steam);
  font-size: var(--mht-micro);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   15. MODEL PAGE, revised
   Spec moves into the right column. It previously ran full width below the
   fold while the right column sat empty.
   ========================================================================== */

.mht-spec--inline {
  width: 100%;
  table-layout: fixed;
  margin: 0 0 var(--mht-gap-5);
  font-size: var(--mht-small);
}
.mht-spec--inline th,
.mht-spec--inline td { padding-inline: 0; }
.mht-spec--inline th { width: 42%; padding-right: var(--mht-gap-4); }
.mht-spec--inline td { word-break: break-word; }
/* The zebra striping reads as a full-bleed band when the cells have no
   horizontal padding, so it is dropped on the inline variant. The bare `th`
   rule in the foundations reset also paints a surface fill, which on a
   two-column spec reads as a grey stripe down the label side. Both cleared
   here rather than weakened in foundations, where the reset is correct for
   ordinary prose tables. */
.mht-spec--inline tbody tr:nth-child(odd) { background: transparent; }
.mht-spec--inline th { background: transparent; }

.mht-model__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mht-gap-5);
  padding: var(--mht-gap-5) 0;
  border-top: 1px solid var(--mht-border);
  border-bottom: 1px solid var(--mht-border);
  margin-bottom: var(--mht-gap-6);
}
.mht-model__quote { font-size: var(--mht-small); color: var(--mht-muted); margin: 0; }
.mht-model__actions { display: flex; flex-wrap: wrap; gap: var(--mht-gap-4); margin: 0; }


/* ==========================================================================
   16. FAQ ACCORDION

   Height animates via grid-template-rows 0fr to 1fr. Nothing is measured in
   JavaScript, so the panel adapts to whatever content it holds and there is no
   reflow jump. The .no-js fallback leaves every panel open, which keeps the
   answers readable and crawlable if the script fails.
   ========================================================================== */

.mht-faq__title { margin-bottom: var(--mht-gap-6); }

.mht-faq__list {
  max-width: 820px;
  border-top: 1px solid var(--mht-border);
}
.mht-faq__item { border-bottom: 1px solid var(--mht-border); }

.mht-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mht-gap-5);
  padding: var(--mht-gap-6) 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--mht-body);
  font-size: var(--mht-lead);
  font-weight: 600;
  line-height: 1.4;
  color: var(--mht-ink);
  transition: color var(--mht-t-fast) var(--mht-ease);
}
.mht-faq__q:hover { color: var(--mht-tide); }
.mht-faq__q:focus-visible {
  outline: 2px solid var(--mht-ember);
  outline-offset: 3px;
  border-radius: var(--mht-r-sm);
}

.mht-faq__qic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--mht-r-pill);
  background: var(--mht-surface-2);
  color: var(--mht-ink-2);
  transition: transform var(--mht-t-base) var(--mht-ease),
              background-color var(--mht-t-base) var(--mht-ease),
              color var(--mht-t-base) var(--mht-ease);
}
.mht-faq__item.is-open .mht-faq__qic {
  transform: rotate(180deg);
  background: var(--mht-ember);
  color: var(--mht-ember-ink);
}
.mht-faq__item.is-open .mht-faq__q { color: var(--mht-tide); }

.mht-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--mht-t-slow) var(--mht-ease);
}
.mht-faq__item.is-open .mht-faq__a { grid-template-rows: 1fr; }
.mht-faq__a-inner { overflow: hidden; min-height: 0; }
.mht-faq__a-content {
  padding: 0 0 var(--mht-gap-6);
  max-width: 68ch;
  font-size: var(--mht-body-sz);
  line-height: var(--mht-lh-body);
  color: var(--mht-ink-2);
}
.mht-faq__a-content p:last-child { margin-bottom: 0; }
.mht-faq__a-content a {
  color: var(--mht-tide);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.mht-faq__a-content a:hover { color: var(--mht-ink); }

/* No script, no accordion: show everything. */
.no-js .mht-faq__a { grid-template-rows: 1fr; }
.no-js .mht-faq__qic { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mht-faq__a,
  .mht-faq__qic { transition: none; }
}

/* On a dark band */
.mht-section--dark .mht-faq__list,
.mht-section--dark .mht-faq__item { border-color: var(--mht-steel); }
.mht-section--dark .mht-faq__q { color: var(--mht-steam); }
.mht-section--dark .mht-faq__q:hover,
.mht-section--dark .mht-faq__item.is-open .mht-faq__q { color: var(--mht-ember); }
.mht-section--dark .mht-faq__qic { background: var(--mht-deep); color: var(--mht-mist); }
.mht-section--dark .mht-faq__a-content { color: var(--mht-mist); }


/* ==========================================================================
   17. MEDIA BANDS
   Full-width photography, edge to edge, tall. Copy sits low-left inside the
   container, never centred. Same bottom-only gradient as the hero.
   ========================================================================== */

.mht-band--overlay {
  position: relative;
  display: flex;
  align-items: flex-end;
  background: var(--mht-abyss);
  overflow: hidden;
}
.mht-band--tall  { min-height: clamp(520px, 72vh, 760px); }
.mht-band--full  { min-height: clamp(600px, 84vh, 880px); }
.mht-band--short { min-height: clamp(420px, 56vh, 620px); }
/* Full: the band takes the photo's own 16:9 height, so a top-down tub is
   seen whole on wide screens instead of cropped to a strip. */
.mht-band--full  { min-height: max(520px, min(56.25vw, 92vh)); }

.mht-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Heavier than the hero. Band images include bright winter frames with no
   natural dark space, and the copy sits at the bottom where those are
   brightest. Two stops in the lower half, fading to nothing by two thirds. */
.mht-band--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(14, 28, 38, .92) 0%,
    rgba(14, 28, 38, .74) 28%,
    rgba(14, 28, 38, .34) 52%,
    rgba(14, 28, 38, 0) 70%
  );
  pointer-events: none;
}
/* From tablet up the copy sits on the left, so the scrim does too. A
   bottom-only gradient left the heading on bright snow; this puts it on
   solid navy and leaves the right of the photograph clean. */
@media (min-width: 900px) {
  .mht-band--overlay::after {
    background:
      linear-gradient(to right, rgba(14, 28, 38, .9) 0%, rgba(14, 28, 38, .72) 30%, rgba(14, 28, 38, .2) 56%, rgba(14, 28, 38, 0) 70%),
      linear-gradient(to top, rgba(14, 28, 38, .55) 0%, rgba(14, 28, 38, 0) 40%);
  }
}
.mht-band--overlay .mht-band__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: var(--mht-section-y-lg);
  padding-bottom: var(--mht-section-y-md);
}
.mht-band__title {
  color: var(--mht-steam);
  font-size: clamp(1.9rem, 3.8vw, 3.5rem);
  font-weight: var(--mht-wt-display);
  line-height: 1.04;
  letter-spacing: -.012em;
  max-width: 18ch;
  margin-bottom: var(--mht-gap-5);
}
.mht-band__text {
  color: var(--mht-mist);
  font-size: var(--mht-lead);
  line-height: 1.6;
  max-width: 48ch;
  margin: 0;
}

/* Split variant: image beside copy, hard edge, no seam */
.mht-band--split { padding: 0; }
.mht-band__grid { display: grid; gap: var(--mht-gap-8); align-items: center; }
@media (min-width: 900px) {
  .mht-band__grid { grid-template-columns: 1.15fr 1fr; }
  .mht-band--reverse .mht-band__media { order: 2; }
}
.mht-band__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--mht-r-card);
}
.mht-band__copy h2 { margin-bottom: var(--mht-gap-4); }


/* ==========================================================================
   18. PHOTO GRID
   ========================================================================== */

.mht-photogrid {
  display: grid;
  gap: var(--mht-gap-5);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--mht-gap-7);
}
@media (min-width: 720px)  { .mht-photogrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .mht-photogrid { grid-template-columns: repeat(4, 1fr); } }

.mht-photogrid__item {
  margin: 0;
  border-radius: var(--mht-r-card);
  overflow: hidden;
  background: var(--mht-surface-2);
  aspect-ratio: 4 / 3;
}
.mht-photogrid__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The first image reads as the lead */
@media (min-width: 720px) {
  /* No ratio of its own: it fills the two rows its neighbours define. A
     square lead was taller than two 4:3 rows and left holes in the grid. */
  .mht-photogrid__item--lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}


/* ==========================================================================
   21. DIMENSION DIAGRAM
   Line drawing of the footprint and height. Tokens only: the shape is ink on
   surface, the dimension lines are muted, the figures are ink.
   ========================================================================== */

.mht-dims-toggle {
  margin: var(--mht-gap-5) 0 0;
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-md);
  background: var(--mht-surface-1);
}
.mht-dims-toggle > summary {
  padding: var(--mht-gap-4) var(--mht-gap-5);
  cursor: pointer;
  font-size: var(--mht-small);
  font-weight: 600;
  color: var(--mht-tide);
  list-style: none;
}
.mht-dims-toggle > summary::-webkit-details-marker { display: none; }
.mht-dims-toggle > summary::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  color: var(--mht-ember);
  font-weight: 700;
}
.mht-dims-toggle[open] > summary::before { content: "\2212"; }
.mht-dims-toggle > summary:hover { color: var(--mht-ink); }

.mht-dims { margin: 0; padding: 0 var(--mht-gap-5) var(--mht-gap-5); }
.mht-dims__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mht-gap-4);
}
.mht-dims__view { text-align: center; }
.mht-dims__view svg { width: 100%; height: auto; max-width: 240px; display: block; margin: 0 auto; }
.mht-dims__label {
  display: block;
  margin-bottom: var(--mht-gap-2);
  font-size: var(--mht-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mht-muted);
}
.mht-dims__shape  { fill: var(--mht-white); stroke: var(--mht-ink); stroke-width: 2; }
.mht-dims__inner  { fill: var(--mht-surface-2); stroke: var(--mht-border-2); stroke-width: 1; }
.mht-dims__lip    { fill: var(--mht-ink); }
.mht-dims__ground { stroke: var(--mht-border-2); stroke-width: 1; }
.mht-dims__dim    { stroke: var(--mht-muted); stroke-width: 1; }
.mht-dims__num {
  font-family: var(--mht-body);
  font-size: 13px;
  font-weight: 600;
  fill: var(--mht-ink);
  font-variant-numeric: tabular-nums;
}
.mht-dims__cap {
  margin-top: var(--mht-gap-4);
  font-size: var(--mht-small);
  font-weight: 600;
  color: var(--mht-ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mht-dims__metric { display: block; font-weight: 400; color: var(--mht-muted); }
.mht-dims__note   { display: block; font-weight: 400; color: var(--mht-muted); font-size: var(--mht-micro); margin-top: 4px; }


/* ==========================================================================
   22. COMPARE BLOCK
   Four columns, image over the top, four differentiators below.
   ========================================================================== */

.mht-compare {
  display: grid;
  gap: var(--mht-gap-6);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--mht-gap-8);
}
@media (min-width: 900px) { .mht-compare { grid-template-columns: repeat(4, 1fr); } }

.mht-compare__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mht-gap-3);
  padding: var(--mht-gap-5);
  background: var(--mht-white);
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-card);
}
.mht-compare__col--current { border-color: var(--mht-ember); border-width: 2px; }
.mht-compare__tag {
  position: absolute;
  top: var(--mht-gap-4);
  left: var(--mht-gap-4);
  padding: 3px 9px;
  border-radius: var(--mht-r-pill);
  background: var(--mht-ember);
  color: var(--mht-ember-ink);
  font-size: var(--mht-micro);
  font-weight: 600;
}
.mht-compare__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--mht-r-md);
  overflow: hidden;
  background: var(--mht-surface-2);
}
.mht-compare__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mht-compare__media .mht-card__media--empty { height: 100%; }
.mht-compare__title {
  font-size: var(--mht-h4);
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}
.mht-compare__title a { color: var(--mht-ink); text-decoration: none; }
.mht-compare__title a:hover { color: var(--mht-tide); }

.mht-compare__specs { margin: var(--mht-gap-2) 0 auto; font-size: var(--mht-small); }
.mht-compare__specs > div {
  display: flex;
  justify-content: space-between;
  gap: var(--mht-gap-3);
  padding: var(--mht-gap-3) 0;
  border-top: 1px solid var(--mht-border);
}
.mht-compare__specs dt { color: var(--mht-muted); }
.mht-compare__specs dd { margin: 0; color: var(--mht-ink); text-align: right; font-variant-numeric: tabular-nums; }
.mht-compare__bandlabel { font-size: var(--mht-micro); color: var(--mht-muted); letter-spacing: 0; }
.mht-compare__col .mht-btn { margin-top: var(--mht-gap-3); align-self: flex-start; }

.mht-compare__foot {
  margin: var(--mht-gap-7) 0 0;
  text-align: center;
  font-size: var(--mht-small);
  color: var(--mht-muted);
}
.mht-compare__foot a { color: var(--mht-tide); font-weight: 600; text-decoration: none; }
.mht-compare__foot a:hover { color: var(--mht-ink); text-decoration: underline; }
.mht-compare__foot span { margin: 0 var(--mht-gap-3); }


/* ==========================================================================
   23. MEGA MENU, two levels
   Rail of tabs on the left, pane on the right that swaps on hover or focus.
   The panel sits on the warm surface rather than flat white, with a hairline
   and a soft shadow so it reads as a layer over the page instead of a hole
   punched in it.
   ========================================================================== */

.mht-nav__item--mega { position: static; }
.mht-nav__item--mega > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  opacity: .7;
  transition: transform var(--mht-t-fast) var(--mht-ease);
}
.mht-nav__item--mega.is-open > a::after { transform: translateY(0) rotate(225deg); }

.mht-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 70;
  background: var(--mht-surface-1);
  border-bottom: 1px solid var(--mht-border);
  box-shadow: 0 18px 40px -24px rgba(14, 28, 38, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--mht-t-base) var(--mht-ease),
              transform var(--mht-t-base) var(--mht-ease),
              visibility 0s linear var(--mht-t-base);
}
/* Open state is set by the script only (initMega): a short hover delay, a
   grace period on the way out, and click to pin. A bare :hover rule closed the
   panel the moment the pointer left the link on its way to the rail. Without
   JavaScript the link simply goes to /hot-tubs/. */
.mht-nav__item--mega.is-open > .mht-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* Everything inside the panel is body copy, not nav. Beat .mht-nav__list a. */
.mht-nav__list .mht-mega a,
.mht-nav__list .mht-mega button {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--mht-ink);
}

.mht-mega__inner {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 0;
  padding-top: var(--mht-gap-6);
  padding-bottom: var(--mht-gap-6);
  min-height: 400px;
}

/* Rail. Every item shares one padding box so nothing floats out of line. */
.mht-mega__rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: var(--mht-gap-6);
  border-right: 1px solid var(--mht-border);
}
.mht-mega__tab,
.mht-mega__all {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--mht-r-sm);
  background: none;
  font-family: var(--mht-body);
  font-size: var(--mht-body-sz);
  color: var(--mht-ink-2);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--mht-t-fast) var(--mht-ease), color var(--mht-t-fast) var(--mht-ease);
}
.mht-mega__tab:hover,
.mht-mega__tab:focus-visible,
.mht-mega__all:hover { background: var(--mht-surface-2); color: var(--mht-ink); outline: none; }
.mht-mega__tab[aria-selected="true"] {
  background: var(--mht-white);
  color: var(--mht-ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--mht-ink);
}
.mht-mega__tab--tool { margin-top: var(--mht-gap-4); }
.mht-nav__list .mht-mega__tab--tool { font-weight: 500; }
/* A proper button. As a muted text link it was the most-missed thing in the
   panel. The generic rail rules above are undone here so the button styles win. */
.mht-mega__all,
.mht-nav__list .mht-mega a.mht-mega__all {
  margin-top: auto;
  width: auto;
  align-self: flex-start;
  padding: 10px var(--mht-gap-6);
  border-radius: var(--mht-r-pill);
  background: var(--mht-ink);
  color: var(--mht-steam);
  font-size: var(--mht-small);
  font-weight: 600;
  text-align: center;
}
.mht-mega__all:hover,
.mht-nav__list .mht-mega a.mht-mega__all:hover { background: var(--mht-abyss); color: var(--mht-steam); }
.mht-mega__all::after { content: " \2192"; }

/* The nav's link rule (padding 0 on the sides) out-ranks .mht-btn, so any
   button inside the panel lost its side padding and hugged its text. */
.mht-nav__list .mht-mega a.mht-btn { padding: 11px var(--mht-gap-6); }
.mht-nav__list .mht-mega a.mht-btn--sm { padding: 9px var(--mht-gap-5); }

/* Brand pane lede with the compare button beside it. */
.mht-mega__lede--row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mht-gap-4) var(--mht-gap-6); }
.mht-nav__list .mht-mega .mht-mega__lede--row a.mht-btn { color: var(--mht-ink); font-weight: 600; }
.mht-nav__list .mht-mega .mht-mega__lede--row a.mht-btn:hover { text-decoration: none; }

/* Panes */
.mht-mega__panes { padding: 0 0 0 var(--mht-gap-8); min-width: 0; }
.mht-mega__pane[hidden] { display: none; }
.mht-mega__lede { font-size: var(--mht-small); color: var(--mht-muted); max-width: 54ch; margin: 6px 0 var(--mht-gap-6); }
.mht-mega__foot { margin: var(--mht-gap-6) 0 0; font-size: var(--mht-small); }
.mht-mega__foot a { text-decoration: underline; text-underline-offset: .2em; }

/* Panes fade their content in on activation, staggered, so switching tabs
   reads as a change of state rather than a hard swap. */
@media (prefers-reduced-motion: no-preference) {
  .mht-mega__pane.is-active > * { animation: mht-mega-in var(--mht-t-slow) var(--mht-ease) both; }
  .mht-mega__pane.is-active > *:nth-child(2) { animation-delay: .04s; }
  .mht-mega__pane.is-active > *:nth-child(3) { animation-delay: .08s; }
}
@keyframes mht-mega-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Shop by size. Image over a number, not a bare tile. */
/* Size pane: tile cards on the left, the showroom invitation on the right.
   The earlier pane floated small cut-outs on a flat tint and left half the
   panel empty, which is why it never read as a mega menu. */
.mht-mega__pane--size { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mht-gap-7); align-items: stretch; }
@media (min-width: 1180px) { .mht-mega__pane--size { grid-template-columns: minmax(0, 1fr) 300px; } }
.mht-mega__pane--size.is-active > * { animation: none; }
.mht-mega__main { min-width: 0; }

.mht-megasizes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mht-gap-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.mht-megasizes li { margin: 0; min-width: 0; }
.mht-megasize {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: var(--mht-white);
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-card);
  overflow: hidden;
  transition: border-color var(--mht-t-fast) var(--mht-ease), box-shadow var(--mht-t-base) var(--mht-ease), transform var(--mht-t-base) var(--mht-ease);
}
.mht-megasize:hover,
.mht-megasize:focus-visible { border-color: var(--mht-ember); box-shadow: 0 10px 24px -14px rgba(14, 28, 38, .45); transform: translateY(-2px); outline: none; }
.mht-megasize__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mht-surface-2);
}
.mht-megasize__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Multiply lets a white-ground photo sit on the tint like the cut-outs do.
     The 9 person tile has no transparent source. */
  mix-blend-mode: multiply;
  transition: transform var(--mht-t-slow) var(--mht-ease);
}
.mht-megasize:hover .mht-megasize__media img { transform: scale(1.05); }
.mht-megasize__text { display: block; padding: var(--mht-gap-4) var(--mht-gap-5) var(--mht-gap-5); }
.mht-megasize__n {
  display: block;
  font-family: var(--mht-display);
  font-size: var(--mht-h4);
  line-height: 1;
  color: var(--mht-ink);
}
.mht-megasize__n span {
  font-family: var(--mht-body);
  font-size: var(--mht-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mht-muted);
  margin-left: 4px;
}
.mht-megasize__suits { display: block; margin-top: 6px; font-size: var(--mht-small); line-height: 1.3; color: var(--mht-ink-2); }

/* The invitation card. Photograph, scrim, three lines. */
.mht-megapromo {
  position: relative;
  display: none;
  min-height: 100%;
  border-radius: var(--mht-r-card);
  overflow: hidden;
  background: var(--mht-abyss);
  color: var(--mht-steam);
  text-decoration: none;
}
@media (min-width: 1180px) { .mht-megapromo { display: block; } }
.mht-megapromo__media { position: absolute; inset: 0; display: block; }
.mht-megapromo__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--mht-t-slow) var(--mht-ease); }
.mht-megapromo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 28, 38, .92) 0%, rgba(14, 28, 38, .55) 45%, rgba(14, 28, 38, .1) 80%); pointer-events: none; }
.mht-megapromo__body { position: absolute; z-index: 1; left: var(--mht-gap-6); right: var(--mht-gap-6); bottom: var(--mht-gap-6); display: block; }
.mht-megapromo__eyebrow { display: block; font-size: var(--mht-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mht-mist); }
.mht-megapromo__title { display: block; margin-top: var(--mht-gap-3); font-family: var(--mht-display); font-weight: var(--mht-wt-display); font-size: 1.5rem; line-height: 1.12; color: var(--mht-steam); }
.mht-megapromo__cta { display: inline-block; margin-top: var(--mht-gap-5); font-size: var(--mht-small); font-weight: 600; color: var(--mht-steam); border-bottom: 1px solid rgba(255, 255, 255, .55); padding-bottom: 2px; }
.mht-megapromo__cta::after { content: " \2192"; }
.mht-megapromo:hover .mht-megapromo__media img { transform: scale(1.04); }
.mht-megapromo:focus-visible { outline: 2px solid var(--mht-steam); outline-offset: -4px; }

/* Shop by brand. No boxes. A hairline under the image, nothing more. */
.mht-mega__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mht-gap-6); max-width: 880px; }
.mht-mega__card { display: block; text-decoration: none; }
.mht-mega__card-media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--mht-deep);
  border-radius: var(--mht-r-md);
  overflow: hidden;
  transition: background-color var(--mht-t-base) var(--mht-ease);
}
/* Brand cards carry lifestyle photography, so these fill the frame. The
   product-tile treatment (contain on tint) is for the size and budget panes,
   where the subject is a cut-out. */
.mht-mega__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--mht-t-slow) var(--mht-ease);
}
.mht-mega__card:hover .mht-mega__card-media { background: var(--mht-deep); }
.mht-mega__card:hover .mht-mega__card-media img { transform: scale(1.05); }
.mht-mega__card-title { display: block; margin-top: var(--mht-gap-4); font-family: var(--mht-display); font-size: var(--mht-h3); line-height: 1.1; }
.mht-mega__card-text { display: block; margin-top: 4px; font-size: var(--mht-small); color: var(--mht-ink-2); max-width: 34ch; }
.mht-mega__card:hover .mht-mega__card-title { text-decoration: underline; text-underline-offset: .15em; }

/* Shop by budget */
/* Budget pane. Three across and two rows: five bands, and the price guide
   takes the sixth cell. Five across left each card too thin to read. Cards
   run horizontally so two rows stay short. */
.mht-mega__bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mht-gap-4); max-width: 1080px; }
@media (max-width: 1099px) { .mht-mega__bands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mht-mega__band {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: stretch;
  text-decoration: none;
  background: var(--mht-white);
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-card);
  overflow: hidden;
  transition: border-color var(--mht-t-fast) var(--mht-ease), box-shadow var(--mht-t-base) var(--mht-ease), transform var(--mht-t-base) var(--mht-ease);
}
.mht-mega__band:hover,
.mht-mega__band:focus-visible { border-color: var(--mht-ember); box-shadow: 0 10px 24px -14px rgba(14, 28, 38, .45); transform: translateY(-2px); outline: none; }
.mht-mega__band-media { display: block; background: var(--mht-surface-2); overflow: hidden; min-height: 112px; }
.mht-mega__band-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10%;
  display: block;
  mix-blend-mode: multiply;
  transition: transform var(--mht-t-slow) var(--mht-ease);
}
.mht-mega__band:hover .mht-mega__band-media img { transform: scale(1.06); }
.mht-mega__band-text { display: block; padding: var(--mht-gap-4) var(--mht-gap-5); align-self: center; }
.mht-mega__band .mht-band { display: block; margin: 0 0 2px; font-size: 1.05rem; letter-spacing: .04em; }
/* The spent portion steps up on hover, so the band reads as a level rather
   than a label. */
.mht-mega__band .mht-band__spent { transition: color var(--mht-t-base) var(--mht-ease); }
.mht-mega__band:hover .mht-band__spent { color: var(--mht-ink); }
.mht-mega__band-label { display: block; font-weight: 600; font-size: var(--mht-small); color: var(--mht-ink); }
.mht-mega__band-range { font-weight: 400; color: var(--mht-muted); font-variant-numeric: tabular-nums; margin-left: 6px; }
.mht-mega__band-what { display: block; margin-top: 4px; font-size: var(--mht-micro); line-height: 1.4; color: var(--mht-ink-2); }

/* Invitation card without a photograph. As the sixth cell of the budget grid
   it is always shown and sized by the grid. */
.mht-megapromo--text { background: var(--mht-abyss); }
.mht-megapromo--text::after { display: none; }
/* The logo mark as a watermark: steam over ripples, cropped off the corner.
   Decoration only, so it lives in CSS and stays out of the accessibility tree. */
.mht-megapromo--text::before {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 210px;
  height: 210px;
  background: url("../img/logo/muskoka-mark-white.svg") no-repeat center / contain;
  opacity: .1;
  pointer-events: none;
  transition: opacity var(--mht-t-base) var(--mht-ease), transform var(--mht-t-slow) var(--mht-ease);
}
.mht-megapromo--text:hover::before { opacity: .16; transform: translateY(-4px); }
.mht-megapromo--text .mht-megapromo__body { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .mht-megapromo--text:hover::before { transform: none; } }
.mht-mega__bands .mht-megapromo { display: flex; align-items: center; min-height: 112px; }
.mht-mega__bands .mht-megapromo__body { position: relative; z-index: 1; inset: auto; padding: var(--mht-gap-5) var(--mht-gap-6); }
.mht-mega__bands .mht-megapromo__title { margin-top: 0; font-size: 1.2rem; }
.mht-mega__bands .mht-megapromo__cta { margin-top: var(--mht-gap-4); }
.mht-megapromo--text:hover { background: var(--mht-ink); }

/* Dollar signs fill left to right when the pane opens. */
@media (prefers-reduced-motion: no-preference) {
  .mht-mega__pane.is-active .mht-band__spent { animation: mht-band-in var(--mht-t-slow) var(--mht-ease) both; }
  .mht-mega__band:nth-child(2) .mht-band__spent { animation-delay: .05s; }
  .mht-mega__band:nth-child(3) .mht-band__spent { animation-delay: .10s; }
  .mht-mega__band:nth-child(4) .mht-band__spent { animation-delay: .15s; }
  .mht-mega__band:nth-child(5) .mht-band__spent { animation-delay: .20s; }
}
@keyframes mht-band-in { from { opacity: .25; letter-spacing: -.12em; } to { opacity: 1; letter-spacing: .04em; } }

/* Which size is right for me. Copy left, photograph filling the right. */
.mht-mega__pane--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 44%);
  gap: var(--mht-gap-8);
  align-items: stretch;
  /* Cancel the pane's own animation on the grid children so the photograph
     does not slide; it fades with the pane instead. */
  min-height: 340px;
}
.mht-mega__pane--split.is-active > * { animation: none; }
.mht-fit { max-width: 480px; padding-top: 4px; }
.mht-fit__q { font-weight: 600; margin: 0 0 var(--mht-gap-3); }
.mht-fit__opts { display: flex; flex-wrap: wrap; gap: var(--mht-gap-3); margin-bottom: var(--mht-gap-6); }
.mht-fit__opt {
  min-width: 50px;
  padding: 11px 15px;
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-md);
  background: var(--mht-white);
  font-family: var(--mht-body);
  font-size: var(--mht-body-sz);
  cursor: pointer;
  transition: border-color var(--mht-t-fast) var(--mht-ease),
              background-color var(--mht-t-fast) var(--mht-ease),
              transform var(--mht-t-fast) var(--mht-ease);
}
.mht-fit__opt:hover { border-color: var(--mht-ink); transform: translateY(-1px); }
.mht-nav__list .mht-fit__opt[aria-pressed="true"] { background: var(--mht-ink); color: var(--mht-white); border-color: var(--mht-ink); }
.mht-fit__answer { margin: 0; min-height: 132px; }
.mht-fit__hint { margin: 0; padding: var(--mht-gap-5) var(--mht-gap-6); font-size: var(--mht-small); color: var(--mht-muted); border: 1px dashed var(--mht-border-2); border-radius: var(--mht-r-card); }
/* The answer is a card, not a sentence: the tub, the size, who it suits, why,
   and one button. */
.mht-fit__result {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  background: var(--mht-white);
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-card);
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) { .mht-fit__result { animation: mht-mega-in var(--mht-t-slow) var(--mht-ease) both; } }
.mht-fit__result-media { display: block; background: var(--mht-surface-2); }
.mht-fit__result-media img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.mht-fit__result-body { display: block; padding: var(--mht-gap-5) var(--mht-gap-6); }
.mht-fit__result-eyebrow { display: block; font-size: var(--mht-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mht-muted); }
.mht-fit__result-title { display: block; margin-top: 2px; font-family: var(--mht-display); font-weight: var(--mht-wt-display); font-size: 1.7rem; line-height: 1.1; color: var(--mht-ink); }
.mht-fit__result-suits { display: block; font-size: var(--mht-small); font-weight: 600; color: var(--mht-ink-2); }
/* The panel resets every link to body copy to beat the nav styles. A button
   inside the result card has to win that back or its label is ink on ink. */
.mht-nav__list .mht-mega .mht-fit__result a.mht-btn--primary { color: var(--mht-ember-ink); font-weight: 600; padding-left: var(--mht-gap-6); padding-right: var(--mht-gap-6); }
.mht-fit__result-why { display: block; margin: var(--mht-gap-3) 0 var(--mht-gap-4); font-size: var(--mht-small); line-height: 1.45; color: var(--mht-muted); }
.mht-fit__media {
  display: block;
  align-self: stretch;
  border-radius: var(--mht-r-card);
  overflow: hidden;
  background: var(--mht-surface-2);
  margin: 0 0 var(--mht-gap-2);
}
.mht-fit__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1099px) {
  .mht-mega__inner { grid-template-columns: 200px minmax(0, 1fr); }
  .mht-megasizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mht-mega__pane--split { grid-template-columns: minmax(0, 1fr); }
  .mht-fit__media { display: none; }
}
@media (max-width: 899px) { .mht-mega { display: none; } .mht-nav__item--mega > a::after { display: none; } }

.mht-header { position: sticky; }
.home .mht-header.is-scrolled { background: var(--mht-abyss); }


/* ==========================================================================
   24. PRIMARY ACTION ON DARK GROUNDS
   The primary fill is near-navy, which disappears on a dark photograph. On
   any dark ground it inverts: a light gradient, steam into mist, sliding the
   same way and the same distance.
   ========================================================================== */

.mht-hero--bleed .mht-btn--primary,
.mht-hero--video .mht-btn--primary,
.mht-band--overlay .mht-btn--primary,
.mht-section--dark .mht-btn--primary,
.mht-footer .mht-btn--primary {
  background-image: linear-gradient(135deg,
    var(--mht-steam) 0%,
    var(--mht-steam) 36%,
    var(--mht-mist) 74%,
    var(--mht-mist) 100%);
  background-size: 180% 180%;
  background-position: 0% 50%;
  background-color: var(--mht-steam);
  color: var(--mht-abyss);
}
.mht-hero--bleed .mht-btn--primary:hover,
.mht-hero--video .mht-btn--primary:hover,
.mht-band--overlay .mht-btn--primary:hover,
.mht-section--dark .mht-btn--primary:hover,
.mht-footer .mht-btn--primary:hover {
  background-position: 100% 50%;
  color: var(--mht-abyss);
}

/* ==========================================================================
   BRAND MARK AS A WATERMARK (decision 86)
   Steam over ripples, white, faint, always cropped by an edge and never
   centred. Two places beyond the mega menu card: the navy head of a page and
   the footer. They are a full page apart, so never on screen together. The
   light call to action above the footer is left plain on purpose.
   ========================================================================== */
.mht-main > .mht-section--dark:first-child,
.mht-footer { position: relative; overflow: hidden; }
.mht-main > .mht-section--dark:first-child::after,
.mht-footer::after {
  content: "";
  position: absolute;
  background: url("../img/logo/muskoka-mark-white.svg") no-repeat center / contain;
  pointer-events: none;
}
.mht-main > .mht-section--dark:first-child::after { right: -60px; bottom: -110px; width: 420px; height: 420px; opacity: .07; }
.mht-footer::after { right: -40px; top: -70px; width: 340px; height: 340px; opacity: .06; }
.mht-main > .mht-section--dark:first-child > *,
.mht-footer > * { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .mht-main > .mht-section--dark:first-child::after { width: 260px; height: 260px; right: -50px; bottom: -80px; }
  .mht-footer::after { width: 220px; height: 220px; }
}

/* ==========================================================================
   BRANDS PAGE AND THE FOOTER DEALER STRIP (decision 88)
   ========================================================================== */
.mht-brands { display: grid; gap: var(--mht-gap-7); }
@media (min-width: 1000px) { .mht-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mht-gap-6); } }
.mht-brand { display: flex; flex-direction: column; background: var(--mht-white); border: 1px solid var(--mht-border); border-radius: var(--mht-r-card); overflow: hidden; }
.mht-brand__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mht-surface-2); }
.mht-brand__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mht-brand__body { display: flex; flex-direction: column; flex: 1; padding: var(--mht-gap-7) var(--mht-gap-6) var(--mht-gap-6); }
.mht-brand__body > p:last-child { margin: auto 0 0; padding-top: var(--mht-gap-5); }
.mht-brand__logo { height: 44px; margin-bottom: var(--mht-gap-5); }
.mht-brand__logo img { height: 100%; width: auto; max-width: 200px; object-fit: contain; object-position: left center; display: block; }
.mht-brand__name { margin: 0 0 var(--mht-gap-4); font-size: var(--mht-h3); }
.mht-brand__pick { font-weight: 600; color: var(--mht-ink); }
.mht-brands__tablewrap { overflow-x: auto; margin-top: var(--mht-gap-7); background: var(--mht-white); border: 1px solid var(--mht-border); border-radius: var(--mht-r-card); }
.mht-brands__table { min-width: 680px; margin: 0; }
.mht-brands__table thead th { font-family: var(--mht-display); font-weight: var(--mht-wt-display); font-size: var(--mht-h4); color: var(--mht-ink); text-align: left; }

.mht-footer__dealers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mht-gap-5) var(--mht-gap-7);
  padding: var(--mht-gap-6) 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.mht-footer__dealerlist { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mht-gap-4) var(--mht-gap-7); list-style: none; margin: 0; padding: 0; }
.mht-footer__dealerlist a { display: block; font-family: var(--mht-display); font-size: 1.15rem; color: var(--mht-steam); text-decoration: none; opacity: .85; transition: opacity var(--mht-t-fast) var(--mht-ease); }
.mht-footer__dealerlist a:hover { opacity: 1; }
.mht-footer__dealerlist img { height: 30px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.mht-footer__dealermore { margin-left: auto; font-size: var(--mht-small); color: var(--mht-mist); text-decoration: underline; text-underline-offset: 4px; }
.mht-footer__dealermore:hover { color: var(--mht-steam); }
@media (max-width: 700px) { .mht-footer__dealermore { margin-left: 0; } }

/* ==========================================================================
   CONTACT PAGE (decision 89)
   Form and the ways to reach us side by side; what happens next; a map.
   ========================================================================== */
.mht-contact2 { display: grid; gap: var(--mht-gap-8); }
@media (min-width: 960px) {
  .mht-contact2 { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: var(--mht-gap-9); align-items: start; }
  .mht-contact2__main { order: 1; }
  .mht-contact2__aside { order: 2; position: sticky; top: 96px; }
}
.mht-contact2__title { margin-bottom: var(--mht-gap-4); }
.mht-contact2__lede { max-width: 56ch; margin-bottom: var(--mht-gap-7); color: var(--mht-ink-2); }

.mht-reach { background: var(--mht-abyss); color: var(--mht-mist); border-radius: var(--mht-r-card); overflow: hidden; }
.mht-reach__media { aspect-ratio: 16 / 9; overflow: hidden; }
.mht-reach__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mht-reach__body { padding: var(--mht-gap-7) var(--mht-gap-6); }
.mht-reach__label { margin: var(--mht-gap-6) 0 var(--mht-gap-2); font-size: var(--mht-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mht-mist); opacity: .8; }
.mht-reach__label:first-child { margin-top: 0; }
.mht-reach__phone { margin: 0; font-family: var(--mht-display); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); line-height: 1.1; }
.mht-reach__line { margin: 0; font-style: normal; font-size: var(--mht-lead); line-height: 1.4; color: var(--mht-steam); overflow-wrap: anywhere; }
.mht-reach a { color: var(--mht-steam); text-decoration: none; }
.mht-reach a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mht-reach__hours { margin-top: var(--mht-gap-4); font-size: var(--mht-small); }
.mht-reach__hours p { margin: 0; }
.mht-reach__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mht-gap-5); margin: var(--mht-gap-7) 0 0; }
.mht-reach .mht-btn--secondary { color: var(--mht-ink); }
.mht-reach .mht-btn--secondary:hover { text-decoration: none; }
.mht-reach a.mht-reach__more { font-size: var(--mht-small); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.mht-nextsteps { display: grid; gap: var(--mht-gap-6); list-style: none; margin: var(--mht-gap-8) 0 0; padding: 0; counter-reset: none; }
@media (min-width: 700px)  { .mht-nextsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mht-nextsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mht-nextstep { margin: 0; padding-top: var(--mht-gap-5); border-top: 2px solid var(--mht-ink); }
.mht-nextstep__n { display: block; font-family: var(--mht-display); font-size: 2.2rem; line-height: 1; color: var(--mht-ink); }
.mht-nextstep__title { margin: var(--mht-gap-4) 0 var(--mht-gap-3); font-size: var(--mht-h4); }
.mht-nextstep p { margin: 0; font-size: var(--mht-small); line-height: 1.55; color: var(--mht-ink-2); }

.mht-mapband { line-height: 0; background: var(--mht-surface-2); }
.mht-mapband iframe { display: block; width: 100%; height: clamp(300px, 38vw, 460px); border: 0; filter: grayscale(.35) contrast(1.02); }

/* ==========================================================================
   SHOWROOM PAGE (decision 90)
   ========================================================================== */
/* The facts someone needs to set off, on a card that overlaps the navy head. */
.mht-visit-head { padding-bottom: calc(var(--mht-gap-9) + 56px); }
.mht-visitbar {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--mht-gap-6);
  margin-top: -56px;
  padding: var(--mht-gap-7) var(--mht-gap-6);
  background: var(--mht-white);
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-card);
  box-shadow: 0 18px 40px -28px rgba(14, 28, 38, .55);
}
@media (min-width: 700px)  { .mht-visitbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mht-visitbar { grid-template-columns: 1.2fr 1.2fr 1fr auto; align-items: center; padding: var(--mht-gap-7) var(--mht-gap-8); } }
.mht-visitbar__label { display: block; margin-bottom: var(--mht-gap-2); font-size: var(--mht-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mht-muted); }
.mht-visitbar__value { display: block; font-style: normal; font-size: var(--mht-body-sz); line-height: 1.45; font-weight: 600; color: var(--mht-ink); }
.mht-visitbar__phone { font-family: var(--mht-display); font-weight: var(--mht-wt-display); font-size: var(--mht-h3); line-height: 1.1; text-decoration: none; }
.mht-visitbar__phone:hover { color: var(--mht-tide); }

.mht-visit-split { display: grid; gap: var(--mht-gap-8); align-items: start; }
@media (min-width: 960px) { .mht-visit-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mht-gap-9); } }
.mht-visit-split__media { border-radius: var(--mht-r-card); overflow: hidden; background: var(--mht-surface-2); aspect-ratio: 4 / 3; }
.mht-visit-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 960px) { .mht-visit-split__media { position: sticky; top: 96px; } }
/* Short titled points beside a photo. Ruled rows, no boxes and no side
   bars; on hover the rule runs across and the title shifts. Same behaviour
   as the ledger rows below. */
.mht-expect { list-style: none; margin: var(--mht-gap-7) 0 0; padding: 0; border-bottom: 1px solid var(--mht-border); }
.mht-expect li { position: relative; margin: 0; padding: var(--mht-gap-6) 0; border-top: 1px solid var(--mht-border); }
.mht-expect li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--mht-ink); transition: width var(--mht-t-slow) var(--mht-ease); }
.mht-expect li:hover::before { width: 100%; }
.mht-expect h3 { margin: 0 0 var(--mht-gap-3); font-size: var(--mht-h4); transition: transform var(--mht-t-base) var(--mht-ease); }
.mht-expect li:hover h3 { transform: translateX(6px); }
.mht-expect p { margin: 0; color: var(--mht-ink-2); max-width: 52ch; }

.mht-findus { display: grid; gap: var(--mht-gap-5); margin-top: var(--mht-gap-7); }
@media (min-width: 900px) { .mht-findus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mht-findus__photo, .mht-findus__map { margin: 0; border-radius: var(--mht-r-card); overflow: hidden; background: var(--mht-surface-2); aspect-ratio: 4 / 3; line-height: 0; }
.mht-findus__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mht-findus__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35) contrast(1.02); }

/* ==========================================================================
   BACKYARD PAGE (decision 92)
   Grass swatches, nothing to click into.
   ========================================================================== */
.mht-swatches { display: grid; gap: var(--mht-gap-5); list-style: none; margin: var(--mht-gap-8) 0 0; padding: 0; }
@media (min-width: 640px)  { .mht-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mht-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mht-swatch { display: flex; flex-direction: column; margin: 0; background: var(--mht-white); border: 1px solid var(--mht-border); border-radius: var(--mht-r-card); overflow: hidden; }
.mht-swatch__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mht-surface-2); }
.mht-swatch__media { background: var(--mht-white); }
.mht-swatch__media img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform var(--mht-t-slow) var(--mht-ease); }
.mht-swatch:hover .mht-swatch__media img { transform: scale(1.05); }
.mht-swatch { transition: border-color var(--mht-t-base) var(--mht-ease), box-shadow var(--mht-t-base) var(--mht-ease); }
.mht-swatch:hover { border-color: var(--mht-ember); box-shadow: 0 14px 30px -20px rgba(14, 28, 38, .45); }
.mht-swatch__body { display: flex; flex-direction: column; flex: 1; padding: var(--mht-gap-5) var(--mht-gap-5) var(--mht-gap-6); }
.mht-swatch__coll { margin: 0 0 var(--mht-gap-2); font-size: var(--mht-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mht-muted); }
.mht-swatch__name { margin: 0 0 var(--mht-gap-3); font-size: var(--mht-h4); }
.mht-swatch__desc { margin: 0 0 var(--mht-gap-5); font-size: var(--mht-small); line-height: 1.5; color: var(--mht-ink-2); }
.mht-swatch__specs { display: grid; grid-template-columns: auto auto 1fr; gap: var(--mht-gap-4); margin: auto 0 0; padding-top: var(--mht-gap-4); border-top: 1px solid var(--mht-border); }
.mht-swatch__specs div { min-width: 0; }
.mht-swatch__specs dt { font-size: var(--mht-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--mht-muted); }
.mht-swatch__specs dd { margin: 2px 0 0; font-size: var(--mht-small); font-weight: 600; color: var(--mht-ink); line-height: 1.3; }

.mht-why { display: grid; gap: var(--mht-gap-8); align-items: start; }
@media (min-width: 960px) { .mht-why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mht-gap-9); } }
.mht-why__media { display: grid; gap: var(--mht-gap-5); }
.mht-why__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: var(--mht-r-card); }
@media (min-width: 960px) { .mht-why { align-items: center; } }
@media (min-width: 960px) { .mht-why__media { position: sticky; top: 96px; } }

/* Range heading with the AGL mark on the right. */
.mht-rangehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--mht-gap-6); }
.mht-rangehead__logo { display: block; flex: 0 0 auto; }
.mht-rangehead__logo img { height: 84px; width: auto; display: block; }
@media (max-width: 700px) { .mht-rangehead__logo img { height: 64px; } }

/* Numbered points that lift on hover. Replaces the flat left-border list. */
.mht-points { display: grid; gap: var(--mht-gap-4); list-style: none; margin: var(--mht-gap-7) 0 0; padding: 0; }
.mht-point {
  position: relative;
  margin: 0;
  padding: var(--mht-gap-6) var(--mht-gap-6) var(--mht-gap-6) 72px;
  background: var(--mht-white);
  border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-card);
  overflow: hidden;
  transition: border-color var(--mht-t-base) var(--mht-ease), box-shadow var(--mht-t-base) var(--mht-ease), transform var(--mht-t-base) var(--mht-ease);
}
.mht-point::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--mht-ink); transform: scaleY(0); transform-origin: top;
  transition: transform var(--mht-t-slow) var(--mht-ease);
}
.mht-point:hover { border-color: var(--mht-ember); box-shadow: 0 14px 30px -18px rgba(14, 28, 38, .45); transform: translateY(-3px); }
.mht-point:hover::before { transform: scaleY(1); }
.mht-point__n {
  position: absolute; left: var(--mht-gap-6); top: var(--mht-gap-6);
  font-family: var(--mht-display); font-size: 1.6rem; line-height: 1; color: var(--mht-muted);
  transition: color var(--mht-t-base) var(--mht-ease), transform var(--mht-t-base) var(--mht-ease);
}
.mht-point:hover .mht-point__n { color: var(--mht-ink); transform: translateX(3px); }
.mht-point__title { margin: 0 0 var(--mht-gap-3); font-size: var(--mht-h4); }
.mht-point__text { margin: 0; font-size: var(--mht-small); line-height: 1.55; color: var(--mht-ink-2); }
@media (prefers-reduced-motion: reduce) { .mht-point, .mht-point::before, .mht-point__n { transition: none; } .mht-point:hover { transform: none; } }

/* A partner mark above a band's eyebrow. */
.mht-band__logo { margin-bottom: var(--mht-gap-5); }
.mht-band__logo img { height: 44px; width: auto; display: block; }

/* ==========================================================================
   LEDGER, RAIL, FAQ SPACING, BAND SPACING (decision 94)
   ========================================================================== */
.mht-ledger { display: grid; gap: var(--mht-gap-7); }
@media (min-width: 960px) {
  .mht-ledger { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mht-gap-9); align-items: start; }
  .mht-ledger__head { position: sticky; top: 110px; }
}
.mht-ledger__title { margin: 0; }
.mht-ledger__rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--mht-border); }
.mht-ledger__row { position: relative; display: grid; gap: var(--mht-gap-3); margin: 0; padding: var(--mht-gap-7) 0; border-top: 1px solid var(--mht-border); }
@media (min-width: 700px) { .mht-ledger__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mht-gap-7); } }
.mht-ledger__row::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--mht-ink); transition: width var(--mht-t-slow) var(--mht-ease); }
.mht-ledger__row:hover::before { width: 100%; }
.mht-ledger__rtitle { margin: 0; font-size: var(--mht-h4); line-height: 1.25; transition: transform var(--mht-t-base) var(--mht-ease); }
.mht-ledger__row:hover .mht-ledger__rtitle { transform: translateX(6px); }
.mht-ledger__rtext { margin: 0; color: var(--mht-ink-2); line-height: 1.6; }

/* Rail */
.mht-rail { position: relative; list-style: none; margin: var(--mht-gap-8) 0 0; padding: 0; display: grid; gap: var(--mht-gap-7); }
.mht-rail::before, .mht-rail::after { content: ""; position: absolute; background: var(--mht-border-2, var(--mht-border)); }
.mht-rail::after { background: var(--mht-ink); transition: transform 1.6s var(--mht-ease); }
.mht-rail__step { position: relative; margin: 0; }
.mht-rail__node { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--mht-white); border: 2px solid var(--mht-border-2, #b9b2a6); transition: background-color .3s var(--mht-ease), border-color .3s var(--mht-ease), transform .3s var(--mht-ease); transition-delay: calc(var(--i) * .38s + .1s); z-index: 1; }
.mht-rail__title { margin: 0 0 var(--mht-gap-3); font-size: var(--mht-h4); color: var(--mht-muted); transition: color .3s var(--mht-ease); transition-delay: calc(var(--i) * .38s + .1s); }
.mht-rail__line { margin: 0; font-size: var(--mht-small); line-height: 1.55; color: var(--mht-ink-2); max-width: 34ch; }
.mht-rail.is-lit .mht-rail__node { background: var(--mht-ink); border-color: var(--mht-ink); transform: scale(1.15); }
.mht-rail.is-lit .mht-rail__title { color: var(--mht-ink); }
/* Phone: down the left edge */
.mht-rail { padding-left: 34px; }
.mht-rail::before, .mht-rail::after { left: 6px; top: 6px; bottom: 6px; width: 2px; }
.mht-rail::after { transform-origin: top; transform: scaleY(0); }
.mht-rail.is-lit::after { transform: scaleY(1); }
.mht-rail__node { left: -34px; top: 6px; }
@media (min-width: 900px) {
  .mht-rail { padding-left: 0; padding-top: 40px; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--mht-gap-7); }
  .mht-rail::before, .mht-rail::after { left: 6px; right: 6px; top: 6px; bottom: auto; width: auto; height: 2px; }
  .mht-rail::after { transform-origin: left; transform: scaleX(0); }
  .mht-rail.is-lit::after { transform: scaleX(1); }
  .mht-rail__node { left: 0; top: -40px; }
}
.mht-rail__note { margin-top: var(--mht-gap-8); }
@media (prefers-reduced-motion: reduce) {
  .mht-rail::after, .mht-rail__node, .mht-rail__title { transition: none; }
}

/* FAQ: one column as before, with room to breathe. The heading sits clear
   of the list and each question has more padding. */
.mht-faq { margin-top: var(--mht-gap-8); }
.mht-faq__title { margin: 0 0 var(--mht-gap-7); }
.mht-faq__q { padding-top: var(--mht-gap-6); padding-bottom: var(--mht-gap-6); }
.mht-faq__a-content { padding-bottom: var(--mht-gap-6); }

/* Split band: room between the parts. */
.mht-band__copy .mht-eyebrow { margin-bottom: var(--mht-gap-5); }
.mht-band__copy h2 { margin: 0 0 var(--mht-gap-6); }
.mht-band__copy .lede { margin: 0 0 var(--mht-gap-7); }
.mht-band__logo { margin-bottom: var(--mht-gap-7); }

/* ==========================================================================
   DECISION 95: rail motion, accordion with bylines, about pieces,
   the three numbers, footprint check
   ========================================================================== */
/* Rail: steps rise in as the line reaches them; hover lifts a step. */
.mht-rail__step { opacity: .35; transform: translateY(10px); transition: opacity .5s var(--mht-ease), transform .5s var(--mht-ease); transition-delay: calc(var(--i) * .38s + .1s); }
.mht-rail.is-lit .mht-rail__step { opacity: 1; transform: none; }
.mht-rail__step::after { content: ""; position: absolute; inset: -14px -14px -14px -14px; border-radius: var(--mht-r-card); background: var(--mht-white); box-shadow: 0 14px 30px -22px rgba(14, 28, 38, .45); opacity: 0; transition: opacity var(--mht-t-base) var(--mht-ease); z-index: -1; }
.mht-rail__step:hover::after { opacity: 1; }
.mht-rail__step { z-index: 0; }
.mht-rail__step:hover .mht-rail__node { transform: scale(1.5); background: var(--mht-ink); border-color: var(--mht-ink); transition-delay: 0s; }
.mht-rail__step:hover .mht-rail__title { color: var(--mht-ink); transition-delay: 0s; }
.mht-section--tint .mht-rail__step::after { background: var(--mht-white); }
@media (prefers-reduced-motion: reduce) { .mht-rail__step { opacity: 1; transform: none; transition: none; } }

/* Accordion with a byline under each title. Native details, no script. */
.mht-acc { margin-top: var(--mht-gap-7); border-bottom: 1px solid var(--mht-border); }
.mht-acc__item { border-top: 1px solid var(--mht-border); }
.mht-acc__sum { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 2px var(--mht-gap-5); align-items: center; padding: var(--mht-gap-6) 0; cursor: pointer; }
.mht-acc__sum::-webkit-details-marker { display: none; }
.mht-acc__title { grid-column: 1; font-family: var(--mht-display); font-size: var(--mht-h4); color: var(--mht-ink); transition: transform var(--mht-t-base) var(--mht-ease); }
.mht-acc__by { grid-column: 1; font-size: var(--mht-small); color: var(--mht-muted); }
.mht-acc__ic { grid-column: 2; grid-row: 1 / span 2; position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--mht-border); transition: background-color var(--mht-t-base) var(--mht-ease), transform var(--mht-t-base) var(--mht-ease); }
.mht-acc__ic::before, .mht-acc__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--mht-ink); transition: transform var(--mht-t-base) var(--mht-ease); }
.mht-acc__ic::after { transform: rotate(90deg); }
.mht-acc__item[open] .mht-acc__ic { background: var(--mht-ink); transform: rotate(180deg); }
.mht-acc__item[open] .mht-acc__ic::before, .mht-acc__item[open] .mht-acc__ic::after { background: var(--mht-steam); }
.mht-acc__item[open] .mht-acc__ic::after { transform: rotate(0deg); }
.mht-acc__sum:hover .mht-acc__title { transform: translateX(6px); }
.mht-acc__body { margin: 0; padding: 0 var(--mht-gap-8) var(--mht-gap-6) 0; color: var(--mht-ink-2); max-width: 54ch; }
.mht-acc__item[open] .mht-acc__body { animation: mht-acc-in .35s var(--mht-ease); }
@keyframes mht-acc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mht-acc__sum:focus-visible { outline: 2px solid var(--mht-ember); outline-offset: 4px; border-radius: var(--mht-r-sm); }

/* About: a pull line, and "we do / we do not". */
.mht-pull { margin: var(--mht-gap-3) 0 var(--mht-gap-6); font-family: var(--mht-display); font-size: clamp(2.6rem, 1.8rem + 3.6vw, 5rem); line-height: 1; color: var(--mht-ink); }
.mht-dodont { display: grid; gap: var(--mht-gap-5); margin-top: var(--mht-gap-7); }
@media (min-width: 800px) { .mht-dodont { grid-template-columns: 1fr 1fr; } }
.mht-dodont__col { padding: var(--mht-gap-7) var(--mht-gap-6); border-radius: var(--mht-r-card); background: var(--mht-abyss); color: var(--mht-steam); transition: transform var(--mht-t-base) var(--mht-ease); }
.mht-dodont__col--no { background: var(--mht-surface-1); color: var(--mht-ink); border: 1px solid var(--mht-border); }
.mht-dodont__col:hover { transform: translateY(-3px); }
.mht-dodont__head { margin: 0 0 var(--mht-gap-5); font-family: var(--mht-display); font-size: var(--mht-h3); }
.mht-dodont ul { list-style: none; margin: 0; padding: 0; }
.mht-dodont li { position: relative; padding: var(--mht-gap-3) 0 var(--mht-gap-3) 28px; border-top: 1px solid rgba(255,255,255,.14); }
.mht-dodont__col--no li { border-top-color: var(--mht-border); }
.mht-dodont li::before { content: "\2713"; position: absolute; left: 0; top: var(--mht-gap-3); font-weight: 700; }
.mht-dodont__col--no li::before { content: "\2715"; color: var(--mht-muted); }

/* Read your test strip. Tabs down the left, the reading on the right: a
   big number, a state pill, and one gauge you drag directly. */
.mht-wn { display: grid; gap: var(--mht-gap-6); margin-top: var(--mht-gap-7); }
@media (min-width: 960px) { .mht-wn { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--mht-gap-7); } }
.mht-wn__tabs { display: grid; gap: var(--mht-gap-3); align-content: start; }
/* Phones and tablets: a segmented row of names; the one-line description
   shows inside the panel instead (.mht-wn__what, hidden on desktop). */
@media (max-width: 959px) {
  .mht-wn__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--mht-surface-1); border-radius: var(--mht-r-pill); }
  .mht-wn .mht-wn__tab { padding: 12px 6px; border: 0; border-radius: var(--mht-r-pill); text-align: center; }
  .mht-wn .mht-wn__tab:hover { transform: none; }
  .mht-wn .mht-wn__tabname { font-size: 1.05rem; }
  .mht-wn .mht-wn__tabwhat { display: none; }
  .mht-wn__stage { padding: var(--mht-gap-5); }
  .mht-wn__val { font-size: 2.6rem; }
}
@media (min-width: 960px) { .mht-wn__what { display: none; } }
.mht-wn__what { margin: 0 0 var(--mht-gap-5); color: var(--mht-ink-2); }
.mht-wn__tab { appearance: none; display: block; text-align: left; padding: var(--mht-gap-5); background: transparent; border: 1px solid var(--mht-border); border-radius: var(--mht-r-card); font: inherit; cursor: pointer; transition: background-color var(--mht-t-base) var(--mht-ease), border-color var(--mht-t-base) var(--mht-ease), transform var(--mht-t-base) var(--mht-ease); }
.mht-wn__tab:hover { border-color: var(--mht-ember); transform: translateX(3px); }
.mht-wn__tab[aria-selected="true"] { background: var(--mht-abyss); border-color: var(--mht-abyss); }
.mht-wn__tabname { display: block; font-family: var(--mht-display); font-size: var(--mht-h4); color: var(--mht-ink); }
.mht-wn__tabwhat { display: block; margin-top: 4px; font-size: var(--mht-small); line-height: 1.45; color: var(--mht-muted); }
.mht-wn__tab[aria-selected="true"] .mht-wn__tabname { color: var(--mht-steam); }
.mht-wn__tab[aria-selected="true"] .mht-wn__tabwhat { color: var(--mht-mist); }
.mht-wn__stage { padding: var(--mht-gap-7); background: var(--mht-white); border: 1px solid var(--mht-border); border-radius: var(--mht-r-card); }
.mht-wn__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mht-gap-4) var(--mht-gap-6); margin-bottom: var(--mht-gap-7); }
.mht-wn__readout { display: flex; align-items: baseline; gap: var(--mht-gap-3); }
.mht-wn__val { font-family: var(--mht-display); font-size: clamp(3rem, 2.2rem + 3vw, 4.5rem); line-height: 1; color: var(--mht-ink); font-variant-numeric: tabular-nums; }
.mht-wn__unit { font-size: var(--mht-small); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mht-muted); }
.mht-wn__state { padding: 6px 14px; border-radius: var(--mht-r-pill); font-size: var(--mht-small); font-weight: 700; background: var(--mht-success-bg); color: var(--mht-success); transition: background-color .25s var(--mht-ease), color .25s var(--mht-ease); }
.mht-wn__panel[data-state="low"] .mht-wn__state, .mht-wn__panel[data-state="high"] .mht-wn__state { background: var(--mht-warning-bg); color: var(--mht-warning); }
.mht-wn__kinds { display: flex; gap: var(--mht-gap-3); margin-left: auto; }
/* The gauge is the slider: zones drawn behind a transparent track. */
.mht-wn__gauge { position: relative; height: 22px; border-radius: 11px; background: linear-gradient(90deg, var(--mht-warning-bg) 0, var(--mht-warning-bg) var(--lo, 30%), #8fb59a var(--lo, 30%), #8fb59a var(--hi, 60%), var(--mht-warning-bg) var(--hi, 60%), var(--mht-warning-bg) 100%); transition: background .3s var(--mht-ease); }
.mht-wn__range { position: absolute; inset: -9px 0; width: 100%; height: 40px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: grab; }
.mht-wn__range:active { cursor: grabbing; }
.mht-wn__range::-webkit-slider-runnable-track { height: 40px; background: transparent; }
.mht-wn__range::-moz-range-track { height: 40px; background: transparent; }
.mht-wn__range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: 3px; border-radius: 50%; background: var(--mht-white); border: 3px solid var(--mht-ink); box-shadow: 0 6px 14px -6px rgba(14, 28, 38, .6); transition: transform .15s var(--mht-ease); }
.mht-wn__range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--mht-white); border: 3px solid var(--mht-ink); box-shadow: 0 6px 14px -6px rgba(14, 28, 38, .6); }
.mht-wn__range:hover::-webkit-slider-thumb, .mht-wn__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.mht-wn__range:focus-visible { outline: none; }
.mht-wn__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(14, 28, 38, .25); }
.mht-wn__ends { display: flex; justify-content: space-between; margin: var(--mht-gap-4) 0 var(--mht-gap-7); font-size: var(--mht-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--mht-muted); }
.mht-wn__target { font-weight: 700; color: var(--mht-ink); }
.mht-wn__verdict { margin: 0; padding: var(--mht-gap-5) var(--mht-gap-6); border-left: 3px solid var(--mht-tide); background: var(--mht-surface-1); border-radius: 0 var(--mht-r-md) var(--mht-r-md) 0; font-size: var(--mht-body-sz); line-height: 1.5; color: var(--mht-ink); }
.mht-wn__panel[data-state="low"] .mht-wn__verdict, .mht-wn__panel[data-state="high"] .mht-wn__verdict { border-left-color: var(--mht-warning); }
.mht-wn__panel:not([hidden]) { animation: mht-acc-in .3s var(--mht-ease); }

/* Footprint check. */
.mht-fp { display: grid; gap: var(--mht-gap-7); margin-top: var(--mht-gap-7); }
@media (min-width: 960px) { .mht-fp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mht-gap-9); align-items: start; } }
.mht-fp__inputs { display: flex; gap: var(--mht-gap-5); }
.mht-fp__inputs label { font-size: var(--mht-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mht-muted); }
.mht-fp__inputs span { display: flex; align-items: center; gap: var(--mht-gap-3); margin-top: var(--mht-gap-2); font-size: var(--mht-body-sz); letter-spacing: 0; text-transform: none; color: var(--mht-ink); }
.mht-fp__inputs input { width: 92px; padding: 10px 12px; font: inherit; font-family: var(--mht-display); font-size: 1.5rem; border: 1px solid var(--mht-border); border-radius: var(--mht-r-md); background: var(--mht-white); }
.mht-fp__presets { display: flex; flex-wrap: wrap; gap: var(--mht-gap-3); margin: var(--mht-gap-5) 0; }
.mht-fp__clear { display: flex; gap: var(--mht-gap-3); align-items: flex-start; font-size: var(--mht-small); color: var(--mht-ink-2); }
.mht-fp__count { margin: var(--mht-gap-6) 0 var(--mht-gap-4); font-family: var(--mht-display); font-size: var(--mht-h4); color: var(--mht-ink); }
.mht-fp__list { list-style: none; margin: 0 0 var(--mht-gap-5); padding: 0; max-height: 360px; overflow: auto; border-top: 1px solid var(--mht-border); }
.mht-fp__list li { display: flex; align-items: center; border-bottom: 1px solid var(--mht-border); }
.mht-fp__item { flex: 1; display: grid; grid-template-columns: 34px 1fr auto; gap: var(--mht-gap-4); align-items: center; padding: var(--mht-gap-4) var(--mht-gap-3); background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--mht-ink); transition: background-color var(--mht-t-fast) var(--mht-ease); }
.mht-fp__item:hover, .mht-fp__item.is-on { background: var(--mht-white); }
.mht-fp__seats { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mht-surface-2); font-weight: 700; font-size: var(--mht-small); }
.mht-fp__item.is-on .mht-fp__seats { background: var(--mht-ink); color: var(--mht-steam); }
.mht-fp__name { font-weight: 600; }
.mht-fp__size { font-size: var(--mht-small); color: var(--mht-muted); font-variant-numeric: tabular-nums; }
.mht-fp__go { padding: 0 var(--mht-gap-4); font-size: var(--mht-small); font-weight: 600; color: var(--mht-tide); }
.mht-fp__draw { position: sticky; top: 110px; padding: var(--mht-gap-5); background: var(--mht-white); border: 1px solid var(--mht-border); border-radius: var(--mht-r-card); }
.mht-fp__draw svg { width: 100%; height: auto; display: block; }
.mht-fp__caption { margin: var(--mht-gap-4) 0 0; font-size: var(--mht-small); color: var(--mht-ink-2); }
.fp-space { fill: var(--mht-surface-1); stroke: var(--mht-ink); stroke-width: 2; }
.fp-grid { stroke: #cfd8c6; stroke-width: 1; }
.fp-clear { fill: url(#none); fill: rgba(14, 28, 38, .06); stroke: var(--mht-border-2); stroke-dasharray: 5 4; }
.fp-tub { fill: var(--mht-abyss); transition: all .35s var(--mht-ease); }
.fp-label { fill: var(--mht-steam); font: 600 13px var(--mht-body); }

/* Headings: one measure for the whole site. Per-heading caps of 16 to 22
   characters turned short headings into three stacked lines. Balanced
   wrapping evens the lines instead; the caps below only stop a heading
   running the full width of a wide container. Hero and band titles keep
   their own display measure. */
.mht-main h1:not(.mht-hero__title) { max-width: 24ch; text-wrap: balance; }
.mht-main h2:not(.mht-band__title) { max-width: 32ch; text-wrap: balance; }

/* Footprint banner and the mega menu callout (decision 96). */
.mht-fpb { display: grid; grid-template-columns: auto 1fr; gap: var(--mht-gap-5) var(--mht-gap-7); align-items: center; padding: var(--mht-gap-6) var(--mht-gap-7); border-radius: var(--mht-r-card); background: var(--mht-abyss); color: var(--mht-steam); text-decoration: none; transition: transform var(--mht-t-base) var(--mht-ease), box-shadow var(--mht-t-base) var(--mht-ease); }
@media (min-width: 800px) { .mht-fpb { grid-template-columns: auto 1fr auto; } }
.mht-fpb:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(14, 28, 38, .6); color: var(--mht-steam); }
.mht-fpb__art { position: relative; width: 96px; height: 72px; border: 2px solid rgba(255,255,255,.7); border-radius: 4px; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 12px 12px; }
.mht-fpb__tub { position: absolute; left: 14px; top: 12px; width: 52px; height: 44px; border-radius: 8px; background: var(--mht-tide); transition: transform var(--mht-t-slow) var(--mht-ease); }
.mht-fpb:hover .mht-fpb__tub { transform: translateX(14px); }
.mht-fpb__copy { display: block; }
.mht-fpb__eyebrow { display: block; font-size: var(--mht-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mht-mist); }
.mht-fpb__title { display: block; margin-top: 4px; font-family: var(--mht-display); font-size: var(--mht-h3); line-height: 1.15; }
.mht-fpb__text { display: block; margin-top: 4px; font-size: var(--mht-small); color: var(--mht-mist); }
.mht-fpb__btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 800px) { .mht-fpb__btn { grid-column: auto; } }
.mht-fp__seatsel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mht-gap-3); margin: 0 0 var(--mht-gap-5); }
.mht-fp__lab { margin-right: var(--mht-gap-3); font-size: var(--mht-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mht-muted); }
.mht-fp__seatsel { gap: 6px; }
.mht-fp__seatsel .mht-chipbtn { min-width: 36px; min-height: 36px; padding: 6px 10px; }
.mht-fp__lab { flex-basis: 100%; margin: 0 0 2px; }

.mht-nav__list .mht-mega a.mht-mega__fit { display: flex; align-items: center; gap: var(--mht-gap-4); margin: var(--mht-gap-6) 0 var(--mht-gap-5); padding: var(--mht-gap-4); border: 1px solid var(--mht-border); border-radius: var(--mht-r-card); background: var(--mht-white); font-size: var(--mht-small); line-height: 1.35; transition: border-color var(--mht-t-fast) var(--mht-ease), transform var(--mht-t-base) var(--mht-ease); }
.mht-nav__list .mht-mega a.mht-mega__fit:hover { border-color: var(--mht-ember); transform: translateY(-2px); }
.mht-mega__fit b { display: block; font-family: var(--mht-display); font-weight: 400; font-size: 1.1rem; }
.mht-mega__fit-art { flex: 0 0 auto; position: relative; width: 44px; height: 34px; border: 1.5px solid var(--mht-ink); border-radius: 3px; background-image: linear-gradient(rgba(14,28,38,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(14,28,38,.14) 1px, transparent 1px); background-size: 7px 7px; }
.mht-mega__fit-art::after { content: ""; position: absolute; left: 6px; top: 6px; width: 22px; height: 19px; border-radius: 4px; background: var(--mht-tide); transition: transform var(--mht-t-base) var(--mht-ease); }
.mht-mega__fit:hover .mht-mega__fit-art::after { transform: translateX(8px); }

/* Every page: the bar gets a hairline and a shadow once scrolled, so it
   reads as a bar and not a floating strip. */
.mht-header { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
.mht-header.is-scrolled { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08), 0 10px 30px -18px rgba(0, 0, 0, .55); }

/* Mega menu "All hot tubs": centre the label in the pill. */
.mht-nav__list .mht-mega a.mht-mega__all { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; line-height: 1.2; padding: 0 var(--mht-gap-6); }

/* Reviews on touch or narrow screens: one row to swipe, no drift. Three
   stacked masked columns each drifting at its own speed repaint badly on
   iOS; this is the same fix as the sdbbq build. */
@media (hover: none), (max-width: 699px) {
  .mht-reviews__wall { display: flex; gap: var(--mht-gap-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--mht-section-x) * -1); padding-inline: var(--mht-section-x); scroll-padding-inline: var(--mht-section-x);
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mht-reviews__wall::-webkit-scrollbar { display: none; }
  .mht-reviews__col, .mht-reviews__track { display: contents; }
  .mht-reviews__col { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .mht-reviews__track { animation: none; }
  .mht-reviews__track > .is-clone { display: none; }
  .mht-review { flex: 0 0 min(84%, 360px); scroll-snap-align: start; display: flex; flex-direction: column; margin: 0; }
  .mht-review__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 11; overflow: hidden; }
  .mht-review__who, .mht-review__author { margin-top: auto; }
}

/* Prices: the short answer beside a photo, facts in a row under the figure. */
.mht-answer { display: grid; gap: var(--mht-gap-7); align-items: center; }
@media (min-width: 960px) { .mht-answer { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--mht-gap-8); } }
.mht-answer__fig { margin: var(--mht-gap-3) 0 0; font-family: var(--mht-display); font-size: clamp(2.8rem, 1.6rem + 4.4vw, 5.4rem); line-height: 1; color: var(--mht-ink); letter-spacing: -.02em; }
.mht-answer__fig span { font-family: var(--mht-body); font-size: .32em; letter-spacing: 0; color: var(--mht-muted); vertical-align: middle; margin: 0 .15em; }
.mht-answer__cap { margin: var(--mht-gap-4) 0 var(--mht-gap-7); font-size: var(--mht-lead); color: var(--mht-ink-2); }
.mht-answer__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mht-gap-4); }
@media (min-width: 640px) { .mht-answer__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mht-answer__facts li { padding: var(--mht-gap-5); background: var(--mht-surface-1); border-radius: var(--mht-r-card); transition: transform var(--mht-t-base) var(--mht-ease), background-color var(--mht-t-base) var(--mht-ease); }
.mht-answer__facts li:hover { transform: translateY(-3px); background: var(--mht-surface-2); }
.mht-answer__facts b { display: block; font-family: var(--mht-display); font-weight: 400; font-size: var(--mht-h4); color: var(--mht-ink); }
.mht-answer__facts span { display: block; margin-top: 4px; font-size: var(--mht-small); color: var(--mht-ink-2); line-height: 1.45; }
.mht-answer__media { border-radius: var(--mht-r-card); overflow: hidden; aspect-ratio: 4 / 5; background: var(--mht-surface-2); }
.mht-answer__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 959px) { .mht-answer__media { aspect-ratio: 16 / 10; } }

.mht-pb { margin-top: var(--mht-gap-7); padding: var(--mht-gap-7); background: var(--mht-white); border: 1px solid var(--mht-border); border-radius: var(--mht-r-card); }
.mht-pb__tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--mht-surface-1); border-radius: var(--mht-r-pill); margin-bottom: var(--mht-gap-6); }
.mht-pb__tab { appearance: none; border: 0; background: transparent; padding: 10px 18px; border-radius: var(--mht-r-pill); font: inherit; font-size: var(--mht-small); font-weight: 600; color: var(--mht-ink-2); cursor: pointer; transition: background-color var(--mht-t-base) var(--mht-ease), color var(--mht-t-base) var(--mht-ease); }
.mht-pb__tab[aria-selected="true"] { background: var(--mht-abyss); color: var(--mht-steam); }
.mht-pb__note { margin: 0 0 var(--mht-gap-6); color: var(--mht-ink-2); max-width: 60ch; }
.mht-pb__axis { position: relative; height: 20px; margin-left: 170px; margin-right: 170px; border-bottom: 1px solid var(--mht-border); font-size: var(--mht-micro); color: var(--mht-muted); }
.mht-pb__axis span { position: absolute; bottom: 4px; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.mht-pb__rows { list-style: none; margin: 0; padding: 0; }
.mht-pb__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 170px; align-items: center; min-height: 48px; border-bottom: 1px solid var(--mht-border); transition: background-color var(--mht-t-fast) var(--mht-ease); }
.mht-pb__row:hover { background: var(--mht-surface-1); }
.mht-pb__label { padding-right: var(--mht-gap-5); font-weight: 600; color: var(--mht-ink); }
.mht-pb__label a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--mht-border-2); }
.mht-pb__track { position: relative; height: 14px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), var(--mht-border) calc(10% - 1px), var(--mht-border) 10%); }
.mht-pb__bar { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); border-radius: 7px; background: var(--mht-ink-2); transform-origin: left; transform: scaleX(0); transition: transform .8s var(--mht-ease), background-color var(--mht-t-fast) var(--mht-ease); transition-delay: calc(var(--i) * 60ms); }
.mht-pb.is-lit .mht-pb__bar { transform: scaleX(1); }
.mht-pb__row:hover .mht-pb__bar { background: var(--mht-ink); }
.mht-pb__range { padding-left: var(--mht-gap-5); font-size: var(--mht-small); color: var(--mht-ink-2); font-variant-numeric: tabular-nums; }
.mht-pb__row:hover .mht-pb__range { color: var(--mht-ink); font-weight: 600; }
@media (max-width: 760px) {
  .mht-pb { padding: var(--mht-gap-5); }
  .mht-pb__axis { display: none; }
  .mht-pb__row { grid-template-columns: 1fr auto; grid-template-areas: "label range" "track track"; gap: 8px 12px; padding: var(--mht-gap-4) 0; }
  .mht-pb__label { grid-area: label; } .mht-pb__range { grid-area: range; padding: 0; } .mht-pb__track { grid-area: track; }
}
@media (prefers-reduced-motion: reduce) { .mht-pb__bar { transform: none; transition: none; } }

/* Cutaway (decision 98). */
.mht-diag { display: grid; gap: var(--mht-gap-7); margin-top: var(--mht-gap-7); }
@media (min-width: 1000px) { .mht-diag { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--mht-gap-8); } }
.mht-diag__art { position: relative; padding: var(--mht-gap-6); background: var(--mht-white); border: 1px solid var(--mht-border); border-radius: var(--mht-r-card); }
.mht-diag__art svg { display: block; width: 100%; height: auto; }
.d-ground { stroke: var(--mht-border-2); stroke-width: 2; }
.d-cabinet { fill: #7a5a43; }
.d-slat { stroke: rgba(0,0,0,.2); stroke-width: 1.5; }
.d-foam { fill: #efd488; }
.d-cell { fill: rgba(196, 160, 70, .45); }
.d-frame { fill: #a7b0b4; }
.d-shell { fill: #f4f7f8; stroke: #c9d2d5; stroke-width: 2; }
.d-water { fill: #bfdde7; }
.d-jet { fill: #34444b; }
.d-pipe { fill: none; stroke: #5d6b71; stroke-width: 3; stroke-linecap: round; }
.d-pump { fill: #53636a; }
.d-pump-fan { fill: #8e9ca2; }
.d-cover { fill: #2f3c43; }
.d-glow { fill: none; stroke: var(--mht-tide); stroke-width: 4; stroke-dasharray: 10 8; opacity: 0; transition: opacity var(--mht-t-base) var(--mht-ease); }
.d-part { transition: opacity var(--mht-t-base) var(--mht-ease), filter var(--mht-t-base) var(--mht-ease); }
.mht-diag.is-picking .d-part { opacity: .5; }
.mht-diag.is-picking .d-part.is-on { opacity: 1; filter: drop-shadow(0 0 6px rgba(46, 78, 92, .5)); }
.mht-diag.is-picking .d-glow.is-on { opacity: 1; }
.mht-diag.is-picking [data-part="canada"].is-on ~ * , .mht-diag.is-picking .d-part[data-part="canada"].is-on { opacity: 1; }
.mht-diag__pin { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--mht-white); background: var(--mht-ink); color: var(--mht-steam); font: 700 14px/1 var(--mht-body); cursor: pointer; box-shadow: 0 6px 14px -6px rgba(14,28,38,.6); transition: transform var(--mht-t-base) var(--mht-ease), background-color var(--mht-t-base) var(--mht-ease); }
.mht-diag__pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--mht-tide); opacity: 0; transition: opacity var(--mht-t-base) var(--mht-ease); }
.mht-diag__pin:hover, .mht-diag__pin.is-on { transform: translate(-50%, -50%) scale(1.15); background: var(--mht-tide); }
.mht-diag__pin.is-on::after { opacity: 1; animation: mht-pin 1.6s ease-out infinite; }
@keyframes mht-pin { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.mht-diag__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mht-gap-3); }
.mht-diag__item { appearance: none; width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: 2px var(--mht-gap-4); text-align: left; padding: var(--mht-gap-5); background: var(--mht-white); border: 1px solid var(--mht-border); border-radius: var(--mht-r-card); font: inherit; cursor: pointer; transition: border-color var(--mht-t-base) var(--mht-ease), transform var(--mht-t-base) var(--mht-ease), box-shadow var(--mht-t-base) var(--mht-ease); }
.mht-diag__item:hover { transform: translateX(4px); }
.mht-diag__item.is-on { border-color: var(--mht-ink); box-shadow: 0 14px 30px -22px rgba(14,28,38,.55); }
.mht-diag__n { grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mht-surface-2); font-weight: 700; font-size: var(--mht-small); color: var(--mht-ink); transition: background-color var(--mht-t-base) var(--mht-ease), color var(--mht-t-base) var(--mht-ease); }
.mht-diag__item.is-on .mht-diag__n { background: var(--mht-tide); color: #fff; }
.mht-diag__name { font-family: var(--mht-display); font-size: var(--mht-h4); color: var(--mht-ink); }
.mht-diag__text { font-size: var(--mht-small); line-height: 1.5; color: var(--mht-ink-2); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s var(--mht-ease), opacity .25s var(--mht-ease), margin .25s var(--mht-ease); }
.mht-diag__item.is-on .mht-diag__text { max-height: 140px; opacity: 1; margin-top: 6px; }
.mht-diag:not(.is-ready) .mht-diag__text { max-height: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mht-diag__pin.is-on::after { animation: none; } }

/* Tables (decision 98): a card, a clear head, hover across the row. */
.mht-tablewrap, .mht-brands__tablewrap { background: var(--mht-white); border: 1px solid var(--mht-border); border-radius: var(--mht-r-card); overflow-x: auto; box-shadow: 0 16px 40px -34px rgba(14, 28, 38, .5); }
.mht-spec { font-size: var(--mht-small); }
.mht-spec th, .mht-spec td { padding: var(--mht-gap-5) var(--mht-gap-6); border-bottom: 1px solid var(--mht-border); }
.mht-spec tbody tr:nth-child(odd) { background: transparent; }
.mht-spec tbody th { font-size: var(--mht-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mht-muted); vertical-align: middle; }
.mht-spec tbody td { font-size: var(--mht-body-sz); color: var(--mht-ink); }
.mht-spec tbody tr { transition: background-color var(--mht-t-fast) var(--mht-ease); }
.mht-spec tbody tr:hover { background: var(--mht-surface-1); }
.mht-spec--compare thead th { padding-top: var(--mht-gap-6); padding-bottom: var(--mht-gap-5); background: var(--mht-abyss); color: var(--mht-steam); border-bottom: 0; font-family: var(--mht-display); font-weight: 400; font-size: var(--mht-h4); }
.mht-spec--compare thead td { background: var(--mht-abyss); border-bottom: 0; }
.mht-spec--compare tbody td { border-left: 1px solid var(--mht-border); }
.mht-spec--compare tbody th { background: var(--mht-surface-1); width: 18%; }
.mht-spec--compare tbody tr:hover td { background: var(--mht-surface-1); }
.mht-brands__table { min-width: 720px; }
.mht-brands__table thead th { font-size: var(--mht-h4); }
.mht-spec--inline tbody td { font-size: var(--mht-small); }
.mht-spec--inline th, .mht-spec--inline td { padding: var(--mht-gap-4) var(--mht-gap-5); }

/* Footprint results as cards, not a scrolling list (decision 98). */
.mht-fp__results { margin-top: var(--mht-gap-8); }
.mht-fp__cards { list-style: none; margin: var(--mht-gap-5) 0 0; padding: 0; display: grid; gap: var(--mht-gap-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .mht-fp__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mht-fp__cards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mht-fp__card { display: flex; flex-direction: column; margin: 0; background: var(--mht-white); border: 1px solid var(--mht-border); border-radius: var(--mht-r-card); overflow: hidden; transition: border-color var(--mht-t-base) var(--mht-ease), transform var(--mht-t-base) var(--mht-ease), box-shadow var(--mht-t-base) var(--mht-ease); }
.mht-fp__card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -22px rgba(14,28,38,.55); }
.mht-fp__card.is-on { border-color: var(--mht-ink); box-shadow: 0 0 0 1px var(--mht-ink); }
.mht-fp__pick { appearance: none; display: flex; flex-direction: column; gap: 4px; padding: 0 0 var(--mht-gap-3); background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.mht-fp__img { display: block; aspect-ratio: 4 / 3; background: var(--mht-white); margin-bottom: var(--mht-gap-3); }
.mht-fp__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mht-fp__name { padding: 0 var(--mht-gap-4); font-family: var(--mht-display); font-size: 1.05rem; line-height: 1.2; color: var(--mht-ink); }
.mht-fp__meta { padding: 0 var(--mht-gap-4); font-size: var(--mht-micro); color: var(--mht-muted); font-variant-numeric: tabular-nums; }
.mht-fp__card .mht-fp__go { margin-top: auto; padding: var(--mht-gap-3) var(--mht-gap-4); border-top: 1px solid var(--mht-border); font-size: var(--mht-small); font-weight: 600; color: var(--mht-tide); text-decoration: none; }
.mht-fp__card .mht-fp__go:hover { text-decoration: underline; }
.mht-fp__more { margin-top: var(--mht-gap-6); }

/* Decision 99. */
/* Lines that wrap: balanced so no line hangs on a word or two. */
.mht-band__text, .mht-main .lede, .mht-ledger__rtext, .mht-rail__line { text-wrap: pretty; }
.mht-band__text { text-wrap: balance; }

/* A partner mark as a badge in the corner of a band photograph. */
.mht-band__media { position: relative; }
.mht-band__badge { position: absolute; left: var(--mht-gap-7); bottom: var(--mht-gap-7); display: inline-block; padding: 10px 14px; background: rgba(255, 255, 255, .94); border-radius: var(--mht-r-md); box-shadow: 0 8px 20px -10px rgba(14, 28, 38, .5); }
.mht-band__badge img { height: 34px; width: auto; display: block; }

/* Hero chips: what a tool page does, as three plain tags under the lede. */
.mht-herochips { display: flex; flex-wrap: wrap; gap: var(--mht-gap-3); list-style: none; margin: var(--mht-gap-6) 0 0; padding: 0; }
.mht-herochips li { padding: 8px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--mht-r-pill); font-size: var(--mht-small); font-weight: 600; color: var(--mht-steam); background: rgba(255,255,255,.06); }

/* Cutaway hint: a quiet label in the corner of the drawing, not a sticker. */
.mht-diag__hint { position: absolute; left: var(--mht-gap-5); top: var(--mht-gap-5); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: var(--mht-r-pill); background: var(--mht-abyss); color: var(--mht-steam); font-size: var(--mht-small); font-weight: 600; box-shadow: 0 8px 20px -12px rgba(14,28,38,.6); pointer-events: none; }
.mht-diag__hint-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mht-tide); box-shadow: 0 0 0 0 rgba(46,78,92,.55); animation: mht-hint 1.8s ease-out infinite; }
@keyframes mht-hint { to { box-shadow: 0 0 0 9px rgba(46,78,92,0); } }
.mht-diag.is-picking .mht-diag__hint { opacity: .7; }
.d-shadow { fill: rgba(14, 28, 38, .12); }
.d-cabinet-edge { fill: none; stroke: rgba(0,0,0,.35); stroke-width: 2; }
.d-ripple { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; }

/* Budget ladder on the prices page. */
.mht-ladder { list-style: none; margin: var(--mht-gap-7) 0 0; padding: 0; border-top: 1px solid var(--mht-border); }
.mht-ladder li { margin: 0; border-bottom: 1px solid var(--mht-border); }
.mht-ladder a { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 2px var(--mht-gap-5); align-items: center; padding: var(--mht-gap-4) var(--mht-gap-3); text-decoration: none; color: var(--mht-ink); transition: background-color var(--mht-t-fast) var(--mht-ease), padding-left var(--mht-t-base) var(--mht-ease); border-radius: var(--mht-r-md); }
.mht-ladder a:hover { background: var(--mht-surface-1); padding-left: var(--mht-gap-5); }
.mht-ladder__band { grid-row: 1 / span 2; font-size: 1.05rem; letter-spacing: .04em; }
.mht-ladder__range { font-weight: 600; font-size: var(--mht-small); }
.mht-ladder__what { font-size: var(--mht-small); color: var(--mht-muted); }
.mht-ladder a:hover .mht-band__spent { color: var(--mht-ink); }

/* Footprint controls, larger. */
.mht-fp__inputs { gap: var(--mht-gap-6); }
.mht-fp__inputs input { width: 132px; padding: 14px 16px; font-size: 2.2rem; border-width: 2px; }
.mht-fp__inputs span { font-size: var(--mht-lead); }
.mht-fp__presets { margin: var(--mht-gap-6) 0; }
.mht-fp__presets .mht-chipbtn, .mht-fp__seatsel .mht-chipbtn { min-height: 42px; }
.mht-fp__seatsel { margin-bottom: var(--mht-gap-6); }
.mht-fp__clear { font-size: var(--mht-body-sz); }

/* Decision 100. */
/* Budget ladder: the spent dollars fill in, one band after the next, when the
   ladder scrolls into view. */
.mht-ladder .mht-band__spent { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--mht-ease); transition-delay: calc(var(--i, 0) * .22s + .1s); }
.mht-ladder.is-lit .mht-band__spent { clip-path: inset(0 0 0 0); }
.mht-ladder .mht-band__rest { transition: color .4s var(--mht-ease); transition-delay: calc(var(--i, 0) * .22s + .5s); }
@media (prefers-reduced-motion: reduce) { .mht-ladder .mht-band__spent { clip-path: none; transition: none; } }

/* Wood-fired: a small flame beside the eyebrow, flickering gently. */
.mht-flame { display: inline-block; width: 18px; height: 22px; margin: 0 8px -5px 0; vertical-align: baseline; }
.mht-flame path { fill: #d98b3a; transform-origin: 50% 100%; animation: mht-flicker 1.4s ease-in-out infinite alternate; }
.mht-flame path + path { fill: #f0c266; animation-duration: 1.1s; animation-delay: .2s; }
@keyframes mht-flicker { from { transform: scaleY(1) scaleX(1); } to { transform: scaleY(1.08) scaleX(.94) translateX(1px); } }
@media (prefers-reduced-motion: reduce) { .mht-flame path { animation: none; } }

/* Decision 101: legal pages and the footer's bottom rows. */
.mht-footer__nav { display: flex; flex-wrap: wrap; gap: var(--mht-gap-3) var(--mht-gap-6); padding: var(--mht-gap-6) 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.mht-footer__nav a { font-size: var(--mht-small); font-weight: 600; color: var(--mht-mist); text-decoration: none; }
.mht-footer__nav a:hover { color: var(--mht-steam); text-decoration: underline; text-underline-offset: 4px; }
.mht-footer__legal { font-size: var(--mht-micro); color: var(--mht-steel); }
.mht-footer__links a { color: var(--mht-steel); }

.mht-legal__updated { margin: var(--mht-gap-5) 0 0; font-size: var(--mht-small); color: var(--mht-steel); }
.mht-legal { display: grid; gap: var(--mht-gap-8); align-items: start; }
@media (min-width: 960px) { .mht-legal { grid-template-columns: 260px minmax(0, 1fr); gap: var(--mht-gap-9); } .mht-legal__nav { position: sticky; top: 110px; } }
.mht-legal__nav ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--mht-border); }
.mht-legal__nav a { display: block; padding: 8px 0 8px var(--mht-gap-5); margin-left: -2px; border-left: 2px solid transparent; font-size: var(--mht-small); color: var(--mht-ink-2); text-decoration: none; }
.mht-legal__nav a:hover { border-left-color: var(--mht-ink); color: var(--mht-ink); }
.mht-legal__body { max-width: 68ch; }
.mht-legal__sec { padding: var(--mht-gap-6) 0 var(--mht-gap-4); border-top: 1px solid var(--mht-border); scroll-margin-top: 110px; }
.mht-legal__sec:first-child { border-top: 0; padding-top: 0; }
.mht-legal__sec h2 { margin: 0 0 var(--mht-gap-4); font-size: var(--mht-h3); }
.mht-legal__sec p, .mht-legal__sec li { line-height: 1.65; color: var(--mht-ink-2); }
.mht-legal__sec p { margin: 0 0 var(--mht-gap-4); }
.mht-legal__sec ul { margin: 0 0 var(--mht-gap-5); padding-left: 1.2em; }
.mht-legal__sec a { color: var(--mht-tide); font-weight: 600; }
@media (max-width: 959px) { .mht-legal__nav { display: none; } }

/* Social links in the footer contact row (decision 102). */
.mht-social { display: flex; gap: var(--mht-gap-3); list-style: none; margin: 4px 0 0; padding: 0; }
.mht-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); color: var(--mht-steam); transition: background-color var(--mht-t-fast) var(--mht-ease), border-color var(--mht-t-fast) var(--mht-ease), transform var(--mht-t-base) var(--mht-ease); }
.mht-social a:hover { background: var(--mht-steam); border-color: var(--mht-steam); color: var(--mht-abyss); transform: translateY(-2px); }
.mht-social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mht-social svg .f { fill: currentColor; stroke: none; }

/* Drawer: the pages that are not in the desktop bar, then the phone number
   as a button, so nothing depends on the floating call button. */
.mht-drawer__more { display: flex; flex-wrap: wrap; gap: var(--mht-gap-3) var(--mht-gap-5); margin: var(--mht-gap-6) 0 var(--mht-gap-5); padding-top: var(--mht-gap-5); border-top: 1px solid var(--mht-border); }
.mht-drawer__more a { font-size: var(--mht-small); font-weight: 600; color: var(--mht-ink-2); text-decoration: none; padding: 8px 12px; border: 1px solid var(--mht-border); border-radius: var(--mht-r-pill); }
.mht-drawer__more a:hover { color: var(--mht-ink); border-color: var(--mht-ink); }
.mht-drawer__callbtn { display: block; text-align: center; margin-top: var(--mht-gap-3); background: var(--mht-abyss); color: var(--mht-steam); }

/* Touch targets: on touch devices, footer chips and links and the "See all"
   links reach 40px tall. Desktop keeps the tighter sizes. */
@media (hover: none) {
  .mht-footer__sizes a { min-width: 40px; min-height: 40px; }
  .mht-footer__nav a, .mht-footer__links a, .mht-footer__dealerlist a, .mht-footer__dealermore { display: inline-block; padding-top: 8px; padding-bottom: 8px; }
  .mht-group__all { display: inline-block; padding: 10px 0; }
}