/* Alaska's Caregivers — SEIU 775 Quality Care Committee
   Design system sampled directly from the 2026 mailer set. */

:root{
  --purple:#3D2780;
  --purple-deep:#2A1A5C;
  --purple-ink:#1C1240;
  --purple-lift:#7755B0;
  --orange:#F36025;
  --gold:#F3CA20;
  --paper:#FBF9F4;
  --paper-warm:#F2EDE3;
  --ink:#241a3f;

  --shell:1220px;
  --pad:clamp(20px,4vw,34px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:500;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- nav */
.nav{background:var(--purple-ink);color:#fff;position:sticky;top:0;z-index:40}
.nav .shell{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:66px}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;padding:10px 0}
.nav-brand img{
  width:38px;height:38px;object-fit:contain;flex:none;padding:5px;
  background:rgba(255,255,255,.1);border-radius:9px;
}
.nav-brand b{font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.15}
.nav-brand span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;color:#BCA9EE;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.nav-links a{
  text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#E4DBFA;padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--gold);border-bottom-color:var(--gold)}
@media(max-width:620px){
  .nav .shell{min-height:60px}
  .nav-links a{font-size:11.5px;letter-spacing:.05em}
  .nav-brand span{display:none}
}
@media(max-width:430px){
  /* at phone-narrow the third link is what breaks the row; it is a same-page anchor */
  .nav-links{gap:14px}
  .nav-links a{font-size:10.5px;letter-spacing:.03em}
  .nav-links a.opt{display:none}
}

/* ------------------------------------------------------------- devices */
.swoosh{display:block;height:auto;width:min(300px,62%);margin:14px 0 0}
.swoosh.center{margin-inline:auto}

/* the mailer's orange check-bar + purple tag stack */
.callbar{margin-top:clamp(24px,3vw,34px);max-width:620px}
.callbar-main{
  display:flex;align-items:center;gap:clamp(14px,2vw,20px);
  background:var(--orange);color:#fff;
  padding:clamp(14px,2vw,20px) clamp(18px,2.4vw,26px);
  border-radius:14px 14px 0 0;
  text-decoration:none;
}
a.callbar-main{transition:filter .15s,transform .15s}
a.callbar-main:hover{filter:brightness(1.06)}
.callbar-check{flex:none;width:clamp(42px,5vw,56px);height:auto}
.callbar-main .vote{
  display:block;font-weight:900;color:var(--purple);
  font-size:clamp(19px,2.5vw,30px);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;
}
.callbar-main .office{
  display:block;font-weight:800;color:#fff;
  font-size:clamp(12.5px,1.55vw,18px);line-height:1.15;letter-spacing:.02em;text-transform:uppercase;margin-top:3px;
}
.callbar-tag{
  background:var(--purple-ink);color:#fff;
  padding:clamp(13px,1.8vw,17px) clamp(18px,2.4vw,26px);
  border-radius:0 0 26px 14px;
  font-weight:800;font-size:clamp(12.5px,1.5vw,17px);line-height:1.28;
  letter-spacing:.02em;text-transform:uppercase;
}

/* --------------------------------------------------------- hub: hero */
.hub-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 130% at 50% -30%, var(--purple) 0%, var(--purple-deep) 58%, var(--purple-ink) 100%);
  color:#fff;text-align:center;
  padding:clamp(46px,7vw,84px) 0 clamp(52px,7vw,86px);
}
.hub-hero::after{
  content:"";position:absolute;inset:auto 0 0;height:8px;
  background:linear-gradient(90deg,var(--orange) 0 34%,var(--gold) 34% 100%);
}
.hub-star{
  position:absolute;inset:0;pointer-events:none;opacity:.07;
  background:url("starmark.png") center 46% / min(520px,78%) no-repeat;
}
.hub-hero .shell{position:relative}
.hub-wordmark{width:min(680px,88%);margin:0 auto}
.hub-hero h1{
  margin:clamp(22px,3vw,32px) auto 0;max-width:16ch;
  font-size:clamp(27px,4.3vw,50px);font-weight:900;line-height:1.08;letter-spacing:-.018em;
}
.hub-hero h1 em{font-style:normal;color:var(--gold)}
.hub-hero .lede{
  margin:18px auto 0;max-width:56ch;color:#DCD2F5;
  font-size:clamp(15.5px,1.75vw,19px);font-weight:500;
}
.hub-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(26px,3.4vw,34px)}
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 24px;border-radius:10px;transition:transform .15s,filter .15s,background .15s,color .15s;
}
.btn-gold{background:var(--gold);color:var(--purple-ink)}
.btn-gold:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.42)}
.btn-ghost:hover{background:#fff;color:var(--purple-ink)}

/* orange belt */
.belt{background:var(--orange);color:#fff}
.belt .shell{
  padding:clamp(15px,2vw,20px) var(--pad);text-align:center;
  font-weight:800;font-size:clamp(14.5px,1.75vw,19px);letter-spacing:.01em;
}
.belt b{font-weight:900;color:var(--purple)}

/* ---------------------------------------------------- hub: candidates */
.section{padding:clamp(52px,7vw,88px) 0}
.section-head{text-align:center;max-width:60ch;margin:0 auto clamp(34px,4.4vw,52px)}
.kicker{
  color:var(--orange);font-weight:900;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;
}
.section-head h2{
  color:var(--purple);font-size:clamp(26px,3.9vw,42px);font-weight:900;
  line-height:1.1;letter-spacing:-.018em;
}
.section-head p{margin-top:14px;color:#544a72;font-size:clamp(15.5px,1.7vw,18px)}

.roster{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,28px);
}
@media(max-width:940px){.roster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.roster{grid-template-columns:1fr}}

.cand{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--purple);border-radius:18px;overflow:hidden;
  box-shadow:0 14px 34px rgba(28,18,64,.17);
  transition:transform .18s,box-shadow .18s;
}
.cand:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(28,18,64,.26)}
.cand-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--purple-deep)}
.cand-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cand:hover .cand-photo img{transform:scale(1.035)}
.cand-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(42,26,92,.72) 100%);
}
.cand-seat{
  position:absolute;left:14px;bottom:12px;z-index:1;
  background:rgba(28,18,64,.76);backdrop-filter:blur(3px);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 11px;border-radius:99px;
}
.cand-body{padding:20px 22px 24px;color:#fff;display:flex;flex-direction:column;flex:1}
.cand-body h3{
  font-size:clamp(23px,2.5vw,28px);font-weight:900;color:var(--gold);
  line-height:1.02;letter-spacing:-.015em;text-transform:uppercase;
}
.cand-trust{
  margin-top:11px;color:#fff;font-size:14.5px;font-weight:600;line-height:1.4;
}
.cand-trust b{color:var(--gold);font-weight:900}
.cand-role{
  margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.15);
  color:#CFC3EE;font-size:13.5px;font-weight:600;line-height:1.45;
}
.cand-cta{
  margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.17);
  display:flex;align-items:center;gap:11px;
  color:#fff;font-weight:900;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;
}
.cand-cta svg{flex:none;width:26px;height:26px}
.cand-cta .arrow{margin-left:auto;color:var(--gold);font-size:19px;transition:transform .18s}
.cand:hover .cand-cta .arrow{transform:translateX(4px)}

