/* ============================================================
   VIP Supply LLC — institutional register
   Palette: navy #0F172A · slate #334155 · accent #0369A1
   Type: Figtree (display) / Noto Sans (body)
   ============================================================ */

:root{
  color-scheme: light;

  --ink:        #0F172A;
  --ink-2:      #334155;
  --ink-3:      #5A6B80;
  --accent:     #0369A1;
  --accent-dk:  #075985;
  --bg:         #F8FAFC;
  --surface:    #FFFFFF;
  --muted:      #EFF3F7;
  --border:     #E2E8F0;
  --border-2:   #CBD5E1;
  --on-dark:    #F1F5F9;
  --on-dark-2:  #93A5BB;
  --dark-line:  rgba(255,255,255,.14);

  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem;
  --s-4: 2rem;   --s-5: 3rem;   --s-6: 4rem;
  --s-7: 6rem;   --s-8: 8rem;

  --maxw: 1180px;
  --radius: 4px;
  --ease: cubic-bezier(.2,.6,.3,1);

  --font-display: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Noto Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

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

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-.025em; margin:0; color:var(--ink); }
p{ margin:0; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-dk); }
img,svg{ max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.dark :focus-visible,.hero :focus-visible,.site-foot :focus-visible{ outline-color:#7DD3FC; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:.75rem 1.25rem; }
.skip:focus{ left:0; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }
.section{ padding-block:clamp(3.5rem,8vw,var(--s-7)); }
.section--tight{ padding-block:clamp(2.5rem,5vw,var(--s-5)); }
.dark{ background:var(--ink); color:var(--on-dark); }
.dark h1,.dark h2,.dark h3{ color:#fff; }

/* ---------- eyebrow / rules ---------- */
.eyebrow{
  font-family:var(--font-display);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 var(--s-2);
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::after{ content:""; height:1px; flex:1; background:var(--border-2); }
.dark .eyebrow,.hero .eyebrow{ color:#7DD3FC; }
.dark .eyebrow::after,.hero .eyebrow::after{ background:var(--dark-line); }

.lead{ font-size:clamp(1.0625rem,1.6vw,1.1875rem); color:var(--ink-2); max-width:62ch; line-height:1.7; }
.dark .lead{ color:var(--on-dark-2); }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(248,250,252,.88);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.site-head.is-stuck{ border-bottom-color:var(--border); }
.head-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); min-height:72px; }

.brand{ display:inline-flex; align-items:center; min-height:44px; flex:none; }
.brand img{ display:block; height:40px; width:auto; }
@media (max-width:480px){ .brand img{ height:32px; } }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a:not(.btn){
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--font-display); font-size:.9375rem; font-weight:500;
  color:var(--ink-2); padding:.55rem .85rem; border-radius:var(--radius);
  transition:color .18s var(--ease), background .18s var(--ease);
}
.nav a:not(.btn):hover{ color:var(--ink); background:var(--muted); }
.nav a[aria-current="page"]:not(.btn){ color:var(--ink); font-weight:600; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-size:.9375rem; font-weight:600;
  padding:.75rem 1.4rem; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; min-height:44px; text-align:center;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-dk); color:#fff; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--border-2); }
.btn--ghost:hover{ background:var(--muted); color:var(--ink); border-color:var(--ink-3); }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ background:var(--on-dark); color:var(--ink); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn--outline-light:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.55); }
.btn:active{ transform:translateY(1px); }

.nav-toggle{ display:none; background:none; border:1px solid var(--border-2); border-radius:var(--radius); width:44px; height:44px; cursor:pointer; color:var(--ink); align-items:center; justify-content:center; }
.nav-toggle:hover{ background:var(--muted); }

