/* Round H (27 Oct 2026; docs/design-loop/2026-10-27-round-h-brief.md): the flat, verbose sections lifted with what the
   design system already has. Loaded last in the head, only on pages with a lifted section (data-lift), by
   scripts/build-full-site.mjs; every rule is scoped to a lifted section. The homepage journey (H1) has its own
   stylesheet, door-journey.css. */

/* H2, the homepage reviews: one of Dean's fitted door photographs leads; the heading, the ratings and the deck sit
   beside it after a clear break (a rule and the heading between them), so no named review reads as that door's. */
html body .trust-home[data-lift]{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px clamp(48px,6vw,88px);align-items:start;padding-block:72px}
html body .trust-home[data-lift] .trust-home-photo{margin:0;min-width:0}
html body .trust-home[data-lift] .trust-home-photo img{display:block;width:100%;height:auto;max-height:600px;aspect-ratio:938/1200;object-fit:cover;object-position:50% 60%;border-radius:6px}
html body .trust-home[data-lift] .trust-home-photo figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:#625b6b}
html body .trust-home[data-lift] .trust-home-photo figcaption a{display:inline-flex;align-items:center;min-height:44px;color:#332483;font-weight:600}
html body .trust-home[data-lift] .trust-home-body{display:flex;flex-direction:column;gap:28px;min-width:0;padding-left:clamp(28px,3vw,48px);border-left:1px solid #e4dfe9}
html body .trust-home[data-lift] .trust-home-intro{position:static;gap:14px}
html body .trust-home[data-lift] .trust-home-intro h2{max-width:22ch}
html body .trust-home[data-lift] .trust-home-cards{max-width:600px}
/* While stacked, the cards under the first take its height (trust-signals.js measures it) and show only their edges. */
html body .trust-deck.is-stacked .trust-quote-card:not(:first-child){height:var(--deck-card,auto);overflow:hidden}
html body .trust-deck.is-stacked .trust-quote-card:not(:first-child)>*{visibility:hidden}
@media(max-width:900px){
 html body .trust-home[data-lift]{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:40px}
 /* Square, so the whole door shows, from the head of its frame to the step. */
 html body .trust-home[data-lift] .trust-home-photo img{aspect-ratio:1/1;max-height:none;object-position:50% 64%}
 html body .trust-home[data-lift] .trust-home-body{padding:24px 0 0;border-left:0;border-top:1px solid #e4dfe9}
}

/* H3, the homepage paths: each card leads with its product. The designer's turned view of a door stands on Round G's
   lit ground with its contact shadow; the fire door is the apartment entrance scene the fire range uses. The picture
   fills its card's left column from top to bottom whatever the text's height (the critic, 27 Oct 2026); below 1100px
   the cards stack, and on phones the picture leads, square, so each door shows whole. */
html body .shop-paths[data-lift]{padding-top:72px;padding-bottom:72px}
html body .shop-paths[data-lift]>a{position:relative;display:block;min-height:260px;padding:40px 36px 40px calc(38% + clamp(24px,3vw,40px));overflow:hidden}
html body .shop-paths[data-lift] .shop-path-picture{position:absolute;top:0;bottom:0;left:0;display:block;width:38%;margin:0;overflow:hidden}
html body .shop-paths[data-lift] .shop-path-turned{background:radial-gradient(130% 95% at 50% 0%,#f7f5f1 0%,#ede9e2 55%,#e1dbd1 100%)}
html body .shop-paths[data-lift] .shop-path-turned img{position:absolute;z-index:1;left:50%;bottom:11%;width:auto;height:76%;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 3px 2px rgba(41,33,22,.16)) drop-shadow(0 14px 14px rgba(41,33,22,.12))}
html body .shop-paths[data-lift] .shop-path-turned:after{content:'';position:absolute;left:50%;bottom:calc(11% - 9px);width:48%;height:18px;transform:translateX(-50%) rotate(-3.5deg) scaleX(.94);border-radius:50%;background:radial-gradient(closest-side,rgba(38,34,30,.26),rgba(38,34,30,.1) 58%,rgba(38,34,30,0))}
html body .shop-paths[data-lift] .shop-path-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
html body .shop-paths[data-lift] h2{margin:12px 0}
html body .shop-paths[data-lift] p{margin:0 0 18px}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
 html body .shop-paths[data-lift] .shop-path-picture img{transition:transform .45s cubic-bezier(.22,1,.36,1)}
 html body .shop-paths[data-lift]>a:hover .shop-path-turned img{transform:translateX(-50%) translateY(-4px)}
 html body .shop-paths[data-lift]>a:hover .shop-path-scene img{transform:scale(1.03)}
}
@media(max-width:1100px){html body .shop-paths[data-lift]{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
 html body .shop-paths[data-lift]{padding-top:40px;padding-bottom:40px}
 html body .shop-paths[data-lift]>a{min-height:0;padding:0 26px 26px}
 html body .shop-paths[data-lift] .shop-path-picture{position:relative;width:auto;aspect-ratio:1/1;margin:0 -26px 22px}
 html body .shop-paths[data-lift] .shop-path-turned img{height:80%;bottom:10%}
 html body .shop-paths[data-lift] .shop-path-scene img{object-position:50% 45%}
}

/* H6, Contact: a photograph of the showroom leads the visit card, the address under it; the form is unchanged. */
html body .hhi-contact-photo{margin:0 0 22px}
/* The photograph makes the visit card taller than the form; the form keeps its own height rather than stretching to it. */
html body .hhi-contact:has(.hhi-contact-photo)>form{align-self:start}
html body .hhi-contact-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 50%;border-radius:6px}
html body .hhi-contact-photo figcaption{margin-top:8px;font-size:13px;line-height:1.5;color:#625b6b}