/* ============================================================
   VERTEX — OPTION C  ·  "THE CONTROL ROOM"
   The two designs, resolved rather than averaged.

   From A: navy authority, the animated V mark, real photography,
           warm display type, the credentials strip.
   From B: the live P&ID mimic, function blocks, the standards
           schedule, mono tagging, the title-block footer.

   Two corrections neither had. A mimic belongs on a DARK screen —
   that is what ISA-101 asks for and what every control room in
   the country actually runs. And the mark and the mimic must not
   share a frame: two focal points side by side and neither wins.
   So the mark owns the hero, the mimic owns its own band further
   down, and the document-grade body sits in the light between
   them. Dark / light / dark, the way a drawing set opens.
   ============================================================ */
:root{
  --navy-900:#071A33;
  --navy-800:#0D274A;
  --navy-700:#12345F;
  --navy-600:#1B4470;
  --accent:#3180F5;
  --accent-lt:#7FB4FF;
  --ink:#16202C;
  --ink-2:#44577A;
  --slate:#5D6B7A;
  --line:#E3E7EC;
  --line-2:#EEF1F5;
  --paper:#FFFFFF;
  --paper-alt:#F6F8FA;
  --soft:#EDF3FE;

  /* HMI state colours, dark-screen values */
  --run:#2BD9A5;
  --flow:#47C6F5;
  --warn:#F5A623;

  --display:"Plus Jakarta Sans",Inter,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1240px;
  --gut:clamp(20px,4vw,44px);
  --r:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--slate);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;line-height:1.14;font-weight:700}
h2{font-size:clamp(27px,3.3vw,39px);letter-spacing:-.018em}
h3{font-size:18px;line-height:1.3}
p{margin:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}

.skip{position:absolute;left:16px;top:-70px;z-index:400;background:var(--accent);color:#fff;
  padding:11px 18px;border-radius:var(--r);font-weight:600;text-decoration:none;transition:top .18s}
.skip:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- mono tagging (from B) ---------- */
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px}
.on-dark .eyebrow,.dark .eyebrow{color:var(--accent-lt)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(7,26,51,.94);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(127,180,255,.14)}
.hdr-in{display:flex;align-items:center;gap:22px;height:78px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand svg{width:34px;height:34px;flex:none}
.brand-n{display:block;font-family:var(--display);font-weight:800;font-size:22px;color:#fff;
  letter-spacing:.105em;line-height:1}
.brand-s{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  color:var(--accent-lt);margin-top:4px}
.nav{display:flex;align-items:center;gap:2px}
.nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.72);text-decoration:none;padding:8px 11px;border-radius:var(--r);
  transition:color .16s,background .16s}
.nav a:hover{color:#fff;background:rgba(127,180,255,.12)}
.hdr-cta{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent);color:#fff;text-decoration:none;padding:11px 17px;border-radius:var(--r);
  white-space:nowrap;transition:background .16s}
.hdr-cta:hover{background:#1F6BDC}
.burger{display:none;background:none;border:1px solid rgba(127,180,255,.3);border-radius:var(--r);
  width:42px;height:38px;padding:9px 10px;cursor:pointer}
.burger span{display:block;height:1.5px;background:#fff;margin:4px 0}
@media (max-width:940px){
  .burger{display:block;order:3}
  .hdr-cta{display:none}
  .nav{position:absolute;top:78px;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;background:var(--navy-900);padding:8px var(--gut) 18px;
    border-bottom:1px solid rgba(127,180,255,.16)}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid rgba(127,180,255,.1)}
}

/* ---------- hero: the control room ---------- */
.hero{position:relative;background:var(--navy-900);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(127,180,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,180,255,.055) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(ellipse 110% 100% at 62% 46%,#000 12%,rgba(0,0,0,.55) 58%,transparent 92%);
  mask-image:radial-gradient(ellipse 110% 100% at 62% 46%,#000 12%,rgba(0,0,0,.55) 58%,transparent 92%)
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 62% at 76% 40%,rgba(49,128,245,.20),transparent 68%)
}
.hero-in{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,4.5vw,64px);align-items:center;
  padding-block:clamp(48px,6vw,84px)}
@media (max-width:1040px){.hero-in{grid-template-columns:minmax(0,1fr);gap:36px}}
.hero h1{color:#fff;font-size:clamp(33px,4.4vw,55px);font-weight:800;letter-spacing:-.028em;
  margin-top:15px;position:relative}
.hero h1 em{font-style:normal;color:var(--accent-lt)}

/* ============================================================
   HEADLINE REVEAL
   The words rise in sequence, then a trace draws itself under
   the accent phrase — a signal arriving, which is the same idea
   as the mark's rings. It runs once, takes about 1.3s in total,
   and never repeats. Without JavaScript, or under reduce-motion,
   the headline is simply there.
   ============================================================ */
.hw{display:inline-block;opacity:0;transform:translateY(0.38em);
  animation:hw-rise .62s cubic-bezier(.2,.75,.3,1) forwards}
@keyframes hw-rise{to{opacity:1;transform:none}}
.hw-u{position:relative;display:inline-block}
.hw-u::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-lt));border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  animation:hw-trace .8s cubic-bezier(.3,.7,.25,1) forwards;animation-delay:1.05s}
@keyframes hw-trace{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .hw{opacity:1;transform:none;animation:none}
  .hw-u::after{transform:scaleX(1);animation:none}
}
.lede{color:rgba(255,255,255,.76);font-size:clamp(15.5px,1.4vw,17.5px);margin-top:20px;max-width:52ch}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:26px}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-lt);border:1px solid rgba(127,180,255,.3);border-radius:var(--r);padding:6px 11px}
.acts{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:14px 22px;
  border-radius:var(--r);border:1px solid transparent;transition:background .16s,border-color .16s,color .16s}