@media (max-width:900px){
  /* Scoped to .js: with scripting off there is nothing to open the overlay,
     so the nav has to stay an ordinary wrapped list instead of a fixed sheet
     pinned over the content. */
  .no-js .nav{ flex-wrap:wrap; justify-content:flex-start; gap:.1rem .35rem; padding-bottom:.5rem; }
  .no-js .nav a:not(.btn){ min-height:38px; padding:.4rem .55rem; font-size:.875rem; }
  .no-js .head-in{ flex-wrap:wrap; }
  .js .nav-toggle{ display:inline-flex; }
  .js .nav{
    position:fixed; inset:72px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:var(--s-2) clamp(1.25rem,4vw,2.5rem) var(--s-3);
    box-shadow:0 24px 40px -24px rgba(15,23,42,.25);
    max-height:calc(100dvh - 72px); overflow-y:auto;
  }
  .js .nav[hidden]{ display:none; }
  .js .nav a:not(.btn){ padding:.85rem 0; border-bottom:1px solid var(--border); font-size:1rem; border-radius:0; }
  .js .nav a:not(.btn):hover{ background:transparent; }
  .js .nav .btn{ margin-top:var(--s-2); border-bottom:none; }
}

/* ---------- hero ---------- */
.hero{ background:var(--ink); color:var(--on-dark); position:relative; overflow:hidden; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60rem 30rem at 82% -10%, rgba(3,105,161,.30), transparent 60%),
    linear-gradient(180deg, transparent 65%, rgba(0,0,0,.25));
}
.hero-in{ position:relative; z-index:1; padding-block:clamp(4rem,11vw,7.5rem); }
/* Interior pages are not the landing page and should not wear its hero. */
.hero--page .hero-in{ padding-block:clamp(2.5rem,6vw,4.25rem); }
.hero--page h1{ font-size:clamp(2rem,3.9vw,3rem); max-width:24ch; }
.hero--page .lead{ font-size:clamp(1rem,1.5vw,1.125rem); }
.hero h1{
  font-size:clamp(2.35rem,5.4vw,4.15rem);
  letter-spacing:-.035em; color:#fff; max-width:19ch; margin-bottom:var(--s-3);
}
.hero .lead{ max-width:56ch; color:#C3D2E3; font-size:clamp(1.0625rem,1.7vw,1.25rem); }
.hero a:not(.btn){ color:#7DD3FC; text-underline-offset:3px; }
.hero a:not(.btn):hover{ color:#BAE6FD; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-4); }

.hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; margin-top:clamp(2.5rem,6vw,var(--s-6));
  background:var(--dark-line); border:1px solid var(--dark-line);
}
.hero-stats div{ background:var(--ink); padding:1.25rem 1.35rem; }
.hero-stats dt{ font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); font-family:var(--font-display); }
.hero-stats dd{ margin:.45rem 0 0; font-family:var(--font-display); font-size:1.6rem; font-weight:600; color:#fff; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* ---------- hero video ---------- */
/* The poster is the guaranteed layer. The video is an enhancement injected by
   JS, so no viewer ever waits on it and reduced-motion never sees it move. */
.hero--video{ isolation:isolate; }
.hero-media{ position:absolute; inset:0; overflow:hidden; z-index:0; background:var(--ink); }
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:62% 50%;
  opacity:.5; filter:saturate(.7) contrast(1.05);
}
/* Scrim is banded to the text column rather than washed flat over the whole
   frame, so the photography stays legible instead of going grey. */
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(15,23,42,.94) 0%, rgba(15,23,42,.88) 34%, rgba(15,23,42,.52) 62%, rgba(15,23,42,.34) 100%),
    linear-gradient(to top, rgba(15,23,42,.85) 0%, rgba(15,23,42,0) 38%);
}
.hero--video::after{ display:none; }
.hero--video .hero-in{ position:relative; z-index:2; }
@media (max-width:760px){
  .hero-scrim{ background:linear-gradient(180deg, rgba(15,23,42,.82) 0%, rgba(15,23,42,.9) 55%, rgba(15,23,42,.96) 100%); }
  .hero-video{ opacity:.38; object-position:58% 50%; }
}

