/*
UNDILUTED DESIGN SYSTEM — WORKING v0.27
26 September 2026

Design direction:
- full-width section backgrounds with a centred maximum-width content shell;
- component-specific reading widths inside that shared shell;
- large, softer pill-shaped actions;
- shared Undiluted visual language across corporate and Career Clarity surfaces;
- native/system typography for predictable rendering while final typeface remains open.
*/

:root {
  --u-navy-950:#07162d;
  --u-navy-900:#0a1f3d;
  --u-blue-700:#0b5ee8;
  --u-blue-600:#1d6ff2;
  --u-blue-500:#3d82f6;
  --u-blue-100:#eaf2ff;
  --u-blue-050:#f5f9ff;

  --u-ink:#0d1b2f;
  --u-text:#24364d;
  --u-muted:#64748b;
  --u-line:#dce5ef;
  --u-surface:#ffffff;
  --u-surface-soft:#f7f9fc;
  --u-warning-bg:#fff7df;
  --u-warning-border:#f2d47a;
  --u-warning-text:#6b4d00;

  /* Use installed/native fonts for crisp, predictable rendering.
     Final brand typeface can be chosen later without changing component structure. */
  --u-font-sans:"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Full-bleed section backgrounds with a centred content shell. */
  --u-page-gutter:clamp(18px,4vw,72px);
  --u-page-shell-max:1424px;
  --u-reading-max:760px;
  --u-reading-wide:980px;

  --u-radius-sm:10px;
  --u-radius-md:16px;
  --u-radius-lg:24px;
  --u-radius-xl:32px;
  --u-radius-pill:999px;

  --u-shadow-sm:0 8px 24px rgba(7,22,45,.06);
  --u-shadow-md:0 18px 48px rgba(7,22,45,.10);
  --u-ease:180ms ease;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--u-surface);
  color:var(--u-text);
  font-family:var(--u-font-sans);
  line-height:1.6;
  -webkit-font-smoothing:auto;
  text-rendering:optimizeLegibility;
}
body,button,input,textarea,select{font-family:var(--u-font-sans)}
img{max-width:100%;height:auto}
a{color:var(--u-blue-700);text-underline-offset:.18em}

/* ---------- Centred content shell ---------- */

/*
   Section backgrounds may remain full-bleed, but meaningful content stops
   expanding once the viewport becomes very wide. This keeps the composition
   coherent at large desktop widths and when the browser is zoomed out.
*/
.u-page{
  width:min(100%,var(--u-page-shell-max));
  margin-inline:auto;
  padding-inline:var(--u-page-gutter);
}

/* Constrain only the components that benefit from shorter line lengths. */
.u-reading{width:min(100%,var(--u-reading-max))}
.u-reading--wide{width:min(100%,var(--u-reading-wide))}
.u-section{width:100%;padding-block:clamp(4rem,7vw,7rem)}
.u-section--soft{background:var(--u-surface-soft)}
.u-section--tint{background:linear-gradient(180deg,var(--u-blue-050),var(--u-surface))}

.u-kicker{
  margin:0 0 .9rem;
  color:var(--u-blue-700);
  font-size:.78rem;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.u-heading-hero,.u-heading-xl,.u-heading-lg{
  margin:0;
  color:var(--u-navy-950);
  letter-spacing:-.03em;
  text-wrap:balance;
}
.u-heading-hero{font-size:clamp(2.55rem,5.1vw,5rem);line-height:1.01;font-weight:760}
.u-heading-xl{font-size:clamp(1.9rem,3vw,2.75rem);line-height:1.08;font-weight:740}
.u-heading-lg{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.18;font-weight:720}
.u-lead{
  margin:1.25rem 0 0;
  max-width:720px;
  color:#40536b;
  font-size:clamp(1.05rem,1.5vw,1.2rem);
  line-height:1.65;
}

/* ---------- Header / navigation ---------- */

.u-site-header{
  position:relative;
  z-index:20;
  width:100%;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(220,229,239,.82);
  backdrop-filter:blur(14px);
}
.u-site-header__inner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.75rem;
}
.u-site-logo img{display:block;width:auto;max-height:38px}
.u-nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem)}
.u-nav a{
  position:relative;
  color:var(--u-navy-900);
  font-size:.95rem;
  font-weight:650;
  text-decoration:none;
}
.u-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-8px;
  height:2px;
  border-radius:2px;
  background:var(--u-blue-600);
  transition:right var(--u-ease);
}
.u-nav a:hover::after,.u-nav a[aria-current="page"]::after{right:0}

/* ---------- Buttons ---------- */

/* Default/primary action: deliberately taller, softer and more pill-shaped. */
.u-button,
.wp-element-button,
.wp-block-button__link,
.ast-button,
button.u-button{
  min-height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  padding:.9rem 2rem;
  border:1px solid transparent;
  border-radius:var(--u-radius-pill)!important;
  cursor:pointer;
  font-size:1rem;
  font-weight:720;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:transform var(--u-ease),box-shadow var(--u-ease),background var(--u-ease),border-color var(--u-ease);
}

/* Host/CMS link styles must never make button labels look like ordinary links. */
a.u-button,
a.u-button:link,
a.u-button:visited,
a.u-button:hover,
a.u-button:focus,
a.u-button:active{
  text-decoration:none !important;
}

.u-button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.ast-button:hover{
  transform:translateY(-1px);
}
.u-button--primary,
.wp-element-button,
.wp-block-button__link,
.ast-button{
  background:linear-gradient(135deg,var(--u-blue-600),#0863e8);
  color:#fff;
  box-shadow:0 10px 28px rgba(29,111,242,.20);
}
.u-button--primary:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.ast-button:hover{
  background:linear-gradient(135deg,#0d64e9,#0758cf);
  color:#fff;
  box-shadow:0 14px 34px rgba(29,111,242,.26);
}
.u-button--secondary{
  background:rgba(255,255,255,.96);
  border-color:#8eb6ef;
  color:var(--u-blue-700);
}
.u-button--secondary:hover{
  border-color:var(--u-blue-600);
  background:var(--u-blue-050);
}
/* Compact action uses the same visual language, just smaller. */
.u-button--compact{
  min-height:46px;
  padding:.72rem 1.45rem;
  font-size:.92rem;
}

/* ---------- Cards ---------- */

.u-card{
  border:1px solid var(--u-line);
  border-radius:var(--u-radius-lg);
  background:rgba(255,255,255,.96);
  box-shadow:var(--u-shadow-sm);
}
.u-card--padded{padding:clamp(1.35rem,2.5vw,2rem)}
.u-card--interactive{transition:transform var(--u-ease),box-shadow var(--u-ease),border-color var(--u-ease)}
.u-card--interactive:hover{
  transform:translateY(-3px);
  border-color:#bfd4ef;
  box-shadow:var(--u-shadow-md);
}

/* ---------- Hero ---------- */

.u-hero{
  position:relative;
  width:100%;
  min-height:620px;
  display:grid;
  align-items:center;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.88) 35%,rgba(255,255,255,.20) 68%,rgba(255,255,255,.05) 100%),
    var(--u-hero-image,linear-gradient(135deg,#eef5ff,#dcecff));
  background-position:center;
  background-size:cover;
}
.u-hero__content{position:relative;z-index:2;padding-block:clamp(4rem,8vw,7.5rem)}
.u-hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}

/* ---------- Responsive grids ---------- */

.u-grid-2,
.u-grid-3,
.u-grid-4{
  display:grid;
  gap:clamp(1rem,2vw,2rem);
  align-items:stretch;
}
.u-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.u-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.u-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Auto grid for sections intended to stretch with the viewport. */
.u-grid-fluid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(1rem,2vw,2rem);
}

/* ---------- Product / app shell ---------- */

.u-app-shell{
  min-height:100vh;
  background:
    radial-gradient(circle at top right,rgba(61,130,246,.08),transparent 32rem),
    var(--u-surface-soft);
}
.u-app-panel{
  border:1px solid var(--u-line);
  border-radius:var(--u-radius-xl);
  background:var(--u-surface);
  box-shadow:var(--u-shadow-md);
}
.u-app-workspace{
  width:min(calc(100% - (2 * var(--u-page-gutter))),1180px);
  margin-inline:auto;
}
.u-status-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.9rem;
  padding:.8rem 1rem;
  border:1px solid var(--u-line);
  border-radius:var(--u-radius-md);
  background:var(--u-surface);
  font-size:.9rem;
}
.u-status-bar--guest{
  border-color:var(--u-warning-border);
  background:var(--u-warning-bg);
  color:var(--u-warning-text);
}

/* ---------- Forms ---------- */

.u-field,input.u-field,textarea.u-field,select.u-field{
  width:100%;
  border:1px solid #c8d6e6;
  border-radius:var(--u-radius-md);
  background:#fff;
  color:var(--u-ink);
  font-size:1rem;
  line-height:1.5;
  padding:.92rem 1rem;
  outline:none;
  transition:border-color var(--u-ease),box-shadow var(--u-ease);
}
.u-field:focus,input.u-field:focus,textarea.u-field:focus,select.u-field:focus{
  border-color:var(--u-blue-500);
  box-shadow:0 0 0 4px rgba(61,130,246,.12);
}

/* ---------- Footer ---------- */

.u-site-footer{
  width:100%;
  padding-block:2.5rem;
  border-top:1px solid var(--u-line);
  color:var(--u-muted);
  font-size:.9rem;
}

/* ---------- WordPress / Astra integration ---------- */

/* Do not impose a site-wide max-width on existing WordPress sections.
   New/reworked sections opt into .u-page/.u-reading/.u-grid-* deliberately. */
.wp-site-blocks{padding:0}

/* Keep the shared button language without constraining existing section widths. */
.wp-block-button__link{border-radius:var(--u-radius-pill)!important}

/* ---------- Responsive ---------- */

@media(max-width:1000px){
  .u-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:860px){
  .u-grid-2,.u-grid-3{grid-template-columns:1fr}
  .u-hero{
    min-height:auto;
    background:
      linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.98)),
      var(--u-hero-image,linear-gradient(135deg,#eef5ff,#dcecff));
    background-position:center;
  }
  .u-hero__content{padding-block:4.5rem}
}

@media(max-width:620px){
  :root{--u-page-gutter:18px}
  .u-section{padding-block:4rem}
  .u-site-header__inner{
    min-height:auto;
    align-items:flex-start;
    flex-direction:column;
    padding-block:.9rem;
  }
  .u-nav{width:100%;justify-content:space-between}
  .u-grid-4{grid-template-columns:1fr}
  .u-hero__actions,.u-hero__actions .u-button{width:100%}
  .u-button,.wp-element-button,.wp-block-button__link,.ast-button,button.u-button{
    min-height:54px;
    padding-inline:1.5rem;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}


/* ==========================================================
   PORTABLE FULL-BLEED + CORPORATE HOMEPAGE HERO — v0.11
   These rules are host-independent. WordPress/Astra is only
   the current deployment host; the source HTML/CSS remains ours.
   ========================================================== */

.u-full-bleed{
  position:relative !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:100vw !important;
  max-width:none !important;
  margin:0 !important;
  box-sizing:border-box;
}

.u-home-hero{
  min-height:680px;
  display:flex;
  align-items:center;
  padding-block:clamp(45px,5.5vw,85px);
  /* Keep the full-bleed image, but align the glass panel to the same
     centred content shell used by the sections below. At ordinary
     viewport widths this behaves like the existing responsive gutter;
     on very wide/zoomed-out views it stops the panel pinning to the
     far left edge of the browser. */
  padding-inline:max(
    clamp(22px,5vw,80px),
    calc((100vw - var(--u-page-shell-max))/2 + var(--u-page-gutter))
  );
  overflow:hidden;
  background-size:cover;
  background-position:72% center;
  background-repeat:no-repeat;
}

.u-home-hero--boardroom{
  background-image:url("../images/undiluted-home-hero-boardroom.webp");
}

.u-home-hero__panel{
  width:min(900px,64vw);
  padding:clamp(40px,4vw,60px) clamp(34px,4vw,60px);
  border:1px solid rgba(255,255,255,.76);
  border-radius:28px;
  background:rgba(255,255,255,.86);
  box-shadow:
    0 20px 60px rgba(6,31,66,.16),
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(255,255,255,.26);
}

/* True glass treatment where the browser supports backdrop filtering.
   The background remains uniform; the glass character comes from blur,
   saturation and edge highlights rather than a left-to-right gradient. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .u-home-hero__panel{
    background:rgba(255,255,255,.58);
    -webkit-backdrop-filter:blur(18px) saturate(128%) brightness(1.04);
    backdrop-filter:blur(18px) saturate(128%) brightness(1.04);
  }
}

.u-home-hero__content{max-width:760px}

.u-home-hero__title{
  margin:0 0 28px;
  color:var(--u-navy-950);
  font-size:clamp(2.65rem,3.6vw,3.45rem);
  font-weight:760;
  line-height:1.08;
  letter-spacing:-.03em;
  text-wrap:balance;
}

.u-home-hero__body{
  max-width:720px;
  margin:0 0 24px;
  color:var(--u-text);
  font-size:clamp(1rem,1.15vw,1.15rem);
  line-height:1.62;
}
.u-home-hero__body:last-of-type{margin-bottom:30px}

.u-home-hero .u-button{
  font-size:1.08rem;
  font-weight:740;
}

@media(max-width:1000px){
  .u-home-hero{min-height:620px;background-position:68% center}
  .u-home-hero__panel{width:min(820px,82vw)}
  .u-home-hero__content{max-width:700px}
}

@media(max-width:700px){
  .u-home-hero{
    min-height:auto;
    padding:34px 18px 44px;
    background-position:72% center;
  }
  .u-home-hero__panel{
    width:100%;
    padding:32px 24px;
    border-radius:22px;
    /* Keep the same glass treatment on mobile; do not replace it
       with an opaque mobile card. The base fallback/background and
       @supports backdrop-filter rules above continue to apply. */
  }
  .u-home-hero__title{
    margin-bottom:22px;
    font-size:clamp(2.1rem,9vw,2.85rem);
    line-height:1.08;
  }
  .u-home-hero__body{font-size:1rem;line-height:1.58}
  .u-home-hero .u-button{width:100%}
}


/* ==========================================================
   CORPORATE HOMEPAGE — WHEN UNDILUTED IS USEFUL — v0.19
   Six-scenario grid retained. Card glass treatment now deliberately
   matches the approved hero glass panel exactly: same background,
   border, shadow, blur, saturation and brightness.
   ========================================================== */

.u-home-useful{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 14% 18%, rgba(54,120,190,.30) 0, rgba(54,120,190,.14) 16rem, transparent 34rem),
    radial-gradient(circle at 84% 72%, rgba(30,90,160,.22) 0, rgba(30,90,160,.10) 18rem, transparent 36rem),
    linear-gradient(135deg,#e4effa 0%,#c9dced 48%,#edf5fc 100%);
}

.u-home-useful__grid{
  margin-top:clamp(2rem,3.5vw,3rem);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2vw,2rem);
}

.u-home-useful__card{
  min-height:260px;
  padding:clamp(1.8rem,2.7vw,2.5rem);
  border:1px solid rgba(255,255,255,.78);
  border-radius:28px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,0) 46%),
    rgba(255,255,255,.43);
  -webkit-backdrop-filter:blur(20px) saturate(135%) brightness(1.02);
  backdrop-filter:blur(20px) saturate(135%) brightness(1.02);
  box-shadow:
    0 14px 34px rgba(6,31,66,.10),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(255,255,255,.22);
}

.u-home-useful__card h3{
  margin:0;
  color:var(--u-navy-950);
  font-size:clamp(1.45rem,1.75vw,1.8rem);
  font-weight:740;
  line-height:1.18;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.u-home-useful__card p{
  margin:1.25rem 0 0;
  color:var(--u-text);
  font-size:clamp(1.05rem,1.18vw,1.18rem);
  line-height:1.6;
}

@media(max-width:1000px){
  .u-home-useful__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u-home-useful__card{min-height:0}
}

@media(max-width:700px){
  .u-home-useful__grid{grid-template-columns:1fr;gap:1rem}
  .u-home-useful__card{
    padding:1.55rem;
    border-radius:22px;
  }
  .u-home-useful__card h3{font-size:1.42rem}
  .u-home-useful__card p{font-size:1.06rem;line-height:1.58}
}

/* ==========================================================
   CORPORATE HOMEPAGE — DIAGNOSTIC METHOD — v0.22
   Editorial two-part rhythm. Deliberately avoids another card grid
   after the "When is Undiluted useful?" section.
   ========================================================== */

.u-home-diagnostic{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(234,242,255,.62) 0,rgba(247,249,252,.76) 38%,#fff 72%);
  border-top:1px solid rgba(220,229,239,.72);
  border-bottom:1px solid rgba(220,229,239,.72);
}

.u-home-diagnostic::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:clamp(5px,.55vw,9px);
  background:linear-gradient(180deg,var(--u-blue-500),var(--u-blue-700));
}

.u-home-diagnostic__layout{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(3rem,7vw,8rem);
  align-items:start;
}

.u-home-diagnostic__intro{
  max-width:610px;
  padding-right:clamp(0rem,2vw,2rem);
}

.u-home-diagnostic__intro::before{
  content:"";
  display:block;
  width:72px;
  height:4px;
  margin:0 0 1.5rem;
  border-radius:999px;
  background:var(--u-blue-600);
}

.u-home-diagnostic__lead{
  margin:1.7rem 0 0;
  color:#344a63;
  font-size:clamp(1.15rem,1.55vw,1.34rem);
  line-height:1.65;
}

.u-home-diagnostic__body{
  max-width:760px;
  border-top:1px solid rgba(11,94,232,.34);
}

.u-home-diagnostic__body p{
  margin:0;
  padding:clamp(1.35rem,2.3vw,1.9rem) 0;
  color:var(--u-text);
  font-size:clamp(1.04rem,1.16vw,1.16rem);
  line-height:1.68;
  border-bottom:1px solid var(--u-line);
}

.u-home-diagnostic__body p:first-child{
  color:var(--u-navy-900);
  font-size:clamp(1.1rem,1.28vw,1.23rem);
  font-weight:620;
}

.u-home-diagnostic__body p:last-child{border-bottom:0}

@media(max-width:900px){
  .u-home-diagnostic__layout{
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .u-home-diagnostic__intro{max-width:760px;padding-right:0}
  .u-home-diagnostic__body{max-width:900px}
}

@media(max-width:700px){
  .u-home-diagnostic::before{width:4px}
  .u-home-diagnostic__intro::before{width:56px;margin-bottom:1.2rem}
  .u-home-diagnostic__lead{margin-top:1.35rem;font-size:1.08rem;line-height:1.6}
  .u-home-diagnostic__layout{gap:2rem}
  .u-home-diagnostic__body p{padding:1.15rem 0;font-size:1.03rem;line-height:1.62}
  .u-home-diagnostic__body p:first-child{font-size:1.08rem}
}



/* ==========================================================
   CORPORATE HOMEPAGE — HOW UNDILUTED WORKS — v0.23
   Process spine: six sequential phases without repeating the
   frosted-card or editorial split treatments used above.
   ========================================================== */

.u-home-process{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 10%,rgba(45,126,220,.20),transparent 28rem),
    linear-gradient(145deg,#07182d 0%,#0b2340 58%,#102c4d 100%);
  color:#eef5fb;
}

.u-home-process .u-heading-xl{
  margin:0;
  max-width:720px;
  color:#fff;
}

.u-home-process__rule{
  width:78px;
  height:4px;
  margin:1.45rem 0 0;
  border-radius:999px;
  background:#5da7ff;
}

.u-home-process__list{
  margin-top:clamp(2.5rem,4.5vw,4rem);
  border-top:1px solid rgba(255,255,255,.20);
}

.u-home-process__item{
  display:grid;
  grid-template-columns:90px minmax(180px,.42fr) minmax(0,1fr);
  gap:clamp(1.2rem,2.7vw,3rem);
  align-items:start;
  padding:clamp(1.45rem,2.4vw,2.05rem) 0;
  border-bottom:1px solid rgba(255,255,255,.16);
}

.u-home-process__number{
  color:#72b5ff;
  font-size:clamp(1.05rem,1.35vw,1.28rem);
  font-weight:760;
  line-height:1.25;
  letter-spacing:.08em;
}

.u-home-process__item h3{
  margin:0;
  color:#fff;
  font-size:clamp(1.45rem,1.9vw,1.9rem);
  font-weight:740;
  line-height:1.15;
  letter-spacing:-.025em;
}

.u-home-process__item p{
  margin:0;
  max-width:830px;
  color:rgba(238,245,251,.86);
  font-size:clamp(1.02rem,1.13vw,1.14rem);
  line-height:1.65;
}

@media(max-width:850px){
  .u-home-process__item{
    grid-template-columns:66px minmax(150px,.38fr) minmax(0,1fr);
    gap:1rem 1.4rem;
  }
}

@media(max-width:650px){
  .u-home-process__list{margin-top:2.2rem}
  .u-home-process__item{
    grid-template-columns:54px 1fr;
    gap:.55rem 1rem;
    padding:1.35rem 0 1.45rem;
  }
  .u-home-process__number{
    grid-row:1 / span 2;
    padding-top:.18rem;
    font-size:1rem;
  }
  .u-home-process__item h3{font-size:1.4rem}
  .u-home-process__item p{
    grid-column:2;
    font-size:1.02rem;
    line-height:1.6;
  }
}


/* ==========================================================
   SHARED SCROLL REVEAL — v0.24
   Progressive enhancement only. Content remains visible when JavaScript
   is unavailable. Motion is disabled for users who prefer reduced motion.
   ========================================================== */

.u-motion-ready .u-reveal{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:
    opacity 520ms cubic-bezier(.2,.65,.3,1) var(--u-reveal-delay,0ms),
    transform 520ms cubic-bezier(.2,.65,.3,1) var(--u-reveal-delay,0ms);
  will-change:opacity,transform;
}

.u-motion-ready .u-reveal.u-reveal--visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

@media (prefers-reduced-motion: reduce){
  .u-motion-ready .u-reveal,
  .u-motion-ready .u-reveal.u-reveal--visible{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ==========================================================
   CORPORATE HOMEPAGE — AI CONSIDERATION — v0.26
   Strategic technology consideration, not an AI-company treatment.
   Uses a small CSS/HTML AI marker rather than an external icon asset.
   ========================================================== */

.u-home-ai{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 18%,rgba(32,122,236,.12),transparent 24rem),
    linear-gradient(135deg,#f7f9fd 0%,#eef4fb 52%,#f9fbfd 100%);
  border-top:1px solid rgba(212,225,239,.86);
  border-bottom:1px solid rgba(212,225,239,.86);
}

.u-home-ai::after{
  content:"";
  position:absolute;
  width:380px;
  height:380px;
  right:-120px;
  bottom:-210px;
  border:1px solid rgba(11,94,232,.10);
  border-radius:50%;
  box-shadow:
    0 0 0 54px rgba(11,94,232,.035),
    0 0 0 108px rgba(11,94,232,.022);
  pointer-events:none;
}

.u-home-ai__layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(3rem,7vw,7.5rem);
  align-items:start;
}

.u-home-ai__intro{
  max-width:650px;
}

.u-home-ai__marker{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin:0 0 1.4rem;
  padding:.42rem .72rem .42rem .48rem;
  border:1px solid rgba(11,94,232,.18);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:0 8px 24px rgba(16,48,82,.07);
  color:var(--u-navy-900);
  font-size:.82rem;
  font-weight:760;
  letter-spacing:.08em;
  line-height:1;
}

.u-home-ai__marker-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:linear-gradient(145deg,var(--u-blue-500),var(--u-blue-700));
  color:#fff;
  font-size:.72rem;
  font-weight:820;
  letter-spacing:-.02em;
  box-shadow:0 7px 18px rgba(11,94,232,.24);
}

.u-home-ai__marker-spark{
  color:var(--u-blue-600);
  font-size:.95rem;
  line-height:1;
}

.u-home-ai .u-heading-xl{
  margin:0;
  max-width:700px;
}

.u-home-ai__lead{
  margin:1.7rem 0 0;
  color:#344a63;
  font-size:clamp(1.12rem,1.48vw,1.3rem);
  line-height:1.66;
}

.u-home-ai__principle{
  margin:clamp(2rem,4vw,3rem) 0 0;
  padding:clamp(1.45rem,2.6vw,2rem) 0 clamp(1.45rem,2.6vw,2rem) clamp(1.25rem,2vw,1.8rem);
  border-left:4px solid var(--u-blue-600);
  color:var(--u-navy-900);
  font-size:clamp(1.08rem,1.28vw,1.22rem);
  font-weight:620;
  line-height:1.62;
}

.u-home-ai__details{
  max-width:780px;
  border-top:1px solid rgba(11,94,232,.32);
}

.u-home-ai__details p{
  position:relative;
  margin:0;
  padding:clamp(1.45rem,2.4vw,2rem) 0;
  color:var(--u-text);
  font-size:clamp(1.03rem,1.15vw,1.15rem);
  line-height:1.68;
  border-bottom:1px solid var(--u-line);
}

.u-home-ai__details p::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin:0 .8rem .12rem 0;
  border-radius:50%;
  background:var(--u-blue-600);
  box-shadow:0 0 0 5px rgba(11,94,232,.08);
}

.u-home-ai__details p:last-child{border-bottom:0}

@media(max-width:900px){
  .u-home-ai__layout{
    grid-template-columns:1fr;
    gap:2.6rem;
  }
  .u-home-ai__intro,
  .u-home-ai__details{max-width:900px}
}

