/* Prime Pharmacy Group — careers site.
   Direction: Quiet Shopfront. NOT the direction Kavita approved on 14 Sept —
   that was Above the Door, preserved at
   reference/styles-above-the-door-approved.css and shown side by side with
   this one at https://prime-pharmacy-options.pages.dev

   Same idea as Above the Door, turned down. Prime is a local, community-strip
   pharmacy group, not a warehouse chain. The muted half of the client's
   palette carries the surfaces and the text; the three bright logo colours are
   reserved for the logo and a 4px brand rule. Hairlines and soft elevation
   rather than heavy outlines and hard offset shadows.

   Light is the default for everyone. Dark applies only when the visitor
   presses the toggle in the header — there is no prefers-color-scheme rule. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Public+Sans:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light;   /* one theme only */
  --paper: #FFFFFF;
  --paper-strong: #F6F7F9;
  --ink: #1E2430;
  --body: #3D4654;
  --muted: #646c7c;        /* their slate grey */
  --line: #dddddd;         /* their light grey */

  /* Logo trio — accent only, never a surface wash. */
  --purple: #4c3484;
  --purple-deep: #3B2868;
  --purple-tint: #EFEBF7;
  --blue: #24abe3;
  --blue-tint: #E4F4FC;

  /* Muted secondaries from the client's own palette — these carry the site. */
  --sage: #6d9873;
  --sage-ink: #436B4A;     /* sage darkened for text on its tint */
  --sage-tint: #E9F0EA;
  --slate: #566787;
  --slate-tint: #EAEDF2;
  --moss: #647c74;         /* their grey-green */
  --moss-ink: #425249;     /* darkened for text on its tint */
  --moss-tint: #E8EDEA;
  --indigo: #544c7f;       /* their muted indigo */
  --indigo-tint: #EBE9F3;
  --lavender: #8c84b4;

  /* Legacy alias: the pilot used --green for the bright logo green. */
  --green: #6d9873;
  --green-tint: #E9F0EA;

  --on-purple: #FFFFFF;
  --on-purple-muted: #DDD6EF;

  /* Inverted bands keep a dark ground in both themes. */
  --band-ink: #1E2430;
  --band-purple: #4c3484;
  --band-text: #FFFFFF;
  --band-text-muted: #E4E7EC;
  --band-text-purple: #EFEAFA;

  --bad: #B3261E;

  --display: 'Plus Jakarta Sans', 'Public Sans', system-ui, sans-serif;
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --maxw: 1160px;
  --pad: clamp(1.25rem, 5vw, 3.5rem);
  --section-y: clamp(3.25rem, 7vw, 5.5rem);
  --r: 10px;
  --bw: 1px;
  --shadow: 0 1px 2px rgba(30, 36, 48, .05), 0 10px 28px -18px rgba(30, 36, 48, .28);
  --shadow-lift: 0 2px 4px rgba(30, 36, 48, .06), 0 18px 40px -22px rgba(30, 36, 48, .35);
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--sans);
       font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
section { padding-block: var(--section-y); }
.cool { background: var(--paper-strong); }

h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; letter-spacing: -0.015em;
             text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(2.15rem, 4.6vw, 3.35rem); line-height: 1.08; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.14; letter-spacing: -0.018em; }
h3 { font-size: 1.12rem; line-height: 1.32; font-weight: 700; }
p { margin: 0 0 1.05rem; }
.g { color: var(--purple); }

p a { color: var(--purple); text-decoration: underline; text-decoration-color: var(--green);
      text-underline-offset: 2px; }
p a:hover { text-decoration-color: currentColor; }

