:root {
  /* AGL's own brand colours, taken from the existing site:
     navy rgba(5,41,66) and orange rgba(250,171,47). */
  --navy:#052942;
  --orange:#FAAB2F;

  --paper:#FFFFFF; --panel:#FFFFFF; --panel-alt:#F3F6F8;
  --ink:#052942; --ink-soft:#3E5C73; --ink-faint:#748C9E;
  --rule:#D6DFE6; --rule-soft:#E7EDF1;
  --accent:#FAAB2F;
  /* Darkened orange for text: #FAAB2F on white is ~1.9:1 and fails AA, so
     anything set in words uses this instead. */
  --accent-ink:#9A6206;
  --good:#1F6B45; --bad:#A3301F;
  --measure:66ch;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:19px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video { max-width:100%; height:auto; display:block; }
picture { display:contents; } /* WebP wrapper: the <img> lays out as if unwrapped */

/* skip link — P3 */
.skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#0B2333; padding:12px 18px;
  font-family:var(--f-mono); font-size:14px; font-weight:600;
}
.skip:focus { left:0; }

a { color:var(--ink); text-decoration-thickness:1px; text-underline-offset:3px;
    text-decoration-color:var(--accent); }
a:hover { color:var(--accent-ink); }
a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.wrap { max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }
.narrow { max-width:var(--measure); }

/* ---------------------------------------------------------------- masthead */
.masthead { border-bottom:1px solid var(--rule); background:var(--panel);
  position:sticky; top:0; z-index:20; }
