/* limitless media */

:root{
  --bg: #0d0c0a;
  --ink: #e6e1d6;
  --mut: #8f897b;
  --hair: rgba(230,225,214,.16);
  --hair2: rgba(230,225,214,.07);
  --ui: "Tenor Sans", Optima, "Gill Sans", "Trebuchet MS", sans-serif;
  --burn: 0;                 /* the light leak, 0..1, written by the rig */
  --glow: 255,223,170;       /* colour of whatever beam is on the headline */
}

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

canvas#rig{
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
/* film: the room is dull at the edges so the light can be loud in the middle */
body.home::before{
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle farthest-corner at 50% 55%, rgba(0,0,0,0) 28%, rgba(0,0,0,.5) 100%);
}
/* film: grain over everything, stepped like a print rather than smeared like a video effect */
.grain{
  position: fixed; inset: 0; z-index: 6; pointer-events: none;
  background-repeat: repeat;
  animation: grain .6s steps(1, end) infinite;
}
@keyframes grain{
  0%   { background-position: 0 0; }
  16%  { background-position: -37px 53px; }
  33%  { background-position: 61px -29px; }
  50%  { background-position: -19px -71px; }
  66%  { background-position: 83px 47px; }
  83%  { background-position: -59px 13px; }
  100% { background-position: 23px -91px; }
}
body.reduced .grain{ animation: none; }

html{ color-scheme: dark; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection{ background: var(--ink); color: var(--bg); }
a{ color: inherit; text-decoration: none; }

/* text the rig can light */
.lit{ color: rgba(230,225,214, calc(0.62 + 0.38 * var(--lit, 0))); }
body.reduced .lit{ color: var(--ink); }
/* without a cursor there is nothing to light with */
@media (hover: none){ .lit{ color: var(--ink); } }
/* pages without the rig: text carries its own light */
body.norig .lit{ color: rgba(230,225,214,.78); transition: color .2s; }
body.norig .pcard:hover .pname.lit,
body.norig h1.lit{ color: var(--ink); }

a:focus-visible, button:focus-visible{
  outline: 1px solid var(--ink); outline-offset: 4px;
}

/* ─── header ──────────────────────────────────────────────────────────────
   fixed, with an ambient falloff so content scrolls into shadow beneath it */
header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.3rem 4vw 2.2rem;
  background: linear-gradient(to bottom, rgba(13,12,10,.94) 45%, rgba(13,12,10,0));
  pointer-events: none;
}
header a{ pointer-events: auto; }
.mark{ display: inline-flex; align-items: center; gap: .7rem; }
/* the wordmark is one shape. the colour plates sit under a white plate that is a hair
   smaller and nudged, all clipped to the glyphs, so colour only shows at the edge. */
