/* ==========================================================
   VICTOR SURVEYS — "LANDFALL", landing-page cut
   Three photographic moments instead of six. The middle one
   is operated rather than read. Motion is scroll-driven CSS
   where the browser supports it, so nothing waits on JS and
   nothing moves for a reader who asked for stillness.
   ========================================================== */
:root{
  --mist:#FAFAF8;
  --mist-2:#F0F0EC;
  --ink:#0C1118;
  --ink-2:#5E6469;
  /* measured at 2.64:1 on white, 2.53 on paper, 2.31 on the tint — and it
     carried every field label, every placeholder and every hint. Darkened
     to clear 4.5:1 on all three grounds. */
  --ink-3:#666C73;
  --rule:#E2E2DC;

  /* --brand is the logo blue exactly. It is bright, so it carries
     graphics, fills and rules — never white body text (3.8:1).
     --blue is the same hue darkened to clear AA both ways: white on
     it, and it on the paper ground, both 5.5:1. */
  --brand:#2C7EFE;
  --blue:#1A62E0;
  --cyan:#5DE1E6;
  --ink-blue:#0A1220;
  --scrim:6,14,30;

  --f:"Outfit","Helvetica Neue",Arial,sans-serif;
  --gut:24px;
  --maxw:1320px;
  --dwell:7.5s;
}
@media (max-width:620px){ :root{ --gut:20px } }
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;background:var(--mist);color:var(--ink);
  font-family:var(--f);font-size:17px;font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:4px;border-radius:3px}
.panel :focus-visible{outline-color:var(--cyan)}

.hold{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- type ---------- */
.d1,.d2,.d3{margin:0;font-weight:700;letter-spacing:-.042em;line-height:.98;text-wrap:balance}
.d1{font-size:clamp(46px,8.2vw,118px)}
.d2{font-size:clamp(34px,5.2vw,72px);letter-spacing:-.038em;line-height:1.02}
.d3{font-size:clamp(27px,3.4vw,46px);letter-spacing:-.034em;line-height:1.05}
p{margin:0}
.lead{font-size:clamp(17.5px,1.6vw,21px);font-weight:300;line-height:1.55;color:var(--ink-2)}
.lead--light{color:rgba(255,255,255,.9)}
.measure{max-width:22ch}
.measure--p{max-width:46ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 30px;border-radius:999px;border:1.5px solid transparent;
  font-family:var(--f);font-size:16px;font-weight:500;letter-spacing:-.01em;cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s,transform .12s;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--fill{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn--fill:hover{background:#1550BE;border-color:#1550BE}
.btn--clear{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--clear:hover{border-color:var(--brand);color:var(--blue)}
.btn--glass{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(8px)}
.btn--glass:hover{background:rgba(255,255,255,.24);border-color:#fff}
.btn--sm{min-height:44px;padding:0 20px;font-size:15px}

/* ---------- header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:80;border-bottom:1px solid transparent;
  transition:background-color .3s ease,border-color .3s ease}
.top.solid{background:rgba(250,250,248,.9);backdrop-filter:saturate(160%) blur(14px);border-bottom-color:var(--rule)}
.top-in{display:flex;align-items:center;gap:20px;min-height:72px}
.mark{display:flex;align-items:center;gap:11px;color:#fff;flex:0 0 auto}
.mark:hover{text-decoration:none}
.top.solid .mark{color:var(--ink)}
.mark svg{width:26px;height:auto;flex:0 0 auto}
.mark span{font-size:19px;font-weight:600;letter-spacing:-.04em;white-space:nowrap}
/* the lockup carries the parent brand under the wordmark, as the company
   profile does; the header keeps the wordmark alone so the bar stays one line */
.mark--lock .mark-wm{display:flex;flex-direction:column;line-height:1.05}
.mark--lock .mark-wm small{
  font-size:9.5px;font-weight:600;letter-spacing:.055em;
  opacity:.62;margin-top:4px;white-space:nowrap;
}
.mark--lock svg{width:34px}
/* site navigation — added once the landing page had siblings */
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{font-size:15px;font-weight:400;color:rgba(255,255,255,.88);padding:9px 14px;border-radius:999px;transition:background-color .18s,color .18s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.14);text-decoration:none}
.nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.18)}
.top.solid .nav a{color:var(--ink-2)}
.top.solid .nav a:hover{color:var(--ink);background:var(--mist-2)}
.top.solid .nav a[aria-current="page"]{color:var(--ink);background:var(--mist-2)}
@media (max-width:1000px){.nav{display:none}}
.top-right{display:flex;align-items:center;gap:16px;margin-left:auto;flex:0 0 auto}
.top-tel{font-size:15px;color:rgba(255,255,255,.9);white-space:nowrap}
.top.solid .top-tel{color:var(--ink-2)}
.top-tel:hover{text-decoration:none;color:#fff}
.top.solid .top-tel:hover{color:var(--ink)}
.top.solid .btn--glass{background:var(--blue);color:#fff;border-color:var(--blue)}
.top.solid .btn--glass:hover{background:#1550BE;border-color:#1550BE}
@media (max-width:520px){.top-tel{display:none}}

/* ---------- panels ---------- */
.panel{position:relative;isolation:isolate;background:var(--ink-blue);overflow:hidden}
.panel-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.panel-bg img{width:100%;height:100%;object-fit:cover;will-change:transform}
.panel-bg::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,
    rgba(var(--scrim),.94) 0%, rgba(var(--scrim),.86) 30%,
    rgba(var(--scrim),.56) 60%, rgba(var(--scrim),.32) 82%, rgba(var(--scrim),.50) 100%);
}
.panel-in{
  position:relative;z-index:1;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(520px,76vh,760px);padding-block:126px 52px;
}
.panel--hero .panel-in{min-height:clamp(560px,86vh,880px);padding-block:150px 58px}
/* The eyebrow sat over a bright patch of water: 3.48:1 at the worst pixel.
   The hero gets its own, bottom-weighted scrim so the text band is dark
   enough, while the top of the frame keeps the port visible. */
.panel--hero .panel-bg::after{
  background:linear-gradient(to top,
    rgba(var(--scrim),.96) 0%, rgba(var(--scrim),.93) 32%,
    rgba(var(--scrim),.86) 52%, rgba(var(--scrim),.54) 74%,
    rgba(var(--scrim),.28) 90%, rgba(var(--scrim),.56) 100%);
}
.panel--hero .panel-bg::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(74% 58% at 88% 8%, rgba(44,126,254,.30), transparent 62%),
    radial-gradient(60% 50% at 4% 96%, rgba(93,225,230,.16), transparent 66%);
}
.panel--claims .panel-in{min-height:clamp(440px,60vh,620px);padding-block:104px 48px}
.panel-in .d1,.panel-in .d2,.panel-in .d3{color:#fff}
.panel-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
.kick{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:22px;
  font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.96);
  text-shadow:0 1px 2px rgba(6,11,17,.85), 0 2px 14px rgba(6,11,17,.55);
}
.kick i{display:block;width:26px;height:1.5px;background:var(--cyan);flex:0 0 auto}
.stack{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
/* every chip is a real link to that service's page */
.stack span,.stack a{
  font-size:14px;font-weight:400;color:rgba(255,255,255,.95);
  border:1px solid rgba(93,225,230,.42);border-radius:999px;padding:8px 16px;
  background:rgba(44,126,254,.14);backdrop-filter:blur(4px);
  transition:background-color .18s,border-color .18s;
}
.stack a:hover,.stack a:focus-visible{
  background:rgba(44,126,254,.34);border-color:var(--cyan);color:#fff;text-decoration:none;
}
.credit{
  position:absolute;right:var(--gut);bottom:12px;z-index:3;
  font-size:11px;font-weight:300;color:rgba(255,255,255,.45);
}
.credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* scroll cue on the hero */
.cue{
  position:absolute;left:var(--gut);bottom:14px;z-index:3;
  display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.cue i{display:block;width:1.5px;height:26px;background:linear-gradient(to bottom,var(--cyan),transparent)}
@media (max-width:760px){.cue{display:none}}

/* ---------- the operated panel ---------- */
.stagewrap .panel-bg img{position:absolute;inset:0;opacity:0;transition:opacity .62s ease}
.stagewrap .panel-bg img.on{opacity:1}
.tabs{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px;
}
.tab{
  display:inline-flex;align-items:baseline;gap:9px;
  font-family:var(--f);font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  color:rgba(255,255,255,.82);cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:11px 19px;backdrop-filter:blur(4px);
  transition:background-color .2s,border-color .2s,color .2s;
}
.tab .num{font-size:11px;letter-spacing:.14em;color:var(--cyan);font-variant-numeric:tabular-nums}
.tab:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#fff}
.tab[aria-selected="true"]{background:var(--blue);border-color:var(--brand);color:#fff}
.tab[aria-selected="true"] .num{color:rgba(255,255,255,.72)}
.stagebody{min-height:1px}
.stagebody.fading{opacity:.18;transition:opacity .16s ease}
.stagebody{transition:opacity .34s ease}
.stageline{
  display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
/* three segments; the live one fills over the dwell time, so the bar
   IS the timer — the advance is driven by its animationend, which means
   pausing the animation pauses the sequence with nothing to keep in sync */
.segs{display:flex;gap:6px;flex:0 1 230px;max-width:230px;min-width:120px}
.seg{flex:1 1 auto;height:2px;background:rgba(255,255,255,.24);overflow:hidden;border-radius:2px}
.seg i{display:block;height:100%;width:100%;background:var(--cyan);transform:scaleX(0);transform-origin:left}
.seg.done i{transform:scaleX(1)}
.seg.run i{animation:fill var(--dwell) linear forwards}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stagewrap.held .seg.run i{animation-play-state:paused}

.pause{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 auto;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.32);border-radius:999px;
  background:rgba(255,255,255,.08);color:#fff;backdrop-filter:blur(4px);
  transition:background-color .2s,border-color .2s;
}
.pause:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6)}
.pause svg{width:11px;height:11px;display:block}
.pause .ico-play{display:none}
.pause[aria-pressed="true"] .ico-play{display:block}
.pause[aria-pressed="true"] .ico-pause{display:none}

/* The logo is three triangles on a 60-degree grid. Borrowing that one
   shape as the page's marker makes the brand structural rather than
   sprinkled — it appears where the page already needed a bullet. */
.tri{
  display:block;width:9px;height:8px;flex:0 0 auto;
  background:var(--brand);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.tri--cyan{background:var(--cyan)}

::selection{background:rgba(93,225,230,.38);color:var(--ink)}

/* ---------- interstitials ---------- */
.rest{padding-block:clamp(72px,9vw,128px)}
.rest--tint{background:var(--mist-2)}
.rest-mid{max-width:23ch}
.rest-two{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:880px){
  .rest-two{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(44px,6vw,96px);align-items:end}
}

/* the seam: a hairline that draws itself as the section arrives */
.seam{height:2.5px;background:var(--rule);position:relative;overflow:hidden}
.seam::after{
  content:"";position:absolute;inset:0 auto 0 0;width:100%;
  background:linear-gradient(to right,var(--brand),var(--cyan));
  transform:scaleX(1);transform-origin:left;
}

.quiet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--rule)}
@media (max-width:860px){.quiet{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:500px){.quiet{grid-template-columns:1fr}}
.q{padding:26px 26px 28px 0;border-bottom:1px solid var(--rule)}
.q:not(:last-child){border-right:1px solid var(--rule)}
.q:not(:first-child){padding-left:26px}
@media (max-width:860px){
  .q{padding-left:0}
  .q:nth-child(even){padding-left:26px;border-right:0}
  .q:nth-child(odd){border-right:1px solid var(--rule)}
}
@media (max-width:500px){.q{padding-left:0!important;border-right:0!important}}
.q .tri{margin-bottom:12px}
.q b{display:block;font-size:20px;font-weight:600;letter-spacing:-.03em;margin-bottom:7px}
.q span{font-size:15.5px;line-height:1.55;color:var(--ink-2)}

/* who instructs us — three audiences, each in its own language */
.who{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(40px,5vw,68px);border-top:1px solid var(--rule)}
@media (min-width:880px){.who{grid-template-columns:repeat(3,minmax(0,1fr))}}
.who-col{
  padding:28px 28px 32px 0;border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:13px;
}
.who-col:not(:last-child){border-right:1px solid var(--rule)}
.who-col:not(:first-child){padding-left:28px}
@media (max-width:879px){.who-col{padding-left:0!important;border-right:0!important}}
.who-col h3{margin:0;font-size:23px;font-weight:600;letter-spacing:-.032em;line-height:1.15}
.who-col .said{
  font-size:16.5px;line-height:1.5;color:var(--ink);font-weight:400;
  padding-left:14px;border-left:2.5px solid var(--brand);
}
.who-col p{font-size:15px;line-height:1.56;color:var(--ink-2)}
.who-col .go{
  margin-top:auto;padding-top:8px;font-size:15px;font-weight:500;color:var(--blue);
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  transition:gap .18s ease;
}
.who-col .go:hover{text-decoration:none;gap:13px}
.who-col .go svg{width:14px;height:14px;flex:0 0 auto}
.who-note{
  margin-top:26px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:74ch;
  padding-left:18px;border-left:2.5px solid var(--rule);
}

/* coverage */
.cov-two{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;margin-top:clamp(40px,5vw,68px)}
@media (min-width:880px){.cov-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4.5vw,72px)}}
.base{padding-top:22px;border-top:2.5px solid var(--brand)}
.base .k{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:11px}
.base h3{margin:0 0 9px;font-size:28px;font-weight:600;letter-spacing:-.035em;line-height:1.1}
.base p{font-size:15.5px;line-height:1.56;color:var(--ink-2);max-width:40ch}
.base address{font-style:normal;font-size:14px;line-height:1.6;color:var(--ink-3);margin-top:12px}

.regions{display:flex;flex-wrap:wrap;margin-top:clamp(40px,5vw,66px);border-top:1px solid var(--rule)}
.reg{flex:1 1 190px;padding:22px 20px 24px 0;border-bottom:1px solid var(--rule)}
.reg:not(:last-child){border-right:1px solid var(--rule)}
.reg:not(:first-child){padding-left:20px}
@media (max-width:760px){.reg{padding-left:0!important;border-right:0!important;flex-basis:100%}}
.reg h4{margin:0 0 10px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.reg p{font-size:15.5px;line-height:1.7;color:var(--ink);font-weight:400}
.note{margin-top:26px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:72ch;padding-left:18px;border-left:2.5px solid var(--brand)}

/* process — four tight lines */
.flow{margin-top:clamp(38px,4.5vw,64px);border-top:1px solid var(--rule)}
.flow-row{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding:22px 0;border-bottom:1px solid var(--rule)}
@media (min-width:780px){.flow-row{grid-template-columns:56px minmax(0,260px) minmax(0,1fr);gap:28px;align-items:baseline}}
.flow-row .n{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;letter-spacing:.18em;color:var(--blue)}
.flow-row h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.032em;line-height:1.15}
.flow-row p{font-size:15.5px;line-height:1.58;color:var(--ink-2);max-width:56ch}

/* contact */
.reach{display:grid;grid-template-columns:minmax(0,1fr);gap:38px;margin-top:clamp(40px,5vw,66px)}
@media (min-width:920px){.reach{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,5.5vw,84px);align-items:start}}
.reach-big a{display:block;font-weight:600;letter-spacing:-.035em;line-height:1.1;color:var(--ink)}
.reach-big a:hover{color:var(--blue);text-decoration:none}
.reach-big .tel{font-size:clamp(29px,3.8vw,46px);margin-bottom:10px}
.reach-big .mail{font-size:clamp(18px,2vw,25px);font-weight:400;color:var(--ink-2)}
.reach-notes{margin-top:30px;border-top:1px solid var(--rule)}
.reach-notes .n{padding:16px 0;border-bottom:1px solid var(--rule)}
.reach-notes .n{position:relative;padding-left:21px}
.reach-notes .n .tri{position:absolute;left:0;top:23px}
.reach-notes b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.reach-notes span{font-size:14.5px;line-height:1.55;color:var(--ink-2)}

.form{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:clamp(22px,3vw,34px)}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:620px){.g2{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:8px}
.f--full{grid-column:1/-1}
/* .lg is the fieldset legend — it sits outside .f, so it needs its own
   selector or "Attendance" renders unstyled next to the other labels */
.f label,.lg{font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.f input,.f select,.f textarea{
  font-family:var(--f);font-size:16px;font-weight:300;color:var(--ink);background:var(--mist);
  border:1.5px solid var(--rule);border-radius:10px;padding:13px 15px;min-height:52px;width:100%;
  transition:border-color .16s,background-color .16s;
}
.f textarea{min-height:96px;resize:vertical;line-height:1.55}
.f select{
  appearance:none;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 24px,calc(100% - 15px) 24px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--ink-3)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink);outline:none;background:#fff}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-3)}
.f .hint{font-size:13px;color:var(--ink-3);line-height:1.45}
.f .err{font-size:13px;font-weight:500;color:#B3261E;display:none}
.f.bad .err{display:block}
.f.bad input,.f.bad select{border-color:#B3261E}
fieldset{border:0;margin:0;padding:0;grid-column:1/-1}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.pills label{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1.5px solid var(--rule);border-radius:999px;padding:11px 18px;
  font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--mist);
  transition:border-color .15s,background-color .15s;
}
.pills label:hover{border-color:var(--ink-3)}
.pills input{appearance:none;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--ink-3);
  margin:0;padding:0;min-height:0;background:transparent;flex:0 0 auto}
.pills input:checked{border-color:var(--ink);box-shadow:inset 0 0 0 3.5px var(--ink)}
.pills label:has(input:checked){border-color:var(--ink);background:#fff}
.form-ft{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.form-ft .hint{font-size:13.5px;color:var(--ink-3);max-width:32ch}
.receipt{margin-top:22px;border:1.5px solid var(--ink);border-radius:12px;background:var(--mist-2);padding:22px}
.receipt[hidden]{display:none!important}
.receipt .rh{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:13px}
.receipt pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7;margin:0 0 16px;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.receipt .ra{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- foot ---------- */
.foot{background:var(--ink-blue);color:#EDEEF0;padding-block:58px 28px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:40px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot .mark{color:#fff;margin-bottom:16px}
.foot-blurb{font-size:15.5px;line-height:1.6;color:rgba(237,238,240,.66);max-width:38ch}
.fc h4{margin:0 0 13px;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,238,240,.55)}
.fc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fc a{font-size:15.5px;color:#EDEEF0;font-weight:300}
.fc a:hover{color:var(--cyan)}
.fc .addr{font-style:normal;font-size:15px;line-height:1.6;color:rgba(237,238,240,.66);font-weight:300}
.credits{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;font-weight:300;line-height:1.65;color:rgba(237,238,240,.5);max-width:96ch}
.credits a{color:rgba(237,238,240,.68);text-decoration:underline;text-underline-offset:2px}
.credits strong{color:rgba(237,238,240,.72);font-weight:500}
.foot-ft{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:22px;font-size:13px;font-weight:300;color:rgba(237,238,240,.5)}

/* ==========================================================
   MOTION
   All of it is scroll- or time-driven CSS. Nothing is hidden
   waiting on JavaScript, so the page at rest is the whole
   page — and every rule below is inside a reduced-motion
   guard, so a reader who asked for stillness gets stillness.
   ========================================================== */
@media (prefers-reduced-motion: no-preference){

  /* the hero breathes — a slow push on the image itself */
  .hero-img{animation:breathe 30s ease-in-out infinite alternate}
  @keyframes breathe{
    from{transform:scale(1.03) translate3d(0,0,0)}
    to{transform:scale(1.13) translate3d(-1.4%,-1%,0)}
  }

  @supports (animation-timeline: view()){
    /* content rises into place as its section arrives */
    /* NB: the floor is .5, never 0 — a section must never be able to
       render blank in a print, a thumbnail or a full-page capture. */
    .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 2% cover 22%}
    @keyframes rise{from{opacity:.5;transform:translateY(22px)}to{opacity:1;transform:none}}

    .rise-2{animation:rise linear both;animation-timeline:view();animation-range:entry 8% cover 30%}

    /* panel photographs drift against the scroll */
    .drift{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes drift{
      from{transform:scale(1.14) translate3d(0,-2.6%,0)}
      to{transform:scale(1.14) translate3d(0,2.6%,0)}
    }

    /* the seam between a photograph and the page draws itself */
    .seam::after{
      animation:draw linear both;animation-timeline:view();animation-range:entry 0% cover 24%;
    }
    @keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

    /* the scroll cue fades out once you have taken the hint */
    .cue{animation:cuefade linear both;animation-timeline:view();animation-range:cover 0% cover 18%}
    @keyframes cuefade{from{opacity:1}to{opacity:0}}
  }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
  .pause{display:none}
  .seg.done i,.seg.run i{transform:scaleX(1)}
  html{scroll-behavior:auto}
  .stagewrap .panel-bg img{transition:none}
}
html{scroll-behavior:smooth}
/* ---------- published times ---------- */
.times{
  margin-top:clamp(36px,4.5vw,60px);display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);grid-template-columns:minmax(0,1fr);
}
@media (min-width:680px){.times{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1020px){.times{grid-template-columns:repeat(4,minmax(0,1fr))}}
.time{background:var(--mist);padding:clamp(24px,2.5vw,32px);display:flex;flex-direction:column;gap:10px}
.rest--tint .time{background:var(--mist-2)}
.time--final{background:var(--ink-blue)}
.rest--tint .time--final{background:var(--ink-blue)}
.t-n{
  font-size:clamp(30px,3.4vw,42px);font-weight:600;letter-spacing:-.045em;line-height:1;
  color:var(--blue);font-variant-numeric:tabular-nums;
}
.time--final .t-n{color:var(--cyan);display:flex;align-items:baseline;gap:7px}
.t-n small{font-size:14px;font-weight:500;letter-spacing:.04em;color:#fff;opacity:.72}
.t-d{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.time--final .t-d{color:rgba(255,255,255,.82)}

/* ---------- network reach ---------- */
.netgrid{
  margin-top:clamp(28px,3vw,40px);display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);grid-template-columns:minmax(0,1fr);
}
@media (min-width:860px){.netgrid{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}}
.ng{background:var(--mist);padding:clamp(24px,2.5vw,32px)}
.ng .k{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.ng p{font-size:15px;line-height:1.62;color:var(--ink-2)}
.ng .ng-big{
  font-size:clamp(28px,3.2vw,40px);font-weight:600;letter-spacing:-.045em;line-height:1.05;
  color:var(--ink);margin-bottom:12px;font-variant-numeric:tabular-nums;
}
.ng .ng-big small{font-size:13.5px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);margin-left:7px}
.ng .ng-plus{color:var(--brand);margin:0 4px}
.ports{margin-top:14px}
.ports b{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:5px;
}

/* ---------- client marks ----------
   The client's own client list. Desaturated rather than silhouetted, because
   a flat black fill destroys the marks built on colour contrast. */
.logos{background:#fff;border-block:1px solid var(--rule)}
.logos-in{padding-block:clamp(44px,5vw,72px)}
.logos-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin-bottom:clamp(26px,3vw,40px);
}
.logos-head p{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:slide var(--marq,64s) linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.logo{
  flex:0 0 auto;width:178px;height:80px;margin-right:28px;
  display:grid;place-items:center;
}
.logo img{max-width:150px;max-height:40px;width:auto;height:auto;
  filter:grayscale(1) brightness(.62) contrast(1.35);opacity:.85;
  transition:filter .25s,opacity .25s}
.logo:hover img{filter:none;opacity:1}
.logos-note{
  margin-top:24px;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:74ch;
  padding-left:18px;border-left:2.5px solid var(--brand);
}
.tel--2{display:block;margin-top:6px}
@media (prefers-reduced-motion: reduce){
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none}
}

/* ---------- the small-screen menu ----------
   The primary nav is hidden below 1000px, and nothing replaced it: on a phone
   or a tablet the only way off a page was the footer. This is that way. */
.navbtn{
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  width:44px;height:44px;flex:0 0 auto;padding:0;cursor:pointer;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.5);border-radius:999px;
  transition:background-color .2s,border-color .2s;
}
.navbtn span{display:block;width:16px;height:1.6px;background:#fff;transition:transform .22s,opacity .18s}
.top.solid .navbtn,.top--fixed .navbtn{background:var(--mist-2);border-color:var(--rule)}
.top.solid .navbtn span,.top--fixed .navbtn span{background:var(--ink)}
.navbtn:hover{background:rgba(255,255,255,.26)}
.top.solid .navbtn:hover,.top--fixed .navbtn:hover{background:var(--rule)}
.navbtn[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.navbtn[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
@media (max-width:1000px){.navbtn{display:flex}}

.navmenu{
  background:rgba(250,250,248,.985);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--rule);
}
.navmenu[hidden]{display:none}
.navmenu-in{display:flex;flex-direction:column;padding-block:8px 18px}
.navmenu a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 2px;font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.navmenu a:hover{text-decoration:none;color:var(--blue)}
.navmenu a[aria-current="page"]{color:var(--blue)}
.navmenu .nm-tel{font-size:15.5px;font-weight:400;color:var(--ink-2)}
.navmenu .nm-tel b{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.navmenu .nm-tel:last-child{border-bottom:0}
@media (max-width:420px){.navmenu a{font-size:17px;padding:13px 2px}}

/* ---------- responsive corrections ----------
   Measured, not guessed: at 320px the header ran 20px past the viewport, and
   on touch widths a set of controls sat under the 44px finger target. */
@media (max-width:399px){
  .btn--sm{padding:0 15px;font-size:14.5px}
  .top-in{gap:12px}
}
/* Below this the wordmark and the call to action cannot both fit the bar.
   The glyph carries the brand; the button carries the job. */
@media (max-width:359px){
  .mark span{display:none}
  /* with the wordmark gone the logo link is only the glyph wide */
  .mark{min-width:44px}
}
@media (max-width:900px){
  .mark{padding-block:6px}
  .fc ul{gap:1px}
  .fc a{display:inline-block;padding:11px 0;line-height:1.25}
  .fc .addr{padding-block:6px}
  .foot-mail a{display:inline-block;padding:10px 0}
  .who-col .go{padding-block:11px}
  .reach-big .tel{padding-block:7px}
  .reach-big .mail{padding-block:12px}
  .globe-list button{padding:12px 10px}
  .globe-spin{min-height:44px;padding:0 18px}
  .pause{width:44px;height:44px}
  .tab{padding:14px 19px}
}
/* the fine print was under the readable floor */
.credit{font-size:12px}
.mark--lock .mark-wm small{font-size:11.5px;letter-spacing:.03em}

/* ---------- the globe ----------
   A dark instrument inset into the paper page. The canvas is decorative in
   the accessibility tree — the list beside it is the real content, and every
   row in it drives the globe, so nothing here is mouse-only. */
.globe{
  margin-top:clamp(36px,4.5vw,60px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  border:1px solid var(--rule);border-radius:18px;overflow:hidden;background:var(--ink-blue);
}
@media (min-width:940px){.globe{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.globe-stage{
  position:relative;aspect-ratio:1/1;
  background:
    radial-gradient(64% 58% at 30% 22%, #16233C 0%, #0C1524 46%, #070C16 100%);
  display:grid;place-items:center;touch-action:pan-y;cursor:grab;
}
@media (min-width:940px){.globe-stage{aspect-ratio:auto;min-height:min(560px,40vw)}}
.globe-stage.dragging{cursor:grabbing}
.globe-stage canvas{width:100%;height:100%;display:block}
.globe-tip{
  position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-142%);
  background:rgba(7,12,22,.94);border:1px solid rgba(93,225,230,.5);border-radius:9px;
  padding:7px 11px;white-space:nowrap;
  font-size:13px;font-weight:500;color:#fff;letter-spacing:-.01em;
  box-shadow:0 6px 22px rgba(0,0,0,.5);
}
.globe-tip small{display:block;font-size:11px;font-weight:400;color:var(--cyan);letter-spacing:.09em;text-transform:uppercase;margin-top:2px}
.globe-tip[hidden]{display:none}

.globe-side{
  padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:16px;
  border-top:1px solid rgba(255,255,255,.13);
}
@media (min-width:940px){.globe-side{border-top:0;border-left:1px solid rgba(255,255,255,.13)}}
.globe-side .k{
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.globe-side .gl-lead{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.globe-list{list-style:none;margin:0;padding:0;display:grid;align-content:start;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
@media (min-width:520px) and (max-width:939px){.globe-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.globe-list button{
  width:100%;text-align:left;cursor:pointer;
  font-family:var(--f);font-size:13.5px;font-weight:400;letter-spacing:-.01em;
  color:rgba(255,255,255,.82);background:transparent;border:1px solid transparent;
  border-radius:8px;padding:7px 9px;display:flex;align-items:center;gap:8px;
  transition:background-color .16s,border-color .16s,color .16s;
}
.globe-list button::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--cyan);opacity:.55;transition:opacity .16s,transform .16s;
}
.globe-list li.is-office button::before{background:var(--brand);opacity:.95;box-shadow:0 0 0 2.5px rgba(44,126,254,.25)}
.globe-list button:hover,.globe-list button:focus-visible{
  background:rgba(255,255,255,.09);border-color:rgba(93,225,230,.34);color:#fff;
}
.globe-list li.on button{background:rgba(44,126,254,.22);border-color:var(--cyan);color:#fff}
.globe-list button:hover::before,.globe-list li.on button::before{opacity:1;transform:scale(1.3)}

.globe-ft{
  margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.13);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.globe-key{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.62)}
.globe-key span{display:inline-flex;align-items:center;gap:6px}
.globe-key i{width:8px;height:8px;border-radius:50%;display:block}
.globe-key .i-port{background:var(--cyan)}
.globe-key .i-office{background:var(--brand);box-shadow:0 0 0 2.5px rgba(44,126,254,.28)}
.globe-key .i-net{background:#1C3F78;border-radius:2px;width:12px;height:8px}
.globe-spin{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:36px;padding:0 14px;cursor:pointer;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.3);border-radius:999px;
  background:rgba(255,255,255,.08);color:#fff;
  font-family:var(--f);font-size:13px;font-weight:500;
  transition:background-color .2s,border-color .2s;
}
.globe-spin:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6)}
.globe-spin svg{width:10px;height:10px;display:block}
.globe-spin .g-play{display:none}
.globe-spin[aria-pressed="true"] .g-play{display:block}
.globe-spin[aria-pressed="true"] .g-pause{display:none}
.globe-note{
  margin-top:20px;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:74ch;
  padding-left:18px;border-left:2.5px solid var(--brand);
}
@media (prefers-reduced-motion: reduce){ .globe-spin{display:none} }
@media (max-width:900px){
  .globe-list button{padding:12px 10px}
  .globe-spin{min-height:44px;padding:0 18px}
}

/* ==========================================================
   INNER PAGES
   The homepage opens on an 86vh photograph. If every page did
   that, none of them would feel like a level down. Inner pages
   open on a short band instead — photographic where the subject
   is a place or a job, typographic where it is a utility.
   ========================================================== */

.top--fixed{background:rgba(250,250,248,.92);backdrop-filter:saturate(160%) blur(14px);border-bottom-color:var(--rule)}
.top--fixed .mark{color:var(--ink)}
.top--fixed .top-tel{color:var(--ink-2)}
.top--fixed .nav a{color:var(--ink-2)}
.top--fixed .btn--glass{background:var(--blue);color:#fff;border-color:var(--blue)}
.top--fixed .btn--glass:hover{background:#1550BE;border-color:#1550BE}

/* real navigation — the homepage had none, because it had nowhere to go */
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{
  font-size:15px;font-weight:400;color:rgba(255,255,255,.88);
  padding:9px 14px;border-radius:999px;transition:background-color .18s,color .18s;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.14);text-decoration:none}
.nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.18)}
.top--fixed .nav a:hover{color:var(--ink);background:var(--mist-2)}
.top--fixed .nav a[aria-current="page"]{color:var(--ink);background:var(--mist-2)}
@media (max-width:1000px){.nav{display:none}}

/* ---------- the short opening band ---------- */
.phero{position:relative;isolation:isolate;background:var(--ink-blue);overflow:hidden}
.phero .panel-bg::after{
  background:linear-gradient(to top,
    rgba(var(--scrim),.95) 0%, rgba(var(--scrim),.90) 40%,
    rgba(var(--scrim),.78) 70%, rgba(var(--scrim),.66) 100%);
}
.phero-in{
  position:relative;z-index:1;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(330px,46vh,470px);padding-block:132px 46px;
}
.phero-in h1{color:#fff;font-size:clamp(38px,5.6vw,78px);font-weight:700;letter-spacing:-.04em;line-height:1;margin:0;max-width:17ch}
.phero-in .lead{margin-top:20px;max-width:52ch}

/* typographic opening, for the utility page */
.thead{background:var(--mist-2);border-bottom:1px solid var(--rule)}
.thead-in{padding-block:140px 56px}
.thead-in h1{font-size:clamp(38px,5.6vw,78px);font-weight:700;letter-spacing:-.04em;line-height:1;margin:0;max-width:16ch}
.thead-in .lead{margin-top:20px;max-width:56ch}
.crumb{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
  font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
.crumb a{color:var(--blue)}
.crumb .sep{color:var(--ink-3)}
.crumb .here{color:var(--ink-3)}
.phero-in .crumb{color:rgba(255,255,255,.8)}
.phero-in .crumb a{color:var(--cyan)}
.phero-in .crumb .sep,.phero-in .crumb .here{color:rgba(255,255,255,.62)}

/* ---------- team ---------- */
/* Six real people now, not six slots. Portraits sit left of the name so the
   card reads as a person, and the bio carries the card's height — which is why
   the grid is two-up rather than three: an 11-line bio in a third-column card
   sets a 22-character measure. */
.team{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(36px,4.5vw,60px)}
@media (min-width:760px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1220px){.team{grid-template-columns:repeat(3,minmax(0,1fr))}}
.member{background:var(--mist);padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;gap:14px}
.rest--tint .member{background:var(--mist-2)}
.member-face{
  aspect-ratio:1/1;width:92px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  background:var(--ink-blue);
}
.member-face img{width:100%;height:100%;object-fit:cover;display:block}
.member-head{display:flex;flex-direction:column;gap:3px}
.member-name{font-size:19.5px;font-weight:600;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.member-role{font-size:14.5px;line-height:1.45;color:var(--blue);font-weight:500}
/* measured at 4.25:1 on the blue-tinted pill over the tint section — under AA
   for 11.5px. White pill with a blue hairline instead: 5.46:1, same accent. */
.member-yrs{
  display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;
  background:#fff;border:1px solid rgba(44,126,254,.28);color:var(--blue);
  font-size:11.5px;font-weight:600;letter-spacing:.02em;vertical-align:1px;
}
.member-bio{font-size:15px;line-height:1.62;color:var(--ink-2);margin:0}
.member-tags{list-style:none;margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:6px}
.member-tags li{
  font-size:11.5px;font-weight:500;letter-spacing:.06em;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:999px;padding:3px 10px;background:#fff;
}
.rest--tint .member-tags li{background:var(--mist)}

/* ---------- mission ---------- */
.mission{
  margin-top:clamp(30px,3.6vw,48px);padding:clamp(24px,2.6vw,34px);
  background:var(--mist-2);border-left:3px solid var(--brand);
}
.mission h3{
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px;
}
.mission .ticks{display:grid;gap:11px}
@media (min-width:860px){.mission .ticks{grid-template-columns:1fr 1fr;gap:11px 34px}}

/* ---------- the six steps ---------- */
.steps{
  list-style:none;margin:clamp(36px,4.5vw,60px) 0 0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{
  display:flex;gap:16px;padding:clamp(22px,2.2vw,30px);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.step-n{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--cyan);color:var(--ink-blue);
  font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;
}
.step h3{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px;line-height:1.25}
.step p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* ---------- published response times ---------- */
.times{
  margin-top:clamp(36px,4.5vw,60px);display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);grid-template-columns:minmax(0,1fr);
}
@media (min-width:680px){.times{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1020px){.times{grid-template-columns:repeat(4,minmax(0,1fr))}}
.time{background:var(--mist);padding:clamp(24px,2.5vw,32px);display:flex;flex-direction:column;gap:10px}
.rest--tint .time{background:var(--mist-2)}
.time--final{background:var(--ink-blue)}
.rest--tint .time--final{background:var(--ink-blue)}
.t-n{
  font-size:clamp(30px,3.4vw,42px);font-weight:600;letter-spacing:-.045em;line-height:1;
  color:var(--blue);font-variant-numeric:tabular-nums;
}
.time--final .t-n{color:var(--cyan);display:flex;align-items:baseline;gap:7px}
.t-n small{font-size:14px;font-weight:500;letter-spacing:.04em;color:#fff;opacity:.72}
.t-d{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.time--final .t-d{color:rgba(255,255,255,.82)}

/* ---------- network reach ---------- */
.reach-grid{
  margin-top:clamp(28px,3vw,40px);display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);grid-template-columns:minmax(0,1fr);
}
@media (min-width:860px){.reach-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}}
.rg{background:var(--mist);padding:clamp(24px,2.5vw,32px)}
.rest--tint .rg{background:var(--mist-2)}
.rg .k{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.rg p{font-size:15px;line-height:1.62;color:var(--ink-2)}
.rg .rg-big{
  font-size:clamp(28px,3.2vw,40px);font-weight:600;letter-spacing:-.045em;line-height:1.05;
  color:var(--ink);margin-bottom:12px;font-variant-numeric:tabular-nums;
}
.rg .rg-big small{font-size:13.5px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);margin-left:7px}
.rg .rg-plus{color:var(--brand);margin:0 4px}
.ports{margin-top:14px}
.ports b{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:5px;
}

/* ---------- milestones ---------- */
.msline{
  margin-top:clamp(36px,4.5vw,60px);display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);grid-template-columns:minmax(0,1fr);
}
@media (min-width:820px){.msline{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ms{background:var(--mist);padding:clamp(24px,2.6vw,34px)}
.rest--tint .ms{background:var(--mist-2)}
.ms-y{
  font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--blue);
  margin-bottom:12px;display:flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums;
}
.ms-y::before{content:"";width:0;height:0;border-left:9px solid var(--brand);border-block:6px solid transparent}
.ms--next .ms-y{color:var(--ink-3)}
.ms--next .ms-y::before{border-left-color:var(--cyan)}
.ms h3{font-size:19px;font-weight:600;letter-spacing:-.03em;color:var(--ink);margin-bottom:8px}
.ms p{font-size:15px;line-height:1.62;color:var(--ink-2)}
.ms--next{background:var(--mist-2);outline:1.5px dashed var(--rule);outline-offset:-1.5px}
.rest--tint .ms--next{background:#fff}

.slotnote{
  margin-top:22px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:74ch;
  padding-left:18px;border-left:2.5px solid var(--brand);
}

/* ---------- the published times, in a service aside ---------- */
.sla{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sla li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;align-items:baseline}
.sla b{
  font-size:14px;font-weight:700;color:var(--blue);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.sla span{font-size:14px;line-height:1.5;color:var(--ink-2)}
.sla-note{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--ink-3)}

/* The inner footer carries a column per office, so four in all — the shared
   sheet sizes the home page's three. */
@media (min-width:821px){
  .foot-grid{grid-template-columns:minmax(0,1.32fr) repeat(3,minmax(0,1fr))}
}
.foot-mail{margin-top:14px}
.foot-mail a{font-size:15.5px;font-weight:400;color:#EDEEF0}
.foot-mail a:hover{color:var(--cyan)}

/* ---------- contact routing ---------- */
.route .big em{
  display:block;font-style:normal;font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;
}
.route .big--2{margin-top:14px}


.routes{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(36px,4.5vw,60px);border-top:1px solid var(--rule)}
@media (min-width:880px){.routes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.route{padding:28px 28px 32px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:12px}
.route:not(:last-child){border-right:1px solid var(--rule)}
.route:not(:first-child){padding-left:28px}
@media (max-width:879px){.route{padding-left:0!important;border-right:0!important}}
.route .when{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.route h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.032em;line-height:1.15}
.route .big{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.03em;color:var(--ink);word-break:break-word}
.route .big:hover{color:var(--blue);text-decoration:none}
.route p{font-size:15px;line-height:1.56;color:var(--ink-2)}
.route .go{margin-top:auto;padding-top:6px;font-size:15px;font-weight:500;color:var(--blue);display:inline-flex;align-items:center;gap:8px;align-self:flex-start;transition:gap .18s}
.route .go:hover{text-decoration:none;gap:13px}
.route .go svg{width:14px;height:14px}

/* ---------- service detail ---------- */
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(34px,4vw,62px)}
@media (min-width:920px){.svc-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}}
.svc-block + .svc-block{margin-top:clamp(40px,5vw,66px)}
.svc-block h2{font-size:clamp(25px,2.8vw,36px);font-weight:700;letter-spacing:-.035em;line-height:1.08;margin:0 0 18px}
.steps-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.steps-list li{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--rule);
}
.steps-list .n{font-size:13px;font-weight:500;letter-spacing:.12em;color:var(--blue);font-variant-numeric:tabular-nums}
.steps-list .t{font-size:16px;line-height:1.55;color:var(--ink)}
.steps-list .t b{font-weight:600}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.ticks .tri{margin-top:6px}
.aside-card{
  background:var(--mist-2);border:1px solid var(--rule);border-radius:14px;padding:26px;
  display:flex;flex-direction:column;gap:16px;
}
.rest--tint .aside-card{background:#fff}
.aside-card h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.03em}
.aside-card p{font-size:15px;line-height:1.56;color:var(--ink-2)}
.aside-card .rule-sep{height:1px;background:var(--rule);border:0;margin:2px 0}
.related{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(32px,4vw,52px)}
@media (min-width:760px){.related{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.related{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rel{background:var(--mist);padding:22px;display:flex;flex-direction:column;gap:8px;transition:background-color .18s}
.rel:hover{background:#fff;text-decoration:none}
.rel .n{font-size:11.5px;font-weight:500;letter-spacing:.16em;color:var(--ink-3)}
.rel .t{font-size:17px;font-weight:600;letter-spacing:-.025em;color:var(--ink);line-height:1.2}
.rel .d{font-size:14px;line-height:1.5;color:var(--ink-2)}

/* ---------- client logo marquee ----------
   Black on white, per the brief. The band is white so the logos sit on
   the ground they were drawn for. Marks come from the client's own company
   profile, one file each, keyed out of their white boxes so the band is clean. */
.logos{background:#fff;border-block:1px solid var(--rule)}
.logos-in{padding-block:clamp(44px,5vw,72px)}
.logos-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin-bottom:clamp(26px,3vw,40px);
}
.logos-head p{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
}
.marquee-track{display:flex;width:max-content;gap:0;animation:slide var(--marq,42s) linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.logo{
  flex:0 0 auto;width:178px;height:80px;margin-right:28px;
  display:grid;place-items:center;
}
/* Real marks now, so a flat black silhouette would destroy the ones built on
   colour contrast — AXA's slash, Bessé's reversed box. Desaturate and pull the
   light ones down instead, and give back the colour on hover. */
.logo img{max-width:150px;max-height:40px;width:auto;height:auto;
  filter:grayscale(1) brightness(.62) contrast(1.35);opacity:.85;
  transition:filter .25s,opacity .25s}
.logo:hover img,.logo:focus-visible img{filter:none;opacity:1}
.logo .slot{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;padding:0 10px;
}
.logos-note{
  margin-top:24px;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:74ch;
  padding-left:18px;border-left:2.5px solid var(--brand);
}
@media (prefers-reduced-motion: reduce){
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none}
}

/* ---------- closing call to action, with the form on the right ---------- */
.ctaform{background:var(--ink-blue);color:#fff}
.ctaform-in{
  padding-block:clamp(60px,7vw,100px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(34px,4vw,60px);
}
@media (min-width:980px){
  .ctaform-in{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:start}
}
.ctaform h2{font-size:clamp(30px,3.9vw,52px);font-weight:700;letter-spacing:-.04em;line-height:1.03;margin:0;color:#fff;max-width:15ch}
.ctaform .lead{margin-top:20px;color:rgba(255,255,255,.84);max-width:42ch}
.ctaform-side{margin-top:28px;border-top:1px solid rgba(255,255,255,.18)}
.ctaform-side .n{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.18);display:flex;gap:13px;align-items:flex-start}
.ctaform-side .n span{font-size:15px;line-height:1.55;color:rgba(255,255,255,.8)}
.ctaform-side .n b{color:#fff;font-weight:600}
.ctaform .tri{margin-top:6px;background:var(--cyan)}
/* the form sits on the dark ground here, so it keeps its own white card */
.ctaform .form{background:#fff;border-color:transparent}
.ctaform .form .lg,.ctaform .form label{color:var(--ink-3)}

/* ---------- services index ---------- */
.idxlist{border-top:1px solid var(--rule)}
.idxrow{
  display:grid;grid-template-columns:minmax(0,1fr);gap:6px;
  padding:20px 0;border-bottom:1px solid var(--rule);
  transition:background-color .16s,padding-left .16s;
}
@media (min-width:820px){
  .idxrow{grid-template-columns:54px minmax(0,270px) minmax(0,1fr) 34px;gap:24px;align-items:baseline}
}
.idxrow:hover{background:#fff;text-decoration:none;padding-left:10px}
.idxrow .n{font-size:13px;font-weight:500;letter-spacing:.12em;color:var(--blue);font-variant-numeric:tabular-nums}
.idxrow .t{font-size:18px;font-weight:600;letter-spacing:-.028em;color:var(--ink);line-height:1.2}
.idxrow .d{font-size:15px;line-height:1.55;color:var(--ink-2)}
.idxrow .go{color:var(--blue);display:flex;align-items:center;justify-content:flex-end}
.idxrow .go svg{width:15px;height:15px}
@media (max-width:819px){.idxrow .go{display:none}}

/* ---------- shared closing CTA ---------- */
.cta{background:var(--ink-blue);color:#fff}
.cta-in{padding-block:clamp(64px,8vw,104px);display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
@media (min-width:880px){.cta-in{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:end}}
.cta h2{font-size:clamp(32px,4.4vw,58px);font-weight:700;letter-spacing:-.04em;line-height:1.02;margin:0;color:#fff;max-width:16ch}
.cta p{font-size:clamp(17px,1.6vw,20px);font-weight:300;line-height:1.55;color:rgba(255,255,255,.82);max-width:44ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:22px}

/* ---------- responsive corrections ----------
   A long service name in the breadcrumb ran past the viewport at 320px:
   a flex row that never wraps, holding a span that never breaks. */
.crumb{flex-wrap:wrap;row-gap:2px}
.crumb .here{min-width:0;overflow-wrap:anywhere}
@media (max-width:900px){
  /* the breadcrumb is a navigation row, not prose: its links need a finger */
  .crumb a{display:inline-block;padding-block:8px}
  .route .go{padding-block:11px}
  .route .big{padding-block:6px}
  .idxrow{padding-block:18px}
  .member-tags li{padding:6px 12px}
  .sla li{gap:8px 12px}
}

/* ---------- the small-screen menu ----------
   The primary nav is hidden below 1000px, and nothing replaced it: on a phone
   or a tablet the only way off a page was the footer. This is that way. */
.navbtn{
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  width:44px;height:44px;flex:0 0 auto;padding:0;cursor:pointer;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.5);border-radius:999px;
  transition:background-color .2s,border-color .2s;
}
.navbtn span{display:block;width:16px;height:1.6px;background:#fff;transition:transform .22s,opacity .18s}
.top.solid .navbtn,.top--fixed .navbtn{background:var(--mist-2);border-color:var(--rule)}
.top.solid .navbtn span,.top--fixed .navbtn span{background:var(--ink)}
.navbtn:hover{background:rgba(255,255,255,.26)}
.top.solid .navbtn:hover,.top--fixed .navbtn:hover{background:var(--rule)}
.navbtn[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.navbtn[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
@media (max-width:1000px){.navbtn{display:flex}}

.navmenu{
  background:rgba(250,250,248,.985);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--rule);
}
.navmenu[hidden]{display:none}
.navmenu-in{display:flex;flex-direction:column;padding-block:8px 18px}
.navmenu a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 2px;font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.navmenu a:hover{text-decoration:none;color:var(--blue)}
.navmenu a[aria-current="page"]{color:var(--blue)}
.navmenu .nm-tel{font-size:15.5px;font-weight:400;color:var(--ink-2)}
.navmenu .nm-tel b{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.navmenu .nm-tel:last-child{border-bottom:0}
@media (max-width:420px){.navmenu a{font-size:17px;padding:13px 2px}}