/* ============================================================
   AEGENT TECHNOLOGIES — cinematic scroll site
   ============================================================ */
:root{
  --bg:#05080a;
  --bg2:#0a0e12;
  --panel:#0d1318;
  --ink:#eef3f5;
  --muted:#9aa6b2;
  --faint:#5d6975;
  --teal:#34c6d4;     /* primary accent — bridges brand blue + footage teal */
  --teal-deep:#1c8fa0;
  --amber:#e8a64a;    /* warm secondary from the film grade */
  --navy:#103D66;     /* brand navy — deep surfaces */
  --line:rgba(255,255,255,.09);
}
*{margin:0;padding:0;box-sizing:border-box;}
button,input,select,textarea{font-family:inherit;}
html{scrollbar-width:none;scroll-behavior:auto;}
html::-webkit-scrollbar{display:none;}
body{
  background:var(--bg);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand-word,.stat-num,.cat-title,.bs-head{font-family:"Space Grotesk","Inter",sans-serif;}
p,li{text-wrap:pretty;}  /* no one-word last lines (Marc, 1 Oct: "it up." alone on the CTA) */
h1,h2,h3{text-wrap:balance;}
.gear-card p,.hero-lede,.bs-foot{text-wrap:balance;}
.nw{white-space:nowrap;}
a[href^="tel:"]{white-space:nowrap;}  /* "(334) 245-8378" never splits */
.accent{color:var(--teal);}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 38px;
  background:linear-gradient(180deg,rgba(5,8,10,.85),rgba(5,8,10,0));
  backdrop-filter:blur(6px);
  transition:background .3s,padding .3s;
}
.nav.scrolled{background:rgba(5,8,10,.92);padding:12px 38px;border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);}
.brand-logo{height:36px;width:auto;display:block;}
.nav.scrolled .brand-logo{height:32px;transition:height .3s;}
.brand-mark{
  width:26px;height:26px;border-radius:6px;
  background:conic-gradient(from 220deg,var(--teal),var(--teal-deep),var(--amber),var(--teal));
  box-shadow:0 0 18px rgba(52,198,212,.5);
  position:relative;
}
.brand-mark::after{content:"";position:absolute;inset:7px;border-radius:3px;background:var(--bg);}
.brand-word{font-weight:700;font-size:16px;letter-spacing:.16em;line-height:1;display:flex;flex-direction:column;}
.brand-sub{font-size:8.5px;letter-spacing:.42em;color:var(--teal);font-weight:600;margin-top:3px;}
.nav-links{display:flex;gap:30px;}
.nav-links a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.04em;transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{
  color:var(--ink);text-decoration:none;font-size:13px;font-weight:600;
  padding:9px 18px;border:1px solid var(--teal);border-radius:30px;
  transition:background .25s,color .25s;
}
.nav-cta:hover{background:var(--teal);color:#04181b;}
.nav-cta-m{display:none;}  /* mobile-only CTA inside the dropdown; shown via media query */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:0 11px;background:rgba(5,8,10,.4);border:1px solid var(--line);border-radius:10px;cursor:pointer;}
.nav-burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s;}
.nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.open .nav-burger span:nth-child(2){opacity:0;}
.nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- CINEMATIC SCRUB SECTIONS ---------- */
.cine{position:relative;height:320vh;}
/* Home film (S4, 3 Oct): each act 2.4 screens, phones 2.0 (was 3.2 / 2.4). Every frame still plays; each flick of the
   wheel just moves it further. Scoped to the home acts, so Connectivity's #mesh film keeps its length. */
#hero.cine,#operate.cine,#own.cine{height:240vh;}
@media (max-width:880px){#hero.cine,#operate.cine,#own.cine{height:200vh;}}
.cine .sticky{
  position:sticky;top:0;height:100vh;width:100%;
  overflow:hidden;background:var(--bg);
}
.cine canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 40%,transparent 42%,rgba(2,4,6,.72) 100%),
    linear-gradient(90deg,rgba(2,4,6,.78) 0%,rgba(2,4,6,.15) 45%,transparent 70%),
    linear-gradient(180deg,rgba(2,4,6,.55) 0%,transparent 28%,transparent 68%,rgba(2,4,6,.78) 100%);
}
#operate .grade,#mesh .grade{
  background:
    radial-gradient(130% 100% at 50% 50%,transparent 38%,rgba(2,4,6,.78) 100%),
    linear-gradient(180deg,rgba(2,4,6,.72) 0%,transparent 38%,transparent 62%,rgba(2,4,6,.82) 100%);
}
#own .grade{
  background:
    radial-gradient(130% 100% at 50% 45%,transparent 40%,rgba(2,4,6,.78) 100%),
    linear-gradient(180deg,rgba(2,4,6,.5) 0%,transparent 32%,transparent 50%,rgba(2,4,6,.9) 100%);
}

/* ---------- OVERLAY COPY ---------- */
.overlay{position:absolute;z-index:10;padding:0 6vw;max-width:1320px;left:50%;transform:translateX(-50%);width:100%;}
.overlay-left{top:50%;transform:translate(-50%,-50%);text-align:left;}
.overlay-center{top:50%;transform:translate(-50%,-50%);text-align:center;}
.overlay-bottom{bottom:14vh;transform:translateX(-50%);text-align:center;}
#operate .overlay-center,#mesh .overlay-center{top:42%;}
.eyebrow{
  display:inline-block;
  font-size:12px;letter-spacing:.4em;color:var(--teal);font-weight:600;
  margin-bottom:22px;will-change:opacity,transform;
  padding:7px 14px;border-radius:6px;
  background:rgba(5,8,10,.5);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  text-shadow:0 1px 10px rgba(0,0,0,.85);
}
.overlay h1,.overlay h2{
  font-weight:700;font-size:clamp(2.8rem,9vw,8rem);line-height:.94;
  letter-spacing:-.02em;will-change:opacity,transform;
  text-shadow:0 3px 24px rgba(0,0,0,.92),0 0 90px rgba(0,0,0,.7);
}
.hero-2{color:var(--teal);text-shadow:0 0 60px rgba(52,198,212,.45),0 3px 24px rgba(0,0,0,.92);}
#operate .overlay h1,#own .overlay h1,#mesh .overlay h1,#operate .overlay h2,#own .overlay h2,#mesh .overlay h2{color:var(--ink);}
#operate .overlay h1,#mesh .overlay h1,#operate .overlay h2,#mesh .overlay h2{text-shadow:0 0 70px rgba(52,198,212,.5),0 3px 26px rgba(0,0,0,.95);}
.hero-lede{
  display:inline-block;
  font-family:"IBM Plex Sans",sans-serif;font-weight:500;
  font-size:clamp(1rem,1.7vw,1.4rem);color:#e7eef2;
  margin-top:26px;max-width:46ch;line-height:1.5;will-change:opacity,transform;
  padding:14px 22px;border-radius:14px;
  background:rgba(5,8,10,.46);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  text-shadow:0 1px 12px rgba(0,0,0,.9);
}
.hero-lede.center{margin-left:auto;margin-right:auto;}
/* S9: the home hero's one-line description and the briefing sit together under the headline from the first frame
   (MISS NOTHING still arrives above them on scroll). The description keeps its own blurred scrim; the button is the
   site's filled CTA, so both read over any frame of the film. */
.hero-row{display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px;margin-top:26px;}
.hero-row .hero-lede{margin-top:0;}
.hero-row .hero-cta{margin-top:0;padding:15px 32px;font-size:1rem;white-space:nowrap;}   /* beats .cta-btn, which comes later */
@media (min-width:881px){.hero-row .hero-lede{max-width:max(40ch,27rem);}}   /* the panel hugs its two lines, so the button stays clear of the officer */
@media (max-width:880px){
  .hero-row{flex-direction:column;align-items:center;gap:12px;margin-top:18px;}
  .hero-row .hero-cta{padding:13px 28px;}
  /* the button adds about 50 px under the description, so the block sits 50 px lower (never nearer than 64 px to the
     bottom, which keeps 24 px above SCROLL): SEE EVERYTHING and MISS NOTHING keep their places over the film, clear of the P3000 */
  #hero .overlay.overlay-left{bottom:max(calc(13vh - 50px),64px);}
}
@media (max-width:880px) and (max-height:500px){   /* phones on their side: no height for the button; the header button asks */
  .hero-row .hero-cta{display:none;}
  .hero-row{margin-top:26px;}
  #hero .overlay.overlay-left{bottom:13vh;}
}
@media (max-width:349px){.nav-cta{display:none;}}   /* below 350 px the phone header has no room: the menu keeps the briefing */
.js .reveal-line{opacity:0;}
.scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:12;
  font-size:11px;letter-spacing:.4em;color:rgba(238,243,245,.55);
  animation:bob 1.9s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(7px);}}

/* ---------- CONTENT BANDS ---------- */
.band{
  position:relative;z-index:2;max-width:1180px;margin:0 auto;
  padding:clamp(90px,14vh,180px) 6vw;
}
.kicker{font-size:12px;letter-spacing:.4em;color:var(--teal);font-weight:600;margin-bottom:20px;}
.band-h{font-weight:700;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.08;letter-spacing:-.02em;max-width:18ch;}
.band-p{margin-top:26px;font-size:clamp(1rem,1.5vw,1.2rem);color:var(--muted);line-height:1.65;max-width:62ch;}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;}
.pillar{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:16px;padding:34px 30px;
  transition:border-color .3s,transform .3s;
}
.pillar:hover{border-color:rgba(52,198,212,.45);transform:translateY(-4px);}
.pillar-num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;font-weight:600;color:var(--teal);letter-spacing:.2em;}
.pillar h3{font-size:1.5rem;font-weight:700;margin:16px 0 12px;}
.pillar p{color:var(--muted);font-size:.98rem;line-height:1.6;}

/* ---------- HARDWARE ---------- */
.gear{max-width:1240px;}
.gear-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;}
.gear-card{
  background:radial-gradient(120% 80% at 50% 0%,rgba(52,198,212,.08),transparent 60%),var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center;
  transition:border-color .3s,transform .3s;
}
.gear-card:hover{border-color:rgba(52,198,212,.4);transform:translateY(-4px);}
.gear-img{height:150px;display:grid;place-items:center;margin-bottom:18px;}
.gear-img img{max-height:150px;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));}
.gear-card h3,.gear-card h4{font-size:1.1rem;font-weight:700;letter-spacing:.08em;}
.gear-card p{color:var(--muted);font-size:.88rem;line-height:1.5;margin-top:8px;}

/* ---------- STATS ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  max-width:1100px;margin:0 auto;padding:60px 6vw;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat{text-align:center;}
.stat-num{display:block;font-size:clamp(2.4rem,5vw,4rem);font-weight:700;
  background:linear-gradient(120deg,var(--teal),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em;}
.stat-label{display:block;color:var(--muted);font-size:.86rem;letter-spacing:.06em;margin-top:8px;}

/* ---------- WHY ---------- */
.why{max-width:1100px;}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:8px;}
.why-item{background:var(--bg2);padding:38px 36px;}
.why-item h3,.why-item h4{font-size:1.25rem;font-weight:700;color:var(--teal);margin-bottom:12px;}
.why-item p{color:var(--muted);font-size:1rem;line-height:1.6;}

/* ---------- CONTACT ---------- */
.contact{
  text-align:center;padding:clamp(110px,18vh,200px) 6vw 80px;
  background:radial-gradient(80% 70% at 50% 0%,rgba(52,198,212,.1),transparent 60%),var(--bg);
}
.contact h2{font-size:clamp(2.2rem,5.5vw,4rem);font-weight:700;letter-spacing:-.02em;}
.contact>p{color:var(--muted);font-size:clamp(1rem,1.6vw,1.25rem);max-width:54ch;margin:22px auto 0;line-height:1.6;text-wrap:balance;}
.cta-btn{
  display:inline-block;margin-top:38px;padding:16px 40px;border-radius:34px;
  background:linear-gradient(120deg,var(--teal),var(--teal-deep));color:#04181b;
  font-weight:700;font-size:1.05rem;text-decoration:none;letter-spacing:.02em;
  box-shadow:0 12px 40px rgba(52,198,212,.3);transition:transform .25s,box-shadow .25s;
}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 18px 54px rgba(52,198,212,.45);}
.foot-meta{
  display:flex;gap:30px;justify-content:center;flex-wrap:wrap;
  margin-top:80px;padding-top:34px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12px;letter-spacing:.16em;
}

