/* ==============================
   PremierWest Global Styles
   ============================== */

/* Design tokens */
:root{
  --ink: #16191c;
  --muted: #69727b;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --accent: #10b981;   /* green */
  --accent-2: #f59e0b; /* orange */
  --border: rgba(17,24,39,0.12);
  --shadow: 0 6px 18px rgba(17,24,39,0.08);
  --radius: 14px;

  /* reveal defaults */
  --reveal-distance: 16px;
  --reveal-dur: .55s;
  --reveal-ease: cubic-bezier(.2,.65,.2,1);
  --reveal-blur: 6px;
}

/* Base */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  color:var(--ink);
  background:var(--surface);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Helpers */
.container{ max-width:1160px; margin:0 auto; padding:0 20px }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Typography */
.h1{ font-size:42px; line-height:1.1; letter-spacing:-0.01em; margin:0 0 14px }
.h2{ font-size:32px; line-height:1.1; margin:0 0 10px }
.h3{ font-size:20px; margin:0 0 6px }
.p { margin:0 0 14px; color:var(--muted) }
.lead{ font-size:18px; color:var(--ink) }
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:rgba(16,185,129,.12); color:var(--accent); font-weight:600; font-size:12px;
}

/* Buttons */
.btn{
  display:inline-block; background:var(--accent); color:#000;
  padding:12px 18px; border-radius:10px; font-weight:600; text-decoration:none;
  transition:transform .15s ease, opacity .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-1px); opacity:.92 }
.btn.outline{ background:transparent; color:var(--ink); border:1px solid var(--ink) }
.btn.glow{ box-shadow:0 8px 22px rgba(16,185,129,.28), 0 2px 0 rgba(0,0,0,.02) }
.btn.glow:hover{ box-shadow:0 10px 26px rgba(16,185,129,.36), 0 2px 0 rgba(0,0,0,.02) }
.btn.glow-soft{ box-shadow:0 6px 18px rgba(16,185,129,.16) }

/* Sections (account for fixed header) */
.section{
  position:relative; z-index:1;
  padding:120px 0 80px;
  background:transparent;
}
.section.tight{ padding:48px 0 }
.section.alt{ background:var(--surface-2) }

/* Cards & grids */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.grid{ display:grid; gap:20px }
.grid.two{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid.four{ grid-template-columns:repeat(4,minmax(0,1fr)) }


/* ==============================
   Hero / Glass panels
   ============================== */

.hero{ position:relative; min-height:72vh; display:grid; align-items:center }
.hero-wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:32px }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none }
.hero-bg canvas{ width:100%; height:100%; display:block }
.hero-content{ position:relative; z-index:1 }

/* small text contrast over animated bg */
.hero .badge,
.hero .kpi .small,
.hero .lead span,
.hero .meta,
.hero .subtext{ color:#333 }

/* Frosted glass */
.glass{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.25);
}
.glass-card{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  backdrop-filter:blur(10px) saturate(130%);
  border-radius:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.22);
}

.hero-panel{ padding:22px 24px; max-width:720px }
.hero-title{ margin:8px 0 8px; line-height:1.05 }
.hero-sub{ margin:6px 0 14px }
.hero-cta{ display:flex; gap:12px; margin-top:12px }

/* KPI */
.hero-kpi{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px }
.kpi{ border:1px solid var(--border); border-radius:12px; padding:14px; text-align:left }
.kpi strong{ display:block; font-weight:800; font-size:clamp(18px, 2.4vw, 22px); line-height:1 }
.kpi .small{ display:block; opacity:.85; margin-top:6px }

/* Media card */
.hero-media{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/10; background:var(--surface-2) }
.hero-media img{ width:100%; height:100%; object-fit:cover; display:block }

/* Responsive */
@media (prefers-reduced-motion:reduce){
  .hero-bg{ display:none }
  .glass,.glass-card{ -webkit-backdrop-filter:none; backdrop-filter:none }
}
@media (max-width:1024px){
  .hero-wrap{ grid-template-columns:1fr; gap:22px }
  .hero-panel{ max-width:100% }
  .hero-media{ order:-1 }
}
@media (max-width:640px){
  .hero-panel{ padding:16px; border-radius:14px }
  .glass{ background:rgba(255,255,255,.44) }
  .hero-cta{ flex-wrap:wrap }
  .hero-kpi{ grid-template-columns:1fr }
}

/* ==============================
   Services / Legacy (from index.html)
   ============================== */

.services-list{ display:grid; grid-template-columns:1fr; gap:14px }
.service-item{ display:flex; gap:12px; align-items:flex-start }
.service-ico{
  width:34px; height:34px; border-radius:8px;
  background:rgba(16,185,129,.12);
  display:grid; place-items:center; font-weight:700; color:var(--accent);
}
.legacy{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px }
.legacy figure{ margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow) }

/* ==============================
   Clients grid (cards)
   ============================== */

.clients{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:32px; align-items:center; justify-items:center;
}
.client-card{
  height:180px; width:220px; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding:12px; transition:transform .2s ease, box-shadow .2s ease;
}
.client-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(17,24,39,.14) }
.client-card img{
  width:85%; height:85%; object-fit:contain; display:block; margin:auto;
  filter:grayscale(1); opacity:.95; transition:opacity .2s ease, filter .3s ease, transform .15s ease;
}
.client-card img:hover{ filter:none; opacity:1; transform:scale(1.03) }
@media (min-width:1200px){ .client-card{ height:200px; width:240px } }
@media (max-width:720px){ .client-card{ height:150px; width:180px } }

/* ==============================
   Slider (portfolio)
   ============================== */

.slider{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); background:var(--surface) }
.slides{ display:flex; transition:transform .5s ease }
.slide{ min-width:100%; height:420px }
.slide img{ width:100%; height:100%; object-fit:cover; display:block }
.slider-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.92); border:1px solid var(--border); height:42px; width:42px;
  border-radius:50%; display:grid; place-items:center; font-weight:800; cursor:pointer;
}
.slider-btn:focus{ outline:2px solid var(--accent) }
.prev{ left:12px } .next{ right:12px }
.dots{ display:flex; gap:8px; justify-content:center; margin-top:14px }
.dot{ width:8px; height:8px; border-radius:50%; background:rgba(17,24,39,.2) }
.dot.active{ background:var(--accent) }

/* ==============================
   Forms / Footer
   ============================== */

.form{ display:grid; gap:14px }
.input,.textarea{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2) }
.textarea{ min-height:120px; resize:vertical }
.footer{ padding:32px 0; border-top:1px solid var(--border); background:var(--surface) }
.small{ font-size:13px; color:var(--muted) }
.map-link{ color:var(--ink); text-decoration:underline }

/* ==============================
   Reveal-on-scroll (dissolve + lift)
   ============================== */

@media (prefers-reduced-motion:reduce){
  :root{ --reveal-distance:0; --reveal-dur:0s; --reveal-blur:0px }
}
.reveal{
  opacity:0; transform:translateY(var(--reveal-distance)); filter:blur(var(--reveal-blur));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay,0ms),
    transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay,0ms),
    filter var(--reveal-dur) var(--reveal-ease) var(--reveal-delay,0ms);
  will-change:opacity, transform, filter;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); filter:blur(0) }
#clients .h2.reveal, #clients .p.reveal{ --reveal-distance:12px }
#clients .client-card.reveal{
  --reveal-distance:14px;
  transition:
    opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay,0ms),
    transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay,0ms),
    filter var(--reveal-dur) var(--reveal-ease) var(--reveal-delay,0ms),
    box-shadow .25s ease;
}
#clients .client-card:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.08) }

/* ==============================
   Blog page light styles
   ============================== */

.blog-hero .h1{ margin-bottom:8px }
.blog-hero .lead{ max-width:72ch }
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:28px }
.post-card{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:14px; background:rgba(255,255,255,.26); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px) saturate(130%); -webkit-backdrop-filter:blur(10px) saturate(130%);
  box-shadow:0 8px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.30);
}
.post-thumb{ aspect-ratio:16/9; width:100%; object-fit:cover; background:var(--surface-2) }
.post-body{ padding:16px }
.post-meta{ font-size:14px; color:#666; margin-bottom:6px; display:flex; gap:8px; flex-wrap:wrap }
.post-title{ font-size:18px; font-weight:800; line-height:1.25; margin:0 0 8px }
.post-desc{ font-size:15px; color:#444; margin:0 }
.tag{ font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); color:#2a2a2a; background:rgba(255,255,255,.6) }
.search-bar input{
  width:100%; padding:12px 16px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.7);
}

/* Valued Clients: full-width conveyor marquee */

#clients{padding:80px 0}
#clients .container{max-width:1400px;margin:0 auto;padding:0 24px}
#clients .h2,#clients .p{text-align:center;margin-left:auto;margin-right:auto}
#clients .p{max-width:980px}

.marquee-rows{display:grid;gap:14px;margin-top:24px}

.marquee-row{position:relative;overflow:hidden;border-radius:16px;background:var(--surface);border:1px solid var(--border);padding:16px 0;mask-image:linear-gradient(to right,transparent 0,#000 6.5%,#000 93.5%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6.5%,#000 93.5%,transparent 100%)}

.marquee-track{display:flex;align-items:center;gap:56px;padding:0 28px;flex-wrap:nowrap;animation:marquee var(--speed,40s) linear infinite;will-change:transform}
.marquee-row.reverse .marquee-track{animation-direction:reverse}
.marquee-row:hover .marquee-track{animation-play-state:paused}

.marquee-row img{flex:0 0 auto;height:120px;width:auto;object-fit:contain;display:block;transform:translateZ(0);transition:transform .2s ease;image-rendering:auto}
.marquee-row img:hover{transform:scale(1.05)}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:1200px){
  .marquee-row img{height:96px}
  .marquee-track{gap:48px}
}
@media (max-width:900px){
  .marquee-row img{height:72px}
  .marquee-track{gap:36px}
}
@media (max-width:640px){
  .marquee-row img{height:58px}
  .marquee-track{gap:28px}
}

@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none !important;transform:none !important}
}


.services-head{ text-align:center; margin:0 0 24px }
.services-head .h2{ margin-bottom:8px }

.services-grid--wide{
  display:grid;
  grid-template-columns:repeat(3,minmax(360px,1fr));
  gap:26px;
  max-width:1280px;
  margin-inline:auto;
}
@media (max-width:1180px){ .services-grid--wide{ grid-template-columns:repeat(2,minmax(320px,1fr)) } }
@media (max-width:760px){ .services-grid--wide{ grid-template-columns:1fr } }

