/* Self-hosted fonts (Inter body + Archivo display) — no CDN dependency. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/inter-var.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/archivo-var.woff2') format('woff2');}

/* prod.mason temporary site
   Palette: ink, dial cream, lamp amber. One accent, spent on the dial. */

:root {
  --ink: #0b0b0c;
  --ink-2: #141415;
  --cream: #eae4d8;
  --cream-dim: #8f8a80;
  --amber: #f7a21b;
  --hairline: #26262a;
  --maxw: 760px;
  --spectrum: linear-gradient(90deg, #2fe5a7, #46f163, #aaf03c, #f8ec1c, #f7a21b, #f76b3f);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--ink); }

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--spectrum);
  z-index: 10;
}

body {
  font-family: "Archivo", system-ui, sans-serif;
  background: var(--ink);
  color: var(--cream);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

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

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.mono {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}

/* ---------- shell ---------- */

main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eyebrow {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.wordmark {
  font-weight: 900;
  font-size: clamp(44px, 9vw, 84px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 14px 0 10px;
  position: relative;
}

.wordmark[data-text] { margin-bottom: 1.9em; }

.wordmark[data-text]::before,
.wordmark[data-text]::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(234, 228, 216, 0.35);
  pointer-events: none;
}

.wordmark[data-text]::before { transform: translateY(0.85em); }

.wordmark[data-text]::after {
  transform: translateY(1.7em);
  -webkit-text-stroke: 1px rgba(234, 228, 216, 0.14);
}

.wordmark .tm {
  font-size: 0.32em;
  font-weight: 400;
  vertical-align: super;
  color: var(--cream-dim);
}

.tagline {
  color: var(--cream-dim);
  font-size: 15px;
  max-width: 46ch;
  line-height: 1.55;
}

/* ---------- tuning dial ---------- */

.dial {
  margin-top: 56px;
  position: relative;
}

.dial-label {
  display: flex;
  justify-content: space-between;
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 10px;
}

.dial-window {
  position: relative;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
  scrollbar-width: none;
  /* tick marks */
  background-image: repeating-linear-gradient(
    to right,
    var(--hairline) 0,
    var(--hairline) 1px,
    transparent 1px,
    transparent 14px
  );
  background-position: 0 0;
  background-size: 100% 8px;
  background-repeat: repeat-x;
}

.dial-window::-webkit-scrollbar { display: none; }

.stations {
  display: flex;
  gap: 0;
  min-width: max-content;
  position: relative;
  padding: 22px 8px 20px;
}

.station {
  display: block;
  padding: 4px 22px;
  text-align: center;
  position: relative;
}

.station .freq {
  display: block;
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--cream-dim);
  margin-bottom: 6px;
  transition: color 160ms ease;
}

.station .name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 160ms ease;
}

.station:hover .freq,
.station:focus-visible .freq { color: var(--amber); }

.station:hover .name,
.station:focus-visible .name { color: var(--amber); }

.needle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(232, 163, 61, 0.55);
  transform: translateX(-1px);
  transition: left 260ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

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

/* ---------- below the dial ---------- */

.under-dial {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  align-items: baseline;
}

.cta {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 3px;
  transition: color 160ms ease;
}

.cta:hover { color: var(--amber); }

.email {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 13px;
  color: var(--cream-dim);
  transition: color 160ms ease;
}

.email:hover { color: var(--cream); }

/* ---------- on air strip ---------- */

.onair { margin-top: 44px; }

.onair-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 12px;
}

.onair-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}

.onair iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--hairline);
}

/* ---------- social icons ---------- */

.icons {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 44px;
  font-size: 20px;
}

.icons a {
  color: var(--cream-dim);
  transition: color 160ms ease;
}

.icons a:hover,
.icons a:focus-visible { color: var(--amber); }

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

footer {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cream-dim);
}

footer a { border-bottom: 1px solid var(--hairline); padding-bottom: 2px; }
footer a:hover { color: var(--cream); }

/* ---------- EPK page ---------- */

.page {
  justify-content: flex-start;
  padding-top: 64px;
  padding-bottom: 80px;
}

.back {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cream-dim);
  margin-bottom: 44px;
  display: inline-block;
}

.back:hover { color: var(--amber); }

.page h1 {
  font-weight: 900;
  font-size: clamp(34px, 6vw, 56px);
  letter-spacing: -0.02em;
  margin: 12px 0 8px;
}

.page .lede {
  color: var(--cream-dim);
  font-size: 15px;
  line-height: 1.6;
  max-width: 52ch;
}

section {
  margin-top: 56px;
  border-top: 1px solid var(--hairline);
  padding-top: 22px;
}

section > h2 {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}

.bio-block { margin-bottom: 30px; }

.bio-block h3 {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 8px;
}

.bio-block p {
  font-size: 16px;
  line-height: 1.7;
  max-width: 64ch;
}

.bio-block p + p { margin-top: 12px; }

.facts {
  list-style: none;
  font-size: 16px;
  line-height: 1.7;
}

.facts li {
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  max-width: 64ch;
}

.facts li:last-child { border-bottom: none; }

.listen-links { display: flex; flex-wrap: wrap; gap: 14px 36px; }

.note { color: var(--cream-dim); font-size: 15px; line-height: 1.6; max-width: 56ch; }

@media (max-width: 540px) {
  .dial { margin-top: 44px; }
  .station { padding: 4px 16px; }
}

/* ---------- the radio ---------- */

body {
  background-color: var(--ink);
  background-image: linear-gradient(rgba(11,11,12,0.90), rgba(11,11,12,0.96)), url("assets/satellite/sat-finland-lakes.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.radio {
  margin-top: 38px;  /* the only live prop here; body styling is in the .radio rule below */
}

.radio-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.lamp-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--cream-dim);
}

.lamp {
  width: 9px; height: 9px; border-radius: 50%;
  flex: 0 0 9px;
  background: #3a3a3e;
  transition: background 200ms ease, box-shadow 200ms ease;
}

.lamp.on {
  background: var(--amber);
  box-shadow: 0 0 10px rgba(247, 162, 27, 0.8);
}

.readout {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 13px;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}
.readout-freq {
  color: var(--amber);
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.readout-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 60%;
  overflow: hidden;
  white-space: nowrap;
  color: var(--cream);
  text-decoration: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.readout-track #readoutText {
  display: inline-block;
  white-space: nowrap;
  padding-left: 12px;
}
.readout-track.clickable { cursor: pointer; }
.readout-track.clickable #readoutText { color: var(--cream); }
.readout-track.clickable:hover #readoutText {
  color: var(--amber);
  text-decoration: underline;
}
#readoutText.scroll {
  animation: readoutScroll var(--scroll-time, 8s) linear infinite alternate;
}
@keyframes readoutScroll {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(0); }
  90%  { transform: translateX(var(--scroll-dist, 0)); }
  100% { transform: translateX(var(--scroll-dist, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  #readoutText.scroll { animation: none; }
}

.scale {
  position: relative;
  height: 74px;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.ticks .tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 12px;
  background: #3c3c41;
  transform: translateX(-0.5px);
}

.ticks .tick.major { height: 20px; background: #55555c; }

.scale-nums span {
  position: absolute;
  top: 26px;
  transform: translateX(-50%);
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 10px;
  color: var(--cream-dim);
}

.stationdots .sdot {
  position: absolute;
  bottom: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--amber);
  opacity: 0.65;
  transform: translateX(-50%);
  cursor: pointer;
  transition: opacity 150ms ease, transform 150ms ease;
}

.stationdots .sdot:hover,
.stationdots .sdot:focus-visible { opacity: 1; transform: translateX(-50%) scale(1.4); }

.scale-needle {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(247, 162, 27, 0.55);
  transform: translateX(-1px);
  z-index: 2;
  pointer-events: none;
}

.radio-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 26px 0 8px;
}

.knob {
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: radial-gradient(circle at 35% 30%, #232327, #121214 70%);
  cursor: grab;
  position: relative;
  touch-action: none;
  transform: rotate(var(--rot, -135deg));
}

.knob:active { cursor: grabbing; }

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

.knob-mark {
  position: absolute;
  top: 8px; left: 50%;
  width: 3px; height: 20px;
  background: var(--amber);
  transform: translateX(-50%);
  border-radius: 2px;
}

.stepbtn {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--cream-dim);
  font-size: 12px;
  width: 40px; height: 40px;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}

.stepbtn:hover { color: var(--amber); border-color: var(--amber); }

.radio-hint {
  font-size: 12.5px;
  color: var(--cream-dim);
  text-align: center;
  padding-bottom: 18px;
}

.monitor {
  margin: 0 -26px;
  padding: 16px 26px 22px;
  border-top: 1px solid var(--hairline);
}

.monitor .onair-label { margin-bottom: 10px; }

.monitor iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--hairline);
}

/* ---------- credits page ---------- */

.credit-group { margin-bottom: 30px; }

.credit-group h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.credit-group p {
  font-size: 14px;
  color: var(--cream-dim);
  line-height: 1.65;
}

.credit-list {
  columns: 2;
  column-gap: 40px;
  font-size: 14px;
  color: var(--cream-dim);
  line-height: 1.9;
}

@media (max-width: 560px) {
  .credit-list { columns: 1; }
  .radio { padding: 20px 16px 0; }
  .monitor { margin: 0 -16px; padding: 14px 16px 18px; }
  .radio-controls { gap: 22px; }
}

/* ---------- v1.1: stripe fix, spectrum icon hovers, vintage radio ---------- */

/* Stripe scrolls with the page and never covers content */
body::before {
  position: absolute;
  z-index: 1;
}

main { padding-top: 26px; }

/* Each icon glows a different color from the logo */
.icons a:nth-child(6n+1):hover, .icons a:nth-child(6n+1):focus-visible { color: #2fe5a7; }
.icons a:nth-child(6n+2):hover, .icons a:nth-child(6n+2):focus-visible { color: #46f163; }
.icons a:nth-child(6n+3):hover, .icons a:nth-child(6n+3):focus-visible { color: #aaf03c; }
.icons a:nth-child(6n+4):hover, .icons a:nth-child(6n+4):focus-visible { color: #f8ec1c; }
.icons a:nth-child(6n+5):hover, .icons a:nth-child(6n+5):focus-visible { color: #f7a21b; }
.icons a:nth-child(6n+6):hover, .icons a:nth-child(6n+6):focus-visible { color: #f76b3f; }

/* ---------- the old radio ---------- */

.radio {
  position: relative;
  border: 1px solid #2c2620;
  border-radius: 14px;
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(64, 50, 34, 0.28), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #181410, #0d0c0a);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 170, 0.06),
    inset 0 -14px 30px rgba(0, 0, 0, 0.55),
    0 18px 50px rgba(0, 0, 0, 0.5);
  padding: 26px 26px 0;
  overflow: hidden;
}

.screw {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a5248, #211d18 70%);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.8);
}
.screw::after {
  content: "";
  position: absolute;
  left: 50%; top: 1px; bottom: 1px;
  width: 1.5px;
  background: rgba(0,0,0,0.7);
  transform: translateX(-50%) rotate(40deg);
}
.screw.tl { top: 10px; left: 10px; }
.screw.tr { top: 10px; right: 10px; }
.screw.bl { bottom: 10px; left: 10px; }
.screw.br { bottom: 10px; right: 10px; }

.nameplate {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: #8a7a5e;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Backlit dial glass */
.scale {
  border-radius: 6px;
  border: 1px solid #322a20;
  background: linear-gradient(180deg, rgba(247, 210, 140, 0.07), rgba(247, 210, 140, 0.02));
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6);
  transition: background 400ms ease, box-shadow 400ms ease;
}

.radio.live .scale {
  background: linear-gradient(180deg, rgba(247, 200, 120, 0.16), rgba(247, 200, 120, 0.04));
  box-shadow: inset 0 0 28px rgba(247, 170, 60, 0.10), inset 0 0 24px rgba(0,0,0,0.45);
}

.ticks .tick { background: #4a4233; }
.ticks .tick.major { background: #6b5f48; }
.scale-nums span { color: #a08c66; }

/* Old set needle: coral red from the logo */
.scale-needle {
  background: #f76b3f;
  box-shadow: 0 0 8px rgba(247, 107, 63, 0.6);
}

.stationdots .sdot { background: #f7a21b; box-shadow: 0 0 6px rgba(247,162,27,0.35); }

.knob-inner {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #2c251c, #100e0b 75%);
  box-shadow: inset 0 1px 2px rgba(255, 226, 170, 0.10), inset 0 -3px 8px rgba(0,0,0,0.7);
}

.stepbtn {
  border-radius: 50%;
  border-color: #2c2620;
  background: linear-gradient(180deg, #1b1712, #0f0d0a);
  color: #a08c66;
}

.stepbtn:hover { color: var(--amber); border-color: #4a3d28; }

.radio-hint { color: #6d6250; }

/* Speaker grille: the monitor hides behind it */
.grille {
  display: block;
  width: calc(100% + 52px);
  margin: 0 -26px;
  height: 64px;
  border: none;
  border-top: 1px solid #2c2620;
  cursor: pointer;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 7px, rgba(0,0,0,0.55) 7px 10px),
    linear-gradient(180deg, #171310, #0c0b09);
  position: relative;
}

.grille:hover .grille-label, .grille:focus-visible .grille-label { color: var(--amber); }

.grille-label {
  position: absolute;
  right: 14px; bottom: 8px;
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #5e533f;
  transition: color 150ms ease;
}

.monitor {
  margin: 0 -26px;
  padding: 0 26px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms ease, padding 350ms ease;
  border-top: 0;
}

.monitor.open {
  max-height: 230px;
  padding: 16px 26px 22px;
  border-top: 1px solid #2c2620;
}

@media (max-width: 560px) {
  .grille { width: calc(100% + 32px); margin: 0 -16px; }
  .monitor { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
}

/* ---------- v1.2: lead funnel row + EPK photo ---------- */

.work {
  margin-top: 36px;
  border: 1px solid var(--hairline);
  background: rgba(20, 20, 21, 0.6);
  padding: 18px 20px;
}

.work-label {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 12px;
}

.work-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.work-loc {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--cream-dim);
}

.work-loc a { color: var(--amber); text-decoration: none; }
.work-loc a:hover { text-decoration: underline; }

.epk-photo {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 18px 0 26px;
  border: 1px solid var(--hairline);
  filter: saturate(0.9);
}

#ytmount { margin-top: 10px; }
#ytmount iframe { border: 1px solid var(--hairline); width: 100%; }

/* v1.4: work box dissolved into the link row */
.work-loc { margin-top: 14px; }

/* v1.5: terms page lists */
.terms h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 22px 0 8px;
}
.terms ul { margin: 0 0 6px 18px; }
.terms li { font-size: 14px; color: var(--cream-dim); line-height: 1.75; }
.terms li a { color: var(--amber); }

/* v1.6: service folders */
.svc {
  border: 1px solid var(--hairline);
  background: rgba(20, 20, 21, 0.6);
  margin-bottom: 14px;
}

.svc summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: background 150ms ease;
}

.svc summary::-webkit-details-marker { display: none; }

.svc summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 18px;
  color: var(--amber);
  transition: transform 200ms ease;
}

.svc[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.svc summary:hover { background: rgba(247, 162, 27, 0.04); }

.svc-name {
  font-weight: 600;
  font-size: 17px;
  color: var(--cream);
}

.svc-sub {
  font-size: 13px;
  color: var(--cream-dim);
  padding-right: 36px;
}

.svc-body {
  padding: 0 20px 20px;
  border-top: 1px solid var(--hairline);
}

/* ===== v2.0: hierarchy, slider, stat strip, store, knob-only ===== */

/* Front door hierarchy */
.cta-primary {
  display: inline-block;
  background: linear-gradient(180deg, #ffb53d, #f7a21b);
  color: #1b1209;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(247, 162, 27, 0.32), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cta-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 24px rgba(247, 162, 27, 0.45), inset 0 1px 0 rgba(255,255,255,0.35); }
.quiet-links { display: inline-flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.quiet-links a {
  color: #b8aa92;
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.quiet-links a:hover { color: #f2e9d8; border-color: #f7a21b; }
.under-dial { align-items: center; }
.under-dial .email { font-size: 0.8rem; opacity: 0.75; }

/* Station dots: visual only now */
.sdot { pointer-events: none; }

/* Powered chassis */
.radio:not(.powered) .readout { opacity: 0.45; }
.radio.powered .readout { opacity: 1; }

/* Stat strip (credits) */
.stat-strip {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  letter-spacing: 0.04em;
  color: #f7a21b;
  margin: 6px 0 30px;
}

/* Beats deal slider */
.negotiate { margin-top: 14px; border-top: 1px dashed rgba(247,162,27,0.25); padding-top: 12px; }
.negotiate > summary {
  cursor: pointer;
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 0.9rem;
  color: #e8dcc6;
  list-style: none;
}
.negotiate > summary::-webkit-details-marker { display: none; }
.negotiate > summary::after { content: " \25BE"; color: #f7a21b; }
.negotiate[open] > summary::after { content: " \25B4"; color: #f7a21b; }
.deal-slider { margin: 18px 4px 6px; }
.deal-readouts {
  display: flex; gap: 26px; flex-wrap: wrap;
  font-family: 'Archivo', sans-serif; margin-bottom: 14px;
}
.deal-readouts .dr { min-width: 150px; }
.deal-readouts .dr b {
  display: block; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 900; color: #f7a21b; line-height: 1.1;
}
.deal-readouts .dr span {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: #b8aa92;
}
input[type="range"].deal-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #f7a21b, #6b5836);
  outline: none; margin: 6px 0 4px;
}
input[type="range"].deal-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4138, #211c16 70%);
  border: 2px solid #f7a21b;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  cursor: grab;
}
input[type="range"].deal-range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4138, #211c16 70%);
  border: 2px solid #f7a21b;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  cursor: grab;
}
.deal-scale-labels {
  display: flex; justify-content: space-between;
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size: 0.68rem; color: #8e8268;
  margin-bottom: 12px;
}
.deal-fineprint { font-size: 0.82rem; color: #b8aa92; line-height: 1.55; }

/* Store under construction */
.store-page .construction {
  margin-top: 34px;
  border: 2px dashed rgba(247,162,27,0.5);
  border-radius: 12px;
  padding: 44px 26px;
  text-align: center;
  background: repeating-linear-gradient(-45deg, rgba(247,162,27,0.05), rgba(247,162,27,0.05) 16px, transparent 16px, transparent 32px);
}
.construction-sign {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: clamp(1.3rem, 4.5vw, 2rem);
  letter-spacing: 0.14em; color: #f7a21b; margin: 0 0 10px;
}
.construction-note { font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size: 0.9rem; color: #cfc3ab; margin: 6px 0; }
.construction-note a { color: #f7a21b; }

/* ===== Resources thumbnail grid ===== */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 30px;
}
.resource-card {
  display: flex;
  flex-direction: column;
  background: rgba(28, 23, 18, 0.55);
  border: 1px solid rgba(247, 162, 27, 0.18);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.resource-card:hover {
  transform: translateY(-4px);
  border-color: rgba(247, 162, 27, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.resource-thumb {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: radial-gradient(circle at 50% 40%, #241d16, #15110d);
  border-bottom: 1px solid rgba(247, 162, 27, 0.12);
}
.resource-thumb svg { max-width: 150px; }
.resource-meta { padding: 16px 18px 20px; }
.resource-meta h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  margin: 0 0 6px;
  color: #f2e9d8;
}
.resource-meta p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #b8aa92;
  margin: 0 0 12px;
}
.resource-tag {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #f7a21b;
}

/* ===== Plain terms list (beat deal explainer) ===== */
.plain-terms { list-style: none; padding: 0; margin: 0; }
.plain-terms li {
  font-size: 1rem;
  line-height: 1.6;
  color: #e8dcc6;
  padding: 11px 0 11px 26px;
  border-bottom: 1px solid rgba(247, 162, 27, 0.12);
  position: relative;
}
.plain-terms li:last-child { border-bottom: none; }
.plain-terms li::before {
  content: "";
  position: absolute;
  left: 4px; top: 19px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f7a21b;
}
.resource-thumb-contract { background: radial-gradient(circle at 50% 35%, #20190f, #130f0a); }

.page-nav {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  justify-content: center;
}
.page-nav .quiet-links { justify-content: center; }

/* ===== Readable paragraphs: 1.5+ spacing, indents on prose ===== */
.terms p { line-height: 1.8; }
.terms section > p { text-indent: 1.6em; margin-bottom: 1em; }
.terms section > p.note { text-indent: 0; }
.terms ul li { line-height: 1.7; }
.plain-terms li { line-height: 1.75; }
.resource-meta p { line-height: 1.65; }

/* ===== Legal box (beat deal) ===== */
.legal-box {
  border: 1px solid rgba(247, 162, 27, 0.35);
  border-left: 4px solid #f7a21b;
  border-radius: 8px;
  background: rgba(247, 162, 27, 0.06);
  padding: 16px 18px;
  margin-top: 18px;
}
.legal-box p {
  font-size: 0.88rem !important;
  line-height: 1.7 !important;
  color: #d8ccb4;
  margin: 0;
  text-indent: 0 !important;
}

/* ===== Credit links + logo-colored asterisks ===== */
.credit-group a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(247, 162, 27, 0.45);
  transition: color 0.12s ease, border-color 0.12s ease;
}
.credit-group a:hover { color: #f7a21b; border-bottom-color: #f7a21b; border-bottom-style: solid; }
.ast { font-weight: 700; padding-left: 1px; }
.credit-group p .ast:nth-of-type(6n+1) { color: #2fe5a7; }
.credit-group p .ast:nth-of-type(6n+2) { color: #46f163; }
.credit-group p .ast:nth-of-type(6n+3) { color: #aaf03c; }
.credit-group p .ast:nth-of-type(6n+4) { color: #f8ec1c; }
.credit-group p .ast:nth-of-type(6n+5) { color: #f7a21b; }
.credit-group p .ast:nth-of-type(6n+6) { color: #f76b3f; }

/* ===== Video embeds on resource pages ===== */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 8px 0 26px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(247, 162, 27, 0.25);
  background: #000;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ===== Mobile: radio is desktop-only, big tabs instead ===== */
.mobile-tabs { display: none; }
@media (max-width:768px) and (pointer:coarse){.radio { margin-top: 22px; margin-bottom: 34px; }
.under-dial { display: none; }}
@media (max-width: 768px) {
  
  
  .mobile-tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px 0 26px;
  }
  .mtab {
    display: block;
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    text-decoration: none;
    color: #f2e9d8;
    background: rgba(28, 23, 18, 0.6);
    border: 1px solid rgba(247, 162, 27, 0.35);
    border-radius: 12px;
    padding: 16px 10px;
  }
  .mtab:active { background: rgba(247, 162, 27, 0.15); }
  .mtab-primary {
    background: linear-gradient(180deg, #ffb53d, #f7a21b);
    color: #1b1209;
    border: none;
    box-shadow: 0 4px 18px rgba(247, 162, 27, 0.3);
  }
  .mtab-email {
    text-align: center;
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
    font-size: 0.85rem;
    color: #b8aa92;
    text-decoration: none;
    margin-top: 4px;
  }
  .icons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    row-gap: 18px;
    column-gap: 0;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== Copyright footer line ===== */
footer .copyright {
  flex-basis: 100%;
  font-size: 0.74rem;
  color: #6e675c;
  margin-top: 2px;
}

/* ===== Mobile tabs on every page ===== */
.page-tabs { margin-top: 36px; }
@media (max-width: 768px) {
  .page-nav { display: none; }
}


/* ---------- footer: mobile stack fix ---------- */
@media (max-width: 768px) {
  footer {
    justify-content: center;
    text-align: center;
    row-gap: 10px;
    column-gap: 26px;
    padding-bottom: 36px;
  }
  footer > span:first-child { flex-basis: 100%; }
  footer .copyright { margin-top: 6px; }
}


/* ===== Mobile radio: seek buttons ===== */
.seek-row { display: none; }
@media (max-width:768px) and (pointer:coarse){
  .seek-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 0 6px 18px;
  }
  .seek {
    flex: 1 1 0;
    max-width: 150px;
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--cream-dim);
    background: radial-gradient(circle at 35% 30%, #232327, #121214 70%);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 13px 8px;
    cursor: pointer;
  }
  .seek:active { color: var(--amber); border-color: rgba(247, 162, 27, 0.5); }
  .seek[disabled] { opacity: 0.4; }
  /* phones: no knob at all — seek buttons are the tuner */
  .radio-controls { display: none; }
  /* playlist widget: crop to the player controls, hide the tracklist rows */
  .monitor iframe { height: 120px; }
  .monitor.pulse { animation: monPulse 1.2s ease-in-out infinite; }
  /* lamp flickers faintly while the radio is on a dead/silent signal */
  .radio.noise-flicker .lamp { animation: lampFlicker 1.3s steps(2, jump-none) infinite; }
  @keyframes lampFlicker {
    0%, 100% { background: #3a3a3e; box-shadow: none; }
    38% { background: rgba(247, 162, 27, 0.55); box-shadow: 0 0 6px rgba(247, 162, 27, 0.35); }
    52% { background: #3a3a3e; box-shadow: none; }
    71% { background: rgba(247, 162, 27, 0.8); box-shadow: 0 0 8px rgba(247, 162, 27, 0.5); }
  }
  @keyframes monPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247, 162, 27, 0); }
    50% { box-shadow: 0 0 0 3px rgba(247, 162, 27, 0.35); }
  }
  .radio-controls { padding: 18px 0 6px; }
}

/* ===== Digital segment readout (watch/car-deck style) ===== */
.readout {
  background:
    linear-gradient(125deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015) 30%, rgba(255,255,255,0) 55%),
    #0b0906;
  border: 1px solid #2c2620;
  border-radius: 6px;
  padding: 7px 10px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.75);
}
.readout-freq, .readout-track, .readout-track span {
  font-family: "DSEG14-Classic", 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  color: var(--amber);
  text-shadow: 0 0 6px rgba(247, 162, 27, 0.4);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
}

@media (max-width:768px) and (pointer:coarse){
  /* the lamp speaks for itself: no status word, no layout shift */
  .lamp-label { display: none; }
}

/* ===== Mobile dial: piano-white tuner face ===== */
@media (max-width:768px) and (pointer:coarse){
  .stationdots { display: none; }
  .scale {
    background: #f4efe4;
    border-radius: 6px;
    border: 1px solid #2c2620;
  }
  .scale .tick { background: #1c1712; }
  .scale .tick.major { background: #000; }
  .scale-nums span { color: #111; }
}

/* ===== Mobile: dial stays ivory when live; vintage distress ===== */
@media (max-width:768px) and (pointer:coarse){
  .radio.live .scale, .radio.powered .scale {
    background: radial-gradient(60px 26px at 78% 20%, rgba(150, 110, 50, 0.1), transparent 70%), #efe8d6;
  }
  .scale {
    background: radial-gradient(60px 26px at 78% 20%, rgba(150, 110, 50, 0.1), transparent 70%), #efe8d6;
    box-shadow: inset 0 0 14px rgba(110, 80, 35, 0.22);
  }
  .radio::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    pointer-events: none;
    background:
      radial-gradient(130px 70px at 10% 6%, rgba(255, 255, 255, 0.045), transparent 70%),
      radial-gradient(90px 50px at 90% 92%, rgba(0, 0, 0, 0.3), transparent 72%),
      radial-gradient(50px 26px at 72% 10%, rgba(0, 0, 0, 0.22), transparent 70%),
      radial-gradient(36px 20px at 24% 88%, rgba(0, 0, 0, 0.18), transparent 70%),
      linear-gradient(104deg, transparent 49.7%, rgba(255, 255, 255, 0.07) 49.95%, transparent 50.25%),
      linear-gradient(67deg, transparent 64.7%, rgba(255, 255, 255, 0.05) 64.95%, transparent 65.2%);
  }
}

/* ===== Mobile dial: thinner face, heavier aging, readout space ===== */
@media (max-width:768px) and (pointer:coarse){
  .readout-freq { font-size: 9px; opacity: 0.8; letter-spacing: 0.02em; }
  .readout-track { flex: 1 1 auto; min-width: 0; }
  .scale, .radio.live .scale, .radio.powered .scale {
    height: 42px;
    background:
      linear-gradient(78deg, transparent 49.75%, rgba(70, 45, 18, 0.3) 50%, transparent 50.35%),
      linear-gradient(99deg, transparent 64.7%, rgba(255, 255, 255, 0.5) 64.95%, transparent 65.15%),
      radial-gradient(70px 30px at 76% 22%, rgba(150, 110, 50, 0.16), transparent 70%),
      radial-gradient(50px 22px at 18% 78%, rgba(130, 95, 45, 0.14), transparent 70%),
      radial-gradient(120% 100% at 50% 0%, rgba(120, 85, 40, 0.1), transparent 60%),
      #ece3cd;
    box-shadow: inset 0 0 18px rgba(105, 75, 30, 0.32);
  }
}

@media (max-width:768px) and (pointer:coarse){
  .seek-row { align-items: center; gap: 18px; }
  .seek { max-width: 84px; font-size: 14px; padding: 12px 0; }
  .seek-label {
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--cream-dim);
  }
}

/* ===== Mobile dial: recessed lighting, one-time tube flicker ===== */
@media (max-width:768px) and (pointer:coarse){
  .scale { filter: brightness(0.55); }
  .scale.dial-lit {
    filter: brightness(1);
    animation: dialWake 0.5s steps(2, jump-none) 1;
  }
  @keyframes dialWake {
    0% { filter: brightness(0.55); }
    25% { filter: brightness(1.08); }
    45% { filter: brightness(0.6); }
    65% { filter: brightness(1.12); }
    100% { filter: brightness(1); }
  }
  /* recessed bulbs along the top edge */
  .scale, .radio.live .scale, .radio.powered .scale {
    background:
      radial-gradient(44px 18px at 22% 0%, rgba(255, 246, 214, 0.6), transparent 72%),
      radial-gradient(44px 18px at 78% 0%, rgba(255, 246, 214, 0.6), transparent 72%),
      radial-gradient(70px 26px at 50% 0%, rgba(255, 248, 222, 0.42), transparent 75%),
      linear-gradient(78deg, transparent 49.75%, rgba(70, 45, 18, 0.3) 50%, transparent 50.35%),
      linear-gradient(99deg, transparent 64.7%, rgba(255, 255, 255, 0.5) 64.95%, transparent 65.15%),
      radial-gradient(70px 30px at 76% 22%, rgba(150, 110, 50, 0.16), transparent 70%),
      radial-gradient(50px 22px at 18% 78%, rgba(130, 95, 45, 0.14), transparent 70%),
      #ece3cd;
    box-shadow: inset 0 0 18px rgba(105, 75, 30, 0.32);
  }
}

/* ===== Mobile tabs: preset-key grid matching the deck ===== */
@media (max-width: 768px) {
  .mobile-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 18px 0 24px;
  }
  .mtab {
    flex: 1 1 calc(33.3% - 10px);
    min-width: 92px;
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--cream-dim);
    background: radial-gradient(circle at 35% 30%, #232327, #121214 70%);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 14px 4px;
  }
  .mtab:active { color: var(--amber); border-color: rgba(247, 162, 27, 0.5); background: radial-gradient(circle at 35% 30%, #232327, #121214 70%); }
  /* homepage nav (the one with the email): 4 buttons in a clean 2x2, email on its own line */
  .mobile-tabs:has(.mtab-email) .mtab { flex: 1 1 calc(50% - 5px); }
  .mtab-email { flex: 1 1 100%; margin-top: 8px; }
}

/* ===== Mobile: spacing, readout layout, deeper aging ===== */
@media (max-width:768px) and (pointer:coarse){
  .seek-row { margin-top: 18px; }
  /* freq becomes a tiny corner marker; the title owns the display */
  .readout { position: relative; padding: 13px 8px 6px; }
  .readout-freq {
    position: absolute;
    top: 2px;
    left: 6px;
    font-size: 7px;
    opacity: 0.7;
  }
  .readout-track { display: block; width: 100%; }
  /* deeper wear on the chassis */
  .radio::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    pointer-events: none;
    background:
      radial-gradient(180% 120% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.38) 100%),
      radial-gradient(70px 36px at 38% 96%, rgba(0, 0, 0, 0.3), transparent 70%),
      radial-gradient(46px 22px at 8% 50%, rgba(0, 0, 0, 0.22), transparent 70%),
      radial-gradient(30px 14px at 94% 30%, rgba(255, 255, 255, 0.05), transparent 70%),
      linear-gradient(131deg, transparent 31.7%, rgba(255, 255, 255, 0.06) 31.95%, transparent 32.2%),
      linear-gradient(48deg, transparent 81.75%, rgba(0, 0, 0, 0.28) 81.95%, transparent 82.15%);
  }
}

@media (max-width: 768px) {
  .icons a { font-size: 1.6rem; }
  .icons { row-gap: 22px; max-width: 360px; }
}

/* ===== The new radio face, all screen sizes (desktop keeps its knob) ===== */
.stationdots { display: none; }
.scale, .radio.live .scale, .radio.powered .scale {
  background:
    radial-gradient(44px 18px at 22% 0%, rgba(255, 246, 214, 0.6), transparent 72%),
    radial-gradient(44px 18px at 78% 0%, rgba(255, 246, 214, 0.6), transparent 72%),
    radial-gradient(70px 26px at 50% 0%, rgba(255, 248, 222, 0.42), transparent 75%),
    linear-gradient(78deg, transparent 49.75%, rgba(70, 45, 18, 0.3) 50%, transparent 50.35%),
    linear-gradient(99deg, transparent 64.7%, rgba(255, 255, 255, 0.5) 64.95%, transparent 65.15%),
    radial-gradient(70px 30px at 76% 22%, rgba(150, 110, 50, 0.16), transparent 70%),
    radial-gradient(50px 22px at 18% 78%, rgba(130, 95, 45, 0.14), transparent 70%),
    #ece3cd;
  box-shadow: inset 0 0 18px rgba(105, 75, 30, 0.32), inset 0 3px 7px rgba(0, 0, 0, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  border: 1px solid #2c2620;
  filter: brightness(0.55);
}
.scale.dial-lit { filter: brightness(1); animation: dialWake 0.5s steps(2, jump-none) 1; }
.scale .tick { background: #1c1712; }
.scale .tick.major { background: #000; }
.scale-nums span { color: #111; }
.radio::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background:
    radial-gradient(180% 120% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.38) 100%),
    radial-gradient(70px 36px at 38% 96%, rgba(0, 0, 0, 0.3), transparent 70%),
    radial-gradient(46px 22px at 8% 50%, rgba(0, 0, 0, 0.22), transparent 70%),
    linear-gradient(48deg, transparent 81.75%, rgba(0, 0, 0, 0.28) 81.95%, transparent 82.15%);
}
.radio::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background:
    radial-gradient(130px 70px at 10% 6%, rgba(255, 255, 255, 0.045), transparent 70%),
    radial-gradient(90px 50px at 90% 92%, rgba(0, 0, 0, 0.3), transparent 72%),
    linear-gradient(104deg, transparent 9.7%, rgba(255, 255, 255, 0.07) 9.95%, transparent 10.25%);
}

/* the digital dash stretches left to fill the row beside the lamp */
.radio-top { gap: 10px; }
.readout { flex: 1 1 auto; min-width: 0; }

/* dash hugs the lamp; lamp area shrinks to its bare circle */
.radio-top { gap: 6px; }
.lamp-wrap { flex: 0 0 auto; margin-right: 0; padding-right: 0; }
.readout { margin-left: 0; }

/* title may use the whole dash now that freq is a corner chip */
.readout-track { max-width: 100%; }
.readout-track #readoutText { padding-left: 2px; }

@media (max-width: 768px) {
  .icons { max-width: 100%; width: 100%; row-gap: 24px; }
  .icons a { font-size: 1.7rem; }
}

@media (max-width:768px) and (pointer:coarse){
  .mtab, .seek { font-weight: 700; }
  .mtab, .seek { transition: transform 0.25s ease; will-change: transform; }
  .work-loc { text-align: center; }
}

/* ===== Desktop homepage layout pass ===== */
@media (min-width: 769px) {
  .under-dial { justify-content: center; }
  .quiet-links { margin: 0 auto; }
  .work-loc { text-align: center; }
  .email-line { text-align: center; margin: 10px 0 0; }
  .icons { justify-content: center; }
  .icons a { font-size: 1.5rem; }
  footer { justify-content: center; text-align: center; row-gap: 10px; }
  footer > span:first-child { flex-basis: 100%; order: 2; }
  footer .copyright { order: 3; }
  footer a { order: 1; }
}
@media (max-width: 768px) {
  .email-line { display: none; }
}

/* ===== The knob, machined ===== */
.knob {
  background: repeating-conic-gradient(from 0deg,
    #17171a 0deg 5deg, #2c2c31 5deg 10deg);
  border: 2px solid #0b0b0d;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.65),
    0 1px 0 rgba(255, 226, 170, 0.08),
    inset 0 0 0 3px rgba(0, 0, 0, 0.5);
}
.knob-inner {
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 28%, #45454c, #1a1a1e 58%, #101013 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    inset 0 -4px 8px rgba(0, 0, 0, 0.6);
}
.knob-inner::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3c3c42, #0d0d10 75%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
.knob-mark {
  position: absolute;
  top: 5px; left: 50%;
  width: 3px; height: 26%;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--amber);
  box-shadow: 0 0 6px rgba(247, 162, 27, 0.55);
}

/* ===== Desktop spacing pass 2 ===== */
@media (min-width: 769px) {
  .under-dial { margin-top: 34px; }
  .work-loc { margin-top: 26px; }
  .icons a { font-size: 2.5rem; }
  .icons { gap: 26px; margin-top: 30px; }
  footer { row-gap: 16px; padding-top: 36px; }
  footer a { margin-bottom: 6px; }
}

/* ===== TUNE label + rotation arrows around the knob ===== */
.radio-controls { flex-direction: column; gap: 12px; }
.knob-wrap { display: flex; align-items: center; gap: 16px; }
.knob-arrow { font-size: 20px; color: var(--cream-dim); opacity: 0.7; }
.knob-label {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--cream-dim);
}

/* ===== Knob v3: spun aluminum, like the reference ===== */
.knob {
  background: repeating-conic-gradient(from 0deg,
    #b9b9bf 0deg 3deg, #88888e 3deg 6deg);
  border: 1px solid #6e6e74;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.knob-inner {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.5), transparent 45%),
    conic-gradient(from 210deg,
      #f1f1f4 0deg, #b9b9bf 40deg, #e6e6ea 80deg, #a3a3a9 130deg,
      #efeff2 180deg, #b0b0b6 230deg, #e9e9ec 280deg, #a8a8ae 330deg, #f1f1f4 360deg);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25);
}
.knob-inner::after { display: none; }
.knob-mark {
  position: absolute;
  top: 12px; left: 50%;
  width: 4px; height: 14px;
  margin-left: -2px;
  border-radius: 1px;
  background: #111;
  box-shadow: none;
}

/* ===== Built-in speaker grilles flanking the knob ===== */
.radio-controls { flex-direction: row; align-items: center; justify-content: center; gap: 26px; }
.knob-stack { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 0 0 auto; }
.speaker {
  flex: 1 1 0;
  max-width: 190px;
  height: 128px;
  border-radius: 12px;
  border: 1px solid #0a0908;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 226, 170, 0.04), transparent 70%),
    radial-gradient(#060504 1.4px, transparent 1.55px),
    linear-gradient(180deg, #221c15, #15110c);
  background-size: auto, 7px 7px, auto;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.7),
    inset 0 0 0 4px #100d09,
    0 1px 0 rgba(255, 226, 170, 0.05);
}
@media (max-width:768px) and (pointer:coarse){
  .speaker { display: none; }
}


/* ===== Lamp solo + backlit slim dial ===== */
.lamp-label { display: none; }
.lamp { width: 13px; height: 13px; flex: 0 0 13px; }
@media (min-width: 769px) {
  .scale { height: 48px; }
}
.scale.dial-lit {
  filter: brightness(1.05);
  box-shadow:
    inset 0 0 26px rgba(255, 238, 190, 0.55),
    inset 0 0 6px rgba(255, 246, 214, 0.35),
    0 0 16px rgba(255, 226, 170, 0.15);
}

/* test-pass fixes: copyright contrast to WCAG AA */
footer .copyright { color: #8a8173; }

/* ===== Knob arrows v2: arcs that wrap the knob ===== */
.knob-wrap { position: relative; }
.knob-arrow {
  position: absolute;
  top: 50%; left: 50%;
  width: 116px; height: 116px;
  margin: -58px 0 0 -58px;
  border: 2px solid transparent;
  border-radius: 50%;
  font-size: 0;            /* hide the old glyphs */
  pointer-events: none;
  opacity: 0.55;
}
.knob-wrap span.knob-arrow:first-of-type {
  border-left-color: var(--cream-dim);
  transform: rotate(38deg);
}
.knob-wrap span.knob-arrow:first-of-type::after {
  content: "";
  position: absolute;
  left: 2px; bottom: 14px;
  border: 5px solid transparent;
  border-top-color: var(--cream-dim);
  transform: rotate(40deg);
}
.knob-wrap span.knob-arrow:last-of-type {
  border-right-color: var(--cream-dim);
  transform: rotate(-38deg);
}
.knob-wrap span.knob-arrow:last-of-type::after {
  content: "";
  position: absolute;
  right: 2px; bottom: 14px;
  border: 5px solid transparent;
  border-top-color: var(--cream-dim);
  transform: rotate(-40deg);
}

/* the lamp is the power button */
.lamp-wrap { cursor: pointer; padding: 6px; margin: -6px; }

/* ===== Desktop: powered radio = lit dash + lit dial w/ recessed bulbs ===== */
@media (min-width: 769px) {
  .radio.powered .scale {
    filter: brightness(1.06);
    box-shadow:
      inset 0 0 26px rgba(255, 238, 190, 0.55),
      inset 0 0 6px rgba(255, 246, 214, 0.35),
      0 0 16px rgba(255, 226, 170, 0.15);
    background:
      radial-gradient(48px 20px at 22% 0%, rgba(255, 248, 218, 0.85), transparent 74%),
      radial-gradient(48px 20px at 78% 0%, rgba(255, 248, 218, 0.85), transparent 74%),
      radial-gradient(80px 30px at 50% 0%, rgba(255, 250, 226, 0.6), transparent 78%),
      linear-gradient(78deg, transparent 49.75%, rgba(70, 45, 18, 0.3) 50%, transparent 50.35%),
      linear-gradient(99deg, transparent 64.7%, rgba(255, 255, 255, 0.5) 64.95%, transparent 65.15%),
      radial-gradient(70px 30px at 76% 22%, rgba(150, 110, 50, 0.16), transparent 70%),
      radial-gradient(50px 22px at 18% 78%, rgba(130, 95, 45, 0.14), transparent 70%),
      #f0e8d2;
  }
  .radio.powered .readout {
    border-color: #57471f;
    box-shadow:
      inset 0 2px 10px rgba(0, 0, 0, 0.75),
      inset 0 0 20px rgba(247, 162, 27, 0.14);
  }
  .radio.powered .readout-freq,
  .radio.powered .readout-track,
  .radio.powered .readout-track span {
    text-shadow: 0 0 9px rgba(247, 162, 27, 0.65);
  }
}

/* ===== Mobile: powered lighting + gentle dead flicker + OFF key ===== */
@media (max-width:768px) and (pointer:coarse){
  .radio.powered .scale {
    filter: brightness(1.06);
    box-shadow:
      inset 0 0 22px rgba(255, 238, 190, 0.5),
      inset 0 0 6px rgba(255, 246, 214, 0.3);
  }
  .radio.powered .readout {
    border-color: #57471f;
    box-shadow:
      inset 0 2px 10px rgba(0, 0, 0, 0.75),
      inset 0 0 18px rgba(247, 162, 27, 0.14);
  }
  .radio.powered .readout-freq,
  .radio.powered .readout-track,
  .radio.powered .readout-track span {
    text-shadow: 0 0 9px rgba(247, 162, 27, 0.6);
  }
  .seek-off { flex: 0 0 58px; max-width: 58px; font-size: 10px; }
}
.radio.dead-flicker .lamp { animation: lampFlickerSoft 2s steps(2, jump-none) infinite; }
@keyframes lampFlickerSoft {
  0%, 100% { background: #3a3a3e; box-shadow: none; }
  42% { background: rgba(247, 162, 27, 0.3); box-shadow: 0 0 4px rgba(247, 162, 27, 0.18); }
  58% { background: #3a3a3e; box-shadow: none; }
  78% { background: rgba(247, 162, 27, 0.42); box-shadow: 0 0 5px rgba(247, 162, 27, 0.22); }
}



/* ===== Logo stadium wave: letters rise & fall L-to-R, every 60s ===== */
.wordmark .wl {
  display: inline-block;
  /* WAVE SHELVED (Mason, June 13 2026): the letter-bounce is paused so the echo-breath below
     is the wordmark's only motion. To bring the wave back, restore these two lines:
     animation: logoWaveL 60s ease-in-out infinite;
     animation-delay: calc(var(--wli) * 65ms); */
}
@keyframes logoWaveL {
  0%, 100% { transform: translateY(0); }
  0.4% { transform: translateY(-0.07em); }
  0.85% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark .wl { animation: none; }
}

/* wave-enhanced wordmark: real echo rows replace the pseudo copies */
.wordmark.wave-on::before, .wordmark.wave-on::after { content: none; }
.wordmark .echo-row {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  color: transparent;
  white-space: nowrap;
}
.wordmark .echo-1 {
  transform: translateY(0.85em);
  -webkit-text-stroke: 1.5px rgba(234, 228, 216, 0.35);
}
.wordmark .echo-2 {
  transform: translateY(1.7em);
  -webkit-text-stroke: 1px rgba(234, 228, 216, 0.14);
}

/* ===== Echo breath: layers retract into the word and spring back (at :30) ===== */
.wordmark .echo-1 {
  animation: echoBreath1 180s ease-in-out infinite;
}
.wordmark .echo-2 {
  animation: echoBreath2 180s ease-in-out infinite;
}
@keyframes echoBreath1 {
  0%, 50% { transform: translateY(0.85em); opacity: 1; }
  50.36% { transform: translateY(0.02em); opacity: 0.5; }
  50.62% { transform: translateY(0.02em); opacity: 0.5; }
  51.3% { transform: translateY(0.95em); opacity: 1; }
  51.7%, 100% { transform: translateY(0.85em); }
}
@keyframes echoBreath2 {
  0%, 50.08% { transform: translateY(1.7em); opacity: 1; }
  50.44% { transform: translateY(0.04em); opacity: 0.35; }
  50.7% { transform: translateY(0.04em); opacity: 0.35; }
  51.38% { transform: translateY(1.85em); opacity: 1; }
  51.78%, 100% { transform: translateY(1.7em); }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark .echo-1, .wordmark .echo-2 { animation: none; }
}

/* ===== Beat deal recoup slider ===== */
.deal-slider input[type="range"] {
  width: 100%;
  accent-color: var(--amber);
  cursor: pointer;
}

/* ===== Royalties process map ===== */
.pmap { margin-top: 8px; }
.pmap-phase {
  border: 1px solid #3a322a;
  border-radius: 14px;
  padding: 18px 18px 16px;
  background: rgba(21, 17, 13, 0.55);
}
.pmap-phase-label {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--amber);
  margin: 0 0 12px;
}
.pmap-start {
  text-align: center;
  border-style: dashed;
}
.pmap-start p { margin: 0; line-height: 1.7; }
.pmap-arrow {
  width: 2px;
  height: 30px;
  background: #3a322a;
  margin: 0 auto;
  position: relative;
}
.pmap-arrow::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #3a322a;
}
.pmap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) { .pmap-grid { grid-template-columns: 1fr; } }
.pmap-node {
  background: #15110d;
  border: 1px solid #3a322a;
  border-left: 3px solid var(--node, var(--amber));
  border-radius: 10px;
  padding: 14px 16px;
}
.pmap-node h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #f2e9d8;
  margin: 0 0 6px;
}
.pmap-node p {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 12.5px;
  line-height: 1.65;
  color: #cfc3ab;
  margin: 0;
  text-indent: 0;
}
.pmap-node p a { color: var(--amber); }
.pmap-node .pmap-warn { color: var(--node, var(--amber)); display: block; margin-top: 6px; }
.pmap-steps { list-style: none; counter-reset: pstep; padding: 0; margin: 0; }
.pmap-steps li {
  counter-increment: pstep;
  position: relative;
  padding: 10px 0 10px 44px;
  border-bottom: 1px solid #221c15;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cream-dim);
}
.pmap-steps li:last-child { border-bottom: none; }
.pmap-steps li::before {
  content: counter(pstep);
  position: absolute;
  left: 0;
  top: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--amber);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 13px;
  color: var(--amber);
}
.pmap-rule {
  border: 1px dashed var(--amber);
  border-radius: 12px;
  padding: 14px 18px;
  text-align: center;
}
.pmap-rule p {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--amber);
  margin: 0;
  text-indent: 0;
}
.pmap-pay {
  border: 1px solid #3a322a;
  border-top: 4px solid;
  border-image: linear-gradient(90deg, #2fe5a7, #46f163, #aaf03c, #f8ec1c, #f7a21b, #f76b3f) 1;
  border-radius: 0 0 12px 12px;
  padding: 16px 18px;
  text-align: center;
}
.pmap-pay p { margin: 0; line-height: 1.7; text-indent: 0; }

/* ===== Royalties FAQ accordion ===== */
.faq { border-bottom: 1px solid #221c15; }
.faq:first-of-type { border-top: 1px solid #221c15; }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 4px;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 0.98rem;
  color: #f2e9d8;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: '';
  flex: none;
  width: 0;
  height: 0;
  border-left: 9px solid var(--amber);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(1px);
  transition: transform 0.25s ease;
}
.faq[open] summary::before { transform: translateY(1px) rotate(90deg); }
.faq summary:hover { background: rgba(247, 162, 27, 0.04); }
.faq-a { padding: 0 4px 18px 25px; }
.faq-a p {
  text-indent: 0;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--cream-dim);
}
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--amber); }

/* ===== Free Game filter chips ===== */
.fg-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 4px; }
.fg-chip {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size: 12.5px; letter-spacing: 0.06em;
  padding: 8px 16px; border-radius: 999px; border: 1px solid #3a322a;
  background: transparent; color: #cfc3ab; cursor: pointer; transition: all 0.15s ease;
}
.fg-chip:hover { border-color: #f7a21b; color: #f2e9d8; }
.fg-chip[aria-pressed="true"] { background: #f7a21b; border-color: #f7a21b; color: #1b1209; font-weight: 700; }
.fg-desc { font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size: 13px; color: #cfc3ab; margin: 10px 0 16px; min-height: 1.2em; }
.resource-card.fg-hidden { display: none; }

/* ===== Home page: all lowercase ===== */
body.lower * { text-transform: lowercase !important; }

/* ===== Services: four columns ===== */
.svc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 28px; border-top: 1px solid #221c15; padding-top: 28px; margin-top: 10px; }
.svc-col { display: flex; flex-direction: column; }
.svc-label { font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size: 12px; letter-spacing: 0.16em; color: #f7a21b; margin: 0 0 10px; }
.svc-hook { font-size: 1.25em; font-weight: 900; color: var(--cream); line-height: 1.3; margin: 0 0 18px; }
.svc-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.svc-foot .cta { text-align: center; }
.svc-more { font-size: 12.5px; text-align: center; }
@media (max-width: 460px) {
  .svc-cols { grid-template-columns: 1fr; gap: 0; }
  .svc-col { border-top: 1px solid #221c15; padding: 24px 0; }
  .svc-col:first-child { border-top: none; }
}

@media (min-width: 461px) and (max-width: 559px) {
  /* 2-up grid: center the odd-one-out (Production Sound) instead of leaving it orphaned at left */
  .svc-col:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 14px); justify-self: center; }
}

main.terms.svc-wide { max-width: 1040px; }

/* ===== Booking modal ===== */
.book-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; z-index: 1000; overflow-y: auto; }
.book-overlay.open { display: block; }
.book-card { background: #15110d; border: 1px solid #3a322a; border-radius: 16px; max-width: 580px; margin: 44px auto; padding: 30px 28px 28px; position: relative; }
.book-close { position: absolute; top: 14px; right: 18px; background: none; border: none; color: #cfc3ab; font-size: 24px; line-height: 1; cursor: pointer; }
.book-close:hover { color: #f7a21b; }
.book-card h2 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 1.35rem; margin: 0 0 4px; color: #f2e9d8; }
.book-card .sub { font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size: 12.5px; color: #cfc3ab; margin: 0 0 18px; }
.bk-label { font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size: 12px; letter-spacing: 0.12em; color: #f7a21b; margin: 18px 0 8px; display: block; }
.bk-input, .bk-select, .bk-textarea { width: 100%; background: #1a1510; border: 1px solid #3a322a; border-radius: 9px; color: #f2e9d8; font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size: 14px; padding: 12px; box-sizing: border-box; }
.bk-textarea { min-height: 86px; resize: vertical; }
.bk-input:focus, .bk-select:focus, .bk-textarea:focus { outline: none; border-color: #f7a21b; }
.bk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bk-grid.dur { grid-template-columns: repeat(4, 1fr); }
.bk-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bk-opt span { display: block; text-align: center; padding: 11px 6px; border: 1px solid #3a322a; border-radius: 9px; font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size: 13px; color: #cfc3ab; cursor: pointer; transition: all 0.12s; }
.bk-opt span:hover { border-color: #f7a21b; color: #f2e9d8; }
.bk-opt input:checked + span { background: #f7a21b; border-color: #f7a21b; color: #1b1209; font-weight: 700; }
.bk-submit { width: 100%; background: #f7a21b; color: #1b1209; border: none; border-radius: 10px; padding: 15px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 0.95rem; letter-spacing: 0.03em; cursor: pointer; margin-top: 24px; }
.bk-submit:hover { filter: brightness(1.06); }
.bk-success { text-align: center; padding: 30px 10px; }
.bk-success h2 { color: #f7a21b; }
.bk-warn { color: #f76b3f; font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size: 0.74rem; margin: 10px 2px 0; }
@media (max-width: 520px) { .bk-grid, .bk-grid.dur { grid-template-columns: repeat(2, 1fr); } }

/* ===== Support button (donate) — bright on the blog list, quiet on docs ===== */
.support-yellow {
  display: inline-block;
  background: #f7a21b; color: #1b1209;
  border-radius: 8px; padding: 13px 30px;
  font-family: "Archivo", sans-serif; font-weight: 900;
  font-size: 0.92rem; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer;
}
.support-yellow:hover { background: #ffb637; }
.support-quiet { text-align: center; margin: 30px 0 0; }
.support-quiet a {
  color: #8a8173; text-decoration: underline;
  font-size: 0.85rem; font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}
.support-quiet a:hover { color: #cfc3ab; }
.svc-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px 34px;margin-top:30px;}
@media(max-width:560px){.svc-buttons{grid-template-columns:1fr;gap:16px;}}
.svc-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:32px 0 0;max-width:760px;}
.svc-buttons .cta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border:1px solid #3d3d44;border-radius:10px;background:rgba(255,255,255,.012);color:var(--cream);text-decoration:none;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:.95rem;letter-spacing:.03em;line-height:1.1;transition:border-color 160ms ease,background 160ms ease,color 160ms ease;}
.svc-buttons .cta .arr{color:var(--amber);transition:transform 160ms ease;}
.svc-buttons .cta:hover{border-color:var(--amber);color:var(--amber);background:rgba(247,162,27,.06);}
.svc-buttons .cta:hover .arr{transform:translateX(3px);}
.svc-buttons .cta:last-child:nth-child(odd){grid-column:1 / -1;}
@media(max-width:560px){.svc-buttons{grid-template-columns:1fr;}.svc-buttons .cta:last-child:nth-child(odd){grid-column:auto;}}
.svc-circle{position:relative;width:min(520px,86vw);aspect-ratio:1/1;margin:24px auto 0;}
.circ{position:absolute;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid #3d3d44;background:rgba(255,255,255,.015);color:var(--cream);text-decoration:none;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:.78rem;letter-spacing:.02em;line-height:1.25;padding:8px;transition:border-color 160ms ease,background 160ms ease,color 160ms ease;}
.circ:hover{border-color:var(--amber);color:var(--amber);background:rgba(247,162,27,.07);}
.circ--center{width:136px;height:136px;border-color:var(--amber);color:var(--amber);background:rgba(247,162,27,.09);font-weight:600;}
.circ--center:hover{background:rgba(247,162,27,.17);}
/* bigger ring */
.svc-circle{width:min(600px,90vw);}
@media (pointer:coarse){
  /* petal size = min(height law, width law): the width term caps petals at
     what the arcs can geometrically clear inside the viewport (July 8) */
  #services .circ:not(.circ--suite):not(.circ--center){height:min(24%,27.4cqw)!important;}
  #services .circ--center{height:min(27%,30.8cqw)!important;}
}
@media (max-width:380px) and (pointer:coarse){.svc-circle{width:96vw;}}
/* very narrow phones: give the flower breathing room so the derived arcs
   can clear every petal within the viewport cap (July 8, 2026) */
@media (max-width:380px) and (pointer:coarse){.svc-circle{width:96vw;}}
.circ{width:152px;height:152px;font-size:.94rem;padding:10px;line-height:1.3;letter-spacing:.01em;}
.circ--center{width:174px;height:174px;font-size:1.02rem;}
/* center the title over the ring */
body.svc-page h1.wordmark{text-align:center;}
.home-nav{display:flex;gap:14px;justify-content:center;margin:34px auto 4px;}
.home-nav .cta{display:inline-flex;align-items:center;padding:12px 30px;border:1px solid #3d3d44;border-radius:999px;color:var(--cream);text-decoration:none;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:.92rem;letter-spacing:.04em;transition:border-color 160ms ease,color 160ms ease,background 160ms ease;}
.home-nav .cta:hover{border-color:var(--amber);color:var(--amber);background:rgba(247,162,27,.06);}
.svc-circle-label{text-align:center;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--cream-dim);margin:36px 0 0;}
/* two-screen homepage */
html{scroll-behavior:smooth;}
body.lower main{display:block;}
.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:46px 20px;}
.work-btn{margin-top:42px;display:inline-flex;align-items:center;gap:12px;padding:20px 50px;border:1px solid var(--amber);border-radius:999px;background:rgba(247,162,27,.08);color:var(--amber);font-family:"Archivo","Archivo Black",sans-serif;font-weight:900;font-size:1.35rem;text-decoration:none;transition:background .16s ease,transform .16s ease;}
.work-btn:hover{background:rgba(247,162,27,.18);}
.work-btn .wb-arr{font-size:1.1rem;transition:transform .16s ease;}
.work-btn:hover .wb-arr{transform:translateY(3px);}
.home-btn{position:absolute;top:28px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border:1px solid #3d3d44;border-radius:999px;color:#8f8a80;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;background:rgba(11,11,12,.55);backdrop-filter:blur(6px);transition:border-color .16s ease,color .16s ease;}
.home-btn:hover{border-color:var(--amber);color:var(--amber);}

/* top: logo + radio restored to original (full wordmark, top-aligned) */
body.lower #top{min-height:auto;justify-content:flex-start;padding:14px 20px 34px;}
/* top section uses the LIVE main layout so the radio renders identically (wide, not squished) */
body.lower #top{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:auto;padding:0 24px 34px;}
body.lower #top .home-nav,body.lower #top .work-btn{align-self:center;}
/* no-scroll homepage: services swaps in as an overlay; radio keeps playing behind */
html:has(body.lower),body.lower{overflow:hidden;height:100%;}
body.lower #services{position:fixed;inset:0;z-index:60;background:#0b0b0c;opacity:0;pointer-events:none;transition:opacity .3s ease;min-height:0;padding:0;justify-content:center;}
body.lower #services.is-shown{opacity:1;pointer-events:auto;}
body.lower #services .icons{position:absolute;top:14px;left:50%;transform:translateX(-50%);margin:0;}
body.lower #services .home-btn{position:absolute;top:auto;bottom:44px;left:50%;transform:translateX(-50%);}
/* home button = the work-with-me button */
.home-btn{display:inline-flex;align-items:center;gap:12px;padding:20px 50px;border:1px solid var(--amber);border-radius:999px;background:rgba(247,162,27,.08);color:var(--amber);font-family:"Archivo","Archivo Black",sans-serif;font-weight:900;font-size:1.35rem;text-decoration:none;transition:background .16s ease;}
.home-btn:hover{background:rgba(247,162,27,.18);border-color:var(--amber);}
/* --- quick-scroll between two screens (replaces the fade overlay) --- */
body.lower main{height:100vh;overflow:hidden;}
body.lower .screen{height:100vh;min-height:0;}
body.lower #services{position:relative;inset:auto;opacity:1;pointer-events:auto;z-index:auto;background:transparent;}
/* wider buttons */
.work-btn,.home-btn{padding:22px 90px;}
.home-nav .cta{padding:14px 48px;}
/* fixed footer on both screens (EPK gone, privacy off the bottom edge) */
body.lower footer{position:fixed;left:0;right:0;bottom:0;z-index:55;margin:0;padding:15px 20px 24px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;background:linear-gradient(to top,rgba(11,11,12,.96) 55%,transparent);}
body.lower #services .home-btn{bottom:86px;}
body.lower #top{padding-bottom:78px;}
/* circle scales as one unit so it survives zoom */
.svc-circle{container-type:size;}
.circ{width:25%;height:25%;font-size:2.3cqw;}
.circ--center{width:29%;height:29%;font-size:2.5cqw;}
@media(max-width:600px){.circ{font-size:3.3cqw;}.circ--center{font-size:3.6cqw;}}
/* icons wrap instead of overflowing */
body.lower #services .icons{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 20px;max-width:min(540px,86vw);width:max-content;}
/* services screen: smaller circle so the home button + footer have room */
body.lower #services .svc-circle{width:min(480px,74vw);}
body.lower #services .home-btn{bottom:120px;z-index:60;}
body.lower footer{padding:12px 20px 20px;font-size:.7rem;}
/* ===================== ROBUST HOMEPAGE LAYOUT ===================== */
html:has(body.lower),body.lower{height:100%;overflow:hidden;}
body.lower main{height:100vh;overflow:hidden;display:block;}
body.lower .screen{height:100vh;width:100%;margin:0;}
/* HOME (radio) screen, content centered + scaled to fit */
body.lower #top{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px 24px 92px;min-height:0;}
body.lower #top .eyebrow{margin:0;}
body.lower #top .wordmark{font-size:clamp(32px,4.4vw,58px);margin:0;}
body.lower #top .wordmark[data-text]{margin-bottom:1.35em;}
body.lower #top .radio{margin:0;width:100%;align-self:stretch;}
body.lower #top .home-nav,body.lower #top .work-btn{margin:0;align-self:center;}
/* SERVICES screen, flex flow so nothing overlaps */
body.lower #services{position:relative;inset:auto;opacity:1;pointer-events:auto;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100vh;padding:30px 20px 92px;}
body.lower #services .icons{position:static;transform:none;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:clamp(10px,1.6vw,20px);margin:0;max-width:none;width:auto;}
body.lower #services .icons a{font-size:clamp(.95rem,2vmin,1.3rem);}
body.lower #services .svc-circle{width:min(48vmin,440px);margin:0;flex:0 0 auto;}
body.lower #services .home-btn{position:static;transform:none;margin:0;bottom:auto;z-index:1;}
/* circle scales with the viewport (zoom-safe) */
.svc-circle{container-type:size;}
.circ{width:25%;height:25%;font-size:2.4cqw;}
.circ--center{width:29%;height:29%;font-size:2.6cqw;}
/* footer: centered, on both screens */
body.lower footer{position:fixed;left:0;right:0;bottom:0;z-index:55;margin:0;padding:12px 20px 18px;display:flex!important;flex-flow:row wrap;justify-content:center!important;align-items:center;text-align:center!important;gap:4px 16px;background:linear-gradient(to top,rgba(11,11,12,.97) 60%,transparent);}
body.lower footer .copyright{flex-basis:100%;}
.work-btn,.home-btn{padding:20px 78px;}
.home-nav .cta{padding:14px 48px;}
/* footer: full width so the centered content actually centers */
body.lower footer{max-width:none!important;width:auto!important;margin:0!important;justify-content:center!important;}
/* home: logo up at top, work-with-me anchored low (fills tall screens) */
body.lower #top{justify-content:flex-start;padding-top:6vh;gap:18px;}
body.lower #top .work-btn{margin-top:auto;margin-bottom:8px;}
/* home: keep the logo+radio+buttons as one tight block near the top */
body.lower #top{justify-content:flex-start;padding-top:clamp(36px,7vh,120px);gap:20px;}
body.lower #top .work-btn{margin-top:8px!important;margin-bottom:0;}
/* ===== LOGO + RADIO restored to LIVE exactly ===== */
body.lower #top{max-width:760px!important;margin:0 auto!important;padding:8px 24px 92px!important;display:flex;flex-direction:column;align-items:stretch!important;justify-content:flex-start;gap:0!important;}
body.lower #top .wordmark{font-size:clamp(44px,9vw,84px)!important;margin:14px 0 10px!important;letter-spacing:-.02em!important;}
body.lower #top .wordmark[data-text]{margin-bottom:1.9em!important;}
body.lower #top .radio{margin:38px 0 0!important;width:100%!important;align-self:stretch!important;}
body.lower #top .home-nav{align-self:center;margin-top:30px;}
body.lower #top .work-btn{align-self:center;margin-top:24px!important;}
/* ===== float the primary button just above the footer (overlap-proof) ===== */
body.lower .screen{position:relative;}
body.lower #top .work-btn,body.lower #services .home-btn{position:absolute!important;left:50%!important;bottom:88px!important;transform:translateX(-50%)!important;margin:0!important;z-index:54;}
body.lower #top{padding-bottom:200px!important;}
body.lower #services{justify-content:flex-start!important;padding:40px 20px 200px!important;}
body.lower #services .svc-circle{margin:auto 0!important;}
/* compact footer so it can't grow into the button */
body.lower footer{padding:10px 20px 14px!important;font-size:.66rem!important;gap:2px 14px!important;line-height:1.45;}
/* radio keeps its live aspect (flex was compressing it) */
body.lower #top .radio{flex:0 0 auto!important;}
/* fixed bottom dock: button sits a FIXED gap above the footer, always */
#dock{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;flex-direction:column;align-items:center;pointer-events:none;}
#dock>*{pointer-events:auto;}
#dock .work-btn,#dock .home-btn{position:static!important;transform:none!important;left:auto!important;right:auto!important;bottom:auto!important;margin:0 0 26px!important;}
#dock .home-btn{display:none;}
body.at-svc #dock .work-btn{display:none;}
body.at-svc #dock .home-btn{display:inline-flex;}
#dock footer{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;margin:0!important;}
body.lower #top{padding-bottom:172px!important;}
body.lower #services{padding-bottom:172px!important;}
/* #top must be the full live width so the radio fills 712 like live */
body.lower #top{width:min(760px,100%)!important;max-width:none!important;}
/* kill the double padding so the radio is full 712 wide like live */
body.lower #top{padding-left:0!important;padding-right:0!important;}
/* remove the hairline border-top on the screens (the grey line under the color strip) */
body.lower #top,body.lower #services,body.lower .screen{border-top:0!important;}
body.lower #top,body.lower #services,body.lower .screen,body.lower main{border-top:0!important;border-bottom:0!important;}
/* shift the logo + radio block up a little */
body.lower #top{padding-top:0!important;}
body.lower #top .wordmark{margin-top:4px!important;}
/* services screen: bigger circle, bigger labels, bigger icons */
body.lower #services .svc-circle{width:min(76vmin,720px)!important;}
.circ{font-size:3.4cqw!important;}
.circ--center{font-size:3.6cqw!important;}
body.lower #services .icons a{font-size:clamp(1.5rem,2.8vmin,2.2rem)!important;}
body.lower #services .icons{gap:clamp(16px,2.2vw,30px)!important;}
/* social icons between the logo and the radio on the home screen */
body.lower #top .icons{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:clamp(16px,2.2vw,30px);margin:22px 0 26px;width:100%;}
body.lower #top .icons a{font-size:clamp(1.3rem,2.3vmin,1.85rem);}
/* bigger social icons */
body.lower #services .icons a{font-size:clamp(1.8rem,3.2vmin,2.8rem)!important;}
body.lower #services .icons{gap:clamp(20px,2.6vw,38px)!important;}
/* icons 1.7x */
body.lower #services .icons a{font-size:clamp(3.05rem,5.45vmin,4.76rem)!important;}
body.lower #services .icons{gap:clamp(28px,3.4vw,52px)!important;}
/* tighten gap so all 10 big icons fit one row */
body.lower #services .icons{gap:clamp(8px,1.1vw,20px)!important;width:auto!important;max-width:none!important;overflow:visible!important;flex-wrap:nowrap!important;}
/* home: wider radio, centered, story/blog a fixed 26px below it */
body.lower main{max-width:none!important;width:100%!important;padding:0!important;}
body.lower #top{width:min(880px,94vw)!important;max-width:none!important;margin:0 auto!important;display:flex;flex-direction:column;align-items:stretch!important;justify-content:flex-start;}
body.lower #top .radio{width:100%!important;flex:0 0 auto!important;margin-top:auto!important;margin-bottom:0!important;}
body.lower #top .home-nav{margin-top:26px!important;margin-bottom:auto!important;align-self:center!important;}
/* radio bigger PROPORTIONALLY via zoom (keeps live aspect), still centered + 26px gap */
body.lower #top{width:min(940px,95vw)!important;}
body.lower #top .radio{width:712px!important;max-width:100%!important;align-self:center!important;zoom:1.24;}
/* precise logo placement: H-center (exclude TM), V-center incl echoes between stripe-bottom and radio-top */
body.lower #top .wordmark{position:absolute!important;left:50%!important;top:calc(25vh - 107px - 1.35em)!important;transform:translateX(-50%)!important;margin:0!important;width:max-content!important;}
body.lower #top .wordmark .tm{position:absolute!important;left:100%!important;top:0!important;margin-left:.04em;}
body.lower #top .radio{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;zoom:1.24;width:712px!important;max-width:90vw!important;}
body.lower #top .home-nav{position:absolute!important;left:50%!important;top:calc(50% + 244px)!important;transform:translateX(-50%)!important;margin:0!important;}
/* icons: spread out + shrink with page WIDTH (vw-based) */
body.lower #services .icons a{font-size:clamp(1.5rem,3.8vw,4.8rem)!important;}
body.lower #services .icons{gap:0!important;width:94vw!important;max-width:none!important;justify-content:space-between!important;}

/* ===== MOBILE (<=768px): the desktop two-screen design, sized to the phone ===== */
@media (max-width:768px) and (pointer:coarse){
  body.lower #top .radio{width:min(358px,92vw)!important;zoom:1!important;}
  body.lower #services .svc-circle{width:min(86vw,340px)!important;}
}
@media (max-width:768px) and (pointer:coarse){
  body.lower #top .wordmark{top:calc(25vh - 66px - 1.35em)!important;}
  body.lower #top .home-nav{top:calc(50% + 161px)!important;}
}
@media (max-width:768px) and (pointer:coarse){
  /* work-with-me / home: solid amber block resting on the footer */
  #dock .work-btn,#dock .home-btn{background:var(--amber)!important;color:var(--ink)!important;border:1px solid var(--amber)!important;width:min(420px,88vw)!important;padding:14px 0!important;border-radius:14px!important;font-weight:700!important;letter-spacing:.02em!important;margin:0 0 8px!important;box-shadow:none!important;text-align:center!important;}
  /* compact footer */
  #dock footer{display:flex!important;flex-direction:column!important;align-items:center!important;gap:2px!important;font-size:10px!important;line-height:1.4!important;padding:0 12px 12px!important;max-width:none!important;width:auto!important;margin:0!important;}
  #dock footer span,#dock footer a{font-size:10px!important;}
  #dock footer .copyright{font-size:9.5px!important;opacity:.75;}
}
@media (max-width:768px) and (pointer:coarse){#dock .work-btn,#dock .home-btn{display:flex!important;align-items:center!important;justify-content:center!important;}}
@media (max-width:768px) and (pointer:coarse){
  #dock .home-btn{display:none!important;}
  body.at-svc #dock .work-btn{display:none!important;}
  body.at-svc #dock .home-btn{display:flex!important;align-items:center!important;justify-content:center!important;}
}
@media (max-width:768px) and (pointer:coarse){
  /* footer block gone on mobile - keep only a tiny privacy link */
  #dock footer span{display:none!important;}
  #dock footer{display:flex!important;justify-content:center!important;padding:0 0 9px!important;gap:0!important;min-height:0!important;}
  #dock footer a{font-size:10px!important;opacity:.5!important;text-transform:lowercase!important;}
}
@media (max-width:768px) and (pointer:coarse){
  /* services circle: push to full width + use vertical space, bigger round circles */
  body.lower #services .svc-circle{width:96vw!important;max-width:none!important;aspect-ratio:auto!important;height:min(56vh,480px)!important;margin:auto!important;}
  .circ{width:auto!important;height:25%!important;aspect-ratio:1!important;font-size:12px!important;line-height:1.18!important;padding:6px!important;}
  .circ--center{width:auto!important;height:28%!important;aspect-ratio:1!important;font-size:12.5px!important;}
  /* social icons: two rows of five, bigger */
  body.lower #services .icons{flex-wrap:wrap!important;max-width:min(92vw,400px)!important;margin:0 auto 6px!important;justify-content:center!important;align-items:center!important;row-gap:16px!important;column-gap:0!important;}
  body.lower #services .icons a{flex:0 0 20%!important;text-align:center!important;font-size:34px!important;}
}
@media (max-width:768px) and (pointer:coarse){
  /* let the circle actually center: no side padding squeezing it */
  body.lower #services{padding-left:0!important;padding-right:0!important;}
  body.lower #services .svc-circle{width:96vw!important;margin-left:auto!important;margin-right:auto!important;}
  .circ{height:24%!important;}
  .circ--center{height:27%!important;}
}
@media (max-width:768px) and (pointer:coarse){
  /* icons: closer to the strip, full width, even spacing (edge gap == inter-icon gap) */
  body.lower #services{padding-top:10px!important;}
  body.lower #services .icons{display:grid!important;grid-template-columns:repeat(5,auto)!important;justify-content:space-evenly!important;align-items:center!important;width:100%!important;max-width:none!important;margin:0 0 6px!important;row-gap:18px!important;column-gap:0!important;padding:24px 6px 0!important;}
  body.lower #services .icons a{flex:none!important;font-size:34px!important;text-align:center!important;}
}
@media (max-width:768px) and (pointer:coarse){
  /* in-app browsers (Instagram/FB) have a chunky header: drop the icons + circle down a touch */
  html.inapp body.lower #services{padding-top:46px!important;}
}

.film-role{display:block;font-size:.82em;color:var(--cream-dim);letter-spacing:.02em;margin:1px 0 6px;}

.film-title{color:#fff;}

.story-foot{display:flex;justify-content:center;gap:14px;align-items:center;width:100%;max-width:var(--maxw);margin:28px auto 0;padding:0 22px;}
.sfoot-btn{font-family:"Archivo",sans-serif;font-weight:900;font-size:.8rem;letter-spacing:.06em;text-transform:lowercase;padding:12px 22px;border-radius:10px;border:1px solid var(--hairline);color:var(--cream);transition:border-color .15s ease,color .15s ease,background .15s ease;}
.sfoot-btn:hover{border-color:var(--amber);color:var(--amber);}
.sfoot-contact{background:var(--amber);color:#1b1209;border-color:var(--amber);}
.sfoot-contact:hover{color:#1b1209;background:#ffb43a;}

.credits-foot{padding-top:14px;padding-bottom:8px;}

.pmap-stage{border-left:3px solid var(--node,var(--amber));}
.pmap-stage h3{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.15rem;letter-spacing:.01em;color:#f2e9d8;margin:0 0 5px;}
.pmap-stage p{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:12.5px;line-height:1.6;color:#cfc3ab;margin:0;text-indent:0;}

/* ===== 2026-07-04 cross-device viewport stabilization =====
   Mobile browser bars change what 100vh means (story/blog fell below the fold on
   iPhones with the bar visible). svh/dvh are the units built for this; @supports
   leaves old browsers exactly as they were. */
@supports (min-height: 100svh){
  .screen{min-height:100svh;}
}
@supports (height: 100dvh){
  body.lower main{height:100dvh;}
  body.lower .screen{height:100dvh;}
  body.lower #services{height:100dvh;}
  body.lower #top .wordmark{top:max(8px, calc(25dvh - 107px - 1.35em))!important;}
}
@media (max-width:768px) and (pointer:coarse){
  @supports (height: 100dvh){
    body.lower #top .wordmark{top:max(8px, calc(25dvh - 66px - 1.35em))!important;}
  }
}

/* Short desktop windows: shrink the radio and lift the pills so nothing collides
   with the fixed bottom dock (verified collision at 1440x900). */



/* Landscape phones / very short screens: the absolute layout cannot fit 400px of
   height, so fall back to normal document flow with scrolling. */
@media (max-height:520px){
  body.lower main{height:auto!important;min-height:100vh;overflow:auto!important;display:block!important;}
  body.lower .screen{height:auto!important;min-height:0!important;}
  body.lower #top .wordmark{position:relative!important;left:auto!important;top:auto!important;transform:none!important;margin:16px auto 4px!important;width:max-content!important;max-width:92vw!important;}
  body.lower #top .radio{position:relative!important;left:auto!important;top:auto!important;transform:none!important;margin:12px auto!important;zoom:1!important;width:min(90vw,540px)!important;}
  body.lower #top .home-nav{position:relative!important;left:auto!important;top:auto!important;transform:none!important;margin:14px auto 90px!important;}
  #dock{position:static!important;}
}

/* v2 tuning after measurement pass */


@media (pointer:coarse) and (max-width:768px) and (max-height:620px) and (min-height:521px){
  body.lower #top .radio{zoom:.78!important;width:min(340px,86vw)!important;}
  body.lower #top .home-nav{top:calc(50% + 124px)!important;}
  body.lower #top .wordmark{transform:translateX(-50%) scale(.78)!important;transform-origin:top center;}
}
@media (max-height:520px){
  html,body{height:auto!important;overflow:auto!important;}
  body.lower main{height:auto!important;overflow:visible!important;}
}

/* v3: in landscape flow mode, collapse whichever screen is inactive so the page
   doesn't carry an invisible 700px hole and the dock lands right after content. */
@media (max-height:520px){
  body.lower:not(.at-svc) #services{display:none!important;}
  body.lower.at-svc #top{display:none!important;}
}

/* Wordmark under extreme zoom / tiny widths: never wrap — scale down instead.
   The echo copies are single-line absolute clones, so a wrapped solid breaks them. */
.wordmark{white-space:nowrap;}
@media (max-width:345px){
  .wordmark{font-size:12.3vw;}
  body.lower #top .wordmark{font-size:12.3vw!important;}
}

/* Desktop-width but short (deep zoom, tiled windows): compact the dock, add a
   tighter locked tier, and below 640px of height use the scrolling flow layout. */
@media (pointer:fine) and (max-height:820px){
  #dock .work-btn{margin:0 0 10px!important;padding:10px 22px!important;}
  #dock footer{font-size:10.5px!important;line-height:1.35!important;}
  #dock footer .copyright{font-size:9.5px!important;}
}



/* Continuous auto-fit (replaces the stepped tiers): the whole composition scales
   smoothly with window height via --fit (set by a tiny script in index.html).
   --fit=1 on tall windows; old browsers without the script fall back to 1. */


/* ===== v5 FLOW LAYOUT (2026-07-04) =====
   Desktop/fine-pointer homepage is normal document flow: logo, radio, pills in a
   centered column, dock at the end. No coordinate math, so nothing can overlap at
   any window size or zoom; when space runs out the page scrolls, like any site.
   Touch devices are untouched (coarse pointer keeps the tuned phone layout). */
@media (pointer:fine){
  html,body{height:auto!important;overflow:auto!important;}
  body.lower{display:flex!important;flex-direction:column!important;min-height:100vh;min-height:100dvh;}
  body.lower main{height:auto!important;min-height:0!important;flex:1 0 auto!important;overflow:visible!important;display:flex!important;flex-direction:column!important;max-width:none!important;width:100%!important;padding:0!important;}
  body.lower .screen{height:auto!important;min-height:0!important;}
  body.lower #top{position:static!important;transform:none!important;width:100%!important;max-width:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;flex:1 0 auto!important;padding:28px 20px 14px!important;margin:0!important;}
  body.lower #top .wordmark{position:relative!important;left:auto!important;top:auto!important;transform:none!important;margin:0 auto!important;margin-bottom:1.9em!important;width:max-content!important;max-width:92vw!important;}
  body.lower #top .radio{position:relative!important;left:auto!important;top:auto!important;transform:none!important;margin:clamp(6px,2.5vh,30px) auto 0!important;width:712px!important;max-width:none!important;zoom:calc(1.24*var(--fit,1))!important;}
  body.lower #top .wordmark{font-size:calc(clamp(44px,9vw,84px)*var(--fit,1))!important;}
  body.lower #top .home-nav{position:relative!important;left:auto!important;top:auto!important;transform:none!important;margin:26px auto 0!important;}
  #dock{position:static!important;margin-top:0!important;padding-top:16px;}
  body.lower:not(.at-svc) #services{display:none!important;}
  body.lower.at-svc #top{display:none!important;}
  body.lower.at-svc #services{position:static!important;inset:auto!important;opacity:1!important;pointer-events:auto!important;background:transparent!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;height:auto!important;min-height:0!important;flex:1 0 auto!important;padding:26px 20px 14px!important;}
  /* the web scales with TEXT (em) so labels can never escape their circles;
     screen units only cap it so it always fits the window */
  body.lower.at-svc #services .svc-circle{width:min(45em,94vw,calc(100vh - 330px))!important;margin:1.2em auto 0!important;flex:0 0 auto!important;}
  body.lower.at-svc #services .icons a{font-size:clamp(1.7rem,4.6vw,4.8rem)!important;}
  body.lower.at-svc #services .circ{width:10.1em!important;height:10.1em!important;}
  body.lower.at-svc #services .circ.circ--center{width:10.7em!important;height:10.7em!important;}
  body.lower.at-svc #services .icons{flex-wrap:wrap!important;justify-content:center!important;row-gap:10px!important;}
}

/* "Change the station" transition between the radio and services screens.
   View Transitions API; browsers without it keep the instant swap. */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){animation:pm-tune-out .3s cubic-bezier(.4,0,.2,1) both;}
  ::view-transition-new(root){animation:pm-tune-in .44s cubic-bezier(.16,1,.3,1) both;}
  html.pm-back::view-transition-old(root){animation-name:pm-tune-out-back;}
  html.pm-back::view-transition-new(root){animation-name:pm-tune-in-back;}
}
@keyframes pm-tune-out{to{opacity:0;transform:translateY(-3.5vh) scale(.985);filter:blur(7px) brightness(1.3);}}
@keyframes pm-tune-in{from{opacity:0;transform:translateY(4.5vh) scale(.99);filter:blur(9px) brightness(1.15);}to{opacity:1;transform:none;filter:none;}}
@keyframes pm-tune-out-back{to{opacity:0;transform:translateY(3.5vh) scale(.985);filter:blur(7px) brightness(1.3);}}
@keyframes pm-tune-in-back{from{opacity:0;transform:translateY(-4.5vh) scale(.99);filter:blur(9px) brightness(1.15);}to{opacity:1;transform:none;filter:none;}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none!important;}
}

/* Services entrance choreography: icons lock in left-to-right like signal bars,
   then the web blooms — amber core first with a glow pulse, satellites pop in
   around the ring. Individual scale/translate channels only, so the circles'
   transform-based positioning is never touched. Desktop + motion-ok only. */
@media (prefers-reduced-motion: no-preference){
  body.at-svc #services .icons a{opacity:0;translate:0 10px;scale:.55;animation:pm-icon-in .38s cubic-bezier(.2,.9,.3,1.35) forwards;}
  body.at-svc #services .icons a:nth-child(1){animation-delay:.10s}
  body.at-svc #services .icons a:nth-child(2){animation-delay:.14s}
  body.at-svc #services .icons a:nth-child(3){animation-delay:.18s}
  body.at-svc #services .icons a:nth-child(4){animation-delay:.22s}
  body.at-svc #services .icons a:nth-child(5){animation-delay:.26s}
  body.at-svc #services .icons a:nth-child(6){animation-delay:.30s}
  body.at-svc #services .icons a:nth-child(7){animation-delay:.34s}
  body.at-svc #services .icons a:nth-child(8){animation-delay:.38s}
  body.at-svc #services .icons a:nth-child(9){animation-delay:.42s}
  body.at-svc #services .icons a:nth-child(10){animation-delay:.46s}
  body.at-svc #services .svc-circle{animation:pm-web-in .5s cubic-bezier(.16,1,.3,1) both;}
  body.at-svc #services .circ{opacity:0;scale:.35;animation:pm-node-in .42s cubic-bezier(.2,.9,.3,1.3) forwards;}
  body.at-svc #services .circ:nth-child(1){animation-delay:.42s}
  body.at-svc #services .circ:nth-child(2){animation-delay:.47s}
  body.at-svc #services .circ:nth-child(3){animation-delay:.52s}
  body.at-svc #services .circ:nth-child(4){animation-delay:.57s}
  body.at-svc #services .circ:nth-child(5){animation-delay:.62s}
  body.at-svc #services .circ:nth-child(6){animation-delay:.67s}
  body.at-svc #services .circ:nth-child(7){animation-delay:.72s}
  body.at-svc #services .circ.circ--center{animation:pm-core-in .55s cubic-bezier(.2,.9,.3,1.25) forwards;animation-delay:.22s;}
}
@keyframes pm-icon-in{to{opacity:1;translate:0 0;scale:1;}}
@keyframes pm-web-in{from{opacity:0;scale:.85;}to{opacity:1;scale:1;}}
@keyframes pm-node-in{to{opacity:1;scale:1;}}
@keyframes pm-core-in{0%{opacity:0;scale:.4;box-shadow:0 0 0 0 rgba(247,162,27,0);}55%{box-shadow:0 0 42px 6px rgba(247,162,27,.38);}100%{opacity:1;scale:1;box-shadow:0 0 0 0 rgba(247,162,27,0);}}

/* desktop radio: back-to-last-station button under the tune knob */
.back-btn{margin-top:7px;background:transparent;border:1px solid #3a322a;border-radius:8px;color:#b7ad9c;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:0.62rem;letter-spacing:.08em;padding:5px 12px;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.back-btn:hover{color:#f7a21b;border-color:#f7a21b}

/* phone services: don't let tall viewports (Safari full-screen) balloon the internal
   gaps — center the icons+web cluster with capped spacing so it keeps the same
   density as short webviews (Instagram in-app). */
@media (max-width:768px) and (pointer:coarse){
  body.lower #services{justify-content:center!important;gap:min(4.5vh,36px)!important;}
  body.lower #services .svc-circle{margin:0!important;}
  body.lower #services .icons{margin:0!important;}
}

/* content-page titles must wrap on phones — the nowrap above is for the homepage
   logo; unwrapped long titles (Post Production Sound) overflow narrow viewports. */
main.terms > .wordmark{white-space:normal!important}


/* connector arcs + suite circles: both viewports */
.svc-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.svc-arc{fill:none;stroke:rgba(234,228,216,.55);stroke-width:1.2}
.svc-spoke{fill:none;stroke:rgba(247,162,27,.75);stroke-width:.7;}
.circ--suite{border-color:rgba(247,162,27,.6)!important;color:var(--amber)!important;z-index:2}
.circ--suite:hover{border-color:var(--amber)!important;background:rgba(247,162,27,.08)}
@media (pointer:fine){
  .circ--suite{width:7.6em!important;height:7.6em!important;font-size:.9em}
  .suite-music{left:110.3%;top:96.9%}
  .suite-film{left:-16.9%;top:13.3%}
  .d-phone{display:none}
  body.at-svc #services .svc-links,body.at-svc #services .circ--suite{opacity:0;animation:pm-node-in .5s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.78s}
  @media (prefers-reduced-motion: reduce){body.at-svc #services .svc-links,body.at-svc #services .circ--suite{opacity:1;animation:none}}
}
@media (pointer:coarse){
  .circ--suite{width:24vw!important;height:24vw!important;max-width:120px;max-height:120px;font-size:12px!important;line-height:1.15!important;padding:6px!important}
  .suite-music{left:86.4%!important;top:100.5%!important}
  .suite-film{left:8.8%!important;top:3.2%!important}
  .d-desk{display:none}
}

/* desktop icons: full-width strip near the top (final override, July 7 2026) */
@media (pointer:fine){
  body.lower #services .icons,
  body.lower.at-svc #services .icons{position:absolute!important;top:14px!important;left:50%!important;transform:translateX(-50%)!important;display:flex!important;flex-wrap:nowrap!important;gap:0!important;width:94vw!important;max-width:none!important;justify-content:space-between!important;align-items:center!important;margin:0!important;}
}

/* phone services web: breathing room + 95% scale, web eased down (staged July 7 2026) */
@media (pointer:coarse){
  body.lower #services .icons,
  body.lower.at-svc #services .icons{padding:30px 6px 0!important;}
  #services .svc-circle{margin-top:26px!important;}
  #services .svc-circle .circ{width:23.5%;height:23.5%}
  #services .svc-circle .circ--center{width:27.5%;height:27.5%}
  #services .circ--suite{width:18vw!important;height:18vw!important;max-width:88px!important;max-height:88px!important;font-size:.72em!important}
  #services .svc-circle .circ[href="store.html#kits"]{left:50.0%!important;top:16.5%!important}
  #services .svc-circle .circ[href="store.html"]{left:76.2%!important;top:29.1%!important}
  #services .svc-circle .circ[href="custom-beat-license.html"]{left:82.7%!important;top:57.4%!important}
  #services .svc-circle .circ[href="#book"]{left:64.5%!important;top:80.2%!important}
  #services .svc-circle .circ[href="https://engineears.com/prodmason"]{left:35.5%!important;top:80.2%!important}
  #services .svc-circle .circ[href="post-sound-agreement.html"]{left:17.3%!important;top:57.4%!important}
  #services .svc-circle .circ[href="production-sound-agreement.html"]{left:23.8%!important;top:29.1%!important}
}

/* Derivation over Decoration: home screen phi pass (desktop), July 2026.
   One master measurement (the wordmark size); everything below derives from it
   by whole powers of phi, with the formulas living in the CSS itself. */
@supports (width: calc(pow(2, 2) * 1px)) {
  @media (pointer: fine) {
    :root{
      --phi: calc((1 + sqrt(5)) / 2);
      --home-main: clamp(44px, 9vw, 84px);
    }
    .wordmark{ font-size: var(--home-main); }
    body.lower #top .work-btn, .work-btn{
      font-size: calc(var(--home-main) / pow(var(--phi), 3));
      padding: calc(var(--home-main) / pow(var(--phi), 3)) var(--home-main);
    }
    body.lower #top .home-nav .cta, .home-nav .cta{
      font-size: calc(var(--home-main) / pow(var(--phi), 4));
    }
    body.lower #top .home-nav, .home-nav{
      gap: calc(var(--home-main) / pow(var(--phi), 4));
    }
    /* vertical rhythm: logo floats one main below the strip; radio one phi^-2 below the echoes */
    body.lower #top .wordmark{ margin-top: 0 !important; }
    body.lower #top{ padding-top: calc(var(--home-main) / pow(var(--phi), 3)) !important; }
    body.lower #top .radio{ margin-top: calc(var(--home-main) / pow(var(--phi), 2)) !important; }
    /* footer cluster: one phi step, unified */
    .copyright, footer .copyright,
    footer span, footer a, .back-btn{
      font-size: calc(var(--home-main) / pow(var(--phi), 4));
    }
  }
}

/* The color strip, derived (July 2026): six spectrum segments partition the strip by
   whole powers of phi, summing to exactly 1 (phi^-2 + phi^-4 + phi^-6 + phi^-7 = phi^-1,
   and phi^-1 + phi^-3 + phi^-4 = 1). The amber segment begins exactly at the golden
   section of the band. Strip height = main / phi^6. */
@supports (width: calc(pow(2, 2) * 1px)) {
  :root{
    --phi: calc((1 + sqrt(5)) / 2);
    --main: 84px;
    --spectrum: linear-gradient(90deg,
      #2fe5a7 0%,
      #46f163 calc(100% / pow(var(--phi), 2)),
      #aaf03c calc(100% / pow(var(--phi), 2) + 100% / pow(var(--phi), 4)),
      #f8ec1c calc(100% / pow(var(--phi), 2) + 100% / pow(var(--phi), 4) + 100% / pow(var(--phi), 6)),
      #f7a21b calc(100% / pow(var(--phi), 1)),
      #f76b3f calc(100% / pow(var(--phi), 1) + 100% / pow(var(--phi), 3)));
  }
  body::before{ height: calc(var(--main) / pow(var(--phi), 6)); }
  /* the tuning marker: a cream notch riding the band, width = strip height x phi */
  #bandMarker{
    position: fixed;
    top: 0;
    height: calc(var(--main) / pow(var(--phi), 6));
    width: calc(var(--main) / pow(var(--phi), 6) * var(--phi));
    background: var(--cream);
    box-shadow: 0 0 6px rgba(234,228,216,.9);
    z-index: 11;
    transform: translateX(-50%);
    transition: left .25s ease;
    pointer-events: none;
  }
}

/* ── THE DERIVED DESIGN (Mason, July 14 2026) ───────────────────────────────────────────
   Every number below is a constant the design already declared - nothing measured, no
   screenshots, no decimals invented here:
     ring     = min(720px, 94vw, 100vh - 330px)   the design's own cap (45em @ 16px root
                                                   = 720px, made font-independent)
     circle   = 25% of ring + 18px                the design's width:25% rule plus its
                                                   own 8px padding + 1px border per side
     text     = circle / 10.1                     the design's em law ("the web scales
                                                   with TEXT", width:10.1em inverted)
     centre   = circle x 136/120                  the design's centre:petal ratio
     ctr text = text x 3.6/3.4                    the design's centre font ratio
     suites   = circle                            equal at the reference, by design
   THE THEOREM (provable from the position table, no browser needed): neighbouring
   centres sit 31.1955% of the ring apart; the circle fraction 25% + 18px/ring reaches
   at most 30.62% at the smallest legal ring (320px). Circles can NEVER overlap, in any
   engine, at any window, under any font setting - by arithmetic, not by testing.
   Fine-pointer only; phones keep the coarse branch. Rendering was used only to CHECK
   this derivation, never as its source. */
@media (pointer:fine){
  /* ── THE ICONS GUARD (Mason, July 14 2026) ────────────────────────────────────────────
     An invisible reserved band directly below the icons row. Height = the strip gap
     constant (14px - 84px/phi^6 = 9.14px) scaled by the icons' own size law
     (clamp(1.7rem, 4.6vw, 4.8rem) / 4.8rem), so it shrinks exactly as the icons shrink.
     icons-bottom = 14px top + row height (font x 1.09, the icon font's line box - a
     constant of the font itself, verified stable at every size).
     THE GUARANTEE: the wrap's top margin places the flower at icons-bottom + guard + 9px,
     and the topmost drawn circle sits at least (wrap top - 9px) for every legal ring
     (inset = 0.015 x ring - 9px >= -9px), so no circle can enter the band at ANY window
     shape - by construction. The ring's height law gains a matching term so the lowered
     flower still fits above the home button (330px was the old budget with an implicit
     71.5px top offset; the new term re-anchors it: 330 - 80.5 + 9 = 258.5). */
  :root{
    --svc-icon-scale-min: calc(1.7 / 4.8);
    --svc-guard-base: calc((14 - 84 / pow(var(--phi), 6)) * 1px);
    --svc-guard: clamp(calc((14 - 84 / pow(var(--phi), 6)) * 1.7px / 4.8),
                       calc((14 - 84 / pow(var(--phi), 6)) / 76.8 * 4.6vw),
                       calc((14 - 84 / pow(var(--phi), 6)) * 1px));
    --svc-icons-bottom: calc(84px / pow(var(--phi), 6) + var(--svc-guard) + clamp(1.7rem, 4.6vw, 4.8rem) * 1.09);
  }
  /* EQUALITY LAW (Mason): gap(strip -> icons top) == gap(icons bottom -> topmost circle)
     == the guard, at every window scale.
     - icons top = strip height + guard: equals the design's own 14px at full scale
       (84/phi^6 + 9.32 = 14), and both gaps scale together below it.
     - the flower's top: topCircle = wrapTop + (0.015 x ring - 9px)  [the exact petal
       inset, confirmed against renders to 0.1px], so the margin solves for equality
       EXACTLY instead of the old worst-case bound (which left the +22px slack he saw).
     - the ring's height term is the same equation solved for ring (the 0.985 = 1 - 0.015
       inset share); 258.5px = the design's 249.5px bottom budget + the 9px inset term. */
  /* THE TWO WALLS (Mason's correction: these are BORDERS the circle can never travel
     through - constraints, not spacing to fill). The flower keeps its NATURAL size laws
     (720px cap / 94vw / the design's 100vh - 330px budget). The last two min() terms are
     the walls, dormant until a window shape would push a circle into one:
       icons wall:  topmost circle stays >= one guard below the icons row
                    W <= (100vh - 258.5px - iconsB - guard) / 0.985
       home wall:   bottom circle stays >= one guard above the home button's own anchor
                    (home top >= 100vh - 184.2px by the dock's rules; 202.2 = 184.2 + 18)
                    W <= (100vh - 202.2px - iconsB - 2 x guard) / 0.934
     The home button itself is NEVER positioned by this system - it lives on its own
     dock rules, which is also what keeps it stable through any resize. */
  :root{
    /* the home button's NATIVE anchor (its own dock rules; the 7.4px step at 820px
       mirrors the design's own max-height:820 dock block): */
    --svc-home-top:calc(100vh - 184.3px);
    /* natural size laws + the channel cap: the flower may never exceed the space
       between the two borders (which also proves the centered placement below can
       never touch either wall - air = (channel - flower)/2 >= 0 by this cap): */
    --svc-ring:min(720px, 94vw, calc(100vh - 330px),
                   calc((var(--svc-home-top) - var(--svc-icons-bottom) - 2 * var(--svc-guard) - 18px) / 0.934));
  }
  @media (max-height:820px){
    :root{--svc-home-top:calc(100vh - 176.9px);}
  }
  /* positions become DEFINED, not negotiated: flex centering redistributes margins
     (measured: it halved the margin's effect), so the state pins to flex-start and the
     margin formula holds exactly. The icons law restated at the state's specificity. */
  body.lower.at-svc #services{justify-content:flex-start!important;}
  body.lower.at-svc #services .icons{top:calc(84px / pow(var(--phi), 6) + var(--svc-guard))!important;}
  /* home is anchored to ITS OWN window law - the design's measured natural position
     (100vh - 184.3px, stepping at the design's own 820px dock breakpoint). A pure
     function of the window: it cannot move on resize, and it decouples the channel from
     the flower (natively home is flow-coupled - the flower growing 26px pushed it down
     17.7px, which made "equidistant" circular). Not flower-coupled pinning: the formula
     contains nothing but the viewport. */
  body.lower.at-svc #dock .home-btn{
    position:fixed!important;top:var(--svc-home-top)!important;bottom:auto!important;
    left:50%!important;transform:translateX(-50%)!important;margin:0!important;
  }
  body.lower.at-svc #services .svc-circle{
    width:var(--svc-ring)!important;
    /* EQUIDISTANT (Mason): the flower floats centred between the two borders. Solving
       air-above == air-below for the wrap's margin, the guard cancels out entirely:
         margin = (iconsBottom + homeTop)/2 - 0.482 x ring - 26px
       (0.482 = drawnHeight/2 share 0.467 + top inset share 0.015; 26 = section pad) */
    margin-top:calc((var(--svc-icons-bottom) + var(--svc-home-top)) / 2 - 0.482 * var(--svc-ring) - 26px)!important;
  }
  /* the home dock rides the wrap's BOX bottom in flow (measured law: home top = wrap
     bottom + 30px), but the drawn flower ends 0.051 x ring - 9 above its box. The dock's
     margin solves gap(bottom circle -> home) = guard exactly; negative at large rings
     because it reclaims the wrap's empty box corner: */
  #services .circ:not(.circ--center):not(.circ--suite){
    width:calc(25% + 18px)!important;
    height:calc(25% + 18px)!important;
    font-size:calc((var(--svc-ring) * 0.25 + 18px) / 10.1)!important;   /* ONE source: the
       ring var - a written-out copy of the ring law drifted once and misgrew the petals */
  }
  #services .circ--center{
    width:calc((25% + 18px) * 136 / 120)!important;
    height:calc((25% + 18px) * 136 / 120)!important;
    font-size:calc((var(--svc-ring) * 0.25 + 18px) / 10.1 * 3.6 / 3.4)!important;
  }
  #services .circ--suite{
    width:calc(25% + 18px)!important;
    height:calc(25% + 18px)!important;
    /* the em law sizes each circle from its own text (width:10.1em wins for suites too),
       so the suite's TEXT must carry the same derived formula - otherwise the old cqw
       font rule feeds the em law and the suites render oversized (caught on the PC) */
    font-size:calc((var(--svc-ring) * 0.25 + 18px) / 10.1)!important;
  }
}