/* Bernard Building — The Crafted Line, shared interior-page components.
   Loads after tokens.css and style.css on every page (homepage included).
   Everything here extends the approved homepage system: same palette, same
   kerf signature, square geometry, hairlines over shadows, alternating
   dark architectural / warm editorial grounds. */

/* ---------- Section grounds ---------- */
/* Interior pages compose sections from these; adjacent sections must never
   share a ground (dark/warm alternation is brand law). */
.sec { padding-block: var(--section-y); }
.sec-obsidian { background: var(--obsidian); color: var(--warm-white); }
.sec-carbon { background: var(--carbon); color: var(--warm-white); }
.sec-warm { background: var(--warm-white); color: var(--obsidian); }
.sec-parchment { background: var(--parchment); color: var(--obsidian); }
.sec-obsidian h2, .sec-carbon h2,
.sec-obsidian h3, .sec-carbon h3 { color: var(--warm-white); }
.sec-obsidian :focus-visible, .sec-carbon :focus-visible { outline-color: var(--bronze); }
.muted { color: var(--slate); }
.sec-obsidian .muted, .sec-carbon .muted { color: var(--steel); }

/* ---------- Page hero ---------- */
/* Compact dark architectural opener for every interior page. The full
   viewport hero belongs to the homepage alone. */
.page-hero {
  position: relative;
  background: var(--obsidian);
  color: var(--warm-white);
  padding-block: clamp(var(--s-7), 9vw, 128px) clamp(var(--s-6), 7vw, var(--s-8));
  border-bottom: 1px solid var(--line-on-dark);
  overflow: hidden;
}
.page-hero-media {
  position: absolute;
  inset: 0;
}
.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.page-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
}
.page-hero-inner { position: relative; }
.page-hero .eyebrow { margin-bottom: var(--s-4); }
.page-hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.75rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  max-width: 16ch;
}
.page-hero h1 .accent { color: var(--bronze); }
.page-lede {
  margin-top: var(--s-4);
  max-width: 54ch;
  color: var(--steel);
}
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
/* Optional right-hand fact column on desktop */
.page-hero-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) {
  .page-hero-grid { grid-template-columns: repeat(12, 1fr); align-items: end; }
  .page-hero-copy { grid-column: 1 / 9; }
  .page-hero-aside { grid-column: 10 / 13; }
}

/* Breadcrumbs: measured, quiet, on the dark hero */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}
.crumbs a {
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.crumbs a:hover { color: var(--warm-white); border-bottom-color: var(--bronze); }
.crumbs li { display: flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before {
  content: "";
  width: 10px;
  height: 1px;
  background: var(--rule-bronze);
}
.crumbs [aria-current="page"] { color: var(--warm-white); }

/* ---------- Split: media + copy, 12-col asymmetric ---------- */
.split { display: grid; gap: var(--s-6); }
.split + .split { margin-top: clamp(var(--s-7), 8vw, var(--s-8)); }
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
}
.sec-obsidian .split-media img, .sec-carbon .split-media img { border-color: var(--line-on-dark); }
.split-media-tall img { aspect-ratio: 4 / 5; }
.split-copy .eyebrow { margin-bottom: var(--s-4); }
.split-copy h2 { margin-bottom: var(--s-4); }
.split-copy p + p { margin-top: var(--s-3); }
.split-copy .btn { margin-top: var(--s-5); }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, 1fr); align-items: center; }
  .split-media { grid-column: 1 / 8; }
  .split-copy { grid-column: 9 / 13; }
  .split-flip .split-media { grid-column: 6 / 13; order: 2; }
  .split-flip .split-copy { grid-column: 1 / 5; order: 1; }
}

/* Kerf-dash list: facts, inclusions, service points */
.tick-list { margin-top: var(--s-4); border-top: 1px solid var(--line-on-light); }
.sec-obsidian .tick-list, .sec-carbon .tick-list { border-top-color: var(--line-on-dark); }
.tick-list li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-on-light);
  font-size: var(--fs-small);
  font-weight: 600;
}
.sec-obsidian .tick-list li, .sec-carbon .tick-list li { border-bottom-color: var(--line-on-dark); }
.tick-list li::before {
  content: "";
  width: 12px;
  height: 1px;
  background: var(--bronze-deep);
  flex: none;
  transform: translateY(-4px);
}
.sec-obsidian .tick-list li::before, .sec-carbon .tick-list li::before { background: var(--bronze); }

