/* Self-hosted webfonts.
   Previously these came from fonts.googleapis.com + fonts.gstatic.com, which
   meant every visitor's IP address was disclosed to a third party on every
   page view — a KVKK disclosure the site no longer has to make — and two
   extra DNS lookups plus a render-blocking stylesheet before any text drew.

   Only the latin and latin-ext subsets are kept. latin-ext is what carries
   the Turkish letters, so dropping it would break ğ, ş, ı and İ. Google's
   sheet also offered cyrillic, greek, vietnamese, math and symbols: 111 files
   in total, of which this site can never use more than these. */

/* Gothic A1 400 — latin-ext */
@font-face {
  font-family: 'Gothic A1';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/gothic-a1-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Gothic A1 400 — latin */
@font-face {
  font-family: 'Gothic A1';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/gothic-a1-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Gothic A1 600 — latin-ext */
@font-face {
  font-family: 'Gothic A1';
  font-style: normal;
  font-weight: 600;
  src: url(/assets/fonts/gothic-a1-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Gothic A1 600 — latin */
@font-face {
  font-family: 'Gothic A1';
  font-style: normal;
  font-weight: 600;
  src: url(/assets/fonts/gothic-a1-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jost 200 — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/assets/fonts/jost-200-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost 200 — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/assets/fonts/jost-200-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jost 300 — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/jost-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost 300 — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/jost-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jost 400 — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jost-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost 400 — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jost-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jost 500 — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jost-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost 500 — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jost-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jost 600 — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/jost-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost 600 — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/jost-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto 400 — latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto 400 — latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/roboto-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Orbit Savunma — static site stylesheet
   Design tokens lifted from the live orbitsavunma.com build.
   ========================================================================== */

:root {
  /* Was #0177E3, which measured 4.42:1 on white — just under the 4.5:1 that
     WCAG AA wants for normal-size text, so every inline link in body copy
     failed. Headings were fine (large text only needs 3:1); it was the prose
     links that didn't clear it. Every channel is scaled by the same 1.5%, so
     hue and saturation are unchanged and this reads as the same blue. */
  --accent:        #0175E0;  /* section headings, links — 4.54:1 on white */
  --accent-btn:    #0085FF;  /* solid CTA buttons */
  --accent-hero:   #0059B6;  /* hero button on the home page */
  --icon-primary:  #0063FF;  /* service list bullets */
  --icon-secondary:#2A8DFF;  /* "why us" checkmarks */
  --ink:           #000000;
  --paper:         #ffffff;
  --navy:          #000B22;  /* footer */
  --ink-deep:      #05070D;  /* scrolled header bar */
  --wash:          #F4F7FA;  /* light section tint */
  --rule:          #DDE4EC;  /* hairlines on light backgrounds */
  --muted:         #4F5B62;  /* secondary text */
  --grid-line:     rgba(1, 119, 227, .09);  /* drafting grid, at rest */
  --grid-line-hot: rgba(1, 119, 227, .34);  /* drafting grid, under pointer */

  --font-head: "Jost", sans-serif;
  --font-body: "Roboto", sans-serif;
  --font-nav:  "Gothic A1", sans-serif;

  --container: 1140px;
  --header-container: 1560px;  /* wider than the text column, so the logo
                                  sits near the page edge, not near centre */
  --header-h: 125px;
}

/* --------------------------------------------------------------- reset --- */

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

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

/* iOS Safari tints its bottom toolbar and the over-scroll (rubber-band) area
   from the BODY background-color — html is ignored, and it samples once at
   first paint. So body must carry the colour that sits at the bottom of the
   page, not the colour of the content area. Inner pages end in the footer
   (--wash); the content column gets its white back on <main> below. */
body {
  margin: 0;
  background: var(--wash);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
}

main { background: var(--paper); }

/* iOS samples the body background for its toolbar and the rubber-band area,
   so this must be the colour at the BOTTOM of the page. The home page is the
   hero and nothing else -- no footer -- so that colour is near-black again.
   #05070D is the hero's own background-color and the page's theme-color, so
   the status bar, the page and the bottom toolbar are one colour. Leaving
   this at --wash put a light bar under an all-dark page on iPhone.

   Anything that changes what sits at the FOOT of this page has to change this
   line with it.

   --header-solid still points at the hero, because the TOP of the page is
   unchanged: it is the row the header's bottom edge meets, read off the
   rendered page at 375px wide rather than off the source image, so the bar
   joins the photograph without a seam. */
body.page-home {
  background: #05070D;
  --header-solid: #020C1B;
}

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

a { color: var(--accent); }

h1, h2, h3, h4, h5 { font-family: var(--font-head); margin: 0; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }

/* the header is fixed, so anchor jumps need to clear it */
#main { scroll-margin-top: var(--header-h); }

.visually-hidden {
  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: 200;
  background: var(--paper); color: var(--ink); padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------------------- header --- */
/* The header floats over the hero and stays pinned as the page scrolls;
   once it leaves the hero it drops onto a solid navy bar (.is-scrolled). */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .35s, box-shadow .35s, backdrop-filter .35s;
}

/* A very slight scrim — insurance for legibility over the video heroes.
   The reference sites carry none; this is kept weak enough to read as
   nothing on a dark hero. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 130px;
  background: linear-gradient(to bottom, rgba(5,7,13,.45), rgba(5,7,13,0));
  pointer-events: none;
  transition: opacity .35s;
}

/* Scrolled: a flat near-black bar closed with a hairline. No blur, no
   glow — every reference site uses a hard 1px edge or nothing at all. */
.site-header.is-scrolled {
  background: rgba(5, 7, 13, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.site-header.is-scrolled::before { opacity: 0; }

/* Pages with no hero behind the header — 404 and the legal pages — are white
   from the very top, so the transparent bar puts white nav text on white:
   1.53:1 measured, against the 10.99:1 the same links get over a hero. It is
   not faint, it is unreadable until you scroll far enough to trigger
   .is-scrolled. These pages take that treatment from the outset instead.

   Opaque, not the .94 the scrolled bar uses. This selector outranks the
   mobile rule below that deliberately makes the header solid, and a
   semi-transparent fixed bar is exactly what leaves iOS with nothing
   deterministic to sample for the status bar. There is nothing behind the
   header on these pages anyway, so the alpha bought nothing. */
body.page-plain .site-header {
  background: #05070D;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
body.page-plain .site-header::before { opacity: 0; }

.header-inner {
  position: relative;
  max-width: var(--header-container);
  margin-inline: auto;
  padding: 15px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  transition: padding .35s;
}
.is-scrolled .header-inner { padding-block: 9px; }

/* Sized off the wordmark, not the artboard: peers run 23–40px of logo
   height, which is what keeps the bar slim. */
.logo { display: block; line-height: 0; }
.logo img { width: 168px; height: auto; transition: width .35s; }
.is-scrolled .logo img { width: 130px; }

.header-right { display: flex; align-items: center; gap: 30px; }

/* language switcher — plain text, no chrome, accent on the active locale */
.lang {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  line-height: 1;
}
.lang a, .lang > span { color: rgba(255,255,255,.45); text-decoration: none; transition: color .2s; }
.lang a:hover { color: #fff; }
.lang [aria-current="true"] { color: #fff; }
.lang .sep { color: rgba(255,255,255,.22); }

/* hairline between the nav and the utility cluster */
.header-right::before {
  content: "";
  align-self: stretch;
  width: 1px;
  margin-block: 6px;
  background: rgba(255,255,255,.16);
  order: 1;
}
.header-right .lang { order: 2; }
.header-right .site-nav { order: 0; }
.header-right .nav-toggle { order: 3; }

.site-nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.site-nav a {
  position: relative;
  display: grid;
  place-items: center;
  height: 62px;
  padding: 0 17px;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.7px;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  transition: color .2s, height .35s;
}
.is-scrolled .site-nav a { height: 54px; }

/* 1px underline, wiped in from the left */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 17px; right: 17px;
  bottom: calc(50% - 1.15em);
  height: 1px;
  background: var(--accent-btn);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: #fff; }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }

/* hamburger — bare icon, but a full 44px tap target around it */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;   /* keep the bars optically on the edge */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 24px; height: 1px;
  background: #fff;
  margin-inline: auto;
  transition: transform .25s, opacity .25s, background-color .25s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: relative; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top:  6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------ focus ring --- */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-btn);
  outline-offset: 3px;
}
.site-header a:focus-visible,
.nav-toggle:focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------- home hero --- */

.home-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background: #05070d url("../img/hero-night.webp") center center / cover no-repeat;
}

/* ---- air routes -------------------------------------------------------
   Arcs over the left of the hero with a comet running along each one.
   Pure vector and pure CSS/SMIL: no image, no script.

   The box stops short of the ridge line in the photograph — these are
   aircraft, so they have no business crossing the rock. --routes-sky is
   the height of that band; it is a percentage of the hero, so it tracks
   the ridge as the photograph scales. The gradient mask then fades the
   layer out towards the right and the bottom, so the arcs dissolve into
   the sky instead of stopping at an edge, and it keeps them off the
   headline and the drone.

   It sits under .home-hero-inner (z-index 11), so the headline stays clear. */

.routes {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  --routes-sky: 40%;
  width: 56%;
  height: var(--routes-sky);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(96% 140% at 20% 46%, #000 0%, #000 55%, transparent 100%);
          mask-image: radial-gradient(96% 140% at 20% 46%, #000 0%, #000 55%, transparent 100%);
}

/* The airway itself. non-scaling-stroke pins these at one device pixel
   whatever the box scales to, which is what makes them read as the same
   hairline the wireframe illustrations are drawn in rather than as a
   thicker line that happens to be faint. */
.route-lines use {
  fill: none;
  stroke: rgba(74, 158, 255, .13);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* A point of light on the airway, nothing more. No tail and no leading
   point: the moment one end is brighter than the other it stops reading
   as an aircraft and starts reading as something launched. */
.plane { fill: rgba(174, 212, 246, .6); }

/* Phone-only airways, off by default — see the max-width: 767px block.
   Hidden rather than absent so there is one SVG to maintain, and hidden
   elements run no animation, so desktop pays nothing for them. */
.routes .m-only { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* keep the map, drop the traffic */
  .traffic { display: none; }
}
/* Wireframe illustrations that drift with the pointer (see nav.js). */
.hero-wires { position: absolute; inset: 0; pointer-events: none; }
/* height: auto is load-bearing. These carry width/height attributes so the
   browser knows their aspect ratio before they load, but the CSS below only
   sets width — without this, the attribute's height applies as a presentational
   hint and stretches both illustrations vertically (570x760 instead of
   570x380). Any image sized by CSS width alone needs this alongside the attrs. */
.hero-wires img { position: absolute; height: auto; will-change: transform; }
.wire-ground { width: 570px; left: 13%; top: 53%; }

/* Halo stripped from the source, so this composites normally — no blend
   mode needed, just the linework.

   left/top are the top-left corner, so shrinking the width alone drags the
   drone up and to the left as a side effect. Source is 820x562, so at 310px
   it stands 212px tall; top is set to hold the vertical centre steady across
   that change rather than letting it creep upward.

   left is a deliberate move right, and top keeps it below the navigation —
   at the original 3.8% the rotor mast ran up behind the menu bar. */
.wire-vtol {
  width: 310px;
  left: 72%;
  top: 11%;
  opacity: .85;
}

.home-hero-inner {
  position: relative;
  z-index: 11;
  width: 100%;
  max-width: var(--container);
  padding: 36vh 20px 10px;
  text-align: center;
  color: #fff;
}

.home-hero h1 {
  margin: 14px;
  font-size: 26px;
  font-weight: 300;
  /* Not 1. At 768-1024px this headline is 44px and wraps, and a 44px line box
     let the dot of a capital I-with-dot on line two touch the comma and the
     C-cedilla above it (measured: 4px of ink overlap). 1.15 clears it by
     2.6px. The max-width:767px block sets its own value and is unaffected. */
  line-height: 1.15;
  letter-spacing: 10px;
  text-transform: uppercase;
  /* the apron lights are point-bright; this keeps thin type off them */
  text-shadow: 0 2px 24px rgba(5, 7, 13, .85);
}

.home-hero h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 200;
  letter-spacing: 6.3px;
  text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(5, 7, 13, .85);
}

.home-hero .btn { margin-top: 25px; }

/* ---------------------------------------------------------- page hero --- */
/* Inner pages: full-bleed video banner with the page title over it. */

.page-hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #05070d center center / cover no-repeat;
}

/* Poster/fallback behind the video — one per page, as on the live site. */
.page-hero--about {
  background-image:
    linear-gradient(to bottom, rgba(5,7,13,.50) 0%, rgba(5,7,13,.12) 45%, rgba(5,7,13,.80) 100%),
    url("../img/uav-runway.webp");
  background-position: center center;
}
/* Daytime apron shot, so the scrim is heavier than on the night heroes —
   the title is white and the sky behind it is bright. */
.page-hero--services {
  background-image:
    linear-gradient(to bottom, rgba(5,7,13,.62) 0%, rgba(5,7,13,.48) 50%, rgba(5,7,13,.72) 100%),
    url("../img/field-ops.webp");
  background-position: center 72%;
}
.page-hero--contact {
  background-image:
    linear-gradient(to bottom, rgba(5,7,13,.55) 0%, rgba(5,7,13,.18) 45%, rgba(5,7,13,.82) 100%),
    url("../img/comms-night.webp");
  background-position: center center;
}

.page-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  padding-inline: 20px;
  font-size: 70px;
  font-weight: 400;
  letter-spacing: 8.5px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 30px rgba(0, 0, 0, .98);
}

/* -------------------------------------------------------------- blocks --- */

.section { padding: 120px 0; }

/* ---- drafting grid ------------------------------------------------- */
/* Keeps the light sections from reading as blank paper. A faint base grid
   sits behind the text; a brighter one is revealed in a circle that tracks
   the pointer, so the surface responds instead of just animating at you. */

.section--grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --gx: 50%;
  --gy: 50%;
}

.section--grid::before,
.section--grid::after {
  content: "";
  position: absolute;
  inset: -90px;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* base layer — always there, faded at the edges */
.section--grid::before {
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, #000 25%, transparent 75%);
}

/* reveal layer — brighter lines plus a wash, clipped to the pointer */
.section--grid::after {
  background-image:
    linear-gradient(to right,  var(--grid-line-hot) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-hot) 1px, transparent 1px),
    radial-gradient(circle 300px at var(--gx) var(--gy), rgba(1,119,227,.07), transparent 70%);
  background-size: 72px 72px, 72px 72px, 100% 100%;
  -webkit-mask-image: radial-gradient(circle 260px at var(--gx) var(--gy), #000 10%, transparent 68%);
          mask-image: radial-gradient(circle 260px at var(--gx) var(--gy), #000 10%, transparent 68%);
  opacity: 0;
  transition: opacity .45s ease;
}
.section--grid.is-live::after { opacity: 1; }

.section h2 {
  font-size: 46px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--accent);
}

.section h2 + p, .section h2 + .prose { margin-top: 20px; }

.prose p { margin: 0 0 20px; }
.prose p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- lists --- */

.icon-list { list-style: none; margin: 0; padding: 0; }

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 15px;
}
.icon-list li:first-child { padding-top: 0; }
.icon-list li:last-child  { padding-bottom: 0; }

/* The icon box is one line tall and centres its glyph, so the mark lines up
   with the middle of the first line at any font size — including when the
   label wraps. (A fixed em nudge left it sitting ~6px low.) */
.icon-list .icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 14px;
  height: 1.7em;
  color: var(--icon-primary);
}
.icon-list .icon svg { width: 14px; height: 14px; fill: currentColor; }

.check-list li { padding-block: 4px; }
.check-list .icon { color: var(--icon-secondary); }

/* ------------------------------------------------------- about page --- */

/* lead paragraph sits beside the heading rather than under it */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}
.intro h2 { margin: 0; }
.intro .prose { font-size: 18px; }

/* mission / vision as two ruled cards */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 90px;
  border-top: 1px solid var(--rule);
}

.pillar {
  padding: 44px 46px 44px 0;
  border-bottom: 1px solid var(--rule);
}
.pillar:nth-child(odd) { border-right: 1px solid var(--rule); }
.pillar:nth-child(even) { padding-left: 46px; padding-right: 0; }

.pillar h3 {
  margin: 0 0 16px;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--accent);
}
.pillar p { margin: 0; color: var(--muted); }

/* ------------------------------------------------------------- buttons --- */

/* Sharp-cornered and letterspaced, in keeping with the rest of the brand.
   Hover wipes a darker fill across from the left; the label lifts slightly. */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px;
  background: var(--accent-btn);
  color: #fff;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: color .2s;
}

/* Negative z-index paints above the button's own background but below the
   label, so the wipe never covers the text. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }

.btn:active::before { background: var(--accent-hero); }

/* Outlined variant, for where a solid blue block would outweigh what sits
   around it — the closing cell of the services grid. */
.btn--ghost {
  background: transparent;
  border: 1px solid var(--accent-btn);
  color: var(--accent-btn);
  padding: 16px 32px;
}
.btn--ghost:hover,
.btn--ghost:focus-visible { color: #fff; }

/* Hero "discover" CTA — darker base, with an arrow that nudges on hover. */
.btn--hero { background: var(--accent-hero); }
.btn--hero::before { background: var(--accent-btn); }

.btn--hero::after {
  content: "";
  width: 18px; height: 8px;
  background: currentColor;
  /* chevron-right, drawn with a mask so it inherits the label colour */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M0 3.5h14.2L11.4.7 12.1 0 16 4l-3.9 4-.7-.7 2.8-2.8H0z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M0 3.5h14.2L11.4.7 12.1 0 16 4l-3.9 4-.7-.7 2.8-2.8H0z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.btn--hero:hover::after { transform: translateX(5px); }

/* ------------------------------------------------------- services page --- */

.services {
  position: relative;
  background: var(--paper);
  overflow: hidden;
}

.services .container { position: relative; z-index: 1; }

/* ---- service blocks ------------------------------------------------ */

.services-lead {
  max-width: 58ch;
  margin: 24px 0 0;
  font-size: 21px;
  line-height: 1.6;
  color: var(--muted);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 56px;
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: 38px 36px 34px;
  background: #fff;
  border: 1px solid var(--rule);
  /* the accent edge is drawn, not bordered, so it can wipe in on hover */
  background-image: linear-gradient(var(--accent-btn), var(--accent-btn));
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 0;
  transition: background-size .45s cubic-bezier(.2,.7,.3,1),
              border-color .25s, box-shadow .25s, transform .25s;
}
.service-card:hover {
  background-size: 100% 2px;
  border-color: #C9D8E8;
  box-shadow: 0 18px 44px rgba(1, 119, 227, .10);
  transform: translateY(-3px);
}

.service-card .mark {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
  border: 1px solid var(--rule);
  background: var(--wash);
  color: var(--accent-btn);
  transition: background-color .25s, border-color .25s, color .25s;
}
.service-card .mark svg { width: 25px; height: 25px; }
.service-card:hover .mark {
  background: var(--accent-btn);
  border-color: var(--accent-btn);
  color: #fff;
}

/* The cell that closes the grid. Deliberately quieter than a real service
   card — tinted and dashed so it reads as an invitation, not a seventh
   service. The background shorthand also clears the accent wipe.

   It spans both columns: there are six services, so a single-column cell
   would sit next to an empty one. Full width also stops it competing with
   the cards for attention. */
.service-card--ask {
  grid-column: 1 / -1;
  justify-content: center;
  background: var(--wash);
  border-style: dashed;
}
.service-card--ask:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--accent-btn);
}
.service-card--ask h3 { font-size: 21px; color: var(--ink); }
.service-card--ask .desc { margin-bottom: 0; }
.service-card--ask .btn { align-self: flex-start; margin-top: 28px; }

.service-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--accent);
}

