/* =========================================================
   BIGFOOT MEDIA FOUNDRY
   HOMEPAGE — HERO OVERLAY BUILD
   ========================================================= */

:root{
  --lime:#A7FF00;
  --black:#050505;
  --black-soft:#0A0A0A;
  --charcoal:#161616;
  --white:#FFFFFF;
  --gray:#C9C9C9;
  --line:#303030;
  --max:1540px;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
}

.wrap{
  width:min(92%,var(--max));
  margin-inline:auto;
}

h1,h2,h3,p{
  margin-top:0;
}

h1,h2,h3,.button,.kicker{
  text-transform:uppercase;
}

h2{
  margin-bottom:20px;
  font-size:clamp(2.8rem,5vw,4.9rem);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:900;
}

h3{
  margin-bottom:10px;
}

.kicker{
  margin-bottom:14px;
  color:var(--lime);
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.14em;
}

.center{
  text-align:center;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:#050505;
  border-bottom:1px solid #202020;
}

.nav-row{
  min-height:84px;
  display:flex;
  align-items:center;
  gap:28px;
}

.logo-link{
  margin-right:auto;
}

.header-logo{
  height:64px;
  width:auto;
  max-width:none;
}

.main-nav{
  display:flex;
  gap:27px;
  align-items:center;
}

.main-nav a{
  color:#F2F2F2;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.main-nav a:hover,
.main-nav a.active{
  color:var(--lime);
}

.menu-button{
  display:none;
  border:0;
  background:none;
  color:#fff;
  font-size:1.5rem;
  cursor:pointer;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button{
  display:inline-flex;
  min-height:48px;
  padding:0 24px;
  align-items:center;
  justify-content:center;
  background:var(--lime);
  border:2px solid var(--lime);
  color:#050505;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.06em;
  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.button:hover{
  background:#fff;
  border-color:#fff;
  transform:translateY(-2px);
}

.button-small{
  min-height:42px;
  padding:0 18px;
}

.button-outline{
  background:rgba(0,0,0,.25);
  border-color:#fff;
  color:#fff;
}

.button-outline:hover{
  background:#fff;
  color:#050505;
}


/* =========================================================
   HERO
   Uses bigfoot-hero-image.png exactly as supplied.
   Overlay coordinates are based on the actual 1820 × 832 image.
   ========================================================= */

.hero{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#000;
}

.hero-image{
  display:block;
  width:100%;
  height:auto;
}

/*
  The billboard face in the source image runs approximately
  from x=400 to x=1575 and y=15 to y=820.

  This overlay is positioned as a percentage of the complete
  source image so everything scales together.
*/
.hero-overlay{
  position:absolute;
  left:20.4%;
  top:2.8%;
  width:67.8%;
  height:92%;
  z-index:2;
}

.hero-copy-block{
  position:absolute;
  left:3.4%;
  top:3.2%;
  width:71%;
}

.hero-wordmark{
  width:40%;
  max-width:360px;
  margin-bottom:2.1%;
}

.hero-kicker{
  margin:0 0 2.5%;
  color:var(--lime);
  font-size:clamp(.72rem,1vw,1.1rem);
  font-weight:900;
  letter-spacing:.06em;
}

.hero-headline{
  margin:0 0 3%;
  font-size:clamp(2.8rem,4.45vw,5.5rem);
  line-height:.9;
  letter-spacing:-.04em;
  font-weight:900;
}

.hero-headline span{
  display:block;
  color:var(--lime);
  white-space:normal;
}

.hero-headline .hero-white{
  color:#fff;
}

.hero-description{
  width:82%;
  max-width:1200px;
  margin:0 0 2%;
  color:#fff;
  font-size:clamp(1rem,2vw,2rem);
  line-height:1;
  font-weight:500;
}

.hero-buttons{
  display:flex;
  gap:18px;
  margin-bottom:2.5%;
}

.hero-buttons .button{
  min-height: 75px;
  padding: 0 48px;
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.hero-locations{
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 2vw, 2rem);
  line-height: 1.3;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-locations span{
  color:var(--lime);
  padding:0 6px;
}

.lime-divider{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  height:9px;
  background:var(--lime);
}


/* =========================================================
   GENERIC SECTIONS
   ========================================================= */

.section{
  padding:140px 0;
}

.section-black{
  background:#050505;
}

.section-texture{
  background:
    radial-gradient(circle at 10% 20%,rgba(255,255,255,.035),transparent 22%),
    radial-gradient(circle at 85% 70%,rgba(255,255,255,.025),transparent 25%),
    linear-gradient(135deg,#0D0D0D 0%,#181818 50%,#0A0A0A 100%);
}

.section-heading{
  max-width:1040px;
  margin:0 auto 66px;
}

.section-heading h2{
  font-size:clamp(2.5rem,4.3vw,4.15rem);
}

.section-intro{
  max-width:940px;
  margin:0 auto;
  color:#D0D0D0;
  font-size:1.08rem;
}


/* =========================================================
   WHY MOBILE ADVERTISING
   ========================================================= */

.why-section{
  padding-top:155px;
  padding-bottom:160px;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.feature-card{
  min-height:520px;
  padding:42px 40px 46px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.feature-visual{
  height:250px;
  margin-bottom:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  color:var(--lime);
}

.wa-map{
  width:98%;
  height:220px;
}

.prosser-pin{
  position:absolute;
  left:69%;
  top:67%;
  width:42px;
  height:42px;
  border:4px solid var(--lime);
  border-radius:50% 50% 50% 0;
  transform:translate(-50%,-50%) rotate(-45deg);
}

.prosser-pin span{
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--lime);
  transform:translate(-50%,-50%);
}

.trailer-feature img{
  width:100%;
  max-width:420px;
  height:235px;
  object-fit:contain;
}

.flexibility-visual svg{
  width:205px;
  height:205px;
}

.feature-number{
  display:block;
  margin-bottom:5px;
  color:var(--lime);
  font-size:.9rem;
  font-weight:900;
  letter-spacing:.1em;
}

.feature-card h3{
  color:#fff;
  font-size:1.3rem;
}

.feature-card p{
  margin-bottom:0;
  color:#C8C8C8;
  font-size:1rem;
  line-height:1.55;
}


/* =========================================================
   PROCESS
   ========================================================= */

.process-section{
  padding-top:126px;
  padding-bottom:126px;
}

.process-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:120px;
  align-items:center;
}

.process-title h2{
  margin-bottom:0;
  font-size:clamp(3.7rem,5.6vw,6rem);
  line-height:.92;
}

.process-title h2 span{
  color:var(--lime);
}

.process-copy p{
  margin-bottom:30px;
  color:#fff;
  font-size:clamp(1.55rem,2.25vw,2.3rem);
  line-height:1.28;
}

.process-button{
  font-size:.9rem;
}


/* =========================================================
   LOCAL VISIBILITY
   ========================================================= */

.local-section{
  background:var(--lime);
  color:#050505;
  padding:126px 0;
}

.local-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:120px;
  align-items:center;
}

.local-heading h2{
  margin-bottom:0;
  color:#050505;
  font-size:clamp(3.8rem,5.8vw,6.1rem);
  line-height:.92;
}

.local-copy p{
  margin-bottom:38px;
  color:#111;
  font-size:clamp(1.55rem,2.2vw,2.25rem);
  line-height:1.3;
}

.route-lines{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  text-align:center;
  color:#050505;
  font-size:clamp(1.75rem,2.55vw,2.7rem);
  font-weight:900;
  line-height:1.2;
  text-transform:uppercase;
}

.route-lines span{
  padding:0 10px;
}


/* =========================================================
   SOCIAL
   ========================================================= */

.social-section{
  padding-top:142px;
  padding-bottom:148px;
}

.social-heading{
  margin-bottom:76px;
}

.social-heading h2{
  font-size:clamp(2.9rem,4.4vw,4.8rem);
  white-space:normal;
}

.social-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.social-card{
  min-height:300px;
  padding:38px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  border-right:1px solid var(--line);
}

.social-card:last-child{
  border-right:0;
}

.social-icon{
  width:104px;
  height:104px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:5px solid var(--lime);
  border-radius:50%;
  color:var(--lime);
  font-size:4.2rem;
  font-weight:700;
  line-height:1;
}

.instagram-icon{
  position:relative;
  border-radius:18px;
}

.instagram-icon::before{
  content:"";
  width:29px;
  height:29px;
  border:4px solid var(--lime);
  border-radius:50%;
}

.instagram-icon::after{
  content:"";
  position:absolute;
  top:12px;
  right:12px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--lime);
}

.threads-icon{
  font-size:2.7rem;
}

.social-card>span{
  color:var(--lime);
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.social-card strong{
  color:#fff;
  font-size:1.28rem;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta{
  padding:132px 0 142px;
  overflow:hidden;
}

.final-cta-inner{
  text-align:center;
}

.move-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-bottom:22px;
}

.move-arrow{
  color:var(--lime);
  font-size:3rem;
  font-weight:900;
  letter-spacing:-.12em;
}

.move-row h2{
  margin:0;
  color:var(--lime);
  font-size:clamp(3.1rem,5vw,5.2rem);
  font-style:italic;
  white-space:normal;
}

.final-cta p{
  max-width:1050px;
  margin:0 auto 34px;
  color:#fff;
  font-size:clamp(1.7rem,2.45vw,2.55rem);
  line-height:1.3;
}

@keyframes headline-run{
  0%{transform:translateX(0)}
  22%{transform:translateX(145vw)}
  23%{transform:translateX(-145vw)}
  72%{transform:translateX(6vw)}
  88%{transform:translateX(-1.5vw)}
  100%{transform:translateX(0)}
}

#moving-headline.run-motion{
  animation:headline-run 1.35s cubic-bezier(.4,0,.2,1) both;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  background:#030303;
  padding:50px 0 24px;
  color:#A6A6A6;
}

.footer-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.footer-logo{
  width:auto;
  height:96px;
  max-width:270px;
}

.footer-contact{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:14px 28px;
  font-size:.85rem;
  font-weight:700;
}

.footer-contact a:hover{
  color:var(--lime);
}

.footer-bottom{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid #242424;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:26px;
  color:#6F6F6F;
  font-size:.72rem;
}

.footer-bottom p{
  margin-bottom:0;
}

.footer-seo{
  max-width:700px;
  text-align:right;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

  .desktop-quote{
    display:none;
  }

  .menu-button{
    display:block;
  }

  .main-nav{
    display:none;
    position:absolute;
    top:84px;
    left:0;
    right:0;
    padding:10px 4%;
    flex-direction:column;
    gap:0;
    align-items:stretch;
    background:#050505;
    border-bottom:1px solid #242424;
  }

  .main-nav.open{
    display:flex;
  }

  .main-nav a{
    padding:14px 0;
    border-bottom:1px solid #202020;
  }

  .hero-overlay{
    left:21.5%;
    top:4.2%;
    width:66%;
  }

  .hero-headline{
    font-size:clamp(1.85rem,3.7vw,3.9rem);
  }

  .feature-grid,
  .social-grid{
    grid-template-columns:1fr;
  }

  .social-card{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }

  .process-grid,
  .local-grid{
    grid-template-columns:1fr;
    gap:44px;
  }

  .local-copy{
    text-align:center;
  }

  .move-row h2{
    white-space:normal;
  }
}


@media(max-width:700px){

  .nav-row{
    min-height:74px;
  }

  .header-logo{
    height:52px;
  }

  .main-nav{
    top:74px;
  }

  /*
    On narrow screens the billboard face is too small for the
    full desktop composition. The hero image remains intact,
    and the overlay scales down with it.
  */
  .hero-overlay{
    left:21%;
    top:4%;
    width:67%;
    height:90%;
  }

  .hero-copy-block{
  position: absolute;
  left: 18%;
  top: 3.2%;
  width: 78%;
}

  .hero-wordmark{
    width:32%;
    margin-bottom:1%;
  }

  .hero-kicker{
    font-size:clamp(.35rem,1.2vw,.55rem);
    margin-bottom:.4%;
  }

  .hero-headline{
    margin-bottom:.8%;
    font-size:clamp(.92rem,4vw,1.8rem);
    line-height:.92;
  }

  .hero-description{
    width:78%;
    margin-bottom:1%;
    font-size:clamp(.32rem,1.08vw,.5rem);
  }

  .hero-buttons{
    gap:5px;
    margin-bottom:.8%;
  }

  .hero-buttons .button{
    min-height:24px;
    padding:0 8px;
    border-width:1px;
    font-size:.4rem;
  }

  .hero-locations{
    font-size:clamp(.3rem,1vw,.48rem);
  }

  .hero-bigfoot{
    right:7%;
    top:25%;
    width:16%;
  }

  .section,
  .why-section,
  .process-section,
  .social-section{
    padding-top:86px;
    padding-bottom:86px;
  }

  .local-section{
    padding:96px 0;
  }

  .process-copy p,
  .local-copy p,
  .final-cta p{
    font-size:1.35rem;
  }

  .route-lines{
    font-size:1.45rem;
  }

  .move-arrow{
    display:none;
  }

  .footer-main,
  .footer-bottom{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .footer-contact{
    justify-content:center;
  }

  .footer-seo{
    text-align:center;
  }
}


@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    transition:none !important;
    animation:none !important;
  }

}


.final-cta .button{
  min-height:62px;
  padding:0 36px;
  font-size:1rem;
  letter-spacing:.07em;
}

@media(max-width:900px){
  .social-heading h2{
    white-space:normal;
  }
}
@media (min-width: 1101px) {
  .hero-copy-block {
    left: 15% !important;
    transform: none;
  }
}
.washington-visual {
  background-image: url("../images/wash-icon.pdf") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 90% 90% !important;
}

.flexibility-visual {
  background-image: url("../images/flex-icon.pdf") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 90% 90% !important;
}
/* =========================================
   REPLACEMENT FEATURE ICONS
   ========================================= */

/* Hide the existing Washington map and marker */
.washington-visual .wa-map,
.washington-visual .prosser-pin {
  display: none !important;
}

/* Replace with wash-icon.png */
.washington-visual {
  background-image: url("../images/wash-icon.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
}


/* Hide the existing Flexible Campaigns SVG */
.flexibility-visual svg {
  display: none !important;
}

/* Replace with flex-icon.png */
.flexibility-visual {
  background-image: url("../images/flex-icon.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
}
.process-title .green-text {
  color: #A7FF00 !important;
}
.route-lines {
  width: 100% !important;
  max-width: none !important;
  text-align: center;
}

.route-lines .route-line{
  display:block;
  white-space:normal;
  font-size:clamp(1.4rem,2.1vw,2.1rem);
  line-height:1.35;
  font-weight:900;
}
.social-section .kicker {
  display: none !important;
}
.social-heading {
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
  margin: 0 auto 70px !important;
}

.social-heading h2 {
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}
/* ========================================
   HELCIM PAY SECURELY BUTTON
======================================== */

.helcim-pay-form {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.helcim-pay-btn {
    display: inline-block;
    background: #A7FF00;
    color: #000;
    border: none;
    padding: 12px 22px;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
}

.helcim-pay-btn:hover {
    background: #fff;
}