/* ============================================================
   TMG SECURITY — GRC, COMPLIANCE & CONSULTING
   Loaded with tmg-home.css (tokens, header, footer) and
   tmg-services.css (shared service furniture).

   Visual language, distinct from the other four:
     Offensive   — attack paths converging on a target
     Defensive   — telemetry converging on operations (cyclical)
     Cloud       — vertical depth, a camera descending
     Application — horizontal, a pipeline advancing
     GRC         — STRUCTURE. Stacked control layers, a matrix,
                   a framework constellation, a decision tree.

   The register is deliberately quieter than the offensive pages:
   this audience is executive. Less glow, more grid; more
   whitespace, tighter type. Motion is restrained — the depth is
   there to organise information, not to impress.
   ============================================================ */

.grc{ --acc:var(--cyan); --acc-soft:rgba(79,216,234,.13); --acc-line:rgba(79,216,234,.42); }
.grc.accent-cyan  { --acc:var(--cyan);  --acc-soft:rgba(79,216,234,.13); --acc-line:rgba(79,216,234,.42); }
.grc.accent-violet{ --acc:#9B85FF;      --acc-soft:rgba(124,92,250,.15); --acc-line:rgba(124,92,250,.45); }
.grc.accent-hyper { --acc:var(--hyper); --acc-soft:rgba(255,79,216,.12); --acc-line:rgba(255,79,216,.42); }

/* ============================================================
   HERO — CONTROL SYSTEM
   ============================================================ */
.grc-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:center; }
.ctrl-stage{ position:relative; width:100%; max-width:500px; margin:0 auto; }
.ctrl-svg{ width:100%; height:auto; overflow:visible; }
.ctrl-ring{ fill:none; stroke:var(--line2); stroke-width:1; }
.ctrl-ring.dashed{ stroke:var(--line); stroke-dasharray:3 8; }
.ctrl-spoke{ stroke:rgba(140,165,225,.26); stroke-width:1; }
.ctrl-node{ fill:var(--panel2); stroke:var(--line2); stroke-width:1; }
.ctrl-node-dot{ fill:var(--cyan); opacity:.7; }
.ctrl-core{ fill:url(#grcCore); stroke:rgba(79,216,234,.45); stroke-width:1.1; }
.ctrl-label{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:8px; letter-spacing:1.4px; color:var(--ice);
  background:rgba(4,6,12,.92); border:1px solid var(--line2); border-radius:11px;
  padding:4px 9px; white-space:nowrap; pointer-events:none;
}
.ctrl-core-label{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; width:124px; }
.ctrl-core-label span{ display:block; font-family:var(--mono); font-size:7.5px; letter-spacing:2px; color:var(--fog); }
.ctrl-core-label b{ display:block; font-family:var(--display); font-size:12.5px; font-weight:700; color:var(--white); line-height:1.25; }
.ctrl-assurance{
  text-align:center; margin-top:var(--s4); font-family:var(--mono); font-size:9px;
  letter-spacing:2px; color:var(--fog);
}
.ctrl-assurance b{ color:var(--cyan); font-weight:500; }
@media (max-width:1000px){ .grc-hero-grid{ grid-template-columns:1fr; gap:var(--s5); } .ctrl-stage{ max-width:400px; order:-1; } }
@media (max-width:420px){ .ctrl-stage{ max-width:300px; } .ctrl-label{ font-size:7px; padding:3px 7px; letter-spacing:1px; } }

/* ============================================================
   01 — CONTROL STACK
   Risk → policy → control → evidence → assurance, separating in
   Z as the section is read. Shallower and slower than the other
   practices' stacks: this one is meant to read as structure.
   ============================================================ */
.cstack{ position:relative; perspective:1600px; padding:var(--s6) 0; overflow:hidden; }
.cstack-inner{
  position:relative; transform-style:preserve-3d; height:390px;
  transform:rotateX(var(--crx,46deg)) rotateZ(var(--crz,-10deg));
}
.cstack-layer{
  position:absolute; left:50%; top:50%; width:min(440px,76vw); height:112px;
  margin:-56px 0 0 max(-220px,-38vw);
  border:1px solid var(--line2); border-radius:var(--r-md);
  background:linear-gradient(150deg, rgba(13,20,36,.94), rgba(6,9,17,.84));
  transform:translateZ(var(--cz,0px));
  display:flex; flex-direction:column; justify-content:center; gap:5px; padding:15px 20px;
  box-shadow:0 16px 44px rgba(0,0,0,.5); transition:border-color .5s, box-shadow .5s;
  will-change:transform;
}
.cstack-layer.lit{ border-color:var(--acc-line); box-shadow:0 16px 52px var(--acc-soft); }
.cstack-k{ font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--acc); }
.cstack-t{ font-family:var(--display); font-size:15px; font-weight:600; }
.cstack-d{ font-size:11.5px; color:var(--fog); line-height:1.5; }
.cstack-cap{ text-align:center; font-family:var(--mono); font-size:9px; letter-spacing:1.7px; color:var(--fog); margin-top:var(--s4); }
@media (max-width:640px){ .cstack{ perspective:900px; } .cstack-inner{ height:310px; } .cstack-layer{ height:94px; margin-top:-47px; padding:12px 15px; } }

/* ============================================================
   02 — RISK MATRIX
   ============================================================ */
.matrix-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:center; }
.matrix{ display:grid; grid-template-columns:auto repeat(4,1fr); grid-template-rows:repeat(4,1fr) auto; gap:5px; }
.matrix-cell{
  aspect-ratio:1/1; border:1px solid var(--line); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:8px; letter-spacing:1.2px; color:var(--fog);
  background:var(--deep); transition:border-color .45s, background .45s, color .45s, transform .45s var(--ease);
}
.matrix-cell.lit{ transform:translateY(-2px); }
.matrix-cell.r-low.lit{ border-color:rgba(63,224,176,.4); background:rgba(63,224,176,.07); color:var(--ok); }
.matrix-cell.r-med.lit{ border-color:rgba(245,180,78,.4); background:rgba(245,180,78,.07); color:var(--warn); }
.matrix-cell.r-high.lit{ border-color:rgba(255,90,110,.4); background:rgba(255,90,110,.07); color:var(--crit); }
.matrix-cell.r-crit.lit{ border-color:rgba(255,79,216,.5); background:rgba(255,79,216,.09); color:var(--hyper); }
.matrix-ylab,.matrix-xlab{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:7.5px; letter-spacing:1.1px; color:var(--fog); padding:4px;
}
.matrix-ylab{ writing-mode:vertical-rl; transform:rotate(180deg); }
.matrix-axis{
  font-family:var(--mono); font-size:8.5px; letter-spacing:2px; color:var(--ice); margin-top:11px; text-align:center;
}
.matrix-steps{ display:flex; flex-direction:column; gap:9px; }
.matrix-step{
  display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--deep);
  transition:border-color .45s, background .45s, transform .45s var(--ease);
}
.matrix-step.lit{ border-color:var(--acc-line); background:var(--panel); transform:translateX(5px); }
.matrix-step .mk{ font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--acc); width:78px; flex:none; }
.matrix-step .md{ font-size:12.5px; color:var(--fog); line-height:1.5; }
@media (max-width:900px){ .matrix-wrap{ grid-template-columns:1fr; gap:var(--s5); } }
@media (max-width:480px){
  /* Grid items default to min-width:auto, so the band labels ("CRITICAL")
     hold the columns open and push the matrix past a 320px viewport.
     Letting the cells shrink is what keeps the square grid square. */
  .matrix{ grid-template-columns:16px repeat(4,1fr); gap:4px; }
  .matrix-cell{ font-size:6.5px; min-width:0; padding:2px; overflow:hidden; }
  .matrix-ylab{ font-size:6px; min-width:0; padding:2px 0; letter-spacing:.6px; }
  .matrix-xlab{ font-size:6px; min-width:0; padding:3px 1px; letter-spacing:.5px; }
}

