/* WEB-1013 HUMANIZE — opening-movement elements (2026-10-30).
   Self-contained styles for the three elements woven into the homepage
   opening (wide art frame, COMPARE before/after slider, HOTSPOT guided
   inspection). Every selector is scoped to .hz- classes introduced by
   this change; nothing here restyles Brizy markup. Palette follows the
   site's own Brizy globals: ink rgb(36,32,32) (global-color1) and the
   bronze accent rgb(196,138,57) (global-color8). */

/* ---- shared ---- */
.hz-art, .hz-ba, .hz-hot { margin: 1.4rem 0; }
.hz-art img, .hz-ba img, .hz-hot img { max-width: 100%; }

/* ---- wide art frame ---- */
.hz-art-img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 14px rgba(36, 32, 32, 0.22); }
.hz-art-cap { margin-top: 0.55rem; font-size: 0.95rem; line-height: 1.55; color: rgb(36, 32, 32); border-left: 3px solid rgb(196, 138, 57); padding-left: 0.7rem; }

/* ---- COMPARE slider (fleet BeforeAfter contract, hz- scoped) ---- */
.hz-ba-stage { position: relative; overflow: hidden; border-radius: 6px; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; box-shadow: 0 2px 14px rgba(36, 32, 32, 0.22); }
.hz-ba-img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }
.hz-ba-after { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 50%); }
.hz-ba-tag { position: absolute; top: 0.6rem; background: rgba(36, 32, 32, 0.82); color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.2rem 0.55rem; border-radius: 4px; pointer-events: none; }
.hz-ba-tag-before { left: 0.6rem; }
.hz-ba-tag-after { right: 0.6rem; }
.hz-ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(36, 32, 32, 0.35); transform: translateX(-50%); pointer-events: none; }
.hz-ba-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgb(196, 138, 57); color: #fff; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: 0 1px 6px rgba(36, 32, 32, 0.45); }
.hz-ba-stage.hz-ba-dragging, .hz-ba-stage.hz-ba-dragging .hz-ba-knob { cursor: grabbing; }
.hz-ba-range { width: 100%; margin-top: 0.6rem; accent-color: rgb(196, 138, 57); min-height: 44px; }
.hz-ba-cap { margin-top: 0.5rem; font-size: 0.95rem; line-height: 1.55; color: rgb(36, 32, 32); }

/* ---- HOTSPOT guided inspection ---- */
.hz-hot-stage { position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 2px 14px rgba(36, 32, 32, 0.22); }
.hz-hot-img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }
.hz-hot-dot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid #fff; background: rgba(196, 138, 57, 0.95); color: #fff; font-size: 0.95rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 6px rgba(36, 32, 32, 0.5); padding: 0; z-index: 2; }
.hz-hot-dot:hover, .hz-hot-dot:focus-visible { background: rgb(36, 32, 32); outline: none; }
.hz-hot-dot.hz-hot-on { background: rgb(36, 32, 32); transform: translate(-50%, -50%) scale(1.15); }
.hz-hot-cap { margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.55; color: rgb(36, 32, 32); background: rgba(249, 244, 213, 0.55); border-left: 3px solid rgb(196, 138, 57); padding: 0.6rem 0.7rem; min-height: 3.2em; }
.hz-hot-cap-title { font-weight: 700; }

@media (max-width: 480px) {
  .hz-hot-dot { width: 1.8rem; height: 1.8rem; font-size: 0.85rem; }
  .hz-ba-tag { font-size: 0.72rem; }
}

