/* ============================================================
   Safe Experience S.A.S — Site styles
   Palette: deep green (#0E5A43), gold (#E8A33D), warm paper
   Type: Poppins (self-hosted in assets/fonts, no external dependency)
   Spacing on an 8px grid; layered shadows; 180ms interactions
   ============================================================ */

@font-face {
  font-family: "Poppins";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Poppins-800.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Poppins-900.woff2") format("woff2");
}
:root {
  --ink: #182420;
  --ink-soft: #55645D;
  --green: #149C6E;
  --green-dark: #0F7F59;
  --green-deep: #07352A;
  --teal: #3ED598;
  --gold: #E8A33D;
  --gold-dark: #B97C22;
  --cream: #FBFAF7;
  --paper: #F3F1EA;
  --white: #FFFFFF;
  --line: #E7E3D8;
  --wa: #25D366;
  --radius: 16px;
  --r-sm: 10px;
  --r-md: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 40, 32, 0.06), 0 4px 12px rgba(16, 40, 32, 0.05);
  --shadow: 0 1px 2px rgba(16, 40, 32, 0.05), 0 10px 28px rgba(16, 40, 32, 0.08);
  --shadow-lg: 0 2px 4px rgba(16, 40, 32, 0.05), 0 20px 44px rgba(16, 40, 32, 0.13);
  --t: 180ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --font-display: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(53, 195, 154, 0.35); }

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

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

:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.18; letter-spacing: -0.01em; }

h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.05rem; font-weight: 700; }

.container { width: min(1160px, 92%); margin-inline: auto; }
.container.narrow { width: min(820px, 92%); }

.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 0.75rem;
}

.lead { font-size: 1.05rem; color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.35rem;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn svg { width: 18px; height: 18px; }

.btn-primary { background: var(--green); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-dark); }