.btn-p{background:var(--accent);color:#fff}
.btn-p:hover{background:#1F6BDC}
.btn-g{border-color:rgba(255,255,255,.3);color:#fff}
.btn-g:hover{border-color:var(--accent-lt);background:rgba(127,180,255,.1)}
.btn-d{background:var(--navy-800);color:#fff}
.btn-d:hover{background:var(--navy-700)}

/* ---------- the mimic, on a dark screen where it belongs ---------- */
.scr{border:1px solid rgba(127,180,255,.22);border-radius:var(--r);
  background:linear-gradient(168deg,#0A2140,#071A33 62%);
  box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.2)}
.scr-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 16px;border-bottom:1px solid rgba(127,180,255,.16);
  background:rgba(127,180,255,.05)}
.scr-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--run)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--run);display:block;
  animation:blink 2.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
.scr svg{display:block;width:100%;height:auto;padding:14px 16px 16px}

.flow-p{stroke-dasharray:7 16;animation:flowa 1.9s linear infinite}
@keyframes flowa{to{stroke-dashoffset:-46}}
.imp{transform-origin:317px 176px;animation:spin 2.4s linear infinite}
/* the portrait mimic's pump sits elsewhere, so it needs its own origin —
   sharing .imp span it around the landscape drawing's centre point */
.impv{transform-origin:150px 192px;animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lvl{transform-box:fill-box;transform-origin:bottom;animation:lvl 11s ease-in-out infinite}
@keyframes lvl{0%,100%{transform:scaleY(.56)}50%{transform:scaleY(.82)}}
.trend{stroke-dasharray:520;stroke-dashoffset:520;animation:draw 5.2s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.dot{animation:dotp 2.8s ease-in-out infinite}
@keyframes dotp{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- credentials strip (from A) ---------- */
.creds{background:var(--navy-800);border-top:1px solid rgba(127,180,255,.14);position:relative;z-index:2}
.creds-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cred{display:flex;gap:14px;align-items:flex-start;padding:24px 22px;
  border-left:1px solid rgba(127,180,255,.12);min-width:0}
.cred:first-child{border-left:0}
.cred svg{width:30px;height:30px;flex:none;stroke:var(--accent-lt);fill:none;stroke-width:1.4}
.cred-v{font-family:var(--display);font-size:17px;font-weight:700;color:#fff;line-height:1.25;
  overflow-wrap:anywhere}
.cred-l{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:3px}
@media (max-width:940px){
  .creds-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cred:nth-child(odd){border-left:0}
  .cred:nth-child(n+3){border-top:1px solid rgba(127,180,255,.12)}
}
@media (max-width:540px){
  .creds-in{grid-template-columns:minmax(0,1fr)}
  .cred{border-left:0}
  .cred:nth-child(n+2){border-top:1px solid rgba(127,180,255,.12)}
}

/* ---------- sections ---------- */
.sec{padding-block:clamp(54px,6.5vw,92px)}
.sec-alt{background:var(--paper-alt);border-block:1px solid var(--line)}
.sec-dark{background:var(--navy-800);color:rgba(255,255,255,.76)}
.sec-dark h2,.sec-dark h3{color:#fff}
.hd{margin-bottom:38px}
.hd-row{display:flex;align-items:center;gap:13px;margin-bottom:10px}
.hd p{margin-top:14px;font-size:16.5px;max-width:60ch}
.sec-dark .hd p{color:rgba(255,255,255,.7)}

/* ---------- function blocks (from B, warmed up) ---------- */
.fbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:980px){.fbs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.fbs{grid-template-columns:minmax(0,1fr)}}
.fb{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 22px;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.fb:hover{border-color:var(--accent);box-shadow:0 14px 34px rgba(16,39,65,.09);transform:translateY(-3px)}
.fb-n{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--slate);margin-bottom:14px}
.fb h3{margin-bottom:10px}
.fb p{font-size:14.5px;line-height:1.62}
.pins{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;padding-top:16px;
  border-top:1px dashed var(--line)}
.pin{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);background:var(--soft);padding:4px 8px;border-radius:2px}

/* ---------- platforms ---------- */
.marks{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:11px}
.mark{font-family:var(--display);font-size:14.5px;font-weight:600;color:var(--navy-800);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:9px 15px;white-space:nowrap}
.mark-p{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);background:var(--soft);border-color:transparent}
.note{font-size:13.5px;line-height:1.7;color:var(--slate);border-left:3px solid var(--accent);
  padding:4px 0 4px 16px}
.note b{color:var(--ink);font-weight:600}

/* ---------- delivery sequence ---------- */
.seq{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);
  border-radius:var(--r);background:#fff;overflow:hidden}
@media (max-width:860px){.seq{grid-template-columns:minmax(0,1fr)}}
.stp{padding:24px 20px;border-right:1px solid var(--line);position:relative}
.stp:last-child{border-right:0}
@media (max-width:860px){
  .stp{border-right:0;border-bottom:1px solid var(--line)}
  .stp:last-child{border-bottom:0}
  .stp::after{display:none!important}
}
.stp-n{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--accent);margin-bottom:11px}
.stp h3{font-size:16px;margin-bottom:8px}
.stp p{font-size:13.5px;line-height:1.55}
.stp::after{content:"";position:absolute;right:-5px;top:34px;width:8px;height:8px;background:#fff;
  border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent);transform:rotate(45deg)}
