/* One starting line for the service titles, stable while mobile browser bars move. */
:root { --detail-title-top: clamp(80px, 10svh, 144px); }
.door-front { position: absolute; top: var(--detail-title-top); left: 5%; right: 5%; --df-shift: 0px; }
.mow-title, .hero-front, .kb-front { top: var(--detail-title-top); }
.kb-front { transform: none; }
.z1-vp { padding-top: var(--detail-title-top); }
/* Keep the fence's replacement sentence in the same reserved title slot. */
.z1-copy { transform: none; }
.detail-scroll-hint { display: flex; cursor: pointer; pointer-events: auto; }
.detail-scroll-hint:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; }
html.detail-scrolled .detail-scroll-hint { opacity: 0 !important; visibility: hidden; pointer-events: none; }
/* Give the gate drawing its own remaining row, including short landscape screens. */
.door-vp { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: var(--detail-title-top) 0 64px; gap: 24px; }
.door-front { position: relative; top: auto; left: auto; right: auto; width: 90%; justify-self: center; }
.door { width: 100%; height: 100%; min-height: 0; }
.door svg.bp-desktop, .door svg.bp-mobile { height: 100%; max-height: 62svh; }