/* ==========================================================================
   Berger Consulting — Modernist
   Flat, architectural, set in Archivo. Crimson on a light ground, 0px radius,
   2px rules doing the organising. Photography prints in black and white.
   Single stylesheet, no build step: this file is the source of truth.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Self-hosted so the display voice never waits on a third party and never
   flashes a fallback. One variable file per subset covers 400–800, so the
   whole type system costs 35 KB. latin-ext carries the Latvian diacritics in
   the team names (Alīna Ņikitina, Jeļena Bulankina, Darja Petruševica).      */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Ground and ink */
  --bg:            #f3f2f2;
  --surface:       #eae9e9;
  --ink:           #201e1d;
  --ink-dim:       #605d5d;
  --dark:          #201e1d;
  --dark-deep:     #191716;

  /* Brand crimson — carried from the incumbent site's variables.css */
  --accent:        #9a1e27;
  --accent-600:    #7a181f;
  --accent-700:    #5e1218;
  --accent-100:    #f6e9ea;
  /* The one warm highlight, used only on dark grounds where crimson dies */
  --flare:         #ff6a55;

  --divider:       color-mix(in srgb, var(--ink) 40%, transparent);
  --divider-soft:  color-mix(in srgb, var(--ink) 16%, transparent);
  --on-dark:       #f3f2f2;
  --on-dark-dim:   color-mix(in srgb, #f3f2f2 68%, transparent);

  /* Type */
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;
  --gutter: clamp(16px, 4vw, 64px);
  --measure: 1240px;

  /* Section rhythm */
  --band: clamp(72px, 9vw, 132px);

  /* Motion — one curve family. Exponential ease-out: fast out of the gate,
     long settle. Everything on the page shares it so the site has one hand. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  /* Softer than the expo curve — used wherever motion should glide rather
     than arrive. Hover and press both take this one. */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  /* Deliberately slower and softer than the usual UI budgets: the brief for
     this site is smoothness over snap, including on hover. */
  --dur-press: 220ms;
  --dur-hover: 340ms;
  --dur-1: 300ms;
  --dur-2: 420ms;
  --dur-3: 720ms;
  --dur-4: 1100ms;
  /* Chrome on the hide/show bar and the drawer: UI budget is under 300ms and
     drawers 200–500ms, so neither borrows the long editorial curve. */
  --dur-ui: 420ms;
  --dur-drawer: 780ms;

  --rule: 2px;
  color-scheme: light;
  /* Lets height/width transitions reach `auto` where supported. */
  interpolate-size: allow-keywords;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.025em; line-height: 0.96; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

/* --------------------------------------------------------------------------
   Browser surfaces — the parts nobody draws still belong to the design
   -------------------------------------------------------------------------- */
::selection { background: var(--accent); color: var(--on-dark); }
:is(.dark, .crimson, .stage, .foot) ::selection { background: var(--on-dark); color: var(--dark); }
:where(input, textarea) { caret-color: var(--accent); }
:focus-visible {
  outline: var(--rule) solid var(--accent);
  outline-offset: 3px;
}
.dark :focus-visible, .crimson :focus-visible, .stage :focus-visible, .foot :focus-visible { outline-color: var(--on-dark); }
@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--accent) var(--surface); scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--accent); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-600); }

/* Skip link — invisible until it is the thing you need */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 99;
  display: inline-flex; padding: 14px 20px;
  background: var(--accent); color: var(--on-dark);
  font-size: 14px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none;
  transition: top var(--dur-2) var(--ease);
}
.skip:focus-visible { top: 8px; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
/* Two bands on the same ground read as one continuous surface, so they share a
   single rhythm gap. A change of ground still gets the full pair — the colour
   edge needs the air. */
.band:not(.surface):not(.dark):not(.crimson):not(.whyband) + .band:not(.surface):not(.dark):not(.crimson):not(.whyband),
.surface + .surface,
.dark + .dark,
.crimson + .crimson { padding-top: 0; }
.rule { border: 0; border-top: var(--rule) solid var(--divider); margin: 0; }
.rule-soft { border: 0; border-top: 1px solid var(--divider-soft); margin: 0; }

.dark { background: var(--dark); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3 { color: var(--on-dark); }
.dark .rule { border-color: color-mix(in srgb, var(--on-dark) 34%, transparent); }
.crimson {
  background: var(--accent); color: var(--on-dark);
  /* Crimson is darker than the ink ground, so the dim tone has to carry more
     white to clear 4.5:1. Overriding the token here fixes every consumer at
     once rather than patching them one by one. */
  --on-dark-dim: color-mix(in srgb, #f3f2f2 88%, transparent);
}
.crimson .rule { border-color: color-mix(in srgb, var(--on-dark) 42%, transparent); }
.surface { background: var(--surface); }

/* --------------------------------------------------------------------------
   Type scale — fixed steps; density moves spacing, not sizes
   -------------------------------------------------------------------------- */
.display   { font-size: clamp(38px, 6.4vw, 92px); line-height: 0.94; letter-spacing: -0.03em; }
.h1        { font-size: clamp(34px, 5.4vw, 76px); line-height: 0.95; letter-spacing: -0.03em; }
.h2        { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.0;  letter-spacing: -0.028em; }
.h3        { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.15; letter-spacing: -0.02em; }
.lede      { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; max-width: 62ch; }
.body      { font-size: 17px; line-height: 1.6; max-width: 68ch; }
.small     { font-size: 15px; line-height: 1.5; }
.label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; line-height: 1;
}
.dim { color: var(--ink-dim); }
.dark .dim, .crimson .dim { color: var(--on-dark-dim); }
.flare { color: var(--flare); }
/* Figures read as data, not as prose */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* --------------------------------------------------------------------------
   Buttons — labels flush left, never centred (Modernist rule)
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-dark);
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 22px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 14px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background var(--dur-1) var(--ease-soft), transform var(--dur-press) var(--ease-soft);
}
.btn:hover { --btn-bg: var(--accent-600); }
/* Nothing in the world appears from nothing and nothing moves without giving
   way — a press scales down, it does not just nudge. */
.btn:active { transform: scale(0.97); }
.btn .arrow { transition: transform var(--dur-hover) var(--ease-soft); }
.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.btn-ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--bg); }
.dark .btn-ghost, .crimson .btn-ghost, .stage .btn-ghost {
  --btn-fg: var(--on-dark);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-dark) 60%, transparent);
}
.dark .btn-ghost:hover, .stage .btn-ghost:hover { --btn-bg: var(--on-dark); --btn-fg: var(--dark); }
.crimson .btn-ghost:hover { --btn-bg: var(--on-dark); --btn-fg: var(--accent); }
.btn-lg { padding: 20px 26px; font-size: 15px; }


/* The brand icon SVGs are authored light (#e7e7e7) for dark grounds. On a light
   band they vanish, so they get inked; dark and crimson contexts keep them. */
.btn-ghost img, .tlink img { filter: brightness(0); }
.dark .btn-ghost img, .crimson .btn-ghost img, .stage .btn-ghost img,
.dark .tlink img, .crimson .tlink img, .stage .tlink img, .foot .tlink img { filter: none; }

/* Text link that draws its own rule on hover */
.tlink {
  display: inline-flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
  font-size: 14px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  padding-bottom: 6px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% var(--rule); background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-hover) var(--ease-soft), color var(--dur-1) var(--ease-soft), transform var(--dur-press) var(--ease-soft);
}
.tlink:hover { background-size: 100% var(--rule); color: var(--accent); }
.tlink:active { transform: scale(0.985); }
.dark .tlink, .crimson .tlink { background-image: linear-gradient(var(--on-dark), var(--on-dark)); }
.dark .tlink:hover, .crimson .tlink:hover { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--divider-soft);
  /* The bar never hides. The audience is 30–60 year-old founders reading a
     long page about tax and residence; navigation that disappears the moment
     you scroll is a tax on them, and it also removed the only stable target
     for the language switch and the phone number. */
  transition: background var(--dur-2) var(--ease-soft);
}
.masthead-in {
  display: flex; align-items: center; gap: var(--s6);
  height: 86px; padding-inline: var(--gutter);
  max-width: none;
}
/* Brand lockup — the geometry is taken from the approved design, not
   re-invented: two weights of Archivo stacked, then the Latvian flag beside
   LATVIA. Every measure is a multiple of --u, so the whole mark scales as one
   object: 1px in the masthead, a fluid clamp in the footer. */
