:root { --gold:#e6b325; --ink:#111; --muted:#5e5e5e; --line:#ece7df; --paper:#f7f5f2; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 Inter, system-ui, sans-serif; }
img { max-width:100%; display:block; }
a { color:inherit; }
.wrap { width:min(1080px, calc(100% - 40px)); margin:0 auto; }

/* Header */
header { position:sticky; top:0; z-index:10; background:#000; color:#fff; border-bottom:2px solid var(--gold); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.nav img { height:54px; width:auto; }
.nav-links { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.nav-links a { color:#fff; text-decoration:none; font-size:14px; font-weight:500; }
.nav-links a:hover, .nav-links a[aria-current] { color:var(--gold); }
.nav-links a.btn { background:var(--gold); color:#111; padding:10px 14px; border-radius:6px; font-weight:600; min-height:0; }
.nav-links a.btn.ghost { background:transparent; color:#fff; border:1px solid #fff; }

/* Type + buttons */
.kicker { color:var(--gold); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; margin-bottom:10px; }
h1,h2,h3 { font-family:Oswald, Inter, sans-serif; font-weight:600; letter-spacing:.02em; margin:0; text-transform:uppercase; }
h1 { font-size:clamp(32px, 5vw, 52px); line-height:1.05; max-width:18ch; }
h2 { font-size:clamp(28px, 4vw, 42px); line-height:1.12; margin-bottom:10px; }
.lede { max-width:680px; color:#333; }
.btn { display:inline-block; text-decoration:none; border-radius:6px; padding:12px 16px; font-weight:600; min-height:44px; }
.gold { background:var(--gold); color:#111; }
.ghost { border:1px solid #fff; color:#fff; }
.btn.dark { background:#111; color:#fff; }
.row { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; align-items:center; }
.hint { font-size:14px; margin:10px 0 0; color:var(--muted); }
.hint strong { color:inherit; }
section { padding:64px 0; }

/* Hero */
.hero { min-height:68vh; display:grid; align-items:end; color:#fff; background:#111 center/cover no-repeat; position:relative; }
.hero:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.8)); }
.hero .wrap { position:relative; z-index:1; padding:72px 0 48px; }
.hero-sub { margin:12px 0 0; max-width:640px; color:#fff; font-size:19px; font-weight:600; }
.hero p { max-width:640px; color:#f2f2f2; font-size:17px; }
.hero .hint { color:#e8e8e8; font-size:14px; }
.trust { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-top:16px; font-size:14px; color:#eee; }
.stars { color:var(--gold); letter-spacing:.06em; }
.trust a { color:#fff; font-weight:600; }

/* Hero CTAs, warranty, review */
.dual { display:inline-flex; border-radius:6px; overflow:hidden; border:1px solid #fff; min-height:44px; }
.dual a { display:flex; align-items:center; gap:5px; padding:12px 16px; color:#fff; text-decoration:none; font-weight:600; }
.dual a + a { border-left:1px solid rgba(255,255,255,.55); }
.dual a:hover { background:rgba(255,255,255,.12); }
.dual-k { color:var(--gold); }
.dual a { min-width:92px; justify-content:center; white-space:nowrap; }
.hero .hero-phone { margin:10px 0 0; color:#eee; font-size:15px; }
.hero-phone a { color:#fff; font-weight:600; text-decoration:none; }
.warranty-line { font-size:14px !important; color:#ddd !important; margin:10px 0 0; max-width:640px; }
.warranty-line strong { color:var(--gold); }
.warranty-line a { text-decoration:none; }
.warranty-note { margin-top:16px; max-width:820px; }
.hero-review { margin:18px 0 0; max-width:620px; background:rgba(0,0,0,.55); border-left:3px solid var(--gold); border-radius:8px; padding:12px 16px; backdrop-filter:blur(2px); }
.hero-review-top { font-size:14px; color:#eee; }
.hero-review-top a { color:#fff; font-weight:600; }
.hero-review blockquote { margin:6px 0 4px; font-size:15px; color:#fff; font-style:italic; }
.hero-review figcaption { font-size:13px; color:#bbb; }

/* Proof bar */
.bar { background:#000; color:#fff; }
.bar ul { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0; padding:16px 0; }
.bar strong { display:block; color:var(--gold); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

/* Repairs callout */
.callout { background:#fff; border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:12px; padding:26px; display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start; }
.checks { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.checks li { padding-left:26px; position:relative; }
.checks li:before { content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700; }

/* Who pills */
.who { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.who span { background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:14px; font-weight:500; }

/* Service cards */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
.card { background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.card img { height:180px; width:100%; object-fit:cover; object-position:50% 35%; background:#e8e4dc; }
.card div { padding:16px 16px 18px; }
.card h3 { font-size:20px; margin-bottom:6px; }
.card p { margin:0; color:#3c3c3c; font-size:15px; }
.card p a { font-weight:600; }
.pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.pills span { background:var(--paper); border-radius:999px; padding:8px 12px; font-size:14px; font-weight:500; }

/* Additional services */
.extra { margin-top:36px; padding-top:24px; border-top:1px solid var(--line); }
.extra > h3 { font-size:22px; margin-bottom:14px; }
.extra-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.extra-grid .card { display:grid; grid-template-columns:120px 1fr; }
.extra-grid .card img { height:100%; min-height:110px; }
.extra-grid .card h3 { font-size:17px; }

/* Additional services (compact line) */
.extra-line { margin:22px 0 0; padding:12px 16px; background:var(--paper); border-radius:8px; font-size:14px; color:#444; }
.extra-line strong { color:#111; }

/* Work preview */
.shots { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; margin:22px 0 0; }
.shot { position:relative; border-radius:10px; overflow:hidden; background:#e8e4dc; aspect-ratio:4/3; margin:0; }
.shot:first-child { grid-row:1 / span 2; aspect-ratio:auto; min-height:410px; }
.shot img { width:100%; height:100%; object-fit:cover; object-position:50% 30%; position:absolute; inset:0; }
.shot figcaption, .gal figcaption.overlay { position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; background:linear-gradient(transparent, rgba(0,0,0,.8)); color:#fff; font-size:13px; font-weight:500; z-index:1; }

/* How it works */
.steps { list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:28px 0 0; padding:0; }
.steps li { counter-increment:step; background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 16px; }
.steps li:before { content:counter(step); display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#111; color:var(--gold); font:600 16px Oswald, Inter, sans-serif; margin-bottom:10px; }
.steps h3 { font-size:18px; margin-bottom:4px; }
.steps p { margin:0; font-size:14px; color:#3c3c3c; }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.note { background:#111; color:#fff; border-radius:12px; padding:22px; }
.note h3 { color:var(--gold); font-size:20px; margin-bottom:6px; }
.note p { margin:0; color:#e6e6e6; font-size:15px; }

/* Maintenance + warranty */
.dark { background:#111; color:#fff; }
.dark .lede { color:#ddd; }
.dark .checks li { color:#eee; }
.split { display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:start; }
.box { background:#1a1a1a; border-left:4px solid var(--gold); border-radius:10px; padding:22px; }
.box h3 { color:var(--gold); font-size:22px; margin-bottom:8px; }
.box p { margin:0 0 10px; color:#e6e6e6; font-size:15px; }
.dark .hint { color:#bbb; }

/* Maintenance list */
.checks.two-col { grid-template-columns:1fr 1fr; column-gap:28px; margin:18px 0 6px; max-width:860px; }

/* About */
.owner-quote { margin:14px 0 0; padding-left:14px; border-left:3px solid var(--gold); font-style:italic; color:#333; }
.panel { background:#111; color:#fff; border-radius:12px; padding:24px; }
.panel h3 { color:var(--gold); font-size:26px; margin-bottom:8px; }
.brands { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.brands span { border:1px solid #333; border-radius:6px; padding:7px 9px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.owner-photo { margin:0 0 16px; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--line); }
.owner-photo img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; background:#e8e4dc; }
.owner-photo figcaption { padding:10px 14px; font-size:13px; color:var(--muted); }

/* Reviews */
#reviews { background:#fff; }
.review-score { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin:18px 0 28px; }
.review-score strong { font-family:Oswald, Inter, sans-serif; font-size:48px; line-height:1; }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.review { border:1px solid var(--line); border-radius:10px; padding:18px; background:var(--paper); display:flex; flex-direction:column; gap:10px; }
.review p { margin:0; color:#333; flex:1; }
.review .who { font-size:13px; color:var(--muted); text-decoration:none; margin:0; }
.attr { margin-top:18px; font-size:13px; color:var(--muted); }

/* FAQ */
.faq { max-width:820px; margin-top:22px; display:grid; gap:10px; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:10px; padding:0 18px; }
.faq summary { cursor:pointer; list-style:none; padding:16px 28px 16px 0; font-weight:600; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:after { content:"+"; position:absolute; right:0; top:12px; font-size:22px; color:var(--gold); font-weight:600; }
.faq details[open] summary:after { content:"–"; }
.faq details p { margin:0 0 16px; color:#333; }

/* Contact */
#contact { background:#fff; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.contact-actions { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0; }
.contact-actions .btn { background:var(--gold); color:#111; }
.contact-actions .btn.ghost { background:#111; color:#fff; border:0; }
form { display:grid; gap:10px; }
input, textarea, select { font:inherit; padding:12px; border:1px solid #ddd6ca; border-radius:8px; background:#fff; min-height:44px; width:100%; }
select { appearance:auto; }
button { font:inherit; font-weight:600; background:var(--gold); border:0; border-radius:8px; padding:14px 16px; cursor:pointer; min-height:48px; }
.form-note { font-size:13px; color:var(--muted); margin:0; }

form .fl { display:block; font-size:14px; font-weight:600; color:#222; margin:4px 0 -4px; }
form .frow > div { display:grid; gap:10px; }
.area-line { margin:12px 0 0; font-size:17px; color:#333; }
.area { margin:14px 0 0; }
.area dt { font-weight:600; font-size:13px; color:#111; text-transform:uppercase; letter-spacing:.06em; margin-top:10px; }
.area dd { margin:2px 0 0; color:#333; }
.gal-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.gal-filters button { min-height:40px; padding:8px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:14px; }
.gal-filters button[aria-pressed="true"] { background:#111; color:var(--gold); border-color:#111; }
.gal figure[hidden] { display:none; }
form .fl .opt { font-weight:400; color:var(--muted); }
form .fl input, form .fl select, form .fl textarea { font-weight:400; }
form .frow { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.intro { font-size:18px; font-weight:500; }

/* Gallery page */
.gal { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
.gal figure { margin:0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.gal img { width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:50% 30%; background:#e8e4dc; }
.gal figcaption { padding:12px 14px 14px; font-size:14px; color:#3c3c3c; }
.gal figcaption strong { display:block; color:#111; font-size:15px; margin-bottom:2px; }

/* Footer + mobile bar */
footer { background:#000; color:#aaa; padding:32px 0 28px; font-size:14px; }
footer a { color:#ccc; }
.mobile-cta { display:none; position:fixed; left:0; right:0; bottom:0; z-index:20; background:#000; border-top:2px solid var(--gold); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:8px; }
.mobile-cta .cta-hint { flex-basis:100%; margin:0; text-align:center; color:#ccc; font-size:12px; }
.mobile-cta a { flex:1; text-align:center; text-decoration:none; font-weight:600; border-radius:8px; padding:13px 10px; min-height:48px; }
.mobile-cta .call { background:var(--gold); color:#111; }
.mobile-cta .text { background:#222; color:#fff; border:1px solid #444; }

@media (max-width:900px) {
  body { padding-bottom:80px; }
  .nav-links a:not(.btn) { display:none; }
  .review-grid, .bar ul, .grid, .split, .contact, .callout, .duo { grid-template-columns:1fr; }
  .bar ul { grid-template-columns:1fr 1fr; }
  .checks.two-col { grid-template-columns:1fr; }
  .extra-grid { grid-template-columns:1fr; }
  #about .split > div:last-child { order:-1; }
  .steps { grid-template-columns:1fr; }
  .steps li { display:grid; grid-template-columns:34px 1fr; column-gap:14px; align-items:start; }
  .steps li:before { margin:0; grid-row:1 / span 2; }
  .shots { grid-template-columns:1fr 1fr; }
  .shot:first-child { grid-row:auto; grid-column:1 / span 2; aspect-ratio:4/3; min-height:0; }
  .gal { grid-template-columns:1fr 1fr; }
  section { padding:48px 0; }
  h1 { max-width:none; }
  .mobile-cta { display:flex; }
}
@media (min-width:601px) and (max-width:900px) {
  .grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .grid { gap:10px; }
  .card { display:grid; grid-template-columns:110px 1fr; }
  .card img { height:100%; min-height:120px; }
  .card div { padding:12px 14px; }
  .card h3 { font-size:17px; }
  .card p { font-size:14px; }
}
@media (max-width:520px) {
  .gal { grid-template-columns:1fr; }
  form .frow { grid-template-columns:1fr; }
  .hero-ctas .btn, .hero-ctas .dual { flex:1 1 100%; justify-content:center; text-align:center; }
  .dual a { flex:1; justify-content:center; }
  .bar ul { grid-template-columns:1fr; }
}

/* Rate banner (temporary) — delete this block when the banner is removed */
.rate-banner { background:#000; color:#f2f2f2; border-bottom:1px solid var(--gold); font-size:13px; line-height:1.4; display:flex; align-items:center; justify-content:center; gap:10px; padding:7px 44px 7px 16px; position:relative; text-align:center; }
.rate-banner p { margin:0; }
.rate-banner p:before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); margin-right:8px; vertical-align:middle; }
.rate-close { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; color:#bbb; font-size:20px; line-height:1; min-height:0; width:32px; height:32px; padding:0; border-radius:4px; }
.rate-close:hover { color:var(--gold); }
/* /Rate banner */

/* Commercial clients */
.biz-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
.biz { background:#1a1a1a; border-top:3px solid var(--gold); border-radius:10px; padding:18px; }
.biz h3 { color:var(--gold); font-size:18px; margin-bottom:6px; }
.biz p { margin:0; color:#ddd; font-size:15px; }
.biz .btn { margin-top:12px; }
.checks-form { display:grid; gap:8px; margin:4px 0 2px; }
.cb { display:flex; gap:10px; align-items:center; font-size:15px; font-weight:500; cursor:pointer; }
.cb input { width:20px; height:20px; min-height:0; margin:0; accent-color:#111; }
.coi-fields { display:grid; gap:10px; padding:12px; background:var(--paper); border-radius:8px; }
.coi-fields[hidden] { display:none; }
@media (max-width:900px) { .biz-grid { grid-template-columns:1fr; } }

/* Service + city pages */
.page-hero { background:#111; color:#fff; padding:56px 0 44px; border-bottom:2px solid var(--gold); }
.page-hero h1 { font-size:clamp(30px,4.5vw,46px); max-width:24ch; }
.page-hero .lede { color:#e6e6e6; margin-top:12px; font-size:17px; }
.page-hero .hint { color:#ccc; }
.page-hero .hint a { color:#fff; font-weight:600; text-decoration:none; }
.svc-layout { display:grid; grid-template-columns:1.25fr .75fr; gap:36px; align-items:start; }
.prose h2 { font-size:clamp(22px,2.6vw,28px); margin:28px 0 8px; }
.prose h2:first-child { margin-top:0; }
.prose p { margin:0 0 12px; color:#2b2b2b; }
.prose .checks { margin:8px 0 12px; }
.svc-photos { display:grid; gap:14px; }
.svc-photos figure { margin:0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.svc-photos img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:50% 30%; background:#e8e4dc; }
.svc-photos figcaption { padding:10px 14px 12px; font-size:14px; color:#3c3c3c; }
.svc-photos figcaption strong { display:block; color:#111; font-size:15px; margin-bottom:2px; }
.aside-h { font-size:20px; margin:0; }
.link-list { list-style:none; padding:0; margin:8px 0 12px; display:flex; flex-wrap:wrap; gap:8px; }
.link-list a { display:inline-block; padding:8px 12px; border:1px solid var(--line); background:#fff; border-radius:999px; text-decoration:none; font-size:14px; font-weight:500; }
.link-list a:hover { border-color:var(--gold); }
.cta-band { background:#111; color:#fff; text-align:left; }
.cta-band p { color:#ddd; max-width:640px; }
.card h3 a { text-decoration:none; }
.card h3 a:hover { color:#9a7400; }
.foot { display:grid; grid-template-columns:1.3fr 1fr 1fr .8fr; gap:24px; }
.foot strong { color:#fff; display:block; margin-bottom:8px; font-family:Oswald, Inter, sans-serif; text-transform:uppercase; letter-spacing:.04em; font-weight:500; }
.foot p { margin:0 0 8px; }
.foot ul { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.foot a { text-decoration:none; }
.foot a:hover { color:var(--gold); }
@media (max-width:900px) {
  .svc-layout { grid-template-columns:1fr; }
  .foot { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) { .foot { grid-template-columns:1fr; } }