:root {
  --black: #06070a;
  --gray-900: #16171d;
  --gray-850: #24262f;
  --gray-700: #4d5260;
  --gray-400: #979ca8;
  --gray-200: #cbced4;
  --white: #fff;
  --accent: #fff;
  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 96px);
  --tile: clamp(64px, min(7.2vw, 11.5vh), 104px);
  --tile-on: calc(var(--tile) * 1.75); /* keep TILE_ON in js/main.js in step */
  --gap: clamp(8px, 1vw, 14px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg, video, canvas { display: block; }
kbd {
  font: 600 11px/1 var(--font-body);
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .08);
}
:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* ---------- Loading screen ---------- */
.loader {
  position: fixed; inset: 0; z-index: 50; background: var(--black);
  display: grid; place-items: center;
  transition: opacity .6s ease, visibility 0s .6s;
}
body:not([data-state="loading"]) .loader { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__inner { display: grid; justify-items: center; gap: 28px; }
.loader__mark { width: clamp(180px, 22vw, 280px); height: auto; filter: invert(1); opacity: 0; transform: translateY(.75rem); animation: loader-mark .6s var(--ease) forwards; }
@keyframes loader-mark { to { opacity: 1; transform: none; } }
.loader__rule { width: clamp(180px, 22vw, 280px); height: 1px; background: rgba(255, 255, 255, .12); position: relative; overflow: hidden; }
.loader__rule i { position: absolute; inset: 0; background: var(--white); transform-origin: 0 50%; transform: scaleX(0); }
.loader__sound {
  position: absolute; left: 0; right: 0; bottom: clamp(28px, 7vh, 64px); margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 500 12px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--gray-400);
  opacity: 0; animation: loader-mark .8s var(--ease) .5s forwards;
}
.loader__sound svg { width: 18px; height: 18px; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
/* waiting for a click: the bar fades away and "Click to start" fades in where it was, under the mark */
.loader__inner { position: relative; }
.loader__rule { transition: opacity .4s ease; }
.loader__start { position: absolute; left: 50%; bottom: 0; translate: -50% 50%; margin: 0; white-space: nowrap;
  display: flex; align-items: center; gap: 10px; font: 500 13px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase;
  color: var(--white); opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.loader__start svg { width: 18px; height: 18px; }
.loader__go { display: none; animation: breathe 1.8s ease-in-out infinite; }
body.await-gesture .loader__rule { opacity: 0; }
body.await-gesture .loader__start { opacity: 1; transition-delay: .3s; }
body.await-gesture .loader__sound { visibility: hidden; }
body.await-gesture .loader__go--click { display: inline; }
body.await-gesture .loader { cursor: pointer; }
@media (hover: none) {
  body.await-gesture .loader__go--click { display: none; }
  body.await-gesture .loader__go--tap { display: inline; }
}

/* ---------- Boot ---------- */
.boot {
  position: fixed; inset: 0; z-index: 40; background: #010207;
  opacity: 0; visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s 1.2s;
}
body[data-state="boot"] .boot { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.boot canvas { width: 100%; height: 100%; }
.boot__mark {
  position: absolute; left: 50%; bottom: 14vh; transform: translate(-50%, 12px);
  display: grid; justify-items: center; gap: 6px;
  opacity: 0; transition: opacity 1.4s ease 1s, transform 1.8s var(--ease) 1s;
}
.boot__mark img { width: min(300px, 48vw); filter: invert(1); }
.boot__mark span { font: 500 12px/1 var(--font-display); letter-spacing: .28em; text-transform: uppercase; color: var(--gray-200); }
.boot-locked .boot__mark { opacity: 1; transform: translate(-50%, 0); }
.boot__skip { position: absolute; left: 20px; bottom: 16px; padding: 10px 12px; font-size: 12px; color: rgba(255, 255, 255, .4); }
.boot__skip:hover { color: var(--white); }

/* ---------- Home ---------- */
.home {
  position: fixed; inset: 0; opacity: 0; transform: scale(1.04);
  transition: opacity 1s ease, transform 1.4s var(--ease), filter .5s ease;
}
body[data-state="home"] .home { opacity: 1; transform: none; }
body[data-state="page"] .home, body[data-state="launching"] .home { opacity: 1; transform: scale(1.05); filter: blur(18px) brightness(.5); }

.bg, .bg__layer, .bg__scrim, .motes { position: absolute; inset: 0; width: 100%; height: 100%; }
/* backgrounds keep their own stacking order, so art can never sit above the UI */
.bg { isolation: isolate; z-index: 0; }
.bg__layer { pointer-events: none; }
.bg__layer { opacity: 0; transition: opacity 1s cubic-bezier(.4, 0, .2, 1); overflow: hidden; background: var(--black); }
.bg__layer.is-on { opacity: 1; }
.bg__layer > img, .bg__layer > video, .bg__layer > svg, .bg__layer > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* slow zoom-out on every background. It runs on the layer, not only while it is active, so the outgoing
   photo keeps its place as it fades instead of snapping back; each new photo is a new element and starts fresh.
   Gentle in and out, so nothing lurches when a photo appears. */
.bg__layer > img, .bg__layer > svg { animation: drift 34s cubic-bezier(.45, 0, .55, 1) both; will-change: transform; }
.bg__layer > video { opacity: 0; transition: opacity 1.2s ease; }
.bg__layer > video.is-on { opacity: 1; }
.bg__layer[data-type="image"] > img { filter: saturate(1.05) brightness(.82); }
/* portrait photos sit on the right instead of being blown up across the screen */
.bg__layer[data-fit="portrait"] { background: #2b2c2e; }
.bg__layer[data-fit="portrait"] > img { left: auto; right: 0; width: min(62%, 120vh); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%); mask-image: linear-gradient(90deg, transparent 0, #000 34%); }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.bg__scrim {
  background:
    linear-gradient(180deg, rgba(6, 7, 10, .8) 0%, rgba(6, 7, 10, .1) 34%, rgba(6, 7, 10, 0) 50%, rgba(6, 7, 10, .82) 100%),
    linear-gradient(90deg, rgba(6, 7, 10, .88) 0%, rgba(6, 7, 10, .55) 34%, rgba(6, 7, 10, 0) 68%);
}
/* MyTurn: agent orbit (js/myturn.js) on the site's dark green; lighter scrim so the orbit shows */
/* AutoXpress: the dark shading turns burgundy. A red wash over the usual scrim, faded in and out with the
   background (gradients cannot transition, opacity can) */
.bg__scrim::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 1s cubic-bezier(.4, 0, .2, 1); pointer-events: none;
  background:
    linear-gradient(180deg, rgba(92, 12, 22, .55) 0%, rgba(92, 12, 22, 0) 36%, rgba(92, 12, 22, 0) 55%, rgba(80, 10, 19, .6) 100%),
    linear-gradient(90deg, rgba(110, 15, 27, .62) 0%, rgba(96, 12, 23, .42) 34%, rgba(80, 10, 19, 0) 70%); }
body[data-tile="autoxpress"] .bg__scrim::after { opacity: 1; }
body[data-tile="myturn"] .bg__scrim {
  background:
    linear-gradient(180deg, rgba(4, 9, 7, .7) 0%, rgba(4, 9, 7, 0) 26%, rgba(4, 9, 7, 0) 60%, rgba(4, 9, 7, .8) 100%),
    linear-gradient(90deg, rgba(4, 9, 7, .85) 0%, rgba(4, 9, 7, .4) 34%, rgba(4, 9, 7, 0) 56%);
}
.mt { position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 64% 56%, rgba(22, 128, 86, .22), transparent 70%),
    radial-gradient(ellipse at 64% 56%, #0b1a14 0%, #050b08 60%, #030605 100%); }
.mt__orbit { --size: min(78vh, 52vw); position: absolute; left: 64%; top: 57%; width: var(--size); height: var(--size); transform: translate(-50%, -50%); }
.mt__ring { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d); transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .07); }
.mt__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mt__spokes line { stroke-width: 1.6; }
.mt__tie { stroke: rgba(170, 255, 220, .5); stroke-width: 1.2; stroke-dasharray: 3 5; }
.mt__pulse { fill: #b8ffe0; filter: drop-shadow(0 0 6px #6effc2) drop-shadow(0 0 14px rgba(110, 255, 194, .7)); }
.mt__core {
  position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(circle, #10251c, #07120d 70%);
  box-shadow: 0 0 0 1px rgba(110, 255, 194, .35), 0 0 60px rgba(110, 255, 194, .28), 0 0 140px rgba(4, 160, 94, .25);
  transition: box-shadow .5s ease;
}
.mt__core img { width: 34%; height: auto; filter: drop-shadow(0 0 14px rgba(110, 255, 194, .55)); }
/* an alert landing makes the pin flare */
.mt__orbit.is-hit .mt__core { animation: mt-hit .7s ease-out; }
@keyframes mt-hit { 0% { box-shadow: 0 0 0 1px rgba(110, 255, 194, .7), 0 0 90px rgba(110, 255, 194, .55), 0 0 180px rgba(4, 160, 94, .4); } }
/* sonar: rings leave the pin and fade as they reach the agents */
.mt__sonar { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(110, 255, 194, .7); box-shadow: 0 0 24px rgba(110, 255, 194, .25), inset 0 0 24px rgba(110, 255, 194, .12); transform: translate(-50%, -50%) scale(1); opacity: 0; animation: mt-sonar 4.2s cubic-bezier(.2, .6, .35, 1) infinite; }
@keyframes mt-sonar { 0% { transform: translate(-50%, -50%) scale(1); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(4.2); opacity: 0; } }
.mt__agent, .mt__home { position: absolute; left: 0; top: 0; border-radius: 50%; overflow: hidden; will-change: transform; backface-visibility: hidden; }
.mt__agent { box-shadow: 0 0 0 2px rgba(255, 255, 255, .16), 0 0 0 5px rgba(110, 255, 194, .07), 0 12px 30px rgba(0, 0, 0, .5); }
.mt__home { box-shadow: 0 0 0 1.5px rgba(110, 255, 194, .55), 0 0 16px rgba(110, 255, 194, .25), 0 8px 20px rgba(0, 0, 0, .5); }
.mt__agent img, .mt__home img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .mt__orbit { --size: min(92vw, 60vh); left: 50%; top: 40%; opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .mt__sonar { animation: none; } }
body[data-tile="yardshark"] .bg__scrim {
  background:
    linear-gradient(180deg, rgba(6, 7, 10, .82) 0%, rgba(6, 7, 10, .1) 30%, rgba(6, 7, 10, 0) 55%, rgba(6, 7, 10, .7) 100%),
    linear-gradient(90deg, rgba(6, 7, 10, .9) 0%, rgba(6, 7, 10, .6) 30%, rgba(6, 7, 10, 0) 58%);
}
.motes { pointer-events: none; opacity: 0; transition: opacity 1.6s ease .4s; }
body[data-state="home"] .motes { opacity: 1; }

/* top bar */
.top {
  position: absolute; top: 0; left: 0; right: 0; height: clamp(64px, 9vh, 92px);
  padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between;
}
.top__tabs { display: flex; gap: clamp(36px, 4.6vw, 80px); }
.top__tab { font: 300 clamp(26px, 2.6vw, 40px)/1 var(--font-display); letter-spacing: -.01em; color: rgba(255, 255, 255, .42); padding: 8px 0; transition: color .2s; }
.top__tab:hover { color: rgba(255, 255, 255, .75); }
.top__tab.is-on { color: var(--white); font-weight: 600; }
/* reserve the bold width so titles (and the rail under them) don't shift when the selection changes */
.top__tab { display: inline-flex; flex-direction: column; }
.top__tab::after { content: attr(data-label); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; }
.top__right { --hud: clamp(40px, 3.6vw, 54px); display: flex; align-items: center; gap: clamp(26px, 3.4vw, 56px); }
.top__icon { width: var(--hud); height: var(--hud); display: grid; place-items: center; border-radius: 50%; color: rgba(255, 255, 255, .8);
  transition: background .2s, color .2s, box-shadow .25s ease; }
.top__icon:hover, .top__icon:focus-visible { background: rgba(255, 255, 255, .14); color: var(--white); outline: none;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55), 0 0 18px rgba(255, 255, 255, .12); }
.top__icon svg { width: 62%; height: 62%; transition: transform .35s var(--ease); }
/* on hover each icon does its own little thing, like the Settings gear turning: the phone rings, the envelope lifts */
.top__icon[href^="tel:"]:hover svg, .top__icon[href^="tel:"]:focus-visible svg { animation: icon-ring .7s ease-in-out; }
@keyframes icon-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-16deg) scale(1.08); }
  30% { transform: rotate(14deg) scale(1.08); }
  45% { transform: rotate(-12deg) scale(1.08); }
  60% { transform: rotate(9deg) scale(1.06); }
  75% { transform: rotate(-5deg) scale(1.04); }
}
.top__icon[href*="contact"]:hover svg, .top__icon[href*="contact"]:focus-visible svg { transform: translateY(-2px) scale(1.12); }
@media (prefers-reduced-motion: reduce) { .top__icon svg { animation: none !important; transition: none; } }
.top__avatar { width: var(--hud); height: var(--hud); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7);
  display: block; cursor: pointer; transition: transform .3s var(--ease), box-shadow .25s ease; }
