@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&display=swap");

:root {
  --primary: rgb(32, 168, 224);
  --secondary: rgb(30, 120, 55);
  --lightgray: rgb(234, 233, 233);
  --primary-dark: rgb(10, 38, 58);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--lightgray); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

.nav-scrolled {
  background: rgba(236, 240, 244, 0.97) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 30px rgba(32, 168, 224, 0.2) !important;
}

.card-lift {
  transition: transform 0.35s cubic-bezier(.25,.46,.45,.94), box-shadow 0.35s ease;
}
.card-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(32, 168, 224, 0.12);
}

.btn-press { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn-press:active { transform: scale(0.97) !important; }

.text-gradient {
  background: linear-gradient(135deg, rgb(30, 120, 55) 0%, rgb(70, 175, 225) 50%, rgb(30, 120, 55) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.img-zoom { transition: transform 0.6s cubic-bezier(.25,.46,.45,.94); }
.img-zoom:hover { transform: scale(1.03); }

@keyframes pulse-brand {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 120, 55, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(30, 120, 55, 0); }
}
.pulse-brand { animation: pulse-brand 2s ease-in-out infinite; }

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(1deg); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

@keyframes gridPulse { 0%, 100% { opacity: 0.04; } 50% { opacity: 0.1; } }
.grid-pulse { animation: gridPulse 4s ease-in-out infinite; }

.grid-bg {
  background-image:
    linear-gradient(rgba(30, 120, 55, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 120, 55, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}

.brand-underline { position: relative; display: inline-block; }
.brand-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: rgb(30, 120, 55);
  transition: width 0.4s ease;
}
.brand-underline:hover::after { width: 100%; }

.gold-underline { position: relative; display: inline-block; }
.gold-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: rgb(30, 120, 55);
  transition: width 0.4s ease;
}
.gold-underline:hover::after { width: 100%; }

.modal-overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content {
  transform: translateY(30px) scale(0.95);
  transition: transform 0.35s cubic-bezier(.25,.46,.45,.94);
}
.modal-overlay.active .modal-content { transform: translateY(0) scale(1); }

.mobile-menu { transform: translateX(100%); transition: transform 0.3s ease; }
.mobile-menu.open { transform: translateX(0); }

.toast {
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(.25,.46,.45,.94);
}
.toast.show { transform: translateX(0); }

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-content { animation: ticker 30s linear infinite; }

.bento-card {
  border: 1px solid rgba(32, 168, 224, 0.08);
  transition: all 0.35s cubic-bezier(.25,.46,.45,.94);
}
.bento-card:hover {
  border-color: rgba(30, 120, 55, 0.35);
  transform: translateY(-3px);
}

.counter { font-variant-numeric: tabular-nums; }

.bottom-nav-item { transition: all 0.2s ease; }
.bottom-nav-item.active { color: rgb(30, 120, 55); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgb(30, 120, 55) !important;
  box-shadow: 0 0 0 3px rgba(30, 120, 55, 0.12);
}

/* No `forwards` fill: a retained body transform would turn <body> into the
   containing block for position:fixed children (nav pill, dock, modals). */
.page-enter { animation: pageEnter 0.5s ease; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.andalusia-text { position: relative; color: rgb(225, 235, 243); }
.andalusia-text::before {
  content: attr(data-text);
  position: absolute;
  color: rgb(32, 168, 224);
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid rgb(32, 168, 224);
  animation: shehitaType 5s linear infinite;
}
@keyframes shehitaType {
  0%, 10%, 100% { width: 0; }
  70%, 90% { width: 100%; }
}

.team-card img {
  filter: grayscale(20%) brightness(0.97);
  transition: filter 0.5s ease, transform 0.5s ease;
}
.team-card:hover img {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.05);
}

.svc-accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(.25,.46,.45,.94); }
.svc-accordion-body.open { max-height: 800px; }
.svc-accordion-head { transition: all 0.3s ease; }
.svc-accordion-head:hover { background: rgba(30, 120, 55, 0.06); }
.svc-accordion-head .chevron { transition: transform 0.3s ease; }
.svc-accordion-head.active .chevron { transform: rotate(180deg); }
.svc-accordion-head.active {
  border-color: rgba(30, 120, 55, 0.3);
  background: rgba(30, 120, 55, 0.06);
}

.portfolio-modal { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.portfolio-modal.active { opacity: 1; pointer-events: auto; }
.portfolio-modal .modal-sheet {
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(.16,1,.3,1);
}
.portfolio-modal.active .modal-sheet { transform: translateY(0); }

.sub-card {
  border: 1px solid rgba(32, 168, 224, 0.08);
  transition: all 0.3s cubic-bezier(.25,.46,.45,.94);
}
.sub-card:hover {
  border-color: rgba(30, 120, 55, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(32, 168, 224, 0.08);
}

.map-filter { filter: grayscale(30%) contrast(1.05) sepia(0.15); }

/* ============================================================
   PREMIUM DESIGN LAYER — Glassmorphism · Neomorphism · Bento · Motion
   Brand palette only: primary rgb(32, 168, 224) · secondary/gold rgb(30, 120, 55)
   ============================================================ */

/* ---- GLASSMORPHISM ---- */
.glass-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 40px rgba(32, 168, 224, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.glass-tint {
  background: rgba(30, 120, 55, 0.08);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(30, 120, 55, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.glass-dark {
  background: rgba(10, 38, 58, 0.45);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(30, 120, 55, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---- NEOMORPHISM (on lightgray / white surfaces) ---- */
.neo {
  background: linear-gradient(145deg, #ffffff, #e6e4e2);
  border-radius: 1rem;
  box-shadow: 8px 8px 20px rgba(32, 168, 224, 0.10),
             -8px -8px 20px rgba(255, 255, 255, 0.9);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.neo:hover {
  transform: translateY(-3px);
  box-shadow: 10px 10px 28px rgba(32, 168, 224, 0.14),
             -10px -10px 28px rgba(255, 255, 255, 0.95);
}
.neo-inset {
  background: #f0efed;
  border-radius: 1rem;
  box-shadow: inset 6px 6px 14px rgba(32, 168, 224, 0.09),
              inset -6px -6px 14px rgba(255, 255, 255, 0.9);
}
.neo-chip {
  background: linear-gradient(145deg, #ffffff, #ececea);
  box-shadow: 5px 5px 12px rgba(32, 168, 224, 0.10),
             -5px -5px 12px rgba(255, 255, 255, 0.9);
}

/* ---- BENTO GRID HELPERS ---- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {
  .bento-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(120px, auto); }
  .bento-2 { grid-column: span 2; }
  .bento-3 { grid-column: span 3; }
  .bento-4 { grid-column: span 4; }
  .bento-6 { grid-column: span 6; }
  .row-2 { grid-row: span 2; }
}

/* ---- 3D TILT (JS-driven via CSS vars) ---- */
.tilt {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.2s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.tilt-inner { transform: translateZ(28px); }
.tilt-glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(30, 120, 55,0.22), transparent 55%);
}
.tilt:hover .tilt-glow { opacity: 1; }

/* ---- ANIMATED GRADIENT MESH / BLOBS ---- */
.mesh-bg {
  background:
    radial-gradient(40% 55% at 15% 20%, rgba(30, 120, 55,0.18) 0%, transparent 60%),
    radial-gradient(45% 50% at 85% 15%, rgba(32, 168, 224,0.16) 0%, transparent 60%),
    radial-gradient(50% 60% at 70% 85%, rgba(70, 175, 225,0.14) 0%, transparent 60%);
}
.blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5;
  background: radial-gradient(circle, rgba(30, 120, 55,0.35), transparent 70%);
  animation: blobFloat 16s ease-in-out infinite;
}
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-40px) scale(1.12); }
  66% { transform: translate(-25px,25px) scale(0.92); }
}

/* ---- GRADIENT SHINE HEADING ---- */
.shine-text {
  background: linear-gradient(100deg, rgb(32, 168, 224) 20%, rgb(70, 175, 225) 45%, rgb(220, 245, 255) 50%, rgb(70, 175, 225) 55%, rgb(32, 168, 224) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

/* ---- MARQUEE ---- */
.marquee { overflow: hidden; }
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- SCROLL REVEAL (custom, complements AOS) ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- MAGNETIC BUTTON ---- */
.magnetic { transition: transform 0.25s cubic-bezier(.25,.46,.45,.94); will-change: transform; }

/* ---- SCROLL PROGRESS BAR ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 100;
  background: linear-gradient(90deg, rgb(32, 168, 224), rgb(30, 120, 55), rgb(70, 175, 225));
  box-shadow: 0 0 12px rgba(30, 120, 55,0.5);
  transition: width 0.1s linear;
}

/* ---- FLOATING ACTION BUTTON (WhatsApp) ---- */
.fab {
  position: fixed; right: 18px; bottom: 84px; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff; box-shadow: 0 10px 30px rgba(37,211,102,0.45);
  transition: transform 0.3s cubic-bezier(.25,.46,.45,.94), box-shadow 0.3s ease;
  animation: fabPulse 2.6s ease-in-out infinite;
}
.fab:hover { transform: scale(1.1) rotate(6deg); }
@media (min-width: 1024px) { .fab { bottom: 24px; } }
@keyframes fabPulse {
  0%,100% { box-shadow: 0 10px 30px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.4); }
  50% { box-shadow: 0 10px 30px rgba(37,211,102,0.45), 0 0 0 12px rgba(37,211,102,0); }
}

/* ---- BRANDED PLACEHOLDER GRAPHIC (for missing images) ---- */
.brand-ph {
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(32, 168, 224,0.95), rgba(30, 120, 55,0.9)),
    radial-gradient(circle at 30% 20%, rgba(220, 245, 255,0.25), transparent 55%);
  display: flex; align-items: center; justify-content: center;
}
.brand-ph::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}
.brand-ph iconify-icon { position: relative; z-index: 1; color: rgba(255,255,255,0.9); }
.brand-ph--soft {
  background:
    linear-gradient(135deg, rgba(30, 120, 55,0.14), rgba(32, 168, 224,0.10)),
    radial-gradient(circle at 70% 30%, rgba(70, 175, 225,0.18), transparent 60%);
}
.brand-ph--soft iconify-icon { color: rgb(24, 100, 45); }

/* ---- AVATAR (initials) ---- */
.avatar-init {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgb(32, 168, 224), rgb(30, 120, 55));
  color: #fff; font-weight: 700; letter-spacing: 0.5px;
}

/* ---- COUNT-UP ---- */
.count[data-count] { font-variant-numeric: tabular-nums; }

/* ============================================================
   PHASE 2 — Reference-driven premium layer
   Sources: samples/ (Branbee hero marquee · FLORA card stack ·
   Tartan two-tone · Eleveight pill nav + footer card ·
   machinefootball team path · Lex Politica word reveals ·
   iPhone floating dock). Brand palette only — no new colors.
   ============================================================ */

/* ---- SERIF ACCENT (Fraunces italic inside bold Poppins headlines) ---- */
.accent-serif {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---- EDITORIAL HELPERS (Lex Politica) ---- */
.eyebrow {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 700;
}
.hairline { border-top: 1px solid rgba(10, 38, 58, 0.14); }
.hairline--light { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.ghost-word {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-weight: 800; letter-spacing: -0.04em; white-space: nowrap; line-height: 1;
  font-size: clamp(5rem, 17vw, 15rem); color: rgba(32, 168, 224, 0.05);
}
.svc-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(3.5rem, 7vw, 6rem); line-height: 0.9; font-weight: 400;
  color: transparent; -webkit-text-stroke: 1.5px rgba(30, 120, 55, 0.55);
}

/* ---- VERTICAL EDITORIAL WORD (About · team section) ----
   Stacked letters that rise from behind a clip with a staggered cascade,
   painted in the hero accent gradient (matches the shine-text headlines).
   NOTE: the reveal trigger (.reveal) lives on the CONTAINER, never on the
   translated letters — a letter sits outside its overflow:hidden clip, so an
   IntersectionObserver on it would always read 0% visible and never fire. */
.integrity-word.reveal { opacity: 1; transform: none; }
.integrity-word .il-wrap { display: block; overflow: hidden; }
.integrity-word .ils {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(3.25rem, 5.2vw, 5.25rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
  opacity: 1;
  transform: translateY(115%);
  transition: transform 0.85s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
  background: linear-gradient(125deg, rgb(12, 70, 120) 4%, rgb(30, 120, 55) 30%, rgb(120, 205, 240) 50%, rgb(230, 248, 255) 56%, rgb(30, 120, 55) 72%, rgb(12, 70, 120) 96%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shine 6s linear infinite;
}
.integrity-word.in .ils { transform: none; }

/* ---- WORD / LETTER REVEAL (Lex Politica) — JS splits, IO triggers ---- */
/* The mask must never touch the ink — not even for one frame. Heading glyphs paint below
   their layout box (measured across every heading on this site: Poppins 'y'/'p' 0.204em,
   Fraunces italic 0.192em), so the mask is extended past that depth and pulled back with an
   equal negative margin, leaving layout untouched. Releasing the mask *after* the cascade
   instead would leave each word visibly clipped until the last one landed, then pop. */
.wr-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.36em;
  margin-bottom: -0.36em;
}
.wr-w > .wr-i {
  display: inline-block;
  /* Below the *padded* mask, so the word is still completely hidden before it slides in. */
  transform: translateY(calc(100% + 0.42em));
  transition: transform 0.9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--wr-d, 0ms);
  will-change: transform;
}
.wr-in .wr-w > .wr-i { transform: none; }
/* Backstop only, for a fallback serif with deeper descenders than the padding allows.
   With the padding above it is a no-op, so it can no longer cause a visible pop. */
.wr-done .wr-w,
.integrity-word.wr-done .il-wrap { overflow: visible; }

/* ---- VERTICAL CARD MARQUEE (Branbee hero) ---- */
.v-marquee {
  overflow: hidden; position: relative; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.v-marquee__track { display: flex; flex-direction: column; animation: vmarquee var(--vm-dur, 38s) linear infinite; will-change: transform; }
.v-marquee__track > * { margin-bottom: 1rem; flex-shrink: 0; }
.v-marquee--reverse .v-marquee__track { animation-direction: reverse; }
.v-marquee:hover .v-marquee__track { animation-play-state: paused; }
@keyframes vmarquee { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* ---- HORIZONTAL DRIFT ROWS (Branbee testimonials) ---- */
.marquee--reverse .marquee__track { animation-direction: reverse; }

/* ---- FLOATING PILL NAVBAR (Eleveight) ---- */
.nav-pill {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 50; width: min(1200px, calc(100% - 20px));
  border-radius: 9999px;
  background: linear-gradient(100deg, rgba(238, 241, 245, 0.82), rgba(150, 200, 225, 0.82));
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(30, 120, 55, 0.28);
  box-shadow: 0 10px 40px rgba(32, 168, 224, 0.16);
  transition: box-shadow 0.4s ease, background 0.4s ease;
}
.nav-pill.nav-scrolled {
  background: rgba(236, 240, 244, 0.95) !important;
  box-shadow: 0 16px 50px rgba(32, 168, 224, 0.22) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
}
.nav-pill__link {
  color: rgba(28, 45, 62, 0.75); font-size: 0.8rem; font-weight: 500;
  padding: 8px 16px; border-radius: 9999px;
  transition: color 0.25s ease, background 0.25s ease;
}
.nav-pill__link:hover { color: rgb(10, 38, 58); background: rgba(32, 168, 224, 0.07); }
.nav-pill__link.active { color: rgb(10, 38, 58); background: rgba(30, 120, 55, 0.18); font-weight: 600; }

/* ---- MOBILE FLOATING DOCK (iPhone refs) ---- */
.dock {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 60; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; border-radius: 9999px;
  background: rgba(238, 242, 246, 0.78);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(30, 120, 55, 0.3);
  box-shadow: 0 18px 50px rgba(32, 168, 224, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.4s cubic-bezier(.16, 1, .3, 1), opacity 0.4s ease;
}
.dock--hidden { transform: translateX(-50%) translateY(150%); opacity: 0; }
.dock__item {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 11px; border-radius: 9999px;
  color: rgba(28, 45, 62, 0.7); font-size: 8.5px; font-weight: 600;
  transition: color 0.25s ease, background 0.25s ease;
}
.dock__item.active { color: #fff; background: rgba(30, 120, 55, 0.85); }
/* WhatsApp CTA floats just ABOVE the dock, aligned to its right edge — out of
   the flex row (position:absolute) so the page links spread evenly below. */
.dock__cta {
  position: absolute; right: 6px; bottom: calc(100% + 12px);
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, rgb(30, 120, 55), rgb(32, 168, 224));
  border: 3px solid rgba(238, 242, 246, 0.9);
  box-shadow: 0 12px 30px rgba(30, 120, 55, 0.5);
  transition: transform 0.25s ease;
}
.dock__cta:active { transform: scale(0.92); }
@media (min-width: 1024px) { .dock { display: none; } }
@media (max-width: 1023.5px) { .fab { display: none; } }
/* Keep the five links comfortably spaced without touching the screen edges
   on the smallest phones. */
@media (max-width: 360px) {
  .dock { gap: 3px; padding: 6px 7px; }
  .dock__item { padding: 6px 8px; }
}

/* ---- STICKY CARD STACK (FLORA) ---- */
.stack-card {
  position: sticky;
  top: calc(96px + var(--stack-i, 0) * 16px);
  transform-origin: center top;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.stack-card.stack-behind { transform: scale(0.965); filter: brightness(0.82); }
/* On phones the cards are single-column and taller than the viewport, so the
   sticky stack would hide each card's lower half behind the next one. Fall back
   to normal flow — fully readable — and keep the premium stack for >=768px. */
@media (max-width: 767.5px) {
  .stack-card { position: static; top: auto; }
  .stack-card.stack-behind { transform: none; filter: none; }
}

/* ---- CHIP LABEL (Eleveight cards) ---- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 9999px;
}
.chip--dark { background: rgba(10, 38, 58, 0.85); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.14); }
.chip--gold { background: rgba(30, 120, 55, 0.12); color: rgb(24, 100, 45); border: 1px solid rgba(30, 120, 55, 0.25); }

/* ---- TEAM WINDING PATH (machinefootball) ---- */
.sticky-blur { transition: filter 0.6s ease, opacity 0.6s ease; }
.sticky-blur.is-past { filter: blur(7px); opacity: 0.22; }
.team-node__photo {
  width: 132px; height: 132px; border-radius: 50%; flex-shrink: 0;
  border: 4px solid #fff; box-shadow: 0 16px 44px rgba(32, 168, 224, 0.18);
  position: relative;
}
.team-node__photo img, .team-node__photo .avatar-init { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.team-node__line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(30, 120, 55, 0.4), rgba(30, 120, 55, 0.06)); min-width: 28px; }
.team-tag {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 9999px;
  background: rgb(30, 120, 55); color: #fff; box-shadow: 0 6px 18px rgba(30, 120, 55, 0.35);
}
@media (max-width: 640px) { .team-node__photo { width: 96px; height: 96px; } }

/* ---- FOOTER CONTAINER CARD (Eleveight) ---- */
.footer-card {
  border-radius: 1.75rem;
  background: linear-gradient(165deg, rgb(236, 240, 244) 0%, rgb(150, 205, 230) 100%);
  border: 1px solid rgba(30, 120, 55, 0.3);
  box-shadow: 0 24px 70px rgba(32, 168, 224, 0.18);
  overflow: hidden;
}

/* Never let footer content exceed the card on small screens */
.footer-card, .footer-card * { min-width: 0; }
.footer-card p,
.footer-card li,
.footer-card a,
.footer-card span,
.footer-card input { overflow-wrap: anywhere; }
.footer-card #newsletterForm input { max-width: 100%; }

/* Stack the newsletter form on narrow phones so the button never clips */
@media (max-width: 460px) {
  .footer-card #newsletterForm { flex-direction: column; }
  .footer-card #newsletterForm input,
  .footer-card #newsletterForm button { width: 100%; }
}

/* Brand-gradient underline that slides in on hover/active */
.footer-card .footer-link {
  position: relative; display: inline-block;
  color: rgba(28, 45, 62, 0.65);
  transition: color 0.25s ease, transform 0.25s ease;
}
.footer-card .footer-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  height: 1.5px; width: 100%;
  background: linear-gradient(90deg, rgb(30, 120, 55), rgb(32, 168, 224));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(.16, 1, .3, 1);
}
.footer-card .footer-link:hover::after,
.footer-card .footer-link.active::after { transform: scaleX(1); }
.footer-card .footer-link:hover { color: rgb(10, 38, 58); }
.footer-card .footer-link.active { color: rgb(24, 100, 45); font-weight: 600; }
.avatar-stack { display: flex; }
.avatar-stack > * { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgb(236, 240, 244); font-size: 9px; }
.avatar-stack > * + * { margin-left: -8px; }

/* ---- MOBILE HORIZONTAL HERO MARQUEE (track auto-duplicated by premium.js) ----
   Margins instead of flex gap so the duplicated track loops seamlessly at -50%. */
.marquee--auto .marquee__track { gap: 0; }
.marquee--auto .marquee__track > * { margin-right: 1rem; flex-shrink: 0; }

/* ---- MOBILE CURTAIN FOOTER (applied by premium.js when the footer fits the viewport) ---- */
.footer-curtain { position: fixed; bottom: 0; left: 0; right: 0; z-index: 0; }
#pageWrap { position: relative; z-index: 10; background: #fff; }

/* ---- MOBILE SNAP CAROUSEL (iPhone refs) ---- */
.snap-row {
  display: flex; gap: 0.75rem; overflow-x: auto; padding: 4px 4px 14px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.snap-row::-webkit-scrollbar { display: none; }
.snap-row > * { scroll-snap-align: center; flex: 0 0 auto; }

/* ---- FILTER PILL TABS (Branbee) ---- */
.ftab {
  padding: 8px 18px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
  color: rgb(32, 168, 224); background: transparent; cursor: pointer;
  border: 1px solid transparent; transition: all 0.25s ease;
}
.ftab:hover { border-color: rgba(30, 120, 55, 0.3); }
.ftab.active { background: rgb(30, 120, 55); color: #fff; box-shadow: 0 8px 22px rgba(30, 120, 55, 0.32); }
.fcard { transition: opacity 0.4s ease, transform 0.4s ease; }
.fcard.fcard-hide { display: none; }

/* ============================================================
   ROUND 2 — light logo blue, image animations, lightbox
   primary = rgb(32,168,224) (logo sky) · deep = rgb(12,92,150) for
   text/solid-buttons on white · ink = rgb(10,38,58)
   ============================================================ */

/* ---- deep-blue helpers (contrast on white) ---- */
.text-bluedeep { color: rgb(12, 92, 150); }
.bg-bluedeep { background: rgb(12, 92, 150); }

/* ---- WHITE TEXT SCRIM (over video / light-blue backdrops) ---- */
.txt-shadow { text-shadow: 0 2px 18px rgba(4, 16, 28, 0.55), 0 1px 3px rgba(4, 16, 28, 0.4); }

/* ---- LIGHTENED DARK SECTION (blue gradient, not near-black) ---- */
/* deep enough for legible white text across the whole gradient, but clearly blue (not near-black) */
.sec-blue {
  background: linear-gradient(120deg, rgb(9, 48, 80) 0%, rgb(15, 86, 138) 60%, rgb(20, 108, 168) 100%);
}
.sec-blue-soft {
  background: linear-gradient(120deg, rgb(12, 74, 120), rgb(32, 168, 224));
}

/* ---- KEN BURNS (slow zoom/pan on hero & feature images) ---- */
.kb-wrap { overflow: hidden; }
.ken-burns { animation: kenburns 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns {
  0%   { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.16) translate(-2%, -2%); }
}
.ken-burns--rev { animation: kenburnsRev 26s ease-in-out infinite alternate; }
@keyframes kenburnsRev {
  0%   { transform: scale(1.12) translate(-1%, 0); }
  100% { transform: scale(1.04) translate(1%, -2%); }
}

/* ---- IMAGE CLIP-PATH REVEAL (on scroll, via .reveal.in) ---- */
.img-reveal { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.16,1,.3,1); }
.img-reveal.in { clip-path: inset(0 0 0 0); }
.img-reveal img { transform: scale(1.08); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.img-reveal.in img { transform: scale(1); }

/* ---- LOGO TILE (client logo wall — uniform white tiles) ---- */
.logo-tile {
  background: #fff; border-radius: 0.9rem; padding: 14px 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(9, 40, 70, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.logo-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(9, 40, 70, 0.18); }
.logo-tile img { max-height: 46px; width: auto; object-fit: contain; }

/* ---- LIGHTBOX ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(6, 18, 30, 0.9); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: min(92vw, 1100px); max-height: 86vh; border-radius: 1rem;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(.16,1,.3,1);
}
.lightbox.open img { transform: scale(1); }
.lightbox__close {
  position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25); cursor: pointer;
}
[data-lightbox] { cursor: zoom-in; }

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; }
  .v-marquee__track { animation: none !important; }
  .v-marquee { -webkit-mask-image: none !important; mask-image: none !important; }
  /* initWordReveal() bails out under reduced motion, so releaseMask() never runs and
     .wr-done is never added — drop the mask here or the text stays clipped forever. */
  .wr-w { overflow: visible !important; }
  .wr-w > .wr-i { transform: none !important; }
  .dock { transition: none !important; }
  .ken-burns, .ken-burns--rev { animation: none !important; transform: none !important; }
  .img-reveal { clip-path: none !important; }
  .img-reveal img { transform: none !important; }
}