.brand {
  --u: 1px;
  display: inline-block; text-decoration: none; color: var(--accent);
  margin-right: auto;
  transition: opacity var(--dur-hover) var(--ease-soft), transform var(--dur-press) var(--ease-soft);
}
.brand-a, .brand-b { display: block; }
.brand-a { font-weight: 800; font-size: calc(var(--u) * 15); letter-spacing: 0.13em; line-height: 1; }
.brand-b { font-weight: 400; font-size: calc(var(--u) * 13); letter-spacing: 0.155em; line-height: 1; padding: calc(var(--u) * 3) 0; }
.brand-c {
  display: flex; align-items: center;
  gap: calc(var(--u) * 5.1); margin-top: calc(var(--u) * 3.4);
  font-size: calc(var(--u) * 10.6); letter-spacing: 0.2em; line-height: 1.55;
}
/* Latvian flag: carmine field, white band across the middle third */
.brand-flag {
  display: block; position: relative; flex: none;
  width: calc(var(--u) * 17); height: calc(var(--u) * 10.2);
  background: var(--accent);
}
.brand-flag::after {
  content: ''; position: absolute; left: 0; right: 0;
  top: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); background: #fff;
}
.brand:active { transform: scale(0.985); }
.brand-foot {
  /* Was clamp(2.2px, .4vw, 5.4px) — 81px of BERGER, which overran the Pages
     column. The mark is a signature here, not a headline. */
  --u: clamp(1.4px, 0.16vw, 2.1px);
  margin-right: 0; color: var(--on-dark); max-width: 100%;
}
.nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 28px); }
.nav a {
  position: relative; color: inherit; text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  padding-block: 6px;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rule);
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-soft);
}
.nav a { transition: color var(--dur-1) var(--ease-soft), transform var(--dur-press) var(--ease-soft); }
.nav a:active { transform: scale(0.96); }
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); }
.nav a[aria-current='page'] { color: var(--accent); }

.langs { display: flex; gap: 0; box-shadow: inset 0 0 0 1px var(--divider); }
.langs a {
  padding: 7px 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--ink-dim); text-decoration: none;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.langs a:hover { background: var(--surface); color: var(--ink); }
.langs a:active { transform: scale(0.94); }
.langs a[aria-current='true'] { background: var(--accent); color: var(--on-dark); }

/* Burger */
.burger {
  display: none; width: 46px; height: 46px; padding: 0; border: 0; background: transparent;
  cursor: pointer; align-items: center; justify-content: center;
}
.burger { transition: transform var(--dur-press) var(--ease-soft); }
.burger:active { transform: scale(0.9); }
.burger i {
  display: block; position: relative; width: 22px; height: var(--rule); background: var(--ink);
  transition: background var(--dur-1) var(--ease);
}
.burger i::before, .burger i::after {
  content: ''; position: absolute; left: 0; width: 22px; height: var(--rule); background: var(--ink);
  transition: transform var(--dur-2) var(--ease);
}
.burger i::before { top: -7px; }
.burger i::after { top: 7px; }
.burger[aria-expanded='true'] i { background: transparent; }
.burger[aria-expanded='true'] i::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] i::after { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 86px 0 0; z-index: 55;
  background: var(--bg);
  padding: var(--gutter);
  display: grid; align-content: start; gap: 2px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-drawer) var(--ease-soft);
  overflow-y: auto;
}
.drawer[data-open='true'] { clip-path: inset(0 0 0 0); }
.drawer a {
  display: flex; align-items: baseline; gap: 14px;
  padding-block: 18px; border-bottom: 1px solid var(--divider-soft);
  color: inherit; text-decoration: none;
  font-size: clamp(28px, 8vw, 44px); font-weight: 800; letter-spacing: -0.03em;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-drawer) var(--ease-soft), transform var(--dur-drawer) var(--ease-soft), color var(--dur-hover) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.drawer[data-open='true'] a { opacity: 1; transform: none; }
.drawer a:hover { color: var(--accent); }
.drawer a em {
  font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: 0.2em; color: var(--ink-dim);
}


@media (max-width: 1023px) {
  /* The masthead CTA is dropped, not shrunk: the drawer and the hero both
     carry it, and squeezing it here wraps the label and evicts the burger. */
  .nav, .masthead .btn { display: none; }
  .burger { display: inline-flex; }
  .langs { margin-left: auto; }
}
@media (max-width: 560px) {
  .masthead-in { height: 72px; gap: var(--s3); }
  .drawer { inset-block-start: 72px; }
  .brand { --u: 0.86px; }
}

/* --------------------------------------------------------------------------
   The Riga sequence — the page's one authored moment.
   A pinned stage; scroll drives --p (0→1) and the derived vars below.
   Everything here is transform/opacity/clip-path only, so it stays on the
   compositor. Without JS the stage settles on its final, legible frame.
   -------------------------------------------------------------------------- */
.stage-track { position: relative; height: 360vh; background: var(--dark-deep); }
.stage {
  position: sticky; top: 0; height: 100svh; min-height: 600px;
  overflow: hidden; isolation: isolate; background: var(--dark-deep);
  /* Every ground inside the stage is dark or crimson, so light ink is the
     inherited default here — nothing in it should fall back to body colour. */
  color: var(--on-dark);
  --p: 0; --mx: 0; --my: 0;
}
.stage-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.stage-sky {
  inset: -6%; width: 112%; height: 112%;
  filter: contrast(1.12) brightness(0.74);
  transform: scale(1.06);
}
.stage-front {
  filter: contrast(1.08) brightness(0.86);
  opacity: 0; transform: scale(1.14);
}
.stage-veil {
  background: linear-gradient(180deg,
    rgba(25,23,22,0.30) 0%, rgba(25,23,22,0.10) 44%, rgba(25,23,22,0.78) 100%);
  opacity: 0.44;
}
/* Split halves that part like doors */
.stage-half { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.stage-half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) brightness(0.52); }
.stage-half-l { clip-path: inset(0 50% 0 0); }
.stage-half-r { clip-path: inset(0 0 0 50%); }
.stage-halfveil {
  /* This scrim exists to carry the headline. It leaves with the headline, so
     the photograph is never left crushed to black for its own sake. */
  background: linear-gradient(100deg,
    rgba(24,22,21,0.95) 0%, rgba(24,22,21,0.88) 42%, rgba(24,22,21,0.42) 74%, rgba(24,22,21,0.22) 100%);
}

.stage-title {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: clamp(96px, 13vh, 150px) var(--gutter) clamp(72px, 11vh, 120px);

}
.stage-title-in { width: 100%; max-width: var(--measure); margin-inline: auto; }
.stage h1 { color: var(--on-dark); max-width: 19ch; }
.stage .lede { color: var(--on-dark-dim); margin-top: 24px; max-width: 52ch; }
.stage-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4vh, 40px); }

/* Crimson curtain + the closing statement it reveals */
.stage-curtain {
  position: absolute; inset: 0; background: var(--accent);
  visibility: hidden;
}
.stage-statement {
  position: absolute; left: 0; right: 0; top: 50%;
  padding-inline: var(--gutter);
  translate: 0 -50%;
  opacity: 0; visibility: hidden;
}
.stage-statement-in { max-width: var(--measure); margin-inline: auto; }
.stage-statement h2 { color: var(--on-dark); max-width: 21ch; }

.statrow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: clamp(16px, 3vw, 48px); margin-top: clamp(28px, 5vw, 56px);
  opacity: 0;
}
.stat { border-top: var(--rule) solid color-mix(in srgb, var(--on-dark) 55%, transparent); padding-top: 14px; }
.stat b { display: block; font-size: clamp(36px, 4.2vw, 60px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.stat span { display: block; margin-top: 6px; font-size: 14px; color: var(--on-dark-dim); }

.scrollcue {
  position: absolute; left: var(--gutter); bottom: 26px;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--on-dark-dim);
}
.scrollcue i { display: block; width: 40px; height: 1px; background: currentColor; transform-origin: left;
  animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%,100% { transform: scaleX(0.35); opacity: 0.5; } 50% { transform: scaleX(1); opacity: 1; } }

@media (max-width: 700px) {
  .stage-track { height: 300vh; }
  .stage { min-height: 540px; }
}

/* --------------------------------------------------------------------------
   Editorial blocks
   -------------------------------------------------------------------------- */
.head { display: grid; gap: var(--s6); }
.head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s8); flex-wrap: wrap;
}

