/* Brand faces, self-hosted (SIL Open Font Licence, licences in /assets/fonts/).
   No third-party request: the files come from this origin, like everything
   else. Archivo carries the Latin text with its width axis (75-125%), Roboto
   Flex the Cyrillic under the same family name so Russian pages keep the
   same widths, IBM Plex Sans Arabic the Arabic. unicode-range lets the
   browser fetch only the file a page actually needs (2026-09-24). */
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-latin.v1.woff2) format("woff2");font-weight:300 800;font-stretch:75% 125%;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-017F,U+0218-021B,U+02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2116,U+2122,U+2190-2197,U+2212,U+2248,U+2264-2265,U+25CF,U+2713}
@font-face{font-family:Archivo;src:url(/assets/fonts/robotoflex-cyrillic.v1.woff2) format("woff2");font-weight:300 800;font-stretch:75% 125%;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0490-0493,U+049A-049B,U+04AE-04B3,U+04BA-04BB,U+04D8-04D9,U+04E8-04E9}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(/assets/fonts/ibmplexsansarabic-400.v1.woff2) format("woff2");font-weight:300 500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(/assets/fonts/ibmplexsansarabic-600.v1.woff2) format("woff2");font-weight:600 800;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
/* ============================================================
   artifexceo.com — Rustam Khaitmetov
   Premium visual register: cinematic full-bleed photography, dark ground,
   high-contrast serif display, Deep Gold accent, generous air.
   Light sections are kept where the page carries long reading text, so the
   dark ground never becomes a wall of body copy.
   No framework, no build step, no webfont request.
   ============================================================ */

:root{
  /* dark ground — the page default */
  --ink:#0A0A0B;
  --ink-2:#101012;
  --ink-3:#16161A;
  --line-d:#232327;
  --line-d2:#2C2C32;

  /* light sections — reading relief */
  --paper:#F7F5F1;
  --paper-2:#FFFFFF;
  --line:#E5E1DA;

  --text:#EDEBE7;        /* on dark */
  --text-l:#141414;      /* on light */
  --muted:#9B978F;       /* on dark — 6.8:1 */
  /* the quietest warm grey that still clears WCAG AA 4.5:1 on all three dark
     grounds (4.97 / 4.78 / 4.53). The previous #6E6B65 measured 3.58:1, which
     failed on every caption and note that used it. */
  --muted-d:#837F79;
  --muted-l:#6B6760;     /* on light — 5.2:1 */

  /* Deep Gold is the official brand value (Artifex Brand Guidelines, §2 Visual
     Identity). It holds on the dark ground but only ~2.2:1 on paper, so
     --gold-2 is the darkened tone used wherever gold becomes text on light. */
  --gold:#C5A268;
  --gold-2:#8C6A2F;
  --gold-3:#E0C89B;
  --gold-s:#F7F1E6;

  /* Real faces, not a wish-list. The previous stack asked for Didot and Bodoni MT
     and fell through to Georgia for nearly every visitor, so the site looked
     different depending on whose machine it opened on.

     Bodoni Moda is the Didone the design was always approximating, and it is
     variable on optical size — the display sizes get the high-contrast cut and
     the smaller ones a sturdier one, which is what a real Didone does in metal.
     Inter carries the interface and covers Cyrillic for the Russian copy.
     JetBrains Mono has proper tabular figures, which the areas and heights need. */
  --fs:Archivo,"IBM Plex Sans Arabic","Segoe UI",-apple-system,system-ui,Arial,sans-serif;
  --fd:Archivo,"IBM Plex Sans Arabic","Segoe UI",-apple-system,sans-serif;
  --fm:Archivo,"IBM Plex Sans Arabic","Segoe UI",sans-serif;

  /* The six capability pages are laid out by this file and were pinned at
     1280px, so on a wide screen they sat in a column with the glass empty on
     both sides while every other page had already been widened. */
  --wrap:min(1680px, 94vw);
  --pad:clamp(20px,5vw,60px);
  --sec:clamp(68px,9vw,124px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  /* native widgets — scrollbars, the select dropdown, autofill — render dark
     instead of stock white, which used to flash against this ground */
  color-scheme:dark;
  /* reserve the scrollbar's width always, so opening the viewer — which locks
     scrolling — does not shift the page sideways underneath it */
  scrollbar-gutter:stable}

/* Every in-page link landed its target underneath the fixed bar: clicking "Path"
   put the heading behind the nav. This is the offset that fixes it, and it has to
   sit on the scroll targets rather than on html. */
section[id],article[id]{scroll-margin-top:96px}

/* Skip link: visible only when focused, which is the one moment it is useful. */
.skip{position:fixed;top:8px;left:8px;z-index:300;transform:translateY(-200%);
  background:var(--gold);color:#141414;padding:12px 18px;
  font:600 11px/1 var(--fs);letter-spacing:.16em;text-transform:uppercase;
  transition:transform .18s}
.skip:focus{transform:translateY(0)}
body{
  font-family:var(--fs);
  font-size:16px;line-height:1.62;color:var(--text);background:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* clip, not hidden: `hidden` on either axis makes body a SCROLL
     CONTAINER, and Chrome's loading="lazy" measures against the
     document viewport — so no image below the fold is ever seen to
     enter view. It cost /news every one of its photographs
     (2026-08-27). `clip` stops the same overflow and creates no
     scroller. */
  overflow-x:clip;
  /* Inter's defaults leave the figures proportional and the contextual
     alternates on; areas and dates want to line up, and "ffi" ligatures in a UI
     face are noise */
  font-variant-numeric:tabular-nums;
  font-feature-settings:"cv05" 1,"ss01" 1;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--gold);color:#111}
/* the UA focus ring is a thin dark outline, which is invisible against this
   ground — a keyboard user could not tell where they were on the page */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px}
.sec.on-paper :focus-visible{outline-color:var(--gold-2)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}

/* ---------- light sections ----------
   Applied to the sections that carry sustained reading: the path, what I do,
   and the credentials ledger. Everything inside flips to the light palette so
   individual rules do not each need a light variant. */
.sec.on-paper{background:var(--paper);color:var(--text-l)}
.sec.on-paper h1,.sec.on-paper h2,.sec.on-paper h3{color:#0D0D0D}
.sec.on-paper .lede{color:var(--muted-l)}
.sec.on-paper .eyebrow,.sec.on-paper .sec-n{color:var(--gold-2)}
.sec.on-paper .sec-link{color:var(--text-l);border-color:var(--gold-2)}

/* ---------- type ---------- */
.eyebrow{font:500 11.5px/1 var(--fm);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:var(--fd);font-weight:700;font-stretch:112%;text-transform:uppercase;letter-spacing:-.012em;color:var(--text);line-height:1;
  /* Bodoni Moda is narrower and lighter than the Georgia it replaces, so it needs
     less negative tracking and a little more leading than the old stack did —
     -.02em on a Didone closes the counters up. */
  letter-spacing:-.008em;
  font-optical-sizing:auto;
  /* stops a heading ending on one lonely word, which at this size is very visible */
  text-wrap:balance}
p,li{text-wrap:pretty}
/* 38px rather than 42px at the bottom: on a 360px phone the old floor let the
   headline fill the screen before the reader had any context */
h1{font-size:clamp(38px,6.8vw,96px)}
h2{font-size:clamp(31px,4.3vw,58px);line-height:1.06}
h3{font-size:clamp(18px,2vw,25px);letter-spacing:-.014em;line-height:1.18}
.lede{font-size:clamp(16.5px,1.5vw,19px);line-height:1.62;color:var(--muted)}
.muted{color:var(--muted)}
.sec-head{display:flex;align-items:flex-end;gap:22px;margin-bottom:clamp(32px,4.2vw,56px);flex-wrap:wrap}
.sec-head h2{max-width:22ch}
.sec-n{font:500 11.5px/1 var(--fm);letter-spacing:.28em;color:var(--gold);align-self:flex-start;
  padding-top:6px}
.sec-link{margin-left:auto;font:600 11.5px/1 var(--fs);letter-spacing:.17em;text-transform:uppercase;
  border-bottom:1px solid var(--gold);padding-bottom:5px;white-space:nowrap}

/* ---------- nav ----------
   Transparent over the hero, then a solid dark bar once the page scrolls.
   site.js adds .stuck; without JS it simply stays transparent, which still
   reads because the hero is dark behind it. */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding-block:20px;transition:background .3s,border-color .3s}
