/* ==========================================================================
   HERO CINEMATIC OVERRIDE — loads after home-revamp.css to fully
   replace the old parallax hero with the new editorial design.
   ========================================================================== */

/* ── Reset old hero classes from original home-revamp.css ── */
.hero-layer,
.hero-layer-1,
.hero-layer-2,
.hero-content,
.hero-text-block,
.hero-tag,
.hero-search-anchor,
.hero-search-placeholder,
.hero-search-shortcut,
.hero-btns,
.hero-btn-primary,
.hero-btn-secondary,
.hero-scroll-indicator,
.stats-strip { display: none !important; }

/* ── NEW HERO BASE ── */
.hero {
  position: relative;
  min-height: calc(100vh - 150px);
  height: auto !important;
  max-height: 1080px;
  overflow: visible;
  background: #040d05;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px; /* Push centering below the sticky nav (~70–80px tall) */
}

/* Photo layer / Cycling slider (Full-color cityscape) */
.hero-bg-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.hero-bg, .hero-bg-slide {
  position: absolute;
  inset: -10% 0;
  background-size: cover;
  background-position: center 35%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  will-change: transform, opacity;
}
.hero-bg-slide.active, .hero-bg {
  opacity: 0.75 !important; /* Full-color cityscape — lighter overlay now provides contrast */
  animation: kenBurns 24s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1%, -0.5%); }
}

/* Left-to-right gradient overlay — text zone on left fades to reveal photo on right */
.hero-overlay {
  position: absolute !important;
  inset: 0;
  z-index: 2;
  display: block !important;
  background: linear-gradient(90deg,
    rgba(5, 18, 10, 0.80) 0%,
    rgba(5, 18, 10, 0.66) 35%,
    rgba(5, 18, 10, 0.35) 65%,
    rgba(5, 18, 10, 0.08) 100%
  ) !important;
  width: auto; height: auto; /* clear any old sizing */
}

/* Bottom edge vignette — smooth transition into ticker */
.hero::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 4;
  background: linear-gradient(to top, #040d05 0%, rgba(4,13,5,0.85) 30%, rgba(4,13,5,0.4) 65%, transparent 100%);
  pointer-events: none;
}

/* Film grain noise */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.048'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.6;
  pointer-events: none;
}

/* Atmospheric aurora orbs */
.hero-aurora { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hero-orb    { position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform; }
.hero-orb-1  { width: 750px; height: 750px; background: radial-gradient(circle, rgba(16,185,129,0.25) 0%, transparent 68%); top: -260px; left: -220px; animation: orbDrift1 20s ease-in-out infinite; }
.hero-orb-2  { width: 580px; height: 580px; background: radial-gradient(circle, rgba(255,184,0,0.20) 0%, transparent 68%); top: -150px; right: 4%; animation: orbDrift2 25s ease-in-out infinite; }
.hero-orb-3  { width: 480px; height: 480px; background: radial-gradient(circle, rgba(4,120,87,0.22) 0%, transparent 68%); bottom: -80px; right: 26%; animation: orbDrift3 28s ease-in-out infinite; }
@keyframes orbDrift1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(80px,55px) scale(1.09)} 66%{transform:translate(-35px,110px) scale(0.93)} }
@keyframes orbDrift2 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-55px,85px) scale(1.13)} 72%{transform:translate(42px,-28px) scale(0.95)} }
@keyframes orbDrift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-65px,-42px) scale(1.07)} }

/* Scoped variables and fonts for the hero redesign */
#hero {
  --gold: #FFB800;
  --gold-glow: rgba(255, 184, 0, 0.25);
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* Animation Tuners */
  --anim-duration-fast: 150ms;
  --anim-duration-normal: 350ms;
  --anim-duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Entrance Sequence Delays */
  --delay-headline-1: 0ms;
  --delay-headline-2: 150ms;
  --delay-headline-3: 300ms;
  --delay-rule: 500ms;
  --delay-subtext: 800ms;
  --delay-actions: 950ms;
  --delay-card-featured: 1100ms;
  --delay-card-related: 1180ms;
  --delay-pills-base: 1250ms;
  --delay-pills-step: 80ms;
  --delay-social-base: 1250ms;
  --delay-social-step: 100ms;
}

