@charset "UTF-8";
/* ============================================================================
   MXCRODRIGUES — Studio Digital
   Monochrome. Black, bone, steel. The only colour on the page comes out of the
   photographs and the chrome, which is the point: the work supplies the colour.
   Anybody (display, 50–150 width axis) · Geist (text) · Geist Mono (data)
   ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: "Anybody";
  src: url("/assets/fonts/anybody-latin.woff2") format("woff2-variations");
  font-weight: 100 900; font-stretch: 50% 150%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2010-2015, U+2018-201E, U+2020, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2192, U+2197, U+2212;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2010-2015, U+2018-201E, U+2020, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2192, U+2197, U+2212;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geistmono-latin.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00B7, U+2013-2014, U+2192, U+2197;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  --black:   #000000;
  --near:    #060607;
  --steel-1: #0C0D0F;
  --steel-2: #141518;
  --steel-3: #1E2024;
  --steel-4: #2C2F35;

  --bone:    #E8E6E1;   /* 17.4:1 on black */
  --bone-2:  #9A9A97;   /*  7.1:1 on black */
  --bone-3:  #787A7F;   /*  4.89:1 on black, 4.53:1 on steel-1 — safe on both */

  /* No accent hue. Emphasis is pure white against bone, and the chrome. */
  --hot:     #FFFFFF;
  --line:    rgba(232, 230, 225, .10);
  --line-2:  rgba(232, 230, 225, .22);
  --ink:     #060607;   /* on bone surfaces */
  --ink-2:   #55565A;   /*  5.9:1 on bone */

  --d: "Anybody", "Arial Narrow", Impact, sans-serif;
  --t: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --m: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: clamp(18px, 4.2vw, 64px);
  --sect: clamp(96px, 15vw, 230px);
  --warn: #E8746B;   /* 7.1:1 on black. The only hue in the palette, spent
                        on the one state that must not be missed. */
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
html.lenis-on { scroll-behavior: auto; }
body {
  background: var(--black); color: var(--bone);
  font-family: var(--t); font-size: 1rem; line-height: 1.55;
  font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
::selection { background: var(--bone); color: var(--black); }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 300;
  background: var(--bone); color: var(--ink); padding: 12px 20px; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- grain -- */
body::after {
  content: ""; position: fixed; inset: -140px; z-index: 400;
  pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(1) infinite;
  will-change: transform;
}
@keyframes grain {
  0%{transform:translate(0,0)} 15%{transform:translate(-7%,-4%)} 30%{transform:translate(5%,-7%)}
  45%{transform:translate(-4%,6%)} 60%{transform:translate(7%,3%)} 75%{transform:translate(-6%,-6%)}
  90%{transform:translate(4%,7%)} 100%{transform:translate(0,0)}
}

/* ----------------------------------------------------------- typography -- */
.hx {
  font-family: var(--d); font-weight: 800; font-stretch: 128%;
  line-height: .82; letter-spacing: -.045em; text-transform: uppercase;
  text-wrap: balance;
  /* Last-resort guard: at display sizes a single long word can still be wider
     than a narrow column, and the mask's overflow:hidden would clip it. */
  overflow-wrap: break-word;
}
/* Narrow columns cannot carry 128% width. Pull it in rather than shrink the
   type further — the same headline, still the widest thing on the screen. */
@media (max-width: 560px) { .hx { font-stretch: 104%; letter-spacing: -.035em; } }
.hx--xl { font-size: clamp(2.15rem, 12vw, 14rem); }
.hx--l  { font-size: clamp(1.85rem, 8vw, 8.5rem); }
.hx--m  { font-size: clamp(1.9rem, 5vw, 4.2rem); font-stretch: 118%; letter-spacing: -.035em; }
.hx--s  { font-size: clamp(1.3rem, 2.4vw, 2rem); font-stretch: 112%; letter-spacing: -.03em; line-height: .94; }

.mono {
  font-family: var(--m); font-size: .6875rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bone-3); line-height: 1.4;
}
.mono--hot { color: var(--bone); }

.lede { font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.5; color: var(--bone-2); max-width: 48ch; text-wrap: pretty; }
.txt  { color: var(--bone-2); max-width: 60ch; text-wrap: pretty; }
.txt p + p { margin-top: 1em; }
.txt strong { color: var(--bone); font-weight: 600; }

/* --------------------------------------------------------------- layout -- */
.pad { padding-inline: var(--pad); }
.sect { padding-block: var(--sect); position: relative; }
.rule { height: 1px; background: var(--line); border: 0; }
.stack { display: grid; gap: clamp(12px, 1.6vw, 20px); }

/* Corner navigation. No bar — the page runs edge to edge underneath. */
.corner {
  position: fixed; z-index: 200; top: var(--pad); pointer-events: none;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
}
/* Nothing sits behind it, so when a headline the size of the viewport passes
   underneath it becomes unreadable. It leaves rather than fight for contrast. */
