/* bastropcountydemolition.com
   System (2026-10-08 design pass, Ryan's direction): one 1200px container with 32px gutters (20px under 768px),
   a 12-column grid with a 24px gap, one left edge, spacing from 4/8/16/24/32/48/64/96 only, one size per type level,
   one 52px square button, radius 0 everywhere, no 1px rules. Measure is set by grid columns, never by max-width. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/oswald-600.woff2") format("woff2"); }

:root {
  --container: 1200px;
  --gutter: 32px;
  --gap: 24px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px;
  --section: var(--s8);

  --canvas: #ffffff;
  --ink: #1b1f22;
  --iron: #23292e;
  --iron-2: #2e363c;
  --iron-3: #384148;
  --on-iron-soft: #c7ced4;
  --panel: #eef0f2;
  --panel-2: #e2e6e9;
  --steel: #5a636b;
  --field-edge: #6b747c;
  --accent: #fb923c;
  --accent-deep: #f68a2e;
  --shade: 17, 20, 23;

  --font: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --display: "Oswald", system-ui, sans-serif;
  --t-body: 18px;
  --t-lede: 20px;
  --t-label: 16px;
  --t-h3: 22px;
  --t-h2: 40px;
  --t-h1: 64px;
  --t-stat: 48px;
  --btn-h: 52px;
}
@media (max-width: 1023px) { :root { --t-h1: 52px; --t-h2: 36px; --t-stat: 40px; } }
@media (max-width: 767px) { :root { --gutter: 20px; --section: var(--s7); --t-h1: 40px; --t-h2: 32px; --t-stat: 36px; } }

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: var(--t-body); line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

/* Type: one rule per level */
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; text-align: left; }
h1 { font-size: var(--t-h1); line-height: 1.04; margin-bottom: var(--s4); }
h2 { font-size: var(--t-h2); line-height: 1.1; margin-bottom: var(--s4); }
h3 { font-size: var(--t-h3); line-height: 1.2; margin-bottom: var(--s2); }
p { margin: 0 0 var(--s3); }
ul, ol { margin: 0 0 var(--s3); }
.lede { font-size: var(--t-lede); line-height: 1.55; }
.label { display: block; font-family: var(--font); font-weight: 700; font-size: var(--t-label); line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--iron); margin: 0 0 var(--s3); }
.on-dark .label { color: var(--accent); }