.top__avatar img { width: 100%; height: 100%; display: block; }
/* it opens the About page: on hover it grows a touch and its ring brightens into a soft glow */
.top__avatar:hover, .top__avatar:focus-visible { transform: scale(1.12); outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 0 20px rgba(255, 255, 255, .22); }
.top__avatar:active { transform: scale(1.04); }
/* matches the unselected section titles on the left */
.top__clock { margin-left: clamp(30px, 3.6vw, 60px); font: 300 clamp(26px, 2.6vw, 40px)/1 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* rail */
.rail { position: absolute; left: var(--pad); right: 0; top: clamp(72px, 11vh, 108px); }
.rail__probe { position: absolute; width: var(--tile); height: 0; visibility: hidden; }
.rail__track {
  display: flex; align-items: flex-start; gap: var(--gap);
  height: var(--tile-on);
  transition: transform .34s var(--ease);
  will-change: transform;
}
.rail__track.bump { animation: bump .28s ease; }
@keyframes bump { 40% { margin-left: -10px; } }
.tile {
  flex: none; width: var(--tile); height: var(--tile);
  border-radius: 16%;
  position: relative;
  transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), opacity .3s ease;
}
.tile__art { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: var(--gray-900); box-shadow: 0 6px 22px rgba(0, 0, 0, .45); }
.tile__art > img, .tile__art > svg { width: 100%; height: 100%; object-fit: cover; }
.tile--home .tile__art { background: #000; }
.tile--home .tile__art > img { transform: scale(1.12); }
/* icons that ship with their own rounded corners: zoom past them so the tile is filled edge to edge */
.tile__art > img.tile__zoom { transform: scale(1.18); }
.tile__logo { position: absolute; inset: 0; display: grid; place-items: center; padding: 14%; background: linear-gradient(145deg, #2a2d38, #101116); }
.tile__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tile.is-before { opacity: .35; }
/* hovering a tile shows its title */
.tile::before {
  /* hover label, above the tile: a glassy pill with a small pointer down to it */
  content: attr(data-title); position: absolute; left: 50%; bottom: calc(100% + 11px); transform: translate(-50%, 6px) scale(.96);
  padding: 7px 12px 7px 12px; border-radius: 999px; white-space: nowrap; z-index: 3; pointer-events: none;
  font: 500 13px/1 var(--font-display); letter-spacing: .01em; color: var(--white);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)),
    rgba(18, 19, 25, .78);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0; transition: opacity .16s ease, transform .26s cubic-bezier(.2, .9, .3, 1.25);
}
.tile:not(.is-selected):hover::before { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* the pointer: a small rotated square tucked under the pill */
.tile:not(.is-selected)::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 6px); width: 9px; height: 9px; z-index: 3; pointer-events: none;
  transform: translate(-50%, 6px) rotate(45deg); background: rgba(24, 25, 31, .92);
  border-right: 1px solid rgba(255, 255, 255, .18); border-bottom: 1px solid rgba(255, 255, 255, .18);
  opacity: 0; transition: opacity .16s ease, transform .26s cubic-bezier(.2, .9, .3, 1.25);
}
.tile:not(.is-selected):hover::after { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }
.rail { touch-action: pan-y; cursor: grab; }
.rail:active { cursor: grabbing; }
.rail__track.is-dragging { transition: none; }
.rail__track.is-dragging .tile { pointer-events: none; }
.tile { -webkit-user-drag: none; }
.tile img { -webkit-user-drag: none; pointer-events: none; }
.tile:hover { opacity: 1; }
/* the selected tile gets double spacing either side; layoutRail() offsets the track by the extra left margin */
.tile.is-selected { width: var(--tile-on); height: var(--tile-on); margin: 0 var(--gap); }
.tile.is-selected::after {
  content: ""; position: absolute; inset: -5px; border-radius: 18%;
  border: 2.5px solid var(--white);
  box-shadow: 0 0 22px rgba(255, 255, 255, .35);
  animation: ring 2.2s ease-in-out infinite;
}
body[data-zone="actions"] .tile.is-selected::after { opacity: .45; animation: none; }
@keyframes ring { 50% { box-shadow: 0 0 34px rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .8); } }
/* the selected title sits beside the big tile, centred in the space under the smaller tiles */
.rail__name { position: absolute; left: calc(var(--tile-on) + 2 * var(--gap)); top: var(--tile); height: calc(var(--tile-on) - var(--tile)); display: flex; align-items: center; white-space: nowrap; pointer-events: none; transition: opacity .2s ease; font: 300 clamp(26px, 2.6vw, 40px)/1 var(--font-display); letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }

/* hero */
.hero {
  position: absolute; left: var(--pad); bottom: var(--hero-bottom);
  width: min(600px, calc(100vw - var(--pad) * 2));
}
/* Every tile's hero is built from the same fixed slots, so all of them are the same height and the buttons
   always land in the same place: a logo box, a two-line headline block, a two-line blurb, one row of tags. */
