/* ==========================================================================
   Transline Technologies — landing page
   Built from Figma "Landing Page Draft" (node 602:4179), 1280px reference.
   ========================================================================== */

:root{
  /* palette — from the Figma variable set */
  --blue-600:#2563eb;
  --blue-700:#1d4ed8;
  --primary:#273996;
  --nav-bg:#0c0520;
  --h1:#2b2b2b;
  --h2:#454545;
  --ink:#343434;
  --ink-soft:#424242;
  --neutral-100:#f5f5f5;
  --neutral-200:#e5e5e5;
  --neutral-500:#737373;
  --neutral-600:#525252;
  --neutral-800:#262626;
  --gray-600:#4b5563;
  --border:#d9d9d9;
  --amber:#ef8924;

  /* type — DIN 2014 is the design face; Barlow is the free stand-in */
  --f-display:"DIN 2014","DIN Next LT Pro","Barlow",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,sans-serif;
  --f-ui:"Roboto","Inter",system-ui,sans-serif;
  --f-alt:"Ubuntu","Inter",system-ui,sans-serif;

  /* layout */
  --page:1280px;
  --bar-h:42px;
  --nav-h:109px;

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

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
.anchor{ position:absolute; top:-90px }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }
h1,h2,h3,p,ul{ margin:0 }
ul,ol{ list-style:none; padding:0 }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:#fff; color:var(--primary); padding:12px 18px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0 }

:focus-visible{ outline:2px solid var(--blue-600); outline-offset:3px }

/* --------------------------------------------------------------------------
   Scroll reveal primitives
   -------------------------------------------------------------------------- */
.js .reveal{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--rd,0ms);
}
.js .reveal.is-in{ opacity:1; transform:none }