.service-card .sub {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--accent-btn);
}

.service-card .desc {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
}

.spec-h {
  margin: auto 0 14px;   /* auto pushes the heading + tags down together, so
                            cards of different text lengths align at the foot */
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--muted);
}

/* capability tags rather than a bulleted list */
.spec-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.spec-list li {
  padding: 7px 13px;
  background: var(--wash);
  border: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
}

/* closing paragraph under the "why" list */
.why-note {
  margin: 30px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---- "why us" editorial split -------------------------------------- */

.why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  margin-top: 110px;
}

.why-figure { position: relative; margin: 0; }
.why-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 6; }
/* thin bracket in the brand blue, offset behind the photo */
.why-figure::after {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1px solid rgba(1, 119, 227, .55);
  z-index: -1;
}

.why h3 {
  margin: 0 0 18px;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--accent);
}
.why p { margin: 0; color: var(--muted); }

/* The checkmarks hang into the column gutter so the heading, paragraph,
   list text and button all share one left edge. */
.why .check-list { margin-top: 30px; border-top: 1px solid var(--rule); }
.why .check-list li {
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
}
.why .check-list .icon { margin-left: -24px; }

.why .btn { margin-top: 36px; }

/* -------------------------------------------------------- contact page --- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.contact-details h2,
.contact-form h2 { margin-bottom: 30px; }

/* ---- message form -------------------------------------------------- */

