/* ==========================================================================
   STABLY - site.css  (shared by every page)

   1. Tokens
   2. Reset & base
   3. Type & text utilities (label, headings, lead, links, buttons)
   4. Layout (container, section, split, tiles)
   5. Shell: banner, header, nav, mobile menu
   6. Hero
   7. Photo band (full-bleed background section)
   8. Facts list (dl)
   9. Contact band
   10. Footer
   11. Reveal (scroll fade-in)
   12. Responsive
   13. Inner-page openers (pagehead, band--top, section--alt)
   ========================================================================== */


/* 1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --s-blue: #4F91FF;
  --s-blue-hover: #3B82F6;

  --s-navy: #0B1220;
  --s-navy-2: #0F172A;

  --s-ink: #0F172A;
  --s-ink-2: #334155;
  --s-ink-3: #64748B;

  --s-bg: #FFFFFF;
  --s-bg-2: #F8FAFC;
  --s-line: #E5E7EB;
  --s-line-dark: rgba(255, 255, 255, .14);

  --s-on-dark: #FFFFFF;
  --s-on-dark-2: #CBD5E1;
  --s-on-dark-3: #94A3B8;

  --s-photo: #111827;               /* shown while a photo is missing or loading */

  --s-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", sans-serif;

  --s-header-h: 72px;
  --s-banner-h: 40px;
  --s-container: 1200px;
  --s-gutter: 32px;
  --s-section-y: 120px;
  --s-radius: 4px;
  --s-ease: cubic-bezier(.2, .6, .2, 1);
}

html.banner-closed { --s-banner-h: 0px; }


/* 2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--s-font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--s-ink);
  background: var(--s-bg);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;
}

p, li, dt, dd { text-wrap: pretty; }
p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

/* A photo that fails to load is painted over in the container color instead of
   showing the browser's broken-image glyph (pseudo-elements render only on
   broken images, never on loaded ones) */
.s-photo-fill img { position: relative; }
.s-photo-fill img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--s-photo);
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--s-blue-hover);
  outline-offset: 3px;
}
/* The banner is itself blue: use navy so the ring stays visible there (5.8:1) */
.s-banner :focus-visible { outline-color: #fff; }

/* Skip link: visible only when focused */
.s-skip {
  position: absolute;
  left: var(--s-gutter);
  top: -100px;
  z-index: 70;
  padding: 10px 16px;
  background: #fff;
  color: var(--s-ink);
  font-weight: 600;
  border-radius: var(--s-radius);
}
.s-skip:focus-visible { top: calc(var(--s-banner-h) + 8px); }

.s-nowrap { white-space: nowrap; }

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


/* 3. Type & text utilities
   -------------------------------------------------------------------------- */
.s-label {
  display: block;
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--s-ink-3);
}

.s-h1 { font-size: 60px; }
.s-h2 { font-size: 44px; }
.s-h3 { font-size: 28px; }

.s-lead {
  max-width: 34em;
  font-size: 18px;
  line-height: 1.7;
  color: var(--s-ink-2);
}

.s-h2 + .s-lead,
.s-h3 + .s-lead { margin-top: 24px; }

/* Dark surface: flips the text colors of everything above */
.s-dark {
  background: var(--s-navy);
  color: var(--s-on-dark);
}
.s-dark .s-label { color: var(--s-blue); }
/* Oversized label used as the section's visual lead (home Technology band) */
.s-label--xl {
  margin-bottom: 24px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--s-blue);          /* large text: 3.1:1 on white clears the 3:1 bar */
}
.s-dark .s-lead  { color: var(--s-on-dark-2); }

/* Arrow link */
.s-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--s-ink);
  transition: color .2s;
}
.s-link svg {
  width: 18px;
  height: 18px;
  color: var(--s-blue);
  transition: transform .3s var(--s-ease);
}
.s-link:hover { color: var(--s-ink); }   /* text stays ink (hover blue is 3.7:1 on white); only the arrow moves */
.s-link:hover svg { transform: translateX(3px); }
.s-dark .s-link { color: var(--s-on-dark); }
.s-dark .s-link:hover { color: var(--s-blue); }

