/* ==========================================================================
   Infinite Ties — design system
   Built flex-only for a clean Elementor rebuild. No CSS grid anywhere.
   Every row is a flex container; every card is a flex child with a basis.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root{
  /* brand (from Podcast Hex-Codes.docx) */
  --navy:#1b1632;
  --blue:#1799d6;
  --yellow:#ffc727;
  --red:#e81a46;
  --teal:#00a09b;

  /* tints + shades derived from the five above */
  --navy-800:#241d42;
  --navy-700:#2f2755;
  /* Darkened from #0f6fa0 so the eyebrow still clears AA where it sits over
     the logo watermark, which lifts the effective background slightly. */
  --blue-deep:#0d6491;
  --teal-deep:#00716e;
  --red-deep:#b81236;
  /* Brand red is 4.49:1 with white, a hair under AA. This slightly deeper red
     reads identically but clears 4.5. Used only where white text sits on it;
     --red stays the accent colour for bars, borders and tiles. */
  --red-btn:#dc1740;
  --teal-btn:#00716e; /* 5.85:1 with white; brand teal #00a09b is only 2.9:1 */
  --teal-btn-deep:#005a57;

  /* surfaces */
  --paper:#ffffff;
  --cream:#f8f6f3;
  --cream-2:#f2eee9;
  --line:#e4ded6;
  --line-dark:rgba(255,255,255,.16);

  /* text — contrast checked against their surfaces, all AA or better */
  --ink:#1b1632;          /* 15.2:1 on white */
  --ink-soft:#514a63;     /* 8.0:1 on white  */
  --ink-mute:#6b6480;     /* 5.4:1 on white  */
  --on-navy:#ffffff;
  --on-navy-soft:#cfc9dd; /* 9.1:1 on navy   */

  --font-display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1200px;
  --radius:18px;
  --radius-lg:26px;
  --shadow:0 2px 4px rgba(27,22,50,.04),0 12px 32px rgba(27,22,50,.07);
  --shadow-lg:0 4px 8px rgba(27,22,50,.05),0 24px 60px rgba(27,22,50,.12);
}

.gform-field-label__text{
  color: var(--ink) !important;
}

ul{
  padding-left: 0 !important;
}

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* The header is sticky at 78px (68px under 640px), so anchor targets need to
   clear it or they land underneath the bar. */
[id]{scroll-margin-top:100px}
@media (max-width:640px){[id]{scroll-margin-top:88px}}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:hover{color:inherit !important;}
button{font:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.12}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
/* UA stylesheet gives figure `margin:1em 40px`, which silently adds 80px of
   width to every flex item built on one and breaks two-up wrapping. */
figure,blockquote{margin:0}

/* --- type scale ----------------------------------------------------------- */
h1,.h1{font-size:clamp(38px,5.4vw,68px)}
h2,.h2{font-size:clamp(30px,3.8vw,46px)}
h3,.h3{font-size:clamp(20px,2vw,25px)}
h4,.h4{font-size:18px}

.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-soft)}
.on-dark .lead,.section-navy .lead{color:var(--on-navy-soft)}

.eyebrow{
  font-family:var(--font-display);
  font-size:15px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-deep);margin-bottom:16px;
}
/* Every dark surface, not just .section-navy. The page hero and CTA band are
   their own classes and were falling through to the light-background blue. */
.section-navy .eyebrow,
.on-dark .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.band .eyebrow{color:var(--yellow)}

.muted{color:var(--ink-mute);font-size:15px}
.section-navy .muted{color:var(--on-navy-soft)}

/* --- layout --------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:clamp(48px,5.5vw,84px) 0;position:relative;overflow:hidden}
/* Two sections that share a background read as one continuous block, so the
   doubled padding between them is pure dead space. Drop the second one's top
   padding and let the first one's bottom padding carry the whole gap. */
.section-cream + .section-cream,
.section-cream-2 + .section-cream-2,
.section-navy + .section-navy{padding-top:0}
.section-cream{background:var(--cream)}
.section-cream-2{background:var(--cream-2)}
.section-navy{background:var(--navy);color:var(--on-navy)}
.section-navy h1,.section-navy h2,.section-navy h3{color:#fff}
.section-tight{padding:clamp(44px,5vw,66px) 0}

.section-head{max-width:760px;margin-bottom:clamp(26px,3vw,40px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{margin-top:18px}

/* flex rows — the only layout primitive used site-wide */
.row{display:flex;flex-wrap:wrap;gap:24px}
.row-lg{gap:32px}
.row.center{justify-content:center}
.row.middle{align-items:center}
.col-2>*{flex:1 1 440px}
.col-3>*{flex:1 1 300px}
.col-4>*{flex:1 1 230px}

/* split (text beside media) */
.split{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,72px);align-items:center}
.split>.split-text{flex:1 1 420px;min-width:0}
.split>.split-media{flex:1 1 380px;min-width:0}
.split.reverse>.split-media{order:-1}

/* --- brand geometry ------------------------------------------------------- */
/* Decorative only; every instance is aria-hidden and pointer-events:none.
   In Elementor these become container background images. */
.geo{
  position:absolute;pointer-events:none;
  background-repeat:no-repeat;background-size:contain;
  opacity:.5;z-index:0;
}
/* The real Infinite Ties mark, cropped from the logo lockups.
   Dark version on pale surfaces, light version on navy. */
.geo-links{background-image:url('../2026_redesign/images/mark-dark.png')}
.hero .geo-links,
.page-hero .geo-links,
.section-navy .geo-links,
.band .geo-links{background-image:url('../2026_redesign/images/mark-light.png')}
/* Sits fully inside its section: the mark is a real logo, so cropping it
   at the edge reads as a mistake rather than a deliberate bleed. */
.geo-tr{top:34px;right:40px;width:300px;height:300px}
.geo-bl{bottom:40px;left:-46px;width:270px;height:270px}
.hero .geo,.page-hero .geo{opacity:.92}
/* Smaller inside body sections than in the heroes, so it stays clear of the
   two-column copy rather than crowding the right-hand column. */
.section-navy .geo{opacity:.22}
.section-navy .geo-tr{width:190px;height:190px;top:30px;right:34px}
.section:not(.section-navy) .geo{opacity:.1}
/* Decorative only, and it would collide with the copy once the hero stacks. */
@media (max-width:900px){ .geo{display:none} }
.wrap,.section-head,.row,.split{position:relative;z-index:1}

/* Oversized logo watermark. Sits behind the content and bleeds past the card
   row so it reads through the gaps rather than hiding entirely behind them. */
.logo-wash{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url('../2026_redesign/images/mark-dark.png');
  background-repeat:no-repeat;
  background-position:center 0;
  background-size:min(440px,58%) auto;
  opacity:.10;
}
.section-navy .logo-wash{background-image:url('../2026_redesign/images/mark-light.png');opacity:.09}

/* rotated-square lattice, used as a soft texture behind pale sections */
.lattice{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  color:var(--navy);opacity:.05;
  background-image:url('../2026_redesign/images/geo/lattice.svg');
  background-size:170px 170px;
}
.section-navy .lattice{color:#fff;opacity:.07}

/* --- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-weight:700;font-size:15.5px;
  letter-spacing:-.01em;
  padding:15px 28px;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* Join, purchase, download and submit are all "go" actions, so they share one
   colour. Teal reads as proceed; red was reading as stop. */
.btn-primary{background:var(--teal-btn) !important;color:#fff !important;box-shadow:0 8px 22px rgba(0,113,110,.26)}
.btn-primary:hover{background:var(--teal-btn-deep) !important;box-shadow:0 12px 30px rgba(0,113,110,.34)}

.btn-navy{background:var(--navy) !important;color:#fff !important;}
.btn-navy:hover{background:var(--navy-700) !important;}

.btn-yellow{background:var(--yellow) !important;color:var(--navy) !important;}
.btn-yellow:hover{background:#ffd450 !important;}

.btn-outline{border-color:var(--navy) !important;color:var(--navy) !important;background:transparent !important;}
.btn-outline:hover{background:var(--navy) !important;color:#fff !important;}

.btn-outline-light{border-color:rgba(255,255,255,.55) !important; color:#fff !important; background:transparent !important;}
.btn-outline-light:hover{background:#fff !important; color:var(--navy) !important; border-color:#fff  !important;}

.btn-sm{padding:11px 20px;font-size:14px}
.btn-block{width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

.link-arrow{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  color:var(--blue-deep);text-decoration:none;
  border-bottom:2px solid transparent;transition:border-color .18s ease,gap .18s ease;
}
.link-arrow:hover{border-bottom-color:currentColor;gap:11px}
.on-dark .link-arrow,
.section-navy .link-arrow,
.hero .link-arrow,
.page-hero .link-arrow,
.band .link-arrow{color:var(--yellow)}

/* --- header --------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header>.wrap{display:flex;align-items:center;gap:20px;height:78px}

.brand-link{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.brand-link img{height:40px !important;width:auto !important;}

.main-nav{display:flex;align-items:center;gap:3px;margin-left:auto;flex-wrap:nowrap}
.main-nav a{
  font-family:var(--font-display);font-weight:600;font-size:14px;
  color:var(--ink) !important;text-decoration:none;white-space:nowrap;
  padding:9px 11px;border-radius:9px;
  transition:background-color .16s ease,color .16s ease;
}
.main-nav a:hover{background:var(--cream-2)}
.main-nav a[aria-current="page"]{color:var(--blue-deep);background:rgba(23,153,214,.09)}

.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

.nav-toggle{
  display:none;width:44px;height:44px;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:11px;
  color:var(--navy);cursor:pointer;
}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* Fixed under the sticky header, so it opens in view no matter the scroll
   position. Scrolls internally when the list is taller than the viewport. */
.mobile-nav{
  display:none;
  position:fixed;top:78px;left:0;right:0;z-index:59;
  max-height:calc(100vh - 78px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--line);background:#fff;
  box-shadow:0 18px 40px rgba(27,22,50,.16);
  padding:10px 24px 26px;
}
.mobile-nav.open{display:block}
.mobile-nav a{
  display:block;padding:13px 4px;
  font-family:var(--font-display);font-weight:600;font-size:16px;
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line);
}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav .btn{margin-top:16px}

/* --- hero ----------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--navy);color:#fff;
  padding:clamp(70px,9vw,120px) 0 clamp(64px,8vw,104px);
}
.hero h1{color:#fff;max-width:16ch}
.hero .lead{max-width:60ch;margin-top:22px;color:var(--on-navy-soft)}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:999px;padding:8px 17px;
  font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.03em;margin-bottom:26px;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow)}

.page-hero{
  position:relative;overflow:hidden;
  background:var(--navy);color:#fff;
  padding:clamp(56px,7vw,88px) 0 clamp(50px,6vw,74px);
}
.page-hero h1{color:#fff;max-width:20ch}
.page-hero .lead{max-width:64ch;margin-top:20px;color:var(--on-navy-soft)}

/* --- stat strip ----------------------------------------------------------- */
.stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
.stats>div{
  flex:1 1 190px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:20px 22px;
}
.stats b{
  display:block;font-family:var(--font-display);
  font-size:30px;font-weight:700;color:var(--yellow);line-height:1.1;
}
.stats span{display:block;margin-top:7px;font-size:14px;color:var(--on-navy-soft);line-height:1.45}

/* --- hero product strip --------------------------------------------------- */
/* The three products, promoted into the hero. Deliberately NOT buttons: the
   hero spends its one yellow CTA on the pathway question, and a second and
   third yellow would leave the eye with no primary action to find. Tiles read
   as navigation, the button reads as the next step, and both stay legible.
   Accent colours match the ecosystem cards further down the page. */
.hero-products{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-products>a{
  flex:1 1 215px;
  display:flex;flex-direction:column;gap:6px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-top:3px solid rgba(255,255,255,.4);
  border-radius:var(--radius);
  padding:17px 20px 18px;
  color:#fff;text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.hero-products>a:hover,
.hero-products>a:focus-visible{
  background:rgba(255,255,255,.13);
  /* sides only, so the accent top border survives the hover state */
  border-right-color:rgba(255,255,255,.32);
  border-bottom-color:rgba(255,255,255,.32);
  border-left-color:rgba(255,255,255,.32);
  transform:translateY(-2px);
}
/* Outrank the border-top shorthand on .hero-products>a, which is one
   specificity point higher than a bare class selector. */
.hero-products>.hp-yellow{border-top-color:var(--yellow)}
.hero-products>.hp-red{border-top-color:var(--red)}
.hero-products>.hp-teal{border-top-color:var(--teal)}
.hero-products .hp-kicker{
  font-family:var(--font-display);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-soft);
}
.hero-products b{
  font-family:var(--font-display);font-size:19px;font-weight:700;
  color:#fff;line-height:1.25;
}
.hero-products .hp-arrow{display:inline-block;transition:transform .18s ease}
.hero-products>a:hover .hp-arrow{transform:translateX(4px)}
.hero-products .hp-desc{font-size:14px;color:var(--on-navy-soft);line-height:1.45}

/* --- cards ---------------------------------------------------------------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:13px;
}
.card h3{color:var(--ink)}
.card p{color:var(--ink-soft);font-size:15.5px}
.section-navy .card{
  background:var(--navy-800);border-color:var(--line-dark);box-shadow:none;
}
/* .card h3 and .section-navy h3 have equal specificity, so the card rule would
   otherwise win and paint navy text on a navy card. Restate it explicitly. */
.section-navy .card h3,
.section-navy .card h4,
.section-navy .person-body h3,
.section-navy .prog-step h3{color:#fff}
.section-navy .card p{color:var(--on-navy-soft)}
.section-navy .card .muted{color:var(--on-navy-soft)}

/* colour-keyed accent bar — one brand colour per pillar */
.card-accent{border-top:5px solid var(--line);padding-top:27px}
.accent-yellow{border-top-color:var(--yellow)}
.accent-red{border-top-color:var(--red)}
.accent-teal{border-top-color:var(--teal)}
.accent-blue{border-top-color:var(--blue)}

.card-num{
  font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:.14em;color:var(--ink-mute);
}
.section-navy .card-num{color:var(--yellow)}

/* icon tile */
.tile{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.tile svg{width:26px;height:26px;stroke-width:1.7}
.tile-yellow{background:rgba(255,199,39,.18);color:#8a6400}
.tile-red{background:rgba(232,26,70,.12);color:var(--red-deep)}
.tile-teal{background:rgba(0,160,155,.14);color:var(--teal-deep)}
.tile-blue{background:rgba(23,153,214,.13);color:var(--blue-deep)}
.section-navy .tile-yellow{background:rgba(255,199,39,.2);color:var(--yellow)}
.section-navy .tile-red{background:rgba(232,26,70,.24);color:#ff8ba6}
.section-navy .tile-teal{background:rgba(0,160,155,.26);color:#5fd6d2}
.section-navy .tile-blue{background:rgba(23,153,214,.24);color:#7cc9f0}

/* --- pathway cards (the three-buyer fork) --------------------------------- */
.pathway{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:34px 30px 30px;
  text-decoration:none;color:inherit;overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.pathway::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--line);
}
.pathway:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.pathway:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.pathway.p-teal::before{background:var(--teal)}
.pathway.p-yellow::before{background:var(--yellow)}
.pathway.p-blue::before{background:var(--blue)}
.pathway.p-red::before{background:var(--red)}

/* Four across needs tighter padding and type than a two-up card. */
.row.col-4>.pathway{padding:26px 22px 24px}
.row.col-4>.pathway h3{font-size:20px}
.row.col-4>.pathway p{font-size:14.5px}
.row.col-4>.pathway .p-go{font-size:14px;gap:6px}

.pathway .p-label{
  font-family:var(--font-display);font-size:12.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:12px;
}
.pathway h3{margin-bottom:10px}
.pathway p{color:var(--ink-soft);font-size:15.5px;flex-grow:1}
.pathway .p-go{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--blue-deep);
}
.pathway:hover .p-go{gap:12px}
.pathway .p-go svg{width:17px;height:17px;transition:transform .18s ease}

/* Fallback strip under the three pathway cards, for visitors who don't
   identify with any of them. Deliberately not a fourth .pathway card: it's a
   different kind of action, so it gets a different treatment. */
.path-aside{
  display:flex;flex-wrap:wrap;align-items:center;gap:22px;
  margin-top:26px;padding:26px 32px;
  background:var(--navy);color:#fff;border-radius:var(--radius-lg);
}
.path-aside .tile{background:rgba(255,199,39,.2);color:var(--yellow)}
.path-aside .pa-body{flex:1 1 340px;min-width:0}
.path-aside b{
  display:block;font-family:var(--font-display);
  font-size:19px;font-weight:700;color:#fff;margin-bottom:5px;
}
.path-aside span{display:block;font-size:15.5px;color:var(--on-navy-soft);line-height:1.55}
.path-aside .btn{flex-shrink:0}
@media (max-width:640px){
  .path-aside{padding:24px}
  .path-aside .btn{width:100%}
}

/* --- phase cards (FanCAS-Kit browse grid) --------------------------------- */
/* Flat brand fills, no gradients. Two navy bookends frame the four working
   phases, which take the four colours of the logo's four links. Each fill is
   paired with the text colour that clears WCAG AA against it. */
.phase-grid{display:flex;flex-wrap:wrap;gap:20px}
.phase-card{
  flex:1 1 340px;display:flex;flex-direction:column;
  border-radius:var(--radius-lg);padding:30px;
  text-decoration:none;min-height:250px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.phase-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.phase-card:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.phase-card .ph-eyebrow{
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;opacity:.85;margin-bottom:18px;
}
.phase-card .ph-icon{
  width:48px;height:48px;border-radius:13px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
}
.phase-card .ph-icon svg{width:24px;height:24px;stroke-width:1.8;fill:none}
.phase-card h3{font-size:23px;margin-bottom:9px}
.phase-card p{font-size:15px;line-height:1.55;flex-grow:1;opacity:.92}
.phase-card .ph-go{
  align-self:flex-start;margin-top:20px;
  font-family:var(--font-display);font-weight:700;font-size:14.5px;
  padding:10px 20px;border-radius:999px;
}

/* on-white-text fills */
.pc-navy{background:var(--navy);color:#fff}
.pc-red{background:var(--red-deep);color:#fff}
.pc-blue{background:var(--blue-deep);color:#fff}
.pc-teal{background:var(--teal-deep);color:#fff}
.pc-navy h3,.pc-red h3,.pc-blue h3,.pc-teal h3{color:#fff}
/* Darken rather than lighten. A translucent white overlay raises the fill's
   luminance and drops white text below AA on the lighter fills. */
.pc-navy .ph-icon,.pc-red .ph-icon,.pc-blue .ph-icon,.pc-teal .ph-icon{background:rgba(0,0,0,.22);color:#fff}
.pc-navy .ph-go,.pc-red .ph-go,.pc-blue .ph-go,.pc-teal .ph-go{background:rgba(0,0,0,.26);color:#fff}
.pc-navy:hover .ph-go,.pc-red:hover .ph-go,.pc-blue:hover .ph-go,.pc-teal:hover .ph-go{background:#fff;color:var(--navy)}

/* on-navy-text fill: yellow is the one colour that must invert */
.pc-yellow{background:var(--yellow);color:var(--navy)}
.pc-yellow h3{color:var(--navy)}
.pc-yellow .ph-icon{background:rgba(27,22,50,.14);color:var(--navy)}
.pc-yellow .ph-go{background:var(--navy);color:#fff}
.pc-yellow:hover .ph-go{background:#000}

/* contrast comparison table used on the palette preview page */
.cmp{width:100%;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.cmp th{
  font-family:var(--font-display);font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);
}
.cmp td b{font-family:var(--font-display)}
.cmp .fail{color:var(--red-deep);font-weight:700}
.cmp .pass{color:var(--teal-deep);font-weight:700}
.swatch{
  display:inline-block;width:15px;height:15px;border-radius:4px;
  vertical-align:-2px;margin-right:8px;border:1px solid rgba(0,0,0,.12);
}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --- checklist ------------------------------------------------------------ */
.list-check li{
  position:relative;padding-left:32px;margin-bottom:13px;
  font-size:15.5px;color:var(--ink-soft);line-height:1.55;
}
.list-check li::before{
  content:"";position:absolute;left:0;top:4px;
  width:19px;height:19px;border-radius:50%;
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.section-navy .list-check li{color:var(--on-navy-soft)}

/* --- gated / lock rows ---------------------------------------------------- */
.gate{
  display:flex;align-items:center;gap:11px;
  margin-top:18px;padding:13px 17px;
  background:var(--cream-2);border:1px dashed var(--line);
  border-radius:12px;
  font-size:14px;color:var(--ink-mute);font-weight:500;
}
.gate svg{width:16px;height:16px;flex-shrink:0;color:var(--ink-mute)}
.section-navy .gate{background:rgba(255,255,255,.06);border-color:var(--line-dark);color:var(--on-navy-soft)}
.section-navy .gate svg{color:var(--yellow)}

/* --- progression band ----------------------------------------------------- */
.progression{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.prog-step{
  flex:1 1 260px;position:relative;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 26px 26px 26px;
}
.prog-step .prog-n{
  font-family:var(--font-display);font-size:12px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:11px;display:block;
}
.prog-step.s1{border-top:5px solid var(--teal)}
.prog-step.s1 .prog-n{color:var(--teal-deep)}
.prog-step.s2{border-top:5px solid var(--yellow)}
.prog-step.s2 .prog-n{color:#8a6400}
.prog-step.s3{border-top:5px solid var(--red)}
.prog-step.s3 .prog-n{color:var(--red-deep)}
.prog-step h3{font-size:20px;margin-bottom:8px}
.prog-step p{font-size:15px;color:var(--ink-soft)}

/* --- track blocks --------------------------------------------------------- */
.track{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(28px,3.5vw,44px);box-shadow:var(--shadow);margin-bottom:28px;
}
.track-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-bottom:22px}
.track-head>div:first-child{flex:1 1 420px}
.track-tag{
  display:inline-block;font-family:var(--font-display);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;margin-bottom:14px;
}
.tag-teal{background:rgba(0,160,155,.13);color:var(--teal-deep)}
.tag-yellow{background:rgba(255,199,39,.22);color:#7d5a00}
.tag-red{background:rgba(232,26,70,.11);color:var(--red-deep)}

.track-stats{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 4px}
.track-stats span{
  background:var(--cream);border:1px solid var(--line);
  border-radius:999px;padding:7px 15px;font-size:13.5px;color:var(--ink-soft);font-weight:500;
}
/* Price chip: the one stat a buyer scans for, so it gets weight. */
.track-stats span strong{
  color:var(--ink);font-family:var(--font-display);font-weight:700;
}

.curriculum{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.curriculum>li{
  flex:1 1 300px;
  background:var(--cream);border-radius:14px;padding:18px 20px;
  border-left:3px solid var(--line);
}
/* Cap at one column so a leftover item on the final row sits at its natural
   width instead of stretching the full container. */
@media (min-width:980px){
  .curriculum>li{max-width:calc(33.333% - 10px)}
}
.curriculum>li b{
  display:block;font-family:var(--font-display);font-size:15.5px;
  color:var(--ink);margin-bottom:5px;font-weight:700;
}
.curriculum>li span{font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.cur-teal>li{border-left-color:var(--teal)}
.cur-yellow>li{border-left-color:var(--yellow)}
.cur-red>li{border-left-color:var(--red)}

/* Block lists that carry a title only. Tighter, and sized so a long syllabus
   reads as a set of modules rather than a wall of cards. */
.curriculum.blocks{gap:10px}
.curriculum.blocks>li{flex:1 1 210px;padding:13px 16px}
@media (min-width:980px){
  .curriculum.blocks>li{max-width:calc(25% - 8px)}
}
.curriculum.blocks>li b{margin-bottom:0;font-size:15px}

.quarter{
  font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);
  margin:26px 0 12px;width:100%;
}

/* --- events --------------------------------------------------------------- */
.event{
  display:flex;flex-wrap:wrap;align-items:center;gap:22px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px;margin-bottom:14px;
  transition:box-shadow .18s ease,border-color .18s ease;
}
.event:hover{box-shadow:var(--shadow);border-color:var(--line)}
.ev-date{
  flex:0 0 74px;text-align:center;
  border-radius:12px;padding:10px 6px;
  background:var(--cream-2);
}
.ev-date b{
  display:block;font-family:var(--font-display);font-size:22px;
  font-weight:700;line-height:1;color:var(--ink);
}
.ev-date span{
  display:block;margin-top:3px;font-family:var(--font-display);
  font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-mute);
}
.ev-body{flex:1 1 320px;min-width:0}
.ev-body h3{font-size:19px;margin-bottom:6px}
.ev-body p{font-size:15px;color:var(--ink-soft)}
.ev-meta{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
}
.ev-tag{
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
}
.ev-public{background:rgba(0,160,155,.14);color:var(--teal-deep)}
.ev-member{background:rgba(255,199,39,.24);color:#7d5a00}
.ev-venue{background:var(--cream-2);color:var(--ink-mute)}
.event .btn{flex-shrink:0}

/* member-only rows read as locked rather than clickable */
.event.locked{background:var(--cream);border-style:dashed}
.event.locked .ev-date{background:#fff}

/* Event rows on a dark section. Without these the row keeps its light fill
   while headings inherit white from .section-navy, which is unreadable. */
.section-navy .event{
  background:var(--navy-800);border-color:var(--line-dark);
}
.section-navy .event.locked{
  background:rgba(255,255,255,.05);border-color:var(--line-dark);border-style:dashed;
}
.section-navy .event h3{color:#fff}
.section-navy .event p{color:var(--on-navy-soft)}
/* .event.locked .ev-date is more specific than .section-navy .ev-date, so the
   locked badge keeps its white fill and the white text vanishes. Restate it. */
.section-navy .ev-date,
.section-navy .event.locked .ev-date{background:rgba(255,255,255,.1)}
.section-navy .ev-date b{color:#fff}
.section-navy .ev-date span{color:var(--on-navy-soft)}
.section-navy .ev-public{background:rgba(0,160,155,.3);color:#7fe3df}
.section-navy .ev-member{background:rgba(255,199,39,.22);color:var(--yellow)}
.section-navy .ev-venue{background:rgba(255,255,255,.1);color:var(--on-navy-soft)}

@media (max-width:640px){
  .event{padding:20px}
  .event .btn{width:100%}
  .ev-date{flex:0 0 62px}
}

/* --- cast (who you learn with) -------------------------------------------- */
/* Uses the same character avatars that appear inside the training sessions,
   so the site and the course look like the same product. Headshots stay on
   About for credibility; avatars belong to the learning experience. */
/* White so it reads as a distinct block on the cream progression section,
   which shares the same fill. */
.cast{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:30px 30px 0;margin-top:36px;text-align:center;
}
.cast-head{
  display:block;font-family:var(--font-display);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:10px;
}
.cast>.muted{margin-left:auto;margin-right:auto}
.cast-row{display:flex;flex-wrap:wrap;gap:38px;align-items:flex-end;justify-content:center;margin-top:22px}
.cast-person{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;margin:0;flex:0 0 auto;
}
/* One fixed tile for every avatar. The source art varies (some on white, some
   with an office backdrop), so a uniform frame + identical crop is what makes
   the row read as a set rather than four unrelated pictures. */
.cast-person img{
  width:132px;height:176px;display:block;
  object-fit:cover;object-position:center top;
  border-radius:16px;border:1px solid var(--line);
  background:var(--cream);
}
.cast-person figcaption{padding:12px 0 26px}
.cast-person b{
  display:block;font-family:var(--font-display);font-size:15.5px;
  font-weight:700;color:var(--ink);line-height:1.2;
}
.cast-person span{
  display:block;font-size:13px;color:var(--ink-mute);margin-top:3px;
}
.cast-person.lead-role b{color:var(--ink)}
.cast-person.lead-role span{color:var(--teal-deep);font-weight:600}
@media (max-width:640px){
  .cast{padding:18px 18px 0}
  .cast-row{gap:16px;justify-content:center}
  .cast-person img{height:84px}
}

/* --- learner quotes (inside a track block) -------------------------------- */
/* Cream-filled so they read as a distinct layer inside the white track card. */
.learner-quotes{margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}
.learner-quotes .lq-head{
  font-family:var(--font-display);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:18px;
}
.lq-row{display:flex;flex-wrap:wrap;gap:16px}
/* Tinted rather than cream, so they read as testimony instead of blending
   into the cream curriculum items directly above them. */
.lq{
  flex:1 1 280px;display:flex;flex-direction:column;
  background:rgba(0,160,155,.10);border-radius:14px;padding:22px 24px;
  border-left:3px solid var(--teal);
}
/* Two per row, with basis and cap matched so a leftover quote on the final
   row keeps the same width as the rest instead of stretching. */
/* 10px not 8px: two items at exactly 50% minus half the gap sums to 100%,
   and sub-pixel rounding then tips each onto its own row. */
@media (min-width:700px){
  .lq-row>.lq{flex-basis:calc(50% - 10px);max-width:calc(50% - 10px)}
}
.lq blockquote{
  margin:0;font-size:15.5px;line-height:1.6;color:var(--ink);flex-grow:1;
}
.lq blockquote::before{
  content:"";display:block;width:26px;height:20px;margin-bottom:12px;
  background:var(--teal);opacity:.5;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9.5 4C6 4 3 7 3 10.5c0 3 2 5.5 5 5.5.3 0 .6 0 .9-.1C8.3 18 6.6 19.4 4.5 20l.8 1.6C9.7 20.1 12 16.4 12 11.5 12 7.2 11 4 9.5 4zm10 0C16 4 13 7 13 10.5c0 3 2 5.5 5 5.5.3 0 .6 0 .9-.1-.6 2.1-2.3 3.5-4.4 4.1l.8 1.6c4.4-1.5 6.7-5.2 6.7-10.1C22 7.2 21 4 19.5 4z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9.5 4C6 4 3 7 3 10.5c0 3 2 5.5 5 5.5.3 0 .6 0 .9-.1C8.3 18 6.6 19.4 4.5 20l.8 1.6C9.7 20.1 12 16.4 12 11.5 12 7.2 11 4 9.5 4zm10 0C16 4 13 7 13 10.5c0 3 2 5.5 5 5.5.3 0 .6 0 .9-.1-.6 2.1-2.3 3.5-4.4 4.1l.8 1.6c4.4-1.5 6.7-5.2 6.7-10.1C22 7.2 21 4 19.5 4z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.lq figcaption{
  margin-top:16px;font-size:13.5px;color:var(--ink-mute);font-weight:500;
}

/* --- partnership note ----------------------------------------------------- */
.note{
  display:flex;gap:15px;align-items:flex-start;
  background:rgba(23,153,214,.06);
  border:1px solid rgba(23,153,214,.22);
  border-left:4px solid var(--blue);
  border-radius:14px;padding:20px 22px;margin-top:24px;
}
.note svg{width:20px;height:20px;color:var(--blue-deep);flex-shrink:0;margin-top:2px}
.note p{font-size:15px;color:var(--ink-soft)}
.note b{color:var(--ink)}


/* --- badge certification callout ------------------------------------------ */
/* Replaces the old yellow .note-award. Teal keeps it in Track 01's colour
   family and reads as an achievement rather than a warning, which the yellow
   left-border treatment did. Flex row so the badge art sits beside the copy
   and drops beneath it on narrow screens. */
.badge-note{
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;
  background:rgba(0,160,155,.08);
  border:1px solid rgba(0,160,155,.28);
  border-radius:var(--radius);
  padding:24px 26px;margin-top:24px;
}
.badge-art{
  flex:0 0 132px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:132px;height:132px;
  /* border:2px dashed rgba(0,160,155,.5); */
  border-radius:50%;
  /* background:rgba(255,255,255,.7); */
  text-align:center;padding:12px;
  overflow: hidden;
}
.badge-art svg{width:30px;height:30px;color:var(--teal-deep)}
.badge-art span{
  font-family:var(--font-display);font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--teal-deep);
  line-height:1.35;
}
.badge-copy{flex:1 1 300px}
.badge-copy b{
  display:block;font-family:var(--font-display);
  font-size:19px;font-weight:700;color:var(--ink);
  line-height:1.3;margin-bottom:8px;
}
.badge-copy p{font-size:15px;color:var(--ink-soft)}
@media (max-width:640px){
  .badge-note{gap:18px;padding:20px}
  .badge-art{flex:0 0 108px;width:108px;height:108px}
}

/* --- FanCAS-Kit sample cards ---------------------------------------------- */
/* Was a stack of inline styles. The asset-type tag is the point: the Kit mixes
   video, toolkits, templates and interactive models, and burying that in the
   first two words of each description made the mix invisible at a glance. */
.kit-sample{padding:0;overflow:hidden;display:flex;flex-direction:column}
.kit-sample-head{
  background:var(--navy);color:#fff;padding:18px 26px;
  font-family:var(--font-display);font-weight:700;font-size:16.5px;
}
.kit-sample-body{padding:24px 26px;display:flex;flex-direction:column;gap:20px;flex:1}
.kit-item b{
  display:block;font-family:var(--font-display);font-size:15.5px;
  color:var(--ink);margin-bottom:7px;
}
.kit-item .muted{font-size:14.5px}
.kit-tag{
  display:inline-block;margin-bottom:9px;
  font-family:var(--font-display);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
}
.tag-video{background:rgba(232,26,70,.1);color:var(--red-deep)}
.tag-toolkit{background:rgba(0,160,155,.13);color:var(--teal-deep)}
.tag-template{background:rgba(23,153,214,.12);color:var(--blue-deep)}
.tag-interactive{background:rgba(255,199,39,.22);color:#8a6400}

/* --- six-phase summary (home page) ---------------------------------------- */
/* Replaces a duplicate of the Kit page's sample card. The home page needs the
   framework's shape, not one phase's file list, so this shows all six at the
   altitude a first-time visitor can actually use. */
.phase-list{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden;
}
.phase-list-head{
  background:var(--navy);color:#fff;padding:18px 26px;
  font-family:var(--font-display);font-weight:700;font-size:16.5px;
}
.phase-list ol{list-style:none;margin:0;padding:8px 0}
.phase-list li{
  display:flex;align-items:center;gap:14px;
  padding:13px 26px;border-bottom:1px solid var(--line);
}
.phase-list li:last-child{border-bottom:0}
.phase-list .phase-n{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(27,22,50,.07);color:var(--navy);
  font-family:var(--font-display);font-size:12px;font-weight:700;
}
.phase-list b{font-family:var(--font-display);font-size:15.5px;color:var(--ink);font-weight:600}
/* Rows are links now, so they need hover and focus states, and a brief ring on
   the Kit page card you land on so it's obvious which one you were sent to. */
.phase-list li a{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:13px 26px;text-decoration:none;color:inherit;
  transition:background .16s ease;
}
.phase-list li{padding:0}
.phase-list li a:hover,
.phase-list li a:focus-visible{background:rgba(27,22,50,.04)}
.phase-list li a:hover .phase-n{background:var(--navy);color:#fff}
.phase-list .phase-go{margin-left:auto;color:var(--blue-deep);transition:transform .16s ease}
.phase-list li a:hover .phase-go{transform:translateX(4px)}
.phase-list .phase-n{transition:background .16s ease,color .16s ease}
.card:target{box-shadow:0 0 0 3px rgba(23,153,214,.45),var(--shadow)}

/* --- pricing -------------------------------------------------------------- */
.price-card{

  flex:0 1 380px;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px 32px;box-shadow:var(--shadow);position:relative;
}
.price-card.featured{border:2px solid var(--navy);box-shadow:var(--shadow-lg)}
.price-flag{
  position:absolute;top:-13px;left:32px;
  background:var(--yellow);color:var(--navy);
  font-family:var(--font-display);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:6px 15px;border-radius:999px;
}
.price-name{font-family:var(--font-display);font-size:19px;font-weight:700;margin-bottom:6px}
.price-sub{font-size:14.5px;color:var(--ink-mute);margin-bottom:22px}
.price-amt{display:flex;align-items:baseline;gap:5px;margin-bottom:8px}
.price-amt b{font-family:var(--font-display);font-size:52px;font-weight:700;line-height:1;color:var(--ink)}
.price-amt span{font-size:16px;color:var(--ink-mute);font-weight:500}
.price-card .btn{margin-top:26px}
.price-card ul{margin-top:24px}

/* --- testimonials --------------------------------------------------------- */
.quote{
  flex:1 1 320px;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow);
}
/* .quote's own basis beats .col-2>* on source order, so a two-up testimonial
   row needs its width stated here. 14px not 12px to clear rounding. */
@media (min-width:760px){
  .row.col-2>.quote{flex-basis:calc(50% - 14px);max-width:calc(50% - 14px)}
}
.stars{display:flex;gap:3px;margin-bottom:16px}
.stars svg{width:18px;height:18px;fill:var(--yellow)}
.quote blockquote{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink);flex-grow:1}
.quote figcaption{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);
}
.quote figcaption span{display:block;font-family:var(--font-body);font-weight:400;font-size:14px;color:var(--ink-mute);margin-top:3px}

/* --- people --------------------------------------------------------------- */
.person{
  flex:1 1 250px;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow);
}
.person-photo{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:var(--cream-2);
}
.person-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.person-photo.avatar{display:flex;align-items:flex-end;justify-content:center;padding-top:16px}
.person-photo.avatar img{width:auto;height:94%;object-fit:contain}
.person-photo.bg-teal{background:rgba(0,160,155,.16)}
.person-photo.bg-yellow{background:rgba(255,199,39,.24)}
.person-photo.bg-blue{background:rgba(23,153,214,.16)}
.person-photo.bg-red{background:rgba(232,26,70,.12)}
.person-body{padding:24px;display:flex;flex-direction:column;gap:9px}
.person-body h3{font-size:20px}
.person-role{
  font-family:var(--font-display);font-size:12.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--blue-deep);
}
.person-body p{font-size:14.5px;color:var(--ink-soft);line-height:1.6}

/* --- media / video placeholders ------------------------------------------- */
.media-frame{
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);background:var(--cream-2);
}
.video-ph{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  aspect-ratio:16/9;padding:28px;text-align:center;
  background:var(--navy-800);
  border:2px dashed rgba(255,255,255,.24);
  border-radius:var(--radius-lg);color:#fff;
}
.video-ph .play{
  width:64px;height:64px;border-radius:50%;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(232,26,70,.4);
}
.video-ph .play svg{width:24px;height:24px;fill:#fff;margin-left:3px}
.video-ph b{font-family:var(--font-display);font-size:17px;font-weight:700}
.video-ph span{font-size:14px;color:var(--on-navy-soft);max-width:44ch;line-height:1.5}
.video-ph .ph-tag{
  position:absolute;top:14px;left:14px;
  font-family:var(--font-display);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  background:var(--yellow);color:var(--navy);
  padding:5px 11px;border-radius:999px;
}

/* generic "coming soon" placeholder block */
.soon{
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  background:var(--cream);border:2px dashed var(--line);
  border-radius:var(--radius-lg);padding:32px;
}
.soon .ph-tag{
  font-family:var(--font-display);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  background:var(--yellow);color:var(--navy);
  padding:5px 12px;border-radius:999px;
}

/* --- ladder --------------------------------------------------------------- */
.ladder{display:flex;flex-direction:column;gap:12px;counter-reset:rung}
.rung{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px;
}
.rung .rung-n{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  background:var(--navy);color:#fff;
}
.rung-body{flex:1 1 300px}
.rung-body b{display:block;font-family:var(--font-display);font-size:17px;margin-bottom:3px}
.rung-body span{font-size:15px;color:var(--ink-soft)}
/* The final rung used to take the page background exactly, so on a navy section
   it looked like it had no box. It now matches rungs 1-4; the yellow number is
   what marks it as the endpoint. */
.rung.final{background:var(--navy);border-color:var(--navy);color:#fff}
.section-navy .rung.final{background:var(--navy-800);border-color:var(--line-dark)}
.rung.final .rung-n{background:var(--yellow);color:var(--navy)}
.rung.final .rung-body span{color:var(--on-navy-soft)}

/* --- accordion (maps to Elementor accordion widget) ----------------------- */
.acc{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.acc details{border-bottom:1px solid var(--line)}
.acc details:last-child{border-bottom:0}
.acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 24px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:700;font-size:16.5px;color:var(--ink);
  transition:background-color .16s ease;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--cream)}
.acc summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.acc summary::after{
  content:"";width:11px;height:11px;flex-shrink:0;
  border-right:2.5px solid var(--ink-mute);border-bottom:2.5px solid var(--ink-mute);
  transform:rotate(45deg);transition:transform .2s ease;margin-top:-4px;
}
.acc details[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.acc .acc-body{padding:0 24px 22px;font-size:15.5px;color:var(--ink-soft);line-height:1.65}

/* --- logo strip ----------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:11px}
.chip{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;font-size:14px;font-weight:500;color:var(--ink-soft);
}
.section-navy .chip{background:rgba(255,255,255,.08);border-color:var(--line-dark);color:var(--on-navy-soft)}
/* Label variant. Both chips share one tint on purpose: two different colours
   would read as a legend keyed to something. Solid navy keeps them out of the
   accent palette the four step cards below are using, and a filled pill reads
   as a label rather than the inactive tab a plain grey pill suggests. */
.chip-label{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
  font-weight:600;
}

/* Linked chip for dark heroes. Distinct from .btn on purpose: the hero already
   has a primary and a secondary button, and a third would flatten that
   hierarchy. This reads as a shortcut, not a third call to action. */
.chip-link{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:9px 18px;
  font-family:var(--font-display);font-size:14px;font-weight:600;
  color:#fff;text-decoration:none;
  transition:background .18s ease,border-color .18s ease;
}
.chip-link:hover,.chip-link:focus-visible{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.38);
}
.chip-link svg{width:16px;height:16px;flex-shrink:0}
.chip-link .chip-arrow{transition:transform .18s ease}
.chip-link:hover .chip-arrow{transform:translateX(3px)}

/* --- CTA band ------------------------------------------------------------- */
.band{
  position:relative;overflow:hidden;
  background:var(--navy);color:#fff;
  padding:clamp(56px,7vw,86px) 0;text-align:center;
}
.band h2{color:#fff;max-width:22ch;margin:0 auto}
.band p{margin:18px auto 0;max-width:56ch;color:var(--on-navy-soft)}
.band .btn-row{justify-content:center}

/* --- forms ---------------------------------------------------------------- */
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3.5vw,40px);box-shadow:var(--shadow);
}
/* The card is white, so on a navy section the inherited light text would paint
   white on white. Same trap as .section-navy .card h3 further up. */
.section-navy .form-card h2,
.section-navy .form-card h3,
.section-navy .form-card label{color:var(--ink)}
.section-navy .form-card .muted,
.section-navy .form-card p{color:var(--ink-mute)}
.field{margin-bottom:20px}
.field label{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:14px;margin-bottom:8px;color:var(--ink);
}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;font:inherit;font-size:16px;
  color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:12px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,153,214,.16);
}
.field textarea{min-height:130px;resize:vertical}
.field-row{display:flex;flex-wrap:wrap;gap:20px}
.field-row>.field{flex:1 1 220px;margin-bottom:20px}
.req{color:var(--red-deep)}

/* --- footer --------------------------------------------------------------- */
.site-footer{background:var(--navy);color:var(--on-navy-soft);padding:64px 0 30px}
.footer-top{display:flex;flex-wrap:wrap;gap:40px;margin-bottom:44px}
.footer-brand{flex:1 1 300px}
.footer-brand img{height:44px !important;width:auto !important;margin-bottom:18px}
.footer-brand p{font-size:15px;line-height:1.65;max-width:38ch}
.footer-col{flex:1 1 160px}
.footer-col h3{
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:16px;
}
.footer-col a{
  display:block;padding:6px 0;font-size:15px;
  color:var(--on-navy-soft) !important;text-decoration:none;
  transition:color .16s ease;
}
.footer-col a:hover{color:var(--yellow)}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  padding-top:26px;border-top:1px solid var(--line-dark);
  font-size:13.5px;color:var(--on-navy-soft);
}
.footer-bottom a{color:var(--on-navy-soft)}

/* --- site search ---------------------------------------------------------- */
/* Client-side only, for the static review build. On WordPress the trigger maps
   to Elementor's Search Form widget and this whole block is unnecessary. */
.search-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  color:var(--ink);cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}
.search-btn:hover,.search-btn:focus-visible{background:rgba(27,22,50,.05);border-color:var(--navy)}
.search-btn svg{width:18px;height:18px}
.mobile-nav .search-btn{
  width:auto;height:auto;gap:10px;justify-content:flex-start;
  padding:11px 4px;border:0;border-radius:0;
  font-family:var(--font-display);font-size:16px;font-weight:600;
}

.search-overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(27,22,50,.55);
  padding:80px 20px 20px;
}
.search-overlay.is-open{display:block}
.search-panel{
  max-width:640px;margin:0 auto;
  background:#fff;border-radius:var(--radius-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.3);
  overflow:hidden;
}
.search-bar{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.search-bar svg{width:19px;height:19px;color:var(--ink-mute);flex-shrink:0}
.search-bar input{
  flex:1;border:0;outline:0;background:transparent;
  font-family:var(--font-body);font-size:17px;color:var(--ink);
}
.search-close{
  border:1px solid var(--line);background:transparent;border-radius:8px;
  padding:4px 9px;font-size:12px;color:var(--ink-mute);cursor:pointer;
}
.search-close:hover{background:rgba(27,22,50,.05)}
#search-status{padding:12px 20px;font-size:13.5px;color:var(--ink-mute)}
.sr-item{
  display:block;padding:14px 20px;border-top:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.sr-item:hover,.sr-item:focus-visible{background:rgba(27,22,50,.04);outline:0}
.sr-item b{display:block;font-family:var(--font-display);font-size:16px;color:var(--ink);margin-bottom:4px}
.sr-item span{display:block;font-size:14px;color:var(--ink-soft);line-height:1.5}
.sr-item mark{background:rgba(255,199,39,.45);color:inherit;padding:0 2px;border-radius:3px}
#search-results{max-height:min(52vh,420px);overflow-y:auto}
@media (max-width:640px){
  .search-overlay{padding:64px 12px 12px}
}

/* --- responsive ----------------------------------------------------------- */
/* Raised from 1040px, then 1120px: with seven nav items the row no longer fits
   above the old breakpoints, which left a band where the nav wrapped onto two
   lines. The Events -> Resources rename left only 15px of slack at 1120px. */
@media (max-width:1160px){
  .main-nav{display:none}
  .nav-toggle{display:flex}
  .header-actions .btn-login{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .site-header>.wrap{height:68px}
  .mobile-nav{top:68px;max-height:calc(100vh - 68px)}
  /* mobile-nav is fixed at 78px by default; keep it pinned under the shorter bar */
  .brand-link img{height:33px !important;}
  .section{padding:44px 0}
  .card,.track,.price-card,.pathway{padding:24px}
  .stats>div{flex:1 1 100%}
  .btn{width:100%}
  .btn-row .btn{width:100%}
  .footer-bottom{flex-direction:column;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .btn:hover,.pathway:hover{transform:none}
}

/* --- print ---------------------------------------------------------------- */
@media print{
  .site-header,.mobile-nav,.band,.geo,.lattice{display:none}
  body{color:#000}
}

/* Visually hidden but available to screen readers. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Availability checkboxes on the meeting request form. Wraps rather than
   forcing a fixed column count, so day and time rows behave the same. */
.check-row{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:4px}
.check{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;color:var(--ink-soft);font-weight:500;cursor:pointer;
}
.check input{width:17px;height:17px;accent-color:var(--teal-deep);cursor:pointer}

/* --- footer social ------------------------------------------------------- */
/* Icon-only links, so they need an accessible name; each carries aria-label
   plus a title for the hover tooltip. */
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.social a:hover,.social a:focus-visible{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.4);
  transform:translateY(-2px);
}
.social svg{width:17px;height:17px}

/* Inline placeholder note. Used where a form works but the asset behind it
   isn't wired yet, so reviewers don't report it as broken. */
.ph-note{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin-top:16px;padding:12px 14px;
  background:rgba(255,199,39,.14);
  border:1px dashed rgba(255,199,39,.6);
  border-radius:12px;
  font-size:13px;color:var(--ink-soft);line-height:1.5;
}
.ph-note .ph-tag{
  font-family:var(--font-display);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--yellow);color:var(--navy);
  padding:4px 9px;border-radius:999px;flex-shrink:0;
}
.section-navy .ph-note{color:var(--ink-soft)}