/* Why WriteBest page (2026-10-09 redesign test). Own classes (wu-), uses the site's standard variables from wb-standards.css.
   Layout: every section = big heading on the left half, icons / paragraphs on the right half (stacked on phones and small tablets). */
html.wu-smooth { scroll-behavior: smooth; }
/* the site sets overflow-x:hidden on body, which stops position:sticky; clip does not */
body.WhyWriteBestPG { overflow-x: clip !important; overflow-y: visible !important; }
.wu-page { padding-top: 72px; background: #f3f3f3; color: var(--wb-text, #333); font-family: var(--wb-font, 'Geomanist_r', sans-serif); font-size: 16px; line-height: 26px; }
.wu-page * { box-sizing: border-box; }
.wu-wrap { max-width: 1400px; margin: 0 auto; padding: 0 15px; } /* same width as the .container on About and the other pages */
.wu-sec { padding: 64px 0 0; scroll-margin-top: 152px; }
.wu-page .wu-sec#leader { padding-top: 40px; }
.wu-page h1.wu-h1, .wu-page h2.wu-h2, .wu-page h3.wu-h3 { margin: 0; font-family: var(--wb-font-strong, 'Geomanist', sans-serif); font-weight: normal; color: #000; letter-spacing: 0; }
.wu-page .wu-big { font-size: 34px; line-height: 42px; }
.wu-page h3.wu-h3 { font-size: 24px; line-height: 32px; margin-bottom: 8px; }
.wu-page p { margin: 0; }
.wu-page .wu-lead { font-size: 18px; line-height: 28px; color: #333; }

/* two halves: heading | content */
.wu-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.wu-head { min-width: 0; }
.wu-body { min-width: 0; }
@media (min-width: 992px) {
    .wu-two { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
    .wu-page .wu-big { font-size: clamp(32px, min(3.4vw, 6vh), 52px); line-height: 1.1; }
}

/* sticky pill menu (was the black side bar) */
.wu-pillbar { position: sticky; top: 72px; z-index: 20; background: #f3f3f3; }
.wu-pills { display: flex; gap: 8px; margin: 0; padding: 26px 0 14px; overflow-x: auto; scrollbar-width: none; }
.wu-pills::-webkit-scrollbar { display: none; }
.wu-pill { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 8px 12px; border-radius: 999px; background: #fafafa; color: #000 !important; font-family: 'Geomanist_r', sans-serif; font-size: 15px; line-height: 24px; text-decoration: none !important; transition: background .2s, color .2s; }
.wu-pill img { width: 22px; height: 22px; filter: brightness(0); transition: filter .2s; }
.wu-pill:hover { background: #e2e2e2; }
.wu-pill.is-on, .wu-pill.is-on:hover { background: #c43030; color: #fff !important; }
.wu-pill.is-on img { filter: none; }

/* cards: white box, icon + text, all the same */
.wu-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wu-card { display: flex; align-items: center; gap: 20px; padding: 20px 26px; border-radius: 8px; background: #fff; }
.wu-card img { flex: none; width: 52px; height: 52px; object-fit: contain; }
.wu-card p { color: #333; font-size: 16px; line-height: 24px; }
.wu-card strong { font-family: var(--wb-font-strong, 'Geomanist', sans-serif); font-weight: normal; color: #000; font-size: 18px; line-height: 26px; }
.wu-card p a { display: inline !important; padding: 0 !important; margin: 0 !important; color: #c43030 !important; text-decoration: none !important; }
.wu-card p a:hover { text-decoration: underline; }
.wu-link { color: #c43030 !important; text-decoration: none !important; font-size: 16px; }
.wu-link:hover { text-decoration: underline !important; }
.wu-card > div { min-width: 0; }
.wu-card .wu-link { display: inline-block; margin-top: 4px; }
.wu-body > .wu-lead + .wu-cards { margin-top: 20px; }
.wu-body > .wu-cards + .wu-btn, .wu-body > .wu-tabs + .wu-btn { margin-top: 24px; }
.wu-body > .wu-lead + .wb-btn { margin-top: 28px; }

/* photos under the heading */
.wu-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.wu-photos img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.wu-eco-img { display: block; width: 100%; height: 260px; margin-top: 28px; object-fit: cover; }

/* industries: click a topic, its details open */
.wu-tabs .wu-item { display: block; margin-bottom: 8px; }
.wu-tab { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 16px; border: 0; border-radius: 8px; background: #fff; text-align: left; font-family: var(--wb-font-strong, 'Geomanist', sans-serif); font-size: 16px; line-height: 24px; color: #000; cursor: pointer; transition: background .2s, color .2s; }
.wu-tab img { width: 36px; height: 36px; flex: none; object-fit: contain; }
.wu-tab:hover { background: #f1f1f1; }
.wu-tab:focus-visible { outline: 2px solid #c43030; outline-offset: 2px; }
.wu-panel { display: flex; gap: 24px; margin-top: 8px; padding: 20px; border-radius: 8px; background: #fff; }
.wu-panel img { flex: none; width: 220px; height: 240px; object-fit: cover; }
.wu-panel .wu-text { align-self: center; min-width: 0; }
.wu-btn { display: inline-flex !important; align-items: center; justify-content: center; margin-top: 18px; min-height: 48px; padding: 10px 32px; border-radius: 999px; background: #c43030; color: #fff !important; font-family: var(--wb-font-strong, 'Geomanist', sans-serif); font-size: 16px; line-height: 24px; text-decoration: none !important; }
.wu-btn:hover { background: #ab2929; }
.wu-tabs.is-ready .wu-panel { display: none; }
.wu-tabs.is-ready .wu-panel.is-active { display: flex; }
.wu-tabs.is-ready .wu-tab[aria-selected="true"] { color: #c43030; box-shadow: inset 3px 0 0 #c43030; }
@media (min-width: 768px) and (max-width: 991px) {
    .wu-tabs.is-ready { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0 24px; align-items: start; }
    .wu-tabs.is-ready .wu-item { display: contents; }
    .wu-tabs.is-ready .wu-tab { grid-column: 1; margin-bottom: 8px; }
    .wu-tabs.is-ready .wu-panel { grid-column: 2; grid-row: 1 / span 8; margin: 0; }
}
@media (min-width: 992px) {
    /* six topics as a 3 x 2 grid, the open topic below them */
    .wu-tabs.is-ready { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
    .wu-tabs.is-ready .wu-item { display: contents; }
    .wu-tabs.is-ready .wu-tab { margin-bottom: 0; }
    .wu-tabs.is-ready .wu-panel { grid-column: 1 / -1; grid-row: 3; margin: 4px 0 0; }
}

/* closing band: same red band as About */
.wu-cta { margin-top: 64px; padding: 80px 0; background: #c43030; color: #fff; }
.wu-page .wu-cta h2.wu-h2 { color: #fff; }
.wu-cta .wu-lead { color: #fff; }

@media (max-width: 767px) {
    .wu-sec { padding-top: 56px; }
    .wu-photos { grid-template-columns: 1fr; }
    .wu-eco-img { height: 220px; }
    .wu-card { padding: 16px 18px; gap: 16px; }
    .wu-card img { width: 44px; height: 44px; }
    .wu-panel { flex-direction: column; padding: 18px; }
    .wu-panel img { width: 100%; height: 200px; }
    .wu-cta { margin-top: 56px; padding: 56px 0; }
}

/* one screen per section, one scroll = one section (desktop and large tablets; phones scroll normally) */
@media (min-width: 992px) and (min-height: 600px) {
    html.wu-snap { scroll-snap-type: none; } /* paging is done in why-us.js (not the browser), so the intro area scrolls normally */
    html.wu-snap .wu-page .wu-sec { min-height: calc(100vh - 152px); padding: 24px 0; display: flex; align-items: center; scroll-snap-align: start; scroll-margin-top: 152px; }
    html.wu-snap .wu-sec > .wu-wrap { width: 100%; }
    html.wu-snap .wu-photos img { aspect-ratio: auto; height: clamp(110px, 17vh, 190px); }
    html.wu-snap .wu-eco-img { height: clamp(180px, 30vh, 300px); }
    html.wu-snap .wu-cta { min-height: calc(100vh - 152px); margin-top: 0; padding: 24px 0; display: flex; align-items: center; scroll-snap-align: start; scroll-margin-top: 152px; }
    html.wu-snap .wu-cta .wu-wrap { width: 100%; }
    html.wu-snap footer { scroll-snap-align: end; }
}
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    html.wu-snap .wu-card { padding: 14px 22px; }
    html.wu-snap .wu-card img { width: 44px; height: 44px; }
    html.wu-snap .wu-panel img { width: 180px; height: 190px; }
    html.wu-snap .wu-tab { padding: 6px 12px; }
    html.wu-snap .wu-tab img { width: 30px; height: 30px; }
}

/* eco fold: photo as the background of the whole fold */
.wu-sec.wu-bg { background: linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .58)), url(../images/about3.jpg) center / cover no-repeat; }
.wu-page .wu-bg h2.wu-h2, .wu-bg .wu-lead { color: #fff; }

/* copy brief (2026-10-09): intro + closing lines, two-button rows, ghost button, FAQ accordion */
.wu-body > .wu-lead + .wu-cards { margin-top: 16px; }
.wu-body > .wu-cards + .wu-lead.wu-after, .wu-body > .wu-lead.wu-after { margin-top: 16px; font-size: 16px; line-height: 24px; }
.wu-body > .wu-lead.wu-after + .wu-btn, .wu-body > .wu-lead.wu-after + .wu-btns { margin-top: 20px; }
.wu-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.wu-btns .wu-btn { margin-top: 0; }
.wu-btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 32px; border: 2px solid #fff; border-radius: 999px; background: transparent; color: #fff !important; font-family: var(--wb-font-strong, 'Geomanist', sans-serif); font-size: 16px; line-height: 24px; text-decoration: none !important; transition: background .2s, color .2s; }
.wu-btn-ghost:hover { background: #fff; color: #c43030 !important; }

/* short laptop screens: tighter spacing so each fold still fits one screen */
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    html.wu-snap .wu-page .wu-lead { font-size: 16px; line-height: 23px; }
    html.wu-snap .wu-cards { gap: 8px; }
    html.wu-snap .wu-card { padding: 10px 18px; gap: 14px; }
    html.wu-snap .wu-card img { width: 38px; height: 38px; }
    html.wu-snap .wu-card p { font-size: 15px; line-height: 21px; }
    html.wu-snap .wu-card strong { font-size: 16px; line-height: 22px; }
    html.wu-snap .wu-body > .wu-lead + .wu-cards { margin-top: 12px; }
    html.wu-snap .wu-body > .wu-lead.wu-after { margin-top: 12px; }
    html.wu-snap .wu-body > .wu-cards + .wu-btn, html.wu-snap .wu-body > .wu-tabs + .wu-btn, html.wu-snap .wu-body > .wu-lead.wu-after + .wu-btn { margin-top: 16px; min-height: 44px; }
    html.wu-snap .wu-btns { margin-top: 16px; }
    html.wu-snap .wu-btns .wu-btn { min-height: 44px; }
    html.wu-snap .wu-photos { margin-top: 18px; }
}

/* hero: the four facts as a 2 x 2 grid */
@media (min-width: 992px) {
    #leader .wu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #leader .wu-card { align-items: flex-start; }
}
@media (min-width: 560px) and (max-width: 991px) {
    #leader .wu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* hero intro: bigger, directly under the H1 */
.wu-page .wu-lead.wu-intro { margin-top: 20px; font-size: 20px; line-height: 30px; }
.wu-head .wu-intro + .wu-photos { margin-top: 24px; }
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    html.wu-snap .wu-page .wu-lead.wu-intro { margin-top: 14px; font-size: 18px; line-height: 27px; }
    html.wu-snap .wu-head .wu-intro + .wu-photos { margin-top: 16px; }
}

/* CTA buttons live on the left, under the intro paragraph */
.wu-head .wu-btn { margin-top: 24px; }
.wu-head .wu-btns { margin-top: 24px; }
.wu-head .wu-btns .wu-btn { margin-top: 0; }

/* vertical cards: icon on top, title and text below (rows only on phones) */
@media (min-width: 768px) {
    .wu-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    #leader .wu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wu-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; }
    .wu-card img { width: 56px; height: 56px; }
    .wu-card p { font-size: 15px; line-height: 22px; }
    .wu-card strong { display: block; margin-bottom: 4px; font-size: 18px; line-height: 25px; }
    .wu-card p a { display: inline !important; }
}
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    html.wu-snap .wu-card { padding: 16px 18px; gap: 10px; }
    html.wu-snap .wu-card img { width: 44px; height: 44px; }
    html.wu-snap .wu-card p { font-size: 14px; line-height: 20px; }
    html.wu-snap .wu-card strong { font-size: 16px; line-height: 22px; margin-bottom: 2px; }
    html.wu-snap .wu-body > .wu-lead.wu-after { margin-top: 12px; }
}

/* FAQ fold: the shared accordion, full width under its heading (see .accordions in wb-standards.css) */
.wu-faq-sec { padding-bottom: 24px; }

/* vertical cards: icon in the middle, text centred under it */
@media (min-width: 768px) {
    .wu-card, #leader .wu-card { align-items: center; text-align: center; }
    .wu-card img { margin: 0 auto; }
}

/* bigger icons, more room above and below inside the cards */
@media (min-width: 768px) {
    .wu-card { padding: 36px 24px; gap: 18px; }
    .wu-card img { width: 76px; height: 76px; }
}
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    html.wu-snap .wu-card { padding: 24px 20px; gap: 12px; }
    html.wu-snap .wu-card img { width: 60px; height: 60px; }
}

/* first fold: the factory photo (Factory_03) as the background */
.wu-sec.wu-bg#leader { background: linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .68) 42%, rgba(0, 0, 0, .24) 75%, rgba(0, 0, 0, 0) 100%), #fff url(../images/why-hero.jpg?v=4) center / cover no-repeat; } /* dark on the left for the text, fully clear on the right */
.wu-page .wu-bg h1.wu-h1 { color: #fff; }

/* bigger card titles */
.wu-card strong { font-size: 20px; line-height: 28px; }
@media (min-width: 768px) {
    .wu-card strong { font-size: 22px; line-height: 30px; margin-bottom: 6px; }
}
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    html.wu-snap .wu-card strong { font-size: 20px; line-height: 26px; margin-bottom: 4px; }
}

/* more space between cards */
.wu-cards { gap: 16px; }
@media (min-width: 768px) {
    .wu-cards { gap: 24px; }
}
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    html.wu-snap .wu-cards { gap: 18px; }
}

/* ===== first fold, option B: photo background, text bottom-left, black stat banner (2026-10-09) ===== */
.wu-hero-in { display: flex; flex-direction: column; justify-content: flex-end; gap: 40px; width: 100%; }
.wu-hero-text { max-width: 880px; }
.wu-page .wu-hero .wu-big { font-size: 40px; line-height: 46px; }
.wu-hero .wu-intro { max-width: 640px; }
.wu-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 8px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wu-stat { display: flex; align-items: center; gap: 16px; padding: 24px 28px; border-left: 1px solid rgba(0, 0, 0, .1); min-width: 0; }
.wu-stat:first-child { border-left: 0; }
.wu-stat img { flex: none; width: 52px; height: 52px; object-fit: contain; }
.wu-stat strong { display: block; font-family: var(--wb-font-strong, 'Geomanist', sans-serif); font-weight: normal; font-size: 20px; line-height: 26px; color: #000; }
.wu-stat p { font-size: 14px; line-height: 20px; color: #444; }
@media (max-width: 991px) {
    .wu-hero { padding-top: 96px; }
    .wu-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wu-stat:nth-child(3) { border-left: 0; }
    .wu-stat:nth-child(n+3) { border-top: 1px solid rgba(0, 0, 0, .1); }
}
@media (max-width: 559px) {
    .wu-stats { grid-template-columns: 1fr; }
    .wu-stat, .wu-stat:nth-child(3) { border-left: 0; }
    .wu-stat:nth-child(n+2) { border-top: 1px solid rgba(0, 0, 0, .1); }
}
@media (min-width: 992px) {
    .wu-page .wu-hero .wu-big { font-size: clamp(36px, min(3.8vw, 6.4vh), 54px); line-height: 1.1; }
    html.wu-snap .wu-page .wu-sec.wu-hero { align-items: stretch; padding-bottom: 28px; }
    html.wu-snap .wu-hero .wu-hero-in { justify-content: flex-end; }
}
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    html.wu-snap .wu-hero-in { gap: 28px; }
    html.wu-snap .wu-stat { padding: 18px 24px; }
    html.wu-snap .wu-stat img { width: 44px; height: 44px; }
}

/* hero headline: three fixed lines on large screens */
@media (min-width: 992px) {
    .wu-hero .wu-h1 { white-space: nowrap; }
}
@media (max-width: 991px) {
    .wu-hero .wu-h1 .wu-br { display: none; }
}

/* first fold = the whole screen under the menu; the pill menu sits just below it and appears once you scroll */
.wu-page .wu-sec.wu-hero { display: flex; align-items: stretch; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); scroll-margin-top: 72px; }
.wu-page .wu-sec.wu-hero > .wu-wrap { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; }
@media (min-width: 992px) and (min-height: 600px) {
    html.wu-snap .wu-page .wu-sec.wu-hero { min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); scroll-margin-top: 72px; padding-bottom: 40px; }
}

/* balance: hero text sits in the middle of the space above the stat banner; section headings line up with the top of the cards */
.wu-hero-in { justify-content: flex-start; gap: 0; }
.wu-hero-text { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 32px 0 40px; }
.wu-stats { margin-bottom: 8px; }
@media (min-width: 992px) {
    .wu-two { align-items: start; }
    html.wu-snap .wu-hero-in { justify-content: flex-start; gap: 0; }
}
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    html.wu-snap .wu-hero-in { gap: 0; }
    .wu-hero-text { padding: 20px 0 28px; }
}

/* first fold: four separate solid white cards (same look as the cards in the other folds) */
.wu-stats { gap: 24px; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; margin-bottom: 8px; }
.wu-stat, .wu-stat:first-child, .wu-stat:nth-child(3), .wu-stat:nth-child(n+2), .wu-stat:nth-child(n+3) { flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 28px 22px; border: 0; border-radius: 8px; background: #fff; text-align: center; }
.wu-stat img { width: 64px; height: 64px; }
.wu-stat strong { font-size: 20px; line-height: 26px; margin-bottom: 4px; }
@media (max-width: 991px) { .wu-stats { gap: 16px; } }
@media (max-width: 559px) { .wu-stats { gap: 12px; } .wu-stat, .wu-stat:first-child, .wu-stat:nth-child(3), .wu-stat:nth-child(n+2), .wu-stat:nth-child(n+3) { flex-direction: row; text-align: left; padding: 18px 20px; } .wu-stat img { width: 48px; height: 48px; } }
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    html.wu-snap .wu-stat, html.wu-snap .wu-stat:first-child, html.wu-snap .wu-stat:nth-child(3), html.wu-snap .wu-stat:nth-child(n+2), html.wu-snap .wu-stat:nth-child(n+3) { padding: 18px 16px; gap: 10px; }
    html.wu-snap .wu-stat img { width: 52px; height: 52px; }
}

/* ===== first fold, banner + heading / intro paragraph / cards (2026-10-09, after the Herman Miller solutions page) ===== */
.wu-page .wu-sec.wu-hero2 { display: flex; flex-direction: column; align-items: stretch; padding: 0; background: var(--wb-soft, #f3f3f3); }
.wu-banner { position: relative; flex: 1 1 auto; min-height: 280px; display: flex; align-items: center; background: linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .12) 75%, rgba(0, 0, 0, 0) 100%), #fff url(../images/why-hero.jpg?v=4) center 62% / cover no-repeat; }
.wu-banner > .wu-wrap { width: 100%; }
.wu-page .wu-banner h1.wu-h1 { color: #fff; }
.wu-hero-body { flex: none; padding: 40px 0 32px; background: var(--wb-soft, #f3f3f3); }
.wu-hero-body .wu-intro { max-width: 900px; margin: 0 0 32px; font-family: var(--wb-font-strong, 'Geomanist', sans-serif); font-size: 24px; line-height: 34px; color: #000; }
.wu-hero-body .wu-stats { margin-bottom: 0; }
@media (max-width: 767px) {
    .wu-banner { min-height: 300px; padding: 40px 0; }
    .wu-hero-body { padding: 32px 0 40px; }
    .wu-hero-body .wu-intro { font-size: 19px; line-height: 28px; margin-bottom: 24px; }
}
@media (min-width: 992px) and (min-height: 600px) {
    html.wu-snap .wu-page .wu-sec.wu-hero2 { padding: 0; align-items: stretch; }
}
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    .wu-hero-body { padding: 24px 0 20px; }
    .wu-hero-body .wu-intro { font-size: 19px; line-height: 27px; margin-bottom: 18px; max-width: 860px; }
    .wu-hero2 .wu-stat, .wu-hero2 .wu-stat:first-child, .wu-hero2 .wu-stat:nth-child(3), .wu-hero2 .wu-stat:nth-child(n+2), .wu-hero2 .wu-stat:nth-child(n+3) { padding: 14px 14px; gap: 8px; }
    .wu-hero2 .wu-stat img { width: 44px; height: 44px; }
    .wu-hero2 .wu-stat strong { font-size: 18px; line-height: 24px; margin-bottom: 0; }
    .wu-hero2 .wu-stat p { font-size: 13px; line-height: 18px; }
    .wu-hero2 .wu-stats { gap: 16px; }
}

/* intro paragraph centred under the banner (Herman Miller style); the four fact cards are their own screen below it */
.wu-hero-body { padding: 56px 0 56px; text-align: center; }
.wu-hero-body .wu-intro { max-width: 860px; margin: 0 auto; font-size: 26px; line-height: 38px; text-align: center; }
@media (max-width: 767px) {
    .wu-hero-body { padding: 36px 0 40px; }
    .wu-hero-body .wu-intro { font-size: 19px; line-height: 28px; text-align: left; }
}
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    .wu-hero-body { padding: 36px 0 36px; }
    .wu-hero-body .wu-intro { font-size: 21px; line-height: 31px; max-width: 820px; }
}
.wu-facts .wu-stats { margin-bottom: 0; }

/* order: banner, intro, four cards, then the pinned pill menu. The cards screen sits directly under the site menu; the pill bar follows it. */
@media (min-width: 992px) and (min-height: 600px) {
    html.wu-snap .wu-page .wu-sec.wu-facts { min-height: calc(100vh - 72px); scroll-margin-top: 72px; }
}

/* banner + intro + cards scroll normally (no full-screen fold, no snapping); the pill menu follows them */
.wu-page .wu-sec.wu-hero2, html.wu-snap .wu-page .wu-sec.wu-hero2 { display: block !important; min-height: 0 !important; height: auto !important; padding: 0 !important; scroll-snap-align: none !important; }
.wu-page .wu-hero2 .wu-banner { flex: none; height: clamp(380px, 58vh, 620px); min-height: 0; }
.wu-hero-body { padding: 56px 0 72px; }
.wu-hero-body .wu-intro { margin-bottom: 0; }
.wu-hero-body .wu-stats { margin-top: 56px; }
@media (max-width: 767px) {
    .wu-page .wu-hero2 .wu-banner { height: auto; min-height: 320px; padding: 40px 0; }
    .wu-hero-body { padding: 32px 0 48px; }
    .wu-hero-body .wu-stats { margin-top: 32px; }
}
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    .wu-hero-body { padding: 40px 0 56px; }
    .wu-hero-body .wu-stats { margin-top: 36px; }
}

/* intro paragraph like the Herman Miller page: big (32/42), narrow centred column; the cards are pushed below the first screen */
.wu-hero-body { padding: 48px 0 80px; }
.wu-hero-body .wu-intro { max-width: 720px; font-size: 32px; line-height: 42px; }
.wu-hero-body .wu-stats { margin-top: 80px; }
@media (max-width: 991px) { .wu-hero-body .wu-intro { max-width: 640px; font-size: 26px; line-height: 36px; } }
@media (max-width: 767px) {
    .wu-hero-body .wu-intro { font-size: 21px; line-height: 30px; }
    .wu-hero-body .wu-stats { margin-top: 40px; }
}
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) {
    .wu-hero-body { padding: 36px 0 64px; }
    .wu-hero-body .wu-intro { max-width: 680px; font-size: 27px; line-height: 36px; }
    .wu-hero-body .wu-stats { margin-top: 64px; }
}

/* make sure the hero intro rules win over the generic .wu-lead.wu-intro size */
.wu-page .wu-hero-body .wu-lead.wu-intro { max-width: 720px; margin: 0 auto; font-family: var(--wb-font-strong, 'Geomanist', sans-serif); font-size: 32px; line-height: 42px; color: #000; text-align: center; }
@media (max-width: 991px) { .wu-page .wu-hero-body .wu-lead.wu-intro { max-width: 640px; font-size: 26px; line-height: 36px; } }
@media (max-width: 767px) { .wu-page .wu-hero-body .wu-lead.wu-intro { font-size: 21px; line-height: 30px; text-align: left; } }
@media (min-width: 992px) and (min-height: 600px) and (max-height: 820px) { .wu-page .wu-hero-body .wu-lead.wu-intro { max-width: 680px; font-size: 27px; line-height: 36px; } }

/* laptops (short browser windows) used an older, more specific 18px rule for the intro; this wins over it on every screen height */
@media (min-width: 992px) {
    html .wu-page .wu-hero-body .wu-lead.wu-intro, html.wu-snap .wu-page .wu-hero-body .wu-lead.wu-intro { max-width: 720px !important; font-size: 32px !important; line-height: 42px !important; }
}
@media (min-width: 992px) and (max-height: 820px) {
    html .wu-page .wu-hero-body .wu-lead.wu-intro, html.wu-snap .wu-page .wu-hero-body .wu-lead.wu-intro { max-width: 700px !important; font-size: 29px !important; line-height: 39px !important; }
}

/* the four head cards are bigger (they open the page): larger icon, title and text, more padding */
@media (min-width: 768px) {
    html .wu-page .wu-hero-body .wu-stats { gap: 28px !important; }
    html .wu-page .wu-hero-body .wu-stat, html.wu-snap .wu-page .wu-hero-body .wu-stat { padding: 52px 28px 48px !important; gap: 22px !important; }
    html .wu-page .wu-hero-body .wu-stat img { width: 104px !important; height: 104px !important; }
    html .wu-page .wu-hero-body .wu-stat strong { font-size: 26px !important; line-height: 34px !important; margin-bottom: 6px !important; }
    html .wu-page .wu-hero-body .wu-stat p { font-size: 17px !important; line-height: 26px !important; }
}
@media (max-width: 991px) and (min-width: 768px) {
    html .wu-page .wu-hero-body .wu-stat img { width: 88px !important; height: 88px !important; }
    html .wu-page .wu-hero-body .wu-stat strong { font-size: 23px !important; line-height: 30px !important; }
}
@media (max-width: 767px) {
    html .wu-page .wu-hero-body .wu-stat { padding: 24px 22px !important; }
    html .wu-page .wu-hero-body .wu-stat img { width: 64px !important; height: 64px !important; }
    html .wu-page .wu-hero-body .wu-stat strong { font-size: 21px !important; line-height: 28px !important; }
    html .wu-page .wu-hero-body .wu-stat p { font-size: 15px !important; line-height: 22px !important; }
}

/* card titles: if one title in a row wraps, every title in that row breaks into two lines (js adds .is-two) so the row stays balanced */
.wu-tb { display: none; }
.is-two .wu-tb { display: inline; }

/* industry tabs: the selected one is a filled red pill-style chip with white text, like the active pills elsewhere on the site (no red side bar) */
.wu-tabs.is-ready .wu-tab[aria-selected="true"], .wu-tabs.is-ready .wu-tab[aria-selected="true"]:hover { background: #c43030; color: #fff; box-shadow: none; }
.wu-tabs .wu-tab { transition: background .2s, color .2s; }

/* the selected state is a red underline (red filled = clickable button on this site): anchor-link pills and industry tabs */
.wu-pill.is-on, .wu-pill.is-on:hover { background: #fafafa; color: #000 !important; text-decoration: underline !important; text-decoration-color: #c43030 !important; text-decoration-thickness: 2px !important; text-underline-offset: 6px !important; }
.wu-pill.is-on img { filter: brightness(0); }
.wu-pill.is-on:hover { background: #e2e2e2; }
.wu-tabs.is-ready .wu-tab[aria-selected="true"], .wu-tabs.is-ready .wu-tab[aria-selected="true"]:hover { background: #fff; color: #000; box-shadow: none; text-decoration: underline; text-decoration-color: #c43030; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* anchor links: the current one is red text (no underline, no fill) */
.wu-pill.is-on, .wu-pill.is-on:hover { background: #fafafa; color: #c43030 !important; text-decoration: none !important; }
.wu-pill.is-on:hover { background: #e2e2e2; }
.wu-pill.is-on img { filter: brightness(0) saturate(100%) invert(22%) sepia(80%) saturate(2400%) hue-rotate(350deg) brightness(92%) contrast(90%); }

/* ===== mobile + tablet pass (2026-10-10) ===== */
@media (max-width: 991px) {
    .wu-two .wu-head .wu-intro { max-width: 640px; }
}
@media (max-width: 767px) {
    /* banner: even dark overlay so the headline reads over the busy photo */
    .wu-banner { background: linear-gradient(rgba(0, 0, 0, .52), rgba(0, 0, 0, .52)), #fff url(../images/why-hero.jpg?v=4) center 62% / cover no-repeat; }
    .wu-page .wu-banner h1.wu-h1 { font-size: 34px; line-height: 40px; }
    .wu-hero-body { padding: 32px 0 24px; }
    /* head cards: icon column + text, left aligned, same rhythm as the cards below */
    html .wu-page .wu-hero-body .wu-stats { gap: 12px !important; margin-top: 28px; }
    html .wu-page .wu-hero-body .wu-stat, html.wu-snap .wu-page .wu-hero-body .wu-stat { flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 16px !important; padding: 18px 20px !important; text-align: left !important; }
    html .wu-page .wu-hero-body .wu-stat img { flex: none; width: 56px !important; height: 56px !important; }
    html .wu-page .wu-hero-body .wu-stat > div { text-align: left; }
    html .wu-page .wu-hero-body .wu-stat strong { font-size: 20px !important; line-height: 26px !important; margin-bottom: 2px !important; }
    html .wu-page .wu-hero-body .wu-stat p { font-size: 15px !important; line-height: 22px !important; }
    /* section cards: title on its own line above the text, icon on the left */
    .wu-card strong { display: block; margin-bottom: 2px; font-size: 19px; line-height: 26px; }
    .wu-card { align-items: flex-start; }
    .wu-card img { margin-top: 2px; }
    /* section rhythm */
    .wu-sec { padding-top: 48px; }
    .wu-two { gap: 22px; }
    .wu-page .wu-big { font-size: 30px; line-height: 38px; }
    .wu-page .wu-lead.wu-intro { font-size: 17px; line-height: 26px; margin-top: 14px; }
    .wu-head .wu-btn, .wu-head .wu-btns { margin-top: 20px; }
    .wu-btns { gap: 10px; }
    .wu-tabs .wu-item { margin-bottom: 8px; }
    .wu-panel { padding: 16px; gap: 14px; }
    .wu-panel img { height: 180px; }
    .wu-cta { margin-top: 48px; padding: 48px 0; }
    .wu-cta .wu-btns { gap: 10px; }
    .wu-faq-sec .accordions .accordion-header h2 { font-size: 18px !important; line-height: 26px !important; padding: 10px 14px 10px 28px !important; }
    .wu-faq-sec .accordions .accordion-header h2::before { top: 16px; left: 10px; }
}

@media (max-width: 767px) {
    .wu-page .wu-hero-body .wu-lead.wu-intro { font-size: 19px; line-height: 28px; }
}

/* anchor links: centred under the heading (auto margins, so on a narrow screen where they scroll sideways the first one still starts at the left edge) */
.wu-pills > :first-child { margin-left: auto; }
.wu-pills > :last-child { margin-right: auto; }