/* ============================================================
   GreenLand Expo — greenlandexpo.net
   Single stylesheet for EN (LTR) and AR (RTL) pages.
   ============================================================ */

:root {
  --green-900: #0b3d26;
  --green-800: #11532f;
  --green-700: #14693a;
  --green-600: #177a3c;
  --green-500: #2bb35a;
  --lime-400: #8dc63f;
  --ink: #16201b;
  --ink-soft: #4b5a52;
  --paper: #ffffff;
  --mist: #f3f7f4;
  --line: #e1e9e3;
  --gold: #d9a13b;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(11, 61, 38, 0.10);
  --font-en: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-ar: "Tajawal", "Segoe UI", system-ui, sans-serif;
  --font: var(--font-en);
}

html[lang="ar"] { --font: var(--font-ar); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--green-600); text-decoration: none; }
a:hover { color: var(--green-800); }
ul { list-style: none; }

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

h1, h2, h3, h4 { line-height: 1.25; color: var(--green-900); font-weight: 800; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }

.kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--green-600);
  margin-bottom: .6rem;
}
html[lang="ar"] .kicker { letter-spacing: 0; font-size: .9rem; }

.lead { color: var(--ink-soft); font-size: 1.1rem; max-width: 46em; }

.section { padding-block: 4.5rem; }
.section.alt { background: var(--mist); }
.section-head { margin-bottom: 2.4rem; max-width: 50em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid transparent;
  transition: all .2s ease;
  cursor: pointer;
}
.btn-primary { background: var(--green-600); color: #fff; }
.btn-primary:hover { background: var(--green-800); color: #fff; transform: translateY(-2px); }
.btn-ghost { border-color: rgba(255,255,255,.65); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.btn-outline { border-color: var(--green-600); color: var(--green-700); }
.btn-outline:hover { background: var(--green-600); color: #fff; }
.btn-whatsapp { background: #25d366; color: #06351f; }
.btn-whatsapp:hover { background: #1ebe5b; color: #06351f; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .7rem;
}
.brand img { height: 52px; width: auto; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem;
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--green-600); }
.nav a.active { color: var(--green-600); border-bottom-color: var(--green-600); }

.lang-switch {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .35rem 1rem;
  font-weight: 700;
  font-size: .85rem;
  color: var(--green-800);
  background: var(--mist);
  white-space: nowrap;
}
.lang-switch:hover { border-color: var(--green-600); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 42px; height: 42px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-toggle span {
  width: 24px; height: 2.5px;
  background: var(--green-900);
  border-radius: 2px;
  transition: all .25s;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: var(--green-900);
}
.hero-slides { position: absolute; inset: 0; }
.hero-slides .slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slides .slide.on { opacity: 1; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(7,42,26,.92) 25%, rgba(7,42,26,.55) 60%, rgba(7,42,26,.35));
  z-index: 1;
}
html[dir="rtl"] .hero::after {
  background: linear-gradient(-100deg, rgba(7,42,26,.92) 25%, rgba(7,42,26,.55) 60%, rgba(7,42,26,.35));
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 14em; }
.hero .tagline {
  color: var(--lime-400);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .85rem;
  margin-bottom: 1rem;
}
html[lang="ar"] .hero .tagline { letter-spacing: 0; font-size: 1rem; }
.hero p.sub { margin-top: 1.2rem; max-width: 36em; color: rgba(255,255,255,.85); font-size: 1.15rem; }
.hero-cta { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Stats strip ---------- */
.stats {
  background: var(--green-900);
  color: #fff;
  padding-block: 2.6rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}
.stat .num {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--lime-400);
}
.stat .lbl { color: rgba(255,255,255,.8); font-size: .92rem; margin-top: .2rem; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 1.6rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.card p { color: var(--ink-soft); font-size: .97rem; }
.card .card-logo {
  height: 76px;
  display: flex;
  align-items: center;
  margin-bottom: .4rem;
}
.card .card-logo img { max-height: 76px; width: auto; max-width: 240px; object-fit: contain; }
.card .links { margin-top: auto; padding-top: .6rem; font-weight: 700; }

.badge {
  display: inline-block;
  background: var(--gold);
  color: #1d2a16;
  font-size: .75rem;
  font-weight: 800;
  padding: .25rem .8rem;
  border-radius: 999px;
  width: fit-content;
}
.badge.green { background: var(--green-600); }

.event-meta { display: flex; flex-direction: column; gap: .35rem; font-size: .95rem; }
.event-meta strong { color: var(--green-800); }

.socials { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--mist);
  border: 1px solid var(--line);
  color: var(--green-800);
  transition: all .2s;
}
.socials a:hover { background: var(--green-600); color: #fff; border-color: var(--green-600); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Split / feature rows ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.split .pic {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.split .pic img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Icon list (services) ---------- */
.icon-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.icon-list li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  font-weight: 600;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.icon-list li::before {
  content: "✓";
  color: var(--green-600);
  font-weight: 900;
  flex-shrink: 0;
}

/* ---------- Icon grid (service items with brand icons) ---------- */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
}
.icon-grid li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.3rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  text-align: center;
  font-weight: 600;
  font-size: .92rem;
  box-shadow: var(--shadow);
}
.icon-grid img { height: 48px; width: auto; }

/* ---------- Card icon / photo ---------- */
.card-icon { height: 44px; width: auto; }
.card-photo {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--mist);
}
.card-photo.fit-contain { object-fit: contain; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-inline-start: 1.8rem; display: grid; gap: 1.6rem; }
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 5px;
  width: 2px;
  background: var(--line);
}
.timeline li { position: relative; }
.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.8rem;
  top: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green-600);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 2px var(--green-600);
}
.timeline .year { font-weight: 800; color: var(--green-600); display: block; }

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.gallery img {
  border-radius: 14px;
  width: 100%;
  height: 220px;
  object-fit: cover;
  box-shadow: var(--shadow);
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: linear-gradient(115deg, var(--green-900), var(--green-800) 60%, var(--green-600));
  color: #fff;
  padding-block: 4.2rem;
}
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,.82); max-width: 44em; margin-top: .8rem; font-size: 1.1rem; }

/* ---------- Contact ---------- */
.contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}
.contact-card h3 { margin-bottom: .8rem; }
.contact-card ul { display: grid; gap: .55rem; color: var(--ink-soft); }
.contact-card a { font-weight: 600; direction: ltr; unicode-bidi: embed; }

.map-frame {
  border: 0;
  width: 100%;
  height: 380px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(115deg, var(--green-800), var(--green-600));
  color: #fff;
  border-radius: var(--radius);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--green-900);
  color: rgba(255,255,255,.78);
  padding-block: 3.5rem 0;
  margin-top: 4rem;
  font-size: .95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.site-footer h4 { color: #fff; margin-bottom: 1rem; font-size: 1.05rem; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: var(--lime-400); }
.site-footer ul { display: grid; gap: .5rem; }
.footer-brand {
  font-weight: 800;
  color: #fff;
  font-size: 1.3rem;
  letter-spacing: .02em;
}
.footer-brand span { color: var(--lime-400); }
.footer-socials { margin-top: 1rem; display: grid; gap: .6rem; }
.footer-socials .row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.footer-socials .row .who { font-weight: 700; color: #fff; min-width: 9.5em; }
.footer-socials a {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}
.footer-socials a:hover { background: var(--green-600); color: #fff; }
.footer-socials svg { width: 15px; height: 15px; fill: currentColor; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: 1.2rem;
  text-align: center;
  font-size: .85rem;
  color: rgba(255,255,255,.55);
}
.ltr-inline { direction: ltr; unicode-bidi: embed; }

/* ---------- Focus visibility ---------- */
:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; border-radius: 2px; }
.site-footer :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .cta-band :focus-visible, .stats :focus-visible { outline-color: var(--lime-400); }

/* ---------- Reveal animation (hidden state only when JS is running) ---------- */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .nav {
    position: fixed;
    inset-block-start: 67px;
    inset-inline: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.4rem 6%;
    gap: 1.1rem;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.open { display: flex; }
  .nav-toggle { display: flex; }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero { min-height: 76vh; }
}

/* ============================================================
   Liquid-glass nav + floating header + count-up stats
   (ported from Ceramica Expo, themed to GreenLand greens)
   These rules are appended last so they override the base header/nav above.
   ============================================================ */
html { scroll-padding-top: 100px; }

/* Floating liquid-glass header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border: none;
  padding-top: 14px; padding-bottom: 4px;
  backdrop-filter: none;
  transition: padding .3s ease;
}
.site-header .header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .4rem .55rem .4rem 1.2rem;
  border-radius: 999px;
  isolation: isolate;
  background: rgba(255,255,255,.30);
  box-shadow: 0 10px 30px rgba(11,61,38,.16);
  transition: background .35s ease, box-shadow .35s ease;
}
.site-header .header-inner::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -2;
  backdrop-filter: blur(22px) saturate(2) brightness(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(2) brightness(1.05);
}
html.lg-svg .site-header .header-inner::before {
  backdrop-filter: url(#gl-glass) blur(2px) saturate(2) brightness(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(2) brightness(1.05);
}
.site-header .header-inner::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.75), inset 0 -2px 3px rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.4);
}
.site-header.scrolled { padding-top: 8px; }
.site-header.scrolled .header-inner { background: rgba(255,255,255,.5); box-shadow: 0 8px 26px rgba(11,61,38,.22); }
@media (prefers-reduced-transparency: reduce) {
  .site-header .header-inner { background: #fff; }
  .site-header .header-inner::before { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.brand img { height: 58px; width: auto; }

/* Nav links become rounded pills that the glass indicator slides between */
.nav { position: relative; display: flex; align-items: center; gap: .6rem; }
.nav a { position: relative; z-index: 1; color: var(--ink); font-weight: 600; font-size: .95rem;
  padding: .45rem .9rem; border-radius: 999px; border-bottom: none; transition: color .3s ease; }
.nav a:hover { color: var(--green-700); }
.nav a.active { color: var(--green-700); border-bottom-color: transparent; }
.nav .lang-switch { position: relative; z-index: 1; background: rgba(255,255,255,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Liquid-glass sliding indicator: morphs between text links on hover, rests on .active (desktop) */
.nav-glass {
  position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 0;
  border-radius: 999px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.22));
  backdrop-filter: blur(7px) saturate(1.8) brightness(1.12);
  -webkit-backdrop-filter: blur(7px) saturate(1.8) brightness(1.12);
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,.95), inset 0 -3px 6px rgba(255,255,255,.32),
              inset 0 0 0 1px rgba(255,255,255,.5), 0 6px 18px rgba(11,61,38,.18);
  transition: transform .42s cubic-bezier(.34,1.25,.4,1), width .42s cubic-bezier(.34,1.25,.4,1),
              height .3s ease, opacity .35s ease;
  will-change: transform, width;
}
html.lg-svg .nav-glass { backdrop-filter: url(#gl-glass) blur(3px) saturate(1.9) brightness(1.08); }
@media (max-width: 920px) { .nav-glass { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav-glass { transition: opacity .2s ease; } }

/* Clear the fixed header on every page's first section */
.hero { padding-top: 116px; }
.page-hero { padding-top: 132px; }

/* Stat numbers: keep them from reflowing while counting up */
.stat .num { font-variant-numeric: tabular-nums; }

/* Mobile: glass dropdown + active pill (appended after the base 920px block so it wins) */
@media (max-width: 920px) {
  .nav {
    position: fixed; inset-block-start: 80px; inset-inline: 4%;
    width: 92%; box-sizing: border-box;
    background: rgba(255,255,255,.80);
    backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
    flex-direction: column; align-items: stretch; padding: 1.1rem 1.2rem; gap: .7rem;
    border-radius: 22px; box-shadow: 0 18px 40px rgba(11,61,38,.22), inset 0 0 0 1px rgba(255,255,255,.5);
    border-bottom: none; display: none;
  }
  .nav.open { display: flex; }
  .nav a { width: 100%; }
  .nav a:not(.lang-switch) { transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
  .nav a:not(.lang-switch).active,
  .nav a:not(.lang-switch):active,
  .nav a:not(.lang-switch):focus-visible {
    color: var(--green-700);
    background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.3));
    backdrop-filter: blur(7px) saturate(1.8) brightness(1.12);
    -webkit-backdrop-filter: blur(7px) saturate(1.8) brightness(1.12);
    box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,.95), inset 0 -3px 6px rgba(255,255,255,.32),
                inset 0 0 0 1px rgba(255,255,255,.6), 0 6px 16px rgba(11,61,38,.16);
  }
  html.lg-svg .nav a:not(.lang-switch).active,
  html.lg-svg .nav a:not(.lang-switch):active,
  html.lg-svg .nav a:not(.lang-switch):focus-visible {
    backdrop-filter: url(#gl-glass) blur(3px) saturate(1.8) brightness(1.12);
  }
  .nav-toggle { display: flex; }
}

/* ---------- Contact form (lead form) ---------- */
.lead-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1rem; }
.lead-form .lf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.lead-form label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.lead-form label.full { grid-column: 1 / -1; }
.lead-form input, .lead-form textarea { font: inherit; padding: .65rem .8rem; border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink); background: #fff; }
.lead-form input:focus, .lead-form textarea:focus { outline: 2px solid var(--green-500); outline-offset: 1px; }
.lead-form textarea { min-height: 130px; resize: vertical; }
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-form button { align-self: flex-start; }
.form-ok { background: #e8f6ec; border: 1px solid #b6e0c2; color: #177a3c; border-radius: 12px;
  padding: 1rem 1.2rem; font-weight: 700; margin-bottom: 1.2rem; }
.form-err { background: #fde8e8; border: 1px solid #f5b5b5; color: #b42318; border-radius: 12px;
  padding: 1rem 1.2rem; font-weight: 700; margin-bottom: 1.2rem; }

/* GDPR consent row on lead forms */
.lead-form label.consent { flex-direction: row; align-items: flex-start; gap: .6rem; font-weight: 500; font-size: .85rem; color: var(--ink-soft); }
.lead-form label.consent input { width: auto; margin-top: .2rem; flex: 0 0 auto; }
.lead-form label.consent a { color: var(--green-600); text-decoration: underline; }

/* ============================================================
   DYNAMIC LAYER — motion, hover life, depth & accent color.
   Additive only; works for EN (LTR) and AR (RTL), and degrades
   gracefully under prefers-reduced-motion. Appended last so it wins.
   ============================================================ */

/* ---------- Ambient section glows (depth instead of flat blocks) ---------- */
.section {
  position: relative;
  background-image: radial-gradient(680px circle at 0% 100%, rgba(23,122,60,.05), transparent 60%);
}
.section.alt {
  background-color: var(--mist);
  background-image:
    radial-gradient(620px circle at 100% 0%, rgba(141,198,63,.12), transparent 58%),
    radial-gradient(520px circle at 0% 100%, rgba(23,122,60,.07), transparent 60%);
}

/* ---------- Section headings: gradient ink + accent underline ---------- */
.section-head h2 {
  display: block;
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(92deg, var(--green-900) 10%, var(--green-600) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .section-head h2 { color: var(--green-900); }
}
.section-head h2::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  margin-top: .75rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-600), var(--lime-400));
}
html[dir="rtl"] .section-head h2::after { margin-inline-start: 0; }

/* ---------- Cards: lift + gradient top-accent on hover ---------- */
.card {
  position: relative;
  overflow: hidden;
  transition: transform .32s cubic-bezier(.34,1.2,.4,1), box-shadow .32s ease, border-color .32s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-500), var(--lime-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.34,1.2,.4,1);
}
html[dir="rtl"] .card::before { transform-origin: right; }
.card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 44px rgba(11,61,38,.18);
  border-color: rgba(141,198,63,.5);
}
.card:hover::before { transform: scaleX(1); }

/* ---------- Service / icon tiles & checklist: respond to hover ---------- */
.icon-grid li {
  transition: transform .3s cubic-bezier(.34,1.2,.4,1), box-shadow .3s ease;
}
.icon-grid li:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(11,61,38,.15); }
.icon-list li { transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.icon-list li:hover { border-color: var(--green-500); background: var(--mist); transform: translateX(3px); }
html[dir="rtl"] .icon-list li:hover { transform: translateX(-3px); }

/* ---------- Image zoom inside framed pictures & gallery ---------- */
.split .pic img, .gallery img { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.split .pic:hover img { transform: scale(1.06); }
.gallery img:hover { transform: scale(1.04); }

/* ---------- Social chips: gentle pop ---------- */
.socials a { transition: background .2s, color .2s, border-color .2s, transform .2s ease; }
.socials a:hover { transform: translateY(-3px); }

/* ---------- Primary button: shine sweep ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute; top: 0; left: -160%;
  width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-22deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn-primary:hover::after { left: 160%; }

/* ---------- Stats strip: lime glow + interactive numbers ---------- */
.stats {
  position: relative;
  background-image: radial-gradient(820px circle at 50% -40%, rgba(141,198,63,.20), transparent 60%);
}
.stat .num { display: inline-block; transition: transform .3s cubic-bezier(.34,1.2,.4,1); }
.stat:hover .num { transform: scale(1.08); }

/* ---------- Animated gradient on banners ---------- */
.cta-band, .page-hero {
  background-size: 200% 200%;
  animation: gl-gradient-shift 9s ease infinite;
}
@keyframes gl-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Hero: slow Ken Burns zoom on the active slide ---------- */
.hero-slides .slide.on { animation: gl-kenburns 7s ease-out both; }
@keyframes gl-kenburns {
  from { transform: scale(1.001); }
  to   { transform: scale(1.09); }
}

/* ---------- Hero & page-hero content: staggered entrance ---------- */
.hero .container > *, .page-hero .container > * {
  animation: gl-rise .85s cubic-bezier(.22,.7,.25,1) both;
}
.hero .container > *:nth-child(1), .page-hero .container > *:nth-child(1) { animation-delay: .08s; }
.hero .container > *:nth-child(2), .page-hero .container > *:nth-child(2) { animation-delay: .20s; }
.hero .container > *:nth-child(3), .page-hero .container > *:nth-child(3) { animation-delay: .32s; }
.hero .container > *:nth-child(4), .page-hero .container > *:nth-child(4) { animation-delay: .44s; }
@keyframes gl-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Staggered scroll-reveal (delay set inline by main.js) ---------- */
html.js .reveal { transition: opacity .7s ease, transform .7s ease; }

/* ---------- Honor reduced-motion: kill the new motion, keep the looks ---------- */
@media (prefers-reduced-motion: reduce) {
  .cta-band, .page-hero { animation: none; }
  .hero-slides .slide.on { animation: none; }
  .hero .container > *, .page-hero .container > * { animation: none; opacity: 1; transform: none; }
  .btn-primary::after { display: none; }
}

/* ============================================================
   DYNAMIC LAYER 2 — opt-in extras: scroll progress, tilt cards,
   stat accents, bolder hero, page-transition fade.
   ============================================================ */

/* 1) Scroll progress bar (added to DOM by main.js) */
.scroll-progress {
  position: fixed; top: 0; inset-inline: 0;
  height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--green-600), var(--lime-400));
  transform: scaleX(0); transform-origin: left;
  will-change: transform; pointer-events: none;
}
html[dir="rtl"] .scroll-progress { transform-origin: right; }

/* 2) Tilt cards: 3D context; freeze the transform transition while tracking the cursor */
.card { transform-style: preserve-3d; }
.card.gl-tilting { transition: box-shadow .2s ease, border-color .2s ease; }

/* 3) Stat accents: gradient underline beneath each number */
.stat .num { position: relative; padding-bottom: .5rem; }
.stat .num::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 28px; height: 3px; transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lime-400), var(--green-500));
  opacity: .9;
}

/* 4) Bolder hero: layered lime glow over the dark overlay + soft bottom bloom */
.hero::after {
  background:
    radial-gradient(900px circle at 85% 18%, rgba(141,198,63,.22), transparent 46%),
    linear-gradient(100deg, rgba(7,42,26,.92) 25%, rgba(7,42,26,.55) 60%, rgba(7,42,26,.32));
}
html[dir="rtl"] .hero::after {
  background:
    radial-gradient(900px circle at 15% 18%, rgba(141,198,63,.22), transparent 46%),
    linear-gradient(-100deg, rgba(7,42,26,.92) 25%, rgba(7,42,26,.55) 60%, rgba(7,42,26,.32));
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(720px circle at 50% 122%, rgba(43,179,90,.28), transparent 55%);
  mix-blend-mode: screen; opacity: .55;
}

/* 5) Page-transition fade — fade OUT on leave only (no arrival fade, so LCP is untouched) */
html.js body { transition: opacity .18s ease; }
html.js body.gl-leaving { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.js body, html.js body.gl-leaving { transition: none; opacity: 1; }
}