.hero { --logo-h: clamp(72px, 14vh, 128px); --logo-w: min(400px, 70vw); }
.hero .hero__logo { height: var(--logo-h); min-height: 0; margin-bottom: clamp(14px, 2.4vh, 24px); display: flex; align-items: flex-end; }
.hero .hero__logo img, .hero .hero__logo svg { width: auto; height: auto; max-height: 100%; max-width: var(--logo-w); object-fit: contain; object-position: left bottom; margin-left: 0; }
.hero .hero__logo .hero__wordmark { height: 100%; }
.hero .hero__logo .hero__lockup { font-size: min(calc(var(--logo-h) / 1.12), calc(var(--logo-w) / 4.6)); }
.hero .hero__logo .hero__lockup img { height: 1.1em; max-height: none; }
.hero .hero__logo .hero__textlogo { font-size: calc(var(--logo-h) * .78); line-height: 1; }
.hero__head { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(12px * 1.3 + 10px + 2 * 1.08 * clamp(24px, 2.7vw, 40px) + 12px); }
.hero .hero__blurb { min-height: 3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero .hero__tags { flex-wrap: nowrap; overflow: hidden; }
.hero .hero__tags li { flex: none; }
.hero > * { opacity: 0; transform: translateY(14px); }
.hero.is-in > * { animation: rise .6s var(--ease) forwards; }
.hero.is-in > :nth-child(2) { animation-delay: .06s; }
.hero.is-in > :nth-child(3) { animation-delay: .1s; }
.hero.is-in > :nth-child(4) { animation-delay: .14s; }
.hero.is-in > :nth-child(5) { animation-delay: .18s; }
.hero.is-in > :nth-child(6) { animation-delay: .22s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero__logo { margin-bottom: clamp(10px, 2.2vh, 24px); min-height: clamp(48px, 9vh, 96px); display: flex; align-items: flex-end; }
.hero__wordmark { width: min(clamp(250px, 34vw, 520px), 58vh, 100%); height: auto; filter: invert(1) drop-shadow(0 4px 24px rgba(0, 0, 0, .5)); margin-left: -1.2%; }
.hero__clientlogo { max-height: clamp(44px, 9vh, 92px); max-width: min(340px, 70vw); object-fit: contain; object-position: left bottom; filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .6)); }
/* tall, stacked logos (Momo) need more height to read */
.hero__clientlogo--tall { max-height: clamp(110px, 20vh, 190px); }
/* icon + wordmark, for products without a wordmark image (MyTurn) */
.hero__lockup { display: inline-flex; align-items: center; gap: .32em; font: 700 clamp(44px, 6vw, 84px)/1 var(--font-display); letter-spacing: -.03em; text-shadow: 0 4px 22px rgba(0, 0, 0, .6); }
.hero__lockup img { height: 1.1em; width: auto; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .5)); }
.hero__textlogo { font: 700 italic clamp(44px, 6vw, 88px)/.95 var(--font-display); letter-spacing: -.03em; }
.hero__eyebrow { margin: 0 0 10px; font: 500 12px/1.3 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--gray-200); }
.hero__tagline { margin: 0 0 12px; font: 600 clamp(24px, 2.7vw, 40px)/1.08 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.hero__blurb { margin: 0 0 16px; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.5; color: rgba(255, 255, 255, .82); max-width: 54ch; text-wrap: pretty; }
.hero__tags { list-style: none; margin: 0 0 clamp(16px, 3vh, 28px); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero__tags li { font-size: 12px; padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.btn {
  font: 600 clamp(15px, 1.2vw, 18px)/1 var(--font-display);
  height: clamp(46px, 6vh, 58px); padding: 0 clamp(24px, 3vw, 44px);
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  position: relative; white-space: nowrap;
  transition: transform .2s var(--ease), background .2s, color .2s, box-shadow .2s;
}
.btn--primary { background: rgba(255, 255, 255, .92); color: #0a0a0c; min-width: clamp(180px, 17vw, 250px); }
.btn--ghost { background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn:hover, .btn.is-focus { transform: scale(1.045); }
.btn--primary:hover, .btn--primary.is-focus { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 8px 40px rgba(255, 255, 255, .25); }
.btn--ghost:hover, .btn--ghost.is-focus { background: rgba(255, 255, 255, .28); box-shadow: 0 0 0 2.5px #fff; }
.btn[aria-disabled="true"] { background: rgba(255, 255, 255, .35); color: rgba(10, 10, 12, .7); cursor: default; }
.btn.shake { animation: shake .3s ease; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* YardShark + Nerd Punt title treatments */
.hero__brandlogo { height: clamp(48px, 9vh, 92px); width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 4px 22px rgba(0, 0, 0, .65)); }
.launch__logo .hero__brandlogo { height: clamp(60px, 12vh, 120px); }
/* chrome logos (Curated): piano black with a soft spotlight from above */
.tile__logo--chrome { padding: 13%; background: radial-gradient(circle at 50% 22%, #34363d 0%, #141518 55%, #060607 100%); }
/* single-letter marks (Area Specialist): same piano black, more padding, a faint glow */
.tile__logo--mark { padding: 22%; background: radial-gradient(circle at 50% 22%, #34363d 0%, #141518 55%, #060607 100%); }
.tile__logo--mark img { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .18)) drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); }
/* Gala Club: the ad backdrop, navy up top, a teal-blue glow, purple rising from below */
.tile__logo--gala { padding: 15%; background:
  radial-gradient(ellipse 90% 55% at 85% 38%, rgba(0, 150, 210, .55), transparent 70%),
  radial-gradient(ellipse 120% 70% at 30% 108%, rgba(190, 50, 230, .85), transparent 70%),
  linear-gradient(180deg, #04050b 0%, #10184a 48%, #3a1478 100%); }
.tile__logo--gala img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(200, 80, 255, .35)); }
/* wide wordmarks (Melbourne Wholesale): piano black, slimmer padding so the type stays legible */
.tile__logo--wide { padding: 9%; background: radial-gradient(circle at 50% 22%, #34363d 0%, #141518 55%, #060607 100%); }
.tile__logo--wide img { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
/* Sell Your Prestige Car: their shield on piano black, with a faint green glow from the car */
/* Sell Your Prestige Car: their shield on a deep green, with a brighter green glow behind it that picks up the car */
.tile__logo--shield { padding: 15%; background:
  radial-gradient(circle at 50% 48%, rgba(70, 205, 70, .42) 0%, rgba(40, 150, 45, .16) 34%, transparent 62%),
  radial-gradient(circle at 50% 18%, #1c4a23 0%, #0e2a14 52%, #061509 100%); }
.tile__logo--shield img { filter: drop-shadow(0 0 14px rgba(60, 220, 60, .35)) drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
/* Keychron: the mark over their keyboard on rocks, darkened so the white reads */
.tile__logo--keychron { padding: 22%; background: linear-gradient(rgba(5, 6, 8, .55), rgba(5, 6, 8, .55)), url(https://cdn.noproblem.com.au/www/console/clients/keychron-tile-bg-512w.7defce5ffb.avif) center / cover, #0b0c0e; }
.tile__logo--keychron img { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .7)); }
/* Chery: the white emblem over a darkened shot of the E5 */
.tile__logo--chery { padding: 9%; background: linear-gradient(rgba(5, 6, 8, .57), rgba(5, 6, 8, .57)), url(https://cdn.noproblem.com.au/www/console/clients/chery-tile-bg-512w.8c45ef8d9b.avif) center / cover, #0b0c0e; }
.tile__logo--chery img { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .7)); }
/* Momo: the mascot badge on warm milk-tea cream, like the cups */
.tile__logo--momo { padding: 11%; background: radial-gradient(circle at 50% 30%, #f6e9d6 0%, #e9d2b2 60%, #d2b28a 100%); }
.tile__logo--momo img { filter: drop-shadow(0 3px 8px rgba(80, 50, 20, .25)); }
/* City West Yamaha: the emblem over a darkened shot of the store */
.tile__logo--yamaha { padding: 14%; background: linear-gradient(rgba(5, 6, 8, .5), rgba(5, 6, 8, .5)), url(https://cdn.noproblem.com.au/www/console/clients/cwy-tile-bg-512w.0a5095974b.avif) center / cover, #0b0c0e; }
.tile__logo--yamaha img { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .7)); }
/* Area Specialist: the A centred, over Rohin's headshot cropped so his face sits just right of it */
.tile__logo--rohin { padding: 22%; background: linear-gradient(rgba(5, 6, 8, .47), rgba(5, 6, 8, .47)), url(https://cdn.noproblem.com.au/www/console/clients/area-specialist-tile-bg-512w.68506fefa8.avif) center / cover, #0b0c0e; }
.tile__logo--rohin img { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55)); }
/* Element Commercial: the yellow square over glass towers and a reflecting pool, darkened so the yellow leads */
.tile__logo--element { padding: 22%; background: linear-gradient(rgba(5, 6, 8, .5), rgba(5, 6, 8, .5)), url(https://cdn.noproblem.com.au/www/console/clients/element-tile-bg-512w.4b5aeb8f1e.avif) center / cover, #0b0c0e; }
.tile__logo--element img { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .55)); }

/* NerdPunt cover: black and gold, with the squad */
.bg__layer > .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.art--pixel { object-fit: cover; image-rendering: pixelated; image-rendering: crisp-edges; }

/* mute: always on screen */
.mute {
  position: fixed; right: max(16px, calc(var(--pad) - 4px)); bottom: 16px; z-index: 70;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--white);
  background: rgba(22, 23, 29, .72); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background .2s, transform .2s var(--ease);
}
.mute:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }
.mute svg { width: 22px; height: 22px; }
.mute .snd-off, .mute[aria-pressed="true"] .snd-on { display: none; }
.mute[aria-pressed="true"] .snd-off { display: inline; }
.mute[aria-pressed="true"] { color: #ff9b9b; }


/* cards */
/* Client cards sit below the fold with just their tops peeking up, like the cards under a game on a
   console's home screen. Scrolling over the lower half (or clicking them, or pressing down) slides the
   stage up to reveal the row: .home.is-deep, set in main.js. The background stays where it is. */
.home {
  --card-peek: clamp(46px, 6.5vh, 70px);                              /* how much of the cards shows at rest */
  --row-h: clamp(280px, 42vh, 480px);                                 /* the cards' height */
  --deep-gap: clamp(40px, 7vh, 84px);                                 /* space under the row once revealed */
  --hero-bottom: calc(var(--card-peek) + clamp(30px, 5vh, 56px));     /* the hero clears the peeking cards */
  --lift: 0px;
}
.home.is-deep { --lift: calc(var(--row-h) + var(--deep-gap) - var(--card-peek)); }
.stage { position: absolute; inset: 0; transform: translateY(calc(var(--lift) * -1)); transition: transform .7s var(--ease); }
.home .bg { transition: filter .7s ease; }
.home.is-deep .bg { filter: brightness(.62); }
/* while the cards are revealed the background holds still: a drifting background makes every frosted card
   recompute its blur each frame, which competes with the reels for a laptop's GPU */
.home.is-deep .bg__layer > * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .stage { transition: none; } }
.cards { position: absolute; right: var(--pad); bottom: var(--hero-bottom); }
/* Studio and Products: the original stack of cards on the right */
.cards--stack { width: clamp(250px, 23vw, 330px); display: grid; gap: 12px; }
/* the studio's headline numbers: three big square trophy cards side by side, platinum, gold, silver */
.cards .hc.hc--trio { --sq: clamp(150px, 12.5vw, 230px); width: auto; padding: 0; background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; display: grid; grid-template-columns: repeat(3, var(--sq)); gap: 12px; }
.cards .hc--trio .hc__stat { width: var(--sq); height: var(--sq); }
/* Clients: one row with the hero; left edge, height and bottom are set from the hero block in layoutCards() */
.cards--row {
  left: calc(var(--pad) - var(--peek)); top: calc(100% - var(--card-peek)); bottom: auto; height: var(--row-h);
  pointer-events: auto; cursor: grab; touch-action: pan-y; transition: translate .35s var(--ease);
  /* no clipping: like the tile rail, cards past the right edge simply run off the screen. (Never a clip-path,
     opacity, filter or will-change: opacity here either, which would switch off the cards' backdrop blur.)
     The row starts --peek further left, padded, so the passed cards' stack has room to show */
  --peek: 26px; padding-left: var(--peek); overflow: visible;
}
.cards--row:active { cursor: grabbing; }
/* at rest the peeking row is a single target: it lifts a touch on hover and a click reveals it */
.home:not(.is-deep) .cards--row { cursor: pointer; }
.home:not(.is-deep) .cards--row:hover { translate: 0 -10px; }
/* the key hints would sit on top of the peeking cards */
body[data-cards="row"] .hints { opacity: 0; pointer-events: none; }
/* cards are placed by positionCards(); this only animates them */
.cards--row > .hc { position: absolute; left: var(--peek); top: 0; height: 100%; transform-origin: left center; will-change: transform;
  transition: transform .5s var(--ease), opacity .45s ease, filter .45s ease; }
.cards--row.is-dragging > .hc { transition: none; }
.cards.cards--row > *, .cards.cards--row.is-in > * { animation: none; } /* beats the stack's slide-in, which would override the carousel positions */
.cards--row .hc img, .cards--row .hc video { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.cards > * { opacity: 0; transform: translateX(24px); }
.cards.is-in > * { animation: rise .6s var(--ease) forwards; }
.cards.is-in > :nth-child(1) { animation-delay: .16s; }
.cards.is-in > :nth-child(2) { animation-delay: .24s; }
.cards.is-in > :nth-child(3) { animation-delay: .32s; }
.cards.is-in > :nth-child(4) { animation-delay: .4s; }
.cards.is-in > :nth-child(5) { animation-delay: .48s; }

/* home card glass: one place to change the cards' colour and how much the background behind them blurs */
:root {
  --card-tint: rgba(22, 25, 34, .74);
  --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  --card-blur: blur(44px) saturate(1.5) brightness(.75);
}
/* home cards, console style: dark glass, an icon + title header, content below. Same height, widths vary by kind */
.hc {
  --w: 1; flex: none; width: calc(var(--row-h, 300px) * var(--w)); position: relative; overflow: hidden;
  display: flex; flex-direction: column; border-radius: 16px; padding: 16px 18px;
  background: var(--card-sheen), var(--card-tint);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 12px 34px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
}
.hc__head { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--font-display); letter-spacing: .01em; color: rgba(255, 255, 255, .92); position: relative; z-index: 1; }
.hc__head svg { width: 15px; height: 15px; flex: none; opacity: .9; }
.hc__body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; position: relative; z-index: 1; }
/* result */
.hc--stat { --w: .46; }
.hc--stat .trophy { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin-bottom: auto; margin-top: 18px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.hc--stat .trophy svg { width: 24px; height: 24px; }
.hc__value { font: 600 clamp(30px, 2.8vw, 44px)/1 var(--font-display); letter-spacing: -.03em; }
.hc__label { margin-top: 8px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .72); }
/* results: a 2x2 grid of stats, each with its tier trophy */
.hc--stats { --w: .92; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
.hc__grid { flex: 1; min-height: 0; margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.hc__stat { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 14px 16px; border-radius: 14px;
  /* each tile is a full glass card now, matching the rest of the row */
  background: var(--card-sheen), var(--card-tint);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 12px 34px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); }
.hc__stat { position: relative; overflow: hidden; isolation: isolate; }
/* the trophy is a big faint watermark on the right, half of it running off the card's edge */
/* the trophy: a big, bright metallic cup on the right, half of it running off the card's edge */
.hc .hc__stat .trophy { position: absolute; z-index: -2; right: -30%; top: 50%; width: 74%; height: auto; aspect-ratio: auto; margin: 0;
  transform: translateY(-50%) rotate(-9deg); display: block; border-radius: 0; background: none; box-shadow: none; opacity: .92; pointer-events: none; }
/* platinum is the tall orb trophy, so it runs narrower to fit the card's height */
.hc .hc__stat .trophy--platinum { width: 62%; right: -22%; top: 54%; /* taller than the card: keep the orb in view, let the base run off the bottom */ transform: translateY(-50%) rotate(-6deg); }
.hc .hc__stat .trophy { perspective: 700px; }
.hc .hc__stat .trophy img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5));
  transform-origin: 50% 60%; animation: trophy-turn 7s cubic-bezier(.45, 0, .55, 1) infinite; will-change: transform, filter; }
/* a turntable: the trophy swings round in perspective and the metal catches the light on each pass */
@keyframes trophy-turn {
  0%   { transform: rotateY(-32deg); filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)) brightness(.92); }
  25%  { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)) brightness(1.22) saturate(1.08); }
  50%  { transform: rotateY(32deg); filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)) brightness(.92); }
  75%  { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)) brightness(1.22) saturate(1.08); }
  100% { transform: rotateY(-32deg); filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)) brightness(.92); }
}
/* each card starts at a different point in the turn */
.hc__stat:nth-child(2) .trophy img { animation-delay: -1.75s; }
.hc__stat:nth-child(3) .trophy img { animation-delay: -3.5s; }
.hc__stat:nth-child(4) .trophy img { animation-delay: -5.25s; }
@media (prefers-reduced-motion: reduce) { .hc .hc__stat .trophy img { animation: none; } }
/* the 3D trophy sits exactly over the still render; once it is running the still hides */
.hc .hc__stat .trophy canvas.trophy3d { position: absolute; left: -22%; top: -16%; width: 144%; height: 132%; display: block; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)); }
.hc .hc__stat .trophy:not(.has-3d) canvas.trophy3d { visibility: hidden; }
.hc .hc__stat .trophy.has-3d img { visibility: hidden; animation: none; }
.hc .hc__stat .trophy.has-3d { transform: translateY(-50%); } /* real 3D spins, so no tilt */
/* a dark wash on the left keeps the number and label readable over the metal */
.hc__stat::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 13, 18, .82) 0%, rgba(12, 13, 18, .55) 42%, rgba(12, 13, 18, 0) 72%); }
.hc__statv { font: 600 clamp(22px, 2vw, 32px)/1 var(--font-display); letter-spacing: -.02em; }
.hc__statl { font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, .78); max-width: 64%; } /* wraps before it reaches the trophy */
.hc__stat--soon { background: rgba(18, 19, 25, .45); border: 1px dashed rgba(255, 255, 255, .16); box-shadow: none; }
.hc .hc__stat--soon .trophy { opacity: .28; filter: saturate(.5); }
.hc__stat--soon .hc__statv { color: rgba(255, 255, 255, .35); }
.hc__stat--soon .hc__statl { color: rgba(255, 255, 255, .4); }
/* review */
.hc--quote { --w: .86; }
.hc--quote .hc__mark { font: 700 64px/.6 Georgia, serif; color: rgba(255, 255, 255, .14); margin-top: 18px; }
.hc--quote blockquote { margin: 6px 0 0; font-size: clamp(13px, 1.02vw, 15px); line-height: 1.5; color: rgba(255, 255, 255, .92);
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.hc__by { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; font-size: 13px; color: rgba(255, 255, 255, .78); }
/* review with a photo: the photo sits under the header, the quote shortens to fit */
.hc__photo { flex: none; width: 100%; height: 44%; margin-top: 12px; border-radius: 10px; object-fit: cover; position: relative; z-index: 1; }
.hc--quote-photo blockquote { -webkit-line-clamp: 4; margin-top: 12px; }
/* review with a photo: two separate cards in one slot, the photo above (about two thirds) and the words below */
.hc--duo { --w: .86; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.hc__duo-photo, .hc__duo-card { border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 12px 34px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); }
.hc__duo-photo { position: relative; overflow: hidden; background: var(--card-tint); }
.hc__duo-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc__duo-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 13px;
  background: var(--card-sheen), var(--card-tint); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); }