.nav.stuck{background:rgba(10,10,11,.92);backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line-d)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;
  font-family:var(--fd);font-size:18px;letter-spacing:.07em;color:#fff;line-height:1.1}
.brand img{width:29px;height:29px}
.brand small{display:block;font:500 10.5px/1 var(--fm);letter-spacing:.26em;
  color:rgba(255,255,255,.52);margin-top:5px}
.nav-links{display:flex;gap:26px;margin-left:auto;
  font:500 11px/1 var(--fs);letter-spacing:.16em;text-transform:uppercase}
.nav-links a{color:rgba(255,255,255,.76);padding-bottom:4px;border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s}
.nav-links a:hover,.nav-links a.on{color:#fff;border-color:var(--gold)}
/* ============================================================
   Header language control
   A globe that opens the four languages, each named in its own script beside
   its own flag. Built on <details>/<summary> so it works with no JavaScript:
   the control that gets a reader out of the wrong language must be the last
   thing on the page to stop working.
   ============================================================ */
.flag-sprite{position:absolute;width:0;height:0;overflow:hidden}

.langs-nav{position:relative;flex:0 0 auto}
.langs-nav summary{display:flex;align-items:center;gap:6px;cursor:pointer;
  list-style:none;padding:7px 8px;color:rgba(255,255,255,.72);
  border:1px solid transparent;transition:color .16s,border-color .16s}
.langs-nav summary::-webkit-details-marker{display:none}
.langs-nav summary:hover{color:#fff;border-color:var(--line-d2)}
.langs-nav summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.langs-nav[open] summary{color:var(--gold);border-color:var(--line-d2)}
.lang-globe{width:17px;height:17px;flex:0 0 auto}
.lang-now{font:500 11px/1 var(--fm);letter-spacing:.12em}

.lang-list{position:absolute;top:calc(100% + 8px);right:0;z-index:80;
  min-width:186px;padding:7px;background:var(--ink-2);
  border:1px solid var(--line-d2);box-shadow:0 22px 44px -20px rgba(0,0,0,.8)}
.lang-row{display:flex;align-items:center;gap:11px;padding:9px 10px;
  font:400 13.5px/1.3 var(--fs);color:rgba(255,255,255,.78);font-weight:400}
.lang-row:hover{background:var(--ink-3);color:#fff}
.lang-row:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.lang-row[aria-current]{color:var(--gold);background:rgba(197,162,104,.09)}
/* a 3:2 chip with a hairline, so a white flag still reads on a dark panel */
.flag{width:23px;height:15.3px;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.lang-name{flex:1 1 auto}
.lang-code{font:500 10.5px/1 var(--fm);letter-spacing:.12em;color:var(--muted-d)}
.lang-row[aria-current] .lang-code{color:var(--gold-2)}
.nav-cta{flex:0 0 auto;white-space:nowrap;font:600 11px/1 var(--fs);letter-spacing:.16em;
  text-transform:uppercase;border:1px solid rgba(255,255,255,.32);padding:12px 20px;color:#fff;
  transition:background .18s,color .18s,border-color .18s}
.nav-cta:hover{background:var(--gold);border-color:var(--gold);color:#141414}
.burger{display:none;flex-direction:column;gap:5px;margin-left:auto;padding:6px}
.burger span{width:22px;height:1.5px;background:#fff;transition:transform .22s,opacity .22s}
.mob-menu{display:none}

/* ---------- hero ----------
   The render is the page. Two scrims: a bottom ramp under the headline and a
   left ramp so the type never lands on a bright patch of sky. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--ink-2);padding-block:clamp(120px,14vh,180px) clamp(44px,6vw,86px)}
.hero-portrait{position:absolute;inset:0;margin:0}
.hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(7,7,8,.95) 0%,rgba(7,7,8,.6) 34%,
    rgba(7,7,8,.2) 62%,rgba(7,7,8,.58) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,rgba(7,7,8,.72),transparent 58%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{color:#fff;max-width:17ch;margin-top:22px}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero .lede{color:#CDC9C2;max-width:46ch;margin-top:24px}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,64px);align-items:end}
.hero-facts{border-left:1px solid rgba(255,255,255,.2);padding-left:24px;padding-bottom:4px}
.hero-facts > div + div{margin-top:18px}
.hf-k{font:500 11px/1 var(--fm);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.hf-v{font-size:14px;color:#C8C4BD;margin-top:8px;line-height:1.5}
/* image credit, bottom right — out of the way of the headline */
.hero-portrait .cap{position:absolute;right:var(--pad);bottom:14px;z-index:3;
  font:500 10.5px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}

/* ---------- quote strip ---------- */
.quote{background:var(--ink-2);border-block:1px solid var(--line-d)}
.quote .wrap{padding-block:clamp(48px,6vw,80px);display:grid;grid-template-columns:auto 1fr;gap:30px}
/* hanging punctuation: the quote mark sits outside the text block so the first
   line of the quotation still starts on the measure, which is how it is set in
   print */
/* Bodoni Moda draws a much smaller quotation glyph than Georgia did, so at 76px
   it read as a speck rather than a mark. */
.quote .mark{font-family:var(--fd);font-size:132px;line-height:.52;color:var(--gold);
  margin-right:-.06em;text-indent:-.04em;opacity:.9}
.quote p{font-family:var(--fd);font-size:clamp(21px,2.8vw,36px);line-height:1.26;
  letter-spacing:-.02em;color:#F2F0EC;max-width:36ch}
.quote cite{display:block;margin-top:22px;font-style:normal;font-size:12.5px;color:var(--muted-d);
  font-family:var(--fm);letter-spacing:.1em;text-transform:uppercase}

/* ---------- pillars ---------- */
.pillars{background:var(--ink);border-bottom:1px solid var(--line-d)}
/* The gap colour used to come from a background on .wrap, which also painted the
   wrap's own horizontal padding and left a pale band down each side of the page.
   Borders on the cells draw the same hairlines without leaking outside the grid. */
.pillars .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.pillar{background:var(--ink);padding:clamp(30px,3.6vw,44px) clamp(20px,2.2vw,32px)
  clamp(30px,3.6vw,44px) 0}
.pillar + .pillar{border-left:1px solid var(--line-d)}
.pillar:not(:first-child){padding-left:clamp(20px,2.2vw,32px)}
.pillar b{display:block;font-family:var(--fd);font-size:clamp(19px,2vw,24px);font-weight:400;
  letter-spacing:-.01em;color:#fff;margin-bottom:14px}
.pillar p{font-size:14px;line-height:1.62;color:var(--muted)}

/* ---------- story (light) ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,76px)}
.story-grid p{margin-bottom:17px;font-size:15.5px;line-height:1.72;color:#33322F}
.story-grid p:last-child{margin-bottom:0}
.timeline{border-top:1px solid var(--line)}
.tl-row{display:grid;grid-template-columns:88px 1fr;gap:20px;padding:16px 0;
  border-bottom:1px solid var(--line)}
.tl-y{font:500 11px/1.5 var(--fm);letter-spacing:.08em;color:var(--gold-2)}
.tl-t{font-size:14.5px;line-height:1.5}
.tl-t b{display:block;font-family:var(--fd);font-size:17px;font-weight:400;color:#111;
  letter-spacing:-.01em;margin-bottom:3px}
.tl-t span{color:var(--muted-l);font-size:13.5px}

/* archive strip: the three sources have different native ratios, so the frame
   sets the ratio and object-fit absorbs the difference */
.arch{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(36px,4.4vw,58px)}
.arch figure{margin:0}
.arch img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  filter:saturate(.84) contrast(1.04);border:1px solid var(--line)}
.arch figcaption{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--muted-l)}
.arch-note{margin-top:18px;font:500 11px/1 var(--fm);letter-spacing:.2em;
  text-transform:uppercase;color:#8E8A83}

/* ---------- capability (light) ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
/* scoped to .caps on purpose: the hero image credit is also .cap, and an
   unscoped rule painted a white block over the hero */
.caps .cap{background:var(--paper-2);padding:clamp(26px,3vw,36px) 28px;min-height:186px;
  transition:background .18s}
.caps .cap:hover{background:var(--gold-s)}
.caps .cap .n{font:500 11px/1 var(--fm);color:var(--gold-2);letter-spacing:.22em}
.caps .cap h3{margin:16px 0 10px;color:#111}
.caps .cap p{font-size:13.5px;line-height:1.6;color:var(--muted-l)}

/* ---------- work ----------
   One cinematic feature across the top, then eight tiles in four columns —
   twelve tracks make both spans exact, so no row is left with a hole.

   The caption is overlaid on the feature only. On a 275px tile the same block
   of text runs 176–245px tall against a 227px image: it swallowed the render
   entirely and, on the two longest titles, overflowed above the top edge. So
   below the feature the caption sits under the image in its own panel. */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.5vw,20px)}
.work-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink-3);border:1px solid var(--line-d);grid-column:span 3;
  transition:border-color .2s}
.work-card:hover{border-color:var(--line-d2)}
.work-card:first-child{grid-column:span 12;border:0}
.work-card .shot{position:relative;overflow:hidden;aspect-ratio:4/3;flex:0 0 auto}
.work-card:first-child .shot{aspect-ratio:16/8.2;flex:1 1 auto}
.work-card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.work-card:hover .shot img{transform:scale(1.04)}
/* the scrim exists to make overlaid type legible, so it belongs only where type
   is overlaid */
.work-card:first-child .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,6,7,.96) 0%,rgba(6,6,7,.86) 22%,
    rgba(6,6,7,.5) 48%,rgba(6,6,7,.08) 74%,transparent 100%)}
.work-card .meta{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1 1 auto}
.work-card:first-child .meta{position:absolute;inset:auto 0 0;z-index:2;
  padding:clamp(20px,2.2vw,30px);max-width:52ch}
.work-card h3{color:#fff}
.work-card:first-child h3{font-size:clamp(24px,2.8vw,38px)}
.work-card .sub{font-size:12.5px;color:#ABA7A0;margin-top:8px;line-height:1.5}
.work-card:first-child .sub{font-size:14px;color:#C4C0B9;margin-top:11px}
.badge{display:flex;align-items:baseline;gap:7px;margin-top:auto;padding-top:13px;
  font:500 10.5px/1.45 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:#8E8A83}
.work-card:first-child .badge{margin-top:15px;font-size:11px;color:#B8B4AD}
.badge i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block;
  flex:0 0 auto;transform:translateY(-2px)}
.badge.built{color:#6FBE96}
.badge.design{color:var(--gold)}
.work-note{margin-top:26px;font-size:13px;color:var(--muted-d);max-width:78ch;line-height:1.65}

/* ---------- artifex band ---------- */
.artifex{background:var(--ink-2);position:relative;overflow:hidden;
  border-block:1px solid var(--line-d)}
.artifex::before{content:"";position:absolute;right:-160px;top:-160px;width:600px;height:600px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 34%,rgba(197,162,104,.16),transparent 66%)}
.artifex .wrap{position:relative}
.ax-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,68px);align-items:start}
.artifex h2{color:#fff}
.artifex .lede{color:var(--muted);margin-top:20px;max-width:48ch}
.ax-logo{display:flex;align-items:center;gap:15px;margin-bottom:22px}
.ax-logo img{width:42px;height:42px}
.ax-logo span{font-family:var(--fd);font-size:20px;letter-spacing:.16em;color:#fff}
.ax-cta{display:inline-flex;align-items:center;gap:11px;margin-top:28px;background:var(--gold);
  color:#141414;padding:16px 26px;font:600 11px/1 var(--fs);letter-spacing:.16em;
  text-transform:uppercase;transition:background .18s}
.ax-cta:hover{background:var(--gold-3)}
.ax-cta svg{width:15px;height:15px}
.ax-stats{border-left:1px solid var(--line-d2);padding-left:30px}
.ax-stat + .ax-stat{margin-top:24px;padding-top:24px;border-top:1px solid var(--line-d2)}
.ax-stat .v{font-family:var(--fd);font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;
  color:var(--gold);line-height:1.1}
.ax-stat .l{font-size:12.5px;color:var(--muted-d);margin-top:8px;line-height:1.5}
.ax-shots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(36px,4.5vw,56px)}
.ax-shots figure{margin:0}
.ax-shots img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  border:1px solid var(--line-d);filter:saturate(.9)}
.ax-shots figcaption{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--muted-d)}
.ax-live{margin-top:clamp(36px,4.5vw,56px);border:1px solid var(--line-d);
  background:rgba(255,255,255,.02)}
.ax-live-h{display:flex;align-items:center;gap:10px;padding:14px 22px;
  border-bottom:1px solid var(--line-d);
  font:500 11px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d)}
.ax-live-h .dot{width:7px;height:7px;border-radius:50%;background:#4FA97C;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(79,169,124,.18)}
.ax-live-h .upd{margin-left:auto;color:var(--muted-d);letter-spacing:.14em}
.ax-live-body{display:grid;grid-template-columns:repeat(3,1fr)}
.ax-item{padding:22px;border-right:1px solid var(--line-d)}
.ax-item:last-child{border-right:0}
.ax-item .p{font:500 11px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.ax-item .t{font-size:14.5px;color:#E8E5E0;margin-top:10px;line-height:1.45}
.ax-item .s{font-size:12.5px;color:var(--muted-d);margin-top:8px}

/* ---------- journal ---------- */
.jrnl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.jrnl article{border-left:1px solid var(--gold);padding-left:22px}
.jrnl .d{font:500 11px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.jrnl h3{margin-top:14px;color:#fff}
.jrnl p{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.58}
.jrnl .jr-more{display:inline-block;margin-top:13px;font:600 11px/1 var(--fs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid rgba(197,162,104,.4);padding-bottom:4px}
.jrnl .jr-more:hover{border-color:var(--gold)}

/* ---------- credentials (light) ---------- */
.creds{border-top:1px solid var(--line)}
.cred{display:grid;grid-template-columns:minmax(9ch,auto) 1fr;gap:clamp(16px,3vw,48px);
  align-items:baseline;padding:clamp(19px,2.1vw,28px) 0;border-bottom:1px solid var(--line)}
.cred .v{font-family:var(--fd);font-size:clamp(21px,2.3vw,30px);letter-spacing:-.02em;color:#111}
.cred .l{font-size:14px;color:var(--muted-l);min-width:0;line-height:1.55}

/* ---------- contact ---------- */
.contact{background:var(--ink);border-top:1px solid var(--line-d)}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);
  padding-block:var(--sec)}
.contact h2{color:#fff;max-width:14ch}
.contact .lede{color:var(--muted);margin-top:22px;max-width:42ch}
.c-meta{margin-top:34px;font-size:14px;color:var(--muted-d);line-height:1.95}
.c-meta a{color:var(--gold);border-bottom:1px solid rgba(197,162,104,.32)}
.form label{display:block;font:500 11px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-d);margin-bottom:10px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form .fld{margin-bottom:24px}
.form input,.form select,.form textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-d2);color:#E9E7E3;
  font-family:var(--fs);font-size:15px;padding:0 0 12px;outline:none;transition:border-color .18s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold)}
.form select{color:#E9E7E3}
.form select option{background:var(--ink);color:#E9E7E3}
.form textarea{resize:vertical;min-height:74px;line-height:1.5}
.form input::placeholder,.form textarea::placeholder{color:var(--muted-d)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--gold);
  color:#141414;padding:17px 30px;font:600 11px/1 var(--fs);letter-spacing:.16em;
  text-transform:uppercase;margin-top:6px;transition:background .18s}
.btn:hover{background:var(--gold-3)}
.btn[disabled]{opacity:.55;cursor:default}
.form-note{margin-top:20px;font-size:11.5px;color:var(--muted-d);line-height:1.6}
.form-msg{margin-top:16px;font-size:13.5px;display:none}
.form-msg.ok{display:block;color:#6FBE96}
.form-msg.err{display:block;color:#D98A73}

/* ---------- footer ---------- */
.foot{background:var(--ink);border-top:1px solid var(--line-d);color:var(--muted-d)}
.foot .wrap{padding-block:30px;display:flex;gap:24px;flex-wrap:wrap;align-items:center;
  font:500 11px/1.7 var(--fm);letter-spacing:.16em;text-transform:uppercase}
.foot .r{margin-left:auto;display:flex;gap:22px}
/* language switch — in the footer because a reader who landed on the wrong
   language needs it, and the header has no room left. The current language is
   a <b> rather than a dead link, so it reads as "you are here" to a screen
   reader too, not just visually. */
.langs{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.langs a{color:var(--muted-d)}
.langs a:hover{color:var(--gold)}
.langs b{font-weight:500;color:#E0DDD8}
.langs .sep{color:var(--line-d2);user-select:none}

/* ============================================================
   Project showcase — the timed stage above the index
   One project at a time, full bleed, with the rest of the portfolio as a strip
   that advances on a timer. Every movement is a transition on a class or a
   custom property; there is no animation library on this site.
   ============================================================ */
.sh{position:relative;background:var(--ink);overflow:hidden;
  border-bottom:1px solid var(--line-d);
  /* the stage is tall enough to read a headline over, and never taller than
     the viewport minus the header */
  min-height:min(88vh,760px);display:flex;flex-direction:column;
  padding-top:clamp(96px,12vh,150px)}

/* --- the image layers ------------------------------------------------ */
.sh-stage{position:absolute;inset:0;z-index:0}
.sh-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 7s linear;
  will-change:opacity,transform}
.sh-frame.on{opacity:1;transform:scale(1)}
/* the slow scale is the only thing that keeps a still image from looking
   frozen for six seconds; it resets when the frame leaves */
.sh-veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,11,.93) 0%,rgba(10,10,11,.74) 38%,
    rgba(10,10,11,.2) 68%,rgba(10,10,11,.55) 100%),
    linear-gradient(0deg,rgba(10,10,11,.8) 0%,transparent 42%)}

.sh-body{position:relative;z-index:2;flex:1 1 auto;display:flex;
  align-items:flex-end;padding-bottom:clamp(26px,4vw,52px)}
.sh-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(24px,4vw,64px);align-items:end;width:100%}

/* --- the text, staggered ---------------------------------------------- */
.sh-text{max-width:34ch}
.sh-loc,.sh-title,.sh-line,.sh-status,.sh-cta{
  transition:opacity .5s ease,transform .55s var(--ease)}
/* the class is set for one frame while the next project's words are written in,
   so each line leaves and returns from below in sequence */
.sh.turning .sh-loc{opacity:0;transform:translateY(14px);transition-delay:0s}
.sh.turning .sh-title{opacity:0;transform:translateY(22px);transition-delay:.03s}
.sh.turning .sh-line{opacity:0;transform:translateY(18px);transition-delay:.06s}
.sh.turning .sh-status{opacity:0;transform:translateY(14px);transition-delay:.09s}
.sh.turning .sh-cta{opacity:0;transform:translateY(12px);transition-delay:.12s}
.sh-loc{font:500 11px/1.6 var(--fm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.sh-title{font-family:var(--fd);font-size:clamp(30px,5.2vw,62px);line-height:1.05;
  letter-spacing:-.025em;color:#fff}
.sh-line{margin-top:16px;font-size:15px;line-height:1.7;color:#C9C5BE;
  max-width:44ch}
.sh-status{display:inline-block;margin-top:18px;font:500 10.5px/1 var(--fm);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(197,162,104,.4);padding:7px 11px}
.sh-cta{margin-top:clamp(20px,2.6vw,30px)}

/* --- the deck ---------------------------------------------------------- */
.sh-deck{display:flex;gap:12px;list-style:none;margin:0;padding:0 0 4px;
  max-width:min(52vw,620px);overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--line-d2) transparent}
.sh-card{flex:0 0 auto;width:clamp(118px,13vw,164px)}
.sh-card button{display:block;width:100%;text-align:left;padding:0;
  border:1px solid rgba(255,255,255,.16);background:rgba(10,10,11,.42);
  transition:transform .45s var(--ease),border-color .3s,
    box-shadow .45s;transform:translateY(0) scale(.94);opacity:.72}
.sh-card button:hover{opacity:1;transform:translateY(-4px) scale(.97)}
.sh-card button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* the active card is the one the stage is showing: bigger, brighter, lifted */
.sh-card.on button{transform:translateY(-10px) scale(1);opacity:1;
  border-color:var(--gold);box-shadow:0 18px 34px -18px rgba(0,0,0,.85)}
.sh-card img{width:100%;height:clamp(74px,8.4vw,104px);object-fit:cover;
  display:block}
.sh-card-loc{display:block;padding:9px 10px 0;font:500 10.5px/1.4 var(--fm);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-card.on .sh-card-loc{color:var(--gold)}
.sh-card-name{display:block;padding:3px 10px 11px;font-size:11.5px;
  line-height:1.35;color:#E0DDD8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

/* --- the footer: controls, the bar, the count -------------------------- */
.sh-foot{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.12);
  background:rgba(10,10,11,.5);backdrop-filter:blur(3px)}
.sh-foot-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);
  padding-block:13px}
.sh-controls{display:flex;gap:6px;flex:0 0 auto}
.sh-controls button{width:36px;height:36px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);color:#fff;font-size:17px;line-height:1;
  transition:background .2s,border-color .2s}
.sh-controls button:hover{background:var(--gold);border-color:var(--gold);
  color:#141414}
.sh-controls button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sh-pause{font-size:11px!important;letter-spacing:1px}
.sh-bar{flex:1 1 auto;height:2px;background:rgba(255,255,255,.16);
  position:relative;overflow:hidden}
/* The width is set inline by the script from 0 to 100% over the dwell, so a
   pause is the transition being cancelled at its current width. No `.run`
   class: an inline width would have beaten it anyway. */
.sh-bar-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--gold)}
.sh-count{flex:0 0 auto;font:500 11px/1 var(--fm);letter-spacing:.18em;
  color:var(--muted-d);font-variant-numeric:tabular-nums}
.sh-count b{color:#fff;font-weight:500}

@media(max-width:900px){
  .sh{min-height:auto;padding-top:clamp(88px,11vh,120px)}
  .sh-grid{grid-template-columns:1fr;gap:22px}
  .sh-text{max-width:none}
  .sh-deck{max-width:none;margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad)}
  .sh-veil{background:linear-gradient(0deg,rgba(10,10,11,.94) 0%,
    rgba(10,10,11,.6) 46%,rgba(10,10,11,.35) 100%)}
}

/* A reader who has asked for less motion gets the stage as a still: the timer
   never starts, the slow scale is off, and the arrows still work. */
@media(prefers-reduced-motion:reduce){
  .sh-frame{transition:opacity .2s ease;transform:none!important}
  .sh-loc,.sh-title,.sh-line,.sh-status,.sh-cta,.sh-card button{
    transition:none!important;transform:none!important}
  .sh-bar-fill{transition:none!important}
}

/* ============================================================
   Capability depth (ideas 31-34, 38)
   The pages were 229-264 words: an argument with nothing to act on.
   ============================================================ */
.readtime{color:var(--muted-d)}

/* №43/45/36 — what the status words mean, which country a project is in, and
   the route from a project back to the service that produced it. */
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);
  margin:0 0 clamp(30px,4vw,46px);padding:22px 0;
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.legend dt{font:500 11px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.legend dd{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.iso{display:inline-block;margin-right:8px;padding:2px 5px;
  font:500 10.5px/1 var(--fm);letter-spacing:.1em;color:var(--gold-2);
  border:1px solid rgba(197,162,104,.3);vertical-align:1px}
.prj-cap{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line-d);
  font:500 11px/1.5 var(--fm);letter-spacing:.14em;text-transform:uppercase}
.prj-cap a{color:var(--muted-d)}
.prj-cap a:hover{color:var(--gold)}
@media(max-width:820px){.legend{grid-template-columns:1fr;gap:18px}}
.cap-depth{border-top:1px solid var(--line-d)}
.cap-depth .k{font:500 11px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:15px}

/* the worked example carries the page, so it gets the widest measure and the
   largest type outside the hero */
.worked{max-width:74ch;margin-bottom:clamp(40px,5vw,68px)}
.worked h2{font-size:clamp(21px,2.4vw,30px);color:#fff;letter-spacing:-.02em;
  max-width:30ch}
.worked p{margin-top:15px;font-size:16px;line-height:1.78;color:#C9C5BE}

.depth-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(26px,4vw,58px);
  padding-block:clamp(30px,4vw,46px);border-top:1px solid var(--line-d);
  border-bottom:1px solid var(--line-d)}
.deliv ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.deliv li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.65;
  color:var(--muted)}
.deliv li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;
  background:var(--gold)}
.stagebox .stage{font-size:14px;line-height:1.7;color:var(--muted)}

/* Answers collapsed by default: six open questions would bury the deliverables
   above them, and a reader scanning for one answer should not have to read the
   other five. The text is in the markup either way, so it is indexable and the
   FAQPage schema is not describing something a crawler cannot see. */
.faq{margin-top:clamp(34px,4.5vw,56px);max-width:82ch}
.faq-q{border-bottom:1px solid var(--line-d)}
.faq-q summary{cursor:pointer;list-style:none;padding:15px 34px 15px 0;
  position:relative;font-size:15.5px;line-height:1.5;color:#E0DDD8}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+";position:absolute;right:6px;top:13px;
  font:400 19px/1 var(--fs);color:var(--gold)}
.faq-q[open] summary::after{content:"\2212"}
.faq-q summary:hover{color:#fff}
.faq-q summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.faq-q p{padding:0 34px 18px 0;margin:0;font-size:14.5px;line-height:1.72;
  color:var(--muted);max-width:70ch}
@media(max-width:820px){.depth-grid{grid-template-columns:1fr}}

/* №29 — the closing offer on every page. The reader decides on the capability
   page, so the way to act has to be there and not one navigation away. */
.page-cta{background:var(--ink-2);border-top:1px solid var(--line-d);
  padding-block:clamp(44px,6vw,74px)}
.page-cta .wrap{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,60px);
  align-items:center}
.page-cta h2{font-size:clamp(23px,2.6vw,33px);color:#fff;letter-spacing:-.02em;
  max-width:20ch}
.page-cta p{margin-top:13px;font-size:14.5px;line-height:1.7;color:var(--muted);
  max-width:52ch}
.pc-acts{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.pc-direct{display:flex;flex-direction:column;gap:5px;margin-top:6px;
  font:500 11px/1.7 var(--fm);letter-spacing:.06em}
.pc-direct a{color:var(--muted-d)}
.pc-direct a:hover{color:var(--gold)}
@media(max-width:820px){
  .page-cta .wrap{grid-template-columns:1fr}
  .pc-acts{flex-direction:row;flex-wrap:wrap;align-items:center}
  .pc-direct{flex-basis:100%;flex-direction:row;flex-wrap:wrap;gap:14px}
}
.foot a:hover{color:var(--gold)}

/* ---------- capability pages ----------
   Six generated pages share this chrome. The nav is fixed, so the hero carries
   the clearance rather than each page repeating it. */
.cap-hero{background:var(--ink-2);border-bottom:1px solid var(--line-d);
  padding-block:clamp(126px,15vh,186px) clamp(44px,6vw,76px)}
.cap-hero h1{color:#fff;max-width:20ch;margin-top:18px;font-size:clamp(34px,5.4vw,70px)}
.cap-hero .lede{color:var(--muted);max-width:52ch;margin-top:22px}
.back{display:inline-block;margin-bottom:26px;font:600 11.5px/1 var(--fs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line-d2);padding-bottom:5px}
.back:hover{color:var(--gold);border-color:var(--gold)}
.cap-grid{display:grid;grid-template-columns:1.5fr .5fr;gap:clamp(30px,5vw,72px);
  align-items:start}
.cap-text p{font-size:16px;line-height:1.72;color:#DCD9D4;margin-bottom:20px;max-width:62ch}
.cap-text p:last-child{margin-bottom:0}
.cap-side{border-left:1px solid var(--line-d);padding-left:26px}
.cap-side .k{font:500 11px/1.5 var(--fm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px}
.cap-side a{display:block;font-size:14px;color:#E2DFDA;padding:9px 0;
  border-bottom:1px solid var(--line-d)}
.cap-side a:hover{color:var(--gold)}
.cap-next{border-top:1px solid var(--line-d);background:var(--ink-2)}
.cap-next .wrap{display:flex;gap:20px;flex-wrap:wrap;padding-block:30px}
.cap-next a{flex:1 1 260px;font-family:var(--fd);font-size:clamp(18px,2vw,24px);
  color:#fff;letter-spacing:-.01em;line-height:1.2}
.cap-next a span{display:block;font:500 11px/1 var(--fm);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px;font-family:var(--fm)}
.cap-next .next{text-align:right}
.cap-next a:hover{color:var(--gold-3)}

/* the capability cards on the home page are links now, so they need the cue */
.caps a.cap{display:block;text-decoration:none}
.caps a.cap .go{display:inline-block;margin-top:14px;font:600 11px/1 var(--fm);
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);
  border-bottom:1px solid rgba(140,106,47,.35);padding-bottom:4px}
.caps a.cap:hover .go{border-color:var(--gold-2)}

/* ---------- portrait inside The path ----------
   Floated so the text wraps around it: a portrait in its own full-width row
   would push the timeline out of alignment with the prose beside it. */
.portrait{margin:0 26px 18px 0;float:left;width:min(268px,44%)}
.portrait img{width:100%;height:auto;border:1px solid var(--line)}
.portrait figcaption{margin-top:9px;font:500 11px/1.5 var(--fm);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-2)}
.portrait figcaption span{display:block;color:var(--muted-l);letter-spacing:.12em;margin-top:3px}

/* ---------- team ---------- */
.team-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d);
  border:1px solid var(--line-d);margin-top:clamp(24px,3vw,36px)}
.team-facts > div{background:var(--ink-2);padding:22px}
.team-facts .k{font:500 11px/1.5 var(--fm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold)}
.team-facts .v{font-size:14px;color:#E4E1DC;margin-top:10px;line-height:1.5}

/* the section heads that carry a lede need the number inline with the heading
   rather than as a separate flex child */
.sec-head .t{flex:1 1 auto;min-width:0}
.sec-head .t .sec-n{display:inline-block;margin-bottom:12px;padding-top:0}
.sec-head .t h2{margin:0}
.sec-head .t .lede{margin-top:16px;max-width:52ch}

/* ---------- journal ---------- */
.jrnl article a{display:inline-block;margin-top:13px;font:600 11px/1 var(--fs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid rgba(197,162,104,.4);padding-bottom:4px}
.jrnl article a:hover{border-color:var(--gold)}
.jrnl-note{margin-top:24px;font-size:13px;color:var(--muted-d);max-width:70ch;line-height:1.6}

/* ---------- galleries and the viewer ----------
   site.js turns any .shot frame into the opener and any .more strip into the
   picker. These rules only add the affordances — the cursor, the focus ring and
   the hover cue — so a page with JS disabled loses nothing but the interaction. */
/* the hover cue is absolutely positioned, so the frame has to be its containing
   block — work.html's .shot did not set this and the glow escaped to the page */
/* a gallery block: one large frame, a picker beneath it */
.gal{margin-top:clamp(30px,4vw,48px)}
.gal .shot{overflow:hidden;background:var(--ink-3);border:1px solid var(--line-d)}
.gal .shot img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.gal .more{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:thin;scrollbar-color:var(--line-d2) transparent}
.gal .more img{height:84px;width:auto;flex:0 0 auto;object-fit:cover;
  border:1px solid var(--line-d)}
.gal-note{margin-top:13px;font:500 11px/1.6 var(--fm);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-d)}

.gal-main{cursor:zoom-in;position:relative}
.gal-main::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(197,162,104,.16),transparent 55%);
  opacity:0;transition:opacity .25s}
.gal-main:hover::before,.gal-main:focus-visible::before{opacity:1}
.more img{cursor:pointer;opacity:.62;transition:opacity .2s,border-color .2s}
.more img:hover,.more img:focus-visible{opacity:1}
.more img[aria-current]{opacity:1;border-color:var(--gold)}

html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(6,6,7,.96);backdrop-filter:blur(6px);padding:clamp(16px,4vw,56px)}
.lb.on{display:grid}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  align-items:center;gap:16px}
.lb-fig img{max-width:100%;max-height:78vh;object-fit:contain;width:auto;height:auto}
.lb-fig figcaption{font-size:13.5px;color:var(--muted);text-align:center;max-width:70ch}
.lb-x,.lb-p,.lb-n{position:absolute;z-index:2;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);color:#fff;line-height:1;
  display:grid;place-items:center;transition:background .18s,border-color .18s}
