/* ==========================================================================
   GAMMA XRS — gammaxrs.com
   Brand: GX-BRAND-001 Rev A. Ground: Void. Mode A (Studio) throughout.
   @changelog Pictures cannot be dragged off the page. Text outside a form field cannot be selected.
   ========================================================================== */

:root{
  /* Ground — neutral by design. A colour-accuracy studio should not tint the
     surround its client imagery is judged against, so every grey here has a
     channel spread of zero. Luminance is held, so contrast is unchanged. */
  /* A soundstage lit by a 1000-nit wall is not a black box, and a perfectly
     neutral grey reads as unconsidered. These carry a slight cool bias (~222
     degrees, very low saturation), and --stage sits further above --void than
     it used to so a raised surface reads as an object rather than a patch:
     the luminance step went from 0.007 to 0.011. */
  --void:#0D0F15; --stage:#1E2331; --rig:#282E3D;
  --grip:#383F50; --grip-soft:#262C3A;
  /* the top edge of a raised surface, catching light from the grid */
  --lit:#272D3C;
  /* Control boundaries need 3:1 against their adjacent colour (WCAG 1.4.11).
     --grip is decorative only and does not qualify. */
  --control:#787E8F;
  /* ink */
  --haze:#9AA1AF; --scrim:#CDD0D8; --bright:#F2F4F8;
  /* There is no accent hue. Every saturated colour that works on this ground
     sits within six degrees of a consumer brand — the violet we shipped was one
     degree from Twitch — so the accent role is tonal and the prime ramp carries
     all of the colour. --violet and --violet-lift survive only as the ramp's
     fifth stop, in the mark and in the numbered series. */
  --key:#F2F4F8; --key-hover:#FFFFFF; --key-label:#0D0F15; --key-deep:#161922;
  --violet:#8B3FF5; --violet-lift:#B380FA;
  /* the ramp stops are mixed for the gradient, not for type; --index is
     too dark to set text in, so it gets a lift twin like --violet has */
  --index-lift:#8795F4;
  /* --pulse is mixed for the gradient; as a numeral it needs lifting too */
  --pulse-lift:#EE6FBC;
  --photon:#F5EC9A; --signal:#48A0F2; --index:#4A5FE0; --pulse:#E63DA4;
  /* Prime ramp. Offsets rebalanced so photon and signal get real run: the old
     0/28/46/72/100 spent its last 28% travelling between two purples, which is
     why a five-stop spectrum was reading as a violet wash. Hexes unchanged. */
  --prime:linear-gradient(90deg,#F5EC9A 0%,#48A0F2 36%,#4A5FE0 58%,#E63DA4 80%,#8B3FF5 100%);
  /* type */
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Sometype Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* measure */
  --gutter:clamp(18px,4.5vw,56px);
  --page:1240px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--scrim);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;-webkit-user-drag:none;user-select:none}
html,body{-webkit-user-select:none;user-select:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
a{color:inherit;text-decoration:none}
::selection{background:var(--key);color:var(--key-label)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:1560px;margin-inline:auto;padding-inline:var(--gutter)}

/* ---------------------------------------------------------------- type --- */
/* One width value across the system. The old 118/116/112/108/104 ladder made
   width ambient rather than meaningful; size and weight carry hierarchy instead. */
/* Archivo is variable on width as well as weight. Display runs wide and
   tight; body stays at normal width. That gap is where the character is —
   one family, two voices, no second webfont. */
h1,h2,h3,h4{margin:0;text-wrap:balance;color:var(--bright)}
h1{font-size:clamp(40px,7.4vw,92px);line-height:.94;font-weight:700;
  letter-spacing:-.028em;font-variation-settings:'wdth' 116}
h2{font-size:clamp(29px,4.6vw,56px);line-height:1.0;font-weight:700;
  letter-spacing:-.024em;font-variation-settings:'wdth' 111}
h3{font-size:clamp(19px,2.1vw,25px);line-height:1.16;font-weight:650;
  letter-spacing:-.012em;font-variation-settings:'wdth' 105}
h4{font-size:16px;line-height:1.28;font-weight:600}
p{margin:0;max-width:62ch}
/* text-wrap:balance evens out headings; pretty does the same job for body
   copy, whose failure mode is the opposite — one orphaned word on the last
   line. Ignored by browsers that do not support it, which just wrap as before. */
p,li,dd,figcaption,.lede,.note,.t-lede,.er-note,.deet .v{text-wrap:pretty}

.label{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--haze);font-variation-settings:'wdth' 96}
.label--lift{color:var(--bright)}
/* A status tag, for a stage that is not open yet. Quiet, but it travels with
   the name wherever the name is offered. */
.soon{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9.5px;
  font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--haze);
  border:1px solid var(--grip);border-radius:2px;padding:3px 7px;white-space:nowrap;
  margin-left:10px;vertical-align:middle;text-decoration:none}
.lede{font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--scrim);max-width:48ch}
.note{font-size:15.5px;line-height:1.6;color:var(--haze);max-width:60ch}
.tiny{font-size:13px;line-height:1.5;color:var(--haze)}
.m{font-family:var(--mono);letter-spacing:.03em;font-variant-numeric:tabular-nums}

/* ------------------------------------------------- aperture + logotype --- */
.g-void{--s1:var(--photon);--s2:var(--signal);--s3:var(--index);--s4:var(--pulse);--s5:var(--violet);
  --wg:var(--bright)}