.hc__duo-card .hc__by { margin: 0; padding: 0; align-self: flex-end; font: 600 13px/1 var(--font-display); color: #fff; } /* who said it, bottom right */
.hc__duo-card .hc__avatar { width: 24px; height: 24px; }
.hc__duo-card blockquote { margin: 0; font-size: 12.5px; line-height: 1.42; color: rgba(255, 255, 255, .82);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hc__tag { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font-display); color: rgba(255, 255, 255, .7); }
.hc__tag svg { width: 12px; height: 12px; }
.hc__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.hc__avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; font: 600 12px/1 var(--font-display);
  background: linear-gradient(135deg, var(--accent, #d9dde6), rgba(255, 255, 255, .25)); color: #111; }
/* photo and video: the media fills the card, the header floats over it */
.hc--image, .hc--video { --w: .95; padding: 0; }
.hc--image .hc__head, .hc--video .hc__head { position: absolute; left: 0; right: 0; top: 0; padding: 16px 18px 28px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .62), transparent); }
.hc__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* gallery: the photos sit on top of each other and crossfade; round glass arrows at the sides, dots along the foot */
.hc--gallery .hc__media { opacity: 0; transition: opacity .45s ease; }
.hc--gallery .hc__media.is-on { opacity: 1; }
.hc--gallery .hc__head { z-index: 2; }
.hc__flick { position: absolute; top: 50%; z-index: 2; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, .28); background: rgba(12, 13, 18, .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: .75; transition: opacity .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.hc__flick svg { width: 18px; height: 18px; }
.hc__flick--prev { left: 12px; }
.hc__flick--next { right: 12px; }
.hc--gallery:hover .hc__flick { opacity: 1; }
.hc__flick:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .8); transform: scale(1.06); }
.hc__dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.hc__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); box-shadow: 0 0 6px rgba(0, 0, 0, .4); transition: background-color .25s ease, width .25s ease; }
.hc__dots i.is-on { width: 16px; border-radius: 3px; background: #fff; }
.hc__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 1;
  display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hc__play svg { width: 22px; height: 22px; margin-left: 3px; }
/* portrait video (reels): a tall, narrow card */
.hc--video.hc--tall { --w: .48; }
/* cards a video or photo fills edge to edge are opaque, so the frosted blur behind them would never be seen:
   skip it (it costs a full blur pass every frame). Placeholders keep their glass */
.hc.hc--reels, .hc.hc--video:not(.hc--soon), .hc.hc--image:not(.hc--soon), .hc.hc--mockup-bg { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* several reels in one card: side by side with no gap, under one header, each named along its foot */
.hc--reels { --w: calc(.48 * var(--n, 3)); padding: 0; }
.hc--reels .hc__head { position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding: 16px 18px 28px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .62), transparent); }
.hc__reels { position: absolute; inset: 0; display: flex; }
.hc__reel { position: relative; flex: 1; min-width: 0; overflow: hidden; }
/* a soft, blurred seam between reels: each side of the join fades into a little shadow, with a faint light line in the middle */
.hc__reel:not(:last-child)::after, .hc__reel + .hc__reel::before { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; z-index: 1; pointer-events: none; }
.hc__reel:not(:last-child)::after { right: 0; background: linear-gradient(270deg, rgba(255, 255, 255, .14) 0, rgba(0, 0, 0, .5) 1px, transparent); }
.hc__reel + .hc__reel::before { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent); }
.hc__reelname { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; font: 600 12px/1.2 var(--font-display);
  color: rgba(255, 255, 255, .9); background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent); }
