/* ==========================================================================
   select.css — the service selector: a game-style infinite coverflow.

   Backgrounds are heavily blurred and graded on purpose. Two reasons:
   glassmorphism needs a soft, colourful backdrop to refract (a sharp photo
   fights the glass), and it makes source resolution irrelevant, so the small
   legacy service photos hold up full-bleed. The crisp copy of each photo
   lives inside the card, at a size it can actually carry.
   ========================================================================== */

.sel {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #06060a;
  touch-action: none;
  overscroll-behavior: none;
}

/* ---------- background stack: opacity-only crossfade ---------- */
.sel__bgs { position: absolute; inset: 0; z-index: 0; }

.sel__bg {
  position: absolute;
  inset: -8%; /* overscan so the blur never shows a soft edge */
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.sel__bg.is-on { opacity: 1; }

.sel__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(13px) saturate(1.12) brightness(0.34);
  transform: scale(1.18);
  animation: seldrift 26s ease-in-out infinite alternate;
}
@keyframes seldrift {
  from { transform: scale(1.18) translate3d(-1.2%, -0.8%, 0); }
  to   { transform: scale(1.28) translate3d(1.2%, 0.8%, 0); }
}

/* per-service colour grade — the backdrops differ, the accent stays Formula red */
.sel__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: color;
  opacity: 0.38;
  background: var(--grade, transparent);
}

/* vignette + floor so the HUD always has contrast to sit on */
.sel__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 42%, transparent 30%, rgba(6, 6, 10, 0.72) 100%),
    linear-gradient(to top, rgba(6, 6, 10, 0.95) 0%, transparent 32%),
    linear-gradient(to bottom, rgba(6, 6, 10, 0.9) 0%, transparent 26%);
}

/* ---------- stage ---------- */
.sel__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  perspective: 1700px;
  perspective-origin: 50% 46%;
}
.sel__track {
  position: relative;
  width: 100%;
  height: 460px;
  transform-style: preserve-3d;
}

/* ---------- the glass card ---------- */
.sel__card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 340px;
  height: 460px;
  margin-left: -170px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: #fff;
  padding: 0;
  transform-style: preserve-3d;

  /* glassmorphism */
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 36px 70px -24px rgba(0, 0, 0, 0.92);

  /* driven by select.js */
  transform:
    translate3d(calc(var(--d) * var(--step, 372px)), calc(var(--ad) * 14px),
                calc(var(--ad) * -260px))
    rotateY(calc(var(--d) * -20deg))
    scale(var(--s, 1));
  opacity: var(--o, 1);
  filter: blur(calc(var(--ad) * 1.1px));
  z-index: var(--z, 1);
  transition:
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease,
    filter 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
  will-change: transform, opacity;
}

.sel__card.is-active {
  border-color: rgba(var(--brand-rgb), 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(var(--brand-rgb), 0.25),
    0 0 60px -6px rgba(var(--brand-rgb), 0.42),
    0 44px 80px -26px rgba(0, 0, 0, 0.95);
}

/* sheen that only rides the active card */
.sel__card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.14) 50%, transparent 62%);
  transition: opacity 0.6s ease;
}
.sel__card.is-active::after { opacity: 1; }

.sel__art {
  position: relative;
  height: 210px;
  overflow: hidden;
}
.sel__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.sel__card.is-active .sel__art img { transform: scale(1.12); }
.sel__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 14, 0.96), rgba(10, 10, 14, 0.1) 60%, transparent);
}

.sel__body { padding: 0 1.5rem 1.5rem; margin-top: -2.6rem; position: relative; }

.sel__idx {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--brand);
  display: block;
  margin-bottom: 0.35rem;
}
.sel__name {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 0.55rem;
  letter-spacing: 0.02em;
}
.sel__blurb {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* the CTA only exists on the selected card — that's the "select" beat */
.sel__go {
  margin-top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand);
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease 0.12s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
    background 0.25s ease;
  pointer-events: none;
}
.sel__card.is-active .sel__go { opacity: 1; transform: none; pointer-events: auto; }

/* Only the focused card carries body copy. Behind it, a partially-occluded
   paragraph reads as a rendering fault; art plus a title reads as depth. */
.sel__card:not(.is-active) .sel__blurb { opacity: 0; }
.sel__blurb { transition: opacity 0.4s var(--ease); }
.sel__go:hover { background: var(--brand-hot); }

/* targeting brackets — the game-select tell.
   z-index keeps all four corners above the artwork; without it the opaque
   .sel__art paints over the top pair. */
