/* ============================================================================
   I ZONE ELECTROMECHANICAL CONTRACTORS LLC (IZEC)
   Design system — 2026 rebuild
   Palette derived from the company mark: navy #052E66 / signal red #DB0100
   Type: DM Sans (variable) for everything, system mono for instrument type
   ========================================================================== */

/* ---------- 1. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, video, iframe { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

/* inline icons: never allowed to size themselves */
.ico { width: 1em; height: 1em; flex: none; }
.btn .ico, .tlink .ico, .maplink .ico { width: 14px; height: 14px; }

@font-face {
  font-family: 'DM Sans';
  src: url('/media/fonts/dm-sans-variable.ttf') format('truetype');
  font-weight: 100 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/media/fonts/dm-sans-italic-variable.ttf') format('truetype');
  font-weight: 100 1000; font-style: italic; font-display: swap;
}

/* ---------- 2. TOKENS ---------- */
:root {
  /* colour */
  --ink:        #0B1B33;
  --navy:       #052E66;
  --navy-deep:  #041C3E;
  --navy-mid:   #0B3A79;
  --navy-lift:  #1B559B;
  --signal:     #DB0100;

  --paper:      #F2F4F7;
  --paper-2:    #E9ECF1;
  --surface:    #FFFFFF;
  --panel:      #E4E8EE;

  --line:       #D1D7E0;
  --line-soft:  #E2E6EC;
  --line-dark:  rgba(255,255,255,.14);
  --line-dark-2:rgba(255,255,255,.07);

  --slate:      #4A5468;
  --slate-2:    #5F6B82;
  --on-dark:    rgba(255,255,255,.72);
  --on-dark-2:  rgba(255,255,255,.44);

  /* type */
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* metrics */
  --gutter: clamp(20px, 4.4vw, 76px);
  --maxw: 1600px;
  --hdr-h: 84px;
  --sec-y: clamp(68px, 8.5vw, 132px);
  --r: 3px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 900px) { :root { --hdr-h: 68px; } }

/* ---------- 3. BASE ---------- */
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: var(--navy); color: #fff; }
:focus-visible { outline: 2px solid var(--navy-lift); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sec  { padding-block: var(--sec-y); }
.sec--tight { padding-block: clamp(52px, 6vw, 92px); }
.rule-top { border-top: 1px solid var(--line); }

/* type utilities */
.d1 {
  font-size: clamp(2.55rem, 6.1vw, 5.1rem);
  font-weight: 600; line-height: .99; letter-spacing: -.038em;
  text-wrap: balance;
}
.d2 {
  font-size: clamp(1.95rem, 3.5vw, 3.15rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -.032em;
  text-wrap: balance;
}
.d3 {
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 600; line-height: 1.16; letter-spacing: -.024em;
}
.lead {
  font-size: clamp(1.02rem, 1.25vw, 1.22rem);
  line-height: 1.62; font-weight: 350; color: var(--slate);
  max-width: 62ch;
}
.mono {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 500;
}
.tag {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: var(--navy);
  display: inline-flex; align-items: center; gap: .7em;
}
.tag::before {
  content: ''; width: 18px; height: 2px; background: var(--signal); flex: none;
}
.tag--light { color: rgba(255,255,255,.74); }

.copy p { color: var(--slate); }
.copy p + p { margin-top: 1.05em; }
.copy strong { color: var(--ink); font-weight: 550; }
.copy--dark p { color: var(--on-dark); }
.copy--dark strong { color: #fff; font-weight: 500; }

/* section head */
.head { display: grid; gap: 1.15rem; }
.head .lead { margin-top: .2rem; }
.head-row--mid { align-items: center; }
.head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem clamp(1.5rem, 4vw, 4rem); flex-wrap: wrap;
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: .95rem 1.5rem; border-radius: var(--r);
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
  cursor: pointer;
}
.btn:hover { background: var(--navy-lift); border-color: var(--navy-lift); }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--onDark { background: #fff; color: var(--navy); border-color: #fff; }
.btn--onDark:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn--outlineDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn--outlineDark:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn .arw { transition: transform .22s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.tlink {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; color: var(--navy);
  text-decoration: none; padding-bottom: .3rem;
  border-bottom: 1px solid var(--line);
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
.tlink:hover { color: var(--signal); border-color: var(--signal); }
.tlink .arw { transition: transform .22s var(--ease); }
.tlink:hover .arw { transform: translateX(4px); }
.tlink--light { color: #fff; border-color: rgba(255,255,255,.28); }
.tlink--light:hover { color: #fff; border-color: #fff; }

/* ---------- 4. HEADER ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 300;
  height: var(--hdr-h);
  display: flex; align-items: center;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr-in {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
}
.brand { flex: none; display: block; line-height: 0; }
.brand img { height: clamp(40px, 4.2vw, 58px); width: auto; }
.brand .mark-rev { display: block; }
.brand .mark-pos { display: none; }
.hdr.is-solid .brand .mark-rev { display: none; }
.hdr.is-solid .brand .mark-pos { display: block; }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.1rem); }
.nav > li { list-style: none; position: relative; }
.nav a {
  font-size: 13.5px; font-weight: 450; letter-spacing: .01em;
  text-decoration: none; color: var(--on-dark);
  padding: .5rem 0; display: inline-flex; align-items: center; gap: .4em;
  transition: color .2s var(--ease);
  position: relative;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--ease);
}
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a:hover { color: #fff; }
.hdr.is-solid .nav a { color: var(--slate); }
.hdr.is-solid .nav a:hover, .hdr.is-solid .nav a[aria-current] { color: var(--ink); }
.nav a[aria-current] { color: #fff; }

.nav .caret { width: 8px; height: 8px; opacity: .6; }

/* dropdown */
.dd {
  position: absolute; top: calc(100% + 14px); left: -18px; min-width: 268px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: 0 22px 54px rgba(6,25,55,.14);
  padding: .45rem; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-dd:hover .dd, .has-dd:focus-within .dd { opacity: 1; visibility: visible; transform: none; }
.dd::before { content: ''; position: absolute; inset: -16px 0 100% 0; }
.dd li { list-style: none; }
.dd a {
  display: block; padding: .7rem .85rem; font-size: 14px; color: var(--slate);
  border-radius: 2px; transition: background .18s, color .18s;
}
.dd a::after { display: none; }
.hdr .dd a:hover { background: var(--paper-2); color: var(--ink); }

.hdr-act { display: flex; align-items: center; gap: 1.1rem; flex: none; }
.hdr-tel {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-decoration: none; color: var(--on-dark-2); white-space: nowrap;
  transition: color .2s;
}
.hdr-tel:hover { color: #fff; }
.hdr.is-solid .hdr-tel { color: var(--slate-2); }
.hdr.is-solid .hdr-tel:hover { color: var(--navy); }
.hdr-cta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  padding: .72rem 1.15rem; border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.34); color: #fff;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  white-space: nowrap;
}
.hdr-cta:hover { background: #fff; color: var(--navy); border-color: #fff; }
.hdr.is-solid .hdr-cta { border-color: var(--navy); color: #fff; background: var(--navy); }
.hdr.is-solid .hdr-cta:hover { background: var(--signal); border-color: var(--signal); }

.hdr.is-drawer, .hdr.is-drawer.is-solid {
  background: transparent; border-bottom-color: transparent; backdrop-filter: none;
}
.hdr.is-drawer .brand .mark-rev { display: block; }
.hdr.is-drawer .brand .mark-pos { display: none; }
/* over the navy drawer the chrome must read light, whatever the page state */
.hdr.is-drawer .burger span, .hdr.is-solid .burger[aria-expanded="true"] span { background: #fff; }
.hdr.is-drawer .hdr-cta, .hdr.is-drawer.is-solid .hdr-cta {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.34);
}
.hdr.is-drawer .hdr-cta:hover { background: #fff; color: var(--navy); border-color: #fff; }
.hdr.is-solid {
  background: rgba(242,244,247,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
/* interior pages start solid */
.page--interior .hdr { background: rgba(242,244,247,.92); }

/* burger */
.burger {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; position: relative; flex: none;
}
.burger span {
  position: absolute; left: 11px; right: 11px; height: 1.5px; background: #fff;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 27px; }
.hdr.is-solid .burger span { background: var(--ink); }
.burger[aria-expanded="true"] span { background: #fff; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 290;
  background: var(--navy-deep);
  padding: calc(var(--hdr-h) + 18px) var(--gutter) 2rem;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer ul { list-style: none; }
.drawer > ul > li { border-bottom: 1px solid var(--line-dark-2); }
.drawer > ul > li > a {
  display: block; padding: 1.05rem 0; font-size: 1.45rem; font-weight: 500;
  letter-spacing: -.02em; color: #fff; text-decoration: none;
}
.drawer .sub { padding: 0 0 .9rem .1rem; display: grid; gap: .1rem; }
.drawer .sub a {
  display: block; padding: .5rem 0; font-size: 14.5px; color: var(--on-dark-2);
  text-decoration: none;
}
.drawer .sub a:hover { color: #fff; }
.drawer-foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .9rem; }
.drawer-foot .mono { color: var(--on-dark-2); }
.drawer-foot a.big {
  font-size: 1.15rem; color: #fff; text-decoration: none; font-weight: 500;
  letter-spacing: -.01em;
}
body.is-locked { overflow: hidden; }

/* ---------- 5. HERO ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--navy-deep); overflow: hidden; isolation: isolate;
}
.hero-stage { position: absolute; inset: 0; z-index: 0; }
.hero-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s var(--ease), transform 7s linear;
}
.hero-stage img.is-active { opacity: .58; transform: scale(1); }
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(4,20,42,.94) 0%, rgba(4,20,42,.55) 34%, rgba(4,20,42,.28) 62%, rgba(4,20,42,.62) 100%),
    linear-gradient(to right, rgba(4,20,42,.62) 0%, rgba(4,20,42,0) 62%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 78%);
}
.hero-body {
  position: relative; z-index: 2; flex: 1;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--hdr-h) + 3rem);
  padding-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.hero-in { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.hero-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
}
.hero-eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--signal); flex: none; }
.hero h1 {
  color: #fff; max-width: 15ch; text-wrap: balance;
  font-size: clamp(2.5rem, 5.6vw, 4.9rem);
  font-weight: 600; line-height: 1.0; letter-spacing: -.04em;
}
.hero h1 .thin { font-weight: 300; color: rgba(255,255,255,.62); }
.hero-sub {
  margin-top: clamp(1.2rem, 2vw, 1.8rem); max-width: 54ch;
  font-size: clamp(1rem, 1.15vw, 1.14rem); line-height: 1.65;
  font-weight: 350; color: rgba(255,255,255,.7);
}
.hero-cta { margin-top: clamp(1.8rem, 3vw, 2.6rem); display: flex; gap: .7rem; flex-wrap: wrap; }

/* slide register bar */
.hero-reg {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line-dark);
  background: rgba(4,18,38,.42);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero-reg-in {
  max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  min-height: 76px;
}
.hero-reg-ref {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--signal);
  flex: none;
}
.hero-reg-meta { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.hero-reg-name {
  font-size: clamp(.95rem, 1.15vw, 1.08rem); font-weight: 500; color: #fff;
  letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: min(52vw, 620px);
}
.hero-reg-loc {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}
.hero-reg-ctrl { display: flex; align-items: center; gap: .35rem; flex: none; }
.hero-reg-btn {
  width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2);
  background: transparent; border-radius: 50%; color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s, border-color .2s;
}
.hero-reg-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.hero-reg-btn svg { width: 15px; height: 15px; }
.hero-prog {
  position: absolute; left: 0; bottom: 0; height: 2px; background: var(--signal);
  width: 0; transition: width .25s linear;
}

/* ---------- 6. STAT RAIL ---------- */
.rail {
  background: var(--navy);
  border-block: 1px solid rgba(255,255,255,.08);
}
.rail-in {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.rail-cell {
  padding: clamp(1.7rem, 3vw, 2.6rem) clamp(.6rem, 2vw, 2rem) clamp(1.7rem, 3vw, 2.6rem) 0;
  border-left: 1px solid rgba(255,255,255,.1);
  padding-left: clamp(1rem, 2vw, 2rem);
}
.rail-cell:first-child { border-left: 0; padding-left: 0; }
.rail-n {
  font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 600; line-height: 1;
  letter-spacing: -.035em; color: #fff;
}
.rail-n sup { font-size: .42em; font-weight: 500; color: var(--signal); top: -.85em; }
.rail-l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.42); margin-top: .7rem;
  line-height: 1.5;
}

/* ---------- 7. LEDE / ABOUT ---------- */
.lede-grid {
  display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
  gap: clamp(2.4rem, 5vw, 6rem);
  align-items: start;
}
.lede-copy { margin-top: 1.8rem; font-size: 1.02rem; }
.lede-copy p { line-height: 1.78; }
.lede-actions { margin-top: 2.2rem; display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; }

.pillars { display: grid; }
.pillar {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem;
  padding: 1.5rem 0; border-top: 1px solid var(--line);
}
.pillar:last-child { border-bottom: 1px solid var(--line); }
.pillar-ico {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--navy); background: var(--surface);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.pillar:hover .pillar-ico { background: var(--navy); color: #fff; border-color: var(--navy); }
.pillar-ico svg { width: 18px; height: 18px; }
.pillar-h { font-size: 1.02rem; font-weight: 550; letter-spacing: -.012em; }
.pillar-b { font-size: 14.8px; line-height: 1.65; color: var(--slate); margin-top: .35rem; }

/* ---------- 8. CAPABILITIES ---------- */
.cap { background: var(--navy-deep); color: #fff; }
.cap .lead { color: var(--on-dark); }
.cap-grid {
  margin-top: clamp(2.4rem, 4vw, 3.6rem);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: stretch;
}
.cap-list { border-top: 1px solid var(--line-dark); align-self: start; }
.cap-item {
  width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--line-dark);
  padding: clamp(1.15rem, 2vw, 1.6rem) 0;
  cursor: pointer; display: grid; gap: .45rem;
  transition: padding-left .3s var(--ease);
  position: relative;
}
.cap-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--signal); transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.cap-item.is-on { padding-left: 1.15rem; }
.cap-item.is-on::before { transform: scaleY(1); }
.cap-name {
  font-size: clamp(1.1rem, 1.55vw, 1.42rem); font-weight: 500; letter-spacing: -.022em;
  color: rgba(255,255,255,.5); transition: color .25s var(--ease);
  display: flex; align-items: baseline; gap: .8rem;
}
.cap-item:hover .cap-name, .cap-item.is-on .cap-name { color: #fff; }
.cap-body {
  color: var(--on-dark); font-size: 15px; line-height: 1.7;
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .38s var(--ease), opacity .3s var(--ease);
}
.cap-body > div { overflow: hidden; }
.cap-item.is-on .cap-body { grid-template-rows: 1fr; opacity: 1; }
.cap-body p { padding-top: .55rem; max-width: 56ch; }
.cap-tags { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .95rem; }
.cap-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem .6rem; border: 1px solid rgba(255,255,255,.2); border-radius: 2px;
  color: rgba(255,255,255,.66);
}
.cap-stage {
  position: relative; height: 100%; min-height: 420px;
  border-radius: var(--r); overflow: hidden;
  background: #071B39; border: 1px solid var(--line-dark);
}
.cap-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity .6s var(--ease), transform 1.2s var(--ease);
}
.cap-stage img.is-on { opacity: .92; transform: scale(1); }
.cap-stage::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,20,42,.6), rgba(4,20,42,0) 55%);
  pointer-events: none;
}

/* ---------- 9. FEATURED PROJECTS ---------- */
.feat {
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  display: grid; gap: clamp(1rem, 1.6vw, 1.5rem);
  grid-template-columns: repeat(6, 1fr);
}
.feat > a:nth-child(1) { grid-column: span 6; }
.feat > a:nth-child(2), .feat > a:nth-child(3) { grid-column: span 3; }

.pcard { text-decoration: none; display: block; color: inherit; }
.pcard-img {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--paper-2); aspect-ratio: 4/3;
}
.feat > a:nth-child(1) .pcard-img { aspect-ratio: 21/9; }
.pcard-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.pcard:hover .pcard-img img { transform: scale(1.045); }
.pcard-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,20,42,.5), rgba(4,20,42,0) 52%);
  opacity: .8; transition: opacity .4s;
}
.pcard-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  padding: .35rem .6rem; border-radius: 2px;
  background: rgba(255,255,255,.92); color: var(--navy); font-weight: 600;
}
.pcard-badge.is-live { background: var(--signal); color: #fff; }
.pcard-info { padding-top: 1.05rem; display: grid; gap: .4rem; }
.pcard-scope {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-2);
}
.pcard-name {
  font-size: clamp(1.05rem, 1.35vw, 1.35rem); font-weight: 550; letter-spacing: -.022em;
  line-height: 1.25;
  transition: color .2s;
}
.pcard:hover .pcard-name { color: var(--navy-lift); }
.pcard-loc { font-size: 14px; color: var(--slate); }

/* ---------- 10. PROJECT REGISTER (signature) ---------- */
.reg-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding-bottom: .9rem; border-bottom: 1px solid var(--ink);
}
.reg-count { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); }
.reg-count b { color: var(--ink); font-weight: 600; }

.vswitch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.vswitch button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: .58rem 1rem; background: none; border: 0; cursor: pointer; color: var(--slate);
  display: inline-flex; align-items: center; gap: .5em;
  transition: background .2s, color .2s;
}
.vswitch button + button { border-left: 1px solid var(--line); }
.vswitch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.vswitch svg { width: 13px; height: 13px; }

.reg { width: 100%; }
.reg-row {
  display: grid;
  grid-template-columns: 58px minmax(0,2.6fr) minmax(0,1.25fr) minmax(0,1.35fr) minmax(0,1.4fr) 108px 28px;
  align-items: center; gap: 1rem;
  padding: 1.02rem .6rem 1.02rem 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
  transition: background .22s var(--ease), padding-left .28s var(--ease);
  position: relative;
}
.reg-head {
  font-family: var(--mono); font-size: 9.8px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-2); padding-block: .7rem; border-bottom: 1px solid var(--line);
}
.reg-row:not(.reg-head):hover { background: var(--surface); padding-left: .85rem; }
.reg-row:not(.reg-head)::before {
  content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: var(--signal); transform: scaleY(0); transition: transform .26s var(--ease);
}
.reg-row:not(.reg-head):hover::before { transform: scaleY(1); }
.reg-no { font-family: var(--mono); font-size: 11px; color: var(--slate-2); letter-spacing: .06em; }
.reg-name { font-size: 15.6px; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }
.reg-cell { font-size: 13.6px; color: var(--slate); line-height: 1.4; }
.reg-status { justify-self: start; }
.pill {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: 2px; border: 1px solid var(--line);
  color: var(--slate); white-space: nowrap; background: var(--surface);
}
.pill--live { border-color: rgba(219,1,0,.3); color: var(--signal); background: rgba(219,1,0,.05); }
.reg-go { color: var(--slate-2); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.reg-row:hover .reg-go { opacity: 1; transform: none; color: var(--navy); }
.reg-go svg { width: 15px; height: 15px; }
.reg-thumb { display: none; }

/* cursor-following preview */
.peek {
  position: fixed; z-index: 400; width: 288px; aspect-ratio: 4/3;
  border-radius: var(--r); overflow: hidden; pointer-events: none;
  box-shadow: 0 24px 60px rgba(4,20,42,.3);
  opacity: 0; transform: translate(-50%, -50%) scale(.94);
  transition: opacity .22s var(--ease), transform .28s var(--ease);
  border: 1px solid rgba(255,255,255,.5);
}
.peek.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.peek img { width: 100%; height: 100%; object-fit: cover; }

/* grid view */
.pgrid {
  display: grid; gap: clamp(1.1rem, 2vw, 1.9rem) clamp(1rem, 1.6vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  margin-top: 2rem;
}
.is-hidden { display: none !important; }

/* filters */
.filters { margin-top: clamp(1.8rem, 3vw, 2.6rem); display: grid; gap: 1rem; }
.frow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.frow-l {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-2); margin-right: .4rem; min-width: 54px;
}
.chip {
  font-size: 13px; font-weight: 450; padding: .5rem .95rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--slate); cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--navy); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip .n { font-family: var(--mono); font-size: 10px; opacity: .6; margin-left: .45em; }

.empty {
  padding: 3.5rem 0; text-align: center; color: var(--slate);
  border-bottom: 1px solid var(--line-soft);
}

/* ---------- 11. SEQUENCE ---------- */
.seq {
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.seq-step {
  background: var(--paper); padding: clamp(1.4rem, 2.2vw, 2rem);
  display: grid; gap: .6rem; align-content: start;
  transition: background .28s var(--ease);
}
.seq-step:hover { background: var(--surface); }
.seq-n {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--signal);
}
.seq-h { font-size: 1rem; font-weight: 550; letter-spacing: -.015em; }
.seq-b { font-size: 13.8px; line-height: 1.6; color: var(--slate); }

/* ---------- 12. GALLERY SCROLLER ---------- */
.scroller {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--gutter); padding-bottom: 1.4rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  cursor: grab;
}
.scroller.is-drag { cursor: grabbing; scroll-snap-type: none; }
.scroller::-webkit-scrollbar { height: 3px; }
.scroller::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.shot {
  flex: 0 0 auto; width: clamp(232px, 27vw, 400px); aspect-ratio: 4/3;
  border-radius: var(--r); overflow: hidden; scroll-snap-align: start;
  background: var(--paper-2); position: relative;
}
.shot:nth-child(4n+2) { aspect-ratio: 3/4; width: clamp(190px, 20vw, 300px); }
.shot img {
  width: 100%; height: 100%; object-fit: cover; cursor: zoom-in;
  transition: transform .8s var(--ease), filter .4s;
  filter: saturate(.94);
}
.shot:hover img { transform: scale(1.05); filter: saturate(1.06); }

/* ---------- 13. CREDENTIALS ---------- */
.creds-grid {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(2rem, 4vw, 5rem); align-items: start;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
.acc-list { display: grid; }
.acc {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .82rem 0; border-top: 1px solid var(--line-soft);
  font-size: 15.2px;
}
.acc:last-child { border-bottom: 1px solid var(--line-soft); }
.acc::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--navy);
  flex: none; transform: translateY(-3px);
}
.certstrip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.certcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px; aspect-ratio: 3/4; display: grid; place-items: center;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s;
  overflow: hidden;
}
.certcard:hover { box-shadow: 0 16px 38px rgba(6,25,55,.12); transform: translateY(-3px); border-color: var(--navy); }
.certcard img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }

/* ---------- 14. CONTACT ---------- */
.contact { background: var(--navy-deep); color: #fff; }
.contact-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(2.2rem, 4vw, 4.5rem); align-items: start;
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}
.offices { display: grid; }
.office {
  padding: 1.4rem 0; border-top: 1px solid var(--line-dark);
  display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 1.2rem;
}
.offices .office:last-child { border-bottom: 1px solid var(--line-dark); }
.office-l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.42); padding-top: .2rem; line-height: 1.5;
}
.office-v { font-size: 15px; line-height: 1.65; color: var(--on-dark); }
.office-v a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.office-v a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.45); }
.office-v .strongline { color: #fff; font-weight: 500; }

.mapbox { border: 1px solid var(--line-dark); border-radius: var(--r); overflow: hidden; background: #06203F; }
.maptabs { display: flex; border-bottom: 1px solid var(--line-dark); }
.maptab {
  flex: 1; background: none; border: 0; cursor: pointer; padding: .95rem 1rem;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45); transition: color .2s, background .2s; position: relative;
}
.maptab + .maptab { border-left: 1px solid var(--line-dark); }
.maptab[aria-selected="true"] { color: #fff; background: rgba(255,255,255,.05); }
.maptab[aria-selected="true"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--signal);
}
.mapframe { position: relative; aspect-ratio: 16/11; }
.mapframe iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  opacity: 0; visibility: hidden; filter: grayscale(.35) contrast(1.05);
}
.mapframe iframe.is-on { opacity: 1; visibility: visible; }
.maplink {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.15rem; border-top: 1px solid var(--line-dark);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-2); text-decoration: none; transition: color .2s, background .2s;
}
.maplink:hover { color: #fff; background: rgba(255,255,255,.04); }

/* ---------- 15. CTA BAND ---------- */
.cta {
  background: var(--navy); color: #fff;
  padding-block: clamp(3.2rem, 6vw, 5.4rem);
  position: relative; overflow: hidden;
}
.cta::before {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(90% 120% at 80% 50%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(90% 120% at 80% 50%, #000, transparent 72%);
}
.cta-in {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 2rem clamp(2rem, 5vw, 5rem); flex-wrap: wrap;
}
.cta h2 { font-size: clamp(1.7rem, 3vw, 2.7rem); font-weight: 600; letter-spacing: -.032em; line-height: 1.1; max-width: 20ch; }
.cta p { color: var(--on-dark-2); margin-top: .8rem; max-width: 46ch; font-size: 15.4px; }
.cta-acts { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ---------- 16. FOOTER ---------- */
.foot { background: var(--navy-deep); color: #fff; padding-block: clamp(3rem, 5vw, 4.4rem) 0; }
.foot-top {
  display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.4rem, 4vw, 3.4rem);
  border-bottom: 1px solid var(--line-dark-2);
}
.foot-brand img { height: 46px; width: auto; }
.foot-tagline { font-size: 14.6px; color: var(--on-dark-2); margin-top: 1.2rem; max-width: 34ch; line-height: 1.7; }
.foot-h {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.34); margin-bottom: 1.05rem;
}
.foot-col ul { list-style: none; display: grid; gap: .55rem; }
.foot-col a { font-size: 14.4px; color: var(--on-dark); text-decoration: none; transition: color .2s; }
.foot-col a:hover { color: #fff; }
.foot-col p { font-size: 14.4px; color: var(--on-dark); line-height: 1.7; }
.foot-bot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  flex-wrap: wrap; padding-block: 1.5rem 1.8rem;
}
.foot-bot, .foot-bot a {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.3); text-decoration: none;
}
.foot-bot a:hover { color: rgba(255,255,255,.7); }
.foot-legal { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ---------- 17. INTERIOR PAGE HERO ---------- */
.phero {
  position: relative; background: var(--navy-deep); color: #fff; isolation: isolate;
  padding-top: calc(var(--hdr-h) + clamp(3rem, 6vw, 5.5rem));
  padding-bottom: clamp(2.6rem, 5vw, 4.4rem);
  overflow: hidden;
}
.phero-bg { position: absolute; inset: 0; z-index: -2; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; opacity: .42; }
.phero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(4,20,42,.95) 4%, rgba(4,20,42,.55) 52%, rgba(4,20,42,.5) 100%),
    linear-gradient(to right, rgba(4,20,42,.7), rgba(4,20,42,.1) 70%);
}
.phero--plain { padding-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.phero--plain::after { background: linear-gradient(to bottom right, #04203F, #041C3E 65%); }

.crumb {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.42); margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
.crumb a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; }
.crumb a:hover { color: #fff; }
.crumb .sep { color: rgba(255,255,255,.24); }
.crumb .cur { color: #fff; }
.phero h1 {
  font-size: clamp(2.05rem, 4.6vw, 3.9rem); font-weight: 600; line-height: 1.03;
  letter-spacing: -.038em; max-width: 20ch; text-wrap: balance;
}
.phero h1 .thin { font-weight: 300; color: rgba(255,255,255,.6); }
.phero-meta {
  margin-top: clamp(1rem, 2vw, 1.5rem); max-width: 62ch;
  font-size: clamp(.98rem, 1.1vw, 1.1rem); line-height: 1.65; font-weight: 350;
  color: rgba(255,255,255,.68);
}
.phero-meta strong { color: #fff; font-weight: 500; }
.phero-facts {
  margin-top: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-wrap: wrap;
  gap: .6rem 2.6rem;
}
.phero-fact { display: grid; gap: .25rem; }
.phero-fact .l { font-family: var(--mono); font-size: 9.6px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.phero-fact .v { font-size: 14.6px; color: #fff; font-weight: 450; }

/* ---------- 18. PROJECT DETAIL ---------- */
.pd-grid {
  display: grid; grid-template-columns: 300px minmax(0,1fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
.spec {
  position: sticky; top: calc(var(--hdr-h) + 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem 1.5rem .4rem;
}
.spec-h {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate-2); padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.spec-row { padding: .95rem 0; border-bottom: 1px solid var(--line-soft); display: grid; gap: .2rem; }
.spec-row:last-of-type { border-bottom: 0; }
.spec-l { font-family: var(--mono); font-size: 9.6px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); }
.spec-v { font-size: 15.2px; line-height: 1.45; font-weight: 450; }
.spec-cta { border-top: 1px solid var(--line); margin: .4rem -1.5rem 0; padding: 1.1rem 1.5rem; }

.pgal { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.pgal-item {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--paper-2); aspect-ratio: 4/3;
}
.pgal-item.is-wide { grid-column: span 2; aspect-ratio: 16/9; }
.pgal-item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .8s var(--ease); }
.pgal-item:hover img { transform: scale(1.04); }
.pgal-item video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.pgal-count {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-2); margin-bottom: .9rem;
}

/* prev / next */
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.pn-cell {
  background: var(--paper); text-decoration: none; color: inherit;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  display: grid; gap: .5rem; transition: background .25s var(--ease);
  position: relative;
}
.pn-cell > * { padding-inline: var(--gutter); }
.pn-cell:hover { background: var(--surface); }
.pn-cell.next { text-align: right; }
.pn-dir { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.pn-name { font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 550; letter-spacing: -.022em; line-height: 1.25; }
.pn-cell.disabled { opacity: .4; pointer-events: none; }

/* ---------- 19. GALLERY / CERT PAGES ---------- */
.masonry { columns: 4; column-gap: 10px; }
.masonry .mitem { break-inside: avoid; margin-bottom: 10px; border-radius: var(--r); overflow: hidden; background: var(--paper-2); position: relative; }
.masonry .mitem img { width: 100%; height: auto; cursor: zoom-in; transition: transform .8s var(--ease), filter .4s; filter: saturate(.94); }
.masonry .mitem:hover img { transform: scale(1.035); filter: saturate(1.08); }

.certgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 1.6vw, 1.4rem); }

/* ---------- 20. LIGHTBOX ---------- */
.lb {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 5vh 4vw; background: rgba(4,14,30,.96);
  opacity: 0; pointer-events: none; transition: opacity .26s var(--ease);
}
.lb.is-open { opacity: 1; pointer-events: auto; }
.lb img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 2px; transform: scale(.97); transition: transform .26s var(--ease); }
.lb.is-open img { transform: none; }
.lb-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background .2s;
}
.lb-btn:hover { background: rgba(255,255,255,.2); }
.lb-btn svg { width: 18px; height: 18px; }
.lb-close { top: 20px; right: 22px; }
.lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.lb-cap {
  position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* ---------- 21. LOADER ---------- */
.loader {
  position: fixed; inset: 0; z-index: 900; background: var(--navy-deep);
  display: grid; place-items: center;
  transition: opacity .45s var(--ease), visibility .45s;
  /* FAIL-SAFE: clears itself even if the script never runs, so a blocked or
     failed JS request can never leave the visitor on a blank screen. */
  animation: loaderFailsafe .5s var(--ease) 2.2s forwards;
}
@keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.loader.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-in { display: grid; justify-items: center; gap: 1.4rem; }
.loader-in img { width: min(268px, 64vw); height: auto; }
.loader-bar { width: min(268px, 64vw); height: 1px; background: rgba(255,255,255,.16); overflow: hidden; }
.loader-bar::after {
  content: ''; display: block; width: 40%; height: 100%; background: var(--signal);
  animation: sweep 1.05s var(--ease) infinite;
}
@keyframes sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
.loader-lbl { font-family: var(--mono); font-size: 9.6px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.4); }

/* ---------- 22. 404 ---------- */
.err {
  min-height: 100svh; display: grid; place-items: center; text-align: center;
  padding: calc(var(--hdr-h) + 4rem) var(--gutter) 4rem;
  background: var(--navy-deep); color: #fff; position: relative; overflow: hidden;
}
.err::before {
  content: ''; position: absolute; inset: 0; opacity: .6;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 70% at 50% 45%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000, transparent 76%);
}
.err-in { position: relative; max-width: 640px; }
.err-code {
  font-size: clamp(5rem, 16vw, 10rem); font-weight: 600; letter-spacing: -.06em; line-height: .85;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.28);
}
.err h1 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; margin-top: 1.6rem; }
.err p { color: var(--on-dark-2); margin-top: 1rem; }
.err-acts { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }

/* ---------- 23. LONGFORM ---------- */
.prose { max-width: 74ch; }
.prose p { color: var(--slate); line-height: 1.85; }
.prose p + p { margin-top: 1.15em; }
.prose strong { color: var(--ink); font-weight: 550; }
.prose h2 { font-size: 1.28rem; font-weight: 600; letter-spacing: -.02em; margin-top: 2.4rem; margin-bottom: .7rem; color: var(--ink); }
.prose h2:first-child { margin-top: 0; }
.prose a { color: var(--navy); }

.sig { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.sig-name { font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.sig-role { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); margin-top: .5rem; font-weight: 500; }
.sig-regards { font-size: 1rem; color: var(--slate); margin-bottom: 1.3rem; }
.hi { color: var(--navy); font-weight: 600; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(2rem, 4vw, 4rem); }
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
}
.panel-h { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); margin-bottom: 1rem; }

/* sector / standards cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(.9rem, 1.6vw, 1.4rem); }
.cards--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card {
  position: relative; overflow: hidden; border-radius: var(--r);
  min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.3rem, 2vw, 1.8rem); color: #fff; isolation: isolate;
  background: var(--navy-deep);
}
.card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 1s var(--ease); opacity: .55;
}
.card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(4,20,42,.94) 8%, rgba(5,46,102,.6) 55%, rgba(5,46,102,.35) 100%);
}
.card:hover img { transform: scale(1.06); }
.card-n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--signal); margin-bottom: .6rem; }
.card-h { font-size: 1.1rem; font-weight: 550; letter-spacing: -.02em; line-height: 1.25; }
.card-b { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); margin-top: .5rem; }
.card-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .9rem; }
.card-tag {
  font-family: var(--mono); font-size: 9.4px; letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .5rem; border: 1px solid rgba(255,255,255,.24); border-radius: 2px; color: rgba(255,255,255,.7);
}

/* values matrix */
.vals { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: clamp(.7rem, 1.2vw, 1.1rem); }
.val {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.35rem 1rem; display: grid; gap: .75rem; justify-items: center; text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.val:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(6,25,55,.1); border-color: var(--navy); }
.val-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--navy); }
.val-ico svg { width: 17px; height: 17px; }
.val-n { font-size: 13px; font-weight: 550; line-height: 1.3; letter-spacing: -.01em; }
.vals-core {
  grid-column: 1 / -1; background: var(--navy); color: #fff; border-radius: var(--r);
  padding: clamp(1.6rem, 3vw, 2.4rem); text-align: center; border: 0;
  display: grid; gap: .35rem; place-items: center;
}
.vals-core .k { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -.03em; }
.vals-core .s { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* areas strip */
.areas {
  background: var(--panel); color: var(--ink);
  border-top: 1px solid var(--line);
  padding-block: clamp(1.4rem, 2.4vw, 2rem);
}
.areas-in { display: flex; align-items: center; gap: 1rem 2.4rem; flex-wrap: wrap; }
.areas-l { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-2); }
.areas-list { display: flex; align-items: center; gap: .8rem 1.6rem; flex-wrap: wrap; }
.areas-list span { font-size: 14.5px; color: var(--slate); }
.areas-list i { width: 3px; height: 3px; border-radius: 50%; background: var(--signal); display: block; }

/* ---------- 24. REVEAL ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .06s; } .rv-d2 { transition-delay: .12s; }
.rv-d3 { transition-delay: .18s; } .rv-d4 { transition-delay: .24s; }

@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero-in > * { animation: riseIn .9s var(--ease) both; }
.hero-in > .hero-eyebrow { animation-delay: .1s; }
.hero-in > h1 { animation-delay: .2s; }
.hero-in > .hero-sub { animation-delay: .34s; }
.hero-in > .hero-cta { animation-delay: .46s; }

/* ---------- 25. RESPONSIVE ---------- */
@media (max-width: 1280px) {
  .reg-row { grid-template-columns: 46px minmax(0,2.5fr) minmax(0,1.2fr) minmax(0,1.35fr) 104px 26px; }
  .reg-client { display: none; }
  .masonry { columns: 3; }
}

@media (max-width: 1080px) {
  .nav, .hdr-tel { display: none; }
  .burger { display: block; }
  .hdr-act { gap: .6rem; }
  .lede-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .cap-grid { grid-template-columns: 1fr; }
  .cap-stage { order: -1; height: auto; min-height: clamp(230px, 66vw, 340px); aspect-ratio: 4/3; }
  .creds-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .seq { grid-template-columns: repeat(2, 1fr); }
  .pd-grid { grid-template-columns: 1fr; }
  .spec { position: relative; top: 0; }
  .foot-top { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.4rem; }
  .cards, .cards--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vals { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .certstrip { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
  .rail-in { grid-template-columns: repeat(2, 1fr); }
  .rail-cell { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.4rem; }
  .rail-cell:nth-child(-n+2) { border-top: 0; }
  .rail-cell:nth-child(even) { padding-left: 1.4rem; border-left: 1px solid rgba(255,255,255,.1); }
  .feat > a:nth-child(n) { grid-column: span 6; }
  .feat > a:nth-child(1) .pcard-img { aspect-ratio: 16/10; }
  .certgrid { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 2; }
  .split { grid-template-columns: 1fr; }
  .pn { grid-template-columns: 1fr; }
  .pn-cell.next { text-align: left; }
  .office { grid-template-columns: 1fr; gap: .45rem; }
  .peek { display: none !important; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { min-height: 100svh; }
  .hero-body { padding-top: calc(var(--hdr-h) + 2rem); }
  .hero h1 { font-size: clamp(2.9rem, 12.5vw, 3.7rem); max-width: 12ch; }
  .hero-sub { font-size: 1rem; max-width: 40ch; }
  .hero-stage img { object-position: center 38%; }
  .hero-reg-in { min-height: 66px; flex-wrap: nowrap; }
  .hero-reg-loc { display: none; }
  .hero-reg-name { max-width: 46vw; font-size: .9rem; }
  .hero-reg-btn { width: 36px; height: 36px; }
  .seq { grid-template-columns: 1fr; }
  .cards, .cards--4 { grid-template-columns: 1fr; }
  .vals { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot-top { grid-template-columns: 1fr; gap: 2rem; }
  .certstrip { grid-template-columns: repeat(3, 1fr); }
  .pgal { grid-template-columns: 1fr; }
  .pgal-item.is-wide { grid-column: span 1; }
  .pgal-item { aspect-ratio: 4/3; }

  /* register → stacked rows with thumbnails */
  .reg-head { display: none; }
  .reg-row {
    grid-template-columns: 62px minmax(0,1fr) auto;
    grid-template-areas: "thumb name status" "thumb meta status";
    gap: .2rem .9rem; padding: .95rem 0; align-items: center;
  }
  .reg-row:hover { padding-left: 0; }
  .reg-no, .reg-client { display: none; }
  .reg-thumb {
    display: block; grid-area: thumb; width: 62px; aspect-ratio: 1; border-radius: 2px;
    overflow: hidden; background: var(--paper-2);
  }
  .reg-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .reg-name { grid-area: name; font-size: 15px; }
  .reg-sector { grid-area: meta; font-size: 12.4px; color: var(--slate-2); }
  .reg-sector::after { content: ' · ' attr(data-loc); }
  .reg-loc { display: none; }
  .reg-status { grid-area: status; }
  .reg-go { display: none; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
  .lb-btn { width: 40px; height: 40px; }
}

@media (max-width: 520px) {
  .certgrid, .certstrip { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 1; }
  .vals { grid-template-columns: 1fr; }
  .cta-in { display: grid; }
  .phero-facts { gap: 1rem 1.8rem; }
}

/* ---------- 26. MOTION PREFERENCES ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
  .hero-stage img.is-active { transform: none; }
}

/* ---------- 27. PRINT ---------- */
@media print {
  .hdr, .drawer, .hero-reg, .cta, .foot, .lb, .loader, .peek { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- 28. ANCHOR OFFSET ----------
   Fixed header would otherwise cover the top of any #-linked section. */
[id] { scroll-margin-top: calc(var(--hdr-h) + 24px); }

/* ---------- 29. FINAL POLISH ---------- */
/* the interior hero already carries generous space — don't double it up */
.phero + .sec,
.phero + section > .sec { padding-top: clamp(2.4rem, 4.5vw, 3.8rem); }

/* project heroes: the photograph is the point, so let it read */
.phero-bg img { opacity: .55; }
.phero::after {
  background:
    linear-gradient(to top, rgba(4,20,42,.94) 2%, rgba(4,20,42,.5) 55%, rgba(4,20,42,.42) 100%),
    linear-gradient(to right, rgba(4,20,42,.78), rgba(4,20,42,.06) 72%);
}

/* the gallery scroller supplies its own lower breathing room */
.sec > .scroller:last-child { margin-bottom: calc(var(--sec-y) * -0.45); }

@media (max-width: 560px) {
  .hero-cta { display: grid; grid-template-columns: 1fr; gap: .55rem; }
  .hero-cta .btn { justify-content: center; }
  .hero-eyebrow { font-size: 10px; letter-spacing: .16em; line-height: 1.6; }
  .cta-acts { display: grid; grid-template-columns: 1fr; gap: .55rem; }
  .cta-acts .btn { justify-content: center; }
}


/* ---------- 30. FIXES FROM REVIEW ---------- */
@media (max-width: 1080px) {
  /* with the nav hidden, push Enquire + menu to the right edge */
  .hdr-act { margin-left: auto; }
}

/* ============================================================================
   31. DARK MODE
   The site's identity is the navy/red mark, so dark mode keeps the same hues
   and only moves the ground: paper becomes deep navy, and the sections that
   were already dark drop further so the rhythm of the page survives.
   ========================================================================== */
:root { color-scheme: light; }

[data-theme="dark"] {
  color-scheme: dark;

  --ink:        #E9EEF7;
  --navy:       #1B4E96;
  --navy-deep:  #060F22;
  --navy-mid:   #2A63B4;
  --navy-lift:  #4A88DD;

  --paper:      #0B1729;
  --paper-2:    #101E35;
  --surface:    #122341;
  --panel:      #16294A;

  --line:       rgba(255,255,255,.13);
  --line-soft:  rgba(255,255,255,.075);

  --slate:      #A6B3C9;
  --slate-2:    #808EA8;
}

/* navy reads as a button fill on light, but needs lifting when used as text */
[data-theme="dark"] .tag,
[data-theme="dark"] .tlink,
[data-theme="dark"] .prose a,
[data-theme="dark"] .hi,
[data-theme="dark"] .sig-role,
[data-theme="dark"] .pillar-ico,
[data-theme="dark"] .val-ico { color: var(--navy-lift); }
[data-theme="dark"] .btn--ghost { color: var(--navy-lift); border-color: var(--navy-lift); }
[data-theme="dark"] .btn--ghost:hover { background: var(--navy-lift); color: #06101F; }
[data-theme="dark"] .pcard:hover .pcard-name { color: var(--navy-lift); }

/* chrome */
[data-theme="dark"] .hdr.is-solid,
[data-theme="dark"] .page--interior .hdr { background: rgba(11,23,41,.92); }
[data-theme="dark"] .hdr.is-solid .brand .mark-rev { display: block; }
[data-theme="dark"] .hdr.is-solid .brand .mark-pos { display: none; }
[data-theme="dark"] .hdr.is-solid .burger span { background: #fff; }
[data-theme="dark"] .hdr.is-solid .nav a { color: var(--slate); }
[data-theme="dark"] .hdr.is-solid .nav a:hover,
[data-theme="dark"] .hdr.is-solid .nav a[aria-current] { color: #fff; }

/* surfaces that assumed a light ground */
[data-theme="dark"] .vswitch button[aria-pressed="true"] { background: var(--navy-lift); color: #06101F; }
[data-theme="dark"] .reg-bar { border-bottom-color: var(--line); }
[data-theme="dark"] .reg-row:not(.reg-head):hover { background: var(--surface); }
[data-theme="dark"] .certcard { background: #fff; border-color: rgba(255,255,255,.16); }
[data-theme="dark"] .seq { background: var(--line); }
[data-theme="dark"] .pn-cell { background: var(--paper); }
[data-theme="dark"] .pn-cell:hover { background: var(--surface); }
[data-theme="dark"] .masonry .mitem img,
[data-theme="dark"] .shot img { filter: saturate(.92) brightness(.94); }
[data-theme="dark"] .masonry .mitem:hover img,
[data-theme="dark"] .shot:hover img { filter: saturate(1.04) brightness(1); }
[data-theme="dark"] .areas { background: var(--panel); }
[data-theme="dark"] .val:hover,
[data-theme="dark"] .certcard:hover { box-shadow: 0 14px 34px rgba(0,0,0,.5); }
[data-theme="dark"] .dd { box-shadow: 0 22px 54px rgba(0,0,0,.55); }

/* ---------- theme toggle ---------- */
.tbtn {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.26); background: transparent; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.tbtn:hover { background: rgba(255,255,255,.14); }
.hdr.is-solid .tbtn { border-color: var(--line); color: var(--slate); }
.hdr.is-solid .tbtn:hover { background: var(--panel); color: var(--ink); }
.hdr.is-drawer .tbtn, .hdr.is-drawer.is-solid .tbtn {
  border-color: rgba(255,255,255,.26); color: #fff; background: transparent;
}
.tbtn .ico { width: 16px; height: 16px; grid-area: 1 / 1; }
.tbtn .i-sun { display: none; }
[data-theme="dark"] .tbtn .i-sun { display: block; }
[data-theme="dark"] .tbtn .i-moon { display: none; }

/* boxes sized only by aspect-ratio collapse on browsers without it */
@supports not (aspect-ratio: 1 / 1) {
  .cap-stage { min-height: 320px; }
  .pcard-img, .pgal-item, .shot { min-height: 220px; }
  .certcard { min-height: 280px; }
}

/* ---------- 32. SMALL-SCREEN TRIMS ---------- */
@media (max-width: 560px) {
  /* stops "since 2006" orphaning onto its own line under the rule */
  .ey-since { display: none; }
}


/* ---------- 33. AUDIT FIXES ---------- */
/* standalone link lists need a ~30px+ touch target */
.foot-col a, .drawer .sub a { display: inline-block; padding-block: .3rem; }
.crumb a { padding-block: .3rem; }
.tlink { padding-top: .35rem; }

/* dark mode corrections found by the contrast audit */
[data-theme="dark"] {
  /* the mark's red is too dark to read as small type on a dark ground;
     this is the same hue lifted until it passes AA */
  --signal: #FF4B45;
}
[data-theme="dark"] .cta { background: #10254A; }
/* the generic dark badge rule was overriding the red "Ongoing" badge */
[data-theme="dark"] .pcard-badge:not(.is-live) { background: rgba(255,255,255,.9); color: #0B1729; }
[data-theme="dark"] .pcard-badge.is-live { background: var(--signal); color: #10100F; }

/* ---------- 34. AUDIT ROUND 2 ---------- */
:root { --signal-dark: #FF5A54; }   /* the mark's red, lifted for use ON dark */

/* red at 11px on a dark card/hero only reached ~3.2:1 */
.card-n, .hero-reg-ref { color: var(--signal-dark); }
.areas-l { color: var(--slate); }
.tag--light { color: rgba(255,255,255,.82); }

/* touch targets in link lists and breadcrumbs */
.foot-bot a { display: inline-block; padding-block: .35rem; }
.crumb a { padding-block: .45rem; }
.office-v a { display: inline-block; padding-block: .18rem; }

/* ---------- 35. LEGIBILITY ON DARK BANDS ----------
   The muted whites in the rail, footer, CTA and office list were between
   2.6:1 and 4.4:1. Lifted until they pass AA while keeping the hierarchy. */
:root {
  --on-dark:   rgba(255,255,255,.80);
  --on-dark-2: rgba(255,255,255,.60);
  --slate-2:   #59657C;
}
.rail-l      { color: rgba(255,255,255,.62); }
.foot-h      { color: rgba(255,255,255,.54); }
.foot-bot, .foot-bot a { color: rgba(255,255,255,.50); }
.foot-bot a  { padding-block: .45rem; }
.office-l    { color: rgba(255,255,255,.60); }
.maptab      { color: rgba(255,255,255,.62); }
.cap-tag     { color: rgba(255,255,255,.76); }
.card-b      { color: rgba(255,255,255,.84); }
.tag--light  { color: rgba(255,255,255,.88); }
.pill--live  { color: #BE0100; }
[data-theme="dark"] .pill--live { color: var(--signal); }

/* ---------- 36. TOKEN ORDER CORRECTION ----------
   Section 35 re-declared --slate-2 on :root, which (being later in the file)
   also overrode the dark theme's lighter value. Restore it, and fix the few
   dark-mode selectors that were still losing to earlier rules. */
[data-theme="dark"] {
  --slate-2: #8A97AF;
}
[data-theme="dark"] .rail { background: #12376E; }
[data-theme="dark"] .tag--light { color: rgba(255,255,255,.88); }
.hero-reg-loc { color: rgba(255,255,255,.62); }

/* ---------- 37. REVISION 4 ---------- */
/* the + reads as part of the figure, not a footnote marker */
/* the rail is navy in both themes, so the + always needs the lifted red */
.rail-n .plus { color: var(--signal-dark); font-weight: 600; }

/* second call to action under the featured projects */
.feat-more { display: flex; justify-content: center; margin-top: clamp(2rem, 3.5vw, 3rem); }

/* hero eyebrow: more air around the rule and between lines */
.hero-eyebrow { gap: 1.15rem; line-height: 1.9; }
.hero-eyebrow::before { width: 34px; }

/* ---- delivery sequence over a photograph ---- */
.seq-sec { position: relative; isolation: isolate; overflow: hidden; border-top: 0; }
.seq-bg { position: absolute; inset: 0; z-index: -2; }
.seq-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.seq-sec::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(4,20,42,.86) 0%, rgba(4,20,42,.58) 45%, rgba(4,20,42,.88) 100%),
    linear-gradient(to right, rgba(4,20,42,.8), rgba(4,20,42,.2) 72%);
}
.seq-sec .seq { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.18); }
.seq-sec .seq-step { background: rgba(5,20,42,.66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.seq-sec .seq-step:hover { background: rgba(8,30,62,.86); }
.seq-sec .seq-h { color: #fff; }
.seq-sec .seq-b { color: rgba(255,255,255,.8); }
.seq-sec .seq-n { color: var(--signal-dark); }