/* ============================================================
   TMG SECURITY — OFFENSIVE SECURITY SERVICE PAGES
   Loaded alongside tmg-home.css, which supplies the tokens,
   header, footer, buttons, .spot cards and reveal system.
   Nothing here redefines those; this file adds only the
   components the service pages introduce.

   Accent: each service sets --acc / --acc-soft via one of the
   .accent-* classes, so a single component set reads as seven
   distinct services without seven sets of rules.
   ============================================================ */

/* Order matters: the .svc fallback is declared FIRST so an .accent-* class on
   the same element wins. Declared after, it would have equal specificity and
   later source order, silently forcing every service page to the same accent. */
.svc           { --acc:var(--cyan);   --acc-soft:rgba(79,216,234,.13); --acc-line:rgba(79,216,234,.42); }

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

/* "All Offensive Security" sits at the end of the menu column and should
   read as a destination rather than another sibling link. Declared here and
   mirrored in tmg-home.css so it styles correctly on pages that do not load
   this file. */
.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;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.crumbs{ margin-bottom:var(--s4); }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; list-style:none; }
.crumbs li{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:1.6px; color:var(--fog); }
.crumbs li:not(:last-child)::after{ content:'/'; color:var(--line3); }
.crumbs a{ color:var(--fog); transition:color .2s; }
.crumbs a:hover{ color:var(--acc); }
.crumbs [aria-current]{ color:var(--ice); }

/* ============================================================
   SERVICE HERO
   ============================================================ */
.svc-hero{ padding:var(--s6) 0 var(--s5); }
.svc-hero-grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:var(--s6); align-items:start; }
.svc-h1{
  font-family:var(--display); font-size:clamp(30px,4.6vw,52px); font-weight:700;
  line-height:1.05; letter-spacing:-1.4px; margin-bottom:20px;
}
.svc-lead{ font-size:16.5px; color:var(--ice); max-width:620px; margin-bottom:var(--s4); line-height:1.62; }
.svc-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.svc-intro{ margin-top:var(--s6); }
.svc-intro p{ font-size:15px; }

/* the numbered service marker */
.svc-badge{
  position:relative; display:flex; flex-direction:column; gap:5px; padding:24px 22px;
  border:1px solid var(--line); border-left:2px solid var(--acc); border-radius:var(--r-md);
  background:linear-gradient(160deg, var(--acc-soft), rgba(8,12,24,.5));
}
.svc-badge-n{ font-family:var(--hud); font-size:36px; font-weight:900; line-height:1; color:var(--acc); opacity:.55; }
.svc-badge-ic{ color:var(--acc); margin:10px 0 4px; display:flex; }
.svc-badge-l{ font-family:var(--mono); font-size:8.5px; letter-spacing:2px; color:var(--fog); }
.svc-badge-t{ font-family:var(--display); font-size:16px; font-weight:600; }

@media (max-width:900px){
  .svc-hero-grid{ grid-template-columns:1fr; gap:var(--s4); }
  .svc-badge{ flex-direction:row; align-items:center; gap:14px; padding:16px 18px; }
  .svc-badge-n{ font-size:26px; }
  .svc-badge-ic{ margin:0; }
  .svc-badge-l{ display:none; }
}

/* ============================================================
   HERO — CONCEPTUAL ATTACK SURFACE (overview page)
   ============================================================ */
