/* =========================================================
   SONALIKA — WHITE + BLUE REDESIGN (v4)
   Light paper surfaces · navy (brand blue) structure · gold accents.
   Loads AFTER home.css + site.css and re-skins every section.
   Layout rules preserved; palette flipped from brown → white+blue.
   ========================================================= */

:root{
  /* light surfaces */
  --bg:        #f4f7fc;   /* page base */
  --bg-a:      #eef3fb;   /* pale-blue band */
  --bg-b:      #ffffff;   /* white band */
  --panel:     #ffffff;
  --panel-2:   #f4f8fd;
  --panel-bd:  #e4eaf6;
  --gold-bd:   rgba(244,180,0,.55);
  --tx:        #16224d;   /* primary navy ink (used on white cards) */
  --tx-2:      #51618f;
  --tx-3:      #8b97b8;
  --ring:      0 30px 70px -44px rgba(20,30,70,.22);

  /* remap home.css "earth" tokens → navy / white / blue */
  --soil:    #16224d;   /* primary navy (dark bands + light-section headings) */
  --soil-2:  #0f1838;   /* deepest navy (footer / loader / dark band) */
  --soil-3:  #24356f;
  --cream:   #ffffff;   /* cream section → white */
  --cream-2: #eef3fb;   /* → pale blue */
  --sand:    #dbe4f4;
  --ink:     #16224d;
  --ink-2:   #51618f;
  --muted:   #7d89ab;
  --line:    rgba(20,30,70,.12);

  /* keep gold accent; gold-d for light bands, gold-2 bright for dark bands */
  --gold:    #f4b400;
  --gold-2:  #ffce5c;
  --gold-d:  #c08e0d;
  --blue:    #1b3f9c;
  --blue-d:  #122a6e;
}

body{ background:var(--bg); color:var(--ink); }
::selection{ background:var(--gold); color:var(--soil-2); }

