/* ============================================================
   TMG SECURITY — ABOUT
   Same design system as tmg_security_4D.html (dark bento + HUD).
   Shared tokens, header, footer, .spot cards, reveal/stagger and
   the tesseract renderer are carried over verbatim so the two
   pages read as one site. About-only patterns live in the
   "ABOUT-ONLY" block near the bottom of this stylesheet.
   ============================================================ */

:root{
  /* --- surfaces --- */
  --void:#04060C; --deep:#080C18; --panel:#0D1424; --panel2:#121B30;
  --line:rgba(140,165,225,0.12); --line2:rgba(140,165,225,0.22); --line3:rgba(140,165,225,0.34);

  /* --- brand --- */
  --cyan:#4FD8EA; --violet:#7C5CFA;
  --hyper:#FF4FD8;
  --ice:#CBD6FF; --fog:#7F8AAE; --white:#F2F6FF;

  /* --- semantic --- */
  --crit:#FF5A6E; --warn:#F5B44E; --ok:#3FE0B0;

  /* --- type --- */
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --hud:'Orbitron',var(--display);

  /* --- space scale (density 6/10) --- */
  --s1:6px; --s2:12px; --s3:18px; --s4:26px; --s5:38px; --s6:56px; --s7:80px; --s8:112px;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --ease:cubic-bezier(.22,.9,.28,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--void); color:var(--white); font-family:var(--body);
  line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img,svg,canvas{ display:block; max-width:100%; }
use{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
button{ font-family:var(--body); cursor:pointer; }
::selection{ background:var(--cyan); color:var(--void); }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:1320px; margin:0 auto; padding:0 var(--s4); }
section{ position:relative; z-index:1; }
.pad{ padding:var(--s8) 0; }
.divider{ border-top:1px solid var(--line); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ============================================================
   AMBIENT FIELD
   ============================================================ */
.field{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.field-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(140,165,225,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140,165,225,0.055) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 78% 60% at 50% 0%, #000 5%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 78% 60% at 50% 0%, #000 5%, transparent 72%);
}
.field-cursor{
  position:absolute; inset:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,20%), rgba(79,216,234,0.10), transparent 60%);
  transition:background .18s linear;
}
.field-blob{ position:absolute; border-radius:50%; filter:blur(140px); }
.blob-a{ width:620px; height:620px; top:-240px; left:-180px; background:var(--violet); opacity:.20; }
.blob-b{ width:560px; height:560px; top:60px; right:-220px; background:var(--cyan); opacity:.13; }
.blob-c{ width:520px; height:520px; top:52%; left:38%; background:var(--hyper); opacity:.05; }

.scanlines{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px);
  mix-blend-mode:multiply;
}

/* ============================================================
   HUD CHROME
   ============================================================ */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:400;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--hyper));
  box-shadow:0 0 12px rgba(79,216,234,.6);
}
.wreadout{
  position:fixed; right:18px; bottom:18px; z-index:300;
  font-family:var(--mono); font-size:10px; letter-spacing:1.4px; color:var(--fog);
  background:rgba(8,12,24,.72); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--r-md); padding:10px 13px;
  display:flex; flex-direction:column; gap:5px; min-width:150px;
  opacity:0; transform:translateY(10px); transition:opacity .4s, transform .4s;
  pointer-events:none;
}
.wreadout.on{ opacity:1; transform:translateY(0); }
.wreadout .wrow{ display:flex; justify-content:space-between; gap:14px; }
.wreadout b{ color:var(--cyan); font-weight:500; }
.wreadout .wbar{ height:2px; background:var(--line2); border-radius:2px; overflow:hidden; }
.wreadout .wbar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--hyper)); }
/* The homepage hides this below 1200px. This page carries a photo grid that
   runs closer to the viewport edge, and floating chrome over photography reads
   as a defect — so the readout only appears once there is a real gutter. */
@media (max-width:1400px){ .wreadout{ display:none; } }

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:sticky; top:0; z-index:200;
  background:rgba(4,6,12,.72); backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:var(--s3); }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--hud); font-weight:700; font-size:16px; letter-spacing:1.2px; flex:none; }
.brand .mark{ width:28px; height:28px; }
nav.links{ display:flex; align-items:center; gap:2px; }
.nav-item{ position:relative; }
.nav-btn{
  background:none; border:none; color:var(--ice); font-size:13.5px; font-weight:500;
  padding:10px 13px; border-radius:var(--r-sm); display:flex; align-items:center; gap:6px;
  transition:color .2s, background .2s;
}
.nav-btn:hover{ color:var(--white); background:rgba(140,165,225,.08); }
/* current page marker — About is where we are */
.nav-btn[aria-current="page"]{ color:var(--white); background:rgba(79,216,234,.10); }
.caret{ width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .25s var(--ease); margin-top:-3px; }
.nav-item.open .caret{ transform:rotate(225deg); margin-top:2px; }

.mega{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(-10px) scale(.985);
  background:linear-gradient(180deg,var(--deep),#070A14);
  border:1px solid var(--line2); border-radius:var(--r-lg); padding:24px;
  box-shadow:0 40px 90px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
  opacity:0; visibility:hidden; transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.nav-item.open .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1); }
.mega-services{ width:840px; display:grid; grid-template-columns:repeat(3,1fr); gap:2px 24px; }
.mega-eco{ width:640px; display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; }
.mega-col-title{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.8px; color:var(--cyan); margin:16px 0 8px; grid-column:1/-1; }
.mega-col-title:first-child{ margin-top:0; }
.mega a.mega-link{ display:block; padding:8px 10px; border-radius:var(--r-sm); font-size:12.8px; color:var(--ice); transition:background .15s, color .15s, transform .15s; }
.mega a.mega-link:hover{ background:rgba(79,216,234,.08); color:var(--white); transform:translateX(3px); }
.mega-blueprint-cta{
  grid-column:1/-1; display:flex; flex-direction:column; gap:2px; margin-top:16px; padding:14px 16px; border-radius:var(--r-md);
  background:linear-gradient(120deg, rgba(79,216,234,.10), rgba(124,92,250,.13), rgba(255,79,216,.08));
  border:1px solid rgba(79,216,234,.3); transition:border-color .2s, transform .2s;
}
.mega-blueprint-cta:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.mega-blueprint-cta b{ font-family:var(--display); font-size:13.5px; color:var(--white); }
.mega-blueprint-cta span{ font-size:11px; color:var(--fog); }
.mega-card{ display:flex; gap:12px; padding:12px; border-radius:var(--r-md); transition:background .15s, transform .15s; }
.mega-card:hover{ background:rgba(124,92,250,.09); transform:translateX(3px); }
.mega-card .ic{ width:36px; height:36px; flex:none; border-radius:11px; background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--cyan); }
.mega-card .mt{ font-size:13.5px; font-weight:600; }
.mega-card .md{ font-size:11px; color:var(--fog); margin-top:2px; }

/* buttons */
.cta-btn{
  position:relative; font-weight:600; font-size:13.5px; padding:11px 20px; border-radius:10px;
  background:linear-gradient(120deg,var(--cyan),var(--violet)); color:#04060C; border:none;
  transition:box-shadow .28s var(--ease), transform .2s var(--ease); overflow:hidden; white-space:nowrap;
}
.cta-btn::after{
  content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-120%); transition:transform .6s var(--ease);
}
.cta-btn:hover{ box-shadow:0 10px 30px rgba(79,216,234,.32); transform:translateY(-2px); }
.cta-btn:hover::after{ transform:translateX(120%); }
.cta-ghost{
  font-weight:600; font-size:13.5px; padding:11px 20px; border-radius:10px;
  background:transparent; color:var(--white); border:1px solid var(--line2);
  transition:border-color .2s, background .2s, transform .2s; white-space:nowrap;
  display:inline-block;
}
.cta-ghost:hover{ border-color:var(--cyan); background:rgba(79,216,234,.07); transform:translateY(-2px); }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; position:relative; z-index:250; }
.burger span{ width:22px; height:2px; background:var(--white); transition:transform .25s var(--ease), opacity .25s; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed; top:76px; left:0; right:0; bottom:0; background:var(--void); z-index:220;
  display:flex; flex-direction:column; padding:26px 24px; gap:26px;
  transform:translateX(100%); transition:transform .38s var(--ease); overflow-y:auto;
}
.mobile-nav.open{ transform:translateX(0); }
.mnav-links{ display:flex; flex-direction:column; }
.mnav-link{ font-family:var(--display); font-size:21px; font-weight:600; padding:15px 4px; border-bottom:1px solid var(--line); }
.mnav-cta{ width:100%; padding:16px; font-size:15px; }
body.nav-locked{ overflow:hidden; }
@media (min-width:1081px){ .mobile-nav{ display:none; } }

/* ============================================================
   TYPE / SECTION HEADS
   ============================================================ */
.eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:3px; color:var(--cyan); display:inline-flex; align-items:center; gap:9px; }
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:pulse 1.9s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.28;} }
.sec-head{ max-width:700px; margin-bottom:var(--s6); }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head.wide{ max-width:840px; }
.sec-eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:2.6px; color:var(--cyan); margin-bottom:14px; }
h2.sec-h{ font-family:var(--display); font-size:clamp(27px,3.4vw,40px); font-weight:700; letter-spacing:-.6px; line-height:1.12; margin-bottom:14px; }
.sec-sub{ color:var(--fog); font-size:15.5px; }
h1.hero-h{ font-family:var(--display); font-size:clamp(34px,5.4vw,60px); line-height:1.04; font-weight:700; letter-spacing:-1.8px; margin-bottom:22px; }
.accent{ background:linear-gradient(115deg,var(--cyan) 10%,var(--violet) 55%,var(--hyper) 95%); -webkit-background-clip:text; background-clip:text; color:transparent; }

.glitch{ position:relative; display:inline-block; }
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%;
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  pointer-events:none; opacity:0; will-change:opacity,transform;
}
.glitch::before{ color:var(--cyan);  -webkit-text-fill-color:var(--cyan);  animation:glitchA 3.6s infinite; }
.glitch::after { color:var(--hyper); -webkit-text-fill-color:var(--hyper); animation:glitchB 2.9s infinite; }
@keyframes glitchA{
  0%,91.5%,98.5%,100%{ opacity:0; transform:none; }
  92%{ opacity:.9; transform:translateX(-3px); clip-path:inset(10% 0 62% 0); }
  94%{ opacity:.9; transform:translateX(3px);  clip-path:inset(46% 0 24% 0); }
  96%{ opacity:.9; transform:translateX(-2px); clip-path:inset(74% 0 8% 0); }
  98%{ opacity:.9; transform:translateX(1px);  clip-path:inset(30% 0 48% 0); }
}
@keyframes glitchB{
  0%,89.5%,97.5%,100%{ opacity:0; transform:none; }
  90%{ opacity:.85; transform:translateX(3px);  clip-path:inset(64% 0 14% 0); }
  93%{ opacity:.85; transform:translateX(-3px); clip-path:inset(22% 0 54% 0); }
  95%{ opacity:.85; transform:translateX(2px);  clip-path:inset(4% 0 80% 0); }
  97%{ opacity:.85; transform:translateX(-1px); clip-path:inset(52% 0 30% 0); }
}
@media (prefers-reduced-motion:reduce){ .glitch::before,.glitch::after{ display:none; } }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.stagger.in > *{ opacity:1; transform:none; }

/* ============================================================
   SPOTLIGHT CARD  (21st.dev @berkcangumusisik/spotlight-card)
   ============================================================ */
.spot{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--deep);
  transition:border-color .25s, transform .25s var(--ease), background .25s;
}
.spot::before{
  content:''; position:absolute; inset:-1px; pointer-events:none; z-index:0;
  opacity:var(--so,0); transition:opacity .3s;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%), var(--spot-color, rgba(79,216,234,.16)), transparent 42%);
}
.spot > *{ position:relative; z-index:1; }
.spot:hover{ border-color:var(--line3); transform:translateY(-4px); background:var(--panel); }

/* corner brackets */
.brackets::before,.brackets::after{
  content:''; position:absolute; width:22px; height:22px; border:1px solid var(--line3);
}
.brackets::before{ top:0; left:0; border-right:0; border-bottom:0; }
.brackets::after{ bottom:0; right:0; border-left:0; border-top:0; }

/* ============================================================
   SHARED GRIDS / CARDS / PILLS
   ============================================================ */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card{ padding:24px 22px; }
.card-ic{
  width:42px; height:42px; border-radius:12px; background:var(--panel2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--cyan); margin-bottom:16px;
}
.card h3{ font-family:var(--display); font-size:15.5px; font-weight:600; margin-bottom:8px; }
.card p{ font-size:12.8px; color:var(--fog); line-height:1.55; }

.trust-strip{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.trust-pill{
  font-family:var(--mono); font-size:11.5px; color:var(--ice); border:1px solid var(--line);
  padding:10px 17px; border-radius:24px; display:flex; align-items:center; gap:8px;
  background:rgba(13,20,36,.5); transition:border-color .25s, transform .25s;
}
.trust-pill:hover{ border-color:rgba(79,216,234,.45); transform:translateY(-2px); }
.trust-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }

.eco-section{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.eco-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:2px; padding:6px 13px; border-radius:20px; margin-bottom:18px; }
.badge-university{ color:#B79CFF; border:1px solid rgba(124,92,250,.4); }
.badge-academy{ color:var(--cyan); border:1px solid rgba(79,216,234,.4); }
.badge-corp{ color:#8FD9C4; border:1px solid rgba(79,216,180,.35); }
.badge-labs{ color:var(--warn); border:1px solid rgba(245,180,78,.35); }
.split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center; }

.steps-wrap{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s3); }
.steps-line{ position:absolute; top:19px; left:8%; right:8%; height:1px; background:linear-gradient(90deg,transparent,var(--line3),var(--line3),transparent); }
.step-item{ text-align:center; position:relative; z-index:2; }
.step-dot{ width:38px; height:38px; margin:0 auto 14px; border-radius:50%; border:1px solid var(--line2); background:var(--void); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10.5px; color:var(--cyan); transition:all .35s var(--ease); }
.step-item:hover .step-dot{ border-color:var(--cyan); box-shadow:0 0 20px rgba(79,216,234,.3); transform:scale(1.08); }
.step-item h5{ font-family:var(--display); font-size:14px; font-weight:600; margin-bottom:5px; }
.step-item p{ font-size:11.8px; color:var(--fog); }
@media (max-width:900px){ .steps-wrap{ grid-template-columns:1fr 1fr 1fr; gap:var(--s4); } .steps-line{ display:none; } }
@media (max-width:560px){ .steps-wrap{ grid-template-columns:1fr 1fr; } }

.ctaband{
  position:relative; overflow:hidden; text-align:center; padding:var(--s8) var(--s4);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(120deg, rgba(79,216,234,.07), rgba(124,92,250,.09), rgba(255,79,216,.05));
}
.ctaband h2{ font-family:var(--display); font-size:clamp(26px,4vw,42px); font-weight:700; letter-spacing:-1px; margin-bottom:14px; }
.ctaband p{ color:var(--fog); font-size:15.5px; max-width:620px; margin:0 auto var(--s4); }
.cta-row{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ padding:var(--s7) 0 var(--s4); border-top:1px solid var(--line); background:linear-gradient(180deg,transparent,rgba(8,12,24,.7)); }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:var(--s4); margin-bottom:var(--s6); }
.foot-brand p{ font-size:12.8px; color:var(--fog); margin:14px 0 18px; max-width:300px; line-height:1.6; }
.foot-social{ display:flex; gap:9px; }
.foot-social a{
  width:34px; height:34px; border-radius:10px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10.5px; color:var(--fog); transition:all .25s;
}
.foot-social a:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }
.foot-col h5{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.8px; color:var(--cyan); margin-bottom:16px; }
.foot-col ul li{ margin-bottom:10px; }
.foot-col ul li a{ font-size:12.8px; color:var(--fog); transition:color .2s; }
.foot-col ul li a:hover{ color:var(--white); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:var(--s3); flex-wrap:wrap; padding-top:var(--s4); border-top:1px solid var(--line); font-size:12px; color:var(--fog); }
.foot-legal{ display:flex; gap:var(--s3); }
.foot-legal a:hover{ color:var(--white); }

/* ============================================================
   ABOUT-ONLY PATTERNS
   ============================================================ */

/* --- hero --- */
.about-hero{ padding:var(--s7) 0 var(--s5); }
.about-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s6); align-items:center; }
.about-hero-sub{ font-size:16.5px; color:var(--fog); max-width:560px; margin-bottom:var(--s4); }
.about-hero-ctas{ display:flex; gap:13px; flex-wrap:wrap; margin-bottom:var(--s4); }
.hero-stage{ position:relative; width:100%; aspect-ratio:1/1; max-width:440px; margin:0 auto; }
#aboutTess{ width:100%; height:100%; }
.hero-stage-cap{
  position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  font-family:var(--mono); font-size:9.5px; letter-spacing:2px; color:var(--fog); white-space:nowrap; text-align:center;
}
.hero-stage-cap b{ color:var(--cyan); font-weight:500; }
@media (max-width:1000px){ .about-hero-grid{ grid-template-columns:1fr; gap:var(--s5); } .hero-stage{ order:-1; max-width:320px; } }

/* --- prose blocks: the long-form About copy --- */
.prose{ max-width:760px; }
.prose p{ font-size:15px; color:var(--ice); margin-bottom:var(--s3); line-height:1.72; }
.prose p.lead{ font-size:17px; color:var(--white); }
.prose p.muted{ color:var(--fog); }
.prose strong{ color:var(--white); font-weight:600; }
.prose .pull{
  font-family:var(--display); font-size:19px; font-weight:600; color:var(--white); line-height:1.5;
  padding:var(--s3) 0 var(--s3) var(--s3); border-left:2px solid var(--cyan); margin:var(--s4) 0;
}
.prose .pull em{ font-style:normal; color:var(--cyan); }

/* --- the informing loop: testing → engineering → defense → … --- */
.loopchain{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin:var(--s5) 0 0; }
.loop-node{
  font-family:var(--mono); font-size:11px; letter-spacing:.8px; padding:10px 16px; border-radius:20px;
  background:var(--panel2); border:1px solid var(--line); color:var(--ice); transition:all .35s var(--ease);
}
.loop-node.active{ background:rgba(79,216,234,.15); border-color:var(--cyan); color:var(--white); box-shadow:0 0 18px rgba(79,216,234,.25); transform:translateY(-2px); }
.loop-arrow{ color:var(--fog); font-family:var(--mono); font-size:11px; }
.loop-caption{ font-family:var(--mono); font-size:10px; letter-spacing:1.8px; color:var(--fog); margin-top:var(--s3); }

/* --- the acronym: T · M · G · Sec --- */
.acronym{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:var(--s5) 0; }
.acro-cell{ padding:20px 18px; text-align:center; }
.acro-k{ font-family:var(--hud); font-size:30px; font-weight:900; line-height:1; background:linear-gradient(120deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.acro-v{ font-family:var(--mono); font-size:10.5px; letter-spacing:1.8px; color:var(--fog); margin-top:11px; }
@media (max-width:560px){ .acronym{ grid-template-columns:repeat(2,1fr); } }

/* --- journey rail --- */
.journey{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s3); margin-top:var(--s6); }
.journey-line{ position:absolute; top:26px; left:8%; right:8%; height:1px; background:linear-gradient(90deg,transparent,var(--line3),var(--line3),transparent); }
.jn{ position:relative; z-index:2; text-align:center; }
.jn-ring{
  width:52px; height:52px; margin:0 auto 15px; border-radius:50%; border:1px solid var(--line2);
  background:var(--void); display:flex; align-items:center; justify-content:center; color:var(--cyan);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.jn:hover .jn-ring{ border-color:var(--cyan); box-shadow:0 0 22px rgba(79,216,234,.3); transform:scale(1.07); }
.jn h5{ font-family:var(--display); font-size:13.5px; font-weight:700; letter-spacing:.4px; margin-bottom:5px; }
.jn p{ font-size:11.5px; color:var(--fog); line-height:1.5; }
@media (max-width:900px){ .journey{ grid-template-columns:repeat(3,1fr); gap:var(--s4); } .journey-line{ display:none; } }
@media (max-width:520px){ .journey{ grid-template-columns:repeat(2,1fr); } }

/* --- mission / vision panels --- */
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mv-panel{ padding:var(--s5) var(--s4); display:flex; flex-direction:column; }
.mv-tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:2.2px; margin-bottom:16px; }
.mv-panel.mission .mv-tag{ color:var(--cyan); }
.mv-panel.vision .mv-tag{ color:var(--hyper); }
.mv-panel h3{ font-family:var(--display); font-size:21px; font-weight:700; line-height:1.28; margin-bottom:16px; }
.mv-panel p{ font-size:13.8px; color:var(--fog); line-height:1.65; margin-bottom:12px; }
.mv-list{ margin-top:auto; padding-top:var(--s4); border-top:1px solid var(--line); }
.mv-list li{ font-size:12.8px; color:var(--ice); padding:6px 0 6px 16px; position:relative; }
.mv-list li::before{ content:''; position:absolute; left:2px; top:14px; width:5px; height:5px; border-radius:50%; background:var(--cyan); }
.mv-panel.vision .mv-list li::before{ background:var(--hyper); }
@media (max-width:860px){ .mv-grid{ grid-template-columns:1fr; } }

/* --- capability cards --- */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cap-card{ padding:26px 24px; display:flex; flex-direction:column; }
.cap-card .card-ic{ margin-bottom:18px; }
.cap-card h3{ font-family:var(--display); font-size:16.5px; font-weight:600; margin-bottom:6px; }
.cap-lede{ font-family:var(--mono); font-size:10px; letter-spacing:1.5px; color:var(--cyan); margin-bottom:12px; }
.cap-card p{ font-size:12.8px; color:var(--fog); line-height:1.6; }
.cap-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:var(--s3); }
.cap-tags span{ font-family:var(--mono); font-size:9px; letter-spacing:.9px; padding:5px 10px; border-radius:12px; border:1px solid var(--line2); color:var(--ice); }
/* the AI card carries the "new surface" colour */
.cap-card.ai{ --spot-color:rgba(255,79,216,.16); }
.cap-card.ai .card-ic{ color:var(--hyper); border-color:rgba(255,79,216,.28); }
.cap-card.ai .cap-lede{ color:var(--hyper); }
.cap-card.ai .cap-tags span{ border-color:rgba(255,79,216,.3); }

/* --- learning arms --- */
.arm-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.arm-card{ padding:28px 26px; }
.arm-card h3{ font-family:var(--display); font-size:18px; font-weight:700; margin-bottom:8px; }
.arm-tagline{ font-family:var(--display); font-size:13.5px; color:var(--ice); margin-bottom:12px; }
.arm-card p{ font-size:13px; color:var(--fog); line-height:1.62; margin-bottom:16px; }
.arm-list{ display:flex; flex-wrap:wrap; gap:7px; }
.arm-list span{ font-family:var(--mono); font-size:9.5px; letter-spacing:1px; padding:6px 12px; border-radius:14px; border:1px solid var(--line); color:var(--ice); }
@media (max-width:860px){ .arm-grid{ grid-template-columns:1fr; } }

/* --- founder --- */
.founder{ display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--s6); align-items:center; }
/* Founder portrait. Deliberately restrained: a thin technical frame, a soft
   cyan/violet edge and a small lift on hover. No 3D tilt, no heavy filter and
   no large glow behind the photograph — a leadership portrait should read as
   corporate, not as a hero visual. */
.founder-photo{
  position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line2); background:linear-gradient(160deg,var(--panel),var(--void));
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.founder-photo::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(155deg, rgba(79,216,234,.12), transparent 42%, rgba(124,92,250,.14));
  opacity:.55; transition:opacity .45s var(--ease);
}
.founder-photo picture{ display:block; width:100%; height:100%; }
.founder-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 18%;
  display:block; transition:transform .6s var(--ease);
}
.founder:hover .founder-photo{
  transform:translateY(-4px);
  border-color:rgba(79,216,234,.34);
  box-shadow:0 36px 90px rgba(0,0,0,.6), 0 0 40px rgba(79,216,234,.10);
}
.founder:hover .founder-photo::after{ opacity:.8; }
/* a touch of scale only, never a distortion of the face */
.founder:hover .founder-photo img{ transform:scale(1.03); }

@media (prefers-reduced-motion:reduce){
  .founder-photo, .founder-photo img, .founder-photo::after{ transition:none !important; }
  .founder:hover .founder-photo{ transform:none; }
  .founder:hover .founder-photo img{ transform:none; }
}
.founder-role{ font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--cyan); margin-bottom:12px; }
.founder h3{ font-family:var(--display); font-size:clamp(24px,3vw,32px); font-weight:700; letter-spacing:-.5px; margin-bottom:14px; }
.founder p{ font-size:14.5px; color:var(--fog); line-height:1.68; margin-bottom:var(--s3); }
.expertise{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s4); }
.expertise span{ font-family:var(--mono); font-size:10px; letter-spacing:1px; padding:8px 14px; border-radius:18px; border:1px solid var(--line2); color:var(--ice); transition:border-color .25s, transform .25s; }
.expertise span:hover{ border-color:var(--cyan); transform:translateY(-2px); }
@media (max-width:860px){ .founder{ grid-template-columns:1fr; gap:var(--s5); } .founder-photo{ max-width:300px; } }

/* image slot: renders a labelled HUD placeholder until the real
   photo is dropped in, so the layout is never broken by a 404 */
.imgslot{ position:relative; }
.imgslot.empty img{ display:none; }
.imgslot.empty::after{
  content:attr(data-slot); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px; font-family:var(--mono); font-size:9.5px; letter-spacing:1.8px; color:var(--line3);
  background:
    repeating-linear-gradient(45deg, rgba(140,165,225,.03) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, var(--panel), var(--void));
}

/* --- numbers --- */
.num-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.num-card{ padding:28px 24px; text-align:center; }
.num-v{ font-family:var(--hud); font-size:clamp(30px,4vw,42px); font-weight:900; line-height:1; background:linear-gradient(120deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.num-l{ font-family:var(--mono); font-size:10px; letter-spacing:1.8px; color:var(--cyan); margin:14px 0 9px; }
.num-d{ font-size:12px; color:var(--fog); line-height:1.5; }
.num-note{ font-size:11.5px; color:var(--fog); font-style:italic; text-align:center; margin-top:var(--s4); }
@media (max-width:900px){ .num-grid{ grid-template-columns:1fr 1fr; } }

/* --- why choose --- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.why-card{ padding:24px 22px; }
.why-k{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.8px; color:var(--cyan); margin-bottom:12px; }
.why-card h4{ font-family:var(--display); font-size:15px; font-weight:600; margin-bottom:8px; }
.why-card p{ font-size:12.8px; color:var(--fog); line-height:1.58; }

/* --- five elements / road ahead --- */
.elements{ display:flex; flex-wrap:wrap; gap:10px; margin:var(--s4) 0 0; }
.elements span{
  font-family:var(--display); font-size:14px; font-weight:600; padding:12px 22px; border-radius:24px;
  border:1px solid var(--line2); color:var(--ice); background:var(--deep); transition:all .28s var(--ease);
}
.elements span:hover{ border-color:var(--cyan); color:var(--white); transform:translateY(-3px); box-shadow:0 10px 30px rgba(79,216,234,.14); }
.road-list{ display:flex; flex-direction:column; gap:14px; margin-top:var(--s5); }
.road-item{ display:flex; gap:15px; align-items:flex-start; padding:16px 18px; border-radius:var(--r-md); border:1px solid transparent; transition:border-color .25s, background .25s; }
.road-item:hover{ border-color:var(--line); background:var(--deep); }
.road-item .rk{ font-family:var(--mono); font-size:10px; letter-spacing:1.2px; color:var(--cyan); flex:none; margin-top:4px; width:26px; }
.road-item p{ font-size:13.5px; color:var(--ice); }

/* --- closing paths --- */
.paths{ display:grid; grid-template-columns:repeat(5,1fr); gap:13px; margin-top:var(--s5); }
.path-card{ padding:22px 20px; display:flex; flex-direction:column; gap:7px; text-align:left; }
.path-card .pk{ font-family:var(--mono); font-size:9px; letter-spacing:1.6px; color:var(--cyan); }
.path-card h4{ font-family:var(--display); font-size:14.5px; font-weight:600; line-height:1.3; }
.path-card p{ font-size:11.8px; color:var(--fog); }
.path-card .go{ margin-top:auto; padding-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:1.2px; color:var(--cyan); }
@media (max-width:1080px){ .paths{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .paths{ grid-template-columns:1fr; } }

/* ============================================================
   INSIDE TMG — 4K PHOTO SHOWCASE
   Bento gallery + lightbox. Interaction model adapted from
   21st.dev "Gallery Grid with Lightbox" (@moumensoliman):
   category filter, staggered tile entrance, spring lightbox with
   prev/next + keyboard nav — rebuilt in vanilla CSS/JS against
   this design system instead of framer-motion/shadcn.

   Every tile carries a sprite fallback: if an individual photo is
   missing, the tile crops its frame out of the shared contact
   sheet, so the section is never empty and never shows a broken
   image. Drop a real file at the tile's src to override.
   ============================================================ */
.gal-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s5); }
.gal-filter{
  font-family:var(--mono); font-size:11px; letter-spacing:1.2px; padding:10px 18px; border-radius:22px;
  border:1px solid var(--line); background:transparent; color:var(--fog); cursor:pointer;
  transition:color .25s, border-color .25s, background .25s, transform .25s var(--ease);
}
.gal-filter:hover{ color:var(--ice); border-color:var(--line3); }
.gal-filter.active{ background:rgba(79,216,234,.12); border-color:var(--cyan); color:var(--white); }

/* bento: the lead frame earns two columns and two rows */
.gal-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; grid-auto-rows:172px; }
.shot{
  position:relative; overflow:hidden; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--deep); cursor:pointer; padding:0; margin:0; text-align:left; color:var(--white);
  transition:border-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease);
}
.shot.lead{ grid-column:span 2; grid-row:span 2; }
.shot.wide{ grid-column:span 2; }
.shot:hover{ border-color:rgba(79,216,234,.5); transform:translateY(-3px); box-shadow:0 22px 60px rgba(0,0,0,.6); }
.shot:focus-visible{ border-color:var(--cyan); }

/* The sheet crop is the painted default, not a JS-applied repair. Images are
   lazy-loaded, so an error-driven swap would flash an empty panel on scroll-in;
   layering the real photo *over* an already-correct frame avoids that entirely
   and keeps the fallback working with JS disabled. */
.shot-media{
  position:absolute; inset:0; background-color:var(--panel); background-repeat:no-repeat;
  background-size:200% 300%;
  background-position:var(--sx-pos,0%) var(--sy-pos,0%);
  transition:transform .6s var(--ease);
}
.shot:hover .shot-media{ transform:scale(1.06); }
.shot-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:filter .4s;
  /* the renders run cool and dark; a touch of lift keeps them from muddying */
  filter:saturate(1.05) contrast(1.04);
}
/* a photo that failed must not paint alt text or a broken-image glyph
   over the frame underneath it */
.shot-media img.gone{ display:none; }

/* legibility scrim — the captions sit on photography, so they need a floor */
.shot-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,6,12,0) 32%, rgba(4,6,12,.62) 72%, rgba(4,6,12,.92) 100%);
  transition:opacity .35s;
}
.shot-body{ position:absolute; left:0; right:0; bottom:0; padding:16px 18px; pointer-events:none; }
.shot-cat{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.8px; color:var(--cyan); margin-bottom:6px; }
.shot-t{ font-family:var(--display); font-size:14px; font-weight:600; line-height:1.32; }
.shot.lead .shot-t{ font-size:18px; }
.shot-sub{ font-size:11.5px; color:var(--ice); opacity:0; max-height:0; overflow:hidden; transition:opacity .35s, max-height .35s var(--ease); }
.shot:hover .shot-sub{ opacity:.85; max-height:44px; margin-top:5px; }

/* HUD corner brackets, drawn on hover */
.shot-hud{ position:absolute; inset:10px; pointer-events:none; opacity:0; transition:opacity .35s; }
.shot:hover .shot-hud{ opacity:1; }
.shot-hud::before,.shot-hud::after{ content:''; position:absolute; width:18px; height:18px; border:1px solid var(--cyan); }
.shot-hud::before{ top:0; left:0; border-right:0; border-bottom:0; }
.shot-hud::after{ bottom:0; right:0; border-left:0; border-top:0; }
.shot-zoom{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:9px;
  background:rgba(4,6,12,.72); backdrop-filter:blur(8px); border:1px solid var(--line2);
  display:flex; align-items:center; justify-content:center; color:var(--cyan);
  opacity:0; transform:scale(.8); transition:opacity .3s, transform .3s var(--ease);
}
.shot:hover .shot-zoom{ opacity:1; transform:scale(1); }

.gal-note{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.6px; color:var(--fog); margin-top:var(--s4); text-align:center; }

/* filtered-out tiles collapse out of the grid */
.shot.hide{ display:none; }
.shot.pop{ animation:shotPop .38s var(--ease) backwards; }
@keyframes shotPop{ from{ opacity:0; transform:scale(.94) translateY(10px); } to{ opacity:1; transform:none; } }

@media (max-width:900px){
  .gal-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .shot.lead{ grid-column:span 2; grid-row:span 2; }
  .shot.wide{ grid-column:span 2; }
}
@media (max-width:560px){
  .gal-grid{ grid-template-columns:1fr; grid-auto-rows:186px; }
  .shot.lead,.shot.wide{ grid-column:span 1; }
  .shot.lead{ grid-row:span 1; }
  .shot-sub{ opacity:.85; max-height:44px; margin-top:5px; }
}

/* --- lightbox --- */
.lbox{
  position:fixed; inset:0; z-index:500; display:none;
  align-items:center; justify-content:center; padding:var(--s4);
  background:rgba(2,4,9,.93); backdrop-filter:blur(14px);
}
.lbox.on{ display:flex; animation:lbFade .28s var(--ease); }
@keyframes lbFade{ from{ opacity:0; } to{ opacity:1; } }
.lbox-inner{
  position:relative; width:min(1180px,100%); max-height:88vh; display:flex; flex-direction:column; gap:16px;
  animation:lbIn .34s cubic-bezier(.2,1.1,.3,1);
}
@keyframes lbIn{ from{ opacity:0; transform:scale(.93) translateY(14px); } to{ opacity:1; transform:none; } }
.lbox-media{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line2); background-color:var(--panel);
  background-repeat:no-repeat; background-size:200% 300%;
  background-position:var(--lb-pos,0% 0%);
  box-shadow:0 50px 120px rgba(0,0,0,.75);
}
.lbox-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lbox-media img.gone{ display:none; }
.lbox-bar{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; }
.lbox-cat{ font-family:var(--mono); font-size:9.5px; letter-spacing:2px; color:var(--cyan); margin-bottom:7px; }
.lbox-t{ font-family:var(--display); font-size:20px; font-weight:700; }
.lbox-sub{ font-size:13px; color:var(--fog); margin-top:5px; max-width:640px; }
.lbox-count{ font-family:var(--mono); font-size:10px; letter-spacing:1.6px; color:var(--fog); flex:none; }
.lbox-btn{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  background:rgba(8,12,24,.8); border:1px solid var(--line2); color:var(--white);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px);
  transition:border-color .25s, background .25s, transform .25s var(--ease); z-index:2;
}
.lbox-btn:hover{ border-color:var(--cyan); background:rgba(79,216,234,.16); }
.lbox-prev{ left:14px; } .lbox-next{ right:14px; }
.lbox-prev:hover{ transform:translateY(-50%) translateX(-2px); }
.lbox-next:hover{ transform:translateY(-50%) translateX(2px); }
.lbox-close{
  position:absolute; top:-52px; right:0; width:40px; height:40px; border-radius:11px;
  background:rgba(8,12,24,.8); border:1px solid var(--line2); color:var(--white);
  display:flex; align-items:center; justify-content:center; transition:border-color .25s, background .25s;
}
.lbox-close:hover{ border-color:var(--crit); background:rgba(255,90,110,.14); }
.lbox-hint{ font-family:var(--mono); font-size:9px; letter-spacing:1.6px; color:var(--fog); text-align:center; }
body.lbox-open{ overflow:hidden; }
@media (max-width:700px){
  .lbox-close{ top:-46px; }
  .lbox-btn{ width:38px; height:38px; }
  .lbox-t{ font-size:16px; }
  .lbox-hint{ display:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  nav.links{ display:none; }
  .burger{ display:flex; }
  header .cta-btn{ display:none; }
  .grid-4,.num-grid{ grid-template-columns:repeat(2,1fr); }
  .grid-3,.cap-grid,.why-grid{ grid-template-columns:repeat(2,1fr); }
  .split-grid{ grid-template-columns:1fr; gap:var(--s5); }
  .foot-grid{ grid-template-columns:1fr 1fr 1fr; }
  .foot-brand{ grid-column:1/-1; }
}
@media (max-width:680px){
  :root{ --s7:56px; --s8:68px; }
  .wrap{ padding:0 var(--s3); }
  .grid-4,.grid-3,.grid-2,.cap-grid,.why-grid,.num-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .prose .pull{ font-size:17px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal,.stagger > *{ opacity:1 !important; transform:none !important; }
  .scanlines,.field-cursor{ display:none; }
}

/* "All Offensive Security" tail link in the Services mega menu. Declared in
   every page bundle because the header renders on every page. */
.mega-link-all{
  color:var(--cyan) !important; font-family:var(--mono); font-size:11px !important;
  letter-spacing:1.2px; margin-top:6px; border-top:1px solid var(--line); padding-top:12px !important;
}


/* ============================================================
   FINAL POLISH — footer, socials, mega-menu descriptions
   ============================================================ */

/* Pages that genuinely do not exist yet. A dead link that looks
   live is worse than plainly-unavailable text, so these are not
   anchors at all until there is somewhere real to point them. */
.foot-pending{
  font-size:12.8px; color:var(--line3); cursor:default;
  border-bottom:1px dashed var(--line); padding-bottom:1px;
}
.foot-col ul li .foot-pending{ display:inline-block; }

/* Social profiles: the component stays visually correct, but no
   invented URLs. Rendered as marks rather than links until real
   profile URLs are supplied. */
.foot-social-ph{
  width:34px; height:34px; border-radius:10px; border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10.5px; color:var(--line3); cursor:default;
}

/* One-line orientation under each mega-menu column title. */
.mega-col-desc{
  display:block; font-family:var(--body); font-size:11px; letter-spacing:0;
  color:var(--fog); text-transform:none; margin-top:5px; font-weight:400;
}
.mega-col-title{ line-height:1.25; }

/* Focus visibility on the new interactive surfaces. */
.tform-topic:focus-visible,.tpanel-close:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.foot-pending:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }


/* ============================================================
   GALLERY SHEET — DEFERRED LOAD
   The 1536x1024 contact sheet is ~2.1 MB and sits far below the
   fold. It is attached only once .sheet-ready is set (by an
   IntersectionObserver just before the gallery scrolls in), so it
   never competes with first render. Until then the panel colour
   holds the frame and the layout is identical — no shift.
   Falls back to loading immediately when JS is unavailable.
   ============================================================ */
/* The sheet is a 2x3 photo sprite, so no transparency is needed and WebP
   applies. The plain url() line lands first as the fallback for engines that
   do not understand image-set(); image-set() then upgrades it to WebP. Mobile
   gets a 768px-wide sheet, which is still 2x the largest cell it renders. */
.sheet-ready .shot-media,
.sheet-ready .lbox-media{ background-image:url('../images/tmg-office-sheet.jpg'); }
.sheet-ready .shot-media,
.sheet-ready .lbox-media{
  background-image:-webkit-image-set(url('../images/tmg-office-sheet.webp') 1x);
  background-image:image-set(url('../images/tmg-office-sheet.webp') type('image/webp'),
                             url('../images/tmg-office-sheet.jpg')  type('image/jpeg'));
}
@media (max-width:820px){
  .sheet-ready .shot-media,
  .sheet-ready .lbox-media{ background-image:url('../images/tmg-office-sheet-sm.jpg'); }
  .sheet-ready .shot-media,
  .sheet-ready .lbox-media{
    background-image:-webkit-image-set(url('../images/tmg-office-sheet-sm.webp') 1x);
    background-image:image-set(url('../images/tmg-office-sheet-sm.webp') type('image/webp'),
                               url('../images/tmg-office-sheet-sm.jpg')  type('image/jpeg'));
  }
}


/* ============================================================
   GLOBAL FOOTER — OFFICES, SOCIAL, COPYRIGHT
   Additive only. The existing .foot-grid, .foot-col and
   .foot-bottom rules are untouched.
   ============================================================ */

/* Slim two-up address band between the link grid and the legal row.
   Deliberately typographic rather than a card, so it reads as company
   information and never competes with the navigation above it. */
.foot-offices{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3) var(--s5); margin:0 0 var(--s4);
  padding-top:var(--s4); border-top:1px solid var(--line);
}
.foot-office h6{
  font-family:var(--mono); font-size:9px; letter-spacing:1.8px;
  color:var(--cyan); font-weight:400; margin-bottom:8px;
}
.foot-office address{
  font-style:normal; font-size:12.8px; color:var(--fog); line-height:1.75;
  max-width:34ch;
}

