:root {
  --yellow: #FFF273;
}

/* Header and the hero portrait */
.brand { font-size: 12px; text-transform: none; }
.brand b {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid #000; border-radius: 0; background: #000; color: var(--yellow);
  font: 700 9px/1 Arial, Helvetica, sans-serif; letter-spacing: .04em;
}
.brand span { font-weight: 700; }
.portrait {
  display: grid;
  place-items: center;
  background: #f3f3f1;
}
.portrait img {
  right: auto; bottom: auto; width: 100%; height: 100%; object-fit: contain;
  object-position: center 58%; filter: none; mix-blend-mode: normal;
}
.portrait em { z-index: 3; }
.hero-map { max-width: 600px; margin: 0 0 14px; font-size: 15px; font-weight: 700; letter-spacing: .02em; }

/* Approach carousel */
.approach { padding-bottom: 0; }
.approach-intro { padding-bottom: 76px; }
.approach-carousel { overflow: hidden; padding-bottom: 38px; }
.approach-track { display: flex; transition: transform .56s cubic-bezier(.2,.8,.2,1); }
.approach-slide {
  display: flex; flex: 0 0 100%; min-height: 310px; flex-direction: column; justify-content: space-between;
  padding: 34px 38px; border: 0; background: transparent;
}
.approach-slide span { color: var(--yellow); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.approach-slide h3 { max-width: 680px; margin: 42px 0 18px; color: var(--yellow); font-size: clamp(30px, 4vw, 52px); line-height: .98; }
.approach-slide p { max-width: 650px; margin: 0; color: rgba(255,255,255,.84); font-size: 17px; }
.carousel-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dots button { width: 8px; height: 8px; padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: transparent; cursor: pointer; }
.carousel-dots button.is-active { background: var(--yellow); border-color: var(--yellow); }
.carousel-arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; min-width: 52px; height: 52px; gap: 0; padding: 0;
  border: 0; background: transparent; color: #fff; cursor: pointer;
}
.carousel-arrow i { font-style: normal; }
.carousel-arrow span, .link-arrow, .row-icon { position: relative; display: inline-block; width: 16px; height: 16px; }
.carousel-arrow span::before, .link-arrow::before, .row-icon::before { position: absolute; top: 7px; left: 1px; width: 12px; border-top: 1.5px solid currentColor; content: ""; }
.carousel-arrow span::after, .link-arrow::after, .row-icon::after { position: absolute; top: 3px; left: 8px; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; content: ""; transform: rotate(45deg); }
.carousel-arrow span::before, .carousel-arrow span::after { display: none; }
.carousel-arrow span { width: 11px; height: 11px; border: 0; }
.carousel-arrow.previous span { border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); }
.carousel-arrow.next span { border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.carousel-arrow.next { background: var(--yellow); color: #000; border-color: var(--yellow); }
.carousel-arrow:hover { background: rgba(255,255,255,.14); color: #fff; }
.carousel-arrow.next:hover { background: #fff; color: #000; }
.text-link .link-arrow, .footer-top .link-arrow { margin-left: 6px; vertical-align: -3px; }
.link-arrow.down { transform: rotate(90deg); }
.link-arrow.up { transform: rotate(-90deg); }

/* Accordions in Help */
.service-row { border-bottom: 1px solid var(--line); }
.service-row summary {
  display: grid; grid-template-columns: 90px 1fr 34px; gap: 20px; align-items: center;
  min-height: 86px; cursor: pointer; list-style: none; transition: background .18s ease, padding .18s ease;
}
.service-row summary::-webkit-details-marker { display: none; }
.service-row summary:hover, .service-row[open] summary { padding: 0 16px; background: var(--yellow); }
.service-row summary > span { color: var(--muted); font-size: 12px; }
.service-row summary h3 { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -.04em; }
.service-row .row-icon { justify-self: end; color: #000; transition: transform .22s ease; }
.service-row[open] .row-icon { transform: rotate(90deg); }
.service-answer { display: grid; grid-template-columns: 90px minmax(0, 680px); gap: 20px; padding: 0 20px 25px 0; }
.service-answer::before { content: ""; }
.service-answer p { margin: 0; color: rgba(0,0,0,.72); font-size: 16px; }

/* FAQ keeps essential pre-consultation answers findable without extending the page unnecessarily. */
.faq { padding: 0 0 118px; }
.faq-list { border-top: 1px solid #000; }
.faq-list details { border-bottom: 1px solid #000; }
.faq-list summary {
  display: grid; grid-template-columns: 90px 1fr 34px; gap: 20px; align-items: center;
  min-height: 86px; cursor: pointer; list-style: none; transition: background .18s ease, padding .18s ease;
}
.faq-list summary::-webkit-details-marker, .education-toggle summary::-webkit-details-marker { display: none; }
.faq-list summary:hover, .faq-list details[open] summary { padding: 0 16px; background: #f1f1ef; }
.faq-list summary > span { color: var(--muted); font-size: 12px; }
.faq-list h3 { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -.04em; }
.faq-list .row-icon { justify-self: end; color: #000; transition: transform .22s ease; }
.faq-list details[open] .row-icon, .education-toggle[open] .row-icon { transform: rotate(90deg); }
.faq-list details > div { display: grid; grid-template-columns: 90px minmax(0, 700px); gap: 20px; padding: 0 20px 27px 0; }
.faq-list details > div::before { content: ""; }
.faq-list details p { margin: 0; color: rgba(0,0,0,.72); font-size: 16px; }

/* The bot is presented as a helpful first step, not a diagnostic claim. */
.bot small { display: block; max-width: 560px; color: rgba(0,0,0,.62); font-size: 12px; }
.black-button { gap: 12px; }
.black-button .link-arrow { color: var(--yellow); }

/* Professional and social activity */
.activity-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 14px; margin-bottom: 64px; }
.activity-card { min-height: 328px; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; border: 1px solid #000; }
.activity-card h3 { max-width: 580px; margin: 36px 0 15px; font-size: clamp(31px, 3.7vw, 50px); line-height: .98; }
.activity-card > p:not(.eyebrow) { max-width: 540px; margin-bottom: 22px; color: rgba(0,0,0,.72); font-size: 16px; }
.activity-card > a, .platform-links a { display: inline-flex; width: fit-content; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.bot-card { background: var(--yellow); }
.webinar-card { background: #000; color: #fff; }
.webinar-card .eyebrow, .webinar-card > p:not(.eyebrow) { color: rgba(255,255,255,.7); }
.webinar-card h3 { color: var(--yellow); }
.platform-links { display: flex; flex-wrap: wrap; gap: 10px; }
.platform-links a { min-height: 42px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.8); }
.platform-links a:hover { background: var(--yellow); color: #000; border-color: var(--yellow); }
.activity-card .link-arrow { color: currentColor; }
.profiles-list.rows > a { min-height: 104px; }
.profiles-list .link-arrow { justify-self: end; color: #000; }

/* Methods, credentials and a clear first step */
.methods-lead { max-width: 720px; margin: 0 0 30px; color: rgba(0,0,0,.72); font-size: 18px; line-height: 1.45; }
.method-menu { display: flex; flex-wrap: wrap; gap: 12px; max-width: 820px; }
.method-chip {
  position: relative; min-height: 50px; padding: 11px 16px; border: 1px solid #000; border-radius: 999px;
  background: #fff; color: #000; cursor: pointer; font: 700 16px/1.15 Arial, Helvetica, sans-serif; text-align: left;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.method-chip:hover, .method-chip:focus-visible, .method-chip.is-open { background: #000; color: var(--yellow); outline: 0; }
.method-chip:focus-visible { box-shadow: 0 0 0 3px rgba(0,0,0,.28); }
.method-popover {
  position: absolute; z-index: 10; bottom: calc(100% + 14px); left: 50%; width: min(360px, calc(100vw - 48px));
  padding: 18px 20px; background: #000; color: #fff; font: 400 17px/1.45 Arial, Helvetica, sans-serif; letter-spacing: 0;
  opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s ease; visibility: hidden;
}
.method-popover::after { position: absolute; bottom: -7px; left: 50%; width: 14px; height: 14px; background: #000; content: ""; transform: translateX(-50%) rotate(45deg); }
.method-chip:hover .method-popover, .method-chip:focus-visible .method-popover, .method-chip.is-open .method-popover { opacity: 1; transform: translate(-50%, 0); visibility: visible; }
.contact .button { color: #000; }
.education-toggle { border-top: 1px solid #000; border-bottom: 1px solid #000; }
.education-toggle summary { display: flex; align-items: center; justify-content: space-between; min-height: 80px; cursor: pointer; list-style: none; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -.045em; }
.education-toggle summary:hover { padding: 0 16px; background: var(--yellow); }
.education-toggle .row-icon { margin-right: 5px; transition: transform .22s ease; }
.education-content { padding-top: 36px; }
.start { padding-top: 6px; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #000; }
.step-grid article { min-height: 315px; display: flex; flex-direction: column; padding: 25px 26px 25px 0; border-right: 1px solid var(--line); }
.step-grid article:not(:first-child) { padding-left: 26px; }
.step-grid article:last-child { border-right: 0; }
.step-grid span { color: var(--muted); font-size: 12px; font-weight: 700; }
.step-grid h3 { margin: auto 0 14px; max-width: 290px; font-size: clamp(28px, 3vw, 42px); line-height: .98; }
.step-grid p { max-width: 340px; margin: 0; color: rgba(0,0,0,.72); font-size: 16px; }
.start-button { margin-top: 32px; }

/* This keeps all pointer graphics consistent across platforms. */
.rows b:not(.link-arrow), .arrow { font-size: 0; }

/* Small type is deliberately four pixels larger for more comfortable reading. */
.nav { min-height: 94px; }
.brand { font-size: 16px; }
.brand b { font-size: 13px; }
.nav-links, .pill { font-size: 17px; }
.pill { padding: 11px 18px; }
.button, .black-button { min-height: 56px; font-size: 18px; }
.eyebrow { font-size: 15px; letter-spacing: .09em; }
.text-link { display: inline-flex; align-items: center; gap: 3px; font-size: 18px; }
.micro { font-size: 16px; line-height: 1.5; }
.head > p:last-child { font-size: 19px; line-height: 1.42; }
.approach-slide span, .service-row summary > span { font-size: 16px; }
.approach-slide p { font-size: 21px; line-height: 1.42; }
.service-answer p { font-size: 20px; line-height: 1.48; }
.bot small { margin-top: 14px; font-size: 16px; line-height: 1.45; }
.activity-card > p:not(.eyebrow) { font-size: 20px; line-height: 1.45; }
.activity-card > a, .platform-links a { font-size: 18px; }
.hero-map { font-size: 19px; line-height: 1.35; }
.methods-lead { font-size: 20px; line-height: 1.45; }
.faq-list summary > span, .step-grid span { font-size: 16px; }
.faq-list p, .step-grid p { font-size: 20px; line-height: 1.48; }
.rows h3 small { font-size: 17px; line-height: 1.35; }
.focus small { font-size: 17px; line-height: 1.5; }
.tags span { font-size: 18px; }
.credentials span, .credentials p { font-size: 16px; line-height: 1.4; }
.docs-title > p:last-child { font-size: 17px; line-height: 1.42; }
.docs p { font-size: 16px; line-height: 1.4; }
footer { font-size: 15px; line-height: 1.45; }

/* A larger reading scale keeps long explanatory text comfortable on large screens. */
body { font-size: 20px; }
.brand { font-size: 20px; }
.brand b { font-size: 17px; }
.nav-links, .pill { font-size: 21px; }
.button, .black-button { font-size: 22px; }
.eyebrow { font-size: 19px; }
.text-link { font-size: 22px; }
.micro { font-size: 20px; }
.head > p:last-child { font-size: 23px; }
.approach-slide span, .service-row summary > span, .faq-list summary > span, .step-grid span { font-size: 20px; }
.service-answer p, .faq-list p, .step-grid p { font-size: 24px; }
.bot small, .credentials span, .credentials p, .docs p { font-size: 20px; }
.activity-card > p:not(.eyebrow) { font-size: 24px; }
.activity-card > a, .platform-links a { font-size: 22px; }
.hero-map { font-size: 23px; }
.rows h3 small, .focus small, .docs-title > p:last-child { font-size: 21px; }
.tags span { font-size: 22px; }
footer { font-size: 19px; }
h1 { font-size: clamp(56px, 7vw, 100px); }
h2 { font-size: clamp(42px, 5vw, 68px); }
.lead { font-size: 22px; }
.large { font-size: 26px; }
.focus > div:last-child { font-size: 32px; }
.approach-slide h3 { font-size: clamp(34px, 4.3vw, 56px); }
.service-row summary h3, .faq-list h3, .rows h3 { font-size: clamp(24px, 2.5vw, 34px); }
.activity-card h3 { font-size: clamp(35px, 4vw, 54px); }
.credentials h3 { font-size: 29px; }
.docs h3 { font-size: 28px; }
.education-toggle summary { font-size: clamp(32px, 3.5vw, 46px); }
.step-grid h3 { font-size: clamp(32px, 3.3vw, 46px); }
.method-chip { font-size: 20px; }
.method-popover { font-size: 21px; }

@media (max-width: 760px) {
  .nav { min-height: 78px; height: auto; }
  .brand { font-size: 16px; }
  .brand b { width: 38px; height: 38px; font-size: 11px; }
  .pill { padding: 9px 12px; font-size: 17px; }
  .button, .black-button { min-height: 54px; font-size: 18px; }
  .eyebrow { font-size: 15px; letter-spacing: .08em; }
  .portrait { min-height: 480px; background: #f4f4f2; }
  .portrait img { object-position: center center; }
  .portrait em { left: 18px; bottom: 18px; font-size: 18px; }
  .approach-intro { padding-bottom: 50px; }
  .approach-carousel { padding-bottom: 26px; }
  .approach-slide { min-height: 360px; padding: 26px 22px; }
  .approach-slide h3 { margin: 32px 0 16px; font-size: 37px; }
  .approach-slide p { font-size: 19px; }
  .carousel-arrow { width: 46px; min-width: 46px; height: 46px; padding: 0; }
  .service-row summary { grid-template-columns: 46px 1fr 28px; min-height: 92px; gap: 12px; }
  .service-row summary:hover, .service-row[open] summary { padding: 0 10px; }
  .service-answer { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 0 10px 26px 0; }
  .service-answer p { font-size: 18px; }
  .row-icon { width: 18px; height: 18px; }
  .activity-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 42px; }
  .activity-card { min-height: 300px; padding: 24px 20px; }
  .activity-card h3 { margin: 30px 0 14px; font-size: 35px; }
  .activity-card > p:not(.eyebrow) { font-size: 18px; }
  .activity-card > a, .platform-links a { font-size: 17px; }
  .hero-map { font-size: 17px; }
  .methods-lead { font-size: 18px; }
  .method-menu { gap: 10px; }
  .method-chip { min-height: 48px; padding: 10px 14px; font-size: 18px; }
  .method-popover {
    position: fixed; right: 16px; bottom: 16px; left: 16px; width: auto; padding: 16px 18px; font-size: 19px;
    box-shadow: 0 18px 42px rgba(0,0,0,.28); transform: translateY(8px);
  }
  .method-popover::after { display: none; }
  .method-chip:hover .method-popover, .method-chip:focus-visible .method-popover, .method-chip.is-open .method-popover { transform: translateY(0); }
  .faq { padding-bottom: 78px; }
  .faq-list summary { grid-template-columns: 46px 1fr 28px; min-height: 92px; gap: 12px; }
  .faq-list summary:hover, .faq-list details[open] summary { padding: 0 10px; }
  .faq-list details > div { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 0 10px 26px 0; }
  .faq-list p { font-size: 18px; }
  .education-toggle summary { min-height: 76px; font-size: 32px; }
  .education-content { padding-top: 22px; }
  .step-grid { grid-template-columns: 1fr; }
  .step-grid article { min-height: 235px; padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .step-grid article:not(:first-child) { padding-left: 0; }
  .step-grid h3 { margin: 34px 0 13px; font-size: 34px; }
  .step-grid p { font-size: 18px; }
  .focus small, .rows h3 small, .credentials span, .credentials p, .docs p { font-size: 15px; }
  .head > p:last-child, .docs-title > p:last-child { font-size: 17px; }
  footer { font-size: 14px; }
  .profiles-list.rows > a { min-height: 104px; }
  .profiles-list.rows > a:hover { padding: 0 10px; }
}

/* Mobile keeps the same hierarchy, with a calmer +2px increase instead of desktop's +4px. */
@media (max-width: 760px) {
  body { font-size: 18px; }
  .brand { font-size: 18px; }
  .brand b { font-size: 13px; }
  .pill { font-size: 19px; }
  .button, .black-button { font-size: 20px; }
  .eyebrow { font-size: 17px; }
  .text-link { font-size: 20px; }
  .micro { font-size: 18px; }
  .head > p:last-child { font-size: 19px; }
  .approach-slide span, .service-row summary > span, .faq-list summary > span, .step-grid span { font-size: 18px; }
  .bot small, .credentials span, .credentials p, .docs p { font-size: 17px; }
  .activity-card > a, .platform-links a { font-size: 19px; }
  .hero-map { font-size: 19px; }
  .rows h3 small, .focus small, .docs-title > p:last-child { font-size: 19px; }
  .tags span { font-size: 20px; }
  footer { font-size: 16px; }
  h1 { font-size: clamp(54px, 12vw, 72px); }
  h2 { font-size: clamp(40px, 9vw, 54px); }
  .lead { font-size: 20px; }
  .large { font-size: 21px; }
  .focus > div:last-child { font-size: 25px; }
  .approach-slide h3 { font-size: 39px; }
  .approach-slide p { font-size: 21px; }
  .service-row summary h3, .faq-list h3, .rows h3 { font-size: 24px; }
  .service-answer p, .faq-list p, .step-grid p { font-size: 20px; }
  .activity-card h3 { font-size: 37px; }
  .activity-card > p:not(.eyebrow) { font-size: 20px; }
  .methods-lead { font-size: 20px; }
  .education-toggle summary { font-size: 34px; }
  .step-grid h3 { font-size: 36px; }
  .credentials h3 { font-size: 27px; }
  .docs h3 { font-size: 22px; }
  .method-chip { font-size: 18px; }
  .method-popover { font-size: 19px; }
}

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