/* ---------- Prose: long-form editorial (pillars, blog posts) ---------- */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: none;
  margin: clamp(var(--s-6), 5vw, var(--s-7)) 0 var(--s-4);
}
.prose h3 {
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  margin: var(--s-6) 0 var(--s-3);
}
.prose p { margin: var(--s-4) 0 0; }
.prose a { color: var(--bronze-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.prose ul, .prose ol { margin: var(--s-4) 0 0; }
.prose ul li {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 14px;
  height: 1px;
  background: var(--bronze-deep);
}
.prose ol { counter-reset: prose-step; }
.prose ol li {
  counter-increment: prose-step;
  position: relative;
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
}
.prose ol li::before {
  content: counter(prose-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--s-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-small);
  color: var(--bronze-deep);
}
.prose img {
  width: 100%;
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
  margin: var(--s-5) 0 0;
}
.prose blockquote {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) var(--s-5);
  background: var(--parchment);
  border-left: 2px solid var(--bronze);
  border-radius: var(--radius);
  font-weight: 600;
}
.sec-parchment .prose blockquote { background: var(--warm-white); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-on-light); }
.faq details { border-bottom: 1px solid var(--line-on-light); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(var(--bronze-deep), var(--bronze-deep)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--bronze-deep), var(--bronze-deep)) center / 1.5px 12px no-repeat;
  transition: transform var(--dur) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p {
  padding: 0 0 var(--s-4);
  max-width: 62ch;
  color: var(--slate);
}
@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* ---------- Interior proof band: the homepage treatment, per-page content ---------- */
.page-proof .proof-head { margin-bottom: clamp(var(--s-6), 6vw, var(--s-7)); }
/* Long ghost words (suburb names) step down so the word still reads as one mark */
.proof-ghost.ghost-l { font-size: clamp(5.5rem, 15vw, 14rem); }
.proof-ghost.ghost-xl { font-size: clamp(3.25rem, 9.5vw, 9rem); }
/* Stats restated on a light ground (services hub, where the dark band would
   break the section alternation) */
.sec-parchment .stats-grid { border-top-color: var(--line-on-light); }
.sec-parchment .stat dt { color: var(--slate); }

/* ---------- Service cards (hub + cross-links) ---------- */
.svc-grid {
  display: grid;
  gap: var(--s-6);
}
.svc-card {
  position: relative;
  border-top: 1px solid var(--line-on-dark);
  padding-top: var(--s-4);
}
.sec-warm .svc-card, .sec-parchment .svc-card { border-top-color: var(--line-on-light); }
.svc-card figure { margin-bottom: var(--s-4); overflow: hidden; border-radius: var(--radius); }
.svc-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
  transition: transform 400ms var(--ease-out);
}
.sec-warm .svc-card img, .sec-parchment .svc-card img { border-color: var(--line-on-light); }
.svc-card h3 {
  font-size: var(--fs-h3);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--s-3);
}
.svc-card p {
  font-size: var(--fs-small);
  max-width: 44ch;
  color: var(--slate);
}
.sec-obsidian .svc-card p, .sec-carbon .svc-card p { color: var(--steel); }
.svc-card-link { text-decoration: none; color: inherit; }
.svc-card-link::after { content: ""; position: absolute; inset: 0; }
.svc-card-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bronze);
}
.sec-warm .svc-card-cue, .sec-parchment .svc-card-cue { color: var(--bronze-deep); }
.svc-card-cue svg { width: 14px; height: 14px; }
@media (hover: hover) {
  .svc-card:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card img { transition: none; }
  .svc-card:hover img { transform: none; }
}
@media (min-width: 768px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .svc-grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* intentional asymmetry, as on the homepage work row */
  .svc-grid > .svc-card:nth-child(even) { transform: translateY(var(--s-5)); }
}
@media (max-width: 1023px) {
  .svc-grid > .svc-card:nth-child(even) { transform: none; }
}

/* ---------- Area links: suburbs served / nearby suburbs ---------- */
/* Flex-wrap, not grid: links in a short final row grow to fill the full
   width, so every border-bottom rule line runs edge to edge. */
.area-grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-6);
  border-top: 1px solid var(--line-on-light);
}
.sec-obsidian .area-grid, .sec-carbon .area-grid { border-top-color: var(--line-on-dark); }
.area-grid > * {
  flex: 1 1 calc((100% - var(--s-6)) / 2);
  min-width: 0;
}
.area-grid a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-width: 0;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-on-light);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}
.sec-obsidian .area-grid a, .sec-carbon .area-grid a { border-bottom-color: var(--line-on-dark); }
.area-grid a::before {
  content: "";
  width: 12px;
  height: 1px;
  background: var(--bronze-deep);
  flex: none;
  transition: width var(--dur) var(--ease-out);
}
.sec-obsidian .area-grid a::before, .sec-carbon .area-grid a::before { background: var(--bronze); }
.area-grid a:hover::before { width: 20px; }
.area-grid a:hover { color: var(--bronze-deep); }
.sec-obsidian .area-grid a:hover, .sec-carbon .area-grid a:hover { color: var(--bronze); }
@media (min-width: 768px) { .area-grid > * { flex-basis: calc((100% - 2 * var(--s-6)) / 3); } }
@media (min-width: 1024px) { .area-grid > * { flex-basis: calc((100% - 3 * var(--s-6)) / 4); } }
@media (prefers-reduced-motion: reduce) { .area-grid a::before { transition: none; } }

/* ---------- Review grid (the full record, /reviews/) ---------- */
/* Flex-wrap rows, not multicol: cards in a row stretch to equal height,
   and a short final row grows to fill the full width — straight bottom edge. */
.review-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: clamp(var(--s-6), 6vw, var(--s-7));
}
.review-card {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--warm-white);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
}
.review-card blockquote {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--slate);
}
@media (min-width: 700px) { .review-card { flex-basis: calc((100% - var(--s-4)) / 2); } }
@media (min-width: 1100px) { .review-card { flex-basis: calc((100% - 2 * var(--s-4)) / 3); } }

/* Featured single review (suburb pages, service pages): always a full row,
   capped to a readable measure. */
.review-feature {
  flex-basis: 100%;
  max-width: 720px;
}
/* On dark grounds the section's warm-white text would cascade into the
   white card and vanish; restore dark text and a readable measure. */
.sec-obsidian .review-card,
.sec-carbon .review-card {
  color: var(--obsidian);
  max-width: 68ch;
}
.review-feature p { font-size: var(--fs-body); line-height: 1.7; color: var(--slate); }

/* Lede under a section-head h2 */
.section-lede { margin-top: var(--s-4); max-width: 58ch; }

/* h3 group label above an area-grid */
.area-h3 {
  font-size: 1.1rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  margin: clamp(var(--s-6), 5vw, var(--s-7)) 0 var(--s-3);
}
.area-h3:first-of-type { margin-top: 0; }

/* ---------- Lead form ---------- */
.lead-form { display: grid; gap: var(--s-4); }
.lead-form .field { display: grid; gap: var(--s-2); }
.lead-form label {
  font-size: var(--fs-small);
  font-weight: 700;
}
.lead-form label .optional {
  font-weight: 400;
  color: var(--slate);
}
.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--obsidian);
  background: var(--warm-white);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
}
.lead-form textarea { min-height: 128px; resize: vertical; }
.lead-form input:focus-visible,
.lead-form select:focus-visible,
.lead-form textarea:focus-visible {
  outline: 2px solid var(--bronze-deep);
  outline-offset: 0;
  border-color: var(--bronze-deep);
}
.lead-form .btn { justify-self: start; }
.form-note { font-size: var(--fs-eyebrow); color: var(--slate); }
/* Status line: written by js/form.js after submit. Failure must name the
   fallback (call / email), never dead-end. */
.form-status { display: none; font-weight: 600; }
.form-status.is-error, .form-status.is-sent { display: block; }
.form-status.is-sent { color: var(--bronze-deep); }
/* honeypot: visually gone, still in the form for bots */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .lead-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}

/* Job sheet card: the form framed as a parchment panel. Works on the dark
   closer and on warm sections; pins its own text colour for both. */
