/* ===========================================================================
   Richmond Ed Fund — Apprenticeships · Shared styles
   Tokens from DESIGN.md / brand-tokens.css. Real brand fonts + colors.
   =========================================================================== */

:root {
  --accent:        #F15C2C; /* coral — THE action color */
  --accent-hover:  #D8481F;
  --accent-blue:   #329FE6; /* employer cue */
  --accent-purple: #7A35AE; /* candidate cue */

  --surface:       #FFFFFF;
  --surface-soft:  #F6F4F1; /* warm off-white */
  --surface-tint:  #FDEDE7; /* coral wash */
  --ink:           #1A1A1A; /* off-black, never #000 */
  --ink-muted:     #5A5A5A;
  --border:        #E7E3DE;

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1200px;
  --radius: 14px;
  --radius-lg: 28px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 18px 40px -22px rgba(26,16,8,0.45);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; font-family: var(--font-body); color: var(--ink);
  background: var(--surface); line-height: 1.6; font-size: 17px; overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.06; letter-spacing: -0.02em; margin: 0; font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section.soft { background: var(--surface-soft); }
.center { text-align: center; }

.eyebrow {
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; display: inline-block; }
.eyebrow.center { justify-content: center; }

.sec-head { max-width: 58ch; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; }
.sec-head h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-top: 16px; }
.sec-head p { color: var(--ink-muted); margin-top: 16px; font-size: 1.1rem; }

/* ===================== BUTTONS ===================== */
.btn {
  --bg: var(--accent); --fg: #fff;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent;
  background: var(--bg); color: var(--fg); cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(241,92,44,.55); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
.btn--purple { background: var(--accent-purple); } .btn--purple:hover { box-shadow: 0 12px 24px -10px rgba(122,53,174,.5); }
.btn--blue   { background: var(--accent-blue); }   .btn--blue:hover   { box-shadow: 0 12px 24px -10px rgba(50,159,230,.5); }
.btn--lg { padding: 17px 32px; font-size: 1.05rem; }
.btn--sm { padding: 10px 18px; font-size: 0.92rem; gap: 7px; }
.btn--sm svg { width: 15px; height: 15px; }
/* compact nav CTA: subtle by default, fills on hover */
.nav-cta .btn--sm:hover { box-shadow: 0 8px 18px -10px rgba(241,92,44,.55); }

/* ===================== NAV ===================== */
header.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease);
}
header.nav.scrolled { border-color: var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
/* Logo sits naturally in the nav. Big at the top of the page, shrinks when the
   user scrolls so the sticky nav stays compact. */
.logo { position: relative; z-index: 5; display: inline-flex; align-items: center; }
.logo img { height: 64px; width: auto; display: block; transition: height .25s var(--ease); }
header.nav.scrolled .logo img { height: 44px; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { font-size: 0.97rem; color: var(--ink-muted); transition: color .2s; position: relative; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--accent); transition: width .25s var(--ease); }
.nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--ink); font-weight: 500; } .nav-links a.active::after { width: 100%; }
.nav-cta { display: flex; gap: 12px; align-items: center; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition: .3s var(--ease); }

/* ===================== generic decorative layer (heroes + bands) ===================== */
.deco-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.spark { position: absolute; line-height: 1; will-change: transform; color: var(--pg, var(--accent)); opacity: .5; }
.deco-blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .5; }

/* ===================== HERO (home, asymmetric) ===================== */
.hero {
  position: relative; padding: 64px 0 90px; overflow: hidden;
  background:
    radial-gradient(58% 80% at 100% -12%, rgba(241,92,44,.16), rgba(241,92,44,0) 60%),
    radial-gradient(44% 68% at -6% 112%, rgba(50,159,230,.12), rgba(50,159,230,0) 58%),
    var(--surface-soft);
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); margin: 22px 0 0; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { font-size: 1.22rem; color: var(--ink-muted); max-width: 36ch; margin-top: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-note { margin-top: 22px; font-size: .92rem; color: var(--ink-muted); display:flex; align-items:flex-start; gap:8px; line-height: 1.5; }
.hero-note svg { flex: none; margin-top: 3px; }
.hero-media { position: relative; }
.hero-media .photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow); z-index: 2; }
.hero-media .photo img { width: 100%; height: 120%; object-fit: cover; object-position: 35% center; will-change: transform; }
.hero-media::before { content:""; position:absolute; right:-18px; bottom:-18px; width:62%; height:64%; background: var(--accent); border-radius: var(--radius-lg); z-index: 1; }
.hero-badge { position: absolute; left: -22px; top: 34px; z-index: 3; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow); display:flex; align-items:center; gap:12px; }
.hero-badge b { font-family: var(--font-display); font-size: 1.5rem; display:block; line-height: 1; }
.hero-badge span { font-size: .82rem; color: var(--ink-muted); line-height: 1.25; display: block; }

/* ===================== PAGE HERO (subpages) ===================== */
.page-hero { padding: 58px 0 84px; position: relative; overflow: hidden; background: var(--surface-soft); }
.page-hero.candidate { --pg: var(--accent-purple); }
.page-hero.employer  { --pg: var(--accent-blue); }
.page-hero.candidate { background:
  radial-gradient(66% 88% at 97% -14%, rgba(122,53,174,.22), rgba(122,53,174,0) 60%),
  radial-gradient(46% 64% at -8% 114%, rgba(241,92,44,.10), rgba(241,92,44,0) 58%),
  var(--surface-soft); }
.page-hero.employer { background:
  radial-gradient(66% 88% at 97% -14%, rgba(50,159,230,.24), rgba(50,159,230,0) 60%),
  radial-gradient(46% 64% at -8% 114%, rgba(241,92,44,.08), rgba(241,92,44,0) 58%),
  var(--surface-soft); }
.page-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.page-hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); margin-top: 16px; }
.page-hero .lede { font-size: 1.18rem; color: var(--ink-muted); margin-top: 18px; max-width: 42ch; }
.page-hero .eyebrow { color: var(--pg, var(--accent)); }
.page-hero-media { position: relative; }
.page-hero-media .ph { position: relative; z-index: 2; aspect-ratio: 5/4; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.page-hero-media .ph img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.page-hero-media::before { content: ""; position: absolute; right: -18px; bottom: -18px; width: 58%; height: 66%; background: var(--pg); border-radius: var(--radius-lg); z-index: 1; }
.page-hero-badge { position: absolute; left: -18px; top: 30px; z-index: 3; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 11px; }
.page-hero-badge .pic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--pg); }
.page-hero.candidate .page-hero-badge .pic { background: #f1e7f8; }
.page-hero.employer  .page-hero-badge .pic { background: #e4f2fc; }
.page-hero-badge .pic svg { width: 20px; height: 20px; }
.page-hero-badge b { font-family: var(--font-display); display: block; line-height: 1.1; }
.page-hero-badge span { font-size: .8rem; color: var(--ink-muted); line-height: 1.25; display: block; margin-top: 2px; }

/* ===================== MARQUEE ===================== */
.marquee { background: var(--ink); color: #fff; padding: 16px 0; overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 46px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; will-change: transform; }
.marquee-track span { display:inline-flex; align-items:center; gap:46px; }
.marquee-track span::after { content:"✦"; color: var(--accent); }

/* ===================== ABOUT (who is Richmond Ed Fund) ===================== */
.about-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
.about-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.25; letter-spacing: -0.01em; }
.about-quote .hl { color: var(--accent); }
.about-body { color: var(--ink-muted); margin-top: 22px; font-size: 1.08rem; }

/* pillars: grouped by top border lines, not boxed cards */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 18px; border-top: 1px solid var(--border); }
.pillar { padding: 28px 24px 6px 0; border-top: 2px solid var(--ink); margin-right: 24px; }
.pillar:last-child { margin-right: 0; }
.pillar h4 { font-size: 1.15rem; margin-bottom: 8px; }
.pillar p { color: var(--ink-muted); font-size: .96rem; }

/* About — sticky scroll storytelling (image pins, pillars reveal one by one) */
/* grid columns STRETCH (default) so the left column is as tall as the scrolling
   content — that tall column is the "rail" the sticky photo travels within. */
.about-sticky-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: stretch; }
.about-sticky-col { position: relative; }
.about-sticky-inner { position: sticky; top: 96px; }
.about-progress { margin-top: 24px; }
.about-progress .eyebrow { margin-bottom: 0; }
.about-progress-track { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 16px; }
.about-progress-track > span { display: block; height: 100%; width: 33.33%; background: var(--accent); border-radius: 2px; transition: width .55s var(--ease); }
.about-count { margin-top: 12px; font-family: var(--font-display); color: var(--ink-muted); font-size: .9rem; letter-spacing: .03em; }
.about-count b { color: var(--ink); font-size: 1.05rem; }
.about-content { padding-top: 6px; }
.pillars-stack { margin-top: 36px; }
.pillar-block { display: grid; grid-template-columns: auto 1fr; gap: 26px; padding: 76px 0; min-height: 30vh; align-content: center; border-top: 1px solid var(--border); opacity: 0; transform: translateY(34px); }
.pillar-block:last-child { border-bottom: 1px solid var(--border); }
.pillar-block.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.pillar-num { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--accent); padding-top: 6px; }
.pillar-block h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.pillar-block p { color: var(--ink-muted); margin-top: 10px; font-size: 1.05rem; max-width: 42ch; }

