/* ============================================================================
   METRIC-MATCHED FONT FALLBACKS — 2026-09-01

   The three brand faces load from Google Fonts with display=swap, so the page
   first paints in a local fallback and then re-flows when the real face
   arrives. Measured in the browser with a canvas, Instrument Serif sets 26%
   narrower than Georgia at the same size: every headline re-wrapped on swap and
   the homepage scored 0.157 cumulative layout shift against a 0.1 budget.

   size-adjust scales the fallback to the same advance width, so the fallback
   occupies exactly the space the real face will take and the swap is invisible.
   Ratios are measured, not guessed — re-measure if a family is ever changed.
   ============================================================================ */
@font-face{
  font-family:"Instrument Serif Fallback";
  src:local("Georgia"),local("Times New Roman"),local("Times");
  size-adjust:73.58%;
  ascent-override:105%; descent-override:24%; line-gap-override:0%;
}
@font-face{
  font-family:"Manrope Fallback";
  src:local("Segoe UI"),local("Helvetica Neue"),local("Arial");
  size-adjust:103.08%;
  ascent-override:100%; descent-override:26%; line-gap-override:0%;
}
@font-face{
  font-family:"IBM Plex Mono Fallback";
  src:local("Consolas"),local("Menlo"),local("Courier New");
  size-adjust:76.02%;
  ascent-override:100%; descent-override:26%; line-gap-override:0%;
}

/* ==========================================================================
   Criteria America — Design Direction 3 "The Adjustment"
   Interaction language after greenlock.io: one persistent object that morphs
   through the scroll narrative, orbiting terminology, ghost display words,
   near-zero UI chrome, serif display over geometric sans.

   Brand palette unchanged: Criteria navy #164480, white, mist #F0F2F0.
   Type never below 18px — the audience is 55+.
   ========================================================================== */

@view-transition { navigation: auto; }   /* cross-document screen-to-screen motion */

:root{
  /* Verbatim from design-system/criteria-america/tokens.css.
     One accent only (brand navy). 18px body is an accessibility floor
     driven by the 55+ audience, not a stylistic choice. */
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --mist:#F0F2F0;

  --ink:#0B1A2E;
  --ink-2:#41536E;
  --muted:#8194AC;
  --line:rgba(11,26,46,.14);
  --line-2:rgba(11,26,46,.30);

  --navy:#164480;
  --navy-deep:#0B2450;
  --navy-ink:#08172F;
  --sky:#5B8FD4;
  --sky-pale:#DCE7F5;
  --attention:#A24A08;   /* AA on white and on --mist; see tokens.css */

  /* The house emphasis device — one italic serif word per headline — is a
     single semantic token, not a colour repeated at every call site. Default
     is navy, for the device on a light ground; any section on a dark ground
     (.hero, .page-hero, .lams) re-points it to sky once, and every italic
     word inside inherits correctly with no per-component rule to remember.
     This replaced four separate "i{ color:... }" declarations, one of which
     had drifted to navy on a dark hero and was silently dead — overridden by
     a later, correct rule. One declaration now; one place it can go wrong. */
  --emphasis:var(--navy);

  --shell:min(1340px,90vw);
  --serif:"Instrument Serif","Instrument Serif Fallback",Georgia,"Times New Roman",serif;
  --sans:"Manrope","Manrope Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--sans); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{ margin:0 0 .4em; color:var(--ink); font-weight:400; letter-spacing:-.02em; }
h1,h2{ font-family:var(--serif); line-height:.96; }
h1{ font-size:clamp(3.4rem,8vw,7.4rem); }
h2{ font-size:clamp(2.6rem,5.4vw,4.8rem); }
h3{ font-family:var(--sans); font-weight:700; font-size:1.12rem; line-height:1.3; letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }

.shell{ width:var(--shell); margin-inline:auto; }
.sec{ padding:clamp(6rem,13vh,10rem) 0; position:relative; }
.lede{ font-size:clamp(1.12rem,1.4vw,1.34rem); color:var(--ink-2); max-width:52ch; }
.muted{ color:var(--muted); }

.eyebrow{
  font-family:var(--mono);
  font-size:.68rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--navy); margin:0 0 1.6rem;
}

/* text link with the trailing turn-arrow */
.tlink{
  font-weight:700; font-size:1.05rem; color:var(--navy);
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 0;
  border-bottom:1px solid transparent; transition:border-color .4s var(--ease), gap .4s var(--ease);
}
.tlink::after{ content:"↳"; transition:transform .4s var(--ease); }
.tlink:hover{ border-bottom-color:var(--navy); gap:.85rem; }
.tlink:hover::after{ transform:translate(3px,3px); }

