/* V19: all service information is part of the architectural story. */
body.story-site .story-about { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; color: #8d5037; font-size: 13px; font-weight: 550; line-height: 1.45; letter-spacing: -.015em; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #bda38f; }
body.story-site .story-about svg { width: 19px; height: 19px; flex: 0 0 auto; }
body.story-site .story-nav-item > .story-about { display: none; margin: -10px 0 10px 22px; }
body.story-site .story-nav-link[aria-current] + .story-about { display: inline-flex; }
body.story-site .story-copy > .story-about { margin-top: 10px; }
html.story-boot body.story-site .story-copy > .story-about, body.story-site.story-ready .story-copy > .story-about { display: none; }
body.story-site .story-about:focus-visible, body.story-site .service-library :focus-visible, body.story-site .story-service-footer :focus-visible { outline: 2px solid #a65332; outline-offset: 5px; }

/* A compact index remains useful for keyboard navigation and no-JS use. */
body.story-site .story-legal.story-service-footer { z-index: 11; display: grid; grid-template-columns: 1fr; gap: 23px; padding: 42px var(--story-edge) 24px; border-top: 1px solid #c8cfcd; min-height: 0; scroll-margin-top: 104px; }
body.story-site.story-ended .story-nav, body.story-site.story-ended .story-copy, body.story-site.story-ended .scene-loading { visibility: hidden; pointer-events: none; }
body.story-site .story-service-intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 30px; }
body.story-site .story-service-intro h2 { margin: 0; color: var(--story-ink); font-size: 21px; font-weight: 450; letter-spacing: -.035em; }
body.story-site .story-service-intro p { margin: 0; color: #59666b; font-size: 13px; line-height: 1.6; }
body.story-site .story-service-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
body.story-site .story-service-links a { color: #39474d; font-size: 13px; line-height: 1.4; }
body.story-site .story-legal-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 28px; border-top: 1px solid #c8cfcd; padding-top: 8px; }

/* Native details work before enhancement and retain the complete copy in HTML. */
body.story-site .service-library { position: relative; z-index: 12; padding: 0 var(--story-edge) 44px; background: var(--story-paper); }
body.story-site .service-disclosure { scroll-margin-top: 110px; border-top: 1px solid #c8cfcd; }
body.story-site .service-disclosure > summary { padding: 20px 0; cursor: pointer; font-size: 19px; letter-spacing: -.035em; }
body.story-site .service-sheet { color: #293337; background: var(--story-paper); }
body.story-site .service-sheet-content { max-width: 680px; padding: 24px 0 48px; }
body.story-site .service-sheet-heading h2 { margin: 0; max-width: 19ch; font-size: clamp(34px, 3.3vw, 49px); font-weight: 350; line-height: 1.08; letter-spacing: -.05em; text-wrap: balance; }
body.story-site .service-sheet p, body.story-site .service-sheet li { color: #526167; font-size: 15px; line-height: 1.8; letter-spacing: -.012em; }
body.story-site .service-sheet p { margin: 16px 0 0; }
body.story-site .service-sheet .service-sheet-intro { margin-top: 26px; color: #39474d; font-size: 17px; line-height: 1.75; }
body.story-site .service-sheet-section { margin-top: 36px; }
body.story-site .service-sheet-section h3 { margin: 0; font-size: 22px; font-weight: 450; line-height: 1.3; letter-spacing: -.035em; }
body.story-site .service-sheet-section ul { margin: 17px 0 0; padding-left: 19px; }
body.story-site .service-sheet-section li { padding-left: 4px; margin-top: 6px; }
body.story-site .service-sheet-section li::marker { color: #a65332; }
body.story-site .service-sheet-enquiry { margin-top: 36px; border-top: 1px solid #c8cfcd; padding-top: 10px; }
body.story-site .service-request-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 50px; margin-top: 22px; padding: 12px 18px; color: #f3f4f2; background: #293337; font-size: 14px; line-height: 1.5; }
body.story-site .service-request-link svg { width: 21px; height: 21px; color: #d8a288; }
body.story-site .service-sheet .service-sheet-area { margin-top: 21px; color: #6a7579; font-size: 12px; }
body.story-site .service-close, body.story-site .service-backdrop { display: none; }

html.service-scroll-locked, body.story-site.service-is-open { overflow: hidden; }
body.story-site.service-details-ready .service-library { position: static; padding: 0; margin: 0; background: transparent; }
body.story-site.service-details-ready .service-disclosure { position: static; border: 0; }
body.story-site.service-details-ready .service-disclosure > summary { display: none; }
body.story-site.service-details-ready .service-sheet { position: fixed; z-index: 51; top: var(--service-viewport-top, 0px); right: 0; width: min(620px, 48vw); height: var(--service-viewport-height, 100dvh); max-height: var(--service-viewport-height, 100dvh); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px); border-left: 1px solid #c5cecb; scroll-padding-block: 75px 25px; }
body.story-site.service-details-ready .service-disclosure[open] .service-sheet { animation: service-sheet-enter 260ms cubic-bezier(.2,.65,.2,1); }
body.story-site.service-details-ready .service-sheet-content { padding: 28px clamp(28px, 3vw, 46px) 48px; }
body.story-site.service-details-ready .service-close { position: sticky; z-index: 2; top: max(16px, env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 12px; min-height: 44px; width: fit-content; margin: max(16px, env(safe-area-inset-top, 0px)) 24px 0 auto; padding: 10px 13px; border: 0; border-radius: 0; color: #3b484d; background: #e9eceb; font: 500 13px/1.4 Manrope, sans-serif; cursor: pointer; }
body.story-site .service-close svg { width: 19px; height: 19px; }
body.story-site.service-details-ready .service-backdrop { display: block; position: fixed; z-index: 50; inset: 0; background: #20303618; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease; }
body.story-site.service-is-open .service-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
@keyframes service-sheet-enter { from { transform: translateX(32px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (hover: hover) {
    body.story-site .story-about:hover, body.story-site .story-service-links a:hover { color: #a65332; }
    body.story-site .service-request-link:hover { background: #3c484d; }
    body.story-site .service-close:hover { color: #a65332; }
}
@media (max-width: 1000px) {
    body.story-site.service-details-ready .service-sheet { width: min(620px, 58vw); }
    body.story-site .service-sheet-heading h2 { font-size: 38px; }
}
/* Keep all eight categories and the reading link in a typical laptop viewport. */
@media (min-width: 701px) and (min-height: 551px) and (max-height: 780px) {
    body.story-site .story-nav-link { min-height: 44px; padding-block: 8px; }
    body.story-site .story-nav-link[aria-current] { padding-block: 10px; }
    body.story-site .story-nav-link[aria-current] .story-nav-title { font-size: clamp(34px, 3.3vw, 42px); }
    body.story-site .story-nav-detail > span { font-size: 14px; line-height: 1.45; }
    body.story-site .story-nav-link[aria-current] .story-nav-detail { margin-top: 10px; }
    body.story-site .story-nav-item > .story-about { min-height: 32px; margin-top: -4px; margin-bottom: 6px; }
}
@media (max-width: 700px) {
    body.story-site .story-nav-item > .story-about, body.story-site .story-nav-link[aria-current] + .story-about { display: none; }
    body.story-site .story-copy > .story-about { font-size: 12px; min-height: 32px; margin-top: 4px; pointer-events: auto; }
    html.story-boot body.story-site .story-chapter.is-active .story-copy > .story-about, body.story-site.story-ready .story-chapter.is-active .story-copy > .story-about { display: inline-flex; pointer-events: auto; }
    html.story-boot body.story-site .story-nav, body.story-site.story-ready .story-nav { top: 266px; }
    body.story-site .story-scene .scene-safe-area { top: 423px; }
    body.story-site .story-legal.story-service-footer { gap: 19px; padding-top: 30px; scroll-margin-top: 78px; }
    body.story-site .story-service-intro { display: block; }
    body.story-site .story-service-intro p { margin-top: 12px; }
    body.story-site .story-service-links { gap: 0 22px; }
    body.story-site .story-service-links a { font-size: 12px; }
    body.story-site .story-legal-links { justify-content: flex-start; gap: 5px 24px; }
    body.story-site .service-disclosure { scroll-margin-top: 85px; }
    body.story-site.service-details-ready .service-sheet { width: 100%; border-left: 0; }
    body.story-site.service-details-ready .service-sheet-content { padding: 20px 25px 35px; }
    body.story-site.service-details-ready .service-close { margin-right: max(16px, env(safe-area-inset-right, 0px)); }
    body.story-site .service-sheet-heading h2 { font-size: clamp(34px, 8.8vw, 43px); max-width: 20ch; }
    body.story-site .service-sheet .service-sheet-intro { font-size: 16px; line-height: 1.7; margin-top: 22px; }
    body.story-site .service-sheet p, body.story-site .service-sheet li { font-size: 14px; line-height: 1.75; }
    body.story-site .service-sheet-section { margin-top: 30px; }
    body.story-site .service-sheet-section h3 { font-size: 21px; }
    body.story-site .service-request-link { width: 100%; }
}
@media (max-width: 700px) and (max-height: 740px) {
    html.story-boot body.story-site .story-nav, body.story-site.story-ready .story-nav { top: 237px; }
    body.story-site .story-scene .scene-safe-area { top: 377px; }
}
/* The reading action moves the grid down: keep its last row readable over dark interiors. */
@media (max-width: 700px) and (min-height: 741px) {
    body.story-site .story-scene::after { background: linear-gradient(180deg,#e9eceb 0,#e9ecebf5 420px,#e9eceb00 475px),linear-gradient(0deg,#e9ecebf2 0,#e9eceb00 95px); }
}
@media (max-width: 700px) and (min-height: 551px) and (max-height: 740px) {
    body.story-site .story-scene::after { background: linear-gradient(180deg,#e9eceb 0,#e9ecebf5 375px,#e9eceb00 430px),linear-gradient(0deg,#e9ecebf2 0,#e9eceb00 85px); }
}
@media (max-height: 550px) and (min-width: 600px) {
    html.story-boot body.story-site .story-nav, body.story-site.story-ready .story-nav { top: 73px; }
    html.story-boot body.story-site .story-copy > .story-about, body.story-site.story-ready .story-copy > .story-about, html.story-boot body.story-site .story-chapter.is-active .story-copy > .story-about, body.story-site.story-ready .story-chapter.is-active .story-copy > .story-about { display: none; }
    body.story-site .story-nav-link[aria-current] + .story-about { display: inline-flex; margin: 0 0 3px 14px; min-height: 28px; font-size: 11px; }
    body.story-site .story-scene .scene-safe-area { top: 65px; }
    body.story-site.service-details-ready .service-sheet { width: min(620px, 62vw); }
}
@media (prefers-reduced-motion: reduce) {
    body.story-site.service-details-ready .service-disclosure[open] .service-sheet { animation: none; }
    body.story-site.service-details-ready .service-backdrop { transition: none; }
}