.service-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  padding:24px 24px 22px;
  min-height:380px;
  transition:transform .22s ease, box-shadow .28s ease;
  box-shadow:0 14px 34px rgba(0,0,0,.16);
  background:none;
  color:#071511;
  border:1px solid rgba(0,0,0,.07);
}
.service-card::before{
  content:"";
  position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(135deg,#e7f6ef 0%,#d8f0e6 45%,#c9e8dc 100%);
  filter:saturate(120%) brightness(1.04);
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 48px rgba(0,0,0,.2);
}

.svc-topline{
  position:absolute; left:0; right:0; top:0; height:4px;
  border-top-left-radius:18px; border-top-right-radius:18px;
  background:linear-gradient(90deg,rgba(16,185,129,.95),rgba(245,158,11,.95),rgba(16,185,129,.95));
  background-size:200% 100%;
  animation:svc-scanline 7s linear infinite;
}
@keyframes svc-scanline{ 0%{background-position:0 0} 100%{background-position:200% 0} }

.svc-accent{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4;
  background:
    radial-gradient(40% 60% at 85% 10%,rgba(255,210,130,.34),transparent 60%),
    radial-gradient(35% 55% at 15% 85%,rgba(146,225,200,.3),transparent 65%);
  filter:saturate(140%);
}

.svc-scan{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; mix-blend:overlay;
}
.svc-scan::before{
  content:"";
  position:absolute; top:0; bottom:0; width:28%;
  left:-30%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:svc-wipe 9s linear infinite;
  will-change:left;
}
@keyframes svc-wipe{ 0%{ left:-30% } 100%{ left:130% } }

.svc-icon{
  width:50px; height:50px; border-radius:12px; margin-bottom:14px;
  display:grid; place-items:center; color:#0f5f54;
  background:linear-gradient(180deg,rgba(16,185,129,.14),rgba(255,255,255,.78));
  border:1px solid rgba(16,185,129,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}

.svc-title{ font-size:21px; margin:2px 0 10px; letter-spacing:-.01em; color:#05251b; font-weight:800 }
.svc-desc{ margin:0 0 14px; line-height:1.6; color:#0b2e25; font-weight:600 }

.svc-bullets{ margin:10px 0 0 0; padding:0; list-style:none; display:grid; gap:8px }
.svc-bullets li{ position:relative; padding-left:18px; line-height:1.55; color:#083327 }
.svc-bullets li::before{ content:"•"; position:absolute; left:0; top:0; line-height:1; color:#10b981; font-weight:900 }

.is-landscape::before{ background:linear-gradient(135deg,#e5f4ea 0%,#d0eedf 50%,#c0e7d1 100%); filter:saturate(130%) brightness(1.05) }
.is-irrigation::before{ background:linear-gradient(135deg,#e3f8f3 0%,#ccf2ea 50%,#bff0e7 100%); filter:saturate(130%) brightness(1.05) }
.is-maintenance::before{ background:linear-gradient(135deg,#e8f6f7 0%,#d5f0f3 50%,#c7ebef 100%); filter:saturate(130%) brightness(1.05) }

.is-landscape .svc-topline{ background:linear-gradient(90deg,rgba(209,165,69,.98),rgba(16,185,129,.98),rgba(209,165,69,.98)); background-size:200% 100% }
.is-irrigation .svc-topline{ background:linear-gradient(90deg,rgba(14,143,120,.98),rgba(71,230,209,.98),rgba(14,143,120,.98)); background-size:200% 100% }
.is-maintenance .svc-topline{ background:linear-gradient(90deg,rgba(255,178,72,.98),rgba(22,163,171,.98),rgba(255,178,72,.98)); background-size:200% 100% }

@media (prefers-reduced-motion:reduce){
  .svc-topline{ animation:none }
  .svc-scan::before{ animation:none }
}

.services-bg,
.canvas[data-canvas="services"] {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(0,255,180,0.05) 0%, rgba(0,80,40,0.35) 100%), 
              linear-gradient(180deg, rgba(0,255,120,0.04), rgba(0,0,0,0.35));
  background-blend-mode: overlay;
  overflow: hidden;
}

.canvas[data-canvas="services"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0,255,120,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,120,0.1) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.22;
  animation: gridMove 30s linear infinite;
}

@keyframes gridMove {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 80px 80px, 80px 80px; }
}

.section.has-canvas {
  position: relative;
  background: radial-gradient(circle at center, rgba(0,255,120,0.02), rgba(0,30,10,0.7));
  color: #fff;
  isolation: isolate;
   padding-top: 3.5rem;
  padding-bottom: 5rem;
}

.section.has-canvas .container {
  position: relative;
  z-index: 2;
}

.services-head {
  margin-top: 0;
  margin-bottom: 2.5rem;
}

/* top-of-card media strip */
.svc-media{
  position: relative;
  margin: -2px -2px 14px;        /* bleed into edges under the glow line */
  border-top-left-radius: 16px;  /* match your card radius */
  border-top-right-radius: 16px;
  overflow: hidden;
  min-height: 160px;             /* ensures presence during lazy load */
  background: rgba(0,0,0,.06);   /* gentle placeholder */
}
.svc-media img{
  display:block;
  width:100%;
  height:220px;                  /* horizontal banner height */
  object-fit:cover;
}

/* Services: Emerald glass cards with white type */
.section.has-canvas .service-card{
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 44px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(24,124,82,.56) 0%, rgba(12,52,36,.53) 55%, rgba(24,124,82,.50) 100%);
}
.section.has-canvas .service-card::before{
  background:linear-gradient(180deg, rgba(24,124,82,.56) 0%, rgba(12,52,36,.53) 55%, rgba(24,124,82,.50) 100%);
  filter:none;
}
.section.has-canvas .svc-title{ color:#fff; font-weight:800 }
.section.has-canvas .svc-desc{ color:rgba(255,255,255,.94); font-weight:600 }
.section.has-canvas .svc-bullets li{ color:rgba(255,255,255,.92) }
.section.has-canvas .svc-bullets li::before{ color:rgba(60,210,255,.95) }

.section.has-canvas .svc-icon{
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}

/* Topline accent kept, but a touch brighter over dark glass */
.section.has-canvas .svc-topline{ opacity:.95 }

/* Hover lift */
.section.has-canvas .service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 56px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Optional: Cyan theme toggle (add class "services--cyan" on #services) */
#services.services--cyan .service-card,
#services.services--cyan .service-card::before{
  background:linear-gradient(180deg, rgba(14,143,120,.56) 0%, rgba(6,70,62,.53) 55%, rgba(14,143,120,.50) 100%);
}

.section.has-canvas .svc-scan{display:none}
.section.has-canvas .svc-topline{animation:none}

.section.has-canvas .service-card{overflow:visible}

.section.has-canvas .service-card::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-16px;
  transform:translateX(-50%) scale(.9);
  width:82%;
  height:26px;
  border-radius:999px;
  background:radial-gradient(closest-side, rgba(60,210,255,.36), rgba(60,210,255,0));
  filter:blur(10px);
  opacity:0;
  pointer-events:none;
  animation:svc-pulse 3s ease-in-out infinite;
}

.services-grid--wide .service-card:nth-child(2)::after{animation-delay:.6s}
.services-grid--wide .service-card:nth-child(3)::after{animation-delay:1.2s}

@keyframes svc-pulse{
  0%   {opacity:0; transform:translateX(-50%) scale(.9)}
  18%  {opacity:.75; transform:translateX(-50%) scale(1.05)}
  45%  {opacity:.35; transform:translateX(-50%) scale(1.25)}
  100% {opacity:0; transform:translateX(-50%) scale(1.45)}
}

#services .services-head .h2,
#services h2#services-title{
  color:#fff;
}




/* ===== PREMIER WEST — LEGACY (Glass + Square KPI Cards) ================== */

:root{
  /* Brand tints */
  --pg-green: 28 220 150;   /* #1CDC96 */
  --pg-leaf:  18 165 115;   /* #12A573 */
  --pg-amber: 255 195 65;   /* #FFC341 */
  --pg-white: 255 255 255;
  --ink-dark:  11 43 34;    /* text inside cards */
  --ink-mid:   23 74 58;
}

/* Section background (brighter green → amber, no grays) */
.section.legacy-cinema,
.legacy-cinema{
  padding: 80px 0 96px;
  background:
    radial-gradient(120% 85% at 50% -8%, rgba(var(--pg-amber)/.38) 0%, rgba(var(--pg-amber)/.18) 40%, transparent 64%),
    linear-gradient(180deg,
      rgba(var(--pg-green)/.55) 0%,
      rgba(var(--pg-leaf)/.48) 48%,
      rgba(var(--pg-amber)/.32) 100%);
  background-color: rgb(12 48 35);
}

/* Glass container */
.legacy-wrap{
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  border-radius: 22px;
  padding: 48px 44px;
  background: rgba(255,255,255,.06);
  box-shadow:
    0 20px 60px rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(255,255,255,.28);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  overflow: hidden;
}

/* subtle scanlines */
.legacy-wrap::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(var(--pg-green)/.18) 0 2px,
    transparent 2px 10px
  );
  opacity:.18;
  pointer-events:none;
}

/* Heading & body copy */
#legacy-heading{
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  margin-bottom: 20px;
}
.legacy-copy,
.legacy-copy .p{
  color: rgba(255,255,255,.96);
  font-size: 1.04rem;
  line-height: 1.65;
}

/* Soft reading plate behind the paragraph so it always pops */
.legacy-copy{ position:relative; }
.legacy-copy::before{
  content:"";
  position:absolute; inset:-8px -12px auto -12px; height:72%;
  border-radius:16px; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 100% at 20% 20%, rgba(255,255,255,.38) 0%, rgba(255,255,255,.22) 42%, transparent 70%),
    radial-gradient(90% 85% at 90% 60%, rgba(var(--pg-green)/.18) 0%, transparent 70%),
    radial-gradient(80% 80% at 10% 110%, rgba(var(--pg-amber)/.16) 0%, transparent 70%);
  filter: blur(8px);
}
.legacy-copy > *{ position:relative; z-index:1; }

/* Quote card (same glass recipe as KPIs for consistency) */
.legacy-quote{
  background: linear-gradient(180deg, rgba(var(--pg-white)/.98), rgba(var(--pg-white)/.88));
  border: 1.2px solid rgba(var(--pg-green)/.30);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16), 0 0 22px rgba(var(--pg-green)/.18);
  padding: 24px 28px;
  color: rgb(var(--ink-dark));
  margin: 18px 0 28px;
  position: relative;
}
.legacy-quote::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(0deg, rgba(var(--pg-green)/.14) 0 1px, transparent 1px 6px);
  opacity:.22; pointer-events:none;
}

/* ==== FORCE KPI CARDS TO LINE UP HORIZONTALLY ==== */
.legacy-metrics{
  display: flex !important;        /* overrules any earlier grid/flex settings */
  flex-wrap: wrap;                  /* wrap to next line on smaller screens */
  gap: 20px;                        /* space between squares */
  justify-content: space-between;   /* spread nicely across the row */
  align-items: stretch;
  list-style: none;                 /* in case it's a <ul> */
  padding: 0;
  margin: 12px auto 0;
  width: 100%;
  max-width: 920px;                 /* keeps the row tidy and centered */
}

/* Each KPI "square" */
.legacy-metrics .legacy-milestone{
  flex: 1 1 280px !important;       /* target width ~280px, grows/shrinks as needed */
  max-width: 320px;                 /* prevents over-growing on huge screens */
  width: auto !important;           /* cancels any earlier fixed width */
}

/* Responsive: 3 → 2 → 1 cards per row */
@media (max-width: 980px){
  .legacy-metrics{ justify-content: center; }
  .legacy-metrics .legacy-milestone{ flex: 1 1 300px; }
}
@media (max-width: 640px){
  .legacy-metrics .legacy-milestone{ flex: 1 1 100%; max-width: 520px; }
}

/* Centered auto-fit grid that yields neat squares */

/* Square card */
.legacy-milestone{
  aspect-ratio: 1 / 1;              /* true square */
  max-width: 240px;                 /* prevents bar stretching */
  width: 100%;
  background: linear-gradient(180deg, rgba(var(--pg-white)/.96), rgba(var(--pg-white)/.86));
  border: 1.2px solid rgba(var(--pg-green)/.25);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16), 0 0 18px rgba(var(--pg-green)/.18);
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;          /* center content vertically */
  align-items: flex-start;          /* left align text */
  gap: 8px;
  color: rgb(var(--ink-dark));
  transition: transform .22s ease, box-shadow .22s ease;
}
.legacy-milestone:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.20), 0 0 28px rgba(var(--pg-amber)/.20);
}

/* KPI typography tuned for square cards */
.legacy-kpi{
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  font-weight: 800;
  color: rgb(var(--ink-dark));
  line-height: 1.05;
}
.legacy-kpi-label{
  font-size: clamp(.85rem, 1.6vw, .95rem);
  color: rgb(var(--ink-mid));
  line-height: 1.25;
}

/* If your markup places KPI text directly, keep bullet styles off */
.legacy-metrics li{ list-style: none; }

/* Remove old figure slot */
.legacy-figure{ display:none !important; }

/* =================== Responsive tweaks =================== */
@media (max-width: 980px){
  .legacy-wrap{ padding: 36px 28px; }
  .legacy-copy::before{ inset:-10px -10px auto -10px; height:66%; }
}
@media (max-width: 640px){
  .legacy-copy::before{ height:62%; filter: blur(7px); }
  .legacy-metrics{ gap: 14px; }
  .legacy-milestone{ padding: 14px; }
}

/* ===== LEGACY SECTION ENHANCEMENT PATCHES ===== */

/* Center heading and add soft glow divider */
#legacy-heading {
  text-align: center;
  letter-spacing: 0.3px;
  margin-bottom: 28px !important;
  position: relative;
}

#legacy-heading::after {
  content: "";
  display: block;
  width: 120px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--pg-amber)/.9), rgba(var(--pg-green)/.9));
  box-shadow: 0 0 24px rgba(var(--pg-amber)/.55);
}

/* Improve copy rhythm and readability */
.legacy-copy p {
  margin-bottom: 18px;
  line-height: 1.7;
}

/* Add breathing space before quote */
.legacy-quote {
  margin-top: 26px !important;
}

/* Optional subtle vignette for the main glass container */
.legacy-wrap {
  box-shadow:
    0 22px 64px rgba(0,0,0,.26),
    0 0 80px rgba(0,0,0,.18) inset,
    inset 0 0 0 1px rgba(255,255,255,.28);
}

/* ===== LEGACY WALLPAPER WITH SUBTLE GREEN OVERLAY ===== */

.legacy-cinema {
  position: relative;
  background: none !important;
  overflow: hidden;
}

/* Wallpaper image layer */
.legacy-cinema::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('images/legacywall.webp') center/cover no-repeat;
  filter: saturate(1.05) contrast(1.05) brightness(1.03);
  z-index: 0;
}

/* Gentle green overlay — just enough to unify tones without hiding image */
.legacy-cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,48,35,.25) 0%, rgba(15,62,45,.32) 100%);
  z-index: 0;
}

/* Ensure the content card sits above the image/overlay */
.legacy-wrap {
  position: relative;
  z-index: 1;
}


/* --- Kill the milky glass; use clean green gradient panel --- */
.legacy-wrap{
  background:
    linear-gradient(180deg,
      rgba(var(--pg-leaf) / .22) 0%,
      rgba(var(--pg-green) / .20) 36%,
      rgba(var(--pg-amber) / .12) 100%) !important;
  /* remove the foggy blur */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* keep a subtle rim so the card still feels “cut out” */
  box-shadow:
    0 22px 64px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

/* --- Tame scanlines so they don’t haze the card --- */
.legacy-wrap::before{
  background-image: repeating-linear-gradient(
    180deg,
    rgba(var(--pg-green) / .10) 0 1px,
    transparent 1px 10px
  ) !important;
  opacity: .10 !important; /* much lighter */
}

/* --- OPTIONAL: if you see a white bloom behind paragraphs, disable it --- */
.legacy-copy::before{
  display: none !important;
}


/* ===== Legacy wallpaper + light overlay (keeps image vivid) ===== */
.legacy-cinema{
  position: relative !important;
  overflow: hidden;
  background: none !important; /* ensure no old bg sits on top */
}
.legacy-cinema::before{
  content:"";
  position:absolute; inset:0;
  background: url('images/legacywall.webp') center/cover no-repeat;
  filter: saturate(1.05) contrast(1.03);
  z-index:0;
}
.legacy-cinema::after{
  content:"";
  position:absolute; inset:0;
  /* very light green veil so text reads, but image still pops */
  background: linear-gradient(180deg, rgba(12,48,35,.28) 0%, rgba(15,62,45,.34) 100%);
  z-index:0;
}

/* ===== Panel/card (the big glass behind the paragraphs) ===== */
.legacy-wrap{
  position: relative;
  z-index: 1; /* sits above wallpaper/overlay */
  border-radius: 22px;
  padding: 48px 44px;
  /* stronger, cleaner dark-glass gradient */
  background: linear-gradient(180deg,
    rgba(18,46,36,0.92) 0%,
    rgba(12,36,28,0.94) 100%) !important;
  box-shadow:
    0 28px 60px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.12);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

/* If you still have scanlines on the panel, tame them or turn off */
.legacy-wrap::before{ opacity: .06 !important; } /* or set to 0 to remove */

/* ===== Quote card (the wide white card in the middle) ===== */
.legacy-quote{
  position: relative;
  z-index: 2; /* above the panel */
  background: linear-gradient(180deg,
    rgba(255,255,255,.98),
    rgba(255,255,255,.97)) !important;  /* less transparent */
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 32px rgba(0,0,0,.25);
  color: #0e2d22;
}

/* Remove any scanline overlay on the quote (if you had one earlier) */
.legacy-quote::after{ display: none !important; }

/* ================= LEGACY WALLPAPER + LIGHT OVERLAY ================ */
.legacy-cinema{
  position: relative !important;
  overflow: hidden;
  background: none !important; /* kill any old gradients here */
}
.legacy-cinema::before{
  content:"";
  position:absolute; inset:0;
  background: url('images/legacywall.webp') center/cover no-repeat;
  filter: saturate(1.05) contrast(1.03);
  z-index:0;
}
/* tiniest readable veil; lower these alphas if you want even less */
.legacy-cinema::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,48,35,.18) 0%, rgba(15,62,45,.22) 100%);
  z-index:0;
}

/* ================= GLASS PANEL (BEHIND THE COPY) =================== */
.legacy-wrap{
  position: relative !important;
  z-index: 1 !important;  /* above wallpaper/overlay */
  border-radius: 22px;
  padding: 48px 44px;
  /* clean, dark glass — no milky white fade */
  background: linear-gradient(180deg,
    rgba(18,46,36,0.95) 0%,
    rgba(12,36,28,0.97) 100%) !important;
  box-shadow:
    0 28px 60px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}
/* if you previously had scanlines on the panel, keep them ultra-low or off */
.legacy-wrap::before{ opacity:.05 !important; } /* or set to 0 */

/* ================== QUOTE CARD (CENTER WHITE CARD) ================== */
.legacy-quote{
  position: relative !important;
  z-index: 2 !important;    /* above the panel */
  /* near-opaque white so it pops over the wallpaper */
  background: linear-gradient(180deg,
    rgba(255,255,255,.99),
    rgba(255,255,255,.985)) !important;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 36px rgba(0,0,0,.28);
  color: #0e2d22;
}
/* remove any old scanline overlay on the quote */
.legacy-quote::after{ display:none !important; }

/* === Legacy card: forest → mid → lime gradient === */
.legacy-wrap{
  position: relative !important;
  z-index: 1;
  border-radius: 22px;
  padding: 48px 44px;
  background: linear-gradient(180deg,
    rgba(10,45,25,0.96) 0%,      /* deep forest green */
    rgba(22,85,45,0.94) 50%,     /* medium natural green */
    rgba(80,200,100,0.92) 100%); /* lime edge highlight */
  box-shadow:
    0 28px 60px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: rgb(236,238,241);
}

/* ========== LEGACY FIX PATCH (place LAST in styles.css) ========== */

/* Kill any old background on the section itself and use the wallpaper */
#legacy.legacy-cinema { 
  position: relative; 
  overflow: hidden; 
  background: none !important; 
}

/* Wallpaper layer */
#legacy.legacy-cinema::before{
  content:"";
  position:absolute; inset:0;
  background: url('images/legacywall.webp') center/cover no-repeat;
  filter: saturate(1.05) contrast(1.03);
  z-index:0;
}

/* Very light green veil so text still reads, but image pops */
#legacy.legacy-cinema::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,48,35,.18) 0%, rgba(15,62,45,.22) 100%);
  z-index:0;
}

/* Force the panel gradient (forest → mid → lime) and remove haze */
#legacy .legacy-wrap{
  position: relative !important;
  z-index: 1 !important;                 /* above wallpaper/overlay */
  border-radius: 22px;
  padding: 48px 44px;
  background: linear-gradient(180deg,
    rgba(10,45,25,0.96) 0%,               /* deep forest */
    rgba(22,85,45,0.94) 50%,              /* medium green */
    rgba(80,200,100,0.92) 100%) !important; /* lime highlight */
  box-shadow:
    0 28px 60px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter: none !important;       /* no milky blur */
  -webkit-backdrop-filter: none !important;
  color: rgb(236,238,241);
}

/* Remove scanlines / reading plate that fog the card */
#legacy .legacy-wrap::before{ display:none !important; }
#legacy .legacy-copy::before{ display:none !important; }

/* Make the white quote card pop cleanly over the wallpaper */
#legacy .legacy-quote{
  position: relative !important;
  z-index: 2 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.985)) !important;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 36px rgba(0,0,0,.28);
  color: #0e2d22;
}
#legacy .legacy-quote::after{ display:none !important; } /* no scanlines on quote */



:root{
  --slider-width: min(720px, 85vw);
  --slider-aspect: 3/2;
  --btn-size: 46px;
  --dot-size: 10px;
  --cap-bg: rgba(20,20,20,.32);
  --cap-blur: 8px;
  --cap-pad: 6px 10px;
  --cap-radius: 10px;
  --cap-title: 13px;
  --cap-body: 11px;
}

