@import url(
  "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap"
);


/* =====================================================
   VARIABLES
===================================================== */

:root {

  --red: #d81722;
  --red-dark: #a90d17;

  --black: #080a0c;
  --dark: #0d1013;
  --dark-light: #13171b;

  --white: #ffffff;
  --cream: #f4f1eb;

  --muted: #a6adb2;

  --line:
    rgba(255,255,255,0.10);

  --max-width:
    1180px;

  --shadow:
    0 30px 80px rgba(0,0,0,0.4);

}


/* =====================================================
   RESET
===================================================== */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: page-exit 180ms ease-in both;
}

::view-transition-new(root) {
  animation: page-enter 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes page-exit {
  to { opacity: 0; }
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}


body {

  margin: 0;

  background:
    var(--black);

  color:
    var(--white);

  font-family:
    "Inter",
    Arial,
    sans-serif;

  line-height:
    1.6;

}


img {

  display: block;

  max-width: 100%;

}


a {

  color: inherit;

  text-decoration: none;

}


button,
input,
textarea,
select {

  font: inherit;

}


/* =====================================================
   GENERAL
===================================================== */

.container {

  width:
    min(
      calc(100% - 40px),
      var(--max-width)
    );

  margin:
    0 auto;

}


h1,
h2,
h3,
h4 {

  margin-top:
    0;

  font-family:
    "Barlow Condensed",
    Arial,
    sans-serif;

  color:
    var(--white);

  line-height:
    0.96;

}


h1 {

  margin-bottom:
    28px;

  font-size:
    clamp(
      4.3rem,
      9vw,
      8.5rem
    );

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    -0.04em;

}


h2 {

  margin-bottom:
    24px;

  font-size:
    clamp(
      2.9rem,
      5vw,
      5rem
    );

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    -0.03em;

}


h3 {

  margin-bottom:
    12px;

  font-size:
    1.9rem;

  font-weight:
    800;

  text-transform:
    uppercase;

}


p {

  margin-top:
    0;

  color:
    var(--muted);

}


.eyebrow {

  margin-bottom:
    14px;

  color:
    var(--red);

  font-size:
    0.76rem;

  font-weight:
    800;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;

}


/* =====================================================
   HEADER
===================================================== */

.site-header {

  position:
    sticky;

  top:
    0;

  z-index:
    1000;

  background:
    rgba(8,10,12,0.93);

  border-bottom:
    1px solid var(--line);

  backdrop-filter:
    blur(18px);

}


.nav {

  min-height:
    88px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  overflow:
    visible;

}


/* REAL LOGO */

.brand {

  display:
    inline-flex;

  align-items:
    center;

  overflow:
    visible;

}


.site-header .brand {

  height:
    0;

}


.brand-logo {

  width:
    300px;

  height:
    180px;

  object-fit:
    contain;

  object-position:
    center;

  position:
    relative;

  z-index:
    2;

  transform:
    translateY(-6px);

}

.feature-logo {
  width: min(100%, 430px);
  height: 255px;
  object-fit: contain;
  object-position: center;
}

@supports not (view-transition-name: root) {
  main {
    animation: page-enter 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}


.nav-links {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.nav-links a {

  padding:
    10px 15px;

  border-radius:
    6px;

  color:
    #aeb4b8;

  font-size:
    0.88rem;

  font-weight:
    700;

  transition:
    0.2s ease;

}


.nav-links a:hover,
.nav-links a.active {

  color:
    var(--white);

  background:
    rgba(255,255,255,0.06);

}


.nav-links .nav-cta {

  margin-left:
    8px;

  padding:
    11px 20px;

  color:
    white;

  background:
    var(--red);

}


.nav-links .nav-cta:hover {

  background:
    var(--red-dark);

}


/* MOBILE BUTTON */

.menu-toggle {

  display:
    none;

  width:
    44px;

  height:
    44px;

  padding:
    8px;

  border:
    0;

  background:
    transparent;

  cursor:
    pointer;

}


.menu-toggle span {

  display:
    block;

  height:
    2px;

  margin:
    6px 0;

  background:
    white;

}


/* =====================================================
   BUTTONS
===================================================== */

.btn {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    14px 22px;

  border:
    1px solid var(--red);

  border-radius:
    7px;

  background:
    var(--red);

  color:
    white;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    0.2s ease;

}


.btn:hover {

  background:
    var(--red-dark);

  border-color:
    var(--red-dark);

  transform:
    translateY(-2px);

}


.btn-outline {

  background:
    transparent;

  border-color:
    rgba(255,255,255,0.3);

}


.btn-outline:hover {

  background:
    rgba(255,255,255,0.08);

  border-color:
    rgba(255,255,255,0.5);

}


.btn-light {

  background:
    white;

  border-color:
    white;

  color:
    #111;

}


.btn-light:hover {

  background:
    #eeeeee;

  border-color:
    #eeeeee;

}


.btn-row {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

}


/* =====================================================
   HERO
===================================================== */

.hero {

  min-height:
    740px;

  display:
    flex;

  align-items:
    center;

  position:
    relative;

  overflow:
    hidden;

  background:

    radial-gradient(
      circle at 78% 35%,
      rgba(216,23,34,0.19),
      transparent 30%
    ),

    linear-gradient(
      90deg,
      #060708 0%,
      #080a0c 55%,
      #101317 100%
    );

}


.hero::before {

  content:
    "";

  position:
    absolute;

  width:
    700px;

  height:
    700px;

  right:
    -250px;

  top:
    40px;

  border:
    2px solid rgba(216,23,34,0.12);

  border-radius:
    50%;

}


.hero::after {

  content:
    "417";

  position:
    absolute;

  right:
    -40px;

  bottom:
    -100px;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    32rem;

  font-weight:
    900;

  line-height:
    1;

  color:
    rgba(255,255,255,0.018);

  pointer-events:
    none;

}


.hero-content {

  position:
    relative;

  z-index:
    2;

  padding:
    100px 0 130px;

}


.hero-location {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  margin-bottom:
    22px;

  color:
    #aeb4b9;

  font-size:
    0.82rem;

  font-weight:
    700;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;

}


.dot {

  width:
    8px;

  height:
    8px;

  background:
    var(--red);

  border-radius:
    100%;

}


.hero h1 {

  max-width:
    850px;

}


.hero h1 span {

  color:
    var(--red);

}


.hero-lead {

  max-width:
    650px;

  margin-bottom:
    34px;

  color:
    #c5cacf;

  font-size:
    1.12rem;

}


/* =====================================================
   TRUST
===================================================== */

.trust-strip {

  background:
    #0c0f12;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

}


.trust-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

}


.trust-item {

  padding:
    30px;

  display:
    flex;

  align-items:
    center;

  gap:
    16px;

}


.trust-item + .trust-item {

  border-left:
    1px solid var(--line);

}


.trust-icon {

  min-width:
    48px;

  width:
    48px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(216,23,34,0.4);

  border-radius:
    50%;

  background:
    rgba(216,23,34,0.1);

  color:
    var(--red);

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-weight:
    900;

}


.trust-item strong {

  display:
    block;

}


.trust-item span {

  display:
    block;

  color:
    #8d9499;

  font-size:
    0.82rem;

}


/* =====================================================
   SECTIONS
===================================================== */

.section {

  padding:
    110px 0;

}


.section-soft {

  background:
    #101316;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

}


.section-light {

  background:
    var(--cream);

  color:
    #151515;

}


.section-light h2,
.section-light h3 {

  color:
    #151515;

}


.section-head {

  margin-bottom:
    45px;

  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    30px;

}


/* =====================================================
   COURSE CARDS
===================================================== */

.course-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    18px;

}


.course-card {

  min-height:
    250px;

  padding:
    30px;

  background:
    #12161a;

  border:
    1px solid var(--line);

  border-radius:
    16px;

  transition:
    0.22s ease;

}


a.course-card:hover {

  background:
    #171c20;

  border-color:
    rgba(216,23,34,0.6);

  transform:
    translateY(-5px);

}


.course-icon {

  width:
    52px;

  height:
    52px;

  margin-bottom:
    42px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(216,23,34,0.4);

  border-radius:
    10px;

  color:
    var(--red);

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-weight:
    900;

}


.course-card p {

  margin-bottom:
    0;

}


/* =====================================================
   SPLIT
===================================================== */

.split {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    70px;

  align-items:
    center;

}


.check-list {

  margin:
    34px 0 0;

  padding:
    0;

  display:
    grid;

  gap:
    15px;

  list-style:
    none;

}


.check-list li {

  position:
    relative;

  padding-left:
    34px;

  color:
    #d2d6d9;

  font-weight:
    600;

}


.check-list li::before {

  content:
    "✓";

  position:
    absolute;

  left:
    0;

  top:
    1px;

  width:
    22px;

  height:
    22px;

  display:
    grid;

  place-items:
    center;

  background:
    var(--red);

  border-radius:
    50%;

  color:
    white;

  font-size:
    0.72rem;

}


/* =====================================================
   HOME VISUAL
===================================================== */

.training-visual {

  min-height:
    500px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    45px;

  position:
    relative;

  overflow:
    hidden;

  border:
    1px solid var(--line);

  border-radius:
    20px;

  background:

    radial-gradient(
      circle at 70% 20%,
      rgba(216,23,34,0.3),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      #171b20,
      #090b0d
    );

  box-shadow:
    var(--shadow);

}


.training-visual::after {

  content:
    "417";

  position:
    absolute;

  right:
    -30px;

  bottom:
    -100px;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    18rem;

  font-weight:
    900;

  color:
    rgba(255,255,255,0.025);

}


.visual-logo-wrap {

  position:
    relative;

  z-index:
    2;

}

.about-logo {
  width: min(100%, 430px);
  height: 300px;
  object-fit: contain;
  object-position: center;
}


.visual-text {

  position:
    relative;

  z-index:
    2;

}


.visual-text span {

  display:
    block;

  margin-bottom:
    12px;

  color:
    var(--red);

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.15em;

  font-size:
    0.74rem;

}


.visual-text strong {

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    3.6rem;

  line-height:
    0.93;

}


/* =====================================================
   TESTIMONIALS
===================================================== */

.testimonials {

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    18px;

}


.quote-card {

  padding:
    30px;

  border:
    1px solid #dfdcd5;

  border-radius:
    16px;

  background:
    white;

}


.stars {

  margin-bottom:
    20px;

  color:
    var(--red);

  letter-spacing:
    3px;

}


.quote-card p {

  color:
    #51565a;

}


.quote-author {

  margin-top:
    25px;

  padding-top:
    20px;

  border-top:
    1px solid #e4e1db;

}


.quote-author strong {

  display:
    block;

  color:
    #111;

}


.quote-author span {

  color:
    #74797d;

  font-size:
    0.85rem;

}


/* =====================================================
   FAQ
===================================================== */

.faq-wrap {

  display:
    grid;

  grid-template-columns:
    0.8fr 1.2fr;

  gap:
    70px;

}


.faq-list {

  border-top:
    1px solid var(--line);

}


.faq-item {

  border-bottom:
    1px solid var(--line);

}


.faq-question {

  width:
    100%;

  padding:
    25px 0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border:
    0;

  background:
    transparent;

  color:
    white;

  text-align:
    left;

  font-weight:
    800;

  cursor:
    pointer;

}


.faq-question b {

  color:
    var(--red);

  font-size:
    1.3rem;

  transition:
    0.2s ease;

}


.faq-answer {

  max-height:
    0;

  overflow:
    hidden;

  transition:
    max-height 0.3s ease;

}


.faq-answer p {

  margin-bottom:
    24px;

}


.faq-item.open .faq-answer {

  max-height:
    250px;

}


.faq-item.open .faq-question b {

  transform:
    rotate(45deg);

}


/* =====================================================
   CTA
===================================================== */

.cta-band {

  padding:
    68px 0;

  background:
    var(--red);

}


.cta-inner {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    40px;

}


.cta-band h2 {

  margin-bottom:
    8px;

  font-size:
    clamp(
      2.8rem,
      5vw,
      4.6rem
    );

}


.cta-band p {

  margin:
    0;

  color:
    rgba(255,255,255,0.82);

}


/* =====================================================
   PAGE HERO
===================================================== */

.page-hero {

  padding:
    115px 0 90px;

  background:

    radial-gradient(
      circle at 82% 15%,
      rgba(216,23,34,0.16),
      transparent 28%
    ),

    #0b0e10;

  border-bottom:
    1px solid var(--line);

}


.page-hero h1 {

  font-size:
    clamp(
      4rem,
      8vw,
      7.5rem
    );

}


.page-hero p {

  max-width:
    720px;

  font-size:
    1.08rem;

}

/* =====================================================
   EVENTS
===================================================== */

.events-hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(216,23,34,0.18), transparent 27%),
    linear-gradient(125deg, #0b0e10 55%, #171316);
}