.lb-x:hover,.lb-p:hover,.lb-n:hover{background:var(--gold);border-color:var(--gold);color:#141414}
.lb-x{top:18px;right:18px;width:44px;height:44px;font-size:26px}
.lb-p,.lb-n{top:50%;transform:translateY(-50%);width:48px;height:64px;font-size:30px}
.lb-p{left:14px} .lb-n{right:14px}
.lb.one .lb-p,.lb.one .lb-n,.lb.one .lb-num{display:none}
.lb-num{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font:500 11px/1 var(--fm);letter-spacing:.22em;color:var(--muted-d)}

/* ---------- assumption marker ----------
   Every unconfirmed value stays flagged in the markup so it can be found and
   corrected. But a visitor reading "MOUNTAIN SITE [LOCATION] · HOSPITALITY" sees
   an unfinished page, not a note to the author — so the flags are hidden by
   default and appear only in review mode, which site.js switches on for
   ?review=1 or #review. Nothing is deleted; it is simply not shown to clients. */
.asm{display:none}
body.review .asm{display:inline-block;font:500 10.5px/1 var(--fm);letter-spacing:.14em;
  background:rgba(197,162,104,.14);color:var(--gold-3);
  border:1px solid rgba(197,162,104,.34);padding:3px 6px;vertical-align:2px;
  margin-left:6px;text-transform:uppercase}
body.review .sec.on-paper .asm{background:rgba(140,106,47,.09);color:var(--gold-2);
  border-color:rgba(140,106,47,.28)}
/* a standing reminder that what is on screen is not what a client sees */
body.review::before{content:"REVIEW MODE — assumption flags visible";
  position:fixed;left:0;right:0;bottom:0;z-index:200;text-align:center;
  font:600 11px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;
  background:var(--gold);color:#141414;padding:9px 12px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-facts{border-left:0;border-top:1px solid rgba(255,255,255,.2);padding-left:0;padding-top:24px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .hero-facts > div + div{margin-top:0}
  .story-grid,.ax-head,.contact .wrap{grid-template-columns:1fr;gap:32px}
  .caps,.jrnl{grid-template-columns:repeat(2,1fr)}
  .work-card{grid-column:span 6}
  .work-card:first-child{grid-column:span 12}
  .ax-stats{border-left:0;border-top:1px solid var(--line-d2);padding-left:0;padding-top:24px}
  .ax-shots{grid-template-columns:1fr}
  .team-facts{grid-template-columns:1fr 1fr}
  .ax-live-body{grid-template-columns:1fr}
  .ax-item{border-right:0;border-bottom:1px solid var(--line-d)}
  .ax-item:last-child{border-bottom:0}
}
@media (max-width:720px){
  .nav-links,.nav-cta{display:none}
  /* Four language codes and the burger have to share the row with the
     wordmark. At 375px the header's 34px gap plus the full-size wordmark
     pushed both the codes and the burger past the right edge — the burger was
     off-screen, so the mobile menu could not be opened at all. The row is
     tightened and the wordmark's subtitle drops out, which is the least
     load-bearing thing in it. */
  .nav-in{gap:10px}
  .brand{min-width:0;font-size:14px;letter-spacing:.04em;gap:9px}
  .brand img{width:25px;height:25px}
  .brand small{display:none}
  .langs-nav{margin-left:auto}
  .langs-nav summary{padding:7px 4px;gap:4px}
  /* the globe alone is enough on a phone; the code beside it is what pushed
     the burger off the right edge */
  .lang-now{display:none}
  .burger{display:flex;margin-left:2px}
  .mob-menu{display:block;position:fixed;inset:64px 0 auto;background:var(--ink-2);
    border-bottom:1px solid var(--line-d);padding:14px var(--pad) 22px;z-index:59;
    transform:translateY(-130%);transition:transform .26s ease;
    box-shadow:0 18px 34px -22px rgba(0,0,0,.7)}
  .mob-menu.open{transform:translateY(0)}
  .mob-menu a{display:block;padding:14px 0;font-size:16px;border-bottom:1px solid var(--line-d);
    color:var(--text)}
  .mob-menu a:last-of-type{border-bottom:0}
  .mob-menu .btn{width:100%;margin-top:14px}
  .pillars .wrap{grid-template-columns:1fr}
  .pillar{padding:24px 0!important;border-bottom:1px solid var(--line-d)}
  .pillar:last-child{border-bottom:0}
  .caps,.jrnl{grid-template-columns:1fr}
  .work-card,.work-card:first-child{grid-column:span 12}
  .work-card:first-child .shot{aspect-ratio:4/3.1}
  .hero-facts{grid-template-columns:1fr;gap:15px}
  .form .row{grid-template-columns:1fr;gap:0}
  .quote .wrap{grid-template-columns:1fr;gap:10px}
  .quote .mark{font-size:52px}
  .sec-head{align-items:flex-start}
  .sec-link{margin-left:0;white-space:normal}
  .cred{grid-template-columns:1fr;gap:7px}
  .team-facts{grid-template-columns:1fr}
  /* the portrait stops floating: at this width the text column is too narrow to
     wrap around anything */
  .portrait{float:none;width:100%;margin:0 0 22px}
  .gal .more img{height:66px}
  /* three archive frames stay three: stacked they would push the whole
     story section off the fold on a phone */
  .arch{gap:8px}
  .arch img{aspect-ratio:3/4}
  .arch figcaption{font-size:11px}
}
/* ============================================================
   MOTION, PERFORMANCE, PRINT
   ============================================================ */

/* Sections settle into place as they arrive. site.js adds .in when a section
   enters the viewport; without JS the :not(.reveal) default state applies and
   everything is simply visible, so nothing can be stranded invisible. */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease-soft),transform .7s var(--ease-soft)}
.reveal.in{opacity:1;transform:none}

/* Below-fold sections are not laid out until they are needed. The contain-intrinsic
   size keeps the scrollbar honest while they are skipped. */
.sec,.artifex,.contact,.cap-body{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* reading progress: a gold hairline along the very top edge */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:var(--gold);pointer-events:none;transition:width .1s linear}

/* the site-wide footer nav: one slim row linking every page */
.foot-nav{display:flex;gap:9px 22px;flex-wrap:wrap;padding-block:0 26px;
  font:500 11px/1.7 var(--fm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-d);border-top:1px solid var(--line-d);padding-top:18px;
  margin-top:4px}
.foot-nav a:hover{color:var(--gold)}

/* per-project copy-link on the index: quiet until needed */
.copy-link{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;
  display:grid;place-items:center;font-size:14px;color:var(--muted-d);
  background:rgba(10,10,11,.55);border:1px solid var(--line-d2);
  backdrop-filter:blur(6px);transition:color .15s,border-color .15s}
.copy-link:hover{color:var(--gold);border-color:var(--gold)}
.copy-link.did{color:#6FBE96;border-color:#6FBE96}
.prj article{position:relative}
.idx-count{margin-top:18px;font:500 11.5px/1 var(--fm);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}

/* Windows High Contrast / forced colors: let the system palette through and
   keep the one thing it cannot infer — which element has focus */
@media (forced-colors:active){
  .hero::before,.hero::after,.work-card .shot::after,.artifex::before{display:none}
  .progress{background:Highlight}
  :focus-visible{outline:2px solid Highlight}
}

/* back to top: only worth showing once there is something to go back up from */
.totop{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:120;
  width:46px;height:46px;display:grid;place-items:center;
  background:rgba(10,10,11,.82);border:1px solid var(--line-d2);color:var(--text);
  backdrop-filter:blur(8px);opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .25s,transform .25s,background .18s,border-color .18s}
.totop.on{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--gold);border-color:var(--gold);color:#141414}

.work-card{transition:border-color .2s,transform .25s,box-shadow .25s}
.work-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(0,0,0,.75)}

