/* Homepage 04 compositions. Everything below the locked opening.
   Shared parts live in design-system/. Mobile first. */

body.has-dock { padding-bottom: 66px; }
.h-window h2, .h-gutter h2, .h-stage h2, .h-results h2, .h-reviews h2, .h-areas h2, .h-about h2, .h-commercial h2, .h-faq h2, .h-close h2 { margin-bottom: var(--tlc-s5); }

/* Window: the largest photograph below the hero */
.h-window { background: var(--tlc-white); padding-bottom: var(--tlc-section); }
.h-window article { position: relative; }
.h-window__art { position: relative; padding-bottom: 54px; }
.h-window__main { aspect-ratio: 3/2; border-radius: 0 var(--tlc-sweep-lg) 0 0; overflow: hidden; }
.h-window__inset { position: absolute; left: var(--tlc-gutter); bottom: 0; width: min(42%, 200px); aspect-ratio: 1; }
.h-window__panel { padding: var(--tlc-s6) var(--tlc-gutter) 0; }
.h-features { display: grid; gap: var(--tlc-s4); margin: var(--tlc-s5) 0 var(--tlc-s6); padding: 0; list-style: none; }
.h-features li { display: flex; align-items: center; gap: var(--tlc-s3); }
.h-features__icon { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border-radius: 12px 12px 12px 3px; background: var(--tlc-navy); color: var(--tlc-green); }
.h-features__icon svg { width: 22px; height: 22px; }
.h-features strong { display: block; font-size: var(--tlc-text-md); line-height: 1.25; }
.h-features span:not(.h-features__icon) { display: block; color: var(--tlc-ink-soft); font-size: var(--tlc-text-sm); line-height: 1.4; }

/* Gutter: tactile close-ups on a pale ground */
.h-gutter { background: var(--tlc-pale); border-radius: var(--tlc-sweep-lg) 0 0 0; padding-block: var(--tlc-section); overflow: hidden; }
.h-gutter__grid { display: grid; gap: var(--tlc-s7); }
.h-gutter__signs-title { margin: var(--tlc-s5) 0 var(--tlc-s3); font-size: var(--tlc-text-md); letter-spacing: 0; line-height: 1.3; }
.h-gutter__signs { margin: 0 0 var(--tlc-s6); padding: 0; list-style: none; }
.h-gutter__signs li { position: relative; padding: var(--tlc-s2) 0 var(--tlc-s2) 26px; font-size: var(--tlc-text-md); }
.h-gutter__signs li::before { content: ""; position: absolute; left: 0; top: 18px; width: 14px; height: 3px; background: var(--tlc-green-text); }
.h-gutter__art { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--tlc-s3); }
.h-gutter__main { grid-column: 1/-1; aspect-ratio: 4/3; }
.h-gutter__a, .h-gutter__b { aspect-ratio: 4/3; }
.h-gutter__a { margin-top: -44px; z-index: 1; }

/* Services: expanding photographic panels */
.h-stage { position: relative; background: var(--tlc-navy); color: var(--tlc-white); padding-block: var(--tlc-section); overflow: hidden; }
.h-stage__head { display: grid; gap: var(--tlc-s4); margin-bottom: var(--tlc-s6); }
.h-stage__head p { color: var(--tlc-on-dark); }
.h-show { display: grid; gap: var(--tlc-s2); }
.h-show__panel { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; overflow: hidden; border-radius: var(--tlc-corner); background: var(--tlc-navy-2); isolation: isolate; }
.h-show__panel:first-child { border-top-left-radius: var(--tlc-sweep-md); }
.h-show__panel:last-child { border-bottom-right-radius: var(--tlc-sweep-md); }
.h-show__photo { position: absolute; inset: 0; z-index: -2; margin: 0; }
.h-show__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform var(--tlc-slow) var(--tlc-ease); }
.h-show__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13, 25, 38, .95) 0%, rgba(13, 25, 38, .74) 42%, rgba(13, 25, 38, .06) 72%); }
.h-show.is-ready .h-show__panel:not(.is-open)::before { background: linear-gradient(0deg, rgba(13, 25, 38, .9) 0%, rgba(13, 25, 38, .62) 100%); }
.h-show__body { padding: var(--tlc-s4) var(--tlc-s4) var(--tlc-s5); }
.h-show__body h3 { margin: 0; font-size: var(--tlc-h3); line-height: 1.1; letter-spacing: -.02em; }
.h-show__toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--tlc-s3); width: 100%; min-height: 44px; padding: 0; background: none; color: var(--tlc-white); font: inherit; letter-spacing: inherit; text-align: left; }
.h-show__toggle::after { content: ""; flex: 0 0 16px; height: 16px; background: linear-gradient(var(--tlc-green), var(--tlc-green)) center/100% 2px no-repeat, linear-gradient(var(--tlc-green), var(--tlc-green)) center/2px 100% no-repeat; transition: transform var(--tlc-base) var(--tlc-ease), opacity var(--tlc-fast); }
.h-show__toggle:focus-visible { outline: 3px solid var(--tlc-green); outline-offset: 3px; }
.h-show__detail p { margin: var(--tlc-s2) 0 var(--tlc-s4); max-width: 44ch; color: var(--tlc-on-dark); font-size: var(--tlc-text-md); line-height: 1.5; }
.h-show .tlc-actions { gap: var(--tlc-s2) var(--tlc-s5); }
.h-show.is-ready .h-show__panel { min-height: 0; height: 104px; transition: height var(--tlc-slow) var(--tlc-ease); }
.h-show.is-ready .h-show__panel.is-open { height: 440px; }
.h-show.is-ready .h-show__detail { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows var(--tlc-slow) var(--tlc-ease), opacity var(--tlc-base), visibility var(--tlc-base); }
.h-show.is-ready .h-show__detail > * { min-height: 0; overflow: hidden; }
.h-show.is-ready .is-open .h-show__detail { grid-template-rows: auto auto; visibility: visible; opacity: 1; transition-delay: 0ms, 160ms, 0ms; }
.h-show.is-ready .h-show__panel:not(.is-open) .tlc-actions { display: none; }
.h-show__panel.is-open .h-show__photo img { transform: scale(1); }
.h-show__panel.is-open .h-show__toggle::after { opacity: 0; transform: rotate(135deg); }

/* Results */
.h-results { background: var(--tlc-white); padding-block: var(--tlc-section); }
.h-results__head { margin-bottom: var(--tlc-s5); }
.h-results__head h2 { margin-bottom: 0; }
.h-results__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tlc-s3); }
.h-compare { position: relative; grid-column: 1/-1; aspect-ratio: 4/3; border-radius: var(--tlc-sweep-md) var(--tlc-corner) var(--tlc-corner) var(--tlc-corner); overflow: hidden; background: var(--tlc-pale); }
.h-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 900ms var(--tlc-ease); }
.h-compare.is-before .h-compare__after { opacity: 0; }
.h-compare__switch { position: absolute; left: var(--tlc-s3); bottom: var(--tlc-s3); display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 26px; background: rgba(13, 25, 38, .82); }
.h-compare__switch::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 22px; background: var(--tlc-white); transform: translateX(100%); transition: transform var(--tlc-base) var(--tlc-ease); }
.h-compare.is-before .h-compare__switch::before { transform: none; }
.h-compare__switch button { position: relative; min-width: 84px; min-height: 40px; padding: 6px 16px; background: none; color: var(--tlc-white); font: 700 var(--tlc-text-sm)/1 var(--tlc-font); transition: color var(--tlc-base); }
.h-compare__switch button[aria-pressed="true"] { color: var(--tlc-navy); }
.h-compare__switch button:focus-visible { outline: 3px solid var(--tlc-green); outline-offset: 2px; border-radius: 20px; }
.h-results__grid > figure { aspect-ratio: 4/3; border-radius: var(--tlc-corner); overflow: hidden; }
.h-results__grid > figure img { transition: transform var(--tlc-slow) var(--tlc-ease); }
.h-results__grid > figure:hover img { transform: scale(1.04); }
.h-results__grid > figure.tlc-media--sweep-tr { border-radius: var(--tlc-corner) var(--tlc-sweep-sm) var(--tlc-corner) var(--tlc-corner); }
.h-results__grid > figure.tlc-media--sweep-br { border-radius: var(--tlc-corner) var(--tlc-corner) var(--tlc-sweep-sm) var(--tlc-corner); }
.h-split > span { position: absolute; bottom: 8px; padding: 3px 9px; border-radius: 12px; background: rgba(13, 25, 38, .82); color: var(--tlc-white); font-size: .75rem; font-weight: 700; line-height: 1.3; }
.h-split > span:nth-of-type(1) { left: 8px; }
.h-split > span:nth-of-type(2) { right: 8px; }

