/* ============================================================
   CABINET BAZAAR  |  HOMEPAGE v2 ("less AI" layout), 2026-10-11
   ------------------------------------------------------------
   Published 2026-10-11. Loaded after styles.css on index.html and
   es.html only. Every rule is scoped to body.hv2, so no other page
   changes. (Kept as its own file rather than merged into styles.css:
   styles.css is cached immutable for a year under one ?v= shared by
   every page, so a merge would mean re-versioning all pages.)
   Source plan: PLAN.md 2b step 5 and audit C-ai-look.md section 5.
   - flat navy and brick, no gradients (the hero photo keeps one
     functional top scrim so the white nav stays readable)
   - no hover lift, glow or icon rotation; colour/underline instead
   - radius 6 / 10 px instead of 16 / 26 px
   - one warm "paper" tone for the showroom and review bands,
     "kraft" for the two short notes
   - #at-a-glance (Quick answer + table) is NEVER targeted here:
     PLAN 2b freezes its wording and styling for the 30-day test.
   Contrast (WCAG, computed): navy #16244f on paper 14.0:1, slate
   #475067 on paper 7.5:1, brick #a81b29 on kraft 6.0:1, navy on
   kraft 12.2:1, navy-800 #101a3a on kraft (Mike's note) 13.9:1, muted #5f6981 on white 5.5:1,
   white on red #c4202f 5.8:1.
   ============================================================ */

