/* ==========================================================================
   OZZIFLOORS · Home page layer (loaded by index.html only, on top of site.css)

   Layout system from the Blue Bison landing page (adapt-digital/blue-bison-
   landing): dark photo hero with a floating form card, a stat strip, big
   full-bleed photo splits, a compare band, a dark filmstrip, Google-style
   review cards, a dark pricing split, a silent photo band, a scroll-driven
   timeline, an FAQ split with a photo aside, and a photo-backed final form.

   Identity stays Ozzifloors: warm near-black and the logo plate for the dark
   bands, gold for CTAs and details, Poppins throughout. Blue Bison's drafting
   "dimension line" becomes a measuring line here, which is the literal first
   step of every Ozzifloors job, and its blueprint grid becomes faint plank rows.

   Everything is scoped to body.hb and prefixed hb-, so nothing here can reach
   another page or collide with a site.css class.
   ========================================================================== */

.hb {
  --hb-gold: #D49D11;        /* CTA fill (ink text on it, 8.3:1) + lines */
  --hb-gold-hover: #E2AE2A;
  --hb-gold-ink: #8A6206;    /* the only gold used as text on light grounds (5.3:1 on white) */
  --hb-gold-soft: #F0D89A;   /* marks + small text on the dark bands */
  --hb-gold-hair: rgba(212, 157, 17, .5);
  --hb-gold-hair-dk: rgba(240, 216, 154, .32);

  --hb-dark: #221C17;        /* warm near-black: hero, pricing, cards */
  --hb-dark-2: #2E2620;
  --hb-deep: #16161F;        /* the logo plate: gallery, final band */
  --hb-paper: #FAF6F0;
  --hb-sand: #F3EDE3;
  --hb-tint: #FCF4E3;
  --hb-card: #fff;

  --hb-ink: #1A1512;
  --hb-text: #3D3833;
  --hb-muted: #6B635B;
  --hb-hair: rgba(34, 28, 23, .13);
  --hb-hair-soft: rgba(34, 28, 23, .07);
  --hb-line-dk: rgba(247, 243, 237, .14);
  --hb-on-dark: rgba(247, 243, 237, .9);
  --hb-on-dark-mut: #C3B8A9;

  --hb-maxw: 1320px;
  --hb-gut: clamp(1rem, 4vw, 3rem);
  --hb-band: clamp(4.5rem, 8.5vw, 8.5rem);
  --hb-band-sm: clamp(2.25rem, 4vw, 3.25rem);
  --hb-sp-block: 1.75rem;
  --hb-sp-cta: 2.25rem;
  --hb-sp-head: clamp(2.5rem, 4.5vw, 3.75rem);
  --hb-r: 12px;
  --hb-r-sm: 8px;
  --hb-ease-out: cubic-bezier(.16, 1, .3, 1);
  --hb-ease-io: cubic-bezier(.65, 0, .35, 1);
  --hb-ease-lux: cubic-bezier(.19, 1, .22, 1);

  /* Plank rows: faint horizontal board lines with staggered end joints */
  --hb-planks:
    repeating-linear-gradient(0deg, rgba(247, 243, 237, .045) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, transparent 0 239px, rgba(247, 243, 237, .03) 239px 240px);
  --hb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --hb-shadow-1: 0 1px 2px rgba(34, 28, 23, .05), 0 12px 28px -16px rgba(34, 28, 23, .3);
  --hb-shadow-2: 0 1px 2px rgba(34, 28, 23, .06), 0 20px 40px -24px rgba(34, 28, 23, .38), 0 60px 100px -60px rgba(34, 28, 23, .45);
  --hb-shadow-3: 0 2px 6px rgba(0, 0, 0, .08), 0 30px 60px -30px rgba(0, 0, 0, .5), 0 80px 140px -60px rgba(0, 0, 0, .55);
}

.hb-main { display: block; }
.hb-main p { margin: 0 0 1em; }
.hb-main a { color: inherit; }
.hb-wrap { max-width: var(--hb-maxw); margin: 0 auto; padding-left: var(--hb-gut); padding-right: var(--hb-gut); }
.hb-band { padding: var(--hb-band) 0; position: relative; }
.hb-nowrap { white-space: nowrap; }
.hb-main :focus-visible { outline: 3px solid var(--hb-gold-hover); outline-offset: 3px; border-radius: 4px; }
.hb-hero :focus-visible, .hb-on-dark :focus-visible, .hb-faq-card :focus-visible, .hb-final :focus-visible { outline-color: var(--hb-gold-soft); }
.hb-form-card :focus-visible { outline-color: var(--hb-gold-ink); }

/* ---------- Eyebrow with a measuring line (tick-ended) ---------- */
.hb-eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-weight: 500; font-size: .74rem; line-height: 1.3;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--hb-gold-ink); margin: 0 0 1rem !important;
}
.hb-eyebrow::before {
  content: ""; flex: 0 0 36px; height: 9px;
  border-left: 1px solid var(--hb-gold); border-right: 1px solid var(--hb-gold);
  background: linear-gradient(var(--hb-gold), var(--hb-gold)) center / 100% 1px no-repeat;
}
.hb-on-dark .hb-eyebrow, .hb-hero .hb-eyebrow, .hb-tile-cta .hb-eyebrow { color: var(--hb-gold-soft); }
.hb-on-dark .hb-eyebrow::before, .hb-hero .hb-eyebrow::before, .hb-tile-cta .hb-eyebrow::before { border-color: var(--hb-gold-soft); background-image: linear-gradient(var(--hb-gold-soft), var(--hb-gold-soft)); }

.hb-h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); font-weight: 700; line-height: 1.06; letter-spacing: -.035em; color: var(--hb-ink); margin: 0 0 1.25rem; }
.hb-inner > :last-child, .hb-sec-head > :last-child, .hb-process-intro > :last-child, .hb-tl-body > :last-child { margin-bottom: 0 !important; }
.hb-lede { font-size: clamp(1.03rem, 1.35vw, 1.16rem); color: var(--hb-muted); }
.hb-on-dark { color: var(--hb-on-dark); }
.hb-on-dark .hb-h2, .hb-on-dark h2, .hb-on-dark h3 { color: #fff; }
.hb-on-dark .hb-lede { color: var(--hb-on-dark-mut); }
.hb-sec-head { max-width: 760px; }

/* ---------- Buttons (pill, with a light sheen on hover) ---------- */
.hb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 600; font-size: .95rem; letter-spacing: .005em; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  padding: 1rem 1.6rem; min-height: 52px; border-radius: 999px; border: 1.5px solid transparent;
  position: relative; overflow: hidden; isolation: isolate; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .35s var(--hb-ease-out), box-shadow .35s var(--hb-ease-out);
}
.hb-btn svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .35s var(--hb-ease-out); }
.hb-btn::after, .hb-submit::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
  transform: translateX(-110%); transition: transform .8s var(--hb-ease-out);
}
.hb-btn:hover::after, .hb-submit:hover::after { transform: translateX(110%); }
.hb-btn:hover svg:last-child:not(:first-child) { transform: translateX(4px); }
.hb-btn:active, .hb-submit:active { transform: scale(.98); transition-duration: .12s; }
.hb-main .hb-btn--gold { background: var(--hb-gold); color: var(--hb-ink); box-shadow: 0 12px 26px -14px rgba(160, 110, 0, .9); }
.hb-main .hb-btn--gold:hover { background: var(--hb-gold-hover); color: var(--hb-ink); transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(160, 110, 0, .9); }
.hb-main .hb-btn--light { background: #fff; color: var(--hb-ink); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6); }
.hb-main .hb-btn--light:hover { background: #fff; color: var(--hb-ink); transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--hb-gold), 0 18px 34px -16px rgba(0, 0, 0, .6); }
.hb-main .hb-btn--ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hb-main .hb-btn--ghost:hover { background: #fff; color: var(--hb-ink); border-color: var(--hb-gold-soft); }

.hb-text-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--hb-ink) !important; text-decoration: none;
  border-bottom: 1.5px solid var(--hb-gold); padding-bottom: 3px;
  transition: gap .35s var(--hb-ease-out), border-color .3s;
}
.hb-text-link svg { width: 16px; height: 16px; color: var(--hb-gold-ink); }
.hb-text-link:hover { gap: .8rem; border-bottom-color: var(--hb-ink); }
.hb-on-dark .hb-text-link { color: #fff !important; border-bottom-color: var(--hb-gold-soft); }
.hb-on-dark .hb-text-link svg { color: var(--hb-gold-soft); }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hb-hero { position: relative; background: var(--hb-dark); color: #fff; overflow: hidden; isolation: isolate; }
.hb-hero-media { position: absolute; inset: 0; z-index: -2; }
.hb-hero-img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; max-width: none; object-fit: cover; object-position: 55% 70%; translate: 0 var(--p, 0px); }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hb-hero-media { animation: hb-settle 2.4s var(--hb-ease-out) both; }
}
@keyframes hb-settle { from { transform: scale(1.06); } to { transform: none; } }
.hb-hero-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(18, 14, 11, .94) 0%, rgba(34, 28, 23, .84) 36%, rgba(34, 28, 23, .25) 64%, rgba(34, 28, 23, .35) 100%),
    linear-gradient(to top, rgba(18, 14, 11, .6) 0%, transparent 40%),
    radial-gradient(ellipse 120% 90% at 55% 45%, transparent 55%, rgba(10, 8, 6, .55) 100%);
}
.hb-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hb-gold-hair) 20%, var(--hb-gold-hair) 80%, transparent); }
.hb-hero-in {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem);
  min-height: calc(100svh - var(--header-h, 68px));
}
.hb-hero-copy { max-width: 660px; }
.hb-hero h1 {
  color: #fff; font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.02; letter-spacing: -.045em;
  text-shadow: 0 2px 30px rgba(10, 8, 6, .35);
}
/* Light tail of the two-weight headline */
.hb-h1-lt { display: block; font-weight: 400; letter-spacing: -.035em; color: rgba(255, 255, 255, .94); }
.hb-hero-sub { margin: 1.4rem 0 1.6rem !important; max-width: 52ch; font-size: clamp(1rem, 1.3vw, 1.12rem); color: rgba(255, 255, 255, .88); }
.hb-checks { list-style: none; display: grid; gap: .7rem; margin: 0 0 2rem; padding: 0; }
.hb-checks li { display: flex; gap: .75rem; align-items: flex-start; font-weight: 500; color: #fff; line-height: 1.45; }
.hb-tick {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; margin-top: -1px;
  display: grid; place-items: center; background: rgba(212, 157, 17, .16); border: 1px solid rgba(240, 216, 154, .55);
}
.hb-tick svg { width: 13px; height: 13px; color: var(--hb-gold-soft); }
.hb-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1rem; }
.hb-hero-micro { margin: 1rem 0 0 !important; font-size: .86rem; color: var(--hb-on-dark-mut); }
.hb-eb-short { display: none; }
@media (max-width: 600px) {
  .hb-eb-long { display: none; } .hb-eb-short { display: inline; }
  .hb-eyebrow { letter-spacing: .17em; }
}

