/* Shared site-wide styles: keyframes, responsive layout variables, mobile nav, reusable section classes.
   Breakpoints match the design source: isMobile < 860px, isNarrow < 1200px (unless noted otherwise). */

@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
::selection { background: #D7E85B; color: #14181A; }

:root {
  /* Shared across every page */
  --containerPad: 18px 40px;
  --navDisplay: flex;
  --navCtaDisplay: inline-block;
  --hamburgerDisplay: none;
  --sidePad: 40px;
  --footerCols: 1.4fr 1fr 1fr;
  --footerPad: 72px 40px;
  --footerGap: 40px;

  /* Homepage */
  --heroPad: 48px 40px 100px;
  --heroCols: 1.05fr 1fr;
  --heroMinHeight: 620px;
  --heroImgHeight: 100%;
  --heroContentPad: 64px 56px;
  --h1Size: 48px;

  --factorPad: 72px 64px;
  --factorCols: 1.15fr 0.85fr;
  --factorStatBorder: 1px solid rgba(255,255,255,0.12);
  --factorStatPadLeft: 64px;
  --factorStatPadTop: 0px;
  --h2Size38: 38px;
  --statSize: 108px;

  --assessPad: 100px 40px;
  --assessMargin: 100px 0;
  --assessCols: 1fr 1fr;
  --assessGap: 72px;

  --servicesCols: 1fr 1fr 1fr;
  --servicesPad: 90px 44px;
  --focusPad: 24px 40px 40px;

  --caseCols: 1fr 1fr;
  --caseGap: 64px;
  --caseSectionPad: 100px 40px;
  --caseSectionMargin: 100px 0;
  --h2Size36: 36px;

  --approachPad: 60px 40px 60px;
  --approachTitleSize: 42px;
  --approachCols: 1fr 1fr 1fr 1fr;
  --approachGap: 40px;

  --ctaPad: 64px 56px;
  --ctaMargin: 100px auto 0;
  --ctaAlign: center;
  --h2Size32: 32px;

  --affiliationsMargin: 100px auto 0;
  --footerMarginTop: 80px;

  /* About page */
  --aboutH1Size: 42px;
  --teamLabelMargin: 64px;
  --teamCols1: 1.15fr 1fr;
  --teamCols2: 1fr 1.15fr;
  --teamGap: 56px;
  --teamSectionMargin: 40px auto 100px;
  --teamTextPad: 64px 0;
  --teamImgOrder: 0;
  --ctaBottomMargin: 100px;

  /* Terms & Privacy Policy (shared "legal page" layout) */
  --titlePad: 72px 40px 40px;
  --legalH1Size: 42px;

  /* Research & Insights */
  --researchTitlePad: 100px 40px 64px;
  --researchH1Size: 46px;
  --gridCols: repeat(3, 1fr);
  --gridGap: 32px;

  /* Behavioural Risk */
  --riskHeroTopPad: 72px;
  --riskHeroCols: 1fr 1fr;
  --riskHeroGap: 64px;
  --riskHeroTextPadTop: 8px;
  --riskH1Size: 40px;
  --riskEmbedPad: 56px 56px 8px;
  --riskFactorBottomMargin: 96px;

  /* Contact */
  --contactHeroPad: 72px 40px 0;
  --contactH1Size: 42px;
  --contactHeroPMargin: 64px;
  --contactFormCols: 0.85fr 1.15fr;
  --contactFormGap: 64px;
  --contactPanelPad: 56px 48px;

  /* Article: Behavioural Risk ("ra" prefix) */
  --raBackPad: 28px 40px 0;
  --raHeroPad: 48px;
  --raHeroCols: 1.1fr 0.9fr;
  --raHeroCardPad: 48px;
  --raArticleTopPad: 80px;
  --raH1Size: 34px;
  --raH2Size: 30px;
  --raH2Size38: 34px;
  --raQuoteSize: 28px;
  --raFindingsCols: repeat(2, 1fr);
  --raFactorBottomMargin: 88px;
  --raFactorPad: 56px 64px;
  --raFactorCols: 1.3fr 0.7fr;
  --raCtaJustify: flex-end;
  --raNotifyDirection: row;
  --raNotifyAlign: center;
  --raNotifyFormWidth: auto;

  /* Article: Unomundi ("ua" prefix) */
  --uaBackPad: 28px 40px 0;
  --uaHeroPad: 48px;
  --uaHeroCols: 1.1fr 0.9fr;
  --uaHeroCardPad: 48px;
  --uaH1Size: 34px;
  --uaSectionPad: 80px;
  --uaBandPad: 80px;
  --uaH2Size: 30px;
  --uaTwoCol: repeat(2, 1fr);
  --uaApegBodyCols: 1.3fr 1fr;
  --uaThreeCol: repeat(3, 1fr);
  --uaFourCol: repeat(4, 1fr);
  --uaQuoteCols: 220px 1fr;
  --uaGovCols: 260px 1fr;
  --uaAuthorCols: 340px 1fr;
  --uaAuthorPad: 48px 40px 0;

  /* Article: Bridging the Gap ("bg" prefix) */
  --bgBackPad: 28px 40px 0;
  --bgHeroPad: 48px;
  --bgHeroCols: 1.1fr 0.9fr;
  --bgHeroCardPad: 48px;
  --bgH1Size: 34px;
  --bgSectionPad: 80px;
  --bgBandPad: 72px;
  --bgH2Size: 30px;
  --bgH3Size: 20px;
  --bgQuestionSize: 24px;
  --bgPullQuoteSize: 30px;
  --bgPullQuoteSize2: 23px;
  --bgBylineSize: 19px;
  --bgIntroCols: 0.9fr 1.5fr;
  --bgPanelCols: repeat(3, 1fr);
  --bgQaCols: 0.85fr 1.15fr;
  --bgQaPad: 44px 48px;

  /* Article: The Yes Machine ("ym" prefix) */
  --ymBackPad: 28px 40px 0;
  --ymHeroPad: 48px;
  --ymHeroCols: 1.1fr 0.9fr;
  --ymHeroCardPad: 48px;
  --ymH1Size: 34px;
  --ymSectionPad: 80px;
  --ymBandPad: 72px;
  --ymH2Size: 30px;
  --ymPullQuoteSize: 28px;
  --ymIntroCols: 0.9fr 1.1fr;
  --ymChecklistCols: repeat(2, 1fr);
  --ymEffectCols: 260px 32px 1fr;
  --ymArrowDisplay: flex;
  --ymAuthorCols: 340px 1fr;
  --ymAuthorPad: 48px 40px 0;

  /* Article: The Design System As The Operational Layer ("dso" prefix) */
  --dsoBackPad: 28px 40px 0;
  --dsoHeroPad: 48px;
  --dsoHeroCols: 1.1fr 0.9fr;
  --dsoHeroCardPad: 48px;
  --dsoArticleTopPad: 80px;
  --dsoH1Size: 34px;
  --dsoH2Size: 30px;
  --dsoH2Size38: 34px;
  --dsoQuoteSize: 28px;
  --dsoSectionPad: 80px;
  --dsoBandPad: 72px;
  --dsoModuleNavCols: repeat(5, 1fr);
  --dsoChecklistCols: repeat(2, 1fr);
  --dsoFactorBottomMargin: 88px;
  --dsoFactorPad: 56px 64px;
  --dsoFactorCols: 1.3fr 0.7fr;
  --dsoCtaJustify2: flex-end;
  --dsoAuthorCols: 340px 1fr;
  --dsoAuthorPad: 48px 40px 0;

  /* Article: AI Agents For Mental Health ("aamh" prefix) */
  --aamhBackPad: 28px 40px 24px;
  --aamhHeroPad: 48px;
  --aamhHeroCols: 1.1fr 0.9fr;
  --aamhHeroCardPad: 48px;
  --aamhH1Size: 34px;
  --aamhSectionPad: 80px;
  --aamhBandPad: 72px;
  --aamhH2Size: 30px;
  --aamhPullQuoteSize: 28px;
  --aamhIntroCols: 0.9fr 1.1fr;
  --aamhThreeCol: repeat(3, 1fr);
  --aamhChecklistCols: repeat(2, 1fr);
  --aamhChecklistQCols: repeat(2, 1fr);
  --aamhEffectCols: 300px 32px 1fr;
  --aamhArrowDisplay: flex;
  --aamhQaPad: 40px 48px;
  --aamhCtaCols: 1fr auto;
  --aamhCtaJustify: end;
  --aamhAuthorCols: 340px 1fr;
  --aamhAuthorPad: 48px 40px 0;

  /* Article: When AI Enters the Learning Process ("edtech" prefix) */
  --edtechBackPad: 28px 40px 24px;
  --edtechHeroPad: 48px;
  --edtechHeroCols: 1.1fr 0.9fr;
  --edtechHeroCardPad: 48px;
  --edtechH1Size: 32px;
  --edtechSectionPad: 80px;
  --edtechBandPad: 72px;
  --edtechH2Size: 30px;
  --edtechPullQuoteSize: 28px;
  --edtechIntroCols: 1fr 1fr;
  --edtechThreeColGrid: repeat(3, 1fr);
  --edtechTwoColGrid: repeat(2, 1fr);
  --edtechSpanFull: 1 / -1;
  --edtechCaseCols: 1fr 1fr;
  --edtechCaseGap: 64px;
  --edtechAuthorCols: 340px 1fr;
  --edtechAuthorPad: 48px 40px 0;

  /* Article: Designing AI Mental Health and Wellbeing Tools ("mhwt" prefix) */
  --mhwtBackPad: 28px 40px 24px;
  --mhwtHeroPad: 48px;
  --mhwtHeroCols: 1.1fr 0.9fr;
  --mhwtHeroCardPad: 48px;
  --mhwtH1Size: 32px;
  --mhwtSectionPad: 80px;
  --mhwtBandPad: 72px;
  --mhwtH2Size: 30px;
  --mhwtIntroCols: 1fr 1fr;
  --mhwtTwoColGrid: repeat(2, 1fr);
  --mhwtPatternsGridCols: repeat(2, 1fr);
  --mhwtPatternsGridRows: repeat(5, auto);
  --mhwtQaPad: 40px 48px;
  --mhwtAuthorCols: 340px 1fr;
  --mhwtAuthorPad: 48px 40px 0;

  /* Article: Building AI Responsibly for Children ("ccaf" prefix) */
  --ccafBackPad: 28px 40px 24px;
  --ccafHeroPad: 48px;
  --ccafHeroCols: 1.1fr 0.9fr;
  --ccafHeroCardPad: 48px;
  --ccafH1Size: 34px;
  --ccafSectionPad: 80px;
  --ccafBandPad: 72px;
  --ccafH2Size: 30px;
  --ccafIntroCols: 1fr 1fr;
  --ccafFrameworkIntroCols: 1fr 1fr;
  --ccafOpportunityCols: 1fr 1fr;
  --ccafApegCols: repeat(4, 1fr);
  --ccafPatternCols: 360px 1fr;
  --ccafReqCols: 260px 1fr;
  --ccafCaseCols: 1fr 1fr;
  --ccafCaseGap: 64px;
  --ccafAuthorCols: 340px 1fr;
  --ccafAuthorPad: 48px 40px 0;
}

/* Narrow desktop / tablet landscape (< 1200px) */
@media (max-width: 1199px) {
  :root {
    --h1Size: 40px;
    --approachCols: 1fr 1fr;
    --aboutH1Size: 36px;
  }
}

/* Research grid has its own narrow breakpoint at 1100px */
@media (max-width: 1099px) {
  :root {
    --gridCols: repeat(2, 1fr);
  }
}

/* Mobile (< 860px) */
@media (max-width: 859px) {
  :root {
    --containerPad: 18px 20px;
    --navDisplay: none;
    --navCtaDisplay: none;
    --hamburgerDisplay: flex;
    --sidePad: 20px;
    --footerCols: 1fr;
    --footerPad: 48px 20px;
    --footerGap: 32px;

    --heroPad: 20px 20px 48px;
    --heroCols: 1fr;
    --heroMinHeight: auto;
    --heroImgHeight: 280px;
    --heroContentPad: 36px 24px;
    --h1Size: 30px;

    --factorPad: 36px 24px;
    --factorCols: 1fr;
    --factorStatBorder: none;
    --factorStatPadLeft: 0px;
    --factorStatPadTop: 32px;
    --h2Size38: 26px;
    --statSize: 56px;

    --assessPad: 56px 20px;
    --assessMargin: 56px 0;
    --assessCols: 1fr;
    --assessGap: 32px;

    --servicesCols: 1fr;
    --servicesPad: 48px 24px;
    --focusPad: 16px 20px 24px;

    --caseCols: 1fr;
    --caseGap: 32px;
    --caseSectionPad: 56px 20px;
    --caseSectionMargin: 56px 0;
    --h2Size36: 26px;

    --approachPad: 48px 20px 40px;
    --approachTitleSize: 30px;
    --approachCols: 1fr;
    --approachGap: 28px;

    --ctaPad: 36px 24px;
    --ctaMargin: 56px auto 0;
    --ctaAlign: flex-start;
    --h2Size32: 26px;

    --affiliationsMargin: 56px auto 0;
    --footerMarginTop: 48px;

    --aboutH1Size: 30px;
    --teamLabelMargin: 32px;
    --teamCols1: 1fr;
    --teamCols2: 1fr;
    --teamGap: 28px;
    --teamSectionMargin: 32px auto 56px;
    --teamTextPad: 0;
    --teamImgOrder: -1;
    --ctaBottomMargin: 56px;

    --titlePad: 32px 20px 32px;
    --legalH1Size: 30px;

    --researchTitlePad: 56px 20px 40px;
    --researchH1Size: 32px;
    --gridCols: 1fr;
    --gridGap: 24px;

    --riskHeroTopPad: 32px;
    --riskHeroCols: 1fr;
    --riskHeroGap: 20px;
    --riskHeroTextPadTop: 0px;
    --riskH1Size: 28px;
    --riskEmbedPad: 24px 20px 8px;
    --riskFactorBottomMargin: 56px;

    --contactHeroPad: 32px 20px 0;
    --contactH1Size: 28px;
    --contactHeroPMargin: 40px;
    --contactFormCols: 1fr;
    --contactFormGap: 24px;
    --contactPanelPad: 32px 24px;

    --raBackPad: 20px 20px 0;
    --raHeroPad: 28px;
    --raHeroCols: 1fr;
    --raHeroCardPad: 28px 24px;
    --raArticleTopPad: 48px;
    --raH1Size: 26px;
    --raH2Size: 24px;
    --raH2Size38: 26px;
    --raQuoteSize: 22px;
    --raFindingsCols: 1fr;
    --raFactorBottomMargin: 56px;
    --raFactorPad: 36px 24px;
    --raFactorCols: 1fr;
    --raCtaJustify: flex-start;
    --raNotifyDirection: column;
    --raNotifyAlign: stretch;
    --raNotifyFormWidth: 100%;

    --uaBackPad: 20px 20px 0;
    --uaHeroPad: 28px;
    --uaHeroCols: 1fr;
    --uaHeroCardPad: 28px 24px;
    --uaH1Size: 26px;
    --uaSectionPad: 48px;
    --uaBandPad: 48px;
    --uaH2Size: 24px;
    --uaTwoCol: 1fr;
    --uaApegBodyCols: 1fr;
    --uaThreeCol: 1fr;
    --uaFourCol: repeat(2, 1fr);
    --uaQuoteCols: 1fr;
    --uaGovCols: 1fr;
    --uaAuthorCols: 1fr;
    --uaAuthorPad: 32px 20px 0;

    --bgBackPad: 20px 20px 0;
    --bgHeroPad: 28px;
    --bgHeroCols: 1fr;
    --bgHeroCardPad: 28px 24px;
    --bgH1Size: 26px;
    --bgSectionPad: 48px;
    --bgBandPad: 48px;
    --bgH2Size: 24px;
    --bgH3Size: 17px;
    --bgQuestionSize: 20px;
    --bgPullQuoteSize: 24px;
    --bgPullQuoteSize2: 19px;
    --bgBylineSize: 17px;
    --bgIntroCols: 1fr;
    --bgPanelCols: 1fr;
    --bgQaCols: 1fr;
    --bgQaPad: 28px 24px;

    --ymBackPad: 20px 20px 0;
    --ymHeroPad: 28px;
    --ymHeroCols: 1fr;
    --ymHeroCardPad: 28px 24px;
    --ymH1Size: 26px;
    --ymSectionPad: 48px;
    --ymBandPad: 48px;
    --ymH2Size: 24px;
    --ymPullQuoteSize: 22px;
    --ymIntroCols: 1fr;
    --ymChecklistCols: 1fr;
    --ymEffectCols: 1fr;
    --ymArrowDisplay: none;
    --ymAuthorCols: 1fr;
    --ymAuthorPad: 32px 20px 0;

    --dsoBackPad: 20px 20px 0;
    --dsoHeroPad: 28px;
    --dsoHeroCols: 1fr;
    --dsoHeroCardPad: 28px 24px;
    --dsoArticleTopPad: 48px;
    --dsoH1Size: 26px;
    --dsoH2Size: 24px;
    --dsoH2Size38: 26px;
    --dsoQuoteSize: 22px;
    --dsoSectionPad: 48px;
    --dsoBandPad: 48px;
    --dsoModuleNavCols: 1fr 1fr;
    --dsoChecklistCols: 1fr;
    --dsoFactorBottomMargin: 56px;
    --dsoFactorPad: 36px 24px;
    --dsoFactorCols: 1fr;
    --dsoCtaJustify2: flex-start;
    --dsoAuthorCols: 1fr;
    --dsoAuthorPad: 32px 20px 0;

    --aamhBackPad: 20px 20px 20px;
    --aamhHeroPad: 28px;
    --aamhHeroCols: 1fr;
    --aamhHeroCardPad: 28px 24px;
    --aamhH1Size: 26px;
    --aamhSectionPad: 48px;
    --aamhBandPad: 48px;
    --aamhH2Size: 24px;
    --aamhPullQuoteSize: 22px;
    --aamhIntroCols: 1fr;
    --aamhThreeCol: 1fr;
    --aamhChecklistCols: 1fr;
    --aamhChecklistQCols: 1fr;
    --aamhEffectCols: 1fr;
    --aamhArrowDisplay: none;
    --aamhQaPad: 28px 24px;
    --aamhCtaCols: 1fr;
    --aamhCtaJustify: flex-start;
    --aamhAuthorCols: 1fr;
    --aamhAuthorPad: 32px 20px 0;

    --edtechBackPad: 20px 20px 20px;
    --edtechHeroPad: 28px;
    --edtechHeroCols: 1fr;
    --edtechHeroCardPad: 28px 24px;
    --edtechH1Size: 26px;
    --edtechSectionPad: 48px;
    --edtechBandPad: 48px;
    --edtechH2Size: 24px;
    --edtechPullQuoteSize: 22px;
    --edtechIntroCols: 1fr;
    --edtechThreeColGrid: 1fr;
    --edtechTwoColGrid: 1fr;
    --edtechSpanFull: auto;
    --edtechCaseCols: 1fr;
    --edtechCaseGap: 32px;
    --edtechAuthorCols: 1fr;
    --edtechAuthorPad: 32px 20px 0;

    --mhwtBackPad: 20px 20px 20px;
    --mhwtHeroPad: 28px;
    --mhwtHeroCols: 1fr;
    --mhwtHeroCardPad: 28px 24px;
    --mhwtH1Size: 26px;
    --mhwtSectionPad: 48px;
    --mhwtBandPad: 48px;
    --mhwtH2Size: 24px;
    --mhwtIntroCols: 1fr;
    --mhwtTwoColGrid: 1fr;
    --mhwtPatternsGridCols: 1fr;
    --mhwtPatternsGridRows: none;
    --mhwtQaPad: 28px 24px;
    --mhwtAuthorCols: 1fr;
    --mhwtAuthorPad: 32px 20px 0;

    --ccafBackPad: 20px 20px 20px;
    --ccafHeroPad: 28px;
    --ccafHeroCols: 1fr;
    --ccafHeroCardPad: 28px 24px;
    --ccafH1Size: 26px;
    --ccafSectionPad: 48px;
    --ccafBandPad: 48px;
    --ccafH2Size: 24px;
    --ccafIntroCols: 1fr;
    --ccafFrameworkIntroCols: 1fr;
    --ccafOpportunityCols: 1fr;
    --ccafApegCols: 1fr;
    --ccafPatternCols: 1fr;
    --ccafReqCols: 1fr;
    --ccafCaseCols: 1fr;
    --ccafCaseGap: 32px;
    --ccafAuthorCols: 1fr;
    --ccafAuthorPad: 32px 20px 0;
  }
}

/* Article body copy links (Research & Insights articles) */
a.body-link {
  color: #2E63C7;
  text-decoration: underline;
  text-decoration-color: rgba(46,99,199,0.35);
}
a.body-link:hover {
  color: #1B4A9E;
  text-decoration-color: #2E63C7;
}

/* Mobile hamburger menu */
.mobile-menu {
  display: none;
}
.mobile-menu.is-open {
  display: flex;
}
@media (min-width: 860px) {
  .mobile-menu {
    display: none !important;
  }
}

/* Three-services middle card border swaps side on mobile (homepage) */
.service-card-middle {
  border-left: 1px solid rgba(20,24,26,0.08);
  border-right: 1px solid rgba(20,24,26,0.08);
}
@media (max-width: 859px) {
  .service-card-middle {
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(20,24,26,0.08);
    border-bottom: 1px solid rgba(20,24,26,0.08);
  }
}

/* Team bio blocks (About page): photo + copy, alternating sides, stack + reorder photo-first on mobile */
.team-block {
  display: grid;
  gap: var(--teamGap);
  align-items: stretch;
  border-radius: 28px;
  overflow: hidden;
}
.team-block--left-copy {
  grid-template-columns: var(--teamCols1);
}
.team-block--right-copy {
  grid-template-columns: var(--teamCols2);
}
.team-photo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
  order: var(--teamImgOrder);
}
.team-copy {
  padding: var(--teamTextPad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Contact page: success message vs form toggle (vanilla JS, no framework) */
.contact-success {
  display: none;
}
.contact-success.is-visible {
  display: flex;
}
.contact-form.is-hidden {
  display: none;
}