/* Mobile first: the base layout fits narrow screens; larger grids are opt-in. */
.page-home { --home-orange:#f58345; --home-ink:#10234b; --home-muted:#667085; }
.home-wrap { width:calc(100% - 36px); max-width:1184px; margin-inline:auto; }
.home-wrap--narrow { max-width:800px; }
.home-hero { padding:40px 0 0; background:linear-gradient(180deg,#fff 30%,#faf7f3); }
.home-intro { max-width:780px; text-align:left; }
.home-intro h1 { font:500 clamp(32px,8.3vw,44px)/1.12 Outfit,sans-serif; letter-spacing:-.04em; margin:0 0 20px; }
.home-intro h1 em { color:inherit; font-style:normal; }
.home-lead { max-width:580px; margin:0; color:#667085; font-size:14px; line-height:1.8; }
.home-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; margin:22px 0 0; }
.home-actions--center { justify-content:center; }
.home-button { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:10px 18px; min-height:44px; border:1px solid transparent; border-radius:999px; background:var(--home-orange,#f58345); color:#10234b; font-size:12px; font-weight:600; line-height:1.4; transition:background .2s; }
.home-button:hover { background:#ff9b65; }
.home-button>span,.home-text-link>span { font-size:17px; }
.home-text-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:12px; font-weight:500; line-height:1.5; color:#10234b; text-underline-offset:5px; }
.home-text-link:hover { text-decoration:underline; }
.platform-showcase { margin-top:32px; scroll-margin-top:110px; }
.showcase-window { overflow:hidden; border:5px solid #fff; border-bottom:0; background:#fff; border-radius:22px 22px 0 0; box-shadow:0 0 24px #10234b0c; }
/* Crop the preview, while keeping the full illustration available on click. */
.product-zoom { display:block; width:100%; aspect-ratio:2.2; overflow:hidden; padding:0; border:0; background:#fff; position:relative; text-align:left; cursor:zoom-in; }
.product-zoom>img { width:125%; max-width:none; height:auto; margin-left:-25%; }
.product-zoom:focus-visible { outline-offset:-5px; }
.page-home .trust { position:relative; width:calc(100% - 36px); max-width:1184px; border:0; padding:36px 0 0; text-align:center; }
.page-home .trust>p { color:#526076; font:500 17px/1.5 Fustat,sans-serif; letter-spacing:0; margin-bottom:22px; }
.page-home .logo-rail { overflow:hidden; padding:10px 0 12px; mask-image:linear-gradient(to right,transparent,#000 4%,#000 94%,transparent); }
.page-home .logo-track { display:flex; width:max-content; animation:brand-flow 55s linear infinite; }
.page-home .logo-group { display:flex; flex-shrink:0; gap:0; padding:0; }
.page-home .logo-group img { width:132px; height:48px; padding:7px 20px; opacity:.8; }
.page-home .trust:hover .logo-track { animation-play-state:running; }
.page-home.motion-paused .logo-track,.page-home.motion-paused .trust:hover .logo-track { animation-play-state:paused; }
.home-section { padding:64px 0; }
.home-section-heading { margin:0 auto 28px; max-width:780px; text-align:center; }
.home-section-heading h2,.experience-copy h2 { font-size:32px; font-weight:500; letter-spacing:-.035em; line-height:1.15; margin-bottom:18px; text-wrap:balance; }
.home-section-heading p { color:#6a7483; font-size:14px; margin:0 auto; max-width:620px; }
.benefit-grid { display:grid; grid-template-columns:1fr; gap:16px; max-width:1000px; margin-inline:auto; }
.benefit-card { min-width:0; border:1px solid #e5e8ed; border-radius:18px; background:#fff; padding:20px; }
.benefit-symbol { display:block; width:144px; height:112px; overflow:hidden; margin:0 auto 8px; }
.benefit-symbol img { display:block; width:200%; max-width:none; height:auto; transform:translateY(-16px); }
.benefit-symbol--team img { transform:translate(-50%,-16px); }
.benefit-card { text-align:center; }
.benefit-card p { margin-inline:auto; }
.portfolio-button { min-height:52px; padding:12px 22px; font-size:17px; }
.workflow-art img { display:block; width:300%; max-width:none; height:auto; }
.workflow-art--questionnaire img { transform:translateX(-33.333333%); }
.workflow-art--report img { transform:translateX(-66.666667%); }
.page-home .benefit-card h3 { font-size:24px; line-height:1.2; margin:0 0 10px; }
.page-home .benefit-card p { margin:0 auto; color:#677386; font-size:15px; line-height:1.55; max-width:400px; }
.portfolio-link { display:flex; justify-content:center; padding-top:24px; }
.home-group { padding-top:0; position:relative; isolation:isolate; overflow:clip; }
#group-title { position:relative; isolation:isolate; }
.group-globe { position:absolute; z-index:-1; pointer-events:none; left:50%; top:calc(50% + 56px); width:clamp(240px,60vw,340px); aspect-ratio:1; background:url("/assets/img/Bexprofile-logo.png") left center / auto 100% no-repeat; opacity:.065; transform:translate(-50%,-50%) rotate(var(--globe-angle,0deg)); }
@media(prefers-reduced-motion:reduce) { .group-globe { transform:translate(-50%,-50%); } }
.group-image-frame { position:relative; z-index:1; padding:5px; overflow:hidden; border:1px solid #e9edf2; border-radius:22px; background:#f5f7fa; box-shadow:0 12px 40px -24px #10234b24; }
.group-image { display:block; width:100%; padding:0; overflow:hidden; border:0; border-radius:17px; background:#f5f7fa; cursor:zoom-in; }
.group-image img { width:125%; max-width:none; height:auto; margin-left:-25%; }
.group-image:focus-visible { outline-offset:-4px; }
.home-workflow { background:#faf9f6; }
.workflow-grid { display:grid; grid-template-columns:1fr; gap:30px; list-style:none; padding:0; max-width:410px; margin:auto; }
.workflow-grid>li { min-width:0; }
.workflow-art { height:auto; aspect-ratio:1; display:block; position:relative; overflow:hidden; border-radius:18px; background:#f5f7fa; border:1px solid #e5e9ef; padding:0; }
.workflow-copy { padding:20px 4px 0; text-align:center; }
.step-index { font-size:11px; color:#a3491e; display:block; margin-bottom:8px; }
.workflow-copy h3 { font-size:27px; margin-bottom:10px; }
.workflow-copy p { color:#6a7483; font-size:13px; max-width:300px; margin:0 auto; line-height:1.8; }
.home-workflow .home-actions { margin-top:32px; }
.experience-grid { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:28px; margin:0; text-align:center; }
.experience-portrait { position:relative; width:100%; max-width:320px; margin:auto; border-radius:22px; overflow:hidden; background:radial-gradient(ellipse at 50% 28%,#f5e2ce,#e4dfd6); aspect-ratio:1; }
.experience-portrait>img { width:100%; height:100%; object-fit:cover; object-position:center 23%; }
.experience-portrait>div { position:absolute; bottom:0; left:0; right:0; padding:52px 24px 24px; background:linear-gradient(transparent,#152436e8); color:#fff; text-align:center; }
.experience-portrait strong { display:block; font:500 23px/1.3 Outfit,sans-serif; }
.experience-portrait span { display:block; font-size:11px; margin-top:4px; color:#e5e9ee; }
.experience-copy { min-width:0; }
.experience-copy>p { max-width:520px; font-size:17px; line-height:1.65; color:#667085; margin:0 auto 24px; }
.experience-numbers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0 0 28px; padding:24px 0; border-top:1px solid #e4e7ec; border-bottom:1px solid #e4e7ec; }
.experience-numbers strong { display:block; font:600 32px/1.1 Fustat,sans-serif; letter-spacing:-.04em; color:#10234b; }
.experience-numbers span { display:block; font-size:12px; color:#6a7483; margin-top:8px; }
.home-faq { padding-top:0; }
.home-faq .accordion summary { min-height:72px; padding:20px 0; font-size:14px; font-weight:500; gap:16px; }
.home-faq .accordion details>div { font-size:13px; color:#6a7483; padding:0 10px 22px 0; }
.home-faq .accordion details>div a { color:#a3491e; text-decoration:underline; }
.home-final { text-align:center; padding:64px 0; background:radial-gradient(ellipse at 50% 100%,#f6dfcd,transparent 65%),#fbf6ef; }
.home-final h2 { max-width:820px; margin:0 auto 20px; font-size:34px; letter-spacing:-.035em; text-wrap:balance; }
.home-final p { font-size:14px; color:#6a7483; }
.page-home .site-footer { background:#fff; color:#10234b; border-top:1px solid #e6e9ed; }
.page-home .site-footer .logo { filter:none; }
.page-home .site-footer p,.page-home .site-footer a,.page-home .footer-bottom { color:#667085; font-size:12px; }
.page-home .site-footer a:hover { color:#a3491e; }.page-home .footer-bottom { border-color:#e6e9ed; }
.home-overline { display:block; font-size:11px; color:#a3491e; margin-bottom:16px; }
.assessment-hero { text-align:center; padding:44px 0 30px; background:linear-gradient(#fff,#faf8f4); }
.assessment-hero h1 { font-size:clamp(38px,6vw,60px); margin:0 0 20px; line-height:1.1; }
.assessment-hero p { font-size:14px; max-width:560px; margin:auto; text-wrap:balance; }
.assessment-catalog { padding-top:40px; }.assessment-catalog .filters { justify-content:center; margin-bottom:32px; gap:8px; }
.assessment-catalog .filters button { min-height:44px; font-size:11px; padding:9px 12px; }
.assessment-catalog .report-card { scroll-margin-top:115px; }.assessment-catalog .report-card h3 { font-size:25px; }.assessment-catalog .report-card .when { font-size:12px; }
.assessment-help .section-head { text-align:center; margin-inline:auto; }.assessment-help .actions { justify-content:center; }
@media(min-width:680px) {
 .group-image-frame { padding:8px; border-radius:30px; }.group-image { border-radius:22px; }.group-image img { width:100%; margin-left:0; }
 .home-wrap,.page-home .trust { width:calc(100% - 64px); }
 .home-hero { padding-top:56px; }.home-intro h1 { font-size:50px; }.home-lead { font-size:15px; }
 .home-section { padding:80px 0; }.home-section-heading { margin-bottom:36px; }.home-section-heading h2,.experience-copy h2 { font-size:40px; }
 .portfolio-button { min-height:54px; padding:13px 24px; font-size:20px; }
 .benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }.benefit-card { padding:24px; }
 .showcase-window { border-width:8px; border-bottom:0; border-radius:36px 36px 0 0; }
 .product-zoom { aspect-ratio:2.8; }.product-zoom>img { width:100%; margin-left:0; }
 .page-home .trust { padding-top:56px; }.page-home .trust>p { font-size:20px; margin-bottom:30px; }
 .page-home .logo-group img { width:152px; height:54px; padding:8px 24px; }
 .home-final h2 { font-size:44px; }.home-faq { padding-top:0; }.assessment-hero { padding:60px 0 40px; }
}
@media(min-width:960px) {
 .home-hero { padding-top:64px; }.home-intro h1 { font-size:56px; }.home-intro { max-width:760px; }
 .platform-showcase { margin-top:40px; }.home-section { padding:96px 0; }.home-section-heading h2,.experience-copy h2 { font-size:44px; }
 .home-group,.home-faq { padding-top:0; }.group-preview-body { padding:32px; gap:32px; }
 .workflow-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none; gap:24px; }
 .experience-grid { grid-template-columns:1fr 1fr; gap:64px; text-align:left; }
 .experience-copy>p { margin-inline:0; font-size:20px; }
 .experience-numbers { gap:48px; }
 .experience-numbers strong { font-size:44px; }.experience-numbers { justify-content:flex-start; }
 .experience-portrait { max-width:420px; aspect-ratio:1; margin-inline:0; }.experience-portrait>img { object-position:top; }
 .home-final { padding:84px 0; }.home-final h2 { font-size:48px; }
}
@media(prefers-reduced-motion:reduce) {
 .home-button { transition:none; }.page-home .logo-track { animation:none; }
 .page-home .logo-rail { overflow-x:auto; mask-image:none; padding-right:0; }.page-home .logo-group[aria-hidden=true],.page-home .trust .motion-toggle { display:none; }
}

/* Hero rhythm follows the Fustat typography of the supplied reference. */
.home-hero { padding-top:32px; overflow:hidden; background:linear-gradient(180deg,#fff,#f5f7fa); }
.home-intro { max-width:100%; }
.home-announcement { display:flex; align-items:center; gap:10px; margin:0 0 24px; color:#667085; font:400 13px/1.5 Fustat,sans-serif; }
.home-announcement>svg { flex-shrink:0; color:#d97032; }
.home-intro h1 { font:600 clamp(34px,7.5vw,48px)/1.08 Fustat,sans-serif; letter-spacing:-.04em; margin-bottom:24px; }
.home-lead { font-family:Fustat,sans-serif; font-size:17px; line-height:1.6; max-width:640px; }
.home-intro .home-actions { gap:12px; margin-top:30px; }
.home-intro .home-button { min-height:52px; padding:12px 22px; font:600 17px/1.3 Fustat,sans-serif; }
.home-intro .home-button--secondary { background:#fff; border:1px solid #e0e4e9; font-weight:500; }
.home-intro .home-button--secondary:hover { background:#f7f8fa; }
@media(min-width:680px) {
 .home-hero { padding-top:46px; }.home-announcement { font-size:14px; margin-bottom:26px; }
 .home-intro h1 { font-size:56px; line-height:1.04; }.home-lead { font-size:20px; }
 .home-intro .home-button { font-size:20px; min-height:54px; padding:13px 24px; }
 .home-intro .home-actions { gap:16px; margin-top:36px; }.platform-showcase { margin-top:52px; }
}
@media(min-width:960px) {
 .home-hero { padding-top:44px; }.home-intro h1 { font-size:60px; line-height:1.02; letter-spacing:-.04em; }
 .home-intro .home-actions { margin-top:36px; }.platform-showcase { margin-top:48px; }
}

/* Shared CTA sizing and color, starting with a full-width touch target on phones. */
.page-home main :is(.home-button,.home-intro .home-button,.portfolio-button) {
 display:inline-flex; align-items:center; justify-content:center; width:100%; max-width:100%; min-height:52px;
 padding:12px 22px; border:1px solid #f58345; border-radius:999px; background:#f58345; color:#10234b;
 font:600 17px/1.3 Fustat,Arial,sans-serif; text-align:center; text-decoration:none; box-sizing:border-box;
}
.page-home main :is(.home-button,.home-intro .home-button,.portfolio-button):hover { background:#ff9b65; border-color:#ff9b65; text-decoration:none; }
.page-home .portfolio-link { width:100%; }
.page-home .site-header .header-demo { display:none; }
.page-home .site-header .menu-toggle { margin-left:auto; }
.page-home .site-header nav>.btn-small { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:12px 22px; border:1px solid #f58345; border-radius:999px; background:#f58345; color:#10234b; font:600 17px/1.3 Fustat,Arial,sans-serif; text-align:center; white-space:normal; }
@media(min-width:680px) {
 .page-home main :is(.home-button,.home-intro .home-button,.portfolio-button) { width:300px; min-height:54px; padding:13px 24px; font-size:20px; }
 .page-home .site-header nav>.btn-small { min-height:54px; padding:13px 24px; }
}
@media(min-width:1200px) { .page-home .site-header nav>.btn-small { font-size:17px; white-space:nowrap; } }

.page-home main .home-intro .home-button--secondary { background:#fff; border-color:#e0e4e9; font-weight:500; }
.page-home main .home-intro .home-button--secondary:hover { background:#f7f8fa; border-color:#e0e4e9; }