/* ==========================================================================
   METROPS — stylesheet
   --------------------------------------------------------------------------
   Everything you are likely to want to change lives in the ":root" block
   below: colours, fonts and spacing. Change a value there and it updates
   across the whole site.

   Colour rule worth knowing: Atlantis green is too light to sit on white as
   text (it fails contrast checks). It is used here for shapes, rules, icons
   and for text on the dark teal ground, where it reads clearly. If you need
   green text on a light background, use --lime-ink instead.
   ========================================================================== */

:root {
  /* --- Brand ----------------------------------------------------------- */
  --teal:       #024662;   /* Biscay — primary                       */
  --teal-deep:  #01303F;   /* darker teal for dark sections          */
  --teal-lift:  #0A5E80;   /* hover state                            */
  --lime:       #9BC603;   /* Atlantis — accent, shapes and dark bg  */
  --lime-ink:   #4E6A00;   /* green dark enough for text on white    */

  /* --- Neutrals -------------------------------------------------------- */
  --white:      #FFFFFF;
  --mist:       #F1F5F6;   /* page background                        */
  --ink:        #0C2029;   /* body text                              */
  --ink-soft:   #4C6570;   /* secondary text                         */
  --rule:       #DCE4E7;   /* hairlines and borders                  */
  --rule-dark:  rgba(255, 255, 255, 0.16);

  /* --- Type ------------------------------------------------------------ */
  --font: "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  --t-hero:  clamp(2.4rem, 1.1rem + 4.2vw, 4.4rem);
  --t-h1:    clamp(2.1rem, 1.3rem + 2.7vw, 3.4rem);
  --t-h2:    clamp(1.8rem, 1.2rem + 2vw, 2.7rem);
  --t-h3:    clamp(1.1rem, 1rem + 0.45vw, 1.32rem);
  --t-lead:  clamp(1.05rem, 0.99rem + 0.36vw, 1.24rem);
  --t-small: 0.87rem;
  --t-label: 0.72rem;

  /* --- Layout ---------------------------------------------------------- */
  --page-max:  1180px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.75rem, 8vw, 7rem);
  --radius:    10px;   /* the deck uses soft cards — matched here */
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-lift); }

:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

h1, h2, h3, h4 {
  color: var(--teal);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.012em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--teal); color: #fff; padding: 0.75rem 1rem; z-index: 300; }
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   Reusable pieces
   ========================================================================== */

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }

/* Small uppercase eyebrow above headings */
.label {
  display: inline-block;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime-ink);
  margin-bottom: 1rem;
}
.label--teal { color: var(--teal); }
.label--soft { color: var(--ink-soft); }

.lead { font-size: var(--t-lead); line-height: 1.58; color: var(--ink-soft); max-width: 62ch; }

.section { padding-block: var(--section-y); }
.section--white { background: var(--white); }
.section--dark { background: var(--teal); color: #E4EDF0; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead { color: #B6CCD4; }
.section--dark .label { color: var(--lime); }
.section--dark a { color: var(--lime); }

.section-head { max-width: 66ch; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }

.statement {
  font-size: clamp(1.3rem, 0.85rem + 1.9vw, 2.2rem);
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -0.022em;
  line-height: 1.24;
  max-width: 20ch;
}
.section--dark .statement { color: #fff; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: inherit; font-size: 0.94rem; font-weight: 600;
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--teal);
  border-radius: 999px;
  background: var(--teal); color: #fff;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.btn:hover { background: var(--teal-lift); border-color: var(--teal-lift); color: #fff; transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--teal); }
.btn--ghost:hover { background: rgba(2, 70, 98, 0.07); color: var(--teal); }

.btn--lime { background: var(--lime); border-color: var(--lime); color: var(--teal); }
.btn--lime:hover { background: #AFD91C; border-color: #AFD91C; color: var(--teal); }

.btn--outline-light { background: transparent; border-color: rgba(255,255,255,0.5); color: #fff; }
.btn--outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.9rem; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(241, 245, 246, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(2, 70, 98, 0.09); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 74px; }

.brand { display: block; }
.brand img { height: 55px; width: auto; }
@media (max-width: 900px) { .brand img { height: 38px; } }

.nav { display: flex; align-items: center; gap: 0.2rem; }
.nav a { font-size: 0.94rem; font-weight: 500; color: var(--ink-soft); padding: 0.5rem 0.85rem; border-radius: 999px; position: relative; }
.nav a:hover { color: var(--teal); background: rgba(2, 70, 98, 0.06); }

/* Current page. The :not(.btn) matters — without it this rule beats the
   button's own white text and the CTA label disappears into its fill. */
.nav a.is-current:not(.btn) { color: var(--teal); font-weight: 600; }
.nav a.is-current:not(.btn)::after {
  content: "";
  position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.15rem;
  height: 2px; background: var(--lime);
}
.nav a.btn.is-current { color: #fff; }

/* The CTA is a button, not a menu item, so it sits apart from the links
   with a divider rather than reading as a permanently selected page. */
.nav .btn { margin-left: 1.35rem; color: #fff; }
.nav .btn:hover { color: #fff; }
.nav .btn::before {
  content: "";
  position: absolute; left: -0.75rem; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 24px;
  background: var(--rule);
}

.nav-toggle {
  display: none; background: none; border: 2px solid var(--rule);
  border-radius: 999px; padding: 0.5rem 1rem; cursor: pointer;
  font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--teal);
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .nav a:hover { background: none; }
  .nav a.is-current:not(.btn)::after { left: 0; right: auto; width: 22px; bottom: 0.5rem; }
  .nav .btn { margin: 1rem 0 0; justify-content: center; border-bottom: none; }
  .nav .btn::before { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: var(--t-hero); margin-bottom: 0.45em; }
.hero h1 span { color: var(--lime-ink); }

/* ==========================================================================
   Signature element: the expectation-zone map
   --------------------------------------------------------------------------
   A plan view, not a cross-section. The point it makes is the one from the
   deck: a zone is a ground-level footprint, and impact is judged where it is
   felt rather than where the aircraft flew. Edit the labels in index.html.
   ========================================================================== */

.zonemap {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -28px rgba(2, 70, 98, 0.5);
  overflow: hidden;
}
.zonemap__head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft);
}
.zonemap__head b { color: var(--lime-ink); font-weight: 700; }
.zonemap svg { width: 100%; height: auto; display: block; }

.zonemap__key {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem;
  padding: 0.9rem 1.15rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small); color: var(--ink-soft);
}
.zonemap__key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.zonemap__key i { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* ==========================================================================
   Grids and cards
   ========================================================================== */

.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1000px) { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
}
.card p { color: var(--ink-soft); font-size: 0.96rem; margin-bottom: 0; }
.card p + p { margin-top: 0.8rem; }

.section--white .card { background: var(--mist); border-color: transparent; }

.section--dark .card {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--rule-dark);
}
.section--dark .card p { color: #B6CCD4; }

/* Card icon dot */
.card__mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--lime);
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
  color: var(--teal); font-weight: 700; font-size: 0.95rem;
}
.card__mark svg { width: 20px; height: 20px; }

/* --- The three-move sequence (Author / Supply / Monitor) ---------------- */

.moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 860px) { .moves { grid-template-columns: 1fr; } }

.move { position: relative; }
.move__step {
  display: inline-block;
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal); background: var(--lime);
  padding: 0.3rem 0.7rem; border-radius: 999px;
  margin-bottom: 1rem;
}
/* connector arrow between the three moves */
.move:not(:last-child)::after {
  content: "";
  position: absolute; top: 50%; right: -1.05rem;
  width: 0; height: 0;
  border-left: 8px solid var(--lime);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(-50%);
}
@media (max-width: 860px) {
  .move:not(:last-child)::after {
    top: auto; bottom: -1.05rem; right: 50%;
    transform: translateX(50%) rotate(90deg);
  }
}

/* --- Definition-style list ---------------------------------------------- */

.speclist { list-style: none; margin: 0; padding: 0; }
.speclist li {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.25rem;
  padding: 1.05rem 0; border-top: 1px solid var(--rule); align-items: baseline;
}
.speclist li:last-child { border-bottom: 1px solid var(--rule); }
.speclist .k { font-weight: 700; color: var(--teal); font-size: 0.95rem; }
.speclist .v { color: var(--ink-soft); font-size: 0.96rem; }
.section--dark .speclist li { border-color: var(--rule-dark); }
.section--dark .speclist .k { color: var(--lime); }
.section--dark .speclist .v { color: #B6CCD4; }
@media (max-width: 640px) { .speclist li { grid-template-columns: 1fr; gap: 0.25rem; } }

/* --- Tick list ----------------------------------------------------------- */

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.7rem; margin-bottom: 0.7rem; color: var(--ink-soft); font-size: 0.96rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--lime);
}
.section--dark .ticks li { color: #B6CCD4; }

/* --- Big figure ---------------------------------------------------------- */

.figure-block {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.25rem, 4vw, 2.75rem);
  background: var(--teal); color: #fff;
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
}
.figure-block__n {
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  color: var(--lime);
}
.figure-block p { color: #C6DBE2; max-width: 46ch; margin: 0; }
.figure-block strong { color: #fff; font-weight: 600; }

/* --- Split layout -------------------------------------------------------- */

.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ==========================================================================
   Page banner
   ========================================================================== */

.banner { background: var(--teal); color: #E4EDF0; padding-block: clamp(3rem, 6vw, 5rem); }
.banner h1 { color: #fff; font-size: var(--t-h1); }
.banner .lead { color: #B6CCD4; }
.banner .label { color: var(--lime); }

/* ==========================================================================
   Call to action
   ========================================================================== */

.cta { background: var(--teal-deep); color: #E4EDF0; padding-block: clamp(3.25rem, 6.5vw, 5rem); }
.cta h2 { color: #fff; }
.cta p { color: #B6CCD4; max-width: 52ch; }
.cta .label { color: var(--lime); }

/* ==========================================================================
   Form
   ========================================================================== */

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--t-small); font-weight: 600; color: var(--teal); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--white); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal); outline: none;
  box-shadow: 0 0 0 3px rgba(2, 70, 98, 0.15);
}
.field textarea { min-height: 140px; resize: vertical; }

.note {
  font-size: var(--t-small); color: var(--ink-soft);
  background: rgba(155, 198, 3, 0.14);
  border-left: 4px solid var(--lime);
  border-radius: 0 8px 8px 0;
  padding: 0.85rem 1rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--teal-deep); color: #A9C3CC; padding-block: clamp(2.75rem, 5vw, 3.75rem) 1.75rem; font-size: 0.94rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 2rem; margin-bottom: 2.5rem; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-grid img { height: 34px; width: auto; margin-bottom: 0.9rem; }
.footer-grid h4 { color: var(--lime); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.9rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.5rem; }
.footer-grid a { color: #A9C3CC; }
.footer-grid a:hover { color: #fff; }

.footer-base {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
  border-top: 1px solid var(--rule-dark); padding-top: 1.5rem;
  font-size: var(--t-small); color: #7F9DA8;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Utility */
.mt-lg { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.maxw { max-width: 62ch; }