a { color: var(--iron); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.on-dark a { color: #ffffff; }
.on-dark a:hover { color: #ffffff; text-decoration-color: #ffffff; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--accent); }
.on-dark :focus-visible { outline-color: #ffffff; }
.skip-link { position: absolute; top: -100px; left: var(--s2); background: var(--iron); color: #fff; padding: var(--s2) var(--s3); z-index: 100; }
.skip-link:focus { top: var(--s2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Container and grid */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
@media (max-width: 900px) { .grid > .span-4, .grid > .span-6, .grid > .span-7, .grid > .span-8 { grid-column: 1 / -1; } }

/* One button */
.btn { display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); padding: 0 var(--s4); margin: 0; border: 0; background: var(--accent); color: var(--ink); font-family: var(--display); font-weight: 600; font-size: var(--t-body); line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: inset 0 0 0 2px var(--accent); }
.btn:hover { background: var(--accent-deep); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent-deep); }
.btn-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-secondary:hover { background: var(--ink); color: #ffffff; box-shadow: inset 0 0 0 2px var(--ink); }
.on-dark .btn { color: var(--ink); text-decoration: none; }
.on-dark .btn-secondary { color: #ffffff; box-shadow: inset 0 0 0 2px #ffffff; }
.on-dark .btn-secondary:hover { background: #ffffff; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 0; }
@media (max-width: 480px) { .btn-row .btn { width: 100%; } }

/* Header */
.site-header { background: var(--canvas); position: relative; z-index: 20; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 80px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* A-2 lockup: inline outlined SVG (colors are in the paths). Sized by height; width follows the viewBox (5.4725:1). */
.brand svg { display: block; flex: none; width: auto; height: 52px; }
/* 1024-1199: the full nav needs 973px beside a 52px lockup; at 46px the lockup leaves 20px to spare at 1024. */
@media (min-width: 1024px) and (max-width: 1199px) { .brand svg { height: 46px; } }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-btn { display: none; align-items: center; height: 44px; padding: 0 var(--s3); font-weight: 600; cursor: pointer; background: var(--panel); }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; align-items: center; gap: var(--s1); }
.nav a:not(.btn), .nav .parent { color: var(--ink); text-decoration: none; font-weight: 600; display: block; padding: var(--s2) var(--s3); line-height: 1.6; }
.nav a:not(.btn):hover, .nav .parent:hover { background: var(--panel); color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.nav .parent { cursor: default; }
.nav .parent::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: var(--s2); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.nav .has-sub { position: relative; }
.nav .sub { display: none; position: absolute; top: 100%; left: 0; min-width: 300px; background: var(--canvas); padding: var(--s2); box-shadow: 0 16px 32px rgba(27, 31, 34, 0.18); }
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub { display: block; }
.nav .sub a { font-weight: 400; }
.nav .nav-cta { margin-left: var(--s3); }
@media (max-width: 1023px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; width: 100%; padding: 0 0 var(--s4); }
  .nav-toggle:checked ~ .nav { display: block; }
  .nav-toggle:focus-visible + .menu-btn { outline: 3px solid var(--ink); outline-offset: 2px; }
  .bar { flex-wrap: wrap; }
  .nav > ul { display: block; }
  .nav a:not(.btn), .nav .parent { padding: var(--s2) 0; }
  .nav .parent::after { display: none; }
  .nav .parent { color: var(--steel); }
  .nav .sub { display: block; position: static; box-shadow: none; padding: 0 0 0 var(--s3); min-width: 0; }
  .nav .nav-cta { margin: var(--s3) 0 0; }
}
@media (max-width: 480px) {
  .brand svg { height: 40px; }
  .bar { min-height: 64px; }
}
/* Keeps the lockup and the Menu button on one row down to 360px phones. */
@media (max-width: 374px) { .brand svg { height: 36px; } }

/* Dark photo heroes. Text sits on the darkened photo, aligned to the container. No panel behind it. */
.hero, .page-hero { position: relative; background: var(--iron); color: #ffffff; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 55%; z-index: -2; }
.hero-shade { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(var(--shade), 0.9) 0%, rgba(var(--shade), 0.72) 40%, rgba(var(--shade), 0.3) 70%, rgba(var(--shade), 0.12) 100%),
    linear-gradient(0deg, rgba(var(--shade), 0.92) 0%, rgba(var(--shade), 0) 45%); }
.hero h1, .page-hero h1 { color: #ffffff; }
.hero p, .page-hero p { color: #e6e9ec; }
.hero .hero-inner { padding-top: var(--s8); padding-bottom: var(--s6); }
.hero-grid { row-gap: 0; }
.hero-bg-home { object-position: 82% 45%; }
.nowrap { white-space: nowrap; }
.facts { margin-top: var(--s8); }
.facts strong { display: block; font-family: var(--display); font-weight: 600; font-size: var(--t-stat); line-height: 1.1; color: #ffffff; }
.facts span { display: block; margin-top: var(--s2); color: var(--on-iron-soft); font-weight: 600; line-height: 1.4; }
@media (max-width: 900px) {
  .facts .span-3 { grid-column: span 6; }
  /* the text runs the full width here, so the overlay has to hold up over the bright right side too */
  .hero-shade { background: linear-gradient(0deg, rgba(var(--shade), 0.92) 0%, rgba(var(--shade), 0.8) 50%, rgba(var(--shade), 0.72) 100%); }
}
@media (max-width: 767px) {
  .hero .hero-inner { padding-top: var(--s7); padding-bottom: var(--s5); }
  .facts { margin-top: var(--s7); }
  /* Home hero on phones: the photo is a band across the top so the whole machine stays in frame, fading into iron
     where the text starts. */
  .hero-bg-home { height: 360px; bottom: auto; object-position: 80% 50%; }
  .hero:has(.hero-bg-home) .hero-shade { background: linear-gradient(180deg, rgba(var(--shade), 0) 0, rgba(var(--shade), 0.15) 180px, var(--iron) 360px, var(--iron) 100%); }
  .hero:has(.hero-bg-home) .hero-inner { padding-top: 288px; }
}

/* Inner-page photo headers (service, guide, areas, about). The H1 and lede run 8 columns, to about 65% of the width at
   1024 and up, so the overlay holds at 0.84 through the text and only then opens up the photo. Under 900 the text runs
   full width, so the overlay is even. 0.82 is the floor for the orange label over white sky (4.5:1). Measured by
   scripts/hero_contrast.py (2026-10-08, after the service photos were relit brighter). */
.page-hero .hero-shade { background:
    linear-gradient(90deg, rgba(var(--shade), 0.9) 0%, rgba(var(--shade), 0.84) 64%, rgba(var(--shade), 0.4) 82%, rgba(var(--shade), 0.15) 100%),
    linear-gradient(0deg, rgba(var(--shade), 0.92) 0%, rgba(var(--shade), 0) 45%); }
@media (max-width: 900px) {
  .page-hero .hero-shade { background: linear-gradient(0deg, rgba(var(--shade), 0.92) 0%, rgba(var(--shade), 0.85) 50%, rgba(var(--shade), 0.84) 100%); }
}
.page-hero .hero-inner { padding-top: var(--s3); padding-bottom: var(--s7); }
.page-hero.has-photo .hero-inner { padding-bottom: var(--s8); }
.page-hero .hero-text { padding-top: var(--s7); }
.page-hero .dateline { color: var(--on-iron-soft); font-weight: 600; }
@media (max-width: 767px) { .page-hero .hero-text { padding-top: var(--s6); } .page-hero.has-photo .hero-inner { padding-bottom: var(--s7); } }

/* Breadcrumbs */
.crumbs { color: var(--on-iron-soft); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); }
.crumbs a, .crumbs span { display: inline-block; padding: 10px 0; }

/* Sections and bands (same padding on every section; the hero is the only exception) */
.section { padding: var(--section) 0; }
.band-dark { background: var(--iron); color: #ffffff; }
.band-dark h2, .band-dark h3 { color: #ffffff; }
.band-dark p { color: var(--on-iron-soft); }
.band-gray { background: var(--panel); }
.section-head { margin-bottom: var(--s6); }
.section-head p:last-child, .hero-text > :last-child, .faq-intro > :last-child { margin-bottom: 0; }

/* Service tiles: a full-width featured first tile, then six 4-column tiles in two full rows. Nothing stranded.
   Regular tiles share 4:3; the featured tile is 3:1 (2:1 on tablet, 4:3 on phones). */
.tiles > li { display: block; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 3; overflow: hidden; color: #ffffff; text-decoration: none; background: var(--iron); isolation: isolate; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; transition: transform 0.4s ease; }
.tile-body { padding: var(--s8) var(--s4) var(--s4); background: linear-gradient(0deg, rgba(var(--shade), 0.95) 0%, rgba(var(--shade), 0.8) 55%, rgba(var(--shade), 0) 100%); }
.tile h3 { color: #ffffff; }
.tile p { margin: 0; color: #e6e9ec; line-height: 1.45; }
.tile:hover { color: #ffffff; }
.tile:hover img { transform: scale(1.04); }
.tile:hover h3 { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.tiles > .featured .tile { aspect-ratio: 3 / 1; }
@media (max-width: 1023px) { .tiles > .span-4 { grid-column: span 6; } .tiles > .featured .tile { aspect-ratio: 2 / 1; } }
@media (max-width: 600px) { .tiles > .span-4, .tiles > .featured { grid-column: 1 / -1; } .tiles > .featured .tile { aspect-ratio: 4 / 3; } }

/* Process: five equal tracks across the container, one-line titles so the bodies start level */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--display); font-weight: 600; font-size: var(--t-stat); line-height: 1.1; color: var(--accent); margin-bottom: var(--s3); }
.steps h3 { white-space: nowrap; }
.steps p { margin: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } }

/* Towns split */
.split { align-items: center; }
.split figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.town-list { list-style: none; padding: 0; columns: 2; column-gap: var(--gap); }
.town-list li { font-weight: 600; padding: var(--s1) 0; }

/* Guide cards: 3 across, one aspect ratio. Each card spans three rows of the list's grid and shares them through
   subgrid, so the image, title, and description rows line up across a row of cards whatever the title length. */
.cards > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.card { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; background: var(--iron-2); color: #ffffff; text-decoration: none; }
.on-dark .card { text-decoration: none; }
.card:hover { background: var(--iron-3); color: #ffffff; }
.card:hover h3 { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card h3 { margin: 0; padding: var(--s4) var(--s4) var(--s2); }
.card p { margin: 0; padding: 0 var(--s4) var(--s4); color: var(--on-iron-soft); }
@media (max-width: 900px) { .cards > .span-4 { grid-column: 1 / -1; } }

/* FAQ: intro in 4 columns, accordion in 8 */
.faq details { background: var(--panel); margin-bottom: var(--s2); }
.band-gray .faq details { background: var(--canvas); }
.faq details:last-child { margin-bottom: 0; }
.faq summary { position: relative; display: block; cursor: pointer; font-weight: 600; line-height: 1.5; padding: 20px 64px 20px var(--s4); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: var(--s4); top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: var(--t-h3); line-height: 1; color: var(--ink); }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 var(--s4) var(--s3); }

/* Inner pages: prose in 8 columns, aside panel in 4 */
.prose h2 { margin-top: var(--s6); }
.prose > h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose > :last-child { margin-bottom: 0; }
.aside-box { background: var(--panel); padding: var(--s4); position: sticky; top: var(--s4); }
.aside-box ul { list-style: none; margin: 0; padding: 0; }
.aside-box a:not(.btn) { display: inline-block; padding: 10px 0; line-height: 1.4; }
.aside-box a[aria-current="page"] { color: var(--ink); text-decoration: none; font-weight: 700; }
.contact-side img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: var(--s4); }
@media (max-width: 900px) { .aside-box { position: static; } }

/* Tables and sources */
.table-scroll { overflow-x: auto; margin: 0 0 var(--s3); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3); }
.data-table thead th { background: var(--iron); color: #ffffff; font-weight: 600; }
.data-table tbody tr:nth-child(odd) { background: var(--panel); }
.table-note { color: var(--steel); }
.sources li { margin-bottom: var(--s2); }

/* Contact form */
.quote-form .field { margin-bottom: var(--s4); }
.quote-form label { display: block; font-weight: 600; margin-bottom: var(--s2); }
.quote-form .optional { font-weight: 400; color: var(--steel); }
.quote-form input, .quote-form select, .quote-form textarea { display: block; width: 100%; height: var(--btn-h); font: inherit; color: var(--ink); background: var(--canvas); border: 2px solid var(--field-edge); padding: 0 var(--s3); }
.quote-form textarea { height: auto; min-height: 176px; padding: var(--s3); resize: vertical; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent); }
.quote-form .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
@media (max-width: 600px) { .quote-form .two { grid-template-columns: minmax(0, 1fr); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.turnstile-box { min-height: 65px; width: 300px; line-height: 0; }
.form-status { margin: var(--s3) 0 0; font-weight: 600; min-height: 1.6em; }
.form-status.is-error::before { content: "! "; font-weight: 700; }
.form-note { margin: var(--s3) 0 0; color: var(--steel); }
.form-sent { background: var(--panel); padding: var(--s5); }
.form-sent h2 { margin: 0; }
@media (max-width: 480px) { .form-actions .btn { width: 100%; } }

/* Footer */
.site-footer { background: var(--iron); color: var(--on-iron-soft); padding: var(--s8) 0 var(--s6); }
.site-footer a:not(.btn) { color: #ffffff; text-decoration: none; display: inline-block; padding: 10px 0; line-height: 1.4; }
.site-footer a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a.brand { display: flex; max-width: 258px; padding: 0; }
.site-footer .brand svg { width: 100%; height: auto; }
.site-footer .btn-row { margin-top: var(--s4); }
.footer-base { margin: var(--s6) 0 0; }
@media (max-width: 1023px) { .site-footer .span-3 { grid-column: span 6; } }
@media (max-width: 600px) { .site-footer .span-3 { grid-column: 1 / -1; } }