/* =========================================================
   AVIO GROUP BG – main stylesheet
   ---------------------------------------------------------
   Colours are defined once below. Change them here and the
   whole website updates.
   ========================================================= */

:root {
  --blue:        #0b3a82;   /* main accent blue (buttons, links, lines) */
  --blue-light:  #3a72c4;   /* lighter blue for hover effects           */
  --navy:        #06142e;   /* dark blue used for sections/backgrounds  */
  /* faint blue dot grid that fades out towards the bottom of each section.
     Used behind the dark sections of the Contacts, Projects, Simulation and
     About pages. The fade has two versions: one ending in black and one in
     dark blue, matching the section's own colour. */
  --dots: radial-gradient(rgba(58, 114, 196, 0.22) 1.2px, transparent 1.4px) 0 0 / 22px 22px;
  --dots-fade-black: linear-gradient(to bottom, rgba(11, 13, 16, 0.2), var(--black) 85%);
  --dots-fade-navy: linear-gradient(to bottom, rgba(6, 20, 46, 0.2), var(--navy) 85%);
  /*--accent:      #C5A46D;   /* amber – used only in small details for contrast */
  --accent:      #3a72c4;   /*amber – used only in small details for contrast */
  --black:       #0b0d10;   /* near-black for header and footer         */
  --white:       #ffffff;
  --grey-light:  #f3f5f8;   /* light background for alternate sections  */
  --grey-text:   #5b6573;   /* secondary text                           */
  --text:        #1a1d22;   /* main text colour                         */

  --header-height: 80px;
  --max-width: 1200px;
  --radius: 6px;
  /* DM Sans (same font as getcyberware.com), stored in the fonts folder */
  --font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- DM Sans web font (free, SIL Open Font License) ---------- */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Regular-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Regular-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Italic-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
  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;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Italic-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
  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;
}

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

html {
  background: var(--black);   /* shown when scrolling past the top/bottom edge */
  scroll-behavior: smooth;
  /* so anchor links don't hide under the fixed header */
  scroll-padding-top: calc(var(--header-height) + 70px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
}

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

/* <picture> only chooses between the AVIF / WebP / JPG copy of a photo;
   it is a plain box around the <img> */
picture {
  display: block;
  min-width: 0;
}

a {
  color: var(--blue);
  text-decoration: none;
}

/* no blue/grey flash over links and buttons when tapped on phones */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

a:hover {
  color: var(--blue-light);
}

h1, h2, h3, h4 {
  line-height: 1.25;
  margin: 0 0 0.6em;
  font-weight: 700;
}

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

/* =========================================================
   HEADER & NAVIGATION
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  --header-opacity: 1;
  background-color: rgba(11, 13, 16, var(--header-opacity));
}

/* Drop shadow under the menu bar (fades in with the bar on the home page) */
.site-header {
  box-shadow: 0 2px 14px rgba(0, 0, 0, calc(0.45 * var(--header-opacity)));
}

/* when the quick selection bar is stuck under the menu, the two form
   one black block: no shadow between them, only a faint hairline */
.site-header.joined {
  box-shadow: none;
}

.quick-nav.stuck {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* On the home page the header starts transparent over the photo
   carousel and slowly fades to solid black while you scroll down.
   main.js sets --header-opacity from 0 (top of page) to 1. */
.site-header.fade-on-scroll {
  --header-opacity: 0;
  /* light shadow at the top so the menu is readable over bright photos */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, calc(0.55 * (1 - var(--header-opacity)))), rgba(0, 0, 0, 0));
}

.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo picture (images/logos/aviogroup-logo-full-dark-bg.png) */
.logo {
  display: block;
  flex-shrink: 0;
}

.logo-img {
  height: var(--logo-h, 44px);
  width: auto;
}

/* height of the logo in the menu bar – the hamburger bars use it too,
   so they always line up with the wings of the logo */
.site-header {
  --logo-h: 44px;
}

/* text part of the logo – larger so the tagline is easy to read, and
   always starting 36px to the right of the visible part of the emblem
   (the footer columns begin max(20px, …) from the left screen edge) */
.site-footer .logo-img {
  height: 104px;
  max-width: none;
  object-fit: contain;
  object-position: left;
  margin-left: calc(var(--emblem-visible) + 36px - max(20px, (100vw - var(--max-width)) / 2 + 20px));
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 32px;
}

.main-nav a {
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 0;
  position: relative;
}

/* Underline under the menu item: hidden (width 0) and grows
   from the centre outwards on hover and for the current page. */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--blue-light);
}

.main-nav a:hover::after,
.main-nav a.active::after {
  transform: scaleX(1);
}

/* the current page's underline also grows in when the page opens */
.main-nav a.active::after {
  animation: underline-grow 0.6s ease 0.2s backwards;
}

@keyframes underline-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Hamburger button – only visible on small screens.
   Three white bars, getting shorter downwards, with the right ends cut at
   an angle like the wings of the emblem. When the menu opens (main.js adds
   "open") the top and bottom bars turn into an X and the middle one hides. */
.menu-toggle {
  display: none;
  position: relative;
  /* same height as the logo and centred like it, so the bars sit at
     exactly the same height as the three wings of the logo
     (wing positions measured from the logo file: 4, 45 and 86 of 192px,
     each 19px thick) */
  --bar-h: calc(var(--logo-h) * 19 / 192);
  --bar-step: calc(var(--logo-h) * 41 / 192);
  width: 38px;
  height: var(--logo-h);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  right: 0;
  height: var(--bar-h);
  background: var(--white);
  /* right end slanted like the emblem wings */
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--bar-h) * 0.45) 100%, 0 100%);
  transition: transform 0.35s ease, opacity 0.25s ease, width 0.35s ease, clip-path 0.35s ease;
}

.menu-toggle span:nth-child(1) { top: calc(var(--logo-h) * 4 / 192);  width: 32px; }
.menu-toggle span:nth-child(2) { top: calc(var(--logo-h) * 45 / 192); width: 27px; }
.menu-toggle span:nth-child(3) { top: calc(var(--logo-h) * 86 / 192); width: 22px; }