/* SECTION SCOPE */
.portfolio-section{
  --slider-scale: 1.1; /* master scale knob */
  --scaled: calc(var(--slider-width) * var(--slider-scale));
  --btn:    calc(var(--btn-size) * var(--slider-scale));
  --dot:    calc(var(--dot-size) * var(--slider-scale));
  --gutter: calc(48px * var(--slider-scale)); /* runway for arrows */

  padding: 40px 0 80px 0;
  position: relative;
}

/* Centered container wider than the image to host arrows */
.portfolio-section .portfolio-wrap{
  width:  calc(var(--scaled) + 2 * (var(--gutter) + var(--btn)/2));
  max-width: calc(var(--scaled) + 2 * (var(--gutter) + var(--btn)/2));
  margin: 0 auto;
  position: relative;
  overflow: visible; /* allow button shadows to show */
}

/* Heading */
.portfolio-section .portfolio-header{ display:grid; place-items:center; margin:0 0 20px 0 }
.portfolio-section .portfolio-heading{
  margin: 0;
  text-align: center;
  font-size: calc(32px * var(--slider-scale));
  line-height: 1.25;
  font-weight: 800;
}

/* Slider core */
.portfolio-section .slider{
  position: relative;
  display: grid;
  place-items: center;
  width: var(--scaled);          /* image width only */
  margin: 0 auto;
  isolation: isolate;
  z-index: 1;
  overflow: visible;             /* ensure buttons outside aren’t clipped */
}

/* The frame sits inside the wider wrap; arrows live in the wrap space */
.portfolio-section .slider .frame{
  position: relative;
  width: var(--scaled);
  aspect-ratio: var(--slider-aspect);
  margin: 0 auto;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(8,28,21,.07), rgba(8,28,21,.09));
  box-shadow: 0 28px 90px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.35);
  box-sizing: content-box;
  padding: 0 var(--gutter);      /* runway inside frame (no image crop) */
  overflow: visible;             /* show arrow shadows */
  z-index: 2;
}

/* Clip ONLY the slides, not the arrows */
.portfolio-section .slider .viewport{
  position: relative;
  width: 100%;
  height: 100%;
  outline: none;
  overflow: hidden;
}

.portfolio-section .slider .track{
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(0%);
  transition: transform .5s ease;
  will-change: transform;
}
@media (prefers-reduced-motion:reduce){
  .portfolio-section .slider .track{ transition:none }
}

.portfolio-section .slider .slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: transparent;
  padding: 0;
}
.portfolio-section .slider .slide img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  max-width: 100%;
  max-height: 100%;
  background: #f3f5f6;
}

/* Caption */
.portfolio-section .slider .caption{
  position: absolute;
  left: 12px; right: 12px; bottom: 8px;
  padding: var(--cap-pad);
  border-radius: var(--cap-radius);
  background: var(--cap-bg);
  backdrop-filter: blur(var(--cap-blur));
  color: #fff;
}
.portfolio-section .slider .caption h4{ margin:0 0 2px 0; font-size: var(--cap-title); font-weight: 600 }
.portfolio-section .slider .caption p{ margin:0; font-size: var(--cap-body); opacity:.9 }

/* Arrows — positioned in the extra wrap width, perfectly centered vertically */
.portfolio-section .slider .btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--btn); height: var(--btn);
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center;
  color: #0d1f17;
  padding: 0;
  z-index: 5;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.portfolio-section .slider .btn svg{ width:20px; height:20px; display:block; pointer-events:none }

/* Offset = outside the image edge (half the button outside), using the runway */
.portfolio-section .slider .btn.prev{
  left: calc(-1 * (var(--gutter) - var(--btn)/2));
}
.portfolio-section .slider .btn.next{
  right: calc(-1 * (var(--gutter) - var(--btn)/2));
}

.portfolio-section .slider .btn:hover{
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 16px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.9);
  border-color: rgba(0,0,0,.18);
}
.portfolio-section .slider .btn:active{
  transform: translateY(-50%) scale(.96);
  box-shadow: 0 8px 18px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.8);
}
.portfolio-section .slider .btn:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 4px rgba(0,150,255,.28), 0 12px 28px rgba(0,0,0,.18);
  border-color: rgba(0,150,255,.45);
}

/* Dots */
.portfolio-section .slider .dots{
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 10px;
  padding: 0 12px;
  z-index: 3;
}
.portfolio-section .slider .dots button{
  width: var(--dot); height: var(--dot);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.25);
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.portfolio-section .slider .dots button:hover{ transform: scale(1.12); box-shadow: 0 6px 14px rgba(0,0,0,.22) }
.portfolio-section .slider .dots button[aria-current="true"]{
  background: linear-gradient(180deg, rgba(0,255,200,.95), rgba(0,120,255,.9));
  border-color: rgba(0,120,255,.45);
}

/* Mobile: disable scaling so everything fits neatly */
@media (max-width: 520px){
  .portfolio-section{ --slider-scale: 1 }
}


.footer {
  background: linear-gradient(135deg, #0d5e3d 0%, #1a9b68 50%, #4ade80 100%);
  color: #fff;
  padding: 40px 28px 24px;
  font-size: 0.95rem;
  border-top: 2px solid rgba(255,255,255,0.1);
}

.footer .container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.footer-brand {
  justify-self: end;
}

.footer-brand img {
  max-height: 180px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
  transition: transform .25s ease, filter .25s ease;
}

.footer-brand img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}

.footer-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  justify-self: center;
}

.footer-contact {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-phone,
.footer-email {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
  transition: all .25s ease;
}

.footer-phone:hover,
.footer-email:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.footer-license {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.9);
}

.footer-map a {
  color: #fff;
  text-decoration: underline;
  font-size: 0.9rem;
  transition: opacity .25s ease;
}

.footer-map a:hover {
  opacity: 0.75;
}

.footer-links {
  display: flex;
  gap: 16px;
  justify-self: start;
  align-items: center;
  flex-wrap: wrap;
}

.footer-links a {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
  transition: all .25s ease;
}

.footer-links a:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.footer-bottom {
  text-align: center;
  margin-top: 22px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.footer-links.footer-links--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

@media (max-width: 1024px) {
  .footer-grid {
    gap: 24px;
  }
  .footer-links a {
    padding: 8px 14px;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .footer-brand {
    justify-self: center;
  }
  .footer-links {
    justify-self: center;
    justify-content: center;
  }
  .footer-brand img {
    max-height: 150px;
  }
}


.expertise{padding:84px 0;--lime:163,230,53}
.expertise__wrap{max-width:1180px;margin:0 auto;padding:0 20px;text-align:center}
.expertise__title{font-size:clamp(32px,4vw,44px);font-weight:800;margin:0 0 40px 0}
.expertise a{text-decoration:none;color:inherit}
.expertise__grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(300px,1fr));gap:28px;margin:0 auto;padding:0;justify-items:center;overflow:visible}
@media(max-width:1100px){.expertise__grid{grid-template-columns:repeat(2,minmax(280px,1fr))}}
@media(max-width:640px){.expertise__grid{grid-template-columns:1fr}}
.expertise__card{position:relative;z-index:0;overflow:visible;width:100%;max-width:380px;aspect-ratio:5/4;transform:translateZ(0);transition:transform .35s ease,box-shadow .35s ease;will-change:transform}
.expertise__card::before{content:"";position:absolute;inset:-28px;border-radius:34px;background:radial-gradient(60% 60% at 50% 50%,rgba(var(--lime),.36) 0%,rgba(var(--lime),.14) 45%,rgba(var(--lime),0) 75%);z-index:-1;pointer-events:none;animation:underPulse 2.2s ease-in-out infinite;filter:blur(12px)}
.expertise__card:nth-child(2)::before{animation-delay:.2s}
.expertise__card:nth-child(3)::before{animation-delay:.4s}
.expertise__card:nth-child(4)::before{animation-delay:.6s}
.expertise__card:nth-child(5)::before{animation-delay:.8s}
.expertise__card:nth-child(6)::before{animation-delay:1s}
.expertise__link{display:block;position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;border:2px solid rgba(var(--lime),.72);box-shadow:0 10px 26px rgba(0,0,0,.18);transition:transform .35s ease,box-shadow .35s ease}
.expertise__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .35s ease,filter .35s ease}
.expertise__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,.36));opacity:.9;transition:opacity .35s ease}
.expertise__label{position:absolute;left:50%;top:50%;transform:translate(-50%,-48%);color:#fff;font-weight:800;font-size:clamp(18px,2.1vw,26px);letter-spacing:.2px;text-shadow:0 2px 10px rgba(0,0,0,.45);text-align:center;white-space:nowrap}
.expertise__card:hover{transform:translateY(-6px) scale(1.025);box-shadow:0 28px 60px rgba(0,0,0,.25)}
.expertise__card:hover .expertise__img{transform:scale(1.06);filter:saturate(1.12) contrast(1.05)}
.expertise__card:hover .expertise__shade{opacity:.98}
.expertise__card:hover::before{animation:underPulseHover 1.6s ease-out infinite;filter:blur(16px)}
@keyframes underPulse{0%{transform:scale(.92);opacity:.24}50%{transform:scale(1.08);opacity:.5}100%{transform:scale(1.18);opacity:.24}}
@keyframes underPulseHover{0%{transform:scale(1);opacity:.35}50%{transform:scale(1.26);opacity:.7}100%{transform:scale(1.38);opacity:.35}}

.expertise-modal{position:fixed;inset:0;z-index:60;display:none}
.expertise-modal.is-open{display:block}
.expertise-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.38);backdrop-filter:blur(10px);opacity:0;transition:opacity .25s ease}
.expertise-modal.is-open .expertise-modal__backdrop{opacity:1}

.expertise-modal__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%) scale(.96);width:min(820px,92vw);border-radius:20px;overflow:hidden;color:#0b130b;background:linear-gradient(145deg,rgba(216,255,204,1) 0%,rgba(146,255,76,1) 50%,rgba(57,163,53,1) 100%);box-shadow:0 0 28px rgba(57,163,53,.35),0 0 64px rgba(146,255,76,.3),0 26px 80px rgba(0,0,0,.35);opacity:0;transition:transform .25s ease,opacity .25s ease}
.expertise-modal__panel::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0px,rgba(255,255,255,.06) 1px,transparent 2px,transparent 4px);animation:expertiseScan 8s linear infinite;z-index:1;pointer-events:none}
.expertise-modal__panel::after{content:"";position:absolute;inset:-22px;border-radius:28px;background:radial-gradient(60% 60% at 50% 50%,rgba(146,255,76,.28),rgba(146,255,76,0) 70%);animation:expertiseGlow 3s ease-in-out infinite;z-index:0;pointer-events:none}
.expertise-modal.is-open .expertise-modal__panel{transform:translate(-50%,-50%) scale(1);opacity:1}

