/* Hallmark · genre: modern-minimal · macrostructure: Narrative Workflow
 * design-system: DESIGN.md · city buying guides · designed-as-app
 * Theme: existing Lomax homepage palette and typography.
 * Navigation/footer: existing site shell. Motion: native anchors only.
 * Pre-emit critique: P4 H4 E4 S4 R4 V4 (self-review, not acceptance).
 */
html:has(.city-page),body:has(.city-page) { overflow-x:clip; }
body:has(.city-page) > .global-nav { width:min(1180px,calc(100% - 36px)); margin-inline:auto; padding-inline:0; }
.city-page {
 --city-paper:#fff; --city-tint:#f0f5f8; --city-ink:#1d2934;
 --city-muted:#52616e; --city-line:#ced8e0; --city-navy:#304e64;
 --city-accent:#df8426; --city-on-dark:#dce6ed; --city-focus:#986019;
 --city-xs:8px; --city-sm:16px; --city-md:24px; --city-lg:32px;
 --city-xl:48px; --city-2xl:64px; --city-sticky:10;
 color:var(--city-ink); background:var(--city-paper);
 font-family:var(--font-body); font-size:16px; line-height:1.65;
}
.city-page * { min-width:0; }
.city-frame { width:min(1180px,calc(100% - 36px)); margin-inline:auto; }
.city-page h1,.city-page h2,.city-page h3 { font-family:var(--font-display); font-style:normal; font-weight:700; letter-spacing:-.035em; overflow-wrap:anywhere; }
.city-page h1 { font-size:clamp(34px,4.2vw,56px); line-height:1.08; max-width:900px; text-wrap:balance; }
.city-page h2 { font-size:clamp(27px,2.4vw,34px); line-height:1.18; max-width:760px; text-wrap:balance; }
.city-page h3 { font-size:19px; line-height:1.3; letter-spacing:-.02em; }
.city-page p { max-width:70ch; color:var(--city-muted); }
.city-page p+p { margin-top:var(--city-sm); }
.city-page a { text-underline-offset:4px; }
.city-page a:hover { text-decoration-thickness:2px; }
.city-page :is(a,summary):focus-visible { outline:3px solid var(--city-focus); outline-offset:5px; }
.city-page :is(.city-consult,.city-proof,.city-close) :is(a,summary):focus-visible { outline-color:var(--city-accent); }
.city-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 20px; border:1px solid var(--city-navy); border-radius:4px; background:var(--city-navy); color:var(--city-paper); font-size:15px; font-weight:700; line-height:1.3; white-space:nowrap; text-decoration:none; }
.city-button:hover { background:var(--city-ink); border-color:var(--city-ink); }
.city-button:active { transform:translateY(1px); }
.city-button--light { background:var(--city-paper); border-color:var(--city-paper); color:var(--city-navy); }
.city-button--light:hover { color:var(--city-ink); background:var(--city-tint); border-color:var(--city-tint); }
.city-hero { padding-top:var(--city-md); padding-bottom:var(--city-xl); }
.city-hero-lede { margin-top:var(--city-sm); font-size:18px; line-height:1.6; max-width:780px!important; }
.city-hero-action { margin-top:var(--city-md); }
.city-hero-stage { display:grid; margin-top:var(--city-lg); }
.city-hero-photo { background:var(--city-tint); }
.city-hero-photo img { width:100%; height:230px; object-fit:cover; }
.city-consult { padding:var(--city-md); background:var(--city-navy); color:var(--city-paper); border-top:4px solid var(--city-accent); }
.city-consult h2 { font-size:25px; }
.city-consult p { color:var(--city-on-dark); margin-top:12px; font-size:15px; }
.city-consult ul { padding:0; margin:var(--city-sm) 0 var(--city-md); list-style:none; }
.city-consult li { padding-block:6px; font-size:15px; }
.city-consult li::before { content:'✓'; margin-right:10px; color:var(--city-paper); }
.city-consult .city-button { width:100%; }
.city-consult .city-consult-phone { display:block; text-align:center; padding-top:var(--city-sm); font-size:15px; }
.city-credentials { display:flex; flex-wrap:wrap; column-gap:var(--city-lg); row-gap:var(--city-xs); margin-top:var(--city-sm); color:var(--city-muted); font-size:13px; }
.city-credentials span { display:flex; align-items:center; gap:var(--city-xs); }
.city-credentials span::before { content:''; width:5px; height:5px; background:var(--city-accent); }
.city-layout { display:grid; gap:var(--city-lg); align-items:start; }
.city-index { border-block:1px solid var(--city-line); padding-block:var(--city-xs); }
.city-index summary { font-weight:700; padding:12px 0; cursor:pointer; }
.city-index nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding-bottom:var(--city-xs); gap:0 var(--city-sm); }
.city-index > nav { display:none; }
.city-index nav a { display:flex; align-items:center; min-height:44px; font-size:14px; text-decoration:none; color:var(--city-muted); }
.city-index nav a:hover { color:var(--city-ink); text-decoration:underline; }
.city-section { padding-bottom:var(--city-lg); scroll-margin-top:var(--city-md); }
.city-section+.city-section { padding-top:var(--city-lg); border-top:1px solid var(--city-line); }
.city-section > h2+p { margin-top:var(--city-sm); }
.city-service-list { margin-top:var(--city-md); }
.city-service { padding-block:var(--city-md); display:grid; gap:var(--city-xs); border-bottom:1px solid var(--city-line); }
.city-service:last-child { border-bottom:0; padding-bottom:0; }
.city-service h3 a { text-decoration:none; }
.city-service h3 a:hover { text-decoration:underline; }
.city-service p { font-size:16px; }
.city-proof { display:grid; gap:var(--city-md); background:var(--city-navy); padding:var(--city-lg) var(--city-md); color:var(--city-paper); margin-top:var(--city-md); }
.city-proof-mark { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:var(--city-sm); }
.city-proof-mark strong { display:block; font-size:80px; font-weight:700; line-height:1; letter-spacing:-.07em; }
.city-proof-mark span { color:var(--city-on-dark); font-size:15px; }
.city-proof-mark--name strong { font-size:28px; letter-spacing:-.04em; line-height:1.15; max-width:220px; }
.city-proof blockquote { margin:0; font-size:clamp(22px,2vw,27px); line-height:1.4; font-weight:500; letter-spacing:-.025em; }
.city-proof blockquote p { color:var(--city-paper); }
.city-proof figcaption { margin-top:var(--city-sm); font-size:14px; color:var(--city-on-dark); }
.city-proof-copy { grid-column:1/-1; border-top:1px solid var(--city-on-dark); padding-top:var(--city-md); }
.city-proof-copy p { color:var(--city-on-dark); font-size:15px; }
.city-proof-copy a { display:inline-flex; align-items:center; min-height:44px; margin-top:var(--city-xs); font-weight:700; font-size:15px; }
.city-specimens { display:grid; margin-top:var(--city-md); background:var(--city-tint); }
.city-specimen { display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--city-sm); padding:var(--city-md) var(--city-sm); border-bottom:1px solid var(--city-line); }
.city-specimen:last-child { border:0; }
.city-specimen img { width:100%; height:140px; object-fit:contain; mix-blend-mode:multiply; }
.city-specimen p { margin-top:var(--city-xs); font-size:15px; }
.city-specialty { margin-top:var(--city-md); }
.city-specialty h3 { margin-bottom:var(--city-xs); }
.city-glass { display:grid; gap:var(--city-md); margin-top:var(--city-md); }
.city-glass article { padding-left:var(--city-sm); border-left:3px solid var(--city-accent); }
.city-glass p { margin-top:var(--city-xs); font-size:15px; }
.city-rating { padding:var(--city-md); background:var(--city-tint); margin-top:var(--city-md); }
.city-rating h3 { margin-bottom:var(--city-xs); }
.city-rating p { font-size:15px; }
.city-costs { width:100%; border-collapse:collapse; margin-top:var(--city-md); font-size:15px; }
.city-costs caption { text-align:left; font-weight:700; font-size:17px; margin-bottom:var(--city-sm); }
.city-costs th,.city-costs td { padding:var(--city-sm) 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--city-line); }
.city-costs thead { background:var(--city-navy); color:var(--city-paper); }
.city-costs tbody th { width:30%; color:var(--city-ink); font-weight:700; }
.city-costs td { color:var(--city-muted); }
.city-financing { margin-top:var(--city-md); padding:var(--city-md); background:var(--city-tint); display:grid; gap:var(--city-sm); }
.city-financing p { margin-top:var(--city-xs); font-size:15px; }
.city-financing a { font-size:15px; font-weight:700; min-height:44px; display:inline-flex; align-items:center; }
.city-install-layout { display:grid; gap:var(--city-lg); margin-top:var(--city-md); }
.city-steps { list-style:none; padding:0; margin:0; counter-reset:install; }
.city-steps li { position:relative; padding:0 0 var(--city-lg) 48px; counter-increment:install; }
.city-steps li:last-child { padding-bottom:0; }
.city-steps li::before { content:counter(install,decimal); position:absolute; left:0; top:0; color:var(--city-navy); font-weight:700; font-size:16px; border-top:3px solid var(--city-accent); padding-top:3px; line-height:1.4; }
.city-steps p { font-size:15px; margin-top:var(--city-xs); }
.city-prepare { padding:var(--city-md); background:var(--city-tint); align-self:start; }
.city-prepare ul { margin:var(--city-sm) 0 0; padding-left:18px; }
.city-prepare li { padding-bottom:var(--city-sm); font-size:15px; color:var(--city-muted); }
.city-prepare li:last-child { padding-bottom:0; }
.city-door-feature { display:grid; margin-top:var(--city-md); background:var(--city-tint); }
.city-door-feature img { width:100%; height:230px; object-fit:cover; }
.city-door-feature div { padding:var(--city-md); }
.city-door-feature p { font-size:15px; margin-top:var(--city-sm); }
.city-door-feature a { display:inline-flex; min-height:44px; align-items:center; margin-top:var(--city-xs); font-weight:700; font-size:15px; }
.city-faq { margin-top:var(--city-md); }
.city-faq details { border-bottom:1px solid var(--city-line); }
.city-faq summary { position:relative; padding:20px 36px 20px 0; font-size:17px; font-weight:600; line-height:1.4; cursor:pointer; list-style:none; }
.city-faq summary::-webkit-details-marker { display:none; }
.city-faq summary::after { content:'+'; position:absolute; right:4px; top:15px; color:var(--city-navy); font-size:26px; font-weight:400; }
.city-faq details[open] summary::after { content:'−'; }
.city-faq details[open] summary { padding-bottom:12px; }
.city-faq details p { padding-bottom:var(--city-md); font-size:15px; }
.city-service-area { padding:var(--city-md); background:var(--city-tint); margin-top:var(--city-lg); }
.city-service-area p { margin-top:var(--city-xs); font-size:15px; }
.city-close { background:var(--city-navy); color:var(--city-paper); padding:var(--city-lg); margin-block:var(--city-sm) var(--city-xl); display:grid; gap:var(--city-md); }
.city-close h2 { font-size:clamp(28px,3vw,38px); }
.city-close p { color:var(--city-on-dark); font-size:16px; margin-top:var(--city-sm); }
.city-close-actions { display:flex; flex-direction:column; align-items:flex-start; gap:var(--city-sm); }
.city-close-actions > a:not(.city-button) { display:inline-flex; min-height:44px; align-items:center; font-size:15px; }
@media(min-width:640px) {
 body:has(.city-page) > .global-nav { width:min(1180px,calc(100% - 64px)); }
 .city-frame { width:min(1180px,calc(100% - 64px)); }
 .city-hero { padding-top:var(--city-lg); }
 .city-hero-action { display:none; }
 .city-hero-stage { grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); }
 .city-hero-photo { position:relative; min-height:350px; }
 .city-hero-photo img { position:absolute; inset:0; height:100%; }
 .city-consult { padding:var(--city-lg); border-top:0; border-left:4px solid var(--city-accent); }
 .city-service { grid-template-columns:180px minmax(0,1fr); gap:var(--city-md); }
 .city-specimens { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .city-specimen { display:block; padding:var(--city-md); border-bottom:0; border-right:1px solid var(--city-line); }
 .city-specimen img { height:170px; margin-bottom:var(--city-md); }
 .city-proof { grid-template-columns:minmax(130px,.55fr) minmax(0,1.45fr); padding:var(--city-lg); gap:var(--city-lg); }
 .city-proof-mark { display:block; }
 .city-proof-mark span { display:block; margin-top:var(--city-sm); }
 .city-glass { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--city-lg); }
 .city-door-feature { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .city-door-feature img { height:100%; min-height:300px; }
 .city-door-feature div { padding:var(--city-lg); }
 .city-close-actions { flex-direction:row; align-items:center; }
}
@media(min-width:1000px) {
 .city-layout { grid-template-columns:178px minmax(0,1fr); gap:var(--city-xl); }
 .city-index { position:sticky; top:var(--city-md); z-index:var(--city-sticky); border:0; padding:0; }
 .city-index summary { display:none; }
 .city-index > nav { display:grid!important; grid-template-columns:minmax(0,1fr); padding:0; }
 .city-index > details { display:none; }
 .city-index::before { content:'On this page'; display:block; margin-bottom:var(--city-sm); font-size:13px; font-weight:700; }
 .city-index nav a { border-left:2px solid var(--city-line); padding-left:var(--city-sm); min-height:48px; }
 .city-index nav a:hover,.city-index nav a:focus-visible { border-left-color:var(--city-accent); }
 .city-index::details-content { display:block; }
 .city-section { padding-bottom:var(--city-xl); }
 .city-section+.city-section { padding-top:var(--city-xl); }
 .city-install-layout { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
 .city-financing { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
 .city-close { grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:var(--city-xl); }
 .city-close-actions { flex-direction:column; align-items:stretch; text-align:center; }
 .city-close-actions > a:not(.city-button) { justify-content:center; }
}
@media(prefers-reduced-motion:reduce) {
 html:has(.city-page) { scroll-behavior:auto; }
 .city-page .city-button:active { transform:none; }
}