.hv2{--paper:#faf7f2;--kraft:#efe7da;--brick:#a81b29;--rule:#e3dccf;--hv-r:6px;--hv-r-lg:10px}

/* ---------- type: same two faces, calmer settings (no -0.045em tracking, 700 not 800) ---------- */
.hv2 main > section:not(#at-a-glance) h2{font-size:clamp(1.75rem,3vw,2.4rem);font-weight:700;letter-spacing:-.015em;line-height:1.15}
.hv2 main > section:not(#at-a-glance) h3{letter-spacing:-.01em;line-height:1.25}
.hv2 .hv2-head{max-width:720px;margin:0 0 34px}
.hv2 .hv2-head .lead{margin:0}
.hv2 .hv2-head--row{max-width:none;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 28px}
.hv2 .hv2-head--row h2{margin:0}
.hv2 .hv2-head--row p{margin:0;color:var(--slate)}
.hv2 .hv2-small{font-size:.94rem;color:var(--slate)}
.hv2 .hv2-mini{font-size:1.02rem;margin:0 0 12px}

/* ---------- buttons inside <main>: flat, no lift, no glow (header/footer untouched until PLAN 2b step 1) ---------- */
.hv2 main .btn{border-radius:var(--hv-r);box-shadow:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.hv2 main .btn:hover,.hv2 main .btn:active{transform:none;box-shadow:none}
.hv2 main .btn--primary{background:var(--red-500)}
.hv2 main .btn--primary:hover{background:var(--brick);color:#fff}
.hv2 main .btn--navy{background:var(--navy-700)}
.hv2 main .btn--navy:hover{background:var(--navy-600);color:#fff}
.hv2 main .btn--ghost{border:1.5px solid var(--navy-600);color:var(--navy-700)}
.hv2 main .btn--ghost:hover{background:var(--navy-tint);color:var(--navy-800)}
.hv2 .hv2-more{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-display);font-weight:700;font-size:.95rem;
  color:var(--red-500);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.hv2 .hv2-more:hover{color:var(--brick)}

/* ---------- short notes on kraft (live text, 18px, at most one per screen) ---------- */
.hv2 .hv2-note{display:inline-block;margin:0;background:var(--kraft);color:var(--brick);font-family:var(--font-body);
  font-weight:700;font-size:18px;line-height:1.3;padding:6px 12px;border-radius:2px;transform:rotate(-1.5deg)}

/* =========================== 1. HERO =========================== */
.hv2 .hv2-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--navy-800);min-height:clamp(580px,76vh,700px)}
.hv2 .hero.hv2-hero{min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;text-align:left;overflow:visible;
  background:var(--navy-800);
  padding:calc(var(--header-h) + 44px) clamp(28px,3.4vw,52px) 56px max(22px,calc((100vw - var(--container)) / 2 + 22px))}
.hv2 .hv2-hero h1{font-size:clamp(2.1rem,3.3vw,3.05rem);font-weight:700;letter-spacing:-.02em;line-height:1.08;text-shadow:none;margin:0 0 20px;max-width:18ch}
.hv2 .hv2-hero .hero__lead{font-size:1.08rem;line-height:1.6;color:rgba(255,255,255,.9);text-shadow:none;max-width:56ch;margin:0 0 28px}
.hv2 .hv2-hero .btn-row{justify-content:flex-start}
.hv2 .hv2-hero :focus-visible{outline-color:#fff}
.hv2 .hv2-facts{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(2,max-content);gap:6px 30px;
  font-size:.93rem;color:#c7d0e6}
.hv2 .hv2-facts a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
.hv2 .hv2-hero__photo{position:relative;margin:0;overflow:hidden;background:var(--navy-700)}
.hv2 .hv2-hero__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}
/* functional scrim only: keeps the white nav links readable where they sit over the photo */
.hv2 .hv2-hero__photo::before{content:"";position:absolute;inset:0 0 auto 0;height:150px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,18,40,.6),rgba(11,18,40,0))}
.hv2 .hv2-hero__photo figcaption{position:absolute;left:20px;bottom:20px;z-index:2;max-width:min(44ch,calc(100% - 40px));
  background:var(--kraft);color:var(--navy-700);font-size:.88rem;line-height:1.45;padding:8px 12px;border-radius:3px}

/* =========================== 2. PRODUCTS =========================== */
.hv2 .hv2-prods{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 30px;align-items:start}
.hv2 .hv2-prod{margin:0;display:flex;flex-direction:column;gap:14px}
.hv2 .hv2-prod--a{grid-column:1 / span 5;grid-row:1 / span 2}
.hv2 .hv2-prod--b{grid-column:6 / span 4}
.hv2 .hv2-prod--c{grid-column:10 / span 3}
.hv2 .hv2-prod--d{grid-column:6 / span 7;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}
.hv2 .hv2-prod__fig{margin:0}
.hv2 .hv2-prod__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--hv-r);background:var(--bg-soft)}
.hv2 .hv2-prod--a .hv2-prod__fig img{aspect-ratio:4/5}
.hv2 .hv2-prod--c .hv2-prod__fig img{aspect-ratio:1/1}
.hv2 .hv2-prod__fig figcaption{margin-top:8px;font-size:.84rem;line-height:1.45;color:var(--muted)}
.hv2 .hv2-prod h3{font-size:1.28rem;margin:0 0 6px}
.hv2 .hv2-prod--a h3{font-size:1.5rem}
.hv2 .hv2-prod p{color:var(--slate);font-size:.98rem;margin:0 0 4px}
.hv2 .hv2-also{margin:40px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:.95rem;color:var(--slate)}

/* =========================== 4. RECENT WORK =========================== */
.hv2 .hv2-mosaic{display:grid;grid-template-columns:4fr 2.5fr 2.5fr 3fr;grid-template-rows:repeat(2,minmax(0,1fr));
  grid-template-areas:"a b b c" "a d e c";gap:18px;height:clamp(560px,50vw,660px)}
.hv2 .hv2-tile{display:block;min-height:0;color:inherit;text-decoration:none}
.hv2 .hv2-tile--a{grid-area:a}.hv2 .hv2-tile--b{grid-area:b}.hv2 .hv2-tile--c{grid-area:c}.hv2 .hv2-tile--d{grid-area:d}.hv2 .hv2-tile--e{grid-area:e}
.hv2 .hv2-tile figure{margin:0;height:100%;display:flex;flex-direction:column}
.hv2 .hv2-tile__img{position:relative;flex:1 1 auto;min-height:0;border-radius:var(--hv-r);overflow:hidden;background:var(--bg-soft-2)}
.hv2 .hv2-tile__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hv2 .hv2-tile figcaption{padding-top:8px;font-size:.86rem;line-height:1.4;color:var(--slate)}
.hv2 .hv2-tile:hover figcaption,.hv2 .hv2-tile:focus-visible figcaption{color:var(--navy-700);text-decoration:underline;text-underline-offset:3px}
.hv2 .hv2-work__foot{margin-top:30px}

/* =========================== 5. DOORS + 3D =========================== */
.hv2 .hv2-doors{padding-top:clamp(24px,4vw,48px)}
.hv2 .hv2-doors__wrap{position:relative;padding-top:42px}
.hv2 .hv2-note--doors{position:absolute;top:0;left:6px;z-index:2}
.hv2 .hv2-doors__scroll:focus-visible{outline-offset:6px}
.hv2 .hv2-doors .swatches{grid-template-columns:repeat(10,minmax(0,1fr));gap:12px}
.hv2 .swatch{box-shadow:none;border-radius:var(--hv-r);transition:border-color .15s ease}
.hv2 .swatch:hover{transform:none;box-shadow:none;border-color:var(--navy-400)}
.hv2 .hv2-doors .swatches > .swatch:nth-child(-n+3){border-color:var(--brick);border-width:1.5px}
.hv2 .swatch__name{padding:9px 10px;font-size:.86rem}
.hv2 .hv2-doors__more{margin:26px 0 0}
.hv2 .hv2-doors .cta-band{margin-top:56px;background:var(--navy-700);border-radius:var(--hv-r-lg)}
.hv2 .hv2-doors .cta-band::before{display:none}
.hv2 .hv2-doors .demo-band__visual{border-radius:var(--hv-r);box-shadow:none}

/* =========================== 6. SHOWROOM =========================== */
.hv2 .hv2-showroom{background:var(--paper)}
.hv2 .hv2-showroom__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.hv2 .hv2-showroom__text p{color:var(--slate)}
.hv2 .hv2-nap{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:24px 0 26px;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hv2 .hv2-nap div{display:contents}
.hv2 .hv2-nap dt{font-family:var(--font-display);font-weight:700;color:var(--navy-800);font-size:.95rem}
.hv2 .hv2-nap dd{margin:0;color:var(--ink)}
.hv2 .hv2-sign{margin:8px 0 0;position:relative}
.hv2 .hv2-sign img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--hv-r)}
.hv2 .hv2-note--sign{position:absolute;left:-14px;bottom:-18px}
.hv2 .hv2-showroom__samples{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr) minmax(0,310px);gap:44px;
  margin-top:72px;padding-top:52px;border-top:1px solid var(--rule);align-items:start}