.expertise-modal__body{position:relative;z-index:2;padding:26px 26px 24px 26px;text-align:left}
.expertise-modal__body.only-text h3{font-size:clamp(22px,3vw,28px);margin:0 0 10px 0;color:#061106}
.expertise-modal__body.only-text p{margin:0 0 18px 0;font-size:clamp(16px,2.2vw,18px);line-height:1.6;color:#0b130b}

.expertise-modal__actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:10px;border:1px solid rgba(11,19,11,.18);background:rgba(255,255,255,.35);color:#0b130b;text-decoration:none;cursor:pointer;transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.18)}

.expertise-modal__close{position:absolute;right:10px;top:8px;width:36px;height:36px;border:none;border-radius:50%;background:rgba(255,255,255,.4);color:#0b130b;font-size:18px;cursor:pointer;transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;z-index:3}
.expertise-modal__close:hover{opacity:.95;transform:scale(1.05);box-shadow:0 6px 16px rgba(0,0,0,.2)}

@keyframes expertiseScan{0%{transform:translateY(0)}100%{transform:translateY(4px)}}
@keyframes expertiseGlow{0%,100%{opacity:.3;transform:scale(.98)}50%{opacity:.65;transform:scale(1.04)}}

.expertise {
  position: relative;
  overflow: hidden;
}
#expertiseGrid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.expertise__wrap {
  position: relative;
  z-index: 1;
}

.expertise__title {
  color: #ffffff;
}

.hero-video{position:relative;min-height:100svh;width:100%;padding:0;margin:0;isolation:isolate}
.hero-video-wrap{position:relative;min-height:inherit}
.hero-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-video-bg::-webkit-media-controls{display:none !important}
.hero-video-bg::-webkit-media-controls-enclosure{display:none !important}
.hero-video-bg::-webkit-media-controls-panel{display:none !important}
.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1) 100%);
  z-index:1;
  pointer-events:none;
}

.section.hero{padding:0}

.expertise__wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.expertise__blurb {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 1040px;
  margin: 0 auto 40px auto;
  padding: 18px 26px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(1.5px) saturate(180%);
  -webkit-backdrop-filter: blur(1.5px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  color: #fff;
  z-index: 3;
  text-align: left;
  transition: all 0.3s ease;
}

.expertise__blurb:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}

.expertise__blurb-media {
  flex: 0 0 80px;
  height: 80px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.expertise__blurb-media img {
  width: 68px;
  height: auto;
  display: block;
  object-fit: contain;
  opacity: 0.95;
}

.expertise__blurb-body {
  flex: 1 1 auto;
  color: #fff;
}

.expertise__blurb-body h3 {
  margin: 0 0 6px 0;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
}

.expertise__blurb-body p {
  margin: 0;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.55;
  color: #fff;
  opacity: 0.92;
}

@media (max-width: 720px) {
  .expertise__blurb {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    max-width: 92%;
  }
  .expertise__blurb-media {
    width: 68px;
    height: 68px;
  }
  .expertise__blurb-media img {
    width: 54px;
  }
}

/* === PremierWest blurb uses the Legacy dark-glass container === */
/* Only applies when .glass-box is present */
.expertise__blurb.glass-box{
  position: relative;
  isolation: isolate;                 /* keeps pseudo-elements contained */
  background: linear-gradient(180deg,
    rgba(12,36,28,.96) 0%,
    rgba(10,45,25,.97) 100%) !important;      /* same vibe as Legacy */
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 28px 60px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: #ecf6ef;                     /* crisp readable ink */
}

/* faint scanlines like Legacy (very subtle) */
.expertise__blurb.glass-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.06) 0 1px,
    transparent 1px 6px
  );
  opacity:.08;
  pointer-events:none;
  z-index:0;
}

/* put content above scanlines */
.expertise__blurb.glass-box > *{ position: relative; z-index: 1; }

/* Media tile inside the blurb: match the container treatment */
.expertise__blurb.glass-box .expertise__blurb-media{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Headline + copy colors inside the glass */
.expertise__blurb.glass-box .expertise__blurb-body h3{
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.expertise__blurb.glass-box .expertise__blurb-body p{
  color:rgba(255,255,255,.96);
}

/* Hover: a touch brighter, consistent with the Legacy feel */
.expertise__blurb.glass-box:hover{
  box-shadow:
    0 32px 70px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.12);
}

/* ===== PremierWest blurb: centered headline + gradient + underline ===== */
.expertise__blurb.glass-box{
  /* upgraded green gradient to match Legacy family */
  background: linear-gradient(180deg,
    rgba(10,45,25,.96) 0%,      /* deep forest */
    rgba(22,85,45,.95) 52%,     /* natural green */
    rgba(68,190,95,.92) 100%    /* lime edge */
  ) !important;
}

/* center the content in the blurb (headline + copy) */
.expertise__blurb.glass-box .expertise__blurb-body{
  text-align: center;
}

/* headline center + underline */
.expertise__blurb.glass-box .expertise__blurb-body h3{
  text-align: center;
  letter-spacing: .3px;
  margin: 0 0 14px 0; /* make room for underline */
  position: relative;
}

.expertise__blurb.glass-box .expertise__blurb-body h3::after{
  content: "";
  display: block;
  width: 140px;                 /* length of the bar */
  height: 4px;
  margin: 10px auto 0;
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(255,195,65,.95), rgba(28,220,150,.95)); /* amber → brand green */
  box-shadow: 0 0 22px rgba(255,195,65,.55);
  position: relative;
  overflow: hidden;
}

/* animated scanlines riding across the underline (subtle) */
.expertise__blurb.glass-box .expertise__blurb-body h3::after{
  --scan-w: 140px;
  --scan-h: 4px;
}
.expertise__blurb.glass-box .expertise__blurb-body h3::before{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  top: calc(100% + 10px);
  width: 140px; height: 4px;
  border-radius:3px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.35) 0 8px,
    rgba(255,255,255,0) 8px 16px
  );
  mix-blend-mode: screen;
  opacity:.25;
  animation: pw-scan 3.2s linear infinite;
  pointer-events:none;
}
@keyframes pw-scan{
  0%   { transform: translateX(calc(-50% - 8px)); }
  100% { transform: translateX(calc(-50% + 8px)); }
}

/* fine-tune text color contrast on this darker glass */
.expertise__blurb.glass-box .expertise__blurb-body p{
  color: rgba(255,255,255,.95);
  line-height: 1.65;
}

/* keep the icon tile subtle but crisp */
.expertise__blurb.glass-box .expertise__blurb-media{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

/* ===== KPI badges under the intro (optional but recommended) ===== */
.expertise__kpis{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0 0 0;
  padding: 0;
  list-style: none;
}

.expertise__kpis li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.20);
  color: #0e2d22;
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
}

/* KPI value highlight */
.expertise__kpis .k{
  font-weight: 800;
  font-size: 15.5px;
  color: #0b2b22;
}

/* fully centered layout (icon above text) */
@media (min-width: 721px){
  .expertise__blurb.glass-box{ display:flex; flex-direction:column; align-items:center; }
}

/* =========================
   PREMIER WEST — EXPERTISE
   Intro blurb, KPI tiles, tighter grid
   ========================= */

/* Center the intro heading + neon underline (match Legacy) */
.expertise__blurb-body h3{
  text-align:center;
  position:relative;
  margin: 4px 0 14px;
  letter-spacing:.2px;
  color:#fff;
}
.expertise__blurb-body h3::after{
  content:"";
  display:block;
  width:120px;
  height:4px;
  margin:10px auto 0;
  border-radius:3px;
  background: linear-gradient(90deg, rgba(255,195,65,.9), rgba(28,220,150,.9));
  box-shadow: 0 0 20px rgba(255,195,65,.45);
}

/* Slightly tighter spacing above the grid */
.expertise__blurb{ margin-bottom: 20px !important; }

/* -------------------------
   KPI TILES (corporate style)
   ------------------------- */

/* Tile row */
.expertise__kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px,1fr));
  gap:14px;
  margin:18px auto 2px;
  max-width:min(980px, 92%);
  padding:0;
  list-style:none;
}

/* Tile */
.expertise__kpis .kpi{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:72px;
  padding:16px 18px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.95));
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.35) inset;
  color:#0e2d22;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Big value */
.expertise__kpis .kpi__value{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:10px;
  font-weight:800;
  font-size:clamp(20px, 2.2vw, 24px);
  line-height:1;
  color:#0e2d22;
  background: linear-gradient(180deg, rgba(22,85,45,.12), rgba(28,220,150,.08));
  box-shadow: inset 0 0 0 1px rgba(28,220,150,.25);
  white-space:nowrap;
}

/* Label (wrap when needed, never pushes tile too wide) */
.expertise__kpis .kpi__label{
  font-size:clamp(14px, 1.6vw, 15.5px);
  line-height:1.35;
  color:#103327;
}

/* Hover polish */
.expertise__kpis .kpi:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.45) inset;
  border-color: rgba(28,220,150,.25);
}

/* Stack responsibly */
@media (max-width: 980px){
  .expertise__kpis{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
}
@media (max-width: 620px){
  .expertise__kpis{ grid-template-columns: 1fr; }
}

/* -------------------------
   3×3 GRID — tighter & cleaner
   ------------------------- */

.expertise__grid{
  gap:18px !important;          /* was 28px */
  margin-top: 18px !important;
}

/* Slightly shorter + narrower cards to hold three columns comfortably */
.expertise__card{
  max-width:352px !important;   /* was 380 */
  aspect-ratio: 4 / 3 !important; /* was 5/4 */
}

/* Subtle border so the grid reads cleaner */
.expertise__link{
  border-width:1.5px !important;
}

/* Tablet/phone density */
@media (max-width:1100px){
  .expertise__grid{ gap:16px !important; }
}
@media (max-width:640px){
  .expertise__grid{ gap:14px !important; }
}

/* -------------------------
   Dark-glass blurb container (matches Legacy)
   ------------------------- */

.glass-box{
  background: linear-gradient(180deg,
    rgba(18,46,36,0.95) 0%,
    rgba(12,36,28,0.97) 100%) !important;
  box-shadow:
    0 28px 60px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color:#fff;
}

/* --- KPI row: stop overflow, allow wrapping, keep 3-up when room --- */
.expertise__kpis{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* 3→2→1 naturally */
  gap: 14px;
  margin: 18px auto 6px;
  max-width: min(980px, 92%);
  padding: 0;
  list-style: none;
}

.expertise__kpis li{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;

  /* KEY: let the tile shrink even if content is long */
  min-width: 0;

  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.35) inset;
  color:#0e2d22;
  line-height: 1.35;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* KEY: child text can wrap inside the tile */
.expertise__kpis li > *{
  min-width: 0;                 /* allow text nodes/spans to shrink */
  overflow-wrap: anywhere;      /* wrap long words */
  word-break: break-word;       /* safety */
}

.expertise__kpis .k{
  flex: 0 0 auto;               /* keep the pill tight */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:10px;
  font-weight:800;
  font-size: clamp(20px, 2.1vw, 24px);
  line-height:1;
  color:#0e2d22;
  background: linear-gradient(180deg, rgba(22,85,45,.12), rgba(28,220,150,.08));
  box-shadow: inset 0 0 0 1px rgba(28,220,150,.25);
  white-space: nowrap;          /* the pill itself shouldn’t break */
  margin-right: 4px;
}

.expertise__kpis li:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.45) inset;
  border-color: rgba(28,220,150,.25);
}

/* =========================
   KPI ROW — CORPORATE PILLS
   ========================= */

/* Row: one clean line on desktop, wraps only on smaller screens */
.expertise__kpis{
  display:flex !important;
  justify-content:center;
  align-items:stretch;
  gap:16px;
  margin:20px auto 8px;
  padding:0;
  list-style:none;
  max-width:1100px;          /* keeps the row readable */
  flex-wrap:nowrap;          /* <-- forces single row on wide screens */
}

/* KPI pill */
.expertise__kpis li{
  display:flex;
  align-items:center;
  gap:14px;
  min-width: 300px;          /* consistent width so 3 sit nicely */
  max-width: 340px;
  height: 84px;
  padding:16px 18px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.94));
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.14), 0 0 0 1px rgba(255,255,255,.35) inset;
  color:#0e2d22;
  white-space:nowrap;         /* keeps labels in one line */
}

/* Big number badge */
.expertise__kpis .k{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  height:36px;
  padding:0 10px;
  border-radius:12px;
  font-weight:900;
  font-size:22px;
  line-height:1;
  color:#0e2d22;
  background: linear-gradient(180deg, rgba(22,85,45,.12), rgba(28,220,150,.10));
  box-shadow: inset 0 0 0 1px rgba(28,220,150,.30);
}

/* Optional finer label styling (keeps “of … / for …” lighter) */
.expertise__kpis li .label{ font-weight:800; }
.expertise__kpis li .sub   { opacity:.85; }

/* Hover polish */
.expertise__kpis li:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.45) inset;
  border-color: rgba(28,220,150,.28);
}

/* --------- Responsiveness --------- */
@media (max-width: 1100px){
  .expertise__kpis{ flex-wrap:wrap; }          /* now wrapping is allowed */
  .expertise__kpis li{ min-width:300px; }      /* 2-up */
}

@media (max-width: 680px){
  .expertise__kpis li{
    min-width:260px;                            /* 1-up on small screens */
    width:100%;
  }
}

/* Slightly tighter spacing below the blurb */
.expertise__blurb{ margin-bottom:20px !important; }

/* ===== EXPERTISE BLURB — KILL LEFTOVER DOTS & MOBILE SNAPSHOT ===== */

/* Make the card the clipping boundary */
.expertise__blurb{
  position: relative;
  overflow: hidden;
}

/* (A) The dots are coming from here — nuke any blurb-level decoration */
.expertise__blurb::before,
.expertise__blurb::after{
  content: none !important;           /* removes pseudo elements entirely */
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* (B) Belt-and-suspenders: remove any inner background/scanline leftovers */
.expertise__blurb :is(*, *::before, *::after){
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-image: none !important;
}

/* If any stray list stayed, strip markers */
.expertise__blurb :is(ul,ol){ list-style:none !important; margin:0 !important; padding:0 !important; }
.expertise__blurb :is(ul,ol) ::marker{ content:"" !important; }

/* Keep the heading underline */
.expertise__blurb .expertise__blurb-body h3{
  text-align:center;
  margin:0 0 12px;
  letter-spacing:.2px;
}
.expertise__blurb .expertise__blurb-body h3::after{
  content:"";
  display:block;
  width:120px;height:4px;margin:10px auto 0;border-radius:3px;
  background:linear-gradient(90deg, rgba(255,195,65,.9), rgba(28,220,150,.9));
  box-shadow:0 0 20px rgba(255,195,65,.45);
}

/* ==== Mobile snapshot (keeps desktop look, just tighter) ==== */
@media (max-width: 720px){
  .expertise{ padding:56px 0 28px; }
  .expertise__wrap{ padding-inline:14px; }

  .expertise__blurb{
    max-width: 640px;
    margin: 0 auto 18px;
    padding: 16px 16px 18px;
    border-radius: 16px;
    transform: scale(.96);             /* snapshot feel */
    transform-origin: top center;
  }

  /* Hide the small icon block if present */
  .expertise__blurb-media{ display:none; }

  .expertise__blurb .expertise__blurb-body h3{
    font-size: clamp(18px, 5.2vw, 22px);
  }
  .expertise__blurb .expertise__blurb-body h3::after{
    width: 96px; height: 3px; margin-top: 8px;
  }
  .expertise__blurb .expertise__blurb-body p{
    font-size: clamp(14.5px, 3.7vw, 16px);
    line-height: 1.55;
    opacity: .96;
  }
}

@media (max-width: 420px){
  .expertise__blurb{
    padding: 14px;
    border-radius: 14px;
    transform: scale(.94);
  }
  .expertise__blurb .expertise__blurb-body h3::after{ width: 82px; }
}

/* MOBILE: show only the title + paragraph inside the expertise blurb */
@media (max-width: 720px){
  .expertise__blurb{
    position: relative;
    overflow: hidden;
    padding: 16px 16px 18px;
    border-radius: 16px;
  }

  /* Hide EVERY sibling inside the blurb except the .expertise__blurb-body */
  .expertise__blurb > :not(.expertise__blurb-body){
    display: none !important;
  }

  /* Inside the body, keep ONLY the h3 and the paragraph(s) */
  .expertise__blurb-body > :not(h3):not(p){
    display: none !important;
  }

  /* Kill any list markers / decorative lists if they remain */
  .expertise__blurb :is(ul,ol){ list-style: none !important; margin:0 !important; padding:0 !important; }
  .expertise__blurb ::marker{ content:"" !important; }

  /* Keep the centered underline for the heading */
  .expertise__blurb-body h3{
    text-align: center;
    margin: 0 0 12px;
    letter-spacing: .2px;
    font-size: clamp(18px, 5.2vw, 22px);
  }
  .expertise__blurb-body h3::after{
    content:"";
    display:block;
    width:96px; height:3px; margin:8px auto 0; border-radius:3px;
    background:linear-gradient(90deg, rgba(255,195,65,.9), rgba(28,220,150,.9));
    box-shadow:0 0 20px rgba(255,195,65,.45);
  }

  /* Paragraph readability */
  .expertise__blurb-body p{
    font-size: clamp(14.5px, 3.7vw, 16px);
    line-height: 1.55;
    opacity: .96;
  }
}

/* --- EXPERTISE GRID: presentation-only hover (no clicks) --- */

/* 1) Remove the hand cursor + any underline hints */
.expertise__link{
  cursor: default;
  text-decoration: none;
}

/* (Optional) truly disable clicks without changing HTML.
   If you prefer to keep them keyboard-focusable, delete this line. */
.expertise__link { pointer-events: none; }

/* 2) Make the hover read as a darker, warm (amber) overlay.
      Keep your existing shade element but retint it to orange. */
.expertise__shade{
  /* subtle at rest */
  background: linear-gradient(
    180deg,
    rgba(245,158,11,0.12),       /* amber */
    rgba(0,0,0,0.28)             /* gentle darkening */
  );
  opacity: .85;
  mix-blend-mode: multiply;      /* makes the amber sit naturally on photos */
  transition: background .28s ease, opacity .28s ease;
}

/* 3) On hover: deepen the overlay so the label pops */
.expertise__card:hover .expertise__shade{
  background: linear-gradient(
    180deg,
    rgba(245,158,11,0.32),       /* warmer top */
    rgba(0,0,0,0.50)             /* darker bottom */
  );
  opacity: .98;
}

/* 4) Strengthen the title legibility over the darker overlay */
.expertise__label{
  text-shadow:
    0 2px 14px rgba(0,0,0,.55),
    0 0 1px rgba(0,0,0,.35);
}

/* 5) Keep the nice lift/zoom you already have */
.expertise__card:hover .expertise__img{
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.05);
}





:root{
  --bl-amber: 255,195,65;   /* gold accent */
  --bl-sienna: 116,70,33;   /* warm top */
  --bl-umber:  78,43,18;    /* warm base */

  /* easy tuning knobs */
  --panel-a1: .58;          /* top stop opacity */
  --panel-a2: .55;          /* mid stop opacity */
  --panel-a3: .52;          /* bottom stop opacity */
  --scanlines-op: .08;      /* scanline strength */
  --rim-op: .12;            /* rim-glow strength */
}

/* Section shell (scopes the wallpaper to this section only) */
.blog-landing{
  position: relative;
  padding: 84px 0;
  isolation: isolate;           /* contain internal blending */
  z-index: 0;                   /* start a local stacking context */
}

/* Section-scoped wallpaper (FULLY visible — no blur/opacity/brighten) */
.blog-landing__bg{
  position: absolute;
  inset: 0;
  z-index: 0;                   /* behind the content panel */
  pointer-events: none;
  background: url("images/blogwall.webp") center/cover no-repeat;
  border-radius: 24px;
  opacity: 1;                   /* show entire wallpaper */
  filter: none;                 /* do not brighten or blur */
  /* optional gentle scale pulse only (no brightness wash) */
  animation: bl-wallScale 18s ease-in-out infinite alternate;
  transform: translateZ(0);
}

/* Main content panel — translucent “book” skin with minimal haze */
.blog-landing__wrap{
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 28px;
  border-radius: 24px;

  background: linear-gradient(
    180deg,
    rgba(var(--bl-sienna), var(--panel-a1)) 0%,
    rgba(var(--bl-umber),  var(--panel-a2)) 55%,
    rgba(var(--bl-sienna), var(--panel-a3)) 100%
  );

  /* No glass blur — avoids fog */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  box-shadow:
    0 26px 64px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.10);
  color: #fff;
  animation: bl-panelLift 10s ease-in-out infinite;
}

/* Subtle scanlines (very light; no hazy blend modes) */
.blog-landing__wrap::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image: repeating-linear-gradient(
    0deg, rgba(var(--bl-amber), var(--scanlines-op)) 0 1px, transparent 1px 6px
  );
}

/* Gentle rim glow (kept minimal) */
.blog-landing__wrap::after{
  content:"";
  position:absolute; inset:-10px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,var(--rim-op)), transparent 70%),
    radial-gradient(80% 70% at 50% 110%, rgba(0,0,0,.22), transparent 80%);
  filter: blur(8px);
}

/* Title & underline */
.blog-landing__title{
  text-align:center;
  font-weight:800;
  margin:0 0 10px;
  position:relative;
}
.blog-landing__title::before{
  content:"";
  display:block;
  width:120px; height:4px;
  margin:12px auto 0;
  border-radius:3px;
  background: linear-gradient(90deg, rgba(var(--bl-amber),.95), rgba(var(--bl-amber),.70));
  box-shadow: 0 0 18px rgba(var(--bl-amber), .45);
  position:relative; overflow:hidden;
}
.blog-landing__title::after{
  content:"";
  position:absolute; left:50%; top:100%;
  width:120px; height:4px; border-radius:3px;
  transform: translate(-60%, -50%) translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: bl-shimmer 3.6s ease-in-out infinite;
}