/* Real profile links now that URLs exist. Sizing and hover come from the
   pre-existing .foot-social a rule, so the component looks unchanged. */
.foot-social a svg{ width:16px; height:16px; }

/* Absolute bottom of the footer. */
.foot-copy{
  margin-top:var(--s3); font-size:12px; color:var(--fog);
  line-height:1.7; text-align:center; text-wrap:pretty;
}
.foot-copy span{ color:var(--line3); margin:0 4px; }

@media (max-width:680px){
  .foot-offices{ grid-template-columns:1fr; gap:var(--s3); }
  .foot-office address{ max-width:none; }
  .foot-copy{ text-align:left; }
}


/* ============================================================
   BRAND LOGO
   tmg-logo.png is a straight-alpha transparent PNG, cropped to
   the artwork itself. There is no plate behind it, no blend mode
   and no container background — the page background shows through
   the logo's own transparency, including the circuit detail inside
   the shield.
   ============================================================ */
.brand-logo{
  display:block; width:auto; max-width:none; height:40px;
}
.brand-logo.foot-logo{ height:34px; }

@media (max-width:680px){
  .brand-logo{ height:34px; }
  .brand-logo.foot-logo{ height:30px; }
}
@media (max-width:380px){
  .brand-logo{ height:30px; }
}


/* ============================================================
   TOUCH TARGETS  (mobile / tablet only — desktop is untouched)

   Measured before this block, at 375px:
     17x footer column links   15px tall
      3x footer legal links    19px tall
      8x .ais-risk chips       31px tall
      2x .brand logo links     30px tall
   All below the ~44px comfortable-tap threshold. These rules give
   each control a real hit area without changing any type size,
   colour or desktop layout.
   ============================================================ */
@media (max-width:820px){
  .foot-col ul li{ margin-bottom:0; }
  .foot-col ul li a,
  .foot-col ul li .foot-pending{
    display:flex; align-items:center; min-height:44px;
  }
  .foot-legal{ flex-wrap:wrap; gap:0 var(--s3); }
  .foot-legal a{ display:inline-flex; align-items:center; min-height:44px; }
  .foot-social a{ width:42px; height:42px; }
  .brand{ display:inline-flex; align-items:center; min-height:44px; }
  .ais-risk{ min-height:44px; }
  /* the footer grows taller on mobile once links are tappable; pull the
     block spacing in a little so it does not read as dead space */
  .foot-grid{ margin-bottom:var(--s4); gap:var(--s3) var(--s4); }
}

@media (max-width:820px){
  /* Breadcrumb links measured 15px tall. Inline links inside prose are
     deliberately left alone (WCAG 2.5.8 exempts links in a sentence), but a
     breadcrumb is standalone navigation and should be tappable. */
  .crumbs ol li a{ display:inline-flex; align-items:center; min-height:44px; }
  .crumbs ol li span[aria-current]{ display:inline-flex; align-items:center; min-height:44px; }
}

/* ============================================================
   HEADER — SINGLE-LINE NAVIGATION
   The imported menu briefly rendered page SEO titles as labels
   ("Cybersecurity Solutions & TMG-Aegis"), which wrapped the
   header onto three lines. Labels are short again; these rules
   make wrapping impossible regardless of label length.
   Additive only — no size, colour or spacing is redefined.
   ============================================================ */
.nav-btn{ white-space:nowrap; }
nav.links{ flex-wrap:nowrap; }

/* The brand is a fixed-aspect lockup: shield + wordmark. Never let
   flex shrink it into a squashed or icon-only mark. */
.brand{ flex:none; min-width:0; }
.brand-logo{ width:auto; max-width:none; object-fit:contain; }

/* The ecosystem panel is a two-column grid. With an odd number of
   cards the last one would sit beside an empty cell, so it spans
   the row instead. Layout, spacing and styling are unchanged. */
.mega-eco > .mega-card:last-child:nth-child(odd){ grid-column:1 / -1; }