@charset "utf-8";
/* ==========================================================================
   Regency Hot Tubs
   A More Relaxed Colorado.

   One stylesheet, no framework. The palette is deliberately weighted toward
   warm light: Alpine White and paper carry most of the page, Midnight is used
   for anchoring moments rather than as a default ground, and gold appears as
   a hairline far more often than as a fill.
   ========================================================================== */

/* -------------------------------------------------- fonts */
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope.woff2') format('woff2-variations');
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('/assets/fonts/CormorantGaramond.woff2') format('woff2-variations');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('/assets/fonts/CormorantGaramond-Italic.woff2') format('woff2-variations');
  font-weight: 300 600; font-style: italic; font-display: swap;
}

/* -------------------------------------------------- tokens */
:root {
  --midnight:   #10263D;
  --midnight-2: #17344F;   /* raised surface on a midnight ground */
  --gold:       #C8A45D;
  --gold-deep:  #8B6B31;   /* the gold, darkened until small text on Alpine White clears 4.5:1 */
  --mineral:    #72A9B5;
  --mineral-d:  #3E7886;   /* mineral, darkened to clear 4.5:1 on Alpine White */
  --alpine:     #F7F5F0;
  --paper:      #FDFCFA;
  --slate:      #67727B;   /* clears 4.5:1 on Alpine White for small labels */
  --slate-d:    #4A555E;
  --line:       #E2DED5;
  --line-dark:  rgba(247,245,240,.16);

  --ink:        var(--midnight);
  --ink-soft:   var(--slate-d);
  --ground:     var(--alpine);

  --ui:      'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Cormorant', ui-serif, Georgia, 'Times New Roman', serif;

  /* Fluid scale. Everything between the two ends is interpolated, so there
     are no breakpoint jumps in the typography. */
  --t-xs:   clamp(.72rem, .70rem + .10vw, .78rem);
  --t-sm:   clamp(.82rem, .79rem + .14vw, .92rem);
  --t-base: clamp(1rem, .96rem + .18vw, 1.09rem);
  --t-lg:   clamp(1.12rem, 1.05rem + .32vw, 1.3rem);
  --t-xl:   clamp(1.35rem, 1.18rem + .78vw, 1.85rem);
  --t-2xl:  clamp(1.7rem, 1.36rem + 1.5vw, 2.7rem);
  --t-3xl:  clamp(2.1rem, 1.5rem + 2.7vw, 3.9rem);
  --t-4xl:  clamp(2.2rem, 1.5rem + 3.1vw, 4.4rem);
  --t-5xl:  clamp(2.5rem, 1.6rem + 4.1vw, 5.6rem);

  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2.25rem;
  --sp-5: 3.5rem; --sp-6: 5rem;   --sp-7: 7rem;    --sp-8: 10rem;
  --section: clamp(4rem, 2.2rem + 7.5vw, 9rem);

  --wrap: 1240px;
  --wrap-wide: 1560px;
  --wrap-read: 68ch;
  /* The space between a centred wrapper and the viewport edge. A child that
     needs to run off the edge negates this rather than guessing with
     percentage margins, which resolve against the wrong box in a grid. */
  --gutter:      max(1.25rem, (100vw - var(--wrap)) / 2);
  --gutter-wide: max(1.25rem, (100vw - var(--wrap-wide)) / 2);

  --ease: cubic-bezier(.22, .61, .36, 1);      /* general motion */
  --ease-soft: cubic-bezier(.4, 0, .2, 1);     /* colour and opacity */
  --hdr-h: 132px;
}

/* -------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 1rem);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--t-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.12; font-weight: 600; text-wrap: balance; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--mineral-d);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible, .is-dark :focus-visible { outline-color: var(--gold); }

::selection { background: color-mix(in srgb, var(--mineral) 40%, transparent); }

.skip {
  position: absolute; left: 1rem; top: 1rem; z-index: 999;
  clip-path: inset(50%);
  background: var(--midnight); color: var(--alpine);
  padding: .8rem 1.2rem; font-size: var(--t-sm);
}
.skip:focus { clip-path: none; }

/* -------------------------------------------------- layout primitives */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2.5rem, var(--wrap-wide)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .62); }

/* A full-bleed child inside a wrapped parent. */
.bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

.lede { font-size: var(--t-lg); color: var(--ink-soft); max-width: 54ch; line-height: 1.6; }
.read { max-width: var(--wrap-read); }

/* Editorial display type. Used sparingly - most headings stay in Manrope. */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.012em;
  font-size: var(--t-3xl);
  text-wrap: balance;
}
.display em { font-style: italic; }
.display--xl { font-size: var(--t-4xl); }
.display--hero { font-size: var(--t-5xl); line-height: .95; }

/* The small all-caps label that opens most sections. */
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .8rem;
}
.eyebrow::after {
  content: ''; flex: 1; height: 1px; max-width: 5rem;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: ''; flex: 1; height: 1px; max-width: 5rem;
  background: linear-gradient(270deg, var(--gold), transparent);
}
.on-dark .eyebrow { color: color-mix(in srgb, var(--alpine) 62%, transparent); }

.hr-gold { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: var(--sp-5) 0; }

/* Grounds */
.on-dark { background: var(--midnight); color: var(--alpine); }
.on-dark .lede, .on-dark p { color: color-mix(in srgb, var(--alpine) 78%, transparent); }
.on-paper { background: var(--paper); }

/* -------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--midnight); --btn-fg: var(--alpine); --btn-bd: var(--midnight);
  display: inline-flex; align-items: center; gap: .7em;
  padding: .95em 1.7em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: 2px;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .35s var(--ease-soft), color .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.btn .arw { transition: transform .4s var(--ease); }
.btn:hover .arw { transform: translateX(.3em); }
.btn:hover { --btn-bg: transparent; --btn-fg: var(--midnight); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--midnight); --btn-bd: color-mix(in srgb, var(--midnight) 28%, transparent); }
.btn--ghost:hover { --btn-bg: var(--midnight); --btn-fg: var(--alpine); --btn-bd: var(--midnight); }

.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--midnight); --btn-bd: var(--gold); }
.btn--gold:hover { --btn-bg: transparent; --btn-fg: var(--gold-deep); }

.on-dark .btn--ghost, .btn--on-dark {
  --btn-bg: transparent; --btn-fg: var(--alpine); --btn-bd: var(--line-dark);
}
.on-dark .btn--ghost:hover, .btn--on-dark:hover { --btn-bg: var(--alpine); --btn-fg: var(--midnight); --btn-bd: var(--alpine); }
.on-dark .btn:not(.btn--ghost):not(.btn--gold) { --btn-bg: var(--alpine); --btn-fg: var(--midnight); --btn-bd: var(--alpine); }
.on-dark .btn:not(.btn--ghost):not(.btn--gold):hover { --btn-bg: transparent; --btn-fg: var(--alpine); }

.btns { display: flex; flex-wrap: wrap; gap: .9rem 1rem; align-items: center; }

/* A quiet text link that reads as the next step rather than a command. */
.next {
  display: inline-flex; align-items: baseline; gap: .5em;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none;
  padding-bottom: .3em;
  background-image: linear-gradient(var(--mineral-d), var(--mineral-d));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .45s var(--ease);
}
.next:hover { background-size: 100% 1px; }
.next .arw { transition: transform .4s var(--ease); }
.next:hover .arw { transform: translateX(.35em); }
.on-dark .next { background-image: linear-gradient(var(--gold), var(--gold)); }