.menu-toggle.open span {
  width: 32px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.menu-toggle.open span:nth-child(1) { transform: translateY(var(--bar-step)) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.open span:nth-child(3) { transform: translateY(calc(var(--bar-step) * -1)) rotate(-45deg); }

/* =========================================================
   HOME – FULL SCREEN PHOTO CAROUSEL
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: var(--black);
}

/* layer with all photos – moved by main.js for the parallax effect */
.hero-slides {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.5s ease, transform 7s ease;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

/* soft neutral shade (no colour tint) only where the text sits – the menu
   at the top, the tagline on the right, the button at the bottom – so the
   photos keep their original colours and the white text stays readable */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 30%),
    linear-gradient(to left, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 55%),
    linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 35%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--white);
  padding: 0 20px;
  /* pushes the title above the centre – increase to move it higher */
  padding-bottom: 60vh;
}

/* "Our Services" button – bottom right corner of the carousel,
   transparent with square corners, fills in white on hover */
.hero-button {
  position: absolute;
  right: 3vw;                /* same distance from the edge as the title */
  bottom: 70px;
  z-index: 3;
  animation: fade-in-up 1.6s ease 0.9s both;   /* fades in just after the title */
  padding: 22px 62px;
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 0;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}

.hero-button:hover {
  background: var(--white);
  color: var(--black);
}

/* Title block on the carousel: title with the key words in blue and
   a thin blue line on the left – same style as the rest
   of the site. */
.hero-title {
  align-self: flex-end; /* on the right side of the screen ... */
  margin-right: 3vw;    /* ... with some space to the right edge */
  max-width: 430px;     /* about as wide as the text, so it sits near the edge */
  text-align: left;
  animation: fade-in-up 1.6s ease 0.3s both;   /* fades in when the page opens */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-title h1 {
  margin: 0;
  padding-left: 22px;
  border-left: 2px solid var(--blue-light);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero-title h1 .highlight {
  color: #6c9fe8;   /* lighter version of --blue-light, easier to read over photos */
}

/* Thin bars on the bottom edge – one per photo.
   They stay hidden below the carousel and slide up when the mouse is
   in the bottom quarter of the carousel (main.js adds "show-indicators"). All bars are white – the current photo's bar is brighter; when
   the photo changes it fades out and the next one fades in. */
.hero-indicators {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
  transform: translateY(100%);       /* hidden below the bottom edge */
  transition: transform 0.5s ease;
}

.hero.show-indicators .hero-indicators {
  transform: translateY(0);          /* slides up while hovering the bottom */
}

/* phones / tablets have no mouse – keep the bars visible there */
@media (hover: none) {
  .hero-indicators {
    transform: none;
  }
}

.hero-indicators button {
  width: 60px;
  height: 22px;              /* bigger click area than the visible bar */
  padding: 18px 0 0;         /* visible bar = bottom 4px                */
  background: var(--white);
  background-clip: content-box;
  border: 0;
  border-radius: 0;
  opacity: 0.15;             /* bars of the other photos: very faint     */
  cursor: pointer;
  transition: opacity 1.5s ease;
}

.hero-indicators button:hover {
  opacity: 0.4;
}

.hero-indicators button.active {
  opacity: 0.85;             /* current photo: brighter white */
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-block;
  padding: 14px 34px;
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  border-radius: var(--radius);
  border: 2px solid var(--blue);
  transition: all 0.25s ease;
}

.btn:hover {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--blue);
}

.btn-outline:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

/* =========================================================
   GENERAL SECTIONS
   ========================================================= */
.section {
  padding: 90px 0;
}

.section-grey {
  background: var(--grey-light);
}

.section-dark {
  background: var(--navy);
  color: var(--white);
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
}

.section-title h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* small blue line under section titles */
.section-title h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--blue);
  margin: 16px auto 0;
}

.section-title p {
  color: var(--grey-text);
  max-width: 700px;
  margin: 0 auto;
}

.section-dark .section-title p {
  color: rgba(255, 255, 255, 0.75);
}

/* Banner at the top of every inner page – same style as the home
   carousel: photo under the transparent menu, soft shade behind the text, title
   with a thin blue line and the key word in blue. The photo moves
   slower than the page when scrolling (see main.js). */
.page-banner {
  position: relative;
  height: 44vh;
  min-height: 320px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: flex-end;
  padding-bottom: 48px;
}

.banner-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* PARALLAX – the carousel / page banner photos scroll slower than the
   text. The browser moves them directly with the scrolling, so they move
   perfectly smoothly. Speed: the photo moves down 60% of the distance
   scrolled (72vh over the first 120vh), i.e. it scrolls at 40% of the
   page speed – keep PARALLAX_SPEED in main.js the same (older browsers
   use main.js instead). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-slides,
    .banner-photo {
      animation: parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 120vh;
    }
  }
}

@keyframes parallax {
  from { transform: translateY(0); }
  to   { transform: translateY(72vh); }
}

/* Services page: the banner height follows the page width (the photo is
   2:1), so the whole helicopter is shown the same way on every screen. */
.page-banner.banner-services {
  height: 50vw;
  max-height: 90vh;
}

/* Projects page: a bit taller than the other banners so the whole
   helicopter (rotor included) fits below the menu bar. On wider screens
   the photo is 20% bigger and aligned to the left edge, so the helicopter
   ends up on the right side, away from the title. On phones the normal
   centred photo is used. */
.page-banner.banner-projects {
  height: 56vh;
}

/* Contacts page: height follows the page width (like Services) so the
   helicopter and the H on the helipad below it are both in view. On wider
   screens the photo is 15% bigger and aligned to the left edge, which moves
   the H to the right, out from under the title. */
.page-banner.banner-contacts {
  height: 44vw;
  max-height: 90vh;
}

.banner-contacts .banner-photo {
  background-position: center 92%;
}

@media (min-width: 900px) {
  .banner-photo-right {
    background-size: 120% auto;
    background-position: left 37%;
  }

  .banner-contacts .banner-photo {
    background-size: 115% auto;
    background-position: left 96%;
  }
}

