@layer reset, base, layout, components, theme;

/* Structural tokens: spacing, measure and chrome sizes. Colour and type scale
   are the theme's job, so they live in themes/<name>/theme.css. The --space-*
   ladder is the one scripts/css-audit.py resolves when checking box insets. */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 4rem;
  --space-9: 5.5rem;

  --gutter: var(--space-5);
  --measure-text: 38rem;
  --measure-wide: 74rem;
  --section-y: clamp(3rem, 2rem + 5vw, 5.5rem);

  --header-h: 4.25rem;

  /* Sticky chrome contract. Nothing below the header may hardcode a height, do
     arithmetic on one, or measure the header at runtime — CSS cannot stack
     sticky boxes automatically (css-position-3: "Multiple sticky positioned
     boxes in the same container are offset independently, and therefore might
     overlap"), so a shared number has to exist. It exists here, once.

     --chrome-h    how far down the viewport the header's PAINT reaches. The
                   header owns it: whichever nav module changes the header's
                   shape restates this in the same file, and nobody else does.
                   The paint, not the box — a floating bar's box carries
                   transparent inset the eye does not read as header, and
                   charging that to the chrome is a phantom gap.
     --chrome-gap  air between the chrome and the first thing under it. A pure
                   design decision, deliberately not folded into --chrome-h,
                   because mixing a measurement with a preference is what makes
                   spacing untunable. This is the knob. Turn it here.
     --below-chrome the first y that clears the chrome. Every sticky rail and
                   every anchor offset uses this verbatim.

     Adding a sticky element? `top: var(--below-chrome)`. That is the whole API,
     and it stays correct when a theme swaps the nav for a different shape. */
  --chrome-h: var(--header-h);
  --chrome-gap: 0rem;
  --below-chrome: calc(var(--chrome-h) + var(--chrome-gap));
  /* Sticky jump control under the header. Mobile = the closed <details> field;
     desktop = one pill row. site.js overwrites --jump-h with the measured height. */
  --menu-jump-h: 4.5rem;
  /* Apple HIG / WCAG 2.5.5 enhanced: stand-alone controls ≥ 44px. */
  --touch-min: 2.75rem;
  /* Floating pill + 12px inset + capped safe-area. Constant, never toggled. */
  --dock-clearance: 5.25rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* How a photograph's corners look, in one place: photo surfaces consume this
     and never pick their own. Three of them had picked three different answers,
     so no theme could restyle them together. It fixes the value, not the guest
     list — a full-bleed hero still takes no radius (a corner cut against the
     viewport edge reads as a mistake), and a 4rem thumbnail may keep the
     smaller one. */
  --radius-media: var(--radius-md);
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* :where() keeps specificity at zero, so component rules never need to fight
     the reset. A blanket `* { margin: 0 }` would also hit form controls. */
  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dt, dd, ul, ol) {
    margin: 0;
  }

  :where(ul, ol) {
    padding-left: 0;
    list-style: none;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--below-chrome) + var(--space-4));
  }

  body {
    min-height: 100dvh;
  }

  :where(img, picture, video, svg) {
    display: block;
    max-width: 100%;
  }

  :where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
  }

  :where(button) {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  :where(a) {
    color: inherit;
  }

  :where(summary) {
    cursor: pointer;
  }

  :where(summary)::-webkit-details-marker {
    display: none;
  }

  :where(h1, h2, h3, h4) {
    font-weight: inherit;
    font-size: inherit;
    text-wrap: balance;
  }

  :where(p, li, dd, figcaption) {
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  /* Without this every tap waits ~300ms for a possible double-tap. */
  :where(a, button, summary, label, select, [role="button"]) {
    touch-action: manipulation;
  }

  :where(:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
}

@layer base {
  body {
    background: var(--sand);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    /* Room for the mobile action bar so it never covers the last element. */
    padding-bottom: var(--dock-clearance);
  }

  .skip-link {
    position: fixed;
    z-index: 60;
    top: var(--space-2);
    left: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--sand);
    /* Moves via transform, not `top`, so it does not force layout each frame. */
    transform: translateY(-200%);
    transition: transform 180ms ease;
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  .u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  a {
    text-underline-offset: 0.18em;
  }

  .link {
    color: var(--sea-deep);
    text-decoration-thickness: from-font;
    transition: color 180ms ease;
  }

  .link:hover {
    color: var(--ink);
  }
}

@layer layout {
  .wrap {
    width: min(100% - var(--gutter) * 2, var(--measure-wide));
    margin-inline: auto;
  }

  .section {
    padding-block: var(--section-y);
  }

  .section--band {
    background: var(--sand-deep);
  }

  .head {
    max-width: var(--measure-text);
    margin-bottom: var(--space-6);
  }

  .head__lead {
    margin-top: var(--space-3);
    color: var(--text-muted);
    font-size: var(--step-1);
  }

  .eyebrow {
    margin-bottom: var(--space-2);
    color: var(--accent-ink);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .h2 {
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1.08;
  }

  .h3 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.15;
  }
}

@layer components {
  /* ---------------------------------------------------------------- images */

  /* `<picture>` is inline by default, so a child sized with height:100% would
     collapse it to the image's natural height and leave a colour gap. */
  .pic {
    display: block;
    width: 100%;
    height: 100%;
  }

  .pic > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---------------------------------------------------------------- buttons */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease,
      color 180ms ease, transform 180ms ease;
  }

  .btn:active {
    transform: translateY(1px);
  }

  .btn--primary {
    background: var(--sea);
    color: var(--surface);
  }

  .btn--primary:hover {
    background: var(--sea-deep);
  }

  .btn--ghost {
    border-color: var(--sea);
    color: var(--sea-deep);
  }

  .btn--ghost:hover {
    background: var(--sea-tint);
  }

  /* ---------------------------------------------------------------- header */

  .header {
    position: sticky;
    z-index: 40;
    top: 0;
    background: var(--ink);
    color: var(--sand);
  }

  .header__bar {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    min-height: var(--header-h);
  }

  .brand {
    display: inline-flex;
    gap: var(--space-3);
    align-items: center;
    margin-right: auto;
    text-decoration: none;
  }

  .brand__mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--accent);
    border-radius: 50%;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: var(--step-0);
    letter-spacing: 0.04em;
  }

  .brand__mark--lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: var(--step-1);
  }

  .brand__logo {
    display: block;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
  }

  .brand__logo--lg {
    width: 4.5rem;
    height: 4.5rem;
    margin-inline: auto;
  }

  .brand__text {
    display: grid;
  }

  .brand__name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.1;
  }

  .brand__place {
    color: var(--sand-dim);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .header__toggle {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-sm);
    color: inherit;
  }

  .header__toggle-bars {
    position: relative;
    display: block;
    width: 1.25rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: background-color 180ms ease;
  }

  .header__toggle-bars::before,
  .header__toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 180ms ease;
  }

  .header__toggle-bars::before {
    top: -6px;
  }

  .header__toggle-bars::after {
    top: 6px;
  }

  /* Native popover has no open class on the invoker. :has() is the state. */
  .header:has(.nav:popover-open) .header__toggle-bars {
    background: transparent;
  }

  .header:has(.nav:popover-open) .header__toggle-bars::before {
    transform: translateY(6px) rotate(45deg);
  }

  .header:has(.nav:popover-open) .header__toggle-bars::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  .header__cta {
    display: none;
  }

  /* audit-ok: chip frame only; 44px target is on .lang__link */
  .lang {
    display: inline-flex;
    flex: 0 0 auto;
    gap: var(--space-1);
    align-items: center;
    height: 2.5rem;
    padding: var(--space-1);
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  .lang__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.2rem;
    padding: 0 var(--space-2);
    border-radius: calc(var(--radius-sm) - 2px);
    color: inherit;
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
  }

  a.lang__link:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
  }

  .lang__link.is-current {
    background: var(--sand);
    color: var(--ink);
  }

  /* ---------------------------------------------------------------- nav */

  /* Sheet under the header, not over it. A second close control in the top
     layer sits on the hamburger; the popover leaves the top layer and the
     same pointerup hits the toggle, so the menu flashes shut and open.
     Closed state stays UA `display: none`. Do not transition display/overlay
     on the way out — that keeps a full box in the page after top-layer. */
  .nav {
    position: fixed;
    inset: var(--below-chrome) 0 auto;
    width: 100%;
    max-width: none;
    height: fit-content;
    max-height: calc(100dvh - var(--below-chrome));
    margin: 0;
    padding: var(--space-5) var(--gutter);
    overflow: auto;
    border: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--ink);
    color: var(--sand);
    overscroll-behavior: contain;
  }

  .nav:popover-open {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    transform: translateY(0);
    transition: transform 200ms ease;
  }

  @starting-style {
    .nav:popover-open {
      transform: translateY(-0.5rem);
    }
  }

  /* UA ::backdrop is transparent. A painted backdrop is full-viewport in the
     top layer, behind the popover only (MDN Popover API), so it sits on the
     header X and fails WCAG 1.4.11 non-text contrast. The sheet is opaque. */
  .nav::backdrop {
    background: transparent;
  }

  .nav:popover-open .lang {
    justify-self: start;
  }

  .nav__list {
    display: grid;
    gap: var(--space-2);
  }

  .nav__link {
    display: block;
    min-height: 3rem;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--step-1);
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease;
  }

  .nav__link:hover {
    background: var(--ink-lift);
    color: var(--accent);
  }

  /* ---------------------------------------------------------------- hero */

  .hero__grid {
    display: grid;
  }

  .hero__media {
    /* The slot owns the ratio; the art-directed sources match it per breakpoint. */
    aspect-ratio: 3 / 2;
    order: -1;
  }

  .hero__copy {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    width: min(100% - var(--gutter) * 2, var(--measure-wide));
    margin-inline: auto;
    padding-block: var(--space-5);
  }

  .hero__title {
    max-width: 22ch;
    font-family: var(--font-display);
    font-size: var(--step-4);
    line-height: 1.02;
  }

  .hero__lead {
    max-width: var(--measure-text);
    color: var(--text-muted);
    font-size: var(--step-1);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    /* The split hero's grid stretches this row to the media column's height;
       keep the buttons at their own height instead of stretching with it. */
    align-items: start;
    gap: var(--space-3);
  }

  .rating {
    display: inline-flex;
    gap: var(--space-2);
    align-items: baseline;
    font-size: var(--step--1);
    text-decoration: none;
  }

  .rating__stars {
    color: var(--accent-ink);
  }

  .rating__value {
    font-size: var(--step-0);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .rating__count {
    color: var(--text-muted);
  }

  /* Fact strip under the hero. Full-bleed band; the list sits in .wrap. */
  .strip {
    padding-block: var(--space-5);
    background: var(--ink);
    color: var(--sand);
  }

  .strip__list {
    display: grid;
    gap: 1px;
  }

  .strip__item {
    display: grid;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
  }

  .strip__label {
    color: var(--accent);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .strip__value {
    font-size: var(--step-0);
    font-variant-numeric: tabular-nums;
  }

  /* ---------------------------------------------------------------- story */

  .story__grid {
    display: grid;
    gap: var(--space-6);
  }

  .story__copy {
    display: grid;
    gap: var(--space-4);
    align-content: start;
    max-width: var(--measure-text);
  }

  .story__notes {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-left: 3px solid var(--accent);
    background: var(--surface);
    font-size: var(--step--1);
  }

  .story__media {
    position: relative;
    aspect-ratio: 3 / 4;
    max-width: 26rem;
    margin-inline: auto;
    border-radius: var(--radius-media);
    overflow: hidden;
  }

  .story__caption {
    padding: var(--space-3) var(--space-4);
    background: var(--ink);
    color: var(--sand);
    font-size: var(--step--1);
  }

  /* ---------------------------------------------------------------- picks */

  .picks__grid {
    display: grid;
    gap: var(--space-6);
    /* auto-fit avoids the half-viewport card jump a rigid 3/2/1 ladder causes. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }

  .pick {
    display: grid;
    container-type: inline-size;
    gap: var(--space-4);
    /* A grid item's automatic minimum size is its content, so an image can push
       the column wider than its track. minmax(0, ...) above plus this fixes it. */
    min-width: 0;
  }

  .pick__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-media);
    overflow: hidden;
  }

  /* Flex, not grid: auto grid rows stretch, which pushed the name of a card
     with a shorter note away from its image. Here the name stays under the
     image and only the price is pushed down. */
  .pick__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .pick__name {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.1;
  }

  .pick__note {
    color: var(--text-muted);
  }

  .pick__price {
    /* Prices line up across cards whose notes run to different lengths. */
    margin-block-start: auto;
    color: var(--sea-deep);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  @container (min-width: 22rem) {
    .pick__name {
      font-size: var(--step-2);
    }
  }

  /* ---------------------------------------------------------------- menu */

  /* Compact sticky jump: a <details> of links, not a <select>. Focusing a form
     control inside stuck sticky chrome scrolls the page to its unstuck position
     in Chromium (csswg-drafts#3009), and a select that navigates on change fails
     WCAG 3.2.2. Hidden on desktop, where the pill rail owns this slot.
     See docs/patterns/interactions/P-menu-jump-disclosure.md. */
  .menu__jump {
    position: sticky;
    z-index: 30;
    top: var(--below-chrome);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    background: var(--sand);
  }

  .menu__jump-field {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch-min);
    /* ≥12px inset: css-audit bordered-box rule (section 7b). */
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    list-style: none;
  }

  .menu__jump-field::-webkit-details-marker {
    display: none;
  }

  .menu__jump[open] .menu__jump-field {
    border-color: var(--sea);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .menu__jump-icon {
    display: grid;
    place-items: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: var(--radius-sm);
    background: var(--sea-tint);
    color: var(--sea-deep);
  }

  .menu__jump-copy {
    min-width: 0;
  }

  .menu__jump-label {
    display: block;
    margin: 0 0 2px;
    color: var(--accent-ink);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .menu__jump-value {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu__jump-go {
    display: grid;
    place-items: center;
    width: var(--touch-min);
    height: var(--touch-min);
    border-radius: var(--radius-sm);
    background: var(--sea);
    color: var(--sand);
    transition: transform 180ms ease;
  }

  .menu__jump[open] .menu__jump-go {
    transform: rotate(180deg);
  }

  .menu__jump-list {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--sea);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--surface);
    max-height: min(60dvh, 24rem);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .menu__jump-option {
    display: flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
  }

  .menu__jump-option:hover,
  .menu__jump-option:focus-visible {
    background: var(--sea-tint);
    color: var(--sea-deep);
  }

  /* Desktop pills: hidden on mobile, where the jump field owns the sticky slot. */
  .menu__pills {
    display: none;
  }

  .menu__pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  }

  .pill:hover {
    border-color: var(--sea);
    background: var(--sea-tint);
    color: var(--sea-deep);
  }

  .menu__list {
    display: grid;
    gap: var(--space-3);
  }

  /* The inset lives on .cat__head and .row. Padding on the container would inset
     the zebra stripes from the card edge, the bug the menu pattern warns about. */
  /* audit-ok: inset is on the children, by design */
  .cat {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
    /* Only the jump bar: html's scroll-padding-top already clears the header. */
    scroll-margin-top: calc(var(--jump-h, var(--menu-jump-h)) + var(--space-3));
  }

  /* Focus stops, not only jump targets: without this, tabbing into the menu
     parks focus under the sticky pills/jump bar (WCAG 2.4.11, same as .cat). */
  .menu :is(a, button, summary, input, select) {
    scroll-margin-top: calc(var(--jump-h, var(--menu-jump-h)) + var(--space-3));
  }

  /* Category header is the primary tap target: ≥44px (Apple HIG / WCAG 2.5.5). */
  .cat__head {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
    min-height: var(--touch-min);
    padding: var(--space-4) var(--space-5);
    background: var(--sea-tint);
    cursor: pointer;
    list-style: none;
    transition: background-color 180ms ease;
  }

  .cat__head::-webkit-details-marker {
    display: none;
  }

  .cat__head:hover {
    background: var(--sea-tint-deep);
  }

  .cat__title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.1;
  }

  .cat__count {
    color: var(--text-muted);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Ledger rows: not interactive, so they stay denser than 44px. */
  .rows {
    container-type: inline-size;
    padding: 0;
  }

  .row {
    display: flex;
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-3) var(--space-5);
  }

  .row:nth-child(even) {
    background: var(--zebra);
  }

  .row__name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
  }

  .row__desc {
    display: block;
    color: var(--text-muted);
    font-size: var(--step--1);
    font-weight: 400;
  }

  .row__price {
    flex: 0 0 auto;
    color: var(--sea-deep);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* ---------------------------------------------------------------- gallery */

  .gallery__grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }

  .gallery__cell {
    min-width: 0;
  }

  .tile {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-media);
    overflow: hidden;
  }

  .tile > .pic > img {
    transition: transform 220ms ease;
  }

  .tile:hover > .pic > img,
  .tile:focus-visible > .pic > img {
    transform: scale(1.04);
  }

  /* Stage lightbox (P-lightbox-dialog): the photo is the page, chrome sits on
     the edges. Transparent dialog + ::backdrop scrim, not a padded card.
     Load-bearing: `display: grid` lives only on [open]. On the closed dialog
     it beats the UA `display: none`, so the arrows stay on the page and eat
     clicks after close ([Chrome entry/exit](https://developer.chrome.com/blog/entry-exit-animations)).
     `overlay` stays in the transition list so the exit is seen. The dialog
     takes programmatic focus; its close button keeps the visible ring. */
  .lightbox {
    grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
    grid-template-rows: var(--touch-min) minmax(0, 1fr);
    column-gap: var(--space-2);
    row-gap: var(--space-3);
    align-items: center;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: var(--space-3);
    border: 0;
    background: transparent;
    color: var(--sand);
    overscroll-behavior: contain;
    transform: translateY(0.75rem) scale(0.985);
    transition:
      transform 200ms ease,
      overlay 200ms allow-discrete,
      display 200ms allow-discrete;
  }

  /* audit-ok: dialog takes programmatic focus; close keeps the ring */
  .lightbox:focus {
    outline: none;
  }

  .lightbox[open] {
    display: grid;
    transform: none;
  }

  @starting-style {
    .lightbox[open] {
      transform: translateY(0.75rem) scale(0.985);
    }
  }

  .lightbox::backdrop {
    background: color-mix(in srgb, var(--ink-deep) 92%, transparent);
  }

  .lightbox__count {
    grid-column: 1 / 3;
    grid-row: 1;
    margin: 0;
    color: var(--sand-dim);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 0.4rem var(--ink-deep);
  }

  .lightbox__close,
  .lightbox__step {
    display: grid;
    place-items: center;
    width: var(--touch-min);
    height: var(--touch-min);
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--sand);
    background: color-mix(in srgb, var(--ink-deep) 45%, transparent);
    filter: drop-shadow(0 0 0.35rem var(--ink-deep));
    transition: background-color 180ms ease;
  }

  .lightbox__close {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .lightbox__close:hover,
  .lightbox__step:hover {
    background: color-mix(in srgb, var(--ink-deep) 72%, transparent);
  }

  .lightbox__step--prev {
    grid-column: 1;
    grid-row: 2;
  }

  .lightbox__step--next {
    grid-column: 3;
    grid-row: 2;
  }

  .lightbox__stage {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    min-width: 0;
    min-height: 0;
    margin: 0;
    place-items: center;
  }

  .lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Native order wizard. Focus stays inside the dialog via showModal(). */
  .order {
    position: relative;
    width: min(92vw, 32rem);
    max-height: 90dvh;
    padding: var(--space-6);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .order::backdrop {
    background: var(--scrim-deep);
  }

  .order__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font-size: var(--step-2);
    line-height: 1;
    cursor: pointer;
  }

  .order__progress {
    margin: 0 var(--space-7) var(--space-2) 0;
    color: var(--text-muted);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .order__title {
    margin: 0 var(--space-7) var(--space-4) 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
  }

  .order__body {
    display: grid;
    gap: var(--space-4);
  }

  .order__body textarea,
  .order__body input,
  .order__body select {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--sand);
    color: var(--ink);
    font: inherit;
    /* iOS zooms the page on focusing any control under 16px; floor the size. */
    font-size: max(1em, 1rem);
  }

  .order__body textarea {
    min-height: 8rem;
    resize: vertical;
  }

  .order__error:empty {
    display: none;
  }

  .order__error {
    margin: var(--space-3) 0 0;
    color: var(--accent-ink);
    font-size: var(--step--1);
  }

  .order__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-5);
  }

  .order__summary {
    display: grid;
    gap: var(--space-3);
    margin: 0;
  }

  .order__summary > div {
    display: grid;
    gap: 2px;
  }

  .order__summary dt {
    color: var(--text-muted);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .order__note {
    color: var(--text-muted);
    font-size: var(--step--1);
  }

  /* ---------------------------------------------------------------- reviews */

  .quotes {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }

  .quote {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    min-width: 0;
    padding-inline: var(--space-4);
    border-left: 2px solid var(--accent);
  }

  .quote__text {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.4;
  }

  .quote__by {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
    font-size: var(--step--1);
  }

  .quote__author {
    font-weight: 600;
  }

  .quote__role {
    color: var(--text-muted);
  }

  .quote__stars {
    color: var(--accent-ink);
    letter-spacing: 0.1em;
  }

  .reviews__more {
    margin-top: var(--space-6);
  }

  /* A link on its own line is a tap target, not prose: pad it past the 24px
     WCAG 2.2 floor without changing the text size. */
  .reviews__more .link {
    display: inline-block;
    /* audit-ok: sized to the 24px floor at this font size, not to the rhythm */
    padding-block: 0.45rem;
  }

  /* ---------------------------------------------------------------- visit */

  /* Eyebrow + heading (+ optional booking lead) span the section; the two-column
     grid below holds contact details and the map panel (Familija shape). */
  .visit__intro {
    display: grid;
    gap: var(--space-3);
    max-width: var(--measure-text);
    margin-bottom: var(--space-6);
  }

  /* Delivery copy + optional coverage drawing, above Find us. */
  .visit__top--with-map {
    margin-bottom: var(--space-8);
  }

  /* audit-ok: coverage map is the content, not copy needing inset */
  .visit__coverage-map {
    margin: 0;
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .visit__coverage-map .pic,
  .visit__coverage-map img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .visit__grid {
    display: grid;
    gap: var(--space-6);
  }

  .visit__copy {
    display: grid;
    gap: var(--space-5);
    align-content: start;
  }

  .visit__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  /* NAP is the left column's primary content; no top rule once the heading
     lives above the grid. */
  .visit__details {
    min-width: 0;
  }

  .visit__panel-title {
    margin-bottom: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--step-2);
  }

  /* One bordered unit: map flush on top, CTA strip below, no inner seam.
     Inset lives on .visit__panel-foot so the iframe can share the container's
     top corners edge-to-edge. */
  /* audit-ok: inset is on the children; map must be flush */
  .visit__panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  /* Media slot: the iframe fills the box edge-to-edge; padding would letterbox it.
     Mobile keeps 4 / 3; desktop drops the ratio so the map absorbs row slack. */
  /* audit-ok: map iframe is the content, not copy needing inset */
  .visit__map {
    position: relative;
    flex: 1 1 auto;
    aspect-ratio: 4 / 3;
    min-height: 12rem;
    overflow: hidden;
    background: var(--surface);
  }

  .visit__map iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .visit__panel-foot {
    flex: 0 0 auto;
    padding: var(--space-4) var(--space-5);
  }

  .visit__maps-cta {
    width: 100%;
  }

  .visit__list {
    margin-bottom: var(--space-6);
  }

  .visit__list-title {
    margin-bottom: var(--space-3);
    font-weight: 600;
  }

  .visit__list ul {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .visit__list li {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }

  .visit__map--photo .pic,
  .visit__map--photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .nap {
    display: grid;
    gap: var(--space-3);
  }

  .nap > dt {
    color: var(--text-muted);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .nap > dd {
    display: grid;
    gap: 2px;
    font-variant-numeric: tabular-nums;
  }

  .nap__note {
    color: var(--text-muted);
    font-size: var(--step--1);
  }

  /* ---------------------------------------------------------------- faq */

  /* One reading measure, centred by .wrap's own auto margins. Nothing in this
     section is wide — the head and the questions are both one measure — so a
     wide inner just parked the whole column against the left of a container
     twice its width. Capping the inner is what centres it; capping the children
     individually cannot, and reads as deliberate left alignment. */
  .faq__inner {
    max-width: var(--measure-text);
  }

  .faq__list {
    display: grid;
    gap: var(--space-2);
  }

  .qa {
    border-bottom: 1px solid var(--line);
  }

  .qa__q {
    display: flex;
    gap: var(--space-4);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-4) var(--space-3);
    font-size: var(--step-1);
    font-weight: 600;
    transition: color 180ms ease;
  }

  .qa__q::after {
    content: "+";
    color: var(--accent-ink);
    font-size: var(--step-2);
    line-height: 1;
  }

  .qa[open] > .qa__q::after {
    content: "\2212";
  }

  .qa__q:hover {
    color: var(--sea-deep);
  }

  .qa__a {
    padding: 0 var(--space-3) var(--space-4);
    color: var(--text-muted);
  }

  /* ---------------------------------------------------------------- cta */

  .cta {
    padding-block: var(--section-y);
    background: var(--ink);
    color: var(--sand);
  }

  .cta__inner {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    text-align: center;
  }

  .cta__title {
    max-width: 26ch;
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1.06;
  }

  .cta__lead {
    max-width: var(--measure-text);
    color: var(--sand-dim);
  }

  .cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
  }

  .cta .btn--ghost {
    border-color: var(--sand-dim);
    color: var(--sand);
  }

  .cta .btn--ghost:hover {
    background: var(--ink-lift);
  }

  /* ---------------------------------------------------------------- footer */

  .footer {
    padding-block: var(--space-8) var(--space-6);
    background: var(--ink-deep);
    color: var(--sand);
  }

  .footer__inner {
    display: grid;
    gap: var(--space-7);
  }

  .footer__brand {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    text-align: center;
  }

  .footer__name {
    font-family: var(--font-display);
    font-size: var(--step-2);
  }

  .footer__blurb {
    max-width: 44ch;
    color: var(--sand-dim);
    font-size: var(--step--1);
  }

  .footer__socials {
    display: flex;
    gap: var(--space-2);
  }

  .footer__social {
    display: grid;
    place-items: center;
    width: var(--touch-min);
    height: var(--touch-min);
    color: var(--sand-dim);
    transition: color 180ms ease;
  }

  .footer__social:hover {
    color: var(--sand);
  }

  .footer__social svg {
    width: var(--step-1);
    height: var(--step-1);
  }

  .footer__cols {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    text-align: center;
  }

  .footer__title {
    margin-bottom: var(--space-3);
    color: var(--accent);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .footer__list {
    display: grid;
    gap: var(--space-2);
  }

  .footer__link {
    display: inline-block;
    padding-block: var(--space-1);
    color: var(--sand-dim);
    text-decoration: none;
    transition: color 180ms ease;
  }

  .footer__link:hover {
    color: var(--sand);
    text-decoration: underline;
  }

  .footer__oib {
    color: var(--sand-dim);
    font-size: var(--step--1);
    text-align: center;
  }

  .footer__fine {
    padding-top: var(--space-5);
    border-top: 1px solid var(--ink-lift);
    color: var(--sand-dim);
    font-size: var(--step--1);
    text-align: center;
  }

  /* ---------------------------------------------------------------- dock */

  /* Floating pill, inset from the edges. Pointer-events only on the inner so
     the full-bleed positioning layer does not steal taps. */
  .dock {
    position: fixed;
    z-index: 50;
    inset: auto 0 0;
    padding: 0 var(--space-3)
      max(var(--space-2), min(env(safe-area-inset-bottom, 0px), var(--space-3)));
    pointer-events: none;
    visibility: hidden;
    transform: translateY(calc(100% + 0.375rem));
    transition: transform 200ms ease, visibility 200ms;
  }

  .dock.is-visible {
    visibility: visible;
    transform: translateY(0);
  }

  /* The fixed dock covers the viewport's bottom edge: keep scrolled-to focus
     stops above it (WCAG 2.4.11). Cleared at 64rem with the dock itself. */
  html {
    scroll-padding-bottom: var(--dock-clearance);
  }

  .dock.is-visible .dock__inner {
    pointer-events: auto;
  }

  .dock__inner {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
    max-width: 25rem;
    margin-inline: auto;
    /* audit-ok: 5px around the 2.75rem items keeps the pill at 54px; --space-2 gives 60px */
    padding: 0.3125rem var(--space-3);
    border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    box-shadow:
      0 8px 28px color-mix(in srgb, var(--ink-deep) 18%, transparent),
      0 1px 0 color-mix(in srgb, var(--surface) 85%, transparent) inset;
    backdrop-filter: blur(12px);
  }

  .dock__item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: var(--space-1) 2px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 150ms ease, transform 150ms ease;
  }

  .dock__item:active {
    background: var(--sand-deep);
    transform: scale(0.96);
  }

  .dock__icon {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--sea);
  }

  .dock__icon svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
  }

  .dock__label {
    color: var(--sea-deep);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1;
  }

  .dock__item--primary {
    flex: 0 1 auto;
    min-width: 5.5rem;
    margin-inline: 1px;
    /* audit-ok: optical pad for the icon+label stack; min-height already sets the target */
    padding: 0.4375rem var(--space-4);
    background: linear-gradient(180deg, var(--sea) 0%, var(--sea-deep) 100%);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--sea) 34%, transparent);
    color: var(--surface);
  }

  .dock__item--primary .dock__icon {
    background: color-mix(in srgb, var(--ink-deep) 12%, transparent);
    color: var(--surface);
  }

  .dock__item--primary .dock__label {
    color: var(--surface);
    font-size: 0.72rem;
  }

  .dock__item--primary:active {
    background: var(--sea-deep);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--sea) 28%, transparent);
  }

  /* ---------------------------------------------------------------- doc pages */

  .doc {
    padding-block: var(--section-y);
  }

  .doc__inner {
    display: grid;
    gap: var(--space-4);
    max-width: var(--measure-text);
  }

  .doc__title {
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1.06;
  }

  .doc__h2 {
    margin-top: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--step-2);
  }

  .doc__meta {
    color: var(--text-muted);
    font-size: var(--step--1);
  }

  .doc__list {
    display: grid;
    gap: var(--space-2);
    padding-left: var(--space-5);
    list-style: disc;
  }

  .doc__back {
    margin-top: var(--space-5);
  }

  /* ---------------------------------------------------------------- desktop */

  @media (min-width: 48rem) {
    .hero__media {
      aspect-ratio: 16 / 9;
    }

    .hero__copy {
      padding-block: var(--space-7);
    }

    .strip__list {
      grid-auto-columns: 1fr;
      grid-auto-flow: column;
    }

    .strip__item {
      border-left: 1px solid var(--ink-lift);
    }

    .strip__item:first-child {
      border-left: 0;
    }
  }

  @media (min-width: 64rem) {
    .header__toggle {
      display: none;
    }

    .header__cta {
      display: inline-flex;
    }

    /* Beats the UA `[popover]:not(:popover-open) { display: none }` rule so the
       same markup is a dropdown on mobile and a plain nav here. */
    .nav {
      position: static;
      display: flex;
      gap: var(--space-3);
      align-items: center;
      width: auto;
      max-width: none;
      height: auto;
      max-height: none;
      margin: 0;
      padding: 0;
      overflow: visible;
      border-radius: 0;
      background: none;
      transform: none;
      transition: none;
    }

    .nav:not(:popover-open),
    .nav:popover-open {
      display: flex;
      transform: none;
      transition: none;
    }

    .nav .lang {
      order: 1;
    }

    .nav__list {
      display: flex;
      gap: var(--space-2);
    }

    .nav__link {
      min-height: 2.5rem;
      padding: var(--space-2) var(--space-3);
      font-size: var(--step-0);
    }

    .hero__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      align-items: stretch;
    }

    .hero__media {
      aspect-ratio: auto;
      order: 0;
      min-height: 32rem;
    }

    .hero__copy {
      width: auto;
      margin: 0;
      padding: var(--space-9) var(--space-7) var(--space-9)
        max(var(--gutter), calc((100vw - var(--measure-wide)) / 2));
    }

    .story__grid {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      gap: var(--space-8);
      align-items: start;
    }

    /* Contact details vs map panel. Narrower copy (1fr) / wider map (1.2fr);
       equal-height stretch lets the map fill the row without a dead band. */
    .visit__top--with-map {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      gap: var(--space-8);
      align-items: start;
    }

    .visit__top--with-map .visit__intro {
      margin-bottom: 0;
    }

    .visit__top--with-map .visit__list {
      grid-column: 1;
      margin-bottom: 0;
    }

    .visit__top--with-map .visit__coverage-map {
      grid-column: 2;
      grid-row: 1 / span 2;
    }

    .visit__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      gap: var(--space-8);
      align-items: stretch;
    }

    .visit__panel {
      min-height: 100%;
    }

    .visit__map {
      aspect-ratio: auto;
      min-height: 14rem;
    }

    .story__media {
      margin-inline: 0;
    }

    /* Desktop: pills; the jump field is for narrow viewports only. */
    .menu__jump {
      display: none;
    }

    .menu__pills {
      display: block;
      position: sticky;
      z-index: 30;
      top: var(--below-chrome);
      margin-bottom: var(--space-5);
      padding-block: var(--space-2);
      background: var(--sand);
    }

    .dock {
      display: none;
    }

    html {
      scroll-padding-bottom: 0;
    }

    body {
      padding-bottom: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dock {
      transition: none;
      transform: none;
    }

    .menu__jump-go {
      transition: none;
    }
  }
}

