/* ==========================================================================
   Public marketing site.

   A single page with scroll navigation, replacing the four separate legacy pages.
   Built on the brand green #27a776 and the dark surface newmain.css established.

   Motion is deliberate rather than decorative: things move on entry to guide the eye
   down the page, and every transition is disabled under prefers-reduced-motion.
   ========================================================================== */

:root {
  --site-bg: #080b0f;
  --site-surface: #11161d;
  --site-surface-2: #161d26;
  --site-border: #222c38;
  --site-text: #e8edf3;
  --site-muted: #8a97a8;
  --site-accent: #27a776;
  --site-accent-soft: rgba(39, 167, 118, .14);
  --site-nav-h: 72px;
}

body.ld-site {
  background: var(--site-bg);
  color: var(--site-text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

.ld-site h1, .ld-site h2, .ld-site h3 { letter-spacing: -.02em; }
.ld-site section { scroll-margin-top: var(--site-nav-h); }

/* --- navigation --------------------------------------------------------- */
.site-nav {
  position: fixed; inset: 0 0 auto 0; height: var(--site-nav-h); z-index: 1040;
  display: flex; align-items: center;
  background: transparent;
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
/* Solid only once the hero has scrolled past, so the nav does not fight the artwork. */
.site-nav.is-stuck {
  background: rgba(8, 11, 15, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--site-border);
}
.site-nav a.nav-link {
  color: var(--site-muted); font-size: .9rem; font-weight: 500;
  padding: .4rem .85rem; border-radius: 8px;
  transition: color .2s ease, background .2s ease;
}
.site-nav a.nav-link:hover { color: var(--site-text); }
.site-nav a.nav-link.is-active { color: var(--site-accent); background: var(--site-accent-soft); }

.site-brand { color: var(--site-text); font-weight: 600; letter-spacing: -.01em; }
.site-brand img { height: 34px; width: auto; }

/* --- hero --------------------------------------------------------------- */
.hero-shell {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  /* A slow drift, so a still photograph reads as motion without a video file. */
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(8,11,15,.55) 0%, rgba(8,11,15,.75) 55%, var(--site-bg) 100%),
    radial-gradient(60% 50% at 20% 40%, rgba(39,167,118,.18), transparent 70%);
}
.hero-body { position: relative; z-index: 2; }

.hero-title {
  font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 700; line-height: 1.04;
}
.hero-sub { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--site-muted); max-width: 54ch; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--site-accent); background: var(--site-accent-soft);
  padding: .35rem .8rem; border-radius: 999px; border: 1px solid rgba(39,167,118,.25);
}
.hero-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--site-accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(39,167,118,.5); }
  50%      { opacity: .7; box-shadow: 0 0 0 7px rgba(39,167,118,0); }
}

/* --- buttons ------------------------------------------------------------ */
.btn-ld {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--site-accent); color: #04120c; font-weight: 600;
  padding: .7rem 1.5rem; border-radius: 10px; border: 0; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-ld:hover {
  background: #2fc189; color: #04120c;
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(39,167,118,.3);
}
.btn-ld--ghost {
  background: transparent; color: var(--site-text);
  border: 1px solid var(--site-border);
}
.btn-ld--ghost:hover { background: var(--site-surface-2); color: var(--site-text); box-shadow: none; }

/* --- section furniture -------------------------------------------------- */
.section-pad { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section-eyebrow {
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--site-accent); font-weight: 600;
}
.section-title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 700; }
.section-lead { color: var(--site-muted); max-width: 62ch; }

/* --- counters ----------------------------------------------------------- */
.stat-value {
  font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; color: var(--site-accent);
  font-variant-numeric: tabular-nums;
}
.stat-label { color: var(--site-muted); font-size: .88rem; }

/* --- service cards ------------------------------------------------------ */
.svc {
  position: relative; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--site-border); background: var(--site-surface);
  min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease;
}
.svc:hover { transform: translateY(-6px); border-color: rgba(39,167,118,.5); }
.svc__media { position: absolute; inset: 0; z-index: 0; }
.svc__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.22,1,.36,1); transform: scale(1.02);
}
.svc:hover .svc__media img { transform: scale(1.12); }
.svc__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,11,15,.96) 18%, rgba(8,11,15,.72) 52%, rgba(8,11,15,.28) 100%);
}
.svc__body { position: relative; z-index: 2; padding: 1.5rem; }
.svc__icon {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--site-accent-soft); color: var(--site-accent);
  border: 1px solid rgba(39,167,118,.28); margin-bottom: .85rem; font-size: 1.15rem;
}
.svc__title { font-size: 1.05rem; font-weight: 600; margin-bottom: .4rem; }
.svc__text {
  color: var(--site-muted); font-size: .88rem; line-height: 1.55; margin: 0;
  /* Collapsed by default so the grid stays scannable; opens on hover or focus. */
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s ease, opacity .35s ease;
}
.svc:hover .svc__text, .svc:focus-within .svc__text { max-height: 16rem; opacity: 1; }

/* --- client logos ------------------------------------------------------- */
.logo-rail { overflow: hidden; position: relative; }
.logo-rail::before, .logo-rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2;
  pointer-events: none;
}
.logo-rail::before { left: 0; background: linear-gradient(to right, var(--site-bg), transparent); }
.logo-rail::after { right: 0; background: linear-gradient(to left, var(--site-bg), transparent); }
.logo-track { display: flex; gap: 3rem; align-items: center; width: max-content; animation: marquee 46s linear infinite; }
.logo-rail:hover .logo-track { animation-play-state: paused; }
.logo-track img {
  height: 40px; width: auto; object-fit: contain;
  filter: grayscale(1) brightness(1.7); opacity: .55;
  transition: filter .3s ease, opacity .3s ease;
}
.logo-track img:hover { filter: none; opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- contact ------------------------------------------------------------ */
.contact-card {
  background: var(--site-surface); border: 1px solid var(--site-border);
  border-radius: 16px; padding: 1.75rem;
}
.ld-site .form-control {
  background: var(--site-surface-2); border: 1px solid var(--site-border);
  color: var(--site-text); border-radius: 9px; padding: .7rem .9rem;
}
.ld-site .form-control:focus {
  background: var(--site-surface-2); color: var(--site-text);
  border-color: var(--site-accent); box-shadow: 0 0 0 3px rgba(39,167,118,.16);
}
.ld-site .form-control::placeholder { color: #5f6c7c; }
.ld-site .form-label { color: var(--site-muted); font-size: .84rem; font-weight: 500; }

.contact-item { display: flex; gap: .9rem; align-items: flex-start; }
.contact-item i { color: var(--site-accent); font-size: 1.15rem; margin-top: .15rem; }

/* --- footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--site-border); padding: 2.5rem 0; color: var(--site-muted); }

/* --- scroll reveal ------------------------------------------------------ */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --- back to top -------------------------------------------------------- */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--site-accent); color: #04120c; text-decoration: none;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* Motion is guidance, not decoration — remove it entirely when asked to. */
@media (prefers-reduced-motion: reduce) {
  .hero-media img { animation: none; transform: scale(1.06); }
  .logo-track { animation: none; }
  .hero-eyebrow .dot { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .svc__text { max-height: 16rem; opacity: 1; transition: none; }
  .svc, .svc__media img, .btn-ld { transition: none; }
}