.btn-whatsapp { background: var(--green); color: #fff; box-shadow: var(--shadow-sm); }
.btn-whatsapp:hover { background: var(--green-dark); color: #fff; }

.btn-lg { padding: 0.9rem 1.8rem; font-size: 0.95rem; }
.btn-sm { padding: 0.45rem 0.95rem; font-size: 0.78rem; }

/* ---------- Header (dark, logo image) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--green-deep);
}
.brand-logo { height: clamp(48px, 5vw, 78px); width: auto; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
}

.brand { display: inline-flex; align-items: center; }

.site-nav { display: flex; align-items: center; gap: 1.4rem; }
.site-nav .nav-ico,
.site-nav .nav-chev,
.site-nav .nav-txt small,
.site-nav .nav-slogan { display: none; }
.site-nav a:not(.btn) {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:not(.btn):hover { color: var(--teal); }
.site-nav a.active { color: var(--teal); border-bottom-color: var(--teal); }

.header-actions { display: flex; align-items: center; gap: 0.7rem; }

.lang-toggle {
  border: 2px solid rgba(255, 255, 255, 0.75);
  background: transparent;
  color: var(--white);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lang-toggle:hover { background: var(--white); color: var(--green-deep); }

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px;
  height: 2.5px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

/* Transparent header overlaid on the hero sky (home page) */
body.home .site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}

@media (min-width: 721px) {
  body.home .header-inner { position: relative; }
  body.home .site-nav {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ---------- Menu overlay (same design on every page and size) ---------- */
body.nav-open { overflow: hidden; }

body.nav-open .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}
body.nav-open .brand,
body.nav-open .header-actions { position: relative; z-index: 46; }
body.nav-open .lang-toggle { border-color: rgba(62, 213, 152, 0.7); color: var(--white); }
body.nav-open .lang-toggle:hover { background: var(--white); color: var(--green-deep); }
body.nav-open .nav-toggle span { background: var(--white); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

body.nav-open .site-nav {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 108px 6vw 40px;
  overflow-y: auto;
  border: 0;
  box-shadow: none;
  transform: none;
  opacity: 1;
  visibility: visible;
  background:
    radial-gradient(720px 520px at 88% 96%, rgba(20, 156, 110, 0.32), transparent 62%),
    linear-gradient(160deg, #071D28 0%, #0A2A31 58%, #0B3A36 100%);
}
body.nav-open .site-nav a:not(.btn) {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  width: min(560px, 100%);
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--white);
  text-transform: none;
  letter-spacing: 0;
  animation: menuIn 0.4s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
body.nav-open .site-nav a:last-of-type { border-bottom: 0; }
body.nav-open .site-nav .nav-ico { display: block; width: 38px; height: 38px; flex-shrink: 0; color: var(--teal); }
body.nav-open .site-nav .nav-txt { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
body.nav-open .site-nav .nav-txt > span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 3vw, 1.6rem);
  line-height: 1.25;
}
body.nav-open .site-nav .nav-txt small { display: block; font-size: 0.92rem; font-weight: 400; color: rgba(255, 255, 255, 0.55); }
body.nav-open .site-nav .nav-chev { display: block; width: 20px; height: 20px; flex-shrink: 0; color: var(--teal); }
body.nav-open .site-nav a:not(.btn):hover .nav-txt > span { color: var(--teal); }
body.nav-open .site-nav a.active .nav-txt > span { color: var(--teal); }
body.nav-open .site-nav a:nth-child(1) { animation-delay: 0.03s; }
body.nav-open .site-nav a:nth-child(2) { animation-delay: 0.08s; }
body.nav-open .site-nav a:nth-child(3) { animation-delay: 0.13s; }
body.nav-open .site-nav a:nth-child(4) { animation-delay: 0.18s; }
body.nav-open .site-nav .nav-slogan {
  display: block;
  margin-top: auto;
  padding-top: 2.6rem;
  width: min(560px, 100%);
  text-align: center;
  animation: menuIn 0.4s 0.24s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
body.nav-open .site-nav .nav-slogan .strip-top { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-bottom: 1rem; }
body.nav-open .site-nav .nav-slogan .strip-top span { width: min(160px, 30vw); height: 1px; background: rgba(255, 255, 255, 0.25); }
body.nav-open .site-nav .nav-slogan .strip-top svg { width: 24px; height: 24px; color: var(--teal); transform: rotate(45deg); }
body.nav-open .site-nav .nav-slogan p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--white);
}
body.nav-open .site-nav .nav-slogan p em { font-style: normal; color: var(--teal); }

@keyframes menuIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Hero (mockup: sky photo + branded plane) ---------- */
.hero-sky {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1861B4 0%, #5B94D6 45%, #EAF0F4 78%, var(--cream) 100%);
}
body.home .hero-sky { min-height: 100vh; }

.sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 24, 54, 0.55) 0%, rgba(6, 24, 54, 0.22) 48%, rgba(6, 24, 54, 0) 70%),
    url("../img/sky.webp") center / cover no-repeat;
}
@media (min-width: 1001px) {
  .sky {
    background:
      linear-gradient(90deg, rgba(6, 24, 54, 0.72) 0%, rgba(6, 24, 54, 0.38) 44%, rgba(6, 24, 54, 0) 62%),
      linear-gradient(180deg, rgba(6, 24, 54, 0.5) 0%, rgba(6, 24, 54, 0.18) 50%, rgba(6, 24, 54, 0) 72%),
      url("../img/sky.webp") center / cover no-repeat;
  }
}
.fog {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(180deg,
    rgba(251, 250, 247, 0) 0%,
    rgba(251, 250, 247, 0.85) 62%,
    var(--cream) 100%);
}

.hero-mock {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 1.5rem;
  padding-top: 96px;
}