/* ---------- Form card ---------- */
.hb-form-card {
  position: relative; background: var(--hb-card); color: var(--hb-text);
  border-radius: var(--hb-r); padding: clamp(1.5rem, 2.5vw, 2.25rem);
  box-shadow: var(--hb-shadow-3), 0 0 0 1px rgba(34, 28, 23, .05);
}
/* Measuring rule with tick ends across the top edge, in gold */
.hb-form-card::before {
  content: ""; position: absolute; left: clamp(1.5rem, 2.5vw, 2.25rem); right: clamp(1.5rem, 2.5vw, 2.25rem); top: 0; height: 9px;
  border-left: 1px solid var(--hb-gold); border-right: 1px solid var(--hb-gold);
  background: linear-gradient(90deg, var(--hb-gold), var(--hb-gold-soft) 50%, var(--hb-gold)) center top / 100% 2px no-repeat;
}
.hb-form-card h2 { color: var(--hb-ink); font-size: clamp(1.3rem, 1.9vw, 1.55rem); line-height: 1.15; letter-spacing: -.025em; margin: .2rem 0 .4rem; text-wrap: wrap; }
.hb-form-sub { font-size: .95rem; color: var(--hb-muted); margin-bottom: 1.2rem !important; }
.hb-form { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem .8rem; }
.hb-field { display: flex; flex-direction: column; min-width: 0; }
.hb-field label { font-size: .8rem; font-weight: 600; color: var(--hb-ink); margin-bottom: .32rem; }
.hb-field input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--hb-ink);
  background: #fff; border: 1px solid rgba(34, 28, 23, .22); border-radius: var(--hb-r-sm);
  padding: .72rem .85rem; min-height: 48px;
  transition: border-color .25s var(--hb-ease-out), box-shadow .25s var(--hb-ease-out);
}
.hb-field input:hover { border-color: rgba(34, 28, 23, .4); }
.hb-field input::placeholder { color: #8a8178; }
.hb-field input:focus { outline: none; border-color: var(--hb-gold-ink); box-shadow: 0 0 0 1px var(--hb-gold-ink), 0 0 0 5px rgba(212, 157, 17, .16); }
.hb-form-min { grid-column: 1 / -1; margin: .1rem 0 0 !important; font-size: .84rem; line-height: 1.5; color: var(--hb-muted); }
.hb-form-min strong { color: var(--hb-ink); }
.hb-submit {
  grid-column: 1 / -1; margin-top: .3rem; width: 100%;
  background: var(--hb-gold); color: var(--hb-ink); border: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 1.02rem;
  padding: 1.05rem 1rem; min-height: 54px; border-radius: 999px;
  box-shadow: 0 14px 28px -16px rgba(160, 110, 0, .95);
  position: relative; overflow: hidden; isolation: isolate;
  transition: background .2s, transform .35s var(--hb-ease-out), box-shadow .35s var(--hb-ease-out);
}
.hb-submit:hover { background: var(--hb-gold-hover); transform: translateY(-2px); }
.hb-submit[disabled] { opacity: .75; cursor: progress; transform: none; }
.hb-form-note { grid-column: 1 / -1; margin: 0 !important; padding: .8rem .95rem; border-radius: var(--hb-r-sm); font-size: .9rem; background: var(--hb-tint); color: var(--hb-ink); border: 1px solid var(--hb-gold-hair); }
.hb-form-micro { font-size: .8rem; line-height: 1.55; color: var(--hb-muted); margin: 1.1rem 0 0 !important; padding-top: 1rem; border-top: 1px solid var(--hb-hair-soft); }
.hb-form-micro a { color: var(--hb-gold-ink) !important; font-weight: 600; }

@media (max-width: 899px) {
  /* The photo leaves the background and sits in-flow, unscrimmed, between the
     copy and the form, so a phone visitor actually sees a floor above the fold. */
  .hb-hero-scrim { display: none; }
  .hb-hero-in { display: flex; flex-direction: column; align-items: stretch; min-height: 0; gap: 1.6rem; padding-top: 1.8rem; padding-bottom: 3rem; }
  .hb-hero-copy { order: 1; max-width: none; }
  .hb-hero-media { position: relative; inset: auto; z-index: auto; order: 2; aspect-ratio: 16 / 10; margin: 0 calc(var(--hb-gut) * -1); overflow: hidden; }
  .hb-hero-img { position: static; width: 100%; height: 100%; translate: none; }
  .hb-hero .hb-form-card { order: 3; margin-top: -3.2rem; }
  .hb-hero-sub { margin: 1rem 0 1.2rem !important; }
  .hb-checks { gap: .5rem; margin-bottom: 1.4rem; }
  .hb-hero-actions .hb-btn { flex: 1 1 100%; }
}
@media (max-width: 520px) { .hb-form { grid-template-columns: 1fr; } }

/* ==========================================================================
   2. TRUST STRIP
   ========================================================================== */
.hb-trust { background: var(--hb-card); border-bottom: 1px solid var(--hb-hair); }
.hb-stats { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }
.hb-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; padding: var(--hb-band-sm) .9rem; min-width: 0; }
.hb-stat + .hb-stat { border-left: 1px solid var(--hb-hair); }
.hb-stat-num { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.05; color: var(--hb-ink); letter-spacing: -.035em; position: relative; }
.hb-stat-num::after { content: ""; position: absolute; left: 50%; bottom: -.8rem; width: 32px; margin-left: -16px; height: 1px; background: var(--hb-gold); }
.hb-stat-star svg { width: .8em; height: .8em; color: #fbbc04; }
.hb-stat-label { margin-top: .6rem; font-size: .82rem; font-weight: 500; color: var(--hb-muted); line-height: 1.4; max-width: 22ch; text-wrap: balance; }
.js .hb-stats .hb-stat-num::after { transform: scaleX(0); transition: transform .9s var(--hb-ease-out); transition-delay: calc(var(--i, 0) * 110ms + 350ms); }
.js .hb-stats.is-visible .hb-stat-num::after { transform: none; }
@media (max-width: 860px) {
  .hb-stats { grid-template-columns: 1fr 1fr; }
  .hb-stat:nth-child(3), .hb-stat:nth-child(4) { border-top: 1px solid var(--hb-hair); }
  .hb-stat:nth-child(odd) { border-left: 0; }
}

/* ==========================================================================
   BIG-PHOTO SPLIT: the photo fills its half edge to edge at full section
   height; the copy column is centred in the other half at every width.
   ========================================================================== */
.hb-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media text";
  min-height: clamp(600px, 46vw, 900px); position: relative;
}
.hb-split.flip { grid-template-areas: "text media"; }
.hb-split-media { grid-area: media; position: relative; overflow: hidden; margin: 0; background: var(--hb-sand); min-height: 100%; }
.hb-split-media img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; max-width: none; object-fit: cover; translate: 0 var(--p, 0px); }
.hb-split-text { grid-area: text; display: flex; align-items: center; justify-content: center; padding: var(--hb-band) var(--hb-gut); min-width: 0; }
.hb-inner { width: 100%; max-width: 600px; }
.hb-split-text p { max-width: 60ch; }
.hb-on-dark .hb-split-media { background: var(--hb-deep); }
.hb-room { background: var(--hb-paper); }
.hb-speed { background: var(--hb-tint); box-shadow: inset 0 1px 0 var(--hb-hair-soft); }
.hb-owner { background: var(--hb-card); }
@media (max-width: 899px) {
  .hb-split, .hb-split.flip { grid-template-columns: 1fr; grid-template-areas: "media" "text"; min-height: 0; }
  .hb-split-media { aspect-ratio: 4 / 3.4; min-height: 0; }
  .hb-split-text { padding: calc(var(--hb-band) * .8) var(--hb-gut) var(--hb-band); }
  .hb-inner { max-width: 640px; }
}

.hb-dip { margin: var(--hb-sp-block) 0 1rem !important; font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.3; color: var(--hb-ink); padding-left: 1rem; border-left: 2px solid var(--hb-gold); }
.hb-mini-list { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: var(--hb-sp-block) 0 var(--hb-sp-cta); padding: 0; }
.hb-mini-list li {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--hb-card); border: 1px solid var(--hb-hair); border-radius: 999px;
  padding: .45rem 1rem .45rem .45rem; font-size: .9rem; font-weight: 500; color: var(--hb-ink);
}
.hb-mini-n { display: grid; place-items: center; min-width: 2.1rem; height: 2.1rem; padding: 0 .45rem; border-radius: 999px; background: var(--hb-dark); color: var(--hb-gold-soft); font-weight: 600; font-size: .85rem; }

/* Pull quote: gold hairline with a small gold diamond, light type, bold lead words */
.hb-pull { position: relative; margin: calc(var(--hb-sp-block) + .5rem) 0 var(--hb-sp-block); padding: 1.6rem 0 1.4rem; border-top: 1px solid var(--hb-gold-hair); border-bottom: 1px solid var(--hb-hair); }
.hb-pull::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; background: var(--hb-gold); transform: rotate(45deg); }
.hb-pull-big { font-weight: 400; font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.2; letter-spacing: -.03em; color: var(--hb-ink); margin: 0 0 .6rem !important; text-wrap: balance; }
.hb-pull-big strong { font-weight: 700; }
.hb-pull figcaption { font-size: .95rem; color: var(--hb-muted); }

/* ==========================================================================
   COMPARE BAND
   ========================================================================== */
