/* One centered page canvas; hero scales with the page, not the monitor. */
body { max-width: 1352px; margin-inline: auto; position: relative; container-type: inline-size; } 
.hero { background-image: linear-gradient(90deg,#f9fbfc 0%,rgba(249,251,252,.98) 26%,rgba(249,251,252,.85) 42%,rgba(249,251,252,.06) 68%),url('/assets/images/alpenbyte-hero-office.jpg'); }
@media (min-width: 961px) {
  .wrap { width: calc(100% - 112px); max-width: 1240px; }
  .site-header {
    position: absolute;
    inset: 0 0 auto;
    height: clamp(66px, 5.9cqw, 132px);
    background: transparent;
  }
  .nav { gap: clamp(24px, 2.5cqw, 56px); }
  .brand { font-size: clamp(23px, 1.96cqw, 44px); gap: clamp(10px, 1cqw, 22px); }
  .brand-logo { width: clamp(35px, 3.1cqw, 70px); height: auto; }
  .nav-links { gap: clamp(25px, 2.8cqw, 62px); font-size: clamp(14px, .98cqw, 22px); }
  .header-cta { font-size: clamp(14px, 1.05cqw, 23px); }
  .hero {
    background-color: #f8fafb;
    background-image:
      linear-gradient(180deg, rgba(248,250,251,.92), transparent 32%),
      linear-gradient(90deg, #f8fafb 0%, rgba(248,250,251,.99) 29%, rgba(248,250,251,.93) 41%, rgba(248,250,251,.36) 56%, transparent 72%),
      url('/assets/images/alpenbyte-hero-office.jpg');
    background-position: center, center, right bottom;
    background-size: cover, cover, cover;
    background-repeat: no-repeat;
  }
  .hero-inner {
    min-height: clamp(470px, 42cqw, 1060px);
    padding-top: clamp(100px, 8.9cqw, 225px);
    padding-bottom: clamp(36px, 3.3cqw, 83px);
    gap: clamp(24px, 2.3cqw, 58px);
  }
  .hero-content { max-width: 58%; }
  .hero h1 { font-size: clamp(50px, 4.95cqw, 126px); line-height: .98; letter-spacing: -.045em; }
  .hero .eyebrow { font-size: clamp(11px, .9cqw, 22px); margin-bottom: clamp(12px, 1.1cqw, 28px); }
  .hero-copy { max-width: 75%; font-size: clamp(16px, 1.43cqw, 36px); line-height: 1.4; margin-top: clamp(17px, 1.45cqw, 37px); }
  .hero-actions { margin-top: clamp(20px, 1.8cqw, 46px); gap: clamp(14px, 1.4cqw, 35px); }
  .hero .button, .header-cta { min-height: clamp(42px, 3.3cqw, 84px); padding: .8em 2em; }
  .hero .button { font-size: clamp(14px, 1.1cqw, 28px); }
  .hero .button span, .header-cta span { font-size: 1.4em; }
  .hero-label { top: clamp(85px, 7.5cqw, 190px); font-size: clamp(11px, .9cqw, 22px); padding: 1.2em 0 1.2em 1.5em; }
  .metrics { max-width: none; width: 56%; }
  .metric { padding-inline: clamp(12px, 1.5cqw, 38px); }
  .metric strong { font-size: clamp(20px, 1.8cqw, 46px); }
  .metric span { font-size: clamp(12px, .98cqw, 25px); margin-top: .3em; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .header-cta { display: none; }
  .hero-inner { min-height: 470px; }
  .hero-content { max-width: 600px; }
  .hero-label { display: none; }
  .hero { background-size: cover, auto 100%; }
}
@media (max-width: 760px) {
  .hero {
    background-image: linear-gradient(180deg,#f9fbfc 0%,#f9fbfc 34%,rgba(249,251,252,.05) 48%,rgba(249,251,252,.05) 73%,#f9fbfc 85%),url('/assets/images/alpenbyte-hero-office.jpg');
    background-size: cover, auto 360px;
    background-position: center, right 275px;
    background-repeat: no-repeat;
  }
}