/* The header is fixed, so an anchored card would otherwise land underneath
   it. Same allowance #main already makes for skip-link jumps. */
.service-card[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

/* The wrapper anchors the focus rule. An <input> cannot carry a
   pseudo-element, so the wipe lives on .field, whose content box ends
   exactly at the input's bottom edge (its margin sits outside). */
.contact-form .field { position: relative; margin-bottom: 22px; }

/* The same gesture the navigation and the buttons use — an accent rule
   drawn in from the left — so a focused field is unmistakable without the
   resting state having to shout. */
.contact-form .field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent-btn);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s cubic-bezier(.2, .7, .3, 1);
  pointer-events: none;
}
.contact-form .field:focus-within::after { transform: scaleX(1); }

/* the label answers too, so the eye is led to the right row */
.contact-form .field:focus-within label { color: var(--accent-btn); }

/* Invalid input, but only once the visitor has actually engaged with the
   field. :invalid would paint every required field red on page load, before
   anyone has typed a character — :user-invalid waits until they have entered
   something and moved on, which is the moment the warning is useful. */
.contact-form input:user-invalid { border-bottom-color: #C0392B; }
.contact-form .field:has(input:user-invalid) label { color: #C0392B; }
.contact-form .field:has(input:user-invalid)::after { background: #C0392B; }

.contact-form label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #4F5B62;
}
.contact-form label .req { color: var(--accent); }

/* Open-ended fields: a single rule under each one rather than a box. The
   filled box was the heaviest element on an otherwise hairline page, and a
   boundary strong enough to satisfy WCAG 1.4.11 only made that worse. A rule
   carries the same information — where to type, and how wide — without
   drawing a container around it. */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 2px;
  font: inherit;
  font-size: 16.5px;
  color: var(--ink);
  background: transparent;
  border: 0;
  /* a shade stronger than --rule so an empty field is findable at a glance,
     while staying far lighter than the boxed version */
  border-bottom: 1px solid #C4D0DC;
  border-radius: 0;
  transition: border-color .2s, box-shadow .2s;
}
.contact-form textarea { min-height: 132px; resize: vertical; }

.contact-form input:hover,
.contact-form textarea:hover { border-bottom-color: #AEBCCA; }

/* Chrome and Safari paint their own background onto an autofilled field.
   On boxed inputs that was invisible; on transparent ones it appears as a
   solid pale block sitting among open fields, and it covers the drafting
   grid behind them. The colour cannot be set directly — deferring the
   transition is the accepted way to stop it ever being painted.
   -webkit-text-fill-color is separate because autofill overrides `color`
   as well. Every selector here is -webkit-prefixed, so browsers that do
   not know the pseudo-class discard the whole rule, which is harmless. */
.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover,
.contact-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  transition: background-color 600000s 0s, border-color .2s, box-shadow .2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  /* .field::after supplies the accent rule; this only clears the resting
     grey from under it so the two do not stack into a muddy edge. */
  border-bottom-color: transparent;
  /* Windows high-contrast mode throws away colours and shadows; a
     transparent outline is the one thing it will still paint. */
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.contact-form .btn { margin-top: 10px; cursor: pointer; }
.contact-form .btn:disabled { opacity: .6; cursor: default; }

/* honeypot — off-screen for people, still filled in by bots */
.contact-form .hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- simple content pages ---------------------------------------------
   404 and the legal pages used to carry their layout in style="" attributes.
   That single habit was the only reason the Content-Security-Policy had to
   allow 'unsafe-inline' for styles, which weakens the policy site-wide — so
   the rules live here instead and the attributes are gone. */

.page-simple {
  padding-top: calc(var(--header-h) + 90px);
  padding-bottom: 120px;
}
.page-simple .container { text-align: center; }
.page-simple .services-lead { margin-inline: auto; }
.page-simple .actions { margin-top: 36px; }

.page-legal { padding-top: calc(var(--header-h) + 60px); }
.page-legal .prose { max-width: 70ch; margin-top: 24px; }
.page-legal .prose h3 {
  margin: 32px 0 10px;
  font-size: 20px;
  /* Without this the browser default for h3 applies — bold, i.e. 700 — and no
     Jost 700 is shipped, so these headings were being drawn as synthesised
     fake bold. Every other h3 on the site is 500; this matches them and uses
     a real face. */
  font-weight: 500;
  color: var(--accent);
}
.page-legal .updated {
  margin-top: 36px;
  font-size: 14px;
  color: var(--muted);
}

.form-status {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
  min-height: 1.5em;
}
.form-status[data-state="ok"]       { color: #1B7F4B; }
.form-status[data-state="sending"],
.form-status[data-state="fallback"] { color: var(--muted); }
.form-status[data-state="error"]    { color: #C0392B; }

/* same micro-label scale as .footer-h */
.contact-details .label {
  margin: 0 0 4px;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-details .value {
  margin: 0 0 28px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
}
.contact-details .value a { text-decoration: none; }
.contact-details .value a:hover { text-decoration: underline; }

.contact-map {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  display: block;
}

.social { margin-top: 30px; }
/* h3, not h4: it follows the "İletişim" h2, and jumping a level leaves a gap
   for anyone navigating the page by heading. The size is set here, so the
   level is free to be whatever the document structure needs. */
.social h3 { font-size: 20px; font-weight: 500; margin-bottom: 12px; }

/* Square hairline buttons rather than filled circles — nothing in the
   rest of the design carries a radius. */
.social-icons { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.social-icons a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;   /* minimum comfortable tap target */
  border: 1px solid rgba(1, 119, 227, .35);
  color: var(--accent);
  transition: background-color .2s, border-color .2s, color .2s;
}
.social-icons a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.social-icons svg { width: 17px; height: 17px; fill: currentColor; }

/* -------------------------------------------------------------- footer --- */

.site-footer {
  background: var(--wash);
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

/* narrower than the content column — the footer reads as a close, not a
   second page */
.site-footer .container { max-width: 1000px; }

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.15fr;
  gap: 44px;
  padding: 62px 0 46px;
}

/* wordmark set in type rather than the logo image */
.footer-wordmark {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 4.5px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s;
}
.footer-wordmark:hover { color: var(--accent); }

.footer-tagline {
  margin: 18px 0 24px;
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

.footer-h {
  margin: 0 0 20px;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink);
}

.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 13px; font-size: 15px; line-height: 1.6; }
.footer-col li:last-child { margin-bottom: 0; }

.footer-col a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.footer-col a:hover { color: var(--accent); }

/* bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--rule);
}

.footer-copy {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 13px;
  letter-spacing: .6px;
  color: var(--muted);
}

.footer-legal {
  font-family: var(--font-nav);
  font-size: 12px;
  letter-spacing: .4px;
  /* was #8A97A2, which is 2.78:1 on the wash footer — a real link well below
     the 4.5:1 AA floor. --muted is 6.5:1 and is already what the copyright
     line beside it uses, so this reads as one row rather than two greys. */
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.footer-legal:hover { color: var(--accent); }
.footer-legal[aria-current="page"] { color: var(--ink); }

.footer-locale {
  display: flex;
  gap: 9px;
  margin: 0;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
}
.footer-locale a, .footer-locale span { color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-locale a:hover { color: var(--accent); }
.footer-locale [aria-current="true"] { color: var(--ink); }

/* The footer sits on --wash, not white, and --accent only measures 4.23:1
   against it — under the 4.5:1 AA wants for normal-size text. Contrast
   requirements apply to hover states too, not just the resting colour, so
   these four take the darker blue already in the palette (6.29:1). */
.footer-wordmark:hover,
.footer-col a:hover,
.footer-legal:hover,
.footer-locale a:hover { color: var(--accent-hero); }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1024px) {
  /* iOS 26 Safari tints the status bar from the background-color of a
     fixed element pinned to the top of the viewport. A transparent or
     semi-transparent header gives it nothing deterministic to sample and
     it lands on a muddy grey, which is what the notch was showing.
     A solid bar fixes that — and makes the legibility scrim redundant.
     --header-solid is overridden per page where the hero behind it is
     near-black, so the bar meets the photo without a seam. */
  .site-header { background: var(--header-solid, #05070D); }
  .site-header::before { display: none; }

  .header-inner { padding: 14px 26px; gap: 16px; }
  .logo img,
  .is-scrolled .logo img { width: 148px; }
  .header-right { gap: 20px; }
  .header-right::before { margin-block: 4px; }

  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: rgba(5, 7, 13, .97);
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .site-nav.is-open { display: block; animation: nav-drop .28s cubic-bezier(.2,.7,.3,1); }
  .site-nav ul { flex-direction: column; }

  .site-nav a,
  .is-scrolled .site-nav a {
    display: block;
    height: auto;
    padding: 19px 26px;
    border-top: 1px solid rgba(255,255,255,.09);
    border-left: 2px solid transparent;
    transition: color .2s, background-color .2s, border-color .2s;
  }
  .site-nav li:first-child a { border-top: 0; }
  .site-nav a::after { display: none; }
  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    background: rgba(255,255,255,.06);
    border-left-color: var(--accent-btn);
  }

  @keyframes nav-drop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }

  /* The home page is the hero and nothing else now, so this has to reach the
     bottom of the screen: a flat 600px left a band of bare page below it on
     anything taller (168px on a landscape iPad). max() keeps the old floor for
     short landscape viewports, and the plain 600px above it is the fallback
     for browsers that do not know svh -- they lose nothing they had before. */
  .home-hero { min-height: 600px; min-height: max(600px, 100svh); }
  .home-hero-inner { padding-top: 150px; }
  .home-hero h1 { margin: 0; font-size: 44px; letter-spacing: 7px; }
  .home-hero h2 { font-size: 24px; letter-spacing: 4px; }
  .hero-wires { display: none; }

  /* The bar above is opaque at this width, so anything under it is hidden
     rather than showing through — the inner heroes were losing their top
     third to it and the photograph read as cropped. Inset the image below
     the header and add the same amount back to the height, so the banner
     still shows at its designed size.

     background-origin keeps the photo and its scrim inside the padding; the
     strip left behind the header falls back to the hero's own base colour,
     which is the header colour, so an imprecise --header-h can't show a seam. */
  :root { --header-h: 111px; }

  .page-hero {
    padding-top: var(--header-h);
    min-height: calc(400px + var(--header-h));
    background-origin: content-box;
  }
  .page-hero h1 { margin: 0; font-size: 50px; letter-spacing: 7px; }

  /* Vertical only — .container owns the side gutter. Setting it here too
     stacked the two and squeezed the content column. */
  .section { padding: 80px 0; }
  .section h2 { font-size: 38px; }

  .service-grid { gap: 20px; margin-top: 44px; }
  .service-card { padding: 32px 28px 28px; }
  .services-lead { font-size: 17px; }

  .intro { grid-template-columns: 1fr; gap: 24px; }
  .pillars { margin-top: 60px; }
  .pillar { padding: 34px 34px 34px 0; }
  .pillar:nth-child(even) { padding-left: 34px; }


  .why { grid-template-columns: 1fr; gap: 46px; margin-top: 70px; }
  .why-figure::after { inset: 16px -16px -16px 16px; }
  .why h3 { font-size: 29px; }

  .contact-grid { gap: 40px; }

  .site-footer .container { max-width: none; }
  .footer-top { gap: 32px; padding: 54px 0 40px; }
}

@media (max-width: 767px) {
  .header-inner { padding: 12px 18px; }
  .logo img,
  .is-scrolled .logo img { width: 124px; }
  .header-right { gap: 14px; }
  .lang { font-size: 11px; letter-spacing: 1.2px; gap: 3px; }
  /* the locale links are 11px of text — pad them out to a real tap target */
  .lang a, .lang > span { padding: 16px 5px; }

  /* --- mobile home hero -------------------------------------------- */
  /* Bottom-anchored and left-aligned rather than floating centred type.
     The photograph is 16:9, so the portrait crop shifts right to keep the
     apron and control tower in frame instead of centring on empty sky. */

  .home-hero {
    min-height: 640px;
    min-height: 100svh;
    align-items: flex-end;
    background-position: 72% center;
  }

  /* scrim so the copy sits on solid ground instead of over runway lights */
  .home-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 72%;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(to top,
      rgba(5,7,13,.94) 0%, rgba(5,7,13,.72) 34%, rgba(5,7,13,0) 100%);
  }

  .home-hero-inner {
    padding: 0 24px 56px;
    text-align: left;
  }

  /* short accent rule above the headline */
  .home-hero-inner::before {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    margin-bottom: 24px;
    background: var(--accent-btn);
  }

  .home-hero h1 {
    margin: 0 0 16px;
    font-size: 31px;
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: .5px;
  }

  .home-hero h2 {
    margin: 0;
    max-width: 30ch;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: .2px;
    text-transform: none;      /* sentence case reads better at this size */
    color: rgba(255, 255, 255, .74);
  }

  .home-hero .btn { margin-top: 32px; font-size: 12px; padding: 18px 34px; gap: 10px; }
  .btn--hero::after { width: 15px; }

  /* The wireframe overlays stay off on phones — at this size they crowd
     the photograph rather than adding depth. */
  .hero-wires { display: none; }

  /* The airways do stay, and get the full width here. The SVG is sliced to
     fill its box, so a narrow box crops the fan rather than shrinking it:
     at the desktop 56% only about 43% of the airways were reaching a phone
     screen, which is why it read as three stray lines instead of a network.
     Full width plus a shallower band puts roughly 80% of them on screen.

     This costs nothing to load — the SVG is already inline in the page, so
     showing more of it is not another request — and it cannot affect the
     iOS status bar, which samples body's background-color, not this layer. */
  .routes {
    width: 100%;
    --routes-sky: 38%;
    -webkit-mask-image: radial-gradient(112% 128% at 30% 48%, #000 0%, #000 58%, transparent 100%);
            mask-image: radial-gradient(112% 128% at 30% 48%, #000 0%, #000 58%, transparent 100%);
  }

  /* the four extra airways and three extra aircraft, phones only */
  .routes .m-only { display: inline; }

  /* Every inner hero now carries its own photograph, so they all keep it
     here — no stand-in still is needed at this width any more. */
  :root { --header-h: 94px; }

  .page-hero { min-height: calc(300px + var(--header-h)); }
  .page-hero--contact { background-position: 66% center; }
  .page-hero h1 { font-size: 35px; letter-spacing: 3px; }

  .section { padding: 58px 0; }
  .section h2 { font-size: 31px; }
  .services-lead { font-size: 18px; }
  .service-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
  .service-card { padding: 28px 24px 26px; }
  .service-card h3 { font-size: 20px; }
  .service-card .sub { font-size: 14px; }
  .spec-list li { font-size: 13px; padding: 6px 11px; }

  .pillars { grid-template-columns: 1fr; margin-top: 44px; }
  .pillar,
  .pillar:nth-child(odd),
  .pillar:nth-child(even) { padding: 28px 0; border-right: 0; }
  .pillar h3 { font-size: 23px; }

  .section--grid::before { background-size: 52px 52px; }
  .section--grid::after { background-size: 52px 52px, 52px 52px, 100% 100%; }


  .why { margin-top: 55px; gap: 38px; }
  .why h3 { font-size: 24px; }

  /* No gutter to hang into on a phone, so the checkmarks sit on the same
     left edge as the heading and button, with the label indented. */
  .why .check-list .icon { margin-left: 0; }
  .why .check-list li { padding-block: 12px; font-size: 15px; }

  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-details .value { font-size: 20px; margin-bottom: 22px; }
  .contact-details .value a { display: inline-block; padding-block: 7px; }

  /* footer stacks on a phone */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 46px 0 34px;
  }
  .footer-wordmark { font-size: 18px; letter-spacing: 3.5px; padding-block: 11px; }
  .footer-tagline { max-width: none; margin: 10px 0 20px; }
  .footer-h { margin-bottom: 8px; }

  /* comfortable tap targets rather than 18px-tall text links */
  .footer-col li { margin-bottom: 0; }
  .footer-col a { display: inline-block; padding-block: 10px; }
  .footer-legal { display: inline-block; padding-block: 11px; }
  .prose a { display: inline-block; padding-block: 8px; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 0 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wires img { transform: none !important; }
  * { transition-duration: .01ms !important; }
  .btn:hover, .btn:focus-visible { transform: none; }
  .section--grid::after { display: none; }
  .site-nav.is-open { animation: none; }
}