.event-grid {
  display: grid;
  gap: 14px;
}

.event-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 28px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(110deg, #121619, #0d1013);
  transition: border-color 180ms ease, transform 180ms ease;
}

.event-card:hover {
  border-color: rgba(216,23,34,0.45);
  transform: translateY(-2px);
}

.event-date {
  width: 76px;
  height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 3px solid var(--red);
  background: rgba(255,255,255,0.045);
}

.event-date-month {
  color: #b9c0c4;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.event-date-day {
  color: white;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.25rem;
  line-height: 1;
}

.event-details .eyebrow {
  margin-bottom: 8px;
}

.event-details h3 {
  margin-bottom: 9px;
}

.event-description {
  margin-bottom: 10px;
}

.event-meta {
  margin-bottom: 8px;
  color: #d0d4d7;
  font-size: 0.88rem;
}

.event-details .text-link {
  margin-top: 2px;
}

.events-empty {
  padding: 48px 36px;
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 12px;
  text-align: center;
}

.events-empty h3 {
  margin-bottom: 10px;
}

.events-empty p:last-child {
  margin-bottom: 0;
}

/* =====================================================
   COURSES PAGE
===================================================== */

.course-detail-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:
    20px;

}


.course-detail-card {

  padding:
    35px;

  background:
    #14181c;

  border:
    1px solid var(--line);

  border-radius:
    18px;

}