/* chrome.placeholder: blur — P-media-blur-up

   Every slot paints a tiny blurred copy of its own photograph until the real
   file arrives, so a scrolled-to image resolves out of its own colours instead
   of flashing the page background.

   There is no reveal to run and nothing to fade. An <img> paints nothing until
   it has decoded, so the backdrop simply shows through and is covered the
   moment the file lands. No opacity, no transition, no state that can strand an
   image invisible if a script never runs.

   The data URI is written per element by core/images.py; a slot without one
   leaves var(--lqip) invalid, which resolves to no background at all. */
@layer components {
  .pic {
    background-image: var(--lqip);
    background-position: center;
    background-size: cover;
  }
}

@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bebas-neue-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bebas-neue-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/montserrat-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/montserrat-600-latin.woff2") format("woff2");
}

@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/montserrat-700-latin.woff2") format("woff2");
}

:root {
  --sand: #0b0e12;
  --sand-deep: #07090c;
  --sand-dim: #6d7a85;
  --surface: #141923;
  --ink: #11151b;
  --ink-deep: #07090c;
  --ink-lift: #1c2430;
  --sea: #3cc1c0;
  --sea-deep: #2a9e9d;
  --sea-tint: #111922;
  --sea-tint-deep: #0d1219;
  --accent: #3cc1c0;
  --accent-ink: #07090c;
  --text: #f2f5f7;
  --text-muted: #aab4bd;
  --line: rgb(255 255 255 / 0.08);
  --line-soft: rgb(255 255 255 / 0.05);
  --zebra: #11151b;

  --focus: var(--sea);
  --scrim: rgb(7 9 12 / 0.72);
  --scrim-deep: rgb(7 9 12 / 0.92);

  --font-display: "Bebas Neue", Montserrat, sans-serif;
  --font-body: Montserrat, "Segoe UI", system-ui, sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.22rem + 0.75vw, 1.75rem);
  --step-3: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --step-4: clamp(2.75rem, 2rem + 3vw, 4.5rem);

  --sea-soft: color-mix(in srgb, var(--sea) 85%, white);
  --sea-dim: color-mix(in srgb, var(--sea) 14%, transparent);
  --sea-line: color-mix(in srgb, var(--sea) 35%, transparent);
  --beat-nav-h: 4.25rem;
  --beat-mobile-bar-h: 4.75rem;
  --beat-container: 70rem;
  color-scheme: dark;
}

