/* ==========================================================================
   Shmitty Media
   One stylesheet, no build step. Sections in source order:
   tokens · reset · type · layout · nav · hero · sections · work · lightbox
   · pricing · contact · footer · motion
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */

:root {
  /* The work is nightlife, posters and dark album art. The site is dark to
     match it; there is no light theme by design. */
  --ink:      #08090b;
  --ink-2:    #0d0f12;
  --ink-3:    #14171c;
  --ink-4:    #1c2027;

  --paper:    #f0eeea;
  --paper-2:  #a2a5a9;
  --paper-3:  #6e7276;

  --line:     rgb(240 238 234 / 9%);
  --line-2:   rgb(240 238 234 / 18%);

  /* Pulled from the ALL RED covers and the RXR poster series. */
  --accent:   #ff3b14;
  --accent-2: #ff6a48;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(20px, 4.5vw, 60px);
  --maxw: 1600px;

  /* Vertical rhythm between major bands. */
  --band: clamp(72px, 11vw, 160px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --nav-h: 74px;
}

@media (max-width: 900px) {
  :root { --nav-h: 62px; }
}

/* --- reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

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

::selection { background: var(--accent); color: #fff; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--paper);
  color: var(--ink);
  font: 500 13px/1 var(--mono);
}
.skip:focus { left: 12px; top: 12px; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- type ----------------------------------------------------------------- */

/* Display type is set wide, the way the posters are: a broad grotesque filling
   the measure edge to edge. `wdth` is a real axis on Archivo, so this is one
   font file, not a second family. */
.display {
  font-family: var(--sans);
  font-weight: 600;
  font-variation-settings: "wdth" 112;
  line-height: .86;
  letter-spacing: -.025em;
  text-transform: uppercase;
  /* No `text-wrap: balance` at this width on purpose. Every display heading
     carries its own <br> where the line is meant to turn, and balance re-splits
     those into even runs — "Nights worth / keeping." came out as three. */
}

/* On a phone the authored breaks are past their comfort zone anyway — the line
   would turn a second time regardless — so let the browser even out the runs. */
@media (max-width: 720px) {
  .display { text-wrap: balance; }
}

.d-xl { font-size: clamp(3.2rem, 11.5vw, 11rem); }
.d-lg { font-size: clamp(2.5rem, 7.2vw, 6.2rem); }
.d-md { font-size: clamp(1.9rem, 4.4vw, 3.6rem); }
.d-sm { font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: .95; }

.eyebrow {
  font: 400 11px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--paper-3);
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--paper-2);
  max-width: 56ch;
  text-wrap: pretty;
}

.prose p + p { margin-top: 1.1em; }
.prose { color: var(--paper-2); max-width: 62ch; text-wrap: pretty; }
.prose strong { color: var(--paper); font-weight: 600; }

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

