/* ============================================================
   HEAVY DUTY PARTS — HOMEPAGE STYLES
   Builds on ds.css (tokens + components). Layout, header, hero,
   section rhythm, responsive, tweaks panel, mobile drawer.
   ============================================================ */

.wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.wrap-wide{ max-width:1380px; margin:0 auto; padding:0 var(--gutter); }
section{ scroll-margin-top:120px; }
.eyebrow-center{ justify-content:center; }

/* section rhythm */
.band{ padding:clamp(56px,8vw,104px) 0; }
.band-paper{ background:var(--paper); }
.band-white{ background:var(--white); }
.band-steel{ background:var(--steel-075); }
.band-dark{ background:var(--charcoal); color:#fff; }
.band-ink{ background:var(--ink); color:#fff; }
.sec-title{ display:flex; flex-direction:column; gap:14px; margin-bottom:44px; }
.sec-title .t-h2{ max-width:20ch; }
.sec-title.center{ align-items:center; text-align:center; }
.sec-flex{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:40px; }

/* =================================================================
   HEADER
   ================================================================= */
.contact-strip{
  background:var(--ink); color:var(--steel-300);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  border-bottom:1px solid var(--steel-700);
}
.contact-strip .wrap-wide{ display:flex; justify-content:space-between; align-items:center; height:38px; gap:16px; }
.contact-strip a{ color:var(--steel-300); text-decoration:none; display:inline-flex; align-items:center; gap:7px; transition:color .15s; }
.contact-strip a:hover{ color:var(--yellow); }
.contact-strip .grp{ display:flex; gap:22px; align-items:center; }
.contact-strip svg{ width:13px; height:13px; }
@media(max-width:760px){ .contact-strip .hide-sm{ display:none; } .contact-strip .wrap-wide{ justify-content:center; } }

.site-header{
  position:sticky; top:0; z-index:60;
  transition:background .25s ease, box-shadow .25s ease, border-color .25s;
}
.site-header .bar{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
.brand .logo-badge{ width:46px; height:46px; }
.brand .logo-word .l1{ font-size:24px; }
.brand .logo-word .l2{ font-size:11px; }

.mainnav{ display:flex; align-items:center; gap:4px; }
.mainnav a{
  font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  font-size:15px; text-decoration:none; padding:9px 13px; border-radius:var(--r-xs);
  position:relative; transition:color .15s, background .15s;
}
.mainnav a .cr{ position:absolute; left:13px; right:13px; bottom:4px; height:2px; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.mainnav a:hover .cr, .mainnav a.active .cr{ transform:scaleX(1); }
.header-actions{ display:flex; align-items:center; gap:12px; flex:none; }
.icon-btn{ width:46px; height:46px; border-radius:var(--r-sm); display:grid; place-items:center; border:1.5px solid; cursor:pointer; background:transparent; transition:.18s; text-decoration:none; }

/* header — DARK variant (default) */
.site-header{ background:var(--ink); border-bottom:1px solid var(--steel-700); }
.site-header .logo-word .l1{ color:#fff; }
.site-header .logo-word .l2{ color:var(--steel-300); }
.site-header .logo-word .l1 .pro{ color:var(--yellow); }
.site-header .mainnav a{ color:#E7E8EA; }
.site-header .mainnav a:hover{ color:#fff; }
.site-header .icon-btn{ border-color:var(--steel-700); color:#fff; }
.site-header .icon-btn:hover{ border-color:var(--yellow); color:var(--yellow); }

/* header — WHITE variant (tweak) */
[data-header="white"] .site-header{ background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--steel-150); }
[data-header="white"] .site-header .logo-word .l1{ color:var(--ink); }
[data-header="white"] .site-header .logo-word .l2{ color:var(--steel-500); }
[data-header="white"] .site-header .logo-word .l1 .pro{ color:var(--yellow-dark); }
[data-header="white"] .site-header .mainnav a{ color:var(--ink); }
[data-header="white"] .site-header .mainnav a:hover{ color:var(--yellow-dark); }
[data-header="white"] .site-header .icon-btn{ border-color:var(--steel-150); color:var(--ink); }
[data-header="white"] .site-header .icon-btn:hover{ border-color:var(--yellow); color:var(--yellow-dark); }

.menu-toggle{ display:none; }
@media(max-width:1080px){
  .mainnav{ display:none; }
  .header-actions .btn-quote-text{ display:none; }
  .menu-toggle{ display:grid; }
}

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:90; visibility:hidden; }
.drawer .scrim{ position:absolute; inset:0; background:rgba(11,11,12,.6); opacity:0; transition:opacity .25s; }
.drawer .panel-d{ position:absolute; top:0; right:0; bottom:0; width:min(360px,86vw); background:var(--ink); color:#fff; transform:translateX(100%); transition:transform .3s cubic-bezier(.16,1,.3,1); display:flex; flex-direction:column; padding:22px; overflow:auto; }
.drawer.open{ visibility:visible; }
.drawer.open .scrim{ opacity:1; }
.drawer.open .panel-d{ transform:translateX(0); }
.drawer .dnav{ display:flex; flex-direction:column; gap:2px; margin-top:18px; }
.drawer .dnav a{ font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:22px; color:#fff; text-decoration:none; padding:14px 0; border-bottom:1px solid var(--steel-700); }
.drawer .dnav a:hover{ color:var(--yellow); }

/* =================================================================
   HERO
   ================================================================= */
.hero{ position:relative; overflow:hidden; background:var(--ink); color:#fff; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:0; align-items:stretch; min-height:600px; }
.hero-copy{ padding:clamp(48px,6vw,84px) clamp(24px,4vw,64px); display:flex; flex-direction:column; justify-content:center; position:relative; z-index:3; }
.hero-copy .t-display{ margin:18px 0 0; }
.hero-copy .t-display .amp{ color:var(--yellow); }
.hero-sub{ color:var(--steel-300); font-size:18px; line-height:1.55; max-width:48ch; margin:22px 0 0; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.hero-trust{ display:flex; gap:10px 22px; flex-wrap:wrap; margin-top:28px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-500); }
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; }
.hero-trust b{ width:6px; height:6px; border-radius:50%; background:var(--yellow); }

.hero-search-wrap{ margin-top:30px; }
.hero-search-wrap .label{ color:var(--steel-300); }

.hero-media{ position:relative; min-height:420px; }
.hero-media .ph{ position:absolute; inset:0; }
.hero-media .ph .ph-in{ margin-bottom:60px; }
.hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--ink) 0%,rgba(11,11,12,.2) 22%,transparent 50%); pointer-events:none; z-index:2; }
.hero-watermark{ position:absolute; right:-40px; bottom:-50px; font-family:var(--display); font-weight:800; font-size:clamp(140px,20vw,300px); line-height:.8; color:rgba(255,255,255,.04); letter-spacing:-.04em; z-index:1; pointer-events:none; }
.hero-locbadge{
  position:absolute; left:clamp(24px,4vw,64px); bottom:24px; z-index:4;
  display:inline-flex; align-items:center; gap:12px; background:var(--yellow); color:var(--ink);
  padding:11px 16px; border-radius:var(--r-sm); font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; box-shadow:var(--sh-md);
}
.hero-locbadge svg{ width:18px; height:18px; flex:none; }
.hero-locbadge b{ font-weight:600; }

/* hero — STACKED variant (tweak): full-bleed image behind centred copy */
[data-hero="stacked"] .hero-grid{ grid-template-columns:1fr; }
[data-hero="stacked"] .hero-media{ position:absolute; inset:0; min-height:0; }
[data-hero="stacked"] .hero-media::after{ background:linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.55) 50%,rgba(11,11,12,.88) 100%); }
[data-hero="stacked"] .hero-copy{ position:relative; z-index:5; max-width:780px; margin:0 auto; text-align:center; align-items:center; padding-block:clamp(80px,12vw,150px); }
[data-hero="stacked"] .hero-sub{ margin-inline:auto; }
[data-hero="stacked"] .hero-ctas, [data-hero="stacked"] .hero-trust{ justify-content:center; }
[data-hero="stacked"] .parts-search{ width:100%; max-width:620px; }
[data-hero="stacked"] .hero-watermark{ display:none; }
[data-hero="stacked"] .hero-locbadge{ left:50%; transform:translateX(-50%); }

@media(max-width:920px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ order:-1; min-height:300px; }
  .hero-media::after{ background:linear-gradient(180deg,transparent 40%,var(--ink) 100%); }
  .hero-watermark{ display:none; }
}

/* =================================================================
   FINDER (4 help cards)
   ================================================================= */
.finder{ margin-top:-44px; position:relative; z-index:10; }
.finder-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.finder .help-card{ box-shadow:var(--sh-md); }
@media(max-width:860px){ .finder-grid{ grid-template-columns:repeat(2,1fr); } .finder{ margin-top:-30px; } }
@media(max-width:480px){ .finder-grid{ grid-template-columns:1fr; } }

/* =================================================================
   CATEGORY GRID
   ================================================================= */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cat-card .thumb .ph{ position:absolute; inset:0; }
@media(max-width:1080px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .cat-grid{ grid-template-columns:1fr; } }

/* =================================================================
   POPULAR PARTS STRIP
   ================================================================= */
.parts-strip{ display:flex; gap:18px; overflow-x:auto; padding:6px 4px 22px; scroll-snap-type:x mandatory; }
.parts-strip::-webkit-scrollbar{ height:8px; }
.parts-strip::-webkit-scrollbar-thumb{ background:var(--steel-300); border-radius:100px; }
.parts-strip .prod-tile{ flex:0 0 270px; scroll-snap-align:start; }
.prod-tile .thumb{ position:relative; overflow:hidden; }
.prod-tile .thumb .ph{ position:absolute; inset:0; }

/* =================================================================
   WHY HDP
   ================================================================= */
.why-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.pillars{ display:grid; grid-template-columns:1fr 1fr; gap:26px 36px; }
.pillar{ display:flex; flex-direction:column; gap:8px; }
.pillar .ic{ width:44px; height:44px; border-radius:var(--r-sm); display:grid; place-items:center; background:rgba(252,187,32,.14); color:var(--yellow); margin-bottom:4px; }
.pillar h4{ color:#fff; }
.pillar p{ color:var(--steel-300); font-size:14.5px; margin:0; }
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:18px; }
.stats-row .stat .n{ color:#fff; }
.stats-row .stat .l{ color:var(--steel-300); }
.confirm-tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--yellow); border:1px dashed var(--steel-700); border-radius:100px; padding:5px 12px; margin-top:22px; }
@media(max-width:920px){ .why-grid{ grid-template-columns:1fr; gap:40px; } }
@media(max-width:560px){ .pillars{ grid-template-columns:1fr; } .stats-row{ grid-template-columns:1fr 1fr; } }

/* =================================================================
   SERVICES
   ================================================================= */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc-card{ position:relative; border-radius:var(--r-md); overflow:hidden; min-height:300px; display:flex; align-items:flex-end; color:#fff; text-decoration:none; }
.svc-card .ph{ position:absolute; inset:0; }
.svc-card .ph .ph-in{ display:none; }
.svc-card .ph .tag{ z-index:2; }
.svc-card .ov{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,11,12,.1) 30%,rgba(11,11,12,.9) 100%); z-index:1; }
.svc-card .c{ position:relative; z-index:2; padding:24px; }
.svc-card .num{ font-family:var(--mono); font-size:12px; color:var(--yellow); letter-spacing:.1em; }
.svc-card h4{ color:#fff; margin:8px 0 6px; }
.svc-card p{ color:var(--steel-300); font-size:14px; margin:0; }
.svc-card .arrow-link{ color:#fff; margin-top:14px; }
.svc-tall{ grid-row:span 2; }
@media(max-width:860px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } .svc-tall{ grid-row:span 1; } }
@media(max-width:520px){ .svc-grid{ grid-template-columns:1fr; } }

/* =================================================================
   WE'VE MOVED
   ================================================================= */
.moved{ position:relative; overflow:hidden; }
.moved-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:0; align-items:stretch; }
.moved-copy{ padding:clamp(48px,7vw,96px) clamp(24px,4vw,72px); position:relative; z-index:2; }
.moved-stripe{ height:6px; background:repeating-linear-gradient(45deg,var(--yellow) 0 16px,var(--ink) 16px 32px); }
.addr-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:28px 0; }
.addr{ border:1px solid var(--steel-700); border-radius:var(--r-md); padding:22px; background:rgba(255,255,255,.02); }
.addr.new{ border-color:var(--yellow); background:rgba(252,187,32,.06); }
.addr .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-300); }
.addr.new .tag{ color:var(--yellow); }
.addr address{ font-style:normal; color:#fff; line-height:1.6; margin-top:10px; font-size:15.5px; }
.moved-media{ position:relative; min-height:360px; }
.moved-media .ph{ position:absolute; inset:0; }
.moved-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--charcoal),transparent 45%); z-index:1; }
@media(max-width:920px){ .moved-grid{ grid-template-columns:1fr; } .moved-media{ min-height:240px; order:-1; } .addr-cards{ grid-template-columns:1fr; } }