/* Lead */
.blog-landing__lead{
  text-align:center;
  max-width:800px;
  margin:0 auto 20px;
  color: rgba(255,255,255,.94);
  line-height:1.65;
}

/* Pillar grid */
.blog-landing__pillars{
  list-style:none; padding:0;
  margin:18px auto 22px;
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  max-width:980px;
}

/* Pillar cards */
.blog-landing__pillar{
  position:relative;
  border-radius:16px; padding:16px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 28px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
  animation: bl-pillarPulse 7s ease-in-out infinite;
}
.blog-landing__pillar::after{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  box-shadow: 0 0 18px 4px rgba(var(--bl-amber), .10);
  animation: bl-pillarGlow 8s ease-in-out infinite;
}
.blog-landing__pillar:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.10);
  border-color: rgba(var(--bl-amber), .50);
  filter: saturate(1.06) contrast(1.04);
}

/* CTAs */
.blog-landing__cta{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:6px;
}
.blog-landing__btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 18px; border-radius:12px; text-decoration:none; color:#fff;
  border:1px solid rgba(255,255,255,.18);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.blog-landing__btn--primary{ background: rgba(255,255,255,.14); }
.blog-landing__btn--ghost{ background: transparent; border-color: rgba(255,255,255,.22); }
.blog-landing__btn:hover{ transform: translateY(-2px); }
.is-disabled, .is-disabled:hover{ opacity:.7; cursor:default; transform:none; }

/* ================= Keyframes ================= */
@keyframes bl-panelLift{
  0%,100%{ box-shadow: 0 26px 64px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.10); }
  50%    { box-shadow: 0 32px 74px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.11); }
}
@keyframes bl-shimmer{
  0%  { transform: translate(-60%, -50%) translateX(-120%); opacity: 0; }
  30% { opacity:.75; }
  70% { opacity:.75; }
  100%{ transform: translate(-60%, -50%) translateX(120%);  opacity: 0; }
}
@keyframes bl-pillarPulse{
  0%,100%{ filter: brightness(1) saturate(1); }
  50%    { filter: brightness(1.06) saturate(1.08); }
}
@keyframes bl-pillarGlow{
  0%,100%{ box-shadow: 0 0 18px 4px rgba(var(--bl-amber), .10); }
  50%    { box-shadow: 0 0 26px 6px rgba(var(--bl-amber), .20); }
}
@keyframes bl-wallScale{
  0%   { transform: scale(1); }
  100% { transform: scale(1.015); }
}

/* ================= Responsive ================= */
@media (max-width: 980px){
  .blog-landing{ padding:64px 0; }
  .blog-landing__pillars{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
}
@media (max-width: 640px){
  .blog-landing{ padding:48px 0; }
  .blog-landing__wrap{ padding:24px 18px; border-radius:18px; }
  .blog-landing__pillars{ grid-template-columns: 1fr; }
}

.blog-landing h1,
.blog-landing h2,
.blog-landing h3,
.blog-landing h4,
.blog-landing h5,
.blog-landing h6,
.blog-landing__title,
.blog-landing__pillar strong {
  color: rgb(255,255,255);
}

.blog-landing__pillar em {
  color: rgba(255,255,255,.94);
}

/* ==== Corner-bleed fix for Blog Landing ==== */
.blog-landing {
  border-radius: 0 !important;      /* full-width section flush to viewport */
  overflow: hidden !important;      /* hides background overspill */
  background-color: rgb(78,43,18);  /* fallback base to match lower gradient */
}

.blog-landing__bg {
  border-radius: 0 !important;      /* aligns the wallpaper edges */
  background-clip: padding-box;     /* prevents sub-pixel gaps on curved edges */
}

.blog-landing__wrap {
  border-radius: 24px !important;   /* inner content keeps smooth rounded edges */
}



:root{
  --dl-emerald: 24,124,82;
  --dl-forest: 12,52,36;
  --dl-lime: 198,238,110;
  --dl-cyan: 60,210,255;
  --dl-ink: 255,255,255;

  --dl-panel-a1: .56;
  --dl-panel-a2: .53;
  --dl-panel-a3: .50;
  --dl-scanlines-op: .07;
  --dl-rim-op: .12;
  --dl-grid-op: .08;
}

.data-landing{
  position: relative;
  padding: 84px 0;
  isolation: isolate;
  z-index: 0;
}

.data-landing__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 24px;
  opacity: 1;
  filter: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(var(--dl-cyan), .10), rgba(0,0,0,0)),
    linear-gradient(135deg, rgba(var(--dl-lime), .28) 0%, rgba(var(--dl-emerald), .44) 36%, rgba(var(--dl-forest), .66) 100%),
    repeating-linear-gradient(0deg, rgba(var(--dl-ink), var(--dl-grid-op)) 0 1px, rgba(0,0,0,0) 1px 28px),
    repeating-linear-gradient(90deg, rgba(var(--dl-ink), var(--dl-grid-op)) 0 1px, rgba(0,0,0,0) 1px 28px);
  background-size:
    120% 120%,
    140% 140%,
    100% 100%,
    100% 100%;
  animation: dl-bgDrift 18s ease-in-out infinite alternate;
  transform: translateZ(0);
}

.data-landing__wrap{
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 28px;
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(var(--dl-emerald), var(--dl-panel-a1)) 0%,
    rgba(var(--dl-forest),  var(--dl-panel-a2)) 55%,
    rgba(var(--dl-emerald), var(--dl-panel-a3)) 100%
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 26px 64px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.10);
  color: rgb(var(--dl-ink));
  animation: dl-panelLift 10s ease-in-out infinite;
}

.data-landing__wrap::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image: repeating-linear-gradient(0deg, rgba(var(--dl-cyan), var(--dl-scanlines-op)) 0 1px, rgba(0,0,0,0) 1px 6px);
}

.data-landing__wrap::after{
  content:"";
  position:absolute; inset:-10px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,var(--dl-rim-op)), rgba(0,0,0,0) 70%),
    radial-gradient(80% 70% at 50% 110%, rgba(0,0,0,.22), rgba(0,0,0,0) 80%);
  filter: blur(8px);
}

.data-landing__title{
  text-align:center;
  font-weight:800;
  margin:0 0 10px;
  position:relative;
}

.data-landing__title::before{
  content:"";
  display:block;
  width:120px; height:4px;
  margin:12px auto 0;
  border-radius:3px;
  background: linear-gradient(90deg, rgba(var(--dl-cyan),.95), rgba(var(--dl-cyan),.70));
  box-shadow: 0 0 18px rgba(var(--dl-cyan), .45);
  position:relative; overflow:hidden;
}

.data-landing__title::after{
  content:"";
  position:absolute; left:50%; top:100%;
  width:120px; height:4px; border-radius:3px;
  transform: translate(-60%, -50%) translateX(-120%);
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,255,255,.55), rgba(0,0,0,0));
  animation: dl-shimmer 3.6s ease-in-out infinite;
}

.data-landing__lead{
  text-align:center;
  max-width:800px;
  margin:0 auto 20px;
  color: rgba(255,255,255,.94);
  line-height:1.65;
}

.data-landing__pillars{
  list-style:none; padding:0;
  margin:18px auto 22px;
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  max-width:980px;
}

.data-landing__pillar{
  position:relative;
  border-radius:16px; padding:16px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 28px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
  animation: dl-pillarPulse 7s ease-in-out infinite;
}

.data-landing__pillar::after{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  box-shadow: 0 0 18px 4px rgba(var(--dl-cyan), .12);
  animation: dl-pillarGlow 8s ease-in-out infinite;
}

.data-landing__pillar:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.10);
  border-color: rgba(var(--dl-cyan), .55);
  filter: saturate(1.06) contrast(1.04);
}

.data-landing__cta{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:6px;
}

.data-landing__btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 18px; border-radius:12px; text-decoration:none; color: rgb(255,255,255);
  border:1px solid rgba(255,255,255,.18);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.data-landing__btn--primary{ background: rgba(255,255,255,.14); }
.data-landing__btn--ghost{ background: rgba(0,0,0,0); border-color: rgba(255,255,255,.22); }
.data-landing__btn:hover{ transform: translateY(-2px); }
.is-disabled, .is-disabled:hover{ opacity:.7; cursor:default; transform:none; }

@keyframes dl-panelLift{
  0%,100%{ box-shadow: 0 26px 64px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.10); }
  50%    { box-shadow: 0 32px 74px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.11); }
}

@keyframes dl-shimmer{
  0%  { transform: translate(-60%, -50%) translateX(-120%); opacity: 0; }
  30% { opacity:.75; }
  70% { opacity:.75; }
  100%{ transform: translate(-60%, -50%) translateX(120%);  opacity: 0; }
}

@keyframes dl-pillarPulse{
  0%,100%{ filter: brightness(1) saturate(1); }
  50%    { filter: brightness(1.06) saturate(1.08); }
}

@keyframes dl-pillarGlow{
  0%,100%{ box-shadow: 0 0 18px 4px rgba(var(--dl-cyan), .12); }
  50%    { box-shadow: 0 0 26px 6px rgba(var(--dl-cyan), .22); }
}

@keyframes dl-bgDrift{
  0%   { background-position: 50% 40%, 50% 50%, 0% 0%, 0% 0%; transform: scale(1); }
  100% { background-position: 48% 44%, 52% 54%, 0% 0%, 0% 0%; transform: scale(1.015); }
}

@media (max-width: 980px){
  .data-landing{ padding:64px 0; }
  .data-landing__pillars{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
}

@media (max-width: 640px){
  .data-landing{ padding:48px 0; }
  .data-landing__wrap{ padding:24px 18px; border-radius:18px; }
  .data-landing__pillars{ grid-template-columns: 1fr; }
}

.data-landing{
  position: relative;
  padding: 84px 0;
  isolation: isolate;
  z-index: 0;
  border-radius: 24px;
  overflow: hidden;
}

.data-landing__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 1;
  filter: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(var(--dl-cyan), .10), rgba(0,0,0,0)),
    linear-gradient(135deg, rgba(var(--dl-lime), .28) 0%, rgba(var(--dl-emerald), .44) 36%, rgba(var(--dl-forest), .66) 100%),
    repeating-linear-gradient(0deg, rgba(var(--dl-ink), var(--dl-grid-op)) 0 1px, rgba(0,0,0,0) 1px 28px),
    repeating-linear-gradient(90deg, rgba(var(--dl-ink), var(--dl-grid-op)) 0 1px, rgba(0,0,0,0) 1px 28px);
  background-size: 120% 120%, 140% 140%, 100% 100%, 100% 100%;
  animation: dl-bgDrift 18s ease-in-out infinite alternate;
  transform: translateZ(0);
}

.data-landing__wrap{
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 28px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(var(--dl-emerald), var(--dl-panel-a1)) 0%, rgba(var(--dl-forest), var(--dl-panel-a2)) 55%, rgba(var(--dl-emerald), var(--dl-panel-a3)) 100%);
  box-shadow: 0 26px 64px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.10);
  color: rgb(255,255,255);
  animation: dl-panelLift 10s ease-in-out infinite;
}

.data-landing{
  position: relative;
  padding: 84px 0;
  isolation: isolate;
  z-index: 0;
  border-radius: 24px;
  overflow: hidden;
  background-color: rgb(12,52,36);
}

.data-landing__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 1;
  filter: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(60,210,255,.10), rgba(0,0,0,0)),
    linear-gradient(135deg, rgba(198,238,110,.28) 0%, rgba(24,124,82,.44) 36%, rgba(12,52,36,.66) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,0) 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,0) 1px 28px),
    linear-gradient(180deg, rgb(24,124,82) 0%, rgb(12,52,36) 100%);
  background-size: 120% 120%, 140% 140%, 100% 100%, 100% 100%, 100% 100%;
  animation: dl-bgDrift 18s ease-in-out infinite alternate;
  transform: translateZ(0);
  will-change: background-position, transform;
}

.data-landing h1,
.data-landing h2,
.data-landing h3,
.data-landing h4,
.data-landing h5,
.data-landing h6,
.data-landing__title,
.data-landing__pillar strong {
  color: rgb(255,255,255);
}

.data-landing__pillar em {
  color: rgba(255,255,255,.94);
}

/* ==== Corner-bleed fix for Data section ==== */
.data-landing{
  border-radius: 0 !important;   /* full-width section stays square */
  overflow: hidden;              /* keep bg layers clipped */
}

.data-landing__bg{
  border-radius: 0 !important;   /* match the outer */
  background-clip: padding-box;  /* stops sub-pixel halo on some GPUs */
}

/* Keep the nice rounded panel INSIDE the section */
.data-landing__wrap{
  border-radius: 24px !important;
}



.header{
  --nav-h: 68px;
  --brand-h: 64px;
}

.header.glass-nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(135deg, #0d5e3d 0%, #1a9b68 50%, #4ade80 100%);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.header .container.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 18px;
  max-width: 1320px;
  margin: 0 auto;
}

.header .brand{
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.header .brand img{
  height: var(--brand-h);
  width: auto;
  display: block;
}

.header .burger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.14);
  color: #0a0a0a;
  font-size: 20px;
  line-height: 1;
}

/* Flyout panel */
.nav-panel{
  position: fixed;
  top: calc(var(--nav-h) + 10px);
  right: 16px;
  left: auto;
  width: min(92vw, 420px);
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(13,94,61,0.96) 0%, rgba(26,155,104,0.96) 50%, rgba(74,222,128,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
  display: none;
}

.nav-open .nav-panel{
  display: block;
}

.navlinks{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.navlinks a{
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: #0a0a0a;
  font-weight: 700;
  font-size: 0.96rem;
  border-radius: 10px;
  border: 1px solid transparent;
}

.navlinks a:hover{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.28);
}

.nav-contact{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.18);
}

.nav-contact a{
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: #0a0a0a;
  font-weight: 700;
  font-size: 0.96rem;
  border-radius: 10px;
  border: 1px solid transparent;
}

.nav-contact a:hover{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.28);
}

/* Desktop keeps same minimal header; logo slightly larger */
@media (min-width: 980px){
  .header{ --nav-h: 72px; --brand-h: 68px }
}

.header .burger{
  color:#fff;
  border-color:rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.12);
}

.nav-panel{
  width:min(86vw,320px);
  padding:12px;
  border-radius:14px;
}

.navlinks a,
.nav-contact a{
  padding:9px 11px;
  font-size:.94rem;
}

.nav-panel {
  position: fixed;
  right: 16px;
  top: 68px;
  width: min(86vw, 320px);
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0d5e3d 0%, #1a9b68 50%, #4ade80 100%);
  color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  display: none;
  z-index: 9999;
}

.nav-panel a,
.nav-panel .navlinks a,
.nav-panel .nav-contact a {
  color: #fff;
}

.nav-panel a:hover,
.nav-panel .navlinks a:hover,
.nav-panel .nav-contact a:hover {
  color: #fff;
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.32);
}

/* Don’t ever show a top-level navlinks bar outside the panel */
.header > .navlinks { display: none !important; }

/* Ensure panel links are white */
.nav-panel .navlinks a { color:#fff; }

/* Perfectly centered burger bars (no glyph) */
.header .burger{
  position: relative;
  font-size: 0;                 /* hide the ☰ glyph’s metrics */
  line-height: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.14);
  color: transparent;           /* belt + suspenders */
}

/* The three bars: one element, two box-shadows */
.header .burger::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;                  /* bar length */
  height: 2px;                  /* bar thickness */
  background: #fff;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  box-shadow:
    0 -6px 0 #fff,              /* top bar */
    0  6px 0 #fff;              /* bottom bar */
}

/* Micro polish */
.header .burger:hover{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.38);
}
.header .burger:focus-visible{
  outline: 2px solid rgba(255,255,255,0.75);
  outline-offset: 2px;
}

/* Make sure the button stays centered vertically in the header */
.header .container.nav{
  align-items: center !important;
  height: var(--nav-h);
}



.marquee-rows{overflow:hidden}
.marquee-row{position:relative;overflow:hidden}
.marquee-track{display:flex;align-items:center;gap:48px;will-change:transform;transform:translate3d(0,0,0)}
.marquee-track img{display:block;height:96px;width:auto;object-fit:contain;backface-visibility:hidden;image-rendering:auto}
@media (max-width:768px){
  .marquee-track{gap:32px}
  .marquee-track img{height:72px}
}
@keyframes marqueeSlide{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--shift,-50%),0,0)}}

.marquee-track{gap:56px}
.marquee-track img{height:clamp(96px,10vw,140px)}
@media (max-width:768px){
  .marquee-track{gap:40px}
  .marquee-track img{height:clamp(80px,14vw,110px)}
}


:root {
  --font-headline: 'Times New Roman', Times, serif;
  --font-body: 'Montserrat', sans-serif;
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.6;
  color: #1a1a1a;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0c0c0c;
}

strong, b {
  font-family: var(--font-body);
  font-weight: 700;
}

/* Remove bullets, keep spacing consistent */
#services .service-card .svc-bullets{
  list-style: none;
  padding-left: 0;
}

#services .service-card .svc-bullets li::before{
  display: none;
}

#services .service-card .svc-bullets li{
  padding-left: 0;
}

/* ---- Scroll-reveal base (cheap) ---- */
:root { --reveal-distance: 20px; }

[data-reveal]{
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    transform .60s cubic-bezier(.22,1,.36,1),
    opacity  .50s ease-out;
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, opacity;
}

[data-reveal].is-in{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Optional tiny overshoot */
[data-reveal].is-in.reveal--bounce{
  animation: revealBounce .70s cubic-bezier(.22,1,.36,1) both;
}
@keyframes revealBounce{
  0%   { transform: translate3d(0, var(--reveal-distance), 0); opacity: 0; }
  60%  { transform: translate3d(0, -6px, 0);                opacity: 1; }
  100% { transform: translate3d(0, 0, 0); }
}

/* Stagger helper */
[data-reveal-stagger] > * { --reveal-delay: calc(var(--reveal-step, .06s) * var(--i, 0)); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ transition: none !important; transform: none !important; opacity: 1 !important; }
  [data-reveal].is-in.reveal--bounce{ animation: none !important; }
}

/* Section shell + background */
.expertise {
  position: relative;
  isolation: isolate;
  padding: 64px 0 80px;
  background: transparent;
}
.expertise-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#expertiseGrid {
  display: block;
  width: 100%;
  height: 100%;
}

/* Subtle darkening over the animated grid so cards pop */
.expertise-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(0,0,0,.22), rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.32));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Foreground content */
.expertise__wrap{
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 18px;
}

/* (Your existing blurb/grid/card styles can remain) */

/* ---------- Scroll reveal basics (if not already in your CSS) ---------- */
:root { --reveal-distance: 26px; }
[data-reveal]{
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(.98);
  filter: blur(2px);
  transition:
    transform .70s cubic-bezier(.22,1,.36,1),
    opacity  .60s ease-out,
    filter   .60s ease-out;
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, opacity, filter;
}
[data-reveal].is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
}
[data-reveal-stagger] > * { --reveal-delay: calc(var(--reveal-step, .06s) * var(--i, 0)); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

@media (max-width: 768px){
  .expertise__grid{
    display: none !important;
  }
  .expertise__blurb{
    margin-bottom: 64px;
  }
}

/* Legacy quote card – tighter gold edge */
.section.has-canvas.legacy-cinema .legacy-quote{
  background: linear-gradient(135deg,#cfa34a 0%,#f5d36b 35%,#ffd87d 65%,#f2b93b 100%) !important;
  color:#2b1b00;
  font-family:"Georgia",serif;
  font-size:1.1rem;
  line-height:1.6;
  border-radius:18px;
  padding:14px 30px;
  box-shadow:0 8px 24px rgba(0,0,0,.25), inset 0 0 8px rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.18);
  text-shadow:0 1px 2px rgba(255,255,255,.4);
  position:relative;
  overflow:hidden;
}

/* Neutralize any old white panel styles */
.section.has-canvas.legacy-cinema .legacy-quote,
.section.has-canvas.legacy-cinema .legacy-quote *{
  background-color:transparent !important;
}

/* Typography */
.legacy-quote-mark{display:block;font-weight:700;letter-spacing:.5px;margin-bottom:10px;text-transform:uppercase;font-size:.95rem;color:rgba(60,35,0,.9)}
.legacy-quote-text{font-style:italic;font-weight:500;color:#2e1a00;margin-bottom:12px}
.legacy-quote-author{font-weight:700;color:rgba(50,30,0,.9);text-align:right;font-size:1rem}

/* Gold frame (now thinner top/bottom padding for tighter look) */
.legacy-stack{
  display:inline-block;
  background:linear-gradient(135deg,#cfa34a 0%,#f5d36b 35%,#ffd87d 65%,#f2b93b 100%);
  border-radius:12px;
  padding:2px 28px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
}


/* Smooth scroll-up reveal animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s cubic-bezier(.25, .1, .25, 1),
    transform 0.9s cubic-bezier(.25, .1, .25, 1);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optional staggered child animation */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.9s cubic-bezier(.25, .1, .25, 1),
    transform 0.9s cubic-bezier(.25, .1, .25, 1);
}

[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.footer-address {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  margin-top: 6px;
  gap: 6px;
  font-weight: 500;
}

.footer-pin {
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.hero-video {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
}
.hero-video-wrap {
  position: relative;
  min-height: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}
.hero-video-bg::-webkit-media-controls {
  display: none !important;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.10) 45%, rgba(0,0,0,.16) 100%);
}
.hero-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-data: reduce) {
  .hero-video-bg {
    display: none;
  }
}