@media(max-width:700px){
  .u-home-ai__marker{margin-bottom:1.15rem}
  .u-home-ai__lead{margin-top:1.35rem;font-size:1.08rem;line-height:1.6}
  .u-home-ai__principle{
    margin-top:1.65rem;
    padding:1.2rem 0 1.2rem 1rem;
    border-left-width:3px;
    font-size:1.06rem;
  }
  .u-home-ai__layout{gap:2rem}
  .u-home-ai__details p{padding:1.2rem 0;font-size:1.03rem;line-height:1.62}
  .u-home-ai::after{width:260px;height:260px;right:-120px;bottom:-150px}
}


/* ==========================================================
   CORPORATE HOMEPAGE — INDEPENDENT JUDGEMENT / FLEXIBLE DELIVERY — v0.27
   Deliberate split treatment: judgement stays visually distinct from delivery.
   ========================================================== */

.u-home-independent{
  position:relative;
  overflow:hidden;
  background:#f7f9fc;
  border-top:1px solid rgba(212,225,239,.78);
  border-bottom:1px solid rgba(212,225,239,.78);
}

.u-home-independent__shell{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  min-height:clamp(520px,44vw,690px);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 22px 54px rgba(17,45,75,.10);
  border:1px solid rgba(190,207,225,.62);
}

.u-home-independent__judgement{
  position:relative;
  isolation:isolate;
  padding:clamp(3rem,5.6vw,5.4rem);
  background:
    radial-gradient(circle at 12% 14%,rgba(47,137,255,.20),transparent 18rem),
    linear-gradient(145deg,#061a34 0%,#0a2c53 100%);
  color:#fff;
}

.u-home-independent__judgement::after{
  content:"";
  position:absolute;
  inset:auto -115px -150px auto;
  width:330px;
  height:330px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  box-shadow:
    0 0 0 52px rgba(255,255,255,.028),
    0 0 0 104px rgba(255,255,255,.018);
  pointer-events:none;
  z-index:-1;
}

.u-home-independent__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  margin:0 0 1.3rem;
  color:#9fc9ff;
  font-size:.78rem;
  font-weight:780;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.u-home-independent__eyebrow::before{
  content:"";
  width:30px;
  height:2px;
  background:#54a4ff;
  border-radius:999px;
}

.u-home-independent__judgement .u-heading-xl{
  margin:0;
  max-width:650px;
  color:#fff;
}

.u-home-independent__intro{
  margin:1.75rem 0 0;
  max-width:650px;
  color:rgba(255,255,255,.82);
  font-size:clamp(1.08rem,1.35vw,1.24rem);
  line-height:1.66;
}

.u-home-independent__principle{
  position:relative;
  margin:clamp(2.4rem,4vw,3.4rem) 0 0;
  padding:1.55rem 0 0;
  max-width:650px;
  border-top:1px solid rgba(159,201,255,.34);
  color:#fff;
  font-size:clamp(1.08rem,1.28vw,1.22rem);
  font-weight:620;
  line-height:1.62;
}

.u-home-independent__delivery{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(3rem,5.6vw,5.4rem);
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,250,253,.98));
}

.u-home-independent__delivery p{
  position:relative;
  margin:0;
  padding:clamp(1.45rem,2.5vw,2rem) 0 clamp(1.45rem,2.5vw,2rem) 2.25rem;
  color:var(--u-text);
  font-size:clamp(1.04rem,1.16vw,1.16rem);
  line-height:1.7;
  border-bottom:1px solid var(--u-line);
}

.u-home-independent__delivery p:first-child{
  border-top:1px solid var(--u-line);
}

.u-home-independent__delivery p::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(50% - 5px);
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--u-blue-600);
  box-shadow:0 0 0 6px rgba(11,94,232,.08);
}

.u-home-independent__delivery p:last-child{
  color:var(--u-navy-900);
  font-weight:620;
}

@media(max-width:900px){
  .u-home-independent__shell{
    grid-template-columns:1fr;
    min-height:0;
  }
  .u-home-independent__judgement,
  .u-home-independent__delivery{
    padding:clamp(2.4rem,7vw,4rem);
  }
}

@media(max-width:700px){
  .u-home-independent__shell{border-radius:20px}
  .u-home-independent__eyebrow{margin-bottom:1rem;font-size:.72rem}
  .u-home-independent__intro{margin-top:1.35rem;font-size:1.07rem;line-height:1.6}
  .u-home-independent__principle{margin-top:2rem;padding-top:1.25rem;font-size:1.06rem}
  .u-home-independent__delivery p{
    padding:1.25rem 0 1.25rem 1.85rem;
    font-size:1.03rem;
    line-height:1.62;
  }
  .u-home-independent__delivery p::before{width:8px;height:8px;box-shadow:0 0 0 5px rgba(11,94,232,.08)}
}

/* ==========================================================
   CORPORATE HOMEPAGE — EXPERIENCE BEHIND THE JUDGEMENT — v0.28
   Credibility-led editorial section with a strong 35+ anchor.
   ========================================================== */

.u-home-experience{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 22%,rgba(47,137,255,.09),transparent 27rem),
    linear-gradient(180deg,#ffffff 0%,#f5f8fc 100%);
  border-bottom:1px solid rgba(212,225,239,.78);
}

.u-home-experience__layout{
  display:grid;
  grid-template-columns:minmax(240px,.58fr) minmax(0,1.42fr);
  gap:clamp(3rem,7vw,7rem);
  align-items:start;
}

.u-home-experience__anchor{
  position:sticky;
  top:clamp(90px,10vw,130px);
  padding:clamp(2rem,3.6vw,3.2rem);
  border-left:4px solid var(--u-blue-600);
}

.u-home-experience__number{
  display:block;
  margin:0;
  color:var(--u-navy-900);
  font-size:clamp(5.5rem,10vw,9.5rem);
  font-weight:820;
  letter-spacing:-.075em;
  line-height:.78;
}

.u-home-experience__years{
  display:block;
  margin:1.15rem 0 0 .35rem;
  color:var(--u-blue-600);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.u-home-experience__content{
  max-width:860px;
}

.u-home-experience .u-heading-xl{
  margin:0 0 clamp(1.7rem,3vw,2.5rem);
}

.u-home-experience__content p{
  margin:0;
  padding:0 0 clamp(1.35rem,2.2vw,1.8rem);
  color:var(--u-text);
  font-size:clamp(1.04rem,1.16vw,1.16rem);
  line-height:1.72;
}

.u-home-experience__content p + p{
  padding-top:clamp(1.35rem,2.2vw,1.8rem);
  border-top:1px solid var(--u-line);
}

.u-home-experience__content p:first-of-type{
  color:var(--u-navy-900);
  font-size:clamp(1.12rem,1.4vw,1.28rem);
  line-height:1.66;
}

.u-home-experience__content p:last-of-type{
  color:var(--u-navy-900);
  font-weight:620;
}

.u-home-experience__sectors{
  display:flex;
  flex-wrap:wrap;
  column-gap:1.25rem;
  row-gap:.8rem;
  margin-top:clamp(2rem,3vw,2.8rem);
  padding-top:clamp(1.8rem,3vw,2.4rem);
  border-top:1px solid rgba(11,94,232,.25);
}

.u-home-experience__sector{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#3d5872;
  font-size:.82rem;
  font-weight:650;
  line-height:1.35;
}

.u-home-experience__sector::before{
  content:"";
  flex:0 0 auto;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--u-blue-600);
  opacity:.72;
}

@media(max-width:900px){
  .u-home-experience__layout{
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .u-home-experience__anchor{
    position:relative;
    top:auto;
    display:flex;
    align-items:flex-end;
    gap:1.1rem;
    padding:0 0 1.8rem 1.3rem;
  }
  .u-home-experience__number{font-size:clamp(5rem,18vw,7.5rem)}
  .u-home-experience__years{margin:0 0 .25rem}
  .u-home-experience__content{max-width:900px}
}

@media(max-width:700px){
  .u-home-experience__layout{gap:1.9rem}
  .u-home-experience__anchor{padding-left:1rem;border-left-width:3px}
  .u-home-experience__content p{font-size:1.03rem;line-height:1.64}
  .u-home-experience__content p:first-of-type{font-size:1.08rem;line-height:1.6}
  .u-home-experience__sectors{column-gap:1rem;row-gap:.65rem}
  .u-home-experience__sector{font-size:.77rem}
}


/* ==========================================================
   CORPORATE HOMEPAGE — EXPERIENCE PHOTO REFINEMENT — v0.29
   Existing founder portrait restored as the primary visual;
   the 35+ marker becomes supporting evidence rather than a substitute.
   ========================================================== */

.u-home-experience__visual{
  position:sticky;
  top:clamp(88px,9vw,120px);
  align-self:start;
}

.u-home-experience__photo-frame{
  position:relative;
  overflow:hidden;
  width:min(100%,420px);
  aspect-ratio:4 / 5;
  border-radius:26px;
  border:1px solid rgba(170,194,219,.72);
  background:#dfe8f2;
  box-shadow:0 24px 56px rgba(18,45,77,.13);
}

.u-home-experience__photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;
}

.u-home-experience__visual .u-home-experience__anchor{
  position:relative;
  top:auto;
  display:flex;
  align-items:flex-end;
  gap:1rem;
  width:min(100%,420px);
  margin-top:1.4rem;
  padding:1.1rem 0 0 1.25rem;
  border-left:4px solid var(--u-blue-600);
}

.u-home-experience__visual .u-home-experience__number{
  font-size:clamp(4rem,7vw,6.4rem);
  line-height:.82;
}

.u-home-experience__visual .u-home-experience__years{
  margin:0 0 .4rem;
}

@media(max-width:900px){
  .u-home-experience__visual{
    position:relative;
    top:auto;
    display:grid;
    grid-template-columns:minmax(180px,320px) 1fr;
    gap:1.5rem;
    align-items:end;
  }
  .u-home-experience__photo-frame{width:100%}
  .u-home-experience__visual .u-home-experience__anchor{
    width:auto;
    margin:0;
    padding:0 0 1.2rem 1.15rem;
  }
}

@media(max-width:620px){
  .u-home-experience__visual{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .u-home-experience__photo-frame{
    width:min(100%,360px);
    aspect-ratio:1 / 1.12;
  }
  .u-home-experience__visual .u-home-experience__anchor{
    width:min(100%,360px);
    margin:0;
  }
}


/* ==========================================================
   CORPORATE HOMEPAGE — EXPERIENCE TAXONOMY REFINEMENT — v0.31
   Experience areas are informational labels, not controls.
   ========================================================== */


/* ==========================================================
   CORPORATE HOMEPAGE — CAREER CLARITY FEATURE — v0.32
   Uses the approved Career Clarity mountain/sunrise hero asset.
   ========================================================== */
.u-home-career{
  position:relative;
  padding-block:clamp(4.5rem,7vw,7rem);
  background:#f4f7fb;
}

.u-home-career__scene{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(700px,57vw,840px);
  border:1px solid rgba(170,194,219,.72);
  border-radius:30px;
  background-image:url("../images/career-clarity-hero-approved.png");
  background-size:cover;
  background-position:center center;
  box-shadow:0 30px 70px rgba(18,45,77,.14);
}

.u-home-career__scene::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(3,22,52,.06) 0%,rgba(3,22,52,0) 58%);
  pointer-events:none;
}

.u-home-career__content{
  width:min(1180px,calc(100% - 2.5rem));
  margin:1.25rem;
  padding:clamp(1.7rem,2.5vw,2.5rem);
  border:1px solid rgba(255,255,255,.75);
  border-radius:24px;
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  backdrop-filter:blur(18px) saturate(125%);
  box-shadow:0 24px 54px rgba(11,31,56,.16), inset 0 1px 0 rgba(255,255,255,.9);
}

.u-home-career__eyebrow{
  margin:0 0 1rem;
  color:var(--u-navy-900);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.015em;
}

.u-home-career__eyebrow span{
  font-size:.78em;
  font-weight:600;
  opacity:.76;
}

.u-home-career__content .u-heading-xl{
  max-width:20ch;
  margin:0 0 1.15rem;
  color:var(--u-navy-900);
  font-size:clamp(2.3rem,4.4vw,4.2rem);
  line-height:.98;
  letter-spacing:-.035em;
}

.u-home-career__lead{
  max-width:82ch;
  margin:0 0 1rem;
  color:#233d58;
  font-size:clamp(1.05rem,1.35vw,1.2rem);
  line-height:1.58;
}

.u-home-career__body{
  max-width:88ch;
  margin:0;
  color:#334e68;
  font-size:1rem;
  line-height:1.65;
}

.u-home-career__meta{
  max-width:92ch;
  margin:1.2rem 0 0;
  padding-top:1.1rem;
  border-top:1px solid rgba(46,118,236,.2);
  color:#334e68;
  font-size:1rem;
  line-height:1.65;
}

.u-home-career__body strong{
  color:#17324f;
  font-weight:750;
}

.u-home-career__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  align-items:center;
  margin-top:1.55rem;
}

.u-home-career__actions .u-button{
  min-width:210px;
}

@media(max-width:900px){
  .u-home-career__scene{
    min-height:680px;
    background-position:58% center;
  }
  .u-home-career__content{
    width:calc(100% - 2.4rem);
    margin:1.2rem;
  }
}

@media(max-width:620px){
  .u-home-career{
    padding-block:3.2rem;
  }
  .u-home-career__scene{
    min-height:760px;
    border-radius:24px;
    background-position:61% center;
  }
  .u-home-career__content{
    width:calc(100% - 1.4rem);
    margin:.7rem;
    padding:1.35rem;
    border-radius:20px;
    background:rgba(255,255,255,.84);
  }
  .u-home-career__content .u-heading-xl{
    max-width:none;
    font-size:clamp(2.15rem,10vw,3.2rem);
  }
  .u-home-career__actions .u-button{
    width:100%;
  }
}

/* Career Clarity text hierarchy refinement — v0.33 */

/* ==========================================================
   CAREER CLARITY HOMEPAGE — WIDE / RAISED GLASS PANEL — v0.34
   The panel is deliberately wider and shallower so the approved
   signpost and lower mountain steps remain visible below it.
   ========================================================== */


/* ==========================================================
   CAREER CLARITY HOMEPAGE — RAISED PANEL / SIGNPOST REVEAL — v0.35
   Desktop only: the panel uses its width instead of growing vertically.
   This deliberately raises the lower edge by roughly 25–30% so the
   approved signpost and mountain steps remain visible beneath it.
   ========================================================== */
@media(min-width:901px){
  .u-home-career__content{
    width:calc(100% - 1.6rem);
    margin:.8rem;
    padding:1.25rem clamp(1.6rem,2.5vw,2.25rem) 1.35rem;
    display:grid;
    grid-template-columns:minmax(0,1.48fr) minmax(270px,.52fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "title title"
      "lead meta"
      "body meta"
      "actions meta";
    column-gap:clamp(1.65rem,3.3vw,3.25rem);
    row-gap:.55rem;
    align-items:start;
  }

  .u-home-career__eyebrow{
    grid-area:eyebrow;
    margin:0;
  }

  .u-home-career__content .u-heading-xl{
    grid-area:title;
    max-width:30ch;
    margin:0 0 .1rem;
    font-size:clamp(2.2rem,4vw,4.05rem);
    line-height:.96;
  }

  .u-home-career__lead{
    grid-area:lead;
    max-width:none;
    margin:0;
    line-height:1.48;
  }

  .u-home-career__body{
    grid-area:body;
    max-width:none;
    margin:0;
    line-height:1.55;
  }

  .u-home-career__meta{
    grid-area:meta;
    max-width:none;
    margin:0;
    padding:0 0 0 clamp(1.2rem,2vw,1.8rem);
    border-top:0;
    border-left:1px solid rgba(46,118,236,.22);
    font-size:.97rem;
    line-height:1.55;
  }

  .u-home-career__actions{
    grid-area:actions;
    margin-top:.1rem;
  }
}

/* Career Clarity raised further to reveal signpost/steps — v0.36 */


/* ==========================================================
   CORPORATE HOMEPAGE — FINAL CTA / CONTACT — v0.38
   Strong closing section; deliberately not another card grid.
   ========================================================== */

.u-home-contact{
  padding-block:clamp(4.8rem,7vw,7.5rem);
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 22%,rgba(46,118,236,.26),transparent 32rem),
    linear-gradient(135deg,#061b39 0%,#08254c 52%,#071a34 100%);
  color:#fff;
}

.u-home-contact__layout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:clamp(3rem,6vw,6.5rem);
  align-items:end;
}

.u-home-contact__eyebrow{
  margin:0 0 1rem;
  color:#9ec5ff;
  font-size:.86rem;
  font-weight:760;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.u-home-contact .u-heading-xl{
  max-width:16ch;
  margin:0;
  color:#fff;
  font-size:clamp(2.7rem,5vw,5.25rem);
  line-height:.98;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.u-home-contact__lead{
  max-width:62ch;
  margin:1.55rem 0 0;
  color:rgba(255,255,255,.82);
  font-size:clamp(1.05rem,1.35vw,1.22rem);
  line-height:1.65;
}

.u-home-contact__action{
  padding-left:clamp(1.8rem,3vw,3rem);
  border-left:1px solid rgba(255,255,255,.2);
}

.u-home-contact__action-title{
  margin:0 0 .75rem;
  color:#fff;
  font-size:1.12rem;
  font-weight:760;
}

.u-home-contact__action-copy{
  margin:0 0 1.5rem;
  color:rgba(255,255,255,.74);
  font-size:1rem;
  line-height:1.6;
}

.u-home-contact__buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  align-items:center;
}

.u-home-contact .u-button--light{
  min-height:52px;
  padding:0 1.55rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.95);
  border-radius:999px;
  background:#fff;
  color:#092447;
  font-weight:760;
  text-decoration:none;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.u-home-contact .u-button--light:hover,
.u-home-contact .u-button--light:focus-visible{
  transform:translateY(-1px);
  background:#f5f9ff;
  box-shadow:0 16px 34px rgba(0,0,0,.2);
}

.u-home-contact__contact{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem 1rem;
  margin-top:1.35rem;
  color:rgba(255,255,255,.68);
  font-size:.94rem;
}

.u-home-contact__contact a{
  color:#fff;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.u-home-contact__contact span[aria-hidden="true"]{
  opacity:.45;
}

@media(max-width:900px){
  .u-home-contact__layout{
    grid-template-columns:1fr;
    align-items:start;
  }

  .u-home-contact__action{
    padding-left:0;
    padding-top:1.8rem;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.2);
  }

  .u-home-contact .u-heading-xl{
    max-width:18ch;
  }
}

@media(max-width:620px){
  .u-home-contact{
    padding-block:4.25rem;
  }

  .u-home-contact .u-heading-xl{
    font-size:clamp(2.45rem,12vw,3.65rem);
  }

  .u-home-contact__buttons,
  .u-home-contact .u-button--light{
    width:100%;
  }

  .u-home-contact__contact{
    flex-direction:column;
    align-items:flex-start;
  }

  .u-home-contact__contact span[aria-hidden="true"]{
    display:none;
  }
}


/* ==========================================================
   UNDILUTED-CONTROLLED GLOBAL HEADER + FOOTER — v0.39
   Astra remains the deployment framework only. Its visible
   masthead/footer are suppressed in favour of portable,
   server-rendered Undiluted components.
   ========================================================== */

/* Hide Astra's visible global chrome, but leave Astra/WordPress
   page/content structure intact. */
#masthead,
header.site-header:not(.u-global-header),
#colophon,
footer.site-footer:not(.u-global-footer){
  display:none !important;
}

/* Header */
.u-global-header{
  position:relative;
  z-index:40;
  width:100%;
  border-bottom:1px solid rgba(220,229,239,.88);
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.u-global-header__inner{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.u-global-header__brand{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  line-height:0;
}

.u-global-header__logo{
  display:block;
  width:auto;
  height:48px;
  max-width:min(250px,58vw);
}

.u-global-header__nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(1rem,2.2vw,2rem);
}

.u-global-header__nav a{
  position:relative;
  color:var(--u-navy-900);
  font-size:1rem;
  font-weight:650;
  line-height:1.2;
  text-decoration:none;
}

.u-global-header__nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-9px;
  height:2px;
  border-radius:2px;
  background:var(--u-blue-600);
  transition:right var(--u-ease);
}

.u-global-header__nav a:hover::after,
.u-global-header__nav a:focus-visible::after,
.u-global-header__nav a[aria-current="page"]::after{
  right:0;
}

/* Footer */
.u-global-footer{
  width:100%;
  border-top:1px solid var(--u-line);
  background:#fff;
  color:var(--u-muted);
}

.u-global-footer__inner{
  min-height:108px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem 3rem;
}

.u-global-footer__copyright{
  margin:0;
  font-size:.92rem;
  line-height:1.45;
}

.u-global-footer__contact{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:.5rem .85rem;
  font-size:.92rem;
}

.u-global-footer__contact a{
  color:var(--u-navy-900);
  text-decoration:none;
}

.u-global-footer__contact a:hover,
.u-global-footer__contact a:focus-visible{
  color:var(--u-blue-700);
  text-decoration:underline;
  text-underline-offset:3px;
}

.u-global-footer__contact span[aria-hidden="true"]{
  color:#9caec2;
}

/* Do not animate global navigation/chrome as page content enters view. */
.u-global-header,
.u-global-footer{
  opacity:1 !important;
  transform:none !important;
}

@media(max-width:700px){
  .u-global-header__inner{
    min-height:78px;
    flex-direction:row;
    align-items:center;
    padding-block:.55rem;
  }

  .u-global-header__logo{
    height:40px;
    max-width:min(210px,62vw);
  }

  .u-global-header__nav{
    width:auto;
  }

  .u-global-footer__inner{
    min-height:124px;
    padding-block:1.5rem;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:.65rem;
  }

  .u-global-footer__contact{
    justify-content:flex-start;
  }
}

@media(max-width:440px){
  .u-global-footer__contact{
    flex-direction:column;
    align-items:flex-start;
    gap:.3rem;
  }

  .u-global-footer__contact span[aria-hidden="true"]{
    display:none;
  }
}


/* ==========================================================
   GLOBAL HEADER / FOOTER VISUAL REFINEMENT — v0.40
   ========================================================== */

@media(min-width:701px){
  .u-global-header__inner{
    min-height:88px;
  }

  .u-global-header__logo{
    width:220px;
    height:auto;
    max-width:34vw;
    max-height:none;
  }

  .u-global-footer__inner{
    min-height:88px;
  }
}


/* ==========================================================
   PRIMARY CTA LINK-STATE CORRECTION — v0.41
   Prevent browser/Astra visited-link styling from changing
   button-label colour after a CTA has been clicked.
   ========================================================== */
a.u-button.u-button--primary,
a.u-button.u-button--primary:link,
a.u-button.u-button--primary:visited,
a.u-button.u-button--primary:hover,
a.u-button.u-button--primary:focus,
a.u-button.u-button--primary:focus-visible,
a.u-button.u-button--primary:active{
  color:#fff !important;
  -webkit-text-fill-color:#fff;
}


/* ==========================================================
   CLOSING CTA COMPONENT — PRIMARY VISUAL VARIANT — v0.44
   The HTML declares u-button--primary; CSS owns all appearance.
   No functionality or href values are altered here.
   ========================================================== */
.u-home-contact__buttons .u-button--primary{
  background:linear-gradient(135deg,var(--u-blue-600),#0863e8);
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 28px rgba(29,111,242,.20);
}

.u-home-contact__buttons .u-button--primary:hover,
.u-home-contact__buttons .u-button--primary:focus-visible{
  background:linear-gradient(135deg,#0d64e9,#0758cf);
  color:#fff;
  box-shadow:0 14px 34px rgba(29,111,242,.26);
}


/* ==========================================================
   ACCESSIBLE BUTTON FOCUS HANDLING — v0.45
   Remove the browser/Astra focus outline after pointer clicks,
   while retaining a deliberate keyboard-only focus indicator.
   ========================================================== */

a.u-button:focus,
button.u-button:focus{
  outline:none !important;
}

/* Pointer/mouse focus should not leave a visible ring after
   returning from an external mail client or other action. */
a.u-button:focus:not(:focus-visible),
button.u-button:focus:not(:focus-visible){
  outline:none !important;
}

/* Keyboard users still receive a clear, deliberate focus state. */
a.u-button:focus-visible,
button.u-button:focus-visible{
  outline:3px solid rgba(29,111,242,.72) !important;
  outline-offset:3px;
}


/* ==========================================================
   CAREER CLARITY PUBLIC PAGE — v0.46
   One-page public orientation/marketing surface using the
   shared Undiluted design language. App/access wiring remains
   a separate release task.
   ========================================================== */

/* Career Clarity may be rendered either as one wrapped page (.u-cc-page)
   or as independent WordPress Custom HTML blocks (.u-cc-section-root). */
.u-cc-page,
.u-cc-section-root{
  background:#fff;
  color:var(--u-text);
}
.u-cc-page section,
.u-cc-section-root{scroll-margin-top:24px}
.u-cc-eyebrow{
  margin:0 0 .9rem;
  color:var(--u-blue-700);
  font-size:.78rem;
  font-weight:780;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.u-cc-section-head{
  max-width:820px;
  margin-bottom:clamp(2rem,4vw,3.4rem);
}
.u-cc-section-head .u-heading-xl{margin-bottom:1rem}
.u-cc-section-head p{
  margin:0;
  color:#4b5f77;
  font-size:clamp(1.03rem,1.3vw,1.15rem);
  line-height:1.7;
}

/* Hero */
.u-cc-hero{
  position:relative;
  min-height:690px;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-block:clamp(52px,6vw,90px);
  background:
    linear-gradient(90deg,rgba(5,21,44,.20),rgba(5,21,44,.06)),
    url('../images/career-clarity-hero-approved.png') center/cover no-repeat;
}
.u-cc-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(5,22,45,.12));
}
.u-cc-hero__inner{position:relative;z-index:2}
.u-cc-hero__panel{
  width:min(760px,66vw);
  padding:clamp(2rem,4vw,3.6rem);
  border:1px solid rgba(255,255,255,.70);
  border-radius:30px;
  background:rgba(255,255,255,.80);
  box-shadow:0 26px 70px rgba(5,22,45,.18);
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
}
.u-cc-hero__panel .u-heading-hero{
  max-width:700px;
  font-size:clamp(2.5rem,4.6vw,4.45rem);
}
.u-cc-hero__lead{
  margin:1.35rem 0 0;
  max-width:680px;
  color:#263b54;
  font-size:clamp(1.08rem,1.5vw,1.23rem);
  line-height:1.68;
}
.u-cc-hero__body{
  margin:1rem 0 0;
  max-width:690px;
  color:#43566d;
  font-size:1.02rem;
  line-height:1.7;
}
.u-cc-hero__body strong{color:var(--u-navy-950)}
.u-cc-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:.85rem;
}
.u-cc-hero__note{
  margin:1rem 0 0;
  color:#60738a;
  font-size:.9rem;
}