.course-detail-card .course-icon {

  margin-bottom:
    30px;

}


.text-link {

  display:
    inline-block;

  margin-top:
    15px;

  color:
    var(--red);

  font-weight:
    800;

}


.text-link:hover {

  color:
    #ff4650;

}


.group-card {

  margin-top:
    50px;

  padding:
    45px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    35px;

  border:
    1px solid rgba(216,23,34,0.35);

  border-radius:
    20px;

  background:

    linear-gradient(
      120deg,
      rgba(216,23,34,0.11),
      rgba(255,255,255,0.02)
    );

}


/* =====================================================
   ABOUT
===================================================== */

.story-shell {

  display:
    grid;

  grid-template-columns:
    340px 1fr;

  gap:
    45px;

}


.chapter-tabs {

  display:
    grid;

  align-content:
    start;

  gap:
    10px;

}


.chapter-tab {

  padding:
    17px 18px;

  border:
    1px solid var(--line);

  border-radius:
    12px;

  background:
    #111519;

  color:
    #969da2;

  text-align:
    left;

  cursor:
    pointer;

}


.chapter-tab strong {

  display:
    block;

  margin-bottom:
    2px;

  color:
    white;

}


.chapter-tab.active {

  background:
    rgba(216,23,34,0.09);

  border-color:
    rgba(216,23,34,0.65);

}


.chapter-panel {

  display:
    none;

  min-height:
    340px;

  padding:
    45px;

  background:
    #14181c;

  border:
    1px solid var(--line);

  border-radius:
    20px;

}


.chapter-panel.active {

  display:
    block;

}


.chapter-count {

  color:
    var(--red);

  font-size:
    0.76rem;

  font-weight:
    800;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;

}


.about-logo-area {

  min-height:
    430px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    40px;

  border:
    1px solid var(--line);

  border-radius:
    20px;

  background:

    radial-gradient(
      circle,
      rgba(216,23,34,0.15),
      transparent 50%
    ),

    #0a0d0f;

}


/* =====================================================
   CONTACT
===================================================== */

.contact-layout {

  display:
    grid;

  grid-template-columns:
    0.75fr 1.25fr;

  gap:
    60px;

}


.contact-cards {

  display:
    grid;

  gap:
    14px;

  margin-top:
    30px;

}


.contact-card {

  padding:
    22px;

  border:
    1px solid var(--line);

  border-radius:
    14px;

  background:
    #13171b;

}


.contact-card small {

  display:
    block;

  margin-bottom:
    5px;

  color:
    #80878d;

  font-size:
    0.72rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}


.contact-card a,
.contact-card strong {

  color:
    white;

  font-weight:
    800;

}


.form-card {

  padding:
    38px;

  background:
    var(--cream);

  border-radius:
    20px;

  color:
    #111;

}


.form-card h2 {

  color:
    #111;

}


.form-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:
    18px;

}


.field {

  display:
    grid;

  gap:
    7px;

}


.field.full {

  grid-column:
    1 / -1;

}


.field label {

  font-size:
    0.87rem;

  font-weight:
    800;

}


.field input,
.field select,
.field textarea {

  width:
    100%;

  padding:
    13px 14px;

  border:
    1px solid #d2cec6;

  border-radius:
    8px;

  background:
    white;

  color:
    #111;

  outline:
    none;

}


.field input:focus,
.field select:focus,
.field textarea:focus {

  border-color:
    var(--red);

  box-shadow:
    0 0 0 3px rgba(216,23,34,0.1);

}


.field textarea {

  min-height:
    155px;

  resize:
    vertical;

}


.form-status {

  display:
    none;

  margin-top:
    15px;

  padding:
    13px 15px;

  border-radius:
    8px;

  background:
    #dff4e6;

  color:
    #17642e;

  font-weight:
    700;

}

.form-status.is-error {
  background: #fbe1e2;
  color: #8f161e;
}

.form-note {
  max-width: 600px;
  margin-bottom: 22px;
  font-size: 0.9rem;
}

.form-honeypot {
  display: none !important;
}


/* =====================================================
   FOOTER
===================================================== */

.footer {

  padding:
    70px 0 25px;

  background:
    #080a0c;

  border-top:
    1px solid var(--line);

}


.footer-grid {

  display:
    grid;

  grid-template-columns:
    1.4fr 0.6fr 0.8fr;

  gap:
    60px;

}


.footer-brand {

  margin-bottom:
    20px;

  height:
    0;

}

.footer-logo {
  display: block;
  width: min(100%, 440px);
  height: 290px;
  object-fit: contain;
  object-position: left center;
  position: relative;
  z-index: 2;
  transform: translateY(45px);
}


.footer h4 {

  margin-bottom:
    16px;

  font-size:
    1.2rem;

  text-transform:
    uppercase;

}


.footer p,
.footer a,
.footer span {

  color:
    #92999e;

  font-size:
    0.9rem;

}


.footer a:hover {

  color:
    white;

}


.footer-links {

  display:
    grid;

  gap:
    9px;

}


.footer-bottom {

  margin-top:
    50px;

  padding-top:
    21px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  border-top:
    1px solid var(--line);

}


.footer-tag {

  color:
    white !important;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-weight:
    800;

  letter-spacing:
    0.1em;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {


  .menu-toggle {

    display:
      block;

  }


  .nav-links {

    display:
      none;

    position:
      absolute;

    top:
      82px;

    left:
      20px;

    right:
      20px;

    padding:
      14px;

    flex-direction:
      column;

    align-items:
      stretch;

    background:
      #101316;

    border:
      1px solid var(--line);

    border-radius:
      14px;

    box-shadow:
      var(--shadow);

  }


  .nav-links.open {

    display:
      flex;

  }


  .nav-links a {

    width:
      100%;

  }


  .nav-links .nav-cta {

    margin-left:
      0;

  }


  .hero {

    min-height:
      650px;

  }


  .trust-grid,
  .course-grid,
  .testimonials {

    grid-template-columns:
      1fr;

  }


  .trust-item + .trust-item {

    border-left:
      0;

    border-top:
      1px solid var(--line);

  }


  .split,
  .faq-wrap,
  .story-shell,
  .contact-layout {

    grid-template-columns:
      1fr;

  }


  .course-detail-grid {

    grid-template-columns:
      1fr;

  }


  .group-card,
  .cta-inner {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .footer-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .footer-grid > div:first-child {

    grid-column:
      1 / -1;

  }


  .chapter-tabs {

    grid-template-columns:
      repeat(2,1fr);

  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 620px) {


  .container {

    width:
      min(
        calc(100% - 28px),
        var(--max-width)
      );

  }


  .nav {

    min-height:
      74px;

  }


  .brand-logo {
    width: 228px;
    height: 136px;

  }


  .nav-links {

    top:
      70px;

    left:
      14px;

    right:
      14px;

  }


  .hero {

    min-height:
      620px;

  }


  .hero-content {

    padding:
      80px 0 110px;

  }


  .hero::after {

    font-size:
      20rem;

  }


  h1 {

    font-size:
      clamp(
        3.4rem,
        18vw,
        5.5rem
      );

  }


  .section {

    padding:
      78px 0;

  }


  .section-head {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .training-visual {

    min-height:
      380px;

    padding:
      28px;

  }

  .feature-logo {
    width: min(100%, 320px);
    height: 190px;
  }

  .about-logo {
    height: 220px;
  }

  .footer-logo {
    width: min(100%, 360px);
    height: 238px;
  }


  .visual-text strong {

    font-size:
      2.8rem;

  }


  .chapter-tabs {

    grid-template-columns:
      1fr;

  }


  .chapter-panel {

    padding:
      28px;

  }


  .form-grid {

    grid-template-columns:
      1fr;

  }


  .field.full {

    grid-column:
      auto;

  }


  .form-card {

    padding:
      26px;

  }


  .footer-grid {

    grid-template-columns:
      1fr;

  }


  .footer-grid > div:first-child {

    grid-column:
      auto;

  }


  .footer-bottom {

    flex-direction:
      column;

  }


  .event-card {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 16px;
  }

  .event-date {
    width: 58px;
    height: 72px;
  }

  .events-empty {
    padding: 36px 20px;

  }

}

/* =====================================================
   NEW ABOUT PAGE
===================================================== */

.about-page-hero {
  min-height: 610px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 35%, rgba(216,23,34,0.18), transparent 30%),
    linear-gradient(120deg, #080a0c 0%, #0c1013 60%, #121519 100%);
  border-bottom: 1px solid var(--line);
}

.about-page-hero::after {
  content: "417";
  position: absolute;
  right: -70px;
  bottom: -135px;
  color: rgba(255,255,255,0.018);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 31rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.about-hero-content {
  position: relative;
  z-index: 2;
  padding: 100px 0;
}

.about-page-hero h1 {
  max-width: 900px;
  font-size: 7.7rem;
}

.about-page-hero h1 span {
  color: var(--red);
}

.about-page-hero p:not(.eyebrow) {
  max-width: 680px;
  color: #c5cacf;
  font-size: 1.1rem;
}

.team-heading {
  margin-bottom: 50px;
}

.team-profile {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 75px;
}

.team-photo-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #181b20;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

.team-photo {
  display: block;
  width: 100%;
  aspect-ratio: 0.92 / 1;
  object-fit: cover;
  object-position: center top;
}

.team-photo-placeholder {
  width: 100%;
  aspect-ratio: 0.92 / 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(216,23,34,0.2), transparent 42%),
    linear-gradient(155deg, #191d21, #090b0d 76%);
  color: rgba(255,255,255,0.12);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17rem;
  font-weight: 900;
  line-height: 1;
}

.team-photo-placeholder::after {
  position: absolute;
  right: 9%;
  left: 9%;
  top: 51%;
  height: 3px;
  background: var(--red);
  content: "";
}

.photo-label {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  padding: 15px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: rgba(8,10,12,0.9);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  backdrop-filter: blur(12px);
}

.photo-label span {
  color: #9da3a8;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.photo-label strong {
  color: var(--red);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.team-content h2 {
  margin-bottom: 22px;
}

.team-lead {
  color: #d2d6d9;
  font-size: 1.12rem;
}

.team-lead strong {
  color: white;
}

.credentials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin: 32px 0;
}

.credential-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  background: #111519;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #d7dbde;
  font-size: 0.88rem;
  font-weight: 600;
}

.credential-check {
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: white;
  font-size: 0.69rem;
  font-weight: 900;
}

.facts-section {
  background: #f2efe8;
  color: #111;
}

.facts-section h2 {
  color: #111;
}

.facts-section .eyebrow {
  color: var(--red-dark);
}

.facts-heading {
  display: grid;
  grid-template-columns: 1fr 0.65fr;
  align-items: end;
  gap: 70px;
  margin-bottom: 55px;
}

.facts-heading h2 {
  margin-bottom: 0;
}

.facts-intro {
  color: #555a5d;
  font-size: 1rem;
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  overflow: hidden;
  background: #d7d4ce;
  border: 1px solid #d7d4ce;
  border-radius: 12px;
}

.fact-stat {
  min-height: 315px;
  padding: 30px;
  background: white;
}

.fact-number {
  display: block;
  color: #111;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 5rem;
  font-weight: 900;
  line-height: 0.9;
  white-space: nowrap;
}

.fact-number-small {
  font-size: 4rem;
}

.fact-unit {
  display: block;
  margin-top: 5px;
  color: var(--red);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
}

.fact-line {
  width: 45px;
  height: 4px;
  margin: 28px 0;
  background: var(--red);
}

.fact-stat p {
  color: #5c6063;
  font-size: 0.92rem;
}

.fact-stat p strong {
  color: #222;
}

.story-section {
  position: relative;
  overflow: hidden;
  background: #0c0f12;
}

.story-section::before {
  content: "4/17";
  position: absolute;
  right: -30px;
  top: 180px;
  color: rgba(255,255,255,0.015);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.story-header,
.story-layout {
  position: relative;
  z-index: 2;
}

.story-header {
  margin-bottom: 55px;
}

.story-layout {
  display: grid;
  grid-template-columns: 360px minmax(0,1fr);
  gap: 50px;
}

.story-navigation {
  display: grid;
  align-content: start;
  gap: 8px;
}

.story-tab {
  width: 100%;
  min-width: 0;
  padding: 18px;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  align-items: center;
  gap: 13px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111519;
  color: white;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.story-tab:hover {
  background: #171b1f;
}

.story-tab.active {
  background: rgba(216,23,34,0.1);
  border-color: rgba(216,23,34,0.62);
}

.story-tab:focus-visible,
.story-prev:focus-visible,
.story-next:focus-visible {
  outline: 2px solid #ff5963;
  outline-offset: 3px;
}

.story-number {
  color: var(--red);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
}

.story-tab-copy {
  display: grid;
}

.story-tab-copy strong {
  font-size: 0.92rem;
}

.story-tab-copy small {
  color: #8f969b;
  font-size: 0.75rem;
}

.story-content-area {
  min-width: 0;
}

.story-panel {
  min-height: 510px;
  padding: 50px;
  display: none;
  flex-direction: column;
  position: relative;
  background: linear-gradient(140deg, #15191d, #0f1215);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.story-panel[hidden] {
  display: none !important;
}

.story-panel.active {
  display: flex;
  animation: story-panel-enter 220ms ease-out both;
}

@keyframes story-panel-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.chapter-label {
  color: var(--red);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.story-panel h3 {
  max-width: 680px;
  margin: 25px 0 28px;
  font-size: 4rem;
}

.story-panel p {
  max-width: 730px;
  color: #abb2b7;
  font-size: 1.02rem;
}

.story-ending {
  color: white !important;
  font-weight: 800;
}

.story-controls {
  margin-top: auto;
  padding-top: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.story-prev,
.story-next {
  padding: 0;
  border: 0;
  background: transparent;
  color: #b7bdc1;
  font-weight: 700;
  cursor: pointer;
  transition: color 180ms ease;
}

.story-next {
  color: var(--red);
}

.story-prev:hover,
.story-next:hover {
  color: white;
}

.cta-small {
  margin-bottom: 8px !important;
  color: rgba(255,255,255,0.68) !important;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* Shared finishing touches */
h1,
h2 {
  letter-spacing: 0;
}

.page-hero {
  padding: 82px 0 64px;
}

.page-hero h1 {
  font-size: 6.8rem;
}

.course-card,
.course-detail-card,
.quote-card,
.contact-card,
.form-card,
.group-card {
  border-radius: 10px;
}

.course-detail-card,
.contact-card,
.quote-card {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.course-detail-card:hover,
.contact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(216,23,34,.42);
  box-shadow: 0 14px 32px rgba(0,0,0,.2);
}

.quote-card:hover {
  transform: translateY(-3px);
  border-color: #c9c4bb;
  box-shadow: 0 14px 32px rgba(0,0,0,.1);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #ff5963;
  outline-offset: 3px;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 520ms ease var(--reveal-delay, 0ms),
    transform 520ms cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes nav-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.nav-links.open {
  animation: nav-drop-in 180ms ease-out both;
}

@media (max-width: 900px) {
  .page-hero h1 {
    font-size: 5rem;
  }
}

@media (max-width: 620px) {
  .container:not(.nav) {
    width: min(calc(100% - 32px), var(--max-width));
  }

  .section {
    padding: 82px 0;
  }

  .page-hero {
    padding: 68px 0 52px;
  }

  .page-hero h1 {
    font-size: 3.5rem;
  }

}

@media (max-width: 950px) {
  .about-page-hero h1 { font-size: 5.5rem; }
  .team-profile { grid-template-columns: 1fr; }
  .team-photo-wrap { max-width: 620px; }
  .facts-heading { grid-template-columns: 1fr; gap: 15px; }
  .facts-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .story-layout { grid-template-columns: 1fr; }
  .story-navigation { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .about-page-hero { min-height: 520px; }
  .about-hero-content { padding: 64px 0; }
  .about-page-hero::after { right: -50px; bottom: -70px; font-size: 18rem; }
  .about-page-hero h1 { font-size: 2.6rem; }
  .team-profile { gap: 40px; }
  .team-photo-placeholder { font-size: 13rem; }
  .credentials { grid-template-columns: 1fr; }
  .facts-grid { grid-template-columns: 1fr; }
  .fact-stat { min-height: 250px; }
  .fact-number { font-size: 4.2rem; }
  .fact-number-small { font-size: 3.4rem; }
  .story-navigation { grid-template-columns: 1fr; }
  .story-panel { min-height: 480px; padding: 28px; }
  .story-panel h3 { font-size: 2.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}