.hv2 .hv2-video{max-width:230px;border-radius:var(--hv-r-lg);box-shadow:none}
.hv2 .hv2-samples__text h3{font-size:1.45rem;margin:0 0 10px}
.hv2 .hv2-samples__text p{color:var(--slate)}
.hv2 .hv2-list{list-style:none;padding:0;margin:16px 0 26px;display:grid;gap:10px}
.hv2 .hv2-list li{position:relative;padding-left:20px;color:var(--slate);line-height:1.55}
.hv2 .hv2-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--brick);border-radius:1px}
.hv2 .hv2-list strong{color:var(--ink)}
.hv2 .hv2-chips{display:flex;flex-wrap:wrap;gap:8px}
.hv2 .chip{box-shadow:none;border-color:#d9d2c4;background:#fff}
.hv2 .chip:hover{transform:none;box-shadow:none;border-color:var(--navy-600)}

/* =========================== 7. HOW WE WORK =========================== */
.hv2 .hv2-how__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.hv2 .hv2-how__main .lead{max-width:none}
.hv2 .hv2-points{list-style:none;padding:0;margin:22px 0 34px;border-top:1px solid var(--line)}
.hv2 .hv2-points li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--slate)}
.hv2 .hv2-points b{color:var(--ink)}
.hv2 .hv2-points--tight{margin:16px 0 22px}
.hv2 .hv2-points--tight li{padding:9px 0;font-size:.95rem}
.hv2 .hv2-how__main h3{font-size:1.35rem;margin:0 0 6px}
.hv2 .hv2-steps{list-style:none;counter-reset:hs;padding:0;margin:12px 0 32px;display:grid;gap:14px}
.hv2 .hv2-steps li{counter-increment:hs;position:relative;padding-left:2.1rem;color:var(--slate)}
.hv2 .hv2-steps li::before{content:counter(hs);position:absolute;left:0;top:-.12em;font-family:var(--font-display);font-weight:700;font-size:1.3rem;line-height:1.3;color:var(--brick)}
.hv2 .hv2-steps b{color:var(--ink)}
/* a short signed note from Mike (text only: there is no real photo of him, and no stand-in is used) */
.hv2 .hv2-owner{margin:0 0 30px;background:var(--kraft);border-radius:var(--hv-r);padding:22px 24px 20px}
.hv2 .hv2-owner blockquote{margin:0}
.hv2 .hv2-owner blockquote p{margin:0 0 12px;color:var(--navy-800);font-size:1.06rem;line-height:1.6}
.hv2 .hv2-owner figcaption{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--brick)}
.hv2 .hv2-trade{background:var(--paper);border-top:3px solid var(--navy-700);padding:22px 24px 24px;border-radius:0 0 var(--hv-r) var(--hv-r)}
.hv2 .hv2-trade h3{font-size:1.3rem;margin:0 0 8px}
.hv2 .hv2-trade > p{color:var(--slate);font-size:.98rem}
.hv2 .hv2-label{font-weight:700;font-size:.92rem;color:var(--brick);margin:0 0 2px}
.hv2 .hv2-trade .btn-row{gap:10px}
.hv2 .hv2-trade .btn{white-space:normal;text-align:center;line-height:1.25}