/* Sits under a pair of buttons, so it must not read as a third one. */
.next--quiet {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: var(--t-base); color: var(--ink-soft);
}

/* ==========================================================================
   HEADER
   The mark is centred and given room above and below so it reads as the crown
   of the page rather than a logo wedged between two menus. On scroll the bar
   contracts rather than snapping into a generic sticky strip: the mark
   reduces, the padding tightens and the ground fades in.
   ========================================================================== */

.utilbar {
  background: var(--midnight);
  color: color-mix(in srgb, var(--alpine) 74%, transparent);
  font-size: var(--t-xs);
  letter-spacing: .06em;
}
.utilbar__inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: .4rem clamp(1.4rem, 4vw, 3rem);
  min-height: 40px;
  font-weight: 600;
  text-align: center;
}
.utilbar a { text-decoration: none; transition: color .3s var(--ease-soft); }
.utilbar a:hover { color: var(--gold); }
.utilbar__links { display: flex; gap: clamp(1.2rem, 3vw, 2rem); align-items: center; }
.utilbar__expert { display: inline-flex; gap: .55rem; align-items: center; margin: 0; }
.utilbar__expert strong { color: var(--alpine); font-weight: 700; letter-spacing: .04em; }
.utilbar .is-accent { color: var(--gold); }

.hdr {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--alpine) 0%, transparent);
  transition: background .5s var(--ease-soft), box-shadow .5s var(--ease-soft), border-color .5s var(--ease-soft);
  border-bottom: 1px solid transparent;
}
/* Pages that open on a light ground want the header opaque from the start. */
.hdr--solid, .hdr.is-stuck {
  background: color-mix(in srgb, var(--alpine) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line);
}
.hdr.is-stuck { box-shadow: 0 1px 30px -18px rgba(16,38,61,.5); }

.hdr__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.9rem, 1.7vw, 1.5rem);
  transition: padding-block .5s var(--ease);
}
.hdr.is-stuck .hdr__bar { padding-block: .7rem; }

.hdr__logo {
  grid-column: 2;
  display: block; justify-self: center;
  width: clamp(164px, 15.5vw, 224px);
  transition: width .5s var(--ease);
}
.hdr.is-stuck .hdr__logo { width: clamp(132px, 11vw, 158px); }
.hdr__logo img { width: 100%; height: auto; }

.hdr__nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.hdr__nav--left { justify-content: flex-end; }
.hdr__nav--right { grid-column: 3; justify-content: flex-start; }

.hdr__nav a {
  position: relative;
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  padding-block: .45rem;
  color: var(--midnight);
}
/* The underline fills from the centre out, like a waterline finding level. */
.hdr__nav a::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 1px; background: var(--mineral-d);
  transform: translateX(-50%);
  transition: width .45s var(--ease);
}
.hdr__nav a:hover::after,
.hdr__nav a[aria-current]::after { width: 100%; }
.hdr__nav a[aria-current]::after { background: var(--gold-deep); }

.hdr__toggle, .hdr__call { display: none; }

/* Drawer ------------------------------------------------------------- */
.hdr__drawer {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--alpine);
  padding: var(--sp-2) 0 var(--sp-4);
}
.hdr__drawer.is-open { display: block; }
.drawer__group { border-bottom: 1px solid var(--line); padding: .3rem 0; }
.drawer__group > a, .drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem .2rem; text-decoration: none;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.drawer__sub { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: 0 .2rem 1rem; }
.drawer__sub a {
  font-size: var(--t-sm); text-transform: none; letter-spacing: 0;
  font-weight: 400; color: var(--ink-soft); text-decoration: none;
}
.drawer__sub a:hover { color: var(--midnight); }
.drawer__cta { padding-top: var(--sp-3); display: grid; gap: .7rem; }

@media (max-width: 900px) {
  :root { --hdr-h: 96px; }
  .hdr__bar { grid-template-columns: 1fr auto 1fr; padding-block: .9rem; }
  .hdr__nav { display: none; }
  .hdr__toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    grid-column: 1; justify-self: start;
    background: none; border: 0; padding: .6rem .2rem; cursor: pointer;
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  }
  .hdr__call {
    display: inline-flex; align-items: center; justify-content: center;
    grid-column: 3; justify-self: end;
    width: 2.6rem; height: 2.6rem;
    border: 1px solid var(--line); border-radius: 50%;
    text-decoration: none;
    transition: background .3s var(--ease-soft), color .3s var(--ease-soft), border-color .3s var(--ease-soft);
  }
  .hdr__call:hover, .hdr__call:focus-visible { background: var(--midnight); border-color: var(--midnight); color: var(--alpine); }
  .hdr__call svg { width: 17px; height: 17px; }
  .hdr__logo { width: clamp(150px, 42vw, 180px); }
  .hdr.is-stuck .hdr__logo { width: clamp(132px, 34vw, 150px); }
  .utilbar__links { display: none; }
  .utilbar__inner { justify-content: center; }
}

