/* Layout adaptations of Flexnative Hero04 / Hero10. MIT: assets/licenses/flexnative-MIT.txt */
@font-face { font-family: Onest; src: url("assets/fonts/onest-variable.woff2") format("woff2"), url("assets/fonts/onest-variable.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: Manrope; src: url("assets/fonts/manrope-variable.woff2") format("woff2"), url("assets/fonts/manrope-variable.ttf") format("truetype"); font-style: normal; font-weight: 200 800; font-display: swap; }
:root { --blue: #155dfc; --ink: #292b30; --muted: #606775; --pale: #edf3ff; --line: #e3e9f3; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: #a8bcdf #fff; }
body { margin: 0; background: white; color: var(--ink); font-family: Onest, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
::selection { background: #b9d0ff; color: #172e5c; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
svg { flex-shrink: 0; width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
img { display: block; max-width: 100%; height: auto; }
.skip-link { position: fixed; top: 12px; left: 24px; z-index: 30; padding: 12px 20px; background: var(--ink); color: white; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 20; background: white; }
.header-inner { display: flex; align-items: center; gap: 34px; max-width: 1488px; min-height: 76px; margin: auto; padding: 15px 40px; }
.brand { flex-shrink: 0; color: var(--blue); font-size: 24px; line-height: 1.1; font-weight: 650; letter-spacing: -.04em; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 25px; margin-left: auto; font-size: 13px; line-height: 1.4; }
.desktop-nav a { padding-block: 12px; white-space: nowrap; }
.desktop-nav a:hover, .secondary-cta:hover { color: var(--blue); }
.header-cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 42px; border-radius: 7px; padding: 11px 16px; background: var(--pale); color: #164ac0; font-size: var(--text-action, 14px); line-height: 1.4; font-weight: 550; white-space: nowrap; transition: background 180ms; }
.header-cta svg { width: 16px; height: 16px; }
.header-cta:hover { background: #dfeaff; }
.mobile-menu { display: none; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.primary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 25px; min-height: 58px; padding: 17px 22px; border-radius: 8px; background: var(--blue); color: white; font-size: var(--text-action, 15px); line-height: 1.5; font-weight: 550; transition: background 180ms, box-shadow 180ms; }
.primary-cta:hover { background: #104ed8; box-shadow: 0 6px 18px #22283224; }
.primary-cta svg, .secondary-cta svg { transition: transform 200ms; }
.primary-cta:hover svg, .secondary-cta:hover svg { transform: translateX(3px); }
.secondary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; font-size: 14px; font-weight: 500; }
.secondary-cta svg { width: 17px; height: 17px; }
.pilot-note { color: var(--muted); font-size: 13px; line-height: 1.65; }
.hero-description { font-size: 19px; line-height: 1.6; letter-spacing: normal; }
.hero-detail { color: var(--muted); font-size: 15px; line-height: 1.6; }
/* Hero04: copy column with an overlapping primary and secondary media composition. */
.editorial-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 58px; align-items: center; max-width: 1488px; margin: auto; padding: 66px 40px 70px; }
.editorial-copy h1 { margin: 0; font-weight: 480; font-size: clamp(3.5rem, 4.8vw, 5.25rem); line-height: 1.035; letter-spacing: -.04em; }
.editorial-copy h1 span { display: block; color: var(--blue); }
.hero-subtitle { margin: 26px 0 0; font-size: 23px; line-height: 1.35; font-weight: 500; letter-spacing: -.025em; }
.editorial-copy .hero-description { max-width: 47ch; margin: 20px 0 0; }
.editorial-copy .hero-detail { max-width: 55ch; margin: 14px 0 0; }
.editorial-copy .hero-actions { margin-top: 30px; }
.editorial-copy .pilot-note { margin: 20px 0 0; }
.editorial-media { min-width: 0; margin: 0; }
.media-collage { position: relative; padding: 30px 25px 122px; background: var(--pale); border-radius: 16px; }
.collage-heading { display: flex; flex-direction: column; align-items: start; gap: 14px; margin: 0 0 24px 12px; }
.collage-heading img { width: 150px; }
.collage-heading span { color: #476286; font-size: 13px; }
.goals-plate { display: block; width: 90%; height: 370px; overflow: hidden; margin-left: auto; border-radius: 12px; background: white; box-shadow: 0 18px 44px #23283216; transform: rotate(3deg); transition: transform 450ms cubic-bezier(.16,1,.3,1); }
.goals-plate img { width: 100%; }
.campaign-plate { position: absolute; left: -35px; right: 25px; bottom: 32px; overflow: hidden; padding: 22px 18px 18px; border-radius: 12px; background: white; box-shadow: 0 16px 44px #23283220; transform: rotate(-3deg); transition: transform 450ms cubic-bezier(.16,1,.3,1); }
.plate-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-inline: 8px; margin-bottom: 20px; font-size: 15px; font-weight: 500; }
.plate-title svg { width: 18px; height: 18px; color: var(--blue); }
.campaign-plate img { width: 100%; }
.goals-plate:hover, .goals-plate:focus-visible, .campaign-plate:hover, .campaign-plate:focus-visible { transform: rotate(0); }
.editorial-media figcaption { margin-top: 20px; text-align: right; font-size: 11px; line-height: 1.5; color: var(--muted); }
.media-collage { animation: media-settle 900ms cubic-bezier(.16,1,.3,1); }
@keyframes media-settle { from { transform: translateY(20px); } to { transform: translateY(0); } }
/* Hero10: centered statement and a fanned, overlapping set of product images. */
.blue-page { font-family: var(--font-body, Manrope, sans-serif); font-size: var(--text-body, 16px); line-height: var(--leading-body, 1.7); letter-spacing: normal; }
.blue-page .site-header { font-family: Onest, sans-serif; }
.blue-hero { max-width: var(--page-width, 1600px); margin: 6px auto 30px; padding: 54px 32px 28px; border-radius: 16px; background: var(--blue); color: white; overflow: clip; }
.blue-copy { position: relative; z-index: 5; max-width: 1200px; margin: auto; text-align: center; }
.blue-copy h1 { margin: 0 auto; font-size: var(--text-display, clamp(3rem, 4.55vw, 5rem)); line-height: var(--leading-display, 1.12); letter-spacing: var(--tracking-display, -.04em); font-weight: 470; text-wrap: balance; }
.blue-copy h1 span { color: #d6e4ff; }
.blue-copy .hero-description { max-width: 650px; margin: var(--space-md, 24px) auto 0; font-size: var(--text-lead, 18px); color: #f1f5ff; }
.blue-copy .hero-detail { margin: 13px auto 0; color: #e7efff; font-size: 15px; }
.blue-copy .hero-actions { justify-content: center; margin-top: 25px; }
.blue-copy .primary-cta { color: #164ad1; background: white; }
.blue-copy .primary-cta:hover { background: #edf3ff; }
.blue-copy .secondary-cta { color: white; }
.blue-copy .secondary-cta:hover { color: #e7efff; }
.blue-copy .pilot-note { margin: 16px 0 0; color: #e7efff; font-size: 12px; }
.blue-hero a:focus-visible { outline-color: white; }
.interface-fan { width: 100%; max-width: 1220px; margin: 45px auto 0; }
.fan-images { position: relative; height: 290px; perspective: 1200px; }
.fan-card { position: absolute; display: block; overflow: hidden; border-radius: 12px; background: white; color: var(--ink); box-shadow: 0 14px 45px #1e293b40; transition: transform 450ms cubic-bezier(.16,1,.3,1); }
.fan-left { left: 0; top: 12px; width: 34%; height: 245px; transform: rotate(-7deg); }
.fan-right { right: 0; top: 12px; width: 34%; height: 245px; transform: rotate(7deg); }
.fan-left img { width: 100%; }
.fan-right img { width: 520px; max-width: none; }
.fan-label { display: block; padding: 20px 22px 15px; color: #596b89; font-size: 13px; }
.fan-center { z-index: 2; top: 44px; left: 17%; width: 66%; padding: 27px 22px 24px; transform: translateY(0); }
.fan-center-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-inline: 12px; margin-bottom: 25px; }
.fan-center-top > img { width: 144px; }
.fan-center-top > span { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; color: #606775; }
.fan-center-top svg { width: 16px; height: 16px; }
.fan-center .campaign-image { width: 100%; }
.fan-caption { display: block; margin: 20px 12px 0; font-size: 12px; color: #606775; }
.fan-left:hover, .fan-left:focus-visible { transform: rotate(-9deg) translateY(-12px); }
.fan-right:hover, .fan-right:focus-visible { transform: rotate(9deg) translateY(-12px); }
.fan-center:hover, .fan-center:focus-visible { transform: translateY(-8px); }
.interface-fan figcaption { position: relative; margin-top: 24px; font-size: 11px; line-height: 1.5; text-align: center; color: #e7efff; }
.fan-images { animation: fan-settle 1000ms cubic-bezier(.16,1,.3,1); }
@keyframes fan-settle { from { transform: translateY(26px) rotateX(6deg); } to { transform: translateY(0) rotateX(0); } }
@media (min-width: 1800px) { .editorial-hero { padding-top: 88px; } }
@media (max-width: 1648px) { .blue-hero { margin-inline: 24px; } }
@media (max-width: 1250px) {
  .header-inner { gap: 22px; padding-inline: 28px; }
  .desktop-nav { gap: 18px; font-size: 12px; }
  .header-cta { padding-inline: 12px; gap: 8px; }
  .brand { font-size: 22px; }
  .editorial-hero { gap: 38px; padding-inline: 28px; }
  .editorial-copy h1 { font-size: 4rem; }
  .hero-subtitle { font-size: 20px; }
  .hero-description { font-size: 17px; }
  .hero-actions { gap: 15px; }
  .primary-cta { font-size: var(--text-action, 14px); padding-inline: 18px; gap: 15px; }
  .secondary-cta { font-size: 13px; }
  .media-collage { padding-inline: 18px; padding-bottom: 110px; }
  .goals-plate { height: 345px; }
  .campaign-plate { left: -20px; right: 15px; }
  .plate-title { font-size: 13px; }
  .fan-images { height: 265px; }
}
@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .header-cta { margin-left: auto; }
  .mobile-menu { display: block; }
  .mobile-menu summary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; min-width: 44px; font-size: 13px; cursor: pointer; list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu nav { position: absolute; top: 100%; right: 28px; width: min(310px, calc(100vw - 48px)); padding: 12px 20px; border: 1px solid var(--line); background: white; color: var(--ink); border-radius: 0 0 12px 12px; }
  .mobile-menu nav a { display: block; padding-block: 13px; font-size: 14px; line-height: 1.45; }
  .mobile-menu nav a:hover { color: var(--blue); }
  .editorial-copy h1 { font-size: 3.4rem; }
  .editorial-hero { gap: 32px; padding-top: 50px; align-items: start; }
  .editorial-media { margin-top: 28px; }
  .media-collage { padding-top: 24px; }
  .goals-plate { height: 320px; width: 100%; }
  .collage-heading { margin-left: 0; }
  .campaign-plate { padding: 18px 10px; bottom: 22px; }
  .hero-subtitle { font-size: 18px; }
  .editorial-copy .hero-description { font-size: 16px; }
  .hero-detail { font-size: 14px; }
  .editorial-copy .hero-actions { align-items: start; flex-direction: column; gap: 10px; }
  .blue-copy h1 { font-size: var(--text-display, 3.5rem); }
  .blue-copy .hero-description { font-size: var(--text-lead, 17px); }
  .fan-label { padding-inline: 15px; font-size: 11px; }
  .fan-center { padding: 22px 12px; }
  .fan-center-top > span { font-size: 11px; }
  .fan-center-top > img { width: 115px; }
  .fan-caption { font-size: 11px; }
}
@media (max-width: 760px) {
  .header-inner { min-height: 70px; padding: 13px 24px; }
  .brand { font-size: 22px; }
  .header-cta { display: none; }
  .mobile-menu { margin-left: auto; }
  .mobile-menu nav { right: 24px; }
  .editorial-hero { display: flex; flex-direction: column; gap: 36px; padding: 36px 24px 40px; }
  .editorial-copy h1 { font-size: clamp(2.75rem, 8.4vw, 4rem); line-height: 1.065; }
  .desktop-break { display: none; }
  .hero-subtitle { margin-top: 21px; font-size: 20px; }
  .editorial-copy .hero-description { margin-top: 18px; font-size: 16px; }
  .editorial-copy .hero-detail { font-size: 14px; }
  .editorial-copy .hero-actions { flex-direction: row; align-items: center; gap: 15px; margin-top: 24px; }
  .primary-cta { min-height: 56px; font-size: var(--text-action, 14px); }
  .editorial-copy .pilot-note { font-size: 12px; margin-top: 14px; }
  .editorial-media { margin: 0; width: 100%; }
  .media-collage { padding: 24px 20px 105px; }
  .collage-heading { gap: 12px; margin-bottom: 20px; }
  .collage-heading img { width: 135px; }
  .collage-heading span { font-size: 12px; }
  .goals-plate { width: 85%; height: 300px; }
  .campaign-plate { left: 12px; right: 18px; bottom: 24px; }
  .plate-title { margin-bottom: 16px; }
  .editorial-media figcaption { font-size: 11px; text-align: center; margin-top: 14px; }
  .blue-hero { margin: 0 12px 12px; padding: 38px 20px 25px; border-radius: 12px; }
  .blue-copy h1 { font-size: var(--text-display, clamp(2.5rem, 7.5vw, 3.4rem)); line-height: var(--leading-display, 1.12); letter-spacing: var(--tracking-display, -.035em); }
  .blue-copy .hero-description { margin-top: 23px; font-size: var(--text-lead, 16px); }
  .blue-copy .hero-detail { font-size: 14px; }
  .blue-copy .hero-actions { flex-direction: column; gap: 10px; margin-top: 24px; }
  .blue-copy .pilot-note { max-width: 28ch; margin: 12px auto 0; line-height: 1.65; }
  .interface-fan { margin-top: 30px; }
  .fan-images { height: 240px; }
  .fan-left, .fan-right { width: 58%; height: 180px; top: 8px; }
  .fan-left { left: 2%; }
  .fan-right { right: 2%; }
  .fan-label { padding: 13px 10px 9px; font-size: 11px; line-height: 1.4; }
  .fan-right img { width: 300px; }
  .fan-center { left: 0; top: 80px; width: 100%; padding: 17px 10px; }
  .fan-center-top { margin-bottom: 15px; padding-inline: 4px; gap: 12px; }
  .fan-center-top > img { width: 100px; }
  .fan-center-top > span { font-size: 11px; gap: 5px; }
  .fan-center-top svg { width: 13px; height: 13px; }
  .fan-caption { margin: 14px 4px 0; font-size: 11px; line-height: 1.4; }
  .interface-fan figcaption { margin-top: 12px; font-size: 11px; }
}
@media (max-width: 390px) {
  .header-inner { padding-inline: 20px; }
  .editorial-hero { padding-inline: 20px; }
  .editorial-copy h1 { font-size: 2.75rem; }
  .hero-subtitle { font-size: 19px; }
  .editorial-copy .hero-actions { flex-direction: column; align-items: stretch; gap: 7px; }
  .editorial-copy .secondary-cta { justify-content: start; }
  .goals-plate { height: 245px; width: 93%; }
  .media-collage { padding-inline: 16px; }
  .plate-title { font-size: 11px; }
  .blue-hero { padding-inline: 16px; }
  .blue-copy h1 { font-size: var(--text-display, 2.375rem); }
  .blue-copy .hero-description { font-size: var(--text-lead, 15px); }
  .blue-copy .primary-cta { width: 100%; font-size: var(--text-action, 13px); gap: 12px; padding-inline: 12px; }
  .fan-center-top > span { font-size: 11px; }
  .fan-center-top > img { width: 85px; }
  .fan-images { height: 220px; }
}
.procurement-problems { width: calc(100% - 2 * var(--page-gutter, 24px)); max-width: var(--page-width, 1600px); margin: var(--section-gap, 128px) auto 0; padding: 0; scroll-margin-top: 104px; }
.procurement-problems h2 { margin: 0 0 var(--heading-gap, 48px); }
.procurement-problems-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin: 0; padding: 0; list-style: none; }
.procurement-problems-list li { min-width: 0; }
.procurement-mascot { --mascot-height: 96px; display: block; width: var(--mascot-height); height: var(--mascot-height); margin-bottom: 16px; }
.procurement-mascot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.procurement-problems-list h3 { margin: 0; font-size: var(--text-subheading, clamp(19px, 1.7vw, 23px)); line-height: var(--leading-heading, 1.4); letter-spacing: var(--tracking-heading, -.02em); font-weight: var(--weight-heading); text-wrap: balance; }
.procurement-problems-list p { margin: var(--space-sm, 16px) 0 0; color: var(--muted); font-family: Onest, sans-serif; font-size: var(--text-body, 16px); line-height: var(--leading-body, 1.65); }
@media (max-width: 800px) {
  .procurement-problems { margin-top: var(--section-gap, 96px); }
  .procurement-problems h2 { margin-bottom: var(--heading-gap, 48px); }
  .procurement-problems-list { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 0; }
  .procurement-mascot { --mascot-height: 80px; margin-bottom: 16px; }
  .procurement-problems-list h3 { font-size: var(--text-subheading, 21px); text-wrap: initial; }
  .procurement-problems-list p { margin-top: 10px; }
}
@media (max-width: 600px) {
  .procurement-problems { width: calc(100% - 2 * var(--page-gutter, 12px)); }
  .procurement-problems-list h3 { font-size: var(--text-subheading, 19px); }
  .procurement-problems-list p { font-size: var(--text-body, 15px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}