/* Recognition */
.u-cc-recognition{
  background:
    radial-gradient(circle at 18% 12%,rgba(61,130,246,.16),transparent 27rem),
    linear-gradient(180deg,#edf5ff 0%,#f7fbff 100%);
}
.u-cc-recognition__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.1rem;
}
.u-cc-recognition__card{
  min-height:210px;
  padding:1.55rem;
  border:1px solid rgba(255,255,255,.78);
  border-radius:22px;
  background:rgba(255,255,255,.66);
  box-shadow:0 14px 38px rgba(7,22,45,.07);
  backdrop-filter:blur(12px);
}
.u-cc-recognition__card::before{
  content:"";
  display:block;
  width:34px;
  height:4px;
  margin-bottom:1.15rem;
  border-radius:999px;
  background:var(--u-blue-600);
}
.u-cc-recognition__card h3{
  margin:0 0 .75rem;
  color:var(--u-navy-950);
  font-size:1.12rem;
  line-height:1.35;
}
.u-cc-recognition__card p{
  margin:0;
  color:#53667d;
  font-size:.97rem;
  line-height:1.62;
}

/* Different by design */
.u-cc-different{background:#fff}
.u-cc-different__layout{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:clamp(2.4rem,5vw,6rem);
  align-items:start;
}
.u-cc-different__intro{
  position:sticky;
  top:32px;
}
.u-cc-different__intro p{
  margin:1.15rem 0 0;
  color:#53667d;
  font-size:1.08rem;
  line-height:1.7;
}
.u-cc-different__list{border-top:1px solid var(--u-line)}
.u-cc-different__item{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:1.2rem;
  padding:1.6rem 0;
  border-bottom:1px solid var(--u-line);
}
.u-cc-different__number{
  color:var(--u-blue-600);
  font-size:.88rem;
  font-weight:800;
  letter-spacing:.08em;
}
.u-cc-different__item h3{
  margin:0 0 .5rem;
  color:var(--u-navy-950);
  font-size:1.18rem;
}
.u-cc-different__item p{
  margin:0;
  color:#52657b;
  line-height:1.7;
}

/* How it works */
.u-cc-how{background:var(--u-surface-soft)}
.u-cc-how__track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,3rem);
}
.u-cc-how__track::before{
  content:"";
  position:absolute;
  top:28px;
  left:8%;
  right:8%;
  height:1px;
  background:#cddbea;
}
.u-cc-how__step{position:relative;z-index:1}
.u-cc-how__number{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--u-navy-950);
  color:#fff;
  box-shadow:0 10px 25px rgba(7,22,45,.14);
  font-weight:800;
}
.u-cc-how__step h3{
  margin:1.2rem 0 .65rem;
  color:var(--u-navy-950);
  font-size:1.25rem;
}
.u-cc-how__step p{margin:0;color:#52657b;line-height:1.7}

/* Why three */
.u-cc-why-three{
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 16%,rgba(61,130,246,.26),transparent 26rem),
    linear-gradient(135deg,#07162d,#0a2449 72%);
  color:#fff;
}
.u-cc-why-three__layout{
  display:grid;
  grid-template-columns:minmax(170px,.38fr) minmax(0,1.62fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.u-cc-why-three__label{
  color:#9fc2ff;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.u-cc-why-three__mark{
  margin-top:.45rem;
  color:#fff;
  font-size:clamp(3.8rem,8vw,7.2rem);
  font-weight:800;
  line-height:.9;
}
.u-cc-why-three__steps{
  margin-top:.45rem;
  color:#9fc2ff;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.u-cc-why-three blockquote{margin:0}
.u-cc-why-three blockquote p{
  margin:0;
  color:#f5f8fd;
  font-size:clamp(1.45rem,2.5vw,2.25rem);
  font-weight:600;
  line-height:1.42;
  letter-spacing:-.02em;
}
.u-cc-why-three blockquote p strong{
  color:#9fc2ff;
  font-weight:800;
}
.u-cc-why-three cite{
  display:block;
  margin-top:1.35rem;
  color:#b9c9dc;
  font-size:.96rem;
  font-style:normal;
}

/* Access / pricing */
.u-cc-access{background:#fff}
.u-cc-access__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.15rem;
  align-items:stretch;
}
.u-cc-plan{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:1.7rem;
  border:1px solid var(--u-line);
  border-radius:24px;
  background:#fff;
  box-shadow:var(--u-shadow-sm);
}
.u-cc-plan--paid{
  border-color:#aac9f5;
  box-shadow:0 20px 50px rgba(29,111,242,.10);
}
.u-cc-plan__tag{
  display:inline-flex;
  align-self:flex-start;
  margin-bottom:1rem;
  padding:.38rem .7rem;
  border-radius:999px;
  background:var(--u-blue-100);
  color:var(--u-blue-700);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.u-cc-plan h3{
  margin:0;
  color:var(--u-navy-950);
  font-size:1.32rem;
}
.u-cc-plan__price{
  margin:.9rem 0 .35rem;
  color:var(--u-navy-950);
  font-size:clamp(1.7rem,2.6vw,2.25rem);
  font-weight:780;
  letter-spacing:-.03em;
}
.u-cc-plan__price small{
  display:block;
  margin-top:.2rem;
  color:#66788f;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:0;
}
.u-cc-plan__intro{
  margin:.2rem 0 1rem;
  color:#53667d;
  line-height:1.65;
}
.u-cc-plan ul{
  margin:.45rem 0 0;
  padding:0;
  list-style:none;
}
.u-cc-plan li{
  position:relative;
  margin:.7rem 0;
  padding-left:1.45rem;
  color:#455a72;
  line-height:1.5;
}
.u-cc-plan li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--u-blue-600);
}
.u-cc-access__code{
  margin-top:1.2rem;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1.5rem;
  align-items:center;
  padding:1.45rem 1.55rem;
  border:1px solid #c7d9ef;
  border-radius:22px;
  background:linear-gradient(135deg,#eef5ff,#f8fbff);
}
.u-cc-access__code h3{margin:0;color:var(--u-navy-950);font-size:1.12rem}
.u-cc-access__code p{margin:.35rem 0 0;color:#53667d;line-height:1.55}
.u-cc-access__note{
  margin:1.2rem 0 0;
  color:#6a7b90;
  font-size:.91rem;
}

/* Organisation-sponsored */
.u-cc-org{
  background:linear-gradient(180deg,#f5f9ff,#edf5ff);
}
.u-cc-org__layout{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);
  gap:clamp(2.5rem,5vw,5rem);
  align-items:center;
}
.u-cc-org__copy p{
  margin:1rem 0 0;
  color:#4b5f77;
  font-size:1.04rem;
  line-height:1.72;
}
.u-cc-org__boundary{
  margin-top:1.4rem;
  padding:1rem 1.1rem;
  border-left:4px solid var(--u-blue-600);
  border-radius:0 14px 14px 0;
  background:rgba(255,255,255,.72);
  color:#263c55;
  font-weight:650;
}
.u-cc-org-mock{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.92);
  border-radius:28px;
  background:rgba(255,255,255,.78);
  box-shadow:0 24px 60px rgba(7,22,45,.13);
  backdrop-filter:blur(16px);
}
.u-cc-org-mock__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.2rem;
  border-bottom:1px solid #e1eaf3;
  background:rgba(255,255,255,.88);
}
.u-cc-org-mock__brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--u-navy-950);
  font-weight:760;
}
.u-cc-org-mock__brandmark{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg,var(--u-navy-950),var(--u-blue-600));
  color:#fff;
  font-size:.83rem;
  font-weight:800;
}
.u-cc-org-mock__powered{color:#74849a;font-size:.78rem}
.u-cc-org-mock__body{padding:clamp(1.6rem,3vw,2.3rem)}
.u-cc-org-mock__kicker{
  margin:0 0 .7rem;
  color:var(--u-blue-700);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.u-cc-org-mock h3{
  margin:0;
  color:var(--u-navy-950);
  font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.18;
}
.u-cc-org-mock__body>p{
  margin:.9rem 0 0;
  color:#53667d;
  line-height:1.65;
}
.u-cc-org-mock__privacy{
  margin-top:1.2rem;
  padding:1rem;
  border:1px solid #c7dbf3;
  border-radius:16px;
  background:#f4f9ff;
}
.u-cc-org-mock__privacy strong{display:block;color:var(--u-navy-950);margin-bottom:.25rem}
.u-cc-org-mock__privacy span{color:#50647d;font-size:.92rem;line-height:1.5}
.u-cc-org-mock__actions{margin-top:1.2rem}
.u-cc-org-mock__caption{
  margin:.75rem 0 0;
  text-align:center;
  color:#718197;
  font-size:.82rem;
}

/* Trust */
.u-cc-trust{background:#fff}
.u-cc-trust__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem;
}
.u-cc-trust__item{
  padding:1.5rem 0 0;
  border-top:3px solid #cfe0f6;
}
.u-cc-trust__item h3{margin:0 0 .6rem;color:var(--u-navy-950);font-size:1.13rem}
.u-cc-trust__item p{margin:0;color:#52657b;line-height:1.68}
.u-cc-trust__small{
  margin:1.7rem 0 0;
  max-width:920px;
  color:#718197;
  font-size:.9rem;
  line-height:1.6;
}

/* Experience */
.u-cc-experience{
  background:linear-gradient(135deg,#07162d,#0a203f);
  color:#fff;
}
.u-cc-experience__layout{
  display:grid;
  grid-template-columns:minmax(190px,.38fr) minmax(0,1.62fr);
  gap:clamp(2.4rem,5vw,5rem);
  align-items:center;
}
.u-cc-experience__stat{
  padding-right:2rem;
  border-right:1px solid rgba(255,255,255,.18);
}
.u-cc-experience__number{
  display:block;
  color:#fff;
  font-size:clamp(4rem,8vw,7rem);
  font-weight:800;
  line-height:.9;
  letter-spacing:-.05em;
}
.u-cc-experience__label{
  display:block;
  margin-top:.7rem;
  color:#9fc2ff;
  font-size:.86rem;
  font-weight:760;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.u-cc-experience .u-heading-xl{color:#fff}
.u-cc-experience .u-cc-eyebrow,
.u-cc-final .u-cc-eyebrow{color:#9fc2ff}
.u-cc-experience__copy p{
  margin:1rem 0 0;
  color:#c7d4e3;
  font-size:1.05rem;
  line-height:1.72;
}

/* FAQ */
.u-cc-faq{background:var(--u-surface-soft)}
.u-cc-faq__list{max-width:980px}
.u-cc-faq details{
  border-bottom:1px solid #d8e3ee;
}
.u-cc-faq summary{
  position:relative;
  padding:1.3rem 2.2rem 1.3rem 0;
  color:var(--u-navy-950);
  font-size:1.08rem;
  font-weight:720;
  cursor:pointer;
  list-style:none;
}
.u-cc-faq summary::-webkit-details-marker{display:none}
.u-cc-faq summary::after{
  content:"+";
  position:absolute;
  right:.1rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--u-blue-600);
  font-size:1.5rem;
  font-weight:500;
}
.u-cc-faq details[open] summary::after{content:"–"}
.u-cc-faq details p{
  margin:-.3rem 0 1.4rem;
  max-width:850px;
  color:#52657b;
  line-height:1.7;
}

/* Final CTA */
.u-cc-final{
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%,rgba(61,130,246,.22),transparent 25rem),
    linear-gradient(135deg,#07162d,#0a2449);
  color:#fff;
}
.u-cc-final__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.68fr);
  gap:clamp(2.5rem,5vw,5rem);
  align-items:center;
}
.u-cc-final .u-heading-xl{color:#fff}
.u-cc-final__lead{
  margin:1.05rem 0 0;
  max-width:720px;
  color:#c9d7e7;
  font-size:1.1rem;
  line-height:1.72;
}
.u-cc-final__panel{
  padding:1.5rem;
  border:1px solid rgba(255,255,255,.20);
  border-radius:24px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
.u-cc-final__panel p{
  margin:0 0 1rem;
  color:#d7e2ef;
  line-height:1.6;
}
.u-cc-final__panel .u-button{width:100%}
.u-cc-final__meta{
  margin:.8rem 0 0!important;
  color:#98abc1!important;
  font-size:.84rem;
  text-align:center;
}

@media(max-width:1000px){
  .u-cc-recognition__grid,
  .u-cc-access__grid,
  .u-cc-trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u-cc-org__layout{grid-template-columns:1fr}
  .u-cc-org-mock{max-width:720px}
}

@media(max-width:820px){
  .u-cc-hero{min-height:620px;background-position:58% center}
  .u-cc-hero__panel{width:min(100%,700px)}
  .u-cc-different__layout,
  .u-cc-why-three__layout,
  .u-cc-experience__layout,
  .u-cc-final__layout{grid-template-columns:1fr}
  .u-cc-different__intro{position:static}
  .u-cc-how__track{grid-template-columns:1fr}
  .u-cc-how__track::before{display:none}
  .u-cc-why-three__mark{font-size:4.4rem}
  .u-cc-experience__stat{
    padding:0 0 1.6rem;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
}

@media(max-width:620px){
  .u-cc-hero{
    min-height:auto;
    padding-block:360px 32px;
    align-items:end;
    background-position:64% top;
    background-size:auto 430px;
    background-color:#dce8f3;
  }
  .u-cc-hero::after{
    background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(245,249,255,.12) 58%,rgba(245,249,255,.96) 82%,#f5f9ff 100%);
  }
  .u-cc-hero__panel{
    padding:1.5rem;
    border-radius:22px;
    background:rgba(255,255,255,.93);
    backdrop-filter:blur(14px);
  }
  .u-cc-hero__actions,
  .u-cc-hero__actions .u-button{width:100%}
  .u-cc-recognition__grid,
  .u-cc-access__grid,
  .u-cc-trust__grid{grid-template-columns:1fr}
  .u-cc-access__code{grid-template-columns:1fr}
  .u-cc-different__item{grid-template-columns:38px minmax(0,1fr)}
  .u-cc-org__layout{grid-template-columns:1fr}
  .u-cc-org-mock__bar{align-items:flex-start;flex-direction:column}
  .u-cc-org-mock__actions .u-button{width:100%}
  .u-cc-final__panel .u-button{width:100%}
}


/* ==========================================================
   CAREER CLARITY PUBLIC PAGE — v0.48 MODULAR BLOCK SUPPORT
   28 September 2026
   The public page may now be maintained as separate WordPress
   Custom HTML blocks. .u-cc-section-root carries the shared
   page scope without requiring one outer wrapper.
   ========================================================== */

/* ==========================================================
   CAREER CLARITY PUBLIC PAGE — v0.47 CORRECTION PASS
   28 September 2026
   Owner-directed whole-page correction pass. These rules extend
   the v0.46 Career Clarity page without changing corporate-home
   selectors or the shared Undiluted component language.
   ========================================================== */

/* Hero — use the same broad, elevated glass-panel rhythm as the
   corporate homepage and preserve the signposts/steps below it. */
.u-cc-hero{
  min-height:700px;
  align-items:flex-start;
  padding-block:clamp(38px,4.2vw,58px) 42px;
  background-position:center 50%;
}
.u-cc-hero__panel{
  width:min(1180px,100%);
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  column-gap:clamp(2rem,4vw,4rem);
  row-gap:.6rem;
  padding:clamp(1.8rem,2.8vw,2.6rem) clamp(2rem,4vw,4rem);
  border-radius:28px;
}
.u-cc-hero__panel .u-heading-hero{
  max-width:900px;
  font-size:clamp(2.5rem,4vw,3.95rem);
  line-height:1.04;
}
.u-cc-hero__panel>.u-cc-eyebrow,
.u-cc-hero__panel>.u-heading-hero{grid-column:1 / -1}
.u-cc-hero__lead{grid-column:1}
.u-cc-hero__body{grid-column:2}
.u-cc-hero__actions{grid-column:1}
.u-cc-hero__note{grid-column:2;align-self:center}
.u-cc-hero__lead{
  margin:.55rem 0 0;
  max-width:900px;
  font-size:clamp(1.06rem,1.3vw,1.18rem);
  line-height:1.58;
}
.u-cc-hero__body{
  margin:.55rem 0 0;
  max-width:1000px;
  font-size:1rem;
  line-height:1.64;
}
.u-cc-hero__note{
  max-width:940px;
  margin:.8rem 0 0;
  color:#425a74;
  font-size:.91rem;
}
.u-cc-hero__actions{margin-top:.85rem}
.u-cc-hero__note strong{color:var(--u-navy-950)}

/* Keep every Career Clarity page action within the blue button policy,
   including visited-link states imposed by WordPress/Astra. */
.u-cc-page a.u-button,
.u-cc-page a.u-button:link,
.u-cc-page a.u-button:visited,
.u-cc-page a.u-button:hover,
.u-cc-page a.u-button:focus,
.u-cc-page a.u-button:active,
.u-cc-section-root a.u-button,
.u-cc-section-root a.u-button:link,
.u-cc-section-root a.u-button:visited,
.u-cc-section-root a.u-button:hover,
.u-cc-section-root a.u-button:focus,
.u-cc-section-root a.u-button:active{
  color:#fff!important;
  text-decoration:none!important;
}
.u-cc-page .u-button--primary,
.u-cc-page .u-button--secondary,
.u-cc-section-root .u-button--primary,
.u-cc-section-root .u-button--secondary{
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--u-blue-600),#0863e8)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(29,111,242,.20);
}
.u-cc-page .u-button--primary:hover,
.u-cc-page .u-button--secondary:hover,
.u-cc-section-root .u-button--primary:hover,
.u-cc-section-root .u-button--secondary:hover{
  background:linear-gradient(135deg,#0d64e9,#0758cf)!important;
  color:#fff!important;
}

/* Recognition — retain the current blue/white family, but give the two
   priority entry routes a restrained warm sunrise tint. */
.u-cc-recognition__card--highlight{
  border-color:rgba(225,170,94,.56);
  background:
    linear-gradient(145deg,rgba(255,252,244,.95),rgba(255,237,213,.78));
  box-shadow:0 16px 42px rgba(118,76,22,.10);
}
.u-cc-recognition__card--highlight::before{
  width:34px;
  background:linear-gradient(90deg,#d99034,#efb25e);
}

/* How it works — explicit continuity plus the approved repeated-three
   career-journey visual. */
.u-cc-how__continuity{
  margin-top:clamp(2rem,4vw,3.2rem);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.55rem 1rem;
  align-items:start;
  padding:1.25rem 1.4rem;
  border:1px solid #c9dbf0;
  border-radius:20px;
  background:linear-gradient(135deg,#edf5ff,#fbfdff);
  color:#435a73;
  line-height:1.6;
}
.u-cc-how__continuity::before{
  content:"↻";
  grid-row:1 / span 2;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--u-blue-600);
  color:#fff;
  font-size:1.25rem;
  font-weight:800;
}
.u-cc-how__continuity strong{color:var(--u-navy-950)}
.u-cc-how__continuity span{display:block}
.u-cc-journey{
  margin:clamp(2rem,4vw,3.2rem) 0 0;
  overflow:hidden;
  border:1px solid #d8e5f2;
  border-radius:26px;
  background:#fff;
  box-shadow:0 18px 45px rgba(7,22,45,.08);
}
.u-cc-journey__image{
  display:block;
  width:100%;
  height:auto;
  background:#f8fbff;
}
.u-cc-journey figcaption{
  padding:.9rem 1.2rem 1rem;
  border-top:1px solid #e4edf5;
  color:#61758c;
  font-size:.9rem;
  line-height:1.55;
}

/* Access — four distinct, readable cards with real action affordances. */
.u-cc-access__grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
.u-cc-plan{
  overflow:hidden;
  padding:1.45rem;
  border-radius:26px;
  background:linear-gradient(180deg,#fff,#fbfdff);
}
.u-cc-plan--guest{border-color:#dbe4ef}
.u-cc-plan--free{border-color:#c7d9ef;background:linear-gradient(180deg,#f9fcff,#eef6ff)}
.u-cc-plan--paid{border-color:#9fc1ef;background:linear-gradient(180deg,#f5f9ff,#eaf3ff)}
.u-cc-plan--sponsored{
  border-color:#b8c8de;
  background:linear-gradient(155deg,#f5f8fc,#e7eef7);
  box-shadow:0 20px 50px rgba(7,22,45,.09);
}
.u-cc-plan__icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:.85rem;
  border-radius:14px;
  background:linear-gradient(135deg,var(--u-blue-600),#0758cf);
  color:#fff;
  box-shadow:0 8px 20px rgba(29,111,242,.18);
  font-size:1.15rem;
  font-weight:800;
}
.u-cc-plan__price--sponsored{font-size:1.72rem}
.u-cc-plan__warning{
  margin:.2rem 0 .85rem;
  padding:.78rem .85rem;
  border:1px solid #edcf7a;
  border-radius:14px;
  background:#fff8e7;
  color:#654b04;
  font-size:.88rem;
  font-weight:650;
  line-height:1.48;
}
.u-cc-plan__endnote{
  margin:1rem 0 0;
  padding-top:.9rem;
  border-top:1px solid #dce6f1;
  color:#61748a;
  font-size:.84rem;
  line-height:1.5;
}
.u-cc-plan__action{
  width:100%;
  margin-top:auto;
  padding-top:.86rem;
  padding-bottom:.86rem;
  text-align:center;
}
.u-cc-plan ul{margin-bottom:1.15rem}
.u-cc-access__code{
  grid-template-columns:minmax(0,1fr) auto;
  margin-top:1.35rem;
  padding:1.2rem 1.4rem;
  background:linear-gradient(135deg,#e9f3ff,#f7fbff);
}
.u-cc-access__code .u-button{min-width:180px}

/* Sponsored access — broaden beyond employer change and make the
   illustrative co-branded entry screen visibly explanatory. */
.u-cc-org__layout{
  grid-template-columns:minmax(0,.82fr) minmax(480px,1.18fr);
  align-items:start;
}
.u-cc-org-demo{min-width:0}
.u-cc-org-mock__annotated{
  position:relative;
  outline:1px dashed rgba(29,111,242,.38);
  outline-offset:-5px;
}
.u-cc-org-marker{
  position:absolute;
  z-index:3;
  top:9px;
  right:9px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--u-blue-600);
  color:#fff;
  box-shadow:0 5px 14px rgba(29,111,242,.24);
  font-size:.76rem;
  font-weight:800;
}
.u-cc-org-mock__message,
.u-cc-org-mock__context{
  margin:0 0 1rem;
  padding:1rem 1.05rem;
  border-radius:16px;
  background:rgba(255,255,255,.70);
}
.u-cc-org-mock__message h3{padding-right:2rem}
.u-cc-org-mock__message>p:last-child{
  margin:.8rem 0 0;
  color:#53667d;
  line-height:1.62;
}
.u-cc-org-mock__context{
  display:grid;
  gap:.3rem;
  border:1px solid #d6e4f2;
  background:#f7fbff;
  color:#53667d;
  line-height:1.55;
}
.u-cc-org-mock__context strong{color:var(--u-navy-950)}
.u-cc-org-callouts{
  margin-top:1rem;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
}
.u-cc-org-callout{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:.65rem;
  padding:.8rem;
  border:1px solid #cfdef0;
  border-radius:14px;
  background:rgba(255,255,255,.72);
}
.u-cc-org-callout>span{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--u-blue-600);
  color:#fff;
  font-size:.75rem;
  font-weight:800;
}
.u-cc-org-callout p{
  margin:0;
  color:#52667d;
  font-size:.82rem;
  line-height:1.45;
}
.u-cc-org-callout strong{color:var(--u-navy-950)}

/* Trust links replace the temporary placeholder sentence. */
.u-cc-trust__links{
  margin:1.7rem 0 0;
  color:#61748a;
  font-size:.92rem;
  line-height:1.6;
}
.u-cc-trust__links a{
  color:var(--u-blue-700);
  font-weight:700;
}

@media(max-width:1180px){
  .u-cc-access__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u-cc-org__layout{grid-template-columns:1fr}
  .u-cc-org-demo{max-width:780px}
}

@media(max-width:820px){
  .u-cc-hero{
    min-height:650px;
    align-items:flex-start;
    padding-block:38px 44px;
    background-position:58% center;
  }
  .u-cc-hero__panel{display:block;width:100%;padding:2rem}
  .u-cc-hero__panel .u-heading-hero{font-size:clamp(2.3rem,8vw,3.3rem)}
  .u-cc-how__continuity{grid-template-columns:auto minmax(0,1fr)}
  .u-cc-org-callouts{grid-template-columns:1fr}
}

@media(max-width:620px){
  .u-cc-hero{
    min-height:auto;
    padding-block:350px 28px;
    align-items:end;
    background-position:64% top;
    background-size:auto 430px;
  }
  .u-cc-hero__panel{
    width:100%;
    padding:1.4rem;
    border-radius:22px;
  }
  .u-cc-hero__panel .u-heading-hero{font-size:clamp(2rem,10vw,2.75rem)}
  .u-cc-how__continuity{grid-template-columns:1fr}
  .u-cc-how__continuity::before{grid-row:auto}
  .u-cc-access__grid{grid-template-columns:1fr}
  .u-cc-access__code{grid-template-columns:1fr}
  .u-cc-access__code .u-button{width:100%;min-width:0}
  .u-cc-org-callouts{grid-template-columns:1fr}
}

/* ==========================================================
   CAREER CLARITY HERO — v0.49 VISUAL RESET
   28 September 2026
   Re-align the modular Career Clarity hero to the approved
   wide/high glass-panel reference and preserve the signposts
   and path beneath the panel.
   ========================================================== */
.u-cc-section-root.u-cc-hero{
  min-height:700px;
  align-items:flex-start;
  padding:28px 0 34px;
  background-position:center 52%;
}
.u-cc-section-root.u-cc-hero .u-cc-hero__inner{
  width:100%;
  max-width:none;
  padding-inline:clamp(22px,4.5vw,70px);
}
.u-cc-section-root.u-cc-hero .u-cc-hero__panel{
  display:block;
  width:100%;
  max-width:none;
  padding:clamp(1.45rem,2.2vw,2.1rem) clamp(1.55rem,3vw,3rem);
  border-radius:26px;
}
.u-cc-section-root.u-cc-hero .u-cc-hero__panel>.u-cc-eyebrow,
.u-cc-section-root.u-cc-hero .u-cc-hero__panel>.u-heading-hero{
  grid-column:auto;
}
.u-cc-section-root.u-cc-hero .u-cc-hero__panel .u-heading-hero{
  max-width:920px;
  margin-top:.25rem;
  font-size:clamp(2.45rem,4.2vw,4rem);
  line-height:1.02;
}
.u-cc-section-root.u-cc-hero .u-cc-hero__content{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.34fr);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
  margin-top:.75rem;
}
.u-cc-section-root.u-cc-hero .u-cc-hero__main{
  min-width:0;
}
.u-cc-section-root.u-cc-hero .u-cc-hero__body{
  max-width:860px;
  margin:0;
  color:#43566d;
  font-size:clamp(.96rem,1.05vw,1.04rem);
  line-height:1.58;
}
.u-cc-section-root.u-cc-hero .u-cc-hero__lead{
  max-width:860px;
  margin:.8rem 0 0;
  color:#314963;
  font-size:clamp(.98rem,1.08vw,1.08rem);
  line-height:1.58;
}
.u-cc-section-root.u-cc-hero .u-cc-hero__actions{
  margin-top:1rem;
}
.u-cc-section-root.u-cc-hero .u-cc-hero__note{
  max-width:800px;
  margin:.7rem 0 0;
  color:#526981;
  font-size:.86rem;
  line-height:1.48;
}
.u-cc-section-root.u-cc-hero .u-cc-hero__aside{
  min-height:100%;
  padding:.15rem 0 .15rem clamp(1.25rem,2vw,2rem);
  border-left:1px solid rgba(77,118,165,.24);
  color:#49627c;
}
.u-cc-section-root.u-cc-hero .u-cc-hero__aside p{
  margin:0;
  font-size:clamp(.9rem,.98vw,1rem);
  line-height:1.58;
}

@media(max-width:900px){
  .u-cc-section-root.u-cc-hero{
    min-height:660px;
    padding:26px 0 32px;
  }
  .u-cc-section-root.u-cc-hero .u-cc-hero__inner{
    padding-inline:clamp(18px,3vw,32px);
  }
  .u-cc-section-root.u-cc-hero .u-cc-hero__content{
    grid-template-columns:minmax(0,1fr) minmax(210px,.38fr);
    gap:1.4rem;
  }
  .u-cc-section-root.u-cc-hero .u-cc-hero__panel .u-heading-hero{
    font-size:clamp(2.25rem,5.6vw,3.25rem);
  }
}

@media(max-width:700px){
  .u-cc-section-root.u-cc-hero{
    min-height:auto;
    padding:320px 0 22px;
    align-items:end;
    background-position:64% top;
    background-size:auto 405px;
  }
  .u-cc-section-root.u-cc-hero .u-cc-hero__inner{
    padding-inline:16px;
  }
  .u-cc-section-root.u-cc-hero .u-cc-hero__panel{
    padding:1.35rem;
    border-radius:22px;
  }
  .u-cc-section-root.u-cc-hero .u-cc-hero__content{
    display:block;
    margin-top:.8rem;
  }
  .u-cc-section-root.u-cc-hero .u-cc-hero__aside{
    margin-top:1rem;
    padding:1rem 0 0;
    border-left:0;
    border-top:1px solid rgba(77,118,165,.24);
  }
  .u-cc-section-root.u-cc-hero .u-cc-hero__actions,
  .u-cc-section-root.u-cc-hero .u-cc-hero__actions .u-button{
    width:100%;
  }
}

/* ==========================================================
   CAREER CLARITY HERO — v0.50 COMPACT PROPORTION PASS
   28 September 2026
   Reduce vertical dominance of the glass panel so the
   signposts and path remain visible as part of the hero story.
   Scoped to the modular Career Clarity hero only.
   ========================================================== */
@media(min-width:901px){
  .u-cc-section-root.u-cc-hero{
    min-height:700px;
    padding:24px 0 34px;
    background-position:center 54%;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__panel{
    padding:1.25rem clamp(1.55rem,2.7vw,2.7rem) 1.2rem;
    border-radius:24px;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__panel>.u-cc-eyebrow{
    margin-bottom:.35rem;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__panel .u-heading-hero{
    max-width:850px;
    margin:.1rem 0 0;
    font-size:clamp(2.35rem,3.55vw,3.45rem);
    line-height:1.01;
    letter-spacing:-.035em;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__content{
    grid-template-columns:minmax(0,1fr) minmax(220px,.28fr);
    gap:clamp(1.35rem,2.5vw,2.5rem);
    margin-top:.55rem;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__body{
    max-width:880px;
    font-size:clamp(.92rem,.98vw,1rem);
    line-height:1.48;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__lead{
    max-width:880px;
    margin:.55rem 0 0;
    font-size:clamp(.94rem,1vw,1.02rem);
    line-height:1.48;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__actions{
    gap:.7rem;
    margin-top:.75rem;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__actions .u-button{
    min-height:0;
    padding:.72rem 1.65rem;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__note{
    max-width:850px;
    margin:.5rem 0 0;
    font-size:.82rem;
    line-height:1.4;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__aside{
    padding:.05rem 0 .05rem clamp(1rem,1.7vw,1.65rem);
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__aside p{
    max-width:270px;
    font-size:clamp(.82rem,.88vw,.92rem);
    line-height:1.48;
  }
}

@media(min-width:901px) and (max-width:1180px){
  .u-cc-section-root.u-cc-hero .u-cc-hero__panel .u-heading-hero{
    font-size:clamp(2.25rem,4.25vw,3.05rem);
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__content{
    grid-template-columns:minmax(0,1fr) minmax(205px,.3fr);
    gap:1.3rem;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__body,
  .u-cc-section-root.u-cc-hero .u-cc-hero__lead{
    line-height:1.44;
  }
}

/* ==========================================================
   CAREER CLARITY RECOGNITION REVEAL — v0.52
   Stronger card-on-scroll effect for the Career Clarity recognition cards only.
   Corporate homepage unaffected.
   ========================================================== */
.u-motion-ready .u-cc-recognition__card.u-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.985);
  transition:
    opacity 700ms cubic-bezier(.2,.65,.3,1) var(--u-reveal-delay, 0ms),
    transform 700ms cubic-bezier(.2,.65,.3,1) var(--u-reveal-delay, 0ms);
}

.u-motion-ready .u-cc-recognition__card.u-reveal.u-reveal--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .u-motion-ready .u-cc-recognition__card.u-reveal,
  .u-motion-ready .u-cc-recognition__card.u-reveal.u-reveal--visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================
   CAREER CLARITY HERO — v0.54 CENTRED WIDE-VIEW PASS
   28 September 2026
   Keep the glass panel centred and bounded on very wide / zoomed-out
   viewports, while lowering it slightly at desktop sizes.
   Corporate homepage unaffected.
   ========================================================== */
@media(min-width:901px){
  .u-cc-section-root.u-cc-hero{
    padding-top:38px;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__inner{
    width:min(calc(100% - 48px),1500px);
    max-width:1500px;
    margin-inline:auto;
    padding-inline:0;
  }
}


/* ==========================================================
   CAREER CLARITY HERO — v0.55 IMAGE DEPTH PASS
   28 September 2026
   Preserve the approved compact panel position while revealing
   more of the lower signpost and stone path on desktop. Tighten
   the following recognition section's top breathing room so the
   additional image depth does not create unnecessary page length.
   Corporate homepage unaffected.
   ========================================================== */
@media(min-width:901px){
  .u-cc-section-root.u-cc-hero{
    min-height:820px;
  }

  .u-cc-section-root.u-cc-recognition{
    padding-top:clamp(3.25rem,4.5vw,4.75rem);
  }
}


/* ==========================================================
   CAREER CLARITY HERO — v0.56 PANEL POSITION PASS
   28 September 2026
   Lower the desktop glass panel without sacrificing the extra
   signpost/path visibility added in v0.55. The hero is deepened
   slightly to preserve the lower image reveal.
   Corporate homepage unaffected.
   ========================================================== */
@media(min-width:901px){
  .u-cc-section-root.u-cc-hero{
    min-height:845px;
    padding-top:62px;
  }
}

/* ==========================================================
   CAREER CLARITY HERO — v0.57 SUN-LINE POSITION PASS
   28 September 2026
   Lower the desktop glass panel so its bottom edge sits just
   above the sunrise, while increasing hero depth by the same
   amount to preserve the approved lower signpost/path reveal.
   Corporate homepage unaffected.
   ========================================================== */
@media(min-width:901px){
  .u-cc-section-root.u-cc-hero{
    min-height:890px;
    padding-top:107px;
  }
}

/* ==========================================================
   CAREER CLARITY HERO — v0.58 REFERENCE GEOMETRY RESET
   28 September 2026
   Match the approved Undiluted homepage Career Clarity treatment:
   a centred bounded image card, panel inset close to the top edge,
   and panel bottom landing just above the sunrise while preserving
   the complete signpost and stone path beneath it.
   Corporate homepage unaffected.
   ========================================================== */
@media (min-width:1200px){
  .u-cc-section-root.u-cc-hero.u-full-bleed{
    left:auto !important;
    transform:none !important;
    width:min(calc(100vw - 96px),1512px) !important;
    max-width:1512px !important;
    min-height:0;
    aspect-ratio:1.655 / 1;
    margin:34px auto 0 !important;
    padding:18px 0 0;
    align-items:flex-start;
    border-radius:30px;
    background-position:center center;
    overflow:hidden;
    box-shadow:0 20px 55px rgba(5,22,45,.14);
  }

  .u-cc-section-root.u-cc-hero::after{
    border-radius:inherit;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__inner{
    width:100%;
    max-width:none;
    margin:0;
    padding:0 16px;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__panel{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:none;
    min-height:565px;
    margin:0;
    padding:30px 42px 32px;
    border-radius:26px;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__panel>.u-cc-eyebrow{
    margin:0 0 .9rem;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__panel .u-heading-hero{
    max-width:900px;
    margin:0;
    font-size:clamp(3rem,3.55vw,3.55rem);
    line-height:1.02;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__content{
    flex:1;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(250px,.29fr);
    gap:clamp(2rem,3vw,3.4rem);
    align-items:stretch;
    margin-top:1.15rem;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__main{
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__body{
    max-width:900px;
    margin:0;
    font-size:1rem;
    line-height:1.55;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__lead{
    max-width:900px;
    margin:2rem 0 0;
    font-size:1.03rem;
    line-height:1.55;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__actions{
    margin-top:auto;
    padding-top:1.4rem;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__note{
    max-width:850px;
    margin:.65rem 0 0;
    font-size:.84rem;
    line-height:1.45;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__aside{
    align-self:stretch;
    min-height:0;
    padding:.2rem 0 .2rem 2rem;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__aside p{
    max-width:280px;
    font-size:.93rem;
    line-height:1.58;
  }
}

@media (min-width:901px) and (max-width:1199px){
  .u-cc-section-root.u-cc-hero.u-full-bleed{
    left:auto !important;
    transform:none !important;
    width:calc(100vw - 40px) !important;
    max-width:none !important;
    min-height:760px;
    margin:24px auto 0 !important;
    padding-top:20px;
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 16px 42px rgba(5,22,45,.12);
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__inner{
    width:100%;
    max-width:none;
    margin:0;
    padding-inline:18px;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__panel{
    min-height:500px;
    padding:1.6rem 2rem 1.7rem;
  }
}

/* ==========================================================
   CAREER CLARITY HERO — v0.59 FULL-BLEED BACKGROUND RESET
   28 September 2026
   Restore the Career Clarity hero to the shared Undiluted geometry:
   the image/background remains genuinely full-bleed across the
   viewport, while only the glass panel is constrained and centred.
   Preserve the accepted v0.58 vertical proportions and lower-image
   reveal. Corporate homepage unaffected.
   ========================================================== */
@media (min-width:1200px){
  .u-cc-section-root.u-cc-hero.u-full-bleed{
    left:50% !important;
    transform:translateX(-50%) !important;
    width:100vw !important;
    max-width:none !important;
    min-height:clamp(820px,58vw,920px);
    aspect-ratio:auto;
    margin:0 !important;
    padding:18px 0 0;
    align-items:flex-start;
    border-radius:0;
    background-position:center center;
    overflow:hidden;
    box-shadow:none;
  }

  .u-cc-section-root.u-cc-hero::after{
    border-radius:0;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__inner{
    width:min(calc(100% - 64px),var(--u-page-shell-max));
    max-width:var(--u-page-shell-max);
    margin-inline:auto;
    padding:0;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__panel{
    width:100%;
    max-width:none;
    min-height:565px;
    margin:0;
    padding:30px 42px 32px;
    border-radius:26px;
  }
}

@media (min-width:901px) and (max-width:1199px){
  .u-cc-section-root.u-cc-hero.u-full-bleed{
    left:50% !important;
    transform:translateX(-50%) !important;
    width:100vw !important;
    max-width:none !important;
    min-height:780px;
    margin:0 !important;
    padding:20px 0 0;
    border-radius:0;
    overflow:hidden;
    box-shadow:none;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__inner{
    width:min(calc(100% - 40px),var(--u-page-shell-max));
    max-width:var(--u-page-shell-max);
    margin-inline:auto;
    padding:0;
  }

  .u-cc-section-root.u-cc-hero .u-cc-hero__panel{
    width:100%;
    max-width:none;
    min-height:500px;
    padding:1.6rem 2rem 1.7rem;
  }
}

/* ==========================================================
   CAREER CLARITY ACCESS — v0.61 REFINEMENT
   28 September 2026
   Four compact access cards, restrained colour differentiation,
   plain card labels, shared lifecycle note, and billing toggle.
   ========================================================== */
.u-cc-access__grid,
.u-cc-access__grid--three{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  align-items:stretch;
}

.u-cc-plan{
  position:relative;
  overflow:hidden;
  padding:1.3rem 1.25rem 1.25rem;
  border:1px solid #d7e1ec;
  border-radius:22px;
  box-shadow:0 14px 34px rgba(7,22,45,.07);
}

.u-cc-plan::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:#9fb4ca;
}

.u-cc-plan--guest{
  border-color:#d9e3ed;
  background:linear-gradient(180deg,#fbfcfe 0%,#f4f7fa 100%);
}
.u-cc-plan--guest::before{background:#7891aa}

.u-cc-plan--free{
  border-color:#bfd6f2;
  background:linear-gradient(180deg,#f8fbff 0%,#edf6ff 100%);
}
.u-cc-plan--free::before{background:#2e76ec}

.u-cc-plan--paid{
  border-color:#e4c97c;
  background:linear-gradient(180deg,#fffdf6 0%,#fff4d8 100%);
  box-shadow:0 16px 38px rgba(91,65,5,.09);
}
.u-cc-plan--paid::before{background:#d9aa28}

.u-cc-plan--sponsored{
  border-color:#bec9da;
  background:linear-gradient(180deg,#f8f9fc 0%,#edf1f7 100%);
  box-shadow:0 14px 34px rgba(7,22,45,.08);
}
.u-cc-plan--sponsored::before{background:#173f73}

.u-cc-plan__icon{display:none!important}

.u-cc-plan__tag,
.u-cc-plan__label{
  display:block;
  align-self:auto;
  margin:0 0 .55rem;
  padding:0;
  border-radius:0;
  background:transparent;
  color:#58708b;
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.11em;
  line-height:1.2;
  text-transform:uppercase;
}
.u-cc-plan--free .u-cc-plan__label{color:#175fae}
.u-cc-plan--paid .u-cc-plan__label{color:#876407}
.u-cc-plan--sponsored .u-cc-plan__label{color:#173f73}

.u-cc-plan h3{
  margin:0;
  font-size:1.22rem;
  line-height:1.25;
}

.u-cc-plan__price{
  margin:.7rem 0 .25rem;
  font-size:clamp(1.55rem,2.1vw,2rem);
}
.u-cc-plan__price--sponsored{font-size:1.55rem}

.u-cc-plan__intro{
  margin:.15rem 0 .72rem;
  font-size:.94rem;
  line-height:1.52;
}

.u-cc-plan ul{
  margin:.25rem 0 .85rem;
}
.u-cc-plan li{
  margin:.5rem 0;
  padding-left:1.25rem;
  font-size:.92rem;
  line-height:1.42;
}
.u-cc-plan li::before{
  top:.58em;
  width:6px;
  height:6px;
}

.u-cc-plan__warning{
  margin:.15rem 0 .8rem;
  padding:.7rem .75rem;
  border-radius:12px;
  font-size:.82rem;
  line-height:1.42;
}

.u-cc-plan__endnote{display:none}

.u-cc-plan__action{
  margin-top:auto;
  padding-top:.78rem;
  padding-bottom:.78rem;
}

.u-cc-access__lifecycle{
  max-width:1080px;
  margin:1.15rem auto 0;
  padding:.9rem 1rem;
  border-top:1px solid #dbe4ed;
  color:#66798e;
  font-size:.86rem;
  line-height:1.55;
  text-align:center;
}

.u-cc-billing-toggle{
  display:inline-flex;
  gap:3px;
  margin:.6rem 0 .2rem;
  padding:3px;
  border:1px solid #dcc474;
  border-radius:999px;
  background:rgba(255,255,255,.72);
}
.u-cc-billing-toggle__option{
  appearance:none;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#6e5a1a;
  cursor:pointer;
  font:inherit;
  font-size:.78rem;
  font-weight:800;
  line-height:1;
  padding:.55rem .78rem;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.u-cc-billing-toggle__option:hover,
.u-cc-billing-toggle__option:focus-visible{
  background:#fff7dd;
  color:#5d4808;
  outline:none;
}
.u-cc-billing-toggle__option.is-active{
  background:#173f73;
  color:#fff;
  box-shadow:0 3px 9px rgba(7,22,45,.16);
}

.u-cc-price-view[hidden]{display:none!important}
.u-cc-price-view__saving{
  margin:.22rem 0 .55rem;
  color:#765705;
  font-size:.83rem;
  font-weight:750;
  line-height:1.35;
}

@media(max-width:1180px){
  .u-cc-access__grid,
  .u-cc-access__grid--three{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:620px){
  .u-cc-access__grid,
  .u-cc-access__grid--three{
    grid-template-columns:1fr;
  }
  .u-cc-billing-toggle{display:flex;width:100%}
  .u-cc-billing-toggle__option{flex:1}
}

/* ==========================================================
   CAREER CLARITY HERO — v0.62 MOBILE IMAGE CROP
   28 September 2026
   Mobile-only adjustment: lift the approved hero artwork and
   shift it slightly right on screen so the full signpost and
   more of the stone path remain visible above the content panel.
   Desktop/tablet geometry and corporate homepage unaffected.
   ========================================================== */
@media(max-width:700px){
  .u-cc-section-root.u-cc-hero{
    background-position:40% -45px;
  }
}

/* ==========================================================
   CAREER CLARITY ACCESS — v0.63 BILLING TOGGLE STABILITY
   28 September 2026
   Reserve the annual price-copy height from first paint so
   Monthly / Annual switching does not resize the card row or
   move the other access-card actions.
   ========================================================== */
.u-cc-plan--paid .u-cc-price-view{
  min-height:7.5rem;
}


/* ==========================================================
   CAREER CLARITY ACCESS — v0.64 BILLING STAGE STABILITY
   28 September 2026
   Fixed price-stage geometry: Monthly and Annual occupy the
   same reserved block, so billing changes cannot resize the
   membership card or move the other card actions.
   ========================================================== */
.u-cc-plan--paid .u-cc-price-stage{
  height:8.75rem;
  min-height:8.75rem;
  margin:0;
}

.u-cc-plan--paid .u-cc-price-view{
  min-height:0;
  height:auto;
}

.u-cc-price-view__note{
  margin:.22rem 0 .55rem;
  color:#765705;
  font-size:.83rem;
  font-weight:750;
  line-height:1.35;
}

@media(max-width:620px){
  .u-cc-plan--paid .u-cc-price-stage{
    height:8.25rem;
    min-height:8.25rem;
  }
}

/* ==========================================================
   CAREER CLARITY ORGANISATION — v0.65 SPONSORED EXPERIENCE
   28 September 2026
   Stack the organisation proposition above the approved
   annotated sponsored-user image so the explainer remains
   readable. The image itself is used unchanged.
   ========================================================== */
.u-cc-org--explainer .u-cc-org__intro{
  max-width:920px;
}

.u-cc-org--explainer .u-cc-org__intro>p:not(.u-cc-eyebrow){
  margin:1rem 0 0;
  color:#4b5f77;
  font-size:1.04rem;
  line-height:1.72;
}

.u-cc-org--explainer .u-cc-org__intro strong{
  color:var(--u-navy-950);
}

.u-cc-org-experience{
  margin-top:clamp(2.4rem,5vw,4.5rem);
  padding:clamp(1.25rem,2.4vw,2rem);
  border:1px solid rgba(190,211,237,.9);
  border-radius:28px;
  background:rgba(255,255,255,.58);
  box-shadow:0 22px 55px rgba(7,22,45,.09);
  backdrop-filter:blur(16px);
}

.u-cc-org-experience__intro{
  max-width:850px;
  margin:0 auto 1.5rem;
  text-align:center;
}

.u-cc-org-experience__intro .u-cc-eyebrow{
  margin-bottom:.65rem;
}

.u-cc-org-experience__intro h3{
  margin:0;
  color:var(--u-navy-950);
  font-size:clamp(1.55rem,2.7vw,2.25rem);
  line-height:1.16;
}

.u-cc-org-experience__intro p:not(.u-cc-eyebrow){
  margin:.8rem 0 0;
  color:#52667d;
  font-size:1rem;
  line-height:1.65;
}

.u-cc-org-experience__frame{
  margin:0;
}

.u-cc-org-experience__viewport{
  overflow:hidden;
  border:1px solid rgba(197,214,235,.95);
  border-radius:22px;
  background:rgba(255,255,255,.84);
  box-shadow:0 15px 38px rgba(7,22,45,.10);
}

.u-cc-org-experience__image{
  display:block;
  width:100%;
  height:auto;
}

.u-cc-org-experience__frame figcaption{
  margin:.85rem auto 0;
  max-width:900px;
  color:#6d7f94;
  font-size:.86rem;
  line-height:1.55;
  text-align:center;
}

.u-cc-org-experience__mobile-note{
  display:none;
}

@media(max-width:700px){
  .u-cc-org-experience{
    padding:1rem;
    border-radius:22px;
  }

  .u-cc-org-experience__intro{
    text-align:left;
  }

  .u-cc-org-experience__viewport{
    overflow-x:auto;
    overflow-y:hidden;
    border-radius:18px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  .u-cc-org-experience__image{
    width:880px;
    max-width:none;
  }

  .u-cc-org-experience__mobile-note{
    display:block;
    margin:.75rem 0 0;
    color:#6d7f94;
    font-size:.82rem;
    line-height:1.45;
    text-align:center;
  }
}


/* ==========================================================
   CAREER CLARITY ORGANISATION — v0.66 CONSISTENCY + REVEAL
   28 September 2026
   Match Section 07 eyebrow labels to the established
   light-section heading treatment. Reveal behaviour is wired
   in shared JS; no accepted Section 07 copy is changed.
   ========================================================== */
.u-cc-org--explainer .u-cc-org__intro > .u-cc-eyebrow,
.u-cc-org-experience__intro > .u-cc-eyebrow{
  margin:0;
  color:#4b5f77;
  font-size:clamp(1.03rem,1.3vw,1.15rem);
  line-height:1.7;
}

.u-cc-org-experience__intro > .u-cc-eyebrow{
  margin-bottom:.65rem;
}