/* The hamburger: three rules that become a cross. */
.burger { width: 20px; height: 12px; position: relative; display: inline-block; }
.burger span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: currentColor; transition: transform .4s var(--ease), opacity .25s;
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 5px; }
.burger span:nth-child(3) { top: 10px; }
[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Desktop dropdown --------------------------------------------------- */
.hdr__has-menu { position: relative; }
.megamenu {
  position: absolute; top: calc(100% + .9rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px; padding: 1.4rem 1.6rem;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -40px rgba(16,38,61,.55);
  display: grid; gap: .1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease-soft), transform .4s var(--ease), visibility .3s;
  /* A short delay before closing, so a diagonal move toward the panel does
     not snap it shut on the way. */
  transition-delay: .18s;
}
/* The panel sits below the link with a gap. Without something spanning that
   gap the cursor leaves the trigger before it reaches the panel and the menu
   closes underneath it. This bridge is part of the panel, so hovering it keeps
   the trigger hovered too. */
.megamenu::before {
  content: '';
  position: absolute;
  left: -1rem; right: -1rem;
  top: -1.15rem; height: 1.25rem;
}
.hdr__has-menu:hover .megamenu,
.hdr__has-menu.is-open .megamenu,
.hdr__has-menu:focus-within .megamenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.megamenu a {
  padding: .5rem .2rem; font-size: var(--t-sm); font-weight: 500;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.megamenu a::after { display: none; }
.megamenu a:hover { color: var(--mineral-d); }
.megamenu__head {
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate); margin: .8rem 0 .3rem; font-weight: 700;
}
.megamenu__head:first-child { margin-top: 0; }
@media (max-width: 900px) { .megamenu { display: none; } }

/* ==========================================================================
   HERO
   Asymmetric rather than full-bleed. The photograph holds the right side and
   runs off the edge of the viewport; the headline crosses its boundary. This
   is a better composition than a centred banner, and it also keeps the
   photograph rendering near its native resolution instead of being stretched
   across a wide display.
   ========================================================================== */

.hero {
  position: relative;
  background: var(--alpine);
  overflow: clip;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  min-height: clamp(460px, 68vh, 680px);
  padding-block: clamp(3rem, 6vw, 6rem);
}
.hero__copy { position: relative; z-index: 2; padding-right: clamp(0rem, 3vw, 3rem); }
.hero__copy .display { margin-bottom: .5em; }
.hero__copy .lede { max-width: 42ch; }
.hero .btns { margin-top: var(--sp-3); }
.hero__aside { margin-top: var(--sp-3); }

/* The photograph panel: bleeds to the right edge of the viewport. */
.hero__figure {
  position: relative;
  align-self: stretch;
  min-height: clamp(320px, 52vh, 640px);
  margin-right: calc(var(--gutter-wide) * -1);
  overflow: hidden;
}
.hero__figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 60%;
}
/* A soft edge on the left so the type can cross onto the image. */
.hero__figure::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--alpine), color-mix(in srgb, var(--alpine) 55%, transparent) 3.5%, transparent 9%);
  pointer-events: none;
}

/* Steam. Two very slow, very soft plumes. Decorative only. */
.steam { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.steam i {
  position: absolute; bottom: -20%;
  width: 46%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255,255,255,.5), rgba(255,255,255,0) 72%);
  filter: blur(14px);
  opacity: 0;
  animation: drift 19s var(--ease-soft) infinite;
}
.steam i:nth-child(1) { left: 14%; animation-delay: 0s; }
.steam i:nth-child(2) { left: 34%; animation-delay: -7s; animation-duration: 24s; }
.steam i:nth-child(3) { left: 54%; animation-delay: -13s; animation-duration: 21s; }
@keyframes drift {
  0%   { transform: translate3d(0, 12%, 0) scale(.82); opacity: 0; }
  22%  { opacity: .5; }
  70%  { opacity: .28; }
  100% { transform: translate3d(5%, -78%, 0) scale(1.35); opacity: 0; }
}

/* The temperature line: 28 outside, 102 inside. */
.temps {
  display: inline-flex; align-items: baseline; gap: .85rem;
  font-size: var(--t-sm); letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); font-weight: 600;
}
.temps__val {
  font-family: var(--display); font-size: var(--t-xl); font-weight: 500;
  letter-spacing: -.01em; text-transform: none; line-height: 1;
  color: var(--midnight);
  font-variant-numeric: tabular-nums;
  transition: color .8s var(--ease-soft);
}
.temps__val.is-hot { color: var(--gold-deep); }
.on-dark .temps { color: color-mix(in srgb, var(--alpine) 66%, transparent); }
.on-dark .temps__val { color: var(--alpine); }
.on-dark .temps__val.is-hot { color: var(--gold); }
.on-dark .temps__rule { background: var(--line-dark); }
.temps__rule { width: clamp(1.6rem, 4vw, 3.4rem); height: 1px; background: var(--line); position: relative; top: -.35em; }
.temps__rule::after {
  content: ''; position: absolute; inset: 0; transform-origin: left;
  background: linear-gradient(90deg, var(--mineral-d), var(--gold));
  transform: scaleX(var(--fill, 0)); transition: transform 1.4s var(--ease);
}

/* On a phone the hero becomes one full-bleed photograph with the headline
   sitting on it, the way an app opens. The type is anchored to the bottom so
   it lands over the darkest part of the frame rather than floating. */
@media (max-width: 1000px) {
  .hero__grid {
    position: relative;
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0;
    padding-block: 0;
  }
  .hero__figure {
    position: absolute; inset: 0;
    margin-inline: calc(var(--gutter-wide) * -1);
    min-height: 0;
    order: 0;
  }
  .hero__figure img { object-position: 78% 60%; }
  .hero__figure::after {
    background:
      linear-gradient(180deg, rgba(16,38,61,.46) 0%, rgba(16,38,61,.38) 24%, rgba(16,38,61,.74) 62%, rgba(16,38,61,.95) 100%);
  }

  .hero__copy {
    position: relative; z-index: 2;
    order: 1;
    padding: clamp(4rem, 16vh, 7rem) 0 clamp(2.2rem, 6vh, 3.2rem);
    min-height: clamp(470px, 76vh, 680px);
    display: flex; flex-direction: column; justify-content: flex-end;
    color: var(--alpine);
  }
  .hero__copy .display { color: var(--alpine); }
  .hero__copy .lede { color: color-mix(in srgb, var(--alpine) 88%, transparent); max-width: 34ch; }
  .hero__copy .eyebrow { color: color-mix(in srgb, var(--alpine) 78%, transparent); }
  .hero__copy .eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); }

  /* Buttons have to invert against the photograph. */
  .hero__copy .btn {
    --btn-bg: var(--alpine); --btn-fg: var(--midnight); --btn-bd: var(--alpine);
  }
  .hero__copy .btn--ghost {
    --btn-bg: rgba(247,245,240,.08); --btn-fg: var(--alpine);
    --btn-bd: rgba(247,245,240,.45);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .hero__copy .next--quiet { color: color-mix(in srgb, var(--alpine) 82%, transparent); }
  .hero__copy .next { background-image: linear-gradient(var(--gold), var(--gold)); }
  .hero .btns { margin-top: var(--sp-3); }
}

@media (max-width: 560px) {
  .hero__copy .btns { display: grid; grid-template-columns: 1fr; gap: .7rem; }
  .hero__copy .btn { justify-content: center; }
}

/* ==========================================================================
   THE COLORADO MOMENT
   The section that argues the cold is the point. The number is the hero;
   the photograph arrives underneath it as you scroll.
   ========================================================================== */

.moment { position: relative; background: var(--midnight); color: var(--alpine); }

/* The photographic half carries only the two display lines. Body copy over a
   busy photograph was unreadable and looked cheap, so the prose moved down
   onto solid ground where it can actually be read. */