.lockup{display:flex;align-items:center;gap:.74em;font-size:var(--ls,22px);line-height:1}
.lockup .mark{width:calc(var(--ls,22px) * 2.6);height:auto;flex:none;display:block}
.mark{display:block;width:100%;height:auto}
.mark .bl{stroke-linejoin:round}
/* Wordmark: Archivo caps, tracked out. Michroma was a Eurostile descendant —
   the lettering a production designer puts INSIDE a film — and it set the
   wordmark 48% wider at header size. Tracked-out caps is the credit-block
   move: calmer, narrower, and it leaves the Aperture as the loud element.
   The old mica gradient is retired so prime is the only ramp in the identity. */
.wordmark{font-family:var(--sans);font-weight:650;font-variation-settings:'wdth' 100;
  font-size:.9em;letter-spacing:.17em;line-height:1;text-transform:uppercase;
  white-space:nowrap;display:flex;gap:.52em}
.wordmark .wg{color:var(--wg)}
/* the wordmark's XRS carries the ramp itself, not a flat accent */
.wordmark .wx{color:var(--bright);background:var(--prime);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .wordmark .wx{color:var(--bright);-webkit-text-fill-color:currentColor}}

/* -------------------------------------------------------------- header --- */
header.site{position:sticky;top:0;z-index:80;
  background:rgba(8,8,8,.86);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--grip-soft)}
.navbar{display:flex;align-items:center;gap:24px;max-width:1560px;
  margin-inline:auto;padding:16px var(--gutter)}
.navlinks{display:flex;gap:28px;margin-left:auto;align-items:center}
.navlinks a{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--haze);padding-block:8px;border-bottom:1px solid transparent;transition:color .15s ease;
  white-space:nowrap}
.navlinks a:hover{color:var(--bright)}
/* `.navlinks a` outranks `.btn`, so the nav CTA was inheriting the dim
   nav grey onto a violet fill — 1.49:1 */
.navlinks a.btn,.navlinks a.btn:hover{color:var(--key-label);border-bottom-color:transparent}
.navlinks a[aria-current="page"]{color:var(--bright)}
.navtoggle{display:none;margin-left:auto;background:var(--stage);border:1px solid var(--control);
  color:var(--scrim);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:10px 14px;cursor:pointer;border-radius:2px}
@media(max-width:1160px){
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--stage);border-bottom:1px solid var(--grip);padding:6px 0}
  .navlinks.open{display:flex}
  .navlinks a{padding:14px var(--gutter);border-bottom:1px solid var(--grip-soft);width:100%}
  .navlinks .btn{margin:14px var(--gutter);width:calc(100% - var(--gutter)*2);justify-content:center}
  .navtoggle{display:block}
}

/* --------------------------------------------------------------- buttons - */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;background:var(--key);
  color:var(--key-label);border:1px solid var(--key);border-radius:2px;font-family:var(--sans);
  font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;cursor:pointer;
  transition:background .15s ease,border-color .15s ease}
.btn:hover{background:var(--key-hover);border-color:var(--key-hover)}

.btn--ghost{background:transparent;border-color:var(--control);color:var(--scrim)}
.btn--ghost:hover{background:transparent;border-color:var(--haze);color:var(--bright)}

.btnrow{display:flex;flex-wrap:wrap;gap:12px}

/* ------------------------------------------------------------ full bleed - */
.shot{position:relative;overflow:hidden;border-bottom:1px solid var(--grip-soft)}
/* The hero is an image and what follows is the void, so the join is a change
   of ground like any other. */
.shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--prime)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot--hero{min-height:clamp(540px,86vh,860px);display:flex;align-items:flex-end}
.shot--page{min-height:clamp(380px,56vh,580px);display:flex;align-items:flex-end}
.shot-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.72) 36%,rgba(8,8,8,.16) 70%,rgba(8,8,8,0) 100%),
  linear-gradient(180deg,rgba(8,8,8,.58) 0%,rgba(8,8,8,.04) 32%,rgba(8,8,8,.86) 82%,rgba(8,8,8,.98) 100%)}
.shot-copy{position:relative;width:100%;padding-block:clamp(40px,7vw,84px)}
.shot-copy .wrap{display:grid;gap:20px;justify-items:start}
/* These measures were far too tight: at 15ch a 45-character headline broke to
   three lines. text-wrap:balance then evens them out, so give it room first. */
.shot-copy h1{max-width:23ch}
.shot-cap{position:absolute;left:0;right:0;top:0;padding:16px var(--gutter);
  display:flex;justify-content:flex-end;pointer-events:none}
.shot-cap span{font-family:var(--mono);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(207,201,214,.62)}
@media(max-width:700px){
  .shot-cap{display:none}
  /* the horizontal scrim does little at phone width — lean on the vertical one */
  .shot-scrim{background:
    linear-gradient(180deg,rgba(8,8,8,.62) 0%,rgba(8,8,8,.30) 26%,rgba(8,8,8,.88) 62%,rgba(8,8,8,.99) 100%)}
  .shot--hero{min-height:clamp(560px,88vh,760px)}
}

/* ------------------------------------------------------------- sections -- */
section{padding-block:clamp(56px,8vw,112px)}
section[id]{scroll-margin-top:80px}
section.tight{padding-top:0}
/* a block with its own background ends at its own padding, so the section
   after it needs the full gap back — otherwise the next heading sits on
   the join */