/* =========================== 8. REVIEWS =========================== */
.hv2 .hv2-reviews{background:var(--paper)}
.hv2 .hv2-reviews__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:60px;align-items:start}
.hv2 .hv2-reviews__side > p{color:var(--slate)}
.hv2 .hv2-rating{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:4px 0 12px}
.hv2 .hv2-rating b{font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--navy-700)}
.hv2 .hv2-stars{color:#996400;letter-spacing:2px;font-size:1.05rem}
.hv2 .hv2-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 32px}
.hv2 .hv2-quote{margin:0;padding-top:16px;border-top:1px solid var(--rule)}
.hv2 .hv2-quote blockquote{margin:0}
.hv2 .hv2-quote blockquote p{margin:0 0 12px;color:var(--ink);font-size:.98rem;line-height:1.6}
.hv2 .hv2-quote--lead{grid-column:1 / -1;border-top:3px solid var(--brick);padding-top:20px}
.hv2 .hv2-quote--lead blockquote p{font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.55;max-width:60ch}
.hv2 .hv2-quote figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.88rem;color:var(--slate)}
.hv2 .hv2-quote figcaption b{font-family:var(--font-display);color:var(--ink);font-size:.95rem}
.hv2 .hv2-src{color:var(--slate)}

/* =========================== 9. FAQ =========================== */
.hv2 .hv2-faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:60px;align-items:start}
.hv2 .hv2-faq__side{position:sticky;top:calc(var(--header-h) + 24px)}
.hv2 .hv2-faq__side p{color:var(--slate)}
.hv2 .hv2-faq .faq{max-width:none;margin:0;border-top:1px solid var(--line)}
.hv2 .hv2-faq .faq__item{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;background:transparent}
.hv2 .hv2-faq .faq__q{padding:18px 2px;font-size:1.02rem}
.hv2 .hv2-faq .faq__a p{padding:0 2px 20px}

/* =========================== 10. ESTIMATE =========================== */
.hv2 .hv2-estimate{background:var(--navy-800);color:#fff}
.hv2 .hv2-estimate__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.hv2 .hv2-estimate__side h2{color:#fff}
.hv2 .hv2-estimate__side .lead{color:#c7d0e6;margin-bottom:26px}
.hv2 .hv2-estimate__side :focus-visible{outline-color:#fff}
.hv2 .hv2-estimate .form-wrap{border:0;box-shadow:none;border-radius:var(--hv-r-lg);color:var(--ink)}
.hv2 .hv2-estimate .form-wrap h3{font-size:1.35rem;margin:0 0 6px}
.hv2 .hv2-estimate .form-wrap .hv2-small{margin:0 0 18px}

/* ---------- the "Where to go from here" cards main.js adds above the footer (owner asked for the layer on 09-05; only its look changes here) ---------- */
.hv2 .explore .eyebrow::before{display:none}
.hv2 .explore__card{box-shadow:none;border-radius:var(--hv-r-lg);transition:border-color .15s ease}
.hv2 .explore__card:hover{transform:none;box-shadow:none;border-color:var(--navy-600)}
.hv2 .explore__card--hot{background:var(--navy-700)}

/* =========================== RESPONSIVE =========================== */
@media (max-width:1199px){
  .hv2 .hv2-doors .swatches{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hv2 .hv2-showroom__samples{grid-template-columns:minmax(0,230px) minmax(0,1fr)}
  .hv2 .hv2-areas{grid-column:1 / -1}
}
@media (max-width:960px){
  .hv2 .hv2-top{grid-template-columns:minmax(0,1fr);min-height:0}
  .hv2 .hero.hv2-hero{padding:calc(var(--header-h) + 34px) 22px 40px}
  .hv2 .hv2-hero__photo{aspect-ratio:16/11}
  .hv2 .hv2-hero__photo::before{display:none}
  .hv2 .hv2-prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
  .hv2 .hv2-prod--a{grid-column:1;grid-row:1 / span 2}
  .hv2 .hv2-prod--b{grid-column:2;grid-row:1}
  .hv2 .hv2-prod--c{grid-column:2;grid-row:2}
  .hv2 .hv2-prod--d{grid-column:1 / -1;grid-row:3}
  .hv2 .hv2-prod--c .hv2-prod__fig img{aspect-ratio:4/3}
  .hv2 .hv2-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:280px 280px 300px;grid-template-areas:"a b" "a c" "d e";height:auto}
  .hv2 .hv2-showroom__top,.hv2 .hv2-how__grid,.hv2 .hv2-reviews__grid,.hv2 .hv2-faq__grid,.hv2 .hv2-estimate__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hv2 .hv2-showroom__top{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:36px}
  .hv2 .hv2-faq__side{position:static}
  .hv2 .hv2-how__side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
  .hv2 .hv2-owner{margin:0}
}
@media (max-width:700px){
  .hv2 .hv2-showroom__top{grid-template-columns:minmax(0,1fr)}
  .hv2 .hv2-note--sign{left:10px}
  .hv2 .hv2-how__side{grid-template-columns:minmax(0,1fr)}
  .hv2 .hv2-quotes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .hv2 .hv2-hero h1{font-size:2rem}
  .hv2 .hv2-hero .hero__lead{font-size:1rem}
  .hv2 .hv2-facts{grid-template-columns:minmax(0,1fr)}
  .hv2 .hv2-hero__photo figcaption{left:12px;bottom:12px;max-width:calc(100% - 24px);font-size:.82rem}
  .hv2 .hv2-prods{grid-template-columns:minmax(0,1fr)}
  .hv2 .hv2-prod--a,.hv2 .hv2-prod--b,.hv2 .hv2-prod--c,.hv2 .hv2-prod--d{grid-column:1;grid-row:auto}
  .hv2 .hv2-prod--d{display:flex}
  .hv2 .hv2-prod--a .hv2-prod__fig img{aspect-ratio:4/3}
  .hv2 .hv2-mosaic{gap:12px;grid-template-rows:260px 190px 190px;grid-template-areas:"a a" "b c" "d e"}
  .hv2 .hv2-tile figcaption{font-size:.8rem}
  /* doors: one swipeable row instead of five rows of tall doors */
  .hv2 .hv2-doors__scroll{overflow-x:auto;scroll-snap-type:x proximity;margin-inline:-22px;padding:0 22px 10px;-webkit-overflow-scrolling:touch}
  .hv2 .hv2-doors .swatches{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:116px;gap:10px}
  .hv2 .hv2-doors .swatch{scroll-snap-align:start}
  .hv2 .hv2-showroom__samples{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:56px;padding-top:40px}
  .hv2 .hv2-video{max-width:220px}
  .hv2 .hv2-rating b{font-size:2rem}
  .hv2 .hv2-estimate__side .btn-row .btn{width:100%}
}