.corner--hide { transform: translateY(calc(-100% - var(--pad) - 8px)); opacity: 0; }

/* Sits under the corner marks and over the page. Off at the very top, where
   the hero carries its own vignette and a second one would only muddy it. */
.topveil {
  position: fixed; top: 0; left: 0; right: 0; z-index: 199; height: calc(var(--pad) * 2 + 66px);
  pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.52) 42%, rgba(0,0,0,.18) 76%, transparent 100%);
}
.topveil.is-on { opacity: 1; }

/* Once scrolled on a narrow screen the corner keeps the wordmark and drops
   the descriptor. The veil fixes contrast; this fixes the collision, which is
   a different problem: two pieces of text wanting the same two lines. The
   descriptor is a nicety at the top of a page and an obstruction inside it. */
@media (max-width: 860px) {
  .corner--tight .brand span { opacity: 0; transform: translateY(-4px); }
  .brand span { transition: opacity .3s var(--ease), transform .3s var(--ease); }
}
@media (prefers-reduced-motion: reduce) { .topveil { transition: none; } }
.corner > * { pointer-events: auto; }
.corner--l { left: var(--pad); }
.corner--r { right: var(--pad); display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.corner a, .corner button { transition: opacity .3s var(--ease); }
.corner a:hover, .corner button:hover { opacity: .55; }

.brand { display: grid; gap: 3px; }
.brand b { font-family: var(--d); font-weight: 800; font-stretch: 120%; font-size: .95rem; letter-spacing: -.02em; text-transform: uppercase; }
.brand span { font-family: var(--m); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-3); }

.navlink { font-family: var(--m); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.navlink[aria-current="page"] { color: var(--hot); }
@media (max-width: 860px) { .navlink { display: none; } }

.menu-btn {
  font-family: var(--m); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  /* A 16px-tall primary navigation control fails WCAG 2.5.8 outright. */
  padding: 14px 4px; margin: -14px -4px;
}

/* ------------------------------------------------------------------ cta -- */
.cta {
  position: relative; display: inline-flex; align-items: center; gap: .8em;
  font-family: var(--m); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 1.1em 1.8em; border: 1px solid var(--line-2); overflow: hidden; isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bone);
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.cta:hover, .cta:focus-visible { color: var(--ink); border-color: var(--bone); }
.cta:hover::before, .cta:focus-visible::before { transform: none; }
.cta svg { transition: transform .45s var(--ease); }
.cta:hover svg { transform: translateX(4px); }
.cta--solid { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.cta--solid::before { background: var(--black); }
.cta--solid:hover { color: var(--bone); }

.tl { position: relative; display: inline-flex; align-items: center; gap: .55em; font-family: var(--m); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 3px; }
.tl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.tl:hover::after, .tl:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* =================================================================== hero ==
   The chrome form is the studio's object: a single piece of liquid metal that
   turns with the pointer. Everything else in the hero is set small and pushed
   to the edges, so the object holds the middle.
   ========================================================================= */
.hero { position: relative; min-height: 100svh; display: grid; overflow: hidden; isolation: isolate; }
.hero__gl { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease); }
.hero__gl[data-ready="true"] { opacity: 1; }
/* Until (or unless) WebGL runs, the render itself is the hero. */
.hero__still { position: absolute; inset: 0; z-index: -1; }
.hero__still img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.hero__gl[data-ready="true"] ~ .hero__still { opacity: 0; transition: opacity 1s var(--ease); }
.hero__vig { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 78% 62% at 50% 46%, transparent 22%, rgba(0,0,0,.72) 78%),
              /* A scrim down the left, where the headline sits. The type is
                 blended against what is behind it, so the luminance under the
                 words is what decides whether they can still be read. */
              linear-gradient(97deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.56) 36%, rgba(0,0,0,.14) 64%, transparent 84%),
              linear-gradient(180deg, rgba(0,0,0,.8) 0%, transparent 26%, transparent 62%, rgba(0,0,0,.92) 100%); }

/* No z-index here on purpose. A positioned element with a z-index starts its
   own stacking context, and the headline below would then blend with nothing
   but this box. Left on `auto` it still paints last, and the blend reaches all
   the way down to the chrome. */
.hero__in { position: relative; display: grid; align-content: space-between; min-height: 100svh; padding-block: calc(var(--pad) + 64px) var(--pad); }
.hero__mid { display: grid; gap: clamp(16px, 2.4vw, 26px); justify-items: start; align-content: center; }
/* The chrome turns underneath the words and cuts through them: where the
   metal throws a highlight, the letter it passes under inverts. Difference,
   not opacity — the type is never faded, only re-lit. */
.hero__line { max-width: 15ch; mix-blend-mode: difference; }
@supports not (mix-blend-mode: difference) { .hero__line { mix-blend-mode: normal; } }
.hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ================================================================ marquee ==
   One continuous strip of what the studio does. Duplicated once and animated
   by transform, so it loops without a seam and without touching layout.
   ========================================================================= */