/* Buttons */
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 32px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--s-radius);
  border: 1px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.s-btn--primary {
  background: var(--s-ink);
  color: #fff;
}
.s-btn--primary:hover { background: #1E293B; }

.s-btn--light {
  background: #fff;
  color: var(--s-ink);
}
.s-btn--light:hover { background: #E2E8F0; }

.s-btn--ghost {
  border-color: rgba(15, 23, 42, .3);
  color: var(--s-ink);
}
.s-btn--ghost:hover {
  border-color: var(--s-ink);
  background: rgba(15, 23, 42, .04);
}


/* 4. Layout
   -------------------------------------------------------------------------- */
.s-container {
  width: 100%;
  max-width: var(--s-container);
  margin: 0 auto;
  padding-left: var(--s-gutter);
  padding-right: var(--s-gutter);
}

.s-section {
  padding: var(--s-section-y) 0;
  scroll-margin-top: calc(var(--s-header-h) + var(--s-banner-h));
}

/* Two-column: media + text */
.s-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 88px;
  align-items: center;
}
.s-split__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--s-radius);
  background: var(--s-photo);
}
.s-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Transparent product cut-out: no box, shown small so the drone reads as small */
.s-split__media--cutout {
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  padding: 24px 0;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.s-split__media--cutout img {
  width: 58%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(15, 23, 42, .14));
}
.s-lead + .s-lead { margin-top: 16px; }
/* Sub-headline under an h2 (a shade smaller, still bold) */
.s-subhead {
  margin-top: 14px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--s-ink);
}
.s-subhead + .s-lead { margin-top: 18px; }
#pilot .s-h2 { font-size: 36px; }
/* Text-heavy split: give the copy the wider column so sentences keep their natural breaks */
.s-split--text { grid-template-columns: .9fr 1.3fr; gap: 64px; }
.s-split--text .s-split__media--cutout img { width: 70%; }
.s-split--text .s-split__media:not(.s-split__media--cutout) { aspect-ratio: 5 / 6; align-self: center; max-width: 440px; }
#pilot .s-lead + .s-link { margin-top: 28px; }   /* breathing room above the video link */
/* Desktop-only line breaks inside body copy */
.s-br-d { display: inline; }

/* Photo tiles (title + one line over a photo) */
.s-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.s-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 600px;
  padding: 48px;
  overflow: hidden;
  border-radius: var(--s-radius);
  background: var(--s-photo);
  color: var(--s-on-dark);
}
.s-tile__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.s-tile__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.75);
  transition: transform .9s var(--s-ease);
}
.s-tile__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 18, 32, .12) 35%, rgba(11, 18, 32, .78) 100%);
}
.s-tile:hover .s-tile__bg img { transform: scale(1.04); }
.s-tile:focus-within {
  outline: 2px solid var(--s-blue);
  outline-offset: 3px;
}
.s-tile__title { font-size: 34px; }
.s-tile__text {
  max-width: 24em;
  text-wrap: balance;
  margin-top: 12px;
  font-size: 17px;
  color: rgba(255, 255, 255, .86);
}
.s-tile__more {
  margin-top: 28px;
  color: var(--s-on-dark);
}
.s-tile__more::after {           /* stretched link: whole tile is clickable */
  content: "";
  position: absolute;
  inset: 0;
}
.s-tile__more:focus-visible { outline: none; }
.s-tile__more:hover { color: var(--s-on-dark); }


/* 5. Shell: banner, header, nav
   -------------------------------------------------------------------------- */
.s-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--s-banner-h);
  padding: 0 60px 0 var(--s-gutter);
  background: var(--s-navy-2);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
html.banner-closed .s-banner { display: none; }

.s-banner__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-banner__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.s-banner__arrow {
  color: var(--s-blue);
  font-weight: 500;
  transition: transform .3s var(--s-ease);
}
.s-banner__link:hover .s-banner__arrow { transform: translateX(3px); }

.s-banner__close {
  position: absolute;
  top: 50%;
  right: calc(var(--s-gutter) - 10px);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  border-radius: var(--s-radius);
  transition: background-color .2s;
}
.s-banner__close:hover { background: rgba(255, 255, 255, .12); }
.s-banner__close svg { width: 18px; height: 18px; }

/* Header (fixed, sits under the banner) */
.s-header {
  position: fixed;
  top: var(--s-banner-h);
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--s-header-h);
  background: #fff;
  border-bottom: 1px solid var(--s-line);
  transition: background-color .35s, border-color .35s;
}
.s-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.s-header__logo {
  display: block;
  height: 22px;
}
.s-header__logo img {
  height: 100%;
  width: auto;
}
.s-logo--light { display: none; }