.hero-eyebrow {
  color: var(--teal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 0.9rem;
}
.mega {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 5.2vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 18px rgba(4, 18, 42, 0.35);
}
.mega::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--teal);
  margin-top: 1.3rem;
}
.hero-desc {
  margin: 1.3rem 0 1.9rem;
  max-width: 440px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.02rem;
  line-height: 1.7;
  text-wrap: pretty;
}
.hero-desc em { font-style: normal; color: var(--teal); }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn-solid, .btn-line {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem 1.6rem;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.btn-solid svg, .btn-line svg { width: 17px; height: 17px; transition: transform var(--t); }
.btn-solid:hover svg, .btn-line:hover svg { transform: translateX(4px); }
.btn-solid { background: var(--green); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-solid:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-line { background: transparent; color: var(--white); border: 1.5px solid rgba(255, 255, 255, 0.85); }
.btn-line:hover { background: var(--white); color: var(--green-deep); transform: translateY(-1px); }

.hero-plane { display: flex; justify-content: flex-end; }
.hero-plane img {
  width: 100%;
  max-width: 760px;
  height: auto;
  margin-top: -36px;
  filter: drop-shadow(0 34px 44px rgba(8, 30, 60, 0.28));
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Feature row */
.feat-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 1.5rem 0 0.5rem;
}
.feat {
  display: flex;
  gap: 0.95rem;
  align-items: flex-start;
  padding: 0.4rem 1.5rem;
}
.feat + .feat { border-left: 1px solid #D8DFDA; }
.feat svg { flex-shrink: 0; width: 34px; height: 34px; color: var(--green); margin-top: 0.15rem; }
.feat h3 { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.feat p { font-size: 0.78rem; color: #6B7A74; line-height: 1.55; }

/* Slogan strip */
.slogan-strip {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 1.6rem 0 2.4rem;
}
.strip-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-bottom: 1rem;
}
.strip-top span { width: min(200px, 24vw); height: 1px; background: #C4CEC8; }
.strip-top svg { width: 22px; height: 22px; color: var(--green); transform: rotate(45deg); }
.slogan-strip p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.38em;
  color: #1B2A24;
}
.slogan-strip p em { font-style: normal; color: var(--green); }

/* ---------- Sections ---------- */
.section { padding: 5rem 0; }
.section-alt { background: var(--paper); }

.section-head { max-width: 640px; margin: 0 auto 2.6rem; text-align: center; }
.section-head p:not(.eyebrow) { color: var(--ink-soft); margin-top: 0.6rem; }

/* Dark inner-page hero (contact / help / about) */
.contact-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(760px 480px at 88% 118%, rgba(20, 156, 110, 0.4), transparent 62%),
    linear-gradient(152deg, #07352A 0%, #071F2B 46%, #0B4436 100%);
  padding: 4.4rem 0 8.8rem;
}
.contact-hero .eyebrow { color: var(--teal); }
.contact-hero h1 { color: var(--white); margin-bottom: 1rem; }
.tdot { color: var(--teal); }
.contact-hero .lead { color: rgba(255, 255, 255, 0.82); max-width: 520px; margin-bottom: 2.1rem; }
.contact-hero .container { position: relative; }
.contact-hero-copy { position: relative; z-index: 1; }
.hero-plane-cut {
  position: absolute;
  top: -24px;
  right: -60px;
  width: clamp(320px, 46vw, 700px);
  height: auto;
  filter: drop-shadow(0 26px 36px rgba(0, 0, 0, 0.4));
  animation: float 7s ease-in-out infinite;
  pointer-events: none;
}
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.meta-item { display: flex; align-items: center; gap: 0.8rem; }
.meta-item + .meta-item { border-left: 1px solid rgba(255, 255, 255, 0.25); padding-left: 1.5rem; }
.meta-item svg { width: 30px; height: 30px; color: var(--teal); flex-shrink: 0; }
.meta-item strong, .meta-item span {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.meta-item span { font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.help-hero, .about-hero { padding-bottom: 4.6rem; }
.help-hero {
  background:
    linear-gradient(180deg, rgba(5, 20, 33, 0.6) 0%, rgba(5, 20, 33, 0) 30%),
    linear-gradient(90deg, rgba(5, 20, 33, 0.78) 0%, rgba(5, 20, 33, 0.42) 48%, rgba(5, 20, 33, 0.06) 100%),
    #0A1B2A url("../img/header-2-plane.webp") right center / cover no-repeat;
}
body.hero-blend .site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  background: transparent;
}
body.hero-blend .contact-hero { padding-top: 8.2rem; }
.about-hero {
  background:
    linear-gradient(180deg, rgba(5, 20, 33, 0.6) 0%, rgba(5, 20, 33, 0) 30%),
    linear-gradient(90deg, rgba(5, 20, 33, 0.78) 0%, rgba(5, 20, 33, 0.45) 48%, rgba(5, 20, 33, 0.1) 100%),
    #0A1B2A url("../img/header-background-our.webp") right center / cover no-repeat;
}
.cta-banner.cta-photo {
  background:
    linear-gradient(90deg, rgba(4, 18, 28, 0.72) 0%, rgba(4, 18, 28, 0.38) 60%, rgba(4, 18, 28, 0.18) 100%),
    #061622 url("../img/footer-background-our.webp") center / cover no-repeat;
}

/* Contact page over the brand photo */
body.contact-photo {
  background: #061A28 url("../img/background-wihout-plane.webp") top center / cover no-repeat;
}
body.contact-photo .site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  background: transparent;
}
body.contact-photo .contact-hero {
  background: linear-gradient(180deg, rgba(6, 22, 36, 0.5) 0%, rgba(6, 22, 36, 0) 70%);
  padding-top: 8.2rem;
}
body.contact-photo .contact-section,
body.contact-photo #faq { background: transparent; }
body.contact-photo #faq .eyebrow { color: var(--teal); text-shadow: 0 1px 10px rgba(4, 16, 26, 0.75); }
body.contact-photo #faq h2 {
  color: var(--white);
  position: relative;
  padding-bottom: 0.95rem;
  text-shadow: 0 2px 14px rgba(4, 16, 26, 0.5);
}
body.contact-photo #faq h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--teal);
}
.about-hero h1 { margin-bottom: 1.1rem; }
.about-hero .lead { max-width: 640px; }
.about-tag { display: flex; align-items: center; gap: 0.8rem; margin-top: 2.1rem; font-weight: 600; font-size: 0.95rem; }
.about-tag svg { width: 30px; height: 30px; color: var(--teal); flex-shrink: 0; }

/* Circular pale-green icon badge (shared) */
.topic-badge {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(20, 156, 110, 0.12);
  color: var(--green);
}
.topic-badge svg { width: 26px; height: 26px; }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Why cards */
.why-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--t), box-shadow var(--t);
}
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.why-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  border-radius: var(--r-md);
  background: rgba(14, 90, 67, 0.08);
  color: var(--green);
  display: grid;
  place-items: center;
}
.why-icon svg { width: 24px; height: 24px; }
.why-card h3 { margin-bottom: 0.5rem; }
.why-card p { color: var(--ink-soft); font-size: 0.87rem; }