.mq { position: relative; overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(14px, 1.8vw, 24px); }
/* The CSS animation is the floor: it runs with no JavaScript at all. When the
   scroll driver is running it takes over and this is switched off. */
.mq__track { display: flex; width: max-content; will-change: transform; animation: mq 38s linear infinite; }
.mq.is-driven .mq__track { animation: none; }
.mq__group { display: flex; align-items: center; flex: none; }
.mq__item { display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 46px); padding-inline: clamp(20px, 3vw, 46px); }
.mq__item span { font-family: var(--d); font-weight: 800; font-stretch: 118%; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(1.4rem, 3.4vw, 3rem); line-height: 1; white-space: nowrap; }
.mq__item i { width: 7px; height: 7px; background: var(--bone-3); flex: none; transform: rotate(45deg); }
@keyframes mq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.mq:hover .mq__track { animation-play-state: paused; }

/* ============================================================= discipline ==
   Numbered, oversized, and set against a full-bleed image that runs past the
   text on one side. The number is the structure — these really are ordered.
   ========================================================================= */
.disc { position: relative; }
.disc__head { display: grid; gap: clamp(14px, 2vw, 24px); max-width: 46ch; }
.disc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); margin-top: clamp(34px, 5vw, 70px); }
@media (max-width: 780px) { .disc__grid { grid-template-columns: 1fr; } }
.disc__cell { background: var(--black); box-shadow: 0 0 0 1px var(--line); padding: clamp(22px, 3vw, 40px); display: grid; gap: 10px; align-content: start; }
.disc__cell i { font-family: var(--m); font-style: normal; font-size: .64rem; letter-spacing: .18em; color: var(--bone-3); }
.disc__cell :is(h2, h3) { font-family: var(--d); font-weight: 750; font-stretch: 112%; text-transform: uppercase; letter-spacing: -.025em; font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1; }
.disc__cell p { color: var(--bone-2); font-size: .93rem; line-height: 1.6; }

/* ================================================================== slab ==
   A photograph given the whole viewport, with the section's number set over
   it at a size the image can carry.
   ========================================================================= */
.slab { position: relative; min-height: 82svh; display: grid; align-items: end; overflow: hidden; }
/* Oversized on purpose: the parallax shifts this ±8%, and at the extremes an
   inset:0 image would show the container edge instead of photograph. */
.slab__img { position: absolute; left: 0; right: 0; top: -12%; height: 124%; z-index: 0; }
.slab__img picture { display: block; width: 100%; height: 100%; }
.slab__img img { width: 100%; height: 100%; object-fit: cover; }
.slab::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, transparent 34%, transparent 44%, rgba(0,0,0,.9) 100%); }
.slab__in { position: relative; z-index: 2; padding-block: clamp(30px, 6vw, 80px); display: grid; gap: clamp(12px, 1.6vw, 20px); }
.slab__n { font-family: var(--d); font-weight: 800; font-stretch: 140%; font-size: clamp(5rem, 22vw, 20rem); line-height: .74; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px var(--line-2); pointer-events: none; }

/* ======================================================== before / after ==
   The range input IS the handle: keyboard, touch and assistive support come
   from the platform instead of being reimplemented.
   ========================================================================= */
.ba { position: relative; max-width: 1180px; margin-inline: auto; }
.ba__f { position: relative; overflow: hidden; aspect-ratio: 5 / 4; background: var(--steel-1); --pos: 50%; touch-action: pan-y; }
.ba__f.is-portrait { aspect-ratio: 4 / 5; }
.ba__i { position: absolute; inset: 0; }
.ba__i picture { display: block; width: 100%; height: 100%; }
.ba__i img { width: 100%; height: 100%; object-fit: cover; }
.ba__i--after { clip-path: inset(0 0 0 var(--pos)); }
.ba__seam { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; z-index: 3; background: var(--bone); pointer-events: none; will-change: transform; }
.ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border: 1px solid var(--bone); background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; }
.ba__r { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; padding: 0; background: none; border: 0; -webkit-appearance: none; appearance: none; cursor: ew-resize; }
.ba__r::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 100%; background: transparent; border: 0; cursor: ew-resize; }
.ba__r::-moz-range-thumb { width: 44px; height: 100vh; background: transparent; border: 0; cursor: ew-resize; }
.ba__r::-moz-range-track { background: transparent; border: 0; }
.ba__tag { position: absolute; bottom: 16px; z-index: 3; font-family: var(--m); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; padding: 7px 12px; background: rgba(0,0,0,.6); border: 1px solid var(--line-2); pointer-events: none; }
.ba__tag--b { left: 16px; } .ba__tag--a { right: 16px; }
.ba__bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; justify-content: space-between; margin-top: 16px; }
.ba__tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; }
.ba__tab { font-family: var(--m); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; border: 1px solid var(--line); color: var(--bone-3); transition: color .3s var(--ease), border-color .3s var(--ease); }
.ba__tab:hover { color: var(--bone); border-color: var(--line-2); }
.ba__tab[aria-selected="true"] { color: var(--ink); background: var(--bone); border-color: var(--bone); }

