/* StudioSantos — The Lens. Near-black, white type, one icy blue light; the glass orb is the only colour. */

@font-face { font-family: "Big Shoulders Display"; src: url("/assets/fonts/big-shoulders-display-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #040507;
  --panel: #090C11;
  --text: #EEF3FA;
  --muted: #9AA6B8;
  --label: #8592A6;
  --ice: #9CC8FF;
  --blue: #4C8DFF;
  --accent: #9CC8FF;
  --line: rgba(156, 200, 255, .2);
  --hair: rgba(238, 243, 250, .1);
  --font-body: "Manrope", system-ui, sans-serif;
  --font-display: "Big Shoulders Display", "Manrope", system-ui, sans-serif;
  --wrap: max(var(--gutter), calc((100% - 1280px) / 2));
  --section: clamp(80px, 11vw, 160px);
  --t: 0;
  --ease-beam: cubic-bezier(.65, 0, .35, 1); /* light travelling across the screen: leaves and lands softly */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}
html.motion { scroll-behavior: smooth; }

body { color: var(--text); font-size: 1.0625rem; line-height: 1.65;
  /* faint dust in the dark: static, scrolls with the page, sits under every panel */
  background: url("/assets/dust-near.svg") 0 0 / 1010px repeat, url("/assets/dust-far.svg") 0 0 / 640px repeat, var(--bg); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; line-height: .9; letter-spacing: .005em; text-wrap: balance; }
h3 { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .95rem; line-height: 1.3; }
p { text-wrap: pretty; }
.label { font-family: var(--font-body); font-weight: 500; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--label); }
.num { font-family: var(--font-display); font-weight: 300; font-size: 1.6rem; color: var(--ice); line-height: 1; }
::selection { background: var(--ice); color: var(--bg); }
section[id] { scroll-margin-top: 80px; }
:focus-visible { outline-color: var(--ice); }

.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 26px; border-radius: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  transition: translate 200ms var(--ease-out), scale 160ms var(--ease-out);
}
.btn:active { scale: .97; }
.btn-light { position: relative; color: #06101E; background: linear-gradient(100deg, #E8F2FF 0%, #9CC8FF 55%, #B9E9FF 100%); box-shadow: 0 10px 40px -14px rgba(76, 141, 255, .7); }
.btn-light::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 16px 50px -14px rgba(76, 141, 255, .9); opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.btn-line { color: var(--text); box-shadow: inset 0 0 0 1px rgba(238, 243, 250, .28); transition: translate 200ms var(--ease-out), scale 160ms var(--ease-out), box-shadow 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .btn-light:hover { translate: 0 -2px; }
  .btn-light:hover::after { opacity: 1; }
  .btn-line:hover { box-shadow: inset 0 0 0 1px var(--ice); }
}

/* ---------- header ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 90; padding: 22px var(--wrap); background: linear-gradient(180deg, rgba(4, 5, 7, .9), rgba(4, 5, 7, 0)); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(4, 5, 7, .92); opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.header.is-scrolled { border-bottom-color: var(--hair); }
.header.is-scrolled::before { opacity: 1; }
.brand { display: inline-flex; padding-block: 7px; margin-block: -7px; }
.brand img { height: 30px; width: auto; }
.nav { margin-left: auto; gap: 34px; }
.nav a { font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--muted); transition: color 150ms ease; }
.lang { display: flex; gap: 2px; margin-left: 30px; }
.lang a { font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-decoration: none; color: var(--label); padding: 6px 7px; border-radius: 4px; }
.lang a { transition: color 150ms ease; }
.lang a[aria-current] { color: var(--bg); background: var(--ice); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover, .lang a:not([aria-current]):hover { color: var(--text); }
}
/* menu icon: the two bars turn into a cross */
.menu-btn path { transition: translate 200ms var(--ease-out), rotate 200ms var(--ease-out); }
.menu-btn .bar-a { transform-origin: 12px 9px; }
.menu-btn .bar-b { transform-origin: 12px 15px; }
.header.menu-open .bar-a { translate: 0 3px; rotate: 45deg; }
.header.menu-open .bar-b { translate: 0 -3px; rotate: -45deg; }
@media (max-width: 860px) {
  .menu-btn { display: grid; margin-left: auto; }
  .nav, .lang { display: none; }
  .header.menu-open .nav { display: flex; flex-direction: column; position: fixed; inset: 74px 0 0; padding: 28px var(--gutter); gap: 26px; background: var(--bg); z-index: 100; }
  .header.menu-open .nav a { font-family: var(--font-display); font-weight: 300; font-size: 2.6rem; letter-spacing: .02em; color: var(--text); }
  .header.menu-open .lang { display: flex; position: fixed; left: var(--gutter); bottom: 36px; margin: 0; gap: 6px; z-index: 101; }
  .header.menu-open .lang a { min-width: 46px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--hair); }
  .header.menu-open .nav { clip-path: inset(0); transition: clip-path 260ms var(--ease-drawer); }
  .header.menu-open .nav a, .header.menu-open .lang { transition: opacity 240ms var(--ease-out), translate 240ms var(--ease-out); }
  .header.menu-open .nav a:nth-child(2) { transition-delay: 30ms; } .header.menu-open .nav a:nth-child(3) { transition-delay: 60ms; }
  .header.menu-open .nav a:nth-child(4) { transition-delay: 90ms; } .header.menu-open .lang { transition-delay: 120ms; }
  @starting-style {
    .header.menu-open .nav { clip-path: inset(0 0 100% 0); }
    .header.menu-open .nav a, .header.menu-open .lang { opacity: 0; translate: 0 -8px; }
  }
}