/* --- layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.band { padding-block: var(--band); }
.band-t { padding-top: var(--band); }
.band-b { padding-bottom: var(--band); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

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

.btn {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 500 12px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--btn-bg);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}

/* The fill wipes up from the baseline rather than cross-fading — closer to how
   ink lands on a screen-printed flyer. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .4s var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: #fff; border-color: var(--accent); }
.btn:hover::after { transform: translateY(0); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--accent); }

.btn-sm { padding: 11px 18px; font-size: 11px; }

/* A text link that draws its own underline on hover. */
.link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }

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

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Transparent over the hero video, solid once the page scrolls under it. */
.nav.is-stuck {
  background: rgb(8 9 11 / 82%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.nav-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.nav-set { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.nav-set.is-end { justify-content: flex-end; }

.nav-link {
  font: 400 12px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
  position: relative;
  padding-block: 6px;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-link[aria-current="page"] { color: var(--accent); }

.brand { justify-self: center; display: block; line-height: 0; }
.brand img { width: clamp(112px, 13vw, 168px); height: auto; }

.nav-toggle {
  display: none;
  justify-self: end;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--paper);
  transition: transform .35s var(--ease), opacity .2s linear;
}
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile: the two link sets collapse into one full-screen sheet. */
@media (max-width: 900px) {
  .nav-inner { grid-template-columns: auto 1fr; }
  .brand { justify-self: start; }
  .nav-toggle { display: grid; }

  .nav-set {
    position: fixed;
    inset: var(--nav-h) 0 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 0 var(--gut) 12vh;
    background: var(--ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
  }
  .nav-set.is-end { padding-top: 0; }
  .nav.is-open .nav-set { opacity: 1; visibility: visible; }
  .nav.is-open { background: var(--ink); border-bottom-color: var(--line); }

  /* Both sets stack as one list, so the second starts where the first ends. */
  .nav-set:not(.is-end) { justify-content: flex-end; padding-bottom: 4px; inset-block-end: 50%; }
  .nav-set.is-end { justify-content: flex-start; inset-block-start: calc(var(--nav-h) + 50vh - var(--nav-h) / 2); align-items: flex-start; }

  .nav-link {
    font-family: var(--sans);
    font-size: clamp(2rem, 9vw, 3rem);
    font-weight: 600;
    font-variation-settings: "wdth" 108;
    letter-spacing: -.02em;
    line-height: 1.12;
    padding-block: 2px;
  }
  .nav-link::after { display: none; }

  body.nav-open { overflow: hidden; }
}

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Two overlays: a flat wash for contrast, and a bottom-weighted gradient so the
   headline and the service bar both sit on near-black. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(8 9 11 / 72%) 0%, rgb(8 9 11 / 30%) 34%, rgb(8 9 11 / 62%) 74%, var(--ink) 100%),
    radial-gradient(120% 80% at 50% 40%, transparent 40%, rgb(8 9 11 / 55%) 100%);
}

.hero-body {
  padding-top: var(--nav-h);
  padding-bottom: clamp(120px, 18vh, 200px);
  text-align: center;
}

.hero h1 { margin-bottom: clamp(20px, 3vh, 32px); }

.hero .lede {
  margin-inline: auto;
  color: rgb(240 238 234 / 82%);
  max-width: 44ch;
}

.hero-cta { margin-top: clamp(26px, 4vh, 40px); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Service bar pinned to the foot of the hero, echoing the legacy split panel. */
.hero-bar {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-2);
  background: rgb(8 9 11 / 55%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-bar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px clamp(16px, 2.4vw, 32px);
  position: relative;
  overflow: hidden;
  transition: color .3s var(--ease);
}
.hero-bar a + a { border-left: 1px solid var(--line-2); }
.hero-bar a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: translateY(100%);
  transition: transform .42s var(--ease);
  z-index: -1;
}
.hero-bar a:hover { color: var(--ink); }
.hero-bar a:hover::after { transform: translateY(0); }

.hero-bar b {
  font: 600 clamp(13px, 1.5vw, 17px)/1 var(--sans);
  font-variation-settings: "wdth" 108;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.hero-bar i { font-style: normal; font-size: 18px; line-height: 1; opacity: .55; }

@media (max-width: 720px) {
  .hero-bar { grid-template-columns: 1fr; }
  .hero-bar a { padding: 15px var(--gut); }
  .hero-bar a + a { border-left: 0; border-top: 1px solid var(--line); }
  .hero-body { padding-bottom: clamp(190px, 30vh, 260px); }
}

/* Scroll hint, hidden the moment the page moves. */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(88px, 12vh, 116px);
  translate: -50% 0;
  z-index: 2;
  font: 400 10px/1 var(--mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgb(240 238 234 / 45%);
  transition: opacity .4s linear;
}
.hero.is-scrolled .hero-scroll { opacity: 0; }
@media (max-width: 720px) { .hero-scroll { display: none; } }

/* --- section headers ------------------------------------------------------ */

.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(32px, 5vw, 56px);
}
.head .eyebrow { display: block; margin-bottom: 18px; }
.head p { color: var(--paper-2); margin-top: 14px; max-width: 52ch; }

@media (max-width: 720px) {
  .head { grid-template-columns: 1fr; align-items: start; }
}

/* --- page masthead (interior pages) --------------------------------------- */

.masthead {
  padding-top: calc(var(--nav-h) + clamp(56px, 9vw, 116px));
  padding-bottom: clamp(40px, 6vw, 76px);
  border-bottom: 1px solid var(--line);
}
.masthead .eyebrow { display: block; margin-bottom: 20px; }
.masthead h1 { margin-bottom: 22px; }
.masthead .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 28px;
  font: 400 12px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper-3);
}
.masthead .meta span::before { content: "— "; color: var(--accent); }
/* The hero centres its buttons; a masthead is set flush left. */
.masthead .hero-cta { justify-content: flex-start; }

/* --- marquee -------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: clamp(14px, 2vw, 22px);
  user-select: none;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: slide 48s linear infinite;
}
.marquee-track > span {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 52px);
  padding-right: clamp(24px, 4vw, 52px);
  font: 600 clamp(1.3rem, 3.4vw, 2.6rem)/1 var(--sans);
  font-variation-settings: "wdth" 112;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--paper-3);
  white-space: nowrap;
}
.marquee-track em { font-style: normal; color: var(--accent); font-size: .55em; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* --- filters -------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.filters button {
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--paper-2);
  font: 400 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}
.filters button:hover { color: var(--paper); border-color: var(--paper-3); }
.filters button[aria-pressed="true"] {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.filters .count { opacity: .5; margin-left: 6px; }

/* --- work grid ------------------------------------------------------------ */