.s-nav {
  display: flex;
  gap: 40px;
}
.s-nav a {
  padding: 8px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--s-ink-2);
  transition: color .2s;
}
.s-nav a:hover { color: var(--s-ink); }
.s-nav a[aria-current="page"] {
  color: var(--s-ink);
  font-weight: 700;
}
/* Language switch: a quiet text link at the end of the nav */
.s-nav .s-lang {
  margin-left: 8px;
  padding-left: 24px;
  border-left: 1px solid var(--s-line);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--s-ink-3);
}
.s-nav .s-lang:hover { color: var(--s-ink); }
html.js .s-header--overlay:not(.is-scrolled):not(.is-open) .s-nav .s-lang { border-left-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .7); }
html.js .s-header--overlay:not(.is-scrolled):not(.is-open) .s-nav .s-lang:hover { color: #fff; }

/* Transparent-over-hero variant; turns white once scrolled or when the menu is open */
html.js .s-header--overlay:not(.is-scrolled):not(.is-open) {
  background: transparent;
  border-bottom-color: transparent;
}
html.js .s-header--overlay:not(.is-scrolled):not(.is-open) .s-logo--dark  { display: none; }
html.js .s-header--overlay:not(.is-scrolled):not(.is-open) .s-logo--light { display: block; }
html.js .s-header--overlay:not(.is-scrolled):not(.is-open) .s-nav a { color: rgba(255, 255, 255, .84); }
html.js .s-header--overlay:not(.is-scrolled):not(.is-open) .s-nav a:hover,
html.js .s-header--overlay:not(.is-scrolled):not(.is-open) .s-nav a[aria-current="page"] { color: #fff; }
html.js .s-header--overlay:not(.is-scrolled):not(.is-open) .s-menu-btn { color: #fff; }

/* Hamburger (mobile only) */
.s-menu-btn {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--s-ink);
}
.s-menu-btn svg { width: 24px; height: 24px; }
.s-menu-btn .s-ico-close { display: none; }
.s-menu-btn[aria-expanded="true"] .s-ico-menu  { display: none; }
.s-menu-btn[aria-expanded="true"] .s-ico-close { display: block; }


/* 6. Hero
   -------------------------------------------------------------------------- */
.s-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: clamp(600px, 100svh, 960px);
  padding-top: calc(var(--s-header-h) + var(--s-banner-h) + 48px);
  padding-bottom: 96px;
  background: var(--s-navy);
  color: var(--s-on-dark);
  overflow: hidden;
}
.s-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--s-photo);
}
.s-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.75);
}
/* Slideshow: slides stack in the same box and cross-fade; the active one zooms
   very slowly so the photo is never static. site.js drives .is-active; without
   JS the first slide simply stays. */
.s-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s var(--s-ease);
}
.s-hero__slide.is-active { opacity: 1; }
.s-hero__slide img {
  transform: scale(1.02);
  transition: transform 7s linear;
}
.s-hero__slide.is-active img { transform: scale(1.10); }
/* The video sits on top of a cover-scaled still of itself. iOS letterboxes the <video poster>
   image, so the still is painted as a background instead; the explicit positioning keeps the
   video full-bleed even where percentage heights are not resolved. */
.s-hero__slide--video { background: #06090F url("videos/hero_loop_poster.webp") center / cover no-repeat; }
.s-hero__slide video {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.s-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.s-hero__video { color: var(--s-on-dark); }
.s-hero__video:hover { color: #fff; }
.s-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 18, 32, .35) 0%, rgba(11, 18, 32, .3) 55%, rgba(11, 18, 32, .55) 100%);
}
.s-hero__kicker {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 500;
  color: rgba(255, 255, 255, .8);
}
.s-hero__title {
  /* line 2 of the headline is ~18em wide; keep it inside the container */
  font-size: min(calc((100vw - 2 * var(--s-gutter)) / 18), 60px);
  line-height: 1.2;
  text-wrap: balance;
}
.s-hero__cta { margin-top: 48px; }


/* 7. Photo band (full-bleed background + text)
   -------------------------------------------------------------------------- */
