/* home-lift.css: Verity Detailing home (round 1 roll-out, 5 Nov 2026).
   Everything below the kit hero. Scoped to .hl-* plus the old hx-promise strip. */

/* ---- 1. the offer strip: a clean attached proof band under the hero (below the fold, never over the hero) ---- */
.v2 .offerbar.hx-promise{position:relative;z-index:1;margin:0;max-width:none;padding:0;background:linear-gradient(180deg,#121317,#0c0d10);border-bottom:1px solid var(--line)}
.v2 .offerbar.hx-promise::before{content:"";position:absolute;left:0;top:0;width:min(62%,780px);height:2px;background:linear-gradient(90deg,var(--acc),rgba(216,198,160,0))}
.hx-promise__card{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px);background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.hx-promise__card::before{display:none}
.hx-promise__i{padding:34px 28px 34px 28px}
.hx-promise__i:first-child{padding-left:0}
.hx-promise__i h3{font-size:18px}
.hx-promise__i p{font-size:15.5px}
@media (max-width:980px){.hx-promise__i:first-child{padding-left:28px}}
@media (max-width:560px){.hx-promise__card{padding:0 16px}.hx-promise__i,.hx-promise__i:first-child{padding:22px 0}.hx-promise__i p{font-size:16px}}

/* ---- section rhythm: one ground, bands do the separating ---- */
.hl-sec{background:var(--bg)}

/* ---- 2. packages as a price ladder ---- */
.hl-ladder{border-top:1px solid var(--line2)}
.hl-row{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr) auto;gap:clamp(20px,3.4vw,52px);align-items:center;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none!important;color:inherit;position:relative;transition:background .25s}
.hl-row:hover{background:linear-gradient(90deg,rgba(216,198,160,.06),rgba(216,198,160,0) 70%)}
.hl-row__ph{display:block;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:#15161a}
.hl-row__ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.hl-row:hover .hl-row__ph img{transform:scale(1.05)}
.hl-row__tag{display:block;font:650 12.5px/1.2 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.hl-row h3{font-size:clamp(26px,2.8vw,38px)!important;line-height:1.08;margin:0 0 8px;letter-spacing:-.03em}
.hl-row p{margin:0 0 14px;max-width:54ch;color:var(--ink2)}
.hl-row__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px;font-size:15px;color:var(--ink3)}
.hl-row__list li{display:flex;gap:8px;align-items:center}
.hl-row__list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
.hl-row__price{text-align:right;white-space:nowrap}
.hl-row__price small{display:block;font:600 13px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.hl-row__price b{display:block;font:300 clamp(40px,4.6vw,64px)/1 var(--fd);letter-spacing:-.04em;color:var(--ink)}
.hl-row__price i{display:inline-block;margin-top:12px;font:650 15px/1 var(--f);font-style:normal;color:var(--acc)}
.hl-row__price i::after{content:" \2192"}
@media (max-width:900px){.hl-row{grid-template-columns:150px minmax(0,1fr);row-gap:14px}.hl-row__price{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;text-align:left}.hl-row__price small{margin:0}.hl-row__price i{margin:0 0 0 auto}}
@media (max-width:560px){.hl-row{grid-template-columns:1fr}.hl-row__ph{aspect-ratio:16/10}.hl-row__list{font-size:16px}}

/* ---- 4. full-bleed photo band, big numbers on it (sheen fades from the left edge) ---- */
.hl-band{position:relative;overflow:hidden;isolation:isolate;background:#08090b;padding:clamp(80px,11vw,160px) 0}
.hl-band__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hl-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,9,11,.94) 0%,rgba(8,9,11,.82) 42%,rgba(8,9,11,.46) 100%),linear-gradient(180deg,rgba(8,9,11,.5),rgba(8,9,11,0) 30%,rgba(8,9,11,0) 70%,rgba(8,9,11,.6))}
.hl-band .hx-head{max-width:720px}
.hl-band .vd-stats{border-color:rgba(244,241,234,.22)}
.hl-band .vd-stats>div{border-color:rgba(244,241,234,.22)}
.hl-band .vd-stats p{color:#e4dfd5}

/* ---- 5. the result: a full-bleed photograph with the line laid over it ---- */
.hl-feat{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(520px,58vw,720px);display:flex;align-items:center;background:#0b0c0e}
.hl-feat__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 38%;z-index:-2}
.hl-feat::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,9,11,.92) 0%,rgba(8,9,11,.78) 36%,rgba(8,9,11,0) 70%)}
.hl-feat .hx-w{padding-block:clamp(56px,8vw,96px)}
.hl-feat__b{max-width:520px}
.hl-feat__b h2{font-size:clamp(36px,4.6vw,64px)!important;line-height:1.02}
.hl-feat__b p:not(.hx-eyebrow){font-size:18px;color:#ece7dc}
@media (max-width:720px){.hl-feat::before{background:linear-gradient(0deg,rgba(8,9,11,.92) 0%,rgba(8,9,11,.82) 55%,rgba(8,9,11,.2) 100%)}.hl-feat{align-items:flex-end}.hl-feat__img{object-position:70% 20%}}

/* ---- 6. how it works: a timeline on a line ---- */
.hl-how{background:var(--bg2)}
.hl-tl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:clamp(36px,5vw,64px) 0 0!important}
.hl-tl>li{background:none;border:0;border-radius:0;padding:84px 30px 0 0;overflow:visible}
.hl-tl>li::before{position:absolute;left:0;top:0;width:56px;height:56px;margin:0;border-radius:50%;border:1px solid var(--acc);background:var(--bg2);display:grid;place-items:center;font:600 17px/1 var(--fd);letter-spacing:0;color:var(--acc-hi);z-index:1}
.hl-tl>li::after{content:"";position:absolute;left:56px;right:0;top:28px;height:1px;background:linear-gradient(90deg,var(--acc),rgba(216,198,160,.18))}
.hl-tl>li:last-child::after{display:none}
.hl-tl h3{font-size:clamp(22px,2vw,26px)!important}
.hl-tl p{font-size:16px!important}
.hl-after{margin:clamp(28px,4vw,48px) 0 0!important}
@media (max-width:900px){.hl-tl{grid-template-columns:1fr;gap:0}.hl-tl>li{padding:2px 0 40px 84px;min-height:84px}.hl-tl>li::after{left:27px;right:auto;top:56px;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,var(--acc),rgba(216,198,160,.18))}}