.moment__stage {
  position: relative;
  overflow: clip;
  min-height: clamp(400px, 58vh, 600px);
  display: grid; place-items: center;
  text-align: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.moment__photo { position: absolute; inset: 0; }
.moment__photo img { width: 100%; height: 100%; object-fit: cover; opacity: .66; }
.moment__photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(78% 62% at 50% 44%, rgba(16,38,61,.28), rgba(16,38,61,.78) 92%),
    linear-gradient(180deg, rgba(16,38,61,.5), rgba(16,38,61,.12) 45%, var(--midnight));
}
.moment__inner { position: relative; z-index: 2; }
.moment__deg {
  font-family: var(--display);
  font-size: var(--t-5xl); line-height: 1; font-weight: 300;
  letter-spacing: -.02em; margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 2px 40px rgba(16,38,61,.7);
}
.moment__perfect {
  font-family: var(--display); font-style: italic;
  font-size: var(--t-2xl); color: var(--gold);
  margin: .1em 0 0;
  text-shadow: 0 2px 30px rgba(16,38,61,.7);
}

/* The reasoning, on the flat ground under the photograph. */
.moment__say { padding-block: 0 var(--section); }
.moment__say .display { font-size: var(--t-2xl); max-width: 16ch; }

/* ==========================================================================
   SHOP BY HOW YOU LIVE
   Not a grid of equal cards. A stack of wide editorial bands that open as you
   move down them, each with its own photograph revealed on hover.
   ========================================================================== */

.lives { border-top: 1px solid var(--line); }
.life {
  position: relative;
  overflow: clip;
  display: grid;
  grid-template-columns: clamp(3rem, 7vw, 8rem) minmax(0, 1fr) auto;
  align-items: center; gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.6rem, 3.2vw, 2.9rem);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left .5s var(--ease);
}
.life:hover, .life:focus-visible { padding-left: clamp(.6rem, 1.6vw, 1.6rem); }
.life__n {
  display: block;
  font-family: var(--display); font-size: var(--t-lg);
  color: var(--gold-deep); font-variant-numeric: tabular-nums;
}
.life__t { display: block; font-size: var(--t-2xl); font-weight: 500; letter-spacing: -.015em; margin: 0 0 .18em; }
.life__d { display: block; color: var(--ink-soft); margin: 0; max-width: 52ch; font-size: var(--t-base); }
.life__go {
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: 1px solid var(--line);
  transition: background .4s var(--ease-soft), border-color .4s var(--ease-soft), color .4s var(--ease-soft), transform .5s var(--ease);
}
.life:hover .life__go { background: var(--midnight); border-color: var(--midnight); color: var(--alpine); transform: translateX(.25rem); }

/* The photograph that fades in behind the band being pointed at. */
.life__peek {
  position: absolute; right: clamp(5rem, 14vw, 13rem); top: 50%;
  width: clamp(180px, 21vw, 300px); aspect-ratio: 4 / 3;
  transform: translateY(-50%) scale(.96);
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease-soft), transform .6s var(--ease);
  z-index: 1;
}
.life__peek img { width: 100%; height: 100%; object-fit: cover; }
.life:hover .life__peek { opacity: 1; transform: translateY(-50%) scale(1); }
.life > :not(.life__peek) { position: relative; z-index: 2; }
@media (max-width: 900px) {
  .life { grid-template-columns: auto minmax(0,1fr); row-gap: .4rem; }
  .life__go { grid-column: 2; justify-self: start; margin-top: .6rem; }
  .life__peek { display: none; }
}

/* ==========================================================================
   PRODUCTS
   Editorial presentation, not commerce tiles. There is no card: the render
   sits directly on the page ground over a soft contact shadow, and the type
   below it is set like a caption. Alternate columns are nudged down so the
   grid reads as a composition rather than a table.
   ========================================================================== */

.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(2.4rem, 4vw, 4.5rem) clamp(1.6rem, 3vw, 3rem);
}
.pgrid--offset > *:nth-child(even) { transform: translateY(clamp(1rem, 3vw, 3.2rem)); }
@media (max-width: 700px) { .pgrid--offset > *:nth-child(even) { transform: none; } }

.pcard { position: relative; text-decoration: none; display: block; }
.pcard__fig {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.35rem;
}
.pcard__fig::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(58% 54% at 50% 47%, rgba(16,38,61,.075), rgba(16,38,61,0) 72%);
  transition: opacity .5s var(--ease-soft);
}
.pcard:hover .pcard__fig::before { opacity: .55; }
/* The contact shadow, so a cut-out render is grounded without a box. */
.pcard__fig::after {
  content: ''; position: absolute; left: 50%; bottom: 4%;
  width: 62%; height: 9%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(16,38,61,.26), transparent 72%);
  filter: blur(3px);
  transition: width .6s var(--ease), opacity .5s var(--ease-soft);
  z-index: 0;
}
.pcard:hover .pcard__fig::after { width: 70%; opacity: .8; }
.pimg {
  position: relative; z-index: 1;
  max-height: 92%; width: auto; max-width: 86%;
  transition: transform .7s var(--ease);
}
.pcard:hover .pimg { transform: translateY(-.5rem) scale(1.025); }

.pcard__badge {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .55rem;
}
.pcard__badge::before { content: ''; width: 1.4rem; height: 1px; background: var(--gold); }
.pcard__coll { display: block; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.pcard__name { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.015em; margin: .12em 0 .35em; }
.pcard__spec {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
  font-size: var(--t-sm); color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.pcard__spec span { display: inline-flex; gap: .4rem; align-items: baseline; }
.pcard__spec span + span::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--line); align-self: center; margin-right: .5rem; }
.pcard__line { font-size: var(--t-sm); color: var(--ink-soft); margin: .7rem 0 0; max-width: 40ch; }

/* One extra fact, revealed on hover, hidden from a cold reader. */
.pcard__note {
  font-size: var(--t-sm); color: var(--mineral-d);
  margin: .55rem 0 0; max-width: 40ch;
  opacity: 0; transform: translateY(-.25rem);
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease);
}
.pcard:hover .pcard__note, .pcard:focus-visible .pcard__note { opacity: 1; transform: none; }
@media (hover: none) { .pcard__note { opacity: 1; transform: none; } }

.pcard__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .9rem;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.pcard__cta .arw { transition: transform .4s var(--ease); }
.pcard:hover .pcard__cta .arw { transform: translateX(.35em); }

.on-dark .pcard__coll, .on-dark .pcard__spec, .on-dark .pcard__line { color: color-mix(in srgb, var(--alpine) 68%, transparent); }
.on-dark .pcard__badge { color: var(--gold); }