/* Reviews: the real Trustindex widget on a composed navy scene */
.h-reviews { position: relative; background: var(--tlc-navy); color: var(--tlc-white); border-radius: var(--tlc-sweep-lg) 0 var(--tlc-sweep-lg) 0; padding-block: var(--tlc-section); }
.h-reviews__head { margin-bottom: var(--tlc-s5); }
.h-reviews h2 { margin-bottom: 0; }
.h-reviews__photo { display: none; }
.h-reviews__widget { min-height: 530px; }
@media (min-width: 620px) { .h-reviews__widget { min-height: 420px; } }
.h-reviews__fallback { color: var(--tlc-white); }
.h-reviews__widget:has(.ti-widget) + .h-reviews__fallback { display: none; }

/* Areas */
.h-areas { background: var(--tlc-white); padding-block: var(--tlc-section); }
.h-areas__grid { display: grid; gap: var(--tlc-s6); }
.h-areas__grid > *, .h-reviews__head > *, .h-stage__head > *, .h-faq__grid > * { min-width: 0; }
.h-areas__copy { order: -1; }
.h-areas__map { position: relative; margin-bottom: 32px; background: var(--tlc-navy); border-radius: var(--tlc-sweep-md) var(--tlc-corner) var(--tlc-sweep-md) var(--tlc-corner); }
.h-map__key { margin: 0; padding: var(--tlc-s2) var(--tlc-s4) var(--tlc-s4) 46%; min-height: 96px; color: var(--tlc-on-dark); font-size: var(--tlc-text-xs); line-height: 1.4; }
.h-map { display: block; width: 100%; height: auto; overflow: visible; }
.h-map__switch { position: relative; z-index: 2; display: inline-grid; grid-template-columns: 1fr 1fr; margin: var(--tlc-s4) 0 0 var(--tlc-sweep-sm); padding: 4px; border-radius: 26px; background: var(--tlc-navy-2); }
.h-map__switch button { min-height: 40px; padding: 6px 14px; border-radius: 20px; background: none; color: var(--tlc-on-dark); font: 700 var(--tlc-text-sm)/1 var(--tlc-font); white-space: nowrap; transition: background var(--tlc-base), color var(--tlc-base); }
.h-map__switch button[aria-pressed="true"] { background: var(--tlc-white); color: var(--tlc-navy); }
.h-map__switch button:focus-visible { outline: 3px solid var(--tlc-green); outline-offset: 2px; }
.h-map__key-region { display: none; }
[data-map].is-region .h-map__key-rounds { display: none; }
.is-region .h-pin:not([data-pin="Ipswich"]) { opacity: 0; pointer-events: none; }
.h-pin { transition: opacity var(--tlc-base); }
.is-region .h-pin[data-pin="Ipswich"] text { opacity: 1; font-size: 15px; }
.is-region .h-pin[data-pin="Ipswich"] .h-pin__dot { r: 6px; }
.is-region .h-pin[data-pin="Ipswich"] .h-pin__halo { opacity: .35; r: 13px; }
[data-map].is-region .h-map__key-region { display: inline; }
.h-map__county { fill: var(--tlc-white); font: 700 16px var(--tlc-font); text-anchor: middle; opacity: 0; pointer-events: none; transition: opacity var(--tlc-base); }
.is-region .h-map__county { opacity: 1; }
.is-region .h-map__place, .is-region .h-pin text { opacity: 0; }
.h-map__place, .h-pin text { transition: opacity var(--tlc-base), fill var(--tlc-fast); }
.h-map { aspect-ratio: 252/185; overflow: hidden; margin-top: var(--tlc-s2); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%); mask-image: linear-gradient(to bottom, transparent, #000 9%); }
.h-map__place { fill: #8fb0bf; font: italic 400 7px var(--tlc-font); letter-spacing: .06em; text-anchor: middle; pointer-events: none; }
.h-pin { cursor: pointer; outline: none; }
.h-pin__hit { fill: transparent; }
.h-pin__halo { fill: var(--tlc-green); opacity: 0; transition: opacity var(--tlc-fast); }
.h-pin__dot { fill: var(--tlc-green); stroke: var(--tlc-navy); stroke-width: 1; transition: fill var(--tlc-fast); }
.h-pin text { fill: var(--tlc-white); font: 700 8px var(--tlc-font); paint-order: stroke; stroke: #17364a; stroke-width: 2px; pointer-events: none; }
.h-pin:hover .h-pin__halo, .h-pin:focus-visible .h-pin__halo, .h-pin.is-active .h-pin__halo { opacity: .4; }
.h-pin.is-active .h-pin__dot { fill: var(--tlc-white); }
.h-pin.is-active text, .h-pin:hover text, .h-pin:focus-visible text { fill: var(--tlc-green); }
.h-areas__photo { position: absolute; left: var(--tlc-s3); bottom: -32px; width: min(38%, 150px); aspect-ratio: 4/3; }
.h-finder { display: block; margin-top: var(--tlc-s5); font-weight: 700; font-size: var(--tlc-text-sm); }
.h-finder input { display: block; width: 100%; min-height: 54px; margin-top: var(--tlc-s2); padding: 10px 14px; border: 2px solid var(--tlc-navy); border-radius: 6px; font: 400 1.0625rem var(--tlc-font); color: var(--tlc-ink); background: var(--tlc-white); }
.h-finder input:focus-visible { outline: 3px solid var(--tlc-green-text); outline-offset: 2px; }
.h-finder__result:empty { display: none; }
.h-finder__result { margin: var(--tlc-s3) 0; font-size: var(--tlc-text-sm); font-weight: 700; color: var(--tlc-ink); }
.h-towns__title { margin-top: var(--tlc-s4); font-size: var(--tlc-text-sm); font-weight: 700; }
.h-areas__note { margin-top: var(--tlc-s4); font-size: var(--tlc-text-sm); line-height: 1.5; color: var(--tlc-ink-soft); }
.h-areas__note a { display: block; color: var(--tlc-ink); font-weight: 700; text-underline-offset: 3px; }
.h-towns { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--tlc-s2); margin: var(--tlc-s2) calc(var(--tlc-gutter) * -1) var(--tlc-s4); padding: 0 var(--tlc-gutter) var(--tlc-s2); overflow-x: auto; }

/* About: the team, full width */
.h-about { position: relative; background: var(--tlc-navy); color: var(--tlc-white); }
.h-about__photo { aspect-ratio: 16/10; }
.h-about__wrap { position: relative; padding-bottom: var(--tlc-s7); }
.h-about__panel { padding-top: var(--tlc-s6); }
.h-about__panel p { color: var(--tlc-on-dark); margin-bottom: var(--tlc-s3); }
.h-about__inset { display: none; }

/* Commercial */
.h-commercial { position: relative; background: var(--tlc-navy-2); color: var(--tlc-white); border-radius: var(--tlc-sweep-lg) 0 0 0; padding-block: var(--tlc-section) var(--tlc-s7); }
.h-commercial__grid { display: grid; gap: var(--tlc-s6); }
.h-commercial__copy .tlc-lead { color: var(--tlc-white); }
.h-capability { display: grid; gap: var(--tlc-s3); margin: var(--tlc-s5) 0; }
.h-capability div { padding-top: var(--tlc-s2); border-top: 2px solid var(--tlc-green); }
.h-capability dt { font-weight: 700; font-size: var(--tlc-text-md); }
.h-capability dd { margin: var(--tlc-s1) 0 0; color: var(--tlc-on-dark); font-size: var(--tlc-text-sm); line-height: 1.5; }
.h-commercial__also { margin-bottom: var(--tlc-s5); color: var(--tlc-on-dark); font-size: var(--tlc-text-sm); }
.h-commercial__art { position: relative; padding-bottom: 60px; margin-right: var(--tlc-offset); }
.h-commercial__main { aspect-ratio: 1; box-shadow: var(--tlc-offset) var(--tlc-offset) 0 var(--tlc-green); overflow: visible; }
.h-commercial__main img { border-radius: inherit; }
.h-commercial__inset { position: absolute; left: -8px; bottom: 0; width: min(62%, 300px); aspect-ratio: 4/3; }
.h-credentials { display: grid; gap: var(--tlc-s3); margin-top: var(--tlc-s6); padding: var(--tlc-s5); background: var(--tlc-white); color: var(--tlc-ink); border-radius: var(--tlc-corner) var(--tlc-sweep-sm) var(--tlc-corner) var(--tlc-sweep-sm); }
.h-credentials h3 { font-size: var(--tlc-text-lg); line-height: 1.2; letter-spacing: -.01em; }
.h-credentials .tlc-link { color: var(--tlc-ink); }
.h-credentials ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--tlc-s4) var(--tlc-s2); margin: 0; padding: 0; list-style: none; align-items: center; justify-items: center; }
.h-credentials li { grid-column: span 2; }
.h-credentials li:nth-child(n+4) { grid-column: span 3; }
/* Logos are trimmed of canvas padding, then sized to a matching visual area. Width follows the natural ratio. */
.h-logo { width: auto; height: var(--logo-h); max-width: 100%; }
.h-logo--a226 { --logo-h: 58px; }
.h-logo--a202 { --logo-h: 60px; }
.h-logo--a179 { --logo-h: 46px; }
.h-logo--a329 { --logo-h: 54px; }
.h-logo--a134 { --logo-h: 25px; }

/* FAQs */
.h-faq { background: var(--tlc-white); padding-block: var(--tlc-section); }
.h-faq__grid { display: grid; gap: var(--tlc-s5); }

/* Closing: a real job, one action */
.h-close { position: relative; background: var(--tlc-navy); color: var(--tlc-white); }
.h-close__photo { aspect-ratio: 4/3; }
.h-close__wrap { position: relative; padding-bottom: var(--tlc-s7); }
.h-close__panel { position: relative; margin-top: -56px; padding: var(--tlc-s6) var(--tlc-s5); background: var(--tlc-navy-2); border-radius: var(--tlc-sweep-sm) var(--tlc-corner) var(--tlc-sweep-sm) var(--tlc-corner); box-shadow: var(--tlc-offset) var(--tlc-offset) 0 var(--tlc-green); }
.h-steps { counter-reset: step; margin: 0 0 var(--tlc-s6); padding: 0; list-style: none; }
.h-steps li { counter-increment: step; display: flex; align-items: center; gap: var(--tlc-s3); padding: var(--tlc-s2) 0; font-size: var(--tlc-text-md); }
.h-steps li::before { content: counter(step); flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--tlc-green); color: var(--tlc-navy); font-weight: 700; text-align: center; line-height: 30px; }
.h-close__phone, .h-footer__phone, .tlc-bar .tlc-link { color: var(--tlc-white); }
.h-close__phone::after, .h-footer__phone::after, .tlc-bar .tlc-link::after { content: none; }