/* ============================================================
   MOBILE MENU MOTION — hamburger morphs to X, panel slides in,
   items cascade. Appended last so it wins inside the breakpoint.
   ============================================================ */
@media (max-width: 920px) {
  /* Hamburger bars animate (both directions, since this is a transition not tied to display) */
  .nav-toggle span { transition: transform .3s cubic-bezier(.5,.2,.2,1), opacity .2s ease; transform-origin: center; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Tap feedback on the button itself */
  .nav-toggle:active { transform: scale(.9); }

  /* Panel slides + fades in when it switches to display:flex */
  .nav.open {
    animation: gl-menu-in .34s cubic-bezier(.22,.85,.26,1) both;
    transform-origin: top center;
  }
  @keyframes gl-menu-in {
    from { opacity: 0; transform: translateY(-14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Panel slides + fades out on close (JS keeps it flex until the animation ends) */
  .nav.open.gl-closing { animation: gl-menu-out .24s ease both; }
  @keyframes gl-menu-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-12px) scale(.97); }
  }

  /* Links cascade in under the panel */
  .nav.open a { animation: gl-menu-item .4s cubic-bezier(.22,.8,.28,1) both; }
  .nav.open a:nth-of-type(1) { animation-delay: .07s; }
  .nav.open a:nth-of-type(2) { animation-delay: .12s; }
  .nav.open a:nth-of-type(3) { animation-delay: .17s; }
  .nav.open a:nth-of-type(4) { animation-delay: .22s; }
  .nav.open a:nth-of-type(5) { animation-delay: .27s; }
  .nav.open a:nth-of-type(6) { animation-delay: .32s; }
  @keyframes gl-menu-item {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  html[dir="rtl"] .nav.open a { animation-name: gl-menu-item-rtl; }
  @keyframes gl-menu-item-rtl {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-toggle span { transition: none; }
    .nav.open, .nav.open a { animation: none; }
  }
}

/* ============================================================
   MONOCHROME LOGO — one logo that reads on light AND dark.
   The PNG has a transparent background, so brightness(0) turns it
   into a clean solid-black silhouette; invert(1) flips it to white.
   The header sits on a light frosted-glass pill -> black silhouette.
   On any dark surface (footer / page-hero / hero / .on-dark) -> white.
   ============================================================ */
/* Adaptive: the header floats over a dark hero/page-hero at the top of every page,
   so the logo is WHITE there; once scrolled onto light content it flips to BLACK.
   (.scrolled is toggled by main.js at scrollY > 8.) */
.brand img {
  filter: brightness(0) invert(1);   /* white — over the dark hero at the top */
  opacity: .95;
  transition: filter .3s ease, opacity .3s ease;
}
.site-header.scrolled .brand img {
  filter: brightness(0);             /* black — scrolled over light sections */
  opacity: .9;
}
.brand:hover img { opacity: 1; }

/* Explicit override for any logo dropped onto a known dark surface */
.site-footer .brand img,
.on-dark .brand img {
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* ============================================================
   MILESTONE TIMELINE — PROGRESS FILL. A green fill travels down the
   gray track (1997 -> present); each dot and its year light up as the
   fill reaches them, ending at the latest (2026) milestone, which then
   pulses. JS adds .gl-animate on scroll-in and sets --td per <li> = the
   delay at which the fill passes that dot (computed from its position,
   matched to the fill duration). Gated on html.js; no-JS shows it all.
   ============================================================ */
:root { --tl-fill: 2.6s; --rail-x: 7px; }   /* tuned onto the dot centers */

/* Trim the rail (gray track ::before + green fill ::after) to run from the first
   dot down to a small end-cap just past the last (2026) milestone — no dangle.
   JS sets --tl-top and --tl-len from the real dot positions. */
.timeline { isolation: isolate; }            /* scope the rail/dot stacking order */
.timeline li { z-index: 1; }                 /* dots + year + end-cap sit ABOVE the rail */
html.js .timeline::before,
html.js .timeline::after {
  top: var(--tl-top, 6px);
  bottom: auto;
  height: var(--tl-len, calc(100% - 12px));
  inset-inline-start: var(--rail-x, 8px);   /* tuned onto the dot centers */
  z-index: 0;                               /* rail behind the dots -> looks like it connects them */
}

/* ::after is the animated green fill drawn over the gray ::before track */
html.js .timeline::after {
  content: "";
  position: absolute;
  width: 2px;
  background: linear-gradient(var(--green-500), var(--green-700));
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top;
}
html.js .timeline.gl-animate::after { transform: scaleY(1); transition: transform var(--tl-fill) linear; }

/* Dots begin hollow/gray, then fill green when the progress reaches them */
html.js .timeline li::before {
  background: var(--paper);
  border: 2.5px solid var(--line);
  box-shadow: 0 0 0 2px var(--line);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
html.js .timeline.gl-animate li::before {
  background: var(--green-600);
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--green-600);
  transform: scale(1.15);
  transition-delay: var(--td, 0ms);
}

/* Year label stays muted until its dot fills, then turns brand green */
html.js .timeline li .year { color: var(--ink-soft); transition: color .35s ease; }
html.js .timeline.gl-animate li .year { color: var(--green-600); transition-delay: var(--td, 0ms); }

/* Small end-cap dot terminating the line just past 2026 (added by JS inside the
   last <li>). Centered on the same rail as the milestone dots; pops + pulses
   when the fill reaches it. */
html.js .tl-end {
  position: absolute;
  inset-inline-start: calc(-1.8rem + 7.75px); /* dot center +1.75px right (user-tuned) */
  top: 62px;                                   /* dot center (14px) + 48px tail */
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 3px rgba(43,179,90,.18);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .45s cubic-bezier(.34,1.7,.5,1);
  transition-delay: var(--td, 0ms);
  pointer-events: none;
}
html.js .timeline.gl-animate .tl-end {
  transform: translate(-50%, -50%) scale(1);
  animation: gl-dot-pulse 2.2s ease-in-out infinite;
  animation-delay: calc(var(--td, 0ms) + .4s);
}
@keyframes gl-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--green-600); }
  50%      { box-shadow: 0 0 0 2px var(--green-500), 0 0 15px 4px rgba(43,179,90,.6); }
}