.stp:last-child::after{display:none}

/* ---------- standards schedule (from B) ---------- */
.io-wrap{overflow-x:auto}
.io{width:100%;border-collapse:collapse;background:transparent;font-size:14.5px}
.io th{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  text-align:left;padding:0 18px 14px 0;background:transparent;
  color:var(--slate);font-weight:500;white-space:nowrap}
.io td{padding:11px 18px 11px 0;vertical-align:top;color:var(--slate)}
.io tbody tr:hover td{color:var(--ink)}
.io .m{font-family:var(--mono);font-size:12.5px;color:var(--accent);white-space:nowrap}
.st{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;white-space:nowrap;display:inline-block;border-radius:2px}
.st-a{color:#0A7A5C;background:rgba(10,122,92,.1)}
.st-b{color:var(--accent);background:var(--soft)}
@media (max-width:720px){
  .io{border:0}
  .io thead{display:none}
  .io,.io tbody,.io tr,.io td{display:block;width:100%}
  .io tr{padding:0 0 22px}
  .io tbody tr:hover td{color:var(--slate)}
  .io td{border:0;padding:0}
  .io td:nth-child(2){font-family:var(--display);font-weight:700;color:var(--ink);
    font-size:16px;margin:7px 0 4px}
  .io td:nth-child(4){margin-top:11px}
}

/* ---------- three-column spec block ---------- */
.spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);
  border-radius:var(--r);background:#fff;overflow:hidden}
@media (max-width:860px){.spec{grid-template-columns:minmax(0,1fr)}}
.spec > div{padding:24px 22px;border-right:1px solid var(--line)}
.spec > div:last-child{border-right:0}
@media (max-width:860px){
  .spec > div{border-right:0;border-bottom:1px solid var(--line)}
  .spec > div:last-child{border-bottom:0}
}
.spec h3{font-size:14.5px;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.spec ul{list-style:none;margin:0;padding:0}
.spec li{font-size:14px;padding:5px 0;line-height:1.55}
.sec-dark .spec{background:rgba(255,255,255,.04);border-color:rgba(127,180,255,.2)}
.sec-dark .spec > div{border-right-color:rgba(127,180,255,.2)}
.sec-dark .spec h3{border-bottom-color:rgba(127,180,255,.26)}
.sec-dark .spec li{color:rgba(255,255,255,.78)}
@media (max-width:860px){.sec-dark .spec > div{border-bottom-color:rgba(127,180,255,.2)}}

/* ---------- experience ---------- */
.cts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:34px}
@media (max-width:980px){.cts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cts{grid-template-columns:minmax(0,1fr)}}
.ct{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.ct-r{width:32px;height:2px;background:var(--accent);margin-bottom:16px}
.ct h3{font-size:16px;margin-bottom:7px}
.ct p{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(26px,4vw,52px);align-items:start}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.xl{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.xl li{padding:9px 18px;font-size:15px;color:var(--ink)}
.xl li:first-child{padding-top:16px}
.xl li:last-child{padding-bottom:16px}
.xl li::before{content:"▸";color:var(--accent);margin-right:11px;font-size:11px}

/* ---------- download ---------- */
.dl{display:inline-flex;align-items:center;gap:12px;text-decoration:none;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:15px 20px;
  transition:border-color .18s,box-shadow .18s}
.dl:hover{border-color:var(--accent);box-shadow:0 8px 22px rgba(16,39,65,.08)}
.dl svg{width:25px;height:25px;stroke:var(--accent);fill:none;stroke-width:1.4;flex:none}
.dl b{display:block;font-family:var(--display);font-size:15px;color:var(--ink)}
.dl span{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--slate)}
.sec-dark .dl{background:rgba(255,255,255,.05);border-color:rgba(127,180,255,.22)}
.sec-dark .dl b{color:#fff}
.sec-dark .dl span{color:rgba(255,255,255,.62)}

/* ---------- contact ---------- */
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:920px){.ct-grid{grid-template-columns:minmax(0,1fr)}}
.dlist{margin-top:28px}
.dlist div{display:flex;justify-content:space-between;gap:16px;padding:9px 0}
.dlist dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);padding-top:3px}
.dlist dd{margin:0;font-size:14.5px;color:var(--ink);font-weight:500;text-align:right}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.form-h{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 20px;
  border-bottom:1px solid var(--line);background:var(--paper-alt)}
.form-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.form-b{padding:22px 20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
.f{margin-bottom:15px}
.f label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;font-family:var(--body);font-size:15px;color:var(--ink);
  background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px}
.f textarea{min-height:100px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--accent);outline-offset:-2px;
  border-color:var(--accent);background:#fff}
.sub{width:100%;justify-content:center;border:0;cursor:pointer;font-family:var(--mono)}
.sub:disabled{opacity:.6;cursor:default}
.fine{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--slate);margin-top:14px}

/* ---------- title block footer (from B, in navy) ---------- */
.tb{background:var(--navy-900);color:rgba(255,255,255,.72);
  border-top:2px solid var(--accent)}
.tb-top{padding:34px 0 24px}
.tb-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:0 8px}
@media (max-width:980px){.tb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tb-grid{grid-template-columns:minmax(0,1fr)}}
.tb-c{padding:4px 20px 18px 0;min-width:0}
@media (max-width:980px){.tb-c{padding-right:0}}
.tb-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-lt);margin-bottom:7px}
.tb-v{font-size:14px;color:rgba(255,255,255,.88);line-height:1.45;overflow-wrap:anywhere}
.tb-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 0 26px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}

@media (prefers-reduced-motion:reduce){
  .flow-p,.imp,.lvl,.trend,.dot,.live i{animation:none}
  .trend{stroke-dashoffset:0}
  .tile img,.fb{transition:none}
  html{scroll-behavior:auto}
}


/* ============================================================
   SUBPAGE HERO
   ============================================================ */
.phero{background:var(--navy-900);position:relative;overflow:hidden;
  padding-block:clamp(44px,5.5vw,74px)}
.phero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(127,180,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,180,255,.05) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(ellipse 100% 120% at 22% 50%,#000 10%,transparent 82%);
  mask-image:radial-gradient(ellipse 100% 120% at 22% 50%,#000 10%,transparent 82%)
}
.phero > .wrap{position:relative;z-index:1}
.phero h1{color:#fff;font-size:clamp(29px,3.7vw,46px);font-weight:800;letter-spacing:-.024em;
  max-width:19ch}
.phero p{color:rgba(255,255,255,.72);font-size:16.5px;margin-top:16px;max-width:62ch}

/* service detail rows */
.sd{display:grid;grid-template-columns:78px minmax(0,1fr);gap:clamp(20px,3vw,40px);
  padding-block:38px;border-bottom:1px solid var(--line)}
.sd:last-child{border-bottom:0}
@media (max-width:640px){.sd{grid-template-columns:minmax(0,1fr);gap:16px}}
.sd-n{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--accent);
  border-top:2px solid var(--accent);padding-top:10px}
.sd h2{font-size:clamp(21px,2.3vw,27px);margin-bottom:12px}
.sd > div > p{font-size:16px;max-width:64ch}
.sd ul{list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 26px}
@media (max-width:700px){.sd ul{grid-template-columns:minmax(0,1fr)}}
.sd li{position:relative;padding:7px 0 7px 22px;font-size:14.5px;
  border-bottom:1px dashed var(--line-2)}
.sd li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;
  border:1.5px solid var(--accent);border-radius:50%}

/* closing band */
.band{background:var(--navy-800);color:rgba(255,255,255,.76);
  padding-block:clamp(40px,5vw,62px)}
.band-in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.band h2{color:#fff;font-size:clamp(23px,2.6vw,31px)}
.band p{margin-top:10px;max-width:56ch;color:rgba(255,255,255,.7)}

/* current page in the nav */
.nav a.on{color:#fff;background:rgba(127,180,255,.14);box-shadow:inset 0 -2px 0 var(--accent)}

/* no-JS guard: nothing on this site depends on script to be readable, but the
   year placeholders should not read as a stale hard-coded date */

/* ============================================================
   HERO — the brand mark, on its own
   The mimic used to sit on top of this and the two fought each
   other: two focal points, neither winning. The mark now has the
   hero to itself and the mimic has its own band further down,
   where it is big enough to actually read.
   ============================================================ */
.stage{position:relative;display:grid;place-items:center}
.stage-mark{width:100%;max-width:520px;aspect-ratio:1;
  position:relative;pointer-events:none}
.stage-mark svg{width:100%;height:100%;display:block;overflow:visible}
@media (max-width:1040px){.stage-mark{max-width:380px}}
@media (max-width:620px){.stage-mark{max-width:270px}}

/* the mark's own animation, carried over from the brand-mark hero */
.hm-pulse{transform-box:fill-box;transform-origin:center;opacity:0;
  animation:hm-pulse 8.4s cubic-bezier(.22,.7,.3,1) infinite}
.hm-p2{animation-delay:2.8s}
.hm-p3{animation-delay:5.6s}
@keyframes hm-pulse{
  0%   {transform:scale(.62);opacity:0}
  14%  {opacity:.42}
  100% {transform:scale(1.72);opacity:0}
}
.hm-ring-a{transform-box:fill-box;transform-origin:center;animation:hm-spin 90s linear infinite}
.hm-ring-b{transform-box:fill-box;transform-origin:center;animation:hm-spin 64s linear infinite reverse}
@keyframes hm-spin{to{transform:rotate(360deg)}}
.hm-orbit{transform-box:view-box;transform-origin:300px 300px;animation:hm-spin 38s linear infinite}
.hm-halo{transform-box:fill-box;transform-origin:center;animation:hm-breathe 13s ease-in-out infinite}
@keyframes hm-breathe{
  0%,100%{opacity:.78;transform:scale(.97)}
  50%    {opacity:1;transform:scale(1.04)}
}

/* ============================================================
   DELIVERY SECTION — sequence left, mimic panel right
   The mimic used to be a full-bleed ground behind this section and
   it fought the step cards. It now has the right third as a panel
   of its own: a screen on the wall beside the sequence, drawn top
   to bottom so its tags stay readable at that width.
   ============================================================ */
.sec-mimic{position:relative;background:var(--navy-900);overflow:hidden;
  color:rgba(255,255,255,.78);padding-block:clamp(56px,6.5vw,92px)}
.sec-mimic::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(127,180,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,180,255,.05) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 84% 50%,#000 8%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 100% at 84% 50%,#000 8%,transparent 78%)}
.sec-mimic > .wrap{position:relative;z-index:1}
.sec-mimic h2,.sec-mimic h3{color:#fff}
.sec-mimic .hd p{color:rgba(255,255,255,.72)}

.dlv{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:stretch}
@media (max-width:1020px){.dlv{grid-template-columns:minmax(0,1fr)}}

/* the sequence, stacked — it reads as a chain, which is the point */
/* No box and no row rules — the step numbers carry the structure. */
.seqv{display:flex;flex-direction:column;gap:6px}
.stpv{display:grid;grid-template-columns:82px minmax(0,1fr);gap:18px;align-items:baseline;
  padding:21px 0}
.stpv:first-child{padding-top:0}
.stpv:last-child{padding-bottom:0}
.stpv-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--accent-lt);
  padding-top:3px}
.stpv h3{font-size:17.5px;margin-bottom:6px}
.stpv p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.7)}
@media (max-width:520px){
  .stpv{grid-template-columns:minmax(0,1fr);gap:6px}
  .stpv-n{padding-top:0}
}

