/* AeroM — "flight deck": white, black, red. System fonts only (zero font bytes, zero layout shift). */
:root {
  --white: #fff;
  --ink: #0e0e10;
  --ink-2: #3a3a42;
  --muted: #5f5f68;
  --line: #e4e4e8;
  --paper: #f5f5f3;
  --red: #f70606;      /* brand red (logo): decoration, and text on black (4.6:1) */
  --red-ink: #d40000;  /* red for text/buttons on white (5.5:1) */
  --max: 1180px;
  --pad: clamp(16px, 4vw, 32px);
  --r: 6px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Roboto Mono", "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; font: 400 17px/1.6 var(--font); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, .h3 { line-height: 1.1; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 7vw, 4.4rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 850; text-transform: uppercase; }
h3, .h3 { font-size: 1.15rem; font-weight: 750; }
p { margin: 0 0 1em; text-wrap: pretty; }
.mono { font-family: var(--mono); font-size: .85em; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.sr, .sprite { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: var(--white); padding: 10px 14px; border-radius: var(--r); }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 2px; }
.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* ---- header */
.top { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand img { width: 132px; height: auto; }
.nav { display: none; gap: 4px; }
.nav a, .menu nav a { text-decoration: none; font-weight: 650; font-size: .95rem; padding: 10px 12px; border-radius: var(--r); }
.nav a:hover, .menu nav a:hover { background: var(--paper); }
.nav a[aria-current="page"], .menu nav a[aria-current="page"] { color: var(--red-ink); box-shadow: inset 0 -3px 0 var(--red); }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary .i { width: 26px; height: 26px; }
.menu[open] nav { position: absolute; left: 0; right: 0; top: 100%; display: grid; background: var(--white); border-bottom: 1px solid var(--line); padding: 8px var(--pad) 16px; }
@media (min-width: 860px) { .nav { display: flex; } .menu { display: none; } }

/* ---- buttons, links, tags */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 12px 20px; border: 2px solid var(--red-ink); border-radius: var(--r);
  background: var(--red-ink); color: var(--white); font: 750 1rem/1.1 var(--font); text-decoration: none; cursor: pointer; letter-spacing: .01em;
  transition-property: transform, background-color, color, box-shadow; transition-duration: 150ms; transition-timing-function: var(--ease); touch-action: manipulation; }
.btn:hover { background: #b80000; border-color: #b80000; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-light:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.btn-sm { min-height: 44px; padding: 8px 14px; font-size: .92rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.actions-center { justify-content: center; }
.link { color: var(--red-ink); font-weight: 650; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: .3em; }
.kicker { font: 700 .8rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--red-ink); margin-bottom: .6em; }
.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 62ch; }
/* "Remove before flight" streamer: the brand's signature tag */
.streamer { display: inline-block; position: relative; background: var(--red-ink); color: var(--white); font: 800 .78rem/1 var(--mono); text-transform: uppercase;
  letter-spacing: .16em; padding: 9px 22px 9px 14px; margin-bottom: 18px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); }
.streamer::before { content: ""; display: inline-block; width: 7px; height: 7px; border: 2px solid var(--white); border-radius: 50%; margin-right: 10px; vertical-align: 1px; }
.streamer-sm { position: absolute; left: 0; top: 12px; margin: 0; padding: 6px 16px 6px 10px; font-size: .68rem; }