/* ---------- REVEAL ON SCROLL ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
.pillars .pillar:nth-child(2){transition-delay:.1s;}
.pillars .pillar:nth-child(3){transition-delay:.2s;}
.gear-grid .gear-card:nth-child(2){transition-delay:.08s;}
.gear-grid .gear-card:nth-child(3){transition-delay:.16s;}
.gear-grid .gear-card:nth-child(4){transition-delay:.24s;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:880px){
  .nav-burger{display:flex;}
  /* S9: the briefing stays in the phone header as a compact button beside the menu (it used to hide in the menu).
     The logo scales down just enough to make room, and the scrolled header keeps 20 px sides (it used to jump to 38). */
  .nav-cta{margin-left:auto;margin-right:8px;padding:9px 12px;font-size:12px;white-space:nowrap;}
  .nav.scrolled{padding:12px 20px;}
  .brand-logo,.nav.scrolled .brand-logo{height:clamp(24px,calc((100vw - 232px) / 5.375),36px);}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#05080a;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0 18px;box-shadow:0 24px 40px rgba(0,0,0,.5);}
  .nav.open .nav-links{display:flex;}
  .nav-links a{padding:16px 24px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.05);}
  .nav-links a:last-child{border-bottom:none;}
  .nav-links a.nav-cta-m{display:block;color:var(--teal);font-weight:700;letter-spacing:.04em;}
  .nav{padding:14px 20px;}
  .pillars,.gear-grid,.stats,.why-grid{grid-template-columns:1fr;}
  .stats{gap:34px;}
  .gear-grid{grid-template-columns:1fr 1fr;}
  .overlay-left,.overlay-center{text-align:center;}
  #hero .overlay-left{top:auto;bottom:13vh;transform:translateX(-50%);}
  .hero-lede{margin-left:auto;margin-right:auto;}
  .cine{height:240vh;}
}
@media (max-width:520px){
  .gear-grid{grid-template-columns:1fr;}
  .foot-meta{flex-direction:column;gap:10px;}
}

/* ============================================================
   HARDWARE PAGE
   ============================================================ */
.hw-hero{
  position:relative;min-height:92vh;display:grid;place-items:center;text-align:center;
  overflow:hidden;padding:120px 6vw 80px;
}
.hw-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);}
.hw-hero-grade{position:absolute;inset:0;background:
  radial-gradient(58% 46% at 50% 52%,rgba(2,4,6,.66),transparent 78%),
  radial-gradient(120% 90% at 50% 40%,transparent 32%,rgba(2,4,6,.85) 100%),
  linear-gradient(180deg,rgba(2,4,6,.82) 0%,transparent 28%,transparent 50%,rgba(5,8,10,.97) 100%);}
/* Command-ops hero: image is bright/busy in the center where the headline sits,
   so dim the backdrop and strengthen the central scrim for legibility. Edges
   (CCTV feeds, operators) stay readable. */
.hero-command .hw-hero-bg{filter:brightness(.66) saturate(1.04) contrast(1.02);}
.hero-command .hw-hero-grade{background:
  radial-gradient(64% 54% at 50% 50%,rgba(2,4,6,.82),rgba(2,4,6,.34) 66%,transparent 86%),
  radial-gradient(120% 90% at 50% 40%,transparent 30%,rgba(2,4,6,.9) 100%),
  linear-gradient(180deg,rgba(2,4,6,.86) 0%,transparent 30%,transparent 48%,rgba(5,8,10,.98) 100%);}
.hw-hero-inner{position:relative;z-index:2;max-width:900px;}
.hw-hero h1{font-weight:700;font-size:clamp(2.6rem,7vw,5.6rem);line-height:.98;letter-spacing:-.02em;
  text-shadow:0 3px 26px rgba(0,0,0,.85);}
.hw-hero .accent2{color:var(--teal);}
.hw-hero p{margin:24px auto 0;max-width:54ch;color:#cfd9df;font-size:clamp(1.05rem,1.6vw,1.35rem);
  line-height:1.6;text-shadow:0 1px 10px rgba(0,0,0,.8);}
/* MOBILE: photo heroes anchor their copy to the bottom over a strong gradient so the
   text never sits on a subject's face, and bias the crop toward off-center subjects. */
@media (max-width:880px){
  .hw-hero{place-items:end center;padding-bottom:52px;min-height:90vh;}
  .hw-hero-grade{background:
    linear-gradient(180deg,rgba(2,4,6,.5) 0%,rgba(2,4,6,.12) 20%,transparent 40%,rgba(5,8,10,.9) 70%,rgba(5,8,10,.99) 100%);}
  .hw-hero .scroll-hint{display:none;}
  /* Company group photo: full-bleed cinematic hero (matches desktop) — team framed
     up top, headline rising out of a strong gradient at the bottom. */
  .hero-people .hw-hero-bg{background-position:center 26%;}
  .hero-people .hw-hero-grade{background:
    linear-gradient(180deg,rgba(2,4,6,.38) 0%,rgba(2,4,6,.04) 24%,transparent 40%,rgba(5,8,10,.82) 72%,rgba(5,8,10,.99) 100%);}
  .hero-focus-left .hw-hero-bg{background-position:38% center;}  /* subject on the left  */
  .hero-focus-right .hw-hero-bg{background-position:60% center;} /* subject on the right */

  /* Promise band: darken the backdrop so the quote reads clearly over the officers. */
  .promise-bg{background-position:60% center;}
  .promise-grade{background:
    radial-gradient(80% 60% at 50% 42%,rgba(2,4,6,.6),transparent 80%),
    linear-gradient(180deg,rgba(5,8,10,.97) 0%,rgba(2,4,6,.5) 22%,rgba(2,4,6,.5) 70%,rgba(5,8,10,.97) 100%);}
}
.hw-hero .scroll-hint{position:absolute;bottom:30px;}

/* category label band */
.cat-band{max-width:1180px;margin:0 auto;padding:clamp(70px,11vh,130px) 6vw 0;}
.cat-kicker{font-size:12px;letter-spacing:.42em;color:var(--teal);font-weight:600;}
.cat-title{font-weight:700;font-size:clamp(1.7rem,3.6vw,2.8rem);letter-spacing:-.02em;margin-top:14px;}
.cat-sub{color:var(--muted);font-size:1.05rem;margin-top:12px;max-width:60ch;line-height:1.6;}

/* product feature row */
.product{
  max-width:1180px;margin:0 auto;padding:clamp(48px,7vh,90px) 6vw;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center;
}
.product.reverse .product-media{order:2;}
.product-stage{
  position:relative;border-radius:20px;overflow:hidden;
  min-height:380px;display:grid;place-items:center;
  background:radial-gradient(110% 90% at 50% 35%,rgba(52,198,212,.13),transparent 62%),
             linear-gradient(180deg,#0c1318,#070b0e);
  border:1px solid var(--line);
}
.product-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 50% 116%,rgba(52,198,212,.09),transparent 60%);}
.product-stage img{position:relative;z-index:2;max-width:78%;max-height:330px;object-fit:contain;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(52,198,212,.18));
  -webkit-box-reflect:below 8px linear-gradient(transparent 62%,rgba(255,255,255,.12));
  animation:hwfloat 7s ease-in-out infinite;}
@keyframes hwfloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.flag{display:inline-block;font-size:11px;letter-spacing:.2em;font-weight:700;color:#04181b;
  background:linear-gradient(120deg,var(--teal),var(--amber));padding:5px 12px;border-radius:30px;margin-bottom:16px;}
.product-copy h3{font-weight:700;font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.01em;}
.product-copy .model{color:var(--muted);font-size:.9rem;letter-spacing:.18em;margin-top:6px;text-transform:uppercase;}
.product-copy .lead{color:var(--muted);font-size:1.05rem;line-height:1.6;margin:18px 0 24px;max-width:52ch;}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.spec{background:var(--bg2);padding:14px 16px;}
.spec .k{font-size:10.5px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;}
.spec .v{font-size:1.02rem;font-weight:600;color:var(--ink);margin-top:5px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.chip{font-size:12px;color:var(--teal);border:1px solid rgba(52,198,212,.4);border-radius:30px;padding:6px 13px;background:rgba(52,198,212,.06);}
.partner-line{display:flex;align-items:center;gap:14px;margin-top:22px;color:var(--muted);font-size:12px;letter-spacing:.12em;}
.partner-line img{height:26px;opacity:.85;filter:brightness(1.4);}

/* connectivity / tactical capability panel (no device render) */
.cap{
  max-width:1180px;margin:0 auto;padding:clamp(48px,7vh,90px) 6vw;
}
.cap-inner{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  padding:clamp(36px,5vw,64px);background:linear-gradient(180deg,#0c1318,#070b0e);}
.cap-inner::after{content:"";position:absolute;inset:0;background-image:var(--bp);background-size:cover;background-position:center;opacity:.16;}
.cap-banner{position:relative;z-index:2;margin:0 0 clamp(30px,4vw,44px);border-radius:14px;overflow:hidden;
  border:1px solid var(--line);aspect-ratio:1000/430;box-shadow:0 30px 60px rgba(0,0,0,.45);}
.cap-banner img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.cap-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.cap h3{font-weight:700;font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.01em;}
.cap .lead{color:var(--muted);font-size:1.05rem;line-height:1.65;margin:18px 0 22px;}
.cap .specs{grid-template-columns:1fr 1fr;}

.hw-cta{text-align:center;padding:clamp(90px,14vh,170px) 6vw 70px;
  background:radial-gradient(80% 70% at 50% 0%,rgba(52,198,212,.1),transparent 60%),var(--bg);}
.hw-cta h2{font-size:clamp(2rem,5vw,3.6rem);font-weight:700;letter-spacing:-.02em;}
.hw-cta p{color:var(--muted);max-width:52ch;margin:20px auto 0;font-size:1.15rem;line-height:1.6;text-wrap:balance;}

.home-link-wrap{text-align:center;margin-top:48px;}
.ghost-btn{display:inline-block;color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem;
  padding:14px 30px;border:1px solid var(--teal);border-radius:30px;transition:background .25s,color .25s;}
.ghost-btn:hover{background:var(--teal);color:#04181b;}

@media (max-width:880px){
  .product{grid-template-columns:1fr;gap:30px;}
  .product.reverse .product-media{order:0;}
  .cap-grid{grid-template-columns:1fr;gap:28px;}
  .specs{grid-template-columns:1fr;}
  .product-stage{min-height:230px;}
  .product-stage img{max-height:210px;max-width:64%;}
}

/* ============================================================
   FLAGSHIP HOME — preloader, blind-spot, proof
   ============================================================ */
/* ---- Preloader ---- */
.preloader{position:fixed;inset:0;z-index:200;background:#05080a;display:grid;place-content:center;gap:22px;
  justify-items:center;transition:opacity .7s ease,visibility .7s;}
.preloader.done{opacity:0;visibility:hidden;}
.pre-brand{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(20px,3vw,30px);
  letter-spacing:.18em;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:6px;}
.pre-brand span{font-size:9px;letter-spacing:.5em;color:var(--teal);font-weight:600;}
.pre-bar{width:min(240px,60vw);height:2px;background:rgba(255,255,255,.12);overflow:hidden;}
.pre-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--amber));box-shadow:0 0 12px var(--teal);}
.pre-label{font-size:10px;letter-spacing:.4em;color:var(--muted);}

/* ---- Blind-spot truth (scroll-pinned, code-driven) ---- */
.blindspot{position:relative;height:160vh;background:var(--bg);}   /* S4: 2.2 -> 1.6 screens */
/* Phones 1.8 screens (set at the S4 review, 3 Oct; the preview's 1.4 let one firm swipe cross the whole dial).
   This rule must come AFTER the one above: the old phone rule sat earlier in the file, lost the cascade to it, and the
   dial ran 2.2 screens on phones too. */
@media (max-width:880px){.blindspot{height:180vh;}}
.bs-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;
  grid-template-rows:auto 1fr auto;place-items:center;gap:0;padding:80px 6vw 60px;
  background:radial-gradient(80% 70% at 50% 42%,rgba(16,61,102,.25),transparent 70%),var(--bg);}
.bs-eyebrow{font-size:12px;letter-spacing:.42em;color:var(--teal);font-weight:600;}
.bs-stage{position:relative;display:grid;place-items:center;width:min(46vh,420px,84vw);height:min(46vh,420px,84vw);}
.fov-disc{
  --ang:160deg;
  position:relative;width:100%;height:100%;border-radius:50%;
  background:
    conic-gradient(from calc(0deg - var(--ang)/2),
      rgba(52,198,212,.80) 0deg, rgba(52,198,212,.80) var(--ang),
      rgba(224,114,140,.13) var(--ang), rgba(224,114,140,.13) 360deg);
  -webkit-mask:radial-gradient(circle, transparent 14%, #000 15%);
          mask:radial-gradient(circle, transparent 14%, #000 15%);
  box-shadow:0 0 80px rgba(52,198,212,.18);
  filter:drop-shadow(0 0 30px rgba(52,198,212,.25));
}
.fov-disc::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(52,198,212,.35);}
.fov-officer{position:absolute;top:50%;left:50%;width:11%;height:11%;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,var(--ink),#7f8a94);box-shadow:0 0 24px rgba(255,255,255,.5);z-index:3;}
.fov-pulse{position:absolute;top:50%;left:50%;width:14%;height:14%;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid var(--teal);animation:fovpulse 2.6s ease-out infinite;z-index:2;}
@keyframes fovpulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.7;}100%{transform:translate(-50%,-50%) scale(4.4);opacity:0;}}
.fov-tag{position:absolute;font-size:11px;letter-spacing:.16em;font-weight:600;z-index:4;transition:opacity .4s;}
.fov-tag-fwd{top:6%;left:50%;transform:translateX(-50%);color:#04191d;font-weight:700;}
.fov-tag-blind{bottom:8%;left:50%;transform:translateX(-50%);color:var(--muted);}
.bs-copy{text-align:center;max-width:760px;}
.bs-stat{font-size:clamp(1.05rem,2vw,1.5rem);color:var(--muted);font-weight:500;}
.bs-stat b{color:#e0728c;font-weight:700;}
.bs-head{font-weight:700;font-size:clamp(1.7rem,4vw,3rem);line-height:1.05;letter-spacing:-.01em;margin:18px 0 0;
  transition:opacity .5s,transform .5s;}
.js .bs-head{opacity:0;transform:translateY(16px);}
.bs-head.in{opacity:1;transform:none;}
.bs-head .bs-line2{color:var(--teal);}
.bs-foot{margin-top:16px;color:var(--muted);font-size:1rem;transition:opacity .5s;}
.js .bs-foot{opacity:0;}
.bs-foot.in{opacity:1;}

/* ---- Proof ---- */
.proof{max-width:1180px;margin:0 auto;padding:clamp(40px,6vh,80px) 6vw clamp(70px,11vh,130px);}
.proof-inner{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  padding:clamp(34px,5vw,60px);background:linear-gradient(180deg,#0c1318,#070b0e);}
.proof-inner::after{content:"";position:absolute;inset:0;background-image:var(--bp);background-size:cover;
  background-position:center;opacity:.16;mix-blend-mode:screen;}
.proof-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.proof-card{background:rgba(5,8,10,.5);border:1px solid var(--line);border-radius:14px;padding:30px 28px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.proof-tag{font-size:10.5px;letter-spacing:.22em;color:var(--teal);font-weight:700;margin-bottom:14px;}
.proof-card h3{font-size:1.4rem;font-weight:700;margin-bottom:12px;}
.proof-card p{color:var(--muted);font-size:1rem;line-height:1.6;}
.proof-note{position:relative;z-index:2;text-align:center;color:var(--muted);font-size:12px;letter-spacing:.1em;margin-top:24px;}
@media (max-width:880px){.proof-grid{grid-template-columns:1fr;}}

/* ---- Solutions rows ---- */
.sol{max-width:1180px;margin:0 auto;padding:clamp(16px,3vh,40px) 6vw clamp(46px,7vh,90px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center;}
.sol.reverse .sol-img{order:2;}
.sol-img{height:400px;border-radius:18px;background-size:cover;background-position:center;
  border:1px solid var(--line);position:relative;box-shadow:0 24px 60px rgba(0,0,0,.45);}
.sol-img::after{content:"";position:absolute;inset:0;border-radius:18px;
  background:linear-gradient(180deg,transparent 38%,rgba(2,4,6,.55));}
.sol-tag{font-size:10.5px;letter-spacing:.22em;color:var(--teal);font-weight:700;margin-bottom:14px;}
.sol-copy .lead{color:var(--muted);font-size:1.08rem;line-height:1.62;}
.sol-copy .lead strong{color:var(--ink);}
/* the stack reads as one plain line (S8, 3 Oct): the items run on like text with a middle dot between them (the
   dots are in solutions.html, so the line copies and reads as one); an item never splits, a line breaks only after a dot,
   and balanced lines keep a lone item off the last line */
.sol-stack{margin:20px 0;font-size:.95rem;line-height:1.6;color:var(--ink);text-wrap:balance;}
.sol-stack span{white-space:nowrap;}
.sol-also{margin:-8px 0 20px;font-size:.95rem;color:var(--muted);}   /* an addition beside a stack that was evaluated as is */
.sol-also span{color:var(--ink);}
.sol-out{color:var(--muted);font-size:1rem;line-height:1.6;border-left:2px solid var(--teal);padding-left:16px;}
.sol-out b{color:var(--ink);}
.muted-note{color:var(--muted);font-size:.85em;}
@media(max-width:880px){.sol{grid-template-columns:1fr;}.sol.reverse .sol-img{order:0;}.sol-img{height:240px;}}

/* ---- Why: subscription vs ownership contrast ---- */
.contrast-wrap{max-width:1100px;margin:0 auto;padding:0 6vw clamp(46px,8vh,100px);}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.contrast-col{border:1px solid var(--line);border-radius:16px;padding:32px 30px;}
.contrast-col.rent{background:linear-gradient(180deg,rgba(224,114,140,.06),transparent);}
.contrast-col.own{background:radial-gradient(120% 90% at 50% 0%,rgba(52,198,212,.1),transparent 60%),var(--panel);border-color:rgba(52,198,212,.35);}
.contrast-head{font-size:11px;letter-spacing:.2em;font-weight:700;margin-bottom:20px;}
.contrast-col.rent .contrast-head{color:#e0728c;}
.contrast-col.own .contrast-head{color:var(--teal);}
.contrast-col ul{list-style:none;display:flex;flex-direction:column;gap:14px;}
.contrast-col li{position:relative;padding-left:28px;color:var(--muted);font-size:1.02rem;line-height:1.45;}
.contrast-col.rent li::before{content:"\2715";position:absolute;left:0;color:#e0728c;font-weight:700;}
.contrast-col.own li::before{content:"\2713";position:absolute;left:0;color:var(--teal);font-weight:700;}
.contrast-col.own li{color:var(--ink);}
@media(max-width:880px){.contrast{grid-template-columns:1fr;}}

/* ---- Contact page ---- */
.contact-page{min-height:100vh;padding:130px 6vw 60px;max-width:1200px;margin:0 auto;}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,70px);align-items:start;}
.contact-aside h1{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:700;letter-spacing:-.02em;margin-top:14px;line-height:1.08;}
.contact-lede{color:var(--muted);font-size:1.05rem;line-height:1.6;margin-top:18px;}
.contact-meta{margin-top:30px;border-top:1px solid var(--line);}
.cm-row{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);}
.cm-k{font-size:10.5px;letter-spacing:.13em;color:var(--muted);width:150px;flex:none;}
.cm-row a,.cm-row span{color:var(--ink);text-decoration:none;font-size:1rem;}
.cm-row a:hover{color:var(--teal);}
.contact-badges{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin-top:24px;}
.contact-badges span{font-size:10.5px;letter-spacing:.14em;color:var(--teal);position:relative;}
.contact-badges span:not(:last-child)::after{content:"\2022";margin:0 12px;color:var(--faint);}
.cform{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:clamp(26px,3vw,40px);}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.cform label{display:block;font-size:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:16px;}
.cf-full{grid-column:1/-1;}
.cform input,.cform select,.cform textarea{width:100%;margin-top:8px;background:#05080a;border:1px solid var(--line);
  border-radius:10px;color:var(--ink);font-family:inherit;font-size:16px;padding:12px 14px;transition:border-color .2s;text-transform:none;letter-spacing:normal;}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--teal);}
.cform textarea{resize:vertical;}
.cf-submit{display:block;width:100%;text-align:center;border:none;cursor:pointer;margin-top:6px;}
.cf-lbl-short{display:none;}   /* contact.html: the short label on phones, where the long one wraps to two lines (S8, 3 Oct) */
@media(max-width:560px){.cf-lbl-long{display:none;}.cf-lbl-short{display:inline;}}
.cf-note{margin-top:16px;color:var(--muted);font-size:12.5px;letter-spacing:.04em;text-align:center;}
.contact-foot{border-top:1px solid var(--line);padding:30px 6vw;margin-top:20px;}
@media(max-width:880px){.contact-grid{grid-template-columns:minmax(0,1fr);}.cf-row{grid-template-columns:1fr;}}
.contact-grid>*{min-width:0;}
@media(max-width:380px){.cm-row{flex-wrap:wrap;row-gap:4px;}.cm-k{width:100%;}.cf-submit{padding-left:16px;padding-right:16px;}}

/* ---- Funding page ---- */
.fund-steps .pillar-num{font-size:.82rem;}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(40px,5vw,64px);}
.fcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s;}
.fcard:hover{border-color:rgba(52,198,212,.4);transform:translateY(-4px);}
.fcard-img{height:168px;position:relative;background-size:cover;background-position:center;}
.fcard-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--panel),transparent 65%);}
.fcard-b{padding:24px 26px 26px;flex:1;display:flex;flex-direction:column;}
.fcard .tag{font-size:10.5px;letter-spacing:.2em;color:var(--teal);font-weight:700;margin-bottom:10px;}
.fcard h3{font-size:1.25rem;font-weight:700;margin-bottom:10px;}
.fcard p{color:var(--muted);font-size:.94rem;line-height:1.55;margin-bottom:14px;}
.fcard .prog{margin-top:auto;border-top:1px solid var(--line);padding-top:14px;font-size:.86rem;color:var(--muted);}
.fcard .prog b{color:var(--ink);font-weight:600;}
.fcard .prog a{color:var(--teal);white-space:nowrap;}
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:clamp(40px,5vw,64px);}
.pstep{background:var(--bg2);padding:24px 20px;}
.pstep .n{font-family:"IBM Plex Mono",ui-monospace,monospace;color:var(--teal);font-size:.8rem;font-weight:700;margin-bottom:12px;}
.pstep h3,.pstep h4{font-size:.98rem;font-weight:700;margin-bottom:8px;}
.pstep p{color:var(--muted);font-size:.86rem;line-height:1.45;}
.promise{position:relative;min-height:70vh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:90px 6vw;}
.promise-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);}
.promise-grade{position:absolute;inset:0;background:
  radial-gradient(70% 54% at 50% 42%,rgba(2,4,6,.72),transparent 80%),
  radial-gradient(130% 90% at 50% 45%,transparent 34%,rgba(2,4,6,.86)),
  linear-gradient(180deg,rgba(5,8,10,.96) 0%,rgba(2,4,6,.55) 14%,transparent 34%,transparent 52%,rgba(5,8,10,.97) 100%);}
.promise-inner{position:relative;z-index:2;max-width:820px;}
.promise .pull{font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;font-size:clamp(1.4rem,3vw,2.4rem);line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-shadow:0 3px 24px rgba(0,0,0,.85);}
.promise .band-p{color:#e3e9e7;text-shadow:0 2px 16px rgba(0,0,0,.8);}
.fine{background:#020304;border-top:1px solid var(--line);padding:34px 6vw;}
.fine p{font-size:.82rem;color:var(--muted);max-width:92ch;margin:0 auto;line-height:1.6;}
.fine b{color:var(--muted);font-weight:600;}
@media(max-width:980px){.fgrid{grid-template-columns:1fr;}.pgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr;}}

/* ---- Technology partners strip ---- */
.partners{max-width:1100px;margin:0 auto;padding:clamp(30px,5vh,60px) 6vw clamp(10px,2vh,20px);text-align:center;}
.partners-label{font-size:11px;letter-spacing:.28em;color:var(--muted);margin-bottom:28px;}
.partners-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(30px,6vw,72px);}
.partners-row img{height:36px;width:auto;opacity:.9;filter:grayscale(1) brightness(2.1);transition:opacity .3s;}
/* Scroll-past glow (Marc, 1 Oct): partners-glow.js sets --glow 0..1 per mark as the strip crosses the middle of the screen. */
.partners-row img.glow-on{opacity:calc(.9 + var(--glow,0) * .1);
  filter:grayscale(1) brightness(2.1) drop-shadow(0 0 calc(var(--glow,0) * 5px) rgba(255,255,255,calc(var(--glow,0) * .5))) drop-shadow(0 0 calc(var(--glow,0) * 16px) rgba(52,198,212,calc(var(--glow,0) * .55)));}
.partners-row img:hover{opacity:1;}
@media(max-width:600px){.partners-row{gap:26px 36px;}.partners-row img{height:26px;}}

/* ---- Capability panel with a visible real photo (e.g. MOHOC in the field) ---- */
.cap-inner.cap-photo::after{opacity:.62;mix-blend-mode:normal;}
.cap-inner.cap-photo::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(7,11,14,.94),rgba(7,11,14,.58) 50%,rgba(7,11,14,.12));}
.cap-inner.cap-photo .cap-grid{position:relative;z-index:2;}

/* ---- Engineered: monospaced technical labels (Option 3) ---- */
.eyebrow,.kicker,.cat-kicker,.bs-eyebrow,.proof-tag,.sol-tag,.fcard .tag,.partners-label,.cm-k,.spec .k,.contrast-head{font-family:"IBM Plex Mono",ui-monospace,monospace;}

/* ============================================================
   COMPANY PAGE
   ============================================================ */
/* Mission / Vision two-up */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:10px;}
.mv-card{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:38px 36px;position:relative;overflow:hidden;}
.mv-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--teal),var(--teal-deep));}
.mv-tag{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.28em;color:var(--teal);font-weight:600;}
.mv-card p{margin-top:16px;color:#dbe4e9;font-size:1.12rem;line-height:1.6;}

/* Leadership */
.exec-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;}
.exec-card{background:var(--bg2);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;}
.exec-photo{width:100%;aspect-ratio:341/287;object-fit:cover;object-position:center;background:var(--panel);filter:saturate(1.02);}
.exec-body{padding:28px 30px 32px;}
.exec-name{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:-.01em;}
.exec-role{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.18em;color:var(--teal);font-weight:600;margin-top:8px;text-transform:uppercase;}
.exec-quote{margin-top:18px;color:var(--muted);font-size:1.02rem;line-height:1.6;border-left:2px solid var(--line);padding-left:16px;font-style:italic;}

/* At-a-glance firmographics strip */
.glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:8px;}
.glance-cell{background:var(--bg2);padding:28px 26px;}
.glance-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.2em;color:var(--teal);font-weight:600;}
.glance-v{margin-top:10px;font-size:1.05rem;color:var(--ink);font-weight:600;line-height:1.35;overflow-wrap:anywhere;text-wrap:balance;}
.glance-v>span,.glance-v>a{display:block;width:fit-content;max-width:100%;}
.glance-v>*+*{margin-top:4px;}
.glance-v a{color:inherit;text-decoration:none;transition:color .2s;}
.glance-v a:hover{color:var(--teal);}
.glance .nw{white-space:nowrap;}

/* Social row (footer) */
.social-row{display:flex;justify-content:center;gap:14px;margin-top:26px;}
.social-row a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;color:var(--muted);transition:color .2s,border-color .2s,background .2s,transform .2s;}
.social-row a:hover{color:#04181b;background:var(--teal);border-color:var(--teal);transform:translateY(-2px);}
.social-row svg{width:18px;height:18px;fill:currentColor;}

@media(max-width:880px){
  .mv-grid,.exec-grid{grid-template-columns:1fr;}
  .glance{grid-template-columns:repeat(2,minmax(0,1fr));}
  .glance-cell{padding:24px 20px;}
  .glance-cell:last-child:nth-child(odd){grid-column:1 / -1;}
}
@media(max-width:560px){
  .glance{grid-template-columns:1fr;}
}

/* ============================================================
   ACCESSIBILITY / RESILIENCE  (Section 508 / WCAG 2.2)
   ============================================================ */
/* Skip-to-content link — visible only on keyboard focus */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--teal);color:#04181b;
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;font-size:14px;text-decoration:none;}
.skip-link:focus{left:0;}
/* Visible keyboard focus everywhere (form fields previously suppressed it) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--teal);outline-offset:2px;border-radius:3px;}
/* Honor "reduce motion": stop animations and show all content immediately */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .reveal,.reveal-line,.stat-num,.bs-head,.bs-foot,.bs-stat,.scroll-hint{opacity:1 !important;transform:none !important;}
}