/* The awning stripe: the brand's three colours as shopfront canvas. */
.awning { height: 4px;
  background: linear-gradient(90deg,
    var(--purple) 0 33.34%, var(--blue) 33.34% 66.67%, #8cc43c 66.67% 100%); }
footer .awning, .awning + footer { border: 0; }

/* Section label. `.index-tag` is the name in the approved direction;
   `.eyebrow` is the same thing under the older name, still used across the
   interior pages. Both are kept so neither markup set has to churn. */
.index-tag, .eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--display);
  font-size: 0.73rem; font-weight: 700; color: var(--slate); margin: 0 0 0.9rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* --------------------------------------------------------------- buttons */

.btn { font-family: var(--display); font-size: 0.95rem; font-weight: 600; display: inline-flex;
       align-items: center; gap: 0.55rem; padding: 0.72rem 1.4rem; border-radius: 8px;
       text-decoration: none; border: 1px solid transparent; cursor: pointer;
       transition: background .16s ease, box-shadow .16s ease, color .16s ease; }
.btn-primary { background: var(--purple); color: var(--on-purple); border-color: var(--purple);
               box-shadow: 0 1px 2px rgba(30,36,48,.10); }
.btn-primary:hover { background: var(--purple-deep); border-color: var(--purple-deep);
                     box-shadow: 0 6px 16px -8px rgba(76,52,132,.7); }

/* Inverted button for dark bands. `.btn-white` is the older name. */
.btn-invert, .btn-white { background: #FFFFFF; color: var(--band-purple); border-color: #FFFFFF; }
.btn-invert:hover, .btn-white:hover { background: #EFEBF7; border-color: #EFEBF7; }

/* Text link with a painted underline. `.btn-ghost` is the older name. */
.btn-text, .btn-ghost {
  font-family: var(--display); font-size: 0.93rem; font-weight: 600; color: var(--purple);
  text-decoration: none; border: none; border-bottom: 1.5px solid var(--line); border-radius: 0;
  background: none; padding: 0 0 2px; display: inline-flex; align-items: center; gap: 0.45rem;
  transition: border-color .16s ease, color .16s ease; }
.btn-text:hover, .btn-ghost:hover { color: var(--purple-deep); border-color: var(--purple); }

.arrow { transition: transform .14s ease; }
.btn:hover .arrow, .btn-text:hover .arrow, .btn-ghost:hover .arrow, .go:hover .arrow,
.door:hover .go .arrow { transform: translateX(3px); }

/* On the purple and ink bands, text links flip to paper. */
.manifesto .btn-text, .manifesto .btn-ghost,
.final:not(.stage) .btn-text, .final:not(.stage) .btn-ghost,
.doc-band .btn-text, .doc-band .btn-ghost { color: #FFFFFF; border-color: rgba(255,255,255,.45); }
.manifesto .btn-text:hover, .final:not(.stage) .btn-text:hover, .doc-band .btn-text:hover { border-color: #FFFFFF; }
.manifesto .index-tag, .manifesto .eyebrow,
.final:not(.stage) .index-tag, .final:not(.stage) .eyebrow,
.doc-band .index-tag, .doc-band .eyebrow { color: rgba(255,255,255,.72); }

/* ------------------------------------------------------------------- nav */

nav { position: sticky; top: 0; z-index: 20; background: var(--paper); }
nav .wrap { border-bottom: 0; }
nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brand-logo { height: 46px; width: auto; display: block; }
.footer-logo { height: 36px; }

/* The site is light only, so the colour logo always shows. The reversed asset
   stays in the markup for anything that later needs it on a dark band. */
.logo-dark { display: none; }
/* Dark theme. Opt-in only — applied when the visitor presses the toggle, never
   from the system setting, so everyone lands on the light design first. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #161A21; --paper-strong: #1D222B; --ink: #F0F2F5; --body: #C7CDD6; --muted: #98A1AE;
  --line: #2C323C;
  --purple: #A78BFA; --purple-deep: #B9A3FC; --purple-tint: #272040;
  --blue: #5BC0EB; --blue-tint: #162A35;
  --sage: #8FB795; --sage-ink: #A8CBAD; --sage-tint: #1C2820;
  --slate: #8A9BB8; --slate-tint: #1E242F;
  --moss: #8AA396; --moss-ink: #A3BFAF; --moss-tint: #1B2621;
  --indigo: #9B92C8; --indigo-tint: #242040;
  --lavender: #A9A1CE;
  --green: #8FB795; --green-tint: #1C2820;
  --on-purple: #16121F; --on-purple-muted: #3F3363;
  --band-ink: #272E3B; --band-purple: #4c3484;
  --bad: #FF8A7A;
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }

/* Theme toggle */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
                flex: none; border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
                color: var(--muted); cursor: pointer; padding: 0;
                transition: color .16s ease, border-color .16s ease, background .16s ease; }
.theme-toggle:hover { color: var(--purple); border-color: var(--purple); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

.nav-links { display: flex; align-items: center; gap: 1.7rem; font-family: var(--display);
             font-size: 0.95rem; font-weight: 700; }
.nav-links a:not(.btn) { color: var(--body); text-decoration: none; }
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { color: var(--purple); }
.nav-actions { display: flex; align-items: center; gap: 0.9rem; }
.nav-actions .btn { padding: 0.55rem 1.1rem; font-size: 0.86rem; }
.nav-toggle { display: none; }
.nav-links-cta { display: none; }

@media (max-width: 900px) {
  nav .wrap { position: relative; }
  .nav-actions .btn { display: none; }
  .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px;
                width: 38px; height: 38px; border: none; background: none; cursor: pointer; padding: 0; flex: none; }
  .nav-toggle-bar { display: block; width: 20px; height: 2px; background: var(--ink);
                    margin-inline: auto; transition: transform .2s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column;
               align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line);
               padding: 0.5rem var(--pad) 1rem; }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
  .nav-links-cta { display: inline-flex; margin-top: 0.9rem; align-self: flex-start; }
}

/* ------------------------------------------------------------------ hero */

.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem);
              align-items: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero .lead { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: var(--body); margin-top: 1.3rem; max-width: 40ch; }
.hero-cta { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin-top: 2rem; }
@media (max-width: 840px) { .hero .wrap { grid-template-columns: 1fr; } }

.shot { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line);
        box-shadow: var(--shadow-lift); }
.shot img { width: 100%; aspect-ratio: 5 / 5.2; object-fit: cover; object-position: 62% 30%; display: block; }
.shot .cap { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: var(--paper);
             border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 8px; padding: 0.5rem 0.9rem;
             font-family: var(--display); font-size: 0.85rem; font-weight: 700; color: var(--ink);
             display: inline-flex; align-items: center; gap: 0.5rem; }
.shot .cap b { color: var(--purple); }
.shot .cap i { width: 8px; height: 8px; border-radius: 50%; background: var(--purple); flex: none; }

/* Interior page hero */
.page-hero .wrap { padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(1.5rem, 2.5vw, 2.25rem); }
.page-hero h1 { max-width: 26ch; }
/* A bare section straight after the hero doubles the gap, with no change of
   background to explain it. Let the hero's own bottom padding do the spacing. */
.page-hero + section:not(.cool) { padding-top: 0; }
.page-hero .lead { font-size: clamp(1.05rem, 1.9vw, 1.28rem); color: var(--body); margin-top: 1.3rem; max-width: 54ch; }
.page-hero.compact .wrap { padding-block: clamp(2rem, 4vw, 3rem); }
.page-hero.compact h1 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); max-width: 22ch; }
.page-hero.compact .lead { font-size: clamp(1rem, 1.6vw, 1.15rem); margin-top: 1rem; }

