/* ============================================================
   CONSUMERS PAGE — White Tuxedo v3
   White canvas + sage graph-paper (from body), near-black ink,
   PBRX Blue #08A4F3 primary, Sage #66784F secondary,
   hairline rules, generous whitespace, serif display headings.
   ============================================================ */

.cs-hero{padding:calc(var(--navh) + 48px) 0 44px}
/* mini hero photo band sits above the hero — drop the nav offset below it */
.phead-photo + .cs-hero{padding-top:48px}
.cs-hero h1{max-width:840px;margin-bottom:24px}
.cs-hero-copy p{font-size:17.5px;line-height:1.6;max-width:680px;margin-bottom:12px}
.cs-eyebrow{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.cs-dot{width:7px;height:7px;border-radius:50%;background:#08A4F3;flex:0 0 auto}
.cs-ghostlink{font-size:15px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.cs-ghostlink:hover{color:var(--ink);border-color:var(--ink)}
.cs-kicker{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:14px}
.cs-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:#08A4F3;flex:0 0 auto}

/* navy bands — blue-tinted sheer glass chips, never grey-on-dark */
.cs-navy{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:56px 26px;background:#0A121F}
.cs-navy h2{color:#FFFFFF}
.cs-navy p{color:rgba(255,255,255,.82)}
.cs-lead{font-size:17.5px;max-width:680px}
.cs-chipgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.cs-chip{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:400;color:#FFFFFF;background:rgba(8,164,243,.10);border:1px solid rgba(8,164,243,.35);border-radius:10px;padding:13px 15px;line-height:1.4}
.cs-chip svg{color:#08A4F3;width:17px;height:17px;flex-shrink:0}
.cs-close{font-size:17px;color:#FFFFFF;margin-top:20px;max-width:680px}

/* editorial cards — white, hairline, soft shadow, blue serif numerals */
.cs-num{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:44px;line-height:1;color:#08A4F3;margin-bottom:12px}

/* directory moment — copy left, white form card right */
.cs-duo{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.cs-formcard{background:#FFFFFF;border:1px solid rgba(10,14,19,.10);border-top:2px solid #08A4F3;border-radius:16px;padding:26px;box-shadow:0 24px 48px rgba(10,14,19,.10),0 2px 8px rgba(10,14,19,.04)}
.cs-formtitle{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.cs-formtitle::before{content:"";width:7px;height:7px;border-radius:50%;background:#08A4F3;flex:0 0 auto}
.cs-fine{font-size:12px;color:var(--faint);margin:12px 0 0;line-height:1.5}

/* five hairline rows — blue serif numerals */
.cs-rows{margin-top:8px}
.cs-row{display:flex;gap:22px;align-items:flex-start;padding:20px 0;border-top:1px solid var(--line)}
.cs-row .cs-num{font-size:38px;margin:0;min-width:34px;flex-shrink:0}
.cs-row h3{font-size:24px;margin-bottom:6px}
.cs-row p{margin:0}

/* final word */
.cs-finalline{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(30px,4vw,44px);line-height:1.15;color:var(--ink);margin:26px auto;max-width:720px}
.cs-finalline em{font-style:italic;color:#08A4F3}

/* hero photo band — desktop keeps the slim shoe-level crop */
.phead-photo img{object-position:50% 92%}
/* mobile: mid-height band (not mini, not full) so the full couple shows — faces through her nylons and shoes */
@media(max-width:900px){.phead-photo img{height:300px;object-position:50% 60%}}
@media(max-width:900px){.cs-chipgrid{grid-template-columns:1fr 1fr}.cs-duo{grid-template-columns:1fr}}
@media(max-width:600px){.cs-chipgrid{grid-template-columns:1fr}.cs-row{gap:14px}}

/* ============================================================
   CONSUMERS v2 — advocacy funnel
   Full-bleed hero, reported-record clip wall, market curve,
   at-home testing stage-setter, advocacy opt-in.
   Borrows the back-end system palette (deep ink + cyan/teal)
   only on dark surfaces — the white product line stays untouched.
   ============================================================ */

/* ---------- hero ---------- */
.csv-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:calc(100svh - var(--navh));display:flex;align-items:flex-end;overflow:hidden;background:#070A0E}
.csv-hero .csv-bg{position:absolute;inset:0;z-index:0}
.csv-hero .csv-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.csv-hero .csv-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,10,14,.62) 0%,rgba(7,10,14,.30) 34%,rgba(7,10,14,.86) 82%,#070A0E 100%),
  radial-gradient(60% 50% at 12% 88%,rgba(8,164,243,.24),transparent 70%),
  radial-gradient(50% 45% at 92% 10%,rgba(13,148,136,.18),transparent 70%)}
.csv-hero .csv-in{position:relative;z-index:1;width:100%;max-width:1060px;margin:0 auto;padding:calc(var(--navh) + 90px) 26px 56px}
.csv-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:7px 14px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.csv-eyebrow i{width:7px;height:7px;border-radius:50%;background:#08A4F3;flex:0 0 auto}
.csv-h1{margin:0 0 18px;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(38px,6vw,74px);line-height:1.04;color:#FFFFFF;max-width:900px}
.csv-h1 em{font-style:italic;color:#22C7E8}
.csv-lede{font-size:18px;line-height:1.6;color:rgba(255,255,255,.84);max-width:600px;margin:0 0 28px}
.csv-lede b{color:#FFFFFF;font-weight:500}
.csv-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.csv-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:9px;border:1px solid #0885D2;background:#0885D2;color:#FFFFFF;font-family:Inter,sans-serif;font-size:16px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .2s ease}
.csv-btn:hover{background:#0670B3}
.csv-btn .icon{width:17px;height:17px}
.csv-btn2{display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:14px 22px;border-radius:9px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#FFFFFF;font-size:15px;text-decoration:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .2s ease}
.csv-btn2:hover{background:rgba(255,255,255,.16)}
.csv-facts{display:flex;flex-wrap:wrap;gap:0;margin:38px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.csv-facts div{flex:1 1 190px;padding:18px 22px 0 0}
.csv-facts b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:31px;line-height:1;color:#22C7E8}
.csv-facts span{display:block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);line-height:1.45}
@media(max-width:900px){
  .csv-hero{min-height:0}
  .csv-hero .csv-in{padding:calc(var(--navh) + 56px) 20px 40px}
  .csv-lede{max-width:none}
  .csv-facts div{flex:1 1 45%}
}

/* ---------- the reported record — clip wall ---------- */
.csv-clips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 0}
.csv-clip{position:relative;background:#FFFFFF;border:1px solid rgba(10,14,19,.10);border-left:3px solid #B3261E;border-radius:12px;padding:20px 22px;box-shadow:0 18px 40px -22px rgba(10,14,19,.22)}
.csv-src{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#B3261E}
.csv-src i{width:5px;height:5px;border-radius:50%;background:#B3261E;flex:0 0 auto}
.csv-clip h4{margin:0 0 9px;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:22px;line-height:1.18;color:#0A0E13}
.csv-clip p{margin:0;font-size:14px;line-height:1.58;color:#4D504D;max-width:none}
.csv-clipnote{margin:20px 0 0;font-size:12.5px;font-style:italic;color:var(--faint)}
@media(max-width:1000px){.csv-clips{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.csv-clips{grid-template-columns:1fr}}

/* ---------- market curve ---------- */
.csv-mkt{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:26px 0 0;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.16)}
.csv-mtile{background:#212B36;padding:24px 24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.csv-mtile b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:42px;line-height:1;color:#22C7E8}
.csv-mtile span{display:block;margin-top:10px;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.66);line-height:1.5}
.csv-mline{margin:24px 0 0;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(21px,2.5vw,29px);line-height:1.3;color:#FFFFFF;max-width:820px}
@media(max-width:800px){.csv-mkt{grid-template-columns:1fr}}

/* ---------- at-home testing stage-setter ---------- */
.csv-kits{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 0}
.csv-kit{background:#FFFFFF;border:1px solid rgba(10,14,19,.10);border-top:2px solid #0D9488;border-radius:14px;padding:24px 26px;box-shadow:0 18px 40px -22px rgba(10,14,19,.18)}
.csv-kbadge{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 12px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#0D9488;background:rgba(13,148,136,.08);border:1px solid rgba(13,148,136,.3)}
.csv-kit h3{margin:0 0 10px;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-style:italic;font-size:26px;line-height:1.14;color:#0A0E13}
.csv-kit p{margin:0;font-size:14.5px;line-height:1.6;color:#4D504D;max-width:none}
.csv-kit ul{list-style:none;margin:14px 0 0}
.csv-kit li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14px;line-height:1.5;color:#2B333C;border-top:1px solid rgba(10,14,19,.08)}
.csv-kit li:first-child{border-top:none}
.csv-kit li svg{width:16px;height:16px;color:#0D9488;margin-top:3px;flex:0 0 auto}
@media(max-width:800px){.csv-kits{grid-template-columns:1fr}}

/* ---------- advocacy opt-in ---------- */
.csv-adv{position:relative;width:100vw;margin-left:calc(50% - 50vw);padding:70px 26px 80px;background:#070A0E;overflow:hidden}
.csv-adv::before{content:"";position:absolute;left:50%;top:0;width:min(900px,120vw);height:460px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 40%,rgba(8,164,243,.20),transparent 72%);pointer-events:none}
.csv-advin{position:relative;z-index:1;max-width:900px;margin:0 auto}
.csv-advhead{text-align:center;margin:0 auto 30px;max-width:660px}
.csv-advhead .csv-eyebrow{margin-bottom:18px}
.csv-advhead h2{color:#FFFFFF;margin:0 auto 14px;font-size:clamp(30px,4.4vw,50px);max-width:640px}
.csv-advhead h2 em{font-style:italic;color:#22C7E8}
.csv-advhead p{color:rgba(255,255,255,.78);font-size:17px;line-height:1.6;margin:0 auto;max-width:540px}
.csv-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:32px 34px 30px;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 40px 90px -34px rgba(0,0,0,.6)}
.csv-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.csv-f{display:block}
.csv-f label{display:block;margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.csv-f input,.csv-f select,.csv-f textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#FFFFFF;font-family:Inter,sans-serif;font-size:16px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s ease,background .2s ease}
.csv-f textarea{min-height:76px;resize:vertical}
.csv-f input:focus,.csv-f select:focus,.csv-f textarea:focus{border-color:#22C7E8;background:rgba(255,255,255,.1)}
.csv-f input::placeholder,.csv-f textarea::placeholder{color:rgba(255,255,255,.42)}
.csv-f select{padding-right:36px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2322C7E8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.csv-f select option{color:#0A0E13}
.csv-wide{grid-column:1 / -1}
.csv-checks{margin:22px 0 0;display:grid;gap:12px}
.csv-check{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82);cursor:pointer}
.csv-check input{margin-top:2px;width:17px;height:17px;accent-color:#22C7E8;flex:0 0 auto}
.csv-err{margin:14px 0 0;min-height:0;font-size:14px;color:#FF9E96}
.csv-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:22px 0 0;min-height:56px;padding:14px 26px;border-radius:9px;border:1px solid #0885D2;background:#0885D2;color:#FFFFFF;font-family:Inter,sans-serif;font-size:17px;font-weight:600;cursor:pointer;transition:background .2s ease}
.csv-go:hover{background:#0670B3}
.csv-go:disabled{opacity:.6;cursor:default}
.csv-go .icon{width:17px;height:17px}
.csv-note{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.55);text-align:center;max-width:none}
.csv-done{text-align:center;padding:26px 0 14px}
.csv-done .icon{width:40px;height:40px;color:#22C7E8;margin:0 auto 14px}
.csv-done h3{margin:0 0 10px;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:31px;color:#FFFFFF}
.csv-done p{margin:0 auto;max-width:440px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.78)}
@media(max-width:640px){
  .csv-adv{padding:52px 20px 64px}
  .csv-card{padding:24px 20px 26px;border-radius:16px}
  .csv-grid{grid-template-columns:1fr}
}

/* Two-tier associate note — grounds the lifestyle imagery in real roles */
.opp-tiers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 4px}
.opp-tiers .tier{border:1px solid rgba(10,14,19,.10);border-radius:14px;background:rgba(255,255,255,.66);padding:20px 22px;box-shadow:0 10px 26px rgba(10,14,19,.07)}
.opp-tiers .tier b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#0C5484;margin-bottom:6px}
.opp-tiers .tier h4{font-size:18px;margin:0 0 8px}
.opp-tiers .tier p{margin:0;font-size:15px;max-width:none}
@media(max-width:760px){.opp-tiers{grid-template-columns:1fr}}

/* ===== OPPORTUNITY — THE JOURNEY: statement hero, compact film, stepped rail, steel glass cards ===== */
#pg-associates{--acc:#0A66C9;--acc2:#0D9488}
.opj-hero{position:relative;padding:calc(var(--navh) + 46px) 0 44px;background:radial-gradient(820px 520px at 88% 4%,rgba(13,148,136,.16),transparent 68%),radial-gradient(760px 480px at 10% 0%,rgba(10,102,201,.14),transparent 66%),linear-gradient(180deg,#FFFFFF 0%,#EFF5FA 100%);border-bottom:1px solid var(--line);overflow:hidden}
.opj-in{max-width:1180px;margin:0 auto;padding:0 26px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,380px);gap:44px;align-items:start;box-sizing:border-box}
.opj-in>*{min-width:0}
.opj-rail{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.opj-eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 16px}
.opj-eyebrow i{display:block;width:26px;height:2px;background:linear-gradient(90deg,var(--acc),var(--acc2));flex:none}
.opj-h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(34px,3.4vw,50px);line-height:1.08;color:var(--ink);margin:0 0 18px;max-width:16em}
.opj-h1 em{font-style:italic;color:var(--acc)}
.opj-lede{font-size:17px;line-height:1.62;color:var(--muted);max-width:38em;margin:0 0 14px}
.opj-quote{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:20px;line-height:1.45;color:var(--ink);border-left:3px solid var(--acc2);padding-left:16px;margin:18px 0 20px;max-width:34em}
.opj-facts{display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:10px;margin:0}
.opj-facts span{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0A2540;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(233,244,252,.85));border:1px solid rgba(10,102,201,.28);border-radius:10px;padding:11px 13px;box-shadow:0 8px 20px -12px rgba(10,102,201,.4)}
.opj-facts span::before{content:"";width:6px;height:6px;border-radius:99px;background:linear-gradient(180deg,var(--acc),var(--acc2));flex:none}
/* hero comes on strong: big numerals right under the lede */
.opj-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:22px 0 20px;border-top:1px solid rgba(10,102,201,.24);border-bottom:1px solid rgba(10,102,201,.24)}
.opj-stats div{padding:16px 18px 16px 0}
.opj-stats div+div{padding-left:18px;border-left:1px solid rgba(10,102,201,.16)}
.opj-stats b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(30px,3.4vw,42px);line-height:1;background:linear-gradient(160deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.opj-stats span{display:block;margin-top:8px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3E5568;line-height:1.4}
@media(max-width:520px){.opj-stats div{padding:13px 10px 13px 0}.opj-stats b{font-size:26px}.opj-stats span{font-size:9.5px}}
@media(max-width:520px){.opj-facts{grid-template-columns:1fr}}
/* Onyx Panel — hero card with the film nested inside it (card-in-card) */
.opj-film{width:100%;margin:0 0 10px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0A0E13;position:relative}
.opj-film video{display:block;width:100%;aspect-ratio:4/5;max-height:300px;object-fit:cover;object-position:50% 25%}
.opj-film .vunmute{position:absolute;bottom:8px;right:8px;left:auto;padding:5px 9px;font-size:9px;letter-spacing:.08em;border-radius:6px;border-color:rgba(255,255,255,.35);background:rgba(10,14,19,.6)}
.opj-filmcap{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 16px}
.opj-form{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:#0A0E13;box-shadow:0 24px 56px -30px rgba(10,14,19,.45);padding:16px 16px 20px;position:relative;overflow:hidden}
.opj-form h3{color:#FFFFFF}
.opj-form .opj-formsub{color:rgba(255,255,255,.7)}
.opj-form.dfm-card.jf label,.opj-form.jf label,.opj-form.jf .jfl{color:rgba(255,255,255,.65)}
.opj-form.jf input,.opj-form.jf select,.opj-form.jf textarea{width:100%;margin-top:8px;min-height:46px;padding:12px 14px;border-radius:10px;font-family:Inter,sans-serif;font-size:16px;outline:none;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:#FFFFFF}
.opj-form.jf input:focus,.opj-form.jf select:focus,.opj-form.jf textarea:focus{background:rgba(255,255,255,.09);border-color:#08A4F3;box-shadow:none}
.opj-form .proofstrip span{color:rgba(255,255,255,.8);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.opj-form .dfm-done h4{color:#FFFFFF}
.opj-form .dfm-done p{color:rgba(255,255,255,.75)}
#pg-associates .opj-form .proofstrip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
#pg-associates .opj-form .proofstrip span{color:rgba(255,255,255,.82)}
#pg-associates .opj-form .dfm-go,#pg-associates .opj-form .btn.sage{background:#0885D2;border:1px solid #0885D2;color:#FFFFFF;font-weight:600;border-radius:8px;box-shadow:none;width:100%}
#pg-associates .opj-form .dfm-go::before{display:none}
#pg-associates .opj-form .dfm-go:hover{background:#0670B3;color:#FFFFFF;filter:none}
#pg-associates .opj-form .jf-err{color:#FF9E96}
/* Legibility on the onyx fill — bright labels, readable helper copy */
#pg-associates .opj-form .opj-formsub{color:rgba(255,255,255,.86);font-size:14.5px}
#pg-associates .opj-hero .opj-filmcap{color:rgba(255,255,255,.72)}
#pg-associates .opj-form.jf label,#pg-associates .opj-form.jf .jfl{color:#FFFFFF;font-size:11.5px;letter-spacing:.09em}
#pg-associates .opj-form.jf input,#pg-associates .opj-form.jf select,#pg-associates .opj-form.jf textarea{background:#161D26;border-color:rgba(255,255,255,.28);color:#FFFFFF}
#pg-associates .opj-form.jf input::placeholder,#pg-associates .opj-form.jf textarea::placeholder{color:rgba(255,255,255,.55)}
#pg-associates .opj-form h3{font-size:21px}

/* Full Onyx hero — the whole panel, not just the card */
#pg-associates .opj-hero{background:#0A0E13;border-bottom:1px solid rgba(255,255,255,.10)}
#pg-associates .opj-hero .opj-h1{color:#FFFFFF}
#pg-associates .opj-hero .opj-h1 em{color:#08A4F3}
#pg-associates .opj-hero .opj-eyebrow{color:#08A4F3}
#pg-associates .opj-hero .opj-eyebrow i{background:#08A4F3}
#pg-associates .opj-hero .opj-lede{color:rgba(255,255,255,.78)}
#pg-associates .opj-hero .opj-lede b{color:#FFFFFF}
#pg-associates .opj-hero .opj-quote{color:#FFFFFF;border-left-color:#08A4F3}
#pg-associates .opj-hero .opj-stats{border-top-color:rgba(255,255,255,.14);border-bottom-color:rgba(255,255,255,.14)}
#pg-associates .opj-hero .opj-stats div+div{border-left-color:rgba(255,255,255,.12)}
#pg-associates .opj-hero .opj-stats b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#08A4F3}
#pg-associates .opj-hero .opj-stats span{color:rgba(255,255,255,.6)}
#pg-associates .opj-hero .opj-facts span{color:rgba(255,255,255,.85);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);box-shadow:none}
#pg-associates .opj-hero .opj-facts span::before{background:#08A4F3}
#pg-associates .opj-hero .opj-form{border-color:rgba(255,255,255,.16);background:#0D1218}
#pg-associates .opj-hero .opj-film{background:#151C24;border-color:rgba(255,255,255,.20)}
/* Desktop: the rail card ends level with the left column — bottoms line up */
@media(min-width:981px){
  #pg-associates .opj-hero .opj-in{align-items:stretch}
  #pg-associates .opj-hero .opj-rail{height:100%}
  #pg-associates .opj-hero .opj-form{height:100%;display:flex;flex-direction:column}
  #pg-associates .opj-hero .opj-form .dfm-lead{display:flex;flex-direction:column;flex:1 1 auto}
  #pg-associates .opj-hero .opj-form .proofstrip{margin-top:auto}
}
.opj-form input,.opj-form select,.opj-form textarea{max-width:100%}
.opj-band{margin:22px 0 6px;border-radius:16px;overflow:hidden;border:1px solid rgba(10,102,201,.18);box-shadow:0 18px 44px -24px rgba(10,14,19,.3)}
.opj-band img{display:block;width:100%;height:250px;object-fit:cover;background:#ECEEE9}
@media(max-width:700px){.opj-band img{height:180px}}
.opj-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 6px}
.opj-duo figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(10,102,201,.18);box-shadow:0 18px 44px -24px rgba(10,14,19,.3)}
.opj-duo img{display:block;width:100%;height:230px;object-fit:cover;background:#ECEEE9}
@media(max-width:700px){.opj-duo{grid-template-columns:1fr}.opj-duo img{height:190px}}
.opj-form h3{font-size:19px;margin:0 0 4px}
.opj-form .opj-formsub{font-size:13.5px;color:var(--faint);margin:0 0 14px}
.opj-step{position:relative;padding-left:58px}
.opj-step::before{content:attr(data-step);position:absolute;left:0;top:34px;width:38px;height:38px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.04em;color:#fff;background:linear-gradient(160deg,var(--acc),var(--acc2));border:none;box-shadow:0 10px 22px -8px rgba(10,102,201,.6)}
.opj-step::after{content:"";position:absolute;left:19px;top:78px;bottom:0;width:2px;background:linear-gradient(180deg,rgba(10,102,201,.45),rgba(13,148,136,.18),rgba(10,14,19,.05))}
.opj-steplab{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 8px}
@media(max-width:760px){.opj-step{padding-left:0}.opj-step::before{position:static;margin-bottom:12px}.opj-step::after{display:none}}
#pg-associates .card.sheer,#pg-associates .ent-tile,#pg-associates .econ-tile,#pg-associates .opp-tiers .tier{position:relative;overflow:hidden;border:1px solid rgba(10,102,201,.22);border-radius:16px;background:linear-gradient(180deg,#FFFFFF,#EEF6FB);box-shadow:0 1px 2px rgba(10,14,19,.04),0 18px 44px -22px rgba(10,102,201,.34);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
#pg-associates .card.sheer::before,#pg-associates .ent-tile::before,#pg-associates .econ-tile::before,#pg-associates .opp-tiers .tier::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--acc),var(--acc2))}
#pg-associates .card.sheer:hover,#pg-associates .ent-tile:hover,#pg-associates .econ-tile:hover,#pg-associates .opp-tiers .tier:hover{transform:translateY(-4px);border-color:rgba(10,102,201,.48);box-shadow:0 1px 2px rgba(10,14,19,.04),0 28px 62px -24px rgba(10,102,201,.42)}
#pg-associates .ent-tile .ent-k{color:var(--acc)}
#pg-associates .econ-n{color:var(--acc)}
#pg-associates .econ-n em{color:var(--acc2);font-style:normal}
#pg-associates .ibadge{color:#fff;background:linear-gradient(160deg,var(--acc),var(--acc2));border-color:transparent}
.opp-tiers{grid-template-columns:repeat(3,minmax(0,1fr))}
.opp-tiers{align-items:stretch}
.opp-tiers .tier{padding:24px 22px 22px;display:flex;flex-direction:column}
.opp-tiers .tier b{min-height:2.6em;display:flex;align-items:flex-start}
.opp-tiers .tier .tier-n{min-height:1.9em}
.opp-tiers .tier p{flex:1 1 auto}
/* warm the page up — no flat grey copy on the associate journey */
#pg-associates p,#pg-associates .opj-lede{color:#33414E}
#pg-associates .opj-filmcap,#pg-associates .econ-note{color:#5A6B78}
/* lifestyle trio — taller, warmer frames */
#pg-associates .joan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0 6px}
#pg-associates .joan figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(13,148,136,.28);box-shadow:0 20px 46px -24px rgba(10,14,19,.32)}
#pg-associates .joan img{display:block;width:100%;height:300px;object-fit:cover;background:#ECEEE9}
@media(max-width:760px){#pg-associates .joan{grid-template-columns:1fr}#pg-associates .joan img{height:230px}}
.opp-tiers .tier b{color:var(--acc);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:8px}
.opp-tiers .tier .tier-n{display:block;font-family:'Instrument Serif',Georgia,serif;font-size:26px;color:var(--ink);margin:0 0 6px}
.opp-tiers .tier.mid{border-color:rgba(13,148,136,.5);background:linear-gradient(180deg,#FFFFFF,#EAF7F4);box-shadow:0 1px 2px rgba(10,14,19,.05),0 24px 56px -22px rgba(13,148,136,.42)}
.opp-tiers .tier.mid b{color:var(--acc2)}
@media(max-width:900px){.opp-tiers{grid-template-columns:1fr}}
/* Closing card — same construction as the approved demo panel: flat #0A0E13, hairline
   white borders, one flat #08A4F3 accent, solid #0885D2 button. No gradients, no glow. */
.opj-close{margin:40px 0 0;border-radius:20px;padding:0;background:#0A0E13;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 56px -30px rgba(10,14,19,.45)}
.oc-mid{border:none;background:none;padding:0;border-radius:0}
.oc-core{border:none;border-radius:20px;padding:40px 34px 34px;text-align:center;background:transparent}
.oc-kick{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:7px 13px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#FFFFFF;background:#0885D2;border:1px solid #0885D2}
.oc-kick i{width:7px;height:7px;border-radius:50%;background:#FFFFFF;flex:0 0 auto}
.opj-close h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(30px,3.1vw,42px);line-height:1.06;letter-spacing:-.01em;color:#FFFFFF;margin:0 0 14px}
#pg-associates .opj-close .oc-p,.opj-close .oc-p{color:rgba(255,255,255,.92);font-size:15px;line-height:1.62;max-width:600px;margin:0 auto 24px}
.oc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 30px;border:1px solid #0885D2;border-radius:8px;background:#0885D2;color:#FFFFFF;font-family:Inter,sans-serif;font-size:17px;font-weight:600;text-decoration:none;transition:background .2s ease}
.oc-btn:hover{background:#0670B3}
.oc-btn .icon{width:17px;height:17px;transition:transform .22s ease}
.oc-btn:hover .icon{transform:translateX(4px)}
.oc-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0 0}
.oc-strip span{padding:14px 13px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9);line-height:1.4}
@media(max-width:600px){.opj-close{border-radius:16px}.oc-core{padding:28px 18px 24px}.oc-btn{width:100%}.oc-strip{grid-template-columns:1fr}}
@media(max-width:980px){.opj-in{grid-template-columns:minmax(0,1fr);gap:28px}}
@media(max-width:430px){.opj-in{padding:0 18px}.opj-h1{font-size:30px}.opj-lede{font-size:16px}.opj-form{padding:20px 16px}.opj-quote{font-size:18px}}

/* Opportunity pay + economics cards — approved demo-panel construction, nothing added */
#pg-associates .opp-engine .card.sheer,
#pg-associates .econ .econ-tile{
  background:#0A0E13;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 56px -30px rgba(10,14,19,.45)}
#pg-associates .opp-engine .card.sheer::before,
#pg-associates .econ .econ-tile::before{display:none}
#pg-associates .opp-engine .card.sheer h4,
#pg-associates .econ .econ-tile .econ-l{color:#FFFFFF}
#pg-associates .opp-engine .card.sheer p,
#pg-associates .econ .econ-tile .econ-d{color:rgba(255,255,255,.78)}
#pg-associates .opp-engine .card.sheer .file{color:rgba(255,255,255,.58)}
#pg-associates .opp-engine .card.sheer .ibadge{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#08A4F3}
#pg-associates .econ .econ-tile .econ-n,
#pg-associates .econ .econ-tile .econ-n em{color:#08A4F3;background:none;-webkit-background-clip:border-box;background-clip:border-box}
#pg-associates .opp-engine .card.sheer:hover,
#pg-associates .econ .econ-tile:hover{transform:none;border-color:rgba(255,255,255,.24);box-shadow:0 24px 56px -30px rgba(10,14,19,.45)}

/* Tier cards — Onyx Panel */
#pg-associates .opp-tiers .tier,#pg-associates .opp-tiers .tier.mid{background:#0A0E13;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 56px -30px rgba(10,14,19,.45)}
#pg-associates .opp-tiers .tier::before{display:none}
#pg-associates .opp-tiers .tier b,#pg-associates .opp-tiers .tier.mid b{color:#08A4F3}
#pg-associates .opp-tiers .tier .tier-n{color:#FFFFFF}
#pg-associates .opp-tiers .tier p{color:rgba(255,255,255,.78)}
#pg-associates .opp-tiers .tier:hover{transform:none;border-color:rgba(255,255,255,.24);box-shadow:0 24px 56px -30px rgba(10,14,19,.45)}

/* Enterprise tiles — Onyx Panel */
#pg-associates .ent .ent-tile{background:#0A0E13;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 56px -30px rgba(10,14,19,.45)}
#pg-associates .ent .ent-tile::before{display:none}
#pg-associates .ent .ent-tile .ent-k{color:#08A4F3}
#pg-associates .ent .ent-tile h4{color:#FFFFFF}
#pg-associates .ent .ent-tile p{color:rgba(255,255,255,.78)}
#pg-associates .ent .ent-tile:hover{transform:none;border-color:rgba(255,255,255,.24);box-shadow:0 24px 56px -30px rgba(10,14,19,.45)}

/* Sitewide lifestyle trio — the actual life, not just the grind */
.life-trio{margin:26px 0 0}
.life-trio .lt-lead{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(20px,2.4vw,28px);line-height:1.32;color:var(--ink);margin:0 0 18px;max-width:32em}
.life-trio .lt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.life-trio figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(13,148,136,.28);box-shadow:0 20px 46px -24px rgba(10,14,19,.32)}
.life-trio img{display:block;width:100%;height:280px;object-fit:cover;background:#ECEEE9}
@media(max-width:760px){.life-trio .lt-grid{grid-template-columns:1fr}.life-trio img{height:220px}}

/* Approved branded product duo — clean proportioned containers, site grid */
.pbx-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.pbx-duo figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid rgba(10,14,19,.10);box-shadow:0 18px 40px rgba(10,14,19,.10)}
.pbx-duo img{display:block;width:100%;height:340px;object-fit:cover}
@media(max-width:820px){.pbx-duo{grid-template-columns:1fr;gap:18px}.pbx-duo img{height:240px}}

/* ============================================================
   PLATFORM — ONYX COMMAND HERO
   Flat #0A0E13 ink, hairline white borders, one flat #08A4F3
   accent, solid #0885D2 buttons. No gradients, no glow.
   ============================================================ */
.pfh{position:relative;width:100vw;margin-left:calc(50% - 50vw);background:#0A0E13;border-bottom:1px solid rgba(255,255,255,.10);padding:calc(var(--navh) + 46px) 0 44px}
.pfh-in{max-width:1180px;margin:0 auto;padding:0 26px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,460px);gap:44px;align-items:stretch;box-sizing:border-box}
.pfh-in>*{min-width:0}
.pfh-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:7px 13px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#FFFFFF;background:#0885D2;border:1px solid #0885D2}
.pfh-eyebrow i{width:7px;height:7px;border-radius:50%;background:#FFFFFF;flex:0 0 auto}
.pfh-h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(34px,3.6vw,52px);line-height:1.06;color:#FFFFFF;margin:0 0 18px;max-width:17em}
.pfh-h1 em{font-style:italic;color:#08A4F3}
.pfh-lede{font-size:17px;line-height:1.62;color:rgba(255,255,255,.82);max-width:38em;margin:0 0 16px}
.pfh-lede b{color:#FFFFFF;font-weight:500}
.pfh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0 22px;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.pfh-stats div{padding:16px 16px 16px 0}
.pfh-stats div+div{padding-left:16px;border-left:1px solid rgba(255,255,255,.12)}
.pfh-stats b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1;color:#08A4F3}
.pfh-stats span{display:block;margin-top:8px;font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1.4}
.pfh-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:0 0 20px}
.pfh-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 28px;border-radius:8px;border:1px solid #0885D2;background:#0885D2;color:#FFFFFF;font-family:Inter,sans-serif;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .2s ease}
.pfh-btn:hover{background:#0670B3}
.pfh-btn .icon{width:17px;height:17px}
.pfh-btn2{display:inline-flex;align-items:center;gap:9px;min-height:54px;padding:14px 22px;border-radius:8px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.05);color:#FFFFFF;font-size:15px;text-decoration:none;transition:background .2s ease}
.pfh-btn2:hover{background:rgba(255,255,255,.12)}
.pfh-chips{display:flex;flex-wrap:wrap;gap:8px}
.pfh-chips span{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:8px;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16)}
.pfh-chips span::before{content:"";width:6px;height:6px;border-radius:99px;background:#08A4F3;flex:none}
.pfh-rail{border:1px solid rgba(255,255,255,.16);border-radius:18px;background:#11171F;padding:16px;display:flex;flex-direction:column;gap:12px}
.pfh-railhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:2px 4px 0}
.pfh-railhead b{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF}
.pfh-railhead span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.pfh-mods{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pfh-mod{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:5px;align-items:start;padding:13px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:#212B36;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .2s ease,background .2s ease}
.pfh-mod:hover{border-color:rgba(8,164,243,.6);background:#27333F}
.pfh-mod span{color:rgba(255,255,255,.8)}
.pfh-mod .icon{width:17px;height:17px;color:#08A4F3;flex:none;margin-top:2px}
.pfh-mod b{grid-column:2;font-size:13px;font-weight:600;line-height:1.2;color:#FFFFFF}
.pfh-mod span{grid-column:2;font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.66)}
.pfh-shot{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#161D26}
.pfh-shot img{display:block;width:100%;height:170px;object-fit:cover}
.pfh-earn{border:1px solid rgba(255,255,255,.22);border-radius:12px;background:#212B36;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);padding:14px}
.pfh-earn b{display:block;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#08A4F3;margin-bottom:7px}
.pfh-earn p{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.8);max-width:none}
.pfh-earn a{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#FFFFFF;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.pfh-earn a:hover{border-color:#08A4F3}
@media(max-width:1140px){.pfh-in{grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:30px}}
@media(max-width:980px){.pfh-in{grid-template-columns:minmax(0,1fr);gap:26px}.pfh-stats{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.pfh-in{padding:0 18px}.pfh-h1{font-size:31px}.pfh-btn,.pfh-btn2{width:100%}.pfh-mods{grid-template-columns:1fr}}
/* condensed standard strip */
.pfh-std{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pfh-std span{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border-radius:8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0A2540;background:#FFFFFF;border:1px solid rgba(10,102,201,.24)}
.pfh-std span::before{content:"";width:6px;height:6px;border-radius:99px;background:#0A66C9;flex:none}