@layer theme {
.wrap,
.container{ max-width: var(--beat-container); margin-inline:auto; padding-inline: var(--space-5); }

.section{ padding-block: var(--space-9); position: relative; }
/* Band colour still separates the pages. The faint teal fade is a seam, not a
   box: it dies out at both edges so it does not read as a hairline rule. */
.section[data-tone="raised"]{ background: var(--zebra); }
.section::before,
.pillars::before,
footer::before{
  content:"";
  position:absolute; inset-inline:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent 6%, color-mix(in srgb, var(--sea) 32%, transparent) 50%, transparent 94%);
  pointer-events:none;
}

.kicker{
  display:inline-flex; align-items:center; gap: var(--space-2);
  font-size:.88rem; font-weight:600;
  color: var(--sea);
  margin-bottom: var(--space-3);
}

/* Letterspacing here is the wordmark's own voice. The teal bar that used to
   sit in front of it is gone: one lockup is enough, and that lockup is the logo. */
.hero-kicker{
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}

h1,h2{ font-family: var(--font-display); line-height:1.05; text-transform:uppercase; letter-spacing:.025em; font-weight:400; }
h2{ font-size: clamp(2rem, 4.5vw, 3.1rem); margin-bottom: var(--space-4); }
/* Bebas is the display voice for the H1 and section headings only. Below that
   it is a label face, and a page of condensed caps labels reads as a template. */
h3{ font-family: var(--font-body); font-weight:600; line-height:1.3; letter-spacing:normal; text-transform:none; }
.section-lead{ color: var(--text-muted); max-width: 60ch; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-6);
  border-radius: 4px;
  font-family: var(--font-body); font-weight:700; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition: background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out, transform 90ms ease-out;
}
/* Press feedback beats hover lift: it answers the finger, and it is the only
   state a touch device ever sees. */
.btn:active{ transform: scale(.97); }
.btn[data-variant="primary"]{
  background: var(--sea); color: var(--ink-deep);
}
.btn[data-variant="primary"]:hover{ background: var(--sea-soft); }
.btn[data-variant="ghost"]{
  background: transparent; color: var(--text);
  border-color: rgb(255 255 255 / 0.45);
}
.btn[data-variant="ghost"]:hover{ border-color: var(--text); background: rgb(255 255 255 / 0.07); }
.btn[data-size="sm"]{ min-height:40px; padding: var(--space-2) var(--space-4); font-size:.78rem; }

@media (hover:none), (pointer:coarse){
  .btn{ min-height: var(--touch-min); }
}

/* ============ NAV ============ */
.site-nav{
  position:fixed; inset-inline:0; top:0; z-index:100;
  height: var(--beat-nav-h);
  background: color-mix(in srgb, var(--sand-deep) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width: var(--beat-container); margin-inline:auto; padding-inline: var(--space-5);
  height:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--space-4);
}
.nav-brand{ display:flex; align-items:center; text-decoration:none; }
.nav-brand img{ height:46px; width:auto; }
.nav-links{ display:flex; gap: var(--space-5); list-style:none; }
.nav-links a{
  display:inline-flex; align-items:center; min-height:1.5rem;
  color: var(--text); text-decoration:none; font-weight:600;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.12em;
  /* audit-ok: 24px tap floor at .78rem uppercase */
  padding-block:0.45rem; border-bottom:2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.nav-links a:hover,
.nav-links a.active{ color: var(--sea); border-bottom-color: var(--sea); }
.nav-cta{ display:flex; align-items:center; gap: var(--space-4); }
.nav-mobile-only{ display:none; }

.nav-burger{
  display:none; background:none; border:1px solid var(--line); border-radius: var(--radius-sm);
  width:44px; height:44px; color: var(--text); cursor:pointer;
}
.nav-burger svg{ display:block; }
@media (max-width: 63.99rem){
  .nav-links{ display:none; position:fixed; top:var(--beat-nav-h); inset-inline:0;
    flex-direction:column; gap:0; background: color-mix(in srgb, var(--sand-deep) 97%, transparent); border-bottom:1px solid var(--line); padding: var(--space-3) 0; }
  .nav-links.open{ display:flex; }
  .nav-links a{ display:block; padding: var(--space-3) var(--space-5); }
  .nav-mobile-only{ display:list-item; }
  .nav-burger{ display:inline-flex; align-items:center; justify-content:center; }
  .nav-cta .btn{ display:none; }
}

.hero-note{
  margin: 0 0 var(--space-7);
  font-size:.82rem; color: var(--sand-dim);
}
.hero-kicker{ margin: var(--space-5) 0 var(--space-3); }

/* ============ HERO ============ */
/* The photo is the pipeline hero <picture> in .hero-media, not a CSS
   background: gen.py preloads exactly those srcsets, so the LCP request is
   the one the head already made. Scrims paint on pseudos above the img. */
.hero{
  position:relative;
  padding-top: calc(var(--beat-nav-h) + var(--space-9));
  padding-bottom: var(--space-9);
  overflow:hidden;
  background: var(--ink-deep);
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero-media .pic{
  position:absolute;
  inset:0;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* The scrim is heavy enough to hold white type over the copy and no heavier:
   the class in the photo has to stay a class of people. Floor fade only, so
   the section meets the next band without becoming a top-down wash. */
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink-deep) 92%, transparent) 0%, color-mix(in srgb, var(--ink-deep) 82%, transparent) 58%, color-mix(in srgb, var(--ink-deep) 36%, transparent)),
    linear-gradient(180deg, transparent 70%, var(--sand) 99%);
}
.hero > .wrap{ position:relative; z-index:2; }
/* Photo is its own layer at 52% width so the side mask runs on the
   print. A 48% flat wash failed WCAG over pale kit (floor is 50–60%,
   and that is a minimum). Four-stop eased scrims, heavy on the copy
   side; the mask dissolves a third of the print on each edge so it
   becomes the field instead of a postcard. */
