/* SHWEB_015: shared tokens, eight authored compositions. No homepage selectors. */
.service-page{--section-pad:64px;--service-accent:var(--teal);font-size:1rem;line-height:1.7}
.service-page :where(h1,h2,h3,p,figure){max-width:100%;overflow-wrap:break-word}
.service-page h1{font-size:clamp(2.6rem,3.65vw,3.5rem);line-height:1.12;letter-spacing:-.04em;max-width:760px}
.service-page h2{font-size:clamp(1.7rem,2.35vw,2.25rem);line-height:1.23;max-width:730px}
.service-page h3:not(:where(.service-card *)){font-size:1.2rem;line-height:1.4}
.service-page p:not(:where(.service-card *)){line-height:1.75}
.service-page .eyebrow{letter-spacing:.025em;font-size:.875rem;margin-bottom:18px!important}
.service-page .wp-block-buttons{margin-top:26px!important;gap:12px}
.service-page a{scroll-margin-top:30px}
.service-section{padding-block:var(--section-pad);border-bottom:1px solid var(--line)}
.service-section>.container{position:relative;min-width:0}
.service-section .container>*{min-width:0}
.service-hero{padding-block:48px;background:#0c1622}
.service-hero-copy{position:relative;z-index:1}
.opening-prose{margin-top:23px!important;max-width:675px;display:grid;gap:13px}
.opening-prose p:first-child{color:#e5edf1;font-size:1.0625rem}
.service-prose{display:grid;grid-template-columns:.85fr 1.15fr;column-gap:72px;row-gap:16px}
.service-prose h2{grid-column:1;grid-row:1/6}
.service-prose>p{grid-column:2;max-width:680px}
.service-prose a{color:var(--teal)}
.service-art{position:relative;overflow:hidden;border:1px solid #3c4c56;border-radius:4px;background:#15212b;width:100%;aspect-ratio:4/3}
.service-art img{display:block;width:100%;height:100%;object-fit:cover;opacity:.7}
.service-art::before{content:'';position:absolute;inset:14px;border:1px solid #50616b66;pointer-events:none;z-index:1}
.service-art::after{content:'';position:absolute;left:28px;bottom:28px;width:36px;height:2px;background:#82968f}
.service-page .service-item{position:relative;min-width:0}
.service-item h3{margin-bottom:13px!important}
.service-item p{font-size:1rem}
.scope-section h2,.responsibility-section h2{margin-bottom:30px!important}
.responsibility-item{min-width:0}
.responsibility-item h3{font-size:.875rem;letter-spacing:.035em;line-height:1.6;color:var(--service-accent);margin-bottom:14px!important}
.scope-note{margin-top:24px!important;max-width:890px;border-left:2px solid var(--amber);padding-left:22px}
.service-price{background:#11212c;padding-block:32px}
.service-price .container{display:grid;grid-template-columns:1fr auto;align-items:center;gap:36px}
.service-price .service-prose{display:block;max-width:900px}
.service-price h2{font-size:1.6rem;margin-bottom:14px!important}
.service-price .service-prose>p{max-width:900px}
.service-price .text-link{white-space:nowrap}
.related-band{background:#0d1924}
.service-faq{background:#0a121d}
.service-faq-list{border-top:1px solid #354556}
.service-page .faq-item summary{font-size:1.0625rem;min-height:72px}
.service-page .faq-item>p{font-size:1rem;line-height:1.8;padding-bottom:26px}
.faq-two-column{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:start}
.faq-offset{max-width:850px;margin-left:auto!important}
.faq-wide{max-width:1000px;margin-inline:auto!important}
.service-final{background:linear-gradient(105deg,#17342f,#142431 75%);padding-block:44px}
.service-final .container{display:flex;align-items:center;justify-content:space-between;gap:56px}
.service-final-copy{max-width:780px}
.service-final-copy p{margin-top:18px!important}
.service-final .wp-block-buttons{flex-shrink:0;margin-top:0!important}
.service-motif{position:relative;min-width:0;pointer-events:none;overflow:hidden;color:var(--service-accent)}
.service-motif i{display:block;position:absolute;border:1px solid currentColor;opacity:.5}
/* P02 / protected opening. The selected lower design is scoped in p02-pilot.css. */
.hero-index>.container{display:grid;grid-template-columns:1.35fr .7fr;gap:34px 80px;align-items:start}
.hero-index .service-art{grid-column:1/-1;aspect-ratio:32/5}
.hub-quick-index{border-left:1px solid #406359;padding-left:30px;align-self:center}
.index-route a{display:flex;align-items:center;min-height:44px;padding-block:10px;border-bottom:1px solid #2d3e48;text-decoration:none;font-size:.9375rem}
.index-route a::after{content:'↗';color:var(--teal);margin-left:auto;padding-left:16px}
/* P03 / support continuity, with a real responsibility table and contextual quote. */
.hero-support>.container{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center}
.support-visual{padding-left:12px;border-left:1px solid #416354}
.motif-continuity{height:36px;border-bottom:1px solid #46695e;margin-top:16px!important}
.motif-continuity i{width:8px;height:8px;bottom:-4px;background:#203c36;transform:rotate(45deg)}
.motif-continuity i:nth-child(1){left:5%}.motif-continuity i:nth-child(2){left:35%}.motif-continuity i:nth-child(3){left:66%}.motif-continuity i:nth-child(4){right:3%}.motif-continuity i:nth-child(n+5){display:none}
.quote-person{margin-top:22px!important;font-size:.9375rem;color:var(--text)!important}.quote-org{font-size:.875rem}
/* P04 / compact technical layers, not an interface or monitoring graphic. */
.service-p04{--service-accent:var(--violet)}
.hero-boundaries>.container{display:grid;grid-template-columns:1.45fr .55fr;gap:65px;align-items:center}
.security-visual{position:relative;padding-top:90px}
.security-visual .service-art{aspect-ratio:16/9}
.motif-boundaries{position:absolute;inset:0 0 auto;height:145px}
.motif-boundaries i{inset:5px 15px 35px 15px;transform:skewY(-9deg)}
.motif-boundaries i:nth-child(2){inset:20px 45px 20px 45px;color:var(--teal)}
.motif-boundaries i:nth-child(3){inset:35px 75px 5px 75px;color:var(--amber)}
.motif-boundaries i:nth-child(n+4){display:none}
/* P05 / open editorial header, softer modules and a distinct three-party band. */
.hero-workspace>.container{display:grid;grid-template-columns:1fr;gap:30px}
.hero-workspace .service-hero-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:72px}
.hero-workspace .eyebrow{grid-column:1/-1}
.hero-workspace h1{grid-column:1;grid-row:2/4}
.hero-workspace .opening-prose{grid-column:2;grid-row:2;margin-top:0!important}
.hero-workspace .wp-block-buttons{grid-column:2}
.cloud-visual{display:grid;grid-template-columns:.25fr 1fr;gap:24px}
.cloud-visual .service-art{aspect-ratio:19/5}
.motif-workspace{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}
.motif-workspace i{position:static;aspect-ratio:1/1;border-radius:3px;background:#223831;border-color:#506c60;opacity:.7}
.motif-workspace i:nth-child(2){transform:translateY(20px);background:#292b41;border-color:#635d78}.motif-workspace i:nth-child(4){transform:translateY(20px)}.motif-workspace i:nth-child(n+5){display:none}
/* P06 / physical infrastructure first, text second, layers arranged as an actual hierarchy. */
.hero-topology>.container{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.network-visual{position:relative;padding:25px 25px 80px 0;border-top:1px solid #46666b}
.network-visual .service-art{aspect-ratio:3/2}
.motif-topology{position:absolute;bottom:0;left:8%;right:0;height:80px}
.motif-topology::before{content:'';position:absolute;left:0;right:0;top:25px;border-top:1px solid #6f9990}
.motif-topology i{top:25px;height:45px;width:1px;border-width:0 0 0 1px;opacity:.8}
.motif-topology i:nth-child(1){left:0}.motif-topology i:nth-child(2){left:33%}.motif-topology i:nth-child(3){left:66%}.motif-topology i:nth-child(4){right:0}.motif-topology i:nth-child(n+5){display:none}
/* P07 / panoramic pause, ordered restoration and two plain-English planning questions. */
.service-p07{--service-accent:var(--amber)}
.hero-restoration>.container{display:grid;gap:26px}
.hero-restoration .service-hero-copy{display:grid;grid-template-columns:1.05fr 1fr;column-gap:72px}
.hero-restoration .eyebrow{grid-column:1/-1}.hero-restoration h1{grid-row:2/4}.hero-restoration .opening-prose{margin-top:0!important}
.hero-restoration .wp-block-buttons{grid-column:2}
.hero-restoration .service-art{aspect-ratio:22/5}
.motif-restore{height:24px;border-top:1px solid #756950;overflow:visible}
.motif-restore i{width:14%;height:4px;border:none;background:var(--amber);top:-2px}.motif-restore i:nth-child(1){left:0}.motif-restore i:nth-child(2){left:28%;opacity:.65}.motif-restore i:nth-child(3){left:57%;opacity:.85}.motif-restore i:nth-child(4){right:0;opacity:1}.motif-restore i:nth-child(n+5){display:none}
/* P08 / communication branches and decisions, compact media inset. */
.hero-calls>.container{display:grid;grid-template-columns:1.25fr .75fr;gap:65px;align-items:center}
.phone-visual{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
.phone-visual .service-art{aspect-ratio:1/1;align-self:center}
.motif-calls{height:290px;overflow:visible}
.motif-calls::before{content:'';position:absolute;left:10%;right:0;top:50%;border-top:1px solid #77a99a}
.motif-calls i{width:65%;height:60px;right:0;border-left:1px solid #77a99a;border-right:0;border-radius:18px 0 0 18px}
.motif-calls i:nth-child(1){top:25px}.motif-calls i:nth-child(2){top:115px;color:var(--violet)}.motif-calls i:nth-child(3){top:205px;color:var(--amber)}.motif-calls i:nth-child(n+4){display:none}
/* P09 / physical entrance silhouette; responsibilities intentionally have four quadrants. */
.hero-entry>.container{display:grid;grid-template-columns:.65fr 1.35fr;gap:90px;align-items:center}
.entry-visual{position:relative;padding:0 24px 24px 0}
.entry-visual .service-art{aspect-ratio:4/5}
.motif-entry{position:absolute;inset:20px 0 0 22px;border-right:2px solid #73978c;border-bottom:2px solid #73978c;z-index:0}
.motif-entry i{right:-1px;top:45%;width:22px;height:46px;background:#263b35;border-color:#8fa89f}
.motif-entry i:nth-child(n+2){display:none}
/* QA-only art register overlay, activated only by the local development guard. */
.shweb-art-qa .service-art::after{content:attr(id);inset:auto 10px 10px;width:auto;height:auto;background:#09111f;color:#f1f5f7;border:1px solid #65d6be;padding:8px;font:14px/1.4 monospace;z-index:2}
@media(max-width:1100px){
 .service-hero>.container{gap:35px}.hero-entry>.container{gap:50px}.service-prose{column-gap:40px}.service-page h1{font-size:2.8rem}
 .hero-workspace .service-hero-copy,.hero-restoration .service-hero-copy{column-gap:38px}
 .service-final .container{gap:30px}.service-final-copy{max-width:650px}
}
@media(max-width:800px){
 .service-page{--section-pad:44px}.service-page h1{font-size:2.6rem}
 .hero-index>.container{grid-template-columns:1fr}.hub-quick-index{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;padding-left:20px}
 .hero-support>.container,.hero-boundaries>.container,.hero-topology>.container,.hero-calls>.container{grid-template-columns:1.25fr .75fr;gap:28px}
 .hero-entry>.container{grid-template-columns:.7fr 1.3fr;gap:30px}
 .service-prose{grid-template-columns:1fr 1.3fr;gap:20px 30px}
 .hero-workspace .service-hero-copy,.hero-restoration .service-hero-copy{display:block}
 .hero-workspace .opening-prose,.hero-restoration .opening-prose{margin-top:22px!important}
 .service-final .container{display:block}.service-final .wp-block-buttons{margin-top:25px!important}
 .service-price .container{display:block}.service-price .text-link{margin-top:14px!important}

}
@media(max-width:600px){
 .service-page{--section-pad:44px}.service-hero{padding-block:32px}
 .service-page h1{font-size:2.5rem;line-height:1.14}.service-page h2{font-size:1.85rem}.service-page h3:not(:where(.service-card *)){font-size:1.25rem}
 .service-page .eyebrow{font-size:.8125rem}.opening-prose{margin-top:20px!important;gap:12px}.opening-prose p:first-child{font-size:1rem}
 .service-hero>.container{display:flex;flex-direction:column;align-items:stretch;gap:25px}
 .service-hero-copy{order:0}.network-visual,.entry-visual{order:1}
 .service-prose{display:block}
 .service-prose h2{margin-bottom:21px!important}.service-prose>p+p{margin-top:16px!important}
 .service-page .wp-block-button__link{font-size:.9375rem;padding:12px 17px}
 .service-art{max-height:none!important}.hero-index .service-art{aspect-ratio:3/1}
 .hub-quick-index{display:none} /* The complete service index immediately follows; no duplicate mobile link list. */

 .support-visual{padding-left:10px}.support-visual .service-art{aspect-ratio:4/3}
 .security-visual{padding:0;display:grid;grid-template-columns:.7fr 1fr;align-items:center;gap:15px}
 .motif-boundaries{position:relative;height:100px;inset:auto}.motif-boundaries i{inset:5px 0 35px}.motif-boundaries i:nth-child(2){inset:20px 15px 20px}.motif-boundaries i:nth-child(3){inset:35px 30px 5px}
 .cloud-visual{grid-template-columns:48px 1fr;gap:13px}.cloud-visual .service-art{aspect-ratio:16/9}
 .motif-workspace{gap:5px}.motif-workspace i:nth-child(even){transform:translateY(8px)}

 .responsibility-item h3{font-size:.9375rem!important}
 .network-visual{padding:0 0 46px;border:0}.motif-topology{height:45px}.motif-topology::before{top:0}.motif-topology i{top:0;height:25px}
 .hero-restoration .service-art{aspect-ratio:16/9}.hero-restoration .motif-restore{height:6px}
 .phone-visual{grid-template-columns:1fr 145px;max-width:330px;width:100%;align-self:center}.motif-calls{height:190px}.motif-calls i{height:40px}.motif-calls i:nth-child(1){top:15px}.motif-calls i:nth-child(2){top:75px}.motif-calls i:nth-child(3){top:135px}
 .entry-visual{padding:0 18px 18px 0}.entry-visual .service-art{aspect-ratio:4/3}.motif-entry{inset:18px 0 0 18px}
 .service-page .faq-two-column{display:block}.service-page .faq-item summary{font-size:1rem}.service-page .faq-item>p{padding-right:6px}
 .service-final h2{font-size:1.85rem}
}
@media(max-width:380px){.service-page h1{font-size:2.25rem}.service-page .wp-block-buttons{align-items:flex-start;flex-direction:column}.phone-visual{grid-template-columns:1fr 120px}}
@media(prefers-reduced-motion:reduce){.service-page *{scroll-behavior:auto;transition:none!important;animation:none!important}}
.editor-styles-wrapper .service-page{max-width:100%}.editor-styles-wrapper .service-art{pointer-events:auto}