/* ==================================================================
   Client palette round — "dusk fire & night depths", white backgrounds.
   Loaded after styles.css so tokens + overrides win.
   Blue-only palette: Deep Night #0C1828 · Steel Blue #A83020 · Storm Blue #1E1A32 · Mist #F5EBE0
   Fonts: Outfit (body) · Seasons (display) — Cormorant Garamond stands in
   until the Seasons files arrive: change --font-display only.
   ================================================================== */
@font-face).
   ================================================================== */
@font-face { font-family: "Seasons"; src: url("../fonts/seasons-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Seasons"; src: url("../fonts/seasons-light-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Seasons"; src: url("../fonts/seasons-regular.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Seasons"; src: url("../fonts/seasons-italic.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Seasons"; src: url("../fonts/seasons-bold.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Seasons"; src: url("../fonts/seasons-bold-italic.woff2") format("woff2"); font-weight: 600 800; font-style: italic; font-display: swap; }
:root {
  --accent: #A83020;
  --accent-strong: #7A2010;
  --ink: #0C1828;
  --paper: #FFFFFF;
  --paper-2: #F5EBE0;
  --wash: rgba(168, 48, 32, 0.06);
  --muted-light: rgba(12, 24, 40, 0.64);
  --hairline-light: rgba(168, 48, 32, 0.28);
  --panel-dark: rgba(30, 26, 50, 0.45);
  --grad-footer: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --font-body: "Outfit", Arial, sans-serif;
  --font-display: "Seasons", Georgia, "Times New Roman", serif;
}
body { font-family: var(--font-body); background: #fff; color: var(--ink); }
button, input, select, textarea { font-family: inherit; }
h1, h2, .display, .h1, .h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline-color: var(--accent); }

/* white grounds */
.scene--whitebg, body:not(.film-gl) .scene--whitebg { background: #fff !important; color: var(--ink); }
body:not(.film-gl) [data-scene="numbers"], body:not(.film-gl) [data-scene="voices"],
.scene--pale, .tail--tint { background: #fff; }
.footer { background: #fff; color: var(--ink); border-top: 1px solid rgba(12, 24, 40, 0.1); }
.footer a, .footer .label, .footer .label--dim { color: var(--ink); }

/* ---- white hero ---- */
[data-scene="hero"], #hero { background: #fff !important; color: var(--ink); }
#hero .hero__title, #hero .hero__title-text, #hero .hero__lead, #hero .hero__welcome, #hero .hero__tagline,
#hero .heading, #hero .hero__cal-days, #hero .hero__cal-month { color: var(--ink); text-shadow: none; }
#hero .label, #hero .label--dim { color: rgba(12, 24, 40, 0.6); }
#hero .hero__lead span, #hero .hero__tagline span { color: var(--accent); }
#hero .hero__tag { background: rgba(245, 235, 224, 0.7); color: var(--ink); border-color: rgba(168, 48, 32, 0.4); backdrop-filter: none; }
#hero .hero__tag:hover { color: var(--accent-strong); }
#hero .hero__cal { background: rgba(245, 235, 224, 0.75); border-color: rgba(168, 48, 32, 0.25); backdrop-filter: none; }
#hero .btn-ghost { color: var(--ink); border-color: rgba(12, 24, 40, 0.35); background: transparent; }
#hero .orgchip { background: #fff; box-shadow: 0 1px 8px rgba(12, 24, 40, 0.12); }
/* ---- the girl lives in a crisp dusk panel (Deep Night -> Storm Blue, steel glow) ---- */
#hero .hero__bg {
  -webkit-mask-image: none; mask-image: none;
  inset: auto; top: 15%; bottom: 9%; right: clamp(24px, 6vw, 120px); left: auto; width: min(38%, 560px);
  border-radius: 28px;
  background: linear-gradient(160deg, #0C1828 0%, #1E1A32 62%, #7A2010 140%);
  box-shadow: 0 30px 60px -24px rgba(12, 24, 40, 0.4);
}
#hero .hero__bg::before { display: none; }
#hero .hero__bg::after { background: radial-gradient(ellipse 80% 50% at 70% 100%, rgba(168, 48, 32, 0.32), transparent 70%); }
#hero .hero__bg--model { background-size: cover; background-position: 58% 18%; filter: none; animation: none; }
#hero .hero__reel {
  top: 0; right: 0; left: 0; width: 100%; height: 100%; transform: none; object-fit: cover; object-position: 58% 18%;
  -webkit-mask-image: none; mask-image: none;
}
#hero .hero__reel.is-playing { opacity: 1; }
#hero .hero__bg-layer:not(.hero__bg--model) { display: none; }
#hero .hero__tagline, #hero .hero__lead {
  background: linear-gradient(100deg, #0C1828 0%, #A83020 35%, #0C1828 60%, #7A2010 100%); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* copy takes the left column, aligned left */
@media (min-width: 769px) {
  #hero .hero__copy { width: 54%; margin-right: auto; }
  #hero .hero__act { align-items: flex-start; text-align: left; }
  #hero .hero__tags, #hero .hero__ctas, #hero .hero__orgs { justify-content: flex-start; }
  #hero .hero__orgs-label { text-align: left; }
}
/* phones: the whole hero is one rounded dusk card with light text */
@media (max-width: 768px) {
  #hero .hero__bg { top: 80px; bottom: 16px; left: 12px; right: 12px; width: auto; border-radius: 24px; }
  #hero .hero__reel { width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; transform: none !important; aspect-ratio: auto !important; max-width: none !important; }
  #hero .hero__bg--model { display: block !important; opacity: 1; background-size: cover; background-position: 58% 18%; }
  body:not(.intro) #hero .hero__reel { opacity: .9 !important; }
  #hero .hero__bg::after { background: linear-gradient(180deg, rgba(12,24,40,.45) 0%, rgba(12,24,40,.25) 40%, rgba(12,24,40,.5) 100%); }
  #hero .hero__title, #hero .hero__title-text, #hero .hero__welcome, #hero .hero__welcome strong,
  #hero .heading, #hero .hero__cal-days, #hero .hero__cal-month, #hero .hero__tag, #hero .btn-ghost { color: #fff; }
  #hero .label, #hero .label--dim { color: rgba(255, 255, 255, 0.72); }
  #hero .hero__tagline, #hero .hero__lead { background: none; -webkit-text-fill-color: #fff; color: #fff; }
  #hero .hero__tagline span, #hero .hero__lead span { color: #F0D8C4; }
  #hero .hero__tag { background: rgba(255, 255, 255, 0.1); border-color: rgba(240, 216, 196, 0.5); }
  #hero .hero__cal { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); }
  #hero .btn-ghost { border-color: rgba(255, 255, 255, 0.5); }
  #hero .hero__copy { text-shadow: 0 1px 12px rgba(12, 24, 40, 0.6); }
}

/* event photos: arrows flank "See all photos" on one centred row, close under the caption */
.photos__controls { flex-wrap: nowrap; justify-content: center; gap: 16px; margin-top: 0; }
.photos__nav { display: contents; }
.photos__nav .railnav__btn[data-dir="-1"] { order: 0; }
.photos__controls > .pill-sm { order: 1; }
.photos__nav .railnav__btn[data-dir="1"] { order: 2; }
#hero .hero__face { display: none; }

/* ---- "Built for professionals": same crisp dusk panel as the hero, dark readable labels ---- */
#who .whoscene__stage {
  overflow: hidden; border-radius: 28px;
  background: linear-gradient(160deg, #0C1828 0%, #1E1A32 62%, #7A2010 140%);
  box-shadow: 0 30px 60px -24px rgba(12, 24, 40, 0.4);
}
#who .whoscene__stage::before { display: none; }
#who .wv-base, #who .wv-reel, #who video.wv {
  -webkit-mask-image: none !important; mask-image: none !important;
  object-fit: cover; object-position: 58% 18%;
}
#who .whoscene__stage:has(.wv-reel.is-ready) .wv-base { opacity: 1; }
#who .whoitem__num { color: var(--accent); }
#who .whoitem .heading { color: var(--ink); }
#who .whoitem .body { color: var(--muted-light); }
#who .whoitem.is-focus .heading { color: var(--accent); }
#who .whoitem.is-focus::after { background: var(--accent); }

/* ---- scroll-dot rail: tucked to the page edge so it never sits on content ---- */
.rail { right: 12px; gap: 6px; }
.rail__dot { width: 22px; height: 22px; }
@media (max-width: 1280px) { .rail { display: none; } }

/* ---- hero act two (client): smaller headline, bigger date card, endorsement boxes in one row ---- */
#hero .hero__lead { font-size: clamp(20px, 2.4vw, 32px); }
#hero .hero__cal { transform: none; margin-bottom: 0; }
#hero .hero__cal-days { font-size: clamp(34px, 3.4vw, 52px); }
#hero .hero__cal-place .heading { font-size: clamp(22px, 2vw, 30px); }
#hero .hero__orgs { flex-wrap: wrap; gap: 12px; }
#hero .hero__orgs .orgchip { padding: 8px 14px; }
#hero .hero__orgs .orgchip img { height: 32px; max-height: 32px; max-width: 110px; }
@media (max-width: 768px) {
  #hero .hero__lead { font-size: 20px; }
  #hero .hero__cal { transform: none; }
  #hero .hero__cal-days { font-size: 40px; }
  #hero .hero__orgs { gap: 8px; }
  #hero .hero__orgs .orgchip { padding: 6px 10px; }
  #hero .hero__orgs .orgchip img { height: 24px; max-height: 24px; max-width: 72px; }
}

/* ---- hero alignment: copy and panel share the page margins and the same vertical centre ---- */
@media (min-width: 769px) {
  #hero .hero__bg { top: 12%; bottom: 12%; right: var(--pad); width: min(34vw, 520px); }
  #hero .hero__copy { width: calc(100% - min(34vw, 520px) - 48px); max-width: 640px; }
}
@media (min-width: 769px) {
  #hero .hero__bg { top: 116px; bottom: 56px; }
  #hero .hero__copy { padding-top: 60px; }
}

/* blue-only: the three hero chips share the steel-blue tone */
#hero .hero__tag { --tagc: 168, 48, 32; background: rgba(245, 235, 224, 0.8); }

/* phone hero: chips and cards get a solid night fill so the white text always reads over the bright face */
@media (max-width: 768px) {
  #hero .hero__tag { background: rgba(12, 24, 40, 0.78) !important; border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; text-shadow: none; box-shadow: 0 4px 14px rgba(12, 24, 40, 0.35); }
  #hero .hero__tag span { color: #fff; }
  #hero .hero__cal { background: rgba(12, 24, 40, 0.68); border-color: rgba(255, 255, 255, 0.35); }
  #hero .btn-ghost { background: rgba(12, 24, 40, 0.6); }
  #hero .hero__bg::after { background: linear-gradient(180deg, rgba(12,24,40,.5) 0%, rgba(12,24,40,.38) 45%, rgba(12,24,40,.6) 100%); }
}

/* hero date card: compact (was too big on phone and desktop) */
#hero .hero__cal-days { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; }
#hero .hero__cal-month { font-size: 11px; letter-spacing: .12em; }
#hero .hero__cal-date { padding: 10px 16px; }
#hero .hero__cal-place { padding: 10px 16px; }
#hero .hero__cal-place .heading { font-size: clamp(16px, 1.4vw, 20px); }
#hero .hero__cal-place .label { font-size: 11px; letter-spacing: .04em; }
#hero .hero__cal { max-width: 420px; }
@media (max-width: 768px) {
  #hero .hero__cal-days { font-size: 26px; }
  #hero .hero__cal-date { padding: 8px 12px; }
  #hero .hero__cal-place { padding: 8px 12px; }
  #hero .hero__cal-place .heading { font-size: 16px; }
  #hero .hero__cal-place .label { color: rgba(255, 255, 255, 0.85); }
  #hero .hero__cal { max-width: 300px; margin-inline: auto; }
}
@media (max-width: 768px) { #hero .hero__orgs-label { opacity: 1; color: rgba(255, 255, 255, 0.88); } }
.display-xl, .display-l, .display-m, .phero h1, .dochero h1 { font-family: var(--font-display); font-weight: 400; }

/* ---- every page: white backgrounds like the homepage ---- */
.phero--dark, .phero { background: #fff !important; color: var(--ink) !important; }
.pdepth { display: none !important; }
.phero .label, .phero .label--dim, .phero__lede, .phero__stat span { color: var(--muted-light) !important; opacity: 1; }
.phero .btn-ghost { color: var(--ink); border-color: rgba(12, 24, 40, 0.3); background: transparent; }
.ctaband { background: var(--paper-2) !important; color: var(--ink) !important; }
.ctaband::before { display: none !important; }
.ctaband p, .ctaband .label { color: var(--muted-light) !important; opacity: 1; }
.psection--dark, .psection--atmo { background: #fff !important; color: var(--ink) !important; }
.psection--dark::after, .psection--atmo::before, .psection--atmo::after { display: none !important; }
.psection--dark h2, .psection--dark h3 { color: var(--ink) !important; }
.psection--dark .psection__lede, .psection--dark p, .psection--dark .vcard p, .psection--dark .award p { color: var(--muted-light) !important; }
.psection--dark .vcard, .psection--dark .award { background: #fff !important; border: 1px solid var(--hairline-light) !important; }
.psection--dark .vcard__num { color: var(--accent-strong) !important; }
.psection--dark .btn-ghost { color: var(--ink); border-color: rgba(12, 24, 40, 0.3); }

html, body { background: #fff !important; }

/* login / sign-up: a white page with a clean white card */
.authshell { background: #fff !important; }
.authshell__reel, .authshell__glow, .authshell__grain, .authshell__still { display: none !important; }
.authcard { background: #fff; color: var(--ink); border: 1px solid var(--hairline-light); box-shadow: 0 24px 60px -24px rgba(12, 24, 40, 0.25); -webkit-backdrop-filter: none; backdrop-filter: none; }
.authcard__lede, .authcard .field > label, .authcard .checkrow label, .authcard .auth__alt, .authcard .auth__notice p, .authcard .field__hint { color: var(--muted-light); }
.authcard .field input, .authcard .field select { background: #fff; color: var(--ink); border: 1px solid var(--hairline-light); }
.authcard .field input::placeholder { color: rgba(12, 24, 40, 0.4); }
.authcard .authlink { color: var(--accent-strong); }
.authcard .authlink:hover { color: var(--ink); }
.authcard .btn-pill.authsubmit { background: var(--accent); color: #fff; }
.authcard .btn-pill.authsubmit:hover { background: var(--accent-strong); }
.authcard .btn-pill.authsubmit .circle-arrow { background: rgba(255, 255, 255, 0.25); color: #fff; }
.authcard__close { color: var(--ink); background: rgba(12, 24, 40, 0.06); }
.authcard__close:hover { background: rgba(12, 24, 40, 0.12); }

/* mobile menu panel: white */
.sidemenu__scrim { background: rgba(12, 24, 40, 0.35); }
.sidemenu__panel { background: #fff; color: var(--ink); border-inline-start: 1px solid rgba(12, 24, 40, 0.1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sidemenu__links a { border-bottom-color: rgba(12, 24, 40, 0.14); color: var(--ink); }
.sidemenu__close span { background: var(--ink); }

/* iOS Safari ignores overflow:hidden + radius on stages holding video/transformed layers —
   clip-path rounds the corners reliably (client saw sharp edges on iPhone) */
#who .whoscene__stage { border-radius: 28px; clip-path: inset(0 round 28px); -webkit-clip-path: inset(0 round 28px); isolation: isolate; }
#who .whoscene__stage .wv, #who .whoscene__stage img, #who .whoscene__stage video { border-radius: 28px; }
#hero .hero__bg { clip-path: inset(0 round 28px); -webkit-clip-path: inset(0 round 28px); isolation: isolate; }
@media (max-width: 768px) {
  #hero .hero__bg { clip-path: inset(0 round 24px); -webkit-clip-path: inset(0 round 24px); }
  #hero .hero__bg--model, #hero .hero__reel { border-radius: 24px; }
}
#who .whoscene__stage *, #who .whoscene__stage { -webkit-mask-image: none !important; mask-image: none !important; }
#who .whoscene__stage .wv { object-fit: cover; }

/* ---- phone footer: brand on top, two tidy link columns, contact card, social row ---- */
@media (max-width: 768px) {
  .footer { text-align: left; padding-top: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .footer__col { align-items: flex-start; gap: 10px; }
  .footer__col--brand   { grid-column: 1 / -1; order: 0; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  .footer__col--brand .footer__logo { width: 120px; }
  .footer__col--nav     { grid-column: 1; order: 1; }
  .footer__col--about   { grid-column: 2; order: 2; }
  .footer__col--contact { grid-column: 1 / -1; order: 3; padding: 16px; background: var(--paper-2); border-radius: 16px; }
  .footer__col--social  { grid-column: 1 / -1; order: 4; flex-direction: row; align-items: center; justify-content: space-between; }
  .footer__col .label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); opacity: 1; }
  .footer__links { gap: 0; }
  .footer__links a { font-size: 15px; padding-block: 8px; }
  .footer__legal { align-items: flex-start; border-top: 1px solid rgba(12,24,40,.1); margin-top: 24px; padding-top: 16px; text-align: left; }
}
@media (max-width: 768px) { .footer__legal { padding-bottom: 96px; } }

/* ---- hero: copy centred; chips readable ---- */
#hero .hero__act { align-items: center; text-align: center; }
#hero .hero__tags, #hero .hero__ctas, #hero .hero__orgs { justify-content: center; }
#hero .hero__orgs-label { text-align: center; }
#hero .hero__title, #hero .hero__tagline, #hero .hero__lead, #hero .hero__welcome { margin-inline: auto; text-align: center; }
#hero .hero__tag { font-size: clamp(15px, 1.15vw, 18px); font-weight: 600; letter-spacing: 0.04em; }
#hero .hero__tag > span { padding: 12px 22px; }
@media (max-width: 768px) {
  #hero .hero__tag { font-size: 15px; letter-spacing: 0.03em; }
  #hero .hero__tag > span { padding: 11px 18px; }
  #hero .hero__tags { gap: 10px; }
}

/* hero: both acts centre on the same line as the face panel */
@media (min-width: 769px) {
  #hero .hero__act { align-self: center; }
  #hero .hero__act--2 { margin-top: 0; }
}

/* hero, phones: the whole copy group is centred in the card, horizontally and vertically */
@media (max-width: 768px) {
  #hero .beat__inner--hero { justify-content: center; padding-top: 80px; padding-bottom: 16px; }
  #hero .hero__copy { display: grid; place-items: center; width: 100%; padding-top: 0; }
  #hero .hero__act { align-self: center; align-items: center; text-align: center; margin-top: 0 !important; width: 100%; }
  #hero .hero__act > * { margin-inline: auto; max-width: 92%; text-align: center; }
  #hero .hero__tags { margin-top: 20px; justify-content: center; }
}

/* ---- alignment: a centred section heading carries a centred lede ---- */
.psection__lede { text-align: center; margin-inline: auto; }
.psection__head, .psection__head > * { margin-inline: auto; }
.motif { display: block; margin-inline: auto; }
.speakers__head--stacked > div { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* buttons that sit side by side share one height */
.btn-ghost, .btn-pill { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.phero__ctas > *, .ctaband .pill-sm, .ctaband .btn-pill, .ctaband .btn-ghost { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
/* About: the vision text and founder letter centre under their centred headings */
.visionwrap, .letter { margin-inline: auto; }
/* About: vision text and founder letter are centred, text included */
.visionwrap, .visionwrap__p, .letter, .letter__body, .letter__body p, .letter__sign { text-align: center; }
.letter__head { justify-content: center; text-align: center; }
.letter__sign { display: flex; flex-direction: column; align-items: center; }
.visionwrap__p, .letter__body p { margin-inline: auto; }

/* ---- spacing system (4px base): one rhythm for every page ----
   section padding 96 (home tails) / 80 (inner pages), 64 / 56 on phones;
   grid and card gaps 24, 16 on phones; section head → content 40 */
main > section.tail { padding-block: 96px; }
.psection { padding-block: 80px; }
.phero { padding-bottom: 80px; }
.ctaband { padding-block: 80px; }
.vgrid, .awards, .endorse__grid, .fgrid { gap: 24px; }
.fgrid { row-gap: 0; }
.psection__head { margin-bottom: 40px; gap: 12px; }
@media (max-width: 768px) {
  main > section.tail { padding-block: 64px; }
  .psection { padding-block: 56px; }
  .phero { padding-bottom: 56px; }
  .ctaband { padding-block: 56px; }
  .vgrid, .awards, .endorse__grid { gap: 16px; }
  .psection__head { margin-bottom: 32px; }
}
/* heading → content: the home page tails all open the same distance (≈40px) */
#speakers .speakers__head, #pricing .pricing__head, #voices .pricing__head { padding-bottom: 10px; }
#faq h2 { margin-bottom: 0; }

/* desktop hero chips: compact, dark text on a solid light chip (was big and low-contrast) */
@media (min-width: 769px) {
  #hero .hero__tag { font-size: 14px; font-weight: 600; letter-spacing: 0.03em; color: var(--ink); background: #F5EBE0 !important; border: 1px solid rgba(168, 48, 32, 0.6); backdrop-filter: none; }
  #hero .hero__tag::before { background: #F5EBE0; }
  #hero .hero__tag::after { display: none; }
  #hero .hero__tag > span { color: var(--ink); padding: 9px 18px; }
  #hero .hero__tags { gap: 10px; }
  #hero .hero__tag:hover { background: #fff !important; border-color: var(--accent-strong); }
}

/* desktop chips = the phone chips: solid night fill, white text, light outline */
@media (min-width: 769px) {
  #hero .hero__tag { background: rgba(12, 24, 40, 0.88) !important; color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 4px 14px rgba(12, 24, 40, 0.25); font-size: 15px; font-weight: 600; letter-spacing: 0.03em; }
  #hero .hero__tag::before { background: transparent; }
  #hero .hero__tag > span { color: #fff; padding: 11px 20px; }
  #hero .hero__tag:hover { background: rgba(30, 26, 50, 0.96) !important; border-color: #fff; color: #fff; }
}

/* fonts per the client document: Seasons only in Regular (and Italic) — never bold — for display
   headings; Outfit (Light–ExtraBold) for everything else */
h1, h2, .display-xl, .display-l, .display-m, .phero h1, .dochero h1, .psection h2, .ctaband h2, .authcard h1 { font-weight: 400 !important; }
h1 strong, h2 strong, .display-xl strong, .display-l strong, .display-m strong { font-weight: 400; }

/* "150+" card: same shape as the doctor cards — blue branded media area with a frosted-glass tile,
   white info panel underneath */
.scard__media--cta { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding-top: 20%; background:
  radial-gradient(90% 60% at 50% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%),
  linear-gradient(160deg, #A83020, #2C2440) !important; }
.scard__media--cta .cta__logo { width: 104px; height: auto; object-fit: contain; display: block; opacity: .95; flex: none; }
.cta__glass {
  position: absolute; left: 12%; right: 12%; top: 50%; transform: translateY(-34%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 28px 20px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.38); border-radius: 20px;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 32px rgba(12,24,40,.22), inset 0 1px 0 rgba(255,255,255,.35); color: #fff;
}
.cta__glass .display-m { color: #fff; font-size: clamp(40px, 3.4vw, 54px); line-height: 1; }
.cta__label { font-size: 14px; line-height: 1.4; letter-spacing: .02em; color: rgba(255,255,255,.9); max-width: 18ch; }

/* ---- founder feature (client): the WIDE horizontal card again on desktop — photo on the left
   overhanging the top and bottom edges, name/role/quote/Learn more on the right ---- */
@media (min-width: 769px) {
  .leadfeature {
    display: block; position: relative; overflow: visible;
    width: auto; max-width: 840px; min-height: 296px; margin-inline: auto; padding: 40px 44px 40px 288px;
    border-radius: 28px; border: 1px solid rgba(168, 48, 32, 0.22);
    background: radial-gradient(120% 150% at 0% 0%, rgba(168, 48, 32, 0.14), rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, #ffffff 0%, #F5EBE0 100%);
    box-shadow: 0 18px 46px rgba(10, 26, 40, 0.09);
  }
  .leadfeature::before { display: block; }
  .leadfeature__flag {
    display: block; position: absolute; z-index: 1; inset: auto; left: 36px; top: -24px; bottom: -24px;
    width: 208px; height: auto; aspect-ratio: auto; margin: 0; border-radius: 22px; overflow: hidden;
    background: linear-gradient(160deg, #A83020, #2C2440); box-shadow: 0 18px 40px rgba(10, 26, 40, 0.3);
  }
  .leadfeature__flag img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
  .leadfeature:hover .leadfeature__flag { transform: translateY(-5px); box-shadow: 0 28px 56px rgba(10, 26, 40, 0.38); }
  .leadfeature figcaption { padding: 0; gap: 8px; position: relative; z-index: 1; }
  .leadfeature figcaption .heading { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; }
  .leadfeature .body { margin: 4px 0 8px; font-size: 16px; }
}

/* ---- brand emblem ("C FACE") replaces the long "Cairo FACE · conference and exhibition" logo ---- */
.header__logo { height: 44px; width: 44px; object-fit: contain; }
.header__logo--mark { width: 44px; }
@media (max-width: 1100px) { .header__logo { height: 40px; width: 40px; } }
.sidemenu__logo { height: 40px; width: 40px; object-fit: contain; }
.footer__logo { width: 72px; height: auto; }
@media (max-width: 768px) { .footer__col--brand .footer__logo { width: 64px; } }

/* ---- a little Ember Red from the client palette (#A83020) on small components only ----
   icons, bullets, numbers, accents. Buttons and links stay steel blue. */
:root { --ember: #A83020; --ember-soft: rgba(168, 48, 32, 0.08); --ember-line: rgba(168, 48, 32, 0.28); }
.vicon { color: var(--ember); background: linear-gradient(150deg, rgba(168,48,32,.14), rgba(168,48,32,.04)); border-color: var(--ember-line); }
.vcard__num, .whoitem__num { color: var(--ember); }
.coursecard__list li::before { background: var(--ember); opacity: 1; }
.motif { color: var(--ember); opacity: .6; }
.rail__dot[aria-current="true"]::after { border-color: var(--ember); }
.rail__dot[aria-current="true"]::before { background: var(--ember); }
.tick { background: var(--ember) !important; }
.label--head::before { background: var(--ember); }
.psection__head .label, .eyebrow { color: var(--ember); }
.scard__badge { background: rgba(255,255,255,.22); }
.faq__item[open] summary, .faq__item summary:hover { color: var(--ember); }
.socicon:hover { color: #fff; background: var(--ember); border-color: var(--ember); }
.footer .socicon:hover { background: var(--ember); border-color: var(--ember); }
.quotecard__src { color: var(--ember); }

/* ---- a bit more Ember Red (client palette) — still small components only ---- */
/* section eyebrow labels get a red dot; the hairline under centred headings turns ember */
.label--head { position: relative; }
.label--head::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); margin-right: 10px; vertical-align: middle; position: relative; top: -2px; }
.psection__head::after, .docsection > .label--head::after { background: linear-gradient(90deg, transparent, var(--ember-line), transparent); }
/* small text links and meta */
.infocard .label, .infocard .label--dim { color: var(--ember); opacity: 1; }
.fchip.is-on, .chip.is-on, .chipset .is-on { background: var(--ember); border-color: var(--ember); color: #fff; }
.faq__item summary::after, .faq__item summary .plus { color: var(--ember); }
.price-card .label, .price-card__tag { color: var(--ember); }
.leadfeature__badge { background: var(--ember); border-color: var(--ember); color: #fff; }
/* navigation and footer */
.header[data-theme="light"] .navpill:hover { color: var(--ember); }
.footer .footer__col .label { color: var(--ember); opacity: 1; }
.footer__links a:hover { color: var(--ember); opacity: 1; }
.socicon { color: var(--ember); border-color: var(--ember-line); }
.circle-arrow--sm { box-shadow: none; }
/* inline links in body copy */
.body a:not(.pill-sm):not(.btn-pill):not(.btn-ghost), .psection__lede a, .legal__sec a { color: var(--ember); text-decoration-color: var(--ember-line); }

/* "Learn more" + arrow badge on the cards are back to the original blue/glass look (not red) */
.scard__badge { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.docrail .scard .scard__more, .leadcard__more { color: var(--accent-strong) !important; }

/* footer: "Social media" and its icons sit on ONE line */
.footer__col--social { flex-direction: row !important; align-items: center !important; justify-content: flex-start; gap: 16px; flex-wrap: nowrap; }
.footer__col--social .label { white-space: nowrap; margin: 0; }
.footer__col--social .sociconrow { display: flex; flex-wrap: nowrap; gap: 10px; }
@media (min-width: 1101px) { .footer__col--social { grid-column: 8 / span 3; } .footer__col--brand { grid-column: 11 / span 2; } }

/* ---- icons are Ember Red: value-card icons, social icons, card/field/search icons ---- */
.vicon, .vicon svg, .infocard__icon, .infocard__icon svg, .field__icon, .field__icon svg, .sfilters__icon, .sfilters__icon svg { color: var(--ember) !important; }
.socicon, .socicon--ink, .socicon--wa, .socicon svg { color: var(--ember) !important; }
.socicon { border-color: var(--ember-line) !important; background: transparent; }
.socicon:hover, .footer .socicon:hover { color: #fff !important; background: var(--ember) !important; border-color: var(--ember) !important; }
.footer .socicon { background: transparent; }
.sfilters__icon { opacity: .85; }

/* =====================================================================
   BRAND BUILD — exactly the client's "Updated color palette and fonts" document
   Primary:   Deep Night #0C1828 · Ember Red #A83020 · Dark Plum #1E1A32 · Ash Ivory #F5EBE0
   Secondary: Storm Blue #1E2D40 · Slate Dusk #2C2440 · Deep Shadow #141828 · Ash Plum #2C2440
              Rust Ember #7A2010 · Terra Fire #C04020 · Smoked Rose #D4907A · Pearl Dusk #F0D8C4
              Ivory Ash #F5EBE0 · Warm Mist #EADDD0 · Copper Glow #B06040 · Flame Tip #E05030
   Fonts:     Outfit (body) · Seasons (display) · white page background
   ===================================================================== */
:root {
  --brand-deep-night: #0C1828; --brand-ember: #A83020; --brand-plum: #1E1A32; --brand-ivory: #F5EBE0;
  --accent: #A83020; --accent-strong: #7A2010; --ink: #0C1828; --paper: #FFFFFF; --paper-2: #F5EBE0;
  --ember: #A83020; --ember-soft: rgba(168,48,32,.08); --ember-line: rgba(168,48,32,.28);
  --wash: rgba(168,48,32,.06); --hairline-light: rgba(168,48,32,.28);
}
/* primary actions are Ember Red with white text; hover goes to Rust Ember */
.btn-pill, .nav-cta, .pill-cta, .circle-arrow, .railnav__btn { background: var(--brand-ember); color: #fff; }
.btn-pill:hover, .nav-cta:hover, .railnav__btn:hover { background: #7A2010; }
.btn-ghost { color: var(--brand-deep-night); border-color: rgba(12,24,40,.35); }
/* dark components use Dark Plum / Deep Night */
#hero .hero__tag { background: rgba(30,26,50,.9) !important; }
#hero .hero__bg { background: linear-gradient(160deg, #1E1A32 0%, #0C1828 70%, #7A2010 160%) !important; }
.footer { border-top: 1px solid rgba(12,24,40,.1); }

/* ---- "What we will provide" (home) ---- */
.provide__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.provide__lede { color: var(--muted-light); max-width: 56ch; }
.provide__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 40px; }
.provide__card {
  flex: 0 1 calc((100% - 48px) / 3); min-width: 260px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 28px 24px; border-radius: 20px; border: 1px solid var(--hairline-light);
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(245,235,224,.6));
}
.provide__card h3 { font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.provide__card p { font-size: 15px; line-height: 1.55; color: var(--muted-light); }
.provide__num { font-size: 13px; font-weight: 500; color: var(--ember); }
.provide .vicon { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--ember-line); }
.provide .vicon svg { width: 22px; height: 22px; display: block; }
.provide__foot { display: flex; justify-content: center; margin-top: 40px; }
@media (max-width: 1024px) { .provide__card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 768px) { .provide__grid { gap: 16px; margin-top: 32px; } .provide__card { flex-basis: 100%; min-width: 0; } }