.tone + section.tight,.band + section.tight{
  padding-top:clamp(56px,8vw,112px)}
.sec-head{display:grid;gap:12px;max-width:64ch}
/* a spectrum tick above every section head — a mark, not a rule */
.sec-head::before{content:"";width:92px;height:3px;background:var(--prime);
  border-radius:2px}
.sec-head h2{max-width:26ch}
.cols{display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:860px){
  .cols-2{grid-template-columns:1fr 1fr}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .cols-split{grid-template-columns:1fr 1.2fr;align-items:center}
}

/* One rule, applied everywhere: where the page changes ground, the spectrum
   marks the join. .tone and .band both carry their own background. */
.tone,.band{position:relative}
.tone::before,.band::before{content:"";position:absolute;left:0;right:0;top:0;
  height:3px;background:var(--prime)}
/* ---------------------------------------------------------- entry cards -- */
.entries{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(32px,4.5vw,52px)}
@media(max-width:860px){.entries{grid-template-columns:1fr}}
.entry{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(340px,40vw,480px);overflow:hidden;border:1px solid var(--grip);
  border-radius:3px;background:var(--stage);isolation:isolate;
  transition:border-color .2s ease}
.entry:hover{border-color:var(--haze)}
.entry-img{position:absolute;inset:0;z-index:-2}
.entry-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,.84,.34,1)}
.entry:hover .entry-img img{transform:scale(1.035)}
.entry::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(8,8,8,.30) 0%,rgba(8,8,8,.10) 34%,rgba(8,8,8,.86) 78%,rgba(8,8,8,.97) 100%)}
.entry-body{padding:clamp(22px,2.6vw,32px);display:grid;gap:10px}
.entry-body p{max-width:42ch;font-size:15.5px;line-height:1.55;color:var(--scrim)}
.entry .go{margin-top:6px;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--bright)}
.entry--tech .entry-img{background:
  radial-gradient(85% 120% at 20% 94%,rgba(230,61,164,.42),transparent 62%),
  radial-gradient(80% 100% at 82% 4%,rgba(72,160,242,.40),transparent 60%),
  radial-gradient(60% 80% at 52% 50%,rgba(74,95,224,.46),transparent 70%),
  linear-gradient(190deg,#1A1430,#0B0A12)}
.entry--tech .entry-img::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 1px,transparent 1px 4px)}

/* ------------------------------------------------------------- benefits -- */
.bens{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(22px,2.6vw,30px)}
.ben{padding:22px clamp(20px,2.4vw,30px) 0 0;border-right:1px solid var(--grip);
  display:grid;gap:10px;align-content:start;position:relative}
.ben:not(:first-child){padding-left:clamp(20px,2.4vw,30px)}
.ben:last-child{border-right:0;padding-right:0}
/* the accent runs the width of the column, where it can actually be seen */
.ben::before{content:"";position:absolute;top:0;left:0;right:clamp(20px,2.4vw,30px);height:2px;
  background:var(--bright)}
.ben:not(:first-child)::before{left:clamp(20px,2.4vw,30px)}
.ben:last-child::before{right:0}
.ben .n{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.01em;line-height:1;
  color:var(--bright);font-variant-numeric:tabular-nums}
.ben h3{font-size:clamp(20px,2.2vw,26px)}
.ben p{font-size:15px;line-height:1.58;color:var(--haze);max-width:none}
@media(max-width:900px){
  .bens{grid-template-columns:1fr}
  .ben{border-right:0;padding-left:0!important;padding-right:0;padding-bottom:28px;
    border-bottom:1px solid var(--grip)}
  .ben::before{left:0!important}
  .ben:last-child{border-bottom:0;padding-bottom:0}
}

/* ----------------------------------------------------------- tick lists -- */
.ticks{list-style:none;margin:0;padding:0;display:grid;
  border:1px solid var(--grip);border-radius:3px;overflow:hidden}
.ticks li{background:var(--stage);padding:14px 18px 14px 44px;position:relative;
  border-bottom:1px solid var(--grip-soft);font-size:15px;line-height:1.5;color:var(--scrim)}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:"";position:absolute;left:19px;top:22px;width:8px;height:8px;
  background:var(--signal)}
.ticks--alt li::before{background:var(--photon)}
.ticks--prime li::before{background:var(--violet-lift)}
.ticks li b{color:var(--bright);font-weight:600;display:block;margin-bottom:2px}
.ticks li span{color:var(--haze);font-size:13.5px;line-height:1.5;display:block}

/* ------------------------------------------------------------ spec grid -- */
.slate{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--grip);
  border:1px solid var(--grip);border-radius:3px;overflow:hidden;margin-top:26px}
/* align-content:start, or a cell with no note stretches its two rows to fill
   the height and its figure drifts below the ones beside it */
.slate-cell{background:var(--stage);padding:16px 17px;display:grid;gap:5px;
  align-content:start}
.slate-cell .k{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--haze)}
.slate-cell .v{font-family:var(--mono);font-size:15px;color:var(--bright);
  font-variant-numeric:tabular-nums}
@media(max-width:700px){.slate{grid-template-columns:repeat(2,1fr)}}
/* Four cells inside a split column are too narrow to hold a value on one line. */
.slate--pair{grid-template-columns:repeat(2,1fr)}

/* The facility schedule was an eighteen-row table: every figure set in 12px
   mono at the far right of a 1,100px row, smaller than its own label and a long
   way from it. As slates the label sits above the figure and the figure leads.
   auto-fit so a group of three fills its row instead of leaving a hole. */
.slate--flow{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.slate-cell .n{font-family:var(--sans);font-size:12.5px;line-height:1.45;
  color:var(--haze)}
.sched{margin-top:clamp(26px,3.2vw,38px)}
.sched-h{font-family:var(--sans);font-size:9.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bright);margin:0}
.sched .slate{margin-top:10px}

/* --------------------------------------------------------------- cards --- */
.card{border:1px solid var(--grip);border-radius:3px;background:var(--stage);
  padding:clamp(22px,2.6vw,30px);display:grid;gap:11px;align-content:start}
.card p{max-width:none;font-size:15px;line-height:1.58;color:var(--haze)}

/* ------------------------------------------------------------- process --- */
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:clamp(22px,2.6vw,30px)}
.proc-step{position:relative;padding:20px 20px 0 0;border-right:1px solid var(--grip);
  display:flex;flex-direction:column;gap:8px}
.proc-step:not(:first-child){padding-left:20px}
.proc-step:last-child{border-right:0;padding-right:0}
.proc-step::before{content:"";position:absolute;top:0;left:0;right:20px;height:2px;
  background:var(--bright)}
.proc-step:not(:first-child)::before{left:20px}
.proc-step:last-child::before{right:0}
.proc-step .n{font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:-.01em;
  line-height:1;color:var(--bright);font-variant-numeric:tabular-nums}
.proc-step h4{font-size:16.5px;line-height:1.22;font-variation-settings:'wdth' 108}
.proc-step p{font-size:13.5px;line-height:1.55;color:var(--haze);max-width:none;margin:0}
.proc-step .when{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:#9A94B2;margin-top:auto;padding-top:18px}
@media(max-width:1080px){
  .proc{grid-template-columns:repeat(2,1fr)}
  .proc-step{border-bottom:1px solid var(--grip);padding-bottom:24px}
  .proc-step:nth-child(2n){border-right:0;padding-right:0}
  .proc-step:nth-child(odd)::before{left:0}
  .proc-step:nth-child(odd){padding-left:0}
  .proc-step:last-child{border-bottom:0}
}
@media(max-width:620px){
  .proc{grid-template-columns:1fr}
  .proc-step{border-right:0;padding-left:0!important;padding-right:0}
  .proc-step::before{left:0!important}
}

/* ------------------------------------------------------------- gallery --- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(30px,4vw,44px)}
@media(max-width:860px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0;display:grid;gap:10px}
.gallery img{aspect-ratio:4/5;object-fit:cover;width:100%;border:1px solid var(--grip);
  border-radius:3px}
.gallery figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--haze)}
@media(max-width:860px){.gallery img{aspect-ratio:16/10}}

.fig{display:grid;gap:11px;margin:0}
.fig img{border:1px solid var(--grip);border-radius:3px;width:100%}
.fig figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--haze)}

/* A full-bleed photograph, to break a long run of cards and tables. */
.bleed{position:relative;margin-block:clamp(48px,7vw,96px);margin-inline:0;overflow:hidden;
  border-block:1px solid var(--grip-soft)}
.bleed img{display:block;width:100%;height:clamp(240px,34vw,420px);object-fit:cover}
.bleed figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:clamp(40px,6vw,72px) var(--gutter) clamp(16px,2.4vw,24px);
  background:linear-gradient(180deg,rgba(8,8,8,0),rgba(8,8,8,.86));
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--scrim)}
.bleed figcaption span{max-width:var(--page);margin-inline:auto;display:block}

/* Reference data a line producer wants and a director does not. */
.disclose{border:1px solid var(--grip);border-radius:3px;background:var(--stage);
  margin-top:clamp(26px,3.5vw,38px)}
.disclose > summary{padding:18px 20px;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:18px;
  font-size:16px;font-weight:600;color:var(--bright)}
.disclose > summary::-webkit-details-marker{display:none}
.disclose > summary::after{content:"+";font-family:var(--sans);font-size:18px;
  font-weight:500;color:var(--bright);line-height:1}
.disclose[open] > summary::after{content:"\2013"}
.disclose[open] > summary{border-bottom:1px solid var(--grip)}
.disclose-body{padding:clamp(18px,2.4vw,26px)}
.disclose-hint{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--haze)}


/* ---------------------------------------------------------------- bento -- */
/* Uniform grids of dark, 1px-outlined cards read as a wireframe. This is a
   tiled layout instead: mixed spans, solid fills, type large enough to carry a
   tile on its own, and images bleeding to the tile edge. The page ground stays
   black and violet stays the signal — only the tiles change. */
.bento{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.1vw,16px);margin-top:clamp(24px,3vw,36px)}
@media(max-width:1000px){.bento{grid-template-columns:repeat(2,1fr)}
  .tile--tall{grid-row:auto}}
@media(max-width:620px){.bento{grid-template-columns:1fr}}

.tile{border-radius:4px;overflow:hidden;position:relative;display:flex;
  flex-direction:column;justify-content:space-between;min-height:210px;
  padding:clamp(20px,2.2vw,30px);
  background:linear-gradient(180deg,var(--lit) 0%,var(--stage) 46%)}
.tile--wide{grid-column:span 2}
.tile--tall{grid-row:span 2}
@media(max-width:620px){.tile--wide,.tile--tall{grid-column:auto;grid-row:auto}}