.hb-compare-band { background: var(--hb-paper); border-top: 1px solid var(--hb-hair-soft); padding-top: clamp(3rem, 6vw, 5.5rem); }
.hb-compare { display: grid; grid-template-columns: 1fr 1.12fr; border-radius: var(--hb-r); overflow: hidden; box-shadow: var(--hb-shadow-2); }
.hb-compare-col { padding: clamp(1.6rem, 3.2vw, 2.6rem); }
.hb-compare-col h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 700; margin-bottom: 1.2rem; }
.hb-compare-col ul { list-style: none; display: grid; gap: .85rem; padding: 0; }
.hb-compare-col li { position: relative; padding-left: 2rem; line-height: 1.5; }
.hb-compare-col li::before { position: absolute; left: 0; top: .1em; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; line-height: 1; }
.hb-compare-usual { background: var(--hb-sand); color: var(--hb-muted); }
.hb-compare-usual h3 { color: var(--hb-muted); }
.hb-compare-usual li::before { content: "?"; color: var(--hb-muted); border: 1.5px solid rgba(107, 99, 91, .45); }
.hb-compare-ours { background-color: var(--hb-dark); background-image: var(--hb-planks); color: var(--hb-on-dark); }
.hb-compare-ours h3 { color: #fff; }
.hb-compare-ours li { color: #fff; }
.hb-compare-ours li::before { content: ""; background: var(--hb-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A1512' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3L15 7'/%3E%3C/svg%3E") center / 70% no-repeat; }
@media (max-width: 900px) { .hb-compare { grid-template-columns: 1fr; } }

/* ==========================================================================
   SERVICES: sticky numbered list + staggered photo tiles
   ========================================================================== */
.hb-services { background: var(--hb-sand); }
.hb-svc-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hb-svc-copy { position: sticky; top: calc(var(--header-h, 68px) + 2rem); }
.hb-svc-list { list-style: none; margin: 1.6rem 0 var(--hb-sp-cta); padding: 0; border-top: 1px solid var(--hb-hair); }
.hb-svc-list a { display: flex; align-items: baseline; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--hb-hair); font-weight: 600; color: var(--hb-ink) !important; text-decoration: none; transition: padding .35s var(--hb-ease-out), color .2s; }
.hb-svc-list a svg { width: 16px; height: 16px; margin-left: auto; align-self: center; color: var(--hb-gold-ink); opacity: .5; transition: transform .35s var(--hb-ease-out), opacity .25s; }
.hb-svc-list a:hover { padding-left: .5rem; }
.hb-svc-list a:hover svg { opacity: 1; transform: translateX(3px); }
.hb-n { font-weight: 500; letter-spacing: .1em; color: var(--hb-gold-ink); font-size: .82rem; min-width: 1.8rem; font-variant-numeric: tabular-nums; }
.hb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem, 1.8vw, 1.4rem); }
.hb-tile { display: flex; flex-direction: column; background: var(--hb-card); border-radius: var(--hb-r); overflow: hidden; box-shadow: var(--hb-shadow-1); text-decoration: none; color: var(--hb-text) !important; transition: transform .4s var(--hb-ease-out), box-shadow .4s; }
a.hb-tile:hover { transform: translateY(-4px); box-shadow: var(--hb-shadow-2); }
.hb-tile-img { display: block; aspect-ratio: 4 / 4.4; overflow: hidden; }
.hb-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--hb-ease-out); }
a.hb-tile:hover .hb-tile-img img { transform: scale(1.04); }
.hb-tile-body { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem 1.25rem; }
.hb-tile-t { font-weight: 700; font-size: 1.08rem; letter-spacing: -.02em; color: var(--hb-ink); }
.hb-tile-d { font-size: .9rem; line-height: 1.55; color: var(--hb-muted); }
.hb-tile-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .85rem; font-weight: 600; color: var(--hb-gold-ink); }
.hb-tile-go svg { width: 14px; height: 14px; transition: transform .35s var(--hb-ease-out); }
a.hb-tile:hover .hb-tile-go svg { transform: translateX(3px); }
.hb-tile-cta { justify-content: center; padding: clamp(1.5rem, 2.6vw, 2rem); background-color: var(--hb-dark); background-image: var(--hb-planks); color: var(--hb-on-dark) !important; }
.hb-tile-cta-t { font-weight: 700; font-size: 1.4rem; letter-spacing: -.03em; line-height: 1.15; color: #fff; margin-bottom: .6rem !important; }
.hb-tile-cta p:not(.hb-eyebrow):not(.hb-tile-cta-t) { font-size: .92rem; line-height: 1.6; margin-bottom: 1.4rem !important; }
.hb-tile-cta .hb-btn { align-self: flex-start; white-space: normal; text-align: center; }
@media (min-width: 901px) { .hb-tiles { padding-bottom: 2.4rem; } .hb-tile:nth-child(even) { position: relative; top: 2.4rem; } }
@media (max-width: 900px) {
  .hb-svc-grid { grid-template-columns: 1fr; }
  .hb-svc-copy { position: static; }
}
@media (max-width: 520px) { .hb-tiles { grid-template-columns: 1fr; } .hb-tile-img { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   GALLERY: dark filmstrip, centred scroll-snap, progress segments
   ========================================================================== */
.hb-gallery { background: var(--hb-deep) var(--hb-grain); background-size: 160px 160px; color: var(--hb-on-dark); overflow: hidden; }
.hb-gallery-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; }
.hb-gallery-head .hb-lede { margin: 0 !important; }
.hb-gallery-ctrl { display: flex; align-items: center; gap: .6rem; }
.hb-g-count { display: flex; align-items: center; gap: .7rem; margin: 0 .9rem 0 0 !important; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.hb-g-cur { font-weight: 600; color: #fff; font-size: 1.05rem; min-width: 2ch; }
.hb-g-sep { width: 34px; height: 1px; background: var(--hb-gold-soft); }
.hb-g-tot { color: var(--hb-on-dark-mut); font-size: 1.05rem; }
.hb-slider-btn {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: transparent; color: #fff; border: 1px solid rgba(240, 216, 154, .5); cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, opacity .2s, transform .35s var(--hb-ease-out);
}
.hb-slider-btn svg { width: 20px; height: 20px; }
.hb-slider-btn:hover:not([disabled]) { background: #fff; border-color: var(--hb-gold-soft); color: var(--hb-ink); }
.hb-slider-btn:active { transform: scale(.94); }
.hb-slider-btn[disabled] { opacity: .3; cursor: default; }

.hb-film {
  --slide-h: min(66vh, 600px);
  position: relative; list-style: none; margin: var(--hb-sp-head) 0 0;
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 8px max(var(--hb-gut), calc((100% - var(--hb-maxw)) / 2 + var(--hb-gut)));
  scroll-padding-inline: max(var(--hb-gut), calc((100% - var(--hb-maxw)) / 2 + var(--hb-gut)));
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hb-film::-webkit-scrollbar { display: none; }
.hb-film:focus-visible { outline-offset: -3px; }
.hb-film.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.hb-film-slide { flex: 0 0 auto; scroll-snap-align: start; }
.hb-film-fig { position: relative; margin: 0; height: var(--slide-h); aspect-ratio: 9 / 14; border-radius: var(--hb-r); overflow: hidden; background: var(--hb-dark); }
.hb-film-fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.4s var(--hb-ease-out); -webkit-user-drag: none; user-select: none; }
.hb-film-fig::after { content: ""; position: absolute; inset: 0; background: var(--hb-deep); opacity: .5; transition: opacity .8s var(--hb-ease-out); pointer-events: none; }
.hb-film-slide.is-active .hb-film-fig::after { opacity: 0; }
.hb-film-slide.is-active .hb-film-fig img { transform: scale(1.06); transition: transform 9s cubic-bezier(.25, .1, .25, 1); }
.hb-film-fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: .15rem;
  padding: 3.5rem 1.1rem 1.05rem; color: #fff; font-size: .82rem; line-height: 1.4;
  background: linear-gradient(to top, rgba(16, 14, 12, .88), rgba(16, 14, 12, 0));
  transition: opacity .6s var(--hb-ease-out), transform .6s var(--hb-ease-out);
}
.hb-film-fig figcaption b { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.hb-film-fig figcaption span { color: var(--hb-gold-soft); }
/* Captions sit on the active slide only once home.js is running; without it every caption shows */
.hb-ready .hb-film-slide:not(.is-active) figcaption { opacity: 0; transform: translateY(8px); }

.hb-g-progress { display: grid; grid-template-columns: repeat(var(--n, 8), 1fr); gap: 6px; max-width: 460px; margin: clamp(1.75rem, 3vw, 2.25rem) auto 0; }
.hb-g-seg { position: relative; height: 2px; background: rgba(240, 216, 154, .2); border-radius: 2px; overflow: hidden; }
.hb-g-fill { position: absolute; inset: 0; background: var(--hb-gold-soft); transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s var(--hb-ease-out); }
.hb-g-seg.is-done .hb-g-fill, .hb-g-seg.is-current .hb-g-fill { transform: scaleX(1); }
.hb-gallery-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.75rem; margin-top: var(--hb-sp-head); padding-top: var(--hb-sp-cta); border-top: 1px solid var(--hb-line-dk); }
.hb-cta-or-link { display: inline-flex; align-items: center; gap: .45rem; color: #fff !important; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--hb-gold-soft); padding-bottom: 2px; }
.hb-cta-or-link svg { width: 15px; height: 15px; color: var(--hb-gold-soft); }
.js .hb-film[data-reveal-group] > .hb-film-slide { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 12px); transition: clip-path 1.3s var(--hb-ease-lux); transition-delay: calc(var(--i, 0) * 110ms); }
.js .hb-film[data-reveal-group].is-visible > .hb-film-slide { clip-path: inset(0 0 0 0 round 12px); }
@media (max-width: 700px) {
  .hb-gallery-ctrl .hb-slider-btn { display: none; }
  .hb-film { padding: 8px 12vw; }
  .hb-film-fig { height: auto; width: 76vw; aspect-ratio: 9 / 13; }
}

/* ==========================================================================
   REVIEWS: Google-style cards in masonry columns
   ========================================================================== */
.hb-reviews { background: var(--hb-tint); overflow: hidden; }
.hb-reviews::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(60% 50% at 85% 0%, rgba(212, 157, 17, .1), transparent 70%), radial-gradient(45% 40% at 0% 100%, rgba(34, 28, 23, .05), transparent 70%); }
.hb-reviews .hb-wrap { position: relative; }
.hb-rv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: var(--hb-sp-head); }
.hb-rv-badge { display: inline-flex; align-items: center; gap: .85rem; padding: .8rem 1.3rem .8rem 1rem; background: var(--hb-card); border-radius: 999px; box-shadow: var(--hb-shadow-1); text-decoration: none; transition: transform .35s var(--hb-ease-out), box-shadow .35s; }
.hb-rv-badge:hover { transform: translateY(-2px); box-shadow: var(--hb-shadow-2); }
.hb-rv-badge-txt { display: flex; flex-direction: column; gap: .25rem; line-height: 1; }
.hb-rv-badge-l { font-weight: 600; font-size: .92rem; color: var(--hb-ink); }
.hb-rv-g { width: 20px; height: 20px; flex: none; }
.hb-rv-g-lg { width: 30px; height: 30px; }
.hb-stars { display: inline-flex; gap: 1px; color: #fbbc04; }
.hb-stars svg { width: 15px; height: 15px; }
.hb-rv-grid { list-style: none; columns: 3 320px; column-gap: clamp(1rem, 1.8vw, 1.5rem); padding: 0; }
.hb-rv-card { break-inside: avoid; margin-bottom: clamp(1rem, 1.8vw, 1.5rem); }
.hb-rv-card figure { position: relative; margin: 0; background: var(--hb-card); border-radius: var(--hb-r); padding: 1.5rem 1.5rem 1.6rem; box-shadow: var(--hb-shadow-1); border: 1px solid var(--hb-hair-soft); overflow: hidden; transition: transform .4s var(--hb-ease-out), box-shadow .4s; }
.hb-rv-card figure::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--hb-gold), var(--hb-gold-soft)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--hb-ease-out); }
.hb-rv-card figure::after { content: "\201C"; position: absolute; right: 1.1rem; bottom: -2.6rem; font-family: Georgia, 'Times New Roman', serif; font-size: 9rem; line-height: 1; color: var(--hb-tint); pointer-events: none; }
.hb-rv-card:hover figure { transform: translateY(-4px); box-shadow: var(--hb-shadow-2); }
.hb-rv-card:hover figure::before { transform: scaleX(1); }
.hb-rv-top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.hb-rv-avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--av, var(--hb-dark)); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 1.1rem; line-height: 1; }
.hb-rv-who { display: flex; flex-direction: column; gap: .3rem; min-width: 0; margin-right: auto; }
.hb-rv-name { font-weight: 600; color: var(--hb-ink); line-height: 1.2; }
.hb-rv-text { position: relative; z-index: 1; margin: 0; font-size: .96rem; line-height: 1.65; color: var(--hb-text); }
.hb-rv-text p { margin: 0 0 .75em !important; }
.hb-rv-text p:last-child { margin-bottom: 0 !important; }
.hb-rv-more { text-align: center; margin: clamp(1rem, 2vw, 1.5rem) 0 0 !important; }
@media (hover: none) { .hb-rv-card:hover figure { transform: none; } }
@media (max-width: 700px) {
  .hb-rv-grid { columns: auto; display: flex; align-items: stretch; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(var(--hb-gut) * -1); padding: .4rem var(--hb-gut) 1.4rem; scroll-padding: 0 var(--hb-gut); }
  .hb-rv-grid::-webkit-scrollbar { display: none; }
  .hb-rv-card { flex: 0 0 86%; margin: 0; scroll-snap-align: start; display: flex; }
  .hb-rv-card figure { width: 100%; padding: 1.25rem 1.2rem 1.35rem; }
}

