/* =====================================================
   AN EXTRAORDINARY MIND — Main Stylesheet
   Built from AEM Brand Style Guide v1.0
   Fonts:   Rajdhani (display) · Lora (body) · DM Mono (labels)
   Colors:  Midnight #0D1117 · Circuit Blue #1568B8
            Champagne #C9A55A · Ivory #F5F3EE
   Spacing: 8pt grid
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* — Brand palette — */
  --midnight:          #0D1117;
  --onyx:              #111318;
  --graphite:          #2D3142;
  --circuit-blue:      #1568B8;
  --circuit-blue-lt:   #2882D8;
  --circuit-blue-deep: #0E4F8A;
  --champagne:         #C9A55A;
  --champagne-lt:      #E2C98B;
  --champagne-dark:    #3D2A06;
  --steel:             #D0D5DD;
  --silver:            #8A9099;
  --ivory:             #F5F3EE;
  --white:             #FFFFFF;
  --danger:            #C04040;

  /* — Typography — */
  --font-display: 'Rajdhani', 'Arial Narrow', sans-serif;
  --font-body:    'Lora', Georgia, serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* — Layout — */
  --max-width: 1200px;
  --ease: cubic-bezier(.25,.46,.45,.94);
}

/* ─── BASE ─────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--graphite);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 48px;
}

/* ─── TYPOGRAPHY HELPERS ────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--circuit-blue-lt);
  margin-bottom: 16px;
  display: block;
}
.eyebrow--gold  { color: var(--champagne-dark); }
.eyebrow--light { color: var(--champagne-lt); }

.h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--onyx);
  margin-bottom: 32px;
}
.h2--light { color: var(--white); }
.h2 em, .h2--light em { font-style: italic; color: var(--champagne-lt); }

.accent-blue { color: var(--circuit-blue); }

.lead-body {
  font-size: 19px;
  line-height: 1.75;
  color: var(--graphite);
  margin-bottom: 20px;
}
.body-text {
  font-size: 17px;
  line-height: 1.8;
  color: var(--graphite);
  margin-bottom: 20px;
}

/* ─── BUTTONS ────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background: var(--circuit-blue);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 2px solid var(--circuit-blue);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s, transform .15s;
}
.btn-primary:hover {
  background: var(--circuit-blue-lt);
  border-color: var(--circuit-blue-lt);
  transform: translateY(-1px);
}
.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--champagne-lt);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid rgba(201,165,90,.4);
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover {
  border-color: var(--champagne-lt);
  color: var(--white);
}
.btn-secondary {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--circuit-blue);
  border-bottom: 1px solid var(--circuit-blue);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.btn-secondary:hover {
  color: var(--circuit-blue-lt);
  border-color: var(--circuit-blue-lt);
}

/* ─── BRACKET MARK (L-corner motif) ─────────────────── */
.bracket-mark {
  display: block;
  width: 24px;
  height: 24px;
  border-left: 2px solid var(--champagne);
  border-top: 2px solid var(--champagne);
  margin-bottom: 16px;
}

/* ─── NAV ────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 48px;
  background: rgba(13,17,23,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(21,104,184,.18);
}
/* ─── LOGO USAGE RULE ────────────────────────────────
   logo.png          = light backgrounds (ivory, white)
   logo-reversed.png = dark backgrounds (midnight, onyx,
                       graphite, circuit-blue)
   Nav and footer always use logo-reversed.png
   ─────────────────────────────────────────────────── */

.nav-logo-img {
  height: 72px;
  width: auto;
}
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav-links a {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(208,213,221,.7);
  transition: color .2s;
}
.nav-links a:hover { color: var(--white); }
.nav-cta {
  border: 1px solid var(--circuit-blue) !important;
  color: var(--circuit-blue) !important;
  padding: 8px 20px;
  transition: background .2s, color .2s !important;
}
.nav-cta:hover {
  background: var(--circuit-blue) !important;
  color: var(--white) !important;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: transform .2s, opacity .2s;
}

/* ─── HERO ────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  background: var(--midnight);
  display: flex;
  align-items: center;
  padding: 120px 48px 100px;
  position: relative;
  overflow: hidden;
}

/* Circuit grid overlay — from brand guide */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(21,104,184,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,104,184,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.hero-glow {
  position: absolute;
  top: -150px; right: -150px;
  width: 700px; height: 700px;
  background: radial-gradient(ellipse, rgba(21,104,184,.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  animation: fadeUp .9s var(--ease) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Hero bracket wrap */
.hero-bracket-wrap {
  border-left: 2px solid var(--champagne);
  padding-left: 32px;
  margin: 24px 0 28px;
}

.hero-headline {
  font-family: var(--font-body);
  font-size: clamp(36px, 5.5vw, 68px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--white);
  letter-spacing: -.01em;
  font-style: italic;
}
.hero-headline em {
  color: var(--champagne-lt);
}
.hero-attribution {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--silver);
  margin-bottom: 28px;
}
.hero-sub {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  color: rgba(208,213,221,.72);
  max-width: 640px;
  margin-bottom: 40px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-bottom-rule {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--circuit-blue), transparent);
  opacity: .4;
}

/* ─── METRICS ──────────────────────────────────────── */
.metrics {
  background: var(--onyx);
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  border-top: 2px solid var(--circuit-blue);
  border-bottom: 1px solid rgba(21,104,184,.2);
}
.metric {
  flex: 1;
  min-width: 220px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.metric-num {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 600;
  color: var(--champagne-lt);
  letter-spacing: -.01em;
  display: block;
}
.metric-label {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--silver);
  letter-spacing: .03em;
  display: block;
}
.metric-divider {
  width: 1px;
  background: rgba(21,104,184,.18);
  align-self: stretch;
}

/* ─── WHAT CHANGES ──────────────────────────────────── */
.what {
  padding: 96px 0;
  background: var(--ivory);
}
.what-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Pull quote */
.pull-quote {
  border-left: 2px solid var(--circuit-blue);
  padding-left: 24px;
  margin-top: 40px;
  font-family: var(--font-body);
  font-size: 18px;
  font-style: italic;
  line-height: 1.65;
  color: var(--graphite);
}
.pull-quote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--silver);
}

/* Principle cards */
.principle-card {
  display: flex;
  gap: 20px;
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid var(--steel);
  border-top: 2px solid var(--circuit-blue);
  margin-bottom: 16px;
  transition: border-top-color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.principle-card:hover {
  box-shadow: 0 8px 32px rgba(13,17,23,.1);
  border-top-color: var(--circuit-blue-lt);
  transform: translateY(-3px);
}
.principle-card:last-child { margin-bottom: 0; }
.p-num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  color: rgba(21,104,184,.18);
  line-height: 1;
  flex-shrink: 0;
  min-width: 40px;
}
.principle-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--onyx);
  margin-bottom: 8px;
}
.principle-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--silver);
}

/* ─── SERVICES ──────────────────────────────────────── */
.services {
  padding: 96px 0;
  background: var(--midnight);
  position: relative;
}
.services .hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.services .container { position: relative; z-index: 1; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(21,104,184,.18);
  border: 1px solid rgba(21,104,184,.18);
  margin-top: 48px;
}
.service-card {
  background: var(--midnight);
  padding: 40px 32px;
  border-top: 2px solid transparent;
  transition: background .25s var(--ease), border-top-color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.service-card:hover {
  background: var(--onyx);
  border-top-color: var(--champagne);
  box-shadow: 0 8px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(201,165,90,.15);
  transform: translateY(-3px);
}
.service-card--featured {
  background: var(--onyx);
  border-top: 2px solid transparent;
}
.service-card--featured:hover {
  border-top-color: var(--circuit-blue-lt);
  box-shadow: 0 8px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(40,130,216,.2);
  transform: translateY(-3px);
}
.s-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  color: rgba(21,104,184,.18);
  line-height: 1;
  display: block;
  margin-bottom: 16px;
}
.service-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: .02em;
  margin-bottom: 16px;
  line-height: 1.2;
}
.service-card p {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(208,213,221,.6);
  margin-bottom: 16px;
}
.s-tags {
  list-style: none;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.s-tags li {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--champagne);
  padding-left: 14px;
  position: relative;
}
.s-tags li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: rgba(201,165,90,.4);
}

/* ─── STORY ─────────────────────────────────────────── */
.story {
  padding: 96px 0;
  background: var(--white);
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

/* L-bracket frame around the stat */
.story-frame {
  padding: 40px;
  border: 1px solid var(--steel);
  border-top: 2px solid var(--champagne);
  text-align: center;
  position: relative;
}
.story-frame::before {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 24px; height: 24px;
  border-right: 2px solid var(--champagne);
  border-bottom: 2px solid var(--champagne);
}
.story-numbers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
}
.s-big {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  color: var(--onyx);
  line-height: 1;
}
.s-big--blue { color: var(--circuit-blue); }
.s-arrow {
  font-size: 28px;
  color: var(--champagne);
}
.s-note {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--silver);
  line-height: 1.65;
}

.story-text-col p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--graphite);
  margin-bottom: 20px;
}
.story-quote {
  border-left: 2px solid var(--champagne);
  padding-left: 24px;
  margin: 32px 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-style: italic;
  line-height: 1.65;
  color: var(--graphite);
}
.story-quote .bracket-mark { margin-bottom: 12px; }
.story-quote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--silver);
}

/* ─── TESTIMONIAL BAND ──────────────────────────────── */
.band {
  padding: 64px 0;
  background: var(--graphite);
  border-top: 1px solid rgba(21,104,184,.25);
  border-bottom: 1px solid rgba(21,104,184,.25);
}
.band-quote {
  font-family: var(--font-body);
  font-size: clamp(20px, 2.5vw, 28px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ivory);
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

/* ─── IDEAL CLIENT ──────────────────────────────────── */
.ideal {
  padding: 96px 0;
  background: var(--ivory);
}
.ideal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 48px;
  margin-bottom: 48px;
}
.ideal-item h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--onyx);
  margin: 12px 0 8px;
  letter-spacing: .02em;
}
.ideal-item p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--silver);
}
.ideal-rule {
  height: 2px;
  width: 40px;
  background: var(--circuit-blue);
  margin-bottom: 16px;
}
.ideal-coda {
  font-family: var(--font-body);
  font-size: 16px;
  font-style: italic;
  color: var(--silver);
  max-width: 640px;
  padding-top: 32px;
  border-top: 1px solid var(--steel);
}

/* ─── CONTACT ───────────────────────────────────────── */
.contact {
  padding: 96px 0;
  background: var(--midnight);
  position: relative;
  overflow: hidden;
}
.contact .hero-grid { position: absolute; inset: 0; pointer-events: none; }
.contact .container { position: relative; z-index: 1; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: rgba(208,213,221,.65);
  margin-bottom: 40px;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-phone {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--champagne-lt);
  letter-spacing: .03em;
  transition: color .2s;
}
.contact-phone:hover { color: var(--white); }
.contact-email {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .07em;
  color: var(--circuit-blue-lt);
  transition: color .2s;
}
.contact-email:hover { color: var(--white); }

/* Form */
.cform { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--silver);
}
.form-group input,
.form-group textarea {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(208,213,221,.2);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 16px;
  outline: none;
  transition: border-color .2s, background .2s;
  resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(138,144,153,.5);
  font-style: italic;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--circuit-blue);
  background: rgba(21,104,184,.06);
}
.cform .btn-primary { align-self: flex-start; }

/* ─── FOOTER ────────────────────────────────────────── */
.footer {
  background: var(--onyx);
  padding: 48px 0;
  border-top: 1px solid rgba(21,104,184,.2);
}
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.footer-logo { height: 56px; width: auto; }
.footer-nav {
  display: flex;
  gap: 32px;
  justify-content: center;
}
.footer-nav a {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--silver);
  transition: color .2s;
}
.footer-nav a:hover { color: var(--white); }
.footer-legal {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: rgba(138,144,153,.6);
  text-align: right;
}

/* ─── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .nav { padding: 16px 32px; }
  .hero { padding: 100px 32px 64px; }
  .what-grid, .story-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .services-grid { grid-template-columns: 1fr; }
  .ideal-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .footer-nav { flex-wrap: wrap; }
  .footer-legal { text-align: center; }
  .footer-logo { margin: 0 auto; }
}

@media (max-width: 768px) {
  .container { padding: 0 24px; }
  .nav { padding: 14px 24px; }
  .hero { padding: 90px 24px 56px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px; left: 0; right: 0;
    background: var(--midnight);
    padding: 32px 24px;
    border-bottom: 1px solid rgba(21,104,184,.2);
    gap: 24px;
    z-index: 199;
  }
  .metrics { flex-direction: column; }
  .metric-divider { width: 100%; height: 1px; }
  .ideal-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ─── FIRST CONVERSATION SECTION (homepage) ────────── */
.first-conv {
  padding: 96px 0;
  background: var(--white);
}
.fc-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 80px;
  align-items: start;
}
.fc-main .btn-secondary {
  margin-top: 24px;
  display: inline-block;
}
.fc-aside {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.fc-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--steel);
  transition: padding-left .2s var(--ease);
}
.fc-card:first-child { border-top: 1px solid var(--steel); }
.fc-card:hover { padding-left: 8px; }
.fc-card-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--circuit-blue);
  opacity: .4;
  flex-shrink: 0;
  min-width: 28px;
  line-height: 1.5;
  transition: opacity .2s;
}
.fc-card:hover .fc-card-num { opacity: .9; }
.fc-card p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--graphite);
  margin: 0;
}
@media (max-width: 1024px) {
  .fc-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ─── FORM TOGGLE ────────────────────────────────────── */
.form-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border: 1px solid rgba(208,213,221,.2);
}
.ftoggle-btn {
  flex: 1;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--silver);
  background: transparent;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .2s, color .2s;
  text-align: center;
}
.ftoggle-btn:first-child {
  border-right: 1px solid rgba(208,213,221,.2);
}
.ftoggle-btn:hover {
  color: var(--white);
  background: rgba(255,255,255,.05);
}
.ftoggle-btn--active {
  background: var(--circuit-blue);
  color: var(--white);
}
.ftoggle-btn--active:hover {
  background: var(--circuit-blue-lt);
}
.form-toggle-note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--silver);
  margin-bottom: 20px;
  font-style: italic;
  transition: opacity .2s;
}
.form-toggle-note--hidden {
  display: none;
}

/* ─── EXTENDED FIELDS ────────────────────────────────── */
.form-extended {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.25,.46,.45,.94);
}
.form-extended--open {
  max-height: 600px;
}
.form-extended-rule {
  height: 1px;
  background: rgba(208,213,221,.15);
  margin: 16px 0;
}
.form-group select {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(208,213,221,.2);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 16px;
  outline: none;
  width: 100%;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A9099' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}
.form-group select:focus {
  border-color: var(--circuit-blue);
  background-color: rgba(21,104,184,.06);
}
.form-group select option {
  background: var(--midnight);
  color: var(--white);
}

/* ─── ORG CHART UPLOAD ───────────────────────────────── */
.form-group--upload { margin-top: 8px; }

.label-optional {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--silver);
  font-style: italic;
  margin-left: 6px;
}
.upload-note {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--silver);
  margin-bottom: 12px;
  font-style: italic;
}
.upload-zone {
  position: relative;
  border: 1px dashed rgba(208,213,221,.3);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.upload-zone:hover,
.upload-zone--over {
  border-color: var(--circuit-blue);
  background: rgba(21,104,184,.06);
}
.upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}
.upload-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.upload-icon {
  font-size: 28px;
  color: var(--circuit-blue);
  opacity: .5;
  line-height: 1;
}
.upload-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: rgba(208,213,221,.7);
  letter-spacing: .04em;
}
.upload-browse {
  color: var(--circuit-blue-lt);
  border-bottom: 1px solid rgba(40,130,216,.4);
}
.upload-formats {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--silver);
}
.upload-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.upload-check {
  color: var(--circuit-blue-lt);
  font-size: 18px;
  font-weight: 700;
}
.upload-filename {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--champagne-lt);
  letter-spacing: .04em;
  word-break: break-all;
}
.upload-clear {
  background: none;
  border: 1px solid rgba(208,213,221,.2);
  color: var(--silver);
  font-size: 16px;
  line-height: 1;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .2s, color .2s;
}
.upload-clear:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ─── SCROLL FADE-IN (class-based — never overrides :hover) ──
   .aem-fade  = initial hidden state (set by JS before observe)
   .aem-visible = triggered by IntersectionObserver
   The opacity/translateY here never conflict with hover
   transforms because hover always takes precedence in cascade
   when both classes are present.
   ─────────────────────────────────────────────────────────── */
.aem-fade {
  opacity: 0;
  translate: 0 20px;
  transition:
    opacity .5s ease,
    translate .5s ease;
}
.aem-fade.aem-visible {
  opacity: 1;
  translate: 0 0;
}