/* type that can carry a tile on its own */
.t-big{font-size:clamp(29px,3.7vw,50px);line-height:.99;letter-spacing:-.032em;
  font-weight:700;color:var(--bright);margin:0;text-wrap:balance;
  font-variation-settings:'wdth' 112}
.t-lede{font-size:15px;line-height:1.5;color:var(--scrim);margin:14px 0 0;max-width:34ch}
.t-k{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--haze);margin:0 0 auto}
.tile ul{margin:18px 0 0;padding-left:17px;display:grid;gap:8px}
/* A two-row tile is taller than the copy it holds. space-between pushes the
   heading and the list to opposite ends and leaves a hole down the middle;
   grouping them at the top reads as a generous tile instead. The heading also
   gets to run larger here, because it has the room. */
.tile--tall{justify-content:flex-start}
.tile--tall ul{margin-top:clamp(22px,2.8vw,38px)}
.tile--tall .t-big{font-size:clamp(34px,4.4vw,62px)}
.tile li{font-size:14px;line-height:1.45;color:var(--scrim)}

/* a light tile, for contrast against the void */
.tile--light{background:#ECECEC;color:#141414}
.tile--light .t-big{color:#0E0E0E}
.tile--light .t-lede{color:#3C3C3C}
.tile--light .t-k{color:#6A6A6A}
.tile--light li{color:#2A2A2A}
.tile--light li::marker{color:var(--key-deep)}

/* the emphasis tile, one per grid at most. A raised ground with the ramp
   across its head, in place of the flat accent fill it used to carry. */
.tile--prime{background:var(--rig)}
.tile--prime::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:var(--prime)}
.tile--prime .t-big{color:var(--bright)}
.tile--prime .t-lede,.tile--prime li{color:var(--scrim)}


/* image tiles bleed to the edge, no padding, no border */
.tile--img{padding:0;min-height:210px}
.tile--img img{width:100%;height:100%;object-fit:cover;display:block}
.tile--img figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:30px 16px 12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--scrim);
  background:linear-gradient(180deg,rgba(8,8,8,0),rgba(8,8,8,.88))}

/* ---------------------------------------------- deploying the ramp ------- */
/* The prime ramp was defined and then used in two rules totalling 6px of
   height. Numbered series run through it instead of all sitting in violet,
   so the spectrum does real work and each step is distinguishable at a glance.
   Violet stays the brand signal: it closes every run and owns buttons, links
   and the logotype. */
.bens .ben:nth-child(1) .n,   .proc .proc-step:nth-child(1) .n   { color:var(--photon) }
.bens .ben:nth-child(2) .n,   .proc .proc-step:nth-child(2) .n   { color:var(--signal) }
.bens .ben:nth-child(3) .n,   .proc .proc-step:nth-child(3) .n   { color:var(--index-lift) }
.proc .proc-step:nth-child(4) .n { color:var(--pulse-lift) }
.proc .proc-step:nth-child(5) .n { color:var(--violet-lift) }

.bens .ben:nth-child(1)::before,  .proc .proc-step:nth-child(1)::before { background:var(--photon) }
.bens .ben:nth-child(2)::before,  .proc .proc-step:nth-child(2)::before { background:var(--signal) }
.bens .ben:nth-child(3)::before,  .proc .proc-step:nth-child(3)::before { background:var(--index) }
.proc .proc-step:nth-child(4)::before { background:var(--pulse) }
.proc .proc-step:nth-child(5)::before { background:var(--violet-lift) }

/* the tick markers carry it too, so lists read as a sequence not a bullet pile */
.ticks--prime li:nth-child(1)::before { background:var(--photon) }
.ticks--prime li:nth-child(2)::before { background:var(--signal) }
.ticks--prime li:nth-child(3)::before { background:var(--index) }
.ticks--prime li:nth-child(4)::before { background:var(--pulse) }
.ticks--prime li:nth-child(5)::before { background:var(--violet-lift) }

/* A third ground, so a long page is not two tones. Sections marked .tone sit
   raised against the void and give the scroll a rhythm. */
.tone{background:var(--stage);border-block:1px solid var(--grip-soft)}
/* a raised band supplies its own separation, so the section above it should not
   also pay full bottom padding */
section + .tone{margin-top:calc(-1 * clamp(56px,8vw,112px) / 2)}
.tone .ticks li{background:var(--rig)}

/* ---------------------------------------------------------------- work --- */
.work-note{display:flex;gap:12px;align-items:flex-start;margin-top:clamp(22px,3vw,32px);
  padding:14px 18px;border:1px dashed var(--control);border-radius:3px;background:var(--stage)}
.work-note b{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--photon);white-space:nowrap;padding-top:3px}
.work-note p{margin:0;font-size:13.5px;line-height:1.55;color:var(--haze);max-width:78ch}

/* Built for a small body of work. One piece leads at full width and three sit
   below it, which reads as confident; a six-slot grid with gaps reads as thin. */
.work-feature{margin-top:clamp(30px,4vw,48px)}
.work-feature .work-media{aspect-ratio:21/9}
.work-feature .work-body{padding:clamp(22px,3vw,34px)}
.work-feature .work-body h3{font-size:clamp(22px,2.6vw,30px)}
.work-feature .work-body p{font-size:16px;max-width:60ch}
.work-feature .work-meta{max-width:620px}

.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  margin-top:clamp(16px,2vw,26px)}
@media(max-width:980px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.work-grid{grid-template-columns:1fr}}