/* ==========================================================================
   PRICING (dark, plank rows): big-photo split with three numbered beats
   ========================================================================== */
.hb-pricing { background: var(--hb-dark); background-image: var(--hb-grain), var(--hb-planks); background-size: 160px 160px, auto, auto; color: var(--hb-on-dark); overflow: hidden; box-shadow: inset 0 1px 0 var(--hb-gold-hair-dk); }
.hb-pw-steps { list-style: none; margin: calc(var(--hb-sp-block) + .25rem) 0 0; padding: 0; border-top: 1px solid var(--hb-line-dk); }
.hb-pw-step { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 1rem; padding: 1.3rem 0 1.35rem; border-bottom: 1px solid var(--hb-line-dk); }
.hb-pw-step > * { grid-column: 2; }
.hb-pw-n { grid-column: 1; grid-row: 1 / span 3; font-weight: 500; font-size: .88rem; letter-spacing: .14em; color: var(--hb-gold-soft); padding-top: .25rem; font-variant-numeric: tabular-nums; }
.hb-pw-step h3 { font-size: clamp(1.08rem, 1.5vw, 1.22rem); font-weight: 600; color: #fff; margin-bottom: .45rem; }
.hb-pw-step p { margin: 0 !important; font-size: .96rem; line-height: 1.62; }
.hb-pw-factors { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.4rem; margin-top: 1rem; padding: 0; }
.hb-pw-factors li { position: relative; padding-left: 1.15rem; font-size: .9rem; font-weight: 500; line-height: 1.4; color: #fff; }
.hb-pw-factors li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 5px; height: 5px; border: 1px solid var(--hb-gold-soft); transform: rotate(45deg); }
.hb-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-top: var(--hb-sp-cta); }
.hb-cta-or { font-size: .98rem; color: var(--hb-on-dark-mut); }
.hb-cta-or a { color: #fff !important; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--hb-gold-soft); white-space: nowrap; }
@media (max-width: 480px) { .hb-pw-factors { grid-template-columns: 1fr; } .hb-pw-step { grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: .6rem; } }

/* ==========================================================================
   SILENT BAND
   ========================================================================== */
.hb-silent { position: relative; height: clamp(20rem, 52vw, 40rem); overflow: hidden; background: var(--hb-deep); }
.hb-silent img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; max-width: none; object-fit: cover; object-position: 50% 60%; translate: 0 var(--p, 0px); }

/* ==========================================================================
   PROCESS: sticky intro + vertical timeline with a scroll-driven rail
   ========================================================================== */
.hb-process { background: var(--hb-card); }
.hb-process-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.hb-process-intro { position: sticky; top: calc(var(--header-h, 68px) + 2.5rem); }
.hb-process-intro .hb-lede { max-width: 40ch; }
.hb-tl-facts { display: grid; grid-template-columns: 1fr 1fr; margin: var(--hb-sp-block) 0 var(--hb-sp-cta); border-top: 1px solid var(--hb-gold-hair); border-bottom: 1px solid var(--hb-hair); }
.hb-tl-fact { padding: 1.2rem 0 1.25rem; }
.hb-tl-fact + .hb-tl-fact { border-left: 1px solid var(--hb-hair); padding-left: clamp(1rem, 2.2vw, 1.75rem); }
.hb-tl-fact dt { font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--hb-gold-ink); margin-bottom: .35rem; }
.hb-tl-fact dd { margin: 0; font-weight: 500; color: var(--hb-muted); }
.hb-tl-big { font-weight: 400; font-size: clamp(2.5rem, 4.2vw, 3.4rem); line-height: 1; letter-spacing: -.05em; color: var(--hb-ink); margin-right: .2rem; }

.hb-timeline { position: relative; --tl: 0; }
.hb-tl-rail { position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--hb-sand); border-radius: 2px; overflow: hidden; }
.hb-tl-fill { position: absolute; inset: 0; background: linear-gradient(var(--hb-gold), var(--hb-gold-ink)); transform-origin: 50% 0; transform: scaleY(var(--tl)); will-change: transform; }
.hb-tl-steps { list-style: none; display: grid; gap: clamp(1rem, 2vw, 1.5rem); padding: 0; margin: 0; }
.hb-tl-step { position: relative; padding-left: clamp(2.75rem, 4vw, 3.5rem); }
.hb-tl-dot { position: absolute; left: 0; top: clamp(1.6rem, 2.6vw, 2.2rem); width: 24px; height: 24px; border-radius: 50%; background: var(--hb-card); border: 2px solid var(--hb-line-2, #D6CCBE); transition: border-color .5s var(--hb-ease-out); }
.hb-tl-dot::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--hb-gold); transform: scale(0); transition: transform .6s var(--hb-ease-lux); }
.hb-tl-step.is-reached .hb-tl-dot { border-color: var(--hb-gold); box-shadow: 0 0 0 4px rgba(212, 157, 17, .14); }
.hb-tl-step.is-reached .hb-tl-dot::after { transform: none; }
.hb-tl-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: clamp(4.2rem, 6.5vw, 6rem) minmax(0, 1fr); gap: 0 clamp(1rem, 2vw, 1.75rem); align-items: start;
  background: linear-gradient(135deg, #2E2620 0%, var(--hb-dark) 45%, #16130F 100%);
  border: 1px solid rgba(240, 216, 154, .12); border-radius: var(--hb-r);
  padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.25rem, 2.6vw, 2.25rem);
  box-shadow: 0 10px 30px -18px rgba(34, 28, 23, .55);
  transition: border-color .5s var(--hb-ease-out), box-shadow .5s var(--hb-ease-out), transform .5s var(--hb-ease-out);
}
.hb-tl-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--hb-gold) 0%, var(--hb-gold-soft) 50%, rgba(240, 216, 154, 0) 100%); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--hb-ease-lux); }
.hb-tl-card::after { content: ""; position: absolute; right: -18%; top: -40%; width: 60%; height: 140%; pointer-events: none; background: radial-gradient(closest-side, rgba(212, 157, 17, .1), rgba(212, 157, 17, 0)); }
.hb-tl-step.is-reached .hb-tl-card { border-color: var(--hb-gold-hair-dk); box-shadow: 0 22px 44px -22px rgba(34, 28, 23, .7); }
.hb-tl-step.is-reached .hb-tl-card::before { transform: none; }
.hb-tl-card:hover { transform: translateX(4px); }
.hb-tl-n { position: relative; z-index: 1; font-weight: 300; font-size: clamp(2.8rem, 5vw, 4.2rem); line-height: .85; letter-spacing: -.06em; color: rgba(240, 216, 154, .28); transition: color .6s var(--hb-ease-out); font-variant-numeric: tabular-nums; }
.hb-tl-step.is-reached .hb-tl-n { color: var(--hb-gold-soft); }
.hb-tl-body { position: relative; z-index: 1; }
.hb-tl-when { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hb-gold-soft); background: rgba(240, 216, 154, .07); border: 1px solid var(--hb-gold-hair-dk); border-radius: 999px; padding: .3rem .75rem; margin: 0 0 .75rem !important; }
.hb-tl-body h3 { font-size: clamp(1.15rem, 1.7vw, 1.38rem); font-weight: 600; margin-bottom: .5rem; color: #fff; }
.hb-tl-body p:not(.hb-tl-when) { font-size: .96rem; line-height: 1.6; color: rgba(255, 255, 255, .8); max-width: 56ch; }
@media (max-width: 900px) {
  .hb-process-grid { grid-template-columns: 1fr; }
  .hb-process-intro { position: static; }
}
@media (max-width: 560px) {
  .hb-tl-step { padding-left: 2.25rem; }
  .hb-tl-rail { left: 8px; }
  .hb-tl-dot { width: 18px; height: 18px; top: 1.45rem; }
  .hb-tl-dot::after { inset: 3px; }
  .hb-tl-card { grid-template-columns: 1fr; padding: 1.25rem 1.2rem 1.35rem; }
  .hb-tl-n { font-size: 2.5rem; margin-bottom: .6rem; }
  .hb-tl-card:hover { transform: none; }
}

/* ==========================================================================
   MINIMUM (400 sq ft)
   ========================================================================== */
.hb-minimum { background: var(--hb-paper); box-shadow: inset 0 1px 0 var(--hb-hair-soft); }
.hb-min-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.hb-min-big { font-weight: 300; font-size: clamp(5rem, 11vw, 9.5rem); line-height: .85; letter-spacing: -.07em; color: var(--hb-ink); margin: .5rem 0 1.4rem !important; }
.hb-min-big span { font-size: .2em; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--hb-gold-ink); margin-left: .6rem; vertical-align: .35em; }
.hb-min-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hb-gold-hair); }
.hb-min-list li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; padding: 1.4rem 0 1.45rem; border-bottom: 1px solid var(--hb-hair); }
.hb-min-list .hb-n { padding-top: .2rem; }
.hb-min-list h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: .35rem; color: var(--hb-ink); }
.hb-min-list p { margin: 0 !important; color: var(--hb-muted); font-size: .96rem; }
@media (max-width: 900px) { .hb-min-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   AREAS
   ========================================================================== */
.hb-areas { background: var(--hb-sand); }
.hb-areas-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: var(--hb-sp-head); }
.hb-counties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.hb-county { background: var(--hb-card); border-radius: var(--hb-r); padding: 1.5rem 1.5rem 1.6rem; box-shadow: var(--hb-shadow-1); position: relative; }
.hb-county::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 9px; border-left: 1px solid var(--hb-gold); border-right: 1px solid var(--hb-gold); background: linear-gradient(var(--hb-gold), var(--hb-gold)) center top / 100% 2px no-repeat; }
.hb-county-h { font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--hb-gold-ink); margin: .3rem 0 .8rem !important; }
.hb-county p:not(.hb-county-h) { margin: 0 !important; font-size: .95rem; line-height: 1.7; color: var(--hb-text); }
@media (max-width: 860px) { .hb-counties { grid-template-columns: 1fr; } }