/* ================================================================= close ==
   The last screen is one instruction, at the largest size the page uses.
   ========================================================================= */
.close { position: relative; padding-block: clamp(90px, 16vw, 240px); overflow: hidden; }
.close__in { display: grid; gap: clamp(20px, 3vw, 40px); justify-items: start; }

/* ================================================================ footer == */
.foot { border-top: 1px solid var(--line); }
.foot__grid { display: grid; grid-template-columns: minmax(0,4fr) repeat(3, minmax(0,2fr)); gap: clamp(24px, 3vw, 48px); padding-block: clamp(38px, 5vw, 66px); }
@media (max-width: 880px) { .foot__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; gap: 28px; } }
.foot__grid h2 { font-family: var(--m); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-3); margin-bottom: 14px; }
.foot__grid ul { display: grid; gap: 9px; }
.foot__grid a { font-size: .92rem; color: var(--bone-2); transition: color .3s var(--ease); overflow-wrap: anywhere; }
.foot__grid a:hover { color: var(--bone); }
.foot__bar { display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; align-items: center; padding-block: 22px; border-top: 1px solid var(--line); font-family: var(--m); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.foot__bar nav { display: flex; gap: 20px; }

/* ============================================================ mobile menu == */
.mnav { position: fixed; inset: 0; z-index: 250; background: var(--black); padding: calc(var(--pad) + 60px) var(--pad) var(--pad); display: flex; flex-direction: column; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease); visibility: hidden; }
.mnav[data-open="true"] { clip-path: inset(0 0 0 0); visibility: visible; }
.mnav a.mnav__l { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--d); font-weight: 800; font-stretch: 118%; text-transform: uppercase; font-size: clamp(1.7rem, 8vw, 2.8rem); line-height: 1; letter-spacing: -.03em; opacity: 0; transform: translateY(20px); }
.mnav[data-open="true"] a.mnav__l { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i,0) * .06s + .1s); }
.mnav a.mnav__l i { font-family: var(--m); font-style: normal; font-size: .6rem; letter-spacing: .16em; color: var(--bone-3); }
.mnav__foot { margin-top: auto; padding-top: 30px; }
@media (min-width: 861px) { .mnav { display: none; } .menu-btn { display: none; } }

/* ============================================================== utilities == */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mt-s { margin-top: clamp(14px, 1.8vw, 22px); }
.mt-m { margin-top: clamp(26px, 3.4vw, 46px); }
.mt-l { margin-top: clamp(40px, 6vw, 84px); }

/* Reveals.
   Not a fade. Everything on this page arrives by wipe — a clip edge crossing
   the block, the way a cut works in film — because a page where forty things
   drift upward at you reads as a template, and this one is not.
   clip-path composites; nothing here touches layout. */
[data-rv] { opacity: 1; }
.js [data-rv]:not(.is-in) { clip-path: inset(0 0 100% 0); }
/* The open state is deliberately larger than the box. A wipe that finishes at
   inset(0) keeps clipping, and anything a child hangs outside its parent on
   purpose — the phone overlapping a screenshot, say — is cut off by the thing
   that was supposed to have finished revealing it. */
[data-rv].is-in { clip-path: inset(-10%); transition: clip-path .95s cubic-bezier(.72,0,.16,1); }

/* Direction is editorial: the eye is sent across a row, down a column. */
.js [data-rv="l"]:not(.is-in) { clip-path: inset(0 100% 0 0); }
.js [data-rv="r"]:not(.is-in) { clip-path: inset(0 0 0 100%); }
.js [data-rv="u"]:not(.is-in) { clip-path: inset(100% 0 0 0); }

/* Above the fold there is no time for a slow wipe: the browser will not count
   a still-animating element as painted, and that element is the LCP. */
[data-rv].is-fast.is-in { transition-duration: .42s; transition-delay: 0s; }
[data-rv-d="1"].is-in { transition-delay: .1s; }
[data-rv-d="2"].is-in { transition-delay: .2s; }
[data-rv-d="3"].is-in { transition-delay: .3s; }

/* Wordmark reveal: each line clipped and pushed, released together. */
/* The mask hides the line until it slides up. It has to be taller than the
   line to do that without also cutting the accents off É, Í, Á, Ã and Ñ, which
   sit above the cap height — the padding gives them room and the negative
   margin gives the space straight back, so nothing moves. The inner span is
   translated by its OWN height, so it still starts fully out of sight. */
[data-mask] { display: block; overflow: hidden; padding-top: .2em; margin-top: -.2em; }
[data-mask] > span { display: block; }
.js [data-mask]:not(.is-in) > span { transform: translateY(102%); }
[data-mask].is-in > span { transform: none; transition: transform .95s var(--ease); }

