/* =========================================================
   SONALIKA INTERNATIONAL — Premium Home
   Cinematic agricultural · video hero · grass + soil motion
   Brand: royal blue · red · gold · leaf green · earth
   ========================================================= */

:root{
  /* brand (from logo) */
  --blue:    #1b3f9c;
  --blue-d:  #122a6e;
  --red:     #df241b;
  --gold:    #f4b400;
  --gold-2:  #ffce5c;
  --gold-d:  #d39400;
  --green:   #43a233;
  --green-d: #2f7d27;

  /* earth / nature */
  --soil:    #2a1b0f;
  --soil-2:  #19100a;
  --soil-3:  #3a2817;
  --cream:   #f7f1e6;
  --cream-2: #efe6d4;
  --sand:    #e3d6bd;
  --ink:     #1a160f;
  --ink-2:   #4a4234;
  --muted:   #837a68;
  --line:    rgba(26,22,15,.12);
  --line-d:  rgba(255,255,255,.14);

  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --serif:  "Instrument Serif", Georgia, serif;
  --body:   "Manrope", system-ui, sans-serif;

  --maxw: 1340px;
  --gut: clamp(20px,4vw,68px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{ background:var(--soil-2); color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.is-loading{ overflow:hidden; height:100vh; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--gold); color:var(--soil-2); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }

h1,h2,h3{ font-family:var(--display); font-weight:800; line-height:.98; letter-spacing:-.02em; }
.eyebrow{ display:inline-flex; align-items:center; gap:11px; font-family:var(--display); font-weight:600;
  font-size:13px; letter-spacing:.2em; text-transform:uppercase; }
.eyebrow::before{ content:""; width:30px; height:2px; background:var(--gold); }
.serif-i{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; }

/* buttons */
.btn{ --pad:18px 32px; display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:var(--pad); border-radius:100px; font-family:var(--display); font-weight:700; font-size:16px;
  transition:transform .5s var(--ease-out), background .3s, color .3s, box-shadow .4s, border-color .3s;
  will-change:transform; white-space:nowrap; }
.btn svg{ width:20px; height:20px; }
.btn-gold{ background:var(--gold); color:var(--soil-2); box-shadow:0 16px 40px -16px rgba(244,180,0,.8); }
.btn-gold:hover{ background:var(--gold-2); transform:translateY(-2px); box-shadow:0 24px 54px -18px rgba(244,180,0,.95); }
.btn-red{ background:var(--red); color:#fff; box-shadow:0 16px 40px -16px rgba(223,36,27,.7); }
.btn-red:hover{ background:#ef362c; transform:translateY(-2px); }
.btn-glass{ background:rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.3); backdrop-filter:blur(8px); }
.btn-glass:hover{ background:rgba(255,255,255,.2); }
.btn-lg{ --pad:21px 40px; font-size:18px; }
.magnetic{ display:inline-block; will-change:transform; }

/* reveal */
.fx{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.fx.in{ opacity:1; transform:none; }
.fx-d1{ transition-delay:.1s; } .fx-d2{ transition-delay:.2s; } .fx-d3{ transition-delay:.3s; } .fx-d4{ transition-delay:.4s; }
.clip{ clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease-out); }
.clip.in{ clip-path:inset(0 0 0 0); }

/* ====================================================== */
/* LOADER                                                  */
/* ====================================================== */
#loader{ position:fixed; inset:0; z-index:10000; background:var(--soil-2); display:grid; place-items:center;
  transition:opacity .8s ease, visibility .8s; }
#loader.done{ opacity:0; visibility:hidden; }
.loader-in{ text-align:center; width:min(440px,82vw); }
.loader-badge{ background:#fff; border-radius:18px; padding:18px 22px; display:inline-flex; box-shadow:0 30px 70px -28px rgba(0,0,0,.7); }
.loader-badge img{ height:clamp(46px,8vw,68px); width:auto; }
.loader-grass{ margin-top:30px; height:40px; position:relative; overflow:hidden; }
.loader-bar{ margin-top:14px; height:3px; width:100%; background:rgba(255,255,255,.14); border-radius:3px; overflow:hidden; }
.loader-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-d),var(--gold-2)); }
.loader-pct{ margin-top:12px; font-family:var(--display); font-weight:700; font-size:13px; color:rgba(255,255,255,.5); }

/* ====================================================== */
/* NAV                                                     */
/* ====================================================== */
.hnav{ position:fixed; top:0; left:0; right:0; z-index:8000; display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gut); transition:background .5s var(--ease), padding .5s, box-shadow .5s; }
.hnav.scrolled{ background:rgba(8,15,42,.88); backdrop-filter:blur(18px) saturate(160%); padding-block:11px;
  box-shadow:0 10px 40px -16px rgba(0,0,0,.55); }
.hbrand{ display:flex; align-items:center; gap:13px; }
.hbrand .badge{ background:#fff; border-radius:12px; padding:7px 11px; display:flex; box-shadow:0 8px 22px -12px rgba(0,0,0,.5); transition:transform .4s var(--ease-out); }
.hbrand .badge img{ height:34px; width:auto; }
.hbrand:hover .badge{ transform:translateY(-1px); }
.hnav-links{ display:flex; gap:32px; align-items:center; }
.hnav-links a{ font-family:var(--display); font-weight:600; font-size:15px; color:#fff; position:relative; transition:color .3s; }
.hnav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--gold); transition:width .4s var(--ease-out); }
.hnav-links a:hover::after{ width:100%; }
.hnav-cta{ display:flex; align-items:center; gap:14px; }
.hburger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.hburger span{ width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s; }

/* ====================================================== */
/* HERO — split layout: left content · right tractor img  */
/* ====================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #050b2a;
}

/* ── Full-width split wrapper ───────────────────────── */
.hero-split{
  display: flex;
  min-height: 100svh;
  width: 100%;
}

/* ── LEFT content column ─────────────────────────────── */
.hero-content-col{
  flex: 0 0 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(100px,12vh,140px) var(--gut) clamp(60px,8vh,80px);
  position: relative;
  z-index: 2;
  /* subtle left radial tint so content breathes */
  background: radial-gradient(ellipse 70% 60% at 10% 50%,
    rgba(27,63,156,.18) 0%, transparent 70%);
}

/* ── Eyebrow row ─────────────────────────────────────── */
.hero-ew{
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.hero.in .hero-ew{ opacity:1; transform:none; transition-delay:.05s; }
.hero-ew-bar{
  flex-shrink: 0;
  width: 32px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.hero-ew-text{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Location badge ──────────────────────────────────── */
.hero-loc-badge{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
  font-size: 13px;
  color: rgba(255,255,255,.75);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.hero.in .hero-loc-badge{ opacity:1; transform:none; transition-delay:.15s; }
.hero-loc-badge svg{ color: var(--gold); flex-shrink:0; }
.hero-loc-badge strong{ color:#fff; }

/* ── Headline ────────────────────────────────────────── */
.hero-h{
  display: block;
  margin: 28px 0 0;
  color: #fff;
  font-size: clamp(42px, 6.5vw, 88px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .96;
}
.hero-h .wm{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero-h .wm > span{
  display: block;
  transform: translateY(110%) rotate(2deg);
  opacity: .1;
  transition: transform 1.1s var(--ease-out), opacity .9s var(--ease-out);
}
.hero.in .hero-h .wm > span{ transform:none; opacity:1; }
.hero.in .hero-h .wm:nth-child(1) > span{ transition-delay:.18s; }
.hero.in .hero-h .wm:nth-child(2) > span{ transition-delay:.28s; }
.hero.in .hero-h .wm:nth-child(3) > span{ transition-delay:.38s; }

/* italic gold accent word */
.hero-accent{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0;
}

/* ── Sub copy ────────────────────────────────────────── */
.hero-sub{
  color: rgba(255,255,255,.72);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
  margin-top: 24px;
  max-width: 44ch;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.hero.in .hero-sub{ opacity:1; transform:none; transition-delay:.48s; }

/* ── CTA buttons ─────────────────────────────────────── */
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.hero.in .hero-actions{ opacity:1; transform:none; transition-delay:.58s; }

/* outlined button for dark hero */
.btn-hero-outline{
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.45);
}
.btn-hero-outline:hover{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.7);
  transform: translateY(-2px);
}

/* ── Stats strip ─────────────────────────────────────── */
.hero-stats-strip{
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 48px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.hero.in .hero-stats-strip{ opacity:1; transform:none; transition-delay:.70s; }

.hss-item{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 18px;
}
.hss-div{
  width: 1px;
  background: rgba(255,255,255,.12);
  align-self: stretch;
}
.hss-icon{
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(27,63,156,.35);
  border: 1px solid rgba(27,63,156,.6);
  color: var(--gold);
}
.hss-icon svg{ width:22px; height:22px; }
.hss-n{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 26px);
  color: #fff;
  line-height: 1;
}
.hss-n span{ color: var(--gold); font-size:.85em; }
.hss-label{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(11px, 1.1vw, 13px);
  color: rgba(255,255,255,.9);
  margin-top: 3px;
}
.hss-sub{
  font-size: 11px;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
}

/* ── RIGHT image column ──────────────────────────────── */
.hero-img-col{
  flex: 0 0 45%;
  position: relative;
  overflow: hidden;
}
.hero-tractor-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease-out);
}
.hero.in .hero-tractor-img{ transform: scale(1); }

/* left-edge gradient blend into dark left col */
.hero-img-col::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #050b2a 0%, rgba(5,11,42,.55) 18%, transparent 40%);
  z-index: 1;
  pointer-events: none;
}
/* bottom gradient to darken bottom of image */
.hero-img-col::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5,11,42,.7) 100%);
  z-index: 1;
  pointer-events: none;
}