/* ==========================================================================
   FAQ SPLIT
   ========================================================================== */
.hb-faq { background: var(--hb-card); }
.hb-faq-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hb-faq-list { margin-top: 1.4rem; border-top: 1px solid var(--hb-hair); }
.hb-faq-item { border-bottom: 1px solid var(--hb-hair); }
.hb-faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.25rem 3rem 1.25rem 0; font-weight: 600;
  font-size: clamp(1.02rem, 1.4vw, 1.14rem); line-height: 1.4; letter-spacing: -.012em; color: var(--hb-ink);
  transition: color .2s;
}
.hb-faq-item summary::-webkit-details-marker { display: none; }
.hb-faq-item summary:hover { color: var(--hb-gold-ink); }
.hb-faq-item summary::after {
  content: ""; position: absolute; right: .2rem; top: 50%; width: 30px; height: 30px; margin-top: -15px;
  border-radius: 50%; border: 1px solid var(--hb-line-2, #D6CCBE);
  background: linear-gradient(var(--hb-ink), var(--hb-ink)) center / 12px 2px no-repeat, linear-gradient(var(--hb-ink), var(--hb-ink)) center / 2px 12px no-repeat;
  transition: transform .3s var(--hb-ease-out), background-color .2s, border-color .2s;
}
.hb-faq-item summary:hover::after { border-color: var(--hb-gold); }
.hb-faq-item[open] summary::after { transform: rotate(45deg); background-color: var(--hb-tint); border-color: var(--hb-gold); }
.hb-faq-item[open] summary { color: var(--hb-gold-ink); }
.hb-faq-a { padding: 0 3rem 1.4rem 0; max-width: 68ch; }
.hb-faq-a p { margin: 0 !important; }
.hb-faq-more { margin: 1.6rem 0 0 !important; }
.hb-faq-aside { position: sticky; top: calc(var(--header-h, 68px) + 2rem); }
.hb-faq-photo { border-radius: var(--hb-r); overflow: hidden; aspect-ratio: 4 / 4.6; box-shadow: var(--hb-shadow-1); }
.hb-faq-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.hb-faq-card { position: relative; margin: -4.5rem 1.1rem 0; background-color: var(--hb-dark); background-image: var(--hb-planks); color: var(--hb-on-dark); border-radius: var(--hb-r); padding: 1.75rem 1.6rem 1.6rem; box-shadow: var(--hb-shadow-2); }
.hb-faq-card::before { content: ""; position: absolute; left: 1.6rem; right: 1.6rem; top: 0; height: 1px; background: linear-gradient(90deg, var(--hb-gold-soft), rgba(240, 216, 154, 0)); }
.hb-faq-card h3 { color: #fff; font-size: 1.35rem; font-weight: 700; margin-bottom: .45rem; }
.hb-faq-card p { font-size: .95rem; margin-bottom: 1.1rem !important; }
.hb-faq-card .hb-btn { width: 100%; }
.hb-micro { display: block; margin-top: .75rem; font-size: .82rem; color: var(--hb-on-dark-mut); text-align: center; }
.hb-micro a { color: #fff !important; }
@media (max-width: 900px) {
  .hb-faq-grid { grid-template-columns: 1fr; }
  .hb-faq-aside { position: static; max-width: 520px; }
  .hb-faq-photo { aspect-ratio: 16 / 10; }
  .hb-faq-card { margin-top: -2.5rem; }
}
@media (max-width: 480px) { .hb-faq-item summary { padding-right: 2.6rem; } .hb-faq-a { padding-right: 0; } }

/* ==========================================================================
   FINAL CTA (photo-backed, warm duotone, second form)
   ========================================================================== */
.hb-final { position: relative; color: #fff; overflow: hidden; isolation: isolate; background: var(--hb-deep); }
.hb-final-bg { position: absolute; left: 0; right: 0; top: -8%; width: 100%; height: 116%; max-width: none; object-fit: cover; object-position: 50% 60%; z-index: -2; translate: 0 var(--p, 0px); }
/* Multiply can only darken, so every pixel ends at or below the warm dark and
   white text keeps its contrast. The gradient deepens the side the copy is on. */
.hb-final-scrim { position: absolute; inset: 0; z-index: -1; background: #5a4630; mix-blend-mode: multiply; }
.hb-final-scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(18, 14, 11, .92) 0%, rgba(22, 22, 31, .66) 48%, rgba(22, 22, 31, .3) 100%); }
.hb-final-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
#hb-final-title { color: #fff; font-weight: 700; letter-spacing: -.045em; line-height: 1.02; font-size: clamp(2.2rem, 4.5vw, 3.8rem); margin-bottom: 1.1rem; }
.hb-final .hb-lede { color: rgba(255, 255, 255, .86); max-width: 46ch; }
.hb-final-proof { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 1.6rem 0 0; padding: 0; }
.hb-final-proof li { display: flex; align-items: baseline; gap: .4rem; font-size: .88rem; color: var(--hb-on-dark-mut); }
.hb-final-proof b { font-size: 1.3rem; font-weight: 600; color: #fff; letter-spacing: -.02em; }
.hb-call-big { position: relative; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--hb-gold-hair-dk); }
.hb-call-big::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; background: var(--hb-gold-soft); transform: rotate(45deg); }
.hb-lbl { display: block; font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--hb-gold-soft); }
.hb-call-big a { display: inline-block; font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.1rem); color: #fff !important; text-decoration: none; letter-spacing: -.035em; line-height: 1.1; margin: .3rem 0 .45rem; transition: color .2s; }
.hb-call-big a:hover { color: var(--hb-gold-soft) !important; }
.hb-hours { display: block; font-size: .92rem; color: var(--hb-on-dark-mut); max-width: 44ch; }
@media (max-width: 900px) { .hb-final-in { grid-template-columns: 1fr; } }

/* ==========================================================================
   MOTION (only hides content once JS has run: html.js is set by site.js,
   and home.js marks body.hb-ready before anything waits on a reveal)
   ========================================================================== */
.hb-ready [data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 1.1s var(--hb-ease-lux), transform 1.3s var(--hb-ease-lux); }
.hb-ready .hb-split-text .hb-inner[data-reveal] { opacity: 1; transform: none; }
.hb-ready .hb-split-text .hb-inner[data-reveal] > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 1s var(--hb-ease-lux), transform 1.2s var(--hb-ease-lux); }
.hb-ready .hb-split-text .hb-inner[data-reveal] > :nth-child(2) { transition-delay: 90ms; }
.hb-ready .hb-split-text .hb-inner[data-reveal] > :nth-child(3) { transition-delay: 180ms; }
.hb-ready .hb-split-text .hb-inner[data-reveal] > :nth-child(4) { transition-delay: 270ms; }
.hb-ready .hb-split-text .hb-inner[data-reveal] > :nth-child(5) { transition-delay: 360ms; }
.hb-ready .hb-split-text .hb-inner[data-reveal] > :nth-child(n+6) { transition-delay: 440ms; }
.hb-ready .hb-split-text .hb-inner[data-reveal].is-visible > * { opacity: 1; transform: none; }
.hb-ready [data-reveal="fade"] { transform: none; }
/* Mask wipe: the clip lives on the IMAGE, never on the observed element */
.hb-ready [data-reveal="mask"] { opacity: 1; transform: none; }
.hb-ready .hb-split > [data-reveal="mask"] img { clip-path: inset(0 100% 0 0); transform: scale(1.1); transition: clip-path 1.5s var(--hb-ease-io), transform 2s var(--hb-ease-out); }
.hb-ready .hb-split.flip > [data-reveal="mask"] img { clip-path: inset(0 0 0 100%); }
@media (max-width: 899px) { .hb-ready .hb-split > [data-reveal="mask"] img, .hb-ready .hb-split.flip > [data-reveal="mask"] img { clip-path: inset(100% 0 0 0); } }
.hb-ready [data-reveal].is-visible { opacity: 1; transform: none; }
.hb-ready .hb-split > [data-reveal="mask"].is-visible img { clip-path: inset(0 0 0 0); transform: none; }
.hb-ready [data-reveal-group] > * { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 1s var(--hb-ease-lux), transform 1.2s var(--hb-ease-lux); transition-delay: calc(var(--i, 0) * 110ms); }
.hb-ready [data-reveal-group].is-visible > * { opacity: 1; transform: none; }
.hb-ready .hb-tiles[data-reveal-group] > .hb-tile:hover { transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  .hb *, .hb *::before, .hb *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .hb-ready [data-reveal], .hb-ready [data-reveal-group] > *, .hb-ready .hb-split-text .hb-inner[data-reveal] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hb-ready [data-reveal="mask"] img { transform: none !important; clip-path: none !important; }
  .hb-ready .hb-film[data-reveal-group] > .hb-film-slide { clip-path: none !important; }
  .hb-timeline { --tl: 1 !important; }
  .hb [data-parallax] { translate: none !important; }
  .hb-hero-media { animation: none !important; }
}