@media (prefers-reduced-motion: reduce) {
  html.js .timeline::after { transform: scaleY(1); transition: none; }
  html.js .timeline li::before {
    background: var(--green-600); border-color: #fff; box-shadow: 0 0 0 2px var(--green-600); transition: none; transform: none;
  }
  html.js .timeline li .year { color: var(--green-600); }
  html.js .tl-end { transform: translate(-50%, -50%) scale(1); transition: none; animation: none; }
}

/* ===== Tier-1 SEO: breadcrumbs + FAQ ===== */
.page-hero .breadcrumbs { font-size: .85rem; margin-bottom: .9rem; opacity: .9; }
.page-hero .breadcrumbs a { color: var(--lime-400); text-decoration: none; }
.page-hero .breadcrumbs a:hover { text-decoration: underline; }
.page-hero .breadcrumbs .sep { margin: 0 .5rem; opacity: .55; }
.page-hero .breadcrumbs [aria-current="page"] { color: #fff; }

.faq-list { max-width: 820px; margin: 1.6rem auto 0; }
.faq-item { border: 1px solid #e2e8e3; border-radius: 12px; padding: 0 1.1rem; margin-bottom: .8rem; background: #fff; }
.faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 0; font-weight: 700; color: var(--green-900);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--green-600); line-height: 1; flex: none; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item .faq-answer { padding: 0 0 1.1rem; color: #44524b; line-height: 1.7; }
[dir="rtl"] .faq-item summary { text-align: right; }

/* ============================================================
   DYNAMIC LAYER 3 — SYMMETRY, BALANCE & COHESION PASS
   Appended last, so these rules win on specificity ties.
   Additive only. Uses logical properties so EN (LTR) and AR (RTL)
   stay mirrored. No motion is added that isn't already disabled by
   the existing prefers-reduced-motion blocks; new ambient/depth here
   is paint-only (shadows, gradients) and therefore motion-safe.
   ============================================================ */

/* ---- New design tokens (elevation, radius, accent, motion, space) ---- */
:root {
  --elev-1: 0 1px 2px rgba(11,61,38,.06), 0 4px 12px rgba(11,61,38,.08);
  --elev-2: 0 6px 18px rgba(11,61,38,.10), 0 2px 6px rgba(11,61,38,.06);
  --elev-3: 0 18px 40px rgba(11,61,38,.16), 0 4px 12px rgba(11,61,38,.08);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --accent-grad: linear-gradient(90deg, var(--green-600), var(--lime-400));

  --ease-standard: cubic-bezier(.22,.61,.36,1);
  --ease-overshoot: cubic-bezier(.34,1.2,.4,1);
  --dur-1: .2s;
  --dur-2: .32s;
  --dur-3: .6s;

  --space-sm: 1rem;
  --space-md: 1.6rem;
  --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --space-2xl: clamp(3rem, 2.4rem + 3vw, 5rem);
}

/* ---- P1: fluid h3 so the type scale doesn't collapse at card level ---- */
h3 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.45rem); }