/* ============================================================
   03 — FRAMEWORK CONSTELLATION
   Textual cards, deliberately not badges: a certification badge
   we are not entitled to display would be a false claim.
   ============================================================ */
.consto{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.consto-card{
  text-align:left; padding:22px 20px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--deep); color:var(--white); cursor:pointer;
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.consto-card:hover{ border-color:var(--line3); transform:translateY(-3px); }
.consto-card[aria-expanded="true"]{ border-color:var(--acc); background:var(--panel); }
.consto-k{ font-family:var(--hud); font-size:15px; font-weight:700; letter-spacing:.6px; color:var(--acc); display:block; }
.consto-s{ font-size:12px; color:var(--fog); line-height:1.5; display:block; margin-top:9px; }
.consto-more{
  max-height:0; opacity:0; overflow:hidden; display:block;
  transition:max-height .45s var(--ease), opacity .35s, margin-top .45s var(--ease);
}
.consto-card[aria-expanded="true"] .consto-more{ max-height:280px; opacity:1; margin-top:14px; }
.consto-row{ display:block; padding-top:11px; margin-top:11px; border-top:1px solid var(--line); }
.consto-row b{ display:block; font-family:var(--mono); font-size:8px; letter-spacing:1.5px; color:var(--acc); margin-bottom:6px; font-weight:500; }
.consto-row span{ display:block; font-size:11.5px; color:var(--ice); line-height:1.55; }
@media (max-width:900px){ .consto{ grid-template-columns:1fr; } }

/* ============================================================
   04 — DECISION ENGINE (consulting)
   ============================================================ */
.decide{ position:relative; perspective:1200px; }
.decide-inner{ display:flex; flex-direction:column; gap:0; align-items:center; transform-style:preserve-3d; }
.decide-node{
  width:min(430px,90%); border:1px solid var(--line2); border-radius:var(--r-md);
  background:linear-gradient(155deg, rgba(13,20,36,.9), rgba(6,9,17,.78));
  padding:17px 22px; text-align:center;
  transform:translateZ(var(--dz,0px)) scale(var(--ds,1)); opacity:var(--dop,1);
  transition:border-color .45s, transform .5s var(--ease), opacity .5s;
}
.decide-node.lit{ border-color:var(--acc-line); }
.decide-k{ font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--acc); display:block; }
.decide-t{ font-family:var(--display); font-size:16px; font-weight:600; display:block; margin-top:7px; }
.decide-d{ font-size:11.8px; color:var(--fog); display:block; margin-top:5px; line-height:1.5; }
.decide-link{ width:1px; height:26px; background:var(--line3); position:relative; }
.decide-link::after{
  content:''; position:absolute; bottom:-3px; left:-3px; width:6px; height:6px;
  border-bottom:1px solid var(--acc); border-right:1px solid var(--acc);
  transform:rotate(45deg); opacity:.6;
}
@media (prefers-reduced-motion:reduce){
  .decide-node{ transform:none !important; opacity:1 !important; }
  .cstack{ perspective:none; }
  .cstack-inner{ transform:none !important; height:auto; display:flex; flex-direction:column; gap:8px; }
  .cstack-layer{ position:relative; left:auto; top:auto; margin:0; width:100%; height:auto; transform:none !important; box-shadow:none; }
}

/* ============================================================
   LAYERS — requirements / controls / evidence
   ============================================================ */
.tri{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tri-card{ padding:26px 22px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--deep);
  transition:border-color .45s, background .45s, transform .45s var(--ease); }
.tri-card.lit{ border-color:var(--acc-line); background:var(--panel); transform:translateY(-4px); }
.tri-n{ font-family:var(--hud); font-size:26px; font-weight:900; color:var(--acc); opacity:.5; line-height:1; }
.tri-k{ font-family:var(--display); font-size:17px; font-weight:600; margin:13px 0 8px; }
.tri-d{ font-size:12.5px; color:var(--fog); line-height:1.6; }
@media (max-width:820px){ .tri{ grid-template-columns:1fr; } }

/* ============================================================
   DATA LIFECYCLE (privacy)
   ============================================================ */
.dlife{ display:flex; align-items:stretch; gap:0; }
.dlife-step{ flex:1 1 0; min-width:0; padding:0 4px; text-align:center; }
.dlife-box{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--deep); padding:17px 10px; height:100%;
  transition:border-color .5s var(--ease), background .5s, transform .5s var(--ease);
}
.dlife-step.lit .dlife-box{ border-color:var(--acc-line); background:var(--panel); transform:translateY(-4px); }
.dlife-k{ font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--ice); display:block; }
.dlife-c{ font-family:var(--mono); font-size:7.5px; letter-spacing:1px; color:var(--acc); display:block; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line2); }
@media (max-width:820px){ .dlife{ flex-direction:column; gap:8px; } .dlife-step{ text-align:left; } .dlife-c{ border-top:0; padding-top:5px; } }

/* ============================================================
   GAP VISUAL
   ============================================================ */
.gap-vis{ border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5) var(--s4); background:var(--deep); }
.gap-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:var(--s4); align-items:center; }
.gap-side{ text-align:center; padding:22px 18px; border:1px solid var(--line2); border-radius:var(--r-md); background:var(--panel2); }
.gap-side.target{ border-color:rgba(63,224,176,.34); }
.gap-k{ font-family:var(--mono); font-size:9px; letter-spacing:1.8px; color:var(--fog); display:block; }
.gap-t{ font-family:var(--display); font-size:16px; font-weight:600; display:block; margin-top:8px; }
.gap-mid{ text-align:center; }
.gap-bar{ width:100%; min-width:70px; height:2px; background:repeating-linear-gradient(90deg,var(--warn) 0 6px,transparent 6px 12px); }
.gap-lbl{ font-family:var(--hud); font-size:14px; font-weight:900; color:var(--warn); letter-spacing:2px; display:block; margin:11px 0; }
@media (max-width:700px){ .gap-row{ grid-template-columns:1fr; } .gap-bar{ height:36px; width:2px; margin:0 auto; background:repeating-linear-gradient(180deg,var(--warn) 0 6px,transparent 6px 12px); } }

/* ============================================================
   ROADMAP (vCISO)
   ============================================================ */
.rmap{ display:flex; align-items:stretch; gap:0; }
.rmap-step{ flex:1 1 0; min-width:0; padding:0 5px; }
.rmap-box{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--deep); padding:20px 16px; height:100%;
  transition:border-color .5s var(--ease), background .5s, transform .5s var(--ease);
}
.rmap-step.lit .rmap-box{ border-color:var(--acc-line); background:var(--panel); transform:translateY(-4px); }
.rmap-h{ font-family:var(--hud); font-size:13px; font-weight:700; letter-spacing:1.2px; color:var(--acc); display:block; }
.rmap-t{ font-family:var(--display); font-size:14.5px; font-weight:600; display:block; margin:11px 0 7px; }
.rmap-d{ font-size:11.8px; color:var(--fog); line-height:1.5; display:block; }
.rmap-note{ font-size:11.5px; color:var(--fog); font-style:italic; margin-top:var(--s4); }
@media (max-width:820px){ .rmap{ flex-direction:column; gap:8px; } }

/* ============================================================
   VENDOR ECOSYSTEM
   ============================================================ */
.vend{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5) var(--s4); background:var(--deep); }
.vend-svg{ width:100%; height:auto; overflow:visible; display:block; }
.vend-edge{ fill:none; stroke:rgba(140,165,225,.3); stroke-width:1;
  stroke-dasharray:var(--len,120); stroke-dashoffset:var(--len,120); transition:stroke-dashoffset 1s var(--ease); }
