/* ==========================================================================
   PROSPERITY SCHOOL — CAREERS SITE
   Shared stylesheet. Every page reads this.

   Layout modelled on consulting.com/careers: two-column sections (label left,
   content right), near-black ground, four-column meta strip, big CTA panel.
   Background swirl is a WebGL shader — see swirl.js.

   PALETTE: the hexes in :root are the only raw hexes in this file.
   Prosperity School is black + green as of 2026-08-25 (blue/gold retired).
   Source: company-context/reference/dashboard-theme.md
   ========================================================================== */

:root{
  --psc-bg:#0B0D0D;          /* near-black ground */
  --psc-bg-2:#0E1D1B;        /* deep green-black */
  --psc-shell:#1b1b1b;       /* William's black */
  --psc-surface:#212423;     /* cards — greys are green-tinted on purpose */

  --psc-accent:#7DDFD4;      /* mint   — primary accent, links, focus */
  --psc-accent-2:#00A896;    /* seafoam — deeper green, fills, gradients */
  --psc-ink:#111312;         /* text ON a green fill. Never white on green. */

  --psc-text:#ffffff;
  --psc-text-2:#dde1e0;
  --psc-muted:rgba(221,225,224,.66);
  --psc-dim:rgba(221,225,224,.44);
  --psc-faint:rgba(221,225,224,.28);
  --psc-line:rgba(255,255,255,.11);
  --psc-line-soft:rgba(255,255,255,.06);
  --psc-panel:rgba(255,255,255,.024);

  --psc-ease:cubic-bezier(.22,1,.36,1);
  --psc-serif:"Iowan Old Style","Palatino Linotype",Palatino,ui-serif,Georgia,
              "Times New Roman",serif;
  --psc-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,
             "Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0; position:relative; min-height:100vh;
  font-family:var(--psc-sans);
  color:var(--psc-text-2);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* static fallback — visible if WebGL is unavailable or blocked */
  background:
    radial-gradient(1100px 620px at 76% 8%,rgba(0,168,150,.16),transparent 62%),
    radial-gradient(900px 520px at 8% 82%,rgba(125,223,212,.08),transparent 58%),
    var(--psc-bg);
  background-attachment:fixed;
}

p,ul,li,h1,h2,h3{margin:0}
ul{list-style:none;padding:0}

/* ---------- shader canvas ------------------------------------------------ */
#psc-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
  opacity:0;                       /* swirl.js reveals it once it compiles */
  transition:opacity 1.1s var(--psc-ease);
}
/* fine grain so the shader's gradients don't band on wide screens */
.psc-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.psc-bar,.psc-main,.psc-foot{position:relative; z-index:2}

/* ---------- brand bar ---------------------------------------------------- */
/* One bar for every page: no chrome, not sticky. The mark floats straight on
   the shader with room around it, so nothing competes with the background.

   Role pages used to carry a sticky blurred bar so a long job description kept
   a persistent way back. William unified them on 2026-08-28. That is safe
   because a role page keeps two other exits — `.psc-back` above the H1 and the
   "All open roles" link in `.psc-foot` — so the reader can leave at the top or
   at the end. If you ever strip either of those, reconsider the sticky bar. */
.psc-bar{
  position:static;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(30px,5vw,58px) clamp(16px,4vw,40px) 0;
}
.psc-bar-brand{
  display:inline-flex; align-items:center; line-height:0;
  transition:transform .3s var(--psc-ease);
}
.psc-bar-brand:hover{transform:translateY(-2px)}

/* ---------- adaptive brand mark ------------------------------------------ */
/* Two stacked layers inside one 56px box, both cut to the emblem silhouette:
   a static green gradient, and above it a canvas that swirl.js paints each
   frame with the shader showing through, tone-inverted into brand colour.
   The canvas starts transparent and fades in only once the shader compiles,
   so no WebGL simply leaves the gradient showing. */
