/* =====================================================================
   DrillRoutine — single stylesheet
   css_naming        : suit (PascalCase components, hyphenated descendants)
   section_class_names: module-based (Module-hero, Module-features, ...)
   css_methodology   : utility-first (u-* helpers alongside SUIT components)
   css_units         : em-based
   css_variables     : basic-colors only
   css_architecture  : css-in-js style (components grouped as blocks)
   css_reset         : none
   spacing_rhythm    : modular 8px (0.5em / 1em / 1.5em / 2em / 3em / 4em)
   color_sections    : streaming-dark-red
   typography        : streaming-nunito
   ===================================================================== */

:root {
  --bg-primary:   #0d0d0d;
  --bg-secondary: #141414;
  --bg-tertiary:  #1a1a1a;
  --bg-elevated:  #1f1f1f;
  --accent:       #e50914;
  --accent-hover: #f40612;
  --accent-soft:  rgba(229, 9, 20, 0.12);
  --text-primary:   #ffffff;
  --text-secondary: #b3b3b3;
  --text-muted:     #808080;
  --border-soft:    rgba(255, 255, 255, 0.06);
  --border-strong:  rgba(255, 255, 255, 0.12);
}
body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1em;
  line-height: 1.6;
}
body, h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
h1 { font-size: 3.25em; font-weight: 800; line-height: 1.12; margin: 0 0 0.5em; }
h2 { font-size: 2.125em; font-weight: 700; line-height: 1.22; margin: 0 0 0.75em; }
h3 { font-size: 1.5em;  font-weight: 600; line-height: 1.3;  margin: 0 0 0.5em; }
h4 { font-size: 1.125em; font-weight: 600; margin: 0 0 0.5em; }
p  { font-size: 1em; line-height: 1.7; font-weight: 400; margin: 0 0 1em; color: var(--text-secondary); }
a  { color: var(--accent); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
.Page-container {
  max-width: 75em;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5em;
  box-sizing: border-box;
}
.Header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.Header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1.5em;
  max-width: 75em;
  margin: 0 auto;
}
.Header-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.25em;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.Header-logo:hover { color: var(--text-primary); }
.Header-logo-mark {
  display: inline-block;
  width: 1.75em;
  height: 1.75em;
  background: var(--accent);
  border-radius: 0.375em;
  text-align: center;
  line-height: 1.75em;
  font-size: 0.85em;
  color: #fff;
}
.Header-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5em;
  cursor: pointer;
  width: 2.5em;
  height: 2.5em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
}
.Header-toggle span {
  display: block;
  width: 1.5em;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.Header-close {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 2em;
  line-height: 1;
  padding: 0.25em 0.5em;
  cursor: pointer;
  align-self: flex-end;
}
.Header-nav {
  display: flex;
  align-items: center;
}
.Header-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.Header-link {
  display: inline-block;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.9375em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.5em 1em;
  transition: color 0.18s ease;
}
.Header-link:hover { color: var(--text-primary); }
.Header-link.is-active { color: var(--accent); }
[data-mm-header] {
  --mm-bg: #0d0d0d;
  --mm-text: #ffffff;
  --mm-primary: #e50914;
  --mm-overlay-bg: rgba(0, 0, 0, 0.7);
}
@media (max-width: 767px) {
  .Header-toggle { display: inline-flex; }
  .Header-close { display: inline-block; }
  .Header-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(20em, 85vw);
    background: var(--mm-bg, #0d0d0d);
    flex-direction: column;
    align-items: stretch;
    padding: 1em 1.25em 2em;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
    z-index: 1001;
    overflow-y: auto;
  }
  .Header-nav.mm-open { transform: translateX(0); }
  .Header-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0.5em;
  }
  .Header-link {
    display: block;
    padding: 0.875em 0.5em;
    border-bottom: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
    color: var(--mm-text, #fff);
  }
}
.Module {
  padding: 4em 0;
}
.Module-header {
  margin-bottom: 2.5em;
  max-width: 42em;
}
.Module-eyebrow {
  display: inline-block;
  color: var(--accent);
  font-size: 0.8125em;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1em;
}
.Module-title { color: var(--text-primary); }
.Module-lede { font-size: 1.125em; color: var(--text-secondary); max-width: 38em; }
.Module--alt   { background: var(--bg-secondary); }
.Module--deep  { background: var(--bg-tertiary); }
.Module--flat  { background: var(--bg-primary); }
.Module-hero {
  padding: 5em 0 4em;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}
.Hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3em;
  align-items: center;
}
.Hero-content { max-width: 32em; }
.Hero-eyebrow {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8125em;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.5em 1em;
  border-radius: 2em;
  margin-bottom: 1.25em;
}
.Hero-title {
  font-size: 3.25em;
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 0.75em;
}
.Hero-title span { color: var(--accent); }
.Hero-lede {
  font-size: 1.1875em;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 1.75em;
}
.Hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 2em;
}
.Hero-trustList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5em;
}
.Hero-trustList li {
  display: flex;
  align-items: flex-start;
  gap: 0.625em;
  color: var(--text-secondary);
  font-size: 0.9375em;
}
.Hero-trustList li::before {
  content: '';
  flex: 0 0 auto;
  width: 0.375em;
  height: 0.375em;
  margin-top: 0.625em;
  border-radius: 50%;
  background: var(--accent);
}
.Hero-image {
  position: relative;
  border-radius: 1em;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-tertiary);
}
.Hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.Btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.875em 1.75em;
  border-radius: 0.375em;
  font-weight: 700;
  font-size: 0.9375em;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.Btn--primary {
  background: var(--accent);
  color: #fff;
}
.Btn--primary:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: scale(1.04);
}
.Btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.Btn--ghost:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  transform: scale(1.04);
}
.Btn--block { width: 100%; }
.CardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17em, 1fr));
  gap: 1.5em;
}
.Card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 0.75em;
  padding: 1.75em;
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.Card:hover {
  transform: scale(1.03);
  border-color: var(--accent);
}
.Card-index {
  display: inline-block;
  font-size: 0.8125em;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.16em;
  margin-bottom: 0.75em;
}
.Card-title {
  font-size: 1.25em;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5em;
}
.Card-body {
  font-size: 0.9375em;
  color: var(--text-secondary);
  margin: 0;
}
.Split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  align-items: center;
}
.Split-image {
  border-radius: 0.875em;
  overflow: hidden;
  aspect-ratio: 5/4;
  background: var(--bg-tertiary);
}
.Split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.Split-body p { color: var(--text-secondary); }
.Split-list {
  list-style: none;
  margin: 1.5em 0 0;
  padding: 0;
  display: grid;
  gap: 0.75em;
}
.Split-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  color: var(--text-secondary);
}
.Split-list strong {
  color: var(--text-primary);
  font-weight: 700;
}
.TeamGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  gap: 1.5em;
}
.Person {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 0.75em;
  overflow: hidden;
  transition: transform 0.22s ease;
}
.Person:hover { transform: scale(1.03); }
.Person-photo {
  aspect-ratio: 1/1;
  background: var(--bg-tertiary);
  overflow: hidden;
}
.Person-photo img { width: 100%; height: 100%; object-fit: cover; }
.Person-body { padding: 1.25em; }
.Person-name { font-size: 1.0625em; font-weight: 700; color: var(--text-primary); margin: 0 0 0.25em; }
.Person-role { font-size: 0.875em; color: var(--accent); font-weight: 600; margin: 0 0 0.5em; letter-spacing: 0.02em; }
.Person-bio  { font-size: 0.875em; color: var(--text-secondary); margin: 0; }
.FaqList { display: grid; gap: 0.75em; }
.Faq {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 0.625em;
  overflow: hidden;
  transition: border-color 0.18s ease;
}
.Faq[open] { border-color: var(--accent); }
.Faq-question {
  list-style: none;
  cursor: pointer;
  padding: 1.125em 1.25em;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}
.Faq-question::-webkit-details-marker { display: none; }
.Faq-question::after {
  content: '+';
  color: var(--accent);
  font-size: 1.5em;
  line-height: 1;
  transition: transform 0.22s ease;
}
.Faq[open] .Faq-question::after { transform: rotate(45deg); }
.Faq-answer {
  padding: 0 1.25em 1.25em;
  color: var(--text-secondary);
}
.Faq-answer p { margin: 0; }
.Contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3em;
  align-items: start;
}
.Contact-info p { color: var(--text-secondary); }
.Contact-meta {
  list-style: none;
  margin: 1.5em 0 0;
  padding: 0;
  display: grid;
  gap: 1em;
}
.Contact-meta li {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 1em;
  align-items: baseline;
  border-top: 1px solid var(--border-soft);
  padding-top: 1em;
}
.Contact-meta strong {
  color: var(--text-muted);
  font-size: 0.75em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.Contact-meta span,
.Contact-meta a {
  color: var(--text-primary);
  font-size: 0.9375em;
}
.Form {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 0.875em;
  padding: 2em;
}
.Form-field { margin-bottom: 1.25em; }
.Form-label {
  display: block;
  font-size: 0.8125em;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}
.Form-input,
.Form-textarea {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-strong);
  border-radius: 0.5em;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1em;
  padding: 0.75em 0.875em;
  box-sizing: border-box;
  transition: border-color 0.18s ease;
}
.Form-input:focus,
.Form-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.Form-textarea { resize: vertical; min-height: 8em; }
.Form-agree {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  font-size: 0.875em;
  color: var(--text-secondary);
  margin: 0.75em 0 1.5em;
}
.Form-agree input { margin-top: 0.25em; }
.Form-notice {
  padding: 1em 1.25em;
  border-radius: 0.5em;
  font-size: 0.9375em;
  margin-bottom: 1.25em;
}
.Form-notice--ok  { background: rgba(46, 160, 67, 0.12);  color: #6cd58a; }
.Form-notice--err { background: rgba(229, 9, 20, 0.12); color: #ff6c6c; }
.StickyBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 13, 13, 0.96);
  border-top: 1px solid var(--border-strong);
  padding: 0.75em 1.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  z-index: 900;
  transform: translateY(110%);
  transition: transform 0.32s ease;
  backdrop-filter: blur(8px);
}
.StickyBar.is-visible { transform: translateY(0); }
.StickyBar-text { font-size: 0.9375em; color: var(--text-secondary); margin: 0; }
.StickyBar-text strong { color: var(--text-primary); }
.StickyBar-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5em;
  padding: 0 0.25em;
}
.PostList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17em, 1fr));
  gap: 1.5em;
}
.PostCard {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 0.75em;
  overflow: hidden;
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
}
.PostCard:hover { transform: scale(1.03); }
.PostCard-thumb {
  aspect-ratio: 16/9;
  background: var(--bg-tertiary);
}
.PostCard-thumb img { width: 100%; height: 100%; object-fit: cover; }
.PostCard-body { padding: 1.5em; flex: 1 1 auto; display: flex; flex-direction: column; }
.PostCard-meta {
  font-size: 0.75em;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.75em;
}
.PostCard-title {
  color: var(--text-primary);
  font-size: 1.1875em;
  font-weight: 700;
  margin: 0 0 0.5em;
  line-height: 1.3;
}
.PostCard-excerpt {
  color: var(--text-secondary);
  font-size: 0.9375em;
  margin: 0 0 1em;
  flex: 1 1 auto;
}
.PostCard-link {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8125em;
}
.Article {
  max-width: 44em;
  margin: 0 auto;
  padding: 3em 0;
}
.Article-meta {
  font-size: 0.8125em;
  color: var(--text-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1em;
}
.Article-title { font-size: 2.75em; line-height: 1.12; margin-bottom: 0.5em; }
.Article-lede  { font-size: 1.1875em; color: var(--text-secondary); margin-bottom: 2em; }
.Article-body p { font-size: 1.0625em; line-height: 1.75; color: var(--text-secondary); margin-bottom: 1.25em; }
.Article-body h2 { font-size: 1.75em; margin-top: 1.5em; color: var(--text-primary); }
.Article-body h3 { font-size: 1.25em; margin-top: 1.25em; color: var(--text-primary); }
.Article-body ul { color: var(--text-secondary); padding-left: 1.25em; margin-bottom: 1.25em; }
.Article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 2em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8125em;
}
.Footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-soft);
  padding: 3.5em 0 2em;
  margin-top: 3em;
}
.Footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5em;
  margin-bottom: 2.5em;
}
.Footer-col h4 {
  font-size: 0.8125em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 1em;
  font-weight: 800;
}
.Footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625em; }
.Footer-col a { color: var(--text-secondary); font-size: 0.9375em; }
.Footer-col a:hover { color: var(--text-primary); }
.Footer-brand p {
  color: var(--text-secondary);
  font-size: 0.9375em;
  margin: 0.5em 0 0;
}
.Footer-tag {
  display: inline-block;
  font-size: 0.75em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.75em;
}
.Footer-company {
  font-size: 0.875em;
  color: var(--text-secondary);
  line-height: 1.7;
}
.Footer-company strong { color: var(--text-primary); font-weight: 700; display: block; margin-bottom: 0.25em; }
.Footer-bottom {
  border-top: 1px solid var(--border-soft);
  padding-top: 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  font-size: 0.8125em;
  color: var(--text-muted);
}
.Footer-bottom a { color: var(--text-muted); }
.Footer-bottom a:hover { color: var(--text-primary); }
.Disclaimer-note {
  font-size: 0.8125em;
  color: var(--text-muted);
  max-width: 42em;
}
.PageHero {
  padding: 3.5em 0 2em;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-soft);
}
.PageHero h1 { font-size: 2.5em; margin: 0 0 0.5em; }
.PageHero p  { color: var(--text-secondary); max-width: 38em; margin: 0; }
.Legal {
  padding: 2.5em 0 4em;
}
.Legal h2 { color: var(--text-primary); margin-top: 1.5em; font-size: 1.5em; }
.Legal h3 { color: var(--text-primary); margin-top: 1.25em; font-size: 1.1875em; }
.Legal p, .Legal li { color: var(--text-secondary); line-height: 1.75; }
.Legal ul { padding-left: 1.25em; }
.Legal-meta { color: var(--text-muted); font-size: 0.875em; margin-bottom: 1.5em; }
.u-textCenter { text-align: center; }
.u-mt-1 { margin-top: 1em; }
.u-mt-2 { margin-top: 2em; }
.u-mb-0 { margin-bottom: 0; }
.u-flex { display: flex; }
.u-flexWrap { flex-wrap: wrap; }
.u-gap-1 { gap: 1em; }
.u-itemsCenter { align-items: center; }
.u-justifyBetween { justify-content: space-between; }
.u-hidden { display: none; }
.u-srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 992px) {
  h1 { font-size: 2.5em; }
  .Hero-title { font-size: 2.5em; }
  .Hero-grid,
  .Split,
  .Contact-grid { grid-template-columns: 1fr; }
  .Hero-image { aspect-ratio: 16/10; order: -1; max-height: 22em; }
  .Footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .Module { padding: 3em 0; }
  .Module-hero { padding: 3em 0 2.5em; }
  h1, .Hero-title { font-size: 2.125em; }
  h2 { font-size: 1.625em; }
  .Page-container { padding: 0 1.25em; }
  .Header-inner { padding: 0.875em 1.25em; }
  .Footer-grid { grid-template-columns: 1fr; gap: 2em; }
  .Footer-bottom { flex-direction: column; align-items: flex-start; }
  .Form { padding: 1.5em; }
  .StickyBar { flex-wrap: wrap; padding: 0.75em 1em; text-align: left; }
}
@media (max-width: 768px) and (hover: none) {
  main { scroll-snap-type: y proximity; }
  .Module { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .Card:hover,
  .Person:hover,
  .PostCard:hover,
  .Btn:hover { transform: none; }
  .StickyBar { transition: none; }
}
:root {
  --cc-bg: #141414;
  --cc-text: #ffffff;
  --cc-text-secondary: #b3b3b3;
  --cc-border: rgba(255, 255, 255, 0.08);
  --cc-primary: #e50914;
  --cc-primary-hover: #f40612;
  --cc-secondary-bg: #1f1f1f;
  --cc-secondary-text: #ffffff;
}