/* ============================================================
   Socom  ·  foundation stylesheet
   Blue leads. Green appears in exactly one place on the whole
   site: the logo. Never structural, never decorative.
   ============================================================ */

:root{
  /* brand, sampled from socom-logo-colour.png */
  --blue-900:#0D2547;
  --blue-800:#123F7A;
  --blue-700:#1858A8;
  --blue-500:#1080B8;
  --blue-300:#6BA8DC;
  --blue-050:#EDF3FA;
  --green:#6CB742;
  --char:#404048;

  --ink:#171B22;
  --ink-2:#4C5462;
  --ink-3:#8A929E;
  --rule:#DFE4EB;
  --rule-2:#EDF0F4;
  --paper:#FFFFFF;
  --paper-2:#F7F9FB;   /* surfaces only. Every light section sits on --paper: one ground,
                          no corner washes (Lachy, 2 Sep: the slight colour changes between
                          sections and to the right were what looked off). */

  --grad:linear-gradient(118deg,var(--blue-700) 0%,var(--blue-500) 100%);

  --ff:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --wrap:1120px;
  --gut:clamp(20px,5vw,48px);
  --hdr-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue-700);margin:0 0 14px;
}
.eyebrow.light{color:var(--blue-300)}

.h2{
  font-size:clamp(28px,4.1vw,44px);font-weight:700;letter-spacing:-.024em;
  line-height:1.12;margin:0 0 30px;max-width:19ch;text-wrap:balance;
}
.h2.light{color:#fff}

/* ---------------------------------------------------- header */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s;
}
.hdr.stuck{border-bottom-color:var(--rule);box-shadow:0 1px 14px -6px rgba(13,37,71,.24)}
.hdr-in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);
  height:var(--hdr-h);display:flex;align-items:center;gap:clamp(18px,3vw,44px);
}
.brand{flex:none}
.brand img{width:clamp(104px,9vw,132px);height:auto}
.nav{display:flex;gap:clamp(12px,1.7vw,26px);margin-right:auto;min-width:0}
.nav a{
  text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2);
  padding:6px 0;position:relative;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--ink);font-weight:600}

.hdr-end{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);flex:none}
.tel{
  text-decoration:none;display:flex;align-items:baseline;gap:8px;
  font-family:var(--fm);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;
}
.tel-num{font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.tel-lab{font-size:10px;letter-spacing:.13em;color:var(--ink-3);white-space:nowrap}
.tel:hover .tel-num{color:var(--blue-700)}

/* THE PULSING GREEN DOT IS GONE. A small coloured thing quietly breathing
   next to a phone number is a generated-looking flourish, it says nothing a
   real business would bother saying, and it was the only decoration on the
   page that existed for its own sake. Green now appears in one place on the
   whole site: the logo. */

.btn{
  display:inline-block;text-decoration:none;background:var(--grad);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:.005em;padding:11px 20px;border-radius:3px;
  border:0;cursor:pointer;font-family:inherit;white-space:nowrap;flex:none;
  box-shadow:0 1px 2px rgba(13,37,71,.2);transition:transform .16s, box-shadow .16s, filter .16s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(24,88,168,.55);filter:saturate(1.1)}
.btn:active{transform:translateY(0)}
.btn-lg{font-size:15.5px;padding:14px 26px}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}

/* ring-cadence hairline. also the top edge of section 2 */
.ringline{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rule);
  overflow:hidden;z-index:2;
}
.ringline.bottom{position:relative;margin-top:56px}
.ringline i{
  position:absolute;top:0;bottom:0;width:110px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--blue-500),var(--blue-700),transparent);
  transform:translateX(-140px);will-change:transform;
}

/* ---------------------------------------------------- 6 close */
/* The page resolves out of white into the deep blue it started from.
   Close and footer are one dark base, split by a hairline. */
.close{
  position:relative;background:var(--blue-900);color:#fff;overflow:hidden;
  padding:clamp(70px,9vw,116px) 0 clamp(60px,8vw,96px);
}
/* depth, from two soft washes. no shapes, nothing that moves on its own */
.close::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(118% 84% at 88% -12%, rgba(16,128,184,.36), transparent 62%),
    radial-gradient(94% 72% at 2% 110%, rgba(24,88,168,.32), transparent 66%);
}
.close-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(40px,6vw,88px);align-items:stretch;
}
/* the two figures sit on the form's baseline, so the column reads as
   composed rather than as content that ran out */
.close-l{display:flex;flex-direction:column}
@media (min-width:901px){.close-l .close-facts{margin-top:auto}}
@media (min-width:901px){.form-wrap{border-left:1px solid rgba(255,255,255,.14);padding-left:clamp(38px,5vw,72px)}}

.close-k,.form-k{
  font-family:var(--fm);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue-300);margin:0 0 20px;
}
.bignum{
  display:block;width:max-content;max-width:100%;text-decoration:none;
  font-family:var(--fm);font-weight:500;line-height:1;
  font-size:clamp(32px,6.1vw,68px);letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background:linear-gradient(112deg,#fff 16%,var(--blue-300) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:0 0 15px;
}
.close-loc{font-size:15px;color:rgba(255,255,255,.60);margin:0}

.close-facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,54px);
  margin:clamp(36px,5vw,54px) 0 0;padding:26px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.close-facts li{font-size:12.5px;color:rgba(255,255,255,.56);line-height:1.4}
.close-facts b{
  display:block;font-family:var(--fm);font-size:26px;font-weight:500;color:#fff;
  letter-spacing:-.025em;margin-bottom:5px;
}