/* Contacts page: lighter shade at the bottom so the H on the helipad shows */
.page-banner.banner-contacts::after {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 30%),
    linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 55%),
    linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 45%);
}

/* soft neutral shade (no colour tint) behind the menu at the top and the
   title at the bottom-left – the rest of the photo keeps its colours */
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 30%),
    linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 55%),
    linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%);
}

/* Simulation page: lighter shade so more of the photo shows */
.page-banner.banner-simulation::after {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 30%),
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 50%),
    linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 50%);
}

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

.banner-title {
  padding-left: 22px;
  border-left: 2px solid var(--blue-light);
  animation: fade-in-up 1.4s ease 0.2s both;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.banner-title h1 {
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.banner-title h1 .highlight {
  color: #6c9fe8;   /* lighter version of --blue-light, easier to read over photos */
}

.banner-title p {
  margin: 12px 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.75);
}


/* =========================================================
   HOME – "WHAT WE DO" CARDS
   ========================================================= */
/* ---------- What we do (home page) ----------
   Dark section that continues from the partners strip. Each service is
   a row with a thin blue line on the left (like the carousel title).
   main.js adds "slide-in" (start) and "visible" (end) for the animation:
   the row fades in from the left, then its blue line draws downwards. */
.services-overview {
  background: linear-gradient(to bottom, var(--black), var(--navy));
  color: var(--white);
  overflow-x: hidden;
  padding-top: 70px;
}

.services-title {
  max-width: 980px;
  margin: 0 auto 36px;
}

.cards {
  display: flex;
  flex-direction: column;   /* one service per row */
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}

.card {
  position: relative;
  display: flex;
  gap: 36px;
  padding: 48px 44px 48px 48px;
  min-height: 190px;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(58, 114, 196, 0.5);
}

/* thin blue line on the left of each row */
.card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--blue-light);
  transform-origin: top;
  transition: transform 0.7s ease;
  transition-delay: calc(var(--delay, 0s) + 0.5s);
}

.card-icon {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
}

.card h3 {
  margin: 4px 0 12px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

/* animation: start position (only when JavaScript runs) */
.card.slide-in {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease, border-color 0.3s ease;
  transition-delay: var(--delay, 0s), var(--delay, 0s), 0s, 0s;
}

.card.slide-in::before {
  transform: scaleY(0);
}

.card.slide-in.visible {
  opacity: 1;
  transform: translateX(0);
}

.card.slide-in.visible::before {
  transform: scaleY(1);
}

/* "All services" link under the rows */
.services-more {
  display: table;
  margin: 36px auto 0;
  padding: 14px 40px;
  border: 2px solid var(--white);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: background 0.3s ease, color 0.3s ease;
}

.services-more:hover {
  background: var(--white);
  color: var(--black);
}

/* Tagline below the carousel – dark band that flows into the black
   partners strip, white uppercase text, key words in blue */
.tagline-section {
  background: linear-gradient(to bottom, var(--navy), var(--black));
  color: var(--white);
  padding: 56px 0 20px;
}

.intro {
  text-align: center;
}

.intro-tagline {
  display: inline-block;
  margin: 0 auto;
  font-size: clamp(1.25rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.intro-tagline .highlight {
  color: var(--blue-light);
}

/* The tagline slides down from under the carousel: the section clips
   everything above its top edge, so the text appears from behind it.
   main.js adds "drop-in" (start position) and "visible" (end position). */
.tagline-section {
  overflow: hidden;
}

.intro-tagline.drop-in {
  opacity: 0;
  transform: translateY(-160%);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease;
}

.intro-tagline.drop-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* text that is only for search engines / screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* =========================================================
   HOME – PARTNERS LOGO CAROUSEL (always moving)
   ========================================================= */
.partners {
  padding: 36px 0 20px;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}

.logo-strip {
  overflow: hidden;
  position: relative;
  /* fade the logos out on the left and right edges */
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

/* The strip moves left by exactly one set of logos and then starts again,
   so the loop is seamless. main.js measures the set (--loop-width) and adds
   enough copies to fill wide screens. It keeps moving under the mouse. */
.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scroll-logos 35s linear infinite;
}

/* Section heading with a blue line running to the right
   (used for "Trusted Partners of:" and "What we do") */
.line-title {
  display: flex;
  align-items: center;
  gap: 24px;
}

.line-title h2 {
  margin: 0;
  min-width: 0;         /* the blue line starts right after the text */
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.title-line {
  flex: 1;
  height: 2px;
  background: var(--blue-light);
}

/* partners: small title at the left edge of the screen, line stops a
   little before the right edge. --edge-space sets the space on both sides. */
.partners-title {
  --edge-space: 40px;
  padding: 0 var(--edge-space);
  margin-bottom: 22px;
}

.partners-title h2 {
  min-width: 0;
  font-size: 1.05rem;
  letter-spacing: 1px;
}

/* partner logos should be WHITE on a transparent background */
.logo-track img {
  height: 44px;
  margin-right: 80px;   /* space after every logo (also the last one) */
  width: auto;
  max-width: 280px;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

/* for square-ish logos (like Trimpeks) that look too small at 44px */
.logo-track img.logo-tall {
  height: 76px;
}

.logo-track img.logo-medium {
  height: 58px;
}

/* round / shield emblems (Air Force, Border Police) need more height */
.logo-track img.logo-emblem {
  height: 96px;
}

.logo-track img:hover {
  opacity: 1;
}

@keyframes scroll-logos {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--loop-width, 50%))); }
}

/* =========================================================
   HOME – PROJECTS & CONTACT PANELS (white section before the footer)
   ========================================================= */
.explore {
  background: var(--white);
  padding: 44px 0 44px;
}

.explore-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;   /* projects panel wider than contact panel */
  gap: 28px;
  max-width: 1280px;
}

/* shared look of both panels – the whole panel is one big link */
.panel {
  position: relative;
  display: flex;
  border-radius: 0;          /* square corners, like the rest of the site */
  overflow: hidden;
  color: inherit;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(6, 20, 46, 0.22);
}