/* ==========================================================================
   SERVICE PAGES (vinyl-flooring.html first): same system, a few additions
   ========================================================================== */
/* A page hero is shorter than the home hero: the offer, not a full screen */
.hb-hero--page .hb-hero-in { min-height: min(780px, calc(100svh - var(--header-h, 68px))); }
.hb-tl-note { font-size: .9rem; line-height: 1.55; color: var(--hb-muted); margin: calc(var(--hb-sp-cta) * -.5) 0 var(--hb-sp-cta) !important; padding-left: 1rem; border-left: 1px solid var(--hb-gold); }
.hb-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 var(--hb-sp-cta); padding: 0; }
.hb-chips li { background: var(--hb-card); border: 1px solid var(--hb-hair); border-radius: 999px; padding: .4rem .9rem; font-size: .86rem; font-weight: 500; color: var(--hb-ink); }
.hb-prod-list li { padding: 1.6rem 0 1.65rem; }
.hb-prod-list h3 { font-size: 1.2rem; }
.hb-vprice .hb-min-grid { align-items: start; }
.hb-list-label { font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--hb-gold-ink); margin: 0 0 1rem !important; }
.hb-min-note { margin: 1.5rem 0 0 !important; padding: 1.2rem 1.3rem; background: var(--hb-card); border-radius: var(--hb-r-sm); box-shadow: var(--hb-shadow-1); font-size: .95rem; color: var(--hb-text); }

/* ==========================================================================
   COMPANY PAGES: shared components (about, process, gallery, reviews, faq,
   contact). Page-only tweaks go in the PAGE blocks at the end of this file.
   ========================================================================== */
/* Contact card: the direct routes, in the hero or the final band */
.hb-contact-card .hb-btn { width: 100%; margin-top: 1.2rem; }
.hb-cmethods { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hb-hair-soft); }
.hb-cmethods li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--hb-hair-soft); }
.hb-cm-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--hb-tint); color: var(--hb-gold-ink); }
.hb-cm-ico svg { width: 18px; height: 18px; }
.hb-cm-l { display: block; font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--hb-muted); }
.hb-main .hb-cm-v { display: inline-block; font-weight: 600; font-size: 1.05rem; color: var(--hb-ink); text-decoration: none; border-bottom: 1px solid var(--hb-gold); margin-top: .15rem; word-break: break-word; }
.hb-cm-d { display: block; margin-top: .3rem; font-size: .86rem; line-height: 1.5; color: var(--hb-muted); }

/* Captioned photo rows */
.hb-photos { background: var(--hb-paper); }
.hb-photo-row { display: grid; gap: clamp(.8rem, 1.6vw, 1.25rem); margin-top: var(--hb-sp-head); }
.hb-photo-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hb-photo-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-photo { margin: 0; }
.hb-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--hb-r); box-shadow: var(--hb-shadow-1); }
.hb-photo figcaption { margin-top: .75rem; font-size: .9rem; line-height: 1.5; color: var(--hb-muted); padding-left: .8rem; border-left: 1px solid var(--hb-gold); }
.hb-photos-more { text-align: center; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0 !important; }
@media (max-width: 860px) { .hb-photo-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hb-photo-row--3 { grid-template-columns: 1fr; } .hb-photo-row--3 .hb-photo img { aspect-ratio: 4 / 3.4; } }

/* FAQ hub groups */
.hb-faqgroup { background: var(--hb-card); }
.hb-faqgroup:nth-of-type(even) { background: var(--hb-paper); }
.hb-faqgroup-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hb-faqgroup-head { position: sticky; top: calc(var(--header-h, 68px) + 2rem); }
.hb-faqgroup-n { font-size: .85rem; color: var(--hb-muted); margin: 0 !important; }
.hb-faqgroup .hb-faq-list { margin-top: 0; }
@media (max-width: 900px) { .hb-faqgroup-grid { grid-template-columns: 1fr; } .hb-faqgroup-head { position: static; } }

/* Full forms (contact page): selects, textareas, hints */
.hb-field select, .hb-field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--hb-ink);
  background: #fff; border: 1px solid rgba(34, 28, 23, .22); border-radius: var(--hb-r-sm); padding: .72rem .85rem; min-height: 48px;
}
.hb-field select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231A1512'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") no-repeat right .8rem center / 18px; }
.hb-field textarea { resize: vertical; }
.hb-field select:focus, .hb-field textarea:focus { outline: none; border-color: var(--hb-gold-ink); box-shadow: 0 0 0 1px var(--hb-gold-ink), 0 0 0 5px rgba(212, 157, 17, .16); }
.hb-field--full { grid-column: 1 / -1; }
.hb-opt { font-weight: 400; color: var(--hb-muted); }
.hb-hint { display: block; margin-top: .35rem; font-size: .8rem; color: var(--hb-muted); }

/* The hidden attribute must win over .hb-btn's display:inline-flex etc. */
.hb-main [hidden] { display: none !important; }

/* After a failed submit (site.js un-hides the form note), mark the empty
   required boxes the note asks the visitor to fill in. */
.hb-form:has([data-form-note]:not([hidden])) :is(input, select, textarea)[required]:invalid {
  border-color: var(--err, #B3261E); box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}

/* Links inside running copy (FAQ answers, split paragraphs) */
.hb-main :is(.hb-inner, .hb-faq-a, .hb-lede) p a:not(.hb-btn):not(.hb-text-link),
.hb-main .hb-faq-a a, .hb-main .hb-inner > p a:not(.hb-btn):not(.hb-text-link) {
  color: var(--hb-ink); text-decoration: underline; text-decoration-color: var(--hb-gold);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.hb-on-dark .hb-inner p a:not(.hb-btn):not(.hb-text-link) { color: #fff; text-decoration-color: var(--hb-gold-soft); }

/* ==========================================================================
   PAGE BLOCKS: one per page, edited only by that page's work
   ========================================================================== */
/* PAGE: about */
/* Phone: the three "On the job" photos become a sideways swipe row instead of
   three full-width photos stacked, so the section is one screen tall. */
@media (max-width: 600px) {
  body[data-page="about"] .hb-photo-row--3 {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--hb-gut)); margin-right: calc(-1 * var(--hb-gut));
    padding: 0 var(--hb-gut) .5rem; scroll-padding-inline: var(--hb-gut);
    scrollbar-width: none;
  }
  body[data-page="about"] .hb-photo-row--3::-webkit-scrollbar { display: none; }
  body[data-page="about"] .hb-photo-row--3 .hb-photo { scroll-snap-align: start; }
  body[data-page="about"] .hb-photo-row--3 .hb-photo img { aspect-ratio: 3 / 4; }
}
/* END PAGE: about */
/* PAGE: our-process */
/* Inline text links inside the copy (phone, contact form, other pages) */
body[data-page="process"] .hb-a { color: var(--hb-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--hb-gold); transition: color .2s, border-color .2s; }
body[data-page="process"] .hb-a:hover { color: var(--hb-gold-ink); border-bottom-color: var(--hb-gold-ink); }
body[data-page="process"] .hb-on-dark .hb-a { color: #fff; border-bottom-color: var(--hb-gold-soft); }
body[data-page="process"] .hb-on-dark .hb-a:hover { color: var(--hb-gold-soft); }
/* Photo captions inside the full-bleed split photos */
body[data-page="process"] .hb-split-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 3.5rem clamp(1rem, 3vw, 2rem) clamp(1rem, 2.4vw, 1.6rem);
  background: linear-gradient(to top, rgba(22, 19, 15, .78), rgba(22, 19, 15, 0));
  color: rgba(255, 255, 255, .92); font-size: .9rem; line-height: 1.45; font-weight: 500;
}
body[data-page="process"] .hb-split-cap::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: .6rem; vertical-align: .3em; background: var(--hb-gold-soft); }
/* Numbered rows inside a split (the four things, the condo three) */
body[data-page="process"] .hb-step .hb-list-label { margin-top: var(--hb-sp-block) !important; }
body[data-page="process"] .hb-step-list { margin: 0 0 var(--hb-sp-block); }
body[data-page="process"] .hb-step-list li { padding: 1.1rem 0 1.15rem; }
body[data-page="process"] .hb-step-list h3 { font-size: 1.05rem; }
body[data-page="process"] .hb-step-after { margin-top: 0; }
body[data-page="process"] .hb-step .hb-split-text p.hb-dip { max-width: none; }
/* Step 04: four schedule facts sit two by two */
body[data-page="process"] .hb-tl-fact:nth-child(3) { border-left: 0; padding-left: 0; }
body[data-page="process"] .hb-tl-fact:nth-child(n+3) { border-top: 1px solid var(--hb-hair); }
body[data-page="process"] .hb-tl-fact dt { line-height: 1.5; min-height: 3em; }
/* Install-day photos: crews on the left, the other materials on the right */
body[data-page="process"] .hb-installday { background: var(--hb-paper); }
body[data-page="process"] .hb-installday-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; }
body[data-page="process"] .hb-installday-other { padding-left: 1.2rem; border-left: 1px solid var(--hb-gold); color: var(--hb-text); }
body[data-page="process"] .hb-installday-other p:last-child { margin-bottom: 0; }
body[data-page="process"] .hb-installday-sure { font-weight: 600; color: var(--hb-ink); }
body[data-page="process"] .hb-yourpart { background: var(--hb-card); }
body[data-page="process"] .hb-yourpart .hb-min-copy .hb-btn { margin-top: var(--hb-sp-block); }
@media (max-width: 900px) {
  body[data-page="process"] .hb-installday-head { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 480px) {
  body[data-page="process"] .hb-tl-facts { grid-template-columns: 1fr 1fr; }
  body[data-page="process"] .hb-tl-fact dt { min-height: 4.5em; }
}
/* END PAGE: our-process */
/* PAGE: gallery */
/* Before / after pair: the .ba slider itself is site.css + site.js, unchanged */
.hb-ba { background: var(--hb-paper); }
.hb-ba .hb-sec-head { margin-bottom: var(--hb-sp-head); }
.hb-ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.hb-ba-item { margin: 0; min-width: 0; }
.hb-ba-item .ba { aspect-ratio: 4 / 5; border: 0; border-radius: var(--hb-r); box-shadow: var(--hb-shadow-2); background: var(--hb-dark); }
.hb-ba-item .ba__tag { font-family: inherit; font-weight: 600; letter-spacing: .16em; background: rgba(22, 22, 31, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); top: 1rem; }
.hb-ba-item .ba__tag--b { left: 1rem; }
.hb-ba-item .ba__tag--a { right: 1rem; background: var(--hb-gold); color: var(--hb-ink); }
.hb-ba-item .ba__line { background: var(--hb-gold); }
.hb-ba-item .ba__grab { background: var(--hb-gold); color: var(--hb-ink); box-shadow: 0 0 0 6px rgba(212, 157, 17, .25), 0 10px 24px -8px rgba(0, 0, 0, .6); }
.hb-ba-item .ba:focus-within .ba__grab { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--hb-gold-ink); }
.hb-ba-item figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; margin-top: 1rem; padding-left: .85rem; border-left: 1px solid var(--hb-gold); font-size: .92rem; line-height: 1.45; color: var(--hb-muted); }
.hb-ba-item figcaption b { color: var(--hb-ink); font-weight: 600; }
@media (max-width: 760px) {
  .hb-ba-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Every job: filter pills + an even grid of phone-frame photos */
.hb-allwork { background: var(--hb-card); }
.hb-allwork-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem; margin-bottom: var(--hb-sp-head); }
.hb-allwork-head .hb-sec-head { flex: 1 1 520px; }
.hb-main .hb-filters { margin: 0; gap: .5rem; }
.hb-main .hb-filters button {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 46px; padding: .55rem .6rem .55rem 1.15rem; border-radius: 999px;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--hb-ink); cursor: pointer;
  background: #fff; border: 1px solid var(--hb-hair); box-shadow: var(--hb-shadow-1);
  transition: background .25s, color .25s, border-color .25s, transform .35s var(--hb-ease-out);
}
.hb-main .hb-filters button:hover { border-color: var(--hb-gold); color: var(--hb-ink); transform: translateY(-1px); }
.hb-main .hb-filters button[aria-pressed="true"] { background: var(--hb-dark); border-color: var(--hb-dark); color: #fff; }
.hb-filter-n { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem; border-radius: 999px; font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--hb-sand); color: var(--hb-muted); transition: background .25s, color .25s; }
.hb-filters button[aria-pressed="true"] .hb-filter-n { background: var(--hb-gold); color: var(--hb-ink); }

/* The grid: 4 columns on desktop, two photos opened up to 2x2. 18 photos
   + 2 x 3 extra cells = 24, so the full grid closes on a straight edge.
   Below 1180px neither opens up, and 18 closes evenly at 3 and 2 columns. */
.hb-main .hb-masonry { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; align-items: stretch; gap: clamp(.6rem, 1.3vw, 1.1rem); max-width: none; }
.hb-main .hb-gtile { border: 0; border-radius: var(--hb-r); background: var(--hb-sand); box-shadow: var(--hb-shadow-1); isolation: isolate; }
.hb-main .hb-masonry .hb-gtile img { display: block; width: 100%; height: 100%; aspect-ratio: 9 / 16; object-fit: cover; transition: transform 1.2s var(--hb-ease-out); }
.hb-main .hb-gtile:hover img { transform: scale(1.05); }
.hb-main .hb-masonry .hb-gtile--feat, .hb-main .hb-masonry .hb-gtile--feat2 { grid-column: span 2; grid-row: span 2; }
.hb-main .hb-masonry .hb-gtile--feat2 { grid-column: 3 / span 2; }
.hb-main .hb-masonry .hb-gtile--feat img, .hb-main .hb-masonry .hb-gtile--feat2 img { position: absolute; inset: 0; aspect-ratio: auto; }
/* Captions always on, on a soft gradient, like the filmstrip */
.hb-main .hb-gtile .gtile__cap {
  opacity: 1; transform: none; z-index: 1; display: flex; flex-direction: column; gap: .1rem;
  padding: 2.75rem .9rem .8rem; box-shadow: none;
  background: linear-gradient(to top, rgba(16, 14, 12, .86), rgba(16, 14, 12, 0));
}
.hb-main .hb-gtile .gtile__cap b { font-family: inherit; font-size: .88rem; font-weight: 600; letter-spacing: -.01em; }
.hb-main .hb-gtile .gtile__cap span { font-size: .74rem; color: var(--hb-gold-soft); }
.hb-main .hb-gtile--feat .gtile__cap, .hb-main .hb-gtile--feat2 .gtile__cap { padding: 4rem 1.3rem 1.15rem; }
.hb-main .hb-gtile--feat .gtile__cap b, .hb-main .hb-gtile--feat2 .gtile__cap b { font-size: 1.1rem; }
.hb-main .hb-gtile--feat .gtile__cap span, .hb-main .hb-gtile--feat2 .gtile__cap span { font-size: .85rem; }
@media (max-width: 1180px) {
  .hb-main .hb-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-main .hb-masonry .hb-gtile--feat, .hb-main .hb-masonry .hb-gtile--feat2 { grid-column: auto; grid-row: auto; }
  .hb-main .hb-masonry .hb-gtile--feat img, .hb-main .hb-masonry .hb-gtile--feat2 img { position: static; aspect-ratio: 9 / 16; }
}
@media (max-width: 900px) { .hb-main .hb-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hb-main .hb-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; }
  .hb-allwork-head .hb-sec-head { flex-basis: 100%; }
  .hb-main .hb-filters button { min-height: 42px; padding-left: .95rem; font-size: .86rem; }
  .hb-main .hb-gtile .gtile__cap { padding: 2.25rem .7rem .65rem; }
  .hb-main .hb-gtile .gtile__cap b { font-size: .8rem; }
  .hb-main .hb-gtile .gtile__cap span { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .hb-main .hb-gtile:hover img { transform: none; } }
/* END PAGE: gallery */
/* PAGE: reviews */
/* Customer video band: dark ground like the filmstrip, a two-column head
   (title left, "why we film" right) and a grid of portrait clips. The grid's
   behaviour (click to play, show more) is site.js; only its look is here. */
.hb-videos { background: var(--hb-deep) var(--hb-grain); background-size: 160px 160px; overflow: hidden; }
.hb-videos::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(55% 45% at 90% 0%, rgba(212, 157, 17, .12), transparent 70%); }
.hb-videos .hb-wrap { position: relative; }
.hb-videos-head {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.75rem, 5vw, 5rem); align-items: end; margin-bottom: var(--hb-sp-head);
}
.hb-videos-head .hb-sec-head { max-width: 620px; }
.hb-videos-why { border-left: 1px solid var(--hb-gold-hair-dk); padding-left: clamp(1.25rem, 2.4vw, 2rem); max-width: 58ch; }
.hb-videos-why p { color: var(--hb-on-dark-mut); font-size: 1rem; line-height: 1.7; }
.hb-videos-why p:first-child { color: var(--hb-on-dark); }
.hb-videos-why > :last-child { margin-bottom: 0; }

.hb-videos .hb-cvids { gap: clamp(.75rem, 1.6vw, 1.25rem); }
.hb-cvids .cvid__btn { border: 1px solid var(--hb-line-dk); border-radius: var(--hb-r); background: var(--hb-dark); box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .8); transition: border-color .3s, transform .45s var(--hb-ease-out), box-shadow .45s var(--hb-ease-out); }
.hb-cvids .cvid__btn:hover { border-color: var(--hb-gold-hair); transform: translateY(-4px); box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .9); }
.hb-cvids .cvid__btn:focus-visible { outline: 3px solid var(--hb-gold-soft); outline-offset: 3px; }
.hb-cvids .cvid__v { background: var(--hb-dark); }
.hb-cvids .cvid__play { width: 60px; height: 60px; background: rgba(22, 22, 31, .55); border: 1.5px solid rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hb-cvids .cvid__btn:hover .cvid__play { background: var(--hb-gold); border-color: var(--hb-gold); color: var(--hb-ink); }
.hb-cvids .cvid.is-playing .cvid__btn { border-color: var(--hb-gold-hair); }
.hb-cvmore { text-align: center; margin-top: clamp(2rem, 3.5vw, 3rem); }
/* .hb-btn sets display, which would beat the [hidden] the script toggles */
.hb-cvmore [hidden] { display: none; }

@media (max-width: 900px) {
  .hb-videos-head { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .hb-videos-why { max-width: 62ch; }
}
@media (max-width: 460px) {
  .hb-videos .hb-cvids { gap: .6rem; }
  .hb-cvids .cvid__play { width: 50px; height: 50px; }
  .hb-cvmore .hb-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-cvids .cvid__btn, .hb-cvids .cvid__btn:hover { transition: none; transform: none; }
}
/* END PAGE: reviews */
/* PAGE: faq */
/* Jump-nav band: one pill per topic, under the hero */
.hb-faqnav { background: var(--hb-card); border-bottom: 1px solid var(--hb-hair-soft); padding: clamp(1.4rem, 2.6vw, 2rem) 0; }
.hb-faqnav-in { display: flex; align-items: center; gap: .9rem 1.6rem; flex-wrap: wrap; }
.hb-faqnav-l { margin: 0 !important; font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--hb-gold-ink); }
.hb-faqnav-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.hb-main .hb-faqnav-pill {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .45rem .55rem .45rem 1rem;
  border: 1px solid var(--hb-hair); border-radius: 999px; background: var(--hb-paper);
  font-size: .9rem; font-weight: 500; color: var(--hb-ink); text-decoration: none;
  transition: border-color .2s, background-color .2s, color .2s;
}
.hb-faqnav-n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 .35rem; border-radius: 999px; background: var(--hb-card); border: 1px solid var(--hb-hair-soft); font-size: .76rem; font-weight: 600; color: var(--hb-muted); }
.hb-main .hb-faqnav-pill:hover, .hb-main .hb-faqnav-pill:focus-visible { border-color: var(--hb-gold); background: var(--hb-tint); color: var(--hb-gold-ink); }
.hb-faqnav-pill:hover .hb-faqnav-n { border-color: var(--hb-gold-hair); color: var(--hb-gold-ink); }
/* Anchored topics land below the sticky header, not under it */
body[data-page="faq"] .hb-faqgroup { scroll-margin-top: calc(var(--header-h, 68px) + .5rem); }