/* ---------- partner logo wall ---------- */
.band-logos{ background:var(--surface); border-block:1px solid var(--border); }
.lw-lead{
  font-family:var(--font-display); font-size:.6875rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  text-align:center; margin:0 0 clamp(1.75rem,4vw,2.5rem);
}
.logo-wall{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
  gap:1px; background:transparent;
}
.logo-wall--compact{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.lw-cell{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; padding:1.6rem 1.1rem 1.25rem; background:var(--surface);
  min-height:132px; text-align:center; position:relative;
  box-shadow:0 0 0 1px var(--border);
  transition:background .2s var(--ease);
}
a.lw-cell:hover{ background:#FCFDFE; }
.lw-mark{ display:flex; align-items:center; justify-content:center; height:46px; width:100%; }
.lw-mark img{
  max-height:46px; max-width:100%; width:auto; height:auto; display:block;
  /* Eighteen logos at eighteen different saturations is noise. A light
     desaturation at rest unifies them; full colour returns on hover. */
  filter:saturate(.46) contrast(1.03); opacity:.88;
  transition:filter .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease);
}
a.lw-cell:hover .lw-mark img,
a.lw-cell:focus-visible .lw-mark img{ filter:none; opacity:1; transform:translateY(-1px); }
.lw-dom{
  font-family:var(--font-mono); font-size:.6875rem; color:var(--ink-3);
  letter-spacing:.01em; word-break:break-all; line-height:1.4;
  transition:color .2s var(--ease);
}
a.lw-cell:hover .lw-dom{ color:var(--accent); }
.lw-cell.is-soon .lw-mark img{ filter:saturate(.12) opacity(.6); }
.lw-soon{
  font-family:var(--font-display); font-size:.5625rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--border-2); border-radius:2px; padding:.15rem .4rem; margin-top:.1rem;
}
.lw-note{ text-align:center; margin-top:clamp(1.5rem,3vw,2rem); font-size:.9375rem; color:var(--ink-3); }
.lw-note a{ font-family:var(--font-display); font-weight:600; white-space:nowrap; }
.lw-note svg{ vertical-align:-2px; }
@media (max-width:520px){
  .logo-wall,.logo-wall--compact{ grid-template-columns:repeat(2,1fr); }
  .lw-cell{ min-height:112px; padding:1.15rem .7rem 1rem; }
  .lw-mark{ height:36px; } .lw-mark img{ max-height:36px; }
  .lw-dom{ font-size:.625rem; }
}

/* register: alias + not-yet-live rows */
.reg-alias{ display:block; color:var(--ink-3); opacity:.8; }
.reg-nolink{ font-family:var(--font-display); font-weight:600; font-size:1.0625rem; color:var(--ink-2); letter-spacing:-.012em; }
.reg-tag{
  font-family:var(--font-display); font-style:normal; font-size:.5625rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--border-2); border-radius:2px; padding:.05rem .35rem; margin-left:.45rem;
}
.reg-row.is-soon{ opacity:.78; }
.reg-row.is-soon:hover{ background:transparent; }
.reg-row.is-soon:hover::before{ transform:scaleY(0); }

/* ---------- section head ---------- */
.sec-head{ max-width:70ch; margin-bottom:clamp(2rem,4vw,var(--s-5)); }
.sec-head h2{ font-size:clamp(1.65rem,3.1vw,2.35rem); margin-bottom:var(--s-2); }

/* ---------- audience cards ---------- */
.paths{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s-2); }
.path{
  position:relative;
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--s-3);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.path:hover{ border-color:var(--border-2); box-shadow:0 14px 28px -20px rgba(15,23,42,.35); transform:translateY(-2px); }
.path-ico{ color:var(--accent); margin-bottom:.35rem; }
.path h3{ font-size:1.0625rem; }
.path p{ font-size:.9375rem; color:var(--ink-2); line-height:1.6; }
.path .path-link{ margin-top:auto; padding-top:var(--s-2); font-family:var(--font-display); font-weight:600; font-size:.875rem; display:inline-flex; align-items:center; gap:.4rem; min-height:44px; }
/* stretch the card CTA over the whole card, as the register rows do */
.path .path-link::after{ content:""; position:absolute; inset:0; }
.path .path-link svg{ transition:transform .18s var(--ease); }
.path:hover .path-link svg{ transform:translateX(3px); }