/* ===================== OBJECTIVE (standout band) ===================== */
.objective { background: var(--ink); color: #fff; }
.objective .eyebrow { color: #fff; opacity: .8; }
.objective-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; }
.objective h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.objective h2 em { font-style: normal; color: var(--accent); }
.objective p { color: rgba(255,255,255,.72); margin-top: 20px; font-size: 1.12rem; max-width: 46ch; }
.obj-points { display: grid; gap: 18px; }
.obj-point { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.14); }
.obj-point svg { width: 24px; height: 24px; color: var(--accent); flex: none; margin-top: 2px; }
.obj-point b { font-family: var(--font-display); display:block; }
.obj-point span { color: rgba(255,255,255,.65); font-size: .96rem; }

/* ===================== BACKING STRIP ===================== */
.backing { background: var(--surface-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.backing-inner { padding: 28px 0; text-align: center; }
.backing-inner .eyebrow { color: var(--ink-muted); justify-content: center; margin-bottom: 12px; }
.backing-inner p { font-size: 1.12rem; color: var(--ink-muted); max-width: 64ch; margin: 0 auto; line-height: 1.5; }
.backing-inner p b { color: var(--ink); font-family: var(--font-display); font-weight: 600; }

/* ===================== VOICES / QUOTES ===================== */
.voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.quote-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.quote-card .q { font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; line-height: 1.4; letter-spacing: -0.01em; }
.quote-card .q::before { content: "\201C"; color: var(--accent); font-family: var(--font-display); font-size: 2.6rem; line-height: 0; vertical-align: -0.35em; margin-right: 4px; }
.quote-attr { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 14px; }
.quote-attr .avatar { width: 54px; height: 54px; border-radius: 14px; overflow: hidden; flex: none; background: var(--surface-soft); }
.quote-attr .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quote-attr b { display: block; font-family: var(--font-display); font-size: .95rem; line-height: 1.2; }
.quote-attr span { display: block; font-size: .83rem; color: var(--ink-muted); line-height: 1.25; }

/* ===================== STATS ===================== */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
.stat { padding: 34px 26px; border-bottom: 1px solid var(--border); }
.stat:not(:last-child) { border-right: 1px solid var(--border); }
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem,4vw,3.2rem); line-height: 1; }
.stat .num small { color: var(--accent); }
.stat .lbl { color: var(--ink-muted); margin-top: 10px; font-size: .98rem; }

/* ===================== STEPS (zig-zag) ===================== */
.step { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 40px 0; }
.step:nth-child(even) .step-media { order: -1; }
.step-num { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--accent); display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border:1.5px solid var(--accent); border-radius:50%; }
.step h3 { font-size: 1.7rem; margin: 18px 0 12px; }
.step p { color: var(--ink-muted); max-width: 42ch; }
.step-media { aspect-ratio: 16/11; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.step-media img { width: 100%; height: 100%; object-fit: cover; }

/* steps as a featured card row (one card elevated with media) */
.steps-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.step-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 30px 26px; min-height: 300px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
/* number, icon and title all sit in fixed-height rows, so every card aligns
   regardless of how long the title or description is */
/* number "fills up" with coral from bottom to top on hover (gradient clipped to text) */
.step-card-num {
  font-family: var(--font-display); font-weight: 700; font-size: 4rem; line-height: 1;
  letter-spacing: -0.04em; margin-bottom: 36px; width: max-content;
  background-image: linear-gradient(to top, var(--accent) 50%, #ECE7E1 50%);
  background-size: 100% 200%; background-position: 0 0%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: background-position .55s var(--ease);
}
.step-card:hover .step-card-num { background-position: 0 100%; }
.step-card h3 { font-size: 1.2rem; line-height: 1.2; min-height: 2.4em; display: flex; align-items: flex-start; }
.step-card p { color: var(--ink-muted); font-size: .94rem; margin-top: 10px; }
.steps-cards .reveal:nth-child(2) { transition-delay: .08s; }
.steps-cards .reveal:nth-child(3) { transition-delay: .16s; }
.steps-cards .reveal:nth-child(4) { transition-delay: .24s; }

/* simple numbered step list (subpages) */
.howto { display: grid; gap: 0; max-width: 760px; }
.howto-item { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 26px 0; border-top: 1px solid var(--border); align-items: start; }
.howto-item:last-child { border-bottom: 1px solid var(--border); }
.howto-item .n { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; background: var(--pg, var(--accent)); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.howto-item h4 { font-size: 1.25rem; margin-bottom: 6px; }
.howto-item p { color: var(--ink-muted); }

/* ===================== AUDIENCE SPLIT ===================== */
.aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.aud-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; padding: 38px; color: #fff; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.aud-card:hover { transform: translateY(-8px); }
.aud-card.candidate:hover { box-shadow: 0 30px 60px -28px rgba(122,53,174,.65); }
.aud-card.employer:hover  { box-shadow: 0 30px 60px -28px rgba(50,159,230,.65); }
.aud-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform .7s var(--ease); }
.aud-card:hover img { transform: scale(1.08); }
.aud-card::after { content:""; position:absolute; inset:0; z-index:-1; }
/* gradient darker in the lower half (where the text sits) for better readability */
.aud-card.candidate::after { background: linear-gradient(180deg, rgba(40,18,60,.25) 0%, rgba(40,18,60,.7) 45%, rgba(20,10,32,.96) 100%); }
.aud-card.employer::after  { background: linear-gradient(180deg, rgba(8,40,66,.25) 0%, rgba(8,40,66,.7) 45%, rgba(4,22,40,.96) 100%); }
/* diagonal light sweep on hover */
.aud-card::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); transform: translateX(-120%); transition: transform .85s var(--ease); }
.aud-card:hover::before { transform: translateX(120%); }
/* content lifts slightly + arrow slides on hover */
.aud-body { position: relative; z-index: 2; transition: transform .45s var(--ease); }
.aud-card:hover .aud-body { transform: translateY(-6px); }
.aud-card .btn svg { transition: transform .3s var(--ease); }
.aud-card:hover .btn svg { transform: translateX(5px); }
.aud-tag { font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; align-self: flex-start; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); transition: background .3s var(--ease); }
.aud-card:hover .aud-tag { background: rgba(255,255,255,.3); }
.aud-card h3 { font-size: 2rem; margin: 16px 0 10px; }
.aud-card p { color: rgba(255,255,255,.85); }
.aud-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 18px 0 24px; }
.aud-list li { font-size: .92rem; display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.92); }
.aud-list li svg { width: 16px; height: 16px; flex: none; }