/* Filters ------------------------------------------------------------ */
.filters {
  position: sticky; top: var(--hdr-h); z-index: 40;
  background: color-mix(in srgb, var(--alpine) 95%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-block: 1px solid var(--line);
  margin-bottom: var(--sp-5);
}
.filters__bar { display: none; }
.filters__panel { padding-block: .9rem; }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.filters__row + .filters__row { margin-top: .6rem; }
.filters__label {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate); margin-right: .2rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  background: transparent; border: 1px solid var(--line); border-radius: 100px;
  padding: .42em 1em; cursor: pointer;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft);
  transition: background .3s var(--ease-soft), color .3s var(--ease-soft), border-color .3s var(--ease-soft);
  white-space: nowrap;
}
.chip:hover { border-color: var(--mineral); color: var(--midnight); }
.chip[aria-pressed="true"] { background: var(--midnight); border-color: var(--midnight); color: var(--alpine); }
.filters__count { font-size: var(--t-sm); color: var(--slate); font-variant-numeric: tabular-nums; }
.filters__clear {
  background: none; border: 0; cursor: pointer; font-size: var(--t-sm);
  color: var(--mineral-d); text-decoration: underline; text-underline-offset: .2em; padding: .3rem;
}
.filters__apply { display: none; }
.filters__scrim { display: none; }

/* Desktop keeps the count and clear on the last row of chips. */
@media (min-width: 901px) {
  .filters__row:last-of-type .filters__label ~ .chips { flex: 1; }
  .filters__panel .filters__apply { display: none; }
  .filters__bar { display: none; }
  .filters__row:last-of-type::after { content: ''; }
}

/* -------- phone: compact bar plus a bottom sheet --------------------- */
@media (max-width: 900px) {
  /* backdrop-filter makes an element the containing block for fixed-position
     descendants, which was anchoring the sheet to this bar instead of to the
     viewport. The compact bar does not need the blur, so drop it here. */
  .filters {
    margin-bottom: var(--sp-4);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--alpine);
  }

  .filters__bar {
    display: flex; align-items: center; gap: 1rem;
    padding-block: .6rem;
  }
  .filters__open {
    display: inline-flex; align-items: center; gap: .5rem;
    background: transparent; border: 1px solid var(--line); border-radius: 100px;
    padding: .55em 1.1em; cursor: pointer;
    font-size: var(--t-sm); font-weight: 700; color: var(--midnight);
    -webkit-tap-highlight-color: transparent;
  }
  .filters__open svg { width: 16px; height: 16px; }
  .filters__badge {
    display: inline-grid; place-items: center;
    min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
    border-radius: 100px; background: var(--midnight); color: var(--alpine);
    font-size: .68rem; font-variant-numeric: tabular-nums;
  }
  .filters__bar .filters__count { margin-left: auto; }

  /* The groups become a sheet that slides up over the grid. */
  .filters__panel {
    position: fixed; left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 110;   /* above the sticky header, which is 100 */
    max-height: min(70dvh, 560px); overflow-y: auto;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -20px 50px -24px rgba(16,38,61,.55);
    padding: 1.4rem 0 1.6rem;
    transform: translateY(calc(100% + 60px));
    visibility: hidden;
    transition: transform .38s var(--ease), visibility .38s;
  }
  .filters__panel.is-open { transform: none; visibility: visible; }

  /* A grab handle, so it reads as a sheet rather than a dropdown. */
  .filters__panel::before {
    content: ''; display: block;
    width: 38px; height: 4px; border-radius: 4px;
    background: var(--line); margin: -.5rem auto 1.1rem;
  }

  .filters__row { flex-direction: column; align-items: stretch; gap: .55rem; }
  .filters__row + .filters__row { margin-top: 1.3rem; }
  .chips { gap: .5rem; }
  .chip { padding: .6em 1.05em; font-size: var(--t-base); }

  /* Pinned to the foot of the sheet so it is reachable without scrolling
     back down through every chip. */
  .filters__apply {
    display: block;
    position: sticky; bottom: 0;
    margin-top: 1.6rem;
    padding: 1rem 0 .2rem;
    background: linear-gradient(180deg, rgba(253,252,250,0), var(--paper) 30%);
  }
  .filters__apply .btn { width: 100%; justify-content: center; }

  .filters__scrim {
    display: block; position: fixed; inset: 0; z-index: 105;
    background: rgba(16,38,61,.5);
    opacity: 0; pointer-events: none;
    transition: opacity .35s var(--ease-soft);
  }
  .filters__scrim.is-open { opacity: 1; pointer-events: auto; }
}

/* Filtering fades items rather than flashing the grid. */
.pcard[hidden] { display: none; }
.pgrid.is-filtering .pcard { transition: opacity .28s var(--ease-soft); }
.pgrid.is-filtering { opacity: .55; }

.empty {
  grid-column: 1 / -1;
  padding: var(--sp-5) 0; text-align: center; color: var(--ink-soft);
}

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */

.pd { padding-top: var(--sp-5); }
.pd__top {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
@media (max-width: 900px) { .pd__top { grid-template-columns: 1fr; } }

.pd__stage {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1 / .84;
  background:
    radial-gradient(64% 56% at 50% 46%, color-mix(in srgb, var(--mineral) 17%, transparent), transparent 72%),
    radial-gradient(52% 48% at 50% 50%, rgba(16,38,61,.05), rgba(16,38,61,0) 74%);
}
.pd__stage::after {
  content: ''; position: absolute; left: 50%; bottom: 9%;
  width: 58%; height: 8%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(16,38,61,.2), transparent 72%);
  filter: blur(4px);
}
.pd__stage img { position: relative; z-index: 1; max-height: 84%; width: auto; max-width: 88%; }

.pd__name { font-size: var(--t-3xl); font-weight: 500; letter-spacing: -.02em; margin: .1em 0 .3em; }
.pd__line { font-family: var(--display); font-size: var(--t-xl); line-height: 1.28; color: var(--midnight); max-width: 30ch; }

.specs { border-top: 1px solid var(--line); margin-top: var(--sp-3); }
.spec {
  display: grid; grid-template-columns: minmax(9rem, 32%) 1fr;
  gap: 1rem; padding: .82rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.spec dt { color: var(--slate); letter-spacing: .04em; }
.spec dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

.pillrow { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--sp-2) 0 0; }
.pill {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 100px; padding: .4em 1em;
  color: var(--ink-soft); text-decoration: none;
  transition: border-color .3s, color .3s;
}
.pill:hover { border-color: var(--mineral); color: var(--midnight); }

/* Two-column editorial band used on detail pages and elsewhere. */
.split {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 5vw, 5rem);
  align-items: start;
}
.split--flip > *:first-child { order: 2; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-3); }
  .split--flip > *:first-child { order: 0; }
}
.split h2, .split h3 { font-size: var(--t-2xl); font-weight: 500; letter-spacing: -.015em; }

.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { font-size: var(--t-lg); font-weight: 700; letter-spacing: 0; margin-bottom: .3em; }
.prose ul { margin: 0; padding-left: 1.1rem; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--gold-deep); }

/* ==========================================================================
   FIND YOUR SPA
   A guided, visual selector. One question on screen at a time, answered by
   pressing a large tile rather than filling in a form.
   ========================================================================== */