/* ---- P0: cap auto-fit grids at the wide breakpoint + center short rows ---- */
@media (min-width: 921px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid-3 > *, .grid-4 > * { min-width: 0; }
.grid { justify-items: stretch; }

/* ---- P2 (pure-CSS, safe to ship now): services icon-grid clean rows ---- */
.icon-grid { justify-content: center; }
@media (min-width: 921px) {
  .icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- P1: one alignment axis per page — left-align the icon tiles ---- */
.icon-grid li { align-items: flex-start; text-align: start; }

/* ---- P1: reserve the card media slot so card tops line up ---- */
.card .card-logo { min-height: 76px; }

/* ---- P0: WCAG AA on the two dark banners (raise text + darken light stop) ---- */
.page-hero p, .cta-band p { color: rgba(255,255,255,.92); }
.page-hero {
  background: linear-gradient(115deg, var(--green-900), var(--green-800) 60%, var(--green-700));
}
.cta-band {
  background: linear-gradient(115deg, var(--green-800), var(--green-700));
}

/* ---- P1: 3-tier elevation assigned by component weight ---- */
.icon-grid li, .socials a { box-shadow: var(--elev-1); }
.card, .contact-card, .lead-form, .split .pic, .gallery img { box-shadow: var(--elev-2); }
.map-frame, .cta-band { box-shadow: var(--elev-3); }
.card:hover { box-shadow: var(--elev-3); }
.icon-grid li:hover { box-shadow: var(--elev-2); }

/* ---- P1: radius scale mapped onto the ad-hoc literals ---- */
.icon-list li, .faq-item, .card-photo, .form-ok, .form-err,
.icon-grid li, .gallery img { border-radius: var(--radius-md); }
.lead-form input, .lead-form textarea { border-radius: var(--radius-sm); }

/* ---- P1: centralize the accent gradient; give gold a second home ---- */
.section-head h2::after, .scroll-progress, .card::before { background: var(--accent-grad); }
html[dir="rtl"] .section-head h2::after {
  background: linear-gradient(270deg, var(--green-600), var(--lime-400));
}
.cta-band h2 { position: relative; }
.cta-band h2::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  margin-top: .75rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--gold), var(--lime-400));
}
html[dir="rtl"] .cta-band h2::after {
  background: linear-gradient(270deg, var(--gold), var(--lime-400));
}

/* ---- P1: unify the keyboard-focus ring on forms onto the global token ---- */
.lead-form input:focus-visible, .lead-form textarea:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}
.lead-form input:focus:not(:focus-visible),
.lead-form textarea:focus:not(:focus-visible) { outline: none; }

/* ---- P1: route the dominant hover transitions onto the motion tokens ---- */
.card {
  transition: transform var(--dur-2) var(--ease-overshoot),
              box-shadow var(--dur-2) ease, border-color var(--dur-2) ease;
}
.icon-grid li {
  transition: transform var(--dur-2) var(--ease-overshoot), box-shadow var(--dur-2) ease;
}
.stat .num { transition: transform var(--dur-2) var(--ease-overshoot); }