.vend.on .vend-edge{ stroke-dashoffset:0; }
.vend.on .vend-edge.key{ stroke:var(--acc-line); stroke-width:1.5; }
.vend-node{ fill:var(--panel2); stroke:var(--line2); stroke-width:1.2; transition:stroke .5s, fill .5s; }
.vend-node.core{ fill:rgba(255,79,216,.12); stroke:rgba(255,79,216,.5); }
.vend.on .vend-node.key{ stroke:var(--acc); fill:rgba(79,216,234,.12); }
.vend-lbl{ font-family:var(--mono); font-size:7.5px; letter-spacing:1.1px; fill:var(--ice); }
.vend-steps{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:var(--s4); }
.vend-step{
  font-family:var(--mono); font-size:9px; letter-spacing:1.5px; padding:8px 14px; border-radius:16px;
  border:1px solid var(--line2); color:var(--fog); transition:border-color .4s, color .4s;
}
.vend-step.on{ border-color:var(--acc); color:var(--white); }
.vend-steps i{ color:var(--line3); font-style:normal; align-self:center; }

/* ============================================================
   SECURITY ARCHITECTURE LADDER
   ============================================================ */
.arch-l{ display:flex; flex-direction:column; gap:8px; }
.arch-row{
  display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--deep);
  transition:border-color .45s, background .45s, transform .45s var(--ease);
}
.arch-row.lit{ border-color:var(--acc-line); background:var(--panel); transform:translateX(5px); }
.arch-k{ font-family:var(--mono); font-size:9px; letter-spacing:1.6px; color:var(--acc); width:96px; flex:none; }
.arch-d{ font-size:12.5px; color:var(--fog); }
.arch-b{ margin-left:auto; flex:none; font-family:var(--mono); font-size:7.5px; letter-spacing:1.1px;
  padding:4px 9px; border-radius:10px; border:1px dashed var(--line2); color:var(--warn); }
@media (max-width:640px){ .arch-row{ flex-wrap:wrap; gap:8px; } .arch-k{ width:auto; } .arch-b{ margin-left:0; } }

/* ============================================================
   CAPABILITY GRIDS + LEGAL NOTE
   ============================================================ */
.capg{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.capg-card{ display:flex; flex-direction:column; gap:9px; padding:28px 26px; --spot-color:var(--acc-soft); }
.capg-n{ font-family:var(--hud); font-size:11px; font-weight:700; letter-spacing:1.4px; color:var(--acc); }
.capg-ic{ color:var(--acc); display:flex; margin:4px 0 2px; }
.capg-t{ font-family:var(--display); font-size:17.5px; font-weight:600; line-height:1.25; }
.capg-s{ font-family:var(--display); font-size:13.5px; color:var(--ice); }
.capg-d{ font-size:12.8px; color:var(--fog); line-height:1.6; }
.capg-list{ display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.capg-list span{ font-family:var(--mono); font-size:8px; letter-spacing:.9px; padding:4px 9px; border-radius:11px; border:1px solid var(--line2); color:var(--ice); }
.capg-go{ margin-top:auto; padding-top:15px; font-family:var(--mono); font-size:9.5px; letter-spacing:1.4px; color:var(--acc); }
@media (max-width:1000px){ .capg{ grid-template-columns:1fr; } }

/* the legal/scope note is load-bearing on these pages, so it is
   given real presence rather than being a footnote */
.legal-note{
  display:flex; gap:15px; align-items:flex-start; padding:20px 22px; margin-top:var(--s5);
  border:1px solid var(--line2); border-left:2px solid var(--warn); border-radius:var(--r-md);
  background:rgba(245,180,78,.04);
}
.legal-note .ic{ color:var(--warn); flex:none; margin-top:2px; }
.legal-note p{ font-size:12.5px; color:var(--ice); line-height:1.65; }
.legal-note b{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.6px; color:var(--warn); display:block; margin-bottom:7px; font-weight:500; }