/* CTA banner */
.cta-banner {
  background:
    radial-gradient(720px 460px at 90% 120%, rgba(20, 156, 110, 0.6), transparent 62%),
    linear-gradient(135deg, #061E2C 0%, #0A2F31 55%, #0E5A45 100%);
  color: var(--white);
  padding: 3.6rem 0;
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-banner h2 { color: var(--white); margin-bottom: 0.4rem; }
.cta-banner p { color: rgba(255,255,255,0.85); }
.cta-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ---------- About page ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.6rem;
  align-items: start;
}
.two-col h2 { margin-bottom: 1rem; }
.two-col p { color: var(--ink-soft); margin-bottom: 1rem; }

.mv-cards { display: flex; flex-direction: column; gap: 1.5rem; }
.mv-card {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.5rem;
}
.mv-card h3 { margin-bottom: 0.5rem; }
.mv-card p { color: var(--ink-soft); font-size: 0.9rem; }

.line-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.line-card .topic-badge { margin-bottom: 1rem; }
.line-num { color: var(--green); font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 0.15rem; }
.line-card h3 { font-size: 1rem; margin-bottom: 0.55rem; }
.line-card p:not(.line-num) { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.6; }
.line-link {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--green-dark);
  font-weight: 600;
  font-size: 0.85rem;
}
.line-link svg { width: 16px; height: 16px; transition: transform var(--t); }
.line-link:hover svg { transform: translateX(4px); }

/* Values row with dividers */
.values-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.value-item { text-align: center; padding: 0.4rem 1.4rem; display: flex; flex-direction: column; align-items: center; }
.value-item + .value-item { border-left: 1px solid var(--line); }
.value-item .topic-badge { margin-bottom: 0.8rem; }
.value-item h3 { font-size: 0.92rem; margin-bottom: 0.4rem; }
.value-item p { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.6; }

