/* ============================================================
   TMG SECURITY — PRACTICE CARD + COMPACT NAVIGATION
   Loaded on every page.

   Two fixes:

   1. PRACTICE CARDS (GRC + Consulting)
      The previous markup gave the container and the card the same
      class, so every card inherited `display:grid; 3 columns` and
      split its own content into three columns. That is why the
      titles, copy and pills sat side by side instead of stacking.

      Rebuilt with a real hierarchy: number + icon, title,
      one-line positioning, description, then capabilities that
      stay quiet until the card is engaged, and a CTA pinned to
      the bottom so all three align regardless of copy length.

   2. NAVIGATION
      Shorter header, scroll-aware compaction, and a Services
      panel that is capped to the viewport and scrolls internally
      so Consulting and the Blueprint CTA are always reachable.
   ============================================================ */

/* ============================================================
   PRACTICE CARD
   ============================================================ */
.pgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  perspective:1400px;              /* shared camera for the row */
}

.pcard{
  position:relative; display:flex; flex-direction:column;
  padding:30px 28px 26px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--deep);
  transform:translateY(var(--py,0)) scale(var(--ps,1));
  transition:border-color .35s var(--ease), background .35s var(--ease),
             transform .4s var(--ease), box-shadow .4s var(--ease), opacity .4s;
  will-change:transform;
}
/* light follows the pointer — the same spotlight idea as .spot,
   scoped to the card so it reads as material rather than glow */
.pcard::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:var(--pl,0); transition:opacity .35s;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%), var(--acc-soft,rgba(79,216,234,.13)), transparent 60%);
}
.pcard:hover,.pcard:focus-within,.pcard.on{
  border-color:var(--acc-line); background:var(--panel);
  box-shadow:0 26px 60px rgba(0,0,0,.45);
}
/* siblings step back rather than blur — content stays readable */
.pgrid:hover .pcard:not(:hover){ opacity:.72; }
.pgrid:hover .pcard:not(:hover)::before{ opacity:0; }

/* --- head: number + icon on one line --- */
.pcard-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.pcard-n{
  font-family:var(--hud); font-size:12px; font-weight:700; letter-spacing:1.6px;
  color:var(--line3); transition:color .35s;
}
.pcard:hover .pcard-n,.pcard.on .pcard-n{ color:var(--acc); }
.pcard-ic{
  width:42px; height:42px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--panel2); color:var(--acc);
  transition:border-color .35s, background .35s, transform .4s var(--ease);
}
.pcard:hover .pcard-ic,.pcard.on .pcard-ic{ border-color:var(--acc-line); transform:translateY(-2px); }

/* --- title: the one element allowed to dominate --- */
.pcard-t{
  font-family:var(--display); font-weight:700; letter-spacing:-.4px;
  font-size:clamp(17px,1.35vw,20px); line-height:1.22;
  margin-bottom:9px; color:var(--white); text-wrap:balance;
}
.pcard-t a{ color:inherit; }
/* stretched link: the whole card is clickable without nesting
   interactive elements inside an anchor */
.pcard-t a::after{ content:''; position:absolute; inset:0; border-radius:inherit; z-index:1; }
.pcard-t a:focus-visible::after{ outline:2px solid var(--cyan); outline-offset:3px; }

/* --- one-line positioning, clearly secondary to the title --- */
.pcard-s{
  font-family:var(--display); font-size:13.5px; font-weight:500; line-height:1.4;
  color:var(--acc); margin-bottom:14px;
}
/* --- description --- */
.pcard-d{ font-size:13px; color:var(--fog); line-height:1.65; margin-bottom:18px; }

/* --- capabilities: present but quiet until engaged --- */
.pcard-caps{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
}
.pcard-caps-k{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--mono); font-size:8px; letter-spacing:1.8px; color:var(--fog);
  width:100%; background:none; border:0; padding:0; text-align:left;
  min-height:26px; position:relative; z-index:2;   /* above the stretched link */
}
.pcard-caps-k .chev{
  width:7px; height:7px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg); transition:transform .3s var(--ease); flex:none; margin-top:-3px;
}
.pcard-list{
  display:flex; flex-wrap:wrap; gap:5px;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s var(--ease), opacity .35s, margin-top .45s var(--ease);
}
.pcard-list li{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.8px; line-height:1.3;
  padding:5px 9px; border-radius:9px;
  border:1px solid var(--line); background:rgba(18,27,48,.5); color:var(--fog);
  transition:border-color .3s, color .3s;
}
.pcard:hover .pcard-list li,.pcard.on .pcard-list li{ color:var(--ice); }
/* pointer devices reveal on hover; touch uses the button */
@media (hover:hover) and (pointer:fine){
  .pcard:hover .pcard-list,.pcard:focus-within .pcard-list{ max-height:220px; opacity:1; margin-top:12px; }
}
.pcard.open .pcard-list{ max-height:220px; opacity:1; margin-top:12px; }
.pcard.open .pcard-caps-k .chev{ transform:rotate(225deg); margin-top:2px; }

/* --- CTA pinned so every card in the row aligns --- */
.pcard-go{
  display:flex; align-items:center; gap:8px; margin-top:18px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:1.5px; color:var(--acc);
  opacity:.72; transition:opacity .3s, gap .3s var(--ease);
}
.pcard:hover .pcard-go,.pcard.on .pcard-go{ opacity:1; gap:12px; }

/* --- scroll reveal: blur-to-focus, staggered --- */
.pgrid .pcard{ opacity:0; transform:translateY(22px) scale(.985); filter:blur(5px); }
.pgrid.in .pcard{ opacity:1; transform:none; filter:none; transition:opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); }
.pgrid.in .pcard:nth-child(2){ transition-delay:.1s; }
.pgrid.in .pcard:nth-child(3){ transition-delay:.2s; }

@media (max-width:1000px){ .pgrid{ grid-template-columns:1fr; perspective:none; } }
@media (max-width:560px){ .pcard{ padding:24px 20px 22px; } }

@media (prefers-reduced-motion:reduce){
  .pgrid .pcard{ opacity:1; transform:none; filter:none; }
  .pcard,.pcard-ic,.pcard-go,.pcard-list{ transition:none; }
  .pgrid:hover .pcard:not(:hover){ opacity:1; }
}

/* ============================================================
   COMPACT HEADER
   The navbar stays a plain three-part flex row — brand | links |
   CTA — and nothing about the mega menu is allowed to participate
   in that row or influence its dimensions.
   ============================================================ */
/* Reserve the scrollbar gutter permanently. Without this, locking the page
   removes the scrollbar and every fixed/sticky element shifts by its width —
   which is what made the navbar jump when the Services panel opened. It also
   keeps the panel's centring identical locked and unlocked. */
html{ scrollbar-gutter:stable; }

header{ --hh:68px; z-index:200; }
.nav{ height:var(--hh); transition:height .25s var(--ease); }
header.compact{ --hh:58px; }
header.compact .brand{ font-size:15px; }
header.compact .brand .mark{ width:24px; height:24px; }
.brand,.brand .mark{ transition:font-size .25s var(--ease), width .25s var(--ease), height .25s var(--ease); }
header{ transition:background .25s, border-color .25s, box-shadow .25s; }
header.compact{ box-shadow:0 10px 34px rgba(0,0,0,.45); border-bottom-color:var(--line2); }
@media (max-width:1080px){ header{ --hh:62px; } header.compact{ --hh:56px; } }

/* ============================================================
   MEGA MENU — independent viewport overlay

   Anchored to the viewport rather than to the nav item, so the
   panel's width and height can never feed back into the navbar
   layout. `position:fixed` is safe here because no ancestor of
   the header establishes a transform/filter/perspective context.

   The panel is a flex column: a scrolling body plus a pinned
   footer. The Blueprint CTA previously sat inside the scroll box
   as `position:sticky; bottom:-20px`, which is why it overlapped.
   ============================================================ */
.nav-backdrop{
  position:fixed; inset:0; z-index:180; background:rgba(2,4,9,.5);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .22s;
}
.nav-backdrop.on{ opacity:1; pointer-events:auto; }

.nav-item .mega{
  position:fixed;
  top:calc(var(--hh) + 10px);
  /* inset + auto margins centre the panel inside the fixed containing block,
     which excludes the scrollbar. `left:50%` centres on innerWidth instead and
     lands the panel half a scrollbar off-centre. This also leaves `transform`
     free for the open/close animation. */
  /* inset:0 + auto margins centre the panel in the fixed containing block.
     Measured residual offset from the navbar's centre is ~8px (half a
     scrollbar) — 0.7% of the panel width, and not worth the extra machinery
     that chasing it exactly would require. */
  left:0; right:0; margin-inline:auto;
  width:min(1180px, calc(100vw - 32px));
  max-height:calc(100vh - var(--hh) - 26px);
  padding:0; z-index:210;
  display:flex; flex-direction:column;
  transform:translateY(-8px) scale(.99);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-item.open .mega{ transform:translateY(0) scale(1); opacity:1; visibility:visible; }
.nav-item .mega.mega-eco{ width:min(660px, calc(100vw - 32px)); }

/* only the panel body scrolls */
.mega-scroll{
  overflow-y:auto; overscroll-behavior:contain; min-height:0;
  padding:22px 24px 8px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px 24px; align-content:start;
  scrollbar-width:thin; scrollbar-color:var(--line3) transparent;
}
.mega-scroll::-webkit-scrollbar{ width:9px; }
.mega-scroll::-webkit-scrollbar-track{ background:transparent; }
.mega-scroll::-webkit-scrollbar-thumb{
  background:var(--line2); border-radius:9px; border:3px solid transparent; background-clip:content-box;
}
.mega-scroll::-webkit-scrollbar-thumb:hover{ background:var(--cyan); background-clip:content-box; }
.mega-eco .mega-scroll{ grid-template-columns:1fr 1fr; padding-bottom:20px; }

/* footer lives outside the scroll box, so content can never hide under it */
.mega-foot{
  flex:none; padding:13px 24px 17px; border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(8,12,24,.35), #070A14);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.mega-foot .mega-blueprint-cta{ position:static; margin:0; padding:13px 16px; }

/* tighter category rhythm — the panel height came from spacing */
.mega-scroll .mega-col-title{
  grid-column:1/-1; margin:14px 0 6px; font-size:9px; letter-spacing:1.9px;
  padding-top:12px; border-top:1px solid var(--line);
}
.mega-scroll .mega-col-title:first-child{ margin-top:0; padding-top:0; border-top:0; }
.mega-col-desc{ font-size:10.5px; margin-top:3px; }
.mega-scroll a.mega-link{ padding:6px 9px; font-size:12.4px; line-height:1.3; }
.mega-link-all{
  margin-top:2px !important; padding-top:7px !important;
  border-top:0 !important; font-size:9.5px !important; opacity:.85;
}
.mega-link-all:hover{ opacity:1; }

@media (max-width:1080px){ .nav-item .mega{ display:none !important; } }

/* ============================================================
   MOBILE NAV — accordion, page locked behind it
   ============================================================ */
.mobile-nav{ top:var(--hh); }
.mnav-group{ border-bottom:1px solid var(--line); }
.mnav-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:0; color:var(--white); text-align:left;
  font-family:var(--display); font-size:19px; font-weight:600; padding:15px 4px; min-height:52px;
}
.mnav-toggle .chev{
  width:9px; height:9px; border-right:1.6px solid var(--fog); border-bottom:1.6px solid var(--fog);
  transform:rotate(45deg); transition:transform .3s var(--ease); flex:none; margin-top:-4px;
}
.mnav-toggle[aria-expanded="true"] .chev{ transform:rotate(225deg); margin-top:3px; border-color:var(--cyan); }
.mnav-sub{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.mnav-toggle[aria-expanded="true"] + .mnav-sub{ max-height:560px; }
.mnav-sub a{
  display:block; padding:10px 4px 10px 14px; font-size:13.5px; color:var(--ice);
  border-left:1px solid var(--line);
}
.mnav-sub a:hover{ color:var(--white); border-left-color:var(--cyan); }
.mnav-sub .mnav-all{ font-family:var(--mono); font-size:10px; letter-spacing:1.2px; color:var(--cyan); }

@media (prefers-reduced-motion:reduce){
  .nav-item .mega,.nav-backdrop,.nav,.mnav-sub{ transition:none; }
}

/* ============================================================
   HOMEPAGE CARD LINKING
   Navigation only — no card was restyled. Each card gets one
   overlay anchor as its FIRST child, so `.spot` (position:relative)
   is the containing block and inset:0 covers the whole surface.

   The anchor must be a direct child: `.spot > *` sets
   position:relative on every child to lift it over the spotlight
   ::before, so an anchor nested deeper would resolve inset:0
   against that inner wrapper and only cover part of the card.
   ============================================================ */
.card-link{
  position:absolute; inset:0; z-index:6; border-radius:inherit;
  text-decoration:none; cursor:pointer;
}
/* The overlay sits above the card content so the entire surface is
   clickable. Safe here: none of these cards contain another link or
   control that the overlay could swallow. */
.spot:has(> .card-link),
.future-card:has(> .card-link){ cursor:pointer; }

/* Focus lands on the card outline, not an invisible sliver. */
.card-link:focus-visible{ outline:2px solid var(--cyan); outline-offset:-3px; }

/* The ecosystem cells became anchors — reset inherited link styling
   so they render exactly as the buttons did. */
a.eco-cell{ text-decoration:none; }
a.eco-cell:focus-visible{ outline:2px solid var(--cell-color,var(--cyan)); outline-offset:2px; }

/* Tap feedback on touch, where there is no hover state to lean on. */
@media (hover:none){
  .spot:has(> .card-link):active,
  .future-card:has(> .card-link):active{ transform:translateY(-2px); }
}