/* Shorter phone labels, generated so the source holds each message once */
.door-mobile-message[data-label]::before { content: attr(data-label); }

/* Link versions of the approved telephone treatment */
.opening-header a.header-telephone { text-decoration: none; }
.tlc-bar .tlc-link, .h-close__phone, .h-footer__phone { text-underline-offset: 5px; }
.h-commercial__also a { color: var(--tlc-white); text-underline-offset: 3px; }

/* Prototype preview dialog */
#preview .dialog-title { margin-bottom: 20px; font-size: 32px; font-weight: 700; line-height: 1.08; letter-spacing: -1.7px; }

/* Footer */
.h-footer__address { margin-top: var(--tlc-s3); color: #d0dde4; font-size: 13px; font-style: normal; line-height: 1.6; }
.h-footer__title { margin-bottom: var(--tlc-s3); font-weight: 700; font-size: var(--tlc-text-sm); }
.h-footer__nav { display: block; position: static; padding: 0; background: none; box-shadow: none; }
.h-footer__nav a { border: 0; padding: 0; }
.h-footer .tlc-btn { display: inline-flex; margin: 0 0 var(--tlc-s2); text-decoration: none; }
.h-footer .tlc-link { display: flex; color: var(--tlc-white); font-size: var(--tlc-text-sm); }

/* Review aid: ?photos, or the footer button, labels every photograph with its ID */
.show-photo-ids [data-photo]::after { content: attr(data-photo); position: absolute; inset: 8px auto auto 8px; z-index: 3; padding: 3px 8px; border-radius: 4px; background: #fff36b; color: #111; font: 700 12px/1.3 var(--tlc-font); }
.h-review-toggle { color: inherit; font-size: inherit; }

/* Tablet */
@media (min-width: 760px) {
  .h-map__more { display: inline; }
  .h-window__panel { max-width: 720px; }
  .h-show__detail { max-width: 560px; }
  .h-stage__head { grid-template-columns: 1.4fr 1fr; align-items: end; gap: var(--tlc-s7); }
  .h-results__grid { grid-template-columns: repeat(4, 1fr); }
  .h-compare { aspect-ratio: 16/10; }
  .h-capability { grid-template-columns: repeat(3, 1fr); }
  .h-credentials ul { display: flex; justify-content: space-between; align-items: center; gap: var(--tlc-s4); }
  .h-towns { display: flex; flex-wrap: wrap; margin-inline: 0; padding: 0; overflow: visible; }
  .h-commercial__main { aspect-ratio: 16/10; }
  .h-commercial__main img { object-position: center 30%; }
  .h-close__photo { aspect-ratio: 16/8; }
  .h-close__panel { max-width: 560px; padding: var(--tlc-s7); }
  .h-about__photo { aspect-ratio: 16/8; }
  .h-about__panel { max-width: 640px; }
}

/* Desktop compositions */
@media (min-width: 1000px) {
  /* Window: photograph bleeds off the right edge, panel overlaps from the left */
  .h-window { padding-top: var(--tlc-s8); }
  .h-window article { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; max-width: 1760px; margin-inline: auto; }
  .h-window__art { grid-column: 4 / 13; grid-row: 1; padding-bottom: 70px; }
  .h-window__main { aspect-ratio: auto; height: min(50vw, 720px); border-radius: var(--tlc-sweep-lg) 0 0 0; }
  .h-window__main img { object-position: 70% center; }
  .h-window__inset { left: 30%; width: 260px; z-index: 2; }
  .h-window__panel { grid-column: 1 / 7; grid-row: 1; position: relative; margin-left: var(--tlc-gutter); padding: var(--tlc-s7); background: var(--tlc-white); border-radius: var(--tlc-corner) var(--tlc-sweep-md) var(--tlc-corner) var(--tlc-sweep-sm); box-shadow: var(--tlc-shadow); }

  /* Gutter: staggered close-ups left, copy right */
  .h-gutter__art { order: -1; }
  .h-gutter__grid { grid-template-columns: 7fr 5fr; gap: var(--tlc-s8); align-items: center; }
  .h-gutter__art { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 46px); gap: 0; }
  .h-gutter__main { grid-column: 1 / 10; grid-row: 1 / 10; aspect-ratio: auto; }
  .h-gutter__a { grid-column: 8 / 13; grid-row: 2 / 7; margin: 0; aspect-ratio: auto; }
  .h-gutter__b { grid-column: 1 / 7; grid-row: 8 / 13; aspect-ratio: auto; z-index: 2; border: 6px solid var(--tlc-pale); }

  /* Services: panels share one height and the chosen panel opens */
  .h-show, .h-show.is-ready { display: flex; height: clamp(520px, 46vw, 640px); gap: var(--tlc-s3); }
  .h-show__panel, .h-show.is-ready .h-show__panel, .h-show.is-ready .h-show__panel.is-open { flex: 1 1 0; height: auto; min-width: 0; transition: flex-grow var(--tlc-slow) var(--tlc-ease); cursor: pointer; }
  .h-show.is-ready .h-show__panel.is-open { flex-grow: 3.2; cursor: auto; }
  .h-show__panel:first-child { border-top-left-radius: var(--tlc-sweep-lg); }
  .h-show__panel:last-child { border-bottom-right-radius: var(--tlc-sweep-lg); }
  .h-show__body { padding: var(--tlc-s5); }
  .h-show__body h3 { font-size: var(--tlc-text-lg); }
  .h-show__panel.is-open h3 { font-size: var(--tlc-h3); }
  .h-show__detail { width: min(480px, 40vw); }
  .h-show.is-ready .h-show__panel:not(.is-open) .h-show__toggle::after { opacity: .9; }
  .h-show.is-ready .h-show__panel:not(.is-open)::before { background: linear-gradient(0deg, rgba(13, 25, 38, .92) 0%, rgba(13, 25, 38, .5) 30%, rgba(13, 25, 38, .05) 60%); }

  /* Results: one large comparison, staggered evidence */
  .h-results__grid { grid-template-columns: repeat(12, 1fr); gap: var(--tlc-s4); }
  .h-compare { grid-column: 1 / 8; grid-row: 1 / 3; aspect-ratio: auto; min-height: 560px; }
  .h-results__grid > figure { aspect-ratio: auto; min-height: 0; }
  .h-results__grid > figure img { position: absolute; inset: 0; }
  .h-results__a { grid-column: 8 / 11; }
  .h-results__b { grid-column: 11 / 13; }
  .h-results__c { grid-column: 8 / 10; }
  .h-results__d { grid-column: 10 / 13; }

  /* Reviews */
  .h-reviews__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--tlc-s6); }
  .h-reviews__photo { display: block; width: 260px; aspect-ratio: 4/3; margin-top: calc(var(--tlc-section) * -1 - 60px); margin-bottom: calc(var(--tlc-s4) * -1); }

  /* Areas: map beside finder */
  .h-areas__grid { grid-template-columns: 7fr 5fr; gap: var(--tlc-s8); align-items: center; }
  .h-areas__copy { order: 0; }
  .h-areas__photo { left: -24px; bottom: -36px; width: 250px; }
  .h-map__key { min-height: 120px; padding-left: 250px; }
  .h-pin text { font-size: 6.6px; stroke-width: 1.6px; }
  .h-map__place { font-size: 6px; }
  .h-map__county { font-size: 11px; }

  /* About: panel lifts over the team photograph */
  .h-about__photo { aspect-ratio: auto; height: min(52vw, 760px); }
  .h-about__photo img { object-position: center 60%; }
  .h-about__wrap { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: var(--tlc-s8); }
  .h-about__panel { position: relative; max-width: 620px; margin-top: -150px; padding: var(--tlc-s7); background: var(--tlc-navy); border-radius: var(--tlc-sweep-md) var(--tlc-corner) var(--tlc-corner) var(--tlc-corner); }
  .h-about__inset { display: block; width: 340px; aspect-ratio: 4/3; margin-top: -90px; }

  /* Commercial */
  .h-commercial__grid { grid-template-columns: 7fr 5fr; gap: var(--tlc-s8); align-items: center; }
  .h-commercial__art { padding-bottom: 80px; }
  .h-commercial__main { aspect-ratio: 4/5; }
  .h-commercial__inset { left: -36px; width: 300px; }
  .h-credentials { grid-template-columns: 3fr 7fr; align-items: center; padding: var(--tlc-s5) var(--tlc-s6); }
  .h-logo--a226 { --logo-h: 76px; }
  .h-logo--a202 { --logo-h: 78px; }
  .h-logo--a179 { --logo-h: 60px; }
  .h-logo--a329 { --logo-h: 72px; }
  .h-logo--a134 { --logo-h: 31px; }

  /* FAQs */
  .h-faq__grid { grid-template-columns: 5fr 7fr; gap: var(--tlc-s8); align-items: start; }
  .h-faq__grid > :first-child { position: sticky; top: 100px; }

  /* Closing: a full-width scene */
  .h-close { min-height: 760px; display: flex; align-items: center; overflow: hidden; }
  .h-close__photo { position: absolute; inset: 0; aspect-ratio: auto; }
  .h-close__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(13, 25, 38, .72) 0%, rgba(13, 25, 38, .1) 62%); }
  .h-close__wrap { display: flex; justify-content: flex-end; padding-block: var(--tlc-s8); }
  .h-close__panel { width: 520px; margin: 0; }
}

@media (min-width: 1000px) and (max-width: 1200px) {
  .h-areas__photo { width: 170px; }
  .h-map__key { padding-left: 170px; }
  .h-window__panel { padding: var(--tlc-s6); }
  .h-commercial__inset { left: -16px; width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .h-compare img, .h-compare__switch::before, .h-show__panel, .h-show__photo img, .h-show__detail, .h-results__grid > figure img { transition: none !important; }
}