.finder { position: relative; overflow: clip; }
.finder__progress { display: flex; gap: .4rem; margin-bottom: var(--sp-3); }
.finder__progress i {
  height: 2px; flex: 1; background: var(--line-dark);
  transition: background .5s var(--ease-soft);
}
.finder__progress i.is-done { background: var(--gold); }

.finder__q { display: none; }
.finder__q.is-active { display: block; animation: qIn .55s var(--ease) both; }
@keyframes qIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.finder__ask { font-family: var(--display); font-size: var(--t-3xl); margin-bottom: var(--sp-3); }

.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); gap: .8rem; }
.opt {
  position: relative; text-align: left; cursor: pointer;
  background: transparent; color: inherit;
  border: 1px solid var(--line-dark);
  padding: 1.1rem 1.2rem 1.2rem;
  transition: border-color .35s var(--ease-soft), background .35s var(--ease-soft), transform .45s var(--ease);
}
.opt:hover { border-color: var(--gold); transform: translateY(-3px); }
.opt[aria-pressed="true"] { background: var(--alpine); color: var(--midnight); border-color: var(--alpine); }
.opt__t { display: block; font-size: var(--t-lg); font-weight: 500; letter-spacing: -.01em; }
.opt__d { display: block; font-size: var(--t-sm); opacity: .7; margin-top: .2rem; }

.finder__foot { display: flex; align-items: center; gap: 1.2rem; margin-top: var(--sp-3); flex-wrap: wrap; }
.finder__back { background: none; border: 0; cursor: pointer; color: inherit; opacity: .7; font-size: var(--t-sm); padding: .4rem 0; }
.finder__back:hover { opacity: 1; }

.finder__result { display: none; }
.finder__result.is-active { display: block; animation: qIn .6s var(--ease) both; }

/* ==========================================================================
   FORMS
   Conversational and progressive: the visitor picks what they want first and
   only then is asked for a way to reach them.
   ========================================================================== */

.form { display: grid; gap: var(--sp-3); }
.field { display: grid; gap: .45rem; }
.field > label, .fieldset__legend {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--slate);
}
.input, .select, .textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .85em 1em;
  font-size: var(--t-base);
  transition: border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--mineral-d);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mineral) 24%, transparent);
}
.textarea { min-height: 7.5rem; resize: vertical; }
.hint { font-size: var(--t-sm); color: var(--slate); }
.field--error .input, .field--error .select { border-color: #A4472F; }
.field__err { font-size: var(--t-sm); color: #A4472F; }

fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .45rem; }

/* Choice tiles used instead of a select where the options are the point. */
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: inline-block; cursor: pointer;
  border: 1px solid var(--line); border-radius: 100px;
  padding: .5em 1.15em; font-size: var(--t-sm);
  transition: background .3s var(--ease-soft), border-color .3s var(--ease-soft), color .3s var(--ease-soft);
}
.choice input:checked + span { background: var(--midnight); border-color: var(--midnight); color: var(--alpine); }
.choice input:focus-visible + span { outline: 2px solid var(--mineral-d); outline-offset: 3px; }

/* A step that stays out of the way until it is relevant. */
.step[hidden] { display: none; }
.step { animation: qIn .45s var(--ease) both; }

.formnote {
  font-size: var(--t-sm); color: var(--slate);
  border-left: 1px solid var(--gold); padding-left: 1rem;
}

/* Honeypot: visually gone, still focusable-free for real users. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   FAQ / disclosure
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-size: var(--t-lg); font-weight: 500; letter-spacing: -.01em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: .4rem; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 1.5px solid var(--gold-deep); border-bottom: 1.5px solid var(--gold-deep);
  transform: rotate(45deg); transform-origin: center;
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq__a { padding: 0 clamp(0rem, 6vw, 4rem) 1.5rem 0; color: var(--ink-soft); max-width: 72ch; }
.faq details[open] .faq__a { animation: qIn .4s var(--ease) both; }

/* ==========================================================================
   LOCATIONS
   ========================================================================== */
.loc-hero { position: relative; overflow: clip; }
.loc-hero__img { position: absolute; inset: 0; }
.loc-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.loc-hero__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(16,38,61,.9) 12%, rgba(16,38,61,.62) 48%, rgba(16,38,61,.28));
}
.loc-hero__in { position: relative; z-index: 2; padding-block: clamp(4rem, 10vw, 8.5rem); }

.storecard {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
@media (max-width: 820px) { .storecard { grid-template-columns: 1fr; } }
.storecard address { font-style: normal; font-size: var(--t-lg); line-height: 1.5; }
.hours { display: grid; gap: .3rem; font-size: var(--t-sm); margin-top: var(--sp-2); }
.hours div { display: flex; justify-content: space-between; gap: 2rem; max-width: 22rem; padding-block: .18rem; border-bottom: 1px dotted var(--line); }

/* A service area, stated as such - never dressed up as a storefront. */
.servicearea {
  border: 1px solid var(--line); border-left: 2px solid var(--mineral);
  padding: 1.25rem 1.5rem; font-size: var(--t-sm); color: var(--ink-soft);
  background: var(--paper);
}
.on-dark .servicearea { background: var(--midnight-2); border-color: var(--line-dark); border-left-color: var(--gold); color: color-mix(in srgb, var(--alpine) 80%, transparent); }

/* Weather / fact strip used on location pages. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fact { background: var(--paper); padding: 1.4rem 1.5rem; }
.fact__n { font-family: var(--display); font-size: var(--t-2xl); line-height: 1; color: var(--midnight); font-variant-numeric: tabular-nums; }
.fact__l { font-size: var(--t-sm); color: var(--slate); margin-top: .4rem; }
.fact__src { font-size: var(--t-xs); color: var(--slate); opacity: .8; margin-top: .5rem; }

/* ==========================================================================
   CLOSING PANEL + FOOTER
   ========================================================================== */

.closer { position: relative; overflow: clip; background: var(--midnight); color: var(--alpine); text-align: center; }
.closer__img { position: absolute; inset: 0; }
.closer__img img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.closer__img::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(110% 80% at 50% 45%, rgba(16,38,61,.35), rgba(16,38,61,.9) 76%);
}
.closer__in { position: relative; z-index: 2; padding-block: clamp(5rem, 12vw, 10rem); }
.closer__a { font-family: var(--display); font-size: var(--t-4xl); line-height: 1; color: var(--alpine); }
.closer__b { font-family: var(--display); font-size: var(--t-4xl); line-height: 1; color: var(--gold); font-style: italic; }
.closer .lede, .closer p { color: var(--alpine); }
.closer .btns { justify-content: center; margin-top: var(--sp-4); }

.ftr { background: var(--midnight); color: color-mix(in srgb, var(--alpine) 76%, transparent); }
.ftr a { text-decoration: none; transition: color .3s var(--ease-soft); }
.ftr a:hover { color: var(--gold); }