/* underline fields. reads as editorial, not as a support ticket */
.form{display:grid;gap:22px;max-width:460px}
.form label{
  display:grid;gap:7px;font-size:12px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.56);
}
.form input,.form textarea{
  font-family:inherit;font-size:16px;color:#fff;padding:9px 2px;
  border:0;border-bottom:1px solid rgba(255,255,255,.24);border-radius:0;
  background:transparent;resize:vertical;transition:border-color .2s;
}
.form input:hover,.form textarea:hover{border-bottom-color:rgba(255,255,255,.42)}
.form input:focus,.form textarea:focus{
  outline:none;box-shadow:none;border-bottom-color:var(--blue-300);
}
.form .btn{
  justify-self:start;margin-top:10px;background:#fff;color:var(--blue-900);
  box-shadow:0 1px 2px rgba(0,0,0,.28);
}
.form .btn:hover{background:var(--blue-050);box-shadow:0 8px 22px -8px rgba(0,0,0,.6)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the hairline sweep now sits on the seam between the white page and the dark base */
.ringline.top{position:absolute;top:0;bottom:auto;background:rgba(255,255,255,.16);z-index:3}
.ringline.top i{background:linear-gradient(90deg,transparent,#fff,var(--blue-300),transparent)}

/* ---------------------------------------------------- footer */
.foot{background:var(--blue-900);color:rgba(255,255,255,.72);
  border-top:1px solid rgba(255,255,255,.10);padding:clamp(44px,6vw,68px) 0 28px}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;padding-bottom:32px}
.foot-logo{filter:brightness(0) invert(1);opacity:.9;width:132px}
.foot-note{font-size:14.5px;line-height:1.55;margin:16px 0 0;max-width:38ch}
.foot-nav,.foot-social{display:flex;flex-direction:column;gap:10px}
.foot-nav a,.foot-social a{text-decoration:none;font-size:14.5px;color:rgba(255,255,255,.72)}
.foot-nav a:hover,.foot-social a:hover{color:#fff}
.foot-legal{
  display:flex;justify-content:space-between;gap:20px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.45);
}
.foot-legal a{text-decoration:none}
.foot-legal a:hover{color:#fff}

/* ---------------------------------------------------- responsive */
@media (max-width:900px){
  .close-in,.foot-in{grid-template-columns:1fr}
  .four{grid-template-columns:1fr 1fr}
  .close-in{gap:34px}
}
@media (max-width:1180px){.nav,.hdr-end .btn{display:none}
  .burger{display:flex}
  .hdr-end{margin-left:auto}}
@media (max-width:520px){.four{grid-template-columns:1fr}
  .tel-lab{display:none}}

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

/* ============================================================
   v3 additions
   ============================================================ */

/* award strip, directly under the hero */
.strip{background:var(--paper);padding:26px 0}
.strip-in{display:flex;align-items:center;gap:clamp(20px,4vw,54px);flex-wrap:wrap}
.strip-lead{margin:0;font-size:15px;color:var(--ink-2);max-width:30ch;flex:none}
.strip-list{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(16px,2.6vw,34px);margin:0;padding:0;flex:1}
.strip-list li{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.strip-list span{display:block;font-weight:400;font-size:12px;color:var(--ink-3);margin-top:2px}

/* curve */
.cite{font-family:var(--fm);font-size:11.5px;line-height:1.6;color:var(--ink-3);
  margin:14px 0 clamp(40px,6vw,64px);max-width:64ch}
.cite i{font-style:italic}

@media (max-width:900px){
  .close-in{grid-template-columns:1fr}}
@media (max-width:620px){.ev em{font-size:10px}
  .ev:not(.key) em{display:none}}

/* ---------------------------------------------------- 1 hero . light open, contour field */
/* ============================================================
   v1 hero. Light open. The contour field is drawn dark on white so it
   reads as a survey plot rather than as a glow. Surface change first, everything else after.
   ============================================================ */
.hx{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--paper);color:var(--ink);
  min-height:calc(100svh - 34px);display:flex;
}
/* depth is two large soft washes at low alpha. no shapes, nothing floating */
/* generated contour field. drawn once, converging inward, then it rests */
.hx-field{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
/* a scrim, so the field never argues with the sentence */
.hx::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(97deg,
    rgba(255,255,255,.34) 0%, rgba(255,255,255,.88) 14%, rgba(255,255,255,.93) 44%,
    rgba(255,255,255,.30) 66%, rgba(255,255,255,0) 84%);
}
.hx-in{
  position:relative;z-index:3;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(60px,10vh,124px) var(--gut) clamp(26px,4vh,42px);
  display:flex;flex-direction:column;
}

.hx-in .eyebrow{color:var(--blue-700);margin:0 0 clamp(20px,2.8vw,32px)}
.hx-h1{
  font-size:clamp(32px,5.5vw,66px);font-weight:600;line-height:1.05;   /* David: smaller, softer. 96/800, then 72/700, settled at 66/600 */
  letter-spacing:-.042em;color:var(--ink);margin:0 0 clamp(18px,2.4vw,28px);
  max-width:18ch;text-wrap:balance;
}
/* the one number in the sentence is set in the mono, tabular, so it reads
   as a date rather than as four more words */
.hx-h1 .yr{
  font-family:var(--fm);font-weight:500;font-size:.93em;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--blue-700);
}
.hx-in .lede{color:var(--ink-2);max-width:29ch;margin:0 0 clamp(28px,4vh,44px)}

.hx-acts{display:flex;align-items:center;gap:clamp(18px,2.6vw,32px);flex-wrap:wrap}
.hx-acts .lnk{color:var(--ink-2);border-bottom-color:var(--rule)}
.hx-acts .lnk:hover{color:var(--ink);border-bottom-color:var(--blue-500)}

/* the rail sits on the base of the hero, on a hairline, so the column reads
   as composed rather than as content that ran out */
.hx-rail{
  margin-top:auto;padding-top:clamp(20px,3vh,30px);
  border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:baseline;gap:14px 34px;flex-wrap:wrap;
  font-family:var(--fm);font-size:11.5px;line-height:1.5;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.hx-rail b{font-weight:500;color:var(--ink-2)}
.hx-rail i{font-style:normal;color:var(--rule);padding:0 7px}
.hx-rail span{display:block}

@keyframes hxrise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hx-in > *{animation:hxrise .62s cubic-bezier(.2,.8,.3,1) backwards}
.hx-in > *:nth-child(1){animation-delay:.06s}
.hx-in > *:nth-child(2){animation-delay:.13s}
.hx-in > *:nth-child(3){animation-delay:.21s}
.hx-in > *:nth-child(4){animation-delay:.29s}
.hx-in > *:nth-child(5){animation-delay:.38s}

@media (max-width:860px){/* the field moves under the type instead of beside it, so the scrim has
     to change direction with it */
  .hx::after{background:linear-gradient(178deg,
    rgba(255,255,255,.96) 22%, rgba(255,255,255,.80) 56%, rgba(255,255,255,.50) 100%)}
  .hx-h1{max-width:16ch}}
@media (max-width:560px){.hx-rail{flex-direction:column;align-items:flex-start;gap:9px;letter-spacing:.12em}
  .hx-in .lede{max-width:34ch}}
@media (prefers-reduced-motion:reduce){.hx-in > *{animation:none}}

/* ---------------------------------------------------- 2 since 1991 . the gap is the relationship */
/* ============================================================
   v2L . the gap is the relationship, light
   Light surface. The empty stretches are drawn at their real length
   and are the largest things in the section. The eighteen year void
   between 1991 and 2009 is not blank, it is where the testimonial
   sits, because that void IS the Dennis Family relationship.
   ============================================================ */
.span{
  position:relative;overflow:hidden;background:var(--paper);color:var(--ink);
  /* bottom is short: the legend hands straight over to the SimX desk below it */
  padding:clamp(48px,7vw,80px) 0 clamp(28px,4vw,48px);
}
.span-in{position:relative;z-index:1}
.span-sub{font-size:17px;line-height:1.55;color:var(--ink-2);
  max-width:38ch;margin:-16px 0 clamp(40px,6vw,72px)}

/* ---------- the map. one scale token, used by rail, bar, ticks and marks ---------- */
.span-map{
  position:relative;padding-left:var(--padx);
  --gy:clamp(15px,2.5vw,31px);          /* pixels per empty year */
  --railx:clamp(24px,4vw,58px);
  --padx:clamp(62px,9.5vw,142px);
  --mark:clamp(16px,2.3vw,29px);        /* mark's optical line within an entry */
}
.span-rail{position:absolute;left:var(--railx);top:4px;bottom:0;width:1px;
  background:var(--rule)}
.span-rail i{position:absolute;left:-1px;top:0;width:3px;border-radius:2px;height:100%;
  background:linear-gradient(180deg,var(--blue-700) 0%,rgba(24,88,168,.14) 100%)}
/* the one thing that runs the whole length */
.span-bar{position:absolute;left:calc(var(--railx) - 17px);top:4px;bottom:0;
  width:6px;border-radius:3px;
  background:linear-gradient(180deg,rgba(24,88,168,.30),rgba(24,88,168,.07))}

/* ---------- the voids. ticks only where the scale is true ---------- */
.span-list{list-style:none;margin:0;padding:0}
.span-gap{position:relative;display:flex;align-items:center;
  min-height:calc(var(--g) * var(--gy))}
.span-gap::before{
  content:"";position:absolute;top:0;bottom:0;width:11px;
  left:calc(var(--railx) - var(--padx) - 5px);
  background:repeating-linear-gradient(180deg,rgba(13,37,71,.20) 0 1px,transparent 1px var(--gy));
}
/* Direct child only. As a descendant selector this also caught the <b> inside
   the quote's <cite>, so "Peter Levinge" was being absolutely positioned and
   rotated on top of the "18 YEARS" marker. */
.span-gap > b{
  position:absolute;left:calc(var(--railx) - var(--padx) + 16px);top:50%;
  writing-mode:vertical-rl;transform:translateY(-50%);
  font-family:var(--fm);font-weight:400;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums;
}

/* ---------- the five entries ---------- */
.span-e{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:6px clamp(16px,2.4vw,34px);align-items:baseline}
.span-e::before{
  content:"";position:absolute;top:var(--mark);left:calc(var(--railx) - var(--padx));
  width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--blue-700);
  box-shadow:0 0 0 5px rgba(24,88,168,.12);
}
.span-e::after{
  content:"";position:absolute;top:calc(var(--mark) + 4px);height:1px;
  left:calc(var(--railx) - var(--padx) + 11px);
  width:calc(var(--padx) - var(--railx) - 24px);background:var(--rule);
}
/* awards cross the rail instead of sitting on it, so the two kinds of
   thing are told apart by shape and not by a second colour */
.span-e.awd::before{width:16px;height:2px;margin-left:-7px;border-radius:1px;box-shadow:none}

.span-k{grid-column:1/-1;margin:0;font-family:var(--fm);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-700)}
/* the dominant register. nothing else here is over 22px */
.span-n{grid-column:1;margin:0;font-family:var(--fm);font-weight:500;line-height:.88;
  font-size:clamp(34px,5vw,62px);letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.span-t{grid-column:2;margin:0;font-size:clamp(16.5px,1.85vw,21px);font-weight:500;
  line-height:1.38;letter-spacing:-.012em;color:var(--ink);max-width:30ch}

/* ---------- the testimonial, sitting inside the eighteen year void ---------- */
.span-q{margin:0;max-width:36ch;padding-left:clamp(18px,2.4vw,28px);
  border-left:2px solid var(--blue-500)}
.span-q p{margin:0 0 14px;font-size:clamp(18px,2.1vw,24px);line-height:1.45;
  letter-spacing:-.014em;color:var(--ink)}
.span-q cite{font-style:normal;display:block;font-size:14px;color:var(--ink-3)}
.span-q cite b{display:block;font-weight:600;font-size:15px;color:var(--ink)}

/* ---------- the terminus. the bar stops here and is named here ---------- */
.span-end{position:relative;padding-top:22px;border-top:1px solid var(--rule)}
.span-end p{margin:0}
.span-endn{font-family:var(--fm);font-weight:500;font-size:clamp(26px,3.4vw,40px);
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--ink)}
.span-end .span-endt{margin-top:10px;font-size:15.5px;color:var(--ink-2);max-width:30ch}

.span-key{display:flex;flex-wrap:wrap;gap:8px 24px;margin:clamp(30px,4vw,46px) 0 0;
  padding-top:18px;border-top:1px solid var(--rule);
  font-family:var(--fm);font-size:11px;color:var(--ink-3)}
.span-key span{display:flex;align-items:center;gap:9px}
.span-key span::before{content:"";flex:none;background:var(--blue-700)}
.ke::before{width:9px;height:9px;border-radius:50%}
.ka::before{width:16px;height:2px;border-radius:1px}

/* ---------- scroll state. armed only when the script runs ---------- */
.span-map.armed .span-e,.span-map.armed .span-gap,.span-map.armed .span-end{
  opacity:.26;transition:opacity .55s ease}
.span-map.armed .lit{opacity:1}

@media (max-width:760px){.span-map{--padx:clamp(56px,15vw,72px);--railx:clamp(20px,5.5vw,26px)}
  .span-e{grid-template-columns:1fr;gap:6px}
  .span-n{grid-column:1}
  .span-t{grid-column:1;max-width:none}
  .span-e::after{display:none}
  .span-gap > b{font-size:10px;left:calc(var(--railx) - var(--padx) + 14px)}}
@media (max-width:420px){.span-map{--gy:14px}
  .span-q p{font-size:18px}}
@media (prefers-reduced-motion:reduce){.span-map.armed .span-e,.span-map.armed .span-gap,.span-map.armed .span-end{opacity:1}}

/* ---------------------------------------------------- 3 the simulation . workstation, ported from SimX */
/* ============================================================
   v8 . the workstation, ported
   The rig, its stylesheets and its script are SimX's own, taken from
   the SimX landing build rather than redrawn. Everything below is the
   adaptation layer: SimX's variables are bound to #wk instead of :root
   so they cannot reach the rest of the Socom page, and the ones that
   carry a look are pointed at Socom's palette instead of SimX's.
   ============================================================ */
#wk{
  /* SimX's type system, repointed at Socom's */
  --sans:var(--ff);
  --serif:Georgia,'Times New Roman',serif;

  /* SimX's paper and ink, repointed at Socom's */
  --ink:#171B22;
  --ink-brand:#404048;
  --ink-soft:#4C5462;
  --line:#DFE4EB;
  --paper:#FFFFFF;
  --tint:#F7F9FB;

  /* SimX's dark chrome, moved onto the Socom blue family */
  --night-2:#12233C;
  --night-line:#1E3859;
  --night-ink:#EDF3FA;
  --night-soft:#8FA9C6;
  --avatar-bg:#1E3859;

  /* unused by the rig, defined so nothing can ever leak SimX green in */
  --green:var(--blue-700);
  --green-deep:var(--blue-900);
  --green-dim:var(--blue-300);

  --tag-warn-bg:rgba(255,255,255,.08);
  --panel-shadow:0 40px 80px -50px rgba(13,37,71,.9);
  --cycle:20s;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* the Socom surround. deliberately almost no words, the rig is the argument */
.sx{position:relative;background:var(--paper)}
.sx-head{position:relative;z-index:1;padding:clamp(60px,8vw,102px) 0 clamp(24px,3vw,38px)}
.sx-foot{position:relative;z-index:1;display:flex;justify-content:space-between;
  align-items:baseline;gap:16px 30px;flex-wrap:wrap;
  padding:20px 0 clamp(56px,7vw,88px);border-top:1px solid var(--rule)}
.sx-foot p{margin:0;font-family:var(--fm);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}

#wk{background:transparent}
/* One screen, no pinned travel. SimX gives the stage 250vh because its sentence and
   lids are written by the scroll. Nothing here is scroll driven any more, so the extra
   150vh was a stretch where the wheel turned and nothing moved (Lachy, 2 Sep: "the need
   to scroll is still there but it doesnt do anything"). */
#wk{height:100vh}

/* SimX's own brand mark sat on both desktop wallpapers and in both OS bars.
   Swapped for Socom's logo, and resized because Socom's is a wide lockup
   rather than SimX's near-square mark. */
#wk .wk-wall img{width:190px !important;opacity:.10 !important}
#wk .wk-osmark{height:11px !important;opacity:.85 !important}

/* SimX runs the rig edge to edge. On the Socom page it has to sit on the same
   grid as every other section, and without a gutter the perspective pushes the
   left device 41px off the edge where nothing catches it. */
/* Centred in the whole section, not below a header reserve. The section is one screen
   and scrolls normally now, so the header only covers its top for the moment the two
   edges line up; reserving 76px for that read as dead space at the seam above. */
#wk .wk-pin{padding-inline:var(--gut);overflow:visible}
/* The desk's drop shadow falls past the section's bottom edge. The pin no longer clips
   it (above), and the section paints over the one below so the section after does not
   either (Lachy, 2 Sep: "the shadow on the left screen is cut off by the page below"). */
.sx{z-index:2}
/* a static sentence has no caret */
#wk .wk-line i{display:none !important}
/* Capped so SimX's own .78 fits: 964 * .78 = 752 per device, so the rig needs
   about 1538. Uncapping it let their script scale to 1.105 and the drawing ran
   96px past its column. Wider than --wrap, because at 1120 the scale was forced
   down to .676 and the monitors came out smaller than SimX's. */
#wk .wk-rig{margin-inline:auto}
/* Each drawing is 964 design px times --s. Once --s is under .92 that is narrower than
   its column, and SimX leaves it left aligned, so the left screen hung off the window's
   left edge while the right one floated short of the right edge (Lachy, 2 Sep: "the
   left monitor is cut off on my screen"). Centred in its column, both sit the same
   distance in from their edge at every scale. */
#wk .wk-dev{width:max-content !important;margin-inline:auto !important}

/* SimX centres this line and makes it the middle of the composition. That part
   stays. Only the face changes, from their Georgia to Socom's Figtree. */
#wk .wk-line{
  font-family:var(--ff) !important;font-weight:600 !important;
  letter-spacing:-.02em !important;color:var(--ink) !important;
  /* theirs is a short line at up to 46px in 46ch. this one is 103 characters,
     so it needs a smaller size and a wider measure or it doubles in height and
     runs into the desk above it. */
  /* no higher floor: at 15px the 961px measure fell to 23.7em, the sentence took a
     third line and ran into the right monitor. 27.15 x --s keeps it at 25.4em, two
     lines, at every width that 1920 does. */
  font-size:max(13px,calc(var(--s,1) * 27.15px)) !important;
  width:min(58ch,80vw) !important;line-height:1.22 !important;
}