/* ---------------------------------------------------------------- strips */

.strip { background: var(--band-ink); color: var(--band-text); }
.strip .wrap { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem);
               padding-block: 0.9rem; flex-wrap: wrap; text-align: center; font-family: var(--display); }
.strip b { font-size: 1rem; font-weight: 700; }
.strip .sep { opacity: 0.4; }

/* ------------------------------------------------- text layout + columns */

.split .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split.narrow-media .wrap { grid-template-columns: 1.15fr 0.85fr; }
.split.rev .media { order: -1; }
.split .body p:last-child { margin-bottom: 0; }
.split .body strong { color: var(--purple); }
@media (max-width: 840px) {
  .split .wrap, .split.narrow-media .wrap { grid-template-columns: 1fr; }
  .split.rev .media { order: 0; }
}
.media { position: relative; }

.why .wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.why .lede { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--ink);
             font-weight: 700; line-height: 1.2; }
.why .body p:last-child { margin-bottom: 0; }
.why .body strong { color: var(--purple); }
@media (max-width: 840px) { .why .wrap { grid-template-columns: 1fr; } }

.prose { max-width: 62ch; }
.prose p { color: var(--body); }
.prose h2 { margin: 2.25rem 0 0.9rem; }
.prose h2:first-child { margin-top: 0; }
.lede-lg { font-family: var(--display); font-size: clamp(1.25rem, 2.3vw, 1.6rem); line-height: 1.22;
           color: var(--ink); font-weight: 700; max-width: 36ch; }

/* ---------------------------------------------------------------- cards  */

/* Feature cards: benefits, values, programs. */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
            gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.features.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .features.two { grid-template-columns: 1fr; } }

.feature { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
           padding: 1.75rem 1.6rem; box-shadow: var(--shadow); }
.cool .feature { background: var(--paper-strong); }
.feature .ficon { width: 46px; height: 46px; border-radius: 10px; background: var(--purple-tint);
                  color: var(--purple); display: grid; place-items: center; margin-bottom: 1.15rem;
                  font-family: var(--display); font-weight: 800; font-size: 0.95rem; }
.feature .ficon svg { width: 22px; height: 22px; }
/* Rotate the brand's three colours across each row of cards. */
.feature:nth-child(4n+2) .ficon { background: var(--slate-tint); color: var(--slate); }
.feature:nth-child(4n+3) .ficon { background: var(--sage-tint); color: var(--sage-ink); }
.feature:nth-child(4n+4) .ficon { background: var(--moss-tint); color: var(--moss-ink); }
.feature h3 { color: var(--ink); margin-bottom: 0.5rem; }
.feature h3 a { color: inherit; text-decoration: none; }
.feature h3 a:hover { color: var(--purple); }
.feature p { color: var(--muted); margin: 0; font-size: 0.96rem; }

/* Persona doors */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.door { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
        padding: 1.9rem 1.7rem; text-decoration: none; color: var(--body); display: flex;
        flex-direction: column; box-shadow: var(--shadow);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cool .door { background: var(--paper-strong); }
.door:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--lavender); }
.tag { display: inline-flex; align-self: flex-start; font-family: var(--display); font-size: 0.68rem;
       font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple);
       background: var(--purple-tint); border: none; padding: 0.32rem 0.65rem; border-radius: 5px;
       margin-bottom: 1.1rem; }
.door:nth-child(4n+2) .tag { color: var(--slate); background: var(--slate-tint); }
.door:nth-child(4n+3) .tag { color: var(--sage-ink); background: var(--sage-tint); }
.door:nth-child(4n+4) .tag { color: var(--moss-ink); background: var(--moss-tint); }
.door h3 { margin-bottom: 0.6rem; color: var(--ink); }
.door p { font-size: 0.96rem; color: var(--muted); margin: 0 0 1.5rem; }
.go { font-family: var(--display); font-size: 0.9rem; font-weight: 700; color: var(--purple);
      margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }

/* --------------------------------------------------------------- pathway */

.pathway-head { max-width: 46ch; margin: 0 0 clamp(2.25rem, 5vw, 3.25rem); }
.pathway { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stage { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem 1.3rem; box-shadow: var(--shadow); }
.cool .stage { background: var(--paper-strong); }
.stage .node { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
               border-radius: 50%; background: var(--purple-tint); color: var(--purple);
               font-family: var(--display); font-weight: 800; font-size: 0.95rem; margin-bottom: 1rem; }
.stage:nth-child(4n+2) .node { background: var(--slate-tint); color: var(--slate); }
.stage:nth-child(4n+3) .node { background: var(--sage-tint); color: var(--sage-ink); }
.stage:nth-child(4n+4) .node { background: var(--moss-tint); color: var(--moss-ink); }
.stage.final { background: var(--purple); border-color: var(--purple); }
.stage.final .node { background: var(--paper); color: var(--purple); }
.stage.final h3, .stage.final p { color: var(--on-purple); }
.stage h3 { margin-bottom: 0.35rem; font-size: 1.08rem; }
.stage p { font-size: 0.9rem; color: var(--muted); margin: 0; }
.pathway-proof { margin-top: clamp(2rem, 4vw, 2.75rem); font-family: var(--display); font-size: 1.08rem;
                 color: var(--ink); font-weight: 700; }
.pathway-proof .g { color: var(--purple); }

/* Six-stage variant: the retail pathway. */
.pathway.six { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .pathway.six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .pathway, .pathway.six { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- people, credits */

.credit-group { margin-top: clamp(2.25rem, 4vw, 3rem); }
.credit-group h3 { font-family: var(--display); color: var(--purple); font-size: 0.85rem; font-weight: 700;
                   letter-spacing: 0; text-transform: none; margin-bottom: 1.1rem; }
.credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.credit-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
               padding: 1.3rem; display: flex; align-items: flex-start; gap: 0.9rem; box-shadow: var(--shadow); }
.cool .credit-card { background: var(--paper-strong); }
.credit-card .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--purple-tint);
                       color: var(--purple); display: grid; place-items: center; font-family: var(--display);
                       font-weight: 800; font-size: 0.82rem; flex: none; }