/* the panel */
/* The SEQUENCE sets the row height. The panel is taken out of flow so its
   drawing can never stretch the row, then fills whatever height it is given
   and scales the mimic inside that. The two columns always finish level. */
.mpanel-wrap{position:relative;min-height:360px}
.mpanel{position:absolute;inset:0;border:1px solid rgba(127,180,255,.3);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(168deg,#0A2140,#071A33 64%);
  box-shadow:0 24px 54px rgba(0,0,0,.4);
  display:flex;flex-direction:column;min-height:0}
.mpanel-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 15px;border-bottom:1px solid rgba(127,180,255,.2);
  background:rgba(127,180,255,.06)}
.mpanel-t{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
.mpanel-b{flex:1;min-height:0;display:flex;padding:16px 14px 14px}
.mpanel svg{display:block;width:100%;height:100%}
@media (max-width:1020px){
  .mpanel-wrap{position:static;min-height:0;max-width:420px;margin-inline:auto;width:100%}
  .mpanel{position:static}
  .mpanel-b{height:500px}
}

/* ============================================================
   SECTOR TILES — photography
   Real photographs of the asset classes Vertex works on, under a
   navy scrim so the label stays legible and the six tiles read as
   one set rather than six different photographers. Source images
   are 1200x800; see README before replacing them.
   ============================================================ */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:minmax(0,1fr)}}
.tile{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;
  border-radius:var(--r);text-decoration:none;background:var(--navy-800);
  transition:box-shadow .2s ease,transform .2s ease}
.tile:hover{box-shadow:0 18px 40px rgba(7,26,51,.22);transform:translateY(-3px)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease,opacity .35s ease;opacity:.78}
.tile:hover img{transform:scale(1.055);opacity:.9}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,26,51,.93) 6%,rgba(7,26,51,.40) 48%,rgba(7,26,51,.10))}
.tile-tag{position:absolute;top:13px;left:15px;z-index:2;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  color:var(--accent-lt);opacity:.92;
  background:rgba(7,26,51,.5);padding:4px 8px;border-radius:2px;
  backdrop-filter:blur(3px)}
.tile-l{position:absolute;left:19px;right:19px;bottom:17px;z-index:1;color:#fff;
  font-family:var(--display);font-weight:700;font-size:17px;line-height:1.25}
.tile-s{display:block;font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-lt);margin-top:6px}

/* ============================================================
   SECTOR SCHEMATICS — on the "beyond water" detail cards
   Small process diagrams in the same language as the hero mimic.
   The photographs above say what the asset looks like; these say
   what the control problem is. Flow animates on hover only.
   ============================================================ */
.fb-dia{background:var(--navy-900);border-radius:2px;overflow:hidden;
  position:relative;margin:-4px 0 18px}
.fb-dia::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(127,180,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,180,255,.07) 1px,transparent 1px);
  background-size:24px 24px}
.fb-dia svg{display:block;width:100%;height:auto;position:relative;z-index:1}
.fb:hover .tf{animation-play-state:running}
.tf{stroke-dasharray:5 11;animation:tflow 2.2s linear infinite;animation-play-state:paused}
@keyframes tflow{to{stroke-dashoffset:-32}}

@media (prefers-reduced-motion:reduce){
  .hm-pulse,.hm-ring-a,.hm-ring-b,.hm-halo,.hm-orbit{animation:none}
  .hm-pulse{opacity:.16}
  .hm-halo{opacity:.9}
  .fb:hover .tf{animation-play-state:paused}
  .tile,.tile img{transition:none}
  .tile:hover img{transform:none}
}