.sel__reticle {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sel__card.is-active .sel__reticle { opacity: 1; }
.sel__reticle i {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--brand);
  transition: inset 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.sel__reticle i:nth-child(1) { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.sel__reticle i:nth-child(2) { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.sel__reticle i:nth-child(3) { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.sel__reticle i:nth-child(4) { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

/* ---------- HUD ---------- */
.sel__hud {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.sel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1.2rem, 4vw, 3rem) 0;
  pointer-events: auto;
}
.sel__back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.25s ease;
}
.sel__back:hover { color: #fff; }
.sel__top img { height: 30px; width: auto; }

.sel__bottom {
  padding: 0 clamp(1.2rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.4rem);
  display: grid;
  gap: 0.85rem;
  justify-items: center;
  pointer-events: auto;
}

.sel__counter {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
}
.sel__counter b { color: var(--brand); font-weight: 400; }

.sel__pips { display: flex; gap: 0.5rem; }
.sel__pip {
  width: 26px;
  height: 3px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.35s ease, width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.sel__pip[aria-selected='true'] { background: var(--brand); width: 42px; }

.sel__hint {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: opacity 0.6s ease;
}
.sel.is-touched .sel__hint { opacity: 0; }
.sel__hint svg { animation: selnudge 1.9s ease-in-out infinite; }
@keyframes selnudge {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* arrows */
.sel__arrow {
  position: absolute;
  top: 50%;
  margin-top: -26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  z-index: 4;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.sel__arrow:hover {
  background: rgba(var(--brand-rgb), 0.28);
  border-color: rgba(var(--brand-rgb), 0.6);
  transform: scale(1.07);
}
.sel__arrow--prev { left: clamp(0.8rem, 3vw, 2.4rem); }
.sel__arrow--next { right: clamp(0.8rem, 3vw, 2.4rem); }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .sel__kbd { display: none; } /* no keyboard to speak of on touch */
  .sel__card { width: 270px; margin-left: -135px; height: 420px; }
  .sel__track { height: 420px; }
  .sel__art { height: 175px; }
  .sel__name { font-size: 1.6rem; }
  .sel__arrow { display: none; }
}
@media (max-width: 420px) {
  .sel__card { width: 236px; margin-left: -118px; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .sel__bg img { animation: none; }
  .sel__hint svg { animation: none; }
  .sel__card,
  .sel__bg,
  .sel__go { transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   INLINE MODE — the same carousel as a homepage hero section.

   The standalone page is position:fixed and owns the viewport. As a hero it
   has to sit in normal document flow so the visitor can scroll past it into
   the rest of the page. Everything else — the coverflow maths, the glass, the
   background crossfade — is shared, unchanged.
   ========================================================================== */
.sel--inline {
  position: absolute;
  inset: 0;
  /* The base .sel is overflow:hidden + overscroll-behavior:none, which makes it
     a scroll container that refuses to chain the wheel up to the document — so
     the page silently refuses to scroll past the hero. Both have to be undone
     here, along with touch-action, or the hero becomes a trap. */
  overscroll-behavior: auto;
  touch-action: pan-y; /* vertical scroll passes through; we only claim drag-X */
}
.sel--inline .sel__stage { padding-top: var(--nav-h); }
.sel--inline .sel__bottom { padding-bottom: 3.4rem; }

/* The page's own nav sits right there, so the carousel's header row goes.
   The HUD grid has to lose that row too: display:none removes the element from
   the grid entirely, so without this the bottom row slides up into the 1fr
   track and the counter ends up pinned to the top of the screen. */
.sel--inline .sel__top { display: none; }
.sel--inline .sel__hud { grid-template-rows: 1fr auto; }

/* ==========================================================================
   HERO — carbon-fibre splash that dissolves into the carousel.
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: #06060a;
}

/* ---- woven carbon fibre, drawn in CSS ----
   Two diagonal gradient sets at opposing angles produce the twill weave, and
   the offsets are what make the tows read as over-under rather than a flat
   crosshatch. No image asset, so it stays crisp at any density. */
.hero__fiber {
  position: absolute;
  inset: 0;
  background-color: #101014;
  background-image:
    linear-gradient(27deg, #15151b 5px, transparent 5px),
    linear-gradient(207deg, #15151b 5px, transparent 5px),
    linear-gradient(27deg, #0b0b0f 5px, transparent 5px),
    linear-gradient(207deg, #0b0b0f 5px, transparent 5px),
    linear-gradient(90deg, #121218 10px, transparent 10px),
    linear-gradient(#16161c 25%, #101015 25%, #101015 50%, transparent 50%, transparent 75%, #16161c 75%);
  background-size: 20px 20px;
  background-position: 0 5px, 10px 15px, 10px 15px, 0 5px, 0 0, 0 0;
}
/* a broad specular sweep so the weave catches light instead of sitting flat */
.hero__fiber::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 44% at 50% 30%, rgba(255, 255, 255, 0.1), transparent 70%),
    radial-gradient(46% 40% at 82% 88%, rgba(var(--brand-rgb), 0.16), transparent 72%),
    linear-gradient(to bottom, transparent 55%, rgba(6, 6, 10, 0.92) 100%);
}

.hero__splash {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  background: #06060a;
  transition: opacity 1s var(--ease), visibility 1s;
}
.hero__splashin { position: relative; z-index: 1; }
/* the weave sits under the mark and fades out with it */
.hero__splash .hero__fiber { z-index: 0; }

/* The splash mark is two registered layers on one canvas: the FORMULA block,
   and the cursive underneath. Same canvas size, stacked with inset:0, so they
   need no offsets — the block lands in, then the script writes on beneath it.

   height:auto is load-bearing. Without it the img width="1100" height="367"
   attributes fight the CSS width and the mark renders at double height. */
.hero__lock {
  position: relative;
  width: min(52vw, 520px);
  aspect-ratio: 1200 / 400;
  margin: 0 auto 1.5rem;
  filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.9));
}
.hero__lock img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  display: block;
}
.hero__tag {
  font-family: var(--font-body);
  font-size: clamp(0.6rem, 1.5vw, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin: 0;
}

/* entrance: the mark settles, the rule draws, the tagline arrives */
.hero.is-playing .hero__lockblock {
  animation: heroMark 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* the cursive writes on left to right, as a hand would.
   A clip-path inset is the wipe; the slight lag behind the block is what
   makes it read as being written rather than simply appearing. */
.hero.is-playing .hero__lockscript {
  animation: heroWrite 1.25s cubic-bezier(0.42, 0, 0.32, 1) 0.72s both;
}
@keyframes heroWrite {
  from { clip-path: inset(0 100% 0 0); opacity: 1; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}
/* nib: a soft highlight riding the leading edge of the stroke */
.hero__lock::after {
  content: '';
  position: absolute;
  top: 58%;
  bottom: -2%;
  width: 12%;
  left: -12%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  filter: blur(7px);
  opacity: 0;
}
.hero.is-playing .hero__lock::after {
  animation: heroNib 1.25s cubic-bezier(0.42, 0, 0.32, 1) 0.72s both;
}
@keyframes heroNib {
  0%   { left: -12%; opacity: 0; }
  12%  { opacity: .9; }
  88%  { opacity: .9; }
  100% { left: 100%; opacity: 0; }
}
.hero.is-playing .hero__rule {
  animation: heroRule 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
.hero.is-playing .hero__tag {
  animation: heroTag 1s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}
@keyframes heroMark {
  from { opacity: 0; transform: scale(1.14); filter: blur(14px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes heroRule { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes heroTag  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hero__rule {
  width: min(30vw, 240px);
  height: 2px;
  margin: 0 auto 1.3rem;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  transform-origin: center;
}

/* the dissolve */
.hero.is-resolved .hero__splash { opacity: 0; visibility: hidden; pointer-events: none; }
.hero.is-instant .hero__splash { transition: none; }

/* the carousel is held back until the splash clears, then eases in */
.hero .sel--inline {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1.1s var(--ease), transform 1.4s var(--ease);
}
.hero.is-resolved .sel--inline { opacity: 1; transform: none; }
.hero.is-instant .sel--inline { transition: none; }

/* scroll cue — the explicit signal that the page continues past the hero */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: opacity 0.8s var(--ease) 0.5s;
  pointer-events: none;
}
.hero.is-resolved .hero__cue { opacity: 1; }
.hero__cue svg { animation: heroCue 2s ease-in-out infinite; }
@keyframes heroCue {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50%      { transform: translateY(4px); opacity: 1; }
}

@media (max-width: 820px) {
  .hero { height: 100svh; }
  .sel--inline .sel__bottom { padding-bottom: 4.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue svg { animation: none; }
  .hero.is-playing .hero__lockblock,
  .hero.is-playing .hero__lockscript,
  .hero.is-playing .hero__lock::after,
  .hero.is-playing .hero__rule,
  .hero.is-playing .hero__tag { animation: none; }
  .hero__lockscript { clip-path: none; }
}

/* ---------- coverflow spacing, per breakpoint ---------- */
@media (max-width: 1200px) { .sel__track { --step: 316px; } }
@media (max-width: 1000px) { .sel__track { --step: 268px; } }
@media (max-width: 820px)  { .sel__track { --step: 232px; } }
@media (max-width: 420px)  { .sel__track { --step: 200px; } }

/* ---------- hero message ----------
   The carousel is the hero, but a landing page that opens with no statement of
   what the business is asks the visitor to work it out from card titles. This
   sits above the coverflow and gives the page its H1. */
.hero__say {
  position: absolute;
  top: calc(var(--nav-h) + clamp(0.6rem, 3vh, 2.2rem));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: min(100% - 1.6rem, 1100px);
  text-align: center;
  pointer-events: none;
}
.hero__say .eyebrow { margin-bottom: 0.5rem; }
.hero__h1 {
  /* measured off nextlvlprotection.com.au's hero: Syne, negative tracking,
     line-height under 1. Bebas is too condensed to read as heavy at this size. */
  font-family: var(--font-hero);
  font-weight: 800;
  /* "Servicing Melbourne" measures 20.59em in Syne 800 at -0.02em tracking.
     The box is 100vw - 3rem, so the largest size that can never wrap is
     (100vw - 48px) / 20.59 = 4.857vw - 2.33px. Held just under that, capped
     where the box stops growing (1100 / 20.59 = 53px). */
  font-size: min(calc(4.75vw - 1.6px), 52px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 1.15rem;
  /* text-shadow paints through the clipped fill and muddies it; the glyph
     shape gets its lift from a drop-shadow instead */
  /* No text-shadow (it paints through the clipped fill) and no drop-shadow
     filter either: a filter on an element whose background-position is being
     animated leaves repaint artefacts across the glyphs in Chrome. The hero
     backdrop is dark and vignetted, so the type does not need the lift. */
  text-shadow: none;
}
/* Each line is its own block and never wraps, so "Servicing Melbourne" stays
   on one line and "for 30+ years" on the second at every width. The size is
   driven by vw so the longer line always fits rather than being clipped. */
.hero__l1,.hero__l2{display:block;white-space:nowrap}
.hero__sub {
  /* Next Lvl's subline: uppercase, widely tracked, deliberately quiet so the
     headline carries the frame. This replaces the earlier cursive treatment. */
  font-family: var(--font-body);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(0.78rem, 1.55vw, 1.05rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 46rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}
/* it belongs to the splash-resolved state, like the carousel */
.hero .hero__say { opacity: 0; transition: opacity 1s var(--ease) 0.15s; }
.hero.is-resolved .hero__say { opacity: 1; }
.hero.is-instant .hero__say { transition: none; }

/* the heading needs room: drop the cards down and trim them a little */
.sel--inline .sel__track { height: 424px; }
.sel--inline .sel__card { height: 424px; }
.sel--inline .sel__art { height: 186px; }
/* The stage centres the card in its own box, so it needs padding on BOTH
   sides — heading above, HUD below. Without the bottom padding the card is
   centred into space the counter and pips already occupy, and they collide. */
.sel--inline .sel__stage {
  padding-top: calc(var(--nav-h) + clamp(0.6rem, 3vh, 2.2rem)
                   + var(--say-h, 9rem) + var(--say-gap, 2.9rem));
  padding-bottom: 7.5rem;
}

@media (max-width: 820px) {
  .hero__sub { font-size: 0.74rem; letter-spacing: 0.1em; }
  /* Syne is much wider per glyph than Bebas; "SERVICING MELBOURNE" needs a
     smaller step on a phone or it wraps and eats the cards. */

  .sel--inline .sel__stage {
    --say-gap: 2.4rem;
    padding-bottom: 8.5rem;
  }
  .sel--inline .sel__track,
  .sel--inline .sel__card { height: 396px; }
}

/* ---------- short viewports ----------
   Height, not width, is the binding constraint on a phone: an iPhone SE has
   667px and the hero must fit nav + copy + card + HUD + call bar inside it.
   At the 396px card the HUD ended up sitting on the card's lower third. */
@media (max-height: 730px) {
  .sel--inline .sel__stage {
    --say-gap: 1.5rem;
    padding-bottom: 7rem;
  }
  .sel--inline .sel__track,
  .sel--inline .sel__card { height: 282px; }
  .sel--inline .sel__art { height: 126px; }
  .sel--inline .sel__body { margin-top: -2rem; padding-bottom: 1.1rem; }
  .sel--inline .sel__name { font-size: 1.5rem; }
  .sel--inline .sel__blurb { -webkit-line-clamp: 2; font-size: 0.8rem; }
  .sel--inline .sel__go { margin-top: 0.7rem; padding: 0.55rem 1rem; }

  .hero__say .eyebrow { margin-bottom: 0.3rem; font-size: 0.62rem; }
}