.mark .wm{ display: block; overflow: visible; }
.mark .wm text{ font: 700 14px "Albertus MT Std", "Albertus MT", Albertus, "Albertus Nova", Optima, Philosopher, "Tenor Sans", serif; letter-spacing: .1px; }
/* the orb: a thin rainbow ring with a bloom, turning slowly, left of the name */
.orb{
  position: relative; width: 15px; height: 15px; flex: none;
  animation: orb 18s linear infinite;
}
.orb::before, .orb::after{
  content: ""; position: absolute; border-radius: 50%;
  background: conic-gradient(from 0deg, #d97b7b, #dba97a, #d9cf85, #86c9a0, #7fbfd9, #8b90d6, #bd8ad1, #d98ab5, #d97b7b);
}
.orb::after{
  inset: 0;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 calc(100% - 1.7px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 calc(100% - 1.7px));
}
.orb::before{
  inset: -3px; filter: blur(2.5px); opacity: .28;
  -webkit-mask: radial-gradient(farthest-side, transparent 50%, #000 66%, #000 74%, transparent 100%);
          mask: radial-gradient(farthest-side, transparent 50%, #000 66%, #000 74%, transparent 100%);
}
@keyframes orb{ to{ transform: rotate(360deg); } }
body.reduced .orb{ animation: none; }
@media (prefers-reduced-motion: reduce){ .orb{ animation: none; } }
nav{ display: flex; gap: 2rem; }
nav a{
  font-family: var(--ui); font-size: 12px; letter-spacing: .08em;
  color: var(--mut); transition: color .15s;
}
nav a:hover{ color: var(--ink); }
nav a[aria-current="page"]{ color: var(--ink); }

main{ position: relative; z-index: 1; }
#products, #contact, .legal, .pcard{ scroll-margin-top: 5.5rem; }

/* ─── home: one static frame, nothing to scroll ──────────────────────────── */
body.home{ height: 100svh; overflow: hidden; }
.title-card{
  height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding: 0 4vw 13svh;
}
.card-main{
  align-self: end;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 3rem;
}
.hero h1{
  font-size: clamp(2.1rem, 5.5vw, 4.4rem);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.05;
  max-width: 14em;
  text-shadow: 0 0 calc(var(--lit, 0) * 28px) rgba(var(--glow), calc(var(--lit, 0) * 0.42));
}
body.norig .hero h1, body.reduced .hero h1{ text-shadow: none; }
/* the one word allowed to hold colour all the time: liquid gel tones, slow drift */
.hero h1 em{
  font-family: "Times New Roman", Times, serif;
  font-style: italic; font-weight: 400;
  letter-spacing: 0;
  background:
    radial-gradient(130% 200% at 24% 18%, rgba(255,244,224,.32), transparent 55%),
    linear-gradient(113deg, #f2a03f, #e2519a, #5b5bd8, #3fc4bd, #e2519a, #f2a03f);
  background-size: 100% 100%, 340% 340%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: liquid 11s ease-in-out infinite;
  filter: saturate(calc(1.15 + var(--burn) * 1.1)) brightness(calc(1 + var(--burn) * 0.28));
}
@keyframes liquid{
  0%, 100%{ background-position: 0 0, 0% 38%; }
  50%{ background-position: 0 0, 100% 62%; }
}
body.reduced .hero h1 em{ animation: none; }
.sub{
  margin-top: 1rem;
  font-family: var(--ui); font-size: 12px; letter-spacing: .08em;
  color: var(--mut);
}

/* the product index, bottom right */
.index{
  display: flex; flex-direction: column; gap: .5rem;
  text-align: right; flex: none;
}
.index a{
  font-family: var(--ui); font-size: 12px; letter-spacing: .08em;
  color: var(--mut); transition: color .15s;
  display: grid; grid-template-columns: 2ch 10.5em;
  gap: .8rem; justify-content: end; text-align: left;
  padding: .15rem 0;
}
.index a .n{ text-align: right; }
.index .n{ color: rgba(230,225,214,.58); font-variant-numeric: tabular-nums; }
.index a:hover .n{ color: var(--mut); }
.index a:hover .lit{ color: var(--ink); }

/* the left counterweight, on the home frame only */
.card-foot{
  position: fixed; left: 4vw; bottom: 1.1rem; z-index: 5;
  display: flex; gap: 1.4rem;
  font-family: var(--ui); font-size: 11px; letter-spacing: .08em;
}
.card-foot a{ color: var(--mut); transition: color .15s; }
.card-foot a:hover{ color: var(--ink); }

/* ─── shared section furniture ───────────────────────────────────────────── */
.label{
  font-family: var(--ui); font-size: 12px; letter-spacing: .08em;
  color: var(--mut); margin-bottom: 1rem;
}
.idx, .tag{
  font-family: var(--ui); font-size: 12px; letter-spacing: .08em;
  color: var(--mut);
}
.act{
  background: none; border: none; padding: 0; font: inherit;
  font-family: var(--ui); font-size: 12px; letter-spacing: .06em;
  color: var(--ink); cursor: pointer;
  border-bottom: 1px solid var(--hair);
  transition: border-color .15s, color .15s;
}
.act:hover{ border-color: var(--ink); }

/* a screenshot behind a link: black bed, hairline frame, lifts on hover */
.pshot{
  display: block; border: 1px solid var(--hair); background: #000;
  transition: border-color .25s;
}
.pshot img{
  display: block; width: 100%; height: auto;
  opacity: .9; transition: opacity .25s;
}
.pshot.none{
  display: grid; place-items: center; aspect-ratio: 16 / 10;
  padding: 1rem; text-align: center;
  font-family: var(--ui); font-size: 12px; letter-spacing: .06em;
  color: rgba(230,225,214,.55);
  background:
    repeating-linear-gradient(-45deg, rgba(230,225,214,.03) 0 1px, transparent 1px 9px), #000;
}
a:hover > .pshot, a:hover .pshot{ border-color: rgba(230,225,214,.42); }
a:hover .pshot img{ opacity: 1; }

/* the dash-led feature lines */
.plines{ display: grid; gap: .4rem; }
.plines span{
  font-size: 12.5px; color: var(--mut); line-height: 1.5;
  padding-left: .9rem; position: relative;
}
.plines span::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 4px; height: 1px; background: var(--mut);
}

.more{
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-family: var(--ui); font-size: 12px; letter-spacing: .06em;
  color: var(--ink); border-bottom: 1px solid var(--hair);
  transition: border-color .2s;
}
.more .arw{ transition: transform .2s; }
a:hover .more{ border-color: var(--ink); }
a:hover .more .arw{ transform: translateX(3px); }

/* ─── products page: the full showcase, nothing hidden ───────────────────── */
.showcase{ max-width: 84rem; margin: 0 auto; padding: 7.5rem 4vw 10vh; }

.pcard{
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 26rem) minmax(0, 1fr);
  grid-template-areas:
    "idx  name  tag"
    "idx  desc  desc"
    ".    shot  body";
  column-gap: 2.4rem; row-gap: .6rem;
  align-items: start;
  padding: 2rem 0 2.4rem;
  border-top: 1px solid var(--hair);
}
.pcard:last-child{ border-bottom: 1px solid var(--hair); }
.pcard .idx{ grid-area: idx; padding-top: .55rem; }
.pcard .tag{ grid-area: tag; justify-self: end; padding-top: .7rem; }
.pcard .pname{
  grid-area: name;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.05;
}
.pcard:hover .pname.lit{ color: var(--ink); }
.pcard .pdesc{ grid-area: desc; font-size: 13px; color: var(--mut); }
.pcard > .pshot, .pcard > .shot-pair{ grid-area: shot; margin-top: 1.1rem; }
.pcard > .pshot.none{ aspect-ratio: auto; min-height: 10rem; }
.pcard .pbody{
  grid-area: body; align-self: center; margin-top: 1.1rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;
}

/* a phone product: two tall screens instead of one wide one */
.shot-pair{
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: .7rem; max-width: 23rem;
}

/* ─── product detail pages: one of three templates, tinted by the product ────
   sphere: editorial dark, serif headline, a pale card over the hero
   era:    bold gradient headline, the product floating in a colour wash
   aurora: centred headline over a glowing wave, then alternating rows     */
.detail{
  max-width: 68rem; margin: 0 auto;
  padding: 8.5rem 4vw 6rem;
  position: relative; z-index: 1;
  --accent: 255,223,170;
  counter-reset: cap;
}
.detail .status{
  font-family: var(--ui); font-size: 12px; letter-spacing: .08em;
  color: var(--mut);
}
.detail .status b{ font-weight: inherit; color: rgb(var(--accent)); }
.display{
  font-family: "Instrument Serif", "Times New Roman", serif; font-weight: 400;
  font-size: clamp(2.6rem, 5.6vw, 4.8rem); line-height: .98; letter-spacing: -.02em;
  max-width: 15ch; margin-top: 1.1rem; color: var(--ink);
  text-shadow: 0 0 60px rgba(var(--accent), .22);
}
.pills{ display: flex; flex-wrap: wrap; gap: .5rem; }
.pill{
  font-family: var(--ui); font-size: 11px; letter-spacing: .08em; color: var(--ink);
  padding: .3rem .7rem; border: 1px solid rgba(var(--accent), .45); border-radius: 999px;
}
.stat{
  display: grid; grid-template-rows: 1fr auto auto; align-content: end; gap: .3rem;
  padding: 1.4rem 1.5rem; border: 1px solid rgba(var(--accent), .3);
  background: linear-gradient(160deg, rgba(var(--accent), .14), rgba(var(--accent), .03));
}
.stat .big{
  font-family: "Instrument Serif", serif; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1;
  color: rgb(var(--accent)); letter-spacing: -.02em;
}
.stat .lbl{ font-family: var(--ui); font-size: 12px; letter-spacing: .08em; color: var(--mut); }
.stat .stat-fig{ margin: 0 0 .8rem; min-height: 0; overflow: hidden; border: 1px solid rgba(var(--accent), .25); }
.stat .stat-fig img{ width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; opacity: .9; }
.detail figcaption{
  font-family: var(--ui); font-size: 12px; letter-spacing: .06em;
  color: var(--mut); margin-top: .7rem;
}
.detail figcaption::before{ counter-increment: cap; content: counter(cap, decimal-leading-zero) " / "; color: rgb(var(--accent)); }
.detail .act{ border-bottom-color: rgba(var(--accent), .6); }
.detail .act:hover{ border-bottom-color: rgb(var(--accent)); }

/* sphere */
.sphere-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.4rem; align-items: stretch; margin-top: 2.6rem; }
.sphere-grid .hero img{ width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sphere-grid .hero{ margin: 0; display: grid; grid-template-rows: 1fr auto; }
.card{
  position: relative; z-index: 2; width: min(100%, 34rem); margin: -3.2rem 0 0 4vw;
  padding: 1.4rem 1.5rem 1.5rem; display: grid; gap: .9rem;
  color: #1a1714; background: color-mix(in srgb, rgb(var(--accent)) 22%, #f4f0e7);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
}
.card .pill{ color: #1a1714; border-color: rgba(26,23,20,.35); }
.card .card-line{ font-family: "Instrument Serif", serif; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.01em; }
.card .shot{ margin: 0; }
.card .shot img{ border-color: rgba(26,23,20,.2); }
.card .act{ color: #1a1714; border-bottom-color: rgba(26,23,20,.5); justify-self: start; }
.card .act:hover{ border-bottom-color: #1a1714; }
.tpl-sphere .shots, .tpl-sphere > .shot{ margin-top: 3.4rem; }

/* era */
.tpl-era{ overflow: visible; }
.era-wash{
  position: fixed; left: 0; right: 0; top: 0; height: 46rem; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 60% at 78% 32%, rgba(var(--accent), .34), transparent 70%),
    radial-gradient(40% 50% at 18% 20%, rgba(120, 230, 200, .12), transparent 70%);
  filter: blur(10px);
}
.era-hero{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; margin-top: 1rem; min-height: 30rem; }
.era-copy{ display: grid; gap: 1.6rem; justify-items: start; }
.display.grad{
  font-family: Syne, "Helvetica Neue", sans-serif; font-weight: 800; letter-spacing: -.03em; line-height: .95;
  font-size: clamp(2.2rem, 4.3vw, 3.8rem); max-width: 20ch;
  background: linear-gradient(120deg, #fff 0%, rgb(var(--accent)) 55%, color-mix(in srgb, rgb(var(--accent)) 40%, #fff) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.circle-cta{ display: inline-flex; align-items: center; gap: .9rem; font-family: var(--ui); font-size: 12px; letter-spacing: .08em; color: var(--ink); }
.circle-cta .ring{
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(var(--accent), .7); color: rgb(var(--accent)); font-size: 1.2rem;
  transition: background .2s, color .2s, transform .2s;
}
.circle-cta:hover .ring{ background: rgb(var(--accent)); color: #0d0c0a; transform: translateX(3px); }
.era-float{ position: relative; display: grid; place-items: center; min-height: 26rem; }
.era-float figure{ margin: 0; position: absolute; }
.era-float img{ display: block; height: auto; border: 1px solid rgba(var(--accent), .35); background: #000; box-shadow: 0 40px 90px -30px rgba(var(--accent), .55), 0 20px 50px -20px rgba(0,0,0,.9); }
.phones3 .ph:nth-child(1){ transform: translateX(-38%) rotate(-9deg) scale(.9); z-index: 1; }
.phones3 .ph:nth-child(2){ transform: translateY(-4%); z-index: 3; }
.phones3 .ph:nth-child(3){ transform: translateX(38%) rotate(9deg) scale(.9); z-index: 2; }
.phones3 .ph img{ width: 11.5rem; }
.land2 .lp:nth-child(1){ transform: translate(-8%, -12%) rotate(-3deg); z-index: 2; }
.land2 .lp:nth-child(2){ transform: translate(10%, 14%) rotate(2.5deg) scale(.92); z-index: 1; }
.land2 .lp img{ width: 26rem; }
.tpl-era .stat{ width: 15rem; margin-top: 1.5rem; }
.tpl-era .shots, .tpl-era > .shot{ margin-top: 3.4rem; }

/* aurora */
.tpl-aurora{ text-align: center; }
.aurora{ position: fixed; left: 0; right: 0; top: 2rem; height: 34rem; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora i{
  position: absolute; left: -10%; right: -10%; height: 9rem; border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent), .55), rgba(var(--accent), .2), transparent);
  filter: blur(26px); transform-origin: center;
}
.aurora i:nth-child(1){ top: 26%; transform: rotate(-7deg) scaleY(.5); }
.aurora i:nth-child(2){ top: 44%; transform: rotate(4deg) scaleY(.35); opacity: .7; }
.aurora i:nth-child(3){ top: 60%; transform: rotate(-3deg) scaleY(.25); opacity: .45; }
body:not(.reduced) .aurora i{ animation: aurora 14s ease-in-out infinite alternate; }
.aurora i:nth-child(2){ animation-delay: -5s; } .aurora i:nth-child(3){ animation-delay: -9s; }
@keyframes aurora{ to{ transform: translateX(6%) rotate(-5deg) scaleY(.45); } }
.aurora-hero{ display: grid; justify-items: center; gap: 1.4rem; padding: 3rem 0 2rem; }
.aurora-hero .display{ max-width: 18ch; }
.pill-cta{
  font-family: var(--ui); font-size: 12px; letter-spacing: .08em; color: #0d0c0a;
  background: rgb(var(--accent)); padding: .7rem 1.2rem; border-radius: 999px;
  transition: transform .2s, box-shadow .2s;
}
.pill-cta:hover{ transform: translateY(-1px); box-shadow: 0 12px 30px -12px rgba(var(--accent), .8); }
.tpl-aurora .stat{ margin: 1rem auto 0; width: 15rem; text-align: left; }
.row{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 2.4rem; align-items: center; margin-top: 4.5rem; text-align: left; }
.row:nth-of-type(even){ grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }
.row:nth-of-type(even) .row-title{ order: 2; text-align: right; }
.row-title{ font-family: "Instrument Serif", serif; font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.05; letter-spacing: -.015em; }
.row-title::before{ counter-increment: cap; content: counter(cap, decimal-leading-zero); display: block; font-family: var(--ui); font-size: 12px; letter-spacing: .08em; color: rgb(var(--accent)); margin-bottom: .6rem; }
.row .shot{ margin: 0; width: 100%; }
.tpl-aurora .note{ margin-top: 1rem; font-family: var(--ui); font-size: 12px; letter-spacing: .06em; color: var(--mut); }

/* captures arrive as you reach them; only when the script is there to let them in */
.detail.reveal .rv{ opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.detail.reveal .rv.in{ opacity: 1; transform: none; }

/* ─── screenshots on detail pages ─────────────────────────────────────────
   sized to be read at a glance, not to take the screen. a capture that is
   taller than the window is worse than a smaller one. */
.shot{ width: min(100%, 36rem); margin: 1.6rem 0 0; }
.shot img{
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hair); background: #000;
}
.shot figcaption{
  font-family: var(--ui); font-size: 12px; letter-spacing: .06em;
  color: var(--mut); margin-top: .7rem;
}
/* slate-style captions, numbered in the accent */
.detail figcaption::before{
  counter-increment: cap; content: counter(cap, decimal-leading-zero) " / ";
  color: rgb(var(--accent));
}
/* captures laid down by hand: a hair of tilt, straightening when you look at one */
.detail .shot img, .detail .phones img{ transition: transform .5s ease, box-shadow .5s ease, border-color .5s; }
.detail > .shot:nth-of-type(odd) img, .shots .shot:first-child img, .phones figure:nth-child(odd) img{ transform: rotate(-.6deg); }
.detail > .shot:nth-of-type(even) img, .shots .shot:last-child img, .phones figure:nth-child(even) img{ transform: rotate(.6deg); }
.detail .shot:hover img, .detail .phones figure:hover img{
  transform: none; border-color: rgba(var(--accent), .55);
  box-shadow: 0 0 0 1px rgba(var(--accent), .18), 0 18px 60px -20px rgba(var(--accent), .45);
}
.detail .cta .act{ border-bottom-color: rgba(var(--accent), .6); }
.detail .cta .act:hover{ border-bottom-color: rgb(var(--accent)); }
body.reduced .detail .shot img, body.reduced .detail .phones img{ transition: none; }

/* two captures side by side, together no wider than one on its own */
.shots{
  width: 100%; margin: 0;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.4rem;
}
.shots .shot{ width: 100%; margin: 0; }

/* phone captures: a wrapping row of tall screens */
.phones{
  width: 100%; margin: 3.4rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 9rem));
  justify-content: start; gap: 1rem 1.1rem;
}
.phones figure{ margin: 0; }
.phones img{
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hair); background: #000;
}
.phones figcaption{
  font-family: var(--ui); font-size: 11px; letter-spacing: .06em;
  color: var(--mut); margin-top: .5rem;
}

/* ─── legal pages ────────────────────────────────────────────────────────── */
.legal{
  max-width: 34rem; margin: 0 auto;
  padding: 9rem 4vw 6rem;
  position: relative; z-index: 1;
}
.legal h1{ font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; }
.legal .updated{
  font-family: var(--ui); font-size: 12px; color: var(--mut);
  margin: .6rem 0 2.4rem;
}
.legal h2{ font-size: 13px; font-weight: 600; margin: 2.4rem 0 .5rem; }
.legal h2 .n{
  font-family: var(--ui); font-size: 12px;
  letter-spacing: .08em; color: var(--mut); margin-right: .7rem;
}
.legal p{ font-size: 14px; line-height: 1.65; color: var(--ink); opacity: .78; }

/* ─── the lights: a readout that opens into presets and a picker ─────────── */
.console{ position: fixed; right: 4vw; bottom: 1.1rem; z-index: 5; display: flex; align-items: center; gap: .4rem; transition: opacity .2s; }
.console.hidden{ opacity: 0; pointer-events: none; }
.console button, .console .pick{
  font-family: var(--ui); font-size: 11px; letter-spacing: .08em; color: var(--mut);
  background: rgba(13,12,10,.55); border: 1px solid var(--hair2); border-radius: 999px;
  padding: .5rem .8rem; display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  backdrop-filter: blur(6px); transition: color .15s, border-color .15s;
}
.console button:hover{ color: var(--ink); border-color: var(--hair); }
.console .swatch{ width: 9px; height: 9px; border-radius: 50%; background: #ffdfaa; box-shadow: 0 0 10px currentColor; flex: none; }
.console .nxt{ color: var(--ink); opacity: .55; font-size: 14px; line-height: 1; margin-left: .05rem; transition: opacity .15s, transform .15s; }
.console .cue:hover .nxt{ opacity: 1; transform: translateX(2px); }
.console .follow .dot{ width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--mut); flex: none; transition: background .2s, box-shadow .2s, border-color .2s; }
.console .follow[aria-pressed="true"]{ color: var(--ink); }
.console .follow[aria-pressed="true"] .dot{ background: var(--ink); border-color: var(--ink); box-shadow: 0 0 8px rgba(230,225,214,.6); }
.console .pick{ padding: .42rem; }
.console .pick input{ width: 14px; height: 14px; padding: 0; border: none; background: none; cursor: pointer; }
.console .pick input::-webkit-color-swatch-wrapper{ padding: 0; }
.console .pick input::-webkit-color-swatch{ border: 1px solid var(--hair); border-radius: 50%; }

body.dbo main, body.dbo header, body.dbo footer{ opacity: .16; transition: opacity .25s; }
main, header, footer{ transition: opacity .25s; }

/* ─── footer ─────────────────────────────────────────────────────────────── */
footer{
  position: relative; z-index: 1;
  padding: 3rem 4vw 2.2rem;
  border-top: 1px solid var(--hair);
  font-family: var(--ui); font-size: 12px; letter-spacing: .06em;
  color: var(--mut);
}
.foot-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.foot-col{ display: grid; gap: .6rem; align-content: start; justify-items: start; min-width: 0; }
.foot-h{ font-size: 11px; letter-spacing: .14em; color: rgba(230,225,214,.58); margin-bottom: .15rem; }
.foot-mark{ font: 700 14px "Albertus MT Std", "Albertus MT", Albertus, "Albertus Nova", Optima, Philosopher, serif; color: var(--ink); letter-spacing: .1px; }
.quiet{ color: rgba(230,225,214,.58); }
footer a{ color: var(--mut); transition: color .15s; overflow-wrap: anywhere; }
footer a:hover{ color: var(--ink); }
.foot-base{
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--hair2);
}

/* ─── company pages: the studio, careers, 404 ───────────────────────────── */
.skip{ position: absolute; left: -999px; top: 1rem; z-index: 9; padding: .5rem .8rem; background: var(--bg); color: var(--ink); font-family: var(--ui); font-size: 12px; letter-spacing: .06em; border: 1px solid var(--hair); }
.skip:focus{ left: 1rem; }
.page{ max-width: 44rem; margin: 0 auto; padding: 9rem 4vw 6rem; position: relative; z-index: 1; }
.page h1{ font-family: "Instrument Serif", serif; font-weight: 400; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; letter-spacing: -.02em; }
.page .status{ font-family: var(--ui); font-size: 12px; letter-spacing: .08em; color: var(--mut); margin-top: .8rem; }
.page .status b{ font-weight: inherit; color: rgba(230,225,214,.5); }
.page .lede{ margin-top: 1.4rem; max-width: 32rem; font-size: 17px; line-height: 1.5; color: var(--ink); opacity: .85; }
.page h2{ font-family: var(--ui); font-size: 11px; font-weight: 400; letter-spacing: .14em; color: var(--mut); margin: 3rem 0 .4rem; }
.page .kv{ display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: .3rem 1.4rem; padding: .85rem 0; border-top: 1px solid var(--hair2); }
.page .kv b{ font-weight: 600; font-size: 13px; }
.page .kv p{ font-size: 13.5px; color: var(--mut); line-height: 1.55; }
.page .cta{ margin-top: 3rem; }
.client-line{ margin-top: .6rem; font-family: "Instrument Serif", serif; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.25; color: var(--ink); opacity: .9; }
.client-line b{ font-weight: 400; color: var(--mut); padding: 0 .25em; }
.page .quiet, .clients .quiet{ display: block; margin-top: .6rem; font-family: var(--ui); font-size: 12px; letter-spacing: .06em; }
.clients{ max-width: 84rem; margin: 0 auto; padding: 0 4vw 7rem; }

/* ─── proof: team, work, quotes, availability (placeholder data, see MOCK-DATA.md) ── */
.team{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; margin-top: .8rem; }
.person{ display: grid; grid-template-columns: 2.6rem minmax(0,1fr); gap: .9rem; align-items: center; padding: .9rem 0; border-top: 1px solid var(--hair2); }
.avatar{ width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair); font-family: "Instrument Serif", serif; font-size: 1.1rem; color: var(--ink); background: linear-gradient(160deg, rgba(230,225,214,.08), transparent); }
.person b{ display: block; font-size: 13px; font-weight: 600; }
.person span{ font-family: var(--ui); font-size: 12px; letter-spacing: .06em; color: var(--mut); }
.cases{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; margin-top: .8rem; }
.case{ display: grid; gap: .7rem; align-content: start; padding: 1.2rem 1.3rem 1.4rem; border: 1px solid var(--hair); background: linear-gradient(170deg, rgba(230,225,214,.04), transparent); }
.case .who{ font-family: var(--ui); font-size: 11px; letter-spacing: .1em; color: var(--mut); }
.case h3{ font-family: "Instrument Serif", serif; font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.01em; }
.case .nums{ display: flex; gap: 1.2rem; margin-top: .2rem; }
.case .nums b{ display: block; font-family: "Instrument Serif", serif; font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--ink); }
.case .nums span{ font-family: var(--ui); font-size: 11px; letter-spacing: .06em; color: var(--mut); }
.case p{ font-size: 13px; color: var(--mut); line-height: 1.55; }
.case .prod{ font-family: var(--ui); font-size: 11px; letter-spacing: .08em; color: var(--ink); border-bottom: 1px solid var(--hair); justify-self: start; }
.quote{ margin-top: 4.5rem; padding-top: 2.2rem; border-top: 1px solid var(--hair2); max-width: 40rem; }
.quote blockquote{ font-family: "Instrument Serif", serif; font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.quote blockquote::before{ content: "\201C"; color: rgb(var(--accent, 230,225,214)); margin-right: .1em; }
.quote cite{ display: block; margin-top: .9rem; font-style: normal; font-family: var(--ui); font-size: 12px; letter-spacing: .06em; color: var(--mut); }
.quotes{ display: grid; gap: 1.6rem; margin-top: .4rem; }
.quotes .quote{ margin-top: 0; padding-top: 1.2rem; }
.quotes .quote blockquote{ font-size: 1.25rem; }
.tpl-aurora .quote{ margin-left: auto; margin-right: auto; text-align: left; }
.pill.avail, .avail{ font-family: var(--ui); font-size: 11px; letter-spacing: .08em; color: var(--mut); border: 1px dashed var(--hair); border-radius: 999px; padding: .3rem .7rem; }
.pcard .avail{ margin-left: 1.1rem; }

/* ─── contact: a cold open, then a sandbox ───────────────────────────────── */
body.contact{ --accent: 255,43,214; min-height: 100vh; }
#flare{ position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body.contact .grain{ z-index: 6; }
.cuts{ position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; background: transparent; }
.cuts.off{ display: none; }
/* the cold open is only the word and the light: chrome waits for the stage */
body.contact header, body.contact footer{ transition: opacity .4s ease .1s; }
body.contact:not(.ready) header, body.contact:not(.ready) footer{ opacity: 0; pointer-events: none; }
.cut-word{ font-family: "Instrument Serif", serif; font-size: clamp(5rem, 22vw, 19rem); line-height: .9; letter-spacing: -.04em; text-shadow: -3px 0 rgba(0,229,255,.75), 3px 0 rgba(255,40,180,.75); }
.cut-word.glow{ text-shadow: 0 0 34px rgba(255,255,255,.75), 0 0 90px rgba(120,220,255,.45), -3px 0 rgba(0,229,255,.8), 3px 0 rgba(255,40,180,.8); }
.stage{ position: relative; z-index: 2; max-width: 74rem; margin: 0 auto; padding: 8.5rem 4vw 6rem; text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }
.stage.in{ opacity: 1; transform: none; }
.welcome .eyebrow{ font-family: var(--ui); font-size: 12px; letter-spacing: .1em; color: var(--mut); }
.welcome .display{ margin: 0 auto; max-width: 12ch; font-size: clamp(3rem, 7vw, 6.4rem); text-shadow: 0 0 80px rgba(var(--accent), .35); }
.welcome .sub{ margin: .9rem auto 0; font-family: "Instrument Serif", serif; font-style: italic; font-size: clamp(1.5rem, 2.8vw, 2.4rem); display: inline-block; }
.sandbox{ max-width: 42rem; margin: 3rem auto 0; text-align: left; }
.note-card{ position: relative; border: 1px solid var(--hair); background: rgba(13,12,10,.62); backdrop-filter: blur(6px); padding: 1.3rem 1.4rem 1.4rem; display: grid; gap: .9rem; transition: box-shadow .25s, border-color .25s; }
.lbl{ font-family: var(--ui); font-size: 11px; letter-spacing: .14em; color: var(--mut); }
#note{ width: 100%; min-height: 14rem; resize: vertical; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--hair2); font: 400 17px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif; padding: .4rem 0 .8rem; outline: none; caret-color: var(--ink); }
#note::placeholder{ color: rgba(230,225,214,.42); }
#note:focus{ border-bottom-color: var(--hair); }
.note-foot{ display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; font-family: var(--ui); font-size: 12px; letter-spacing: .06em; color: var(--mut); }
.actions{ display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.after{ text-align: center; }
.send{ font-family: var(--ui); font-size: 12px; letter-spacing: .1em; color: #0d0c0a; padding: .8rem 1.3rem; border-radius: 999px; transition: transform .2s; }
.send:hover{ transform: translateY(-1px); }
.copy{ font-family: var(--ui); font-size: 12px; letter-spacing: .08em; color: var(--ink); background: none; border: 1px solid var(--hair); padding: .7rem 1rem; border-radius: 999px; cursor: pointer; }
.edge{ font-family: var(--ui); font-size: 11px; letter-spacing: .06em; color: var(--mut); }
.after{ font-size: 13px; color: var(--mut); line-height: 1.5; } .after a{ color: var(--ink); border-bottom: 1px solid var(--hair); }
.live{ position: absolute; left: -999px; }

/* neon film burn, masked into text or filling a button: layered leaks that never stop drifting */
.neon-text, .neon-fill{
  --leak:
    radial-gradient(55% 140% at 15% 110%, rgba(255,43,214,.95), transparent 62%),
    radial-gradient(45% 140% at 55% -20%, rgba(0,240,255,.95), transparent 60%),
    radial-gradient(55% 140% at 90% 110%, rgba(123,255,43,.95), transparent 62%),
    radial-gradient(40% 120% at 35% 50%, rgba(246,255,43,.85), transparent 60%),
    linear-gradient(100deg, #ff2bd6 0%, #ff6a00 18%, #f6ff2b 36%, #7bff2b 54%, #00f0ff 72%, #b02bff 88%, #ff2bd6 100%);
  background-image: var(--leak);
  background-size: 380% 380%, 380% 380%, 380% 380%, 380% 380%, 700% 100%;
  background-position: 0% 100%, 100% 0%, 0% 0%, 100% 100%, 0% 50%;
  animation: neonleak 9s ease-in-out infinite alternate;
}
.neon-text{
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; background-clip: text;
  filter: saturate(1.35) drop-shadow(0 0 14px rgba(255,43,214,.45)) drop-shadow(0 0 30px rgba(0,240,255,.25));
}
.neon-fill{ box-shadow: 0 0 28px -4px rgba(255,43,214,.7), 0 0 60px -10px rgba(0,240,255,.45); filter: saturate(1.25); }
.neon-fill:hover{ transform: translateY(-1px) scale(1.02); }
@keyframes neonleak{
  to{ background-position: 100% 0%, 0% 100%, 100% 100%, 0% 0%, 100% 50%; }
}
body.reduced .neon-text, body.reduced .neon-fill{ animation: none; }

/* ─── hover: a soft rainbow fades in and slides through any text control, and fades out when you leave ── */
:root{ --sheen: linear-gradient(90deg, #ff9a9a, #ffd59a, #fff59a, #a8ffbd, #9ad9ff, #bfa8ff, #ff9ae6, #ff9a9a); }
@keyframes sheen{ from{ background-position: 0% 50%; } to{ background-position: -200% 50%; } }
/* text controls: the gradient waits under the letters; the text's own colour fades away to reveal it */
header nav a, footer a, .card-foot a, .act, .copy, .console .follow, .more, .prod, .after a, .legal a, .page a:not(.pill-cta), .pname, .cue [data-cuelabel]{
  background-image: var(--sheen); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: currentColor;
  transition: color .4s ease, -webkit-text-fill-color .4s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}
header nav a:hover, footer a:hover, .card-foot a:hover, .act:hover, .copy:hover, .console .follow:hover, .more:hover, .prod:hover, .after a:hover, .legal a:hover, .page a:not(.pill-cta):hover, .pcard:hover .pname, .cue:hover [data-cuelabel]{
  color: transparent; -webkit-text-fill-color: transparent;
  animation: sheen 1.8s linear infinite;
}
/* the sheen hides under an opaque fill, so every target must be solid: the product names were 78% ink over the page —
   this is that exact colour, composited, so nothing shows through at rest */
body.norig .pname.lit{ color: #b6b2a9; }
/* the rig drives the home names' colour every frame, so those get a gradient copy fading in over the top */
.index a .lit{ position: relative; display: inline-block; }
.index a .lit::after{
  content: attr(data-t); position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap;
  background-image: var(--sheen); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  opacity: 0; transition: opacity .4s ease;
}
.index a:hover .lit::after{ opacity: 1; animation: sheen 1.8s linear infinite; }
/* filled buttons: the sheen fades in across the fill, under the label */
.pill-cta{ position: relative; isolation: isolate; overflow: hidden; }
.pill-cta::after{ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--sheen); background-size: 200% 100%; opacity: 0; transition: opacity .4s ease; }
.pill-cta:hover::after{ opacity: 1; animation: sheen 1.8s linear infinite; }
body.reduced :is(header nav a, footer a, .card-foot a, .act, .copy, .console .follow, .more, .prod, .after a, .legal a, .page a:not(.pill-cta), .pname, .cue [data-cuelabel]):hover,
body.reduced .pcard:hover .pname, body.reduced .index a:hover .lit::after, body.reduced .pill-cta:hover::after{ animation: none; }

/* ─── careers: finish the sentences ──────────────────────────────────────── */
.apply{ --accent: 255,223,170; margin-top: 3.4rem; padding: 1.6rem 1.7rem 1.7rem; border: 1px solid var(--hair); background: rgba(13,12,10,.55); }
.apply h2{ margin: 0 0 .5rem; }
.apply-lede{ font-size: 14px; color: var(--mut); line-height: 1.5; max-width: 34rem; }
.apply-form{ margin-top: 1.4rem; display: grid; gap: .9rem; }
.apply .line{ font-family: "Instrument Serif", serif; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.6; color: var(--ink); }
.apply .line label{ color: var(--ink); }
.apply .line input{
  font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--hair);
  padding: 0 .25em .05em; width: var(--w, 16ch); max-width: 100%; outline: none; transition: border-color .2s;
  caret-color: var(--ink);
}
.apply .line input::placeholder{ color: rgba(230,225,214,.36); font-style: italic; }
.apply .line input:focus{ border-bottom-color: var(--ink); }
.apply textarea{
  width: 100%; min-height: 6.5rem; resize: vertical; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--hair);
  font: 400 16px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif; padding: .3rem .1rem .7rem; outline: none; caret-color: var(--ink); transition: border-color .2s;
}
.apply textarea::placeholder{ color: rgba(230,225,214,.36); }
.apply textarea:focus{ border-bottom-color: var(--ink); }
.apply .actions{ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }
.apply .after{ font-size: 13px; color: var(--mut); line-height: 1.5; }
.apply .after a{ color: var(--ink); border-bottom: 1px solid var(--hair); }

/* ─── small screens ──────────────────────────────────────────────────────── */
@media (max-width: 860px){
  .pcard{
    grid-template-columns: 2.6rem minmax(0,1fr);
    grid-template-areas:
      "idx  name"
      "idx  tag"
      ".    desc"
      ".    shot"
      ".    body";
    column-gap: 1.2rem;
  }
  .pcard .tag{ justify-self: start; padding-top: 0; }
  .pcard > .pshot, .pcard > .shot-pair{ margin-top: 1.2rem; }
  .pcard .pbody{ margin-top: 1.2rem; }
}

@media (max-width: 720px){
  .console{ display: none; }
  header{ padding: 1rem 4vw 1.6rem; }
  nav{ gap: 1.1rem; }
  nav a{ font-size: 11px; letter-spacing: .04em; }
  .card-foot{ right: 4vw; flex-wrap: wrap; row-gap: .45rem; }
  .card-main{ flex-direction: column; align-items: flex-start; gap: 2.2rem; }
  .index{ text-align: left; }
  .index a{ justify-content: start; }
  .title-card{ padding-bottom: 7svh; }
  .showcase{ padding-top: 6.5rem; }
  .shots{ grid-template-columns: 1fr; }
  .sphere-grid, .era-hero, .row, .row:nth-of-type(even){ grid-template-columns: minmax(0,1fr); }
  .row:nth-of-type(even) .row-title{ order: 0; text-align: left; }
  .card{ margin: 1.4rem 0 0; width: 100%; }
  .era-float{ min-height: 22rem; } .phones3 .ph img{ width: 8.5rem; } .land2 .lp img{ width: 78vw; }
  .phones{ grid-template-columns: repeat(auto-fit, minmax(0, 7.5rem)); }
  .foot-grid{ grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
  .page .kv{ grid-template-columns: minmax(0,1fr); }
  .team, .cases{ grid-template-columns: minmax(0,1fr); }
  .apply .line input{ width: 100%; display: block; margin-top: .2rem; }
  .cut-word{ font-size: 26vw; }
}


/* ─── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .hero h1 em{ animation: none; }
  .more .arw{ transition: none; }
}

@media (max-width: 520px){
  .mark .wm{ display: none; }
  .orb{ width: 18px; height: 18px; }
  nav{ gap: .9rem; }
}