/* word-by-word headline reveal */
.reveal-words .w{
  display:inline-block;
}
.js .reveal-words .w{
  opacity:0;
  transform:translate3d(0,.55em,0) rotate(2deg);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--wd,0ms);
}
.js .reveal-words.is-in .w{ opacity:1; transform:none }
/* keep the clip tight so descenders are not cut */
.reveal-words .line{ display:inline-block; overflow:hidden; padding-bottom:.08em; vertical-align:bottom }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .reveal,.reveal-words .w{ opacity:1 !important; transform:none !important; transition:none !important }
}

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */
.nav{
  position:fixed; top:var(--bar-h); left:0; right:0; z-index:100;
  background:rgba(10,10,12,.44);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  padding:14px 52px;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(8,8,10,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 34px rgba(0,0,0,.35);
}

.nav__inner{
  max-width:var(--page); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__logo img{ width:113px; height:39px }

.nav__links{ display:flex; align-items:center; gap:8px; margin-left:auto }
.nav__link{
  position:relative;
  display:inline-flex; align-items:center; gap:2px;
  padding:8px; border-radius:48px;
  font-size:14px; line-height:24px; color:#f2f2f2;
  transition:color .25s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:8px; right:8px; bottom:4px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__link:hover::after,.nav__link:focus-visible::after{ transform:scaleX(1) }
.nav__chev{ width:12px; height:7px; transition:transform .3s var(--ease) }
.nav__link--menu[aria-expanded="true"] .nav__chev{ transform:rotate(180deg) }

.nav__cta{
  margin-left:20px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; border-radius:6px;
  background:#fff; color:#0c0520;
  font-weight:600; font-size:14px; line-height:20px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.nav__cta:hover{ transform:translateY(-1px); background:#f1f3ff; box-shadow:0 8px 22px rgba(0,0,0,.28) }

.nav__burger{ display:none; width:40px; height:40px; padding:8px; flex-direction:column; justify-content:center; gap:5px }
.nav__burger span{ display:block; height:2px; background:#f2f2f2; border-radius:2px; transition:transform .3s var(--ease), opacity .2s }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

.nav__mobile{ display:none; flex-direction:column; gap:4px; padding:16px 4px 8px }
.nav__mobile a{ padding:12px 4px; color:#f2f2f2; font-size:17px; border-bottom:1px solid rgba(255,255,255,.08) }
.nav__mobile-cta{ margin-top:12px; background:#fff; color:var(--primary); font-weight:600; text-align:center; border-radius:4px; border:0 !important }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  height:100vh; height:100svh;
  min-height:640px;
  overflow:hidden;
  background:#0c0421;
  display:flex; align-items:center; justify-content:center;
  isolation:isolate;
}
.hero__glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 58% at 50% 42%,rgba(38,36,126,.92) 0%,rgba(24,20,84,.5) 46%,rgba(12,4,33,0) 78%),
    linear-gradient(180deg,rgba(12,4,33,0) 62%,rgba(26,26,84,.55) 100%);
}
.hero__grid{
  position:absolute; inset:0; width:100%; height:100%; z-index:2;
  -webkit-mask-image:radial-gradient(ellipse 64% 82% at 50% 46%,#000 22%,transparent 84%);
          mask-image:radial-gradient(ellipse 64% 82% at 50% 46%,#000 22%,transparent 84%);
}
.hero__content{
  position:relative; z-index:3;
  width:min(1100px,calc(100% - 48px));
  text-align:center; color:#fff;
  padding-top:var(--nav-h);
}
/* scroll cue */
.hero__cue{
  position:absolute; z-index:3;
  left:50%; bottom:34px; transform:translateX(-50%);
  width:1px; height:56px; overflow:hidden;
}
.hero__cue::after{
  content:""; position:absolute; left:0; top:-100%;
  width:100%; height:100%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.85));
  animation:cueDrop 2.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cueDrop{
  0%{ transform:translateY(0) }
  55%,100%{ transform:translateY(200%) }
}
@media (prefers-reduced-motion:reduce){ .hero__cue::after{ animation:none; transform:translateY(100%) } }
.hero__title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:72px;
  line-height:72px;
  letter-spacing:-.005em;
  margin-bottom:20px;
}
.hero__sub{
  font-size:18px; line-height:28px;
  color:rgba(255,255,255,.72);
  max-width:640px; margin:0 auto;
}
.hero__cta-wrap{
  margin-top:44px;
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
}

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:9.5px 24px; border-radius:8px;
  background:var(--blue-600); color:#fff;
  font-family:var(--f-ui); font-weight:500; font-size:14px; line-height:1.5; letter-spacing:.07px;
  position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn-primary img{ width:13.25px; height:13.25px; transition:transform .3s var(--ease) }
.btn-primary:hover{ background:var(--blue-700); transform:translateY(-2px); box-shadow:0 14px 30px rgba(37,99,235,.4) }
.btn-primary:hover img{ transform:translate(3px,-3px) }

/* --------------------------------------------------------------------------
   GLOBE — THE WORLD IS OUR DEPLOYMENT
   -------------------------------------------------------------------------- */
.globe-sec{
  position:relative;
  height:849px;
  background:#fff;
  overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
}
.globe-sec__stage{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:894px; max-width:100%;
  height:660px;
  overflow:hidden;
}
.globe-sec__globe{
  position:absolute; top:155px; left:50%;
  width:894px; max-width:100%; aspect-ratio:1/1;
  transform:translateX(-50%) scale(calc(.86 + var(--gp,0.5) * .2));
  transform-origin:center top;
  will-change:transform;
}
.globe-sec__globe canvas{
  width:100%; height:100%;
  contain:layout paint size;
  opacity:0; transition:opacity 1.1s var(--ease);
  cursor:grab; touch-action:pan-y;
}
.globe-sec__globe canvas.is-ready{ opacity:1 }
.globe-sec__globe canvas:active{ cursor:grabbing }
.globe-sec__fade{
  position:absolute; left:50%; transform:translateX(-50%);
  top:400px; width:1011px; max-width:140%; height:260px;
  /* eased ramp from fully transparent, so there is no visible start edge */
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.04) 12%,
    rgba(255,255,255,.14) 26%,
    rgba(255,255,255,.32) 40%,
    rgba(255,255,255,.56) 54%,
    rgba(255,255,255,.80) 68%,
    rgba(255,255,255,.95) 82%,
    #fff 94%);
  pointer-events:none;
}
.globe-sec__title{
  position:relative; z-index:2;
  margin-top:544px;
  font-family:var(--f-display); font-weight:700;
  font-size:52px; line-height:75px; color:var(--ink);
  text-align:center;
  padding:0 24px;
}

/* --------------------------------------------------------------------------
   EPIC SECTIONS — full-viewport pinned footage with monumental type
   -------------------------------------------------------------------------- */
.epic{
  position:relative;
  height:220vh;                       /* the scroll runway */
  background:#000;
}
.epic__sticky{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
}
.epic__media{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
  transform:scale(calc(1.10 - var(--ep,0) * .10));
  will-change:transform;
  pointer-events:none;
  background:#020308;
}
.epic .epic__sticky{ background:#020308 }
.epic__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 62%,rgba(0,0,0,.72) 100%),
    linear-gradient(94deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 55%);
}
.epic--lane .epic__scrim{
  background:
    linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 60%,rgba(0,0,0,.72) 100%),
    radial-gradient(ellipse 70% 46% at 50% 58%,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 100%);
}
.epic__inner{
  position:absolute; inset:0;
  max-width:var(--page); margin:0 auto;
  padding:0 52px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:12vh;
}
.epic__inner--center{ align-items:center; text-align:center }
.epic__index{
  font-family:var(--f-ui);
  font-size:13px; letter-spacing:.42em; font-weight:500;
  color:rgba(255,255,255,.55);
  margin-bottom:22px;
  display:flex; align-items:center; gap:16px;
}
.epic__inner--left .epic__index::after{
  content:""; width:72px; height:1px; background:rgba(255,255,255,.35);
}
.epic__inner--center .epic__index{ justify-content:center }
.epic__title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(38px,5.4vw,74px);
  line-height:1.14;
  color:#fff;
  max-width:1000px;
  text-shadow:0 4px 60px rgba(0,0,0,.65);
}
.epic__inner--center .epic__title{ max-width:1080px }
.epic__sub{
  margin-top:26px; max-width:620px;
  font-size:18px; line-height:1.6;
  color:rgba(255,255,255,.78);
  text-shadow:0 2px 24px rgba(0,0,0,.7);
}
.epic__inner--center .epic__sub{ max-width:720px; margin-inline:auto }

/* --------------------------------------------------------------------------
   CERTIFICATIONS
   -------------------------------------------------------------------------- */
.certs{ padding:80px 24px; background:#fff; text-align:center }
.certs__title{
  font-family:var(--f-display); font-weight:700;
  font-size:40px; line-height:54px; color:var(--ink);
  max-width:781px; margin:0 auto;
}
.certs__sub{
  margin:24px auto 0; max-width:844px;
  font-size:16px; line-height:23px; color:#000;
}
.certs__scroll,.strengths__scroll{ display:contents }   /* mobile-only wrappers */

.certs__row{
  max-width:1170px; margin:68px auto 0;
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--border); border-left:1px solid var(--border);
}
.cert{
  height:311px; padding:30px 22px;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  text-align:left;
  display:flex; flex-direction:column;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.cert:hover{ background:#fafbff; transform:translateY(-4px) }
.cert__mark{ height:96px; display:flex; align-items:flex-start }
.cert__mark img{ height:auto }
.cert__mark img.cert__mark--cmmi{ width:96px; height:63px; object-fit:contain; object-position:left center }
.cert__name{
  margin-top:36px;
  font-weight:500; font-size:16px; line-height:1.5; color:var(--neutral-800);
}
.cert__desc{
  margin-top:8px;
  font-family:var(--f-ui); font-size:14px; line-height:1.5; letter-spacing:.07px;
  color:var(--neutral-500); max-width:180px;
}

/* --------------------------------------------------------------------------
   MILESTONES — a centred rail; every year opens its card on hover
   -------------------------------------------------------------------------- */
.milestones{ padding:80px 24px 60px; margin-bottom:50px; background:#fff; text-align:center }
.milestones__title{
  font-family:var(--f-display); font-weight:700;
  font-size:40px; line-height:54px; color:var(--ink);
}
.milestones__sub{ margin-top:16px; font-size:16px; line-height:23px; color:#000 }

.timeline{
  position:relative;
  max-width:1040px; margin:72px auto 0;
  padding-bottom:330px;               /* room for the hover cards */
}
.timeline__rail{
  position:absolute; left:50%; transform:translateX(-50%);
  top:48px; width:100vw; height:1px;
  background:var(--border);
}
.timeline__progress{
  display:block; height:100%; width:0; background:var(--blue-600);
  transition:width .7s var(--ease);
}
.timeline.is-in .timeline__progress{ width:var(--tl-progress,50%) }

.timeline__items{
  display:flex; justify-content:space-between;
  position:relative;
}
.tl-item{
  position:relative;
  flex:1 1 0;
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer; outline-offset:6px;
}
.tl-item__year{
  font-size:20px; line-height:23px; color:var(--gray-600);
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.tl-item__dot{
  margin-top:24px;                     /* year baseline → rail */
  width:9px; height:9px; border-radius:50%;
  background:var(--blue-600);
  position:relative; top:1px;          /* centre the dot on the 1px rail */
  transform:translateY(-50%) scale(0);
  transition:transform .45s var(--ease), box-shadow .35s var(--ease);
}
.timeline.is-in .tl-item__dot{ transform:translateY(-50%) scale(1) }
.timeline.is-in .tl-item:nth-child(1) .tl-item__dot{ transition-delay:.10s }
.timeline.is-in .tl-item:nth-child(2) .tl-item__dot{ transition-delay:.18s }
.timeline.is-in .tl-item:nth-child(3) .tl-item__dot{ transition-delay:.26s }
.timeline.is-in .tl-item:nth-child(4) .tl-item__dot{ transition-delay:.34s }
.timeline.is-in .tl-item:nth-child(5) .tl-item__dot{ transition-delay:.42s }
.timeline.is-in .tl-item:nth-child(6) .tl-item__dot{ transition-delay:.50s }
.timeline.is-in .tl-item:nth-child(7) .tl-item__dot{ transition-delay:.58s }
.timeline.is-in .tl-item:nth-child(8) .tl-item__dot{ transition-delay:.66s }

.tl-item.is-active .tl-item__year{ color:var(--blue-700); font-weight:600 }

.tl-item.is-active .tl-item__dot{
  transform:translateY(-50%) scale(1.9);
  box-shadow:0 0 0 7px rgba(37,99,235,.14);
}

.tl-card{
  position:absolute; top:96px; left:50%; transform:translate(-50%,14px);
  width:400px; max-width:none;
  padding:30px 28px;
  background:#0d0626; border-radius:12px;
  color:#fff; text-align:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s var(--ease), transform .45s var(--ease), visibility 0s .4s;
  z-index:5;
}
/* the amber→violet gradient edge from the design */
.tl-card::before{
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius:14px;
  background:linear-gradient(140deg,#ef8924 0%,#a855f7 55%,#2563eb 100%);
}
.tl-card::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:12px;
  background:#0d0626;
}
/* keep edge cards inside the section */
.tl-item:nth-child(1) .tl-card{ left:0; transform:translate(0,14px) }
.tl-item:nth-child(2) .tl-card{ left:-40px; transform:translate(0,14px) }
.tl-item:nth-child(7) .tl-card{ left:auto; right:-40px; transform:translate(0,14px) }
.tl-item:nth-child(8) .tl-card{ left:auto; right:0; transform:translate(0,14px) }

.tl-item:hover .tl-card,
.tl-item:focus-visible .tl-card,
.tl-item.is-open .tl-card,
.timeline:not(:hover) .tl-item.is-active .tl-card{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .4s var(--ease), transform .45s var(--ease), visibility 0s;
}
.tl-item:hover .tl-card{ transform:translate(-50%,0) }
.tl-item:nth-child(1):hover .tl-card,
.tl-item:nth-child(2):hover .tl-card,
.tl-item:nth-child(7):hover .tl-card,
.tl-item:nth-child(8):hover .tl-card{ transform:translate(0,0) }
.timeline:not(:hover) .tl-item.is-active .tl-card{ transform:translate(-50%,0) }

.timeline__nav{ display:none }
.timeline__arrow{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gray-100); color:var(--gray-600);
  transition:background .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.timeline__arrow svg{ width:22px; height:22px }
.timeline__arrow:disabled{ opacity:.3; cursor:default }
.timeline__arrow:not(:disabled):hover{ background:var(--blue-600); color:#fff }
.timeline__current{
  min-width:96px; text-align:center;
  font-family:var(--f-display); font-weight:700;
  font-size:26px; color:var(--blue-700);
}

.tl-card__title{ font-weight:600; font-size:19px; line-height:1.25 }
.tl-card__body{
  margin-top:16px;
  font-size:14px; line-height:23px; color:var(--neutral-200);
}

/* --------------------------------------------------------------------------
   OUR STRENGTHS — a summit rising out of drifting cloud, light theme
   -------------------------------------------------------------------------- */
.strengths{
  position:relative; overflow:hidden;
  min-height:100vh;
  background:#fff;
  display:flex; flex-direction:column; align-items:center;
  padding:0 24px 120px;
}
/* the sky: peak + cloud plates, isolated so the blend stays inside it */
.strengths__sky{
  position:absolute; top:0; left:0; right:0;
  height:min(104vh,1000px);
  background:#fff;              /* screen needs white beneath it, or black shows through */
  isolation:isolate;
  overflow:hidden;              /* and it must not escape that white, or it greys out */
  pointer-events:none;
}
.strengths__peak{
  position:absolute; z-index:2;              /* rises in front of the title */
  top:-9%; bottom:auto; left:50%; transform:translateX(-50%);
  width:min(1900px,150vw); max-width:none; height:auto;
}
/* white cloud on black + screen = mist that only shows where it crosses the rock */
.strengths__clouds{
  position:absolute; z-index:3;
  height:auto;
  mix-blend-mode:screen;                     /* white cloud shows only on the rock */
  filter:blur(12px);
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 58% 58% at 50% 50%,#000 22%,transparent 74%);
          mask-image:radial-gradient(ellipse 58% 58% at 50% 50%,#000 22%,transparent 74%);
}
.strengths__clouds--a{
  left:4%; top:2%;
  width:min(1020px,80vw);
  opacity:.78;
  animation:driftA 74s ease-in-out infinite;
}
.strengths__clouds--b{
  right:2%; top:12%;
  width:min(900px,72vw);
  transform:scaleX(-1);
  opacity:.55;
  animation:driftB 98s ease-in-out infinite;
}
@keyframes driftA{
  0%{   transform:translate3d(-14%,2%,0) }
  50%{  transform:translate3d(16%,-4%,0) }
  100%{ transform:translate3d(-14%,2%,0) }
}
@keyframes driftB{
  0%{   transform:scaleX(-1) translate3d(-12%,-2%,0) }
  50%{  transform:scaleX(-1) translate3d(14%,4%,0) }
  100%{ transform:scaleX(-1) translate3d(-12%,-2%,0) }
}
@media (prefers-reduced-motion:reduce){
  .strengths__clouds{ animation:none }
}
/* the haze that swallows the base and hands off to white */
.strengths__veil{
  position:absolute; inset:-1px -1px -2px; z-index:4;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 66%,rgba(255,255,255,.9) 90%,#fff 100%),
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 10%,rgba(255,255,255,0) 90%,#fff 100%);
}

.strengths__title{
  position:relative; z-index:1;              /* behind the summit */
  margin-top:9vh;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(46px,7vw,104px); line-height:1;
  letter-spacing:-.015em;
  color:var(--ink); text-transform:uppercase; text-align:center;
}
.strengths__row{
  position:relative; z-index:5;
  margin-top:48vh;
  width:min(1176px,100%);
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}
.strength{
  position:relative;
  min-height:330px; padding:26px 24px;
  background:#fff;
  overflow:hidden;
  transition:background .5s var(--ease);
}
.strength::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--blue-600);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.strength:hover{ background:#f7f9ff }
.strength:hover::before{ transform:scaleX(1) }
.strength__icon{
  width:70px; height:70px;
  filter:brightness(0) saturate(100%) invert(16%) sepia(24%) saturate(2200%) hue-rotate(206deg);
  opacity:.9;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.strength:hover .strength__icon{ transform:translateY(-4px); opacity:1 }
.strength__name{
  position:absolute; left:24px; right:24px; bottom:34px;
  font-family:var(--f-ui); font-weight:500;
  font-size:19px; line-height:1.4; color:var(--ink); text-transform:capitalize;
  transition:transform .5s var(--ease);
}
.strength:hover .strength__name{ transform:translateY(-92px) }
.strength__desc{
  position:absolute; left:24px; right:24px; bottom:30px;
  font-family:var(--f-ui); font-size:13px; line-height:1.55;
  color:var(--neutral-600);
  opacity:0; transform:translateY(14px);
  transition:opacity .45s var(--ease) .08s, transform .45s var(--ease) .08s;
}
.strength:hover .strength__desc{ opacity:1; transform:none }

/* --------------------------------------------------------------------------
   BUILT ON VALUES (CSR)
   -------------------------------------------------------------------------- */
.csr{ padding:80px 24px; margin-top:64px; background:#fff; display:flex; justify-content:center }
.csr__grid{
  display:grid;
  grid-template-columns:341px 481px 341px;
  grid-auto-rows:251px;
  border-top:1px solid var(--border); border-left:1px solid var(--border);
  max-width:100%;
}
.csr__cell{
  position:relative; overflow:hidden;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
}
.csr__cell--text{ padding:41px 28px }
.csr__cell--center{ display:flex; flex-direction:column; justify-content:center; padding:28px 44px }
.csr__cell--img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.csr__cell--img:hover img{ transform:scale(1.07) }

.csr__h{ font-family:var(--f-alt); font-weight:700; font-size:20px; line-height:1.5; color:#000 }
.csr__p{ margin-top:12px; font-family:var(--f-alt); font-size:16px; line-height:25px; color:#000 }

.csr__cell--hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; text-align:center; padding:24px 20px;
  border:1px solid var(--primary);
}
.csr__title{ font-family:var(--f-alt); font-weight:700; font-size:40px; line-height:50px; color:var(--ink) }
.csr__lede{ font-size:17px; line-height:1.5; color:var(--neutral-600); max-width:418px }

/* --------------------------------------------------------------------------
   OUR PEOPLE
   -------------------------------------------------------------------------- */
.people{
  position:relative; min-height:400px; margin-top:66px; overflow:hidden; background:#f3f4f6;
  display:flex; align-items:center;
}
.people__photo{
  position:absolute; top:0; right:0; left:auto;
  transform:none;
  width:min(62%,860px); height:100%; object-fit:cover; object-position:center 30%;
  /* dissolve into the page on every edge that meets it */
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 26%,#000 62%),
    linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 26%,#000 62%),
    linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
          mask-composite:intersect;
}
.people__wash{
  position:absolute; inset:0;
  background:linear-gradient(92deg,#f3f4f6 0%,#f3f4f6 26%,rgba(243,244,246,.55) 52%,rgba(243,244,246,0) 78%);
}
.people__inner{
  position:relative; z-index:2; width:100%;
  max-width:var(--page); margin:0 auto; padding:56px 52px;
  display:flex; align-items:center; gap:60px;
}
.people__badge{ width:168px; height:209px; margin-left:51px; flex:none; align-self:center }
.people__title{
  align-self:center;                        /* sits on the badge's centre line */
  margin:0;
  font-family:var(--f-display); font-weight:700;
  font-size:46px; line-height:1.28; color:var(--ink);
}

/* --------------------------------------------------------------------------
   FOOTER — the closing frame: the page opens on the dark matrix and ends on it
   -------------------------------------------------------------------------- */
.footer{
  position:relative;
  background:#05060a;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.footer__matrix{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 10%,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 10%,transparent 78%);
}
.footer__glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(37,99,235,.20) 0%,rgba(12,4,33,0) 70%);
}
.footer__inner{
  position:relative; z-index:2;
  max-width:var(--page); margin:0 auto;
  padding:96px 52px 0;
}

/* brand + contact */
.footer__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.footer__logo{
  width:208px; height:72px; object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.94;
}
.footer__contact{
  font-style:normal;
  display:flex; flex-direction:column; gap:13px; align-items:flex-start;
}
.footer__contact a{
  font-size:15px; line-height:1.4; color:rgba(255,255,255,.82);
  transition:color .25s var(--ease), transform .25s var(--ease);
  display:inline-block;
}
.footer__contact a:hover{ color:#fff; transform:translateX(5px) }

/* links */
.footer__cols{
  display:grid; grid-template-columns:repeat(5,1fr); gap:36px;
  padding:56px 0 60px;
}
.footer__col-title{
  font-family:var(--f-ui); font-weight:500;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.42);
  margin-bottom:22px;
}
.footer__col ul{ display:flex; flex-direction:column; gap:13px }
.footer__col a{
  font-size:15px; line-height:1.4; color:rgba(255,255,255,.82);
  transition:color .25s var(--ease), transform .25s var(--ease);
  display:inline-block;
}
.footer__col a:hover{ color:#fff; transform:translateX(5px) }

/* meta row */
.footer__meta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:30px 0 34px;
  border-top:1px solid rgba(255,255,255,.10);
}
.footer__copy{ font-size:13px; color:rgba(255,255,255,.42) }
.footer__social{ display:flex; gap:10px; align-items:center }
.footer__social a{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.footer__social img{ filter:brightness(0) invert(1); opacity:.75 }
.footer__social a:hover{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); transform:translateY(-3px);
}

/* the signature: the name, cropped by the edge of the page */
.footer__mark{
  position:relative; z-index:2;
  overflow:hidden;
  height:clamp(52px,9vw,132px);
}
.footer__mark span{
  display:block;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(88px,15.4vw,232px);
  line-height:.86;
  letter-spacing:.012em;
  text-align:center;
  white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.02) 78%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  user-select:none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* below the 1280 reference — scale the fixed-pixel blocks fluidly */
@media (max-width:1279px){
  .nav{ padding:14px 24px }
  .hero__title{ font-size:clamp(34px,5.6vw,72px); line-height:1.06 }
  .globe-sec__title{ font-size:clamp(30px,4.1vw,52px); line-height:1.35; margin-top:clamp(340px,42vw,544px) }
  .globe-sec{ height:auto; padding-bottom:80px }
  .globe-sec__stage{ width:100%; height:clamp(320px,52vw,660px) }
  .globe-sec__globe{ top:clamp(60px,12vw,155px); width:min(894px,86vw) }
  .globe-sec__fade{ top:auto; bottom:0; height:clamp(150px,24vw,260px) }
  .epic__inner{ padding:0 32px; padding-bottom:12vh }
  .certs__title,.milestones__title{ font-size:clamp(28px,3.3vw,40px); line-height:1.32 }
  .stat__num{ font-size:clamp(40px,4.8vw,60px) }
  .csr__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.41fr) minmax(0,1fr) }
  .people__title{ font-size:clamp(30px,3.7vw,46px); line-height:1.3 }
  .people__inner{ padding:0 32px; gap:32px }
  .people__badge{ margin-left:0; align-self:flex-start }
  .certs__row{ margin-top:64px }
}

@media (max-width:1023px){
  .certs__row{ grid-template-columns:repeat(3,1fr) }
  .cert{ height:auto; min-height:280px }
  .csr__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto }
  .csr__cell{ min-height:230px }
  .csr__cell--hero{ grid-column:1/-1 }
  .strengths__row{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .strength{ min-height:300px }
  .people{ height:auto; padding:56px 0 }
  .people__photo{ width:78%; opacity:.5 }
  .tl-card{ width:320px }
}

@media (max-width:767px){
  .nav{ padding:12px 20px }
  .nav__links,.nav__cta{ display:none }
  .nav__burger{ display:flex }
  .nav.is-open .nav__mobile{ display:flex }

  .hero{ min-height:600px }
  .hero__content{ width:calc(100% - 40px) }
  .hero__title{ font-size:clamp(30px,8.4vw,44px); line-height:1.16 }
  .hero__sub{ font-size:16px; line-height:26px }
  .hero__cta-wrap{ margin-top:32px; gap:10px }
  .btn-primary{ width:100%; max-width:280px }


  .globe-sec__globe{ top:40px; width:96vw }
  .globe-sec__title{ margin-top:clamp(300px,86vw,420px); font-size:clamp(26px,7.4vw,34px); line-height:1.32; padding:0 20px }

  .epic{ height:160vh }
  .epic__inner{ padding:0 20px; padding-bottom:14vh }
  .epic__title{ font-size:clamp(28px,7.6vw,40px) }
  .epic__index{ margin-bottom:14px; font-size:11px }

  .certs{ padding:56px 0 }
  .certs__title,.certs__sub{ padding:0 20px }
  .certs__row{
    display:flex; grid-template-columns:none;
    width:max-content; margin:56px 20px 0;
    gap:1px; background:var(--border);            /* the 1px gaps read as dividers */
    border:1px solid var(--border);
    overflow:visible;
  }
  .certs__scroll{
    display:block;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-left:20px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .certs__scroll::-webkit-scrollbar{ display:none }
  .cert{
    flex:0 0 76vw; min-height:0; scroll-snap-align:start;
    border:0; border-radius:0; background:#fff;
  }
  .cert__desc{ max-width:none }

  .epic__sub{ font-size:15px; margin-top:18px }

  /* one card at a time: card above, year and arrows below */
  .milestones{ padding:56px 0 40px }
  .milestones__head{ padding:0 20px }
  .timeline{ margin-top:32px; padding:0 20px }
  .timeline__rail{ display:none }
  .timeline__items{ display:block }
  .tl-item{ display:none; padding:0; cursor:default }
  .tl-item.is-active{ display:block }
  .tl-item__year,.tl-item__dot{ display:none }
  .tl-card{
    position:static; transform:none !important;
    opacity:1; visibility:visible; pointer-events:auto;
    width:auto; text-align:center; padding:30px 22px;
  }
  .tl-card__title{ font-size:18px }
  .timeline__nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:26px }

  .strengths{ min-height:0; padding:0 0 72px }
  .strengths__title{ padding:0 20px }
  .strengths__sky{ height:62vh }
  .strengths__title{ margin-top:11vh }
  .strengths__peak{ top:-6%; width:230vw }
  .strengths__row{
    display:flex; grid-template-columns:none;
    width:max-content; margin:30vh 20px 0;
    gap:1px; background:var(--border);
    border:1px solid var(--border);
    overflow:visible;
  }
  .strengths__scroll{
    display:block; width:100%;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-left:20px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .strengths__scroll::-webkit-scrollbar{ display:none }
  .strength{
    flex:0 0 74vw; min-height:0; scroll-snap-align:start;
    padding:24px 22px 26px; display:flex; flex-direction:column; gap:16px;
    border:0; border-radius:0; background:#fff;
  }
  .strength__icon{ width:56px; height:56px }
  .strength__name{ position:static; font-size:17px; transform:none !important }
  .strength__desc{ position:static; opacity:1; transform:none }

  .csr{ padding:56px 20px }
  .csr__grid{ grid-template-columns:1fr }
  .csr__cell--text{ padding:28px 22px }
  .csr__title{ font-size:30px; line-height:38px }
  .csr__lede{ font-size:16px }

  .people{ min-height:0; padding:64px 0 }
  .people__inner{ flex-direction:column; align-items:flex-start; gap:24px; padding:0 20px }
  .people__badge{ width:120px; height:150px }
  .people__title{ font-size:30px; line-height:1.25; align-self:flex-start }
  .people__badge{ margin-left:0 }

  .footer__inner{ padding:56px 20px 0 }
  .footer__top{ justify-content:center; gap:0; padding-bottom:30px }
  .footer__logo{ width:158px; height:54px; margin:0 auto }
  .footer__cols{ grid-template-columns:repeat(2,1fr); gap:30px 20px; padding:34px 0 30px }
  .footer__col-title{ margin-bottom:14px }
  .footer__col ul{ gap:10px }
  .footer__col a,.footer__contact a{ font-size:14px }
  .footer__meta{
    flex-direction:column; align-items:center; text-align:center;
    gap:20px; padding:24px 0 26px;
  }
  .footer__copy{ font-size:12px; order:2 }
  .footer__social{ order:1 }
  .footer__mark{ height:clamp(34px,11vw,64px) }
  .footer__mark span{ font-size:19vw }
}

/* no hover on touch: industry photography stays in colour */
@media (hover:none){
}


/* ==========================================================================
   US EDITION ADDITIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   NAV — Products dropdown
   -------------------------------------------------------------------------- */
.nav__item{ position:relative }
.nav__link.is-current{ font-weight:600; color:#fff }
.nav__drop{
  position:absolute; top:calc(100% + 14px); left:50%;
  width:264px; padding:8px;
  transform:translate(-50%,8px);
  background:rgba(12,8,32,.94);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.10); border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .25s;
}
.nav__drop.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
  transition:opacity .25s var(--ease), transform .3s var(--ease), visibility 0s;
}
.nav__drop a{
  display:flex; flex-direction:column; gap:2px;
  padding:11px 14px; border-radius:8px;
  transition:background .2s var(--ease);
}
.nav__drop a:hover,.nav__drop a:focus-visible{ background:rgba(255,255,255,.08) }
.nav__drop b{ font-weight:600; font-size:14px; color:#fff }
.nav__drop span{ font-size:12.5px; color:rgba(255,255,255,.58) }

/* --------------------------------------------------------------------------
   STATS — three cards that pin and stack
   -------------------------------------------------------------------------- */
.stack{ background:#fff; padding:112px 24px 40px }
.stack__inner{
  max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:64px;
  align-items:start;
}
.stack__intro{ position:sticky; top:calc(var(--nav-h) + 96px) }
.stack__title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(34px,4vw,48px); line-height:1.16; color:var(--h1);
  max-width:440px;
}
.stack__sub{
  margin-top:24px; max-width:320px;
  font-size:14px; line-height:24px; color:var(--ink-soft);
}
.stack__cards{ padding-bottom:120px }
.scard{
  --cover:0;
  position:sticky;
  top:calc(var(--nav-h) + 72px + var(--i) * 28px);
  height:330px; margin-bottom:64px;
  padding:30px 32px 32px;
  border-radius:26px;
  display:flex; flex-direction:column;
  transform:rotate(calc(var(--tilt) * (1 - var(--cover) * .75))) scale(calc(1 - var(--cover) * .05));
  transform-origin:50% 0;
  will-change:transform;
}
.scard:last-child{ margin-bottom:0 }
.scard__icon{
  align-self:flex-end;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
}
.scard__icon svg{ width:19px; height:19px }
.scard__num{
  margin-top:auto;
  font-family:var(--f-display); font-weight:700;
  font-size:76px; line-height:1; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.scard__num sup{ font-size:.42em; font-weight:500; vertical-align:top; position:relative; top:.12em; margin-left:2px }
.scard__label{
  margin-top:34px; max-width:290px;
  font-size:14px; line-height:22px;
}
.scard--white{
  background:#fff; color:#0b0b0f;
  border:1px solid #ececf2;
  box-shadow:0 24px 60px rgba(30,30,80,.10), 0 2px 6px rgba(30,30,80,.05);
}
.scard--white .scard__icon{ background:#0b0b0f; color:#fff }
.scard--white .scard__num sup{ color:var(--blue-600) }
.scard--white .scard__label{ color:#333 }
.scard--blue{
  background:linear-gradient(160deg,#4287f7 0%,#2563eb 55%,#1f4fd0 100%); color:#fff;
  box-shadow:0 26px 60px rgba(37,99,235,.35);
}
.scard--blue .scard__icon{ background:#fff; color:var(--blue-600) }
.scard--blue .scard__label{ color:rgba(255,255,255,.88) }
.scard--navy{
  background:linear-gradient(160deg,#2f3fa6 0%,#273996 50%,#1a2470 100%); color:#fff;
  box-shadow:0 26px 60px rgba(39,57,150,.4);
}
.scard--navy .scard__icon{ background:#fff; color:var(--primary) }
.scard--navy .scard__label{ color:rgba(255,255,255,.85) }

/* --------------------------------------------------------------------------
   PRODUCT SECTIONS — small additions to the pinned epics
   -------------------------------------------------------------------------- */
.epic__index{ text-transform:uppercase }
.epic__prod{
  font-family:var(--f-ui); font-size:12px; letter-spacing:.22em; font-weight:500;
  padding:5px 12px; border-radius:99px;
  color:rgba(200,220,255,.95);
  border:1px solid rgba(140,175,255,.4);
  background:rgba(60,100,220,.16);
}
.epic__inner--left .epic__index::after{ content:""; width:72px; height:1px; background:rgba(255,255,255,.35) }
.epic--cam .epic__scrim{
  background:
    linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,.05) 46%,rgba(0,0,0,.86) 100%),
    linear-gradient(94deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 62%);
}
.epic--store .epic__scrim{
  background:
    linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,.05) 46%,rgba(0,0,0,.84) 100%),
    linear-gradient(94deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 60%);
}
.epic--lane .epic__scrim{
  background:
    linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,.1) 46%,rgba(0,0,0,.86) 100%),
    radial-gradient(ellipse 72% 40% at 50% 84%,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 100%);
}
.epic__title{ max-width:960px }

/* --------------------------------------------------------------------------
   A SECURITY SYSTEM SHOULD DO MORE THAN WATCH
   -------------------------------------------------------------------------- */
.flow{
  position:relative; overflow:hidden;
  padding:104px 24px 112px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,rgba(46,60,190,.28) 0%,rgba(46,60,190,0) 70%),
    linear-gradient(180deg,#0f0c45 0%,#0a0630 55%,#07041f 100%);
  color:#fff; text-align:center;
}
.flow__head{ max-width:940px; margin:0 auto }
.flow__title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(32px,3.6vw,44px); line-height:1.3;
}
.flow__sub{
  margin:22px auto 0; max-width:900px;
  font-size:15.5px; line-height:1.65; color:rgba(255,255,255,.66);
}
/* --------------------------------------------------------------------------
   FOOTER — plain-text contact line
   -------------------------------------------------------------------------- */
.footer__contact span{ font-size:15px; line-height:1.4; color:rgba(255,255,255,.55) }

/* --------------------------------------------------------------------------
   Responsive — additions
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .stack__inner{ grid-template-columns:minmax(0,1fr) 380px; gap:40px }
}
@media (max-width:820px){
  .stack{ padding:88px 20px 24px }
  .stack__inner{ grid-template-columns:1fr; gap:36px }
  .stack__intro{ position:static }
  .scard{ top:calc(var(--nav-h) + 20px + var(--i) * 22px); height:300px }
  .scard__num{ font-size:64px }

}
@media (max-width:560px){
  .scard{ height:290px; padding:24px 24px 26px }
  .epic__prod{ font-size:11px; padding:4px 10px }
}


/* --------------------------------------------------------------------------
   CERTIFICATIONS — bento layout from the original site
   -------------------------------------------------------------------------- */
.cert{ position:relative; overflow:hidden }
.cert::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--blue-600);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.cert:hover::before{ transform:scaleX(1) }
.cert:hover{ box-shadow:0 14px 34px rgba(39,57,150,.10) }
.cert__txt{ display:flex; flex-direction:column }
@media (min-width:1024px){
  .certs__row{
    max-width:1170px; border:0;
    grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,285px); gap:12px;
  }
  .cert{
    height:auto; padding:30px 28px;
    border:1px solid var(--border);
    justify-content:space-between;
  }
  .cert:hover{ transform:none; background:#fafbff }
  .cert__mark{ height:auto }
  .cert__name{ margin-top:0; font-size:18px }
  .cert__desc{ max-width:none }
  .cert--cmmi{
    grid-row:1 / span 2; grid-column:1;
    background:linear-gradient(200deg,#eceffe 0%,#fff 46%);
  }
  .cert .cert__mark img.cert__mark--cmmi{ width:132px; height:86px }
  .cert--cmmi .cert__desc{ max-width:300px }
  .cert--wide{ flex-direction:row; align-items:center; justify-content:flex-start; gap:26px; padding:30px 40px }
  .cert--wide:nth-child(2){ grid-column:2 / span 2; grid-row:1 }
  .cert--wide:nth-child(5){ grid-column:3 / span 2; grid-row:2 }
  .cert--wide .cert__mark img{ width:80px; height:80px }
  .cert--wide .cert__desc{ max-width:420px }
  .cert:nth-child(3){ grid-column:4; grid-row:1 }
  .cert:nth-child(4){ grid-column:2; grid-row:2 }
  .cert:not(.cert--wide):not(.cert--cmmi) .cert__mark img{ width:80px; height:80px }
}

/* --------------------------------------------------------------------------
   MILESTONES — one card that glides between years
   -------------------------------------------------------------------------- */
.tl-pop{ display:none }
@media (min-width:768px){
  .tl-item .tl-card{ display:none }
  .tl-item{ cursor:pointer }
  .tl-pop{
    display:block; position:absolute; top:96px; left:0; z-index:5;
    width:400px; padding:30px 28px;
    background:#0d0626; border-radius:12px; color:#fff; text-align:center;
    transform:translate3d(var(--x,0),0,0);
    opacity:0;
    transition:transform .65s var(--ease), opacity .5s var(--ease);
    isolation:isolate;
  }
  .timeline.is-in .tl-pop{ opacity:1 }
  .tl-pop::before{
    content:""; position:absolute; inset:-2px; z-index:-2; border-radius:14px;
    background:linear-gradient(140deg,#ef8924 0%,#a855f7 55%,#2563eb 100%);
  }
  .tl-pop::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:12px; background:#0d0626 }
  .tl-pop__in{ transition:opacity .22s ease, transform .3s var(--ease) }
  .tl-pop.is-swap .tl-pop__in{ opacity:0; transform:translateY(8px) }
  .tl-pop .tl-card__body{ margin-top:16px; font-size:14px; line-height:23px; color:var(--neutral-200) }
}


/* --------------------------------------------------------------------------
   PRODUCT SECTIONS — split layout: text on one side, graphic on the other
   -------------------------------------------------------------------------- */
.epic__inner--l .epic__index::after,.epic__inner--r .epic__index::after{ content:""; width:56px; height:1px; background:rgba(255,255,255,.35) }
.epic__inner--side{
  max-width:none; margin:0;
  justify-content:center; align-items:flex-start; text-align:left;
  padding-top:var(--nav-h); padding-bottom:0;
}
.epic__inner--l{ padding-left:max(52px,6vw); padding-right:54vw }
.epic__inner--r{ padding-left:57vw; padding-right:max(52px,5vw) }
.epic__inner--side .epic__title{ font-size:clamp(32px,3.5vw,54px); line-height:1.14; max-width:none }
.epic__inner--side .epic__sub{ font-size:clamp(15px,1.25vw,18px); max-width:520px; margin-inline:0 }

.epic--cam .epic__scrim{
  background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.6) 100%),
    linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 46%);
}
.epic--store .epic__scrim{
  background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.6) 100%),
    linear-gradient(270deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 46%);
}
.epic--lane .epic__scrim{
  background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.6) 100%),
    linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 46%);
}

/* phones and narrow tablets: graphic on top, text underneath */
@media (max-width:900px){
  .epic__inner--l,.epic__inner--r{ padding:0 24px 9vh; justify-content:flex-end }
  .epic__inner--side .epic__title{ font-size:clamp(28px,7vw,40px) }
  .epic--cam .epic__scrim,.epic--store .epic__scrim,.epic--lane .epic__scrim{
    background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 40%,rgba(0,0,0,.85) 66%,rgba(0,0,0,.92) 100%);
  }
}


/* ==========================================================================
   ROUND 3 REFINEMENTS
   ========================================================================== */

/* nav + hero buttons, sized like the original site */
.nav__link{ font-size:15px }
.nav__cta{ padding:10px 24px; border-radius:10px; font-size:15px; line-height:22.5px; min-width:129px; color:#0b1028 }
.btn-primary{ min-height:52px; padding:14px 34px; border-radius:10px; font-size:16px; gap:10px }
.btn-primary img{ width:15px; height:15px }

/* stats — the original's type scale */
.stack__inner{ max-width:1120px; grid-template-columns:minmax(0,1fr) 470px }
.stack__title{ font-size:clamp(40px,4.3vw,62px); line-height:1.04; max-width:540px }
.stack__sub{ font-size:16px; line-height:1.62; max-width:400px; margin-top:28px }
.scard{ height:370px }
.scard__num{ font-size:clamp(72px,7.2vw,103px); line-height:.92; font-weight:600 }
.scard__label{ font-size:16px; line-height:24px; max-width:360px; margin-top:28px }

/* product sections — one graphic size, text sliding over its near edge */
.epic__inner--l{ padding-right:46vw }
.epic__inner--r{ padding-left:54vw }
.epic__inner--side .epic__title{ font-size:clamp(38px,4.5vw,68px); line-height:1.1 }
.epic__inner--side .epic__sub{ font-size:clamp(15px,1.3vw,19px); max-width:560px }

/* certifications — compact enough to sit in one screen */
.certs{ padding:56px 24px 64px }
.certs__sub{ margin-top:16px }
.certs__row{ margin-top:40px }
@media (min-width:1024px){
  .certs__row{ grid-template-rows:repeat(2,206px); gap:12px }
  .cert{ padding:22px 24px }
  .cert--wide{ padding:22px 32px; gap:22px }
  .cert__name{ font-size:17px }
  .cert__desc{ font-size:13.5px; line-height:1.5 }
  .cert .cert__mark img.cert__mark--cmmi{ width:110px; height:72px }
  .cert--wide .cert__mark img{ width:62px; height:62px }
  .cert:not(.cert--wide):not(.cert--cmmi) .cert__mark img{ width:52px; height:52px }
}

/* strengths — no grey backing showing through before the cards reveal */
.strengths__row{ background:none; border:0; gap:0; padding-left:1px }
.strength{ border:1px solid var(--border); margin-left:-1px; background:#fff }

/* built on values — the centre panel loses its heavy frame */
.csr__cell--hero{
  background:#fff;
  border:0;
  border-bottom:1px solid var(--border);
}


/* --------------------------------------------------------------------------
   A SECURITY SYSTEM SHOULD DO MORE THAN WATCH — minimal three-column flow
   -------------------------------------------------------------------------- */
.flow__labels{
  max-width:1120px; margin:72px auto 18px;
  display:grid; grid-template-columns:230px 70px minmax(0,1fr) 70px 230px;
  font-family:var(--f-ui); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.4); text-align:left;
}
.flow__labels span:nth-child(1){ grid-column:1 }
.flow__labels span:nth-child(2){ grid-column:3 }
.flow__labels span:nth-child(3){ grid-column:5 }

.flow__diagram{
  max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:230px 70px minmax(0,1fr) 70px 230px;
  align-items:center; text-align:left;
}
.flow__node{
  padding:26px 22px;
  background:rgba(38,44,140,.28);
  border:1px solid rgba(110,140,255,.35);
  box-shadow:0 0 0 1px rgba(20,20,80,.4), 0 0 44px rgba(64,84,255,.18), inset 0 0 30px rgba(64,84,255,.10);
  text-align:center;
}
.flow__node h3{ font-weight:500; font-size:17px; line-height:1.35 }
.flow__node p{
  margin-top:12px;
  font-family:var(--f-ui); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.flow__live{
  margin-top:14px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-ui); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.flow__live::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#5ff0d0; box-shadow:0 0 10px #5ff0d0;
  animation:livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse{ 50%{ opacity:.35; transform:scale(.8) } }

.flow__wire{ width:100%; height:256px; display:block; overflow:visible }
.flow__wire .w{
  fill:none; stroke:rgba(150,180,255,.95); stroke-width:2; vector-effect:non-scaling-stroke;
  stroke-dasharray:3 9; animation:wireRun 1.6s linear infinite;
}
.flow__wire .w--warm{ stroke:rgba(255,170,80,.85) }
@keyframes wireRun{ to{ stroke-dashoffset:-24 } }

.flow__layers{ display:flex; flex-direction:column; gap:14px }
.flow__layer{
  position:relative; height:76px;
  display:grid; grid-template-columns:38px 150px minmax(0,1fr); align-items:center; gap:0 8px;
  padding:0 24px 0 18px;
  background:rgba(38,44,140,.22);
  border:1px solid rgba(110,140,255,.4);
  box-shadow:0 0 34px rgba(64,84,255,.16), inset 0 0 24px rgba(64,84,255,.08);
  animation:layerGlow 6s ease-in-out infinite;
  animation-delay:calc(var(--n) * 2s);
}
.flow__layer::before,.flow__layer::after{
  content:""; position:absolute; top:50%; width:8px; height:22px; margin-top:-11px;
  border:1px solid rgba(140,165,255,.6);
}
.flow__layer::before{ left:-1px; border-left:0; border-radius:0 6px 6px 0 }
.flow__layer::after{ right:-1px; border-right:0; border-radius:6px 0 0 6px }
@keyframes layerGlow{
  0%,100%{ border-color:rgba(110,140,255,.4); box-shadow:0 0 34px rgba(64,84,255,.16), inset 0 0 24px rgba(64,84,255,.08) }
  16%,32%{ border-color:rgba(160,185,255,.95); box-shadow:0 0 54px rgba(84,110,255,.5), inset 0 0 34px rgba(84,110,255,.22) }
  50%{ border-color:rgba(110,140,255,.4); box-shadow:0 0 34px rgba(64,84,255,.16), inset 0 0 24px rgba(64,84,255,.08) }
}
.flow__no{ font-family:var(--f-ui); font-size:10px; letter-spacing:.2em; color:#5b86ff }
.flow__name{ font-family:var(--f-display); font-weight:700; font-size:22px; line-height:1.2; padding-left:6px }
.flow__desc{ font-size:13px; line-height:1.55; color:rgba(255,255,255,.66) }
.flow__desc b{ color:#fff; font-weight:600 }

@media (prefers-reduced-motion:reduce){
  .flow__wire .w,.flow__layer,.flow__live::before{ animation:none }
}
@media (max-width:1024px){
  .flow__labels,.flow__diagram{ grid-template-columns:170px 40px minmax(0,1fr) 40px 170px }
  .flow__layer{ grid-template-columns:32px 120px minmax(0,1fr); padding:0 16px 0 14px }
  .flow__name{ font-size:19px }
  .flow__desc{ font-size:12px }
}
@media (max-width:860px){
  .flow{ padding:80px 20px 88px }
  .flow__labels{ display:none }
  .flow__diagram{ grid-template-columns:1fr; gap:14px; margin-top:44px }
  .flow__wire{ display:none }
  .flow__node--in,.flow__node--out{ padding:20px }
  .flow__layer{ height:auto; min-height:76px; padding:16px 18px; grid-template-columns:32px minmax(0,1fr); row-gap:4px }
  .flow__desc{ grid-column:2 }
  .flow__name{ padding-left:0 }
}

/* StorePulse headline: exactly three lines on desktop */
@media (min-width:901px){
  .epic--store .epic__inner--side .epic__title{ white-space:nowrap; font-size:clamp(30px,3.9vw,60px) }
}

/* certifications — one full screen, content centred with room above and below */
@media (min-width:1024px){
  .certs{
    min-height:100vh; min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    padding:clamp(72px,12vh,130px) 24px;
  }
  .certs__row{ margin-top:clamp(28px,5vh,48px); grid-template-rows:repeat(2,clamp(176px,23vh,206px)) }
}

/* certifications — taller cards */
@media (min-width:1024px){
  .certs{ padding:clamp(56px,9vh,110px) 24px }
  .certs__row{ grid-template-rows:repeat(2,clamp(196px,27vh,244px)) }
  .cert{ padding:28px 28px }
  .cert--wide{ padding:28px 40px }
  .cert:not(.cert--wide):not(.cert--cmmi) .cert__mark img{ width:60px; height:60px }
  .cert--wide .cert__mark img{ width:72px; height:72px }
}

@media (min-width:1024px) and (max-height:800px){
  .cert{ padding:20px 24px }
  .cert--wide{ padding:20px 32px }
  .cert:not(.cert--wide):not(.cert--cmmi) .cert__mark img{ width:44px; height:44px }
  .cert--wide .cert__mark img{ width:60px; height:60px }
  .cert .cert__mark img.cert__mark--cmmi{ width:96px; height:63px }
  .cert__desc{ font-size:13px }
}


/* --------------------------------------------------------------------------
   EVENT STRIP — pinned above the nav
   -------------------------------------------------------------------------- */
.nav{ transition:top .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease) }
.promo{
  position:fixed; top:0; left:0; right:0; z-index:120;
  height:var(--bar-h);
  background:linear-gradient(90deg,#1b2a9e 0%,#2563eb 50%,#1b2a9e 100%);
  color:#fff; overflow:hidden;
  transition:height .35s var(--ease);
}
.promo__inner{
  height:100%; padding:0 24px;
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.promo__badge{
  flex:none; padding:3px 10px; border-radius:99px;
  font-family:var(--f-ui); font-size:11px; font-weight:700; letter-spacing:.14em;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
}
.promo__msg{ font-size:14px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.promo__msg a{ font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.55) }
.promo__msg a:hover{ text-decoration-color:#fff }
.promo__cta{
  flex:none; font-size:14px; font-weight:700; line-height:1.3; color:#fff;
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px;
  text-decoration-color:rgba(255,255,255,.55);
  transition:text-decoration-color .25s var(--ease);
}
.promo__cta:hover{ text-decoration-color:#fff }
.promo__cta span{ display:inline-block; transition:transform .25s var(--ease) }
.promo__cta:hover span{ transform:translateX(3px) }
@media (max-width:900px){
  .promo__inner{ padding:0 16px; gap:10px; justify-content:flex-start }
  .promo__long{ display:none }
  .promo__msg{ font-size:13px }
}
@media (max-width:520px){
  :root{ --bar-h:46px; --nav-h:113px }
    .promo__badge{ display:none }
  .promo__msg{ white-space:normal; font-size:12.5px; line-height:1.25 }
  .promo__cta{ font-size:12.5px }
}

/* Products link — breathing room between label and chevron */
.nav__link--menu{ gap:8px }
.nav__chev{ width:13px; height:8px; flex:none; margin-top:1px }


/* ==========================================================================
   PHONE — restores the original site's small-screen layouts. This block sits
   last so it wins over the desktop refinements above.
   ========================================================================== */
@media (max-width:820px){
  /* stats: static intro, then three pinned, stacking cards — as on the original */
  .stack{ padding:64px 20px 72px }
  .stack__inner{ display:block; grid-template-columns:none; max-width:none; gap:0 }
  .stack__intro{ position:static }
  .stack__title{ font-size:38px; line-height:1.04; max-width:none }
  .stack__sub{ font-size:16px; line-height:1.62; max-width:none; margin-top:20px }
  .stack__cards{ padding-bottom:0; margin-top:36px }
  .scard{
    top:calc(var(--nav-h) + 12px + var(--i) * 34px);
    height:371px; padding:24px 24px 26px; border-radius:22px; margin-bottom:100px;
  }
  .scard:last-child{ margin-bottom:0 }
  .scard__num{ font-size:66px; line-height:.92 }
  .scard__label{ font-size:15px; line-height:1.5; max-width:none; margin-top:24px }
}

@media (max-width:900px){
  /* product sections: graphic above, text below */
  .epic__inner--l,.epic__inner--r,.epic__inner--side{
    padding:0 20px 12vh; justify-content:flex-end; align-items:flex-start; text-align:left;
  }
  .epic__inner--side .epic__title{ font-size:clamp(28px,7.6vw,40px); line-height:1.14; white-space:normal }
  .epic--store .epic__inner--side .epic__title{ white-space:normal }
  .epic__inner--side .epic__sub{ font-size:15px; margin-top:18px; max-width:none }
}

@media (max-width:767px){
  /* "Coast to coast…" holds to two lines */
  .globe-sec__title{ font-size:min(6.1vw,34px); line-height:1.4; white-space:nowrap; padding:0 12px }

  /* certifications: swipeable cards with a plain 1px frame, like the original */
  .certs{ padding:56px 0 }
  .certs__row{ background:none; border:0; gap:0; margin:48px 20px 0; padding-left:1px }
  .cert{
    flex:0 0 76vw; height:auto; min-height:264px; padding:24px;
    border:1px solid var(--border); margin-left:-1px; background:#fff;
    transform:none !important; box-shadow:none !important;
  }
  .cert::before{ display:none }
  .cert__mark{ height:96px }
  .cert__name{ margin-top:36px }

  /* strengths: heading clear above the mountain, cards close beneath it */
  .strengths__title{ z-index:6; margin-top:9vh }
  .strengths__sky{ height:min(74vh,640px) }
  .strengths__peak{ top:15vh; width:200vw }
  .strengths__row{ margin-top:27vh }
}

@media (hover:none){
  .cert:hover{ transform:none; box-shadow:none }
}


/* --------------------------------------------------------------------------
   MOBILE DRAWER — full-height panel, as on the original site
   -------------------------------------------------------------------------- */
.drawer{ display:none }
@media (max-width:767px){
  .nav__mobile{ display:none !important }
  .drawer{
    display:flex; flex-direction:column;
    position:fixed; inset:0; z-index:300;
    background:#0b0c1e; color:#fff;
    transform:translateX(100%); visibility:hidden;
    transition:transform .45s var(--ease), visibility 0s .45s;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .drawer.is-open{ transform:none; visibility:visible; transition:transform .45s var(--ease), visibility 0s }
  .drawer__bar{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.09); flex:none;
  }
  .drawer__logo img{ width:113px; height:39px }
  .drawer__close{
    width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
    background:rgba(255,255,255,.08); color:#fff;
  }
  .drawer__close svg{ width:20px; height:20px }
  .drawer__nav{ padding:22px 20px 0; display:flex; flex-direction:column }
  .drawer__link{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    padding:20px 0; font-size:20px; line-height:1.3; text-align:left;
    color:rgba(255,255,255,.72); border-bottom:1px solid rgba(255,255,255,.09);
    transition:color .25s var(--ease);
  }
  .drawer__link:hover,.drawer__link:active{ color:#fff }
  .drawer__link.is-current{ color:#fff; font-weight:700 }
  .drawer__chev{ width:18px; height:18px; flex:none; transition:transform .3s var(--ease) }
  .drawer__toggle[aria-expanded="true"]{ color:#fff }
  .drawer__toggle[aria-expanded="true"] .drawer__chev{ transform:rotate(180deg) }
  .drawer__sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease) }
  .drawer__sub.is-open{ grid-template-rows:1fr }
  .drawer__sub-in{ overflow:hidden; display:flex; flex-direction:column }
  .drawer__sub a{
    padding:15px 0 15px 16px; font-size:17px; color:rgba(255,255,255,.62);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .drawer__sub a:hover{ color:#fff }
  .drawer__cta{
    margin:auto 20px 28px; padding:18px; flex:none;
    background:#fff; color:#0b0c1e; border-radius:14px;
    text-align:center; font-weight:600; font-size:18px;
  }
  .drawer__nav{ margin-bottom:28px }
  html.drawer-open,html.drawer-open body{ overflow:hidden }
}
@media (prefers-reduced-motion:reduce){
  .drawer,.drawer__sub,.drawer__chev{ transition:none }
}


/* PHONE — button sizes exactly as on the original site */
@media (max-width:767px){
  .btn-primary{ width:100%; max-width:280px; min-height:40px; padding:9.5px 24px; border-radius:8px; font-size:14px; gap:8px }
  .btn-primary img{ width:13.25px; height:13.25px }
  .drawer__bar,.drawer__nav{ padding-left:24px; padding-right:24px }
  .drawer__cta{ margin:auto 24px 28px; padding:15px 24px; border-radius:10px; font-size:16px }
}

/* hamburger: rounded dark tile with three bars, as on the original */
.nav__burger{
  width:40px; height:40px; padding:0; border-radius:10px;
  align-items:center; justify-content:center; gap:3px;
  background:rgba(255,255,255,.10);
  transition:background .25s var(--ease);
}
.nav__burger:hover,.nav__burger:active{ background:rgba(255,255,255,.16) }
.nav__burger span{ width:20px; height:2px; background:#fff; border-radius:2px }


/* --------------------------------------------------------------------------
   FAQ — centred accordion
   -------------------------------------------------------------------------- */
.faq{ padding:96px 24px 40px; background:#fff; text-align:center }
.faq__inner{ max-width:820px; margin:0 auto }
.faq__title{ font-family:var(--f-display); font-weight:700; font-size:clamp(30px,3.6vw,44px); line-height:1.2; color:var(--ink) }
.faq__sub{ margin:16px auto 0; max-width:560px; font-size:16px; line-height:1.6; color:var(--neutral-600) }
.faq__list{ margin-top:48px; text-align:left; border-top:1px solid var(--border) }
.faq__item{ border-bottom:1px solid var(--border) }
.faq__item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:24px 48px 24px 4px;
  font-family:var(--f-display); font-weight:600; font-size:20px; line-height:1.35; color:var(--ink);
  transition:color .25s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary:hover{ color:var(--blue-700) }
.faq__item summary::before,.faq__item summary::after{
  content:""; position:absolute; right:10px; top:50%; width:16px; height:2px; margin-top:-1px;
  background:currentColor; border-radius:2px; transition:transform .35s var(--ease);
}
.faq__item summary::after{ transform:rotate(90deg) }
.faq__item[open] summary::after{ transform:rotate(0) }
.faq__item[open] summary{ color:var(--blue-700) }
.faq__a{ padding:0 48px 26px 4px; animation:faqIn .4s var(--ease) }
.faq__a p{ font-size:16px; line-height:1.7; color:var(--neutral-600) }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px) } }
@media (prefers-reduced-motion:reduce){ .faq__a{ animation:none } }


/* --------------------------------------------------------------------------
   CTA BANNER — full-width, dark: a half globe with cameras beaming onto it
   -------------------------------------------------------------------------- */
.ctab{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(100svh,860px); padding:clamp(96px,14vh,150px) 24px 0;
  display:flex; justify-content:center; text-align:center;
  background:
    radial-gradient(ellipse 60% 46% at 50% 0%,rgba(66,84,255,.30) 0%,rgba(66,84,255,0) 70%),
    linear-gradient(180deg,#0c0421 0%,#0a0630 58%,#07041f 100%);
}
.ctab__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none }
.ctab__inner{ position:relative; max-width:980px; padding-bottom:40px }
.ctab__title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(38px,5.6vw,84px); line-height:1.06; letter-spacing:-.01em; color:#fff;
  white-space:nowrap; text-shadow:0 6px 50px rgba(6,4,32,.7);
}
.ctab__words{ display:grid; justify-items:center; margin-top:.02em }
.ctab__word{
  grid-area:1/1; opacity:0; transform:translateY(.32em); filter:blur(10px);
  background:linear-gradient(90deg,#8fb0ff,#5c8dff 55%,#9fa9ff); -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.ctab__word.is-on{ opacity:1; transform:none; filter:none }
.ctab__word.is-out{ transform:translateY(-.32em) }
.ctab__sub{
  margin:26px auto 0; max-width:600px;
  font-size:clamp(16px,1.4vw,19px); line-height:1.6; color:rgba(255,255,255,.74);
  text-shadow:0 2px 24px rgba(6,4,32,.8);
}
.ctab .btn-primary{ margin-top:34px }
@media (prefers-reduced-motion:reduce){ .ctab__word{ transition:none } }
@media (max-width:767px){
  .ctab{ padding:84px 20px 0; min-height:min(100svh,760px) }
  .ctab__title{ font-size:9.2vw }
  .ctab__sub{ margin-top:20px }
  .ctab .btn-primary{ margin-top:26px }
}


/* banner: copy centred over the globe; paragraph on two lines */
.ctab{ align-items:center; padding:clamp(110px,16vh,160px) 24px clamp(90px,12vh,130px) }
.ctab__inner{ padding-bottom:0 }
.ctab__sub{ max-width:790px; font-size:clamp(16px,1.35vw,19px) }
.ctab::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 52% 44% at 50% 50%,rgba(7,4,31,.62),rgba(7,4,31,0) 100%) }
@media (max-width:767px){ .ctab{ padding:96px 20px 90px } .ctab__sub{ max-width:none } }


/* banner: the globe image is the backdrop, copy centred over it */
.ctab{ background:#060a22; min-height:min(100svh,880px) }
.ctab::after{ display:none }
.ctab__bg{
  position:absolute; inset:0; width:100%; height:100%; z-index:-2;
  object-fit:cover; object-position:50% 88%;
}
.ctab__shade{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 58% 50% at 50% 48%,rgba(5,8,30,.58),rgba(5,8,30,0) 100%),
    linear-gradient(180deg,rgba(6,4,33,.55) 0%,rgba(6,4,33,.10) 30%,rgba(6,4,33,.18) 70%,rgba(6,4,33,.6) 100%);
}
@media (max-width:767px){ .ctab__bg{ object-position:50% 100% } }

/* banner: shorter */
.ctab{ min-height:0; padding:clamp(72px,10vh,104px) 24px clamp(64px,9vh,92px) }
.ctab__bg{ object-position:50% 70% }
@media (max-width:767px){ .ctab{ padding:64px 20px 60px } }

/* banner: control-room photo, darkened so the centred copy stays legible */
.ctab__bg{ object-position:50% 40% }
.ctab__shade{
  background:
    radial-gradient(ellipse 62% 58% at 50% 50%,rgba(5,8,26,.72),rgba(5,8,26,.25) 100%),
    linear-gradient(180deg,rgba(6,4,33,.55),rgba(6,4,33,.45));
}


/* banner: the canvas scene replaces the photo */
.ctab{ background:linear-gradient(180deg,#0c0421 0%,#0a0630 60%,#07041f 100%) }
canvas.ctab__bg{ object-fit:fill }
.ctab__shade{
  background:
    radial-gradient(ellipse 50% 54% at 50% 50%,rgba(7,4,31,.74),rgba(7,4,31,.2) 100%),
    linear-gradient(180deg,rgba(7,4,31,.45),rgba(7,4,31,.1) 35%,rgba(7,4,31,.1) 70%,rgba(7,4,31,.55));
}

.ctab__shade{
  background:
    radial-gradient(ellipse 36% 56% at 40% 50%,rgba(7,4,31,.7),rgba(7,4,31,0) 100%),
    linear-gradient(180deg,rgba(7,4,31,.4),rgba(7,4,31,0) 30%,rgba(7,4,31,0) 70%,rgba(7,4,31,.5));
}

/* banner: street-scene photo, darkened for the centred copy */
.ctab__bg{ object-fit:cover; object-position:50% 55% }
.ctab__shade{
  background:
    radial-gradient(ellipse 58% 60% at 50% 50%,rgba(5,8,26,.78),rgba(5,8,26,.3) 100%),
    linear-gradient(180deg,rgba(7,4,31,.55),rgba(7,4,31,.35) 50%,rgba(7,4,31,.6));
}

/* banner photo: a touch of contrast, plus fine grain, so the upscaled image reads crisper */
.ctab__bg{ filter:contrast(1.12) saturate(1.1) brightness(.95) }
.ctab::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* banner: minimal canvas scene (globe bottom-left, camera top-right) on the site's navy */
.ctab{ background:radial-gradient(ellipse 60% 46% at 50% 0%,rgba(66,84,255,.26) 0%,rgba(66,84,255,0) 70%),linear-gradient(180deg,#0c0421 0%,#0a0630 58%,#07041f 100%) }
.ctab::before{ display:none }
.ctab__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; filter:none }

/* changing word in plain white */
.ctab__word{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#fff }

/* ==========================================================================
   PRODUCT SECTIONS — feature bullets (CamPulse, StorePulse, Drive-Thru)
   A quiet list under the sub line: small type, muted colour, a thin rule
   above and a small blue marker per point. The column is tightened so the
   title, sub line, bullets and button always fit the pinned screen.
   ========================================================================== */
.epic__bullets{
  margin:34px 0 0; padding:30px 0 0; list-style:none;
  max-width:520px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-direction:column; gap:20px;
}
.epic__bullets li{
  position:relative; padding-left:20px;
  font-family:var(--f-body); font-size:14px; line-height:1.7;
  color:rgba(255,255,255,.64);
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.epic__bullets li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:2px;
  background:#5b8cff; box-shadow:0 0 0 3px rgba(91,140,255,.18);
}
.epic__bullets b{ color:#fff; font-weight:600 }

/* with the bullets in place the column carries more, so the type steps down */
.epic__inner--side .epic__title{ font-size:clamp(34px,3.7vw,56px); line-height:1.1 }
.epic__inner--side .epic__sub{ margin-top:26px; font-size:clamp(15px,1.15vw,17px); line-height:1.7; max-width:540px }
.epic__inner--side .btn-primary{ margin-top:42px !important }
.epic__inner--side .epic__index{ margin-bottom:28px }
@media (min-width:901px){
  .epic--store .epic__inner--side .epic__title{ white-space:normal; max-width:13em; font-size:clamp(34px,3.7vw,56px) }
}

/* shorter laptop screens: keep everything, just tighter */
@media (min-width:901px) and (max-height:820px){
  .epic__inner--side{ padding-top:calc(var(--nav-h) - 20px) }
  .epic__inner--side .epic__index{ margin-bottom:22px }
  .epic__inner--side .epic__title{ font-size:clamp(30px,3.2vw,46px) }
  .epic--store .epic__inner--side .epic__title{ font-size:clamp(30px,3.2vw,46px) }
  .epic__inner--side .epic__sub{ margin-top:20px; line-height:1.65; font-size:15px }
  .epic__bullets{ margin-top:24px; padding-top:20px; gap:13px }
  .epic__bullets li{ font-size:13px; line-height:1.6 }
  .epic__inner--side .btn-primary{ margin-top:30px !important; min-height:46px; padding:11px 28px }
}
@media (min-width:901px) and (max-height:680px){
  .epic__inner--side .epic__title{ font-size:clamp(26px,2.7vw,38px) }
  .epic--store .epic__inner--side .epic__title{ font-size:clamp(26px,2.7vw,38px) }
  .epic__inner--side .epic__sub{ font-size:14px; line-height:1.5 }
  .epic__bullets{ gap:10px }
  .epic__bullets li{ font-size:12.5px; line-height:1.45 }
}
/* narrow laptops (901–1180px) that are also short: the side column wraps more, so it gives back a little */
@media (min-width:901px) and (max-width:1180px) and (max-height:820px){
  .epic__inner--side .epic__title,.epic--store .epic__inner--side .epic__title{ font-size:clamp(26px,2.9vw,34px) }
  .epic__inner--side .epic__index{ margin-bottom:16px }
  .epic__inner--side .epic__sub{ margin-top:16px; font-size:14px; line-height:1.6 }
  .epic__bullets{ margin-top:18px; padding-top:16px; gap:10px }
  .epic__bullets li{ font-size:12.5px; line-height:1.55 }
  .epic__inner--side .btn-primary{ margin-top:24px !important }
}

/* phones and portrait tablets: the section stops pinning. Below 900px the
   scenes (app.js) draw their graphic in the top ~55% of a one-screen canvas,
   so the canvas keeps that one-screen box at the top and the copy flows in
   below the graphic instead of being squeezed over it. The canvas still
   scales with scroll progress (--ep), it just isn't held in place. */
@media (max-width:900px){
  .epic{ height:auto }
  .epic__sticky{ position:relative; top:auto; height:auto; min-height:100vh; min-height:100svh }
  .epic__media,.epic__scrim{ inset:0 0 auto 0; height:100vh; height:100svh }
  .epic__inner,.epic__inner--l,.epic__inner--r,.epic__inner--side{
    position:relative; inset:auto;
    justify-content:flex-start;
    padding:58vh 20px 72px; padding-top:58svh;
  }
  .epic__inner--side .epic__title{ font-size:clamp(26px,7vw,36px) }
  .epic__inner--side .epic__sub{ margin-top:18px; font-size:15px; line-height:1.65 }
  .epic__bullets{ margin-top:24px; padding-top:20px; gap:14px; max-width:none }
  .epic__bullets li{ font-size:13.5px; line-height:1.6; padding-left:18px }
  .epic__bullets li::before{ width:6px; height:6px }
  .epic__inner--side .btn-primary{ margin-top:30px !important; min-height:48px; padding:12px 26px; align-self:stretch; justify-content:center }
  .epic__inner--side .epic__index{ margin-bottom:18px }
}
/* phones held sideways: the scene fills the short screen, so the copy starts after it */
@media (max-width:900px) and (orientation:landscape){
  .epic__inner,.epic__inner--l,.epic__inner--r,.epic__inner--side{ padding-top:100vh; padding-top:100svh }
}

/* globe section sub line on phones: side margins and a little air under the headline */
@media (max-width:767px){
  .globe-sec__sub{ padding:0 20px; margin:14px auto 0; max-width:520px; font-size:15px; line-height:1.6; text-align:center }
}

/* sections reached by links (/#milestones etc.) stop below the fixed promo bar + nav, not behind it */
#milestones,#strengths,#people{ scroll-margin-top:var(--nav-h) }