/* website mockup: the transparent device shot sits whole on a soft glow */
.hc--mockup { --w: 1.15; background: radial-gradient(ellipse 80% 70% at 50% 60%, rgba(255, 255, 255, .12), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)), var(--card-tint); }
/* the shot's black desk runs to the card's bottom edge: the image sits on the bottom, bleeding past the padding */
.hc--mockup .hc__body { justify-content: flex-end; align-items: center; margin: 0 -18px -16px; }
.hc__mock { width: 112%; max-width: none; height: auto; display: block; }
/* with a property photo: the devices float over the house, darkened at the top so the header reads */
.hc--mockup-bg { background: linear-gradient(180deg, rgba(10, 11, 16, .55), rgba(10, 11, 16, 0) 32%), var(--mock-bg) center / cover no-repeat, var(--card-tint); }
/* devices scaled up to span the card: the laptop starts near the left edge, the phone ends inside the right;
   the shot keeps its black desk, which runs to the card bottom, and the house photo fills the space above it */
.hc--mockup-bg .hc__mock { width: 140%; align-self: flex-start; margin-left: -21%; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5)); }
/* the last card on every client's row: a portrait (9:16) settings card, a big gear and its name */
.hc--settings { --w: .5625; align-items: center; justify-content: center; gap: clamp(14px, 2.4vh, 22px); }
.hc__gear { width: 46%; height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); transition: rotate .6s var(--ease), scale .3s var(--ease); }
.hc__settings { font: 400 clamp(15px, 1.15vw, 19px)/1 var(--font-display); letter-spacing: .01em; color: rgba(255, 255, 255, .88); transition: color .2s ease; }
/* hover reads as a button: pointer, a white focus ring like the console's, a lighter face, and the gear turns a notch */
.hc--settings { cursor: pointer; transition: box-shadow .25s ease, background-color .25s ease, border-color .25s ease; }
.hc--settings:hover { border-color: rgba(255, 255, 255, .9); background-color: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 28px rgba(255, 255, 255, .18), 0 12px 34px rgba(0, 0, 0, .35); }
.hc--settings:hover .hc__gear { rotate: 45deg; scale: 1.06; }
.hc--settings:hover .hc__settings { color: #fff; }
/* note */
.hc--note { --w: .62; }
.hc__title { font: 600 clamp(18px, 1.6vw, 22px)/1.15 var(--font-display); letter-spacing: -.01em; }
/* coming soon */
.hc--soon { --w: .58; background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%), rgba(18, 19, 25, .5); border-style: dashed; border-color: rgba(255, 255, 255, .16); }
.hc--soon .hc__body { justify-content: center; align-items: center; text-align: center; gap: 10px; color: rgba(255, 255, 255, .55); font-size: 13px; }
.hc--soon .hc__body svg { width: 28px; height: 28px; opacity: .55; }
.hc--soon.hc--image, .hc--soon.hc--video { padding: 16px 18px; }
.hc--soon.hc--image .hc__head, .hc--soon.hc--video .hc__head { position: relative; padding: 0; background: none; }

