:root{
  --le-navy:#071e3c;
  --le-navy-2:#0a2a50;
  --le-blue:#176cff;
  --le-cyan:#55b4ff;
  --le-ink:#0d1d33;
  --le-muted:#5e6c7f;
  --le-line:#e5ebf2;
  --le-soft:#f4f8fc;
  --le-white:#ffffff;
  --le-radius:22px;
  --le-shadow:0 18px 60px rgba(5,25,55,.12);
  --le-max:1240px;
}

.le-project-page,
.le-project-page *{box-sizing:border-box}

.le-project-page{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--le-ink);
  background:var(--le-white);
  line-height:1.65;
  overflow:hidden;
}

.le-project-page img{display:block;width:100%;max-width:100%}
.le-project-page a{color:inherit}
.le-container{width:min(var(--le-max),calc(100% - 48px));margin:0 auto}
.le-section{padding:96px 0}
.le-section--white{background:#fff}
.le-section--soft{background:var(--le-soft)}
.le-section--navy{
  background:
    radial-gradient(circle at 82% 20%,rgba(38,112,255,.18),transparent 30%),
    linear-gradient(135deg,var(--le-navy),var(--le-navy-2));
  color:#fff
}

.le-eyebrow{
  margin:0 0 16px;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800;
  color:#7bb8ff
}
.le-eyebrow--blue{color:var(--le-blue)}
.le-project-page h1,.le-project-page h2,.le-project-page h3{
  line-height:1.08;
  letter-spacing:-.035em;
  margin:0
}
.le-project-page h1{font-size:clamp(3rem,5.7vw,5.8rem);max-width:1020px}
.le-project-page h2{font-size:clamp(2rem,3.2vw,3.7rem);max-width:820px;margin-bottom:24px}
.le-project-page h3{font-size:1rem}
.le-project-page p{margin:0 0 18px}
.le-project-page p:last-child{margin-bottom:0}

/* HERO */
.le-hero{
  position:relative;
  min-height:86vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#06172f;
  color:#fff
}
.le-hero__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.le-hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,13,28,.90) 0%,rgba(3,13,28,.64) 40%,rgba(3,13,28,.12) 78%),
    linear-gradient(0deg,rgba(3,13,28,.48),transparent 45%)
}
.le-hero__content{
  position:relative;
  z-index:1;
  padding:148px 0 74px
}
.le-hero__meta{
  font-weight:650;
  letter-spacing:.01em;
  margin:20px 0 18px
}
.le-hero__intro{
  max-width:720px;
  font-size:1.1rem;
  color:rgba(255,255,255,.88)
}
.le-scroll-link{
  display:inline-block;
  margin-top:30px;
  text-decoration:none;
  font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:5px
}

/* BASE GRIDS */
.le-grid{display:grid;gap:64px;align-items:start}
.le-grid--overview{grid-template-columns:1.04fr .96fr}
.le-grid--scope{grid-template-columns:1.18fr .82fr}
.le-grid--solution{grid-template-columns:.88fr 1.12fr}
.le-grid--result{grid-template-columns:1.2fr .8fr;align-items:center}

/* FEATURE CARD */
.le-feature-card{
  margin:0;
  border-radius:var(--le-radius);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--le-shadow)
}
.le-feature-card img{aspect-ratio:16/10;object-fit:cover}
.le-feature-card figcaption{padding:27px 28px 30px;display:grid;gap:8px}
.le-feature-card figcaption strong{font-size:1.25rem;line-height:1.2}
.le-feature-card figcaption span:last-child{color:var(--le-muted)}
.le-mini-label{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--le-blue);
  font-weight:800
}

/* SERVICES */
.le-services{
  border-left:1px solid rgba(255,255,255,.18);
  padding-left:34px;
  display:grid;
  gap:4px
}
.le-service{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:12px;
  align-items:center;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.1)
}
.le-service span{color:#6dafff;font-size:.74rem;font-weight:800}
.le-service strong{font-size:1rem}

/* SOLUTION CARDS */
.le-solution-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}
.le-solution-card{
  border:1px solid var(--le-line);
  background:#fff;
  padding:24px;
  min-height:188px;
  border-radius:16px;
  transition:transform .25s ease,box-shadow .25s ease
}
.le-solution-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 44px rgba(12,35,66,.09)
}
.le-solution-card .le-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #cfe0ff;
  border-radius:50%;
  color:var(--le-blue);
  font-size:1.15rem;
  margin-bottom:18px
}
.le-solution-card h3{margin-bottom:8px}
.le-solution-card p{font-size:.9rem;color:var(--le-muted)}