.ofs-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:center; }
.surface-stage{ position:relative; width:100%; max-width:460px; aspect-ratio:1/1; margin:0 auto; }
.surface-svg{ width:100%; height:100%; overflow:visible; }
.surface-ring{ fill:none; stroke:var(--line2); stroke-width:1; }
.surface-ring.outer{ stroke:var(--line); stroke-dasharray:3 7; }
.surface-spoke{ stroke:rgba(140,165,225,.34); stroke-width:1; }
.surface-node{ fill:var(--cyan); filter:drop-shadow(0 0 6px rgba(79,216,234,.75)); }
.surface-core{ fill:url(#ofsCore); stroke:rgba(124,92,250,.55); stroke-width:1.2; }

/* attack paths approach from outside the perimeter */
.surface-path{
  stroke:var(--hyper); stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:5 7; opacity:.5;
  animation:ofsApproach 3.4s linear infinite; animation-delay:var(--d,0s);
}
@keyframes ofsApproach{ to{ stroke-dashoffset:-24; } }

.surface-core-label{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; pointer-events:none; width:110px;
}
.surface-core-label span{ display:block; font-family:var(--mono); font-size:8px; letter-spacing:2px; color:var(--fog); }
.surface-core-label b{ display:block; font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.4px; color:var(--white); line-height:1.25; }

.surface-label{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:8.5px; letter-spacing:1.4px; color:var(--ice);
  background:rgba(4,6,12,.86); border:1px solid var(--line2); border-radius:12px;
  padding:4px 9px; white-space:nowrap; pointer-events:none;
}
.surface-legend{
  position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  display:flex; gap:16px; font-family:var(--mono); font-size:8px; letter-spacing:1.4px; color:var(--fog);
}
.surface-legend .lg{ display:flex; align-items:center; gap:6px; }
.surface-legend .lg::before{ content:''; width:14px; height:2px; border-radius:2px; }
.lg-path::before{ background:var(--hyper); }
.lg-surface::before{ background:var(--cyan); }

@media (max-width:1000px){
  .ofs-hero-grid{ grid-template-columns:1fr; gap:var(--s5); }
  .surface-stage{ max-width:380px; order:-1; }
}
@media (max-width:420px){
  .surface-stage{ max-width:290px; }
  .surface-label{ font-size:7.5px; padding:3px 7px; letter-spacing:1px; }
  .surface-legend{ font-size:7px; gap:11px; }
}

/* ============================================================
   TRADITIONAL vs MODERN SURFACE
   ============================================================ */
.expand-grid{ display:grid; grid-template-columns:1fr auto 1.5fr; gap:var(--s4); align-items:stretch; }
.expand-col{ border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; background:var(--deep); }
.expand-col.modern{ border-color:var(--line2); background:linear-gradient(160deg, rgba(124,92,250,.07), rgba(8,12,24,.7)); }
.expand-hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:var(--s4); }
.expand-tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:2px; color:var(--fog); }
.expand-col.modern .expand-tag{ color:var(--hyper); }
.expand-count{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.4px; color:var(--line3); }
.expand-list{ display:flex; flex-wrap:wrap; gap:8px; }
.expand-list li span{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:1.2px;
  padding:9px 15px; border-radius:18px; border:1px solid var(--line); color:var(--ice); background:var(--panel2);
}
.expand-col.modern .expand-list li span{ border-color:rgba(124,92,250,.3); }
/* the newer surfaces are the argument, so they arrive last and lit */
.expand-grid.on .modern-list li:nth-child(n+4) span{ animation:surfIn .5s var(--ease) backwards; border-color:var(--acc-line,rgba(79,216,234,.42)); }
.expand-grid.on .modern-list li:nth-child(4) span{ animation-delay:.05s; }
.expand-grid.on .modern-list li:nth-child(5) span{ animation-delay:.14s; }
.expand-grid.on .modern-list li:nth-child(6) span{ animation-delay:.23s; }
.expand-grid.on .modern-list li:nth-child(7) span{ animation-delay:.32s; }
.expand-grid.on .modern-list li:nth-child(8) span{ animation-delay:.41s; }
@keyframes surfIn{ from{ opacity:0; transform:translateY(9px) scale(.94); } to{ opacity:1; transform:none; } }
.expand-note{ font-size:12px; color:var(--fog); margin-top:var(--s3); }
.expand-arrow{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; }
.ea-line{ flex:1; width:1px; background:linear-gradient(180deg,transparent,var(--line3),transparent); min-height:26px; }
.ea-label{ font-family:var(--mono); font-size:8px; letter-spacing:1.6px; color:var(--fog); writing-mode:vertical-rl; }
.expand-close{ margin-top:var(--s5); font-family:var(--display); font-size:17px; font-weight:600; color:var(--white); max-width:760px; line-height:1.5; }

@media (max-width:860px){
  .expand-grid{ grid-template-columns:1fr; }
  .expand-arrow{ flex-direction:row; }
  .ea-line{ width:auto; height:1px; flex:1; min-height:0; background:linear-gradient(90deg,transparent,var(--line3),transparent); }
  .ea-label{ writing-mode:horizontal-tb; }
}

/* ============================================================
   SEVEN CAPABILITY CARDS
   ============================================================ */
.cap7-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cap7{
  position:relative; display:flex; flex-direction:column; gap:8px; padding:26px 24px;
  border-top:2px solid transparent; --spot-color:var(--acc-soft);
}
.cap7::after{
  content:''; position:absolute; top:-1px; left:-1px; right:-1px; height:2px;
  background:var(--acc); opacity:0; transition:opacity .3s; border-radius:2px 2px 0 0;
}
.cap7:hover::after{ opacity:1; }
.cap7-n{ font-family:var(--hud); font-size:11px; font-weight:700; letter-spacing:1.4px; color:var(--acc); }
.cap7-ic{ color:var(--acc); margin:6px 0 4px; display:flex; }
.cap7-t{ font-family:var(--display); font-size:16.5px; font-weight:600; line-height:1.28; }
.cap7-d{ font-size:12.8px; color:var(--fog); line-height:1.55; }
.cap7-go{ margin-top:auto; padding-top:16px; font-family:var(--mono); font-size:9.5px; letter-spacing:1.4px; color:var(--acc); }

@media (max-width:1000px){ .cap7-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cap7-grid{ grid-template-columns:1fr; } }

/* ============================================================
   ARCHITECTURE FLOW
   Horizontal path on desktop; a genuine vertical flow on mobile
   rather than a squeezed copy of the desktop diagram.
   ============================================================ */
.flow-wrap{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5) var(--s4);
  background:linear-gradient(180deg, rgba(13,20,36,.55), rgba(6,9,17,.55));
}
.flow-head{ margin-bottom:var(--s5); }
.flow-title{ font-family:var(--display); font-size:20px; font-weight:700; margin-bottom:8px; }
.flow-lede{ font-size:13.5px; color:var(--fog); max-width:640px; }

.flow{ display:flex; align-items:stretch; gap:0; list-style:none; }
.flow-stage{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
/* the connector between stages */
.flow-stage:not(:last-child)::after{
  content:''; position:absolute; top:34px; right:-7px; width:14px; height:1px;
  background:var(--line3); z-index:1;
}
.flow-stage:not(:last-child)::before{
  content:''; position:absolute; top:31px; right:-9px; width:5px; height:5px;
  border-top:1px solid var(--acc); border-right:1px solid var(--acc);
  transform:rotate(45deg); z-index:2; opacity:.55;
}
.flow-node{
  height:100%; margin:0 7px; padding:15px 14px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--deep);
  display:flex; flex-direction:column; gap:5px;
  transition:border-color .4s var(--ease), background .4s, transform .4s var(--ease);
}
.flow-stage.lit .flow-node{ border-color:var(--acc-line); background:var(--panel); transform:translateY(-3px); }
.flow-k{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.8px; color:var(--acc); }
.flow-l{ font-family:var(--display); font-size:14px; font-weight:600; }
.flow-d{ font-size:11.5px; color:var(--fog); line-height:1.5; }
.flow-boundary{
  display:block; margin:9px 7px 0; font-family:var(--mono); font-size:8px; letter-spacing:1.2px;
  color:var(--warn); border-top:1px dashed rgba(245,180,78,.34); padding-top:8px;
}
.flow-note{ font-family:var(--mono); font-size:9px; letter-spacing:1.4px; color:var(--fog); margin-top:var(--s4); }