/* Closing band: the "Still reading" note beside the call card */
.hb-faqclose { background: var(--hb-sand); }
.hb-faqclose-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hb-faqclose-text .hb-lede { max-width: 52ch; }
.hb-faqclose-aside { position: static; }
.hb-faqclose .hb-faq-photo { aspect-ratio: 4 / 3.6; }
.hb-faqclose .hb-faq-card .hb-btn + .hb-btn { margin-top: .6rem; }
@media (max-width: 900px) {
  .hb-faqclose-grid { grid-template-columns: 1fr; }
  .hb-faqclose .hb-faq-photo { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
  .hb-faqnav-in { display: block; }
  .hb-faqnav-l { margin-bottom: .75rem !important; }
  .hb-main .hb-faqnav-pill { font-size: .86rem; }
}
/* END PAGE: faq */
/* PAGE: contact */
/* Request form band: form card wide on the left, sticky "before you book" aside */
.hb-contactform { background: var(--hb-paper); box-shadow: inset 0 1px 0 var(--hb-hair-soft); }
.hb-contactform-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hb-form-card--full { box-shadow: var(--hb-shadow-2), 0 0 0 1px rgba(34, 28, 23, .05); padding: clamp(1.5rem, 3vw, 2.75rem); }
.hb-form-card--full::before { left: clamp(1.5rem, 3vw, 2.75rem); right: clamp(1.5rem, 3vw, 2.75rem); }
.hb-form-card--full h2 { font-size: clamp(1.5rem, 2.3vw, 1.95rem); }
.hb-form-card--full .hb-form { gap: 1.1rem 1rem; align-items: start; }
.hb-form-card--full .hb-hint { line-height: 1.45; }
.hb-form-card--full .hb-submit { margin-top: .6rem; }
.hb-before { position: sticky; top: calc(var(--header-h, 68px) + 2rem); padding-top: .4rem; }
.hb-before .hb-h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 1.4rem; }
.hb-before .hb-min-list li { padding: 1.2rem 0 1.25rem; }
.hb-before .hb-min-list h3 { font-size: 1.05rem; }
.hb-before .hb-min-list p { font-size: .93rem; line-height: 1.6; }
.hb-main .hb-before-card { margin: 1.75rem 0 0; }
@media (max-width: 900px) {
  .hb-contactform-grid { grid-template-columns: 1fr; }
  .hb-before { position: static; padding-top: 0; }
}
@media (max-width: 520px) {
  .hb-form-card--full { padding: 1.5rem 1.15rem 1.35rem; }
  .hb-form-card--full::before { left: 1.15rem; right: 1.15rem; }
  .hb-before .hb-min-list li { grid-template-columns: 2.1rem minmax(0, 1fr); gap: .75rem; }
}
/* Final band card: the calendar and the form as the non-phone routes */
.hb-cfinal-card .hb-cmethods li:last-child { border-bottom: 0; padding-bottom: .2rem; }
.hb-cfinal-alt { text-align: center; margin: 1.1rem 0 0 !important; font-size: .95rem; }
.hb-cfinal-alt .hb-text-link { color: var(--hb-ink); }
@media (min-width: 901px) { .hb-final .hb-cfinal-card { max-width: 480px; margin-left: auto; } }
/* END PAGE: contact */

/* PAGE: tile / laminate / hardwood / carpet */
/* Service area + building-rules note. Sand, so it never runs into the paper
   pricing band that follows it on tile and hardwood. */
.hb-area { background: var(--hb-sand); }
.hb-area .hb-min-grid { align-items: start; }
.hb-area .hb-min-copy p:not(.hb-eyebrow) { color: var(--hb-text); line-height: 1.75; }
.hb-area .hb-min-note { margin-top: 0 !important; }

/* Laminate vs vinyl: the table beside the three paragraphs that explain it */
.hb-lamvs { background: var(--hb-card); }
.hb-lamvs .hb-sec-head { margin-bottom: var(--hb-sp-head); max-width: 720px; }
.hb-vs-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hb-vs-table { overflow-x: auto; border-radius: var(--hb-r); box-shadow: var(--hb-shadow-1); background: #fff; border: 1px solid var(--hb-hair); }
.hb-table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.hb-table th, .hb-table td { padding: 1rem 1.15rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hb-hair); }
.hb-table tbody tr:last-child th, .hb-table tbody tr:last-child td { border-bottom: 0; }
.hb-table thead th { font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hb-gold-ink); background: var(--hb-paper); }
.hb-table thead td { background: var(--hb-paper); }
.hb-table tbody th { font-weight: 600; color: var(--hb-ink); white-space: nowrap; }
.hb-table tbody td { color: var(--hb-text); }
.hb-vs-copy p { color: var(--hb-text); line-height: 1.75; }
.hb-vs-copy strong { color: var(--hb-ink); font-weight: 600; }
@media (max-width: 900px) {
  .hb-vs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hb-table th, .hb-table td { padding: .8rem .75rem; font-size: .88rem; }
  .hb-table tbody th { white-space: normal; }
}
/* END PAGE: tile / laminate / hardwood / carpet */

/* PAGE: areas-we-serve + the eight city pages */
.hb-bg-paper { background: var(--hb-paper); }
.hb-bg-white { background: var(--hb-card); }
.hb-bg-sand { background: var(--hb-sand); }
.hb-loc-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.hb-loc-prose p:not(.hb-eyebrow):not(.hb-lede) { color: var(--hb-text); line-height: 1.78; }
.hb-loc-prose .hb-lede { margin-bottom: 1.25rem; }
.hb-loc-narrow { max-width: 760px; }
.hb-loc-side { position: sticky; top: calc(var(--header-h, 68px) + 2rem); }
.hb-loc-pull { margin-top: 0; }
.hb-loc-facts { padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--hb-card); border-radius: var(--hb-r); box-shadow: var(--hb-shadow-1); border-top: 2px solid var(--hb-gold); }
.hb-loc-facts dl { margin: 0; }
.hb-loc-facts dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--hb-hair); }
.hb-loc-facts dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.hb-loc-facts dt { color: var(--hb-muted); font-size: .92rem; }
.hb-loc-facts dd { margin: 0; font-weight: 600; color: var(--hb-ink); text-align: right; }
/* Dark prose band (one per city page at most) */
.hb-loc-statement { background: var(--hb-dark); background-image: var(--hb-grain), var(--hb-planks); background-size: 160px 160px, auto, auto; box-shadow: inset 0 1px 0 var(--hb-gold-hair-dk); }
.hb-loc-statement .hb-min-grid { align-items: start; }
.hb-loc-statement .hb-lede { color: #fff !important; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.hb-loc-statement .hb-loc-prose p { color: var(--hb-on-dark) !important; }
.hb-on-dark .tlink { color: #fff; border-bottom: 1px solid var(--hb-gold-soft); text-decoration: none; }
/* Numbered cards on the dark ground */
.hb-loc-dark { background: var(--hb-dark); background-image: var(--hb-grain), var(--hb-planks); background-size: 160px 160px, auto, auto; }
.hb-loc-dark .hb-min-list li { border-color: var(--hb-line-dk); }
.hb-loc-dark .hb-min-list h3 { color: #fff; }
.hb-loc-dark .hb-min-list p { color: var(--hb-on-dark-mut); }
/* Hub: eight linked city cards */
.hb-cities { background: var(--hb-paper); }
.hb-cities .hb-sec-head { margin-bottom: var(--hb-sp-head); max-width: 760px; }
.hb-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-tiles--4 .hb-tile-img { aspect-ratio: 4 / 3.6; }
/* A grid of equals: no stagger, and cards in a row share one height */
.hb-main .hb-tiles--4 { padding-bottom: 0; align-items: stretch; }
.hb-main .hb-tiles--4 .hb-tile:nth-child(even) { top: 0; }
.hb-tiles--4 .hb-tile-body { flex: 1; display: flex; flex-direction: column; }
.hb-tiles--4 .hb-tile-go { margin-top: auto; }
@media (max-width: 1100px) { .hb-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .hb-loc-grid { grid-template-columns: 1fr; }
  .hb-loc-side { position: static; }
}
@media (max-width: 560px) { .hb-tiles--4 { grid-template-columns: 1fr; } }
/* END PAGE: areas-we-serve + cities */

/* Links inside running text. site.css draws .tlink as an inline-flex call to
   action, which breaks a sentence around it on a narrow screen. Inside prose
   on these pages it flows with the words instead. */
.hb-main p .tlink, .hb-main li .tlink, .hb-main dd .tlink, .hb-main .hb-faq-a .tlink {
  display: inline; font-size: inherit; padding-bottom: 0; border-bottom-width: 1px; overflow-wrap: normal;
}

/* Numbered lists that respond to the reader (pricing factors, options,
   the 400 sq ft list, city cards): the heading column stays in view while
   the list scrolls past it, and each row lights up as it crosses the middle
   of the screen (home.js adds .is-lit) or is hovered. */
@media (min-width: 901px) {
  .hb-min-grid { align-items: start; }
  .hb-min-grid > .hb-min-copy { position: sticky; top: calc(var(--header-h, 68px) + 2.5rem); }
}
.hb-min-list li { position: relative; transition: background-color .45s var(--hb-ease-out), padding-left .45s var(--hb-ease-out); border-radius: 2px; }
.hb-min-list li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--hb-gold); transform: scaleY(0); transform-origin: top;
  transition: transform .6s var(--hb-ease-out);
}
.hb-min-list .hb-n { transition: color .4s, transform .45s var(--hb-ease-out); display: inline-block; }
.hb-min-list h3 { transition: color .35s, transform .45s var(--hb-ease-out); }
.hb-min-list li.is-lit, .hb-min-list li:hover { background-color: rgba(212, 157, 17, .06); padding-left: .9rem; }
.hb-min-list li.is-lit::before, .hb-min-list li:hover::before { transform: scaleY(1); }
.hb-min-list li.is-lit .hb-n, .hb-min-list li:hover .hb-n { color: var(--hb-gold); transform: scale(1.25); }
.hb-on-dark .hb-min-list li.is-lit, .hb-on-dark .hb-min-list li:hover { background-color: rgba(240, 216, 154, .06); }
.hb-on-dark .hb-min-list li.is-lit h3, .hb-on-dark .hb-min-list li:hover h3 { color: var(--hb-gold-soft); }
@media (prefers-reduced-motion: reduce) {
  .hb-min-list li, .hb-min-list li::before, .hb-min-list .hb-n, .hb-min-list h3 { transition: none; }
}