/* CSS columns give true masonry with no JS and no layout shift, because every
   tile declares its aspect ratio up front. Reading order runs down each column,
   which is the right behaviour for a portfolio wall. */
.grid {
  columns: 3;
  column-gap: clamp(10px, 1.4vw, 18px);
}
.grid.is-wide { columns: 4; }
.grid.is-tight { columns: 2; }

@media (max-width: 1100px) {
  .grid, .grid.is-wide { columns: 3; }
}
@media (max-width: 820px) {
  .grid, .grid.is-wide, .grid.is-tight { columns: 2; }
}
@media (max-width: 520px) {
  .grid, .grid.is-wide, .grid.is-tight { columns: 1; }
}

.tile {
  break-inside: avoid;
  margin-bottom: clamp(10px, 1.4vw, 18px);
  position: relative;
  display: block;
  width: 100%;
  background: var(--ink-2);
  border: 0;
  padding: 0;
  cursor: zoom-in;
  overflow: hidden;
  text-align: left;
  color: inherit;
}
.tile[hidden] { display: none; }

.tile-img {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 4 / 5);
  overflow: hidden;
}
.tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), opacity .5s linear;
}
/* Logos and flat art are artwork, not photography — never crop them. */
.grid.is-contain .tile-img { background: var(--ink-3); }
.grid.is-contain .tile-img img { object-fit: contain; padding: clamp(18px, 4%, 44px); }

.tile:hover .tile-img img { transform: scale(1.035); }

.tile-cap {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(to top, rgb(8 9 11 / 88%), transparent);
  opacity: 0;
  translate: 0 8px;
  transition: opacity .35s var(--ease), translate .35s var(--ease);
}
.tile:hover .tile-cap,
.tile:focus-visible .tile-cap { opacity: 1; translate: 0 0; }

.tile-cap b {
  font: 600 14px/1.25 var(--sans);
  font-variation-settings: "wdth" 104;
  letter-spacing: -.005em;
}
.tile-cap small {
  display: block;
  margin-top: 5px;
  font: 400 10px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-3);
}
.tile-cap .zoom {
  flex: none;
  font: 400 10px/1 var(--mono);
  letter-spacing: .12em;
  color: var(--accent);
  text-transform: uppercase;
}

@media (hover: none) {
  /* No hover on touch, so the caption is simply always on. */
  .tile-cap { opacity: 1; translate: 0 0; }
}

