/* ==========================================================================
   Fly4Future — redesign 2026
   Design tokens are taken 1:1 from the Figma file (page 🌐 WWW).
   ========================================================================== */

:root {
  --black: #1b1d1a;
  --orange: #ff6927;
  --cyan: #8ee1ef;
  --bg: #e9e9e9;
  --white: #fff;

  --line: rgba(27, 29, 26, .16);
  --line-soft: rgba(27, 29, 26, .09);
  --muted: rgba(27, 29, 26, .55);
  --muted-dark: rgba(255, 255, 255, .74);

  --container: 1326px;
  --gutter: 57px;
  --grid-pitch: 36px;

  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--black);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.8;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-weight: 500; margin: 0; letter-spacing: 0; }
h1 { font-size: 72px; line-height: 1; }
h2 { font-size: 48px; line-height: 1; }
h3 { font-size: 32px; line-height: 1.3; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* the padding is a safety gutter on narrow screens; the +32 keeps the content
   box at exactly the 1326 px the design is drawn on */
.container { width: 100%; max-width: calc(var(--container) + 32px); margin-inline: auto; padding-inline: 16px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--black); color: #fff; padding: 10px 16px; font-family: var(--mono);
}
.skip-link:focus { left: 0; }

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* ---------- Shared bits ------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.eyebrow-cyan { color: var(--cyan); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; line-height: 1; text-transform: uppercase;
  padding: 13px 16px; border: 0; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: #e6551a; }
.btn-black { background: var(--black); color: #fff; }
.btn-black:hover { background: #33372f; }

.btn-split { display: inline-flex; align-items: stretch; font-family: var(--mono); font-size: 14px; text-transform: uppercase; }
.btn-split-label { background: var(--orange); color: #fff; padding: 17px 26px; line-height: 1; display: flex; align-items: center; transition: background-color .2s ease; }
.btn-split-icon  { background: var(--black); color: #fff; display: flex; align-items: center; justify-content: center; width: 62px; }
.btn-split:hover .btn-split-label { background: #e6551a; }

.sq-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--black); color: #fff; border: 0; cursor: pointer; transition: background-color .2s ease;
}
.sq-btn:hover { background: #33372f; }
.sq-btn:disabled { opacity: .35; cursor: default; }

.arrow {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--black); color: #fff; transition: background-color .2s ease;
}
.arrow-orange { background: var(--orange); }

/* Technical grid backdrop, pitch measured from the design (36 px) */
.gridded { position: relative; }
.gridded::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: var(--grid-pitch) var(--grid-pitch);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.gridded > * { position: relative; z-index: 1; }

/* ---------- Header ------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 96px;
  max-width: none;
  padding-inline: var(--gutter);
}
.logo img { width: 78px; height: 38px; }

.nav-list { display: flex; align-items: center; gap: 48px; }
.nav-list > li { position: relative; }
.nav-list a:not(.btn), .nav-toggle {
  font-family: var(--mono); font-size: 14px; line-height: 1; text-transform: uppercase;
  color: var(--black); background: none; border: 0; padding: 0; cursor: pointer;
  white-space: nowrap; transition: color .2s ease;
}
.nav-list a:not(.btn):hover, .nav-toggle:hover { color: var(--orange); }

.nav-toggle { display: inline-flex; align-items: center; gap: 7px; }
.nav-plus { display: inline-block; transition: transform .2s ease; }

.subnav {
  position: absolute; top: 100%; left: -22px; z-index: 2;
  min-width: 218px; margin-top: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 16px 38px rgba(27, 29, 26, .15);
  padding: 6px 0;
  display: none;
}
/* the panel hangs 20 px below the toggle — this bridges the gap so the pointer
   can travel into it without crossing dead space */
.subnav::before { content: ""; position: absolute; inset: -21px 0 100% 0; }

.nav-list .subnav li a {
  display: block; padding: 13px 22px; line-height: 1.2;
  transition: background-color .18s ease, color .18s ease;
}
.nav-list .subnav li a:hover { background: var(--black); color: #fff; }
.nav-list .subnav li a[aria-current="page"] { color: var(--orange); }
.nav-list .subnav li a[aria-current="page"]:hover { color: #fff; }

.has-sub.is-open .subnav { display: block; }
.has-sub.is-open .nav-toggle { color: var(--orange); }
.has-sub.is-open .nav-plus { transform: rotate(45deg); }

/* on a real pointer the menu also drops on hover, as one expects of a menu bar */
@media (hover: hover) and (min-width: 1101px) {
  .has-sub:hover .subnav { display: block; }
  .has-sub:hover .nav-toggle { color: var(--orange); }
  .has-sub:hover .nav-plus { transform: rotate(45deg); }
}

.burger { display: none; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; height: 2px; background: var(--black); margin: 5px 0; transition: transform .25s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { background: var(--white); border-top: 1px solid var(--line-soft); padding: 8px 24px 24px; }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav a:not(.btn) {
  display: block; padding: 14px 0; font-family: var(--mono); font-size: 15px; text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav .btn { margin-top: 18px; align-self: flex-start; }

/* ---------- Hero -------------------------------------------------------- */

.hero { padding-top: 57px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 809fr) minmax(0, 517fr);
  border: 1px solid var(--line);
  border-bottom: 0;
}
.hero-intro { padding: 51px 57px 40px; display: flex; flex-direction: column; gap: 12px; }
.wordmark { width: 98px; height: auto; }
.hero-lead {
  padding: 74px 35px 40px 47px;
  border-left: 1px solid var(--line);
}

.hero-figure { margin: 0; border: 1px solid var(--line); border-bottom: 0; }
.hero-figure img { width: 100%; }

.ndaa {
  display: grid; grid-template-columns: 128px 1fr;
  border: 1px solid var(--line);
}
.ndaa-seal { display: grid; place-items: center; background: var(--white); border-right: 1px solid var(--line); padding: 18px; }
.ndaa-seal img { width: 88px; height: 88px; }
.ndaa p {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.85; text-transform: uppercase;
  padding: 28px 40px; letter-spacing: 0;
}

/* ---------- Services ---------------------------------------------------- */

.services { padding: 118px 0 96px; }
.services .eyebrow { margin-left: 96px; }
.services h2 { margin: 18px 0 62px 96px; }

.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; padding: 0 96px; }
.service-card a { display: block; background: var(--white); }
.service-media { display: block; background: var(--black); aspect-ratio: 334 / 260; overflow: hidden; }
.service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.service-card a:hover .service-media img { transform: scale(1.04); }

.service-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px 18px 24px;
}
.service-name { font-size: 18px; line-height: 1.35; }
.service-card.is-accent a { box-shadow: inset 0 0 0 1px var(--orange); }

/* ---------- Awards ------------------------------------------------------ */

.awards { padding: 40px 0 104px; overflow: hidden; }
.awards-inner { display: grid; grid-template-columns: 400px minmax(0, 1fr); align-items: center; gap: 24px; }
.awards-head .eyebrow { margin-bottom: 14px; }
.awards-head h2 { font-size: 32px; line-height: 1.2; }

.awards-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* the gap between groups must beat the wreath-to-text gap, or neighbouring
   wreaths read as one pair */
.awards-track { display: flex; gap: 32px; width: max-content; animation: slide-x 44s linear infinite; }
.awards:hover .awards-track { animation-play-state: paused; }

.award {
  position: relative; flex: 0 0 auto; width: 171px; text-align: center;
  padding: 4px 44px;
  font-family: var(--sans); font-size: 10px; line-height: 1.45;
}
/* laurel wreath lifted straight out of the Figma export — the sprite is the
   left-hand wreath, so only the right one gets mirrored */
.award::before, .award::after {
  content: ""; position: absolute; top: 50%; width: 44px; height: 95px;
  background: url("../img/laurel.png") center / contain no-repeat;
}
.award::before { left: 0; transform: translateY(-50%); }
.award::after  { right: 0; transform: translateY(-50%) scaleX(-1); }

.laurel { display: block; font-family: var(--sans); font-size: 13px; line-height: 1.2; }
.award-name { display: block; margin: 4px 0 6px; }
.award-year { display: block; font-family: var(--sans); font-size: 13px; }

@keyframes slide-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Products ---------------------------------------------------- */

.products { padding: 40px 0 120px; overflow: hidden; }
.products-inner { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 42px; align-items: start; }
.products-head { padding-top: 96px; }
.products-head .eyebrow { margin-bottom: 16px; }
.products-head h2 { font-size: 56px; line-height: 1.08; margin-bottom: 26px; }
.products-lead { max-width: 260px; margin-bottom: 26px; }

.products-slider { position: relative; padding-top: 56px; }
/* the last card is clipped by the container edge — fading it reads as "there
   is more", not as a rendering fault */
.product-track {
  -webkit-mask-image: linear-gradient(90deg, #000 88%, rgba(0, 0, 0, .15));
          mask-image: linear-gradient(90deg, #000 88%, rgba(0, 0, 0, .15));
}
.slider-nav { position: absolute; top: 0; right: 0; display: flex; gap: 8px; }

.product-track {
  display: flex; gap: 32px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.product-track::-webkit-scrollbar { display: none; }

.product-card { position: relative; flex: 0 0 336px; scroll-snap-align: start; background: var(--white); }
.product-media { position: relative; background: #a9a9a9; aspect-ratio: 320 / 261; overflow: hidden; }
.product-media > img:not(.badge) { width: 100%; height: 100%; object-fit: cover; }
.product-media .badge { position: absolute; top: 14px; left: 14px; width: 48px; height: 48px; }

.product-body { padding: 20px 22px 24px; }
.product-tag { font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--muted); }
.product-body h3 { font-size: 26px; margin: 6px 0 14px; }
/* the design draws no button on the slider cards, so the whole card is the link */
.product-body h3 > a { color: inherit; }
.product-body h3 > a::after { content: ""; position: absolute; inset: 0; }
.product-card:hover .product-body h3 > a { color: var(--orange); }

.specs { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.4; }
.specs > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line-soft); }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; text-transform: uppercase; }

/* ---------- Trusted by -------------------------------------------------- */

.trusted { padding: 20px 0 64px; overflow: hidden; }
.trusted-head { text-align: center; margin-bottom: 34px; }
.trusted-head .eyebrow { margin-bottom: 10px; }
.trusted-head h2 { font-size: 34px; }

/* the strip keeps to the container like everything else — left full-width it
   spills far past the layout on wide monitors */
.logo-marquee { overflow: hidden; max-width: var(--container); margin-inline: auto; }
.logo-track { display: flex; align-items: center; gap: 77px; width: max-content; animation: slide-x 38s linear infinite; }
/* sized per logo rather than by a shared max-height — the square TAČR badge and
   the T-Mobile wordmark sit at different heights in the design */
.logo-track img { width: auto; height: 44px; filter: grayscale(1); opacity: .77; transition: filter .3s ease, opacity .3s ease; }
.logo-track img[src$="logo-tmobile.webp"] { height: 23px; }
/* one logo is shown in full colour in the design */
.logo-track li:nth-child(4) img { filter: none; opacity: 1; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }

/* ---------- Full-width band figure -------------------------------------- */

.band-figure { margin: 0; }
.band-figure img { width: 100%; max-height: 400px; object-fit: cover; }

/* ---------- Expertise (dark) -------------------------------------------- */

/* the dark plate is the width of the container in the design, not the viewport
   — it lines up with the photo above it */
.expertise > .container {
  max-width: var(--container);
  padding: 92px 0 104px;
  background: var(--black);
  background-image: url("../img/noise.webp");
  background-size: 250px;
  color: #fff;
}
.expertise-inner { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 80px; align-items: start; }
.expertise-head { padding-left: 96px; }
.expertise-head .eyebrow { margin-bottom: 18px; }
.expertise-head h2 { margin-bottom: 26px; }
.expertise-lead { color: var(--muted-dark); max-width: 400px; }

.accordion { padding-right: 96px; }
.acc-item { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.acc-item:first-child { border-top: 1px solid rgba(255, 255, 255, .22); }

.acc-head {
  width: 100%; display: flex; align-items: center; gap: 20px;
  background: none; border: 0; color: var(--cyan); cursor: pointer;
  font-family: var(--mono); font-size: 14px; text-transform: uppercase; text-align: left;
  padding: 25px 0;
  transition: color .2s ease;
}
.acc-head:hover { color: #fff; }
.acc-num { flex: 0 0 auto; }
.acc-title { flex: 1; text-align: right; }
.acc-caret { flex: 0 0 auto; display: inline-flex; transition: transform .25s ease; }

.acc-item.is-open .acc-head { color: var(--orange); }
/* the open row points down at its panel, as drawn in Figma — so the closed
   state is the rotated one */
.acc-caret { transform: rotate(180deg); }
.acc-item.is-open .acc-caret { transform: none; }

.acc-panel { padding: 4px 0 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* [hidden] must beat the display above, otherwise every panel renders open */
.acc-panel[hidden] { display: none; }
.acc-panel p { color: rgba(255, 255, 255, .86); max-width: 580px; }

/* ---------- Team -------------------------------------------------------- */

.team { padding: 96px 0; }
/* the photo is inset from the container by one 96 px gutter in the design */
.team-card { position: relative; margin-inline: 96px; }
.team-card > img { width: 100%; height: 560px; object-fit: cover; }
/* Figma leaves the photo untouched — the white type sits straight on it, so the
   only help it gets is a soft shadow for the crops the desktop frame never shows */
.team-overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; color: #fff; padding: 24px;
  text-shadow: 0 1px 14px rgba(20, 22, 20, .45);
}
.team-overlay h2 { font-size: 44px; }
.team-overlay p { max-width: 520px; }
.team-overlay .btn { margin-top: 10px; }

/* ---------- Drone builder ----------------------------------------------- */

.builder { padding: 40px 0 120px; }
.builder-inner {
  display: grid;
  grid-template-columns: minmax(0, 737px) minmax(0, 1fr);
  grid-template-areas:
    "head drone"
    "figure figure"
    "text  list";
  /* the whole block is inset by one grid square from the container in Figma;
     .container already carries 16 px of its own, hence 52 rather than 36 */
  padding-inline: 52px;
}
.builder-head { grid-area: head; background: var(--bg); margin-left: 53px; padding: 56px 60px 44px 60px; }
.builder-head .eyebrow { margin-bottom: 18px; }

/* Figma draws the drone 900 px wide, flush with the container edge (so it breaks
   out of the block's 36 px inset) and dropped far enough that the rotors reach
   over the headline panel and down onto the component photo */
.builder-drone {
  grid-area: drone; align-self: end; justify-self: end;
  /* 736 px wide, right edge flush with the container (so it clears the block's
     52 px inset), dropped until the rotors sit over the component photo */
  width: 736px; max-width: none; position: relative; z-index: 1;
  margin-right: -36px; top: 88px;
}

/* Figma leaves 80 px between the headline panel and the photo */
.builder-figure { grid-area: figure; margin: -10px 0 0; }
.builder-figure img { width: 100%; max-width: 899px; aspect-ratio: 899 / 470; object-fit: cover; }

.builder-text { grid-area: text; background: var(--bg); padding: 34px 60px 0 113px; }
.builder-text p { max-width: 460px; margin-bottom: 34px; font-size: 19px; line-height: 34px; }
/* the CTA hangs one grid square left of the paragraph, as in the design */
.builder-text .btn-split { margin-left: -36px; }
/* the builder CTA is the large variant — 70 px tall in the design */
.builder-text .btn-split-label { padding: 28px 42px; }
.builder-text .btn-split-icon { width: 71px; }

.builder-list {
  grid-area: list; align-self: start; margin: 34px 0 0 -58px;
  background: var(--black); color: #fff; padding: 26px 34px;
  font-family: var(--mono); font-size: 13px; line-height: 2.15; text-transform: uppercase;
}
.builder-list li { position: relative; padding-left: 16px; }
.builder-list li::before { content: "•"; position: absolute; left: 0; }

/* ---------- Digital hub ------------------------------------------------- */

.hub { padding: 90px 0 110px; text-align: center; }
.hub-inner { display: flex; flex-direction: column; align-items: center; }
.hub .wordmark { margin-bottom: 6px; }
.hub-title {
  font-family: var(--mono); font-size: 157px; line-height: 1; font-weight: 400; letter-spacing: -.02em;
  /* the lid stops at the baseline: only the g's descender goes behind it, the
     letterforms stay whole */
  margin-bottom: -24px;
}
.hub-shot { width: min(100%, 610px); margin-bottom: 34px; }
.hub-lead { max-width: 600px; margin-bottom: 30px; }

/* ---------- News -------------------------------------------------------- */

.news { padding: 20px 0 110px; }
.news-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
}
.news-head { grid-column: span 2; padding: 46px 52px 40px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.news-head .eyebrow { margin-bottom: 16px; }
.news-cta { display: grid; place-items: center; background: var(--cyan); border-bottom: 1px solid var(--line); padding: 40px 24px; }

/* text is centred in the plain cards and pinned to the top where a photo takes
   the bottom edge — same rule as the article archive */
.news-card { padding: 44px 40px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.news-card.has-media { justify-content: flex-start; padding-bottom: 0; }
.news-card:last-child { border-right: 0; }
.news-date { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.news-card h3 { font-size: 27px; line-height: 1.25; margin-bottom: 22px; }
.news-card h3 a:hover { color: var(--orange); }
.news-card > img { margin: auto -40px 0; width: calc(100% + 80px); max-width: none; height: 148px; object-fit: cover; }

.read-more {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px;
  font-family: var(--mono); font-size: 12.5px; text-transform: uppercase;
}
.read-more .arrow { width: 26px; height: 26px; flex-basis: 26px; }

/* ---------- Contact ----------------------------------------------------- */

.contact { padding: 20px 0 120px; }
.contact-card { max-width: 916px; margin-inline: auto; border: 1px solid var(--line); background: var(--bg); }
.contact-tabs { display: grid; grid-template-columns: 63% 1fr; border-bottom: 1px solid var(--line); }
.contact-tabs h2 { background: var(--black); color: #fff; padding: 46px 34px; font-size: 44px; }
.contact-tab-label { display: grid; place-items: center; font-family: var(--mono); font-size: 14px; text-transform: uppercase; }

.contact-form { padding: 68px 106px 42px; display: flex; flex-direction: column; gap: 16px; }
.field input, .field textarea {
  width: 100%; background: var(--white); border: 0; padding: 10px 18px;
  font-family: var(--mono); font-size: 14px; color: var(--black);
  text-transform: uppercase;
}
.field textarea { resize: vertical; min-height: 210px; text-transform: none; font-family: var(--sans); }
.field input::placeholder, .field textarea::placeholder { color: var(--black); opacity: 1; text-transform: uppercase; font-family: var(--mono); }

.consent-note { font-family: var(--mono); font-size: 12.5px; }
.consent-note a { text-decoration: underline; }
.checkbox { display: flex; align-items: flex-start; gap: 12px; font-family: var(--mono); font-size: 12.5px; }
.checkbox input {
  width: 15px; height: 15px; margin: 3px 0 0; flex: 0 0 15px;
  appearance: none; -webkit-appearance: none;
  /* cyan per the UI kit and three of the five page renders; the contact and
     get-quote frames draw it white, which reads as an oversight in the design */
  background: var(--cyan); border: 0; cursor: pointer;
}
/* the box stays cyan when ticked — Figma never draws it dark, only the check is */
.checkbox input:checked {
  background: var(--cyan) no-repeat center /9px 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7'%3E%3Cpath d='M1 3.4 3.3 5.7 8 1' fill='none' stroke='%231b1d1a' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
}
.checkbox a { text-decoration: underline; }

.captcha-slot { display: flex; justify-content: center; margin: 4px 0 0; }
.captcha-box {
  display: flex; align-items: center; gap: 12px;
  width: 300px; height: 74px; padding: 0 12px 0 14px;
  background: #f9f9f9; border: 1px solid #d3d3d3; border-radius: 3px;
  font-family: var(--sans); font-size: 14px; color: #222; cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, .08);
}
.captcha-check {
  width: 28px; height: 28px; flex: 0 0 28px; margin: 0;
  appearance: none; -webkit-appearance: none;
  border: 2px solid #c1c1c1; border-radius: 2px; background: #fff; cursor: pointer;
}
.captcha-check:checked {
  background: #fff no-repeat center /16px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6 6 10.5 14.5 1.5' fill='none' stroke='%2309a35a' stroke-width='2.4'/%3E%3C/svg%3E");
}
.captcha-check:focus-visible { outline: 2px solid #4285f4; outline-offset: 2px; }
.captcha-label { text-transform: none; }
.captcha-mark { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.captcha-brand { font-size: 10px; color: #9aa0a6; letter-spacing: .01em; }
.captcha-legal { font-size: 8px; color: #9aa0a6; }

.btn-submit { align-self: center; margin-top: 6px; padding: 11px 22px; }

/* ---------- Footer ------------------------------------------------------ */

.site-footer {
  background: var(--black);
  background-image: url("../img/noise.webp");
  background-size: 250px;
  color: #fff;
  padding: 88px 0 46px;
}
/* column ratios and the deep gap under the nav are measured off the design */
.footer-top { display: grid; grid-template-columns: 3.2fr 1.67fr 1.67fr 1fr; gap: 40px; padding-bottom: 256px; }
.footer-logo { display: flex; align-items: center; gap: 16px; font-size: 30px; margin-bottom: 26px; }
.footer-logo img { width: 98px; height: auto; }
.footer-logo sup { font-size: .42em; vertical-align: super; }
.site-footer address { font-style: normal; line-height: 1.7; }

.footer-col h3 { font-size: 22px; margin-bottom: 20px; }
.footer-col h3.mt { margin-top: 44px; }
.footer-col li a {
  display: block; padding: 4px 0;
  font-family: var(--mono); font-size: 13px; text-transform: uppercase;
  transition: color .2s ease;
}
.footer-col li a:hover { color: var(--orange); }

.footer-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .3);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.footer-links { display: flex; gap: 36px; flex-wrap: wrap; }
.footer-links a { display: inline-flex; align-items: center; gap: 10px; }
.footer-social { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; font-family: var(--mono); font-size: 13px; text-transform: uppercase; }
.footer-social span { font-family: var(--sans); font-size: 16px; text-transform: none; }
.footer-social a:hover, .footer-links a:hover { color: var(--orange); }

.newsletter { display: flex; margin: 26px 0; max-width: 516px; }
.newsletter input {
  flex: 1; min-width: 0; background: #fff; border: 0; padding: 14px 16px;
  font-family: var(--mono); font-size: 13px; text-transform: uppercase; color: var(--black);
}
.newsletter input::placeholder { color: var(--black); opacity: 1; }
.newsletter button {
  background: var(--cyan); border: 0; cursor: pointer; padding: 14px 20px;
  font-family: var(--mono); font-size: 13px; text-transform: uppercase; color: var(--black);
  transition: background-color .2s ease;
}
.newsletter button:hover { background: #6fd3e6; }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .3);
}
.footer-legal { display: flex; gap: 78px; flex-wrap: wrap; font-family: var(--mono); font-size: 13px; text-transform: uppercase; }
.footer-legal a:hover { color: var(--orange); }

/* ==========================================================================
   Subpages — Custom Drones
   ========================================================================== */

.nav-list a.is-current:not(.btn) { color: var(--orange); }

/* ---------- Subpage hero ------------------------------------------------ */

.subpage-hero h1 { font-size: 64px; }
.subpage-hero .hero-intro { padding: 44px 57px 40px; }
.subpage-hero .hero-lead { padding: 62px 35px 40px 47px; }

/* the crumb rides inside the left column, so the lead panel runs full height */
.subpage-hero .hero-grid {
  grid-template-areas: "crumb lead" "intro lead";
  grid-template-rows: auto 1fr;
}
.subpage-hero .breadcrumb { grid-area: crumb; border: 0; border-bottom: 1px solid var(--line); }
.subpage-hero .hero-intro { grid-area: intro; }
.subpage-hero .hero-lead  { grid-area: lead; }

.breadcrumb {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-bottom: 0;
  padding: 30px 57px;
  font-family: var(--mono); font-size: 13px; text-transform: uppercase;
}
.breadcrumb img { width: 34px; height: auto; }
.crumb-sep, .breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--black); }

/* ---------- Flight-hours stat ------------------------------------------- */

.stat-band { border: 1px solid var(--line); border-top: 0; padding: 62px 57px 74px; }
/* the band is short, so the fade-out mask would swallow the whole grid */
.stat-band.gridded::before { -webkit-mask-image: none; mask-image: none; }
.stat { display: flex; align-items: flex-start; justify-content: flex-end; gap: 26px; }
.stat-value {
  font-family: var(--mono); font-weight: 500; font-size: 100px; line-height: 1;
  white-space: nowrap;
}
.stat-label {
  font-family: var(--mono); font-size: 13px; text-transform: uppercase;
  padding-top: 14px; white-space: nowrap;
}

/* ---------- Product grid (4-up, with a CTA per card) -------------------- */

.products-page { padding: 96px 0 110px; }
.section-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 32px;
  margin-bottom: 58px;
}
.section-head .eyebrow { margin-bottom: 16px; }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.product-grid .product-card { flex: none; background: var(--white); display: flex; flex-direction: column; }
.product-grid .product-body { display: flex; flex-direction: column; flex: 1; }
.card-cta { width: 100%; margin-top: 22px; }

/* ---------- Applications (reuses .news-grid frame) ---------------------- */

.applications { padding: 115px 0 0; }
.applications .news-head { padding: 94px 64px 78px; }
.app-card { padding: 40px 40px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.app-card:last-child { border-right: 0; }
.app-card h3 { font-size: 27px; line-height: 1.25; margin-bottom: 22px; }
.app-card h3 a:hover { color: var(--orange); }
.app-card p { margin-bottom: 26px; }
.app-card .read-more { margin-bottom: 34px; }
.app-card > img { margin: auto -40px 0; width: calc(100% + 80px); max-width: none; height: auto; }

/* ---------- Subpage blocks (services, research, about) ------------------
   The design never covered these three pages, so they are assembled from the
   parts it does define: the section head from Custom Drones, the numbered
   index from the dark expertise block, and the applications card grid. */

.section-lead { max-width: 810px; margin-bottom: 54px; font-size: 19px; line-height: 34px; }
.applications .section-lead { margin-bottom: 62px; }

.process { padding: 110px 0 20px; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.step-no { font-family: var(--mono); font-size: 13px; color: var(--muted); padding-top: 4px; }
.step-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: baseline; }
.step-name { font-size: 21px; line-height: 1.3; }
.step-text { color: var(--muted); }

.split { padding: 104px 0; }
.split-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.split-flip .split-media { order: -1; }
.split-copy h2 { font-size: 44px; line-height: 1.1; margin: 16px 0 26px; }
.split-copy p + p { margin-top: 20px; }
.split-media { margin: 0; }
.split-media img { width: 100%; height: auto; }

/* ---------- Comparison table ------------------------------------------- */

.compare { padding: 70px 0 100px; }
.compare-card { border: 1px solid var(--line); }
.compare-head { display: grid; grid-template-columns: 1fr 226px; border-bottom: 1px solid var(--line); }
.compare-head > div:first-child { padding: 46px 64px 52px; }
.compare-head .eyebrow { margin-bottom: 14px; }
.compare-head-empty { border-left: 1px solid var(--line); display: grid; place-items: center; padding: 24px; }

.compare-scroll { overflow-x: auto; }
/* the hint only makes sense once the table stops fitting */
.compare-hint { display: none; }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { text-align: center; }

.compare-table thead th { padding: 44px 12px 26px; font-weight: 400; vertical-align: bottom; }
.compare-table thead th:first-child { width: 22%; }
.compare-table thead img { width: 220px; max-width: 100%; height: auto; margin: 0 auto 20px; }
.compare-name { font-size: 24px; }

.compare-table tbody th, .compare-table tbody td {
  padding: 19px 12px; border-top: 1px solid var(--line);
}
.compare-table tbody th { font-weight: 400; text-align: left; padding-left: 92px; }
.compare-table tbody td { font-family: var(--mono); font-size: 13px; text-transform: uppercase; }

.mark { display: inline-block; width: 20px; height: 20px; border-radius: 50%; position: relative; }
.mark-yes { background: #22c55e; }
.mark-no  { background: #ef4444; }
.mark::before, .mark::after {
  content: ""; position: absolute; background: #fff; border-radius: 1px;
}
.mark-yes::before { width: 3px; height: 6px;  transform: rotate(-45deg); left: 6px;  top: 10px; }
.mark-yes::after  { width: 3px; height: 11px; transform: rotate(35deg);  left: 11px; top: 4px; }
.mark-no::before  { width: 3px; height: 12px; transform: rotate(45deg);  left: 8.5px; top: 4px; }
.mark-no::after   { width: 3px; height: 12px; transform: rotate(-45deg); left: 8.5px; top: 4px; }

/* the parameter column stays put while the drone columns scroll sideways */
.compare-table th:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--bg);
}

/* the catalogue mixes product shots and photos — a fixed box keeps the names
   on one line instead of floating with each image's aspect ratio */
.compare-table thead th { position: relative; vertical-align: top; }
.compare-table thead img { height: 150px; object-fit: contain; }
.compare-detail {
  display: block; margin-top: 8px;
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--muted);
}
.compare-detail:hover { color: var(--orange); }

.compare-drop {
  position: absolute; top: 16px; right: 16px;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: none; border: 1px solid var(--line); color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.compare-drop:hover { background: var(--black); border-color: var(--black); color: #fff; }

/* group header rows split the table into Platform / Performance / … */
.compare-group th {
  text-align: left; padding: 16px 12px 16px 92px;
  background: var(--black); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .06em;
}
.compare-table .compare-group th:first-child { background: var(--black); }

.compare-table tbody td.compare-text { text-transform: none; font-size: 12.5px; }
.compare-table tbody td.is-empty { color: var(--muted); }
/* the winning cell keeps the readable text colour — orange type on the grey
   plate only reaches 2.4:1, so the accent lives in the rule underneath */
.compare-table tbody td.is-best { position: relative; font-weight: 500; }
.compare-table tbody td.is-best::after {
  content: ""; position: absolute; left: 50%; bottom: 14px;
  width: 26px; height: 2px; margin-left: -13px; background: var(--orange);
}

.compare-empty td { padding: 60px 24px; text-align: center; color: var(--muted); }

/* ---------- Comparison page: picker + toolbar --------------------------- */

.compare-tool { padding: 46px 0 100px; }

.pick-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  margin-bottom: 34px;
}
.pick-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--white); border: 1px solid var(--line);
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease;
}
.pick-card img { width: 100%; aspect-ratio: 220 / 157; object-fit: cover; }
.pick-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.pick-tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--muted); }
.pick-name { font-size: 19px; line-height: 1.25; }

.pick-mark {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--white); color: var(--black);
  font-family: var(--mono); font-size: 15px; line-height: 1;
}
.pick-card:hover { border-color: var(--black); }
.pick-card.is-picked { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.pick-card.is-picked .pick-mark { background: var(--orange); color: #fff; }
/* the limit is reached — this card can only be picked after dropping another */
.pick-card.is-full { opacity: .45; cursor: not-allowed; }
.pick-card.is-full:hover { border-color: var(--line); }
.pick-card:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }

.compare-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 16px 20px; margin-bottom: 26px;
  background: var(--white); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px; text-transform: uppercase;
}
.compare-toolbar label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.compare-toolbar input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--orange); }
.compare-toolbar input:disabled + span { color: var(--muted); }
.compare-toolbar .tool-btn {
  background: none; border: 1px solid var(--line); color: var(--black);
  padding: 8px 12px; font: inherit; text-transform: inherit; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.compare-toolbar .tool-btn:hover { background: var(--black); border-color: var(--black); color: #fff; }
.compare-count { margin-left: auto; color: var(--muted); text-transform: none; }

.compare-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 28px;
}
.compare-cta-label { font-family: var(--mono); font-size: 13px; text-transform: uppercase; color: var(--muted); margin-right: 6px; }

.compare-note {
  margin-top: 22px; font-family: var(--mono); font-size: 12px; color: var(--muted);
}

/* ---------- Additional services ---------------------------------------- */

.add-services { padding: 20px 0 110px; }
.add-services .eyebrow { margin-bottom: 16px; }
.add-services > .container > h2 { margin-bottom: 46px; }

/* the card is inset from the container; the cyan block breaks back out of it
   on the left and overhangs the frame top and bottom */
.svc-card {
  display: grid; grid-template-columns: 231px minmax(0, 1fr);
  border: 1px solid var(--line);
  margin-left: 66px;
}
.svc-aside {
  background: var(--cyan);
  display: grid; place-items: center; padding: 40px 24px;
  margin: 77px -1px -19px -66px;
}
/* the divider only runs alongside the cyan block — the empty cell next to the
   first row reads as page, not as an empty box */
.svc-list { border-left: 0; }
.svc-list .acc-item + .acc-item { border-left: 1px solid var(--line); }

.svc-head {
  color: var(--black); gap: 40px; padding: 34px 44px;
  font-family: var(--sans); font-size: 32px; text-transform: none;
}
.svc-head:hover { color: var(--orange); }
.svc-num { flex: 0 0 auto; }
.svc-title { flex: 1; text-align: left; }
.svc-list .acc-item { border-bottom: 1px solid var(--line); }
.svc-list .acc-item:first-child { border-top: 0; }
.svc-list .acc-item:last-child { border-bottom: 0; }
.svc-list .acc-item.is-open .svc-head { color: var(--black); }

.svc-panel { padding: 0 44px 38px 124px; }
.svc-panel p { color: var(--black); max-width: 700px; }

/* ==========================================================================
   Subpage — drone detail (RoboCore)
   ========================================================================== */

/* ---------- Hero: breadcrumb + title on the left, photo on the right ----- */

.detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 809fr) minmax(0, 517fr);
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-bottom: 0;
}
.detail-crumb { border: 0; border-bottom: 1px solid var(--line); padding: 26px 44px; }
.detail-intro { padding: 46px 44px 40px; }
.detail-intro .eyebrow { margin-bottom: 22px; }
.detail-intro h1 { font-size: 72px; }

.detail-shot { grid-column: 2; grid-row: 1 / span 2; margin: 0; border-left: 1px solid var(--line); }
.detail-shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Key-feature rows ------------------------------------------- */

.feature-rows { border: 1px solid var(--line); }
.feature-rows > div { display: grid; grid-template-columns: 226px minmax(0, 1fr); }
.feature-rows > div + div { border-top: 1px solid var(--line); }
.feature-rows dt {
  display: flex; align-items: center;
  background: var(--black) url("../img/noise.webp") 0 0 / 250px;
  color: #fff; padding: 24px 28px;
  font-family: var(--mono); font-size: 14px; line-height: 1.3; text-transform: uppercase;
}
.feature-rows dd {
  display: flex; align-items: center;
  margin: 0; background: var(--white); padding: 22px 28px;
}

/* ---------- Headline band with a CTA cell ------------------------------- */

.detail-band { padding: 0; }
/* the marquee sits in a much taller band on this page than on the home page */
.trusted-wide { padding: 0; min-height: 269px; display: grid; align-content: center; }
.band-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 229px;
  border: 1px solid var(--line);
}
.band-head-text { padding: 72px 64px; }
.band-head-text .eyebrow { margin-bottom: 20px; }
.band-head-cta { display: grid; place-items: center; border-left: 1px solid var(--line); padding: 20px; }

.btn-split-light .btn-split-label { padding: 11px 13px; }
.btn-split-light .btn-split-icon { width: 34px; background: var(--white); color: var(--black); }

/* ---------- Exploded view with hotspots --------------------------------- */

.explode-card {
  position: relative;
  border: 1px solid var(--line); border-top: 0;
  padding: 81px 0 78px;
}
/* the grid only shows around the drone, so the straight top-to-bottom fade
   used elsewhere is swapped for a radial one */
.explode-card.gridded::before {
  -webkit-mask-image: radial-gradient(ellipse 46% 40% at 46% 34%, #000 45%, transparent 85%);
          mask-image: radial-gradient(ellipse 46% 40% at 46% 34%, #000 45%, transparent 85%);
}

.explode-stage { position: relative; width: 72.85%; margin-left: 12.75%; }
.explode-img { width: 100%; }

.hotspot {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 1.5px solid var(--black); cursor: pointer;
}
.hotspot::before {
  content: ""; width: 22px; height: 22px; background: var(--orange);
  transition: transform .2s ease;
}
.hotspot:hover::before, .hotspot[aria-expanded="true"]::before { transform: scale(1.12); }
/* the marker stays the size the design draws it; this only widens the tap area */
.hotspot::after { content: ""; position: absolute; inset: -10px; }

.hotspot-panel {
  position: absolute; top: 90px; right: 21px; z-index: 3;
  width: 647px; max-width: calc(100% - 42px);
  background: var(--black) url("../img/noise.webp") 0 0 / 250px;
  color: #fff; padding: 24px 30px 28px 27px;
}
.hotspot-panel[hidden] { display: none; }
.hotspot-title {
  display: flex; align-items: center; gap: 23px;
  font-family: var(--mono); font-size: 24px; line-height: 1; text-transform: uppercase;
}
.hotspot-dot { flex: 0 0 10px; width: 10px; height: 10px; background: var(--orange); }
.hotspot-slash { margin-left: auto; }
.hotspot-panel ul {
  margin: 20px 0 0; padding-left: 40px;
  font-family: var(--mono); font-size: 14px; line-height: 1.3; text-transform: uppercase;
}
.hotspot-panel li { position: relative; }
.hotspot-panel li::before { content: "•"; position: absolute; left: -14px; }
.hotspot-more {
  margin-top: 22px; padding-left: 33px;
  font-family: var(--mono); font-size: 14px; text-transform: uppercase;
}

.explode-copy { padding: 62px 94px 0; }
.explode-copy p { max-width: 884px; }
.explode-copy p + p { margin-top: 26px; }

/* ---------- NDAA statement ---------------------------------------------- */

.detail-ndaa { padding: 84px 0 0; }
.ndaa-card { display: grid; grid-template-columns: 318px minmax(0, 1fr); border: 1px solid var(--line); }
.ndaa-card .ndaa-seal { padding: 24px; }
.ndaa-card .ndaa-seal img { width: 220px; height: 220px; }
.ndaa-copy {
  padding: 45px 86px;
  font-family: var(--mono); font-size: 14px; line-height: 1.5; text-transform: uppercase;
}
.ndaa-copy p { max-width: 810px; }
.ndaa-copy p + p { margin-top: 21px; }

/* ---------- Split card: feature list + photo ---------------------------- */

.split-card {
  display: grid; grid-template-columns: minmax(0, 720fr) minmax(0, 606fr);
  border: 1px solid var(--line); border-top: 0;
}
.split-copy { padding: 82px 102px 82px 95px; }
.split-item + .split-item { margin-top: 40px; }
.split-item h3 { font-size: 24px; line-height: 1.3; margin-bottom: 4px; }

.split-figure { margin: 0; display: grid; place-items: center; padding: 96px 99px; border-left: 1px solid var(--line); }
.split-figure img { width: 408px; height: 410px; object-fit: cover; }

/* ---------- FAQ (dark card) --------------------------------------------- */

.faq { padding: 0 0 100px; }
.faq-card {
  display: grid; grid-template-columns: 352px minmax(0, 1fr);
  background: var(--black) url("../img/noise.webp") 0 0 / 250px;
  color: #fff; padding: 83px 93px 87px 95px;
}

.faq .acc-head { font-size: 16px; padding: 23px 0; }
/* the caret only shows on the open item, and it points down as in the design */
.faq .acc-caret { opacity: 0; }
.faq .acc-item.is-open .acc-caret { opacity: 1; transform: none; }
.faq .acc-panel { padding: 16px 0 66px; }
.faq .acc-item:last-child { border-bottom: 0; }
.faq .acc-panel p { max-width: none; }

/* ==========================================================================
   Subpage — articles archive
   ========================================================================== */

.archive-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  border: 1px solid var(--line);
}
.archive-hero-grid .detail-crumb { border-bottom: 1px solid var(--line); }
.archive-title { padding: 24px 44px 30px; }
.archive-title h1 { font-size: 64px; }

.search-cell {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 14px; padding: 0 0 8px;
  background: var(--black) url("../img/noise.webp") 0 0 / 250px;
  border-left: 1px solid var(--line);
}
.search-toggle { background: none; border: 0; color: #fff; cursor: pointer; padding: 10px; }
.search-toggle:hover { color: var(--orange); }
.search-form { width: 100%; padding: 0 16px; }
.search-form[hidden] { display: none; }
.search-form input {
  width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .4);
  color: #fff; padding: 6px 0;
  font-family: var(--mono); font-size: 13px; text-transform: uppercase;
}
.search-form input::placeholder { color: rgba(255, 255, 255, .6); }

/* the chips have no gap between them, so the white blocks read as one band */
.filter-chips { display: flex; flex-wrap: wrap; row-gap: 8px; margin-top: 6px; }
.chip {
  display: block; background: var(--white); color: var(--black);
  padding: 8px 11px;
  font-family: var(--mono); font-size: 14px; line-height: 1; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
.chip:hover, .chip.is-active { background: var(--black); color: #fff; }
.nav-list .nav-toggle.is-current { color: var(--orange); }

.archive { padding: 4px 0 110px; }
.article-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.article-card {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 442px; padding: 44px 30px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* a card with a photo pins it to the bottom edge, so its text sits at the top */
.article-card.has-media { justify-content: flex-start; padding-bottom: 0; }
.article-card .news-date { margin-bottom: 14px; }
.article-card h2 { font-size: 30px; line-height: 1.4; margin-bottom: 24px; }
.article-card h2 a:hover { color: var(--orange); }
.article-card .read-more { margin-bottom: 0; }
.article-card > img {
  margin: auto -30px 0; width: calc(100% + 60px); max-width: none; height: 138px; object-fit: cover;
}

.pager { display: flex; justify-content: center; gap: 12px; margin-top: 48px; }
.pager-page {
  display: grid; place-items: center; width: 38px; height: 36px;
  background: var(--white);
  font-family: var(--mono); font-size: 13px;
  transition: background-color .2s ease, color .2s ease;
}
.pager-page:hover, .pager-page.is-active { background: var(--black); color: #fff; }

/* ==========================================================================
   Subpage — contact
   ========================================================================== */

.contact-hero-grid {
  display: grid; grid-template-columns: minmax(0, 809fr) minmax(0, 517fr);
  border: 1px solid var(--line);
}
.contact-hero-grid .detail-crumb { border-bottom: 1px solid var(--line); }
.contact-note {
  grid-column: 2; grid-row: 1 / span 2;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 62px 47px 40px;
}
.contact-note a { text-decoration: underline; }
.contact-note a:hover { color: var(--orange); }

.billing {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 880fr) minmax(0, 446fr);
  border-top: 1px solid var(--line);
  padding: 66px 0 60px;
}
.billing-main { padding-left: 94px; }
.billing-main h2 { font-size: 44px; line-height: 1.1; margin-bottom: 42px; }
.billing address { font-style: normal; }
.billing-line { margin-top: 30px; }

.billing-side { padding-top: 158px; }
.billing-contact { font-size: 31px; line-height: 1.5; }
.billing-contact a:hover { color: var(--orange); }
.btn-split-dark .btn-split-label { background: var(--black); padding: 11px 13px; }
.btn-split-dark:hover .btn-split-label { background: #33372f; }
.btn-split-dark .btn-split-icon { width: 34px; background: var(--white); color: var(--black); }
.billing-side .btn-split { margin-top: 36px; }

/* ---------- People ------------------------------------------------------ */

.people-sec { padding: 91px 0 0; }
.people-sec > .container > h2 { margin-bottom: 37px; }
/* every group after the first gets air above it */
.people-sec > .container > h2.people-group { margin-top: 72px; }

.person {
  display: grid; grid-template-columns: 200px 448px minmax(0, 1fr);
  align-items: center;
  min-height: 200px;
  border: 1px solid var(--line);
}
.person + .person { border-top: 0; }
.person > img { width: 200px; height: 200px; object-fit: cover; align-self: stretch; }
.person-id { padding-left: 63px; }
.person-name { font-size: 28px; line-height: 1.3; }
.person-role { font-family: var(--mono); font-size: 14px; }
.person-mail { font-size: 24px; }
.person-mail a:hover { color: var(--orange); }

/* ---------- Prague office ----------------------------------------------- */

.office { padding: 96px 0 0; }
.office .eyebrow { margin-bottom: 18px; }
.office > .container > h2 { margin-bottom: 44px; }

.office-card {
  display: grid; grid-template-columns: minmax(0, 662fr) minmax(0, 664fr);
  min-height: 479px;
  border: 1px solid var(--line);
}
.office-info { padding: 146px 40px 60px 115px; }
.office-info h3 { font-size: 28px; margin-bottom: 26px; }
.office-info address { font-style: normal; line-height: 2.25; }

.office-map { margin: 28px 0 0; display: grid; }
.office-map a { display: block; height: 100%; }
.office-map img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Subpage — get quote
   ========================================================================== */

.quote-hero-grid {
  display: grid; grid-template-columns: minmax(0, 809fr) minmax(0, 517fr);
  border: 1px solid var(--line);
}
.quote-hero-grid .detail-crumb { border-bottom: 1px solid var(--line); }
.quote-hero-empty { grid-column: 2; grid-row: 1 / span 2; border-left: 1px solid var(--line); }

/* the card butts straight against the hero, so this section carries no top gap */
.quote-form-sec { padding: 0 0 128px; }
.quote-form-sec .contact-card { border-top: 0; }

/* ==========================================================================
   Subpages — legal text (privacy policy, marketing consent)
   ========================================================================== */

.legal-updated { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; color: var(--muted); }

.legal { padding: 0 0 110px; }
.legal-card {
  display: grid; grid-template-columns: 352px minmax(0, 1fr);
  border: 1px solid var(--line); border-top: 0;
}

.legal-toc { position: sticky; top: 116px; align-self: start; padding: 62px 40px 62px 64px; }
.legal-toc .eyebrow { margin-bottom: 22px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; }
.legal-toc li + li { margin-top: 12px; }
.legal-toc a {
  display: flex; gap: 12px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.4; text-transform: uppercase;
  transition: color .2s ease;
}
.legal-toc a:hover { color: var(--orange); }

.legal-body { border-left: 1px solid var(--line); padding: 62px 94px 74px; }
.legal-num { color: var(--orange); flex: 0 0 auto; }

.legal-sec + .legal-sec { margin-top: 54px; }
.legal-sec h2 {
  display: flex; gap: 16px;
  font-size: 28px; line-height: 1.2; margin-bottom: 18px;
  scroll-margin-top: 120px;
}
.legal-sec h2 .legal-num { font-family: var(--mono); font-size: 20px; padding-top: 5px; }
.legal-sec p + p, .legal-sec p + ul, .legal-sec p + dl,
.legal-sec ul + p, .legal-sec dl + p { margin-top: 18px; }
.legal-sec a:not(.legal-todo) { text-decoration: underline; }
.legal-sec a:hover { color: var(--orange); }

.legal-list { list-style: none; margin: 0; padding: 0; }
.legal-list li { position: relative; padding-left: 22px; }
.legal-list li + li { margin-top: 8px; }
.legal-list li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }

.legal-defs { margin: 0; }
.legal-defs > div { padding: 16px 0; border-top: 1px solid var(--line); }
.legal-defs > div:last-child { border-bottom: 1px solid var(--line); }
.legal-defs dt { font-family: var(--mono); font-size: 13px; text-transform: uppercase; }
.legal-defs dd { margin: 6px 0 0; }

/* left over for the client to fill in — deliberately loud so it cannot ship unnoticed */
.legal-todo {
  display: inline-block;
  background: rgba(255, 105, 39, .1); box-shadow: inset 0 0 0 1px var(--orange);
  padding: 2px 8px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
}
.legal-todo::before { content: "To do: "; color: var(--orange); }

/* ==========================================================================
   Responsive — the Figma file only ships the 1440 desktop frame, so the
   breakpoints below are derived from its layout (grid → single column).
   ========================================================================== */

@media (max-width: 1400px) {
  :root { --gutter: 32px; }
  .services .eyebrow, .services h2 { margin-left: 40px; }
  .service-cards { padding-inline: 40px; gap: 40px; }
  .expertise-head { padding-left: 40px; }
  .accordion { padding-right: 40px; }
  .expertise-inner { gap: 64px; }
  .team-card { margin-inline: 40px; }
}

@media (max-width: 1100px) {
  h1 { font-size: 54px; }
  h2 { font-size: 38px; }

  .nav-list { display: none; }
  .burger { display: block; }

  .hero-grid { grid-template-columns: 1fr; }
  .subpage-hero .hero-grid { grid-template-areas: "crumb" "intro" "lead"; grid-template-rows: auto; }
  .hero-lead { border-left: 0; border-top: 1px solid var(--line); padding: 32px 40px; max-width: none; }
  .hero-intro { padding: 36px 40px 32px; }

  .services { padding-top: 80px; }
  .service-cards { grid-template-columns: 1fr; gap: 28px; }

  .split-inner { grid-template-columns: 1fr; gap: 36px; }
  .split-flip .split-media { order: 0; }
  .split { padding: 72px 0; }
  .step-body { grid-template-columns: 1fr; gap: 8px; }

  .awards-inner { grid-template-columns: 1fr; }
  /* minmax(0,…) — a bare 1fr lets the slider track push the grid wider than
     the viewport and the whole page scrolls sideways */
  .products-inner { grid-template-columns: minmax(0, 1fr); }
  .products-head { padding-top: 0; }
  .products-head h2 { font-size: 44px; }
  .products-lead { max-width: none; }

  /* below the desktop layout the plate spans the viewport again */
  .expertise > .container { max-width: none; padding: 60px 24px 72px; }
  .expertise-inner { grid-template-columns: 1fr; gap: 42px; }
  .expertise-head { padding-left: 0; }
  .accordion { padding-right: 0; }

  .builder-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "drone" "figure" "text" "list"; padding-inline: 0; }
  .builder-head { margin-left: 0; padding: 40px 0 24px; }
  /* stacked layout — the drone no longer overlaps anything, so drop the offsets */
  .builder-drone { justify-self: center; width: 100%; max-width: 480px; margin-right: 0; top: 0; }
  .builder-figure { margin-top: 24px; }
  .builder-text { padding: 24px 0 0; }
  .builder-text p { max-width: none; }
  .builder-text .btn-split { margin-left: 0; }
  .builder-list { margin: 24px 0 0; }

  .hub-title { font-size: 96px; margin-bottom: -60px; }

  .news-grid { grid-template-columns: 1fr; }
  .news-head { grid-column: span 1; border-right: 0; }
  .news-cta { padding: 28px; }
  .news-card { border-right: 0; border-bottom: 1px solid var(--line); padding: 32px 28px; }
  .news-card > img { margin: 22px -28px 0; width: calc(100% + 56px); max-width: none; }

  .contact-form { padding: 40px 28px 44px; }
  .contact-tabs { grid-template-columns: 1fr; }
  .contact-tabs h2 { padding: 32px 26px; font-size: 34px; }
  .contact-tab-label { padding: 18px; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 44px 28px; padding-bottom: 56px; }
  .footer-legal { gap: 28px; }

  /* subpages */
  .subpage-hero h1 { font-size: 46px; }
  .subpage-hero .hero-intro { padding: 36px 40px 32px; }
  .subpage-hero .hero-lead { padding: 32px 40px; }
  .breadcrumb { padding: 22px 40px; }

  .stat-band { padding: 40px; }
  .stat { justify-content: flex-start; }
  .stat-value { font-size: 62px; }

  .section-head { flex-direction: column; gap: 24px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .app-card { border-right: 0; border-bottom: 1px solid var(--line); padding: 32px 28px; }
  .app-card > img { margin: 22px -28px 0; width: calc(100% + 56px); max-width: none; }

  .compare-head { grid-template-columns: 1fr; }
  .compare-head > div:first-child { padding: 32px 28px 36px; }
  .compare-head-empty { border-left: 0; border-top: 1px solid var(--line); justify-items: start; padding: 20px 28px; }
  .compare-table { min-width: 760px; }
  .compare-table tbody th { padding-left: 28px; }
  .compare-group th { padding-left: 28px; }

  /* only the first column fits on a phone, so say the table scrolls and fade
     its right edge to show there is more */
  .compare-card { position: relative; }
  .compare-card::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
    background: linear-gradient(90deg, rgba(233, 233, 233, 0), rgba(233, 233, 233, .92));
    pointer-events: none;
  }
  .compare-hint {
    display: flex; align-items: center; gap: 8px; margin-top: 12px;
    font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--muted);
  }

  .compare-tool { padding: 32px 0 72px; }
  .pick-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .compare-count { margin-left: 0; width: 100%; }

  .svc-card { grid-template-columns: 1fr; margin-left: 0; }
  .svc-aside { margin: 0; order: 2; padding: 28px 24px; }
  .svc-list { border-left: 0; border-bottom: 1px solid var(--line); }
  .svc-head { font-size: 24px; gap: 24px; padding: 26px 28px; }
  .svc-panel { padding: 0 28px 30px 28px; }

  /* drone detail */
  .trusted-wide { min-height: 0; padding: 44px 0 52px; }
  .detail-hero-grid { grid-template-columns: 1fr; }
  .detail-shot { grid-column: 1; grid-row: auto; border-left: 0; border-top: 1px solid var(--line); }
  .detail-shot img { height: 300px; }
  .detail-crumb, .detail-intro { padding: 26px 28px; }
  .detail-intro h1 { font-size: 46px; }

  .feature-rows > div { grid-template-columns: 1fr; }
  .feature-rows dd { padding: 22px 28px; }

  .band-head { grid-template-columns: 1fr; }
  .band-head-text { padding: 32px 28px 28px; }
  .band-head-cta { border-left: 0; border-top: 1px solid var(--line); justify-items: start; padding: 22px 28px; }

  .explode-card { padding: 40px 0 48px; }
  .explode-stage { width: 100%; margin-left: 0; }
  .hotspot-panel { position: static; width: auto; max-width: none; margin: 24px 28px 0; }
  .explode-copy { padding: 32px 28px 0; }

  .ndaa-card { grid-template-columns: 1fr; }
  .ndaa-card .ndaa-seal { border-right: 0; border-bottom: 1px solid var(--line); }
  .ndaa-copy { padding: 32px 28px; }

  .split-card { grid-template-columns: 1fr; }
  .split-copy { padding: 40px 28px; }
  .split-figure { border-left: 0; border-top: 1px solid var(--line); padding: 32px 28px; }
  .split-figure img { width: 100%; height: auto; max-width: 408px; }

  .faq-card { grid-template-columns: 1fr; padding: 40px 28px 48px; gap: 24px; }
  .faq-card > h2 { padding-top: 0; }
  .faq .acc-head { font-size: 13px; padding: 22px 0; }

  /* articles archive */
  .archive-hero-grid { grid-template-columns: 1fr; }
  .archive-title { padding: 20px 28px 28px; }
  .archive-title h1 { font-size: 46px; }
  .search-cell {
    grid-column: 1; grid-row: auto;
    flex-direction: row; align-items: center; justify-content: space-between;
    border-left: 0; border-top: 1px solid var(--line); padding: 10px 16px;
  }
  .search-form { padding: 0; max-width: 320px; }

  /* taller than the design so the filters stay comfortable tap targets */
  .chip { font-size: 12px; padding: 11px 10px; }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .article-card { min-height: 340px; padding: 32px 24px; }
  .article-card.has-media { padding-bottom: 0; }
  .article-card h2 { font-size: 24px; line-height: 1.3; }
  .article-card > img { margin-inline: -24px; width: calc(100% + 48px); }

  /* contact */
  .contact-hero-grid { grid-template-columns: 1fr; }
  .contact-note { grid-column: 1; grid-row: auto; border-left: 0; padding: 28px; }
  .billing { grid-template-columns: 1fr; gap: 36px; padding: 32px 28px 40px; }
  .billing-main { padding-left: 0; }
  .billing-main h2 { font-size: 32px; margin-bottom: 26px; }
  .billing-side { padding-top: 0; }
  .billing-contact { font-size: 22px; }

  .people-sec { padding-top: 56px; }
  .person { grid-template-columns: 140px minmax(0, 1fr); align-items: start; min-height: 0; }
  .person > img { width: 140px; height: 140px; }
  .person-id { padding: 24px 28px 0; }
  .person-mail { grid-column: 2; padding: 8px 28px 24px; font-size: 18px; }

  .office { padding-top: 56px; }
  .office-card { grid-template-columns: 1fr; min-height: 0; }
  .office-info { padding: 32px 28px; }
  .office-map a, .office-map img { height: 320px; }

  /* legal text */
  .legal-card { grid-template-columns: 1fr; }
  .legal-toc { position: static; padding: 28px; border-bottom: 1px solid var(--line); }
  .legal-body { border-left: 0; padding: 32px 28px 40px; }
  .legal-sec h2 { font-size: 24px; }

  /* get quote */
  .quote-hero-grid { grid-template-columns: 1fr; }
  .quote-hero-empty { display: none; }
  .quote-form-sec { padding-bottom: 72px; }
}

@media (max-width: 720px) {
  :root { --gutter: 18px; }
  h1 { font-size: 38px; }
  h2 { font-size: 30px; }
  h3 { font-size: 24px; }

  .header-inner { height: 72px; }
  .hero { padding-top: 24px; }
  .hero-intro, .hero-lead { padding: 26px 22px; }

  .section-lead { font-size: 17px; line-height: 30px; margin-bottom: 36px; }
  .process { padding: 72px 0 8px; }
  .step { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
  .split-copy h2 { font-size: 30px; }

  .ndaa { grid-template-columns: 1fr; }
  .ndaa-seal { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px; }
  /* a full block of uppercase mono at 11.5 px is hard work on a phone */
  .ndaa p { padding: 22px; font-size: 12.5px; line-height: 1.9; }

  .services { padding: 56px 0 64px; }
  .services .eyebrow, .services h2 { margin-left: 0; }
  .services h2 { margin-bottom: 34px; }
  .service-cards { padding-inline: 0; }

  .awards { padding-bottom: 64px; }
  /* the wreath labels are 10 px on desktop — too small to read on a phone, so
     the whole award grows instead */
  .award { width: 210px; font-size: 11.5px; }
  .laurel, .award-year { font-size: 14px; }

  .products { padding-bottom: 72px; }
  .product-card { flex-basis: 274px; }
  .products-head h2 { font-size: 34px; }

  .trusted-head h2 { font-size: 26px; }
  .logo-track { gap: 52px; }

  .expertise { padding: 60px 0 72px; }
  .acc-head { gap: 12px; font-size: 12.5px; }

  .team { padding: 56px 0; }
  .team-card { margin-inline: 0; }
  .team-card > img { height: 420px; }
  .team-overlay h2 { font-size: 32px; }

  .builder { padding-bottom: 72px; }
  .builder-list { padding: 20px 22px; font-size: 12px; }
  .builder-text p { font-size: 17px; line-height: 30px; }
  .btn-split-label { padding: 15px 18px; }
  .btn-split-icon { width: 52px; }
  .builder-text .btn-split-label { padding: 19px 24px; }
  .builder-text .btn-split-icon { width: 58px; }

  .hub { padding: 56px 0 72px; }
  /* no negative overlap here — the laptop would swallow the headline */
  .hub-title { font-size: 46px; margin-bottom: 6px; }

  .news { padding-bottom: 72px; }
  .contact { padding-bottom: 72px; }
  .captcha-box { width: 100%; max-width: 300px; }

  .site-footer { padding-top: 56px; }
  .footer-links a, .footer-social a { padding: 5px 0; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-logo { font-size: 24px; }
  .footer-contact { flex-direction: column; align-items: flex-start; gap: 16px; }
  .newsletter { flex-direction: column; }
  .newsletter button { padding: 14px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* subpages */
  .subpage-hero h1 { font-size: 34px; }
  .subpage-hero .hero-intro, .subpage-hero .hero-lead { padding: 26px 22px; }
  .breadcrumb { padding: 18px 22px; font-size: 12px; gap: 10px; }
  /* comfortable tap targets on touch — the design draws these smaller */
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; }
  .read-more .arrow { width: 32px; height: 32px; flex-basis: 32px; }
  .compare-drop { width: 32px; height: 32px; }
  .pick-tag { font-size: 11.5px; }
  .stat-band { padding: 26px 22px; }
  .stat { flex-direction: column; gap: 6px; align-items: flex-start; }
  .stat-value { font-size: 44px; }
  .stat-label { padding-top: 0; }

  .products-page { padding: 56px 0 72px; }
  .product-grid { grid-template-columns: 1fr; }
  .compare { padding: 40px 0 72px; }
  .compare-tool { padding: 24px 0 64px; }
  /* two per row keeps the drone name readable at 360 px */
  .pick-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pick-body { padding: 12px 12px 14px; }
  .pick-name { font-size: 16px; }
  .compare-toolbar { padding: 14px 16px; font-size: 12px; }
  .compare-cta .btn { width: 100%; }
  .add-services { padding-bottom: 72px; }
  .svc-head { font-size: 20px; gap: 16px; padding: 22px; }
  .svc-panel { padding: 0 22px 26px; }

  /* drone detail */
  .detail-crumb, .detail-intro { padding: 22px; }
  .detail-intro h1 { font-size: 34px; }
  .detail-shot img { height: 220px; }
  .feature-rows dt, .feature-rows dd { padding: 18px 22px; }

  .band-head-text { padding: 26px 22px 22px; }
  .band-head-cta { padding: 18px 22px; }

  .hotspot { width: 26px; height: 26px; }
  .hotspot::before { width: 15px; height: 15px; }
  .hotspot-panel { margin: 20px 22px 0; padding: 20px 22px; }
  .hotspot-title { font-size: 18px; gap: 14px; }
  .hotspot-panel ul, .hotspot-more { font-size: 12px; }
  .hotspot-panel ul { padding-left: 22px; }
  .hotspot-more { padding-left: 0; }
  .explode-copy { padding: 28px 22px 0; }

  .ndaa-card .ndaa-seal img { width: 150px; height: 150px; }
  .ndaa-copy { padding: 26px 22px; font-size: 12.5px; }

  .split-copy { padding: 32px 22px; }
  .split-figure { padding: 26px 22px; }
  .faq { padding: 40px 0 72px; }
  .faq-card { padding: 32px 22px 40px; }
  .faq .acc-head { font-size: 12px; gap: 12px; }

  /* articles archive */
  .archive-title { padding: 18px 22px 24px; }
  .archive-title h1 { font-size: 34px; }
  .archive { padding-bottom: 72px; }
  .article-grid { grid-template-columns: 1fr; }
  .article-card { min-height: 0; padding: 28px 22px; }
  .article-card > img { margin-inline: -22px; width: calc(100% + 44px); }

  /* legal text */
  .legal { padding-bottom: 72px; }
  .legal-toc { padding: 22px; }
  .legal-body { padding: 26px 22px 32px; }
  .legal-sec h2 { font-size: 20px; gap: 10px; }
  .legal-sec + .legal-sec { margin-top: 40px; }

  /* contact */
  .contact-note, .billing { padding-inline: 22px; }
  .billing-main h2 { font-size: 26px; }
  .billing-contact { font-size: 18px; }
  .person { grid-template-columns: 1fr; }
  .person > img { width: 100%; height: 220px; }
  .person-id { padding: 22px 22px 0; }
  .person-mail { grid-column: 1; padding: 6px 22px 22px; font-size: 16px; }
  .office-info { padding: 26px 22px; }
  .office-map a, .office-map img { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .awards-track, .logo-track { animation: none; }
  * { transition-duration: .01ms !important; }
}