/* ---- FINISH chooser (patios page, 2026-11-04) ---- */
.hz-fin { margin: 1.4rem 0; }
.hz-fin-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; }
.hz-fin-btn { font: inherit; font-weight: 700; font-size: 0.95rem; color: rgb(36, 32, 32); background: #fff; border: 2px solid rgb(196, 138, 57); border-radius: 999px; padding: 0.45rem 1rem; cursor: pointer; min-height: 44px; }
.hz-fin-btn:hover, .hz-fin-btn:focus-visible { background: rgba(196, 138, 57, 0.14); outline: none; }
.hz-fin-btn.hz-fin-on { background: rgb(196, 138, 57); color: #fff; }
.hz-fin-panel { border-radius: 6px; overflow: hidden; box-shadow: 0 2px 14px rgba(36, 32, 32, 0.22); background: #fff; }
.hz-fin-img { display: block; width: 100%; height: auto; }
.hz-fin-price { margin: 0; padding: 0.8rem 1rem 0; font-size: 1.25rem; font-weight: 700; color: rgb(36, 32, 32); }
.hz-fin-text { margin: 0; padding: 0.35rem 1rem 0.95rem; font-size: 0.98rem; line-height: 1.55; color: rgb(36, 32, 32); }
.hz-fin-cap { margin-top: 0.55rem; font-size: 0.95rem; line-height: 1.55; color: rgb(36, 32, 32); border-left: 3px solid rgb(196, 138, 57); padding-left: 0.7rem; }
/* hz-fin panel model (pool decks, epoxy): tab/panel form. Without JS all
   panels stack; the live class gates the hiding to bound pages. */
.hz-fin-btn.hz-fin-active { background: rgb(196, 138, 57); color: #fff; }
.hz-fin.hz-fin-live .hz-fin-panel { display: none; }
.hz-fin.hz-fin-live .hz-fin-panel.hz-fin-active { display: block; }
.hz-fin-intro { font-size: 17px; line-height: 1.6; margin: 0 0 14px; }

/* ---- HOMEPAGE REDO bands (WEB-1013 homepage step, 2026-11-05) ---- */
.hz-band { max-width: 72rem; margin: 0 auto; padding: 2.2rem 1.1rem 0.6rem; color: rgb(36, 32, 32); }
.hz-band h2 { font-size: 1.65rem; line-height: 1.25; margin: 1.6rem 0 0.7rem; }
.hz-band h2:first-child { margin-top: 0; }
.hz-band h3 { font-size: 1.25rem; line-height: 1.3; margin: 1.5rem 0 0.55rem; }
.hz-band p { font-size: 1rem; line-height: 1.6; margin: 0 0 0.9rem; }
.hz-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.hz-badges li { border: 2px solid rgb(196, 138, 57); border-radius: 999px; padding: 0.35rem 0.9rem; font-weight: 700; font-size: 0.92rem; background: rgba(196, 138, 57, 0.08); }
.hz-details { background: rgba(249, 244, 213, 0.55); border-left: 3px solid rgb(196, 138, 57); padding: 0.7rem 0.9rem; margin: 0 0 1.1rem; }
.hz-details p { margin: 0 0 0.3rem; font-size: 0.97rem; }
.hz-details p:last-child { margin-bottom: 0; }

/* hz-gal pattern explorer (stamped page) */
.hz-ba-narrow { max-width: 680px; margin-left: auto; margin-right: auto; }
.hz-gal { max-width: 880px; margin: 2.4rem auto; padding: 0 1rem; color: rgb(36, 32, 32); }
.hz-gal-title { font-size: 1.35rem; margin: 0 0 1rem; }
.hz-gal-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.hz-gal-btn { border: 1px solid rgb(196, 138, 57); background: transparent; color: rgb(36, 32, 32); border-radius: 999px; padding: 0.45rem 1.05rem; font: inherit; cursor: pointer; }
.hz-gal-btn.hz-gal-on { background: rgb(196, 138, 57); color: #fff; }
.hz-gal-panel { display: grid; grid-template-columns: 300px 1fr; gap: 1.1rem; align-items: start; margin-bottom: 1.4rem; }
.hz-gal-panel img { width: 100%; border-radius: 6px; box-shadow: 0 2px 14px rgba(36, 32, 32, 0.22); }
.hz-gal-panel h4 { margin: 0.1rem 0 0.45rem; font-size: 1.1rem; }
.hz-gal-panel p { margin: 0; line-height: 1.55; }
.hz-gal-live .hz-gal-panel { display: none; }
.hz-gal-live .hz-gal-panel.hz-gal-active { display: grid; }
@media (max-width: 640px) { .hz-gal-panel { grid-template-columns: 1fr; } .hz-gal-panel img { max-width: 340px; } }

/* hz-dec repair-or-replace decision piece (repair page) */
.hz-dec { max-width: 880px; margin: 2.4rem auto; padding: 0 1rem; color: rgb(36, 32, 32); }
.hz-dec-title { font-size: 1.35rem; margin: 0 0 1rem; }
.hz-dec-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.hz-dec-btn { border: 1px solid rgb(36, 32, 32); background: transparent; color: rgb(36, 32, 32); border-radius: 999px; padding: 0.45rem 1.05rem; font: inherit; cursor: pointer; }
.hz-dec-btn.hz-dec-on { background: rgb(36, 32, 32); color: #fff; }
.hz-dec-panel { background: rgba(249, 244, 213, 0.55); border-left: 3px solid rgb(196, 138, 57); padding: 0.9rem 1rem; margin-bottom: 1rem; }
.hz-dec-panel h4 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.hz-dec-panel p { margin: 0; line-height: 1.55; }
.hz-dec-live .hz-dec-panel { display: none; }
.hz-dec-live .hz-dec-panel.hz-dec-active { display: block; }

/* hz-list candidate checklist band (resurfacing page) */
.hz-list { max-width: 880px; margin: 2.4rem auto; padding: 1.4rem 1.4rem 1.2rem; background: rgba(249, 244, 213, 0.55); border-left: 3px solid rgb(196, 138, 57); color: rgb(36, 32, 32); }
.hz-list h3 { margin: 0 0 0.9rem; font-size: 1.3rem; }
.hz-list ul { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.hz-list li { padding: 0.35rem 0 0.35rem 1.9rem; position: relative; line-height: 1.55; }
.hz-list li::before { content: "\2713"; position: absolute; left: 0.2rem; color: rgb(196, 138, 57); font-weight: 700; }
.hz-list p { margin: 0; line-height: 1.55; }

/* hz-heat pour-day heat explorer (homepage) */
.hz-heat { max-width: 1060px; margin: 2.6rem auto; padding: 0 1rem; color: rgb(36, 32, 32); }
.hz-heat-kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgb(196, 138, 57); margin: 0 0 8px; }
.hz-heat h2 { font-size: 32px; line-height: 1.15; margin: 0 0 10px; font-weight: normal; }
.hz-heat-lede { font-size: 17px; line-height: 1.55; max-width: 720px; margin: 0 0 24px; }
.hz-heat-panel { background: #fff; border: 1px solid #e5ddd0; border-radius: 6px; padding: 24px; }
.hz-heat-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.hz-heat-big { font-size: 56px; line-height: 1; }
.hz-heat-stage { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgb(196, 138, 57); }
.hz-heat input[type=range] { width: 100%; margin: 18px 0 4px; accent-color: rgb(196, 138, 57); height: 36px; }
.hz-heat-scale { display: flex; justify-content: space-between; font-size: 12px; color: #7a7264; }
.hz-heat-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; margin-top: 20px; }
@media (max-width: 760px) { .hz-heat-cols { grid-template-columns: 1fr; } }
.hz-heat-guide { font-size: 16.5px; line-height: 1.6; }
.hz-heat-guide p { margin: 0 0 12px; }
.hz-heat-gauge { margin-top: 6px; }
.hz-heat-gauge-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #7a7264; margin-bottom: 6px; }
.hz-heat-track { height: 14px; background: #efe8db; border-radius: 7px; position: relative; overflow: hidden; }
.hz-heat-fill { height: 100%; width: 38%; background: linear-gradient(90deg, #d9b26a, rgb(196, 138, 57), #b3541e); border-radius: 7px; transition: width .25s ease; }
.hz-heat-note { font-size: 13.5px; color: #5c5546; margin-top: 8px; line-height: 1.5; }
.hz-heat-facts { border-left: 3px solid rgb(196, 138, 57); padding-left: 16px; margin-top: 20px; }
.hz-heat-facts h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 2px 0 12px; }
.hz-heat-facts p { font-size: 15px; line-height: 1.55; margin: 0 0 12px; }
.hz-heat-src { font-size: 12.5px; color: #8a8172; margin-top: 18px; line-height: 1.5; }

/* hz-story: location-page case story block */
.hz-story { max-width: 1060px; margin: 2.6rem auto; padding: 0 1rem; color: rgb(36, 32, 32); }
.hz-story h2 { font-size: 30px; line-height: 1.2; font-weight: normal; margin: 0 0 14px; }
.hz-story p { font-size: 17px; line-height: 1.62; margin: 0 0 14px; max-width: 780px; }
.hz-story .hz-ba { margin: 20px 0 6px; }
.hz-story-details { border-left: 3px solid rgb(196, 138, 57); padding-left: 16px; font-size: 15.5px; }

/* hz-manager: About-page manager block */
.hz-manager { max-width: 1060px; margin: 2.6rem auto; padding: 0 1rem; color: rgb(36, 32, 32); display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.hz-manager img { width: 250px; max-width: 100%; border-radius: 4px; }
.hz-manager .hz-manager-text { flex: 1 1 420px; }
.hz-manager h2 { font-size: 30px; line-height: 1.2; font-weight: normal; margin: 0 0 4px; }
.hz-manager .hz-manager-role { font-size: 15px; color: rgb(196, 138, 57); margin: 0 0 14px; }
.hz-manager p { font-size: 17px; line-height: 1.62; margin: 0 0 14px; }

/* =====================================================================
   CORRECTION PASS additions (2026-11-06): N3 slider refinement,
   reveal motion, W showcase, I framed units, R cost composition,
   S process rows, X featured composition, Z gallery.
   ===================================================================== */

/* ---- N3: before/after labels + handle read clearly ---- */
.hz-ba-tag { font-size: 0.92rem; padding: 0.32rem 0.7rem; }
.hz-ba-knob { width: 2.9rem; height: 2.9rem; font-size: 1.15rem; }
.hz-ba-handle { width: 4px; }

/* ---- reveal motion (founder's animation direction): soft appear
   when a marked piece scrolls into view. Armed by humanize.js;
   without JS everything simply shows. ---- */
.hz-js-reveal [data-hz-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.hz-js-reveal [data-hz-reveal].hz-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hz-js-reveal [data-hz-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- W: homepage service showcase tiles (photo-led, hover lift) ---- */
.hz-show { max-width: 72rem; margin: 0 auto; padding: 0.6rem 1.1rem 1.4rem; color: rgb(36, 32, 32); }
.hz-show-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .hz-show-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hz-show-grid { grid-template-columns: 1fr; } }
.hz-show-tile { position: relative; margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 14px rgba(36, 32, 32, 0.22); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.hz-show-tile:hover, .hz-show-tile:focus-within { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(36, 32, 32, 0.3); }
.hz-show-tile a { display: block; color: #fff; text-decoration: none; }
.hz-show-tile img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hz-show-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 0.95rem 0.8rem; background: linear-gradient(transparent, rgba(20, 18, 16, 0.82)); font-weight: 700; font-size: 1.02rem; line-height: 1.3; }

/* ---- I: framed column units — photo and its words as ONE piece,
   words over the photo (founder's preferred treatment) ---- */
.hz-frames { max-width: 72rem; margin: 2.2rem auto; padding: 0 1.1rem; color: rgb(36, 32, 32); }
.hz-frames h2 { font-size: 1.65rem; line-height: 1.25; margin: 0 0 0.6rem; }
.hz-frames > p { font-size: 1rem; line-height: 1.6; max-width: 48rem; margin: 0 0 1.3rem; }
.hz-frames-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .hz-frames-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hz-frames-grid { grid-template-columns: 1fr; } }
.hz-frame { position: relative; margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 14px rgba(36, 32, 32, 0.22); min-height: 340px; display: flex; }
.hz-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hz-frame-txt { position: relative; margin-top: auto; width: 100%; padding: 2.6rem 1rem 1rem; background: linear-gradient(transparent, rgba(20, 18, 16, 0.88) 42%); color: #fff; }
.hz-frame-txt h3 { margin: 0 0 0.45rem; font-size: 1.12rem; line-height: 1.3; }
.hz-frame-txt p, .hz-frame-txt li { font-size: 0.94rem; line-height: 1.5; }
.hz-frame-txt p { margin: 0; }
.hz-frame-txt ul { margin: 0; padding-left: 1.05rem; }

/* ---- R: cost section as ONE composed piece (sidewalks) ---- */
.hz-cost { max-width: 72rem; margin: 2.6rem auto; padding: 0 1.1rem; color: rgb(36, 32, 32); }
.hz-cost-head { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 14px rgba(36, 32, 32, 0.22); }
.hz-cost-head img { display: block; width: 100%; height: auto; }
.hz-cost-head-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.4rem 1.2rem; background: linear-gradient(transparent, rgba(20, 18, 16, 0.85)); color: #fff; }
.hz-cost-head-txt h2 { margin: 0 0 0.4rem; font-size: 1.8rem; line-height: 1.2; color: #fff; }
.hz-cost-head-txt p { margin: 0; line-height: 1.55; max-width: 44rem; }
.hz-cost-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin-top: 1.3rem; align-items: start; }
@media (max-width: 760px) { .hz-cost-cards { grid-template-columns: 1fr; } }
.hz-cost-card { background: #fff; border: 1px solid #e5ddd0; border-radius: 10px; padding: 1.25rem 1.3rem 1.1rem; box-shadow: 0 2px 10px rgba(36, 32, 32, 0.1); }
.hz-cost-card h3 { margin: 0 0 0.9rem; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(196, 138, 57); }
.hz-cost-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid #efe8db; }
.hz-cost-row:last-child { border-bottom: 0; }
.hz-cost-row .hz-cost-name { line-height: 1.45; }
.hz-chip { flex: none; background: rgb(36, 32, 32); color: #fff; font-weight: 700; border-radius: 999px; padding: 0.22rem 0.75rem; font-size: 0.95rem; }
.hz-cost-factors { columns: 2; column-gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 480px) { .hz-cost-factors { columns: 1; } }
.hz-cost-factors li { padding: 0.4rem 0 0.4rem 1.5rem; position: relative; line-height: 1.5; break-inside: avoid; }
.hz-cost-factors li::before { content: "\2713"; position: absolute; left: 0.1rem; color: rgb(196, 138, 57); font-weight: 700; }
.hz-cost-band { margin-top: 1.3rem; background: rgb(36, 32, 32); color: rgb(249, 244, 213); border-radius: 10px; padding: 1.3rem 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.4rem; }
.hz-cost-band p { margin: 0; line-height: 1.55; flex: 1 1 26rem; }
.hz-cost-band a { flex: none; background: rgb(196, 138, 57); color: #fff; font-weight: 700; text-decoration: none; border-radius: 999px; padding: 0.6rem 1.3rem; }

/* ---- S: process as step ROWS — photo left, words beside ---- */
.hz-proc { max-width: 1060px; margin: 2.6rem auto; padding: 0 1rem; color: rgb(36, 32, 32); }
.hz-proc h2 { font-size: 1.65rem; line-height: 1.25; margin: 0 0 0.6rem; }
.hz-proc > p { line-height: 1.6; max-width: 48rem; margin: 0 0 0.6rem; }
.hz-proc-row { display: grid; grid-template-columns: 300px 1fr; gap: 1.4rem; padding: 1.4rem 0; border-bottom: 1px solid #e5ddd0; align-items: start; }
.hz-proc-row:last-child { border-bottom: 0; }
@media (max-width: 700px) { .hz-proc-row { grid-template-columns: 1fr; } }
.hz-proc-row img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 12px rgba(36, 32, 32, 0.2); }
.hz-proc-step { display: inline-block; background: rgb(196, 138, 57); color: #fff; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; border-radius: 999px; padding: 0.18rem 0.7rem; margin-bottom: 0.5rem; }
.hz-proc-row h3 { margin: 0 0 0.5rem; font-size: 1.28rem; line-height: 1.3; }
.hz-proc-row p { margin: 0 0 0.6rem; line-height: 1.6; }
.hz-proc-row p:last-child { margin-bottom: 0; }
.hz-proc-why { border-left: 3px solid rgb(196, 138, 57); padding-left: 0.85rem; color: #4c463c; }

/* ---- X: featured composition (commercial foundations) ---- */
.hz-feat { max-width: 72rem; margin: 2.6rem auto; padding: 1.8rem 1.4rem 1.6rem; background: rgba(249, 244, 213, 0.55); border-radius: 12px; color: rgb(36, 32, 32); }
.hz-feat > figure { margin: 0 0 1.3rem; }
.hz-feat > figure img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 14px rgba(36, 32, 32, 0.22); }
.hz-feat h2 { font-size: 1.8rem; line-height: 1.22; margin: 0 0 0.6rem; }
.hz-feat > p { line-height: 1.62; max-width: 50rem; margin: 0 0 1.3rem; }
.hz-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 720px) { .hz-feat-grid { grid-template-columns: 1fr; } }
.hz-feat-item { margin: 0; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(36, 32, 32, 0.14); }
.hz-feat-item img { display: block; width: 100%; height: auto; }
.hz-feat-item figcaption { padding: 1rem 1.1rem 1.1rem; }
.hz-feat-item h3 { margin: 0 0 0.45rem; font-size: 1.18rem; line-height: 1.3; }
.hz-feat-item p { margin: 0; line-height: 1.58; font-size: 0.99rem; }

/* ---- Z: gallery ---- */
.hz-gallery { max-width: 72rem; margin: 0 auto; padding: 2.6rem 1.1rem 1.6rem; color: rgb(36, 32, 32); }
.hz-gallery h1 { font-family: 'DM Serif Text', serif; font-weight: 400; font-size: 2.2rem; line-height: 1.15; margin: 0 0 0.7rem; }
.hz-gallery > p { font-size: 1.06rem; line-height: 1.65; max-width: 50rem; margin: 0 0 1.8rem; }
.hz-gallery h2 { font-family: 'DM Serif Text', serif; font-weight: 400; font-size: 1.6rem; margin: 2.2rem 0 1rem; border-bottom: 2px solid rgba(196, 138, 57, 0.45); padding-bottom: 0.4rem; }
.hz-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 860px) { .hz-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hz-gallery-grid { grid-template-columns: 1fr; } }
.hz-gallery-item { margin: 0; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgba(36, 32, 32, 0.16); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.hz-gallery-item:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(36, 32, 32, 0.26); }
.hz-gallery-item img { display: block; width: 100%; height: auto; }
.hz-gallery-item figcaption { padding: 0.75rem 0.95rem 0.9rem; font-size: 0.95rem; line-height: 1.5; }

/* Correction pass: homepage residential showcase wrapper (item W) */
.hz-show-sec { max-width: 72rem; margin: 0 auto; padding: 2.4rem 1.1rem 0.8rem; color: rgb(36,32,32); }
.hz-show-sec h2 { font-family: 'DM Serif Text', serif; font-size: 2rem; line-height: 1.2; margin: 0 0 0.5rem; }
.hz-show-lede { font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.2rem; max-width: 44rem; }
.hz-show-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 1.5rem; }
.hz-show-notes p { font-size: 1rem; line-height: 1.65; margin: 0; }
@media (max-width: 720px) { .hz-show-notes { grid-template-columns: 1fr; } }

/* Correction pass: split framed units (photo seated with its words, one frame) for text-heavy column blocks */
.hz-frames-split .hz-frame { display: block; min-height: 0; background: #fff; border: 1px solid rgba(36, 32, 32, 0.14); }
.hz-frames-split .hz-frame img { position: static; width: 100%; height: 190px; object-fit: cover; }
.hz-frames-split .hz-frame-body { position: static; background: none; color: rgb(36, 32, 32); padding: 1rem 1.05rem 1.15rem; }
.hz-frames-split .hz-frame-body h3 { color: rgb(36, 32, 32); font-size: 1.12rem; }
.hz-frames-split .hz-frame-body p { color: rgba(36, 32, 32, 0.88); }

/* WEB-1013 correction pass — component repair rules (2026-11-06, post-screenshot fixes: markup/CSS class-role alignment) */
.hz-cost-rows{list-style:none;margin:0;padding:0}
.hz-cost-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem 0;border-bottom:1px solid #efe8db}
.hz-cost-rows li:last-child{border-bottom:0}
.hz-proc-list{list-style:none;margin:0;padding:0}
.hz-proc-kicker{display:inline-block;background:rgb(196,138,57);color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.06em;border-radius:999px;padding:.18rem .7rem;margin:0 0 .5rem;text-transform:uppercase}
.hz-show{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media (max-width:1050px){.hz-show{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.hz-show{grid-template-columns:1fr}}
a.hz-show-tile{display:block;color:#fff;text-decoration:none}
.hz-show-name{display:block}
.hz-show-line{display:block;font-weight:400;font-size:.92rem;line-height:1.45;margin-top:.3rem}
.hz-frames-grid.hz-frames-2col{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.hz-frames-grid.hz-frames-2col{grid-template-columns:1fr}}
.hz-feat-fig{margin:0 0 1.3rem;max-width:46rem}
.hz-feat-fig img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 2px 14px rgba(36,32,32,.22)}
.hz-frames-sec{max-width:72rem;margin:2.2rem auto;padding:0 1.1rem;color:rgb(36,32,32)}
.hz-frames-title{font-size:1.65rem;line-height:1.25;margin:0 0 .6rem}
.hz-frames-intro{font-size:1rem;line-height:1.6;max-width:48rem;margin:0 0 1.3rem}