/* ═════════════════════════════════════════════════════════════════════════
   AURIA — Design System (baseline 2026-05-18)
   Tokens aligned to Punch Design's official export. Internal alias names
   (--bg, --text, --accent, …) map to Punch tokens so existing rules keep working.
   Source of truth: design-ref/tokens.css
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Punch tokens (Figma export) — authoritative ── */
  --color-brand-primary:#0E1626;  /* matched to the hero background navy */
  --color-brand-secondary:#0c1220;
  --color-brand-accent:#F5B31E;
  --color-surface-1:#FFFFFF;
  --color-surface-2:#EDF1F7;
  --color-surface-3:#568296;
  --color-surface-inverse:#111A2E;
  --color-text-strong:#111A2E;
  --color-text-muted:#5F6A80;
  --color-text-dim:#BBBFC9;
  --color-text-inverse:#FFFFFF;
  --color-text-accent:#F5B31E;
  --color-border-subtle:#E5E5E5;
  --color-border-strong:#B3B3B3;
  --color-border-accent:#F5B31E;
  --color-status-success:#1E7A3C;
  --color-status-warning:#F5B31E;
  --color-status-error:#C53030;

  --type-family-display:"Hubot Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --type-family-body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --type-family-eyebrow:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --type-family-button:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --type-size-display:72px;
  --type-size-h1:56px;
  --type-size-h2:40px;
  --type-size-h3:28px;
  --type-size-h4:22px;
  --type-size-body-lg:18px;
  --type-size-body:16px;
  --type-size-body-sm:14px;
  --type-size-eyebrow:12px;
  --type-size-caption:12px;

  --type-lh-tight:1.05;
  --type-lh-snug:1.2;
  --type-lh-normal:1.5;
  --type-lh-loose:1.7;

  --radius-none:0px;
  --radius-sm:0px;
  --radius-md:0px;
  --radius-lg:0px;
  --radius-xl:0px;
  --radius-full:0px;
  --radius-pill:999px;

  --motion-duration-fast:150ms;
  --motion-duration-base:250ms;
  --motion-duration-slow:400ms;

  /* ── Internal aliases (preserve existing rule selectors) ── */
  --bg:var(--color-brand-primary);              /* was #0B1224 → now #111A2E (Punch primary) */
  --bg-2:var(--color-brand-secondary);          /* #0c1220 */
  --bg-3:#0A1020;
  --panel:rgba(17,26,46,0.72);
  --panel-2:rgba(17,26,46,0.55);
  --line:rgba(255,255,255,0.07);
  --line-mid:rgba(255,255,255,0.12);
  --line-strong:rgba(255,255,255,0.22);
  --text:var(--color-text-inverse);             /* #FFFFFF (was #ecf0f8) */
  --text-soft:rgba(220,228,245,0.72);
  --muted:rgba(180,200,230,0.42);
  --muted-2:rgba(180,200,230,0.22);
  --accent:var(--color-brand-accent);           /* #F5B31E */
  --accent-b:#FFD147;
  --accent-soft:rgba(245,179,30,0.12);
  --steel:var(--color-surface-3);               /* #568296 */
  --steel-b:#74A0B4;
  --navy:var(--color-brand-primary);
  --danger:var(--color-status-error);
  --ok:var(--color-status-success);

  --sans:var(--type-family-body);
  --display:var(--type-family-display);
  --mono:var(--type-family-eyebrow);

  --w-narrow:760px;
  --w-mid:1080px;
  --w-wide:1320px;

  --pad-x:clamp(20px,4vw,56px);
  /* Punch's 13-step spacing scale (authoritative — matches design-ref/tokens.css) */
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:40px;
  --space-8:48px;
  --space-9:64px;
  --space-10:80px;
  --space-11:120px;
  --space-12:160px;
}

/* Responsive spacing token override.
 * The design system's top-end spacing (160/120/80px) is sized for desktop
 * breathing room. On tablet/mobile those values consume 30-45% of the
 * viewport as padding, leaving sections feeling empty. Redefine the tokens
 * at smaller breakpoints so every `var(--space-N)` usage scales down in one
 * place — no per-rule overrides needed. */
@media (max-width: 1023px) {
  :root {
    --space-12: 96px;   /* was 160 */
    --space-11: 72px;   /* was 120 */
    --space-10: 56px;   /* was 80  */
    --space-9:  48px;   /* was 64  */
  }
}
@media (max-width: 767px) {
  :root {
    --space-12: 64px;   /* was 160 */
    --space-11: 56px;   /* was 120 */
    --space-10: 48px;   /* was 80  */
    --space-9:  40px;   /* was 64  */
    --space-8:  36px;   /* was 48  */
  }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100vh;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit}
::selection{background:var(--accent);color:var(--navy)}

/* Page ambient backdrop — DISABLED. Its opaque #0B1224→#070B16 gradient hid
 * the body's intended Background Texture + brand-primary navy (the design's
 * actual site background). Kept defined for reference; not rendered. */
.bg-stage{display:none;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-stage::before{
  content:"";position:absolute;inset:-10%;
  background:
    radial-gradient(800px 600px at 12% 8%,rgba(86,130,150,0.18),transparent 60%),
    radial-gradient(900px 700px at 88% 92%,rgba(245,179,30,0.10),transparent 60%),
    radial-gradient(1200px 1200px at 50% 50%,rgba(11,18,36,0) 30%,rgba(7,11,22,0.7) 100%),
    linear-gradient(180deg,#0B1224 0%,#070B16 100%);
}
.bg-stage::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1200px 800px at 50% 30%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(1200px 800px at 50% 30%,#000 30%,transparent 80%);
  opacity:.6;
}
.bg-grain{display:none;position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,0.7) 1px,transparent 1px);background-size:3px 3px}

/* ─── Header ─── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad-x);background:linear-gradient(180deg,rgba(11,18,36,0.85),rgba(11,18,36,0.55) 70%,rgba(11,18,36,0));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hdr-l{display:flex;align-items:center;gap:18px}
.hdr-logo{height:30px;width:auto;display:block}
.hdr-logo svg{height:100%;width:auto;display:block}
.hdr-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);padding-left:18px;border-left:1px solid var(--line-mid)}
.hdr-nav{display:flex;align-items:center;gap:6px}
.hdr-nav-item{position:relative}
.hdr-nav-btn{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);padding:10px 14px;border-radius:var(--radius-none);display:inline-flex;align-items:center;gap:6px;transition:color .2s,background .2s}
.hdr-nav-btn:hover,.hdr-nav-item.open .hdr-nav-btn{color:var(--text);background:rgba(255,255,255,0.04)}
.hdr-nav-btn .chev{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.55;transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .2s,border-color .25s}
.hdr-nav-btn:hover .chev{opacity:1;border-color:var(--accent);transform:rotate(45deg) translateY(1px)}
.hdr-nav-item.open .hdr-nav-btn .chev{transform:rotate(225deg) translateY(0);opacity:1;border-color:var(--accent)}
.hdr-r{display:flex;align-items:center;gap:10px}
.hdr-contact{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text);padding:10px 22px;border:1px solid rgba(255,255,255,0.20);border-radius:var(--radius-none);transition:background .25s,border-color .25s,color .25s}
.hdr-contact:hover{background:var(--accent);border-color:var(--accent);color:var(--navy)}

/* TALK TO US → prominent pill (Punch design) */
.hdr-contact--pill{background:var(--accent);color:var(--navy);border-color:var(--accent);padding:10px 18px;display:inline-flex;align-items:center;gap:10px;transition:background .25s,gap .25s,padding .25s}
.hdr-contact--pill:hover{background:var(--accent-b);border-color:var(--accent-b);color:var(--navy);gap:14px}
.hdr-contact-arrow{display:inline-block;font-family:var(--mono);font-size:.9em;transition:transform .25s}
.hdr-contact--pill:hover .hdr-contact-arrow{transform:translateX(2px)}
.hdr-burger{display:none}
.hdr-burger span{width:18px;height:1.5px;background:var(--text);display:block;transition:transform .25s}

/* Mega menu — sits below the header (z-index 50) but JS uses a 180ms close timer
   so the cursor can cross the small gap from button to panel without it snapping shut. */
.mega{position:fixed;left:0;right:0;top:64px;width:100vw;height:calc(100vh - 64px);z-index:55;pointer-events:none;opacity:0;background:rgba(7,11,22,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .25s}
.mega.open{pointer-events:auto;opacity:1}
.mega-inner{background:#0E1626;box-shadow:0 12px 32px rgba(0,0,0,0.5);padding:32px max(38px, calc((100vw - 1440px) / 2)) 56px;width:100%;height:100%;display:flex;flex-direction:column;gap:32px;position:relative;overflow-y:auto;transform:translateY(-8px);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.mega.open .mega-inner{transform:translateY(0)}
.mega-inner::before,.mega-inner::after{content:"";position:absolute;width:6px;height:6px;background:var(--accent);top:-3px}
.mega-inner::before{left:-3px}
.mega-inner::after{right:-3px}
/* Legacy .mega-col rules removed — superseded by .mega-col__title /
 * .mega-col__summary / .mega-col__products patterns below. */

/* Mobile drawer */
.mobile-drawer{position:fixed;inset:0;z-index:80;background:#0E1626;transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1),visibility 0s .35s;display:flex;flex-direction:column;overflow-y:auto;visibility:hidden}
.mobile-drawer[aria-hidden="false"]{transform:translateX(0);visibility:visible;transition:transform .35s cubic-bezier(.22,1,.36,1),visibility 0s}
.mobile-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad-x);border-bottom:1px solid var(--line);position:sticky;top:0;background:#0E1626;z-index:2}
.mobile-drawer__brand img{height:28px;width:auto;display:block}
.mobile-drawer__nav{flex:1;padding:8px var(--pad-x) 24px;display:flex;flex-direction:column}
.mobile-drawer .md-section{border-bottom:1px solid var(--line)}
.mobile-drawer .md-section:last-child{border-bottom:none}
.mobile-drawer .md-section__toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 0;background:transparent;border:none;cursor:pointer;font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.01em;color:var(--text);text-align:left;line-height:1.2;transition:color .15s}
.mobile-drawer .md-section__toggle:hover{color:var(--accent)}
.mobile-drawer .md-section__caret{transition:transform .25s cubic-bezier(.22,1,.36,1);color:var(--text-soft);flex-shrink:0}
.mobile-drawer .md-section__toggle[aria-expanded="true"]{color:var(--accent)}
.mobile-drawer .md-section__toggle[aria-expanded="true"] .md-section__caret{transform:rotate(180deg);color:var(--accent)}
.mobile-drawer .md-section__panel{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.22,1,.36,1)}
.mobile-drawer .md-section__toggle[aria-expanded="true"]+.md-section__panel{max-height:1000px;padding-bottom:14px}
.mobile-drawer .md-section a{display:block;padding:8px 0;color:var(--text);font-size:14px;font-family:var(--sans);line-height:1.35;transition:padding .15s,color .15s}
.mobile-drawer .md-section a:hover{color:var(--accent);padding-left:6px}
.mobile-drawer .md-section a.md-section__toggle{display:flex;padding:18px 0;font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.01em;color:var(--text)}
.mobile-drawer .md-section a.md-section__toggle:hover{color:var(--accent);padding:18px 0}
.mobile-drawer .md-section__see{margin-top:10px;color:var(--accent) !important;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid var(--line);padding-top:10px !important}
/* Two-level groups (e.g. Products: family -> individual products) nested
   inside a single top-level .md-section__panel. Each family is its own
   nested accordion — .md-section__toggle + .md-section__panel is reused
   verbatim (same collapse mechanics, same JS binds .md-section__toggle
   generically), just visually smaller via .md-section__group-title.
   Sub-links get a dimmer, indented treatment (mirrors the desktop mega
   menu's .mega-col__title / .mega-col__products pattern). */
.mobile-drawer .md-section__group{margin-bottom:4px}
.mobile-drawer .md-section .md-section__toggle.md-section__group-title{padding:12px 0;font-size:15px;border-bottom:1px solid var(--line)}
.mobile-drawer .md-section .md-section__sublist a{padding:6px 0 6px 14px;font-size:13px;color:var(--text-soft)}
.mobile-drawer .md-section .md-section__sublist a:hover{color:var(--accent);padding-left:18px}
/* The last family's own border-bottom sits right above .md-section__see's
   border-top (the collapsed sublist between them is ~0px tall), reading as
   a doubled hairline. Drop the see-link's border only in that adjacency. */
.mobile-drawer .md-section__group+.md-section__see{border-top:none;padding-top:0!important}
.mobile-drawer__cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--navy);font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:18px;margin:0;border-top:1px solid var(--line);position:sticky;bottom:0;transition:background .2s,gap .2s}
.mobile-drawer__cta:hover{background:#FFC847;gap:14px;color:var(--navy)}
.mobile-drawer-close{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.16);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,border-color .2s,transform .2s}
.mobile-drawer-close:hover{background:rgba(255,255,255,0.08);border-color:var(--accent);color:var(--accent);transform:rotate(90deg)}
/* Burger animates to X when drawer open */
.hdr-burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hdr-burger.is-open span:nth-child(2){opacity:0}
.hdr-burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ─── Layout shell ─── */
.shell{position:relative;z-index:5;padding-top:88px;min-height:100vh}
.container{max-width:var(--w-wide);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.container-narrow{max-width:var(--w-narrow);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.container-mid{max-width:var(--w-mid);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* ─── Typography ─── */
.eyebrow{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";display:inline-block;width:18px;height:1px;background:var(--accent)}
.eyebrow-soft{color:var(--steel-b)}
.eyebrow-soft::before{background:var(--steel-b)}

h1,h2,h3,h4,h5,h6{font-family:var(--display);font-weight:700;color:var(--text);letter-spacing:.02em;line-height:1.12}
h1{font-size:clamp(2.2rem,5.2vw,3.8rem);letter-spacing:.05em;text-transform:uppercase}
h2{font-size:clamp(1.7rem,3.5vw,2.6rem);letter-spacing:.04em;text-transform:uppercase}
h3{font-size:clamp(1.2rem,2.2vw,1.55rem);letter-spacing:.04em}
h4{font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase}
h5{font-size:.82rem;font-family:var(--mono);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
h6{font-size:.7rem;font-family:var(--mono);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--steel-b)}

p{font-size:1rem;line-height:1.78;color:var(--text-soft);margin-bottom:1.05rem}
p strong{color:var(--text);font-weight:600}
.lead{font-size:1.18rem;line-height:1.66;color:var(--text);max-width:60ch}
small{font-size:.8rem;color:var(--muted)}

a.inline{color:var(--accent);border-bottom:1px solid rgba(245,179,30,0.4);transition:color .15s,border-color .15s}
a.inline:hover{color:var(--accent-b);border-color:var(--accent-b)}
.content a{color:var(--accent);border-bottom:1px solid rgba(245,179,30,0.25)}
.content a:hover{color:var(--accent-b);border-color:var(--accent-b)}

ul,ol{margin:0 0 1.2rem 1.2rem;color:var(--text-soft);line-height:1.78}
li{margin-bottom:.4rem}
blockquote{border-left:2px solid var(--accent);padding:8px 0 8px 22px;margin:24px 0;font-style:italic;color:var(--text);font-family:var(--display);font-size:1.1rem;letter-spacing:.03em;line-height:1.5}
blockquote cite{display:block;margin-top:12px;font-family:var(--mono);font-style:normal;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;border-radius:var(--radius-none);transition:transform .2s,background .2s,color .2s,border-color .2s;cursor:pointer;border:1px solid transparent;line-height:1}
.btn-primary{background:var(--accent);color:var(--navy)}
.btn-primary:hover{background:var(--accent-b);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{background:rgba(255,255,255,0.04);border-color:var(--text)}
.btn-steel{background:var(--steel);color:#fff}
.btn-steel:hover{background:var(--steel-b)}
.btn-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);transition:gap .2s,color .2s}
.btn-link:hover{gap:14px;color:var(--accent-b)}

/* ─── Breadcrumb ─── */
.crumb{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:32px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumb a{color:var(--text-soft);transition:color .15s}
.crumb a:hover{color:var(--accent)}
.crumb .sep{color:var(--muted-2);font-weight:400}
.crumb .here{color:var(--text)}

/* ─── Frame component (decorative dotted corners) ─── */
.frame{position:relative;padding:36px 32px;background:var(--panel-2);border:1px solid var(--line-mid);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.frame::before,.frame::after,.frame>.fc1,.frame>.fc2{content:"";position:absolute;width:8px;height:8px;background:var(--accent);border-radius:0}
.frame::before{top:-4px;left:-4px}
.frame::after{top:-4px;right:-4px}
.frame>.fc1{bottom:-4px;left:-4px;display:block}
.frame>.fc2{bottom:-4px;right:-4px;display:block}

/* ─── Section base ─── */
.section{padding:var(--space-6) 0;position:relative}
.section-tight{padding:var(--space-5) 0}
.section-wide{padding:var(--space-7) 0}
.section-divider{border-top:1px solid var(--line)}
.section-head{margin-bottom:var(--space-4);display:flex;flex-direction:column;gap:14px;max-width:760px}
.section-head .eyebrow{margin-bottom:0}
.section-head h2{margin:0}
.section-head p{margin:0;font-size:1.05rem}

/* ─── Hero ─── */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;padding:120px 0 80px}
.hero-globe{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-globe canvas{width:100%!important;height:100%!important;opacity:.65;display:block}
.hero-vig{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 60% at 22% 50%,rgba(11,18,36,0.85),rgba(11,18,36,0) 70%),
    linear-gradient(180deg,rgba(11,18,36,0) 0%,rgba(11,18,36,0.85) 100%);}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:64px;align-items:center;width:100%}
.hero-copy{max-width:640px}
.hero-copy h1{font-size:clamp(2.6rem,6vw,4.8rem);line-height:.98;letter-spacing:.06em;margin-top:18px;margin-bottom:24px}
.hero-copy h1 span{display:block}
.hero-copy p{font-size:1.1rem;color:var(--text);max-width:48ch;margin-bottom:18px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.hero-aside{position:relative;z-index:3}

/* Page hero (inner pages) */
.phero{position:relative;padding:120px 0 60px;min-height:46vh;display:flex;align-items:flex-end}
.phero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 80% at 0% 0%,rgba(86,130,150,0.18),transparent 60%),
    radial-gradient(50% 70% at 100% 100%,rgba(245,179,30,0.08),transparent 60%);
}
.phero-inner{width:100%}
.phero h1{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:18px}
.phero .crumb{margin-bottom:24px}
.phero .lead{color:var(--text);max-width:60ch}

/* ─── Data frame panel (mimics symposium dframe) ─── */
.dframe{position:relative;padding:20px 22px;background:rgba(17,26,46,0.62);border:1px solid var(--line-mid);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);min-width:220px}
.dframe::before,.dframe::after,.dframe>.dc1,.dframe>.dc2{content:"";position:absolute;width:5px;height:5px;background:#fff;opacity:.85}
.dframe::before{top:-2px;left:-2px}
.dframe::after{top:-2px;right:-2px}
.dframe>.dc1{bottom:-2px;left:-2px}
.dframe>.dc2{bottom:-2px;right:-2px}
.dframe-title{font-family:var(--mono);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:14px}
.dframe-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.dframe-row:last-child{border-bottom:0}
.dframe-lbl{font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,0.45)}
.dframe-val{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:#fff}
.dframe-bar{margin-top:16px;height:2px;background:rgba(255,255,255,0.07);position:relative;overflow:hidden}
.dframe-bar-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--accent),var(--accent-b));width:75%}

/* ─── Card grid ─── */
.cards{display:grid;gap:18px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;padding:28px 24px;background:var(--panel-2);border:1px solid var(--line-mid);transition:transform .25s,border-color .25s,background .25s;display:flex;flex-direction:column;gap:14px;min-height:200px}
.card::before,.card::after,.card>.cc1,.card>.cc2{content:"";position:absolute;width:5px;height:5px;background:#fff;opacity:.55}
.card::before{top:-2px;left:-2px}
.card::after{top:-2px;right:-2px}
.card>.cc1{bottom:-2px;left:-2px}
.card>.cc2{bottom:-2px;right:-2px}
.card:hover{transform:translateY(-2px);border-color:var(--accent);background:rgba(17,26,46,0.85)}
.card-eyebrow{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.card-title{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.18;color:var(--text)}
.card-body{font-size:.92rem;line-height:1.65;color:var(--text-soft)}
.card-media{margin:-28px -24px 0;height:160px;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#1a253f,#0c1424)}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:opacity .3s,transform .4s}
.card:hover .card-media img{opacity:1;transform:scale(1.04)}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px dashed var(--line)}
.card-date{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.card-link{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
.card-link::after{content:"→"}

/* news/post card variant */
.post-card{display:flex;flex-direction:column;padding:0;background:var(--panel-2);border:1px solid var(--line-mid);overflow:hidden;min-height:340px;transition:transform .25s,border-color .25s}
.post-card::before,.post-card::after,.post-card>.cc1,.post-card>.cc2{content:"";position:absolute;width:5px;height:5px;background:#fff;opacity:.55}
.post-card{position:relative}
.post-card::before{top:-2px;left:-2px}
.post-card::after{top:-2px;right:-2px}
.post-card>.cc1{bottom:-2px;left:-2px}
.post-card>.cc2{bottom:-2px;right:-2px}
.post-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.post-card-img{aspect-ratio:16/10;background:linear-gradient(135deg,#1a253f,#0c1424);overflow:hidden;border-bottom:1px solid var(--line)}
.post-card-img img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .25s,transform .35s}
.post-card:hover .post-card-img img{opacity:1;transform:scale(1.04)}
.post-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card-date{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.post-card h3{font-size:1.05rem;line-height:1.25}
.post-card h3 a{display:block}
.post-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.post-card .post-card-link{margin-top:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);padding-top:14px;border-top:1px dashed var(--line);transition:color .25s}
.post-card-link span{display:inline-block;transition:transform .25s}
.post-card:hover .post-card-link{color:var(--accent)}
.post-card:hover .post-card-link span{transform:translateX(4px)}

/* solution + product callout tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.tile{position:relative;padding:36px 30px 28px;background:var(--panel-2);border:1px solid var(--line-mid);display:flex;flex-direction:column;gap:18px;transition:transform .25s,border-color .25s,background .25s;min-height:280px;text-align:left;overflow:hidden}
.tile::before,.tile::after,.tile>.cc1,.tile>.cc2{content:"";position:absolute;width:5px;height:5px;background:#fff;opacity:.55}
.tile::before{top:-2px;left:-2px}
.tile::after{top:-2px;right:-2px}
.tile>.cc1{bottom:-2px;left:-2px}
.tile>.cc2{bottom:-2px;right:-2px}
.tile:hover{transform:translateY(-3px);border-color:var(--accent);background:rgba(17,26,46,0.9)}
.tile-num{position:absolute;top:14px;right:18px;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;color:var(--muted)}
.tile-icon{width:54px;height:54px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);border:1px solid rgba(245,179,30,0.3);border-radius:var(--radius-none)}
.tile-icon img,.tile-icon svg{width:30px;height:30px;display:block;filter:brightness(0) saturate(100%) invert(76%) sepia(73%) saturate(643%) hue-rotate(355deg) brightness(102%) contrast(95%)}
.tile h3{font-size:1.1rem;line-height:1.2}
.tile p{font-size:.92rem;color:var(--text-soft);margin:0;flex:1}
.tile-cta{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:8px;margin-top:6px}
.tile-cta::after{content:"→";transition:transform .2s}
.tile:hover .tile-cta::after{transform:translateX(4px)}

/* ─── Feature row / split layout ─── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:var(--space-5) 0}
.split-img{position:relative;border:1px solid var(--line-mid);overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,#1a253f,#0c1424)}
.split-img img{width:100%;height:100%;object-fit:cover;display:block}
.split-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,36,0) 60%,rgba(11,18,36,0.4) 100%);pointer-events:none}
.split.reverse>:first-child{order:2}

/* ─── Banner / stripe ─── */
.banner{position:relative;padding:var(--space-5) 0;background:linear-gradient(135deg,rgba(86,130,150,0.18),rgba(245,179,30,0.06));border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.banner::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px);background-size:48px 48px;opacity:.4;pointer-events:none}
.banner h2{margin-bottom:18px}
.banner p{max-width:60ch;margin:0 auto 22px;color:var(--text)}

/* ─── Logo strip ─── */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;align-items:center;justify-items:center;margin-top:var(--space-4)}
.logos img{max-width:120px;max-height:80px;width:auto;height:auto;opacity:.75;filter:grayscale(1) brightness(1.4);transition:opacity .25s,filter .25s}
.logos img:hover{opacity:1;filter:grayscale(0) brightness(1)}

/* ─── Stats ─── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:var(--space-4)}
.stat{padding:24px 22px;background:var(--panel-2);border:1px solid var(--line-mid);position:relative}
.stat::before{display:none}
.stat-v{font-family:var(--display);font-weight:700;font-size:2rem;letter-spacing:.04em;color:var(--text);display:block}
.stat-l{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:8px;display:block}

/* ─── Lists with custom bullets ─── */
.feat-list{list-style:none;margin-left:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px;margin-top:var(--space-3)}
.feat-list li{position:relative;padding:14px 14px 14px 38px;background:var(--panel-2);border:1px solid var(--line);font-family:var(--sans);font-size:.92rem;color:var(--text);letter-spacing:.01em;line-height:1.4;font-weight:500}
.feat-list li::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:14px;height:14px;border:1px solid var(--accent);background:transparent}
.feat-list li::after{content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);width:6px;height:6px;background:var(--accent)}

/* ─── Content (markdown body) ─── */
.content{max-width:760px;margin:0 auto}
.content > * + * {margin-top:1rem}
.content > h2{margin-top:2.6rem;margin-bottom:1rem;padding-top:1.4rem;border-top:1px solid var(--line);position:relative}
.content > h2::before{content:"";position:absolute;top:-1px;left:0;width:48px;height:2px;background:var(--accent)}
.content > h3{margin-top:2rem;margin-bottom:.8rem;color:var(--accent-b);text-transform:none;letter-spacing:.02em;font-size:1.25rem;font-family:var(--display);font-weight:600}
.content > h4{margin-top:1.4rem;margin-bottom:.6rem}
.content img{margin:1.8rem 0;border:1px solid var(--line-mid)}
.content figure{margin:1.8rem 0}
.content figure img{margin:0}
.content figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:10px;text-align:center}
.content em{color:var(--text-soft)}
.content hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.content ul{margin-left:1.4rem}
.content ul li::marker{color:var(--accent)}
.content ol li::marker{color:var(--accent);font-family:var(--mono);font-weight:700}

.content-wide{max-width:var(--w-mid);margin:0 auto}

/* ─── Leadership card ─── */
.lead-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lead-card{background:var(--panel-2);border:1px solid var(--line-mid);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:border-color .25s,transform .25s}
/* Ambar, igual que las esquinas del retrato en la ficha individual
   (.lead-bio-portrait::before/::after), para que el mismo elemento no
   cambie de color entre el listado y el detalle. */
.lead-card::before,.lead-card::after,.lead-card>.cc1,.lead-card>.cc2{content:"";position:absolute;width:5px;height:5px;background:var(--accent);opacity:.9}
.lead-card::before{top:-2px;left:-2px}
.lead-card::after{top:-2px;right:-2px}
.lead-card>.cc1{bottom:-2px;left:-2px}
.lead-card>.cc2{bottom:-2px;right:-2px}
.lead-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.lead-card-img{aspect-ratio:1/1;overflow:hidden;background:linear-gradient(135deg,#1a253f,#0c1424);position:relative}
.lead-card-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2);transition:filter .3s,transform .3s}
.lead-card:hover .lead-card-img img{filter:grayscale(0);transform:scale(1.04)}
.lead-card-body{padding:18px 20px 22px}
.lead-card-name{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.lead-card-role{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}

/* leadership detail page */
.lead-detail{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start;margin-top:24px}
.lead-detail-img{aspect-ratio:1/1;border:1px solid var(--line-mid);overflow:hidden;background:linear-gradient(135deg,#1a253f,#0c1424)}
.lead-detail-img img{width:100%;height:100%;object-fit:cover}
.lead-detail-meta h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:6px}
.lead-detail-meta .role{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:24px;display:block}

/* ─── Form ─── */
.form{display:grid;gap:18px;max-width:680px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.field input,.field textarea,.field select{background:rgba(255,255,255,0.04);border:1px solid var(--line-mid);color:var(--text);font-family:var(--sans);font-size:.95rem;padding:13px 14px;border-radius:0;outline:none;transition:border-color .2s,background .2s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);background:rgba(245,179,30,0.04)}
.field textarea{min-height:140px;resize:vertical}
.field small{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-family:var(--mono);margin-top:2px}
.field-req{color:var(--accent)}

.contact-info{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:var(--space-4)}
.contact-info .frame{padding:24px 22px}
.contact-info h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;color:var(--accent);text-transform:uppercase;margin-bottom:12px}
.contact-info p{font-size:.9rem;line-height:1.7;color:var(--text);margin:0}
.contact-info a{color:var(--text-soft)}
.contact-info a:hover{color:var(--accent)}

/* ─── Tag pills ─── */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;padding:6px 14px;background:var(--panel-2);border:1px solid var(--line-mid);font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);transition:all .2s}
.tag:hover{border-color:var(--accent);color:var(--accent)}

/* ─── Footer ─── */
.foot{position:relative;z-index:5;background:linear-gradient(180deg,rgba(7,11,22,0) 0,#070B16 60%);border-top:1px solid var(--line);padding:var(--space-6) 0 32px;margin-top:var(--space-6)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px}
.foot-brand .hdr-logo{height:32px;margin-bottom:18px}
.foot-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.foot-brand p{font-size:.88rem;line-height:1.6;color:var(--text-soft);max-width:32ch}
.foot-col h5{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.foot-col a{display:block;font-family:var(--sans);font-size:.88rem;color:var(--text-soft);padding:5px 0;transition:color .15s,padding .15s}
.foot-col a:hover{color:var(--text);padding-left:4px}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.foot-bottom a{color:var(--text-soft)}
.foot-bottom a:hover{color:var(--accent)}
.foot-status{display:flex;align-items:center;gap:8px}
.foot-status .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px rgba(116,215,163,0.5);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ─── Subtle border breathing — kept ONLY on .dframe where it was designed ─── */
@keyframes dframePulse{
  0%,100%{border-color:var(--line-mid);box-shadow:0 0 0 rgba(86,130,150,0)}
  50%{border-color:rgba(86,130,150,0.35);box-shadow:0 0 24px rgba(86,130,150,0.08),inset 0 0 0 1px rgba(86,130,150,0.04)}
}
.dframe{animation:dframePulse 6s ease-in-out infinite}
.dframe:hover{animation-play-state:paused}

/* ─── Richer hover: scan line + corner accent intensification ─── */
.card,.tile,.post-card,.lead-card{overflow:hidden}
.card::before,.tile::before,.post-card::before,.lead-card::before,
.card::after,.tile::after,.post-card::after,.lead-card::after,
.card>.cc1,.card>.cc2,.tile>.cc1,.tile>.cc2,
.post-card>.cc1,.post-card>.cc2,.lead-card>.cc1,.lead-card>.cc2{
  transition:background .25s,opacity .25s,box-shadow .25s,width .25s,height .25s;
}
.card:hover::before,.card:hover::after,.card:hover>.cc1,.card:hover>.cc2,
.tile:hover::before,.tile:hover::after,.tile:hover>.cc1,.tile:hover>.cc2,
.post-card:hover::before,.post-card:hover::after,.post-card:hover>.cc1,.post-card:hover>.cc2,
.lead-card:hover::before,.lead-card:hover::after,.lead-card:hover>.cc1,.lead-card:hover>.cc2{
  background:var(--accent);opacity:1;width:7px;height:7px;box-shadow:0 0 8px rgba(245,179,30,0.7)
}
/* Scan line that sweeps across on hover */
.card>.scan,.tile>.scan,.post-card>.scan,.lead-card>.scan{
  position:absolute;top:0;left:-30%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(245,179,30,0.06),transparent);
  pointer-events:none;opacity:0;transition:opacity .25s
}
.card:hover>.scan,.tile:hover>.scan,.post-card:hover>.scan,.lead-card:hover>.scan{
  opacity:1;animation:scanSweep 1.2s ease-out
}
@keyframes scanSweep{0%{left:-30%}100%{left:130%}}

/* ─── Globe dim when scrolled past hero ─── */
.hero-globe canvas{transition:opacity .6s ease}
body.globe-dim .hero-globe canvas{opacity:.22}

/* ─── Logo marquee ─── */
.marquee{position:relative;overflow:hidden;padding:var(--space-4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(11,18,36,0.4)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.marquee-track{display:flex;align-items:center;gap:64px;width:max-content;animation:marqueeRoll 50s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:54px;min-width:120px;opacity:.55;transition:opacity .25s,filter .25s;filter:grayscale(1) brightness(1.6)}
.marquee-item:hover{opacity:1;filter:grayscale(0) brightness(1)}
.marquee-item img{max-height:48px;width:auto;display:block}
.marquee-item .text{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft)}
.marquee-eyebrow{text-align:center;margin-bottom:var(--space-3)}
@keyframes marqueeRoll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ─── Stat counter v2 — bigger, accent-ready ─── */
.stat-v[data-target]{transition:color .3s}

/* ─── Tag chip filter strip ─── */
.chip-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-4)}
.chip{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);padding:8px 14px;border:1px solid var(--line-mid);background:transparent;cursor:pointer;transition:all .2s}
.chip:hover{color:var(--text);border-color:var(--text-soft)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--navy)}
.post-card.hide-by-filter{display:none}

/* ─── Lightbox ─── */
.lbox{position:fixed;inset:0;z-index:200;background:rgba(7,11,22,0.96);display:none;align-items:center;justify-content:center;padding:5vh 5vw;cursor:zoom-out;backdrop-filter:blur(8px)}
.lbox.open{display:flex;animation:lboxFade .25s ease}
.lbox img{max-width:100%;max-height:80vh;object-fit:contain;border:1px solid var(--line-mid)}
.lbox-cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft)}
.lbox-close{position:absolute;top:24px;right:24px;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text);border:1px solid var(--line-mid);padding:10px 18px;background:rgba(11,18,36,0.6);cursor:pointer}
.content img{cursor:zoom-in}
@keyframes lboxFade{0%{opacity:0}100%{opacity:1}}

/* ─── Feature card (deprecated — kept as fallback. No corners, no lift) ─── */
.feature-card{position:relative;padding:28px 0 28px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;min-height:auto}
.feature-card .tile-num{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;color:var(--accent);margin-bottom:4px}
.feature-card h3{font-family:var(--display);font-size:1.2rem;line-height:1.25;letter-spacing:.03em;text-transform:uppercase;color:var(--text)}
.feature-card-body{font-size:.95rem;line-height:1.7;color:var(--text-soft)}
.feature-card-body p{margin:0 0 .6em;color:var(--text-soft);font-size:.95rem;line-height:1.7}
.feature-card-body p:last-child{margin-bottom:0}

/* ─── Shared bg-hero (full-bleed image hero for all inner pages) ─── */
/* Content padding-top accounts for: 88px margin offset + 71px fixed header + ~30px breathing room */
.bg-hero{position:relative;display:flex;align-items:flex-end;padding:200px 0 90px;overflow:hidden;margin-top:-88px}
.bg-hero-tall{min-height:88vh;align-items:center;padding:220px 0 100px}
.bg-hero-mid{min-height:62vh;padding:200px 0 90px}
.bg-hero-short{min-height:52vh;padding:190px 0 70px}
.bg-hero-bg{position:absolute;inset:0;z-index:0}
.bg-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;filter:saturate(.9) contrast(1.08)}
/* Generative-canvas alternative to .bg-hero-bg for imageless heroes — a
   subtle animated line-art field sits behind the standard vignette. */
.bg-hero-canvas{position:absolute;inset:0;z-index:0}
.bg-hero-canvas canvas{width:100%;height:100%;display:block;opacity:1}
.bg-hero-vig{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(11,18,36,0.55) 0%,rgba(11,18,36,0.78) 60%,rgba(11,18,36,0.96) 100%),
    radial-gradient(60% 80% at 20% 60%,rgba(11,18,36,0.55) 0%,transparent 70%);
}
.bg-hero-inner{position:relative;z-index:2;width:100%}
.bg-hero-inner .crumb{margin-bottom:18px}
.bg-hero-title{font-size:clamp(2.4rem,6.5vw,5rem);line-height:.96;letter-spacing:.05em;margin:0 0 22px;text-transform:uppercase}
.bg-hero-title span{display:block}
.bg-hero-title span:last-child{color:var(--accent)}
.bg-hero-tall .bg-hero-title{font-size:clamp(3rem,8vw,6.5rem)}
.bg-hero-short .bg-hero-title{font-size:clamp(2rem,5vw,3.6rem);margin-bottom:18px}
.bg-hero-short .bg-hero-title span{display:inline}
.bg-hero-short .bg-hero-title span:last-child{color:var(--text)}
.bg-hero-sub{max-width:60ch;font-size:1.1rem;color:var(--text)}
.bg-hero-short .bg-hero-sub{font-size:1rem}

/* ─── Leadership bio hero ─── */
/* Sin overflow:hidden a proposito: cualquier ancestro con overflow distinto
   de visible convierte al sticky del retrato en un elemento normal. El
   desenfoque del fondo se recorta en el propio .lead-bio-bg con clip-path,
   que no crea contenedor de scroll. */
.lead-bio-hero{position:relative;padding:180px 0 96px;margin-top:-88px;display:flex;align-items:flex-start}
.lead-bio-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:blur(48px) saturate(1.1) brightness(.55);opacity:.5;clip-path:inset(0)}
.lead-bio-vig{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,18,36,0.75) 0%,rgba(11,18,36,0.92) 60%,rgba(11,18,36,0.98) 100%)}
/* Trama de rejilla, la misma que el resto del sitio: celda relativa a la
   altura de ventana (2.75vh) para que quede en fase con la rejilla WebGL
   de los heroes. Va sobre la vineta y bajo el contenido. */
.lead-bio-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);background-size:2.75vh 2.75vh}
.lead-bio-inner{position:relative;z-index:2;width:100%}
.lead-bio-grid{display:grid;grid-template-columns:minmax(300px,30%) 1fr;gap:clamp(32px,4vw,64px);align-items:start;margin-top:24px}
.lead-bio-portrait{position:sticky;top:104px;align-self:start;aspect-ratio:4/5;border:1px solid var(--line-mid);overflow:hidden;background:linear-gradient(135deg,#1a253f,#0c1424)}
.lead-bio-portrait::before,.lead-bio-portrait::after{content:"";position:absolute;width:8px;height:8px;background:var(--accent);z-index:2}
.lead-bio-portrait::before{top:-4px;left:-4px}
.lead-bio-portrait::after{top:-4px;right:-4px}
.lead-bio-portrait img{width:100%;height:100%;object-fit:cover}
/* La ficha es un solo bloque: retrato a la izquierda, y a la derecha cargo,
   nombre y biografia. El .content venia de una seccion aparte con
   .container-mid, que ya no existe; aqui hereda el ancho de la columna. */
.lead-bio-meta .content{margin-top:clamp(20px,2.6vh,32px)}
.lead-bio-meta .content p{max-width:68ch}
.lead-bio-meta .content ul{max-width:68ch}
.lead-bio-role{display:inline-block;margin:0 0 4px;font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
/* El h1 global escala hasta 5rem, pensado para heroes a pagina completa.
   Aqui comparte fila con el retrato y esa medida se come la columna. */
.lead-bio-meta .bg-hero-title{font-size:clamp(2rem,3.4vw,3.1rem);margin-top:0;margin-bottom:10px}
/* El crumb global deja 32px; en la ficha abre un bloque muy alto y necesita
   mas aire. Acotado a .lead-bio-inner: .crumb lo usan muchas otras paginas. */
@media (min-width:990px){
  .lead-bio-inner .crumb{margin-bottom:80px}
}
/* Apilado a 989 y no a los 740 de antes: con el retrato al 30% la columna de
   texto se estrecha demasiado antes de ese punto. Y al apilar se retira el
   sticky -no tiene sentido con el retrato encima del texto, y en pantallas
   cortas se quedaria clavado ocupando media ventana. */
@media (max-width:989px){
  .lead-bio-grid{grid-template-columns:1fr;gap:24px}
  .lead-bio-portrait{position:static;max-width:260px}
}

/* ─── Brand identity grid (editorial — no corners, no hover lift) ─── */
.brand-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.brand-card{position:relative;padding:48px 40px;border-bottom:1px solid var(--line)}
.brand-card:nth-child(odd){border-right:1px solid var(--line)}
.brand-card-num{position:absolute;top:24px;right:32px;font-family:var(--mono);font-weight:600;font-size:.7rem;letter-spacing:.22em;color:var(--muted)}
.brand-card-title{font-family:var(--display);font-size:clamp(2rem,3vw,2.6rem);font-weight:700;letter-spacing:.02em;color:var(--accent);text-transform:none;margin-bottom:14px;line-height:1}
.brand-card p{color:var(--text-soft);font-size:.96rem;line-height:1.7;margin:0;max-width:46ch}
@media (max-width:740px){.brand-grid{grid-template-columns:1fr}.brand-card:nth-child(odd){border-right:0}}

/* ─── About banner section ─── */
.about-banner-section{position:relative;padding:var(--space-7) 0;overflow:hidden}
.about-banner-bg{position:absolute;inset:0;z-index:0}
.about-banner-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) contrast(1.05) brightness(.45)}
.about-banner-vig{position:absolute;inset:0;z-index:1;background:radial-gradient(80% 100% at 50% 50%,rgba(11,18,36,0.55),rgba(11,18,36,0.95))}
.about-banner-inner{position:relative;z-index:2}

/* ─── ISO certification section ─── */
.iso-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
.iso-badge{padding:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.04)}
.iso-badge img{max-width:280px;width:100%;height:auto}
@media (max-width:740px){.iso-grid{grid-template-columns:1fr}}

/* ─── Careers page ─── */
.careers-hero{position:relative;min-height:88vh;display:flex;align-items:center;padding:180px 0 100px;overflow:hidden;margin-top:-88px}
.careers-hero-bg{position:absolute;inset:0;z-index:0}
.careers-hero-bg img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(1.1)}
.careers-hero-vig{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(11,18,36,0.55) 0%,rgba(11,18,36,0.7) 60%,rgba(11,18,36,0.96) 100%),
    radial-gradient(60% 80% at 20% 50%,rgba(11,18,36,0.55) 0%,transparent 70%);
}
.careers-hero-inner{position:relative;z-index:2;max-width:var(--w-wide)}
.careers-hero-meta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.careers-hero-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);padding:8px 14px;border:1px solid var(--line-mid);background:rgba(11,18,36,0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.careers-hero-title{font-size:clamp(3rem,8vw,6.5rem);line-height:.92;letter-spacing:.06em;margin:0 0 26px;text-transform:uppercase}
.careers-hero-title span{display:block}
.careers-hero-title span:last-child{color:var(--accent)}
.careers-hero-sub{max-width:54ch;font-size:1.2rem;color:var(--text)}
.careers-hero-scroll{position:absolute;bottom:32px;left:var(--pad-x);font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);animation:scrollBob 2.4s ease-in-out infinite}
@keyframes scrollBob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}

/* Careers mission + stats split */
.careers-mission{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.careers-mission h2{font-size:clamp(1.6rem,3vw,2.4rem);text-transform:none;letter-spacing:.01em}
.stats-careers{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:0}
.stats-careers .stat{padding:22px 20px;min-height:104px;display:flex;flex-direction:column;justify-content:flex-end}
.stats-careers .stat-v{font-size:1.9rem}

/* Life at Auria photo grid */
.careers-life{position:relative}
.life-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:18px}
.life-photo{position:relative;border:1px solid var(--line);overflow:hidden;background:linear-gradient(135deg,#1a253f,#0c1424);margin:0}
.life-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease,filter .5s}
.life-photo:hover img{transform:scale(1.04);filter:saturate(1.05) contrast(1.05)}
.life-photo figcaption{position:absolute;bottom:0;left:0;right:0;padding:16px 18px;background:linear-gradient(180deg,transparent,rgba(11,18,36,0.95));color:var(--text);font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase}
.life-photo-lg{grid-row:1 / span 2;aspect-ratio:auto}
.life-photo-lg img{aspect-ratio:4/5;height:100%;min-height:520px}
.life-photo:not(.life-photo-lg):not(.life-photo-quote) img{aspect-ratio:4/3}
.life-photo-quote{display:flex;align-items:center;padding:32px 28px;background:rgba(17,26,46,0.55);border-left:2px solid var(--accent);min-height:280px}
.life-photo-quote blockquote{margin:0;border:none;padding:0;font-family:var(--display);font-size:1.1rem;line-height:1.5;color:var(--text);letter-spacing:.02em}
.life-photo-quote cite{display:block;margin-top:14px;font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}

/* Benefits grouped grid */
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.benefit-group{position:relative;padding:32px 28px;border-top:2px solid var(--accent);background:linear-gradient(180deg,rgba(245,179,30,0.02),transparent)}
.benefit-group ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.benefit-group li{position:relative;padding-left:20px;font-size:.9rem;line-height:1.5;color:var(--text-soft);margin:0}
.benefit-group li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:1px;background:var(--accent)}

/* Careers CTA banner refinement */
.banner-careers{padding:var(--space-5) var(--pad-x);background:
  radial-gradient(40% 100% at 50% 0%,rgba(245,179,30,0.10),transparent 60%),
  linear-gradient(135deg,rgba(86,130,150,0.20),rgba(245,179,30,0.06))
}

@media (max-width:980px){
  .careers-hero{min-height:72vh;padding:120px 0 70px}
  .careers-mission{grid-template-columns:1fr}
  .stats-careers{grid-template-columns:repeat(4,1fr)}
  .life-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .life-photo-lg{grid-row:auto}
  .life-photo-lg img{min-height:auto;aspect-ratio:16/10}
  .benefits-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .careers-hero-title{font-size:clamp(2.4rem,11vw,3.4rem)}
  .stats-careers{grid-template-columns:repeat(2,1fr)}
}

/* ─── Narrative figure (orphan images, no corner accents) ─── */
.narrative-figure{position:relative;margin:var(--space-4) auto;max-width:var(--w-mid);border-top:1px solid var(--line);overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,#1a253f,#0c1424)}
.narrative-figure img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(1.05)}

/* ─── Page-hero hero image (no corner accents — keep clean) ─── */
.phero-hero-img{position:relative;margin-top:36px;border:1px solid var(--line);overflow:hidden;aspect-ratio:21/9;background:linear-gradient(135deg,#1a253f,#0c1424);max-width:1180px}
.phero-hero-img img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(1.05)}

/* ─── Skip-to-content (a11y) ─── */
.skip-link{position:absolute;top:-100px;left:18px;z-index:200;background:var(--accent);color:var(--navy);padding:14px 22px;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;transition:top .2s}
.skip-link:focus{top:18px;outline:2px solid var(--text)}

/* ─── Tile bullets + body (used by hubs and category pages) ─── */
.tile-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--text-soft)}
.tile-bullets li{position:relative;padding-left:18px;font-size:.85rem;line-height:1.5;margin:0}
.tile-bullets li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--accent)}
.tile-body{font-size:.92rem;color:var(--text-soft);line-height:1.6}
.tile-body p{margin-bottom:.6em;color:var(--text-soft);font-size:.92rem;line-height:1.6}
.tile-body p:last-child{margin-bottom:0}

/* Make tile flex column so cta sits at bottom even with variable content */
.tile{display:flex;flex-direction:column;gap:14px}
.tile h3{margin-top:6px}
.tile .tile-cta{margin-top:auto}

/* ─── HubSpot form overrides (.hs-mount wraps hbspt.forms.create target) ─── */
.hs-mount{padding:28px 28px 32px;max-width:680px}
.hs-mount .hs-form-field{margin-bottom:18px}
.hs-mount .hs-form-field>label,.hs-mount .hs-form-required-field{font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;display:block;margin-bottom:8px}
.hs-mount .hs-form-required{color:var(--accent);margin-left:4px}
.hs-mount .input{margin:0!important}
.hs-mount input[type=text],
.hs-mount input[type=email],
.hs-mount input[type=tel],
.hs-mount input[type=number],
.hs-mount input[type=url],
.hs-mount input[type=search],
.hs-mount select,
.hs-mount textarea{
  width:100%!important;background:rgba(255,255,255,0.04);border:1px solid var(--line-mid);color:var(--text);
  font-family:var(--sans);font-size:.95rem;padding:13px 14px;border-radius:0;outline:none;
  transition:border-color .2s,background .2s;box-shadow:none;
}
.hs-mount input:focus,.hs-mount textarea:focus,.hs-mount select:focus{border-color:var(--accent);background:rgba(245,179,30,0.04)}
.hs-mount textarea{min-height:140px;resize:vertical}
.hs-mount .hs-form-booleancheckbox label,
.hs-mount .hs-form-radio label{font-family:var(--sans);font-size:.92rem;color:var(--text-soft);text-transform:none;letter-spacing:0;font-weight:400}
.hs-mount fieldset{max-width:100%!important;border:0;padding:0;margin:0}
.hs-mount fieldset.form-columns-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hs-mount fieldset.form-columns-2 .hs-form-field{width:100%!important;float:none!important}
.hs-mount fieldset.form-columns-2 .input{margin-right:0!important}
.hs-mount .hs-error-msgs,.hs-mount .hs-error-msg{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--danger);margin-top:6px;list-style:none;padding:0}
.hs-mount .hs-submit{margin-top:8px}
.hs-mount .hs-button,.hs-mount input[type=submit]{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;
  font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--accent);color:var(--navy);border:1px solid var(--accent);border-radius:var(--radius-none);
  cursor:pointer;transition:transform .2s,background .2s;line-height:1
}
.hs-mount .hs-button:hover,.hs-mount input[type=submit]:hover{background:var(--accent-b);border-color:var(--accent-b);transform:translateY(-1px)}
.hs-mount .submitted-message{font-family:var(--display);font-size:1.1rem;color:var(--text);padding:32px 0;text-align:center}
@media (max-width:640px){.hs-mount fieldset.form-columns-2{grid-template-columns:1fr}}

/* ─── Reduced-motion ─── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none}
  .hero-globe{display:none}
  .rv{opacity:1!important;transform:none!important}
}

/* ─── Tiny meta strip (mimics symposium sdata) ─── */
.metastrip{position:fixed;bottom:14px;left:0;right:0;z-index:3;display:flex;justify-content:space-between;padding:0 var(--pad-x);pointer-events:none;font-family:var(--display);font-size:.46rem;letter-spacing:.16em;color:rgba(255,255,255,0.08);text-transform:uppercase}
.metastrip span{display:inline-block}

/* ─── Bottom segment nav (only on home) ─── */
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;background:rgba(11,18,36,0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase}
.bnav button{flex:1;padding:18px 14px;color:var(--muted);border-right:1px solid var(--line);transition:background .2s,color .2s}
.bnav button:last-child{border-right:0}
.bnav button:hover{color:var(--text-soft);background:rgba(255,255,255,0.025)}
.bnav button.on{color:var(--accent);background:rgba(245,179,30,0.06)}

/* ─── Helpers ─── */
.center{text-align:center}
.mt-1{margin-top:8px}.mt-2{margin-top:14px}.mt-3{margin-top:22px}.mt-4{margin-top:34px}.mt-5{margin-top:52px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:14px}.mb-3{margin-bottom:22px}.mb-4{margin-bottom:34px}.mb-5{margin-bottom:52px}
.muted{color:var(--muted)}
.text-soft{color:var(--text-soft)}
.accent{color:var(--accent)}
.flex{display:flex;gap:14px}
.flex-center{display:flex;align-items:center;justify-content:center;gap:14px}
.between{display:flex;align-items:center;justify-content:space-between}
.gap-2{gap:14px}.gap-3{gap:22px}.gap-4{gap:34px}
.full{grid-column:1/-1}
.hide{display:none!important}

/* ─── Responsive ─── */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-aside{display:none}
  .mega-inner{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
  .foot-grid .foot-col:nth-child(n+5){display:none}
  .logos{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:980px){
  .hdr-nav{display:none}
  .hdr-burger{display:flex}
  .hdr-tag{display:none}
  .cards-3,.cards-4,.tiles,.lead-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:24px}
  .split.reverse>:first-child{order:0}
  .contact-info{grid-template-columns:1fr}
  .lead-detail{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  .foot-brand{grid-column:1/-1}
  .feat-list{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--pad-x:18px}
  .hero{min-height:74vh;padding:100px 0 60px}
  .cards-2,.cards-3,.cards-4,.tiles,.lead-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .logos{grid-template-columns:repeat(3,1fr)}
  .hero-copy h1{font-size:clamp(2rem,9vw,3rem)}
  .phero{padding:100px 0 40px}
  h2{font-size:clamp(1.4rem,5vw,1.9rem)}
}

/* Reveal animations */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.rv.rv-in{opacity:1;transform:translateY(0)}
.rv-d1{transition-delay:.08s}
.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}

/* Leadership placeholder */
.lead-card-img-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a253f,#0c1424);border-bottom:1px solid var(--line)}
.lead-card-img-placeholder span{font-family:var(--display);font-weight:700;font-size:2.4rem;letter-spacing:.06em;color:var(--accent);text-transform:uppercase;opacity:.85}

/* Page-hero refinements */
.phero{padding:140px 0 50px}
.phero h1{margin-top:8px}
.phero .crumb{margin-bottom:18px}

/* Better quote / blockquote treatment for product pages */
.content p:has(+ p:first-letter):only-of-type{margin-bottom:4px}

/* Heavy long-line subhead under hero */
.lead{font-family:var(--display);letter-spacing:.02em}

/* ═══════════════════════════════════════════════════════════════════════════
   EDITORIAL PRIMITIVES — typography utilities, NOT box components
   Inspired by Palantir / Anduril / Kratos
   ═══════════════════════════════════════════════════════════════════════════ */

/* Massive numeral anchor — used by keypoints + section markers */
.numeral-xl{font-family:var(--display);font-weight:700;font-size:clamp(3rem,7vw,5.5rem);line-height:.9;letter-spacing:.04em;color:var(--accent);opacity:.32;font-variant-numeric:tabular-nums;display:block}

/* Editorial h1 — left-anchored, oversized */
.h-editorial{font-size:clamp(2.6rem,8vw,7rem);font-family:var(--display);font-weight:900;line-height:.92;letter-spacing:.03em;text-transform:uppercase;color:var(--text);margin:0}
.h-editorial span{display:block}
.h-editorial .accent{color:var(--accent)}

/* Mono uppercase muted small — for prefixes, dates, region tags */
.text-meta{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* Animated horizontal divider that "draws" in on reveal */
.divider-h{position:relative;height:1px;background:var(--line);margin:var(--space-5) 0;overflow:hidden}
.divider-h::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width 1.2s cubic-bezier(.22,.61,.36,1)}
.divider-h.rv-in::after{width:80px}

/* ═══════════════════════════════════════════════════════════════════════════
   PATTERN — .keypoints  (Palantir editorial numbered list)
   Vertical stack, no boxes. Number left | content right. Divider between.
   ═══════════════════════════════════════════════════════════════════════════ */
.keypoints{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.keypoint{display:grid;grid-template-columns:140px 1fr;gap:48px;padding:var(--space-5) 0;border-bottom:1px solid var(--line);align-items:start}
.keypoint-num{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,5vw,4.5rem);line-height:.9;letter-spacing:.04em;color:var(--accent);opacity:.85;font-variant-numeric:tabular-nums}
.keypoint-body{max-width:64ch}
.keypoint-eyebrow{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--steel-b);margin-bottom:10px;display:block}
.keypoint h3{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--text);margin-bottom:14px;line-height:1.15}
.keypoint p{margin:0;font-size:1.02rem;line-height:1.75;color:var(--text-soft)}
.keypoint-body > p + p{margin-top:1.25rem}
.keypoint-body img{display:block;max-width:100%;height:auto;margin:2rem 0;border-radius:2px}
.keypoint-body > p + img,.keypoint-body > img + p,.keypoint-body > h3 + p{margin-top:1.5rem}
.keypoint-body ul,.keypoint-body ol{margin:1.25rem 0 0;padding-left:1.4rem}
.keypoint-body ul li,.keypoint-body ol li{margin:0.4rem 0;color:var(--text-soft);line-height:1.7}
.keypoint:hover .keypoint-num{opacity:1;transition:opacity .3s}
@media (max-width:740px){
  .keypoint{grid-template-columns:1fr;gap:14px;padding:var(--space-4) 0}
  .keypoint-num{font-size:2.4rem}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PATTERN — .specsheet  (Anduril technical key:value rows)
   Flat list. Mono label left | display value right. Line divider.
   ═══════════════════════════════════════════════════════════════════════════ */
.specsheet{border-top:1px solid var(--line);margin-top:var(--space-3)}
.spec-row{display:grid;grid-template-columns:minmax(180px,28%) 1fr;gap:32px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:background .25s,padding-left .25s}
.spec-row:hover{background:rgba(245,179,30,0.025);padding-left:8px}
.spec-label{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.spec-value{font-family:var(--sans);font-size:.98rem;line-height:1.55;color:var(--text);font-weight:500}
@media (max-width:740px){
  .spec-row{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .spec-label{font-size:.6rem}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PATTERN — .inline-list  (Palantir editorial 2-col typographic table)
   Numbered + uppercase name + italic mono descriptor. No boxes.
   ═══════════════════════════════════════════════════════════════════════════ */
.inline-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px;border-top:1px solid var(--line)}
.inline-row{position:relative;display:grid;grid-template-columns:48px 1fr;gap:18px;padding:22px 0 22px 14px;border-bottom:1px solid var(--line);align-items:start;transition:padding .25s}
.inline-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width .25s}
.inline-row:hover{padding-left:24px}
.inline-row:hover::before{width:2px}
.inline-num{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.18em;color:var(--muted);padding-top:4px}
.inline-name{font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text);line-height:1.2;margin-bottom:4px;display:block}
.inline-desc{font-family:var(--mono);font-size:.72rem;font-style:italic;letter-spacing:.06em;color:var(--text-soft);text-transform:none;line-height:1.5}
@media (max-width:740px){.inline-list{grid-template-columns:1fr;gap:0}}

/* ═══════════════════════════════════════════════════════════════════════════
   PATTERN — .mission-rows  (Anduril/Kratos asymmetric photo + spec rows)
   Alternating direction. Numeral overlay on photo. Spec strip below content.
   ═══════════════════════════════════════════════════════════════════════════ */
.mission-rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.mission-row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:var(--space-6) 0;border-bottom:1px solid var(--line);align-items:center}
.mission-row.reverse > .mission-row-photo{order:2}
.mission-row-photo{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#1a253f,#0c1424)}
.mission-row-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .5s}
.mission-row-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,36,0) 60%,rgba(11,18,36,0.45) 100%);pointer-events:none;transition:opacity .35s}
.mission-row:hover .mission-row-photo img{transform:scale(1.04);filter:saturate(1.05)}
.mission-row:hover .mission-row-photo::after{opacity:.65}
.mission-row-num{position:absolute;top:18px;left:22px;z-index:2;font-family:var(--display);font-weight:700;font-size:clamp(2.8rem,5vw,4.5rem);line-height:.9;letter-spacing:.04em;color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 6px 18px rgba(0,0,0,.5)}
.mission-row-meta{display:flex;flex-direction:column;gap:16px;max-width:52ch}
.mission-row-eyebrow{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--steel-b);display:flex;align-items:center;gap:10px}
.mission-row-eyebrow::before{content:"";display:inline-block;width:18px;height:1px;background:var(--steel-b)}
.mission-row-meta h3{font-family:var(--display);font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:700;line-height:1.1;letter-spacing:.02em;color:var(--text);text-transform:none;margin:0}
.mission-row-meta > p{margin:0;font-size:1rem;line-height:1.7;color:var(--text-soft);max-width:48ch}
.mission-row-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:18px;margin-top:4px;border-top:1px solid var(--line)}
.mission-row-spec{display:flex;flex-direction:column;gap:4px}
.mission-row-spec-label{font-family:var(--mono);font-size:.55rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.mission-row-spec-value{font-family:var(--sans);font-size:.92rem;line-height:1.35;color:var(--text);font-weight:500}
.mission-row-cta{margin-top:6px;font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;transition:gap .3s,color .3s;align-self:flex-start}
.mission-row-cta::after{content:"→";transition:transform .3s}
.mission-row:hover .mission-row-cta{gap:16px;color:var(--accent-b)}
.mission-row:hover .mission-row-cta::after{transform:translateX(4px)}
@media (max-width:740px){
  .mission-row{grid-template-columns:1fr;gap:20px;padding:var(--space-4) 0}
  .mission-row.reverse > .mission-row-photo{order:0}
  .mission-row-photo{aspect-ratio:16/10}
  .mission-row-num{font-size:2.4rem;top:12px;left:14px}
  .mission-row-specs{grid-template-columns:1fr 1fr;gap:14px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PATTERN — .showcase-grid  (Anduril photo-first sub-products)
   Full-bleed image tiles. NO borders, NO corner accents. Title overlay.
   ═══════════════════════════════════════════════════════════════════════════ */
.showcase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line)}
.showcase-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.showcase-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.showcase-tile{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;background:linear-gradient(135deg,#1a253f,#0c1424);cursor:pointer}
.showcase-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .5s}
.showcase-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,36,0) 30%,rgba(11,18,36,0.85) 100%);pointer-events:none;transition:background .35s}
.showcase-tile:hover img{transform:scale(1.045);filter:saturate(1.1)}
.showcase-tile:hover::after{background:linear-gradient(180deg,rgba(11,18,36,0) 20%,rgba(11,18,36,0.9) 100%)}
.showcase-caption{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:24px 26px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.showcase-caption h3{font-family:var(--display);font-size:1.3rem;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:var(--text);margin:0;flex:1}
.showcase-cta{font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);white-space:nowrap;transition:transform .3s}
.showcase-cta::after{content:" →";display:inline-block;transition:transform .3s}
.showcase-tile:hover .showcase-cta::after{transform:translateX(6px)}
@media (max-width:740px){
  .showcase-grid,.showcase-grid.cols-4{grid-template-columns:1fr}
  .showcase-tile{aspect-ratio:16/9}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PATTERN — .collage  (asymmetric photo grid for narrative pages)
   ═══════════════════════════════════════════════════════════════════════════ */
.collage{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:repeat(2,minmax(220px,1fr));gap:14px;margin-top:var(--space-4)}
.collage-hero{grid-column:1;grid-row:1 / span 2;position:relative;overflow:hidden;background:linear-gradient(135deg,#1a253f,#0c1424)}
.collage-secondary{position:relative;overflow:hidden;background:linear-gradient(135deg,#1a253f,#0c1424)}
.collage-quote{display:flex;align-items:center;padding:28px 26px;background:rgba(17,26,46,0.55);border-left:2px solid var(--accent)}
.collage img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.collage .collage-hero img,.collage-secondary img{filter:saturate(.95) contrast(1.05)}
.collage-hero:hover img,.collage-secondary:hover img{transform:scale(1.04)}
.collage-cap{position:absolute;bottom:0;left:0;right:0;padding:14px 18px;background:linear-gradient(180deg,transparent,rgba(11,18,36,0.92));font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-soft);z-index:2}
.collage-quote blockquote{margin:0;border:none;padding:0;font-family:var(--display);font-size:1.05rem;line-height:1.5;color:var(--text);letter-spacing:.02em;font-style:normal}
.collage-quote cite{display:block;margin-top:14px;font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
@media (max-width:980px){
  .collage{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,200px)}
  .collage-hero{grid-row:1 / span 2;grid-column:1 / span 2}
}
@media (max-width:640px){.collage{grid-template-columns:1fr;grid-template-rows:none}.collage-hero{grid-row:auto;grid-column:auto;min-height:280px}.collage-secondary,.collage-quote{min-height:220px}}

/* ═══════════════════════════════════════════════════════════════════════════
   PATTERN — .section-nav  (AeroVironment sticky scrollspy)
   Horizontal chips that appear sticky after hero. Anchor + smooth scroll.
   ═══════════════════════════════════════════════════════════════════════════ */
.section-nav{position:sticky;top:64px;z-index:20;background:rgba(11,18,36,0.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-mid);transition:transform .3s;margin-bottom:var(--space-3)}
.section-nav-inner{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;padding:0 var(--pad-x);max-width:var(--w-wide);margin:0 auto}
.section-nav-inner::-webkit-scrollbar{display:none}
.section-nav a{position:relative;flex:0 0 auto;font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-soft);padding:18px 18px;transition:color .2s;white-space:nowrap}
.section-nav a::after{content:"";position:absolute;bottom:0;left:18px;right:18px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.section-nav a:hover{color:var(--text)}
.section-nav a.active{color:var(--accent)}
.section-nav a.active::after{transform:scaleX(1)}
.section-nav .section-nav-label{padding:18px 18px 18px 0;color:var(--muted);font-size:.58rem;letter-spacing:.24em;border-right:1px solid var(--line);margin-right:6px}

/* ═══════════════════════════════════════════════════════════════════════════
   PATTERN — .editorial-hero  (no full-bleed image, just typography)
   For solution detail pages — Palantir minimal hero.
   ═══════════════════════════════════════════════════════════════════════════ */
.editorial-hero{position:relative;padding:200px 0 var(--space-6);margin-top:-88px;background:
  radial-gradient(60% 80% at 12% 30%,rgba(86,130,150,0.18) 0%,transparent 60%),
  radial-gradient(50% 70% at 90% 70%,rgba(245,179,30,0.08) 0%,transparent 60%),
  linear-gradient(180deg,#0B1224 0%,#0a1020 100%)}
.editorial-hero-inner{position:relative;z-index:2;max-width:var(--w-wide);margin:0 auto;padding:0 var(--pad-x)}
.editorial-hero-meta{display:flex;align-items:baseline;gap:22px;margin-bottom:var(--space-3);flex-wrap:wrap}
.editorial-hero-num{font-family:var(--display);font-weight:700;font-size:2rem;color:var(--accent);opacity:.6;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.editorial-hero-sub{max-width:54ch;font-size:1.15rem;line-height:1.6;color:var(--text);margin-top:var(--space-3)}
.editorial-hero-actions{margin-top:var(--space-4);display:flex;gap:14px;flex-wrap:wrap}

/* ─────────────────────────────────────────────────────────────────────────
   MEGA MENU — wireframe-matched layout: header (label + X close) on top,
   then body that splits into lead column (1fr) and a 2-col items grid (3fr).
   The 2-col grid is uniform regardless of item count (matches wireframe).
   ───────────────────────────────────────────────────────────────────────── */
.mega-header{display:flex;align-items:center;justify-content:space-between}
.mega-label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft)}
.mega-body{display:grid;grid-template-columns:minmax(240px,1fr) 3fr;gap:48px;align-items:start}
.mega-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 48px}
@media (max-width:960px){
  .mega-body{grid-template-columns:1fr;gap:32px}
  .mega-grid{grid-template-columns:1fr}
}
.mega-lead{display:flex;flex-direction:column;gap:18px}
.mega-lead__desc{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--text-soft);margin:0;max-width:40ch}
.mega-lead__cta{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text);display:inline-flex;align-items:center;gap:8px;padding-bottom:6px;border-bottom:1px solid var(--line-mid);align-self:flex-start;transition:gap .2s,border-color .16s}
.mega-lead__cta:hover{gap:14px;border-bottom-color:var(--accent);color:var(--accent)}
.mega-col{display:flex;flex-direction:column;gap:10px}
.mega-col__title{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-0.005em;color:var(--text);padding:0 0 8px;border-bottom:1px solid var(--line-mid);line-height:1.25;display:block;transition:color .15s}
.mega-col__title:hover{color:var(--accent)}
.mega-col__summary{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--text-soft);margin:0}
.mega-col__products{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.mega-col__products li{margin:0;border:none}
.mega-col__products a{display:block;font-family:var(--sans);font-size:13px;line-height:1.4;color:var(--text-soft);padding:0;border:none;transition:color .15s,padding .15s}
.mega-col__products a:hover{color:var(--text);padding-left:4px}
/* Long product lists (>5 items) split into 2 internal sub-columns to match
 * the wireframe. CSS columns auto-balance items across both. */
.mega-col__products--multi{column-count:2;column-gap:24px;display:block}
.mega-col__products--multi li{break-inside:avoid;display:block;margin-bottom:6px}
.mega-col__more{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin-top:12px;padding-bottom:6px;border-bottom:1px solid var(--line-mid);align-self:flex-start;transition:gap .2s,border-color .16s,color .16s}
.mega-col__more:hover{gap:10px;border-bottom-color:var(--accent);color:var(--accent)}

/* Mega menu close button (top-right of the header). Inline within
 * .mega-header which uses flex justify-content:space-between. */
.mega-close{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.16);
  color:var(--text);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s;flex-shrink:0;
}
.mega-close:hover{background:rgba(255,255,255,0.08);border-color:var(--accent);color:var(--accent);transform:rotate(90deg)}

/* Footer "Talk to Us →" CTA inside the brand column (wireframe v2 layout) */
.foot-brand .foot-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);padding-bottom:6px;border-bottom:1px solid var(--line-mid);
  transition:gap .2s,border-color .16s,color .16s
}
.foot-brand .foot-cta:hover{gap:12px;border-bottom-color:var(--accent);color:var(--accent)}
/* Reset the foot-grid to 4 evenly distributed columns to match wireframe */
.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr !important}
@media (max-width:960px){.foot-grid{grid-template-columns:1fr 1fr !important}}
@media (max-width:600px){.foot-grid{grid-template-columns:1fr !important}}

/* ─── Products-hub component set (promoted from products.html) ─── */

/* Hero CTA spacing under .bg-hero-sub */
.bg-hero-cta{margin:28px 0 0;display:flex;gap:var(--space-4);flex-wrap:wrap}

/* Proof card — kp-card variant with proof points revealed on hover.
 * Touch devices (hover:none) show the points permanently. */
.kp-card--proof .kp-card__points{list-style:none;margin:var(--space-4) 0 0;padding:var(--space-4) 0 0;border-top:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;gap:8px}
.kp-card--proof .kp-card__points li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--color-text-dim)}
.kp-card--proof .kp-card__points li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--color-brand-accent)}
.kp-card--proof .kp-card__hint{display:none;font-family:var(--type-family-eyebrow);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted);margin:var(--space-4) 0 0;transition:opacity .2s}
@media (hover:hover){
  .kp-card--proof .kp-card__hint{display:block}
  .kp-card--proof:hover .kp-card__hint,.kp-card--proof:focus-within .kp-card__hint{opacity:0}
  .kp-card--proof .kp-card__points{max-height:0;opacity:0;overflow:hidden;margin-top:0;padding-top:0;border-top-color:transparent;transition:max-height .35s ease,opacity .3s ease,margin-top .3s ease,padding-top .3s ease}
  .kp-card--proof:hover .kp-card__points,.kp-card--proof:focus-within .kp-card__points{max-height:280px;opacity:1;margin-top:var(--space-4);padding-top:var(--space-4);border-top-color:rgba(255,255,255,0.08)}
}

/* Numbered kp-card (interoperability rows) */
.kp-card__num{display:block;font-family:var(--type-family-eyebrow);font-size:12px;letter-spacing:.16em;color:var(--color-brand-accent);margin:0 0 var(--space-4)}

/* Family tabs — tabbed product-family browser with per-family product listings.
 * Buttons keep authored casing (HeliOS) — no text-transform here. */
.ftabs{border:1px solid rgba(255,255,255,0.10);border-radius:2px;background:rgba(255,255,255,0.02)}
.ftabs__bar{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(255,255,255,0.10)}
.ftabs__btn{appearance:none;background:transparent;border:0;border-right:1px solid rgba(255,255,255,0.10);padding:18px 12px;font-family:var(--type-family-display);font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--color-text-dim);cursor:pointer;position:relative;transition:background-color .25s,color .25s}
.ftabs__btn:last-child{border-right:0}
.ftabs__btn:hover{color:var(--color-text-inverse);background:rgba(255,255,255,0.04)}
.ftabs__btn.is-active{color:var(--color-text-inverse)}
.ftabs__btn.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--color-brand-accent)}
.ftabs__panel{display:none;padding:var(--space-7)}
.ftabs__panel.is-active{display:block}
.ftabs__intro{display:grid;grid-template-columns:1fr;gap:var(--space-5);align-items:start;margin-bottom:var(--space-7)}
@media (min-width:900px){.ftabs__intro{grid-template-columns:minmax(0,1fr) auto}}
.ftabs__wordmark{height:32px;width:auto;display:block;margin:0 0 var(--space-4)}
.ftabs__desc{font-size:16px;line-height:1.65;color:var(--color-text-dim);max-width:60ch;margin:0}
.ftabs__prodgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:768px){.ftabs__prodgrid{grid-template-columns:repeat(2,1fr)}}
.ftabs__prod{display:block;padding:18px 20px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:2px;transition:border-color .25s,background-color .25s}
a.ftabs__prod:hover{background:rgba(255,255,255,0.05);border-color:var(--color-brand-accent)}
.ftabs__prod-name{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--type-family-display);font-size:16px;font-weight:500;color:var(--color-text-inverse);margin:0}
.ftabs__prod-name .ar{color:var(--color-brand-accent);font-size:14px}
.ftabs__prod-desc{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--color-text-dim)}

/* Stats row — 3-up variant (Key Metrics inside a section) */
.stats--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.stats--3{grid-template-columns:1fr}}

/* FAQ accordion — native <details>, full-width answers, plus/cross icon */
/* ── FAQ: one treatment, every page ──────────────────────────────────────────
   27 pages carry a data-section="faq" block and they all use the same markup:
   .section__eyebrow + .section__headline + .faq > .faq__item. Keep it that way.
   The accordion fills its .container, opens on a hairline, and paints nothing
   of its own - the section background shows through.
   The product-families hub used to override this with max-width:980px, its own
   heavier border-top and an ambient cyan glow, which made it the only FAQ on the
   site that read differently. Those are gone; do not reintroduce a per-page FAQ
   rule. If the treatment has to change, change it here so all 27 move together.
   Note .section__header does not exist in this markup - three pages carried a
   max-width rule for it that never matched anything. */
.faq{border-top:1px solid rgba(255,255,255,0.10);max-width:none;margin:0}
/* Side rails for the FAQ on pages that have no page-level ones.
   11 of the 27 FAQ pages carry .grid-frame divs inside <main>: absolutely
   positioned hairlines at centre +/-600px, from below the hero to the foot of
   the document, shown from 1248px. The other 16 - every product detail page
   except CPAW - have none, so their FAQ sat unframed while the family pages
   above them were framed.
   :not(:has(.grid-frame)) is what keeps the two from stacking. Both sit at the
   same x with the same 1px and the same rgba(255,255,255,0.12), so on a page
   that already has rails a second line would double the alpha and leave the FAQ
   stretch visibly brighter than the rail above and below it. This way each page
   gets exactly one.
   Matching the grid-frame values rather than picking new ones is deliberate: on
   the day those 16 pages gain real rails, this rule switches itself off and the
   line does not move. */
/* Closing line where the FAQ opens. The section above ends exactly where the
   FAQ begins, so without it the side rails start against nothing and the frame
   reads open at the top.
   It belongs to the FAQ, not to whatever precedes it. 17 product pages used to
   draw it from a border-bottom their own <style> put on .stat-section, which
   left the ten pages with a different section above - the five /missions/
   children, the four family pages and the hub - with no line at all, and made
   the junction depend on what happened to sit above rather than on the FAQ
   itself. Those local border-bottoms are gone; this is the single source. */
.section[data-section="faq"]{border-top:1px solid rgba(255,255,255,0.13)}
main:not(:has(.grid-frame)) .section[data-section="faq"]{position:relative}
main:not(:has(.grid-frame)) .section[data-section="faq"]::before,
main:not(:has(.grid-frame)) .section[data-section="faq"]::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;left:50%;
  background:rgba(255,255,255,0.12);z-index:1;pointer-events:none;display:none}
main:not(:has(.grid-frame)) .section[data-section="faq"]::before{transform:translateX(-600px)}
main:not(:has(.grid-frame)) .section[data-section="faq"]::after{transform:translateX(599px)}
@media (min-width:1248px){
  main:not(:has(.grid-frame)) .section[data-section="faq"]::before,
  main:not(:has(.grid-frame)) .section[data-section="faq"]::after{display:block}
}
.section[data-section="faq"],
.section[data-section="faq"] details,
.section[data-section="faq"] summary{background:transparent}
.faq__item{border-bottom:1px solid rgba(255,255,255,0.10)}
.faq__summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none}
.faq__summary::-webkit-details-marker{display:none}
.faq__q{font-family:var(--type-family-display);font-size:clamp(16px,1.5vw,19px);font-weight:500;line-height:1.35;color:var(--color-text-inverse);transition:color .2s}
.faq__summary:hover .faq__q{color:var(--color-brand-accent)}
.faq__icon{position:relative;flex-shrink:0;width:14px;height:14px}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--color-brand-accent);transition:transform .25s ease}
.faq__icon::before{left:0;right:0;top:6px;height:2px}
.faq__icon::after{top:0;bottom:0;left:6px;width:2px}
.faq__item[open] .faq__icon::after,.faq__item.is-expanded .faq__icon::after{transform:scaleY(0)}
.faq__a{padding:0 0 26px;font-size:15.5px;line-height:1.7;color:var(--color-text-dim);margin:0}

/* ─── Products-track additions (hub catalog + T1 detail pages) ─── */

/* 4-up kp grid (solution chips, proof strips) */
@media (min-width: 768px){ .kp-grid.kp-grid--4{grid-template-columns:repeat(4,1fr)} }

/* Stats row with text values (proof strips where the "value" is a phrase) */
.stats--text .stat-v{font-size:1.15rem;line-height:1.3;letter-spacing:.01em}

/* Hub product catalog row — name/tagline/problem left, features+use-cases right */
.prow{display:grid;grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-7);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:2px;transition:border-color .25s,background-color .25s}
.prow:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.16)}
@media (min-width:900px){.prow{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.prow+.prow{margin-top:18px}
.prow__name{font-family:var(--type-family-display);font-size:clamp(19px,1.8vw,24px);font-weight:500;letter-spacing:-0.01em;color:var(--color-text-inverse);margin:0 0 var(--space-3);line-height:1.25}
.prow__tag{font-size:15.5px;line-height:1.6;color:var(--color-text-inverse);margin:0 0 var(--space-3);font-weight:500}
.prow__body{font-size:14.5px;line-height:1.65;color:var(--color-text-dim);margin:0 0 var(--space-4)}
.prow__cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--type-family-eyebrow);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-brand-accent)}
.prow__cta .ar{transition:transform .2s}
.prow__cta:hover .ar{transform:translateX(4px)}
.prow__cta--dead{color:var(--color-text-muted);cursor:default}
.prow__lists{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media (min-width:640px){.prow__lists{grid-template-columns:1fr 1fr}}
.prow__list-title{font-family:var(--type-family-eyebrow);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-dim);margin:0 0 10px}
.prow__lists .tile-bullets li{font-size:.82rem}

/* Category label between catalog groups */
.cat-label{font-family:var(--type-family-eyebrow);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--color-brand-accent);margin:var(--space-9) 0 var(--space-5);padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.10)}
.cat-label:first-of-type{margin-top:0}
.kp-card .tile-bullets{margin-top:var(--space-4)}
.split .prow__list-title{margin-top:var(--space-4)}

/* ── Feature split rows, numbered (.split--num) ─────────────────────────────
   Replaces the image-half variant of data-section="feature_split_rows" on the
   product pages, where no photography exists and .split-img rendered as an
   empty 4:3 gradient box. Layout is number | copy | capabilities, so both
   columns carry content and nothing is padding. The numeral reuses
   .combo__num and the list reuses .prow__list-title + .tile-bullets
   unchanged. Declared after the .split rules and their @media block above, so
   it wins the cascade at every width without needing !important. */
.splitrows{border-top:1px solid var(--line-mid);--num-col:clamp(42px,3.8vw,56px)}
/* The numeral column is a FIXED width, not auto. Each row is its own grid
   container, so an auto column sizes to that row's own numeral — "01" is
   narrower than "04" and the copy column would start at a different x on
   every row (measured: 228 / 236 / 236 / 239 / 237). A fixed width makes the
   columns line up down the whole stack. */
.split--num{grid-template-columns:var(--num-col,52px) minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,2.6vw,40px);align-items:start;margin:0;padding:var(--space-6) 0;border-bottom:1px solid var(--line-mid)}
.split--num .combo__num{font-size:clamp(30px,2.6vw,42px)}
.split--num .kp-card__title{margin:0 0 var(--space-3)}
.split--num .kp-card__body{margin:0}
.split--num .prow__list-title{margin:0 0 var(--space-3)}
@media (max-width:980px){
  .split--num{grid-template-columns:var(--num-col,52px) minmax(0,1fr);gap:14px clamp(16px,3vw,24px);padding:var(--space-5) 0}
  .split--num>:last-child{grid-column:2}
}