.work{display:flex;flex-direction:column;border:1px solid var(--grip);border-radius:3px;
  overflow:hidden;background:var(--stage)}
.work-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--void)}
.work-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Unmissable while these are stand-ins. Delete this rule and the <b> in the
   markup when real frames go in. */
.work-ph{position:absolute;top:10px;left:10px;font-family:var(--sans);font-size:9px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--void);
  background:var(--photon);padding:4px 8px;border-radius:2px}
.work-body{padding:clamp(18px,2.2vw,24px);display:grid;gap:9px;flex:1;align-content:start}
.work-body h3{font-size:19px}
.work-body p{font-size:14.5px;line-height:1.55;color:var(--haze);max-width:46ch}
.work-meta{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--grip-soft)}
.work-meta div{flex:1 1 33%;display:grid;gap:3px;min-width:88px}
.work-meta .k{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--haze)}
.work-meta .v{font-family:var(--mono);font-size:13px;color:var(--bright);
  font-variant-numeric:tabular-nums}

/* a narrower proof strip, for the home page */
.frames{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(26px,3.5vw,40px)}
@media(max-width:760px){.frames{grid-template-columns:1fr}}
.frames > *{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--grip);border-radius:3px;background:var(--void);margin:0}
.frames img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,.84,.34,1)}
.frames a:hover img{transform:scale(1.04)}
.frames .fcap{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;
  display:block;
  font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--scrim);
  background:linear-gradient(180deg,rgba(8,8,8,0),rgba(8,8,8,.9))}

/* ------------------------------------------------- stage elevation ------- */
/* GX-STG-01. Drawn rather than photographed, so it scales, theme-matches and
   stays legible at any width. Every figure on it is measured. */
.elev-wide{max-width:1460px;margin-inline:auto;padding-inline:var(--gutter);
  margin-block:clamp(28px,4vw,44px) clamp(48px,7vw,88px)}
.elev-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.elev{width:100%;height:auto;display:block;border:1px solid var(--grip);border-radius:3px}
@media(max-width:900px){.elev-scroll .elev{min-width:880px}}
.elev .sheet{fill:#12141C;stroke:var(--grip)}
.elev .sheet-in{fill:none;stroke:var(--grip-soft)}
.elev .st{fill:none;stroke:#6E6E6E;stroke-width:1}
.elev .pnl{fill:url(#pnlfill);stroke:var(--haze);stroke-width:1}
.elev .wall{fill:url(#wallfill);stroke:var(--scrim);stroke-width:1.4}
.elev .grid{fill:none;stroke:var(--scrim);stroke-width:.5;opacity:.22}
.elev .arc{fill:none;stroke:var(--haze);stroke-width:1;stroke-dasharray:3 5}
/* a filled silhouette reads as an architectural scale figure; a stick
   figure reads as a placeholder */
.elev .figsolid{fill:var(--scrim);stroke:none}
.elev .cap{font-size:10.5px;letter-spacing:.2em;fill:var(--bright)}
.elev .dim{stroke:var(--bright);stroke-width:1;fill:none}
.elev .tick{stroke:var(--bright);stroke-width:1;opacity:.8}
.elev .spec{fill:rgba(8,8,8,.88);stroke:var(--grip)}
.elev .ramp{stroke:url(#elvramp);stroke-width:2}
.elev text{font-family:var(--mono)}
.elev .k{font-size:11px;letter-spacing:.13em;fill:var(--haze)}
.elev .v{font-size:15px;fill:var(--bright);letter-spacing:.02em}
.elev .v2{font-size:12px;fill:var(--bright);letter-spacing:.05em}
.elev .acc{font-size:11.5px;letter-spacing:.15em;fill:var(--bright)}
.elev .ttl{font-size:16px;letter-spacing:.2em;fill:var(--bright)}
.elev-cap{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--haze)}

/* The drawing is explorable: hovering or selecting a part drops everything
   else back so one system reads at a time. Numbers live on the drawing; the
   readout says what the part is for. */
.elev [data-part]{transition:opacity .22s ease}
.elev[data-focus] [data-part]{opacity:.15}
.elev[data-focus] [data-part].on{opacity:1}
/* the faint construction grid would jump to full strength otherwise */
.elev[data-focus] [data-part].grid.on{opacity:.35}
.elev[data-focus] .on.st{stroke:var(--scrim)}
.elev[data-focus] .on.wall,.elev[data-focus] .on.pnl{stroke:var(--bright)}
.elev .hit{fill:#FFFFFF;fill-opacity:0;cursor:pointer}
.elev .hit:hover{fill-opacity:.025}
@media(prefers-reduced-motion:reduce){.elev [data-part]{transition:none}}

/* without JS the buttons would do nothing, so they never render */
.elev-ui{display:none}
.js .elev-ui{display:block;margin-top:clamp(16px,1.8vw,22px)}
.elev-keys{display:flex;flex-wrap:wrap;gap:8px}
.ekey{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--haze);background:transparent;
  border:1px solid var(--control);border-radius:2px;padding:9px 13px;
  cursor:pointer;transition:color .15s ease,border-color .15s ease,
  background-color .15s ease}
.ekey:hover{color:var(--bright);border-color:var(--haze)}
.ekey:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.ekey[aria-pressed="true"]{color:var(--key-label);background:var(--key);
  border-color:var(--key)}
.elev-read{margin-top:16px;border-top:1px solid var(--grip-soft);
  padding-top:16px;display:grid;gap:clamp(14px,2vw,32px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:96px}
@media(max-width:760px){.elev-read{grid-template-columns:1fr}}
.er-t{font-size:clamp(18px,2vw,24px);line-height:1.15;letter-spacing:-.015em;
  font-weight:700;color:var(--bright);margin:0}
.er-note{font-size:14.5px;line-height:1.5;color:var(--scrim);margin:8px 0 0;
  max-width:44ch}
.elev-read > .er-note:only-child{margin:0;color:var(--haze)}
.er-specs{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--grip-soft);border:1px solid var(--grip-soft);
  align-self:start}
.er-specs > div{background:var(--void);padding:11px 13px}
.er-specs dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--haze)}
.er-specs dd{font-family:var(--mono);font-size:13px;color:var(--bright);
  margin:5px 0 0}

/* ---------------------------------------------- the spectrum on hover --- */
/* One signal for the whole site: anything that navigates or acts slides the
   ramp up from its bottom edge on hover and on keyboard focus, and the current
   page simply keeps it there. Footer links size to their text so the ramp
   matches the words rather than the column. */
.btn,.navlinks a,.entry,.fcol a,.ekey{position:relative;overflow:hidden}
.fcol a{width:fit-content}
.btn::after,.navlinks a::after,.entry::after,.fcol a::after,.ekey::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--prime);transform:translateY(2px);pointer-events:none;
  transition:transform .18s ease}
.btn:hover::after,.btn:focus-visible::after,
.navlinks a:hover::after,.navlinks a:focus-visible::after,
.navlinks a[aria-current="page"]::after,
.entry:hover::after,.entry:focus-visible::after,
.fcol a:hover::after,.fcol a:focus-visible::after,
.ekey:hover::after,.ekey:focus-visible::after{transform:none}
@media(prefers-reduced-motion:reduce){
  .btn::after,.navlinks a::after,.entry::after,.fcol a::after,
  .ekey::after{transition:none}}

/* -------------------------------------------------------- the brochure --- */
/* One document, and it has to survive being printed. The artifact viewer blocks
   file downloads, so there is no PDF behind a link — this page IS the document,
   and the print rules below turn it into a clean one. */
.doc-cover{padding-block:clamp(48px,7vw,96px) clamp(36px,5vw,64px);
  border-bottom:1px solid var(--grip-soft);position:relative}
.doc-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--prime)}
.doc-cover h1{margin-top:18px;max-width:17ch}
.doc-cover .lede{margin-top:18px}
.doc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  gap:1px;background:var(--grip-soft);border:1px solid var(--grip-soft);
  margin-top:clamp(26px,3.4vw,38px)}
