/* ============================================================================
   Guardian Robotics — design system (premium light)
   ----------------------------------------------------------------------------
   Loaded AFTER each page's inline <style> and site.css, so it is the single
   source of truth for type scale, depth, colour and rhythm across the site.
   Pages keep their own layout CSS; this layer upgrades the shared vocabulary.

   Load order per page:
     1. inline <style>        page layout
     2. assets/site.css       motion + a11y + mobile nav
     3. assets/guardian.css   <- this file wins
   ========================================================================= */

:root{
  /* Richer, warmer palette than the original flat blues. */
  --blue:#1668B8;--blue-dark:#0F4E8F;--blue-deep:#0A2F52;
  --blue-light:#EAF3FC;--blue-mid:#BFDBF4;
  --ink:#0A1622;--ink2:#31506B;--ink3:#7593AF;
  --bg:#FFFFFF;--bg2:#F6FAFD;--bg3:#EDF4FB;
  --border:#DCE9F5;--border2:#C2D9EE;--border3:#96BDDC;
  --text:var(--ink);--text2:var(--ink2);--text3:var(--ink3);
  --grn:#0B7A46;--amb:#B06E00;--red:#BE3326;

  /* Layered depth — never a single flat shadow. */
  --sh-xs:0 1px 2px rgba(10,47,82,.06);
  --sh-sm:0 1px 3px rgba(10,47,82,.07),0 2px 8px rgba(10,47,82,.05);
  --sh-md:0 2px 6px rgba(10,47,82,.06),0 8px 24px rgba(10,47,82,.08);
  --sh-lg:0 4px 12px rgba(10,47,82,.07),0 18px 48px rgba(10,47,82,.11);
  --sh-xl:0 8px 24px rgba(10,47,82,.09),0 32px 80px rgba(10,47,82,.14);
  --sh-glow:0 10px 30px rgba(22,104,184,.28);

  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

html{-webkit-text-size-adjust:100%}
body{color:var(--text);background:var(--bg)}
::selection{background:var(--blue-mid);color:var(--blue-deep)}

/* ---------------------------------------------------------------- type scale
   Bigger, tighter display type is the single biggest perceived-quality lever. */
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}

h1.hero-h1,h1.ph-h1{
  font-size:clamp(2.35rem,5.2vw,4.15rem);
  letter-spacing:-.042em;line-height:1.015;font-weight:700
}
h2.sh{
  font-size:clamp(1.85rem,3.9vw,2.85rem);
  letter-spacing:-.035em;line-height:1.08;font-weight:700
}
.hero-sub,.ph-sub{
  font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.72;color:var(--text2);
  max-width:40ch
}
.ss{font-size:1.01rem;line-height:1.78;color:var(--text2);max-width:62ch}

/* Gradient emphasis — used on one phrase per page, never more. */
h1 em,h2 em,.grad{
  font-style:normal;
  background:linear-gradient(96deg,var(--blue) 8%,#2E90DE 52%,#6C63D8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* Eyebrow: thin gradient rule + tracked caps. */
.eyebrow-line{width:28px;height:2px;background:linear-gradient(90deg,var(--blue),#6C63D8);border-radius:2px}
.eyebrow-txt{font-size:.69rem;letter-spacing:.15em;font-weight:700}

/* ------------------------------------------------------------------- rhythm */
section{padding:clamp(76px,8.5vw,118px) 0}
.container{max-width:1180px}
hr.div{border-top:1px solid var(--border)}

/* ------------------------------------------------------------------ surfaces
   Every card gets a hairline border, a layered shadow, and an inner top
   highlight — that inner highlight is what reads as "expensive". */
.cap,.fc-card,.cert,.mv-card,.val,.id-card,.itc,.info-card,.cred,.sstat,.pc,.dl-box,.stmt-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm),inset 0 1px 0 #fff;
  transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),border-color .25s ease
}
.cap:hover,.fc-card:hover,.cert:hover,.mv-card:hover,.val:hover,.id-card:hover,
.itc:hover,.info-card:hover,.cred:hover,.sstat:hover,.pc:hover{
  transform:translateY(-5px);
  border-color:var(--border2);
  box-shadow:var(--sh-lg),inset 0 1px 0 #fff
}

/* Numbered cards get a large ghost numeral. */
.cap-n,.pc-n{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  color:var(--blue);opacity:.55;letter-spacing:.06em
}

/* Card icons: soft tinted plate rather than a flat square. */
.cap-ico,.pc-ico,.cert-ico,.id-ico,.ty-ico{
  background:linear-gradient(145deg,var(--blue-light),#fff);
  border:1px solid var(--border2);
  border-radius:var(--r-md);
  box-shadow:var(--sh-xs),inset 0 1px 0 #fff
}

/* -------------------------------------------------------------------- header */
header{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--border);
  box-shadow:none
}
header.scrolled{
  background:rgba(255,255,255,.93);
  box-shadow:0 1px 0 var(--border),0 10px 34px rgba(10,47,82,.09)
}
.hdr{height:74px;max-width:1180px}
nav a{font-weight:500;letter-spacing:-.005em}
nav a:not(.btn){position:relative}
nav a:not(.btn)::after{
  content:'';position:absolute;left:0;right:100%;bottom:-5px;height:2px;
  background:linear-gradient(90deg,var(--blue),#6C63D8);border-radius:2px;
  transition:right .28s var(--ease-out)
}
nav a:not(.btn):hover::after{right:0}
nav a.active:not(.btn)::after{right:0}

/* -------------------------------------------------------------------- buttons */
.btn{
  font-size:.86rem;font-weight:600;letter-spacing:-.005em;
  padding:.62rem 1.35rem;border-radius:10px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .18s ease
}
.btn-p{
  background:linear-gradient(135deg,#2E90DE,var(--blue) 60%,var(--blue-dark));
  color:#fff;box-shadow:var(--sh-glow),inset 0 1px 0 rgba(255,255,255,.22);border:none
}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(22,104,184,.36),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-g{
  background:#fff;color:var(--blue);border:1.5px solid var(--border2);
  box-shadow:var(--sh-xs)
}
.btn-g:hover{border-color:var(--blue);background:var(--blue-light);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.btn-lg{font-size:.98rem;padding:.92rem 2rem;border-radius:12px}

/* --------------------------------------------------------------------- heroes
   Warmer ground, a wider aurora, and a finer grid than the original. */
.hero,.page-hero{
  background-color:var(--bg2);
  background-image:
    radial-gradient(rgba(22,104,184,.11) 1px,transparent 1.2px),
    radial-gradient(880px 420px at 18% -140px,rgba(46,144,222,.16),transparent 70%),
    radial-gradient(620px 340px at 88% -60px,rgba(108,99,216,.10),transparent 72%);
  background-size:30px 30px,auto,auto;
  border-bottom:1px solid var(--border)
}
.hero{padding:calc(74px + clamp(58px,7vw,96px)) 0 clamp(64px,7vw,100px)}
.page-hero{padding:calc(74px + clamp(52px,6vw,80px)) 0 clamp(56px,6vw,76px)}

/* Badges/chips — pill with soft ring. */
.ph-badge,.sdvosb-chip{
  border-radius:100px;font-size:.7rem;letter-spacing:.09em;font-weight:700;
  padding:6px 15px;box-shadow:var(--sh-xs),inset 0 1px 0 #fff
}

/* Credential rail under a hero: mono, quiet, confident. */
.strip-item{border:none}
.strip-val{font-family:var(--grotesk);font-weight:700;letter-spacing:-.02em}
.strip-lbl{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}

/* ---------------------------------------------------------------------- data
   Tables read as reference material, not as a web widget. */
.naics-table{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm)}
.naics-table th{background:var(--bg3);font-size:.67rem;letter-spacing:.1em;border-bottom:1px solid var(--border2)}
.naics-table td{font-size:.87rem}
.naics-table tr:hover td{background:var(--blue-light)}
.naics-code,.nc{font-family:var(--mono);font-size:.8rem}

/* --------------------------------------------------------------------- forms */
.form-card{
  border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-xl),inset 0 1px 0 #fff
}
.fg input,.fg select,.fg textarea{
  background:var(--bg2);border:1.5px solid var(--border);border-radius:10px;
  font-size:.9rem;padding:.78rem 1.05rem;transition:border-color .18s,box-shadow .18s,background .18s
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  background:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,104,184,.1)
}
.fg label{font-size:.69rem;letter-spacing:.09em}
.fg select optgroup{font-family:var(--grotesk);font-weight:700;font-size:.78rem;color:var(--text3)}
.fg select optgroup option{font-family:var(--sans);font-weight:400;font-size:.88rem;color:var(--text)}
/* Field hint: guidance and the topic-preselect confirmation. */
.fg-hint{font-size:.79rem;color:var(--text3);line-height:1.6;margin-top:.15rem}
.fg-hint.is-set{color:var(--blue);font-weight:500}
.form-submit{border-radius:12px;box-shadow:var(--sh-glow),inset 0 1px 0 rgba(255,255,255,.22)}

/* ------------------------------------------------------------------ terminal */
.term{border-radius:var(--r-lg);box-shadow:var(--sh-xl)}

/* -------------------------------------------------------------------- footer
   Deep navy, four-plus columns, quiet dividers. See the mega-footer block in
   assets/footer.css for the expanded link architecture. */
footer{background:linear-gradient(180deg,#0A2F52,#071F38);padding:4.5rem 0 2rem}
.ftr-col h4{font-size:.66rem;letter-spacing:.13em;color:rgba(255,255,255,.4)}
.ftr-col ul li a,.ftr-col .mi{font-size:.81rem}
.ftr-col ul li a{color:rgba(255,255,255,.62)}
.ftr-col ul li a:hover{color:#fff}
.ftr-tag{color:rgba(255,255,255,.5)}
.vbadge{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}

/* ------------------------------------------------------------------- polish */
img{border-radius:2px}
a:not(.btn):not(.btn-w):not(.btn-wg){transition:color .16s ease}

/* Reveal: slightly longer, softer travel than the default. */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s var(--ease-out)}
  .rv.in{opacity:1;transform:none}
}

/* Seven nav items: tighten spacing before the mobile breakpoint. nav-fit */
@media(max-width:1120px){
  nav{gap:1.3rem}
  nav a{font-size:.82rem}
}
@media(max-width:980px){
  nav{gap:1rem}
  nav a{font-size:.79rem}
}
@media(max-width:900px){
  .hdr{height:66px}
  .hero{padding:calc(66px + 44px) 0 56px}
  .page-hero{padding:calc(66px + 38px) 0 46px}
  section{padding:60px 0}
}
@media(max-width:768px){
  header nav{top:66px;background:rgba(255,255,255,.98);backdrop-filter:blur(16px)}
  nav a:not(.btn)::after{display:none}
}

/* Print: vendor/credential pages end up in procurement files. */
@media print{
  header,footer,.nav-toggle,.skip-link,.btn,.cta-sect{display:none!important}
  body{background:#fff;color:#000}
  .hero,.page-hero{background:#fff;padding:1rem 0}
  .cap,.cert,.id-card,.info-card,.cred{box-shadow:none;border:1px solid #999;break-inside:avoid}
  a{color:#000;text-decoration:underline}
}

/* ============================================================================
   Navigation dropdown (Governance)
   ----------------------------------------------------------------------------
   Works without JavaScript: :hover opens it for pointers, :focus-within opens
   it for keyboard users tabbing through. site.js upgrades it with an explicit
   toggle button (touch), Escape, outside-click, and arrow-key movement.
   On mobile the menu is always expanded inline inside the hamburger panel.
   ========================================================================= */
.nav-drop{position:relative;display:flex;align-items:center;gap:.15rem}
.nav-drop-link{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--text2)}

.nav-drop-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border:none;background:none;cursor:pointer;
  color:var(--text3);border-radius:5px;transition:color .15s,transform .2s
}
.nav-drop-btn svg{width:13px;height:13px}
.nav-drop-btn:hover{color:var(--blue)}
.nav-drop:hover .nav-drop-btn,
.nav-drop.is-open .nav-drop-btn{color:var(--blue)}
.nav-drop.is-open .nav-drop-btn{transform:rotate(180deg)}

.nav-drop-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:330px;background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:.6rem;box-shadow:var(--sh-xl);z-index:10000;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s var(--ease-out),visibility .18s
}
/* Hover bridge so the pointer can travel from the link to the menu. */
.nav-drop-menu::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}

.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.is-open .nav-drop-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)
}

.nav-drop-hd{
  display:block;font-family:var(--grotesk);font-size:.6rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text3);
  padding:.5rem .8rem .55rem
}
.nav-drop-menu a{
  display:block;padding:.6rem .8rem;border-radius:9px;
  transition:background .15s,transform .15s
}
.nav-drop-menu a:hover,.nav-drop-menu a:focus-visible{background:var(--blue-light);transform:translateX(2px)}
.nav-drop-menu a strong{
  display:block;font-family:var(--grotesk);font-size:.86rem;font-weight:600;
  letter-spacing:-.012em;color:var(--text);margin-bottom:.1rem
}
.nav-drop-menu a:hover strong,.nav-drop-menu a:focus-visible strong{color:var(--blue)}
.nav-drop-menu a em{display:block;font-style:normal;font-size:.76rem;color:var(--text3);line-height:1.45}
/* The dropdown's own links must not inherit the nav underline animation. */
.nav-drop-menu a::after{display:none!important}

@media (prefers-reduced-motion: reduce){
  .nav-drop-menu{transition:opacity .01s}
  .nav-drop-menu a:hover,.nav-drop-btn{transform:none!important}
}

/* ---- inside the mobile hamburger panel: always expanded, no overlay ---- */
@media(max-width:768px){
  .nav-drop{display:block;position:static;border-bottom:1px solid var(--border)}
  .nav-drop-link{display:block;padding:.85rem 0;font-size:1rem}
  .nav-drop-btn{display:none}
  .nav-drop-menu{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;border:none;border-radius:0;box-shadow:none;background:none;
    padding:0 0 .7rem .9rem;border-left:2px solid var(--border2);margin-bottom:.6rem
  }
  .nav-drop-menu::before{display:none}
  .nav-drop-hd{padding:.2rem 0 .5rem;font-size:.58rem}
  .nav-drop-menu a{padding:.62rem 0;border-radius:0}
  .nav-drop-menu a:hover,.nav-drop-menu a:focus-visible{background:none;transform:none}
  .nav-drop-menu a strong{font-size:.92rem}
  .nav-drop-menu a em{font-size:.78rem}
  /* The panel scrolls if the viewport is short. */
  header nav{max-height:calc(100dvh - 66px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* ============================================================================
   Small-viewport hardening
   Verified with headless Chromium at 320 / 360 / 375 / 768 / 1440.
   ========================================================================= */

/* iOS Safari zooms the page when a text field with font-size < 16px receives
   focus. Radios and checkboxes are exempt, so only real entry fields matter. */
@media(max-width:768px){
  .fg input[type="text"],.fg input[type="email"],.fg input[type="tel"],
  .fg input[type="url"],.fg input:not([type]),.fg select,.fg textarea,
  .g-input{font-size:16px}
}

/* At 320-360px the 2rem gutter leaves too little room for card content. */
@media(max-width:400px){
  .container,.hdr{padding-left:1.15rem;padding-right:1.15rem}
}

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content and pushes the document wider than the viewport. */
@media(max-width:480px){
  .prod-grid>*,.feat-stack>*,.caps-grid>*,.creds-grid>*,.founders-grid>*,
  .mv-grid>*,.vals-grid>*,.story-grid>*,.id-grid>*,.certs-grid>*,
  .gv-focus-grid>*,.gv-svc-grid>*,.l-hubs>*,.l-grid>*,.ir-grid>*,
  .acts>*,.risks>*,.pillars>*,.types>*,.verds>*{min-width:0}
  .prod-grid,.feat-stack,.caps-grid,.creds-grid,.gv-focus-grid,
  .gv-svc-grid,.l-hubs,.l-grid,.ir-grid{grid-template-columns:1fr}
}

/* Footer email is a standalone target, not an inline prose link. */
.mf-mail{padding:.5rem 0;min-height:32px;display:flex;align-items:center;justify-content:center}

/* Standalone links inside metadata rows need a real tap area. */
.gv-focus-meta dd a,.ir-ctls a{display:inline-block;padding:.3rem 0;min-height:30px}

/* The ScreenComply wordmark keeps its letter-spacing and overruns 320px. */
@media(max-width:360px){
  .sc-mark{font-size:1.05rem;letter-spacing:-.02em;white-space:normal;min-width:0}
  .sc-mark .ai{letter-spacing:0}
}

/* The open mobile nav panel must be fully opaque. At 98% alpha the large dark
   hero type behind it ghosts through and hurts legibility. */
@media(max-width:768px){
  header nav{
    background:#fff;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:0 24px 48px rgba(10,47,82,.2)
  }
}