.card {
  display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px;
  background: rgba(22, 23, 29, .62); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .1);
}
.card--trophy { grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.card--trophy .trophy { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); }
.trophy svg { width: 22px; height: 22px; }
.trophy--platinum { color: #cfe6ff; }
.trophy--gold { color: #f0c64a; }
.trophy--silver { color: #c9ccd3; }
.trophy--bronze { color: #d99a63; }
/* console-style trophy tiers: each icon sits on a soft glow in its own metal */
.card--trophy .trophy--platinum, .hc .trophy--platinum { background: radial-gradient(circle at 35% 30%, rgba(207, 230, 255, .32), rgba(120, 160, 210, .1)); box-shadow: inset 0 0 0 1px rgba(207, 230, 255, .35), 0 0 18px rgba(170, 210, 255, .22); }
.card--trophy .trophy--gold, .hc .trophy--gold { background: radial-gradient(circle at 35% 30%, rgba(240, 198, 74, .3), rgba(160, 120, 20, .1)); box-shadow: inset 0 0 0 1px rgba(240, 198, 74, .35), 0 0 18px rgba(240, 198, 74, .18); }
.card--trophy .trophy--silver, .hc .trophy--silver { background: radial-gradient(circle at 35% 30%, rgba(225, 228, 235, .26), rgba(140, 145, 155, .1)); box-shadow: inset 0 0 0 1px rgba(225, 228, 235, .3), 0 0 16px rgba(225, 228, 235, .14); }
.card--trophy .trophy--bronze, .hc .trophy--bronze { background: radial-gradient(circle at 35% 30%, rgba(217, 154, 99, .32), rgba(140, 80, 40, .1)); box-shadow: inset 0 0 0 1px rgba(217, 154, 99, .35), 0 0 18px rgba(217, 154, 99, .18); }
.card__big { font: 600 clamp(22px, 2vw, 30px)/1 var(--font-display); letter-spacing: -.02em; }
.card__title { font: 600 16px/1.2 var(--font-display); }
.card__label { font-size: 13px; line-height: 1.35; color: var(--gray-200); }
.card--quote p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .92); }

/* hints */
.hints { position: absolute; right: calc(var(--pad) + 56px); bottom: 24px; display: flex; gap: 20px; font-size: 12px; color: rgba(255, 255, 255, .7); }
.hints span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Pages ---------- */
.page {
  position: fixed; inset: 0; z-index: 20; outline: none;
  opacity: 0; visibility: hidden; transform: translateY(40px);
  transition: opacity .45s ease, transform .6s var(--ease), visibility 0s .6s;
}
body[data-state="page"] .page { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .6s var(--ease); }
.page__bg { position: absolute; inset: 0; overflow: hidden; background: var(--black); }
.page__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); opacity: calc(1 - var(--dim, 0) * .82); }
.page__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 7, 10, .3) 0%, rgba(6, 7, 10, .72) 42%, rgba(6, 7, 10, .97) 74%), linear-gradient(90deg, rgba(6, 7, 10, .75), rgba(6, 7, 10, 0) 72%); }
.page.is-swap .page__bg img { animation: drift 20s ease-out both, fadein .7s ease both; }
.page.is-swap .page__inner { animation: pagein .6s var(--ease) both; }
@keyframes fadein { from { opacity: 0; } }
@keyframes pagein { from { opacity: 0; transform: translateY(22px); } }
.page__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; user-select: text; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
.page__inner { padding: 0 var(--pad) 80px; }

/* sticky console bar */
.pbar {
  position: sticky; top: 0; z-index: 5; height: clamp(60px, 9vh, 80px); padding: 0 var(--pad);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  background: linear-gradient(180deg, rgba(6, 7, 10, .82), rgba(6, 7, 10, 0));
  transition: background-color .3s ease;
}
.page.is-scrolled .pbar { background: rgba(6, 7, 10, .72); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.pbar__back { display: inline-flex; gap: 8px; align-items: center; font: 500 14px/1 var(--font-display); padding: 9px 14px 9px 9px; border-radius: 999px; background: rgba(22, 23, 29, .6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.pbar__back:hover { background: rgba(255, 255, 255, .2); }
.pbar__nav { display: flex; gap: clamp(14px, 2vw, 30px); margin-left: clamp(4px, 1vw, 16px); flex: 1; overflow-x: auto; scrollbar-width: none; }
.pbar__nav::-webkit-scrollbar { display: none; }
.pbar__nav a { font: 500 clamp(15px, 1.3vw, 19px)/1 var(--font-display); color: rgba(255, 255, 255, .55); padding: 10px 0; position: relative; white-space: nowrap; transition: color .2s; }
.pbar__nav a:hover, .pbar__nav a.is-on { color: var(--white); }
.pbar__nav a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--white); }
.pbar__cta { height: 40px; min-width: 0; padding: 0 20px; font-size: 14px; }
/* phone: the section links fold into one menu instead of a sideways scroll */
.pmenu { display: none; margin-left: auto; }
.pmenu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--font-display); padding: 11px 14px 11px 16px; border-radius: 999px; background: rgba(22, 23, 29, .6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.pmenu summary::-webkit-details-marker { display: none; }
.pmenu summary i { width: 16px; height: 10px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; transition: transform .2s; }
.pmenu[open] summary i { height: 0; border-bottom: 0; transform: rotate(45deg); box-shadow: 0 0 0 0 #fff; position: relative; }
.pmenu[open] summary i::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; border-top: 2px solid #fff; transform: rotate(90deg); }
.pmenu__panel { position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 100%); height: calc(100dvh - 100%); overflow-y: auto; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 16px var(--pad) 90px; background: rgba(6, 7, 10, .97); animation: fadein .25s ease both; }
.page.menu-open .pbar { background: rgb(6, 7, 10); backdrop-filter: none; -webkit-backdrop-filter: none; }
.pmenu__panel a { font: 600 clamp(28px, 9vw, 44px)/1.25 var(--font-display); letter-spacing: -.02em; color: rgba(255, 255, 255, .6); padding: 4px 0; }
.pmenu__panel a.is-on, .pmenu__panel a:active { color: var(--white); }
.page.menu-open .page__scroll { overflow: hidden; }

/* long-form copy: guides and legal */
.prose--article { max-width: 760px; }
.prose--article h2 { margin: 1.9em 0 .6em; font: 600 clamp(22px, 2.2vw, 32px)/1.15 var(--font-display); letter-spacing: -.02em; }
.prose--article h2:first-child { margin-top: 0; }
.prose--article h3 { margin: 1.5em 0 .5em; font: 600 20px/1.2 var(--font-display); }
.prose--article ul { margin: 0 0 1em; padding-left: 1.2em; }
.prose--article li { margin-bottom: .5em; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .84); }
.prose--article b { color: var(--white); font-weight: 600; }
.card--guide { padding: 26px !important; }
.card--guide .card__title { font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; line-height: 1.15; }

/* site footer on every page */
.pfoot { margin-top: clamp(40px, 8vh, 90px); padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, .12); }
.pfoot__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
.pfoot h3 { margin: 0 0 12px; font: 500 11px/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--gray-400); }
.pfoot a { display: block; padding: 5px 0; font-size: 14px; color: rgba(255, 255, 255, .78); }
.pfoot a:hover { color: var(--white); }
.pfoot .hub__legal { margin-top: 34px; }

.phero { min-height: min(58vh, 560px); display: flex; flex-direction: column; justify-content: flex-end; padding: 40px 0 clamp(28px, 5vh, 56px); max-width: 900px; }
.phero--compact { min-height: 0; padding-top: clamp(40px, 9vh, 96px); }
.phero__logo { max-height: clamp(40px, 7vh, 72px); max-width: 300px; object-fit: contain; object-position: left; align-self: flex-start; margin-bottom: 22px; }
.phero__title { margin: 0 0 18px; font: 600 clamp(34px, 5vw, 76px)/1.02 var(--font-display); letter-spacing: -.035em; text-wrap: balance; }
.phero__lead { margin: 0 0 28px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, .84); max-width: 62ch; text-wrap: pretty; }
.hub__wordmark { height: clamp(48px, 8vh, 84px); width: auto; align-self: flex-start; filter: invert(1); margin: 0 0 18px -8px; }
.hub__title { margin: 0 0 18px; font: 600 clamp(36px, 5.4vw, 80px)/1 var(--font-display); letter-spacing: -.035em; }
.hub__lead { margin: 0 0 28px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, .82); max-width: 60ch; }

.psec { padding: clamp(26px, 4.5vh, 52px) 0; }
.psec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 20px; }
.psec__head .hero__eyebrow { flex-basis: 100%; margin: 0; }
.psec__head h2 { margin: 0; font: 500 clamp(20px, 1.9vw, 28px)/1.15 var(--font-display); letter-spacing: -.01em; }
.psec--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 5vw, 80px); align-items: start; }
.psec--split .psec__head { display: block; margin: 0; }
.psec--split .psec__head .hero__eyebrow { margin-bottom: 12px; }
.psec--split .psec__head h2 { font: 600 clamp(28px, 3.3vw, 50px)/1.04 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.psec__intro { margin: -6px 0 22px; max-width: 64ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; color: rgba(255, 255, 255, .8); }
.psec__wide { margin-top: 26px; }
.prose p { margin: 0 0 1em; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .84); max-width: 62ch; text-wrap: pretty; }
.tlink { font: 500 15px/1 var(--font-display); color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 3px; transition: border-color .2s; }
.tlink:hover { border-color: var(--white); }

.hub__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hub__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px; }
.card--info { align-content: start; gap: 8px; }
.card--info .card__title { font-size: 18px; }
.card--info .card__label { font-size: 14px; line-height: 1.5; }
.card__n { font: 500 12px/1 var(--font-display); letter-spacing: .18em; color: var(--gray-400); margin-bottom: 6px; }

.case { flex: none; width: clamp(250px, 25vw, 340px); display: grid; gap: 6px; align-content: start; scroll-snap-align: start; transition: transform .25s var(--ease); }
.case-grid .case, .svc-grid .svc { width: auto; }
.case-grid, .svc-grid { gap: 30px 18px !important; }
.case__img { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--gray-900); margin-bottom: 8px; transition: box-shadow .2s; }
.case__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.case:hover, .case:focus-visible { transform: scale(1.025); outline: none; }
.case:hover .case__img, .case:focus-visible .case__img { box-shadow: 0 0 0 3px #fff; }
.case:hover .case__img img { transform: scale(1.05); }
.case__meta { font: 500 11px/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--gray-400); }
.case__title { font: 600 20px/1.2 var(--font-display); }
.case__stat { font-size: 14px; color: var(--gray-200); }
.case__stat b { color: var(--white); font: 600 16px/1 var(--font-display); margin-right: 4px; }

.ind { display: grid; gap: 8px; align-content: start; transition: transform .25s var(--ease); }
.ind__img { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--gray-900); margin-bottom: 8px; transition: box-shadow .2s; }
.ind__img img { width: 100%; height: 100%; object-fit: cover; }
.ind .hero__eyebrow { margin: 0; }
.ind__title { font: 600 clamp(20px, 2vw, 28px)/1.12 var(--font-display); letter-spacing: -.02em; }
.ind:hover, .ind:focus-visible { transform: scale(1.015); outline: none; }
.ind:hover .ind__img, .ind:focus-visible .ind__img { box-shadow: 0 0 0 3px #fff; }

.result { display: grid; gap: 6px; margin-bottom: 26px; }
.result__value { font: 600 clamp(72px, 11vw, 168px)/.9 var(--font-display); letter-spacing: -.05em; }
.result__label { font: 500 clamp(17px, 1.6vw, 22px)/1.2 var(--font-display); color: var(--gray-200); }
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 28px; }
.facts > div { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.facts dt { font: 500 11px/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 8px; }
.facts dd { margin: 0; font-size: 15px; line-height: 1.45; }
.facts dd a { border-bottom: 1px solid rgba(255, 255, 255, .3); }
.facts--stack { grid-template-columns: 1fr; }
.pquote { margin: 0; max-width: 980px; }
.pquote blockquote { margin: 0 0 18px; font: 500 clamp(24px, 3vw, 44px)/1.14 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.pquote figcaption { font-size: 15px; color: var(--gray-200); }

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 240px)); gap: 18px; }
.team__m { margin: 0; }
.team__m img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: var(--gray-900); margin-bottom: 12px; }
.team__m figcaption { display: grid; gap: 4px; font-size: 14px; color: var(--gray-200); }
.team__m b { font: 600 18px/1 var(--font-display); color: var(--white); }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.cform { display: grid; gap: 16px; padding: clamp(20px, 2.6vw, 34px); border-radius: 18px; background: rgba(22, 23, 29, .66); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.cform h2 { margin: 0 0 4px; font: 500 clamp(20px, 1.9vw, 26px)/1.15 var(--font-display); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform label { display: grid; gap: 8px; font: 500 13px/1 var(--font-display); color: var(--gray-200); }
.cform label i { font-style: normal; color: var(--gray-500, #7e8391); margin-left: 4px; }
.cform input, .cform select, .cform textarea {
  font: 400 16px/1.4 var(--font-body); color: var(--white); width: 100%;
  padding: 13px 14px; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, .16); background: rgba(6, 7, 10, .5);
  transition: border-color .2s, box-shadow .2s; user-select: text; -webkit-appearance: none; appearance: none;
}
.cform select { background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.cform select option { color: #000; }
.cform textarea { resize: vertical; min-height: 120px; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--white); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.cform.was-validated :invalid { border-color: #ff6b6b; }
.cform__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.cform__foot .btn:disabled { opacity: .6; cursor: default; }
.cform__note { margin: 0; flex: 1; min-width: 220px; font-size: 13px; line-height: 1.4; color: var(--gray-400); }
.cform__status { margin: 0; font-size: 14px; line-height: 1.5; min-height: 1.5em; }
.cform__status[data-state="error"] { color: #ff9b9b; }
.cform__status[data-state="ok"] { color: #8ff0b5; }
.cform__status a { text-decoration: underline; }
.cside { display: grid; gap: 22px; }
.cside__book { gap: 10px; padding: 22px; }
.cside__book .btn { justify-self: start; margin-top: 6px; height: 44px; padding: 0 22px; font-size: 15px; }
.booking { border-radius: 18px; overflow: hidden; background: #fff; }
.booking iframe { display: block; width: 100%; height: min(760px, 86vh); border: 0; }

.hub__row { display: flex; gap: 16px; overflow-x: auto; padding: 8px var(--pad) 18px; margin: -8px calc(var(--pad) * -1) 0; scroll-snap-type: x proximity; scroll-padding-left: var(--pad); scrollbar-width: none; }
.hub__row::-webkit-scrollbar { display: none; }
.svc { flex: none; width: clamp(240px, 24vw, 330px); display: grid; gap: 8px; align-content: start; scroll-snap-align: start; transition: transform .25s var(--ease); }
.svc__img { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--gray-900); box-shadow: 0 0 0 0 #fff; transition: box-shadow .2s; margin-bottom: 6px; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; }
.svc:hover, .svc:focus-visible { transform: scale(1.03); outline: none; }
.svc:hover .svc__img, .svc:focus-visible .svc__img { box-shadow: 0 0 0 3px #fff; }
.svc__title { font: 600 18px/1.2 var(--font-display); }
.svc__body { font-size: 14px; line-height: 1.45; color: var(--gray-200); }
.hub__grid { display: grid; gap: 14px; }
.hub__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub__grid + .hub__row { margin-top: 26px; }
.hub__grid .card { padding: 22px; }
.hub__grid .card__big { font-size: clamp(30px, 3.2vw, 46px); }
.card--link { transition: transform .2s var(--ease), box-shadow .2s; }
.card--link:hover, .card--link:focus-visible { transform: scale(1.02); box-shadow: 0 0 0 2.5px #fff; outline: none; }
.hub__why { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 5vw, 80px); align-items: end; }
.hub__why p:last-child { margin: 0; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: rgba(255, 255, 255, .82); }
.hub__big { margin: 0; font: 600 clamp(28px, 3.4vw, 52px)/1.04 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.review { flex: none; width: clamp(270px, 26vw, 360px); margin: 0; padding: 20px; border-radius: 14px; background: rgba(22, 23, 29, .62); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 12px; scroll-snap-align: start; }
.review__stars { color: #deae17; letter-spacing: 2px; font-size: 14px; }
.review blockquote { margin: 0; font-size: 14.5px; line-height: 1.5; flex: 1; }
.review figcaption { font-size: 13px; color: var(--gray-200); }
.review figcaption b { color: var(--white); margin-right: 6px; }
.faq { max-width: 860px; display: grid; gap: 8px; }
.faq details { border-radius: 12px; background: rgba(22, 23, 29, .62); border: 1px solid rgba(255, 255, 255, .1); }
.faq summary { cursor: pointer; padding: 16px 44px 16px 18px; font: 500 16px/1.3 var(--font-display); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p { margin: 0; padding: 0 18px 18px; font-size: 14.5px; line-height: 1.55; color: var(--gray-200); max-width: 70ch; }
.hub__closer { text-align: center; display: grid; justify-items: center; padding-top: clamp(48px, 9vh, 110px); }
.hub__closer .phero__lead { margin-inline: auto; }
.hub__legal a { text-decoration: underline; }
.hub__note { font-size: 13px; color: var(--gray-400); margin: 18px 0 0; }
.hub__legal { font-size: 12px; color: var(--gray-700); margin: 40px 0 0; }

/* ---------- Launch ---------- */
.launch { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #000; opacity: 0; visibility: hidden; pointer-events: none; }
body[data-state="launching"] .launch { opacity: 1; visibility: visible; transition: opacity .7s ease .15s; }
.launch__logo { transform: scale(.9); opacity: 0; display: grid; place-items: center; }
body[data-state="launching"] .launch__logo { transform: scale(1); opacity: 1; transition: transform 1.2s var(--ease) .2s, opacity .6s ease .2s; }


.noscript { position: fixed; inset: 0; z-index: 99; background: var(--black); display: grid; place-content: center; text-align: center; gap: 8px; }
.noscript a { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .cards { display: none; }
  .hints { display: none; }
  .psec--split, .contact { grid-template-columns: 1fr; }
  .pfoot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub__grid--3, .hub__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pbar__cta { display: none; }
}
@media (max-width: 640px) {
  :root { --tile: 68px; --gap: 10px; }
  .top__tabs { gap: 26px; }
  .top__tab { font-size: 20px; }
  .top__right { --hud: 34px; gap: 14px; }
  .top__clock { font-size: 20px; margin-left: 14px; }
  .rail__name { font-size: 20px; }
  .top__avatar { display: none; }
  .hero { bottom: max(28px, env(safe-area-inset-bottom)); }
  .hero__actions .btn { flex: 1; min-width: 0; padding: 0 18px; }
  .bg__scrim, body[data-tile="yardshark"] .bg__scrim {
    background: linear-gradient(180deg, rgba(6, 7, 10, .85) 0%, rgba(6, 7, 10, .15) 30%, rgba(6, 7, 10, .25) 45%, rgba(6, 7, 10, .94) 78%);
  }
  .cform__row { grid-template-columns: 1fr; }
  .pbar__nav { display: none; }
  .pmenu { display: block; }
  .pfoot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { bottom: 80px !important; }
  .mute { bottom: 14px; right: 14px; }
  .tile::before { display: none; }
  .bg__layer[data-fit="portrait"] > img { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .hub__grid--2, .hub__grid--3, .hub__grid--4 { grid-template-columns: 1fr; }
  .phero { min-height: 46vh; }
  .pbar { gap: 12px; }
}
@media (max-height: 760px) and (min-width: 641px) {
  .hero__blurb { display: none; }
  .hero__wordmark { width: min(44vh, 100%); }
}
@media (max-height: 620px) {
  .hero__blurb, .hero__tags { display: none; }
  .cards { display: none; }
}
@media (hover: none) {
  .hints { display: none; }
  .pbar__back { padding: 10px 16px; }
  .pbar__back kbd { display: none; }
  .pbar__back::before { content: "←"; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- a client's Settings screen, after the console's own settings ---------- */
.settings { position: fixed; inset: 0; z-index: 60; overflow: hidden; color: #fff; opacity: 0; visibility: hidden;
  background: linear-gradient(160deg, #262a33 0%, #1a1e26 48%, #13161c 100%);
  transition: opacity .45s ease, visibility 0s linear .45s; }
.settings.is-open { opacity: 1; visibility: visible; transition: opacity .45s ease; }
/* a big stage light: a hot spot just off the top, throwing a wide soft cone of cool white light down the
   screen. It sways slowly from its source and breathes, like the light on the console's settings screens */
/* the light hangs right above the title: --src-bx is its x across the light layer, which spans 140% of the
   screen from -20%, so 23% there is about 12% of the screen, over "Rohin's Settings" */
.settings { --src-bx: 23%; }
.settings__light { position: absolute; inset: -25% -20%; pointer-events: none; transform-origin: var(--src-bx) 16%;
  background:
    radial-gradient(ellipse 12% 9% at var(--src-bx) 16%, rgba(236, 240, 248, .42), rgba(220, 226, 238, .13) 55%, transparent 100%),
    conic-gradient(from 132deg at var(--src-bx) 16%, transparent 0deg, rgba(220, 226, 238, .05) 12deg, rgba(226, 232, 242, .14) 28deg,
      rgba(234, 238, 246, .2) 42deg, rgba(230, 234, 244, .19) 54deg, rgba(220, 226, 238, .11) 68deg, rgba(210, 216, 230, .04) 84deg, transparent 98deg);
  filter: blur(34px); mix-blend-mode: screen; animation: settings-beam 16s ease-in-out infinite alternate; }
@keyframes settings-beam {
  0%   { transform: rotate(-4deg); opacity: .82; }
  50%  { transform: rotate(1.5deg); opacity: 1; }
  100% { transform: rotate(5deg); opacity: .88; }
}
/* a faint neutral wash where the light lands */
/* it spills past every edge, so its slow sideways drift never uncovers a strip of bare background */
.settings::before { content: ""; position: absolute; inset: -10%; pointer-events: none;
  background: radial-gradient(ellipse 46% 72% at 21% 31%, rgba(150, 146, 160, .2), rgba(110, 108, 124, .07) 55%, transparent 82%);
  animation: settings-wash 16s ease-in-out infinite alternate; }
@keyframes settings-wash { from { opacity: .75; transform: translateX(-1.5vw); } to { opacity: 1; transform: translateX(1.5vw); } }
@keyframes settings-light { from { transform: translate(0, 0) scale(1); opacity: .8; } to { transform: translate(-6vw, -4vh) scale(1.1); opacity: 1; } }
/* and a faint second pool low on the right, drifting the other way */
.settings::after { content: ""; position: absolute; right: -20vw; bottom: -40vh; width: 70vw; height: 80vh; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(120, 140, 180, .08), transparent 70%); animation: settings-light 30s ease-in-out infinite alternate-reverse; }
.settings__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.settings__back { position: absolute; left: calc(var(--pad) - 44px); top: clamp(52px, 9vh, 92px); z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: rgba(255, 255, 255, .55); cursor: pointer; display: grid; place-items: center; transition: color .2s ease, background-color .2s ease; }
.settings__back:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.settings__back svg { width: 20px; height: 20px; }
/* a big close button, top right */
.settings__close { position: absolute; right: var(--pad); top: clamp(40px, 7.5vh, 78px); z-index: 2; width: clamp(52px, 4.2vw, 68px); height: clamp(52px, 4.2vw, 68px);
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .85); cursor: pointer;
  display: grid; place-items: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .3s var(--ease); }
.settings__close svg { width: 46%; height: 46%; }
.settings__close:hover, .settings__close:focus-visible { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 0 24px rgba(255, 255, 255, .15); transform: rotate(90deg); outline: none; }
.settings__title { position: relative; z-index: 1; margin: 0; padding: clamp(48px, 8.5vh, 88px) var(--pad) 0;
  font: 300 clamp(30px, 3.3vw, 52px)/1.1 var(--font-display); letter-spacing: .005em; color: rgba(255, 255, 255, .94);
  transform: translateY(10px); transition: transform .6s var(--ease); }
.settings.is-open .settings__title { transform: none; }
.settings__body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(200px, 25%) 1fr; gap: clamp(24px, 4vw, 80px);
  padding: clamp(36px, 7vh, 80px) var(--pad) 0 calc(var(--pad) + clamp(24px, 4.5vw, 90px)); }
/* the list: the selected service bright, the rest dimmed; it slides so the selection sits in the second row */
.settings__nav { height: calc(var(--srow) * 5); overflow: hidden; --srow: clamp(54px, 9.6vh, 92px); max-width: 360px; }
.settings__list { list-style: none; margin: 0; padding: 0; transition: transform .45s var(--ease); }
.settings__list li { height: var(--srow); display: flex; align-items: center; cursor: pointer;
  font: 300 clamp(17px, 1.45vw, 25px)/1 var(--font-display); color: rgba(255, 255, 255, .3); transition: color .25s ease; }
.settings__list li.is-on { color: #fff; }
/* the selected service sits in a thin outlined box, like the console's focus: a faint fill, a light hairline, square corners */
.settings__list li { position: relative; padding-left: clamp(14px, 1.2vw, 20px); }
.settings__list li::before { content: ""; position: absolute; left: 0; right: 0; top: 17%; bottom: 17%; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 2px; background: rgba(255, 255, 255, .045);
  box-shadow: 0 0 18px rgba(255, 255, 255, .04); opacity: 0; transition: opacity .3s ease; }
.settings__list li.is-on::before { opacity: 1; }
/* each service's logo sits to its left, dimmed with its name until selected */
.settings__list li { gap: clamp(14px, 1.2vw, 20px); }
.settings__icon { flex: none; width: clamp(26px, 2.1vw, 36px); height: clamp(26px, 2.1vw, 36px); display: grid; place-items: center; opacity: .38; transition: opacity .25s ease; }
.settings__icon img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.settings__list li.is-on .settings__icon { opacity: 1; }
.settings__list li:hover:not(.is-on) .settings__icon { opacity: .65; }
.settings__list li:hover:not(.is-on) { color: rgba(255, 255, 255, .6); }
/* the right side: the service's row, then its view in a white-outlined frame like the console's focus */
.settings__row { margin: 0; height: var(--srow, 70px); display: flex; align-items: center; padding: 0 20px;
  font: 300 clamp(17px, 1.45vw, 25px)/1 var(--font-display); color: rgba(255, 255, 255, .92); }
.settings__panel { --srow: clamp(54px, 9.6vh, 92px); max-width: 1100px; }
.settings__panel > * { animation: fadein .35s ease both; } /* each service's view fades in as it is picked */
.settings__frame { aspect-ratio: 16 / 9; max-height: 52vh; border: 2px solid rgba(255, 255, 255, .82); border-radius: 4px; padding: 6px;
  box-shadow: 0 0 24px rgba(255, 255, 255, .06); background: rgba(10, 12, 16, .35); }
.settings__ph { height: 100%; border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)); color: rgba(255, 255, 255, .6); text-align: center; }
.settings__ph svg { width: clamp(36px, 3.6vw, 56px); height: auto; opacity: .7; }
.settings__ph span { font: 300 clamp(15px, 1.2vw, 20px)/1.2 var(--font-display); color: rgba(255, 255, 255, .85); }
.settings__ph small { font-size: 12px; letter-spacing: .04em; color: rgba(255, 255, 255, .45); }
body[data-state="settings"] .home { opacity: 1; transform: scale(1.03); filter: blur(16px) brightness(.4); }
@media (prefers-reduced-motion: reduce) { .settings__light, .settings::before, .settings::after { animation: none; } }
@media (max-width: 760px) {
  .settings__body { grid-template-columns: 1fr; padding-left: var(--pad); }
  .settings__nav { height: calc(var(--srow) * 3); }
}