/* Floating glassmorphic feature card */
/* ── Grid Layout Container ── */
.hero-grid-container {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
  /* Clip only the inner content; clipping moved off .hero so cards don't get cut */
  overflow: hidden;
}

.hero-left-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0; /* Prevent text from overflowing grid cell */
}

.hero-right-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  align-items: stretch;
  min-width: 0; /* Prevent cards from overflowing grid cell */
}

/* Floating glassmorphic feature card */
.hero-feature-card {
  position: relative !important;
  z-index: 6;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 24, 16, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 0 0 1px rgba(255, 184, 0, 0.20),
    0 24px 50px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  transition: transform 200ms ease, box-shadow 200ms ease, outline 200ms ease;
  display: flex !important;
  flex-direction: column;
  text-decoration: none !important;

  /* Entrance Animation: fade + slide from right delayed per spec */
  opacity: 0;
  transform: translateX(40px);
  animation: heroCardEntrance var(--anim-duration-slow) var(--ease-out) var(--delay-card-featured) both;
}
.hero-feature-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(255, 184, 0, 0.35),
    0 36px 72px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.hero-feature-card:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 4px !important;
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(255, 184, 0, 0.35),
    0 36px 72px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.hero-feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.45) 0%, transparent 40%, transparent 60%, rgba(16, 185, 129, 0.35) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.hero-feature-img         { position: relative; height: 190px; overflow: hidden; background: #0a1a0c; }
.hero-feature-img img     { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.88) saturate(0.95); transition: transform var(--anim-duration-fast) ease; }
.hero-feature-card:hover .hero-feature-img img,
.hero-feature-card:focus-visible .hero-feature-img img { transform: scale(1.05); }
.hero-feature-img-fade    { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,13,5,0.75) 0%, rgba(4,13,5,0.30) 40%, transparent 65%); }
.hero-feature-cat         { position: absolute; top: 12px; left: 12px; background: var(--gold); color: #041c0e; font-size: 9px; font-weight: 800; padding: 4px 10px; border-radius: 100px; letter-spacing: 1.4px; text-transform: uppercase; font-family: var(--font-sans); box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.hero-feature-body        { padding: 16px 20px 20px; }
.hero-feature-meta        { display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,0.50); font-family: var(--font-body); margin-bottom: 8px; }
.hero-feature-meta i      { font-size: 12px; }
.hero-feature-title       { font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,0.92); line-height: 1.48; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s ease; }
.hero-feature-card:hover .hero-feature-title { color: var(--gold) !important; }
.hero-feature-link        { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--gold) !important; text-decoration: none !important; font-family: var(--font-sans); }
.hero-feature-link i      { font-size: 13px; transition: transform var(--anim-duration-fast) ease; }
.hero-feature-card:hover .hero-feature-link i,
.hero-feature-card:focus-visible .hero-feature-link i { transform: translateX(4px); }
.hero-feature-divider     { height: 1px; background: rgba(255,255,255,0.07); margin: 10px 0 12px; }

/* Secondary Glassmorphic Related Card */
.hero-related-card {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  display: flex !important;
  gap: 12px;
  align-items: center;
  text-decoration: none !important;
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, outline 200ms ease;

  /* Entrance Animation: fade + slide from right delayed per spec */
  opacity: 0;
  transform: translateX(40px);
  animation: heroCardEntrance var(--anim-duration-slow) var(--ease-out) var(--delay-card-related) both;
}
.hero-related-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}
.hero-related-card:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 4px !important;
  transform: translateY(-4px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}
.hero-related-img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #0a1a0c;
}
.hero-related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  transition: transform 200ms ease;
}
.hero-related-card:hover .hero-related-img img {
  transform: scale(1.05);
}
.hero-related-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero-related-meta {
  font-size: 10px;
  color: rgba(255,255,255,0.36);
  font-family: var(--font-body);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hero-related-tag {
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.hero-related-title {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}
.hero-related-card:hover .hero-related-title {
  color: #fff;
}

/* Main inner container */
.hero-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1340px;
  padding: 2rem 2.5rem; /* Simple symmetric padding — .hero handles nav offset */
  margin: 0 auto;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  /* min-height removed — was forcing hero-inner to fill 100vh which defeated
     the parent’s justify-content:center and pushed content to the lower half */
}

/* Eyebrow */
.hero-eyebrow      { display: inline-flex !important; align-items: center; gap: 10px; margin-bottom: 26px; opacity: 0; animation: heroFadeUp var(--anim-duration-slow) var(--ease-out) 100ms both; }
.hero-live-dot     { width: 7px; height: 7px; border-radius: 50%; background: #FFB800; display: inline-block; position: relative; flex-shrink: 0; }
.hero-live-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: #FFB800; opacity: 0.45; animation: livePulse 2.2s ease-out infinite; }
@keyframes livePulse { 0%{transform:scale(1);opacity:.45} 100%{transform:scale(3.2);opacity:0} }
.hero-tag-pill     { font-family: var(--font-sans); font-size: 10px; font-weight: 800; color: #FFB800; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 18px rgba(255, 184, 0, 0.55); }
.hero-eyebrow-sep  { color: rgba(255,255,255,0.28); }
.hero-date-label   { font-size: 11px; color: rgba(255,255,255,0.75); font-family: var(--font-body); }

/* Headline (Redesigned with Fraunces fluid typography pairing and line-by-line staggered page load animations) */
.hero-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem) !important;
  font-weight: 600 !important; /* Semi-bold */
  color: #fff !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0 !important;
  max-width: 720px;
  overflow: visible;
  display: block !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.08);
}
.hero-title-line {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}
.hero-title-line.line-1 {
  animation: heroEntrance var(--anim-duration-slow) var(--ease-out) var(--delay-headline-1) both;
}
.hero-title-line.line-2 {
  animation: heroEntrance var(--anim-duration-slow) var(--ease-out) var(--delay-headline-2) both;
}
.hero-title-line.line-3 {
  animation: heroEntrance var(--anim-duration-slow) var(--ease-out) var(--delay-headline-3) both;
}

/* Gold animated rule */
.hero-rule { width: 0; height: 3px; background: linear-gradient(90deg, var(--gold), rgba(168,120,14,0.25)); border-radius: 2px; margin: 24px 0 22px; animation: ruleExpand 900ms var(--ease-out) var(--delay-rule) both; display: block !important; }
@keyframes ruleExpand { from{width:0} to{width:80px} }