@media (min-width: 48rem){
  .hero-media{
    inset:auto;
    left:50%; top:50%;
    translate:-50% -50%;
    width:52%;
    aspect-ratio:1024 / 699;
    mask-image: linear-gradient(90deg, transparent 0%, var(--text) 28%, var(--text) 72%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--text) 28%, var(--text) 72%, transparent 100%);
  }
  .hero-media::after{
    background: linear-gradient(90deg, color-mix(in srgb, var(--ink-deep) 82%, transparent) 0%, color-mix(in srgb, var(--ink-deep) 64%, transparent) 28%, color-mix(in srgb, var(--ink-deep) 40%, transparent) 50%, color-mix(in srgb, var(--ink-deep) 64%, transparent) 72%, color-mix(in srgb, var(--ink-deep) 88%, transparent) 100%);
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background: linear-gradient(90deg, var(--ink-deep) 0%, color-mix(in srgb, var(--ink-deep) 78%, transparent) 22%, color-mix(in srgb, var(--ink-deep) 42%, transparent) 38%, color-mix(in srgb, var(--ink-deep) 12%, transparent) 52%, transparent 64%);
  }
}
.hero-grid{ max-width: 720px; min-height: 52vh; display:flex; flex-direction:column; justify-content:center; }
.hero h1{ font-size: clamp(3rem, 7.5vw, 5.4rem); margin: var(--space-4) 0; }
.hero h1 img{
  display:block; height:.92em; width:auto;
  margin-top:.12em;
}
.hero-sub{ color: var(--text-muted); font-size:1.12rem; max-width:52ch; margin-bottom: var(--space-5); }
.hero-actions{ display:flex; flex-wrap:wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
.hero-points{
  display:flex; flex-direction:column; gap: var(--space-3);
  list-style:none;
}
@media (min-width: 48rem){
  .hero-points{ flex-direction:row; flex-wrap:nowrap; gap: var(--space-3) var(--space-6); }
}
.hero-points li{
  display:flex; align-items:center; gap: var(--space-3);
  color: var(--text-muted); font-size:.9rem; font-weight:600;
}
.hero-points li::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:0 0 6px;
  background: var(--sea);
}
/* ============ PILLARS (brand board feature row) ============ */
.pillars{
  position:relative;
  background: var(--ink-deep);
  padding-block: var(--space-7);
}
.pillars-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6) var(--space-5); }
.pillar{ display:flex; gap: var(--space-4); align-items:flex-start; }
.pillar-ico{
  flex:0 0 auto; margin-top:1px;
  display:flex; color: var(--sea);
}
.pillar-ico svg{ display:block; width:24px; height:24px; }
.pillar h3{ font-size:.98rem; margin-bottom: var(--space-1); }
.pillar p{ color: var(--text-muted); font-size:.85rem; line-height:1.5; }

/* ============ RATING STRIP ============ */
.rating-strip{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6) var(--space-5);
  margin-top: var(--space-8);
}
.rating-item b{
  display:block; font-family: var(--font-display);
  font-size:2rem; line-height:1.1; color: var(--text); font-weight:400;
}
.rating-stars{ color: var(--sea); font-size:1.05rem; letter-spacing:2px; vertical-align:2px; }
.rating-item > span{ color: var(--text-muted); font-size:.83rem; }

/* ============ VALUES (about) ============ */
/* Three boxed columns of icon-heading-paragraph is the house style of every
   generated landing page. The copy is the same; the box is what has to go, and
   the offset stops the row scanning as a card set. */
.values-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-7);
  margin-top: var(--space-8);
}
.value-card h3{ font-size:1.15rem; margin-bottom: var(--space-2); color: var(--text); }
.value-card p{ color: var(--text-muted); font-size:.95rem; }

/* ============ CLASSES ============ */
.class-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: var(--space-4); margin-top: var(--space-7); }
.class-card{
  background: var(--surface); border-radius: var(--radius-md);
  padding: var(--space-5);
  display:flex; flex-direction:column; gap: var(--space-3);
  transition: background-color 140ms ease-out;
}
@media (hover:hover) and (pointer:fine){
  .class-card:hover{ background: var(--ink-lift); }
}
.class-card h3{ font-size:1.1rem; }
.class-card p{ color: var(--text-muted); font-size:.93rem; flex:1; }
.class-meta{ display:flex; flex-wrap:wrap; gap: var(--space-2); }
.tag{
  font-size:.78rem; font-weight:600;
  padding: var(--space-1) var(--space-2); border-radius:3px;
  background: rgb(255 255 255 / 0.06); color: var(--text-muted);
}
.tag[data-kind="level"]{ background: var(--sea-dim); color: var(--sea-soft); }
.tag[data-kind="kids"]{ background: color-mix(in srgb, var(--sea) 8%, var(--surface)); color: color-mix(in srgb, var(--sea) 55%, var(--text)); }

/* ============ HYROX ============ */
.hyrox-banner{
  display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-4);
  background: linear-gradient(90deg, var(--sea-dim), transparent 70%), var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-5); margin-top: var(--space-7);
}
.hyrox-banner strong{ font-family: var(--font-display); text-transform:uppercase; font-size:1.15rem; }
.hyrox-banner span{ flex:1 1 280px; }
.hyrox-banner .btn{ margin-left:auto; }
.hyrox-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  margin-top: var(--space-5);
}
.hyrox-item{
  background: var(--surface); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  transition: background-color 140ms ease-out;
}
.hyrox-item:hover{ background: var(--ink-lift); }
.hyrox-item h3{ font-size:.98rem; margin-bottom:2px; }
.hyrox-item p{ color: var(--text-muted); font-size:.9rem; }

/* ============ TIMETABLE ============ */
.day-tabs{
  display:flex; gap: var(--space-3); flex-wrap:nowrap; margin-top: var(--space-7);
  overflow-x:auto; padding-bottom: var(--space-2);
  scrollbar-width:thin; scrollbar-color: var(--sea-line) transparent;
}
.day-tab{
  flex:0 0 auto; min-width:5.25rem; min-height:4.5rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: var(--space-3) var(--space-4); border-radius:4px;
  gap: var(--space-1);
  background: var(--surface); color: var(--text-muted);
  border:1px solid var(--line); cursor:pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out;
}
.day-tab small{ font-size:.78rem; font-weight:600; }
.day-tab b{ font-family: var(--font-display); font-size:1.3rem; line-height:1; }
.day-tab em{ font-style:normal; font-size:.68rem; font-weight:600; color: var(--sea); }
.day-tab[aria-pressed="true"]{
  background: var(--sea); color: var(--ink-deep); border-color: var(--sea);
}
.day-tab[aria-pressed="true"] em{ color: var(--ink-deep); }
.timetable{ margin-top: var(--space-5); display:flex; flex-direction:column; gap: var(--space-4); }
.slot{
  display:grid;
  grid-template-columns: 4.25rem 1fr;
  grid-template-areas:
    "time name"
    "meta meta"
    "btn btn";
  gap: var(--space-3);
  align-items: start;
  background: var(--surface); border-radius: var(--radius-md);
  padding: var(--space-4);
}
.slot-time{ grid-area:time; align-self:start; line-height:1.2; font-family: var(--font-display); font-size:1.15rem; color: var(--sea); }
.slot-name{ grid-area:name; min-width:0; line-height:1.35; padding-right: var(--space-2); font-weight:700; }
.slot-name small{ display:block; color: var(--sand-dim); font-weight:500; margin-top: var(--space-1); line-height:1.45; }
.slot-dur{ display:none; }
.slot .spots{ grid-area:meta; justify-self:start; }
.slot .btn{ grid-area:btn; width:100%; margin-top: var(--space-2); }
.timetable-note{ margin-top: var(--space-4); color: var(--sand-dim); font-size:.88rem; }
.spots{
  display:inline-flex; align-items:center; gap: var(--space-2);
  font-size:.78rem; font-weight:700; white-space:nowrap;
  padding: var(--space-1) var(--space-3); border-radius:4px;
}
.spots::before{ content:""; width:7px; height:7px; border-radius:50%; background: currentColor; }
.spots[data-state="ok"]{ color:var(--sea); background: var(--sea-dim); }
.spots[data-state="low"]{ color:var(--text); background: color-mix(in srgb, var(--sea) 25%, var(--surface)); }
.spots[data-state="full"]{ color: var(--sand-dim); background: rgb(255 255 255 / 0.06); }

/* class detail (booking modal) */
.detail-head h4{ font-family: var(--font-display); font-size:1.6rem; text-transform:uppercase; letter-spacing:.02em; }
.detail-when{ color: var(--text-muted); font-size:.92rem; margin-bottom: var(--space-4); }
.detail-desc{ color: var(--text-muted); font-size:.93rem; margin-bottom: var(--space-4); }
.cap-wrap{ margin-bottom: var(--space-4); }
.cap-row{ display:flex; justify-content:space-between; font-size:.85rem; margin-bottom: var(--space-2); }
.cap-row b{ color: var(--text); }
.cap-row span{ color: var(--sand-dim); }
.cap-bar{ height:8px; border-radius:4px; background: rgb(255 255 255 / 0.08); overflow:hidden; }
/* audit-ok: width is the value being shown here, and JS sets it directly */
.cap-bar i{ display:block; height:100%; border-radius:4px; background: var(--sea); transition: width 180ms ease; }
.cap-bar i[data-state="low"]{ background:var(--text); }
.cap-bar i[data-state="full"]{ background: var(--sand-dim); }
.detail-price{
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--space-4); border-radius:4px;
  background: var(--surface); margin-bottom: var(--space-3);
}
.detail-price b{ font-family: var(--font-display); font-size:1.4rem; color: var(--sea); }
.detail-price span{ color: var(--text-muted); font-size:.85rem; }
.policy-note{
  display:flex; gap: var(--space-2);
  font-size:.8rem; line-height:1.5; color: var(--sand-dim);
  padding: var(--space-3) var(--space-3); border-radius:4px;
  background: rgb(255 255 255 / 0.04); border-left:2px solid var(--sea);
  margin-top: var(--space-3);
}
.agree{
  display:flex; gap: var(--space-3); align-items:flex-start; cursor:pointer;
  font-size:.85rem; line-height:1.5; color: var(--text-muted);
  margin-top: var(--space-3);
}
.agree input{
  width:20px; height:20px; flex:0 0 20px; margin-top:2px;
  accent-color: var(--sea); cursor:pointer;
}
.agree b{ color: var(--text); }

/* ============ TRAINERS ============ */
.trainer-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-7); }
/* audit-ok: photo band is edge-to-edge; copy is padded in .trainer-body */
.trainer-card{
  background: var(--surface); border-radius: var(--radius-lg);
  overflow:hidden;
}
.trainer-photo{
  aspect-ratio: 16 / 10;
  background: var(--ink-deep);
  display:flex; align-items:center; justify-content:center;
  color: var(--sand-dim); font-size:.9rem;
}
.trainer-photo svg{ width:84px; height:84px; opacity:.3; }
.trainer-body{ padding: var(--space-5); }
.trainer-body h3{ font-size:1.3rem; }
.trainer-role{ color: var(--sea); font-weight:600; font-size:.92rem; margin-bottom: var(--space-3); }
.trainer-body p{ color: var(--text-muted); font-size:.95rem; margin-bottom: var(--space-4); }
.trainer-tags{ display:flex; flex-wrap:wrap; gap: var(--space-2); }

/* ============ PRICING ============ */
.price-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  margin-top: var(--space-7); align-items:stretch;
}
.price-card{
  display:flex; flex-direction:column; gap: var(--space-4);
  background: var(--surface); border:1px solid transparent; border-radius: var(--radius-md);
  padding: var(--space-5); position:relative;
}
/* The one border left in this section, because it marks the recommended plan
   rather than decorating a box. Transparent on the others so the three cards
   keep identical inner widths. */
.price-card[data-featured]{ border-color: var(--sea); }
.price-flag{
  position:absolute; top:-13px; left: var(--space-5);
  background: var(--sea); color: var(--ink-deep);
  font-size:.78rem; font-weight:600;
  padding: var(--space-1) var(--space-3); border-radius:4px;
}
.price-card h3{ font-size:1.25rem; }
.price-desc{ color: var(--text-muted); font-size:.88rem; line-height:1.5; }
/* Segmented term control (joined, angular, per brand board) */
.term-pills{
  display:flex; gap:0;
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.term-pill{
  flex:1; min-height:40px; border:none; border-radius:0; cursor:pointer;
  background: var(--zebra);
  color: var(--text-muted); font-weight:700; font-size:.78rem;
  font-family: var(--font-body);
  transition: background 180ms ease, color 180ms ease;
}
.term-pill + .term-pill{ border-left:1px solid var(--line); }
.term-pill[aria-pressed="true"]{ background: var(--sea); color: var(--ink-deep); }
.price-amount{ font-family: var(--font-display); font-size:2.8rem; line-height:1; color: var(--sea); }
.price-note{ color: var(--sand-dim); font-size:.85rem; min-height:1.3em; }
.price-card .btn{ margin-top:auto; }

.extras-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4);
  margin-top: var(--space-5);
}
.extra-card{
  background: var(--surface); border-radius:4px;
  padding: var(--space-4) var(--space-5);
  display:flex; flex-direction:column; gap: var(--space-1);
}
.extra-card h4{ font-family: var(--font-body); font-size:.92rem; font-weight:700; }
.extra-card b{ font-family: var(--font-display); font-size:1.45rem; color: var(--sea); }
.extra-card small{ color: var(--sand-dim); font-size:.8rem; line-height:1.45; }

/* ============ REVIEWS (P-reviews-quote-stack) ============ */
/* What members said, set as type. A quote in a bordered box with a grey
   monogram circle is a testimonial widget, and it reads like one. */
.review-grid{
  display:flex; flex-direction:column; gap: var(--space-8);
  margin-top: var(--space-8); max-width: 62ch;
}
.review-card{ display:flex; flex-direction:column; gap: var(--space-3); }
.review-stars{ color: var(--sea); letter-spacing:3px; font-size:.85rem; }
.review-card blockquote{
  color: var(--text);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height:1.5; text-wrap:pretty;
}
.review-card blockquote::before{ content:"\201C"; }
.review-card blockquote::after{ content:"\201D"; }
/* Flex, not inline: a long name wraps to two lines, and a wrapped inline box
   spans both of them, so the source that follows lands inside its rectangle. */
.review-who{
  display:flex; flex-wrap:wrap; column-gap: var(--space-2);
  color: var(--text-muted); font-size:.9rem;
}
.review-who b{ color: var(--text); font-weight:600; }
.review-who small{ font-size:inherit; }
.review-who small::before{ content:"\00b7\00a0"; }

/* ============ COMMUNITY GALLERY ============ */
.gallery-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  margin-top: var(--space-7);
}
/* audit-ok: photo tile is edge-to-edge; the caption carries its own padding (section 8b) */
.gallery-item{
  position:relative; overflow:hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
  aspect-ratio: 3 / 4;
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 180ms ease-out;
}
@media (hover:hover) and (pointer:fine){
  .gallery-item:hover img{ transform: scale(1.03); }
}
.gallery-caption{
  position:absolute; inset-inline:0; bottom:0;
  padding: var(--space-6) var(--space-4) var(--space-3);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink-deep) 85%, transparent));
  font-size:.85rem; font-weight:600; color: var(--text);
}

/* ============ HOW IT WORKS ============ */
/* Numbered type, not three boxed steps. The number carries the sequence, so a
   box around each one is doing nothing the counter is not already doing. */