/* ── World's No.1 badge ──────────────────────────────── */
.hero-no1-badge{
  position: absolute;
  bottom: clamp(24px,4vh,48px);
  right: clamp(20px,3vw,40px);
  z-index: 3;
  width: clamp(90px,9vw,120px);
  height: clamp(90px,9vw,120px);
  border-radius: 50%;
  background: linear-gradient(135deg, #c88a00, #f4b400);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px -8px rgba(244,180,0,.6), 0 0 0 6px rgba(244,180,0,.18);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.hero.in .hero-no1-badge{ opacity:1; transform:scale(1); transition-delay:.75s; }
.hero-no1-inner{
  text-align: center;
  line-height: 1.15;
  padding: 10px;
}
.no1-top, .no1-bot{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(7px, .75vw, 9px);
  letter-spacing: .14em;
  color: rgba(5,11,42,.85);
  text-transform: uppercase;
}
.no1-num{
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(22px, 2.8vw, 36px);
  color: #050b2a;
  line-height: 1;
  margin: 2px 0;
}

/* scroll cue — sits bottom-center of image column */
.scrollcue{
  position: absolute;
  /* center it over the image column (55% + 22.5% of remaining = ~66.25% from left) */
  left: calc(55% + 22.5%);
  transform: translateX(-50%);
  bottom: clamp(28px,4vh,48px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.65);
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  pointer-events: none;
}
.scrollcue .mouse{ width:22px; height:36px; border:2px solid rgba(255,255,255,.4); border-radius:14px; position:relative; }
.scrollcue .mouse::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:3px;
  background:var(--gold-2); transform:translateX(-50%); animation:wheel 1.7s var(--ease) infinite; }
@keyframes wheel{ 0%{ opacity:0; transform:translate(-50%,-3px);} 30%{opacity:1;} 70%{opacity:1;} 100%{ opacity:0; transform:translate(-50%,9px);} }

/* ====================================================== */
/* MARQUEE                                                 */
/* ====================================================== */
.mq{ background:var(--blue); overflow:hidden; position:relative; z-index:6; }
.mq-row{ display:flex; gap:50px; padding:16px 0; white-space:nowrap; width:max-content; animation:mq 30s linear infinite; }
.mq-row span{ font-family:var(--display); font-weight:700; font-size:clamp(15px,1.7vw,20px); text-transform:uppercase;
  color:rgba(255,255,255,.92); display:inline-flex; align-items:center; gap:50px; letter-spacing:.04em; }
.mq-row span::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--gold-2); }
@keyframes mq{ to{ transform:translateX(-50%);} }

/* ====================================================== */
/* MODELS — cream section, realistic tractor change         */
/* ====================================================== */
.models{ background:linear-gradient(180deg,var(--cream),var(--cream-2)); color:var(--ink); position:relative; overflow:hidden;
  padding:clamp(70px,9vw,140px) 0; }
.models::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.25'/%3E%3C/svg%3E"); }
.models-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:clamp(34px,4vw,56px); position:relative; z-index:2; }
.models-head .eyebrow{ color:var(--green-d); }
.models-head .eyebrow::before{ background:var(--red); }
.models-head h2{ color:var(--blue-d); font-size:clamp(36px,5.4vw,76px); margin-top:14px; }
.models-head p{ color:var(--ink-2); max-width:42ch; }

.stage{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
.stage-visual{ position:relative; min-height:380px; display:flex; align-items:center; justify-content:center; }
.stage-watermark{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:0; font-family:var(--display);
  font-weight:800; font-size:min(20vw,260px); letter-spacing:-.04em; color:transparent;
  -webkit-text-stroke:1.5px rgba(27,63,156,.14); white-space:nowrap; pointer-events:none; transition:opacity .4s; }
.stage-floor{ position:absolute; left:50%; bottom:8%; transform:translateX(-50%); width:80%; height:60px; z-index:1;
  background:radial-gradient(closest-side, rgba(120,80,20,.3), transparent 72%); filter:blur(8px); }
.stage-img{ position:relative; z-index:2; width:100%; aspect-ratio:16/11; }
.stage-img .slot{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transform:scale(.95) translateX(40px);
  transition:opacity .7s var(--ease-out), transform .8s var(--ease-out);
  filter:drop-shadow(0 40px 40px rgba(40,24,8,.35)); }
.stage-img .slot.on{ opacity:1; transform:none; }

.stage-info{ position:relative; z-index:2; }
.stage-series{ font-family:var(--display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:13px; color:var(--red); }
.stage-name{ font-family:var(--display); font-weight:800; color:var(--blue-d); font-size:clamp(32px,4.2vw,60px); line-height:1; letter-spacing:-.02em; margin-top:8px; }
.stage-desc{ color:var(--ink-2); margin-top:18px; max-width:44ch; }
.stage-specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:28px 0; }
.stage-specs .sp{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:0 14px 30px -22px rgba(26,22,15,.5); }
.stage-specs .sp b{ font-family:var(--display); font-weight:800; font-size:24px; color:var(--blue-d); display:block; line-height:1; }
.stage-specs .sp b span{ font-size:.55em; color:var(--gold-d); }
.stage-specs .sp small{ color:var(--muted); font-size:12px; }
.stage-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* model thumbnails switcher */
.switcher{ display:flex; gap:12px; margin-top:30px; position:relative; z-index:2; flex-wrap:wrap; }
.mcard{ position:relative; flex:1; min-width:120px; padding:14px 16px; border-radius:16px; background:#fff; border:1.5px solid var(--line);
  text-align:left; transition:.35s var(--ease); overflow:hidden; }
.mcard:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -22px rgba(26,22,15,.5); }
.mcard.active{ border-color:var(--gold); background:linear-gradient(160deg,#fffaf0,#fff); }
.mcard .hp{ font-family:var(--display); font-weight:800; font-size:21px; color:var(--blue-d); line-height:1; }
.mcard .hp span{ font-size:.5em; color:var(--gold-d); }
.mcard .nm{ font-family:var(--display); font-weight:700; font-size:12.5px; color:var(--ink-2); margin-top:6px; line-height:1.15; }
.mcard .bar{ position:absolute; left:0; bottom:0; height:3px; width:0; background:linear-gradient(90deg,var(--gold),var(--red)); transition:width .4s var(--ease); }
.mcard.active .bar{ width:100%; }

/* ====================================================== */
/* PROMISE STRIP (trust)                                   */
/* ====================================================== */
.promise{ background:var(--soil-2); color:#fff; padding:clamp(60px,8vw,120px) 0; position:relative; overflow:hidden; }
.promise .leaf-bg{ position:absolute; right:-4%; top:-10%; width:420px; opacity:.05; pointer-events:none; }
.promise-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; z-index:2; }
.pcard{ padding:30px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid var(--line-d); transition:.5s var(--ease-out); }
.pcard:hover{ transform:translateY(-6px); background:rgba(255,255,255,.07); border-color:rgba(244,180,0,.4); }
.pcard .pn{ font-family:var(--display); font-weight:800; font-size:34px; color:var(--gold-2); line-height:1; }
.pcard h3{ font-size:19px; margin-top:14px; color:#fff; }
.pcard p{ color:rgba(255,255,255,.62); margin-top:8px; font-size:14.5px; }

/* ====================================================== */
/* CTA                                                     */
/* ====================================================== */
.cta{ position:relative; padding:clamp(70px,9vw,140px) 0; background:linear-gradient(135deg,var(--blue-d),var(--blue)); color:#fff; overflow:hidden; }
.cta::after{ content:""; position:absolute; right:-100px; bottom:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(244,180,0,.4), transparent 65%); }
.cta-in{ position:relative; z-index:2; max-width:720px; }
.cta-in h2{ color:#fff; font-size:clamp(38px,6vw,92px); }
.cta-in p{ color:rgba(255,255,255,.82); margin-top:18px; font-size:clamp(17px,1.6vw,21px); }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }

/* ====================================================== */
/* FOOTER                                                  */
/* ====================================================== */
.foot{ background:var(--soil-2); color:#fff; padding:clamp(50px,6vw,80px) 0 30px; border-top:1px solid var(--line-d); }
.foot-top{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:center; }
.foot-badge{ background:#fff; border-radius:14px; padding:12px 16px; display:inline-flex; }
.foot-badge img{ height:42px; }
.foot-links{ display:flex; gap:28px; flex-wrap:wrap; }
.foot-links a{ color:rgba(255,255,255,.7); font-family:var(--display); font-weight:600; font-size:15px; transition:color .3s; }
.foot-links a:hover{ color:var(--gold-2); }
.foot-bar{ margin-top:40px; padding-top:24px; border-top:1px solid var(--line-d); display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap; color:rgba(255,255,255,.45); font-size:13.5px; }

/* ====================================================== */
/* RESPONSIVE                                               */
/* ====================================================== */
@media (max-width:1200px){
  /* tighten the stats strip on smaller desktops */
  .hss-item{ padding:18px 14px; gap:10px; }
  .hss-icon{ width:34px; height:34px; }
  .hss-icon svg{ width:18px; height:18px; }
}
@media (max-width:1024px){
  .stage{ grid-template-columns:1fr; }
  .stage-visual{ order:-1; min-height:300px; }
  .promise-grid{ grid-template-columns:repeat(2,1fr); }
  /* hero: reduce split ratio */
  .hero-content-col{ flex-basis:60%; }
  .hero-img-col{ flex-basis:40%; }
  .hero-no1-badge{ width:80px; height:80px; }
  .no1-num{ font-size:22px; }
}
@media (max-width:860px){
  /* hero stacks vertically */
  .hero-split{ flex-direction:column; }
  .hero-content-col{
    flex-basis:auto;
    padding-top:clamp(90px,14vh,120px);
    padding-bottom:32px;
  }
  .hero-img-col{
    flex: 0 0 52vw;
    min-height:52vw;
    max-height:380px;
  }
  .hero-img-col::before{
    background: linear-gradient(180deg, rgba(5,11,42,.7) 0%, transparent 30%);
  }
  /* stats strip scrolls horizontally on mobile */
  .hero-stats-strip{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .hero-stats-strip::-webkit-scrollbar{ display:none; }
  .hss-item{ flex:0 0 auto; min-width:130px; }
  .hss-div{ min-height:60px; }
  .hero-no1-badge{ bottom:16px; right:16px; width:72px; height:72px; }
  .no1-num{ font-size:20px; }
  .scrollcue{ display:none; }
}
@media (max-width:760px){
  body{ font-size:17px; }
  .hnav-links{ display:none; }
  .hburger{ display:flex; }
  .hnav-cta .btn-glass{ display:none; }
  .promise-grid{ grid-template-columns:1fr; }
  .stage-specs{ grid-template-columns:repeat(3,1fr); }
  .hero-h{ font-size:clamp(36px,9vw,56px); }
}

@media (prefers-reduced-motion:reduce){
  .hero-tractor-img{ transition:none; transform:none; }
  .hero-h .wm > span,
  .hero-ew, .hero-loc-badge, .hero-sub,
  .hero-actions, .hero-stats-strip,
  .hero-no1-badge{ transition:none; opacity:1; transform:none; }
}