/* SPLIT FEATURE */
.le-split-feature{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  background:#fff;
  border-radius:var(--le-radius);
  overflow:hidden;
  box-shadow:var(--le-shadow)
}
.le-split-feature__media img{
  height:100%;
  min-height:520px;
  object-fit:cover
}
.le-split-feature__content{
  padding:64px;
  align-self:center
}

/* SCALE */
.le-scale{padding:74px 0}
.le-scale-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16)
}
.le-scale-grid div{
  padding:34px 26px;
  border-right:1px solid rgba(255,255,255,.14)
}
.le-scale-grid div:last-child{border-right:0}
.le-scale-grid strong{
  display:block;
  font-size:clamp(2.15rem,3.7vw,4rem);
  line-height:1;
  margin-bottom:10px
}
.le-scale-grid span{
  color:rgba(255,255,255,.72);
  font-size:.9rem
}

/* FORMAT */
.le-heading-row{
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:end;
  margin-bottom:34px
}
.le-heading-row__text{max-width:480px;color:var(--le-muted)}
.le-heading-row--center{align-items:center}
.le-format-grid{
  display:grid;
  grid-template-columns:1.4fr .85fr;
  gap:20px
}
.le-format-card{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:18px;
  background:#071e3c
}
.le-format-card img{
  height:100%;
  min-height:430px;
  object-fit:cover;
  transition:transform .6s ease
}
.le-format-card:hover img{transform:scale(1.02)}
.le-format-card figcaption{
  position:absolute;
  left:18px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:rgba(5,18,40,.82);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  border-radius:999px
}
.le-format-card figcaption span{font-size:.78rem;color:rgba(255,255,255,.75)}
.le-format-card figcaption strong{font-size:.9rem}

/* STORY */
.le-story-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.le-story-grid figure{margin:0}
.le-story-grid img{
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:16px
}
.le-story-grid figcaption{
  padding-top:15px;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:8px
}
.le-story-grid figcaption span{color:var(--le-blue);font-weight:800}
.le-story-grid figcaption small{
  grid-column:2;
  color:var(--le-muted);
  margin-top:3px
}

/* KPI */
.le-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(255,255,255,.14);
  border-radius:18px;
  overflow:hidden
}
.le-kpis div{
  background:rgba(255,255,255,.04);
  padding:28px 18px;
  text-align:center;
  display:grid;
  align-content:center;
  gap:5px
}
.le-kpis strong{font-size:1.35rem;line-height:1.2}
.le-kpis span{font-size:.82rem;color:rgba(255,255,255,.72)}

/* RELATED */
.le-text-link{text-decoration:none;font-weight:800;color:var(--le-blue)}
.le-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.le-related-card{border-top:1px solid var(--le-line);padding-top:18px}
.le-related-card__placeholder{
  aspect-ratio:16/9;
  border-radius:16px;
  margin-bottom:18px;
  padding:24px;
  display:flex;
  align-items:flex-end;
  color:#fff;
  font-weight:800;
  background:
    radial-gradient(circle at 85% 30%,rgba(65,144,255,.5),transparent 26%),
    linear-gradient(135deg,#0a2446,#0e5bb6)
}
.le-related-card h3{font-size:1.15rem;margin-bottom:6px}
.le-related-card p{font-size:.9rem;color:var(--le-muted)}

/* CTA */
.le-cta{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 70% 20%,rgba(31,104,255,.35),transparent 30%),
    linear-gradient(135deg,#06172f,#031025);
  color:#fff;
  padding:78px 0
}
.le-cta__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px
}
.le-cta h2{margin-bottom:12px}
.le-cta p{color:rgba(255,255,255,.76)}
.le-button{
  display:inline-flex;
  align-items:center;
  gap:28px;
  background:#fff;
  color:var(--le-navy)!important;
  text-decoration:none;
  font-weight:800;
  padding:16px 22px;
  border-radius:999px;
  white-space:nowrap
}
.le-button span{color:var(--le-blue)}

/* REVEAL */
.le-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease
}
.le-reveal.is-visible{
  opacity:1;
  transform:none
}

/* RESPONSIVE */
@media (max-width:980px){
  .le-section{padding:72px 0}
  .le-grid--overview,
  .le-grid--scope,
  .le-grid--solution,
  .le-grid--result,
  .le-split-feature{
    grid-template-columns:1fr
  }
  .le-solution-cards{grid-template-columns:repeat(2,1fr)}
  .le-services{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.18);
    padding-left:0;
    padding-top:16px
  }
  .le-split-feature__media img{min-height:0;max-height:700px}
  .le-split-feature__content{padding:42px}
  .le-story-grid,.le-related-grid{grid-template-columns:1fr 1fr}
  .le-scale-grid{grid-template-columns:repeat(2,1fr)}
  .le-scale-grid div:nth-child(2){border-right:0}
  .le-scale-grid div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
  .le-format-grid{grid-template-columns:1fr}
  .le-heading-row,.le-cta__inner{
    align-items:flex-start;
    flex-direction:column
  }
}

@media (max-width:680px){
  .le-container{width:min(var(--le-max),calc(100% - 30px))}
  .le-section{padding:58px 0}
  .le-hero{min-height:78vh}
  .le-hero__content{padding:110px 0 48px}
  .le-hero__overlay{
    background:
      linear-gradient(0deg,rgba(4,15,31,.9),rgba(4,15,31,.2)),
      linear-gradient(90deg,rgba(4,15,31,.58),transparent)
  }
  .le-hero__intro{font-size:1rem}
  .le-solution-cards,
  .le-story-grid,
  .le-related-grid,
  .le-kpis,
  .le-scale-grid{
    grid-template-columns:1fr
  }
  .le-scale-grid div{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.14)
  }
  .le-scale-grid div:last-child{border-bottom:0}
  .le-split-feature__content{padding:30px}
  .le-heading-row{margin-bottom:24px}
  .le-format-card img{min-height:300px}
}

@media (prefers-reduced-motion:reduce){
  .le-reveal{opacity:1;transform:none;transition:none}
  .le-format-card img,.le-solution-card{transition:none}
}

/* Integration with the existing LocalEdge header and footer. */
.le-project-page{color-scheme:light}.le-project-page h1,.le-project-page h2,.le-project-page h3{font-weight:700}.le-project-page figure{margin:0}.le-project-page img{height:auto}.le-project-page .le-hero__media{height:100%}.le-project-page .le-feature-card img,.le-project-page .le-story-grid img{height:auto}.le-project-page .le-split-feature__media img{height:100%}.le-project-page .le-mosaic__item img,.le-project-page .le-format-card img{height:100%}.le-project-page .le-service{grid-template-columns:1fr}.le-project-page .le-story-grid figcaption{grid-template-columns:1fr}.le-project-page .le-story-grid figcaption small{grid-column:1}.le-project-page .le-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.le-project-page .le-related-card a{display:block;text-decoration:none}.le-project-page .le-related-card img{aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin-bottom:18px}.le-project-page .le-related-card a:hover h3{color:var(--le-blue)}.le-project-page .le-related-card .le-mini-label{display:block;margin-bottom:8px}.le-project-page .le-expertise-link{margin-top:25px}.le-project-page .le-hero__meta{margin-top:20px}.le-project-page .le-solution-card{min-width:0;padding:20px}.le-project-page .le-solution-card h3{overflow-wrap:anywhere}.le-project-page .le-grid>*{min-width:0}.le-project-page a:focus-visible{outline:3px solid #176cff;outline-offset:6px}
@media(max-width:680px){.le-project-page h1{font-size:clamp(2.3rem,9vw,3.4rem)}.le-project-page .le-related-grid{grid-template-columns:1fr}.le-project-page .le-hero__content{padding-top:75px}.le-project-page .le-split-feature__media img{height:auto}.le-project-page .le-kpis strong{overflow-wrap:anywhere}}
