@font-face{font-family:'Fira Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/firasans-italic-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/firasans-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/firasans-normal-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/firasans-normal-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/firasans-normal-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Kreon';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/kreon-normal-300-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Superior Well Drilling: the driller's well log.
   Palette from their logo (red, black, royal blue, white) laid over limestone cream, with the strata of a
   south Georgia well log (topsoil, red clay, sand and clay, Hawthorn clay, Floridan limestone, water) as the
   column running down the left edge of every page. Kreon (slab, like stenciled log headings) + Fira Sans. */
:root {
  --red: #a8070d;
  --red-hi: #c4161c;
  --red-light: #f0584c;
  --ink: #1a1714;
  --ink-2: #2a2520;
  --blue: #1530c8;
  --blue-deep: #0d1f8c;
  --paper: #f3ecdc;
  --paper-2: #e9dfc7;
  --white: #fffdf8;
  --text: #221e1a;
  --muted: #5b5248;
  --line: #d6c9ab;
  --topsoil: #3e2c1f;
  --clay: #a2492b;
  --sand: #d9b878;
  --marl: #878b6c;
  --lime: #e8dfc6;
  --disp: "Kreon", "Rockwell", "Roboto Slab", Georgia, serif;
  --body: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rail: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 100px; }
body { margin: 0; font: 400 17px/1.65 var(--body); color: var(--text); background: var(--paper); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; overflow-wrap: break-word; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
blockquote, figure { margin: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--red); color: #fff; padding: 10px 16px; font-weight: 700; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.wrap > *, .two > *, .hero-in > *, .contact > *, .about > *, .faq-wrap > *, .why > *, .under > *, .town > *, .log-row > *, .phero-in > *, .ftr-grid > *, .cta-in > *, .f-row > * { min-width: 0; }

svg:not(.raw) path, svg:not(.raw) circle, svg:not(.raw) rect { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn svg, .more svg, .ftr-contact svg, .clist svg, .tip svg, .tc-go svg, .nav-call svg, .fab svg { width: 20px; height: 20px; flex: none; }

/* ---------- type ---------- */
.tag { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 600 0.8rem/1.3 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.tag .tick { width: 22px; height: 0; border-top: 3px solid currentColor; flex: none; position: relative; }
.tag .tick::after { content: ""; position: absolute; left: 0; top: -9px; height: 15px; border-left: 3px solid currentColor; }
.tag-light { color: var(--red-light); }
.h2 { font: 700 clamp(2rem, 4.4vw, 3.4rem)/1.02 var(--disp); color: var(--ink); margin-bottom: 18px; letter-spacing: -0.01em; }
.h2-light { color: var(--white); }
.h3 { font: 700 1.6rem/1.15 var(--disp); color: var(--ink); margin-bottom: 14px; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 64ch; }
.head { margin-bottom: 44px; max-width: 820px; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border: 3px solid var(--ink); font: 700 1.05rem/1.15 var(--disp); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s; }
.btn-lg { min-height: 58px; padding: 14px 30px; font-size: 1.15rem; }
.btn-red { background: var(--red); color: #fff; box-shadow: 5px 5px 0 var(--ink); }
.btn-red:hover { background: var(--red-hi); transform: translate(-1px, -1px); box-shadow: 7px 7px 0 var(--ink); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn-white { background: var(--white); color: var(--blue-deep); border-color: var(--white); }
.btn-white:hover { background: var(--paper); }
.btn-ghost { background: transparent; color: #fff; border-color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn:active { transform: translate(1px, 1px); }
.actions { display: flex; flex-wrap: wrap; gap: 16px; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; font: 700 1.05rem/1 var(--disp); color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--red); }
.more:hover { color: var(--red); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; border-bottom: 3px solid var(--ink); }
.hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(243, 236, 220, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hdr-in { display: flex; align-items: center; gap: 22px; min-height: 76px; padding: 0 32px 0 calc(var(--rail) + 20px); max-width: 1500px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-right: auto; text-decoration: none; min-width: 0; }
.mark { width: 32px; height: 46px; flex: none; }
.mark .m-red { fill: var(--red); stroke: var(--ink); stroke-width: 2; }
.mark .m-lat { stroke: #fff; stroke-width: 1.4; }
.mark .m-pipe { stroke: var(--ink); stroke-width: 2.4; }
.mark .m-drop { fill: var(--blue); stroke: none; }
.brand-txt { display: grid; line-height: 1; min-width: 0; }
.brand-txt b { font: 700 1.75rem/0.9 var(--disp); color: var(--red); letter-spacing: 0.08em; text-transform: uppercase; }
.brand-txt small { font: 600 0.75rem/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-top: 5px; }
.nav { display: flex; gap: 2px; }
.nav a { position: relative; padding: 10px 11px; font-weight: 500; font-size: 0.97rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.2s; }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--red); }
.nav-call { display: none !important; }
.menu { display: none; }
.hdr-cta { min-height: 46px; padding: 8px 18px; font-size: 1rem; box-shadow: 4px 4px 0 var(--ink); }

/* ---------- the rail: strata column down the left edge ---------- */
.sec, .hero, .phero, .cta { position: relative; padding-left: var(--rail); }
.sec { padding-top: 100px; padding-bottom: 100px; }
.sec::before, .cta::before, .rail-top { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--rail); border-right: 3px solid var(--ink); }
/* casing walls + drill string, centered in the rail */
.sec::after, .cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--rail) / 2 - 11px); width: 22px; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); background: linear-gradient(90deg, transparent 0 6px, rgba(255, 253, 248, 0.92) 6px 10px, transparent 10px) , linear-gradient(90deg, transparent 0 7px, #55504a 7px 9px, transparent 9px); background-color: rgba(26, 23, 20, 0.28); pointer-events: none; }
.st-topsoil::before { background: radial-gradient(circle at 30% 30%, #8a6a49 1.4px, transparent 2px) 0 0 / 12px 12px, radial-gradient(circle at 70% 70%, #6c4f35 1.2px, transparent 1.8px) 0 0 / 12px 12px, var(--topsoil); }
.st-clay::before { background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(70, 20, 8, 0.55) 9px 11px) 0 0 / 22px 100%, repeating-linear-gradient(180deg, transparent 0 15px, rgba(70, 20, 8, 0.45) 15px 17px) 11px 4px / 22px 100%, var(--clay); background-repeat: repeat-x; }
.st-sand::before { background: radial-gradient(circle, #9a7a45 1.2px, transparent 1.8px) 0 0 / 10px 10px, radial-gradient(circle, #a88850 1px, transparent 1.6px) 5px 5px / 10px 10px, var(--sand); }
.st-marl::before { background: repeating-linear-gradient(180deg, transparent 0 10px, #5d6148 10px 12px) 0 0 / 26px 100%, repeating-linear-gradient(180deg, transparent 0 16px, #5d6148 16px 18px) 13px 0 / 26px 100%, var(--marl); background-repeat: repeat-x; }
.st-lime::before, .st-lime2::before { background: linear-gradient(180deg, #a69a7c 0 1.5px, transparent 1.5px 12px, #a69a7c 12px 13.5px, transparent 13.5px) 0 0 / 100% 24px, linear-gradient(90deg, #a69a7c 0 1.5px, transparent 1.5px) 6px 0 / 26px 24px, var(--lime); }
.st-lime::before { background-size: 100% 24px, 26px 12px, auto; }
.st-lime2::before { background-image: linear-gradient(180deg, #a69a7c 0 1.5px, transparent 1.5px 12px, #a69a7c 12px 13.5px, transparent 13.5px), linear-gradient(90deg, #a69a7c 0 1.5px, transparent 1.5px), repeating-linear-gradient(180deg, transparent 0 18px, rgba(21, 48, 200, 0.28) 18px 21px); }
/* open hole below the casing: no casing walls in the rock */
.st-lime::after, .st-lime2::after { border-style: dashed; border-color: rgba(26, 23, 20, 0.5); background-color: rgba(21, 48, 200, 0.18); }
.depth { position: absolute; left: var(--rail); top: 0; z-index: 2; padding: 5px 12px 5px 10px; background: var(--ink); color: var(--paper); font: 500 0.75rem/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.depth::before { content: ""; display: inline-block; width: 10px; height: 0; border-top: 2px solid var(--red-light); vertical-align: middle; margin-right: 8px; }

/* section skins */
.sec-white { background: var(--white); }
.sec-paper { background: var(--paper); }
.sec-ink { background: var(--ink); color: #d8cfbf; }
.sec-ink .h2, .sec-ink .h3 { color: var(--white); }

/* ---------- heroes ---------- */
.hero, .phero { background-color: var(--paper); background-image: linear-gradient(rgba(26, 23, 20, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 23, 20, 0.05) 1px, transparent 1px); background-size: 32px 32px; }
.rail-top { background: linear-gradient(180deg, #d9e2f5, #f0ece0); overflow: hidden; }
.rail-mast { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.rail-mast .hm-leg { fill: var(--red); stroke: var(--ink); stroke-width: 2.5; }
.rail-mast .hm-lat { stroke: rgba(255, 253, 248, 0.85); stroke-width: 1.6; }
.rail-mast .hm-crown { fill: var(--ink); stroke: var(--ink); }
.rail-mast .hm-pipe { stroke: var(--ink); stroke-width: 3; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(180deg, #3f5a26 0 5px, var(--topsoil) 5px); border-top: 3px solid var(--ink); }
.hero { padding-bottom: 14px; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 56px; align-items: end; padding-top: 64px; }
.hero-copy { padding-bottom: 64px; }
.hero-kw { display: block; margin-bottom: 18px; font: 600 0.95rem/1.35 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.hero-h { font: 700 clamp(3rem, 7.4vw, 6.4rem)/0.92 var(--disp); color: var(--ink); margin-bottom: 26px; letter-spacing: -0.02em; }
.hero-h em { font-style: normal; color: var(--red); display: block; }
.hero-lede { font-size: 1.2rem; max-width: 52ch; margin-bottom: 32px; color: var(--text); }
.log-head { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; border: 3px solid var(--ink); background: var(--white); max-width: 620px; }
.log-head div { padding: 10px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.log-head div:nth-child(2n) { border-right: 0; }
.log-head div:nth-last-child(-n + 2) { border-bottom: 0; }
.log-head dt { font: 600 0.75rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.log-head dd { font: 700 1.05rem/1.3 var(--disp); color: var(--ink); }
.hero-photo { position: relative; align-self: end; border: 3px solid var(--ink); border-bottom: 0; background: var(--ink); }
.hero-photo img { width: 100%; height: clamp(440px, 64vh, 680px); object-fit: cover; object-position: 50% 62%; }
.hero-photo figcaption { position: absolute; left: -3px; bottom: 22px; max-width: 80%; padding: 10px 16px; background: var(--ink); color: #d8cfbf; font-size: 0.9rem; line-height: 1.35; }
.hero-photo figcaption b { display: block; font: 700 1.05rem/1.2 var(--disp); color: var(--white); }
.phero { padding-bottom: 14px; }
.phero-in { padding-top: 52px; padding-bottom: 60px; }
.phero-h { font: 700 clamp(2.3rem, 5.4vw, 4.4rem)/1 var(--disp); color: var(--ink); max-width: 20ch; margin-bottom: 18px; letter-spacing: -0.015em; }
.phero-lede { overflow-wrap: break-word; font-size: 1.18rem; color: var(--muted); max-width: 60ch; margin: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 22px; font-size: 0.92rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--line); }
.crumbs a { color: var(--ink); }

/* ---------- service log rows ---------- */
.log-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.log-row { display: grid; grid-template-columns: 54px 34px minmax(0, 1fr); column-gap: 14px; padding: 24px 0 26px; border-top: 3px solid var(--ink); scroll-margin-top: 110px; }
.lr-n { font: 700 2rem/1 var(--disp); color: var(--red); }
.lr-ic { width: 32px; color: var(--ink); padding-top: 2px; }
.log-row h3 { font: 700 1.45rem/1.15 var(--disp); color: var(--ink); margin-bottom: 8px; }
.log-row h3 a { color: inherit; text-decoration: none; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 3px no-repeat; transition: background-size 0.2s; }
.log-row h3 a:hover { background-size: 100% 3px; }
.log-row p { color: var(--muted); margin: 0; }
.log-rows-full, .log-rows:has(.lr-cta) { grid-template-columns: 1fr; }
.log-row:has(.lr-cta) { grid-template-columns: 70px 40px minmax(0, 1fr) auto; padding: 34px 0; }
.log-row:has(.lr-cta) .lr-n { font-size: 2.6rem; }
.log-row:has(.lr-cta) h3 { font-size: 1.9rem; }
.log-row:has(.lr-cta) p { color: var(--text); max-width: 70ch; }
.log-row ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.log-row li { padding: 5px 12px; border: 1.5px solid var(--line); background: var(--paper); font-size: 0.93rem; }
.lr-note { margin-top: 14px !important; font-weight: 600; color: var(--red) !important; }
.lr-cta { align-self: start; }

/* ---------- why / their words ---------- */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.their-words { margin-bottom: 26px; }
.their-words p { font: 400 1.35rem/1.5 var(--disp); color: var(--white); }
.their-words .tw-big { font: 700 clamp(3rem, 6.4vw, 5.4rem)/0.95 var(--disp); color: var(--red-light); margin-bottom: 22px; }
.their-words footer { font-size: 0.92rem; letter-spacing: 0.12em; text-transform: uppercase; color: #a89f90; }
.their-words footer::before { content: "— "; }
.why-note { color: #c7bdab; max-width: 56ch; }
.logo-plate { background: #fff; border: 3px solid var(--ink); padding: 14px; }
.logo-plate img { width: 100%; }
.logo-plate-lg { padding: 22px 22px 0; margin-bottom: 36px; box-shadow: 8px 8px 0 var(--red); }
.logo-plate-lg p { margin: 14px -22px 0; padding: 10px; background: var(--blue); color: #fff; text-align: center; font: 700 1rem/1.3 var(--disp); letter-spacing: 0.08em; text-transform: uppercase; }
.entries div { display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px 0; border-top: 1px solid rgba(216, 207, 191, 0.25); }
.entries dt { font: 700 1.3rem/1.2 var(--disp); color: var(--white); margin-bottom: 4px; }
.entries dt span { color: var(--red-light); margin-right: 12px; }
.entries dd { color: #c7bdab; }
.sec-white .entries div, .sec-paper .entries div { border-color: var(--line); }

/* ---------- jobs ---------- */
.jobs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
.job { grid-column: span 6; background: var(--white); border: 3px solid var(--ink); }
.job-filtration { grid-column: span 5; }
.job-tank-trailer { grid-column: span 7; }
.job-food-plot-pump { grid-column: span 4; }
.job-training { grid-column: span 8; }
.job img { width: 100%; height: 380px; object-fit: cover; border-bottom: 3px solid var(--ink); }
.job-food-plot-pump img { object-position: 50% 35%; }
.job-training img { object-position: 50% 22%; }
.job figcaption { padding: 14px 18px 16px; font-size: 0.95rem; color: var(--muted); }
.job figcaption b { display: block; font: 700 1.2rem/1.25 var(--disp); color: var(--ink); }

/* ---------- under your yard ---------- */
.under { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 56px; align-items: center; }
.xsec svg { width: 100%; border: 3px solid var(--ink); background: #dfe8f7; }
.xsec .xs-lab text { stroke: none; }
.xsec figcaption { margin-top: 12px; font-size: 0.93rem; color: var(--muted); }

/* ---------- two-column, towns, accordions ---------- */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.sec-ink .two p { color: #d8cfbf; }
.town-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; margin: 26px 0 8px; }
.two .town-cards { grid-template-columns: 1fr 1fr; }
.town-cards a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 20px 16px; background: var(--white); border: 2px solid var(--ink); border-left-width: 8px; color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.town-cards a:hover { border-left-color: var(--red); transform: translateX(3px); }
.tc-c { font: 600 0.75rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.town-cards b { font: 700 1.45rem/1.15 var(--disp); color: var(--ink); }
.tc-l { font-size: 0.93rem; color: var(--muted); }
.tc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 0.93rem; color: var(--blue); }
.acc details { border-top: 2px solid var(--ink); }
.acc details:last-child { border-bottom: 2px solid var(--ink); }
.acc summary { position: relative; display: flex; align-items: center; min-height: 56px; padding: 14px 40px 14px 0; font-weight: 600; font-size: 1.05rem; cursor: pointer; list-style: none; color: var(--ink); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 700 1.6rem/1 var(--disp); color: var(--red); }
.acc details[open] summary::after { content: "−"; }
.acc details p { padding: 0 0 18px; color: var(--muted); margin: 0; }
.area-note { margin-top: 30px; font-weight: 600; }

/* ---------- steps ---------- */
.steps { counter-reset: s; display: grid; gap: 0; }
.steps li { counter-increment: s; position: relative; padding: 18px 0 18px 70px; border-top: 1px solid rgba(216, 207, 191, 0.25); }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 14px; font: 700 2.2rem/1 var(--disp); color: var(--red-light); }
.steps h3 { font: 700 1.3rem/1.2 var(--disp); color: var(--white); margin-bottom: 4px; }
.steps p { margin: 0; color: #c7bdab; }

/* ---------- about / town ---------- */
.about, .town { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); gap: 64px; align-items: start; }
.prose p { max-width: 68ch; }
.prose .big { font: 400 1.4rem/1.5 var(--disp); color: var(--ink); }
.prose .h3 { margin-top: 34px; }
.about-photo img { width: 100%; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--red); }
.facts { margin-top: 30px; border-top: 3px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 600 0.78rem/1.6 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.facts dd { font-weight: 500; }
.town-log { border: 3px solid var(--ink); background: repeating-linear-gradient(180deg, var(--white) 0 39px, var(--line) 39px 40px); padding: 0 0 22px; position: sticky; top: 100px; }
.tl-h { margin: 0 0 6px; padding: 10px 18px; background: var(--ink); color: var(--paper); font: 700 1.05rem/1.2 var(--disp); letter-spacing: 0.06em; text-transform: uppercase; }
.town-log dl { padding: 0 18px; }
.town-log dl div { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.town-log dt { font: 600 0.75rem/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.town-log dd { font: 700 1.08rem/1.3 var(--disp); color: var(--ink); }
.tl-n { padding: 12px 18px 4px; font-size: 0.93rem; color: var(--muted); margin: 0; }
.town-log .btn { margin: 12px 18px 0; }
.two-faq { align-items: start; }

/* ---------- regions ---------- */
.regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.region { background: var(--white); border: 2px solid var(--ink); border-top: 8px solid var(--clay); padding: 20px 22px; }
.region:nth-child(2) { border-top-color: var(--sand); }
.region:nth-child(3) { border-top-color: var(--marl); }
.region:nth-child(4) { border-top-color: var(--blue); }
.region h3 { font: 700 1.35rem/1.2 var(--disp); margin-bottom: 10px; }
.region li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.region li:last-child { border-bottom: 0; }
.region a { font-weight: 600; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
.faq-side { position: sticky; top: 100px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.faq-side nav, .faq-search { min-width: 0; }
.faq-search input { width: 100%; min-height: 52px; padding: 12px 16px; border: 3px solid var(--ink); background: var(--white); font: inherit; color: var(--text); border-radius: 0; }
.faq-side nav ol { display: grid; gap: 2px; }
.faq-side nav a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-left: 4px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; }
.faq-side nav a span { color: var(--muted); font-size: 0.9rem; }
.faq-side nav a:hover, .faq-side nav a.on { border-left-color: var(--red); background: var(--paper); }
.faq-help { padding: 18px; background: var(--ink); color: #d8cfbf; font-size: 0.95rem; }
.faq-help b { display: block; color: var(--white); font: 700 1.15rem/1.25 var(--disp); margin-bottom: 4px; }
.faq-help .btn { margin-top: 14px; width: 100%; }
.faq-note { padding: 14px 18px; background: var(--paper); border-left: 4px solid var(--blue); font-size: 0.95rem; color: var(--muted); }
.faq-group { margin-top: 44px; scroll-margin-top: 110px; }
.faq-group .h3 { padding-bottom: 10px; border-bottom: 3px solid var(--ink); margin-bottom: 0; }
.faq { border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.faq summary { position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 16px 44px 16px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font: 600 1.1rem/1.4 var(--body); color: var(--ink); }
.faq-x { position: absolute; right: 8px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
.faq-x::before, .faq-x::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 3px; background: var(--red); transition: transform 0.2s; }
.faq-x::after { transform: rotate(90deg); }
.faq[open] .faq-x::after { transform: rotate(0); }
.faq-a { padding: 0 0 20px; }
.faq-a p { max-width: 70ch; }
.faq-short { font-weight: 500; color: var(--ink); }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.callcard { display: block; padding: 30px 28px; background: var(--red); color: #fde6e3; text-decoration: none; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.callcard span { font: 600 0.82rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; }
.callcard b { display: block; margin: 6px 0; font: 700 clamp(2rem, 4.6vw, 3rem)/1.05 var(--disp); color: #fff; white-space: nowrap; }
.callcard small { font-size: 0.95rem; }
.clist { margin: 34px 0; display: grid; gap: 14px; }
.clist li { display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; }
.clist svg { color: var(--red); }
.tip { display: flex; gap: 14px; padding: 18px; background: var(--paper); border: 2px solid var(--ink); border-left: 8px solid var(--red); }
.tip svg { color: var(--red); margin-top: 3px; }
.tip p { margin: 0; font-size: 0.97rem; }
.form { position: relative; display: grid; gap: 16px; padding: 30px; background: var(--paper); border: 3px solid var(--ink); }
.form .h3 { margin: 0; }
.form-sub { margin: -8px 0 0; color: var(--muted); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.form label small { font-weight: 400; color: var(--muted); }
.form input, .form select, .form textarea { width: 100%; min-height: 50px; padding: 11px 14px; border: 2px solid var(--ink); border-radius: 0; background: var(--white); font: 400 1rem/1.4 var(--body); color: var(--text); }
.form textarea { resize: vertical; }
.form [aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 2px var(--red); }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form .btn { justify-self: start; }
.form-status { margin: 0; font-weight: 600; }
.form-status.ok { color: #1d6b2a; }
.form-status.err { color: var(--red); }

/* ---------- CTA: water ---------- */
.cta { background: var(--blue); color: #e3e8ff; padding-top: 92px; padding-bottom: 92px; overflow: hidden; }
.cta::before { background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(255, 255, 255, 0.22) 14px 16px), var(--blue-deep); }
.cta::after { border-style: dashed; border-color: rgba(255, 255, 255, 0.45); background-color: rgba(255, 255, 255, 0.08); bottom: 60px; }
.cta .depth { background: var(--white); color: var(--blue-deep); }
.bit { position: absolute; left: calc(var(--rail) / 2 - 12px); bottom: 22px; width: 24px; height: 40px; }
.cta .bit path { fill: #c9ced8; stroke: var(--ink); stroke-width: 2; }
.cta-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.cta h2 { font: 700 clamp(2.1rem, 4.6vw, 3.6rem)/1.02 var(--disp); color: #fff; margin-bottom: 14px; }
.cta p { margin: 0; font-size: 1.1rem; max-width: 52ch; }
.cta-phone { display: block; margin-bottom: 20px; font: 700 clamp(2.4rem, 5.6vw, 4.4rem)/1 var(--disp); color: #fff; text-decoration: none; white-space: nowrap; }
.cta-phone:hover { text-decoration: underline; text-decoration-thickness: 3px; }

/* ---------- footer ---------- */
.ftr { background: var(--ink); color: #c7bdab; padding: 72px 0 0 var(--rail); border-top: 6px solid var(--red); }
.ftr-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.ftr .logo-plate { max-width: 340px; padding: 10px; margin-bottom: 16px; }
.ftr-brand p { font-size: 0.93rem; }
.ftr h2 { font: 700 1.15rem/1.2 var(--disp); color: var(--white); margin-bottom: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.ftr li { margin-bottom: 6px; }
.ftr a { color: #e8dfcf; text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr-contact li { display: flex; align-items: center; gap: 10px; }
.ftr-contact a { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ftr-contact .em { overflow-wrap: anywhere; }
.ftr-contact svg { color: var(--red-light); }
.ftr-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 56px; padding-top: 22px; padding-bottom: 26px; border-top: 1px solid #3a342d; font-size: 0.88rem; }
.fab { display: none; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo img { animation: rise 0.9s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  :root { --rail: 54px; }
  .nav { position: fixed; inset: 0 0 0 auto; width: min(88vw, 390px); flex-direction: column; gap: 2px; background: var(--ink); border-left: 6px solid var(--red); padding: 100px 26px 26px; clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path 0.3s ease, visibility 0s 0.3s; z-index: 50; overflow-y: auto; }
  .nav a { color: var(--paper); font: 700 1.7rem/1.2 var(--disp); padding: 12px 6px; }
  .nav a[aria-current] { color: var(--red-light); }
  .nav a::after { left: 6px; right: auto; width: 44px; bottom: 6px; background: var(--red-light); }
  .nav-call { display: flex !important; align-items: center; gap: 12px; margin-top: 18px; padding: 16px !important; background: var(--red); color: #fff !important; font-size: 1.35rem !important; }
  .nav-call::after { display: none; }
  body.nav-open .nav { clip-path: inset(0); visibility: visible; transition: clip-path 0.3s ease; }
  body.nav-open { overflow: hidden; }
  .menu { display: grid; gap: 5px; place-content: center; width: 50px; height: 48px; border: 3px solid var(--ink); background: var(--paper); cursor: pointer; z-index: 60; position: relative; }
  .menu span:not(.sr) { width: 22px; height: 3px; background: var(--ink); transition: transform 0.2s, opacity 0.2s; }
  body.nav-open .menu { background: var(--red); border-color: var(--paper); }
  body.nav-open .menu span:not(.sr) { background: #fff; }
  body.nav-open .menu span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.nav-open .menu span:nth-child(2) { opacity: 0; }
  body.nav-open .menu span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .regions { grid-template-columns: 1fr 1fr; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 48px; }
  .hero-copy { padding-bottom: 48px; }
  .hero-photo img { height: 520px; object-position: 50% 58%; }
  .log-rows { grid-template-columns: 1fr; }
  .why, .two, .under, .about, .town, .contact, .cta-in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq-side { position: static; }
  .faq-side nav ol { display: flex; flex-wrap: wrap; gap: 8px; }
  .faq-side nav a { border: 2px solid var(--ink); padding: 10px 12px; }
  .faq-help { display: none; }
  .town-log { position: static; }
  .jobs .job { grid-column: span 6; }
  .job img { height: 320px; }
  .log-row:has(.lr-cta) { grid-template-columns: 56px 36px minmax(0, 1fr); }
  .lr-cta { grid-column: 3; justify-self: start; margin-top: 18px; }
}
@media (max-width: 700px) {
  :root { --rail: 14px; }
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .hdr-in { padding: 0 12px 0 calc(var(--rail) + 12px); gap: 10px; min-height: 66px; }
  .hdr-cta { display: none; }
  .mark { width: 26px; height: 38px; }
  .brand-txt b { font-size: 1.4rem; }
  .brand-txt small { font-size: 0.75rem; letter-spacing: 0.04em; }
  .log-row h3 a { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .cta-phone { padding: 6px 0; }
  .sec { padding-top: 64px; padding-bottom: 64px; }
  .sec::after, .cta::after { left: calc(var(--rail) / 2 - 3px); width: 6px; border-width: 0; background: #55504a; }
  .st-lime::after, .st-lime2::after, .cta::after { background: rgba(255, 255, 255, 0.5); }
  .st-lime::after, .st-lime2::after { background: rgba(21, 48, 200, 0.5); }
  .rail-mast { display: none; }
  .rail-top { background: var(--red); }
  .bit { display: none; }
  .depth { font-size: 0.75rem; padding: 4px 10px 4px 8px; }
  .head { margin-bottom: 30px; }
  .head-row { display: block; }
  .hero-in { padding-top: 34px; }
  .hero-kw { font-size: 0.8rem; }
  .hero-lede { font-size: 1.08rem; }
  .actions .btn { width: 100%; }
  .log-head { grid-template-columns: 1fr; }
  .log-head div { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .log-head div:last-child { border-bottom: 0 !important; }
  .hero-photo img { height: 440px; }
  .phero-in { padding-top: 30px; padding-bottom: 40px; }
  .log-row, .log-row:has(.lr-cta) { grid-template-columns: 44px minmax(0, 1fr); }
  .lr-ic { display: none; }
  .lr-n { font-size: 1.6rem !important; }
  .log-row:has(.lr-cta) h3 { font-size: 1.5rem; }
  .lr-cta { grid-column: 2; width: 100%; }
  .jobs { gap: 16px; }
  .jobs .job { grid-column: span 12; }
  .job img { height: 260px; }
  .two .town-cards, .town-cards { grid-template-columns: minmax(0, 1fr); }
  .regions { grid-template-columns: minmax(0, 1fr); }
  .their-words p { font-size: 1.15rem; }
  .logo-plate-lg { padding: 12px 12px 0; box-shadow: 5px 5px 0 var(--red); }
  .logo-plate-lg p { margin: 12px -12px 0; font-size: 0.85rem; }
  .f-row { grid-template-columns: minmax(0, 1fr); }
  .form { padding: 20px 16px; }
  .form .btn { width: 100%; }
  .callcard { padding: 22px 18px; box-shadow: 5px 5px 0 var(--ink); }
  .callcard b { font-size: 2rem; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts dd a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .cta { padding-top: 64px; padding-bottom: 64px; }
  .cta-phone { font-size: 2.5rem; }
  .ftr { padding-top: 56px; }
  .ftr-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* thumb-sized links */
  .ftr li { margin-bottom: 0; }
  .ftr li a { display: inline-flex; padding: 10px 0; }
  .ftr-contact li:not(:has(a)) { padding: 10px 0; }
  .ftr-base a { display: inline-block; padding: 11px 0; }
  .crumbs a { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .clist li a { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .region li { padding: 0; }
  .region li a { display: inline-block; padding: 11px 0; }
  .region li:not(:has(a)) { padding: 11px 0; }
  .faq-side nav ol { gap: 6px; }
  .faq-side nav a { min-height: 46px; align-items: center; padding: 8px 10px; font-size: 0.93rem; }
  .prose .big { font-size: 1.22rem; }
  /* floating call bar: after the hero, never on the contact page, never over the footer's last line */
  .fab { display: flex; position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 30; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px; background: var(--red); color: #fff; font: 700 1.1rem/1 var(--disp); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; border: 3px solid var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transform: translateY(160%); visibility: hidden; transition: transform 0.25s ease, visibility 0s 0.25s; }
  body.scrolled .fab { transform: none; visibility: visible; transition: transform 0.25s ease; }
  body:has(#lead-form) .fab { display: none; }
  body.nav-open .fab { display: none; }
  .ftr { padding-bottom: 80px; }
  body:has(#lead-form) .ftr { padding-bottom: 0; }
}
@media (max-width: 500px) {
  .brand-txt small { display: none; }
  .brand-txt b { font-size: 1.55rem; }
}
@media (max-width: 380px) {
  .hero-h { font-size: 2.7rem; }
  .cta-phone, .callcard b { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}