/* ============================================================
       CSS VARIABLES
    ============================================================ */
    :root {
      --color-bg:           #0e0c09;
      --color-bg-alt:       #131109;
      --color-bg-card:      #1c1912;
      --color-bg-hero-r:    #19160d;
      --color-gold:         #c8912a;
      --color-gold-dim:     rgba(200, 145, 42, 0.25);
      --color-text:         #f0ebe3;
      --color-text-body:    #a89878;
      --color-text-muted:   #5e5444;
      --color-border:       #242017;
      --color-border-dashed:#3a3020;

      --font-display:  'Playfair Display', Georgia, serif;
      --font-body:     'EB Garamond', Georgia, serif;
      --font-mono:     'Space Mono', 'Courier New', monospace;

      --max-width: 1140px;
      --gutter: 1.25rem;
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 17px; scroll-behavior: smooth; }

    body {
      background-color: var(--color-bg);
      color: var(--color-text);
      font-family: var(--font-body);
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }

    img { display: block; max-width: 100%; height: auto; }
    ul  { list-style: none; }
    a   { color: inherit; text-decoration: none; }

    /* ============================================================
       LAYOUT HELPERS — Client-First
    ============================================================ */
    .page-wrapper  { overflow-x: hidden; }
    .main-wrapper  { width: 100%; }

    .container-large {
      width: 100%;
      max-width: var(--max-width);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--gutter);
      padding-right: var(--gutter);
    }

    .flex         { display: flex; }
    .flex-center  { display: flex; align-items: center; justify-content: center; }
    .text-align-center { text-align: center; }


    /* ============================================================
       NAV
    ============================================================ */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background-color: rgba(14, 12, 9, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--color-border);
    }

    .nav__inner {
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--gutter);
      height: 3.75rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
    }

    .nav__logo {
      font-family: var(--font-display);
      font-size: 1rem;
      font-style: italic;
      color: var(--color-gold);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .nav__toggle {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 2rem;
      height: 2rem;
      cursor: pointer;
      flex-shrink: 0;
    }

    .nav__toggle span {
      display: block;
      width: 100%;
      height: 1px;
      background-color: var(--color-gold);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    #nav-open { display: none; }

    /* dropdown mobile */
    .nav__links {
      display: none;
      flex-direction: column;
      background-color: rgba(14, 12, 9, 0.97);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--color-border);
      padding: 0.5rem 0 1rem;
    }

    #nav-open:checked ~ .nav__links {
      display: flex;
    }

    /* hamburger → X */
    #nav-open:checked ~ .nav__inner .nav__toggle span:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }
    #nav-open:checked ~ .nav__inner .nav__toggle span:nth-child(2) {
      opacity: 0;
    }
    #nav-open:checked ~ .nav__inner .nav__toggle span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }

    .nav__link {
      font-family: var(--font-mono);
      font-size: 0.5625rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--color-text-body);
      padding: 0.875rem var(--gutter);
      display: block;
      transition: color 0.2s ease;
      border-bottom: 1px solid var(--color-border);
    }
    .nav__link:last-child { border-bottom: none; }
    .nav__link:hover { color: var(--color-gold); cursor: pointer;}
    .nav__link.is-active { color: var(--color-gold); }

    @media (min-width: 768px) {
      .nav__toggle  { display: none; }
      #nav-open     { display: none; }

      .nav__links {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: absolute;
        top: 0;
        right: var(--gutter);
        height: 3.75rem;
        background: none;
        backdrop-filter: none;
        border: none;
        padding: 0;
        gap: 0;
      }

      .nav__link {
        padding: 0.5rem 0.875rem;
        border-bottom: none;
        position: relative;
      }

      .nav__link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0.875rem;
        right: 0.875rem;
        height: 1px;
        background-color: var(--color-gold);
        transform: scaleX(0);
        transition: transform 0.25s ease;
      }
      .nav__link:hover::after { transform: scaleX(1); }
      .nav__link.is-active::after { transform: scaleX(1); }
    }

    /* ============================================================
       SPACING UTILITIES
    ============================================================ */
    .padding-section-large  { padding-top: 5rem;   padding-bottom: 5rem; }
    .padding-section-medium { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .margin-bottom-large    { margin-bottom: 4rem; }
    .margin-bottom-medium   { margin-bottom: 2rem; }
    .margin-bottom-small    { margin-bottom: 1rem; }

    /* ============================================================
       SHARED TYPOGRAPHY
    ============================================================ */
    .text-label {
      font-family: var(--font-mono);
      font-size: 0.625rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-gold);
    }

    .section-heading {
      display: flex;
      align-items: center;
      gap: 0.875rem;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.875rem, 4vw, 2.75rem);
      color: var(--color-text);
      line-height: 1.1;
    }

    .section-heading__number {
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      color: var(--color-gold);
      font-weight: 400;
      letter-spacing: 0.05em;
      margin-top: 0.15em;
    }

    .section-heading__line {
      display: block;
      width: 60px;
      height: 1px;
      background-color: var(--color-border-dashed);
      margin-left: 0.25rem;
      flex-shrink: 0;
    }

    /* ============================================================
       BUTTON
    ============================================================ */
    .btn {
      display: inline-block;
      padding: 0.875rem 1.75rem;
      font-family: var(--font-mono);
      font-size: 0.8rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--color-text);
      border: 1px solid var(--color-gold);
      background: transparent;
      cursor: pointer;
      transition: background 0.25s ease, color 0.25s ease;
    }
    .btn:hover { background: var(--color-gold); color: var(--color-bg); cursor: pointer; }

    /* ============================================================
       SECTION_HERO
    ============================================================ */
    .section_hero {
      position: relative;
      min-height: 110vh;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* 2x2 photo grid stretches to fill the entire hero */
    .hero_bg {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 5px;
      width: 100%;
      height: 100%;
    }

    .hero_bg__img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      min-height: 0;
      min-width: 0;
    }

    /* dark overlay so text stays readable */
    .hero_overlay {
      position: absolute;
      inset: 0;
      background: rgba(8, 6, 3, 0.75);
      z-index: 1;
    }

    /* text content floats above everything */
    .hero_main {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
      padding: 8rem var(--gutter) 5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .hero_label { margin-bottom: 1.5rem; }

    .hero_name {
      margin-bottom: 1.75rem;
      line-height: 1.0;
    }
    .hero_name-first {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(3.5rem, 10vw, 6.5rem);
      font-weight: 800;
      color: var(--color-text);
      line-height: 1.0;
    }
    .hero_name-last {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(3.5rem, 10vw, 6.5rem);
      font-weight: 700;
      font-style: italic;
      color: var(--color-gold);
      line-height: 1.0;
    }

    .hero_tagline {
      font-family: var(--font-body);
      font-size: 1.0625rem;
      font-style: italic;
      color: var(--color-text-body);
      line-height: 1.7;
      margin-bottom: 2.5rem;
      max-width: 420px;
    }

    .hero_cta { margin-bottom: 2.75rem; }

    .hero_phone {
      display: flex;
      align-items: center;
      gap: 0.875rem;
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      color: var(--color-gold);
      letter-spacing: 0.05em;
    }
    .hero_phone::before {
      content: '';
      display: block;
      width: 1.75rem;
      height: 1px;
      background-color: var(--color-gold);
      flex-shrink: 0;
    }

    /* ============================================================
       SECTION_ABOUT
    ============================================================ */
    .section_about {
      background-color: var(--color-bg-alt);
    }

    .about_heading { margin-bottom: 3.5rem; }

    .about_grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
    }

    .about_photo {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      display: block;
    }

    .about_body p {
      font-family: var(--font-body);
      font-size: 1rem;
      font-style: italic;
      color: var(--color-text-body);
      line-height: 1.85;
      margin-bottom: 1.25rem;
    }
    .about_body p:last-of-type { margin-bottom: 0; }

    .about_cta { margin-top: 2.25rem; }

    @media (min-width: 768px) {
      .about_grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 5.5rem;
      }
    }

    /* ============================================================
       SECTION_EXPERIENCE
    ============================================================ */
    .section_experience {
      background-color: var(--color-bg);
    }

    .experience_heading { margin-bottom: 3.5rem; }

    .experience_item {
      padding: 3.5rem 2rem;
      border-bottom: 1px solid var(--color-border);
      transition: background-color 0.25s ease;
    }
    .experience_item:last-child { border-bottom: none; }
    .experience_item:hover { background-color: #1a1710; cursor: pointer; }

    .experience_year {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      color: var(--color-gold);
      letter-spacing: 0.1em;
      margin-bottom: 0.25rem;
    }
    .experience_location {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.5625rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: 0.875rem;
    }
    .experience_title {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 0.375rem;
      line-height: 1.1;
    }
    .experience_company {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-gold);
    }

    .experience_duties {
      margin-top: 1.75rem;
    }
    .experience_duties li {
      display: flex;
      align-items: flex-start;
      gap: 0.875rem;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-style: italic;
      color: var(--color-text-body);
      line-height: 1.65;
      margin-bottom: 0.625rem;
    }
    .experience_duties li::before {
      content: '—';
      color: var(--color-gold);
      flex-shrink: 0;
      margin-top: 0.05em;
      font-style: normal;
    }

    @media (min-width: 768px) {
      .experience_item {
        display: grid;
        grid-template-columns: 155px 1fr;
        gap: 4rem;
        align-items: start;
      }
    }

    /* ============================================================
       SECTION_TRAINING
    ============================================================ */
    .section_training {
      background-color: var(--color-bg-alt);
    }

    .training_heading { margin-bottom: 3.5rem; }

    /* grid-3 — mobile-first: 1 column, desktop: 3 columns */
    .grid-3 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1px;
      background-color: var(--color-border);
      grid-auto-rows: 1fr;
    }

    @media (min-width: 768px) {
      .grid-3 {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .training_card {
      background-color: var(--color-bg-card);
      padding: 2.25rem 2rem;
      transition: background-color 0.25s ease;
    }
    .training_card:hover { background-color: #262110; cursor: pointer; }

    .training_card__label {
      font-family: var(--font-mono);
      font-size: 0.5625rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: 0.875rem;
    }

    .training_card__title {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--color-text);
      line-height: 1.25;
      margin-bottom: 0.5rem;
    }

    .training_card__subtitle {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-style: italic;
      color: var(--color-text-body);
      margin-bottom: 0.875rem;
    }

    .training_card__link {
      font-family: var(--font-mono);
      font-size: 0.625rem;
      color: var(--color-gold);
      letter-spacing: 0.05em;
    }
    .training_card__link::before { content: '↗ '; }

    /* WIP card */
    .training_card--wip {
      background-color: transparent;
      border: 1px dashed var(--color-border-dashed);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2.5rem 1.5rem;
    }

    .training_card--wip .training_card__wip-text {
      font-family: var(--font-mono);
      font-size: 0.5625rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-gold);
      line-height: 2;
    }

    /* ============================================================
       SECTION_COMPETITIONS
    ============================================================ */
    .section_competitions {
      background-color: var(--color-bg);
    }

    .competitions_heading { margin-bottom: 3.5rem; }

    .competition_card {
      background-color: var(--color-bg-card);
      padding: 2.75rem 2.5rem;
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
      transition: background-color 0.25s ease;
    }
    .competition_card:hover { background-color: #262110; cursor: pointer; }

    .competition_meta {
      font-family: var(--font-mono);
      font-size: 0.5625rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: 1rem;
    }

    .competition_title {
      font-family: var(--font-display);
      font-size: clamp(1.375rem, 3.5vw, 2rem);
      font-weight: 700;
      color: var(--color-text);
      line-height: 1.25;
      margin-bottom: 1.25rem;
    }

    .competition_desc {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-style: italic;
      color: var(--color-text-body);
      line-height: 1.8;
      margin-bottom: 1.375rem;
    }

    .competition_link {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.625rem;
      color: var(--color-gold);
      letter-spacing: 0.1em;
    }
    .competition_link::before { content: '↗ '; }

    .competition_badge {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1.5px solid var(--color-gold);
      align-self: flex-start;
      flex-shrink: 0;
    }

    .competition_badge__number {
      font-family: var(--font-display);
      font-size: 2.75rem;
      font-weight: 700;
      font-style: italic;
      color: var(--color-gold);
      line-height: 1;
    }

    .competition_badge__label {
      font-family: var(--font-mono);
      font-size: 0.5rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-top: 0.125rem;
    }

    @media (min-width: 768px) {
      .competition_card {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 4rem;
      }

      .competition_card__body { flex: 1; }

      .competition_badge {
        align-self: center;
        flex-shrink: 0;
      }
    }

    /* ============================================================
       SECTION_REFERENCES
    ============================================================ */
    .section_references {
      background-color: var(--color-bg-alt);
    }

    .references_heading {
      margin-bottom: 3.5rem;
    }

    .reference_card {
      position: relative;
      overflow: hidden;
      display: flex;
      background-color: var(--color-bg-card);
      flex-direction: column;
      justify-content: flex-end;
      transition: all 0.3s ease;
    }
    
    .reference_card:hover {
      background-color: #262110;
      cursor: pointer;
    }

    .reference_card__content {
      position: relative;
      z-index: 1;
      padding: 3rem 2.5rem 2.75rem;
    }

    .reference_quotemark {
      font-family: var(--font-display);
      font-size: 5rem;
      color: var(--color-gold);
      line-height: 0.6;
      margin-bottom: 1.75rem;
      display: block;
    }

    .reference_text {
      font-family: var(--font-body);
      font-size: 1rem;
      font-style: italic;
      color: var(--color-text-body);
      line-height: 1.9;
      margin-bottom: 2.75rem;
      max-width: 600px;
    }

    .reference_footer {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    .reference_author__name {
      font-family: var(--font-display);
      font-size: 1.375rem;
      font-weight: 700;
      color: var(--color-text);
      line-height: 1.2;
    }

    .reference_author__role {
      font-family: var(--font-mono);
      font-size: 0.5625rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-top: 0.375rem;
    }

    .reference_meta {
      text-align: right;
    }

    .reference_meta__bar {
      font-family: var(--font-mono);
      font-size: 0.625rem;
      color: var(--color-gold);
      letter-spacing: 0.1em;
      margin-bottom: 0.375rem;
    }

    .reference_meta__date {
      font-family: var(--font-mono);
      font-size: 0.625rem;
      color: var(--color-text-muted);
      letter-spacing: 0.08em;
      margin-bottom: 0.75rem;
    }

    .reference_meta__link {
      font-family: var(--font-mono);
      font-size: 0.625rem;
      color: var(--color-gold);
      display: block;
    }
    .reference_meta__link::before { content: '↗ '; }

    /* ============================================================
       SECTION_FOOTER
    ============================================================ */
    .section_footer {
      background-color: #000;
      padding: 2.75rem var(--gutter);
    }

    .footer_inner {
      max-width: var(--max-width);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.875rem;
      text-align: center;
    }

    .footer_name {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-style: italic;
      color: var(--color-gold);
    }

    .footer_phone {
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      color: var(--color-text-muted);
      letter-spacing: 0.12em;
    }

    .footer_copy {
      font-family: var(--font-mono);
      font-size: 0.5625rem;
      color: var(--color-text-muted);
      letter-spacing: 0.12em;
    }

    @media (min-width: 768px) {
      .footer_inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
      }
    }

    /* ============================================================
       RESPONSIVE TWEAKS — MOBILE
    ============================================================ */
    @media (max-width: 767px) {
      .hero_right { display: none; }

      .padding-section-large {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
      }

      .competition_badge {
        width: 88px;
        height: 88px;
      }

      .reference_card__content {
        padding: 2.25rem 1.5rem 2.25rem;
      }

      .reference_footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
      }

      .reference_meta { text-align: left; }
    }