/* Brand typography and compact calls to action. */
@font-face {
  font-family: 'Gotham';
  src: url('assets/gotham-bold.otf') format('opentype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/manrope-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

.header, .hero {
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.header .nav { min-height: 104px; gap: 40px; }
.header .logo { display: block; width: 176px; height: auto; }
.header .nav > a:first-child { flex-shrink: 0; }
.header .nav nav {
  margin-left: auto;
  gap: 32px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.5;
}
.header .nav nav a { padding: 12px 0; }
.header .button-small {
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  gap: 24px;
}
.hero { min-height: 720px; }
/* Let the message lead, with the fitting event still visible on the right. */
.hero .hero-image { filter: brightness(.87) saturate(.86); }
.hero::after {
  background: linear-gradient(90deg, #0f1c35f7 0%, #0f1c35eb 28%, #0f1c35c2 46%, #0f1c3547 65%, transparent 84%);
}
.hero-grid { padding-top: 170px; padding-bottom: 110px; }
.hero-copy { max-width: 650px; }
.hero h1 {
  font-family: 'Gotham', 'Manrope', Arial, sans-serif;
  font-size: clamp(52px, 4.7vw, 68px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-transform: uppercase;
  margin: 0;
}
.hero h1 em {
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  display: block;
  margin-top: 18px;
  font-size: .57em;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: -.035em;
  text-transform: none;
  color: #edf1f3;
}
/* Stronger section headlines; the hero subheading retains its lighter weight. */
:is(.dashboard-intro-copy, .device-heading, .clarity, .section-heading, .service, .origin, .contact, .employee-voucher-copy) h2,
.feature-copy h3,
.platform h3,
.steps h3,
dialog h2 {
  font-family: 'Gotham', 'Manrope', Arial, sans-serif;
  font-weight: 700;
}
.hero .lede {
  max-width: 420px;
  margin-top: 28px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  color: #cdd5dc;
}
.hero-actions { margin-top: 30px; }
.hero-actions .button {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
  padding: 15px 20px;
  gap: 28px;
}
@media (max-width: 900px) {
  .header .nav { gap: 25px; }
  .header .nav nav { gap: 22px; font-size: 12px; }
  .header .logo { width: 158px; }
}
@media (max-width: 780px) {
  .hero::after { background: linear-gradient(90deg, #0f1c35f5 0%, #0f1c35d4 48%, #0f1c3573 100%); }
  .header .nav { min-height: 88px; gap: 22px; }
  .hero { min-height: 680px; }
  .hero-grid { padding-top: 145px; padding-bottom: 85px; }
  .hero-copy { max-width: 600px; }
  .hero h1 { font-size: clamp(46px, 7.7vw, 60px); }
  .hero .lede { max-width: 380px; font-size: 15px; }
}
@media (max-width: 600px) {
  .header .nav nav { display: none; }
  .header .button-small { margin-left: auto; }
}
@media (max-width: 480px) {
  .header .nav { min-height: 82px; gap: 18px; }
  .header .logo { width: 143px; }
  .header .button-small { padding: 10px 13px; font-size: 12px; gap: 15px; }
  .hero { min-height: 650px; }
  .hero-grid { padding-top: 132px; padding-bottom: 75px; }
  .hero h1 { font-size: clamp(29px, 8.9vw, 43px); letter-spacing: -.045em; }
  .hero h1 em { font-size: clamp(21.46px, 6.09vw, 28.42px); margin-top: 17px; }
  .hero .lede { max-width: 320px; margin-top: 24px; font-size: 14px; line-height: 1.75; }
  .hero-actions { margin-top: 27px; }
  .hero-actions .button { padding: 14px 17px; font-size: 12px; gap: 24px; }
}

/* About 65% of the previous rendered height, including the arrow line box. */
.button:not(.button-outline):not(.button-dark),
.contact .button-dark {
  position: relative;
  min-height: 37px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 999px;
}
.button span { line-height: 1; }
.header .button-small { min-height: 34px; }
.hero-actions .button { min-height: 39px; }
/* Retain an easy pointer/touch target around the slimmer visible button. */
.button:not(.button-outline):not(.button-dark)::after,
.contact .button-dark::after {
  content: '';
  position: absolute;
  inset: -6px 0;
  border-radius: inherit;
}
@media (max-width: 480px) {
  .header .button-small { min-height: 32px; }
  .hero-actions .button, .contact .button-dark { min-height: 38px; }
}