/* ===================== BENEFITS / REQUIREMENTS ===================== */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 48px; }
.feature { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--border); align-items: start; }
.feature .ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-tint); color: var(--accent); }
.feature.purple .ic { background: #f1e7f8; color: var(--accent-purple); }
.feature.blue .ic { background: #e4f2fc; color: var(--accent-blue); }
.feature .ic svg { width: 24px; height: 24px; }
.feature h4 { font-size: 1.15rem; margin-bottom: 6px; }
.feature p { color: var(--ink-muted); font-size: .98rem; }

/* ===================== FAQ ===================== */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--border); padding: 6px 0; }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 26px; height: 26px; flex: none; position: relative; transition: transform .3s var(--ease); }
.faq summary .plus::before, .faq summary .plus::after { content:""; position:absolute; background: var(--accent); border-radius: 2px; }
.faq summary .plus::before { top: 12px; left: 4px; right: 4px; height: 2px; }
.faq summary .plus::after { left: 12px; top: 4px; bottom: 4px; width: 2px; transition: transform .3s var(--ease); }
.faq details[open] summary .plus::after { transform: scaleY(0); }
.faq details[open] summary .plus { transform: rotate(90deg); }
.faq .ans { color: var(--ink-muted); padding: 0 46px 22px 0; max-width: 70ch; }

/* ===================== FORMS ===================== */
/* colored section background (the form card itself stays white) */
.form-fill { position: relative; overflow: hidden; }
/* faint dot texture layered over the color gradient */
/* static mesh-style depth (no moving elements) + faint dot texture */
.form-fill--candidate { background:
  radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.6px) 0 0 / 26px 26px,
  radial-gradient(circle at 14% 16%, rgba(60,24,100,.5), transparent 52%),
  radial-gradient(circle at 92% 90%, rgba(196,128,232,.45), transparent 48%),
  linear-gradient(150deg, #5a2680 0%, #8a45bd 100%); }
.form-fill--employer  { background:
  radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.6px) 0 0 / 26px 26px,
  radial-gradient(circle at 14% 16%, rgba(16,84,142,.5), transparent 52%),
  radial-gradient(circle at 92% 90%, rgba(150,216,255,.45), transparent 48%),
  linear-gradient(150deg, #1f7cc2 0%, #45a9ea 100%); }
.form-fill .form-shell { position: relative; z-index: 2; }
.form-fill .form-card { transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.form-fill .form-card:hover { box-shadow: 0 44px 80px -30px rgba(0,0,0,.45); transform: translateY(-3px); }
.form-fill .form-aside .eyebrow { color: rgba(255,255,255,.9); }
.form-fill .form-aside h2 { color: #fff; }
.form-fill .form-aside p { color: rgba(255,255,255,.85); }
.form-fill .form-aside .pill { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.35); color: #fff; }
.form-fill .form-aside .pill svg { stroke: #fff; }

.form-shell { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.form-aside h2 { font-size: clamp(1.9rem,3vw,2.6rem); margin-top: 14px; }
.form-aside p { color: var(--ink-muted); margin-top: 16px; }
.form-aside .pill { display:inline-flex; gap:8px; align-items:center; margin-top:20px; font-size:.9rem; background:#fff; border:1px solid var(--border); border-radius:999px; padding:8px 14px; }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow); }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label { font-family: var(--font-display); font-weight: 500; font-size: .92rem; }
label .req { color: var(--accent); }
.hint { font-size: .82rem; color: var(--ink-muted); }
input, select, textarea { font-family: var(--font-body); font-size: 1rem; color: var(--ink); padding: 13px 15px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; transition: border-color .2s, box-shadow .2s; width: 100%; }
textarea { resize: vertical; min-height: 110px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--surface-tint); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--accent-hover); box-shadow: 0 0 0 4px #fce4df; }
.err { font-size: .82rem; color: var(--accent-hover); display: none; align-items: center; gap: 6px; }
.field.invalid .err { display: flex; }
.form-success { display: none; text-align: center; padding: 28px 10px; }
.form-success.show { display: block; }
.form-success .check { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--surface-tint); display: grid; place-items: center; }
.form-success .check svg { width: 30px; height: 30px; color: var(--accent); }
.form-success h3 { font-size: 1.6rem; }
.form-success p { color: var(--ink-muted); margin-top: 10px; }

/* form consent line + submission error + loading button */
.form-consent { font-size: .82rem; color: var(--ink-muted); margin: -4px 0 18px; line-height: 1.4; }
.form-error { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #fce4df; color: var(--accent-hover); font-size: .9rem; }
.form-error a { text-decoration: underline; }
.form-submit { position: relative; }
.form-submit .btn-spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btnspin .7s linear infinite; }
.form-submit.is-loading { pointer-events: none; opacity: .85; }
.form-submit.is-loading .btn-label { opacity: .6; }
.form-submit.is-loading .btn-spinner { display: inline-block; }
@keyframes btnspin { to { transform: rotate(360deg); } }

/* ===================== CTA BAND ===================== */
.cta-band {
  position: relative; overflow: hidden; color: #fff;
  border-radius: var(--radius-lg); padding: 72px 64px;
  background: radial-gradient(130% 150% at 82% -10%, #F6794F 0%, var(--accent) 46%, #D8481F 100%);
}
.cta-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 48px; align-items: center; }
.cta-band .eyebrow { color: #fff; opacity: .85; }
.cta-band h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); max-width: 18ch; margin-top: 14px; }
.cta-band p { color: rgba(255,255,255,.92); margin: 16px 0 30px; max-width: 44ch; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn--white { background: #fff; color: var(--accent); }
.btn--white:hover { box-shadow: 0 16px 32px -14px rgba(0,0,0,.4); }
.btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--outline:hover { background: #fff; color: var(--accent); border-color: #fff; box-shadow: none; }

/* decorative layer */
.cta-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cta-ring { position: absolute; border: 1.5px solid rgba(255,255,255,.22); border-radius: 50%; }
.cta-spark { position: absolute; color: rgba(255,255,255,.85); line-height: 1; will-change: transform; }

/* tilted photo card with floating badge */
.cta-photo { position: relative; justify-self: center; will-change: transform; }
.cta-photo > img { width: 100%; max-width: 340px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); border: 6px solid #fff; box-shadow: var(--shadow); transform: rotate(3deg); }
.cta-photo-badge { position: absolute; left: -18px; bottom: 26px; background: #fff; color: var(--ink); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); }
.cta-photo-badge b { font-family: var(--font-display); display: block; line-height: 1.1; }
.cta-photo-badge span { font-size: .8rem; color: var(--ink-muted); line-height: 1.25; display: block; margin-top: 2px; }

/* ===================== FOOTER ===================== */
footer { background: var(--ink); color: #fff; padding: 72px 0 36px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; }
footer .logo { transform: none; } /* footer logo isn't lifted like the nav one */
footer .logo img { height: 48px; } /* footer uses the light/white variant */
footer p.mission { color: rgba(255,255,255,.65); margin-top: 18px; max-width: 32ch; }
footer h4 { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 16px; }
footer li { margin-bottom: 10px; } footer li a { color: rgba(255,255,255,.82); transition: color .2s; }
footer li a:hover { color: var(--accent); }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 50px; padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; font-size: .85rem; color: rgba(255,255,255,.5); flex-wrap: wrap; }
.foot-bottom a { color: rgba(255,255,255,.8); text-decoration: none; transition: color .2s; }
.foot-bottom a:hover { color: var(--accent); }

/* ===================== REVEAL ===================== */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 940px) {
  .nav-links, .nav-cta .btn--ghost { display: none; }
  .nav-toggle { display: block; padding: 6px; }
  /* push the Apply now CTA to the right, next to the menu button (not floating in the middle) */
  .nav-cta { margin-left: auto; }
  .nav-inner { gap: 10px; height: 64px; }
  /* shrink everything proportionally so it never wraps */
  .wrap { padding: 0 18px; }
  /* mobile: small logo (no overflow effect — would feel cramped at this size) */
  .logo img,
  header.nav.scrolled .logo img { height: 40px; }
  .nav-cta .btn--sm { padding: 8px 14px; font-size: .85rem; gap: 6px; white-space: nowrap; }
  .nav-cta .btn--sm svg { width: 13px; height: 13px; }
  .nav-toggle span { width: 22px; }
  .hero-grid, .step, .form-shell, .aud-grid, .about-grid, .objective-grid,
  .page-hero-grid, .feature-grid, .pillars, .cta-grid, .about-sticky-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-sticky-inner { position: static; }
  /* Drop the sticky-scroll spacing on tablet/mobile (no longer sticky here, so
     the large min-height + 76px padding becomes wasted vertical air) */
  .pillar-block { padding: 28px 0; min-height: 0; }
  .pillar-block p { margin-top: 6px; }
  .pillars-stack { margin-top: 24px; }
  /* Tighter section rhythm on tablet/mobile */
  .section { padding: 64px 0; }
  .sec-head { margin-bottom: 36px; }
  /* repetitive vertical items: tighter padding when stacked single-column */
  .feature { padding: 18px 0; }
  .feature .ic { width: 42px; height: 42px; border-radius: 10px; }
  .feature .ic svg { width: 20px; height: 20px; }
  .howto-item { padding: 18px 0; gap: 16px; }
  .stat { padding: 26px 22px; }
  .stat .num { font-size: clamp(2rem, 5vw, 2.6rem); }
  .step { padding: 24px 0; gap: 28px; }
  .obj-point { padding: 14px 0; }
  .pillar-block h3 { font-size: 1.35rem; }
  .pillar-block p { font-size: .98rem; }
  .steps-cards { grid-template-columns: repeat(2, 1fr); }
  .step-card { min-height: 240px; padding: 24px 22px; }
  .voices-grid { grid-template-columns: 1fr; gap: 14px; }
  .quote-card { padding: 24px; }
  .cta-band { padding: 44px 28px; }
  .cta-photo { display: none; }
  .step:nth-child(even) .step-media { order: 0; }
  .hero-media::before { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .pillar { margin-right: 0; border-top: 2px solid var(--ink); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  /* form section: less air around the card */
  .form-fill { padding: 48px 0; }
  .form-card { padding: 28px; }
  /* hero & page-hero: less vertical padding */
  .hero { padding: 36px 0 56px; }
  .page-hero { padding: 36px 0 56px; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; } .stat { border-right: 0 !important; }
  .form-card, .aud-card { padding: 24px; }
  .section { padding: 48px 0; }
  .sec-head { margin-bottom: 26px; }
  .pillar-block { padding: 20px 0; }
  .feature { padding: 16px 0; }
  .howto-item { padding: 16px 0; gap: 14px; }
  .step-card { min-height: 200px; padding: 22px 20px; }
  .step-card-num { font-size: 3rem; margin-bottom: 22px; }
  .hero, .page-hero { padding: 28px 0 44px; }
  .form-fill { padding: 40px 0; }
  .form-card { padding: 24px; }
  .quote-card { padding: 22px; }
  .voices-grid { gap: 12px; }
  .cta-band { padding: 36px 22px; }
  .cta-band h2 { font-size: 1.7rem; }
  .foot-grid { grid-template-columns: 1fr; }
  .steps-cards { grid-template-columns: 1fr; }
  /* on mobile the photo competes with the text more — push the overlay darker */
  .aud-card.candidate::after { background: linear-gradient(180deg, rgba(40,18,60,.55) 0%, rgba(40,18,60,.88) 35%, rgba(15,8,26,.97) 100%); }
  .aud-card.employer::after  { background: linear-gradient(180deg, rgba(8,40,66,.55) 0%, rgba(8,40,66,.88) 35%, rgba(2,18,34,.97) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}