.s-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 640px;
  padding: var(--s-section-y) 0;
  background: var(--s-navy);
  color: var(--s-on-dark);
  overflow: hidden;
}
.s-band__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--s-photo);
}
.s-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.75);
}
.s-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 18, 32, .52) 0%, rgba(11, 18, 32, .30) 100%);
}
.s-band .s-label { color: var(--s-blue); }
.s-band .s-lead  { color: var(--s-on-dark-2); }
.s-band .s-link  { color: var(--s-on-dark); }
.s-band .s-link:hover { color: var(--s-blue); }
.s-band__body { max-width: 720px; }
.s-band .s-link { margin-top: 36px; }


/* 8. Facts list (dl)
   -------------------------------------------------------------------------- */
.s-facts {
  margin-top: 40px;
  border-top: 1px solid var(--s-line);
}
.s-facts__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--s-line);
  font-size: 16px;
  line-height: 1.6;
}
.s-facts dt {
  color: var(--s-ink-3);
  font-weight: 500;
}
.s-facts dd {
  color: var(--s-ink);
  font-weight: 500;
}


/* 9. Contact band
   -------------------------------------------------------------------------- */
.s-contact {
  background: var(--s-bg-2);
  border-top: 1px solid var(--s-line);
}
.s-contact__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.s-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}


/* 10. Footer
   -------------------------------------------------------------------------- */
.s-footer {
  padding: 56px 0 40px;
  background: var(--s-navy);
  color: var(--s-on-dark-3);
  font-size: 14px;
  line-height: 1.6;
}
.s-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--s-line-dark);
}
.s-footer__logo { display: block; height: 22px; }
.s-footer__logo img { height: 100%; width: auto; }
.s-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.s-footer__nav a {
  color: var(--s-on-dark-2);
  font-weight: 500;
  transition: color .2s;
}
.s-footer__nav a:hover { color: #fff; }
.s-footer__info {
  margin-top: 28px;
  font-size: 12.5px;
  line-height: 1.9;
}
.s-footer__info p { margin: 0; }
.s-footer__copy {
  margin-top: 20px;
  font-size: 12.5px;
}


/* 11. Reveal (scroll fade-in). Hidden only after JS has tagged <html class="js">
   -------------------------------------------------------------------------- */
html.js .s-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--s-ease), transform .6s var(--s-ease);
}
html.js .s-reveal.is-in,
html.js-late .s-reveal {            /* safety net if site.js never runs */
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .s-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .s-tile__bg img, .s-link svg, .s-banner__arrow { transition: none; }
  .s-hero__slide img { transform: none; transition: none; }
}


/* 12. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  /* Media + text stacks before the text column gets cramped */
  .s-split { grid-template-columns: 1fr; gap: 48px; }
  .s-split__media { aspect-ratio: 16 / 9; }
  .s-split__body { max-width: 720px; }
}

@media (max-width: 1023px) {
  :root {
    --s-header-h: 64px;
    --s-section-y: 96px;
  }
  .s-h1 { font-size: 48px; }
  .s-h2 { font-size: 36px; }
  .s-h3 { font-size: 24px; }
  .s-tile { min-height: 480px; padding: 36px; }
  .s-tile__title { font-size: 30px; }
  .s-contact__grid { grid-template-columns: 1fr; gap: 28px; }   /* 768: two buttons no longer fit the 7fr column */
}