.lead-form-card {
  background: var(--parchment);
  color: var(--obsidian);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
  padding: var(--s-4);
}
@media (min-width: 768px) {
  .lead-form-card { padding: var(--s-5); }
}
.lead-form-head { margin-bottom: var(--s-2); }
.lead-form-head .eyebrow { margin-bottom: var(--s-2); }
.lead-form-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--obsidian);
}
.lead-form-card .btn { justify-self: stretch; width: 100%; }

/* Service checks: square tiles, bronze only on the checked state */
.lead-checks { border: 0; padding: 0; margin: 0; min-width: 0; }
.lead-checks legend {
  font-size: var(--fs-small);
  font-weight: 700;
  padding: 0;
  margin-bottom: var(--s-2);
}
.lead-checks-grid { display: grid; gap: var(--s-2); }
.lead-check {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  background: var(--warm-white);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out);
}
.lead-check:hover { border-color: var(--slate); }
.lead-check:has(input:checked) { border-color: var(--bronze-deep); }
.lead-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.lead-check-box {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--warm-white);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
  color: var(--warm-white);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.lead-check-box svg {
  width: 12px;
  height: 12px;
  opacity: 0;
}
.lead-check input:checked + .lead-check-box {
  background: var(--bronze-deep);
  border-color: var(--bronze-deep);
}
.lead-check input:checked + .lead-check-box svg { opacity: 1; }
.lead-check input:focus-visible + .lead-check-box {
  outline: 2px solid var(--bronze-deep);
  outline-offset: 2px;
}
@media (min-width: 480px) {
  .lead-checks-grid { grid-template-columns: 1fr 1fr; }
  /* fifth tile: same width as its siblings, centred under the pair above */
  .lead-check-other {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--s-2) / 2);
  }
}

/* ---------- Footer, expanded sitewide ---------- */
.footer-grid {
  display: grid;
  gap: var(--s-6);
  padding-block: var(--s-6) var(--s-5);
}
.footer-brand p {
  margin-top: var(--s-4);
  max-width: 34ch;
}
.footer-col h2 {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-white);
  margin-bottom: var(--s-3);
  max-width: none;
  line-height: 1.4;
}
.footer-col li { padding: var(--s-1) 0; }
.footer-col a {
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer-col a:hover { color: var(--warm-white); border-bottom-color: var(--bronze); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  justify-content: space-between;
  border-top: 1px solid var(--line-on-dark);
  padding-top: var(--s-4);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
}

/* ---------- Nav: current page marker ---------- */
.nav-list a[aria-current="page"] { border-bottom-color: var(--bronze); }

/* ---------- Blog index cards ---------- */
/* Flex-wrap rows: a short final row (1-2 cards) grows to fill the full
   width instead of leaving an orphan narrow card. */
.post-grid { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.post-card {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
  border-top: 1px solid var(--line-on-light);
  padding-top: var(--s-4);
}
.post-card-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
  margin-bottom: var(--s-4);
}
.post-card .eyebrow { margin-bottom: var(--s-3); }
.post-card h3 {
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: var(--s-2);
}
.post-card h3 a { text-decoration: none; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card p { font-size: var(--fs-small); color: var(--slate); max-width: 52ch; }
.post-card:hover h3 { color: var(--bronze-deep); }
@media (min-width: 768px) { .post-card { flex-basis: calc((100% - var(--s-6)) / 2); } }
@media (min-width: 1024px) { .post-card { flex-basis: calc((100% - 2 * var(--s-6)) / 3); } }

/* ---------- Sitemap page ---------- */
/* Full-width groups stacked in normal flow; each group's link list wraps
   into even flex rows, so every group closes on a straight edge (multicol
   balanced by height and left ragged column bottoms). */
.sitemap-group { margin-bottom: var(--s-5); }
.sitemap-group h2 {
  font-size: 1.1rem;
  letter-spacing: 0;
  margin-bottom: var(--s-2);
}
.sitemap-group ul { display: flex; flex-wrap: wrap; column-gap: var(--s-6); }
.sitemap-group li { flex: 1 1 100%; min-width: 0; padding: var(--s-1) 0; font-size: var(--fs-small); }
.sitemap-group a { color: var(--slate); text-decoration: none; }
.sitemap-group a:hover { color: var(--bronze-deep); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 700px) { .sitemap-group li { flex-basis: calc((100% - var(--s-6)) / 2); } }
@media (min-width: 1100px) { .sitemap-group li { flex-basis: calc((100% - 2 * var(--s-6)) / 3); } }