:root {
  --ink: #101a29;
  --navy: #0a1422;
  --navy-2: #132238;
  --gold: #f3b52b;
  --gold-light: #ffd47d;
  --paper: #f5f7f8;
  --line: #dce3e8;
  --muted: #596776;
  --white: #ffffff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #3883ff; outline-offset: 4px; }
.container { width: min(calc(100% - 64px), 1240px); margin-inline: auto; }
.section-pad { padding-block: 116px; }
section[id] { scroll-margin-top: 82px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Manrope, 'Segoe UI', Arial, sans-serif; }
h2 { font-size: clamp(42px, 4.4vw, 66px); line-height: 1.1; letter-spacing: -.055em; font-weight: 800; }
h2 em { color: #b97e15; font-style: normal; }
.skip-link { position: fixed; z-index: 30; top: -60px; left: 16px; padding: 12px 16px; background: var(--gold); color: var(--navy); font-weight: 800; }
.skip-link:focus { top: 12px; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 27px; color: #a46f10; font: 800 10px/1.4 Manrope, Arial, sans-serif; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow-rule { display: inline-block; flex: none; width: 25px; height: 2px; background: currentColor; }
.eyebrow-light { color: var(--gold-light); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 56px; padding: 14px 22px; border: 1px solid transparent; font: 800 13px/1.3 Manrope, Arial, sans-serif; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 20px; font-weight: 500; line-height: 1; }
.button-gold { background: var(--gold); color: #111a23; }
.button-gold:hover { background: #ffd269; }
.button-outline { border-color: rgba(255,255,255,.5); color: #fff; background: rgba(5,14,25,.22); }
.button-outline:hover { border-color: var(--gold-light); background: rgba(255,255,255,.1); }
.inline-link { display: inline-flex; align-items: center; gap: 18px; padding-bottom: 7px; border-bottom: 1px solid currentColor; color: #986613; font: 800 13px Manrope, Arial, sans-serif; }
.inline-link span { font-size: 18px; line-height: 1; transition: transform .2s; }
.inline-link:hover span { transform: translate(3px, -2px); }
.status-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(243,181,43,.15); }

/* Header */
.site-header { position: sticky; z-index: 20; top: 0; background: rgba(8,18,31,.97); color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 78px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand-mark { display: grid; place-items: center; width: 52px; height: 47px; padding: 4px; background: #f5f5f0; border-radius: 3px; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-type { display: flex; flex-direction: column; color: #fff; font: 800 13px/1.04 Manrope, Arial, sans-serif; letter-spacing: .13em; }
.brand-type strong { display: block; color: var(--gold); font-size: 12px; letter-spacing: .1em; }
.brand-type small { margin-top: 5px; color: #b2bdc8; font-size: 7px; letter-spacing: .18em; }
.primary-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 35px); }
.primary-nav > a:not(.nav-cta) { padding-block: 14px; color: #d5dde3; font: 700 12px Manrope, Arial, sans-serif; transition: color .2s; }
.primary-nav > a:not(.nav-cta):hover { color: var(--gold-light); }
.nav-cta { display: inline-flex; align-items: center; gap: 15px; min-height: 43px; padding: 0 17px; background: var(--gold); color: #101821; font: 800 11px Manrope, Arial, sans-serif; transition: background .2s; }
.nav-cta:hover { background: #ffd269; }
.nav-cta span { font-size: 16px; font-weight: 400; }
.menu-toggle { display: none; }

/* Hero */
.hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(90deg, rgba(6,15,28,.94), rgba(6,15,28,.76)), url('./assets/asphalt-texture.jpg') center/cover no-repeat; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 80% 30%, rgba(70,104,151,.14), transparent 34%), linear-gradient(0deg,rgba(7,15,26,.58),transparent 42%); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: clamp(35px, 5vw, 85px); align-items: center; min-height: 650px; padding-block: 94px 85px; }
.hero-copy { position: relative; z-index: 1; }
.hero h1 { max-width: 690px; margin: 0 0 25px; font-size: clamp(53px, 5.15vw, 79px); font-weight: 800; line-height: 1.035; letter-spacing: -.065em; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero-lede { max-width: 595px; margin-bottom: 34px; color: #d7dfe8; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-status { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 42px 0 0; color: #b5c2cd; font: 800 9px/1.5 Manrope, Arial, sans-serif; letter-spacing: .14em; }
.status-separator { width: 19px; height: 1px; background: #8598a9; }
.hero-product { position: relative; z-index: 1; min-width: 0; transform: translateY(22px); }
.product-frame { overflow: hidden; border: 1px solid rgba(226,233,238,.45); border-radius: 12px; background: #edf2f6; box-shadow: 0 32px 80px rgba(0,0,0,.45), 17px 18px 0 -1px rgba(243,181,43,.9); }
.frame-bar, .tour-browser-bar { display: flex; align-items: center; gap: 15px; height: 40px; padding-inline: 16px; color: #bcc9d6; background: #111d2e; font: 800 9px Manrope, Arial, sans-serif; letter-spacing: .1em; }
.frame-dots { display: inline-flex; gap: 5px; }
.frame-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #607184; }
.frame-dots i:first-child { background: var(--gold); }
.frame-arrow { margin-left: auto; color: var(--gold); font-size: 18px; }
.frame-screen { aspect-ratio: 2.08; overflow: hidden; }
.frame-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.product-label { display: flex; align-items: center; gap: 17px; padding: 22px 3px 0; font: 700 11px Manrope, Arial, sans-serif; }
.product-label > span:first-child { color: var(--gold-light); font-size: 9px; letter-spacing: .16em; }
.product-label > span:last-child { margin-left: auto; color: var(--gold); font-size: 22px; }
.hero-bottom { position: relative; display: flex; align-items: center; gap: 28px; min-height: 70px; border-top: 1px solid rgba(255,255,255,.22); color: #b7c5d1; font: 800 9px Manrope, Arial, sans-serif; letter-spacing: .16em; }
.hero-bottom-line { flex: 1; height: 1px; background: rgba(255,255,255,.26); }
.hero-bottom > span:last-child { color: var(--gold-light); }

/* Context */
.context { background: #fff; }
.context-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(60px, 9vw, 140px); }
.context-copy h2 { max-width: 610px; margin-bottom: 29px; }
.context-copy > p:not(.eyebrow) { max-width: 540px; margin-bottom: 30px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.context-scenes { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12px; min-height: 450px; }
.scene { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #152331; }
.scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scene-lab img { object-position: 48% center; }
.scene-road img { object-position: 47% center; }
.scene::after { content: ''; position: absolute; inset: 53% 0 0; background: linear-gradient(transparent,rgba(4,12,20,.72)); pointer-events: none; }
.scene figcaption { position: absolute; z-index: 1; bottom: 19px; left: 18px; color: #fff; font: 800 9px Manrope, Arial, sans-serif; letter-spacing: .13em; }

/* Interactive product tour */
.platform { color: #f6f8fb; background: #0d1a2b; }
.platform h2 em, .teams h2 em, .contact h2 em { color: var(--gold); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .65fr); align-items: end; gap: 70px; margin-bottom: 55px; }
.section-heading h2 { margin: 0; }
.section-heading > p { max-width: 455px; margin: 0 0 5px auto; color: var(--muted); font-size: 15px; line-height: 1.75; }
.platform-heading > p { color: #b9c7d5; }
.tour-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #46586c; border-bottom: 0; }
.tour-tab { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; padding: 14px 18px; border: 0; border-right: 1px solid #46586c; border-bottom: 1px solid #46586c; background: #152438; color: #c3d0dc; text-align: left; font: 800 14px/1.3 Manrope, Arial, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.tour-tab:nth-child(4n) { border-right: 0; }
.tour-tab:last-child { border-right: 0; }
.tour-tab:hover { background: #243a54; }
.tour-tab.is-active { background: var(--gold); color: var(--navy); }
.tour-tab > span { font-size: 10px; letter-spacing: .1em; }
.tour-tab b { margin-left: auto; font-size: 21px; font-weight: 400; }
.tour-panel { display: grid; grid-template-columns: minmax(0, 1.27fr) minmax(0, .73fr); min-height: 475px; border: 1px solid #46586c; }
.tour-visual { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #e8eef4; }
.tour-browser-bar { color: #a6b6c8; background: #1c2b3e; }
.tour-browser-bar > span:last-child { margin-left: auto; color: #f0bb53; }
.tour-screen { position: relative; display: block; flex: none; width: 100%; aspect-ratio: 2.08; padding: 0; overflow: hidden; border: 0; background: #e8eef4; cursor: zoom-in; }
.tour-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.tour-zoom { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 9px; padding: 11px 14px; background: rgba(9,20,35,.93); color: #fff; font: 800 11px Manrope, Arial, sans-serif; box-shadow: 0 5px 18px rgba(0,0,0,.22); }
.tour-screen:hover .tour-zoom { background: #152b45; }
.tour-visual-foot { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex: 1; min-height: 48px; padding: 15px 20px; border-top: 1px solid #cad4dd; color: #6b7b8a; font: 800 9px Manrope, Arial, sans-serif; letter-spacing: .13em; }
.tour-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; padding: clamp(34px, 4vw, 60px); background: #132338; }
.tour-counter { align-self: flex-end; margin-bottom: auto; color: #d0a641; font: 800 10px Manrope, Arial, sans-serif; letter-spacing: .14em; }
.tour-kicker { margin: 22px 0 14px; color: #f5c35f; font: 800 10px Manrope, Arial, sans-serif; letter-spacing: .16em; }
.tour-copy h3 { max-width: 420px; margin: 0 0 18px; font-size: clamp(31px, 2.75vw, 43px); line-height: 1.14; letter-spacing: -.05em; }
.tour-copy > p:not(.tour-kicker) { max-width: 400px; margin-bottom: 26px; color: #c3d0de; font-size: 14px; line-height: 1.75; }
.tour-points { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 35px; }
.tour-points span { padding: 8px 10px; border: 1px solid #50657a; color: #d9e2eb; font: 700 10px Manrope, Arial, sans-serif; }
.tour-copy .inline-link { color: var(--gold-light); }
.screen-note { display: flex; align-items: baseline; gap: 12px; margin: 17px 0 0; color: #aebdca; font: 600 11px/1.6 Manrope, Arial, sans-serif; letter-spacing: .01em; }

/* The expanded view preserves the supplied application screenshot. */
.shot-dialog { width: min(1080px, calc(100vw - 28px)); max-height: 92vh; margin: auto; padding: 0; overflow: hidden; border: 1px solid #46586c; border-radius: 12px; background: #f3f6f9; color: var(--ink); box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.shot-dialog::backdrop { background: rgba(3,10,19,.82); backdrop-filter: blur(4px); }
.shot-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 23px; background: #101d30; color: #fff; }
.shot-dialog-head span { color: #f2bc50; font: 800 9px Manrope, Arial, sans-serif; letter-spacing: .12em; }
.shot-dialog-head h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.03em; }
.shot-dialog-head button { flex: none; padding: 9px 11px; border: 1px solid #6b7a8a; background: transparent; color: #fff; font: 800 12px Manrope, Arial, sans-serif; cursor: pointer; }
.shot-dialog-head button span { margin-left: 12px; color: #fff; font-size: 18px; }
.shot-dialog-scroll { max-height: min(73vh, 1100px); padding: 16px; overflow: auto; overscroll-behavior: contain; }
.shot-dialog-scroll img { display: block; width: min(100%, 900px); height: auto; margin-inline: auto; box-shadow: 0 6px 25px rgba(26,42,58,.18); }
.shot-dialog > p { margin: 0; padding: 12px 22px; border-top: 1px solid #d4dde5; color: #586877; font-size: 11px; line-height: 1.5; }

/* Workflow cards */
.workflows { background: #f4f6f8; }
.workflows-heading { margin-bottom: 48px; }
.workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.workflow-card { position: relative; display: flex; flex-direction: column; min-height: 260px; padding: 27px 28px 30px; border: 1px solid #d6dfe5; background: #fff; transition: transform .2s, box-shadow .2s, border-color .2s; }
.workflow-card:hover { transform: translateY(-3px); border-color: #9eabb8; box-shadow: 0 18px 30px rgba(19,39,61,.07); }
.workflow-number { color: #a56f13; font: 800 10px Manrope, Arial, sans-serif; letter-spacing: .13em; }
.workflow-card h3 { margin: 47px 0 9px; font-size: clamp(23px, 2vw, 29px); letter-spacing: -.045em; }
.workflow-card p { max-width: 315px; margin: 0; color: #5d6a76; font-size: 13px; line-height: 1.7; }
.workflow-mark { position: absolute; top: 22px; right: 24px; color: #c7d0d7; font-size: 23px; }
.workflow-disclaimer { margin: 21px 0 0; color: #6c7883; font-size: 12px; }

/* Teams */
.teams { background: #122033; color: #fff; }
.teams-intro { max-width: 740px; margin-bottom: 49px; }
.teams-intro h2 { margin-bottom: 20px; }
.teams-intro > p:last-child { max-width: 600px; margin: 0; color: #c1cfdd; font-size: 15px; line-height: 1.75; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.team-card { overflow: hidden; border: 1px solid #526478; background: #192b40; }
.team-card img { display: block; width: 100%; aspect-ratio: 1.95; object-fit: cover; }
.team-card div { padding: 29px 32px 36px; }
.team-card span { color: var(--gold-light); font: 800 10px Manrope, Arial, sans-serif; letter-spacing: .13em; }
.team-card h3 { margin: 20px 0 10px; font-size: clamp(28px, 2.7vw, 39px); letter-spacing: -.05em; }
.team-card p { max-width: 470px; margin: 0; color: #c2d0dd; font-size: 14px; line-height: 1.7; }

/* Next steps */
.next-step { background: #fff; }
.next-step-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(70px, 10vw, 160px); }
.next-step h2 { margin: 0; }
.step-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #cfd7dc; }
.step-list li { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 25px 0 28px; border-bottom: 1px solid #cfd7dc; }
.step-list li > span { padding-top: 6px; color: #b88421; font: 800 12px Manrope, Arial, sans-serif; }
.step-list h3 { margin: 0 0 8px; font-size: 23px; letter-spacing: -.035em; }
.step-list p { max-width: 500px; margin: 0; color: #5d6a76; font-size: 14px; line-height: 1.65; }

/* Contact and company */
.contact { background: linear-gradient(90deg,rgba(6,17,29,.88),rgba(6,17,29,.77)), url('./assets/night-compactor.jpg') center 48%/cover no-repeat; color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(55px, 9vw, 130px); }
.contact h2 { max-width: 670px; margin-bottom: 24px; }
.contact-grid > div:first-child > p:last-child { max-width: 510px; margin: 0; color: #c8d5e0; font-size: 16px; line-height: 1.7; }
.contact-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(31px, 4vw, 54px); border: 1px solid rgba(255,255,255,.35); background: rgba(10,24,39,.89); box-shadow: 0 25px 70px rgba(0,0,0,.22); }
.contact-label { color: var(--gold-light); font: 800 10px Manrope, Arial, sans-serif; letter-spacing: .17em; }
.contact-card p { max-width: 440px; margin: 29px 0 28px; font-size: 22px; font-weight: 600; line-height: 1.45; }
.contact-card .button { width: 100%; }
.contact-email { margin-top: 26px; color: #f4f6f7; border-bottom: 1px solid #8999a7; font-size: 15px; overflow-wrap: anywhere; }
.contact-email:hover { color: var(--gold-light); }
.contact-card small { margin-top: 30px; color: #9cafbf; font-size: 11px; }
.company { background: #f3f5f3; }
.company-inner { display: grid; grid-template-columns: minmax(220px, .38fr) minmax(0, .62fr); align-items: center; gap: clamp(70px, 10vw, 160px); padding-block: 83px; }
.company-inner > img { display: block; width: min(100%, 275px); height: auto; aspect-ratio: 910 / 610; object-fit: contain; margin-inline: auto; }
.company h2 { margin-bottom: 20px; }
.company p:not(.eyebrow) { max-width: 650px; margin-bottom: 0; color: #596a73; font-size: 15px; line-height: 1.8; }
.company p a { color: #83590d; border-bottom: 1px solid #b18531; }
.company p a:hover { color: #172638; }
.site-footer { background: #e8ecea; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding-block: 40px; }
.footer-brand { display: block; flex: none; width: 185px; }
.footer-brand img { display: block; width: 100%; height: auto; }
.footer-top nav { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.footer-top nav a { font: 800 12px Manrope, Arial, sans-serif; }
.footer-top nav a:hover { color: #a16b0c; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding-block: 20px 28px; border-top: 1px solid #c9d1d1; color: #61716f; font: 800 9px Manrope, Arial, sans-serif; letter-spacing: .13em; }
.photo-notes { padding-bottom: 28px; color: #667574; font-size: 11px; line-height: 1.6; }
.photo-notes p { margin-bottom: 8px; }
.photo-notes summary { width: fit-content; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.photo-notes details p { max-width: 900px; margin: 8px 0 0; }
.photo-notes a { text-decoration: underline; text-underline-offset: 2px; }
.photo-notes a:hover { color: #83590d; }

@media (max-width: 1120px) {
  .container { width: min(calc(100% - 48px), 1240px); }
  .primary-nav { gap: 17px; }
  .hero-grid { gap: 30px; }
  .hero h1 { font-size: clamp(51px, 5.4vw, 70px); }
  .tour-copy { padding: 34px; }
}
@media (max-width: 940px) {
  .header-inner { min-height: 72px; }
  .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 42px; height: 42px; border: 1px solid #748397; background: transparent; cursor: pointer; }
  .menu-toggle span { width: 18px; height: 2px; background: #fff; transition: transform .2s, opacity .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 24px 25px; border-bottom: 1px solid #637385; background: #0b1728; box-shadow: 0 22px 35px rgba(0,0,0,.22); }
  .primary-nav.is-open { display: flex; }
  .primary-nav > a:not(.nav-cta) { padding: 15px 3px; border-bottom: 1px solid #34455a; }
  .nav-cta { justify-content: space-between; margin-top: 18px; }
  .hero-grid { grid-template-columns: 1fr; gap: 50px; padding-block: 76px 68px; }
  .hero-copy { max-width: 740px; }
  .hero h1 { max-width: 780px; font-size: clamp(59px, 8vw, 79px); }
  .hero-product { width: min(100% - 18px, 750px); margin: 0 auto; transform: none; }
  .context-grid, .next-step-grid, .contact-grid { grid-template-columns: 1fr; gap: 43px; }
  .context-scenes { min-height: 345px; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .section-heading > p { max-width: 650px; margin-left: 0; }
  .tour-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-tab:nth-child(4n) { border-right: 1px solid #46586c; }
  .tour-tab:nth-child(2n) { border-right: 0; }
  .tour-panel { grid-template-columns: 1fr; }
  .tour-screen { aspect-ratio: 2.08; }
  .tour-copy { min-height: 355px; padding: 37px; }
  .tour-counter { margin-bottom: 0; }
  .workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-card { max-width: 610px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 74px; }
  .container { width: calc(100% - 36px); }
  .section-pad { padding-block: 78px; }
  h2 { font-size: clamp(39px, 10.5vw, 51px); }
  .header-inner { min-height: 68px; }
  .brand-mark { width: 44px; height: 41px; }
  .brand-type { font-size: 11px; }
  .brand-type strong { font-size: 10px; }
  .brand-type small { font-size: 6px; }
  .hero-grid { gap: 46px; padding-block: 70px 57px; }
  .hero h1 { font-size: clamp(44px, 12.1vw, 66px); }
  .hero-lede { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }
  .hero-status { margin-top: 31px; font-size: 8px; }
  .product-frame { box-shadow: 0 20px 45px rgba(0,0,0,.34), 9px 10px 0 -1px rgba(243,181,43,.9); }
  .frame-bar { height: 31px; padding-inline: 9px; font-size: 7px; }
  .product-label { font-size: 10px; }
  .hero-bottom { gap: 18px; min-height: 52px; font-size: 8px; }
  .hero-bottom > span:nth-child(2), .hero-bottom > span:nth-child(4), .hero-bottom-line { display: none; }
  .hero-bottom > span:last-child { margin-left: auto; }
  .context-scenes { min-height: 265px; gap: 8px; }
  .scene figcaption { bottom: 13px; left: 11px; font-size: 7px; }
  .tour-tabs { margin-inline: -18px; border-inline: 0; }
  .tour-tab { min-height: 57px; padding: 10px 12px; font-size: 12px; }
  .tour-tab b { font-size: 18px; }
  .tour-screen { aspect-ratio: 1.42; }
  .tour-zoom { right: 9px; bottom: 9px; padding: 8px 10px; font-size: 9px; }
  .tour-browser-bar { height: 32px; padding-inline: 9px; font-size: 7px; }
  .tour-browser-bar > span:last-child { display: none; }
  .tour-copy { min-height: 340px; padding: 27px 24px 31px; }
  .tour-copy h3 { font-size: clamp(30px, 8vw, 39px); }
  .tour-copy > p:not(.tour-kicker) { font-size: 14px; }
  .screen-note { font-size: 10px; }
  .shot-dialog-head { padding: 13px 15px; }
  .shot-dialog-head span { font-size: 7px; }
  .shot-dialog-head h2 { font-size: 17px; }
  .shot-dialog-scroll { padding: 6px; }
  .workflow-grid, .team-grid { grid-template-columns: 1fr; }
  .workflow-card { min-height: 210px; }
  .workflow-card h3 { margin-top: 37px; }
  .team-card div { padding: 25px; }
  .step-list li { grid-template-columns: 39px 1fr; gap: 15px; }
  .step-list h3 { font-size: 21px; }
  .contact-card { padding: 29px 25px; }
  .company-inner { grid-template-columns: 1fr; gap: 16px; padding-block: 65px; }
  .company-inner > img { width: 175px; margin-inline: 0; }
  .footer-top { align-items: flex-start; flex-direction: column; gap: 30px; }
  .footer-brand { width: 150px; }
  .footer-top nav { gap: 14px 23px; }
  .footer-bottom { flex-direction: column; gap: 10px; }
}
@media (max-width: 370px) {
  .brand-type small { display: none; }
  .hero h1 { font-size: 43px; }
  .frame-bar > span:nth-child(2) { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}