/* ---------- capability grid ---------- */
.caps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:transparent; }
.cap{ background:var(--surface); padding:var(--s-3); box-shadow:0 0 0 1px var(--border); }
.cap-n{ font-family:var(--font-mono); font-size:.75rem; color:var(--accent); font-weight:600; letter-spacing:.06em; }
.cap h3{ font-size:1.0625rem; margin:.6rem 0 .45rem; }
.cap p{ font-size:.9375rem; color:var(--ink-2); line-height:1.6; }
.caps--dark{ background:transparent; }
.caps--dark .cap{ background:var(--ink); box-shadow:0 0 0 1px var(--dark-line); }
.caps--dark .cap-n{ color:#7DD3FC; }
.caps--dark h3{ color:#fff; }
.caps--dark p{ color:var(--on-dark-2); }

/* ---------- what we do: editorial list, deliberately NOT another card grid ---------- */
.work{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,4vw,3rem); }
@media (min-width:920px){
  .work{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(3rem,6vw,5.5rem); align-items:start; }
  .work-say{ position:sticky; top:104px; }
}
.work-say .lead{ margin-top:var(--s-2); }
.work-aside{
  margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--border);
  font-family:var(--font-display); font-size:.8125rem; font-weight:600; color:var(--ink-3);
  letter-spacing:.01em;
}
.work-list{ margin:0; padding:0; list-style:none; counter-reset:none; }
.work-item{
  display:grid; grid-template-columns:3.25rem minmax(0,1fr); gap:var(--s-2);
  padding:1.35rem 0; border-top:1px solid var(--border);
}
.work-item:last-child{ border-bottom:1px solid var(--border); }
.work-n{
  font-family:var(--font-mono); font-size:.8125rem; color:var(--accent);
  font-variant-numeric:tabular-nums; letter-spacing:.04em; padding-top:.2rem;
}
.work-item h3{ font-size:1.0625rem; margin-bottom:.35rem; }
.work-item p{ font-size:.9375rem; color:var(--ink-2); line-height:1.65; max-width:52ch; }
@media (max-width:520px){
  .work-item{ grid-template-columns:2.5rem minmax(0,1fr); gap:.75rem; }
}

/* ---------- the register ---------- */
.reg-sector{ margin-bottom:clamp(2.25rem,5vw,var(--s-5)); scroll-margin-top:5.5rem; }
.reg-sector:last-child{ margin-bottom:0; }
.reg-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-2); padding-bottom:.7rem; border-bottom:2px solid var(--ink); margin-bottom:0; flex-wrap:wrap; }
.reg-head h2,.reg-head h3{ font-size:1.0625rem; letter-spacing:.02em; }
.reg-count{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-3); letter-spacing:.06em; font-variant-numeric:tabular-nums; }

.reg-row{
  display:grid;
  grid-template-columns:3.25rem minmax(0,15rem) minmax(0,1fr) auto;
  align-items:center; gap:var(--s-2);
  padding:1.1rem 0 1.1rem 1rem;
  border-bottom:1px solid var(--border);
  position:relative;
  transition:background .18s var(--ease);
}
.reg-row::before{
  content:""; position:absolute; left:0; top:0; bottom:-1px; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform .22s var(--ease);
}
.reg-row:hover{ background:var(--surface); }
.reg-row:hover::before{ transform:scaleY(1); }
.reg-row:focus-within{ background:var(--surface); }