/* A list whose items are separated by rules, not boxed into cards */
.ruled { border-top: var(--rule) solid var(--divider); }
.ruled > li { border-bottom: 1px solid var(--divider-soft); }
.ruled > li:last-child { border-bottom: var(--rule) solid var(--divider); }

.rowlink {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  align-items: start; gap: clamp(16px, 3vw, 44px);
  padding-block: clamp(22px, 2.6vw, 34px);
  color: inherit; text-decoration: none;
}
/* The row fills and its content steps right on hover. Both are composited —
   animating padding here would relayout the whole list on every pointer move. */
.rowlink::before {
  content: ''; position: absolute; inset: 0 -18px; z-index: -1;
  background: var(--surface); opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-soft);
}
.rowlink:hover::before, .rowlink:focus-visible::before { opacity: 1; }
.rowlink > * { transition: transform var(--dur-hover) var(--ease-soft); }
.rowlink:active::before { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.rowlink .idx { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; color: var(--accent); padding-top: 5px; }
.rowlink .go { align-self: center; color: var(--accent); }
.rowlink p { margin-top: 8px; color: var(--ink-dim); max-width: 62ch; }
@media (max-width: 720px) {
  .rowlink { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .rowlink .go { display: none; }
}

/* Two-column editorial split */
.split {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 88px); align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Fact list with rules */
.facts { display: grid; gap: 0; }
.facts > div { padding-block: 22px; border-top: 1px solid var(--divider-soft); }
.facts > div:first-child { border-top: var(--rule) solid var(--divider); }
.facts h3 { margin-bottom: 8px; }
/* Only where the order is the information — a process, not decoration */
.stepno {
  display: block; margin-bottom: 10px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: var(--accent);
}
.dark .stepno, .crimson .stepno { color: var(--flare); }
.facts p { color: var(--ink-dim); max-width: 56ch; }
.dark .facts p { color: var(--on-dark-dim); }

/* Disclosure — the objections list */
.qa { border-top: var(--rule) solid var(--divider); }
.qa details { border-bottom: 1px solid var(--divider-soft); }
.qa details:last-of-type { border-bottom: var(--rule) solid var(--divider); }
.qa summary {
  display: flex; align-items: baseline; gap: 18px;
  padding-block: clamp(20px, 2.4vw, 28px);
  cursor: pointer; list-style: none;
  font-size: clamp(19px, 1.8vw, 27px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2;
  transition: color var(--dur-1) var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa summary:active { transform: scale(0.995); transform-origin: left center; }
.qa summary .sign {
  margin-left: auto; flex: none; width: 18px; height: 18px; position: relative; align-self: center;
}
.qa summary .sign::before, .qa summary .sign::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: var(--rule); background: var(--accent);
  transform: translateY(-50%); transition: transform var(--dur-2) var(--ease);
}
.qa summary .sign::after { transform: translateY(-50%) rotate(90deg); }
.qa details[open] summary .sign::after { transform: translateY(-50%) rotate(0deg); }
.qa .ans { overflow: hidden; }
.qa .ans p { padding: 0 0 clamp(22px, 2.4vw, 30px); max-width: 68ch; color: var(--ink-dim); }
/* The disclosure is animated in JS (see site.js): block-size cannot transition
   from 0 to auto without interpolate-size, so the panel was snapping open and
   only its opacity was easing. GSAP measures the real height instead, which
   also works in every browser rather than only the newest.
   Without JS the native <details> still opens — instantly, but correctly. */
.qa .ans { overflow: hidden; }

/* Figure with baked-grayscale art */
.plate { position: relative; overflow: hidden; background: var(--surface); isolation: isolate; }
.plate .motif { z-index: 2; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate-tall { aspect-ratio: 3 / 4; }
.plate-wide { aspect-ratio: 16 / 10; }

/* Case rows */
.case {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(20px, 4vw, 64px); align-items: center;
  padding-block: clamp(28px, 4vw, 52px);
  border-top: 1px solid var(--divider-soft);
}
.case:first-of-type { border-top: var(--rule) solid var(--divider); }
.case:last-of-type { border-bottom: var(--rule) solid var(--divider); }
.case .meta { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.case h3 { font-size: clamp(24px, 2.6vw, 38px); }
.case p { margin-top: 12px; color: var(--ink-dim); max-width: 60ch; }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Interior page heads
   -------------------------------------------------------------------------- */
.pagehead { position: relative; padding-block: clamp(64px, 9vw, 132px); overflow: hidden; }
.pagehead-in { position: relative; }
.pagehead h1 { max-width: 16ch; }
.pagehead .lede { color: var(--ink-dim); }
/* Crimson-washed photographic variant */
.pagehead-art { background: var(--accent); color: var(--on-dark); }
.pagehead-art h1 { color: var(--on-dark); }
.pagehead-art .lede { color: color-mix(in srgb, var(--on-dark) 88%, transparent); }
.pagehead-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pagehead-wash {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(154,30,39,0.95) 0%, rgba(154,30,39,0.74) 62%, rgba(154,30,39,0.55) 100%);
}
.pagehead-art :focus-visible { outline-color: var(--on-dark); }
.pagehead-art .btn-ghost { --btn-fg: var(--on-dark); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-dark) 60%, transparent); }
.pagehead-art .btn-ghost:hover { --btn-bg: var(--on-dark); --btn-fg: var(--accent); }
.pagehead-art ::selection { background: var(--on-dark); color: var(--accent); }

/* --------------------------------------------------------------------------
   Service cards — the design deck's own services layout: a photograph flush to
   the top of a light panel, a crimson title, a short lede and a ticked list.
   Replaces six alternating full-width rows, which were the same shape repeated
   and read as a list rather than a set of offers.
   -------------------------------------------------------------------------- */
.svcgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 26vw, 340px), 1fr));
  gap: clamp(18px, 2vw, 30px);
}
.svccard {
  display: flex; flex-direction: column;
  background: var(--surface);
  transition: transform var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft);
}
.svccard-media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); }
.svccard-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: transform var(--dur-4) var(--ease-soft);
}
.svccard-body {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(20px, 2.2vw, 30px);
}
.svccard-title {
  color: var(--accent);
  font-size: clamp(19px, 1.55vw, 24px); line-height: 1.15; letter-spacing: -0.015em;
}
.svccard-lede { margin-top: 10px; }
.svccard-list { margin-top: 20px; gap: 14px; }
.svccard-list li { font-size: 15px; line-height: 1.45; }
.svccard-link { margin-top: auto; padding-top: 24px; }

@media (hover: hover) and (pointer: fine) {
  .svccard:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(32,30,29,0.14); }
  .svccard:hover .svccard-media img { transform: scale(1.04); }
}

/* Ticked list — the square is the design system's mark, not a bullet glyph */
.ticks { display: grid; gap: 11px; margin-top: 20px; }
.ticks li { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 13px; align-items: start; }
.ticks li::before {
  content: ''; width: 9px; height: 9px; margin-top: 8px; background: var(--accent);
}
.dark .ticks li::before, .crimson .ticks li::before { background: var(--flare); }