/* Legal band */
.legal-band {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  background: rgba(20, 156, 110, 0.09);
  border-radius: var(--radius);
  padding: 2rem 2.1rem;
}
.legal-band h2 { font-size: 1.15rem; margin-bottom: 0.55rem; }
.legal-band p { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- Contact page ---------- */
.contact-section { padding-top: 0; }
.contact-form-card {
  position: relative;
  z-index: 2;
  margin-top: -5.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.2rem 2rem;
}
.help-form-card { margin-top: 0; }
.form-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.6rem; }
.form-head h2 { font-size: 1.35rem; margin-bottom: 0.25rem; }
.form-head p { color: var(--ink-soft); font-size: 0.88rem; }
.form-badge {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(20, 156, 110, 0.12);
  color: var(--green);
  display: grid;
  place-items: center;
}
.form-badge svg { width: 26px; height: 26px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.input-ico { position: relative; display: block; }
.input-ico svg { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #8FA098; pointer-events: none; }
.input-ico input { width: 100%; padding-left: 2.5rem; }
.btn-block { width: 100%; justify-content: center; text-transform: uppercase; letter-spacing: 0.14em; }
/* Help-form extras */
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.4rem; }
.form-foot .btn { margin-top: 0; }
form label.attach { flex-direction: row; align-items: center; gap: 0.7rem; margin-bottom: 0; cursor: pointer; }
.attach > svg { width: 22px; height: 22px; color: var(--green); flex-shrink: 0; }
.attach strong { display: block; font-size: 0.84rem; }
.attach small { display: block; font-size: 0.75rem; color: var(--ink-soft); font-weight: 400; }
.sec-band {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding: 0.95rem 1.2rem;
  background: rgba(20, 156, 110, 0.1);
  border-radius: var(--r-md);
}
.sec-band svg { width: 24px; height: 24px; color: var(--green); flex-shrink: 0; }
.sec-band p { line-height: 1.4; }
.sec-band strong { display: block; font-size: 0.86rem; }
.sec-band span { display: block; font-size: 0.8rem; color: var(--ink-soft); }

/* Help center topics */
.topic-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.topic-card {
  font-family: var(--font-body);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 0.9rem;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.topic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.topic-card.active { border-color: var(--green); box-shadow: 0 0 0 3px rgba(20, 156, 110, 0.15); }
.topic-card .topic-badge { margin-bottom: 0.85rem; }
.topic-card h3 { font-size: 0.88rem; font-weight: 700; margin-bottom: 0.4rem; }
.topic-card p { font-size: 0.76rem; color: var(--ink-soft); line-height: 1.55; }

/* Other ways to reach us */
.alt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; gap: 1.2rem; }
.alt-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 1.2rem 1.4rem;
  color: inherit;
  transition: transform var(--t), box-shadow var(--t);
}
.alt-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.alt-txt { flex: 1; min-width: 0; }
.alt-txt strong { display: block; font-size: 0.95rem; }
.alt-txt small { display: block; color: var(--ink-soft); font-size: 0.78rem; margin: 0.1rem 0 0.25rem; }
.alt-txt em { font-style: normal; color: var(--green-dark); font-weight: 600; font-size: 0.85rem; }
.alt-arrow { width: 20px; height: 20px; color: var(--green); flex-shrink: 0; }
.hours { text-align: center; margin-top: 1.6rem; color: var(--ink-soft); font-size: 0.85rem; }

form label { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; font-size: 0.84rem; font-weight: 500; }
form input, form select, form textarea {
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cream);
  color: var(--ink);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
form input:focus, form select:focus, form textarea:focus {
  outline: none;
  border-color: var(--green);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(14, 90, 67, 0.12);
}
form textarea { resize: vertical; }
form .btn { margin-top: 0.4rem; }
.form-note {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
.form-note svg { width: 15px; height: 15px; flex-shrink: 0; }

/* FAQ */
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color var(--t);
}
.faq-item:hover { border-color: #D8D2C2; }
.faq-item summary {
  cursor: pointer;
  padding: 1.05rem 1.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  list-style: none;
  position: relative;
  padding-right: 3rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--green);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { padding: 0 1.4rem 1.2rem; color: var(--ink-soft); font-size: 0.94rem; }

/* ---------- Footer ---------- */
.site-footer { background: #08242D; color: rgba(255,255,255,0.8); padding: 3rem 0 1.6rem; }
.footer-simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}
.footer-simple .brand-logo { height: clamp(56px, 6vw, 88px); }
.footer-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: rgba(255, 255, 255, 0.85);
}
.footer-tag em { font-style: normal; color: var(--teal); }
.footer-nav {
  width: 100%;
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 1.3rem 0;
  margin-top: 0.5rem;
}
.footer-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0 clamp(0.9rem, 3.5vw, 2.4rem);
  color: rgba(255,255,255,0.82);
  font-size: 0.86rem;
  transition: color var(--t);
}
.footer-nav a + a { border-left: 1px solid rgba(255,255,255,0.12); }
.footer-nav svg { width: 26px; height: 26px; }
.footer-nav a:first-child svg { color: var(--teal); }
.footer-nav a:hover { color: var(--teal); }
.footer-legal { padding-top: 1.2rem; text-align: center; }
.footer-legal p { font-size: 0.82rem; color: rgba(255,255,255,0.6); line-height: 2; }
.legal-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: center; margin-top: 0.2rem; }
.legal-links a { color: rgba(255,255,255,0.6); font-size: 0.8rem; }
.legal-links a:hover { color: var(--teal); }