/* ---- 7. add-ons as a horizontal photo rail ---- */
.hl-adds .hx-w{padding-bottom:0}
.hl-rail{display:flex!important;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--acc) transparent;margin:0 calc(50% - 50vw);padding:4px max(16px,calc(50vw - 620px + 40px)) 28px;overscroll-behavior-x:contain;scroll-padding-inline:max(16px,calc(50vw - 620px + 40px))}
.hl-rail:focus-visible{outline:2px solid var(--acc-hi);outline-offset:-2px}
.hl-rail .vd-add{flex:0 0 clamp(260px,27vw,350px);position:relative;display:block;aspect-ratio:3/4;padding:0;border:0;border-radius:18px;overflow:hidden;scroll-snap-align:start;background:#15161a}
.hl-rail .vd-add img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.hl-rail .vd-add:hover img{transform:scale(1.05)}
.hl-rail .vd-add::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,9,11,.94) 0%,rgba(8,9,11,.74) 34%,rgba(8,9,11,0) 66%)}
.hl-rail .vd-add>div{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 22px 24px}
.hl-rail .vd-add b{display:block;font-size:22px;color:#fff;margin:0 0 6px}
.hl-rail .vd-add b em{display:block;margin-top:4px;font:650 15px/1.2 var(--f);color:var(--acc-hi)}
.hl-rail .vd-add span{color:#e8e3d9;font-size:15.5px}
@media (max-width:560px){.hl-rail .vd-add{flex-basis:78vw}.hl-rail{padding-inline:16px;scroll-padding-inline:16px}}

/* ---- 8. the crew: split, picture bleeds off the right edge ---- */
.hl-crew .hx-split__ph{box-shadow:none}
@media (min-width:901px){.hl-crew .hx-split{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}.hl-crew .hx-split__ph{border-radius:22px 0 0 22px;margin-right:calc(50% - 50vw)}.hl-crew .hx-split__ph img{aspect-ratio:4/3.4;min-height:380px}}

/* ---- 9. reviews as a quote wall: one big quote, two beside it ---- */
.hl-wall .hx-revs{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:18px}
.hl-wall .hx-rev:first-child{grid-row:1/span 2;padding:clamp(30px,4.4vw,64px);justify-content:center;gap:20px;background:linear-gradient(135deg,#1a1b20,#121317);border-color:var(--line2);position:relative}
.hl-wall .hx-rev:first-child::before{content:"\201C";position:absolute;right:clamp(20px,3vw,44px);top:6px;font:300 clamp(120px,14vw,200px)/1 var(--serif);color:rgba(216,198,160,.16)}
.hl-wall .hx-rev:first-child blockquote{font:400 clamp(22px,2.3vw,32px)/1.36 var(--fd);letter-spacing:-.015em;color:var(--ink);position:relative}
.hl-wall .hx-rev:not(:first-child){background:none;border:0;border-left:2px solid var(--acc);border-radius:0;padding:6px 0 6px 24px}
.hl-wall .hx-rev:not(:first-child) blockquote{font-size:17px}
@media (max-width:900px){.hl-wall .hx-revs{grid-template-columns:1fr}.hl-wall .hx-rev:first-child{grid-row:auto}}

/* ---- 10. questions: heading and a picture on the left, the accordion on the right ---- */
.hl-faq .hx-w{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.hl-faq .hx-head{grid-column:1;grid-row:1/span 3;margin:0;position:sticky;top:110px}
.hl-faq__ph{margin:28px 0 0;border-radius:18px;overflow:hidden}
.hl-faq__ph img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.hl-faq .hx-faq{grid-column:2;max-width:none;margin:0}
.hl-faq .hx-w>p{grid-column:2;margin-top:8px!important;text-align:left!important}
@media (max-width:900px){.hl-faq .hx-w{display:block}.hl-faq .hx-head{position:static;margin-bottom:28px}.hl-faq__ph{display:none}}

/* ---- 11. closing band over a photograph ---- */
.hl-cta{isolation:isolate;background:#08090b}
.hl-cta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;z-index:-2}
.hl-cta::before{background:linear-gradient(90deg,rgba(8,9,11,.94) 0%,rgba(8,9,11,.8) 46%,rgba(8,9,11,.35) 100%)!important;-webkit-mask-image:none!important;mask-image:none!important;z-index:-1}
.hl-cta .hx-w{padding-block:clamp(8px,2vw,24px)}
@media (max-width:720px){.hl-cta::before{background:linear-gradient(0deg,rgba(8,9,11,.92),rgba(8,9,11,.8))!important}}

@media (prefers-reduced-motion:reduce) and (max-width:0px){.hl-row,.hl-row__ph img,.hl-rail .vd-add img{transition:none}.hl-row:hover .hl-row__ph img,.hl-rail .vd-add:hover img{transform:none}}

/* ---- inner-page kit hero: lift a dim photograph and give the breadcrumb links a 44px tap row ---- */
/* the kit sheen is cut for a one-screen hero; on the shorter page hero it covered the whole picture, so its stops are pulled in: it still fades from the bottom and left edges, the picture side stays open */
.hh-hero--page .hh-hero__img{filter:brightness(1.1) saturate(1.04)}
.hh-hero--page .hh-hero__scrim{background:
  linear-gradient(0deg,rgba(var(--hh-scrim),calc(.74 * var(--hh-sf))) 0,rgba(var(--hh-scrim),calc(.52 * var(--hh-sf))) 120px,rgba(var(--hh-scrim),calc(.22 * var(--hh-sf))) 230px,rgba(var(--hh-scrim),0) 320px),
  linear-gradient(90deg,rgba(var(--hh-scrim),calc(.62 * var(--hh-sf))) 0%,rgba(var(--hh-scrim),calc(.5 * var(--hh-sf))) 34%,rgba(var(--hh-scrim),calc(.26 * var(--hh-sf))) 52%,rgba(var(--hh-scrim),calc(.08 * var(--hh-sf))) 66%,rgba(var(--hh-scrim),0) 76%)}
@media (max-width:899.98px){.hh-hero--page .hh-hero__scrim{background:linear-gradient(0deg,rgba(var(--hh-scrim),calc(.82 * var(--hh-sfm))) 0,rgba(var(--hh-scrim),calc(.74 * var(--hh-sfm))) 140px,rgba(var(--hh-scrim),calc(.5 * var(--hh-sfm))) 250px,rgba(var(--hh-scrim),calc(.2 * var(--hh-sfm))) 340px,rgba(var(--hh-scrim),0) 420px)}}
.hh-crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 3px}
.hh-crumbs{display:inline-flex;flex-wrap:wrap;align-items:center;margin:0 0 14px;padding:0 12px;border-radius:999px;background:rgba(var(--hh-scrim),.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}