:focus-visible{ outline:2px solid var(--navy); outline-offset:5px; border-radius:3px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; z-index:400; background:var(--navy); color:#fff; padding:.9rem 1.3rem; }

.mock-flag{
  position:relative; z-index:70; background:var(--navy); color:#fff; text-align:center;
  font-size:.76rem; font-weight:700; letter-spacing:.05em; padding:.5rem 1rem;
}

/* ============================== header ============================== */
:root{ --header-h:206px; }
@media (max-width:1000px){ :root{ --header-h:124px; } }
.hdr{
  position:sticky; top:0; z-index:60; padding:1.1rem 0;
  background:rgba(255,255,255,.72); backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid transparent; transition:border-color .5s;
  /* Identical markup on every page, so it should hold still across a
     navigation rather than cross-fade with the rest of the document —
     the header is chrome, not content, and content is what should move. */
  view-transition-name:site-header;
}
/* Anchor-jump targets must clear the sticky header, or the heading lands
   hidden behind it — direct links and the scroll-spy hash both land here. */
#journey, #departments, #lams, #team, #news, #contact{ scroll-margin-top:var(--header-h); }
.hdr.stuck{ border-bottom-color:var(--line); }
.hdr-in{ display:flex; align-items:center; gap:2rem; }
.mark{ display:flex; align-items:center; gap:.75rem; view-transition-name:site-mark; }
.mark img{ height:170px; width:auto; }
.mark b{ font-family:var(--serif); font-size:1.15rem; color:var(--ink); font-weight:400; letter-spacing:-.01em; }

.nav{ margin-left:auto; display:flex; align-items:center; gap:.15rem; }
.nav a{
  font-size:.84rem; font-weight:600; color:var(--ink-2);
  padding:.6rem .85rem; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.35rem; height:1px;
  background:var(--navy); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
/* .nav a outranks .btn on specificity — restate the button colours */
.nav a.btn{ color:#fff; }
.nav a.btn::after{ display:none; }

.kbd{
  margin-left:.8rem; display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--line-2); padding:.42rem .7rem;
  font-size:.72rem; font-weight:700; color:var(--muted);
  background:transparent; cursor:pointer; transition:border-color .18s var(--ease), color .18s var(--ease);
}
.kbd:hover{ border-color:var(--navy); color:var(--navy); }
.kbd kbd{ font-family:var(--sans); font-size:.7rem; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--sans); font-size:.9rem; font-weight:700;
  padding:.85rem 1.5rem; border:1px solid var(--navy); background:var(--navy); color:#fff;
  cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover{ background:var(--navy-deep); border-color:var(--navy-deep); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--navy); }
.btn-ghost:hover{ background:var(--navy); color:#fff; }

/* ============================== language switcher ============================== */
.lang-switch{
  display:flex !important; gap:.25rem; align-items:center; margin:0 .8rem;
  border:1px solid var(--navy); border-radius:4px; padding:.35rem .4rem;
  background:#fff;
}
.lang-btn{
  font-family:var(--sans); font-size:.75rem; font-weight:700; letter-spacing:.06em;
  padding:.5rem .7rem; border:1px solid transparent; background:transparent; color:var(--navy);
  cursor:pointer; transition:all .18s var(--ease);
  border-radius:3px; min-width:2.5rem; text-align:center; display:inline-block !important;
}
.lang-btn:hover{ background:rgba(22,68,128,.1); border-color:var(--navy); }
.lang-btn.active{
  background:var(--navy); color:#fff; border-color:var(--navy); font-weight:800;
}

@media (min-width:1001px){
  .lang-switch{ display:flex !important; }
}

/* ============================== hero ============================== */
.hero{ position:relative; min-height:calc(100svh - 76px); display:grid; align-items:center; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.hero h1{ view-transition-name:page-title; }
.hero .lede{ margin-top:1.8rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; margin-top:2.6rem; }

/* the persistent morphing object */
.stage{ position:relative; aspect-ratio:1; width:100%; }
#object{ width:100%; height:100%; display:block; }
.orbit{ position:absolute; inset:0; pointer-events:none; }
.orbit b{
  position:absolute; transform:translate(-50%,-50%);
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
  opacity:0; animation:orbIn .9s var(--ease) forwards;
}
@keyframes orbIn{ to{ opacity:1 } }

/* the ghost display word was removed: at warm-paper contrast it read as a
   rendering fault rather than a device, and it duplicated the network heading. */

/* ============================== scroll-revealed words ============================== */
.reveal-words span{ display:inline-block; opacity:.14; transition:opacity .5s var(--ease); }
.reveal-words span.lit{ opacity:1; }

/* ============================== claim journey (horizontal) ============================== */
.journey{ background:var(--navy-ink); color:#C6D6EC; padding:clamp(4rem,9vh,7rem) 0 0; }
.journey h2{ color:#fff; }
.journey .eyebrow{ color:var(--sky); }
/* Vertical ledger - no horizontal scrolling. A 55+ professional audience
   should never have to discover content by dragging sideways. */
.track{ margin-top:3rem; border-top:1px solid rgba(255,255,255,.18); }
.stage-card{
  display:grid; grid-template-columns:6rem 1fr 1.4fr; gap:2.4rem; align-items:baseline;
  padding:2.4rem .2rem; border-bottom:1px solid rgba(255,255,255,.18);
  transition:padding-left .5s var(--ease), background .5s var(--ease);
}
.stage-card:hover{ padding-left:1.4rem; background:rgba(255,255,255,.035); }
.stage-card .n{
  font-family:var(--serif); font-size:2.8rem; color:var(--sky); line-height:1; display:block;
}
.stage-card h3{ color:#fff; font-size:1.45rem; margin:0; }
.stage-card p{ color:#A9BEDA; font-size:1rem; margin:0; }
.journey-foot{ display:none; }
.journey-foot span{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#8FA4C0; }
.arrows{ display:flex; gap:.6rem; }
.arrows button{
  width:44px; height:44px; border:1px solid rgba(255,255,255,.28); background:transparent;
  color:#fff; cursor:pointer; font-size:1rem; transition:all .4s var(--ease);
}
.arrows button:hover{ background:#fff; color:var(--navy-ink); }

/* ============================== services list ============================== */
.svc{ border-top:1px solid var(--line); }
.svc a{
  display:grid; grid-template-columns:4.5rem 1fr auto; gap:2rem; align-items:center;
  padding:2rem .4rem; border-bottom:1px solid var(--line); position:relative;
  transition:padding-left .2s var(--ease), color .18s;
}
.svc a .n{ font-family:var(--serif); font-size:1.1rem; color:var(--muted); }
.svc a h3{ margin:0; font-size:clamp(1.2rem,2.2vw,1.9rem); font-family:var(--serif); font-weight:400; letter-spacing:-.02em; }
.svc a .go{ color:var(--navy); opacity:0; transform:translateX(-8px); transition:opacity .18s var(--ease), transform .18s var(--ease); }
.svc a:hover{ padding-left:1.6rem; }
.svc a:hover .go{ opacity:1; transform:none; }
.svc a::before{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--navy); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.svc a:hover::before{ transform:scaleX(1); }

/* ============================== network preview ============================== */
.net{ background:var(--mist); }
.net-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; }
.chips span{
  border:1px solid var(--line-2); padding:.5rem .9rem; font-size:.82rem; font-weight:600;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); cursor:default;
}
.chips span:hover{ background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-3px); }
.net img{ view-transition-name:net-visual; }

/* ============================== stats ============================== */
.figs{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.fig{ padding:2.8rem 1.4rem; border-left:1px solid var(--line); }
.fig:first-child{ border-left:0; }
.fig b{ font-family:var(--serif); font-size:clamp(2.8rem,5vw,4.4rem); color:var(--ink); display:block; line-height:1; font-weight:400; }
.fig span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ============================== CTA + footer ============================== */
.cta{ background:var(--navy); color:#D5E2F4; text-align:center; }
.cta h2{ color:#fff; max-width:17ch; margin-inline:auto; }
.cta .btn{ background:#fff; color:var(--navy); border-color:#fff; }
.cta .btn:hover{ background:var(--sky-pale); border-color:var(--sky-pale); color:var(--navy-deep); }

.ftr{ padding:4rem 0 2.4rem; font-size:.92rem; color:var(--muted); border-top:1px solid var(--line); }
.ftr-in{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.4rem; }
.ftr h4{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin:0 0 1rem; font-weight:500; }
.ftr a{ display:block; padding:.26rem 0; }
.ftr a:hover{ color:var(--navy); }
.ftr .btm{ margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; }
.tbc{ color:#B45309; }

/* ============================== command palette ============================== */
.cmdk{
  position:fixed; inset:0; z-index:300; display:none;
  background:rgba(11,26,46,.34); backdrop-filter:blur(6px);
  align-items:flex-start; justify-content:center; padding-top:14vh;
}
.cmdk[open]{ display:flex; }
.cmdk-box{
  width:min(620px,92vw); background:var(--surface); border:1px solid var(--ink);
  animation:pop .4s var(--ease);
}
@keyframes pop{ from{ opacity:0; transform:translateY(-14px) scale(.985) } }
.cmdk input{
  width:100%; border:0; border-bottom:1px solid var(--line); padding:1.4rem 1.6rem;
  font:inherit; font-size:1.1rem; color:var(--ink); outline:none; background:transparent;
}
.cmdk ul{ list-style:none; margin:0; padding:.5rem; max-height:52vh; overflow:auto; }
.cmdk li{
  padding:.9rem 1.1rem; display:flex; align-items:center; gap:.9rem;
  font-size:.98rem; cursor:pointer; color:var(--ink-2);
}
.cmdk li .t{ font-weight:700; color:var(--ink); }
.cmdk li .k{ margin-left:auto; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cmdk li[aria-selected="true"]{ background:var(--mist); }
.cmdk li[aria-selected="true"] .t{ color:var(--navy); }
.cmdk .empty{ padding:1.4rem 1.6rem; color:var(--muted); font-size:.95rem; }

/* ============================== custom cursor ============================== */
.cur-removed,.cur-dot-removed{
  position:fixed; top:0; left:0; z-index:350; pointer-events:none;
  border-radius:50%; mix-blend-mode:multiply;
}
.cur{ width:34px; height:34px; border:1px solid var(--navy); transition:width .35s var(--ease), height .35s var(--ease), background .35s; }
.cur-dot{ width:5px; height:5px; background:var(--navy); }
.cur.big{ width:62px; height:62px; background:rgba(22,68,128,.09); }
@media (hover:none),(pointer:coarse){ .cur-removed,.cur-dot-removed{ display:none } }

/* ============================== reveals ============================== */
/* Recalibrated 2026-09-01 — 26px read as a fade with barely any motion
   underneath it; a client watching the live page could not tell it was a
   transition at all rather than content simply being there. 40px is still a
   settle, not a slide, but it is now unambiguous motion at any scroll speed. */
.up{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.up.in{ opacity:1; transform:none; }
.js .up:not(.in){ opacity:0; transform:translateY(40px); }
/* Card-group children (department tiles, service rows, team, news — see the
   grouping logic in v3.js) get a slightly longer settle and a touch of scale
   on top of the same rise: cards have depth to signal arriving from, text
   doesn't. Kept to one shared device, not a second animation language — the
   distance and curve are the same --ease used everywhere else on the site,
   just given a beat more room. Applied together with .up, so a fifth card
   type added later inherits this automatically by using the same markup
   pattern (a repeated-child container) rather than a class to remember. */
/* Chained with .up for specificity — a later rule sets --duration-slow on
   plain .up, and this must win over that regardless of source order. */
.up.up-card{
  transform:translateY(56px) scale(.95);
  transition-duration:1.1s;
}
.up-card.in{ transform:none; }

/* Page-to-page transition, rebuilt 2026-09-01 — the previous version was a
   same-position opacity cross-dissolve and nothing else (duration tuned, no
   motion), which read as "boring and flat" because it was: nothing on
   screen actually moves in a plain cross-fade. This gives the whole page a
   felt settle — the outgoing screen recedes and fades, the incoming one
   arrives from a touch larger and settles into place — and gives the
   headline its own sequential beat (out, then in, not overlapped) so the
   one thing every visitor looks at first is the one place the transition is
   most deliberate. Still a still photograph and moving type, not a slide or
   a wipe — restrained, not staged. */
@keyframes vt-recede{
  from{ opacity:1; transform:scale(1); }
  to{ opacity:0; transform:scale(.965); }
}
@keyframes vt-settle{
  from{ opacity:0; transform:scale(1.035); }
  to{ opacity:1; transform:scale(1); }
}
::view-transition-old(root){ animation:vt-recede .5s var(--ease) both; }
::view-transition-new(root){ animation:vt-settle .65s var(--ease) both; }
::view-transition-old(hero-photo){ animation:vt-recede .5s var(--ease) both; }
::view-transition-new(hero-photo){ animation:vt-settle .65s var(--ease) both; }

@keyframes vt-title-out{
  from{ opacity:1; transform:translateY(0); }
  to{ opacity:0; transform:translateY(-18px); }
}
@keyframes vt-title-in{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
::view-transition-old(page-title){ animation:vt-title-out .3s var(--ease) both; }
::view-transition-new(page-title){ animation:vt-title-in .45s var(--ease) .18s both; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .up{ opacity:1 !important; transform:none !important; }
  .orbit b{ opacity:1 !important; }
  .reveal-words span{ opacity:1 !important; }
  @view-transition{ navigation:none; }
}

/* ============================== responsive ============================== */
@media (max-width:1000px){
  .hero-grid,.net-grid,.ftr-in{ grid-template-columns:1fr; }
  .stage-card{ grid-template-columns:4rem 1fr; gap:1rem 1.6rem; }
  .stage-card p{ grid-column:2; }
  .stage{ max-width:420px; margin-inline:auto; }
  .figs{ grid-template-columns:repeat(2,1fr); }
  .fig:nth-child(3){ border-left:0; }
  /* Superseded 2026-09-01. This hid the navigation below 1000px rather than
     condensing it, so a phone visitor had no way to reach any page but the
     one they landed on. The condensed panel now lives in the improvement
     layer at the end of this file. */
  .orbit b{ font-size:.6rem; }
}
@media (max-width:560px){
  body{ font-size:17px; }
  .figs{ grid-template-columns:1fr; }
  .fig{ border-left:0; border-top:1px solid var(--line); }
  .svc a{ grid-template-columns:2.5rem 1fr; }
  .stage-card{ grid-template-columns:3rem 1fr; gap:1rem 1.2rem; }
  .stage-card p{ grid-column:2; }
}

/* ============================== network map ==============================
   Panamá sits at the exact centre of the frame; every other office is
   plotted from its real coordinates, measured as an offset from the
   headquarters. Editorial treatment: hairlines, mono labels, no glow. */
.map-wrap{ position:relative; border:1px solid var(--line); background:var(--surface); }
#netmap{ display:block; width:100%; height:auto; }
#netmap .arc{
  fill:none; stroke:var(--navy); stroke-width:1.2; opacity:.34;
  transition:opacity .4s var(--ease), stroke-width .4s var(--ease);
}
#netmap .arc.live{ opacity:1; stroke-width:2; }
#netmap .node .dot{ fill:var(--navy); transition:fill .4s var(--ease), r .4s var(--ease); }
#netmap .node.hq .dot{ fill:var(--navy); }
#netmap .node .ring{ fill:none; stroke:var(--navy); stroke-width:1; opacity:.3; transition:opacity .4s var(--ease); }
#netmap .node.hq .ring{ opacity:.6; }
#netmap .node text{
  font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  fill:var(--ink-2); transition:fill .4s var(--ease);
}
#netmap .node.hq text{ fill:var(--navy); }
#netmap .node:hover .dot,#netmap .node:focus .dot{ fill:var(--navy); }
#netmap .node:hover text,#netmap .node:focus text{ fill:var(--ink); }
#netmap .node:hover .ring,#netmap .node:focus .ring{ opacity:.55; }
#netmap .node{ cursor:pointer; outline:none; }
#netmap .hit{ fill:transparent; }
#netmap .cross{ stroke:var(--line); stroke-width:1; stroke-dasharray:2 7; opacity:.7; }

.map-read{
  border-top:1px solid var(--line); padding:1.5rem 1.7rem;
  display:grid; grid-template-columns:auto 1fr; gap:.4rem 2rem; align-items:baseline;
}
.map-read .k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.map-read .v{ font-size:1rem; color:var(--ink); }
.map-read .v.name{ font-family:var(--serif); font-size:1.5rem; letter-spacing:-.02em; }
.map-read .v .tbc{ color:#B45309; font-size:.9rem; }
@media (max-width:700px){ .map-read{ grid-template-columns:1fr; gap:.2rem; } }

/* ============================== LAMS ==============================
   The product section. Dark, full-bleed, hard-edged: it should feel like
   a different object from the rest of the page - because it is a product,
   not a marketing section. */
.lams{ background:var(--navy-ink); color:#C6D6EC; border-top:var(--rule); --emphasis:var(--sky); }
.lams h2{ color:#fff; }
.lams .eyebrow{ color:var(--sky); }
.lams .lede{ color:#A9BEDA; }
.lams-grid{ display:grid; grid-template-columns:30% 70%; gap:0; margin-top:3rem; border-top:1px solid rgba(255,255,255,.28); }
.shot-tabs{ display:flex; flex-direction:column; border-right:1px solid rgba(255,255,255,.28); }
.shot-tabs button{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  text-align:left; padding:1.15rem 1.4rem 1.15rem 0; background:none; color:#8FA4C0;
  border:0; border-bottom:1px solid rgba(255,255,255,.18); cursor:pointer;
  transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.shot-tabs button:hover{ color:#fff; padding-left:.6rem; }
.shot-tabs button[aria-selected="true"]{ color:#fff; border-left:3px solid var(--sky); padding-left:1rem; }
.shot-frame{ padding:0 0 0 2.4rem; }
.shot-frame img{ width:100%; border:1px solid rgba(255,255,255,.28); display:block; }
.shot-cap{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#7D95B8; margin:.9rem 0 0; }
@media (max-width:1000px){
  .lams-grid{ grid-template-columns:1fr; }
  .shot-tabs{ flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid rgba(255,255,255,.28); }
  .shot-tabs button{ padding:.9rem 1rem; border-bottom:0; }
  .shot-frame{ padding:1.6rem 0 0; }
}


/* ===================== hero + network layout =====================
   Layout only. Type and colour come from the design system above. */
.hero-grid{ grid-template-columns:1.02fr .98fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.hero-copy{ padding:clamp(2rem,5vh,3.5rem) 0; }
.stage{ position:relative; aspect-ratio:1; width:100%; max-width:620px; margin-inline:auto; }
#object{ width:100%; height:100%; display:block; }
.state-line{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); border-top:1px solid var(--line); padding-top:.7rem; margin:.8rem 0 0;
}
.state-line b{ color:var(--navy); }
.net-grid{ grid-template-columns:1fr 1.15fr; gap:clamp(2rem,4vw,3.5rem); }



/* ---- LAMS auto-advance: progress bar per tab + pause control ---- */
.shot-tabs button{ position:relative; }
.shot-tabs button::after{
  content:""; position:absolute; left:0; bottom:-1px; height:2px;
  width:var(--p,0%); background:var(--sky); transition:width .1s linear;
}
.shot-tabs button[aria-selected="true"]::after{ background:var(--sky); }
.lams-toggle{
  margin-top:1.2rem; align-self:flex-start;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  background:transparent; color:#8FA4C0; border:1px solid rgba(255,255,255,.32);
  padding:.5rem .9rem; cursor:pointer;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.lams-toggle:hover{ color:#fff; border-color:#fff; }


/* ===================== hero: photography as atmosphere =====================
   Direction 1's treatment - the image sits behind the type, carrying warmth
   without becoming a slab of its own. */
.hero{ position:relative; overflow:hidden; background:var(--navy-ink); --emphasis:var(--sky); }
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.42; filter:saturate(.9);
  /* Every top-of-page photograph shares one name, so navigating between the
     home hero and any department hero — or between two department pages —
     cross-fades the photograph as its own layer instead of as part of a
     flat whole-page dissolve. Same box, same treatment, every page; the
     browser has nothing to reconcile but the pixels. */
  view-transition-name:hero-photo;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(8,23,47,.94) 0%, rgba(8,23,47,.78) 46%, rgba(8,23,47,.42) 100%);
}
.hero .shell{ position:relative; z-index:2; }
.hero h1{ color:#fff; }
.hero .eyebrow{ color:var(--sky); }
.hero .lede{ color:#C6D6EC; }
.hero .btn{ background:#fff; color:var(--navy); border-color:#fff; }
.hero .btn:hover{ background:var(--sky-pale); border-color:var(--sky-pale); }
.hero .tlink{ color:#fff; }
.hero .tlink:hover{ border-bottom-color:#fff; }
.hero .state-line{ color:#8FA4C0; border-top-color:rgba(255,255,255,.24); }
.hero .state-line b{ color:var(--sky); }
.orbit b{ color:#8FA4C0; }

/* ===================== network map (Direction 2 pattern) ===================== */
.map-stage{ position:relative; margin-top:clamp(2rem,5vh,3.5rem); }
#map{ width:100%; height:auto; display:block; }
#map .node{ cursor:pointer; outline:none; }
#map .node circle.hit{ fill:transparent; }
#map .node .dot{ fill:var(--navy); transition:r .3s var(--ease); }
#map .node .halo{ fill:var(--navy); opacity:.13; }
#map .node.hq .dot{ fill:var(--navy-ink); }
#map .node.hq .halo{ fill:var(--navy-ink); opacity:.14; }
#map .node:hover .dot,#map .node.on .dot,#map .node:focus .dot{ r:9; }
#map .node text{
  font-family:var(--mono); font-size:11px; fill:var(--muted); font-weight:500;
  letter-spacing:.12em; pointer-events:none; transition:fill .18s;
}
#map .node:hover text,#map .node.on text,#map .node:focus text{ fill:var(--ink); }
#map .arc{ fill:none; stroke:var(--navy); stroke-width:1; opacity:.3; }
#map .arc.live{ stroke:var(--navy-deep); opacity:1; stroke-width:1.6; }
/* The reading panel sits bottom-LEFT: the network's southern nodes
   (Argentina, Paraguay) fall in the bottom-right of the projection, so a
   right-hand panel occludes them. Checked by an overlap test, not by eye. */
.map-panel{
  position:absolute; left:0; bottom:0; width:min(320px,90%);
  background:var(--surface); border:1px solid var(--line); padding:1.3rem 1.4rem;
}
.map-panel .role{ font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--navy); margin:0; }
.map-panel h3{ margin:.35rem 0 .1rem; font-family:var(--serif); font-weight:400; font-size:1.5rem; letter-spacing:-.02em; }
.map-panel .who{ font-weight:700; color:var(--ink); font-size:1.05rem; margin:0; }
.map-panel p{ margin:.5rem 0 0; font-size:1rem; color:var(--ink-2); line-height:1.5; }
.map-panel .tbc{ color:var(--attention); }
@media (max-width:900px){
  /* The 1000x560 desktop frame would shrink every label and tap-target to
     nothing here, so v3.js redraws the map in a portrait 380x620 frame at
     this width (labels render close to their set size). The reading panel
     moves out from over the map to sit below it. */
  .map-panel{ position:static; width:auto; margin-top:1rem; }
}


/* ===================== contrast corrections =====================
   The design system reserves --muted for labels and states plainly that it
   must never carry sentences (3.1:1). These were doing exactly that, so they
   move to --text-secondary (7.8:1). Verified with a live contrast audit. */
.ftr{ color:var(--ink-2); }
.ftr a{ color:var(--ink-2); }
.ftr .btm{ color:var(--ink-2); }
.fig span{ color:var(--ink-2); }
.svc a .n{ color:var(--ink-2); }
.lams .tlink{ color:#fff; }
.lams .tlink:hover{ border-bottom-color:#fff; }
.shot-cap{ color:#A9BEDA; }
.map-panel p{ color:var(--ink-2); }
#map .node text{ fill:var(--ink-2); }
.state-line{ color:var(--ink-2); }


/* ===================== specialty feature band =====================
   Same atmospheric treatment as the hero: photograph behind, navy gradient
   over, type on top. Swap assets/img/aviation.jpg to change the picture -
   no CSS changes needed. */
.feature{ position:relative; overflow:hidden; background:var(--navy-ink); border:0; }
.feature > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.46; filter:saturate(.92);
}
.feature::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(75deg, rgba(8,23,47,.93) 0%, rgba(8,23,47,.72) 52%, rgba(8,23,47,.34) 100%);
}
.feature .shell{ position:relative; z-index:2; padding:clamp(4rem,11vh,7.5rem) 0; }
.feature .eyebrow{ color:var(--sky); }
.feature h2{ color:#fff; max-width:15ch; }
.feature .lede{ color:#C6D6EC; }
.feature .facts{
  display:grid; grid-template-columns:repeat(3,auto); gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(2rem,4vh,3rem); justify-content:start;
}
.feature .facts div b{
  display:block; font-family:var(--serif); font-weight:400; font-size:clamp(2rem,3.4vw,3rem);
  color:#fff; line-height:1;
}
.feature .facts div span{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:#9FB8D6;
}
@media (max-width:700px){ .feature .facts{ grid-template-columns:1fr; gap:1.4rem; } }

/* ===================== the twelve specialties =====================
   Progressive disclosure. Seven services are the primary decision; the twelve
   specialties are reference detail, so they start closed. Native <details> so
   it works with the keyboard and a screen reader without any JavaScript, and
   the control is a full-width 72px target rather than a small chevron. */
.spec{ border-bottom:1px solid var(--line); }
.spec summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:72px; padding:1.4rem .4rem;
  transition:padding-left .2s var(--ease);
}
.spec summary::-webkit-details-marker{ display:none; }
.spec summary:hover{ padding-left:1.2rem; }
.spec summary:focus-visible{ outline:2px solid var(--navy); outline-offset:4px; }
.spec-lead{ display:flex; flex-direction:column; gap:.25rem; }
.spec-lead b{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,3vw,2.6rem);
  color:var(--ink); letter-spacing:-.02em; line-height:1;
}
.spec-lead em{ font-style:normal; font-size:1.125rem; color:var(--ink-2); }

/* a plus that becomes a minus — the clearest possible open/closed signal */
.spec-cue{ position:relative; width:26px; height:26px; flex:0 0 26px; }
.spec-cue::before,.spec-cue::after{
  content:""; position:absolute; left:0; top:12px; width:26px; height:2px; background:var(--navy);
  transition:transform .2s var(--ease);
}
.spec-cue::after{ transform:rotate(90deg); }
.spec[open] .spec-cue::after{ transform:rotate(0deg); }

.spec-body{ overflow:hidden; }
.spec-grid{
  list-style:none; margin:0; padding:0 .4rem 2.4rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem 2.4rem;
}
.spec-grid li{ display:flex; flex-direction:column; gap:.2rem; padding-top:1rem; border-top:1px solid var(--line); }
.spec-grid b{ font-size:1.15rem; color:var(--ink); font-weight:700; }
/* 1.125rem = 18px against the 16px root: the design system's hard floor. */
.spec-grid span{ font-size:1.125rem; color:var(--ink-2); line-height:1.5; }
@media (max-width:900px){ .spec-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .spec-grid{ grid-template-columns:1fr; } }

/* ===================== team ===================== */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.2rem 2rem; margin-top:3rem; }
.person h3{ font-family:var(--serif); font-weight:400; font-size:1.3rem; margin:1rem 0 .2rem; letter-spacing:-.02em; }
.person .role{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .7rem; }
.person .hq-tag{ background:var(--navy); color:#fff; padding:.12rem .4rem; letter-spacing:.12em; margin-left:.3rem; }
.person .bio{ font-size:1rem; color:var(--ink-2); line-height:1.5; margin:0; }
.person .tbc{ color:var(--attention); }
.portrait{
  aspect-ratio:4/5; border:1px solid var(--line);
  width:100%; height:auto;
}
.person > .portrait{
  object-fit:cover; display:block;
}
.person > img[alt*="Emilio"]{ object-position:center; }
.person > img[alt*="Lisbeth"]{ object-position:center top; }
div.portrait{
  background:var(--mist);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.note-tbc{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--attention); margin-top:2rem; }
@media (max-width:1100px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:800px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .team-grid{ grid-template-columns:1fr; } }

/* ===================== news ===================== */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:3rem; border-top:1px solid var(--line); }
.news-item{ padding:2rem 1.8rem 2rem 0; border-right:1px solid var(--line); }
.news-item:last-child{ border-right:0; }
.news-item .date{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--attention); margin:0 0 .8rem; }
.news-item h3{ font-family:var(--serif); font-weight:400; font-size:1.45rem; letter-spacing:-.02em; margin:0 0 .7rem; }
.news-item p{ font-size:1.05rem; color:var(--ink-2); line-height:1.55; margin:0; }
@media (max-width:900px){
  .news-grid{ grid-template-columns:1fr; }
  .news-item{ border-right:0; border-bottom:1px solid var(--line); padding-right:0; }
}

/* ===================== worldwide centre ===================== */
.worldwide{
  display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap;
  border-top:1px solid var(--line); margin-top:2.4rem; padding-top:1.6rem;
}
.worldwide .k{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--navy); }
.worldwide .v{ font-family:var(--serif); font-size:1.5rem; letter-spacing:-.02em; color:var(--ink); }
.worldwide .d{ font-size:1rem; color:var(--ink-2); }

/* ============================================================
   Practices — three tiles replacing the ten-specialty list.
   Client review 2026-08-31. Each tile links to a detail page.
   ============================================================ */
.prac{
  margin-top:4rem;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.prac-tile{
  position:relative; display:flex; flex-direction:column; gap:.9rem;
  padding:2.6rem 2rem 2.8rem;
  border-left:1px solid var(--line); border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit;
  transition:background .22s var(--ease);
}
.prac-tile:first-child{ border-left:0; }
.prac-tile::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:var(--navy); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.prac-tile:hover::before,
.prac-tile:focus-visible::before{ transform:scaleX(1); }
.prac-tile:hover{ background:var(--mist); }
.prac-tile:focus-visible{ outline:2px solid var(--navy); outline-offset:-4px; }
.prac-k{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.prac-tile h3{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2.1rem); letter-spacing:-.02em;
  line-height:1.1; color:var(--ink);
}
.prac-tile p{
  margin:0; font-size:.95rem; line-height:1.6; color:var(--ink-2);
  max-width:34ch;
}
.prac-tile .go{
  margin-top:auto; padding-top:1.2rem;
  color:var(--navy); font-size:1.1rem;
  opacity:0; transform:translateX(-8px);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.prac-tile:hover .go,
.prac-tile:focus-visible .go{ opacity:1; transform:none; }

/* Hero without the constellation: the photograph carries it alone. */
.stage-still{ min-height:0; }

@media (max-width:900px){
  .prac{ grid-template-columns:1fr; }
  .prac-tile{ border-left:0; }
}
@media (prefers-reduced-motion:reduce){
  .prac-tile,.prac-tile::before,.prac-tile .go{ transition:none; }
}

/* LAMS reduced to a positioning statement — no product screens.
   Client review 2026-08-31: "no advertising LAMS". */
.lams-statement{
  margin:2.4rem 0 0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.25; letter-spacing:-.02em;
  color:#fff; max-width:24ch;
}

/* ============================================================
   Classic hero — constellation removed, 2026-08-31.
   One column over the photograph: eyebrow, serif headline, lede,
   a single action, and a restrained credibility line. The image
   carries the atmosphere; nothing moves.
   ============================================================ */
.hero-classic{
  grid-template-columns:1fr;
  align-items:end;
  padding-bottom:clamp(3rem,7vh,6rem);
}
.hero-classic .hero-copy{ max-width:62ch; }
.hero-classic .lede{ max-width:54ch; }

/* Client review, 2026-09-01: the right side of the hero read as empty once
   the constellation went. Restoring a second column — for the department
   mosaic below, not for the old photo-behind-type treatment — so the empty
   space becomes deliberate composition instead of leftover grid track. Scoped
   to :has() rather than edited into the rule above, so a future hero with no
   mosaic still gets the single, bottom-aligned column this section documents.
   Guarded to the same min-width the responsive collapse below uses — without
   it this unconditionally beat the max-width:1000px collapse rule (a plain
   selector loses to :has() regardless of source order) and squeezed both
   columns into one at phone width. */
@media (min-width:1001px){
  .hero-classic:has(.hero-mosaic){
    grid-template-columns:1.08fr .92fr;
    align-items:center;
  }
  .hero-classic:has(.hero-mosaic) .hero-copy{ max-width:44ch; }
}

.hero-facts{
  display:flex; flex-wrap:wrap; gap:0;
  margin:3.2rem 0 0; padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.22);
}
.hero-facts > div{
  padding:0 2.4rem; border-left:1px solid rgba(255,255,255,.18);
}
.hero-facts > div:first-child{ padding-left:0; border-left:0; }
.hero-facts dt{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:#8FA4C0; margin:0 0 .4rem;
}
.hero-facts dd{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:1.5rem; line-height:1; color:#fff;
}
@media (max-width:760px){
  .hero-facts > div{ padding:0 1.2rem; }
  .hero-facts dd{ font-size:1.2rem; }
}

/* ============================================================
   Madrid — the worldwide centre on the network map.
   Pinned to the right margin at the headquarters' vertical level,
   in the one non-navy accent the palette carries, so it reads as
   a different kind of place rather than another American office.
   ============================================================ */
#map .node.worldwide .dot{ fill:var(--attention); }
#map .node.worldwide .ring{ fill:rgba(180,83,9,.13); }
#map .node.worldwide text{ fill:var(--attention); font-weight:700; }
#map .node.worldwide text.sub{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; fill:var(--muted); font-weight:400;
}
#map .node.worldwide:hover .dot,
#map .node.worldwide.on .dot{ fill:#8A3F07; }

#map .arc-world{
  fill:none; stroke:var(--attention); stroke-width:1.1;
  stroke-dasharray:5 6; opacity:.5;
}
#map .arc-world.live{ opacity:.95; }

/* ============================================================
   Practice detail pages — all-risks / marine / aviation.
   ============================================================ */
.page-hero{
  position:relative; overflow:hidden;
  background:var(--navy-ink); color:#fff;
  padding:clamp(5rem,14vh,9rem) 0 clamp(4rem,10vh,7rem);
  display:grid; align-items:end;
  --emphasis:var(--sky);
}
.page-hero .hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.42;
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,23,47,.55) 0%, rgba(8,23,47,.86) 100%);
}
.page-hero .shell{ position:relative; z-index:2; }
.page-hero .eyebrow{ color:var(--sky); }
.page-hero .eyebrow a:hover{ text-decoration:underline; }
.page-hero h1{
  font-family:var(--serif); font-weight:400; color:#fff;
  font-size:clamp(3rem,8vw,6.5rem); line-height:.98; letter-spacing:-.03em;
  margin:1.2rem 0 0;
  /* Shares its name with .hero h1 and network.html's .net-title — the same
     one title element, cross-fading into whatever the next page's title
     says, rather than the generic whole-page dissolve everything else gets. */
  view-transition-name:page-title;
}
.page-hero .lede{ color:#C6D6EA; max-width:56ch; margin-top:1.8rem; }
/* Marine has no photography yet — a flat navy field rather than a stand-in
   photograph of someone else's vessel. */
.page-hero-plain{
  background:linear-gradient(160deg,#123A6B 0%,#0B2450 55%,#08172F 100%);
}
.page-hero-plain::after{ display:none; }

.oa{
  list-style:none; margin:3rem 0 0; padding:0;
  border-top:1px solid var(--line);
}
.oa li{
  display:grid; grid-template-columns:3.4rem 1fr 1.1fr; gap:1.5rem;
  align-items:baseline; padding:1.5rem .4rem;
  border-bottom:1px solid var(--line);
  transition:padding .4s var(--ease), background .4s var(--ease);
}
.oa li:hover{ padding-left:1.3rem; background:var(--mist); }
.oa .oa-n{ font-family:var(--mono); font-size:.74rem; color:var(--muted); }
.oa b{
  font-family:var(--serif); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(1.15rem,2vw,1.6rem); color:var(--ink);
}
.oa span{ color:var(--ink-2); font-size:.95rem; }
.oa-note{
  margin-top:1.6rem; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.06em; color:var(--attention);
}
@media (max-width:760px){
  .oa li{ grid-template-columns:2.6rem 1fr; }
  .oa li > span{ grid-column:2; }
}

/* ============================================================
   Affiliate note — Team ABP, tied to service 03.
   The independence statement is load-bearing: two independent
   firms collaborating, neither accountable for the other.
   ============================================================ */
.affil{
  margin-top:3.4rem; padding:2.4rem 2.6rem;
  background:var(--mist); border-left:3px solid var(--navy);
  max-width:76ch;
}
.affil-k{
  margin:0 0 .9rem; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.affil h3{
  margin:0 0 1.2rem; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.02em; color:var(--ink);
}
.affil p{ margin:0 0 1rem; font-size:.98rem; line-height:1.65; color:var(--ink-2); }
.affil p b{ color:var(--ink); }
.affil-ind{
  padding-top:1rem; border-top:1px solid var(--line);
  font-size:.92rem;
}
.affil .tlink{ font-size:.92rem; }
@media (max-width:700px){ .affil{ padding:1.8rem 1.4rem; } }

/* ============================================================
   Client review 2026-08-31 (second pass).
   ============================================================ */

/* Hero without photography — a plain navy field. The type carries it. */
.hero-plain{
  background:linear-gradient(165deg,#123A6B 0%,#0B2450 52%,#08172F 100%);
}
.hero-plain::after{ display:none; }

/* The Team ABP note is disclosed by clicking service 03, not shown by
   default. :target does this with no script: the service link already
   points at #affiliate-abp. */
.affil{ display:none; }
.affil:target{ display:block; }
@media (prefers-reduced-motion:no-preference){
  .affil:target{ animation:affil-in .34s var(--ease) both; }
}
@keyframes affil-in{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
/* Make the disclosure legible on the trigger itself. */
.svc a[href="#affiliate-abp"] .go::after{ content:""; }

/* The tanker photograph is far darker than the aviation sunset, so it needs
   more of itself through the overlay to read as a vessel at all. */
.page-hero-marine .hero-bg{ opacity:.72; filter:saturate(.85) contrast(1.06); }
.page-hero-marine::after{
  background:linear-gradient(180deg, rgba(8,23,47,.56) 0%, rgba(8,23,47,.70) 55%, rgba(8,23,47,.90) 100%);
}

/* ============================================================================
   DESIGN SYSTEM CONFORMANCE — 2026-08-31
   Source: design-system/criteria-america/{tokens.css,DESIGN.md}

   This layer does not invent a new look. It brings Direction 3 into line with
   the client's own written system, which the audit found it was breaking in
   three measurable ways:

     1. DESIGN.md 3: "18px is the floor. Metadata may reach 0.85rem only when
        uppercase and bolded." The page carried 71 text nodes below that, some
        at 9.9px. Every label is raised to --text-size-meta.
     2. DESIGN.md 4 and --target-min: "Minimum target 44x44px." 16 interactive
        targets on the homepage and 21 on the network page were smaller.
     3. Contrast contract: --text-muted measures 3.1:1 and fails AA. Labels
        move to --text-label (4.6:1).
   ============================================================================ */

:root{
  --text-size-meta:.85rem;      /* 13.6px — the metadata floor */
  --text-label:#566A85;         /* 4.6:1 on white */
  --target-min:44px;
  --section-y:clamp(6rem,13vh,10rem);
}

/* ---- 1. metadata floor -------------------------------------------------- */
.eyebrow,
.fig span, .ftr h4, .cmdk li .k, .map-read .k, .map-panel .role,
.person .role, .note-tbc, .news-item .date, .worldwide .k,
.journey-foot span, .shot-cap, .prac-k, .oa .oa-n, .oa-note,
.affil-k, .hero-facts dt, #map .node.worldwide text.sub{
  font-size:var(--text-size-meta);
  font-weight:700;
  letter-spacing:.14em;
}
/* Tracking that wide needs a little air once the type grows. */
.eyebrow{ letter-spacing:.2em; line-height:1.4; }

/* ---- 2. label contrast -------------------------------------------------- */
.fig span, .map-read .k, .map-panel .role, .person .role,
.oa .oa-n, .prac-k, .affil-k, .cmdk li .k{ color:var(--text-label); }
.office .n, .office .role{ color:var(--text-label); font-weight:700; }

/* ---- 3. 44px minimum targets ------------------------------------------- */
.nav a, .nav button, .ftr a, .tlink, .svc a, .prac-tile, .oa li,
.map-panel a, .office a[href^="mailto:"], .office a[href^="tel:"]{
  min-height:var(--target-min);
  display:inline-flex; align-items:center;
}
.svc a, .prac-tile, .oa li, .ftr a{ display:flex; }
.prac-tile{ flex-direction:column; align-items:flex-start; }
.oa li{ display:grid; }                 /* keep the ledger grid, floor applies */
.btn{ min-height:var(--target-min); display:inline-flex; align-items:center; }
/* DESIGN.md 4 specificity warning: .nav a outranks .btn, restate the colour. */
.nav a.btn{ color:var(--text-on-accent,#fff); }

/* ---- 4. one vertical rhythm -------------------------------------------- */
.sec{ padding-top:var(--section-y); padding-bottom:var(--section-y); }
.sec + .sec{ padding-top:0; }           /* no doubled gap between siblings */

/* ---- 5. focus is never colour alone (DESIGN.md 4) ---------------------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--navy); outline-offset:3px; border-radius:2px;
}

/* Conformance, second pass — the remainder the audit found. */
#map text{ font-size:13px; font-weight:700; }
#map .node.worldwide text.sub{ font-size:11.5px; }   /* secondary line, still legible */
/* At the narrow (<=900px) portrait frame, "Criteria America Network" at
   11.5px measures wider than the 380-unit viewBox can hold centered on the
   Madrid node, clipping the last letter. Shrink it specifically there —
   this rule must stay after the 11.5px one above to win the cascade. */
@media (max-width:900px){
  #map .node.worldwide text.sub{ font-size:9.5px; }
}
.ftr a, .ftr .btn{ font-size:var(--text-size-meta); }
.mock-flag{ font-size:var(--text-size-meta); }
.mark{ min-height:var(--target-min); display:inline-flex; align-items:center; }
.skip{ min-height:var(--target-min); display:inline-flex; align-items:center; }


/* ============================================================================
   CLIENT REVIEW 2026-09-01 — third pass
   New components introduced by the attachment-by-attachment brief. Everything
   below is built from the tokens already declared at the top of this file:
   one accent (brand navy), the 18px body floor, the 0.85rem metadata floor and
   the 44px target minimum. No new colours are invented.
   ============================================================================ */

/* ---- rhythm: alternating grounds so a long page stays scannable ---------- */
.sec-panel{ background:var(--mist); }
.sec.sec-panel,
.sec.contact,
.sec.feed-sec,
.sec.net{ padding-top:var(--section-y); }

/* ---- hero claim + sub-title (attachment 1) ------------------------------ */
/* Two statements, one voice. The headline keeps the serif to itself; the claim
   answers it in the sans at lede weight, so the eye reads headline, then claim,
   then detail, instead of two serif lines competing for the same job. */
/* The claim is now the headline itself, so the supporting line is promoted to
   lede scale — it is the only thing under the title and has to carry weight. */
.hero-sub{
  margin:2rem 0 0;
  font-size:var(--text-size-lede, clamp(1.12rem,1.4vw,1.34rem)); line-height:1.55;
  color:#C6D6EC; max-width:44ch;
}
.hero-intro{
  margin:1.1rem 0 0;
  font-size:1rem; line-height:1.6;
  color:#A7B7CE; max-width:52ch;
}
.hero-network-statement{
  margin:0.9rem 0 0;
  font-size:0.85rem; letter-spacing:.02em;
  color:#8396AF;
}
/* The hero now carries headline, claim, sub-title, actions and the fact strip.
   Bottom-aligning that much content pushed the headline off the top of a
   laptop viewport, so it centres and the headline steps down a size. */
.hero-classic{ align-items:center; padding-block:clamp(3rem,7vh,5rem); }
.hero-classic h1{ font-size:clamp(2.6rem,5.8vw,5rem); max-width:15ch; }
/* hero.emphasis now carries a full phrase ("with international reach") rather
   than one word ("boutique"), so it needs its own, smaller scale instead of
   inheriting the full h1 size — otherwise it wraps across three lines. */
.hero-classic h1 i{ font-size:0.56em; display:inline-block; }
.hero-classic .hero-cta{ margin-top:2.2rem; }
.hero-classic .hero-facts{ margin-top:2.6rem; }

/* ---- the department band (attachment 4) --------------------------------- */
/* A single tile sitting directly on top of the three department tiles, so the
   four read as one object rather than a heading floating above a grid. */
.dept-band{
  margin-top:1.4rem;
  background:var(--navy-ink); color:#fff;
  padding:clamp(2.2rem,4vw,3.2rem) clamp(1.8rem,3vw,2.6rem);
  position:relative;
}
.dept-band::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--sky);
}
.dept-band h2{
  margin:0; color:#fff; max-width:18ch;
  font-size:clamp(2.1rem,4.4vw,3.6rem); line-height:1;
}
/* the tiles below join the band: no repeated top rule, no floating gap */
.dept-band + .prac{ margin-top:0; border-top:0; }

/* ---- the affiliate cue (Team ABP, disclosed on click) ------------------- */
.affil-cue{ margin:2.6rem 0 0; }

/* ---- operational-area ledger without a description column -------------- */
.oa-plain li{ grid-template-columns:3.4rem 1fr; }
@media (max-width:760px){ .oa-plain li{ grid-template-columns:2.6rem 1fr; } }

/* ---- brighter page hero for photography that should stay bright --------- */
/* The wind-turbine frame is the point of the All Risks page, so it keeps more
   of itself; the gradient is weighted left, under the type, not over the sky. */
.page-hero-energy .hero-bg{ opacity:.66; filter:saturate(.95) contrast(1.04); }
.page-hero-energy::after{
  background:linear-gradient(100deg, rgba(8,23,47,.92) 0%, rgba(8,23,47,.74) 44%, rgba(8,23,47,.30) 100%);
}

/* ---- photograph credit -------------------------------------------------- */
.img-credit{
  margin-top:1.6rem; color:var(--text-label);
  font-family:var(--mono); font-size:var(--text-size-meta);
  letter-spacing:.06em;
}

/* ============================================================================
   INDUSTRY NEWSFEED (attachment 17)
   Headlines fetched from /api/news, which reads the publisher server-side.
   Rendered as a ledger, not as cards: for this audience a scannable list of
   headlines beats a wall of boxes, and it degrades to plain text if the
   request fails.
   ============================================================================ */
/* The list arrives after the page does. Without a reserved box the six rows
   push the contact section down on arrival, which measured as 0.157 cumulative
   layout shift against a 0.1 budget. The height is the rendered height of six
   rows, so the swap is invisible. */
/* Measured, not guessed: six rendered rows come to 864px at desktop width and
   980px at 390px. Reserving that keeps the contact section from being shoved
   down when the feed arrives — the shift that put cumulative layout shift
   over budget, and the reason the mobile baselines were flaking. In px, not
   rem, because the body drops to 17px below 560px and rem does not follow. */
/* Re-measured 2026-09-01 after the row-card treatment below added real
   height (padding, a full border, inter-row margin) to each item — the old
   864/980px reservation predated that and would have under-reserved,
   reintroducing the CLS this was built to prevent. 1440px and 834px measured
   1021px/1010px; 390px measured 1211px. Both rounded up for headroom. */
.feed{ margin-top:3rem; border-top:1px solid var(--line); min-height:1030px; }
@media (max-width:760px){ .feed{ min-height:1220px; } }
/* Headline first, provenance underneath. An earlier version led with the
   source in its own column; at this tracking the label wrapped to four lines
   and buried the headline, which is the thing being scanned. */
/* The row is a wrapper, not the link itself: the publisher has no English or
   Portuguese edition, so a translated item carries a second link back to the
   original, and anchors cannot nest. The rule below therefore owns the border
   that .feed-item used to draw. */
.feed-entry{ border-bottom:1px solid var(--line); }
.feed-item{
  display:grid; grid-template-columns:1fr auto;
  gap:1.5rem; align-items:baseline;
  padding:1.6rem .4rem .9rem;
  color:inherit; text-decoration:none;
  transition:padding .4s var(--ease), background .4s var(--ease);
}
.feed-original{
  display:inline-block; padding:0 .4rem 1.4rem;
  font-size:.86rem; color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid transparent;
}
.feed-original:hover,
.feed-original:focus-visible{ color:var(--navy); }
.feed-original[hidden]{ display:none; }
.feed-item:hover,
.feed-item:focus-visible{ padding-left:1.3rem; background:var(--mist); }
.feed-item .src{
  display:block; margin-top:.6rem;
  font-family:var(--mono); font-size:var(--text-size-meta); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-label);
}
.feed-item .ttl{
  font-family:var(--serif); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.2; color:var(--ink);
}
.feed-item .ttl span{
  display:block; margin-top:.4rem;
  font-family:var(--sans); font-size:1rem; line-height:1.55; color:var(--ink-2);
}
.feed-item .go{
  color:var(--navy); font-size:1.1rem;
  opacity:0; transform:translateX(-8px);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.feed-item:hover .go,
.feed-item:focus-visible .go{ opacity:1; transform:none; }
.feed-state{ padding:1.6rem .4rem; margin:0; color:var(--ink-2); }
.feed-credit{
  margin-top:2rem; max-width:80ch;
  font-size:var(--text-size-meta); line-height:1.7; color:var(--ink-2);
}
.feed-credit a{ color:var(--navy); border-bottom:1px solid var(--line-2); }
.feed-credit .tbc{ display:block; margin-top:.3rem; color:var(--attention); }
@media (max-width:760px){
  .feed-item .go{ display:none; }
}

/* ============================================================================
   CONTACT (attachment 18)
   A real form, posting to /api/contact, which emails the request to the owner.
   Field sizing follows the 55+ brief: 18px input text, 52px control height,
   labels above the control rather than inside it, and errors in words.
   ============================================================================ */
.contact{ background:var(--mist); }
.contact-intro .lede{ margin-top:1.6rem; }

.cform{
  background:var(--surface); border:1px solid var(--line);
  padding:clamp(1.8rem,3.2vw,2.8rem);
}
.cf-row{ margin-bottom:1.4rem; }
.cf-two{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.4rem; }
.cform label{
  display:block; margin-bottom:.5rem;
  font-size:1rem; font-weight:700; color:var(--ink);
}
.cform .req{ color:var(--attention); }
.cform input,
.cform select,
.cform textarea{
  width:100%; min-height:52px;
  padding:.85rem 1rem;
  font-family:var(--sans); font-size:1.05rem; color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line-2); border-radius:0;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.cform textarea{ min-height:150px; resize:vertical; line-height:1.6; }
.cform input:focus,
.cform select:focus,
.cform textarea:focus{
  outline:none; border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(22,68,128,.16);
}
.cform [aria-invalid="true"]{ border-color:var(--attention); }
.cf-err{
  display:block; margin-top:.4rem;
  font-size:var(--text-size-meta); font-weight:700; color:var(--attention);
}
/* the spam trap is removed from the layout and from the accessibility tree */
.cf-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cf-send{ margin-top:.6rem; }
.cf-send[disabled]{ opacity:.6; cursor:progress; }
.cf-status{ margin:1.2rem 0 0; font-size:1.02rem; line-height:1.6; }
.cf-status.ok{ color:var(--navy); font-weight:700; }
.cf-status.bad{ color:var(--attention); font-weight:700; }
.cf-status:empty{ margin:0; }
.cf-alt{
  margin:1.4rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:var(--text-size-meta); line-height:1.7; color:var(--ink-2);
}
.cf-alt a{ color:var(--navy); border-bottom:1px solid var(--line-2); }
.cf-alt .tbc{ color:var(--attention); }
@media (max-width:900px){
  .cf-two{ grid-template-columns:1fr; }
}

/* ---- conformance for the components added above ------------------------ */
.img-credit{ font-size:var(--text-size-meta); font-weight:700; letter-spacing:.14em; }
/* these are block/grid containers, not inline targets: the 44px floor is met
   by their own padding, so they must not inherit the inline-flex rule */
.feed-item{ min-height:var(--target-min); }
.cform label, .cf-alt a, .feed-credit a{ min-height:0; }


/* ============================================================================
   GLOBAL IMPROVEMENT PASS — 2026-09-01
   Scope: clickability, typography, flow, design-system compliance.

   Every rule below cites the clause it implements, from
   design-system/criteria-america/DESIGN.md and tokens.css. Nothing here is a
   new invention; where the site and the system disagreed, the system won.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TYPOGRAPHY — DESIGN.md 3: "18px is the floor. No exceptions in body
   content. Metadata may reach 0.85rem only when uppercase and bolded."

   An audit of the rendered pages found seventeen rules setting body copy or
   sentence-case captions between 0.8rem and 0.98rem (14.4-17.6px). Each is
   raised to the floor here rather than edited in place, so the violation and
   its correction stay legible to the next person reading this file.
   --------------------------------------------------------------------------- */
.prac-tile p{ font-size:1rem; line-height:1.6; max-width:32ch; }
.oa span{ font-size:1rem; }
.affil p{ font-size:1rem; line-height:1.65; }
.affil-ind{ font-size:1rem; }
.affil .tlink{ font-size:1rem; }
.ftr{ font-size:1rem; }
.ftr p{ font-size:1rem; line-height:1.6; }
.ftr .btm{ font-size:1rem; }
.cf-alt{ font-size:1rem; }
.feed-credit{ font-size:1rem; }
.map-panel p{ font-size:1rem; }
.worldwide .d{ font-size:1rem; }
.person .bio{ font-size:1rem; }
.cmdk .empty{ font-size:1rem; }

/* A photograph credit is a caption, not metadata: sentence case, so it takes
   the body floor rather than the 0.85rem label exception. */
.img-credit{
  font-family:var(--sans); font-size:1rem; letter-spacing:0;
  font-weight:400; color:var(--ink-2);
}

/* The footer link list is navigation, not prose. Uppercase-bold metadata is
   the wrong register for a link people are meant to read and click, and the
   44px target floor needs the room. */
.ftr a, .ftr .btn{ font-size:1rem; letter-spacing:0; }

/* DESIGN.md 3: "Measure caps at 52-62ch." The lede already obeys; these did not. */
.stage-card p{ font-size:1.05rem; max-width:60ch; }
.news-item p{ max-width:56ch; }

/* DESIGN.md 8: below 560px body may drop to 17px, and only there. */
@media (max-width:560px){ body{ font-size:17px; } }


/* ---------------------------------------------------------------------------
   2. CLICKABILITY — DESIGN.md 4 (Cards): "Hover: lift 3-4px plus a soft
   navy-tinted shadow; never a colour change alone." tokens.css supplies
   --shadow-hover for exactly this.

   The problem being fixed: the department tiles and the feed rows announced
   themselves only on hover, and the arrow that signalled "this goes somewhere"
   was invisible until the pointer arrived. A visitor who never hovers never
   learns the tile is a link, and a touch user has no hover at all. So the cue
   is now present at rest — a muted arrow and a left rule — and hover promotes
   it rather than creating it.
   --------------------------------------------------------------------------- */
:root{
  --shadow-hover:0 12px 28px rgba(11,37,71,.10);
  --lift:-3px;
}

/* --- department tiles ---------------------------------------------------- */
.prac-tile{
  background:var(--surface);
  transition:background var(--duration-fast,.25s) var(--ease),
             transform var(--duration-fast,.25s) var(--ease),
             box-shadow var(--duration-fast,.25s) var(--ease);
}
/* the affordance at rest: a visible, quiet arrow */
.prac-tile .go{
  opacity:1; transform:none;
  color:var(--text-label);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.prac-tile:hover,
.prac-tile:focus-visible{
  background:var(--surface);
  transform:translateY(var(--lift));
  box-shadow:var(--shadow-hover);
  z-index:1;
}
.prac-tile:hover .go,
.prac-tile:focus-visible .go{ color:var(--navy); }
/* the top rule still draws in — it is the confirmation, not the invitation */
.prac-tile::before{ height:3px; }

/* The cue is a labelled one. A bare arrow asks the reader to infer that the
   tile is a link; a named action does not, and DESIGN.md 7 warns that this
   audience discounts anything it has to decode. No corner ornament: DESIGN.md 6
   says depth comes from contrast and hairlines, not decoration. */
.prac-tile .go{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:1rem; line-height:1;
}
.prac-tile .go em{
  font-style:normal; font-weight:700;
  font-size:var(--text-size-meta); letter-spacing:.14em; text-transform:uppercase;
}
.prac-tile:hover .go,
.prac-tile:focus-visible .go{ color:var(--navy); transform:none; }
.prac-tile:hover .go::after,
.prac-tile:focus-visible .go::after{ content:none; }

/* --- newsfeed rows ------------------------------------------------------- */
.feed-item .go{
  opacity:1; transform:none; color:var(--text-label);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.feed-item:hover .go,
.feed-item:focus-visible .go{ color:var(--navy); transform:translate(3px,-3px); }

/* --- the ledger is NOT a link -------------------------------------------- */
/* The operational-area rows carried the same hover padding and mist fill as
   the clickable ledgers. Promising a click that does not exist is worse than
   no cue at all, so the affordance is withdrawn where nothing happens. */
.oa li:hover{ padding-left:.4rem; background:transparent; }
.oa li{ transition:none; cursor:default; }

/* --- text links ---------------------------------------------------------- */
/* DESIGN.md 4 (Navigation): the underline animates from the left. .tlink
   already carries an arrow; give it a resting underline so it reads as a link
   in a page full of serif statements. */
.tlink{ border-bottom-color:var(--line-2); }


/* ---------------------------------------------------------------------------
   3. FOCUS — DESIGN.md 7: "Give every interactive element a visible focus ring."

   The eight map markers are focusable <g> elements. An outline on an SVG group
   is not painted consistently across engines, so the ring is drawn as a real
   circle in the SVG coordinate system instead of relied upon as a CSS outline.
   --------------------------------------------------------------------------- */
#map .node:focus,
#map .node:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
#map .node.worldwide:focus,
#map .node.worldwide:focus-visible{ outline-color:var(--attention); }
#map .node:focus-visible .halo{
  opacity:1; fill:none;
  stroke:var(--navy); stroke-width:3; stroke-dasharray:none;
}
#map .node.worldwide:focus-visible .halo{ stroke:var(--attention); }
#map .node:focus-visible .dot{ r:9; }
/* Safari and older Firefox ignore :focus-visible on SVG groups; :focus is the
   fallback and costs nothing here, since these are only reachable by keyboard
   or a deliberate click. */
#map .node:focus .halo{ stroke:var(--navy); stroke-width:3; fill:none; opacity:1; }
/* Now that the map shows on phones, every tap focuses a marker, and the
   square outline lands around the label as well as the dot. On touch-only
   devices the circular ring above (plus the lit arc) marks the selection. */
@media (hover:none) and (pointer:coarse){
  #map .node:focus, #map .node:focus-visible{ outline:none; }
}


/* ---------------------------------------------------------------------------
   4. MOBILE NAVIGATION — DESIGN.md 8: "Below 1000px ... nav condenses."

   There was no condensed navigation at all: six links, a shortcut button and a
   call to action were laid out in a row at every width, so on a phone the bar
   overflowed and the call to action fell off the edge. This adds the standard
   disclosure: a labelled button, a panel, focus returned to the button on
   close, Escape to dismiss.
   --------------------------------------------------------------------------- */
.burger{
  display:none;
  margin-left:auto;
  width:var(--target-min); height:var(--target-min);
  padding:0; background:none; border:1px solid var(--line);
  cursor:pointer; position:relative;
}
.burger span{
  display:block; position:absolute; left:11px; right:11px; height:2px;
  background:var(--ink); transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1){ top:14px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.burger:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }

@media (max-width:1000px){
  .burger{ display:block; }
  .hdr-in{ flex-wrap:wrap; gap:1rem; }
  .mark img{ height:88px; }

  .nav{
    display:none;
    flex-direction:column; align-items:stretch; gap:0;
    width:100%; margin-left:0;
    border-top:1px solid var(--line);
    padding-bottom:1rem;
  }
  .nav.open{ display:flex; }

  .nav a{
    min-height:56px; display:flex; align-items:center;
    padding:0 .2rem; font-size:1.05rem;
    border-bottom:1px solid var(--line);
  }
  .nav a::after{ display:none; }
  .nav a.btn{
    justify-content:center; margin:1.2rem 0 0 0 !important;
    border-bottom:1px solid var(--navy);
  }
  /* the command palette is a desktop keyboard affordance */
  .nav .kbd{ display:none; }   /* .nav button outranks a bare .kbd */
  /* language switcher is hidden on mobile until menu opens */
  .nav .lang-switch{ display:none; }
  .nav.open .lang-switch{ display:flex; margin:1rem 0 0 0; }
}


/* ---------------------------------------------------------------------------
   5. FLOW — spacing rhythm and a clear exit from every page.

   DESIGN.md 5: section padding is clamp(6rem,13vh,10rem) and the whitespace
   philosophy is that a chapter break should be felt. The alternating grounds
   added earlier do the feeling; these fix the two places where the rhythm
   stuttered.
   --------------------------------------------------------------------------- */
/* A dark chapter against a light one needs no extra gap; against another light
   one it does. This is why .sec + .sec collapses the top padding but a
   background-bearing section restores it. */
.journey + .sec{ padding-top:var(--section-y); }
.lams + .sec{ padding-top:var(--section-y); }
.sec + .lams{ padding-top:var(--section-y); }
.sec + .cta{ padding-top:var(--section-y); }

/* The department section is the page's decision point; give it room to land. */
#departments .affil-cue{ margin-top:3rem; }

/* Reveal on scroll should never leave text sitting at partial opacity long
   enough to fail contrast, and must not run at all under reduced motion. */
.up{ transition-duration:var(--duration-slow,.9s); }
@media (prefers-reduced-motion:reduce){
  .up,.js .up:not(.in){ opacity:1 !important; transform:none !important; }
}


/* ---------------------------------------------------------------------------
   6. RESPONSIVE — DESIGN.md 8: "The page body never scrolls horizontally."
   --------------------------------------------------------------------------- */
.track{ overflow-x:auto; }
@media (max-width:900px){
  .stage-card{ grid-template-columns:3rem 1fr; }
  .stage-card p{ grid-column:2; }
  .dept-band h2{ font-size:clamp(1.9rem,7vw,2.6rem); }
}
@media (max-width:560px){
  .hero-facts > div{ padding:0 1rem; }
  .cform{ padding:1.4rem 1.2rem; }
}


/* --- services ledger (restored 2026-09-01) -------------------------------
   The client asked for the "Three services" heading to go, not the services.
   Restored under the departments, with the same resting affordance as every
   other clickable row: the arrow is visible before the pointer arrives. */
.svc{ margin-top:clamp(3rem,6vh,4.5rem); }
.svc a{ min-height:var(--target-min); }
.svc a .go{
  opacity:1; transform:none; color:var(--text-label);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.svc a:hover .go,
.svc a:focus-visible .go{ color:var(--navy); transform:translateX(4px); }
/* "thru affiliates" is a qualifier, not decoration: --muted fails AA on white
   (DESIGN.md 2, contrast contract), so it takes the label colour instead. */
.svc a h3 em{ font-style:normal; color:var(--text-label); font-weight:400; }
.svc a:focus-visible{ outline:2px solid var(--navy); outline-offset:-3px; }


/* --- newsfeed row: one link, and say what it does -------------------------
   The row is a single link to the publisher's article. A bare arrow left the
   reader to work out that the headline was clickable and where it went, so the
   row now says so in words. */
.feed-item{ cursor:pointer; grid-template-columns:1fr; }
.feed-item .src{ margin-top:.7rem; }
.feed-item .cue{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:.9rem;
  font-family:var(--sans); font-size:1rem; font-weight:700; letter-spacing:0;
  color:var(--navy); text-transform:none;
  border-bottom:1px solid var(--line-2);
  transition:border-color .2s var(--ease), gap .2s var(--ease);
}
.feed-item .cue b{ font-weight:400; }
.feed-item:hover .cue,
.feed-item:focus-visible .cue{ border-bottom-color:var(--navy); gap:.85rem; }

/* Client review, 2026-09-01: the list read as "tons of text" and it wasn't
   clear a row was something to click — reasonable, since a plain-text row
   with no border and no card looks the same as a paragraph. Every row now
   sits on its own card at rest, not just on hover, with a resting navy
   accent bar that promotes on interaction — the identical "cue visible at
   rest, hover confirms it" device used for the department tiles and the
   mosaic, applied here so the list reads as a distinct, tappable component
   the moment it's on screen, before anyone has read a word of it. */
.feed-item{
  background:var(--mist);
  padding:1.5rem 1.4rem 1.5rem 1.7rem;
  margin-bottom:.9rem;
  border:1px solid var(--line);
  position:relative;
}
.feed-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--line-2);
  transition:background .25s var(--ease);
}
.feed-item:hover,
.feed-item:focus-visible{
  padding-left:1.7rem;
  background:var(--surface);
  border-color:var(--line-2);
  box-shadow:var(--shadow-hover);
}
.feed-item:hover::before,
.feed-item:focus-visible::before{ background:var(--navy); }
.feed-item:last-child{ margin-bottom:0; }


/* ============================================================================
   PAGE HERO PHOTOGRAPHY — clarity pass, 2026-09-01

   The client asked twice for these pictures to read brighter and more clearly.
   The earlier treatment dimmed the whole frame to protect the type, which made
   the subject hard to make out. This inverts the trade: the scrim is weighted
   to the left, under the words, and releases toward the right so the subject
   stays bright. DESIGN.md 4 (Image Treatment) allows 72-94% on the dark ground
   as long as white text clears contrast, which it does on the left where the
   text actually sits.
   ============================================================================ */
.page-hero .hero-bg{ opacity:.88; filter:none; }
.page-hero::after{
  background:
    linear-gradient(100deg,
      rgba(8,23,47,.90) 0%,
      rgba(8,23,47,.78) 38%,
      rgba(8,23,47,.34) 68%,
      rgba(8,23,47,.16) 100%),
    linear-gradient(180deg, rgba(8,23,47,.34) 0%, rgba(8,23,47,0) 30%);
}

/* The client's own casualty photograph, supplied 2026-09-01. It is already a
   bright, high-key frame, so it needs no correction and a lighter scrim than
   the stand-in it replaced — enough to hold the headline on the left, and no
   more, so the blue bow still reads through. */
.page-hero-marine .hero-bg{ opacity:1; filter:none; }
.page-hero-marine::after{
  background:
    linear-gradient(100deg,
      rgba(8,23,47,.80) 0%,
      rgba(8,23,47,.58) 40%,
      rgba(8,23,47,.20) 70%,
      rgba(8,23,47,.04) 100%),
    linear-gradient(180deg, rgba(8,23,47,.34) 0%, rgba(8,23,47,0) 26%);
}

/* The turbine frame is already bright; it only needs the left panel. */
.page-hero-energy .hero-bg{ opacity:.88; filter:saturate(1.02) contrast(1.03); }
.page-hero-energy::after{
  background:
    linear-gradient(100deg,
      rgba(8,23,47,.90) 0%,
      rgba(8,23,47,.76) 40%,
      rgba(8,23,47,.30) 70%,
      rgba(8,23,47,.12) 100%),
    linear-gradient(180deg, rgba(8,23,47,.32) 0%, rgba(8,23,47,0) 26%);
}

/* With the right-hand side of the frame now light, the copy column has to stop
   before it reaches it, or a line of white text will run onto a bright sky. */
.page-hero .lede,
.page-hero h1{ max-width:22ch; }
.page-hero .lede{ max-width:44ch; }
@media (max-width:900px){
  .page-hero::after,
  .page-hero-marine::after,
  .page-hero-energy::after{
    background:linear-gradient(180deg, rgba(8,23,47,.62) 0%, rgba(8,23,47,.86) 100%);
  }
}


/* --- aviation hero: let the aircraft read ---------------------------------
   The source frame is already bright and the aircraft is unmistakable in it;
   the scrim was what made it hard to identify. Lifted here, with the left
   panel kept dark enough for the headline and the lede. */
.page-hero-aviation .hero-bg{
  opacity:1; filter:brightness(1.06) contrast(1.04) saturate(1.03);
}
.page-hero-aviation::after{
  background:
    linear-gradient(100deg,
      rgba(8,23,47,.86) 0%,
      rgba(8,23,47,.66) 34%,
      rgba(8,23,47,.20) 62%,
      rgba(8,23,47,.04) 100%),
    linear-gradient(180deg, rgba(8,23,47,.30) 0%, rgba(8,23,47,0) 24%);
}
@media (max-width:900px){
  .page-hero-aviation::after{
    background:linear-gradient(180deg, rgba(8,23,47,.60) 0%, rgba(8,23,47,.86) 100%);
  }
}


/* ============================================================================
   NEWSFEED NOTICE
   Client instruction, 2026-09-01: the full notice took too much of the page.
   It is now a disclosure — the part that has to be seen stays visible, the
   detail is one click away.

   The visible line is not a teaser: it carries the three things that actually
   do the work (whose content it is, that we do not verify it, that it is not
   advice). Hiding those entirely would make the notice decorative. The
   expansion carries the full text for anyone who wants it.

   Native <details>, same pattern as the specialties disclosure: no script, and
   it works with a keyboard and a screen reader unaided.
   ============================================================================ */
.feed-note{
  margin-top:clamp(2rem,4vh,3rem);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  max-width:86ch;
}
.feed-note summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:1.4rem;
  min-height:var(--target-min); padding:1.4rem .2rem;
  transition:background .2s var(--ease);
}
.feed-note summary::-webkit-details-marker{ display:none; }
.feed-note summary:hover{ background:var(--mist); }
.feed-note summary:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

.feed-note-lead{
  flex:1 1 auto;
  font-size:1rem; line-height:1.6; color:var(--ink-2);
}
.feed-note-lead b{ color:var(--ink); }

.feed-note-more{
  flex:0 0 auto; align-self:center; white-space:nowrap;
  font-family:var(--mono); font-size:var(--text-size-meta); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
}
.feed-note[open] .feed-note-more{ visibility:hidden; }

/* a plus that becomes a minus — the same open/closed signal as .spec */
.feed-note-cue{ position:relative; flex:0 0 20px; width:20px; height:20px; align-self:center; }
.feed-note-cue::before,
.feed-note-cue::after{
  content:""; position:absolute; left:0; top:9px; width:20px; height:2px;
  background:var(--navy); transition:transform .2s var(--ease);
}
.feed-note-cue::after{ transform:rotate(90deg); }
.feed-note[open] .feed-note-cue::after{ transform:rotate(0deg); }

.feed-note-body{ padding:.4rem .2rem 2rem; }
.feed-note-body p{
  margin:0 0 1.1rem; font-size:1rem; line-height:1.65; color:var(--ink-2);
  max-width:78ch;
}
.feed-note-body p b{ color:var(--ink); }
.feed-note-body a{ color:var(--navy); border-bottom:1px solid var(--line-2); }
.feed-note-body a:hover{ border-bottom-color:var(--navy); }
.feed-engage{ padding-top:1.2rem; border-top:1px solid var(--line-2); }
.feed-src{
  margin-bottom:0 !important;
  padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:var(--text-size-meta) !important; line-height:1.7;
}
.feed-src .tbc{ display:block; margin-top:.4rem; color:var(--attention); }
@media (max-width:700px){
  .feed-note summary{ flex-wrap:wrap; gap:.8rem; }
  .feed-note-lead{ flex:1 1 100%; }
}


/* ============================================================================
   CLIENT ROUND 4 — 2026-09-01
   Attachments 4, 5 and 6d, plus the interaction polish asked for alongside them.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Attachment 5 — LAMS is now a title and a sub-title rather than one statement.

   The supplied title is a thirteen-word sentence. At the h2 display clamp
   (4.8rem) it would run six lines and swamp the section, so it takes its own
   step on the type scale: still serif, still the largest thing in the section,
   but sized for a sentence rather than for two or three words. The measure is
   held at 26ch, which lands it on three lines at desktop width.

   The old .lams-statement was the section's headline; it is now the sub-title
   underneath, so it drops from serif display to the sans sub-title register —
   the same relationship the hero uses between its h1 and .hero-sub.
   --------------------------------------------------------------------------- */
.lams-title{
  font-size:clamp(1.9rem,3.6vw,3rem);
  line-height:1.14;
  letter-spacing:-.02em;
  max-width:26ch;
}
/* the house emphasis device: one italic serif word, in sky on a dark ground */

.lams-statement{
  margin:1.8rem 0 0;
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.2rem);
  line-height:1.6; letter-spacing:0;
  color:#A9BEDA; max-width:56ch;
}

/* ---------------------------------------------------------------------------
   Attachment 6d — rebalance the contact section.

   Removing the lede, the country field and the department field left the left
   column of .contact-grid holding an eyebrow and two words, against a full
   form on the right: half the section was empty. Rather than invent copy to
   fill it, the section becomes a single centred column — heading over form,
   both on the same axis. The form's own fields stay left-aligned, because
   centred labels above left-aligned inputs read badly and scan worse.
   --------------------------------------------------------------------------- */
.contact-one{
  max-width:44rem;
  margin-inline:auto;
}
.contact-one .contact-intro{
  text-align:center;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.contact-one .cform{ text-align:left; }

/* ---------------------------------------------------------------------------
   Interaction polish — DESIGN.md 4 and 7.

   The numbered service list is the page's second decision point and was the
   only link group with no resting affordance: the arrow appeared on hover, so
   a touch user never saw it. Same treatment as the department tiles — the cue
   exists at rest, hover promotes it.
   --------------------------------------------------------------------------- */
.svc a{
  transition:background var(--duration-fast,.25s) var(--ease),
             padding-left var(--duration-fast,.25s) var(--ease);
}
.svc a .go{
  opacity:1; transform:none; color:var(--text-label);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.svc a:hover .go,
.svc a:focus-visible .go{ color:var(--navy); transform:translateX(4px); }

/* The submit button is the end of the form's journey; give it the same lift
   the cards get, so the primary action is the most physical thing on screen. */
.cf-send{
  transition:transform var(--duration-fast,.25s) var(--ease),
             box-shadow var(--duration-fast,.25s) var(--ease),
             background var(--duration-fast,.25s) var(--ease);
}
.cf-send:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.cf-send:active{ transform:translateY(0); box-shadow:none; }

/* ---------------------------------------------------------------------------
   Attachment 4 — the CAT page.

   It carries one idea, so it is one column rather than a grid pretending to
   have more to say. The measure is the body maximum from DESIGN.md 3.
   --------------------------------------------------------------------------- */
.cat-lead{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.3; letter-spacing:-.02em;
  color:var(--ink); max-width:24ch; margin:0;
}
.cat-body{ margin-top:2rem; max-width:58ch; }
.cat-body p{ font-size:1.05rem; line-height:1.7; margin:0 0 1.2rem; }
.cat-body p:last-child{ margin-bottom:0; }

/* The house emphasis device, one declaration for every headline that uses it.
   Colour comes from --emphasis, which each section sets once (see .hero,
   .page-hero, .lams above) — navy on a light ground by default, sky wherever
   the ground is dark. No component below should declare its own "i{ color }"
   again; repoint --emphasis on the container instead. */
.hero h1 i, .page-hero h1 i, .lams-title i, .cat-lead i, .net-title i{
  font-style:italic; color:var(--emphasis);
}


/* ============================================================================
   HERO DEPARTMENT MOSAIC — redesigned 2026-09-25 after client review: the
   three division photos overlapped and read as cramped, and the dark chip
   labels ("MARINE", "ALL RISKS", "AVIATION") didn't match the plain,
   letter-spaced eyebrow tag ("DIVISIONS › MARINE") each division's own page
   uses in its hero. Two changes: tiles now sit in a non-overlapping grid —
   Marine full-width on top, All Risks and Aviation splitting the row below
   — each noticeably larger than the old overlapping stack; and the label
   dropped its dark background chip in favour of the same mono/uppercase/
   sky-blue eyebrow treatment used on the division pages, so clicking a tile
   continues straight into type the visitor already saw. The Ken Burns drift
   and hover lift are unchanged — the client liked the "dynamic" motion, the
   complaint was the overlap and the label chip.
   ============================================================================ */
.hero-mosaic{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:1rem;
  width:100%;
}
.mosaic-tile{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 48px rgba(3,10,22,.45);
  opacity:0; transform:translateY(10px);
  animation:mosaic-in .7s var(--ease) forwards;
  transition:transform var(--duration-fast,.25s) var(--ease),
             box-shadow var(--duration-fast,.25s) var(--ease);
}
/* Marine — full width, top row, the largest frame. */
.mosaic-a{ grid-column:1 / -1; aspect-ratio:16/9; animation-delay:0s; }
/* All Risks and Aviation share the row below, equal width. */
.mosaic-b{ aspect-ratio:1/1; animation-delay:.12s; }
.mosaic-c{ aspect-ratio:1/1; animation-delay:.24s; }
/* A quiet, staggered rise on load — the one piece of "dynamic" this needed.
   Each tile has its own delay (set above) so the stack settles in one
   motion rather than three separate ones firing at once. */
@keyframes mosaic-in{ to{ opacity:1; transform:none; } }
.mosaic-tile img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform-origin:center;
  filter:saturate(.82) brightness(.94);
  transition:filter var(--duration-fast,.25s) var(--ease);
  animation:mosaic-drift 16s ease-in-out infinite alternate;
}
/* A floor of contrast under the caption regardless of what's in the photo.
   Client review 2026-09-25: the first, lighter version of this scrim still
   lost "Aviation" against the backlit sunburst behind it and "All Risks"
   against pale sky — text-shadow alone can't fight a bright photo. Solid
   near-black at the very bottom, fading up, reads as a deliberate darkened
   ground for the caption rather than a hazy edge. */
.mosaic-tile::after{
  content:""; position:absolute; inset:auto 0 0 0; height:58%;
  background:linear-gradient(to top,
    rgba(2,7,16,.88) 0%,
    rgba(2,7,16,.6) 32%,
    rgba(2,7,16,0) 100%);
  pointer-events:none;
}
/* A slow, continuous zoom-and-pan on each photograph — the documentary "Ken
   Burns" treatment, not a hover effect. Recalibrated twice, 2026-09-01.
   First pass moved 3.5% of scale over 30+ seconds — correctly coded, but
   measured at 0.3% of visible change per 3 seconds of real viewing, below
   what a person notices at all. Second pass raised the swing but panned in
   PERCENT, which is relative to each tile's own box: the same 2.4% reads as
   ~8px on the large Marine frame and ~4px on the small Aviation frame — the
   smallest tile was structurally the least visible one, which is exactly
   what the client saw ("no movement on the plane at all"). Panning in a
   fixed pixel distance instead means all three tiles move the same real
   amount regardless of size. Scale range widened too (1.05 to 1.28, a 23-
   point swing) and the cycle shortened (9-13s per half-cycle) so it reads
   as unmistakable motion within a couple of seconds — still a slow,
   continuous drift, not a snap, but no longer subtle to the point of
   invisibility. The "to" scale keeps enough headroom over the pixel pan
   that even the smallest tile never exposes an edge (16px of pan needs
   ~18% of scale headroom on Aviation's ~180px frame; this gives 28%).
   Three different durations and negative delays (each starts mid-cycle)
   keep the tiles permanently out of phase, so nothing pulses in unison —
   the client was explicit: dynamic, not gamified. This runs on transform;
   hover below only ever touches filter, so the two never fight. */
@keyframes mosaic-drift{
  from{ transform:scale(1.05) translate(0,0); }
  to{ transform:scale(1.28) translate(-16px,-12px); }
}
.mosaic-a img{ animation-duration:13s; }
.mosaic-b img{ animation-duration:10s; animation-delay:-3s; }
.mosaic-c img{ animation-duration:12s; animation-delay:-6s; }
/* Replaced 2026-09-10: the original casualty photo was the client's own
   image and had no publication rights. This is a U.S. Coast Guard photo
   (public domain, no rights issue), pre-cropped to the vessel itself
   (marine-casualty-uscg-mosaic.jpg) since the full frame is mostly sky and
   reads as an empty grey tile at this size. The hull curve sits center-left
   of that crop; biasing the frame there keeps it in view rather than
   relying on motion to intermittently reveal it — a serious site shouldn't
   make a photograph's subject depend on when you happen to be looking.
   Held clear of the visible vessel name so the tile doesn't read as a
   specific, identifiable ship. */
.mosaic-a img{ object-position:71% 55%; }
/* Client review 2026-09-25: match the italic serif "Aviation." treatment
   each division's own page hero uses for its h1 — same --serif family,
   same sky-blue italic, same trailing plain-white period — so the tile
   caption reads as the same word the visitor lands on after clicking it. */
.mosaic-label{
  position:absolute; left:1.2rem; bottom:.9rem; top:auto; z-index:1;
  display:inline-block; max-width:calc(100% - 2.4rem);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.4rem,2.6vw,2rem); line-height:1; letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 18px rgba(0,0,0,.8);
  white-space:nowrap;
}
.mosaic-label i{ font-style:italic; color:var(--sky); }

.mosaic-tile:hover,
.mosaic-tile:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 32px 60px rgba(3,10,22,.55);
  z-index:4;
}
.mosaic-tile:hover img,
.mosaic-tile:focus-visible img{
  filter:saturate(1) brightness(1);
}
.mosaic-tile:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  .mosaic-tile{ opacity:1; transform:none; animation:none; }
  .mosaic-tile,.mosaic-tile img{ transition:none; animation:none; }
}

@media (max-width:1000px){
  .hero-mosaic{
    max-width:30rem; margin:2.6rem auto 0;
  }
}