/* ---- hero: a stage where the plane flies one loop as you scroll (static layout here; motion at the end) */
.flight-stage { position: relative; border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, rgb(14 14 16 / .045) 0 1px, transparent 1px 80px) var(--white); }
.flight-grid { display: grid; gap: 20px; align-items: center; padding-block: clamp(28px, 6vw, 72px); grid-template-areas: "copy" "art"; }
.flight-copy, .flight-caps { grid-area: copy; position: relative; z-index: 1; }
.flight-caps, .hud, .scroll-hint { display: none; }
.certs-line { color: var(--muted); }
.flight-art { grid-area: art; position: relative; container-type: size; height: clamp(260px, 72vw, 520px); --cx: 50%; --cy: 44%; --d: min(90cqw, 90cqh); }
.loop, .orbit { position: absolute; left: var(--cx); top: var(--cy); }
.loop { width: var(--d); height: var(--d); translate: -50% -50%; overflow: visible; fill: none; }
.loop-plan { stroke: #c4c4cc; stroke-width: .45; stroke-dasharray: 1.4 1.6; }
.loop-trail { stroke: var(--red); stroke-width: .8; stroke-linecap: round; stroke-dasharray: 100; }
.orbit { width: 0; height: 0; }
/* the cut-out faces left, so it sits on the bottom of the loop and the loop runs clockwise */
.plane { position: absolute; left: 0; top: calc(var(--d) * .4); width: calc(var(--d) * .56); max-width: none; translate: -50% -50%; }
@media (min-width: 900px) { .flight-grid { grid-template-columns: 1.05fr 1fr; grid-template-areas: "copy art"; } .flight-art { height: clamp(380px, 40vw, 540px); } }
.flight-product { display: none; }  /* product pages: without scroll timelines the spec plate already says it all */
.plane-window { border-radius: 50%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 0 6px var(--white), 0 0 0 8px var(--ink); }

/* ---- sections + runway headings */
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section-tight { padding: clamp(24px, 5vw, 56px) 0; }
.section-alt { background: var(--paper); }
.band { padding: clamp(48px, 8vw, 96px) 0; }
.band-dark { background: var(--ink); color: var(--white); }
.band-dark .kicker { color: var(--red); }
.band-dark p { color: #d6d6dc; }
.runway { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 28px; padding-bottom: 14px;
  background: repeating-linear-gradient(90deg, currentColor 0 34px, transparent 34px 56px) bottom / 100% 3px no-repeat; }
.runway h2 { margin: 0; }
.runway-num { font: 900 clamp(2.4rem, 7vw, 3.6rem)/.8 var(--mono); color: transparent; -webkit-text-stroke: 2px var(--red); letter-spacing: -.04em; }
.page-head { padding: clamp(32px, 6vw, 64px) 0 8px; border-bottom: 1px solid var(--line); }
.page-center { text-align: center; padding-bottom: clamp(48px, 8vw, 96px); }
.page-center .lede { margin-inline: auto; }
.more { margin-top: 24px; }

/* ---- grids + cards */
.grid { display: grid; gap: 20px; }
.cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.card { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; background: var(--white);
  transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.card:hover { box-shadow: 0 10px 30px rgb(14 14 16 / .08); transform: translateY(-2px); }
.card-link { text-decoration: none; display: grid; gap: 10px; }
.card-img { position: relative; background: var(--paper); border-radius: 4px; overflow: hidden; aspect-ratio: 1; }
.card-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.card-title { font-size: 1.02rem; margin: 0; }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; margin: auto 0 0; }
.price { font: 800 1.15rem/1 var(--font); font-variant-numeric: tabular-nums; }
.card .btn { width: 100%; }

/* ---- clients + certifications band */
.clients { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.clients li { background: var(--white); border-radius: var(--r); min-height: 96px; display: grid; place-items: center; padding: 14px; color: var(--ink); }
.clients img { max-height: 64px; width: auto; }
/* ---- white label: portfolio rows alternate sides; numbered steps */
.work { display: grid; gap: clamp(36px, 6vw, 72px); }
.work-item { display: grid; gap: 20px; align-items: center; scroll-margin-top: 90px; }
.work-img { background: var(--paper); border-radius: var(--r); aspect-ratio: 4 / 3; overflow: clip; }
.work-img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.work-logo { height: 56px; width: auto; margin-bottom: 14px; }
@media (min-width: 860px) { .work-item { grid-template-columns: 1fr 1fr; gap: 48px; } .work-item:nth-child(even) .work-img { order: 2; } }
.steps { list-style: none; counter-reset: step; margin: 0 0 8px; padding: 0; display: grid; gap: 14px; }
.steps li { counter-increment: step; display: grid; gap: 4px; position: relative; padding: 18px 20px 18px 74px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 18px; top: 16px; font: 900 1.7rem/1 var(--mono); color: transparent; -webkit-text-stroke: 1.5px var(--red); }
.steps b { font-size: 1.05rem; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.certs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.certs li { font: 700 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; border: 1px solid #55555e; color: var(--white); padding: 9px 12px; border-radius: 3px; }

/* ---- videos, splits, mosaics, quote */
.videos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.video { margin: 0; }
.video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); border-radius: var(--r); }
.video figcaption { font-weight: 650; margin-top: 8px; }
.split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 860px) { .split { grid-template-columns: 1.1fr .9fr; } .split-form { grid-template-columns: 1.3fr .7fr; } }
.ticks { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 16px; height: 3px; background: var(--red); box-shadow: 0 0 0 0 transparent; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mosaic img { border-radius: var(--r); aspect-ratio: 1; object-fit: cover; width: 100%; }
.statement { font: 850 clamp(1.6rem, 5vw, 3.1rem)/1.1 var(--font); letter-spacing: -.02em; text-transform: uppercase; max-width: 24ch; margin: 0 0 clamp(36px, 6vw, 72px); text-wrap: balance; }
.marquee .clients[aria-hidden] { display: none; }

/* ---- testimonials: boarding passes; they stack while you scroll where the screen is tall enough */
.passes { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.pass { display: grid; grid-template-columns: 106px 1fr; grid-template-areas: "photo label" "photo name" "quote quote" "stub stub";
  column-gap: 16px; background: var(--white); color: var(--ink); border-radius: 16px; overflow: clip; box-shadow: 0 24px 48px -20px rgb(0 0 0 / .6); }
.pass-photo { grid-area: photo; margin: 18px 0 0 18px; width: 88px; height: 108px; border-radius: 8px; overflow: clip; background: var(--paper); }
.pass-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.pass p { color: inherit; }  /* beats .band-dark p (light grey) inside the white pass */
.pass .pass-label { grid-area: label; align-self: end; display: flex; justify-content: space-between; gap: 8px; margin: 18px 18px 0 0;
  font: 800 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--red-ink); }
.pass-name { grid-area: name; align-self: start; margin: 8px 18px 0 0; display: grid; gap: 4px; font: 850 1.05rem/1.15 var(--font); text-transform: uppercase; }
.pass-k { display: block; font: 700 .64rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pass-quote { grid-area: quote; margin: 16px 18px 18px; font-size: 1rem; line-height: 1.55; font-weight: 550; }
.pass-stub { grid-area: stub; position: relative; display: flex; align-items: center; gap: 18px; padding: 14px 18px 16px;
  border-top: 2px dashed #c8c8cf; background: var(--paper); font: 800 .9rem/1.2 var(--mono); }
.pass-stub::before, .pass-stub::after { content: ""; position: absolute; top: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); }
.pass-stub::before { left: -13px; }
.pass-stub::after { right: -13px; }
.barcode { flex: 1; align-self: stretch; min-height: 34px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px, var(--ink) 9px 10px, transparent 10px 13px); }
/* faces sit in different places in each photo */
.pass-photo img[src*="deepak"] { object-position: 50% 62%; }
.pass-photo img[src*="atin"] { object-position: 40% 30%; }
.pass-photo img[src*="archit"] { scale: 2.1; transform-origin: 52% 9%; }
.pass-photo img[src*="s-m-banerjee"] { scale: 1.5; transform-origin: 45% 22%; }
@media (min-width: 760px) {
  .pass { grid-template-columns: 220px 1fr 180px; grid-template-rows: auto 1fr auto; grid-template-areas: "photo label stub" "photo quote stub" "photo name stub"; column-gap: 0; min-height: 300px; }
  .pass-photo { margin: 0; width: auto; height: auto; border-radius: 0; }
  .pass-label { margin: 26px 30px 0; }
  .pass-quote { margin: 16px 30px; font-size: 1.12rem; align-self: center; }
  .pass-name { margin: 0 30px 26px; }
  .pass-stub { flex-direction: column; align-items: stretch; justify-content: center; gap: 14px; padding: 26px 22px; border-top: 0; border-left: 2px dashed #c8c8cf; }
  .pass-stub::before, .pass-stub::after { left: -14px; right: auto; }
  .pass-stub::before { top: -14px; }
  .pass-stub::after { top: auto; bottom: -14px; }
  .barcode { flex: none; min-height: 56px; }
}
@media (min-height: 640px) { .pass { position: sticky; top: calc(84px + var(--i, 0) * 14px); } }
.contact-card { border: 2px solid var(--ink); border-radius: var(--r); padding: 24px; background: var(--white); }

/* ---- product page */
.crumbs { display: flex; gap: 8px; font-size: .9rem; padding-top: 18px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.product { display: grid; gap: 28px; }
@media (min-width: 900px) { .product { grid-template-columns: 1.05fr 1fr; align-items: start; } .gallery { position: sticky; top: 84px; } }
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; border-radius: var(--r); }
.gallery-img { scroll-snap-align: start; aspect-ratio: 1; object-fit: cover; width: 100%; background: var(--paper); border-radius: var(--r); }
.price-big { font: 850 2rem/1 var(--font); margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.price-big small { font: 500 .85rem/1 var(--font); color: var(--muted); }
.plate { width: 100%; border-collapse: collapse; margin: 16px 0; border: 2px solid var(--ink); font-size: .95rem; }
.plate caption { text-align: left; font: 800 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; background: var(--ink); color: var(--white); padding: 9px 12px; }
.plate th, .plate td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.plate th { font: 700 .8rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); width: 42%; }

/* ---- sticky bottom bar (product + catalogue) and floating chat */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--white); }
.bar-price { margin-right: auto; font-weight: 800; display: inline-flex; gap: 8px; align-items: center; }
.bar .btn-ghost { color: var(--white); border-color: var(--white); }
.has-bar main { padding-bottom: 80px; }
.has-bar .foot { padding-bottom: 96px; }
@media (min-width: 900px) { .bar:not(.bar-order) { display: none; } .has-bar main { padding-bottom: 0; } }
.wa-float { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 25; display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--white); text-decoration: none; font-weight: 750; padding: 14px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgb(0 0 0 / .25); }
.wa-float .i { color: var(--red); width: 22px; height: 22px; }
@media (max-width: 520px) { .wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .wa-float { padding: 15px; } }

/* ---- chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.chip { font: 700 .82rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 12px 14px; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--white); color: var(--ink); text-decoration: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.chip[aria-pressed="true"], .chip:hover { background: var(--ink); color: var(--white); }

/* ---- forms */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 650; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--white); border: 2px solid #c8c8cf; border-radius: var(--r); padding: 12px 14px; min-height: 48px; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: 3px solid rgb(212 0 0 / .25); outline-offset: 0; }
.trade { display: grid; gap: 16px; }
@media (min-width: 600px) { .trade { grid-template-columns: 1fr 1fr; } }
form:not(:has(option[value="Trade / distributor pricing"]:checked)) .trade { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { background: #fff0f0; border-left: 4px solid var(--red-ink); color: #8a0000; padding: 12px 14px; border-radius: 4px; font-weight: 650; }
.form-ok { background: #f2f2f2; border-left: 4px solid var(--ink); padding: 12px 14px; border-radius: 4px; font-weight: 650; }

/* ---- catalogue: flip strip */
.flip-band { padding: 24px 0 32px; }
.flip-bar { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
.flip-count { color: var(--white); font-size: 1rem; }
.icon-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.icon-btn:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.icon-btn-sm { width: 40px; height: 40px; border-width: 1px; }
.flip { position: relative; list-style: none; margin: 0; padding: 0 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: min(86vw, 520px); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-color: var(--red) transparent; }
.flip-page { scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.flip-zoom { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 4px; overflow: hidden; }
.flip-zoom img { width: 100%; height: auto; }
.page-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.page-chip { display: inline-flex; align-items: center; background: var(--white); color: var(--ink); border-radius: 999px; overflow: hidden; }
.page-chip a { padding: 10px 12px; font-weight: 700; font-size: .9rem; text-decoration: none; }
.chip-add { display: inline-flex; align-items: center; gap: 4px; border: 0; background: var(--red-ink); color: var(--white); font: 750 .85rem/1 var(--font); padding: 12px 14px; cursor: pointer; min-height: 44px; }
.added { animation: pop 600ms var(--ease); }
@keyframes pop { 30% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .added { animation: none; } * { scroll-behavior: auto !important; } }

/* ---- catalogue: spec sheets */
.spec-tools { display: grid; gap: 8px; margin-bottom: 20px; }
@media (min-width: 860px) { .spec-tools { grid-template-columns: 320px 1fr auto; align-items: center; } .spec-tools .chips { margin: 0; } }
.specs { display: grid; gap: 16px; }
.spec { display: grid; grid-template-columns: 96px 1fr; gap: 16px; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.spec[hidden] { display: none; }
.spec > img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; background: var(--paper); }
.spec h3 a { text-decoration: none; }
.spec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; margin: 8px 0 12px; }
.spec-list div { border-top: 1px solid var(--line); padding-top: 6px; }
.spec-list dt { font: 700 .72rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.spec-list dd { margin: 2px 0 0; font-size: .95rem; }
@media (min-width: 700px) { .spec { grid-template-columns: 140px 1fr; } .spec > img { width: 140px; height: 140px; } }

/* ---- dialogs */
dialog { border: 0; padding: 0; max-width: none; max-height: none; }
dialog::backdrop { background: rgb(14 14 16 / .6); }
.zoom { width: 100vw; height: 100dvh; background: var(--ink); overflow: auto; touch-action: pinch-zoom; }
.zoom img { width: min(100%, 1100px); margin: 0 auto; }
.zoom-close { position: sticky; top: 12px; margin: 12px 12px 0 auto; display: grid; color: var(--white); background: var(--ink); z-index: 2; }
.drawer { margin: auto 0 0 auto; width: min(100vw, 460px); height: 100dvh; background: var(--white); color: var(--ink); }
.drawer-in { padding: 20px; display: grid; gap: 14px; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.order-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.order-line { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.order-name { font-weight: 700; grid-column: 1 / -1; }
.order-qty { display: inline-flex; align-items: center; gap: 10px; }
.order-qty output { min-width: 92px; text-align: center; font-weight: 700; }
.order-pcs { align-self: center; color: var(--muted); }
.order-who { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }

/* ---- footer */
.foot { background: var(--ink); color: #d6d6dc; padding: 56px 0 24px; margin-top: 0; }
.foot-grid { display: grid; gap: 32px; }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.2fr 1fr .8fr; } }
.foot-logo { width: 150px; height: auto; margin-bottom: 14px; }
.foot-h { font: 800 .8rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--red); margin-bottom: 14px; }
.foot-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; }
.foot-list a, .foot-list span { display: inline-flex; align-items: flex-start; gap: 10px; text-decoration: none; padding: 8px 0; min-height: 40px; }
.foot-list a:hover { color: var(--white); text-decoration: underline; }
.foot-list .i { margin-top: .2em; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid #2a2a30; margin-top: 32px; padding-top: 18px; font-size: .85rem; }
.contact-card .foot-list a, .contact-card .foot-list span { color: var(--ink); }

/* ---- print: the spec sheets become an always-current catalogue */
@media print {
  .top, .foot, .bar, .wa-float, .flip-band, .spec-tools, .page-head .actions, .spec .btn, dialog { display: none !important; }
  .spec { break-inside: avoid; border-color: #999; }
  body { font-size: 11pt; }
}

/* ---- motion. Scroll-driven and CSS-only (no JS, nothing on the main thread). Browsers without scroll
   timelines, and anyone whose device asks for reduced motion, get the static page above: same content. */
@property --deg { syntax: "<integer>"; inherits: false; initial-value: 0; }
:is(.cards, .certs, .passes, .ticks, .videos, .photos, .product-info, .mosaic, .steps, .clients) > :nth-child(2) { --i: 1; }
:is(.cards, .certs, .passes, .ticks, .videos, .photos, .product-info, .mosaic, .steps, .clients) > :nth-child(3) { --i: 2; }
:is(.cards, .certs, .passes, .ticks, .videos, .photos, .product-info, .mosaic, .steps, .clients) > :nth-child(4) { --i: 3; }
:is(.cards, .certs, .passes, .ticks, .videos, .photos, .product-info, .mosaic, .steps, .clients) > :nth-child(5) { --i: 4; }
:is(.cards, .certs, .passes, .ticks, .videos, .photos, .product-info, .mosaic, .steps, .clients) > :nth-child(6) { --i: 5; }
:is(.cards, .certs, .passes, .ticks, .videos, .photos, .product-info, .mosaic, .steps, .clients) > :nth-child(7) { --i: 6; }
:is(.cards, .certs, .passes, .ticks, .videos, .photos, .product-info, .mosaic, .steps, .clients) > :nth-child(8) { --i: 7; }

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
  /* flight progress along the bottom of the header */
  .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--red); transform-origin: 0 50%;
    animation: grow auto linear both; animation-timeline: scroll(root); }

  /* hero: the stage pins for ~2.4 screens of scroll while the plane flies a full loop and the captions change */
  .flight { height: 340svh; view-timeline: --flight block; }
  .flight-stage { position: sticky; top: 64px; height: calc(100svh - 64px); overflow: clip; }
  .flight-grid { height: 100%; align-content: start; }
  .flight-art { position: absolute; inset: 0; height: auto; --cy: 64%; }
  .flight-caps { display: grid; margin: 0; padding: 0; list-style: none; pointer-events: none; }
  .flight-caps li { grid-area: 1 / 1; display: grid; align-content: start; gap: 12px; font: 900 clamp(2.5rem, 9vw, 5.4rem)/.95 var(--font);
    text-transform: uppercase; letter-spacing: -.03em; animation: cap auto linear both; animation-timeline: --flight; animation-range: contain 12% contain 38%; }
  .flight-caps li:nth-child(2) { animation-range: contain 38% contain 64%; }
  .flight-caps li:nth-child(3) { animation-name: cap-last; animation-range: contain 64% contain 90%; }
  .cap-n { font: 800 .95rem/1 var(--mono); letter-spacing: .14em; color: var(--red-ink); }
  .flight-caps small { font: 600 .95rem/1.4 var(--mono); letter-spacing: 0; text-transform: none; color: var(--muted); }
  .flight-copy { animation: fly-out auto linear both; animation-timeline: --flight; animation-range: contain 0% contain 12%; }
  .loop-plan { animation: show auto linear both; animation-timeline: --flight; animation-range: contain 4% contain 14%; }
  .loop-trail { animation: draw auto linear both; animation-timeline: --flight; animation-range: contain 12% contain 88%; }
  .orbit { animation: orbit auto linear both; animation-timeline: --flight; animation-range: contain 12% contain 88%; }
  .plane { animation: depth auto linear both; animation-timeline: --flight; animation-range: contain 12% contain 88%; }
  .hud { display: flex; gap: .6em; position: absolute; left: var(--pad); bottom: 16px; margin: 0; color: var(--muted); text-transform: uppercase; }
  .hud-deg { color: var(--ink); counter-reset: deg var(--deg); animation: deg auto linear both; animation-timeline: --flight; animation-range: contain 12% contain 88%; }
  .hud-deg::after { content: counter(deg) "°"; }
  .scroll-hint { display: block; position: absolute; left: 50%; bottom: 16px; translate: -50% 0; margin: 0; color: var(--muted); text-transform: uppercase;
    animation: hide auto linear both; animation-timeline: --flight; animation-range: contain 0% contain 5%; }
  @media (min-width: 900px) {
    .flight-grid { align-content: center; }
    .flight-caps li { align-content: center; }
    .flight-art { position: relative; inset: auto; height: min(72svh, 600px); --cy: 50%; }
  }

  /* sections: things rise into place as they reach the screen, lightly staggered */
  .card, .video, .ticks li, .mosaic > *, .contact-card, .spec, .plate, .photos > *, .product-info > *, .statement, .work-item, .steps li, .clients li {
    animation: rise auto linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 8%) cover calc(20% + var(--i, 0) * 3%); }
  .video { animation-name: zoom; }
  .runway { animation: rise auto linear both, runway auto linear both; animation-timeline: view(), view(); animation-range: entry 0% cover 20%, entry 40% cover 32%; }
  .band-dark .mosaic > * { animation: drift auto linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .band-dark .mosaic > :nth-child(2) { animation-name: drift-back; }
  .certs li { animation: stamp auto linear both; animation-timeline: view(); animation-range: entry calc(30% + var(--i, 0) * 9%) cover calc(28% + var(--i, 0) * 3%); }
  .statement span { display: inline-block; color: #8a8a93; animation: ink auto linear both; animation-timeline: view(); animation-range: cover 25% cover 45%; }

  /* clients: the logos slide sideways while the band scrolls past (moves only when you scroll) */
  .marquee { display: flex; gap: 12px; margin-bottom: 28px; overflow: clip;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .marquee .clients, .marquee .clients[aria-hidden] { display: flex; flex: none; gap: 12px; margin: 0;
    animation: slide auto linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .marquee .clients li { width: 190px; }

  /* testimonials: each pass boards from below, then shrinks a little as the next one lands on top */
  .passes { view-timeline: --passes block; }
  .pass { animation: board auto linear both, stack auto linear both; animation-timeline: view(), --passes;
    animation-range: entry 0% entry 100%, contain calc(var(--i, 0) * 20%) contain calc(var(--i, 0) * 20% + 20%); }
  .pass:last-child { animation-name: board, none; }

  /* product pages: the same stage; the product stays upright and banks while it loops */
  .flight-product { display: block; height: 300svh; border-top: 1px solid var(--line); }
  .flight-product .flight-art { --cy: 56%; --d: min(78cqw, 80cqh); }  /* upright products are wide: keep them on screen */
  .flight-product .flight-caps li { font-size: clamp(1.9rem, 6.5vw, 3.8rem); letter-spacing: -.02em; }
  .flight-product .flight-caps li:first-child { animation-range: entry 60% contain 36%; }
  .flight-product .plane { width: calc(var(--d) * .5); height: calc(var(--d) * .42); object-fit: contain;
    animation: upright auto linear both; animation-timeline: --flight; animation-range: contain 12% contain 88%; }
  .flight-product .plane-window { width: calc(var(--d) * .38); height: auto; object-fit: cover; }
  @media (max-width: 899px) { .has-bar .hud { bottom: 88px; } }
  @media (min-width: 900px) { .flight-product .flight-art { --cy: 50%; --d: min(90cqw, 90cqh); } }
  @keyframes upright { 0% { rotate: 0deg; scale: 1; } 25% { rotate: -102deg; } 50% { rotate: -180deg; scale: .62; } 75% { rotate: -258deg; } 100% { rotate: -360deg; scale: 1; } }

  @keyframes grow { from { scale: 0 1; } }
  @keyframes fly-out { to { opacity: 0; translate: 0 -56px; visibility: hidden; } }
  @keyframes cap { 0% { opacity: 0; translate: 0 48px; } 18%, 82% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -48px; } }
  @keyframes cap-last { 0% { opacity: 0; translate: 0 48px; } 25%, 100% { opacity: 1; translate: 0 0; } }
  @keyframes show { from { opacity: 0; } }
  @keyframes hide { to { opacity: 0; } }
  @keyframes draw { from { stroke-dashoffset: 100; } }
  @keyframes orbit { to { rotate: 360deg; } }
  @keyframes depth { 50% { scale: .62; } }
  @keyframes deg { to { --deg: 360; } }
  @keyframes rise { from { opacity: 0; translate: 0 44px; } }
  @keyframes zoom { from { opacity: 0; scale: .86; } }
  @keyframes runway { from { background-size: 0% 3px; } }
  @keyframes drift { from { translate: 0 36px; } to { translate: 0 -36px; } }
  @keyframes drift-back { from { translate: 0 -24px; } to { translate: 0 24px; } }
  @keyframes stamp { 0% { opacity: 0; scale: 1.7; rotate: -12deg; } 70% { opacity: 1; scale: .95; rotate: 2deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
  @keyframes slide { from { translate: 4% 0; } to { translate: calc(-100% - 12px) 0; } }
  @keyframes board { from { opacity: 0; translate: 0 90px; rotate: -3deg; } }
  @keyframes stack { to { scale: .92; } }
  @keyframes ink { to { color: var(--ink); } }
}
}