.ftr__crown { text-align: center; padding-block: var(--sp-6) var(--sp-4); border-bottom: 1px solid var(--line-dark); }
.ftr__crown img { width: clamp(190px, 24vw, 268px); margin: 0 auto; }
.ftr__tag { font-family: var(--display); font-size: var(--t-xl); color: var(--alpine); margin: var(--sp-2) 0 0; }

.ftr__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: var(--sp-4) var(--sp-3);
  padding-block: var(--sp-5);
}
.ftr__col h2 {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--alpine); margin: 0 0 1.1rem;
}
.ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ftr__col a { font-size: var(--t-sm); }

.ftr__contact { font-style: normal; display: grid; gap: .9rem; font-size: var(--t-sm); }
.ftr__phone { font-family: var(--display); font-size: var(--t-xl); color: var(--alpine); }
.ftr__addr { display: grid; gap: .15rem; }
.ftr__addr strong { color: var(--alpine); font-weight: 600; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; }

.ftr__end {
  border-top: 1px solid var(--line-dark);
  padding-block: var(--sp-3) var(--sp-4);
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; justify-content: space-between;
  font-size: var(--t-xs);
}
.ftr__legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.ftr__partners {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .5rem 1.4rem;
  border-top: 1px solid var(--line-dark);
  padding-block: var(--sp-3);
  font-size: var(--t-sm);
}
.ftr__partners-label {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: color-mix(in srgb, var(--alpine) 55%, transparent);
}
.ftr__last { font-family: var(--display); font-style: italic; font-size: var(--t-lg); color: var(--gold); text-align: center; padding-bottom: var(--sp-4); }

/* A visible marker that a placeholder is still in the page. Development
   only - it never renders once real contact details are configured. */
.placeholder-flag {
  margin: 0;
  background: #7A3B12; color: #fff; font-size: var(--t-xs);
  padding: .5rem 1rem; text-align: center; letter-spacing: .06em;
}

/* ==========================================================================
   BREADCRUMBS + UTILITIES
   ========================================================================== */
.crumbs { font-size: var(--t-sm); color: var(--slate); padding-block: var(--sp-2) 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--line); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--midnight); }
.on-dark .crumbs, .on-dark .crumbs a { color: color-mix(in srgb, var(--alpine) 66%, transparent); }

.stack > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.figure figcaption { font-size: var(--t-sm); color: var(--slate); margin-top: .7rem; }

/* A full-bleed photographic band with type over it. */
.band { position: relative; overflow: clip; color: var(--alpine); }
.band__img { position: absolute; inset: 0; }
.band__img img { width: 100%; height: 100%; object-fit: cover; }
.band__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,38,61,.88), rgba(16,38,61,.5) 55%, rgba(16,38,61,.25)); }
.band__in { position: relative; z-index: 2; padding-block: clamp(3.5rem, 8vw, 7rem); }

/* Scroll-reveal. Elements start slightly low and settle once seen. */
.rise { opacity: 0; transform: translateY(20px); }
.rise.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease-soft), transform .9s var(--ease); }
.rise-2 { transition-delay: .08s; }
.rise-3 { transition-delay: .16s; }

/* ==========================================================================
   MOTION AND PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .steam { display: none; }
  .rise { opacity: 1; transform: none; }
  .pgrid--offset > *:nth-child(even) { transform: none; }
}

@media print {
  .utilbar, .hdr__drawer, .filters, .closer, .steam { display: none; }
  body { background: #fff; }
  .hdr { position: static; }
  a[href^="/"]::after { content: ' (regencyhottubs.com' attr(href) ')'; font-size: .8em; color: #555; }
}

/* ==========================================================================
   ASK MODAL
   Opened from a product page so nobody loses their place. Uses the native
   <dialog> element, which brings the focus trap, Escape handling and inert
   background with it rather than needing them rebuilt in JavaScript.
   ========================================================================== */