.psc-mark{position:relative; display:block; width:56px; height:56px}
.psc-mark-fill{
  position:absolute; inset:0;
  background:linear-gradient(150deg,var(--psc-accent) 0%,var(--psc-accent-2) 62%,
             #0f8f80 100%);
  -webkit-mask:url(/logo-emblem.png) no-repeat center / contain;
          mask:url(/logo-emblem.png) no-repeat center / contain;
  filter:drop-shadow(0 8px 26px rgba(0,168,150,.28));
}
.psc-mark-mirror{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .9s var(--psc-ease);
  -webkit-mask:url(/logo-emblem.png) no-repeat center / contain;
          mask:url(/logo-emblem.png) no-repeat center / contain;
}

/* ---------- buttons ------------------------------------------------------ */
.psc-btn{
  display:inline-block; text-decoration:none; cursor:pointer; border:0;
  font-family:var(--psc-sans); font-size:13px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  padding:16px 40px; border-radius:9px;
  color:var(--psc-ink);
  background:linear-gradient(180deg,var(--psc-accent) 0%,var(--psc-accent-2) 100%);
  box-shadow:0 10px 30px rgba(0,168,150,.26), inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .25s var(--psc-ease), box-shadow .25s var(--psc-ease),
             filter .25s var(--psc-ease);
}
.psc-btn:hover{
  transform:translateY(-2px); filter:brightness(1.07);
  box-shadow:0 16px 42px rgba(0,168,150,.36), inset 0 1px 0 rgba(255,255,255,.42);
}
.psc-btn-sm{padding:10px 22px; font-size:11px; border-radius:7px}
.psc-btn-lg{padding:19px 52px; font-size:14px}
.psc-btn-ghost{
  background:transparent; color:var(--psc-accent);
  border:1px solid rgba(125,223,212,.36); box-shadow:none;
}
.psc-btn-ghost:hover{background:rgba(125,223,212,.09); box-shadow:none}

/* ---------- shell -------------------------------------------------------- */
.psc-shell{max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,40px)}
.psc-card-shell{
  border:1px solid var(--psc-line-soft); border-radius:16px;
  background:linear-gradient(180deg,rgba(16,22,21,.60),rgba(9,12,12,.72));
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  padding:clamp(26px,5vw,72px) clamp(20px,4.5vw,68px);
  margin:clamp(20px,4vw,44px) 0;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}
.psc-back{
  display:inline-block; color:var(--psc-dim); text-decoration:none;
  font-size:14px; margin-bottom:clamp(26px,4vw,44px);
  transition:color .2s var(--psc-ease);
}
.psc-back:hover{color:var(--psc-accent)}

/* ---------- hero --------------------------------------------------------- */
.psc-h1{
  font-family:var(--psc-serif); font-weight:400; color:var(--psc-text);
  font-size:clamp(33px,4.6vw,54px); line-height:1.10; letter-spacing:-.008em;
  margin-bottom:clamp(30px,4.5vw,48px);
}
.psc-eyebrow{
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--psc-accent); font-weight:700; margin-bottom:20px;
}

.psc-metastrip{
  display:grid; gap:0 clamp(14px,2.4vw,30px);
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--psc-line-soft);
  padding-top:26px; margin-bottom:clamp(34px,5vw,56px);
}
@media(min-width:760px){.psc-metastrip{grid-template-columns:repeat(4,1fr)}}
.psc-metaitem{
  padding:2px 0 2px clamp(14px,2.2vw,26px);
  border-left:1px solid var(--psc-line);
}
.psc-metaitem:first-child{border-left:0; padding-left:0}
@media(max-width:759px){
  .psc-metaitem{margin-bottom:16px}
  .psc-metaitem:nth-child(3){border-left:0; padding-left:0}
}
.psc-metalabel{
  display:block; font-size:12px; color:var(--psc-faint);
  letter-spacing:.03em; margin-bottom:2px;
}
.psc-metavalue{display:block; font-size:16px; color:var(--psc-text)}

/* ---------- two-column sections ------------------------------------------ */
.psc-sec{
  display:grid; grid-template-columns:1fr; gap:14px;
  padding:clamp(38px,5.5vw,62px) 0;
  border-top:1px solid var(--psc-line-soft);
}
.psc-sec:first-of-type{border-top:0; padding-top:clamp(8px,2vw,18px)}
@media(min-width:900px){
  .psc-sec{grid-template-columns:255px 1fr; gap:clamp(24px,4vw,56px)}
}
.psc-h2{
  font-family:var(--psc-serif); font-weight:600; color:var(--psc-text);
  font-size:clamp(23px,2.7vw,30px); line-height:1.24; letter-spacing:-.01em;
}
.psc-body{color:var(--psc-muted); max-width:70ch}
.psc-body + .psc-body{margin-top:18px}
.psc-body strong{color:var(--psc-text); font-weight:600}

.psc-list{display:grid; gap:18px}
.psc-list li{position:relative; padding-left:24px; color:var(--psc-muted); max-width:70ch}
.psc-list li::before{
  content:""; position:absolute; left:2px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--psc-accent-2);
}
.psc-list li b{color:var(--psc-text); font-weight:600}
.psc-list.psc-tight{gap:12px}

.psc-pull{
  margin-top:26px; padding:20px 24px;
  border-left:2px solid var(--psc-accent-2);
  background:rgba(0,168,150,.08);
  border-radius:0 8px 8px 0;
  color:var(--psc-text-2); font-size:15.5px; max-width:70ch;
}

/* ---------- role index — card grid ---------------------------------------- */
/* Modelled on consulting.com's Open Roles grid: department pill top-left,
   large brand mark bleeding off the right, title and meta pills at the base. */
/* The index has no glass panel — cards sit straight on the shader. */
.psc-index-body{padding:clamp(28px,6vw,84px) 0 clamp(30px,5vw,56px)}

/* One line by design. At the 26px floor the string measures ~365px, so it
   stops fitting just under a 400px viewport — below that it must wrap or it
   would clip silently against body{overflow-x:hidden}. */
.psc-rolehead{
  font-family:var(--psc-serif); font-weight:400; color:var(--psc-text);
  font-size:clamp(26px,4.2vw,54px); line-height:1.1; letter-spacing:-.01em;
  text-align:center; margin:0 auto clamp(34px,5vw,56px);
  white-space:nowrap;
}
@media(max-width:420px){
  .psc-rolehead{white-space:normal; text-wrap:balance; max-width:16ch}
}

.psc-grid-roles{
  display:grid; gap:16px;
  /* min() so the 330px track floor collapses rather than overflowing on a
     narrow phone — 330 is wider than the content box at 320px viewport. */
  grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));
}

.psc-card{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:space-between;
  aspect-ratio:16/9; min-height:300px;
  /* width:100% and min-width:0 are load-bearing. Left to itself this card has
     no definite width, so the ratio resolves the OTHER way — off min-height,
     giving every card a fixed 533px (300 x 16/9) that overflows its track: it
     runs off the side of a phone, and cards overlap each other the moment a
     second role is posted. Pinning the width to the track forces the ratio to
     drive height instead, with min-height as the floor. */
  width:100%; min-width:0;
  padding:22px;
  text-decoration:none; color:inherit;
  border:1px solid var(--psc-line-soft); border-radius:14px;
  /* the radial sits under the mark and lights it from the right edge */
  background:
    radial-gradient(130% 120% at 88% 50%,rgba(0,168,150,.13),transparent 62%),
    linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  transition:border-color .3s var(--psc-ease), transform .3s var(--psc-ease),
             box-shadow .3s var(--psc-ease);
}
/* Hover is scoped to `a.psc-card` on purpose. A role with no page yet is marked
   up as <div class="psc-card"> — same card, but it must not lift or show a
   pointer, because advertising a click it cannot honour is worse than looking
   flat. Give it an href by making it an <a> and it becomes interactive again
   with no CSS change. */
a.psc-card:hover{
  border-color:rgba(0,168,150,.42);
  transform:translateY(-3px);
  box-shadow:0 20px 46px rgba(0,0,0,.42);
}

/* brand mark — masked so it takes our green rather than the flat white PNG.
   Muted gradient rather than a faded bright one: it reads as a watermark at
   full opacity, so it keeps its edge instead of greying out. */
.psc-card-mark{
  position:absolute; z-index:0; pointer-events:none;
  right:-11%; top:50%; transform:translateY(-50%);
  width:46%; aspect-ratio:1;
  background:linear-gradient(150deg,#4E9E95 0%,#2C6F68 58%,#17423E 100%);
  -webkit-mask:url(/logo-emblem.png) no-repeat center / contain;
          mask:url(/logo-emblem.png) no-repeat center / contain;
  transition:transform .5s var(--psc-ease);
}
a.psc-card:hover .psc-card-mark{transform:translateY(-50%) scale(1.04)}

/* holds the base of the card down so the title and pills stay legible where
   they cross the mark */
.psc-card-scrim{
  position:absolute; z-index:1; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,13,13,0) 42%,rgba(8,10,10,.55) 78%,
             rgba(6,8,8,.82) 100%);
}

.psc-tag{
  position:relative; z-index:2; align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--psc-text-2);
  background:rgba(10,13,13,.72); border:1px solid var(--psc-line);
  border-radius:999px; padding:6px 14px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.psc-tag svg{width:13px; height:13px; flex:none; opacity:.8}

.psc-card-foot{position:relative; z-index:2}
.psc-card-title{
  display:block;
  font-family:var(--psc-serif); font-weight:400; color:var(--psc-text);
  font-size:clamp(19px,1.9vw,26px); line-height:1.2; letter-spacing:-.005em;
  margin-bottom:16px; white-space:nowrap;
}
/* one pill, not one per fact — location and contract are read together */
.psc-card-meta{
  display:inline-flex; align-items:center; gap:18px;
  font-size:12px; color:var(--psc-muted);
  background:rgba(10,13,13,.72); border:1px solid var(--psc-line);
  border-radius:999px; padding:6px 16px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.psc-card-meta span{display:inline-flex; align-items:center; gap:7px}
.psc-card-meta svg{width:13px; height:13px; flex:none; opacity:.8}

/* ---------- apply block -------------------------------------------------- */
.psc-apply{
  position:relative; overflow:hidden;
  border-radius:14px; text-align:center;
  padding:clamp(46px,7vw,88px) clamp(20px,4vw,48px);
  margin-top:clamp(30px,5vw,54px);
  background:
    radial-gradient(120% 140% at 50% 0%,rgba(0,168,150,.16),transparent 64%),
    linear-gradient(180deg,#141a19 0%,#0d1211 100%);
  border:1px solid var(--psc-line);
}
.psc-apply h2{
  font-family:var(--psc-serif); font-weight:600; color:var(--psc-text);
  font-size:clamp(26px,3.6vw,38px); line-height:1.2; margin-bottom:12px;
}
.psc-apply p{color:var(--psc-muted); max-width:46ch; margin:0 auto 30px}

.psc-typeform{max-width:820px; margin:0 auto; border-radius:12px; overflow:hidden}
.psc-typeform[data-tf-live]{min-height:560px}

/* ---------- footer ------------------------------------------------------- */
.psc-foot{
  border-top:1px solid var(--psc-line-soft);
  padding:34px 0 44px; text-align:center;
  font-size:13px; color:var(--psc-faint);
}
.psc-foot a{color:var(--psc-dim); text-decoration:none}
.psc-foot a:hover{color:var(--psc-accent)}

/* ---------- focus + motion ----------------------------------------------- */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--psc-accent); outline-offset:3px; border-radius:4px;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}