/* Four-up statement grid, ruled at the top of each cell */
.quad { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 3vw, 44px); }
.quad > div { border-top: var(--rule) solid color-mix(in srgb, currentColor 40%, transparent); padding-top: 18px; }
.quad h3 {
  font-size: 15px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.dark .quad h3, .crimson .quad h3 { color: var(--flare); }
.quad p { color: var(--ink-dim); }
/* App Store artwork for the three real apps. The radius is the one exception
   to the site's 0px rule: an app icon is recognised by its squircle, and a
   square-cornered Bolt tile stops reading as the thing on your home screen.
   Apple serves this artwork unmasked, so the mask is ours to apply. */
.apptile {
  display: block; width: 56px; height: 56px; margin-bottom: 14px;
  border-radius: 22%; object-fit: cover;
}
/* Icon and title share a row; the copy runs full width underneath, so a long
   app name wraps beside the tile instead of pushing the tile off on its own. */
.appcard {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 16px; align-items: center;
  /* Cards are equal height because the grid stretches them; without this
     the spare height lands in the first row and drops each icon by a
     different amount, so the four tiles stop lining up. */
  align-content: start;
}
.appcard .apptile { margin-bottom: 0; }
.appcard h3 { margin: 0; }
.appcard p { grid-column: 1 / -1; margin-top: 14px; }
.dark .quad p, .crimson .quad p { color: var(--on-dark-dim); }

/* Hover motion is gated: touch fires a hover on tap and then leaves it stuck.
   Colour and fill changes stay ungated — they read correctly either way. */
@media (hover: hover) and (pointer: fine) {
  .rowlink:hover > * { transform: translateX(14px); }
  .rowlink:hover .go { transform: translateX(21px); }
    .socials a:hover { transform: translateY(-3px); }
  .brand:hover { opacity: 0.72; }
}


/* --------------------------------------------------------------------------
   Devices from the client's design deck (Berger ENG Computer.pdf, Canva).
   These are the brand's own recurring graphics — the reason the deck reads as
   one system and a page of ruled lists does not.
   -------------------------------------------------------------------------- */

/* 1. Eyebrow. The deck puts a crimson label above nearly every heading; it is
      the thing that tells you a new section has started. */
.eyebrow {
  display: block; margin-bottom: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
}
.dark .eyebrow, .crimson .eyebrow, .pagehead-art .eyebrow { color: var(--flare); }
.crimson .eyebrow { color: var(--on-dark); }

/* 2. Two-tone heading: the second clause carries the accent. */
.hi { color: var(--accent); }
.dark .hi, .stage .hi { color: var(--flare); }
.crimson .hi { color: var(--on-dark); }

/* 3. The collage. Two compositions, taken from the design deck:
      A — vertical stripes with a black square lapping their lower-left corner
          and a crimson square lapping that in turn;
      B — a black panel with the crimson bar-stack straddling its bottom edge.
      Decorative only, so hidden from assistive technology. */
.motif { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.motif > * { position: absolute; }

/* --- composition A ------------------------------------------------------- */
.motif-stripes {
  top: 0; right: 0;
  width: clamp(104px, 13vw, 205px); height: clamp(120px, 15vw, 235px);
  background: repeating-linear-gradient(90deg, #1a1a1a 0 9px, #f3f2f2 9px 18px);
}
.motif-sq-ink {
  top: clamp(66px, 8.2vw, 128px); right: clamp(66px, 8.4vw, 132px);
  width: clamp(58px, 7vw, 110px); aspect-ratio: 1; background: #1a1a1a;
}
.motif-sq {
  top: clamp(104px, 12.6vw, 198px); right: clamp(112px, 14vw, 220px);
  width: clamp(62px, 7.6vw, 120px); aspect-ratio: 1; background: var(--accent);
}

/* --- composition B -------------------------------------------------------
   Anchored to the lower-left corner and kept small. Earlier these sat in the
   middle of the frame and buried the subject of the photograph. */
.motif-panel {
  left: 0; bottom: clamp(30px, 5vw, 74px);
  width: clamp(80px, 9vw, 142px); aspect-ratio: 1 / 0.9; background: #1a1a1a;
}
.motif-bars {
  left: clamp(24px, 3.4vw, 58px); bottom: 0;
  width: clamp(66px, 7.4vw, 116px); height: clamp(56px, 6.4vw, 100px);
  background: repeating-linear-gradient(180deg, var(--accent) 0 5px, transparent 5px 13px);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 20px, transparent 20px 28px);
          mask: repeating-linear-gradient(90deg, #000 0 20px, transparent 20px 28px);
}
.motif-bar {
  right: 0; top: clamp(128px, 16vw, 250px);
  width: clamp(96px, 12vw, 180px); height: clamp(12px, 1.5vw, 22px); background: #1a1a1a;
}
@media (max-width: 640px) { .motif-bars, .motif-bar, .motif-panel { display: none; } }

/* Line-art chevron glyph — the deck sets this beside section headings. Vector
   geometry, so it stays crisp; it draws itself in on scroll. */
.glyph { display: block; width: clamp(64px, 6vw, 96px); height: auto; color: var(--accent); overflow: visible; }
.glyph path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dark .glyph, .crimson .glyph { color: var(--flare); }
.crimson .glyph { color: var(--on-dark); }
.headglyph { display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 46px); }
.headglyph > :first-child { flex: 1 1 auto; min-width: 0; }
.headglyph .glyph { flex: 0 0 auto; margin-top: 4px; align-self: flex-start; }
@media (max-width: 640px) { .headglyph .glyph { display: none; } }

/* Crimson plate with white rules running off its edge — the deck laps this
   over the corner of a photograph. */
.motif-plate {
  position: absolute; z-index: 3; left: calc(-1 * clamp(16px, 3vw, 44px)); bottom: clamp(18px, 3vw, 46px);
  width: clamp(84px, 10vw, 140px); aspect-ratio: 1; background: var(--accent);
}
.motif-plate::after {
  content: ''; position: absolute; left: 22%; right: -58%; top: 30%; height: 40%;
  background: repeating-linear-gradient(180deg, #f3f2f2 0 3px, transparent 3px 12px);
}


/* --------------------------------------------------------------------------
   Loose decorations. The collage belongs to photographic bands; these are the
   same vocabulary broken into single pieces that can be dropped into any
   section to break up an empty corner. One or two per band — they are seasoning,
   not the meal.
   -------------------------------------------------------------------------- */
.band, .pagehead { position: relative; }
.band > .wrap, .pagehead > .wrap { position: relative; z-index: 2; }
.deco { position: absolute; z-index: 1; pointer-events: none; }
.deco-tr { top: clamp(24px, 4vw, 60px); right: 0; }
.deco-br { bottom: clamp(24px, 4vw, 60px); right: 0; }
.deco-bl { bottom: clamp(24px, 4vw, 60px); left: 0; }
.deco-tl { top: clamp(24px, 4vw, 60px); left: 0; }

.deco-stripes {
  width: clamp(70px, 8vw, 132px); height: clamp(84px, 10vw, 164px);
  background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 16px);
  color: var(--ink); opacity: 0.16;
}
.dark .deco-stripes, .crimson .deco-stripes { color: var(--on-dark); opacity: 0.2; }

.deco-bars {
  width: clamp(72px, 8vw, 128px); height: clamp(60px, 7vw, 106px);
  background: repeating-linear-gradient(180deg, var(--accent) 0 5px, transparent 5px 13px);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 20px, transparent 20px 29px);
          mask: repeating-linear-gradient(90deg, #000 0 20px, transparent 20px 29px);
  opacity: 0.85;
}
.dark .deco-bars, .crimson .deco-bars { background: repeating-linear-gradient(180deg, var(--flare) 0 5px, transparent 5px 13px); }

.deco-sq { width: clamp(40px, 4.6vw, 76px); aspect-ratio: 1; background: var(--accent); opacity: 0.9; }
.deco-sq-ink { width: clamp(34px, 4vw, 64px); aspect-ratio: 1; background: #1a1a1a; opacity: 0.85; }
.crimson .deco-sq { background: var(--on-dark); }
.dark .deco-sq-ink, .crimson .deco-sq-ink { background: var(--on-dark); opacity: 0.18; }

.deco-rule { width: clamp(90px, 13vw, 210px); height: var(--rule); background: var(--accent); opacity: 0.8; }
.dark .deco-rule, .crimson .deco-rule { background: var(--on-dark); opacity: 0.5; }

@media (max-width: 720px) { .deco { display: none; } }

/* 4. Fact grid markers alternate filled and outline, as the deck does, and the
      title takes the accent in caps. */
.facts.marked > div { position: relative; padding-left: 30px; }
.facts.marked > div::before {
  content: ''; position: absolute; left: 0; top: 26px;
  width: 10px; height: 10px; background: var(--accent);
}
.facts.marked > div:nth-child(even)::before {
  background: transparent; box-shadow: inset 0 0 0 2px var(--accent);
}
.dark .facts.marked > div::before { background: var(--flare); }
.dark .facts.marked > div:nth-child(even)::before { background: transparent; box-shadow: inset 0 0 0 2px var(--flare); }
.facts.marked h3 {
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(16px, 1.25vw, 19px);
}
.dark .facts.marked h3 { color: var(--flare); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 8px; }
.field > span { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.dark .field > span, .crimson .field > span, .stage .field > span { color: var(--on-dark-dim); }
.input {
  width: 100%; padding: 15px 16px; background: var(--bg); color: var(--ink);
  border: 0; box-shadow: inset 0 0 0 1px var(--divider);
  transition: box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.input::placeholder { color: color-mix(in srgb, var(--ink) 48%, transparent); }
.input:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 58%, transparent); }
.input:focus { outline: 0; box-shadow: inset 0 0 0 var(--rule) var(--accent); }
textarea.input { min-height: 120px; resize: vertical; }
.dark .input, .crimson .input {
  background: transparent; color: var(--on-dark);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-dark) 42%, transparent);
}
.dark .input::placeholder, .crimson .input::placeholder { color: color-mix(in srgb, var(--on-dark) 82%, transparent); }
.dark .input:focus, .crimson .input:focus { box-shadow: inset 0 0 0 var(--rule) var(--on-dark); }

/* Choice chips — profile picker and slot picker share one control */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  --choice-fill: var(--accent);
  --choice-on: var(--on-dark);
  position: relative; isolation: isolate; overflow: hidden;
  padding: 13px 17px; background: transparent; color: inherit; cursor: pointer;
  border: 0; box-shadow: inset 0 0 0 1px var(--divider);
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-align: left;
  transition: color var(--dur-hover) var(--ease-soft),
              box-shadow var(--dur-hover) var(--ease-soft),
              transform var(--dur-press) var(--ease-soft);
}
/* Selection wipes in from the left rather than swapping colour instantly —
   the same gesture the hero curtain makes, so the site has one idea about how
   crimson arrives. */
