/* Paint correction page: the ceramic page stylesheet (same design system) plus a few page components at the end. */
:root { --hairline:rgba(255,255,255,.13); --copy:#b8b8b8; }
body { overflow-x:clip; }
a { color:inherit; text-underline-offset:5px; }
button, input { font:inherit; }
button { color:inherit; }
:focus-visible { outline:2px solid var(--white); outline-offset:5px; }
[hidden] { display:none!important; }
[id] { scroll-margin-top:96px; }
.skip-link { position:fixed; top:10px; left:20px; z-index:200; padding:12px 20px; color:#060606; background:#fafafa; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.nav { background:rgba(6,6,6,.96); }
.nav-links a { color:#b8b8b8; }
.nav-links a, .footer-links a { display:inline-flex; align-items:center; min-height:44px; }
.nav-links { gap:28px; }
.nav-links .nav-cta { color:var(--black); }
.mobile-toggle { min-width:44px; min-height:44px; }
.nav-logo { position:relative; z-index:102; }
.wrap { max-width:1400px; margin-inline:auto; padding-inline:clamp(20px,4vw,48px); }
.section { padding-block:clamp(76px,9vw,128px); }
.rule { border-top:1px solid var(--hairline); }
.eyebrow { font-size:.6875rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--platinum); margin-bottom:18px; }
h1,h2,h3 { font-family:var(--font-display); }
h2 { font-size:clamp(2rem,4.2vw,3.75rem); line-height:1.08; letter-spacing:-.04em; font-weight:500; }
h3 { font-size:1.25rem; line-height:1.3; font-weight:500; letter-spacing:-.02em; }
p { color:var(--copy); }
.lede { font-size:clamp(1rem,1.3vw,1.125rem); line-height:1.8; max-width:560px; }
.section-heading { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:end; margin-bottom:48px; }
.section-heading .lede { justify-self:end; max-width:440px; }
.text-link { display:inline-flex; align-items:center; gap:16px; min-height:44px; font-size:.875rem; font-weight:500; }
.text-link::after { content:'↗'; text-decoration:none; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.btn { min-height:52px; justify-content:center; line-height:1.4; }
.breadcrumb { padding-top:98px; font-size:.75rem; color:var(--copy); }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.breadcrumb li:not(:last-child)::after { content:'/'; margin-left:12px; color:#858585; }
.breadcrumb a { display:inline-flex; align-items:center; min-height:32px; text-decoration:none; }
.hero { position:relative; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1fr 1.03fr; align-items:center; gap:40px; padding-top:42px; padding-bottom:60px; min-height:690px; }
.hero-copy { padding-block:18px; position:relative; z-index:1; }
.hero h1 { font-size:clamp(3.25rem,5.7vw,5.6rem); font-weight:600; letter-spacing:-.065em; line-height:1.01; }
.hero h1 .professional { display:block; font-size:.75rem; font-weight:500; letter-spacing:.18em; line-height:1.6; text-transform:uppercase; color:var(--platinum); margin-bottom:20px; }
.hero h1 .location { display:block; font-size:clamp(1.4rem,2.25vw,2.125rem); font-weight:400; letter-spacing:-.03em; margin-top:18px; color:var(--platinum); }
.hero-summary { margin-top:28px; max-width:560px; padding:20px 22px; border:1px solid var(--hairline); border-radius:10px; }
.hero-summary p { font-size:.875rem; line-height:1.7; }
.hero-summary p+p { margin-top:12px; }
.hero-summary strong { color:var(--white); font-weight:600; }
.hero-summary a { color:var(--white); text-decoration:underline; }
.hero-mantra { margin-top:32px; margin-bottom:12px; color:var(--white); font-size:1.125rem; }
.hero-description { max-width:450px; font-size:1rem; line-height:1.75; }
.hero-note { font-size:.75rem; margin-top:20px; color:#aaa; }
.hero-figure { position:relative; align-self:stretch; min-height:580px; border-radius:12px; overflow:hidden; background:var(--dark); }
.hero-figure picture,.hero-figure img { width:100%; height:100%; position:absolute; inset:0; }
.hero-figure img { object-fit:cover; object-position:50% 67%; }
.hero-figure::after { content:''; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.75)); pointer-events:none; }
.hero-figure figcaption { position:absolute; z-index:1; bottom:26px; left:28px; right:28px; display:flex; justify-content:space-between; gap:16px; font-size:.625rem; text-transform:uppercase; letter-spacing:.16em; color:#eee; }
.trust-strip { background:var(--dark); border-block:1px solid var(--hairline); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); list-style:none; padding-block:25px; gap:20px; }
.trust-grid li { font-size:.75rem; color:var(--platinum); display:flex; align-items:center; gap:12px; }
.trust-grid li::before { content:'+'; color:var(--white); font-size:1rem; }
.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.benefit { padding-top:28px; border-top:1px solid var(--hairline); }
.benefit-num { display:block; color:#aaa; font-size:.75rem; margin-bottom:30px; }
.benefit p { margin-top:12px; font-size:.9375rem; max-width:350px; }
.boundary { margin-top:40px; padding:20px 24px; border:1px solid var(--hairline); border-radius:10px; font-size:.875rem; }
.boundary strong { color:var(--white); font-weight:500; }
.prep-section { background:var(--dark); }
.prep-intro { max-width:700px; }
.prep-intro p:last-child { margin-top:24px; }
.prep-layout { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px,5vw,80px); align-items:center; margin-top:48px; }
.comparison-photo { overflow:hidden; position:relative; aspect-ratio:1.36; background:#202020; border-radius:12px; }
/* The two views are the unretouched top/bottom halves of one existing composite.
   CSS masks its white margins; the original source is preserved in the bundle. */
.comparison-photo img { position:absolute; width:173.61%; max-width:none; height:200%; left:-36.8%; top:0; }
.comparison-photo.corrected img { top:-100%; }
.photo-label { position:absolute; left:20px; bottom:20px; padding:8px 14px; border-radius:50px; background:rgba(6,6,6,.9); color:#fff; font-size:.6875rem; text-transform:uppercase; letter-spacing:.13em; }
.prep-visuals { display:grid; gap:20px; }
.prep-visuals.is-interactive { display:block; }
.prep-visuals figcaption { font-size:.75rem; color:#aaa; padding-top:12px; }
.prep-visuals figure + figure { margin-top:0; }
.prep-steps { display:grid; gap:0; }
.prep-step { border-top:1px solid var(--hairline); }
.prep-step:last-child { border-bottom:1px solid var(--hairline); }
.prep-step button { display:flex; gap:20px; width:100%; background:none; border:0; text-align:left; cursor:pointer; padding:22px 0; align-items:center; }
.prep-step button[aria-pressed=true] { color:var(--white); }
.prep-step button[aria-pressed=false] { color:#aaa; }
.prep-step button span { font-size:.75rem; font-weight:400; color:#aaa; }
.prep-step button strong { font-size:1.2rem; font-weight:500; }
.prep-step button::after { content:'↗'; margin-left:auto; font-size:1.125rem; }
.prep-step p { padding:0 0 24px 38px; font-size:.9375rem; }
.prep-footnote { margin-top:24px; font-size:.8125rem; }
.coating-diagram { min-height:100%; aspect-ratio:1.36; display:flex; flex-direction:column; justify-content:center; padding:32px; border:1px solid var(--hairline); border-radius:12px; background:#141414; }
.coating-diagram .eyebrow { margin-bottom:44px; }
.layer { padding:17px 0; display:flex; justify-content:space-between; gap:20px; border-top:1px solid #727272; font-size:.75rem; }
.layer:first-of-type { border-top:3px solid var(--platinum-bright); color:#fff; }
.layer:last-of-type { color:#aaa; }
.diagram-note { font-size:.75rem; margin-top:35px; }
.process-layout { display:grid; grid-template-columns:.8fr 1.4fr; gap:clamp(40px,6vw,88px); align-items:start; }
.process-image { margin-top:32px; }
.process-image img { aspect-ratio:4/5; object-fit:cover; border-radius:12px; }
.process-image figcaption { font-size:.75rem; margin-top:12px; color:#aaa; }
.process-grid { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.process-step { border-top:1px solid var(--hairline); padding-top:20px; }
.process-num { font-size:3rem; line-height:1; color:#8e8e8e; letter-spacing:-.06em; margin-bottom:22px; }
.process-step p:last-child { font-size:.875rem; margin-top:12px; }
.package-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.package { border:1px solid var(--hairline); border-radius:16px; background:var(--dark); padding:32px; display:flex; flex-direction:column; }
.package:last-child { border-color:#8e8e8e; }
.package-index { color:#aaa; font-size:.6875rem; letter-spacing:.15em; margin-bottom:32px; }
.package h3 { font-size:1.875rem; margin-bottom:16px; }
.package-desc { font-size:.9375rem; }
.package ul { list-style:none; margin:28px 0; border-top:1px solid var(--hairline); padding-top:22px; }
.package li { font-size:.8125rem; color:#ccc; margin-bottom:12px; padding-left:16px; position:relative; }
.package li::before { content:'·'; position:absolute; left:0; }
.package .btn { margin-top:auto; width:100%; }
.package-note { max-width:760px; font-size:.8125rem; margin-top:26px; }
.compare-section { background:var(--dark); }
.compare-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.compare-card { border-top:1px solid var(--hairline); padding-top:24px; }
.compare-card h3 { font-size:1.5rem; }
.compare-card .category { color:#aaa; font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase; margin-top:12px; margin-bottom:24px; }
.compare-card dl { display:grid; gap:18px; }
.compare-card dt { color:#f0f0f0; font-size:.8125rem; }
.compare-card dd { font-size:.875rem; color:var(--copy); margin-top:4px; }
.editorial-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,88px); align-items:center; }
.editorial-photo img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.editorial-photo figcaption { color:#aaa; font-size:.75rem; margin-top:12px; }
.editorial-copy .lede { margin-top:24px; }
.surface-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:44px; }
.surface-grid article { padding-top:24px; border-top:1px solid var(--hairline); }
.surface-grid p { font-size:.875rem; margin-top:12px; }
.pnw-points { display:grid; gap:22px; margin-top:28px; }
.pnw-points h3 { font-size:1rem; margin-bottom:7px; }
.pnw-points p { font-size:.875rem; }
.review-band { border-block:1px solid var(--hairline); }
.review-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.review-grid blockquote { font-size:clamp(1.375rem,2.5vw,2rem); line-height:1.5; letter-spacing:-.02em; }
.review-grid figcaption { margin-top:22px; color:#b8b8b8; font-size:.8125rem; }
.review-context { margin-top:28px; font-size:.75rem; }
.faq-layout { display:grid; grid-template-columns:.75fr 1.3fr; gap:80px; align-items:start; }
.faq-intro p.lede { margin-top:24px; }
.faq-list details { border-top:1px solid var(--hairline); }
.faq-list details:last-child { border-bottom:1px solid var(--hairline); }
.faq-list summary { list-style:none; cursor:pointer; padding:22px 30px 22px 0; font-size:.9375rem; position:relative; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:'+'; position:absolute; right:2px; top:20px; font-size:1.25rem; }
.faq-list details[open] summary::after { content:'−'; }
.faq-list details p { padding:0 28px 24px 0; font-size:.875rem; line-height:1.8; }
.area-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.area-layout .lede { margin-top:24px; }
.area-groups { display:grid; gap:20px; }
.area-groups dt { color:var(--white); font-size:.875rem; }
.area-groups dd { color:var(--copy); font-size:.875rem; margin-top:6px; }
.location-card { border-top:1px solid var(--hairline); padding-top:22px; margin-top:26px; font-size:.8125rem; }
.location-card address { font-style:normal; margin-top:8px; color:var(--copy); }
.cta-section { padding-block:clamp(80px,11vw,150px); text-align:center; background:var(--dark); border-top:1px solid var(--hairline); }
.cta-section h2 { font-size:clamp(2.7rem,5.5vw,5rem); max-width:820px; margin-inline:auto; }
.cta-section .lede { margin:26px auto 0; max-width:630px; }
.cta-section .actions { justify-content:center; margin-top:32px; }
.cta-contact { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:28px; }
.cta-contact a { font-size:.8125rem; min-height:44px; display:inline-flex; align-items:center; }
.footer-brand-text,.footer-links a,.footer-links span,.footer-bottom,.footer-bottom a { color:#aaa; }
.footer-heading { color:#bbb; }
.footer-links { gap:0; }
.footer-bottom-links { display:flex; gap:24px; }
.footer address { font-style:normal; color:#aaa; font-size:.8125rem; padding-top:10px; }
.float-cta { padding-bottom:max(14px,env(safe-area-inset-bottom)); }
.float-cta .btn { min-height:48px; }
.float-cta[hidden] { display:none; }
@media(min-width:769px) { .hero-copy .btn { padding-inline:24px; } }
/* The answer-first summary makes the hero copy taller; keep the photo tile at its original size instead of stretching it. */
@media(min-width:769px) { .hero-figure { align-self:start; height:min(690px,86vh); } }
@media(max-width:1100px) { .nav-links { gap:18px; } .nav-links a { font-size:.6875rem; } .hero-grid { gap:26px; } .hero-figure { min-height:560px; } .package { padding:26px; } }
@media(max-width:1024px) { .section-heading { gap:40px; } .process-layout { grid-template-columns:1fr 1.25fr; gap:36px; } .process-grid { gap:30px; } .faq-layout { gap:40px; } .package-grid { gap:14px; } .area-layout { gap:40px; } }
@media(max-width:768px) {
 body { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
 .nav-links { gap:18px; }
 .nav-links.open { justify-content:flex-start; padding-top:110px; overflow-y:auto; padding-bottom:110px; }
 .nav-links.open a { font-size:1rem; }
 .breadcrumb { padding-top:86px; font-size:.625rem; }
 .hero-grid { grid-template-columns:1fr; padding-top:24px; padding-bottom:32px; gap:30px; min-height:0; }
 .hero-copy { padding:0; }
 .hero h1 { font-size:clamp(3rem,12vw,5rem); }
 .hero h1 .professional { font-size:.625rem; margin-bottom:16px; }
 .hero h1 .location { font-size:1.4rem; margin-top:14px; }
 .hero-summary { margin-top:22px; padding:16px 18px; }
 .hero-summary p { font-size:.8125rem; }
 .hero-mantra { margin-top:24px; }
 .hero-description { font-size:.9375rem; }
 .hero .actions { flex-direction:column; margin-top:22px; }
 .hero .actions .btn { width:100%; }
 .hero-note { margin-top:14px; }
 .hero-figure { min-height:0; height:auto; aspect-ratio:4/3; }
 .hero-figure img { object-position:50% 66%; }
 .hero-figure figcaption { left:18px; bottom:18px; right:18px; font-size:.5625rem; }
 .trust-grid { grid-template-columns:1fr 1fr; gap:18px 12px; padding-block:22px; }
 .trust-grid li { font-size:.6875rem; gap:8px; }
 .section-heading,.prep-layout,.process-layout,.editorial-row,.faq-layout,.area-layout { grid-template-columns:1fr; gap:30px; }
 .section-heading .lede { justify-self:start; }
 .section-heading { margin-bottom:34px; }
 .benefits { grid-template-columns:1fr; gap:28px; }
 .benefit { display:grid; grid-template-columns:30px 1fr; gap:8px 18px; padding-top:24px; }
 .benefit-num { grid-row:1/3; margin:3px 0 0; }
 .benefit p { margin:0; grid-column:2; max-width:none; }
 .boundary { padding:18px; }
 .prep-layout { margin-top:34px; }
 .prep-steps { order:-1; }
 .prep-step button { padding-block:18px; }
 .prep-step p { font-size:.875rem; padding-left:35px; }
 .process-layout { gap:36px; }
 .process-image { display:none; }
 .process-grid { gap:32px 24px; }
 .process-num { font-size:2.5rem; }
 .process-step h3 { font-size:1.0625rem; }
 .package-grid,.compare-grid,.surface-grid { grid-template-columns:1fr; gap:24px; }
 .package { padding:28px; }
 .package-index { margin-bottom:18px; }
 .package ul { margin-block:22px; }
 .compare-card dl { grid-template-columns:1fr 1fr; gap:16px; }
 .compare-card dl > div:last-child { grid-column:1/-1; }
 .review-grid { grid-template-columns:1fr; gap:40px; }
 .review-grid blockquote { font-size:1.375rem; }
 .cta-section .actions { flex-direction:column; }
 .cta-section .actions .btn { width:100%; }
 .cta-contact { flex-direction:column; align-items:center; gap:4px; }
 .footer-bottom a { display:inline-flex; min-height:44px; align-items:center; }
 .coating-diagram { padding:26px; }
 .coating-diagram .eyebrow { margin-bottom:26px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
@media print { .nav,.float-cta,.skip-link { display:none; } body { padding:0; } .hero-grid { min-height:0; } }
/* Keep the mobile preparation selector adjacent to its changing visual. */
@media(max-width:768px) {
 .prep-layout > div:last-child { display:contents; }
 .prep-steps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; order:-1; }
 .prep-step,.prep-step:last-child { border:0; border-bottom:1px solid #555; }
 .prep-step:has(button[aria-pressed=true]) { border-bottom:2px solid #fafafa; }
 .prep-step button { min-height:66px; padding:12px 0; gap:0; }
 .prep-step button strong { font-size:.8125rem; line-height:1.4; }
 .prep-step button span,.prep-step button::after,.prep-step p { display:none; }
 .prep-visuals.is-interactive { min-height:max(350px,calc((100vw - 40px) / 1.36 + 80px)); }
 .prep-footnote { margin-top:0; }
 .coating-diagram { min-height:280px; padding:20px; }
 .coating-diagram .eyebrow { margin-bottom:20px; }
 .layer { padding:12px 0; }
 .diagram-note { margin-top:20px; }
}
.prep-layout > * { min-width:0; }
.coating-diagram { width:100%; }
@media(max-width:768px) { .prep-layout { grid-template-columns:minmax(0,1fr); } }
/* Let editorial crops follow their responsive width, not HTML fallback height. */
.process-image img,.editorial-photo img { width:100%; height:auto; }
.paint-layer-figure { margin:32px 0 0; border:1px solid rgba(255,255,255,.12); border-radius:16px; overflow:hidden; background:#060606; }
.paint-layer-figure picture,.paint-layer-figure img { display:block; width:100%; height:auto; }
.paint-layer-figure figcaption { padding:18px 24px 24px; color:#bbb; font-size:.875rem; line-height:1.7; }
.paint-layer-notes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:32px; }
.paint-layer-notes h3 { font-size:1rem; margin-bottom:10px; }
.paint-layer-notes p { color:#bbb; font-size:.9375rem; line-height:1.75; }
@media(max-width:768px) { .paint-layer-notes { grid-template-columns:1fr; gap:22px; } .paint-layer-figure figcaption { padding:16px; } }
/* Paint correction page components. */
.hero h1 .location { margin-top:14px; }
.prose-stack > * + * { margin-top:18px; }
.list-title { font-size:1rem; margin-top:30px; }
.plain-list { list-style:none; margin-top:14px; border-top:1px solid var(--hairline); }
.plain-list li { padding:16px 0; border-bottom:1px solid var(--hairline); color:var(--copy); font-size:.9375rem; line-height:1.7; }
.plain-list strong { color:var(--white); font-weight:500; }
/* Same crop of the existing top/bottom composite as the ceramic page's preparation section. */
.comparison-pair { display:grid; gap:14px; }
.comparison-pair figcaption { font-size:.75rem; color:#aaa; padding-top:4px; }
.fact-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px; }
.fact-grid .boundary { margin-top:0; }
.package-grid.two { grid-template-columns:repeat(2,1fr); }
.package-grid.two .package:last-child { border-color:var(--hairline); }
.quote-list { list-style:none; margin-top:24px; max-width:620px; border-top:1px solid var(--hairline); }
.quote-list li { padding:14px 0 14px 18px; border-bottom:1px solid var(--hairline); color:var(--copy); font-size:.9375rem; position:relative; }
.quote-list li::before { content:'·'; position:absolute; left:2px; color:var(--white); }
.link-list { list-style:none; margin-top:26px; display:grid; gap:6px; }
.link-list li { color:var(--copy); font-size:.9375rem; line-height:1.7; }
.link-list a { color:var(--white); text-decoration:underline; }
.area-list { list-style:none; display:grid; gap:18px; }
.area-list li { color:var(--copy); font-size:.875rem; }
.area-list strong { display:block; color:var(--white); font-weight:500; margin-bottom:4px; }
.area-note { margin-top:26px; font-size:.875rem; max-width:560px; }
@media(max-width:768px) {
 .fact-grid,.package-grid.two { grid-template-columns:1fr; }
 .fact-grid { margin-top:34px; gap:14px; }
}