/* INTERACTIVE PREVIEW ONLY — © 2026 ReBrandMyAI. Reuse requires a valid licence. Not the customer edition. */

.hero{
  position:relative;
  overflow:hidden;
  padding-top:clamp(44px,5vw,78px);
  background:
    radial-gradient(circle at 22% 22%, rgba(242,183,5,.16), transparent 20%),
    radial-gradient(circle at 74% 30%, rgba(13,106,67,.12), transparent 24%),
    linear-gradient(180deg, #f4f1e6 0%, #eeede6 34%, #e5e5dc 62%, #dfe3dc 100%);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.34) 0%, transparent 28%, transparent 72%, rgba(34,37,40,.04) 100%);
  pointer-events:none;
}
.hero-top{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,520px);
  column-gap:clamp(40px,6vw,88px);
  row-gap:clamp(20px,2.6vw,34px);
  align-items:center;
}
.hero-top h1{grid-column:auto}
.hero-copy{max-width:620px; padding-right:0}
.hero-kicker{margin:0 0 12px; color:#986d12; letter-spacing:.18em; font-size:12px; font-weight:700}
.hero h1{
  margin:0;
  max-width:610px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.048em;
}
.hero h1 .title-static{
  display:block;
  font-size:clamp(54px,5.45vw,84px);
  line-height:.92;
}
.hero h1 .title-reveal-wrap{
  display:block;
  overflow:hidden;
  padding-bottom:4px;
  margin-top:-2px;
}
.hero h1 .title-reveal{
  display:inline-block;
  position:relative;
  white-space:nowrap;
  font-size:clamp(34px,3.15vw,48px);
  font-weight:320;
  line-height:.96;
  letter-spacing:-.04em;
  color:#202527;
  opacity:0;
  transform:translateY(18px);
  filter:blur(2px);
  animation:haulReveal 10.8s cubic-bezier(.22,1,.36,1) infinite;
}
.hero h1 .title-reveal::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-10px;
  height:1px;
  background:linear-gradient(90deg, rgba(152,109,18,.35) 0%, rgba(242,183,5,.82) 40%, rgba(242,183,5,0) 100%);
}
.hero h1 .title-reveal em{font-style:normal; color:var(--lane); font-weight:800}
.hero-side{display:block}
.hero-side .lede,
.hero-copy .lede{
  max-width:58ch;
  margin:10px 0 0;
  font-size:clamp(18px,1.55vw,24px);
  color:#4a5254;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start; margin-top:16px}
.hero-proof{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
}
.hero-proof span{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 14px; border-radius:999px;
  border:1px solid rgba(34,37,40,.12);
  background:rgba(255,255,255,.62);
  box-shadow:0 8px 30px rgba(63,68,70,.06);
  font-size:13px; font-weight:700; color:#374042;
}
.hero-proof span::before{
  content:""; width:8px; height:8px; border-radius:999px; background:var(--green); box-shadow:0 0 0 4px rgba(13,106,67,.12);
}
.hero-stage{
  position:relative;
  min-height:430px;
  border-radius:34px;
  overflow:hidden;
  border:1px solid rgba(34,37,40,.12);
  box-shadow:0 30px 70px rgba(52,57,61,.14), inset 0 1px 0 rgba(255,255,255,.4);
  background:
    radial-gradient(circle at 62% 28%, rgba(245,218,131,.46), transparent 18%),
    linear-gradient(180deg, #edf1ea 0%, #e7e6dc 30%, #d6d7cf 66%, #b8beb7 100%);
}
.hero-stage::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 54px, rgba(255,255,255,.08) 54px, rgba(255,255,255,.08) 55px),
    radial-gradient(circle at 75% 18%, rgba(255,255,255,.2), transparent 20%);
  opacity:.35;
  pointer-events:none;
}
.hero-stage-header{position:absolute; top:18px; left:18px; right:18px; display:flex; flex-wrap:wrap; gap:10px; z-index:4}
.stage-chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border-radius:999px;
  background:rgba(17,19,20,.72); color:#f5f0e4; border:1px solid rgba(255,255,255,.12);
  font:700 11px/1.1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  backdrop-filter: blur(6px);
}
.hero-stage-copy{position:absolute; right:24px; top:92px; z-index:3; max-width:232px; text-align:right}
.stage-note{display:inline-block; padding:14px 16px; border-radius:18px 18px 4px 18px; background:rgba(255,250,236,.78); border:1px solid rgba(152,109,18,.18); box-shadow:0 12px 28px rgba(90,70,27,.09); color:#5d4a1e; font-size:14px; font-weight:700}
.hero-route-ribbon{
  position:absolute; left:22px; top:92px; z-index:4; width:212px;
  padding:12px 14px 13px; border-radius:18px;
  background:rgba(249,249,244,.74); border:1px solid rgba(34,37,40,.08);
  box-shadow:0 14px 34px rgba(52,57,61,.10);
  backdrop-filter:blur(8px);
}
.hero-route-ribbon::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.10));
  pointer-events:none;
}
.hero-route-ribbon > *{position:relative; z-index:1}
.ribbon-label{margin:0; color:#596567; font:700 11px/1.1 var(--mono); letter-spacing:.1em; text-transform:uppercase}
.ribbon-diagram{margin:8px 0 6px}
.ribbon-diagram svg{display:block; width:100%; height:auto}
.ribbon-track-base{stroke:rgba(29,79,145,.18); stroke-width:6; fill:none; stroke-linecap:round; stroke-linejoin:round}
.ribbon-track-main{stroke:var(--green); stroke-width:5; fill:none; stroke-linecap:round; stroke-linejoin:round}
.ribbon-track-alt{stroke:rgba(90,100,110,.52); stroke-width:3.5; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:4 7}
.ribbon-node{fill:#fff; stroke-width:3}
.ribbon-node.start{stroke:var(--blue)}
.ribbon-node.mid{stroke:var(--lane)}
.ribbon-node.end{stroke:var(--green)}
.ribbon-places{display:grid; grid-template-columns:50px 1fr 52px; align-items:center; margin-top:2px; font:700 10px/1.15 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#465155}
.ribbon-places span:nth-child(2){text-align:center}
.ribbon-places span:last-child{text-align:right}
.ribbon-stats{display:flex; flex-wrap:nowrap; align-items:center; gap:4px; margin-top:10px}
.ribbon-pill{display:inline-flex; align-items:center; gap:5px; padding:6px 7px; border-radius:999px; background:rgba(255,255,255,.88); border:1px solid rgba(13,106,67,.10); color:#2c393d; font-size:10px; font-weight:700; white-space:nowrap}
.ribbon-pill strong{color:var(--green)}
.hero-scenescape{position:absolute; inset:0; overflow:hidden}
.hero-hills-far,.hero-hills-mid{position:absolute; inset-inline:0; bottom:176px}
.hero-hills-far{
  height:160px; background:#c3cabc;
  clip-path:polygon(0 70%, 9% 62%, 18% 68%, 29% 54%, 42% 72%, 58% 49%, 70% 63%, 83% 57%, 100% 69%, 100% 100%, 0 100%);
  opacity:.9;
}
.hero-hills-mid{
  height:132px; background:#adb7a6;
  clip-path:polygon(0 81%, 13% 63%, 27% 73%, 41% 52%, 57% 69%, 71% 50%, 86% 62%, 100% 56%, 100% 100%, 0 100%);
}
.hero-road-stage{
  position:absolute; left:-10%; right:-10%; bottom:-18px; height:194px;
  background:linear-gradient(180deg, #404345 0%, #25282b 82%);
  clip-path:polygon(32% 0, 68% 0, 100% 100%, 0 100%);
  z-index:2;
}
.hero-road-stage::before,
.hero-road-stage::after{
  content:""; position:absolute; inset:0; opacity:.98;
  background:linear-gradient(180deg,rgba(242,183,5,.56),#f2b705 20%,#f2b705);
}
.hero-road-stage::before{clip-path:polygon(32.7% 0,33.2% 0,1.2% 100%,.7% 100%)}
.hero-road-stage::after{clip-path:polygon(66.8% 0,67.3% 0,99.3% 100%,98.8% 100%)}
.hero-road-dashes{
  position:absolute;
  left:49.1%; bottom:-18px; height:194px; width:20px;
  z-index:3; overflow:hidden; transform:translateX(-50%);
  clip-path:polygon(41% 0,59% 0,100% 100%,0 100%);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.14));
}
.hero-road-dashes::before{
  content:"";position:absolute;left:0;right:0;top:0;height:28px;
  background:#f5f4ef;
}
.hero-road-dashes::after{
  content:"";position:absolute;inset:28px 0 0;
  background:repeating-linear-gradient(180deg,
    #f5f4ef 0 28px,
    transparent 28px 47px,
    #f5f4ef 47px 66px,
    transparent 66px 94px,
    #f5f4ef 94px 130px,
    transparent 130px 151px,
    #f5f4ef 151px 172px,
    transparent 172px 208px);
  background-size:100% 208px;
  animation:dividerApproach 3.5s linear infinite;
}
.hero-route-line{
  position:absolute; left:26px; right:26px; bottom:172px; height:98px; z-index:3;
}
.hero-route-line svg{width:100%; height:100%}
.route-shadow{stroke:rgba(26,39,68,.1); stroke-width:8; fill:none; stroke-linecap:round}
.route-track{stroke:rgba(29,79,145,.18); stroke-width:7; fill:none; stroke-linecap:round; stroke-linejoin:round}
.route-progress{
  stroke:var(--blue); stroke-width:7; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:640; stroke-dashoffset:640;
  animation:routeDraw 10.8s cubic-bezier(.22,1,.36,1) infinite;
}
.route-payoff{
  position:absolute; right:0; bottom:4px; padding:12px 14px; border-radius:18px 18px 18px 4px;
  background:rgba(255,255,255,.84); border:1px solid rgba(29,79,145,.12);
  color:#1f2d46; box-shadow:0 14px 32px rgba(24,39,74,.10);
  font-size:14px; font-weight:800; opacity:0; transform:translateY(10px); animation:payoffUp 10.8s ease infinite;
}
.route-node{
  position:absolute; top:2px; display:inline-flex; align-items:center; gap:7px; font:700 11px/1.1 var(--mono);
  letter-spacing:.08em; text-transform:uppercase; color:#23406a;
}
.route-node::before{content:""; width:10px; height:10px; border-radius:999px; background:#fff; border:3px solid var(--blue); box-shadow:0 0 0 4px rgba(29,79,145,.12)}
.route-start{left:0}
.route-end{right:14px}
.hero-lane-truck{
  position:absolute; left:33.2%; bottom:32px; width:156px; z-index:4; transform:translateX(-50%);
  filter:drop-shadow(0 18px 22px rgba(31,35,38,.16));
  animation:truckIdle 4.5s ease-in-out infinite;
}
.hero-lane-truck svg{width:100%; height:auto; display:block}
.hero-stage-badge{
  position:absolute; right:24px; bottom:28px; z-index:4; padding:12px 14px; border-radius:18px; background:rgba(255,250,236,.84);
  border:1px solid rgba(152,109,18,.14); box-shadow:0 10px 26px rgba(90,70,27,.10);
  color:#5e4a1e; font-weight:800; font-size:14px; max-width:220px; opacity:0; transform:translateY(12px); animation:badgeLift 10.8s ease infinite;
}
.hero-stage-badge small{display:block; color:#7e6540; font:600 11px/1.25 var(--mono); letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px}
.hero-stage-badge b{display:block; color:#111; font-size:24px; margin-top:3px}
.hero-stage-badge em{font-style:normal; color:#0d6a43}
.hero-divider{display:none}
.gantry{margin-top:clamp(18px,3vw,32px)}
.gantry-cap{padding-top:20px}
@keyframes haulReveal{
  0%, 11% { opacity:0; transform:translateY(18px); filter:blur(2px); }
  19%, 58% { opacity:1; transform:translateY(0); filter:blur(0); }
  84%, 100% { opacity:1; transform:translateY(0); filter:blur(0); }
}
@keyframes routeDraw{
  0%, 12% { stroke-dashoffset:640; }
  18%, 55% { stroke-dashoffset:0; }
  100% { stroke-dashoffset:0; }
}
@keyframes payoffUp{
  0%, 30% {opacity:0; transform:translateY(10px)}
  38%, 78% {opacity:1; transform:translateY(0)}
  100% {opacity:1; transform:translateY(0)}
}
@keyframes badgeLift{
  0%, 42% {opacity:0; transform:translateY(12px)}
  48%, 84% {opacity:1; transform:translateY(0)}
  100% {opacity:1; transform:translateY(0)}
}
@keyframes dividerApproach{from{background-position-y:-208px}to{background-position-y:0}}
@keyframes truckIdle{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-2px)}
}
@media (min-width:1021px) and (max-width:1240px){
  .hero-lane-truck{left:28.5%; width:clamp(122px,28vw,142px)}
  .hero-stage-badge{right:14px; max-width:170px; padding:11px 12px; font-size:12px}
  .hero-stage-badge b{font-size:21px}
}
@media (max-width:1020px){
  .hero-top{grid-template-columns:1fr; align-items:start}
  .hero-stage{min-height:390px}
  .hero-copy{max-width:none}
  .hero h1{max-width:none}
  .hero h1 .title-static{font-size:clamp(52px,7.4vw,78px)}
  .hero h1 .title-reveal{font-size:clamp(32px,4.8vw,44px)}
}
@media (max-width:620px){
  .hero{padding-top:28px}
  .hero-top{row-gap:18px}
  .hero h1{max-width:none}
  .hero h1 .title-static{font-size:clamp(36px,10.5vw,54px)}
  .hero h1 .title-reveal-wrap{margin-top:4px; padding-bottom:8px}
  .hero h1 .title-reveal{font-size:clamp(36px,10vw,54px); font-weight:300}
  .hero h1 .title-reveal::after{display:none}
  .hero-stage{min-height:330px; border-radius:26px}
  .hero-stage-copy{display:none}
  .hero-route-ribbon{display:none}
  .hero-stage-header{top:12px; left:12px; right:12px; gap:8px}
  .stage-chip{padding:8px 10px; font-size:10px}
  .route-payoff{font-size:12px; padding:10px 12px; max-width:170px}
  .hero-stage-badge{left:auto; right:12px; bottom:14px; max-width:150px; padding:10px 12px; font-size:12px}
  .hero-stage-badge b{font-size:20px}
  .hero-proof span{font-size:12px; padding:10px 12px}
  .hero-lane-truck{left:27.2%; bottom:22px; width:108px}
}
@media (prefers-reduced-motion:reduce){
  .hero h1 .title-reveal, .route-progress, .hero-lane-truck, .hero-stage-badge, .route-payoff, .hero-road-dashes::after{animation:none!important}
  .hero h1 .title-reveal{opacity:1; transform:none; filter:none}
  .route-progress{stroke-dashoffset:0}
  .hero-lane-truck{transform:translateX(-50%)}
  .route-payoff, .hero-stage-badge{opacity:1; transform:none}
}