/* ---- P1: calm the infinite banner gradient to a one-shot settle ---- */
.cta-band, .page-hero {
  animation: gl-gradient-settle 14s var(--ease-standard) 1 both;
}
@keyframes gl-gradient-settle {
  0%   { background-position: 0% 50%; }
  60%  { background-position: 100% 50%; }
  100% { background-position: 50% 50%; }
}

/* ---- P1: layered depth on large media; resting lift on the split picture ---- */
.split .pic, .gallery img, .card-photo {
  box-shadow: 0 16px 36px rgba(11,61,38,.14), 0 3px 10px rgba(11,61,38,.07);
}
.split .pic {
  transition: transform var(--dur-3) var(--ease-standard), box-shadow var(--dur-3) ease;
}
.split:hover .pic {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(11,61,38,.22), 0 6px 16px rgba(11,61,38,.10);
}

/* ---- P1: balance the stats band's lighting (top glow + matching bottom bloom) ---- */
.stats {
  background-image:
    radial-gradient(820px circle at 50% -40%, rgba(141,198,63,.20), transparent 60%),
    radial-gradient(900px circle at 50% 150%, rgba(43,179,90,.14), transparent 60%);
}

/* ---- P2 (pure-CSS, safe now): even footer columns + anchor hero text ---- */
@media (min-width: 921px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
}
.hero h1 { max-width: 18em; }
.hero p.sub { max-width: 34em; }

/* ---- Optional spacing utilities (for the template margin cleanup) ---- */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.section.tight { padding-block: var(--space-lg); }

/* ---- Reduced-motion safety for the new transform-based motion only ---- */
@media (prefers-reduced-motion: reduce) {
  .cta-band, .page-hero { animation: none; }
  .split .pic { transition: none; }
  .split:hover .pic { transform: none; }
}

/* ============================================================
   DYNAMIC LAYER 4 — whole-card linking + motion tempo retune
   ============================================================ */

/* ---- Whole-card click: any card carrying a primary link becomes fully
   clickable. The link's ::after overlay stretches across the whole card
   (the card is the nearest positioned ancestor). Nested links — the social
   icons — are lifted above the overlay so they stay independently clickable. */
.card-link { cursor: pointer; }
/* the overlay must size to the CARD (position:relative), so DON'T position
   .links — a positioned .links would become the containing block and shrink
   the clickable area to just the link strip. Only lift the nested socials. */
.card-link .links a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card-link .socials { position: relative; z-index: 2; }
/* hovering anywhere on the card lights up its link, signalling it's clickable */
.card-link:hover .links a { color: var(--green-800); }

/* ---- Motion tempo: one calmer heartbeat — shorter, shorter-travel reveal so
   the page settles faster (main.js still staggers + caps the sequence). ---- */
html.js .reveal {
  transform: translateY(18px);
  transition: opacity .55s var(--ease-standard), transform .55s var(--ease-standard);
}

/* ---- Hero Ken Burns: gentler zoom target + tighter duration so the 5s slide
   swap no longer snaps the scale mid-travel. ---- */
.hero-slides .slide.on { animation-duration: 6.4s; }
@keyframes gl-kenburns {
  from { transform: scale(1.001); }
  to   { transform: scale(1.055); }
}

/* ---- Re-assert reduced-motion LAST so the tempo retune never reintroduces
   motion for users who opted out. ---- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { transform: none; transition: none; }
}

/* ============================================================
   DYNAMIC LAYER 5 — mobile hero sits flush under the floating menu
   The fixed header is ~89px tall on phones. The base hero reserves
   116px AND vertically centers (align-items:center), which dropped the
   tagline to ~147px — a ~58px empty band under the menu. On mobile,
   clear only the header height and top-align the content so the hero
   copy begins right beneath the menu, no dead space above it.
   ============================================================ */
@media (max-width: 920px) {
  .hero {
    padding-top: 100px;
    padding-bottom: 2.25rem;
    min-height: auto;        /* was 76vh — let the hero hug its content so there's
                                no empty image band below the CTAs before the stats */
    align-items: flex-start;
  }
  /* inner pages: same flush-under-the-menu clearance (page-hero isn't
     flex-centered, so only the top padding needs trimming — 132px -> 100px). */
  .page-hero {
    padding-top: 100px;
  }

  /* Tighten the generous desktop spacing on phones — clears the airy dead
     space inside/around sections and the oversized gap before the footer.
     (Desktop keeps 4.5rem sections + 4rem footer gap untouched.) */
  .section { padding-block: 3rem; }
  .section-head { margin-bottom: 1.75rem; }
  .site-footer { margin-top: 0; }