/* SimX's own --s (.78, and .55 under their breakpoint) is left alone. I had a
   calc() here deriving the scale from the viewport, but dividing a length by a
   number yields a length, not a ratio, so min(.78, ...) never clamped and the
   drawing overflowed its column. Their fixed steps are correct at 1920. */

/* ---------------------------------------------------- 5 winners and losers . either side of the event */
/* ============================================================
   v5 . either side of the event
   Four items are not four cards and they are not four of a kind.
   They are four positions on one axis, and the axis is the event.
   Prevent and Prepare hold the ground to its left. Respond is the
   narrow column because it is hours. Recover is the wide one
   because it is the rest of the year, which is exactly the year
   the Aon figures are measured over. So the statistic is not an
   attachment. It is the same axis, drawn above the same line.
   ============================================================ */
.phz{
  position:relative;background:var(--paper);color:var(--ink);overflow:hidden;
  padding:clamp(40px,6vw,72px) 0 clamp(60px,8vw,96px);
}
.phz > *{position:relative;z-index:1}
.phz .h2{max-width:21ch}
.phz-sub{font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:44ch;margin:-14px 0 clamp(34px,4.8vw,58px)}

/* ---- one grid. the value band, the four positions, and the event rule
   that crosses both of them ---- */
.phz-grid{
  display:grid;
  /* Respond is narrow because it is hours. Recover is wide because it is
     the rest of the year. .94 is the floor, below which the word Respond
     no longer fits its own column at the display size */
  grid-template-columns:1.12fr 1.12fr .94fr 1.9fr;
  column-gap:clamp(12px,1.8vw,26px);
  --phg:clamp(90px,13vw,164px);         /* the gutter the two figures stand in */
}
.phz-k{
  grid-column:1/-1;grid-row:1;margin:0 0 12px;
  font-family:var(--fm);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue-700);
}
.phz-band{
  grid-column:1/-1;grid-row:2;position:relative;
  height:clamp(130px,17vw,196px);
}
#phzCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* .472 and the 22px band below are the two numbers the canvas maps with */
.phz-zero{
  position:absolute;left:0;right:var(--phg);top:calc((100% - 22px) * .472);
  height:0;border-top:1px dashed rgba(13,37,71,.24);pointer-events:none;
}
.phz-zlab{
  /* above the datum, not below it. below it the label runs straight through
     the losing line on a short band */
  position:absolute;left:0;top:calc((100% - 22px) * .472 - 21px);margin:0;
  font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.phz-zlab i{font-style:normal;color:var(--ink);letter-spacing:-.01em;margin-right:6px}

.phz-ends{position:absolute;right:0;top:0;bottom:0;width:var(--phg)}
.phz-end{position:absolute;left:0;right:0;font-size:clamp(21px,2.9vw,33px);transform:translateY(-.46em)}
.phz-end.up{top:calc((100% - 22px) * .194)}
.phz-end.down{top:calc((100% - 22px) * .889)}
.phz-fig{
  margin:0;font-family:var(--fm);font-weight:500;font-size:1em;line-height:.88;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.phz-fig span{font-size:.44em;margin-left:.04em;vertical-align:.12em}
.phz-end.up .phz-fig{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.phz-end.down .phz-fig{color:var(--ink-3)}
.phz-cap{margin:7px 0 0;font-size:12.5px;line-height:1.25;color:var(--ink-2)}
.phz-end.down .phz-cap{color:var(--ink-3)}

/* ---- the event. one rule, crossing the band and the four positions ---- */
.phz-evt{
  grid-column:3;grid-row:2/4;position:relative;
  border-left:1px solid var(--blue-700);pointer-events:none;
}
.phz-evt span{
  position:absolute;top:0;left:10px;white-space:nowrap;
  font-family:var(--fm);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue-700);
}

/* ---- the four positions. hairlines, no boxes, unequal by argument ---- */
.phz-p{
  grid-row:3;position:relative;
  padding:clamp(17px,2.3vw,26px) clamp(10px,1.4vw,18px) 0 clamp(12px,1.7vw,22px);
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
.phz-p.p1{grid-column:1;padding-left:0;border-left:0}
.phz-p.p2{grid-column:2}
.phz-p.p3{grid-column:3;border-left:0}   /* the event rule already draws this edge */
.phz-p.p4{grid-column:4;padding-right:0}
.phz-n{margin:0;font-family:var(--fm);font-size:11px;letter-spacing:.1em;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.phz-name{
  margin:7px 0 10px;font-size:clamp(23px,3.9vw,44px);font-weight:700;
  letter-spacing:-.033em;line-height:1;color:var(--ink);
}
.phz-say{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}

.phz .cite{margin:clamp(30px,4vw,46px) 0 0}
.phz-act{margin:clamp(24px,3.2vw,38px) 0 0}

/* between these widths the narrow column is the constraint, not the page */
@media (max-width:1160px) and (min-width:901px){
  .phz-name{font-size:2.85vw}
  .phz-p{padding-left:clamp(10px,1.3vw,16px);padding-right:8px}
  .phz-say{font-size:14.5px}
}
@media (max-width:900px){.phz-grid{grid-template-columns:1fr;--phg:clamp(80px,20vw,120px)}
  /* the placement rules above are compounds, so the reset has to match
     their specificity or the four columns survive the breakpoint */
  .phz-k,.phz-band,.phz-evt,
  .phz-p.p1,.phz-p.p2,.phz-p.p3,.phz-p.p4{grid-column:1;grid-row:auto}
  .phz-band{height:clamp(160px,40vw,210px)}
  /* the rule turns through ninety degrees and stays between 02 and 03 */
  .phz-evt{border-left:0;border-top:1px solid var(--blue-700);height:40px;margin-top:26px}
  .phz-evt span{top:13px;left:0}
  .phz-p.p1,.phz-p.p2,.phz-p.p3,.phz-p.p4{padding:20px 0 0;border-left:0}
  .phz-p.p1{border-top:1px solid var(--rule)}
  .phz-p.p3{border-top:0;padding-top:0}
  .phz-name{font-size:clamp(26px,6.4vw,36px)}
  .phz-say{max-width:44ch}}
@media (max-width:480px){.phz-end{font-size:clamp(19px,6.6vw,26px)}
  .phz-cap{font-size:11.5px}
  .phz-zlab{font-size:9.5px;letter-spacing:.1em}}
@media (prefers-reduced-motion:reduce){.phz *{transition:none}}

/* ---------------------------------------------------- workstation, follow ups */

/* 1. SHARPNESS. transform:scale() rasterises the 964px drawing and then blows it
      up, which is what made the panels look soft. zoom re-lays the drawing out at
      its real size, so text is rendered crisp at the final scale rather than
      resampled. The explicit height compensated for transform not affecting
      layout, and zoom does, so it has to go or it applies twice. */
#wk .wk-devi{transform:none !important;zoom:var(--s)}
#wk .wk-dev{height:auto !important}
@keyframes sxDiscIn{from{transform:scale(.25);opacity:0}60%{transform:scale(1.06);opacity:1}to{transform:scale(1);opacity:1}}
@keyframes sxWipe{from{transform:translateY(-101px)}to{transform:translateY(0)}}
@keyframes sxSerifIn{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes sxDiscIn{from{transform:scale(.25);opacity:0}60%{transform:scale(1.06);opacity:1}to{transform:scale(1);opacity:1}}
@keyframes sxWipe{from{transform:translateY(-101px)}to{transform:translateY(0)}}
@keyframes sxSerifIn{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------------------------------------------------- the lead, top left to middle */
/* Opens in the corner as a label, then walks to the centre and settles above the
   sentence it introduces. left is animated alongside transform so the end state
   is exactly centred whatever the label's width. */



/* ============================================================
   SimX lead and band. One place, after several rounds of patches
   left duplicates and an orphaned reduced-motion rule behind.
   ============================================================ */

/* 1. THE LEAD. Fades in over the top left of the desk, mark beside it, before
      the sentence exists. Anchored to the pin, not the rig: the rig nearly
      fills the pin, so anything placed above it lands off screen. */
/* THE LEAD. Centred over the LEFT column, not the page. Same face, size and
   weight as the sentence below the desk, because it is the same voice. The mark
   sits to the right of the words. Typed character by character off scroll. */
.sx-lead{
  /* over the centre of the left column, wherever the columns land */
  position:absolute;left:calc(25% + var(--gut) / 2);transform:translateX(-50%);
  /* Measured off the rig, not the header. The rig is centred in the pin and
     shrinks with --s, so a header offset left a 300px hole at 961px. These
     numbers reproduce 1920 exactly (s 1.105: top 109, 58px) and shrink with it. */
  top:max(calc(var(--hdr-h) + 10px), calc(50% - var(--s,1) * 390px));z-index:9;margin:0;
  white-space:nowrap;
  font-family:var(--ff);font-weight:600;font-size:max(26px,calc(var(--s,1) * 52.5px));
  letter-spacing:-.024em;color:var(--ink);line-height:1;
}
/* the untyped remainder holds its width so the line never shifts while typing,
   which is the same trick SimX uses on the sentence below */
.sx-lead .sx-ghost{visibility:hidden}
.sx-lead .sx-t,.sx-lead .sx-ghost{white-space:pre}
.sx-lead .sx-caret{
  display:inline-block;width:.055em;height:.8em;margin-left:.03em;
  background:var(--ink);vertical-align:-.06em;
}
.sx-lead.done .sx-caret{visibility:hidden}
#wk .wk-line.idle i{display:none}
/* the mark IS the X of SimX. it stays out of sight until the word is typed. */
.sx-lead .sx-mark{
  display:inline-block;vertical-align:-.12em;
  height:.92em;width:.92em;margin-left:.02em;visibility:hidden;
}
.sx-lead.done .sx-mark{visibility:visible}

.sx-lead .sx-mark{order:2}
.sx-lead .sx-t{order:1}
.sx-lead .sx-caret{
  order:1;display:inline-block;width:.06em;height:.8em;margin-left:.05em;
  background:var(--ink);vertical-align:-.1em;
}
.sx-lead.done .sx-caret{visibility:hidden}
#wk .wk-line.idle i{display:none}


/* 2. THE MARK. Resting state is the finished logo, so a broken script leaves a
      correct mark rather than an empty circle. */
.sx-mark{height:24px;width:24px;display:block;flex:none;overflow:visible}
.sx-disc{fill:#63C54D}
.sx-bar,.sx-serif{fill:#fff}
.sx-mark.sx-play .sx-disc{animation:sxDiscIn .55s cubic-bezier(.22,1,.36,1) both}
.sx-mark.sx-play .sx-wipe-r{animation:sxWipe .55s .28s cubic-bezier(.22,1,.36,1) both}
.sx-mark.sx-play .sx-serif{transform-box:fill-box}
.sx-mark.sx-play .sx-serif-a{animation:sxSerifIn .34s .62s cubic-bezier(.22,1,.36,1) both;transform-origin:50% 100%}
.sx-mark.sx-play .sx-serif-b{animation:sxSerifIn .34s .72s cubic-bezier(.22,1,.36,1) both;transform-origin:50% 0%}

/* 3. THE BAND. The sentence and the way through, centred under the desk. Sits
      above the pin's bottom edge so the link is never clipped by its overflow. */
.sx-band{
  /* In the diagonal channel between the two monitors, which is what that empty
     space is for. Vertically centred on the rig, not parked below it. */
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(var(--s,1) * 690px);z-index:9;text-align:center;pointer-events:none;
}
#wk .sx-band .wk-line{
  position:static !important;left:auto !important;top:auto !important;
  transform:none !important;width:100% !important;margin:0 auto !important;
}
.sx-claim{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 0}
.sx-out{
  pointer-events:auto;font-family:var(--fm);font-size:max(11px,calc(var(--s,1) * 11.8px));text-decoration:none;
  color:var(--ink);white-space:nowrap;border-bottom:1px solid var(--rule);
  padding-bottom:3px;transition:color .2s,border-color .2s;
}
.sx-out:hover{color:var(--blue-700);border-bottom-color:var(--blue-700)}

@media (prefers-reduced-motion:reduce){
  .sx-lead{opacity:1}
  .sx-mark.sx-play .sx-disc,.sx-mark.sx-play .sx-wipe-r,
  .sx-mark.sx-play .sx-serif-a,.sx-mark.sx-play .sx-serif-b{animation:none}
}


/* ---------------------------------------------------- the desk stagger */
/* The vertical separation between the two monitors. Absolute 250px was tuned at
   1920 and fell apart narrower: at 961px the pair had no horizontal overlap and a
   182px gap, at 1280px the sentence ran 18px into the left monitor. Scaling it
   with the viewport keeps 1920 exactly as it was and tightens as columns narrow. */
#wk .wk-pin{--desk-split:calc(var(--s,1) * 226px)}
/* The pulled CSS carries two generations of SimX's rules. The later pair wins
   and folds the vertical offset into var(--enter), which is 0 at rest, so both
   monitors ended up level. The base offset is put back here, and the --enter
   terms are preserved so the entrance still plays. */
#wk .wk-side--l .wk-dev{
  transform:translateX(calc(var(--enter,0) * -13%))
            translateY(calc(var(--desk-split) + var(--enter,0) * var(--s,1) * 18px))
            rotateY(calc(-20deg - var(--enter,0) * 16deg))
            rotateX(calc(5deg + var(--enter,0) * 4deg));
}
#wk .wk-side--r .wk-dev{
  transform:translateY(calc(-1 * var(--desk-split) + var(--enter,0) * var(--s,1) * 69px))
            rotateY(calc(20deg + var(--enter,0) * 14deg))
            rotateX(calc(5deg + var(--enter,0) * 9deg));
}


/* ---------------------------------------------------- 4 what a session is */
/* Photographs carry this section, so the layout is built around them rather
   than around a diagram. Steps alternate side to side so it reads as a sequence
   instead of a row of equal cards. */
.ses{padding:clamp(36px,5vw,56px) 0 clamp(16px,3vw,32px);background:var(--paper)}
.ses-list{list-style:none;margin-block:0;margin-inline:auto;padding-inline:var(--gut);display:grid;
  gap:clamp(46px,7vw,104px)}
.ses-step{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,64px);align-items:center}
.ses-step:nth-child(even) .ses-shot{order:2}

.ses-shot{margin:0;border-radius:5px;overflow:hidden;position:relative;
  /* a considered ground while the photographs are being sourced, so a missing
     file reads as a surface rather than as a broken image */
  background:linear-gradient(150deg,var(--blue-050) 0%,#DCE6F2 55%,#CBD9EA 100%);
  box-shadow:0 20px 44px -30px rgba(13,37,71,.55);aspect-ratio:4/3}
.ses-shot img{width:100%;height:100%;object-fit:cover;display:block}

.ses-body{min-width:0}
.ses-n{font-family:var(--fm);font-size:12.5px;letter-spacing:.16em;color:var(--blue-700);
  margin:0 0 14px}
.ses-h{font-size:clamp(24px,2.7vw,38px);font-weight:700;letter-spacing:-.024em;
  line-height:1.1;margin:0 0 14px;color:var(--ink)}
.ses-p{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:44ch;margin:0}

@media (max-width:820px){
  .ses-step{grid-template-columns:1fr;gap:20px}
  .ses-step:nth-child(even) .ses-shot{order:0}
  .ses-list{gap:52px}
}


/* ============================================================
   Case studies. Index and detail, sharing the site's language:
   mono for years, hairlines instead of boxes, one dominant element.
   ============================================================ */
.cs{padding:clamp(56px,8vw,104px) 0 clamp(50px,7vw,92px);background:var(--paper)}
.cs-head{margin-bottom:clamp(30px,4vw,52px)}
.cs-h1{font-size:clamp(32px,4.4vw,54px);font-weight:700;letter-spacing:-.028em;
  line-height:1.08;margin:0 0 16px;max-width:20ch;text-wrap:balance}
.cs-sub{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:46ch;margin:0}

/* the index reads as a record, not a grid of cards */
.cs-list{list-style:none;margin-block:0;margin-inline:auto;padding-inline:var(--gut);
  border-top:1px solid var(--rule)}
.cs-row{border-bottom:1px solid var(--rule)}
.cs-link{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(20px,4vw,58px);padding:clamp(22px,3vw,34px) 0;text-decoration:none;color:inherit;
  transition:padding-inline-start .28s cubic-bezier(.2,.8,.3,1)}
.cs-link:hover{padding-inline-start:10px}
.cs-year{font-family:var(--fm);font-weight:500;font-size:clamp(26px,3.2vw,44px);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  min-width:3.4ch}
.cs-main{min-width:0}
.cs-title{display:block;font-size:clamp(17px,1.7vw,23px);font-weight:600;
  letter-spacing:-.014em;color:var(--ink);line-height:1.3}
.cs-note{display:block;margin-top:5px;font-size:14.5px;color:var(--ink-3);line-height:1.45}
.cs-go{font-family:var(--fm);font-size:17px;color:var(--ink-3);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),color .2s}
.cs-link:hover .cs-go{transform:translateX(6px);color:var(--blue-700)}

/* ---------------------------------------------------- one study */
.cs-detail{padding:clamp(40px,6vw,72px) 0 clamp(50px,7vw,92px);background:var(--paper)}
.cs-back{font-family:var(--fm);font-size:12.5px;letter-spacing:.06em;text-decoration:none;
  color:var(--ink-3);display:inline-block;margin-bottom:clamp(24px,4vw,44px)}
.cs-back:hover{color:var(--blue-700)}
.cs-d-year{font-family:var(--fm);font-size:13px;letter-spacing:.16em;color:var(--blue-700);margin:0 0 12px}
.cs-d-h1{font-size:clamp(32px,4.6vw,58px);font-weight:700;letter-spacing:-.03em;
  line-height:1.06;margin:0 0 18px;max-width:18ch;text-wrap:balance}
.cs-d-lede{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:48ch;margin:0}

.cs-d-shot{margin:clamp(34px,5vw,60px) auto;border-radius:5px;overflow:hidden;
  background:linear-gradient(150deg,var(--blue-050) 0%,#DCE6F2 55%,#CBD9EA 100%);
  aspect-ratio:16/9;box-shadow:0 24px 52px -34px rgba(13,37,71,.55)}
.cs-d-shot img{width:100%;height:100%;object-fit:cover;display:block}

.cs-d-body{max-width:var(--wrap);margin-top:clamp(28px,4vw,44px)}   /* the wrap; the measure is on the text, so the body
                                       starts where the lede starts instead of centring */
.cs-quote{max-width:64ch}
.cs-block{margin-bottom:clamp(30px,4vw,48px)}
.cs-h2{font-size:clamp(19px,1.9vw,25px);font-weight:700;letter-spacing:-.018em;
  margin:0 0 12px;color:var(--ink)}
.cs-block p{font-size:17px;line-height:1.65;color:var(--ink-2);margin:0}

/* content Socom still has to supply. deliberately obvious so it cannot ship by
   accident, and self contained so deleting the element is the whole cleanup. */

.cs-quote{margin:clamp(34px,5vw,56px) 0;padding-left:clamp(18px,2.4vw,28px);
  border-left:2px solid var(--blue-500)}
.cs-quote p{margin:0 0 14px;font-size:clamp(18px,2.1vw,24px);line-height:1.45;
  letter-spacing:-.014em;color:var(--ink)}
.cs-quote cite{font-style:normal;display:block;font-size:14px;color:var(--ink-3)}
.cs-quote cite b{display:block;font-weight:600;font-size:15px;color:var(--ink)}

.cs-next{display:flex;align-items:center;gap:clamp(18px,3vw,30px);flex-wrap:wrap;
  margin-top:clamp(34px,5vw,56px);padding-top:26px;border-top:1px solid var(--rule)}

@media (max-width:700px){
  .cs-link{grid-template-columns:auto 1fr;gap:16px}
  .cs-go{display:none}
}

/* ================================ CLIENTS ================================
   SimX's logo drift, on Socom's ground. Two copies of the row, the track slides
   half its width and loops, so it never jumps. Grey and quiet: they are a
   register, not a billboard. */
.trust{padding:clamp(30px,4.5vh,52px) 0 clamp(26px,4vh,44px);border-bottom:1px solid var(--rule)}
.trust-lead{margin:0 0 clamp(16px,2.2vh,24px);text-align:center;font-family:var(--fm);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.trust-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.trust-track{display:flex;width:max-content;animation:trust-drift 52s linear infinite}
.trust-row{display:flex;align-items:center;gap:clamp(38px,5vw,76px);margin:0;padding:0 clamp(19px,2.5vw,38px);list-style:none}
.trust-row li{flex:0 0 auto;width:clamp(104px,9.5vw,146px);height:60px;display:flex;align-items:center;justify-content:center}
.trust-row img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  mix-blend-mode:multiply;filter:grayscale(1);opacity:.68}
.trust-row li.no-logo{font-size:12.5px;font-weight:600;line-height:1.25;text-align:center;color:var(--ink-3)}
.trust:hover .trust-track{animation-play-state:paused}
@keyframes trust-drift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.trust-track{animation:none}}

/* ten bodies, two rows of five, so the strip stays one screen wide */
.strip-in{align-items:flex-start}
.strip-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px clamp(18px,3vw,40px)}
.strip-in{gap:clamp(28px,5vw,72px)}
@media (max-width:900px){.strip-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.strip-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ================================ METHOD ================================
   The page runs in the order Socom works: test, report, train, respond. The
   proof (clients, awards, the years) comes after, once the reader knows what
   it is proof of. Each stage carries one small key. */
.m-k{margin:0 0 14px;font-family:var(--fm);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.m-k b{font-weight:500;color:var(--ink);margin-right:8px}
/* same column as the other three keys; held below the header because this section
   is a full screen and its top can sit exactly under it */
.sx .sx-kw{position:absolute;left:0;right:0;top:calc(var(--hdr-h) + 18px);z-index:9}
.sx .sx-kw .m-k{margin:0}

/* the report: a scored page, so a list with a hairline per row */
.rep{padding:clamp(36px,5vw,56px) 0 clamp(20px,3vw,32px);background:var(--paper)}
.rep-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.rep .h2{margin:0 0 18px}
.rep-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-2);max-width:34ch;margin:0}
.rep-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rep-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--rule)}
.rep-list b{font-family:var(--fm);font-weight:500;font-size:12px;color:var(--ink-3);padding-top:5px}
.rep-list h3{margin:0 0 4px;font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.rep-list p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (max-width:820px){.rep-in{grid-template-columns:1fr}}

/* awards as a band: the close's navy, and a photograph of the awards behind it
   once there is one. Without the file it is the navy alone. */
.strip{position:relative;overflow:hidden;background:#0D2547;color:#fff;padding:clamp(52px,7vw,84px) 0}
.strip-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.26;filter:grayscale(.35)}
.strip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,37,71,.92) 0%,rgba(13,37,71,.55) 60%,rgba(13,37,71,.35) 100%);pointer-events:none}
.strip-in{position:relative;z-index:1}
.strip-lead{color:rgba(255,255,255,.74);font-size:16px;max-width:44ch;line-height:1.5}
.strip-list li{color:#fff}
.strip-list span{color:rgba(255,255,255,.58)}

/* the six on the home page, under the session they came out of */
.cs-home{padding:clamp(36px,5vw,56px) 0 clamp(16px,3vw,28px)}
.cs-home .cs-head{margin-bottom:clamp(18px,2.6vw,30px)}
.cs-more{margin:22px auto 0;font-family:var(--fm);font-size:13px}
.cs-more a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px;transition:color .2s,border-color .2s}
.cs-more a:hover{color:var(--blue-700);border-bottom-color:var(--blue-700)}

/* undated rows keep the year column so titles stay aligned */
.cs-year--none::before{content:"2016";visibility:hidden}   /* exactly a year wide */
.cs-block p{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-2);margin:0 0 18px;max-width:62ch}

/* home list: name only, the years stay on the case-studies page */
.cs-home .cs-link{grid-template-columns:1fr auto;padding-block:clamp(16px,2vw,22px)}

/* a photograph on the right of each case-study row, fading into the ground so
   the name stays the thing you read. Missing file, no image: the row is as it was. */
.cs-link{position:relative;overflow:hidden}
.cs-bg{position:absolute;top:0;right:0;bottom:0;width:min(46%,420px);height:100%;object-fit:cover;
  opacity:.55;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 100%);
  transition:opacity .25s ease}
.cs-link:hover .cs-bg{opacity:.8}
.cs-link > :not(.cs-bg){position:relative;z-index:1}
/* the page header photo has no surface of its own any more: no file, no frame */
.cs-d-shot{background:none}

/* the phone, SimX's glyph */
.tel{display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
.tel-ic{width:14px;height:14px;flex:none;fill:currentColor;transform:translateY(-.5px)}

/* who we are, in the close: the old site's paragraph, brought up to date */
.close-who{margin:22px 0 0;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.74);max-width:44ch}
.close-who + .close-who{margin-top:12px}
.close-facts{margin-top:26px}

/* the lead sits under its key, on the same left edge as every other section heading */
.sx .sx-kw .sx-lead{position:static;left:auto;top:auto;transform:none;margin:14px 0 0}
.sx .sx-kw .m-k{margin:0}
.sx .sx-kw .sx-lead{font-size:clamp(28px,4.1vw,44px)}

/* the sentence and the way through sit under the lead, one left-aligned block */
.sx .sx-kw .sx-band{position:static;left:auto;top:auto;transform:none;width:auto;text-align:left;margin:14px 0 0}
#wk .sx-kw .wk-line{font-size:clamp(16px,1.35vw,19px) !important;width:auto !important;max-width:30ch !important;
  margin:0 !important;line-height:1.4 !important;font-weight:500 !important;color:var(--ink-2) !important}
.sx .sx-kw .sx-band{width:fit-content}   /* as wide as the sentence, so the link centres under it */
.sx .sx-kw .sx-claim{justify-content:center;margin-top:12px}
.sx .sx-kw .sx-out{font-size:13px}

/* footer social: the glyph carries it, the word sits beside it */
.foot-social a{display:inline-flex;align-items:center;gap:9px}
.foot-social svg{width:16px;height:16px;flex:none}

/* ================================ PHONE ================================
   Under 700px the desk is in flow, not pinned: the text block, then the two
   screens stacked full width, no 3D turn, no split. The desktop rules above
   are id-specific so they are overridden here at the same weight, later. */
@media (max-width:700px){
  #wk{height:auto;padding:0 0 clamp(28px,7vw,44px)}
  #wk .wk-pin{position:static;height:auto;display:block;overflow:visible;padding-top:0}
  #wk .sx-kw{position:static;padding-top:28px;padding-bottom:22px}
  #wk .wk-rig{grid-template-columns:1fr;gap:18px;perspective:none;margin:0}
  #wk .wk-side--l .wk-dev,#wk .wk-side--r .wk-dev{transform:none;width:100% !important;margin:0 !important}
  #wk .sx-kw .wk-line{max-width:none !important}
  #wk .sx-kw .sx-band{width:auto}
}

/* ================================ WHAT WE DO ================================
   The old site's four stages, word for word, then the two lines from SimX.
   David: "we need to provide an overview of the work we do" before SimX. */
.what{padding:clamp(48px,7vw,84px) 0 clamp(40px,6vw,72px);background:var(--paper)}
.what-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.what-grid h3{font-size:19px;font-weight:700;letter-spacing:-.015em;margin:0 0 10px;padding-top:14px;border-top:1px solid var(--rule)}
.what-grid p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.what-exp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;
  margin-top:clamp(40px,6vw,72px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--rule)}
.what-num{margin:0;font-size:clamp(64px,9vw,120px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.what-num span{color:var(--blue-700)}
.what-num small{display:block;margin-top:12px;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.what-exp p{font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:var(--ink-2);margin:0 0 12px;max-width:56ch}
.what-exp p:last-child{margin-bottom:0}
@media (max-width:820px){.what-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.what-exp{grid-template-columns:1fr}}
@media (max-width:560px){.what-grid{grid-template-columns:1fr}}

/* the four stages sit above the graph now, the event line runs through the graph only */
.phz-k{grid-row:1;grid-column:1/-1}
.phz-p{grid-row:2}
.phz-band{grid-row:3}
.phz-evt{grid-row:3/4}
.phz-p.p3{border-left:1px solid var(--blue-700)}

/* ---- SimX as the first session step: one screen in the photo slot ---- */
.ses-shot--simx{aspect-ratio:4/3;background:var(--paper);overflow:hidden;box-shadow:none;border-radius:0}   /* white on white: the cell has no edge, so no shadow of its own */
.ses-shot--simx .sx{position:absolute;inset:0;z-index:1}
.ses-shot--simx #wk{height:100%;padding:0}
.ses-shot--simx #wk .wk-pin{position:static;height:100%;display:flex;align-items:center;padding:0;overflow:hidden}
.ses-shot--simx #wk .wk-rig{grid-template-columns:1fr;perspective:none;margin:0;gap:0;transform:none !important}
.ses-shot--simx #wk .wk-side--l{display:none}
.ses-shot--simx #wk .wk-side--r .wk-dev{transform:none;width:100% !important;margin:0 !important}
.ses-more{margin:14px 0 0;font-family:var(--fm);font-size:13px}
.ses-more a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px;transition:color .2s,border-color .2s}
.ses-more a:hover{color:var(--blue-700);border-bottom-color:var(--blue-700)}
/* the 13px bar logo is 7px once the screen is zoomed into the slot: unreadable, so gone */
.ses-shot--simx #wk .wk-osmark{display:none}
/* inside the slot there is 28px under the screen, not 84: a shadow that fits it */
.ses-shot--simx #wk .wk-bez{box-shadow:0 0 0 1px rgba(35,33,34,.14),0 1px 0 rgba(255,255,255,.95) inset,0 10px 18px -12px rgba(35,33,34,.35) !important}

/* ---- round two from David ---- */
.what .what-exp{margin-top:0;padding-top:0;border-top:0}
.what-exp .what-num{font-size:clamp(64px,9vw,120px);font-weight:700;letter-spacing:-.04em;line-height:1;margin:0;max-width:none;color:var(--ink)}
.what-exp .what-num small{font-size:11px;font-weight:600;letter-spacing:.14em}
.what-quote{margin:clamp(32px,5vw,56px) 0 clamp(40px,6vw,72px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--rule);
  font-size:clamp(19px,1.8vw,26px);line-height:1.4;font-weight:500;color:var(--ink);max-width:44ch;text-wrap:balance}
.phz-lnk{display:inline-block;margin-left:6px;font-family:var(--fm);font-size:12px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:1px;white-space:nowrap}
.phz-lnk:hover{color:var(--blue-700);border-bottom-color:var(--blue-700)}
.hx-acts{margin-top:clamp(20px,3vw,34px)}

/* case-studies page: name only, same as the home list */
.cs-list .cs-link{grid-template-columns:1fr auto;padding-block:clamp(16px,2vw,22px)}

/* the four stages in Socom blue, with the rule above them in blue too, the way
   the old site set them. Same four words in the value section, same colour. */
.what-grid h3{color:var(--blue-700);border-top:2px solid var(--blue-700)}

/* ---- phone fixes, 4 Sep ---- */
/* the desktop row placement for the value graph must not reach the single column:
   there the pieces run in source order, graph first, the event rule between 02 and 03 */
@media (max-width:900px){
  .phz-k,.phz-band,.phz-evt,.phz-p,.phz-p.p1,.phz-p.p2,.phz-p.p3,.phz-p.p4{grid-row:auto}
  .phz-p.p3{border-left:0}
}
/* the number stays tappable and off the burger on the narrowest phones */
@media (max-width:400px){.tel-num{font-size:15px}.hdr-in{gap:10px}}

/* ---- the phone menu: a panel under the header ---- */
@media (max-width:1180px){
  .hdr.menu-open .nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-top:1px solid var(--rule);padding:6px var(--gut) 16px;gap:0;
    box-shadow:0 24px 40px -28px rgba(13,37,71,.4);z-index:50}
  .hdr.menu-open .nav a{display:block;padding:14px 0;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.2}
  .hdr.menu-open .nav a:last-child{border-bottom:0}
  .hdr.menu-open .nav a.on{border-bottom:1px solid var(--rule);color:var(--blue-700)}   /* in the panel the page marker is colour, not the underline */
  .hdr.menu-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
  .hdr.menu-open .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
  .burger span{transition:transform .2s ease}
}

/* ================================ ROUND THREE ================================ */
/* hero: one navy band across the page, copy on the left, the ripple on the right */
.hx{background:var(--blue-900);color:#fff;min-height:0;display:block}
.hx::after{display:none}
.hx-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;
  padding:clamp(48px,7vw,88px) var(--gut) clamp(48px,7vw,88px);min-height:min(62vh,560px)}
.hx-h1{color:#fff;font-size:clamp(30px,4.6vw,58px);max-width:16ch}
.hx-h1 .yr{color:#8CC4FF}
.hx-tag{margin:14px 0 0;font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:rgba(255,255,255,.78);max-width:34ch}
.hx .lnk{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.hx .lnk:hover{color:#8CC4FF;border-bottom-color:#8CC4FF}
.hx-field{--ring:255,255,255;opacity:.7}
.hx-pic{position:absolute;top:0;right:0;bottom:0;width:52%;margin:0;z-index:1}
.hx-pic img,.hx-pic video{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
@media (max-width:860px){
  .hx-in{grid-template-columns:1fr;min-height:0;padding-bottom:0}
  .hx-pic{position:relative;width:100%;height:220px;margin-top:28px}
  .hx-pic img,.hx-pic video{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
}

/* less white between sections */
.what{padding:clamp(36px,5vw,60px) 0 clamp(28px,4vw,44px)}
.what .what-exp{margin-top:0;padding-top:0;border-top:0;align-items:start}
.what-exp .what-num{font-size:clamp(44px,5.5vw,72px)}
.what-exp p{font-size:clamp(16px,1.3vw,18px);max-width:62ch}
.what .h2{margin-top:clamp(32px,5vw,56px)}
.phz{padding:clamp(28px,4vw,48px) 0 clamp(36px,5vw,60px)}
.phz .h2{margin-bottom:12px}
.phz-tag{margin:0 0 clamp(20px,3vw,32px);font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:var(--ink-2);max-width:52ch}
.trust{padding:clamp(24px,3.5vh,40px) 0 clamp(20px,3vh,32px)}
.strip{padding:clamp(40px,5vw,60px) 0}
.cs-home{padding:clamp(28px,4vw,44px) 0 clamp(16px,3vw,28px)}
.close{padding:clamp(48px,6vw,80px) 0 clamp(44px,6vw,72px)}
.bignum{font-size:clamp(24px,3.4vw,40px)}

/* services under each heading, with a picture slot above the text */
.what-pic{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;margin:0 0 14px}
.what-list{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--rule)}
.what-list li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.45;color:var(--ink)}
.what-list a{color:var(--blue-700);text-decoration:none;border-bottom:1px solid var(--blue-300)}
.what-list a:hover{border-bottom-color:var(--blue-700)}

/* the value graph without its four columns underneath */
.phz-grid{row-gap:0}
.hx-pic[hidden]{display:none}
.hx-pic img[hidden],.hx-pic video[hidden]{display:none}

/* ---- phone hero: the media is the background, the copy sits on it ---- */
@media (max-width:860px){
  .hx-pic{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:0}
  .hx-pic img,.hx-pic video{-webkit-mask-image:none;mask-image:none;object-position:60% 70%;opacity:.9}
  .hx-pic::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(13,37,71,.90) 0%,rgba(13,37,71,.70) 45%,rgba(13,37,71,.30) 100%)}
  .hx-in{display:block;position:relative;z-index:2;padding:clamp(40px,9vw,64px) var(--gut) clamp(36px,8vw,56px);
    min-height:min(68vh,520px);display:flex;flex-direction:column;justify-content:flex-start}
  .hx-h1{text-shadow:0 1px 2px rgba(0,0,0,.25)}
}

/* ================================ FINAL CONTENT REVIEW ================================ */
/* The call is a practical, always-visible action rather than another generic header link. */
.incident-call{
  display:grid;grid-template-columns:14px minmax(0,1fr);
  grid-template-areas:"icon label" "icon number";
  align-items:center;column-gap:7px;row-gap:2px;
  padding:8px 12px;border:1px solid var(--blue-700);border-radius:3px;
  background:var(--blue-700);color:#fff;text-decoration:none;line-height:1.25;white-space:nowrap;
  box-shadow:0 1px 2px rgba(13,37,71,.2);
}
.incident-ic{grid-area:icon;width:14px;height:14px;color:inherit}
.incident-label{grid-area:label;font-family:var(--ff);font-size:14px;font-weight:600;letter-spacing:.005em;color:inherit}
.incident-number{grid-area:number;font-family:var(--ff);font-size:14px;font-weight:600;letter-spacing:.005em;color:inherit}
.incident-call:hover{background:var(--blue-900);border-color:var(--blue-900)}
.incident-call:hover .incident-number{color:#fff}

/* The clip is the hero. The still remains only as the video's poster while it loads. */
.hx-field{display:none}
.hx-pic video{width:100%;height:100%;object-fit:cover;display:block}

/* A small label adds the requested context without competing with the 35+ figure. */
.what-stat{min-width:172px}
.what-kicker{margin:0 0 10px;font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.35;color:var(--ink-3)}

/* The reflection follows the chart and its source. */
.phz-copy{max-width:66ch;margin:clamp(24px,3vw,38px) 0 0}
.phz-copy p{margin:0;font-size:17px;line-height:1.55;color:var(--ink-2)}
.phz-copy p + p{margin-top:12px}
.phz-copy .phz-question{font-size:19px;font-weight:600;line-height:1.42;color:var(--ink);text-wrap:balance}

/* SimX interface extracted from the supplied crisis support proposal. */
.simx{position:relative;background:#fff;color:var(--ink);padding:clamp(52px,7vw,88px) 0}
.simx-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,64px);align-items:center}
.simx-k{margin:0 0 14px;font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--blue-700)}
.simx .h2{margin-bottom:22px;max-width:13ch;color:var(--ink)}
.simx-copy > p:not(.simx-k){max-width:59ch;margin:0 0 16px;font-size:17px;line-height:1.55;color:var(--ink-2)}
.simx-link{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding-bottom:4px;border-bottom:1px solid var(--blue-700);color:var(--blue-700);font-family:var(--fm);font-size:13px;font-weight:500;text-decoration:none}
.simx-link span{font-size:18px;line-height:.8}
.simx-link:hover{color:var(--ink);border-bottom-color:var(--ink)}
.simx-image{margin:0;width:100%;max-width:592px;justify-self:center}
.simx-image img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:4px}
@media (max-width:760px){
  .simx-in{grid-template-columns:1fr;gap:34px}
}
@media (max-width:520px){
  .incident-call{padding:5px 7px;column-gap:6px}
  .incident-label{font-size:12px}
  .incident-number{font-size:12.5px}
  .simx-copy > p:not(.simx-k){font-size:16px}
  .phz-copy p{font-size:16px}
  .phz-copy .phz-question{font-size:18px}
}

/* David's September review: keep the service lists on a shared baseline.
   Subgrid sizes the description row to the longest copy in each visible row. */
#what > .wrap > .h2{max-width:27ch}
.what-grid{row-gap:0}
.what-grid > div{display:grid;grid-template-rows:subgrid;grid-row:span 5;min-width:0}
.what-grid > div > p{padding-bottom:22px}
.what-grid .what-services{
  margin:0;padding:0 0 9px;
  font-family:var(--ff);font-size:16px;line-height:1.4;font-weight:700;color:var(--blue-700);
}
.what-list{margin:0;border-top:2px solid var(--blue-700);align-self:start}
.what-list li{font-size:15px;font-weight:500;padding:11px 0}
@media (max-width:820px){.what-grid{row-gap:0}.what-grid > div{margin-bottom:30px}}
@supports not (grid-template-rows:subgrid){.what-grid > div{display:block}}

/* Compact, centred quotations keep the emphasis on the clients' words. */
.testimonials{padding:clamp(28px,4vw,44px) 0;text-align:center}
.testimonials .h2{max-width:none;margin-bottom:22px;font-size:22px;line-height:1.3}
.testimonial{max-width:880px;margin:0 auto;padding:0}
.testimonial + .testimonial{margin-top:26px}
.testimonial blockquote{margin:0}
.testimonial blockquote p{margin:0;font-size:16px;line-height:1.6;color:var(--ink)}
.testimonial figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.testimonial figcaption strong{display:block;font-weight:600}
.testimonial figcaption span{display:block;color:var(--blue-700);font-size:13px}
@media (max-width:360px){
  .hdr-in{gap:6px;padding-inline:12px}
  .brand img{width:80px}
  .incident-call{grid-template-areas:"icon number";padding:6px}
  .incident-label{display:none}
  .incident-number{font-size:12px}
}