/* smooth cross-page transition where the browser supports it; ignored elsewhere */
@view-transition{navigation:auto}

@media print{
  .nav,.mob-menu,.skip,.totop,.lb,.films,.more,.gal-note,.form,.sec-link,
  .nav-cta,.burger{display:none!important}
  html,body{background:#fff!important;color:#111!important}
  h1,h2,h3,.hf-v,.ax-item .t{color:#111!important}
  .lede,p,.sub,figcaption{color:#333!important}
  .hero{min-height:auto!important;padding-block:0 24px!important}
  .hero::before,.hero::after,.artifex::before{display:none!important}
  .hero-portrait{position:static!important;height:auto!important}
  .hero-portrait img{height:auto!important;max-height:9cm}
  .sec,.artifex,.contact{content-visibility:visible!important;
    padding-block:14px!important;border:0!important;background:#fff!important}
  .reveal{opacity:1!important;transform:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  section,article,figure{break-inside:avoid}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  /* the reveal must not leave content invisible when transitions are off */
  .reveal{opacity:1!important;transform:none!important}
}

/* the switcher shows the flag of the page you are reading */
.flag-now{width:22px;height:14.6px;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.langs-nav summary .lang-globe{display:none}

/* The header folds at 1120px here too (see engine.css): at 916px the
   service pages ran their links to 1023px. Only the header and its panel
   move; every other phone rule below stays at 720px. */
@media (min-width:721px) and (max-width:1120px){
  .nav-links,.nav-cta{display:none}
  .nav-in{gap:10px}
  .langs-nav{margin-left:auto}
  .burger{display:flex;margin-left:2px}
  .mob-menu{display:block;position:fixed;inset:64px 0 auto;background:var(--ink-2);
    border-bottom:1px solid var(--line-d);padding:14px var(--pad) 22px;z-index:59;
    transform:translateY(-130%);transition:transform .26s ease;
    box-shadow:0 18px 34px -22px rgba(0,0,0,.7)}
  .mob-menu.open{transform:translateY(0)}
  .mob-menu a{display:block;padding:14px 0;font-size:16px;border-bottom:1px solid var(--line-d);
    color:var(--text)}
  .mob-menu a:last-of-type{border-bottom:0}
  .mob-menu .btn{width:100%;margin-top:14px}
}

/* ---------- About us: the nav item, the page, the bubble ----------
   PAIRED WITH THE OTHER STYLESHEET. This site is served by two: engine.css
   for the main pages and site.css for the service and error pages. A rule in
   one is invisible on the other — the bubble was written into site.css only
   and came out on the home page as a 1489px strip lying at the bottom of the
   document, because position:fixed was in a file that page never loads
   (measured 2026-08-29). Anything below that changes must change in both. */
.nav-about{flex:0 0 auto;white-space:nowrap;font:600 11px/1 var(--fs);
  letter-spacing:.12em;text-transform:uppercase;padding:9px 9px;
  color:rgba(255,255,255,.66);transition:color .18s}
.nav-about:hover,.nav-about[aria-current="page"]{color:var(--gold)}

.facts-list{list-style:none;margin:18px 0 0;padding:0}
.facts-list li{padding:11px 0;border-bottom:1px solid var(--line);
  font-size:15px;line-height:1.6}
.facts-list li:last-child{border-bottom:0}
.facts-list b{color:var(--gold);font-weight:600}

.offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:26px;margin:20px 0 26px}
.offices h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px}
.offices p{font-size:14.5px;line-height:1.75}
.reg{font-size:12.5px;color:var(--muted-d);line-height:1.7;margin-bottom:14px}
.social{font-size:14px;line-height:2}
.social a{color:var(--gold-3)}
.social a:hover{color:var(--gold)}
.quote{font-style:italic;color:var(--muted-d);border-left:2px solid var(--gold);
  padding-left:18px;margin-top:16px;line-height:1.8}
.download-pane{border-top:1px solid var(--line);padding-top:34px}

/* ============================================ THE ABOUT PAGE'S PICTURES ===
   The page argued about buildings without showing any. These rules are in
   BOTH stylesheets, byte for byte, because the site is served by two and a
   rule in one is simply absent on everything the other serves — the same
   fault that left the portfolio bubble lying flat on the home page.

   A caption is a name and a place, nothing else. The grid is symmetric
   (auto-fit, equal columns), so it takes three cards or five without being
   told which; the lopsided two-column layouts elsewhere on this site are a
   different thing and stay that way. */
.ab-wrap{width:100%}   /* a grid item is sized to its content unless
                          told otherwise, and the hero IS a grid */
.ab-banner{margin:38px 0 0;border-radius:14px;overflow:hidden;
  border:1px solid var(--line)}
.ab-banner img{display:block;width:100%;
  height:clamp(230px,36vw,440px);object-fit:cover}
.ab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:22px;margin-top:38px}
.ab-grid figure{margin:0}
.ab-grid img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  border-radius:12px;border:1px solid var(--line)}
.ab-grid figcaption{margin-top:10px;font-size:12.5px;line-height:1.55;
  color:var(--muted-d)}
.ab-grid figcaption b{display:block;margin-bottom:2px;color:var(--gold);
  font-weight:600;font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.ab-portrait{margin:16px 0 0;max-width:290px}
.ab-portrait img{display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid var(--line)}
@media (max-width:700px){
  .ab-portrait{max-width:210px}
}

/* THE BUBBLE. Fixed, small, and out of the way of the thumb: bottom-left,
   because the right is where a phone's own back gesture and most chat
   widgets live. Drawn as an actual bubble now (client, 2026-09-01): a glass
   sphere with a shine spot, floating gently. The float animates `translate`
   so the hover scale on `transform` composes instead of fighting it. */
.pf-bubble{position:fixed;left:20px;bottom:20px;z-index:60;
  width:56px;height:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.18),
    rgba(14,14,17,.88) 58%);
  border:1px solid rgba(197,162,104,.55);color:var(--gold);
  box-shadow:0 10px 30px rgba(0,0,0,.38),
    inset 0 0 18px rgba(197,162,104,.14);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  animation:pf-float 3.6s ease-in-out infinite;
  transition:background .18s,border-color .18s,color .18s,transform .18s}
.pf-bubble::after{content:"";position:absolute;top:9px;left:13px;
  width:15px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.34);filter:blur(1px);
  transform:rotate(-24deg)}