/* Excerpt (Contrast upgraded for WCAG AA compliance, delayed 150ms after headline) */
.hero-excerpt {
  font-family: var(--font-body) !important;
  font-size: clamp(15px, 1.75vw, 18px) !important;
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.72 !important;
  max-width: 500px;
  margin-bottom: 34px !important;
  opacity: 0;
  animation: heroFadeUp var(--anim-duration-slow) var(--ease-out) var(--delay-subtext) both;
  display: block !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* CTAs & Focus Outlines */
.hero-actions    { display: flex !important; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; opacity: 0; animation: heroFadeUp var(--anim-duration-slow) var(--ease-out) var(--delay-actions) both; }
.hero-cta-primary { display: inline-flex !important; align-items: center; gap: 12px; background: linear-gradient(135deg, #FFB800 0%, #F59E0B 100%) !important; color: #041c0e !important; text-decoration: none !important; padding: 12px 26px 12px 12px; border-radius: 100px; font-family: var(--font-sans); font-size: 14px; font-weight: 800; transition: transform var(--anim-duration-fast) ease, background var(--anim-duration-fast) ease, box-shadow var(--anim-duration-fast) ease, outline var(--anim-duration-fast) ease; box-shadow: 0 10px 30px rgba(255, 184, 0, 0.32); }
.hero-cta-primary:hover { background: linear-gradient(135deg, #FFC72C 0%, #FFB800 100%) !important; color: #000000 !important; transform: scale(1.03); box-shadow: 0 16px 42px rgba(255, 184, 0, 0.48); }
.hero-cta-primary:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 4px !important; transform: scale(1.03); }
.hero-cta-icon   { width: 34px; height: 34px; border-radius: 50%; background: #041c0e; display: flex; align-items: center; justify-content: center; color: #FFB800; font-size: 16px; flex-shrink: 0; transition: background 0.3s ease, color 0.3s ease; }
.hero-cta-primary:hover .hero-cta-icon { background: #000000; color: #ffffff; }
.hero-cta-ghost  { display: inline-flex !important; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.20) !important; border-radius: 100px !important; color: rgba(255,255,255,0.92) !important; text-decoration: none !important; font-family: var(--font-sans); font-size: 14px; font-weight: 600; padding: 11px 22px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease, outline 0.15s ease; }
.hero-cta-ghost:hover { background: rgba(255, 255, 255, 0.16) !important; border-color: rgba(255, 255, 255, 0.38) !important; color: #fff !important; transform: translateY(-2px); gap: 11px; }
.hero-cta-ghost:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 4px !important; color: #fff !important; }

/* Service pills (WCAG AA contrast adjustments and category color hover states) */
.hero-services-bar   { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.07); opacity: 0; animation: heroFadeUp 0.7s var(--ease-out) var(--delay-pills-base) forwards; }
.hero-services-label { font-size: 10px; color: rgba(255,255,255,0.55); font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; margin-right: 2px; flex-shrink: 0; opacity: 0; animation: heroFadeUp 0.4s var(--ease-out) var(--delay-pills-base) forwards; }
.hero-service-pill   { display: inline-flex !important; align-items: center; gap: 6px; background: rgba(255,255,255,0.065); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.90) !important; text-decoration: none !important; padding: 7px 15px; border-radius: 100px; font-size: 12px; font-weight: 600; font-family: var(--font-sans); transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, outline 0.15s ease; backdrop-filter: blur(10px); opacity: 0; animation: heroFadeUp 0.4s var(--ease-out) forwards; }
.hero-service-pill:nth-child(3) { animation-delay: calc(var(--delay-pills-base) + var(--delay-pills-step) * 1); }
.hero-service-pill:nth-child(4) { animation-delay: calc(var(--delay-pills-base) + var(--delay-pills-step) * 2); }
.hero-service-pill:nth-child(5) { animation-delay: calc(var(--delay-pills-base) + var(--delay-pills-step) * 3); }
.hero-service-pill:nth-child(6) { animation-delay: calc(var(--delay-pills-base) + var(--delay-pills-step) * 4); }
.hero-service-pill i { font-size: 14px; color: var(--gold); }
.hero-service-pill:hover { background: rgba(255,255,255,0.14); color: #fff !important; transform: translateY(-2px) scale(1.02); }
.hero-service-pill:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 2px !important; background: rgba(255,255,255,0.14); color: #fff !important; transform: translateY(-2px) scale(1.02); }

#pill-rates:hover   { border-color: #FFB800 !important; box-shadow: 0 0 14px rgba(255, 184, 0, 0.35); }
#pill-water:hover   { border-color: #38BDF8 !important; box-shadow: 0 0 14px rgba(56, 189, 248, 0.35); }
#pill-permits:hover { border-color: #F59E0B !important; box-shadow: 0 0 14px rgba(245, 158, 11, 0.35); }
#pill-health:hover  { border-color: #34D399 !important; box-shadow: 0 0 14px rgba(52, 211, 153, 0.35); }

/* Scroll indicator */
.hero-scroll       { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); z-index: 5; display: flex !important; flex-direction: column; align-items: center; gap: 10px; opacity: 0; animation: heroFadeUp 0.5s ease 2.0s forwards; }
.hero-scroll span  { font-size: 8.5px; font-weight: 700; letter-spacing: 3.5px; color: rgba(255,255,255,0.22); font-family: var(--font-sans); text-transform: uppercase; }
.hero-scroll-track { width: 1.5px; height: 54px; background: rgba(255,255,255,0.10); border-radius: 1px; position: relative; overflow: hidden; }
.hero-scroll-dot   { position: absolute; top: -20px; left: 0; width: 1.5px; height: 20px; background: linear-gradient(to bottom, transparent, var(--gold)); border-radius: 1px; animation: scrollTrack 2s ease-in-out infinite; }
@keyframes scrollTrack { 0%{top:-20px;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:54px;opacity:0} }

/* Shared entrance animations */
@keyframes heroFadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes heroEntrance { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes heroCardEntrance {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Social Dock entrance stagger animation */
.social-dock .dock-item {
  opacity: 0;
  transform: translateX(30px);
  will-change: transform, opacity;
  animation: socialEntrance var(--anim-duration-slow) var(--ease-out) both;
}
.social-dock .dock-item:nth-child(1) { animation-delay: var(--delay-social-base); }
.social-dock .dock-item:nth-child(2) { animation-delay: calc(var(--delay-social-base) + var(--delay-social-step)); }
.social-dock .dock-item:nth-child(3) { animation-delay: calc(var(--delay-social-base) + var(--delay-social-step) * 2); }
.social-dock .dock-item:nth-child(4) { animation-delay: calc(var(--delay-social-base) + var(--delay-social-step) * 3); }
.social-dock .dock-item:nth-child(5) { animation-delay: calc(var(--delay-social-base) + var(--delay-social-step) * 4); }

@keyframes socialEntrance {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Social Dock — dark glass override for hero context */
#hero .social-dock {
  background: rgba(4,13,5,0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  border-right: none;
  box-shadow: -4px 0 24px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.04);
}
#hero .social-dock:hover {
  background: rgba(4,13,5,0.70);
  box-shadow: -6px 0 32px rgba(0,0,0,0.4);
}
#hero .dock-item { color: rgba(255,255,255,0.65); }
#hero .dock-item:hover { color: #fff; }

/* Responsive Grid Breakpoints & Stacking */
@media (max-width: 1023px) {
  .hero {
    height: auto;
    min-height: auto;
    max-height: none;
    padding-top: 80px;
    padding-bottom: 40px;
    overflow: visible;
  }
  .hero-inner {
    padding: 1.5rem 1.5rem;
  }
  .hero-grid-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .hero-right-col {
    display: flex !important;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    width: 100%;
  }
  .hero-feature-card,
  .hero-related-card {
    display: flex !important;
    width: 100%;
    max-width: 480px; /* Wider card on mobile/tablet stacking */
  }
}
@media (max-width: 767px) {
  .hero {
    padding-top: 120px;
    padding-bottom: 60px;
  }
  .hero-actions      { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-services-bar { gap: 8px; }
  .hero-feature-card,
  .hero-related-card {
    max-width: 100%; /* Fully responsive width on phone view */
  }
}
@media (max-width: 575.98px) {
  .hero-inner {
    padding: 1.25rem 1rem !important;
  }
  .hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta-primary,
  .hero-cta-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* Motion control override for accessibility (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .hero-title-line,
  .hero-rule,
  .hero-excerpt,
  .hero-actions,
  .hero-services-bar,
  .hero-services-label,
  .hero-service-pill,
  .hero-feature-card,
  .hero-related-card,
  .social-dock .dock-item {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .hero-bg-slide {
    transition: none !important;
    animation: none !important;
  }
  .hero-bg-slide.active {
    animation: none !important;
  }
}

/* ── Brand Logo Images (Header & Footer) ── */
.nav-logo-img {
  height: 48px;
  width: auto;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-spring);
}
.nav-logo-img:hover {
  transform: scale(1.06) rotate(-3deg);
}

.footer-logo-img {
  height: 44px;
  width: auto;
  margin-bottom: 8px;
}

/* ── Sticky Header Solid Background Overrides ── */
#main-nav {
  background: #ffffff !important;
}
.nav-revamp {
  background: #ffffff !important;
}
.nav-revamp.nav-scrolled {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 24px -4px rgba(10, 36, 14, 0.12), 0 1px 0 rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================================
   13. BELOW THE FOLD LIGHT SECTION
   ========================================================================== */

/* Quick Actions Section */
.quick-actions-section {
  background: #ffffff;
  padding: 5rem 2rem;
  border-bottom: 1px solid rgba(10, 36, 14, 0.05);
}
.actions-container {
  max-width: 1300px;
  margin: 0 auto;
}
.actions-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.action-card {
  background: #ffffff;
  border: 1.5px solid rgba(10, 36, 14, 0.06);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  text-decoration: none !important;
  color: var(--green-dark) !important;
  box-shadow: 0 4px 20px rgba(10, 36, 14, 0.015);
  transition: all 0.3s var(--ease-spring);
}
.action-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 12px 32px rgba(10, 36, 14, 0.06);
}
.action-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(46, 139, 62, 0.06);
  color: var(--green-vivid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.35s ease;
}
.action-card:hover .action-icon {
  background: var(--green-vivid);
  color: #ffffff;
  transform: scale(1.05);
}
.action-label {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
  line-height: 1.35;
}

/* Services Section */
.services-section {
  background: #fbfbf9; /* warm premium cream light background */
  padding: 6rem 2rem;
  border-bottom: 1px solid rgba(10, 36, 14, 0.05);
}
.services-container {
  max-width: 1300px;
  margin: 0 auto;
}
.services-header {
  margin-bottom: 3.5rem;
}
.services-title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  color: var(--green-dark);
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.services-subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0;
  line-height: 1.5;
}

/* Bento Grid */
.services-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-card {
  background: #ffffff;
  border: 1.5px solid rgba(10, 36, 14, 0.06);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
  box-shadow: 0 4px 24px rgba(10, 36, 14, 0.015);
  text-decoration: none !important;
  color: var(--green-dark) !important;
  transition: all 0.35s var(--ease-spring);
  position: relative;
  overflow: hidden;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(10, 36, 14, 0.06);
  border-color: rgba(10, 36, 14, 0.1);
}
.service-card-double {
  grid-column: span 2;
}
.service-card-triple {
  grid-column: span 3;
  min-height: 190px;
}
.service-card-featured {
  border: 1.5px solid rgba(194, 145, 26, 0.35) !important;
  box-shadow: 0 8px 32px rgba(194, 145, 26, 0.03);
}
.service-card-featured:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 24px 56px rgba(194, 145, 26, 0.1) !important;
}

.service-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.service-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(46, 139, 62, 0.06);
  color: var(--green-vivid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: all 0.3s ease;
}
.service-card:hover .service-card-icon {
  background: var(--green-vivid);
  color: #ffffff;
}
.service-card-featured:hover .service-card-icon {
  background: var(--gold);
  color: var(--charcoal);
}

.bento-arrow {
  font-size: 16px;
  color: var(--text-muted);
  opacity: 0.5;
  transition: all 0.3s ease;
}
.service-card:hover .bento-arrow {
  opacity: 1;
  color: var(--green-vivid);
  transform: translate(3px, -3px);
}
.service-card-featured:hover .bento-arrow {
  color: var(--gold-dark);
}

.service-card-title {
  font-family: var(--font-sans);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.service-card-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
  max-width: 520px;
}
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-vivid) !important;
  font-family: var(--font-sans);
  text-decoration: none !important;
  margin-top: auto;
}
.service-card-featured .service-card-link {
  color: var(--gold-dark) !important;
}
.service-card-arrow {
  transition: transform 0.3s var(--ease-spring);
}
.service-card:hover .service-card-arrow {
  transform: translateX(5px);
}

/* Responsive Grid and Stacking */
@media (max-width: 1024px) {
  .actions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .services-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-card-double {
    grid-column: span 2;
  }
  .service-card-triple {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .quick-actions-section {
    padding: 3.5rem 1rem;
  }
  .actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .services-section {
    padding: 4rem 1rem;
  }
  .services-bento-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .service-card-double, .service-card-triple {
    grid-column: span 1;
  }
  .services-title {
    font-size: 26px;
  }
}

@media (max-width: 480px) {
  .actions-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   QUICK LINKS & GOVERNANCE GRID SECTIONS
   Replaces old Quick Actions strip — detailed card grids below hero
   ========================================================================== */

/* ── Section Wrapper ── */
.grid-section {
  position: relative;
  padding: 5.5rem 2rem;
}
.grid-section-wrap {
  max-width: 1300px;
  margin: 0 auto;
}

/* ── Section Header ── */
.grid-section-header {
  margin-bottom: 3rem;
}
.grid-section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--green-dark);
  letter-spacing: -0.5px;
  margin-bottom: 10px;
  line-height: 1.1;
  position: relative;
  padding-bottom: 16px;
}
.grid-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  transition: width 0.5s var(--ease-out-quint);
}
.grid-section-header:hover .grid-section-title::after {
  width: 88px;
}
.grid-section-subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0;
  line-height: 1.6;
}