.choice::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--choice-fill);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-soft);
}
.choice::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: currentColor; opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-soft);
}
.choice:hover::after { opacity: 0.09; }
.choice:active { transform: scale(0.96); }
.choice[aria-pressed='true'] {
  color: var(--choice-on); box-shadow: inset 0 0 0 1px var(--choice-fill);
}
.choice[aria-pressed='true']::before { transform: scaleX(1); }
.choice[aria-pressed='true']::after { opacity: 0; }

.dark .choice, .crimson .choice {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-dark) 40%, transparent);
  --choice-fill: var(--on-dark);
}
.dark .choice { --choice-on: var(--dark); }
.crimson .choice { --choice-on: var(--accent); }

/* Disclosure for the note that follows a selection: grid rows animate without
   measuring a pixel height, so the panel can hold any length of copy. */
.notewrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-soft); }
.notewrap > * { overflow: hidden; min-height: 0; opacity: 0; transform: translateY(-6px);
  transition: opacity var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-soft); }
.notewrap[data-open='true'] { grid-template-rows: 1fr; }
.notewrap[data-open='true'] > * { opacity: 1; transform: none; }

.choice .slot-day { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.72; }
.choice .slot-time { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin-top: 3px; }

.formnote { font-size: 14px; margin-top: 14px; }
.form-status { min-height: 1.5em; }
/* Honeypot: off-screen rather than display:none, which some bots detect */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Page-specific blocks
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* A caveat that must not be missed — bordered, not shouted */
.note {
  margin-top: clamp(28px, 4vw, 44px); padding: 18px 20px;
  border-left: var(--rule) solid var(--accent);
  background: var(--surface);
  font-size: 15px; line-height: 1.55; max-width: 74ch; color: var(--ink-dim);
}
.dark .note, .crimson .note { background: color-mix(in srgb, var(--on-dark) 10%, transparent); color: var(--on-dark-dim); }
/* A closing note that runs the full column, with a glyph to mark it as an aside
   rather than another paragraph of the guide. */
.note-wide {
  max-width: none;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start;
}
.note-wide > svg { width: 26px; height: 26px; color: var(--accent); }
.dark .note-wide > svg, .crimson .note-wide > svg { color: var(--flare); }
.note-wide > p { margin: 0; }

/* Immigration routes */
.route {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(24px, 4vw, 64px); align-items: start;
  padding-block: clamp(30px, 4.4vw, 58px);
  border-top: 1px solid var(--divider-soft);
}
.route:first-of-type { border-top: var(--rule) solid var(--divider); }
.route:last-of-type { border-bottom: var(--rule) solid var(--divider); }
.route .tlink { margin-top: 22px; }
.route-facts { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 900px) { .route { grid-template-columns: 1fr; } }

/* Numbered experience list */
.expitem {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: clamp(14px, 2vw, 28px);
  padding-block: 20px; align-items: baseline;
  font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; letter-spacing: -0.01em;
}
.expitem .idx { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; color: var(--accent); }

/* Two-column tick list */
.ticks-two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px clamp(24px, 4vw, 56px); }

/* --------------------------------------------------------------------------
   Team — the deck's checkerboard: portrait tiles woven with solid name tiles
   that cycle crimson / ink / paper, each notched toward its own portrait so
   the pairing is unmistakable. Replaces a plain row of captioned photographs.
   -------------------------------------------------------------------------- */
.teamgrid { display: grid; grid-template-columns: repeat(4, 1fr); }
.teammate { display: contents; }
.teammate-photo { margin: 0; aspect-ratio: 10 / 9; overflow: hidden; background: var(--surface); }
.teammate-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.teammate-name {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(16px, 1.8vw, 28px);
}
.teammate-name h3 { font-size: clamp(17px, 1.5vw, 23px); line-height: 1.12; letter-spacing: -0.02em; }
.teammate-name p { margin-top: 7px; font-size: 14px; line-height: 1.35; opacity: 0.86; }

/* The notch points back at the portrait it belongs to. */
.teammate-name::before {
  content: ''; position: absolute; top: 50%; width: 14px; height: 26px;
  background: inherit; transform: translateY(-50%);
}
/* The photo/name order is set in the markup, not with `order`: under grid
   auto-placement `order` re-sorted the cells and split pairs apart, so a name
   ended up captioning someone else's portrait.
   The notch side is likewise declared per tile rather than inferred from
   nth-child parity, which did not survive the markup alternating. */
.teammate-name[data-notch='left']::before {
  left: -13px; clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.teammate-name[data-notch='right']::before {
  right: -13px; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* colour cycle across the tiles */
.teammate:nth-child(3n+1) .teammate-name { background: var(--accent); color: var(--on-dark); }
.teammate:nth-child(3n+2) .teammate-name { background: var(--dark); color: var(--on-dark); }
.teammate:nth-child(3n+3) .teammate-name { background: var(--bg); color: var(--ink); }

@media (max-width: 900px) { .teamgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .teamgrid { grid-template-columns: 1fr 1fr; }
  .teammate-name { padding: 14px; }
  .teammate-name h3 { font-size: 16px; }
  .teammate-name p { font-size: 12px; }
}


/* About — "Why us" over a blurred office photograph, per the deck. The blur is
   the point: it is atmosphere behind the list, not a picture to look at. */
.whyband { position: relative; overflow: clip; background: var(--surface); }
.whyband > .wrap { position: relative; z-index: 2; }
.whyband-art { position: absolute; inset: 0; z-index: 1; }
.whyband-art img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) blur(14px) brightness(1.18) contrast(0.9);
  transform: scale(1.08);   /* hides the blur's soft edges */
}
.whyband-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(243,242,242,0.94) 0%, rgba(243,242,242,0.72) 60%, rgba(243,242,242,0.6) 100%);
}
.whylist {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 56px);
}
.whylist li { position: relative; padding-left: 26px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.4; }
.whylist li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; background: var(--accent);
}
.whylist li:nth-child(even)::before { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }

/* "Our experience" — numbered items on the crimson band */
.expgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(22px, 3vw, 44px); margin-top: clamp(32px, 4vw, 60px);
}
.expgrid li { display: grid; gap: 10px; }
.expno { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: var(--on-dark); opacity: 0.8; }
.expgrid li > span:last-child { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.35; }

/* Office strip */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Data table — rules only, figures aligned, scrolls on its own at small widths */
.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 560px; }
.table caption { text-align: left; }
.table th, .table td {
  text-align: left; vertical-align: top; padding: 18px 20px 18px 0;
  border-bottom: 1px solid var(--divider-soft);
}
.table thead th {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-dim); border-bottom: var(--rule) solid var(--divider); padding-bottom: 12px;
}
.table tbody th { font-weight: 800; letter-spacing: -0.01em; width: 26%; }
.table tbody td:first-of-type { font-weight: 800; color: var(--accent); white-space: nowrap; width: 18%; }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: var(--rule) solid var(--divider); }
.table td:last-child { color: var(--ink-dim); }

/* Case studies */
.case-study .case-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.case-sector { color: var(--accent); margin-bottom: 14px; }
.dark .case-sector, .crimson .case-sector { color: var(--flare); }
.case-h {
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 14px;
}
.dark .case-h { color: var(--on-dark-dim); }
.case-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: var(--rule) solid var(--divider);
}
.dark .case-body { border-top-color: color-mix(in srgb, var(--on-dark) 34%, transparent); }
.case-results { margin-top: clamp(28px, 3.5vw, 48px); opacity: 1; }
.case-results .stat { border-top-color: var(--divider); }
.case-results .stat b { color: var(--accent); }
.case-results .stat span { color: var(--ink-dim); }
.dark .case-results .stat { border-top-color: color-mix(in srgb, var(--on-dark) 55%, transparent); }
.dark .case-results .stat b { color: var(--flare); }
.dark .case-results .stat span { color: var(--on-dark-dim); }
.case-steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); display: grid; gap: clamp(18px, 2.4vw, 36px); }
.case-steps > div { border-top: 1px solid var(--divider-soft); padding-top: 16px; }
.dark .case-steps > div { border-top-color: color-mix(in srgb, var(--on-dark) 26%, transparent); }
@media (max-width: 880px) {
  .case-study .case-top, .case-body { grid-template-columns: 1fr; }
}

/* Typographic plate standing in for case photography that is not cleared.
   Sized to the same slot as .plate-wide so swapping in a real photograph is a
   one-line change in _data/cases.json. */
.case-mark {
  aspect-ratio: 16 / 10;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 10px; padding: clamp(20px, 2.6vw, 34px);
  background: var(--surface);
  border-top: var(--rule) solid var(--accent);
}
.dark .case-mark { background: color-mix(in srgb, var(--on-dark) 8%, transparent); border-top-color: var(--flare); }
.case-mark-name {
  font-size: clamp(34px, 4.4vw, 62px); font-weight: 800; line-height: 0.95;
  letter-spacing: -0.035em; color: var(--ink);
}
.dark .case-mark-name { color: var(--on-dark); }
.case-mark-sector {
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim);
}
.dark .case-mark-sector { color: var(--on-dark-dim); }

/* --------------------------------------------------------------------------
   Device stage — "Their website · built by us"
   The MacBook is drawn, not photographed: no device image exists at a size that
   would stay crisp, and vector geometry costs nothing. Both devices scale from
   container query units, so the whole stage is resolution-independent.
   The lid opens and the phone flies in once the block is scrolled into view;
   --open and --in are set by site.js and default to the finished state, so a
   reader without JS sees an open laptop rather than a closed slab.
   -------------------------------------------------------------------------- */
.worksite {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(20px, 3vw, 36px);
  border-top: var(--rule) solid var(--divider);
  display: grid; grid-template-columns: minmax(min(100%, 280px), 1fr) 2fr;
  gap: clamp(20px, 3vw, 44px); align-items: end;
}
.dark .worksite { border-top-color: color-mix(in srgb, var(--on-dark) 34%, transparent); }
.worksite p { max-width: 40ch; margin-top: 10px; font-size: 15px; line-height: 1.5; }
.worksite .tlink { margin-top: 16px; }
@media (max-width: 880px) { .worksite { grid-template-columns: 1fr; } }

/* The phone starts its fly-in outside these bounds; without clipping that
   pushed the whole document 55px wide on a phone. The clip margin keeps the
   drop shadow while the travel stays contained. */
.devices {
  position: relative; width: 100%; aspect-ratio: 1008 / 640;
  overflow: clip; overflow-clip-margin: 34px;
  --open: 1; --in: 1;
}

/* MacBook */
.mb { position: absolute; inset: 0 0 auto; aspect-ratio: 1008 / 591; container-type: inline-size; }
.mb-in {
  position: absolute; left: 0; top: 0; width: 1008px; height: 591px;
  transform: scale(calc(100cqw / 1008px)); transform-origin: 0 0;
  perspective: 2200px; perspective-origin: 50% 30%;
}
.mb-shadow {
  position: absolute; left: 52px; top: 581px; width: 905px; height: 10px;
  border-radius: 50%; background: #000; filter: blur(4px); opacity: 0.7;
}
.mb-lid {
  position: absolute; left: 98px; top: 0; width: 816px; height: 554px;
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--open)) * -88deg));
  backface-visibility: hidden;
  transition: transform 1400ms var(--ease);
}
.mb-case {
  position: absolute; inset: 0;
  border-radius: 28px 28px 4px 4px; background: #1a202c;
  box-shadow: inset 0 0 0 2px #4a5568;
}
.mb-bezel { position: absolute; left: 5px; top: 5px; width: 806px; height: 528px; border-radius: 22px; background: #000; }
.mb-screen {
  position: absolute; left: 21px; top: 31px; width: 770px; height: 480px;
  overflow: hidden; background: var(--surface);
}
.mb-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* The screen stays dark until the lid is open — a lit screen on a shut laptop
   is the tell that the whole thing is a static picture. */
.mb-screen::after {
  content: ''; position: absolute; inset: 0; background: #000; z-index: 2;
  opacity: calc(1 - var(--open)); pointer-events: none;
  transition: opacity 900ms var(--ease);
}
.mb-hinge {
  position: absolute; left: 0; top: 550px; width: 1008px; height: 18px; border-radius: 2px;
  background: linear-gradient(90deg, #0d1012 0%, #cad4db 2.95%, #242729 6.25%, #a3acb1 13.36%,
              #a3acb1 86.6%, #242729 94.19%, #cad4db 97.13%, #0d1012 99.64%);
}
.mb-foot { position: absolute; left: 0; top: 568px; width: 1008px; height: 12px; }
.mb-groove { position: absolute; left: 421px; top: 550px; width: 167px; height: 14px; }

/* iPhone */
.ph {
  position: absolute; bottom: 0; width: 22%; aspect-ratio: 823 / 1677;
  container-type: inline-size;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.38));
  opacity: var(--in);
  transform: translate3d(calc((1 - var(--in)) * var(--dir, 1) * 42%), 0, 0)
             rotate(calc((1 - var(--in)) * var(--dir, 1) * 14deg));
  transform-origin: 50% 100%;
  transition: opacity 900ms var(--ease), transform 1200ms var(--ease);
}
.ph-right { right: 0; --dir: 1; }
.ph-left { left: 0; --dir: -1; }
.ph-in { position: absolute; left: 0; top: 0; width: 823px; height: 1677px; transform: scale(calc(100cqw / 823px)); transform-origin: 0 0; }
.ph-screen {
  position: absolute; left: 38px; top: 32px; width: 746px; height: 1618px;
  border-radius: 110px; overflow: hidden; background: var(--surface);
}
.ph-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ph-frame {
  position: absolute; left: 0; top: 0; width: 823px; height: 1677px; pointer-events: none;
  -webkit-mask: url(/images/mockups/iphone15pro-mask.svg) 0 0 / 823px 1677px no-repeat;
          mask: url(/images/mockups/iphone15pro-mask.svg) 0 0 / 823px 1677px no-repeat;
}
.ph-island {
  position: absolute; left: 291px; top: 54px; width: 238px; height: 69px;
  border-radius: 100px; background: #000; pointer-events: none;
}
.ph-island img { position: absolute; left: 185px; top: 17px; width: 34px; height: 34px; border-radius: 30px; opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
  .devices { --open: 1; --in: 1; }
  .mb-lid, .ph, .mb-screen::after { transition: none; }
}

/* Pull quote — the rule carries it, no quotation-mark ornament */
.pull {
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: var(--rule) solid var(--accent);
  max-width: 60ch;
}
.dark .pull, .crimson .pull { border-left-color: var(--flare); }
.pull p {
  font-size: clamp(19px, 1.9vw, 27px); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em;
}
.pull cite {
  display: block; margin-top: 14px; font-style: normal;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim);
}
.dark .pull cite { color: var(--on-dark-dim); }
blockquote { margin: 0; }


/* --------------------------------------------------------------------------
   Map — MapLibre GL over OpenFreeMap's Positron style. The basemap is already
   monochrome, so no filter is applied; crimson belongs to the pin alone.
   -------------------------------------------------------------------------- */
.split-map { align-items: stretch; }
.mapwrap { position: relative; min-height: 440px; }
.map { position: absolute; inset: 0; background: var(--surface); }
.maplibregl-map { font-family: var(--font) !important; }
.maplibregl-ctrl-attrib {
  background: rgba(243,242,242,0.9) !important;
  font-size: 10px !important;
}
.maplibregl-ctrl-attrib a { color: var(--ink-dim) !important; }
.maplibregl-ctrl-group {
  border-radius: 0 !important; box-shadow: none !important;
  border: 1px solid var(--divider-soft) !important;
}
.maplibregl-ctrl-group button { border-radius: 0 !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--divider-soft) !important; }

/* A drawn teardrop, which reads as a map pin at a glance. */
.pin { line-height: 0; filter: drop-shadow(0 4px 8px rgba(32,30,29,0.35)); cursor: default; }
.pin svg path { fill: var(--accent); }
.pin svg circle { fill: var(--bg); }

/* The address card sits on the map, not in a popup */
.mapcard {
  position: absolute; z-index: 5; left: 20px; bottom: 32px;
  max-width: 280px; padding: 20px 22px;
  background: var(--bg); color: var(--ink);
  border-top: var(--rule) solid var(--accent);
  box-shadow: 0 12px 32px rgba(32,30,29,0.22);
}
.mapcard .label { color: var(--accent); }
.mapcard-addr { margin: 10px 0 6px; font-size: 17px; font-weight: 600; line-height: 1.35; }
.mapcard .small { color: var(--ink-dim); }
.mapcard .tlink { margin-top: 12px; color: var(--ink); background-image: linear-gradient(var(--accent), var(--accent)); }
.maphint {
  position: absolute; z-index: 5; right: 16px; top: 16px;
  padding: 7px 11px; background: rgba(243,242,242,0.92); color: var(--ink-dim);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  transition: opacity var(--dur-hover) var(--ease-soft);
}
.mapwrap[data-live='true'] .maphint { opacity: 0; }

@media (max-width: 900px) { .mapwrap { min-height: 380px; } }
@media (max-width: 520px) {
  .mapcard { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 16px 18px; }
}

/* The Riga guide's map: pins on one side, the same places as readable text on
   the other. The list carries the coordinates, so it is also the data source
   the pins are drawn from — the two cannot drift apart. */
.mapblock { display: grid; gap: clamp(24px, 3vw, 44px); }
.mapwrap-tall { min-height: min(72vh, 600px); }
@media (min-width: 901px) {
  .mapblock { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
  .mapwrap-tall { position: sticky; top: 108px; }
}

.placelist { list-style: none; margin: 0; padding: 0; counter-reset: place; }
.placelist > li {
  counter-increment: place;
  position: relative; padding: 22px 16px 22px 62px;
  border-top: 1px solid var(--divider-soft);
  transition: background var(--dur-hover) var(--ease-soft);
}
.placelist > li:last-child { border-bottom: 1px solid var(--divider-soft); }
.placelist > li::before {
  content: counter(place);
  position: absolute; left: 16px; top: 23px;
  width: 27px; height: 27px; display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .placelist-live > li:hover, .placelist > li.is-hot {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
  }
}
.placelist-live > li { cursor: pointer; }
.placelist > li[data-on] { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.placelist > li[data-on]::before { background: var(--ink); }
.placelist h3 { margin: 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; line-height: 1.25; }
.placelist-addr { margin: 5px 0 6px; color: var(--ink-dim); font-size: 14px; letter-spacing: 0.02em; }
.placelist .small { margin: 0; }

/* Numbered pins for that map. Same teardrop, number instead of the dot, so the
   pin and the list item share one identity. */
/* Numbered pins are square tiles with a point, not teardrops: where a place has
   a licensed photograph the tile carries it, and the two kinds still read as one
   set. No position property on .pin-n itself — it IS the marker element, and
   MapLibre's own .maplibregl-marker{position:absolute} is what places it.
   Overriding that makes the marker a full-width block whose translate(-50%)
   throws every pin half a container to the left. */
.pin-n {
  width: 44px; height: 50px; cursor: pointer;
  transition: width var(--dur-ui) var(--ease), height var(--dur-ui) var(--ease);
}
.pin-n img {
  display: block; width: 44px; height: 44px; box-sizing: border-box;
  object-fit: cover; border: var(--rule) solid var(--accent);
  transition: border-color var(--dur-hover) var(--ease-soft),
              width var(--dur-ui) var(--ease), height var(--dur-ui) var(--ease);
}
.pin-n b {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  transition: background var(--dur-hover) var(--ease-soft);
}
/* With a photo the number steps aside into the corner instead of covering it. */
.pin-photo b {
  left: auto; right: 0; top: auto; bottom: 6px;
  width: 19px; height: 19px; font-size: 11px;
}
.pin-n::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 6px solid var(--accent);
  transition: border-top-color var(--dur-hover) var(--ease-soft);
}
.pin-n.pin-hot b, .pin-n.pin-hot::after { --p: color-mix(in srgb, var(--accent) 74%, #000); }
.pin-n.pin-hot b { background: var(--p); }
.pin-n.pin-hot::after { border-top-color: var(--p); }
.pin-n.pin-hot img { border-color: var(--p); }
.pin-n.pin-on { z-index: 5; filter: drop-shadow(0 6px 12px rgba(32,30,29,0.45)); }
/* A selected photograph opens up: at 44px it is a texture, at 88px it is the
   place. MapLibre's anchor is a percentage translate on this element, so the
   pin stays pinned to its point as the box grows — only the children resize. */
.pin-photo.pin-on { width: 88px; height: 94px; }
.pin-photo.pin-on img { width: 88px; height: 88px; }
.pin-photo.pin-on b { width: 23px; height: 23px; font-size: 12px; }
.pin-n.pin-on b { background: var(--ink); }
.pin-n.pin-on::after { border-top-color: var(--ink); }
.pin-n.pin-on img { border-color: var(--ink); }

/* Pronunciation play buttons, injected by the script into the table. */
.sayit {
  appearance: none; margin-left: 10px; padding: 0;
  width: 24px; height: 24px; border-radius: 50%;
  /* middle, not a magic offset: the button has to sit on the same optical line
     as the respelling next to it whatever the row's font size does. */
  display: inline-grid; place-items: center; vertical-align: middle;
  cursor: pointer; background: transparent; color: var(--accent);
  border: var(--rule) solid currentColor;
  transition: background var(--dur-hover) var(--ease-soft), color var(--dur-hover) var(--ease-soft);
}
.sayit svg { fill: currentColor; margin-left: 2px; }
@media (hover: hover) and (pointer: fine) {
  .sayit:hover { background: var(--accent); color: var(--bg); }
}
.sayit-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot { position: relative; background: var(--dark); color: var(--on-dark); overflow: hidden; }
.foot-art { position: absolute; inset: 0; opacity: 0.20; }
/* The photograph is atmosphere, not a backdrop to read over. A scrim keeps the
   contact details and the nav legible wherever the architecture is busiest. */
.foot-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(32,30,29,0.55) 0%, rgba(32,30,29,0.30) 45%, rgba(32,30,29,0.70) 100%);
}
.foot-art img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.foot-in { position: relative; padding-block: clamp(56px, 7vw, 92px) 28px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr; } }
.foot h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-dim); margin-bottom: 16px; }
.foot nav { display: grid; gap: 10px; }
.foot nav a, .foot .contactlist a {
  color: var(--on-dark); text-decoration: none; font-size: 16px;
  width: fit-content;
  background-image: linear-gradient(var(--on-dark), var(--on-dark));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-2) var(--ease);
}
.foot nav a:hover, .foot .contactlist a:hover { background-size: 100% 1px; }
.contactlist { display: grid; gap: 10px; }
.socials { display: flex; gap: 10px; margin-top: 26px; }
.socials a {
  display: grid; place-items: center; width: 42px; height: 42px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-dark) 40%, transparent);
  transition: background var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.socials a:hover { background: var(--accent); }
.socials a:active { transform: scale(0.92); }
.socials img { width: 18px; height: 18px; }
.foot-base {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 26%, transparent);
  display: flex; justify-content: space-between; gap: var(--s6); flex-wrap: wrap;
  font-size: 14px; color: var(--on-dark-dim);
}
.foot-base a { color: var(--on-dark-dim); text-decoration: none; }
.foot-base a:hover { color: var(--on-dark); }


/* Scroll progress — a hairline that fills as the page is consumed */
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: var(--rule);
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  will-change: transform;
}

/* Submit states. The dots are the only looping motion on the site and they run
   only while a request is genuinely in flight. */
.btn[data-pending] { pointer-events: none; }
.btn[data-pending]::after {
  content: '…'; display: inline-block; width: 1.1em; text-align: left;
  animation: dots 1.1s steps(4, end) infinite;
}
@keyframes dots { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
.btn:disabled { opacity: 0.75; }

.form-status {
  display: block;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.form-status[data-state='ok'], .form-status[data-state='bad'] {
  animation: statusIn var(--dur-2) var(--ease);
}
.form-status[data-state='ok'] { color: var(--accent); font-weight: 600; }
.crimson .form-status[data-state='ok'], .dark .form-status[data-state='ok'] { color: var(--on-dark); }
.form-status[data-state='bad'] { color: var(--accent-700); font-weight: 600; }
.crimson .form-status[data-state='bad'], .dark .form-status[data-state='bad'] { color: var(--flare); }
@keyframes statusIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Inputs earn a mark of their own when focused, not just an outline swap */
.input:focus { box-shadow: inset 0 0 0 var(--rule) var(--accent); }
.field:focus-within > span { color: var(--accent); }
.dark .field:focus-within > span, .crimson .field:focus-within > span { color: var(--on-dark); }
.field > span { transition: color var(--dur-1) var(--ease); }

/* Images lift their contrast under a real cursor — restrained, not a zoom */
@media (hover: hover) and (pointer: fine) {
  .plate img, .case-mark { transition: transform var(--dur-3) var(--ease), filter var(--dur-2) var(--ease); }
  .svc:hover .plate img, .case:hover .plate img { transform: scale(1.03); }
}


/* --------------------------------------------------------------------------
   Page head, split — the deck's interior-page pattern: eyebrow and heading on
   a tinted band at the left, a photograph bleeding off the right edge at full
   band height. It gives every interior page the same opening beat.
   -------------------------------------------------------------------------- */
.pagehead-split {
  position: relative; background: var(--surface); overflow: clip;
  /* No padding on the section itself: the photograph has to reach the band's
     top and bottom edges. The text column carries the padding instead. */
  padding-block: 0;
}
.pagehead-split .wrap { padding-block: clamp(56px, 8vw, 116px); }
.pagehead-split .wrap { position: relative; z-index: 2; }
.pagehead-split h1 { max-width: 15ch; }
.pagehead-split .lede { max-width: 46ch; }
.pagehead-photo { overflow: hidden; }

/* `.wrap` and `.pagehead-in` are the same element, so capping its width also
   shrank the centred container and pushed the whole head inwards — the text
   started 120px right of every other section on the page. The head is a two
   column grid instead: the text column keeps the site's normal left edge, and
   the photograph owns its own column, so the two can never collide. */
@media (min-width: 901px) {
  .pagehead-split {
    display: grid; grid-template-columns: minmax(0, 1fr) 44%;
    /* stretch, not center — the photo column must fill the row's full height */
    align-items: stretch;
    column-gap: clamp(24px, 3vw, 56px);
  }
  .pagehead-split .wrap {
    grid-column: 1; max-width: none; margin-inline: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding-right: 0;
    padding-left: max(var(--gutter), calc((100vw - var(--measure)) / 2 + var(--gutter)));
  }
  .pagehead-photo {
    position: relative; grid-column: 2; width: auto; height: 100%;
  }
  .pagehead-photo::after { display: none; }
}
/* Stacked: the photograph runs the full width of the viewport, flush to the
   band's bottom edge, rather than sitting in a padded box. */
@media (max-width: 900px) {
  .pagehead-split .wrap { padding-bottom: clamp(32px, 6vw, 56px); }
  .pagehead-photo { margin-top: 0; height: clamp(220px, 46vw, 330px); }
}
.pagehead-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) contrast(1.06);
}
/* The photograph fades into the band rather than butting against the text. */
.pagehead-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--surface) 0%, rgba(234,233,233,0) 34%);
}
@media (max-width: 900px) {
  .pagehead-split .pagehead-in { max-width: none; }
  .pagehead-photo { position: relative; width: auto; height: clamp(200px, 42vw, 300px); margin-top: clamp(28px, 5vw, 44px); }
  .pagehead-photo::after { background: linear-gradient(180deg, var(--surface) 0%, rgba(234,233,233,0) 30%); }
}

/* Chevron markers — the deck marks the crimson band's list with a thin tick
   rather than a square. Drawn from borders, so it stays crisp at any size. */
.ticks-chev li { grid-template-columns: 18px minmax(0, 1fr); }
.ticks-chev li::before {
  width: 13px; height: 8px; margin-top: 7px; background: none;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); opacity: 0.85;
}
.crimson .ticks-chev li::before, .dark .ticks-chev li::before { background: none; }

/* Language chips read as filled crimson boxes in the deck, not outlines. */
.langs { box-shadow: none; gap: 4px; }
.langs a {
  background: var(--accent); color: var(--on-dark);
  padding: 7px 9px; font-size: 11px;
  transition: background var(--dur-hover) var(--ease-soft), opacity var(--dur-hover) var(--ease-soft);
}
.langs a:hover { background: var(--accent-600); color: var(--on-dark); }
.langs a[aria-current='true'] { background: var(--ink); }

/* --------------------------------------------------------------------------
   Footer, per the deck: a crimson-washed photograph, the wordmark large at the
   foot, plain glyph socials, and the strapline held in an L-bracket rule.
   The Pages and Riga-office columns are kept — the deck's footer carries no
   navigation, which is fine for a slide and poor for a seven-page site.
   -------------------------------------------------------------------------- */
.foot-art img { filter: grayscale(1) contrast(1.1) brightness(0.9); }
.foot-art::after {
  background: linear-gradient(180deg, rgba(154,30,39,0.82) 0%, rgba(122,24,31,0.88) 55%, rgba(94,18,24,0.94) 100%);
}
.foot { background: var(--accent-700); }
/* Several pages close on a crimson CTA band; without a rule the footer merges
   into it and the page appears to end twice. */
.foot { border-top: var(--rule) solid color-mix(in srgb, #f3f2f2 45%, transparent); }
.foot-sign {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(44px, 6vw, 84px);
}
.foot-sign .brand-foot { --u: clamp(1.3px, 0.16vw, 2.15px); }
/* On the crimson footer the flag's carmine bars are the ground itself, so only
   the white band is drawn — the treatment the design's own footer uses. */
.foot .brand-flag { background: transparent; }
.foot-strap {
  position: relative; padding: 14px 0 14px 22px;
  border-left: var(--rule) solid var(--on-dark);
  max-width: 40ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45;
  color: var(--on-dark);
}
.foot-strap::before {
  content: ''; position: absolute; left: 0; top: 0; width: clamp(120px, 18vw, 260px);
  height: var(--rule); background: var(--on-dark);
}
@media (max-width: 820px) {
  .foot-sign { grid-template-columns: 1fr; align-items: start; }
}
/* Socials as bare glyphs, larger, no boxed frame */
.socials a {
  width: auto; height: auto; box-shadow: none; padding: 0;
  opacity: 0.9;
}
.socials { gap: 20px; }
.socials img { width: 26px; height: 26px; }
.socials a:hover { background: none; opacity: 1; }

/* Reveal system: GSAP owns entrance motion; these remain for the line rules */
.obs { opacity: 0; transform: translateY(22px); }
.obs-rule { transform: scaleX(0); transform-origin: left; opacity: 1; }
.obs.in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.obs-rule.in { transform: scaleX(1); transition: transform var(--dur-4) var(--ease); }

/* Word masks for GSAP heading reveals. Inline-block so words still wrap and
   justify normally; the mask only clips the vertical travel. */
.wmask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wmask > span { display: inline-block; will-change: transform; }

/* Headline that arrives line by line behind a mask */
.linemask { display: block; overflow: hidden; }
.linemask > span { display: block; transform: translateY(105%); }
.in .linemask > span, .linemask.in > span {
  transform: none; transition: transform var(--dur-4) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* Cross-document page transition, where the browser supports it */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 260ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in 480ms var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* --------------------------------------------------------------------------
   Reduced motion — honour it completely, including the pinned stage
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
  .obs, .obs-rule { opacity: 1; transform: none; }
  .linemask > span { transform: none; }
  .stage-track { height: auto; }
  .stage { position: relative; height: auto; min-height: 0; padding-block: var(--band); }
  .stage-title { position: relative; inset: auto; opacity: 1; transform: none; padding-block: 0; }
  .stage-curtain, .stage-half, .stage-front, .scrollcue { display: none; }
  /* The statement carries the figures. Reduced motion removes the movement,
     never the content — so it becomes a plain crimson block underneath. */
  .stage-statement {
    position: static; translate: none; opacity: 1; visibility: visible;
    background: var(--accent); margin-top: var(--band);
    padding: var(--band) 0; width: 100%;
  }
  .stage-statement .statrow { opacity: 1; }
  @view-transition { navigation: none; }
}