/* ──────────────────────────────────────────────────────────
   home.css — homepage-specific layout (hero, pillars, etc).
   Tokens come from tokens.css; structural pieces from layout.css.
   ────────────────────────────────────────────────────────── */

/* ═══ HERO ═════════════════════════════════════════════ */
#hero {
  height: 100vh;
  min-height: 700px;
  display: grid;
  grid-template-columns: 58% 42%;
  position: relative;
  overflow: hidden;
  padding: 0;
}
#hero-canvas { position: absolute; inset: 0; z-index: 0; }

.hero-left {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 192px var(--gutter) var(--space-9);
}
.hero-content { position: relative; z-index: 2; }
.hero-right {
  position: relative;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hft-canvas {
  display: block;
  width: 72%;
  aspect-ratio: 1 / 1;
  max-height: 80%;
}

.hero-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-7);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.hero-tag::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: left;
}
.hero-h1 .accent { color: var(--accent); display: block; }

.hero-sub {
  margin-top: var(--space-7);
  max-width: min(520px, 100%);
  font-size: var(--fs-body-l);
  font-weight: 300;
  color: var(--text-3);
  line-height: 1.7;
  text-align: justify;
}

.hero-actions {
  margin-top: var(--space-9);
  display: flex;
  gap: var(--space-5);
  align-items: center;
}

.hero-stats {
  display: flex;
  gap: var(--space-9);
  flex-wrap: wrap;
  padding-top: var(--space-4);
}
.hero-stat-val {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* Hero reveal — gated on the html.intro-done class set by js/intro.js.
   The five hero children start hidden and animate in with an 80ms stagger
   once the intro overlay is dismissed (or immediately, on repeat visits
   where the sessionStorage gate skips the overlay). */
.hero-tag, .hero-h1, .hero-sub, .hero-actions, .hero-stats {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}
html.intro-done .hero-tag     { transition-delay:   0ms; }
html.intro-done .hero-h1      { transition-delay:  80ms; }
html.intro-done .hero-sub     { transition-delay: 160ms; }
html.intro-done .hero-actions { transition-delay: 240ms; }
html.intro-done .hero-stats   { transition-delay: 320ms; }
html.intro-done .hero-tag,
html.intro-done .hero-h1,
html.intro-done .hero-sub,
html.intro-done .hero-actions,
html.intro-done .hero-stats {
  opacity: 1;
  transform: translateY(0);
}

/* No-JS / stale-sessionStorage fallback: if intro-done never lands,
   force the hero visible after 2s so the page stays readable. */
@keyframes hero-fallback {
  to { opacity: 1; transform: translateY(0); }
}
.hero-tag, .hero-h1, .hero-sub, .hero-actions, .hero-stats {
  animation: hero-fallback 0s var(--ease) 2s forwards;
}
html.intro-done .hero-tag,
html.intro-done .hero-h1,
html.intro-done .hero-sub,
html.intro-done .hero-actions,
html.intro-done .hero-stats {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-tag, .hero-h1, .hero-sub, .hero-actions, .hero-stats {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

@media (max-width: 1023px) {
  #hero { grid-template-columns: 55% 45%; }
}
@media (max-width: 899px) {
  #hero { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .hero-right { display: none; }
  .hero-left { padding: 100px var(--gutter) var(--space-9); justify-content: center; min-height: 100vh; }
  .hero-h1 { font-size: clamp(48px, 12vw, 80px); }
  .hero-sub { max-width: 100%; font-size: var(--fs-body); }
  .hero-stats { gap: var(--space-6); margin-top: var(--space-8); }
  .hero-stat-val { font-size: 32px; }
}

/* Scroll cue at hero bottom. Faint chevron + label, bounces gently,
   fades to invisible on first scroll, hidden entirely on <900px. */
.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-7);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  opacity: 0.6;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
  z-index: 3;
}
.hero-scroll-cue.is-hidden { opacity: 0; }
.hero-scroll-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-scroll-cue svg {
  animation: scroll-cue-bounce 1.8s var(--ease) infinite;
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue svg { animation: none; }
}
@media (max-width: 899px) {
  .hero-scroll-cue { display: none; }
}

.globe-tooltip {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text);
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 120ms var(--ease);
  white-space: nowrap;
}
.globe-tooltip.visible { opacity: 1; }

/* ═══ ABOUT ════════════════════════════════════════════ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-11);
  margin-top: var(--space-9);
  align-items: start;
}
.about-left .big-text {
  font-family: var(--font-display);
  font-size: clamp(36px, 3.5vw, 52px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}
.about-left .big-text span { color: var(--accent); }
.about-right p {
  color: var(--text-3);
  font-weight: 300;
  margin-bottom: var(--space-5);
  font-size: var(--fs-body);
  text-align: justify;
}

.about-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  margin-top: var(--space-11);
}
.pillar {
  background: var(--bg-elevated);
  padding: var(--space-8) var(--space-7);
  border-top: 2px solid transparent;
  transition: border-color var(--dur-state) var(--ease),
              background var(--dur-state) var(--ease),
              transform var(--dur-state) var(--ease);
}
.pillar:hover {
  border-color: var(--accent);
  background: var(--bg-section);
  transform: translateY(-4px);
}
.pillar-num {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}
.pillar-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-4);
}
.pillar p {
  font-size: var(--fs-body-s);
  color: var(--text-3);
  font-weight: 300;
  line-height: 1.7;
  text-align: justify;
}

@media (max-width: 1023px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .about-pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .about-pillars { grid-template-columns: 1fr; }
}

/* ═══ TECHNOLOGY ═══════════════════════════════════════ */
#technology {
  position: relative;
  overflow: hidden;
}
#tech-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.tech-inner { position: relative; z-index: 1; }
.tech-header { margin-bottom: var(--space-11); }
.tech-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px;
  margin-top: var(--space-10);
}
.spec-card {
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--border);
  padding: var(--space-8) var(--space-7);
  position: relative;
  overflow: hidden;
  transition: background var(--dur-state) var(--ease);
}
.spec-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-state) var(--ease);
}
.spec-card:hover::before { transform: scaleX(1); }
.spec-card:hover { background: var(--accent-soft); }
.spec-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.spec-desc {
  font-size: var(--fs-body-s);
  color: var(--text-3);
  font-weight: 300;
  line-height: 1.7;
  text-align: justify;
}
.spec-metric {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  color: var(--accent);
}

@media (max-width: 1023px) {
  .tech-specs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
  .tech-specs { grid-template-columns: 1fr !important; }
}

/* Second tech-specs row (Our Approach + Signal Discovery + Execution Quality).
   The base .tech-specs uses repeat(auto-fit, minmax(220px, 1fr)) which on
   wide viewports creates 6+ columns and shrinks Signal/Execution to a
   sliver. Pin this row to 2 columns at desktop so Signal + Execution each
   get half a row, and the Approach card spans both. */
.tech-specs-pillars {
  grid-template-columns: 1fr 1fr;
}
.tech-specs-pillars .tech-approach-card {
  grid-column: 1 / -1;
  padding: var(--space-6);   /* 24px — was 32px (var(--space-7)) */
}
.tech-approach-inner {
  display: flex;
  gap: var(--space-6);        /* 24px between columns — was 40px */
  align-items: flex-start;
  flex-wrap: wrap;
}
.tech-approach-inner > div { flex: 1 1 240px; min-width: 0; }
.tech-approach-headline {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900;
  color: var(--accent);
  line-height: 1.0;            /* was 1.05 */
  margin-bottom: var(--space-1);  /* 4px — was 8px */
}
.tech-approach-body {
  flex: 1 1 280px;
  font-size: var(--fs-body);
  color: var(--text-3);
  font-weight: 300;
  line-height: 1.6;            /* was 1.7 */
  min-width: 0;
  margin: 0;
}
/* Signal Discovery / Execution Quality cards — class-based padding so it's
   smaller on mobile and so the cards above/below don't visually float
   apart with dead space. */
.tech-pillar-card { padding: var(--space-6) var(--space-6); }

@media (max-width: 1023px) {
  .tech-specs-pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .tech-specs-pillars { grid-template-columns: 1fr; }
  .tech-specs-pillars .tech-approach-card { padding: var(--space-5); }   /* 20px */
  .tech-approach-inner { flex-direction: column; gap: var(--space-3); }  /* 12px between stacked items */
  .tech-approach-headline { font-size: clamp(22px, 8vw, 28px); }
  .tech-approach-body { font-size: var(--fs-body-s); line-height: 1.55; }
  .tech-pillar-card { padding: var(--space-5); }                          /* 20px on mobile */
}

/* Apply modal phone row — at narrow viewports the country combobox
   inline width:160px overflows. Stack vertically below 479px so the
   combobox and the phone input each take full width. */
@media (max-width: 479px) {
  .apply-phone-row {
    flex-direction: column !important;
    gap: var(--space-3) !important;
  }
  .apply-phone-country {
    width: 100% !important;
    flex-shrink: 1 !important;
  }
}

/* Signal/Execution cards: cap the canvas wrap so it can't overflow into
   sibling cards on narrow viewports (Samsung Internet was repainting the
   canvas backing buffer at the wrong size after column collapse). */
#signal-canvas-wrap,
#exec-canvas-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  contain: layout paint;
}
#signal-canvas,
#exec-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ═══ WAVEFORM DIVIDER ════════════════════════════════ */
/* Sits at the bottom of the About section, inside the section padding so
   its width matches the .about-pillars row directly above it. */
#waveform-section {
  padding: 0;
  height: 140px;
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  margin-top: var(--space-7);
}
#waveform-canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 899px) { #waveform-section { height: 100px; } }

/* ═══ MARKETS ══════════════════════════════════════════ */
.markets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
  margin-top: var(--space-10);
}
.market-card {
  background: var(--bg-elevated);
  padding: var(--space-9) var(--space-8);
  transition: background var(--dur-hover) var(--ease);
}
.market-card:hover { background: var(--bg-section); }
.market-card-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.market-card p {
  font-size: var(--fs-body-s);
  color: var(--text-3);
  font-weight: 300;
  line-height: 1.7;
  text-align: justify;
}

@media (max-width: 1023px) { .markets-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:  899px) { .markets-grid { grid-template-columns: 1fr; } }

/* ═══ NEWS ═════════════════════════════════════════════ */
#news {
  padding: var(--space-section) var(--gutter);
  overflow: hidden;
  border-top: 1px solid var(--border);
}
.news-track-outer {
  position: relative;
  overflow: hidden;
}
.news-track-outer::before,
.news-track-outer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
}
.news-track-outer::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 30px, transparent);
}
.news-track-outer::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}

.news-marquee {
  display: flex;
  gap: var(--space-6);
  padding: 0;
  animation: newsScroll 80s linear infinite;
  width: max-content;
}
.news-marquee:hover { animation-play-state: paused; }
.news-track-outer:hover .news-marquee { animation-play-state: paused; }

@keyframes newsScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .news-marquee { animation: none; }
}

.news-card {
  flex: 0 0 300px;
  border: 1px solid var(--border);
  background: var(--bg);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--dur-hover) var(--ease);
  display: block;
}
.news-card:hover { border-color: var(--accent); }
.news-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-section);
  overflow: hidden;
}
.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-card-body { padding: 18px; }
.news-card-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.news-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: var(--space-3);
}
.news-card-summary {
  font-size: var(--fs-body-s);
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.news-card-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

@media (max-width: 899px) {
  #news { padding: 64px 0; }
  #news .section-tag, #news .section-h2, #news .reveal { margin-left: var(--gutter); }
  .news-track-outer {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-left: var(--gutter);
  }
  .news-marquee { animation: none !important; transform: none !important; gap: var(--space-4); padding-right: var(--gutter); }
  .news-card { flex: 0 0 82vw; }
}

.news-filter-select {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 36px 10px 14px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  width: 240px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231A1714' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color var(--dur-hover) var(--ease);
}
.news-filter-select:focus { border-color: var(--accent); }

/* ═══ CAREERS ══════════════════════════════════════════ */
.careers-header { margin-bottom: var(--space-9); }
.roles { display: flex; flex-direction: column; gap: 2px; }
.role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-elevated);
  padding: var(--space-6) var(--space-9);
  border-left: 2px solid transparent;
  transition: border-color var(--dur-hover) var(--ease),
              background var(--dur-hover) var(--ease);
  cursor: pointer;
  gap: var(--space-6);
}
.role-row:hover,
.role-row.active {
  border-left-color: var(--accent);
  background: var(--bg-section);
}
.role-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.role-left { display: flex; align-items: center; flex: 1; }
.role-info { display: flex; flex-direction: column; gap: 3px; }
.role-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
}
.role-city {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-muted);
  margin-top: 2px;
}
.role-dept {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.role-arrow {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  transition: transform var(--dur-state) var(--ease);
  flex-shrink: 0;
}
.role-row.active .role-arrow { transform: rotate(90deg); }

.role-detail {
  display: none;
  background: var(--bg);
  border-left: 2px solid var(--accent);
  padding: var(--space-8) var(--space-10) var(--space-8) var(--space-9);
  margin-bottom: 2px;
}
.role-detail.open { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); }
.detail-section { margin-bottom: var(--space-7); }
.detail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.detail-label::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--accent);
}
.detail-text {
  font-size: var(--fs-body-s);
  color: var(--text-3);
  font-weight: 300;
  line-height: 1.8;
  text-align: justify;
}
.detail-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.detail-list li {
  font-size: var(--fs-body-s);
  color: var(--text-3);
  font-weight: 300;
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}
.detail-list li::before {
  content: '·';
  color: var(--accent);
  font-size: 10px;
  flex-shrink: 0;
}
.role-apply-btn {
  display: inline-block;
  margin-top: var(--space-7);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 13px 36px;
  border: none;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease);
}
.role-apply-btn:hover { background: var(--accent-bright); }

@media (max-width: 899px) {
  .role-detail.open { grid-template-columns: 1fr; gap: var(--space-6); }
  .role-detail { padding: var(--space-6) var(--space-5); }
  .role-row { padding: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
}

/* ═══ CONTACT ══════════════════════════════════════════ */
#contact {
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: grid;
  /* Form column dominates so the message panel reads as roughly half the
     page (the section is capped to 1600px on huge screens, so a 1:2 ratio
     puts the form at ~55% of a 1920px viewport). minmax(0, …) is required
     because the typewriter quote in the left column uses white-space:nowrap
     — without minmax(0,…) its min-content blows up the left column past
     the 1:2 ratio. Collapses to single-column under 1024px (rule below). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0;
  padding: 0;
}
.contact-left {
  padding: var(--space-section) var(--gutter);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.contact-right {
  padding: var(--space-section) var(--gutter);
  background: var(--bg);
}
.contact-detail { margin-bottom: var(--space-8); }
.contact-detail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.contact-detail-val {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text);
  font-weight: 500;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (max-width: 1023px) {
  #contact { grid-template-columns: 1fr; }
  .contact-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 60px var(--gutter);
  }
  .contact-right { padding: 60px var(--gutter); }
}
@media (max-width: 899px) {
  .contact-left, .contact-right { padding: var(--space-9) var(--gutter); }
  .form-input { width: 100% !important; box-sizing: border-box; }
  .form-submit { width: 100%; box-sizing: border-box; }
}

/* ═══ CONTACT QUOTE ANIMATIONS ═══════════════════════ */
@keyframes typeQuote {
  from { width:0; }
  to   { width:100%; border-right-color:transparent; }
}
@keyframes fadeAuthor {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ═══ ROLE-APPLY WRAPPER (Task 11 — gutter audit) ═════ */
.role-apply-wrap {
  grid-column: 1 / -1;
  padding: var(--space-4) 0 var(--space-8);
}