.panel h2 {
  margin: 14px 0 16px;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.panel p {
  margin: 0 0 22px;
  line-height: 1.7;
}

/* small blue label with a short line, like the other section titles */
.panel-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--blue-light);
}

.panel-label::after {
  content: "";
  width: 48px;
  height: 2px;
  background: currentColor;
}

/* "View projects →" / "Contact us →" */
.panel-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 14px 32px;
  border: 2px solid currentColor;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ----- projects panel: light grey, photos left, text right ----- */
.panel-projects {
  --line: var(--blue);
  /* subtle texture: fine blue dot grid (like technical drawing paper)
     with a soft light glow behind the text */
  background:
    radial-gradient(ellipse at 75% 50%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%),
    radial-gradient(rgba(11, 58, 130, 0.14) 1.2px, transparent 1.4px) 0 0 / 16px 16px,
    var(--grey-light);
  border: 1px solid #e3e7ee;
  min-height: 480px;
}

/* three landscape photos under each other, the middle one shifted right */
.photo-stack {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 28px 0 28px 28px;
}

.photo-stack img {
  width: 82%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 8px 22px rgba(6, 20, 46, 0.18);
  transition: transform 0.6s ease;
}

.photo-stack picture:nth-child(2) img {
  margin-left: 18%;          /* offset to the right */
}

.photo-stack picture:nth-child(3) img {
  margin-left: 6%;
}

.panel-projects:hover .photo-stack img {
  transform: translateX(6px);
}

.panel-projects:hover .photo-stack picture:nth-child(2) img {
  transform: translateX(-6px);
}

.panel-projects .panel-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* text block centred vertically ... */
  align-items: center;       /* ... and horizontally */
  text-align: center;
  padding: 44px 40px;
  color: var(--text);
}

.panel-projects h2 {
  color: var(--navy);
}

.panel-projects p {
  color: var(--grey-text);
}

.panel-tags {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.panel-tags li {
  padding: 5px 12px;
  border: 1px solid #cfd6e1;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--navy);
}

.panel-projects .panel-cta {
  color: var(--navy);
  align-self: center;
  margin-top: 0;
}

.panel-projects:hover .panel-cta {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* ----- contact panel: dark, like the rest of the site ----- */
.panel-contact {
  flex-direction: column;
  padding: 44px 40px;
  background: linear-gradient(160deg, var(--navy), var(--black));
  color: var(--white);
}

.panel::before {              /* thin blue line on the left of both panels */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 1;
  background: var(--line, var(--blue-light));
}

.panel-contact:hover {
  color: var(--white);     /* keep the text white (links turn blue on hover by default) */
}

.panel-contact p {
  color: rgba(255, 255, 255, 0.72);
}

.panel-details {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

.panel-details li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.98rem;
}

.panel-details span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--blue-light);
}

.panel-contact:hover .panel-cta {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

/* tablets: panels under each other */
@media (max-width: 1000px) {
  .explore-grid { grid-template-columns: 1fr; }
}

/* phones: photos above the text */
@media (max-width: 700px) {
  .panel-projects { flex-direction: column; min-height: 0; }
  .photo-stack { flex-basis: auto; padding: 22px 22px 0; }
  .panel-projects .panel-text,
  .panel-contact { padding: 30px 24px; }
  .explore { padding: 50px 0; }
}

/* =========================================================
   SERVICES PAGE
   ========================================================= */
/* Dark section like "What we do" on the home page */
.section.services-detail {
  background: linear-gradient(to bottom, var(--black), var(--navy));
  color: var(--white);
  padding: 0;
  overflow-x: clip;
}

/* One group = a full-width band. Its photo is the background of the band
   on the left and fades out to the right. The bands sit directly on top
   of each other, so the photos touch with no gaps. */
.service-group {
  position: relative;
  margin: 0 calc(50% - 50vw);          /* stretch to the full screen width */
  padding: 90px max(20px, calc((100vw - var(--max-width)) / 2 + 20px));
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
}

.group-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 62%;
  background-size: cover;
  background-position: center;
  /* fades out to the right (transparent, so the section background shows) */
  -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 100%);
  mask-image: linear-gradient(to right, #000 35%, transparent 100%);
}

/* darkening so the white text stays readable */
.group-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 12, 24, 0.85), rgba(6, 12, 24, 0.55));
}

/* group title – stays in view while scrolling through the group */
.group-photo-text {
  position: sticky;
  top: calc(var(--header-height) + 110px);
  align-self: start;
  z-index: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  padding-left: 22px;
  border-left: 2px solid var(--blue-light);   /* same as the page title */
}

.group-photo-text h2 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--white);
}

/* services list over the faded part of the photo */
.group-body {
  position: relative;
  z-index: 1;
}

.service-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* each service is a small dark card with a blue line on the left */
/* each service: a solid dark card (frosted, so a bright photo behind
   it never washes out the white text), blue marker on the left */