.pf-bubble:hover{background:var(--gold);border-color:var(--gold);
  color:#141414;transform:scale(1.07)}
.pf-bubble svg{width:20px;height:20px;flex:none}
.pf-bubble-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
@keyframes pf-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media (max-width:720px){
  .pf-bubble{left:14px;bottom:14px;width:50px;height:50px}
}
@media (prefers-reduced-motion:reduce){
  .pf-bubble{animation:none;transition:none}
  .pf-bubble:hover{transform:none}
}

/* ============================================ TOP-100 POLISH (2026-09-24) ===
   Paired like everything below the marker above. The audit measured:
   form fields at 14.5px on phones (iOS zooms any field under 16px and the
   page then sits sideways); a keyboard ring on some controls and none on
   the rest; footer "direct" links 20px tall; a link inside a sentence told
   apart by colour alone; and main pages that printed as a black sheet.

   THE SCALE. One set of steps for type and one for motion, so a new
   component chooses a step instead of inventing a number. The easing that
   was written out seven times is now the token. */
:root{
  --t-2xs:11px;--t-xs:12.5px;--t-sm:14px;--t-base:15.5px;--t-md:17px;
  --t-lg:clamp(20px,2.2vw,26px);--t-xl:clamp(28px,4vw,44px);
  --t-2xl:clamp(38px,6.4vw,78px);
  --ease:cubic-bezier(.22,.8,.24,1);--ease-soft:cubic-bezier(.22,.61,.36,1);
  --d-1:.18s;--d-2:.32s;--d-3:.6s;--d-4:.9s;
  --tap:44px
}

/* the keyboard ring: every focusable thing, on dark and on paper */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.on-paper :focus-visible,.paper :focus-visible,.sec.on-paper :focus-visible{
  outline-color:var(--gold-2)}
:focus:not(:focus-visible){outline:none}

/* a link inside a sentence is underlined, not only coloured */
.close-note a,.lede a:not([class]),.sec p a:not([class]),.sheet p a:not([class]){
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}

/* a finger needs 44px; these were 20 */
.pc-direct a{display:inline-flex;align-items:center;min-height:var(--tap)}
@media (pointer:coarse){
  .foot a,.foot-links a,.lang-row,.nav-links a,.mob-menu a{
    min-height:var(--tap);display:inline-flex;align-items:center}
}

/* phones never zoom into a field */
@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
  select,textarea{font-size:16px}
}