/* Legal documents */
.legal-hero { padding: 4.4rem 0 3rem; }
.legal-doc .updated {
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 2rem;
}
.legal-doc h2 { font-size: 1.08rem; margin: 2.3rem 0 0.6rem; }
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 0.7rem; }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc a { text-decoration: underline; text-underline-offset: 2px; }

/* Data-processing consent */
.consent {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.3rem 0 0 !important;
  font-weight: 400 !important;
  font-size: 0.84rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.consent input { width: 17px; height: 17px; flex-shrink: 0; margin-top: 0.1rem; accent-color: var(--green); }
.consent a { text-decoration: underline; text-underline-offset: 2px; }

/* 404 page: fill the screen so the footer sits at the bottom */
.nf-hero { min-height: calc(100vh - 400px); display: flex; align-items: center; }

/* Form submission feedback */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 10px; font-size: 0.9rem; background: rgba(20, 156, 110, 0.08); color: var(--ink); }
.form-status.success { background: rgba(20, 156, 110, 0.14); }
.form-status.error { background: rgba(200, 50, 50, 0.1); color: #8a1f1f; }
.form-status a { text-decoration: underline; text-underline-offset: 2px; }
button[disabled] { opacity: 0.6; cursor: wait; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
  .hero-plane img, .hero-plane-cut { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .form-grid-3 { grid-template-columns: 1fr 1fr; }
  .topic-grid { grid-template-columns: repeat(3, 1fr); }
  .alt-grid { grid-template-columns: minmax(0, 480px); }
  .values-row { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; }
  .value-item:nth-child(3) { border-left: 0; }

  .hero-mock {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 88px;
    gap: 0.5rem;
  }
  .hero-desc { margin-inline: auto; }
  .mega::after { margin-inline: auto; }
  .hero-cta { flex-direction: column; align-items: center; }
  .btn-solid, .btn-line { width: min(100%, 340px); justify-content: center; }
  .hero-plane { justify-content: center; }
  .hero-plane img { max-width: min(86vw, 560px); }
  .feat-row { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
  .feat:nth-child(3) { border-left: 0; }
}

@media (max-width: 720px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .contact-hero { padding: 3rem 0 7.4rem; }
  body.contact-photo .contact-hero,
  body.hero-blend .contact-hero { padding-top: 6.2rem; }
  .hero-plane-cut { top: -14px; right: -30px; width: 64vw; }
  .help-hero, .about-hero { padding-bottom: 3.4rem; }
  .meta-item + .meta-item { border-left: 0; padding-left: 0; }
  .hero-meta { gap: 1rem 1.5rem; }
  .topic-grid { grid-template-columns: 1fr 1fr; }
  .values-row { grid-template-columns: 1fr; row-gap: 1.8rem; }
  .value-item + .value-item { border-left: 0; }
  .value-item:nth-child(3) { border-left: 0; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .form-foot .btn { justify-content: center; }
  .legal-band { flex-direction: column; }
  .contact-form-card { padding: 1.7rem 1.2rem; }
  .feat-row { grid-template-columns: 1fr; }
  .cta-actions { width: 100%; flex-direction: column; }
  .cta-actions .btn { width: 100%; justify-content: space-between; }
  .feat + .feat { border-left: 0; }
  .feat { justify-content: flex-start; text-align: left; }
  .brand-logo { height: 46px; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 45;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  body.nav-open .site-nav { pointer-events: auto; }
}