/* ── Quick Links Section — Cream Background ── */
.quicklinks-section {
  background: var(--cream);
  border-bottom: 1px solid rgba(10, 36, 14, 0.05);
}

/* ── Grid Layout ── */
/* Bento grid: 3 standard columns + 1 wider featured column (1.5×)
   4 rows × 4 columns — featured cards at positions 4 and 8 */
.link-grid--bento {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  gap: 28px;
}

/* ── Card Base ── */
.link-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid rgba(10, 36, 14, 0.10);
  border-radius: 18px;
  padding: 28px 24px 24px;
  text-decoration: none !important;
  color: var(--green-dark) !important;
  box-shadow: 0 4px 18px rgba(10, 36, 14, 0.03);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring), border-color 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}
.link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(10, 36, 14, 0.09);
  border-color: var(--gold);
}

/* ── Featured Card (Uniform layout alignment) ── */
.link-card--featured {
  border: 1px solid rgba(194, 145, 26, 0.30);
  background: #ffffff;
}
.link-card--featured:hover {
  border-color: var(--gold);
  box-shadow: 0 16px 40px rgba(194, 145, 26, 0.12);
}

/* ── Icon ── */
.link-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(13, 59, 30, 0.08);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: all 0.3s var(--ease-spring);
  flex-shrink: 0;
}
.link-card-icon i {
  font-size: 24px !important;
  line-height: 1 !important;
  display: inline-block !important;
  color: inherit !important;
}
.link-card:hover .link-card-icon {
  background: var(--green-dark);
  color: var(--gold-light);
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(10, 36, 14, 0.25);
}
.link-card-icon--gold {
  background: rgba(194, 145, 26, 0.15);
  color: var(--gold-dark);
}
.link-card--featured:hover .link-card-icon--gold {
  background: var(--gold);
  color: var(--green-deep);
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(194, 145, 26, 0.35);
}

/* ── Card Title ── */
.link-card-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 6px;
  line-height: 1.3;
  letter-spacing: -0.15px;
}
.link-card--featured .link-card-title {
  font-size: 16px;
}

/* ── Gold Underline Accent ── */
.link-card-rule {
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(194, 145, 26, 0.3));
  border-radius: 2px;
  margin-bottom: 12px;
  transition: width 0.4s var(--ease-out-quint), background 0.4s ease;
}
.link-card:hover .link-card-rule {
  width: 52px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
}

/* ── Card Description ── */
.link-card-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 280px;
}
.link-card--featured .link-card-desc {
  max-width: 420px;
  font-size: 14px;
}

/* ── Arrow Affordance (bottom of card) ── */
.link-card-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-dark);
  letter-spacing: 0.2px;
  transition: color 0.3s ease, gap 0.3s var(--ease-spring);
}
.link-card:hover .link-card-foot {
  color: var(--gold);
  gap: 10px;
}
.link-card-foot i {
  font-size: 14px;
  transition: transform 0.3s var(--ease-spring);
}
.link-card:hover .link-card-foot i {
  transform: translateX(4px);
}

/* ── Responsive: Tablet (2-col) ── */
@media (max-width: 1024px) {
  .link-grid--bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Responsive: Mobile (1-col) ── */
@media (max-width: 640px) {
  .grid-section {
    padding: 3.5rem 1.25rem;
  }
  .grid-section-header {
    margin-bottom: 2rem;
  }
  .grid-section-title::after {
    width: 44px;
  }
  .grid-section-subtitle {
    font-size: 14px;
  }
  .link-grid--bento {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .link-card {
    padding: 24px 22px;
  }
  .link-card--featured {
    padding: 26px 24px;
  }
  .link-card-title {
    font-size: 15px;
  }
  .link-card--featured .link-card-title {
    font-size: 16px;
  }
  .link-card-desc {
    font-size: 13px;
  }
}

/* ── Staggered Reveal Delays (cards animate in sequence, row by row) ── */
.link-grid--bento .link-card:nth-child(1)  { transition-delay: 0s; }
.link-grid--bento .link-card:nth-child(2)  { transition-delay: 0.06s; }
.link-grid--bento .link-card:nth-child(3)  { transition-delay: 0.12s; }
.link-grid--bento .link-card:nth-child(4)  { transition-delay: 0.18s; }
.link-grid--bento .link-card:nth-child(5)  { transition-delay: 0.24s; }
.link-grid--bento .link-card:nth-child(6)  { transition-delay: 0.30s; }
.link-grid--bento .link-card:nth-child(7)  { transition-delay: 0.36s; }
.link-grid--bento .link-card:nth-child(8)  { transition-delay: 0.42s; }
.link-grid--bento .link-card:nth-child(9)  { transition-delay: 0.48s; }
.link-grid--bento .link-card:nth-child(10) { transition-delay: 0.54s; }
.link-grid--bento .link-card:nth-child(11) { transition-delay: 0.60s; }
.link-grid--bento .link-card:nth-child(12) { transition-delay: 0.66s; }
.link-grid--bento .link-card:nth-child(13) { transition-delay: 0.72s; }
.link-grid--bento .link-card:nth-child(14) { transition-delay: 0.78s; }
.link-grid--bento .link-card:nth-child(15) { transition-delay: 0.84s; }
.link-grid--bento .link-card:nth-child(16) { transition-delay: 0.90s; }

/* Accessibility support for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-slide.active, .hero-bg {
    animation: none !important;
  }
  .hero-title-line.line-1,
  .hero-title-line.line-2,
  .hero-title-line.line-3,
  .hero-excerpt,
  .hero-actions,
  .hero-rule,
  .hero-services-bar,
  .hero-services-label,
  .hero-service-pill,
  .hero-feature-card,
  .hero-related-card,
  .hero-scroll,
  .hero-scroll-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-rule {
    width: 80px !important;
  }
  .hero-feature-card:hover,
  .hero-related-card:hover,
  .hero-feature-card:focus-visible,
  .hero-related-card:focus-visible,
  .hero-feature-card:hover .hero-feature-img img,
  .hero-related-card:hover .hero-related-img img,
  .hero-feature-card:hover .hero-feature-link i {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
  }
}