/* Diaspora Career Connect - design system.
   Generated from the static build; do not hand-edit, run make_css.py.

   Elementor owns layout (container direction, widths, gaps, padding).
   This file owns the brand: colour, typography, the dark field and its
   gradient blobs, the film grain, photo scrims, cards and accordions.
   That split is what keeps every page editable in the editor while the
   design still holds together. */
/* =========================================================================
   DIASPORA CAREER CONNECT — design system
   Phase 1. Every value below is a token. No one-off numbers anywhere else.

   Type    Anton (hero only) / Fraunces (section headings) / Space Grotesk (UI)
   Motion  opacity and transform only, so nothing triggers layout
   A11y    every pairing checked to WCAG AA, see the contrast table in the docs
   ========================================================================= */

/* ---------- fonts: self-hosted, 135 KB total, swap so text paints at once */
@font-face{font-family:'Anton';src:url('../fonts/anton-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-opsz-normal.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root{
  /* ---- colour roles ---------------------------------------------------
     gold-on-dark passes AA on navy (5.3) and near-black (7.5).
     gold-on-light is darker because #C9A961 on white is only 2.25 = fail. */
  --navy-900:#050D18;
  --navy-800:#0A1A2E;
  --navy-700:#123052;
  --navy-600:#1A4675;
  --blue-500:#1E63B8;
  --cyan-400:#38BDD8;
  --cyan-300:#6FD4E8;

  --gold-600:#7E6126;   /* gold text on LIGHT only */
  --gold-500:#C08A2E;
  --gold-400:#D9A441;
  --gold-300:#EFC66C;   /* gold on DARK only */

  --paper:#FBF9F5;
  --paper-2:#F1ECE2;
  --white:#fff;
  --ink:#0A1A2E;
  --ink-72:rgba(10,26,46,.72);
  --ink-45:rgba(10,26,46,.45);
  --ink-10:rgba(10,26,46,.10);
  --on-dark:#fff;
  --on-dark-72:rgba(255,255,255,.72);
  --on-dark-40:rgba(255,255,255,.40);
  --on-dark-58:rgba(255,255,255,.58);
  --on-dark-14:rgba(255,255,255,.14);

  /* ---- type ---- */
  --f-display:'Anton',Impact,'Arial Narrow',sans-serif;
  --f-head:'Fraunces',Georgia,'Times New Roman',serif;
  --f-body:'Space Grotesk',system-ui,-apple-system,sans-serif;

  --t-hero:clamp(2.5rem,9.4vw,7.4rem);
  --t-h2:clamp(2rem,4.6vw,3.6rem);
  --t-h3:clamp(1.35rem,2.2vw,1.85rem);
  --t-h4:1.125rem;
  --t-lead:clamp(1.0625rem,1.5vw,1.3rem);
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-micro:.75rem;

  /* ---- spacing, 8pt base ---- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px; --s9:160px;

  --gut:clamp(var(--s3),5vw,var(--s5));
  --bay:clamp(var(--s7),10vw,var(--s9));
  --max:1320px;

  --r-sm:6px; --r-md:14px; --r-lg:24px; --r-pill:999px;
  --e1:0 2px 8px rgba(5,13,24,.06);
  --e2:0 12px 32px rgba(5,13,24,.14);

  /* ---- motion: one system, reused everywhere ---- */
  --d-fast:180ms;
  --d-base:420ms;
  --d-slow:900ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --rise:24px;
  --stagger:90ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);
  font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan-400);outline-offset:3px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-9999px;background:var(--navy-900);color:#fff;padding:var(--s2) var(--s3);z-index:500}
.skip:focus{left:0;top:0}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.bay{padding-block:var(--bay)}

/* ---------- type ---------- */
.hero-type{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:var(--t-hero);line-height:.9;letter-spacing:-.03em;margin:0}
.hero-type .g{color:var(--gold-300)}

h2,.h2{font-family:var(--f-head);font-weight:600;font-size:var(--t-h2);
  line-height:1.04;letter-spacing:-.02em;margin:0;font-variation-settings:'opsz' 96}
.h2 .g{color:var(--gold-600)}
.field .h2 .g,.field h2 .g{color:var(--gold-300)}

h3,.h3{font-family:var(--f-head);font-weight:600;font-size:var(--t-h3);
  line-height:1.15;letter-spacing:-.015em;margin:0;font-variation-settings:'opsz' 36}
h4,.h4{font-family:var(--f-body);font-weight:600;font-size:var(--t-h4);line-height:1.3;margin:0}

.tag{display:block;font-family:var(--f-body);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);margin:0 0 var(--s2)}
.field .tag,.cta-photo .tag,.foot .tag{color:var(--gold-300)}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-72);max-width:60ch;margin:0}
.field .lead{color:var(--on-dark-72)}
.lead--d{color:var(--on-dark-72)}
p{margin:0 0 var(--s2)}
p:last-child{margin-bottom:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--s1);padding:var(--s2) var(--s4);
  border:1.5px solid transparent;border-radius:var(--r-pill);font-weight:700;
  font-size:var(--t-small);letter-spacing:.02em;text-decoration:none;cursor:pointer;
  transition:background-color var(--d-fast) var(--ease-out),
             border-color var(--d-fast) var(--ease-out),
             color var(--d-fast) var(--ease-out),
             transform var(--d-fast) var(--ease-out),
             box-shadow var(--d-fast) var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.btn--gold{background:var(--gold-400);color:#20140A}
.btn--gold:hover{background:var(--gold-300);box-shadow:0 12px 28px rgba(217,164,65,.34)}
.btn--navy{background:var(--navy-800);color:#fff}
.btn--navy:hover{background:var(--navy-700);box-shadow:var(--e2)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--line{background:transparent;border-color:var(--ink-10);color:var(--ink)}
.btn--line:hover{border-color:var(--ink)}
.btn-row{flex-wrap:wrap}.btn-row:not(.e-con){display:flex;gap:var(--s2)}

/* ---------- the living field ---------- */
.field{position:relative;isolation:isolate;overflow:hidden;color:var(--on-dark);background:var(--navy-900)}
.field__bg{position:absolute;inset:0;z-index:-3;overflow:hidden;filter:brightness(.88)}
.blob{position:absolute;border-radius:50%;filter:blur(72px);will-change:transform}
.b1{width:62vw;height:62vw;left:-14vw;top:-20vw;background:var(--navy-600);opacity:.9;animation:drift-a 17s ease-in-out infinite alternate}
.b2{width:54vw;height:54vw;right:-12vw;top:-18vw;background:var(--gold-500);opacity:.48;animation:drift-b 21s ease-in-out infinite alternate}
.b3{width:50vw;height:50vw;left:20vw;bottom:-26vw;background:var(--blue-500);opacity:.5;animation:drift-c 19s ease-in-out infinite alternate}
.b4{width:32vw;height:32vw;right:8vw;bottom:-14vw;background:var(--cyan-400);opacity:.18;animation:drift-a 24s ease-in-out infinite alternate-reverse}
@keyframes drift-a{to{transform:translate3d(16vw,12vh,0) scale(1.22)}}
@keyframes drift-b{to{transform:translate3d(-15vw,15vh,0) scale(.82)}}
@keyframes drift-c{to{transform:translate3d(13vw,-14vh,0) scale(1.24)}}

.field__arc{position:absolute;inset:-25% -18% auto;z-index:-2;pointer-events:none;
  opacity:.5;transform-origin:70% 30%;animation:arc-turn 90s linear infinite}
@keyframes arc-turn{to{transform:rotate(360deg)}}
.field__grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px}

/* ---------- header: sticky, shrinks on scroll ---------- */
.mast{position:fixed;inset:0 0 auto;z-index:100;
  transition:background-color var(--d-base) var(--ease-out),
             box-shadow var(--d-base) var(--ease-out);}
.mast__in{display:flex;align-items:center;gap:clamp(var(--s2),3vw,var(--s5));
  min-height:92px;transition:min-height var(--d-base) var(--ease-out)}
.mast[data-stuck="true"]{background:rgba(5,13,24,.94);backdrop-filter:blur(12px);box-shadow:var(--e2)}
.mast[data-stuck="true"] .mast__in{min-height:68px}
.mast__logo img{height:40px;width:auto;transition:height var(--d-base) var(--ease-out)}
.mast[data-stuck="true"] .mast__logo img{height:32px}
.nav{margin-left:auto}
.nav__list{display:flex;gap:clamp(var(--s2),1.6vw,var(--s3));
  list-style:none;margin:0;padding:0;align-items:center}
.nav__list>li{position:relative}
.nav__top{display:inline-flex;align-items:center;gap:5px;border:0;background:none;
  cursor:pointer;font-family:inherit;font-size:var(--t-small);font-weight:500;
  color:var(--on-dark-72);padding:var(--s1) 0;transition:color var(--d-fast)}
.nav__top:hover{color:#fff}
.nav__chev{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--d-fast) var(--ease-out)}
.has-sub[data-open=true] .nav__chev{transform:rotate(180deg)}

.nav__sub{position:absolute;top:calc(100% + 14px);left:-14px;min-width:14rem;
  list-style:none;margin:0;padding:8px;border-radius:14px;
  background:var(--navy-800);border:1px solid var(--on-dark-14);
  box-shadow:0 26px 60px -24px rgba(5,13,24,.7);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--d-fast) var(--ease-out),
             transform var(--d-fast) var(--ease-out),visibility var(--d-fast);
  z-index:60}
/* the gap between trigger and panel would drop the hover, so bridge it */
.has-sub::after{content:'';position:absolute;inset:100% -14px auto;height:16px}
.has-sub:hover .nav__sub,.has-sub:focus-within .nav__sub,
.has-sub[data-open=true] .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{display:block;padding:10px 12px;border-radius:9px;font-size:var(--t-small);
  color:var(--on-dark-72);white-space:nowrap}
.nav__sub a:hover{background:rgba(255,255,255,.07);color:#fff}
.has-sub[data-here=true]>.nav__top{color:var(--gold-300)}
.nav a{text-decoration:none;font-size:var(--t-small);font-weight:500;
  color:var(--on-dark-72);padding:var(--s1) 0;position:relative}
.nav__sub a::after{display:none}
.nav__list>li>a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--gold-300);transition:right var(--d-base) var(--ease-out)}
.nav__list>li>a:hover::after,.nav__list>li>a[aria-current=page]::after{right:0}
.nav a:hover,.nav a[aria-current=page]{color:#fff}
.mast .btn{padding:10px var(--s3)}
.navtoggle{display:none;margin-left:auto;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:var(--r-pill);
  padding:10px var(--s3);font-size:var(--t-small);font-weight:600;cursor:pointer}
@media(max-width:1080px){
  .nav,.mast .btn{display:none}
  .navtoggle{display:block}
  /* the panel is a normal flow column under the bar, so nothing can overlap */
  .mast[data-open=true]{background:var(--navy-900);height:100dvh;
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mast[data-open=true] .mast__in{min-height:100%}
  .mast[data-open=true] .mast__in{flex-wrap:wrap;align-items:flex-start;padding-bottom:var(--s4)}
  .mast[data-open=true] .nav{display:flex;flex-direction:column;gap:0;
    flex:1 0 100%;margin:var(--s2) 0 0;order:3}
  .mast[data-open=true] .nav__list{flex-direction:column;gap:0;align-items:stretch}
  .mast[data-open=true] .nav__list>li{border-bottom:1px solid var(--on-dark-14)}
  .mast[data-open=true] .nav__list>li>a,
  .mast[data-open=true] .nav__top{display:flex;width:100%;justify-content:space-between;
    padding:var(--s3) 0;font-size:1.05rem;color:#fff}
  /* a floating panel would sit over the page, so on a phone the submenu
     is an ordinary block that pushes the rest of the menu down */
  .mast[data-open=true] .nav__sub{position:static;opacity:1;visibility:visible;
    transform:none;background:transparent;border:0;box-shadow:none;
    padding:0 0 var(--s2) var(--s3);min-width:0;
    display:none}
  .mast[data-open=true] .has-sub[data-open=true] .nav__sub{display:block}
  .mast[data-open=true] .has-sub::after{display:none}
  .mast[data-open=true] .nav__sub a{padding:10px 0;font-size:1rem}
  .mast[data-open=true] .mast__cta{display:flex;gap:var(--s2);flex:1 0 100%;
    order:4;margin-top:var(--s4)}
  .mast[data-open=true] .mast__cta .btn{display:inline-flex;flex:1;justify-content:center}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(7rem,13vw,9rem) var(--gut) clamp(5rem,9vw,7rem)}
.hero__logo{width:clamp(120px,13vw,175px);margin:0 auto var(--s3)}
.hero .hero-type{width:min(100%,1180px)}
.hero__sub{margin:var(--s4) auto 0;max-width:54ch;color:var(--on-dark-72);
  font-size:var(--t-lead);line-height:1.5}
.hero__cta{margin-top:var(--s5);display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center}
.hero__corner{position:absolute;bottom:var(--s4);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-72);z-index:2}
.hero__corner--l{left:var(--gut)}
.hero__corner--r{right:var(--gut)}
@media(max-width:640px){.hero__corner{bottom:var(--s3);font-size:.6875rem}}

/* ---------- motion: one entrance, reused ---------- */
.dcc-motion [data-rise]{opacity:0;transform:translateY(var(--rise));
  transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out)}
.dcc-motion [data-rise].is-in{opacity:1;transform:none}
.preload{position:absolute;inset:0;background:#000;z-index:4;pointer-events:none;
  animation:preload-out var(--d-slow) var(--ease-out) 200ms forwards}
@keyframes preload-out{to{opacity:0;visibility:hidden}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dcc-motion [data-rise]{opacity:1;transform:none;transition:none}
  .preload{display:none}
  .blob{animation:none}
  .btn:hover{transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- countdown ---------- */
.cd{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center;
  justify-content:center;padding-block:var(--s5)}
.cd__unit{text-align:center;min-width:5.5rem}
.cd__n{font-family:var(--f-display);font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;
  color:var(--gold-300);display:block;font-variant-numeric:tabular-nums}
.cd__l{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-40);margin-top:var(--s1);display:block}

/* ---------- stats ---------- */
.stats:not(.e-con){display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.stat__n{font-family:var(--f-head);font-weight:600;font-variation-settings:'opsz' 96;font-size:clamp(2.6rem,6vw,4.4rem);line-height:.9;
  display:block;margin-bottom:var(--s1);color:var(--gold-300);font-variant-numeric:tabular-nums}
.stat p{margin:0;color:var(--on-dark-72);font-size:var(--t-small);max-width:24ch}
@media(max-width:880px){.stats:not(.e-con){grid-template-columns:1fr 1fr}}

/* ---------- cards ---------- */
.duo:not(.e-con){display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:880px){.duo:not(.e-con){grid-template-columns:1fr}}
.card{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s2);min-height:26rem;color:#fff;isolation:isolate;
  background:var(--navy-900)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.card::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(5,13,24,.94) 0%,rgba(5,13,24,.62) 42%,
    rgba(5,13,24,.72) 74%,rgba(5,13,24,.92) 100%)}
.card--g{background:#342206}
.card--g::before{background:linear-gradient(to top,rgba(52,34,6,.95) 0%,rgba(90,66,20,.66) 42%,
    rgba(72,52,14,.76) 74%,rgba(44,29,5,.93) 100%)}
.card p{color:rgba(255,255,255,.86);max-width:40ch}
.card .btn{align-self:flex-start;margin-top:auto}

/* ---------- steps ---------- */
.steps{counter-reset:s}.steps:not(.e-con){display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.step{position:relative;padding-top:var(--s6);counter-increment:s}
.step h4{font-size:clamp(1.05rem,1.45vw,1.3rem);font-weight:700;
  color:var(--navy-800);letter-spacing:-.01em;margin-bottom:8px}
.step p{font-size:var(--t-body);color:var(--ink-72);line-height:1.55}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--f-head);font-weight:600;font-size:1.6rem;line-height:1;color:var(--gold-600)}
.step::after{content:'';position:absolute;top:14px;left:3rem;right:0;height:1px;background:var(--ink-10)}
.step:last-child::after{display:none}
.step p{color:var(--ink-72);font-size:var(--t-small)}
@media(max-width:900px){.steps:not(.e-con){grid-template-columns:1fr 1fr}.step::after{display:none}}
@media(max-width:540px){.steps:not(.e-con){grid-template-columns:1fr}}

/* ---------- sectors ---------- */
.sectors{display:flex;flex-wrap:wrap;gap:var(--s1);margin:0;padding:0;list-style:none}
.sectors li{padding:14px var(--s3);border-radius:var(--r-pill);border:1px solid var(--ink-10);
  font-weight:600;font-size:var(--t-small);background:var(--white)}
.sectors li:nth-child(3n+1){background:var(--navy-800);color:#fff;border-color:transparent}
.sectors li:nth-child(5n+3){background:var(--gold-400);color:#20140A;border-color:transparent}

/* ---------- programme ---------- */
.prog{margin-top:var(--s5)}
.prog__row{display:grid;grid-template-columns:7rem 1fr;gap:var(--s4);
  padding-block:var(--s3);border-bottom:1px solid var(--on-dark-14)}
.prog__row:first-child{border-top:1px solid var(--on-dark-14)}
.prog__t{font-weight:700;font-size:var(--t-small);letter-spacing:.06em;color:var(--gold-300);
  font-variant-numeric:tabular-nums}
.prog__row p{color:var(--on-dark-72);font-size:var(--t-small);max-width:56ch;margin:6px 0 0}
@media(max-width:640px){.prog__row{grid-template-columns:1fr;gap:var(--s1)}}

/* ---------- desks ---------- */
.desks:not(.e-con){display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.desk{background:rgba(255,255,255,.055);border:1px solid var(--on-dark-14);
  border-radius:var(--r-md);padding:var(--s4)}
.desk p{color:var(--on-dark-72);font-size:var(--t-small);margin:var(--s1) 0 0}
@media(max-width:900px){.desks:not(.e-con){grid-template-columns:1fr 1fr}}
@media(max-width:540px){.desks:not(.e-con){grid-template-columns:1fr}}

/* ---------- speaker ---------- */
.say{align-items:center}.say:not(.e-con){display:grid;grid-template-columns:auto 1fr;gap:var(--s6)}
.say img{width:clamp(7rem,14vw,12rem);aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:top}
.say blockquote{font-family:var(--f-head);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.6rem);
  line-height:1.1;letter-spacing:-.02em;margin:0;max-width:24ch;font-variation-settings:'opsz' 72}
.say cite{display:block;margin-top:var(--s3);font-style:normal;font-size:var(--t-small);color:var(--ink-72)}
.say cite b{display:block;color:var(--ink);font-weight:700;font-size:var(--t-body)}
@media(max-width:680px){.say:not(.e-con){grid-template-columns:1fr;gap:var(--s3)}}

/* ---------- closing ---------- */
.close__in{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:center}
@media(max-width:900px){.close__in{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{background:var(--navy-900);color:var(--on-dark-72);
  padding-block:0 var(--s4)}
.foot a:not(.btn){color:var(--on-dark-72);text-decoration:none;transition:color var(--d-fast) var(--ease-out)}
.foot a:hover{color:#fff}
.g-l{color:var(--gold-300)}
.foot__cta{text-align:center;padding-bottom:var(--bay);border-bottom:1px solid var(--on-dark-14)}
.foot__cta .h2{color:#fff;margin-bottom:var(--s3)}
.foot__grid{padding-top:clamp(44px,5vw,68px)}.foot__grid:not(.e-con){display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--s5)}
.foot h5{margin:0 0 var(--s3);color:#fff;font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1);font-size:var(--t-small)}
.foot__logo{height:38px;width:auto;margin-bottom:var(--s3)}
.foot__meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s6);
  padding-top:var(--s4);border-top:1px solid var(--on-dark-14);font-size:var(--t-small)}
.foot__base{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between;
  margin-top:var(--s4);font-size:var(--t-micro);color:var(--on-dark-58)}
.foot__social{display:flex;gap:var(--s2);margin-top:var(--s3)}
.foot__social a{width:38px;height:38px;border:1px solid var(--on-dark-14);border-radius:50%;
  display:grid;place-items:center;transition:border-color var(--d-fast) var(--ease-out),
  background-color var(--d-fast) var(--ease-out)}
.foot__social a:hover{border-color:var(--gold-300);background:rgba(239,198,108,.12)}
.foot__social svg{width:17px;height:17px;fill:currentColor}
@media(max-width:900px){.foot__grid:not(.e-con){grid-template-columns:1fr 1fr}}
@media(max-width:540px){.foot__grid:not(.e-con){grid-template-columns:1fr}}
.sub{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s3)}
.sub input{flex:1 1 13rem;min-width:0;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);
  padding:14px var(--s3);color:#fff}
.sub input::placeholder{color:var(--on-dark-40)}
.sub input:focus{border-color:var(--cyan-400)}

/* ---------- partner strip ---------- */
.partners{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;justify-content:center;
  padding-block:var(--s4);opacity:.75}
.partners img{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.8}


/* ---------- grain on light sections too, so nothing reads flat --------- */
.tex{position:relative;isolation:isolate}
.tex::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size:180px;mix-blend-mode:multiply}

/* ---------- photographic CTA band ------------------------------------- */
.cta-photo{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:var(--navy-900)}
.cta-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.cta-photo::before{content:'';position:absolute;inset:0;z-index:-2;
  background:linear-gradient(105deg,rgba(5,13,24,.96) 0%,rgba(5,13,24,.88) 50%,rgba(10,26,46,.74) 100%)}
.cta-photo::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px}

/* ---------- tabs: one panel for candidates, one for employers ---------- */
.tabs__btns{display:inline-flex;gap:4px;padding:5px;background:var(--white);
  border:1px solid var(--ink-10);border-radius:var(--r-pill);margin-bottom:var(--s6)}
.tabs__btn{border:0;background:transparent;border-radius:var(--r-pill);
  padding:12px var(--s4);font-weight:600;font-size:var(--t-small);color:var(--ink-72);
  cursor:pointer;transition:background-color var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out)}
.tabs__btn[aria-selected=true]{background:var(--navy-800);color:#fff}
.tabs__panel[hidden]{display:none}
.tabs__panel{animation:tab-in var(--d-base) var(--ease-out)}
@keyframes tab-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tabs__panel{animation:none}}

/* ---------- footer: nav columns tighter and left, column one breathes -- */
.foot__grid{align-items:start}.foot__grid:not(.e-con){grid-template-columns:2.1fr .8fr .8fr .8fr;gap:var(--s5) var(--s4)}
.foot__grid>div:first-child{padding-right:var(--s6)}
@media(max-width:900px){.foot__grid:not(.e-con){grid-template-columns:1fr 1fr;gap:var(--s5)}
  .foot__grid>div:first-child{grid-column:1/-1;padding-right:0}}
@media(max-width:540px){.foot__grid:not(.e-con){grid-template-columns:1fr 1fr}}

/* ---------- mission / vision pair -------------------------------------- */
.pair:not(.e-con){display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.pair>div{background:var(--white);border:1px solid var(--ink-10);border-radius:var(--r-md);
  padding:var(--s5);box-shadow:var(--e1)}
.pair p{color:var(--ink-72);margin:var(--s2) 0 0}
@media(max-width:760px){.pair:not(.e-con){grid-template-columns:1fr}}

/* ---------- editorial split: text beside a photograph ------------------ */
.split{align-items:center}.split:not(.e-con){display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.split img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm);aspect-ratio:4/3}
@media(max-width:860px){.split:not(.e-con){grid-template-columns:1fr;gap:var(--s4)}}


/* ---------- stats inside the hero -------------------------------------- */
.stats--hero{margin-top:clamp(var(--s6),8vw,var(--s8));width:100%;max-width:1100px;
  padding-top:var(--s5);border-top:1px solid var(--on-dark-14);text-align:left}
.stats--hero .stat__n{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.stats--hero p{font-size:var(--t-small)}
@media(max-width:880px){.stats--hero{margin-top:var(--s6)}}
@media(max-width:540px){.stats--hero{gap:var(--s3)}}
/* the hero is now taller, so let it breathe rather than force 100svh */
.hero{min-height:auto;padding-bottom:clamp(var(--s8),12vw,10rem)}

/* ═══════════════════════════════════════════════════════════════════
   INNER PAGES
   Everything below is used by the pages other than the home page.
   ═══════════════════════════════════════════════════════════════════ */

/* ---- inner hero: same living background, about half the height ---- */
/* The inner hero was noticeably lighter than the body sections, which hurt
   contrast, and its content sat on a different measure to the logo and the
   rest of the page. Both are fixed here: a darker base, and the same wrap
   width and gutter every other section uses. */
.hero--inner{min-height:0;padding-block:calc(var(--s8) + 72px) var(--s7);
  text-align:left;align-items:flex-start;
  width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.field:has(.hero--inner){background:var(--navy-900)}
.field:has(.hero--inner) .field__bg{filter:brightness(.52) saturate(.92)}
.field:has(.hero--inner)::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(5,13,24,.55) 0%,rgba(5,13,24,.2) 45%,
    rgba(5,13,24,.75) 100%);pointer-events:none}
.hero--inner .hero__sub{margin-left:0;max-width:56ch}
.h1-inner{font-family:var(--f-head);font-weight:600;color:#fff;
  font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1.04;
  letter-spacing:-.02em;margin:var(--s3) 0 0;max-width:24ch}
.h1-inner .g{color:var(--gold-300)}

/* ---- pricing tiers -------------------------------------------------- */
.tiers{
  align-items:start}.tiers:not(.e-con){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:var(--s4)}
.tier{position:relative;background:#fff;border:1px solid rgba(10,26,46,.14);
  border-radius:var(--r-sm);padding:0;display:flex;flex-direction:column;
  overflow:hidden;box-shadow:0 1px 2px rgba(10,26,46,.04)}
/* head, price and each feature are ruled rows, so the two columns
   line up and compare the way a pricing table should */
.tier .h3{padding:var(--s4) var(--s5) 0;margin:0}
.tier__price{padding:var(--s2) var(--s5) var(--s4);
  border-bottom:1px solid rgba(10,26,46,.12)}
.tier .ticks{gap:0;margin:0}
.tier .ticks li{padding:14px var(--s5) 14px calc(var(--s5) + 1.7rem);
  border-bottom:1px solid rgba(10,26,46,.08)}
.tier .ticks li::before{left:var(--s5)}
.tier .btn{margin:var(--s4) var(--s5) var(--s5)}
.tier--feature{background:var(--navy-800);border-color:var(--navy-800);color:#fff;
  box-shadow:0 24px 60px -28px rgba(5,13,24,.55)}
.tier--feature .h3{color:#fff}
.tier--feature .tier__price{color:var(--gold-300)}
.tier__flag{position:absolute;top:var(--s4);right:var(--s5);
  background:var(--gold-400);color:var(--navy-900);font-family:var(--f-body);
  font-weight:700;font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px}
.tier--feature .ticks li{border-bottom-color:rgba(255,255,255,.14)}
.tier--feature .tier__price{border-bottom-color:rgba(255,255,255,.18)}
.tier--feature .ticks li::before{background:var(--gold-300)}
.tier__price{font-family:var(--f-head);font-weight:600;font-size:clamp(2.4rem,4vw,3.2rem);
  line-height:1;color:var(--navy-800);margin:0}
.tier .btn{margin-top:auto;align-self:flex-start}

.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:var(--t-small)}
.ticks li{position:relative;padding-left:1.7rem;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:1rem;height:1rem;
  border-radius:50%;background:var(--navy-700);
  /* tick mark drawn with a mask so it needs no extra element */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.6 11 12 5.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat,
        linear-gradient(#000,#000);
  -webkit-mask-composite:destination-out;mask-composite:exclude}
.ticks li.no{color:var(--ink-72)}
.ticks li.no::before{background:rgba(10,26,46,.3);-webkit-mask:none;mask:none;
  border-radius:2px;height:2px;top:.78em;width:.8rem}
.tier--feature .ticks li.no{color:var(--on-dark-58)}
.tier--feature .ticks li.no::before{background:rgba(255,255,255,.38)}

/* ---- FAQ accordion -------------------------------------------------- */
.faq{max-width:76ch;margin-inline:auto}
.faq__item{border-bottom:1px solid rgba(10,26,46,.12)}
.faq__item summary{cursor:pointer;list-style:none;display:flex;align-items:flex-start;
  justify-content:space-between;gap:var(--s3);padding:var(--s4) 0;
  font-family:var(--f-head);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.35;color:var(--navy-800)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";flex:0 0 22px;width:22px;height:22px;margin-top:.2em;
  background:var(--navy-800);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/62% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/62% no-repeat;
  transition:transform var(--d-base) var(--ease-out),background var(--d-fast)}
.faq__item[open] summary::after{transform:rotate(135deg);background:var(--gold-600)}
.faq__item summary:hover{color:var(--blue-500)}
.faq__a{padding:0 0 var(--s4);max-width:66ch}
.faq__a p{margin:0;color:var(--ink-72)}

/* ---- forms ---------------------------------------------------------- */
.form{display:grid;gap:var(--s3);background:#fff;padding:var(--s5);
  border:1px solid rgba(10,26,46,.1);border-radius:18px;
  box-shadow:0 1px 2px rgba(10,26,46,.04)}
.form__row{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.form label{display:grid;gap:8px;font-family:var(--f-body);font-weight:600;
  font-size:var(--t-small);color:var(--navy-800)}
.form input,.form select,.form textarea{
  background:var(--paper);border:1px solid rgba(10,26,46,.16);border-radius:10px;
  padding:13px 14px;font-weight:400;color:var(--ink);width:100%;
  transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.form textarea{resize:vertical;min-height:7rem}
.form input::placeholder,.form textarea::placeholder{color:rgba(10,26,46,.38)}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;
  border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(30,99,184,.16)}
.form .check{display:flex;align-items:flex-start;gap:10px;font-weight:400;
  font-size:var(--t-small);color:var(--ink-72)}
.form .check input{width:auto;flex:0 0 auto;margin-top:.2em;accent-color:var(--blue-500)}
.form .btn{justify-self:start;margin-top:var(--s2)}

.contacts{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;gap:var(--s4)}
.contacts li{display:grid;gap:4px;padding-top:var(--s3);
  border-top:1px solid rgba(10,26,46,.12)}
.contacts strong{font-family:var(--f-body);font-weight:600;font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-600)}
.contacts a{color:var(--navy-800)}

/* ---- misc ----------------------------------------------------------- */
.desks--light .desk{background:#fff;border-color:rgba(10,26,46,.1);color:var(--ink)}
.desks--light .desk h4{color:var(--navy-800)}
.desks--light .desk p{color:var(--ink-72)}

.notice{background:rgba(30,99,184,.06);border-left:3px solid var(--cyan-400);
  border-radius:0 12px 12px 0;padding:var(--s4)}
.notice p{margin:0;font-size:var(--t-small);color:var(--ink-72)}

.prose{max-width:70ch}
.prose p{color:var(--ink-72)}

.tabs__btns{flex-wrap:wrap}

@media (max-width:600px){
  .hero--inner{padding-block:calc(var(--s8) + 56px) var(--s7)}
  .tier .h3,.tier__price{padding-inline:var(--s4)}
  .tier .ticks li{padding-inline:var(--s4) var(--s4)}
  .tier .ticks li{padding-left:calc(var(--s4) + 1.7rem)}
  .tier .ticks li::before{left:var(--s4)}
  .tier .btn{margin-inline:var(--s4)}
  .form{padding:var(--s4)}
}

/* ═══════════════════════════════════════════════════════════════════
   EDITORIAL BLOCKS
   The about and mission sections were two text columns beside a photo,
   which is the shape every template uses. These give them composition:
   overlapping images, a figure lifted out over them, and panels that
   sit on photography instead of in a grey box.
   ═══════════════════════════════════════════════════════════════════ */

.bay--tight{padding-block:0 var(--bay)}

.editorial{display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(var(--s5),5vw,var(--s8));align-items:center}
/* grid items default to min-width:auto, so a 2048px photo inside a
   column forces that column to its intrinsic width and crushes the
   text beside it. This is the fix, and it matters with real images
   too, not just the placeholders. */
.editorial>*{min-width:0}
.stack{min-width:0}
@media(max-width:900px){.editorial{grid-template-columns:1fr}}

/* two images, the second offset so the pair reads as one composition */
.stack{position:relative;padding:0 0 clamp(48px,7vw,86px) clamp(40px,6vw,76px)}
.stack img{display:block;border-radius:var(--r-sm);object-fit:cover}
.stack__a{width:100%;aspect-ratio:4/3;
  box-shadow:0 36px 80px -34px rgba(5,13,24,.5)}
.stack__b{position:absolute;left:0;bottom:0;width:46%;aspect-ratio:1;
  border:7px solid var(--paper);
  box-shadow:0 26px 56px -26px rgba(5,13,24,.45)}
.stack__note{position:absolute;right:clamp(-8px,-1vw,0px);top:12%;
  background:var(--navy-800);color:#fff;border-radius:var(--r-md);
  padding:var(--s3) var(--s4);max-width:13.5rem;
  box-shadow:0 24px 54px -22px rgba(5,13,24,.6)}
.stack__note strong{display:block;font-family:var(--f-head);font-weight:600;
  font-size:1.9rem;line-height:1;color:var(--gold-300)}
.stack__note span{display:block;margin-top:6px;font-size:var(--t-micro);
  line-height:1.45;color:var(--on-dark-72)}
@media(max-width:640px){
  .stack{padding:0 0 56px 0}
  .stack__b{width:40%;border-width:5px}
  .stack__note{position:static;margin-top:var(--s3);max-width:none}
}

.mvhead{max-width:30ch;margin-bottom:var(--s6)}

.mv{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.mv>*{min-width:0}
@media(max-width:860px){.mv{grid-template-columns:1fr}}
.mv__item{position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--r-sm);min-height:22rem;display:flex;align-items:flex-end;
  background:var(--navy-900);color:#fff}
.mv__item img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;
  transition:transform 1.2s var(--ease-out)}
.mv__item:hover img{transform:scale(1.05)}
.mv__item::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(5,13,24,.95) 8%,rgba(5,13,24,.62) 55%,
    rgba(5,13,24,.42) 100%)}
.mv__item--gold::before{
  background:linear-gradient(to top,rgba(44,29,5,.95) 8%,rgba(90,66,20,.66) 55%,
    rgba(72,52,14,.46) 100%)}
.mv__in{padding:var(--s5);position:relative}
.mv__n{font-family:var(--f-head);font-weight:600;font-size:var(--t-micro);
  letter-spacing:.18em;color:var(--gold-300);display:block;margin-bottom:var(--s2)}
.mv__item .h3{color:#fff;margin-bottom:var(--s2)}
.mv__item p{color:var(--on-dark-72);max-width:36ch;margin:0}

/* numbered feature grid, used on the sponsors page */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
@media(max-width:1000px){.feat{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feat{grid-template-columns:1fr}}
.feat__i{background:#fff;border:1px solid var(--ink-10);border-radius:var(--r-md);
  padding:var(--s4);transition:transform var(--d-base) var(--ease-out),
  box-shadow var(--d-base) var(--ease-out)}
.feat__i:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(10,26,46,.3)}
.feat__n{font-family:var(--f-head);font-weight:600;font-size:var(--t-micro);
  letter-spacing:.18em;color:var(--gold-600);display:block;margin-bottom:var(--s2)}
.feat__i h4{color:var(--navy-800);margin-bottom:6px}
.feat__i p{color:var(--ink-72);font-size:var(--t-small);margin:0}

/* ── speakers, as a block of people rather than one portrait ────────── */
.spk{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media(max-width:900px){.spk{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.spk{grid-template-columns:1fr}}
.spk__i{background:#fff;border:1px solid var(--ink-10);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out)}
.spk__i:hover{transform:translateY(-4px);box-shadow:0 26px 52px -26px rgba(10,26,46,.32)}
/* square crop, not a circular mask: this is a professional line-up */
.spk__i img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;
  display:block;border-radius:0}
.spk__ph{aspect-ratio:4/5;display:grid;place-items:center;background:var(--paper-2)}
.spk__ph svg{width:64px;height:64px;fill:none;stroke:var(--ink-45);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.spk__b{padding:var(--s4);display:flex;flex-direction:column;gap:6px}
.spk__b h4{color:var(--navy-800)}
.spk__r{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-600);font-weight:600}
.spk__b p{font-size:var(--t-small);color:var(--ink-72);margin:6px 0 0}
.spk__i--soon .spk__b h4{color:var(--ink-72)}

/* photographs that should read as crisp, not soft */
.img--sharp{border-radius:var(--r-sm)!important}


/* ═══════════════════════════════════════════════════════════════════
   ENTRANCE MOTION
   The page should arrive, not just appear. The header drops in, the
   hero's own lines stagger up on load rather than waiting for a scroll
   that never comes, and buttons lift under the cursor.
   All of it is transform and opacity only, and all of it is skipped
   under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

@keyframes mast-in{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes rise-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.dcc-motion .mast{animation:mast-in .7s var(--ease-out) both}

/* the hero is above the fold, so it animates on load with a stagger
   instead of relying on the scroll observer */
.dcc-motion .hero>*{animation:rise-in .8s var(--ease-out) both}
.dcc-motion .hero>*:nth-child(1){animation-delay:.18s}
.dcc-motion .hero>*:nth-child(2){animation-delay:.30s}
.dcc-motion .hero>*:nth-child(3){animation-delay:.42s}
.dcc-motion .hero>*:nth-child(4){animation-delay:.54s}
.dcc-motion .hero>*:nth-child(5){animation-delay:.66s}
.dcc-motion .hero__corner{animation-delay:.8s!important}

/* buttons: a small lift, and the arrow leads the way */
.btn{transition:transform var(--d-fast) var(--ease-out),
     background-color var(--d-fast) var(--ease-out),
     box-shadow var(--d-base) var(--ease-out),color var(--d-fast)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{transition:transform var(--d-base) var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}

/* cards and panels answer the cursor too */
.card,.mv__item,.tier,.spk__i,.feat__i,.desk{
  transition:transform var(--d-base) var(--ease-out),
             box-shadow var(--d-base) var(--ease-out)}
.card:hover,.tier:hover{transform:translateY(-5px)}

@media(prefers-reduced-motion:reduce){
  .dcc-motion .mast,.dcc-motion .hero>*{animation:none}
  .blob,.field__arc{animation:none!important}
  .btn:hover,.card:hover,.tier:hover,.mv__item:hover img{transform:none}
}

/* ── sectors: a tiled grid with an icon each ─────────────────────────
   Was a row of grey pills, which read as filler. Each sector now gets a
   tile and a mark, and the accent rotates so the row has colour without
   becoming a rainbow. */
.sects{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s2);
  list-style:none;margin:0;padding:0}
/* a long sector name (Entrepreneurship) sets the grid item's min-content
   width and pushes the row past its column on a small phone */
.sects>*{min-width:0}
.sect__t{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:1100px){.sects{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.sects{grid-template-columns:repeat(2,1fr)}}
.sect{background:#fff;border:1px solid var(--ink-10);border-radius:var(--r-sm);
  padding:var(--s4) var(--s3);display:flex;flex-direction:column;
  align-items:center;gap:var(--s2);text-align:center;
  transition:transform var(--d-base) var(--ease-out),
             border-color var(--d-base),box-shadow var(--d-base)}
.sect:hover{transform:translateY(-4px);border-color:transparent;
  box-shadow:0 20px 40px -22px rgba(10,26,46,.34)}
.sect__i{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--navy-800);transition:background var(--d-base) var(--ease-out)}
.sect__i svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.sect__t{font-weight:600;font-size:var(--t-small);color:var(--navy-800)}
/* rotate the accent so the row has rhythm rather than one flat colour */
.sect:nth-child(3n+2) .sect__i{background:var(--gold-600)}
.sect:nth-child(4n+3) .sect__i{background:var(--blue-500)}
.sect:hover .sect__i{background:var(--navy-900)}

/* ── support desks: a mark and a rule, so the box is not just text ──── */
.desk{position:relative;padding-top:var(--s4)}
.desk__i{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  background:rgba(56,189,216,.14);margin-bottom:var(--s3)}
.desk__i svg{width:19px;height:19px;fill:none;stroke:var(--cyan-400);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* a hairline that draws itself across the box on hover */
.desk::after{content:'';position:absolute;top:0;left:0;height:2px;width:0;
  background:var(--gold-400);transition:width var(--d-slow) var(--ease-out)}
.desk:hover::after{width:100%}
.desks--light .desk__i{background:rgba(30,99,184,.1)}
.desks--light .desk__i svg{stroke:var(--blue-500)}
.desks--light .desk::after{background:var(--gold-600)}

/* ── FAQ: the answers were too light, and the block started too low ── */
.faq__a p{color:var(--ink)}

/* ── grid items must be allowed to shrink ────────────────────────────
   Grid and flex children default to min-width:auto, so a long word or a
   wide child sets the track's minimum and pushes the row past its
   container. Every row in this system opts out, which is what keeps the
   layout intact on a small phone. */
.split>*,.pair>*,.duo>*,.steps>*,.tiers>*,.desks>*,.feat>*,.spk>*,
.sects>*,.mv>*,.editorial>*,.stats>*,.foot__grid>*,.prog__row>*{min-width:0}

/* a three-up step row that still stacks on a phone, without an inline
   grid-template-columns that would outrank the media queries */
.steps--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.steps--3{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.steps--3{grid-template-columns:1fr}}

@media(max-width:420px){
  .form{padding:var(--s3)}
  .tier .h3,.tier__price{padding-inline:var(--s3)}
  .tier .ticks li{padding-left:calc(var(--s3) + 1.6rem);padding-right:var(--s3)}
  .tier .ticks li::before{left:var(--s3)}
  .tier .btn{margin-inline:var(--s3)}
}

/* a long email or URL has no break opportunity, so it sets its line box
   wider than the column it sits in */
.contacts li,.contacts a,.foot__meta a,.faq__a a,.prose a{overflow-wrap:anywhere}


/* ═══════════════════════════════════════════════════════════════════
   ELEMENTOR COMPATIBILITY

   Elementor wraps every widget in its own markup:

     .elementor-element.elementor-widget-button
       > .elementor-widget-container
           > .elementor-button-wrapper
               > a.btn

   So a rule written against `.btn` styles the link, not the flex child,
   and anything that positioned a direct child has to be re-aimed at the
   wrapper. These rules do that, and nothing else.
   ═══════════════════════════════════════════════════════════════════ */

/* the element that is actually the flex child is the widget, not the link */
.card .elementor-widget-button,
.tier .elementor-widget-button{margin-top:auto;align-self:flex-start}

/* Elementor gives widgets a bottom margin by default; our own spacing
   scale already handles rhythm, so the extra gap only causes drift */
.field .elementor-widget:last-child,
.bay .elementor-widget:last-child{margin-bottom:0}

/* the scrim and grain are painted by the container, so its background
   image needs the same overlay the static build gave the <img> */
.cta-photo{background-size:cover;background-position:center center}

/* headings and text arrive wrapped; keep our max-widths on the text itself */
.elementor-widget-text-editor .lead,
.elementor-widget-text-editor p{max-width:62ch}
.field .elementor-widget-text-editor p{color:var(--on-dark-72)}

/* icon-list is our tick list. Elementor draws its own icon, so the
   pseudo-element that drew the tick in the static build must stand down
   or every row shows two marks. */
.ticks .elementor-icon-list-item::before,
.elementor-widget-icon-list .elementor-icon-list-item::before{content:none}
.ticks .elementor-icon-list-icon svg,
.ticks .elementor-icon-list-icon i{color:var(--cyan-400);font-size:15px}
.ticks .elementor-icon-list-item{padding-left:0}

/* icon-list is our tick list */
.ticks .elementor-icon-list-item,
.elementor-widget-icon-list .elementor-icon-list-item{align-items:flex-start}

/* the accordion is the FAQ */
.faq .elementor-accordion-item{border:0;border-bottom:1px solid rgba(10,26,46,.12)}
.faq .elementor-tab-title{font-family:var(--f-head);font-weight:600;
  padding:var(--s4) 0;background:transparent}
.faq .elementor-tab-content{border:0;padding:0 0 var(--s4);max-width:66ch}

/* tabs are the candidate / employer switch */
.tabs .elementor-tabs-wrapper{display:inline-flex;gap:4px;padding:5px;
  background:#fff;border:1px solid var(--ink-10);border-radius:var(--r-pill)}
.tabs .elementor-tab-title{border:0!important;border-radius:var(--r-pill);
  padding:12px var(--s4);font-weight:600;font-size:var(--t-small)}
.tabs .elementor-tab-title.elementor-active{background:var(--navy-800);color:#fff}
.tabs .elementor-tabs-content-wrapper{border:0}
.tabs .elementor-tab-content{border:0;padding:var(--s6) 0 0}

/* the editor must never render an invisible or clipped widget */
.elementor-editor-active .field__bg,
.elementor-editor-active .field__arc{pointer-events:none}


/* ═══════════════════════════════════════════════════════════════════
   NATIVE WIDGET SKINS

   Going native means Elementor supplies the markup, so the design has to
   meet it there. These rules dress Elementor's own classes in the DCC
   design. Every value here is still overridable from the widget's Style
   tab, so the client keeps full control.
   ═══════════════════════════════════════════════════════════════════ */

/* ---- Price Table (Pro) ------------------------------------------- */
.tier .elementor-price-table{background:#fff;border:1px solid rgba(10,26,46,.14);
  border-radius:var(--r-sm);overflow:hidden}
.tier .elementor-price-table__header{padding:var(--s4) var(--s5) 0;background:transparent}
.tier .elementor-price-table__heading{font-family:var(--f-head);font-weight:600;
  font-size:var(--t-h3);color:var(--navy-800);margin:0}
.tier .elementor-price-table__price{padding:var(--s2) var(--s5) var(--s4);
  border-bottom:1px solid rgba(10,26,46,.12);color:var(--navy-800);
  font-family:var(--f-head);font-weight:600;align-items:baseline}
.tier .elementor-price-table__integer-part,
.tier .elementor-price-table__currency{font-size:clamp(2.4rem,4vw,3.2rem);line-height:1}
.tier .elementor-price-table__features-list{padding:0;margin:0;list-style:none}
.tier .elementor-price-table__features-list li{padding:0}
.tier .elementor-price-table__feature-inner{display:flex;align-items:flex-start;gap:10px;
  padding:14px var(--s5);border-bottom:1px solid rgba(10,26,46,.08);
  font-size:var(--t-small);color:var(--ink-72);margin:0}
.tier .elementor-price-table__features-list i{color:var(--navy-700);font-size:14px;margin-top:3px}
.tier .elementor-price-table__footer{padding:var(--s4) var(--s5) var(--s5);background:transparent}
.tier .elementor-price-table__ribbon{top:0;right:0}
.tier .elementor-price-table__ribbon-inner{background:var(--gold-400);
  color:var(--navy-900);font-family:var(--f-body);font-weight:700;
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase}

/* the recommended tier, on navy */
.tier--feature .elementor-price-table{background:var(--navy-800);border-color:var(--navy-800)}
.tier--feature .elementor-price-table__heading{color:#fff}
.tier--feature .elementor-price-table__price{color:var(--gold-300);
  border-bottom-color:rgba(255,255,255,.18)}
.tier--feature .elementor-price-table__feature-inner{color:var(--on-dark-72);
  border-bottom-color:rgba(255,255,255,.14)}
.tier--feature .elementor-price-table__features-list i{color:var(--gold-300)}

/* ---- Icon Box ----------------------------------------------------- */
.sect .elementor-icon-box-wrapper,
.desk .elementor-icon-box-wrapper,
.feat__i .elementor-icon-box-wrapper{text-align:left}
.sect .elementor-icon-box-wrapper{text-align:center}
.sect .elementor-icon,.desk .elementor-icon,.feat__i .elementor-icon{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--navy-800);color:#fff;font-size:18px}
.desk .elementor-icon{border-radius:10px;background:rgba(56,189,216,.14);color:var(--cyan-400)}
.desks--light .desk .elementor-icon{background:rgba(30,99,184,.1);color:var(--blue-500)}
.feat__i .elementor-icon{background:transparent;color:var(--gold-600);
  width:auto;height:auto;justify-content:flex-start}
.sect .elementor-icon-box-title,.desk .elementor-icon-box-title,
.feat__i .elementor-icon-box-title{font-family:var(--f-body);font-weight:600;
  font-size:var(--t-h4);color:var(--navy-800);margin:var(--s2) 0 6px}
.sect .elementor-icon-box-description,.desk .elementor-icon-box-description,
.feat__i .elementor-icon-box-description{font-size:var(--t-small);color:var(--ink-72);margin:0}
.sect .elementor-icon-box-description:empty{display:none}

/* ---- Image Box: the speaker cards --------------------------------- */
.spk__i .elementor-image-box-wrapper{display:block;text-align:left}
.spk__i .elementor-image-box-img{margin:0}
.spk__i .elementor-image-box-img img{width:100%;aspect-ratio:4/5;object-fit:cover;
  object-position:top center;border-radius:0;display:block}
.spk__i .elementor-image-box-content{padding:var(--s4)}
.spk__i .elementor-image-box-title{font-family:var(--f-body);font-weight:600;
  font-size:var(--t-h4);color:var(--navy-800);margin:0 0 4px}
.spk__i .elementor-image-box-description{font-size:var(--t-small);color:var(--ink-72);margin:0}
.spk__i .elementor-image-box-description strong{display:block;
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-600);font-weight:600;margin-bottom:6px}

/* ---- Counter: the hero statistics --------------------------------- */
.stat .elementor-counter-number-wrapper{font-family:var(--f-head);font-weight:600;
  font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1;color:var(--gold-300);
  display:flex;align-items:baseline;justify-content:flex-start}
.stat .elementor-counter-title{font-family:var(--f-body);font-weight:400;
  font-size:var(--t-micro);color:var(--on-dark-72);text-align:left;
  margin-top:8px;line-height:1.4}
.tex .stat .elementor-counter-number-wrapper{color:var(--gold-600)}
.tex .stat .elementor-counter-title{color:var(--ink-72)}

/* ---- Form (Pro) --------------------------------------------------- */
.form .elementor-form{display:flex;flex-wrap:wrap;gap:var(--s3);background:#fff;
  padding:var(--s5);border:1px solid rgba(10,26,46,.1);border-radius:var(--r-sm)}
.form .elementor-field-group{display:flex;flex-direction:column;gap:8px}
.form .elementor-field-label{font-family:var(--f-body);font-weight:600;
  font-size:var(--t-small);color:var(--navy-800)}
.form .elementor-field-textual{background:var(--paper);
  border:1px solid rgba(10,26,46,.16);border-radius:10px;padding:13px 14px;
  font-family:var(--f-body);color:var(--ink);width:100%}
.form .elementor-field-textual:focus{outline:0;border-color:var(--blue-500);
  box-shadow:0 0 0 3px rgba(30,99,184,.16)}
.form .elementor-button{border-radius:var(--r-pill);padding:14px var(--s5);
  font-weight:600;background:var(--gold-400);color:#20140A;border:0;cursor:pointer}
.form .elementor-field-type-acceptance{font-size:var(--t-small);color:var(--ink-72)}