.credit-card:nth-child(4n+2) .avatar { background: var(--slate-tint); color: var(--slate); }
.credit-card:nth-child(4n+3) .avatar { background: var(--sage-tint); color: var(--sage-ink); }
.credit-card:nth-child(4n+4) .avatar { background: var(--moss-tint); color: var(--moss-ink); }
.who { min-width: 0; }
.credit-card .name { font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.credit-card .role { font-size: 0.84rem; color: var(--muted); margin: 0.15rem 0 0; }
.credit-card .story { font-size: 0.8rem; color: var(--muted); font-style: italic; margin: 0.45rem 0 0; }

/* ----------------------------------------------------------------- bands */

.manifesto { background: var(--band-purple); color: var(--band-text); text-align: center; }
.manifesto h2 { color: var(--band-text); max-width: 20ch; margin-inline: auto; margin-bottom: 1.25rem; }
.manifesto p { color: var(--band-text-purple); max-width: 56ch; margin: 0 auto 1rem; font-size: 1.05rem; }
.manifesto .close { color: var(--band-text); font-family: var(--display); font-size: 1.15rem; font-weight: 700; margin-top: 1.4rem; }

.group .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 840px) { .group .wrap { grid-template-columns: 1fr; } }
.group-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.group-list li { position: relative; padding-left: 1.75rem; margin-bottom: 0.9rem; color: var(--body); }
.group-list li::before { content: ""; position: absolute; left: 0; top: 0.4em; width: 10px; height: 10px;
                         border-radius: 50%; background: var(--green); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem 1.4rem; box-shadow: var(--shadow); }
.cool .stat { background: var(--paper-strong); }
.stat .n { font-family: var(--display); font-size: clamp(2.1rem, 4.3vw, 2.75rem); font-weight: 800;
           color: var(--purple); line-height: 1; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 0.86rem; color: var(--muted); margin-top: 0.55rem; line-height: 1.4; }

.final:not(.stage) { background: var(--band-ink); color: var(--band-text); text-align: center; }
.final:not(.stage) .index-tag, .final:not(.stage) .eyebrow { justify-content: center; }
.final:not(.stage) h2 { color: var(--band-text); max-width: 22ch; margin-inline: auto; margin-bottom: 1.1rem; }
.final:not(.stage) p { color: var(--band-text-muted); max-width: 50ch; margin: 0 auto 2rem; }
.final:not(.stage) .hero-cta { justify-content: center; margin-top: 0; }
.final:not(.stage) .btn-invert, .final:not(.stage) .btn-white { border-color: #FFFFFF; }

footer { background: var(--paper-strong); color: var(--muted); border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
               gap: 1.25rem; padding-block: 1.8rem; }
.foot-note { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.02em;
             text-transform: uppercase; opacity: 0.75; }

/* ------------------------------------------------------ talent pool form */

.form-layout .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 880px) { .form-layout .wrap { grid-template-columns: 1fr; } }

.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
             padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--shadow); }
.cool .form-card, .cool .aside-card { background: var(--paper-strong); }
.form-note { background: var(--purple-tint); border: 1px solid #D8CEEE; border-radius: 8px;
             padding: 0.9rem 1.15rem; font-size: 0.94rem; color: var(--ink); margin-bottom: 1.6rem; }

