/* NewGen Renovations — layout: black header and hero, cream and champagne-gold bands joined by soft arches, rounded cards and pill buttons */
:root {
  --black: #0d0c0a;
  --ink: #191713;
  --char: #2a2721;
  --gold: #cda349;
  --gold-soft: #e6cf93;
  --gold-pale: #f3e6c2;
  --gold-deep: #8a6a1f;
  --cream: #f7f0e1;
  --cream-deep: #ebe1ca;
  --paper: #fdfaf3;
  --text: #2b2822;
  --muted: #675f50;
  --line: rgba(205, 163, 73, .4);
  --shadow: 0 14px 34px -18px rgba(60, 44, 10, .45);
  --r-card: 20px;
  --r-ctl: 12px;
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Nunito", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap: 1180px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--gold-deep); text-underline-offset: 3px; }
a:hover { color: var(--black); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
h1, h2, h3 { font-family: var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 600; line-height: 1.12; margin: 0; text-wrap: balance; color: var(--black); letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.5rem; }
p { margin: 0; }
.eyebrow { display: inline-block; font-family: var(--body); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-pale); padding: 6px 14px; border-radius: 999px; justify-self: start; }
.center .eyebrow { justify-self: center; }
.sub { display: block; font-family: var(--body); font-size: clamp(.95rem, 1.5vw, 1.12rem); font-weight: 700; letter-spacing: .02em; color: var(--gold-deep); margin-top: 12px; line-height: 1.45; }
.rule { width: 84px; height: 2px; background: var(--gold); border: 0; border-radius: 2px; margin: 18px 0; position: relative; overflow: visible; }
.rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; background: var(--gold); border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 4px var(--rule-ring, var(--paper)); }
.cream .rule { --rule-ring: var(--cream); }
.dark .rule { --rule-ring: var(--black); }
.gold .rule { --rule-ring: #ecd9a4; background: var(--black); }
.gold .rule::after { background: var(--black); }
.cta .rule { --rule-ring: var(--ink); }
.center { text-align: center; }
.center .rule { margin-inline: auto; }
.stack { display: grid; gap: 18px; }
.lead { font-size: 1.1rem; max-width: 65ch; }
.center .lead { margin-inline: auto; }

/* buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.center .btns { justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; font-family: var(--body); font-size: .95rem; font-weight: 800; letter-spacing: .03em; text-decoration: none; border: 2px solid var(--gold); border-radius: 999px; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--black); box-shadow: 0 10px 22px -12px rgba(205, 163, 73, .9); }
.btn-gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--black); }
.btn-line { background: transparent; color: var(--gold-deep); }
.btn-line:hover { background: var(--black); border-color: var(--black); color: var(--gold-soft); }
.dark .btn-line { color: var(--gold-soft); }
.dark .btn-line:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.gold .btn-gold { background: var(--black); border-color: var(--black); color: var(--gold-soft); box-shadow: 0 10px 22px -12px rgba(13, 12, 10, .8); }
.gold .btn-gold:hover { background: var(--char); border-color: var(--char); color: var(--gold-soft); }
.gold .btn-line { color: var(--black); border-color: var(--black); }
.gold .btn-line:hover { background: var(--black); color: var(--gold-soft); }

/* top strip + header */
.topbar { background: var(--black); color: var(--gold-soft); font-size: .82rem; font-weight: 700; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding-block: 8px; }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--black); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream); }
.brand { align-self: flex-start; }
.brand img { width: 136px; height: 136px; max-width: none; margin-bottom: -62px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.brand span { font-family: var(--display); font-variation-settings: "SOFT" 100; font-size: 1.3rem; font-weight: 600; line-height: 1.1; }
.brand small { display: block; font-family: var(--body); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.nav a.link, .nav .drop > button { font-family: var(--body); font-size: .98rem; font-weight: 700; letter-spacing: .02em; color: var(--cream); text-decoration: none; background: none; border: 0; padding: 10px 0; cursor: pointer; }
.nav a.link:hover, .nav .drop > button:hover, .nav a[aria-current="page"] { color: var(--gold); }
.drop { position: relative; }
.drop > button::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.drop-menu { position: absolute; top: 100%; left: -18px; min-width: 240px; background: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 8px; display: none; flex-direction: column; gap: 0; box-shadow: var(--shadow); }
.drop:hover .drop-menu, .drop:focus-within .drop-menu, .drop.open .drop-menu { display: flex; }
.drop-menu a { display: block; padding: 11px 16px; border-radius: 10px; color: var(--cream); text-decoration: none; font-size: .96rem; font-weight: 600; }
.drop-menu a:hover { background: var(--char); color: var(--gold); }
.nav-toggle { display: none; background: none; border: 2px solid var(--line); border-radius: 999px; color: var(--gold); padding: 9px 18px; font-family: var(--body); font-size: .9rem; font-weight: 800; cursor: pointer; }

/* dark + gold bands */
.dark { background: var(--black); color: var(--cream); }
.dark h1, .dark h2, .dark h3 { color: var(--cream); }
.dark .sub { color: var(--gold); }
.dark .eyebrow { color: var(--gold-soft); background: rgba(205, 163, 73, .16); }
.dark a:not(.btn) { color: var(--gold-soft); }
.gold { background: linear-gradient(180deg, #f1e2b6 0%, #e6cf93 100%); color: var(--black); }
.gold .sub { color: #5f4810; }
.gold .eyebrow { background: rgba(13, 12, 10, .1); color: var(--black); }

/* soft arch into the next band: add .curve plus .next-paper / .next-cream / .next-black */
.curve { position: relative; }
.curve::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(28px, 4.6vw, 64px); background: var(--next, var(--paper)); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.next-paper { --next: var(--paper); }
.next-cream { --next: var(--cream); }
.next-black { --next: var(--black); }
.section.curve { padding-bottom: calc(clamp(56px, 8vw, 104px) + clamp(28px, 4.6vw, 64px)); }

/* hero */
.hero { position: relative; overflow: hidden; background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(205,163,73,.26), transparent 64%),
    radial-gradient(circle at 12% 88%, rgba(205,163,73,.12), transparent 40%),
    radial-gradient(circle at 88% 78%, rgba(205,163,73,.12), transparent 40%),
    linear-gradient(180deg, #0d0c0a 0%, #1d1a14 100%); }
.hero .wrap { position: relative; padding-block: clamp(64px, 9vw, 120px) calc(clamp(64px, 9vw, 120px) + clamp(28px, 4.6vw, 64px)); }
.hero .stack { justify-items: center; }
.hero h1 { max-width: 17ch; }
.hero .lead { color: #e2d8c2; }
.hero.small .wrap { padding-block: clamp(48px, 7vw, 84px) calc(clamp(48px, 7vw, 84px) + clamp(28px, 4.6vw, 64px)); }
.crumbs { font-size: .88rem; font-weight: 700; color: var(--gold); }
.crumbs a { color: var(--gold-soft); text-decoration: none; }
.crumbs a:hover { color: var(--cream); }

/* sections */
.section { padding-block: clamp(56px, 8vw, 104px); }
.cream { background: var(--cream); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split > * { min-width: 0; }

/* photo placeholders: swap each for a real <img> */
.ph { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; max-width: 100%; padding: 22px; background: linear-gradient(135deg, #2a2620, #14120f); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 15%, rgba(205,163,73,.28), transparent 46%); }
.ph span { position: relative; z-index: 1; font-size: .82rem; font-weight: 700; color: var(--gold-soft); background: rgba(13, 12, 10, .55); padding: 6px 12px; border-radius: 999px; }
.ph.wide { aspect-ratio: 16 / 10; }
.ph-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ph-pair .ph { aspect-ratio: 3 / 4; }
.ph-pair .ph:last-child { margin-top: 28px; }

/* service cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 44px; }
.card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--cream-deep); border-radius: var(--r-card); overflow: hidden; min-width: 0; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -20px rgba(60, 44, 10, .5); }
.card .ph { border-radius: 0; box-shadow: none; }
.card-body { display: grid; gap: 14px; padding: 26px 26px 30px; flex: 1; align-content: start; }
.card-body p { color: var(--muted); font-size: 1rem; }
.more { font-size: .95rem; font-weight: 800; text-decoration: none; color: var(--gold-deep); align-self: end; }
.more::after { content: " \2192"; display: inline-block; margin-left: 4px; transition: transform .2s; }
.more:hover { color: var(--black); }
.more:hover::after { transform: translateX(4px); }

/* feature list (service pages) */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.feature { padding: 28px 26px; background: var(--paper); border: 1px solid var(--cream-deep); border-radius: var(--r-card); display: grid; gap: 10px; align-content: start; min-width: 0; }
.feature::before { content: ""; width: 12px; height: 12px; background: var(--gold); border-radius: 3px; transform: rotate(45deg); margin: 4px 0 6px 4px; }
.feature h3 { font-size: 1.3rem; }
.feature p { color: var(--muted); font-size: 1rem; }

/* process tabs */
.tabs { margin-top: 44px; background: var(--paper); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.tablist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 6px; background: var(--black); }
.tab { background: transparent; color: var(--cream); border: 0; border-radius: 14px; padding: 16px 10px; font-family: var(--body); font-size: .9rem; font-weight: 700; line-height: 1.35; cursor: pointer; min-width: 0; transition: background .2s; }
.tab:hover { background: var(--char); }
.tab b { display: block; font-family: var(--display); font-variation-settings: "SOFT" 100; font-size: 1.7rem; font-weight: 600; color: var(--gold); line-height: 1; margin-bottom: 8px; }
.tab[aria-selected="true"] { background: var(--gold); color: var(--black); }
.tab[aria-selected="true"] b { color: var(--black); }
.panel { padding: clamp(24px, 4vw, 40px); display: grid; gap: 10px; }
.panel p { color: var(--muted); max-width: 70ch; }

/* reviews placeholder */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.review { border: 2px dashed var(--gold-soft); border-radius: var(--r-card); padding: 28px; display: grid; gap: 12px; color: var(--muted); background: var(--paper); min-width: 0; }
.stars { color: var(--gold); letter-spacing: .2em; font-size: 1.1rem; }

/* why choose us */
.checks { list-style: none; margin: 0; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--r-card); display: grid; gap: 22px; background: var(--ink); }
.checks li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.checks li::before { content: "\2713"; width: 30px; height: 30px; display: grid; place-items: center; background: var(--gold); color: var(--black); border-radius: 50%; font-weight: 800; font-size: .95rem; margin-top: 2px; }
.checks strong { display: block; font-family: var(--body); font-size: 1.05rem; font-weight: 800; color: var(--gold-soft); }
.checks span { color: #e2d8c2; font-size: 1rem; }

/* areas */
.areas { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.areas li { display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--gold); border-radius: 999px; padding: 11px 12px; text-align: center; font-size: .95rem; font-weight: 700; background: var(--paper); color: var(--black); min-width: 0; overflow-wrap: anywhere; transition: background .2s, transform .2s; }
.areas li::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--gold); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.areas li:hover { background: var(--gold-pale); transform: translateY(-2px); }

/* faq */
.faq { max-width: 860px; margin: 40px auto 0; display: grid; gap: 12px; }
.faq details { background: var(--cream); border: 1px solid var(--cream-deep); border-radius: 16px; padding-inline: 22px; }
.faq details[open] { background: var(--paper); border-color: var(--gold); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative; font-family: var(--display); font-variation-settings: "SOFT" 100; font-size: 1.25rem; font-weight: 600; color: var(--black); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; background: var(--gold); color: var(--black); border-radius: 50%; font-family: var(--body); font-size: 1.2rem; font-weight: 700; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 70ch; }

/* closing call to action */
.cta { border: 2px solid var(--gold); border-radius: 28px; padding: clamp(32px, 6vw, 64px); background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(205,163,73,.22), transparent 65%), var(--ink); box-shadow: var(--shadow); }

/* contact */
.form { display: grid; gap: 16px; padding: clamp(22px, 4vw, 36px); background: var(--paper); border: 1px solid var(--cream-deep); border-radius: var(--r-card); box-shadow: var(--shadow); }
.form label { display: grid; gap: 6px; font-size: .92rem; font-weight: 700; color: var(--muted); }
.form input, .form select, .form textarea { font: inherit; font-weight: 400; font-size: 1rem; color: var(--text); padding: 13px 14px; border: 1px solid var(--cream-deep); border-radius: var(--r-ctl); background: #fff; width: 100%; }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.note { font-size: .95rem; color: var(--muted); background: var(--gold-pale); border-radius: var(--r-ctl); padding: 12px 16px; }
.details { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.details li { display: grid; gap: 2px; }
.details b { font-size: .88rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); }

/* footer */
.site-footer { background: var(--black); color: #d5cbb4; font-size: .98rem; }
.site-footer .wrap { padding-block: 56px 28px; display: grid; gap: 40px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.foot-top > * { min-width: 0; }
.site-footer h2 { font-family: var(--body); font-variation-settings: normal; font-size: 1rem; font-weight: 800; letter-spacing: .04em; color: var(--gold); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: #d5cbb4; text-decoration: none; }
.site-footer a:hover { color: var(--gold-soft); }
.foot-brand { display: grid; gap: 16px; align-content: start; }
.foot-brand img { width: 110px; height: 110px; border-radius: 50%; }
.legal { border-top: 1px solid var(--line); padding-top: 22px; font-size: .88rem; color: #9a917d; display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--black); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 20px 24px; }
  .nav.open { display: flex; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .drop-menu { position: static; display: flex; border: 0; background: none; box-shadow: none; padding: 0 0 6px 14px; min-width: 0; }
  .drop > button::after { display: none; }
  .split, .cards, .reviews, .features { grid-template-columns: minmax(0, 1fr); }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tablist { grid-template-columns: minmax(0, 1fr); }
  .tab { text-align: left; display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; }
  .tab b { margin: 0; font-size: 1.3rem; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .brand img { width: 96px; height: 96px; margin-bottom: -38px; }
  .brand span { font-size: 1.1rem; }
  .foot-top, .form .row { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; }
  .topbar .wrap { justify-content: center; text-align: center; }
  .areas li { font-size: .86rem; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .card, .areas li, .more::after { transition: none; } .btn:hover, .card:hover, .areas li:hover { transform: none; } }
.hero .rule { --rule-ring: transparent; }

/* before / after slider: replace each .ba-layer's placeholder with <img src="..." alt="..."> when photos are ready */
.ba { --pos: 50%; position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); background: var(--ink); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.ba-layer { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 22px; }
.ba-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after { justify-content: flex-end; background: radial-gradient(circle at 75% 20%, rgba(230,207,147,.55), transparent 55%), linear-gradient(135deg, #5a4718, #241d0e); }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: repeating-linear-gradient(135deg, transparent 0 26px, rgba(255,255,255,.035) 26px 27px), linear-gradient(135deg, #4a4741, #23211e); }
.ba-note { position: relative; font-size: .82rem; font-weight: 700; color: var(--gold-soft); background: rgba(13, 12, 10, .55); padding: 6px 12px; border-radius: 999px; }
.ba-tag { position: absolute; top: 16px; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; pointer-events: none; }
.ba-tag-before { left: 16px; background: rgba(13, 12, 10, .7); color: var(--cream); }
.ba-tag-after { right: 16px; background: var(--gold); color: var(--black); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--cream); pointer-events: none; }
.ba-handle span { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--gold); border: 3px solid var(--cream); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.ba-handle span::before, .ba-handle span::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-left: 2px solid var(--black); border-bottom: 2px solid var(--black); }
.ba-handle span::before { left: 11px; transform: translateY(-50%) rotate(45deg); }
.ba-handle span::after { right: 11px; transform: translateY(-50%) rotate(-135deg); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba-range:focus-visible ~ .ba-handle span, .ba:focus-within .ba-handle span { outline: 3px solid var(--gold-soft); outline-offset: 3px; }

/* header: full size at the top of the page, compact once the visitor scrolls */
.site-header { transition: box-shadow .3s ease, background .3s ease; }
.site-header .wrap { transition: padding .3s ease; }
.brand img { transition: width .3s ease, height .3s ease, margin .3s ease; }
.nav a.link, .nav .drop > button { transition: font-size .3s ease, color .2s; }
.site-header .btn { transition: padding .3s ease, font-size .3s ease, background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.site-header.scrolled { box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7); }
.site-header.scrolled .wrap { padding-block: 4px; }
.site-header.scrolled .brand img { width: 78px; height: 78px; margin-bottom: -18px; }
.site-header.scrolled .nav a.link, .site-header.scrolled .nav .drop > button { font-size: .9rem; }
.site-header.scrolled .btn { padding: 10px 22px; font-size: .88rem; }
@media (max-width: 560px) { .site-header.scrolled .brand img { width: 62px; height: 62px; margin-bottom: -10px; } }
@media (prefers-reduced-motion: reduce) { .site-header, .site-header .wrap, .brand img, .nav a.link, .nav .drop > button, .site-header .btn { transition: none; } }

/* header buttons: quote + call, side by side */
.nav-cta { display: flex; align-items: center; gap: 10px; }
.site-header .btn { padding: 12px 22px; white-space: nowrap; }
.btn-quote { background: var(--cream); border-color: var(--cream); color: var(--black); }
.btn-quote:hover { background: var(--gold-pale); border-color: var(--gold-pale); color: var(--black); }
.nav .drop > button { text-transform: uppercase; letter-spacing: .06em; font-size: .92rem; font-weight: 800; }
.site-header.scrolled .nav .drop > button { font-size: .84rem; }
.site-header.scrolled .btn { padding: 9px 18px; }
@media (max-width: 960px) { .nav-cta { flex-direction: column; align-items: stretch; } .nav .drop > button { padding: 12px 0 4px; color: var(--gold); cursor: default; } }
@media (max-width: 960px) { .nav { max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); overflow-y: auto; overscroll-behavior: contain; } .nav-cta { order: -1; } }

/* Google reviews: badge in the top strip + widget in the reviews section */
.topbar .wrap { align-items: center; }
.g-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 999px; background: rgba(247, 240, 225, .1); border: 1px solid var(--line); color: var(--cream); text-decoration: none; font-size: .8rem; font-weight: 700; min-height: 30px; }
a.g-badge:hover { color: var(--gold-soft); border-color: var(--gold); }
.g-badge.live { padding: 0; background: none; border: 0; }
.g-reviews { margin-top: 44px; min-height: 120px; }
.review-top { display: flex; align-items: center; gap: 10px; }
@media (max-width: 760px) { .topbar .wrap { justify-content: center; text-align: center; } }

.g-badge b { font-size: .9rem; }
.g-stars { position: relative; display: inline-block; color: rgba(205, 163, 73, .3); letter-spacing: .08em; line-height: 1; }
.g-stars::after { content: "\2605\2605\2605\2605\2605"; position: absolute; left: 0; top: 0; width: var(--pct, 100%); overflow: hidden; white-space: nowrap; color: var(--gold); }
.g-summary { margin: 44px auto 0; max-width: 620px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 24px; padding: 28px 32px; background: var(--cream); border: 1px solid var(--cream-deep); border-radius: var(--r-card); box-shadow: var(--shadow); }
.g-summary > svg { width: 34px; height: 34px; }
.g-score { font-family: var(--display); font-variation-settings: "SOFT" 100; font-size: 3.4rem; font-weight: 600; line-height: 1; color: var(--black); }
.g-summary-text { display: grid; gap: 6px; }
.g-summary-text .g-stars { font-size: 1.5rem; justify-self: start; }
.g-summary-text p { color: var(--muted); font-weight: 600; }

/* action buttons: soft rounded rectangles, sized to match the reference site (250 x 50 in the page, 195 x 48 in the header) */
.btn { min-width: 250px; min-height: 50px; padding: 12px 26px; border-radius: 10px; font-size: 1rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.site-header .btn { min-width: 195px; min-height: 48px; padding: 10px 18px; font-size: .98rem; }
.site-header.scrolled .btn { min-width: 176px; min-height: 42px; padding: 8px 16px; font-size: .9rem; }
.nav-toggle { border-radius: 10px; }
@media (max-width: 1100px) and (min-width: 961px) { .site-header .btn { min-width: 0; } .nav { gap: 18px; } .nav ul { gap: 18px; } }
@media (max-width: 560px) { .btn { min-width: 0; } }

.foot-call { font-weight: 800; color: var(--cream); font-size: 1.05rem; }
.site-footer .foot-call a { color: var(--gold-soft); }
.details a { font-weight: 700; }

/* ---- Sizing matched to the reference site, measured at a 1470px-wide window ----
   wide content 1390px (40px gutters) · narrow content 1100px · h1 45/54 · h2 36/43 · h3 25/30 · body 16/27
   slider 675x500 · service cards 450 wide with 2:1 images · area pills 220x36 · FAQ in two 530px columns · closing banner 856px */
:root { --r-card: 12px; }
body { font-size: 16px; line-height: 1.7; }
.wrap { max-width: 1470px; padding-inline: 40px; }
h1 { font-size: clamp(2rem, 2.2vw + 1.2rem, 45px); line-height: 1.2; }
h2 { font-size: clamp(1.7rem, 1.4vw + 1.1rem, 36px); line-height: 1.2; }
h3 { font-size: 25px; line-height: 1.2; }
.sub { font-size: 20px; line-height: 1.3; margin-top: 8px; }
h1 .sub { font-size: clamp(1.15rem, 1vw + .9rem, 28px); }
.lead, .card-body p, .feature p, .checks span, .panel p { font-size: 1rem; }
.section { padding-block: clamp(48px, 5.5vw, 80px); }
.section.curve { padding-bottom: calc(clamp(48px, 5.5vw, 80px) + clamp(28px, 4.6vw, 64px)); }

/* header bar 60px tall with the logo hanging below it */
.site-header .wrap { padding-block: 6px; }
.brand img { margin-bottom: -88px; }
.site-header.scrolled .wrap { padding-block: 4px; }
.site-header.scrolled .brand img { margin-bottom: -34px; }

/* hero about 570px tall */
.hero:not(.small) .wrap { min-height: 570px; display: grid; align-content: center; padding-block: 56px calc(56px + clamp(28px, 4.6vw, 64px)); }
.hero h1 { max-width: 726px; }
.hero .lead { max-width: 620px; }

/* intro: two equal 675px columns, slider 675x500 */
.split { gap: 40px; }
.ba { aspect-ratio: 27 / 20; border-radius: var(--r-card); }
.ph.wide { aspect-ratio: 27 / 20; }

/* service cards: 450px wide, 40px apart, 2:1 image */
.cards { gap: 40px; margin-inline: -20px; }
.card .ph { aspect-ratio: 2 / 1; }
.card-body { padding: 20px 24px 26px; text-align: center; }
.card-body .more { justify-self: center; }
.features { gap: 40px; margin-inline: -20px; }

/* narrow 1100px blocks */
#process .wrap, #areas .wrap, #faqs .wrap, #why .wrap, #reviews .wrap { max-width: 1180px; }
.tab { min-height: 64px; font-size: 14px; }
.split:has(.checks) { grid-template-columns: minmax(0, 1fr) 364px; gap: 44px; }

/* service areas: 220x36 pills, four across */
.areas { max-width: 1050px; margin-inline: auto; gap: 10px; }
.areas li { min-height: 36px; padding: 6px 10px; font-size: 14px; border-radius: 10px; text-transform: uppercase; font-weight: 800; letter-spacing: .02em; }

/* FAQ: two 530px columns */
.faq { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; align-items: start; }
.faq details { border-radius: 10px; padding-inline: 16px; }
.faq summary { font-family: var(--body); font-variation-settings: normal; font-size: 16px; font-weight: 800; min-height: 55px; padding-block: 14px; display: flex; align-items: center; }

/* closing banner 856px */
.cta { max-width: 856px; margin-inline: auto; padding: 32px 26px 40px; border-radius: 15px; }

@media (max-width: 1100px) { .wrap { padding-inline: 20px; } .cards, .features { margin-inline: 0; gap: 26px; } }
@media (max-width: 960px) { .split:has(.checks) { grid-template-columns: minmax(0, 1fr); } .faq { grid-template-columns: minmax(0, 1fr); } .hero:not(.small) .wrap { min-height: 0; } .brand img { margin-bottom: -62px; } }
@media (max-width: 560px) { .brand img { margin-bottom: -44px; } .site-header.scrolled .brand img { margin-bottom: -14px; } h3 { font-size: 22px; } }
.areas { max-width: 910px; }
.areas li { line-height: 1.2; min-height: 36px; padding-block: 4px; }
.hero:not(.small) .wrap { min-height: 527px; }

/* ---- sub-service cards, deeper service pages, area pages ---- */
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 39px; margin-top: 40px; }
.cards.four .card .ph, .cards.three-small .card .ph { aspect-ratio: 328 / 168; }
.cards.four h3, .cards.three-small h3 { font-size: 22px; }
.cards.four .card-body p { font-size: .95rem; }
.cards.three-small { max-width: 1100px; margin-inline: auto; }
.wrap.narrow { max-width: 1180px; }
.wrap.narrow .lead { max-width: 860px; }
.split.top, .split.top:has(.checks) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 40px 64px; }
.checks.light { background: var(--cream); border-color: var(--cream-deep); gap: 16px; padding: 26px; }
.checks.light span { color: var(--text); font-weight: 600; }
.checks.light li { align-items: center; }
.factors { display: grid; gap: 14px; }
.factor { padding: 18px 20px; background: var(--cream); border: 1px solid var(--cream-deep); border-left: 4px solid var(--gold); border-radius: var(--r-card); display: grid; gap: 4px; }
.factor h3 { font-size: 20px; }
.factor p { color: var(--muted); }
.areas li { position: relative; }
.areas li a { color: inherit; text-decoration: none; }
.areas li a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.areas li:has(a) { background: var(--paper); cursor: pointer; }
.areas li:not(:has(a)) { border-style: dashed; border-width: 1px; color: var(--muted); }
.areas li.all { background: var(--black); border-color: var(--black); color: var(--gold-soft); }
.areas li.all::before { background: var(--gold); border-radius: 0; width: 8px; height: 8px; transform: rotate(45deg); }
.areas li.all:hover { background: var(--char); }
.areas.hoods { max-width: 910px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
.areas.hoods li { border-style: solid; border-width: 2px; color: var(--black); }
.center-note { max-width: 760px; margin: 28px auto 0; text-align: center; }
.foot-name { font-family: var(--display); font-variation-settings: "SOFT" 100; font-size: 1.5rem; font-weight: 600; color: var(--cream); line-height: 1.1; }
.foot-name small { display: block; font-family: var(--body); font-size: .8rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.hero h1 .sub { text-wrap: balance; }
@media (max-width: 1100px) { .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } }
@media (max-width: 960px) { .split.top, .split.top:has(.checks) { grid-template-columns: minmax(0, 1fr); } .cards.four, .areas.hoods { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .areas.hoods { grid-template-columns: minmax(0, 1fr); } }

/* ---- type scaled up so it reads at the same size as the reference site's all-caps display face ---- */
h1 { font-size: clamp(2.2rem, 2.6vw + 1.2rem, 54px); line-height: 1.12; }
h1 .sub { font-size: clamp(1.2rem, 1vw + 1rem, 30px); line-height: 1.2; font-weight: 800; margin-top: 12px; }
h2 { font-size: clamp(1.8rem, 1.6vw + 1.1rem, 42px); line-height: 1.15; }
.sub { font-size: 22px; font-weight: 800; }
h3 { font-size: 28px; }
.cards.four h3, .cards.three-small h3 { font-size: 24px; }
.factor h3 { font-size: 22px; }
.feature h3 { font-size: 24px; }
.hero .lead { font-size: 17px; font-weight: 700; }
.eyebrow { font-size: .85rem; }

/* home hero: text on the left, large logo on the right (where the reference site has its mascot) */
.hero:not(.small) .wrap.hero-grid { grid-template-columns: minmax(0, 1fr) 406px; align-items: center; gap: 40px; }
.hero-grid .stack { max-width: 760px; margin-inline: auto; }
.hero h1 { max-width: none; }
.hero-logo { width: 406px; height: 406px; max-width: none; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 0 10px rgba(205, 163, 73, .12), 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 90px rgba(205, 163, 73, .28); }
@media (max-width: 1100px) { .hero:not(.small) .wrap.hero-grid { grid-template-columns: minmax(0, 1fr) 300px; } .hero-logo { width: 300px; height: 300px; } }
@media (max-width: 960px) { .hero:not(.small) .wrap.hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-logo { display: none; } }
@media (max-width: 560px) { h3 { font-size: 24px; } .sub { font-size: 19px; } }

/* hero shows only the diamond-and-hammer mark, no circle */
.hero-logo { height: auto; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6)) drop-shadow(0 0 46px rgba(205, 163, 73, .3)); }
@media (max-width: 1100px) { .hero-logo { height: auto; } }
.brand { position: relative; z-index: 2; }
.nav { z-index: 3; }

/* top strip: Google review badge only, centred */
.topbar .wrap { justify-content: center; padding-block: 6px; }
.foot-call { line-height: 1.9; }
.foot-hours { color: var(--gold-soft); }

/* slider photos are portrait: keep the shower fixtures in frame */
.ba-layer img { object-position: center 24%; }
.ba-layer { padding: 0; }

/* Google review badge sized to the reference site's badge: 237 x 38, 16px rating and stars, in a 60px strip */
.topbar .wrap { padding-block: 11px; }
.g-badge { min-width: 237px; min-height: 38px; justify-content: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.g-badge b { font-size: 16px; }
.g-badge .g-stars { font-size: 18px; letter-spacing: .06em; }
.g-badge > svg { width: 20px; height: 20px; }
.g-badge { padding-block: 4px; line-height: 1; height: 38px; box-sizing: border-box; }

/* real photos inside the photo frames */
.ph.photo { padding: 0; background: var(--ink); }
.ph.photo::after { display: none; }
.ph.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* review slider: three cards on desktop, one on phones; arrows, dots, swipe and slow auto-advance */
.rv { position: relative; margin-top: 32px; padding-inline: 58px; }
.rv-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-block: 8px 14px; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-card { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; display: grid; gap: 12px; align-content: start; padding: 24px; background: var(--paper); border: 1px solid var(--cream-deep); border-radius: var(--r-card); box-shadow: var(--shadow); min-width: 0; text-align: left; }
.rv-card.empty { border: 2px dashed var(--gold-soft); box-shadow: none; }
.rv-card p { color: var(--muted); }
.rv-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 12px; align-items: center; }
.rv-head > svg { width: 22px; height: 22px; }
.rv-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--black); color: var(--gold-soft); font-weight: 800; font-size: 1.1rem; }
.rv-head strong { display: block; color: var(--black); line-height: 1.2; }
.rv-head small { color: var(--muted); font-size: .85rem; }
.rv-arrow { position: absolute; top: calc(50% - 34px); width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold); background: var(--paper); color: var(--black); font-size: 1.7rem; line-height: 1; display: grid; place-items: center; padding: 0 0 4px; cursor: pointer; transition: background .2s, transform .2s; }
.rv-arrow:hover { background: var(--gold); transform: scale(1.06); }
.rv-prev { left: 0; } .rv-next { right: 0; }
.rv-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; min-height: 10px; }
.rv-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--cream-deep); transition: background .2s, width .2s; }
.rv-dots span.on { background: var(--gold); width: 26px; border-radius: 6px; }
@media (max-width: 960px) { .rv-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 620px) { .rv { padding-inline: 0; } .rv-card { flex-basis: 100%; } .rv-arrow { top: auto; bottom: -8px; } .rv-prev { left: calc(50% - 120px); } .rv-next { right: calc(50% - 120px); } .rv-dots { margin-top: 18px; } }
@media (prefers-reduced-motion: reduce) { .rv-track { scroll-behavior: auto; } }

/* process tabs: icon above each numbered step */
.tab { display: grid; justify-items: center; gap: 8px; padding: 16px 10px 14px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.tab .step-icon { color: var(--gold); width: 34px; height: 34px; }
.tab[aria-selected="true"] .step-icon { color: var(--black); }
@media (max-width: 960px) { .tab { display: flex; align-items: center; justify-items: start; gap: 12px; text-align: left; padding: 12px 16px; } .tab .step-icon { width: 26px; height: 26px; flex: none; } }

/* live reviews widget */
.g-reviews.live { margin-top: 32px; min-height: 0; }

/* process step text runs the full width of the box */
.panel p { max-width: none; }

/* footer, HighFive layout: about + three link columns on the left, contact + map on the right */
.site-footer .wrap.foot-grid { max-width: 1390px; padding-block: 64px 44px; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 44px; align-items: start; }
.foot-main { display: grid; gap: 44px; min-width: 0; }
.foot-about { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 36px; align-items: center; text-align: center; }
.foot-logo img { width: 190px; height: 190px; border-radius: 50%; display: block; }
.foot-about p { font-size: .95rem; line-height: 1.6; max-width: 660px; margin-inline: auto; }
.site-footer h2 { font-family: var(--body); font-size: 1.3rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 22px; }
.site-footer h2::after { content: ""; display: block; width: 76px; height: 3px; border-radius: 3px; background: var(--gold-deep, var(--gold)); margin: 9px auto 0; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.foot-cols ul { width: fit-content; max-width: 100%; margin-inline: auto; gap: 13px; }
.foot-cols li, .foot-contact li { display: flex; align-items: center; gap: 12px; }
.foot-cols a { font-weight: 800; font-size: .92rem; letter-spacing: .03em; text-transform: uppercase; color: var(--cream); }
.site-footer .fi { flex: none; color: var(--gold); }
.foot-social { display: flex; justify-content: center; gap: 18px; margin-top: 22px; }
.foot-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cream); transition: transform .2s; }
.foot-social a:hover { transform: translateY(-2px); }
.foot-social svg { width: 22px; height: 22px; }
.foot-side { display: grid; gap: 26px; min-width: 0; }
.site-footer .foot-contact { gap: 20px; }
.foot-contact li { gap: 16px; align-items: flex-start; }
.foot-contact .fi { margin-top: 3px; }
.foot-contact a, .foot-contact span { font-weight: 900; font-size: 1.15rem; letter-spacing: .03em; text-transform: uppercase; color: var(--cream); line-height: 1.25; }
.foot-contact small { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: #d5cbb4; margin-top: 4px; }
.foot-contact .foot-mail { font-size: .95rem; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.foot-map { position: relative; aspect-ratio: 35 / 34; border-radius: 10px; overflow: hidden; background: var(--char, #1c1a16); border: 1px solid var(--line); display: grid; place-items: center; }
.foot-map > a { font-weight: 800; color: var(--gold-soft); text-decoration: underline; padding: 16px; text-align: center; }
.foot-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.site-footer > .legal { border-top: 1px solid var(--line); padding: 0; background: #070605; }
.site-footer > .legal .wrap { max-width: 1390px; padding-block: 20px; display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-around; }
@media (max-width: 1100px) {
  .site-footer .wrap.foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .foot-map { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .foot-about, .foot-cols, .foot-side { grid-template-columns: minmax(0, 1fr); }
  .foot-logo { justify-self: center; }
  .foot-cols { gap: 38px; }
  .foot-contact { width: fit-content; margin-inline: auto; }
  .site-footer > .legal .wrap { justify-content: center; text-align: center; }
}

/* closing call-to-action: a box that overlaps the section above and sits in the footer band, as on HighFive */
.cta-float { background: var(--black); padding: 0 0 6px; }
.cta-float .wrap { padding-block: 0; }
.cta-float .cta { position: relative; z-index: 2; margin-top: -100px; max-width: 858px; padding: 30px 30px 38px; border-radius: 12px; border: 4px solid var(--gold-deep, #9c7a2c);
  background: linear-gradient(180deg, var(--cream) 0%, var(--gold-pale) 100%); color: var(--ink); box-shadow: 0 8px 20px rgba(0,0,0,.75); }
.cta-float .cta h2 { color: var(--ink); }
.cta-float .cta h2 .sub { color: var(--gold-deep, #8a6a22); }
.cta-float .cta .lead { color: #2b2620; font-weight: 600; max-width: 700px; margin-inline: auto; }
main > :has(+ .cta-float), :has(+ .cta-float) { padding-bottom: 170px; }
.cta-float + .site-footer .wrap.foot-grid { padding-top: 48px; }
@media (max-width: 760px) { .cta-float .cta { margin-top: -70px; padding: 26px 18px 30px; } :has(+ .cta-float) { padding-bottom: 120px; } }
.btn-dark { background: var(--black); border-color: var(--black); color: var(--cream); }
.btn-dark:hover { background: var(--ink); color: var(--gold-soft); }
.cta-float .btn-line { background: var(--gold); border-color: var(--gold); color: var(--black); }
.cta-float { display: flow-root; position: relative; }
.cta-float .wrap { display: flow-root; overflow: visible; }
.foot-map > span { font-weight: 800; color: var(--gold-soft); text-decoration: underline; padding: 16px; text-align: center; }
.foot-map iframe { pointer-events: none; }
.foot-outline { position: absolute; left: 50%; top: 50%; overflow: visible; pointer-events: none; }
.foot-outline polygon { fill: rgba(234, 67, 53, .13); stroke: #ea4335; stroke-width: 2.5; stroke-dasharray: 7 4; stroke-linejoin: round; }
.foot-map-link { position: absolute; inset: 0; z-index: 2; }
.foot-map-link:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

/* blog: index grid and single post, sized after HighFive (520px cards, 765px reading column) */
.hero.small .lead { max-width: 760px; margin-inline: auto; }
.blog .wrap { max-width: 1140px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.pill { font: inherit; font-weight: 800; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; padding: 10px 18px; border-radius: 10px; border: 2px solid var(--gold); background: var(--paper); color: var(--ink); cursor: pointer; transition: background .2s, transform .2s; }
.pill:hover { transform: translateY(-1px); }
.pill.on { background: var(--gold-pale); }
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 520px)); gap: 26px; justify-content: space-between; }
.post-card { display: flex; flex-direction: column; background: var(--paper); border: 3px solid var(--gold); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); min-width: 0; }
.post-thumb { display: block; aspect-ratio: 512 / 358; overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.post-card:hover .post-thumb img { transform: scale(1.04); }
.post-card-body { padding: 0 26px 26px; display: grid; gap: 12px; }
.post-card h2 { font-size: 1.45rem; line-height: 1.2; background: var(--paper); margin: -26px -8px 0; padding: 14px 8px 0; border-radius: 8px 8px 0 0; position: relative; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--gold-deep); }
.byline { font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.byline span { color: var(--gold-deep); }
.post-card p { font-size: .95rem; line-height: 1.65; max-width: none; }
.post-card .more { font-weight: 800; color: var(--gold-deep); text-decoration: none; }
.post-cat { font-weight: 800; font-size: .8rem !important; letter-spacing: .05em; text-transform: uppercase; }
.post .wrap { max-width: 845px; display: grid; gap: 18px; }
.post { padding-top: 56px; }
.post .crumbs { color: var(--gold-deep); }
.post .crumbs a { color: var(--gold-deep); }
.post h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.12; color: var(--ink); }
.post-hero { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow); display: block; margin-block: 6px 10px; }
.post-body { display: grid; gap: 16px; }
.post-body p, .post-body li { max-width: none; font-size: 1rem; line-height: 1.75; }
.post-body h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.18; margin-top: 18px; }
.post-body h3 { font-size: 1.3rem; margin-top: 8px; }
.post-body ul { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.post-body a, .post-foot a { color: var(--gold-deep); font-weight: 700; }
.post-foot { border-top: 1px solid var(--cream-deep); padding-top: 18px; font-weight: 700; font-size: .92rem; }
@media (max-width: 760px) { .post-grid { grid-template-columns: minmax(0, 1fr); } .post { padding-top: 36px; } }
.post-hero { height: auto; }

/* home intro beside the slider: one boxed, centred paragraph as on HighFive */
.intro-card { background: #fff; border: 1px solid var(--cream-deep); border-radius: 14px; box-shadow: 0 10px 30px rgba(13, 12, 10, .14); padding: 40px; text-align: center; display: grid; gap: 16px; }
.intro-card h2 .sub { margin-top: 8px; }
.intro-card p { max-width: none; font-size: 1rem; line-height: 1.7; margin: 0; }
.intro-card a { color: var(--gold-deep); font-weight: 700; }
@media (max-width: 560px) { .intro-card { padding: 26px 20px; } }

/* whole blog card is clickable: the title link stretches over the card */
.post-card { position: relative; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.post-card:hover { transform: translateY(-3px); }
.post-card h2 { position: static; }
.post-card-body { position: relative; z-index: 1; background: transparent; }
.post-card h2 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.post-thumb { position: relative; z-index: 0; }
.site-footer > .legal a { color: inherit; text-decoration: none; }
.site-footer > .legal a:hover { color: var(--gold-soft); text-decoration: underline; }

/* header logo: crest badge that hangs below the bar and shrinks on scroll */
.brand .crest { display: block; width: 200px; height: auto; margin-bottom: -72px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55)); transition: width .3s ease, margin .3s ease; }
.site-header.scrolled .brand .crest { width: 122px; margin-bottom: -28px; }
@media (max-width: 960px) { .brand .crest { width: 156px; margin-bottom: -52px; } .site-header.scrolled .brand .crest { width: 108px; margin-bottom: -22px; } }
@media (max-width: 560px) { .brand .crest { width: 132px; margin-bottom: -40px; } .site-header.scrolled .brand .crest { width: 96px; margin-bottom: -16px; } }
@media (prefers-reduced-motion: reduce) { .brand .crest { transition: none; } }


/* Why choose us: compact band sized after HighFive (1100px content, 385px checklist, about 500px tall) */
#why.section { padding-block: 34px 112px; }
#why .wrap { max-width: 1140px; }
#why .wrap.split { grid-template-columns: minmax(0, 1fr) 385px; gap: 40px; align-items: center; }
#why .stack { gap: 14px; }
#why .stack p { max-width: 675px; margin-inline: auto; }
#why .btns { justify-content: center; margin-top: 6px; }
#why .checks { padding: 24px 26px; gap: 18px; border: 2px solid var(--gold); border-radius: 12px; }
#why .checks li { grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: center; }
#why .checks li::before { width: 24px; height: 24px; font-size: .8rem; margin: 0; }
#why .checks strong { font-size: 1rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1.5; }
#why .checks span { display: block; line-height: 1.25; }
@media (max-width: 960px) { #why .wrap.split { grid-template-columns: minmax(0, 1fr); } #why .checks { max-width: 420px; margin-inline: auto; } }

/* photo behind a page banner, darkened so the heading stays readable (set --hero-img on the section) */
.hero.has-bg { background: linear-gradient(180deg, rgba(13, 12, 10, .66) 0%, rgba(13, 12, 10, .56) 45%, rgba(13, 12, 10, .74) 100%), var(--hero-img) center 55% / cover no-repeat; }
.hero.has-bg h1, .hero.has-bg .lead { text-shadow: 0 2px 14px rgba(0, 0, 0, .65); }
.hero.has-bg { background-position: center, center var(--hero-pos, 55%); }
.gallery-band { padding-bottom: 0; }
.gallery-band .wrap { max-width: 1390px; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.gallery figure { margin: 0; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; background: var(--ink); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.gallery figure:hover img { transform: scale(1.04); }
@media (max-width: 860px) { .gallery { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }

/* service areas: a job photo that stays still while the page scrolls over it, with curved top and bottom edges and a boxed panel, as on HighFive */
.areas-band { position: relative; background: var(--areas-img) center / cover no-repeat fixed; padding-block: 150px; --edge: clamp(28px, 4.6vw, 64px); }
.areas-band::before, .areas-band::after { content: ""; position: absolute; left: 0; right: 0; height: var(--edge); pointer-events: none; }
.areas-band::before { top: -1px; background: radial-gradient(ellipse 50% 100% at 50% 100%, transparent 99.3%, var(--prev, var(--paper)) 100%); }
.areas-band::after { bottom: -1px; background: radial-gradient(ellipse 50% 100% at 50% 0%, transparent 99.3%, var(--nxt, var(--paper)) 100%); }
.dark + .areas-band { --prev: var(--black); }
.cream + .areas-band { --prev: var(--cream); }
.areas-band:has(+ .cta-float) { --nxt: var(--black); padding-bottom: 240px; }
.areas-band:has(+ .cream) { --nxt: var(--cream); }
.curve:has(+ .areas-band)::after { display: none; }
.section.curve:has(+ .areas-band) { padding-bottom: clamp(48px, 5.500vw, 80px); }
#why.section:has(+ .areas-band) { padding-bottom: 56px; }
.areas-band .areas-card { position: relative; z-index: 1; max-width: 1100px; margin-inline: auto; background: var(--paper); border-radius: 12px; box-shadow: 0 0 23px rgba(3, 3, 3, .55); padding: 36px 40px 40px; }
@media (hover: none), (max-width: 760px) { .areas-band { background-attachment: scroll; padding-block: 90px; } .areas-band:has(+ .cta-float) { padding-bottom: 170px; } }
@media (max-width: 640px) { .areas-band .areas-card { padding: 26px 16px 28px; } }

/* five-step process: bathroom photo behind the band, washed in pale gold so the dark text stays readable */
.process-band { background: linear-gradient(180deg, rgba(241, 226, 182, .84) 0%, rgba(230, 207, 147, .8) 100%), var(--process-img) center 55% / cover no-repeat; }

/* reviews section dips into the top of the black Why Choose Us band, so the band curves inward top and bottom */
#reviews + .dark { position: relative; padding-top: calc(clamp(48px, 5.500vw, 80px) + clamp(28px, 4.600vw, 64px)); }
#reviews + .dark::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(28px, 4.600vw, 64px); background: var(--paper); border-radius: 0 0 50% 50% / 0 0 100% 100%; }

/* light header: cream bar and review strip with dark text, gold accents */
.topbar { background: #efe5cf; color: var(--black); border-bottom: 1px solid #ddcfae; }
.g-badge { background: #fffaf0; border-color: #d9c79b; color: var(--black); }
a.g-badge:hover { color: var(--black); border-color: var(--gold); background: #fff; }
.site-header { background: var(--paper); border-bottom: 1px solid #e2d6b8; }
.site-header.scrolled { box-shadow: 0 10px 24px -14px rgba(13, 12, 10, .45); }
.nav a.link, .nav .drop > button { color: var(--black); }
.nav a.link:hover, .nav .drop > button:hover, .nav a[aria-current="page"] { color: var(--gold-deep, #8a6a22); }
.drop-menu { background: var(--paper); border-color: #e2d6b8; box-shadow: 0 18px 40px -16px rgba(13, 12, 10, .35); }
.drop-menu a { color: var(--black); }
.drop-menu a:hover { background: #f1e7cf; color: var(--black); }
.btn-quote { background: var(--black); border-color: var(--black); color: var(--cream); }
.btn-quote:hover { background: var(--ink); border-color: var(--ink); color: var(--gold-soft); }
.nav-toggle { color: var(--black); border-color: var(--gold); }
@media (max-width: 960px) {
  .nav { background: var(--paper); border-bottom-color: #e2d6b8; box-shadow: 0 18px 30px -18px rgba(13, 12, 10, .4); }
  .drop-menu { background: none; box-shadow: none; }
  .nav .drop > button { color: var(--gold-deep, #8a6a22); }
}

/* header: soft rounded bottom edge at the top of the page, squares off once you scroll */
.site-header { border-bottom-color: transparent; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px; margin-top: -1px; background: var(--paper); border-radius: 0 0 50% 50% / 0 0 100% 100%; box-shadow: 0 10px 18px -12px rgba(13, 12, 10, .35); pointer-events: none; transition: height .3s ease, opacity .3s ease; }
.site-header.scrolled { border-bottom-color: #e2d6b8; }
.site-header.scrolled::after { height: 0; opacity: 0; }
.brand { z-index: 3; }
@media (max-width: 760px) { .site-header::after { height: 20px; } }
@media (prefers-reduced-motion: reduce) { .site-header::after { transition: none; } }

/* home hero: straight bottom edge into the before and after section */
.hero.hero-flat .wrap { padding-bottom: 56px; }
/* flip: the header's bottom edge curves up in the middle, with the corners hanging down */
.site-header::after { background: radial-gradient(ellipse 50% 100% at 50% 100%, transparent 99.200%, var(--paper) 100%); border-radius: 0; box-shadow: none; filter: drop-shadow(0 6px 6px rgba(13, 12, 10, .18)); }

/* Hamburger icon + mobile menu below the crest */
.nav-toggle { width: 48px; height: 44px; padding: 0; border: 2px solid var(--gold); border-radius: 10px; background: transparent; position: relative; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2.5px; border-radius: 2px; background: var(--black); transition: transform .25s ease, opacity .2s ease, top .25s ease; }
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 19.5px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 19.5px; transform: rotate(-45deg); }
@media (max-width: 960px) {
  .site-header { z-index: 50; }
  .brand { position: relative; z-index: 3; }
  .nav { z-index: 2; padding-top: 64px; max-height: calc(100vh - 110px); overflow-y: auto; }
  .site-header.scrolled .nav { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }