/* 2026-10-04 · Proportion balance pass
   Goal: keep the compact UX, but restore visual hierarchy and readability. */
:root{--sticky-header-h:108px}

/* Header: compact, not miniature. */
.topbar{height:68px!important;gap:18px!important}
.brand :is(img,.brand-mark){width:48px!important;height:48px!important}
.brand strong{font-size:28px!important;letter-spacing:-1.2px!important}
.brand small{font-size:10.5px!important}
.tagline{font-size:12.5px!important;margin-left:12px!important;white-space:nowrap}
.search{width:220px!important;height:34px!important}
.search input{font-size:12px!important}
.language{font-size:12px!important}
.top-cta{font-size:12px!important;padding:9px 18px!important;min-height:36px!important}
.nav-bar{min-height:40px!important}
.desktop-nav{height:40px!important;justify-content:center!important;gap:8px!important}
.desktop-nav .nav-item{padding-inline:20px!important;gap:9px!important;font-size:13px!important;min-height:40px!important}
.desktop-nav .nav-item .icon{width:17px!important;height:17px!important}

@media(min-width:761px){
  .work-panel:not([hidden]){top:var(--sticky-header-h)!important}
  .reference-layout{width:min(calc(100% - 64px),1480px)!important}

  /* Hero: restore presence while remaining within first viewport. */
  .reference-primary>.hero{min-height:280px!important;height:280px!important;margin:12px 0!important;border-radius:12px!important}
  .reference-primary .hero-copy,.reference-primary .is-general .hero-copy{padding:22px 24px!important}
  .reference-primary .hero h1{font-size:34px!important;line-height:1.05!important;margin-bottom:9px!important}
  .reference-primary .hero h1>span{font-size:28px!important}
  .reference-primary .lead{font-size:13.5px!important;line-height:1.45!important;max-width:390px!important;margin-bottom:12px!important}
  .reference-primary .trust{gap:19px!important;margin-bottom:12px!important}
  .reference-primary .trust .icon{width:24px!important;height:24px!important}
  .reference-primary .trust li{font-size:10.5px!important;line-height:1.15!important}
  .reference-primary .hero-cta{min-width:220px!important;min-height:35px!important;font-size:11.5px!important;padding:8px 16px!important}
  .reference-primary .is-general .general-slide{inset:0 0 28px 33%!important}
  .reference-primary .is-general .slider-controls{height:28px!important;left:48%!important}

  /* Six routes: readable cards, still one-row and viewport-friendly. */
  .reference-primary .paths{padding:11px!important;border-radius:12px!important}
  .reference-primary .section-heading{margin:0 3px 9px!important;gap:10px!important}
  .reference-primary .section-heading h2{font-size:18px!important}
  .reference-primary .section-heading p{font-size:11px!important}
  .reference-primary .path-grid{gap:9px!important}
  .reference-primary .path-title{min-height:47px!important;padding:7px 8px!important;gap:6px!important}
  .reference-primary .path-title strong{font-size:12px!important;line-height:1.18!important;padding-top:1px!important}
  .reference-primary .path-title b{width:21px!important;height:21px!important;font-size:13px!important}
  .reference-primary .path-select img,.reference-primary .path-card>img{height:88px!important}
  .reference-primary .path-bottom{padding:7px 8px 8px!important}
  .reference-primary .path-bottom p{font-size:11px!important;line-height:1.3!important;min-height:31px!important;margin-bottom:7px!important}
  .reference-primary .path-bottom .pill,.reference-primary .path-cta{font-size:10.5px!important;min-height:31px!important;padding:6px 5px!important}
  .reference-primary .values{padding:13px 5px!important}
  .reference-primary .values>span{font-size:11px!important;gap:7px!important}
  .reference-primary .values .icon{width:20px!important;height:20px!important}

  /* Footer: compact but visually substantial. */
  .em-footer{padding:20px 0 12px!important}
  .em-footer .footer-grid{gap:22px!important}
  .em-footer .footer-grid h3{font-size:13px!important;margin-bottom:7px!important}
  .em-footer .footer-grid a{font-size:12px!important;margin-bottom:4px!important}
  .em-footer .footer-copy{font-size:12px!important}
  .em-footer .footer-bottom{padding-top:10px!important;margin-top:10px!important}
}

/* At common laptop sizes, trim just enough to keep the six routes visible. */
@media(min-width:761px) and (max-width:1400px){
  :root{--sticky-header-h:102px}
  .topbar{height:64px!important}
  .nav-bar,.desktop-nav{height:38px!important;min-height:38px!important}
  .desktop-nav .nav-item{min-height:38px!important;padding-inline:16px!important;font-size:12.5px!important}
  .reference-layout{width:calc(100% - 44px)!important}
  .reference-primary>.hero{height:260px!important;min-height:260px!important;margin:10px 0!important}
  .reference-primary .hero h1{font-size:32px!important}
  .reference-primary .hero h1>span{font-size:26px!important}
  .reference-primary .path-select img,.reference-primary .path-card>img{height:80px!important}
  .reference-primary .path-title{min-height:44px!important}
  .reference-primary .path-bottom p{min-height:29px!important}
  .reference-primary .values{padding:10px 4px!important}
}

@media(max-width:760px){
  :root{--sticky-header-h:60px}
  .topbar{height:60px!important}
  .brand :is(img,.brand-mark){width:34px!important;height:34px!important}
  .brand strong{font-size:22px!important}
}