@media (max-width:860px){
  .flow{ flex-direction:column; gap:9px; }
  .flow-stage{ flex:none; }
  .flow-node{ margin:0; flex-direction:row; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .flow-k{ flex:none; min-width:74px; }
  .flow-l{ flex:none; }
  .flow-d{ flex:1 1 100%; }
  /* connector rotates to point down the vertical flow */
  .flow-stage:not(:last-child)::after{ top:auto; bottom:-9px; right:auto; left:26px; width:1px; height:9px; }
  .flow-stage:not(:last-child)::before{ top:auto; bottom:-7px; right:auto; left:24px; transform:rotate(135deg); }
  .flow-boundary{ margin:9px 0 0; }
}
@media (max-width:400px){
  .flow-wrap{ padding:var(--s4) var(--s3); }
  .flow-k{ min-width:0; flex:1 1 100%; }
}

/* ============================================================
   TEST AREAS — expandable technical grid
   ============================================================ */
.ta-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ta-item{
  position:relative; display:flex; flex-direction:column; gap:6px; text-align:left;
  padding:18px 20px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--deep); color:var(--white); cursor:pointer; --spot-color:var(--acc-soft);
  transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.ta-item:hover{ border-color:var(--acc-line); transform:translateY(-2px); }
.ta-item[aria-expanded="true"]{ border-color:var(--acc); background:var(--panel); }
.ta-n{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.6px; color:var(--acc); }
.ta-l{ font-family:var(--display); font-size:14.5px; font-weight:600; }
.ta-d{
  font-size:12px; color:var(--fog); line-height:1.55;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .4s var(--ease), opacity .3s, margin-top .4s var(--ease);
}
.ta-item[aria-expanded="true"] .ta-d{ max-height:190px; opacity:1; margin-top:4px; }
/* pointer users get a preview without committing to a click */
@media (hover:hover) and (pointer:fine){
  .ta-item:hover .ta-d{ max-height:190px; opacity:.85; margin-top:4px; }
}
@media (max-width:900px){ .ta-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ta-grid{ grid-template-columns:1fr; } }

.scope-note{
  font-size:11.5px; color:var(--fog); font-style:italic; line-height:1.6;
  margin-top:var(--s4); max-width:760px;
}

/* ============================================================
   METHODOLOGY — active step follows scroll
   ============================================================ */
.method,.when-rail{ list-style:none; position:relative; padding-left:26px; }
.method::before,.when-rail::before{
  content:''; position:absolute; left:6px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, transparent, var(--line2) 12%, var(--line2) 88%, transparent);
}
.method-step{ position:relative; display:flex; gap:18px; padding:15px 0; align-items:flex-start; }
.method-step::before{
  content:''; position:absolute; left:-24px; top:24px; width:9px; height:9px; border-radius:50%;
  background:var(--void); border:1px solid var(--line3);
  transition:border-color .35s, background .35s, box-shadow .35s;
}
.method-step.lit::before{ border-color:var(--acc); background:var(--acc); box-shadow:0 0 14px var(--acc); }
.method-n{
  font-family:var(--hud); font-size:13px; font-weight:700; color:var(--line3); flex:none; width:34px;
  transition:color .35s; padding-top:2px;
}
.method-step.lit .method-n{ color:var(--acc); }
.method-body{ display:flex; flex-direction:column; gap:4px; }
.method-k{ font-family:var(--display); font-size:15.5px; font-weight:600; letter-spacing:.2px; }
.method-d{ font-size:13px; color:var(--fog); line-height:1.55; }

@media (max-width:520px){
  .method,.when-rail{ padding-left:22px; }
  .method-step{ gap:12px; }
  .method-n{ width:26px; font-size:11.5px; }
  .method-k{ font-size:14px; }
}

/* ============================================================
   PIPELINE — discover → retest
   ============================================================ */
.pipeline{ display:flex; list-style:none; gap:0; align-items:stretch; }
.pipe-step{
  position:relative; flex:1 1 0; min-width:0; padding:18px 16px; text-align:center;
  border:1px solid var(--line); border-right:0; background:var(--deep);
  transition:background .35s, border-color .35s;
}
.pipe-step:first-child{ border-radius:var(--r-md) 0 0 var(--r-md); }
.pipe-step:last-child{ border-right:1px solid var(--line); border-radius:0 var(--r-md) var(--r-md) 0; }
.pipe-step.lit{ background:var(--panel); border-color:var(--acc-line); }
.pipe-k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:1.6px; color:var(--acc); margin-bottom:7px; }
.pipe-d{ display:block; font-size:11.5px; color:var(--fog); line-height:1.45; }
.pipe-step:not(:last-child)::after{
  content:''; position:absolute; right:-6px; top:50%; width:11px; height:11px;
  transform:translateY(-50%) rotate(45deg); background:var(--deep);
  border-top:1px solid var(--line); border-right:1px solid var(--line); z-index:2;
  transition:background .35s, border-color .35s;
}
.pipe-step.lit:not(:last-child)::after{ background:var(--panel); border-color:var(--acc-line); }

@media (max-width:820px){
  .pipeline{ flex-direction:column; }
  .pipe-step{ text-align:left; border-right:1px solid var(--line); border-bottom:0; }
  .pipe-step:first-child{ border-radius:var(--r-md) var(--r-md) 0 0; }
  .pipe-step:last-child{ border-bottom:1px solid var(--line); border-radius:0 0 var(--r-md) var(--r-md); }
  .pipe-step:not(:last-child)::after{ right:auto; left:24px; top:auto; bottom:-6px; transform:rotate(135deg); }
}