/* ---------- shared HUD bits ---------- */
.side { position: absolute; top: 50%; left: max(10px, calc(var(--wrap) - 46px)); translate: 0 -50%; writing-mode: vertical-rl; rotate: 180deg; margin: 0; }
.side-r { left: auto; right: max(10px, calc(var(--wrap) - 46px)); rotate: 0deg; top: auto; bottom: 12%; translate: none; }
@media (max-width: 1180px) { .side { display: none; } }
.corner { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.corner::before, .corner::after { content: ""; position: absolute; background: var(--line); }
.corner::before { left: 6px; top: 0; width: 1px; height: 14px; }
.corner::after { top: 6px; left: 0; height: 1px; width: 14px; }
.c-tl { left: -7px; top: -7px; } .c-tr { right: -7px; top: -7px; } .c-bl { left: -7px; bottom: -7px; } .c-br { right: -7px; bottom: -7px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; gap: 30px; padding: 120px var(--wrap) 90px; overflow: clip; }
@media (min-width: 980px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hero > .corner { display: none; }
.hero-text { position: relative; z-index: 2; display: grid; gap: 26px; justify-items: start; container-type: inline-size; }
.who { color: var(--ice); letter-spacing: .08em; }
.hero h1 { font-size: min(clamp(4.4rem, 12vw, 10.5rem), calc(97cqi / var(--fit, 2.4))); display: grid; }
.hero h1 span, .big span { white-space: nowrap; }
.hero h1 .l1, .big .l1 { color: var(--ice); }
.lede { max-width: 42ch; color: var(--muted); font-size: 1.08rem; }
.lede, .who { text-transform: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.scroll { position: absolute; left: var(--wrap); bottom: 26px; display: flex; align-items: center; gap: 12px; margin: 0; }
.scroll span { width: 42px; height: 1px; background: var(--line); }
@media (max-width: 979px) { .scroll { display: none; } }

/* the lens: a glass orb, a halo ring, a white beam in and a spectrum out */
.lens-wrap { position: relative; display: grid; place-items: center; min-height: min(560px, 90vw); }
.beams { position: absolute; top: 0; left: -45%; width: 190%; max-width: none; height: 100%; overflow: visible; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 29%, #000 72%, transparent 95%);
  mask-image: linear-gradient(90deg, transparent 22%, #000 29%, #000 72%, transparent 95%); }
.beams path, .split-svg path { fill: none; stroke-linecap: round; }
.beam-in { stroke: rgba(238, 243, 250, .75); stroke-width: 1.2; filter: drop-shadow(0 0 6px rgba(238, 243, 250, .6)); }
.ray { stroke-width: 1.1; opacity: .85; }
.r1 { stroke: #B9E9FF; } .r2 { stroke: #9CC8FF; } .r3 { stroke: #7BA6FF; } .r4 { stroke: #A98BFF; }
.ray { filter: drop-shadow(0 0 5px currentColor); }
.lens { position: relative; width: min(440px, 72vw); aspect-ratio: 1; }
.ring { position: absolute; border-radius: 50%; pointer-events: none; }
.ring-a { inset: -11%; border: 1px solid rgba(156, 200, 255, .32); box-shadow: 0 0 40px rgba(76, 141, 255, .12); }
.ring-b { inset: -26%; border: 1px dashed rgba(156, 200, 255, .12); }
.orb {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #DCEBFF 5%, #93C0FF 15%, #2E62D6 38%, #0B1A3E 62%, #040507 80%);
  box-shadow: 0 0 140px rgba(76, 141, 255, .35), inset -34px -46px 90px rgba(0, 0, 0, .65), inset 12px 16px 40px rgba(156, 200, 255, .3);
}
/* iridescence turns with the page (--t from lens.js) */
.orb::before {
  content: ""; position: absolute; inset: -25%;
  background: conic-gradient(from 20deg, rgba(103, 232, 249, 0) 0deg, rgba(103, 232, 249, .55) 50deg, rgba(169, 139, 255, .5) 105deg, rgba(76, 141, 255, 0) 160deg, rgba(185, 233, 255, .4) 230deg, rgba(103, 232, 249, 0) 300deg);
  mix-blend-mode: screen; filter: blur(16px); opacity: .75; will-change: rotate;
  rotate: calc(var(--t) * 540deg); transition: rotate 700ms var(--ease-out);
}
.orb::after {
  content: ""; position: absolute; width: 22%; height: 14%; left: 24%; top: 18%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%); filter: blur(4px);
  translate: calc(var(--t) * 40%) calc(var(--t) * 30%); transition: translate 700ms var(--ease-out);
}
.hud-card {
  position: absolute; right: 0; bottom: 6%; width: max-content; max-width: 100%; padding: 16px 18px 14px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start;
  background: rgba(9, 12, 17, .86); border: 1px solid var(--hair); border-radius: 4px;
}
@media (max-width: 979px) { .hud-card { position: relative; right: auto; bottom: auto; justify-self: end; margin-top: 18px; } }
.hud-mark { width: 26px; height: 26px; fill: none; stroke: var(--ice); stroke-width: 1; grid-row: span 2; }
.hud-card ul { list-style: none; display: grid; gap: 2px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.hud-card li:first-child { color: var(--ice); }
.hud-card li { color: var(--muted); white-space: nowrap; }

/* one authored moment on load: the words settle, the beam travels into the lens, the rings come into focus
   as it lands, and the light leaves split in four. Everything that moves is gated on html.motion. */
.motion .hero-text > * { animation: rise 640ms var(--ease-out) both; }
.motion .hero-text > :nth-child(2) { animation-delay: 70ms; }
.motion .hero-text > :nth-child(3) { animation-delay: 140ms; }
.motion .hero-text > :nth-child(4) { animation-delay: 210ms; }
.motion .hero .orb { animation: orb-in 900ms var(--ease-out) both; }
.motion .hero .beam-in, .motion .hero .ray { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .hero .beam-in { animation: draw 700ms var(--ease-beam) 200ms forwards; }
.motion .hero .ring-a { animation: focus 700ms var(--ease-out) 560ms both; }
.motion .hero .ring-b { animation: focus 800ms var(--ease-out) 620ms both; }
.motion .hero .ray { animation: draw 800ms var(--ease-out) 600ms forwards; }
.motion .hero .r2 { animation-delay: 650ms; } .motion .hero .r3 { animation-delay: 700ms; } .motion .hero .r4 { animation-delay: 750ms; }
.motion .hero .hud-card, .motion .hero .scroll { animation: rise 600ms var(--ease-out) 850ms both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; translate: 0 12px; filter: blur(4px); } }
@keyframes orb-in { from { opacity: 0; scale: .96; } }
@keyframes focus { from { opacity: 0; scale: 1.08; } }
@keyframes ping { from { opacity: 0; scale: .5; } }

/* ---------- the fly-through: on scroll you travel into the orb and come out on the approach ----------
   lens.js adds html.fly-on (motion only) and drives every value from the scroll; without it the hero is a normal block. */
.fly-orb { display: none; }
.fly-on .fly { height: calc(var(--hero-h, 100svh) + var(--fly-d, 100svh)); }
.fly-on .fly .hero { position: sticky; top: min(0px, calc(100svh - var(--hero-h, 100svh))); z-index: 3;
  background: url("/assets/dust-near.svg") 0 0 / 1010px repeat, url("/assets/dust-far.svg") 0 0 / 640px repeat, var(--bg); }
.fly-on .fly + .approach { margin-top: -100svh; }
.fly-on .hero .lens, .fly-on .fly-orb { grid-area: 1 / 1; }
.fly-on .fly-orb { display: block; position: relative; z-index: 1; width: min(440px, 72vw); aspect-ratio: 1; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #DCEBFF 5%, #93C0FF 15%, #2E62D6 38%, #0B1A3E 62%, #040507 80%); }

/* ---------- sections ---------- */
.approach, .services, .works, .contact { position: relative; padding: var(--section) var(--wrap) 0; }
.sec-head { display: grid; gap: 18px; max-width: 760px; }
.kicker { color: var(--ice); }
.approach h2 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); }
.sec-p { color: var(--muted); max-width: 54ch; font-size: 1.08rem; }
.sec-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 30px; padding-bottom: 22px; border-bottom: 1px solid var(--hair); }
.label-h { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; letter-spacing: .2em; line-height: 1.2; }

/* approach: one beam reaches the small lens and splits; each ray lands on its step (once, on enter) */
.split { margin-top: 56px; position: relative; }
.split-svg path { vector-effect: non-scaling-stroke; }
.split-svg { display: block; width: 100%; height: 120px; overflow: visible; }
.mini-lens { position: absolute; left: 50%; top: 22px; width: 44px; height: 44px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0%, #93C0FF 18%, #2E62D6 48%, #0B1A3E 75%); box-shadow: 0 0 34px rgba(76, 141, 255, .7), 0 0 0 6px rgba(156, 200, 255, .08); }
@media (max-width: 859px) { .mini-lens { display: none; } }
.steps { list-style: none; display: grid; gap: 0; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { display: grid; gap: 12px; padding: 26px 26px 30px 0; align-content: start; }
@media (min-width: 860px) { .step + .step { padding-left: 26px; border-left: 1px solid var(--hair); } }
@media (max-width: 859px) { .split-svg { display: none; } .step { border-top: 1px solid var(--hair); } .steps { margin-top: 0; } }
.step p { color: var(--muted); }
.build .split-svg .beam-in, .build .split-svg .ray { stroke-dasharray: 1; stroke-dashoffset: 1; }
.build .split.is-in .beam-in { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--ease-beam); }
.build .split.is-in .ray { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--ease-out) 560ms; }
.build .split.is-in .r2 { transition-delay: 620ms; } .build .split.is-in .r3 { transition-delay: 680ms; } .build .split.is-in .r4 { transition-delay: 740ms; }
.build .mini-lens { opacity: 0; scale: .7; transition: opacity 400ms var(--ease-out) 480ms, scale 500ms var(--ease-out) 480ms; }
.build .split.is-in .mini-lens { opacity: 1; scale: 1; }
.build .step > * { opacity: 0; translate: 0 10px; transition: opacity 400ms var(--ease-out), translate 400ms var(--ease-out); }
@media (min-width: 860px) { .build .split.is-in .step > * { opacity: 1; translate: 0 0; transition-delay: calc(700ms + var(--i) * 60ms); } }
@media (max-width: 859px) { .build .step.is-in > * { opacity: 1; translate: 0 0; } }

/* services: Mariana's capabilities row */
.service-row { list-style: none; display: grid; }
@media (min-width: 820px) { .service-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service { display: grid; justify-items: center; align-content: start; text-align: center; gap: 14px; padding: 48px 28px 52px; }
@media (min-width: 820px) { .service + .service { border-left: 1px solid var(--hair); } }
@media (max-width: 819px) { .service + .service { border-top: 1px solid var(--hair); } }
.icon { width: 46px; height: 46px; color: var(--ice); filter: drop-shadow(0 0 10px rgba(76, 141, 255, .55)); }
.service p { color: var(--muted); max-width: 30ch; font-size: .98rem; }
.service { --lag: 0ms; }
@media (min-width: 820px) { .service { --lag: calc(var(--i) * 60ms); } }
.build .service > * { opacity: 0; translate: 0 14px; transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-out); transition-delay: var(--lag); }
.build .service > :nth-child(2) { transition-delay: calc(var(--lag) + 50ms); }
.build .service > :nth-child(3) { transition-delay: calc(var(--lag) + 100ms); }
.build .service.is-in > * { opacity: 1; translate: 0 0; }

/* selected work: framed emblems drawn in code, never client logos or pictures */
.work-grid { list-style: none; display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 900px) { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work { display: grid; gap: 18px; align-content: start; }
.work-frame {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 6px;
  background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(46, 98, 214, .16), rgba(9, 12, 17, .9) 70%);
}
.work-kind { position: absolute; top: 14px; left: 16px; color: var(--ice); }
.emblem { width: 82%; height: auto; overflow: visible; }
.emblem path, .emblem rect, .emblem circle { vector-effect: non-scaling-stroke; }
.emblem .ticks path { stroke: rgba(156, 200, 255, .3); stroke-width: 1; }
.emblem .clip { fill: rgba(156, 200, 255, .07); stroke: rgba(156, 200, 255, .38); stroke-width: 1; }
.emblem .clip.lit { fill: rgba(156, 200, 255, .32); stroke: var(--ice); filter: drop-shadow(0 0 8px rgba(76, 141, 255, .8)); }
.emblem .playhead { stroke: #EEF3FA; stroke-width: 1.4; filter: drop-shadow(0 0 6px rgba(238, 243, 250, .8)); }
.emblem .playhead-cap { fill: #EEF3FA; }
.emblem .thread { fill: none; stroke: var(--ice); stroke-linecap: round; }
.emblem .thread.d3 { stroke-width: 1.6; opacity: .95; }
.emblem .th-d3 { filter: drop-shadow(0 0 4px rgba(76, 141, 255, .8)); }
.emblem .thread.d2 { stroke-width: 1.1; opacity: .6; }
.emblem .thread.d1 { stroke-width: .8; opacity: .35; }
.emblem .node-lit { fill: #EEF3FA; filter: drop-shadow(0 0 8px rgba(238, 243, 250, .9)); }
.emblem .link { fill: none; stroke: rgba(156, 200, 255, .3); stroke-width: 1; stroke-dasharray: 3 5; }
.emblem .pin path { fill: rgba(156, 200, 255, .18); stroke: rgba(156, 200, 255, .6); stroke-width: 1; }
.emblem .pin .dot { fill: var(--bg); }
.emblem .pin .halo { fill: none; stroke: none; }
.emblem .pin.lit path { fill: var(--ice); stroke: #EEF3FA; filter: drop-shadow(0 0 8px rgba(76, 141, 255, .9)); }
.emblem .pin.lit .halo { stroke: rgba(156, 200, 255, .45); stroke-width: 1; }
.work-head { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.work-head h3 { font-size: 1.05rem; color: var(--text); }
.work-head .label { margin-top: 4px; letter-spacing: .12em; text-transform: none; font-size: .86rem; }
.work-body { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--hair); }
.work-body dt { font-size: .75rem; color: var(--ice); margin-bottom: 4px; }
.work-body dd { color: var(--muted); font-size: .98rem; }
.tags { font-size: .75rem; }
.work { --lag: 0ms; }
@media (min-width: 900px) { .work { --lag: calc(var(--i) * 70ms); } }
.build .work { opacity: 0; translate: 0 18px; transition: opacity 500ms var(--ease-out) var(--lag), translate 500ms var(--ease-out) var(--lag); }
.build .work.is-in { opacity: 1; translate: 0 0; }
/* timeline: the clips are laid on the tracks, the playhead travels to the cut, the cut lights up */
.build .emblem .ticks { opacity: 0; transition: opacity 600ms ease calc(var(--lag) + 100ms); }
.build .emblem .clip { opacity: 0; scale: .5 1; transform-box: fill-box; transform-origin: left center;
  transition: opacity 450ms var(--ease-out), scale 450ms var(--ease-out); transition-delay: calc(var(--lag) + 150ms + var(--d) * 450ms); }
.build .emblem .playhead-g { opacity: 0; translate: -156px 0; transition: translate 900ms var(--ease-beam) calc(var(--lag) + 450ms), opacity 300ms ease calc(var(--lag) + 450ms); }
.build .work.is-in .emblem :is(.ticks, .clip, .playhead-g) { opacity: 1; scale: 1 1; translate: 0 0; }
.build .work.is-in .emblem .clip.lit { animation: light-up 400ms ease calc(var(--lag) + 1300ms) both; }
@keyframes light-up { from { fill: rgba(156, 200, 255, .07); stroke: rgba(156, 200, 255, .38); filter: none; } }
/* mycelium: the threads grow out from the lit node, one generation after another; the finest tips fade in together */
.build .emblem :is(.th-d2, .th-d3) .thread { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 520ms var(--ease-out) calc(var(--lag) + 250ms + var(--g) * 110ms); }
.build .emblem .th-d1 { opacity: 0; transition: opacity 700ms ease calc(var(--lag) + 750ms); }
.build .work.is-in .emblem .th-d1 { opacity: 1; }
.build .emblem .node-lit { opacity: 0; scale: .6; transform-box: fill-box; transform-origin: center; transition: opacity 400ms var(--ease-out) calc(var(--lag) + 150ms), scale 500ms var(--ease-out) calc(var(--lag) + 150ms); }
.build .work.is-in .emblem .thread { stroke-dashoffset: 0; }
.build .work.is-in .emblem .node-lit { opacity: 1; scale: 1; }
/* pins: the pins drop in, the links join them, the lit pin's halo opens */
.build .emblem .pin { opacity: 0; translate: 0 -12px; transition: opacity 400ms var(--ease-out), translate 500ms var(--ease-out); transition-delay: calc(var(--lag) + 200ms + var(--i) * 70ms); }
.build .emblem .link { opacity: 0; transition: opacity 600ms ease calc(var(--lag) + 700ms); }
.build .emblem .pin .halo { transform-box: fill-box; transform-origin: center; }
.build .work.is-in .emblem .pin { opacity: 1; translate: 0 0; }
.build .work.is-in .emblem .link { opacity: 1; }
.build .work.is-in .emblem .pin.lit .halo { animation: ping 700ms var(--ease-out) calc(var(--lag) + 900ms) both; }

/* contact: "let's bring it into focus" + inquiry card */
.contact { display: grid; gap: 50px; align-items: center; padding-bottom: var(--section); overflow-x: clip; }
@media (min-width: 980px) { .contact { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.contact-text { display: grid; gap: 22px; justify-items: start; container-type: inline-size; }
.big { font-size: min(clamp(3.2rem, 8vw, 7rem), calc(97cqi / var(--fit, 3.6))); display: grid; }
.big .l0 { color: var(--text); }
.mail { display: inline-block; padding-block: 11px; text-decoration: none; color: var(--text); text-transform: none; letter-spacing: .08em; font-size: .86rem; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .mail:hover { color: var(--ice); } }
.facts { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.facts dt { font-size: .75rem; }
.facts dd { text-transform: uppercase; letter-spacing: .14em; font-size: .84rem; font-weight: 500; }
.or { text-transform: none; letter-spacing: .06em; font-size: .86rem; }
/* the inquiry form: a HUD card with the small lens glowing behind its corner */
.contact-side { position: relative; }
.lens-small { position: absolute; z-index: 0; right: -34px; top: -64px; width: clamp(110px, 13vw, 190px); }
.inquiry { position: relative; z-index: 1; max-width: none; gap: 0; padding: 22px 24px 24px; border: 1px solid var(--hair); border-radius: 4px; background: rgba(9, 12, 17, .88); }
.inquiry-k { display: flex; justify-content: space-between; color: var(--text); margin-bottom: 14px; }
.inquiry-k span { color: var(--label); letter-spacing: .1em; }
.inquiry .field { display: grid; gap: 4px; padding: 12px 0 4px; border-top: 1px solid var(--hair); }
.inquiry label { font-size: .75rem; }
.inquiry input, .inquiry textarea { font: inherit; font-size: 1rem; color: var(--text); background: transparent; border: 0; border-bottom: 1px solid rgba(238, 243, 250, .18); border-radius: 0; padding: 8px 0 10px; transition: border-color 150ms ease; }
.inquiry input:focus, .inquiry textarea:focus { border-bottom-color: var(--ice); }
.inquiry textarea { min-height: 6.5rem; resize: vertical; }
.inquiry .btn { justify-self: start; margin-top: 22px; }
.inquiry .form-status { margin-top: 12px; font-size: .9rem; color: var(--muted); }
.inquiry .form-status:empty { display: none; }
.inquiry-mail { display: grid; gap: 0; }
.hints { list-style: none; counter-reset: hint; }
.hints li { counter-increment: hint; display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--hair); color: var(--muted); }
.hints li::before { content: counter(hint, decimal-leading-zero); font-family: var(--font-display); font-weight: 300; font-size: 1.15rem; color: var(--ice); }
.inquiry-mail .btn { justify-self: start; margin-top: 18px; }
.mail-addr { margin-top: 6px; text-transform: none; letter-spacing: .06em; }
.gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 560px) { .lens-small { right: -18px; top: -54px; } }

/* ---------- footer ---------- */
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; padding: 30px var(--wrap); border-top: 1px solid var(--hair); }
.footer img { height: 24px; width: auto; }
.footer a { display: inline-block; padding-block: 12px; margin-block: -12px; text-decoration: none; text-transform: none; letter-spacing: .06em; }
@media print { .build * { opacity: 1 !important; translate: none !important; scale: none !important; stroke-dashoffset: 0 !important; } }
.not-found { min-height: 80vh; padding: 160px var(--wrap) 80px; display: grid; gap: 22px; align-content: center; justify-items: start; }
.not-found h1 { font-size: clamp(3rem, 9vw, 7rem); }