@media (max-width: 767px) {
  :root {
    --s-header-h: 60px;
    --s-banner-h: 36px;
    --s-gutter: 20px;
    --s-section-y: 72px;
  }
  body { font-size: 16px; }
  .s-h1 { font-size: 34px; }
  .s-h2 { font-size: 28px; }
  .s-h3 { font-size: 22px; }
  .s-subhead { font-size: 19px; }
  #pilot .s-h2 { font-size: 26px; }
  .s-lead { font-size: 17px; }
  .s-label { margin-bottom: 14px; }
  .s-label--xl { font-size: 24px; margin-bottom: 16px; }

  /* Banner: drop the long clause, keep the close button */
  .s-banner { font-size: 13.5px; padding-right: 52px; }

  /* Header: hamburger + full-width dropdown */
  .s-menu-btn { display: grid; }
  .s-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 4px var(--s-gutter) 12px;
    background: #fff;
    border-bottom: 1px solid var(--s-line);
  }
  .s-header.is-open .s-nav { display: flex; }
  .s-nav a {
    padding: 15px 0;
    font-size: 17px;
    border-top: 1px solid var(--s-line);
  }
  .s-nav a:first-child { border-top: 0; }
  .s-nav .s-lang { margin-left: 0; padding-left: 0; border-left: 0; font-size: 15px; letter-spacing: .08em; }

  /* Hero: headline stays on two lines; the desktop line break is dropped */
  .s-hero {
    min-height: 100vh;
    min-height: clamp(560px, 100svh, 860px);
    padding-top: calc(var(--s-header-h) + var(--s-banner-h) + 32px);
    padding-bottom: 72px;
  }
  .s-hero__kicker { font-size: 17px; margin-bottom: 16px; }
  .s-hero__title {
    font-size: min(calc((100vw - 2 * var(--s-gutter)) / 14), 40px);
    line-height: 1.25;
  }
  .s-hero__title br { display: none; }
  .s-hero__cta { margin-top: 36px; }
  .s-btn { min-height: 52px; padding: 0 26px; font-size: 15px; }

  .s-split { grid-template-columns: 1fr; gap: 36px; }
  .s-split__media { aspect-ratio: 3 / 2; }
  #pilot .s-split__media { aspect-ratio: 5 / 6; max-width: 360px; }   /* keep the whole demo photo: helmet at the top, drone at the bottom */
  .s-split__media--cutout { aspect-ratio: auto; padding: 8px 0; }
  .s-split__media--cutout img { width: 72%; }
  .s-br-d { display: none; }

  .s-tiles { grid-template-columns: 1fr; gap: 16px; }
  .s-tile { min-height: 420px; padding: 28px 24px; }
  .s-tile__title { font-size: 26px; }
  .s-tile__text { font-size: 16px; }

  .s-band { min-height: 0; }
  .s-band__bg img { object-position: 0% 50%; }    /* narrow viewport: keep the pose marker at the far right */
  .s-band__bg::after { background: linear-gradient(90deg, rgba(11, 18, 32, .68) 0%, rgba(11, 18, 32, .5) 100%); }

  .s-facts { margin-top: 32px; }
  .s-facts__row { grid-template-columns: 64px 1fr; font-size: 15px; }

  .s-contact__grid { grid-template-columns: 1fr; gap: 28px; }
  .s-contact__actions { margin-top: 28px; }
  .s-contact__actions .s-btn { flex: 1 1 100%; }

  .s-footer { padding: 44px 0 32px; }
  .s-footer__top { flex-direction: column; align-items: flex-start; gap: 24px; }
  .s-footer__nav { gap: 20px; }
}

@media (max-width: 640px) {
  .s-banner__long { display: none; }
}
/* English runs longer: drop the first clause earlier so the bar never truncates */
@media (max-width: 899px) {
  html[lang="en"] .s-banner__long { display: none; }
}

/* 13. Inner-page openers (added for phase 2)
   -------------------------------------------------------------------------- */
/* Dark title band under the fixed header: h1 + one sentence (solutions, technology, rnd) */
.s-pagehead {
  padding: calc(var(--s-header-h) + var(--s-banner-h) + 96px) 0 40px;
  background: var(--s-bg);
  color: var(--s-ink);
  border-bottom: 1px solid var(--s-line);
}
.s-pagehead .s-label { color: var(--s-blue); }
.s-pagehead .s-lead  { color: var(--s-ink-2); }
.s-pagehead__title { font-size: 64px; }
.s-pagehead__title + .s-lead { margin-top: 24px; font-size: 22px; max-width: 36em; }

/* A full-bleed photo band used as the first thing on a page (company "Our story") */
.s-band--top { padding-top: calc(var(--s-header-h) + var(--s-banner-h) + var(--s-section-y)); }

/* Light-gray surface for alternating sections */
.s-section--alt { background: var(--s-bg-2); }

@media (max-width: 1023px) {
  .s-pagehead { padding-top: calc(var(--s-header-h) + var(--s-banner-h) + 72px); padding-bottom: 36px; }
  .s-pagehead__title { font-size: 48px; }
}
@media (max-width: 767px) {
  .s-pagehead { padding-top: calc(var(--s-header-h) + var(--s-banner-h) + 48px); padding-bottom: 28px; }
  .s-pagehead__title { font-size: 36px; }
  .s-pagehead__title + .s-lead { font-size: 18px; margin-top: 16px; }
}