/* EleVate Mobile IV: hand-built, one look top to bottom.
   Their launch-post language (Aug–Dec 2025): solid royal blue + bright cyan, tall condensed capitals (Oswald, the face
   their own posts use), white type on blue, navy ink on pale sky. ONE signature move: the cyan box behind the key word.
   House margins: colour grounds run edge to edge; words and photos sit in the 1240px column
   (~450px each side at 2140, 100px at 1440, 20px on phones). */
/* The two faces, hosted here (both SIL Open Font License; the Latin files Google serves, one variable file holding
   every weight) and preloaded with the page, so the headlines no longer jump when the font arrives from Google.
   A changed file gets a new name (the version is in it).
   Oswald's own box reaches 1.193em above the baseline though its capitals stop at 0.81em, so at these tight line
   heights its letters' box lay over the small label above each headline (the shared check read that as covered).
   The overrides shorten the box to just above the capitals and keep the baseline where it was (ascent minus descent
   stays 0.904em), so no letter moves; only the cyan band on article headlines is painted from the box (50-blog.css). */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/oswald-v57-latin.woff2") format("woff2"); ascent-override: 95%; descent-override: 4.6%; line-gap-override: 0%; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/figtree-v9-latin.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/figtree-v9-latin-italic.woff2") format("woff2"); }
:root {
  --royal: #016AAB;      /* their deep blue (site) */
  --royal-deep: #01548A;
  --cyan: #17CAEA;       /* their cross */
  --cyan-hi: #45D6F0;
  --cyan-text: #B4F0FB;  /* small cyan words on the royal blue: their cyan is too faint there (4.6:1 measured, AA) */
  --ink: #030943;        /* their wordmark navy: reading text only, never a band */
  --ink-soft: #33406E;
  --sky: #EAF4FE;        /* their Instagram ground */
  --white: #FFFFFF;
  --display: "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --col: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --pad: max(var(--gutter), calc((100% - var(--col)) / 2));
  --r: 18px;
  --hd: 84px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 12px); }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cyan); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* The signature move: cyan box, navy letters */
.hl { background: var(--cyan); color: var(--ink); padding: 0 .1em; border-radius: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent; font: 700 16px/1 var(--body); letter-spacing: .01em; text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s, transform .16s ease-out; }
/* every button gives a little under a press */
.btn:active, .area__opt:active, .say:active { transform: scale(.97); }
.btn--big { min-height: 56px; padding: 0 28px; font-size: 17px; }
.btn--cyan { background: var(--cyan); color: var(--ink); }
.btn--cyan:hover { background: var(--cyan-hi); }
.btn--line { border-color: rgba(255, 255, 255, .7); color: var(--white); }
.btn--line:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); }

/* Header: their royal blue, always there, Book always in reach */
.hd { position: sticky; top: 0; z-index: 50; background: var(--royal); color: var(--white); transition: box-shadow .25s; }
.hd.is-stuck { box-shadow: 0 6px 24px -10px rgba(1, 20, 60, .55); }
.hd__in { height: var(--hd); padding-inline: var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hd__logo { display: block; flex: 0 0 auto; }
.hd__logo img { height: 58px; width: auto; }
.hd__act { display: flex; align-items: center; gap: 18px; }
.hd__phone { font: 600 16px/1 var(--body); text-decoration: none; white-space: nowrap; }
/* a phone number stays on one line (build.mjs wraps each one in the words in <one-line>, never a span; the switch
   rewrites data-phone-text) */
one-line, [data-phone-text] { white-space: nowrap; }
@media (max-width: 1359px) and (min-width: 1200px) { .hd__phone-k { display: none; } }
.hd__phone-k { opacity: .78; font-weight: 500; }
.hd__phone:hover [data-phone-text] { text-decoration: underline; text-underline-offset: 4px; }
.hd__call { display: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); color: var(--white); align-items: center; justify-content: center; }
.hd__call:hover { background: rgba(255, 255, 255, .12); }
/* Their Instagram and Facebook: small white logos left of the phone and Book, quieter than Book. Where the menu folds
   into the button they move into the menu instead (see "Below 960") */
.hd__soc { display: flex; align-items: center; gap: 2px; margin-right: -6px; }
.hd__soc .soc { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--white); opacity: .88; transition: opacity .15s, background-color .15s; }
.hd__soc .soc:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.hd__soc .soc-i { width: 21px; height: 21px; }
.nav__soc { display: none !important; }

/* Menu: links in the bar on wide screens; a panel under the bar on phones (it covers the page, never pushes it) */
.nav { flex: 1 1 auto; display: flex; justify-content: center; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.nav__list > li > a { font: 600 16px/1 var(--body); color: var(--white); text-decoration: none; padding: 10px 0; border-bottom: 2px solid transparent; }
.nav__list > li > a:hover { border-bottom-color: var(--cyan); }
.nav__phones, .nav__only-drawer { display: none !important; }
.hd__menu { display: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--white); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.hd__menu span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .2s; }
.hd__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* 1200-1239, the narrowest screens with the menu in the bar: the logos a little smaller and the menu words a little
   closer, so the bar stays on one line with room either side */
@media (min-width: 1200px) and (max-width: 1239px) {
  .hd__soc { gap: 0; }
  .hd__soc .soc { width: 30px; height: 30px; }
  .hd__soc .soc-i { width: 19px; height: 19px; }
  .nav__list { gap: 24px; }
}

/* Cover */
.cover { background: var(--royal); color: var(--white); padding: clamp(20px, 4vw, 64px) var(--pad) clamp(64px, 8vw, 128px); }
.cover__in { display: grid; gap: clamp(36px, 4vw, 64px); align-items: center; }
.cover__words { container-type: inline-size; min-width: 0; }
.cover__h { margin: 0; font: 700 22.5cqi/.88 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.cover__h .ln { display: block; }
.cover__h .hl { display: inline-block; padding: .015em .06em 0; margin-left: -.06em; border-radius: .05em; }
.cover__h .ln:nth-child(2) { margin-block: .04em; }
.cover__lede { margin: clamp(22px, 2.6vw, 34px) 0 0; max-width: 34em; font: 500 clamp(18px, 1.55vw, 21px)/1.5 var(--body); color: rgba(255, 255, 255, .93); text-wrap: pretty; }
.area { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; margin-top: 26px; }
.area__k { font: 600 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .78); margin-right: 6px; }
.area__opt { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .55); background: transparent; color: var(--white); font: 600 15px/1 var(--body); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .16s ease-out; }
.area__opt:hover { border-color: var(--white); }
.area__opt[aria-pressed="true"] { background: var(--white); color: var(--royal); border-color: var(--white); }
.cover__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.cover__proof { margin: 20px 0 0; font: 500 15px/1.4 var(--body); color: rgba(255, 255, 255, .9); }
.stars { color: var(--cyan); letter-spacing: .08em; margin-right: 6px; }
.cover__photo { position: relative; margin: 0; min-width: 0; border-radius: var(--r); overflow: hidden; box-shadow: 0 34px 70px -34px rgba(1, 16, 52, .75); isolation: isolate; }
.cover__photo img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.cover__photo::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, rgba(1, 25, 60, 0), rgba(1, 25, 60, .72)); z-index: 1; pointer-events: none; }
.cover__photo figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tag { font: 600 clamp(17px, 1.5vw, 21px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; background: var(--cyan); color: var(--ink); padding: .3em .45em .26em; border-radius: 6px; }
.cover__photo-line { font: 500 15px/1.4 var(--body); color: var(--white); text-shadow: 0 1px 3px rgba(0, 0, 0, .45); max-width: 30em; text-wrap: balance; }

/* Section heading */
.h2 { margin: 0; font: 700 clamp(56px, 8.4vw, 116px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.h2 .hl { display: inline-block; padding: .03em .08em 0; border-radius: .05em; }
.lede { margin: 24px auto 0; max-width: 36em; font: 500 clamp(17px, 1.45vw, 20px)/1.5 var(--body); color: var(--ink-soft); }

/* Anyplace, so far */
.places { background: var(--sky); padding: clamp(64px, 9vw, 136px) var(--pad); }
.places__head { text-align: center; margin: 0 auto clamp(36px, 4.5vw, 64px); }
.places__body { display: grid; gap: clamp(28px, 3.5vw, 56px); align-items: center; }
.stage { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: #CFE3F5; isolation: isolate; min-width: 0; }
.shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s ease; }
.shot.is-on { opacity: 1; z-index: 1; }
.is-flipping .shot, .is-flipping .pl { transition-duration: .18s; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(to bottom, rgba(1, 25, 60, 0), rgba(1, 25, 60, .74)); pointer-events: none; }
.shot figcaption { position: absolute; left: 20px; right: 20px; bottom: 30px; z-index: 1; display: flex; flex-direction: column; gap: 6px; color: var(--white); }
.shot__name { font: 600 clamp(26px, 2.6vw, 38px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.shot__cap { font: 500 15px/1.4 var(--body); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); text-wrap: balance; }
.stage__bar { position: absolute; left: 20px; right: 20px; bottom: 14px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; z-index: 3; }
.stage__bar span { display: block; height: 100%; background: var(--white); transform-origin: 0 50%; transform: scaleX(0); }
.plist { min-width: 0; }
.plist__names { list-style: none; margin: 0; padding: 0; font: 600 clamp(28px, 2.75vw, 42px)/1 var(--display); text-transform: uppercase; letter-spacing: .005em; color: var(--ink); }
.plist__names li { padding: .06em 0; }
.pl { display: inline-block; margin: 0 0 0 -.14em; padding: .08em .14em .04em; border: 0; border-radius: .08em; background: transparent; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; line-height: 1; text-align: left; cursor: pointer; transition: background-color .5s ease, color .5s ease; }
.pl:hover { color: var(--royal); }
.pl[aria-current="true"] { background: var(--cyan); color: var(--ink); }
.plist__group { margin: clamp(22px, 2.6vw, 34px) 0 0; max-width: 38em; font: 400 clamp(16px, 1.25vw, 18px)/1.55 var(--body); color: var(--ink-soft); }
.plist__group strong { color: var(--ink); font-weight: 700; }

/* Shared section pieces */
.sec-head { text-align: center; margin: 0 auto clamp(36px, 4.5vw, 64px); }
.h2--left { text-align: left; }
.h3 { margin: 0; font: 700 clamp(36px, 4.6vw, 64px)/.95 var(--display); text-transform: uppercase; text-align: center; text-wrap: balance; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cta-row--center { justify-content: center; }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: #10195C; }
.btn--inkline { border-color: var(--ink); color: var(--ink); }
.btn--inkline:hover { background: rgba(3, 9, 67, .08); }

/* Anytime: their cyan as a full field, navy ink, the signature box turns white */
.anytime { background: var(--cyan); color: var(--ink); padding: clamp(64px, 9vw, 136px) var(--pad); }
.anytime .hl { background: var(--white); }
.anytime__in { display: grid; gap: clamp(40px, 5vw, 80px); align-items: center; }
.anytime__lead { margin: 26px 0 0; max-width: 34em; font: 500 clamp(18px, 1.55vw, 21px)/1.55 var(--body); }
.anytime__lead a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.anytime__small { margin: 12px 0 0; font: 600 16px/1.5 var(--body); }
.bubble { position: relative; margin: 30px 0 0; max-width: 32em; padding: 22px 26px 20px; background: var(--white); border-radius: 22px 22px 22px 6px; box-shadow: 0 18px 40px -24px rgba(3, 9, 67, .45); }
.bubble p { margin: 0; font: 500 clamp(18px, 1.5vw, 20px)/1.5 var(--body); }
.bubble cite { display: block; margin-top: 10px; font: 600 14px/1.3 var(--body); font-style: normal; color: var(--ink-soft); }
.phone { margin: 0; justify-self: center; text-align: center; }
.phone__frame { width: min(320px, 72vw); aspect-ratio: 9 / 16; border-radius: 42px; padding: 12px; background: var(--ink); box-shadow: 0 40px 80px -36px rgba(3, 9, 67, .7); margin: 0 auto; }
.phone__frame video { width: 100%; height: 100%; object-fit: cover; border-radius: 31px; display: block; background: #0b1240; }
.phone figcaption { margin-top: 16px; font: 600 16px/1.4 var(--body); }
.phone figcaption span { display: block; font-weight: 500; font-size: 14px; color: var(--ink-soft); }

/* The people */
.people { background: var(--white); padding: clamp(64px, 9vw, 136px) var(--pad); }
.reels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.reel { min-width: 0; }
.reel__play { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: #E9EDF5; cursor: pointer; aspect-ratio: 9 / 14; }
.reel__play img, .reel__play video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__icon { position: absolute; left: 14px; bottom: 14px; width: 54px; height: 54px; border-radius: 50%; background: var(--cyan); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -8px rgba(3, 9, 67, .6); transition: transform .2s; }
@media (hover: hover) and (pointer: fine) { .reel__play:hover .reel__icon { transform: scale(1.08); } } /* a mouse only: a tap would leave it grown */
.reel__q { margin: 16px 0 0; }
.reel__q p { margin: 0; font: 500 17px/1.45 var(--body); color: var(--ink); }
.reel__q cite { display: block; margin-top: 8px; font: 600 13px/1.3 var(--body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--royal); }
.team { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.team figure { margin: 0; }
.team img { width: 100%; height: auto; border-radius: var(--r); }
.team img { height: clamp(240px, 30vw, 440px); object-fit: cover; }
.team figcaption { margin-top: 10px; font: 500 14px/1.4 var(--body); color: var(--ink-soft); }
.names { margin-top: clamp(56px, 7vw, 104px); }
.names__rating { margin: 14px 0 0; text-align: center; font: 600 16px/1.4 var(--body); color: var(--ink-soft); }
.quotes { list-style: none; margin: clamp(28px, 3.5vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
.quote { border-top: 2px solid var(--ink); padding: 22px 0 26px; }
.quote blockquote { margin: 0; }
.quote p { margin: 0; font: 500 clamp(17px, 1.4vw, 19px)/1.55 var(--body); color: var(--ink); }
.quote cite { display: block; margin-top: 10px; font: 600 14px/1.3 var(--body); font-style: normal; color: var(--ink); }
.quote cite span { font-weight: 500; color: var(--ink-soft); }
.nm { background: var(--cyan); color: var(--ink); padding: .02em .22em; border-radius: 4px; font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* The menu: royal field, their twelve drips by their three groups */
.menu { background: var(--royal); color: var(--white); padding: clamp(64px, 9vw, 136px) var(--pad); }
.menu .lede { color: rgba(255, 255, 255, .86); }
.dgroup + .dgroup { margin-top: clamp(40px, 5vw, 72px); }
.dgroup__h { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid rgba(255, 255, 255, .28); font: 600 clamp(18px, 1.5vw, 22px)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-text); }
.drips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
.drip { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.drip__bag { width: min(150px, 56%); height: auto; filter: drop-shadow(0 18px 20px rgba(1, 16, 52, .45)); }
.drip__txt { min-width: 0; }
.drip__who { margin: 0; font: italic 500 15px/1.3 var(--body); color: var(--cyan-text); }
.drip__name { margin: 6px 0 0; font: 700 clamp(22px, 1.8vw, 27px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.drip__price { margin: 6px 0 0; font: 600 20px/1 var(--display); color: var(--white); }
.drip__say { margin: 10px 0 0; font: 400 15px/1.5 var(--body); color: rgba(255, 255, 255, .9); }
.drip__in { margin: 8px 0 0; font: 500 13px/1.45 var(--body); color: rgba(255, 255, 255, .88); }
.menu__addons { margin: clamp(36px, 4vw, 56px) auto 0; max-width: 60em; text-align: center; font: 500 15px/1.6 var(--body); color: rgba(255, 255, 255, .86); }

/* Anywhere */
.anywhere { background: var(--sky); padding: clamp(64px, 9vw, 136px) var(--pad); }
.anywhere__body { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.map { min-width: 0; }
.area-map { display: block; width: 100%; height: auto; }
.m-sea { fill: #DCEBFA; }
.m-nb { fill: #F7FBFF; stroke: #A9C3DE; stroke-width: 1; }
.m-wv { fill: var(--white); stroke: var(--royal); stroke-width: 2.4; stroke-linejoin: round; }
.m-served { stroke: var(--white); stroke-width: 1.2; stroke-linejoin: round; }
.m-served--wv { fill: var(--cyan); }
.m-served--pa { fill: var(--cyan); opacity: .55; }
.m-alle { fill: var(--cyan); stroke: var(--royal); stroke-width: 1.6; }
.m-dot { fill: var(--ink); stroke: var(--white); stroke-width: 1.5; }
.m-town { font: 600 20px/1 var(--body); fill: var(--ink); paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: 4px; stroke-linejoin: round; }
.m-code { font: 700 96px/1 var(--display); fill: var(--royal); opacity: .9; }
.codes { display: grid; gap: clamp(28px, 3vw, 44px); }
.code__n { margin: 0; font: 700 clamp(72px, 7vw, 110px)/.85 var(--display); color: var(--royal); }
.code__k { margin: 8px 0 0; font: 600 15px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.code__tel { display: inline-block; margin-top: 8px; font: 700 clamp(22px, 2vw, 28px)/1.1 var(--display); color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.code__tel:hover { color: var(--royal); }
.code__towns { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; font: 500 15px/1.5 var(--body); color: var(--ink); }
.code__towns li:not(:last-child)::after { content: "·"; margin: 0 .55em; color: var(--royal); }


/* The close */
.close { background: var(--royal); color: var(--white); text-align: center; padding: clamp(64px, 9vw, 136px) var(--pad) clamp(56px, 7vw, 104px); }
.close__h { font-size: clamp(64px, 11vw, 160px); }
.close__photo { margin: clamp(32px, 4vw, 56px) auto 0; max-width: 1040px; }
.close__photo img { width: 100%; height: auto; aspect-ratio: 1440 / 1080; object-fit: cover; border-radius: var(--r); box-shadow: 0 34px 70px -34px rgba(1, 16, 52, .75); }
.close__photo figcaption { margin-top: 12px; font: 500 15px/1.4 var(--body); color: rgba(255, 255, 255, .85); }
.close__line { margin: 22px 0 0; font: 500 16px/1.5 var(--body); color: rgba(255, 255, 255, .88); }

/* Footer */
.ft { background: var(--royal-deep); color: var(--white); text-align: center; }
.ft__in { padding: 56px var(--pad) 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ft__logo img { height: 56px; width: auto; margin-bottom: 8px; }
.ft p { margin: 0; font: 500 16px/1.6 var(--body); }
.ft a { color: var(--white); text-underline-offset: 3px; }
.ft__nums a { font-weight: 700; text-decoration: none; }
.ft__nums a:hover { text-decoration: underline; }
.ft__links .soc-i { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.17em; margin-right: .3em; }
.ft__legal { margin-top: 14px !important; max-width: 60em; font-size: 13px !important; color: rgba(255, 255, 255, .7); }
.ft__omg { margin: 32px var(--pad) 0; padding: 24px 0 36px; border-top: 1px solid rgba(255, 255, 255, .14); text-align: center; }
.ft__omg a { display: inline-block; opacity: .75; transition: opacity .15s; }
.ft__omg a:hover { opacity: 1; }
.ft__omg img { height: 22px; width: auto; margin: 0 auto; }
.ft__omg p { margin-top: 10px; font-size: .78rem; color: rgba(255, 255, 255, .78); }

/* Shared by the hero versions */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.live { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; font: 600 15px/1.3 var(--body); color: rgba(255, 255, 255, .92); }
.live[hidden] { display: none; }
/* with the script on, the line holds its place until the script fills it in (on a slow line it appeared late and the
   opening wall grew 35px under the visitor) */
.js .live[hidden] { display: inline-flex; visibility: hidden; }
.live__dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); }
.live.is-open .live__dot { animation: beat 2.4s ease-in-out infinite; }
.live.is-closed .live__dot { background: rgba(255, 255, 255, .45); }
@keyframes beat { 50% { opacity: .35; } }
.hero-proof { margin: 12px 0 0; font: 500 15px/1.4 var(--body); color: rgba(255, 255, 255, .9); }

/* Hero option: The Wall. Five of their reels edge to edge, tinted royal, the three words on top */
.wall { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: max(600px, calc(100svh - var(--hd) - var(--review, 0px))); background: var(--royal-deep); color: var(--white); }
.wall__films { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; background: var(--royal-deep); }
.wall__film { display: block; width: 100%; height: 100%; min-width: 0; object-fit: cover; background: var(--royal); }
.wall::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(1, 84, 138, .5), rgba(1, 62, 112, .7)); }
.wall__in { position: relative; width: 100%; padding: clamp(32px, 4vw, 64px) var(--pad) clamp(52px, 5vw, 80px); text-align: center; }
.wall__in .area { margin-top: 18px; }
.wall__in .live { margin-top: 12px; }
.wall__h { margin: 0; font: 700 clamp(60px, min(10.4vw, 15svh), 170px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 4px 28px rgba(1, 24, 64, .35); }
.wall__h .ln { display: block; }
.wall__h .hl { display: inline-block; padding: .02em .07em 0; border-radius: .05em; text-shadow: none; }
.wall__h .ln:nth-child(2) { margin-block: .05em; }
.wall__lede { margin: clamp(22px, 2.4vw, 32px) auto 0; max-width: 38em; font: 500 clamp(18px, 1.5vw, 21px)/1.5 var(--body); text-wrap: pretty; }
.wall .hero-cta, .wall .area { justify-content: center; }
.wall .live { justify-content: center; }
.wall__where { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; padding: 0 var(--pad); text-align: center; font: 500 13px/1.4 var(--body); color: rgba(255, 255, 255, .78); }
.wall__story { display: none; }

/* We have a drip for that: what you'd text us on the left, our reply on the right */
.feel { background: var(--sky); padding: clamp(64px, 9vw, 136px) var(--pad); }
.feel__body { display: grid; gap: clamp(26px, 4vw, 64px); align-items: center; max-width: 1120px; margin: 0 auto; }
.feel__says { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.say { position: relative; overflow: hidden; display: block; margin: 0; padding: 14px 22px 15px; border: 0; border-radius: 24px 24px 6px 24px; background: var(--white); color: var(--ink); font: 600 clamp(17px, 1.45vw, 20px)/1.2 var(--body); text-align: right; cursor: pointer; box-shadow: 0 12px 26px -20px rgba(3, 9, 67, .55); transition: background-color .7s ease, color .7s ease, transform .16s ease-out; }
.say:hover { color: var(--royal); }
.say[aria-selected="true"] { background: var(--royal); color: var(--white); }
.feel__answers { position: relative; display: grid; min-width: 0; }
.ans { grid-area: 1 / 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 2.6vw, 40px); align-items: center; padding: clamp(24px, 3vw, 44px); border-radius: 30px 30px 30px 8px; background: var(--white); box-shadow: 0 30px 60px -38px rgba(3, 9, 67, .55); opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.ans.is-on { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
.ans__bag { width: clamp(104px, 11vw, 170px); height: auto; filter: drop-shadow(0 18px 18px rgba(3, 9, 67, .28)); }
.ans__txt { min-width: 0; }
/* the answer's bag and name open that drip's page (2026-11-12, every drip opens its page) */
.ans__bagto { display: block; line-height: 0; }
.ans__name a { color: inherit; text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.ans__name a:hover { color: var(--royal); }
.ans__k { margin: 0; font: 600 13px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--royal); }
.ans__name { margin: 10px 0 0; font: 700 clamp(32px, 3.4vw, 52px)/.92 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.ans__price { margin: 8px 0 0; font: 600 24px/1 var(--display); color: var(--royal); }
.ans__why { margin: 14px 0 0; font: 500 clamp(16px, 1.3vw, 18px)/1.5 var(--body); color: var(--ink-soft); }
.ans__book { margin-top: 20px; }
.feel__bar { position: absolute; left: 30px; right: 30px; bottom: 14px; height: 3px; border-radius: 2px; background: #E2ECF7; overflow: hidden; }
.feel__bar span { display: block; height: 100%; background: var(--cyan); transform-origin: 0 50%; transform: scaleX(0); }
.feel.is-done .feel__bar { visibility: hidden; }

/* More people, more perks: a cyan field, a dial for the headcount, three tickets */
.party { background: var(--cyan); color: var(--ink); padding: clamp(64px, 9vw, 136px) var(--pad); }
.party .hl { background: var(--white); }
.party .lede { color: var(--ink); }
.perk { display: grid; gap: clamp(20px, 3vw, 40px); align-items: stretch; max-width: 1120px; margin: 0 auto; }
.perk__dial { padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r); background: var(--white); box-shadow: 0 30px 60px -40px rgba(3, 9, 67, .5); }
.perk__k { display: block; font: 600 13px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--royal); }
.perk__n { margin: 10px 0 0; font: 700 clamp(64px, 6.6vw, 100px)/.9 var(--display); }
.perk__n output { font-variant-numeric: tabular-nums; }
.perk__n span { font-size: .34em; letter-spacing: .02em; text-transform: uppercase; }
.perk__range { display: block; width: 100%; height: 44px; margin: 14px 0 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.perk__range::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: linear-gradient(to right, var(--royal) var(--fill, 14%), #D7E4F2 var(--fill, 14%)); }
.perk__range::-moz-range-track { height: 10px; border-radius: 5px; background: #D7E4F2; }
.perk__range::-moz-range-progress { height: 10px; border-radius: 5px; background: var(--royal); }
.perk__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; margin-top: -11px; border-radius: 50%; background: var(--white); border: 6px solid var(--royal); box-shadow: 0 6px 14px -6px rgba(3, 9, 67, .6); }
.perk__range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 6px solid var(--royal); }
.perk__scale { display: flex; justify-content: space-between; margin: 2px 0 0; font: 600 12px/1 var(--body); color: var(--ink-soft); }
.perk__say { display: grid; margin: 16px 0 0; font: 600 17px/1.45 var(--body); }
.perk__say > span { grid-area: 1 / 1; visibility: hidden; }
.perk__say > span.is-on { visibility: visible; }
.perk__say b { font-weight: 700; }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.tier { display: flex; flex-direction: column; padding: clamp(20px, 2vw, 28px); border-radius: var(--r); background: rgba(255, 255, 255, .5); transition: background-color .7s ease, color .7s ease; }
.tier[aria-current="true"] { background: var(--royal); color: var(--white); }
.tier__range { margin: 0; font: 700 clamp(22px, 2vw, 30px)/1 var(--display); text-transform: uppercase; }
.tier__range span { font: 600 13px/1 var(--body); letter-spacing: .1em; }
.tier__off { margin: 14px 0 0; font: 700 clamp(72px, 7.2vw, 120px)/.82 var(--display); }
.tier__off span { font-size: .48em; }
.tier__perk { margin: 8px 0 0; font: 600 16px/1.3 var(--body); }
.tier__extra { margin: 14px 0 0; padding-top: 12px; border-top: 1.5px solid currentColor; font: 500 14px/1.45 var(--body); opacity: .9; }

/* Straight from our Instagram */
.insta { background: var(--white); padding: clamp(64px, 9vw, 136px) var(--pad); }
.igs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2vw, 32px) clamp(14px, 1.6vw, 24px); }
.ig { min-width: 0; }
.ig__play { aspect-ratio: 9 / 16; }
.ig__views { position: absolute; top: 12px; right: 12px; padding: 7px 10px; border-radius: 999px; background: rgba(3, 9, 67, .62); color: var(--white); font: 600 12px/1 var(--body); }
.ig__cap { margin: 14px 0 0; font: 500 16px/1.4 var(--body); color: var(--ink); text-wrap: pretty; }
.ig__when { margin: 6px 0 0; font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--royal); }

/* Questions: two separate columns (opening one only pushes its own column down) */
.faq { background: var(--white); padding: clamp(64px, 9vw, 136px) var(--pad); }
.faq .lede a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.faq__cols { display: grid; gap: 0 clamp(28px, 4vw, 64px); align-items: start; max-width: 1120px; margin: 0 auto; }
.faq__col { min-width: 0; }
.qa { border-top: 2px solid var(--ink); }
.faq__col .qa:last-child { border-bottom: 2px solid var(--ink); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; list-style: none; cursor: pointer; font: 700 clamp(20px, 1.7vw, 25px)/1.12 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--royal); }
.qa summary i { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--cyan); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: var(--ink); transition: transform .35s ease; }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::after { transform: rotate(0deg); }
.qa p { margin: 0 0 24px; max-width: 38em; font: 500 17px/1.55 var(--body); color: var(--ink-soft); }

/* 404 */
.cover--404 { padding-block: clamp(64px, 12vw, 160px); }
.nf { text-align: center; }
.nf__h { color: var(--white); }
.nf .cover__lede { margin-inline: auto; }
.nf__cta { justify-content: center; }

/* Wide screens: words left against the picture, picture right */
/* Anyplace keeps the photo beside the list down to tablets, so the place lit up and its photo are always on screen together */
@media (min-width: 721px) {
  .places__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  .cover__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .anytime__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .anywhere__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
@media (max-width: 1199px) and (min-width: 721px) {
  .drips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: sideways rows (the nurses, each drip group, the Instagram reels). The first time one comes on screen its
   cards deal out from a stacked deck, then it glides a card at a time on its own (site.js). No snapping: switching it
   off and on around each glide is what an iPhone turns into a page jerk (CHIdrate, 2026-09-30). Each card gets its
   section's colour behind it, so the deck hides the cards underneath while it is stacked. */
@media (max-width: 720px) {
  .reels, .drips, .igs { display: flex; overflow-x: auto; scrollbar-width: none; gap: 14px; margin-inline: calc(-1 * var(--pad)); padding: 6px var(--pad) 14px; scroll-padding-inline: var(--pad); }
  .reels::-webkit-scrollbar, .drips::-webkit-scrollbar { display: none; }
  .reel { flex: 0 0 74%; background: var(--white); border-radius: var(--r); }
  .drip { flex: 0 0 78%; background: var(--royal); border-radius: var(--r); }
  .is-stacked > * { will-change: transform; }
  /* the words on each card sit a little in from its edges, so the tilted cards under the top of the deck never show
     stray letters beside it */
  .reel__q, .ig__cap, .ig__when, .drip__txt { padding-inline: 12px; }
  .drip__bag { margin-left: 12px; }
  .reel, .ig, .drip { padding-bottom: 8px; }
  .drip__bag { width: 128px; }
  .team img { height: auto; aspect-ratio: 4 / 3; }
  .team { grid-template-columns: minmax(0, 1fr); }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .code__n { font-size: 84px; }
  .m-town { font-size: 22px; }
  .m-code { font-size: 120px; }
  .close__photo img { aspect-ratio: 4 / 3.4; }
}
/* Below 960 the menu folds into the button */
@media (max-width: 1199px) {
  .nav { flex: 0 0 auto; }
  .nav__list { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--royal-deep); padding: 4px var(--pad) 26px; box-shadow: 0 22px 34px -16px rgba(1, 16, 52, .6); max-height: calc(100vh - var(--hd)); overflow-y: auto; overscroll-behavior: contain; }
  .nav__list.is-open { display: flex; }
  .nav__list > li > a { display: block; padding: 18px 0; font: 600 26px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .nav__list > li > a:hover { border-bottom-color: rgba(255, 255, 255, .14); color: var(--cyan); }
  .nav__phones { display: flex !important; flex-direction: column; gap: 12px; padding-top: 20px; }
  .nav__only-drawer { display: block !important; }
  .nav__phones a { font: 700 19px/1.2 var(--body); color: var(--white); text-decoration: none; }
  .nav__phones a span { display: block; font: 600 12px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 3px; }
  .nav__hours { font: 500 15px/1.4 var(--body); color: rgba(255, 255, 255, .8); }
  .hd__menu { display: inline-flex; }
  /* their logos: out of the bar, a row at the foot of the menu, round like the phone's call button */
  .hd__soc { display: none; }
  .nav__soc { display: block !important; padding-top: 20px; }
  .nav__soc-row { display: flex; gap: 12px; }
  .nav__soc .soc { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); color: var(--white); }
  .nav__soc .soc:hover { background: rgba(255, 255, 255, .12); color: var(--cyan); }
  .nav__soc .soc-i { width: 24px; height: 24px; }
}
/* Phones and small tablets */
@media (max-width: 999px) {
  .cover__photo { max-width: 620px; }
  .stage { max-width: 620px; width: 100%; margin-inline: auto; }
  .plist { max-width: 620px; margin-inline: auto; }
}
@media (max-width: 720px) {
  :root { --hd: 66px; }
  .hd__logo img { height: 42px; }
  /* Anyplace on phones (Ian, 2026-10-01: "as you go down the list, you can't even see the image that's changing"):
     the photo a little shorter and the fifteen names flowing under it in a compact block, so the photo and the name
     lit up are always on one screen together */
  .places__body { gap: 16px; }
  .stage { aspect-ratio: 20 / 19; }  /* a fixed shape: a height tied to the screen changes when the address bar slides */
  .plist__names { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 0; font-size: clamp(15px, 4.5vw, 18px); line-height: 1.12; text-align: center; }
  .plist__names li { display: flex; align-items: center; padding: 0; }
  .plist__names li:not(:last-child)::after { content: "·"; margin: 0 .12em; color: var(--royal); }
  /* each place is a 24px-tall tap target (the rows lose their 2px gap to make up for it) */
  .pl { display: inline-flex; align-items: center; min-height: 24px; margin: 0; padding: .12em .2em .08em; }
  .plist__group { margin-top: 18px; text-align: center; }
  .hd__phone { display: none; }
  .hd__call { display: inline-flex; }
  .hd__act { gap: 10px; }
  .hd__book { min-height: 48px; padding: 0 20px; }
  .hd__book-x { display: none; }
  .cover__cta .btn { width: 100%; }
  .area__k { width: 100%; margin-bottom: 2px; }
  .area__opt { flex: 1 1 0; }
  .shot figcaption { left: 16px; right: 16px; bottom: 26px; }
}
@media (max-width: 380px) {
  .hd__logo img { height: 36px; }
  .hd__act { gap: 6px; }
  .hd__call, .hd__menu { width: 44px; height: 44px; }
  .hd__book { padding: 0 14px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Ian's iPhone has Reduce Motion on: the places still step, just with a quicker, quieter fade */
  .shot { transition-duration: .35s; }
  .pl { transition-duration: .2s; }
}

/* The hero versions and the new sections, by screen size */
@media (min-width: 1000px) {
  .feel__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .perk { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}
@media (min-width: 900px) {
  .faq__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1199px) and (min-width: 721px) {
  .wall__films { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wall__film:nth-child(n+4) { display: none; }
  .igs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .feel__says { align-items: center; }
  .perk__dial { max-width: 620px; width: 100%; margin: 0 auto; }
}
@media (max-width: 720px) {
  .only-wide { display: none; }
  /* phones: the films keep the top of the screen, the words sit low on a deeper shade */
  /* (the header keeps Book and Call on screen, so the hero can give the top of the screen to the films) */
  .wall { align-items: start; }
  .wall::before { background: linear-gradient(to bottom, rgba(1, 40, 92, .42) 0%, rgba(1, 84, 138, .08) 16%, rgba(1, 84, 138, .16) 32%, rgba(1, 62, 112, .8) 50%, rgba(1, 50, 100, .94) 72%); }
  /* phones: one reel at a time, full screen, like an Instagram story (site.js steps it; a soft fade between reels) */
  .wall__films { display: block; }
  .wall__film { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
  .wall__film.is-on { opacity: 1; }
  /* the first look flips through the four reels (site.js): quick cuts, then the soft fade takes over */
  .wall.is-flipping .wall__film { transition: opacity .1s linear; }
  .wall__film:nth-child(5) { display: none; }
  .wall__story { display: block; position: absolute; top: 12px; left: var(--pad); right: var(--pad); z-index: 1; }
  .wall__bars { display: flex; gap: 4px; }
  .wall__bars span { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .38); overflow: hidden; }
  .wall__bars i { display: block; height: 100%; background: var(--white); transform-origin: 0 50%; transform: scaleX(0); }
  .wall__place { margin: 10px 0 0; }
  .wall__place .tag { font-size: 14px; }
  .wall__h { font-size: 15.6vw; }
  .wall__in { padding-top: max(220px, 36svh); padding-bottom: 64px; }
  .wall__lede { font-size: 17px; margin-top: 16px; }
  .wall__where { display: none; } /* each reel's own tag says where it was filmed */
  .hero-cta { margin-top: 20px; }
  .hero-cta .btn { flex: 1 1 calc(50% - 6px); padding: 0 16px; }
  .hero-cta .btn--cyan { flex-basis: 100%; }
  .hero-cta [data-phone-text] { display: none; }
  .feel__says { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .say { padding: 10px 14px 11px; border-radius: 18px 18px 5px 18px; font-size: 15px; }
  .ans { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 22px 20px 30px; align-items: start; }
  .ans__bag { width: 84px; }
  .ans__name { font-size: 30px; }
  .ans__price { font-size: 21px; }
  .ans__why { font-size: 15px; }
  .ans__book { width: 100%; }
  .feel__bar { left: 20px; right: 20px; bottom: 12px; }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tier { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 18px 20px; }
  .tier__off { grid-column: 1; grid-row: 1 / span 2; margin: 0; font-size: 76px; }
  .tier__range { grid-column: 2; align-self: end; }
  .tier__perk { grid-column: 2; align-self: start; margin-top: 6px; }
  .tier__extra { grid-column: 1 / -1; }
  .igs { gap: 14px; }
  .igs::-webkit-scrollbar { display: none; }
  .ig { flex: 0 0 62%; background: var(--white); border-radius: var(--r); }
  .faq__col:first-child .qa:last-child { border-bottom: 0; }
  .qa summary { font-size: 20px; padding: 18px 0; }
  .qa p { font-size: 16px; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .wall.is-flipping .wall__film { transition-duration: .18s; } /* Reduce Motion: the flip's cuts soften a touch */
}
@media (max-width: 380px) {
  .hero-cta .btn { flex-basis: 100%; }
}
/* the smallest phones (320 wide): the longest single word in a big headline ("INSTAGRAM.") and the longest button
   labels ("Book the Recovery Cooldown") ran a few pixels past their column */
@media (max-width: 340px) {
  .h2 { font-size: 52px; }
  .btn { white-space: normal; text-align: center; line-height: 1.15; padding-block: 8px; }
}

/* Centred, the house way (Ian 2026-10-01: "it seems like you're formatting everything to line up to the left... a lot
   of these things would look better centered"). His standing rule: every block opens centred; words beside a picture,
   a phone, a map or a bag centre in their own column; lists keep their rows but sit as one block in the middle.
   The hero versions are left as they are while he picks one. */
/* Anyplace: the list of places sits as a block in the middle of its column (its rows still start together) */
.plist { text-align: center; }
.plist__names { width: fit-content; margin-inline: auto; text-align: left; }
.plist__group { margin-inline: auto; }
/* Anytime: everything beside the phone centres in its column; the open-now line reads in navy on the cyan */
.anytime__words { text-align: center; }
.anytime .h2--left { text-align: center; }
.anytime__lead, .bubble { margin-inline: auto; }
.bubble { border-radius: 22px; }
.anytime .cta-row { justify-content: center; }
.anytime .live { color: var(--ink); }
.anytime .live__dot { background: var(--royal); }
/* The people: the words under the videos, the photo captions and the reviews centre */
.reel__q, .team figcaption, .quote { text-align: center; }
/* We have a drip for that: the answer's words centre beside the bag */
.ans__txt { text-align: center; }
/* The menu: each drip centres in its tile; the group names centre over their line */
.dgroup__h { text-align: center; }
.drip { align-items: center; text-align: center; }
/* More people, more perks: the dial and the three tickets centre */
.perk__dial, .tier { text-align: center; }
.tier { align-items: center; }
/* Instagram: the captions under the reels centre */
.ig__cap, .ig__when { text-align: center; }
/* Anywhere: the two area codes centre beside the map */
.codes { text-align: center; }
.code__towns { justify-content: center; }
@media (max-width: 720px) {
  /* phones: the drip bag sits in the middle of its card */
  .drip__bag { margin-left: 0; }
  /* phones: the answer card stacks, bag above its words, all centred */
  .ans { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 12px; }
  .ans__bag { width: 74px; }
  /* phones: each group-perk ticket stacks, centred, like the computer's */
  .tier { display: flex; flex-direction: column; align-items: center; padding: 20px; }
  .tier__off, .tier__range, .tier__perk, .tier__extra { grid-column: auto; grid-row: auto; align-self: center; }
  .tier__off { margin: 10px 0 0; font-size: 76px; }
  .tier__perk { margin-top: 6px; }
}

/* The people: one team photo now, the September studio five (the launch-day photo came off: it shows the former
   medical director), centred at its own shape with its caption under it */
.team { justify-items: center; }
.team__a { width: 100%; max-width: 860px; }
.team__a img { height: auto; aspect-ratio: 4096 / 3545; object-fit: cover; }

/* We come to you: their film of nurse Becky, framed in the column, one line at a time over it */
.visit { background: var(--royal); color: var(--white); padding: clamp(64px, 9vw, 136px) var(--pad); }
.visit .lede { color: rgba(255, 255, 255, .88); }
.visit__film { position: relative; isolation: isolate; overflow: hidden; margin: 0 auto; max-width: var(--col); border-radius: var(--r); background: var(--royal-deep); box-shadow: 0 40px 80px -40px rgba(1, 16, 52, .8); }
.visit__film video { display: block; width: 100%; aspect-ratio: 1280 / 594; object-fit: cover; }
.visit__film::after { content: ""; position: absolute; inset: 42% 0 0; z-index: 1; background: linear-gradient(to bottom, rgba(1, 30, 75, 0), rgba(1, 30, 75, .84)); pointer-events: none; }
.visit__lines { position: absolute; left: 0; right: 0; bottom: 38px; z-index: 2; display: grid; margin: 0; padding: 0 24px; list-style: none; text-align: center; }
.visit__lines li { grid-area: 1 / 1; font: 700 clamp(26px, 3.2vw, 46px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 16px rgba(0, 0, 0, .35); text-wrap: balance; opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .7s ease; }
.visit__lines li.is-on { opacity: 1; transform: none; }
.visit__bar { position: absolute; left: 24px; right: 24px; bottom: 18px; z-index: 2; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.visit__bar span { display: block; height: 100%; background: var(--cyan); transform-origin: 0 50%; transform: scaleX(0); }
.visit__after { margin: 22px auto 0; text-align: center; font: 500 16px/1.5 var(--body); color: rgba(255, 255, 255, .88); }
@media (prefers-reduced-motion: reduce) { .visit__lines li { transform: none; } }
@media (max-width: 720px) {
  .visit__film video { aspect-ratio: 404 / 718; }
  .visit__lines { bottom: 34px; padding: 0 18px; }
  .visit__lines li { font-size: 27px; }
}

/* Bring us to your event: a tour list of their own events, and their Coliseum partnership */
.events { background: var(--royal); color: var(--white); padding: clamp(64px, 9vw, 136px) var(--pad); }
.events .lede { color: rgba(255, 255, 255, .88); }
.tour { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); max-width: var(--col); margin: 0 auto; padding: 0; list-style: none; }
.gig { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; aspect-ratio: 4 / 5; padding: 16px 12px 18px; border-radius: var(--r); background: var(--royal-deep); text-align: center; box-shadow: 0 24px 44px -30px rgba(1, 16, 52, .8); }
.gig img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.gig::after { content: ""; position: absolute; inset: 30% 0 0; z-index: -1; background: linear-gradient(to bottom, rgba(1, 26, 70, 0) 0%, rgba(1, 26, 70, .62) 42%, rgba(1, 26, 70, .94) 100%); pointer-events: none; }
.gig__when { font: 600 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.gig__name { font: 700 clamp(18px, 1.45vw, 22px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.gig__where { font: 500 13px/1.35 var(--body); color: rgba(255, 255, 255, .85); }
.tour__also { max-width: 52em; margin: clamp(24px, 3vw, 36px) auto 0; text-align: center; font: 500 15px/1.6 var(--body); color: rgba(255, 255, 255, .85); }
.partner { max-width: 40em; margin: clamp(32px, 4vw, 52px) auto 0; text-align: center; font: 700 clamp(22px, 2.3vw, 32px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.partner span { display: block; margin-bottom: 8px; font: 600 13px/1.3 var(--body); letter-spacing: .12em; color: var(--cyan-text); }
@media (max-width: 999px) {
  .tour { display: flex; overflow-x: auto; scrollbar-width: none; gap: 14px; margin-inline: calc(-1 * var(--pad)); padding: 6px var(--pad) 14px; scroll-padding-inline: var(--pad); }
  .tour::-webkit-scrollbar { display: none; }
  .gig { flex: 0 0 30%; }
}
@media (max-width: 720px) { .gig { flex-basis: 64%; padding: 14px 12px 18px; } .gig__name { font-size: 21px; } }

/* Gift cards: their white card with the Elevate logo, two of them fanned, on their cyan */
.gift { background: var(--cyan); color: var(--ink); padding: clamp(64px, 9vw, 120px) var(--pad); }
.gift .hl { background: var(--white); }
.gift .h2 { font-size: clamp(52px, 5.6vw, 88px); }
.gift__in { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; max-width: 1120px; margin: 0 auto; }
.gift__words { text-align: center; }
.gift__lead { max-width: 32em; margin: 22px auto 0; font: 500 clamp(17px, 1.45vw, 20px)/1.5 var(--body); }
.gift .cta-row { justify-content: center; }
.gift__cards { position: relative; width: min(420px, 82%); aspect-ratio: 1.586; margin: 0 auto; }
.gcard { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; background: var(--white); box-shadow: 0 30px 50px -28px rgba(3, 9, 67, .55); transform: rotate(-6deg); }
.gcard--back { transform: rotate(5deg) translate(18px, -16px); }
.gcard img { width: 60%; height: auto; }
@media (min-width: 900px) { .gift__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* Privacy page: a plain reading column */
.legal-page { background: var(--white); color: var(--ink); padding: clamp(56px, 8vw, 120px) var(--pad); }
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 { margin: 2em 0 .5em; font: 700 clamp(22px, 2vw, 28px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 1em; line-height: 1.6; }
.legal a { color: var(--royal); font-weight: 600; text-underline-offset: 3px; }
.legal__date { font-size: .9rem; color: var(--ink-soft); margin-top: 2em; }

/* Every page's header drop-downs, the footer's list of every page, and the breadcrumb line (2026-11-02, when the
   inner pages were built). Same royal blue, cyan and tall capitals as the home page. */

/* Header drop-downs: the arrow beside a menu item opens its panel; on computers the pointer opens it too */
.nav__item { display: flex; align-items: center; }
.nav__more { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 1px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .85); cursor: pointer; transition: transform .25s ease, background-color .15s; }
.nav__more:hover { background: rgba(255, 255, 255, .14); color: var(--white); }
.nav__list > li > a[aria-current="page"] { border-bottom-color: var(--cyan); }
/* the arrows take room: every label stays on one line, the gaps close up a little, and "Call or text" waits for a
   window wide enough to hold it */
@media (min-width: 1200px) {
  .nav__list > li > a { white-space: nowrap; }
  .nav__list { gap: clamp(14px, 1.5vw, 26px); }
  .nav__more { margin-left: 0; }
}
@media (min-width: 1200px) and (max-width: 1499px) { .hd__phone-k { display: none; } }
.sub { display: none; }
.sub__k { margin: 0 0 14px; font: 600 12px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-hi); }
.sub__k span { margin-left: .5em; color: rgba(255, 255, 255, .62); letter-spacing: .04em; }
.sub ul { list-style: none; margin: 0; padding: 0; }
.sub a { color: var(--white); text-decoration: none; }
.sub a[aria-current="page"] .sub__n, .sub li > a[aria-current="page"] { color: var(--cyan-hi); }
.sub__drips { display: grid; gap: 4px; }
.sub__drip { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 14px; padding: 6px 10px 6px 6px; border-radius: 12px; transition: background-color .15s; }
.sub__drip:hover { background: rgba(255, 255, 255, .09); }
.sub__bag { width: 30px; height: auto; filter: drop-shadow(0 6px 6px rgba(1, 16, 52, .45)); }
.sub__n { font: 700 19px/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.sub__p { font: 600 17px/1 var(--display); color: var(--cyan-hi); }
.sub__treats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 28px; grid-column: 1 / -1; }
/* a row opens its treatment (the name's link stretched over the row); the bag is its own link to the drip, on top
   (2026-11-12, every drip opens its page) */
.sub__tr { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 8px 12px 8px 8px; border-radius: 12px; transition: background-color .15s; }
.sub__go { grid-column: 2; grid-row: 1; min-width: 0; display: block; }
.sub__go > .sub__n { display: block; }
.sub__go::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.sub__go:focus-visible { outline: none; }
.sub__go:focus-visible::after { outline: 3px solid var(--cyan); outline-offset: 2px; }
.sub__tr > .sub__bag, .sub__bagto { grid-column: 1; grid-row: 1 / span 2; }
.sub__bagto { position: relative; z-index: 2; display: block; line-height: 0; }
.sub__treats .sub__bag { width: 24px; }
.sub__tr:hover { background: rgba(255, 255, 255, .09); }
/* the drip's name: its own link to the drip, on top of the row (2026-11-13) */
.sub__to { grid-column: 2; grid-row: 2; justify-self: start; position: relative; z-index: 2; font: 500 14px/1.2 var(--body); color: rgba(255, 255, 255, .72); }
.sub a.sub__to { color: rgba(255, 255, 255, .72); }
.sub a.sub__to:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.sub a.sub__to:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
.sub__to::before { content: "→ "; color: var(--cyan-hi); }
.sub__towns { columns: 3; column-gap: 24px; }
.sub__towns li { break-inside: avoid; }
.sub__towns a, .sub__list a { display: inline-block; padding: 6px 0; font: 600 16px/1.25 var(--body); }
.sub__towns a:hover, .sub__list a:hover { color: var(--cyan-hi); text-decoration: underline; text-underline-offset: 4px; }
.sub__all { grid-column: 1 / -1; margin: 10px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
.sub__all a { font: 700 15px/1 var(--body); color: var(--cyan-hi); }
.sub__all a::after { content: " →"; }
.sub__all a:hover { text-decoration: underline; text-underline-offset: 4px; }
@keyframes subIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (min-width: 1200px) {
  /* each menu item runs the full height of the bar, so the pointer can travel down into its panel */
  .nav { align-self: stretch; }
  .nav__list { align-items: stretch; }
  .nav__list > li { display: flex; align-items: center; }
  .has-sub:hover > .sub, .has-sub.is-open > .sub { display: block; animation: subIn .18s ease-out; }
  .has-sub:hover > .nav__more, .has-sub.is-open > .nav__more { transform: rotate(180deg); }
  .sub { position: absolute; left: 0; right: 0; top: 100%; background: var(--royal-deep); color: var(--white); border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 44px -26px rgba(1, 16, 52, .7); }
  .sub__in { max-height: calc(100vh - var(--hd) - 24px); overflow-y: auto; padding: 32px var(--pad) 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 48px; }
  .sub--where .sub__in { grid-template-columns: 1.15fr 1fr; }
  .sub--where .sub__col:last-of-type .sub__towns { columns: 2; }
  /* About: a short list, so it drops under its own item instead of across the page */
  .nav__item:has(> .sub--about) { position: relative; }
  .sub--about { left: -18px; right: auto; width: 290px; border-radius: 0 0 16px 16px; }
  .sub--about .sub__in { display: block; padding: 18px 24px 20px; }
}
/* Reduce Motion: the menus fade open without dropping (calmer, never off) */
@keyframes subCalm { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .has-sub:hover > .sub, .has-sub.is-open > .sub { animation: subCalm .18s ease-out; } .nav__more { transition: none; } }

/* The phone menu: each item with drop-down gets a round arrow button; its pages open under it */
@media (max-width: 1199px) {
  .nav__item { flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .nav__list > li.nav__item > a.nav__top { flex: 1 1 auto; border-bottom: 0; }
  .nav__more { width: 44px; height: 44px; background: rgba(255, 255, 255, .1); }
  .has-sub.is-open > .nav__more { transform: rotate(180deg); }
  .has-sub.is-open > .sub { display: block; flex: 0 0 100%; }
  .sub__in { padding: 0 0 20px; display: grid; gap: 18px; }
  .sub__treats { grid-template-columns: 1fr 1fr; gap: 2px 12px; }
  .sub__tr { padding: 8px 0; }
  .sub__treats .sub__bag { width: 22px; }
  .sub__drip { padding: 6px 0; }
  .sub__towns { columns: 2; }
  .sub__all { margin-top: 0; }
}
@media (max-width: 420px) { .sub__treats { grid-template-columns: 1fr; } }

/* The footer: every page, by section */
.fmap { display: grid; grid-template-columns: 1fr 1fr 1.7fr 1fr; gap: 32px 44px; padding: 60px var(--pad) 44px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ft .fmap__k { margin: 0 0 14px; font: 700 21px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.ft .fmap__k a { text-decoration: none; }
.ft .fmap__k a:hover { color: var(--cyan-hi); }
.fmap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fmap li a { font: 500 15px/1.35 var(--body); color: rgba(255, 255, 255, .84); text-decoration: none; }
.fmap li a:hover { color: var(--white); text-decoration: underline; }
.ft .fmap__sub { margin: 0 0 10px; font: 600 12px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-hi); }
.fmap ul.fmap__inline { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-bottom: 22px; }
@media (max-width: 1000px) { .fmap { grid-template-columns: 1fr 1fr; } .fmap__col--wide { grid-column: 1 / -1; order: 3; } .fmap__col:last-child { order: 2; } }
@media (max-width: 380px) { .fmap { grid-template-columns: 1fr; } }

/* The home page's drip names and town names open their own pages; the whole drip tile is the link */
.drip { position: relative; }
.drip__name a { color: inherit; text-decoration: none; }
.drip__name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.drip:hover .drip__name a { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.drip__name a:focus-visible { outline: none; }
.drip__name a:focus-visible::after { outline: 3px solid var(--cyan); outline-offset: 4px; }
.code__towns a { color: inherit; text-decoration: none; }
.code__towns a:hover { color: var(--royal); text-decoration: underline; text-underline-offset: 3px; }

/* A phone number in running text never splits across two lines ("(304)" / "648-4395") */
a[href^="tel:"]:not([class]) { white-space: nowrap; }

/* Breadcrumbs: a small line at the top of each inner page */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font: 600 13px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.crumbs li + li::before { content: "/"; margin: 0 .6em; opacity: .5; }
/* faded only as far as stays readable on the royal blue (AA 4.5:1) */
.crumbs a { text-decoration: none; opacity: .95; }
.crumbs a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { opacity: .86; }

/* The parts every inner page shares, in the home page's language: royal, cyan and sky grounds edge to edge, tall
   capitals with the cyan box on the key word, words and photos in the 1240px column, centred the house way (Ian,
   2026-10-01: "a lot of these things would look better centered"), and their own photos on every page (Rulebook 1.16). */

/* Grounds */
.band { padding: clamp(64px, 8vw, 120px) var(--pad); }
.band--royal { background: var(--royal); color: var(--white); }
.band--royal .lede { color: rgba(255, 255, 255, .88); }
.band--cyan { background: var(--cyan); color: var(--ink); }
.band--cyan .hl { background: var(--white); }
.band--cyan .lede { color: var(--ink); }
.band--sky { background: var(--sky); color: var(--ink); }
.band--white { background: var(--white); color: var(--ink); }
.band--tight { padding-block: clamp(48px, 6vw, 88px); }
.h2--mid { font-size: clamp(44px, 6vw, 84px); }
/* the smallest phones (and a laptop zoomed to 400%): a long word ("Barboursville,", "OVERACHIEVER.") still fits */
@media (max-width: 380px) { .h2--mid { font-size: min(44px, 12vw); } }
.k { margin: 0 0 16px; font: 600 14px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.band--royal .k, .ihero--royal .k { color: var(--cyan-text); }
.band--white .k, .band--sky .k, .ihero--sky .k { color: var(--royal); }

/* The inner page's opening: words and their picture side by side on computers, stacked on phones, centred */
.ihero { padding: clamp(26px, 3vw, 40px) var(--pad) clamp(56px, 7vw, 104px); }
.ihero--royal { background: var(--royal); color: var(--white); }
.ihero--sky { background: var(--sky); color: var(--ink); }
.ihero .crumbs { margin-bottom: clamp(28px, 4vw, 56px); }
.ihero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ihero__words { text-align: center; min-width: 0; }
.ihero h1 { margin: 0; font: 700 clamp(52px, 7.4vw, 108px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.ihero h1 .hl { display: inline-block; padding: .03em .08em 0; border-radius: .05em; }
@media (max-width: 340px) { .ihero h1 { font-size: 48px; } } /* "BARBOURSVILLE." ran past the column at 320 wide */
.ihero__lede { margin: 26px auto 0; max-width: 34em; font: 500 clamp(17px, 1.45vw, 20px)/1.55 var(--body); }
.ihero--royal .ihero__lede { color: rgba(255, 255, 255, .9); }
.ihero--sky .ihero__lede { color: var(--ink-soft); }
.ihero .cta-row { justify-content: center; }
.ihero__pic { margin: 0; min-width: 0; }
.ihero__pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); box-shadow: 0 34px 70px -34px rgba(1, 16, 52, .6); }
.ihero__pic figcaption { margin-top: 10px; text-align: center; font: 500 14px/1.4 var(--body); opacity: .9; }
.ihero--royal .btn--inkline { border-color: rgba(255, 255, 255, .7); color: var(--white); }
.btn--royal { background: var(--royal); color: var(--white); }
.btn--royal:hover { background: var(--royal-deep); }

/* Four plain facts in a row (price, time, who, where) */
.facts4 { list-style: none; margin: clamp(28px, 3vw, 40px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 40em; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.facts4 li { padding: 14px 8px; text-align: center; }
.facts4 li + li { border-left: 1px solid currentColor; }
.facts4 b { display: block; font: 700 clamp(22px, 2vw, 30px)/1 var(--display); text-transform: uppercase; }
.facts4 span { display: block; margin-top: 6px; font: 500 13px/1.3 var(--body); opacity: .9; }
.ihero--royal .facts4, .band--royal .facts4 { border-color: rgba(255, 255, 255, .3); }
.ihero--royal .facts4 li + li { border-color: rgba(255, 255, 255, .3); }

/* A photo and its words side by side (the words centre in their column) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: var(--col); margin: 0 auto; }
.split--flip > :first-child { order: 2; }
.split__words { text-align: center; min-width: 0; }
.split__words p { margin: 18px auto 0; max-width: 32em; font: 500 clamp(17px, 1.35vw, 19px)/1.6 var(--body); }
.band--sky .split__words p, .band--white .split__words p { color: var(--ink-soft); }
.split__words .cta-row { justify-content: center; }
.split__pic { margin: 0; min-width: 0; }
.split__pic img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r); }
.split__pic--tall img { aspect-ratio: 4 / 5; }
.split__pic figcaption { margin-top: 10px; text-align: center; font: 500 14px/1.4 var(--body); opacity: .9; }

/* A row of their photos with captions (one under another on phones, sliding sideways) */
.shots { list-style: none; margin: clamp(36px, 4vw, 56px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); max-width: var(--col); }
.shots--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shots li { margin: 0; min-width: 0; }
.shots img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.shots p { margin: 10px 0 0; text-align: center; font: 500 14px/1.4 var(--body); opacity: .82; }
.shots b { display: block; margin-bottom: 2px; font: 700 20px/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; opacity: 1; }

/* How a visit goes: three steps, each with their photo */
.steps { list-style: none; margin: clamp(36px, 4vw, 56px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); max-width: var(--col); counter-reset: step; }
.step { min-width: 0; text-align: center; counter-increment: step; }
.step img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.step__n { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: -26px auto 0; position: relative; border-radius: 50%; background: var(--cyan); color: var(--ink); font: 700 26px/1 var(--display); box-shadow: 0 8px 18px -8px rgba(1, 16, 52, .5); }
.step__n::before { content: counter(step); }
.step h3 { margin: 14px 0 0; font: 700 clamp(24px, 2.2vw, 32px)/1 var(--display); text-transform: uppercase; }
.step p { margin: 10px auto 0; max-width: 22em; font: 500 16px/1.55 var(--body); }
.band--royal .step p { color: rgba(255, 255, 255, .86); }
.band--sky .step p, .band--white .step p { color: var(--ink-soft); }
.steps__after { margin: clamp(28px, 3vw, 40px) auto 0; text-align: center; font: 600 16px/1.5 var(--body); }

/* Short answer cards (why it helps, what to expect): a heading and a few lines each */
.why { list-style: none; margin: clamp(36px, 4vw, 56px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(14px, 1.6vw, 24px); max-width: var(--col); }
.why li { padding: 26px 24px 24px; border-radius: var(--r); background: var(--white); text-align: center; box-shadow: 0 18px 40px -30px rgba(3, 9, 67, .45); }
.band--white .why li { background: var(--sky); box-shadow: none; }
.band--royal .why li { background: rgba(255, 255, 255, .08); box-shadow: none; }
.why h3 { margin: 0; font: 700 clamp(22px, 1.9vw, 27px)/1.02 var(--display); text-transform: uppercase; }
.why h3 .hl { padding: 0 .08em; }
.why p { margin: 10px 0 0; font: 500 16px/1.55 var(--body); color: var(--ink-soft); }
.band--royal .why p { color: rgba(255, 255, 255, .86); }

/* What's in a drip: one card per ingredient */
.ingr { list-style: none; margin: clamp(32px, 4vw, 52px) auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1040px; }
.ingr__i { flex: 0 1 calc((100% - 28px) / 3); padding: 22px 20px; border-radius: var(--r); background: var(--sky); text-align: center; }
/* exactly four: one row of four, never three and one left over */
@media (min-width: 721px) { .ingr:has(> :nth-child(4):last-child) > .ingr__i { flex-basis: calc((100% - 42px) / 4); } }
@media (max-width: 720px) { .ingr { gap: 10px; } .ingr__i { flex-basis: calc((100% - 10px) / 2); padding: 18px 12px; } .ingr__l { font-size: 14px; } }
.ingr__n { margin: 0; font: 700 clamp(21px, 1.8vw, 26px)/1.05 var(--display); text-transform: uppercase; color: var(--ink); }
.ingr__n a { color: var(--royal); text-underline-offset: 4px; }
.ingr__l { margin: 8px 0 0; font: 500 15px/1.5 var(--body); color: var(--ink-soft); }

/* The add-ons, as a list */
.addons { list-style: none; margin: clamp(28px, 3vw, 40px) auto 0; padding: 0; max-width: 46em; display: grid; gap: 10px; text-align: center; }
.addons__i { font: 500 16px/1.55 var(--body); }
.addons__i--lead { font-size: 18px; }
.addons__k { display: block; margin-bottom: 4px; font: 700 clamp(24px, 2.2vw, 32px)/1 var(--display); text-transform: uppercase; }

/* The drip our nurses recommend: the bag and its card */
.rx { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 920px; margin: clamp(32px, 4vw, 52px) auto 0; padding: clamp(28px, 3.5vw, 48px); border-radius: calc(var(--r) * 1.4); background: var(--royal-deep); color: var(--white); box-shadow: 0 40px 70px -40px rgba(1, 16, 52, .75); }
/* a bag picture that opens its drip's page (inner.mjs bagTo, 2026-11-12) */
.bagto { display: block; line-height: 0; }
.rx__bag { width: clamp(110px, 13vw, 190px); height: auto; filter: drop-shadow(0 24px 26px rgba(0, 0, 0, .4)); }
.rx__txt { text-align: center; min-width: 0; }
.rx__k { margin: 0; font: 600 13px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-hi); }
.rx__name { margin: 10px 0 0; font: 700 clamp(40px, 4.6vw, 68px)/.92 var(--display); text-transform: uppercase; }
.rx__name a { color: inherit; text-decoration-color: var(--cyan); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.rx__price { margin: 8px 0 0; font: 600 clamp(24px, 2.2vw, 30px)/1 var(--display); color: var(--cyan-hi); }
.rx__in { margin: 12px auto 0; max-width: 30em; font: 500 15px/1.55 var(--body); color: rgba(255, 255, 255, .82); }
.rx .cta-row { justify-content: center; }

/* Treatment cards: the treatment, and the drip our nurses recommend for it */
/* Rows that wrap and centre, so a short last row sits in the middle: 13 treatments in a four-across grid left one card
   alone at the bottom left (desktop review, 2026-11-05) */
.tcards { list-style: none; margin: clamp(32px, 4vw, 52px) auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: var(--col); }
.tcards > .tcard { flex: 0 1 296px; min-width: min(100%, 260px); }
.tcards > .tcard > .tcard__c { height: 100%; }
/* Four across (from 1370 wide) with one card over (13, 17...): the first card takes a 2 x 2 tile with its bag large,
   so every row is full. A centred lone card still read as left over. */
@media (min-width: 1370px) {
  .tcards:has(> .tcard:nth-child(5)):has(> .tcard:nth-child(4n + 1):last-child) { display: grid; grid-template-columns: repeat(4, minmax(0, 296px)); justify-content: center; }
  .tcards:has(> .tcard:nth-child(5)):has(> .tcard:nth-child(4n + 1):last-child) > .tcard:first-child { grid-column: span 2; grid-row: span 2; min-width: 0; }
  .tcards:has(> .tcard:nth-child(5)):has(> .tcard:nth-child(4n + 1):last-child) > .tcard:first-child .tcard__c { padding: clamp(28px, 2.4vw, 44px); column-gap: 24px; }
  .tcards:has(> .tcard:nth-child(5)):has(> .tcard:nth-child(4n + 1):last-child) > .tcard:first-child .tcard__n { font-size: clamp(52px, 4vw, 76px); }
  .tcards:has(> .tcard:nth-child(5)):has(> .tcard:nth-child(4n + 1):last-child) > .tcard:first-child .tcard__d { margin-top: 14px; font-size: 18px; }
  .tcards:has(> .tcard:nth-child(5)):has(> .tcard:nth-child(4n + 1):last-child) > .tcard:first-child .tcard__bag { width: clamp(96px, 7vw, 132px); }
}
/* The card opens its treatment: the name's link is stretched over the whole card. The bag is its own link to the drip,
   on top (2026-11-12, every drip opens its page). */
.tcard__c { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 128px; padding: 22px 18px 22px 24px; border-radius: var(--r); background: var(--white); color: var(--ink); text-decoration: none; overflow: hidden; box-shadow: 0 18px 40px -30px rgba(3, 9, 67, .5); transition: transform .2s ease, box-shadow .2s ease; }
.band--white .tcard__c { background: var(--sky); box-shadow: none; }
.band--royal .tcard__c { background: rgba(255, 255, 255, .08); color: var(--white); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .tcard__c:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -28px rgba(3, 9, 67, .55); } } /* a mouse only: a tap would leave the card lifted */
.tcard__go { grid-column: 1; grid-row: 1; color: inherit; text-decoration: none; min-width: 0; }
.tcard__go::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r); }
.tcard__go:focus-visible { outline: none; }
.tcard__c:has(.tcard__go:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 3px; }
.tcard__c > .tcard__bag, .tcard__bagto { grid-column: 2; grid-row: 1 / span 2; }
.tcard__bagto { position: relative; z-index: 2; display: block; line-height: 0; }
.tcard__bag { width: 44px; height: auto; filter: drop-shadow(0 10px 10px rgba(1, 16, 52, .35)); }
.tcard__n { display: block; font: 700 clamp(25px, 2.2vw, 31px)/1 var(--display); text-transform: uppercase; }
.tcard__d { grid-column: 1; margin-top: 8px; font: 600 14px/1.3 var(--body); color: var(--royal); }
.band--royal .tcard__d { color: var(--cyan-hi); }
.tcard__d::before { content: "→ "; }
/* the drip's name opens the drip, on top of the card's own link (2026-11-13, every drip opens its page) */
.tcard__to { position: relative; z-index: 2; color: inherit; text-decoration: none; }
.tcard__to:hover { text-decoration: underline; text-underline-offset: 3px; }
.tcard__to:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

/* Town links */
.tlist { list-style: none; margin: 22px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 60em; }
.tlist a, .tlist span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid currentColor; font: 600 15px/1 var(--body); color: inherit; text-decoration: none; }
.tlist a:hover { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.band--royal .tlist a, .band--royal .tlist span { border-color: rgba(255, 255, 255, .55); }

/* Reviews on inner pages: the home page's, with the rating line */
.revs { max-width: var(--col); margin: 0 auto; }
.revs__rating { margin: 14px 0 0; text-align: center; font: 600 16px/1.4 var(--body); color: var(--ink-soft); }
.band--royal .quote { border-top-color: rgba(255, 255, 255, .5); }
.band--royal .quote p, .band--royal .quote cite { color: var(--white); }
.band--royal .quote cite span { color: rgba(255, 255, 255, .75); }

/* Questions on inner pages: one centred column */
.qcol { max-width: 860px; margin: clamp(28px, 3vw, 44px) auto 0; }
.qcol .qa:last-child { border-bottom: 2px solid var(--ink); }
/* an answer reads at the home page's line length (about 70 letters); across the whole column it ran to 115 */
.qcol .qa p { max-width: 38em; }

/* The close of every inner page: their sign's line, and the three ways to reach them */
.iclose { background: var(--royal); color: var(--white); text-align: center; padding: clamp(64px, 9vw, 128px) var(--pad); }
.iclose__in { max-width: var(--col); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.iclose__in--solo { grid-template-columns: minmax(0, 1fr); }
.iclose .h2 { font-size: clamp(56px, 8vw, 120px); }
.iclose p { margin: 18px auto 0; max-width: 30em; font: 500 17px/1.55 var(--body); color: rgba(255, 255, 255, .88); }
.iclose .cta-row { justify-content: center; }
.iclose figure { margin: 0; }
.iclose img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: 0 34px 70px -34px rgba(1, 16, 52, .75); }
.iclose figcaption { margin-top: 10px; font: 500 14px/1.4 var(--body); color: rgba(255, 255, 255, .9); }

/* Reading pages (articles, about, terms): a comfortable column */
.prose { max-width: 720px; margin: 0 auto; font: 400 clamp(17px, 1.3vw, 19px)/1.7 var(--body); color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2.1em 0 .55em; font: 700 clamp(30px, 3vw, 42px)/1 var(--display); text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
.prose h3 { margin: 1.7em 0 .45em; font: 700 clamp(22px, 2vw, 28px)/1.05 var(--display); text-transform: uppercase; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.05em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--royal); }
.prose a { color: var(--royal); font-weight: 600; text-underline-offset: 3px; }
.prose strong { font-weight: 700; }
.prose figure { margin: 2em 0; }
.prose figure img { width: 100%; height: auto; border-radius: var(--r); }
.prose figcaption { margin-top: 10px; text-align: center; font: 500 14px/1.4 var(--body); color: var(--ink-soft); }
.prose blockquote { margin: 1.6em 0; padding: 22px 26px; border-radius: 22px; background: var(--sky); font-weight: 500; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose .callout { margin: 2em 0; padding: 24px 26px; border-radius: var(--r); background: var(--royal); color: var(--white); text-align: center; }
.prose .callout p { margin: 0 0 14px; }
.prose .callout a:not(.btn) { color: var(--cyan-text); }
.prose .callout .cta-row { justify-content: center; margin-top: 8px; }
.prose .note { font-size: .88em; color: var(--ink-soft); }

/* Commons credit under a town photo */
.credit { margin: 10px 0 0; font: 500 12px/1.4 var(--body); opacity: .75; }
.credit a { color: inherit; }

/* Every page opens on its picture (Rulebook 1.27; launch check 2026-11-12: 18 openings stacked Book / Text or the topic
   links above the picture, which then started below the top 60% of a phone screen). Stacked (phones and tablets), the
   opening reads: its small line, the headline, the picture, then the words and ONE button (Book, Call and Text are in
   the bar at the bottom of the phone all the time). The words' box steps aside (display: contents) so its pieces can
   be put in that order; side by side on a computer nothing changes. */
@media (max-width: 1000px) {
  .ihero__in:has(> .ihero__pic, > .ihero__map) { display: flex; flex-direction: column; gap: 0; }
  .ihero__in:has(> .ihero__pic, > .ihero__map) > .ihero__words { display: contents; }
  .ihero__in:has(> .ihero__pic, > .ihero__map) > .ihero__words > * { order: 4; }
  .ihero__in:has(> .ihero__pic, > .ihero__map) > .ihero__words > .k { order: 1; }
  .ihero__in:has(> .ihero__pic, > .ihero__map) > .ihero__words > h1 { order: 2; }
  .ihero__in:has(> .ihero__pic, > .ihero__map) > :is(.ihero__pic, .ihero__map) { order: 3; margin-top: 24px; }
  .ihero__in:has(> .ihero__pic, > .ihero__map) .cta-row > .btn ~ .btn { display: none; }
}
@media (max-width: 1000px) {
  .ihero__in, .split, .iclose__in { grid-template-columns: minmax(0, 1fr); }
  .split--flip > :first-child { order: 0; }
  .ihero__pic { max-width: 560px; margin-inline: auto; width: 100%; }
  .ihero__pic img { aspect-ratio: 4 / 3; }
  .shots--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .facts4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts4 li:nth-child(3) { border-left: 0; }
  .facts4 li:nth-child(n + 3) { border-top: 1px solid currentColor; }
  .ihero--royal .facts4 li:nth-child(n + 3) { border-top-color: rgba(255, 255, 255, .3); }
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
  .step img { aspect-ratio: 4 / 3; }
  /* rows of photos slide sideways on a phone, like the home page's rows */
  .shots, .shots--4 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; }
  .shots::-webkit-scrollbar { display: none; }
  .shots li { flex: 0 0 74%; scroll-snap-align: center; }
  .rx { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rx__bag { width: 104px; }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .tcard__c { min-height: 108px; }
}

/* Words beside a picture stay CENTRED in their own column on a computer too: Ian's standing rule for this site (site.css,
   "Centred, the house way", 2026-10-01). A left-ranged version was tried in the 2026-11-05 desktop review and taken
   back out for that reason; never range them left again without asking him. */

/* Inner pages only (the home page is the approved design and keeps its own): a highlighted phrase that wraps is painted
   one band per line, hugging each line's words. As one inline-block it became a single column-wide slab ("WE COME / TO
   YOU.", "WHOLE / GROUP.", desktop review 2026-11-05). The band runs from .9em above the baseline (the caps are .81em
   tall; the font's box starts .95em above it, site.css) to just under it, .88em tall, so stacked lines keep a hairline
   gap at line height .9. */
body:not([data-page="home"]) :is(.h2, .ihero h1, .town h1) .hl { display: inline; padding: 0 .08em; border-radius: 0; background: linear-gradient(var(--hl-c, var(--cyan)), var(--hl-c, var(--cyan))) 0 .05em / 100% .88em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* the sections that paint their highlight white on their cyan keep it white */
:is(.anytime, .party, .gift, .band--cyan) .hl { --hl-c: var(--white); }
/* headings never leave one word alone on a line (the steps' "Health check, then your / DRIP", the timeline's
   "Virginia", "The reliable / one.") */
body:not([data-page="home"]) :is(.step h3, .tline__i h3, .rx__name, .tb__name, .tc__n, .tcard__n) { text-wrap: balance; }
/* the parties page's "Also:" line reads at a comfortable length (it ran about 105 letters a line) */
body:not([data-page="home"]) .tour__also { max-width: 40em; }
/* on a computer a fact like "8 AM–8 PM" never breaks inside its cell */
@media (min-width: 1001px) { .facts4 b { white-space: nowrap; } }

/* Drip pages (/iv-therapy-packages/<drip>-iv) and the drip menu (/iv-therapy-packages): the house bag is the picture
   that opens each drip page, standing on a cyan glow like a product shot, beside their own line about who books it. */
.dhero__who { margin: 18px 0 0; font: italic 600 clamp(19px, 1.6vw, 23px)/1.3 var(--body); color: var(--cyan-text); }
.dhero .ihero__lede { font-style: italic; }
.dhero__art { position: relative; display: grid; place-items: center; min-height: clamp(380px, 40vw, 600px); }
.dhero__art::before { content: ""; position: absolute; width: min(88%, 520px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(69, 214, 240, .55), rgba(23, 202, 234, .18) 55%, rgba(23, 202, 234, 0) 72%); }
.dhero__bag { position: relative; width: clamp(190px, 20vw, 300px); height: auto; transform: rotate(-4deg); filter: drop-shadow(0 40px 40px rgba(1, 16, 52, .55)); animation: bagIn .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bagIn { from { opacity: 0; transform: translateY(26px) rotate(-9deg); } to { opacity: 1; transform: rotate(-4deg); } }
.dnote { margin: clamp(26px, 3vw, 36px) auto 0; text-align: center; font: 600 16px/1.5 var(--body); color: var(--ink-soft); }
.dnote a { color: var(--royal); text-underline-offset: 3px; }
/* the drip tiles on an inner page sit in the home page's royal menu band; a row of fewer than four centres */
@media (min-width: 721px) {
  body:not([data-page="home"]) .drips { display: flex; flex-wrap: wrap; justify-content: center; }
  body:not([data-page="home"]) .drips > .drip { flex: 0 1 calc((100% - 3 * clamp(18px, 2vw, 32px)) / 4); }
}
.menu .drips + .cta-row { margin-top: clamp(32px, 4vw, 48px); }
.menu .dgroup__h { font-size: clamp(20px, 1.7vw, 26px); }

/* The drip menu: the add-ons on cyan, group perks, and the jump links to each group */
.jumps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.jumps a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .6); color: var(--white); font: 600 15px/1 var(--body); text-decoration: none; }
.jumps a:hover { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.menuhero__bags { display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 1vw, 14px); margin-top: clamp(32px, 4vw, 56px); }
/* min-width 0: the row of twelve can squeeze to fit the same way before and after the pictures arrive (it squeezed only
   before, so the row nudged sideways as each one loaded) */
/* each bag is a link to its drip's page since 2026-11-12 (every drip opens its page), so the link holds the size and
   the tilt, and the picture fills it */
.menuhero__bags > * { width: clamp(40px, 6.4vw, 92px); min-width: 0; }
.mbag__to { display: block; line-height: 0; }
.menuhero__bags img { width: 100%; min-width: 0; height: auto; filter: drop-shadow(0 16px 16px rgba(1, 16, 52, .5)); }
.menuhero__bags > :nth-child(odd) { transform: translateY(10px) rotate(-3deg); }
.menuhero__bags > :nth-child(even) { transform: rotate(3deg); }
/* the opening and the menu under it are both royal, so their two paddings stacked into one empty blue gap of 240px
   between the row of bags and "Signature drips" (desktop review 2026-11-05): the menu starts closer */
.menuhero + .menu--page { padding-top: clamp(24px, 3vw, 44px); }
/* the "Not sure which one?" finder on the menu page: the feelings column is only as wide as its bubbles, and the pair
   centres under the heading (the feelings hugged the right of a wider column, so the pair sat 80px right of centre) */
@media (min-width: 1000px) {
  body:not([data-page="home"]) .feel__body { grid-template-columns: auto minmax(0, 640px); justify-content: center; }
}

@media (max-width: 1000px) {
  .dhero__art { min-height: 300px; order: -1; }
  .dhero__bag { width: 170px; }
}
@media (max-width: 720px) {
  .menuhero__bags { flex-wrap: wrap; row-gap: 14px; }
  .menuhero__bags > * { width: 13%; }
}
/* Reduce Motion: the bag fades in where it hangs, without the slide (calmer, never off) */
@keyframes bagCalm { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dhero__bag { animation: bagCalm .3s ease-out both; } }

/* Treatment pages (/iv-treatments/<treatment>) and the treatments page (/iv-treatments): the answer comes first. The
   opening says which drip our nurses recommend before anything else; the treatments page groups every treatment under
   the drip for it, bag first, like a prescription board. */
.tanswer { margin: 26px auto 0; max-width: 34em; padding: 18px 22px; border-radius: var(--r); background: var(--white); border-left: 6px solid var(--cyan); text-align: left; font: 500 clamp(16px, 1.3vw, 18px)/1.55 var(--body); color: var(--ink); box-shadow: 0 18px 40px -30px rgba(3, 9, 67, .5); }
.tanswer__k { display: block; margin-bottom: 4px; font: 600 12px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--royal); }
.tanswer a, .tanswer span:not(.tanswer__k) { font-weight: 700; color: var(--royal); text-underline-offset: 3px; }

/* the towns, both areas side by side with their own number */
.tareas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); max-width: var(--col); margin: 0 auto; }
.tarea { text-align: center; min-width: 0; }
.tarea__h { margin: 0; font: 700 clamp(24px, 2.2vw, 32px)/1.1 var(--display); text-transform: uppercase; }
.tarea__h a { display: block; margin-top: 6px; font: 600 17px/1.3 var(--body); text-transform: none; color: var(--royal); text-decoration: none; }
.tarea .tlist { margin-top: 18px; }

/* The treatments page: each drip, and the treatments it is recommended for */
.tboard { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 14px; max-width: 1080px; }
.tb { display: grid; grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: center; padding: clamp(18px, 2.4vw, 28px) clamp(20px, 3vw, 40px); border-radius: var(--r); background: var(--white); box-shadow: 0 18px 40px -30px rgba(3, 9, 67, .5); }
.tb__bag { width: clamp(56px, 6vw, 86px); height: auto; filter: drop-shadow(0 12px 12px rgba(1, 16, 52, .3)); }
.tb__k { margin: 0 0 6px; font: 600 12px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--royal); }
.tb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.tb__list li { font: 700 clamp(26px, 2.6vw, 38px)/1.05 var(--display); text-transform: uppercase; color: var(--ink); }
.tb__list li:not(:last-child)::after { content: "·"; margin: 0 .32em; color: var(--cyan); }
.tb__list a { color: inherit; text-decoration: none; background: linear-gradient(var(--cyan), var(--cyan)) 0 94% / 100% .1em no-repeat; transition: background-size .25s ease; }
.tb__list a:hover, .tb__list a:focus-visible { background-size: 100% .24em; }
.tb__drip { text-align: right; min-width: 0; border-left: 2px solid var(--sky); padding-left: clamp(18px, 3vw, 40px); }
.tb__name { margin: 0; font: 700 clamp(22px, 2vw, 28px)/1.05 var(--display); text-transform: uppercase; }
.tb__name a { color: var(--royal); text-underline-offset: 4px; }
.tb__price { margin: 4px 0 0; font: 600 18px/1.2 var(--display); color: var(--ink-soft); }

@media (max-width: 860px) {
  .tb { grid-template-columns: auto minmax(0, 1fr); }
  .tb__drip { grid-column: 1 / -1; text-align: center; border-left: 0; border-top: 2px solid var(--sky); padding: 14px 0 0; }
}
@media (max-width: 720px) {
  .tareas { grid-template-columns: minmax(0, 1fr); }
  .tanswer { text-align: center; border-left: 0; border-top: 6px solid var(--cyan); }
  .tb { padding: 18px; gap: 14px; }
}

/* Town pages (/service-area/mobile-iv-therapy-<town>) and the towns page (/service-area): the town itself opens the
   page, a wide photo of the place with the royal card of words laid over its foot like a postcard; further down, the
   drawn map from the home page with this town lit up.
   The ground under the photo is WHITE, never royal: a royal card on a royal ground read as blue on blue, the card lost
   its edges (Ian, 2026-11-05: "a blue card sitting on a blue background. It just looks terrible"). */
.town { background: var(--white); padding-bottom: clamp(56px, 7vw, 104px); }
.town__pic { position: relative; margin: 0; }
.town__img { display: block; width: 100%; height: clamp(300px, 44vw, 660px); object-fit: cover; }
.town__pic .credit { position: absolute; top: 12px; right: 12px; margin: 0; max-width: calc(100% - 24px); padding: 5px 10px; border-radius: 999px; background: rgba(3, 9, 67, .72); color: var(--white); opacity: 1; font-size: 12px; }
.town__card { position: relative; max-width: 940px; margin: calc(clamp(80px, 11vw, 180px) * -1) auto 0; padding: clamp(26px, 3.6vw, 52px) clamp(22px, 4vw, 60px) clamp(30px, 4vw, 56px); border-radius: calc(var(--r) * 1.4); background: var(--royal); color: var(--white); text-align: center; box-shadow: 0 -30px 60px -40px rgba(1, 16, 52, .7), 0 34px 70px -34px rgba(1, 16, 52, .45); }
.town__card .crumbs { margin-bottom: clamp(18px, 2.4vw, 30px); }
.town__card .crumbs ol { justify-content: center; }
.town h1 { margin: 0; font: 700 clamp(56px, 8.4vw, 124px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.town h1 .hl { display: inline-block; padding: .03em .08em 0; border-radius: .05em; }
.town__pre { display: block; margin-bottom: 14px; color: var(--cyan-text); font-size: 14px; line-height: 1.3; }
.town .ihero__lede { color: rgba(255, 255, 255, .9); }
.town .facts4 { border-color: rgba(255, 255, 255, .3); }
.town .facts4 li + li { border-color: rgba(255, 255, 255, .3); }
.town .facts4 a { color: inherit; }
.town .cta-row { justify-content: center; }

/* On a computer (two columns from 1001 wide) the opening is its own design, never the phone's postcard made wide:
   the royal panel of words on the left, its edge on the header's column line, and the town photo filling the right
   half to the screen's edge, together one screen tall. Ian, 2026-11-05, after the postcard went onto white: "looks ok
   on phone but not very good on desktop": at 2140 a 940-wide card floated in white under a 660-tall strip of photo
   that it covered, and the opening ran past the first screen. The phone keeps the postcard. */
@media (min-width: 1001px) {
  .town { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(600px, calc(100svh - var(--hd)), 880px); padding-bottom: 0; background: var(--royal); }
  .town__pic { grid-column: 2; grid-row: 1; }
  .town__img { position: absolute; inset: 0; height: 100%; }
  .town__pic .credit { top: auto; bottom: 14px; right: 14px; }
  /* padding % is of the half-width column, so 100% - col/2 puts the words on the header's column line */
  /* the words CENTRE in the panel (Ian's standing rule for this site: words beside a picture centre in their own
     column, site.css "Centred, the house way") */
  .town__card { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: none; margin: 0; padding: clamp(56px, 6vw, 110px) clamp(32px, 3vw, 56px) clamp(56px, 6vw, 110px) max(var(--gutter), calc(100% - var(--col) / 2)); border-radius: 0; box-shadow: none; text-align: center; container-type: inline-size; }
  .town__card > * { max-width: 620px; width: 100%; }
  /* sized by the panel's width and the name's longest word (--chars, set by build.mjs; Oswald's capitals measured
     about .5em each, .6 leaves room for wide letters and the cyan box: at .54 "CRANBERRY" ran to 11px from the photo
     at 1100 wide): "BARBOURSVILLE." stays on one line, "WHARTON." fills the panel; never bigger than the phone's 124 */
  .town h1 { font-size: clamp(52px, calc(100cqi / (var(--chars, 14) * .6)), 124px); }
  .town .ihero__lede { max-width: 30em; }
  .town .facts4 b { font-size: clamp(20px, 1.15vw, 24px); white-space: nowrap; }
}

/* the map with this town lit up, beside the towns near it */
.townmap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: var(--col); margin: 0 auto; }
.townmap__map .area-map { border-radius: var(--r); box-shadow: 0 30px 60px -40px rgba(3, 9, 67, .55); }
.townmap__words { text-align: center; min-width: 0; }
.townmap__words > p { margin: 18px auto 0; max-width: 30em; font: 500 18px/1.55 var(--body); color: var(--ink-soft); }
.townmap__words a { color: var(--royal); font-weight: 700; text-underline-offset: 3px; }
.townmap__words .tlist a { font-weight: 600; color: inherit; }
.townmap__all { font-weight: 600; }
.m-dot--here { fill: var(--cyan); stroke: var(--ink); stroke-width: 2.5; }
.m-ring { fill: none; stroke: var(--ink); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: mRing 2.4s ease-out infinite; }
@keyframes mRing { from { opacity: .9; transform: scale(.55); } to { opacity: 0; transform: scale(1.6); } }
.m-town--here { font-size: 30px; font-weight: 800; fill: var(--ink); }

/* The towns page: the map in the opening, each area code with its towns as photo cards */
.ihero__map { min-width: 0; }
.ihero__map .area-map { border-radius: var(--r); box-shadow: 0 34px 70px -34px rgba(1, 16, 52, .6); }
/* the big area code: their cyan deepened so it reads on sky (3.4:1) and on white (3.8:1); the light cyan was 1.8:1 */
.area-head__n { margin: 0 0 -.12em; font: 700 clamp(96px, 14vw, 200px)/.8 var(--display); color: #0A8CC2; letter-spacing: -.02em; }
.area-head .lede a { color: var(--royal); font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }
/* rows wrap and CENTRE, so a short last row (West Virginia's 18 towns leave 2 under rows of 4, Pittsburgh's 15 leave 3)
   sits under the middle instead of hanging off the left edge of a centred block */
.tcards2 { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 1.4vw, 20px); max-width: var(--col); }
.tcards2 > .tc { flex: 0 1 290px; min-width: min(100%, 220px); }
.tc a { display: block; height: 100%; border-radius: var(--r); overflow: hidden; background: var(--white); color: var(--ink); text-decoration: none; box-shadow: 0 18px 40px -30px rgba(3, 9, 67, .5); transition: transform .2s ease; }
.band--white .tc a { background: var(--sky); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .tc a:hover { transform: translateY(-3px); } } /* a mouse only: a tap would leave the card lifted */
.tc__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.tc__n { display: block; padding: 14px 16px 0; font: 700 clamp(22px, 1.9vw, 27px)/1.02 var(--display); text-transform: uppercase; }
.tc__c { display: block; padding: 4px 16px 16px; font: 600 13px/1.3 var(--body); color: var(--royal); }

@media (max-width: 1000px) {
  .townmap { grid-template-columns: minmax(0, 1fr); }
  .ihero__map { max-width: 620px; margin-inline: auto; width: 100%; }
}
@media (max-width: 720px) {
  .town__card { margin-inline: 12px; padding-inline: 18px; }
  /* a long town name (Barboursville, Cranberry Township) still fits the card on a phone */
  .town h1 { font-size: clamp(38px, 11vw, 64px); }
  .town__pic .credit { top: auto; bottom: calc(clamp(80px, 11vw, 180px) + 10px); right: 10px; }
  .tcards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcards2 > .tc { min-width: 0; }
}
/* the smallest phones (320 wide): "BARBOURSVILLE." in the opening headline still fits the card */
@media (max-width: 340px) { .town h1 { font-size: 35px; } }
/* Reduce Motion (Ian's iPhone has it on): the ring around the town stays put and only breathes, slowly, instead of
   growing outward */
@keyframes mRingCalm { from { opacity: .7; } to { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .m-ring { transform: scale(1.1); animation: mRingCalm 3s ease-in-out infinite alternate; } }

/* The blog (/blog) and its articles (/blog/<slug>): an article opens on sky with its short answer first, beside one of
   their photos, then reads in one comfortable column; the blog lists the newest three big, then every topic. */
.ahero { background: var(--sky); color: var(--ink); padding: clamp(26px, 3vw, 40px) var(--pad) clamp(48px, 6vw, 88px); }
.ahero .crumbs { margin-bottom: clamp(26px, 3.6vw, 48px); }
.ahero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; max-width: var(--col); margin: 0 auto; }
.ahero__words { text-align: center; min-width: 0; }
.ahero__k { margin: 0 0 18px; font: 600 13px/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ahero__k span { color: var(--royal); }
.ahero__k span, .ahero__k b { font-weight: inherit; white-space: nowrap; }
.ahero h1 { margin: 0; font: 700 clamp(40px, 5vw, 76px)/1.06 var(--display); text-transform: uppercase; text-wrap: balance; }
/* the highlight wraps with its words, so it is painted as a band one line tall (an inline box is taller than the
   line and covered the bottom of the line above on phones). The band starts .943em above the baseline: the font's
   box now starts .95em above it (site.css), so the band sits .007em down from the box's top */
.ahero h1 .hl { padding: 0 .08em; background: linear-gradient(var(--cyan), var(--cyan)) 0 .007em / 100% 1em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ahero .tanswer { max-width: 36em; }
.ahero__pic { margin: 0; min-width: 0; }
.ahero__pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); box-shadow: 0 30px 60px -34px rgba(3, 9, 67, .5); }
.ahero__pic figcaption { margin-top: 10px; text-align: center; font: 500 14px/1.4 var(--body); color: var(--ink-soft); }

/* the article itself: the shared pieces sit inside the reading column */
.abody { padding-top: clamp(48px, 6vw, 88px); }
.prose .ingr { margin: 1.4em 0 1em; max-width: none; }
.prose .ingr__i { padding: 16px 14px; }
.prose .ingr__n { font-size: 20px; }
.prose .ingr__l { font-size: 14px; }
.prose .rx { margin: 2.2em 0; }
.prose .rx__name { margin: 8px 0 0; font-size: clamp(36px, 4vw, 54px); }
.prose .rx p { margin-bottom: 0; }
.prose .rx__name a { color: var(--white); font-weight: inherit; }
.prose .rx a.btn { font-weight: 700; color: var(--ink); }
.prose .rx a.btn--line { color: var(--white); }
.prose .callout .btn--cyan { color: var(--ink); }
.prose .callout .btn--line { color: var(--white); }
.prose ol li::marker { font-weight: 700; }

/* article cards: their photo, the topic and date, the title */
/* rows wrap and CENTRE, so a short last row sits under the middle (Hydration's 11 left 2 at the bottom left of rows of 3,
   desktop review 2026-11-05) */
.acards { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 1.6vw, 24px); max-width: var(--col); }
.acard { flex: 0 1 390px; min-width: min(100%, 280px); }
.acard__a { display: flex; flex-direction: column; height: 100%; border-radius: var(--r); overflow: hidden; background: var(--white); color: var(--ink); text-decoration: none; box-shadow: 0 18px 40px -30px rgba(3, 9, 67, .5); transition: transform .2s ease; }
.band--white .acard__a { background: var(--sky); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .acard__a:hover { transform: translateY(-3px); } } /* a mouse only: a tap would leave the card lifted */
.acard__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.acard__k { display: block; padding: 16px 20px 0; font: 600 12px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--royal); }
.acard__t { display: block; padding: 6px 20px 22px; font: 700 clamp(22px, 1.9vw, 27px)/1.05 var(--display); text-transform: uppercase; }

/* the blog page */
.bhero { text-align: center; }
.bhero .ihero__words { max-width: 900px; margin: 0 auto; }
.atopic { max-width: var(--col); margin: 0 auto; scroll-margin-top: 100px; }
.atopic + .atopic { margin-top: clamp(48px, 6vw, 88px); }
.atopic__h { margin: 0 0 clamp(20px, 2.4vw, 32px); text-align: center; font: 700 clamp(32px, 3.4vw, 48px)/1 var(--display); text-transform: uppercase; }

/* An article opens on its headline, then its picture, then the date line and the short answer (Rulebook 1.27; launch
   check 2026-11-12: on a phone the date line, a long headline and the short answer pushed the picture to 586-720 px, past
   the top 60% of the screen). Side by side on a computer nothing changes. */
@media (max-width: 1000px) {
  .ahero__in { display: flex; flex-direction: column; gap: 0; }
  .ahero__in > .ahero__words { display: contents; }
  .ahero__in > .ahero__words > * { order: 4; }
  .ahero__in > .ahero__words > h1 { order: 1; }
  .ahero__in > .ahero__pic { order: 2; margin-top: 22px; }
  .ahero__in > .ahero__words > .ahero__k { order: 3; margin: 22px 0 0; }
  .ahero h1 { font-size: clamp(30px, 8.6vw, 40px); }
}
@media (max-width: 1000px) {
  .ahero__in { grid-template-columns: minmax(0, 1fr); }
  .ahero__pic { max-width: 520px; margin-inline: auto; width: 100%; }
  .ahero__pic img { aspect-ratio: 4 / 3; }
}
/* in the reading column four ingredient cards go two by two: four across squeezed each to 163px and their words to
   four lines (desktop review 2026-11-05) */
@media (min-width: 721px) { .prose .ingr:has(> :nth-child(4):last-child) > .ingr__i { flex-basis: calc((100% - 14px) / 2); } }
@media (max-width: 720px) {
  .prose .ingr__i { flex-basis: calc((100% - 10px) / 2); }
}
@media (max-width: 340px) { .ahero h1 { font-size: 36px; } } /* "KANAWHA" ran past the column at 320 wide */

/* The one-off pages: About (their first year as a timeline), Questions, Booking, and the at-a-glance label. Same
   grounds, capitals and cyan box as the rest; each page laid out for what it holds. */

/* About: their first year, eight moments in a grid of four (a sliding row on phones, like the home page's rows) */
.tline { list-style: none; margin: clamp(36px, 4vw, 56px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); max-width: var(--col); }
.tline__i { display: flex; flex-direction: column; min-width: 0; padding: 0 0 22px; border-radius: var(--r); background: var(--royal-deep); text-align: center; overflow: hidden; box-shadow: 0 24px 44px -30px rgba(1, 16, 52, .8); }
.tline__i img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.tline__d { margin: 18px 16px 0; font: 700 15px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-hi); }
.tline__i h3 { margin: 10px 16px 0; font: 700 clamp(23px, 2vw, 29px)/1 var(--display); text-transform: uppercase; }
.tline__i p:not(.tline__d) { margin: 10px 18px 0; font: 500 15px/1.5 var(--body); color: rgba(255, 255, 255, .86); }
.tline__i a { color: var(--cyan-hi); font-weight: 600; }
/* a moment with no photo of its own: a cyan card with the month big */
.tline__i:not(:has(img)) { justify-content: center; padding: 26px 18px; background: var(--cyan); color: var(--ink); container-type: inline-size; }
/* the month never wider than its card ("DECEMBER" was cut at its edges, 2026-11-02) */
.tline__i:not(:has(img)) .tline__d { margin: 0; font-size: min(clamp(44px, 4.4vw, 64px), 20cqi); line-height: .9; letter-spacing: 0; color: var(--ink); }
.tline__i:not(:has(img)) h3 { margin-top: 16px; }
.tline__i:not(:has(img)) p:not(.tline__d) { color: var(--ink); }

/* Questions: a photo beside one group of questions */
.faqsplit { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; max-width: var(--col); margin: 0 auto; }
.faqsplit .split__pic { position: sticky; top: 120px; }
.faqsplit .qcol { margin-top: clamp(20px, 2vw, 32px); }
.jumps--ink a { border-color: var(--ink); color: var(--ink); }
.jumps--ink a:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
/* questions inside a split's words column read left to right, like every other list of questions */
.qcol--left { margin-top: clamp(18px, 2vw, 28px); text-align: left; }

/* Booking: the three ways to book, as three doors */
.doors { list-style: none; margin: clamp(36px, 4vw, 56px) auto 0; padding: 0; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: clamp(14px, 1.6vw, 24px); max-width: var(--col); }
.door { display: flex; flex-direction: column; align-items: center; padding: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px); border-radius: calc(var(--r) * 1.3); background: rgba(255, 255, 255, .08); text-align: center; }
.door--main { background: var(--white); color: var(--ink); box-shadow: 0 40px 70px -40px rgba(1, 16, 52, .75); }
.door__k { margin: 0; font: 600 13px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.door--main .door__k { color: var(--royal); }
.door__h { margin: 14px 0 0; font: 700 clamp(32px, 3.2vw, 46px)/.95 var(--display); text-transform: uppercase; }
.door__h a { color: inherit; text-decoration: none; }
.door__h a:hover { color: var(--cyan-hi); }
.door > p:not(.door__k) { margin: 14px auto 0; max-width: 22em; font: 500 16px/1.55 var(--body); color: rgba(255, 255, 255, .96); }
.door--main > p:not(.door__k) { color: var(--ink-soft); }
.door .btn, .door .cta-row { margin-top: auto; padding-top: 0; }
.door > .btn { margin-top: 22px; }
.door .cta-row { justify-content: center; padding-top: 22px; }

/* At a glance: every plain fact on one label */
.glance { padding: clamp(26px, 3vw, 40px) var(--pad) clamp(64px, 8vw, 120px); background: var(--sky); color: var(--ink); }
.glance .crumbs { margin-bottom: clamp(28px, 4vw, 56px); }
.glance__in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(28px, 4vw, 64px); align-items: start; max-width: var(--col); margin: 0 auto; }
.label { padding: clamp(26px, 3vw, 44px); border-radius: calc(var(--r) * 1.3); border-top: 10px solid var(--cyan); background: var(--white); box-shadow: 0 40px 70px -44px rgba(3, 9, 67, .55); }
.label__top { text-align: center; padding-bottom: 22px; border-bottom: 3px solid var(--ink); }
.label h1 { margin: 0; font: 700 clamp(44px, 5.4vw, 80px)/.92 var(--display); text-transform: uppercase; text-wrap: balance; }
.label h1 .hl { display: inline-block; padding: .03em .08em 0; border-radius: .05em; }
.label__sub { margin: 12px 0 0; font: 600 14px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--royal); }
.label__rows { margin: 0; }
.label__row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid rgba(3, 9, 67, .16); }
.label dt { font: 700 17px/1.25 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.label dd { margin: 0; font: 500 16px/1.55 var(--body); color: var(--ink-soft); }
.label dd a { color: var(--royal); font-weight: 600; text-underline-offset: 3px; }
.label dd a[href^="tel:"] { white-space: nowrap; }
.label__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-bottom: 3px solid var(--ink); }
.label__trio div { padding: 18px 8px; text-align: center; }
.label__trio div + div { border-left: 1px solid rgba(3, 9, 67, .16); }
.label__trio dt { font: 600 13px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--royal); }
.label__trio dd { margin-top: 8px; font: 700 clamp(24px, 2.4vw, 34px)/1 var(--display); text-transform: uppercase; color: var(--ink); }
.label__trio dd span { display: block; margin-top: 4px; font: 500 13px/1.3 var(--body); text-transform: none; color: var(--ink-soft); }
.label__foot { margin: 18px 0 0; text-align: center; font: 600 15px/1.5 var(--body); }
.label__foot a { color: var(--royal); }
.glance__side { text-align: center; position: sticky; top: 120px; }
.glance__intro { margin: 0 auto; max-width: 20em; font: 600 clamp(18px, 1.5vw, 21px)/1.5 var(--body); }
.glance__pic { margin: 22px 0 0; }
.glance__pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.glance__pic figcaption { margin-top: 10px; font: 500 14px/1.4 var(--body); color: var(--ink-soft); }
.glance__side .cta-row { justify-content: center; }

@media (max-width: 1000px) {
  .tline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faqsplit, .glance__in { grid-template-columns: minmax(0, 1fr); }
  .faqsplit .split__pic, .glance__side { position: static; }
  .faqsplit .split__pic { max-width: 560px; margin-inline: auto; width: 100%; }
  .faqsplit .split__pic img { aspect-ratio: 4 / 3; }
  .glance__pic { max-width: 440px; margin-inline: auto; }
  .doors { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}
@media (max-width: 720px) {
  .tline { display: flex; overflow-x: auto; scrollbar-width: none; gap: 14px; margin-inline: calc(-1 * var(--pad)); padding: 6px var(--pad) 14px; scroll-padding-inline: var(--pad); }
  .tline::-webkit-scrollbar { display: none; }
  .tline__i { flex: 0 0 74%; }
  .label__row { grid-template-columns: minmax(0, 1fr); }
  .label__trio { grid-template-columns: minmax(0, 1fr); }
  .label__trio div + div { border-left: 0; border-top: 1px solid rgba(3, 9, 67, .16); }
}