/* Generated by scripts/sync-palette.mjs. Edit the named canonical CSS owners. */
/* Source: colour-system.css */
/* CodeStitch Intermediate palette, selected through the user's renovation site. */
:root {
 color-scheme:light;
 --canvas:#ffffff; --hero:#ffffff; --surface:#f7f7f7; --surface-raised:#eeeeee;
 --panel-light:#f7f7f7; --ink-light:#1a1a1a; --line-light:#e8e8e8;
 --ink:#1a1a1a; --muted:#4e4b66; --white:#ffffff;
 --primary:#aff425; --accent:#aff425; --secondary:#001f3f;
 --line:#e8e8e8; --ui-border:#e8e8e8; --ui-field:#ffffff; --field-border:#767676;
 --cta-bg:#aff425; --cta-ink:#000000; --cta-hover:#1a1a1a; --cta-hover-ink:#ffffff;
 --action-blue:#001f3f; --action-hover:#000000; --blue-surface:#f7f7f7; --soft-blue-line:#e8e8e8;
 --cream:#f7f7f7; --orange-ink:#001f3f;
 --thumb:#a9a9a9; --track:#ffffff; --thumb-hover:#6a6a6a; --thumb-active:#001f3f;
 --bs-body-color:#1a1a1a; --bs-body-bg:#ffffff; --bs-primary:#aff425; --bs-primary-rgb:175,244,37;
 --bs-link-color:#001f3f; --bs-link-hover-color:#000000;
}
body{background:var(--canvas);color:var(--ink)}
a{color:var(--action-blue)}a:hover{color:var(--action-hover)}
.eyebrow,.section-heading .eyebrow,.trust-heading .eyebrow,.location-copy .eyebrow{color:var(--secondary)}
.button,.button.navy,.hero-actions .button,.contact-panel .button,.dark .button,.nav > .nav-phone,.mobile-call{background:var(--cta-bg);border-color:var(--cta-bg);color:var(--cta-ink)}
.button:hover,.button.navy:hover,.hero-actions .button:hover,.nav > .nav-phone:hover,.mobile-call:hover,.dark .button:hover,.contact-panel .button:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:var(--cta-hover-ink)}
.button.secondary,.hero-actions .button.secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.button.secondary:hover,.hero-actions .button.secondary:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.section.dark,.contact-panel{background:#1c1c1c;color:var(--white);border-color:#1c1c1c}
.dark h2,.dark .eyebrow,.dark .lead,.dark p,.contact-panel h2,.contact-panel .eyebrow,.contact-panel p{color:var(--white)}
.dark .button,.contact-panel .button{background:var(--cta-bg);color:var(--cta-ink);border-color:var(--cta-bg)}
.dark .button:hover,.contact-panel .button:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.prose a:not(.button),.source-list a,.weather-source{color:var(--action-blue);text-decoration-color:currentColor}
.prose a:not(.button):hover,.source-list a:hover,.weather-source:hover{color:var(--action-hover)}
.aside a:not(.button),.sidebar a:not(.button),.location-details a,.map-open-link,.map-link,.project-category,.project-kind,.project-card-more,.back-projects,.story-copy > a,.area-link:hover{color:var(--secondary)}
.home-project-text span{color:var(--secondary)}.home-project-text span span,.project-card-more > span{color:inherit}
.area-columns a:hover{color:var(--secondary)}
.service-photo span{background:transparent;color:inherit}
.review-author,.review-context,span.review-source{color:var(--ink)}
.notice,.draft-panel{background:var(--surface);color:var(--ink);border-color:var(--line)}
.field .error,.error{color:#b42318}
.location-map,.map-load-state{background:var(--surface);color:var(--ink)}
.map-frame{filter:none;color-scheme:light}
.footer{background:#1c1c1c;color:var(--white)}
.footer .logo,.footer .logo .brand-name,.footer .logo .brand-service,.footer .logo small,.footer h3,.footer a,.footer p,.footer-base{color:var(--white)}
.mobile-call{box-shadow:0 5px 18px #0002}
::selection{background:var(--primary);color:var(--ink)}
@media print{body,.section.dark,.contact-panel,.footer{background:#fff;color:#1a1a1a}}


/* Source: typography.css */
/* Selected Intermediate typography: self-hosted Roboto and existing Noto Sans TC. */
@font-face{font-family:Roboto;src:url('/assets/fonts/roboto-latin-v27.woff2?v=1404ca348bd7') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-latin-v26.woff2?v=defd82ee1b33') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-400-v20.woff2?v=8909904ab6c8') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-500-v20.woff2?v=f3779f1efccc') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-600-v20.woff2?v=f9a06e79cd3a') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-700-v20.woff2?v=6f56409fd3d6') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ellis Sans TC'; src: url('/assets/fonts/ellis-sans-tc-v13.woff2?v=6227681d2ee0') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
:root { --font-latin: 'Roboto','Segoe UI',Arial,sans-serif; --font-cjk: 'Roboto','Ellis Sans TC','Microsoft JhengHei','PingFang TC',sans-serif; --font-display: 'Roboto','Ellis Sans TC','Segoe UI','Microsoft JhengHei',sans-serif; --font-interface: var(--font-latin); --ui-body: 18px; font-family: var(--font-interface); }
body { font-family: var(--font-interface); font-size: var(--ui-body); font-weight: 400; line-height: 1.75; }
.footer { font-family:var(--font-interface); }
body:lang(zh) { --font-interface: var(--font-cjk); font-family: var(--font-interface); line-height: 1.85; }
h1,h2,h3,h4,h5,h6,.prose h2 { font-family: var(--font-display); font-weight: 900; letter-spacing: 0; }
h1,body:lang(zh) h1 { font-weight: 900; }
body:lang(zh) h1,body:lang(zh) h2,body:lang(zh) h3,body:lang(zh) h4,body:lang(zh) h5,body:lang(zh) h6,body:lang(zh) .prose h2 { font-family: var(--font-display); letter-spacing: .005em; }
.logo .brand-name { font-family: var(--font-display); font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: -.035em; }
.logo .brand-service { font-size: 12px; font-weight: 500; line-height: 1.6; letter-spacing: .015em; }
.hero-copy h1 { font-size: clamp(42px,4.1vw,56px); line-height: 1.12; }
body:lang(zh) .hero-copy h1 { font-size: clamp(36px,3.8vw,48px); line-height: 1.35; }
.page-hero h1,.service-hero-copy h1 { font-size: clamp(36px,4vw,50px); line-height: 1.2; }
body:lang(zh) .page-hero h1,body:lang(zh) .service-hero-copy h1 { font-size: clamp(34px,3.8vw,46px); line-height: 1.4; }
.hero-description,.service-hero-summary,.hero-summary { font-size: 18px; line-height: 1.75; }
.hero-services { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.6; }
.section-heading h2,.trust-heading h2,.location-copy h2,.project-heading h2 { font-size: clamp(30px,2.8vw,36px); line-height: 1.3; }
.prose h2 { font-size: 32px; line-height: 1.35; }
.service-card h3,.photo-service-title,.guide-card h3,.process-step h3 { font-size: 23px; line-height: 1.4; }
.service-card p,.photo-service-card p,.guide-card p,.process-step p { font-size: 18px; line-height: 1.75; }
.prose p,.prose li { font-size: 18px; line-height: 1.8; }
body:lang(zh) .prose p,body:lang(zh) .prose li { line-height: 1.9; }
.button,.menu-button,button,.header .nav-links,.header-language,.nav-phone { font-family: var(--font-display); font-weight: 600; }
input,textarea,select { font-family: var(--font-interface); }
.header .nav-links > a,.nav-topline > a { font-size: 16px; }
.nav-panel-list a { font-weight: 600; }
.nav-panel-intro strong { font-family: var(--font-display); font-weight: 600; }
.button { font-size: 17px; font-weight: 700; min-height: 52px; }
.field label { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.field input,.field select,.field textarea,.search-bar input { font-size: 18px; }
.faq summary { font-family: var(--font-display); font-size: 19px; line-height: 1.6; font-weight: 600; }
.small,.source-list,.service-property-context { font-size: 16px; }
.eyebrow,.service-hero-kicker { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .1em; line-height: 1.6; }
body:lang(zh) .eyebrow,body:lang(zh) .service-hero-kicker { letter-spacing: .055em; }
strong,b { font-weight: 700; }
.quote-table { font-size: 17px; }
.quote-table td,.quote-table th { vertical-align: top; padding: 16px 18px; }
.rfq-example { white-space: pre-wrap; overflow-wrap: anywhere; padding: 24px; font: inherit; font-size: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
@media (max-width:680px) {
 .logo .brand-name { font-size: 22px; }
 .hero-copy h1 { font-size: 40px; }
 body:lang(zh) .hero-copy h1 { font-size: 36px; }
 .page-hero h1,.service-hero-copy h1,body:lang(zh) .page-hero h1,body:lang(zh) .service-hero-copy h1 { font-size: 34px; }
 .hero-services { font-size: 19px; }
 .section-heading h2,.trust-heading h2,.location-copy h2,.project-heading h2,.prose h2 { font-size: 29px; }
 .faq summary { font-size: 18px; }
 .quote-table { font-size: 16px; }
}
@media (max-width:380px) { .header .logo .brand-name { font-size: 19px; } }


/* Source: experience.css */
/* Shared CodeStitch Intermediate experience owner. Card / Button / Input / Textarea state patterns adapted
   from shadcn/ui (MIT), pinned sources and attribution in vendor/shadcn-ui.
   Original static implementation: no React runtime or client-rendered content. */
:root { --radius: 5px; --card-shadow: 0 2px 12px #0000000a; --hover-shadow: 0 8px 24px #00000014; --ui-ease: cubic-bezier(.16,1,.3,1); --motion-fast:160ms; --motion-ui:240ms; --motion-panel:220ms; --field-border: #767676; }
html { scroll-padding-top: 112px; }
body { -webkit-font-smoothing: antialiased; }
.container { width: min(1240px,calc(100% - 64px)); }
.faq p { color: var(--ink); }
.error { color: #b42318; }
.form-note { font-size: 15px; line-height: 1.8; }
.draft-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.draft-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.table-scroll { overflow-x: auto; }
.quote-table { width: 100%; border-collapse: collapse; }
.guide-decision{margin:28px 0 40px}
.decision-table{min-width:680px}
.decision-table th,.decision-table td{vertical-align:top}
.table-scroll:focus-visible{outline:3px solid var(--secondary);outline-offset:4px}
.project-work-record .work-record-facts{margin:24px 0}
.work-record-facts > div{padding:18px 0;border-bottom:1px solid var(--line)}
.work-record-facts dt{font-weight:700;margin:0 0 8px;color:var(--ink)}
.work-record-facts dd{margin:0;line-height:1.75}
.project-work-record .work-record-facts a{display:inline-flex;gap:6px;min-height:44px;align-items:center;font-size:15px}
.section,.page-section { padding: 80px 0; }
.section-heading { gap: 28px; margin-bottom: 32px; align-items: end; }
.section-heading .section-lead { font-size: 18px; line-height: 1.8; max-width: 65ch; margin-bottom: 0; }
.eyebrow { margin-bottom: 14px; }
.button,.button.navy,.hero-actions .button,.contact-panel .button,.dark .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 4px; min-height: 52px; padding: 13px 22px; border-width: 1px; border-style: solid; text-decoration: none; box-shadow: 0 3px 7px #0002; transition: background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 180ms var(--ui-ease); }
.service-card-body { grid-template-rows: auto 1fr auto; align-content: stretch; }
.button:hover,.button.navy:hover,.hero-actions .button:hover { box-shadow: 0 5px 13px #0003; transform: translateY(-1px); }
.button.secondary { box-shadow: none; }
.button:active,.button.navy:active { transform: translateY(1px); box-shadow: none; }
.button:disabled,.button[aria-disabled=true] { pointer-events: none; opacity: .5; transform: none; }
.button svg { pointer-events: none; flex-shrink: 0; }
.button:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible { outline: 3px solid var(--action-blue); outline-offset: 4px; }
.dark .button:focus-visible,.contact-panel .button:focus-visible { outline-color: #fff; }
.card-link { font-size: 15px; font-weight: 600; line-height: 1.6; text-decoration: none; }
.card-link > span,.project-card-more > span,.nav-panel-list a > span,.weather-links a > span,.area-link > span:last-child { display: inline-block; transition: transform 200ms var(--ui-ease); }
a:hover > .card-link > span,a:hover .project-card-more > span,a.card-link:hover > span,.nav-panel-list a:hover > span,.weather-links a:hover > span,.area-link:hover > span:last-child { transform: translateX(3px); }
.service-card,.mini-card,.card,.portfolio-item,.home-project-link,.guide-card { transition: border-color 200ms ease,box-shadow 220ms ease,transform 220ms var(--ui-ease); }
.service-card:hover,.home-project-link:hover,.portfolio-item:hover,.guide-card:hover { border-color: #a3a3a3; box-shadow: var(--hover-shadow); transform: translateY(-3px); }
.mini-card,.card { border-radius: 4px; padding: 26px; box-shadow: var(--card-shadow); }
.mini-card h3,.card h3 { font-size: 23px; }
.mini-card p,.card p,.mini-card a,.card a { font-size: 17px; }
.guide-grid { gap: 22px; }
.guide-card { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; box-shadow: var(--card-shadow); }
.guide-card h3 { margin: 0; }
.guide-card .card-link { display: flex; justify-content: space-between; }
.guide-card span { font-size: 15px; color:var(--secondary); }
.guide-card span span { color:inherit; }
.section-heading > a { color:var(--secondary); }
.process-grid { gap: 24px; }
.process-step { padding: 28px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.step-number { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; color: var(--action-blue); font-size: 16px; font-weight: 650; letter-spacing: 0; }
.process-step h3 { margin-bottom: 12px; }
.process-step p { margin-bottom: 0; color: var(--ink); }
.area-columns { gap: 28px; }
.area-columns > div { padding: 28px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); box-shadow: var(--card-shadow); }
.area-columns h3 { font-size: 22px; margin-bottom: 18px; }
.area-columns a { border-color: var(--line); font-size: 16px; padding: 13px 0; }
.area-columns a:last-child { border-bottom: 0; }
.trust-section { background: var(--surface); border: 0; }
.review-grid { gap: 24px; }
.review-card { padding: 32px; border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 4px; box-shadow: var(--card-shadow); }
.review-card::before { font-family: var(--font-latin); font-weight: 700; font-size: 54px; line-height: 1; margin-bottom: 4px; }
.review-quote { font-family: var(--font-latin); font-size: 22px; line-height: 1.65; font-weight: 500; letter-spacing: -.015em; margin-bottom: 22px; }
.review-translation { font-size: 18px; line-height: 1.85; }
.review-card figcaption { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
.review-author { font-size: 17px; }
.review-context,.review-source { font-size: 13px; line-height: 1.8; }
.location-grid { gap: 48px; }
.location-details { padding: 24px; border: 1px solid var(--line); background: var(--surface); border-radius: 4px; margin: 24px 0 18px; }
.location-details strong { font-size: 22px; }
.location-details span,.location-details .small { font-size: 14px; }
.location-details a { font-size: 19px; font-weight: 600; }
.location-details a[href^=mailto] { font-size: 17px; overflow-wrap: anywhere; }
.location-map { border-radius: 4px; border: 1px solid var(--line); overflow: hidden; box-shadow: var(--card-shadow); background: var(--surface); }
.map-frame { height: 400px; filter: none; }
.map-caption { font-size: 13px; padding: 16px 20px; line-height: 1.75; }
.faq { max-width: 920px; }
.faq details { border: 1px solid var(--line); border-radius: 4px; padding: 0 24px; margin-bottom: 14px; background: var(--surface); transition: border-color 180ms ease,background-color 180ms ease; }
.faq details:hover { border-color: #a3a3a3; }
.faq summary { min-height: 72px; padding: 20px 0; gap: 24px; }
.faq summary::after { content: '+'; font-family: var(--font-latin); font-size: 24px; font-weight: 400; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); color: var(--action-blue); flex-shrink: 0; }
.faq details[open] { border-color: var(--action-blue); background: var(--surface); box-shadow: var(--card-shadow); }
.faq details[open] summary::after { content: '−'; background: var(--action-blue); border-color: var(--action-blue); color: #fff; }
.faq details p { font-size: 18px; line-height: 1.85; margin: 0 44px 24px 0; max-width: 72ch; }
.breadcrumb { padding-top: 24px; padding-bottom: 20px; font-size: 13px; line-height: 1.7; }
.content-layout,.layout { gap: 64px; grid-template-columns: minmax(0,1fr) 300px; }
.prose { max-width: 74ch; }
.prose h2 { margin-top: 44px; margin-bottom: 20px; padding-bottom: 0; border: 0; }
.prose h3 { font-size: 23px; margin-top: 28px; margin-bottom: 14px; }
.prose p { margin-bottom: 22px; }
.prose li { margin-bottom: 12px; }
.prose a:not(.button) { text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.aside,.sidebar { padding: 26px; border: 1px solid var(--line); border-radius: 4px; top: 136px; box-shadow: var(--card-shadow); }
.aside h3,.sidebar h3 { font-size: 23px; line-height: 1.45; }
.aside p,.sidebar p { font-size: 16px; }
.aside a:not(.button),.sidebar a:not(.button) { font-size: 16px; padding: 10px 0; }
.aside .button,.sidebar .button { font-size: 16px; padding-inline: 14px; }
.notice { border: 1px solid var(--line); border-left: 3px solid var(--action-blue); border-radius: 4px; padding: 26px; }
.notice p { font-size: 17px; line-height: 1.8; }
.notice p:last-child { margin-bottom: 0; }
.page-links a { border-radius: 4px; font-size: 16px; padding: 11px 16px; }
.area-hero-tag { border-radius: 4px; padding: 7px 14px; font-size: 14px; }
.area-grid { gap: 16px; }
.area-link { padding: 20px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: 17px; transition: background-color 180ms ease,border-color 180ms ease; }
.area-link:hover { background: var(--surface); border-color: var(--action-blue); }
.area-link small { font-size: 13px; }
.search-bar { padding: 8px 12px; border: 1px solid var(--field-border); border-radius: 4px; min-height: 58px; max-width: 580px; box-shadow: 0 2px 4px #0001; }
.search-bar:focus-within { border-color: var(--action-blue); outline: 3px solid #ffffff30; outline-offset: 2px; }
.search-bar input:focus-visible { outline: 0; }
.search-bar button { border-radius: 4px; }
.search-bar button:hover { background: var(--surface); }
.search-count { font-size: 15px; }
form[data-enquiry] { padding: 30px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); box-shadow: var(--card-shadow); margin: 26px 0; }
.form-grid { gap: 22px; }
.field label { margin-bottom: 10px; }
.field input,.field select,.field textarea { width: 100%; border: 1px solid var(--field-border); border-radius: 4px; padding: 14px 16px; min-height: 56px; background: var(--surface); color: var(--ink); box-shadow: 0 2px 3px #0001; transition: border-color 180ms ease,box-shadow 180ms ease; }
.field input:hover,.field select:hover,.field textarea:hover { border-color: var(--action-blue); }
.field input:focus,.field select:focus,.field textarea:focus { border-color: var(--action-blue); outline: 2px solid var(--action-blue); outline-offset: 3px; box-shadow: none; }
.field input::placeholder,.field textarea::placeholder { color: var(--ink); opacity: .7; }
.field textarea { min-height: 168px; line-height: 1.8; }
.field .small { font-size: 15px; line-height: 1.75; margin: 12px 0 0; }
.field .error { font-size: 15px; line-height: 1.7; margin-top: 7px; }
.field [aria-invalid=true] { border-color: #b42318; outline-color: #b42318; }
.form-status { font-size: 16px; line-height: 1.75; margin-top: 20px; }
.draft-panel { padding: 28px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.draft-panel pre { font: inherit; font-size: 17px; line-height: 1.85; }
.draft-actions { gap: 12px; }
.rfq-panel { padding: 30px; border: 1px solid var(--action-blue); border-radius: 4px; background: var(--surface); margin: 36px 0; }
.rfq-panel h2 { margin-top: 0; }
.rfq-panel h3 { margin-top: 24px; }
.rfq-panel .button { margin-top: 12px; }
.table-scroll { border: 1px solid var(--line); border-radius: 4px; margin: 24px 0; }
.quote-table td,.quote-table th { padding: 18px; }
.service-masthead { background: var(--hero); padding: 48px 0; border: 0; }
.service-hero-layout { gap: 48px; }
.service-hero-photo,.about-work-photo { border: 0; border-radius: 4px; box-shadow: 0 8px 24px #0002; }
.service-hero-photo figcaption,.about-work-photo figcaption { padding: 15px 20px; font-size: 13px; }
.service-property-context { font-size: 16px; line-height: 1.85; }
.service-check-panel { background: var(--surface); padding: 30px; border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--card-shadow); }
.service-check-panel.service-inspection-panel { background: var(--surface); border-top: 1px solid var(--line); }
.service-check-panel h2 { font-size: 26px; line-height: 1.5; margin-bottom: 20px; }
.service-check-panel li { font-size: 18px; line-height: 1.8; }
.company-identity-panel { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); padding: 24px; gap: 10px; font-size: 17px; }
.company-service-links a { border-radius: 4px; font-size: 16px; }
.portfolio-item { border-radius: 4px; box-shadow: var(--card-shadow); }
.portfolio-caption { padding: 25px; }
.portfolio-caption h3 { font-size: 23px; }
.project-card-summary { font-size: 17px; }
.project-card-more { font-size: 15px; }
.project-category,.project-kind { font-size: 12px; }
.project-story { border-radius: 4px; padding: 30px; box-shadow: var(--card-shadow); }
.story-copy p { font-size: 18px; }
.story-copy > a { font-size: 16px; }
.story-images img,.gallery-photo,.comparison figure { border-radius: 4px; }
.project-gallery figcaption,.story-images figcaption,.comparison figcaption { font-size: 14px; line-height: 1.75; }
.section.dark { border-radius: 0; }
.cta h2 { font-size: 34px; }
.cta p { font-size: 18px; }
.footer { padding-top: 64px; }
.footer h3 { font-size: 17px; }
.footer p,.footer a { font-size: 15px; line-height: 1.8; }
.footer .brand-name { font-size: 23px; }
.footer-base,.footer-base a { font-size: 13px; }
.mobile-call { border-radius: 4px; }
.nav-panel:not([hidden]) { animation: ellis-panel-enter var(--motion-panel) var(--ui-ease) both; }
@keyframes ellis-panel-enter { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
html{view-transition-name:none}
main{view-transition-name:ellis-content}
::view-transition-old(ellis-content){animation:ellis-fade-out 120ms ease-out both}
::view-transition-new(ellis-content){animation:ellis-fade-in 180ms ease-out both}
::view-transition{pointer-events:none}
@media (max-width:900px) { .content-layout,.layout { grid-template-columns: 1fr; gap: 32px; } .aside,.sidebar { position: static; } .header .nav-links.open { animation: ellis-panel-enter var(--motion-panel) var(--ui-ease) both; } .area-columns > div { padding: 22px; } .review-card { padding: 26px; } }
@media (max-width:680px) {
 html { scroll-padding-top: 96px; }
 .container { width: calc(100% - 36px); }
 .section,.page-section { padding: 48px 0; }
 .section-heading { align-items: start; gap: 18px; margin-bottom: 28px; }
 .section-heading > a { font-size: 15px; }
 .breadcrumb { padding: 18px 0; }
 .process-grid,.area-columns { gap: 20px; }
 .process-step { padding: 25px; }
 .review-quote { font-size: 21px; }
 .location-grid { gap: 28px; }
 .location-details { padding: 22px; }
 .map-frame { height: 340px; }
 .faq details { padding-inline: 19px; }
 .faq summary { gap: 15px; min-height: 70px; }
 .faq details p { margin-right: 0; font-size: 18px; }
 .content-layout,.layout { grid-template-columns: 1fr; }
 .aside,.sidebar { position: static; padding: 25px; }
 .prose h2 { margin-top: 36px; }
 .area-link { padding: 18px; }
 form[data-enquiry] { padding: 24px 20px; }
 .form-grid { grid-template-columns: 1fr; gap: 20px; }
 .field.full { grid-column: auto; }
 .draft-panel,.rfq-panel { padding: 24px 20px; }
 .draft-actions .button { flex-grow: 1; }
 .service-masthead { padding: 34px 0; }
 .service-hero-layout { gap: 30px; }
 .service-check-panel { padding: 25px; }
 .service-check-panel h2 { font-size: 24px; }
 .project-story { padding: 22px; }
 .portfolio-caption { padding: 22px; }
 .cta h2 { font-size: 29px; }
 .footer { padding-top: 48px; }
}
@media (max-width:480px) { .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .button { width: 100%; } }
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior: auto; }
 .button,.service-card,.mini-card,.card,.portfolio-item,.home-project-link,.guide-card,.card-link > span,.project-card-more > span,.nav-panel-list a > span,.weather-links a > span,.area-link > span:last-child,.field input,.field select,.field textarea { transition: none; }
 .button:hover,.service-card:hover,.home-project-link:hover,.portfolio-item:hover,.guide-card:hover { transform: none; }
 .nav-panel:not([hidden]),.header .nav-links.open { animation: none; }
 ::view-transition-old(root),::view-transition-new(root) { animation: none; }
}
@media print {
 .business-home .hero-copy,.service-masthead,.problem-guide-intro { background: var(--surface); color: var(--ink); }
 .business-home .hero-copy h1,.business-home .hero-copy .eyebrow,.business-home .hero-services,.business-home .hero-description { color: var(--ink); }
 .business-home .hero-layout,.service-card,.review-card,.guide-card,.aside,.service-check-panel { box-shadow: none; }
}

/* Storm service: a readable safety decision followed by four ordered stages. */
.storm-triage-section { padding-bottom: 0; }
.storm-triage { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 40px; padding: 36px; border: 1px solid var(--action-blue); border-radius: 4px; background: var(--surface); }
.storm-triage h2 { font-size: 30px; line-height: 1.4; margin: 12px 0 18px; }
.storm-triage p,.storm-triage li { font-size: 18px; line-height: 1.85; }
.storm-triage p { margin: 0 0 20px; }
.storm-triage a { font-size: 16px; font-weight: 600; text-underline-offset: 4px; }
.storm-triage-signals { align-self: center; border-left: 1px solid var(--line); padding-left: 30px; }
.storm-triage-signals ul { margin: 0; padding-left: 22px; }
.storm-triage-signals li + li { margin-top: 16px; }
.storm-triage-section + .service-overview { padding-top: 48px; padding-bottom: 0; }
.storm-service-detail { padding-top: 56px; }
.storm-plan > h2 { margin-top: 0; }
.prose .storm-workflow { list-style: none; padding: 0; margin: 32px 0 0; }
.storm-workflow > .storm-step { position: relative; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 24px; margin: 0; }
.storm-step:not(:last-child) { padding-bottom: 34px; }
.storm-step:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 56px; bottom: 12px; width: 2px; background: var(--line); }
.storm-step-index { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--secondary); color: #fff; font-family: var(--font-latin); font-size: 16px; font-weight: 600; line-height: 1; }
.storm-step-body h3 { margin: 4px 0 12px; font-size: 24px; line-height: 1.45; }
.storm-step-body .storm-step-condition { margin: 0 0 18px; font-size: 16px; line-height: 1.75; color: var(--action-blue); font-weight: 500; }
.storm-step-body .storm-step-result { border-left: 3px solid var(--action-blue); margin: 22px 0 0; padding: 0 0 0 16px; }
.storm-step-result strong { display: block; font-size: 16px; color: var(--action-blue); margin-bottom: 5px; }
.storm-guide { padding: 28px 0; margin: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.storm-guide h2 { margin-top: 0; }
.storm-guide .page-links { margin-bottom: 0; }
.storm-contents > a:not(.button) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.storm-contents > a:not(.button) > span { flex: none; }
.storm-contents .button { display: flex; justify-content: center; text-align: center; }
.storm-contents .small { margin: 24px 0 0; font-size: 15px; line-height: 1.8; }
@media (max-width:900px) {
 .storm-triage { grid-template-columns: 1fr; gap: 24px; }
 .storm-triage-signals { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
}
@media (max-width:680px) {
 .storm-triage { padding: 25px; border-radius: 4px; }
 .storm-triage h2 { font-size: 25px; }
 .storm-triage-section + .service-overview { padding-top: 36px; }
 .storm-service-detail { padding-top: 40px; }
 .storm-workflow > .storm-step { grid-template-columns: 36px minmax(0,1fr); gap: 15px; }
 .storm-step-index { width: 36px; height: 36px; font-size: 14px; }
 .storm-step:not(:last-child)::before { left: 17px; top: 48px; }
 .storm-step-body h3 { margin-top: 2px; font-size: 22px; }
 .storm-guide { padding: 24px 0; }
 .storm-contents { order: -1; }
}

@media (forced-colors: active) { .button,.mini-card,.card,.guide-card,.review-card,.area-link,.notice,.draft-panel,.rfq-panel,.faq details,.field input,.field select,.field textarea { border-color: CanvasText; box-shadow: none; } a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline-color: Highlight; } }

/* Dark page content and explicit light-panel variants share readable primitives. */
.prose,.prose h2,.prose h3,.prose p,.prose li,.project-heading,.project-heading h2{color:var(--ink)}
.section-lead,.lead,.prose .small,.project-card-summary,.service-property-context{color:var(--muted)}
.mini-card,.card,.guide-card,.portfolio-item,.project-story,.review-card,.aside,.sidebar,.service-check-panel,.company-identity-panel{background:var(--surface);color:var(--ink)}
.quote-table th{background:var(--surface-raised);color:var(--ink)}
.rfq-example,.rfq-panel,.notice,.no-results{background:var(--surface);color:var(--ink)}
.search-bar{background:var(--surface);border-color:var(--accent)}.search-bar input,.search-bar button{color:var(--ink)}
.field input,.field select,.field textarea{color:var(--ink);background:var(--surface-raised)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}
.field .error,.form-status.error{color:#b42318}.field [aria-invalid=true]{border-color:#b42318;outline-color:#b42318}
.faq details,.faq summary::after{background:transparent;color:var(--ink)}.faq details[open]{background:var(--surface)}
.faq details[open] summary::after{background:var(--panel-light);color:var(--ink-light)}
.review-card::before{color:var(--secondary)}.review-translation,.review-author,.review-context,.review-source{color:var(--muted)}
.service-photo figcaption,.about-work-photo figcaption,.story-images figcaption,.comparison figcaption,.project-gallery figcaption{color:inherit;background:transparent}
.company-service-links a,.page-links a{color:var(--ink);border-color:var(--line)}
.page-links a{background:var(--surface)}.page-links a:hover{background:var(--primary);color:var(--ink)}
.location-section{background:var(--canvas);color:var(--ink)}.map-caption{background:var(--surface);color:var(--muted)}.map-caption a{color:var(--ink)}
.skip{background:var(--panel-light);color:var(--ink-light)}
.area-hero-tag{background:var(--surface-raised);color:var(--ink);border-color:var(--line)}
.storm-triage,.storm-step-index{background:var(--surface);color:var(--ink);border-color:var(--line)}
@media print{.prose,.prose h2,.prose h3,.prose p,.prose li,.section-lead,.lead,.review-translation,.review-author,.review-context,.review-source{color:#212529}.mini-card,.card,.guide-card,.portfolio-item,.project-story,.review-card,.aside,.sidebar,.rfq-panel,.notice,.service-check-panel{background:#fff;color:#212529}}

/* Shared light-theme states and explicit inverse surfaces. */
.mini-card,.card,.review-card{background:var(--canvas);color:var(--ink)}
.faq details[open] summary{background:var(--secondary);color:var(--white);margin:0 -24px;padding-inline:24px}
.faq details[open] summary::after{background:transparent;color:var(--white);border-color:#ffffff80}
.faq details[open] p{padding-top:20px}
.field input,.field select,.field textarea{background:var(--canvas)}
.search-bar:focus-within{outline-color:var(--secondary)}
.button,.button.navy,.hero-actions .button,.contact-panel .button,.dark .button{box-shadow:none;border-radius:0;font-weight:700}
.button:hover,.button.navy:hover,.hero-actions .button:hover{transform:none;box-shadow:none}
.card-link,.page-links a,.area-link{font-weight:700}
.aside,.sidebar{background:var(--surface);border-top:5px solid var(--primary)}

/* Coordinated motion: immediate feedback, gentle settling, no hidden content. */
.button,.button.navy,.hero-actions .button,.contact-panel .button,.dark .button{transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-ui) var(--ui-ease),transform var(--motion-ui) var(--ui-ease)}
.service-card,.portfolio-item,.home-project-link,.guide-card{transition:box-shadow var(--motion-ui) var(--ui-ease),border-color var(--motion-ui) ease,transform var(--motion-ui) var(--ui-ease)}
.card-link > span,.project-card-more > span,.nav-panel-list a > span,.weather-links a > span,.area-link > span:last-child{transition:transform var(--motion-ui) var(--ui-ease)}
.faq summary{transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease}
.field input,.field select,.field textarea{transition:border-color var(--motion-fast) ease,box-shadow var(--motion-ui) var(--ui-ease)}
.draft-panel:not([hidden]){animation:ellis-panel-enter var(--motion-panel) var(--ui-ease) both}
@media(hover:hover) and (pointer:fine){
 .button:hover,.button.navy:hover,.hero-actions .button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000016}
 .photo-open:hover .photo-open-label{text-decoration:underline;text-underline-offset:4px}
}
.button:active,.button.navy:active,.hero-actions .button:active{transform:translateY(0) scale(.985);box-shadow:none;transition-duration:80ms}
@media(hover:none){.service-card:hover,.home-project-link:hover,.portfolio-item:hover,.guide-card:hover{transform:none;box-shadow:var(--card-shadow)}a:hover > .card-link > span,a:hover .project-card-more > span,a.card-link:hover > span,.nav-panel-list a:hover > span,.weather-links a:hover > span,.area-link:hover > span:last-child{transform:none}}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .button,.button.navy,.hero-actions .button,.contact-panel .button,.dark .button,.service-card,.portfolio-item,.home-project-link,.guide-card,.card-link > span,.project-card-more > span,.nav-panel-list a > span,.weather-links a > span,.area-link > span:last-child,.faq summary,.field input,.field select,.field textarea{transition:none}
 .button:hover,.button:active,.button.navy:hover,.button.navy:active,.hero-actions .button:hover,.hero-actions .button:active{transform:none}
 .draft-panel:not([hidden]),::view-transition-old(root),::view-transition-new(root),::view-transition-old(ellis-content),::view-transition-new(ellis-content){animation:none}
}


/* Source: navigation.css */
/* CodeStitch Intermediate white navigation adapted to the existing Ellis disclosure markup.
   Preserve hub links, all child links, native button state and keyboard/focus behaviour. */
html { scroll-padding-top:112px; }
.header.intermediate-header {
 position:sticky; top:0; left:0; z-index:80; width:100%; margin:0; padding:0;
 overflow:visible; background:var(--white); color:var(--ink); border:0; border-radius:0;
 box-shadow:0 8px 24px rgba(149,157,165,.16);
}
.header.intermediate-header .contractor-utility { display:none; }
.header.intermediate-header .contractor-nav-bar { position:relative; width:100%; margin:0; background:var(--white); border:0; border-radius:0; box-shadow:none; }
.header.intermediate-header .nav { position:static; display:flex; align-items:center; justify-content:flex-end; width:min(1280px,calc(100% - 32px)); min-height:88px; padding:0; flex-wrap:nowrap; gap:clamp(10px,1.5vw,24px); margin:0 auto; }
.header.intermediate-header .logo { display:inline-flex; align-items:center; flex:0 0 auto; margin:0 auto 0 0; gap:12px; text-decoration:none; padding:0; color:var(--ink); border-radius:0; }
.header.intermediate-header .logo:hover { color:var(--ink); text-decoration:none; }
.header.intermediate-header .logo .brand-mark { display:block; width:52px; height:52px; flex:0 0 52px; object-fit:contain; border-radius:0; background:transparent; }
.header.intermediate-header .logo > span { display:block; min-width:0; }
.header.intermediate-header .logo .brand-name { display:block; font-size:24px; font-weight:900; line-height:1.15; letter-spacing:-.025em; color:var(--ink); }
.header.intermediate-header .logo .brand-service { display:block; margin-top:5px; font-size:10px; font-weight:400; line-height:1.5; letter-spacing:0; text-transform:none; color:var(--muted); }
.header.intermediate-header .nav-links { display:flex; align-items:center; justify-content:flex-start; flex:0 1 auto; flex-basis:auto; gap:2px; margin:0; min-width:0; padding:0; order:0; }
.header.intermediate-header .nav-links > a { position:relative; display:inline-flex; align-items:center; min-height:88px; padding:12px 9px; font-size:15px; font-weight:400; line-height:1.5; border:0; border-radius:0; box-shadow:none; text-decoration:none; white-space:nowrap; color:var(--ink); background:transparent; }
.header.intermediate-header .nav-links > a::after,.header.intermediate-header .nav-topline > a::after { content:''; position:absolute; left:9px; right:9px; bottom:24px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--motion-ui) var(--ui-ease); }
.header.intermediate-header .nav-links > a:hover,.header.intermediate-header .nav-links > a[aria-current=page] { color:var(--ink); background:transparent; box-shadow:none; text-decoration:none; }
.header.intermediate-header .nav-links > a:hover::after,.header.intermediate-header .nav-links > a[aria-current=page]::after,.header.intermediate-header .nav-group[data-active] .nav-topline > a::after,.header.intermediate-header .nav-topline > a:hover::after { transform:scaleX(1); }
.header.intermediate-header .header-language { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; flex:0 0 auto; order:0; margin:0; padding:6px; border:0; border-radius:0; font-size:13px; font-weight:700; line-height:1.5; text-decoration:none; color:var(--ink); background:transparent; }
.header.intermediate-header .header-language:hover { background:var(--surface); text-decoration:underline; text-underline-offset:4px; }
.header.intermediate-header .nav > .nav-phone { display:inline-flex; align-items:center; justify-content:center; min-height:50px; flex:0 0 auto; padding:12px 22px; order:0; margin:0; border:1px solid var(--cta-bg); border-radius:0; color:var(--cta-ink); background:var(--cta-bg); font-size:15px; font-weight:700; line-height:1.5; text-decoration:none; white-space:nowrap; box-shadow:none; transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease; }
.header.intermediate-header .nav > .nav-phone:hover { background:var(--cta-hover); border-color:var(--cta-hover); color:var(--cta-hover-ink); box-shadow:none; }
.header.intermediate-header .nav-group { position:relative; flex-shrink:0; width:auto; border:0; padding:0; }
.header.intermediate-header .nav-topline { display:flex; align-items:center; gap:0; min-height:88px; padding:0 0 0 9px; border:0; border-radius:0; box-shadow:none; background:transparent; }
.header.intermediate-header .nav-topline > a { position:relative; display:inline-flex; align-items:center; min-height:88px; padding:12px 0; font-size:15px; font-weight:400; line-height:1.5; white-space:nowrap; text-decoration:none; color:var(--ink); border-radius:0; box-shadow:none; }
.header.intermediate-header .nav-topline > a::after { left:0; right:0; }
.header.intermediate-header .nav-toggle { width:28px; height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:0; color:var(--ink); background:transparent; cursor:pointer; }
.header.intermediate-header .nav-toggle:hover,.header.intermediate-header .nav-toggle[aria-expanded=true] { background:var(--surface); color:var(--ink); }
.header.intermediate-header .nav-toggle svg { width:15px; height:15px; transition:transform var(--motion-ui) var(--ui-ease); }
.header.intermediate-header .nav-toggle[aria-expanded=true] svg { transform:rotate(180deg); }
.header.intermediate-header .nav-panel { position:absolute; z-index:20; top:100%; left:0; right:auto; transform:none; width:340px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 112px); overflow-y:auto; overscroll-behavior:contain; padding:8px 0; margin:0; color:var(--ink); background:var(--white); border:0; border-bottom:5px solid var(--accent); border-radius:0; box-shadow:0 10px 16px rgba(149,157,165,.25); }
.header.intermediate-header .nav-panel[hidden] { display:none !important; }
.header.intermediate-header .nav-panel-intro { display:block; padding:10px 16px 14px; margin:0; border-bottom:1px solid var(--line); }
.header.intermediate-header .nav-panel-intro strong { display:block; margin:0 0 5px; color:var(--ink); font-size:15px; font-weight:700; line-height:1.5; }
.header.intermediate-header .nav-panel-intro > a { display:inline-flex; align-items:center; min-height:44px; color:var(--secondary); font-size:15px; font-weight:700; white-space:normal; text-underline-offset:4px; }
.header.intermediate-header .nav-panel-intro > a:hover { color:var(--ink); }
.header.intermediate-header .nav-panel-list,.header.intermediate-header .nav-panel-areas .nav-panel-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.header.intermediate-header .nav-panel-list li { margin:0; min-width:0; list-style:none; }
.header.intermediate-header .nav-panel-list a { min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; font-size:16px; font-weight:400; line-height:1.5; text-decoration:none; border-radius:0; color:var(--ink); background:transparent; transition:background-color 180ms ease; }
.header.intermediate-header .nav-panel-list a > span { flex-shrink:0; color:var(--secondary); }
.header.intermediate-header .nav-panel-list a:hover { color:var(--ink); background:var(--surface); text-decoration:none; }
.header.intermediate-header .nav-panel-list a[aria-current=page] { color:var(--ink); background:var(--accent); text-decoration:none; }
.header.intermediate-header .logo:focus-visible,.header.intermediate-header .nav-links a:focus-visible,.header.intermediate-header button:focus-visible,.header.intermediate-header .header-language:focus-visible,.header.intermediate-header .nav > .nav-phone:focus-visible { outline:3px solid var(--secondary); outline-offset:3px; }
.header.intermediate-header .nav-panel a:focus-visible { outline-offset:-3px; }
.header.intermediate-header .language-compact { display:none; }
.header.intermediate-header .menu-button { display:none; }
@media (min-width:901px) and (max-width:1120px) {
 .header.intermediate-header .nav { gap:8px; }
 .header.intermediate-header .logo { gap:8px; }
 .header.intermediate-header .logo .brand-mark { width:40px; height:40px; flex-basis:40px; }
 .header.intermediate-header .logo .brand-name { font-size:18px; }
 .header.intermediate-header .logo .brand-service { font-size:9px; margin-top:4px; }
 .header.intermediate-header .nav-links > a { padding-inline:6px; font-size:14px; }
 .header.intermediate-header .nav-links > a::after { left:6px; right:6px; }
 .header.intermediate-header .nav-topline { padding-left:6px; }
 .header.intermediate-header .nav-topline > a { font-size:14px; }
 .header.intermediate-header .nav-toggle { width:24px; }
 .header.intermediate-header .nav > .nav-phone { padding-inline:14px; font-size:14px; }
 .header.intermediate-header .language-full { display:none; }
 .header.intermediate-header .language-compact { display:inline; }
}
/* At small widths the main panel scrolls, with child disclosures in normal flow. */
@media (max-width:900px) {
 html { scroll-padding-top:100px; }
 .header.intermediate-header .nav { min-height:80px; padding:12px 0; justify-content:flex-end; gap:10px; }
 .header.intermediate-header .logo { gap:10px; }
 .header.intermediate-header .logo .brand-mark { width:44px; height:44px; flex-basis:44px; }
 .header.intermediate-header .logo .brand-name { font-size:22px; }
 .header.intermediate-header .logo .brand-service { font-size:10px; }
 .header.intermediate-header .nav > .nav-phone { display:none; }
 .header.intermediate-header .nav-links { display:none; position:absolute; top:100%; left:0; right:0; width:100%; flex-direction:column; align-items:stretch; justify-content:flex-start; flex-basis:auto; gap:0; margin:0; padding:16px 20px 24px; background:var(--white); border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:0 12px 24px #00000012; max-height:calc(100dvh - 88px); overflow-y:auto; overscroll-behavior:contain; }
 .header.intermediate-header .nav-links.open { display:flex; }
 .header.intermediate-header .nav-links > a { display:flex; align-items:center; justify-content:flex-end; width:100%; min-height:52px; padding:12px; font-size:18px; border:0; box-shadow:none; color:var(--ink); }
 .header.intermediate-header .nav-links > a:hover,.header.intermediate-header .nav-links > a[aria-current=page] { color:var(--ink); background:var(--surface); box-shadow:none; }
 .header.intermediate-header .nav-links > a::after,.header.intermediate-header .nav-topline > a::after { display:none; }
 .header.intermediate-header .nav-group { position:static; width:100%; padding:0; border:0; }
 .header.intermediate-header .nav-topline { justify-content:flex-end; gap:4px; min-height:52px; padding:0; }
 .header.intermediate-header .nav-topline > a { flex:1; justify-content:flex-end; padding:12px 0 12px 12px; min-height:52px; font-size:18px; color:var(--ink); }
 .header.intermediate-header .nav-toggle { width:44px; height:44px; border:0; border-radius:0; }
 .header.intermediate-header .nav-panel { position:static; width:100%; max-width:none; transform:none; padding:8px; margin:6px 0 12px; max-height:none; overflow:visible; border:0; border-left:3px solid var(--accent); border-radius:0; background:var(--surface); box-shadow:none; }
 .header.intermediate-header .nav-panel-intro { text-align:right; padding:4px 10px 8px; }
 .header.intermediate-header .nav-panel-intro strong { font-size:16px; margin-bottom:4px; }
 .header.intermediate-header .nav-panel-intro > a { font-size:15px; }
 .header.intermediate-header .nav-panel-list a { padding:12px 10px; font-size:16px; font-weight:400; }
 .header.intermediate-header .nav-panel-list a:hover { background:var(--white); }
 .header.intermediate-header .header-language { margin:0; padding:6px; }
 .header.intermediate-header .menu-button { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; gap:7px; margin:0; min-height:48px; min-width:48px; padding:10px; font-size:15px; line-height:1.5; border:0; border-radius:4px; color:var(--ink); background:transparent; cursor:pointer; }
 .header.intermediate-header .menu-button:hover,.header.intermediate-header .menu-button[aria-expanded=true] { background:var(--surface); color:var(--ink); }
 .header.intermediate-header .menu-icon { width:24px; height:24px; flex:0 0 24px; }
 .header.intermediate-header .menu-icon path { transition:transform var(--motion-ui) var(--ui-ease); transform-origin:10px 10px; }
 .header.intermediate-header .menu-button[aria-expanded=true] .menu-icon path:first-child { transform:translateY(4px) rotate(45deg); }
 .header.intermediate-header .menu-button[aria-expanded=true] .menu-icon path:last-child { transform:translateY(-4px) rotate(-45deg); }
 .header.intermediate-header .menu-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
@media (max-width:480px) {
 .header.intermediate-header .nav { min-height:76px; padding:10px 0; gap:6px; }
 .header.intermediate-header .logo { gap:8px; }
 .header.intermediate-header .logo .brand-mark { width:40px; height:40px; flex-basis:40px; }
 .header.intermediate-header .logo .brand-name { font-size:19px; }
 .header.intermediate-header .logo .brand-service { display:none; }
 .header.intermediate-header .logo > span { max-width:160px; }
 .header.intermediate-header .header-language { min-width:44px; min-height:48px; font-size:13px; padding:4px; }
 .header.intermediate-header .language-full { display:none; }
 .header.intermediate-header .language-compact { display:inline; }
 .header.intermediate-header .nav-links { padding-inline:16px; max-height:calc(100dvh - 80px); }
}
@media (max-width:380px) {
 .header.intermediate-header .nav { gap:4px; }
 .header.intermediate-header .logo { gap:6px; }
 .header.intermediate-header .logo .brand-mark { width:34px; height:34px; flex-basis:34px; }
 .header.intermediate-header .logo .brand-name { font-size:17px; }
}
@media (prefers-reduced-motion:reduce) { .header.intermediate-header *,.header.intermediate-header *::after,.header.intermediate-header .nav > .nav-phone,.header.intermediate-header .nav-toggle svg,.header.intermediate-header .menu-icon path,.header.intermediate-header .nav-links > a::after,.header.intermediate-header .nav-topline > a::after,.header.intermediate-header .nav-panel,.header.intermediate-header .nav-links.open { transition:none; animation:none; } }
@media (forced-colors:active) { .header.intermediate-header,.header.intermediate-header .nav-panel,.header.intermediate-header .nav-links.open { border:1px solid CanvasText; box-shadow:none; } .header.intermediate-header .nav > .nav-phone { border-color:ButtonText; } }
@media print { .header.intermediate-header { display:none; } }


/* Source: home-composition.css */
/* CodeStitch Intermediate section composition. Full roof hero is the user's explicit exception. */
.business-home{background:var(--canvas);color:var(--ink)}
.business-home .masthead{padding:54px 0 128px;background:var(--hero);color:var(--ink);position:relative}
.business-home .hero-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:44px}
.business-home .hero-copy{display:block;max-width:560px}
.business-home .hero-title{margin-bottom:22px}
.business-home .eyebrow{font-size:15px;font-weight:700;letter-spacing:.09em;color:var(--secondary)}
.business-home .hero-copy h1{font-size:clamp(40px,4.7vw,64px);line-height:1.1;font-weight:900;letter-spacing:0;margin:0 0 24px;color:var(--ink)}
body:lang(zh) .business-home .hero-copy h1{font-size:clamp(38px,4.4vw,56px);line-height:1.3;letter-spacing:0}
.business-home .hero-services{font-size:22px;font-weight:700;margin:0;color:var(--ink)}
.business-home .hero-description{font-size:18px;line-height:1.7;margin:0 0 28px;color:var(--muted);max-width:54ch}
.business-home .hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.business-home .hero-actions .button{font-size:16px;padding:14px 24px;min-height:52px;border-radius:0}
.business-home .hero-photo{margin:0;min-width:0;position:relative;background:transparent;border:0;box-shadow:none;border-radius:0;padding:0}
.business-home .hero-photo::before,.business-home .hero-photo::after{content:none}
.business-home .hero-photo .photo-open{display:block}
.business-home .hero-photo img{width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;filter:none;opacity:1;transform:none;border-radius:0}
.business-home .hero-photo-caption{display:flex;justify-content:space-between;gap:12px;padding:12px 0 0;font-size:13px;line-height:1.6;color:var(--muted);background:transparent}
.business-home .hero-photo-caption a{color:var(--secondary);font-size:13px;font-weight:700}
.business-home .hero-photo .hero-photo-caption,.business-home .hero-photo .hero-photo-caption span{background:transparent;color:var(--muted)}
.business-home .hero-photo .hero-photo-caption a{color:var(--secondary)}
.business-home .home-start{position:relative;z-index:2;margin-top:-78px;padding:0 0 90px}
.business-home .quick-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.business-home .quick-service{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 28px 30px;background:var(--canvas);border:1px solid var(--line);border-radius:5px;box-shadow:0 8px 24px #00000012;color:var(--ink);text-decoration:none;transition:transform var(--motion-ui) var(--ui-ease),box-shadow var(--motion-ui) var(--ui-ease)}
@media(hover:hover) and (pointer:fine){.business-home .quick-service:hover{transform:translateY(-4px);box-shadow:0 12px 28px #0000001a}.business-home .quick-service:hover .quick-service-link > span{transform:translateX(4px)}}
.business-home .quick-service:active{transform:translateY(0) scale(.99);transition-duration:80ms}
.business-home .quick-service-link > span{display:inline-block;transition:transform var(--motion-ui) var(--ui-ease)}
.business-home .quick-service-icon{display:grid;place-items:center;width:72px;height:72px;margin-bottom:24px;border-radius:50%;background:var(--primary);color:#000}
.business-home .quick-service-icon svg{width:38px;height:38px}
.business-home .quick-service h2{font-size:24px;line-height:1.3;font-weight:900;margin:0 0 16px;color:var(--ink)}
.business-home .quick-service p{font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 24px}
.business-home .quick-service-link{margin-top:auto;font-size:15px;font-weight:700;color:var(--secondary)}
.business-home .quick-service-link > span{margin-left:8px}
.business-home .home-services{padding-top:0}
.business-home .section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px}
.business-home .section-heading > div{max-width:760px}
.business-home .section-heading h2,.business-home .problem-guide-intro h2,.business-home .weather-layout h2,.business-home .strip-enquiry h2{font-size:clamp(31px,3.9vw,49px);line-height:1.2;font-weight:900;letter-spacing:0;color:var(--ink);margin:0 0 20px}
.business-home .section-heading .section-lead{font-size:18px;line-height:1.65;color:var(--muted);margin:0;max-width:66ch}
.business-home .featured-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.business-home .service-card{display:flex;flex-direction:column;align-items:stretch;padding:0;gap:0;border:1px solid var(--line);border-top:5px solid var(--primary);border-radius:5px;background:var(--canvas);box-shadow:0 8px 24px #00000008;overflow:visible;min-width:0}
.business-home .service-card:nth-child(-n+2){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:64px;padding:24px 0 70px;border:0;box-shadow:none}
.business-home .service-card:nth-child(2){padding:40px 0 70px}
.business-home .service-card:nth-child(2) .service-photo{order:2}
.business-home .service-card:nth-child(2) .service-card-body{order:1}
.business-home .service-photo{display:block;position:relative;height:auto;margin:0;grid-column:auto;padding:24px;background:var(--surface);border-radius:5px;min-width:0}
.business-home .service-card:nth-child(-n+2) .service-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;padding:0;background:transparent}
.business-home .service-photo-primary,.business-home .service-photo-secondary{min-width:0}
.business-home .service-photo-secondary{padding-top:60px}
.business-home .service-photo > span{display:block;position:static;grid-column:1/-1;font-size:13px;color:var(--muted);padding:10px 0 0;background:transparent}
.business-home .service-photo .photo-open-label{position:static;display:flex;justify-content:space-between;gap:12px;padding:11px 0;font-size:14px;color:var(--secondary);background:transparent}
.business-home .service-photo .photo-open-label > span{position:static;padding:0;font:inherit;color:inherit;background:transparent}
.business-home .service-photo img{width:100%;height:auto;aspect-ratio:auto;max-height:360px;object-fit:contain;filter:none;transform:none}
.business-home .service-card:nth-child(-n+2) .service-photo img{max-height:420px}
.business-home .service-card-body{display:flex;flex-direction:column;align-items:flex-start;padding:30px}
.business-home .service-card:nth-child(-n+2) .service-card-body{padding:0}
.business-home .service-icon{display:grid;place-items:center;width:50px;height:50px;margin:0 0 22px;background:var(--primary);color:#000;border-radius:50%}
.business-home .service-card .service-title{align-self:stretch;text-align:left;font-size:27px;line-height:1.3;font-weight:900;letter-spacing:0;margin:0 0 18px;color:var(--ink)}
.business-home .service-card:nth-child(-n+2) .service-title{font-size:clamp(30px,3.4vw,44px)}
.business-home .service-card .service-desc{font-size:18px;line-height:1.7;color:var(--muted);margin:0 0 26px}
.business-home .service-card .card-link{margin-top:auto;display:inline-flex;gap:16px;align-items:center;font-weight:700;color:var(--secondary)}
.business-home .additional-services:empty{display:none}
.business-home .home-problem-guide{background:var(--surface)}
.problem-guide-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:80px;align-items:start}
.problem-guide-intro p{font-size:18px;line-height:1.7;color:var(--muted)}
.business-home .problem-guide-intro > p:last-child{color:var(--muted)}
.problem-guide-row{padding:26px 0;border-bottom:1px solid var(--line)}
.problem-guide-row:first-child{padding-top:0}
.problem-guide-row h3{font-size:24px;font-weight:900;line-height:1.35;margin:0 0 15px;color:var(--ink)}
.problem-guide-row p{font-size:18px;line-height:1.7;color:var(--muted);margin:0 0 18px}
.problem-guide-row a{font-size:16px;font-weight:700;color:var(--secondary);text-decoration:none}
.home-project-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px;align-items:start}
.home-project-link{display:block;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--ink);text-decoration:none;min-width:0}
.home-project-link:nth-child(3n+2){margin-top:48px}
.home-project-thumb{width:100%;height:auto;min-width:0;padding:0;background:transparent;border:0;border-radius:5px}
.home-project-thumb img{display:block;width:100%;height:auto;aspect-ratio:auto;max-height:440px;object-fit:contain;transform:none;filter:none}
.home-project-text{padding:20px 0 0}
.home-project-text .project-category{font-size:13px;color:var(--secondary);font-weight:700}
.home-project-text h3{font-size:23px;font-weight:900;line-height:1.35;margin:10px 0 16px;color:var(--ink)}
.home-project-text .card-link{font-size:15px;color:var(--secondary)}
.business-home .home-work{background:var(--canvas)}
.business-home .home-process{background:var(--surface)}
.business-home .process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.business-home .process-step{padding:28px;background:var(--canvas);border:1px solid var(--line);border-top:5px solid var(--primary);border-radius:5px}
.business-home .step-number{border:0;border-radius:50%;background:var(--primary);color:#000;font-weight:900}
.business-home .process-step h3{font-size:24px;font-weight:900}
.business-home .process-step p{color:var(--muted);font-size:17px}
.business-home .business-strip{padding:42px 0;background:var(--canvas);border-bottom:1px solid var(--line);color:var(--ink)}
.business-home .strip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.business-home .strip-item{border:0;padding:0}
.business-home .strip-item strong{display:block;font-size:22px;font-weight:900;line-height:1.4;color:var(--ink)}
.business-home .strip-item span{display:block;margin-top:10px;font-size:15px;color:var(--muted)}
.business-home .home-company-proof{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.business-home .home-company-proof a{font-size:14px;font-weight:700;color:var(--secondary)}
.business-home .trust-section{padding:80px 0;background:var(--canvas)}
.business-home .review-card{background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--primary);box-shadow:none;color:var(--ink)}
.business-home .home-weather{padding:90px 0;background:var(--surface)}
.business-home .weather-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:80px;align-items:center}
.business-home .weather-layout p{font-size:18px;line-height:1.7;color:var(--muted);margin-bottom:24px}
.business-home .weather-source{font-size:14px;font-weight:700;color:var(--secondary)}
.business-home .weather-links{display:flex;flex-direction:column}
.business-home .weather-links a{display:flex;justify-content:space-between;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);font-size:18px;font-weight:700;color:var(--secondary);text-decoration:none}
.business-home .area-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.business-home .area-columns > div{padding:28px;background:var(--canvas);border:1px solid var(--line);border-top:5px solid var(--primary);border-radius:5px;box-shadow:none}
.business-home .area-columns h3{font-size:23px;font-weight:900;color:var(--ink)}
.business-home .area-columns a{display:flex;justify-content:space-between;gap:12px;font-size:16px;font-weight:500;padding:13px 0;border-bottom:1px solid var(--line);color:var(--secondary);text-decoration:none}
.business-home .home-guides{background:var(--surface)}
.business-home .guide-card{background:var(--canvas);border-top:5px solid var(--primary);box-shadow:none;border-radius:5px}
.business-home .guide-card h3{font-size:24px;font-weight:900;color:var(--ink)}
.business-home .home-faq > .container{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:64px}
.business-home .home-faq .section-heading{display:block}
.business-home .home-faq .section-heading > a{display:inline-flex;margin-top:16px}
.business-home .home-faq .faq{max-width:none;width:100%}
.business-home .home-final-enquiry{padding:90px 0;background:#1c1c1c;color:#fff;border-top:6px solid var(--primary)}
.business-home .strip-enquiry{display:flex;align-items:center;justify-content:space-between;gap:40px;border:0;background:transparent;padding:0}
.business-home .strip-enquiry h2{color:#fff;max-width:760px}
.business-home .strip-enquiry .eyebrow{color:var(--primary)}
.business-home .strip-enquiry .button{flex-shrink:0}
@media(max-width:1000px){.business-home .hero-layout{gap:30px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.business-home .quick-service{padding:28px 20px}.business-home .quick-service h2{font-size:21px}.business-home .service-card:nth-child(-n+2){gap:40px}.problem-guide-layout,.business-home .weather-layout{gap:44px}.business-home .home-faq > .container{gap:36px}}
@media(max-width:760px){
 .business-home .masthead{padding:34px 0 96px}
 .business-home .hero-layout{grid-template-columns:minmax(0,1fr);gap:32px}
 .business-home .hero-copy{max-width:none}
 .business-home .hero-copy h1{font-size:42px}
 body:lang(zh) .business-home .hero-copy h1{font-size:38px}
 .business-home .hero-services{font-size:20px}
 .business-home .hero-description{font-size:17px}
 .business-home .hero-actions .button{font-size:15px;padding-inline:18px}
 .business-home .hero-photo-caption{flex-wrap:wrap}
 .business-home .home-start{margin-top:-46px;padding-bottom:60px}
 .business-home .quick-services{grid-template-columns:minmax(0,1fr);gap:16px}
 .business-home .quick-service{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px 20px;text-align:left;align-items:start;padding:24px}
 .business-home .quick-service-icon{grid-row:1/4;width:64px;height:64px;margin:0}
 .business-home .quick-service h2{margin:0;font-size:23px}
 .business-home .quick-service p{margin:0;font-size:16px}
 .business-home .quick-service-link{font-size:14px}
 .business-home .section-heading{display:block;margin-bottom:32px}
 .business-home .section-heading > .card-link{display:inline-flex;margin-top:20px}
 .business-home .featured-services{grid-template-columns:minmax(0,1fr);gap:32px}
 .business-home .service-card:nth-child(-n+2){display:flex;flex-direction:column;align-items:stretch;gap:28px;padding:0 0 32px}
 .business-home .service-card:nth-child(2) .service-photo,.business-home .service-card:nth-child(2) .service-card-body{order:initial}
 .business-home .service-card .service-title{font-size:27px}
 .business-home .service-card:nth-child(-n+2) .service-title{font-size:32px}
 .business-home .service-photo-secondary{padding-top:36px}
 .business-home .service-card .service-desc{font-size:17px}
 .business-home .service-card-body{padding:24px}
 .problem-guide-layout,.business-home .weather-layout{grid-template-columns:minmax(0,1fr);gap:36px}
 .business-home .problem-guide-intro p,.problem-guide-row p,.business-home .weather-layout p{font-size:17px}
 .home-project-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
 .home-project-link:nth-child(3n+2){margin-top:0}
 .home-project-link:nth-child(2n){margin-top:32px}
 .home-project-text h3{font-size:21px}
 .business-home .process-grid,.business-home .strip-grid,.business-home .area-columns{grid-template-columns:minmax(0,1fr);gap:24px}
 .business-home .home-faq > .container{grid-template-columns:minmax(0,1fr);gap:28px}
 .business-home .home-faq .section-heading{margin:0}
 .business-home .strip-enquiry{flex-direction:column;align-items:flex-start}
 .business-home .home-weather,.business-home .trust-section,.business-home .home-final-enquiry{padding:64px 0}
}
@media(max-width:480px){.home-project-links{grid-template-columns:minmax(0,1fr)}.home-project-link:nth-child(2n){margin-top:0}.business-home .quick-service{padding:22px 18px;grid-template-columns:52px minmax(0,1fr);gap:10px 16px}.business-home .quick-service-icon{width:52px;height:52px}.business-home .quick-service-icon svg{width:30px;height:30px}.business-home .quick-service h2{font-size:22px}.business-home .service-photo{padding:18px}.business-home .hero-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){.business-home .quick-service,.business-home .quick-service-link > span{transition:none}.business-home .quick-service:hover,.business-home .quick-service:active,.business-home .quick-service:hover .quick-service-link > span{transform:none}}
@media(forced-colors:active){.business-home .quick-service,.business-home .service-card,.business-home .process-step,.business-home .area-columns > div{border:1px solid CanvasText;box-shadow:none}}


/* Source: services-hub.css */
/* CodeStitch Intermediate directory: charcoal introduction, lime-topped service
   cards, alternating pale sections and complete, unfiltered work photographs. */
.services-hub { color: var(--ink); background: var(--canvas); }
.services-hub .hub-masthead { padding: clamp(60px,7.82vw,100px) 0 0; color:var(--white); background: #1c1c1c; }
.services-hub .hub-hero-layout { display: grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; padding-bottom:64px; }
.services-hub .hub-hero-copy { padding: 12px 0; }
.services-hub .hub-hero-copy .eyebrow { color:var(--primary); font-weight:700; letter-spacing:.1em; }
.services-hub h1 { color: var(--white); font-size: clamp(36px,4vw,52px); font-weight:900; line-height: 1.13; letter-spacing:0; margin: 16px 0 24px; max-width: 12em; text-wrap: balance; }
.services-hub .hub-hero-summary { color: var(--white); font-size: 18px; line-height: 1.65; margin: 0 0 28px; max-width: 34em; }
.services-hub .hub-hero-photo { margin: 0 auto; max-width: 440px; padding: 0; background: transparent; border: 0; border-radius: var(--radius); overflow: visible; box-shadow: none; }
.services-hub .hub-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio:auto; object-fit:contain; object-position: center; border-radius: var(--radius); filter: none; }
.services-hub .hub-hero-photo figcaption { padding: 16px 0 0; background: transparent; color: var(--white); font-size: 14px; line-height: 1.6; }
.services-hub .hub-jump-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin-top: 0; border-top: 5px solid var(--primary); border-bottom: 1px solid var(--line); border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; background:var(--white); }
.services-hub .hub-jump-nav a { display: flex; gap: 12px; align-items: center; min-height: 110px; padding: 24px; border: 0; border-right: 1px solid var(--line); border-radius: 0; text-decoration: none; background: var(--white); color: var(--secondary); box-shadow: none; transition: color 180ms ease,background 180ms ease; }
.services-hub .hub-jump-nav a:last-child { border-right: 0; }
.services-hub .hub-jump-nav a:hover { color: var(--ink); background: var(--primary); box-shadow: none; }
.services-hub .hub-jump-number { flex: 0 0 auto; color: var(--secondary); font-size: 13px; font-weight: 700; align-self: flex-start; padding-top: 3px; }
.services-hub .hub-jump-label { font-size: 16px; line-height: 1.5; font-weight: 700; }
.services-hub .hub-jump-label small { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; font-weight: 400; }
.services-hub .hub-jump-arrow { margin-left: auto; font-size: 20px; }
.services-hub .hub-category { padding: clamp(60px,7.82vw,100px) 0; background: var(--canvas); scroll-margin-top: 112px; }
.services-hub .hub-category-tinted { background: var(--panel-light); }
.services-hub .hub-category + .hub-category { border-top: 0; }
.services-hub .hub-category-heading { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 40px; max-width: 840px; }
.services-hub .hub-category-number { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; margin-top: 3px; color: var(--ink); background: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius); font-size: 14px; font-weight: 900; }
.services-hub .hub-category-heading h2 { color: var(--ink); margin: 0 0 14px; font-size: clamp(30px,3.2vw,42px); font-weight:900; line-height: 1.2; text-wrap: balance; }
.services-hub .hub-category-heading p { max-width: 42em; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.services-hub .hub-category-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap:48px; align-items:center; }
.services-hub .hub-category-tinted .hub-category-photos { order: 2; }
.services-hub .hub-category-photos { min-width: 0; }
.services-hub .hub-category-photo { display: block; max-width: 440px; margin: 0 auto; padding: 0; overflow: visible; background: transparent; color: var(--ink); border: 0; text-decoration: none; border-radius: var(--radius); box-shadow: none; }
.services-hub .hub-category-photo img { display: block; width: 100%; height: auto; aspect-ratio:auto; object-fit:contain; object-position: center; border-radius: var(--radius); filter: none; }
.services-hub .hub-category-photo > span { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 0 0; color: var(--secondary); background: transparent; font-size: 16px; font-weight: 700; line-height: 1.5; }
.services-hub .hub-category-photo > span svg { width: 20px; height: 20px; flex: 0 0 auto; }
.services-hub .hub-service-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.services-hub .hub-service-link { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 30px 26px; border: 1px solid var(--line); border-top:5px solid var(--primary); border-radius: var(--radius); background: var(--white); text-decoration: none; color: var(--ink-light); box-shadow: 0 8px 24px rgba(0,0,0,.04); transition: box-shadow 180ms ease,border-color 180ms ease; }
.services-hub .hub-service-link:hover { border-color: var(--line); border-top-color:var(--secondary); transform: none; background: var(--white); box-shadow: 0 12px 24px rgba(0,31,63,.12); }
.services-hub .hub-service-link h3 { color: var(--ink-light); margin: 0 0 16px; font-size: 24px; font-weight:900; line-height: 1.2; }
.services-hub .hub-service-link p { color: var(--muted); margin: 0 0 26px; font-size: 17px; line-height: 1.65; }
.services-hub .hub-service-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; color: var(--secondary); font-size: 14px; font-weight: 700; line-height: 1.5; margin-top: auto; }
.services-hub .hub-service-more > span { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; font-size: 20px; }
.services-hub .hub-service-link:hover .hub-service-more > span { background: var(--primary); color: var(--ink); }
.services-hub #roof-materials .hub-service-link:last-child { grid-column: 1/-1; }
.services-hub .hub-photo-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; }
.services-hub .hub-photo-pair .hub-category-photo:nth-child(2) { margin-top: 48px; }
.services-hub .hub-photo-pair .hub-category-photo { max-width: none; padding: 0; border-radius: var(--radius); }
.services-hub .hub-category-photo .hub-photo-service { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 0; color: var(--secondary); font-size: 16px; line-height: 1.6; font-weight: 700; text-decoration: none; }
.services-hub .hub-category-photo .hub-photo-service:hover { text-decoration: underline; text-underline-offset: 5px; }
.services-hub .hub-photo-pair .hub-category-photo img { aspect-ratio:auto; }
.services-hub #drainage .hub-category-layout { grid-template-columns: 1.1fr .9fr; }
.services-hub #drainage .hub-service-grid { grid-template-columns: 1fr; }
.services-hub .hub-chooser { padding: clamp(60px,7.82vw,100px) 0; background: var(--secondary); color: var(--white); }
.services-hub .hub-chooser-layout { display: grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; }
.services-hub .hub-chooser h2 { color: var(--white); margin: 10px 0 18px; font-size: clamp(30px,3.2vw,42px); font-weight:900; line-height: 1.2; text-wrap: balance; }
.services-hub .hub-chooser p { max-width: 35em; color: var(--white); font-size: 18px; line-height: 1.65; }
.services-hub .hub-chooser .eyebrow { color: var(--primary); }
.services-hub .hub-symptom-links { display: grid; grid-template-columns: 1fr; gap: 12px; }
.services-hub .hub-symptom-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 22px; border: 1px solid var(--line); border-left:4px solid var(--primary); border-radius: var(--radius); background: var(--white); color: var(--secondary); text-decoration: none; font-size: 17px; line-height: 1.6; font-weight: 700; transition: color 180ms ease,background 180ms ease; }
.services-hub .hub-symptom-links a:hover { background: var(--primary); color: var(--ink-light); border-color:var(--primary); }
.services-hub .hub-symptom-links a > span { margin-inline: 12px; }
.services-hub .hub-symptom-links svg { width: 22px; height: 22px; flex: 0 0 auto; }
.services-hub .hub-scope { padding: 40px 0; background: var(--canvas); border-bottom: 1px solid var(--line); }
.services-hub .hub-scope p { color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 66em; margin: 16px 0 0; }
.services-hub a:focus-visible { outline: 3px solid currentColor; outline-offset: 6px; }
.services-hub .hub-service-link:focus-visible { outline-color: var(--secondary); }
.services-hub .hub-symptom-links a:focus-visible,.services-hub .hub-hero-copy .button:focus-visible { outline-color: var(--primary); }
html[lang^="zh"] .services-hub h1 { font-size: clamp(35px,3.8vw,49px); line-height: 1.4; letter-spacing: 0; }
html[lang^="zh"] .services-hub .hub-category-heading h2,
html[lang^="zh"] .services-hub .hub-chooser h2 { line-height: 1.5; letter-spacing: 0; }
@media (max-width: 1050px) {
 .services-hub .hub-hero-layout,.services-hub .hub-category-layout,.services-hub .hub-chooser-layout { gap: 36px; }
 .services-hub .hub-jump-nav a { padding: 20px 16px; gap: 10px; }
 .services-hub .hub-jump-label { font-size: 15px; }
 .services-hub .hub-service-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 760px) {
 .services-hub .hub-masthead { padding: 48px 0 0; }
 .services-hub .hub-hero-layout,.services-hub .hub-category-layout,.services-hub #drainage .hub-category-layout,.services-hub .hub-chooser-layout { grid-template-columns: 1fr; gap: 32px; }
 .services-hub .hub-hero-copy { padding: 0; }
 .services-hub h1 { font-size: 36px; max-width: 14em; margin-bottom: 18px; }
 html[lang^="zh"] .services-hub h1 { font-size: 34px; }
 .services-hub .hub-hero-summary { margin-bottom: 24px; }
 .services-hub .hub-jump-nav { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 0; }
 .services-hub .hub-jump-nav a { min-height: 108px; padding: 20px 14px; border-right: 1px solid var(--line); }
 .services-hub .hub-jump-nav a:nth-child(2n) { border-right: 0; }
 .services-hub .hub-jump-nav a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
 .services-hub .hub-category { padding: 48px 0; scroll-margin-top: 92px; }
 .services-hub .hub-category-heading { gap: 14px; margin-bottom: 28px; }
 .services-hub .hub-category-number { width: 36px; height: 36px; flex-basis: 36px; font-size: 13px; }
 .services-hub .hub-category-heading h2,.services-hub .hub-chooser h2 { font-size: 28px; }
 .services-hub .hub-category-tinted .hub-category-photos { order: 0; }
 .services-hub .hub-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
 .services-hub .hub-service-link h3 { font-size: 22px; }
 .services-hub .hub-service-link { padding: 26px 22px; }
 .services-hub .hub-photo-pair .hub-category-photo:nth-child(2) { margin-top: 32px; }
 .services-hub .hub-chooser { padding: 48px 0; }
}
@media (max-width: 480px) {
 .services-hub .hub-service-grid { grid-template-columns: 1fr; }
 .services-hub .hub-hero-copy > .button { width: 100%; justify-content: center; }
 .services-hub .hub-photo-pair { gap: 12px; }
 .services-hub .hub-jump-nav a { flex-wrap: wrap; align-content: start; gap: 8px; }
 .services-hub .hub-jump-label { font-size: 14px; flex: 1 1 80px; }
 .services-hub .hub-jump-label small { font-size: 13px; }
 .services-hub .hub-jump-arrow { align-self: end; }
 .services-hub .hub-category-heading h2,.services-hub .hub-chooser h2 { font-size: 26px; }
 .services-hub .hub-category-photo,.services-hub .hub-hero-photo { max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
 .services-hub a,.services-hub svg,.services-hub .hub-service-more > span { transition: none; }
}
@media (forced-colors: active) {
 .services-hub .hub-service-link,.services-hub .hub-jump-nav a,.services-hub .hub-symptom-links a { border: 1px solid CanvasText; }
 .services-hub a:focus-visible { outline-color: Highlight; }
}
@media print {
 .services-hub { background: #fff; color: #000; }
 .services-hub .hub-masthead,.services-hub .hub-chooser { background:#fff; }
 .services-hub h1,.services-hub .hub-hero-copy .eyebrow,.services-hub .hub-hero-summary,.services-hub .hub-hero-photo figcaption,.services-hub .hub-chooser h2,.services-hub .hub-chooser p,.services-hub .hub-chooser .eyebrow { color:#000; }
 .services-hub .hub-category { padding: 24px 0; }
 .services-hub .hub-hero-layout,.services-hub .hub-category-layout,.services-hub .hub-chooser-layout { display: block; }
 .services-hub .hub-category-photo img { max-height: none; }
 .services-hub .hub-jump-nav { display: none; }
}


/* Source: service-theme.css */
/* CodeStitch Intermediate adaptation: charcoal service banner, lime card rules,
   white article sections and a pale quote sidebar. Evidence photos stay complete. */
.service-theme { color: var(--ink); background: var(--canvas); }
.service-theme.service-masthead { padding: clamp(60px,7.82vw,100px) 0; color: var(--white); background: #1c1c1c; border: 0; }
.service-theme .service-hero-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.service-theme .service-hero-copy { min-width: 0; }
.service-theme .service-hero-copy .eyebrow { display: inline-block; color:var(--primary); background:transparent; border: 0; border-radius: 0; padding: 0; font-weight:700; letter-spacing:.1em; }
.service-theme .service-hero-copy h1 { color: var(--white); font-size: clamp(36px,4vw,52px); font-weight:900; line-height: 1.13; letter-spacing: 0; margin: 16px 0 24px; max-width: 13em; text-wrap: balance; }
.service-theme .service-hero-summary { color: var(--white); font-size: 18px; line-height: 1.65; margin: 0 0 18px; max-width: 32em; }
.service-theme .service-property-context { color: var(--white); font-size: 16px; line-height: 1.65; margin: 0 0 28px; max-width: 37em; }
.service-theme .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.service-theme .hero-actions .button { min-height: 50px; }
.service-theme .hero-actions .button.secondary { color: var(--white); background: transparent; border:1px solid var(--white); }
.service-theme .hero-actions .button.secondary:hover { color:var(--ink); background:var(--white); border-color:var(--white); }
.service-theme .service-hero-photo { min-width: 0; margin: 0; padding: 0; overflow: visible; background: transparent; border: 0; border-radius: var(--radius); box-shadow: none; }
.service-theme .service-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio:auto; object-fit:contain; object-position: center; border-radius: var(--radius); filter: none; }
.service-theme .service-hero-photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding: 16px 0 0; color: var(--white); background: transparent; border: 0; font-size: 14px; line-height: 1.6; }
.service-theme .service-hero-photo figcaption a { color: var(--white); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.service-theme.service-overview { padding: clamp(60px,7.82vw,100px) 0; border-top: 0; }
.service-theme .service-overview-layout { display: grid; grid-template-columns: .95fr 1.05fr; align-items: start; gap: 64px; }
.service-theme .service-introduction { max-width: 36em; margin: 0; }
.service-theme .service-introduction .eyebrow { color: var(--secondary); margin-top: 0; }
.service-theme .service-introduction h2 { color: var(--ink); font-size: clamp(30px,3.2vw,42px); font-weight:900; line-height: 1.2; margin: 12px 0 24px; max-width: 16em; text-wrap: balance; }
.service-theme .service-introduction p:not(.eyebrow) { color: var(--muted); font-size: 18px; line-height: 1.65; margin: 0; }
.service-theme .service-check-grid { display: grid; grid-template-columns: 1fr; gap: 24px; min-width: 0; }
.service-theme .service-check-panel,
.service-theme .service-check-panel.service-inspection-panel { padding: 32px; border: 1px solid var(--line); border-top:5px solid var(--primary); border-radius: var(--radius); background: var(--panel-light); color: var(--ink-light); box-shadow: 0 8px 24px rgba(0,0,0,.04); }
.service-theme .service-check-panel h2 { color: var(--ink-light); font-size: 25px; font-weight:900; line-height: 1.2; margin: 0 0 18px; }
.service-theme .service-check-panel ul { padding-left: 20px; margin: 0; }
.service-theme .service-check-panel li { color: var(--muted); font-size: 17px; line-height: 1.65; margin-bottom: 10px; padding-left: 5px; }
.service-theme .service-check-panel li::marker { color: var(--ink-light); }
.service-theme .service-check-panel a { color: var(--secondary); }
.service-theme .service-check-panel li:last-child { margin-bottom: 0; }
.service-theme.service-detail-section { padding: clamp(60px,7.82vw,100px) 0; border-top: 1px solid var(--line); }
.service-theme .content-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: start; gap: 64px; }
.service-theme .prose { min-width: 0; max-width: 76ch; }
.service-theme .prose > h2:first-child,
.service-theme .prose > section:first-child > h2:first-child { margin-top: 0; }
.service-theme .prose h2 { color: var(--ink); font-size: clamp(27px,2.5vw,32px); font-weight:900; line-height: 1.2; margin-top: 48px; margin-bottom: 20px; padding: 0; border: 0; text-wrap: balance; }
.service-theme .prose h3 { color: var(--ink); font-size: 23px; font-weight:900; line-height: 1.3; }
.service-theme .prose p,.service-theme .prose li { color: var(--muted); font-size: 18px; line-height: 1.65; }
.service-theme .prose p.small { font-size: 15px; line-height: 1.75; }
.service-theme .prose li::marker { color: var(--muted); }
.service-theme .prose a:not(.button) { color: var(--secondary); }
.service-theme .aside { position: sticky; top: 120px; padding: 32px 24px; border: 1px solid var(--line); border-top:6px solid var(--primary); border-radius: var(--radius); background: var(--panel-light); color: var(--ink); box-shadow: none; }
.service-theme .aside h3 { color: var(--ink); font-size: 24px; font-weight:900; line-height: 1.2; margin: 0 0 16px; }
.service-theme .aside p { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0 0 20px; }
.service-theme .aside > a:not(.button) { display: block; padding: 14px 0; color: var(--secondary); font-size: 16px; font-weight: 700; line-height: 1.5; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; text-decoration: none; }
.service-theme .aside > a:not(.button):hover { text-decoration: underline; text-underline-offset: 5px; }
.service-theme .aside .button { display: flex; justify-content: center; width: 100%; margin-top: 22px; text-align: center; }
.service-theme .rfq-panel { padding: 32px; margin: 40px 0; background: var(--panel-light); color: var(--ink); border: 1px solid var(--line); border-left:5px solid var(--primary); border-radius: var(--radius); box-shadow: none; }
.service-theme .rfq-panel h2 { margin-top: 0; font-size: 28px; }
.service-theme .rfq-panel h3 { font-size: 22px; margin-top: 24px; }
.service-theme .rfq-panel .button { margin-top: 12px; }
.service-theme .page-links { gap: 12px; }
.service-theme .page-links a { background: var(--panel-light); color: var(--secondary); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; font-size: 16px; font-weight:700; line-height: 1.5; text-decoration: none; }
.service-theme .page-links a:hover { color: var(--ink); border-color: var(--primary); background: var(--primary); }
.service-theme a:focus-visible,.service-theme summary:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.service-theme .hero-actions .button:focus-visible { outline-color: var(--primary); }
.service-theme .page-links a:focus-visible { outline-color: var(--secondary); }
.service-theme.storm-triage-section { padding: 0 0 48px; }
.service-theme .storm-triage { display: grid; grid-template-columns: 1.1fr 1fr; align-items: start; gap: 48px; padding: 34px; color: var(--ink-light); background: var(--panel-light); border: 1px solid var(--line); border-top:5px solid var(--primary); border-radius: var(--radius); }
.service-theme .storm-triage h2 { color: var(--ink-light); font-size: 28px; font-weight:900; line-height: 1.2; margin: 10px 0 18px; }
.service-theme .storm-triage p,.service-theme .storm-triage li { color: var(--muted); font-size: 18px; line-height: 1.65; }
.service-theme .storm-triage a { color: var(--secondary); font-size: 17px; font-weight: 700; text-underline-offset: 5px; }
.service-theme .storm-triage-signals { padding-left: 28px; border-left: 1px solid var(--line-light); }
.service-theme.storm-triage-section + .service-overview { padding-top: 56px; padding-bottom: 64px; }
.service-theme .storm-workflow > .storm-step { gap: 24px; }
.service-theme .storm-step-index { background:var(--primary); color:var(--ink-light); border:1px solid var(--primary); border-radius: var(--radius); font-weight:900; }
.service-theme .storm-step-body h3 { margin-top: 4px; font-size: 24px; }
.service-theme .storm-step-body .storm-step-condition { color: var(--muted); font-size: 16px; }
.service-theme .storm-step-body .storm-step-result { border-left: 4px solid var(--primary); }
.service-theme .storm-step-result strong { color: var(--ink); }
.service-theme .storm-contents > a:not(.button) { display: flex; align-items: baseline; justify-content: space-between; }
.service-theme .storm-contents .small { font-size: 15px; line-height: 1.8; margin: 22px 0 0; }
html[lang^="zh"] .service-theme .service-hero-copy h1 { font-size: clamp(35px,3.8vw,49px); line-height: 1.4; letter-spacing: 0; }
html[lang^="zh"] .service-theme .service-introduction h2,
html[lang^="zh"] .service-theme .service-check-panel h2,
html[lang^="zh"] .service-theme .prose h2 { line-height: 1.5; letter-spacing: 0; }
@media (max-width: 1100px) {
 .service-theme .service-hero-layout,.service-theme .service-overview-layout { gap: 36px; }
 .service-theme .content-layout { grid-template-columns: minmax(0,1fr) 270px; gap: 36px; }
 .service-theme .aside { padding: 22px; }
 .service-theme .service-hero-summary { font-size: 18px; }
}
@media (max-width: 900px) {
 .service-theme .service-hero-layout { grid-template-columns: 1fr; gap: 32px; }
 .service-theme .service-hero-copy h1 { max-width: 18em; }
 .service-theme .service-hero-summary,.service-theme .service-property-context { max-width: 42em; }
 .service-theme .service-hero-photo img { aspect-ratio:auto; }
 .service-theme .service-overview-layout { grid-template-columns: 1fr; gap: 32px; }
 .service-theme .service-introduction { max-width: 45em; }
 .service-theme .service-check-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
 .service-theme .content-layout { grid-template-columns: 1fr; gap: 36px; }
 .service-theme .aside { position: static; }
 .service-theme .storm-triage { grid-template-columns: 1fr; gap: 24px; }
 .service-theme .storm-triage-signals { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line-light); }
 .service-theme .storm-contents { order: -1; }
}
@media (max-width: 680px) {
 .service-theme.service-masthead { padding: 32px 0 36px; }
 .service-theme .service-hero-copy h1 { font-size: 36px; line-height: 1.2; margin: 12px 0 20px; }
 html[lang^="zh"] .service-theme .service-hero-copy h1 { font-size: 34px; line-height: 1.4; }
 .service-theme .service-property-context { font-size: 17px; margin-bottom: 24px; }
 .service-theme .hero-actions { align-items: stretch; }
 .service-theme .hero-actions .button { flex: 1 1 100%; justify-content: center; }
 .service-theme .service-hero-photo img { aspect-ratio:auto; border-radius: var(--radius); }
 .service-theme .service-hero-photo figcaption { font-size: 13px; }
 .service-theme.service-overview,.service-theme.service-detail-section { padding: 44px 0; }
 .service-theme .service-introduction h2 { font-size: 28px; margin-bottom: 20px; }
 .service-theme .service-check-grid { grid-template-columns: 1fr; gap: 28px; }
 .service-theme .service-check-panel { padding: 24px; }
 .service-theme .service-check-panel h2 { font-size: 23px; }
 .service-theme .prose h2 { font-size: 27px; margin-top: 36px; }
 .service-theme .prose h3 { font-size: 22px; }
 .service-theme .rfq-panel { padding: 24px 20px; margin: 32px 0; }
 .service-theme .rfq-panel h2 { font-size: 26px; }
 .service-theme .rfq-panel .button { width: 100%; justify-content: center; }
 .service-theme.storm-triage-section { padding-bottom: 32px; }
 .service-theme .storm-triage { padding: 24px 20px; }
 .service-theme .storm-triage h2 { font-size: 25px; }
 .service-theme.storm-triage-section + .service-overview { padding-top: 40px; padding-bottom: 44px; }
 .service-theme .storm-workflow > .storm-step { grid-template-columns: 36px minmax(0,1fr); gap: 15px; }
 .service-theme .storm-step-index { width: 36px; height: 36px; }
 .service-theme .storm-step-body h3 { font-size: 22px; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
 .service-theme a { transition: none; }
}
@media (forced-colors: active) {
 .service-theme .aside,.service-theme .rfq-panel,.service-theme .storm-triage,.service-theme .page-links a { border: 1px solid CanvasText; }
}
@media print {
 .service-theme .service-hero-layout,.service-theme .service-overview-layout,.service-theme .content-layout { display: block; }
 .service-theme.service-masthead { background:#fff; color:#000; }
 .service-theme .service-hero-copy h1,.service-theme .service-hero-copy .eyebrow,.service-theme .service-hero-summary,.service-theme .service-property-context,.service-theme .service-hero-photo figcaption,.service-theme .service-hero-photo figcaption a { color:#000; }
 .service-theme .service-hero-photo img { max-height: none; }
 .service-theme .aside { position: static; margin-top: 24px; }
}


/* Source: contact.css */
/* CodeStitch Intermediate contact adaptation: clear white form and lime-accented pale sidebar.
   Existing local validation and explicitly unsent enquiry-draft behaviour stay unchanged. */
.contact-page { padding:64px 0 88px; background:var(--white); color:var(--ink); }
.contact-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); gap:clamp(40px,5vw,64px); align-items:start; }
.contact-main { min-width:0; }
.contact-heading h1 { font-size:clamp(36px,3.6vw,50px); font-weight:900; line-height:1.2; letter-spacing:0; color:var(--ink); margin:0 0 24px; }
body:lang(zh) .contact-heading h1 { font-size:clamp(34px,3.4vw,46px); line-height:1.4; }
.contact-heading p { font-size:18px; line-height:1.75; font-weight:400; margin:0 0 32px; max-width:65ch; color:var(--muted); }
.contact-page .contact-form { --field-border:#767676; padding:32px; margin:0; border:1px solid var(--line); border-radius:var(--radius); box-shadow:none; background:var(--white); color:var(--ink); color-scheme:light; }
.contact-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; row-gap:24px; }
.contact-form .field { display:flex; flex-direction:column; gap:0; min-width:0; }
.contact-form .field label { font-family:var(--font-interface); font-size:16px; font-weight:700; line-height:1.5; color:var(--ink); margin:0 0 10px; }
.contact-form .field label > span { font-size:13px; font-weight:400; color:var(--muted); }
.contact-form .field input,.contact-form .field textarea { width:100%; min-width:0; border:1px solid var(--field-border); background:var(--white); border-radius:4px; box-shadow:none; padding:14px 16px; color:var(--ink); font-family:var(--font-interface); font-size:18px; line-height:1.6; transition:border-color 180ms ease; }
.contact-form .field input { min-height:56px; }
.contact-fields > .field:nth-child(3) { grid-column:1 / -1; }
.contact-form .field input::placeholder,.contact-form .field textarea::placeholder { color:#585866; opacity:1; }
.contact-form .field input:hover,.contact-form .field textarea:hover { border-color:var(--secondary); }
.contact-form .field input:focus,.contact-form .field textarea:focus { border-color:var(--secondary); box-shadow:none; outline:3px solid var(--secondary); outline-offset:3px; }
.contact-form .field [aria-invalid=true] { border:2px solid #9f3131; }
.contact-form .field [aria-invalid=true]:focus { box-shadow:none; outline-color:#9f3131; }
.contact-form .error { min-height:0; padding-top:8px; margin-top:0; font-size:14px; line-height:1.6; color:#9f3131; font-weight:600; }
.contact-form .error:empty { display:none; }
.contact-message { grid-column:1 / -1; }
.contact-form .field textarea { min-height:184px; resize:none; }
.contact-form .contact-field-help { font-size:14px; line-height:1.75; margin:12px 0 0; color:var(--muted); }
.contact-form .contact-submit { min-height:54px; border-radius:0; padding:14px 28px; font-size:17px; font-weight:700; margin-top:28px; color:var(--cta-ink); background:var(--cta-bg); border-color:var(--cta-bg); box-shadow:none; }
.contact-form .contact-submit:hover { color:var(--cta-hover-ink); background:var(--cta-hover); border-color:var(--cta-hover); }
.contact-form .contact-submit:disabled,.contact-form .contact-submit:disabled:hover { color:var(--cta-ink); background:var(--cta-bg); border-color:var(--cta-bg); }
.contact-form .contact-submit:focus-visible { outline:3px solid var(--secondary); outline-offset:4px; }
.contact-delivery-help { font-size:16px; line-height:1.8; margin:20px 0 8px; max-width:70ch; color:var(--muted); }
.contact-delivery-help a { color:var(--secondary); font-weight:700; white-space:nowrap; text-underline-offset:4px; }
.contact-privacy { font-size:14px; line-height:1.75; margin:12px 0 0; color:var(--muted); }
.contact-privacy a { color:var(--secondary); text-underline-offset:4px; }
.contact-form a:hover { color:var(--ink); text-decoration-thickness:2px; }
.contact-form a:focus-visible { outline-color:var(--secondary); }
.contact-form .form-status { color:var(--ink); }
.contact-form .form-status:empty { margin:0; padding:0; min-height:0; }
.contact-main > noscript .contact-delivery-help,.contact-main > noscript .contact-delivery-help a { color:var(--ink); }
.contact-details { padding:30px 28px; min-width:0; border:1px solid var(--line); border-top:6px solid var(--accent); border-radius:var(--radius); background:var(--surface); color:var(--ink); box-shadow:none; }
.contact-detail-row { display:grid; grid-template-columns:42px minmax(0,1fr); gap:18px; align-items:start; color:var(--ink); text-decoration:none; padding:24px 0; border-bottom:1px solid var(--line); }
.contact-detail-row:first-child { padding-top:0; }
.contact-icon { color:var(--secondary); margin-top:3px; opacity:1; }
.contact-detail-row > span { display:flex; flex-direction:column; gap:5px; min-width:0; }
.contact-detail-row strong { font-family:var(--font-display); font-size:18px; font-weight:700; line-height:1.5; }
.contact-detail-row > span > span { font-size:17px; line-height:1.65; overflow-wrap:anywhere; }
.contact-detail-row small { font-size:14px; line-height:1.7; color:var(--muted); margin-top:3px; }
.contact-detail-row:hover,.contact-detail-row:hover .contact-icon { color:var(--secondary); opacity:1; }
.contact-detail-row:hover strong { text-decoration:underline; text-underline-offset:5px; }
.contact-detail-row:focus-visible { outline:3px solid var(--secondary); outline-offset:6px; border-radius:var(--radius); }
.contact-address { margin:24px 0 0; font-size:15px; line-height:1.75; color:var(--muted); }
.contact-address strong { font-size:16px; color:var(--ink); font-weight:700; }
.contact-address p { margin:6px 0; color:var(--muted); }
.contact-page .draft-panel { margin-top:28px; padding:28px; border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:var(--radius); background:var(--surface); color:var(--ink); }
.contact-page .draft-panel h2 { color:var(--ink); font-size:26px; font-weight:900; line-height:1.4; margin:0 0 12px; }
.contact-page .draft-panel p { color:var(--muted); }
.contact-page .draft-panel pre { color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:16px; line-height:1.7; }
.contact-page .draft-panel .button { border-radius:0; color:var(--cta-ink); background:var(--cta-bg); border-color:var(--cta-bg); }
.contact-page .draft-panel .button:hover { color:var(--cta-hover-ink); background:var(--cta-hover); border-color:var(--cta-hover); }
.contact-page .draft-panel .button.secondary { color:var(--secondary); background:transparent; border-color:var(--secondary); }
.contact-page .draft-panel .button.secondary:hover { color:var(--white); background:var(--secondary); border-color:var(--secondary); }
.contact-page .draft-panel .button:focus-visible,.contact-page .draft-panel:focus-visible { outline:3px solid var(--secondary); outline-offset:4px; }
.contact-page [hidden] { display:none !important; }
.contact-support { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 64px; margin-top:64px; padding:32px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); }
.contact-support h2 { font-size:28px; font-weight:900; line-height:1.3; margin:0 0 12px; color:var(--ink); }
.contact-support p { font-size:17px; line-height:1.75; margin:0; color:var(--muted); }
.contact-support-links { display:flex; flex-direction:column; align-items:stretch; min-width:0; }
.contact-support-links a { display:flex; justify-content:space-between; gap:16px; color:var(--secondary); font-size:16px; font-weight:700; line-height:1.6; text-decoration:none; padding:14px 0; border-bottom:1px solid var(--line); }
.contact-support-links a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.contact-support-links a:focus-visible { outline-color:var(--secondary); }
.contact-safety { grid-column:1 / -1; }
.contact-safety .notice { margin:0; font-size:15px; }
@media (max-width:1000px) { .contact-grid { grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr); gap:40px; } .contact-fields { grid-template-columns:1fr; gap:20px; } }
@media (max-width:760px) {
 .contact-page { padding:36px 0 64px; }
 .contact-grid { grid-template-columns:minmax(0,1fr); gap:32px; }
 .contact-heading p { margin-bottom:28px; font-size:17px; }
 .contact-details { padding:24px; }
 .contact-detail-row { padding:22px 0; }
 .contact-support { grid-template-columns:minmax(0,1fr); gap:22px; margin-top:44px; padding:24px; }
 .contact-form .contact-submit { width:100%; }
 .contact-page .contact-form { padding:24px 20px; }
 .contact-page .draft-panel { padding:20px; }
 .contact-page .draft-actions { display:flex; flex-wrap:wrap; }
 .contact-page .draft-actions .button { flex:1 1 160px; }
}
@media (max-width:380px) { .contact-heading h1 { font-size:32px; } body:lang(zh) .contact-heading h1 { font-size:31px; } .contact-page .contact-form,.contact-details,.contact-support { padding-inline:18px; } .contact-detail-row { grid-template-columns:34px minmax(0,1fr); gap:12px; } .contact-icon { width:34px; height:34px; } }
@media (prefers-reduced-motion:reduce) { .contact-form .field input,.contact-form .field textarea { transition:none; } }
@media (forced-colors:active) { .contact-form .field input:focus,.contact-form .field textarea:focus { outline:2px solid Highlight; box-shadow:none; } .contact-details,.contact-page .draft-panel { border:1px solid CanvasText; } .contact-icon { opacity:1; } }


/* Source: shell-theme.css */
/* CodeStitch Intermediate inner-page shell and compact charcoal information footer.
   Existing content, logo assets, URL graph and full-image behaviour are retained. */
.breadcrumb { align-items:center; gap:10px; padding-top:24px; padding-bottom:20px; font-size:14px; font-weight:400; line-height:1.6; color:var(--muted); }
.breadcrumb a { color:var(--secondary); text-decoration:none; }
.breadcrumb a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.breadcrumb a:focus-visible { outline-color:var(--secondary); }
.page-hero { padding:64px 0 72px; background:var(--surface); color:var(--ink); border:0; border-bottom:1px solid var(--line); }
.page-hero .page-hero-inner { display:block; max-width:960px; text-align:center; }
.page-hero .page-hero-heading { min-width:0; }
.page-hero .eyebrow { display:inline-block; margin:0 0 16px; padding:0; border:0; border-radius:0; background:transparent; color:var(--secondary); font-size:14px; font-weight:700; line-height:1.5; letter-spacing:.1em; }
.page-hero h1 { max-width:900px; margin:0 auto; font-size:clamp(36px,4vw,52px); line-height:1.2; font-weight:900; letter-spacing:0; color:var(--ink); text-wrap:balance; }
.page-hero .lead { max-width:740px; margin:24px auto 0; color:var(--muted); font-size:18px; line-height:1.7; font-weight:400; }
html[lang^=zh] .page-hero h1 { font-size:clamp(34px,3.8vw,48px); line-height:1.4; letter-spacing:0; }
.footer.intermediate-footer { padding:72px 0 28px; border:0; background:#1c1c1c; color:#fff; }
.footer.intermediate-footer .footer-grid { display:grid; grid-template-columns:1.15fr 1fr .95fr 1.15fr; align-items:start; gap:40px; }
.footer.intermediate-footer .footer-identity { min-width:0; }
.footer.intermediate-footer .logo { display:inline-flex; align-items:center; gap:12px; padding:0; margin:0; color:#fff; text-decoration:none; }
.footer.intermediate-footer .logo:hover { color:#fff; text-decoration:none; }
.footer.intermediate-footer .logo .brand-mark { display:block; width:64px; height:64px; flex:0 0 64px; object-fit:contain; border:0; border-radius:0; background:transparent; }
.footer.intermediate-footer .logo .brand-name,.footer.intermediate-footer .logo strong { display:block; margin:0; font-size:24px; font-weight:900; line-height:1.2; letter-spacing:-.025em; color:#fff; }
.footer.intermediate-footer .logo .brand-service,.footer.intermediate-footer .logo small { display:block; margin-top:6px; font-size:11px; font-weight:400; line-height:1.6; letter-spacing:0; text-transform:none; color:#ddd; }
.footer.intermediate-footer h3 { position:relative; margin:4px 0 28px; padding:0 0 14px; border:0; font-size:16px; line-height:1.5; font-weight:700; letter-spacing:.04em; color:#fff; }
.footer.intermediate-footer h3::after { content:''; position:absolute; bottom:0; left:0; width:64px; height:2px; background:var(--accent); }
.footer.intermediate-footer p { margin:20px 0 0; color:#ddd; font-size:15px; line-height:1.8; overflow-wrap:anywhere; }
.footer.intermediate-footer .footer-identity p + p { margin-top:16px; font-size:13px; line-height:1.8; }
.footer.intermediate-footer p.small { margin:-4px 0 12px; color:#ddd; font-size:14px; line-height:1.8; }
.footer.intermediate-footer a:not(.logo) { display:block; padding:6px 0; font-size:15px; font-weight:400; line-height:1.65; color:#fff; text-decoration:none; overflow-wrap:anywhere; transition:color 180ms ease; }
.footer.intermediate-footer a:not(.logo):hover { color:var(--accent); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.footer.intermediate-footer a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.footer.intermediate-footer .footer-base { display:flex; justify-content:space-between; align-items:start; gap:24px; margin-top:48px; padding-top:24px; border-top:1px solid #ffffff26; font-size:13px; line-height:1.7; color:#ddd; }
.footer.intermediate-footer .footer-base > span:last-child { max-width:52ch; text-align:right; }
/* Consistent Intermediate geometry for inherited shell components. */
.button,.button.secondary { border-radius:0; }
.page-links a,.guide-card,.review-card,.notice,.aside,.rfq-panel,.faq details { border-radius:var(--radius); }
.project-grid .portfolio-item.portfolio-item { border-radius:var(--radius); border:1px solid var(--line); }
.related-projects .project-story.project-story { border-radius:var(--radius); padding:28px; }
.about-overview .about-work-photo.about-work-photo { border:0; border-radius:var(--radius); padding:0; background:transparent; box-shadow:none; }
.about-overview .about-work-photo img { border-radius:var(--radius); }
@media (max-width:1000px) { .footer.intermediate-footer .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 40px; } }
@media (max-width:760px) {
 .breadcrumb { padding-top:20px; font-size:13px; }
 .page-hero { padding:44px 0 50px; }
 .page-hero .eyebrow { margin-bottom:16px; font-size:13px; }
 .page-hero h1 { font-size:36px; line-height:1.25; }
 html[lang^=zh] .page-hero h1 { font-size:34px; line-height:1.4; }
 .page-hero .lead { font-size:17px; line-height:1.75; max-width:64ch; margin-top:20px; }
 .footer.intermediate-footer { padding:52px 0 calc(90px + env(safe-area-inset-bottom)); }
 .footer.intermediate-footer .footer-grid { gap:34px 28px; }
 .footer.intermediate-footer .footer-base { display:block; margin-top:36px; padding-top:24px; }
 .footer.intermediate-footer .footer-base > span { display:block; }
 .footer.intermediate-footer .footer-base > span:last-child { margin-top:12px; text-align:left; }
 .related-projects .project-story.project-story { padding:22px; }
}
@media (max-width:480px) {
 .page-hero h1 { font-size:32px; }
 html[lang^=zh] .page-hero h1 { font-size:30px; }
 .footer.intermediate-footer .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 24px; }
 .footer.intermediate-footer .footer-identity,.footer.intermediate-footer .footer-grid > div:last-child { grid-column:1 / -1; }
 .footer.intermediate-footer .footer-identity p { max-width:46ch; }
 .footer.intermediate-footer h3 { font-size:15px; margin-bottom:22px; }
 .footer.intermediate-footer a:not(.logo) { font-size:14px; }
 .footer.intermediate-footer .logo .brand-mark { width:52px; height:52px; flex-basis:52px; }
 .footer.intermediate-footer .logo .brand-name { font-size:24px; }
}
@media (prefers-reduced-motion:reduce) { .footer.intermediate-footer a { transition:none; } }
@media (forced-colors:active) { .page-hero,.aside,.rfq-panel,.notice,.faq details { border:1px solid CanvasText; } .footer.intermediate-footer { background:Canvas; color:CanvasText; } .footer.intermediate-footer a,.footer.intermediate-footer p,.footer.intermediate-footer h3,.footer.intermediate-footer .logo strong,.footer.intermediate-footer .logo small,.footer.intermediate-footer .footer-base { color:CanvasText; } }
@media print { .page-hero { padding:24px 0; border:0; } .page-hero .lead { margin-top:18px; } .footer.intermediate-footer { display:none; } }


/* Source: photography.css */
/* CodeStitch Intermediate photograph adaptation. Retain complete original work
   photos, pale gallery frames and navy captions; no crop, tint or image overlay. */
.business-home .home-project-thumb img,
.project-grid .project-card-photos img,
.related-projects .story-images img,
.project-lead .comparison img,
.project-lead .detail-comparison img,
.project-photo-section .project-gallery img,
.about-overview .about-work-photo img,
.service-theme .service-hero-photo img,
.services-hub .hub-category-photo img,
.services-hub .hub-hero-photo img {
 display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;
 object-fit:contain;object-position:center;transform:none;filter:none;
}
.business-home .home-project-thumb,
.project-grid .project-card-photos figure,
.related-projects .story-images figure,
.project-lead .comparison figure,
.project-photo-section .project-gallery figure,
.about-overview .about-work-photo {
 height:auto;max-height:none;aspect-ratio:auto;overflow:visible;
}
.project-grid .project-card-photos,.related-projects .story-images,.project-lead .comparison,.project-photo-section .project-gallery{align-items:start}
.project-grid .project-card-photos{padding:16px 16px 0;gap:12px;background:var(--panel-light)}
.project-grid .portfolio-item{border-radius:var(--radius);overflow:visible;border:1px solid var(--line);border-top:5px solid var(--primary);background:var(--white);box-shadow:0 8px 24px rgba(0,0,0,.04)}
.project-grid .project-card-photos figure{margin:0;background:var(--panel-light)}
.project-grid .photo-stage{position:static;background:transparent;color:var(--secondary);padding:8px 0;font-size:13px;font-weight:700}
.related-projects .project-story{border-radius:var(--radius);padding:24px;border:1px solid var(--line);border-top:5px solid var(--primary);background:var(--white);color:var(--ink)}
.related-projects .story-images figcaption{color:var(--muted);background:transparent;font-size:14px;line-height:1.5}
.project-lead .comparison{gap:28px;padding:0;background:transparent;border:0;box-shadow:none}
.project-lead .comparison figure{background:var(--panel-light);color:var(--ink-light);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.project-lead .comparison figcaption{color:var(--secondary);background:transparent;padding:14px 4px 4px;font-size:14px;line-height:1.5}
.project-lead .detail-comparison img{background:transparent}
.project-photo-section .project-gallery{gap:28px}
.project-photo-section .project-gallery figure{border-radius:var(--radius);border:1px solid var(--line);padding:12px;background:var(--panel-light);color:var(--ink-light)}
.project-photo-section .project-gallery .gallery-photo{display:block;overflow:visible;cursor:zoom-in}
.project-photo-section .project-gallery figcaption{padding:14px 4px 4px;color:var(--secondary);background:transparent;font-size:14px;line-height:1.5}
.project-photo-section .project-gallery-details img{background:transparent}
.about-overview .about-work-photo{max-width:540px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;background:var(--panel-light);padding:12px}
.about-overview .about-work-photo figcaption{background:transparent;color:var(--secondary);padding:16px 4px 4px;font-size:14px;line-height:1.5}
.service-theme .service-hero-photo{max-width:500px;margin-inline:auto}
.project-grid .portfolio-item a:focus-visible,.related-projects .project-story a:focus-visible,.project-lead .comparison a:focus-visible,.project-photo-section .project-gallery a:focus-visible,.about-overview .about-work-photo a:focus-visible{outline:3px solid var(--secondary);outline-offset:4px}
.service-theme .service-hero-photo a:focus-visible,.services-hub .hub-hero-photo a:focus-visible{outline:3px solid var(--primary);outline-offset:4px}
@media(max-width:600px){.project-lead .comparison{gap:24px}.project-photo-section .project-gallery{gap:24px}.project-grid .project-card-photos{gap:10px;padding:12px 12px 0}.service-theme .service-hero-photo,.about-overview .about-work-photo{max-width:360px}}
@media print{.photo-open-label{display:none}.project-photo-section .project-gallery img,.service-theme .service-hero-photo img{max-height:none;height:auto}}


/* Source: photo-viewer.css */
.photo-open{display:block;width:100%;color:inherit;text-decoration:none;cursor:zoom-in}
.photo-open > img,.comparison .photo-open > img,.story-images .photo-open > img,.project-gallery .gallery-photo > img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:center;transform:none}
.photo-open:hover > img,.project-gallery .gallery-photo:hover > img{transform:none}
.photo-open-label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid currentColor;color:var(--action-blue);background:transparent;font-size:14px;font-weight:600;line-height:1.5}
.service-theme .service-hero-photo .photo-open-label,.services-hub .hub-hero-photo .photo-open-label{color:#fff}
.service-theme .service-hero-photo .photo-open:focus-visible,.services-hub .hub-hero-photo .photo-open:focus-visible{outline-color:#fff}
.photo-open:focus-visible,.project-gallery .gallery-photo:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.photo-viewer{box-sizing:border-box;width:min(1080px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow:auto;border:0;border-radius:4px;background:var(--canvas);color:var(--ink);box-shadow:0 24px 90px #0005}
.photo-viewer::backdrop{background:#000d}
.photo-viewer[open]{animation:ellis-photo-enter var(--motion-panel) var(--ui-ease) both}
.photo-viewer[open]::backdrop{animation:ellis-photo-backdrop var(--motion-fast) ease-out both}
@keyframes ellis-photo-enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes ellis-photo-backdrop{from{opacity:0}to{opacity:1}}
.photo-viewer-content{padding:20px}
.photo-viewer-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 16px;background:var(--canvas)}
.photo-viewer .photo-viewer-title{margin:0;color:var(--ink);font-size:22px;font-weight:700;line-height:1.35}
.photo-viewer-close{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px 14px;border:1px solid var(--action-blue);border-radius:4px;background:var(--canvas);color:var(--action-blue);font:inherit;font-size:15px;font-weight:600;line-height:1.4;cursor:pointer}
.photo-viewer-close:hover{background:var(--panel-light);color:var(--ink-light)}
.photo-viewer-close:active{transform:translateY(1px)}
.photo-viewer-figure{margin:0}
.photo-viewer .photo-viewer-image{display:block;width:auto;height:auto;max-width:100%;max-height:64vh;max-height:64dvh;margin:0 auto;aspect-ratio:auto;object-fit:contain;transform:none}
.photo-viewer-caption,.photo-viewer-status{margin:14px 0 0;color:var(--ink);font-size:15px;line-height:1.65;overflow-wrap:anywhere}
.photo-viewer-status{padding:18px 0}
.photo-viewer-original{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:var(--action-blue);font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.photo-viewer-original:hover{color:var(--action-hover);text-decoration-thickness:2px}
.photo-viewer-close:focus-visible,.photo-viewer-original:focus-visible{outline:3px solid var(--action-blue);outline-offset:4px}
.photo-viewer [hidden]{display:none!important}
.project-grid .photo-open-label,.project-lead .comparison .photo-open-label,.project-photo-section .project-gallery .photo-open-label{color:var(--ink-light)}
.project-grid .photo-open:focus-visible,.project-lead .comparison .photo-open:focus-visible,.project-photo-section .project-gallery .gallery-photo:focus-visible{outline-color:var(--ink-light)}
@media(max-width:600px){.photo-viewer{width:calc(100vw - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}.photo-viewer-content{padding:16px}.photo-viewer .photo-viewer-title{font-size:20px}}
@media(forced-colors:active){.photo-viewer,.photo-viewer-close{border:1px solid CanvasText}}
@media(prefers-reduced-motion:reduce){.photo-viewer[open],.photo-viewer[open]::backdrop{animation:none}}
@media print{.photo-viewer,.photo-open-label{display:none!important}}