.masthead__bar {
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-top:14px; padding-bottom:14px; flex-wrap:wrap;
}
/* AGL's own logo lockup, cropped from the brand artwork. Height drives size. */
.wordmark { display:block; text-decoration:none; line-height:0; }
.wordmark img { height:42px; width:auto; max-width:none; }
.foot__logo { height:34px; width:auto; max-width:none; margin:0 0 14px; }
.nav { display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.nav a {
  font-family:var(--f-display); font-weight:500; font-size:16px;
  text-decoration:none; padding:4px 0; border-bottom:2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color:var(--accent); }
/* Contact strip above the header. */
.topbar { background:var(--navy); color:#fff; font-family:var(--f-mono);
  font-size:13px; letter-spacing:.04em; }
.topbar__inner { display:flex; justify-content:space-between; align-items:center;
  gap:8px 20px; flex-wrap:wrap; padding-top:7px; padding-bottom:7px; }
.topbar__tag { color:rgba(255,255,255,.72); }
.topbar__links { display:flex; gap:20px; }
.topbar a { color:#fff; text-decoration:none; }
.topbar a:hover { text-decoration:underline; text-decoration-color:var(--orange); }

/* -------------------------------------------------------------------- hero */
.hero { padding:clamp(40px,7vw,84px) 0 clamp(28px,4vw,44px); }
/* ------------------------------------------------- video bands & parallax */
/* A full-bleed band of footage between sections. The parallax is CSS-only:
   the clip is oversized and driven by the scroll position through
   animation-timeline: view(), so there is no scroll handler and no JS. */
.vband { position:relative; overflow:hidden; background:var(--navy);
  min-height:clamp(240px,42vh,460px); display:grid; }
.vband__media { position:absolute; inset:0; overflow:hidden; }
.vband__media video, .vband__media img {
  position:absolute; left:0; width:100%;
  /* Oversized so there is room to travel without exposing an edge. */
  top:-18%; height:136%; object-fit:cover;
}
.vband__veil { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,41,66,.72) 0%, rgba(5,41,66,.55) 50%, rgba(5,41,66,.82) 100%); }
.vband__inner { position:relative; align-self:center;
  padding-top:clamp(36px,6vw,72px); padding-bottom:clamp(36px,6vw,72px); color:#fff; }
.vband h2 { font-family:var(--f-display); font-weight:700;
  font-size:clamp(25px,3.6vw,38px); line-height:1.1; letter-spacing:-.02em;
  margin:0 0 10px; max-width:20ch; color:#fff; text-wrap:balance; }
.vband p { color:#D7E2EA; max-width:var(--measure); margin:0 0 14px; }
.vband .kicker { color:var(--orange); }
.vband .btn { border-color:#fff; color:#fff; }
.vband .btn:hover { background:#fff; color:var(--navy); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vband__media video, .vband__media img {
      animation:parallax linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
  }
}
@keyframes parallax { from { transform:translateY(-9%); } to { transform:translateY(9%); } }

/* ------------------------------------------------------------- video hero */
.vhero { position:relative; overflow:hidden; background:var(--navy);
  background-image:url("/video/agl-hero-poster.jpg");
  background-size:cover; background-position:center; }
.vhero video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* Decorative footage sits behind text; the overlay below carries contrast. */
}
.vhero__veil {
  position:absolute; inset:0;
  background:linear-gradient(105deg,
    rgba(5,41,66,.93) 0%, rgba(5,41,66,.86) 42%, rgba(5,41,66,.55) 100%);
}
.vhero__inner { position:relative; padding-top:clamp(48px,8vw,104px); padding-bottom:clamp(36px,5vw,64px); }
.vhero, .vhero a { color:#fff; }
.vhero h1 { color:#fff; }
.vhero .kicker { color:var(--orange); }
.vhero .standfirst { color:#D7E2EA; }
.vhero .proof { border-color:rgba(255,255,255,.28); }
.vhero .proof__cell { background:rgba(5,41,66,.55); backdrop-filter:blur(2px);
  border-color:rgba(255,255,255,.22); }
.vhero .proof__cell b { color:#fff; }
.vhero .proof__cell span { color:#B9CBD8; }
.vhero .proof__note { color:#B9CBD8; }
.vhero .unverified { color:var(--orange); }
.vhero .btn { border-color:#fff; color:#fff; }
.vhero .btn:hover { background:#fff; color:var(--navy); }
.vhero .btn--primary { background:var(--orange); border-color:var(--orange); color:var(--navy); }
.vhero .btn--primary:hover { background:#fff; border-color:#fff; }

.figure { margin:26px 0 0; border:1px solid var(--rule); }
.figure img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.band { background:var(--panel-alt); border-bottom:1px solid var(--rule); }
.kicker {
  font-family:var(--f-mono); font-size:12.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink);
  margin:0 0 14px;
}
h1 {
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(34px,6.2vw,64px); line-height:1.02; letter-spacing:-.025em;
  margin:0 0 18px; text-wrap:balance; max-width:19ch;
}
.standfirst { font-size:clamp(19px,2.3vw,22px); color:var(--ink-soft);
  max-width:var(--measure); margin:0 0 24px; }

/* ------------------------------------------------------------ proof strip */
.proof {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
  margin:0 0 8px;
}
.proof__cell { background:var(--panel); padding:16px 18px 18px;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.proof__cell b {
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:clamp(26px,3.6vw,34px); line-height:1.02; letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.proof__cell span {
  display:block; font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  margin-top:7px; line-height:1.45;
}
.proof__note {
  font-family:var(--f-mono); font-size:12.5px; color:var(--ink-faint);
  margin:0 0 32px;
}
.unverified { color:var(--accent-ink); }

/* ------------------------------------------------------------ route cards */
.routes {
  display:grid; gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin:0 0 clamp(40px,6vw,72px);
}
@media (min-width:780px) { .routes { grid-template-columns:1fr 1fr; } }
.route {
  background:var(--panel); padding:26px 26px 28px; text-decoration:none;
  display:block; transition:background .12s ease;
}
.route:hover { background:var(--panel-alt); }
.route h2 {
  font-family:var(--f-display); font-weight:600; font-size:25px;
  margin:0 0 8px; letter-spacing:-.015em;
}
.route p { margin:0 0 14px; color:var(--ink-soft); font-size:17.5px; }
.route .go {
  font-family:var(--f-mono); font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink);
}

/* ---------------------------------------------------------------- sections */
main section { padding:clamp(34px,5vw,60px) 0; }
main section + section { border-top:1px solid var(--rule); }
h2.sec {
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(26px,3.6vw,36px); line-height:1.1; letter-spacing:-.02em;
  margin:0 0 8px; text-wrap:balance; max-width:30ch;
}
h3 { font-family:var(--f-display); font-weight:600; font-size:21.5px;
  margin:28px 0 8px; letter-spacing:-.012em; }
.lede { color:var(--ink-soft); max-width:var(--measure); margin:0 0 24px;
  font-size:20px; }
p { margin:0 0 16px; max-width:var(--measure); }
ul,ol { max-width:var(--measure); padding-left:1.15em; }
li { margin-bottom:6px; }
li::marker { color:var(--ink-faint); }

/* ------------------------------------------------------------------- cards */
/* Lines come from the items, so a part-filled last row ends cleanly rather
   than showing the background through its empty cells. */
.grid { display:grid; border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.grid > * { border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
@media (min-width:700px)  { .grid--2 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:700px)  { .grid--3 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .grid--3 { grid-template-columns:repeat(3,1fr); } }
.card { background:var(--panel); padding:22px 22px 24px; text-decoration:none;
  display:flex; flex-direction:column; }
a.card:hover { background:var(--panel-alt); }
.card__meta {
  font-family:var(--f-mono); font-size:12px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 9px;
}
.card h3 { font-family:var(--f-display); font-weight:600; font-size:20px;
  margin:0 0 8px; line-height:1.24; letter-spacing:-.01em; }
.card p { font-size:17px; color:var(--ink-soft); margin:0; }
.card__img { margin:-22px -22px 18px; border-bottom:1px solid var(--rule); }
.card__img img { width:100%; aspect-ratio:3/2; object-fit:cover; }

/* --------------------------------------------------------- before / after */
.ba { border:1px solid var(--rule); margin:0 0 20px; }
.ba__pair { display:grid; gap:1px; background:var(--rule); }
@media (min-width:640px) { .ba__pair { grid-template-columns:1fr 1fr; } }
.ba__side { background:var(--panel); position:relative; }
.ba__side:only-child { grid-column:1 / -1; }
.ba__side img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.ba__tag {
  position:absolute; top:10px; left:10px;
  font-family:var(--f-mono); font-size:11.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  background:var(--panel); color:var(--ink); padding:4px 9px;
  border:1px solid var(--rule);
}
.ba__caption { font-family:var(--f-mono); font-size:13px;
  color:var(--ink-soft); padding:11px 14px; border-top:1px solid var(--rule);
  background:var(--panel); }

/* ----------------------------------------------------------------- tiles */
.tiles { display:grid; border-top:1px solid var(--rule); border-left:1px solid var(--rule);
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.tiles > * { border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.tile { position:relative; display:block; background:var(--panel); overflow:hidden;
  text-decoration:none; }
.tile img { width:100%; aspect-ratio:1; object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.tile:hover img { transform:scale(1.05); }
.tile__cap { position:absolute; left:0; right:0; bottom:0; padding:22px 12px 9px;
  font-family:var(--f-mono); font-size:12px; line-height:1.4; color:#fff;
  background:linear-gradient(180deg, rgba(5,41,66,0) 0%, rgba(5,41,66,.88) 60%);
  opacity:0; transition:opacity .2s ease; }
.tile:hover .tile__cap, .tile:focus-visible .tile__cap { opacity:1; }

/* ------------------------------------------------------------- data table */
.data-wrap { overflow-x:auto; border:1px solid var(--rule); margin:0 0 22px; }
table.data { border-collapse:collapse; width:100%; min-width:420px;
  font-family:var(--f-mono); font-size:14px; }
table.data th {
  background:var(--panel-alt); text-align:left; font-weight:600; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  padding:10px 13px; border-bottom:1.5px solid var(--rule); white-space:nowrap;
}
table.data td { padding:11px 13px; border-bottom:1px solid var(--rule-soft);
  background:var(--panel); vertical-align:top; }
table.data tr:last-child td { border-bottom:0; }
table.data td b { font-family:var(--f-display); font-weight:600; font-size:16px; }
.ledger__note { display:block; font-family:var(--f-body); font-size:16px;
  color:var(--ink-soft); margin-top:3px; line-height:1.45; }
/* Studio credit: set exactly like the surrounding legal line. */
.foot .foot__credit a { font:inherit; letter-spacing:inherit; color:inherit;
  text-decoration:none; }
.foot .foot__credit a:hover { text-decoration:underline;
  text-decoration-color:var(--rule); }

/* ------------------------------------------------------------------ button */
.btn {
  display:inline-block; font-family:var(--f-mono); font-size:13px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border:1.5px solid var(--ink); color:var(--ink); background:transparent;
  padding:12px 20px; text-decoration:none; cursor:pointer;
  margin:0 10px 10px 0;
}
.btn:hover { background:var(--ink); color:var(--paper); }
.btn--primary { background:var(--accent); border-color:var(--accent);
  color:#0B2333; }
.btn--primary:hover { background:var(--accent-ink); border-color:var(--accent-ink);
  color:var(--paper); }

/* -------------------------------------------------------------- callout */
.callout { border-left:3px solid var(--accent); background:var(--panel-alt);
  padding:18px 22px; margin:0 0 22px; max-width:var(--measure); }
.callout > :last-child { margin-bottom:0; }
.callout h3 { margin-top:0; font-size:18px; }

/* ------------------------------------------------------------------- forms */
.field { margin:0 0 18px; max-width:var(--measure); }
.field label {
  display:block; font-family:var(--f-mono); font-size:12.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:6px;
}
.field .hint { font-family:var(--f-body); font-size:15.5px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ink-faint);
  display:block; margin-top:3px; }
.field input, .field select, .field textarea {
  width:100%; font-family:var(--f-body); font-size:18px; color:var(--ink);
  background:var(--panel); border:1px solid var(--rule); padding:11px 13px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent);
}
.field textarea { min-height:130px; resize:vertical; }
fieldset { border:1px solid var(--rule); padding:18px 20px 4px;
  margin:0 0 22px; max-width:var(--measure); }
legend { font-family:var(--f-mono); font-size:12.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  padding:0 8px; }
.radio-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.radio-row label {
  font-family:var(--f-mono); font-size:13px; letter-spacing:.06em;
  border:1px solid var(--rule); padding:10px 14px; cursor:pointer;
  background:var(--panel); text-transform:none;
}
.radio-row input { margin-right:7px; }
.radio-row input:checked + span { font-weight:600; }
.radio-row label:has(input:checked) { border-color:var(--accent);
  background:var(--panel-alt); }

/* ------------------------------------------------------------------ footer */
.foot { border-top:2px solid var(--ink); background:var(--panel);
  margin-top:clamp(40px,6vw,72px); }
.foot__cols { display:grid; gap:28px; padding:34px 0 26px; }
@media (min-width:760px) { .foot__cols { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .foot__cols { grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.foot h4 { font-family:var(--f-mono); font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 12px; }
.foot ul { list-style:none; padding:0; margin:0; }
.foot li { margin-bottom:7px; }
.foot a { font-size:17px; text-decoration:none; }
.foot a:hover { text-decoration:underline; }

/* accreditation lockup: mark + number + expiry, never floating logos */
/* Lines are drawn by the items, not by a background showing through gaps, so
   an incomplete last row ends cleanly instead of leaving grey empty cells. */
.accred { display:grid; margin:0 0 26px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.accred__item { background:var(--panel); padding:14px 16px;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.accred__item b { display:block; font-family:var(--f-display); font-weight:600;
  font-size:16px; }
.accred__item span { display:block; font-family:var(--f-mono); font-size:12px;
  color:var(--ink-faint); margin-top:5px; line-height:1.5; }
.foot__legal {
  border-top:1px solid var(--rule); padding:16px 0 26px;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.06em;
  color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:8px 24px;
  justify-content:space-between;
}

/* -------------------------------------------------------------- admin only */
.admin { font-family:var(--f-display); }
.admin body { font-size:17px; }
.admin-bar {
  background:var(--ink); color:var(--paper); padding:11px 0;
  font-family:var(--f-mono); font-size:13px;
}
.admin-bar .wrap { display:flex; justify-content:space-between;
  align-items:center; gap:18px; flex-wrap:wrap; }
.admin-bar a { color:var(--paper); text-decoration:none; margin-right:18px; }
.admin-bar a:hover { text-decoration:underline; }
.queue { border:1px solid var(--rule); margin:0 0 24px; }
.queue__head { background:var(--panel-alt); padding:12px 16px;
  border-bottom:1px solid var(--rule); font-family:var(--f-mono);
  font-size:12.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; display:flex; justify-content:space-between; }
.queue__row { padding:12px 16px; border-bottom:1px solid var(--rule-soft);
  background:var(--panel); display:flex; justify-content:space-between;
  gap:14px; flex-wrap:wrap; align-items:baseline; }
.queue__row:last-child { border-bottom:0; }
.queue__row .t { font-family:var(--f-body); font-size:17px; }
.queue__row .m { font-family:var(--f-mono); font-size:12.5px;
  color:var(--ink-faint); }
.pill { font-family:var(--f-mono); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 8px;
  border:1px solid var(--rule); white-space:nowrap; }
.pill--draft { color:var(--ink-faint); }
.pill--review { color:var(--accent-ink); border-color:var(--accent); }
.pill--live { color:var(--good); border-color:var(--good); }
.pill--warn { color:var(--bad); border-color:var(--bad); }
.empty { font-family:var(--f-mono); font-size:13.5px; color:var(--ink-faint);
  padding:16px; background:var(--panel); }

/* Nav disclosure. Desktop shows the full bar; small screens collapse it so the
   first viewport carries evidence rather than navigation. */
.nav-toggle { position:absolute; opacity:0; width:1px; height:1px; }
.nav-btn { display:none; }

/* Phones: the strip keeps only the number; logo and Menu share one row. */
@media (max-width:640px) {
  .topbar__tag, .topbar__email { display:none; }
  .topbar__inner { justify-content:flex-end; }
}
@media (max-width:430px) {
  .masthead .wordmark img { height:28px; }
}

/* The full menu needs about 1030px beside the logo; below that it collapses. */
@media (max-width:1140px) {
  .masthead__bar { gap:10px; padding-top:11px; padding-bottom:11px; }
  .wordmark img { height:36px; }

  .nav-btn {
    display:inline-block; cursor:pointer; order:2;
    font-family:var(--f-mono); font-size:12.5px; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase;
    border:1.5px solid var(--ink); padding:9px 14px;
  }
  .nav-toggle:focus-visible + .nav-btn { outline:2px solid var(--accent); outline-offset:2px; }
  .nav { display:none; order:4; width:100%; flex-direction:column; gap:0;
    align-items:stretch; border-top:1px solid var(--rule); margin-top:4px; }
  /* The open menu sits in the sticky header, so it scrolls within the screen
     rather than running off the bottom where it could never be reached. */
  .nav-toggle:checked ~ .nav {
    display:flex; flex-wrap:nowrap; max-height:calc(100vh - 84px); max-height:calc(100dvh - 84px);
    overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    padding-bottom:18px;
  }
  .nav a { padding:12px 0; border-bottom:1px solid var(--rule-soft);
    border-bottom-color:var(--rule-soft); font-size:17px; }
  .nav a:hover, .nav a[aria-current="page"] {
    border-bottom-color:var(--rule-soft); color:var(--accent-ink); }

}
@media (max-width:820px) {
  .wordmark img { height:32px; }
  h1 { font-size:clamp(28px,8.4vw,38px); }
  body { font-size:18px; }
}


/* --------------------------------------------------------------- motion */
/* Restraint reads as competence, so these are small: 10-14px of travel and a
   short fade. Everything here is switched off under reduced-motion. */

@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }

/* On-load entrance for the first screen only. */
.vhero .kicker,
.vhero h1,
.vhero .standfirst,
.vhero .proof,
.vhero .hero-actions { animation:rise .62s cubic-bezier(.22,.61,.36,1) backwards; }
.vhero h1            { animation-delay:.06s; }
.vhero .standfirst   { animation-delay:.13s; }
.vhero .proof        { animation-delay:.2s; }
.vhero .hero-actions { animation-delay:.27s; }
.vhero .proof__cell  { animation:fade .5s ease backwards; }
.vhero .proof__cell:nth-child(1){animation-delay:.26s}
.vhero .proof__cell:nth-child(2){animation-delay:.32s}
.vhero .proof__cell:nth-child(3){animation-delay:.38s}
.vhero .proof__cell:nth-child(4){animation-delay:.44s}
.vhero .proof__cell:nth-child(5){animation-delay:.5s}

/* Scroll-driven reveals. Guarded, so a browser without support simply shows
   the content — it never stays hidden. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main section > .sec,
    main section > .lede,
    .grid > .card,
    .routes > .route,
    .ba,
    .figure,
    .data-wrap,
    .queue { animation:rise .7s cubic-bezier(.22,.61,.36,1) both;
             animation-timeline:view(); animation-range:entry 0% entry 42%; }

    /* Cards stagger across the row rather than all at once. */
    .grid > .card:nth-child(2) { animation-range:entry 2% entry 46%; }
    .grid > .card:nth-child(3) { animation-range:entry 4% entry 50%; }
  }
}

/* Hover: slow, small, and only where something is actually clickable. */
.card__img img, .card__img { overflow:hidden; }
.card__img img { transition:transform .5s cubic-bezier(.22,.61,.36,1); }
a.card:hover .card__img img { transform:scale(1.035); }
a.card, .route { transition:background .18s ease, border-color .18s ease; }
.btn { transition:background .16s ease, color .16s ease, border-color .16s ease; }
.proof__cell { transition:background .2s ease; }
.nav a { transition:border-color .16s ease, color .16s ease; }

@media (prefers-reduced-motion: reduce) {
  .vhero video, .vband video { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* ------------------------------------------------------- marketing blocks */
/* Process: numbered like drawing sheets, joined by a rule. */
.steps { list-style:none; margin:0; padding:0; display:grid; max-width:none;
  border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
/* Two across on tablets, an odd last step spanning the row; on desktop the
   component sets --cols so every row is full: 5 across, or 3 × 2 for six. */
@media (min-width:700px) {
  .steps { grid-template-columns:repeat(2,1fr); }
  .steps > .step:last-child:nth-child(odd) { grid-column:1 / -1; }
}
@media (min-width:1100px) {
  .steps { grid-template-columns:repeat(var(--cols,3),1fr); }
  .steps > .step:last-child:nth-child(odd) { grid-column:auto; }
}
.step { position:relative; padding:24px 22px 26px; background:var(--panel);
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.step__n { display:flex; align-items:center; gap:10px; margin:0 0 16px;
  font-family:var(--f-mono); font-size:13px; font-weight:600; letter-spacing:.14em; color:var(--accent-ink); }
.step__n::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--orange),transparent); }
.step h3 { font-family:var(--f-display); font-weight:600; font-size:20px; line-height:1.25; margin:0 0 8px; }
.step p { font-size:17px; color:var(--ink-soft); margin:0; }

/* Why AGL: six claims, numbered, on the drawing-office grid. */
.why { display:grid; border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
@media (min-width:700px)  { .why { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .why { grid-template-columns:repeat(3,1fr); } }
.why__item { position:relative; padding:26px 24px 28px; background:var(--panel);
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.why__n { display:block; font-family:var(--f-display); font-weight:700; font-size:34px;
  line-height:1; color:var(--orange); margin:0 0 14px; letter-spacing:-.02em; }
.why__item h3 { font-family:var(--f-display); font-weight:600; font-size:20px; margin:0 0 8px; }
.why__item p { font-size:17px; color:var(--ink-soft); margin:0; }

/* Reviews: quotation cards. */
.reviews { display:grid; gap:18px; }
@media (min-width:900px) { .reviews { grid-template-columns:repeat(3,1fr); } }
.review { margin:0; padding:26px 24px 22px; background:var(--panel-alt);
  border:1px solid var(--rule); border-top:3px solid var(--orange); display:flex; flex-direction:column; }
.review blockquote { margin:0 0 18px; font-size:18px; line-height:1.55; color:var(--ink); flex:1; }
.review blockquote::before { content:'\201C'; display:block; font-family:var(--f-display);
  font-weight:700; font-size:48px; line-height:.8; color:var(--orange); margin:0 0 6px; }
.review figcaption b { display:block; font-family:var(--f-display); font-weight:600; font-size:16px; }
.review figcaption span { font-family:var(--f-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); }

/* Card and route details. */
.card__go { margin-top:auto; padding-top:16px; font-family:var(--f-mono); font-size:13px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); }
.route .kicker { margin-bottom:10px; }
ul.ticks--2 { max-width:none; }
@media (min-width:760px) { ul.ticks--2 { columns:2; column-gap:48px; }
  ul.ticks--2 li { break-inside:avoid; } }

/* Closing call to action: navy, full width, with the survey grid. */
.cta { position:relative; overflow:hidden; background:var(--navy); color:#fff;
  margin-top:clamp(40px,6vw,72px); }
.cta::before { content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70%);
          mask-image:linear-gradient(90deg,transparent 0,#000 70%); }
.cta__inner { position:relative; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:24px 48px;
  padding-top:clamp(44px,6vw,76px); padding-bottom:clamp(44px,6vw,76px); }
.cta .kicker { color:var(--orange); }
.cta h2 { font-family:var(--f-display); font-weight:700; font-size:clamp(28px,3.6vw,42px);
  line-height:1.1; letter-spacing:-.02em; color:#fff; margin:0 0 10px; max-width:22ch; }
.cta p { color:#D7E2EA; margin:0; max-width:54ch; }
.cta__actions { display:flex; flex-wrap:wrap; gap:12px; }
.cta .btn { border-color:#fff; color:#fff; }
.cta .btn:hover { background:#fff; color:var(--navy); }
.cta .btn--primary { background:var(--orange); border-color:var(--orange); color:var(--navy); }
main:has(> .cta:last-child) + .foot { margin-top:0; }

/* --------------------------------------------------------- global layout */
/* Text blocks two across, so wide screens are used rather than left half-empty. */
.blocks { display:grid; border-top:1px solid var(--rule); }
@media (min-width:900px) { .blocks { grid-template-columns:1fr 1fr; column-gap:56px; } }
.block { padding:26px 0 22px; border-bottom:1px solid var(--rule-soft); }
.block h3 { font-family:var(--f-display); font-weight:600; font-size:22px; line-height:1.25;
  margin:0 0 10px; }
.block h3::before { content:''; display:block; width:28px; height:2px; background:var(--orange);
  margin:0 0 14px; }
.block p { max-width:none; }

/* Two columns of related content. */
.split { display:grid; gap:24px; }
@media (min-width:980px) { .split { grid-template-columns:1fr 1fr; gap:64px; align-items:start; } }
.split p, .split ul { max-width:none; }

/* Forms: short fields in pairs, long ones across the full width. */
@media (min-width:760px) {
  form:has(> .field) { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; max-width:920px; }
  form:has(> .field) > * { grid-column:1 / -1; }
  form:has(> .field) > .field:not(:has(textarea)):not(:has(input[type=checkbox])) { grid-column:auto; }
  form .field { max-width:none; }
}

/* Plain page headers carry a faint elevation drawing in the space beside the
   words, with the dimension lines and orange marks of the brand. */
@media (min-width:1100px) {
  .hero:not(:has(.figure)) { position:relative; }
  .hero:not(:has(.figure))::after {
    content:''; position:absolute; right:0; top:50%; transform:translateY(-50%);
    width:410px; height:300px; pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 320' fill='none' stroke='%23052942' stroke-opacity='.3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 262H420'/%3E%3Cpath d='M78 262V132H300V262'/%3E%3Cpath d='M62 140L189 56L316 140'/%3E%3Cpath d='M252 96V70H274V110'/%3E%3Crect x='168' y='196' width='42' height='66'/%3E%3Crect x='102' y='150' width='48' height='34'/%3E%3Crect x='228' y='150' width='48' height='34'/%3E%3Crect x='102' y='206' width='48' height='36'/%3E%3Crect x='228' y='206' width='48' height='36'/%3E%3Cpath d='M300 196H384V262'/%3E%3Crect x='316' y='212' width='52' height='32'/%3E%3Cpath d='M78 292H384M78 285V299M384 285V299' stroke-opacity='.45'/%3E%3Cpath d='M44 132V262M37 132H51M37 262H51' stroke-opacity='.45'/%3E%3Cpath d='M126 150V184M252 150V184M126 206V242M252 206V242M342 212V244' stroke-opacity='.18'/%3E%3Ccircle cx='78' cy='292' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3Ccircle cx='384' cy='292' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3Ccircle cx='44' cy='132' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .hero:not(:has(.figure)) > * { max-width:min(var(--measure), calc(100% - 450px)); }
}

/* ------------------------------------------------------- document layout */
/* Articles, policies and legal pages: a reading column with a sticky side
   panel, so the page is balanced instead of one narrow column and a void. */
.doc__layout { display:grid; gap:34px; }
@media (min-width:980px) {
  .doc__layout { grid-template-columns:minmax(0,1fr) 300px; gap:64px; align-items:start; }
  .doc__side { position:sticky; top:110px; }
}
.doc__main { min-width:0; max-width:760px; }
.prose p, .prose li { font-size:19.5px; line-height:1.72; max-width:none; }
.prose ul, .prose ol { max-width:none; }
.prose h2.sec { max-width:none; font-size:clamp(25px,2.6vw,31px); margin:46px 0 14px; scroll-margin-top:120px; }
.prose h2.sec:first-child { margin-top:0; }
.prose h3 { font-family:var(--f-display); font-weight:600; font-size:21px; margin:28px 0 8px; }
.sources li { font-size:16px; line-height:1.5; margin:0 0 8px; color:var(--ink-soft); }
.doc__side { border:1px solid var(--rule); border-top:3px solid var(--navy); background:var(--panel);
  padding:20px 22px 22px; }
.doc__meta { margin:0 0 18px; }
.doc__meta > div { padding:9px 0; border-bottom:1px solid var(--rule-soft); }
.doc__meta dt, .doc__toc-title { font-family:var(--f-mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); margin:0; }
.doc__meta dd { margin:3px 0 0; font-family:var(--f-display); font-weight:600; font-size:16.5px; }
.doc__toc { margin:0 0 20px; }
.doc__toc-title { margin:0 0 8px; color:var(--accent-ink); font-weight:600; }
.doc__toc ol { list-style:none; margin:0; padding:0; max-width:none; }
.doc__toc li { margin:0; border-bottom:1px solid var(--rule-soft); }
.doc__toc a { display:block; padding:8px 0; font-family:var(--f-display); font-size:15.5px;
  line-height:1.35; text-decoration:none; }
.doc__toc a:hover { color:var(--accent-ink); }
.doc__cta p { font-size:16px; color:var(--ink-soft); margin:0 0 12px; }
.doc__cta .btn { display:block; text-align:center; }

/* Sections inside a document column sit close together, without dividers. */
.doc__main > section { padding:0 0 6px; }
main .doc__main > section + section { border-top:0; }
main .doc__main > section + section::before,
main .doc__main > section + section::after { display:none; }
.doc__main .part h2.sec { margin-top:40px; }
.doc__main .part:first-child h2.sec { margin-top:0; }

/* Projects without photography carry an elevation drawing of the building
   type instead, clearly an illustration, never passed off as the job. */
.drawing { aspect-ratio:3/2; background-color:var(--panel-alt);
  background-image:var(--drawing),
    linear-gradient(rgba(5,41,66,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,41,66,.05) 1px, transparent 1px);
  background-size:78% auto, 28px 28px, 28px 28px;
  background-position:center 58%, 0 0, 0 0; background-repeat:no-repeat, repeat, repeat; }
.drawing--social-housing { --drawing:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 300' fill='none' stroke='%23052942' stroke-opacity='.34' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 262H420'/%3E%3Cpath d='M122 262V62H330V262'/%3E%3Cpath d='M114 62H338'/%3E%3Crect x='140' y='80' width='30' height='28'/%3E%3Crect x='184' y='80' width='30' height='28'/%3E%3Crect x='228' y='80' width='30' height='28'/%3E%3Crect x='272' y='80' width='30' height='28'/%3E%3Crect x='140' y='124' width='30' height='28'/%3E%3Crect x='184' y='124' width='30' height='28'/%3E%3Crect x='228' y='124' width='30' height='28'/%3E%3Crect x='272' y='124' width='30' height='28'/%3E%3Crect x='140' y='168' width='30' height='28'/%3E%3Crect x='184' y='168' width='30' height='28'/%3E%3Crect x='228' y='168' width='30' height='28'/%3E%3Crect x='272' y='168' width='30' height='28'/%3E%3Crect x='140' y='214' width='30' height='28'/%3E%3Crect x='272' y='214' width='30' height='28'/%3E%3Cpath d='M205 262V212H247V262'/%3E%3Cpath d='M198 212H254'/%3E%3Cpath d='M122 284H330M122 277V291M330 277V291' stroke-opacity='.5'/%3E%3Cpath d='M98 62V262M91 62H105M91 262H105' stroke-opacity='.5'/%3E%3Ccircle cx='122' cy='284' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3Ccircle cx='330' cy='284' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3Ccircle cx='98' cy='62' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3C/svg%3E"); }
.drawing--residential { --drawing:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 300' fill='none' stroke='%23052942' stroke-opacity='.34' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 262H420'/%3E%3Cpath d='M78 262V132H300V262'/%3E%3Cpath d='M62 140L189 56L316 140'/%3E%3Cpath d='M252 96V70H274V110'/%3E%3Crect x='168' y='196' width='42' height='66'/%3E%3Crect x='102' y='150' width='48' height='34'/%3E%3Crect x='228' y='150' width='48' height='34'/%3E%3Crect x='102' y='206' width='48' height='36'/%3E%3Crect x='228' y='206' width='48' height='36'/%3E%3Cpath d='M300 196H384V262'/%3E%3Crect x='316' y='212' width='52' height='32'/%3E%3Cpath d='M78 284H384M78 277V291M384 277V291' stroke-opacity='.5'/%3E%3Cpath d='M44 132V262M37 132H51M37 262H51' stroke-opacity='.5'/%3E%3Ccircle cx='78' cy='284' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3Ccircle cx='384' cy='284' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3Ccircle cx='44' cy='132' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3C/svg%3E"); }
.drawing--commercial { --drawing:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 300' fill='none' stroke='%23052942' stroke-opacity='.34' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 262H420'/%3E%3Cpath d='M92 262V70H348V262'/%3E%3Crect x='112' y='88' width='62' height='38'/%3E%3Crect x='189' y='88' width='62' height='38'/%3E%3Crect x='266' y='88' width='62' height='38'/%3E%3Crect x='92' y='142' width='256' height='26'/%3E%3Cpath d='M104 168L116 184H324L336 168'/%3E%3Crect x='112' y='190' width='146' height='64'/%3E%3Cpath d='M185 190V254'/%3E%3Crect x='274' y='190' width='54' height='72'/%3E%3Cpath d='M92 284H348M92 277V291M348 277V291' stroke-opacity='.5'/%3E%3Cpath d='M68 70V262M61 70H75M61 262H75' stroke-opacity='.5'/%3E%3Ccircle cx='92' cy='284' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3Ccircle cx='348' cy='284' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3Ccircle cx='68' cy='70' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3C/svg%3E"); }
@media (min-width:1100px) {
  .hero--social-housing:not(:has(.figure))::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 300' fill='none' stroke='%23052942' stroke-opacity='.34' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 262H420'/%3E%3Cpath d='M122 262V62H330V262'/%3E%3Cpath d='M114 62H338'/%3E%3Crect x='140' y='80' width='30' height='28'/%3E%3Crect x='184' y='80' width='30' height='28'/%3E%3Crect x='228' y='80' width='30' height='28'/%3E%3Crect x='272' y='80' width='30' height='28'/%3E%3Crect x='140' y='124' width='30' height='28'/%3E%3Crect x='184' y='124' width='30' height='28'/%3E%3Crect x='228' y='124' width='30' height='28'/%3E%3Crect x='272' y='124' width='30' height='28'/%3E%3Crect x='140' y='168' width='30' height='28'/%3E%3Crect x='184' y='168' width='30' height='28'/%3E%3Crect x='228' y='168' width='30' height='28'/%3E%3Crect x='272' y='168' width='30' height='28'/%3E%3Crect x='140' y='214' width='30' height='28'/%3E%3Crect x='272' y='214' width='30' height='28'/%3E%3Cpath d='M205 262V212H247V262'/%3E%3Cpath d='M198 212H254'/%3E%3Cpath d='M122 284H330M122 277V291M330 277V291' stroke-opacity='.5'/%3E%3Cpath d='M98 62V262M91 62H105M91 262H105' stroke-opacity='.5'/%3E%3Ccircle cx='122' cy='284' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3Ccircle cx='330' cy='284' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3Ccircle cx='98' cy='62' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3C/svg%3E"); }
  .hero--commercial:not(:has(.figure))::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 300' fill='none' stroke='%23052942' stroke-opacity='.34' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 262H420'/%3E%3Cpath d='M92 262V70H348V262'/%3E%3Crect x='112' y='88' width='62' height='38'/%3E%3Crect x='189' y='88' width='62' height='38'/%3E%3Crect x='266' y='88' width='62' height='38'/%3E%3Crect x='92' y='142' width='256' height='26'/%3E%3Cpath d='M104 168L116 184H324L336 168'/%3E%3Crect x='112' y='190' width='146' height='64'/%3E%3Cpath d='M185 190V254'/%3E%3Crect x='274' y='190' width='54' height='72'/%3E%3Cpath d='M92 284H348M92 277V291M348 277V291' stroke-opacity='.5'/%3E%3Cpath d='M68 70V262M61 70H75M61 262H75' stroke-opacity='.5'/%3E%3Ccircle cx='92' cy='284' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3Ccircle cx='348' cy='284' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3Ccircle cx='68' cy='70' r='2.8' fill='%23FAAB2F' stroke='none'/%3E%3C/svg%3E"); }
}
.case__main { min-width:0; }

/* ------------------------------------------------------------ case study */
.case__layout { display:grid; gap:36px; }
@media (min-width:980px) {
  .case__layout { grid-template-columns:minmax(0,1fr) 320px; gap:56px; align-items:start; }
  .case__glance { position:sticky; top:110px; }
}
.case__lead { font-size:clamp(21px,2.3vw,25px); line-height:1.5; color:var(--ink);
  max-width:var(--measure); margin:4px 0 38px; }
.case__main h2.sec { margin-top:38px; }
ul.ticks { list-style:none; padding:0; margin:0 0 8px; max-width:var(--measure); }
ul.ticks li { position:relative; padding:12px 0 12px 32px; border-bottom:1px solid var(--rule-soft); }
ul.ticks li:last-child { border-bottom:0; }
ul.ticks li::before { content:''; position:absolute; left:0; top:25px; width:18px; height:2px;
  background:var(--orange); }
ul.ticks li::after { content:''; position:absolute; left:17px; top:21px; width:2px; height:10px;
  background:var(--orange); }
.case__result { font-size:clamp(19px,2vw,21px); line-height:1.55; max-width:var(--measure);
  margin:6px 0 0; padding:4px 0 4px 22px; border-left:3px solid var(--orange); }
.case__glance { border:1px solid var(--rule); border-top:3px solid var(--navy); background:var(--panel);
  padding:22px 22px 24px; }
.case__glance-title { font-family:var(--f-mono); font-size:12.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink); margin:0 0 14px; }
.case__glance dl { margin:0 0 20px; }
.case__glance dl > div { padding:10px 0; border-bottom:1px solid var(--rule-soft); }
.case__glance dt { font-family:var(--f-mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); }
.case__glance dd { margin:3px 0 0; font-family:var(--f-display); font-weight:600; font-size:17px; }
.case__glance .btn { display:block; text-align:center; }

/* ------------------------------------------------------------------- faq */
.faq__jump { display:flex; flex-wrap:wrap; gap:8px 20px; margin:22px 0 0;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
.faq__jump a { text-decoration:none; color:var(--accent-ink); }
.faq__jump a:hover { text-decoration:underline; }
.faq__list { max-width:860px; border-top:1px solid var(--rule); }
.faq__list details { border-bottom:1px solid var(--rule); }
.faq__list summary {
  list-style:none; cursor:pointer; display:flex; justify-content:space-between;
  align-items:baseline; gap:24px; padding:18px 0;
  font-family:var(--f-display); font-weight:600; font-size:19px; line-height:1.3;
}
.faq__list summary::-webkit-details-marker { display:none; }
.faq__list summary::after {
  content:'+'; flex:none; font-family:var(--f-mono); font-weight:500; font-size:22px;
  color:var(--accent-ink); line-height:1;
}
.faq__list details[open] summary::after { content:'−'; }
.faq__list summary:hover { color:var(--accent-ink); }
.faq__list summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.faq__list details p { margin:0 0 20px; max-width:var(--measure); color:var(--ink-soft); }

/* ---------------------------------------------------------- dropdown menu */
@media (min-width:1141px) {
  .nav__item { position:relative; display:flex; align-items:center; }
  .nav__item > .nav__top::after {
    content:''; display:inline-block; width:5px; height:5px; margin-left:7px;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:translateY(-3px) rotate(45deg); opacity:.5;
  }
  .nav__sub {
    position:absolute; top:calc(100% + 12px); left:-20px; z-index:30;
    min-width:250px; padding:8px 0; background:var(--panel);
    border:1px solid var(--rule); border-top:2px solid var(--orange);
    box-shadow:0 18px 40px rgba(5,41,66,.12);
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  }
  /* A bridge across the gap, so the pointer can travel into the panel. */
  .nav__sub::before { content:''; position:absolute; left:0; right:0; top:-14px; height:14px; }
  .nav__item:hover > .nav__sub,
  .nav__item:focus-within > .nav__sub {
    opacity:1; visibility:visible; transform:none; transition-delay:0s;
  }
  .nav__item:nth-last-child(-n+3) > .nav__sub { left:auto; right:-20px; }
  .nav .nav__sub a {
    display:block; padding:9px 20px; border-bottom:0; white-space:nowrap;
    font-size:15.5px;
  }
  .nav .nav__sub a:hover,
  .nav .nav__sub a:focus-visible { background:var(--panel-alt); color:var(--accent-ink); }
}
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; }
.nav__gtoggle, .nav__gbtn { display:none; }
/* Mobile menu: an accordion. Seven sections; each + opens that section's
   pages in one full-width column, two columns once there is room. */
@media (max-width:1140px) {
  .nav__item { display:grid; grid-template-columns:1fr auto; align-items:center;
    border-bottom:1px solid var(--rule-soft); }
  .nav .nav__item > .nav__top { border-bottom:0; }
  .nav__gtoggle { display:block; position:absolute; opacity:0; width:1px; height:1px; }
  .nav__gbtn { display:grid; place-items:center; width:44px; height:44px; cursor:pointer; }
  .nav__gbtn::before { content:'+'; font-family:var(--f-mono); font-size:24px; line-height:1;
    color:var(--accent-ink); }
  .nav__gtoggle:checked + .nav__gbtn::before { content:'\2212'; }
  .nav__gtoggle:focus-visible + .nav__gbtn { outline:2px solid var(--accent); outline-offset:-4px; }
  .nav .nav__sub {
    display:none; grid-column:1 / -1; grid-template-columns:1fr; gap:0 16px;
    padding:0 0 10px 14px; margin:0 0 6px 2px; border-left:2px solid var(--orange);
  }
  .nav__gtoggle:checked ~ .nav__sub { display:grid; }
  .nav .nav__sub a { padding:8px 0; font-size:15.5px; line-height:1.3; border-bottom:0;
    color:var(--ink-soft); }
}
@media (min-width:480px) and (max-width:1140px) {
  .nav .nav__sub { grid-template-columns:1fr 1fr; }
}


/* -------------------------------------------------------------- character */
/* A faint drawing-office grid in the margins. It fades out towards the middle
   of the screen, so the reading column itself stays clean. */
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(5,41,66,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,41,66,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.4) 20%,transparent 34%,transparent 66%,rgba(0,0,0,.4) 80%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.4) 20%,transparent 34%,transparent 66%,rgba(0,0,0,.4) 80%,#000 100%);
}

/* Section dividers read as dimension lines: a rule with a tick at each end. */
main section + section { position:relative; }
main section + section::before,
main section + section::after {
  content:''; position:absolute; top:-5px; width:1px; height:9px; background:var(--ink-faint);
  opacity:.45;
}
main section + section::before { left:0; }
main section + section::after { right:0; }

/* The two orange marks from the logo, set above each section heading. */
h2.sec::before {
  content:''; display:block; width:26px; height:10px; margin:0 0 14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10'%3E%3Ccircle cx='3.4' cy='6.6' r='3.1' fill='%23FAAB2F'/%3E%3Crect x='9' y='0.6' width='12.5' height='5.8' rx='2.9' fill='%23FAAB2F'/%3E%3C/svg%3E") no-repeat;
}

/* Footage carries a faint survey grid on its open side, away from the words. */
.vhero__veil::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(105deg,transparent 0,transparent 38%,#000 100%);
          mask-image:linear-gradient(105deg,transparent 0,transparent 38%,#000 100%);
}

/* A dot field in the footer's far corner, echoing the marks in the logo. */
.foot { position:relative; }
.foot::before {
  content:''; position:absolute; top:0; right:0; width:min(46%,520px); height:100%;
  pointer-events:none;
  background:radial-gradient(rgba(5,41,66,.13) 1.1px, transparent 1.5px) 0 0 / 16px 16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);
          mask-image:linear-gradient(90deg,transparent,#000 70%);
}
.foot > .wrap { position:relative; }

/* --------------------------------------------------------- scroll effects */
/* Driven by the scroll position itself, so there is no script. Guarded: a
   browser without support, or a visitor who prefers less motion, gets the
   still page, never a hidden one. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Reading progress along the foot of the header. */
    .masthead::after {
      content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
      background:var(--orange); transform-origin:0 50%; transform:scaleX(0);
      animation:agl-progress linear both; animation-timeline:scroll(root);
    }
    /* The header settles as the page moves. */
    .masthead { animation:agl-settle linear both; animation-timeline:scroll(root);
      animation-range:0 160px; }
    .wordmark img { transform-origin:0 50%; animation:agl-shrink linear both;
      animation-timeline:scroll(root); animation-range:0 160px; }
    /* Hero: the footage drifts closer while the words lift away. */
    .vhero video { animation:agl-drift linear both; animation-timeline:scroll(root);
      animation-range:0 100vh; }
    .vhero__inner { animation:agl-lift linear both; animation-timeline:scroll(root);
      animation-range:0 85vh; }
    /* Photographs unveil as they arrive. */
    .card__img, .figure, .ba__side, .tiles > .tile {
      animation:agl-unveil linear both; animation-timeline:view();
      animation-range:entry 0% cover 28%;
    }
  }
}
@keyframes agl-progress { to { transform:scaleX(1); } }
@keyframes agl-settle { to { box-shadow:0 8px 28px rgba(5,41,66,.1); } }
@keyframes agl-shrink { to { transform:scale(.86); } }
@keyframes agl-drift { to { transform:scale(1.12) translateY(3%); } }
@keyframes agl-lift { to { transform:translateY(-44px); opacity:.2; } }
@keyframes agl-unveil { from { clip-path:inset(12% 0 0 0); opacity:.25; } to { clip-path:inset(0); opacity:1; } }

/* ---------------------------------------------------------- cookie choice */
.consent { position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--navy); color:#fff;
  box-shadow:0 -8px 28px rgba(5,41,66,.18); border-top:3px solid var(--orange); }
.consent[hidden] { display:none; }
.consent__inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 28px; padding-top:16px; padding-bottom:16px; }
.consent p { margin:0; color:#D7E2EA; font-size:16px; max-width:70ch; }
.consent a { color:#fff; text-decoration-color:var(--orange); }
.consent__actions { display:flex; flex-wrap:wrap; gap:10px; }
.consent .btn { border-color:#fff; color:#fff; background:transparent; cursor:pointer; }
.consent .btn:hover { background:#fff; color:var(--navy); }
.consent .btn--primary { background:var(--orange); border-color:var(--orange); color:var(--navy); }

/* Printing never scrolls, so a scroll-driven reveal would print blank boxes. */
@media print {
  .consent, .vband, body::before, .foot::before, .vhero__veil::after, .masthead::after { display:none; }
  *, *::before, *::after {
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .vhero { background:none; }
  .vhero video, .vhero__veil { display:none; }
  .vhero, .vhero h1, .vhero .standfirst { color:#000; }
  .masthead { position:static; }
}