.reg-num{ font-family:var(--font-mono); font-size:.8125rem; color:var(--ink-3); font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.reg-name{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.reg-name a{ font-family:var(--font-display); font-weight:600; font-size:1.0625rem; color:var(--ink); letter-spacing:-.012em; }
.reg-name a:hover{ color:var(--accent); }
.reg-name a::after{ content:""; position:absolute; inset:0; }
.reg-dom{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-3); word-break:break-all; }
.reg-desc{ font-size:.9375rem; color:var(--ink-2); line-height:1.55; min-width:0; }
.reg-go{ color:var(--border-2); flex:none; transition:color .18s var(--ease), transform .18s var(--ease); }
.reg-row:hover .reg-go{ color:var(--accent); transform:translate(2px,-2px); }

@media (max-width:860px){
  .reg-row{ grid-template-columns:2.5rem minmax(0,1fr); row-gap:.45rem; padding-block:1rem; }
  .reg-desc{ grid-column:2 / -1; }
  .reg-go{ display:none; }
}

/* ---------- sector strip ---------- */
/* Seven sectors never fill a 3-col grid evenly. Hairlines go on the cells, not
   on the grid background, or the unfilled trailing track shows as a grey slab. */
.sectors{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:transparent; }
.sector{ background:var(--ink); padding:var(--s-3) 1.35rem; display:flex; flex-direction:column; gap:.4rem; box-shadow:0 0 0 1px var(--dark-line); }
.sector-n{ font-family:var(--font-mono); font-size:.75rem; color:#7DD3FC; font-variant-numeric:tabular-nums; }
.sector h3{ font-size:1rem; color:#fff; }
.sector p{ font-size:.875rem; color:var(--on-dark-2); line-height:1.55; }

/* ---------- CTA band ---------- */
.band{ background:var(--ink); color:var(--on-dark); }
.band--photo{ position:relative; isolation:isolate; overflow:hidden; }
.band-bg{ position:absolute; inset:0; z-index:0; }
.band-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 58%; display:block; }
/* the aisle already recedes to black at the sides, so the scrim only needs to
   protect the copy column and the bottom edge, not flatten the whole frame */
.band--photo .band-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(15,23,42,.93) 0%, rgba(15,23,42,.82) 40%, rgba(15,23,42,.46) 72%, rgba(15,23,42,.28) 100%),
    linear-gradient(to bottom, rgba(15,23,42,.55), rgba(15,23,42,.2) 45%, rgba(15,23,42,.7));
}
.band--photo .band-in{ position:relative; z-index:2; padding-block:clamp(3.5rem,8vw,6.5rem); }
@media (max-width:700px){
  .band--photo .band-scrim{ background:linear-gradient(180deg, rgba(15,23,42,.88), rgba(15,23,42,.94)); }
}
.band-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; padding-block:clamp(2.75rem,6vw,var(--s-6)); }
.band h2{ font-size:clamp(1.5rem,2.8vw,2.1rem); max-width:22ch; color:#fff; }
.band p{ color:var(--on-dark-2); margin-top:.7rem; max-width:48ch; }
.band-act{ display:flex; gap:var(--s-2); flex-wrap:wrap; }

/* ---------- prose ---------- */
.prose{ max-width:68ch; }
.prose h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin:var(--s-5) 0 var(--s-2); }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.125rem; margin:var(--s-4) 0 .6rem; }
.prose p{ margin-bottom:var(--s-2); color:var(--ink-2); }
.prose ul{ margin:0 0 var(--s-3); padding:0; }
.prose li{ position:relative; padding-left:1.4rem; margin-bottom:.6rem; color:var(--ink-2); }
.prose li::before{ content:""; position:absolute; left:0; top:.65em; width:6px; height:1px; background:var(--accent); }

.split{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,5vw,var(--s-6)); }
@media (min-width:940px){ .split{ grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); } }
.aside-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s-3); align-self:start; }
@media (min-width:940px){
  .aside-card--sticky{ position:sticky; top:6.5rem; max-height:calc(100dvh - 8rem); overflow-y:auto; }
}
.aside-card h3{ font-size:1rem; margin-bottom:var(--s-2); }
.aside-card dl{ margin:0; }
.aside-card dt{ font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-family:var(--font-display); margin-top:var(--s-2); }
.aside-card dt:first-child{ margin-top:0; }
.aside-card dd{ margin:.3rem 0 0; font-size:.9375rem; color:var(--ink-2); }
.aside-card dd a{ word-break:break-word; }