/* --- featured pair (home) ------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* A full-width card following a pair keeps the same gap as the pair itself. */
.split + .card { margin-top: clamp(10px, 1.4vw, 18px); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(360px, 46vw, 620px);
  padding: clamp(24px, 3vw, 42px);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-2);
}
.card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(8 9 11 / 92%) 4%, rgb(8 9 11 / 34%) 52%, rgb(8 9 11 / 46%) 100%);
  transition: background .5s var(--ease);
}
.card:hover img { transform: scale(1.05); }
.card .eyebrow { margin-bottom: 14px; }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--paper-2); max-width: 40ch; margin-bottom: 22px; }
.card .go {
  font: 500 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.card .go i { font-style: normal; transition: translate .35s var(--ease); }
.card:hover .go i { translate: 6px 0; }

/* --- stat / info rows ----------------------------------------------------- */

.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(16px, 4vw, 60px);
  padding-block: clamp(26px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.row > h3 { font-variation-settings: "wdth" 108; }
@media (max-width: 720px) { .row { grid-template-columns: 1fr; gap: 14px; } }

/* --- lightbox ------------------------------------------------------------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 40px);
  background: rgb(4 5 6 / 96%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.lb[open], .lb.is-open { opacity: 1; visibility: visible; }

.lb-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 100%;
  max-height: 100%;
}
.lb-figure img {
  max-width: min(100%, 1400px);
  max-height: calc(100svh - 150px);
  width: auto;
  object-fit: contain;
}
.lb-meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  font: 400 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-3);
}
.lb-meta b { color: var(--paper); font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; }
.lb-meta em { font-style: normal; }
.lb-meta em:empty, .lb-meta b:empty { display: none; }

.lb-btn {
  position: absolute;
  z-index: 2;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: rgb(240 238 234 / 6%);
  border: 1px solid var(--line-2);
  color: var(--paper);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  transition: background .25s, border-color .25s;
}
.lb-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.lb-close { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); }
.lb-prev { left: clamp(10px, 2vw, 28px); top: 50%; translate: 0 -50%; }
.lb-next { right: clamp(10px, 2vw, 28px); top: 50%; translate: 0 -50%; }

@media (max-width: 620px) {
  .lb-prev { left: 12px; top: auto; bottom: 16px; translate: 0; }
  .lb-next { right: 12px; top: auto; bottom: 16px; translate: 0; }
  .lb-btn { width: 44px; height: 44px; }
  .lb-figure img { max-height: calc(100svh - 190px); }
}

body.lb-open { overflow: hidden; }

/* --- pricing -------------------------------------------------------------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border: 1px solid rgb(255 59 20 / 34%);
  background: rgb(255 59 20 / 7%);
  margin-bottom: clamp(32px, 5vw, 52px);
}
.notice .eyebrow { color: var(--accent); flex: none; padding-top: 3px; }
.notice p { color: var(--paper-2); font-size: 15px; }
.notice strong { color: var(--paper); }
@media (max-width: 620px) { .notice { flex-direction: column; gap: 8px; } }

.price-group + .price-group { margin-top: clamp(48px, 7vw, 88px); }

.price-group > h2 {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 4px;
}

.price-note {
  font: 400 12px/1.5 var(--mono);
  letter-spacing: .04em;
  color: var(--paper-3);
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}

.price-sub {
  font: 400 11px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  padding-block: 30px 12px;
}

.price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px 20px;
  padding-block: 17px;
  border-bottom: 1px solid var(--line);
}
.price dt { font-size: 17px; font-weight: 500; }
.price dt small {
  display: block;
  margin-top: 5px;
  font: 400 12px/1.4 var(--mono);
  letter-spacing: .03em;
  color: var(--paper-3);
  text-transform: none;
}
.price dd {
  font: 500 clamp(1.1rem, 2vw, 1.5rem)/1 var(--sans);
  font-variation-settings: "wdth" 108;
  text-align: right;
  white-space: nowrap;
}
.price dd span {
  display: block;
  margin-top: 6px;
  font: 400 11px/1 var(--mono);
  letter-spacing: .1em;
  color: var(--paper-3);
}

/* On a phone the two columns fight each other — a wrapped qualifier lands
   beside the row's own small print. Stack them instead. */
@media (max-width: 620px) {
  .price { grid-template-columns: 1fr; gap: 10px; }
  .price dd { text-align: left; }
  .price dd span { display: inline; margin-left: 10px; }
}

/* --- contact -------------------------------------------------------------- */

.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 860px) { .routes { grid-template-columns: 1fr; } }

.route {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(26px, 3.2vw, 40px);
  background: var(--ink);
  transition: background .3s var(--ease);
}
.route:hover { background: var(--ink-2); }
.route .eyebrow { color: var(--accent); }
.route h3 { font-variation-settings: "wdth" 108; }
.route p { color: var(--paper-2); font-size: 15px; flex: 1; }
.route .handle {
  font: 500 14px/1 var(--mono);
  letter-spacing: .02em;
  word-break: break-word;
}
.route .handle:hover { color: var(--accent); }

/* --- CTA band ------------------------------------------------------------- */

.cta {
  position: relative;
  text-align: center;
  padding-block: clamp(80px, 13vw, 190px);
  overflow: hidden;
  isolation: isolate;
}
.cta img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--ink), rgb(8 9 11 / 74%) 45%, var(--ink));
}
.cta .lede { margin-inline: auto; margin-top: 22px; }
.cta .btn { margin-top: 34px; }

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

.foot { border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 76px) 34px; }

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 70px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 820px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-top { grid-template-columns: 1fr; gap: 32px; } }

.foot-brand img { width: 168px; margin-bottom: 20px; }
.foot-brand p { color: var(--paper-2); font-size: 15px; max-width: 34ch; }

.foot h4 {
  font: 400 11px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-3);
  margin-bottom: 18px;
}
.foot li + li { margin-top: 10px; }
.foot li a { font-size: 15px; color: var(--paper-2); transition: color .25s; }
.foot li a:hover { color: var(--paper); }

.foot-bot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font: 400 11px/1.6 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper-3);
}

/* Sits a step below the copyright line in the hierarchy, the same way it does
   on bcuttery: smaller, wider tracked and dimmer than anything around it.
   There it inherits its centring from a footer that is centred throughout; this
   footer is set flush left, so the credit is centred on its own. */
.credit {
  margin: 20px 0 0;
  font: 400 9px/1.6 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(240 238 234 / 26%);
  text-align: center;
}

/* --- reveal on scroll ----------------------------------------------------- */

.js .reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .7s var(--ease), translate .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* Staggering is set per element by site.js via --i. */
.js .reveal { transition-delay: calc(var(--i, 0) * 55ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; translate: none; }
  .marquee-track { animation: none; }
}