/* four questions */
.fourq{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-top:var(--s5); }
.fourq-card{ padding:22px 20px; }
.fourq-n{ font-family:var(--hud); font-size:11px; font-weight:700; color:var(--acc); letter-spacing:1.4px; }
.fourq-card h4{ font-family:var(--display); font-size:14.5px; font-weight:600; margin:9px 0 6px; }
.fourq-card p{ font-size:12px; color:var(--fog); line-height:1.5; }
@media (max-width:900px){ .fourq{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .fourq{ grid-template-columns:1fr; } }

/* ============================================================
   INDUSTRIES / WHO
   ============================================================ */
.ind-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.ind-card{ display:flex; flex-direction:column; gap:9px; padding:22px 20px; }
.ind-ic{ color:var(--acc); display:flex; }
.ind-k{ font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:.3px; }
.ind-d{ font-size:11.8px; color:var(--fog); line-height:1.5; }
@media (max-width:1000px){ .ind-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .ind-grid{ grid-template-columns:1fr; } }

.who-row{ display:flex; flex-wrap:wrap; gap:9px; }
/* Non-interactive labels, but sized to the 44px touch minimum so they stay
   comfortable on a phone and never read as a tap target that does nothing. */
.who-chip{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:1.1px; padding:10px 17px;
  border-radius:22px; border:1px solid var(--line2); color:var(--ice); background:var(--deep);
  transition:border-color .25s, transform .25s var(--ease);
}
.who-chip:hover{ border-color:var(--acc); transform:translateY(-2px); }

/* ============================================================
   DELIVERABLES
   ============================================================ */
.deliv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.deliv-card{ padding:24px 22px; }
.deliv-k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:1.6px; color:var(--acc);
  padding-bottom:11px; margin-bottom:12px; border-bottom:1px solid var(--line);
}
.deliv-card p{ font-size:12.5px; color:var(--fog); line-height:1.58; }
@media (max-width:900px){ .deliv-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .deliv-grid{ grid-template-columns:1fr; } }

/* ============================================================
   RELATED SERVICES
   ============================================================ */
.rel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.rel-card{ display:flex; flex-direction:column; gap:8px; padding:22px 20px; --spot-color:var(--acc-soft); }
.rel-card.rel-alt{ border-style:dashed; }
.rel-ic{ color:var(--acc); display:flex; }
.rel-t{ font-family:var(--display); font-size:14.5px; font-weight:600; line-height:1.3; }
.rel-d{ font-size:11.8px; color:var(--fog); line-height:1.5; }
.rel-go{ margin-top:auto; padding-top:14px; font-family:var(--mono); font-size:9px; letter-spacing:1.4px; color:var(--acc); }
@media (max-width:1000px){ .rel-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .rel-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ border-top:1px solid var(--line); max-width:900px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q-wrap{ margin:0; }
.faq-q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3);
  background:none; border:none; text-align:left; padding:20px 4px; color:var(--white);
  font-family:var(--display); font-size:15.5px; font-weight:600; line-height:1.45;
  transition:color .2s;
}
.faq-q:hover{ color:var(--acc); }
.faq-chev{
  flex:none; width:9px; height:9px; margin-top:6px;
  border-right:1.5px solid var(--fog); border-bottom:1.5px solid var(--fog);
  transform:rotate(45deg); transition:transform .3s var(--ease), border-color .3s;
}
.faq-q[aria-expanded="true"] .faq-chev{ transform:rotate(225deg) translate(-2px,-2px); border-color:var(--acc); }
.faq-a{ padding:0 4px 22px; max-width:760px; }
.faq-a p{ font-size:13.5px; color:var(--fog); line-height:1.72; }
.faq-a[hidden]{ display:none; }
.faq-a.opening{ animation:faqIn .32s var(--ease); }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ============================================================
   WHY TMG
   ============================================================ */
.whytmg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.whytmg{ padding:24px 22px; }
.wt-k{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--acc); margin-bottom:13px; }
.whytmg h4{ font-family:var(--display); font-size:15px; font-weight:600; margin-bottom:8px; }
.whytmg p{ font-size:12.5px; color:var(--fog); line-height:1.58; }
@media (max-width:1000px){ .whytmg-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .whytmg-grid{ grid-template-columns:1fr; } }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .surface-path{ animation:none; opacity:.42; }
  .expand-grid.on .modern-list li span{ animation:none; }
  .flow-stage .flow-node,.method-step::before,.pipe-step{ transition:none; }
}


/* ============================================================
   SCENARIO TIMELINE  —  "WHEN THIS APPLIES"
   Replaces the earlier flat card grid, which read as four
   stacked boxes: number, title and description were too close
   in weight to scan.

   Four clearly separated type roles — editorial numeral,
   monospace label, display title, muted description — joined by
   a connector that fills as the section is scrolled.

   Same markup on mobile; only the rail geometry changes, so the
   phone gets a real timeline rather than shrunken cards.
   ============================================================ */
.scen{ position:relative; max-width:940px; }
.scen-rail{ position:absolute; left:47px; top:18px; bottom:18px; width:1px; background:var(--line2); }
.scen-rail i{
  display:block; width:100%; height:0;
  background:linear-gradient(180deg, var(--acc,var(--cyan)), rgba(79,216,234,.25));
  transition:height 1.1s var(--ease);
}
.scen-item{
  position:relative; display:grid; grid-template-columns:96px 1fr; gap:0 26px;
  padding:20px 22px 20px 0; border-radius:var(--r-md);
  transition:background .3s, transform .35s var(--ease);
}
.scen-item::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background-image:
    linear-gradient(to right, rgba(140,165,225,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140,165,225,.05) 1px, transparent 1px);
  background-size:22px 22px; transition:opacity .35s;
}
.scen-item:hover::before{ opacity:1; }
.scen-item:hover{ background:rgba(13,20,36,.5); transform:translateX(4px); }
.scen-num{
  position:relative; grid-row:1/3; justify-self:end; align-self:start;
  font-family:var(--hud); font-size:34px; font-weight:900; line-height:1;
  color:var(--line3); letter-spacing:-1px;
  transition:color .4s var(--ease), font-size .35s var(--ease), text-shadow .4s;
}
.scen-item.lit .scen-num{ color:var(--acc,var(--cyan)); }
.scen-item:hover .scen-num{ font-size:38px; text-shadow:0 0 22px var(--acc-soft,rgba(79,216,234,.35)); }
.scen-dot{
  position:absolute; left:47px; top:34px; width:9px; height:9px; margin-left:-4px;
  border-radius:50%; background:var(--void); border:1px solid var(--line3); z-index:2;
  transition:border-color .4s, background .4s, box-shadow .4s, transform .4s var(--ease);
}
.scen-item.lit .scen-dot{ border-color:var(--acc,var(--cyan)); background:var(--acc,var(--cyan)); box-shadow:0 0 12px var(--acc,var(--cyan)); }
.scen-item:hover .scen-dot{ transform:scale(1.35); }
.scen-body{ grid-column:2; }
.scen-k{ display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:2px; color:var(--fog); margin-bottom:9px; transition:color .4s; }
.scen-item.lit .scen-k{ color:var(--acc,var(--cyan)); }
.scen-t{ display:block; font-family:var(--display); font-size:19px; font-weight:600; line-height:1.28; letter-spacing:-.3px; margin-bottom:8px; color:var(--white); }
.scen-d{ display:block; font-size:13px; color:var(--fog); line-height:1.62; max-width:560px; }

@media (max-width:760px){
  .scen-rail{ left:15px; }
  .scen-item{ grid-template-columns:1fr; gap:0; padding:16px 0 16px 40px; }
  .scen-num{
    position:absolute; left:15px; top:16px; transform:translateX(-50%);
    grid-row:auto; justify-self:auto; font-size:20px;
    background:var(--void); padding:3px 0; z-index:3;
  }
  .scen-item:hover .scen-num{ font-size:22px; }
  .scen-dot{ display:none; }
  .scen-body{ grid-column:1; }
  .scen-t{ font-size:16.5px; }
  .scen-d{ font-size:12.5px; }
  .scen-item:hover{ transform:none; }
}
@media (max-width:360px){ .scen-item{ padding-left:34px; } .scen-t{ font-size:15.5px; } }
@media (prefers-reduced-motion:reduce){
  .scen-rail i{ transition:none; }
  .scen-item,.scen-num,.scen-dot{ transition:none; }
}