.modal {
  border: 0; padding: 0;
  width: min(94vw, 620px);
  max-height: min(92dvh, 860px);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 50px 90px -40px rgba(16,38,61,.6);
  overflow: auto;
}
.modal::backdrop {
  background: rgba(16,38,61,.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal[open] { animation: modalIn .4s var(--ease) both; }
.modal[open]::backdrop { animation: fadeIn .4s var(--ease-soft) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal__box { position: relative; padding: clamp(1.5rem, 4vw, 2.4rem); display: grid; gap: 1.4rem; }

.modal__x {
  position: absolute; top: .9rem; right: .9rem;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer; color: var(--slate);
  transition: background .3s var(--ease-soft), color .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
.modal__x:hover { background: var(--midnight); border-color: var(--midnight); color: var(--alpine); }
.modal__x svg { width: 15px; height: 15px; }

.modal__head {
  display: grid; grid-template-columns: 92px 1fr; gap: 1.2rem; align-items: center;
  padding-right: 2.4rem;
  border-bottom: 1px solid var(--line); padding-bottom: 1.3rem;
}
.modal__thumb { display: grid; place-items: center; }
.modal__thumb .pimg { max-width: 100%; max-height: 78px; width: auto; }
.modal__title { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.015em; margin: 0 0 .25em; }
.modal__spec { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.modal__body { display: grid; gap: 1.1rem; }
.modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) {
  .modal__head { grid-template-columns: 68px 1fr; gap: .9rem; }
  .modal__row { grid-template-columns: 1fr; }
}
.modal__done { text-align: left; }

/* A section header that does not fill its container reads better centred than
   pinned to the left of a wide, otherwise empty row. Only the header's own
   direct children are affected - the grids, splits and lists below it keep
   their own alignment. */
.wrap--centerhead > .eyebrow,
.wrap--centerhead > .display,
.wrap--centerhead > .lede,
.wrap--centerhead > h1,
.wrap--centerhead > h2,
.wrap--centerhead > h3 {
  text-align: center;
  margin-inline: auto;
}
.wrap--centerhead > .eyebrow { justify-content: center; }
.wrap--centerhead > .eyebrow::before {
  content: ''; flex: 1; height: 1px; max-width: 5rem;
  background: linear-gradient(270deg, var(--gold), transparent);
}
/* Anything the header introduces still starts from the left. */
.wrap--centerhead > .split,
.wrap--centerhead > .pgrid,
.wrap--centerhead > .faq,
.wrap--centerhead > .facts,
.wrap--centerhead > .pillrow,
.wrap--centerhead > .storecard { text-align: left; }

/* ==========================================================================
   MOBILE TAB BAR
   On a phone the site behaves like an app: a fixed bottom bar carrying the
   five things people came to do, with the guided selector raised in the
   middle. Above the mobile breakpoint the centred header does this job and
   the bar is not rendered at all.
   ========================================================================== */

.tabbar { display: none; }

@media (max-width: 900px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: color-mix(in srgb, var(--alpine) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    backdrop-filter: saturate(1.6) blur(18px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 34px -20px rgba(16,38,61,.65);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: .24rem;
    padding: .55rem .2rem .55rem;
    min-height: 54px;
    text-decoration: none;
    color: var(--slate);
    -webkit-tap-highlight-color: transparent;
  }
  .tab__icon { display: grid; place-items: center; width: 24px; height: 24px; }
  .tab svg { width: 22px; height: 22px; }
  .tab__label {
    font-size: .66rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; line-height: 1;
  }
  .tab:active { transform: scale(.94); transition: transform .12s; }
  .tab[aria-current] { color: var(--midnight); }

  /* The guided selector is the one action worth raising out of the row. */
  .tab--accent { justify-content: flex-end; }
  .tab--accent .tab__icon {
    width: 44px; height: 44px; margin-top: -18px;
    border-radius: 50%;
    background: var(--midnight); color: var(--alpine);
    box-shadow: 0 8px 20px -8px rgba(16,38,61,.7);
    border: 3px solid var(--alpine);
  }
  .tab--accent svg { width: 20px; height: 20px; }
  .tab--accent[aria-current] .tab__icon { background: var(--gold-deep); }

  /* Nothing should end up underneath the bar. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* The drawer opens above it. */
  .hdr__drawer { max-height: calc(100dvh - var(--hdr-h) - 56px); overflow-y: auto; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .tab:active { transform: none; }
}

/* ==========================================================================
   ADMIN
   Not part of the public brand surface. Plain, dense and quick to scan.
   ========================================================================== */

.adm__top { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; margin-bottom: 1.6rem; }
.adm__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.adm__filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.2rem; }
.adm__filters .input { flex: 1 1 18rem; }
.adm__filters .select { flex: 0 0 auto; }
.adm__count { font-size: var(--t-sm); color: var(--slate); margin-bottom: 1rem; }

.adm__list { border-top: 1px solid var(--line); }
.adm__row { border-bottom: 1px solid var(--line); }
.adm__row > summary {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: 11rem 1fr 1fr auto;
  gap: 1rem; align-items: center;
  padding: .9rem .2rem;
  font-size: var(--t-sm);
}
.adm__row > summary::-webkit-details-marker { display: none; }
.adm__row[open] > summary { background: var(--paper); }
.adm__when { color: var(--slate); font-variant-numeric: tabular-nums; }
.adm__who { font-weight: 600; }
.adm__what { color: var(--ink-soft); }
.adm__tag {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .25em .7em; border-radius: 100px; border: 1px solid var(--line); color: var(--slate);
}
.adm__tag--sent { color: #2E6B4F; border-color: #B7D5C4; }
.adm__tag--failed { color: #A4472F; border-color: #E2BDB2; }
.adm__detail { padding: .4rem .2rem 1.4rem; }
.adm__detail dd { overflow-wrap: anywhere; }
.adm__delete { margin-top: 1rem; }
.adm__delete button {
  background: none; border: 0; cursor: pointer; padding: .3rem 0;
  font-size: var(--t-sm); color: #A4472F;
  text-decoration: underline; text-underline-offset: .2em;
}

@media (max-width: 760px) {
  .adm__row > summary { grid-template-columns: 1fr auto; row-gap: .2rem; }
  .adm__when { grid-column: 1 / -1; }
}

/* ==========================================================================
   ASK REGENCY
   A quiet launcher, not a bubble that shoves itself in front of people.
   ========================================================================== */

.ask-launch {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 88;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8em 1.2em;
  background: var(--midnight); color: var(--alpine);
  border: 1px solid var(--midnight); border-radius: 100px;
  cursor: pointer;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .04em;
  box-shadow: 0 14px 34px -14px rgba(16,38,61,.65);
  transition: transform .35s var(--ease), background .35s var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}
.ask-launch:hover { transform: translateY(-2px); }
.ask-launch svg { width: 18px; height: 18px; }
.ask-launch[aria-expanded="true"] { opacity: 0; pointer-events: none; }

.ask {
  position: fixed; z-index: 120;
  right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  width: min(94vw, 420px);
  max-height: min(78dvh, 640px);
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 40px 80px -30px rgba(16,38,61,.55);
  overflow: hidden;
  animation: modalIn .35s var(--ease) both;
}
.ask__top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: var(--midnight); color: var(--alpine);
}
.ask__title { margin: 0; font-weight: 600; letter-spacing: -.01em; }
.ask__sub { margin: .15rem 0 0; font-size: var(--t-xs); color: color-mix(in srgb, var(--alpine) 66%, transparent); }
.ask__x {
  background: none; border: 0; cursor: pointer; color: inherit; padding: .2rem;
  opacity: .75; transition: opacity .25s;
}
.ask__x:hover { opacity: 1; }
.ask__x svg { width: 18px; height: 18px; }

.ask__log { flex: 1; overflow-y: auto; padding: 1.1rem 1.2rem; display: grid; gap: .9rem; align-content: start; }
.ask__msg { font-size: var(--t-sm); line-height: 1.6; }
.ask__msg p { margin: 0 0 .6em; }
.ask__msg p:last-child { margin: 0; }
.ask__msg a { color: var(--mineral-d); }
.ask__msg--bot { color: var(--ink); }
.ask__msg--me {
  justify-self: end; max-width: 85%;
  background: var(--midnight); color: var(--alpine);
  padding: .65rem .9rem; border-radius: 12px 12px 2px 12px;
}
.ask__msg--err { color: #A4472F; }
.ask__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ask__chips .chip { font-size: var(--t-xs); padding: .4em .85em; }

.ask__typing { display: inline-flex; gap: .25rem; align-items: center; }
.ask__typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--slate); animation: blink 1.2s infinite; }
.ask__typing i:nth-child(2) { animation-delay: .18s; }
.ask__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.ask__form {
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .8rem 1.2rem; border-top: 1px solid var(--line);
}
.ask__input {
  flex: 1; resize: none; max-height: 7rem;
  border: 1px solid var(--line); border-radius: 10px;
  padding: .6em .8em; font-size: var(--t-sm); background: var(--alpine);
}
.ask__input:focus { outline: none; border-color: var(--mineral-d); }
.ask__send {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  background: var(--midnight); color: var(--alpine);
  border: 0; border-radius: 50%; cursor: pointer;
  transition: opacity .25s;
}
.ask__send[disabled] { opacity: .4; cursor: default; }
.ask__send svg { width: 17px; height: 17px; }
.ask__foot {
  margin: 0; padding: 0 1.2rem .9rem;
  font-size: var(--t-xs); color: var(--slate);
}

@media (max-width: 900px) {
  /* Clear of the tab bar, and out of the way of its raised centre button. */
  .ask-launch { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); right: 1rem; }
  .ask-launch__label { display: none; }
  .ask-launch { padding: .85em; }
  .ask {
    right: 0; left: 0; bottom: 0;
    width: 100%;
    max-height: 88dvh;
    border-radius: 14px 14px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}