.service-items li {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px 22px 22px;
  background: rgba(10, 14, 22, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.6;
  color: #eef2f8;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* short blue bar before the text */
.service-items li::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 2px;
  margin-top: 0.8em;
  background: var(--blue-light);
  transform-origin: left;
  transition: transform 0.3s ease;   /* grows without moving the text */
}

/* the text: on hover a light blue sheen sweeps across the letters */
.service-items li span {
  background: linear-gradient(105deg, #eef2f8 0%, #eef2f8 40%, #8fb4ec 50%, #eef2f8 60%, #eef2f8 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 0.9s ease;
}

.service-items li:hover span {
  background-position: 0 0;
}

.service-items li:hover {
  background: rgba(14, 22, 38, 0.94);
  border-color: rgba(58, 114, 196, 0.55);
  color: var(--white);
  transform: translateY(-2px);
}

.service-items li:hover::before {
  transform: scaleX(1.6);
}

/* groups fade up when scrolled into view (main.js adds the classes) */
/* only the text and service boxes fade up – the photos stay still */
.service-group.slide-in .group-body,
.service-group.slide-in .group-photo-text {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.service-group.slide-in.visible .group-body,
.service-group.slide-in.visible .group-photo-text {
  opacity: 1;
  transform: none;
}

/* medium screens: one column of services */
@media (max-width: 1150px) {
  .service-group { grid-template-columns: 300px 1fr; gap: 40px; }
  .service-items { grid-template-columns: 1fr; }
}

/* tablets / phones: photo on top of the band, fading downwards */
@media (max-width: 900px) {
  .service-group { grid-template-columns: 1fr; gap: 28px; padding: 200px 20px 50px; }
  .group-photo { width: 100%; height: 340px; bottom: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); }
  .group-photo-text { position: relative; top: 0; }
}

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

.check-list li {
  position: relative;
  padding: 10px 0 10px 34px;
  border-bottom: 1px dashed #e1e5eb;
}

.check-list li:last-child {
  border-bottom: 0;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 0.75rem;
  line-height: 22px;
  text-align: center;
}

/* =========================================================
   COMPLETED PROJECTS PAGE
   ========================================================= */

/* Quick selection bar – sticks under the header.
   Black like the menu, with the same "grow from the centre"
   underline as the main menu. */
.quick-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 50;
  background: var(--black);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.quick-nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0 20px;
  max-width: var(--max-width);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* thin divider between the items */
.quick-nav li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-nav a {
  position: relative;
  display: block;
  padding: 20px 28px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: color 0.3s ease;
}

/* underline that grows from the centre */
.quick-nav a::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 12px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.35s ease;
}

/* the underline marks the section you are currently looking at
   (main.js moves the "active" class while you scroll) */
.quick-nav a.active {
  color: var(--white);
}

.quick-nav a.active::after {
  transform: scaleX(1);
}

/* hover underline only with a mouse – phones would keep it on the tapped
   link. After a click it stays off until the mouse leaves the link, so it
   does not stick while you scroll (main.js adds "clicked"). */
@media (hover: hover) {
  .quick-nav a:not(.clicked):hover {
    color: var(--white);
  }

  .quick-nav a:not(.clicked):hover::after {
    transform: scaleX(1);
  }
}

/* Menus with many links (Completed Projects, class "long"): wider and a
   little smaller, so all links fit on one line on big screens */
@media (min-width: 961px) {
  .quick-nav.long ul {
    max-width: 1400px;
  }

  .quick-nav.long a {
    padding: 20px 18px;
    font-size: 0.78rem;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .quick-nav.long a::after {
    left: 18px;
    right: 18px;
  }
}

@media (min-width: 961px) and (max-width: 1300px) {
  .quick-nav.long a {
    padding: 18px 13px;
    font-size: 0.7rem;
    letter-spacing: 0.8px;
  }

  .quick-nav.long a::after {
    left: 13px;
    right: 13px;
  }
}

/* One project: photo on one side, text on the other */
.project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 90px 0;
}

/* every second project swaps sides (photo right, text left) */
.project.reverse .project-photos {
  order: 2;
}

.project-photos {
  display: grid;
  gap: 14px;
}

.project-photos img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* If you add a 2nd and 3rd photo, they appear as small photos underneath */
.project-photos .thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.project-photos .thumbs img {
  height: 160px;
}

/* only 1 extra photo – add "thumbs-1": it fills the full width, a bit taller */
.project-photos .thumbs.thumbs-1 {
  grid-template-columns: 1fr;
}

.project-photos .thumbs.thumbs-1 img,
.project-wrapper.dark .project-photos .thumbs.thumbs-1 img {
  height: 240px;
}

/* 3 small photos in a row instead of 2 – add "thumbs-3" to the thumbs block */
.project-photos .thumbs.thumbs-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.project-text .label {
  display: inline-block;
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.project-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--navy);
}

.project-text p {
  color: var(--grey-text);
}

.project-wrapper:nth-child(even) {
  background: var(--grey-light);
}

/* ----- Completed projects page: dark style like the rest of the site.
   Each project is a dark band (alternating black / dark blue), photos
   with square corners, white title with a thin blue line on the left. */
.project-wrapper.dark {
  background: var(--dots-fade-black), var(--dots), var(--black);
  color: var(--white);
}

