/* =====================================================================
   Bizacharya — design system modelled on the "Copora" consulting template:
   monochrome, Inter, medium-weight headings, 1px borders, no shadows/gradients.
   Order: tokens → base → layout → header/footer → buttons → components → pages → motion
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Logo palette: navy for dark surfaces/headings, blue for actions, teal for accents */
  --black:     #0A2540;   /* navy — headings, dark sections, footer */
  --black-2:   #123B63;   /* navy hover */
  --primary:   #07579A;   /* logo blue — primary buttons, active states */
  --primary-2: #1F6DAE;   /* blue hover */
  --ink:       #12202E;   /* strong text */
  --text:      #3B4A5A;   /* body copy */
  --muted:     #627288;   /* secondary copy — darkened from #64748B so it clears 4.5:1 on --surface too */
  --line:      #D9E4EE;   /* borders */
  --surface:   #F2F7FB;   /* light sections (blue-tinted) */
  --surface-2: #F8FBFD;   /* pills, subtle fills */
  --white:     #FFFFFF;
  --brand:     #07579A;   /* links, focus */
  --brand-2:   #1A9A8C;   /* logo teal — fills, borders, icons, decoration */
  /* Text-safe teal. The logo teal only reaches 3.47:1 on white, so it fails WCAG AA wherever it
     carries small copy (eyebrows, tags, active nav). Use this for teal TEXT under ~24px; keep
     --brand-2 for fills, borders and icons, where 3:1 is the bar and the brighter teal is right. */
  --brand-2-ink: #157E73;
  --on-dark:   rgba(255, 255, 255, .74);

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ml: "Noto Sans Malayalam", "Manjari", system-ui, sans-serif;

  /* Typography scale — sourced from the Home page (index.html), which is the single reference
     for heading/body/label sizing across every page. Individual components may still tune
     weight, line-height, letter-spacing or margin for their own context, but a font-size should
     always trace back to one of these rather than introducing a new literal value. */
  --font-h1: clamp(2rem, 8vw, 2.75rem);       /* main heading — Home page's h1 (the hero), the reference for every h1 site-wide; scales further at 576px/992px, see the h1 rule below */
  --font-h2: clamp(1.9rem, 3.1vw, 2.75rem);   /* section heading */
  --font-h3: clamp(1.15rem, 1.6vw, 1.35rem);  /* subheading / card title */
  --font-h4: 1.05rem;
  --font-body: 1rem;                          /* base paragraph / button text */
  --font-lead: 1.1rem;                        /* intro / lead / section-head description */
  --font-small: .9rem;                        /* eyebrow / small label */
  --font-button: 1rem;
  --font-nav: .82rem;                         /* header navigation links */
  --font-tagline: clamp(1.15rem, 3vw, 1.35rem); /* short slogan line between eyebrow and h1 (Home hero__sub) */

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 80px;
  --gutter: 30px;
  /* Single source of truth for button height — .btn and every size modifier (sm/lg) share it,
     so height stays consistent everywhere; only horizontal padding/font-size vary by size. */
  --button-height: clamp(44px, 4vw + 30px, 60px);
  /* Default duration for continuous marquee sliders (.marquee) — override per-instance or at a
     breakpoint to change speed without touching the animation logic. */
  --slider-speed: 30s;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x here (not just on body) matters: <html> is the actual scrolling root in standards
   mode, and a fixed-position element wider than the viewport (e.g. the off-canvas nav drawer,
   translated out of view but still in the layout tree) can otherwise force the document wider
   than the viewport on narrow screens, clipping in-flow content at the right edge instead of
   wrapping it.
   `clip` rather than `hidden`: `hidden` makes the element a scroll container, which silently
   breaks `position: sticky` on everything inside it — the sticky header then anchors to a
   container that never scrolls and just scrolls away with the page. `clip` cuts off the same
   overflow without establishing a scrollport, so the header keeps sticking. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; font-family: var(--font); font-size: var(--font-body); line-height: 1.65; color: var(--text); background: #fff;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; display: flex; flex-direction: column; min-height: 100vh;
}
body.is-locked { overflow: hidden; }
main { flex: 1; }
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--black); }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1rem; }
/* Like .ph above, this matters because the pages load bootstrap-grid (no Reboot): without it the
   browser default `blockquote { margin: 1em 40px }` insets every quote 40px from its container. */
blockquote { margin: 0; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 500; color: var(--black); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .6em; }
h1 { font-size: var(--font-h1); line-height: 1.08; letter-spacing: -0.025em; }
/* Home page's h1 (the hero) grows in two more steps as the viewport widens — every h1 site-wide
   follows the exact same curve, so page titles stay the same size as the Home page at every width. */
@media (min-width: 576px) { h1 { font-size: clamp(2.5rem, 6vw, 3.4rem); } }
@media (min-width: 992px) { h1 { font-size: clamp(2.5rem, 3.4vw, 4rem); } }
h2 { font-size: var(--font-h2); letter-spacing: -0.025em; }
h3 { font-size: var(--font-h3); }
h4 { font-size: var(--font-h4); }
.lead { font-size: var(--font-lead); color: var(--muted); line-height: 1.6; }
.muted { color: var(--muted); }
strong { font-weight: 600; color: var(--ink); }
.ml { font-family: var(--font-ml); }
.icon { width: 1.25em; height: 1.25em; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; }
.icon--fill { fill: currentColor; stroke: none; }
/* Bizacharya illustrated icons — two-tone line art on a 48-unit grid (soft tint .d, accent .a), colour from context */
.icon--art { stroke-width: 2.6; }
.icon--art .d { fill: currentColor; opacity: .16; stroke: none; }
.icon--art .a { fill: currentColor; opacity: .5; stroke: none; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; background: var(--black); color: #fff; padding: .6rem 1rem; border-radius: var(--radius-sm); }
.skip-link:focus { top: 1rem; color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Layout ---------- */
.container {
  --bs-gutter-x: calc(var(--gutter) * 2);
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding-left: clamp(20px, 5vw, 80px); padding-right: clamp(20px, 5vw, 80px);
}
/* On large displays the 1280px cap leaves a lot of empty gutter, so let the content breathe.
   Gated at 1600px rather than applied outright, so every layout below that is unchanged. */
@media (min-width: 1600px) { .container { max-width: 1440px; } }
.section { padding: clamp(4rem, 7vw, 6.5rem) 0; position: relative; }
.section--tight { padding: clamp(2.5rem, 4.5vw, 4rem) 0; }
.section--light { background: var(--surface); }
.section--tint { background: var(--surface-2); }
.section--navy { background: var(--black); color: var(--on-dark); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy p { color: var(--on-dark); }
.section--navy .eyebrow { color: #4FC3B5; }
/* Every section carries the same rhythm above and below its content, including two that share
   a background and read as one continuous band. */
.section--pattern::before, .section--pattern-dark::before { content: none; }
.section-head { max-width: 680px; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: var(--font-lead); max-width: 560px; }
.section-head--center p { margin-left: auto; margin-right: auto; }
.section-head h2 { margin-bottom: .5rem; }
/* Section eyebrows that sit outside a .section-head (split layouts) use the same treatment as the
   Home section heads: muted, lead-sized, no rule. */
.know .eyebrow, .associate-intro .eyebrow, .financial-intro .eyebrow, .section--pattern-dark .col-lg-6 > .eyebrow { color: var(--muted); font-size: var(--font-lead); }
.eyebrow { display: block; font-size: var(--font-small); font-weight: 500; color: var(--brand-2-ink); margin-bottom: .75rem; }
.eyebrow::before, .eyebrow::after { content: none; }
.grid-gap { --bs-gutter-y: 1.5rem; --bs-gutter-x: 1.5rem; }
.hero__inner > *, .connect > *, .leader > *, .vm2__panels > *, .premium__inner > *, [class*="col-"] { min-width: 0; }

/* ---------- 4. Buttons (reference: Copora — static colour, label rolls up on hover) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: var(--button-height); padding: 0 2rem; border-radius: 50px;
  border: 1px solid transparent; font-weight: 500; font-size: var(--font-button); line-height: 1.5; white-space: nowrap; cursor: pointer;
  transition: background .15s cubic-bezier(.4, 0, .2, 1), color .15s, border-color .15s;
}
.btn .icon { width: 1.1em; height: 1.1em; flex: none; }
.btn__label { position: relative; display: block; overflow: hidden; height: 1.5em; line-height: 1.5em; }
.btn__t { display: block; transition: transform 1.125s cubic-bezier(.19, 1, .22, 1); }
.btn__t--alt { position: absolute; left: 0; top: 0; transform: translateY(100%); }
.btn:hover .btn__t { transform: translateY(-100%); }
.btn:hover .btn__t--alt { transform: translateY(0); }
.btn.is-loading { cursor: default; pointer-events: none; }
.btn.is-loading .btn__label, .btn.is-loading .icon { visibility: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1.1em; height: 1.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn--primary:hover { color: #fff; }
.btn--accent { background: var(--brand-2); color: #fff; border-color: var(--brand-2); }
.btn--accent:hover { color: #fff; }
.btn--outline { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { color: var(--ink); border-color: #B9CAD9; }
.btn--light, .btn--white { background: #fff; color: var(--black); border-color: #fff; }
.btn--light:hover, .btn--white:hover { color: var(--black); }
.btn--sm { padding: 0 1.15rem; font-size: .875rem; }
.btn--lg { padding: 0 2.5rem; font-size: 1rem; }
.btn--wa { background: #25D366; color: #073b1e; border-color: #25D366; }
.btn--wa:hover { color: #073b1e; }
.btn-group { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 575.98px) {
  .btn { white-space: normal; text-align: center; }
  .btn--lg { padding: .7rem 1.25rem; font-size: .9375rem; }
  .btn__label { height: auto; overflow: visible; line-height: 1.4; }
  .btn__t--alt { display: none; }
  .btn:hover .btn__t { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .btn__t--alt { display: none; } .btn:hover .btn__t { transform: none; } .btn__label { height: auto; } }
.text-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; font-size: .95rem; color: var(--ink); }
.text-link .icon { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.text-link:hover { color: var(--brand); }
.text-link:hover .icon { transform: translateX(3px); }

/* ---------- 5. Top bar + header (reference: innovatik) ---------- */
.topbar { background: #fff; border-bottom: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.topbar__inner { display: flex; align-items: stretch; justify-content: space-between; min-height: 42px; gap: 1rem; }
.topbar__info { display: flex; align-items: stretch; }
.topbar__info > * { display: inline-flex; align-items: center; gap: .5rem; padding: 0 1.1rem; border-right: 1px solid var(--line); color: var(--text); font-weight: 500; white-space: nowrap; }
.topbar__info > *:first-child { padding-left: 0; }
.topbar__info a:hover { color: var(--primary); }
.topbar__info .icon { width: 14px; height: 14px; color: var(--primary); }
.topbar__right { display: flex; align-items: stretch; }
.topbar__auth { display: inline-flex; align-items: center; gap: .4rem; padding: 0 1.1rem; border-left: 1px solid var(--line); font-weight: 500; white-space: nowrap; }
.topbar__auth a { color: var(--ink); }
.topbar__auth a:hover { color: var(--primary); }
.social--cells { gap: 0; }
.social--cells a { width: 40px; height: auto; border-radius: 0; border-left: 1px solid var(--line); color: var(--text); }
.social--cells li:last-child a { border-right: 1px solid var(--line); }
.social--cells a:hover { background: var(--surface); color: var(--primary); }
.social--cells .icon { width: 15px; height: 15px; }
@media (max-width: 991.98px) { .topbar__addr, .topbar__info a:nth-child(2) { display: none; } }
@media (max-width: 575.98px) { .topbar__auth { display: none; } .topbar__info > * { padding: 0 .6rem; } .social--cells a { width: 32px; } .topbar { font-size: .78rem; } }

.header { position: sticky; top: 0; z-index: 900; background: #fff; box-shadow: 0 2px 10px rgba(10, 37, 64, .08); transition: box-shadow .25s var(--ease); }
.header.is-scrolled { box-shadow: 0 6px 24px -10px rgba(10, 37, 64, .25); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); transition: height .25s var(--ease); }
.header.is-scrolled .header__inner { height: 68px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 46px; width: auto; transition: height .25s var(--ease); }
.header.is-scrolled .brand img { height: 40px; }
@media (max-width: 575.98px) { .brand img { height: 28px; } .header.is-scrolled .brand img { height: 26px; } }
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: .35rem; }
.nav__item { position: relative; }
.nav__item--has-sub { display: flex; align-items: center; }
.nav__link {
  display: inline-flex; align-items: center; gap: .35rem; padding: .65rem .9rem; border-radius: var(--radius-sm); background: none; border: 0; white-space: nowrap;
  font-weight: 600; font-size: var(--font-nav); letter-spacing: .06em; text-transform: uppercase; color: var(--black); transition: color .2s, background .2s;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--primary); }
.nav__link.is-active { color: var(--brand-2-ink); }
.nav__link .icon { width: 14px; height: 14px; transition: transform .2s; }
/* Separate small toggle button (chevron only) beside the label link, so the label can navigate on its own */
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center; padding: .5rem; margin-left: -.6rem;
  border-radius: var(--radius-sm); background: none; border: 0; color: var(--black); transition: color .2s, background .2s;
}
.nav__toggle:hover, .nav__toggle[aria-expanded="true"] { color: var(--primary); background: var(--surface); }
.nav__toggle .icon { width: 14px; height: 14px; transition: transform .2s; }
.nav__item.is-open .nav__toggle .icon { transform: rotate(180deg); }
.nav__sub { position: absolute; left: 0; top: calc(100% + 12px); min-width: 276px; padding: .5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__sub a { display: block; padding: .68rem .85rem; border-radius: var(--radius-sm); font-size: .94rem; color: var(--text); }
.nav__sub a:hover, .nav__sub a:focus-visible { background: var(--surface); color: var(--primary); }
.nav__item.is-open .nav__sub, .nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
@media (hover: hover) { .nav__item--has-sub:hover .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); } }
.header__actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.nav { margin-left: auto; }
@media (min-width: 1200px) { .header__actions { display: none; } }
.header__cta { display: none; }
.burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--black); }
.burger .icon { width: 20px; height: 20px; }
@media (min-width: 1200px) {
  .nav { display: block; }
  .burger { display: none; }
  .nav__link { padding: .65rem .8rem; font-size: .8rem; letter-spacing: .05em; }
  .brand img { height: 42px; }
  .header__inner { gap: 1.25rem; }
}
@media (min-width: 1366px) { .brand img { height: 42px; } .nav__link { padding: .65rem .9rem; } }
@media (min-width: 1440px) { .nav__link { padding: .7rem 1rem; font-size: .82rem; letter-spacing: .055em; } .brand img { height: 46px; } .nav__list { gap: .45rem; } }
@media (min-width: 1680px) { .nav__link { padding: .7rem 1.15rem; font-size: .84rem; letter-spacing: .06em; } .nav__list { gap: .55rem; } }

/* Homepage only: header integrated into the dark hero instead of a separate white bar.
   The logo has no light/white asset in the project, so it's inverted via filter here —
   the file itself is untouched, this only affects how it renders on the dark header. */
/* A shade deeper than the header's navy so the strip reads as its own band, with bright text,
   teal icons and visible (but soft) cell dividers. */