/* ========================================================= touch targets ==
   WCAG 2.5.8 wants 24px in both axes on every pointer, not only on a
   touchscreen. Padding grows the hit box and the matching negative margin
   hands the space back, so the visual rhythm is exactly where the design put
   it. `.tl` gets a pseudo-element instead: it carries an underline pinned to
   its bottom edge, and padding would drag that underline away from the text.
   ========================================================================= */
.navlink        { padding-block: 5px; margin-block: -5px; }
.brand          { padding-block: 3px; margin-block: -3px; }
/* :not(.brand) because the wordmark in this column is also a link, and it is a
   two-row grid — inline-block collapses it and the descriptor ends up welded to
   the end of the name. The padding here is for touch targets on list links. */
.foot__grid a:not(.brand) { display: inline-block; padding-block: 4px; margin-block: -4px; }
.foot__bar nav a{ display: inline-block; padding-block: 5px; margin-block: -5px; }
.tl::before     { content: ""; position: absolute; inset: -6px -2px; }

@media (pointer: coarse) {
  .brand, .tl { padding-block: 8px; }
  .foot__grid ul { gap: 4px; }
  .foot__grid a:not(.brand), .foot__bar nav a { padding-block: 9px; margin-block: 0; }
  .foot__bar nav { gap: 24px; }
}

/* ============================================================== consent ==
   A required legal control. It had browser defaults and a 13px box, which is
   both a 2.5.8 failure and the one place on the form where the design stopped.
   ========================================================================= */
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.consent input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 24px; height: 24px; margin: 0; border: 1px solid var(--line-2);
  background: var(--steel-1); cursor: pointer; display: grid; place-content: center;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.consent input::after {
  content: ""; width: 11px; height: 11px; background: var(--black);
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 20%, 86% 8%, 38% 72%);
  transform: scale(0); transition: transform .2s var(--ease);
}
.consent input:checked { background: var(--bone); border-color: var(--bone); }
.consent input:checked::after { transform: scale(1); }
.consent input:hover { border-color: var(--bone-2); }
.consent label { color: var(--bone-2); font-size: .9rem; line-height: 1.55; cursor: pointer; padding-top: 2px; }
.consent label a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.field--err.consent input { border-color: var(--warn); }

/* ======================================================== reduced motion == */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  body::after { animation: none; }
  .mq__track { animation: none; transform: none; }
  [data-rv], .js [data-rv]:not(.is-in) { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js [data-mask]:not(.is-in) > span { transform: none !important; }
  .hero__gl { display: none; }
  .slab { min-height: 0; }
}

@media print {
  .corner, .mnav, .hero__gl, .mq { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =================================================================== work ==
   Real screenshots of live sites. The desktop capture carries the row and the
   phone overlaps it, which is how these things are actually seen — never one
   without the other.
   ========================================================================= */
.wk { display: grid; gap: clamp(64px, 10vw, 150px); }
.wk__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 70px); align-items: center; }
.wk__row:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.wk__row:nth-child(even) .wk__shots { order: 2; }
@media (max-width: 900px) {
  .wk__row, .wk__row:nth-child(even) { grid-template-columns: 1fr; gap: 22px; }
  .wk__row:nth-child(even) .wk__shots { order: 0; }
}

.wk__shots { position: relative; }
.wk__desk { border: 1px solid var(--line-2); overflow: hidden; background: var(--steel-1); }
.wk__desk picture, .wk__desk img { display: block; width: 100%; height: auto; }
.wk__mob {
  position: absolute; right: -3%; bottom: -12%; width: 22%; min-width: 96px;
  border: 1px solid var(--line-2); overflow: hidden; background: var(--steel-1);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.9);
}
.wk__mob picture, .wk__mob img { display: block; width: 100%; height: auto; }
@media (max-width: 620px) { .wk__mob { width: 27%; right: -2%; bottom: -8%; } }

.wk__meta { display: grid; gap: clamp(10px, 1.4vw, 16px); align-content: center; }
.wk__n { font-family: var(--m); font-size: .66rem; letter-spacing: .18em; color: var(--bone-3); }
.wk__name { font-family: var(--d); font-weight: 800; font-stretch: 118%; text-transform: uppercase; letter-spacing: -.035em; line-height: .92; font-size: clamp(1.5rem, 3.2vw, 2.6rem); }
.wk__sector { font-family: var(--m); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-2); }
.wk__meta p { color: var(--bone-2); font-size: .95rem; line-height: 1.62; max-width: 46ch; }
.wk__did { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wk__did span { font-family: var(--m); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--line); padding: 6px 10px; color: var(--bone-3); }
/* a whole sentence, so it is set as one — the uppercase labels around it are single words */
.wk__priv { font-family: var(--m); font-size: .64rem; letter-spacing: .04em; color: var(--bone-3); max-width: 40ch; line-height: 1.7; }

/* ================================================================== story ==
   A dated column. The years are the structure, so they carry the weight.
   ========================================================================= */
.story { display: grid; }
.story__row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: clamp(16px, 3.4vw, 56px); padding-block: clamp(20px, 2.6vw, 34px); border-top: 1px solid var(--line); align-items: start; }
.story__row:last-child { border-bottom: 1px solid var(--line); }
.story__y { font-family: var(--m); font-size: .68rem; letter-spacing: .12em; color: var(--bone-3); white-space: nowrap; padding-top: .3em; }
.story__b h3 { font-family: var(--d); font-weight: 750; font-stretch: 112%; text-transform: uppercase; letter-spacing: -.03em; font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1; margin-bottom: 8px; }
.story__b p { color: var(--bone-2); font-size: .94rem; line-height: 1.62; max-width: 58ch; }
@media (max-width: 620px) { .story__row { grid-template-columns: 1fr; gap: 6px; } }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1px; border: 1px solid var(--line); }
.facts > div { background: var(--black); box-shadow: 0 0 0 1px var(--line); padding: clamp(16px, 2vw, 24px); display: grid; gap: 6px; }
.facts dt { font-family: var(--m); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); }
.facts dd { font-size: .95rem; color: var(--bone); }

/* =================================================================== rail ==
   The work strip. It scrolls sideways under its own steam on touch and with
   no JS at all; on a wide pointer screen GSAP pins the viewport and drives
   the same track from the page scroll, which is the only horizontal movement
   on the site and is spent here on purpose.
   ========================================================================= */
.rail { position: relative; background: var(--steel-1); border-block: 1px solid var(--line); }
.rail__hd { padding: clamp(46px, 6vw, 96px) var(--pad) clamp(22px, 3vw, 40px); display: grid; gap: 14px; }
.rail__hd .lede { max-width: 44ch; }
.rail__vp {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  padding-bottom: clamp(46px, 6vw, 96px);
}
.rail__vp.is-pinned { overflow: hidden; scroll-snap-type: none; padding-bottom: 0; }
.rail__track { display: flex; gap: clamp(16px, 2.2vw, 40px); padding-inline: var(--pad); width: max-content; }
.rail__card { flex: 0 0 auto; width: min(600px, 78vw); scroll-snap-align: center; display: grid; gap: 14px; }
.rail__shot { border: 1px solid var(--line-2); overflow: hidden; background: var(--black); }
.rail__shot picture, .rail__shot img { will-change: transform; }
.rail__shot picture, .rail__shot img { display: block; width: 100%; height: auto; }
.rail__cap { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rail__cap b { font-family: var(--d); font-weight: 780; font-stretch: 112%; text-transform: uppercase; letter-spacing: -.03em; font-size: clamp(1rem, 1.5vw, 1.3rem); }
.rail__cap span { font-family: var(--m); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); }
.rail__end { flex: 0 0 auto; width: min(420px, 72vw); align-self: center; display: grid; gap: 18px; scroll-snap-align: center; }
.rail__foot { padding: 0 var(--pad) clamp(40px, 5vw, 80px); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rail__pinned-hint { font-family: var(--m); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); }
@media (max-width: 620px) { .rail__card { width: 86vw; } }

/* =================================================================== form ==
   The quote form. It is the only page on the site where the visitor does the
   work, so it is built to be filled in rather than admired: one column of
   labelled fields, a rule under each group, nothing decorative competing with
   the input the cursor is in.
   ========================================================================= */
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--m); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); margin-bottom: clamp(20px, 3vw, 34px); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--bone-3); }
.crumbs a { color: var(--bone-2); display: inline-block; padding-block: 6px; margin-block: -6px; }
.crumbs a:hover { color: var(--bone); }

.form { display: grid; gap: clamp(30px, 4vw, 52px); margin-top: clamp(28px, 4vw, 52px); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fset { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; }
.fset legend { float: left; width: 100%; padding: 0 0 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-family: var(--m); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-3); }
.fset legend + * { clear: both; }
.fset__hint { color: var(--bone-2); font-size: .92rem; line-height: 1.55; max-width: 58ch; margin-top: -4px; }

.frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field label { font-family: var(--m); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-2); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.field label span { color: var(--bone-3); letter-spacing: .1em; }
.field__hint { font-size: .8rem; line-height: 1.5; color: var(--bone-3); }

.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .97rem; color: var(--bone);
  background: var(--steel-1); border: 1px solid var(--line);
  padding: 13px 15px; border-radius: 0; appearance: none; -webkit-appearance: none;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--bone-3); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--bone); background: var(--steel-2);
  box-shadow: inset 0 0 0 1px var(--bone);
}
.field select {
  cursor: pointer; padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--bone-2) 50%), linear-gradient(135deg, var(--bone-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field select option { background: var(--steel-1); color: var(--bone); }

.field--err input, .field--err select, .field--err textarea { border-color: var(--warn); }
.field__err { font-family: var(--m); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--warn); line-height: 1.6; }
.alert { border: 1px solid var(--warn); color: var(--warn); padding: 14px 18px; font-size: .92rem; line-height: 1.55; margin-bottom: 26px; }

/* the four service cards */
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); gap: 1px; border: 1px solid var(--line); }
.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pick__box {
  display: grid; gap: 7px; align-content: start; height: 100%;
  padding: clamp(16px, 2vw, 22px); background: var(--black);
  box-shadow: 0 0 0 1px var(--line);
  transition: background-color .3s var(--ease);
}
.pick__box i { font-family: var(--m); font-style: normal; font-size: .62rem; letter-spacing: .18em; color: var(--bone-3); }
.pick__box b { font-family: var(--d); font-weight: 750; font-stretch: 112%; text-transform: uppercase; letter-spacing: -.025em; font-size: 1rem; line-height: 1.05; }
.pick__box em { font-style: normal; font-size: .84rem; line-height: 1.5; color: var(--bone-2); }
.pick:hover .pick__box { background: var(--steel-1); }
.pick input:focus-visible + .pick__box { outline: 2px solid var(--bone); outline-offset: -2px; }
.pick input:checked + .pick__box { background: var(--bone); }
.pick input:checked + .pick__box i,
.pick input:checked + .pick__box em { color: rgba(0, 0, 0, .66); }
.pick input:checked + .pick__box b { color: var(--black); }

/* Progressive disclosure. The gap lives on the open block's own padding, not
   on the container: four collapsed blocks with a container gap left 100px of
   nothing behind, which is the bug this markup was reshaped around. */
.reveals { display: grid; }
.reveal-block { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.reveal-block > div { overflow: hidden; min-height: 0; }
.reveal-block[data-open="true"] { grid-template-rows: 1fr; }
.reveal-block[data-open="true"] > div { padding-top: 16px; }

.stack-s { display: grid; gap: 14px; }
.form__send { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; margin-top: 8px; }
.form__direct { font-family: var(--m); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); }
.form__direct a { color: var(--bone); border-bottom: 1px solid var(--line-2); display: inline-block; padding-block: 5px 3px; margin-block: -5px -3px; }
.form__direct a:hover { border-color: var(--bone); }

.sent { display: grid; gap: 18px; justify-items: start; border: 1px solid var(--line-2); padding: clamp(28px, 5vw, 60px); }
.sent__tick { display: grid; place-content: center; width: 52px; height: 52px; border: 1px solid var(--bone); color: var(--bone); }

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

/* ============================================================ fitted type ==
   Each masked line divides the column by its own measured width, so the three
   lines of a statement come out at three different sizes, every one of them
   flush to the margin. `--em` is written by hx_line() in PHP from the font's
   real advance widths; the 0.97 keeps a hair of daylight at the right edge
   whatever the scrollbar is doing, and the fallback keeps the line readable
   if the attribute is ever missing.
   ========================================================================= */
.hx--fit [data-mask] {
  font-size: min(calc((100vw - 2 * var(--pad)) * 0.97 / var(--em, 14)), 14rem);
  overflow-wrap: normal;
}
@media (max-width: 420px) {
  /* Below this the columns are so narrow that a fitted line is smaller than
     the body copy under it, which reads as a mistake. Cap the division and
     let a long line wrap on its word boundaries instead. */
  .hx--fit [data-mask] { font-size: max(2.05rem, min(calc((100vw - 2 * var(--pad)) * 0.97 / var(--em, 14)), 14rem)); }
}

/* ================================================================= opener ==
   The site arrives out of black. The wordmark is set at the narrow end of the
   width axis and opens to its working width while a counter runs underneath;
   at 100 the panel splits horizontally and the hero is already turning behind
   it. Every step is a keyframe, so it begins at first paint and finishes
   whether or not a script ever runs.
   ========================================================================= */
@property --n { syntax: "<integer>"; initial-value: 100; inherits: false; }

.ovr { display: none; }
html.js[data-opener] .ovr {
  display: grid; position: fixed; inset: 0; z-index: 999;
  place-items: center; pointer-events: none;
  animation: ovr-off 0s 2.35s forwards;
}
/* Deliberately no scroll lock. A lock that depends on an animation or a script
   to lift is a page that can end up unscrollable, and the panels are fixed —
   they cover the view whether or not anyone scrolls underneath them. */

.ovr__panel { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--black); }
.ovr__panel--t { top: 0;    animation: ovr-up   1.15s 1.5s cubic-bezier(.76,0,.24,1) forwards; }
.ovr__panel--b { bottom: 0; animation: ovr-down 1.15s 1.5s cubic-bezier(.76,0,.24,1) forwards; }

/* Every box in here is a fixed size on purpose. The wordmark changes width for
   a second and a half, and a box that grew with it would be recorded as layout
   shift after layout shift — the glyphs move inside boxes that do not, so the
   page scores a clean zero while the type does the work. */
.ovr__in {
  position: relative; z-index: 1; display: grid; gap: 14px; justify-items: stretch;
  width: 100%; padding-inline: var(--pad); text-align: center;
  animation: ovr-fade .5s 1.42s var(--ease) forwards;
}
/* The viewBox is cut wide enough for the mark at its widest, so nothing ever
   reaches the edge — and clipped rather than visible, so it cannot if it did. */
