/* Trade LG — version 4 "own identity".
   Plus Jakarta Sans, full-width white top bar, 10px radius + 1px lines (no shadows), duotone icons,
   21:9 media bands that wipe in on scroll, dark navy footer. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  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: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  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;
}
/* Arial tuned to Plus Jakarta Sans metrics (tools/font_fallback.py), so nothing jumps when the font arrives. */
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 106.05%;
  ascent-override: 97.88%;
  descent-override: 20.93%;
  line-gap-override: 0%;
}

:root {
  --bg: #f7f9fc;
  --panel: #ffffff;
  --line: #dde4ee;
  --line-strong: #c7d3e2;
  --ink: #0d1b2e;
  --text: #435064;
  --muted: #5a6779;
  --blue: #0f74d1;
  --blue-deep: #0a5eae;
  --blue-text: #0b64b8;
  --tint: #eaf2fc;
  --duo: #d4e6f9;
  --navy: #0a1a30;
  --navy-line: #22344f;
  --navy-text: #c3cfdf;
  --r: 10px;
  --r-btn: 6px;
  --bar-h: 76px;
  --gutter: 24px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --font: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + 20px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: var(--blue-text); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-deep); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; }
a.nowrap { white-space: nowrap; }

/* Sentence case on screen (e.g. "SINGLE SOLUTION" shows as "Single solution"); the text itself is untouched. */
.sent { text-transform: lowercase; }
.sent::first-letter { text-transform: uppercase; }
span.sent { display: block; }

.wrap {
  width: 100%;
  max-width: calc(1200px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------------ type */
.display {
  color: var(--ink);
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.h-page {
  color: var(--ink);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -.03em;
}
.h-sec {
  color: var(--ink);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
}
.lede {
  color: var(--text);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--blue-text);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--blue);
}

/* ------------------------------------------------------------------ icons */
.duo { width: 40px; height: 40px; flex: none; color: var(--blue); }
.duo-disc { fill: var(--duo); stroke: none; }
.arr { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }

/* ------------------------------------------------------------------ buttons */
.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.action--fill { background: var(--blue); color: #fff; }
.action--fill:hover { background: var(--blue-deep); color: #fff; }
.action--sm { min-height: 44px; padding: .55rem 1.1rem; font-size: .9375rem; }
.action--wide { width: 100%; }
.action:hover .arr, .arrowlink:hover .arr { transform: translateX(4px); }

.arrowlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}
.arrowlink .arr { color: var(--blue); }
.arrowlink:hover { color: var(--blue-deep); }

/* ------------------------------------------------------------------ top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: var(--bar-h);
}
.mark { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.mark-img { width: auto; height: 50px; }
.menu-list { display: flex; align-items: center; gap: 2rem; }
.menu-contact { display: none; }
.ulink {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: .9688rem;
  font-weight: 550;
  text-decoration: none;
}
.ulink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .3s var(--ease);
}
.ulink:hover, .ulink[aria-current="page"] { color: var(--ink); }
.ulink:hover::after, .ulink[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.burger { display: none; }

@media (max-width: 900px) {
  :root { --bar-h: 64px; }
  .topbar-in { gap: .75rem; }
  .mark-img { height: 42px; }
  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
  }
  .burger-lines, .burger-lines::before, .burger-lines::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform .25s var(--ease), background-color .2s;
  }
  .burger-lines { position: relative; }
  .burger-lines::before, .burger-lines::after { content: ""; position: absolute; left: 0; }
  .burger-lines::before { top: -6px; }
  .burger-lines::after { top: 6px; }
  .menu-open .burger-lines { background: transparent; }
  .menu-open .burger-lines::before { transform: translateY(6px) rotate(45deg); }
  .menu-open .burger-lines::after { transform: translateY(-6px) rotate(-45deg); }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .3s var(--ease), visibility 0s linear .3s;
  }
  .menu-open .menu { visibility: visible; clip-path: inset(0); transition: clip-path .3s var(--ease); }
  .menu-list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1rem; }
  .menu-list li + li { border-top: 1px solid var(--line); }
  .ulink { width: 100%; min-height: 52px; font-size: 1.0625rem; }
  .ulink::after { bottom: 10px; right: auto; width: 32px; }
}
@media (max-width: 380px) {
  .topbar-cta { padding-inline: .8rem; }
}

/* ------------------------------------------------------------------ frames (rounded media) */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: #dfe7f1;
  aspect-ratio: 21 / 9;
}
.frame img, .frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame--high img { object-position: 50% 30%; }
.frame--portrait { aspect-ratio: 4 / 3; }
.frame--portrait img { object-position: 50% 18%; }
.cinema-video { opacity: 0; transition: opacity .8s var(--ease); }
.cinema-video.playing { opacity: 1; }
@media (max-width: 700px) { .frame { aspect-ratio: 16 / 10; } }

/* Signature motion: images wipe in (left to right) as they scroll into view. */
[data-motion] .wipe {
  clip-path: inset(0 100% 0 0 round var(--r));
  transition: clip-path 1.1s var(--ease);
}
[data-motion] .wipe img { transform: scale(1.08); transition: transform 1.4s var(--ease); }
[data-motion] .wipe[data-in] { clip-path: inset(0 0 0 0 round var(--r)); }
[data-motion] .wipe[data-in] img { transform: none; }
[data-motion] .rise { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-motion] .rise[data-in] { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ sections */
.zone { padding-block: clamp(4rem, 8vw, 7rem); }
.zone--snug { padding-top: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }

/* Home: opening. Text on the left; on the right a collage: the city video, a portrait cut into its corner,
   and the three service icons on small tiles. The portrait wipes in and the tiles float gently. */
.opening {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
}
.opening::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18%;
  right: -12%;
  width: min(62vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--duo), transparent);
  opacity: .7;
  pointer-events: none;
}
.opening-grid {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
.opening-copy { max-width: 560px; }
.opening .display { margin-top: 1.25rem; }
.opening .lede { max-width: 520px; margin-top: 1.5rem; }
.opening-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.75rem;
  margin-top: 2.25rem;
}

.stage { position: relative; aspect-ratio: 1 / .92; }
.stage .frame { position: absolute; }
.stage-main { top: 0; right: 0; width: 80%; height: 84%; aspect-ratio: auto; }
.stage-side {
  left: 0;
  bottom: 0;
  width: 38%;
  aspect-ratio: 4 / 5;
  border: 6px solid var(--bg);
  border-radius: calc(var(--r) + 6px);
}
.stage-dots {
  position: absolute;
  top: -4%;
  left: 2%;
  width: 36%;
  aspect-ratio: 1.25;
  background-image: radial-gradient(var(--line-strong) 1.5px, transparent 1.75px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent);
  mask-image: radial-gradient(closest-side, #000 40%, transparent);
}
.stage-tile {
  position: absolute;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.stage-tile .duo { width: 34px; height: 34px; }
.stage-tile--a { top: 10%; left: 12%; }
.stage-tile--b { top: 52%; right: 0; }
.stage-tile--c { bottom: 5%; left: 45%; }

@media (prefers-reduced-motion: no-preference) {
  .stage-main img { animation: settle 1.3s var(--ease) both; }
  .stage-side { animation: unveil 1.1s .2s var(--ease) both; }
  .stage-tile { animation: arrive .6s var(--ease) both, bob 6s ease-in-out infinite alternate; }
  .stage-tile--a { animation-delay: .5s, 1.1s; }
  .stage-tile--b { animation-delay: .65s, 2.4s; }
  .stage-tile--c { animation-delay: .8s, 3.6s; }
}
@keyframes settle { from { transform: scale(1.08); } }
@keyframes unveil { from { clip-path: inset(0 100% 0 0 round var(--r)); } to { clip-path: inset(0 0 0 0 round var(--r)); } }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } }
@keyframes bob { to { transform: translateY(-10px); } }

@media (max-width: 900px) {
  .opening-grid { grid-template-columns: minmax(0, 1fr); }
  .opening-copy { max-width: 640px; }
  .stage { width: 100%; max-width: 640px; }
}
@media (max-width: 560px) {
  .stage-side { border-width: 4px; border-radius: calc(var(--r) + 4px); }
  .stage-tile { width: 52px; height: 52px; }
  .stage-tile .duo { width: 28px; height: 28px; }
}