.project-wrapper.dark:nth-child(even) {
  background: var(--dots-fade-navy), var(--dots), linear-gradient(to bottom, #0b1220, var(--navy));
}

/* thin divider between projects */
.project-wrapper.dark + .project-wrapper.dark {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.project-wrapper.dark .project {
  gap: 70px;
  padding: 100px 20px;
}

.project-wrapper.dark .project-photos {
  gap: 10px;
}

.project-wrapper.dark .project-photos img {
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  height: 380px;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: saturate(0.9);
}

.project-wrapper.dark .project-photos .thumbs {
  gap: 10px;
}

.project-wrapper.dark .project-photos .thumbs img {
  height: 170px;
}

.project-wrapper.dark .project-photos img:hover {
  filter: saturate(1.05);
}

/* Simulation: "Photos coming soon" tile in place of the photos */
.photo-coming-soon {
  height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid rgba(58, 114, 196, 0.35);
  background: var(--dots), linear-gradient(135deg, #0e1d3a, var(--navy));
  color: var(--white);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.photo-coming-soon svg {
  width: 52px;
  height: 52px;
  fill: var(--blue-light);
}

.photo-coming-soon span {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* photos are wrapped so they can zoom on hover without growing */
.project-wrapper.dark .project-photos,
.project-wrapper.dark .project-photos .thumbs {
  overflow: hidden;
}

.project-wrapper.dark .project-text {
  padding-left: 26px;
  border-left: 2px solid var(--blue-light);   /* same as the page titles */
}

.project-wrapper.dark .project-text .label {
  color: var(--blue-light);
  letter-spacing: 3px;
  margin-bottom: 14px;
}

.project-wrapper.dark .project-text h2 {
  margin: 0 0 22px;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--white);
}

.project-wrapper.dark .project-text p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
}

/* projects fade up when scrolled into view (main.js adds the classes) */
.project-wrapper.dark .project.slide-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.project-wrapper.dark .project.slide-in.visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   ABOUT PAGE – dark style like the rest of the site
   ========================================================= */

/* "Who we are": heading with blue line, large lead paragraph */
.about-intro {
  /* faint dot grid, same as Contacts (see --dots at the top of this file) */
  background: var(--dots-fade-black), var(--dots), var(--black);
  color: var(--white);
  padding: 100px 0 90px;
}

/* three key facts under the introduction */
.about-facts {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.about-facts li {
  padding: 28px 24px 0 0;
}

.about-facts li + li {
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.about-facts strong {
  display: block;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--white);
}

.about-facts span {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--blue-light);
}

.about-intro .line-title {
  margin-bottom: 34px;
}

.about-lead {
  margin: 0;
  max-width: 980px;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
}

/* text sections: heading on the left, text on the right,
   separated by a fine line (no photos) */
.about-row {
  background: var(--dots-fade-black), var(--dots), var(--black);
  color: var(--white);
  padding: 80px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.about-row.alt {
  background: var(--dots-fade-navy), var(--dots), linear-gradient(to bottom, #0b1220, var(--navy));
}

.about-row-inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 60px;
  align-items: start;
}

.about-heading {
  margin: 0;
  padding-left: 22px;
  border-left: 2px solid var(--blue-light);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--white);
}

.about-copy p {
  margin: 0 0 18px;
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
}

.about-copy p:last-child {
  margin-bottom: 0;
}

/* bold title at the start of a paragraph (Our Objectives) */
.about-copy strong {
  color: var(--white);
  font-weight: 700;
}

/* shared heading style for the About page sections */
.about-band-text h2 {
  margin: 0 0 22px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--white);
}

.about-band-text p {
  margin: 0 0 18px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
}

.about-button {
  display: inline-block;
  margin-top: 12px;
  padding: 15px 42px;
  border: 2px solid var(--white);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: background 0.3s ease, color 0.3s ease;
}

.about-button:hover {
  background: var(--white);
  color: var(--black);
}

/* Vision / Mission / Strengths – three columns with blue lines */
.about-pillars {
  background: var(--dots-fade-black), var(--dots), var(--black);
  color: var(--white);
  padding: 90px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* two cards side by side (Vision, Strengths) */
.pillars-grid.two-up {
  grid-template-columns: repeat(2, 1fr);
}

.pillar {
  padding-left: 24px;
  border-left: 2px solid var(--blue-light);
}

/* Vision / Mission / Strengths as dark cards with a blue top line
   that runs across the card on hover */
.pillar.card-pillar {
  position: relative;
  padding: 38px 32px 36px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.pillar.card-pillar::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 2px;
  background: var(--blue-light);
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.pillar.card-pillar:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(58, 114, 196, 0.4);
  transform: translateY(-4px);
}

.pillar.card-pillar:hover::before {
  transform: scaleX(1);
}

.pillar h3 {
  margin: 0 0 16px;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--white);
}

.pillar p {
  margin: 0;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
}

/* Proven professional service – the photo is the background of the
   whole section; dark on the left behind the text, helicopter visible
   on the right. */
.about-band {
  position: relative;
  padding: 64px 0;
  min-height: 440px;
  display: flex;
  align-items: center;
  background-color: var(--black);
  background-size: cover;
  background-position: right center;
  color: var(--white);
}

.about-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8, 11, 18, 0.97) 0%, rgba(8, 11, 18, 0.92) 38%, rgba(8, 11, 18, 0.3) 58%, rgba(8, 11, 18, 0) 72%),
    linear-gradient(to bottom, rgba(8, 11, 18, 0.5), rgba(8, 11, 18, 0) 25%, rgba(8, 11, 18, 0) 75%, rgba(8, 11, 18, 0.5));
}

.about-band .container {
  position: relative;
  width: 100%;
}

.about-band-text {
  max-width: 620px;
  padding-left: 26px;
  border-left: 2px solid var(--blue-light);
}

.about-band-text p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  line-height: 1.7;
}

.about-band-text h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

/* tablets / phones */
@media (max-width: 900px) {
  .pillars-grid,
  .pillars-grid.two-up { grid-template-columns: 1fr; gap: 36px; }
  .about-row-inner { grid-template-columns: 1fr; gap: 24px; }
  /* Proven professional service: the photo becomes a band at the top
     (whole helicopter visible, 63vw tall), the text sits below it */
  .about-band {
    padding: calc(63vw + 20px) 0 60px;
    min-height: 0;
    background-size: 190vw auto;
    background-position: 76% top;
    background-repeat: no-repeat;
  }
  .about-band::before {
    background: linear-gradient(to bottom, rgba(8, 11, 18, 0) 0, rgba(8, 11, 18, 0) calc(63vw - 70px), var(--black) 63vw);
  }
  .about-facts { grid-template-columns: 1fr; }
  .about-facts li, .about-facts li + li { padding: 20px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
}

/* =========================================================
   CONTACTS PAGE – dark tiles like the rest of the site
   ========================================================= */
.contact-section {
  background: var(--dots-fade-black), var(--dots), var(--black);
  color: var(--white);
  padding: 90px 0 100px;
}

.contact-title {
  margin-bottom: 40px;
}

.contact-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.contact-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 36px 36px 36px 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--white);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* thin blue line on the left, like the other sections */
.contact-tile::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--blue-light);
}

a.contact-tile:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(58, 114, 196, 0.5);
  transform: translateY(-4px);
}

.contact-icon svg {
  width: 48px;
  height: 48px;
  fill: var(--blue-light);
}

.contact-label {
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--blue-light);
}

.contact-value {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}



@media (max-width: 700px) {
  .contact-tiles { grid-template-columns: 1fr; }
  .contact-tile { min-height: 0; padding: 28px 24px 26px 28px; }
  .contact-section { padding: 60px 0 70px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.75);
}

/* main footer area – holds the big emblem on the left edge.
   --emblem-h      height of the emblem
   --emblem-shown  how much of its width is visible (0.65 = 65%) */
.footer-main {
  --emblem-h: 240px;
  --emblem-shown: 0.65;
  --emblem-visible: calc(var(--emblem-h) * 2.01 * var(--emblem-shown));  /* emblem is ~2x as wide as tall */
  position: relative;
  overflow: hidden;
  padding: 34px 0 30px;
  min-height: calc(var(--emblem-h) + 24px);
}

.footer-emblem {
  position: absolute;
  top: 50%;
  left: calc(var(--emblem-visible) - var(--emblem-h) * 2.01);   /* the rest is off-screen */
  height: var(--emblem-h);
  width: auto;
  transform: translateY(-50%);
  pointer-events: none;
}

.footer-grid > div:first-child {
  align-self: center;   /* logo centred next to the Pages / Contacts columns */
}

/* logo takes the free space on the left; Pages and Contacts sit
   together on the right, 100px apart */
.footer-grid {
  position: relative;   /* above the emblem */
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 40px 56px;
}

.site-footer h4 {
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.95rem;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.75);
}

.site-footer a:hover {
  color: var(--blue-light);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: 8px;
}

.site-footer .footer-contact li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  line-height: 1.5;
  white-space: nowrap;     /* keep each contact detail on its own line(s) */
}

.footer-contact svg {
  width: 18px;
  height: 18px;
  fill: var(--blue-light);
  flex-shrink: 0;
  margin-top: 3px;
}

/* copyright line – at the left edge of the screen */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 40px;
  text-align: left;
  font-size: 0.85rem;
}

/* Phones: carousel title back in the centre */
@media (max-width: 600px) {
  .hero-title { align-self: center; margin-right: 0; }
  .hero-button { right: 50%; translate: 50% 0; }   /* centred on phones */
}

/* Phones: less space around the partners title and footer */
@media (max-width: 600px) {
  .partners-title { --edge-space: 20px; }

  .footer-main { --emblem-h: 96px; min-height: 0; }
  .site-footer .logo-img { height: 66px; }
  .footer-emblem { top: 30px; transform: none; }
  .footer-grid > div:first-child { margin-bottom: 16px; }
  .footer-bottom { padding: 8px 20px; }
}

/* Service rows on phones: icon above the text, a bit smaller */
@media (max-width: 600px) {
  .card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 30px 22px 30px 26px; min-height: 0; }
  .card-icon { width: 110px; height: 110px; }
  .card h3 { font-size: 1rem; }
  .card p { font-size: 0.93rem; }
}

/* Visitors who switched off animations in their system settings */
@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .banner-title,
  .intro-tagline.drop-in,
  .card.slide-in,
  .card.slide-in::before,
  .service-group.slide-in .group-body,
  .service-group.slide-in .group-photo-text,
  .project-wrapper.dark .project.slide-in,
  .hero-button {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }


}

/* Medium screens: footer logo on its own row (next to a smaller emblem),
   Pages and Contacts underneath */
@media (max-width: 1200px) {
  .footer-main { --emblem-h: 150px; }
  .footer-emblem { top: 34px; transform: none; }
  .footer-grid { grid-template-columns: auto auto; justify-content: start; gap: 30px 56px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; min-height: 150px; display: flex; align-items: center; }
}

/* Medium screens: smaller gaps between menu items */
@media (max-width: 1200px) {
  .main-nav ul {
    gap: 20px;
  }

  .main-nav a {
    font-size: 0.78rem;
  }
}

/* =========================================================
   MOBILE / TABLET
   ========================================================= */
/* Below 960px the menu turns into the hamburger button,
   so it never collides with the logo */
@media (max-width: 960px) {
  .menu-toggle {
    display: block;
  }

  /* the menu slides down and fades in; the items follow one by one */
  .main-nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--black);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.35);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
  }

  .main-nav.open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
  }

  .main-nav li {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .main-nav.open li {
    opacity: 1;
    transform: none;
  }

  .main-nav.open li:nth-child(1) { transition-delay: 0.05s; }
  .main-nav.open li:nth-child(2) { transition-delay: 0.10s; }
  .main-nav.open li:nth-child(3) { transition-delay: 0.15s; }
  .main-nav.open li:nth-child(4) { transition-delay: 0.20s; }
  .main-nav.open li:nth-child(5) { transition-delay: 0.25s; }
  .main-nav.open li:nth-child(6) { transition-delay: 0.30s; }

  .main-nav li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 10px 20px 20px;
  }

  .main-nav a {
    display: block;
    padding: 12px 0;
    font-size: 0.85rem;
  }
}

/* Phones: smaller logo (the hamburger bars follow it) */
@media (max-width: 600px) {
  .site-header {
    --logo-h: 38px;
  }
}

@media (max-width: 900px) {

  .project,
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }


  .project {
    padding: 60px 0;
  }

  /* on phones the photo is always on top */
  .project.reverse .project-photos {
    order: 0;
  }

  .project-photos img,
  .photo-coming-soon {
    height: 260px;
  }

  .quick-nav ul {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .quick-nav a {
    padding: 14px 14px;
    white-space: nowrap;
  }

  .quick-nav a::after {
    left: 14px;
    right: 14px;
    bottom: 8px;
  }

  .section {
    padding: 60px 0;
  }
}

/* grid children may shrink below their content width (prevents overflow on phones) */
.project > *,
.service-group > *,
.about-row-inner > * {
  min-width: 0;
}

/* a very long word (e.g. several words joined with "/") wraps instead of
   making the page wider than a phone screen */
body {
  overflow-wrap: break-word;
}


/* =========================================================
   AMBER ACCENT – small details only (delete this block to remove)
   ========================================================= */

/* service cards (Services page): marker turns amber on hover */
.service-items li:hover::before {
  background: var(--accent);
}

/* home "What we do" rows and contact tiles: left line turns amber on hover */
.card:hover::before,
a.contact-tile:hover::before {
  background: var(--accent);
}

/* About page cards: top line amber when it runs across on hover */
.pillar.card-pillar:hover::before {
  background: var(--accent);
}

/* key facts on the About page: amber labels */
.about-facts span {
  color: var(--accent);
}

/* footer contact icons are blue; only the e-mail icon (the letter) is amber */
.footer-contact li:nth-child(2) svg { fill: var(--accent); }

/* Services – Marketing: three photos stacked under each other, covering
   the whole left side (no fading between them, only at the right edge) */
#marketing .group-photo.photo-stack-col {
  display: flex;
  flex-direction: column;
  width: 44%;
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}

.stack-photo {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width: 900px) {
  #marketing .group-photo.photo-stack-col { width: 100%; }
  .stack-photo:not(:first-child) { display: none; }
}


/* =========================================================
   PHONES & TABLETS HELD UPRIGHT (portrait)
   Only screens up to 960px wide that are taller than they are wide.
   The desktop layout is not affected by anything below.
   ========================================================= */
@media (max-width: 960px) and (orientation: portrait) {

  /* ----- Home carousel: the photos are shown almost in full (slightly
     zoomed in). Instead of the slow zoom, each photo slowly slides from
     its left edge to its right edge, so the whole photo is seen. ----- */
  .hero {
    height: 112vw;
    min-height: 0;
    max-height: 100vh;
  }

  /* each photo is 1.5 times as wide as it is tall (like the photos), so
     it is wider than the screen; it moves left until its right edge
     reaches the screen edge. Moving (transform) instead of changing
     background-position keeps it smooth, also while scrolling. */
  .hero-slide {
    right: auto;
    width: calc(min(112vw, 100vh) * 1.5);
    background-position: center;
    transform: translateX(0);
    /* when a photo is no longer shown it jumps back to the left –
       only after it has faded out (1.5s), so you never see the jump */
    transition: opacity 1.5s ease, transform 0s linear 1.5s;
  }

  .hero-slide.active {
    transform: translateX(calc(100vw - min(112vw, 100vh) * 1.5));
    transition: opacity 1.5s ease, transform 6.5s ease-in-out;
  }

  /* the tagline is at the top on phones – shade the top a bit more */
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 50%),
      linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 35%);
  }

  .hero-content {
    justify-content: flex-start;
    padding: calc(var(--header-height) + 20px) 20px 0;
  }

  .hero-title {
    align-self: flex-start;
    margin-right: 0;
  }

  .hero-title h1 {
    font-size: clamp(1.15rem, 5.2vw, 1.6rem);
    padding-left: 16px;
  }

  .hero-button {
    right: 20px;
    bottom: 34px;
    translate: none;
    padding: 12px 26px;
    font-size: 0.78rem;
    letter-spacing: 2px;
  }

  /* photo bars: smaller, so all of them fit across the screen */
  .hero-indicators {
    gap: 5px;
  }

  .hero-indicators button {
    width: 22px;
  }

  /* ----- Home: smaller partner logos, so a few are seen at once ----- */
  .logo-track {
    animation-duration: 25s;
  }

  .logo-track img              { height: 22px; max-width: 130px; margin-right: 34px; }
  .logo-track img.logo-tall    { height: 40px; }
  .logo-track img.logo-medium  { height: 30px; }
  .logo-track img.logo-emblem  { height: 50px; }

  /* ----- Quick selection menu (Services, Projects, Simulation): all items
     visible at once in a small grid instead of a row that scrolls
     sideways. 3 per row; pages with 4 items get 2 per row. ----- */
  .quick-nav ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0;
    overflow: hidden;
  }

  .quick-nav ul:has(> li:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }

  /* long menus (Completed Projects, 7 links): 2 per row, the last link
     on its own row across the full width */
  .quick-nav.long ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-nav.long li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* that menu is 4 rows tall – stop a bit higher when jumping to a project */
  html:has(.quick-nav.long) {
    scroll-padding-top: calc(var(--header-height) + 170px);
  }

  .quick-nav li,
  .quick-nav li + li {
    border: 0;
    outline: 1px solid rgba(255, 255, 255, 0.08);   /* thin lines between the cells */
  }

  .quick-nav a {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 8px;
    font-size: 0.68rem;
    letter-spacing: 1px;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
  }

  .quick-nav a::after {
    left: 25%;
    right: 25%;
    bottom: 5px;
  }

  /* the menu is taller now – keep section titles clear of it when jumping */
  html {
    scroll-padding-top: calc(var(--header-height) + 110px);
  }

  /* ----- Services: no background photo behind Marketing ----- */
  #marketing .group-photo,
  #marketing .group-photo.photo-stack-col {
    display: none;
  }

  #marketing.service-group {
    padding-top: 60px;
  }

  /* ----- Services: Technical uses a separate phone photo (the desktop one
     has a blurred strip on its right side) ----- */
  #technical .group-photo {
    background-image: url("../images/services/technical-phone.jpg") !important;
    background-image: image-set(url("../images/services/technical-phone.avif") type("image/avif"),
                                url("../images/services/technical-phone.webp") type("image/webp"),
                                url("../images/services/technical-phone.jpg") type("image/jpeg")) !important;
    background-size: cover !important;
    background-position: 60% center !important;
  }

  /* taller photo with lighter shading at the top, and the title moved
     below it, so the policeman on the rope is clearly visible */
  #technical.service-group {
    padding-top: 330px;
  }

  #technical .group-photo {
    height: 420px;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  }

  #technical .group-photo::before {
    background: linear-gradient(to top, rgba(6, 12, 24, 0.85), rgba(6, 12, 24, 0.15) 45%);
  }

  /* ----- Footer: smaller emblem and logo so the whole logo fits, with
     Pages and Contacts next to each other underneath ----- */
  .footer-main {
    --emblem-h: 72px;
    min-height: 0;
    padding: 28px 0 24px;
  }

  .footer-emblem {
    top: 28px;
    transform: none;
  }

  .site-footer .logo-img {
    height: 66px;
    margin-left: 0;
    max-width: calc(100vw - var(--emblem-visible) - 40px);
  }

  .footer-grid {
    grid-template-columns: auto 1fr;
    justify-content: start;
    gap: 28px 26px;
  }

  /* logo above the Contacts column, the emblem fills the space on the left */
  .footer-grid > div:first-child {
    grid-column: 2;
    min-height: 72px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
  }

  .site-footer h4 {
    font-size: 0.85rem;
  }

  .site-footer li,
  .site-footer .footer-contact li {
    font-size: 0.82rem;
  }

  .site-footer .footer-contact li {
    gap: 8px;
  }

  .footer-contact svg {
    width: 15px;
    height: 15px;
    margin-top: 2px;
  }
}