/* ==========================================================================
   SECURITY / EXAM INTEGRITY PAGE
   A vertical "layers of security" narrative — outer to inner, building
   access through to the monitored testing room — distinct from the general
   candidate-journey gallery on the homepage: this is about integrity, not
   comfort. Alternating dark/light rhythm reinforces descent through layers.
   ========================================================================== */

/* ------------------------------- Hero ------------------------------- */
.sec-hero{
  position:relative;
  background:var(--navy-900); color:#fff;
  padding-top:calc(var(--section-pad-y) + 4rem);
  padding-bottom:var(--space-8);
  overflow:hidden;
}
.sec-hero-inner{ max-width:64ch; position:relative; z-index:2; }
.sec-hero-inner h1{ font-size:var(--fs-hero); max-width:16ch; margin-top:1.5rem; }
.sec-hero-inner p{ margin-top:1.75rem; color:rgba(255,255,255,.65); font-size:var(--fs-body-lg); max-width:54ch; }
.sec-hero-glow{
  position:absolute; top:-20%; right:-10%; width:60%; aspect-ratio:1/1;
  background:radial-gradient(circle, rgba(79,184,234,.14), transparent 70%);
  pointer-events:none;
}

/* ------------------------------- Intro / rings ------------------------------- */
.sec-intro{ background:var(--white); }
.intro-grid{ display:grid; grid-template-columns:1fr .85fr; gap:var(--space-9); align-items:center; }
.intro-copy h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); max-width:15ch; margin:1.25rem 0 1.5rem; }
.intro-copy p{ color:var(--ink-soft); font-size:var(--fs-body-lg); max-width:46ch; }
.rings-diagram{ position:relative; aspect-ratio:1/1; }
.rings-diagram svg{ width:100%; height:100%; }
.rings-diagram .ring{ fill:none; stroke:var(--line-on-light); stroke-width:1; }
.rings-diagram .ring-label{ font-family:var(--font-mono); font-size:9.5px; fill:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase; }
.rings-diagram .ring-center{ fill:var(--navy-700); }
.rings-diagram .ring-center-label{ font-family:var(--font-display); font-size:13px; fill:#fff; }
.rings-diagram .ring-dot{ fill:var(--sky-500); }
@media (max-width:900px){ .intro-grid{ grid-template-columns:1fr; } .rings-diagram{ max-width:340px; margin-inline:auto; } }

/* ------------------------------- Layers ------------------------------- */
.sec-layer{ overflow:hidden; }
.sec-layer.bg-dark{ background:var(--navy-900); color:#fff; }
.sec-layer.bg-mid{ background:var(--navy-800); color:#fff; }
.sec-layer.bg-light{ background:var(--paper); color:var(--ink); }
.sec-layer.bg-white{ background:var(--white); color:var(--ink); }

.layer-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-9); align-items:center;
}
.layer-grid.is-reverse .layer-copy{ order:2; }
.layer-grid.is-reverse .layer-visual{ order:1; }

.layer-copy .layer-idx{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; color:var(--sky-500);
  display:flex; align-items:center; gap:.75rem;
}
.sec-layer.bg-light .layer-idx, .sec-layer.bg-white .layer-idx{ color:var(--sky-600); }
.layer-copy .layer-idx .line{ width:2.5rem; height:1px; background:currentColor; opacity:.5; }
.layer-copy h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); max-width:14ch; margin:1.25rem 0 1.25rem; }
.layer-copy > p{ font-size:var(--fs-body-lg); max-width:46ch; opacity:.75; }
.layer-copy .layer-note{
  margin-top:1.5rem; padding:1rem 1.25rem; border-radius:var(--radius-sm);
  border:1px solid var(--line-on-dark); font-size:.88rem; opacity:.85;
}
.sec-layer.bg-light .layer-note, .sec-layer.bg-white .layer-note{ border-color:var(--line-on-light); }
.layer-copy .layer-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }

.layer-visual{ position:relative; }
.layer-visual .lv-main{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; }
.layer-visual .lv-main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.layer-visual .lv-mini-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.75rem; margin-top:.75rem; }
.layer-visual .lv-mini{ position:relative; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:1/1; }
.layer-visual .lv-mini img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.layer-visual .lv-cap{ margin-top:.75rem; font-size:.8rem; opacity:.6; }

@media (max-width:900px){
  .layer-grid, .layer-grid.is-reverse{ grid-template-columns:1fr; }
  .layer-grid.is-reverse .layer-copy, .layer-grid.is-reverse .layer-visual{ order:0; }
  .layer-visual{ order:-1; margin-bottom:1rem; }
}

/* ------------------------------- Governance ------------------------------- */
.sec-governance{ background:var(--navy-800); color:#fff; padding-block:var(--section-pad-y-lg); }
.gov-head{ max-width:56ch; margin-bottom:var(--space-8); }
.gov-head h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); margin-top:1.25rem; max-width:22ch; }
.gov-head p{ margin-top:1.1rem; color:rgba(255,255,255,.62); font-size:var(--fs-body-lg); }
/* Elevated, tilt-ready panels (via .card.card-dark) rather than a flush hairline
   table — gives the "who owns what" distinction real visual weight. */
.gov-split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); }
.gov-col{ padding:var(--space-7); }
.gov-col h3{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sky-400); margin-bottom:1.5rem; }
.gov-col ul{ display:flex; flex-direction:column; gap:1rem; }
.gov-col li{ font-size:.98rem; color:rgba(255,255,255,.78); padding-left:1.3rem; position:relative; }
.gov-col li::before{ content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--sky-500); }
@media (max-width:800px){ .gov-split{ grid-template-columns:1fr; } }

/* ------------------------------- CTA ------------------------------- */
.sec-cta{
  position:relative; background:var(--navy-900); color:#fff;
  padding-block:var(--section-pad-y-lg); text-align:center; overflow:hidden;
}
.sec-cta h2{ font-family:var(--font-display); font-size:var(--fs-display-xl); max-width:20ch; margin-inline:auto; }
.sec-cta p{ margin:1.5rem auto 0; max-width:48ch; color:rgba(255,255,255,.65); font-size:var(--fs-body-lg); }
.sec-cta .cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.5rem; }