:root {
  color-scheme: dark;
  --bg: #161411;
  --ink: #f3eee3;
  --muted: #c5b9a8;
  --gold: #e1ba7f;
  --line: #55483a;
  --panel: #221d17;
  --paper: #eae1d0;
  --paper-ink: #211d17;
  --paper-line: #9a896f;
  --type-page: clamp(2.25rem, 5.4vw, 3.5rem);
  --type-section: 2rem;
  --type-card: 1.25rem;
  --type-body: 1rem;
  --type-caption: .8125rem;
  font-family: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, figure { margin: 0; }
.shell { width: min(100% - 80px, 1280px); margin-inline: auto; }
.skip { position: absolute; top: 0; left: 1rem; transform: translateY(-120%); z-index: 5; background: var(--ink); color: var(--bg); padding: .75rem; }
.skip:focus { transform: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

header { background: #110f0d; border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.brand { display: flex; flex-direction: column; align-items: center; flex: none; }
.brand img:first-child { width: 111px; }
.brand img:last-child { width: 73px; }
.header-edition { font-size: var(--type-body); font-weight: 700; color: var(--muted); }
.primary, .secondary { display: flex; align-items: stretch; gap: 12px 24px; flex-wrap: wrap; }
.primary a, .secondary a { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid transparent; min-height: 54px; font-size: var(--type-body); font-weight: 700; }
.primary svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.primary a:hover, .secondary a:hover, [aria-current] { color: var(--gold); border-color: var(--gold); }
.subbar { background: var(--panel); border-top: 1px solid var(--line); }
.secondary { gap: 0 22px; }
.secondary a { min-height: 44px; }
.subbar.shop-menu { animation: reveal .18s ease-out; }
@keyframes reveal { from { opacity: .4; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

#home-panel, #service-panel:has(.coating-feature) {
  --type-page: clamp(2.125rem, 5.1vw, 3.25rem);
  --type-section: 1.75rem;
}
.hero { padding-block: clamp(18px, 3vw, 38px); }
figcaption, .eyebrow { font-size: var(--type-caption); font-weight: 700; line-height: 1.5; color: var(--gold); }
.eyebrow { text-transform: uppercase; letter-spacing: .07em; }
.cover { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(22px, 3vw, 44px); align-items: center; }
.hero-mark { margin-bottom: 12px; }
.hero-lockup { display: flex; flex-direction: column; align-items: center; width: min(60%, 216px); }
.hero-lockup img:first-child { width: 100%; }
.hero-lockup img:last-child { width: 62%; }
.display-lettering { font-size: var(--type-section); line-height: 1.08; }
.display-lettering img { width: auto; height: 1.0833em; object-fit: contain; object-position: left center; }
.lead-title { font-size: var(--type-page); }
.lead-title img { height: 2.1667em; }
.cover-copy > p, .lede, dialog p { color: var(--muted); line-height: 1.55; }
.cover-copy > p { margin-top: 7px; max-width: 45ch; }
.cover-copy .hero-proof, .coating-intro .hero-proof { color: var(--ink); font-weight: 700; }
.cover-copy .accreditation, .coating-intro .accreditation { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 11px; margin: 13px 0 0; font-size: var(--type-caption); color: var(--muted); }
.accreditation img { width: 8rem; height: auto; }
.accreditation span { border-inline-start: 1px solid var(--line); padding-inline-start: 11px; }
.actions { display: flex; gap: 9px; flex-wrap: wrap; }
.feature .actions { margin-top: 19px; }
.cover-copy .actions { margin-top: 14px; gap: 0 13px; }
.guide-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.guide-link:hover { color: var(--gold); }
.button, .gold { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; min-height: 46px; font-weight: 700; font-size: var(--type-body); border: 1px solid var(--line); background: transparent; color: var(--ink); }
.gold { background: var(--gold); color: #1b150e; border-color: var(--gold); }
.button:hover, .gold:hover { border-color: var(--gold); filter: brightness(1.08); }
.hero-photo, .project figure img, .feature > img, .feature figure img { width: 100%; height: auto; object-fit: cover; border: 4px solid #090806; }
.hero-photo { aspect-ratio: 1.34; object-position: 51% center; }
figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }

.project { color-scheme: light; color: var(--paper-ink); background: var(--paper); padding-block: clamp(20px, 3.3vw, 44px); }
.project-spread { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1fr) minmax(0, .75fr); gap: clamp(16px, 2.7vw, 42px); align-items: start; }
.project-note h2 { margin-block: 8px; }
.project .eyebrow, .project figcaption { color: #61452a; border-color: var(--paper-line); }
.project-note p:not(.eyebrow) { color: #4f4335; line-height: 1.55; margin-bottom: 12px; }
.project-note .button { color: var(--paper-ink); border-color: var(--paper-line); }
.project-note :focus-visible { outline-color: #5a3922; }
.project-number { width: clamp(32px, 5.5vw, 74px); margin-top: 20px; opacity: .88; }
.project-exterior img { aspect-ratio: 1.12; }
.project-interior { margin-top: clamp(20px, 5vw, 80px); }
.project-interior img { aspect-ratio: 1.11; }
.home-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 26px 42px; border-block: 1px solid var(--line); }
.home-links a { padding: 18px 0; }
.home-links a+a { border-left: 1px solid var(--line); padding-left: 20px; }
.home-links strong { display: block; margin-top: 5px; font-size: var(--type-card); line-height: 1.3; }
.home-links a:hover strong { color: var(--gold); }

.interior { padding-block: clamp(23px, 4vw, 54px) 58px; min-height: 65vh; }
.interior > .eyebrow:first-child { border-bottom: 1px solid var(--line); padding-bottom: 11px; }
.interior h1 { font-size: clamp(2.45rem, 6vw, 5.15rem); letter-spacing: -.06em; line-height: .98; margin-block: 20px 16px; }
.display-title img { width: min(100%, 580px); }
.lede { margin-bottom: 18px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.card { min-width: 0; border: 1px solid var(--line); background: var(--panel); }
.card img { width: 100%; aspect-ratio: 1.55; object-fit: cover; border: 3px solid #0b0907; }
.card div { padding: 15px; }
.card h2 { font-size: 1.12rem; line-height: 1.25; margin-bottom: 6px; }
a.card:hover h2 { color: var(--gold); }
.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.products img { aspect-ratio: 1.12; object-fit: contain; background: var(--paper); }
#product-count { width: max-content; border: 1px solid var(--line); padding: 5px 10px; }
.feature { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); align-items: start; gap: clamp(16px, 4vw, 48px); margin-top: 22px; }
.feature .price { color: var(--gold); font-weight: 700; }
.feature p { line-height: 1.55; margin-bottom: 10px; color: var(--muted); }
#service-panel:has(.coating-feature) { padding-top: clamp(18px, 2.8vw, 36px); }
.coating-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; margin-top: 0; gap: clamp(16px, 3vw, 44px); }
.coating-feature figure img { aspect-ratio: 1.5; }
.coating-intro h1.lead-title { margin: 0 0 7px; font-size: var(--type-page); line-height: 1.08; }
.coating-intro > p { margin-bottom: 6px; }
.coating-intro .price { margin: 0; font-size: var(--type-card); }
.coating-intro .coating-booking { align-items: center; gap: 6px 14px; margin-top: 14px; }
.coating-section { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 14px; }
.coating-section > h2 { margin-bottom: 11px; }
.coating-section p:not(.eyebrow) { line-height: 1.55; }
.coating-basics { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 12px 24px; padding: clamp(15px, 2.4vw, 28px); color: var(--paper-ink); background: var(--paper); border: 1px solid var(--paper-line); scroll-margin-block-start: 12px; }
.coating-basics h2 { margin-bottom: 6px; }
.coating-benefits { margin: 0; padding-inline-start: 1.25em; display: grid; align-content: center; gap: 5px; line-height: 1.45; }
.coating-benefits li::marker { color: #6b4b2d; }
.basics-note { grid-column: 1 / -1; border-top: 1px solid var(--paper-line); padding-top: 9px; color: #4f4335; }
.prep-list, .coating-options { display: grid; gap: 12px; }
.prep-list { grid-template-columns: repeat(3, minmax(0, 1fr)); list-style-position: inside; padding: 0; margin: 0; }
.prep-list li, .coating-options article { padding: clamp(13px, 1.7vw, 20px); background: var(--panel); border: 1px solid var(--line); }
.prep-list li::marker { color: var(--gold); }
.prep-list strong, .coating-options h3, .infinity h3, .infinity-facts dd { font-size: var(--type-card); line-height: 1.25; }
.prep-list p, .coating-options article p:not(.eyebrow) { color: var(--muted); margin-top: 8px; }
.coating-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coating-options article { display: flex; flex-direction: column; align-items: flex-start; }
.coating-options .booking-time { margin: 0 0 4px; color: var(--gold); font-size: var(--type-card); font-weight: 700; }
.coating-options .button { margin-top: auto; text-align: left; }
.coating-options article p:not(.booking-time) { margin-bottom: 15px; }
.infinity { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: 12px 24px; margin-top: 12px; padding: clamp(14px, 2.2vw, 26px); background: #2c241b; border: 1px solid #8e744d; }
.infinity h3 { margin-block: 5px 9px; color: var(--gold); }
.infinity-facts { margin: 0 0 10px; }
.infinity-facts div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 14px; padding: 8px 0; border-bottom: 1px solid #8e744d; }
.infinity-facts dd { margin: 0; font-weight: 700; }
.infinity p:not(.eyebrow), .cure-note, .range dd { color: var(--muted); }
.cure-note strong { color: var(--ink); }
.infinity .actions { margin: 0; }
.cure-note { margin-top: 17px; border-left: 2px solid var(--gold); padding-left: 14px; }
.range { margin: 0; }
.range div { display: grid; grid-template-columns: minmax(155px, 1fr) 2fr; gap: 12px; padding: 11px 0; border-block-start: 1px solid var(--line); }
.range div:last-child { border-bottom: 1px solid var(--line); }
.range dt { font-weight: 700; }
.range dd { margin: 0; line-height: 1.45; }
.source-link { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
footer { border-top: 1px solid var(--line); background: #110f0d; }
footer div { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-block: 21px; font-size: var(--type-caption); }
footer span { color: var(--muted); }

dialog { width: min(100% - 26px, 460px); max-height: 90dvh; background: var(--panel); color: var(--ink); border: 1px solid var(--line); padding: 20px; }
dialog::backdrop { background: #000b; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.dialog-head h2 { font-size: var(--type-section); }
.dialog-head button { background: transparent; border: 0; color: var(--ink); font-size: var(--type-section); padding: 4px 10px; }
dialog p { margin: 8px 0 12px; }
label { display: grid; gap: 4px; margin-bottom: 10px; }
input, select, textarea { width: 100%; padding: 9px; background: var(--bg); color: var(--ink); border: 1px solid #786d5c; }
#quote-status:empty { display: none; }
.quote-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.gold:disabled { cursor: wait; opacity: .7; }

@media (max-width: 900px) {
  .shell { width: calc(100% - 36px); }
  .primary { gap: 12px; }
  .project-spread { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-note { grid-row: span 2; }
  .project-interior { margin-top: 0; }
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
  :root { --type-page: 2.25rem; --type-section: 1.625rem; --type-card: 1.125rem; }
  #home-panel, #service-panel:has(.coating-feature) { --type-page: 2.125rem; --type-section: 1.5rem; }
  .shell { width: calc(100% - 28px); }
  .bar { display: block; min-height: 0; }
  .brand { width: max-content; margin-inline: auto; padding-top: 13px; }
  .header-edition { display: none; }
  .primary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .primary a { justify-content: center; gap: 5px; text-align: center; line-height: 1.2; min-height: 49px; }
  .primary svg { width: 14px; height: 14px; }
  .secondary { gap: 0 12px; padding-block: 3px; }
  .cover, .project-spread, .feature, .coating-feature, .coating-basics, .infinity, .prep-list { grid-template-columns: 1fr; }
  .cover { gap: 12px; }
  .hero-mark { margin-bottom: 8px; }
  .hero-lockup { width: min(57%, 168px); }
  .cover-copy .actions { margin-top: 12px; }
  .coating-booking .price { flex: 0 0 auto; }
  .hero-photo { aspect-ratio: 1.47; }
  .actions > * { flex: 1 1 auto; }
  .project-note { grid-row: auto; }
  .project-number { display: none; }
  .project-exterior img, .project-interior img { aspect-ratio: 1.45; }
  .grid, .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card div { padding: 10px; }
  .card h2 { font-size: .97rem; }
  .home-links { grid-template-columns: 1fr; }
  .home-links a+a { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}
@media (max-width: 480px) {
  .coating-options, .range div { grid-template-columns: 1fr; }
  .range div { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}