/* L19 — Shared design system
Doctrine: true dark, high contrast, no blue, no gradients.
Accent = L19 red. Data-first, operator-grade. */
:root {
--bg-0: #0A0B0C;
--bg-1: #0F1113;
--bg-2: #14171A;
--bg-3: #1A1D20;
--line: #23272B;
--line-2: #2E3338;
--text: #F2F2F2;
--text-2: #C9CCD0;
--muted: #8A8F96;
--dim: #5C6166;
--accent: #E24329;
--accent-ink: #FFF2EF;
--accent-wash: rgba(226, 67, 41, 0.12);
--accent-line: rgba(226, 67, 41, 0.45);
--amber: #F5A524;
--ok: #4ADE80;
--crit: #FF4D3D;
--ff-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
--ff-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
--ff-mono: 'JetBrains Mono', ui-monospace, monospace;
--shell-max: 1560px;
--nav-h: 100px;
--radius: 2px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--text); font-family: var(--ff-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }
::selection { background: var(--accent); color: #fff; }
/* ——— Type scale ——— */
.h-display { font-family: var(--ff-display); font-weight: 500; font-size: clamp(48px, 7vw, 112px); letter-spacing: -0.03em; line-height: 0.95; }
.h-1 { font-family: var(--ff-display); font-weight: 500; font-size: clamp(36px, 4.5vw, 64px); letter-spacing: -0.02em; line-height: 1.02; }
.h-2 { font-family: var(--ff-display); font-weight: 500; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.015em; line-height: 1.08; }
.h-3 { font-family: var(--ff-display); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; line-height: 1.2; }
.eyebrow { font-family: var(--ff-mono); font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.mono { font-family: var(--ff-mono); }
.dim { color: var(--muted); }
.accent { color: var(--accent); }
p { color: var(--text-2); }
.lede { font-size: 18px; color: var(--text-2); max-width: 62ch; }
/* ——— Layout ——— */
.shell { max-width: var(--shell-max); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .shell { padding: 0 20px; } }
.section { padding: 96px 0; border-top: 1px solid var(--line); }
.section-sm { padding: 64px 0; border-top: 1px solid var(--line); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
/* ——— Buttons ——— */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--text); transition: all 0.15s; }
.btn:hover { border-color: var(--text); background: var(--bg-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #F05539; border-color: #F05539; }
.btn-ghost { border-color: transparent; padding-left: 0; padding-right: 0; }
.btn-ghost:hover { background: transparent; color: var(--accent); }
.btn .arrow { font-size: 14px; line-height: 1; }
/* ——— Chips / tags ——— */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--line-2); background: var(--bg-2); }
.chip.accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* ——— Top nav ——— */
.nav { position: sticky; top: 0; z-index: 80; background: rgba(10, 11, 12, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav-row { display: flex; align-items: stretch; height: var(--nav-h); }
.nav-brand { display: flex; align-items: center; padding-right: 28px; border-right: 1px solid var(--line); }
.nav-brand .logo { display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--ff-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; }
.nav-brand .logo .dot { color: var(--accent); }
.nav-brand .sub { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--line); font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.nav-links { display: flex; align-items: stretch; margin-left: auto; }
.nav-link { display: inline-flex; align-items: center; padding: 0 22px; font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); border-left: 1px solid var(--line); cursor: pointer; position: relative; }
.nav-link:hover, .nav-link.active { color: var(--text); background: var(--bg-1); }
.nav-link .caret { margin-left: 7px; color: var(--accent); opacity: 0.85; transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease; transform: translateY(1px); flex-shrink: 0; }
.nav-link.has-mega:hover .caret, .nav-link.has-mega.open .caret { color: var(--accent); opacity: 1; transform: translateY(1px) rotate(180deg); }
.nav-cta { padding: 0 22px; display: inline-flex; align-items: center; background: var(--accent); color: #fff; font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; border-left: 1px solid var(--line); }
.nav-cta:hover { background: #F05539; }
/* ——— Mobile nav (hamburger + drawer) ——— */
.nav-mobile-toggle { display:none; align-items:center; justify-content:center; width:48px; height:var(--nav-h); padding:0; border:0; border-left:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; }
.nav-mobile-toggle .bars { position:relative; width:18px; height:14px; display:inline-block; }
.nav-mobile-toggle .bars::before, .nav-mobile-toggle .bars::after, .nav-mobile-toggle .bars > span { content:''; position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:transform 0.25s, top 0.25s, opacity 0.2s; }
.nav-mobile-toggle .bars::before { top:0; }
.nav-mobile-toggle .bars > span { top:6.25px; }
.nav-mobile-toggle .bars::after { top:12.5px; }
.nav-mobile-toggle[aria-expanded="true"] .bars::before { top:6.25px; transform:rotate(45deg); }
.nav-mobile-toggle[aria-expanded="true"] .bars > span { opacity:0; }
.nav-mobile-toggle[aria-expanded="true"] .bars::after { top:6.25px; transform:rotate(-45deg); }
.nav-mobile { display:none; position:fixed; left:0; right:0; top:calc(var(--ticker-h, 40px) + var(--nav-h)); bottom:0; background:var(--bg-0); border-top:1px solid var(--line); overflow-y:auto; z-index:90; padding:8px 0 80px; }
.nav-mobile a, .nav-mobile .nm-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:18px 24px; font-family:var(--ff-mono); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text); border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; cursor:pointer; }
.nav-mobile a:hover, .nav-mobile .nm-trigger:hover { background:var(--bg-1); color:var(--accent); }
.nav-mobile .arr { color:var(--muted); font-family:var(--ff-mono); font-size:14px; transition:transform 0.2s, color 0.2s; }
.nav-mobile .nm-group { border-bottom:1px solid var(--line); }
.nav-mobile .nm-group .nm-trigger { border-bottom:0; }
.nav-mobile .nm-group[data-open="true"] .nm-trigger .arr { transform:rotate(90deg); color:var(--accent); }
.nav-mobile .nm-children { display:none; padding:0 0 8px; background:var(--bg-1); border-top:1px solid var(--line); }
.nav-mobile .nm-group[data-open="true"] .nm-children { display:block; }
.nav-mobile .nm-children a { padding:14px 24px 14px 40px; font-size:12px; letter-spacing:0.08em; text-transform:none; color:var(--text-2); border-bottom:1px dashed var(--line); }
.nav-mobile .nm-children a:last-child { border-bottom:0; }
.nav-mobile .nm-cta { background:var(--accent); color:#fff; margin-top:8px; }
.nav-mobile .nm-cta:hover { background:#F05539; color:#fff; }
.nav-mobile .nm-cta .arr { color:rgba(255,255,255,0.8); }
.nav-mobile .nm-meta { padding:24px 24px 16px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:0.16em; color:var(--muted); display:grid; gap:6px; }
.nav-mobile .nm-meta .red { color:var(--accent); font-weight:700; }
body.nav-mobile-open { overflow:hidden; }
body.nav-mobile-open .nav-mobile { display:block; }
@media (max-width:980px) {
.nav-mobile-toggle { display:inline-flex; }
.nav-links { display:none !important; }
.nav-cta { display:none; }
.lang-toggle { display:none; }
}
.lang-toggle { padding: 0 14px; display: inline-flex; align-items: center; gap: 4px; border-left: 1px solid var(--line); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); }
.lang-toggle .on { color: var(--text); }
/* ——— Mega menu ——— */
.mega { position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--bg-1); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: none; }
.mega.open { display: block; }
.mega-inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; max-width: var(--shell-max); margin: 0 auto; padding: 36px 32px; }
.mega-col { padding: 0 28px; border-right: 1px solid var(--line); }
.mega-col:last-child { border-right: 0; }
.mega-col:first-child { padding-left: 0; }
.mega-h { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.mega-h .ix { color: var(--accent); }
.mega-item { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: color 0.12s; }
.mega-item:last-child { border-bottom: 0; }
.mega-item:hover { color: var(--accent); }
.mega-item .ttl { font-family: var(--ff-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; }
.mega-item .sub { font-size: 12.5px; color: var(--muted); }
/* Civil mega — 2-col layout w/ stacked right rail */
.mega-civil-inner { grid-template-columns: 1.25fr 1fr; }
.mega-col-feature { padding-right: 36px; }
.mega-col-stack { padding: 0 0 0 28px; display: flex; flex-direction: column; gap: 18px; border-right: 0; }
.mega-stack-row { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.mega-stack-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.mega-stack-row .mega-item { padding-top: 10px; padding-bottom: 0; border-bottom: 0; }
.mega-stack-row .mega-h { margin-bottom: 10px; }
.mega-item--all { padding-top: 14px; border-top: 1px solid var(--line); border-bottom: 0; }
.mega-item--all .ttl { font-size: 14px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.mega-item--all:hover .ttl { color: var(--accent); }
.mega-item--all .all-arr { transition: transform 0.18s; }
.mega-item--all:hover .all-arr { transform: translateX(4px); }
/* Feature item — Discovery card */
.mega-item-feature { position: relative; padding: 18px 18px 18px 18px; margin-bottom: 6px; border: 1px solid rgba(217,201,168,0.22); border-bottom: 1px solid rgba(217,201,168,0.22); background: linear-gradient(135deg, rgba(217,201,168,0.06) 0%, rgba(217,201,168,0.01) 100%); border-radius: 2px; transition: border-color 0.18s, background 0.18s; }
.mega-item-feature:hover { border-color: rgba(217,201,168,0.55); background: linear-gradient(135deg, rgba(217,201,168,0.12) 0%, rgba(217,201,168,0.03) 100%); }
.mega-item-feature .ttl { font-size: 19px; }
.mega-item-feature .sub { font-size: 12.5px; line-height: 1.55; max-width: 44ch; }
.feat-ribbon { display: inline-block; font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #D9C9A8; padding: 3px 8px; border: 1px solid rgba(217,201,168,0.35); margin-bottom: 10px; background: rgba(217,201,168,0.06); }
/* Cases mega — 2-col w/ rich case cards */
.mega-cases-inner { grid-template-columns: 1.6fr 1fr; }
.mega-col-cases { padding-right: 36px; }
.mega-col-sector { padding-left: 28px; border-right: 0; display: flex; flex-direction: column; }
.case-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.case-card { display: block; padding: 16px 18px; border: 1px solid var(--line); background: rgba(255,255,255,0.015); text-decoration: none; color: inherit; transition: border-color 0.2s, background 0.2s, transform 0.2s; position: relative; }
.case-card:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.035); }
.case-card-tag { display: inline-block; font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line); margin-bottom: 12px; }
.case-card-ttl { font-family: var(--ff-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 8px; color: var(--text); }
.case-card-stats { display: flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; flex-wrap: wrap; }
.case-card-stats b { color: var(--accent); font-weight: 500; letter-spacing: 0.04em; }
.case-card-stats .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); display: inline-block; }
.case-card-sub { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.sector-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 18px; }
.sector-row { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,0.08); }
.sector-row:last-child { border-bottom: 0; }
.sector-n { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); padding-top: 2px; }
.sector-t { font-family: var(--ff-display); font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.sector-row.dim .sector-t { color: var(--muted); }
.sector-s { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.case-briefing { margin-top: auto; padding: 14px 0 0; border-top: 1px solid rgba(255,77,38,0.25); }
.case-briefing .ttl { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.case-briefing:hover .all-arr { transform: translateX(4px); }
.case-briefing .all-arr { transition: transform 0.18s; }
/* ——— Hero ——— */
.hero { position: relative; min-height: 88vh; display: flex; align-items: stretch; border-bottom: 1px solid var(--line); overflow: hidden; background: var(--bg-0); }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background:
linear-gradient(180deg, rgba(10,11,12,0.3) 0%, rgba(10,11,12,0.55) 55%, rgba(10,11,12,0.9) 100%),
linear-gradient(90deg, rgba(10,11,12,0.75) 0%, rgba(10,11,12,0.2) 50%, rgba(10,11,12,0.6) 100%); }
.hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px 0 72px; width: 100%; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.hero-title { max-width: 14ch; margin: 0 0 28px; }
.hero-lede { max-width: 54ch; font-size: 18px; color: var(--text-2); margin-bottom: 44px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* HUD corners */
.hud-corners::before, .hud-corners::after { content: ''; position: absolute; width: 28px; height: 28px; border: 1px solid var(--accent); }
.hud-corners::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.hud-corners::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
/* ——— Cards ——— */
.card { background: var(--bg-1); border: 1px solid var(--line); padding: 28px; transition: border-color 0.15s; position: relative; }
.card:hover { border-color: var(--line-2); }
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: var(--accent-line); }
.card .idx { position: absolute; top: 16px; right: 20px; font-family: var(--ff-mono); font-size: 10.5px; color: var(--dim); letter-spacing: 0.14em; }
.card h3 { font-family: var(--ff-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin: 14px 0 10px; }
.card p { font-size: 14px; color: var(--muted); margin: 0; }
.card .card-cta { margin-top: 20px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
/* ——— Footer ——— */
.footer { border-top: 1px solid var(--line); padding: 0; background: var(--bg-0); position:relative; overflow:hidden; }
.footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:0.6; }
.footer .shell { padding-top: 56px; padding-bottom: 28px; position:relative; }
/* —— top strip —— */
.footer-top { display:flex; justify-content:space-between; align-items:flex-start; gap:48px; padding-bottom:36px; margin-bottom:36px; border-bottom:1px solid var(--line); }
.footer-brand { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.footer-brand .footer-mark-img { display:block; height:36px; width:auto; max-width:100%; flex:none; align-self:flex-start; aspect-ratio: 1082 / 490; }
.footer-brand-tag { display:inline-flex; align-items:center; gap:10px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); padding:6px 12px; border:1px solid var(--line); align-self:flex-start; background:var(--bg-1); }
.ft-pulse { width:7px; height:7px; border-radius:50%; background:var(--ok, #5BB68A); box-shadow:0 0 6px rgba(91,182,138,0.6); animation:ftpulse 2.4s ease-out infinite; }
@keyframes ftpulse { 0% { opacity:1; } 50% { opacity:0.4; } 100% { opacity:1; } }
.footer-coords { display:grid; gap:6px; font-family:var(--ff-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; min-width:280px; }
.footer-coords .fc-row { display:grid; grid-template-columns:80px 1fr; gap:14px; align-items:baseline; padding:6px 0; border-bottom:1px dashed var(--line); }
.footer-coords .fc-row:last-child { border-bottom:0; }
.footer-coords .k { color:var(--muted); }
.footer-coords .v { color:var(--text-2); }
/* —— grid —— */
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1.2fr 1fr 1fr 1fr; gap: 36px 32px; }
.footer-col h4 { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; font-weight: 500; padding-bottom:10px; border-bottom:1px solid var(--line); position:relative; }
.footer-col h4::after { content:''; position:absolute; left:0; bottom:-1px; width:24px; height:1px; background:var(--accent); }
.footer-col a { display: block; padding: 5px 0; font-size: 13px; color: var(--text-2); transition:color 0.18s, transform 0.18s, padding 0.18s; position:relative; }
.footer-col a:hover { color: var(--accent); padding-left:8px; }
.footer-col a.fl-sand { color:#D9C9A8; }
.footer-col a.fl-sand:hover { color:var(--accent); }
.footer-col a.fl-cyan { color:#3FA9C9; }
.footer-col a.fl-cyan:hover { color:var(--accent); }
.footer-col a.fl-sage { color:#7BA88A; }
.footer-col a.fl-sage:hover { color:var(--accent); }
/* —— lead column —— */
.footer-col--lead { padding-right:8px; }
.footer-lead { font-size:14px; line-height:1.6; color:var(--text-2); margin:0 0 22px; max-width:32ch; }
.footer-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:18px; width:100%; max-width:280px; padding:14px 16px; border:1px solid var(--accent-line); background:var(--accent-wash); color:var(--accent); font-family:var(--ff-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; transition:background 0.2s, color 0.2s, border-color 0.2s, padding 0.2s; }
.footer-cta:hover { background:var(--accent); color:#FFFFFF !important; border-color:var(--accent); padding-left:20px; }
.footer-cta:hover span { color:#FFFFFF !important; }
.footer-cta:hover .arr { transform:translateX(4px); }
.footer-cta .arr { transition:transform 0.2s; }
/* —— connect column —— */
.footer-col--connect .footer-social { display:flex; flex-direction:row; gap:8px; align-items:center; margin-bottom:18px; }
.footer .f-social--icon { width:40px; height:40px; padding:0; border:1px solid var(--line); display:inline-flex; justify-content:center; align-items:center; gap:0; transition:border-color 0.2s, background 0.2s, color 0.2s; }
.footer .f-social--icon:hover { border-color:var(--accent); background:var(--accent-wash); color:var(--accent); }
.footer .f-social--icon svg { color:var(--text-2); flex:none; transition:color 0.2s, transform 0.2s; }
.footer .f-social--icon:hover svg { color:var(--accent); transform:translateY(-1px); }
.footer-mail { display:inline-block; font-family:var(--ff-mono); font-size:11.5px; color:var(--text-2); padding:6px 0; transition:color 0.18s; letter-spacing:0.04em; }
.footer-mail:hover { color:var(--accent); }
/* —— bottom legal —— */
.footer-bottom { display: grid; grid-template-columns:1fr auto 1fr; align-items: center; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; gap:24px; }
.fb-cell { display:inline-flex; align-items:center; gap:10px; }
.fb-doctrine { justify-self:center; color:var(--text-2); }
.fb-build { justify-self:end; color:var(--muted); }
.fb-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; box-shadow:0 0 6px rgba(226,67,41,0.6); }
/* duplicate footer-bottom rule below this is overridden */
@media (max-width:1100px) {
.footer-grid { grid-template-columns:1fr 1fr 1fr 1fr; }
.footer-col--lead { grid-column:span 4; }
}
@media (max-width:760px) {
.footer-top { flex-direction:column; gap:24px; align-items:flex-start; }
.footer-coords { width:100%; min-width:0; }
.footer-grid { grid-template-columns:1fr 1fr; gap:28px 24px; }
.footer-col--lead { grid-column:span 2; }
.footer-bottom { grid-template-columns:1fr; gap:10px; text-align:left; }
.fb-doctrine, .fb-build { justify-self:start; }
}
@media (max-width:440px) {
.footer-grid { grid-template-columns:1fr; }
.footer-col--lead { grid-column:span 1; }
}
/* ——— L19 brand mark ——— */
.l19-img { display:block; height:30px; width:auto; flex:none; aspect-ratio: 1082 / 490; }
.nav-brand .l19-img { height:30px; }
/* ——— Global mobile collapse for 12-col grids ———
Page-level layouts use .grid-12 with inline `grid-column: span N` for column widths.
On narrow viewports collapse the grid to a single column and force every child to span 1
so inline span styles don't break the layout. Page-specific overrides still win. */
@media (max-width:760px) {
.grid-12 { grid-template-columns:1fr !important; gap:24px !important; }
.grid-12 > * { grid-column:1 / -1 !important; border-left:0 !important; padding-left:0 !important; }
}
/* ——— Mobile nav cleanup ——— */
@media (max-width:980px) {
/* Hide the gold "Presentation" pill in the header bar — it's already in the drawer. */
.nav-presentation { display:none !important; }
/* Scale the L19 mark down so it doesn't dominate the bar next to the hamburger. */
.nav-brand .l19-img { height:22px !important; }
.nav-brand { padding-right:16px; }
.nav-brand .sub { display:none; }
}
/* ——— Mobile drawer: enforce consistent type ——— */
.nav-mobile a,
.nav-mobile .nm-trigger {
font-family: var(--ff-mono) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.14em !important;
line-height: 1.3 !important;
text-transform: uppercase !important;
color: var(--text) !important;
}
.nav-mobile a:hover,
.nav-mobile .nm-trigger:hover { color: var(--accent) !important; }
.nav-mobile .nm-children a {
font-size: 11.5px !important;
letter-spacing: 0.08em !important;
text-transform: none !important;
color: var(--text-2) !important;
font-weight: 400 !important;
}
.nav-mobile .nm-cta { background: var(--accent) !important; color:#fff !important; }
.nav-mobile .nm-cta:hover { background:#F05539 !important; color:#fff !important; }
/* ——— Home page Discovery banner (auto / 1fr / auto) ——— */
@media (max-width:760px) {
/* Discovery banner row */
a[href="pages/discovery.html"][style*="grid-template-columns:auto 1fr auto"],
a[href="pages/discovery.html"][style*="grid-template-columns: auto 1fr auto"] {
grid-template-columns: 1fr !important;
gap: 16px !important;
padding: 22px !important;
}
/* 5-step methodology rail on home Discovery section */
div[style*="grid-template-columns:repeat(5,1fr)"],
div[style*="grid-template-columns: repeat(5,1fr)"],
div[style*="grid-template-columns:repeat(5, 1fr)"] {
grid-template-columns: 1fr !important;
}
/* 4-col stat boxes (Duration/Workstreams/Output/Leads into) */
div[style*="grid-template-columns:repeat(4,1fr)"],
div[style*="grid-template-columns: repeat(4,1fr)"] {
grid-template-columns: 1fr 1fr !important;
}
}
/* ——— Press page grid collapse ——— */
@media (max-width:680px) {
.press-grid { grid-template-columns: 1fr !important; }
.pcard { grid-column: 1 / -1 !important; }
}
.l19-mark { display:inline-flex; align-items:stretch; gap:0; font-family:var(--ff-display); font-weight:700; line-height:1; letter-spacing:-0.04em; color:currentColor; }
.nav-brand .l19-mark { font-size:30px; height:30px; }
.footer-mark.l19-mark { font-size:48px; height:48px; color:var(--text); }
.l19-mark .l19-l, .l19-mark .l19-nine { display:inline-block; }
.l19-mark .l19-l { padding-right:0.04em; }
.l19-mark .l19-flag { display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; font-style:normal; padding:0 0.18em 0 0.18em; margin:0 0.04em; height:100%; transform:skewX(-10deg); position:relative; }
.l19-mark .l19-flag .l19-one { display:inline-block; transform:skewX(10deg); font-weight:700; }
.l19-mark .l19-nine { padding-left:0.02em; }
/* ——— Alert ticker ——— */
.ticker { position: relative; background: var(--bg-1); border-bottom: 1px solid var(--line); overflow: hidden; height: 40px; display: flex; align-items: center; }
.ticker-label { display: flex; align-items: center; gap: 10px; padding: 0 16px; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); border-right: 1px solid var(--line); height: 100%; background: var(--bg-2); white-space: nowrap; }
.ticker-label .pulse { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.ticker-viewport { flex: 1; overflow: hidden; position: relative; height: 100%; }
.ticker-track { display: flex; gap: 48px; align-items: center; height: 100%; animation: ticker-scroll 90s linear infinite; white-space: nowrap; }
.ticker-item { font-family: var(--ff-mono); font-size: 11.5px; color: var(--text-2); letter-spacing: 0.04em; }
.ticker-item .t-time { color: var(--muted); margin-right: 10px; }
.ticker-item .t-sev { display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--amber); }
.ticker-item .t-sev.crit { background: var(--accent); }
.ticker-item .t-sev.ok { background: var(--ok); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ——— Metric strip ——— */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--bg-1); }
.metric { padding: 24px 28px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric .m-val { font-family: var(--ff-display); font-size: 40px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
.metric .m-val .u { font-size: 18px; color: var(--muted); margin-left: 4px; }
.metric .m-lbl { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
/* ——— Split feature ——— */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .mega-inner, .footer-grid { grid-template-columns: 1fr; } .metrics { grid-template-columns: 1fr 1fr; } .nav-links { display: none; } }
/* ——— Utility ——— */
.sep { width: 32px; height: 1px; background: var(--accent); display: inline-block; }
.bar { width: 4px; height: 20px; background: var(--accent); display: inline-block; }
/* ——— Breadcrumb ——— */
.crumb { display: flex; align-items: center; gap: 10px; padding: 24px 0; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.crumb a:hover { color: var(--accent); }
.crumb .sep-c { color: var(--dim); }
/* RTL */
html[dir="rtl"] body { font-family: 'Noto Sans Arabic', var(--ff-body); }
html[dir="rtl"] .hero-title { max-width: 18ch; }
/* Focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Solution-page template */
.stat-item { padding:14px 0; border-bottom:1px solid var(--line); }
.stat-item:last-child { border-bottom:0; }
.stat-item .stat-k { font-family:var(--ff-mono); font-size:10px; letter-spacing:0.2em; color:var(--dim); text-transform:uppercase; margin-bottom:4px; }
.stat-item .stat-v { font-family:var(--ff-mono); font-size:13px; color:var(--text); }
.flow-chain { display:flex; gap:16px; align-items:stretch; overflow-x:auto; padding:8px 0 20px; }
.flow-step { flex:1 1 0; min-width:180px; border:1px solid var(--line); background:var(--bg-0); padding:22px; position:relative; }
.flow-step .flow-idx { font-family:var(--ff-mono); font-size:11px; letter-spacing:0.2em; color:var(--accent); margin-bottom:14px; }
.flow-step .flow-stage { font-family:var(--ff-mono); font-size:10px; color:var(--dim); letter-spacing:0.18em; text-transform:uppercase; margin-bottom:6px; }
.flow-step .flow-name { font-family:var(--ff-display); font-size:18px; font-weight:500; margin-bottom:12px; letter-spacing:-0.01em; }
.flow-step .flow-d { font-size:13px; color:var(--muted); line-height:1.55; }
.flow-arr { align-self:center; color:var(--dim); font-family:var(--ff-mono); font-size:20px; }
@media (max-width:900px) { .flow-arr { transform:rotate(90deg); } .flow-chain { flex-direction:column; } }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.kpi-card { background:var(--bg-0); padding:28px; }
.kpi-card .kpi-val { font-family:var(--ff-display); font-size:44px; font-weight:500; letter-spacing:-0.02em; color:var(--text); line-height:1; }
.kpi-card .kpi-val .u { font-family:var(--ff-mono); font-size:15px; color:var(--dim); margin-left:6px; font-weight:400; }
.kpi-card .kpi-lbl { font-family:var(--ff-mono); font-size:10px; letter-spacing:0.16em; color:var(--muted); text-transform:uppercase; margin-top:14px; }
@media (max-width:900px) { .kpi-grid { grid-template-columns:repeat(2,1fr); } }
.mini-cap { background:var(--bg-0); padding:28px; text-decoration:none; color:var(--text); transition:background 0.15s; }
.mini-cap:hover { background:var(--bg-2); }
.mini-cap .mc-i { font-family:var(--ff-mono); font-size:11px; letter-spacing:0.2em; color:var(--accent); margin-bottom:12px; }
.mini-cap .mc-n { font-family:var(--ff-display); font-size:18px; font-weight:500; margin-bottom:6px; }
.mini-cap .mc-d { font-family:var(--ff-mono); font-size:11px; color:var(--muted); letter-spacing:0.08em; }
/* ——— Solutions V2 — class-coloured grid ——— */
.solutions-v2 .sol-legend { display:flex; align-items:center; gap:10px; font-family:var(--ff-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-2); }
.solutions-v2 .sol-legend .dot { width:10px; height:10px; flex:none; display:inline-block; }
.sol-class-h { display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:12px; }
.sol-class-h .cls-tag { font-family:var(--ff-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--c); }
.sol-class-h .cls-name { font-family:var(--ff-display); font-size:22px; font-weight:500; letter-spacing:-0.01em; color:var(--text); }
.sol-class-h .cls-desc { font-family:var(--ff-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.sol-class-h .rule { background:var(--c); opacity:0.35; }
.sol-grid { gap:16px; }
/* Card itself */
.sol-card { position:relative; display:block; min-height:360px; background:var(--bg-1); border:1px solid var(--line); overflow:hidden; transition: border-color 0.2s, transform 0.2s; text-decoration:none; color:inherit; }
.sol-card::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); opacity:0.55; transition:opacity 0.2s, width 0.2s; pointer-events:none; }
.sol-card:hover { border-color:var(--c); transform:translateY(-2px); }
.sol-card:hover::after { opacity:1; width:5px; }
.sol-card:hover .sol-bg { opacity:0.95; transform:scale(1.04); }
.sol-card .sol-bg { position:absolute; inset:0; opacity:0.55; transition:opacity 0.4s, transform 0.6s; pointer-events:none; }
.sol-card .sol-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,17,19,0.55) 0%, rgba(15,17,19,0.85) 70%, rgba(15,17,19,0.96) 100%); }
.sol-card .sol-body { position:relative; z-index:2; padding:32px 28px 28px; display:flex; flex-direction:column; height:100%; }
.sol-card .sol-idx { position:absolute; top:16px; right:20px; font-family:var(--ff-mono); font-size:10.5px; color:var(--c); letter-spacing:0.14em; opacity:0.85; }
.sol-card .sol-chip { display:inline-flex; align-items:center; padding:4px 10px; font-family:var(--ff-mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-2); border:1px solid var(--line-2); background:rgba(10,12,16,0.6); align-self:flex-start; margin-bottom:18px; }
.sol-card .sol-title { font-family:var(--ff-display); font-weight:500; font-size:30px; letter-spacing:-0.015em; line-height:1.05; margin:0 0 14px; color:var(--c); text-wrap:balance; }
.sol-card p { font-size:14px; color:var(--text-2); margin:0; max-width:48ch; line-height:1.55; }
.sol-card .sol-cta { margin-top:auto; padding-top:24px; font-family:var(--ff-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--c); display:inline-flex; align-items:center; gap:8px; }
.sol-card .sol-pill { display:inline-flex; padding:6px 12px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--c); border:1px solid var(--c); background:rgba(63,169,201,0.06); }
.sol-card-feature { min-height:420px; }
.sol-card-feature .sol-bg { opacity:0.7; }
.sol-card-all { background:transparent; border-style:dashed; min-height:240px; }
.sol-card-all::after { display:none; }
.sol-card-all .sol-body { justify-content:center; }
@media (max-width:900px) { .sol-card { min-height:280px; } .sol-card .sol-title { font-size:24px; } }
/* ——— Per-card backgrounds — relevant SVG glyphs ——— */
.sol-card[data-bg="border"] .sol-bg { background:
radial-gradient(ellipse at 70% 40%, rgba(226,67,41,0.14), transparent 55%),
radial-gradient(ellipse at 20% 80%, rgba(245,165,36,0.10), transparent 55%),
linear-gradient(135deg, #1a1612 0%, #2a211a 50%, #1f2028 100%);
}
.sol-card[data-bg="border"] .sol-bg::before { content:''; position:absolute; inset:0; background:
url("data:image/svg+xml;utf8,") center/cover no-repeat;
}
.sol-card[data-bg="cuas"] .sol-bg { background:
radial-gradient(circle at 50% 50%, rgba(226,67,41,0.18), transparent 60%),
linear-gradient(180deg, #14161a 0%, #1d1f23 100%);
}
.sol-card[data-bg="cuas"] .sol-bg::before { content:''; position:absolute; inset:0; background:
url("data:image/svg+xml;utf8,") center/cover no-repeat;
}
.sol-card[data-bg="perimeter"] .sol-bg { background:
radial-gradient(ellipse at 50% 50%, rgba(226,67,41,0.10), transparent 60%),
linear-gradient(135deg, #14171a 0%, #1c1e22 100%);
}
.sol-card[data-bg="perimeter"] .sol-bg::before { content:''; position:absolute; inset:0; background:
url("data:image/svg+xml;utf8,") center/cover no-repeat;
}
.sol-card[data-bg="tactical"] .sol-bg { background:
radial-gradient(ellipse at 30% 70%, rgba(226,67,41,0.10), transparent 55%),
linear-gradient(180deg, #24211c 0%, #2a251f 100%);
}
.sol-card[data-bg="tactical"] .sol-bg::before { content:''; position:absolute; inset:0; background:
url("data:image/svg+xml;utf8,") center/cover no-repeat;
}
.sol-card[data-bg="fire"] .sol-bg { background:
radial-gradient(ellipse at 50% 60%, rgba(255,87,34,0.18), transparent 55%),
linear-gradient(135deg, #2a1f1a 0%, #3d2a20 100%);
}
.sol-card[data-bg="fire"] .sol-bg::before { content:''; position:absolute; inset:0; background:
url("data:image/svg+xml;utf8,") center/cover no-repeat;
}
.sol-card[data-bg="wide-area"] .sol-bg { background:
radial-gradient(ellipse at 30% 30%, rgba(245,165,36,0.10), transparent 55%),
linear-gradient(180deg, #1f1d18 0%, #26241e 100%);
}
.sol-card[data-bg="wide-area"] .sol-bg::before { content:''; position:absolute; inset:0; background:
url("data:image/svg+xml;utf8,") center/cover no-repeat;
}
.sol-card[data-bg="wildlife"] .sol-bg { background:
radial-gradient(ellipse at 60% 70%, rgba(74,222,128,0.10), transparent 55%),
linear-gradient(135deg, #26251f 0%, #2e2c25 100%);
}
.sol-card[data-bg="wildlife"] .sol-bg::before { content:''; position:absolute; inset:0; background:
url("data:image/svg+xml;utf8,") center/cover no-repeat;
}
.sol-card[data-bg="agents-hero"] .sol-bg { background:
radial-gradient(ellipse at 70% 30%, rgba(63,169,201,0.22), transparent 55%),
radial-gradient(ellipse at 30% 80%, rgba(63,169,201,0.10), transparent 55%),
linear-gradient(135deg, #0f1518 0%, #1a242b 50%, #14191c 100%);
}
.sol-card[data-bg="agents-hero"] .sol-bg::before { content:''; position:absolute; inset:0; background:
url("data:image/svg+xml;utf8,") center/cover no-repeat;
}
.sol-card[data-bg="agents-sectors"] .sol-bg { background:
radial-gradient(ellipse at 50% 50%, rgba(63,169,201,0.14), transparent 60%),
linear-gradient(135deg, #0f1518 0%, #1a242b 100%);
}
.sol-card[data-bg="agents-sectors"] .sol-bg::before { content:''; position:absolute; inset:0; background:
url("data:image/svg+xml;utf8,") center/cover no-repeat;
}