.ovr__mark { display: block; width: min(92vw, 1060px); height: auto; margin-inline: auto; overflow: hidden; }
.ovr__mark text {
  font-family: var(--d); font-weight: 800; text-transform: uppercase;
  font-size: 108px; letter-spacing: -.04em; fill: var(--bone);
  font-variation-settings: "wdth" 128;
  animation: ovr-open 1.5s cubic-bezier(.19,1,.22,1) forwards;
}
.ovr__foot { display: flex; align-items: baseline; justify-content: center; gap: 14px; font-family: var(--m); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-3); }
/* the counter runs 0 → 100, so its box is reserved at three figures */
.ovr__n { font-style: normal; display: inline-block; min-width: 3.4ch; text-align: right; counter-reset: n var(--n); animation: ovr-count 1.42s cubic-bezier(.33,1,.68,1) forwards; }
.ovr__n::after { content: counter(n); }
.ovr__foot b { font-weight: 400; overflow: hidden; white-space: nowrap;
  animation: ovr-wipe 1.1s .34s cubic-bezier(.76,0,.24,1) both; }

@keyframes ovr-open  { from { font-variation-settings: "wdth" 52; letter-spacing: .03em; } }
@keyframes ovr-count { from { --n: 0; } to { --n: 100; } }
@keyframes ovr-wipe  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ovr-fade  { to { opacity: 0; } }
@keyframes ovr-up    { to { transform: translateY(-101%); } }
@keyframes ovr-down  { to { transform: translateY(101%); } }
@keyframes ovr-off   { to { visibility: hidden; } }

/* Reduced motion gets the same information with none of the theatre: the
   panel is simply never shown. */
@media (prefers-reduced-motion: reduce) {
  html.js[data-opener] .ovr { display: none; }
}

/* ================================================== type under pressure ==
   Anybody carries a width axis from 50 to 150. The colossal lines are set at
   the narrow end and open to full width as they cross the viewport, each line
   at its own rate, so a statement arrives compressed and finishes flush to the
   margin. It is the one thing on this site that could not be done with a
   static typeface, which is why it is the thing the site does.

   `hx_line()` sizes each line for the widest state, so the growth runs into
   the margin and never past it.
   ========================================================================= */
@property --wdth { syntax: "<number>"; initial-value: 128; inherits: false; }

.hx--fit [data-mask] { font-variation-settings: "wdth" var(--wdth), "wght" 800; }
/* Only while it is being driven: a static line has no business reflowing. */
.js .hx--fit.is-morph [data-mask] { will-change: font-variation-settings; contain: layout paint; }

@media (prefers-reduced-motion: reduce) {
  .hx--fit [data-mask] { --wdth: 128 !important; font-variation-settings: "wdth" 128, "wght" 800; }
}

/* ======================================================== page transitions ==
   A plain PHP site, cutting between pages like one document. The browser holds
   the old frame, the new one wipes up over it, and the corner marks stay put
   because they are named and therefore matched across the two.
   Chrome and Safari honour this; everywhere else the navigation is ordinary,
   which is the correct fallback.
   ========================================================================= */
@view-transition { navigation: auto; }

.corner--l { view-transition-name: mark; }
.corner--r { view-transition-name: nav; }
.foot      { view-transition-name: foot; }

::view-transition-group(root) { animation-duration: .5s; }
::view-transition-old(root) {
  animation: vt-out .34s cubic-bezier(.72,0,.16,1) both;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  animation: vt-in .5s cubic-bezier(.72,0,.16,1) both;
  mix-blend-mode: normal;
}
@keyframes vt-out { to { transform: scale(.986); opacity: .25; } }
@keyframes vt-in  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ============================================================== languages ==
   Three inline links, not a dropdown. The current one is lit; the others are
   quiet until you reach them. Padded out to a real touch target — this sits
   beside the menu button, and both have to be hittable with a thumb.
   ========================================================================= */
.langs { display: inline-flex; align-items: center; gap: 1px; }
.langs a {
  font-family: var(--m); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bone-3); padding: 13px 7px; margin-block: -13px; line-height: 1;
  transition: color .3s var(--ease);
}
.langs a + a { border-left: 1px solid var(--line); }
.langs a:hover, .langs a:focus-visible { color: var(--bone); }
.langs a[aria-current="true"] { color: var(--bone); }
@media (max-width: 860px) { .corner--r > .langs { display: none; } }

.langs--m { display: flex; gap: 0; margin-top: 18px; flex-wrap: wrap; }
.langs--m a { font-size: .68rem; letter-spacing: .1em; padding: 13px 14px 13px 0; }
.langs--m a + a { border-left: 1px solid var(--line); padding-left: 14px; }

/* The studio's location. It is information, not a link — there is no street
   address behind it and nothing to open. */
.foot__where { color: var(--bone-3); }