.field { margin-bottom: 1.15rem; }
.field label { display: block; font-family: var(--display); font-size: 0.88rem; font-weight: 700;
               color: var(--ink); margin-bottom: 0.4rem; }
.field .opt { font-family: var(--sans); font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.72rem 0.9rem;
  transition: border-color .14s ease, box-shadow .14s ease; }
.field textarea { min-height: 110px; resize: vertical; }
.field select { appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--purple) 50%),
                    linear-gradient(135deg, var(--purple) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border: 1px solid var(--purple); box-shadow: 0 0 0 3px var(--purple-tint); }
.field.bad input, .field.bad select, .field.bad textarea { border: 1px solid var(--bad); box-shadow: 0 0 0 3px rgba(179,38,30,.10); }
.field .err { display: none; font-size: 0.84rem; font-weight: 700; color: var(--bad); margin-top: 0.35rem; }
.field.bad .err { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { margin-top: 1.6rem; }
.form-actions .btn[disabled] { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }
.consent { font-size: 0.85rem; color: var(--muted); margin: 1rem 0 0; max-width: 46ch; }
.form-fail { display: none; margin-top: 1.1rem; font-size: 0.92rem; font-weight: 700; color: var(--bad); }
.form-fail.show { display: block; }
.form-live.hide { display: none; }

.aside-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.8rem 1.7rem; box-shadow: var(--shadow); }
.aside-card h3 { margin-bottom: 1rem; }
.aside-card .group-list { margin-top: 0; }
.aside-card .group-list li { font-size: 0.95rem; color: var(--muted); }

.success { display: none; }
.success.show { display: block; }
.success .tick { width: 52px; height: 52px; border-radius: 50%; background: var(--purple);
                 color: var(--on-purple); display: grid; place-items: center; margin-bottom: 1.3rem; }
.success .tick svg { width: 26px; height: 26px; }
.success h2 { margin-bottom: 0.9rem; }

/* ---------------------------------------------------- gated document page */

.doc-band { background: var(--indigo); color: var(--band-text); }
.doc-band .wrap { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.doc-band h1 { color: var(--band-text); max-width: 22ch; }
.doc-band p { color: var(--band-text-purple); max-width: 56ch; margin-top: 1.2rem; }

.phase { border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2.2rem);
         margin-bottom: 1.25rem; background: var(--paper); box-shadow: var(--shadow); }
.phase-head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.phase-head .n { font-family: var(--display); font-size: 0.76rem; font-weight: 800; letter-spacing: 0;
                 text-transform: none; color: var(--indigo); background: var(--indigo-tint);
                 border-radius: 999px; padding: 0.3rem 0.75rem; }
.phase .quote { font-size: 1.05rem; font-weight: 600; color: var(--ink); font-style: italic; margin: 0.9rem 0 1.4rem; }
.phase h4 { font-family: var(--display); font-size: 0.82rem; font-weight: 800; letter-spacing: 0;
            text-transform: none; color: var(--purple); margin: 1.4rem 0 0.6rem; }
.phase ul { margin: 0; padding-left: 1.15rem; }
.phase li { margin-bottom: 0.4rem; }
.gate { margin-top: 1.5rem; background: var(--sage-tint); border: 1px solid #CBDCCE; border-radius: 8px;
        padding: 0.85rem 1.1rem; font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 0.96rem; }
.scorecard { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.scorecard .sc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.5rem; box-shadow: var(--shadow); }
.scorecard .sc h4 { font-size: 0.98rem; color: var(--ink); font-weight: 700; margin: 0 0 0.6rem; }
.scorecard .sc ul { margin: 0; padding-left: 1.1rem; font-size: 0.93rem; color: var(--muted); }
.doc-print { margin-top: 2.5rem; }

@media print {
  nav, footer, .doc-print, .nav-toggle, .awning { display: none !important; }
  .phase, .scorecard .sc { break-inside: avoid; }
}

/* --------------------------------------------------------------- a11y    */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .door, .arrow, .nav-links a, .feature, .field input, .field select, .field textarea { transition: none; }
  .btn-primary:hover, .btn-invert:hover, .btn-white:hover, .door:hover { transform: none; }
}
:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }