/* Norton Heritage Editorial. Generated by site-src/build.py. */
:root {
  --ink: #111418; --ink-soft: #31302D; --body: #45474A; --muted: #75777B;
  --line: #C5C6CB; --hairline: #DCDAD5; --bg: #FCF9F4; --bg-alt: #F6F3EE;
  --brand: #3AA6DC; --accent: #E8871E; --error: #BA1A1A;
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem;
  --s-5: 3rem; --s-6: 5rem; --s-7: 8rem;
  --maxw: 1440px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.65;
}
img, iframe { max-width: 100%; }
h1, h2, h3 {
  font-family: var(--font-heading); font-weight: 900; color: var(--ink);
  line-height: 1.1; letter-spacing: -.02em; margin: 0 0 var(--s-3);
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { margin: 0 0 var(--s-3); }
a { color: var(--ink); }
.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.container-narrow { width: min(100% - 2.5rem, 46rem); }
section { padding-block: var(--s-6); }
@media (min-width: 900px) { section { padding-block: var(--s-7); } }
.label-caps {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2);
}
.link-caps {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); text-underline-offset: 4px;
}
.skip-link {
  position: absolute; left: -9999px; background: var(--ink); color: #fff;
  padding: var(--s-2);
}
.skip-link:focus { left: var(--s-2); top: var(--s-2); z-index: 100; }

/* ---------- buttons: zero radius, no shadow ---------- */
.btn {
  display: inline-block; padding: .95rem 1.6rem; border: 1px solid transparent;
  font-weight: 700; font-size: .8125rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-cta { background: var(--accent); color: var(--ink); }
.btn-cta:hover { background: var(--ink); color: var(--bg); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.btn-ghost-light { background: transparent; color: #fff; border-color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }

/* ---------- header ---------- */
.announce {
  background: var(--ink); color: var(--bg); font-size: .75rem;
  letter-spacing: .06em; text-transform: uppercase; padding-block: .55rem;
}
.announce .container { display: flex; gap: var(--s-2); justify-content: center; }
.announce .sep { color: var(--muted); }
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding-block: var(--s-2);
}
.logo img { display: block; height: 40px; width: auto; }
.site-header nav { display: none; gap: var(--s-3); }
@media (min-width: 1100px) { .site-header nav { display: flex; } }
.site-header nav a {
  text-decoration: none; font-size: .8125rem; font-weight: 600;
  letter-spacing: .02em; color: var(--ink);
}
.site-header nav a:hover { color: var(--brand); }
.header-call {
  background: var(--ink); color: var(--bg); text-decoration: none;
  padding: .8rem 1.2rem; font-weight: 700; font-size: .8125rem;
  letter-spacing: .06em;
}
.header-call:hover { background: var(--brand); color: #fff; }

/* ---------- hero ---------- */
.hero { background: var(--ink); color: var(--bg); }
.hero h1, .hero .label-caps { color: #fff; }
.hero .label-caps { color: var(--accent); }
.hero .subhead { color: #DCDAD5; }
.hero .ticks { color: #EDEAE4; }
.hero .container, .page-hero .container { display: grid; gap: var(--s-5); }
@media (min-width: 1000px) {
  .hero .container, .page-hero .container {
    grid-template-columns: 1.05fr .95fr; gap: var(--s-6);
  }
  /* Centre the columns against each other: the form is taller than the copy,
     and aligning to the top left a large dead band under the buttons. */
  .hero .container { align-items: center; }
  .page-hero .container { align-items: start; }
}
.page-hero { background: var(--bg-alt); border-bottom: 1px solid var(--hairline); }
.page-hero.narrow .container { display: block; max-width: 52rem; }
.subhead { font-size: 1.15rem; max-width: 46ch; }
.hero-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
ul.ticks { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: .7rem; }
ul.ticks li { position: relative; padding-left: 1.6rem; }
ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: .6rem; height: 1px;
  background: var(--accent);
}

/* ---------- forms ---------- */
.lead-form { background: var(--bg); border: 1px solid var(--ink); padding: var(--s-4); }
.hero .lead-form { color: var(--body); }
.lead-form h2 { font-size: 1.5rem; margin-bottom: .35rem; }
.lead-form .form-sub { font-size: .9375rem; color: var(--muted); margin-bottom: var(--s-3); }
.lead-form .form-row { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.lead-form label {
  display: block; font-weight: 700; font-size: .6875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink);
}
.lead-form .req { color: var(--accent); }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%; margin-top: .4rem; padding: .8rem; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 1rem; font-family: var(--font-body);
  font-weight: 400; letter-spacing: normal; text-transform: none; border-radius: 0;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  border-color: var(--ink); outline: 2px solid var(--brand); outline-offset: 1px;
}
.lead-form textarea { resize: vertical; }
.lead-form .btn { width: 100%; }
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.lead-form .form-note {
  font-size: .8125rem; color: var(--muted); margin: var(--s-2) 0 0; text-align: center;
}
.form-error { color: var(--error); font-weight: 700; margin-bottom: var(--s-2); }
.form-success { border: 1px solid var(--ink); padding: var(--s-4); background: var(--bg); }
.midform { background: var(--bg-alt); }

/* ---------- trust bar ---------- */
.trust-bar { background: var(--ink); color: var(--bg); padding-block: var(--s-4); }
.trust-bar ul {
  list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: var(--s-4);
}
@media (min-width: 900px) { .trust-bar ul { grid-template-columns: repeat(5, 1fr); } }
.trust-bar li { font-size: .8125rem; color: #C5C6CB; letter-spacing: .02em; }
.trust-bar li span {
  display: block; font-family: var(--font-heading); font-weight: 900;
  font-size: 1.5rem; color: #fff; margin-bottom: .2rem; letter-spacing: -.01em;
}

/* ---------- intro ----------
   Editorial standfirst: a labelled left rail against the body column, divided
   by rules of different weight so the eye reads rail first, then body. Plaster
   tone separates it from the white services section below. */
.intro { background: var(--bg-alt); }
.intro-grid { display: grid; gap: var(--s-4); }
@media (min-width: 60rem) {
  .intro-grid { grid-template-columns: 4fr 7fr; gap: var(--s-6); }
}
.intro-rail { border-top: 3px solid var(--ink); padding-top: var(--s-3); }
.intro-rail .label-caps { color: var(--muted); margin-bottom: var(--s-3); }
.intro-kicker {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.12;
  letter-spacing: -.01em; color: var(--ink); margin: 0;
  text-wrap: balance;
}
.intro-body { border-top: 1px solid var(--hairline); padding-top: var(--s-3); }
.intro-body > p + p { margin-top: var(--s-3); }
/* One text setting for the whole column. Emphasis belongs to the rail kicker;
   giving the first paragraph its own size, weight and colour made a single
   passage read as two mismatched blocks. Measure is capped because the 7fr
   column otherwise runs past 90 characters a line. */
.intro-body > p {
  max-width: 38rem; font-size: clamp(1.0625rem, 1.15vw, 1.125rem);
  line-height: 1.65; font-weight: 400; color: var(--body);
}

/* ---------- services ---------- */
.services { background: var(--bg); }
.services-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--s-5); }
@media (min-width: 700px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border-top: 1px solid var(--ink); padding: var(--s-3) var(--s-3) var(--s-4) 0;
  transition: background .15s;
}
.service-card:hover { background: var(--bg-alt); }
/* height:auto is required: the width/height attributes on the img map to a
   presentational height, which otherwise wins over aspect-ratio and renders
   the photograph at its full 900px intrinsic height. */
.service-card-img, .service-card-plate {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; margin-bottom: var(--s-3); background: var(--bg-alt);
}
/* Placeholder for services whose photograph has not been produced yet: ruled
   plaster, matching the hairline language rather than an empty grey box. */
.service-card-plate {
  border: 1px solid var(--hairline);
  background-image: repeating-linear-gradient(
    135deg, transparent 0 14px, rgba(17, 20, 24, .06) 14px 15px);
}
.service-card:hover .service-card-plate { border-color: var(--ink); }
.service-card-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: .5rem; }
.service-card h3 { margin: 0; }
.service-card p { margin: 0; font-size: .9375rem; color: var(--body); }
.service-card .arrow {
  margin-top: auto; padding-top: var(--s-3); font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.service-card:hover .arrow { color: var(--brand); }
.more-links { margin-top: var(--s-5); display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* ---------- why / content ---------- */
.why-section { background: var(--bg-alt); }
.why-grid { display: grid; gap: 0; margin-top: var(--s-5); }
@media (min-width: 900px) { .why-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.why { border-top: 1px solid var(--ink); padding-top: var(--s-3); }
.why h3 { margin-bottom: var(--s-2); }
.why p { font-size: .9375rem; margin: 0; }
.content.alt { background: var(--bg-alt); }
.inc-grid, .opt-grid { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 800px) {
  .inc-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .opt-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
}
.inc, .opt { border-top: 1px solid var(--ink); padding-top: var(--s-3); }
.inc h3, .opt h3 { margin-bottom: var(--s-2); }
.inc p, .opt p { font-size: .9375rem; margin: 0; }
.process { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .process { grid-template-columns: repeat(5, 1fr); gap: var(--s-3); } }
.process li { border-top: 1px solid var(--ink); padding-top: var(--s-3); }
.process .step-n {
  display: block; font-family: var(--font-heading); font-weight: 900;
  font-size: 1.6rem; color: var(--accent); margin-bottom: var(--s-2);
}
.process h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.process p { font-size: .875rem; margin: 0; }
.note { font-size: .875rem; color: var(--muted); margin-top: var(--s-4); }

/* ---------- hero background photograph ----------
   Scrim opacity is not cosmetic. Against a worst-case white pixel in the
   photograph, 0.86 is the minimum that keeps the amber overline at 4.5:1; the
   white heading clears it comfortably. The copy column therefore sits at 0.90,
   easing to 0.42 on the right where the opaque form card covers the image. */
.hero--photo {
  background-image:
    linear-gradient(90deg, rgba(17, 20, 24, .94) 0%, rgba(17, 20, 24, .90) 44%,
                    rgba(17, 20, 24, .58) 72%, rgba(17, 20, 24, .42) 100%),
    url("/assets/img/norton-remodeling-hero.webp");
  background-size: cover; background-position: center center;
  background-repeat: no-repeat;
}
/* Below the two-column breakpoint the form stacks under the copy, so the text
   can sit anywhere over the image: scrim the whole thing evenly. */
@media (max-width: 59.99rem) {
  .hero--photo {
    background-image:
      linear-gradient(rgba(17, 20, 24, .90), rgba(17, 20, 24, .90)),
      url("/assets/img/norton-remodeling-hero.webp");
  }
}

/* ---------- photo band ---------- */
.photo-band { padding-block: 0; background: var(--bg); }
.photo-band figure { margin: 0; }
.photo-band img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; border: 1px solid var(--ink);
}
.photo-band figcaption {
  margin-top: var(--s-2); font-size: .75rem; letter-spacing: .04em;
  color: var(--muted);
}

/* ---------- rating ---------- */
.rating { background: var(--bg); border-block: 1px solid var(--hairline); }
.rating .container { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .rating .container { grid-template-columns: 1fr 2fr; gap: var(--s-6); } }
.rating-number {
  font-family: var(--font-heading); font-weight: 900; font-size: 5rem;
  color: var(--ink); line-height: 1; margin: 0;
}
.rating-stars { color: var(--accent); letter-spacing: .3em; margin: var(--s-2) 0; }
.rating-copy h2 { margin-bottom: var(--s-3); }
.rating-copy p { font-size: 1.05rem; }

/* ---------- about preview ---------- */
.about-preview { background: var(--bg-alt); }
.about-preview .container { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .about-preview .container { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.about-quote {
  border-left: 1px solid var(--ink); padding-left: var(--s-4);
  font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.35;
  color: var(--ink);
}

/* ---------- area ---------- */
.area .container { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .area .container { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.town-list {
  list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: .5rem var(--s-3);
  font-size: .9375rem;
}
.town-list li { border-top: 1px solid var(--hairline); padding-top: .5rem; }
.area-map iframe { width: 100%; height: 420px; display: block; border: 1px solid var(--ink); }

/* ---------- faq ---------- */
.faq { background: var(--bg-alt); }
.faq details { border-top: 1px solid var(--ink); padding-block: var(--s-3); }
.faq summary {
  cursor: pointer; font-family: var(--font-heading); font-weight: 700;
  font-size: 1.15rem; color: var(--ink); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: " +"; color: var(--accent); }
.faq details[open] summary::after { content: " -"; }
.faq .faq-a { padding-top: var(--s-2); }
.faq .faq-a p { margin: 0; }

/* ---------- cta band ---------- */
.cta-band { background: var(--ink); color: var(--bg); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #C5C6CB; max-width: 44ch; margin-inline: auto; }
.cta-actions { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; margin-top: var(--s-4); }

/* ---------- breadcrumbs, legal, contact ---------- */
.breadcrumbs {
  padding-block: var(--s-2); font-size: .75rem; color: var(--muted);
  background: var(--bg); border-bottom: 1px solid var(--hairline);
}
.breadcrumbs a { color: var(--muted); }
.legal h2 { font-size: 1.3rem; margin-top: var(--s-5); }
.contact-details { margin: var(--s-4) 0 0; display: grid; gap: .3rem; }
.contact-details dt {
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-top: var(--s-3);
}
.contact-details dd { margin: 0; font-size: 1.05rem; color: var(--ink); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #C5C6CB; padding-block: var(--s-6) var(--s-4); font-size: .9375rem; }
.site-footer .label-caps { color: #fff; }
.foot-grid { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--s-5); } }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.site-footer a { color: #C5C6CB; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.foot-addr { margin-top: var(--s-3); }
.foot-phone { font-family: var(--font-heading); font-size: 1.3rem; color: #fff; }
.foot-legal-h { margin-top: var(--s-4); }
.foot-area { font-size: .875rem; line-height: 1.7; }
.foot-bottom {
  margin: var(--s-5) 0 0; padding-top: var(--s-3);
  border-top: 1px solid #31302D; font-size: .8125rem; color: #75777B;
}

/* ---------- sticky mobile CTA ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink);
}
.mobile-cta a {
  padding: 1rem; text-align: center; text-decoration: none; font-weight: 700;
  font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
}
.mobile-cta .call { background: var(--ink); color: #fff; }
.mobile-cta .quote { background: var(--accent); color: var(--ink); }
@media (max-width: 899px) {
  .mobile-cta[aria-hidden="false"] { display: grid; }
  body { padding-bottom: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}