/* =============================================================================
   G3 POWER — landing page supplement

   base.css is lifted verbatim from the live g3pwr.com, so the nav, buttons,
   trust dots, stat row, service cards and footer are the real components rather
   than lookalikes. base.css is NEVER edited — every override lives here.

   This file:
     1. neutralises the hero's scroll-scrub behaviour (we don't ship the 3.9 MB
        logo-scrub video on an ad landing page),
     2. overrides the base components that assume the marketing site's JS
        (stat row, nav, mobile menu), and
     3. adds the blocks the marketing site has no equivalent for —
        checklists, pills, photo placeholders, case cards and the estimate form.

   Load order matters: base.css first, then this. Because this file loads last,
   several rules below have to be re-declared inside the responsive block at the
   bottom — otherwise they'd beat base.css's own mobile rules and break phones.
   ============================================================================= */

/* --- hero: static instead of sticky/scrubbed ------------------------------ */

/* base.css sizes #hero at 130vh so the logo video has scroll runway to scrub
   against. We don't ship that video, so the extra 30vh was rendering as a dead
   navy band under every hero. */
#hero { height: auto; }

.hero-sticky {
  position: relative;
  top: auto;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh; /* iOS: accounts for the collapsing URL bar */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 48px 56px;
}
.hero-content { flex: 0 0 auto; width: 100%; }

/* Stat row. base.css hides .scroll-stat until the live site's scroll-scrub JS
   adds .visible, and absolutely positions the row at bottom:9% where it can
   collide with a long H1. Here it's a normal-flow grid under the hero copy and
   script.js reveals it on load. */
.hero-sticky .scroll-stats-row.hero-stats {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 26px;
  width: 100%;
  max-width: 800px;
  white-space: normal;
  margin-top: clamp(30px, 4.4vh, 52px);
  padding-top: clamp(20px, 3vh, 30px);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.hero-sticky .scroll-stat { text-align: left; }
.hero-sticky .scroll-stat-num { font-size: clamp(30px, 3.1vw, 44px); }
.hero-sticky .scroll-stat-label { font-size: 10.5px; letter-spacing: 1.6px; }

/* The page-specific H1 replaces the brand headline SVG. Ad message-match beats
   brand repetition here: the headline must echo the ad that was clicked, or
   quality score and conversion both suffer. */
.lp-h1 {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(40px, 5.6vw, 74px);
  line-height: .97;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0 0 14px;
  max-width: 15ch;
}
.lp-h1 .accent {
  background: linear-gradient(90deg, #8AC640, #A9DB63, #8AC640);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lp-shimmer 5s linear infinite;
}
@keyframes lp-shimmer { to { background-position: 200% center; } }

/* --- navbar --------------------------------------------------------------- */
/* The nav must never be see-through: content scrolling under a 0.95-opacity
   white bar reads as a rendering bug on a page someone paid to land on. */
#navbar {
  background-color: #FFFFFF;
  opacity: 1 !important;
  transition: box-shadow .25s ease, border-color .25s ease;
}
#navbar.is-scrolled {
  border-bottom-color: rgba(11,30,69,0.14);
  box-shadow: 0 6px 22px rgba(5,14,32,0.16);
}

/* --- generic landing sections --------------------------------------------- */
/* base.css only pads #services/#projects/#about/#contact horizontally, and
   .container carries no side padding — so every other section was running to
   the screen edge on a phone. */
.lp-section { padding: 76px 32px; }
.lp-section-alt { background: #07152E; }
.lp-light {
  background: #FFFFFF;
  color: #0B1E45;
}
.lp-light .section-title,
.lp-light .section-body { color: #0B1E45; }
.lp-light .section-body { opacity: .74; }

.lp-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* --- compact service tiles ------------------------------------------------ */
/* Scoped to #services on purpose: #why reuses .services-grid/.service-card with
   full descriptions, and index.html has its own card grid. An id-scoped selector
   beats every base.css rule (including its media queries) without touching either. */
#services .services-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  grid-auto-rows: auto;
}
#services .service-card {
  padding: 22px;
  min-height: 0;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  border-radius: 12px;
}
#services .service-card:hover {
  transform: translateY(-2px);
  border-color: rgba(138,198,64,0.42);
  box-shadow: 0 12px 26px rgba(0,0,0,0.28);
}
#services .service-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
#services .service-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 10px;
  margin-bottom: 0;
}
#services .service-icon svg { width: 20px; height: 20px; }
#services .service-title {
  font-size: 19px;
  line-height: 1.08;
  letter-spacing: .4px;
  margin-bottom: 0;
}
#services .service-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.58);
  margin-bottom: 0;
}

/* --- checklist ------------------------------------------------------------ */
.lp-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-check li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: rgba(255,255,255,.82);
  font-size: 16px;
  line-height: 1.55;
}
.lp-light .lp-check li { color: rgba(11,30,69,.8); }
/* A real check glyph. The old diagonal linear-gradient read as a slash through
   the box — i.e. the exact opposite of "yes, we do this". */
.lp-check li::before {
  content: '';
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 4px;
  border-radius: 5px;
  border: 1px solid rgba(138,198,64,.55);
  background-color: rgba(138,198,64,.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1.3 6.3l3.7 3.9L12.7 1.6' fill='none' stroke='%238AC640' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px auto;
}

/* --- pills ---------------------------------------------------------------- */
.lp-pills { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.lp-pills li {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.8);
  font-size: 14.5px;
}
.lp-light .lp-pills li {
  border-color: rgba(11,30,69,.16);
  color: rgba(11,30,69,.8);
  background: #fff;
}

/* --- photo placeholders --------------------------------------------------- */
/* The photo sections are commented out in the HTML until real job photos land
   in assets/. This stays so uncommenting restores the layout. */
.lp-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lp-photo {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.24);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px),
    #0E2450;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 16px;
}
.lp-photo b {
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8AC640;
}
.lp-photo span { font-size: 12.5px; color: rgba(255,255,255,.56); line-height: 1.45; }

/* A slot holding a real photo: no dashed frame, image fills and crops to 4:3.
   .lp-photo is a centring flex box, so the image needs its own sizing plus
   overflow clipping or it will overflow the rounded corners. */
.lp-photo--filled {
  padding: 0;
  border: 1px solid rgba(255,255,255,.10);
  background: #0E2450;
  overflow: hidden;
  margin: 0;
}
.lp-photo--filled picture { display: block; width: 100%; height: 100%; }
.lp-photo--filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  .lp-photo--filled:hover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-photo--filled img { transition: none; }
  .lp-photo--filled:hover img { transform: none; }
}

/* --- case study + "you're next" companion --------------------------------- */
.lp-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 860px) minmax(240px, 1fr);
  gap: 24px;
  align-items: start;
}
.lp-work-main { display: grid; gap: 24px; min-width: 0; }

.lp-case {
  background: #0E2450;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 28px;
}
.lp-case h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  margin: 0 0 14px;
  color: #fff;
}
.lp-case p { margin: 0 0 12px; color: rgba(255,255,255,.74); font-size: 15.5px; line-height: 1.6; }
.lp-case p:last-child { margin-bottom: 0; }
.lp-case strong { color: #8AC640; font-weight: 600; }

/* Site-walk CTA under the case studies. Someone who has just read proof of
   comparable work is as warm as they get before the form — the ask belongs
   here, not only at the bottom of the page. */
.lp-work-cta {
  margin: 40px 0 0;
  text-align: center;
}

.lp-next {
  background: linear-gradient(160deg, rgba(138,198,64,.15), rgba(138,198,64,.04));
  border: 1px solid rgba(138,198,64,.38);
  border-radius: 14px;
  padding: 26px 24px;
}
.lp-next-label {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8AC640;
  margin: 0 0 8px;
}
.lp-next h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 27px;
  line-height: 1.02;
  color: #fff;
  margin: 0 0 10px;
}
.lp-next p { color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.6; margin: 0 0 20px; }
.lp-next .btn-primary { display: block; text-align: center; }

/* --- estimate form -------------------------------------------------------- */
.lp-form-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; }
.lp-field { margin-bottom: 16px; }
.lp-field label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8AC640;
  margin-bottom: 7px;
}
.lp-field input,
.lp-field select,
.lp-field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 16px; /* 16px stops iOS Safari zooming the page on focus */
  transition: border-color .2s, background .2s;
}
.lp-field textarea { min-height: 108px; resize: vertical; }
.lp-field input:focus,
.lp-field select:focus,
.lp-field textarea:focus {
  outline: none;
  border-color: #8AC640;
  background: rgba(255,255,255,.07);
}
.lp-field select option { background: #07152E; color: #fff; }
.lp-req { color: #8AC640; }
.lp-note { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 14px; }
.lp-hp { position: absolute; left: -9999px; opacity: 0; }

.lp-aside { display: grid; gap: 14px; }
.lp-aside-row {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: #0E2450;
}
.lp-aside-row b {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8AC640;
  margin-bottom: 5px;
}
.lp-aside-row p { margin: 0; color: rgba(255,255,255,.78); font-size: 15px; }
.lp-aside-row a { color: #fff; text-decoration: none; font-weight: 600; }

.lp-status { margin-top: 14px; padding: 13px 16px; border-radius: 10px; font-size: 15px; display: none; }
.lp-status.ok  { display: block; background: rgba(138,198,64,.14); border: 1px solid rgba(138,198,64,.42); color: #fff; }
.lp-status.err { display: block; background: rgba(255,92,92,.12); border: 1px solid rgba(255,92,92,.4); color: #fff; }

/* --- light sections: where the customer acts ------------------------------- */
/* The assessment checklist and the estimate form sit on white — input happens
   on light, brand story stays dark. Brand green #8AC640 fails contrast on white
   for small text, so labels/eyebrows step down to a darker green there. */
.lp-light .section-label { color: #55801C; }
.lp-light .lp-field label { color: #4E7A19; }
.lp-light .lp-field input,
.lp-light .lp-field select,
.lp-light .lp-field textarea {
  border: 1px solid rgba(11,30,69,.18);
  background: #FFFFFF;
  color: #0B1E45;
}
.lp-light .lp-field input:focus,
.lp-light .lp-field select:focus,
.lp-light .lp-field textarea:focus {
  border-color: #6FA62C;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(138,198,64,.20);
}
.lp-light .lp-field select option { background: #FFFFFF; color: #0B1E45; }
.lp-light .lp-req { color: #4E7A19; }
.lp-light .lp-note { color: rgba(11,30,69,.55); }
.lp-light .lp-status.ok  { background: rgba(138,198,64,.18); border-color: rgba(110,150,40,.5); color: #14233F; }
.lp-light .lp-status.err { background: rgba(200,45,50,.08); border-color: rgba(200,45,50,.45); color: #8C1B20; }

/* The contact sidebar was written for the dark page — white text on white is
   invisible, so it needs its own light treatment alongside the form. */
.lp-light .lp-aside-row {
  background: #F4F6F9;
  border: 1px solid rgba(11,30,69,.12);
}
.lp-light .lp-aside-row b { color: #55801C; }
.lp-light .lp-aside-row p { color: rgba(11,30,69,.72); }
.lp-light .lp-aside-row a { color: #0B1E45; }
.lp-light .lp-aside-row a:hover { color: #55801C; }

/* --- CTA band ------------------------------------------------------------- */
.lp-cta {
  background: linear-gradient(120deg, #0B1E45 0%, #123068 60%, #0B1E45 100%);
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
  text-align: center;
  padding: 72px 32px;
}
.lp-cta .section-body { margin-left: auto; margin-right: auto; max-width: 620px; }
.lp-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }

/* --- reveal --------------------------------------------------------------- */
[data-reveal] { opacity: 0; transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); }
[data-reveal="up"]    { transform: translateY(26px); }
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* --- back to top ---------------------------------------------------------- */
.lp-top {
  position: fixed;
  right: 28px; bottom: 28px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: #8AC640;
  color: #050E20;
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
  z-index: 180;
  touch-action: manipulation;
}
.lp-top.is-shown { opacity: 1; pointer-events: auto; }
.lp-top:hover { transform: translateY(-3px); }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1099px) {
  #services .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .lp-photos { grid-template-columns: repeat(2, 1fr); }
  .lp-form-grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 980px) {
  .lp-work-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .lp-two { grid-template-columns: 1fr; gap: 34px; }
}

/* Same compound query base.css uses, so landscape phones stay in mobile layout.
   These re-declare the hero rules above — this file loads last, so without them
   the desktop hero would win inside base.css's own mobile block. */
/* The landscape clause is width-capped on purpose. Uncapped, it also matches
   display-scaled laptops (Windows scaling can put a 1280-wide window at ~590px
   CSS height), which silently forces the mobile layout on a desktop. */
@media (max-width: 768px), (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) {
  .hero-sticky { padding: 92px 20px 46px; }
  .hero-sticky .scroll-stats-row.hero-stats {
    grid-template-columns: 1fr 1fr;
    gap: 20px 14px;
    max-width: 100%;
    margin-top: 28px;
    padding-top: 22px;
  }
  .hero-sticky .scroll-stat { opacity: 1; transform: none; }
  .hero-sticky .scroll-stat-num { font-size: 28px; }

  /* base.css hides .nav-links on mobile and shows a separate .mobile-menu
     element the landing pages don't have, which left the hamburger inert. */
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 70px; left: 0; right: 0;
    background: #FFFFFF;
    padding: 8px 20px 20px;
    border-bottom: 1px solid rgba(11,30,69,.12);
    box-shadow: 0 18px 40px rgba(5,14,32,.18);
    z-index: 199;
  }
  .nav-links.open li { list-style: none; }
  .nav-links.open a {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid rgba(11,30,69,.08);
  }
  .nav-links.open .btn-nav {
    margin-top: 14px;
    text-align: center;
    border: 1.5px solid #6FA62C;
    padding: 13px 22px;
  }

  .lp-section,
  #services.lp-section { padding: 58px 20px; }
  .lp-cta { padding: 56px 20px; }
  .lp-work-main { gap: 18px; }
}

@media (max-width: 639px) {
  #services .services-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .lp-photos { grid-template-columns: 1fr; }
  .lp-h1 { font-size: clamp(32px, 9vw, 46px); max-width: 100%; }
}

@supports (padding: env(safe-area-inset-bottom)) {
  .lp-top {
    bottom: max(28px, env(safe-area-inset-bottom));
    right:  max(28px, env(safe-area-inset-right));
  }
}

@media (hover: none) {
  .lp-top:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .lp-h1 .accent { animation: none; }
  .scroll-stat { transition: none !important; }
}