.doc-meta > div{background:var(--stage);padding:14px 16px;display:grid;gap:5px;
  align-content:start}
.doc-meta .k{font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--haze)}
.doc-meta .v{font-family:var(--mono);font-size:13.5px;color:var(--bright)}
.doc-print{margin-top:20px;color:var(--haze)}
.doc-sec{padding-block:clamp(40px,5.5vw,76px);border-bottom:1px solid var(--grip-soft)}
.doc-sec:last-of-type{border-bottom:0}
.doc-sec h2{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.doc-n{font-family:var(--mono);font-size:.5em;letter-spacing:.14em;color:var(--haze);
  flex:none;font-weight:400}
.doc-sec .note{margin-top:14px}
.doc-sec .sched:first-of-type{margin-top:clamp(20px,2.6vw,30px)}
.ticks--no li::before{background:#FF8A8A}

@page{size:A4;margin:12mm 12mm}
@media print{
  /* A sheet, not a phone screenshot of the site. Dark color-scheme paints the
     page margin black and clips anything that overflows it. */
  :root{color-scheme:light;
    --void:#fff;--stage:#fff;--rig:#fff;--grip:#bbb;--grip-soft:#ddd;
    --haze:#555;--scrim:#222;--bright:#000;--key:#000;--key-label:#fff;
    --control:#888}
  html,body{background:#fff!important;color:#222!important;overflow:visible}
  header.site,footer.site,.edge,.doc-print,.btn,.band{display:none!important}
  .rise{opacity:1!important;transform:none!important}
  section{padding:0}
  h1{font-size:28pt}
  h2{font-size:16pt}
  .lede,.note{font-size:10.5pt;line-height:1.45}
  .doc-cover{break-after:page;page-break-after:always;border-bottom:0;
    min-height:250mm;display:flex;padding:0}
  .doc-cover .wrap{display:flex;flex-direction:column;flex:1}
  .doc-cover .doc-meta{margin-top:auto}
  .doc-sec{break-before:page;page-break-before:always;break-inside:avoid;
    page-break-inside:avoid;border-bottom:0;padding-block:0}
  .doc-sec h2,.sched-h{break-after:avoid;page-break-after:avoid}
  .sched,.slate,.ticks{break-inside:avoid;page-break-inside:avoid}
  /* the screen keeps two columns for a wide window only; a sheet is wide */
  .cols-2{grid-template-columns:1fr 1fr;gap:16pt}
  .slate,.slate-cell,.ticks,.ticks li,.doc-meta,.doc-meta > div{
    background:#fff!important;border-color:#ccc!important}
  .slate,.doc-meta{gap:0}
  .doc-meta{grid-template-columns:1fr 1fr}
  .slate-cell,.doc-meta > div{border:1px solid #ddd}
  .slate-cell{padding:6pt 8pt}
  .slate-cell .v{font-size:10.5pt}
  .slate-cell .n{font-size:8pt;line-height:1.3}
  .sched{margin-top:8pt}
  .elev-wide{max-width:none;margin-block:8pt 0;padding-inline:0}
  .elev-scroll{overflow:visible}
  .elev,.elev-scroll .elev{min-width:0!important;width:100%;height:auto}
  .elev{border-color:#999}
  .elev .sheet{fill:#fff;stroke:#bbb}
  .elev .sheet-in{stroke:#e2e2e2}
  .elev .wall{fill:#f4f4f6}
  .elev .pnl{fill:#eceef2;stroke:#666}
  .elev .st{stroke:#777}
  .elev .grid{stroke:#333}
  .elev .figsolid{fill:#111}
  .elev .dim,.elev .tick{stroke:#111}
  .elev .cap,.elev .acc,.elev .v,.elev .v2,.elev .ttl{fill:#111}
  .elev .k{fill:#444}
  .elev .spec{fill:#fff;stroke:#bbb}
  a[href]::after{content:""}
}

/* ----------------------------------------------------------------- FAQ --- */
.faq{border:1px solid var(--grip);border-radius:3px;overflow:hidden;margin-top:30px}
.faq details{border-bottom:1px solid var(--grip-soft);background:var(--stage)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:18px 20px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;
  color:var(--bright);font-variation-settings:'wdth' 106;display:flex;
  justify-content:space-between;gap:18px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:18px;font-weight:500;
  color:var(--bright);flex:none;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details > p{padding:0 20px 20px;max-width:70ch;color:var(--haze);font-size:15px}

/* ---------------------------------------------------------------- band --- */
.band{border-block:1px solid var(--grip-soft);position:relative;background:
  /* No spectrum wash here. Saturated colour at low opacity over a dark ground
     does not stay colour — it goes to mud, and a tinted grey smear reads worse
     than no colour at all. The ramp earns its place at full strength, in the
     rules; large areas stay neutral. */
  radial-gradient(64% 130% at 14% 0%,rgba(158,182,230,.10),transparent 64%),
  var(--stage)}
.band .wrap{display:flex;flex-wrap:wrap;gap:28px;align-items:center;
  justify-content:space-between;padding-block:clamp(44px,6vw,76px)}
.band h2{max-width:24ch}
.band .note{margin-top:12px}

/* --------------------------------------------------------------- forms --- */
.formcard{position:relative;background:var(--stage);border:1px solid var(--grip);border-radius:3px;
  padding:clamp(22px,3.5vw,36px)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
label{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--haze)}
input,select,textarea{font-family:var(--sans);font-size:15px;color:var(--bright);
  background:var(--rig);border:1px solid var(--control);padding:12px 14px;border-radius:2px;width:100%}
input:hover,select:hover,textarea:hover{border-color:#847C93}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:#5A5468}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--haze) 50%),
                   linear-gradient(135deg,var(--haze) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.formfoot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:22px}
.status{font-family:var(--mono);font-size:12.5px;line-height:1.5;padding:12px 14px;margin-top:18px;
  border-left:2px solid var(--signal);background:var(--rig);color:var(--scrim)}
.status.err{border-left-color:#FF7A7A}
.status[hidden]{display:none!important}

.contactgrid{display:grid;gap:clamp(28px,4vw,52px);margin-top:clamp(28px,4vw,44px)}
@media(min-width:900px){.contactgrid{grid-template-columns:1.5fr 1fr}}
.deets{display:grid;gap:22px;align-content:start}
.deet{display:grid;gap:4px}
.deet .k{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--haze)}
.deet .v{font-size:15.5px;color:var(--bright);line-height:1.5}
.deet .v a:hover{color:var(--bright)}

/* An inline link has no accent colour to borrow, so it takes the ramp as its
   underline — the same signal the nav and the section ticks use. */
.lnk{color:var(--bright);text-decoration:none;
  background-image:var(--prime);background-repeat:no-repeat;
  background-size:100% 2px;background-position:0 100%;padding-bottom:3px}
.lnk:hover{background-size:100% 3px}

/* -------------------------------------------------------------- footer --- */
footer.site{border-top:1px solid var(--grip-soft);padding-block:clamp(44px,6vw,72px)}
.fgrid2{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:36px}
@media(max-width:900px){.fgrid2{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid2{grid-template-columns:1fr}}
.fcol h4{font-family:var(--sans);font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--haze);font-weight:600;margin-bottom:14px}
.fcol a{display:block;color:var(--haze);font-size:14.5px;padding-block:6px;transition:color .15s ease}
.fcol a:hover{color:var(--bright)}
.footbot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--grip-soft)}
.news{display:flex;gap:8px;margin-top:10px}
.news input{flex:1;min-width:0}
.edge{height:6px;background:var(--prime)}

/* -------------------------------------------------------------- motion --- */
.mark .bl{transform-origin:var(--ox,200px) var(--oy,89px)}
.mark.anim .bl{transform:scaleY(.02);opacity:0}
.mark.anim.run .bl{transform:scaleY(1);opacity:1;
  transition:transform .62s cubic-bezier(.16,.84,.34,1),opacity .4s ease}
.js .rise{opacity:0;transform:translateY(16px)}
.js .rise.in{opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,.84,.34,1)}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .mark.anim .bl{transform:none;opacity:1}
  .js .rise{opacity:1;transform:none}
}