/* ---- section surfaces: white + pale-blue + navy bands ---- */
.section{ background:var(--bg-b); }                       /* default white */
.section.soil-deep{ background:linear-gradient(180deg,#16224d,#0f1838); color:#fff; }   /* navy band */
.section.soil{ background:linear-gradient(180deg,#1a285a,#101a3c); color:#fff; }         /* navy band */
.section.cream{ background:linear-gradient(180deg,#ffffff,#eef3fb); color:var(--ink); }  /* light */
.section.white{ background:#ffffff; color:var(--ink); }                                  /* light */
.section + .section{ box-shadow:inset 0 1px 0 rgba(20,30,70,.05); }
.section .grain{ opacity:0; }                              /* drop the noise overlay for clean light look */
.section.soil .grain,.section.soil-deep .grain{ opacity:.14; }

/* ---- type / heads ---- */
.section.cream .sec-head h2,.section.white .sec-head h2{ color:var(--soil); }
.section.cream .eyebrow,.section.white .eyebrow{ color:var(--gold-d); }
.section.soil .eyebrow,.section.soil-deep .eyebrow{ color:var(--gold-2); }
.section.cream .eyebrow::before,.section.white .eyebrow::before{ background:var(--gold); }
.section.cream .lead,.section.white .lead{ color:var(--ink-2); }
.section.soil .lead,.section.soil-deep .lead{ color:rgba(255,255,255,.7); }
.serif-g{ color:var(--blue); }
.serif-y{ color:var(--gold-2); }

/* ---- buttons ---- */
.btn-outline{ background:#fff; color:var(--soil); border:1.5px solid var(--panel-bd); }
.btn-outline:hover{ border-color:var(--blue); background:#fff; color:var(--blue); }
.section.soil .btn-outline,.section.soil-deep .btn-outline{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.22); }
.section.soil .btn-outline:hover,.section.soil-deep .btn-outline:hover{ border-color:var(--gold); background:rgba(255,255,255,.12); color:#fff; }
.btn-soil{ background:var(--blue); color:#fff; }
.btn-soil:hover{ background:var(--blue-d); color:#fff; transform:translateY(-2px); }
.btn-gold{ box-shadow:0 16px 38px -18px rgba(244,180,0,.7); }

/* =========================================================
   NAV — dark navy glass when scrolled
   ========================================================= */
.hnav.scrolled{ background:rgba(8,15,42,.88); backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 40px -16px rgba(0,0,0,.55); border-bottom:1px solid rgba(255,255,255,.07); }
.hnav.scrolled .hnav-links a{ color:rgba(255,255,255,.82); }
.hnav.scrolled .hnav-links a:hover{ color:#fff; }
.hnav.scrolled .hburger span{ background:#fff; }
/* logo stays inverted (white) on dark nav */
.hbrand .badge{ background:transparent; padding:0; }
.hbrand .badge img{ height:30px; filter:brightness(0) invert(1); transition:filter .35s; }
.hnav.scrolled .hbrand .badge img{ filter:brightness(0) invert(1); }

/* =========================================================
   LOADER + FOOTER tone
   ========================================================= */
#loader{ background:linear-gradient(160deg,#16224d,#0c142e); }
.foot{ background:linear-gradient(180deg,#16224d,#0f1838); }

/* =========================================================
   LINEUP / COVERFLOW  (light section)
   ========================================================= */
.cf-card .ph{ background:radial-gradient(120% 90% at 50% 10%, #2c3c7a, #16224d); border-color:rgba(20,30,70,.10);
  box-shadow:0 40px 70px -34px rgba(20,30,70,.45); }
.cf-card .cap .n{ color:var(--soil); }
.cf-panel .desc{ color:var(--ink-2); }
.cf-specs .sp b{ color:var(--soil); }
.cf-specs .sp small{ color:var(--muted); }
.cf-specs .sp + .sp{ border-left-color:var(--line); }
.cf-dots button{ background:rgba(20,30,70,.18); }
.cf-dots button.active{ background:var(--gold); }
.cf-arrow{ background:#fff; border:1px solid var(--panel-bd); color:var(--soil);
  box-shadow:0 18px 36px -18px rgba(20,30,70,.35); backdrop-filter:none; }
.cf-arrow:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.cf-card.is-active .ph{ box-shadow:0 50px 90px -34px rgba(20,30,70,.5), 0 0 0 2px var(--gold-bd); }

/* =========================================================
   COMPARE — premium dark table for #compare (.soil-deep)
   ========================================================= */
.compare-section { position:relative; overflow:hidden; padding-bottom: clamp(60px, 8vw, 100px); }
.compare-section::after { content:""; position:absolute; bottom:-10%; left:-5%; width:500px; height:500px; 
  background:radial-gradient(circle, rgba(244,180,0,0.06) 0%, transparent 70%); pointer-events:none; }

.compare-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 4px 0 20px; }
.compare-scroll::-webkit-scrollbar { height: 4px; }
.compare-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }

.compare { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:24px; 
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.4); backdrop-filter:blur(12px); overflow:hidden; min-width: 720px; table-layout: fixed; }

.cmp-head, .cmp-foot { background:rgba(255,255,255,0.02); border-color:rgba(255,255,255,0.12); }
.cmp-col, .cmp-val, .cmp-foot .cmp-cell { border-left-color:rgba(255,255,255,0.12); }
.cmp-row { border-top:1px solid rgba(255,255,255,0.08); transition:background .2s; }
.cmp-row:hover { background:rgba(255,255,255,0.04); }
.cmp-row:nth-child(even) { background:rgba(255,255,255,0.015); }

.cmp-corner { color:rgba(255,255,255,0.4); font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:0.1em; padding: 20px; }
.cmp-key { color:rgba(255,255,255,0.62); font-weight:600; font-size:14px; padding: 18px 22px; }
.cmp-val { color:#fff; font-weight:700; font-family:var(--display); font-size:15px; padding: 18px 22px; text-align:center; }
.cmp-val.best { color:var(--gold-2); background:rgba(244,180,0,0.12); box-shadow: inset 0 0 0 1px rgba(244,180,0,0.2); }

.cmp-col { padding: 12px; }
.cmp-col .cmp-media { aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; margin-bottom: 12px; background: rgba(0,0,0,0.2); }
.cmp-col select { width: 100%; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 10px 14px; color: #fff; font-family: var(--display); font-weight: 700; font-size: 14px; outline: none; }
.cmp-col select:focus { border-color: var(--gold); }

.cmp-foot .cmp-cell { padding: 20px; }
.cmp-foot .btn { width: 100%; white-space: nowrap; }

@media (max-width:768px){
  .compare-scroll { margin: 0 -20px; width: calc(100% + 40px); padding: 4px 20px 20px; }
  .compare { min-width: 600px; }
  .cmp-key { width: 130px; font-size: 13px; padding-left: 15px; }
  .cmp-val { font-size: 14px; padding: 15px; }
  .cmp-col select { font-size: 13px; padding: 8px 10px; }
}

/* =========================================================
   FINANCE / EMI  (light section)
   ========================================================= */
.emi-controls{ background:#fff; border:1px solid var(--panel-bd); box-shadow:var(--ring); }
.efield label{ color:var(--ink-2); }
.efield .eval{ color:var(--soil); }
.erange{ background:rgba(20,30,70,.12); }
.escale{ color:var(--muted); }
.emi-result{ background:linear-gradient(160deg,#1a285a,#0f1838); border:1px solid var(--panel-bd); color:#fff; }
.emi-drive{ border:1px solid rgba(255,255,255,.14); }

/* =========================================================
   PARTS — clean white cards (light section)
   ========================================================= */
.part{ background:#fff; border:1px solid var(--panel-bd); box-shadow:0 24px 50px -34px rgba(20,30,70,.18); }
.part:hover{ background:#fff; box-shadow:0 34px 64px -34px rgba(20,30,70,.28); border-color:var(--gold-bd); transform:translateY(-4px); }
.part-top{ background:radial-gradient(120% 90% at 50% 10%,#2c3c7a,#16224d); }
.part-ic{ color:#fff; opacity:.14; }
.part-body h3{ color:var(--soil); }
.part-body p{ color:var(--ink-2); }
.part-price{ color:var(--blue); }
.part-price small{ color:var(--muted); }
.part-tag{ background:var(--gold); color:var(--soil-2); }
.part-enq{ background:var(--blue); color:#fff; }
.part-enq:hover{ background:var(--blue-d); }

/* =========================================================
   OVERVIEW STAT band  (navy)
   ========================================================= */
.stats4{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.16); }
.stat4{ background:#16224d; }
.stat4:hover{ background:#1c2c63; }
.stat4 .n{ color:#fff; }
.stat4 .n span{ color:var(--gold-2); }
.stat4 .t{ color:rgba(255,255,255,.66); }

/* =========================================================
   WHY BUY — white benefit cards on navy
   ========================================================= */
.sec-head.center{ flex-direction:column; align-items:center; text-align:center; }
.sec-head.center .lead{ max-width:56ch; }
.why2{ display:grid; grid-template-columns:1.02fr 1.18fr; gap:clamp(20px,3vw,40px); align-items:stretch; position:relative; z-index:2; }
.why2-media{ position:relative; border-radius:26px; overflow:hidden; min-height:100%;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 50px 90px -50px rgba(0,0,0,.5); }
.why2-media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.why2-media::after{ content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(15,24,56,.08) 0%, rgba(15,24,56,.05) 45%, rgba(15,24,56,.78) 100%); }
.why2-badge{ position:absolute; left:24px; bottom:24px; z-index:3; }
.why2-badge b{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(46px,5.4vw,70px); color:#fff; line-height:.86; }
.why2-badge b span{ font-size:.34em; color:var(--gold-2); vertical-align:.7em; margin-left:2px; }
.why2-badge span{ display:block; margin-top:6px; color:var(--gold-2); font-family:var(--display); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
.why2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.why2-card{ padding:26px; border-radius:20px; background:#fff; border:1px solid rgba(255,255,255,.6);
  box-shadow:0 24px 50px -34px rgba(0,0,0,.4); transition:transform .5s var(--ease-out), box-shadow .4s; }
.why2-card:hover{ transform:translateY(-5px); box-shadow:0 34px 64px -30px rgba(0,0,0,.5); }
.why2-card .ic{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(145deg,#1d2c63,#16224d); color:var(--gold-2); }
.why2-card .ic svg{ width:24px; height:24px; }
.why2-card h3{ font-family:var(--display); font-weight:800; font-size:18.5px; color:var(--soil); margin-top:18px; }
.why2-card p{ color:var(--ink-2); font-size:14.5px; margin-top:7px; }
@media (max-width:980px){
  .why2{ grid-template-columns:1fr; }
  .why2-media{ min-height:300px; aspect-ratio:16/10; }
}
@media (max-width:560px){
  .why2-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   SERVICE — radar (deep navy card) + steps + booking (white)
   ========================================================= */
.svc-net{ position:relative; border-radius:24px; padding:clamp(26px,3vw,40px); overflow:hidden;
  background:linear-gradient(160deg,#16224d,#0c142e); border:1px solid rgba(255,255,255,.12); box-shadow:var(--ring);
  display:flex; flex-direction:column; gap:22px; }
.radar{ position:relative; width:min(300px,76%); aspect-ratio:1; margin:6px auto 4px; }
.radar::before{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(circle, rgba(244,180,0,.12), transparent 72%); }
.r-ring{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(255,255,255,.14); }
.r-ring{ width:100%; height:100%; }
.r-ring.r2{ width:66%; height:66%; }
.r-ring.r3{ width:33%; height:33%; }
.r-sweep{ position:absolute; inset:0; border-radius:50%; overflow:hidden; transform-origin:center;
  background:conic-gradient(rgba(244,180,0,0) 0deg, rgba(244,180,0,.34) 48deg, rgba(244,180,0,0) 62deg);
  animation:radarSweep 4.6s linear infinite; }
@keyframes radarSweep{ to{ transform:rotate(360deg);} }
.r-hub{ position:absolute; left:50%; top:50%; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--gold); box-shadow:0 0 0 4px rgba(244,180,0,.22); z-index:3; }
.r-hub::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--gold-2); transform-origin:center; animation:apulse 2.2s ease-out infinite; }
.r-pin{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--gold-2); transform:translate(-50%,-50%);
  box-shadow:0 0 10px rgba(255,206,92,.85); z-index:2; animation:pinTwinkle 3s ease-in-out infinite; }
.r-pin.p1{ left:26%; top:32%; } .r-pin.p2{ left:73%; top:27%; animation-delay:.6s; }
.r-pin.p3{ left:31%; top:73%; animation-delay:1.2s; } .r-pin.p4{ left:70%; top:69%; animation-delay:1.8s; }
@keyframes pinTwinkle{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.svc-stats{ display:grid; gap:13px; }
.svc-stat{ display:flex; align-items:center; gap:16px; padding:15px 18px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.svc-stat b{ font-family:var(--display); font-weight:800; font-size:30px; color:#fff; line-height:1; flex:none; min-width:92px; }
.svc-stat b i{ font-style:normal; font-size:.46em; color:var(--gold-2); margin-left:1px; }
.svc-stat span{ color:rgba(255,255,255,.7); font-size:14px; }
.svc-net .area-pulse{ margin-top:0; justify-content:center; }
@media (max-width:1024px){ .svc-net{ order:2; } }

.steps{ position:relative; }
@media (min-width:1025px){
  .steps::before{ content:""; position:absolute; left:8%; right:8%; top:44px; height:1px; z-index:0;
    background:repeating-linear-gradient(90deg, var(--gold-bd) 0 8px, transparent 8px 18px); opacity:.55; }
}
.step{ position:relative; z-index:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.step:hover{ background:rgba(255,255,255,.1); border-color:var(--gold-bd); }
.step .no{ font-size:13px; color:var(--gold-2); }

/* booking — white card on navy */
.booking{ background:#fff; border:1px solid var(--panel-bd); color:var(--soil); box-shadow:var(--ring); }
.booking h3{ color:var(--soil); }
.booking .bsub{ color:var(--ink-2); }
.bfield label{ color:var(--ink-2); }
.bfield input,.bfield select{ background:#fff; border:1.5px solid var(--panel-bd); color:var(--soil); }
.bfield input::placeholder{ color:var(--muted); }
.bfield select option{ background:#fff; color:var(--soil); }
.bfield input:focus,.bfield select:focus{ background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(27,63,156,.14); }
.bslot{ background:var(--bg-a); border:1.5px solid var(--panel-bd); color:var(--soil); }
.bslot:hover{ border-color:var(--blue); }
.bslot.sel{ background:var(--blue); color:#fff; border-color:var(--blue); }
.booking .ibtn{ background:var(--blue); color:#fff; }
.booking .ibtn:hover{ background:var(--blue-d); }

/* =========================================================
   CONTACT / TALK  (navy band, white card)
   ========================================================= */
.talk-info h2,.talk-info p{ color:#fff; }
.talk-info p{ color:rgba(255,255,255,.72); }
.talk-row .ic{ background:rgba(255,255,255,.08); color:var(--gold-2); }
.talk-row b{ color:#fff; }
.talk-row span{ color:rgba(255,255,255,.6); }
.talk-card{ background:#fff; border:1px solid var(--panel-bd); color:var(--soil); box-shadow:var(--ring); }
.talk-card h3{ color:var(--soil); }
.talk-card .bsub{ color:var(--ink-2) !important; }

/* =========================================================
   INQUIRY MODAL — light card
   ========================================================= */
.imodal{ background:radial-gradient(120% 120% at 70% 0%, rgba(22,34,77,.5), rgba(10,16,38,.78)); }
.ibox{ background:#fff; border:1px solid var(--panel-bd); color:var(--soil); }
.ibox h3{ color:var(--soil); }
.isub{ color:var(--ink-2); }
.isub b{ color:var(--soil); }
.iclose{ background:var(--bg-a); color:var(--ink-2); }
.iclose:hover{ background:#e6edf8; color:var(--soil); }
.ilab{ color:var(--ink-2); }
.ifield input,.iotp input{ background:#fff; border:1.5px solid var(--panel-bd); color:var(--soil); }
.ifield input::placeholder{ color:var(--muted); }
.ifield input:focus,.iotp input:focus{ background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(27,63,156,.16); }
.iotp input{ color:var(--soil); }
.iprog i{ background:rgba(20,30,70,.12); }
.ibtn{ background:var(--blue); color:#fff; }
.ibtn:hover{ background:var(--blue-d); color:#fff; }
.ihint{ color:var(--muted); }
.iresend{ color:var(--muted); }

/* =========================================================
   HERO — cinematic navy/blue
   ========================================================= */
.hero{ background:radial-gradient(130% 100% at 72% 6%, #21336f, #0d1530 70%); }
.hero-grade{ background:
   linear-gradient(90deg, rgba(11,18,42,.9) 0%, rgba(11,18,42,.52) 34%, rgba(11,18,42,.05) 62%, rgba(11,18,42,.24) 100%),
   linear-gradient(180deg, rgba(11,18,42,.42) 0%, rgba(11,18,42,0) 26%, rgba(11,18,42,.12) 56%, var(--bg) 100%); }
.hero-sun{ width:170px; height:170px; right:13%; top:13%; opacity:.55; }
.hero-h{ letter-spacing:-.04em; }
.hero-foot{ gap:0; border-top:1px solid rgba(255,255,255,.16); padding-top:26px; }
.hero-foot > div{ padding-right:38px; margin-right:38px; border-right:1px solid rgba(255,255,255,.16); }
.hero-foot > div:last-child{ border-right:none; margin-right:0; padding-right:0; }
.scrollcue{ bottom:36px; }
@media (max-width:760px){ .hero-foot > div{ padding-right:22px; margin-right:22px; } }

.hero-video{ filter:blur(9px) brightness(.7) saturate(1.2); transform:scale(1.18); opacity:0; }
.hero-video.ready{ opacity:.42; animation:heroZoom2 26s ease-in-out infinite alternate; }
@keyframes heroZoom2{ 0%{ transform:scale(1.16);} 100%{ transform:scale(1.24);} }
.hero-noise{ position:absolute; inset:0; z-index:1; opacity:.04; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='hn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hn)'/%3E%3C/svg%3E"); }

.hero-in{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(28px,5vw,72px); align-items:center; }
.hero-copy{ max-width:660px; }

.hero-rig{ position:relative; opacity:0; transform:translateX(54px) scale(.95);
  transition:opacity 1.1s var(--ease-out) .4s, transform 1.2s var(--ease-out) .4s; will-change:transform; }
.hero.in .hero-rig{ opacity:1; transform:none; }
.hero-glow{ position:absolute; inset:-14% -10%; z-index:0; border-radius:50%;
  background:radial-gradient(circle at 58% 42%, rgba(64,110,220,.45), transparent 62%); filter:blur(40px); }
.hero-card{ position:relative; z-index:1; border-radius:28px; overflow:hidden; aspect-ratio:4/3.3;
  border:1px solid rgba(255,255,255,.2); box-shadow:0 60px 120px -40px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06);
  animation:heroFloat 7s ease-in-out infinite; }
.hero-card image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.hero-card-shade{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, transparent 46%, rgba(11,18,42,.66)); }
@keyframes heroFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }
.hero-card-badge{ position:absolute; left:22px; bottom:20px; z-index:3; }
.hero-card-badge b{ font-family:var(--display); font-weight:900; font-size:clamp(38px,4.4vw,52px); color:#fff; line-height:.85; display:block; }
.hero-card-badge b i{ font-style:normal; font-size:.4em; color:var(--gold-2); margin-left:4px; }
.hero-card-badge span{ display:block; margin-top:8px; color:rgba(255,255,255,.82); font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.03em; }
.hero-chip{ position:absolute; z-index:4; display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2); color:#fff;
  font-family:var(--display); font-weight:700; font-size:13px; padding:10px 15px; border-radius:100px;
  box-shadow:0 18px 32px -14px rgba(0,0,0,.5); }
.hero-chip .d{ width:8px; height:8px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 10px rgba(255,206,92,.9); }
.hero-chip.hc1{ top:7%; right:-3%; animation:heroFloat 6s ease-in-out infinite .4s; }
.hero-chip.hc2{ bottom:15%; left:-5%; animation:heroFloat 6.8s ease-in-out infinite 1.1s; }
@media (max-width:920px){
  .hero-in{ grid-template-columns:1fr; gap:36px; padding-top:118px; padding-bottom:70px; }
  .hero-rig{ max-width:460px; }
  .hero-chip{ display:none; }
  .hero{ min-height:auto; }
}

/* =========================================================
   DETAIL OVERLAYS — tractor + part (light)
   ========================================================= */
.tdetail,.pdetail{ position:fixed; inset:0; z-index:9300; display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
  background:radial-gradient(120% 120% at 70% 0%, rgba(22,34,77,.5), rgba(8,12,30,.82)); backdrop-filter:blur(10px); }
.tdetail.open,.pdetail.open{ opacity:1; visibility:visible; }
.td-card,.pd-card{ position:relative; max-height:90vh; overflow-y:auto; border-radius:26px;
  background:#fff; border:1px solid var(--panel-bd);
  box-shadow:0 60px 130px -40px rgba(0,0,0,.5);
  transform:translateY(30px) scale(.97); opacity:0; transition:transform .55s var(--ease-out), opacity .4s; }
.td-card{ width:min(940px,100%); } .pd-card{ width:min(540px,100%); }
.tdetail.open .td-card,.pdetail.open .pd-card{ transform:none; opacity:1; }
.td-close,.pd-close{ position:absolute; top:15px; right:15px; z-index:6; width:40px; height:40px; border-radius:50%;
  background:var(--bg-a); color:var(--ink-2); display:grid; place-items:center; transition:.3s; }
.td-close:hover,.pd-close:hover{ background:#e6edf8; color:var(--soil); }
.td-close svg,.pd-close svg{ width:18px; height:18px; }

.td-hero{ display:grid; grid-template-columns:1.04fr 1fr; gap:clamp(20px,3vw,36px); padding:clamp(22px,3vw,38px); }
.td-media{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:16/12; border:1px solid var(--panel-bd);
  background:radial-gradient(120% 90% at 50% 10%,#2c3c7a,#16224d); }
.td-media img{ width:100%; height:100%; object-fit:cover; }
.td-hp{ position:absolute; right:14px; top:14px; background:var(--gold); color:var(--soil-2); border-radius:12px; padding:8px 12px;
  font-family:var(--display); font-weight:800; line-height:1; box-shadow:0 10px 22px -8px rgba(244,180,0,.6); }
.td-hp b{ font-size:22px; }
.td-series{ font-family:var(--display); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:12.5px; color:var(--blue); }
.td-name{ font-family:var(--display); font-weight:800; font-size:clamp(30px,4vw,46px); color:var(--soil); line-height:1; margin-top:8px; letter-spacing:-.02em; }
.td-desc{ color:var(--ink-2); margin-top:14px; font-size:15px; }
.td-chips{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:20px; }
.td-chip{ background:var(--bg-a); border:1px solid var(--panel-bd); border-radius:12px; padding:12px 8px; text-align:center; }
.td-chip b{ display:block; font-family:var(--display); font-weight:800; font-size:17px; color:var(--soil); line-height:1; }
.td-chip small{ color:var(--muted); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; }
.td-price{ display:flex; align-items:baseline; gap:12px; margin-top:20px; }
.td-price small{ color:var(--muted); font-size:12.5px; }
.td-price b{ font-family:var(--display); font-weight:800; font-size:26px; color:var(--blue); }
.td-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.td-actions .btn{ --pad:14px 22px; font-size:15px; }
.td-specs{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:0 clamp(22px,3vw,38px) clamp(24px,3vw,38px); }
.td-group{ background:var(--bg-a); border:1px solid var(--panel-bd); border-radius:16px; padding:20px 22px;
  opacity:0; transform:translateY(16px); animation:tdRise .6s var(--ease-out) forwards; animation-delay:calc(var(--gi) * .08s + .15s); }
.tdetail:not(.open) .td-group{ animation:none; opacity:0; }
@keyframes tdRise{ to{ opacity:1; transform:none; } }
.td-group h4{ font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); margin-bottom:10px; }
.td-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); }
.td-row:last-child{ border-bottom:none; }
.td-row span{ color:var(--ink-2); font-size:14px; }
.td-row b{ font-family:var(--display); font-weight:700; color:var(--soil); font-size:14.5px; }
@media (max-width:760px){ .td-hero{ grid-template-columns:1fr; } .td-specs{ grid-template-columns:1fr; } }

.pd-media{ height:150px; display:grid; place-items:center; color:#fff;
  background:radial-gradient(120% 90% at 50% 10%,#2c3c7a,#16224d); border-bottom:1px solid var(--panel-bd); }
.pd-media svg{ width:72px; height:72px; opacity:.92; }
.pd-body{ padding:clamp(22px,3vw,32px); }
.pd-tag{ display:inline-block; background:var(--gold); color:var(--soil-2); font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.04em; padding:5px 11px; border-radius:100px; }
.pd-name{ font-family:var(--display); font-weight:800; font-size:26px; color:var(--soil); margin-top:14px; }
.pd-desc{ color:var(--ink-2); margin-top:8px; font-size:15px; }
.pd-list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
.pd-list li{ position:relative; padding-left:28px; color:var(--soil); font-size:14.5px; }
.pd-list li::before{ content:""; position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%; background:rgba(27,63,156,.12); }
.pd-list li::after{ content:""; position:absolute; left:6px; top:4px; width:4px; height:8px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(45deg); }
.pd-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; padding-top:20px; border-top:1px solid var(--panel-bd); }
.pd-price{ font-family:var(--display); font-weight:800; font-size:22px; color:var(--soil); }
.pd-price small{ display:block; font-family:var(--body); font-weight:500; font-size:11.5px; color:var(--muted); }

/* clickable affordances */
.cf-card.is-active{ cursor:pointer; }
.part{ cursor:pointer; }

/* media ken-burns settle on scroll-in */
.why2-media image-slot{ transform:scale(1.08); transition:transform 1.7s var(--ease-out); }
.why2-media.rin image-slot{ transform:scale(1); }

/* =========================================================
   PREMIUM TYPE — Archivo display
   ========================================================= */
:root{ --display:"Archivo", system-ui, sans-serif; }
h1,h2,h3,.hero-h,.eyebrow,.btn{ font-family:var(--display); }
h1,h2{ font-weight:900; letter-spacing:-.03em; }
.hero-h{ font-weight:900; }
.eyebrow{ font-weight:700; }

/* coverflow active card sizing + premium cinematic slide */
.cf-stage{ height:clamp(330px,40vw,500px); perspective:1900px; }
.cf-card{ transition:transform .85s cubic-bezier(.22,.61,.36,1), opacity .55s ease, filter .55s ease; }
.cf-card .ph{ transition:box-shadow .55s var(--ease-out), filter .55s var(--ease-out); }
.cf-card .ph image-slot{ transition:transform 1s var(--ease-out); }
.cf-card.is-active .ph image-slot{ transform:scale(1.06); }
.cf-card.is-near .ph{ filter:saturate(.92) brightness(.78); }
.cf-card.is-far .ph{ filter:saturate(.68) brightness(.58) blur(2px); }
.cf-card.is-far .cap{ display:none; }
.cf-card.is-active .ph{ box-shadow:0 60px 100px -38px rgba(20,30,70,.55), 0 0 0 2px var(--gold-bd); }
.cf-card.is-active .ph .hp{ box-shadow:0 14px 28px -8px rgba(244,180,0,.7); }

/* model-name tab row (replaces dots + compare button) */
.cf-tabs{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px;
  margin-top:clamp(20px,2.6vw,34px); position:relative; z-index:5; }
.cf-tab{ font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--muted); white-space:nowrap;
  padding:9px 17px; border-radius:100px; border:1.5px solid transparent; background:none; cursor:pointer;
  transition:color .3s var(--ease-out), background .3s var(--ease-out), border-color .3s, transform .3s var(--ease-out); }
.cf-tab:hover{ color:var(--soil); transform:translateY(-1px); }
.cf-tab.active{ color:var(--soil); background:#fff; border-color:var(--panel-bd); box-shadow:var(--ring); }

/* coverflow on a navy band (#lineup is .soil-deep) — light text/specs/tabs */
.section.soil-deep .cf-panel .series{ color:var(--gold-2); }
.section.soil-deep .cf-panel .desc{ color:rgba(255,255,255,.72); }
.section.soil-deep .cf-specs .sp b{ color:#fff; }
.section.soil-deep .cf-specs .sp b span{ color:var(--gold-2); }
.section.soil-deep .cf-specs .sp small{ color:rgba(255,255,255,.6); }
.section.soil-deep .cf-specs .sp + .sp{ border-left-color:rgba(255,255,255,.16); }
.section.soil-deep .cf-tab{ color:rgba(255,255,255,.62); }
.section.soil-deep .cf-tab:hover{ color:#fff; }
.section.soil-deep .cf-tab.active{ color:var(--soil); background:#fff; border-color:transparent;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.6); }
.section.soil-deep .cf-card .cap .n{ color:#fff; }

.emi-controls{ display:flex; flex-direction:column; justify-content:center; gap:24px; }
.emi-controls .efield{ margin-bottom:0; }
@media (max-width:1024px){ .emi-result{ margin-top:6px; } }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ padding:clamp(56px,7vw,92px) 0 32px; border-top:1px solid rgba(255,255,255,.1); }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.5fr; gap:clamp(28px,4vw,56px); }
.foot-badge{ background:transparent; border-radius:0; padding:0; display:inline-flex; }
.foot-badge img{ height:34px; width:auto; filter:brightness(0) invert(1); }
.foot-brand p{ color:rgba(255,255,255,.6); font-size:14.5px; margin-top:18px; max-width:34ch; }
.foot-social{ display:flex; gap:12px; margin-top:22px; }
.foot-social a{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.7); transition:.3s var(--ease-out); }
.foot-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--soil-2); transform:translateY(-3px); }
.foot-social svg{ width:20px; height:20px; }
.foot-col h4{ font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); margin-bottom:18px; }
.foot-col{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.foot-col a{ color:rgba(255,255,255,.66); font-family:var(--display); font-weight:600; font-size:15px; transition:color .3s, padding .3s; }
.foot-col a:hover{ color:var(--gold-2); padding-left:4px; }
.foot-contact p{ color:rgba(255,255,255,.66); font-size:14.5px; line-height:1.6; }
.foot-phone{ font-family:var(--display); font-weight:800; font-size:21px; color:#fff !important; margin:4px 0 6px; }
.foot-phone:hover{ color:var(--gold-2) !important; padding-left:0 !important; }
.foot-contact .btn{ --pad:13px 22px; font-size:14.5px; margin-top:8px; }
.foot-bar{ margin-top:clamp(36px,5vw,56px); padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:rgba(255,255,255,.45); font-size:13.5px; }
@media (max-width:880px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }