/* Flint Concrete Pros
   Type:    Bricolage Grotesque for headings, Figtree for text. Both are served
            from /assets/fonts, so no other site is contacted.
   Colour:  a blueprint. Cool paper greys, navy sheets, cobalt for buttons
            and links, and marker yellow for small notes and highlights.
   Motion:  short and one-off. All of it is switched off for visitors who ask
            their device to reduce motion (last block in this file). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  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: "Figtree";
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  --ink: #0e1a2b;
  --ink-2: #3a485c;
  --muted: #5a6880;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --sunk: #e9eef5;
  --line: #dfe5ee;
  --line-strong: #c4cedc;
  --navy: #0f2240;
  --on-dark: #eef3fb;
  --on-dark-2: #b3c1d9;
  --accent: #2557d6;
  --accent-deep: #1a43b0;
  --accent-tint: #e4ecfd;
  --sky: #9cc7ff;
  --marker: #ffd65a;
  --marker-tint: #ffeaa0;
  --concrete: #b8c0cc;
  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 24px;
  --shadow-s: 0 1px 2px rgba(14, 26, 43, 0.06);
  --shadow-m: 0 2px 4px rgba(14, 26, 43, 0.04), 0 14px 32px -12px rgba(14, 26, 43, 0.18);
  --shadow-l: 0 2px 6px rgba(14, 26, 43, 0.05), 0 30px 60px -24px rgba(14, 26, 43, 0.28);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --max: 1180px;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Faint drafting grid laid over the navy areas, like a blueprint sheet. */
  --sheet-grid: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.4rem); letter-spacing: -0.03em; }
h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.015em; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.2s; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--marker-tint); }
img, svg { max-width: 100%; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 599px) { .wrap { padding: 0 20px; } }
.skip { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--ink); padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--accent); font-family: var(--body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.4; margin: 0 0 14px; }
.eyebrow::before { content: ""; flex: none; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.fine { font-size: 0.82rem; line-height: 1.5; color: var(--muted); margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  background: var(--accent);
  color: #fff;
  font: 600 1rem/1.2 var(--body);
  text-align: center;
  text-decoration: none;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 22px -12px rgba(26, 67, 176, 0.6);
  transition: transform 0.25s var(--ease), background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.25s;
}
.btn svg { flex: none; }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover { background: var(--accent-deep); color: #fff; transform: translateY(-1px); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-block { display: flex; width: 100%; }
.btn-small { padding: 10px 16px; font-size: 0.94rem; border-radius: 10px; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-s); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-ghost-light { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.3); box-shadow: none; }
.btn-ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
@media (max-width: 479px) { .btn-row .btn { flex: 1 1 100%; } }

/* ---------- Header ---------- */
.preview-banner { background: var(--marker-tint); color: var(--ink); font-size: 0.85rem; font-weight: 600; text-align: center; padding: 7px 16px; }
.site-header { position: relative; z-index: 40; background: rgba(243, 245, 248, 0.88); border-bottom: 1px solid var(--line); padding-bottom: 13px; view-transition-name: site-header; }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 14px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.mark { flex: none; display: block; }
/* Narrow screens: the nav is a second row that scrolls sideways. */
.site-nav { order: 3; display: flex; gap: 2px; width: calc(100% + 24px); margin: 0 -12px; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { position: relative; color: var(--ink-2); font-size: 0.95rem; font-weight: 600; text-decoration: none; white-space: nowrap; padding: 8px 12px; border-radius: 8px; transition: color 0.2s, background 0.2s; }
.site-nav a:hover { color: var(--ink); background: rgba(14, 26, 43, 0.05); }
.site-nav a[aria-current] { color: var(--ink); }
.site-nav a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--accent); }
.header-cta { display: flex; align-items: center; gap: 18px; }
.phone-link { display: none; align-items: center; gap: 7px; color: var(--ink); font-size: 0.98rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.phone-link:hover { color: var(--accent-deep); }
.phone-link .phone-icon { color: var(--accent); }
/* Phones get the fixed call bar at the bottom instead of a header button. */
@media (max-width: 639px) { .header-cta { display: none; } }
/* Wide screens: one row that stays at the top of the window. */
@media (min-width: 1000px) {
  .site-header { position: sticky; top: 0; -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border-bottom-color: transparent; transition: border-color 0.3s, box-shadow 0.3s; }
  .site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 10px 30px -18px rgba(14, 26, 43, 0.28); }
  .header-row { flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; min-height: 70px; }
  .site-nav { order: 0; flex: 1; justify-content: center; width: auto; min-width: 0; margin: 0; }
}
@media (min-width: 1180px) { .phone-link { display: inline-flex; } }

/* The pour: a mixer truck crosses the header once on each page, laying the
   concrete strip that stays as the header's bottom edge. The strip is one long
   bar fixed to the back of the truck, so it always ends exactly at the chute. */