/* PRINT. A reader who prints a project, the About page or the investors'
   page gets black type on white, the pictures, the figures and the
   address, and none of the chrome. */
@media print{
  @page{margin:14mm 12mm}
  .field,.nav,.mob-menu,.burger,.langs-nav,.skip,.totop,.progress,.lb,
  .lightbox,.pf-bubble,.more,.gal-note,.films,form,.form,.nav-cta,
  .lang-hint,video{display:none!important}
  html,body{background:#fff!important;color:#111!important}
  body *{color:#111!important;background-color:transparent!important;
    box-shadow:none!important;text-shadow:none!important;
    -webkit-text-fill-color:currentColor!important}
  [data-rise],.reveal{opacity:1!important;transform:none!important}
  .sheet,main{padding-top:0!important}
  img{max-width:100%!important;height:auto;break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  section,article,figure,.facts,.foot-grid{break-inside:avoid}
  a[href^="http"]:not([href*="artifexceo.com"])::after{
    content:" (" attr(href) ")";font-size:9pt}
}

/* the language hint (common.js): bottom centre, clear of the portfolio
   bubble on the left and the back-to-top button on the right */
.lang-hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:130;display:flex;align-items:center;gap:10px;
  width:max-content;max-width:min(440px,calc(100vw - 150px));
  padding:8px 8px 8px 16px;border-radius:12px;
  background:rgba(14,14,17,.95);border:1px solid rgba(197,162,104,.45);
  color:#EDEBE7;font:500 14px/1.45 var(--fs);
  box-shadow:0 14px 34px rgba(0,0,0,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lang-hint p{margin:0;flex:1 1 auto}
.lang-hint a{display:inline-flex;align-items:center;min-height:40px;
  padding:0 14px;border-radius:8px;background:var(--gold);color:#141414;
  font-weight:600;white-space:nowrap;text-decoration:none}
.lang-hint button{flex:none;width:40px;height:40px;border:0;border-radius:8px;
  background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer}
.lang-hint button:hover{background:rgba(255,255,255,.08)}
@media (max-width:720px){
  .lang-hint{left:76px;right:12px;bottom:14px;transform:none;width:auto;
    max-width:none;font-size:13.5px}
}

/* projects in this field, on each service page (ops/build_project_pages.py) */
.related-work .k{font:600 11px/1.5 var(--fm);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.rw-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.rw-list a{display:block;border:1px solid var(--line-d,rgba(255,255,255,.1));
  border-radius:10px;overflow:hidden;color:inherit;text-decoration:none;
  transition:border-color var(--d-1) var(--ease),transform var(--d-2) var(--ease)}
.rw-list a:hover{border-color:var(--gold);transform:translateY(-2px)}
.rw-list img{display:block;width:100%;aspect-ratio:16/10;height:auto;object-fit:cover}
.rw-list span{display:block;padding:11px 13px;font:600 14px/1.35 var(--fd)}

/* Between the fold (1120px) and a wide desktop the eight header links set a
   little narrower: at 1130px the Russian row ran to 1213px, the Uzbek to
   1196px (measured 2026-09-24). Archivo carries a width axis, so this is
   the same face, not a substitute. */
@media (max-width:1440px){
  .nav-links{gap:15px;letter-spacing:.1em;font-stretch:87.5%}
}

/* two "go" links stacked in a section head */
.sec-links{display:flex;flex-direction:column;gap:12px;align-items:flex-start}

/* the process page: six stages, each with what the client holds after it */
.proc-intro{max-width:66ch;font-size:var(--t-md);line-height:1.7;color:var(--muted);
  margin-bottom:clamp(30px,4vw,54px)}
.proc-steps{list-style:none;margin:0;padding:0;counter-reset:none;
  border-top:1px solid var(--line-d,rgba(255,255,255,.1))}
.proc-step{display:grid;grid-template-columns:clamp(64px,9vw,120px) 1fr;
  gap:clamp(16px,3vw,40px);padding:clamp(26px,3.4vw,44px) 0;
  border-bottom:1px solid var(--line-d,rgba(255,255,255,.1))}
.proc-no{font:600 var(--t-xl)/1 var(--fd);font-stretch:125%;color:var(--gold);
  font-variant-numeric:tabular-nums}
.proc-body h2{font-size:var(--t-lg);margin:0 0 10px}
.proc-body p{max-width:62ch;line-height:1.7;margin:0 0 18px}
.proc-body .k{font:600 11px/1.5 var(--fm);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.proc-body ul{margin:0 0 18px;padding-left:18px;line-height:1.8}
@media (max-width:600px){.proc-step{grid-template-columns:1fr;gap:8px}}

/* ONE ICON SET (top-100 #66). WhatsApp, Telegram and every download link
   carry the same 1.7px line glyph, drawn in the link's own colour through a
   mask, so no markup changes and the icon follows hover and theme. A link
   that already holds its own svg keeps it. The glyphs are data: URIs, which
   the CSP's img-src already allows. */
:root{
  --ico-wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.6 7.45L3.5 20.5l1.1-4.2A8.5 8.5 0 1 1 20.5 12z'/%3E%3Cpath d='M9.2 8.4c.3-.5.8-.5 1.1 0l.8 1.6c.1.3 0 .6-.2.8l-.5.5c.5 1.1 1.4 2 2.5 2.5l.5-.5c.2-.2.5-.3.8-.2l1.6.8c.5.3.5.8 0 1.1-.8.5-1.8.6-2.7.2a8 8 0 0 1-4-4c-.4-.9-.3-1.9.1-2.8z'/%3E%3C/svg%3E");
  --ico-tg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4.5 3 11.3l6 2.2 2.3 6 3.3-4 4.4 3.3z'/%3E%3Cpath d='m9 13.5 8.2-6.1'/%3E%3C/svg%3E");
  --ico-dl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11.5'/%3E%3Cpath d='m7 10.5 5 5 5-5'/%3E%3Cpath d='M4 20.5h16'/%3E%3C/svg%3E")
}
a[href^="https://wa.me/"]:not(:has(svg,img))::before,
a[href^="https://t.me/"]:not(:has(svg,img))::before,
a[download]:not(.pf-bubble):not(:has(svg,img))::before{
  content:"";display:inline-block;flex:none;width:1.1em;height:1.1em;
  margin-inline-end:.45em;vertical-align:-.18em;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
a[href^="https://wa.me/"]{--ico:var(--ico-wa)}
a[href^="https://t.me/"]{--ico:var(--ico-tg)}
a[download]{--ico:var(--ico-dl)}

/* the consent box on every public form (common.js holds the send until it
   is ticked, and names the box when it is not) */
.consent{display:flex;align-items:flex-start;gap:11px;min-height:var(--tap);
  margin:4px 0 12px;grid-column:1/-1;flex-basis:100%;width:100%;
  font:400 13.5px/1.55 var(--fs);cursor:pointer;text-align:start}
.consent input{flex:none;width:20px;height:20px;margin:1px 0 0;
  accent-color:var(--gold);cursor:pointer}
.consent span{opacity:.86}
.consent-missing span{opacity:1;color:#f3b4a2}
.consent-note{grid-column:1/-1;flex-basis:100%;margin:-4px 0 12px;
  font:500 13px/1.5 var(--fs);color:#f3b4a2}

/* the next-edition offer after a download (common.js), on the language
   hint's card */
.next-edition{flex-wrap:wrap;max-width:min(460px,calc(100vw - 32px));padding:14px 14px 12px 16px}
.next-edition .ne-q{flex:1 1 100%;margin:0 0 8px;font-weight:600}
.next-edition input[type=email]{flex:1 1 100%;min-height:40px;padding:8px 10px;border-radius:8px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:inherit;font:inherit}
.next-edition .consent{margin:8px 0 4px;font-size:12.5px}
.next-edition .ne-acts{display:flex;gap:8px;width:100%;justify-content:space-between}
.next-edition .ne-send{min-height:40px;padding:0 16px;border:0;border-radius:8px;
  background:var(--gold);color:#141414;font-weight:600;cursor:pointer}
.next-edition .ne-close{width:40px;height:40px;border:0;border-radius:8px;background:transparent;
  color:inherit;font-size:22px;cursor:pointer}
.next-edition .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* the brief in three steps (brief-steps.js, top-100 #81) */
form[data-steps] .f-row[hidden],form[data-steps] .f-two[hidden],
form[data-steps] .f-send[hidden],form[data-steps] [hidden]{display:none!important}
.brief-head{grid-column:1/-1;margin:0 0 18px}
.brief-bar{display:flex;gap:6px;margin-bottom:10px}
.brief-bar i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.14)}
.brief-bar i.done{background:rgba(197,162,104,.55)}
.brief-bar i.on{background:var(--gold)}
.brief-step{margin:0;font:600 12px/1.4 var(--fm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.brief-nav{grid-column:1/-1;display:flex;gap:10px;justify-content:space-between;margin-top:6px}
.brief-nav .brief-next{margin-inline-start:auto}