/* =================================================================
   TESTIMONIALS
   ================================================================= */
.tst-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.quote-card .avatar .ph{ width:46px; height:46px; border-radius:50%; }
.quote-card .avatar .ph .ph-in{ display:none; }
@media(max-width:860px){ .tst-grid{ grid-template-columns:1fr; } }

/* =================================================================
   FINAL CTA
   ================================================================= */
.final-cta{ text-align:center; position:relative; overflow:hidden; }
.final-cta .inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:24px; }
.final-cta .ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.final-cta .bigword{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--display); font-weight:800; font-size:clamp(200px,30vw,460px); color:rgba(255,255,255,.03); z-index:1; pointer-events:none; white-space:nowrap; }

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer{ background:var(--ink); color:var(--steel-300); padding:64px 0 0; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; }
.site-footer h5{ font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:15px; color:#fff; margin:0 0 16px; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.site-footer a{ color:var(--steel-300); text-decoration:none; font-size:14.5px; transition:color .15s; }
.site-footer a:hover{ color:var(--yellow); }
.foot-brand p{ font-size:14.5px; line-height:1.65; max-width:34ch; margin:18px 0 0; }
.foot-contact .row{ display:flex; gap:11px; align-items:flex-start; margin-bottom:14px; font-size:14.5px; }
.foot-contact svg{ width:17px; height:17px; color:var(--yellow); flex:none; margin-top:2px; }
.socials{ display:flex; gap:10px; margin-top:18px; }
.socials a{ width:40px; height:40px; border:1px solid var(--steel-700); border-radius:var(--r-sm); display:grid; place-items:center; }
.socials a:hover{ border-color:var(--yellow); color:var(--yellow); }
.foot-bottom{ border-top:1px solid var(--steel-700); padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; letter-spacing:.03em; }
.foot-bottom .gc{ color:var(--steel-500); }
.foot-bottom .gc b{ color:var(--yellow); font-weight:500; }
@media(max-width:920px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media(max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* =================================================================
   FLOATING WHATSAPP
   ================================================================= */
.fab-wa{
  position:fixed; right:22px; bottom:22px; z-index:70;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--whatsapp); color:#fff; text-decoration:none;
  height:58px; padding:0 20px 0 18px; border-radius:100px;
  box-shadow:0 8px 24px rgba(37,211,102,.4); font-family:var(--display); font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; font-size:15px;
  transition:transform .18s, box-shadow .18s;
}
.fab-wa:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(37,211,102,.5); }
.fab-wa svg{ width:26px; height:26px; }
.fab-wa .lbl{ max-width:0; overflow:hidden; white-space:nowrap; transition:max-width .3s ease, margin .3s; margin:0; }
.fab-wa:hover .lbl{ max-width:200px; }
@media(max-width:560px){ .fab-wa{ height:54px; width:54px; padding:0; justify-content:center; bottom:18px; right:18px; } .fab-wa .lbl{ display:none; } }

/* =================================================================
   ACCENT INTENSITY (tweak)
   subtle = pull yellow back to steel in decorative spots
   bold   = push yellow into more accent moments
   ================================================================= */
[data-accent="subtle"] .eyebrow::before{ background:var(--steel-500); }
[data-accent="subtle"] .eyebrow{ color:var(--steel-500); }
[data-accent="subtle"] .arrow-link .ln{ background:var(--steel-500); }
[data-accent="subtle"] .stat{ border-left-color:var(--steel-500); }
[data-accent="subtle"] .hero-trust b{ background:var(--steel-500); }
[data-accent="subtle"] .pillar .ic{ background:var(--steel-700); color:#fff; }
[data-accent="subtle"] .quote-card{ border-top-color:var(--sand,var(--steel-150)); }

[data-accent="bold"] .band-white{ background:var(--white); }
[data-accent="bold"] .sec-title .eyebrow{ color:var(--yellow-dark); }
[data-accent="bold"] .cat-card{ border-color:var(--steel-300); }
[data-accent="bold"] .help-card .ic{ background:var(--yellow); color:var(--ink); }
[data-accent="bold"] .arrow-link .ln{ height:3px; }

/* =================================================================
   TWEAKS PANEL
   ================================================================= */
#tweaks{ position:fixed; right:18px; bottom:18px; z-index:120; width:300px; background:var(--charcoal); color:#fff; border:1px solid var(--steel-700); border-radius:var(--r-lg); box-shadow:var(--sh-lg); display:none; overflow:hidden; }
#tweaks.show{ display:block; }
#tweaks .tk-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--steel-700); }
#tweaks .tk-head .ttl{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:16px; }
#tweaks .tk-head .x{ background:none; border:none; color:var(--steel-300); cursor:pointer; font-size:20px; line-height:1; padding:2px 6px; }
#tweaks .tk-head .x:hover{ color:#fff; }
#tweaks .tk-body{ padding:16px; display:flex; flex-direction:column; gap:18px; }
#tweaks .tk-row .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-300); margin-bottom:8px; display:block; }
#tweaks .seg{ display:flex; gap:0; border:1px solid var(--steel-700); border-radius:var(--r-sm); overflow:hidden; }
#tweaks .seg button{ flex:1; background:transparent; border:none; color:var(--steel-300); font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:13px; padding:9px 6px; cursor:pointer; transition:.15s; border-right:1px solid var(--steel-700); }
#tweaks .seg button:last-child{ border-right:none; }
#tweaks .seg button.on{ background:var(--yellow); color:var(--ink); }
#tweaks .seg button:not(.on):hover{ background:rgba(255,255,255,.06); color:#fff; }
@media(max-width:560px){ #tweaks{ left:18px; right:18px; width:auto; } }