/* ---------- SITE FOOTER (shared, all pages) ---------- */
.site-foot{max-width:1180px;margin:70px auto 0;padding:40px 6vw 0;border-top:1px solid var(--line);text-align:left;color:var(--muted);font-size:14px;line-height:1.5;}
.sf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;}
.sf-logo{height:30px;width:auto;display:block;}
.sf-tag{margin:14px 0 0;max-width:34ch;}
.sf-col h4{margin:0 0 12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);font-weight:700;}
.sf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.sf-col a{color:var(--muted);text-decoration:none;transition:color .2s;} .sf-col a:hover{color:var(--ink);}
.sf-social{display:flex;gap:10px;margin-top:18px;}
.sf-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;color:var(--muted);transition:color .2s,border-color .2s,background .2s;}
.sf-social a:hover{color:#04181b;background:var(--teal);border-color:var(--teal);}
.sf-social svg{width:16px;height:16px;fill:currentColor;}
.sf-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:34px;padding:22px 0 8px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.06em;}
.sf-bottom a{color:var(--muted);text-decoration:none;} .sf-bottom a:hover{color:var(--ink);}
@media(max-width:880px){.sf-grid{grid-template-columns:1fr 1fr;gap:28px;}}
/* Phones (S8, 3 Oct): every footer link and icon is at least 44 px tall (Apple's minimum tap target), and the links
   sit in groups: Explore and Contact side by side, Registrations across the width beneath them, so the footer fits one
   screen. It aligns to the page's own 6vw margin instead of doubling it, which gives the two columns their room. */
@media(max-width:560px){
  .site-foot{padding:34px 0 0;margin-top:56px;}
  .sf-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:26px 18px;}   /* Contact gets the wider column: the street address fits one line */
  .sf-brand,.sf-col:last-child{grid-column:1 / -1;}
  .sf-tag{max-width:none;}
  .sf-social{gap:8px;margin-top:14px;}
  .sf-social a{width:44px;height:44px;}
  .sf-social svg{width:18px;height:18px;}
  .sf-col h4{margin-bottom:6px;}
  .sf-col ul{gap:0;}
  .sf-col li{padding:3px 0;}
  .sf-col li:has(> a){padding:0;}
  .sf-col li > a{display:flex;align-items:center;min-height:44px;}
  .sf-bottom{margin-top:22px;padding:6px 0 4px;gap:0 10px;align-items:center;}
  .sf-bottom a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;}
}
/* Privacy / accessibility page */
.plain{max-width:760px;margin:0 auto;padding:clamp(120px,16vh,180px) 6vw 40px;}
.plain h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:700;letter-spacing:-.02em;}
.plain h2{font-size:1.35rem;font-weight:700;margin-top:44px;}
.plain p,.plain li{color:var(--muted);font-size:1.05rem;line-height:1.65;} .plain ul{padding-left:20px;}
.plain a{color:var(--teal);}

/* Hardware hero: keep the officer's head in frame on wide, short viewports (cover-fit crops top/bottom otherwise);
   on phones bias the crop toward her (she stands right of centre). */
.hero-keep-head .hw-hero-bg{background-position:center 6%;transform:scale(1.02);}
.hero-people.hero-keep-head .hw-hero-bg{background-position:center 12%;}
.hero-focus-left.hero-keep-head .hw-hero-bg{background-position:38% 4%;}
@media (max-width:880px){ .hero-keep-head .hw-hero-bg{background-position:64% 6%;} .hero-people.hero-keep-head .hw-hero-bg{background-position:center 26%;} .hero-focus-left.hero-keep-head .hw-hero-bg{background-position:38% 10%;} }

/* Solutions hero with the deputy photo: copy on the left, subject pushed right so he stands clear of the headline */
.hero-copy-left .hw-hero-bg{background-position:82% 8%;transform:scale(1.04);}
@media (min-width:881px){
  .hero-copy-left{place-items:center start;text-align:left;padding-left:7vw;}
  .hero-copy-left .hw-hero-inner{max-width:720px;margin:0;}
  .hero-copy-left .hw-hero p{margin-left:0;}
  .hero-copy-left .scroll-hint{left:50%;}
}
@media (max-width:880px){ .hero-copy-left .hw-hero-bg{background-position:70% 6%;transform:scale(1.04);} }
/* Funding hero: courthouse + flag (2688px plate); keep the clock tower and the flag in frame */
.hero-funding .hw-hero-bg{background-position:center 45%;transform:scale(1.02);}
@media (max-width:880px){ .hero-funding .hw-hero-bg{background-position:62% 45%;} }

/* ============================================================
   S5 (3 Oct) · PHOTO BAND: one full-bleed picture as a chapter break (Hardware, Solutions).
   Picture only, no copy (aria-hidden: it is decorative). Top and bottom edges fade into the canvas like the heroes and
   the Funding promise band. The focal point is set per band with --fx/--fy (desktop) and --fx-m/--fy-m (phones).
   Class .photo-break, not the preview's .photo-band: .photo-band is S2's proof wrapper on Home and Connectivity
   (open-layout.css), and these fixed-height, overflow-hidden rules would clip it.
   ============================================================ */
.photo-break{position:relative;height:clamp(440px,76vh,780px);overflow:hidden;background:var(--bg);}
.photo-break img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);display:block;}
.photo-break::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(5,8,10,.45) 4%,rgba(5,8,10,0) 12%,rgba(5,8,10,0) 86%,rgba(5,8,10,.5) 95%,var(--bg) 100%);}
@media (max-width:880px){
  .photo-break{height:clamp(360px,62vh,580px);height:clamp(360px,62svh,580px);}
  .photo-break img{object-position:var(--fx-m,var(--fx,50%)) var(--fy-m,var(--fy,50%));}
}
.mode-arrive .photo-break{scroll-snap-align:center;}   /* hardware.html arrival mode: the band is a stop of its own, centred (hardware.js starts()) */