body.has-hero .topbar { background: #061A2E; border-bottom-color: rgba(255, 255, 255, .1); }
/* The cell dividers inherit the light-theme --line (#D9E4EE), which reads as a hard bright
   rule against the dark hero header — a soft white separates without drawing the eye. */
body.has-hero .topbar__info > * { border-right-color: rgba(255, 255, 255, .12); }
body.has-hero .topbar__auth { border-left-color: rgba(255, 255, 255, .12); }
body.has-hero .social--cells a { border-left-color: rgba(255, 255, 255, .12); }
body.has-hero .social--cells li:last-child a { border-right-color: rgba(255, 255, 255, .12); }
body.has-hero .topbar__info a, body.has-hero .topbar__right a { color: rgba(255, 255, 255, .92); }
body.has-hero .topbar__info .icon { color: #4FC3B5; }
body.has-hero .topbar__info a:hover, body.has-hero .topbar__right a:hover { color: #fff; }
body.has-hero .social--cells a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
body.has-hero .topbar__auth span { color: rgba(255, 255, 255, .35); }
body.has-hero .header { background: var(--black); box-shadow: 0 2px 20px rgba(0, 0, 0, .3); }
body.has-hero .header.is-scrolled { box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .5); }
body.has-hero .header .brand img { filter: brightness(0) invert(1); }
body.has-hero .nav__link { color: #fff; }
body.has-hero .nav__link:hover, body.has-hero .nav__link[aria-expanded="true"], body.has-hero .nav__link.is-active { color: #4FC3B5; }
body.has-hero .nav__toggle { color: #fff; }
body.has-hero .nav__toggle:hover, body.has-hero .nav__toggle[aria-expanded="true"] { color: #4FC3B5; background: rgba(255, 255, 255, .1); }
body.has-hero .burger { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }

/* Off-canvas drawer */
.drawer { position: fixed; inset: 0; z-index: 1100; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, .55); opacity: 0; transition: opacity .3s var(--ease); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.drawer__head .brand img { height: 34px; }
.drawer__close { width: 40px; height: 40px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--black); }
.drawer__nav { padding: .5rem 0; flex: 1; }
.drawer__nav a, .drawer__acc { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .9rem 1.25rem; font-weight: 500; font-size: 1rem; color: var(--ink); background: none; border: 0; text-align: left; }
.drawer__nav a:hover, .drawer__acc:hover { background: var(--surface); color: var(--black); }
.drawer__acc .icon { width: 16px; height: 16px; transition: transform .25s; }
.drawer__acc[aria-expanded="true"] .icon { transform: rotate(180deg); }
/* Split row: the label navigates to the listing page, the small chevron button expands the sub-list */
.drawer__item { display: flex; align-items: stretch; }
.drawer__item a { flex: 1; width: auto; }
.drawer__item .drawer__acc { width: auto; flex: none; padding: .9rem 1.1rem; justify-content: center; }
.drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); background: var(--surface); }
.drawer__sub > ul { overflow: hidden; }
.drawer__sub.is-open { grid-template-rows: 1fr; }
.drawer__sub a { padding: .65rem 1.25rem .65rem 2rem; font-weight: 400; font-size: .92rem; }
.drawer__foot { padding: 1.25rem; border-top: 1px solid var(--line); display: grid; gap: .75rem; }
.social { display: flex; gap: .25rem; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 100%; border-radius: 0; color: inherit; transition: background .2s, color .2s; }
.social a:hover { background: rgba(127, 127, 127, .15); color: inherit; }
.social .icon { width: 17px; height: 17px; }
.drawer__foot .social { color: var(--ink); }

/* ---------- 6. Footer (black) ---------- */
.footer { background: var(--black); color: var(--on-dark); }
.footer__main { padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: 2.5rem; }
.footer__brand { display: inline-flex; align-items: center; background: #fff; padding: .7rem 1rem; border-radius: var(--radius); max-width: 100%; }
.footer__brand img { height: 48px; width: auto; max-width: 100%; }
.footer__tagline { margin: 1.5rem 0 1rem; max-width: 340px; font-size: .95rem; color: var(--on-dark); }
.footer h4 { color: rgba(255, 255, 255, .55); font-size: .9rem; font-weight: 500; margin-bottom: 1rem; }
.footer__links li { margin-bottom: .6rem; }
.footer__links a { color: #fff; font-size: .95rem; }
.footer__links a:hover { color: rgba(255, 255, 255, .7); }
.footer__contact li { display: flex; gap: .6rem; margin-bottom: .8rem; font-size: .95rem; color: #fff; }
.footer__contact .icon { color: rgba(255, 255, 255, .6); margin-top: .25rem; width: 17px; height: 17px; }
.footer__contact a { color: #fff; overflow-wrap: anywhere; }
.footer__contact a[href^="mailto:"] { white-space: nowrap; overflow-wrap: normal; }
@media (min-width: 768px) and (max-width: 991.98px) { .footer__contact { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 2.5rem; } }
.footer__contact a:hover { color: rgba(255, 255, 255, .7); }
.footer__addr address { font-style: normal; }
.footer__addr-label { display: block; margin-bottom: .2rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.footer .social { margin-top: 1rem; color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 1.5rem 0; font-size: .875rem; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: .5rem 1.5rem; color: rgba(255, 255, 255, .6); }
.footer__bottom a { color: #fff; }
.footer__bottom a:hover { color: rgba(255, 255, 255, .7); }

/* ---------- 7. Floating actions ---------- */
.fab { position: fixed; right: 1.25rem; z-index: 800; width: 50px; height: 50px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 0; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35); transition: transform .2s var(--ease), opacity .3s var(--ease), visibility .3s; }
.fab:hover { transform: translateY(-2px); }
.fab .icon { width: 24px; height: 24px; }
.fab--wa { bottom: 1.25rem; background: #25D366; color: #fff; }
.fab--wa:hover { color: #fff; }
.fab--top { bottom: 5.1rem; background: var(--primary); color: #fff; opacity: 0; visibility: hidden; }
.fab--top.is-visible { opacity: 1; visibility: visible; }
.fab--top .icon { width: 20px; height: 20px; }

/* ---------- 8. Image placeholders (photo frames) ---------- */
/* margin:0 matters — .ph is usually a <figure>, and the page loads bootstrap-grid (no Reboot),
   so without this the browser default `figure { margin: 1em 40px }` insets every plain .ph. */
.ph { position: relative; width: 100%; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, #E8E8EA 0%, #D4D4D8 100%); display: flex; align-items: flex-end; color: #52525B; }
.ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; opacity: .55; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' fill='none' stroke='%23ffffff' stroke-opacity='0.9' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='318' cy='34' r='16'/%3E%3Cpath d='M0 92c50-30 90-36 140-18 40 14 70 6 110-14 50-26 100-22 150 2'/%3E%3Cpath d='M0 120c60-24 110-30 170-14 50 13 90 8 130-8 40-16 70-14 100-6'/%3E%3Cpath d='M60 96v-26m-9 4c3-8 6-10 9-10s6 2 9 10m-13-14c2-6 4-8 4-8s2 2 4 8'/%3E%3Cpath d='M250 84v-30m-10 6c3-9 7-12 10-12s7 3 10 12m-16-16c3-7 6-9 6-9s3 2 6 9'/%3E%3C/svg%3E") no-repeat bottom center / cover; }
.ph__label { position: relative; z-index: 1; padding: .7rem .9rem; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.35; max-width: 100%; color: #3F3F46; }
.ph--square { aspect-ratio: 1; }
.ph--portrait { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 21 / 9; }
.ph--circle { aspect-ratio: 1; border-radius: 50%; }
.ph--circle::after { display: none; }
.ph--circle .ph__label { display: none; }
.ph--circle .icon { position: absolute; inset: 0; margin: auto; width: 45%; height: 45%; color: #71717A; }
.ph__tag { position: absolute; top: .9rem; left: .9rem; z-index: 1; }
.ph--none { margin: 0; background: #EEF2F6; border: 1px solid var(--line); display: block; }
.ph--none::after { display: none; }
.ph--none img { position: absolute; inset: 0; margin: auto; width: min(46%, 150px); height: auto; max-height: 60%; object-fit: contain; display: block; }
/* ---------- 9. Hero (home): real background-image, HTML content on top ---------- */
/* min-height (not height) so the box can never clip content — if the heading/description/CTAs/
   stats need more room, the flex layout grows the section to fit them instead of cutting them
   off. Matches the deployed build: a 760px floor, and on desktop the viewport minus the header
   so the hero fills the first screen without pushing the next section entirely out of view. */
.hero { position: relative; overflow: hidden; min-height: 760px; background: var(--black); display: flex; align-items: center; }
/* Width-driven, not viewport-height-driven like the old `calc(100vh - 120px)` was — keeps the
   hero's proportions predictable across very tall/short browser windows instead of stretching
   with viewport height. */
@media (min-width: 1200px) { .hero { min-height: clamp(620px, 54vw, 820px); } }
.hero .container { width: 100%; }
/* Panel, not full-bleed: this photo (assets/img/hero_bg.png) carries its own baked-in left-edge
   dissolve — the pixels themselves fade to this section's navy before "Foundation", the leftmost
   caption — and that bake was measured against a box exactly this size (the right ~54–60% of the
   hero, not the full width), so the box has to match or the caption lands somewhere else
   entirely relative to the text column than where it was calibrated. A full-bleed version of this
   layout exists for photos that need a live `cover` crop instead (see the 992–1279 and 1600+
   overrides below for the same reasoning applied to panel width); this one just needs the panel
   its dissolve was baked for. */
/* Sized to the photo's own aspect ratio (1404/1160) and anchored to the hero's bottom edge,
   rather than stretched top-to-bottom or centered — either of those left a navy strip somewhere
   around the photo whenever the hero's content-driven height didn't exactly match the photo's
   natural render at that panel width (the hero's own background showing through). Bottom-anchored
   means the photo is always flush with the bottom of the hero, so there's never a gap under the
   copy; any size mismatch shows up as the photo running past the hero's top edge instead (clipped
   by `overflow: hidden` on .hero), which only ever eats into the photo's blurred top padding/fade
   zone, never the bottom signature that earlier work specifically preserved. */
.hero__bg {
  position: absolute; bottom: 0; right: 0; left: 46%; z-index: 0;
  aspect-ratio: 1404 / 1160;
  opacity: 0; transform: scale(1.01); animation: hero-bg-in 1.3s var(--ease) forwards;
}
@keyframes hero-bg-in { to { opacity: 1; transform: scale(1); } }
/* Each slide is a full-bleed layer inside the panel above; its own background-image comes from
   an inline style on the HTML div (see index.html), not a CSS rule per slide, so adding a new
   photo later is a one-line markup addition. `contain`, so the whole frame — every caption —
   always survives regardless of the panel's exact size at a given width. */
.hero__bg-slide {
  position: absolute; inset: 0;
  background-size: contain; background-position: center right; background-repeat: no-repeat;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.hero__bg-slide.is-active { opacity: 1; }
/* The original photo had this fade baked into its own pixels, calibrated to this exact panel
   size — fine for one fixed, designer-edited file, but it meant any admin-uploaded replacement
   photo would show a hard edge instead of blending into the section, since a normal photo has
   no such pre-baked dissolve. This CSS gradient reproduces the same left-edge fade in a way that
   works for any photo, admin-uploaded or not. */
.hero__bg-fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, var(--black) 0%, rgba(10, 37, 64, .85) 8%, rgba(10, 37, 64, 0) 32%);
}
/* The panel is pinned to the viewport's right edge, so its left inset is what sizes the photo.
   Between 992 and 1280 the copy column and the photo want more room than the viewport has, and
   the photo's first caption ("Foundation") would land on the paragraph — so the panel gives way
   there. Above 1600 there's room for both and the photo takes the larger share. */
@media (min-width: 1200px) and (max-width: 1279.98px) { .hero__bg { left: 53%; } }
@media (min-width: 1600px) { .hero__bg { left: 40%; } }
/* Nav — only ever appears once initHeroSlider() finds a second slide to switch to. One compact
   cluster (prev, dots, next, all inline) anchored bottom-right, inside the photo itself and well
   clear of the text column, which only ever occupies the left ~60% at most. */
.hero__bg-nav {
  position: absolute; right: 4%; bottom: 5%; z-index: 3;
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .6rem; border-radius: 999px; background: rgba(10, 37, 64, .4); backdrop-filter: blur(3px);
}
.hero__bg-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, .4); cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.hero__bg-dot.is-active { background: #fff; transform: scale(1.3); }
.hero__bg-arrow {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.hero__bg-arrow:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .55); }
.hero__bg-arrow .icon { width: 15px; height: 15px; }
.hero .container { position: relative; z-index: 2; }
.hero__inner { display: grid; gap: 2.5rem; padding-top: clamp(2.5rem, 6vw, 5.5rem); padding-bottom: clamp(3.5rem, 9vw, 7rem); align-items: center; }
.hero__content { min-width: 0; }
.hero h1 {
  margin-bottom: 1rem; max-width: 640px; color: #fff;
  opacity: 0; animation: hero-fade-up .7s var(--ease) .2s forwards;
}
.hero__heading-accent { color: #4FC3B5; }
.hero__sub {
  font-weight: 500; font-size: var(--font-tagline); color: #4FC3B5; margin-bottom: 1rem;
  opacity: 0; animation: hero-fade-up .7s var(--ease) .35s forwards;
}
.hero p.lead {
  max-width: 650px; margin-bottom: 2rem; color: var(--on-dark); font-size: var(--font-lead); line-height: 1.6;
  opacity: 0; animation: hero-fade-up .7s var(--ease) .45s forwards;
}
.hero .btn-group { opacity: 0; animation: hero-fade-up .7s var(--ease) .6s forwards; }
.chip-label { display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--ink); padding: .65rem 1rem; border-radius: var(--radius-sm); font-weight: 500; font-size: .95rem; box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .3); }
.hero .btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.hero .btn--outline:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .08); }
@media (min-width: 1200px) {
  /* Container stays centred (so the hero lines up with every other section's left gutter);
     the grid track is what narrows to the dark half and sits at the container's left edge.
     62% (694px against this container) rather than half: the deployed build gives the hero
     copy a 690px column, and at 50% (560px here) the two CTAs (614px) and the four feature
     stats (624px) both overflow and wrap, which pushed the hero ~160px taller than it should
     be and, because the photo is `cover`, scaled the board up with it. */
  .hero__inner { grid-template-columns: minmax(0, 62%); justify-content: start; }
}

/* Stat row under the CTAs */
.hero__stats {
  display: flex; flex-wrap: wrap; gap: 1.75rem 2rem; list-style: none; margin: 2.25rem 0 0; padding: 0;
  opacity: 0; animation: hero-fade-up .7s var(--ease) .75s forwards;
}
.hero__stats li { display: flex; align-items: center; gap: .65rem; color: var(--on-dark); font-size: .87rem; line-height: 1.35; }
.hero__stats .icon { width: 22px; height: 22px; flex: none; color: #4FC3B5; }

@keyframes hero-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
/* Phones and tablets (incl. iPad landscape, 1024px): stacked layout. Below 1200px the side-by-side
   layout left the photo as a small box stuck in the bottom-right with empty space above it. */
@media (max-width: 1199.98px) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; padding-top: clamp(1.75rem, 5vw, 3rem); }
  /* Single column, so the photo becomes a full-width strip above the copy. Its height follows the
     photo's own aspect ratio (so on phones the whole frame fills the width instead of shrinking
     into a corner), capped on tablets. Still `contain` and right-anchored — the photo's baked
     left-edge dissolve blends into the navy, and every caption survives. */
  .hero__bg {
    position: relative; inset: auto;
    width: 100%; height: min(calc(100vw * 1160 / 1404), 440px); aspect-ratio: auto;
  }
  .hero__bg-slide { background-position: right bottom; }
  /* Four stats don't fit on one line in a single narrowish column — a tidy 2×2 grid instead */
  .hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 1.25rem 2.5rem; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .hero__stats { grid-template-columns: repeat(4, max-content); gap: 1.25rem 2rem; }
}
/* Phones: the photo covers the whole hero, behind the copy. A navy scrim keeps the top of the
   photo (hand + king) visible and deepens behind the text so it stays readable; the copy starts
   a little lower to leave that top band clear. */
@media (max-width: 767.98px) {
  .hero__bg { position: absolute; inset: 0; width: auto; height: auto; }
  .hero__bg-slide { background-size: cover; background-position: 88% top; }
  .hero__bg::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg,
      rgba(10, 37, 64, .1) 0%, rgba(10, 37, 64, .4) 12%,
      rgba(10, 37, 64, .82) 26%, rgba(10, 37, 64, .9) 100%);
  }
  .hero__inner { padding-top: clamp(7rem, 30vw, 9.5rem); }
}
@media (max-width: 575.98px) {
  .hero .btn-group { flex-direction: column; }
  .hero .btn-group .btn { width: 100%; justify-content: center; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; margin-top: 1.75rem; }
}
/* Stats row (pill label + big number + note) */
.stats { display: grid; gap: 2rem; padding: clamp(2rem, 4vw, 3rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat__pill { display: inline-block; background: var(--surface); color: var(--primary); font-size: .85rem; font-weight: 500; padding: .3rem .7rem; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.stat__row { display: flex; align-items: flex-start; gap: 1rem; }
.stat__value { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; color: var(--black); line-height: 1; white-space: nowrap; }
.stat__label { color: var(--muted); font-size: .95rem; line-height: 1.5; max-width: 240px; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.section--navy .stats { border-color: rgba(255, 255, 255, .12); }
.section--navy .stat__pill { background: rgba(255, 255, 255, .1); color: #fff; }
.section--navy .stat__value { color: #fff; }
.section--navy .stat__label { color: var(--on-dark); }

/* ---------- 10. Cards ---------- */
.card-x { position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s var(--ease); }
.card-x:hover { border-color: #A1A1AA; }
.card-x::before { content: none; }
.card-x__icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--primary); margin-bottom: 1.1rem; flex: none; }
.card-x__icon .icon { width: 22px; height: 22px; }
.card-x h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.card-x p { color: var(--muted); font-size: .95rem; flex: 1; }
.card-x .text-link { margin-top: .75rem; }

/* Photo card with floating label chip (sectors) */
/* Sectors We Support: alternating zigzag flow — organic gradient "blob" icons, colour-coded
   titles and a colour fade divider. No filled containers/cards/borders around each item, so it
   reads as a flowing list, not a box/tile grid, and not a clone of the Services row-list below. */
/* Light section: a wash of the logo teal at low alpha over white, with the geometric artwork
   faint on top of it. The negative z-index puts the image above this background but behind the
   copy, which is why .container below is lifted back to z-index 1. */
.sectors {
  position: relative; overflow: hidden; isolation: isolate;
  /* Flat wash at 12% — a single tone rather than the earlier 3-stop gradient, alpha shows
     the white page through it so it reads as "white, tinted teal" rather than a filled panel. */
  background-color: rgba(26, 145, 141, .12);
}
/* Full-bleed background image, scaled to cover the section. */
.sectors::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16;
  background-image: url("../img/sectors-bg-full.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.sectors .container { position: relative; z-index: 1; }
.sectors .section-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
/* Section head on the pale teal ground — the standard light-section treatment. */
.sectors .section-head h2 { color: var(--black); }
.sectors .section-head p { color: var(--text); }
/* Matched through .section-head so it outranks the `.sectors .section-head p` rule above — the
   eyebrow is itself a <p> in that block, so the plain `.sectors .eyebrow` loses to it.
   Deeper than --brand-2-ink: that token is calibrated against --surface, but the teal wash here
   lands the ground at ~#DDF1EF, where it only reaches 4.20:1. This clears 4.5:1 for small copy. */
.sectors .section-head .eyebrow { color: #0F6B5F; }
.sector-flow { list-style: none; padding: 0; margin: 0; max-width: 980px; margin-inline: auto; }
/* Two accents per row, not one: --accent tints the things drawn AS colour on the section ground
   (title, arrow, divider), so on this pale teal it has to be a deep shade; --blob fills the icon
   badge, which carries a white glyph and therefore stays saturated either way. Sharing one
   variable made the titles wash out or the badges go muddy, depending which way it was set. */
.sector-flow > li:nth-child(1) { --accent: var(--primary);      --blob: var(--primary);   --blob-2: var(--primary-2); }
.sector-flow > li:nth-child(2) { --accent: var(--brand-2-ink);  --blob: var(--brand-2);   --blob-2: #0F6B5F; }
.sector-flow > li:nth-child(3) { --accent: #2C5F96;             --blob: #2C5F96;          --blob-2: #1B4372; }
.sector-flow > li:nth-child(4) { --accent: var(--primary-2);    --blob: var(--primary-2); --blob-2: var(--primary); }
.sector-flow > li:nth-child(5) { --accent: #0F6B5F;             --blob: #0F6B5F;          --blob-2: var(--brand-2); }
.sector-flow > li:nth-child(6) { --accent: var(--primary);      --blob: var(--primary);   --blob-2: var(--brand-2); }

.sector-line__row {
  position: relative; display: flex; align-items: center; gap: 1.75rem; padding: 1.4rem 0; color: inherit;
}
.sector-line__row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 78%);
}
.sector-flow > li:last-child .sector-line__row::after { display: none; }
.sector-flow > li.sector-line--rev .sector-line__row::after { background: linear-gradient(270deg, var(--accent) 0%, transparent 78%); }

.sector-line__blob {
  order: 1; flex: none; width: 84px; height: 84px; position: relative; display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--blob), var(--blob-2));
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  box-shadow: 0 20px 36px -18px rgba(0, 0, 0, .45);
  transition: border-radius .6s var(--ease), transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .5s var(--ease);
}
/* Inner ring — turns the flat icon into a two-layer badge instead of a single flat glyph. */
.sector-line__blob::before {
  content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: inherit; pointer-events: none;
}
.sector-line__blob .icon { position: relative; z-index: 1; width: 34px; height: 34px; }
.sector-line__row:hover .sector-line__blob, .sector-line__row:focus-visible .sector-line__blob {
  border-radius: 58% 42% 35% 65% / 55% 60% 40% 45%; transform: scale(1.06); box-shadow: 0 26px 44px -16px rgba(0, 0, 0, .55);
}

.sector-line__body { order: 2; flex: 1 1 auto; min-width: 0; }
.sector-line--rev .sector-line__body { text-align: right; }
.sector-line__title { display: block; font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 .4rem; color: var(--accent); transition: opacity .3s; }
.sector-line__row:hover .sector-line__title { opacity: .82; }
.sector-line__desc { display: block; margin: 0; color: var(--text); font-size: .95rem; max-width: 480px; }
.sector-line--rev .sector-line__desc { margin-left: auto; }

.sector-line__arrow { order: 3; flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.sector-line__arrow .icon { width: 22px; height: 22px; transition: transform .4s var(--ease); }
.sector-line__row:hover .sector-line__arrow .icon { transform: translateX(5px); }

.sector-line--rev .sector-line__blob { order: 3; }
.sector-line--rev .sector-line__arrow { order: 1; }

@media (max-width: 767.98px) {
  .sector-line__row { gap: 1.1rem; padding: 1.6rem 0; }
  .sector-line__blob { width: 64px; height: 64px; }
  .sector-line__blob .icon { width: 26px; height: 26px; }
  .sector-line--rev .sector-line__blob { order: 1; }
  .sector-line--rev .sector-line__arrow { order: 3; }
  .sector-line--rev .sector-line__body { text-align: left; }
  .sector-line--rev .sector-line__desc { margin-left: 0; }
  .sector-line--rev .sector-line__row::after { background: linear-gradient(90deg, var(--accent) 0%, transparent 78%); }
}

/* Row list (services): tag, title, description, arrow — smooth hover */
.row-list { border-top: 1px solid var(--line); }
/* Editorial listing pages (Opportunities / Services overview) */
.listing__list { max-width: 860px; margin: 0 auto; }
.row-item {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: .75rem 1.5rem; align-items: center; padding: 1.6rem 1rem;
  margin: 0 -1rem; border-bottom: 1px solid var(--line); border-radius: var(--radius); color: inherit; isolation: isolate;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.row-item::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius); background: var(--surface);
  opacity: 0; transform: scaleX(.96); transform-origin: left center; transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1);
}
.row-item:hover { transform: translateX(6px); }
.row-item:hover::before { opacity: 1; transform: scaleX(1); }
.row-item > div { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.row-item:hover > div { transform: translateX(4px); }
.row-item__title { color: var(--black); margin: .35rem 0 .25rem; transition: color .3s; }
.row-item:hover .row-item__title { color: var(--primary); }
.row-item p { margin: 0; color: var(--muted); font-size: .95rem; max-width: 640px; }
.row-item__icon {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--black);
  transition: background .35s cubic-bezier(.22, .61, .36, 1), color .35s, border-color .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s;
}
.row-item__icon .icon { width: 18px; height: 18px; transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.row-item:hover .row-item__icon { background: var(--primary); color: #fff; border-color: var(--primary); transform: scale(1.08) rotate(-45deg); box-shadow: 0 10px 22px -10px rgba(7, 87, 154, .6); }
.row-item__num {
  flex: none; font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 600; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  white-space: nowrap; color: #B9CAD9; transition: color .4s var(--ease), transform .45s cubic-bezier(.22, .61, .36, 1);
}
.row-item:hover .row-item__num { color: var(--primary); transform: translateY(-2px); }
@media (max-width: 575.98px) { .row-item { margin: 0; padding: 1.4rem .75rem; gap: .5rem 1rem; } .row-item:hover { transform: none; } .row-item__num { font-size: 1.6rem; } }

/* Generic continuous marquee: overflow-hidden viewport + a flex track holding the real items
   followed by an identical, aria-hidden duplicate set. Animating the track from 0 to -50% always
   lands exactly on the duplicate's first item — regardless of item count, width or gap — so the
   loop point is seamless. transform-only, so it stays smooth/GPU-friendly. */
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee-scroll var(--slider-speed) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Home "Services We Offer": a continuous marquee instead of a stacked plain-text list — the list
   read as a wall of white space; colour-blocked tiles drifting past read as interactive instead.
   Accent colours cycle the same palette as the Sectors flow above it. */
.services-sec { background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); }
.service-marquee { padding: .25rem .25rem 1rem; margin: -.25rem; }
.service-marquee .marquee__track { --slider-speed: 34s; gap: 1.5rem; align-items: stretch; }
.service-tile:nth-child(7n+1) { --accent: var(--primary); --accent-2: var(--primary-2); }
.service-tile:nth-child(7n+2) { --accent: var(--brand-2); --accent-2: #0F6B5F; }
.service-tile:nth-child(7n+3) { --accent: var(--black-2); --accent-2: var(--black); }
.service-tile:nth-child(7n+4) { --accent: var(--primary-2); --accent-2: var(--primary); }
.service-tile:nth-child(7n+5) { --accent: #0F6B5F; --accent-2: var(--brand-2); }
.service-tile:nth-child(7n+6) { --accent: var(--primary); --accent-2: var(--brand-2); }
.service-tile:nth-child(7n+7) { --accent: var(--brand-2); --accent-2: var(--primary); }
.service-tile {
  position: relative; display: flex; flex-direction: column; flex: none; width: min(320px, 78vw); height: auto; min-height: 260px; color: inherit;
  padding: 2rem 1.75rem 1.75rem; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg); box-shadow: 0 12px 26px -22px rgba(10, 37, 64, .18);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.service-tile:hover { transform: translateY(-6px); box-shadow: 0 20px 36px -22px rgba(10, 37, 64, .22); }
.service-tile__icon {
  width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; margin-bottom: 1.25rem; flex: none;
  box-shadow: 0 16px 28px -16px var(--accent);
}
.service-tile__icon .icon { width: 26px; height: 26px; }
.service-tile__num {
  position: absolute; top: 1.75rem; right: 1.75rem; font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  color: var(--line); font-variant-numeric: tabular-nums;
}
.service-tile__title { color: var(--ink); margin: 0 0 .5rem; }
.service-tile p { color: var(--muted); font-size: .92rem; margin: 0 0 1.5rem; flex: 1; }
.service-tile__arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none;
  border-radius: 50%; border: 1px solid var(--line); color: var(--accent);
  transition: background .25s, color .25s, transform .3s, border-color .25s;
}
.service-tile__arrow .icon { width: 18px; height: 18px; }
.service-tile:hover .service-tile__arrow { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateX(4px); }
@media (max-width: 575.98px) {
  .service-marquee .marquee__track { --slider-speed: 22s; gap: 1rem; }
  .service-tile { width: min(280px, 78vw); padding: 1.6rem 1.4rem 1.4rem; min-height: 220px; }
  .service-tile__num { top: 1.4rem; right: 1.4rem; }
}
/* Manual prev/next controls for the services marquee — same round-arrow treatment as the events
   carousel. Clicking either one hands the track over to JS (see initServiceMarqueeNav), which
   stops the automatic scroll and pages it by one tile per click instead. */
/* Parked in the section's bottom-right corner: it's the last block in the column, and the column's
   right edge is the container's, so flex-end lands the pair flush with the section's content edge. */
.service-marquee__nav { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; margin-top: 1rem; }
.service-marquee__arrow {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--black);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease);
}
.service-marquee__arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); }
.service-marquee__arrow .icon { width: 18px; height: 18px; }
.service-marquee.is-manual { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.service-marquee.is-manual::-webkit-scrollbar { display: none; }
.service-marquee.is-manual .marquee__track { animation: none; transform: none; }

/* Homepage "layered testimonial deck" — scoped entirely to .stories--deck so the shared
   .stories / .story-card rules above (also used by success-stories.html's own carousel and grid)
   stay untouched. Three fixed slots (prev / active / next); JS re-renders each slot's content from
   the STORIES data array on navigate, so the DOM never has to be physically reshuffled. The card
   itself (position, size, gradient, colours, shapes, arrows) never moves or resizes — only the
   inner .story-deck__content fades/slides/scales when the story changes. */
.stories--deck .stories__watermark { display: none; }
.stories--deck .section-head h2 { line-height: 1.15; }

.story-deck { position: relative; max-width: 1000px; margin: 0 auto; padding: 1.5rem 0 .5rem; }

.story-deck__shape { position: absolute; border-radius: 50%; border: 1px solid rgba(26, 154, 140, .28); pointer-events: none; z-index: 0; }
.story-deck__shape--a { width: 90px; height: 90px; top: -10px; left: 2%; }
.story-deck__shape--b { width: 46px; height: 46px; bottom: 6%; right: 4%; border-color: rgba(7, 87, 154, .25); }
.story-deck__curve { position: absolute; top: 8%; right: -2%; width: 220px; height: 110px; opacity: .35; pointer-events: none; z-index: 0; }

.story-deck__track { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.7fr 1fr; align-items: stretch; }

.story-deck__card {
  position: relative; border-radius: var(--radius-lg); padding: 2.25rem 2rem 2rem;
  display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden;
  transition: transform .6s var(--ease), opacity .55s var(--ease), filter .55s var(--ease), box-shadow .55s var(--ease);
}
.story-deck__card--prev, .story-deck__card--next {
  background: rgba(255, 255, 255, .7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  transform: scale(.8); opacity: .55; filter: blur(1.5px); box-shadow: 0 20px 36px -28px rgba(10, 37, 64, .25);
  z-index: 1; max-height: 340px;
}
.story-deck__card--prev { margin-right: -2.75rem; }
.story-deck__card--next { margin-left: -2.75rem; }
.story-deck__card--prev:hover, .story-deck__card--next:hover { opacity: .8; filter: blur(.5px); transform: scale(.84) translateY(-3px); }
.story-deck__card--prev .story-deck__cta, .story-deck__card--next .story-deck__cta { display: none; }

.story-deck__card--active {
  background: linear-gradient(150deg, var(--black) 0%, var(--primary) 55%, var(--brand-2) 100%);
  color: #fff; z-index: 2; box-shadow: 0 42px 70px -28px rgba(10, 37, 64, .5); padding: 3rem 2.75rem 2.75rem;
}

/* Content swap: fades/slides/scales in place, independent of the card's own position, size,
   background and shadow (all of which stay exactly as they are, untouched, during a transition). */
.story-deck__content { width: 100%; display: flex; flex-direction: column; align-items: center; transition: opacity .32s var(--ease), transform .32s var(--ease); }
.story-deck__track.is-swapping .story-deck__content { opacity: 0; transform: translateY(-10px) scale(.97); }

.story-deck__quote-mark {
  position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem; line-height: 1; font-weight: 700; color: #fff; opacity: .14; pointer-events: none;
}
.story-deck__card--prev .story-deck__quote-mark, .story-deck__card--next .story-deck__quote-mark { color: var(--brand-2); opacity: .18; }

.story-deck__avatar {
  position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
  background: rgba(255, 255, 255, .16); color: #fff; border: 2px solid rgba(255, 255, 255, .5);
}
.story-deck__card--prev .story-deck__avatar, .story-deck__card--next .story-deck__avatar {
  background: var(--surface); color: var(--muted); border-color: var(--line); width: 52px; height: 52px;
}
.story-deck__avatar .icon { width: 26px; height: 26px; }
.story-deck__card--prev .story-deck__avatar .icon, .story-deck__card--next .story-deck__avatar .icon { width: 22px; height: 22px; }

.story-deck__card h3 { position: relative; z-index: 1; margin: 0 0 .2rem; color: inherit; }
.story-deck__role { position: relative; z-index: 1; margin: 0 0 1.1rem; font-size: .85rem; color: rgba(255, 255, 255, .78); }
.story-deck__card--prev .story-deck__role, .story-deck__card--next .story-deck__role { color: var(--muted); }
.story-deck__card blockquote { position: relative; z-index: 1; margin: 0 0 1.25rem; font-size: 1.02rem; line-height: 1.65; color: inherit; }
.story-deck__card--prev blockquote, .story-deck__card--next blockquote { font-size: .92rem; -webkit-line-clamp: 4; line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.story-deck__card--active blockquote { max-width: 480px; }

.story-deck__tag { position: relative; z-index: 1; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); color: #fff; margin-bottom: 1.4rem; }
.story-deck__card--prev .story-deck__tag, .story-deck__card--next .story-deck__tag { background: #fff; }
.story-deck__cta { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .92rem; color: #fff; }
.story-deck__cta .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.story-deck__cta:hover .icon { transform: translateX(3px); }

.story-deck__prev-btn, .story-deck__next-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--black); display: inline-flex; align-items: center; justify-content: center;
  transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease);
}
.story-deck__prev-btn { left: -6px; }
.story-deck__next-btn { right: -6px; }
.story-deck__prev-btn:hover, .story-deck__next-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.story-deck__prev-btn .icon, .story-deck__next-btn .icon { width: 18px; height: 18px; }

/* Entrance: driven by the generic [data-reveal] system (.story-deck carries that attribute) */
@media (max-width: 991.98px) {
  .story-deck__track { grid-template-columns: .55fr 2fr .55fr; }
  .story-deck__card--prev, .story-deck__card--next { padding: 1.6rem 1rem; max-height: 300px; }
  .story-deck__card--prev blockquote, .story-deck__card--next blockquote,
  .story-deck__card--prev .story-deck__role, .story-deck__card--next .story-deck__role,
  .story-deck__card--prev .story-deck__tag, .story-deck__card--next .story-deck__tag,
  .story-deck__card--prev h3, .story-deck__card--next h3 { display: none; }
  .story-deck__card--active { padding: 2.5rem 1.75rem 2.25rem; }
  .story-deck__prev-btn { left: -4px; }
  .story-deck__next-btn { right: -4px; }
}
@media (max-width: 767.98px) {
  .story-deck__track { display: block; position: relative; min-height: 420px; }
  .story-deck__card { position: absolute; inset: 0; width: 100%; }
  .story-deck__card--prev, .story-deck__card--next {
    z-index: 0; opacity: .35; transform: scale(.86) translateX(0); max-height: none; margin: 0;
    pointer-events: none;
  }
  .story-deck__card--prev { transform: scale(.9) translateX(-14px); }
  .story-deck__card--next { transform: scale(.9) translateX(14px); }
  .story-deck__card--active { position: relative; padding: 2.75rem 1.6rem 2.25rem; }
  /* Arrows drop below the deck here, so the deck reserves the room for them itself. */
  .story-deck { padding-bottom: 4.5rem; }
  .story-deck__prev-btn, .story-deck__next-btn { top: auto; bottom: .75rem; transform: none; }
  /* Centred pair with a fixed gap — a % offset made them collide on narrow phones */
  .story-deck__prev-btn { left: calc(50% - 46px - 6px); }
  .story-deck__next-btn { right: calc(50% - 46px - 6px); }
}

/* ---------- Listing pages (Opportunities / Services): timeline, icon, content, arrow, image ----------
   Scoped to .row-list--glyph so the homepage's own row-list (Services section) is untouched.
   Clean white background, no decorative texture — the centred numbered timeline is the whole
   visual, deliberately unadorned. */
.listing { position: relative; }
/* Listing pages — faint full-section photo backgrounds (blueprint grid on Opportunities, soft gradient on Services) */
.listing--bg-grid, .listing--bg-gradient { isolation: isolate; overflow: hidden; }
.listing--bg-grid::before, .listing--bg-gradient::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: center / cover no-repeat; }
.listing--bg-grid::before { background-image: url("../img/bg-opportunities-grid.jpg"); opacity: .13; }
.listing--bg-gradient::before { background-image: url("../img/bg-services-gradient.jpg"); opacity: .14; }
.listing-accent { color: var(--brand-2); }

.listing__list { position: relative; }
/* Vertical timeline: a brand-toned gradient line threading through a small node per row, drawn
   downward as the list scrolls into view — deliberately not the dotted line the Journey roadmap
   uses on the homepage. */
.listing__list::after {
  content: ""; position: absolute; left: 2.3rem; top: 2.6rem; bottom: 2.6rem; width: 2px;
  background: linear-gradient(180deg, var(--brand-2) 0%, var(--primary-2) 50%, var(--brand-2) 100%);
  opacity: .6; transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--ease);
}
.listing__list.is-visible::after { transform: scaleY(1); }

.listing__list > li { position: relative; }
.listing__list > li::before {
  content: ""; position: absolute; left: 2.3rem; top: 50%; z-index: 2; width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary-2); box-shadow: 0 0 0 4px #fff; transform: translate(-50%, -50%) scale(0);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .3s var(--ease);
}
li[data-reveal].is-visible::before { transform: translate(-50%, -50%) scale(1); }
.listing__list > li.is-active::before { background: var(--brand-2); transform: translate(-50%, -50%) scale(1.35); }

/* Per-row accent colour, cycled — reused for the icon, number and timeline node so the whole
   list reads as colourful without any single flat brand wash. */
.listing__list > li:nth-child(3n+1) { --accent: var(--primary); --accent-2: var(--primary-2); }
.listing__list > li:nth-child(3n+2) { --accent: var(--brand-2); --accent-2: #0F6B5F; }
.listing__list > li:nth-child(3n) { --accent: var(--black-2); --accent-2: var(--black); }

.row-list--glyph .row-item { grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: .75rem 1.5rem; padding: 1.25rem 1rem; }

/* Entrepreneurship Opportunities: icon only, no left-hand number/timeline */
.row-list--icon-only .row-item { grid-template-columns: auto 1fr auto auto; }
.listing__list.row-list--icon-only::after { display: none; }
.listing__list.row-list--icon-only > li::before { display: none; }
.row-list--glyph .row-item:hover .row-item__num,
.listing__list > li.is-active .row-item__num { color: var(--accent, var(--primary)); }

/* Icon: its own circular container, independent of the image panel */
.row-item__glyph {
  width: 68px; height: 68px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(26, 154, 140, .08); border: 1.5px solid rgba(26, 154, 140, .3); color: var(--accent, var(--brand-2));
  opacity: 0; transform: scale(.85);
  transition: opacity .55s var(--ease), transform .55s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.row-item__glyph .icon { width: 26px; height: 26px; transition: transform .3s ease-out; }
li[data-reveal].is-visible .row-item__glyph { opacity: 1; transform: scale(1); }
.row-item:hover .row-item__glyph, .listing__list > li.is-active .row-item__glyph {
  background: var(--accent, var(--brand-2)); border-color: var(--accent, var(--brand-2)); color: #fff;
  transform: scale(1.06); box-shadow: 0 14px 28px -12px rgba(10, 37, 64, .45), 0 0 0 6px rgba(26, 154, 140, .08);
  transition: transform .3s ease-out, background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.row-item:hover .row-item__glyph .icon, .listing__list > li.is-active .row-item__glyph .icon { transform: translateY(-2px); }

/* "Learn more" link (Entrepreneurship Opportunities): text + arrow, no filled button */
.row-item__more { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; }
.row-item__more-text {
  font-size: .95rem; font-weight: 600; color: var(--black); opacity: 0;
  transition: transform .3s var(--ease), color .3s var(--ease), opacity .5s var(--ease) 100ms;
}
li[data-reveal].is-visible .row-item__more-text { opacity: 1; }
.row-item:hover .row-item__more-text { transform: translateX(4px); color: var(--primary); }
/* Very narrow phones (≤360px): the icon + title + "more" arrow no longer fit side by side with
   the desktop gaps and the arrow ran past the right edge — tighten the gaps and arrow circle. */
@media (max-width: 360px) {
  .row-list--glyph .row-item { gap: .5rem .75rem; padding-left: .5rem; padding-right: .5rem; }
  .row-list--glyph .row-item .row-item__icon { width: 42px; height: 42px; }
}

/* Arrow circle — used bare on Services, and inside .row-item__more on Opportunities. Scoped to
   .row-list--glyph so the homepage's own plain row-list (Services section) keeps its own arrow. */
.row-list--glyph .row-item__icon {
  width: 52px; height: 52px; border: 1.5px solid rgba(7, 87, 154, .25); background: #fff; color: var(--black);
  opacity: 0; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), opacity .5s var(--ease) 100ms;
}
.row-list--glyph li[data-reveal].is-visible .row-item__icon { opacity: 1; }
.row-list--glyph .row-item__icon .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.row-list--glyph .row-item:hover .row-item__icon { background: var(--brand-2); color: #fff; border-color: var(--brand-2); transform: translateX(2px); box-shadow: 0 10px 22px -10px rgba(26, 154, 140, .6); }
.row-list--glyph .row-item:hover .row-item__icon .icon { transform: translateX(4px); }

/* Content: title + description fade/slide in together, independent of the icon and image —
   entrance starts ~60ms after the icon for a subtle left-to-right cascade within each row */
.row-list--glyph .row-item > div {
  opacity: 0; transform: translateX(15px);
  transition: opacity .55s var(--ease) 60ms, transform .45s cubic-bezier(.22, .61, .36, 1) 60ms;
}
.row-list--glyph li[data-reveal].is-visible .row-item > div { opacity: 1; transform: translateX(0); }
.row-list--glyph .row-item:hover > div { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }

/* Image panel: a CSS mask (elliptical, so the fade boundary is genuinely curved, not a straight
   diagonal) dissolves the left edge into the white row — right/outer corners stay rounded, left
   edge has no hard border at all. Deliberately not a photo card. */
.row-item__image {
  width: 300px; height: 110px; flex: none; position: relative; overflow: hidden;
  border-radius: 0 20px 20px 0;
  -webkit-mask-image: radial-gradient(ellipse 78% 100% at 72% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 100% at 72% 50%, #000 55%, transparent 100%);
  opacity: 0; transform: translateX(20px) scale(.98);
  transition: opacity .55s var(--ease) 100ms, transform .55s var(--ease) 100ms;
}
li[data-reveal].is-visible .row-item__image { opacity: 1; transform: translateX(0) scale(1); }
.row-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease-out; }
.row-item:hover .row-item__image img { transform: scale(1.02); }

@media (max-width: 1199.98px) { .row-item__image { width: 210px; height: 96px; } }
@media (max-width: 991.98px) {
  .row-list--glyph .row-item { grid-template-columns: auto auto 1fr auto; }
  .row-list--icon-only .row-item { grid-template-columns: auto 1fr auto; }
  .row-item__image {
    grid-column: 1 / -1; width: 100%; height: 140px; margin-top: .5rem;
    border-radius: 20px; -webkit-mask-image: none; mask-image: none;
  }
}
@media (max-width: 575.98px) {
  .row-item__glyph { width: 52px; height: 52px; }
  .row-item__glyph .icon { width: 20px; height: 20px; }
  .row-item__image { height: 160px; }
  .row-item__more-text { display: none; }
  .listing__list::after, .listing__list > li::before { left: 1.55rem; }
}
/* Phones: icon + arrow share the top line so the title and description get the full row width. */
@media (max-width: 575.98px) {
  .row-list--icon-only .row-item { grid-template-columns: auto 1fr; gap: .9rem 1rem; }
  .row-list--icon-only .row-item__glyph { grid-column: 1; grid-row: 1; }
  .row-list--icon-only :is(.row-item__icon, .row-item__more) { grid-column: 2; grid-row: 1; justify-self: end; }
  .row-list--icon-only .row-item > div { grid-column: 1 / -1; grid-row: 2; }
  .row-list--icon-only .row-item__image { grid-row: 3; margin-top: .25rem; }
}

.tag { display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: var(--radius-sm); font-size: .78rem; font-weight: 500; background: #fff; color: var(--text); border: 1px solid var(--line); }
.tag--teal { color: var(--brand-2-ink); border-color: rgba(26, 154, 140, .35); }
.tag--navy { background: var(--black); color: #fff; border-color: var(--black); }
.tag--white { background: #fff; color: var(--ink); }

/* Grey CTA strip */
/* Closing CTA under the stories section. Deliberately a dark brand band rather than another pale
   panel: it's the last thing in the section, so it should read as a decisive action, not as more
   content. Same navy/teal language as .cta-band. */
/* Full-bleed: the band is its own <section>, so the colour runs edge to edge and only the
   content is held in the container. Vertical padding comes from .section--tight. */
.strip-cta {
  overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--black) 0%, #0D3358 52%, var(--primary) 100%);
}
.strip-cta__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; }
/* Teal bloom off the right edge, picking up the logo accent */
.strip-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 120% at 88% 50%, rgba(26, 154, 140, .34) 0%, rgba(26, 154, 140, 0) 70%);
}
/* Faint arc clipped by the band's top edge — scaled up now that the band runs full width. */
.strip-cta::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 280px; height: 280px; border-radius: 50%; top: -128px; right: 7%;
  border: 1px solid rgba(255, 255, 255, .1);
}
.strip-cta__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%; color: #4FC3B5;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22);
}
.strip-cta__icon .icon { width: 24px; height: 24px; }
.strip-cta__copy { flex: 1 1 300px; min-width: 0; }
.strip-cta__lead { margin: 0; color: #fff; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; font-size: clamp(1.15rem, 2vw, 1.4rem); }
.strip-cta__sub { margin: .4rem 0 0; color: var(--on-dark); font-size: var(--font-small); }
.strip-cta__tel { color: #4FC3B5; font-weight: 600; white-space: nowrap; }
.strip-cta__tel:hover { color: #fff; }
.strip-cta .btn-group { flex: none; }
.strip-cta .btn--white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); }
.strip-cta .btn--white:hover { background: #fff; color: var(--black); border-color: #fff; }
/* Tablets and phones: stacked and centred */
@media (max-width: 991.98px) {
  .strip-cta__inner { flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
  .strip-cta::after { display: none; }
  /* In a column the desktop flex-basis (300px) turns into a height, leaving an empty gap under
     the copy — let the copy size to its text and span the full width instead. */
  .strip-cta__copy { flex: none; width: 100%; }
  .strip-cta .btn-group { justify-content: center; }
}
@media (max-width: 767.98px) {
  .strip-cta__icon { width: 48px; height: 48px; }
  .strip-cta .btn-group { width: 100%; flex-direction: column; gap: .65rem; }
  .strip-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- 11. Journey roadmap (reference: bizacharya-omega) ---------- */
.journey { position: relative; overflow: hidden; isolation: isolate; background: #fff; }
.journey .section-head p { max-width: 720px; }
.journey .container { position: relative; z-index: 1; }
.roadmap__cta { text-align: center; margin-top: clamp(2rem, 4vw, 3.5rem); }
.roadmap__cta .btn { box-shadow: 0 10px 24px -12px rgba(1, 82, 147, .6); }

/* Bizacharya mark (logo without the wordmark) as a faint, curated watermark — decorative only.
   Opt-in per section via data-watermark="<placement>" (see initSectionWatermarks() in main.js),
   so it only sits in open white space, never behind forms, photo rows or dense copy.
   The layer fills the section and clips the mark, so it can bleed off an edge and drift with
   parallax without the section needing overflow:hidden. Upright by default; the Journey corner
   mark is rotated (via `rotate`, which composes with the parallax transform).
   --wm-y is the placement's own vertical anchor; --wm-shift is the parallax offset from JS.
   aspect-ratio matches the source file (225×241) so there is no layout jump on load. */
.section-watermark {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; user-select: none;
}
.section-watermark__img {
  position: absolute; height: auto; aspect-ratio: 225 / 241; opacity: .05;
  transform: translate3d(0, calc(var(--wm-y, 0%) + var(--wm-shift, 0px)), 0);
  transition: transform .15s linear;
}
/* Large, cropped into the top-right corner — for sections with a centred heading */
.section-watermark--corner-tr .section-watermark__img {
    top: -19%;
    right: -13%;
    width: clamp(240px, 28vw, 460px);
    rotate: 314deg;
}
/* Medium, rotated, cropped into the top-left corner (What we offer) */
.section-watermark--corner-tl .section-watermark__img {
    top: -9%;
    left: -6%;
    width: clamp(150px, 28vw, 340px);
    rotate: 133deg;
}
/* Large, bleeding off the left edge — fills the empty side of a centred timeline / list */
.section-watermark--side-l .section-watermark__img { top: 50%; left: -9%; --wm-y: -50%; width: clamp(260px, 30vw, 480px); opacity: .045; }
/* Medium, bleeding off the right edge — beside a narrow centred column */
.section-watermark--side-r .section-watermark__img { top: 50%; right: -3%; --wm-y: -50%; width: clamp(200px, 19vw, 320px); }

/* Phones: content runs full width, so side / bottom marks would sit behind text — keep only the
   corner marks, smaller and further cropped, and leave the rest out. */
@media (max-width: 767.98px) {
  .section-watermark--corner-tl, .section-watermark--side-r { display: none; }
  .section-watermark--corner-tr .section-watermark__img { top: -3%; right: -18%; width: 190px; opacity: .04; }
  .section-watermark--side-l .section-watermark__img { top: -2%; left: auto; right: -18%; --wm-y: 0%; width: 190px; opacity: .04; }
}
@media (prefers-reduced-motion: reduce) {
  .section-watermark__img { transition: none; }
}

/* ---------- Journey map (individual circular milestones, real photos) ---------- */
.journey-map { position: relative; }

.journey-map__list {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 2.4rem;
}

.journey-stage { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 1.25rem; }

/* connecting line: subtle static track + brand-blue dotted progress, advanced step by step via --progress (0-1) */
.journey-map__list::before, .journey-map__list::after {
  content: ""; position: absolute; left: 34px; top: 34px; bottom: 34px; width: 0; z-index: 0;
  border-left: 2px dotted var(--line);
}
/* Revealed with clip-path rather than scaleY: scaling a dotted border stretches the dots as it
   grows, which reads as a wobble. Clipping slides a clean edge along an undistorted line.
   The duration matches one full stage cycle in main.js, so the line travels continuously from
   node to node instead of jumping and waiting — hence linear, not eased. */
.journey-map__list::after {
  border-left-color: var(--primary);
  clip-path: inset(0 0 calc((1 - var(--progress, 0)) * 100%) 0);
  transition: clip-path 1.1s linear;
}
.journey-map__list.no-anim::after { transition: none; }

.journey-stage__photo {
  position: relative; z-index: 1; flex: none; width: 68px; height: 68px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(155deg, var(--black) 0%, var(--primary) 100%);
  border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 22px -14px rgba(10, 37, 64, .3);
  opacity: 0; transform: scale(.88);
  transition: opacity .38s var(--ease), transform .38s var(--ease), box-shadow .35s var(--ease);
}
.journey-stage.is-in .journey-stage__photo { opacity: 1; transform: scale(1); }
.journey-stage[data-tone="b"] .journey-stage__photo { background: linear-gradient(155deg, var(--primary) 0%, var(--brand-2) 100%); }
/* Image sits ready just under the number, and gently settles into place once revealed. */
.journey-stage__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform .8s var(--ease); }
.journey-stage.show-image .journey-stage__photo img { transform: scale(1); }
/* Very subtle brand-navy scrim so mixed stock-photo tones read as one consistent, on-brand set. */
.journey-stage__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(155deg, rgba(10, 37, 64, .3) 0%, rgba(10, 37, 64, 0) 60%);
}
/* Number treatment: fills the circle first, then dissolves to reveal the image beneath it */
.journey-stage__num {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--black) 0%, var(--primary) 100%);
  color: #fff; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em;
  opacity: 0; transform: scale(.86);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.journey-stage[data-tone="b"] .journey-stage__num { background: linear-gradient(155deg, var(--primary) 0%, var(--brand-2) 100%); }
.journey-stage.is-in .journey-stage__num { opacity: 1; transform: scale(1); }
.journey-stage.show-image .journey-stage__num { opacity: 0; transform: scale(1.12); transition: opacity .34s var(--ease), transform .34s var(--ease); }
/* Currently-animating step: same subtle ring used on manual hover, so it reads as "connected" to the line */
.journey-stage.is-current .journey-stage__photo, .journey-stage__photo:hover {
  box-shadow: 0 0 0 1px var(--line), 0 0 0 5px rgba(7, 87, 154, .16), 0 14px 28px -14px rgba(10, 37, 64, .38);
}
.journey-stage.show-image .journey-stage__photo:hover img { transform: scale(1.06); }

.journey-stage__body {
  padding-top: .2rem; opacity: 0; transform: translateY(12px);
  /* Trails the circle slightly so each stage reads as one settling motion, not two simultaneous ones. */
  transition: opacity .45s var(--ease) .1s, transform .45s var(--ease) .1s;
}
.journey-stage.is-in .journey-stage__body { opacity: 1; transform: none; }
.journey-stage__body h3 { color: var(--black); margin-bottom: .22rem; }
.journey-stage__body p { color: #5C5C5C; font-size: .89rem; margin: 0; line-height: 1.5; }

@media (min-width: 768px) and (max-width: 1199.98px) {
  .journey-map__list { grid-template-columns: repeat(3, 1fr); gap: 2.6rem 1.6rem; }
  .journey-map__list::before, .journey-map__list::after { display: none; }
  .journey-stage { flex-direction: column; align-items: center; text-align: center; gap: .9rem; }
  .journey-stage__photo { width: 92px; height: 92px; }
  .journey-stage__num { font-size: 1.6rem; }
}

@media (min-width: 1200px) {
  .journey-map__list { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; padding-top: 4px; }
  .journey-map__list::before, .journey-map__list::after {
    left: calc(100% / 12); right: calc(100% / 12); top: 58px; bottom: auto;
    width: auto; height: 0; border-left: 0; border-top: 2px dotted var(--line);
  }
  .journey-map__list::after { border-top-color: var(--primary); clip-path: inset(0 calc((1 - var(--progress, 0)) * 100%) 0 0); }
  .journey-stage { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
  .journey-stage__photo { width: 116px; height: 116px; }
  .journey-stage__num { font-size: 2rem; }
  .journey-stage__body p { max-width: 168px; }
}

/* ---------- Upcoming events: a perforated "ticket" pair — colour-blocked date stub, a punched
   seam, and a small circular photo stamp. Deliberately not a tile/card grid, and a different
   treatment from the earlier layered-stack version. Each event's fields (image/category/day/
   monthyear/time/title/description/location/cta) are the only things to edit. Presented as a
   Swiper carousel (initCarousels() in main.js): one ticket active at a time, swipeable, with
   arrow buttons and pagination dots — see .events-carousel* below. ---------- */
.events { position: relative; overflow-x: hidden; isolation: isolate; }
.events::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .05;
  background-image: url("../img/events-bg-full.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.events .container { position: relative; z-index: 1; }
.events-carousel { position: relative; max-width: 760px; margin: 0 auto; padding-top: .5rem; }
.events-carousel .swiper { overflow: hidden; }
.events-carousel .swiper-slide { height: auto; padding: 10px 4px 30px; }

.ticket {
  position: relative; display: flex; width: 100%; height: 100%; min-height: 290px; background: #fff; border-radius: 20px;
  box-shadow: 0 18px 40px -22px rgba(10, 37, 64, .3);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ticket:hover { transform: translateY(-6px); box-shadow: 0 30px 54px -20px rgba(10, 37, 64, .38); z-index: 2; }

/* Stub: colour-blocked date column, "torn" away from the body by a perforated seam */
.ticket__stub {
  position: relative; flex: none; width: 124px; padding: 2rem .75rem; border-radius: 20px 0 0 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff;
  background: linear-gradient(165deg, var(--primary) 0%, var(--primary-2) 100%);
}
.ticket--teal .ticket__stub { background: linear-gradient(165deg, var(--brand-2) 0%, #0F6B5F 100%); }
.ticket__month { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.ticket__day { font-size: 2.5rem; font-weight: 800; line-height: 1; margin: .2rem 0; }
.ticket__year { font-size: .68rem; opacity: .7; margin-bottom: .7rem; }
.ticket__tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .32rem .55rem; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px;
}

/* Perforated seam: dashed line with two "punched" notches matching the section background */
.ticket__seam { position: relative; flex: none; width: 0; border-left: 2px dashed rgba(255, 255, 255, .55); }
.ticket__seam::before, .ticket__seam::after {
  content: ""; position: absolute; left: 50%; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); transform: translateX(-50%);
}
.ticket__seam::before { top: -11px; }
.ticket__seam::after { bottom: -11px; }

.ticket__body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 1.9rem 1.7rem 1.9rem 1.9rem; }
.ticket__photo {
  position: absolute; top: 1.4rem; right: 1.4rem; width: 78px; height: 56px; border-radius: 12px; overflow: hidden;
  border: 3px solid var(--surface); box-shadow: 0 8px 18px -8px rgba(10, 37, 64, .4); transition: transform .4s var(--ease);
}
.ticket__photo img { width: 100%; height: 100%; object-fit: cover; }
.ticket:hover .ticket__photo { transform: scale(1.08); }

.ticket__time { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .5rem; font-size: .78rem; color: var(--muted); }
.ticket__time .icon { width: 13px; height: 13px; flex: none; }
.ticket__body h3 { color: var(--black); margin: 0 3.6rem .55rem 0; }
.ticket__desc { color: var(--muted); font-size: .9rem; line-height: 1.6; margin: 0 0 1.3rem; }

.ticket__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.ticket__loc { display: inline-flex; align-items: center; gap: .35rem; font-size: .83rem; color: var(--text); font-weight: 500; }
.ticket__loc .icon { width: 14px; height: 14px; color: var(--brand-2); flex: none; }
.ticket__cta { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .88rem; color: var(--primary); white-space: nowrap; }
.ticket__cta .icon { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.ticket:hover .ticket__cta { color: var(--black); }
.ticket:hover .ticket__cta .icon { transform: translateX(4px); }

.event-list__more { text-align: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); width: 100%; }

/* Carousel controls: arrow buttons either side of the pagination dots */
.events-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: .5rem; }
.events-carousel__arrow {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--black);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease);
}
.events-carousel__arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); }
.events-carousel__arrow .icon { width: 18px; height: 18px; }
.events-carousel__dots { display: flex; align-items: center; gap: .5rem; }
.events-carousel__dots .swiper-pagination-bullet {
  width: 8px; height: 8px; border-radius: 50%; background: var(--line); opacity: 1; margin: 0; cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.events-carousel__dots .swiper-pagination-bullet-active { background: var(--brand-2); transform: scale(1.35); }

@media (max-width: 575.98px) {
  .ticket { flex-direction: column; }
  /* Stub becomes a horizontal band: the full date on one line ("OCT 03 2026") + the tag */
  .ticket__stub { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem .5rem; border-radius: 20px 20px 0 0; padding: .9rem 1rem; }
  .ticket__month, .ticket__year { font-size: .8rem; opacity: .9; margin: 0; }
  .ticket__day { font-size: 1.4rem; margin: 0; }
  .ticket__tag { margin-left: .4rem; }
  .ticket__seam { display: none; }
}

/* ---------- 12. Vision & Mission: one connected infographic — circular visual, drawn SVG
   connectors and two panels. Deliberately not "[Vision Card] [Mission Card]": the panels only
   make sense attached to the circle through the connector lines. ---------- */
.vm2-sec { position: relative; overflow: hidden; }
.vm2-sec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(38% 55% at 100% 12%, rgba(7, 87, 154, .05) 0%, rgba(7, 87, 154, 0) 70%),
    radial-gradient(34% 48% at 4% 96%, rgba(26, 154, 140, .05) 0%, rgba(26, 154, 140, 0) 70%);
}
/* Ring graphic in the top-left corner. It goes on ::after because ::before already carries this
   section's colour glow, and at z-index 0 it stays under .container (z-index 1) so no content is
   covered. back_curcle.jpg has a solid white background rather than an alpha channel, so it is
   composited with multiply: white leaves the pale surface untouched and only the ring strokes
   darken it. Sized by width with the file's own 896:1223 ratio so it scales without distorting,
   and the section's overflow:hidden crops whatever runs past the corner. */
.vm2-sec::after {
  content: ""; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: clamp(340px, 44vw, 820px); aspect-ratio: 896 / 1223;
  background-image: url("../img/back_curcle.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  mix-blend-mode: multiply;
  /* Settles in from off the corner: scaled down, nudged out and rotated slightly, easing back to
     rest. transform-origin is the corner it is anchored to, so it grows out of that corner rather
     than drifting across the section. */
  opacity: 0; transform-origin: left top;
  animation: vm2-ring-in 1.6s var(--ease) .2s forwards;
}
@keyframes vm2-ring-in {
  from { opacity: 0; transform: translate(-14%, -10%) scale(.82) rotate(-8deg); }
  to   { opacity: 1; transform: none; }
}
.vm2-sec .container { position: relative; z-index: 1; }
.vm2-accent { color: var(--brand-2); }

.vm2 { display: grid; grid-template-columns: minmax(240px, 420px) 100px minmax(280px, 1fr); align-items: center; gap: 0 .5rem; max-width: 1080px; margin: 0 auto; }

/* --- Left: circular visual --- */
.vm2__visual { position: relative; width: min(420px, 100%); aspect-ratio: 1; margin: 0 auto; justify-self: center; opacity: 0; transform: scale(.85); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.vm2.is-in .vm2__visual { opacity: 1; transform: scale(1); }
@media (min-width: 1200px) { .vm2__visual { width: 460px; } }

.vm2__orbit { position: absolute; inset: -26px; width: calc(100% + 52px); height: calc(100% + 52px); pointer-events: none; }
.vm2__dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 5px #fff; opacity: 0; transform: scale(0); transition: opacity .5s var(--ease) .9s, transform .5s var(--ease) .9s; }
.vm2.is-in .vm2__dot { opacity: 1; transform: scale(1); }
.vm2__dot--teal { top: 3%; right: 12%; background: var(--brand-2); }
.vm2__dot--blue { bottom: 9%; left: 1%; background: var(--primary); }

.vm2__circle {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #fff;
  border: 6px solid #fff; box-shadow: 0 30px 70px -30px rgba(10, 37, 64, .4), 0 0 0 1px var(--line);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
}
.vm2__seg { position: relative; overflow: hidden; opacity: 0; transform: scale(1.12); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(.35s + var(--i, 0) * .13s); }
.vm2.is-in .vm2__seg { opacity: 1; transform: scale(1); }
.vm2__seg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm2__seg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(7, 87, 154, .22), rgba(26, 154, 140, .16)); mix-blend-mode: multiply; opacity: .55; }
.vm2__seg--1 { grid-column: 1 / -1; grid-row: 1; border-bottom: 3px solid #fff; }
.vm2__seg--2 { grid-column: 1; grid-row: 2; border-bottom: 3px solid #fff; border-right: 1.5px solid #fff; }
.vm2__seg--3 { grid-column: 2; grid-row: 2; border-bottom: 3px solid #fff; }
.vm2__seg--4 { grid-column: 1 / -1; grid-row: 3; }
.vm2__seg--empty { background: linear-gradient(150deg, var(--surface), #E4EEF6); }
.vm2__seg--empty img { display: none; }

.vm2__core {
  position: absolute; inset: 30%; border-radius: 50%; background: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: .12rem; padding: .5rem; z-index: 2;
  box-shadow: 0 16px 34px -16px rgba(10, 37, 64, .35);
  opacity: 0; transform: scale(.7); transition: opacity .5s var(--ease) .75s, transform .5s cubic-bezier(.34, 1.56, .64, 1) .75s;
}
.vm2.is-in .vm2__core { opacity: 1; transform: scale(1); }
.vm2__core-line { font-size: clamp(.68rem, 1.25vw, .82rem); font-weight: 700; letter-spacing: .02em; color: var(--black); line-height: 1.3; text-transform: uppercase; }
.vm2__core-line--accent { color: var(--brand-2-ink); }

/* --- Center: drawn connectors (desktop) --- */
.vm2__paths { display: flex; flex-direction: column; justify-content: center; gap: 2rem; height: 100%; }
.vm2__connector { width: 100%; height: 190px; display: block; overflow: visible; }
.vm2__connector-line { stroke-dasharray: var(--len, 260); stroke-dashoffset: var(--len, 260); transition: stroke-dashoffset .85s var(--ease); }
.vm2.is-in .vm2__connector--vision .vm2__connector-line { transition-delay: 1.05s; }
.vm2.is-in .vm2__connector--mission .vm2__connector-line { transition-delay: 1.55s; }
.vm2.is-in .vm2__connector-line { stroke-dashoffset: 0; }
.vm2__connector-node { opacity: 0; transition: opacity .3s var(--ease); }
.vm2.is-in .vm2__connector--vision .vm2__connector-node { transition-delay: .95s; }
.vm2.is-in .vm2__connector--mission .vm2__connector-node { transition-delay: 1.45s; }
.vm2.is-in .vm2__connector-node { opacity: 1; }
.vm2__mid-connector { display: none; }

/* --- Right: panels --- */
.vm2__panels { display: flex; flex-direction: column; justify-content: center; gap: 2rem; }
.vm2__panel {
  position: relative; min-height: 190px; display: flex; flex-direction: column; justify-content: center; gap: .9rem;
  padding: 2rem 2.25rem; border-radius: 26px; border: 1.5px solid transparent;
  opacity: 0; transform: translateX(40px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.vm2.is-in .vm2__panel--vision { transition-delay: 1.2s; opacity: 1; transform: translateX(0); }
.vm2.is-in .vm2__panel--mission { transition-delay: 1.65s; opacity: 1; transform: translateX(0); }

.vm2__panel--vision { background: rgba(26, 154, 140, .07); }
.vm2__panel--mission { background: rgba(7, 87, 154, .06); }
.vm2__panel:hover { box-shadow: 0 20px 40px -24px rgba(10, 37, 64, .3); }
.vm2.is-in .vm2__panel--vision:hover { transform: translateX(0) translateY(-4px); }
.vm2.is-in .vm2__panel--mission:hover { transform: translateX(0) translateY(-4px); }
.vm2__panel--vision:hover { border-color: rgba(26, 154, 140, .35); background: rgba(26, 154, 140, .11); }
.vm2__panel--mission:hover { border-color: rgba(7, 87, 154, .3); background: rgba(7, 87, 154, .1); }

.vm2__panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.vm2__panel h3 { margin: 0 0 .5rem; }
.vm2__underline { display: block; width: 42px; height: 3px; border-radius: 2px; background: var(--brand-2); }
.vm2__panel--mission .vm2__underline { background: var(--primary); }
.vm2__panel p { margin: 0; font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; color: var(--text); max-width: 46ch; }

.vm2__icon {
  flex: none; width: 58px; height: 58px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-2); box-shadow: 0 10px 24px -12px rgba(10, 37, 64, .3); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.vm2__panel--mission .vm2__icon { color: var(--primary); }
.vm2__icon .icon { width: 26px; height: 26px; }
.vm2__panel:hover .vm2__icon { transform: scale(1.08) translate(2px, -2px); }

/* --- Responsive: mobile swaps the drawn connectors for a simple vertical line + dots --- */
@media (max-width: 991.98px) {
  .vm2 { grid-template-columns: 1fr; justify-items: center; gap: 0; max-width: 520px; }
  .vm2__visual { width: min(320px, 78vw); margin-bottom: 1.75rem; }
  .vm2__paths { display: none; }
  .vm2__panels { width: 100%; gap: 0; }
  .vm2__panel { width: 100%; border-radius: 20px; transform: translateY(30px); }
  .vm2.is-in .vm2__panel--vision, .vm2.is-in .vm2__panel--mission { transform: translateY(0); }
  .vm2.is-in .vm2__panel--vision:hover, .vm2.is-in .vm2__panel--mission:hover { transform: translateY(-4px); }
  .vm2__mid-connector {
    display: block; position: relative; width: 100%; height: 2.5rem; flex: none;
  }
  .vm2__mid-connector::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
    background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px);
  }
  .vm2__mid-connector::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%;
    transform: translate(-50%, -50%); background: var(--primary); box-shadow: 0 0 0 5px var(--surface);
  }
  /* echoes the same vertical line above the Vision panel, running up into the circle */
  .vm2__visual::after {
    content: ""; position: absolute; left: 50%; bottom: -1.75rem; width: 2px; height: 1.75rem; transform: translateX(-50%);
    background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px);
  }
  .vm2__visual::before {
    content: ""; position: absolute; left: 50%; bottom: -1.85rem; width: 10px; height: 10px; border-radius: 50%;
    transform: translate(-50%, 50%); background: var(--brand-2); box-shadow: 0 0 0 5px var(--surface); z-index: 1;
  }
}
@media (max-width: 575.98px) {
  .vm2__panel { padding: 1.6rem 1.5rem; }
  .vm2__icon { width: 48px; height: 48px; }
  .vm2__icon .icon { width: 22px; height: 22px; }
}

/* ---------- 13. Success stories carousel ---------- */
.stories { position: relative; overflow: hidden; background: #fff; }
.stories::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 12% 20%, rgba(26, 154, 140, .12) 0%, rgba(26, 154, 140, 0) 70%),
    radial-gradient(45% 55% at 88% 80%, rgba(7, 87, 154, .12) 0%, rgba(7, 87, 154, 0) 70%);
}
.stories .container { position: relative; }
.stories__stage { position: relative; }
.stories__watermark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; user-select: none;
  font-size: clamp(6rem, 22vw, 20rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(10, 37, 64, .08);
}
.stories .swiper { position: relative; z-index: 1; overflow: hidden; padding: 12px 0 28px; }
.stories .swiper-slide { width: 440px; max-width: 88vw; height: auto; transition: transform .7s cubic-bezier(.22, .61, .36, 1), opacity .7s, filter .7s; transform: scale(.88) translateY(10px); opacity: .5; filter: saturate(.6); }
.stories .swiper-slide-active { transform: scale(1) translateY(0); opacity: 1; filter: none; }
.story-card {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 1rem; padding: 2.1rem 2rem 1.75rem; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  transition: background .5s, border-color .5s, box-shadow .7s cubic-bezier(.22, .61, .36, 1), transform .3s;
}
.story-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--brand-2)); opacity: 0; transition: opacity .5s; }
.story-card__num { position: absolute; left: 1.6rem; top: 1.4rem; font-size: 3.4rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.2px rgba(10, 37, 64, .16); pointer-events: none; transition: -webkit-text-stroke-color .5s; }
.story-card__mark { position: absolute; top: .4rem; right: 1.25rem; font-family: Georgia, "Times New Roman", serif; font-size: 7.5rem; line-height: 1; font-weight: 700; color: var(--brand-2); opacity: .12; pointer-events: none; transition: opacity .5s, transform .7s cubic-bezier(.22, .61, .36, 1); }
.story-card__tag { align-self: flex-start; margin-top: 2.6rem; color: var(--brand-2-ink); border-color: rgba(26, 154, 140, .35); background: rgba(26, 154, 140, .06); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.story-card h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.story-card blockquote { margin: 0; color: var(--text); font-size: 1.05rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.story-card__foot { display: flex; align-items: center; gap: .9rem; padding-top: 1.1rem; border-top: 1px solid var(--line); margin-top: auto; }
.story-card__foot .story-card__avatar { position: relative; top: auto; left: auto; transform: none; width: 52px; height: 52px; flex: none; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.story-card__foot strong { display: block; font-weight: 600; font-size: .95rem; color: var(--black); line-height: 1.3; }
.story-card__name { display: block; font-size: .82rem; color: var(--muted); margin-top: .15rem; }
.swiper-slide-active .story-card { background: linear-gradient(160deg, #0A2540 0%, #0B3766 100%); border-color: transparent; box-shadow: 0 36px 70px -34px rgba(10, 37, 64, .6); }
.swiper-slide-active .story-card::before { opacity: 1; }
.swiper-slide-active .story-card__num { -webkit-text-stroke-color: rgba(255, 255, 255, .28); }
.swiper-slide-active .story-card__mark { opacity: .35; transform: translateY(-4px); }
.swiper-slide-active .story-card__tag { color: #4FC3B5; border-color: rgba(79, 195, 181, .4); background: rgba(79, 195, 181, .12); }
.swiper-slide-active .story-card h3 { color: #fff; }
.swiper-slide-active .story-card blockquote { color: rgba(255, 255, 255, .92); }
.swiper-slide-active .story-card__foot { border-top-color: rgba(255, 255, 255, .15); }
.swiper-slide-active .story-card__foot strong { color: #fff; }
.swiper-slide-active .story-card__name { color: rgba(255, 255, 255, .65); }
.swiper-slide-active .story-card__foot .story-card__avatar { box-shadow: 0 0 0 2px var(--brand-2); }
.stories__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; max-width: 720px; margin: .5rem auto 0; }
.stories__count { font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; color: var(--black); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: .35rem; }
.stories__count [data-story-total] { color: var(--muted); font-weight: 500; font-size: .9rem; }
.stories__sep { color: var(--muted); font-weight: 400; }
.stories__progress { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.stories__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--brand-2)); border-radius: 3px; transition: width .7s cubic-bezier(.22, .61, .36, 1); }
.stories__nav { display: flex; gap: .6rem; }
.stories__arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--black); display: inline-flex; align-items: center; justify-content: center; transition: background .25s, color .25s, border-color .25s, transform .3s; }
.stories__arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); }
.stories__arrow .icon { width: 18px; height: 18px; }
@media (max-width: 575.98px) { .stories__bar { grid-template-columns: auto 1fr; } .stories__nav { grid-column: 1 / -1; justify-content: center; } .story-card { padding: 1.9rem 1.4rem 1.5rem; } .story-card__num { font-size: 2.6rem; } }
.story-grid .story-card { margin-top: 0; height: 100%; }
.story-grid .story-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(10, 37, 64, .35); border-color: rgba(7, 87, 154, .3); }
.story-grid .story-card::before { opacity: 1; }
.story-grid blockquote { -webkit-line-clamp: unset; line-clamp: unset; display: block; }
/* "Read Full Story" from the home page lands on /success-stories#story-{id} */
.story-grid .story-card { scroll-margin-top: calc(var(--header-h) + 24px); }
.story-grid .story-card:target { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(7, 87, 154, .18), 0 20px 40px -24px rgba(10, 37, 64, .35); }

/* ---------- 14. Media cards (events / posts / videos) ---------- */
.media-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s var(--ease); }
.media-card:hover { border-color: #A1A1AA; }
.media-card .ph { border-radius: 0; }
.media-card .ph:not(.ph--none) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-card__body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.media-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-bottom: .6rem; font-size: .82rem; color: var(--muted); }
.media-card__meta .icon { width: 14px; height: 14px; }
.media-card__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.media-card h3 { margin-bottom: .4rem; }
.media-card p { color: var(--muted); font-size: .95rem; flex: 1; }
.media-card .text-link, .media-card .btn { align-self: flex-start; margin-top: .5rem; }

/* Borderless cards need more air between them than boxed ones, since nothing but whitespace
   separates one card's text from the next card's image. */
.news-grid { --bs-gutter-x: clamp(1.5rem, 2.6vw, 2.5rem); --bs-gutter-y: clamp(2.25rem, 3.5vw, 3.25rem); }

/* News & Events variant: borderless, panel-free card — a rounded image with the category pill
   riding on it, then the copy sitting directly on the section background, closed by a date /
   action baseline row. With no border or box to react on hover, the image zoom and the title
   colour carry the affordance instead. */
.media-card--news { position: relative; background: none; border: 0; border-radius: 0; overflow: visible; }
.media-card--news:hover { border-color: transparent; }
.media-card--news .ph { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; }
.media-card--news .ph:not(.ph--none) img { transition: transform .7s var(--ease); }
.media-card--news:hover .ph:not(.ph--none) img { transform: scale(1.06); }
/* Flush with the image's edges — there's no panel to inset the copy from. */
.media-card--news .media-card__body { padding: 1.1rem 0 0; }
.media-card--news h3 { margin-bottom: .5rem; transition: color .2s var(--ease); }
.media-card--news:hover h3 { color: var(--brand); }
.media-card--news p { font-size: .92rem; margin-bottom: 1rem; }

/* Baseline row: date left, action right. No divider rule — on a borderless card the whitespace
   already separates it, and a hairline just reintroduces the panel edge the design drops. */
.media-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .9rem;
  margin-top: auto; padding-top: .9rem;
}
/* Date reads as a real data point rather than grey small print: teal icon, ink-coloured text. */
.media-card--news .media-card__foot .media-card__meta {
  margin-bottom: 0; gap: .45rem; font-size: .82rem; font-weight: 500; color: var(--ink);
}
.media-card--news .media-card__foot .media-card__meta .icon { width: 15px; height: 15px; color: var(--brand-2); }
/* Action pairs the label with a circular arrow that fills on hover. The stretched link means
   hovering anywhere on the card triggers it, so the whole card animates as one. */
.media-card--news .media-card__foot .text-link {
  align-self: auto; margin-top: 0; gap: .55rem; font-size: .88rem; font-weight: 600; color: var(--ink);
}
.media-card--news .media-card__foot .text-link .icon {
  width: 30px; height: 30px; padding: 7px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--brand);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.media-card--news:hover .media-card__foot .text-link .icon { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Whole card is the click target; the visible link stays the accessible one. */
.media-card--news .media-card__foot .text-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.video-card { cursor: pointer; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding: 0; width: 100%; height: 100%; display: flex; flex-direction: column; transition: border-color .2s var(--ease); }
.video-card:hover { border-color: #A1A1AA; }
.video-card .ph { border-radius: 0; }
/* Real YouTube thumbnails (not the small placeholder art) fill the frame, like the post/event cards. */
.video-card .ph:not(.ph--none) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-card__play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--black); display: inline-flex; align-items: center; justify-content: center; z-index: 1; transition: transform .25s var(--ease); }
.video-card:hover .video-card__play { transform: scale(1.06); }
.video-card__play .icon { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 3px; }
.video-card__dur { position: absolute; right: .75rem; top: .75rem; z-index: 1; background: rgba(10, 10, 10, .85); color: #fff; font-size: .75rem; font-weight: 500; padding: .2rem .5rem; border-radius: 4px; }
.video-card__body { padding: 1.1rem 1.25rem 1.25rem; }
.video-card__body h3 { margin-bottom: .3rem; }
.video-card__body p { color: var(--muted); font-size: .9rem; margin: 0; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter-tab { padding: .5rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font-weight: 500; font-size: .875rem; transition: all .2s var(--ease); }
.filter-tab:hover { border-color: var(--primary); color: var(--primary); }
.filter-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.filter-tabs--center { justify-content: center; }
[data-category].is-hidden { display: none; }

/* ---------- Community events: premium tab bar + richer grid ----------
   Scoped to .filter-tabs--pro / .cm-events so the plain filter tabs and news cards used on
   Home and Learning Hub are untouched. */
.cm-tabs { position: relative; margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }
/* Full container width so the bar's edges line up with the card grid below; tabs share the width */
.filter-tabs--pro {
  position: relative; display: flex; flex-wrap: nowrap; gap: .25rem; width: 100%; margin: 0;
  padding: .4rem; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 22px 44px -30px rgba(10, 37, 64, .38), inset 0 1px 0 #fff;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.filter-tabs--pro::-webkit-scrollbar { display: none; }
/* Sliding pill behind the active tab — placed by initFilters(), animated only once it is ready */
.filter-tabs__indicator {
  position: absolute; top: 0; left: 0; z-index: 0; width: 0; height: 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(135deg, var(--primary-2) 0%, var(--primary) 45%, var(--black-2) 100%);
  box-shadow: 0 12px 24px -12px rgba(7, 87, 154, .75); opacity: 0;
}
.filter-tabs--pro.is-ready .filter-tabs__indicator {
  opacity: 1; transition: transform .5s cubic-bezier(.65, 0, .35, 1), width .5s cubic-bezier(.65, 0, .35, 1), height .3s var(--ease);
}
.filter-tabs--pro .filter-tab {
  position: relative; z-index: 1; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .4rem .85rem .4rem .4rem; border: 0; border-radius: 999px; background: transparent;
  font-family: inherit; font-size: .9rem; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); white-space: nowrap;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.filter-tabs--pro .filter-tab:hover { border-color: transparent; color: var(--primary); }
.filter-tabs--pro .filter-tab:not(.is-active):hover { background: var(--surface); }
.filter-tabs--pro .filter-tab.is-active { background: transparent; color: #fff; }
/* No-JS / pre-placement fallback so the active tab still reads as selected */
.filter-tabs--pro:not(.is-ready) .filter-tab.is-active { background: var(--primary); }
.filter-tabs--pro .filter-tab:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; }
.filter-tab__icon {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--surface); color: var(--primary);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .4s var(--ease);
}
.filter-tab__icon .icon { width: 16px; height: 16px; }
.filter-tabs--pro .filter-tab:not(.is-active):hover .filter-tab__icon { background: #fff; transform: rotate(-8deg) scale(1.06); }
.filter-tabs--pro .filter-tab.is-active .filter-tab__icon { background: rgba(255, 255, 255, .16); color: #fff; }

/* Section backdrop: soft brand glows, a fading dot field and faint rings — decoration only */
.cm-events { isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--surface-2) 55%, var(--surface) 100%); }
.cm-events::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 30% at 92% 4%, rgba(7, 87, 154, .09) 0%, rgba(7, 87, 154, 0) 70%),
    radial-gradient(34% 28% at 4% 58%, rgba(26, 154, 140, .08) 0%, rgba(26, 154, 140, 0) 70%),
    radial-gradient(40% 26% at 88% 98%, rgba(7, 87, 154, .07) 0%, rgba(7, 87, 154, 0) 70%);
}
.cm-events__deco { position: absolute; z-index: -1; pointer-events: none; }
.cm-events__deco--dots {
  top: 2rem; left: 0; width: min(38vw, 420px); height: 260px;
  background: radial-gradient(rgba(7, 87, 154, .22) 1.2px, transparent 1.6px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(70% 70% at 0% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 70% at 0% 0%, #000 0%, transparent 75%);
}
.cm-events__deco--ring {
  top: -220px; right: -180px; width: 520px; height: 520px; border-radius: 50%;
  border: 1.5px solid rgba(7, 87, 154, .08); box-shadow: 0 0 0 60px rgba(7, 87, 154, .025), 0 0 0 61.5px rgba(7, 87, 154, .06);
}
.cm-events__deco--ring-sm {
  bottom: 8%; left: -90px; width: 220px; height: 220px; border-radius: 50%; border: 1.5px dashed rgba(26, 154, 140, .22);
}

/* Cards: soft-shadowed image; the image itself stays still on hover (title/arrow carry the affordance) */
.cm-events .news-grid { position: relative; }
.cm-events .media-card--news .ph {
  border-color: rgba(255, 255, 255, .9);
  background: linear-gradient(150deg, #EAF2F9 0%, #F4F8FB 50%, #E4F2EF 100%);
  box-shadow: 0 26px 46px -34px rgba(10, 37, 64, .5);
}
.cm-events .media-card--news:hover .ph img { transform: none; }
/* Placeholder art gets a quiet dot texture instead of a flat grey box */
.cm-events .media-card--news .ph--none::after {
  display: block; content: ""; position: absolute; inset: 0; height: auto; opacity: 1;
  background: radial-gradient(rgba(7, 87, 154, .16) 1px, transparent 1.4px) 0 0 / 14px 14px;
  -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 60%); mask-image: linear-gradient(160deg, #000 0%, transparent 60%);
}
.cm-events .media-card--news .ph--none img { z-index: 1; opacity: .75; }
.cm-events .ph__tag {
  z-index: 2; border-color: transparent; background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 18px -10px rgba(10, 37, 64, .45);
}
.cm-events .ph__tag.tag--navy { background: rgba(10, 37, 64, .88); }
/* Short brand rule above each title that stretches on hover */
.cm-events .media-card--news .media-card__body { padding-top: 1.35rem; }
.cm-events .media-card--news .media-card__body::before {
  content: ""; display: block; width: 28px; height: 3px; margin-bottom: .85rem; border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--brand-2)); transition: width .45s var(--ease);
}
.cm-events .media-card--news:hover .media-card__body::before { width: 64px; }
.cm-events .media-card--news h3 { letter-spacing: -0.01em; }
.cm-events .media-card--news .media-card__foot { padding-top: 1rem; border-top: 1px dashed var(--line); }
.cm-events .media-card--news .media-card__foot .media-card__meta span {
  padding: .3rem .7rem; border-radius: 999px; background: #fff; border: 1px solid var(--line);
}
.cm-events .filter-empty {
  margin: 0; padding: 2.5rem 1rem; text-align: center; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .7);
}

/* Tab switch: quick fade-out, then the new set rises in with a short stagger */
.cm-events .news-grid.is-leaving .media-card { opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .18s ease, transform .18s ease; }
.cm-events .news-grid .is-entering > .media-card { animation: cmCardIn .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes cmCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* Below 1200px the bar becomes an edge-faded, snap-scrolling row of individual chips */
@media (max-width: 1199.98px) {
  .filter-tabs--pro {
    gap: .5rem; padding: .35rem 1.75rem .5rem .1rem; background: none; border: 0; border-radius: 0; box-shadow: none;
    scroll-snap-type: x proximity; scroll-padding-inline: 1rem;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
  }
  .filter-tabs--pro .filter-tab { flex: none; scroll-snap-align: center; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 20px -18px rgba(10, 37, 64, .5); }
  .filter-tabs--pro .filter-tab:not(.is-active):hover { background: #fff; border-color: rgba(7, 87, 154, .35); }
  .filter-tabs--pro .filter-tab.is-active { border-color: transparent; }
}
@media (max-width: 575.98px) {
  .filter-tabs--pro .filter-tab { font-size: .85rem; padding-right: .7rem; }
  .filter-tab__icon { width: 28px; height: 28px; }
  .filter-tab__icon .icon { width: 14px; height: 14px; }
  .cm-events__deco--ring { width: 320px; height: 320px; top: -150px; right: -140px; }
  .cm-events__deco--dots { width: 60vw; }
}
@media (prefers-reduced-motion: reduce) {
  .filter-tabs--pro.is-ready .filter-tabs__indicator,
  .cm-events .media-card--news .media-card__body::before, .filter-tab__icon { transition: none; }
  .cm-events .news-grid .is-entering > .media-card { animation: none; }
  .filter-tabs--pro .filter-tab:not(.is-active):hover .filter-tab__icon { transform: none; }
}
.filter-empty { text-align: center; color: var(--muted); padding: 2rem; }

/* ---------- 15. Forms ---------- */
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label, .field__label { font-weight: 500; font-size: .875rem; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; padding: .8rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(7, 87, 154, .12); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid .multiselect__toggle, .field.is-invalid .file-field__btn { border-color: #c62828; }
.field__error { color: #c62828; font-size: .8rem; margin: 0; }
.field__error:empty { display: none; }
.field__hint { font-size: .8rem; color: var(--muted); margin: 0; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px; padding-right: 2.5rem; }
/* Empty select reads as a placeholder, like the Services multiselect */
.field select:has(option[value=""]:checked) { color: var(--muted); }
.field select option { color: var(--ink); }
.field--check { flex-direction: row; align-items: flex-start; gap: .6rem; }
.field--check input { width: 18px; height: 18px; margin-top: .25rem; accent-color: var(--primary); }
.field--check label { font-weight: 400; font-size: .9rem; }
.form-success { display: flex; gap: .75rem; align-items: flex-start; padding: 1.25rem 1.5rem; margin-top: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.form-success[hidden] { display: none; }
.form-success { border-color: rgba(26, 154, 140, .4); }
.form-success .icon { color: var(--brand-2); width: 24px; height: 24px; flex: none; }
.form-success strong { display: block; }
.form-success p { margin: 0; font-size: .95rem; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); }
.file-field { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; position: relative; }
.file-field input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; padding: 0; border: 0; }
.file-field__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border: 1px dashed #A1A1AA; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 500; font-size: .85rem; cursor: pointer; }
.file-field__btn:hover { border-color: var(--black); }
.file-field input:focus-visible + .file-field__btn { outline: 2px solid var(--brand); outline-offset: 2px; }
.file-field__name { font-size: .85rem; color: var(--muted); }
.multiselect { position: relative; }
.multiselect__toggle { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; padding: .45rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.multiselect__toggle:focus-visible, .multiselect__toggle[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(7, 87, 154, .12); outline: none; }
.multiselect__toggle > .icon { width: 16px; height: 16px; color: var(--black); transition: transform .2s; }
.multiselect__toggle[aria-expanded="true"] > .icon { transform: rotate(180deg); }
.multiselect__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.multiselect__placeholder { color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 4px; background: var(--surface); color: var(--ink); font-size: .8rem; font-weight: 500; border: 1px solid var(--line); }
.chip--all { background: var(--brand-2); color: #fff; border-color: var(--brand-2); }
.multiselect__menu { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .25); padding: .5rem; display: none; max-height: 320px; overflow-y: auto; }
.multiselect.is-open .multiselect__menu { display: block; }
.multiselect__option { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: var(--radius-sm); font-size: .92rem; cursor: pointer; }
.multiselect__option:hover { background: var(--surface); }
.multiselect__option input { width: 17px; height: 17px; accent-color: var(--primary); margin: 0; }
.multiselect__option--all { border-bottom: 1px solid var(--line); margin-bottom: .35rem; padding-bottom: .7rem; font-weight: 500; color: var(--ink); }

/* Connect (enquiry) block */
.connect { display: grid; gap: 1.5rem; }
.connect__side { background: var(--black); color: #fff; border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; }
.connect__side h3 { color: #fff; }
.connect__side p { color: var(--on-dark); }
.connect__list { display: grid; gap: 1.1rem; margin: 1.5rem 0; }
.connect__list li { display: flex; gap: .85rem; align-items: flex-start; font-size: .95rem; color: #fff; }
.connect__list .icon { width: 20px; height: 20px; color: rgba(255, 255, 255, .6); flex: none; margin-top: .15rem; }
.connect__list a { color: #fff; }
.connect__list a:hover { color: rgba(255, 255, 255, .7); }
.connect__list strong { display: block; font-size: .78rem; color: rgba(255, 255, 255, .55); font-weight: 500; }
.connect__side .btn { margin-top: auto; align-self: flex-start; }
@media (min-width: 992px) { .connect { grid-template-columns: 1.5fr 1fr; gap: 2rem; } }

/* Enquiry section: dotted texture over the plain white. dotted_bg.png carries real alpha
   (palette + tRNS), so it drops straight on with no blend mode. isolation:isolate is what makes
   the z-index:-1 layer work — without a stacking context here the pseudo sinks behind the page
   background and disappears; with it, the dots paint above the section's background and below
   all content, so the form and the contact panel stay untouched. Scaled to cover rather than
   tiled, because the file has a slightly denser patch that would seam on repeat. */
#connect { isolation: isolate; }
#connect::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("../img/dotted_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* ---------- 16. Inner page banner (light, typographic) ---------- */
/* Shared heading system for every interior page (About, Opportunities, Services, Learning Hub,
   Community, Success Stories, Careers, Contact, detail pages, etc.) — one centered, responsive
   component so new pages automatically match. Structure: breadcrumb -> eyebrow -> h1 -> lead. */
/* Inner-page banner, shared by every page except Home (.hero) and About (.about-hero). The
   treatment is entirely CSS so it lands on all 26 pages without touching their markup, and it
   has to survive any mix of breadcrumb, eyebrow, tagline, heading, lead, badges and back-link. */
/* Full-bleed dark band carrying assets/img/page-banner-bg.svg — a purpose-built brand field
   (navy-to-blue gradient, fading dot grid, growth arcs, corner rings). The SVG is authored wide
   and set to cover, so it crops gracefully from phone to ultrawide. The gradient layered over it
   keeps the left third dark enough for the headline no matter how the art crops. */
.page-banner {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: var(--black);
  background-image:
    linear-gradient(100deg, rgba(10, 37, 64, .92) 0%, rgba(10, 37, 64, .72) 38%, rgba(10, 37, 64, .28) 70%, rgba(10, 37, 64, .2) 100%),
    url("../img/page-banner-bg.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  padding: clamp(1.9rem, 4vw, 3.25rem) 0;
}
.page-banner .container {
  position: relative; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  min-height: clamp(120px, 14vw, 168px);
}
/* Breadcrumb reads as a discrete control rather than text floating above the title. */
.page-banner .breadcrumb {
  margin-bottom: clamp(.6rem, 1.1vw, .85rem);
  padding: .4rem 1rem; border-radius: 999px;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.page-banner .breadcrumb a { color: rgba(255, 255, 255, .72); }
.page-banner .breadcrumb a:hover { color: #fff; }
.page-banner .breadcrumb [aria-current] { color: #4FC3B5; }
.page-banner .eyebrow { margin: 0 0 clamp(.5rem, .9vw, .75rem); color: #4FC3B5; }
.page-banner h1 { max-width: 20ch; margin: 0 0 clamp(.6rem, 1.2vw, 1rem); color: #fff; }
.page-banner p { color: var(--on-dark); font-size: clamp(1rem, 1.8vw, 1.25rem); max-width: 60ch; margin: 0; }
.page-banner .hub-hero__tag { color: #4FC3B5; }
.page-banner .back-link { margin-inline: 0; color: rgba(255, 255, 255, .72); }
.page-banner .back-link:hover { color: #fff; }
.page-banner .tag { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff; }
.page-banner .page-banner__aside { display: none; }
/* Pages that opted into a centred banner in markup keep it. */
.page-banner--center .container { align-items: center; text-align: center; }
.page-banner--center h1, .page-banner--center p { margin-inline: auto; }
.page-banner--center .badges { justify-content: center; }
@media (max-width: 575.98px) {
  .page-banner { background-position: 72% center, 72% center; }
  .page-banner .container { min-height: 0; }
}

.page-banner__aside {
  position: absolute; right: clamp(1.5rem, 4vw, 4rem); top: 50%; transform: translateY(-50%);
  display: flex; gap: clamp(2rem, 4vw, 3.5rem); pointer-events: none;
}
/* Decorative watermark text — light on the dark band; the old brand-blue tint was invisible there. */
.page-banner__aside span {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.7; color: rgba(255, 255, 255, .14); text-align: right;
}
.page-banner__aside .page-banner__aside--sm { color: rgba(79, 195, 181, .28); font-size: .68rem; }
@media (max-width: 1279.98px) { .page-banner__aside { display: none; } }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--black); }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.breadcrumb [aria-current] { color: var(--ink); }
.page-banner .hub-hero__tag { font-weight: 500; font-size: var(--font-tagline); color: #4FC3B5; margin-bottom: .75rem; max-width: none; }

/* ---------- 17. Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal.is-open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, .7); }
.modal__dialog { --pad-y: clamp(1.5rem, 3vw, 2.25rem); --pad-x: var(--pad-y); position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 2rem); overflow-y: auto; background: #fff; border-radius: var(--radius); padding: var(--pad-y) var(--pad-x); animation: modalIn .3s var(--ease); }
.modal__dialog--wide { max-width: 960px; padding: 0; background: var(--black); overflow: hidden; }
.modal__close { position: absolute; top: .9rem; right: .9rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--black); display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.modal__close:hover { background: var(--surface); }
.modal__close .icon { width: 18px; height: 18px; }
.modal__dialog--wide .modal__close { top: .75rem; right: .75rem; }
.modal h3 { margin-bottom: .35rem; padding-right: 2.5rem; }
.modal .lead { font-size: 1rem; margin-bottom: 1.5rem; }
.modal__player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal__caption { padding: 1.25rem 1.5rem 1.5rem; color: #fff; }
.modal__caption h3 { color: #fff; margin-bottom: .35rem; }
.modal__caption p { color: var(--on-dark); margin: 0; font-size: .95rem; }
@keyframes modalIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 18. Page-specific ---------- */
.expertise-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.expertise {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; background: #fff;
  border: 1px solid var(--line); border-radius: 16px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.expertise:hover { border-color: transparent; box-shadow: 0 20px 40px -24px rgba(10, 37, 64, .28); transform: translateY(-4px); }
.expertise:nth-child(3n+1) { --accent: var(--primary); --accent-tint: rgba(7, 87, 154, .09); }
.expertise:nth-child(3n+2) { --accent: var(--brand-2); --accent-tint: rgba(26, 154, 140, .1); }
.expertise:nth-child(3n) { --accent: var(--black-2); --accent-tint: rgba(10, 37, 64, .07); }
.expertise .card-x__icon {
  margin: 0; width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--accent-tint, var(--surface)); color: var(--accent, var(--primary));
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.expertise:hover .card-x__icon { background: var(--accent, var(--primary)); color: #fff; transform: scale(1.08); }
.expertise .card-x__icon .icon { width: 22px; height: 22px; }
.expertise span { font-weight: 500; font-size: .95rem; color: var(--ink); line-height: 1.4; align-self: center; }
@media (min-width: 576px) { .expertise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .expertise-grid { grid-template-columns: repeat(4, 1fr); } }
/* Two-column borderless checklist. The eight segments carry no panel of their own — the icon and
   the label do the work, which keeps the column light enough to sit beside the photo collage.
   (The previous fill was var(--surface), the exact background of the .section--light these sit
   on, so the old pills were rendering invisible.) */
.audience { display: grid; grid-template-columns: 1fr; gap: .7rem 1.5rem; margin: 1rem 0 0; }
@media (min-width: 576px) { .audience { grid-template-columns: 1fr 1fr; } }
.audience li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .95rem; line-height: 1.45; color: var(--text);
}
.audience li > .icon {
  flex: none; width: 21px; height: 21px; margin-top: .1rem; color: var(--brand-2-ink);
  transition: transform .25s var(--ease);
}
.audience li:hover > .icon { transform: scale(1.12); }
.leader { display: grid; gap: 2.5rem; align-items: start; }
.leader__photo { max-width: 380px; }
.leader__role { font-weight: 500; color: var(--muted); margin-bottom: 1.25rem; }
.leader__badges { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.leader__badge { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 500; font-size: .875rem; color: var(--ink); }
.leader__badge .icon { width: 20px; height: 20px; color: var(--black); }
@media (min-width: 992px) { .leader { grid-template-columns: 380px 1fr; gap: 4rem; } }
.intro-block { max-width: 760px; }
.sector-intro {
  position: relative; overflow: hidden; display: grid; gap: 2rem;
  padding: clamp(2rem, 4vw, 3rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  background-image: url("../img/get-in-touch-bg.svg"); background-repeat: no-repeat; background-position: top right; background-size: 420px auto;
}
.sector-intro__media { display: flex; align-items: center; }
.sector-intro__photo { position: relative; width: 100%; aspect-ratio: 830 / 440; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sector-intro__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Source photos for most sectors are square (320x320) — a wide 830:440 crop would upscale and
   soften them, so this modifier keeps the frame square instead of forcing the landscape ratio. */
.sector-intro--square .sector-intro__photo { aspect-ratio: 1; max-width: 400px; margin: 0 auto; }
@media (min-width: 992px) { .sector-intro { grid-template-columns: 1.15fr 1fr; align-items: center; } }
/* Section wash: a soft brand-colour gradient plus the site's existing line-art SVG (unused
   elsewhere, tuned for light surfaces) sitting low-opacity behind the circle-photo layout below. */
.financial-intro {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, rgba(7, 87, 154, .08) 0%, rgba(26, 154, 140, .12) 100%), var(--surface);
}
.financial-intro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6;
  background-image: url("../img/contact-hero-art.svg");
  background-repeat: no-repeat; background-position: center; background-size: cover;
}
/* "Knowledge is power" reference layout, in our palette: a circular photo on a soft brand-tint
   blob, with a small solid-colour badge overlapping its top-right corner — in place of the
   reference's second overlapping photo (we only have one real photo per sector) and its "20+
   Years of Experience" stat (unverified for Bizacharya), the badge instead names the sector. */
.about-split__media { position: relative; max-width: 380px; margin: 0 auto; aspect-ratio: 1; }
/* Flush with the container's left edge on desktop, so the circle lines up with the page-banner
   heading above instead of floating indented in the middle of its column. */
@media (min-width: 992px) { .about-split__media { margin: 0; } }
/* Phones: shrink the circle so its tint halo and badge stay inside the page gutters. */
@media (max-width: 575.98px) {
  .about-split__media { max-width: calc(100% - 3.5rem); }
  .about-split__badge { width: 104px; height: 104px; top: -.75rem; right: -.75rem; padding: .75rem; font-size: .75rem; }
  .about-split__badge .icon { width: 22px; height: 22px; }
}
.about-split__blob {
  position: absolute; inset: -8%; z-index: 0; border-radius: 50%;
  background: linear-gradient(155deg, rgba(7, 87, 154, .12) 0%, rgba(26, 154, 140, .16) 100%);
}
.about-split__photo {
  position: relative; z-index: 1; width: 100%; height: 100%; margin: 0; border-radius: 50%; overflow: hidden;
  border: 6px solid #fff; box-shadow: 0 30px 60px -30px rgba(10, 37, 64, .4);
}
.about-split__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-split__badge {
  position: absolute; z-index: 2; top: -1rem; right: -1rem; width: 128px; height: 128px; border-radius: 50%;
  background: var(--primary); color: #fff; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: .35rem; padding: 1rem;
  box-shadow: 0 20px 40px -16px rgba(7, 87, 154, .55); font-weight: 600; font-size: .78rem; line-height: 1.25;
  animation: about-split-badge-float 3.4s ease-in-out infinite;
}
.about-split__badge .icon { width: 26px; height: 26px; }
/* Small, slow bob — a "minor" idle motion, not an attention-grabbing bounce. */
@keyframes about-split-badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.checklist { display: grid; gap: .6rem; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .95rem; color: var(--ink); }
.checklist .icon { width: 20px; height: 20px; color: var(--brand); flex: none; margin-top: .15rem; }
/* Linked variant (Opportunity page "Our Services"): whole row is the link to the matching service page */
.checklist--links li { padding: 0; }
.checklist--links a { display: flex; gap: .75rem; align-items: flex-start; width: 100%; padding: .9rem 1rem; color: inherit; text-decoration: none; border-radius: inherit; transition: background .2s var(--ease), color .2s var(--ease); }
.checklist--links a span { flex: 1; }
.checklist--links .checklist__go { color: var(--muted); opacity: 0; transform: translateX(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease), color .2s var(--ease); }
.checklist--links li { transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.checklist--links li:hover { border-color: var(--brand); box-shadow: 0 10px 24px -16px rgba(7, 87, 154, .45); transform: translateY(-1px); }
.checklist--links a:hover, .checklist--links a:focus-visible { color: var(--brand); }
.checklist--links a:hover .checklist__go, .checklist--links a:focus-visible .checklist__go { opacity: 1; transform: none; color: var(--brand); }
.checklist--links a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: none) { .checklist--links .checklist__go { opacity: 1; transform: none; } }
.tiles { display: flex; flex-wrap: wrap; gap: .6rem; }
.tiles li { display: inline-flex; align-items: center; gap: .6rem; padding: .65rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 500; font-size: .9rem; color: var(--ink); }
.tiles .icon { width: 18px; height: 18px; color: var(--brand-2-ink); flex: none; }
.offer-list { display: grid; gap: .75rem; grid-template-columns: 1fr; }
.offer-list li {
  position: relative; display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font-weight: 500; font-size: .95rem; color: var(--ink); overflow: hidden; isolation: isolate;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), border-color .35s, box-shadow .45s cubic-bezier(.22, .61, .36, 1), color .3s;
}
.offer-list li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--surface), #fff); opacity: 0; transform: translateX(-12%); transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1); }
.offer-list li:hover { transform: translateY(-4px); border-color: rgba(7, 87, 154, .35); box-shadow: 0 16px 32px -20px rgba(10, 37, 64, .35); color: var(--primary); }
.offer-list li:hover::before { opacity: 1; transform: translateX(0); }
.offer-list .card-x__icon { margin: 0; width: 40px; height: 40px; transition: background .35s cubic-bezier(.22, .61, .36, 1), color .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.offer-list li:hover .card-x__icon { background: var(--primary); color: #fff; transform: scale(1.08); }
.offer-list .card-x__icon .icon { width: 18px; height: 18px; }
@media (min-width: 768px) { .offer-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .offer-list--3 { grid-template-columns: repeat(3, 1fr); } }
.statement { text-align: center; }
.statement p { font-weight: 500; font-size: clamp(1.35rem, 2.6vw, 2rem); letter-spacing: -0.02em; color: #fff; max-width: 820px; margin: 0 auto 1.75rem; line-height: 1.3; }
.statement .btn--accent { background: #fff; color: var(--black); border-color: #fff; }
.statement .btn--accent:hover { color: var(--black); }
.impact { position: relative; padding: 2.25rem 2.5rem; background: var(--surface); border-left: 3px solid var(--brand-2); border-radius: 0 var(--radius) var(--radius) 0; }
.impact p { font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing: -0.015em; color: var(--black); margin: 0; line-height: 1.45; }
.notice { display: flex; gap: .85rem; padding: 1rem 1.25rem; margin: 1.5rem 0; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); background: var(--surface); font-size: .95rem; }
.notice .icon { width: 20px; height: 20px; color: var(--black); flex: none; margin-top: .15rem; }
.notice p { margin: 0; }
.related { display: grid; gap: .75rem; grid-template-columns: 1fr; }
.related a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 500; font-size: .9rem; color: var(--ink); transition: border-color .2s, color .2s; }
.related a:hover { border-color: var(--primary); color: var(--primary); }
.related a .icon { width: 16px; height: 16px; flex: none; }
@media (min-width: 576px) { .related { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .related { grid-template-columns: repeat(3, 1fr); } }
.cta-band { background: var(--black); color: #fff; }
.cta-band .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cta-band h2 { color: #fff; margin: 0; max-width: 620px; }
.cta-band p { color: var(--on-dark); margin: .4rem 0 0; }
.cta-band .btn--light { background: #fff; color: var(--black); }
.cta-band .btn--white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.cta-band .btn--white:hover { color: #fff; }
.article { max-width: 820px; }
.article p, .article li { font-size: 1.05rem; }
.article ul { padding-left: 1.25rem; list-style: disc; margin-bottom: 1.25rem; }
/* .checklist rows carry their own icon bullet and box styling — undo the plain-bullet .article ul
   defaults above so the two don't stack (disc marker + checkmark icon, extra left padding). */
.article .checklist { list-style: none; padding-left: 0; margin-bottom: 1.25rem; }
.article .checklist li { font-size: .95rem; }
.article h2 { margin-top: 2.25rem; }
.article h3 { margin-top: 1.75rem; }
.article > *:first-child { margin-top: 0; }
/* Editorial full-bleed hero: one photo carries the back-link, tags, title and meta, instead of a
   flat navy title band sitting above a separate placeholder image. A bottom-weighted scrim keeps
   the overlaid text readable over any photo without flattening the image with a flat dark fill. */
.detail-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(420px, 46vw, 580px); }
.detail-hero__media { position: absolute; inset: 0; margin: 0; z-index: -2; border-radius: 0; aspect-ratio: auto; }
.detail-hero__media:not(.ph--none) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 37, 64, .1) 0%, rgba(10, 37, 64, .35) 45%, rgba(10, 37, 64, .94) 100%);
}
.detail-hero__content { position: relative; z-index: 1; padding: clamp(3rem, 9vw, 5.5rem) 0 clamp(2.25rem, 4vw, 3rem); color: #fff; }
.detail-hero__content .back-link { color: rgba(255, 255, 255, .78); }
.detail-hero__content .back-link:hover { color: #fff; }
.detail-hero__content .tag { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.detail-hero__content h1 { color: #fff; max-width: 22ch; margin: 0 0 1rem; }
.detail-hero__content .meta-row { color: rgba(255, 255, 255, .82); margin: 0; }
.detail-hero__content .meta-row .icon { color: rgba(255, 255, 255, .85); }
.meta-row { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin: 1.25rem 0; color: var(--muted); font-size: .95rem; }
.meta-row span { display: inline-flex; align-items: center; gap: .5rem; }
.meta-row .icon { width: 18px; height: 18px; color: var(--black); }
/* Lead paragraph reads as a pull quote — a quiet editorial flourish at the top of the article. */
.article .lead { padding-left: 1.25rem; border-left: 3px solid var(--brand-2); font-size: 1.2rem; color: var(--ink); }
.share { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.share span { font-weight: 500; font-size: .875rem; color: var(--ink); margin-right: .5rem; }
.share a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); }
.share a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.share .icon { width: 16px; height: 16px; }
.sidebar-card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; }
.sidebar-card li { padding: .75rem 0; border-top: 1px solid var(--line); }
.sidebar-card li:first-child { border-top: 0; padding-top: 0; }
.sidebar-card a { color: var(--ink); font-weight: 500; font-size: .92rem; display: block; }
.sidebar-card a:hover { color: var(--brand); }
.sidebar-card small { color: var(--muted); font-size: .78rem; }
.detail-cta-card { background: linear-gradient(165deg, #fff 0%, var(--surface) 100%); border: 1px solid var(--line); border-top: 3px solid var(--brand-2); box-shadow: 0 30px 50px -34px rgba(10, 37, 64, .3); }
.detail-cta-card .card-x__icon { margin-bottom: 1.1rem; }
/* Label/value facts (event date, venue…) — same divider rhythm as .sidebar-card li, but a
   stacked strong+span instead of a link, so it reads as reference info, not a nav list. */
.fact-list li { display: flex; gap: .75rem; align-items: flex-start; }
.fact-list .icon { width: 18px; height: 18px; color: var(--brand-2-ink); margin-top: .15rem; flex: none; }
.fact-list strong { display: block; font-size: .75rem; font-weight: 500; color: var(--muted); margin-bottom: .3rem; }
.fact-list span { display: block; font-size: .92rem; color: var(--ink); }
.sidebar-card > ul + .btn, .sidebar-card > ul + [data-register-cta] { margin-top: 1.25rem; }
.sidebar-card > [data-register-cta] + .btn { margin-top: .75rem; }
/* Gallery now lives in its own full-width section below the article/sidebar row, so it can be
   centred on the page instead of pinned to the left inside the narrower article column. */
.gallery-section { max-width: 900px; margin: 0 auto; text-align: center; }
.gallery-section h2 { margin-bottom: 1.5rem; }
.gallery .swiper-slide .ph { aspect-ratio: 16 / 9; border-radius: var(--radius); }
.gallery-thumbs { margin-top: .75rem; }
.gallery-thumbs .swiper-slide { width: 120px; cursor: pointer; opacity: .5; transition: opacity .2s; }
.gallery-thumbs .swiper-slide-thumb-active { opacity: 1; }
.gallery-thumbs .ph { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); }
.gallery-thumbs .ph .ph__label { display: none; }
.gallery__video { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--black); display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
.gallery__video .icon { fill: currentColor; stroke: none; margin-left: 3px; }
.gallery__nav { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem; }
.sticky-cta { position: sticky; top: calc(var(--header-h) + 1rem); }

/* ---------- Service detail pages: one reading column + a sticky sidebar ----------
   The intro used to sit in a 7/5 split whose right-hand 5 columns held nothing but a
   no-image.svg placeholder. The sidebar puts real navigation and a contact route in that
   space instead, and keeps them in view for the whole scroll. */
.svc__layout { display: grid; gap: clamp(2.25rem, 4vw, 3rem); align-items: start; }
@media (min-width: 992px) {
  .svc__layout { grid-template-columns: minmax(0, 1fr) 332px; gap: clamp(2.5rem, 4.5vw, 4.5rem); }
  /* sticky lives on the wrapper, never on a [data-reveal] element — its translateY would
     create a containing block and silently kill the stickiness. */
  .svc__side { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
.svc__block { margin-top: clamp(2rem, 4vw, 3rem); }
.svc__block h2 { margin-bottom: 1.2rem; }
.svc__side { display: grid; gap: 1.25rem; align-content: start; }

.side-nav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.35rem 1.4rem; }
.side-nav__title { font-size: 1.05rem; margin-bottom: .9rem; }
.side-nav ul { display: grid; gap: .3rem; }
.side-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem .85rem; border-radius: var(--radius-sm); background: #fff; border: 1px solid transparent;
  font-size: .9rem; font-weight: 500; line-height: 1.35; color: var(--text);
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.side-nav a .icon { width: 15px; height: 15px; flex: none; opacity: .45; transition: transform .2s var(--ease), opacity .2s; }
.side-nav a:hover { color: var(--primary); border-color: var(--line); }
.side-nav a:hover .icon { transform: translateX(3px); opacity: 1; }
.side-nav [aria-current="page"] { background: var(--black); color: #fff; font-weight: 600; }
.side-nav [aria-current="page"]:hover { color: #fff; border-color: var(--black); }
.side-nav [aria-current="page"] .icon { opacity: 1; }

.side-cta {
  border-radius: var(--radius-lg); padding: 1.5rem 1.4rem; color: #fff;
  background: linear-gradient(150deg, var(--black) 0%, #0D3358 58%, var(--primary) 100%);
}
.side-cta__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; margin-bottom: .9rem; color: #4FC3B5;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
}
.side-cta__icon .icon { width: 20px; height: 20px; }
.side-cta__title { color: #fff; font-size: 1.1rem; margin-bottom: .4rem; }
.side-cta p { color: var(--on-dark); font-size: .88rem; margin-bottom: 1.15rem; }
.side-cta .btn { width: 100%; }
.side-cta__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; color: #4FC3B5; font-weight: 600; font-size: .88rem; }
.side-cta__link:hover { color: #fff; }
.side-cta__link .icon { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.side-cta__link:hover .icon { transform: translateX(3px); }

/* --- Service page polish: the body was a flat white field of text, cards and a pale quote --- */

/* Soft brand washes so the section reads as a designed field rather than bare background. */
.svc { position: relative; overflow: hidden; isolation: isolate; }
.svc::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 45% at 80% 0%, rgba(26, 154, 140, .09) 0%, rgba(26, 154, 140, 0) 70%),
    radial-gradient(48% 40% at 0% 14%, rgba(7, 87, 154, .075) 0%, rgba(7, 87, 154, 0) 70%);
}

/* Lead gets a gradient rule so the opening statement carries weight. */
.svc__main .lead { position: relative; padding-left: 1.3rem; color: var(--black); }
.svc__main .lead::before {
  content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-2), var(--primary));
}

/* Short accent under each section heading. */
.svc__block h2 { position: relative; padding-bottom: .7rem; }
.svc__block h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-2), var(--primary));
}

/* Ghosted index on each offering — pure CSS counter, so it adds rhythm without inventing copy. */
.svc .offer-list { counter-reset: offer; }
.svc .offer-list li { counter-increment: offer; }
.svc .offer-list li::after {
  content: counter(offer, decimal-leading-zero);
  /* sits fully inside the card — the li clips overflow, so a bleed would crop mid-digit */
  position: absolute; right: .8rem; bottom: .35rem; z-index: -1; pointer-events: none;
  font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.05em;
  color: rgba(7, 87, 154, .07); transition: color .35s var(--ease);
}
.svc .offer-list li:hover::after { color: rgba(7, 87, 154, .13); }

/* Impact quote promoted from a pale bordered box to the page's focal point. The serif quote mark
   is the same device .story-card__mark uses on the homepage. */
.svc .impact {
  position: relative; overflow: hidden; isolation: isolate; border: 0;
  padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.75rem, 3.5vw, 3rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--black) 0%, #0D3358 55%, var(--primary) 100%);
  box-shadow: 0 26px 52px -30px rgba(10, 37, 64, .6);
}
.svc .impact::before {
  content: "\201C"; position: absolute; z-index: -1; top: -.34em; right: .14em; pointer-events: none;
  font-family: Georgia, "Times New Roman", serif; font-size: 11rem; line-height: 1;
  color: rgba(79, 195, 181, .17);
}
/* Label lives inside the panel now. Scoped to the blockquote so the white quote colour does not
   also claim the label — .svc .impact p would outrank .svc .impact__label on specificity. */
.svc .impact blockquote p { color: #fff; }
.svc .impact__label {
  margin: 0 0 .9rem; font-size: var(--font-small); font-weight: 500;
  letter-spacing: .02em; color: #4FC3B5;
}
.mobile-bar { display: none; }
@media (max-width: 991.98px) {
  .mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 790; padding: .75rem 1rem; background: #fff; border-top: 1px solid var(--line); }
  .mobile-bar .btn { width: 100%; }
  body.has-mobile-bar { padding-bottom: 76px; }
  body.has-mobile-bar .fab { transform: translateY(-64px); }
  body.has-mobile-bar .fab:hover { transform: translateY(-66px); }
}
/* Learning hub */
.premium { background: var(--black); }
.premium__inner { position: relative; display: grid; gap: 1.5rem; padding: clamp(2rem, 4vw, 3rem); border-radius: var(--radius); }
.premium h2 { color: #fff; margin-bottom: .5rem; }
.premium p { color: var(--on-dark); margin: 0; max-width: 600px; }
.premium .eyebrow { color: rgba(255, 255, 255, .6) !important; }
.premium .btn--accent { background: #fff; color: var(--black); border-color: #fff; }
.premium .btn--accent:hover { color: var(--black); }
@media (min-width: 992px) { .premium__inner { grid-template-columns: 1fr auto; align-items: center; } }
.hub-toggle { display: inline-flex; padding: 4px; background: var(--surface); border-radius: var(--radius-sm); }
.hub-toggle__wrap { display: flex; justify-content: center; margin-bottom: 2.5rem; }
.hub-toggle__btn { padding: .65rem 1.3rem; border: 0; border-radius: 5px; background: transparent; font-weight: 500; font-size: .9rem; color: var(--ink); transition: background .2s, color .2s; }
.hub-toggle__btn[aria-pressed="true"] { background: var(--primary); color: #fff; }
[data-hub-panel][hidden] { display: none; }
.coming-soon { text-align: center; max-width: 640px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem); background: #fff; border: 1px dashed #A1A1AA; border-radius: var(--radius); }
.coming-soon .card-x__icon { margin: 0 auto 1.25rem; width: 60px; height: 60px; }
.coming-soon h2 { font-size: 1.6rem; }
.coming-soon .ml { display: block; color: var(--brand); font-weight: 500; margin-bottom: .5rem; }
/* Phase 2 placeholders */
.phase-note { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.25rem; background: #FFF7E6; border: 1px solid #F0C36D; border-radius: var(--radius); color: #5A3E00; font-size: .92rem; margin-bottom: 1.5rem; }
.phase-note .icon { width: 20px; height: 20px; flex: none; margin-top: .15rem; }
.phase-note p { margin: 0; }
.auth-card { max-width: 600px; margin: 0 auto; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: 4px; background: var(--surface); border-radius: var(--radius-sm); margin-bottom: 1.5rem; }
.tabs__btn { padding: .75rem 1rem; border: 0; border-radius: 5px; background: transparent; font-weight: 500; font-size: .9rem; color: var(--ink); transition: background .2s, color .2s; }
.tabs__btn[aria-selected="true"] { background: var(--primary); color: #fff; }
.tab-panel[hidden] { display: none; }
.tab-panel { animation: modalIn .3s var(--ease); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset[disabled] { opacity: .6; }
.module-list { display: grid; gap: .75rem; grid-template-columns: 1fr; }
.module-list li { display: flex; gap: .85rem; align-items: center; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 500; font-size: .92rem; color: var(--ink); }
.module-list .card-x__icon { margin: 0; width: 40px; height: 40px; }
.module-list .card-x__icon .icon { width: 18px; height: 18px; }
.module-list .tag { margin-left: auto; }
@media (min-width: 576px) { .module-list { grid-template-columns: repeat(2, 1fr); } }
/* Careers */
/* Career listing rows, following the Kinsey careers pattern: full-width rows separated by a
   hairline rather than boxed cards, a meta pair on the left, and a corner-cut arrow button that
   fills on hover while a rule wipes across the full width of the row. */
/* Held to a readable measure and centred — at the full 1440px container the title and the arrow
   ended up a long way apart with dead space between them. */
.job-list { max-width: 1000px; margin-inline: auto; counter-reset: jobrow; }
.job-row { position: relative; isolation: isolate; counter-increment: jobrow; }
/* Soft tint sweeping in from the left on hover */
.job-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--surface) 0%, rgba(242, 247, 251, 0) 76%);
  opacity: 0; transform: translateX(-12px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.job-row:hover::before { opacity: 1; transform: none; }
.job-row__inner {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 2vw, 1.75rem);
  padding: clamp(1.35rem, 2.6vw, 1.9rem) clamp(.75rem, 1.5vw, 1.25rem);
  border-bottom: 1px solid var(--line);
}
/* Row index, generated from the counter so it renumbers itself as jobs are added or removed */
.job-row__inner::before {
  content: "0" counter(jobrow);
  flex: none; align-self: flex-start; padding-top: .15rem;
  font-size: .95rem; font-weight: 700; letter-spacing: .04em;
  color: var(--brand-2-ink); transition: color .25s var(--ease);
}
.job-row:hover .job-row__inner::before { color: var(--primary); }
.job-row:first-child .job-row__inner { border-top: 1px solid var(--line); }
.job-row__content { min-width: 0; flex: 1; }
.job-row__title { margin: 0 0 .55rem; transition: color .25s var(--ease); }
.job-row__title a { color: var(--black); }
/* stretched link: the whole row is the click target, the title stays the accessible one */
.job-row__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.job-row:hover .job-row__title, .job-row:hover .job-row__title a { color: var(--primary); }
.job-row__meta { display: flex; flex-wrap: wrap; gap: .45rem 1.5rem; }
.job-row__meta span { display: inline-flex; align-items: center; gap: .55rem; font-size: .95rem; color: var(--text); }
.job-row__meta .icon { width: 19px; height: 19px; color: var(--muted); flex: none; }
/* Kinsey's corner-cut button: border-radius: 20px 0 rounds only the TL and BR corners */
.job-row__go {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 20px 0;
  background: var(--surface); color: var(--primary);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.job-row__go .icon { width: 20px; height: 20px; }
.job-row:hover .job-row__go { background: var(--primary); color: #fff; transform: translateX(3px); }
/* rule wipes across on hover */
.job-row::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--black); transition: width .35s var(--ease);
}
.job-row:hover::after { width: 100%; }
@media (max-width: 575.98px) {
  .job-row__inner { gap: .85rem; padding-inline: .25rem; }
  .job-row__inner::before { font-size: .82rem; }
  .job-row__go { width: 46px; height: 46px; border-radius: 16px 0; }
  .job-row__meta { gap: .35rem 1rem; }
  .job-row__meta span { font-size: .88rem; }
}
.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.job-facts { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0 2rem; }
.job-fact { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.job-fact .card-x__icon { margin: 0; width: 44px; height: 44px; flex: none; }
.job-fact strong { display: block; font-size: .75rem; font-weight: 500; color: var(--muted); margin-bottom: .2rem; }
.job-fact__value { font-weight: 500; color: var(--black); }
@media (min-width: 576px) { .job-facts { grid-template-columns: repeat(2, 1fr); } }
.back-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; font-size: .9rem; color: var(--muted); margin-bottom: 1.25rem; }
.back-link:hover { color: var(--black); }
.back-link .icon { width: 16px; height: 16px; }
/* Minimal corner-ring accent on the section's light-blue backdrop — kept deliberately sparse so
   it reads as texture, not decoration competing with the cards. */
#associate { position: relative; overflow: hidden; isolation: isolate; }
#associate::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("../img/associate-bg.svg");
  background-repeat: no-repeat; background-position: center; background-size: cover;
}
.associate-intro { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.associate-intro .lead { margin: 0 auto; }
.associate-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-bottom: 2.75rem; }
.associate-card { padding: 1.75rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 18px 40px -28px rgba(10, 37, 64, .25); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.associate-card:hover { border-color: #A1A1AA; box-shadow: 0 24px 48px -24px rgba(10, 37, 64, .3); transform: translateY(-4px); }
.associate-card__icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: rgba(26, 154, 140, .12); color: var(--brand-2-ink); margin-bottom: 1.1rem; }
.associate-card__icon .icon { width: 22px; height: 22px; }
.associate-card h3 { color: var(--ink); margin-bottom: .4rem; }
.associate-card p { color: var(--muted); font-size: .9rem; margin: 0; }
.associate-cta { text-align: center; }
@media (min-width: 576px) { .associate-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .associate-grid { grid-template-columns: repeat(4, 1fr); } }
/* Contact — modern take on the Kinsey (ThemeForest) consulting-theme contact pattern: soft
   gradient glows instead of flat fills, floating/overlapping cards, deep soft shadows instead of
   hairline borders, and underlined form fields. Glows are native CSS radial-gradient layers, not
   baked into SVGs — a gradient-filled SVG shape rasterizes with a hard rectangular edge when used
   as a CSS background-image (confirmed earlier), so every glow here is plain CSS. Same brand
   palette as the rest of the site (navy/blue/teal) in place of the reference's indigo. */
.eyebrow-arrow { display: inline-flex; align-items: center; gap: .4rem; }
.eyebrow-arrow .icon { width: 16px; height: 16px; color: var(--brand-2); flex: none; }
.heading-soft { display: block; color: var(--muted); font-weight: inherit; }
.contact-facts-band .heading-soft { color: rgba(255, 255, 255, .55); }

/* Photo + form card — glassmorphism: one continuous card, a full-bleed photo with a frosted,
   blurred glass panel over the form half, and a full-width submit bar spanning the whole card
   (photo + panel) at the bottom. Modelled on a reference Kinsey (ThemeForest) contact-form shot. */
.contact-card { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(10, 37, 64, .35); }
/* "#enquiry" links land here — clear the sticky header with some breathing room */
#enquiry, .contact-card { scroll-margin-top: calc(var(--header-h) + 24px); }
.contact-card--glass { min-height: 620px; }
.contact-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.contact-card__glass-panel {
  position: relative; z-index: 1; width: 100%; min-height: 100%; margin-left: auto;
  background: linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, rgba(10, 37, 64, .72) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border-left: 1px solid rgba(255, 255, 255, .18);
  padding-bottom: 5.5rem;
}
.contact-card__form-inner { padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 2.75rem) .5rem; }
.contact-card__form-inner h2 { margin-bottom: 0; color: #fff; }
.contact-card__glass-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.contact-card__glass-head .eyebrow { margin-bottom: 0; font-size: 1rem; color: #4FC3B5; }
.contact-card__sparkle { width: 22px; height: 22px; color: rgba(255, 255, 255, .45); }
.contact-card__submit { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.contact-card__submit .btn { width: 100%; border-radius: 0; justify-content: space-between; padding: 1.15rem 2rem; }

/* Glass fields: boxed with a translucent white border instead of underlined, for legibility over
   a busy photo — the sitewide .field/.field__error contract is untouched, only colours change. */
.contact-card--glass .field { position: relative; margin-bottom: 1.1rem; }
.contact-card--glass .field label, .contact-card--glass .field .field__label {
  display: block; font-size: .78rem; font-weight: 500; letter-spacing: .02em; color: rgba(255, 255, 255, .75); margin-bottom: .4rem;
}
.contact-card--glass .field input, .contact-card--glass .field select, .contact-card--glass .multiselect__toggle {
  background-color: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; color: #fff;
}
.contact-card--glass .field input::placeholder { color: rgba(255, 255, 255, .55); }
.contact-card--glass .field input:focus, .contact-card--glass .field select:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.contact-card--glass .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px;
}
.contact-card--glass .field select option { color: var(--ink); }
.contact-card--glass .field select:has(option[value=""]:checked) { color: rgba(255, 255, 255, .6); }
.contact-card--glass .field__error { color: #ffb4b4; }
.contact-card--glass .field__hint { color: rgba(255, 255, 255, .6); }
.contact-card--glass .multiselect__toggle > .icon { color: rgba(255, 255, 255, .75); }
.contact-card--glass .multiselect__chips { color: rgba(255, 255, 255, .55); }
/* Service dropdown on the glass card. The card clips its contents (overflow:hidden, for the
   rounded photo) and the full-width submit bar sits above the glass panel, so a menu dropping
   downward was cut off and hidden behind "Send Message". Open it upward over the fields above
   instead, and give the options dark text — the glass form's white label colour made them
   invisible on the white menu. */
.contact-card--glass .multiselect__menu { top: auto; bottom: calc(100% + 6px); max-height: min(320px, 55vh); }
/* .field label (the glass form's label style) also matches these option labels — out-specify it */
.contact-card--glass .field label.multiselect__option {
  display: flex; align-items: center; gap: .65rem; color: var(--ink);
  font-size: .92rem; font-weight: 400; letter-spacing: 0; margin-bottom: 0;
}
.contact-card--glass .field label.multiselect__option--all { font-weight: 500; margin-bottom: .35rem; }
.contact-card--glass .field .multiselect__option input { background: none; border: 0; box-shadow: none; }
.contact-card--glass .multiselect__chips .chip { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }
.contact-card--glass .multiselect__placeholder { color: rgba(255, 255, 255, .6); }
@media (min-width: 992px) {
  .contact-card__glass-panel { width: 56%; }
}

/* Dark facts strip — gradient field + glows instead of a flat fill, chip-style facts. */
/* Full-bleed band (the <section> itself): square edges, no outer section padding — only its own
   inner breathing room, with the container aligning the content to the page grid. */
.contact-facts-band { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(155deg, var(--black) 0%, var(--black-2) 100%); color: var(--on-dark); border-radius: 0; padding: clamp(3rem, 5vw, 4.5rem) 0; }
.contact-facts-band::before {
  content: ""; position: absolute; z-index: -1; inset: -20% -10% auto auto; width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(26, 154, 140, .28) 0%, rgba(26, 154, 140, 0) 70%);
}
.contact-facts-band::after {
  content: ""; position: absolute; z-index: -1; inset: auto auto -30% -10%; width: 50%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(31, 109, 174, .22) 0%, rgba(31, 109, 174, 0) 70%);
}
.contact-facts-band__inner { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.contact-facts-band h2 { color: #fff; margin-bottom: 1rem; }
.contact-facts-band p { margin-bottom: 1.5rem; }
.contact-facts-band .eyebrow { color: #4FC3B5; }
.contact-facts-band .eyebrow-arrow .icon { color: #4FC3B5; }
.contact-facts { display: grid; gap: 1rem; grid-template-columns: 1fr; align-content: start; }
.contact-facts__item {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.contact-facts__item:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.contact-facts__item .card-x__icon { margin: 0; width: 44px; height: 44px; background: rgba(255, 255, 255, .1); color: #4FC3B5; flex: none; }
.contact-facts dt { font-size: .74rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: .2rem; }
.contact-facts dd { margin: 0; font-size: 1.05rem; font-weight: 500; color: #fff; line-height: 1.35; }
.contact-facts dd a { color: #fff; }
.contact-facts dd a:hover { color: #4FC3B5; }
@media (min-width: 768px) {
  .contact-facts-band__inner { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
}

.map { border-radius: 28px; overflow: hidden; border: 1px solid var(--line); height: clamp(320px, 42vw, 480px); box-shadow: 0 40px 70px -40px rgba(10, 37, 64, .25); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Contact page polish ---------- */
/* Field icons inside the glass form, with a teal focus glow */
.contact-card--glass .field__control { position: relative; }
.contact-card--glass .field__control > .icon {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 17px; height: 17px; color: rgba(255, 255, 255, .55); pointer-events: none; transition: color .25s var(--ease);
}
.contact-card--glass .field__control input { padding-left: 2.75rem; }
.contact-card--glass .field__control:focus-within > .icon { color: #4FC3B5; }
.contact-card--glass .field input:focus, .contact-card--glass .field select:focus, .contact-card--glass .multiselect__toggle[aria-expanded="true"] {
  border-color: #4FC3B5; background-color: rgba(255, 255, 255, .14); box-shadow: 0 0 0 3px rgba(79, 195, 181, .22);
}
.contact-card--glass .field.is-invalid input, .contact-card--glass .field.is-invalid select { border-color: #ff8a8a; }

/* "Prefer to talk?" — a frosted mini-card on the photo half (desktop only; below 992px the
   glass panel spans the whole card and would cover it) */
.contact-card__talk { display: none; }
@media (min-width: 992px) {
  .contact-card__talk {
    position: absolute; z-index: 1; left: clamp(1.5rem, 2.6vw, 2.5rem); bottom: calc(3.6rem + clamp(1.5rem, 2.6vw, 2.5rem));
    display: grid; gap: .55rem; width: min(40%, 300px); padding: 1.15rem 1.25rem;
    background: rgba(10, 37, 64, .45); border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px;
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .55);
  }
}
.contact-card__talk-k { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #4FC3B5; }
.contact-card__talk-tel { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.contact-card__talk-tel .icon { width: 18px; height: 18px; color: #4FC3B5; }
.contact-card__talk-tel:hover { color: #4FC3B5; }
.contact-card__talk-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem .9rem; border-radius: 999px;
  background: #25D366; color: #fff; font-size: .85rem; font-weight: 600; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-card__talk-wa .icon { width: 16px; height: 16px; }
.contact-card__talk-wa:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(37, 211, 102, .8); }

/* Contact details band: tiles lift and their icons light up on hover */
.contact-facts__item { transition: background .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease); }
.contact-facts__item:hover { transform: translateY(-3px); border-color: rgba(79, 195, 181, .45); }
.contact-facts__item .card-x__icon {
  border-radius: 12px; background: linear-gradient(135deg, rgba(79, 195, 181, .22), rgba(31, 109, 174, .22));
  transition: background .3s var(--ease), color .3s var(--ease), transform .35s var(--ease);
}
.contact-facts__item:hover .card-x__icon { background: #4FC3B5; color: var(--black); transform: scale(1.06); }

/* Map: soft dotted field, framed map, and a floating address card with directions */
.contact-map-sec { position: relative; isolation: isolate; background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); }
.contact-map-sec::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(7, 87, 154, .14) 1.1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%);
}
.map-wrap { position: relative; }
.map-wrap .map { padding: 8px; background: #fff; }
.map-wrap .map iframe { border-radius: 22px; }
.map-card {
  position: relative; z-index: 1; margin: -3rem 1rem 0; padding: 1.4rem 1.5rem;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(10, 37, 64, .45);
}
.map-card__icon {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: .9rem; border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--brand-2)); color: #fff; box-shadow: 0 12px 22px -12px rgba(7, 87, 154, .8);
}
.map-card__icon .icon { width: 22px; height: 22px; }
.map-card__k { margin: 0 0 .35rem; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-2-ink); }
.map-card__addr { margin: 0 0 1.2rem; font-style: normal; font-size: 1.02rem; font-weight: 500; line-height: 1.55; color: var(--black); }
.map-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem; }
.map-card__actions .btn .icon { width: 16px; height: 16px; }
.map-card__call { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .92rem; color: var(--ink); }
.map-card__call .icon { width: 16px; height: 16px; color: var(--brand-2); }
.map-card__call:hover { color: var(--primary); }
@media (min-width: 768px) {
  /* Right-hand side: Google's own place box occupies the embed's top-left corner */
  .map-card { position: absolute; right: clamp(1.5rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); width: 320px; margin: 0; }
}

/* About (editorial two-column intro, modelled on the approved reference layout) */
.about-hero { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.about-hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.about-hero__head { text-align: left; }
.about-hero__head h1 { margin: 1.1rem 0 1.25rem; }
.about-hero__head .lead { max-width: 480px; }
.about-hero__accent {
  display: flex; align-items: center; gap: .75rem; margin: 1.75rem 0 0;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.about-hero__accent span { width: 28px; height: 2px; background: var(--brand-2); flex: none; }

.about-hero__media { position: relative; }
.about-hero__shape {
  position: absolute; z-index: 0; top: -8%; right: -12%; width: 88%; height: 116%;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  background: linear-gradient(155deg, rgba(7, 87, 154, .1), rgba(26, 154, 140, .16));
  opacity: 0;
}
.about-hero__media.is-visible .about-hero__shape { opacity: 1; transition: opacity .9s var(--ease) .15s; }
.about-hero__media .ph--banner {
  position: relative; z-index: 1; aspect-ratio: 6 / 5; min-height: min(320px, 72vw); border-radius: 28px;
  box-shadow: 0 34px 64px -28px rgba(10, 37, 64, .38);
}
.about-hero__media .ph--banner img { width: 100%; height: 100%; object-fit: cover; }

.about-hero__badge {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: .7rem;
  background: #fff; border-radius: 14px; padding: .8rem 1.1rem; max-width: 230px;
  box-shadow: 0 18px 36px -18px rgba(10, 37, 64, .3); font-size: .85rem; font-weight: 600; color: var(--black);
}
.about-hero__badge-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px;
  border-radius: 50%; background: var(--surface); color: var(--primary);
}
.about-hero__badge-icon .icon { width: 18px; height: 18px; }
.about-hero__badge--top { top: -1.25rem; left: -1.25rem; }
.about-hero__badge--bottom { bottom: -1.25rem; right: -1.25rem; }

/* Entrance: head slides in from the left, the image fades in with a gentle scale — both driven
   by the generic [data-reveal] system; only the initial (pre-reveal) transform is customised here,
   the shared .is-visible end-state (transform: none) already comes from the base [data-reveal] rule. */
.about-hero__head[data-reveal] { transform: translateX(-28px); }
.about-hero__media[data-reveal] { transform: scale(.97); }

@media (min-width: 768px) {
  .about-hero__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .about-hero__badge { padding: .6rem .85rem; max-width: 168px; font-size: .78rem; gap: .5rem; }
  .about-hero__badge-icon { width: 30px; height: 30px; }
  .about-hero__badge-icon .icon { width: 15px; height: 15px; }
  .about-hero__badge--top { top: -.75rem; left: -.75rem; }
  .about-hero__badge--bottom { bottom: -.75rem; right: -.75rem; }
}
@media (max-width: 767.98px) {
  .about-hero__head .lead { max-width: none; }
  .about-hero__shape { display: none; }
  .about-hero__media { margin-top: .5rem; }
  .about-hero__badge { position: static; max-width: none; margin-top: .75rem; }
}

/* Our Journey: company-history timeline (About page). An editorial spine-and-marker layout —
   deliberately not a card/tile grid. Scoped to .our-journey / .timeline*, entirely separate from
   the homepage's entrepreneur-journey roadmap (.journey / .journey-map / .journey-stage). */

/* Brand arcs and dots sweeping into the bottom-right corner (transparent PNG over white).
   Full-width on desktop; kept at a minimum width on phones so the arcs stay legible there. */
.our-journey {
  background: #fff url("../img/about/shape1.png") right bottom / max(100%, 720px) auto no-repeat;
}

/* --tl-value is the headline size; the marker is centred on that headline's first line.
   The spine runs from the first marker's centre to the last marker's centre — initCompanyTimeline()
   measures those and writes --line-top / --line-len (the fallbacks cover the no-JS case). */
.timeline { --tl-value: clamp(1.6rem, 2.2vw, 2.1rem); --tl-dot: 16px; position: relative; max-width: 860px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.timeline__list { position: relative; list-style: none; margin: 0; padding: 0; }
.timeline__list::before, .timeline__list::after {
  content: ""; position: absolute; z-index: 0; width: 2px;
  left: calc(var(--tl-dot) / 2 - 1px);
  top: var(--line-top, calc(var(--tl-value) * .55));
  height: var(--line-len, calc(100% - var(--tl-value)));
}
.timeline__list::before { background: var(--line); }
.timeline__list::after {
  background: linear-gradient(180deg, var(--primary), var(--brand-2));
  transform: scaleY(var(--progress, 0)); transform-origin: top center; transition: transform .6s var(--ease);
}
.timeline__list.no-anim::after { transition: none; }

.timeline__item { position: relative; padding-left: 2.75rem; padding-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.timeline__item:last-child { padding-bottom: 0; }
/* z-index keeps the marker above the spine (the progress line is ::after, so it would otherwise paint on top) */
.timeline__marker {
  position: absolute; z-index: 2; left: 0; top: calc(var(--tl-value) * .55 - var(--tl-dot) / 2);
  width: var(--tl-dot); height: var(--tl-dot); border-radius: 50%;
  background: #fff; border: 2px solid var(--line); box-sizing: border-box;
  transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.timeline__content { position: relative; z-index: 1; }
.timeline__item.is-in .timeline__marker { border-color: var(--brand-2); background: var(--brand-2); box-shadow: 0 0 0 5px rgba(26, 154, 140, .15); }

.timeline__content { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.timeline__item.is-in .timeline__content { opacity: 1; transform: none; }

.timeline__value { display: block; margin-bottom: .5rem; font-size: var(--tl-value); font-weight: 600; letter-spacing: -0.03em; color: var(--black); line-height: 1.1; }
.timeline__content p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; max-width: 460px; }
.timeline__item--today .timeline__value, .timeline__item--today .timeline__marker { color: var(--brand-2); }
.timeline__item--today .timeline__marker { border-color: var(--brand-2); }

/* Desktop: zigzag either side of a centred spine — more editorial than a single left rail */
@media (min-width: 768px) {
  .timeline__list::before, .timeline__list::after { left: calc(50% - 1px); }
  .timeline__marker { left: calc(50% - var(--tl-dot) / 2); }
  .timeline__item { padding-left: 0; padding-bottom: clamp(3rem, 5vw, 4rem); }
  .timeline__content { width: calc(50% - 3rem); }
  .timeline__item:nth-child(odd) .timeline__content { margin-right: auto; text-align: right; }
  .timeline__item:nth-child(even) .timeline__content { margin-left: auto; text-align: left; }
  .timeline__item:nth-child(odd) .timeline__content p { margin-left: auto; }
  .timeline__item:nth-child(even) .timeline__content p { margin-right: auto; }
}

/* Eyebrow and heading now sit inside the left column, so the 900px cap that kept them readable
   at full container width no longer applies — the column already constrains them. */
.know .eyebrow { margin-bottom: .45rem; }
.know h2 { max-width: none; margin-bottom: .8rem; }
/* center, not start: the text column is much taller than the single image, so anchoring both to
   the top left the image stranded against a long run of copy. */
.know__grid { display: grid; gap: 2.5rem; align-items: center; }
.know__lead { font-size: var(--font-lead); line-height: 1.6; color: var(--black); }
.know__text { color: var(--muted); font-size: .98rem; }
.know__empower-label { margin-top: 1.5rem; }
.know__audience { margin-bottom: 0; }
/* Divider setting the lead apart from the supporting copy, as in the reference layout. */
.know__rule { border: 0; border-top: 1px solid var(--line); margin: clamp(1.4rem, 2.5vw, 2rem) 0; }
/* Dark inline CTA closing the column — a small solid block against an otherwise light section. */
.know__cta {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: .95rem 1.6rem;
  border-radius: var(--radius); background: var(--black); color: #fff; font-size: .95rem;
}
.know__cta a { display: inline-flex; align-items: center; gap: .35rem; color: #4FC3B5; font-weight: 600; }
.know__cta a:hover { color: #fff; }
.know__cta .icon { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.know__cta a:hover .icon { transform: translateX(3px); }

.know__media { position: relative; }
.know__shape {
  position: absolute; z-index: 0; top: -10%; left: -12%; width: 70%; height: 60%;
  border-radius: 45% 55% 60% 40% / 55% 40% 60% 45%;
  background: linear-gradient(155deg, rgba(7, 87, 154, .1), rgba(26, 154, 140, .14));
  opacity: 0;
}
.know__media.is-visible .know__shape { opacity: 1; transition: opacity .9s var(--ease) .15s; }
/* Single image, as in the reference layout. It sits beside a tall text column, so a portrait-ish
   crop carries the height far better than the source's native 4:3 landscape. */
.know__photos { position: relative; z-index: 1; }
.know__photos .ph { aspect-ratio: 4 / 4.2; border-radius: 18px; box-shadow: 0 26px 50px -28px rgba(10, 37, 64, .38); }
.know__photos .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .6s var(--ease); }
.know__photos .ph:hover img { transform: scale(1.05); }
@media (max-width: 991.98px) { .know__photos .ph { aspect-ratio: 16 / 10; } }

.know__badge {
  position: relative; z-index: 2; display: flex; align-items: center; gap: .7rem; margin-top: -1.5rem; margin-left: 1.5rem;
  max-width: 260px; background: #fff; border-radius: 14px; padding: .8rem 1.1rem;
  box-shadow: 0 18px 36px -18px rgba(10, 37, 64, .3); font-size: .85rem; font-weight: 600; color: var(--black);
}
.know__badge-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px;
  border-radius: 50%; background: var(--surface); color: var(--primary);
}
.know__badge-icon .icon { width: 18px; height: 18px; }

@media (min-width: 992px) { .know__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.team-card { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(10, 37, 64, .3); }
.team-card .ph { border-radius: 0; }
.team-card__avatar {
  position: relative; width: 100%; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--primary) 0%, var(--brand-2) 100%); overflow: hidden;
}
.team-card__avatar::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .1) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
.team-card__avatar img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.team-card__initials {
  position: relative; font-size: clamp(4rem, 12vw, 6rem); font-weight: 700; color: #fff; letter-spacing: -0.03em;
  font-variant-numeric: normal;
}
.team-card__label { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; background: #fff; border-radius: 12px; padding: 1rem; text-align: center; box-shadow: 0 14px 30px -18px rgba(10, 37, 64, .4); }
.team-card__label strong { display: block; font-weight: 600; color: var(--black); }
.team-card__label span { color: var(--muted); font-size: .9rem; }

/* About page's closing CTA — the only place .cta-card is used, so it carries a richer treatment
   than a generic panel. It sits between a white section and the navy footer, so it stays light:
   a dark panel here would merge straight into the footer. */
.cta-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(2.75rem, 5.5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem); text-align: center;
}
/* Two washes pulling the brand blue down from the top and the teal up from the bottom-right,
   so the field has direction instead of reading as a flat grey box. */
.cta-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 70% at 50% 0%, rgba(7, 87, 154, .10) 0%, rgba(7, 87, 154, 0) 70%),
    radial-gradient(42% 58% at 92% 100%, rgba(26, 154, 140, .14) 0%, rgba(26, 154, 140, 0) 70%);
}
/* Concentric rings bleeding off the top-left corner (box-shadow spread draws the outer rings). */
.cta-card::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 260px; height: 260px; border-radius: 50%; top: -150px; left: -90px;
  border: 1px solid rgba(7, 87, 154, .14);
  box-shadow: 0 0 0 38px rgba(7, 87, 154, .05), 0 0 0 39px rgba(7, 87, 154, .09);
}
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { margin-bottom: .75rem; }
.cta-card p { color: var(--muted); max-width: 560px; margin: 0 auto 1.9rem; }

/* Stage chain. The numbers carry the sequence, so the chips can wrap freely — a drawn connector
   line would break awkwardly across rows at narrow widths. */
.cta-chain {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .65rem; max-width: 880px; margin: 0 auto 2.25rem;
}
.cta-chain li {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem 1rem .45rem .45rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: .85rem; font-weight: 500; color: var(--ink); white-space: nowrap;
  box-shadow: 0 8px 18px -14px rgba(10, 37, 64, .45);
}
.cta-chain__num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-2-ink); color: #fff; font-size: .72rem; font-weight: 700;
}
@media (max-width: 575.98px) {
  .cta-chain { gap: .5rem; }
  .cta-chain li { font-size: .8rem; padding: .4rem .85rem .4rem .4rem; }
  .cta-chain__num { width: 23px; height: 23px; font-size: .68rem; }
}


/* ---------- 19. Motion ---------- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
/* Safety net: .is-visible is added by JS, so without scripting every revealed block — which is
   most of the page — would stay at opacity 0 and the site would render blank. */
@media (scripting: none) {
  [data-reveal] { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .about-hero__head, .about-hero__media { opacity: 1; transform: none; }
  .about-hero__shape { opacity: 1; }
  .vm2__visual, .vm2__seg, .vm2__core, .vm2__dot, .vm2__panel { opacity: 1; transform: none; }
  .vm2__connector-line { stroke-dashoffset: 0; }
  .vm2__connector-node { opacity: 1; }
  .journey-stage__photo, .journey-stage__body { opacity: 1; transform: none; }
  .journey-stage__num { opacity: 0; }
  .journey-map__list::after { clip-path: none; transition: none; }
  .timeline__content { opacity: 1; transform: none; }
  .timeline__list::after { transform: none; }
  .hero__bg { opacity: 1; animation: none; transform: none; }
  .vm2-sec::after { opacity: 1; animation: none; transform: none; }
  .hero h1, .hero__sub, .hero p.lead, .hero .btn-group, .hero__stats { opacity: 1; animation: none; transform: none; }
  .row-item__glyph, .row-item__image { opacity: 1; transform: none; }
  .row-item__glyph .icon { transform: none; }
  .row-item__image img { transform: none; }
  .row-list--glyph .row-item > div { opacity: 1; transform: none; }
  .row-list--glyph .row-item__icon, .row-item__more-text { opacity: 1; }
  .marquee__track { animation: none; transform: none; }
  .story-deck__card { transition: none; }
  .story-deck__content { transition: none; }
  .story-deck__track.is-swapping .story-deck__content { transform: none; }
  .listing__list::after { transform: none; }
  .listing__list > li::before { transform: translate(-50%, -50%) scale(1); }
}

/* ---------- Cursor ---------- */
/* Standard browser cursors everywhere: the hand pointer on anything clickable, arrow elsewhere. */
@media (hover: hover) and (pointer: fine) {
  a[href],
  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .file-field__btn {
    cursor: pointer;
  }
  .btn[disabled], button:disabled, input[type="submit"]:disabled, input[type="button"]:disabled {
    cursor: not-allowed;
  }
}

/* ---------- 19c. Event detail page ----------
   Scoped to event-detail.html. Everything here is built from the existing tokens (--primary,
   --brand-2, --black, --surface, --line, --radius, --ease) so the page reads as part of the same
   system, not a one-off theme. Layout notes worth knowing before editing:
   - The fact strip is pulled up over the hero seam with a negative margin; the hero reserves the
     matching space with extra bottom padding so nothing is ever covered.
   - .ev-nav sticks below the site header, which is itself sticky, hence the --header-h offset.
   - Reveal/stagger come from the shared [data-reveal] system; nothing here re-implements it. */

/* --- Hero --- */
.ev-hero {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end;
  min-height: clamp(460px, 52vw, 660px);
  padding-bottom: clamp(5rem, 9vw, 7.5rem);   /* room for the fact strip that rides up into it */
  background: var(--black);
}
.ev-hero__media { position: absolute; inset: 0; margin: 0; z-index: -2; border-radius: 0; aspect-ratio: auto; }
.ev-hero__media:not(.ph--none) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Two stops, not one: a strong floor so the copy always has contrast, plus a left-weighted wash
   so the headline sits on solid colour while the right of the photo stays legible. */
.ev-hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 37, 64, .55) 0%, rgba(10, 37, 64, .35) 32%, rgba(10, 37, 64, .93) 100%),
    linear-gradient(90deg, rgba(10, 37, 64, .8) 0%, rgba(10, 37, 64, .3) 58%, rgba(10, 37, 64, .12) 100%);
}
/* Ring motif echoing the brand geometry, bleeding off the top-right corner. */
.ev-hero__rings {
  position: absolute; z-index: -1; top: -28%; right: -12%; width: clamp(320px, 42vw, 720px); aspect-ratio: 1;
  pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%234FC3B5' stroke-width='1'%3E%3Ccircle cx='200' cy='200' r='80'/%3E%3Ccircle cx='200' cy='200' r='128'/%3E%3Ccircle cx='200' cy='200' r='176'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ev-hero__inner { position: relative; z-index: 1; color: #fff; padding-top: clamp(2.5rem, 6vw, 4rem); }
.ev-hero__inner .back-link { color: rgba(255, 255, 255, .78); }
.ev-hero__inner .back-link:hover { color: #fff; }
.ev-hero__inner .badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1rem; }
.ev-hero__inner .tag { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); color: #fff; backdrop-filter: blur(6px); }
.ev-hero__inner .tag--teal { background: var(--brand-2); border-color: var(--brand-2); }
.ev-hero h1 { color: #fff; max-width: 18ch; margin: 0 0 1rem; }
.ev-hero__lede { max-width: 56ch; margin: 0 0 1.75rem; color: rgba(255, 255, 255, .82); font-size: var(--font-lead); line-height: 1.6; }
.ev-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.ev-hero__ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .38); backdrop-filter: blur(6px); }
.ev-hero__ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }

/* --- Fact strip: rides up over the hero seam --- */
.ev-facts-sec { position: relative; z-index: 2; margin-top: clamp(-5.5rem, -7vw, -3.5rem); }
.ev-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; grid-template-columns: 1fr;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 28px 60px -34px rgba(10, 37, 64, .45);
}
.ev-fact {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon k" "icon v";
  gap: .1rem .9rem; align-content: center; padding: 1.15rem 1.25rem; background: #fff;
  transition: background .25s var(--ease);
}
.ev-fact:hover { background: var(--surface-2); }
.ev-fact__icon {
  grid-area: icon; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, var(--primary), var(--brand-2)); color: #fff;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.ev-fact:hover .ev-fact__icon { transform: translateY(-2px) scale(1.05); }
.ev-fact__icon .icon { width: 20px; height: 20px; }
.ev-fact__k { grid-area: k; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ev-fact__v { grid-area: v; font-size: .95rem; font-weight: 500; color: var(--ink); line-height: 1.4; }

/* --- Sticky in-page nav --- */
.ev-nav {
  position: sticky; top: calc(var(--header-h) - 12px); z-index: 700;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ev-nav__list {
  list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ev-nav__list::-webkit-scrollbar { display: none; }
.ev-nav__list a {
  display: inline-block; padding: .95rem .9rem; white-space: nowrap;
  font-size: .9rem; font-weight: 500; color: var(--muted); position: relative;
  transition: color .25s var(--ease);
}
.ev-nav__list a::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 0; height: 2px;
  background: var(--primary); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.ev-nav__list a:hover { color: var(--primary); }
.ev-nav__list a:hover::after { transform: scaleX(1); }
/* Anchor targets sit under the sticky header + this bar, so offset where they land. */
#ev-overview, #ev-agenda, #ev-speakers, #ev-venue, #ev-gallery { scroll-margin-top: calc(var(--header-h) + 56px); }

/* --- Body grid + sticky registration card --- */
.ev-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 992px) { .ev-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
.ev-col { min-width: 0; display: grid; gap: clamp(2rem, 3.5vw, 2.75rem); }
.ev-article h2 { margin-bottom: .75rem; }
.ev-article .eyebrow { margin-bottom: .5rem; }

.ev-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  box-shadow: 0 30px 60px -40px rgba(10, 37, 64, .45);
}
.ev-card__head { padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.15rem; }
.ev-card__price { margin: 0; font-size: 1.6rem; font-weight: 600; color: var(--black); letter-spacing: -0.02em; }
.ev-card__price span { font-size: .9rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.ev-card__facts { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 1rem; }
.ev-card__facts li { display: flex; gap: .8rem; align-items: flex-start; }
.ev-card__facts .icon { width: 19px; height: 19px; color: var(--brand-2); flex: none; margin-top: .15rem; }
.ev-card__facts strong { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.ev-card__facts span { font-size: .92rem; color: var(--ink); line-height: 1.45; }
.ev-card__cta { width: 100%; }
.ev-card__help { margin: .9rem 0 0; font-size: .85rem; color: var(--muted); text-align: center; }
.ev-card__help a { color: var(--brand); font-weight: 500; }
.ev-card__back { width: 100%; margin-top: .75rem; }

/* --- Highlights: numbered rows rather than another box grid --- */
.ev-block__title { margin: 0 0 1rem; }
.ev-hl { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ev-hl__item {
  display: flex; gap: 1rem; align-items: center; padding: 1rem 1.15rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ev-hl__item:hover { transform: translateX(4px); border-color: var(--primary); box-shadow: 0 16px 30px -22px rgba(10, 37, 64, .5); }
.ev-hl__num { font-size: .85rem; font-weight: 700; color: var(--brand-2); letter-spacing: .04em; flex: none; }
.ev-hl__text { font-size: .95rem; color: var(--ink); line-height: 1.5; }

/* --- Who should attend: navy panel, audiences as an icon grid, seats note as a live footnote --- */
.ev-aud {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-lg); color: #fff;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(26, 154, 140, .28) 0%, rgba(26, 154, 140, 0) 60%),
    linear-gradient(145deg, var(--black) 0%, var(--black-2) 55%, var(--primary) 130%);
  box-shadow: 0 30px 60px -40px rgba(10, 37, 64, .7);
}
.ev-aud__rings {
  position: absolute; z-index: -1; top: -120px; right: -120px; width: 300px; height: 300px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 0 0 44px rgba(255, 255, 255, .025), 0 0 0 45px rgba(255, 255, 255, .07);
  pointer-events: none;
}
.ev-aud__head { display: flex; align-items: center; gap: .85rem; margin-bottom: clamp(1.25rem, 2.4vw, 1.6rem); }
.ev-aud__badge {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-2); color: #fff; box-shadow: 0 10px 22px -10px rgba(26, 154, 140, .9);
}
.ev-aud__badge .icon { width: 21px; height: 21px; }
.ev-aud__title { margin: 0; color: #fff; }
.ev-aud__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .ev-aud__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ev-aud__item {
  display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-radius: var(--radius);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.ev-aud__item:hover { background: rgba(255, 255, 255, .1); border-color: rgba(26, 154, 140, .55); transform: translateY(-2px); }
.ev-aud__icon {
  display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(26, 154, 140, .18); color: #7FD9CE;
}
.ev-aud__icon .icon { width: 18px; height: 18px; }
.ev-aud__text { font-size: .93rem; font-weight: 500; line-height: 1.4; color: #fff; }
.ev-aud__note {
  display: flex; align-items: center; gap: .65rem; margin: clamp(1.25rem, 2.4vw, 1.6rem) 0 0; padding-top: 1.1rem;
  border-top: 1px dashed rgba(255, 255, 255, .18); font-size: .9rem; color: var(--on-dark);
}
/* Small live dot: a quiet signal that seats are running out */
.ev-aud__pulse { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #F5B84B; }
.ev-aud__pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(245, 184, 75, .55);
  animation: evAudPulse 1.8s var(--ease) infinite;
}
@keyframes evAudPulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ev-aud__pulse::after { animation: none; }
  .ev-aud__item { transition: none; }
  .ev-aud__item:hover { transform: none; }
}

/* --- Agenda: single rail with time on the left --- */
.ev-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; max-width: 820px; }
.ev-ag { display: grid; grid-template-columns: 74px 1fr; gap: 1.25rem; position: relative; padding: 0 0 1.75rem; }
.ev-ag::before { content: ""; position: absolute; left: 86px; top: .75rem; bottom: 0; width: 1px; background: var(--line); }
.ev-ag:last-child { padding-bottom: 0; }
.ev-ag:last-child::before { display: none; }
.ev-ag::after {
  content: ""; position: absolute; left: 81px; top: .55rem; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brand-2); transition: transform .3s var(--ease), background .3s var(--ease);
}
.ev-ag:hover::after { background: var(--brand-2); transform: scale(1.25); }
.ev-ag__time { font-size: .95rem; font-weight: 600; color: var(--primary); text-align: right; padding-top: .1rem; font-variant-numeric: tabular-nums; }
.ev-ag__body { padding-left: 1.5rem; }
.ev-ag__body h3 { font-size: 1.1rem; margin: 0 0 .35rem; letter-spacing: -0.01em; }
.ev-ag__body p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }

/* --- Mentors --- */
.ev-speakers { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .ev-speakers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ev-speakers { grid-template-columns: repeat(3, 1fr); } }
.ev-sp {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  padding-bottom: 1.35rem; text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.ev-sp:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 34px 60px -30px rgba(10, 37, 64, .4); }
.ev-sp__photo { margin: 0 0 1.15rem; aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden; }
.ev-sp__photo img { transition: transform .6s var(--ease); }
.ev-sp:hover .ev-sp__photo img { transform: scale(1.06); }
.ev-sp__name { font-size: 1.1rem; margin: 0 1rem .25rem; }
.ev-sp__role { margin: 0 1rem; font-size: .88rem; color: var(--muted); }

/* --- Venue --- */
.ev-venue { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 992px) { .ev-venue { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.ev-venue__body h2 { letter-spacing: -0.02em; margin-bottom: .75rem; }
.ev-venue__addr { font-size: 1.05rem; line-height: 1.7; color: var(--ink); margin: 0 0 1.25rem; }
.ev-venue__list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .65rem; }
.ev-venue__list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--text); }
.ev-venue__list .icon { width: 19px; height: 19px; color: var(--brand-2); flex: none; margin-top: .15rem; }
.ev-venue__map { margin: 0; aspect-ratio: 16 / 11; border-radius: var(--radius); overflow: hidden; }

/* --- Related events --- */
.ev-related-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.ev-related-head .section-head { margin-bottom: 0; }
.ev-related-head__all {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--primary);
  padding-bottom: .2rem; border-bottom: 1.5px solid currentColor; transition: gap .3s var(--ease), color .3s;
}
.ev-related-head__all .icon { width: 18px; height: 18px; }
.ev-related-head__all:hover { gap: .8rem; color: var(--black); }
.ev-related { display: grid; gap: clamp(1.25rem, 2.2vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 768px) { .ev-related { grid-template-columns: repeat(3, 1fr); } }
.ev-rel {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); color: inherit;
  box-shadow: 0 18px 40px -34px rgba(10, 37, 64, .35);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
/* Brand bar that draws across the base of the card on hover */
.ev-rel::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--primary), var(--brand-2));
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.ev-rel:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 36px 60px -34px rgba(10, 37, 64, .5); }
.ev-rel:hover::after { transform: scaleX(1); }
.ev-rel__media { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.ev-rel__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ev-rel__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 37, 64, .35) 0%, rgba(10, 37, 64, 0) 45%, rgba(10, 37, 64, .25) 100%);
}
.ev-rel:hover .ev-rel__media img { transform: scale(1.07); }
.ev-rel__date {
  position: absolute; top: 1rem; left: 1rem; z-index: 1;
  display: grid; place-items: center; width: 58px; padding: .55rem 0 .5rem; border-radius: 12px;
  background: rgba(255, 255, 255, .94); color: var(--primary); box-shadow: 0 10px 24px -12px rgba(10, 37, 64, .55);
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; line-height: 1;
}
.ev-rel__date strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--black); margin-bottom: .2rem; }
.ev-rel__tag {
  position: absolute; top: 1rem; right: 1rem; z-index: 1;
  padding: .35rem .75rem; border-radius: 999px; background: rgba(10, 37, 64, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .25);
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.ev-rel__body { display: flex; flex-direction: column; gap: .75rem; flex: 1; padding: 1.35rem 1.4rem 1.4rem; }
.ev-rel__title { font-weight: 600; color: var(--black); font-size: var(--font-h3); line-height: 1.3; letter-spacing: -0.01em; transition: color .3s; }
.ev-rel:hover .ev-rel__title { color: var(--primary); }
.ev-rel__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .88rem; color: var(--muted); }
.ev-rel__meta > span { display: inline-flex; align-items: center; gap: .4rem; }
.ev-rel__meta .icon { width: 16px; height: 16px; color: var(--brand-2); }
.ev-rel__foot {
  margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .9rem; font-weight: 600; color: var(--primary);
}
.ev-rel__go {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--line); color: var(--primary);
  transition: background .35s var(--ease), border-color .35s, color .35s, transform .35s var(--ease);
}
.ev-rel__go .icon { width: 18px; height: 18px; }
.ev-rel:hover .ev-rel__go { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateX(3px); }

/* --- Section decoration: soft brand glows in the empty margins --- */
.ev-agenda-sec, .ev-speakers-sec, .ev-venue-sec, .ev-related-sec { position: relative; isolation: isolate; }
.ev-speakers-sec::before, .ev-related-sec::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 52% at 96% 6%, rgba(7, 87, 154, .07) 0%, rgba(7, 87, 154, 0) 70%),
    radial-gradient(38% 46% at 2% 94%, rgba(26, 154, 140, .07) 0%, rgba(26, 154, 140, 0) 70%);
}

/* --- Responsive --- */
@media (min-width: 576px) {
  .ev-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .ev-facts { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767.98px) {
  /* The strip stops overlapping on phones — stacked, a negative margin would bury the hero copy. */
  .ev-facts-sec { margin-top: clamp(-2.5rem, -5vw, -1.5rem); }
  .ev-hero { padding-bottom: clamp(3.5rem, 12vw, 5rem); }
  .ev-hero__rings { opacity: .3; top: -14%; right: -28%; }
  .ev-hero__actions .btn { width: 100%; }
  .ev-hero__actions > [data-register-cta] { width: 100%; }
  .ev-ag { grid-template-columns: 58px 1fr; gap: .9rem; }
  .ev-ag::before { left: 68px; }
  .ev-ag::after { left: 63px; }
  .ev-ag__body { padding-left: 1.1rem; }
  .ev-ag__time { font-size: .85rem; }
  .ev-rel__body { padding: 1.15rem 1.15rem 1.2rem; }
}
@media (max-width: 991.98px) {
  /* Sticky is pointless once the card is stacked under the copy, and it fights the mobile bar. */
  .ev-card.sticky-cta { position: static; }
}
/* The fixed register bar only exists below 992px, so only reserve space for it there —
   applying it at every width left a dead gap under the last section on desktop. */
@media (max-width: 991.98px) {
  body.has-mobile-bar .ev-related-sec { padding-bottom: calc(clamp(2.5rem, 4.5vw, 4rem) + 72px); }
}

@media (prefers-reduced-motion: reduce) {
  .ev-hl__item, .ev-sp, .ev-rel, .ev-rel::after, .ev-rel__media img, .ev-fact__icon, .ev-sp__photo img, .ev-rel__go, .ev-ag::after { transition: none; }
  .ev-hl__item:hover, .ev-sp:hover, .ev-rel:hover, .ev-rel:hover .ev-rel__media img { transform: none; }
}
/* ---------- 20. Utilities ---------- */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.text-center { text-align: center; }
.max-w { max-width: 780px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.stack > * + * { margin-top: 1.25rem; }

/* =====================================================================
   Opportunity (sector) inner pages — redesign. Layouts for the six sector pages live in
   inner.css (loaded only on those pages); the parts below are the shared pieces the design put
   in style.css. Everything is scoped to the sector pages so other pages are unaffected.
   ===================================================================== */

/* Bizacharya illustrated icons — two-tone line art (soft tint .d, accent .a), colour from context */
.icon--art { stroke-width: 2.6; }
.icon--art .d { fill: currentColor; opacity: .16; stroke: none; }
.icon--art .a { fill: currentColor; opacity: .5; stroke: none; }

/* Financial Services intro eyebrow — muted, lead-sized, no rule (as on the Home section heads) */
.financial-intro .eyebrow { color: var(--muted); font-size: var(--font-lead); }

/* Financial Services — services shown as a portfolio allocation: one segmented bar, and a colour-keyed legend of the eight services beneath.
   Minimal motion: the segments grow in from the left when the block reveals. */
.fin-svc { background: #fff; }
.fin-svc__head { max-width: 680px; margin: 0 auto clamp(2.5rem, 4vw, 3.25rem); text-align: center; }
.fin-svc__head .eyebrow { color: var(--muted); font-size: var(--font-lead); }
.fin-svc__head h2 { margin: 0; }
.fin-alloc { --c1: var(--black); --c2: var(--black-2); --c3: var(--primary); --c4: var(--primary-2); --c5: var(--brand-2-ink); --c6: var(--brand-2); --c7: #4FC3B5; --c8: #9FDCD4; }
.fin-alloc__bar { display: flex; gap: 4px; height: 18px; margin-bottom: clamp(2rem, 4vw, 2.75rem); border-radius: 999px; overflow: hidden; }
.fin-alloc__bar i { display: block; height: 100%; transform-origin: left center; }
.fin-alloc__bar i:nth-child(1) { flex: 16; background: var(--c1); } .fin-alloc__bar i:nth-child(2) { flex: 12; background: var(--c2); }
.fin-alloc__bar i:nth-child(3) { flex: 14; background: var(--c3); } .fin-alloc__bar i:nth-child(4) { flex: 10; background: var(--c4); }
.fin-alloc__bar i:nth-child(5) { flex: 12; background: var(--c5); } .fin-alloc__bar i:nth-child(6) { flex: 13; background: var(--c6); }
.fin-alloc__bar i:nth-child(7) { flex: 11; background: var(--c7); } .fin-alloc__bar i:nth-child(8) { flex: 12; background: var(--c8); }
.fin-alloc__legend { display: grid; grid-template-columns: 1fr; gap: 0 2rem; margin: 0; padding: 0; list-style: none; }
.fin-alloc__legend li { display: grid; grid-template-columns: 14px 1fr; align-items: start; gap: .9rem; padding: 1rem 0; border-top: 1px solid var(--line); color: var(--black); font-size: 1rem; font-weight: 500; line-height: 1.45; }
.fin-alloc__legend li::before { content: ""; grid-column: 1; grid-row: 1; width: 14px; height: 14px; margin-top: .2em; border-radius: 4px; background: var(--sw); }
.fin-alloc__legend li:nth-child(1) { --sw: var(--c1); } .fin-alloc__legend li:nth-child(2) { --sw: var(--c2); } .fin-alloc__legend li:nth-child(3) { --sw: var(--c3); } .fin-alloc__legend li:nth-child(4) { --sw: var(--c4); }
.fin-alloc__legend li:nth-child(5) { --sw: var(--c5); } .fin-alloc__legend li:nth-child(6) { --sw: var(--c6); } .fin-alloc__legend li:nth-child(7) { --sw: var(--c7); } .fin-alloc__legend li:nth-child(8) { --sw: var(--c8); }
@media (min-width: 768px) { .fin-alloc__legend { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .fin-alloc__legend { grid-template-columns: repeat(4, 1fr); } .fin-alloc__legend li { padding: 1.25rem 0; } }
@media (prefers-reduced-motion: no-preference) {
  .fin-alloc .fin-alloc__bar i { transform: scaleX(0); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
  .fin-alloc.is-visible .fin-alloc__bar i { transform: none; }
  .fin-alloc__bar i:nth-child(2) { transition-delay: .06s; } .fin-alloc__bar i:nth-child(3) { transition-delay: .12s; } .fin-alloc__bar i:nth-child(4) { transition-delay: .18s; }
  .fin-alloc__bar i:nth-child(5) { transition-delay: .24s; } .fin-alloc__bar i:nth-child(6) { transition-delay: .3s; } .fin-alloc__bar i:nth-child(7) { transition-delay: .36s; } .fin-alloc__bar i:nth-child(8) { transition-delay: .42s; }
}
.fin-who { background: var(--surface); padding-block: clamp(3rem, 5vw, 4.5rem); }
.fin-who__grid { display: grid; gap: 1.75rem; align-items: center; }
.fin-who__head .eyebrow { color: var(--muted); font-size: var(--font-lead); }
.fin-who__head h2 { margin: 0; }
.fin-who__list { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 0; margin: 0; padding: 0; list-style: none; }
.fin-who__list li { display: inline-flex; align-items: center; color: var(--black); font-size: var(--font-h3); font-weight: 500; letter-spacing: -0.015em; }
.fin-who__list li:not(:last-child)::after { content: ""; width: 7px; height: 7px; margin: 0 1.1rem; border-radius: 50%; background: var(--brand-2); }
@media (min-width: 992px) {
  .fin-who__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 5rem); }
  .fin-who__list { padding-left: clamp(2rem, 4vw, 3rem); border-left: 2px solid var(--brand-2); }
}
@media (max-width: 991.98px) { .fin-who__list { flex-direction: column; align-items: flex-start; gap: .75rem; } .fin-who__list li:not(:last-child)::after { content: none; } .fin-who__list li::before { content: ""; width: 7px; height: 7px; margin-right: .85rem; border-radius: 50%; background: var(--brand-2); } }

/* "Explore Other Sectors" — shared by every opportunity page (inner pages and Financial Services) */
.ix-rel-head { max-width: 680px; margin: 0 auto clamp(2.25rem, 4vw, 3.5rem); text-align: center; }
.ix-rel-head h2 { margin: 0; }

.ix-rel-opp { display: grid; gap: 2rem 1.75rem; grid-template-columns: repeat(5, 1fr); }
.ix-rel-opp a { display: grid; gap: .9rem; align-content: start; color: var(--black); }
.ix-rel-opp figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ix-radius, 6px); }
.ix-rel-opp figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.ix-rel-opp a:hover figure img { transform: scale(1.06); }
.ix-rel-opp span { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.ix-rel-opp .icon { width: 16px; height: 16px; flex: none; margin-top: .2rem; color: var(--primary); transition: transform .3s var(--ease); }
.ix-rel-opp a:hover { color: var(--primary); }
.ix-rel-opp a:hover .icon { transform: translateX(3px); }
@media (max-width: 991.98px) {
  .ix-rel-opp { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 38%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; scrollbar-width: thin; }
  .ix-rel-opp a { scroll-snap-align: start; }
}
.ix-rel-opp span { font-size: .9rem; font-weight: 500; }
@media (max-width: 575.98px) { .ix-rel-opp { grid-auto-columns: 70%; } }
@media (prefers-reduced-motion: reduce) { .ix-rel-opp a:hover figure img { transform: none; } }

/* Responsive legibility — small tags and labels never drop below 12px */
.ticket__tag, .ticket__year, .ticket__month, .cta-chain__num, .contact-facts dt, .vm2__core-line, .map-card__k, .ev-fact__k, .ev-rel__date, .ev-rel__tag, .story-card__tag { font-size: 12px; }

/* Breadcrumb stays on one line on phones — the current page truncates instead of wrapping */
@media (max-width: 575.98px) {
  .breadcrumb { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
  .breadcrumb > * { flex: none; }
  .breadcrumb [aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Services list page (the design's redesign), scoped to .listing--bg-gradient ---------- */
/* Faint full-section soft-gradient photo behind the rows */
.listing--bg-gradient { isolation: isolate; overflow: hidden; }
.listing--bg-gradient::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: center / cover no-repeat url("../img/bg-services-gradient.jpg"); opacity: .14; }
/* Row titles follow the site heading scale */
.listing--bg-gradient .row-item__title { font-size: var(--font-h3); }
/* Phones: icon + arrow share the top line so the title and description get the full row width. */
@media (max-width: 575.98px) {
  .listing--bg-gradient .row-list--icon-only .row-item { grid-template-columns: auto 1fr; gap: .9rem 1rem; }
  .listing--bg-gradient .row-list--icon-only .row-item__glyph { grid-column: 1; grid-row: 1; }
  .listing--bg-gradient .row-list--icon-only :is(.row-item__icon, .row-item__more) { grid-column: 2; grid-row: 1; justify-self: end; }
  .listing--bg-gradient .row-list--icon-only .row-item > div { grid-column: 1 / -1; grid-row: 2; }
  .listing--bg-gradient .row-list--icon-only .row-item__image { grid-row: 3; margin-top: .25rem; }
}

/* ---------- Contact page polish ---------- */
/* Field icons inside the glass form, with a teal focus glow */
.contact-card--glass .field__control { position: relative; }
.contact-card--glass .field__control > .icon {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 17px; height: 17px; color: rgba(255, 255, 255, .55); pointer-events: none; transition: color .25s var(--ease);
}
.contact-card--glass .field__control input { padding-left: 2.75rem; }
.contact-card--glass .field__control:focus-within > .icon { color: #4FC3B5; }
.contact-card--glass .field input:focus, .contact-card--glass .field select:focus, .contact-card--glass .multiselect__toggle[aria-expanded="true"] {
  border-color: #4FC3B5; background-color: rgba(255, 255, 255, .14); box-shadow: 0 0 0 3px rgba(79, 195, 181, .22);
}
.contact-card--glass .field.is-invalid input, .contact-card--glass .field.is-invalid select { border-color: #ff8a8a; }

/* "Prefer to talk?" — a frosted mini-card on the photo half (desktop only; below 992px the
   glass panel spans the whole card and would cover it) */
.contact-card__talk { display: none; }
@media (min-width: 992px) {
  .contact-card__talk {
    position: absolute; z-index: 1; left: clamp(1.5rem, 2.6vw, 2.5rem); bottom: calc(3.6rem + clamp(1.5rem, 2.6vw, 2.5rem));
    display: grid; gap: .55rem; width: min(40%, 300px); padding: 1.15rem 1.25rem;
    background: rgba(10, 37, 64, .45); border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px;
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .55);
  }
}
.contact-card__talk-k { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #4FC3B5; }
.contact-card__talk-tel { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.contact-card__talk-tel .icon { width: 18px; height: 18px; color: #4FC3B5; }
.contact-card__talk-tel:hover { color: #4FC3B5; }
.contact-card__talk-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem .9rem; border-radius: 999px;
  background: #25D366; color: #fff; font-size: .85rem; font-weight: 600; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-card__talk-wa .icon { width: 16px; height: 16px; }
.contact-card__talk-wa:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(37, 211, 102, .8); }

/* Contact details band: tiles lift and their icons light up on hover */
.contact-facts__item { transition: background .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease); }
.contact-facts__item:hover { transform: translateY(-3px); border-color: rgba(79, 195, 181, .45); }
.contact-facts__item .card-x__icon {
  border-radius: 12px; background: linear-gradient(135deg, rgba(79, 195, 181, .22), rgba(31, 109, 174, .22));
  transition: background .3s var(--ease), color .3s var(--ease), transform .35s var(--ease);
}
.contact-facts__item:hover .card-x__icon { background: #4FC3B5; color: var(--black); transform: scale(1.06); }

/* Map: soft dotted field, framed map, and a floating address card with directions */
.contact-map-sec { position: relative; isolation: isolate; background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); }
.contact-map-sec::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(7, 87, 154, .14) 1.1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%);
}
.map-wrap { position: relative; }
.map-wrap .map { padding: 8px; background: #fff; }
.map-wrap .map iframe { border-radius: 22px; }
.map-card {
  position: relative; z-index: 1; margin: -3rem 1rem 0; padding: 1.4rem 1.5rem;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(10, 37, 64, .45);
}
.map-card__icon {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: .9rem; border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--brand-2)); color: #fff; box-shadow: 0 12px 22px -12px rgba(7, 87, 154, .8);
}
.map-card__icon .icon { width: 22px; height: 22px; }
.map-card__k { margin: 0 0 .35rem; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-2-ink); }
.map-card__addr { margin: 0 0 1.2rem; font-style: normal; font-size: 1.02rem; font-weight: 500; line-height: 1.55; color: var(--black); }
.map-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem; }
.map-card__actions .btn .icon { width: 16px; height: 16px; }
.map-card__call { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .92rem; color: var(--ink); }
.map-card__call .icon { width: 16px; height: 16px; color: var(--brand-2); }
.map-card__call:hover { color: var(--primary); }
@media (min-width: 768px) {
  /* Right-hand side: Google's own place box occupies the embed's top-left corner */
  .map-card { position: absolute; right: clamp(1.5rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); width: 320px; margin: 0; }
}


/* Sector & service pages — narrow phones. The design already shortens a long current-page name in the
   breadcrumb with "…", but the column around it first grew to the breadcrumb's full single-line length,
   pushing the headline and intro text past the screen edge on 320–375px phones (it cut "Transform
   Agricultural…" off at 320px). Containing the breadcrumb's width stops it widening its column. */
@media (max-width: 575.98px) {
  .ix-crumb { contain: inline-size; }
}

/* Form success message — a confident "done" moment: the box eases in on a soft gradient, the icon
   fills green with a white tick that draws itself, coloured confetti bursts out once. Every form
   (enquiry, associate, job application, event registration) shares .form-success. */
@keyframes fs-in { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes fs-draw { to { stroke-dashoffset: 0; } }
@keyframes fs-pop { 0% { transform: scale(0); } 55% { transform: scale(1.3); } 80% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes fs-glow { 0% { box-shadow: 0 0 0 0 rgba(26, 154, 140, .55); } 100% { box-shadow: 0 0 0 26px rgba(26, 154, 140, 0); } }
@keyframes fs-text { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes fs-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes fs-confetti {
  0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(260deg); }
}
.form-success:not([hidden]) {
  position: relative; overflow: visible;
  background: linear-gradient(110deg, #e6f7f3 0%, #eaf2fb 55%, #f3ecfb 100%);
  background-size: 220% 100%;
  border: 1px solid rgba(26, 154, 140, .55); border-left: 6px solid #1a9a8c;
  box-shadow: 0 10px 28px rgba(26, 154, 140, .18);
  animation: fs-in .6s cubic-bezier(.2, .8, .2, 1) both, fs-glow 1.3s .3s ease-out 1 both, fs-sweep 1.4s .1s ease-out both;
}
.form-success:not([hidden]) strong { color: #0d6b61; font-size: 1.08rem; }
.form-success:not([hidden]) .icon {
  width: 38px; height: 38px; padding: 6px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #22b8a6, #1a9a8c); color: #fff; box-shadow: 0 6px 14px rgba(26, 154, 140, .4);
  stroke: #fff; animation: fs-pop .7s .15s cubic-bezier(.2, .8, .2, 1) both; transform-origin: center;
}
.form-success:not([hidden]) .icon circle { stroke: transparent; }
.form-success:not([hidden]) .icon path { stroke: #fff; stroke-width: 2.6; stroke-dasharray: 9; stroke-dashoffset: 9; animation: fs-draw .4s .65s ease-out forwards; }
.form-success:not([hidden]) > div { animation: fs-text .5s .35s ease-out both; }
/* confetti: eight small coloured pieces fly out from the icon */
.form-success:not([hidden])::before, .form-success:not([hidden])::after {
  content: ""; position: absolute; left: 38px; top: 38px; width: 9px; height: 9px; border-radius: 2px; pointer-events: none; opacity: 0;
}
.form-success:not([hidden])::before {
  background: #f5a623; --dx: -54px; --dy: -46px;
  box-shadow: 34px -26px 0 #e8505b, 70px 8px 0 #4f8df5, -22px 30px 0 #8e5cf0;
  animation: fs-confetti 1s .45s ease-out both;
}
.form-success:not([hidden])::after {
  background: #1a9a8c; --dx: 46px; --dy: -52px;
  box-shadow: -30px -34px 0 #4f8df5, 56px 30px 0 #f5a623, -48px 22px 0 #e8505b;
  animation: fs-confetti 1.1s .5s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .form-success:not([hidden]), .form-success:not([hidden]) .icon, .form-success:not([hidden]) > div { animation: none; }
  .form-success:not([hidden])::before, .form-success:not([hidden])::after { display: none; }
  .form-success:not([hidden]) .icon path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* Footer / menu-drawer social icons: a comfortable finger-sized tap area on phones and tablets. */
@media (max-width: 991.98px) {
  .footer .social a, .drawer__foot .social a { min-width: 44px; min-height: 44px; }
}

/* ---- Learning Hub + Success Stories (design) ---- */

/* =========================================================================
   Learning Hub (.lh) — navy "studio" hero with a lesson screen, a level
   switch that docks on the hero edge, a lit bookshelf offer, a player +
   playlist for Free Videos, and a magazine grid for Blogs & Articles.
   ========================================================================= */
.lh section { position: relative; }
.lh-play { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--black); box-shadow: 0 0 0 6px rgba(255, 255, 255, .2); transition: transform .3s var(--ease), background .3s, color .3s; }
.lh-play .icon { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; }
.lh-play--lg { width: 78px; height: 78px; box-shadow: 0 0 0 10px rgba(255, 255, 255, .18), 0 0 0 22px rgba(255, 255, 255, .08); }
.lh-play--lg .icon { width: 26px; height: 26px; margin-left: 4px; }
.lh-dur { position: absolute; z-index: 2; right: 16px; bottom: 16px; padding: 4px 10px; border-radius: 999px; background: rgba(10, 37, 64, .72); color: #fff; font-size: 12px; font-weight: 500; backdrop-filter: blur(6px); }

/* ---------- Hero ---------- */
.lh-hero { overflow: hidden; isolation: isolate; color: #fff; padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(5.5rem, 9vw, 7.5rem);
  background: radial-gradient(50% 60% at 88% 18%, rgba(79, 195, 181, .22), transparent 70%), radial-gradient(45% 55% at 8% 100%, rgba(31, 109, 174, .45), transparent 70%), linear-gradient(160deg, #0A2540 0%, #0D3156 100%); }
.lh-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%); mask-image: linear-gradient(180deg, #000 30%, transparent 95%); }
.lh-hero__grid { display: grid; gap: clamp(3rem, 6vw, 4.5rem); align-items: center; }
.lh-hero .breadcrumb, .lh-hero .breadcrumb a { color: rgba(255, 255, 255, .62); }
.lh-hero .breadcrumb a:hover { color: #fff; }
.lh-hero .breadcrumb [aria-current] { color: #4FC3B5; }
.lh-hero .eyebrow { color: rgba(255, 255, 255, .7); font-size: var(--font-lead); margin-bottom: .5rem; }
.lh-hero__tag { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; color: #4FC3B5; font-size: var(--font-tagline); font-weight: 500; }
.lh-hero__tag::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.lh-hero h1 { margin: 0 0 1.25rem; max-width: 17ch; color: #fff; }
.lh-hero__lede { margin: 0; max-width: 56ch; color: var(--on-dark); font-size: var(--font-body); line-height: 1.75; }

.lh-stage { position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding: 2.25rem 0 2.5rem 2.5rem; }
.lh-stage__back { position: absolute; z-index: 0; left: 0; top: 0; width: 46%; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: 16px; transform: rotate(-7deg); opacity: .85; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6); }
.lh-stage__screen { position: relative; z-index: 1; padding: 10px; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .75); backdrop-filter: blur(8px); }
.lh-stage__screen figure { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; }
.lh-stage__screen figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10, 37, 64, .75)); }
.lh-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lh-stage__bar { position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 24px; display: flex; align-items: center; gap: .9rem; }
.lh-stage__track { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .28); }
.lh-stage__track i { display: block; width: 62%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4FC3B5, #9FD9D1); box-shadow: 0 0 12px rgba(79, 195, 181, .8); position: relative; }
.lh-stage__track i::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(79, 195, 181, .45); }
.lh-stage__faces { position: absolute; z-index: 2; left: 0; bottom: 0; display: flex; padding: 8px 14px 8px 8px; border-radius: 999px; background: #fff; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55); }
.lh-stage__faces img { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; margin-left: -12px; }
.lh-stage__faces img:first-child { margin-left: 0; }
.lh-stage__faces::after { content: ""; align-self: center; width: 10px; height: 10px; margin-left: 10px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 0 4px rgba(26, 154, 140, .2); }
.lh-stage__orb { position: absolute; z-index: 0; border-radius: 50%; }
.lh-stage__orb--a { right: -14px; top: 10px; width: 92px; height: 92px; border: 1.5px dashed rgba(79, 195, 181, .55); }
.lh-stage__orb--b { right: 40px; bottom: 6px; width: 14px; height: 14px; background: #4FC3B5; box-shadow: 0 0 0 6px rgba(79, 195, 181, .18); }
@media (min-width: 992px) { .lh-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .lh-stage { margin: 0 0 0 auto; } }
@media (max-width: 575.98px) { .lh-stage { padding: 1.5rem 0 2rem 1.5rem; } .lh-stage__faces img { width: 36px; height: 36px; } .lh-stage__bar { left: 18px; right: 18px; bottom: 16px; } .lh-stage__orb--a { right: -6px; width: 64px; height: 64px; } }

/* ---------- Level switch (Basic / Advanced) — docks on the hero's bottom edge ---------- */
.lh-sub { padding: 0 0 clamp(3.5rem, 7vw, 5.5rem); background: #fff; }
.lh-sub__switch { position: relative; z-index: 3; display: flex; justify-content: center; margin: -34px 0 clamp(2.5rem, 5vw, 3.5rem); }
.lh-sub__switch .hub-toggle { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 22px 44px -22px rgba(10, 37, 64, .55); }
.lh-sub__switch .hub-toggle::before { content: ""; position: absolute; z-index: -1; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: 999px; background: linear-gradient(135deg, var(--black) 0%, var(--primary) 100%); box-shadow: 0 10px 22px -12px rgba(7, 87, 154, .8); transition: transform .45s var(--ease); }
.lh-sub__switch .hub-toggle:has([data-hub="premium"][aria-pressed="true"])::before { transform: translateX(100%); }
.lh-sub__switch .hub-toggle__btn { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-width: 160px; padding: .85rem 1.75rem; border-radius: 999px; background: transparent; color: var(--muted); font-size: .95rem; font-weight: 500; letter-spacing: .01em; white-space: nowrap; transition: color .3s; }
.lh-sub__switch .hub-toggle__btn[aria-pressed="true"] { background: transparent; color: #fff; }
.lh-sub__switch .hub-toggle__btn:not([aria-pressed="true"]):hover { color: var(--black); }
.lh-sub__switch .hub-toggle__btn:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.hub-toggle__lvl { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.hub-toggle__lvl i { display: block; width: 3px; border-radius: 2px; background: currentColor; opacity: .3; transition: opacity .3s, background .3s; }
.hub-toggle__lvl i:nth-child(1) { height: 5px; } .hub-toggle__lvl i:nth-child(2) { height: 8px; } .hub-toggle__lvl i:nth-child(3) { height: 12px; }
[data-hub="free"] .hub-toggle__lvl i:nth-child(1), [data-hub="premium"] .hub-toggle__lvl i { opacity: 1; }
.hub-toggle__btn[aria-pressed="true"] .hub-toggle__lvl i { background: #4FC3B5; }
@media (max-width: 575.98px) { .lh-sub__switch .hub-toggle { width: 100%; max-width: 340px; } .lh-sub__switch .hub-toggle__btn { min-width: 0; padding: .8rem 1rem; font-size: .9rem; } }

/* ---------- Offer — copy beside a lit bookshelf ---------- */
.lh-shelf { position: relative; display: grid; gap: 2.5rem; overflow: hidden; padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.5rem, 4.5vw, 3.5rem) 0; border-radius: 24px; border: 1px solid var(--line);
  background: radial-gradient(60% 80% at 85% 100%, rgba(79, 195, 181, .22), transparent 70%), linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%); }
.lh-shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(90deg, var(--black), var(--primary)); }
.lh-shelf__copy { align-self: center; padding-bottom: clamp(0rem, 3vw, 3.5rem); }
.lh-shelf__copy h2 { margin: 0 0 .9rem; }
.lh-shelf__copy p { margin: 0 0 1.75rem; max-width: 50ch; color: var(--text); font-size: var(--font-body); line-height: 1.75; }
.lh-shelf__books { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 170px; margin-bottom: 14px; }
.lh-shelf__books i { position: relative; display: block; width: 28px; border-radius: 5px 5px 0 0; box-shadow: inset -5px 0 0 rgba(0, 0, 0, .14); transition: transform .4s var(--ease); }
.lh-shelf__books i::before { content: ""; position: absolute; left: 6px; right: 6px; top: 14%; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .55); box-shadow: 0 7px 0 rgba(255, 255, 255, .55); }
.lh-shelf__books i:nth-child(1) { height: 70%; background: #4FC3B5; }
.lh-shelf__books i:nth-child(2) { height: 92%; width: 34px; background: var(--primary); }
.lh-shelf__books i:nth-child(3) { height: 80%; background: var(--brand-2); }
.lh-shelf__books i:nth-child(4) { height: 58%; width: 22px; background: #9FD9D1; }
.lh-shelf__books i:nth-child(5) { height: 100%; width: 36px; background: var(--black); }
.lh-shelf__books i:nth-child(6) { height: 86%; background: #2E7BC4; }
.lh-shelf__books i:nth-child(7) { height: 74%; width: 30px; background: #fff; box-shadow: inset -5px 0 0 rgba(10, 37, 64, .08), 0 0 0 1px var(--line); }
.lh-shelf__books i:nth-child(7)::before { background: rgba(10, 37, 64, .25); box-shadow: 0 7px 0 rgba(10, 37, 64, .25); }
.lh-shelf__books i:nth-child(8) { height: 90%; background: var(--brand-2-ink); transform: rotate(9deg); transform-origin: bottom right; margin-left: 4px; }
.lh-shelf__books i:nth-child(9) { height: 64%; width: 26px; background: var(--primary-2); margin-left: 16px; }
.lh-shelf:hover .lh-shelf__books i:nth-child(2), .lh-shelf:hover .lh-shelf__books i:nth-child(5) { transform: translateY(-8px); }
@media (min-width: 992px) {
  .lh-shelf { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 4rem); padding-bottom: 0; }
  .lh-shelf__books { align-self: end; height: 240px; padding-right: clamp(0rem, 2vw, 1.5rem); }
  .lh-shelf__books i { width: 34px; } .lh-shelf__books i:nth-child(2), .lh-shelf__books i:nth-child(5) { width: 42px; }
}
@media (max-width: 575.98px) { .lh-shelf__books { height: 130px; } .lh-shelf__books i { width: 20px; } .lh-shelf__books i:nth-child(2), .lh-shelf__books i:nth-child(5) { width: 26px; } }

/* ---------- Free Videos — feature player + playlist ---------- */
.lh-reel { padding: clamp(3.5rem, 7vw, 6rem) 0; background: linear-gradient(180deg, var(--surface) 0%, #fff 100%); }
.lh-reel__head { max-width: 640px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.lh-reel__head h2 { margin: 0 0 .75rem; }
.lh-reel__head p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: var(--font-body); line-height: 1.7; }
.lh-reel__grid { display: grid; gap: 1.5rem; }
.lh-player__btn, .lh-track { width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.lh-player__btn { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 22px; background: var(--black); box-shadow: 0 34px 60px -34px rgba(10, 37, 64, .6); }
.lh-player__screen { position: relative; display: grid; place-items: center; flex: 1 1 auto; min-height: 260px; aspect-ratio: 16 / 9; overflow: hidden; }
.lh-player__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.lh-player__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 37, 64, .1) 30%, rgba(10, 37, 64, .65) 100%); }
.lh-player__screen .lh-play { position: relative; z-index: 2; }
.lh-player__body { display: block; padding: 1.5rem 1.75rem 1.75rem; }
.lh-player__body h3 { margin: 0 0 .4rem; color: #fff; font-size: var(--font-h3); font-weight: 500; }
.lh-player__body p { margin: 0; color: var(--on-dark); font-size: .9375rem; line-height: 1.6; }
.lh-player__btn:hover .lh-player__screen img { transform: scale(1.04); }
.lh-player__btn:hover .lh-play, .lh-track:hover .lh-play { background: #4FC3B5; color: #fff; transform: scale(1.06); }
.lh-playlist { overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(10, 37, 64, .45); }
.lh-playlist__list { margin: 0; padding: .5rem; list-style: none; counter-reset: trk; }
.lh-playlist__list li { counter-increment: trk; }
.lh-playlist__list li + li { border-top: 1px solid var(--line); }
.lh-track { display: grid; grid-template-columns: auto 132px minmax(0, 1fr); align-items: center; gap: 1rem; padding: .85rem .85rem; border-radius: 14px; transition: background .25s; }
.lh-track::before { content: counter(trk, decimal-leading-zero); color: var(--brand-2-ink); font-size: 13px; font-weight: 600; width: 1.4rem; }
.lh-track:hover { background: var(--surface); }
.lh-track:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; }
.lh-track__thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; }
.lh-track__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lh-track__thumb::after { content: ""; position: absolute; inset: 0; background: rgba(10, 37, 64, .28); }
.lh-track__thumb .lh-play { position: relative; z-index: 1; width: 30px; height: 30px; box-shadow: none; }
.lh-track__thumb .lh-play .icon { width: 12px; height: 12px; }
.lh-track__body { display: grid; gap: .2rem; min-width: 0; }
.lh-track__body h3 { margin: 0; color: var(--black); font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.lh-track__body p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lh-track__dur { justify-self: start; margin-top: .2rem; padding: 1px 8px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 500; }
@media (min-width: 992px) { .lh-reel__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.75rem; align-items: stretch; } .lh-player__screen { aspect-ratio: auto; } }
@media (max-width: 575.98px) { .lh-track { grid-template-columns: 104px minmax(0, 1fr); gap: .85rem; padding: .75rem .5rem; } .lh-track::before { display: none; } .lh-player__body { padding: 1.25rem 1.25rem 1.5rem; } }

.lh-reel__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .lh-reel__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* ---------- Free Blogs & Articles — sticky index panel + article ledger ---------- */
.lh-journal { padding: clamp(3.5rem, 7vw, 6rem) 0; background: #fff; }
.lh-journal__layout { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.lh-journal__aside { position: relative; overflow: hidden; padding: clamp(1.75rem, 3.5vw, 2.5rem); border-radius: 24px; color: #fff;
  background: radial-gradient(70% 50% at 100% 0%, rgba(79, 195, 181, .25), transparent 70%), linear-gradient(165deg, var(--black) 0%, #0E3558 100%); }
.lh-journal__aside::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 1.5px dashed rgba(79, 195, 181, .35); pointer-events: none; }
.lh-journal__aside .eyebrow { color: #4FC3B5; }
.lh-journal__aside h2 { margin: 0 0 .9rem; color: #fff; }
.lh-journal__aside > p:not(.eyebrow) { margin: 0 0 1.75rem; color: var(--on-dark); font-size: var(--font-body); line-height: 1.7; }
.lh-tabs { position: relative; z-index: 1; display: grid; gap: .25rem; margin: 0; padding: 0; border: 0; background: none; }
.lh-tabs .filter-tab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .8rem 1rem; border: 0; border-radius: 12px; background: none; color: rgba(255, 255, 255, .72); font-size: .95rem; font-weight: 500; text-align: left; transition: background .25s, color .25s; }
.lh-tabs .filter-tab::after { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .5; transition: all .25s; }
.lh-tabs .filter-tab:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lh-tabs .filter-tab.is-active { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 3px 0 0 #4FC3B5; }
.lh-tabs .filter-tab.is-active::after { background: #4FC3B5; border-color: #4FC3B5; opacity: 1; box-shadow: 0 0 0 4px rgba(79, 195, 181, .2); }

.lh-journal__list { border-top: 1px solid var(--line); counter-reset: art; }
.lh-row { --cat: var(--brand-2-ink); counter-increment: art; position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1rem 1.25rem; align-items: center; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.lh-row--guide { --cat: var(--primary); }
.lh-row--scheme { --cat: var(--black); }
.lh-row::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--brand-2); transition: width .5s var(--ease); }
.lh-row:hover::before { width: 100%; }
.lh-row__media { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 16px; }
.lh-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.lh-row:hover .lh-row__media img { transform: scale(1.06); }
.lh-row__media::after { content: counter(art, decimal-leading-zero); position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--black); font-size: 12px; font-weight: 600; }
.lh-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin-bottom: .45rem; font-size: 13px; }
.lh-row__tag { color: var(--cat); font-weight: 600; }
.lh-row__date { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
.lh-row__date .icon { width: 14px; height: 14px; }
.lh-row h3 { margin: 0 0 .35rem; color: var(--black); font-size: var(--font-h4); font-weight: 500; line-height: 1.45; transition: color .25s; }
.lh-row:hover h3 { color: var(--primary); }
.lh-row__body p { margin: 0; color: var(--text); font-size: .9375rem; line-height: 1.6; }
.lh-row__act { grid-column: 2; }
.lh-post__go { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--black); font-size: .875rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .25s, color .25s, border-color .25s, gap .25s var(--ease); }
.lh-post__go .icon { width: 15px; height: 15px; }
.lh-row:hover .lh-post__go, .lh-post__go:focus-visible { background: var(--black); border-color: var(--black); color: #fff; gap: .7rem; }
@media (min-width: 576px) { .lh-row { grid-template-columns: 150px minmax(0, 1fr); gap: 1rem 1.5rem; } .lh-row__media { aspect-ratio: 4 / 3; } }
@media (min-width: 768px) { .lh-row { grid-template-columns: 170px minmax(0, 1fr) auto; } .lh-row__act { grid-column: auto; } }
@media (min-width: 992px) {
  .lh-journal__layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: clamp(2.5rem, 4vw, 3.5rem); }
  .lh-journal__aside { position: sticky; top: 110px; }
  .lh-journal__list { border-top: 0; }
  .lh-row:first-child { padding-top: 0; }
}
@media (max-width: 991.98px) {
  .lh-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .4rem; scrollbar-width: none; }
  .lh-tabs::-webkit-scrollbar { display: none; }
  .lh-tabs .filter-tab { flex: none; width: auto; white-space: nowrap; border-radius: 999px; padding: .6rem 1rem; background: rgba(255, 255, 255, .06); }
  .lh-tabs .filter-tab::after { display: none; }
  .lh-tabs .filter-tab.is-active { background: #4FC3B5; color: var(--black); box-shadow: none; }
}
.lh-journal .filter-empty { margin: 2rem 0 0; color: var(--muted); }
@media (max-width: 767.98px) { .lh-row { align-items: start; } }

/* Learning Hub — level switch + offer refinements (tighter rhythm, shelf plank, detail) */
.lh-sub { padding-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.lh-sub__switch { margin: -31px 0 clamp(1.5rem, 3vw, 2rem); }
.lh-sub__switch .hub-toggle { padding: 5px; border-color: rgba(10, 37, 64, .08); box-shadow: 0 10px 26px -14px rgba(10, 37, 64, .35), 0 0 0 6px rgba(255, 255, 255, .6); }
.lh-sub__switch .hub-toggle::before { top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); box-shadow: 0 6px 14px -8px rgba(7, 87, 154, .8); }
.lh-sub__switch .hub-toggle__btn { min-width: 150px; padding: .75rem 1.6rem; }

.lh-shelf { gap: 2rem; padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 3.25rem) 0; border-radius: 22px; border-color: rgba(10, 37, 64, .08);
  background: radial-gradient(42% 70% at 82% 70%, rgba(79, 195, 181, .2), transparent 70%), radial-gradient(30% 50% at 0% 0%, rgba(7, 87, 154, .08), transparent 70%), linear-gradient(135deg, #fff 0%, var(--surface) 100%); }
.lh-shelf::before { content: ""; position: absolute; left: 0; top: 0; width: 46%; height: 70%; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(7, 87, 154, .22) 1px, transparent 1.2px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(80% 80% at 0% 0%, #000, transparent 75%); mask-image: radial-gradient(80% 80% at 0% 0%, #000, transparent 75%); }
.lh-shelf::after { display: none; }
.lh-shelf__copy { position: relative; padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.lh-shelf__copy h2 { position: relative; margin: 0 0 .75rem; padding-left: 1.1rem; font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.lh-shelf__copy h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #4FC3B5, var(--primary)); }
.lh-shelf__copy p { margin-bottom: 1.5rem; max-width: 46ch; }
.lh-shelf__copy .btn { gap: .7rem; padding-right: 1.4rem; }
.lh-shelf__copy .btn::after { content: ""; width: 26px; height: 26px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s var(--ease); }
.lh-shelf__copy .btn:hover::after { transform: translateX(3px); }

/* Books stand on a navy plank with a soft spotlight behind them */
.lh-shelf__books { height: 200px; margin-bottom: 0; padding-bottom: 14px; }
.lh-shelf__books::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 14px; width: 120%; height: 85%; transform: translateX(-50%); border-radius: 50% 50% 0 0; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent); }
.lh-shelf__books::after { content: ""; position: absolute; left: -18px; right: -18px; bottom: 0; height: 14px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #1F4E7A 0 3px, var(--black) 3px); box-shadow: 0 -2px 10px -4px rgba(10, 37, 64, .4); }
.lh-shelf__books i { border-radius: 4px 4px 1px 1px; }
.lh-shelf__books i:nth-child(5)::after { content: ""; position: absolute; left: 50%; bottom: 22%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid #4FC3B5; }
@media (min-width: 992px) {
  .lh-shelf { grid-template-columns: minmax(0, 1fr) auto; }
  .lh-shelf__books { height: 210px; margin-right: clamp(0rem, 2vw, 1.5rem); padding-right: 0; }
}
@media (max-width: 575.98px) { .lh-shelf__books { height: 140px; } .lh-shelf__books::after { left: -8px; right: -8px; } .lh-shelf__copy h2 { padding-left: .9rem; } }

/* =========================================================================
   Success Stories (.ss) — photo-wall hero, spotlight carousel, staggered
   story index, portrait-row CTA.
   ========================================================================= */
.ss section { position: relative; }
.ss-q { width: 100%; height: auto; fill: currentColor; }
.ss-head { max-width: 640px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.ss-head h2 { margin: 0; }
.ss-head--left { margin-left: 0; text-align: left; }

/* Hero */
.ss-hero { overflow: hidden; isolation: isolate; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  background: radial-gradient(45% 60% at 100% 0%, rgba(79, 195, 181, .16), transparent 70%), linear-gradient(180deg, var(--surface) 0%, #fff 100%); }
.ss-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .6; background-image: radial-gradient(rgba(7, 87, 154, .16) 1px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(60% 70% at 0% 100%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 0% 100%, #000, transparent 75%); }
.ss-hero__grid { display: grid; gap: clamp(3rem, 6vw, 4.5rem); align-items: center; }
.ss-hero .eyebrow { color: var(--muted); font-size: var(--font-lead); margin-bottom: .5rem; }
.ss-hero h1 { margin: 0 0 1.25rem; max-width: 14ch; }
.ss-hero__lede { position: relative; margin: 0; max-width: 50ch; padding-left: 1.25rem; color: var(--text); font-size: var(--font-lead); line-height: 1.7; }
.ss-hero__lede::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #4FC3B5, var(--primary)); }
.ss-wall { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1 / .92; margin: 0 auto; }
.ss-wall__p { position: absolute; margin: 0; overflow: hidden; border: 6px solid #fff; box-shadow: 0 30px 60px -30px rgba(10, 37, 64, .55); }
.ss-wall__p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-wall__p--1 { left: 14%; top: 0; width: 56%; height: 82%; border-radius: 200px 200px 22px 22px; z-index: 1; }
.ss-wall__p--2 { right: 0; top: 10%; width: 34%; aspect-ratio: 1; border-radius: 50%; z-index: 2; }
.ss-wall__p--3 { left: 0; bottom: 0; width: 42%; aspect-ratio: 6 / 5; border-radius: 20px; z-index: 2; transform: rotate(-4deg); }
.ss-wall__quote { position: absolute; z-index: 3; right: 6%; bottom: 8%; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 24px; background: var(--black); color: #4FC3B5; box-shadow: 0 22px 40px -18px rgba(10, 37, 64, .7); transform: rotate(6deg); }
.ss-wall__quote .ss-q { width: 40px; }
.ss-wall__ring { position: absolute; z-index: 0; right: 4%; top: 46%; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(26, 154, 140, .45); }
@media (min-width: 992px) { .ss-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .ss-wall { margin: 0 0 0 auto; } }
@media (max-width: 575.98px) { .ss-wall__p { border-width: 4px; } .ss-wall__quote { width: 64px; height: 64px; border-radius: 18px; } .ss-wall__quote .ss-q { width: 30px; } }

/* Featured — spotlight carousel (photo + quote), side slides recede */
.ss-featured { padding: clamp(3.5rem, 7vw, 6rem) 0; background: #fff; }
.ss-featured::before { display: none; }
.ss-featured .swiper { padding: 10px 0 34px; }
.ss-featured .swiper-slide { width: 860px; max-width: 90vw; transform: scale(.9); opacity: .4; filter: saturate(.5); }
.ss-featured .swiper-slide-active { transform: none; opacity: 1; filter: none; }
.ss-spot { display: grid; height: 100%; overflow: hidden; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); transition: background .6s, box-shadow .6s; }
.swiper-slide-active .ss-spot { background: linear-gradient(150deg, var(--black) 0%, #0E3558 100%); border-color: transparent; box-shadow: 0 40px 80px -40px rgba(10, 37, 64, .7); }
.ss-spot__media { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.ss-spot__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-spot__num { position: absolute; left: 18px; bottom: 14px; color: #fff; font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; text-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.ss-spot__body { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.ss-spot__body > .ss-q { position: absolute; right: clamp(1.25rem, 3vw, 2.25rem); top: clamp(1.25rem, 3vw, 2.25rem); width: 46px; color: var(--brand-2); opacity: .25; }
.ss-spot__tag { align-self: flex-start; margin-bottom: 1rem; padding: 4px 12px; border-radius: 999px; background: rgba(26, 154, 140, .12); color: var(--brand-2-ink); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ss-spot h3 { margin: 0 0 .9rem; padding-right: 3rem; color: var(--black); font-size: var(--font-h3); font-weight: 500; line-height: 1.35; }
.ss-spot blockquote { margin: 0 0 1.5rem; color: var(--text); font-size: var(--font-body); line-height: 1.75; }
.ss-spot__place { display: inline-flex; align-items: center; gap: .45rem; margin: auto 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.ss-spot__place .icon { width: 16px; height: 16px; color: var(--brand-2); }
.swiper-slide-active .ss-spot h3 { color: #fff; }
.swiper-slide-active .ss-spot blockquote { color: rgba(255, 255, 255, .86); }
.swiper-slide-active .ss-spot__tag { background: rgba(79, 195, 181, .16); color: #4FC3B5; }
.swiper-slide-active .ss-spot__place { color: rgba(255, 255, 255, .65); border-top-color: rgba(255, 255, 255, .14); }
.swiper-slide-active .ss-spot__place .icon { color: #4FC3B5; }
.swiper-slide-active .ss-spot__body > .ss-q { color: #4FC3B5; opacity: .5; }
@media (min-width: 768px) { .ss-spot { grid-template-columns: 38% 1fr; } .ss-spot__media { aspect-ratio: auto; min-height: 380px; } }
.ss-featured .stories__bar { max-width: 860px; }
.ss-featured .stories__arrow { width: 52px; height: 52px; border-radius: 50%; }

/* CTA — portrait row + copy + button on navy */
.ss-cta { padding: clamp(3rem, 6vw, 4.5rem) 0; background: #fff; }
.ss-cta__inner { position: relative; overflow: hidden; display: grid; gap: 1.5rem; justify-items: start; padding: clamp(2rem, 4.5vw, 3.25rem); border-radius: 26px; color: #fff;
  background: radial-gradient(50% 90% at 100% 100%, rgba(79, 195, 181, .28), transparent 70%), linear-gradient(135deg, var(--black) 0%, #0E3558 100%); }
.ss-cta__inner::after { content: ""; position: absolute; right: -50px; top: -50px; width: 200px; height: 200px; border-radius: 50%; border: 1.5px dashed rgba(79, 195, 181, .4); }
.ss-cta__faces { display: flex; }
.ss-cta__faces img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--black); margin-left: -14px; }
.ss-cta__faces img:first-child { margin-left: 0; }
.ss-cta__copy h2 { margin: 0 0 .5rem; color: #fff; }
.ss-cta__copy p { margin: 0; max-width: 48ch; color: var(--on-dark); font-size: var(--font-body); line-height: 1.7; }
.ss-cta .btn--accent { position: relative; z-index: 1; background: #4FC3B5; border-color: #4FC3B5; color: var(--black); }
.ss-cta .btn--accent:hover { color: var(--black); }
@media (min-width: 992px) { .ss-cta__inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2.5rem; } }
.ss-cta__copy h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
@media (max-width: 575.98px) { .ss-featured .stories__bar { grid-template-columns: auto 1fr auto; } }

/* More Stories — expanding photo gallery: hover / focus a panel to open its story */
.ss-more { padding: clamp(3.5rem, 7vw, 6rem) 0; overflow: hidden; background: linear-gradient(170deg, var(--black) 0%, #0E3558 100%); color: #fff; }
.ss-more::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 80%); }
.ss-more::after { content: ""; position: absolute; right: -140px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(79, 195, 181, .22), transparent); pointer-events: none; }
.ss-more .ss-head .eyebrow { color: #4FC3B5; }
.ss-more .ss-head h2 { color: #fff; }
.ss-acc { position: relative; z-index: 1; display: flex; gap: 12px; height: 560px; }
.ss-pane { --open: 0; position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 22px; cursor: pointer; outline: none; isolation: isolate;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8); transition: flex-grow .7s cubic-bezier(.22, .61, .36, 1), box-shadow .5s; }
.ss-pane.is-open, .ss-acc:hover .ss-pane:hover, .ss-pane:focus-visible, .ss-acc:focus-within .ss-pane:focus-within { flex-grow: 5.2; --open: 1; }
.ss-acc:hover .ss-pane.is-open:not(:hover), .ss-acc:focus-within .ss-pane.is-open:not(:focus-within) { flex-grow: 1; --open: 0; }
.ss-pane__img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: grayscale(.55) brightness(.8); transition: transform 1.1s var(--ease), filter .7s; }
.ss-pane::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(10, 37, 64, .15) 0%, rgba(10, 37, 64, .55) 45%, rgba(10, 37, 64, .95) 100%); }
.ss-pane::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #4FC3B5, var(--primary)); transform: scaleX(var(--open)); transform-origin: left; transition: transform .7s var(--ease); }
.ss-pane__num { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 14px; font-weight: 600; backdrop-filter: blur(6px); transition: left .7s var(--ease), transform .7s var(--ease), background .4s; }
.ss-pane__spine { position: absolute; left: 50%; bottom: 28px; max-height: 70%; overflow: hidden; color: #fff; font-size: .95rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); opacity: calc(1 - var(--open)); transition: opacity .35s; }
.ss-pane__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.5rem, 3vw, 2.5rem); opacity: var(--open); transform: translateY(calc((1 - var(--open)) * 24px)); transition: opacity .45s .15s, transform .6s .15s var(--ease); min-width: 420px; pointer-events: none; }
.ss-pane__body .ss-q { width: 40px; margin-bottom: 1rem; color: #4FC3B5; }
.ss-pane__tag { display: inline-block; margin-bottom: .75rem; padding: 4px 12px; border-radius: 999px; background: rgba(79, 195, 181, .18); color: #4FC3B5; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ss-pane h3 { margin: 0 0 .75rem; color: #fff; font-size: var(--font-h3); font-weight: 500; line-height: 1.35; }
.ss-pane blockquote { margin: 0 0 1.1rem; max-width: 58ch; color: rgba(255, 255, 255, .86); font-size: .9875rem; line-height: 1.7; }
.ss-pane__place { display: inline-flex; align-items: center; gap: .45rem; margin: 0; color: rgba(255, 255, 255, .7); font-size: .875rem; }
.ss-pane__place .icon { width: 16px; height: 16px; color: #4FC3B5; }
.ss-pane.is-open .ss-pane__img, .ss-acc:hover .ss-pane:hover .ss-pane__img, .ss-pane:focus-within .ss-pane__img { transform: scale(1); filter: none; }
.ss-acc:hover .ss-pane.is-open:not(:hover) .ss-pane__img { transform: scale(1.08); filter: grayscale(.55) brightness(.8); }
.ss-pane.is-open .ss-pane__num, .ss-acc:hover .ss-pane:hover .ss-pane__num, .ss-pane:focus-within .ss-pane__num { left: 28px; transform: none; background: #4FC3B5; border-color: #4FC3B5; color: var(--black); }
.ss-acc:hover .ss-pane.is-open:not(:hover) .ss-pane__num { left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
.ss-pane:focus-visible { box-shadow: 0 0 0 3px #4FC3B5, 0 30px 60px -36px rgba(0, 0, 0, .8); }

/* Tablet & phone: panels stack as photo-backed story blocks, all open */
@media (max-width: 991.98px) {
  .ss-acc { flex-direction: column; height: auto; gap: 16px; }
  .ss-pane, .ss-pane.is-open, .ss-acc:hover .ss-pane.is-open:not(:hover) { --open: 1; flex: none; min-height: 420px; display: flex; align-items: flex-end; }
  .ss-pane__img, .ss-acc:hover .ss-pane.is-open:not(:hover) .ss-pane__img { transform: none; filter: none; }
  .ss-pane__num, .ss-acc:hover .ss-pane.is-open:not(:hover) .ss-pane__num { left: 22px; transform: none; background: #4FC3B5; border-color: #4FC3B5; color: var(--black); }
  .ss-pane__spine { display: none; }
  .ss-pane__body { position: relative; min-width: 0; padding-top: 6rem; }
  .ss-pane::before { background: linear-gradient(180deg, rgba(10, 37, 64, 0) 0%, rgba(10, 37, 64, .7) 40%, rgba(10, 37, 64, .96) 100%); }
}
@media (min-width: 768px) and (max-width: 991.98px) { .ss-acc { display: grid; grid-template-columns: 1fr 1fr; } }

/* Success Stories hero — arrow-on-target photo, mirrored so the target sits behind the photo
   collage on the right and the plain backdrop falls behind the heading on the left. */
.ss-hero::after { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: -16%; right: 16%; background: url("../img/success-hero-target.jpg") 50% 50% / cover no-repeat; opacity: .1; transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 30%, #000 75%, transparent 100%), linear-gradient(180deg, #000 50%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(270deg, transparent 0%, #000 30%, #000 75%, transparent 100%), linear-gradient(180deg, #000 50%, transparent 100%); mask-composite: intersect; }
@media (max-width: 991.98px) { .ss-hero::after { left: 0; right: 0; background-position: 30% 50%; opacity: .12; -webkit-mask-image: linear-gradient(180deg, transparent 25%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, transparent 25%, #000 60%, transparent 100%); } }
/* Orange wash spread across the whole hero, under the target photo (edges blend into it) */
.ss-hero { background: linear-gradient(180deg, rgba(236, 118, 80, .09) 0%, rgba(236, 118, 80, .09) 55%, rgba(236, 118, 80, 0) 100%), #fff; }
.ss-hero::before { -webkit-mask-image: radial-gradient(55% 55% at 0% 65%, #000, transparent 75%); mask-image: radial-gradient(55% 55% at 0% 65%, #000, transparent 75%); }
.lh-sub__switch { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.lh-hero { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.lh-player__screen img { object-position: 50% 40%; }

/* Learning Hub — article list refinements: the first visible article is a featured story,
   rows sit on soft hover panels, and articles fade up when the filter changes. */
.lh-journal__list { display: grid; gap: .5rem; align-content: start; border-top: 0; }
.lh-row { padding: 1.1rem; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 18px; transition: background .35s, border-color .35s, box-shadow .35s; }
.lh-row::before { display: none; }
.lh-row:hover { background: var(--surface-2); border-color: var(--line); box-shadow: 0 18px 40px -30px rgba(10, 37, 64, .45); }
@keyframes lh-row-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lh-row:not(.is-hidden) { animation: lh-row-in .55s cubic-bezier(.22, .61, .36, 1) both; }
.lh-row:not(.is-hidden):nth-child(2 of .lh-row:not(.is-hidden)) { animation-delay: .06s; }
.lh-row:not(.is-hidden):nth-child(3 of .lh-row:not(.is-hidden)) { animation-delay: .12s; }
.lh-row:not(.is-hidden):nth-child(n+4 of .lh-row:not(.is-hidden)) { animation-delay: .18s; }

/* Featured (first visible) article */
@media (max-width: 575.98px) { .lh-row { padding: .9rem .25rem; } }

/* =========================================================================
   Learning Hub — ADVANCED view (.lx). Same content as Basic, premium design:
   the page below the hero turns midnight, with glass surfaces, gradient
   borders, a 3D lesson deck, a cinematic video rail and a bento article grid.
   ========================================================================= */
.lh { --lx-bg: #061A2E; --lx-bg-2: #0A2540; --lx-glass: rgba(255, 255, 255, .06); --lx-line: rgba(255, 255, 255, .12); --lx-teal: #4FC3B5; }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub { background: var(--lx-bg); transition: background .5s; }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle { background: rgba(255, 255, 255, .06); border-color: var(--lx-line); box-shadow: 0 0 0 1px rgba(79, 195, 181, .15), 0 20px 40px -20px rgba(0, 0, 0, .8); }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle::before { background: linear-gradient(135deg, #1A9A8C 0%, #4FC3B5 100%); box-shadow: 0 0 22px rgba(79, 195, 181, .55); }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle__btn { color: rgba(255, 255, 255, .6); }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle__btn[aria-pressed="true"] { color: var(--black); }
.lh:has([data-hub="premium"][aria-pressed="true"]) .hub-toggle__btn[aria-pressed="true"] .hub-toggle__lvl i { background: var(--black); }
.lh-sub [data-hub-panel="premium"]:not([hidden]) { animation: lx-in .6s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes lx-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Shared */
.lx-head { position: relative; z-index: 1; display: grid; gap: 1.5rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lx-head .eyebrow { color: var(--lx-teal); }
.lx-head h2 { margin: 0 0 .75rem; color: #fff; }
.lx-head p:not(.eyebrow) { margin: 0; max-width: 58ch; color: rgba(255, 255, 255, .7); font-size: var(--font-body); line-height: 1.7; }
.lx-head--center { justify-items: center; text-align: center; }
.lx-head--center p:not(.eyebrow) { margin-inline: auto; }
@media (min-width: 768px) { .lx-head:not(.lx-head--center) { grid-template-columns: minmax(0, 1fr) auto; } }

/* Offer — glowing gradient-border panel + 3D lesson deck */
.lx-offer { position: relative; isolation: isolate; display: grid; gap: 2.5rem; align-items: center; overflow: hidden; padding: clamp(2rem, 4.5vw, 3.5rem); border-radius: 26px; color: #fff;
  border: 1px solid transparent; background: radial-gradient(60% 90% at 100% 50%, rgba(79, 195, 181, .2), transparent 70%) padding-box, linear-gradient(150deg, #0D2F52 0%, #08203A 100%) padding-box,
  linear-gradient(120deg, rgba(79, 195, 181, .8), rgba(7, 87, 154, .2) 40%, rgba(79, 195, 181, .6)) border-box; box-shadow: 0 40px 90px -50px rgba(79, 195, 181, .45); }
.lx-offer::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(70% 90% at 0% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 90% at 0% 0%, #000, transparent 75%); }
.lx-offer__copy h2 { margin: 0 0 .9rem; color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.25rem); background: linear-gradient(90deg, #fff 30%, #9FE4DA); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lx-offer__copy p { margin: 0 0 1.75rem; max-width: 46ch; color: rgba(255, 255, 255, .74); font-size: var(--font-body); line-height: 1.75; }
.lx-offer .btn--accent { background: var(--lx-teal); border-color: var(--lx-teal); color: var(--black); box-shadow: 0 0 0 0 rgba(79, 195, 181, .5); animation: lx-ping 2.6s ease-out infinite; }
.lx-offer .btn--accent:hover { color: var(--black); }
@keyframes lx-ping { 0% { box-shadow: 0 0 0 0 rgba(79, 195, 181, .45); } 70%, 100% { box-shadow: 0 0 0 16px rgba(79, 195, 181, 0); } }
.lx-offer__deck { position: relative; height: 240px; perspective: 900px; }
.lx-card { position: absolute; left: 50%; top: 50%; width: 220px; aspect-ratio: 16 / 10; margin: -69px 0 0 -110px; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .7); transform-style: preserve-3d; transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.lx-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-card i { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); }
.lx-card i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 60%; border-radius: inherit; background: var(--lx-teal); box-shadow: 0 0 10px var(--lx-teal); }
.lx-card--1 { transform: rotateY(-18deg) rotateX(6deg) translateZ(40px); z-index: 3; }
.lx-card--2 { transform: rotateY(-18deg) rotateX(6deg) translate3d(-70px, -34px, 0) scale(.9); z-index: 2; opacity: .8; }
.lx-card--3 { transform: rotateY(-18deg) rotateX(6deg) translate3d(-130px, -64px, -40px) scale(.8); z-index: 1; opacity: .55; }
.lx-card--2 i::after { width: 35%; } .lx-card--3 i::after { width: 85%; }
.lx-card__play { position: absolute; left: 50%; top: 45%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--black); box-shadow: 0 0 0 8px rgba(255, 255, 255, .18); }
.lx-card__play .icon { width: 16px; height: 16px; margin-left: 2px; fill: currentColor; }
.lx-offer:hover .lx-card--1 { transform: rotateY(-6deg) rotateX(2deg) translateZ(70px); }
.lx-offer:hover .lx-card--2 { transform: rotateY(-10deg) rotateX(4deg) translate3d(-96px, -44px, 0) scale(.9); }
.lx-offer:hover .lx-card--3 { transform: rotateY(-14deg) rotateX(6deg) translate3d(-170px, -80px, -40px) scale(.8); }
.lx-offer__orbit { position: absolute; z-index: 0; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; border: 1.5px dashed rgba(79, 195, 181, .35); animation: lx-spin 40s linear infinite; }
.lx-offer__orbit::after { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--lx-teal); box-shadow: 0 0 14px var(--lx-teal); }
@keyframes lx-spin { to { transform: rotate(360deg); } }
@media (min-width: 992px) { .lx-offer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lx-offer__deck { height: 280px; } .lx-card { width: 260px; margin: -81px 0 0 -90px; } }
@media (max-width: 575.98px) { .lx-offer__deck { height: 200px; } .lx-card { width: 170px; margin: -53px 0 0 -60px; } .lx-offer__orbit { width: 220px; height: 220px; margin: -110px 0 0 -110px; } }

/* Videos — cinematic snap rail */
.lx-reel { padding: clamp(3.5rem, 7vw, 6rem) 0; overflow: hidden; background: var(--lx-bg); color: #fff; }
.lx-reel::before { content: ""; position: absolute; left: 50%; top: 0; width: 900px; height: 500px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(7, 87, 154, .35), transparent); pointer-events: none; }
.lx-rail__nav { display: flex; gap: .6rem; }
.lx-rail__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--lx-line); background: var(--lx-glass); color: #fff; transition: background .25s, border-color .25s, color .25s; }
.lx-rail__btn:hover { background: var(--lx-teal); border-color: var(--lx-teal); color: var(--black); }
.lx-rail__btn .icon { width: 20px; height: 20px; }
.lx-rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 30%); gap: 1.25rem; margin: 0 calc(50% - 50vw); padding: .5rem max(16px, calc(50vw - 50%)) 1.5rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(16px, calc(50vw - 50%)); scrollbar-width: none; }
.lx-rail::-webkit-scrollbar { display: none; }
.lx-rail__item { scroll-snap-align: start; }
.lx-rail__item--lead { grid-column: span 1; }
@media (min-width: 992px) { .lx-rail { grid-auto-columns: minmax(300px, 27%); } .lx-rail__item--lead { grid-column: span 2; } }
.lx-vid { position: relative; display: block; width: 100%; height: 100%; min-height: 380px; overflow: hidden; padding: 0; border: 1px solid var(--lx-line); border-radius: 22px; background: var(--lx-bg-2); color: #fff; text-align: left; cursor: pointer; isolation: isolate; transition: transform .5s cubic-bezier(.22, .61, .36, 1), border-color .4s, box-shadow .5s; }
.lx-vid img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22, .61, .36, 1), filter .5s; filter: saturate(.85) brightness(.85); }
.lx-vid::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(6, 26, 46, 0) 25%, rgba(6, 26, 46, .65) 55%, rgba(6, 26, 46, .97) 100%); }
.lx-vid:hover, .lx-vid:focus-visible { transform: translateY(-6px); border-color: rgba(79, 195, 181, .6); box-shadow: 0 30px 60px -30px rgba(79, 195, 181, .5); outline: none; }
.lx-vid:hover img { transform: scale(1.06); filter: none; }
.lx-vid__num { position: absolute; left: 18px; top: 16px; color: transparent; font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .55); }
.lx-vid__play { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); color: #fff; backdrop-filter: blur(8px); transition: background .3s, color .3s, transform .3s; }
.lx-vid__play .icon { width: 16px; height: 16px; margin-left: 2px; fill: currentColor; }
.lx-vid:hover .lx-vid__play { background: var(--lx-teal); border-color: var(--lx-teal); color: var(--black); transform: scale(1.08); }
.lx-vid__body { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 1.5rem; }
.lx-vid__body h3 { margin: 0 0 .4rem; color: #fff; font-size: var(--font-h4); font-weight: 500; line-height: 1.4; }
.lx-vid__body p { margin: 0 0 1rem; color: rgba(255, 255, 255, .72); font-size: .9rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lx-vid__meta { display: flex; align-items: center; gap: .75rem; }
.lx-vid__bar { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.lx-vid__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--lx-teal); box-shadow: 0 0 8px var(--lx-teal); transition: width 1.2s cubic-bezier(.22, .61, .36, 1); }
.lx-vid:hover .lx-vid__bar i { width: 100%; }
.lx-vid__dur { color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lx-rail__item--lead .lx-vid__play { left: 50%; top: 42%; right: auto; width: 80px; height: 80px; margin: -40px 0 0 -40px; box-shadow: 0 0 0 12px rgba(255, 255, 255, .08); }
.lx-rail__item--lead .lx-vid__play .icon { width: 26px; height: 26px; }
.lx-rail__item--lead .lx-vid__body h3 { font-size: var(--font-h3); }
@media (max-width: 575.98px) { .lx-rail { grid-auto-columns: 82%; } .lx-vid { min-height: 340px; } }

/* Blogs — bento grid of image tiles with glass text panels */
.lx-journal { padding: clamp(3.5rem, 7vw, 6rem) 0; background: linear-gradient(180deg, var(--lx-bg) 0%, #0A2540 100%); color: #fff; overflow: hidden; }
.lx-journal::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.lx-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: .5rem 0 0; padding: 6px; border-radius: 999px; border: 1px solid var(--lx-line); background: var(--lx-glass); backdrop-filter: blur(10px); }
.lx-tabs .filter-tab { padding: .55rem 1.1rem; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .7); font-size: .9rem; font-weight: 500; transition: background .3s, color .3s, box-shadow .3s; }
.lx-tabs .filter-tab:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.lx-tabs .filter-tab.is-active { background: var(--lx-teal); color: var(--black); box-shadow: 0 0 18px rgba(79, 195, 181, .5); }
@media (max-width: 991.98px) { .lx-tabs { display: flex; flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .lx-tabs::-webkit-scrollbar { display: none; } .lx-tabs .filter-tab { flex: none; white-space: nowrap; } }
.lx-bento { position: relative; z-index: 1; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .lx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 300px; } .lx-tile:nth-child(1 of .lx-tile:not(.is-hidden)) { grid-column: 1 / -1; } }
@media (min-width: 992px) { .lx-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 290px; } .lx-tile:nth-child(1 of .lx-tile:not(.is-hidden)) { grid-column: span 2; grid-row: span 2; } }
.lx-tile { --cat: var(--lx-teal); position: relative; display: flex; min-height: 300px; overflow: hidden; border-radius: 22px; border: 1px solid var(--lx-line); isolation: isolate; transition: transform .5s cubic-bezier(.22, .61, .36, 1), border-color .4s, box-shadow .5s; }
.lx-tile--guide { --cat: #6FB6F2; } .lx-tile--scheme { --cat: #F2C66F; } .lx-tile--literacy { --cat: #9FE4DA; }
.lx-tile:not(.is-hidden) { animation: lx-in .55s cubic-bezier(.22, .61, .36, 1) both; }
.lx-tile__img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22, .61, .36, 1); }
.lx-tile::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(6, 26, 46, .05) 0%, rgba(6, 26, 46, .55) 45%, rgba(6, 26, 46, .96) 100%); }
.lx-tile:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--cat) 60%, transparent); box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .8); }
.lx-tile:hover .lx-tile__img { transform: scale(1.06); }
.lx-tile__body { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; padding: 1.5rem; }
.lx-tile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-bottom: .6rem; font-size: 12.5px; }
.lx-tile__tag { padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--cat) 22%, transparent); border: 1px solid color-mix(in srgb, var(--cat) 45%, transparent); color: var(--cat); font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(6px); }
.lx-tile__date { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255, 255, 255, .7); }
.lx-tile__date .icon { width: 14px; height: 14px; }
.lx-tile h3 { margin: 0 0 .45rem; color: #fff; font-size: var(--font-h4); font-weight: 500; line-height: 1.4; }
.lx-tile p { margin: 0 0 1rem; color: rgba(255, 255, 255, .75); font-size: .9rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lx-go { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; padding: .55rem 1.05rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); color: #fff; font-size: .875rem; font-weight: 500; cursor: pointer; backdrop-filter: blur(8px); transition: background .3s, color .3s, border-color .3s, gap .3s; }
.lx-go .icon { width: 15px; height: 15px; }
.lx-tile:hover .lx-go, .lx-go:focus-visible { background: var(--cat); border-color: var(--cat); color: var(--black); gap: .75rem; }
.lx-tile:nth-child(1 of .lx-tile:not(.is-hidden)) .lx-tile__body { padding: clamp(1.5rem, 3vw, 2.5rem); }
.lx-tile:nth-child(1 of .lx-tile:not(.is-hidden)) h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); max-width: 24ch; }
.lx-tile:nth-child(1 of .lx-tile:not(.is-hidden)) p { -webkit-line-clamp: 3; max-width: 52ch; font-size: var(--font-body); }
.lx-journal .filter-empty { position: relative; margin: 2rem 0 0; text-align: center; color: rgba(255, 255, 255, .7); }
@media (prefers-reduced-motion: reduce) { .lx-offer__orbit, .lx-offer .btn--accent { animation: none; } }
.lx-rail { margin: 0 calc(50% - 50vw) 0 0; padding: .5rem calc(50vw - 50%) 1.5rem 0; scroll-padding-inline: 0; }
.lx-tile::after { background: linear-gradient(180deg, rgba(6, 26, 46, .2) 0%, rgba(6, 26, 46, .78) 42%, rgba(6, 26, 46, .97) 100%); }
.lx-tile:nth-child(1 of .lx-tile:not(.is-hidden))::after { background: linear-gradient(180deg, rgba(6, 26, 46, .05) 20%, rgba(6, 26, 46, .7) 55%, rgba(6, 26, 46, .97) 100%); }
.lx-tile__tag { background: rgba(6, 26, 46, .7); }
.lx-rail { margin: 0 calc(50% - 50vw); padding: .5rem calc(50vw - 50%) 1.5rem; }

/* ---------- Learning Hub ADVANCED — extra polish ----------
   aurora backdrop, pill eyebrows, gradient headings, rotating conic borders on the
   featured pieces, a cursor-following border glow on every card, and 3D tilt on videos. */
@property --lx-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes lx-rotate { to { --lx-ang: 360deg; } }
@keyframes lx-aurora { 0% { transform: translate(-10%, -6%) rotate(0deg) scale(1); } 50% { transform: translate(8%, 6%) rotate(12deg) scale(1.15); } 100% { transform: translate(-10%, -6%) rotate(0deg) scale(1); } }
@keyframes lx-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(79, 195, 181, .7); } 60% { box-shadow: 0 0 0 7px rgba(79, 195, 181, 0); } }

/* Aurora backdrop drifting behind both Advanced sections */
.lx-reel::after, .lx-journal::after { content: ""; position: absolute; z-index: 0; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; border-radius: 50%; pointer-events: none; filter: blur(90px); opacity: .55; animation: lx-aurora 22s ease-in-out infinite; }
.lx-reel::after { right: -20%; top: -30%; background: radial-gradient(circle, rgba(79, 195, 181, .55), rgba(7, 87, 154, .25) 50%, transparent 70%); }
.lx-journal::after { left: -25%; bottom: -35%; background: radial-gradient(circle, rgba(7, 87, 154, .6), rgba(79, 195, 181, .2) 50%, transparent 70%); animation-duration: 28s; animation-direction: reverse; }
.lx-reel > .container, .lx-journal > .container { position: relative; z-index: 1; }

/* Headings */
.lx-head .eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem; padding: 6px 14px 6px 10px; border-radius: 999px; border: 1px solid rgba(79, 195, 181, .35); background: rgba(79, 195, 181, .08); color: #9FE4DA; font-size: 13px; letter-spacing: .04em; backdrop-filter: blur(8px); }
.lx-head .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lx-teal); animation: lx-dot 2.2s ease-out infinite; }
.lx-head h2 { background: linear-gradient(100deg, #fff 0%, #fff 45%, #9FE4DA 75%, #4FC3B5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Rotating conic border on the offer panel */
.lx-offer { border: 0; background: radial-gradient(60% 90% at 100% 50%, rgba(79, 195, 181, .22), transparent 70%), linear-gradient(150deg, #0D2F52 0%, #08203A 100%); }
.lx-offer::after { content: ""; position: absolute; z-index: 2; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--lx-ang), rgba(79, 195, 181, 0) 0deg, rgba(79, 195, 181, .95) 60deg, rgba(7, 87, 154, .6) 120deg, rgba(79, 195, 181, 0) 180deg, rgba(79, 195, 181, .15) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: lx-rotate 6s linear infinite; }

/* Card borders: cursor-following glow on every card, rotating conic ring on the featured ones */
.lx-vid, .lx-tile { --mx: 50%; --my: 0%; border-color: rgba(255, 255, 255, .1); }
.lx-vid::before, .lx-tile::before { content: ""; position: absolute; z-index: 3; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(79, 195, 181, 1), rgba(79, 195, 181, .25) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.lx-vid:hover::before, .lx-tile:hover::before { opacity: 1; }
.lx-rail__item--lead .lx-vid::before, .lx-tile:nth-child(1 of .lx-tile:not(.is-hidden))::before { opacity: 1;
  background: conic-gradient(from var(--lx-ang), transparent 0deg, rgba(79, 195, 181, .95) 70deg, rgba(159, 228, 218, .5) 110deg, transparent 170deg, transparent 360deg); animation: lx-rotate 7s linear infinite; }
/* Soft spotlight inside the card that follows the cursor */
.lx-vid .lx-vid__body::before, .lx-tile .lx-tile__body::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(380px circle at var(--mx) var(--my), rgba(79, 195, 181, .16), transparent 60%); }
.lx-tile__body { position: relative; }
.lx-tile:hover .lx-tile__body::before { opacity: 1; }
.lx-vid { transform-style: preserve-3d; will-change: transform; }
.lx-vid:hover, .lx-vid:focus-visible { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.lx-vid__play { transform: translateZ(30px); }
.lx-vid__num { background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(79, 195, 181, .2)); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; color: transparent; }

/* Lesson deck: gentle float */
@keyframes lx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.lx-card--1 { animation: lx-float 5s ease-in-out infinite; }
.lx-card--2 { animation: lx-float 5s -1.6s ease-in-out infinite; }
.lx-card--3 { animation: lx-float 5s -3.2s ease-in-out infinite; }

/* Filter pill: sliding glow under the active tab */
.lx-tabs .filter-tab.is-active { background: linear-gradient(135deg, #4FC3B5, #9FE4DA); }

@media (prefers-reduced-motion: reduce) {
  .lx-reel::after, .lx-journal::after, .lx-offer::after, .lx-card--1, .lx-card--2, .lx-card--3, .lx-head .eyebrow::before,
  .lx-rail__item--lead .lx-vid::before, .lx-tile:nth-child(1 of .lx-tile:not(.is-hidden))::before { animation: none; }
}
/* Keep glows away from the section seam so the dark area flows as one piece */
.lx-reel::before { top: 140px; }
.lx-reel::after { top: 12%; }
.lx-offer { box-shadow: 0 0 60px -30px rgba(79, 195, 181, .35); }
.lh:has([data-hub="premium"][aria-pressed="true"]) { background: var(--lx-bg); }

/* ---------- Learning Hub ADVANCED v2 — Videos: cinema stage + film strip ---------- */
.lx-stage { position: relative; z-index: 1; display: grid; gap: 1rem; }
.lx-stage__screen { position: relative; display: block; width: 100%; aspect-ratio: 16 / 7.2; overflow: hidden; padding: 0; border: 0; border-radius: 26px; background: #04121F; color: #fff; text-align: left; cursor: pointer; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 100px -50px rgba(0, 0, 0, .9), 0 0 120px -60px rgba(79, 195, 181, .6); }
.lx-stage__img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .9s ease, transform 6s ease-out; }
.lx-stage__img.is-on { opacity: 1; transform: scale(1); }
.lx-stage__screen::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(4, 18, 31, .92) 0%, rgba(4, 18, 31, .55) 45%, rgba(4, 18, 31, .05) 75%), linear-gradient(0deg, rgba(4, 18, 31, .7), transparent 45%); }
.lx-stage__play { position: absolute; right: clamp(1.5rem, 6vw, 5rem); top: 50%; display: grid; place-items: center; width: 92px; height: 92px; margin-top: -46px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .4); color: #fff; backdrop-filter: blur(10px); transition: transform .4s cubic-bezier(.22, .61, .36, 1), background .3s, color .3s; }
.lx-stage__play::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); animation: lx-ping-ring 2.4s ease-out infinite; }
@keyframes lx-ping-ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.lx-stage__play .icon { width: 30px; height: 30px; margin-left: 5px; fill: currentColor; }
.lx-stage__screen:hover .lx-stage__play { transform: scale(1.08); background: var(--lx-teal); border-color: var(--lx-teal); color: var(--black); }
.lx-stage__cap { position: absolute; left: clamp(1.5rem, 4vw, 3rem); bottom: clamp(1.5rem, 4vw, 2.75rem); display: grid; grid-template-columns: auto 1fr; gap: .25rem 1.25rem; align-items: end; max-width: min(560px, 60%); }
.lx-stage__num { grid-row: span 2; align-self: start; color: transparent; font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 700; line-height: .85; letter-spacing: -.05em; -webkit-text-stroke: 1.2px rgba(159, 228, 218, .8); }
.lx-stage__text h3 { margin: 0 0 .5rem; color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 500; line-height: 1.3; }
.lx-stage__text p { margin: 0; color: rgba(255, 255, 255, .75); font-size: var(--font-body); line-height: 1.6; }
.lx-stage__dur { grid-column: 2; justify-self: start; margin-top: .75rem; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .85); font-size: 12px; font-weight: 500; }
.lx-stage__cap.is-swap { animation: lx-cap .6s cubic-bezier(.22, .61, .36, 1); }
@keyframes lx-cap { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.lx-stage__strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.lx-thumb { position: relative; display: grid; gap: .6rem; width: 100%; padding: .5rem .5rem .8rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; background: rgba(255, 255, 255, .04); color: #fff; text-align: left; cursor: pointer; overflow: hidden; transition: background .3s, border-color .3s, transform .4s cubic-bezier(.22, .61, .36, 1); }
.lx-thumb:hover { background: rgba(255, 255, 255, .08); transform: translateY(-3px); }
.lx-thumb.is-on { background: rgba(79, 195, 181, .1); border-color: rgba(79, 195, 181, .5); }
.lx-thumb__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; }
.lx-thumb__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.6) brightness(.75); transition: filter .4s; }
.lx-thumb:hover .lx-thumb__img img, .lx-thumb.is-on .lx-thumb__img img { filter: none; }
.lx-thumb__txt { display: grid; grid-template-columns: auto 1fr; gap: .1rem .5rem; padding: 0 .25rem; }
.lx-thumb__num { grid-row: span 2; color: var(--lx-teal); font-size: 12px; font-weight: 600; line-height: 1.5; }
.lx-thumb__title { color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lx-thumb__dur { color: rgba(255, 255, 255, .5); font-size: 12px; }
.lx-thumb__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .06); }
.lx-thumb__bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--lx-teal), #9FE4DA); box-shadow: 0 0 10px var(--lx-teal); }
.lx-thumb.is-on .lx-thumb__bar i { animation: lx-progress var(--stage-ms, 6000ms) linear forwards; }
.lx-stage.is-paused .lx-thumb.is-on .lx-thumb__bar i { animation-play-state: paused; }
@keyframes lx-progress { to { width: 100%; } }
@media (max-width: 991.98px) {
  .lx-stage__screen { aspect-ratio: 4 / 3; }
  .lx-stage__screen::after { background: linear-gradient(0deg, rgba(4, 18, 31, .95) 0%, rgba(4, 18, 31, .5) 55%, rgba(4, 18, 31, .1) 100%); }
  .lx-stage__cap { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; max-width: none; }
  .lx-stage__play { right: auto; left: 50%; top: 32%; width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .lx-stage__strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%); }
  .lx-stage__strip::-webkit-scrollbar { display: none; }
  .lx-stage__strip li { flex: 0 0 170px; scroll-snap-align: start; }
}
@media (max-width: 575.98px) { .lx-stage__screen { aspect-ratio: 4 / 4.6; } .lx-stage__num { font-size: 2.6rem; } .lx-stage__text p { font-size: .9rem; } }

/* ---------- Learning Hub ADVANCED v2 — Blogs & Articles: clean index + floating preview ---------- */
.lx-index { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .12); }
.lx-entry { --cat: var(--lx-teal); position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .12); transition: background .4s; }
.lx-entry--guide { --cat: #6FB6F2; } .lx-entry--scheme { --cat: #F2C66F; } .lx-entry--literacy { --cat: #9FE4DA; }
.lx-entry::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--cat) 14%, transparent), transparent); transition: width .55s cubic-bezier(.22, .61, .36, 1); pointer-events: none; }
.lx-entry:hover::before { width: 100%; }
.lx-entry:not(.is-hidden) { animation: lx-in .5s cubic-bezier(.22, .61, .36, 1) both; }
.lx-entry__num { color: rgba(255, 255, 255, .35); font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: color .3s; }
.lx-entry:hover .lx-entry__num { color: var(--cat); }
.lx-entry__thumb { display: none; }
.lx-entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-bottom: .5rem; font-size: 12.5px; }
.lx-entry__tag { display: inline-flex; align-items: center; gap: .45rem; color: var(--cat); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; font-size: 12px; }
.lx-entry__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cat); box-shadow: 0 0 10px var(--cat); }
.lx-entry__date { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255, 255, 255, .55); }
.lx-entry__date .icon { width: 14px; height: 14px; }
.lx-entry h3 { margin: 0 0 .35rem; color: #fff; font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 500; line-height: 1.35; transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.lx-entry:hover h3 { transform: translateX(6px); }
.lx-entry p { margin: 0; max-width: 64ch; color: rgba(255, 255, 255, .62); font-size: .9375rem; line-height: 1.6; }
.lx-act { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: transparent; color: #fff; font-size: .875rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .3s, color .3s, border-color .3s, gap .3s; }
.lx-act .icon { width: 15px; height: 15px; transition: transform .3s; }
.lx-entry:hover .lx-act, .lx-act:focus-visible { background: var(--cat); border-color: var(--cat); color: var(--black); }
.lx-entry:hover .lx-act .icon { transform: translate(2px, -2px); }
.lx-peek { position: absolute; z-index: 5; left: 0; top: 0; width: 280px; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 18px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.7) rotate(-4deg);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .15); transition: opacity .3s ease, transform .45s cubic-bezier(.22, .61, .36, 1); will-change: left, top; }
.lx-peek img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-index.is-peeking .lx-peek { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
.lx-tabs { margin-top: 1.25rem; }
@media (max-width: 767.98px) {
  .lx-entry { grid-template-columns: 96px minmax(0, 1fr); gap: .5rem 1rem; padding: 1.25rem 0; align-items: start; }
  .lx-entry__num { display: none; }
  .lx-entry__thumb { display: block; grid-row: span 2; width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
  .lx-entry__act { grid-column: 2; }
  .lx-act { padding: .55rem 1rem; }
  .lx-peek { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lx-stage__play::before { animation: none; } .lx-thumb.is-on .lx-thumb__bar i { animation: none; width: 100%; } }
@media (max-width: 767.98px) { .lx-entry__thumb { align-self: start; height: 96px; } }

/* ---------- Learning Hub ADVANCED v3 — Videos: 3D cover-flow showcase ---------- */
.lx-flow { position: relative; z-index: 1; height: clamp(300px, 34vw, 470px); margin-top: .5rem; perspective: 1600px; }
.lx-flow__track { position: relative; height: 100%; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }
.lx-flow__item { --o: 0; position: absolute; left: 50%; top: 0; width: min(64vw, 760px); height: 100%; margin-left: calc(min(64vw, 760px) / -2);
  transform: translateX(calc(var(--o) * 56%)) translateZ(calc(var(--a) * -180px)) rotateY(calc(var(--o) * -32deg)) scale(calc(1 - var(--a) * .06));
  opacity: calc(1 - var(--a) * .28); z-index: calc(10 - var(--a)); transition: transform .9s cubic-bezier(.22, .61, .36, 1), opacity .9s; }
.lx-flow__item[data-far] { opacity: 0; pointer-events: none; }
.lx-flow__card { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; padding: 0; border: 0; border-radius: 28px; background: #04121F; cursor: pointer; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 60px 90px -40px rgba(0, 0, 0, .9); -webkit-box-reflect: below 14px linear-gradient(transparent 70%, rgba(255, 255, 255, .12)); }
.lx-flow__card img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, .61, .36, 1), filter .9s; filter: brightness(.55) saturate(.7); }
.lx-flow__card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(80% 80% at 50% 40%, transparent 40%, rgba(4, 18, 31, .6)); }
.lx-flow__item.is-on .lx-flow__card img { filter: none; }
.lx-flow__item.is-on .lx-flow__card { box-shadow: 0 0 0 1px rgba(79, 195, 181, .5), 0 60px 110px -40px rgba(0, 0, 0, .95), 0 0 90px -30px rgba(79, 195, 181, .55); }
.lx-flow__item.is-on .lx-flow__card:hover img { transform: scale(1.04); }
.lx-flow__num { position: absolute; left: 26px; top: 20px; color: transparent; font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .7); }
.lx-flow__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .45); color: #fff; backdrop-filter: blur(12px); opacity: 0; transform: scale(.7); transition: opacity .5s .2s, transform .6s .2s cubic-bezier(.34, 1.56, .64, 1), background .3s, color .3s; }
.lx-flow__play::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); animation: lx-ping-ring 2.4s ease-out infinite; }
.lx-flow__play .icon { width: 30px; height: 30px; margin-left: 5px; fill: currentColor; }
.lx-flow__item.is-on .lx-flow__play { opacity: 1; transform: none; }
.lx-flow__card:hover .lx-flow__play { background: var(--lx-teal); border-color: var(--lx-teal); color: var(--black); }
.lx-flow__nav { position: absolute; z-index: 20; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(6, 26, 46, .55); color: #fff; backdrop-filter: blur(10px); transition: background .3s, color .3s, border-color .3s, transform .3s; }
.lx-flow__nav:hover { background: var(--lx-teal); border-color: var(--lx-teal); color: var(--black); transform: scale(1.06); }
.lx-flow__nav .icon { width: 22px; height: 22px; }
.lx-flow__nav--prev { left: max(16px, calc(50% - 600px)); }
.lx-flow__nav--next { right: max(16px, calc(50% - 600px)); }
.lx-flow__info { position: relative; z-index: 1; max-width: 680px; margin: clamp(2.5rem, 5vw, 3.75rem) auto 0; text-align: center; }
.lx-flow__info h3 { margin: 0 0 .5rem; color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 500; line-height: 1.3; }
.lx-flow__info p { margin: 0 auto; max-width: 52ch; color: rgba(255, 255, 255, .7); font-size: var(--font-body); line-height: 1.65; }
.lx-flow__info.is-swap h3, .lx-flow__info.is-swap p { animation: lx-cap .6s cubic-bezier(.22, .61, .36, 1); }
.lx-flow__meta { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
.lx-flow__count { color: rgba(255, 255, 255, .5); font-size: 13px; font-variant-numeric: tabular-nums; }
.lx-flow__count b { color: #fff; font-weight: 600; }
.lx-flow__dots { display: flex; gap: 6px; }
.lx-flow__dot { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.lx-flow__dot i { display: block; width: 8px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); transition: width .4s, background .4s; }
.lx-flow__dot.is-on i { width: 28px; background: var(--lx-teal); box-shadow: 0 0 10px var(--lx-teal); }
.lx-flow__dur { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .85); font-size: 12px; font-weight: 500; }
@media (max-width: 767.98px) {
  .lx-flow { height: 56vw; min-height: 220px; }
  .lx-flow__item { width: 78vw; margin-left: -39vw; transform: translateX(calc(var(--o) * 70%)) translateZ(calc(var(--a) * -160px)) rotateY(calc(var(--o) * -28deg)) scale(calc(1 - var(--a) * .06)); }
  .lx-flow__card { border-radius: 20px; -webkit-box-reflect: none; }
  .lx-flow__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .lx-flow__play .icon { width: 22px; height: 22px; }
  .lx-flow__nav { width: 44px; height: 44px; margin-top: -22px; }
  .lx-flow__meta { flex-wrap: wrap; gap: .75rem 1rem; }
}

/* ---------- Learning Hub ADVANCED v3 — Blogs: magazine spread (cover story + framed glass cards) ---------- */
.lx-mags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.lx-mag { --cat: var(--lx-teal); position: relative; display: flex; flex-direction: column; flex: 0 0 calc((100% - 3rem) / 3); padding: 12px; border-radius: 26px; isolation: isolate;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); backdrop-filter: blur(12px);
  transition: transform .55s cubic-bezier(.22, .61, .36, 1), box-shadow .5s; }
.lx-mag--guide { --cat: #6FB6F2; } .lx-mag--scheme { --cat: #F2C66F; } .lx-mag--literacy { --cat: #9FE4DA; }
.lx-mag:not(.is-hidden) { animation: lx-in .55s cubic-bezier(.22, .61, .36, 1) both; }
.lx-mag::before { content: ""; position: absolute; z-index: -1; inset: 0; padding: 1px; border-radius: inherit; opacity: 0; transition: opacity .5s;
  background: linear-gradient(160deg, var(--cat), transparent 45%, color-mix(in srgb, var(--cat) 60%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.lx-mag:hover { transform: translateY(-8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 70px -40px rgba(0, 0, 0, .9), 0 0 60px -30px color-mix(in srgb, var(--cat) 70%, transparent); }
.lx-mag:hover::before { opacity: 1; }
.lx-mag__media { position: relative; margin: 0; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 18px; }
.lx-mag__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.22, .61, .36, 1); }
.lx-mag:hover .lx-mag__media img { transform: scale(1.07); }
.lx-mag__tag { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: .45rem; padding: 6px 12px; border-radius: 999px; background: rgba(6, 26, 46, .72); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(8px); }
.lx-mag__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cat); box-shadow: 0 0 8px var(--cat); }
.lx-mag__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem .75rem .5rem; }
.lx-mag__date { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .6rem; color: rgba(255, 255, 255, .55); font-size: 12.5px; }
.lx-mag__date .icon { width: 14px; height: 14px; }
.lx-mag h3 { margin: 0 0 .5rem; color: #fff; font-size: var(--font-h4); font-weight: 500; line-height: 1.4; }
.lx-mag p { margin: 0 0 1.25rem; color: rgba(255, 255, 255, .66); font-size: .9375rem; line-height: 1.6; }
.lx-mag__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.lx-mag__num { color: rgba(255, 255, 255, .3); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.lx-mag .lx-act { padding: .55rem 1.05rem; }
.lx-mag:hover .lx-act { background: var(--cat); border-color: var(--cat); color: var(--black); }
/* Cover story: the first visible article spreads across the full width */
.lx-mag:nth-child(1 of .lx-mag:not(.is-hidden)) { flex-basis: 100%; flex-direction: row; gap: 0; padding: 14px; }
.lx-mag:nth-child(1 of .lx-mag:not(.is-hidden)) .lx-mag__media { flex: 0 0 58%; aspect-ratio: 16 / 10; border-radius: 20px; }
.lx-mag:nth-child(1 of .lx-mag:not(.is-hidden)) .lx-mag__body { justify-content: center; padding: clamp(1.5rem, 3.5vw, 3rem); }
.lx-mag:nth-child(1 of .lx-mag:not(.is-hidden)) h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.25; background: linear-gradient(100deg, #fff 40%, #9FE4DA); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lx-mag:nth-child(1 of .lx-mag:not(.is-hidden)) p { font-size: var(--font-body); }
.lx-mag:nth-child(1 of .lx-mag:not(.is-hidden)) .lx-mag__foot { margin-top: 1rem; }
.lx-mag:nth-child(1 of .lx-mag:not(.is-hidden))::before { opacity: 1; }
@media (max-width: 991.98px) { .lx-mag { flex-basis: calc((100% - 1.5rem) / 2); } .lx-mag:nth-child(1 of .lx-mag:not(.is-hidden)) { flex-direction: column; } .lx-mag:nth-child(1 of .lx-mag:not(.is-hidden)) .lx-mag__media { flex: none; } }
@media (max-width: 575.98px) { .lx-mag { flex-basis: 100%; } }
.lx-flow__item:not(.is-on) .lx-flow__card img { filter: brightness(.38) saturate(.5); } .lx-flow__item:not(.is-on) .lx-flow__num { -webkit-text-stroke-color: rgba(255, 255, 255, .35); }

/* Learning Hub ADVANCED — lighter brand-blue backdrop (was near-black navy) */
.lh { --lx-bg: #0B4A82; }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub { background: linear-gradient(180deg, #0A3D6C 0%, #0B4A82 100%); }
.lx-reel { background: linear-gradient(180deg, #0B4A82 0%, #07579A 100%); }
.lx-journal { background: linear-gradient(180deg, #07579A 0%, #0B4A82 100%); }
.lx-reel::before { background: radial-gradient(closest-side, rgba(79, 195, 181, .25), transparent); }
.lx-offer { background: radial-gradient(60% 90% at 100% 50%, rgba(79, 195, 181, .28), transparent 70%), linear-gradient(150deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .04) 100%); backdrop-filter: blur(12px); }
.lx-mag { background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 60px -40px rgba(4, 18, 31, .7); }
.lx-flow__nav { background: rgba(10, 37, 64, .45); }
.lx-head p:not(.eyebrow), .lx-flow__info p, .lx-mag p { color: rgba(255, 255, 255, .8); }
.lx-mag__date, .lx-flow__count { color: rgba(255, 255, 255, .7); }

/* Advanced: no band under the hero (switch margin no longer collapses), smooth hand-off from the hero navy,
   and darker blue glass cards */
.lh-sub { padding-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.lh-sub__switch { margin-top: 0; }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub { background: linear-gradient(180deg, #0D3156 0%, #0B4A82 100%); }
.lx-offer { background: radial-gradient(60% 90% at 100% 50%, rgba(79, 195, 181, .22), transparent 70%), linear-gradient(150deg, rgba(10, 37, 64, .82) 0%, rgba(10, 37, 64, .55) 100%); }
.lx-mag { background: linear-gradient(160deg, rgba(10, 37, 64, .78), rgba(10, 37, 64, .5)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -40px rgba(4, 18, 31, .8); }
.lx-tabs { background: rgba(10, 37, 64, .45); }

/* Advanced: one even vertical rhythm between the offer, Videos and Blogs blocks */
.lh { --lx-gap: clamp(3.5rem, 6vw, 5rem); }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub { padding-bottom: 0; }
.lx-reel { padding: var(--lx-gap) 0; }
.lx-journal { padding: 0 0 var(--lx-gap); }
.lx-flow__info { margin-top: clamp(2rem, 4vw, 3rem); }
.ss-spot, .swiper-slide-active .ss-spot { box-shadow: none; }


/* Learning Hub hero — subtle motion only (design unchanged) */
@keyframes lh-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes lh-play-track { 0% { width: 18%; } 100% { width: 78%; } }
@keyframes lh-spin { to { transform: rotate(360deg); } }
@keyframes lh-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(79, 195, 181, .18); } 50% { box-shadow: 0 0 0 11px rgba(79, 195, 181, 0); } }
@keyframes lh-ring { 0%, 100% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .2); } 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, .06); } }
@media (prefers-reduced-motion: no-preference) {
  .lh-stage__screen { animation: lh-float 6s ease-in-out infinite; }
  .lh-stage__back { animation: lh-float 6s -2s ease-in-out infinite; }
  .lh-stage__faces { animation: lh-float 6s -4s ease-in-out infinite; }
  .lh-stage__track i { animation: lh-play-track 7s ease-in-out infinite alternate; }
  .lh-stage__bar .lh-play { animation: lh-ring 2.4s ease-in-out infinite; }
  .lh-stage__orb--a { animation: lh-spin 30s linear infinite; }
  .lh-stage__orb--b, .lh-stage__faces::after { animation: lh-pulse 2.4s ease-in-out infinite; }
}

/* =========================================================================
   Learning Hub — background textures
   Basic: one quiet hexagon texture, faint, on its two feature panels.
   ========================================================================= */
/* Basic */
/* Basic offer panel: white geometric artwork repeated side by side (alternate copies mirrored so
   joins are seamless), scaled to the panel height (never stretched), with a light blue-white wash */
.lh-shelf { background: #fff; } /* plain panel */
.lh-shelf::before { display: none; }
.lh-journal__aside { background: radial-gradient(70% 50% at 100% 0%, rgba(79, 195, 181, .22), transparent 70%), linear-gradient(165deg, rgba(10, 37, 64, .9) 0%, rgba(14, 53, 88, .86) 100%), url("../img/learning/bg-hex.jpg") center / cover no-repeat; }

.lh-reel__head p:not(.eyebrow) { color: var(--text); }
/* Basic — section behind the offer panel: white hexagon artwork repeated side by side
   (alternate copies mirrored for seamless joins), scaled to the section height, never stretched.
   The panel itself is untouched. Advanced keeps its own blue background (more specific rule). */
.lh-sub { background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .35)), url("../img/learning/bg-hex-white-tile.jpg") left center / auto 100% repeat-x; }
/* Basic — Blogs & Articles: swirl artwork at both sides (left copy mirrored). Each keeps its own
   proportions (height-based size, never stretched); the white artwork background melts into the section. */
.lh-journal { background: url("../img/learning/bg-swirl-left.jpg?v=2") left bottom / min(26vw, 420px) auto no-repeat, url("../img/learning/bg-swirl-right.jpg?v=2") right top / min(26vw, 420px) auto no-repeat, #fff; }
/* Blogs & Articles — light blue section background; multiply blend lets the swirl artwork's
   white base take on the blue, so only the lines show */
.lh-journal { background-color: #EAF3FA; background-blend-mode: multiply, multiply, normal; }
/* Blogs & Articles — fade in from white at the top so it blends into the Introduction Videos section above */
.lh-journal { background-image: url("../img/learning/bg-swirl-left.jpg?v=2"), url("../img/learning/bg-swirl-right.jpg?v=2"), linear-gradient(180deg, #F8FBFE 0, #EAF3FA 72px, #EAF3FA 100%);
  background-position: left bottom, right top, 0 0; background-size: min(26vw, 420px) auto, min(26vw, 420px) auto, 100% 100%; background-repeat: no-repeat; background-blend-mode: multiply, multiply, normal; }

/* Basic — Introduction Videos: minute decorative elements (kept very light) */
.lh-reel { overflow: hidden; }
.lh-reel > .container { position: relative; z-index: 1; }
/* dot grid, top-right */
.lh-reel::before { content: ""; position: absolute; z-index: 0; right: 6%; top: 9%; width: 132px; height: 92px; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(7, 87, 154, .38) 1.4px, transparent 1.6px); background-size: 14px 14px; }
/* soft teal ring + small dot, bottom-left */
.lh-reel::after { content: ""; position: absolute; z-index: 0; left: 4%; bottom: 10%; width: 110px; height: 110px; border-radius: 50%; pointer-events: none;
  border: 1.5px dashed rgba(26, 154, 140, .3); box-shadow: 150px -40px 0 -51px rgba(79, 195, 181, .45); }
/* plus marks either side of the heading */
.lh-reel__head { position: relative; }
.lh-reel__head::before, .lh-reel__head::after { content: ""; position: absolute; top: 40%; width: 14px; height: 14px; pointer-events: none; opacity: .45;
  background: linear-gradient(var(--brand-2) 0 0) center / 100% 2px no-repeat, linear-gradient(var(--brand-2) 0 0) center / 2px 100% no-repeat; }
.lh-reel__head::before { left: -14%; transform: rotate(45deg); }
.lh-reel__head::after { right: -12%; top: 18%; background: linear-gradient(var(--primary) 0 0) center / 100% 2px no-repeat, linear-gradient(var(--primary) 0 0) center / 2px 100% no-repeat; }
@media (max-width: 767.98px) { .lh-reel::before, .lh-reel__head::before, .lh-reel__head::after { display: none; } .lh-reel::after { left: -40px; } }

/* Blogs & Articles list — compact rows (image + text, action under the text so nothing gets
   squeezed); the row currently in focus while scrolling expands into the feature layout (JS). */
.lh-row { grid-template-columns: 150px minmax(0, 1fr); align-items: start; }
.lh-row .lh-row__act { grid-column: 2; }
.lh-row__meta { flex-wrap: nowrap; white-space: nowrap; }
.lh-row__body h3 { font-size: var(--font-h4); }
@media (max-width: 575.98px) { .lh-row { grid-template-columns: 96px minmax(0, 1fr); } .lh-row__meta { flex-wrap: wrap; white-space: normal; } }

/* Blogs & Articles list — neat version: every article is the same clean card; the one in focus
   while scrolling grows smoothly in place (wider photo, white card, soft shadow) — no layout jumps */
.lh-journal__list { display: grid; gap: .85rem; }
.lh-row { grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: .4rem 1.4rem; padding: 1rem; margin: 0;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(10, 37, 64, .06); border-radius: 18px; box-shadow: none;
  transition: grid-template-columns .55s cubic-bezier(.22, .61, .36, 1), background .45s, box-shadow .45s, border-color .45s; }
.lh-row:hover { background: #fff; }
.lh-row__media { aspect-ratio: 4 / 3; border-radius: 12px; }
.lh-row h3 { font-size: var(--font-h4); transition: color .3s; }
.lh-row__body p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lh-row .lh-row__act { grid-column: 2; }
.lh-row.is-expanded { grid-template-columns: 250px minmax(0, 1fr); background: #fff; border-color: var(--line); box-shadow: 0 26px 50px -34px rgba(10, 37, 64, .45); }
.lh-row.is-expanded h3 { color: var(--primary); }
.lh-row.is-expanded .lh-post__go { background: var(--black); border-color: var(--black); color: #fff; }
@media (max-width: 575.98px) {
  .lh-row, .lh-row.is-expanded { grid-template-columns: 96px minmax(0, 1fr); padding: .85rem; }
}
@media (max-width: 575.98px) { .lh-row, .lh-row.is-expanded { align-items: start; } }

/* Blogs & Articles — all articles inside one tile. On desktop the tile matches the navy panel's
   height and the cards scroll inside it (size containment stops the list from setting the row height). */
.lh-journal__list { padding: 1rem; border-radius: 24px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(10, 37, 64, .07); box-shadow: 0 30px 60px -44px rgba(10, 37, 64, .45); }
@media (min-width: 992px) {
  .lh-journal__layout { align-items: stretch; }
  .lh-journal__aside { position: relative; top: auto; }
  .lh-journal__list { contain: size; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; padding: 1rem .75rem 1rem 1rem;
    scrollbar-width: thin; scrollbar-color: rgba(7, 87, 154, .35) transparent;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 40px), transparent 100%); }
  .lh-journal__list::-webkit-scrollbar { width: 6px; }
  .lh-journal__list::-webkit-scrollbar-thumb { background: rgba(7, 87, 154, .3); border-radius: 6px; }
}
@media (max-width: 575.98px) { .lh-journal__list { padding: .6rem; border-radius: 20px; } }
@media (min-width: 992px) { .lh-journal__list { padding-bottom: 2.75rem; } }

/* ===== Blogs & Articles tile — clean finish =====
   One solid white tile; articles are calm rows divided by hairlines (no cards inside the card).
   Every row has the same structure and size; the row in focus is highlighted in place
   (tint, accent bar, slightly zoomed photo) without changing size, so nothing jumps. */
.lh-journal__list { padding: .5rem 1.25rem; gap: 0; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -46px rgba(10, 37, 64, .4); }
@media (min-width: 992px) { .lh-journal__list { padding: .5rem 1rem .5rem 1.25rem; -webkit-mask-image: none; mask-image: none; } }
.lh-row, .lh-row.is-expanded { position: relative; grid-template-columns: 132px minmax(0, 1fr); gap: .35rem 1.25rem; align-items: center; margin: 0;
  padding: 1.1rem .9rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none;
  transition: background .35s ease; }
.lh-row:last-of-type { border-bottom: 0; }
.lh-row::before { content: ""; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem; width: 3px; border-radius: 3px; background: var(--brand-2); transform: scaleY(0); transition: transform .35s cubic-bezier(.22, .61, .36, 1); display: block; }
.lh-row.is-expanded { background: linear-gradient(90deg, rgba(26, 154, 140, .07), rgba(26, 154, 140, 0) 85%); }
.lh-row.is-expanded::before { transform: scaleY(1); }
.lh-row:hover { background: var(--surface-2); }
.lh-row__media { grid-row: span 2; align-self: center; aspect-ratio: 4 / 3; border-radius: 12px; }
.lh-row__media img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.lh-row.is-expanded .lh-row__media img { transform: scale(1.06); }
.lh-row__meta { margin-bottom: .3rem; }
.lh-row h3, .lh-row.is-expanded h3 { margin: 0 0 .3rem; font-size: 1rem; line-height: 1.4; color: var(--black); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s; }
.lh-row.is-expanded h3 { color: var(--primary); }
.lh-row__body p { font-size: .875rem; line-height: 1.55; margin: 0; }
.lh-row .lh-row__act { grid-column: 2; align-self: start; }
/* one consistent action style: a quiet text link with an arrow */
.lh-row .lh-post__go, .lh-row.is-expanded .lh-post__go { padding: 0; border: 0; border-radius: 0; background: none; color: var(--primary); font-size: .875rem; font-weight: 600; gap: .4rem; }
.lh-row .lh-post__go .icon { width: 14px; height: 14px; transition: transform .3s; }
.lh-row:hover .lh-post__go, .lh-row.is-expanded .lh-post__go { background: none; color: var(--brand-2-ink); }
.lh-row:hover .lh-post__go .icon, .lh-row.is-expanded .lh-post__go .icon { transform: translateX(3px); }
@media (max-width: 575.98px) {
  .lh-journal__list { padding: .25rem .75rem; }
  .lh-row, .lh-row.is-expanded { grid-template-columns: 88px minmax(0, 1fr); gap: .3rem .9rem; padding: 1rem .25rem 1rem .6rem; align-items: start; }
  .lh-row__media { grid-row: span 3; }
}

/* Learning Hub — Basic / Advanced switch: larger, higher-contrast, with a gradient ring, glowing thumb and a slow shine */
@keyframes lh-switch-shine { 0%, 70% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }
.lh-sub__switch .hub-toggle { padding: 7px; border: 0; border-radius: 999px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #4FC3B5, #07579A 55%, #4FC3B5) border-box; border: 2px solid transparent;
  box-shadow: 0 18px 40px -18px rgba(7, 87, 154, .55), 0 0 0 7px rgba(255, 255, 255, .75); }
.lh-sub__switch .hub-toggle::before { top: 7px; bottom: 7px; left: 7px; width: calc(50% - 7px); overflow: hidden;
  background: linear-gradient(135deg, #0A2540 0%, #07579A 60%, #1F6DAE 100%); box-shadow: 0 10px 24px -8px rgba(7, 87, 154, .75), inset 0 1px 0 rgba(255, 255, 255, .25); }
.lh-sub__switch .hub-toggle__btn { position: relative; z-index: 1; min-width: 190px; padding: 1rem 2.25rem; font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; color: var(--black); }
.lh-sub__switch .hub-toggle__btn:not([aria-pressed="true"]) { color: rgba(10, 37, 64, .62); }
.lh-sub__switch .hub-toggle__btn:not([aria-pressed="true"]):hover { color: var(--primary); }
.lh-sub__switch .hub-toggle__btn[aria-pressed="true"] { color: #fff; }
.lh-sub__switch .hub-toggle__btn[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; border-radius: 999px; overflow: hidden; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent) no-repeat; background-size: 40% 100%; animation: lh-switch-shine 4.5s ease-in-out infinite; }
.lh-sub__switch .hub-toggle__lvl { height: 14px; gap: 3px; }
.lh-sub__switch .hub-toggle__lvl i { width: 4px; }
.lh-sub__switch .hub-toggle__lvl i:nth-child(1) { height: 6px; } .lh-sub__switch .hub-toggle__lvl i:nth-child(2) { height: 10px; } .lh-sub__switch .hub-toggle__lvl i:nth-child(3) { height: 14px; }
/* Advanced state: teal thumb, navy ring */
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle { background: linear-gradient(rgba(10, 37, 64, .55), rgba(10, 37, 64, .55)) padding-box, linear-gradient(120deg, #4FC3B5, #9FE4DA 50%, #4FC3B5) border-box; box-shadow: 0 0 0 7px rgba(255, 255, 255, .06), 0 0 40px -10px rgba(79, 195, 181, .6); }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle__btn:not([aria-pressed="true"]) { color: rgba(255, 255, 255, .7); }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle__btn[aria-pressed="true"] { color: var(--black); }
@media (max-width: 575.98px) { .lh-sub__switch .hub-toggle__btn { min-width: 0; padding: .85rem 1rem; font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) { .lh-sub__switch .hub-toggle__btn[aria-pressed="true"]::after { animation: none; display: none; } }
/* Toggle fixes: keep the shine inside the pill (no ghost outside), and a solid, high-contrast Advanced state */
@keyframes lh-switch-shine2 { 0%, 65% { background-position: -60% 0; } 100% { background-position: 160% 0; } }
.lh-sub__switch .hub-toggle__btn { overflow: hidden; }
.lh-sub__switch .hub-toggle__btn[aria-pressed="true"]::after { transform: none; animation-name: lh-switch-shine2; background: linear-gradient(100deg, transparent 0 35%, rgba(255, 255, 255, .3) 50%, transparent 65% 100%) no-repeat; background-size: 220% 100%; }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle {
  background: linear-gradient(#061A2E, #061A2E) padding-box, linear-gradient(120deg, #4FC3B5, #9FE4DA 50%, #4FC3B5) border-box;
  box-shadow: 0 0 0 6px rgba(79, 195, 181, .12), 0 18px 40px -14px rgba(0, 0, 0, .6), 0 0 34px -8px rgba(79, 195, 181, .55); }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle::before { background: linear-gradient(135deg, #7FE0D3 0%, #4FC3B5 55%, #1A9A8C 100%); box-shadow: 0 8px 22px -6px rgba(79, 195, 181, .8), inset 0 1px 0 rgba(255, 255, 255, .5); }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle__btn:not([aria-pressed="true"]) { color: rgba(255, 255, 255, .82); }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle__btn:not([aria-pressed="true"]):hover { color: #fff; }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle__btn:not([aria-pressed="true"]) .hub-toggle__lvl i { background: #fff; }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle__btn[aria-pressed="true"] { color: #061A2E; }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle__btn[aria-pressed="true"] .hub-toggle__lvl i { background: #061A2E; }
/* Advanced toggle track matches the dark blue of the offer panel below it */
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle { background: linear-gradient(#0E3159, #0E3159) padding-box, linear-gradient(120deg, #4FC3B5, #9FE4DA 50%, #4FC3B5) border-box; }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle__btn[aria-pressed="true"] { color: #0E3159; }
.lh:has([data-hub="premium"][aria-pressed="true"]) .lh-sub__switch .hub-toggle__btn[aria-pressed="true"] .hub-toggle__lvl i { background: #0E3159; }

/* ===== Learning Hub — Advanced view switch =====
   <main class="lh" data-advanced="coming-soon"> shows a Coming Soon panel under "Advanced";
   data-advanced="live" shows the full Advanced design again. */
.lh-soon { display: none; }
.lh[data-advanced="coming-soon"] .lx-offer,
.lh[data-advanced="coming-soon"] #videos-advanced,
.lh[data-advanced="coming-soon"] #blogs-advanced { display: none; }
.lh[data-advanced="coming-soon"] .lh-soon { display: block; }
.lh[data-advanced="coming-soon"]:has([data-hub="premium"][aria-pressed="true"]) .lh-sub { padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.lh-soon { position: relative; overflow: hidden; max-width: 760px; margin: 0 auto; padding: clamp(2.25rem, 5vw, 3.5rem); text-align: center; border-radius: 26px; color: #fff;
  background: radial-gradient(60% 80% at 50% 0%, rgba(79, 195, 181, .22), transparent 70%), linear-gradient(160deg, #0E3159 0%, #0A2540 100%);
  border: 1px solid rgba(79, 195, 181, .45); box-shadow: 0 40px 80px -46px rgba(0, 0, 0, .8), 0 0 60px -30px rgba(79, 195, 181, .5); }
.lh-soon::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.2px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent 80%); mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent 80%); }
.lh-soon > * { position: relative; }
.lh-soon__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1.1rem; border-radius: 50%; color: #4FC3B5; background: rgba(79, 195, 181, .12); border: 1px solid rgba(79, 195, 181, .45); box-shadow: 0 0 0 8px rgba(79, 195, 181, .06); }
.lh-soon__icon .icon { width: 28px; height: 28px; }
.lh-soon__ml { display: block; margin-bottom: .5rem; color: #4FC3B5; font-family: var(--font-ml); font-weight: 500; }
.lh-soon h2 { margin: 0 0 .9rem; color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
.lh-soon p { margin: 0 auto 1.75rem; max-width: 52ch; color: rgba(255, 255, 255, .78); font-size: var(--font-body); line-height: 1.75; }
.lh-soon .btn--accent { background: #4FC3B5; border-color: #4FC3B5; color: #0A2540; }
.lh-soon .btn--accent:hover { color: #0A2540; }

/* ===== Coming Soon tile — premium version ===== */
@keyframes lh-soon-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes lh-soon-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(79, 195, 181, .7); } 60% { box-shadow: 0 0 0 8px rgba(79, 195, 181, 0); } }
@keyframes lh-soon-fill { 0% { width: 12%; } 100% { width: 82%; } }
@keyframes lh-soon-twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
.lh-soon { display: none; max-width: 1080px; padding: clamp(2rem, 4.5vw, 3.5rem); text-align: left; border: 0; isolation: isolate;
  background: radial-gradient(50% 70% at 85% 40%, rgba(79, 195, 181, .25), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(7, 87, 154, .5), transparent 70%), linear-gradient(150deg, #0E3159 0%, #0A2540 100%);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .85), 0 0 70px -30px rgba(79, 195, 181, .45); }
.lh[data-advanced="coming-soon"] .lh-soon { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .lh[data-advanced="coming-soon"] .lh-soon { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; } }
/* rotating light around the border */
.lh-soon::after { content: ""; position: absolute; z-index: 2; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--lx-ang), rgba(79, 195, 181, 0) 0deg, rgba(79, 195, 181, 1) 70deg, rgba(159, 228, 218, .5) 120deg, rgba(79, 195, 181, 0) 180deg, rgba(79, 195, 181, .2) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: lx-rotate 6s linear infinite; }
.lh-soon__copy { position: relative; z-index: 1; }
.lh-soon__tag { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; padding: 6px 14px 6px 10px; border-radius: 999px; border: 1px solid rgba(79, 195, 181, .4); background: rgba(79, 195, 181, .1); color: #9FE4DA; font-family: var(--font-ml); font-size: .9rem; }
.lh-soon__tag i { width: 9px; height: 9px; border-radius: 50%; background: #4FC3B5; animation: lh-soon-pulse 2s ease-out infinite; }
.lh-soon h2 { margin: 0 0 1rem; color: #fff; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.2; }
.lh-soon h2 span { display: inline-block; background: linear-gradient(100deg, #4FC3B5, #9FE4DA 50%, #4FC3B5); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: lh-soon-shimmer 4s linear infinite; }
@keyframes lh-soon-shimmer { to { background-position: -200% 0; } }
.lh-soon p { margin: 0 0 1.9rem; max-width: 48ch; }
.lh-soon .btn--accent { box-shadow: 0 0 0 0 rgba(79, 195, 181, .5); animation: lx-ping 2.6s ease-out infinite; }
/* art: stacked lesson cards, frosted lock, orbit */
.lh-soon__art { position: relative; z-index: 1; height: 300px; }
.lh-soon__orbit { position: absolute; left: 50%; top: 50%; width: 290px; height: 290px; margin: -145px 0 0 -145px; border-radius: 50%; border: 1.5px dashed rgba(79, 195, 181, .35); animation: lx-spin 40s linear infinite; }
.lh-soon__orbit::after { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #4FC3B5; box-shadow: 0 0 14px #4FC3B5; }
.lh-soon__card { position: absolute; left: 50%; top: 50%; width: 230px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .75); }
.lh-soon__card img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.8); }
.lh-soon__card--1 { margin: -60px 0 0 -100px; transform: rotate(-4deg); z-index: 3; animation: lh-soon-float 5s ease-in-out infinite; }
.lh-soon__card--2 { margin: -110px 0 0 -150px; transform: rotate(-12deg) scale(.88); z-index: 2; opacity: .75; animation: lh-soon-float 5s -1.6s ease-in-out infinite; }
.lh-soon__card--3 { margin: -20px 0 0 -40px; transform: rotate(9deg) scale(.82); z-index: 1; opacity: .6; animation: lh-soon-float 5s -3.2s ease-in-out infinite; }
.lh-soon__card--1 img { filter: blur(1.5px) saturate(.9) brightness(.75); }
.lh-soon__bar { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); }
.lh-soon__bar b { display: block; height: 100%; border-radius: inherit; background: #4FC3B5; box-shadow: 0 0 10px #4FC3B5; animation: lh-soon-fill 4s ease-in-out infinite alternate; }
.lh-soon__lock { position: absolute; z-index: 4; left: 50%; top: 50%; display: grid; place-items: center; width: 74px; height: 74px; margin: -32px 0 0 -22px; border-radius: 22px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .45); color: #fff; backdrop-filter: blur(10px); box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .6), 0 0 0 8px rgba(79, 195, 181, .1); animation: lh-soon-float 4s -1s ease-in-out infinite; }
.lh-soon__lock .icon { width: 30px; height: 30px; }
.lh-soon__spark { position: absolute; z-index: 4; width: 8px; height: 8px; border-radius: 50%; background: #9FE4DA; box-shadow: 0 0 12px #4FC3B5; animation: lh-soon-twinkle 2.4s ease-in-out infinite; }
.lh-soon__spark--a { right: 18%; top: 12%; } .lh-soon__spark--b { left: 14%; bottom: 14%; animation-delay: -1.2s; }
@media (max-width: 991.98px) { .lh[data-advanced="coming-soon"] .lh-soon { text-align: center; } .lh-soon p { margin-inline: auto; } .lh-soon__art { height: 250px; } }
@media (max-width: 575.98px) { .lh-soon__card { width: 180px; } .lh-soon__orbit { width: 220px; height: 220px; margin: -110px 0 0 -110px; } .lh-soon__card--2 { margin-left: -120px; } }
@media (prefers-reduced-motion: reduce) { .lh-soon *, .lh-soon::after { animation: none !important; } }
/* Basic: hexagon section fades into the Introduction Videos tint, and the gap between them is tightened */
.lh-sub { background: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, .35) 55%, var(--surface) 100%), url("../img/learning/bg-hex-white-tile.jpg") left center / auto 100% repeat-x; padding-bottom: clamp(2rem, 4vw, 3rem); }
.lh-reel { padding-top: clamp(2rem, 4vw, 3rem); }
/* Toggle size, reduced to a comfortable control size (keeps the same styling) */
.lh-sub__switch .hub-toggle { padding: 5px; }
.lh-sub__switch .hub-toggle::before { top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); }
.lh-sub__switch .hub-toggle__btn { min-width: 150px; padding: .7rem 1.6rem; font-size: .95rem; gap: .55rem; }
.lh-sub__switch .hub-toggle__lvl { height: 12px; gap: 2px; }
.lh-sub__switch .hub-toggle__lvl i { width: 3px; }
.lh-sub__switch .hub-toggle__lvl i:nth-child(1) { height: 5px; } .lh-sub__switch .hub-toggle__lvl i:nth-child(2) { height: 8px; } .lh-sub__switch .hub-toggle__lvl i:nth-child(3) { height: 12px; }
.lh-sub__switch .hub-toggle { box-shadow: 0 12px 28px -16px rgba(7, 87, 154, .5), 0 0 0 5px rgba(255, 255, 255, .7); }
@media (max-width: 575.98px) { .lh-sub__switch .hub-toggle { width: auto; max-width: none; } .lh-sub__switch .hub-toggle__btn { min-width: 130px; padding: .65rem 1.1rem; font-size: .9rem; } }
.ss-featured .swiper { -webkit-mask-image: none; mask-image: none; }
/* Success Stories closing band: the button keeps the design's slightly smaller size so its label fits one line on phones. */
/* Success Stories: a link to one story lands below the sticky header, not under it. */
.ss-pane { scroll-margin-top: 96px; }
/* Success Stories gallery: a very long quote is cut with "…" on desktop so it can never overflow the fixed-height panel. */
@media (min-width: 992px) { .ss-pane blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; } }
/* Success Stories: one very long unbroken word wraps instead of spilling out of its card. */
.ss-spot h3, .ss-spot blockquote, .ss-spot__place, .ss-pane h3, .ss-pane blockquote, .ss-pane__place, .ss-pane__spine { overflow-wrap: anywhere; }

/* Blog articles written in the admin editor use <h2> for their sub-headings; the design sets them at the same
   size as its <h3> sub-headings, so both look the same (other pages keep the design's own heading sizes). */
.article--post h2 { font-size: var(--font-h3); letter-spacing: -0.02em; margin-top: 1.75rem; }
/* A checklist written in the admin editor has no icons in its items; give each the design's tick-in-circle. */
.article .checklist li:not(:has(.icon))::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: .15rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307579A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Event ticket cards: no drop shadow (it was cut off by the carousel and left a grey band) */
.ticket, .ticket:hover { box-shadow: none; }
/* "Our Services" items on the sector pages link to the matching service page; they keep the look of the
   surrounding text (the design shows them as plain text) and only underline on hover. */
.ix-svc { color: inherit; text-decoration: none; }
.ix-svc:hover, .ix-svc:focus-visible { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* "Coming Soon" pop-up: shown instead of a section that is switched off. */
.cs-pop .modal__dialog { --pad-y: clamp(2rem, 5vw, 2.75rem); --pad-x: clamp(1.5rem, 4vw, 2.25rem); max-width: 460px; text-align: center; background: radial-gradient(60% 50% at 50% 0%, rgba(79, 195, 181, .16), transparent 70%), #fff; }
.cs-pop__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: linear-gradient(135deg, #22b8a6, #1a9a8c); color: #fff; box-shadow: 0 10px 24px rgba(26, 154, 140, .35); }
.cs-pop__icon .icon { width: 30px; height: 30px; }
.cs-pop h3 { margin: 0 0 .6rem; padding-right: 0; font-size: clamp(1.4rem, 3vw, 1.75rem); }
.cs-pop p { margin: 0 auto 1.5rem; max-width: 34ch; color: var(--muted); }
.cs-pop__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.cs-pop:not(.is-open) .cs-pop__icon { transform: none; }
.cs-pop.is-open .cs-pop__icon { animation: fs-pop .6s .1s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .cs-pop.is-open .cs-pop__icon { animation: none; } }

/* The close button of a pop-up stays pinned in view while a long pop-up (a form on a phone) is scrolled:
   it sits in the top-right corner of the pop-up's content and no longer scrolls away. */
.modal__dialog:not(.modal__dialog--wide) > .modal__close {
  position: sticky; top: 0; display: flex; margin: 0 0 -38px auto;
}
/* Pop-up headings leave room for the pinned close button. */
.modal__dialog:not(.modal__dialog--wide) h3 { padding-right: 3.25rem; }
.cs-pop .modal__dialog h3 { padding-right: 0; }

/* "Coming Soon" panel: stands in for a list with nothing published yet. It sits inside its own section, so it
   takes that section's background — a light card on light sections, a glass card on the navy ones. */
.cs-note { position: relative; max-width: 620px; margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem); text-align: center; border-radius: 22px;
  background: radial-gradient(70% 90% at 50% 0%, rgba(79, 195, 181, .14), transparent 70%), rgba(255, 255, 255, .78); border: 1.5px dashed rgba(26, 154, 140, .45); box-shadow: 0 18px 40px -28px rgba(10, 37, 64, .35); }
.cs-note__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; background: linear-gradient(135deg, #22b8a6, #1a9a8c); color: #fff; box-shadow: 0 10px 22px rgba(26, 154, 140, .3); }
.cs-note__icon .icon { width: 26px; height: 26px; }
.cs-note h3 { margin: 0 0 .5rem; font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.cs-note p { margin: 0 auto; max-width: 44ch; color: var(--muted); }
.cs-note--dark { background: radial-gradient(70% 90% at 50% 0%, rgba(79, 195, 181, .2), transparent 70%), rgba(255, 255, 255, .06); border-color: rgba(79, 195, 181, .55); box-shadow: none; backdrop-filter: blur(4px); }
.cs-note--dark h3 { color: #fff; }
.cs-note--dark p { color: rgba(255, 255, 255, .78); }
.news-grid .col-12 > .cs-note, .job-list > .cs-note, .listing__list > li > .cs-note { margin-top: .5rem; }
.listing__list > li:has(> .cs-note) { list-style: none; }
@keyframes cs-note-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cs-note.is-visible .cs-note__icon, .cs-note:not([data-reveal]) .cs-note__icon { animation: fs-pop .6s .1s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .cs-note .cs-note__icon { animation: none !important; } }