/* -------------------------------------------------------- hub: why */
.why{background:var(--purple-ink);color:#fff}
.why .shell{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,64px);align-items:center;
  padding-block:clamp(52px,7vw,86px);
}
@media(max-width:860px){.why .shell{grid-template-columns:1fr;gap:34px}}
.why h2{font-size:clamp(26px,3.6vw,40px);font-weight:900;line-height:1.1;letter-spacing:-.018em}
.why h2 em{font-style:normal;color:var(--gold)}
.why p{margin-top:16px;color:#D5C9F0;font-size:clamp(15.5px,1.7vw,17.5px);max-width:54ch}
.stats{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,44px);margin-top:32px}
.stat b{display:block;font-size:clamp(30px,4vw,42px);font-weight:900;color:var(--gold);line-height:1}
.stat span{display:block;margin-top:5px;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#B7A6E4}
.why-mark{display:flex;justify-content:center}
.why-mark img{width:min(270px,64%)}

/* ------------------------------------------------ candidate page hero */
.cp-hero{position:relative;background:var(--purple-deep);color:#fff;overflow:hidden}
.cp-hero-grid{display:grid;grid-template-columns:1fr 1fr;min-height:min(78vh,660px)}
.cp-hero-copy{
  position:relative;z-index:2;background:var(--purple);
  padding:clamp(38px,5vw,68px) clamp(24px,3.6vw,56px) clamp(40px,5vw,66px);
  display:flex;flex-direction:column;justify-content:center;
}
.cp-hero-copy>*{max-width:640px}
.cp-hero-photo{position:relative;background:var(--purple-ink)}
.cp-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* soft hand-off from the purple panel into the photo, as on the mailer */
.cp-hero-photo::before{
  content:"";position:absolute;inset:0 auto 0 -1px;width:30%;z-index:1;
  background:linear-gradient(90deg,var(--purple) 0,rgba(61,39,128,.72) 38%,rgba(61,39,128,0) 100%);
}
@media(max-width:900px){
  .cp-hero-grid{grid-template-columns:1fr;min-height:0}
  .cp-hero-photo{order:-1;aspect-ratio:16/10}
  .cp-hero-photo::before{inset:auto 0 -1px 0;width:auto;height:38%;
    background:linear-gradient(180deg,transparent 0,rgba(61,39,128,.6) 62%,var(--purple) 100%)}
  .cp-hero-copy>*{max-width:none}
}
.cp-eyebrow{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  background:rgba(255,255,255,.13);border-radius:99px;padding:7px 15px;margin-bottom:20px;
  font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#EBE3FF;
}
.cp-eyebrow::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--gold)}
.cp-lead{
  font-size:clamp(18px,2.5vw,31px);font-weight:800;line-height:1.12;
  letter-spacing:-.01em;text-transform:uppercase;color:#fff;
}
.cp-name{
  margin-top:6px;font-size:clamp(38px,6.4vw,76px);font-weight:900;color:var(--gold);
  line-height:.94;letter-spacing:-.022em;text-transform:uppercase;
}
.cp-name .verb{display:block;color:var(--gold)}
.cp-desc{
  margin-top:22px;font-size:clamp(15px,1.75vw,19px);font-weight:800;line-height:1.35;color:#fff;max-width:34ch;
}
.cp-body{margin-top:14px;font-size:clamp(14.5px,1.6vw,16.5px);color:#D9CFF3;max-width:46ch;line-height:1.6}

/* ------------------------------------------- candidate page: platform */
.cp-plat{background:var(--paper);padding:clamp(52px,7vw,86px) 0}
.cp-plat-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4.6vw,60px);align-items:center}
@media(max-width:880px){.cp-plat-grid{grid-template-columns:1fr}}
.trustcard{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;box-shadow:0 16px 40px rgba(28,18,64,.2)}
.trustcard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.trustcard-plate{
  position:absolute;inset:auto 0 0 0;padding:26px 22px 22px;
  background:linear-gradient(180deg,transparent,rgba(28,18,64,.55) 34%,rgba(28,18,64,.9) 100%);
  text-align:center;
}
.trustcard-plate img{width:min(250px,72%);margin:0 auto;aspect-ratio:auto}
.trustcard-plate p{
  margin-top:8px;color:var(--gold);font-weight:900;font-size:clamp(15px,1.9vw,20px);
  letter-spacing:.01em;text-transform:uppercase;
}
.cp-plat h2{
  color:var(--purple);font-size:clamp(26px,3.7vw,42px);font-weight:900;line-height:1.08;
  letter-spacing:-.02em;text-transform:uppercase;
}
.cp-plat h2 em{font-style:normal;color:var(--orange);display:block}
.cp-plat .pitch{margin-top:22px;color:var(--purple);font-weight:800;font-size:clamp(16.5px,1.95vw,21px);line-height:1.4;max-width:44ch}
.cp-plat .detail{margin-top:16px;color:#4d4468;font-size:clamp(15px,1.7vw,17px);max-width:52ch}

/* pillars (Jimmie) */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px);margin-top:clamp(30px,4vw,44px)}
@media(max-width:760px){.pillars{grid-template-columns:1fr}}
.pillar{background:#fff;border-radius:16px;padding:24px 22px 26px;box-shadow:0 8px 24px rgba(28,18,64,.09);border-top:5px solid var(--gold)}
.pillar h3{color:var(--purple);font-size:17px;font-weight:900;line-height:1.2;text-transform:uppercase;letter-spacing:-.005em}
.pillar p{margin-top:10px;color:#524a6d;font-size:14.5px;line-height:1.55}

/* closing call */
.cp-close{background:var(--purple-ink);color:#fff;padding:clamp(46px,6vw,74px) 0;text-align:center}
.cp-close h2{font-size:clamp(24px,3.3vw,36px);font-weight:900;line-height:1.14;letter-spacing:-.015em;max-width:20ch;margin-inline:auto}
.cp-close h2 em{font-style:normal;color:var(--gold)}
.cp-close .callbar{margin-inline:auto}
.cp-close .callbar-tag{background:var(--purple)}
.backlink{
  display:inline-flex;align-items:center;gap:8px;margin-top:30px;
  color:#C6B7EC;text-decoration:none;font-weight:800;font-size:13px;
  letter-spacing:.07em;text-transform:uppercase;
}
.backlink:hover{color:var(--gold)}

/* ------------------------------------------------------------ footer */
footer{background:#150E2E;color:#B9AEDA;padding:clamp(40px,5vw,58px) 0 clamp(44px,5vw,58px);font-size:13px}
.foot-top{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand img{
  width:50px;height:50px;object-fit:contain;padding:7px;
  background:rgba(255,255,255,.08);border-radius:11px;
}
.foot-brand b{display:block;color:#fff;font-size:15px;font-weight:900;letter-spacing:.02em}
.foot-brand span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8E7FB8;margin-top:2px}
.foot-links{display:flex;flex-wrap:wrap;gap:20px}
.foot-links a{color:#C9BDE8;text-decoration:none;font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
.foot-links a:hover{color:var(--gold)}
.disclaimer{
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);
  line-height:1.7;max-width:88ch;font-size:12.5px;color:#A99CCE;
}
.disclaimer b{color:#fff;font-weight:800}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .cand:hover{transform:none}
  .cand:hover .cand-photo img{transform:none}
}