/* Home: sticky title + scrolling service cards */
.pin-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.pin-sticky { position: sticky; top: calc(var(--bar-h) + 2.5rem); }
.pin-sticky .frame { margin-top: 2rem; }
.pin-main { display: grid; gap: 1.25rem; }
.offer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .25s var(--ease);
}
.offer:hover { border-color: var(--line-strong); }
.offer .duo { width: 48px; height: 48px; }
.offer-title { color: var(--ink); font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.offer p { margin-top: .6rem; }
@media (min-width: 901px) { .offer { min-height: 15rem; align-content: center; } }
@media (max-width: 900px) {
  .pin-split { grid-template-columns: 1fr; }
  .pin-sticky { position: static; }
}
@media (max-width: 520px) { .offer { grid-template-columns: 1fr; gap: 1rem; } }

/* Inner pages: intro + band */
.intro { padding-block: clamp(3.25rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.intro-grid--solo { grid-template-columns: 1fr; }
.lede--side { padding-bottom: .35rem; }
@media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; } }

/* About */
.quote {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.75rem;
  max-width: 960px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-left: 3px solid var(--blue);
}
.quote .duo { width: 56px; height: 56px; }
.quote p { color: var(--ink); font-size: clamp(1.1875rem, 2.1vw, 1.5rem); font-weight: 500; line-height: 1.55; letter-spacing: -.01em; }
@media (max-width: 600px) { .quote { grid-template-columns: 1fr; } }

/* Media: icon marquee + grid */
.ticker {
  margin-block: clamp(2.5rem, 5vw, 4rem);
  padding-block: 1.25rem;
  overflow: hidden;
  background: #fff;
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker-track { display: flex; width: max-content; }
.ticker-track li {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-right: 3.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: drift 48s linear infinite; }
  .ticker:hover .ticker-track, .ticker.paused .ticker-track { animation-play-state: paused; }
}
@keyframes drift { to { transform: translateX(-50%); } }

.chans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.chan {
  padding: 2rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .25s var(--ease);
}
.chan:hover { border-color: var(--line-strong); }
.chan-title { margin-top: 1.25rem; color: var(--ink); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.chan p { margin-top: .5rem; font-size: 1rem; }
@media (max-width: 1000px) { .chans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .chans { grid-template-columns: 1fr; } .chan { padding: 1.5rem; } }

/* Solutions: numbered rows */
.rows { counter-reset: row; border-top: 1px solid var(--line-strong); }
.row {
  counter-increment: row;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 5fr) minmax(0, 6fr);
  gap: 1.5rem 2.5rem;
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-strong);
}
.row::before {
  content: counter(row, decimal-leading-zero);
  color: var(--blue);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.row-head { display: flex; align-items: center; gap: 1rem; }
.row-title { color: var(--ink); font-size: clamp(1.3125rem, 2.2vw, 1.625rem); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.row p { padding-top: .2rem; }
@media (max-width: 900px) {
  .row { grid-template-columns: 4rem minmax(0, 1fr); }
  .row p { grid-column: 2; }
}
@media (max-width: 520px) {
  .row { grid-template-columns: 1fr; gap: 1rem; }
  .row p { grid-column: auto; }
}

/* ------------------------------------------------------------------ contact */
.reach { padding-block: clamp(3.25rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6.5rem); }
.reach-in { max-width: calc(980px + 2 * var(--gutter)); }
.reach-head { text-align: center; }
.reach-head .h-page { margin-top: 1rem; }
.ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.way { padding: 1.75rem; }
.way + .way { border-left: 1px solid var(--line); }
.way-label {
  margin-top: 1rem;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.way address, .way-link { display: inline-block; margin-top: .35rem; color: var(--ink); font-weight: 600; }
.way-link { min-height: 44px; padding-block: .6rem; margin-top: 0; text-decoration: none; overflow-wrap: anywhere; }
.way-link:hover { color: var(--blue-deep); text-decoration: underline; }
.way address { padding-block: .35rem; }
@media (max-width: 760px) {
  .ways { grid-template-columns: 1fr; }
  .way + .way { border-left: 0; border-top: 1px solid var(--line); }
  .way { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1.25rem; }
  .way .duo { grid-row: span 2; }
  .way-label { margin-top: 0; }
}

.formbox { margin-top: 1.25rem; padding: clamp(1.5rem, 4vw, 2.75rem); }
.fl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.fl { position: relative; }
.fl--wide { grid-column: 1 / -1; }
.fl input, .fl textarea {
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 1.6rem 1rem .5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fl textarea { min-height: 160px; resize: vertical; padding-top: 1.85rem; }
.fl input:hover, .fl textarea:hover { border-color: #9fb1c7; }
.fl input:focus, .fl textarea:focus { outline: none; border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.fl label {
  position: absolute;
  left: 1rem;
  top: 1.1rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.4;
  pointer-events: none;
  transform-origin: left top;
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.fl input:focus + label, .fl input:not(:placeholder-shown) + label,
.fl textarea:focus + label, .fl textarea:not(:placeholder-shown) + label {
  transform: translateY(-.62rem) scale(.78);
  color: var(--blue-text);
  font-weight: 600;
}
.fl--req label::after { content: " *"; color: var(--blue-text); }
.fl input::placeholder, .fl textarea::placeholder { color: transparent; }
@media (max-width: 600px) { .fl-grid { grid-template-columns: 1fr; } }

.trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enquiry .action { margin-top: 1.25rem; }
.spinner { display: none; width: 18px; height: 18px; }
.enquiry[aria-busy="true"] .arr { display: none; }
.enquiry[aria-busy="true"] .spinner { display: block; animation: turn .8s linear infinite; }
.enquiry button:disabled { opacity: .75; cursor: progress; }
@keyframes turn { to { transform: rotate(360deg); } }

.notice { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--r-btn); }
.notice--error { border: 1px solid #e9b7b7; background: #fdf3f3; }
.notice--error p { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.notice--error a { display: inline-flex; align-items: center; min-height: 44px; color: #8f1f1f; font-weight: 600; }
.notice--done {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  background: var(--tint);
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
}
.notice--done:focus { outline: none; }
.done-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-btn);
  background: var(--blue);
  color: #fff;
}
.done-mark svg { width: 22px; height: 22px; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ legal pages: one centred reading column */
.legal { padding-block: clamp(3.25rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6.5rem); }
.reading { max-width: calc(760px + 2 * var(--gutter)); }
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--line-strong);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  padding: .45rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  background: #fff;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 550;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.chip:hover { border-color: var(--blue); background: var(--tint); color: var(--ink); }
.chip .numeral { color: var(--blue-text); font-weight: 700; }
.chip--listed::before { content: "1."; color: var(--blue-text); font-weight: 700; }
@media (max-width: 700px) {
  .jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .jump::-webkit-scrollbar { display: none; }
  .chip { flex: none; white-space: nowrap; }
}

.copy { color: var(--text); font-size: 1.0625rem; line-height: 1.75; }
.copy p { margin-top: 1.1rem; }
.copy a { overflow-wrap: anywhere; }
.copy h2 {
  margin-top: clamp(3rem, 6vw, 4.25rem);
  color: var(--ink);
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.copy .numeral, .listed > li::marker {
  color: var(--blue);
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.04em;
}
.copy .numeral { display: block; margin-bottom: .6rem; }
.listed { margin-top: clamp(3rem, 6vw, 4.25rem); padding: 0; list-style: decimal inside; }
.listed h2 { margin-top: .6rem; }
.stamp { color: var(--muted); font-size: .9375rem; }
.copy > :first-child { margin-top: 2.75rem; }

/* ------------------------------------------------------------------ 404 */
.lost { padding-block: clamp(5rem, 14vw, 10rem); text-align: center; }
.lost-code { color: var(--ink); font-size: clamp(5rem, 16vw, 9rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.lost .action { margin-top: 2rem; }
.lost .h-page { margin-bottom: 1.5rem; }
.lost-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }

/* ------------------------------------------------------------------ footer */
.base { margin-top: clamp(2rem, 4vw, 3rem); background: var(--navy); color: var(--navy-text); font-size: .9375rem; }
.pg-home .base, .pg-legal .base { margin-top: 0; }
.base-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 2.5rem;
  padding-block: clamp(3.5rem, 7vw, 5rem);
}
.base-logo {
  display: inline-flex;
  padding: .6rem .9rem;
  border-radius: var(--r);
  background: #fff;
}
.base-logo-img { width: auto; height: 48px; }
.base-brand p { margin-top: 1.25rem; max-width: 30ch; }
.base-links { display: grid; gap: .1rem; align-content: start; }
.base-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-weight: 550;
  text-decoration: none;
}
.base-links a:hover, .base-links a[aria-current="page"] { color: #fff; text-decoration: underline; }
.base-notes { display: grid; gap: 1rem; align-content: start; }
.base-notes a { color: #fff; }
.base-notes a:hover { color: #fff; }
.base a:focus-visible { outline-color: #fff; }
.base-end { padding-bottom: 1.5rem; font-size: .875rem; }
.base-end p { padding-top: 1.5rem; border-top: 1px solid var(--navy-line); }
@media (max-width: 1000px) { .base-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .base-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  body { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ------------------------------------------------------------------ landing entrance
   When a page opens: the bar fades in, the opening text rises in line by line and the kicker rule draws.
   CSS only and played once; the collage has its own motion (see "Home: opening"). */
@media (prefers-reduced-motion: no-preference) {
  .topbar-in { animation: tl-fade .5s var(--ease) both; }
  .opening-copy > *,
  .opening .display .ln,
  main > section:first-child :is(.kicker, .h-page, .lede, .jump, .lost-code) { animation: tl-rise .7s var(--ease) both; }
  .opening .display { animation: none; }
  .opening .display .ln:nth-child(1), main > section:first-child .h-page { animation-delay: .08s; }
  .opening .display .ln:nth-child(2) { animation-delay: .16s; }
  .opening .lede, main > section:first-child :is(.lede, .jump) { animation-delay: .26s; }
  .opening-actions { animation-delay: .34s; }
  main > section:first-child .kicker::before { transform-origin: left center; animation: tl-draw .6s .15s var(--ease) both; }
}
@keyframes tl-fade { from { opacity: 0; } }
@keyframes tl-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes tl-draw { from { transform: scaleX(0); } }