.pour { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 48px; overflow: hidden; pointer-events: none; }
.pour-run { --pour-time: 6s; position: absolute; left: 0; bottom: 0; display: flex; align-items: flex-end; width: max-content; transform: translateX(-100%); animation: pour-drive var(--pour-time) cubic-bezier(0.35, 0.1, 0.65, 0.9) 0.5s both; }
.pour-trail { flex: none; width: calc(100vw + 96px); height: 5px; margin-right: -9px; background: var(--concrete); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.pour-truck { flex: none; display: block; width: 54px; max-width: none; height: auto; overflow: visible; }
@media (max-width: 699px) { .pour-run { --pour-time: 4.6s; } }
@media (min-width: 700px) { .pour-truck { width: 64px; } }
@media (min-width: 1400px) { .pour-run { --pour-time: 7.5s; } }

/* ---------- Home: hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 80px) 0 clamp(56px, 8vw, 104px); }
/* Faint slab joints that fade out toward the text. */
.hero::before, .page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 112px 112px;
  -webkit-mask-image: radial-gradient(ellipse 60% 85% at 82% 30%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 85% at 82% 30%, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: 44px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 64px; } }
.hero h1 { font-size: clamp(2.45rem, 5.6vw, 4.05rem); margin-bottom: 20px; }
.hl { background: linear-gradient(var(--marker-tint), var(--marker-tint)) no-repeat 0 88% / 100% 0.32em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 33em; margin-bottom: 28px; }
.ticks { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 10px; color: var(--ink-2); font-size: 0.98rem; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: 0.2em;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.3l2.1 2.1 4.4-4.8' fill='none' stroke='%232557d6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* The example plan drawn in the hero. */
.plan-wrap { perspective: 1100px; }
.plan-card { margin: 0; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-l); padding: 20px 20px 18px; }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.plan-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.pill { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); background: var(--sunk); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.plan-svg { display: block; width: 100%; height: auto; }
.plan-svg text { font-family: var(--body); }
.pl-sheet { fill: var(--navy); }
.pl-wall { fill: rgba(255, 255, 255, 0.07); stroke: var(--sky); stroke-width: 1.4; }
.pl-edge { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.pl-pour { fill: #cdd5e0; }
.pl-apron { fill: #cdd5e0; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.pl-joint { fill: none; stroke: #6f7f99; stroke-width: 1.2; }
.pl-walk { fill: rgba(255, 255, 255, 0.1); stroke: var(--sky); stroke-width: 1.1; }
.pl-walkjoint { fill: none; stroke: var(--sky); stroke-width: 0.9; opacity: 0.7; }
.pl-street { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.pl-dim { fill: none; stroke: var(--marker); stroke-width: 1.3; }
.pl-pill { fill: var(--marker); }
.pl-num { font-size: 11px; font-weight: 800; fill: var(--navy); }
.pl-cap { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; fill: var(--sky); }
.pl-note { font-size: 11px; font-weight: 600; fill: #dbe6f7; }
.pl-lead { fill: none; stroke: #8ea3c4; stroke-width: 1; stroke-dasharray: 2 3; }
.pl-dot { fill: var(--navy); stroke: #fff; stroke-width: 1.2; }
.pl-pen { fill: var(--marker); opacity: 0; }
@media (max-width: 559px) { .pl-callout { display: none; } }
.plan-meta { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 16px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 10px; }
.plan-meta .k { display: block; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.plan-meta .v { display: block; font-weight: 600; }
.plan-meta .big { font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.plan-meta > div:nth-child(2) { text-align: right; }
.plan-meta .fine { grid-column: 1 / -1; margin-top: 6px; }

/* ---------- Home: sections ---------- */
.band { --band-bg: var(--bg); position: relative; padding: clamp(60px, 9vw, 108px) 0; }
.band-alt { --band-bg: var(--surface); background: var(--surface); border-block: 1px solid var(--line); }
.band-dark { --band-bg: var(--navy); background: var(--navy); color: var(--on-dark); overflow: hidden; }
.band-dark::before, .closing-cta::before, .site-footer::before { content: ""; position: absolute; inset: 0; background-image: var(--sheet-grid); background-size: 28px 28px; pointer-events: none; }
.band-dark > *, .closing-cta > *, .site-footer > * { position: relative; }
.band-dark .eyebrow { color: var(--sky); }
.band-dark h2 { color: #fff; }
.band-dark p { color: var(--on-dark-2); }
.band-dark a { color: var(--sky); }
.band-dark a:hover { color: #fff; }
.band-head { max-width: 46em; margin-bottom: clamp(28px, 4vw, 44px); }
.band-head h2 { margin-bottom: 0.4em; }
.band-head p:last-child { color: var(--ink-2); font-size: 1.1rem; margin: 0; }
.band-foot { margin: clamp(28px, 4vw, 40px) 0 0; color: var(--muted); }

.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.cards-services, .cards-guides { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 24px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-s); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s, background 0.35s; }
.band-alt .card { background: var(--bg); box-shadow: none; }
.card:hover { transform: translateY(-4px); background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow-m); color: var(--ink); }
.card-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--sunk); color: var(--ink); margin-bottom: 12px; transition: background 0.35s, color 0.35s; }
.band-alt .card-icon { background: var(--surface); border: 1px solid var(--line); }
.card:hover .card-icon { background: var(--accent-tint); border-color: transparent; color: var(--accent-deep); }
.card-meta { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.card-title { font-family: var(--display); font-weight: 700; font-size: 1.18rem; line-height: 1.25; letter-spacing: -0.015em; padding-right: 26px; }
.card-text { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.card-arrow { position: absolute; top: 22px; right: 20px; color: var(--line-strong); transition: transform 0.35s var(--ease), color 0.35s; }
.card:hover .card-arrow { color: var(--accent); transform: translate(3px, -3px); }

.steps { position: relative; list-style: none; padding: 0; margin: 0; display: grid; gap: 34px; counter-reset: step; }
.steps li { position: relative; counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--band-bg); border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 10px var(--band-bg);
  color: var(--accent); font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  margin-bottom: 20px;
}
.steps h3 { margin-bottom: 0.35em; }
.steps p { color: var(--muted); margin: 0; }
@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 48px; }
  /* The line that links the three numbers. */
  .steps::before { content: ""; position: absolute; top: 24px; left: 24px; width: 68%; height: 1px; background: var(--line-strong); transform-origin: 0 50%; }
}

.split { display: grid; gap: 36px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 72px; align-items: center; } }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { position: relative; padding: 18px 0 18px 46px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: var(--on-dark-2); font-size: 0.98rem; line-height: 1.5; }
.checklist li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.checklist strong { display: block; color: #fff; font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; margin-bottom: 3px; }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 19px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(156, 199, 255, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.3l2.1 2.1 4.4-4.8' fill='none' stroke='%239cc7ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.price-row { display: grid; gap: 16px; margin: 0 0 28px; }
@media (min-width: 720px) { .price-row { grid-template-columns: repeat(3, 1fr); } }
.price { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px 24px; }
.price-kind { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.price b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 2.7vw, 2.15rem); line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.price-text { display: block; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

.estimate-grid { display: grid; gap: 36px; }
@media (min-width: 960px) {
  .estimate-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; }
  .estimate-copy { position: sticky; top: 108px; }
}
.estimate-copy > h2 + p { color: var(--ink-2); font-size: 1.08rem; }
.mini-steps { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 14px; counter-reset: mini; }
.mini-steps li { position: relative; counter-increment: mini; padding-left: 42px; color: var(--ink-2); }
.mini-steps li::before { content: counter(mini); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-deep); font-size: 0.86rem; font-weight: 700; }
.phone-line { font-size: 1.08rem; font-weight: 600; }

/* ---------- Forms ---------- */
.form-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(14px, 2.4vw, 28px); box-shadow: var(--shadow-m); }
.form-card h2 { font-size: 1.4rem; margin-bottom: 14px; }
.prose .form-card { margin: 1.6em 0; }
.lead-form { display: grid; gap: 14px; }
.lead-form label, .estimator label { display: grid; gap: 6px; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.lead-form input, .lead-form select, .lead-form textarea,
.estimator input[type="number"], .estimator select {
  font: inherit; font-weight: 400;
  width: 100%;
  padding: 12px 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus,
.estimator input[type="number"]:focus, .estimator select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 87, 214, 0.18); }
.lead-form textarea { resize: vertical; }
.field-row { display: grid; gap: 14px; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }
.opt { font-weight: 400; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-warning { background: var(--marker-tint); border-radius: var(--radius-s); padding: 9px 13px; font-size: 0.86rem; margin: 0; }
.jotform { display: block; width: 100%; height: 640px; border: 0; border-radius: 12px; }

/* ---------- Inner pages ---------- */
.page-head { position: relative; overflow: hidden; background: linear-gradient(180deg, #fbfcfe 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); padding: clamp(26px, 4vw, 52px) 0 clamp(28px, 4vw, 46px); }
.page-head .wrap { position: relative; }
.page-head h1 { max-width: 18em; margin-bottom: 16px; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.55; color: var(--ink-2); max-width: 40em; margin: 0; }
.updated { font-size: 0.85rem; font-weight: 500; color: var(--muted); margin: 18px 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 18px; font-size: 0.86rem; font-weight: 500; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-deep); }

.layout { display: grid; gap: 48px; padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(56px, 8vw, 96px); }
@media (min-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr) 328px; gap: 64px; } }
.layout-plain { grid-template-columns: minmax(0, 1fr); }
.layout-plain .prose { max-width: 740px; }

.prose { min-width: 0; font-size: 1.1rem; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.75rem); margin-top: 2em; margin-bottom: 0.6em; }
.prose h3 { margin-top: 1.7em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose ul { list-style: square; }
.prose li { margin-bottom: 0.5em; padding-left: 0.2em; }
.prose ul > li::marker { color: var(--accent); }
.prose ol > li::marker { color: var(--accent-deep); font-weight: 700; }
.prose .cards, .prose .link-list { list-style: none; padding-left: 0; font-size: 1.0625rem; }
.prose .cards { margin-bottom: 1.6em; }
.prose .cards li, .prose .link-list li { margin: 0; padding: 0; }

.note { position: relative; background: #fff8e1; border: 1px solid #f0e3b5; border-radius: var(--radius); padding: 16px 20px 16px 54px; margin: 1.6em 0; color: #3a4252; font-size: 1.02rem; }
.note::before { content: ""; position: absolute; left: 18px; top: 19px; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%238a6d0f' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='9'/%3E%3Cpath d='M11 10v5.5M11 6.6v.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.note > :last-child { margin-bottom: 0; }

.table-wrap { overflow-x: auto; margin: 1.6em 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s); }
table { border-collapse: collapse; width: 100%; font-size: 0.97rem; }
th, td { text-align: left; vertical-align: top; padding: 13px 18px; border-bottom: 1px solid var(--line); }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr { transition: background 0.2s; }
tbody tr:hover { background: #f7f9fc; }
thead th { background: var(--sunk); color: var(--ink-2); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
tbody th { font-weight: 600; }
td { font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {
  table { font-size: 0.9rem; }
  th, td { padding: 11px 12px; }
  thead th { font-size: 0.7rem; letter-spacing: 0.05em; }
}

/* Contents list at the top of long service pages ({{toc}}). */
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px 14px; margin: 1.6em 0 2em; box-shadow: var(--shadow-s); }
.toc-title { font-family: var(--body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.prose .toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; display: grid; gap: 0 28px; font-size: 1rem; }
@media (min-width: 640px) { .prose .toc ol { grid-template-columns: 1fr 1fr; } }
.prose .toc li { counter-increment: toc; margin: 0; border-bottom: 1px solid var(--line); }
.prose .toc a { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; color: var(--ink); font-weight: 600; text-decoration: none; }
.prose .toc a::before { content: counter(toc, decimal-leading-zero); color: var(--accent); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.prose .toc a:hover { color: var(--accent-deep); }
.prose h2[id], .prose h3[id] { scroll-margin-top: 110px; }

/* Short estimate prompt inside an article ({{cta}}). */
.inline-cta { display: grid; gap: 14px; align-items: center; background: var(--accent-tint); border: 1px solid #c9d8fb; border-radius: var(--radius); padding: 20px 22px; margin: 2em 0; }
@media (min-width: 760px) { .inline-cta { grid-template-columns: 1fr auto; gap: 24px; } }
.inline-cta p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.prose .inline-cta .inline-cta-title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 4px; }

/* Comparison tables: the first column stays in view while the table scrolls sideways on phones. */
.table-compare table { min-width: 680px; }
.table-sticky tbody th, .table-compare tbody th { position: sticky; left: 0; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.table-sticky thead th:first-child, .table-compare thead th:first-child { position: sticky; left: 0; z-index: 1; }
.table-wrap caption { caption-side: bottom; text-align: left; padding: 10px 18px 12px; color: var(--muted); font-size: 0.88rem; }

.related { margin-top: 2.8em; }
.related h2 { font-family: var(--body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.link-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.link-list a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; color: var(--ink); font-size: 0.93rem; font-weight: 600; text-decoration: none; transition: border-color 0.2s, color 0.2s, transform 0.25s var(--ease), box-shadow 0.2s; }
.link-list a:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-1px); box-shadow: var(--shadow-s); }

.closing-cta { position: relative; overflow: hidden; background: var(--navy); color: var(--on-dark); border-radius: var(--radius-l); padding: clamp(26px, 4vw, 40px); margin-top: 3em; }
.closing-cta .eyebrow { color: var(--sky); }
.closing-cta h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 0 0 0.4em; }
.closing-cta p { color: var(--on-dark-2); max-width: 34em; }
.closing-cta .btn-row { margin-top: 24px; }

/* ---------- Sidebar ---------- */
.side { display: grid; gap: 28px; align-content: start; }
@media (min-width: 1000px) { .side { position: sticky; top: 96px; align-self: start; } }
.cta-card { display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 26px 24px 22px; box-shadow: var(--shadow-m); }
.cta-card h2 { font-size: 1.4rem; margin: 0; }
.cta-card p { margin: 0; color: var(--ink-2); font-size: 0.98rem; }
.cta-card .eyebrow { color: var(--accent); font-size: 0.8rem; }
.cta-card .fine { text-align: center; color: var(--muted); font-size: 0.82rem; }
.side-nav h2 { font-family: var(--body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.side-nav ul { list-style: none; padding: 0; margin: 0; }
.side-nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 0.97rem; font-weight: 600; text-decoration: none; transition: color 0.2s, padding-left 0.25s var(--ease); }
.side-nav a::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 4px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); opacity: 0.3; transition: opacity 0.2s; }
.side-nav a:hover { color: var(--accent-deep); padding-left: 4px; }
.side-nav a:hover::after { opacity: 1; }

/* ---------- Cost calculator ---------- */
.estimator { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(20px, 3vw, 28px); margin: 1.8em 0; box-shadow: var(--shadow-m); font-size: 1.0625rem; }
.estimator h3 { font-size: 1.3rem; margin: 0; }
.estimator .check { display: flex; align-items: center; gap: 10px; }
.estimator .check input { flex: none; width: 20px; height: 20px; accent-color: var(--accent); }
.estimator-out { background: var(--navy); color: var(--on-dark-2); border-radius: var(--radius); padding: 18px 20px; margin: 0; font-size: 0.98rem; }
.estimator-out b { display: block; color: #fff; font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; transform-origin: 0 50%; }
.estimator-out.bump b { animation: bump 0.35s var(--ease); }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--navy); color: var(--on-dark-2); font-size: 0.95rem; padding: clamp(48px, 7vw, 80px) 0 0; }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 48px; } }
.footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; margin: 0 0 14px; }
.site-footer .mark rect { fill: #1b3560; }
.footer-about p:last-child { max-width: 30em; line-height: 1.6; margin: 0; }
.site-footer h2 { color: #fff; font-family: var(--body); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 4px 0 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--on-dark-2); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-base { margin-top: clamp(36px, 5vw, 56px); padding-bottom: 22px; color: #8fa0bd; font-size: 0.86rem; }
.footer-base p { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; margin: 0; }

/* ---------- Phone-sized call bar ---------- */
.mobile-bar { display: none; }
@media (max-width: 639px) {
  .mobile-bar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(15, 34, 64, 0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16); view-transition-name: mobile-bar; }
  .mobile-bar .btn { flex: 1; padding: 13px 10px; white-space: nowrap; box-shadow: none; }
  body { padding-bottom: 74px; }
}

/* ---------- Diagrams ----------
   Drawings and charts that stand in for long lists and tables. The pieces
   kept in the diagrams folder are dropped into a page with {{diagram:name}}. */
.diagram { margin: 1.8em 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(12px, 2vw, 18px); box-shadow: var(--shadow-m); font-size: 1.0625rem; }
.diagram figcaption { color: var(--muted); font-size: 0.9rem; line-height: 1.5; margin-top: 12px; padding: 0 4px; }
.dia-svg { display: block; width: 100%; height: auto; }
.dia-svg text { font-family: var(--body); }
.dia-mark circle { fill: var(--marker); }
.dia-mark text { fill: var(--navy); font-size: 11px; font-weight: 800; text-anchor: middle; }
/* On a navy band the drawing sits straight on the sheet, with no card. */
.band-dark .diagram { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.band-dark .pl-sheet { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.14); }

/* Numbered notes that match the yellow numbers on a drawing. */
.legend { list-style: none; counter-reset: legend; padding: 0; margin: 1.4em 0; display: grid; gap: 14px 28px; }
@media (min-width: 640px) { .legend { grid-template-columns: 1fr 1fr; } }
.legend li, .prose .legend li { position: relative; counter-increment: legend; margin: 0; padding: 0 0 0 36px; line-height: 1.5; }
.legend li::before { content: counter(legend); position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--marker); color: var(--navy); font-size: 0.8rem; font-weight: 800; }
.prose .legend { padding-left: 0; }
.band-dark .legend { color: var(--on-dark-2); font-size: 0.98rem; margin: 20px 0 26px; }
.band-dark .legend strong { display: block; color: #fff; }

/* Bullet lists whose items open with a bold phrase become a grid of tiles.
   build.py adds the class by itself; see pointify(). */
.prose .points { list-style: none; padding: 0; margin: 1.4em 0; display: grid; gap: 12px; }
.prose .points > li { margin: 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-s); font-size: 1.02rem; line-height: 1.55; }
@media (min-width: 640px) {
  .prose .points { grid-template-columns: 1fr 1fr; }
  .prose .points > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .prose .points-3 { grid-template-columns: repeat(3, 1fr); }
  .prose .points-3 > li:last-child:nth-child(odd) { grid-column: auto; }
}

/* Pouring season: one bar per half month, taller and darker as conditions improve. */
.season-grid { display: grid; grid-template-columns: repeat(24, 1fr); grid-template-rows: auto 68px auto; align-items: end; row-gap: 8px; padding: 4px 2px 0; }
.season-grid i { grid-row: 2; height: var(--h); background: var(--c); border-radius: 4px 4px 0 0; }
.season-grid i:nth-of-type(odd) { margin-left: 2px; border-top-right-radius: 0; }
.season-grid i:nth-of-type(even) { margin-right: 2px; border-top-left-radius: 0; }
.season-grid b { grid-row: 3; grid-column: span 2; border-top: 1px solid var(--line-strong); padding-top: 6px; color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; }
@media (max-width: 479px) { .season-grid b { font-size: 0.56rem; letter-spacing: 0; } }
.season-tag { grid-row: 1; justify-self: center; background: var(--marker); color: var(--navy); border-radius: 999px; padding: 3px 9px; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.season-tag.tag-plain { background: var(--sunk); color: var(--ink-2); }
.s-closed { --h: 14px; --c: #d5dce7; }
.s-thaw { --h: 24px; --c: #c5d6f3; }
.s-care { --h: 40px; --c: #8fb2f2; }
.s-good { --h: 54px; --c: var(--accent); }
.s-best { --h: 68px; --c: var(--navy); }
.season-key, .prose .season-key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 16px 4px 0; color: var(--ink-2); font-size: 0.86rem; }
.season-key li, .prose .season-key li { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0; }
.season-key li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--c); }

/* Temperature gauge: 20°F at the left end, 100°F at the right. */
.gauge { position: relative; height: 14px; margin: 6px 4px 34px; border-radius: 999px; background: linear-gradient(90deg, #c5d6f3 0 25%, #8fb2f2 25% 37.5%, var(--accent) 37.5% 68.75%, #8fb2f2 68.75% 81.25%, var(--marker) 81.25% 100%); }
.gauge span { position: absolute; top: 22px; transform: translateX(-50%); color: var(--muted); font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.gauge span::before { content: ""; position: absolute; left: 50%; top: -26px; height: 22px; border-left: 2px solid var(--surface); }

/* Curing timeline: three milestones on a line that darkens as strength builds. */
.tl, .prose .tl { position: relative; list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.tl li, .prose .tl li { position: relative; display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; margin: 0; padding: 0; }
.tl-icon { position: relative; z-index: 1; grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-deep); }
.tl li:nth-child(2) .tl-icon { background: #b9cdf7; }
.tl li:nth-child(3) .tl-icon { background: var(--accent); color: #fff; }
.tl b { align-self: end; font-family: var(--display); font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.tl-what { align-self: start; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
@media (min-width: 640px) {
  .tl { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .tl li, .prose .tl li { grid-template-columns: 1fr; row-gap: 6px; align-content: start; }
  .tl-icon { grid-row: auto; margin-bottom: 4px; }
  .tl::before { content: ""; position: absolute; left: 26px; width: calc(66.667% + 13.33px); top: 25px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #c5d6f3, var(--accent)); }
}

/* Permit routes: where you live, then who to call. */
.routes { display: grid; gap: 14px; margin: 1.6em 0; }
@media (min-width: 720px) { .routes { grid-template-columns: repeat(3, 1fr); } }
.route { display: grid; align-content: start; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-s); font-size: 1.0625rem; }
.route p { margin: 0; }
.route-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 13px; background: var(--sunk); color: var(--ink); }
.route-if { font-weight: 700; line-height: 1.3; }
.route-eg { color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.route-arrow { position: relative; width: 2px; height: 24px; margin: 6px 0 8px 22px; background: var(--line-strong); }
.route-arrow::after { content: ""; position: absolute; left: -4px; bottom: -1px; width: 8px; height: 8px; border-right: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); transform: rotate(45deg); }
.route-to { color: var(--accent-deep); font-family: var(--display); font-weight: 700; font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.015em; }
.route-ask { color: var(--ink-2); font-size: 0.92rem; line-height: 1.45; }

/* Patio sizes, drawn to the same scale so they can be compared. */
.plans3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 1.6em 0; }
.plans3 figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow-s); }
.plans3 figcaption { padding: 8px 4px 4px; }
.plans3 figcaption b { display: block; font-family: var(--display); font-size: 1.02rem; letter-spacing: -0.015em; }
.plans3 figcaption span { display: block; color: var(--muted); font-size: 0.84rem; line-height: 1.4; }
@media (min-width: 640px) { .plans3 { gap: 14px; } .plans3 figure { padding: 12px; } .plans3 figcaption b { font-size: 1.12rem; } .plans3 figcaption span { font-size: 0.9rem; } }
.pt-slab { fill: #cdd5e0; stroke: #fff; stroke-width: 1.4; }
.pt-f { fill: none; stroke: var(--navy); stroke-width: 1.3; stroke-linejoin: round; }

/* Stamped concrete patterns. */
.swatches, .prose .swatches { list-style: none; padding: 0; margin: 1.6em 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .swatches, .prose .swatches { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.swatches li, .prose .swatches li { margin: 0; padding: 0; }
.swatches svg { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: 12px; }
.swatches b { display: block; margin-top: 8px; font-size: 0.98rem; }
.swatches span { display: block; color: var(--muted); font-size: 0.86rem; line-height: 1.4; }
.sw-base { fill: #cdd5e0; }
.sw-line { fill: none; stroke: #6f7f99; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sw-fine { fill: none; stroke: #8996ad; stroke-width: 0.9; stroke-linecap: round; }

/* Price ranges as bars on one scale. */
.pricebars { display: grid; gap: 16px; padding: clamp(16px, 2.6vw, 26px); }
.pb-row { display: grid; gap: 6px; }
.pb-label b { display: block; }
.pb-label span { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.pb-track { position: relative; height: 16px; border-radius: 999px; background: var(--sunk); }
.pb-bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); transform-origin: 0 50%; }
.pb-bar.pb-extra { background: repeating-linear-gradient(135deg, var(--navy) 0 6px, #2a4170 6px 12px); }
.pb-value { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pb-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.74rem; font-weight: 600; }
.pb-axis-row > span { display: none; }
.pricebars figcaption { margin-top: 0; padding: 0; }
@media (min-width: 640px) {
  .pb-row { grid-template-columns: 200px 1fr 130px; align-items: center; gap: 18px; }
  .pb-value { text-align: right; }
  .pb-axis-row { margin-top: -8px; }
  .pb-axis-row > span { display: block; }
}

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sweep { from { background-size: 0% 0.32em; } to { background-size: 100% 0.32em; } }
@keyframes bump { from { opacity: 0.55; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes progress { to { transform: scaleX(1); } }
/* Draws a line from its start to its end. The element needs pathLength="1". */
@keyframes draw { from { stroke-dasharray: 1 2; stroke-dashoffset: 1.05; fill-opacity: 0; } to { stroke-dasharray: 1 2; stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes draw-exact { from { stroke-dasharray: 1 2; stroke-dashoffset: 1; } to { stroke-dasharray: 1 2; stroke-dashoffset: 0; } }
@keyframes pen { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes pour-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes word { from { opacity: 0; transform: translateY(0.45em) rotate(3deg); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sheen { to { transform: translateX(130%); } }
@keyframes grid-in { from { opacity: 0; background-position: 40px 40px; } to { opacity: 1; background-position: 0 0; } }
@keyframes pour-drive { from { transform: translateX(-100%); } to { transform: translateX(-12px); } }
@keyframes truck-bob { from { transform: translateY(0); } to { transform: translateY(-0.9px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drum { to { transform: translateX(16px); } }
@keyframes stream { from { transform: scaleX(0.8); } to { transform: scaleX(1.15); } }
@keyframes blink { from { opacity: 1; } to { opacity: 0.3; } }
@keyframes draw-again { from { stroke-dasharray: 1 2; stroke-dashoffset: 1.05; } to { stroke-dasharray: 1 2; stroke-dashoffset: 0; } }

/* On arrival: the top of the page settles in, and the logo draws itself. */
.hero-copy > *, .page-head .wrap > * { animation: rise 0.7s var(--ease) both; }
.hero-copy > :nth-child(2), .page-head .wrap > :nth-child(2) { animation-delay: 0.07s; }
.hero-copy > :nth-child(3), .page-head .wrap > :nth-child(3) { animation-delay: 0.14s; }
.hero-copy > :nth-child(4), .page-head .wrap > :nth-child(4) { animation-delay: 0.21s; }
.hero-copy > :nth-child(5) { animation-delay: 0.28s; }
.plan-wrap { animation: rise 0.9s var(--ease) 0.2s both; }
.hero::before, .page-head::before { animation: grid-in 1.6s var(--ease) both; }

/* Home headline: the words land one after another, then a marker runs under
   "driveways and patios". Each word carries its position in --n. */
.hero-copy > h1 { animation: none; }
.hero h1 .w { display: inline-block; animation: word 0.75s var(--ease) both; animation-delay: calc(0.08s + var(--n, 0) * 0.055s); }
.hl { animation: sweep 0.9s var(--ease) 0.95s both; }
/* The three ticks pop in, and a single sheen crosses the main button. */
.ticks li::before { animation: pop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) 0.8s both; }
.ticks li:nth-child(2)::before { animation-delay: 0.9s; }
.ticks li:nth-child(3)::before { animation-delay: 1s; }
.hero-copy .btn:not(.btn-ghost)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%); transform: translateX(-130%); animation: sheen 1.1s ease 1.8s both; pointer-events: none; }

/* The truck: wheels turn, the drum's stripes slide to look like it is
   spinning, the cab bobs and the beacon blinks. Each runs a set number of
   times, so nothing keeps animating once the truck has driven off. */
.pour-truck { animation: truck-bob 0.45s ease-in-out 24 alternate; }
.truck-wheel { transform-box: fill-box; transform-origin: center; animation: spin 0.55s linear 20; }
.truck-stripes { animation: drum 0.8s linear 14; }
.truck-stream { transform-box: fill-box; transform-origin: 50% 0; animation: stream 0.3s ease-in-out 36 alternate; }
.truck-beacon { animation: blink 0.7s steps(2, jump-none) 16; }
.brand .mark path { animation: draw 0.55s var(--ease) both; }
.brand .mark path:nth-child(2) { animation-delay: 0.12s; }
.brand .mark path:nth-child(3) { animation-delay: 0.24s; }
.brand .mark path:nth-child(4) { animation-delay: 0.36s; }
.brand:hover .mark path { animation-name: draw-again; }

/* The plan drawing. Each piece carries its own start time in --d. site.js
   holds the drawing back until it is on screen. */
.draw { animation: draw var(--t, 0.9s) var(--ease) var(--d, 0s) both; }
.fade { animation: fade 0.6s ease var(--d, 0s) both; }
.pl-edge.draw { animation-name: draw-exact; }
/* Concrete fills the slab from the garage out to the street. */
.pl-pour { transform-box: fill-box; transform-origin: 50% 0; animation: pour-fill 1.2s cubic-bezier(0.5, 0, 0.3, 1) var(--d, 0s) both; }
/* A marker dot rides the tip of the line as the slab outline is drawn. */
@supports (offset-path: path("M0 0h1")) {
  .pl-pen { offset-path: path("M155 66h90v180h-90z"); offset-rotate: 0deg; animation: pen 1.1s var(--ease) 0.45s both; }
}
.plan-card.wait .draw, .plan-card.wait .fade, .plan-card.wait .pl-pour, .plan-card.wait .pl-pen { animation-play-state: paused; }

/* Service icons redraw when their card is pointed at. */
.card:hover .card-icon path { animation: draw-again 0.6s var(--ease) both; }
.card:hover .card-icon path:nth-child(2) { animation-delay: 0.07s; }
.card:hover .card-icon path:nth-child(3) { animation-delay: 0.14s; }
.card:hover .card-icon path:nth-child(n + 4) { animation-delay: 0.21s; }

/* On scroll: site.js adds "will-animate" to groups that start below the
   screen and "in" once they are reached. Without JavaScript neither class
   is ever added, so everything is simply visible. */
.will-animate[data-reveal], .will-animate > li, .will-animate > .price, .will-animate > .route, .will-animate > figure { opacity: 0; transform: translateY(18px); }
.will-animate.in[data-reveal], .will-animate.in > li, .will-animate.in > .price, .will-animate.in > .route, .will-animate.in > figure {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease) calc(var(--i, 0) * 80ms), transform 0.7s var(--ease) calc(var(--i, 0) * 80ms);
}
.will-animate > :nth-child(2) { --i: 1; }
.will-animate > :nth-child(3) { --i: 2; }
.will-animate > :nth-child(4) { --i: 3; }
.will-animate > :nth-child(5) { --i: 4; }
.will-animate > :nth-child(6) { --i: 5; }
.will-animate > :nth-child(7) { --i: 6; }
.will-animate > :nth-child(8) { --i: 7; }
.steps.will-animate::before { transform: scaleX(0); }
.steps.will-animate.in::before { transform: scaleX(1); transition: transform 1.1s var(--ease) 0.15s; }
.checklist.will-animate > li::before { transform: scale(0); }
.checklist.will-animate.in > li::before { transform: scale(1); transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--i, 0) * 80ms + 0.25s); }

/* Diagrams hold still until they are on screen, then draw themselves. */
.dia-mark { transform-box: fill-box; transform-origin: center; animation: pop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) var(--d, 0s) both; }
.pb-bar { animation: grow-x 0.9s var(--ease) calc(0.15s + var(--i, 0) * 0.14s) both; }
.diagram.wait .draw, .diagram.wait .fade, .diagram.wait .dia-mark, .diagram.wait .pb-bar { animation-play-state: paused; }
/* The season chart wipes in from January to December. */
.season.will-animate .season-grid { clip-path: inset(0 100% 0 0); }
.season.will-animate.in .season-grid { clip-path: inset(0); transition: clip-path 1.3s var(--ease) 0.2s; }

/* Guides: a thin bar along the top that fills as the page is read. Browsers
   without scroll-linked animation leave it empty. */
.progress { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root); }
}

/* A soft cross-fade from one page to the next, where the browser offers it. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}