body[data-page="security"] .security-opening-viewport { height: 100vh; height: 100dvh; padding-top: var(--header-height); display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #020f1e; }
body[data-page="security"] .security-opening-viewport .hero { min-height: 0; padding-block: clamp(14px, 3dvh, 36px); display: flex; }
body[data-page="security"] .security-opening-viewport .hero-content { min-height: 0; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
body[data-page="security"] .security-opening-viewport h1 { font-size: clamp(1.8rem, min(3.7vw, 6dvh), 3.5rem); margin-bottom: clamp(12px, 2.5dvh, 24px); }
body[data-page="security"] .security-opening-viewport .security-hero-art { height: 100%; display: flex; align-items: center; justify-content: center; container-type: size; }
body[data-page="security"] .security-opening-viewport .security-hero-art img { width: min(100%, 150cqh); height: auto; max-width: 100%; max-height: none; flex-shrink: 0; aspect-ratio: 1; object-fit: contain; -webkit-mask-image: radial-gradient(circle closest-side at center, #000 45%, rgba(0,0,0,.99) 50%, rgba(0,0,0,.97) 55%, rgba(0,0,0,.93) 60%, rgba(0,0,0,.86) 65%, rgba(0,0,0,.76) 70%, rgba(0,0,0,.63) 75%, rgba(0,0,0,.47) 80%, rgba(0,0,0,.3) 85%, rgba(0,0,0,.15) 90%, rgba(0,0,0,.045) 95%, transparent 100%); mask-image: radial-gradient(circle closest-side at center, #000 45%, rgba(0,0,0,.99) 50%, rgba(0,0,0,.97) 55%, rgba(0,0,0,.93) 60%, rgba(0,0,0,.86) 65%, rgba(0,0,0,.76) 70%, rgba(0,0,0,.63) 75%, rgba(0,0,0,.47) 80%, rgba(0,0,0,.3) 85%, rgba(0,0,0,.15) 90%, rgba(0,0,0,.045) 95%, transparent 100%); }
.security-intro-band { padding-block: clamp(24px, 5dvh, 56px); background: #fff; }
.security-intro-band .eyebrow { margin-bottom: 12px; }
.security-intro-band h2 { font-size: clamp(1.6rem, min(3vw, 4.5dvh), 2.8rem); margin: 0; }
body[data-page="security"] .security-controls-section { padding-top: 24px; }
body[data-page="security"] .control-card[id] { scroll-margin-top:calc(var(--header-height) + 20px); }
body[data-page="security"] .security-scope-note { max-width:84ch; margin:0 0 24px; color:var(--muted); font-size:.95rem; line-height:1.6; }
@media (max-width: 800px) and (orientation: portrait) {
  body[data-page="security"] .security-opening-viewport .hero-content { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
  body[data-page="security"] .security-opening-viewport h1 { font-size: clamp(1.65rem, min(7vw, 4.3dvh), 3rem); margin-bottom: 12px; }
  body[data-page="security"] .security-opening-viewport .hero-copy p { font-size: .82rem; line-height: 1.5; margin-bottom: 14px; }
  body[data-page="security"] .security-opening-viewport .hero-copy .eyebrow { font-size: .6rem; margin-bottom: 10px; }
  body[data-page="security"] .security-opening-viewport .button { padding: 10px 16px; min-height: 42px; font-size: .75rem; }
  .security-intro-band { padding-block: 24px; }
  .security-intro-band h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
}
@media (max-height: 600px) and (orientation: landscape) {
  body[data-page="security"] .security-opening-viewport h1 { font-size: clamp(1.2rem, 5dvh, 2rem); margin-bottom: 8px; }
  body[data-page="security"] .security-opening-viewport .hero-copy .eyebrow { font-size: .55rem; margin-bottom: 6px; }
  body[data-page="security"] .security-opening-viewport .hero-copy p { font-size: .72rem; line-height: 1.4; margin-bottom: 8px; }
  body[data-page="security"] .security-opening-viewport .button { min-height: 34px; padding: 8px 12px; font-size: .7rem; }
  .security-intro-band { padding-block: 16px; }
  .security-intro-band h2 { font-size: 1.4rem; }
  .security-intro-band .eyebrow { font-size: .6rem; margin-bottom: 8px; }
}
@media (max-width: 380px) and (max-height: 650px) and (orientation: portrait) {
  body[data-page="security"] .security-opening-viewport .hero { padding-block: 10px; }
  body[data-page="security"] .security-opening-viewport h1 { font-size: 1.5rem; margin-bottom: 8px; }
  body[data-page="security"] .security-opening-viewport .hero-copy p { font-size: .75rem; line-height: 1.4; margin-bottom: 10px; }
  body[data-page="security"] .security-opening-viewport .hero-copy .eyebrow { margin-bottom: 8px; }
  .security-intro-band { padding-block: 18px; }
}