.steps{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: var(--space-6) var(--space-7);
  margin-top: var(--space-8); counter-reset: step;
}
.step{
  display:grid; grid-template-columns: auto 1fr;
  column-gap: var(--space-4); align-items:baseline;
}
.step::before{
  counter-increment: step; content: counter(step);
  grid-row: 1 / span 2;
  font-family: var(--font-display); font-size:2.6rem; line-height:.85;
  color: var(--sea);
}
.step h3{ font-size:1.05rem; margin-bottom: var(--space-1); }
.step p{ color: var(--text-muted); font-size:.93rem; }

/* ============ CONTACT ============ */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-7); }
.contact-card{
  background: var(--surface); border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.contact-list{ list-style:none; display:flex; flex-direction:column; gap: var(--space-4); margin-top: var(--space-4); }
.contact-list li{ display:flex; gap: var(--space-3); align-items:flex-start; color: var(--text-muted); }
.contact-list .ico svg{ display:block; }
.contact-list .ico{
  flex:0 0 22px; margin-top:2px;
  display:flex; justify-content:center; color: var(--sea);
}
.contact-list a{
  display:inline-flex; align-items:center; min-height:1.5rem;
  /* audit-ok: 24px tap floor */
  padding-block:0.45rem;
  color: var(--text); text-decoration:none; font-weight:600;
}
.contact-list a:hover{ color: var(--sea); }
.visit-map{
  border-radius: var(--radius-lg); overflow:hidden;
  background: var(--surface);
  align-self:start;
}
.map-link{ display:flex; flex-direction:column; width:100%; text-decoration:none; color:inherit; }
.map-frame{ position:relative; overflow:hidden; --map-pin-x:48%; --map-pin-y:50%; }
.map-img{
  display:block; width:100%; height:auto;
  filter: saturate(.35) brightness(.82) contrast(1.05);
  transition: transform 180ms ease;
}
.map-link:hover .map-img{ transform: scale(1.03); }
.map-marker{
  position:absolute; left:var(--map-pin-x); top:var(--map-pin-y);
  transform: translate(-50%, -100%);
  display:flex; flex-direction:column; align-items:center; gap: var(--space-2);
}
.map-marker-label{
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.08em;
  font-size:.9rem; color: var(--sea);
  background: var(--ink-deep);
  padding: var(--space-1) var(--space-3); border-radius:4px; white-space:nowrap;
}
.map-marker-pin{
  width:13px; height:13px; border-radius:50%;
  background: var(--sea); position:relative;
}
.map-marker-pin::after{
  content:""; position:absolute; inset:-9px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--sea) 50%, transparent);
  animation: pin-pulse 2.2s ease-out infinite;
}
@keyframes pin-pulse{ 0%{ transform:scale(.55); opacity:1; } 100%{ transform:scale(1.35); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .map-marker-pin::after{ animation:none; opacity:.4; }
  .map-link:hover .map-img{ transform:none; }
}
.map-pill{
  display:block; text-align:center; padding: var(--space-3) var(--space-4);
  background: var(--sea); color: var(--ink-deep);
  font-weight:700; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  transition: background 180ms ease;
}
.map-link:hover .map-pill{ background: var(--sea-soft); }
.map-attrib{ font-size:.7rem; color: var(--sand-dim); padding: var(--space-2) var(--space-3); }
.map-attrib a{
  display:inline-flex; align-items:center; min-height:1.5rem;
  /* audit-ok: 24px tap floor at .7rem */
  padding-block:0.45rem;
  color: var(--text-muted); text-decoration:none;
}
.map-attrib a:hover{ color: var(--sea); }

/* ============ FOOTER ============ */
footer{
  position: relative;
  padding: var(--space-8) 0 var(--space-7);
  background: var(--sand-deep);
  color: var(--sand-dim);
  font-size: .85rem;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-7);
}
.footer-brand img{ height: 36px; width: auto; margin-bottom: var(--space-3); }
.footer-brand p{ max-width: 32ch; color: var(--text-muted); margin-top: var(--space-2); }
.footer-col h3{
  font-size: .88rem;
  color: var(--sea);
  margin-bottom: var(--space-3);
}
.footer-col ul{ list-style: none; display: grid; gap: var(--space-2); }
.footer-col a{
  display:inline-flex; align-items:center; min-height:1.5rem;
  /* audit-ok: 24px tap floor at .85rem */
  padding-block:0.45rem;
  color: var(--text-muted); text-decoration: none;
}
.footer-col a:hover{ color: var(--sea-soft); }
.footer-addr{ color: var(--text-muted); margin-bottom: var(--space-3); }
.footer-actions{ list-style:none; display:grid; gap: var(--space-3); }
.footer-action{
  display:inline-flex; align-items:center; gap: var(--space-2);
  min-height:1.5rem;
  /* audit-ok: 24px tap floor at .85rem */
  padding-block:0.45rem;
  color: var(--text-muted); text-decoration:none;
}
.footer-action:hover{ color: var(--sea-soft); }
.footer-action-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; flex:0 0 18px;
  color: var(--sea);
}
.footer-copy{
  margin-top: var(--space-8);
  text-align:center;
}

/* ============ BOOKING MODAL (native dialog) ============ */
.booking-dialog{
  border:0; padding: var(--space-4); margin:auto auto 0;
  width:min(520px, calc(100% - 2 * var(--space-4)));
  max-height:88vh; background:transparent;
  overscroll-behavior:contain;
  transform:translateY(0.5rem);
  transition:
    transform 200ms ease,
    overlay 200ms allow-discrete,
    display 200ms allow-discrete;
}
.booking-dialog[open]{ transform:none; }
@starting-style{
  .booking-dialog[open]{ transform:translateY(0.5rem); }
}
.booking-dialog::backdrop{
  background:color-mix(in srgb, var(--ink-deep) 78%, transparent);
  backdrop-filter:blur(6px);
}
.booking-dialog .modal{
  width:100%; max-height:88vh; overflow-y:auto;
  background:var(--zebra); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:0 24px 60px rgb(0 0 0 / 0.55);
  padding:var(--space-5);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.modal-head h3{ font-size:1.2rem; }
.modal-close{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%; border:1px solid var(--line);
  background:none; color: var(--text-muted); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: color 180ms ease, border-color 180ms ease;
}
.modal-close:hover{ color: var(--text); border-color: var(--sea-line); }
.modal-close svg{ display:block; }
.modal-progress{ display:flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.modal-progress i{ flex:1; height:4px; border-radius:2px; background: rgb(255 255 255 / 0.1); }
.modal-progress i.on{ background: var(--sea); }
.pick-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(96px,1fr)); gap: var(--space-2); }
.pick{
  min-height:48px; border-radius: var(--radius-sm); cursor:pointer;
  background: var(--surface); border:1px solid var(--line);
  color: var(--text); font-weight:700; font-size:.92rem;
  transition: all 180ms ease;
}
.pick[aria-pressed="true"]{ background: var(--sea); color: var(--ink-deep); border-color: var(--sea); }
.pick-list{ display:flex; flex-direction:column; gap: var(--space-2); }
.pick-slot{
  display:flex; align-items:center; gap: var(--space-3); text-align:left;
  padding: var(--space-3) var(--space-4); min-height:52px;
  border-radius: var(--radius-sm); cursor:pointer;
  background: var(--surface); border:1px solid var(--line); color: var(--text);
  transition: all 180ms ease;
}
.pick-slot b.time{ font-family: var(--font-display); color: var(--sea); min-width:62px; }
.pick-slot[aria-pressed="true"]{ border-color: var(--sea); background: var(--sea-dim); }
.pick-slot small{ color: var(--sand-dim); margin-left:auto; white-space:nowrap; }
.field{ margin-bottom: var(--space-4); }
.field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom: var(--space-2); color: var(--text-muted); }
.field input{
  width:100%; min-height:48px; padding: var(--space-3) var(--space-3);
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); font-family:inherit; font-size:1rem;
}
.field input:focus-visible{ border-color: var(--sea); }
.modal-actions{ display:flex; gap: var(--space-3); margin-top: var(--space-5); }
.modal-actions .btn{ flex:1; }
.modal-note{ margin-top: var(--space-4); text-align:center; font-size:.78rem; color: var(--sand-dim); }
.confirm-wrap{ text-align:center; padding: var(--space-5) 0; }
.confirm-icon{
  width:64px; height:64px; margin:0 auto var(--space-4); border-radius:50%;
  background: var(--sea); color: var(--ink-deep);
  display:flex; align-items:center; justify-content:center;
}
.confirm-wrap h3{ margin-bottom: var(--space-2); }
.confirm-wrap p{ color: var(--text-muted); }
.confirm-summary{
  margin: var(--space-5) 0; padding: var(--space-4);
  background: var(--surface); border-radius: var(--radius-md);
  text-align:left; font-size:.95rem;
}
.confirm-summary div{ display:flex; justify-content:space-between; padding: var(--space-2) 0; border-bottom:1px solid var(--line); }
.confirm-summary div:last-child{ border-bottom:none; }
.confirm-summary span{ color: var(--sand-dim); }

/* ============ MOBILE ACTION BAR ============ */
.mobile-bar { display: none; }
@media (max-width: 47.99rem) {
  html.mobile-bar-visible body {
    padding-bottom: calc(var(--beat-mobile-bar-h) + env(safe-area-inset-bottom, 0px));
  }
  .mobile-bar {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    padding: 0 var(--space-3) max(var(--space-3), env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    /* audit-ok: off-screen until scroll script adds .is-visible */
    visibility: hidden;
    transform: translateY(calc(100% + var(--space-2)));
    transition: transform 180ms ease, visibility 180ms ease;
  }
  .mobile-bar.is-visible {
    visibility: visible;
    transform: translateY(0);
  }
  .mobile-bar-inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    max-width: 400px;
    margin-inline: auto;
    padding: var(--space-2) var(--space-2);
    background: color-mix(in srgb, var(--sand) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid color-mix(in srgb, var(--sea) 28%, transparent);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.55);
  }
  .mobile-bar-link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 44px;
    min-height: 48px;
    padding: var(--space-1) var(--space-1);
    border: none;
    border-radius: 999px;
    background: none;
    cursor: pointer;
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-body);
    transition: background .15s ease, transform .15s ease;
  }
  .mobile-bar-link:active { background: rgb(255 255 255 / 0.07); transform: scale(.96); }
  .mobile-bar-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--sea);
  }
  .mobile-bar-icon svg { display: block; }
  .mobile-bar-label {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-muted);
  }
  .mobile-bar-primary { flex: 0 1 auto; min-width: 100px; padding: var(--space-2) var(--space-4); background: var(--sea); }
  .mobile-bar-primary .mobile-bar-icon,
  .mobile-bar-primary .mobile-bar-label { color: var(--ink-deep); }
  .mobile-bar-primary:active { background: var(--sea-soft); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .mobile-bar { transition: none; }
}

/* Mobile rhythm: tighter section spacing, full-width CTAs in banners */
@media (max-width: 47.99rem){
  .section{ padding-block: var(--space-8); }
  .hero{
    padding-top: calc(var(--beat-nav-h) + var(--space-8)); padding-bottom: var(--space-8);
    /* The photo and its scrims live on .hero-media (see the hero block). */
  }
  .hero-actions .btn{ flex:1 1 auto; }
  .hyrox-banner .btn{ width:100%; }
  .pillars{ padding-block: var(--space-5); }
}

/* Progressive disclosure: long card lists collapsed by default */
.class-grid.is-collapsed .class-card:nth-child(n+9),
.extras-grid.is-collapsed .extra-card:nth-child(n+5),
.review-grid.is-collapsed .review-card:nth-child(n+4){ display:none; }
.reveal-toggle{ display:flex; margin: var(--space-5) auto 0; }

/* ---------- interface quality ---------- */

/* Drops the ~300ms delay browsers add to a tap while waiting for a double-tap. */
.btn, .nav-burger, .gallery-open, .gallery-item, .mobile-bar a,
.modal-close { touch-action: manipulation; }

/* Scrolling the modal must not chain through to the page behind it. */
.booking-dialog, .booking-dialog .modal { overscroll-behavior: contain; }

/* The hover/focus rule above drops the outline, making keyboard focus
   indistinguishable from hover. */
h1, h2, h3 { text-wrap: balance; }
.price, .plan-price { font-variant-numeric: tabular-nums; }



  /* Standard viewports: mobile default, 48rem tablet, 64rem desktop */

  .btn--primary {

    background: var(--sea);

    color: var(--ink-deep);

  }



  .btn--ghost {

    background: transparent;

    color: var(--text);

    border-color: rgb(255 255 255 / 0.45);

  }



  .pricing-extras-title {

    margin-top: var(--space-8);

    font-size: 1.15rem;

  }



  .field-error {

    color: color-mix(in srgb, var(--text) 55%, var(--sea));

    font-size: 0.85rem;

    margin-top: var(--space-3);

  }



  html {

    scroll-padding-top: calc(var(--beat-nav-h) + var(--space-3));

  }



  .gallery-item .pic {

    position: absolute;

    inset: 0;

  }



  .gallery-item figcaption.gallery-caption {

    z-index: 1;

  }



  .gallery-item .pic,
  .gallery-item .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .gallery-open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .gallery-item {
    aspect-ratio: 4 / 3;
  }

  .gallery-lightbox {
    width: min(92vw, 68rem);
    max-height: 90dvh;
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--zebra);
    color: var(--text);
    overscroll-behavior: contain;
  }

  .gallery-lightbox::backdrop {
    background: color-mix(in srgb, var(--ink-deep) 85%, transparent);
    backdrop-filter: blur(6px);
  }

  .gallery-lightbox__bar {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
  }

  .gallery-lightbox__count {
    color: var(--text-muted);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
  }

  .gallery-lightbox__close {
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-weight: 600;
  }

  .gallery-lightbox__img {
    display: block;
    width: 100%;
    max-height: calc(90dvh - 8rem);
    object-fit: contain;
    border-radius: var(--radius-md);
    margin-inline: auto;
  }

  .gallery-lightbox__steps {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-top: var(--space-3);
  }

  .gallery-lightbox__step {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .day-tabs {
    gap: var(--space-3);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-block: var(--space-2) var(--space-3);
  }

  .day-tab {
    min-width: 5.25rem;
    min-height: 4.5rem;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-1);
    scroll-snap-align: start;
    justify-content: center;
    text-align: center;
  }

  .timetable {
    gap: var(--space-4);
    container-type: inline-size;
    container-name: beat-timetable;
  }

  .pick {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 47.99rem) {
    .site-nav .nav-inner {
      padding-inline: var(--space-4);
    }
  }

  footer .wrap {
    text-align: center;
    container-type: inline-size;
    container-name: beat-footer;
  }

  .footer-grid {
    justify-items: center;
  }

  .footer-brand p {
    margin-inline: auto;
  }

  .footer-brand img {
    display: block;
    margin-inline: auto;
  }

  .footer-action {
    justify-content: center;
  }

  .booking-dialog {
    color: var(--text);
  }

  .booking-dialog h3,
  .booking-dialog h4 {
    color: var(--text);
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 700;
  }

  .modal-head h3 {
    font-size: 1.2rem;
    line-height: 1.2;
  }

  .confirm-wrap h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }

  @media (min-width: 48rem) {
    .booking-dialog {
      margin: auto;
      padding: var(--space-5);
    }
  }

  .reveal-toggle {

    display: flex;

    margin: var(--space-8) auto 0;

  }



  .class-grid + .reveal-toggle,

  .extras-grid + .reveal-toggle,

  .review-grid + .reveal-toggle {

    margin-top: var(--space-9);

  }



  .dock {

    display: none;

  }



  .mobile-bar:not(.is-visible) {

    visibility: hidden;

  }

  .doc__back .link {
    display: inline-block;
    /* audit-ok: 24px tap floor on doc back link */
    padding-block: 0.45rem;
  }

  /* §6: component layout via container queries; viewport @media for page shell only */

  .section > .wrap,
  .pillars {
    container-type: inline-size;
    container-name: beat-section;
  }

  @container beat-section (max-width: 48rem) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    /* Three 4:3 tiles across a 390px screen are ~110px wide, which is not a
       photograph. The first one leads at a wider ratio, the other two pair up. */
    .gallery-item:first-child {
      grid-column: 1 / -1;
      aspect-ratio: 16 / 10;
    }
  }

  @container beat-section (max-width: 30rem) {
    .pillars-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; }
    .trainer-grid { grid-template-columns: 1fr; }
    .price-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .steps .step::before { font-size: 2rem; }
    .rating-strip {
      grid-template-columns: repeat(2, 1fr);
      row-gap: var(--space-5);
    }
    .hyrox-grid { grid-template-columns: 1fr; }
    .hyrox-grid[data-compact] { grid-template-columns: repeat(2, 1fr); }
    .hyrox-grid[data-compact] .hyrox-item { padding: var(--space-3) var(--space-4); }
    .hyrox-grid[data-compact] .hyrox-item h3 { font-size: 0.9rem; }
    .hyrox-grid[data-compact] .hyrox-item p { font-size: 0.82rem; }
    .review-grid { grid-template-columns: 1fr; }
    .class-grid.is-collapsed .class-card:nth-child(n+7) { display: none; }
  }

  @container beat-section (min-width: 30rem) and (max-width: 48rem) {
    .pillars-grid { grid-template-columns: repeat(2, 1fr); }
    .hyrox-grid { grid-template-columns: repeat(2, 1fr); }
    .price-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr 1fr; }
    .values-grid { grid-template-columns: 1fr 1fr; }
  }

  @container beat-section (min-width: 48rem) {
    /* Stepping the three about columns down the page keeps them from reading as
       a card set now that the boxes are gone. */
    .value-card:nth-child(2) { margin-top: var(--space-6); }
    .value-card:nth-child(3) { margin-top: var(--space-8); }
  }

  @container beat-timetable (min-width: 36rem) {
    .slot {
      grid-template-columns: 90px 1fr auto auto auto;
      grid-template-areas: none;
      align-items: center;
      gap: var(--space-4);
      padding: var(--space-3) var(--space-5);
    }
    .slot-time { grid-area: auto; align-self: center; }
    .slot-name { grid-area: auto; padding-right: 0; }
    .slot-dur { display: block; }
    .slot .spots { grid-area: auto; }
    .slot .btn { grid-area: auto; width: auto; margin-top: 0; }
  }

  @container beat-footer (max-width: 48rem) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }

  @container beat-footer (max-width: 30rem) {
    .footer-grid { grid-template-columns: 1fr; }
  }

  @container beat-footer (min-width: 48rem) {
    footer .wrap { text-align: start; }
    .footer-grid { justify-items: stretch; }
    .footer-brand p { margin-inline: 0; }
    .footer-brand img { margin-inline: 0; }
    .footer-action { justify-content: flex-start; }
  }


}

/* Deliberately unlayered.

   Unlayered rules beat every @layer regardless of source order, so this single
   block neutralises motion across every component without needing !important
   and without per-component reduced-motion rules. Keep it last in the build. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-duration: 1ms;
    /* A scroll-driven animation takes its progress from the scroll position,
       so animation-duration does not reach it. Handing it back the document
       timeline lets the 1ms above apply, and `both` fill then leaves the
       element at its finished state: settled, in place, never mid-reveal. */
    animation-timeline: auto;
    animation-range: normal;
  }

  html {
    scroll-behavior: auto;
  }
}