/* ==========================================================================
   Wolf Transport — New Service Pages · Shared Stylesheet
   Brand DNA pulled from flagstafftransport.pro index.html / services.html
   Palette: dark forest green + gold (race-shop / trucking aesthetic)
   ========================================================================== */

:root{
  --green-dark:#0f1a0f;
  --green-panel:#1a2a1a;
  --green-mid:#2a3a2a;
  --green-light:#3a4a3a;
  --gold:#c9a84c;
  --gold-bright:#d9b85c;
  --white:#fff;
  --text:#e8e8e8;
  --muted:#aaa;
  --dim:#888;
  --border:#3a4a3a;
  --red:#e07a3a; /* Wolf orange accent */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--green-dark);
  color:var(--text);
  line-height:1.55;
  min-height:100vh;
}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-bright)}

/* URGENCY BANNER (kept for future seasonal pushes) */
.urgency-banner{
  background:linear-gradient(90deg,var(--red),#c95a2a);
  color:#fff;
  text-align:center;
  font-size:13px;
  font-weight:600;
  padding:8px 16px;
  letter-spacing:0.3px;
}
.urgency-banner strong{color:#ffe9c2}
.urgency-banner a{color:#fff;text-decoration:underline;margin-left:8px}

/* HEADER */
.site-header{background:var(--green-panel);border-bottom:1px solid var(--green-mid);position:sticky;top:0;z-index:100}
.site-header-inner{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand-mark{font-size:11px;letter-spacing:3px;color:var(--gold);font-weight:600;margin-bottom:4px}
.brand-name{font-size:18px;color:var(--white);font-weight:700;letter-spacing:-0.3px}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--text);font-size:14px;font-weight:500;opacity:0.85}
.nav a:hover{color:var(--gold);opacity:1}
.nav a.cta{background:var(--gold);color:var(--green-dark);padding:8px 14px;border-radius:6px;font-weight:700;opacity:1}
.nav a.cta:hover{background:var(--gold-bright);color:var(--green-dark)}
.nav a.active{color:var(--gold);opacity:1}
.hamburger{display:none;background:none;border:none;color:var(--gold);font-size:24px;cursor:pointer;padding:4px 8px}

/* SERVICES DROPDOWN */
.nav .dropdown{position:relative}
.nav .dropdown > .drop-toggle{
  background:none;border:none;color:var(--text);font-size:14px;font-weight:500;
  opacity:0.85;cursor:pointer;padding:0;font-family:inherit;display:inline-flex;
  align-items:center;gap:5px;
}
.nav .dropdown > .drop-toggle:hover{color:var(--gold);opacity:1}
.nav .dropdown > .drop-toggle::after{content:'▾';font-size:10px;color:var(--gold)}
.nav .dropdown-menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
  background:var(--green-panel);border:1px solid var(--border);border-radius:10px;
  padding:8px 0;min-width:240px;box-shadow:0 8px 24px rgba(0,0,0,0.35);
  display:none;z-index:200;
}
.nav .dropdown:hover .dropdown-menu,
.nav .dropdown:focus-within .dropdown-menu,
.nav .dropdown.open .dropdown-menu{display:block}
.nav .dropdown-menu a{
  display:block;padding:9px 18px;font-size:13px;color:var(--text);
  border-bottom:1px solid var(--green-mid);opacity:0.92;
}
.nav .dropdown-menu a:last-child{border-bottom:none}
.nav .dropdown-menu a:hover{background:var(--green-dark);color:var(--gold);opacity:1}
.nav .dropdown-menu a.active{color:var(--gold)}

/* HERO */
.hero{
  position:relative;
  padding:72px 20px 64px;
  text-align:center;
  overflow:hidden;
  background:linear-gradient(165deg,#0a140a 0%,var(--green-dark) 50%,var(--green-panel) 100%);
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M40 5 Q50 20 40 35 Q30 50 40 65 Q50 75 40 80'/%3E%3Cpath d='M20 15 Q30 30 25 45'/%3E%3Cpath d='M60 20 Q55 35 65 50'/%3E%3Ccircle cx='40' cy='40' r='2'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.hero-inner{position:relative;max-width:820px;margin:0 auto}
.hero-badge{display:inline-block;background:rgba(201,168,76,0.12);border:1px solid var(--gold);color:var(--gold);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:22px}
.hero h1{color:var(--white);font-size:clamp(28px,6vw,48px);font-weight:800;line-height:1.12;letter-spacing:-1px;margin-bottom:18px}
.hero h1 span{color:var(--gold)}
.hero-tag{color:var(--muted);font-size:17px;max-width:600px;margin:0 auto 28px;line-height:1.55}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* PAGE HERO (interior pages) */
.page-hero{background:linear-gradient(165deg,#0a140a,var(--green-dark) 60%,var(--green-panel));padding:60px 20px 44px;text-align:center;position:relative;overflow:hidden}
.page-hero-inner{position:relative;max-width:780px;margin:0 auto}
.page-eyebrow{display:inline-block;color:var(--gold);font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-bottom:14px}
.page-hero h1{color:var(--white);font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-0.7px;margin-bottom:14px}
.page-hero p{color:var(--muted);font-size:16px;max-width:580px;margin:0 auto;line-height:1.55}

/* BUTTONS */
.btn-primary{background:var(--gold);color:var(--green-dark);border:none;border-radius:8px;padding:14px 26px;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;transition:background 0.18s,transform 0.15s;box-shadow:0 4px 14px rgba(0,0,0,0.3)}
.btn-primary:hover{background:var(--gold-bright);color:var(--green-dark);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--gold);border:1px solid var(--gold);border-radius:8px;padding:13px 22px;font-size:15px;font-weight:600;text-decoration:none;display:inline-block;transition:background 0.2s}
.btn-secondary:hover{background:rgba(201,168,76,0.08);color:var(--gold-bright)}

/* SECTIONS */
section.s{padding:56px 20px}
section.s.alt{background:var(--green-panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.s-inner{max-width:1000px;margin:0 auto}
.s-title{font-size:24px;color:var(--white);font-weight:800;margin-bottom:6px;letter-spacing:-0.4px}
.s-sub{color:var(--muted);font-size:15px;margin-bottom:32px}

/* GRIDS / CARDS */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--green-panel);border:1px solid var(--border);border-radius:12px;padding:22px 20px;transition:border-color 0.2s,transform 0.15s}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
.card h3{color:var(--gold);font-size:16px;font-weight:700;margin-bottom:8px}
.card p{color:var(--text);font-size:14px;line-height:1.5}
.card .icon{font-size:28px;margin-bottom:10px;display:block}

/* SERVICE / FEATURE CARD */
.service-card{background:var(--green-panel);border:1px solid var(--border);border-radius:14px;padding:26px 22px;transition:border-color 0.2s,transform 0.15s}
.service-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.service-icon{font-size:34px;margin-bottom:12px;display:block}
.service-card h3{color:var(--gold);font-size:18px;margin-bottom:10px;font-weight:700}
.service-card p{color:var(--text);font-size:14px;line-height:1.55;margin-bottom:14px}
.service-card ul{list-style:none;padding:0}
.service-card li{color:var(--muted);font-size:13px;padding:5px 0 5px 18px;position:relative;line-height:1.4}
.service-card li::before{content:'▸';color:var(--gold);position:absolute;left:0}

/* HIGHLIGHTED PANEL (gold border) */
.differentiator{background:var(--green-panel);border:1px solid var(--gold);border-radius:14px;padding:32px 28px;margin-top:6px;position:relative}
.differentiator::before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:14px 14px 0 0}
.differentiator h3{color:var(--gold);font-size:20px;margin-bottom:10px;font-weight:800}
.differentiator .lede{color:var(--text);font-size:15px;line-height:1.65;margin-bottom:18px}

/* PIPELINE / STEPS */
.steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:8px}
.step-box{background:var(--green-dark);border:1px solid var(--border);border-radius:10px;padding:20px 18px;position:relative}
.step-box .num{position:absolute;top:-12px;left:18px;background:var(--gold);color:var(--green-dark);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.step-box h4{color:var(--gold);font-size:15px;margin:8px 0 6px;font-weight:700}
.step-box p{color:var(--text);font-size:13px;line-height:1.5}

/* PRICE STRIP */
.price-strip{background:var(--green-dark);border:1px solid var(--gold);border-radius:12px;padding:24px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between}
.price-strip .price-amount{font-size:34px;color:var(--gold);font-weight:800;letter-spacing:-1px}
.price-strip .price-amount small{font-size:14px;color:var(--muted);font-weight:500}
.price-strip .price-desc{flex:1;min-width:240px}
.price-strip .price-desc strong{color:var(--white);font-size:16px;display:block;margin-bottom:4px}
.price-strip .price-desc span{color:var(--muted);font-size:13px;line-height:1.4}

/* SPEC GRID (technical specs) */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.spec-item{padding:14px 16px;background:var(--green-dark);border:1px solid var(--border);border-radius:10px}
.spec-item strong{color:var(--gold);font-size:14px;display:block;margin-bottom:4px}
.spec-item span{color:var(--text);font-size:13px;line-height:1.4}

/* CHECKLIST */
.check-list{list-style:none;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.check-list li{padding:12px 14px 12px 38px;background:var(--green-panel);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;position:relative;line-height:1.45}
.check-list li::before{content:'✓';position:absolute;left:14px;top:12px;color:var(--gold);font-weight:800;font-size:14px}

/* QUOTE BLOCK (Chris's voice) */
.pull-quote{
  border-left:3px solid var(--gold);
  padding:18px 22px;
  background:rgba(201,168,76,0.05);
  border-radius:0 10px 10px 0;
  margin:24px 0;
  font-style:italic;
  color:var(--text);
  font-size:16px;
  line-height:1.6;
}
.pull-quote cite{display:block;margin-top:10px;font-size:12px;color:var(--gold);font-style:normal;letter-spacing:1px;text-transform:uppercase}

/* IMAGE PLACEHOLDER */
.img-placeholder{
  background:var(--green-mid);
  border:2px dashed var(--border);
  border-radius:12px;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--dim);
  font-size:13px;
  text-align:center;
  padding:20px;
  margin:20px 0;
}

/* CTA BAND */
.cta-band{background:linear-gradient(135deg,var(--green-panel),var(--green-dark));padding:56px 20px;text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta-band h2{color:var(--white);font-size:28px;font-weight:800;margin-bottom:10px}
.cta-band p{color:var(--muted);font-size:15px;margin-bottom:26px;max-width:560px;margin-left:auto;margin-right:auto}

/* FOOTER */
.site-footer{background:#070d07;padding:28px 20px;text-align:center;border-top:1px solid var(--green-mid)}
.site-footer-inner{max-width:1000px;margin:0 auto;color:var(--dim);font-size:13px;line-height:1.7}
.site-footer strong{color:var(--text);font-weight:600}
.site-footer a{color:var(--gold)}
.footer-links{margin-top:10px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.footer-links a{font-size:12px;color:var(--muted)}

/* ==========================================================================
   PARALLAX SECTIONS — Arizona landscape backdrops (v2)
   Desktop: background-attachment: fixed for true parallax effect
   Mobile: static cover background + JS-driven translateY fallback
   ========================================================================== */
.parallax-section{
  position:relative;
  min-height:600px;
  width:100%;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:80px 20px;
  overflow:hidden;
  isolation:isolate;
}
.parallax-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(10,20,10,0.55);
  z-index:1;
}
.parallax-section.darker::before{background:rgba(10,20,10,0.7)}
.parallax-section.lighter::before{background:rgba(10,20,10,0.4)}

.parallax-content{
  position:relative;
  z-index:2;
  max-width:880px;
  margin:0 auto;
  color:var(--white);
}
.parallax-content .parallax-eyebrow{
  display:inline-block;
  color:var(--gold);
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:18px;
  padding:6px 16px;
  border:1px solid var(--gold);
  border-radius:20px;
  background:rgba(15,26,15,0.45);
  backdrop-filter:blur(2px);
}
.parallax-content h1,
.parallax-content h2{
  font-family:Georgia,'Times New Roman',serif;
  color:var(--white);
  font-size:clamp(34px,7vw,64px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-1.2px;
  margin-bottom:18px;
  text-shadow:0 4px 22px rgba(0,0,0,0.55);
}
.parallax-content h1 span,
.parallax-content h2 span{color:var(--gold)}
.parallax-content p.lede{
  font-size:clamp(16px,2.2vw,21px);
  color:#f1f1f1;
  max-width:640px;
  margin:0 auto 28px;
  line-height:1.55;
  text-shadow:0 2px 12px rgba(0,0,0,0.55);
}
.parallax-content .parallax-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:6px;
}

/* Page hero parallax variant — slightly shorter for service pages */
.parallax-section.page-hero-parallax{
  min-height:480px;
  padding:64px 20px;
}

/* Hero parallax — taller for home page splash */
.parallax-section.hero-parallax{
  min-height:680px;
  padding:90px 20px;
}

/* Mid-page parallax band — narrower for breaks between content */
.parallax-section.band-parallax{
  min-height:420px;
  padding:60px 20px;
}

/* Photo backgrounds — Arizona highways / open roads (trucking + transport vibe) */
.bg-saguaro    { background-image:url('photos/arizona/highway-01-open-desert.jpg'); }
.bg-sedona     { background-image:url('photos/arizona/highway-02-mountain-pass.jpg'); }
.bg-sunset     { background-image:url('photos/arizona/highway-04-sunset-road.jpg'); }
.bg-painted    { background-image:url('photos/arizona/highway-03-desert-backroad.jpg'); }
.bg-canyon     { background-image:url('photos/arizona/highway-05-open-sky.jpg'); }
.bg-pines      { background-image:url('photos/arizona/highway-06-arizona-scenic.jpg'); }

/* Scroll-fade animation for parallax content */
@keyframes parallaxFadeUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
.parallax-content{animation:parallaxFadeUp 0.85s ease-out both}
@media (prefers-reduced-motion:reduce){
  .parallax-content{animation:none}
}

/* Footer attribution */
.photo-credit{
  margin-top:14px;
  color:var(--dim);
  font-size:11px;
  letter-spacing:0.4px;
  font-style:italic;
}

/* MOBILE */
@media (max-width:760px){
  /* Mobile parallax: drop fixed-attachment (poor perf on iOS/Android),
     use scroll-positioned background instead. JS may add a translateY transform. */
  .parallax-section{
    background-attachment:scroll;
    min-height:400px;
    padding:54px 18px;
  }
  .parallax-section.hero-parallax{min-height:480px;padding:64px 18px}
  .parallax-section.page-hero-parallax{min-height:360px;padding:48px 18px}
  .parallax-section.band-parallax{min-height:300px;padding:42px 18px}
  .parallax-content h1,
  .parallax-content h2{font-size:clamp(28px,8vw,44px)}
  .parallax-content p.lede{font-size:16px}

  .nav{display:none;flex-direction:column;align-items:stretch;position:absolute;top:60px;left:0;right:0;background:var(--green-panel);padding:14px 18px;border-bottom:1px solid var(--green-mid);gap:10px}
  .nav.open{display:flex}
  .nav a{padding:10px 4px;border-bottom:1px solid var(--green-mid)}
  .nav a:last-child{border-bottom:none}
  .nav a.cta{text-align:center;border-bottom:none}
  .hamburger{display:block}
  .site-header-inner{position:relative}
  /* Mobile dropdown — flatten into list */
  .nav .dropdown{width:100%}
  .nav .dropdown > .drop-toggle{display:block;width:100%;text-align:left;padding:10px 4px;border-bottom:1px solid var(--green-mid);font-size:14px}
  .nav .dropdown-menu{position:static;transform:none;border:none;padding:0;background:transparent;box-shadow:none;display:block;min-width:0;margin-bottom:0}
  .nav .dropdown-menu a{padding:9px 4px 9px 22px;font-size:13px;color:var(--muted)}
  .nav .dropdown-menu a:last-child{border-bottom:1px solid var(--green-mid)}
  .hero{padding:48px 18px 44px}
  section.s{padding:40px 18px}
  .price-strip{flex-direction:column;align-items:flex-start;gap:12px}
  .price-strip .price-amount{font-size:28px}
}