/* ═══════════════════════════════════════════════════════════════════════
   REALM LIMITED — Design System
   Integrated Infrastructure and Systems

   STRUCTURE
     1. Tokens        — colours, type scale, spacing (edit brand here)
     2. Reset & base
     3. Typography
     4. Layout
     5. Navigation
     6. Buttons
     7. Sections & components
     8. Footer
     9. Motion
    10. Responsive

   BRAND
     Ink   #0B0D10   dominant dark — the logo is built for this
     Navy  #0C2F72   secondary brand blue
     Gold  #FFD400   accent, used sparingly: rules, numerals, emphasis
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ─────────────────────────────────────────────────────── */
:root{
  /* Brand
     The two divisions carry two accents:
       GOLD  = Infrastructure (the physical build side)
       BLUE  = Systems        (IT + the digital products)
     Ink black is the shared canvas both sit on. */
  --ink:#0B0D10;
  --ink-2:#14181F;
  --ink-3:#1E242E;
  --ink-4:#262E3A;

  --gold:#FFD400;
  --gold-deep:#E0B900;

  /* Blue elevated from a passive navy to an active accent */
  --navy:#0C2F72;          /* deep brand blue — solid fills, bands */
  --navy-deep:#071A42;
  --blue:#2E6BFF;          /* bright systems blue — links, glows, accents */
  --blue-soft:#5B8BFF;

  /* Neutrals */
  --paper:#FFFFFF;
  --paper-2:#F6F7F9;
  --paper-3:#ECEEF2;
  --line:#DDE1E8;
  --line-dark:rgba(255,255,255,.14);

  /* Text */
  --text:#12161C;
  --text-2:#4A5361;
  --text-3:#77808F;
  --on-dark:#FFFFFF;
  --on-dark-2:rgba(255,255,255,.72);
  --on-dark-3:rgba(255,255,255,.52);

  /* Type */
  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;

  /* Fluid type scale */
  --t-hero:clamp(2.4rem,5.6vw,4.75rem);
  --t-h1:clamp(2.25rem,5vw,4rem);
  --t-h2:clamp(1.875rem,3.6vw,3rem);
  --t-h3:clamp(1.25rem,1.8vw,1.6rem);
  --t-lead:clamp(1.0625rem,1.4vw,1.3125rem);
  --t-body:1.0625rem;
  --t-sm:0.9375rem;
  --t-label:0.75rem;

  /* Space */
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --section:clamp(3.75rem,7vw,6rem);
  --max:1280px;
  --measure:64ch;

  /* Form */
  --radius:3px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ─── 2. RESET & BASE ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:var(--gold);color:var(--ink)}

/* ─── 3. TYPOGRAPHY ─────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.t-hero{font-size:var(--t-hero);font-weight:800;letter-spacing:-.04em;line-height:.96}
.t-h1{font-size:var(--t-h1)}
.t-h2{font-size:var(--t-h2)}
.t-h3{font-size:var(--t-h3);letter-spacing:-.015em;line-height:1.2}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--text-2);max-width:52ch}
.prose{max-width:var(--measure);color:var(--text-2)}
.prose p+p{margin-top:1.15em}

/* Eyebrow label — gold rule + tracked caps */
.eyebrow{
  display:flex;align-items:center;gap:.75rem;
  font-family:var(--display);
  font-size:var(--t-label);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:1.25rem;   /* 7:1 on light — small caps need AA */
}
.eyebrow::before{content:"";width:2rem;height:2px;background:var(--gold);flex:none}
/* dark contexts keep a light eyebrow */
.on-ink .eyebrow,.hero .eyebrow{color:var(--on-dark-3)}
/* division-tinted eyebrows — the default values are for LIGHT backgrounds
   and must clear 4.5:1, so they use darkened gold/blue; dark contexts override
   back to the bright brand tints. */
.eyebrow.is-gold{color:#6E5600}
.on-ink .eyebrow.is-gold,.hero .eyebrow.is-gold{color:var(--gold)}
.eyebrow.is-blue{color:#1B4DD1}
.on-ink .eyebrow.is-blue,.hero .eyebrow.is-blue{color:var(--blue-soft)}
.eyebrow.is-blue::before{background:var(--blue)}

/* Gold-accented word inside a heading */
.accent{color:var(--gold)}
.accent-navy{color:var(--navy)}

/* ─── 4. LAYOUT ─────────────────────────────────────────────────────── */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
/* soft blue wash, brightest on the left and fading out to the right */
.section--wash-blue{background:linear-gradient(90deg,rgba(46,107,255,.10) 0%,rgba(46,107,255,.045) 42%,rgba(46,107,255,0) 78%)}
.section-tight{padding-block:clamp(3rem,6vw,5rem)}
.on-ink{background:var(--ink);color:var(--on-dark)}
.on-ink h1,.on-ink h2,.on-ink h3{color:var(--on-dark)}
.on-ink .lead,.on-ink .prose{color:var(--on-dark-2)}
.on-paper-2{background:var(--paper-2)}

.section-head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head .lead{margin-top:1.25rem}

/* ─── 5. NAVIGATION ─────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:900;
  padding:13px clamp(.75rem,3vw,1.5rem) 0;
  background:transparent;
}
/* floating translucent pill, inset from the edges */
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:66px;
  max-width:1180px;margin-inline:auto;padding-inline:1.3rem;border-radius:16px;
  background:rgba(11,13,16,.66);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 38px rgba(0,0,0,.26);
  transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.nav.is-solid .nav-inner{background:rgba(11,13,16,.84);box-shadow:0 16px 42px rgba(0,0,0,.34)}

.brand{display:flex;align-items:center;gap:.7rem;color:var(--on-dark);flex:none}
.brand-mark{width:46px;height:46px;flex:none}
.brand-name{
  font-family:var(--display);font-weight:800;font-size:1.4rem;
  letter-spacing:.02em;line-height:1;
}
/* REALM wordmark image (white glyphs on transparent) replacing the text */
.brand-word{display:block;height:1.15rem;width:auto}
.brand-sub{
  display:block;font-family:var(--body);font-weight:500;
  font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-3);margin-top:.25rem;
}

.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{
  font-size:.875rem;font-weight:500;color:var(--on-dark-2);
  padding-block:.5rem;position:relative;transition:color .2s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--gold);transition:right .3s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--on-dark)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}

/* Nav call-to-action.
   NOTE: `.nav-links a` (0,1,1) out-specifies `.btn-gold` (0,1,0), so the
   button's colours MUST be restated here or the link colour wins and the
   label becomes white-on-yellow (~1.3:1 — unreadable). Do not remove.
   Resting state is a gold outline; it fills on hover and on the current page. */
.nav-links .btn-gold{
  background:transparent;
  border:1.5px solid var(--gold);
  color:var(--gold);
}
.nav-links .btn-gold::after{display:none}          /* no underline sweep on a button */
.nav-links .btn-gold:hover,
.nav-links .btn-gold:focus-visible,
.nav-links .btn-gold[aria-current="page"]{
  background:var(--gold);
  color:var(--ink);                                 /* 15.6:1 on gold */
  transform:translateY(-1px);
}

/* Systems dropdown (desktop: hover/focus; mobile: static, see ≤860 block) */
.nav-has-sub{position:relative}
.nav-has-sub>a{display:inline-flex;align-items:center;gap:.3rem}
.nav-caret{width:12px;height:12px;flex:none;opacity:.7;transition:transform .25s var(--ease)}
.nav-has-sub:hover .nav-caret,.nav-has-sub:focus-within .nav-caret{transform:rotate(180deg)}
.nav-sub{position:absolute;top:calc(100% + .7rem);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:232px;list-style:none;display:grid;gap:.1rem;padding:.5rem;
  background:rgba(11,13,16,.86);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.42);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-.8rem;height:.8rem}
.nav-has-sub:hover .nav-sub,.nav-has-sub:focus-within .nav-sub{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-sub a{display:block;padding:.62rem .85rem;border-radius:9px;font-size:.875rem;font-weight:500;color:var(--on-dark-2);white-space:nowrap}
.nav-sub a::after{display:none}
.nav-sub a:hover,.nav-sub a[aria-current="page"]{background:rgba(255,255,255,.09);color:#fff}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.5rem;color:var(--on-dark)}
.nav-toggle span{display:block;width:24px;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.nav-toggle span+span{margin-top:6px}
.nav.is-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.is-open .nav-toggle span:nth-child(2){opacity:0}
.nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ─── 6. BUTTONS ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-size:.9375rem;font-weight:600;letter-spacing:.01em;
  padding:.95rem 1.6rem;border:1px solid transparent;border-radius:var(--radius);
  cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),
    border-color .25s var(--ease),transform .25s var(--ease);
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#FFDF3D;transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-dark);color:var(--on-dark)}
.btn-ghost:hover{border-color:var(--on-dark);background:rgba(255,255,255,.06)}
.btn-outline{border-color:var(--line);color:var(--text)}
.btn-outline:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* Text link with arrow */
.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-weight:600;font-size:.9375rem;
  color:var(--navy);border-bottom:1px solid transparent;transition:border-color .25s
}
.on-ink .link-arrow{color:var(--gold)}
.link-arrow:hover{border-bottom-color:currentColor}
.link-arrow svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}

/* ─── 7. COMPONENTS ─────────────────────────────────────────────────── */

/* Hero — geometric "skyline / signal" canvas.
   The vertical bars read as a city skyline (Infrastructure) and an
   equalizer/data signal (Systems) at once — one motif for both divisions.
   Built from CSS + a row of bar elements: no photograph, so it can never
   look like stock. */
.hero{position:relative;min-height:min(94vh,900px);display:flex;align-items:center;
  background:var(--ink);overflow:hidden;isolation:isolate}

/* real project photo, sitting behind the wording */
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* legibility scrim over the photo — strong at the top (headline) and bottom
   (fact bar) and down the left (text column); the mixer + steam stay visible
   on the open right side. Sits above the faint bar canvas, below the content. */
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(105% 95% at 50% 50%,rgba(11,13,16,.40),rgba(11,13,16,.74)),
    linear-gradient(180deg,rgba(11,13,16,.34),transparent 28%,transparent 72%,rgba(11,13,16,.46))}

/* bar canvas now rides faintly ON TOP of the photo as a brand texture */
.hero-canvas{position:absolute;inset:0;z-index:1;pointer-events:none}
/* blueprint grid, faded toward the corners */
.hero-canvas::before{content:"";position:absolute;inset:0;
  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:clamp(48px,5vw,72px) clamp(48px,5vw,72px);
  -webkit-mask-image:radial-gradient(130% 95% at 72% 12%,#000 26%,transparent 76%);
          mask-image:radial-gradient(130% 95% at 72% 12%,#000 26%,transparent 76%)}
/* low blue glow behind the bars — the "systems" energy */
.hero-canvas::after{content:"";position:absolute;left:50%;bottom:-8%;width:86%;height:64%;
  transform:translateX(-50%);
  background:radial-gradient(58% 62% at 50% 100%,rgba(46,107,255,.30),transparent 70%);filter:blur(8px)}

/* the bar field */
.hero-skyline{position:absolute;left:0;right:0;bottom:0;height:min(64%,600px);z-index:0;opacity:.22;
  display:flex;align-items:flex-end;gap:clamp(3px,.7vw,10px);
  padding-inline:clamp(.5rem,3vw,2.5rem);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);
          mask-image:linear-gradient(180deg,transparent 0,#000 34%)}
.hero-bar{flex:1 1 0;min-width:0;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.015));
  transform-origin:bottom}
.hero-bar.gold{background:linear-gradient(180deg,var(--gold),rgba(255,212,0,.10))}
.hero-bar.blue{background:linear-gradient(180deg,var(--blue-soft),rgba(46,107,255,.08))}
.hero-bar.lit{animation:barpulse 3.6s var(--ease) infinite;will-change:transform}
.hero-bar.lit:nth-of-type(3n){animation-duration:4.8s;animation-delay:-1.2s}
.hero-bar.lit:nth-of-type(4n){animation-duration:2.9s;animation-delay:-.6s}
@keyframes barpulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.14)}}

.hero-inner{position:relative;z-index:3;width:100%;text-align:center;
  padding-block:clamp(4rem,9vw,6rem)}
.hero h1{color:rgba(255,255,255,.84);max-width:none;margin-inline:auto;
  text-shadow:0 2px 28px rgba(0,0,0,.4)}
/* Two-line headline on every size: "We build in concrete —" / "and in code." */
.hero h1 .hl{display:block}
/* typewriter caret */
.hero h1 .type-caret{display:inline-block;width:.055em;height:.92em;background:currentColor;
  margin-left:.08em;vertical-align:-.1em;border-radius:1px;animation:caretBlink 1.05s steps(1,end) infinite}
@keyframes caretBlink{50%{opacity:0}}
.hero .lead{color:var(--on-dark-2);margin-top:1.75rem;max-width:50ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.5rem}
/* the hero CTA is relocated below the hero on phones (see the ≤560px block) */
.hero-cta-mobile{display:none}

/* Desktop: the copy and CTA sit on the RIGHT, the button dropped to the
   bottom-right corner; the scrim flips right so the branded worker shows on
   the lighter left. Mobile keeps the left-aligned, stacked layout below. */
@media (min-width:860px){
  .hero-inner{display:flex;flex-direction:column;align-items:flex-end;text-align:center}
  .hero-copy{max-width:40rem}
  .hero h1{font-size:clamp(2.6rem,4.2vw,3.4rem);line-height:1.04}
}

/* Fact bar — factual credibility, not vanity metrics */
.factbar{border-top:1px solid var(--line-dark);margin-top:clamp(3rem,6vw,4.5rem);padding-top:2rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.fact dt{font-family:var(--display);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:#fff;line-height:1;letter-spacing:-.03em}
.fact dt .u{color:var(--gold)}
.fact dd{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-3);margin-top:.6rem;line-height:1.35}

/* Numbered index — services / capabilities */
.index{border-top:1px solid var(--line)}
.index-row{
  display:grid;grid-template-columns:5rem 1fr auto;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.5rem,3vw,2.25rem);border-bottom:1px solid var(--line);
  transition:background .3s var(--ease),padding-inline .3s var(--ease);
}
.index-row:hover{background:var(--paper-2);padding-inline:1.25rem}
.index-num{font-family:var(--display);font-size:.875rem;font-weight:700;color:#6E5600;letter-spacing:.1em}
.index-body h3{margin-bottom:.4rem}
.index-body p{color:var(--text-2);font-size:var(--t-sm);max-width:56ch}
.index-go{color:var(--text-3);transition:color .25s,transform .25s var(--ease)}
.index-go svg{width:22px;height:22px}
.index-row:hover .index-go{color:var(--navy);transform:translateX(4px)}
.on-ink .index,.on-ink .index-row{border-color:var(--line-dark)}
.on-ink .index-row:hover{background:var(--ink-2)}
.on-ink .index-body p{color:var(--on-dark-2)}
.on-ink .index-num{color:var(--gold)}

/* Sector cards — expertise */
.grid-sectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.sector{background:var(--paper);padding:clamp(1.75rem,3vw,2.5rem);transition:background .3s var(--ease)}
.sector:hover{background:var(--paper-2)}
.sector-icon{width:34px;height:34px;color:var(--navy);margin-bottom:1.5rem}
.sector h3{margin-bottom:.6rem}
.sector p{font-size:var(--t-sm);color:var(--text-2)}

/* (Old .pillar and .product card components removed — replaced by the editorial
   .divisions split and the .product-index below.) */

/* ── Editorial division split (light by default; .on-ink flips it dark) ── */
.divisions{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);position:relative}
.divisions::before{content:"";position:absolute;top:.25rem;bottom:.25rem;left:50%;width:1px;background:var(--line)}
.on-ink .divisions::before{background:var(--line-dark)}
.division{display:flex;gap:clamp(1rem,2vw,1.5rem);align-items:flex-start}
.division-num{font-family:var(--display);font-weight:800;font-size:clamp(2.25rem,4vw,3.25rem);line-height:.8;letter-spacing:-.03em;flex:none}
.division--infra .division-num{color:rgba(224,185,0,.14);-webkit-text-stroke:1.4px rgba(176,140,0,.85)}
.division--systems .division-num{color:rgba(46,107,255,.14);-webkit-text-stroke:1.4px rgba(46,107,255,.85)}
.on-ink .division--infra .division-num{color:rgba(255,212,0,.15);-webkit-text-stroke:1.4px rgba(255,212,0,.55)}
.on-ink .division--systems .division-num{color:rgba(46,107,255,.18);-webkit-text-stroke:1.4px rgba(46,107,255,.62)}
.division-kicker{font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.7rem}
.division--infra .division-kicker{color:#6E5600}
.division--systems .division-kicker{color:#1B4DD1}
.on-ink .division--infra .division-kicker{color:var(--gold)}
.on-ink .division--systems .division-kicker{color:var(--blue-soft)}
.division-title{color:var(--ink);font-size:clamp(1.5rem,2.3vw,2rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:.9rem;max-width:16ch}
.on-ink .division-title{color:#fff}
.division-desc{color:var(--text-2);font-size:var(--t-sm);max-width:44ch;margin-bottom:1.5rem}
.on-ink .division-desc{color:var(--on-dark-2)}
.division-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.25rem;margin-bottom:1.75rem}
.division-list li{position:relative;padding-left:1rem;font-size:var(--t-sm);color:var(--text)}
.on-ink .division-list li{color:var(--on-dark)}
.division-list li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:1.5px}
.division--infra .division-list li::before{background:var(--gold-deep)}
.division--systems .division-list li::before{background:var(--blue)}
.on-ink .division--infra .division-list li::before{background:var(--gold)}
.division--systems .link-arrow{color:var(--navy)}
.on-ink .division--systems .link-arrow{color:var(--blue-soft)}

/* ── Accordion (homepage: 'What we build', native details/summary) ── */
.accordion{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{display:flex;align-items:center;gap:1rem;padding:1.35rem .25rem;cursor:pointer;list-style:none}
.acc-head::-webkit-details-marker{display:none}
.acc-num{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.1em;color:#6E5600;flex:none;width:1.75rem}
.acc-title{flex:1;font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.01em;color:var(--ink);transition:color .2s}
.acc-chevron{flex:none;width:22px;height:22px;color:var(--text-3);transition:transform .3s var(--ease),color .2s}
.acc-item[open] .acc-chevron{transform:rotate(180deg);color:var(--navy)}
.acc-head:hover .acc-title,.acc-item[open] .acc-title{color:var(--navy)}
.acc-body{padding:0 0 1.6rem calc(1.75rem + 1rem);max-width:64ch}
.acc-body p{color:var(--text-2);font-size:var(--t-sm);margin-bottom:1rem}
.acc-body .acc-lead{color:var(--ink);font-weight:500;font-size:1rem;margin-bottom:.85rem}
.acc-item[open] .acc-body{animation:accIn .35s var(--ease)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── Lean product index (homepage: replaces product screenshot cards) ── */
.product-index{border-top:1px solid var(--line-dark)}
.prod-row{display:flex;align-items:center;gap:clamp(1rem,2vw,1.5rem);padding:1.4rem .25rem;border-bottom:1px solid var(--line-dark);transition:padding .25s var(--ease),background .25s}
.prod-row:hover{padding-inline:1.1rem;background:var(--ink-2)}
.prod-row--nav:hover .prod-go{transform:translateX(4px)}

/* ── Home scaffold: News & foresight list + value-chain strip ── */
.news-list{border-top:1px solid var(--line)}
.news-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.25rem;padding:1.5rem .25rem;border-bottom:1px solid var(--line);transition:padding .25s var(--ease),background .25s}
.news-item:hover{padding-inline:1.1rem;background:var(--paper-2)}
.news-tag{font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.news-body h3{margin-bottom:.3rem}
.news-body p{color:var(--text-2);font-size:var(--t-sm);max-width:60ch}
.news-go{color:var(--text-3);transition:color .25s,transform .25s var(--ease)}
.news-go svg{width:22px;height:22px;display:block}
.news-item:hover .news-go{color:var(--navy);transform:translateX(4px)}
.valuechain{display:flex;flex-wrap:wrap;border:1px solid var(--line-dark);border-radius:8px;overflow:hidden;margin-top:.5rem}
.vc-stage{flex:1 1 auto;min-width:110px;text-align:center;padding:clamp(1rem,2.4vw,1.6rem) 1rem;font-family:var(--display);font-weight:700;font-size:clamp(.95rem,1.6vw,1.2rem);color:var(--on-dark);border-right:1px solid var(--line-dark)}
.vc-stage:last-child{border-right:0}
@media (max-width:560px){
  .news-item{grid-template-columns:1fr auto;gap:.35rem 1rem}
  .news-tag{grid-column:1/-1}
}
.prod-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.prod-top{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.prod-name{color:#fff;font-size:1.2rem;font-family:var(--display);font-weight:700}
.prod-role{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-3);font-weight:600}
.prod-desc{color:var(--on-dark-2);font-size:var(--t-sm);max-width:62ch}
.prod-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.22rem .55rem;border-radius:999px;border:1px solid var(--line-dark)}
.prod-badge.is-live{color:#7DF0A6}
.prod-badge.is-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#3FCB8E;box-shadow:0 0 0 3px rgba(63,203,142,.16)}
.prod-badge.is-soon{color:var(--gold)}
.prod-badge.is-soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.prod-go{flex:none;width:22px;height:22px;color:var(--on-dark-3);transition:color .25s,transform .25s var(--ease)}
.prod-row:hover .prod-go{color:var(--blue-soft);transform:translate(3px,-3px)}

/* ── Software & Services: product cards + solutions table (light) ── */
.soft-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1.25rem}
.soft-prod{display:flex;gap:1.15rem;padding:1.5rem;border:1px solid var(--line);border-radius:14px;background:var(--paper);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.soft-prod:hover{border-color:#C7CDD8;box-shadow:0 16px 36px rgba(12,22,44,.09);transform:translateY(-3px)}
.soft-ico{flex:none;width:58px;height:58px;border-radius:14px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.14)}
.soft-ico img{width:100%;height:100%;object-fit:cover;display:block}
.soft-body{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.soft-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.soft-name{font-family:var(--display);font-size:1.25rem;font-weight:700;color:var(--ink)}
.soft-role{font-size:.69rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.soft-desc{font-size:var(--t-sm);color:var(--text-2);margin:.15rem 0 .35rem}
.soft-link{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--navy);margin-top:auto}
.soft-link svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.soft-prod:hover .soft-link svg{transform:translate(3px,-3px)}
.badge-live{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.2rem .55rem .2rem .45rem;border-radius:999px;color:#1B7A46;background:#E8F5EC;border:1px solid #BEE3CB}
.badge-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#2FAE6A}
/* Contact form laid out as a table (label column + field column) */
.formtable{width:100%;border-collapse:collapse}
.formtable th{text-align:left;vertical-align:top;width:34%;padding:1rem 1.25rem 1rem 0}
.formtable td{padding:.65rem 0 1rem;vertical-align:top}
.formtable tr+tr th,.formtable tr+tr td{border-top:1px solid var(--line)}
.formtable th label{font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);display:block;padding-top:.5rem}
.formtable .req{color:#B3261E;margin-left:.15em}
.formtable input,.formtable select,.formtable textarea{
  width:100%;padding:.9rem 1.05rem;background:var(--paper);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--body);font-size:1rem;line-height:1.45;-webkit-appearance:none;appearance:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.formtable input::placeholder,.formtable textarea::placeholder{color:var(--text-3)}
.formtable select{cursor:pointer;padding-right:2.75rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5361' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05rem center;background-size:16px}
.formtable input:hover,.formtable select:hover,.formtable textarea:hover{border-color:#9AA3B2}
.formtable input:focus,.formtable select:focus,.formtable textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(12,47,114,.14)}
.formtable textarea{resize:vertical;min-height:140px;line-height:1.6}
@media (max-width:620px){
  .formtable,.formtable tbody,.formtable tr,.formtable th,.formtable td{display:block;width:100%}
  .formtable th{padding:0 0 .5rem}
  .formtable td{padding:0 0 1.1rem}
  .formtable tr+tr th{border-top:0}
  .formtable tr+tr td{border-top:0}
  .formtable th label{padding-top:0}
}

/* Centred section intro (Software & Services products) */
.section-head--center{max-width:72ch;margin-left:auto;margin-right:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head--center .t-h2{text-wrap:balance}
.section-head--center .lead{max-width:58ch;margin-left:auto;margin-right:auto;text-wrap:balance}

/* Faint per-product tints on the product cards */
.soft-prod--stay{background:#F1F6F2;border-color:#D9E7DC}
.soft-prod--exams{background:#EEF3FA;border-color:#D5E2F2}
.soft-prod--miles{background:#FBF6EA;border-color:#EDE2C6}

/* ── Software & Services — product showcase (v=33) ───────────────────── */
.soft-showcase{display:flex;flex-direction:column;gap:clamp(3rem,7vw,5.5rem);margin-top:clamp(1rem,3vw,2rem)}
.soft-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.soft-row--flip .soft-figure{order:2}
.soft-figure{min-width:0}
.soft-copy{min-width:0}
.soft-copy .badge-live{margin-bottom:1.05rem}
.soft-copy .soft-role{margin:0 0 .5rem}
.soft-prodname{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.3vw,2.4rem);line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin:0 0 .55rem}
.soft-tagline{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.25;color:var(--navy);margin:0 0 .9rem}
.soft-copy .soft-desc{font-size:1.02rem;line-height:1.6;color:var(--text-2);margin:0 0 1rem;max-width:46ch}
.soft-tags{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.015em;color:var(--text-3);margin:0 0 1.3rem}
.soft-copy .soft-link{font-size:.95rem;margin-top:0}

/* device-frame placeholder (swap .soft-screen contents for a real screenshot later) */
.soft-frame{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -24px rgba(12,22,44,.3),0 8px 20px rgba(12,22,44,.08)}
.soft-frame-bar{display:flex;align-items:center;gap:.5rem;padding:.65rem .85rem;background:#F1F3F7;border-bottom:1px solid var(--line)}
.soft-dots{display:flex;gap:.36rem}
.soft-dots i{width:10px;height:10px;border-radius:50%;background:#CBD2DC;display:block}
.soft-url{margin-left:.45rem;flex:1;max-width:64%;height:22px;border-radius:999px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;padding:0 .75rem;font-size:.62rem;color:var(--text-3);font-family:var(--body)}
.soft-screen{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden}
.soft-topbar{position:absolute;top:0;left:0;right:0;height:15%;background:rgba(255,255,255,.4)}
.soft-screen--stay{background:linear-gradient(135deg,#E7F2EA 0%,#CFE7D6 65%,#BBDFC6 100%)}
.soft-screen--exams{background:linear-gradient(135deg,#E9F0FB 0%,#D3E2F6 65%,#BFD5F1 100%)}
.soft-screen--miles{background:linear-gradient(135deg,#FBF5E7 0%,#F0E4C3 65%,#E9DAAF 100%)}
.soft-glass{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.5rem 1.8rem;border-radius:16px;background:rgba(255,255,255,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 14px 34px rgba(12,22,44,.16)}
.soft-glass img{width:52px;height:52px;border-radius:13px;box-shadow:0 3px 10px rgba(0,0,0,.16)}
.soft-glass b{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink)}
.soft-skel{display:flex;flex-direction:column;gap:.4rem;width:120px}
.soft-skel i{height:7px;border-radius:999px;background:rgba(12,22,44,.14);display:block}
.soft-skel i:last-child{width:68%;margin:0 auto}

/* Capabilities */
.cap-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:clamp(1.25rem,2.5vw,2rem)}
.cap{padding:1.4rem 1.25rem;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.cap-ico{color:var(--navy);display:block;margin-bottom:.75rem}
.cap-ico svg{width:30px;height:30px}
.cap b{display:block;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:.3rem}
.cap span{font-size:.85rem;line-height:1.45;color:var(--text-2)}

/* Dark high-end closing CTA */
.soft-cta{background:linear-gradient(180deg,#0C2F72 0%,#0a1f45 52%,#0B0D10 100%);color:#fff;text-align:center;padding-block:clamp(4.5rem,9vw,7rem)}
.soft-cta h2{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.06;letter-spacing:-.02em;max-width:20ch;margin:0 auto 1.1rem;color:#fff}
.soft-cta-sub{font-size:1.08rem;line-height:1.6;color:rgba(255,255,255,.82);max-width:46ch;margin:0 auto 2.25rem}
.soft-cta .btn-gold{font-size:1rem;padding:.95rem 1.9rem}

@media(max-width:900px){.cap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
  .soft-row{grid-template-columns:1fr;gap:1.75rem}
  .soft-row--flip .soft-figure{order:0}
}
@media(max-width:520px){.cap-grid{grid-template-columns:1fr}}

/* ============ Software & Services — product-company concept (v=34) ============ */
.swx-kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#1B4DD1}
.swx-kicker::before{content:"";width:28px;height:2px;background:currentColor}
.swx-kicker.on-dark{color:#9DB8FF}

/* Hero */
.swx-hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(135% 135% at 82% -10%, #17386f 0%, #0d2250 46%, #091636 100%);
  padding-block:clamp(7rem,11vw,9.5rem) clamp(2.75rem,6vw,4.75rem)}
.swx-hero::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(55% 80% at 14% 42%, rgba(46,107,255,.16), transparent 70%)}
.swx-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr auto;gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.swx-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:1.2rem}
.swx-eyebrow::before{content:"";width:34px;height:2px;background:var(--sys-yellow)}
.swx-h1{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,4.7vw,3.7rem);line-height:1.03;letter-spacing:-.022em;margin:0;color:#fff}
.swx-h1 .hl{color:var(--sys-yellow)}
.swx-hero-lead{margin:1.4rem 0 2rem;max-width:44ch;font-size:1.06rem;line-height:1.62;color:rgba(255,255,255,.82)}
.swx-hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
/* right side photo, left edge masked into the navy (Technology & Solutions and Infrastructure: .tsx-hero-photo) */
.swx-hero-visual{position:absolute;top:0;right:0;bottom:0;width:62%;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 30%);mask-image:linear-gradient(to right,transparent 0%,#000 30%)}
/* rich blue around the photo: multiply turns bright areas blue (not grey); the centre stays clear */
.swx-hero-visual::after{content:"";position:absolute;inset:0;z-index:3;mix-blend-mode:multiply;
  background:radial-gradient(ellipse 36% 34% at 50% 50%,rgba(43,87,184,0) 0%,rgba(43,87,184,0) 50%,#2b57b8 100%)}
/* Software & Services: a sharp laptop in an office graded to brand blue; only the dashboard's words and figures
   are blurred, in the image itself. The room behind it (blurred, no laptop) fills the right side, so the
   laptop's faded edges melt into blue */
.swx-hero--laptop{background:radial-gradient(120% 130% at 90% 35%,#1a47a8 0%,#0f2a66 42%,#091636 100%)}
.swx-hero--laptop .swx-hero-visual{left:0;width:auto;-webkit-mask-image:none;mask-image:none}
.swx-hero--laptop .swx-hero-visual::after{display:none}
.swx-hero-blur{position:absolute;top:-40px;left:34%;width:calc(66% + 40px);height:calc(100% + 80px);object-fit:cover;filter:blur(8px);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 32%);mask-image:linear-gradient(to right,transparent 0%,#000 32%)}
/* anchored to the page centre so it clears the copy and the side labels at every desktop width */
.swx-hero-shot{position:absolute;z-index:2;left:calc(50% - 140px);top:52%;transform:translateY(-50%);width:min(830px,60vw);height:auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 32%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 32%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 16%,#000 84%,transparent 100%);
  mask-composite:intersect}
.swx-hero-labels{grid-column:3;align-self:center;display:grid;gap:.6rem;text-align:right;white-space:nowrap;font-family:var(--display);font-weight:700;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);text-shadow:0 1px 8px rgba(0,0,0,.35)}

/* Products — horizontal scroll */
.swx-products{background:#fff;scroll-margin-top:90px}
/* heading on the left, products flowing left-to-right beside it (as in the reference) */
.swx-prod-layout{display:grid;grid-template-columns:minmax(220px,.42fr) 1.6fr;gap:clamp(1.5rem,3vw,2.75rem);align-items:center}
.swx-prod-main{min-width:0}
.swx-prod-head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,2.6vw,2.15rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin:.7rem 0 0;max-width:12ch}
.swx-prodrow{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:.5rem .2rem 1rem;scrollbar-width:thin;scrollbar-color:#CBD3E0 #EEF1F6}
.swx-prodrow::-webkit-scrollbar{height:8px}
.swx-prodrow::-webkit-scrollbar-thumb{background:#CBD3E0;border-radius:999px}
.swx-prodrow::-webkit-scrollbar-track{background:#EEF1F6;border-radius:999px}
/* text on the left, devices on the right */
.swx-prod{scroll-snap-align:start;flex:0 0 clamp(300px,46%,430px);display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:.9rem;background:#F6F8FC;border:1px solid #E6EBF3;border-radius:18px;overflow:hidden;padding:clamp(1.1rem,1.6vw,1.4rem)}
/* icon + product name share one line */
.swx-prod-txt{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.65rem}
.swx-prod-ico{width:38px;height:38px;border-radius:10px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.14);display:block}
.swx-prod-ico img{width:100%;height:100%;object-fit:cover;display:block}
.swx-prod-name{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--ink);margin:0}
.swx-prod-desc{grid-column:1/-1;font-size:.86rem;line-height:1.55;color:var(--text-2);margin:.7rem 0 .85rem}
.swx-prod-txt .link-arrow{grid-column:1/-1;justify-self:start}
.swx-prod-media{min-width:0}
.swx-prod-media img{width:100%;height:auto;display:block}
.swx-scrollhint{font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.02em;color:var(--text-3);margin-top:.2rem;display:inline-flex;align-items:center;gap:.4rem}
.swx-scrollhint svg{width:16px;height:16px}

/* Capabilities — dark */
.swx-caps{background:var(--sys-navy);color:#fff;padding-block:clamp(3rem,6vw,4.75rem)}
.swx-caps-inner{display:grid;grid-template-columns:minmax(200px,.68fr) 2.3fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
.swx-caps-h{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3vw,2.25rem);line-height:1.08;letter-spacing:-.02em;color:#fff;margin:.7rem 0 0}
/* all six on one row, thin dividers between (as in the reference) */
.swx-cap-grid{display:grid;grid-template-columns:repeat(6,1fr)}
.swx-cap{padding:0 .75rem;border-left:1px solid rgba(255,255,255,.14)}
.swx-cap:first-child{padding-left:0;border-left:0}
.swx-cap:last-child{padding-right:0}
.swx-cap .swx-cap-ico{color:#9DB8FF;display:block;margin-bottom:.6rem}
.swx-cap-ico svg{width:26px;height:26px}
.swx-cap b{display:block;font-family:var(--display);font-weight:700;font-size:.92rem;line-height:1.25;color:#fff;margin-bottom:.35rem}
.swx-cap>span:last-child{font-size:.82rem;line-height:1.45;color:rgba(255,255,255,.72)}

/* Process — light */
.swx-process{background:#fff;padding-block:clamp(2.75rem,5vw,4rem)}
.swx-proc-inner{display:grid;grid-template-columns:minmax(200px,.7fr) 2.5fr;gap:clamp(1.5rem,4vw,3.25rem);align-items:center}
.swx-proc-h{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin:.7rem 0 .55rem}
.swx-proc-sub{font-size:.98rem;line-height:1.55;color:var(--text-2);max-width:34ch}
.swx-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem}
/* icon + title share the first line; description spans below */
.swx-step{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:.55rem;align-items:center;align-content:start}
.swx-step .swx-step-ico{color:var(--sys-navy);display:flex}
.swx-step-ico svg{width:22px;height:22px}
.swx-step b{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.2;color:var(--ink)}
.swx-step>span:last-child{grid-column:1/-1;margin-top:.45rem;font-size:.85rem;line-height:1.45;color:var(--text-2)}
.swx-step:not(:last-child)::after{content:"";position:absolute;top:11px;right:-.95rem;width:.65rem;height:1px;background:#C9D3E3}

/* Impact + CTA split */
.swx-close{display:grid;grid-template-columns:1fr 1.12fr}
.swx-impact{background:#F6F8FC;padding:clamp(2.5rem,5vw,4.25rem) clamp(1.5rem,4vw,3.25rem);display:flex;flex-direction:column;justify-content:center}
.swx-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.25rem);margin-top:1.75rem}
.swx-stat-num{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--sys-navy)}
.swx-stat-lab{font-size:.9rem;color:var(--text-2);margin-top:.4rem;max-width:18ch}
.swx-cta{position:relative;overflow:hidden;background:linear-gradient(145deg,#0E2D6D 0%,#0a1f48 55%,#0B0D10 100%);color:#fff;padding:clamp(2.75rem,5vw,4.5rem) clamp(1.75rem,4vw,3.5rem);display:flex;flex-direction:column;justify-content:center}
.swx-cta-h{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.3vw,2.55rem);line-height:1.08;letter-spacing:-.02em;color:#fff;margin:.8rem 0 1rem;max-width:20ch}
.swx-cta-sub{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.82);max-width:46ch;margin-bottom:2rem}
.swx-cta-side{position:absolute;top:50%;right:.8rem;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--display);font-weight:700;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.38)}

@media(max-width:1180px){
  .swx-prod-layout{grid-template-columns:1fr;gap:1rem}
  .swx-prod-head h2{max-width:18ch}
  .swx-cap-grid{grid-template-columns:repeat(3,1fr);gap:1.6rem 1.5rem}
  .swx-cap,.swx-cap:first-child,.swx-cap:last-child{border-left:0;padding:0}
}
@media(max-width:980px){
  .swx-hero-inner{grid-template-columns:1fr;gap:2rem}
  .swx-hero-labels{display:none}
  .swx-hero-visual{position:relative;width:auto;margin:2rem var(--gutter) 0;-webkit-mask-image:none;mask-image:none}
  .swx-hero-blur,.swx-hero-visual::after{display:none}
  /* laptop full-bleed under the copy, centred on the laptop itself (it sits at 40.5% of the image), edges still melting */
  .swx-hero--laptop .swx-hero-visual{margin:1.75rem 0 0;overflow:hidden}
  .swx-hero-shot{position:relative;left:auto;top:auto;transform:none;display:block;width:min(118%,760px);max-width:none;margin-left:calc(50% - min(118%,760px) * .405);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%)}
  .swx-caps-inner,.swx-proc-inner{grid-template-columns:1fr}
  .swx-cap-grid{grid-template-columns:repeat(2,1fr)}
  .swx-steps{grid-template-columns:repeat(3,1fr);gap:1.6rem 1.2rem}
  .swx-step:not(:last-child)::after{display:none}
  .swx-close{grid-template-columns:1fr}
  .swx-cta-side{display:none}
}
@media(max-width:620px){
  .swx-prod{flex-basis:85%;grid-template-columns:1fr}
  .swx-prod-media{order:-1}
  .swx-cap-grid{grid-template-columns:1fr}
  .swx-steps{grid-template-columns:repeat(2,1fr)}
}

/* ============ Technology & Solutions (v=36) — reuses the swx hero, kicker and process styles ============ */
/* hero: the real technician photo fills the right side, sharp (no blur), blended into the navy */
.tsx-hero .swx-h1{font-size:clamp(2rem,4vw,3.15rem)}   /* longer headline: keep it to ~4 lines */
.tsx-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.tsx-hero-photo::after{background:radial-gradient(ellipse 48% 56% at 56% 54%,rgba(43,87,184,0) 0%,rgba(43,87,184,0) 45%,#2b57b8 100%)}

/* One team for the whole stack: heading left, copy right */
.tsx-intro{display:grid;grid-template-columns:minmax(220px,.75fr) 1.6fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.tsx-intro-h{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:.7rem 0 0;max-width:12ch}
.tsx-intro-copy p{font-size:1.06rem;line-height:1.7;color:var(--text-2);max-width:62ch}
.tsx-intro-copy p+p{margin-top:1.1em}
.tsx-intro-copy .btn{margin-top:1.75rem}

/* Capabilities: image cards in three themed rows, no numbers (image slots await Saad's photos) */
.tsx-caps{background:var(--paper-2)}
.tsx-caps-head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:.7rem 0 0}
.tcap-group{margin-top:clamp(2rem,4vw,2.75rem)}
.tcap-group-label{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--ink);margin:0 0 1rem}
.tcap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.tcap{background:#fff;border:1px solid #E6EBF3;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tcap:hover{transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(12,22,44,.25)}
.tcap-img{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden}
.tcap-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tcap-img svg{width:64px;height:64px;opacity:.5}
.tcap-img--net{background:linear-gradient(135deg,#E9F0FB 0%,#D2E1F6 60%,#BCD3F1 100%);color:#1B4DD1}
.tcap-img--pwr{background:linear-gradient(135deg,#FBF5E6 0%,#F1E3BE 60%,#E9D6A3 100%);color:#9A6B00}
.tcap-img--sec{background:linear-gradient(135deg,#E8F4EF 0%,#CFE7DD 60%,#B8DCCD 100%);color:#1F6B52}
.tcap-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.tcap .link-arrow{margin-top:auto;padding-top:.9rem;align-self:flex-start}   /* card links line up at the bottom */
.tcap-top{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}   /* icon + title on one line */
.tcap-ico{color:var(--navy);display:flex;flex:none}
.tcap-ico svg{width:22px;height:22px}
.tcap h4{font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.25;color:var(--ink);margin:0}
.tcap p{font-size:.92rem;line-height:1.55;color:var(--text-2);margin:0}

/* approach row: four steps instead of five */
.swx-steps--4{grid-template-columns:repeat(4,1fr)}

/* closing call to action */
.tsx-cta{background:linear-gradient(145deg,#0E2D6D 0%,#0a1f48 55%,#0B0D10 100%);color:#fff;padding-block:clamp(3rem,6vw,4.5rem)}
.tsx-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem 3rem;flex-wrap:wrap}
.tsx-cta .swx-cta-h{max-width:22ch}
.tsx-cta .swx-cta-sub{margin-bottom:0}

@media(max-width:980px){
  .tsx-hero-photo{height:clamp(240px,56vw,380px);border-radius:16px;overflow:hidden}
  .tsx-intro{grid-template-columns:1fr;gap:1rem}
  .tcap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swx-steps--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .tcap-grid{grid-template-columns:1fr}
}

/* Featured project (Infrastructure): a real case study, Saad's own copy and figures */
.fproj{background:var(--sys-navy);color:#fff;padding-block:clamp(3rem,6vw,4.75rem);scroll-margin-top:80px}
.fproj-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.fproj-h{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.08;letter-spacing:-.02em;color:#fff;margin:.7rem 0 1.1rem;max-width:22ch}
.fproj-copy p:not(.swx-kicker){font-size:1.02rem;line-height:1.7;color:rgba(255,255,255,.82);max-width:60ch}
.fproj-copy p:not(.swx-kicker)+p{margin-top:1em}
.fproj-copy .btn{margin-top:1.75rem}
/* two real installation photos side by side */
.fproj-photos{display:grid;grid-template-columns:1.5fr 1fr;gap:.75rem;aspect-ratio:16/10}
.fproj-photos img{width:100%;height:100%;min-width:0;object-fit:cover;border-radius:14px;display:block}
.fproj-photos--single{grid-template-columns:1fr}
.fproj-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;margin:clamp(2rem,4vw,2.75rem) 0 0}
.fproj-stats>div{background:var(--sys-navy);padding:clamp(1.3rem,2.5vw,1.9rem)}
.fproj-stats dt{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,4vw,3rem);line-height:1;color:var(--sys-yellow)}
.fproj-stats dt span{font-size:.45em;font-weight:700;margin-left:.12em;color:#fff}
.fproj-stats dd{margin:.55rem 0 0;font-size:.9rem;line-height:1.4;color:rgba(255,255,255,.78)}
@media(max-width:900px){.fproj-inner{grid-template-columns:1fr}.fproj-stats{grid-template-columns:repeat(2,1fr)}}

/* real photo inside an About project card */
.projcard-img--photo{position:relative;overflow:hidden;background:#0E2D6D}
.projcard-img--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Construction page: block-making + steel fabrication pair */
.photo-pair{display:grid;gap:.75rem}
.photo-pair img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);display:block}

/* Contact (v=42): navy hero with the form in a white card. The map fills the space below the heading so both
   columns end level; on phones the order is heading, form, map. The glow is a background layer, not an ::after */
.cx-hero{color:#fff;
  background:radial-gradient(55% 80% at 14% 42%,rgba(46,107,255,.16),transparent 70%),radial-gradient(135% 135% at 82% -10%,#17386f 0%,#0d2250 46%,#091636 100%);
  padding-block:clamp(7.25rem,10vw,8.75rem) clamp(3rem,6vw,4.75rem)}
.cx-grid{display:grid;grid-template-columns:1fr minmax(0,1.08fr);grid-template-rows:auto 1fr;grid-template-areas:"copy form" "map form";
  column-gap:clamp(2rem,6vw,6rem);row-gap:2.25rem;align-items:start}
.cx-copy{grid-area:copy}
.cx-hero .swx-h1{font-size:clamp(2.4rem,5.6vw,4.4rem)}
.cx-hero .swx-hero-lead{margin-bottom:0}
.cx-follow{display:flex;align-items:center;gap:1rem;margin-top:1.75rem}
.cx-follow>span{font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cx-follow .socials{gap:.5rem}
.cx-map{grid-area:map;align-self:stretch;position:relative;min-height:200px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06)}
.cx-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.cx-card{grid-area:form;background:#fff;color:var(--text);border-radius:18px;padding:clamp(1.5rem,3vw,2.4rem);box-shadow:0 30px 70px rgba(2,8,26,.45)}
.cx-card-h{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.015em;color:var(--ink);margin-bottom:1.4rem}
.cx-card .form-stack{gap:1.3rem}
.cx-card .field textarea{min-height:130px}
@media(max-width:980px){
  .cx-grid{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"copy" "form" "map"}
  .cx-map{height:clamp(220px,60vw,300px)}
}

/* ── About: flowing narrative wrapped around a moving picture ── */
.about-section .eyebrow{margin-bottom:1.4rem}
.about-prose{max-width:1000px;color:var(--text-2);font-size:1.06rem;line-height:1.72}
.about-prose p+p{margin-top:1.1em}
.about-fig{float:right;width:min(46%,460px);margin:.4rem 0 1.4rem 2.4rem}
.about-fig-frame{display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 24px 50px rgba(12,22,44,.18)}
.about-fig img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.14) translate(-2%,-1.5%)}}
.about-tagline{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.3vw,1.55rem);line-height:1.36;color:var(--ink);margin-top:1.9rem;clear:both}
@media (max-width:720px){
  .about-fig{float:none;width:100%;margin:0 0 1.6rem}
  .about-prose{font-size:1.02rem}
}

/* ── Our Purpose: offset right, flows in on scroll ── */
.purpose-section{background:linear-gradient(270deg,rgba(46,107,255,.12) 0%,rgba(46,107,255,.05) 46%,rgba(46,107,255,0) 82%)}
.purpose-block{max-width:62ch;margin-left:auto}
.purpose-lead{font-family:var(--display);font-weight:700;font-size:clamp(1.55rem,3.3vw,2.3rem);line-height:1.22;color:var(--ink);margin:.4rem 0 1.5rem;text-wrap:balance}
.purpose-block .prose{max-width:none;color:var(--text-2);font-size:1.06rem;line-height:1.72}
@keyframes purpose-flow{from{opacity:0;transform:translateY(64px)}to{opacity:1;transform:translateY(0)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .purpose-block{animation:purpose-flow linear both;animation-timeline:view();animation-range:entry 4% cover 42%}
  }
}
@media (prefers-reduced-motion:reduce){.about-fig img{animation:none}}

/* Construction: image column floats (sticky) while the text scrolls, with gentle motion */
.csticky{position:sticky;top:clamp(88px,11vh,116px);align-self:start}
.csticky .split-media img{animation:kenburns 26s ease-in-out infinite alternate}
@media (max-width:1024px){.csticky{position:static}}
@media (prefers-reduced-motion:reduce){.csticky .split-media img{animation:none}}

/* ═══════════════ Systems page — icon cards + metrics band ═══════════════ */
:root{--sys-navy:#0E2D6D;--sys-yellow:#FFD000}
.sys-head{padding-block:clamp(2.25rem,4.5vw,3.5rem) clamp(1.25rem,2.5vw,2rem);background:linear-gradient(180deg,#fff,var(--paper-2));border-bottom:1px solid var(--line)}
.sys-head-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.sys-h1{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.08;letter-spacing:-.02em;max-width:20ch;margin-top:1rem;color:var(--ink)}
.sys-intro{margin-top:1.3rem;max-width:56ch;color:var(--text-2);font-size:1.02rem;line-height:1.62}
.sys-head-aside{display:flex;flex-direction:column;gap:1.75rem;align-items:flex-end;padding-top:.4rem}
.sys-tag{font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);line-height:1.9;text-align:right;border-top:3px solid var(--sys-yellow);padding-top:.7rem}
@media (max-width:900px){.sys-head-grid{grid-template-columns:1fr}.sys-head-aside{display:none}}

.sys-cards-sec{padding-block:clamp(1.75rem,3.5vw,2.75rem)}
.sys-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,2.5vw,2rem);align-items:stretch}
@media (max-width:900px){.sys-cards{grid-template-columns:1fr}}
.syscard{border-radius:18px;padding:clamp(1.6rem,2.8vw,2.5rem);display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(12,22,44,.13)}
.syscard--navy{background:linear-gradient(100deg,#0E2D6D 0%,#0E2D6D 46%,rgba(14,45,109,.82) 72%,rgba(14,45,109,.66) 100%),url(assets/sys-tech.jpg) center right/cover,var(--sys-navy);color:#fff}
.syscard--light{background:linear-gradient(100deg,#fff 0%,#fff 50%,rgba(255,255,255,.88) 74%,rgba(255,255,255,.74) 100%),url(assets/sys-software.jpg) center right/cover,#fff;border:1px solid var(--line)}
.syscard-ico{width:54px;height:54px;border-radius:13px;display:grid;place-items:center;margin-bottom:1.15rem}
.syscard--navy .syscard-ico{background:rgba(255,255,255,.1);color:var(--sys-yellow)}
.syscard--light .syscard-ico{background:#EEF3FA;color:var(--sys-navy)}
.syscard-ico svg{width:28px;height:28px}
.syscard-eyebrow{font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.55rem}
.syscard--navy .syscard-eyebrow{color:#9DB8FF}
.syscard--light .syscard-eyebrow{color:#1B4DD1}
.syscard-h{font-family:var(--display);font-weight:800;font-size:clamp(1.45rem,2.5vw,1.95rem);line-height:1.1;letter-spacing:-.01em;margin-bottom:.9rem;color:var(--ink)}
.syscard--navy .syscard-h{color:#fff}
.syscard-desc{font-size:.97rem;line-height:1.6;color:var(--text-2);margin-bottom:1.5rem;max-width:44ch}
.syscard--navy .syscard-desc{color:rgba(255,255,255,.82)}
.syscard-feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1.25rem;margin-bottom:1.75rem}
.syscard-feats li{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:500;line-height:1.25}
.syscard--navy .syscard-feats li{color:#fff}
.syscard-feats svg{width:20px;height:20px;flex:none}
.syscard--navy .syscard-feats svg{color:var(--sys-yellow)}
.syscard--light .syscard-feats svg{color:var(--sys-navy)}
.syscard .btn-gold{margin-top:auto;align-self:flex-start;background:var(--sys-yellow)}
@media (max-width:440px){.syscard-feats{grid-template-columns:1fr}}

.sys-metrics{background:var(--sys-navy);color:#fff;padding-block:clamp(2rem,3.5vw,3rem)}
.sys-metrics-grid{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:1.5rem 2rem;align-items:center}
.metric{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem}
.metric-ico{color:var(--sys-yellow)}
.metric-ico svg{width:30px;height:30px}
.metric-text{font-family:var(--display);font-weight:700;font-size:.98rem;line-height:1.25;max-width:16ch}
.metric-tag{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1.8;color:rgba(255,255,255,.5);text-align:right;border-left:1px solid rgba(255,255,255,.18);padding-left:1.75rem}
@media (max-width:900px){.sys-metrics-grid{grid-template-columns:1fr 1fr;gap:1.75rem}.metric-tag{grid-column:1/-1;text-align:center;border-left:0;border-top:1px solid rgba(255,255,255,.18);padding:1.1rem 0 0}}

/* ═══════════════ Home hero (photo + copy, text right) ═══════════════ */
.herox{position:relative;overflow:hidden;background:#0B1B3F;color:#fff}
.herox-img{position:absolute;inset:0;z-index:0;display:block}
.herox-img img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
/* navy thins out over the mixer so it shows through; the text side never drops below ~.58 */
.herox-shade{position:absolute;inset:0;z-index:1;background:
  linear-gradient(0deg,rgba(11,27,63,.72) 0%,rgba(11,27,63,0) 32%),
  linear-gradient(145deg,rgba(11,27,63,.6) 0%,rgba(11,27,63,.28) 28%,rgba(11,27,63,0) 52%),
  linear-gradient(90deg,rgba(11,27,63,.04) 0%,rgba(11,27,63,.1) 34%,rgba(11,27,63,.3) 46%,rgba(11,27,63,.58) 58%,rgba(11,27,63,.76) 72%,rgba(11,27,63,.84) 100%)}
.herox-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;
  padding-top:clamp(6rem,11vw,8.5rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.herox-labels{grid-column:1;align-self:start;justify-self:start;margin-top:clamp(1rem,3.5vw,3rem);
  font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;line-height:2;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.herox-labels .end{margin-top:1.1rem;padding-top:.65rem;border-top:3px solid #FFD000;display:inline-block}
.herox-copy{grid-column:2}
.herox-eyebrow{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:#fff;margin-bottom:1.4rem}
.herox-h1{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.03;letter-spacing:-.02em;color:#fff}
.herox-h1 .hl{color:#FFD000}
.herox-lead{margin-top:1.6rem;max-width:46ch;color:rgba(255,255,255,.85);font-size:1.05rem;line-height:1.6}
.herox-actions{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-end}
.btn-outline-y{background:transparent;color:#fff;border:2px solid #FFD000;border-radius:8px}
.btn-outline-y:hover{background:#FFD000;color:#111;border-color:#FFD000;transform:translateY(-2px)}
.herox-feats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:1.5rem 0 2.5rem;border-top:1px solid rgba(255,255,255,.16)}
.herox-feat{display:flex;align-items:center;gap:.75rem;font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.herox-feat svg{width:26px;height:26px;color:#FFD000;flex:none}
@media (max-width:860px){
  .herox-inner{grid-template-columns:1fr}
  .herox-labels{display:none}
  .herox-copy{grid-column:1}
  .herox-actions{justify-content:flex-start}
  .herox-feats{grid-template-columns:1fr 1fr;gap:1.2rem}
  .herox-img img{object-position:center}
  .herox-shade{background:linear-gradient(0deg,rgba(11,27,63,.92) 0%,rgba(11,27,63,.5) 55%,rgba(11,27,63,.42) 100%)}
}

/* ═══════════════ About page (projects · impact · industries · purpose · connect) ═══════════════ */
.about-intro{max-width:70ch;font-size:1.08rem;line-height:1.7;color:var(--text-2);margin-top:1.3rem}
.about-intro p+p{margin-top:1.1em}
.about-intro .about-tagline{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.35;color:var(--ink);margin-top:1.7rem}

/* Featured Projects */
.proj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem);flex-wrap:wrap}
.proj-head .link-arrow{margin-bottom:.35rem}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,1.75rem)}
@media(max-width:860px){.proj-grid{grid-template-columns:1fr}}
.projcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 14px 36px rgba(12,22,44,.08);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.projcard:hover{box-shadow:0 22px 50px rgba(12,22,44,.14);transform:translateY(-3px)}
.projcard-img{aspect-ratio:16/10;display:grid;place-items:center;color:rgba(255,255,255,.9)}
.projcard-img svg{width:54px;height:54px;opacity:.92}
.projcard-img--a{background:linear-gradient(135deg,#143a82,#0E2D6D)}
.projcard-img--b{background:linear-gradient(135deg,#C98A1E,#8a5a12)}
.projcard-img--c{background:linear-gradient(135deg,#1b4a8f,#0b1b3f)}
.projcard-body{padding:clamp(1.25rem,2.2vw,1.6rem);display:flex;flex-direction:column;flex:1}
.projcard-tag{font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1B4DD1;margin-bottom:.5rem}
.projcard-title{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--ink);margin-bottom:.5rem}
.projcard-desc{font-size:.92rem;line-height:1.55;color:var(--text-2);margin-bottom:1rem}
.projcard-link{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--navy);margin-top:auto}
.projcard-link svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.projcard:hover .projcard-link svg{transform:translateX(3px)}

/* Our Impact */
.impact{background:var(--sys-navy);color:#fff;padding-block:clamp(2.75rem,5vw,4rem)}
.impact .eyebrow{color:#9DB8FF}
.impact-head{margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.impact-head h2{color:#fff}
.impact-grid{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(2rem,6vw,5rem);align-items:start}
@media(max-width:620px){.impact-grid{grid-template-columns:1fr 1fr;gap:2rem}}
.impact-stat{display:flex;flex-direction:column;gap:.35rem;border-left:2px solid rgba(255,255,255,.18);padding-left:1.4rem}
.impact-num{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;color:var(--sys-yellow)}
.impact-label{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.82);max-width:12ch}

/* Industries */
.ind-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(1.25rem,2.2vw,1.75rem) .5rem;margin-top:clamp(.5rem,2vw,1rem)}
@media(max-width:1024px){.ind-grid{grid-template-columns:repeat(4,1fr);gap:1.75rem 1rem}}
@media(max-width:560px){.ind-grid{grid-template-columns:repeat(2,1fr)}}
.ind-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.65rem;font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--ink)}
.ind-ico{color:var(--navy)}
.ind-ico svg{width:34px;height:34px}

/* Who we are — crew photo sitting blurred behind the whole section */
.about-flow{position:relative;overflow:hidden}
.about-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:blur(7px);transform:scale(1.08);z-index:0}
.about-flow::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.84) 0%,rgba(255,255,255,.88) 60%,rgba(255,255,255,.92) 100%)}
.about-flow>.wrap{position:relative;z-index:2}

/* Our Purpose — crew photo, softened */
.purpose-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding-block:clamp(4rem,9vw,7rem)}
.purpose-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:blur(3px);transform:scale(1.06);z-index:0}
.purpose-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,12,20,.9) 0%,rgba(8,12,20,.72) 48%,rgba(8,12,20,.5) 100%)}
.purpose-hero-inner{position:relative;z-index:2;max-width:620px}
.purpose-hero .eyebrow{color:var(--sys-yellow)}
.purpose-hero-h{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.08;letter-spacing:-.02em;margin-bottom:1.2rem;color:#fff}
.purpose-hero-copy{font-size:1.06rem;line-height:1.65;color:rgba(255,255,255,.88);max-width:56ch}

/* Let's Connect */
.connect{background:var(--sys-navy);color:#fff;padding-block:clamp(3rem,6vw,4.5rem)}
.connect-inner{display:grid;grid-template-columns:1.6fr .6fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:860px){.connect-inner{grid-template-columns:1fr}}
.connect .eyebrow{color:#9DB8FF}
.connect-h{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.05;letter-spacing:-.02em;color:#fff;margin:.3rem 0 1rem}
.connect-copy>p{color:rgba(255,255,255,.82);max-width:48ch;font-size:1.02rem;line-height:1.6;margin-bottom:1.8rem}
.connect-actions{display:flex;gap:1rem;flex-wrap:wrap}
.connect-labels{display:flex;flex-direction:column;gap:.55rem;align-items:flex-end;text-align:right;justify-self:end}
.connect-labels span{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.connect-labels span:first-child{color:var(--sys-yellow)}
@media(max-width:860px){.connect-labels{flex-direction:row;flex-wrap:wrap;align-items:flex-start;text-align:left;justify-self:start;gap:.4rem 1.2rem;margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.15);padding-top:1.5rem}}

/* Process steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(1.5rem,3vw,2.5rem);counter-reset:step}
.step{padding-top:1.75rem;border-top:2px solid var(--gold);counter-increment:step}
.step::before{
  content:"0" counter(step);display:block;
  font-family:var(--display);font-size:.8125rem;font-weight:700;
  letter-spacing:.12em;color:var(--gold);margin-bottom:.9rem;
}
.step h3{font-size:1.125rem;margin-bottom:.5rem}
.step p{font-size:var(--t-sm);color:var(--text-2)}
.on-ink .step p{color:var(--on-dark-2)}

/* Split feature — image + copy */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-media::after{
  content:"";position:absolute;left:0;bottom:0;width:clamp(3rem,8vw,5.5rem);height:6px;background:var(--gold)
}

/* Callout band */
.band{background:linear-gradient(180deg,#0C2F72 0%,#0a1f45 48%,#0B0D10 100%);color:#fff;padding-block:clamp(3.5rem,7vw,5.5rem)}
.band-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem}
.band h2{color:#fff;max-width:20ch}
.band p{color:rgba(255,255,255,.78);margin-top:.85rem;max-width:46ch}
/* Home CTA band: statement spans the full width in two columns, button beneath */
.band-cta .t-h2{max-width:34ch}
.band-cta-copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.25rem);margin-top:1.5rem;align-items:start}
.band-cta-copy p{margin-top:0;max-width:52ch}
.band-cta-actions{margin-top:2.25rem}
@media (max-width:760px){.band-cta-copy{grid-template-columns:1fr;gap:1rem}}

/* Cards (blog / projects) */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1.5rem,3vw,2rem)}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.card:hover{border-color:var(--ink);transform:translateY(-3px)}
.card-media{aspect-ratio:16/10;background:var(--paper-3);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card-media img{transform:scale(1.04)}
.card-body{padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.card-meta{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.card-body h3{font-size:1.1875rem}
.card-body p{font-size:var(--t-sm);color:var(--text-2)}
.card-body .link-arrow{margin-top:auto;padding-top:.5rem}

/* Contact / detail list */
.deflist{display:grid;gap:1.75rem}
.deflist dt{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:.35rem}
.deflist dd{font-size:1.0625rem;font-weight:500}
.on-ink .deflist dt{color:var(--on-dark-3)}
/* Contact methods — 2D icon tiles (WhatsApp brand-green, others navy line) */
.contact-methods{display:grid;gap:.35rem;margin-top:.25rem}
.contact-method{display:flex;align-items:center;gap:.95rem;padding:.65rem;border-radius:var(--radius);color:var(--text)}
a.contact-method{transition:background .2s var(--ease)}
a.contact-method:hover{background:#fff}
a.contact-method:hover .cm-value{color:var(--navy)}
.cm-icon{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:#fff;border:1px solid var(--line);color:var(--navy)}
.cm-icon svg{width:22px;height:22px}
.cm-icon--wa{background:#25D366;border-color:#25D366;color:#fff}
.cm-body{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.cm-label{font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.cm-value{font-size:1rem;font-weight:600;line-height:1.3;transition:color .2s var(--ease)}

/* Forms */
.field{display:flex;flex-direction:column;gap:.5rem}
/* uppercase micro-labels, matching the site's eyebrow/label system — reads as
   a considered enterprise form rather than a default one */
.field label{font-family:var(--display);font-size:.75rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-2)}
.field label .req{color:#B3261E;margin-left:.15em}   /* required marker — 5.9:1 on white */
.field input,.field select,.field textarea{
  width:100%;padding:.9rem 1.05rem;background:var(--paper);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--body);font-size:1rem;line-height:1.45;-webkit-appearance:none;appearance:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
/* custom dropdown chevron — removes the clunky native double-arrow */
.field select{cursor:pointer;padding-right:2.75rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5361' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05rem center;background-size:16px}
/* an unchosen "Select a …" option reads as a placeholder */
.field select:invalid{color:var(--text-3)}
.field select option{color:var(--text)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#9AA3B2}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(12,47,114,.14)
}
.field textarea{resize:vertical;min-height:168px;line-height:1.6}
/* stacked, comfortable rhythm for a form column */
.form-stack{display:grid;gap:1.5rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-note{font-size:.8125rem;color:var(--text-3);margin-top:.25rem}
.form-status{padding:.9rem 1.1rem;border-radius:var(--radius);font-size:var(--t-sm);display:none}
.form-status.is-ok{display:block;background:#E8F5EC;border:1px solid #A8D5B8;color:#1B5E33}
.form-status.is-err{display:block;background:#FDECEC;border:1px solid #F0B4B4;color:#8C1D1D}

/* Page header (inner pages).
   Motif instead of the old radial glow (which read as generic AI filler):
     ::before — a blueprint grid, masked to the top-right corner
     ::after  — a low "skyline barcode" strip of fine vertical bars along the
                base, mostly faint with an occasional gold/blue tick.
   Intentional, drawn from the same skyline language as the hero. */
.pagehead{background:linear-gradient(180deg,#fff,var(--paper-2));color:var(--text);
  padding-block:clamp(6.25rem,10vw,8.5rem) clamp(2.25rem,4vw,3.25rem);position:relative;overflow:hidden;
  border-bottom:1px solid var(--line)}
.pagehead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(12,47,114,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(12,47,114,.055) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(90% 120% at 100% 0,#000 20%,transparent 60%);
          mask-image:radial-gradient(90% 120% at 100% 0,#000 20%,transparent 60%)}
.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      rgba(12,47,114,.06) 0 3px, transparent 3px 22px),
    linear-gradient(90deg,transparent 60%,rgba(46,107,255,.12) 78%,transparent 94%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000);
          mask-image:linear-gradient(180deg,transparent,#000)}
.pagehead .wrap{position:relative;z-index:1}
.crumbs{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--text-3);margin-bottom:1.5rem}
.crumbs a:hover{color:var(--navy)}
.crumbs svg{width:12px;height:12px;opacity:.5}
.pagehead .lead{margin-top:1.25rem;color:var(--text-2);max-width:66ch;text-wrap:pretty}

/* ─── 8. FOOTER ─────────────────────────────────────────────────────── */
.footer{background:var(--ink);color:var(--on-dark-2);padding-block:clamp(3.5rem,7vw,5rem) 2rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(2rem,4vw,3.5rem)}
.footer-brand .brand{margin-bottom:1.25rem}
.footer-brand p{font-size:var(--t-sm);max-width:34ch;color:var(--on-dark-3)}
.footer-about{margin-top:1.15rem}
.footer-about a{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--gold)}
.footer-about svg{width:13px;height:13px;transition:transform .25s var(--ease)}
.footer-about a:hover svg{transform:translateX(3px)}
.footer h4{
  font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin-bottom:1.25rem
}
.footer ul{list-style:none;display:grid;gap:.7rem}
.footer a{font-size:var(--t-sm);color:var(--on-dark-2);transition:color .2s}
.footer a:hover{color:var(--gold)}
.footer-bottom{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.75rem;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-size:.8125rem;color:var(--on-dark-3)
}
.socials{display:flex;gap:.75rem}
.socials a{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--line-dark);border-radius:var(--radius);
  transition:border-color .25s,background .25s,color .25s
}
.socials a:hover{border-color:var(--gold);color:var(--gold)}
.socials svg{width:16px;height:16px}

/* ─── 9. MOTION ─────────────────────────────────────────────────────── */
/* Content is visible by default; JS opts in to animation so nothing is
   ever hidden if scripts fail or are slow. */
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.d1{transition-delay:.08s}
.js .reveal.d2{transition-delay:.16s}
.js .reveal.d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .hero-bar.lit{animation:none!important}
  html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}

/* ─── 10. RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .split{grid-template-columns:1fr;gap:2rem}
  .split-media{aspect-ratio:16/9}
}

@media (max-width:760px){
  /* Editorial split stacks; drop the centre rule and separate with a top border */
  .divisions{grid-template-columns:1fr;gap:0}
  .divisions::before{display:none}
  .division{padding-block:clamp(1.75rem,6vw,2.5rem)}
  .division--infra{padding-top:0}
  .division--systems{border-top:1px solid var(--line-dark)}
}
/* very narrow: the two-up service list becomes one column */
@media (max-width:400px){
  .division-list{grid-template-columns:1fr}
}

/* thin the skyline on small screens so bars don't turn to slivers */
@media (max-width:560px){
  .hero-bar:nth-of-type(even){display:none}
}

@media (max-width:860px){
  .nav-toggle{display:block}
  .nav-links{
    position:fixed;inset:88px clamp(.75rem,3vw,1.5rem) auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(11,13,16,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 20px 44px rgba(0,0,0,.4);
    padding:.5rem 1.3rem 1rem;
    max-height:calc(100dvh - 108px);overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  }
  .nav.is-open .nav-links{opacity:1;transform:none;visibility:visible}
  .nav.is-open .nav-inner{background:rgba(11,13,16,.9)}
  .nav-links li{border-bottom:1px solid var(--line-dark)}
  .nav-links li:last-child{border-bottom:0;margin-top:1rem}
  .nav-links a{display:block;padding:1rem 0;font-size:1.0625rem}
  .nav-links a::after{display:none}
  .nav-links .btn{width:100%;justify-content:center}

  /* Systems dropdown: static, indented sub-items inside the open menu */
  .nav-has-sub>a{justify-content:space-between}
  .nav-caret{display:none}
  .nav-sub{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;padding:0 0 .6rem;background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;display:grid;gap:0}
  .nav-sub::before{display:none}
  .nav-sub li{border-bottom:0}
  .nav-sub a{padding:.75rem 0 .75rem 1rem;font-size:1rem;color:var(--on-dark-3);
    border-left:2px solid var(--line-dark);margin-left:.15rem}
  .nav-sub a:hover,.nav-sub a[aria-current="page"]{background:none;color:#fff}

  .factbar{grid-template-columns:1fr 1fr;gap:1.75rem}
  /* Stack the number above-left of the copy and top-align it, so it reads
     as a list marker rather than floating in the middle of tall text. */
  .index-row{grid-template-columns:2.5rem 1fr;row-gap:.5rem;align-items:start}
  .index-num{padding-top:.35rem}
  .index-go{grid-column:2;justify-self:start}
  .band-inner{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px){
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}

  /* Image-forward hero: give the photo real height and let it show through.
     The long paragraph and the button move off the photo so it can breathe;
     the copy sits at the foot of the image over a bottom-weighted scrim. */
  .hero{min-height:82vh;min-height:82svh}
  .hero-media img{object-position:48% 28%}
  .hero-inner{padding-block:0 clamp(1.75rem,6vw,2.5rem)}
  .hero .lead{display:none}
  .hero-actions{display:none}
  /* Headline sized so "We build in concrete —" always fits on one line, on
     every phone width (≈320px Tecno/SE → 430px iPhone Pro Max). The spans
     force the break so line 2 is always "and in code." */
  .hero h1{font-size:clamp(1.5rem,5.8vw,2.2rem);max-width:none;line-height:1.12}
  .hero::before{background:
    linear-gradient(180deg,transparent 0%,rgba(11,13,16,0) 30%,rgba(11,13,16,.60) 63%,rgba(11,13,16,.95) 100%)}

  /* the relocated CTA — a clean full-width action right under the hero */
  .hero-cta-mobile{display:block;background:var(--ink);padding:0 var(--gutter) 2.25rem}
  .hero-cta-mobile .btn{width:100%;justify-content:center}
}

/* Smallest phones: the "INFRASTRUCTURE & SYSTEMS" sub-wordmark pushes the
   hamburger off-screen at ~320px, and below 860px that toggle is the ONLY
   way into the menu. Drop the sub-line and tighten the row so it always fits. */
@media (max-width:400px){
  .brand-sub{display:none}
  .nav-inner{gap:1rem}
  .brand{min-width:0}
}