/* ---------- contact / form ---------- */
.form{ display:grid; gap:var(--s-3); max-width:36rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-family:var(--font-display); font-size:.875rem; font-weight:600; color:var(--ink); }
.field .req{ color:#B91C1C; }
.field .hint{ font-size:.8125rem; color:var(--ink-3); }
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--border-2); border-radius:var(--radius);
  padding:.7rem .85rem; min-height:46px; width:100%;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea{ min-height:9rem; resize:vertical; line-height:1.6; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(3,105,161,.14); }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{ border-color:#B91C1C; }
.field .err{ font-size:.8125rem; color:#B91C1C; font-weight:500; }
.field .err:empty{ display:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-note{ font-size:.8125rem; color:var(--ink-3); max-width:44ch; line-height:1.55; }
.form-status{ padding:.85rem 1rem; border-radius:var(--radius); font-size:.9375rem; border:1px solid; }
.form-status[hidden]{ display:none; }
.form-status.ok{ background:#ECFDF5; border-color:#A7F3D0; color:#065F46; }
.form-status.bad{ background:#FEF2F2; border-color:#FECACA; color:#991B1B; }

.contact-list{ display:grid; gap:var(--s-2); }
.contact-item{ display:flex; gap:.85rem; align-items:flex-start; }
.contact-item svg{ color:var(--accent); flex:none; margin-top:.15rem; }
.contact-item dt{ font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-family:var(--font-display); }
.contact-item dd{ margin:.15rem 0 0; font-size:.9375rem; color:var(--ink-2); }

/* Phone/email are the primary contact actions — give them a real touch target
   on touch devices without disturbing the desktop rhythm. */
@media (pointer:coarse){
  .contact-item dd a,.aside-card dd a{ display:inline-flex; align-items:center; min-height:44px; }
}

/* ---------- offices ---------- */
.offices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:transparent; }
.office{ background:var(--surface); padding:var(--s-3); box-shadow:0 0 0 1px var(--border); }
.office-role{ font-family:var(--font-display); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.office h3{ font-size:1.25rem; margin:.55rem 0 .2rem; }
.office-country{ font-size:.875rem; color:var(--ink-3); font-weight:500; }
.office-lines{ font-size:.9375rem; color:var(--ink-2); line-height:1.7; margin-top:var(--s-2); }

/* ---------- footer ---------- */
.site-foot{ background:var(--ink); color:var(--on-dark-2); font-size:.875rem; padding-block:clamp(3rem,6vw,var(--s-6)) var(--s-4); }
.foot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s-4); padding-bottom:var(--s-4); border-bottom:1px solid var(--dark-line); }
.foot-brand{ grid-column:span 1; }
@media (min-width:760px){ .foot-brand{ grid-column:span 2; max-width:28rem; } }
/* 16 partner names need real width, or they wrap three lines deep */
@media (min-width:1000px){
  .foot-grid{ grid-template-columns:1.5fr .85fr 1.1fr 1.9fr; }
  .foot-brand{ grid-column:auto; max-width:none; }
}
.foot-brand .brand{ margin-bottom:var(--s-3); }
.foot-brand .brand img{ height:44px; }
.foot-brand p{ color:var(--on-dark-2); line-height:1.65; }
.site-foot h2{ font-family:var(--font-display); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 .9rem; }
.site-foot li{ margin-bottom:.55rem; }
.site-foot a{ color:var(--on-dark-2); }
.site-foot a:hover{ color:#fff; }
.site-foot address{ font-style:normal; line-height:1.7; }
.foot-bot{ display:flex; justify-content:space-between; gap:var(--s-2); flex-wrap:wrap; padding-top:var(--s-3); font-size:.8125rem; }
.foot-legal{ max-width:78ch; color:#7A8CA3; font-size:.78125rem; line-height:1.6; padding-top:var(--s-3); }

.foot-partners{ columns:2; column-gap:var(--s-3); }
@media (max-width:520px){ .foot-partners{ columns:1; } }
.foot-partners li{ break-inside:avoid; }
.foot-soon{ color:#8395AD; }

/* ---------- reveal (fails visible; never depends on the observer) ---------- */
.reveal{ opacity:1; transform:none; }
html.js-reveal .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
html.js-reveal .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js-reveal .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media print{
  .site-head,.nav-toggle,.band,.hero::after{ display:none !important; }
  body{ background:#fff; }
  .hero,.dark,.site-foot{ background:#fff !important; color:#000 !important; }
  .hero h1,.dark h2,.dark h3{ color:#000 !important; }
}