:root {
  color-scheme: dark;
  --ink: #070a0f;
  --ink-soft: #0c1118;
  --panel: #111925;
  --panel-light: #172231;
  --line: rgba(185, 202, 225, 0.16);
  --line-strong: rgba(185, 202, 225, 0.3);
  --text: #f5f8fc;
  --muted: #aab5c4;
  --blue: #1687ff;
  --blue-bright: #59b9ff;
  --blue-deep: #0758d9;
  --green: #47d69a;
  --concrete: #b8bec7;
  --warm: #d6c5a7;
  --danger: #ff7c7c;
  --radius: 20px;
  --shadow: 0 24px 65px rgba(0, 0, 0, 0.36);
  --shell: min(1120px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 85% 4%, rgba(22, 135, 255, 0.12), transparent 26rem),
    var(--ink);
  font: 16px/1.65 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(81, 185, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(81, 185, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(#000, transparent 90%);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: "Arial Narrow", Inter, sans-serif; letter-spacing: -0.045em; line-height: 0.98; text-transform: uppercase; }
h1 { font-size: clamp(3.1rem, 7vw, 6.8rem); margin-bottom: 26px; }
h2 { font-size: clamp(2.4rem, 4.7vw, 4.5rem); margin-bottom: 22px; }
h3 { line-height: 1.25; }
p { color: var(--muted); }

.shell { width: var(--shell); margin-inline: auto; }
.section { position: relative; padding: 92px 0; }
.section-tight { padding: 58px 0; }
.muted-section { border-block: 1px solid var(--line); background: rgba(14, 20, 29, 0.72); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 999; background: white; color: black; padding: 10px 14px; border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--blue-bright); font-size: 11px; font-weight: 850; letter-spacing: 0.2em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 430px); gap: 55px; align-items: end; margin-bottom: 42px; }
.section-heading > * { margin-bottom: 0; }
.section-heading p { font-size: 17px; }
.kicker { color: var(--green); font-size: 12px; font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 10, 15, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.nav-wrap { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; min-width: 145px; }
.brand-mark { position: relative; flex: 0 0 145px; width: 145px; height: 79px; overflow: hidden; background: #070a0f; }
.brand-mark img { position: absolute; left: 50%; top: -9px; width: 145px; max-width: none; height: auto; transform: translateX(-50%); filter: invert(1) grayscale(1) brightness(1.08) contrast(1.12) drop-shadow(0 0 10px rgba(22,135,255,.16)); }
.brand-copy { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.brand-copy strong { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.brand-copy small { margin-top: 6px; color: var(--muted); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; }
.primary-nav { display: flex; align-items: center; gap: 26px; }
.primary-nav a { color: #c8d1dc; font-size: 13px; font-weight: 700; }
.primary-nav a:hover, .primary-nav a:focus-visible, .primary-nav a[aria-current="page"] { color: var(--blue-bright); }
.primary-nav .nav-cta { padding: 10px 16px; color: white; border: 1px solid rgba(81, 185, 255, 0.4); border-radius: 999px; background: rgba(22, 135, 255, 0.1); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; color: white; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.menu-toggle span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; background: currentColor; }

.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-weight: 850; font-size: 13px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); box-shadow: 0 13px 34px rgba(22, 135, 255, 0.26); }
.button-secondary { color: #07130e; background: linear-gradient(135deg, var(--green), #79e8b8); box-shadow: 0 13px 34px rgba(71, 214, 154, 0.2); }
.button-ghost { color: #dce5ef; border-color: var(--line-strong); background: rgba(255, 255, 255, 0.025); }
.button-small { min-height: 44px; padding-inline: 17px; }
.actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 30px; }

.hero { padding: 86px 0 76px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: center; gap: 56px; }
.hero-copy > p:not(.eyebrow) { max-width: 670px; font-size: clamp(1rem, 1.8vw, 1.2rem); }
.hero-copy h1 em, .page-hero h1 em { color: var(--blue-bright); font-style: normal; }
.trust-row { display: flex; gap: 20px; flex-wrap: wrap; padding: 0; margin: 34px 0 0; list-style: none; color: #bdc7d4; font-size: 12px; }
.trust-row li { display: flex; align-items: center; gap: 7px; }
.trust-row li::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; color: var(--green); border-radius: 50%; background: rgba(71, 214, 154, 0.12); font-size: 10px; }

.launch-visual { min-height: 470px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg, #18212d, #0a0f16); box-shadow: var(--shadow); }
.launch-visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(81, 185, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(81, 185, 255, 0.1) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle, #000, transparent 78%); }
.launch-visual::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 13%; height: 34%; border: 2px solid rgba(184, 190, 199, 0.72); background: linear-gradient(135deg, rgba(184, 190, 199, 0.22), rgba(88, 98, 112, 0.08)); transform: perspective(700px) rotateX(58deg) rotateZ(-7deg); box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.025), 0 0 35px rgba(81, 185, 255, 0.15); }
.launch-visual img { position: absolute; z-index: 2; left: 25%; top: 18%; width: 50%; height: 50%; object-fit: contain; filter: drop-shadow(0 0 30px rgba(22, 135, 255, 0.44)); }
.launch-visual img.logo-artwork { left: 15%; top: 12%; width: 70%; height: 72%; border-radius: 18px; filter: invert(1) grayscale(1) brightness(1.08) contrast(1.12) drop-shadow(0 0 24px rgba(22,135,255,.22)); }
.home-brand-visual::after { display: none; }
.home-brand-visual img.logo-artwork { left: 10%; top: 10%; width: 80%; height: 80%; }
.visual-label { position: absolute; z-index: 3; left: 24px; right: 24px; top: 22px; display: flex; justify-content: space-between; color: #8f9cad; font: 800 9px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0.14em; text-transform: uppercase; }
.visual-label b { color: var(--green); }
.visual-card { position: absolute; z-index: 3; right: 24px; bottom: 24px; max-width: 220px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: rgba(8, 13, 19, 0.9); }
.visual-card strong { display: block; margin-bottom: 4px; font-size: 13px; }
.visual-card span { color: var(--muted); font-size: 11px; }

.proof-strip { border-block: 1px solid var(--line); background: rgba(16, 23, 33, 0.9); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-item { min-height: 104px; padding: 22px; border-right: 1px solid var(--line); }
.proof-item:last-child { border-right: 0; }
.proof-item strong { display: block; margin-bottom: 3px; color: white; font-size: 14px; }
.proof-item span { color: var(--muted); font-size: 12px; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18, 26, 37, 0.98), rgba(11, 16, 23, 0.98)); }
.card::before { content: ""; position: absolute; top: 0; left: 28px; width: 34px; height: 2px; background: var(--blue-bright); box-shadow: 0 0 13px rgba(81, 185, 255, 0.5); }
.card h3 { margin-bottom: 10px; font-size: 20px; }
.card p { margin-bottom: 0; font-size: 14px; }
.card-link { display: inline-block; margin-top: 20px; color: var(--blue-bright); font-size: 13px; font-weight: 800; }
.featured-card { border-color: rgba(81, 185, 255, 0.4); background: linear-gradient(145deg, rgba(18, 49, 82, 0.65), rgba(11, 16, 23, 0.98)); }
.featured-card::after { content: "FIRST AD CAMPAIGN"; position: absolute; top: 20px; right: 20px; color: var(--green); font: 800 8px ui-monospace, Consolas, monospace; letter-spacing: 0.12em; }

.focus-panel { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: var(--panel); box-shadow: var(--shadow); }
.focus-copy { padding: clamp(34px, 5vw, 62px); }
.focus-copy h2 { font-size: clamp(2.6rem, 5vw, 4.7rem); }
.service-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px 18px; padding: 0; margin: 28px 0 0; list-style: none; }
.service-list li { position: relative; padding-left: 18px; color: #c8d1dc; font-size: 14px; }
.service-list li::before { content: ""; position: absolute; top: 0.72em; left: 0; width: 7px; height: 2px; background: var(--green); }
.concrete-art { min-height: 480px; position: relative; overflow: hidden; background: linear-gradient(145deg, #8f969f, #454d58); }
.concrete-art::before { content: ""; position: absolute; inset: -15%; opacity: 0.48; background-image: radial-gradient(circle at 12px 18px, rgba(255,255,255,.22) 0 1px, transparent 2px), radial-gradient(circle at 45px 38px, rgba(0,0,0,.24) 0 1px, transparent 2px); background-size: 58px 52px; transform: rotate(-8deg); }
.concrete-art::after { content: ""; position: absolute; left: 15%; right: -5%; top: 23%; bottom: 17%; border: 3px solid rgba(255,255,255,.62); transform: perspective(600px) rotateX(58deg) rotateZ(-12deg); box-shadow: inset 0 0 0 18px rgba(255,255,255,.09), 0 28px 50px rgba(0,0,0,.28); }
.art-note { position: absolute; z-index: 2; left: 24px; bottom: 22px; padding: 11px 14px; color: #0a1017; border-radius: 9px; background: rgba(245, 248, 252, 0.9); font-size: 11px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.concrete-photo { margin: 0; background: #353b42; }
.concrete-photo::before, .concrete-photo::after { display: none; }
.concrete-photo img { width: 100%; height: 100%; min-height: 480px; display: block; object-fit: cover; object-position: center; }
.project-carousel { min-height: 480px; position: relative; overflow: hidden; background: #353b42; outline: 0; }
.project-carousel:focus-visible { box-shadow: inset 0 0 0 3px var(--lapis); }
.project-carousel-track, .project-slide { position: absolute; inset: 0; }
.project-slide { margin: 0; opacity: 0; visibility: hidden; transition: opacity .42s ease, visibility .42s ease; }
.project-slide.is-active { opacity: 1; visibility: visible; }
.project-slide img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.project-slide figcaption { position: absolute; z-index: 2; left: 24px; bottom: 22px; max-width: calc(100% - 130px); padding: 11px 14px; color: #fff; border-radius: 9px; background: rgba(20,24,29,.82); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.carousel-arrow { width: 44px; height: 44px; position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; padding: 0; color: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(20,24,29,.72); cursor: pointer; transform: translateY(-50%); transition: background .2s, transform .2s; }
.carousel-arrow:hover, .carousel-arrow:focus-visible { background: var(--lapis); transform: translateY(-50%) scale(1.05); }
.carousel-prev { left: 18px; }
.carousel-next { right: 18px; }
.carousel-dots { position: absolute; z-index: 3; left: 50%; bottom: 22px; display: flex; gap: 8px; transform: translateX(-50%); }
.carousel-dots button { width: 9px; height: 9px; padding: 0; border: 1px solid rgba(255,255,255,.82); border-radius: 50%; background: rgba(20,24,29,.45); cursor: pointer; }
.carousel-dots button.is-active { background: #fff; box-shadow: 0 0 0 3px rgba(40,83,119,.5); }
.carousel-count { position: absolute; z-index: 3; right: 20px; bottom: 20px; padding: 7px 9px; color: #fff; border-radius: 8px; background: rgba(20,24,29,.72); font: 800 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: steps; }
.step { counter-increment: steps; padding: 26px 0 0; border-top: 1px solid var(--line-strong); }
.step::before { content: "0" counter(steps); display: block; margin-bottom: 20px; color: var(--blue-bright); font: 800 12px ui-monospace, Consolas, monospace; }
.step h3 { margin-bottom: 9px; }
.step p { margin-bottom: 0; font-size: 14px; }

.page-hero { padding: 80px 0 68px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 82% 20%, rgba(22, 135, 255, 0.13), transparent 25rem); }
.page-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 55px; align-items: center; }
.page-hero h1 { max-width: 850px; font-size: clamp(3rem, 6.5vw, 6.2rem); }
.page-hero p { max-width: 720px; font-size: 18px; }
.service-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.service-chips span { padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 999px; color: #cbd4df; background: rgba(255, 255, 255, 0.025); font-size: 11px; font-weight: 750; }
.estimate-card { padding: 29px; border: 1px solid rgba(81, 185, 255, 0.35); border-radius: 22px; background: linear-gradient(145deg, rgba(22, 135, 255, 0.12), rgba(14, 20, 29, 0.95)); box-shadow: var(--shadow); }
.estimate-card strong { display: block; margin-bottom: 9px; font-size: 22px; }
.estimate-card p { margin-bottom: 22px; font-size: 14px; }
.estimate-card .button { width: 100%; }

.finish-visualizer { overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 83% 38%, rgba(22, 135, 255, 0.09), transparent 28rem); }
.finish-builder { display: grid; grid-template-columns: minmax(330px, 0.78fr) minmax(470px, 1.22fr); overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: #0c121a; box-shadow: var(--shadow); }
.finish-controls { display: grid; align-content: start; gap: 27px; padding: clamp(27px, 4vw, 42px); border-right: 1px solid var(--line); background: linear-gradient(160deg, rgba(20, 29, 41, 0.96), rgba(10, 15, 22, 0.98)); }
.choice-group { min-width: 0; padding: 0; margin: 0; border: 0; }
.choice-group legend { width: 100%; margin-bottom: 12px; color: #dfe7f1; font-size: 12px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.visual-choice { min-height: 40px; padding: 0 13px; color: #bcc7d4; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, 0.025); cursor: pointer; font-size: 12px; font-weight: 800; }
.visual-choice:hover, .visual-choice:focus-visible, .visual-choice.is-active { color: white; border-color: rgba(81, 185, 255, 0.62); background: rgba(22, 135, 255, 0.15); }
.finish-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.finish-choice { min-height: 68px; padding: 12px 13px; text-align: left; color: #dce4ee; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, 0.022); cursor: pointer; }
.finish-choice strong, .finish-choice span { display: block; }
.finish-choice strong { font-size: 12px; }
.finish-choice span { margin-top: 3px; color: #8795a6; font-size: 10px; }
.finish-choice:hover, .finish-choice:focus-visible, .finish-choice.is-active { border-color: rgba(71, 214, 154, 0.5); background: rgba(71, 214, 154, 0.08); }
.finish-choice.is-active strong { color: var(--green); }
.finish-choice:disabled { opacity: 0.35; cursor: not-allowed; }
.drainage-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drainage-choice { min-height: 62px; padding: 11px 12px; text-align: left; color: #dce4ee; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, 0.022); cursor: pointer; }
.drainage-choice strong, .drainage-choice span { display: block; }
.drainage-choice strong { font-size: 11px; }
.drainage-choice span { margin-top: 2px; color: #8391a2; font-size: 9px; }
.drainage-choice:hover, .drainage-choice:focus-visible, .drainage-choice.is-active { border-color: rgba(81, 185, 255, 0.55); background: rgba(22, 135, 255, 0.1); }
.drainage-choice.is-active strong { color: var(--blue-bright); }
.drainage-disclaimer { margin: 10px 0 0; color: #748296; font-size: 9px; line-height: 1.45; }
.finish-readout { padding-top: 22px; border-top: 1px solid var(--line); }
.finish-readout .kicker { margin-bottom: 7px; }
.finish-readout h3 { margin-bottom: 7px; font-size: 23px; }
.finish-readout p { margin-bottom: 13px; font-size: 13px; }
.finish-readout .drainage-readout { margin: 0; color: var(--blue-bright); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

.finish-render-panel { min-height: 720px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 68px 28px 30px; background: linear-gradient(145deg, #111a25, #070c12); }
.finish-render-panel::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(81, 185, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(81, 185, 255, 0.07) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle at center, #000, transparent 77%); pointer-events: none; }
.render-hud { position: absolute; z-index: 4; top: 23px; left: 25px; right: 25px; display: flex; justify-content: space-between; color: #8391a2; font: 800 9px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0.13em; text-transform: uppercase; }
.render-hud b { color: var(--green); font-weight: inherit; }
.finish-stage { width: 100%; height: 455px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(185, 202, 225, 0.1); border-radius: 18px; outline: 0; perspective: 900px; cursor: grab; touch-action: none; user-select: none; background: #101a23; }
.finish-stage:active { cursor: grabbing; }
.finish-stage:focus-visible { border-radius: 14px; box-shadow: inset 0 0 0 2px var(--blue-bright); }
.project-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(#5d7d9b 0 43%, #80909a 44% 46%, #3c5b3d 47% 100%); }
.scene-sky { position: absolute; inset: 0 0 54%; background: radial-gradient(circle at 76% 22%, rgba(255,255,255,.72) 0 2%, transparent 3%), linear-gradient(#486984, #8ca9b6); }
.scene-house { position: absolute; z-index: 2; left: 10%; right: 10%; top: 18%; height: 42%; border: 2px solid rgba(236,229,215,.34); background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(255,255,255,.06) 18px 19px), linear-gradient(90deg, #68615a, #8b7a6a); box-shadow: 0 15px 30px rgba(0,0,0,.28); }
.scene-roof { position: absolute; left: -5%; right: -5%; top: -32%; height: 36%; background: repeating-linear-gradient(90deg, #313942 0 20px, #252c33 21px 23px); clip-path: polygon(5% 100%, 18% 0, 82% 0, 95% 100%); }
.scene-garage { position: absolute; left: 8%; bottom: 0; width: 52%; height: 73%; border: 3px solid #b8b2a8; background: repeating-linear-gradient(0deg, #858584 0 18px, #696d70 19px 21px); box-shadow: inset 0 0 20px rgba(0,0,0,.18); }
.scene-door { position: absolute; right: 13%; bottom: 0; width: 17%; height: 65%; border: 3px solid #423b36; background: linear-gradient(90deg, #47413c, #6d5d4e); }
.scene-door::after { content: ""; position: absolute; right: 11%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #d4b15b; }
.scene-window { position: absolute; top: 16%; width: 13%; height: 23%; border: 3px solid #d2d7d7; background: linear-gradient(135deg, #7799ad, #243b4d); box-shadow: inset 0 0 0 2px rgba(255,255,255,.1); }
.window-left { left: 65%; }
.window-right { right: 4%; }
.scene-fence { display: none; position: absolute; z-index: 1; left: 0; right: 0; top: 43%; height: 24%; background: repeating-linear-gradient(90deg, #756652 0 26px, #554939 27px 29px); opacity: .88; }
.scene-lawn { position: absolute; z-index: 1; bottom: 0; height: 44%; background: repeating-linear-gradient(100deg, #375e3b 0 7px, #2d4f33 8px 14px); }
.lawn-left { left: 0; width: 32%; }
.lawn-right { right: 0; width: 32%; }
.scene-pool { display: none; position: absolute; z-index: 2; left: 24%; right: 12%; bottom: 5%; height: 32%; border: 7px solid #bec6c9; border-radius: 46% 16% 42% 18%; background: repeating-radial-gradient(circle at 20% 30%, #56c8eb 0 5px, #3296c5 6px 10px); box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.scene-downspout { display: none; position: absolute; right: 9%; top: 18%; bottom: -23%; width: 8px; border: 2px solid #b9c2c8; border-radius: 3px; background: #77828a; }
.scene-downspout::after { content: ""; position: absolute; left: -2px; bottom: -3px; width: 38px; height: 8px; border: 2px solid #b9c2c8; border-left: 0; border-radius: 0 5px 5px 0; background: #77828a; }
.scene-walkway .scene-garage { left: 4%; width: 42%; opacity: .75; }
.scene-walkway .scene-door { right: 35%; width: 18%; }
.scene-walkway .window-left { display: none; }
.scene-patio .scene-house, .scene-pool-deck .scene-house, .scene-pavers.location-back .scene-house { left: 18%; right: 4%; top: 21%; height: 36%; }
.scene-patio .scene-garage, .scene-pool-deck .scene-garage, .scene-pavers.location-back .scene-garage { display: none; }
.scene-patio .scene-door, .scene-pool-deck .scene-door, .scene-pavers.location-back .scene-door { right: 8%; width: 38%; height: 62%; background: linear-gradient(90deg, #43627a 0 48%, #d4dcdf 49% 51%, #43627a 52%); }
.scene-patio .scene-fence, .scene-pool-deck .scene-fence, .scene-pavers.location-back .scene-fence { display: block; }
.scene-patio .lawn-left, .scene-patio .lawn-right { width: 18%; }
.scene-steps .scene-house { left: 20%; right: 20%; top: 15%; height: 47%; }
.scene-steps .scene-garage { display: none; }
.scene-steps .scene-door { right: 37%; width: 26%; height: 69%; }
.scene-steps .scene-window { display: none; }
.scene-pool-deck .scene-lawn { width: 12%; }
.scene-pavers.location-front .scene-garage { width: 45%; }
.scene-pavers.location-front .scene-door { right: 24%; }
.scene-pavers.location-back .scene-fence { display: block; }
.project-scene.drainage-gutters .scene-downspout { display: block; }

/* Clean architectural context drawings for the interactive preview. */
.project-scene {
  inset: 12px;
  border: 1px solid rgba(142, 178, 212, 0.18);
  border-radius: 14px;
  background-color: #0b121a;
  background-image:
    linear-gradient(rgba(81, 185, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(81, 185, 255, 0.055) 1px, transparent 1px);
  background-size: 24px 24px;
}
.project-scene::before,
.project-scene::after { position: absolute; z-index: 8; color: #7790a8; font: 800 8px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .13em; text-transform: uppercase; }
.project-scene::before { content: "Front yard / driveway"; left: 16px; top: 15px; }
.project-scene::after { content: "Concept preview / not to scale"; right: 16px; top: 15px; }
.project-scene.scene-walkway::before { content: "Front entry / walkway"; }
.project-scene.scene-patio::before { content: "Backyard / patio"; }
.project-scene.scene-steps::before { content: "Exterior door / steps"; }
.project-scene.scene-pool-deck::before { content: "Backyard / pool deck"; }
.project-scene.scene-pavers.location-front::before { content: "Front yard / paver addition"; }
.project-scene.scene-pavers.location-back::before { content: "Backyard / paver addition"; }
.scene-sky, .scene-roof, .scene-window, .scene-pool { display: none !important; }
.scene-house {
  left: 13%;
  right: 13%;
  top: 15%;
  height: 29%;
  border: 2px solid rgba(185, 210, 232, 0.52);
  border-radius: 3px;
  background: rgba(81, 185, 255, 0.025);
  box-shadow: none;
}
.scene-house::before { content: "HOUSE"; position: absolute; left: 10px; top: 8px; color: #71869b; font: 800 8px ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.scene-garage {
  left: 12%;
  bottom: 0;
  width: 50%;
  height: 64%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(185, 210, 232, 0.38);
  background: rgba(255,255,255,.015);
  box-shadow: none;
}
.scene-garage::after { content: "GARAGE"; color: #72889e; font: 800 7px ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.scene-door {
  right: 14%;
  bottom: 0;
  width: 16%;
  height: 58%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(81, 185, 255, 0.52);
  background: rgba(22,135,255,.045);
}
.scene-door::after { content: "ENTRY"; position: static; width: auto; height: auto; color: var(--blue-bright); background: none; font: 800 7px ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.scene-lawn {
  bottom: 4%;
  height: 47%;
  border: 1px dashed rgba(71, 214, 154, 0.25);
  background: rgba(71, 214, 154, 0.018);
}
.lawn-left { left: 3%; width: 27%; }
.lawn-right { right: 3%; width: 27%; }
.scene-fence {
  left: 4%;
  right: 4%;
  top: 49%;
  height: 44%;
  border: 1px dashed rgba(185, 210, 232, 0.3);
  background: transparent;
  opacity: 1;
}
.scene-fence::after { content: "YARD / FENCE LINE"; position: absolute; right: 10px; bottom: 8px; color: #64798e; font: 800 7px ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.scene-walkway .scene-garage { left: 8%; width: 39%; opacity: .45; }
.scene-walkway .scene-door { right: 38%; width: 17%; }
.scene-patio .scene-house, .scene-pool-deck .scene-house, .scene-pavers.location-back .scene-house { left: 14%; right: 14%; top: 15%; height: 29%; }
.scene-patio .scene-garage, .scene-pool-deck .scene-garage, .scene-pavers.location-back .scene-garage { display: none; }
.scene-patio .scene-door, .scene-pool-deck .scene-door, .scene-pavers.location-back .scene-door { right: 31%; width: 38%; height: 54%; background: rgba(22,135,255,.035); }
.scene-patio .scene-door::after, .scene-pool-deck .scene-door::after, .scene-pavers.location-back .scene-door::after { content: "BACK DOOR"; }
.scene-patio .scene-fence, .scene-pool-deck .scene-fence, .scene-pavers.location-back .scene-fence { display: block; }
.scene-patio .scene-lawn, .scene-pool-deck .scene-lawn, .scene-pavers.location-back .scene-lawn { display: none; }
.scene-steps .scene-house { left: 25%; right: 25%; top: 11%; height: 34%; }
.scene-steps .scene-garage { display: none; }
.scene-steps .scene-door { right: 34%; width: 32%; height: 66%; }
.scene-steps .scene-door::after { content: "EXTERIOR DOOR"; }
.scene-pavers.location-front .scene-garage { width: 42%; }
.scene-pavers.location-front .scene-door { right: 26%; }
.scene-pavers.location-back .scene-fence { display: block; }
.scene-downspout { right: 8%; top: 25%; bottom: -28%; width: 5px; border: 1px solid rgba(81,185,255,.7); background: rgba(81,185,255,.18); }
.scene-downspout::after { left: -1px; width: 30px; height: 5px; border: 1px solid rgba(81,185,255,.7); border-left: 0; background: rgba(81,185,255,.18); }
.finish-model { --rx: 58deg; --rz: -27deg; --surface: #9da3aa; width: 76%; height: 245px; position: relative; z-index: 3; transform-style: preserve-3d; transform: translateY(48px) rotateX(var(--rx)) rotateZ(var(--rz)); transition: width 0.35s, height 0.35s, transform 0.15s ease-out; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.36)); }
.finish-stage.is-dragging .finish-model { transition: width 0.35s, height 0.35s; }
.model-top, .model-steps span { background: var(--surface); background-size: var(--surface-size, auto); }
.model-top { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 3px; transform: translateZ(18px); box-shadow: inset 0 0 24px rgba(255,255,255,.055); }
.model-front { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; transform-origin: bottom; transform: rotateX(-90deg); background: linear-gradient(#737981, #4d5359); }
.model-side { position: absolute; top: 0; right: 0; bottom: 0; width: 18px; transform-origin: right; transform: rotateY(90deg); background: linear-gradient(90deg, #666d73, #474d53); }
.control-joint { position: absolute; z-index: 2; background: rgba(43, 48, 54, 0.58); box-shadow: 0 1px rgba(255,255,255,.16); }
.joint-one { left: 33.333%; top: 0; bottom: 0; width: 2px; }
.joint-two { left: 66.666%; top: 0; bottom: 0; width: 2px; }
.shape-walkway { width: 39%; height: 305px; }
.shape-walkway .joint-one { left: 0; right: 0; top: 33.333%; bottom: auto; width: auto; height: 2px; }
.shape-walkway .joint-two { left: 0; right: 0; top: 66.666%; bottom: auto; width: auto; height: 2px; }
.shape-patio { width: 78%; height: 230px; }
.shape-patio .joint-one { left: 50%; }
.shape-patio .joint-two { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; }
.shape-steps { width: 70%; height: 270px; }
.shape-steps .model-top, .shape-steps .model-front, .shape-steps .model-side { opacity: 0; }
.model-steps { display: none; position: absolute; inset: 0; transform-style: preserve-3d; }
.shape-steps .model-steps { display: block; }
.model-steps span { position: absolute; height: 31%; border: 2px solid rgba(255,255,255,.35); border-radius: 3px; box-shadow: inset 0 -15px 18px rgba(0,0,0,.13), 0 12px 0 #4a5057; }
.model-steps span:nth-child(1) { left: 5%; right: 5%; bottom: 5%; transform: translateZ(5px); }
.model-steps span:nth-child(2) { left: 16%; right: 16%; bottom: 30%; transform: translateZ(27px); }
.model-steps span:nth-child(3) { left: 27%; right: 27%; bottom: 55%; transform: translateZ(49px); }
.shape-pool-deck { width: 85%; height: 270px; }
.shape-pool-deck .joint-one { left: 50%; }
.shape-pool-deck .joint-two { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; }
.model-pool { display: none; position: absolute; left: 16%; right: 14%; top: 18%; bottom: 18%; z-index: 3; border: 7px solid rgba(232,238,239,.8); border-radius: 42% 15% 38% 17%; background: repeating-radial-gradient(circle at 25% 30%, #58d1f3 0 7px, #217fae 8px 14px); box-shadow: inset 0 0 25px rgba(255,255,255,.3), 0 0 0 2px rgba(22,71,91,.45); }
.shape-pool-deck .model-pool { display: block; }
.shape-pavers { width: 64%; height: 235px; }
.finish-broom { --surface: repeating-linear-gradient(90deg, #aeb3b8 0 5px, #999fa5 5px 6px, #b4b9bd 6px 11px); }
.finish-light-broom { --surface: repeating-linear-gradient(90deg, #b8bdc1 0 9px, #a7acb0 9px 10px, #bdc1c5 10px 18px); }
.finish-spray-deck { --surface: radial-gradient(circle, rgba(98,91,81,.32) 0 1px, transparent 1.5px), linear-gradient(135deg, #c7bdad, #aea394); --surface-size: 9px 9px, auto; }
.finish-pea-gravel { --surface: radial-gradient(circle at 30% 30%, #c4a77f 0 2px, #7c674d 2.5px 3px, transparent 3.5px), radial-gradient(circle at 70% 65%, #9c8668 0 2px, #63513d 2.5px 3px, transparent 3.5px), #8c7b65; --surface-size: 13px 13px; }
.finish-stamped { --surface: linear-gradient(90deg, transparent 48%, rgba(74,67,59,.5) 49% 51%, transparent 52%), linear-gradient(0deg, transparent 47%, rgba(74,67,59,.48) 48% 52%, transparent 53%), #a2917e; --surface-size: 78px 48px, 78px 48px, auto; }
.finish-flagstone { --surface: linear-gradient(28deg, transparent 47%, rgba(80,72,61,.52) 48% 51%, transparent 52%), linear-gradient(145deg, transparent 46%, rgba(80,72,61,.48) 47% 50%, transparent 51%), #aa9b82; --surface-size: 110px 82px, 93px 76px, auto; }
.finish-pavers { --surface: linear-gradient(90deg, transparent 48%, rgba(69,62,56,.58) 49% 51%, transparent 52%), linear-gradient(0deg, transparent 47%, rgba(69,62,56,.54) 48% 52%, transparent 53%), #a99078; --surface-size: 54px 32px, 54px 32px, auto; }
.drain-visual { display: none; position: absolute; z-index: 7; }
.drain-deck-o { left: 4%; right: 4%; top: 17%; height: 9px; border: 2px solid #383e43; background: repeating-linear-gradient(90deg, #9aa2a7 0 5px, #444b50 6px 8px); box-shadow: 0 0 0 2px rgba(255,255,255,.14); }
.drain-area { left: 50%; top: 47%; width: 35px; height: 35px; transform: translate(-50%,-50%); border: 3px solid #373e43; background: repeating-linear-gradient(90deg, #8f989e 0 3px, #31383d 4px 7px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.drain-gutter { right: 7%; top: 7%; bottom: 7%; width: 9px; border: 2px solid #3c454b; background: repeating-linear-gradient(0deg, #8e9aa1 0 7px, #3f484e 8px 10px); }
.finish-model.drainage-deck-o .drain-deck-o, .finish-model.drainage-area-drain .drain-area, .finish-model.drainage-gutters .drain-gutter { display: block; }

/* Flat 2D plan system: the entire drawing spins in-plane through 360 degrees. */
.finish-stage { perspective: none; background-color: #091018; background-image: linear-gradient(rgba(81,185,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(81,185,255,.045) 1px, transparent 1px); background-size: 24px 24px; }
.finish-model {
  --rotation: 0deg;
  width: min(86%, 560px);
  height: 360px;
  border: 1px solid rgba(142, 178, 212, 0.25);
  border-radius: 12px;
  background: rgba(11, 19, 28, 0.96);
  transform: rotate(var(--rotation));
  transform-origin: center;
  transform-style: flat;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.32));
}
.finish-stage.is-dragging .finish-model { transition: width .35s, height .35s; }
.plan-boundary { position: absolute; inset: 7%; border: 1px dashed rgba(142,178,212,.24); border-radius: 4px; }
.plan-house { position: absolute; z-index: 2; left: 8%; right: 8%; top: 8%; height: 23%; border: 2px solid rgba(203,220,235,.56); background: rgba(81,185,255,.02); }
.plan-house::before { content: "HOUSE"; position: absolute; left: 8px; top: 7px; color: #71869b; font: 800 7px ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.plan-garage, .plan-door { position: absolute; bottom: -2px; display: grid; place-items: center; height: 58%; color: #8094a7; border: 1px solid rgba(185,210,232,.42); background: #0c151e; font: 800 7px ui-monospace, Consolas, monospace; letter-spacing: .09em; text-transform: uppercase; }
.plan-garage { left: 10%; width: 44%; }
.plan-door { right: 12%; width: 18%; color: var(--blue-bright); border-color: rgba(81,185,255,.52); }
.plan-road { position: absolute; z-index: 2; left: 8%; right: 8%; bottom: 7%; height: 7%; display: grid; place-items: center; color: #62778b; border-block: 1px solid rgba(185,210,232,.22); font: 800 7px ui-monospace, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.plan-fence { display: none; position: absolute; z-index: 1; left: 7%; right: 7%; top: 33%; bottom: 7%; padding: 7px; color: #64798e; border: 1px dashed rgba(185,210,232,.3); text-align: right; font: 800 7px ui-monospace, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.plan-north { position: absolute; z-index: 8; right: 10%; top: 36%; display: grid; justify-items: center; color: #7890a8; font: 800 8px ui-monospace, Consolas, monospace; }
.plan-north i { width: 1px; height: 20px; position: relative; margin-bottom: 3px; background: var(--blue-bright); }
.plan-north i::before { content: ""; position: absolute; left: -3px; top: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 6px solid var(--blue-bright); transform: translateY(-4px); }
.plan-caption { position: absolute; z-index: 8; left: 10%; bottom: 9%; color: #63778a; font: 800 7px ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.finish-model .model-front, .finish-model .model-side { display: none !important; }
.finish-model .model-top {
  inset: auto;
  z-index: 5;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 2px;
  transform: none;
  box-shadow: 0 0 0 1px rgba(6,10,14,.45), inset 0 0 16px rgba(255,255,255,.045);
}
.shape-driveway .model-top { left: 17%; width: 44%; top: 29%; bottom: 14%; }
.shape-walkway .model-top { left: 67%; width: 11%; top: 29%; bottom: 14%; }
.shape-patio .model-top { left: 19%; right: 19%; top: 35%; bottom: 14%; }
.shape-patio .plan-garage, .shape-pool-deck .plan-garage, .shape-pavers.location-back .plan-garage, .shape-steps .plan-garage { display: none; }
.shape-patio .plan-door, .shape-pool-deck .plan-door, .shape-pavers.location-back .plan-door, .shape-steps .plan-door { right: 36%; width: 28%; }
.shape-patio .plan-door::after, .shape-pool-deck .plan-door::after, .shape-pavers.location-back .plan-door::after { content: " / BACK"; }
.shape-patio .plan-road, .shape-pool-deck .plan-road, .shape-pavers.location-back .plan-road, .shape-steps .plan-road { display: none; }
.shape-patio .plan-fence, .shape-pool-deck .plan-fence, .shape-pavers.location-back .plan-fence { display: block; }
.shape-steps .model-top { display: none; }
.finish-model.shape-steps .model-steps { position: absolute; z-index: 5; left: 36%; right: 36%; top: 29%; height: 38%; display: grid; grid-template-rows: repeat(3, 1fr); gap: 5px; transform: none; }
.finish-model.shape-steps .model-steps span { position: static; width: auto; height: auto; transform: none; border: 1px solid rgba(255,255,255,.44); border-radius: 2px; background: var(--surface); background-size: var(--surface-size, auto); box-shadow: inset 0 -8px 12px rgba(0,0,0,.1); }
.shape-steps .plan-door::after { content: " / EXTERIOR"; }
.shape-pool-deck .model-top { left: 10%; right: 10%; top: 35%; bottom: 10%; }
.shape-pool-deck .model-pool { left: 18%; right: 18%; top: 18%; bottom: 18%; border-width: 4px; border-radius: 34% 12% 34% 12%; }
.shape-pavers.location-front .model-top { left: 72%; right: auto; width: 14%; top: 34%; bottom: 16%; }
.shape-pavers.location-back .model-top { left: 43%; right: auto; width: 14%; top: 35%; bottom: 14%; }
.shape-pavers.location-back .plan-fence { display: block; }
.shape-pavers.location-back .plan-road { display: none; }
.paver-dimension { display: none; position: absolute; z-index: 12; color: #8ddcff; font: 800 7px/1 ui-monospace, Consolas, monospace; letter-spacing: .05em; white-space: nowrap; text-shadow: 0 0 7px rgba(81,185,255,.5); }
.shape-pavers .paver-dimension { display: block; }
.paver-width { left: 50%; bottom: -18px; transform: translateX(-50%) translateZ(3px); }
.paver-length { right: -28px; top: 50%; transform: translateY(-50%) rotate(90deg) translateZ(3px); }
.control-joint { opacity: .48; }
.drain-deck-o { top: 18%; height: 6px; }
.drain-area { width: 25px; height: 25px; }
.drain-gutter { width: 6px; }

/* CAD-style 3D wireframe: raised geometry, technical hatching, no scenery. */
.finish-stage {
  overflow: clip;
  perspective: 720px;
  perspective-origin: 50% 44%;
  transform-style: preserve-3d;
  background-color: #050b11;
  background-image:
    linear-gradient(rgba(54, 166, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 166, 255, .06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.finish-model {
  --tilt: 62deg;
  width: min(80%, 500px);
  height: 330px;
  border: 0;
  border-radius: 0;
  background: rgba(7, 15, 22, .72);
  transform: translateY(28px) rotateX(var(--tilt)) rotateZ(var(--rotation));
  transform-style: preserve-3d;
  filter: none;
  will-change: transform;
}
.finish-model::before,
.finish-model::after { content: ""; position: absolute; z-index: 0; pointer-events: none; background: rgba(81,185,255,.24); }
.finish-model::before { left: 50%; top: -5%; bottom: -5%; width: 1px; }
.finish-model::after { top: 50%; left: -4%; right: -4%; height: 1px; }
.plan-boundary { border-color: rgba(81,185,255,.5); transform: translateZ(1px); box-shadow: 0 0 12px rgba(22,135,255,.08); }
.plan-house {
  border-color: rgba(110, 203, 255, .78);
  background: rgba(22, 135, 255, .06);
  transform: translateZ(38px);
  transform-style: preserve-3d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}
.plan-house::after {
  z-index: 1;
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -32px;
  height: 32px;
  border: 1px solid rgba(81,185,255,.58);
  border-top: 0;
  background: rgba(9, 35, 53, .68);
  transform-origin: top;
  transform: rotateX(-90deg);
}
.plan-house::before { color: var(--blue-bright); text-shadow: 0 0 8px rgba(81,185,255,.35); }
.plan-garage, .plan-door { border-color: rgba(122,202,248,.62); background: rgba(7,18,27,.86); transform: translateZ(2px); }
.plan-road { border-color: rgba(122,202,248,.3); transform: translateZ(2px); }
.plan-fence { border-color: rgba(122,202,248,.42); transform: translateZ(2px); }
.plan-north, .plan-caption { transform: translateZ(4px); }
.finish-model .model-top {
  overflow: visible;
  border-color: rgba(120, 217, 255, .92);
  background-color: #13212c;
  transform: translateZ(28px);
  transform-style: preserve-3d;
  box-shadow: 0 0 13px rgba(81,185,255,.12), inset 0 0 18px rgba(81,185,255,.04);
}
.finish-model .model-top::before,
.finish-model .model-top::after { content: ""; position: absolute; border: 1px solid rgba(81,185,255,.72); background: rgba(7, 38, 57, .82); }
.finish-model .model-top::before { left: -1px; right: -1px; bottom: -27px; height: 26px; border-top: 0; transform-origin: top; transform: rotateX(-90deg); }
.finish-model .model-top::after { top: -1px; right: -27px; bottom: -1px; width: 26px; border-left: 0; transform-origin: left; transform: rotateY(90deg); }
.finish-model.shape-steps .model-steps { transform-style: preserve-3d; }
.finish-model.shape-steps .model-steps span { border-color: rgba(120,217,255,.9); background-color: #13212c; box-shadow: 0 0 0 1px rgba(7,38,57,.8), inset 0 -7px 10px rgba(0,0,0,.14); transform-style: preserve-3d; }
.finish-model.shape-steps .model-steps span:nth-child(1) { transform: translateZ(7px); }
.finish-model.shape-steps .model-steps span:nth-child(2) { transform: translateZ(17px); }
.finish-model.shape-steps .model-steps span:nth-child(3) { transform: translateZ(27px); }
.shape-pool-deck .model-pool { transform: translateZ(3px); border-color: rgba(126,224,255,.94); background: repeating-linear-gradient(135deg, rgba(73,199,238,.75) 0 7px, rgba(29,120,166,.74) 8px 14px); box-shadow: 0 0 18px rgba(47,181,230,.32); }
.finish-broom { --surface: repeating-linear-gradient(90deg, rgba(118,205,245,.22) 0 1px, transparent 1px 7px), #15232d; }
.finish-light-broom { --surface: repeating-linear-gradient(90deg, rgba(118,205,245,.16) 0 1px, transparent 1px 12px), #172630; }
.finish-spray-deck { --surface: radial-gradient(circle, rgba(118,205,245,.34) 0 1px, transparent 1.5px), #172630; --surface-size: 8px 8px; }
.finish-pea-gravel { --surface: radial-gradient(circle at 30% 30%, rgba(185,222,239,.46) 0 2px, transparent 2.5px), radial-gradient(circle at 70% 65%, rgba(91,176,215,.42) 0 2px, transparent 2.5px), #15232d; --surface-size: 12px 12px; }
.finish-stamped { --surface: linear-gradient(90deg, transparent 48%, rgba(118,205,245,.32) 49% 51%, transparent 52%), linear-gradient(0deg, transparent 47%, rgba(118,205,245,.32) 48% 52%, transparent 53%), #15232d; --surface-size: 70px 42px, 70px 42px, auto; }
.finish-flagstone { --surface: linear-gradient(28deg, transparent 47%, rgba(118,205,245,.34) 48% 51%, transparent 52%), linear-gradient(145deg, transparent 46%, rgba(118,205,245,.32) 47% 50%, transparent 51%), #15232d; --surface-size: 102px 75px, 88px 70px, auto; }
.finish-pavers { --surface: linear-gradient(90deg, transparent 48%, rgba(118,205,245,.34) 49% 51%, transparent 52%), linear-gradient(0deg, transparent 47%, rgba(118,205,245,.32) 48% 52%, transparent 53%), #15232d; --surface-size: 50px 30px, 50px 30px, auto; }
.control-joint { background: rgba(126,224,255,.42); box-shadow: none; }
.drain-deck-o, .drain-area-group i, .cad-house-gutter, .cad-downspout, .gutter-route { border-color: rgba(71,214,154,.9); background-color: rgba(10,50,43,.86); box-shadow: 0 0 8px rgba(71,214,154,.2); }

/* Separate raised walking pavers: each unit is 4'-6" across by 2'-0" deep. */
.shape-pavers .model-top { display: none; }
.paver-walk {
  display: none;
  position: absolute;
  z-index: 6;
  grid-template-rows: repeat(5, 1fr);
  gap: 11px;
  transform-style: preserve-3d;
}
.shape-pavers .paver-walk { display: grid; }
.shape-pavers.location-front .paver-walk { left: 69%; width: 18%; top: 32%; height: 54%; }
.shape-pavers.location-back .paver-walk { left: 41%; width: 18%; top: 34%; height: 52%; }
.paver-walk > span {
  position: relative;
  display: block;
  min-height: 18px;
  border: 1px solid rgba(120,217,255,.94);
  background: repeating-linear-gradient(90deg, rgba(118,205,245,.16) 0 1px, transparent 1px 12px), #15232d;
  transform: translateZ(28px);
  transform-style: preserve-3d;
  box-shadow: 0 0 10px rgba(81,185,255,.14);
}
.paver-walk > span::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -10px;
  height: 9px;
  border: 1px solid rgba(81,185,255,.72);
  border-top: 0;
  background: rgba(7,38,57,.88);
  transform-origin: top;
  transform: rotateX(-90deg);
}
.paver-walk .paver-width,
.paver-walk .paver-length {
  display: block;
  position: absolute;
  z-index: 12;
  color: #8ddcff;
  font: 800 7px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .05em;
  white-space: nowrap;
  text-shadow: 0 0 7px rgba(81,185,255,.5);
}
.paver-walk .paver-width { left: 50%; bottom: -16px; transform: translateX(-50%) translateZ(31px); }
.paver-walk .paver-length { right: -38px; top: 50%; transform: translateY(-50%) rotate(90deg) translateZ(31px); }

/* Deck-O-Drain belongs at the joint between the house and the new work. */
.drain-deck-o {
  left: -1px;
  right: -1px;
  top: -7px;
  height: 7px;
  border: 1px solid rgba(71,214,154,.95);
  background: repeating-linear-gradient(90deg, rgba(71,214,154,.92) 0 3px, rgba(8,34,31,.95) 3px 7px);
  transform: translateZ(4px);
}
.drain-deck-o::after {
  content: "DECK-O-DRAIN / HOUSE JOINT";
  position: absolute;
  left: 5px;
  bottom: 10px;
  color: #70efb4;
  font: 800 6px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .06em;
  white-space: nowrap;
}
.finish-model.drainage-deck-o-drain .drain-deck-o { display: block; }

/* Five evenly spaced area drains; the narrow walkway stacks them along its run. */
.drain-area-group {
  left: 7%;
  right: 7%;
  top: 50%;
  align-items: center;
  justify-content: space-between;
  transform: translateY(-50%) translateZ(5px);
}
.finish-model.drainage-area-drain .drain-area-group { display: flex; }
.drain-area-group i {
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(71,214,154,.95);
  background: repeating-linear-gradient(90deg, rgba(71,214,154,.82) 0 2px, rgba(8,34,31,.96) 2px 4px);
}
.shape-walkway .drain-area-group {
  left: 50%;
  right: auto;
  top: 8%;
  bottom: 8%;
  flex-direction: column;
  transform: translateX(-50%) translateZ(5px);
}

/* Gutters and flow arrows appear only when the gutter tie-in option is selected. */
.cad-house-gutter,
.cad-downspout,
.gutter-tie-system { display: none; }
.finish-model.drainage-gutters .cad-house-gutter,
.finish-model.drainage-gutters .cad-downspout,
.finish-model.drainage-gutters .gutter-tie-system { display: block; }
.cad-house-gutter {
  position: absolute;
  z-index: 8;
  left: -2px;
  right: -2px;
  bottom: -5px;
  height: 5px;
  border: 1px solid rgba(71,214,154,.94);
  background: repeating-linear-gradient(90deg, rgba(71,214,154,.76) 0 9px, rgba(8,34,31,.95) 9px 12px);
  transform: translateZ(4px);
}
.cad-downspout {
  position: absolute;
  z-index: 9;
  right: 7%;
  top: 100%;
  width: 5px;
  height: 43px;
  border: 1px solid rgba(71,214,154,.94);
  transform: translateZ(5px);
}
.cad-downspout::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -2px;
  width: 27px;
  height: 5px;
  border: 1px solid rgba(71,214,154,.94);
  background: rgba(10,50,43,.92);
}
.gutter-tie-system {
  position: absolute;
  z-index: 11;
  right: 12%;
  top: 30%;
  width: 22%;
  height: 42%;
  color: #70efb4;
  transform: translateZ(34px);
  transform-style: preserve-3d;
  pointer-events: none;
}
.gutter-route {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  border: 1px dashed rgba(71,214,154,.96);
  background: rgba(10,50,43,.74);
}
.gutter-tie-system .flow-arrow {
  position: absolute;
  left: calc(50% - 5px);
  color: #70efb4;
  font: 900 14px/1 Arial, sans-serif;
  font-style: normal;
  text-shadow: 0 0 8px rgba(71,214,154,.55);
  transform: rotate(90deg);
}
.gutter-tie-system .arrow-one { top: 10%; }
.gutter-tie-system .arrow-two { top: 42%; }
.gutter-tie-system .arrow-three { top: 73%; }
.gutter-tie-system b {
  position: absolute;
  left: calc(50% + 11px);
  bottom: 0;
  font: 800 6px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* A true house wireframe: walls and roof rise from the footprint; the footprint is not a slab. */
.plan-house {
  border: 1px dashed rgba(110,203,255,.34);
  background: transparent;
  transform: translateZ(2px);
  transform-style: preserve-3d;
  box-shadow: none;
}
.plan-house::after {
  content: none;
}
.plan-house::before {
  content: "HOUSE";
  transform: translateZ(4px);
}
.cad-house-wall,
.cad-house-roof,
.cad-house-roof-ridge {
  position: absolute;
  z-index: 3;
  display: block;
  border: 1px solid rgba(110,203,255,.9);
  background: rgba(9,35,53,.1);
  box-shadow: 0 0 8px rgba(81,185,255,.13);
  transform-style: preserve-3d;
}
.cad-house-front {
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  border: 0;
  clip-path: polygon(50% 0, 100% 24%, 100% 100%, 0 100%, 0 24%);
  background: rgba(10,42,61,.25);
  filter: drop-shadow(0 0 1px rgba(126,224,255,.95));
  transform-origin: bottom;
  transform: rotateX(-90deg);
}
.cad-house-back {
  left: 0;
  right: 0;
  top: 0;
  height: 110px;
  border: 0;
  clip-path: polygon(50% 0, 100% 24%, 100% 100%, 0 100%, 0 24%);
  background: rgba(7,30,46,.2);
  filter: drop-shadow(0 0 1px rgba(126,224,255,.82));
  transform-origin: top;
  transform: rotateX(90deg);
}
.cad-house-left {
  left: 0;
  top: 0;
  bottom: 0;
  width: 84px;
  background:
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(110,203,255,.14) 19px 20px),
    rgba(9,35,53,.16);
  transform-origin: left;
  transform: rotateY(-90deg);
}
.cad-house-right {
  right: 0;
  top: 0;
  bottom: 0;
  width: 84px;
  background:
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(110,203,255,.14) 19px 20px),
    rgba(9,35,53,.16);
  transform-origin: right;
  transform: rotateY(90deg);
}
.cad-house-roof {
  z-index: 5;
  top: -3%;
  bottom: -3%;
  width: 52%;
  border-color: rgba(126,224,255,.94);
  background: rgba(81,185,255,.045);
}
.cad-house-roof-left {
  right: 50%;
  transform-origin: right;
  transform: translateZ(110px) rotateY(-8deg);
}
.cad-house-roof-right {
  left: 50%;
  transform-origin: left;
  transform: translateZ(110px) rotateY(8deg);
}
.cad-house-roof-ridge {
  z-index: 7;
  left: 50%;
  top: -4%;
  bottom: -4%;
  width: 2px;
  height: auto;
  border: 0;
  background: rgba(141,220,255,.96);
  transform: translateX(-1px) translateZ(110px);
  box-shadow: 0 0 8px rgba(81,185,255,.38);
}
.plan-house .plan-garage,
.plan-house .plan-door {
  z-index: 6;
  top: auto;
  bottom: 0;
  height: 70px;
  color: #8094a7;
  border-color: rgba(122,202,248,.72);
  background: rgba(7,18,27,.08);
  transform-origin: bottom;
  transform: rotateX(-90deg) translateZ(1px);
  box-shadow: none;
}
.plan-house .plan-door { color: var(--blue-bright); }
.cad-house-gutter { bottom: -2px; transform: translateZ(86px); }
.cad-downspout { top: auto; bottom: 0; height: 84px; transform: rotateX(-90deg) translateZ(5px); transform-origin: bottom; }

/* Three real stair treads with risers and side faces leading toward the entry. */
.finish-model.shape-steps .model-steps {
  position: absolute;
  z-index: 8;
  left: 34%;
  right: 34%;
  top: 29%;
  height: 44%;
  display: block;
  transform-style: preserve-3d;
}
.finish-model.shape-steps .model-steps::after {
  content: "TO ENTRY";
  position: absolute;
  left: 50%;
  top: -13px;
  color: #8ddcff;
  font: 800 6px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
  white-space: nowrap;
  transform: translateX(-50%) translateZ(48px);
}
.finish-model.shape-steps .model-steps span {
  position: absolute;
  display: block;
  height: 31%;
  border: 1px solid rgba(120,217,255,.94);
  border-radius: 1px;
  background: var(--surface);
  background-size: var(--surface-size, auto);
  transform-style: preserve-3d;
  box-shadow: 0 0 9px rgba(81,185,255,.13);
}
.finish-model.shape-steps .model-steps span::before,
.finish-model.shape-steps .model-steps span::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(81,185,255,.78);
  background: rgba(7,38,57,.88);
}
.finish-model.shape-steps .model-steps span::before {
  left: -1px;
  right: -1px;
  bottom: -15px;
  height: 14px;
  border-top: 0;
  transform-origin: top;
  transform: rotateX(-90deg);
}
.finish-model.shape-steps .model-steps span::after {
  top: -1px;
  right: -15px;
  bottom: -1px;
  width: 14px;
  border-left: 0;
  transform-origin: left;
  transform: rotateY(90deg);
}
.finish-model.shape-steps .model-steps span:nth-child(1) {
  left: 0;
  right: 0;
  bottom: 5%;
  transform: translateZ(14px);
}
.finish-model.shape-steps .model-steps span:nth-child(2) {
  left: 8%;
  right: 8%;
  bottom: 35%;
  transform: translateZ(29px);
}
.finish-model.shape-steps .model-steps span:nth-child(3) {
  left: 16%;
  right: 16%;
  bottom: 65%;
  transform: translateZ(44px);
}

/* L-shaped walkway: out from the entry, then down alongside the driveway. */
.walkway-return { display: none; }
.shape-walkway .model-top {
  left: 59%;
  width: 11%;
  top: 29%;
  bottom: 14%;
}
.shape-walkway .walkway-return {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 205%;
  height: 24%;
  display: block;
  border: 1px solid rgba(120,217,255,.92);
  background: var(--surface);
  background-size: var(--surface-size, auto);
  transform: translateZ(1px);
  transform-style: preserve-3d;
  box-shadow: 0 0 10px rgba(81,185,255,.11);
}
.shape-walkway .walkway-return::before,
.shape-walkway .walkway-return::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(81,185,255,.72);
  background: rgba(7,38,57,.82);
}
.shape-walkway .walkway-return::before {
  left: -1px;
  right: -1px;
  bottom: -27px;
  height: 26px;
  border-top: 0;
  transform-origin: top;
  transform: rotateX(-90deg);
}
.shape-walkway .walkway-return::after {
  top: -1px;
  right: -27px;
  bottom: -1px;
  width: 26px;
  border-left: 0;
  transform-origin: left;
  transform: rotateY(90deg);
}

/* All project work stays on one flat 2D plan plane; only the house remains 3D. */
.finish-model .model-top { transform: translateZ(3px); }
.finish-model .model-top::before,
.finish-model .model-top::after,
.shape-walkway .walkway-return::before,
.shape-walkway .walkway-return::after,
.paver-walk > span::before,
.finish-model.shape-steps .model-steps span::before,
.finish-model.shape-steps .model-steps span::after { content: none; display: none; }
.shape-walkway .walkway-return { transform: translateZ(1px); box-shadow: none; }
.paver-walk > span { transform: translateZ(3px); box-shadow: none; }
.paver-walk .paver-width { transform: translateX(-50%) translateZ(4px); }
.paver-walk .paver-length { transform: translateY(-50%) rotate(90deg) translateZ(4px); }
.finish-model.shape-steps .model-steps span:nth-child(1),
.finish-model.shape-steps .model-steps span:nth-child(2),
.finish-model.shape-steps .model-steps span:nth-child(3) { transform: translateZ(3px); }
.finish-model.shape-steps .model-steps::after { transform: translateX(-50%) translateZ(4px); }

/* v12: Restore depth only for the stair option. All other project work stays flat. */
.finish-model.shape-steps .model-steps span::before,
.finish-model.shape-steps .model-steps span::after {
  content: "";
  display: block;
}
.finish-model.shape-steps .model-steps span:nth-child(1) { transform: translateZ(14px); }
.finish-model.shape-steps .model-steps span:nth-child(2) { transform: translateZ(29px); }
.finish-model.shape-steps .model-steps span:nth-child(3) { transform: translateZ(44px); }
.finish-model.shape-steps .model-steps::after { transform: translateX(-50%) translateZ(48px); }

/* The driveway remains one thin surface with a slight fall from the garage to the street. */
.driveway-slope { display: none; }
.shape-driveway .model-top {
  transform-origin: center top;
  transform: translateZ(8px) rotateX(-3.5deg);
}
.shape-driveway .driveway-slope {
  position: absolute;
  z-index: 8;
  left: 51%;
  top: 18%;
  bottom: 18%;
  display: block;
  padding-left: 6px;
  color: #70efb4;
  border-left: 1px dashed rgba(112,239,180,.86);
  font: 800 6px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .06em;
  white-space: nowrap;
}
.shape-driveway .driveway-slope::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -3px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid #70efb4;
}

/* v13: Use a project-scaled number and placement of area drains. */
.shape-patio .drain-area-group { justify-content: space-around; }
.shape-patio .drain-area-group i:nth-child(n+3) { display: none; }

.shape-walkway .drain-area-group {
  top: 50%;
  bottom: auto;
  justify-content: center;
  transform: translate(-50%, -50%) translateZ(5px);
}
.shape-walkway .drain-area-group i:nth-child(n+2) { display: none; }

.finish-model.shape-pool-deck .drain-area-group {
  inset: 0;
  transform: translateZ(5px);
}
.finish-model.shape-pool-deck.drainage-area-drain .drain-area-group { display: block; }
.shape-pool-deck .drain-area-group i { position: absolute; }
.shape-pool-deck .drain-area-group i:nth-child(1) { left: 7%; top: 8%; }
.shape-pool-deck .drain-area-group i:nth-child(2) { right: 7%; top: 8%; }
.shape-pool-deck .drain-area-group i:nth-child(3) { left: 7%; bottom: 8%; }
.shape-pool-deck .drain-area-group i:nth-child(4) { right: 7%; bottom: 8%; }
.shape-pool-deck .drain-area-group i:nth-child(5) { display: none; }

.render-controls { position: relative; z-index: 4; display: flex; justify-content: center; gap: 7px; }
.render-controls button { min-width: 42px; height: 39px; padding: 0 12px; color: #dce4ee; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(255,255,255,.035); cursor: pointer; font-weight: 800; }
.render-controls button:hover, .render-controls button:focus-visible { color: white; border-color: var(--blue-bright); background: rgba(22,135,255,.11); }
.drag-note { position: relative; z-index: 3; margin: 10px 0 18px; color: #718094; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.finish-quote-link { position: relative; z-index: 3; }

.photo-grid { display: grid; grid-template-columns: 1.25fr 0.75fr 0.75fr; gap: 14px; }
.photo-slot { min-height: 270px; position: relative; display: flex; align-items: end; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, #6f7781, #303844); }
.photo-slot:first-child { min-height: 420px; }
.photo-slot::before { content: ""; position: absolute; inset: 0; opacity: 0.45; background-image: linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.12) 47% 48%, transparent 49%), radial-gradient(circle at 20% 15%, rgba(255,255,255,.16), transparent 35%); }
.photo-slot span { position: relative; z-index: 2; padding: 8px 10px; color: white; border-radius: 8px; background: rgba(7, 10, 15, 0.78); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.photo-note { margin-top: 14px; color: #8290a2; font-size: 12px; }
.project-photo-feature { position: relative; overflow: hidden; margin: 32px 0 0; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.project-photo-feature img { width: 100%; height: clamp(360px, 56vw, 720px); display: block; object-fit: cover; object-position: center; }
.project-photo-feature figcaption { position: absolute; left: 22px; bottom: 20px; padding: 10px 13px; color: white; border-radius: 9px; background: rgba(20, 24, 29, 0.82); font-size: 11px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.project-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 32px; }
.project-photo-card { min-height: 270px; position: relative; overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 18px; background: #4a4f55; box-shadow: var(--shadow); }
.project-photo-card:first-child { min-height: 500px; grid-column: 1 / -1; }
.project-photo-card img { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; object-position: center; }
.project-photo-card figcaption { position: absolute; z-index: 2; left: 16px; bottom: 15px; max-width: calc(100% - 32px); padding: 9px 11px; color: #fff; border-radius: 8px; background: rgba(20,24,29,.8); font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }

.faq-list { display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--line); border-radius: 15px; background: rgba(16, 24, 35, 0.72); }
.faq-list summary { padding: 19px 22px; cursor: pointer; font-weight: 800; }
.faq-list details p { padding: 0 22px 20px; margin: 0; font-size: 14px; }

.quote-layout { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 50px; align-items: start; }
.quote-layout-single { grid-template-columns: minmax(0, 900px); justify-content: center; }
.quote-copy { position: sticky; top: 112px; }
.quote-copy ul { display: grid; gap: 12px; padding: 0; list-style: none; }
.quote-copy li { position: relative; padding-left: 24px; color: #c2ccd8; }
.quote-copy li::before { content: "✓"; position: absolute; left: 0; color: var(--green); }
.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; padding: clamp(25px, 4vw, 40px); border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); }
.field { display: grid; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label { color: #dce4ee; font-size: 12px; font-weight: 800; }
.field input, .field select, .field textarea { width: 100%; color: white; border: 1px solid var(--line-strong); border-radius: 10px; outline: 0; background: #0a1017; padding: 12px 13px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(22, 135, 255, 0.12); }
.field textarea { min-height: 120px; resize: vertical; }
.form-note { grid-column: 1 / -1; margin: 0; color: #8190a2; font-size: 11px; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form-status { margin: 0; color: var(--green); font-size: 12px; }
.quote-result { display: none; grid-column: 1 / -1; padding: 20px; border: 1px solid rgba(71, 214, 154, 0.3); border-radius: 13px; background: rgba(71, 214, 154, 0.06); }
.quote-result.is-visible { display: block; }
.quote-result h3 { margin-bottom: 8px; }
.quote-result pre { overflow: auto; white-space: pre-wrap; color: #cdd7e2; font: 12px/1.6 ui-monospace, Consolas, monospace; }

.cta-band { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 35px; padding: 42px; border: 1px solid rgba(81, 185, 255, 0.34); border-radius: 24px; background: linear-gradient(120deg, rgba(22, 135, 255, 0.16), rgba(17, 25, 37, 0.9)); }
.cta-band h2 { margin-bottom: 8px; font-size: clamp(2rem, 4vw, 3.4rem); }
.cta-band p { margin-bottom: 0; }

.site-footer { padding: 48px 0 28px; border-top: 1px solid var(--line); background: #06080c; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr; gap: 40px; }
.footer-brand { max-width: 400px; }
.footer-brand .brand { margin-bottom: 18px; }
.footer-links { display: grid; align-content: start; gap: 8px; }
.footer-links strong { margin-bottom: 7px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-links a, .footer-links span { color: var(--muted); font-size: 13px; }
.footer-links a:hover { color: var(--blue-bright); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: #738093; font-size: 11px; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s, transform 0.55s; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .primary-nav { position: absolute; top: 80px; left: 20px; right: 20px; display: none; align-items: stretch; gap: 0; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: #0b1119; box-shadow: var(--shadow); }
  .primary-nav.is-open { display: grid; }
  .primary-nav a { padding: 12px; }
  .primary-nav .nav-cta { margin-top: 4px; text-align: center; }
  .hero-grid, .page-hero-grid, .focus-panel, .quote-layout { grid-template-columns: 1fr; }
  .finish-builder { grid-template-columns: 1fr; }
  .finish-controls { border-right: 0; border-bottom: 1px solid var(--line); }
  .finish-render-panel { min-height: 620px; }
  .launch-visual { min-height: 410px; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-item:nth-child(2) { border-right: 0; }
  .proof-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .photo-slot:first-child { grid-column: 1 / -1; }
  .project-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-photo-card:first-child { grid-column: 1 / -1; }
  .quote-copy { position: static; }
}

@media (max-width: 640px) {
  :root { --shell: min(100% - 28px, 1120px); }
  .section { padding: 68px 0; }
  .brand { min-width: 0; }
  .brand-mark { flex-basis: 120px; width: 120px; height: 66px; }
  .brand-mark img { top: -7px; width: 120px; }
  .brand-copy strong { font-size: 12px; }
  .hero { padding: 62px 0 58px; }
  h1 { font-size: clamp(2.8rem, 16vw, 4.7rem); }
  .section-heading { grid-template-columns: 1fr; gap: 10px; }
  .launch-visual { min-height: 340px; }
  .proof-grid, .card-grid, .steps, .photo-grid, .quote-form, .footer-grid { grid-template-columns: 1fr; }
  .proof-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .proof-item:last-child { border-bottom: 0; }
  .photo-slot:first-child { grid-column: auto; min-height: 300px; }
  .photo-slot { min-height: 240px; }
  .concrete-photo img { min-height: 340px; }
  .project-carousel { min-height: 340px; }
  .project-slide figcaption { left: 14px; bottom: 58px; max-width: calc(100% - 28px); }
  .carousel-arrow { width: 40px; height: 40px; }
  .carousel-prev { left: 12px; }
  .carousel-next { right: 12px; }
  .project-photo-feature img { height: 320px; }
  .project-photo-grid { grid-template-columns: 1fr; }
  .project-photo-card, .project-photo-card:first-child { min-height: 300px; grid-column: auto; }
  .field-full, .form-note, .form-actions, .quote-result { grid-column: auto; }
  .service-list { grid-template-columns: 1fr; }
  .finish-choice-grid { grid-template-columns: 1fr; }
  .drainage-choice-grid { grid-template-columns: 1fr; }
  .finish-render-panel { min-height: 530px; padding-inline: 12px; }
  .finish-stage { height: 350px; }
  .finish-model { width: 79%; height: 205px; }
  .shape-walkway { width: 43%; height: 255px; }
  .shape-patio { width: 81%; height: 200px; }
  .shape-steps { width: 76%; height: 225px; }
  .shape-pool-deck { width: 91%; height: 225px; }
  .shape-pavers { width: 74%; height: 205px; }
  .finish-model { width: 80%; height: 260px; }
  .render-controls button { min-width: 38px; padding-inline: 9px; }
  .finish-quote-link { width: 100%; }
  .cta-band { grid-template-columns: 1fr; padding: 28px; }
  .cta-band .button { width: 100%; }
  .footer-bottom { display: grid; }
}

/*
  ALTERNATE CONCRETE LOGO WEBSITE
  Warm ivory, graphite, and pencil-gray palette drawn from the supplied logo.
  Electric blue and drainage green are intentionally preserved only inside
  the interactive concrete project customizer.
*/
:root {
  color-scheme: light;
  --ink: #f4f0e8;
  --ink-soft: #ebe5da;
  --panel: #fffdf8;
  --panel-light: #f1ece3;
  --line: rgba(43, 41, 37, 0.14);
  --line-strong: rgba(43, 41, 37, 0.28);
  --text: #23221f;
  --muted: #6d685f;
  --blue: #302e2a;
  --blue-bright: #4b4842;
  --blue-deep: #171613;
  --green: #777168;
  --concrete: #aaa59d;
  --warm: #d9cdbc;
  --burgundy: #742b3d;
  --burgundy-deep: #4d1826;
  --burgundy-rose: #ad596f;
  --burgundy-soft: #ead9dd;
  --shadow: 0 24px 65px rgba(54, 48, 40, 0.13);
}

body {
  color: var(--text);
  background:
    linear-gradient(rgba(54, 51, 46, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 51, 46, 0.026) 1px, transparent 1px),
    linear-gradient(rgba(116, 43, 61, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 43, 61, 0.034) 1px, transparent 1px),
    radial-gradient(circle at 86% 3%, rgba(71, 66, 59, 0.08), transparent 27rem),
    #f4f0e8;
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px, auto, auto;
}
body::before {
  content: none;
}
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -0.055em; }
h3 { color: #292722; }
p { color: var(--muted); }
.muted-section { background: rgba(232, 226, 216, 0.68); }
.eyebrow, .kicker { color: var(--burgundy); }
.eyebrow::before { background: linear-gradient(90deg, var(--burgundy-deep), var(--burgundy-rose), transparent); box-shadow: none; }

.site-header { background: rgba(249, 245, 236, 0.94); }
.brand-mark { background: transparent; }
.brand-mark img { filter: drop-shadow(0 6px 12px rgba(48, 40, 36, 0.08)); mix-blend-mode: normal; }
.primary-nav a { color: #494641; }
.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="page"] { color: var(--burgundy); }
.primary-nav .nav-cta { color: #fffaf3; border-color: var(--burgundy-deep); background: linear-gradient(115deg, var(--burgundy-deep), var(--burgundy), var(--burgundy-rose)); }
.menu-toggle { color: #24231f; background: #fffdf8; }

.button-primary { color: #fffdf8; background: linear-gradient(120deg, var(--burgundy-deep), var(--burgundy) 52%, var(--burgundy-rose)); box-shadow: 0 13px 34px rgba(91, 31, 47, 0.2); }
.button-secondary { color: #3a1d25; background: linear-gradient(120deg, var(--burgundy-soft), #f4ebe8 54%, #eee6d9); box-shadow: 0 13px 34px rgba(79, 68, 54, 0.12); }
.button-ghost { color: #302e2a; background: rgba(255, 253, 248, 0.54); }
.hero-copy h1 em, .page-hero h1 em {
  color: var(--burgundy);
  background: linear-gradient(105deg, var(--burgundy-deep), var(--burgundy) 50%, var(--burgundy-rose));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.trust-row { color: #5f5a52; }
.trust-row li::before { color: #fff8ef; background: linear-gradient(135deg, var(--burgundy-deep), var(--burgundy-rose)); }

.launch-visual {
  border-color: rgba(116, 43, 61, 0.18);
  background:
    radial-gradient(circle at 82% 16%, rgba(173, 89, 111, 0.12), transparent 37%),
    linear-gradient(145deg, #fffdf8, #f3ece4 58%, #ead9dd);
}
.launch-visual::before {
  background-image:
    linear-gradient(rgba(55, 52, 47, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 52, 47, 0.07) 1px, transparent 1px);
}
.launch-visual::after { box-shadow: inset 0 0 0 16px rgba(255,255,255,.18), 0 0 35px rgba(67,62,55,.12); }
.launch-visual img.logo-artwork { filter: contrast(1.03) drop-shadow(0 18px 24px rgba(49, 42, 38, 0.11)); mix-blend-mode: normal; }
.home-brand-visual::before {
  opacity: 0.82;
  background-image:
    linear-gradient(rgba(54, 51, 46, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 51, 46, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(116, 43, 61, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 43, 61, 0.11) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
  mask-image: radial-gradient(ellipse at center, #000 28%, rgba(0,0,0,.78) 67%, transparent 96%);
}
.hero-cad-lines {
  position: absolute;
  z-index: 1;
  inset: 4% 3% 2%;
  width: 94%;
  height: 94%;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.hero-cad-lines path,
.hero-cad-lines circle { fill: none; vector-effect: non-scaling-stroke; }
.hero-cad-lines .cad-property-line { stroke: rgba(46, 43, 39, 0.25); stroke-width: 1.35; stroke-dasharray: 9 6; }
.hero-cad-lines .cad-construction-line { stroke: rgba(116, 43, 61, 0.34); stroke-width: 1; }
.hero-cad-lines .cad-dimensions { fill: rgba(77, 24, 38, 0.58); font: 700 11px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.09em; }
.home-brand-visual img.logo-artwork { z-index: 2; }
.visual-label { color: #716b62; }
.visual-label b { color: var(--burgundy); background: linear-gradient(90deg, var(--burgundy-deep), var(--burgundy-rose)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.visual-card { color: #24221f; border-color: rgba(47, 44, 39, 0.17); background: rgba(255, 253, 248, 0.92); }

.proof-strip { background: #e9e3d9; }
.proof-item strong { color: #272520; }
.card { background: linear-gradient(145deg, rgba(255,253,248,.98), rgba(238,232,222,.98)); }
.card::before { width: 48px; background: linear-gradient(90deg, var(--burgundy-deep), var(--burgundy-rose), transparent); box-shadow: none; }
.card-link { color: var(--burgundy); }
.featured-card { border-color: rgba(54, 50, 44, 0.32); background: linear-gradient(145deg, #e8dfd1, #fffdf8); }
.featured-card::after { color: var(--burgundy); }
.home-service-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 18px;
}
.home-services-heading { grid-template-columns: 1fr; }
.single-column-heading { grid-template-columns: minmax(0, 820px); gap: 18px; }
.single-column-heading > p { max-width: 820px; }
.single-column-heading .eyebrow { margin-bottom: 0; }
.services-hero-single { display: block; }
.services-hero-single > div { max-width: 940px; }
.services-hero-guidance { max-width: 940px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 42px; align-items: center; margin-top: 40px; padding-left: 24px; border-left: 2px solid var(--burgundy); }
.services-hero-guidance .kicker { margin-bottom: 10px; color: var(--burgundy); }
.services-hero-guidance h2 { margin-bottom: 13px; font-size: clamp(1.9rem, 3.4vw, 3rem); text-transform: none; }
.services-hero-guidance > div > p:last-child { max-width: 680px; margin-bottom: 0; font-size: 16px; }
.services-property-estimate { white-space: nowrap; }
.concrete-services-overview {
  padding-top: 74px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 88% 13%, rgba(173, 89, 111, 0.11), transparent 25rem),
    linear-gradient(180deg, rgba(255,253,248,.58), rgba(244,240,232,.18));
}
.concrete-services-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 30px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(116, 43, 61, 0.2);
}
.concrete-services-title .eyebrow { margin-bottom: 8px; }
.concrete-services-title h1 { margin: 0; font-size: clamp(3.4rem, 7vw, 6.7rem); }
.concrete-plan-code {
  padding-bottom: 9px;
  color: var(--burgundy);
  font: 800 10px/1 ui-monospace, Consolas, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.concrete-service-path {
  position: relative;
  min-height: 700px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, 280px);
  row-gap: 60px;
  padding: 60px 0 20px;
  overflow: hidden;
  border-block: 1px solid rgba(47, 44, 39, 0.18);
  background:
    linear-gradient(90deg, rgba(116,43,61,.025) 1px, transparent 1px),
    linear-gradient(rgba(116,43,61,.025) 1px, transparent 1px);
  background-size: 24px 24px;
}
.service-path-svg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 700px;
  overflow: visible;
  pointer-events: none;
}
.service-path-svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.service-path-base { stroke: rgba(46, 43, 39, 0.12); stroke-width: 12; }
.service-path-route { stroke: url(#service-route-gradient); stroke-width: 3; }
.service-path-item {
  position: relative;
  z-index: 1;
  padding: 0 22px;
  text-align: center;
}
.service-path-item:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.service-path-item:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.service-path-item:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.service-path-item:nth-of-type(4) { grid-column: 4; grid-row: 1; }
.service-path-item:nth-of-type(5) { grid-column: 4; grid-row: 2; }
.service-path-item:nth-of-type(6) { grid-column: 3; grid-row: 2; }
.service-path-item:nth-of-type(7) { grid-column: 2; grid-row: 2; }
.service-path-item:nth-of-type(8) { grid-column: 1; grid-row: 2; }
.service-path-node {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  color: var(--burgundy-deep);
  border: 2px solid var(--burgundy);
  border-radius: 50%;
  background: #fffdf8;
  box-shadow: 0 0 0 8px rgba(255,253,248,.82), 0 10px 26px rgba(77,24,38,.13);
  font: 850 11px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
  transition: transform .2s ease, color .2s ease, background .2s ease;
}
.service-path-item:first-of-type .service-path-node,
.service-path-item:last-of-type .service-path-node { color: #fffaf3; background: linear-gradient(135deg, var(--burgundy-deep), var(--burgundy-rose)); }
.service-path-item:hover .service-path-node { color: #fffaf3; background: var(--burgundy); transform: scale(1.08); }
.service-path-copy { max-width: 250px; margin: 20px auto 0; }
.service-path-copy > span {
  width: fit-content;
  display: block;
  margin: 0 auto 12px;
  padding: 0 0 7px;
  color: var(--lapis-deep);
  border-bottom: 2px solid var(--lapis-soft);
  font: 900 10px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.service-path-copy h2 {
  margin: 0 0 10px;
  color: #27241f;
  font-size: clamp(1.45rem, 2.3vw, 2.15rem);
  letter-spacing: -.035em;
  line-height: 1;
  text-transform: none;
}
.service-path-copy p { margin: 0; color: #625d56; font-size: 12px; line-height: 1.55; }
.home-service-grid .card {
  display: flex;
  min-height: 172px;
  flex-direction: column;
}
.home-service-grid .card-link { margin-top: auto; padding-top: 20px; }
.home-service-grid .card:first-child {
  grid-column: span 6;
  grid-row: span 2;
  min-height: 362px;
  justify-content: center;
  padding: clamp(38px, 5vw, 62px);
  background:
    linear-gradient(90deg, rgba(116,43,61,.08) 1px, transparent 1px),
    linear-gradient(rgba(116,43,61,.08) 1px, transparent 1px),
    linear-gradient(145deg, #e8dfd1, #fffdf8);
  background-size: 32px 32px, 32px 32px, auto;
}
.home-service-grid .card:first-child h3 { max-width: 8ch; font-size: clamp(2rem, 4vw, 3.45rem); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.home-service-grid .card:nth-child(n+2):nth-child(-n+5) { grid-column: span 3; }
.home-service-grid .card:last-child {
  grid-column: span 12;
  min-height: 128px;
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(280px, 1.55fr) auto;
  gap: 28px;
  align-items: center;
}
.home-service-grid .card:last-child h3,
.home-service-grid .card:last-child p,
.home-service-grid .card:last-child .card-link { margin: 0; padding: 0; }

.focus-panel { background: #fffdf8; }
.service-list li { color: #4e4a44; }
.service-list li::before { width: 11px; background: linear-gradient(90deg, var(--burgundy-deep), var(--burgundy-rose), transparent); }
.step::before { color: var(--burgundy); background: linear-gradient(135deg, var(--burgundy-deep), var(--burgundy-rose)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.page-hero { background: radial-gradient(circle at 82% 20%, rgba(173, 89, 111, 0.1), transparent 25rem); }
.service-chips span { color: #514d47; background: rgba(255, 253, 248, 0.5); }
.estimate-card { border-color: rgba(116, 43, 61, 0.22); background: linear-gradient(145deg, #fffdf8, #e9e2d7); }

.photo-slot { background: linear-gradient(145deg, #b8b1a7, #746f68); }
.photo-slot span { background: rgba(38, 36, 32, 0.8); }
.faq-list details { background: rgba(255, 253, 248, 0.76); }
.cta-band { border-color: rgba(116, 43, 61, 0.24); background: linear-gradient(120deg, var(--burgundy-soft), #fffdf8 54%); }

.quote-form { background: #fffdf8; }
.quote-copy li { color: #4e4a44; }
.field label { color: #36332f; }
.field input, .field select, .field textarea { color: #24221f; border-color: rgba(43,41,37,.25); background: #f8f4ec; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--burgundy); box-shadow: 0 0 0 3px rgba(116,43,61,.1); }
.quote-result { border-color: rgba(63, 58, 51, 0.25); background: rgba(228, 219, 205, 0.55); }
.quote-result pre { color: #403c36; }
.form-note, .photo-note { color: #746e64; }

.site-footer { background: linear-gradient(120deg, #e7e0d5, #eee7df 64%, #ead9dd); }
.footer-links a, .footer-links span { color: #686259; }
.footer-links a:hover { color: var(--burgundy); }
.footer-bottom { color: #716b62; }
.faq-heading { grid-template-columns: 1fr; }

.concrete-cta {
  color: #fffaf3;
  border-color: rgba(116, 43, 61, 0.72);
  background: linear-gradient(125deg, #191817, var(--burgundy-deep) 62%, #6b293a);
  box-shadow: 0 24px 58px rgba(50, 20, 28, 0.2);
}
.concrete-cta h2 { color: #fffaf3; }
.concrete-cta p { color: #d9cfc5; }
.concrete-cta .kicker { color: #e7aebc; }
.concrete-cta .button-secondary {
  color: var(--burgundy-deep);
  border-color: rgba(255, 250, 243, 0.72);
  background: #fffaf3;
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.2);
}
.concrete-cta-copy-only { grid-template-columns: 1fr; }
.concrete-cta-copy-only > div { max-width: 780px; }
.home-faq-section { scroll-margin-top: 96px; }

/* Keep the technical visualizer dark with its original electric-blue and green drafting language. */
.finish-visualizer { background: radial-gradient(circle at 83% 38%, rgba(65, 60, 53, 0.05), transparent 28rem); }
.finish-builder {
  --ink: #070a0f;
  --ink-soft: #0c1118;
  --panel: #111925;
  --panel-light: #172231;
  --line: rgba(185, 202, 225, 0.16);
  --line-strong: rgba(185, 202, 225, 0.3);
  --text: #f5f8fc;
  --muted: #aab5c4;
  --blue: #1687ff;
  --blue-bright: #59b9ff;
  --blue-deep: #0758d9;
  --green: #47d69a;
  color: var(--text);
  border-color: var(--line);
  background: #0c121a;
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.3);
}
.finish-builder h3 { color: #f5f8fc; }
.finish-builder p { color: var(--muted); }
.finish-builder .kicker { color: var(--green); }
.finish-builder .button-primary { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); box-shadow: 0 13px 34px rgba(22,135,255,.26); }
.finish-builder .button-secondary { color: #07130e; background: linear-gradient(135deg, var(--green), #79e8b8); box-shadow: 0 13px 34px rgba(71,214,154,.2); }

@media (max-width: 900px) {
  .primary-nav { background: #fbf8f1; }
  .services-hero-guidance { grid-template-columns: 1fr; gap: 24px; }
  .services-property-estimate { width: fit-content; }
  .concrete-service-path {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 0;
    padding: 20px 0;
  }
  .concrete-service-path::before {
    content: "";
    position: absolute;
    top: 48px;
    bottom: 48px;
    left: 49px;
    width: 3px;
    background: linear-gradient(var(--burgundy-deep), var(--burgundy), var(--burgundy-rose));
  }
  .service-path-svg { display: none; }
  .service-path-item,
  .service-path-item:nth-of-type(n) {
    grid-column: 1;
    grid-row: auto;
    min-height: 156px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 24px 20px;
    text-align: left;
  }
  .service-path-node { width: 56px; height: 56px; margin: 0; }
  .service-path-copy { max-width: 620px; margin: 2px 0 0; }
  .service-path-copy p { font-size: 13px; }
  .home-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-service-grid .card:first-child { grid-column: span 2; grid-row: auto; min-height: 280px; }
  .home-service-grid .card:nth-child(n+2):nth-child(-n+5) { grid-column: span 1; }
  .home-service-grid .card:last-child { grid-column: span 2; grid-template-columns: 1fr 1.5fr; }
  .home-service-grid .card:last-child .card-link { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .concrete-services-overview { padding-top: 52px; }
  .concrete-services-title { display: block; }
  .concrete-plan-code { display: block; margin-top: 13px; }
  .concrete-service-path::before { left: 39px; }
  .service-path-item,
  .service-path-item:nth-of-type(n) { grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding-inline: 16px; }
  .service-path-node { width: 44px; height: 44px; box-shadow: 0 0 0 6px rgba(255,253,248,.86); }
  .hero-cad-lines { inset: 7% 1% 1%; width: 98%; height: 91%; }
  .hero-cad-lines .cad-dimensions { font-size: 9px; }
  .home-service-grid { grid-template-columns: 1fr; }
  .home-service-grid .card:first-child,
  .home-service-grid .card:nth-child(n+2):nth-child(-n+5),
  .home-service-grid .card:last-child { grid-column: span 1; min-height: 0; }
  .home-service-grid .card:first-child { min-height: 260px; }
  .home-service-grid .card:last-child { display: flex; align-items: flex-start; }
}

/*
  ROMAN LAPIS COLOR PREVIEW
  Burgundy remains the action color. Lapis is the architectural third color
  used for drafting structure, navigation cues, numbering, and fine details.
*/
:root {
  --lapis: #285377;
  --lapis-deep: #17364f;
  --lapis-bright: #5f87a3;
  --lapis-soft: #a9c1d2;
  --lapis-pale: #dce7ed;
}

body {
  background:
    linear-gradient(rgba(54, 51, 46, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 51, 46, 0.026) 1px, transparent 1px),
    linear-gradient(rgba(40, 83, 119, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 83, 119, 0.052) 1px, transparent 1px),
    radial-gradient(circle at 86% 3%, rgba(40, 83, 119, 0.11), transparent 27rem),
    #f4f0e8;
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px, auto, auto;
}

.site-header { border-bottom-color: rgba(40, 83, 119, 0.22); }
.eyebrow { color: var(--lapis); }
.eyebrow::before { background: linear-gradient(90deg, var(--lapis-deep), var(--lapis-bright), transparent); }
.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="page"] { color: var(--lapis); }
.button-secondary { color: var(--lapis-deep); background: linear-gradient(120deg, var(--lapis-soft), #edf3f6 58%, #eee6d9); }
.trust-row li::before { background: linear-gradient(135deg, var(--lapis-deep), var(--lapis-bright)); }
.hero-copy .trust-row { gap: 14px; flex-wrap: wrap; color: var(--lapis); font-size: 10px; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.hero-copy .trust-row li { display: block; color: var(--lapis); }
.hero-copy .trust-row li::before { content: none; display: none; }

.launch-visual {
  border-color: rgba(40, 83, 119, 0.26);
  background:
    radial-gradient(circle at 82% 16%, rgba(40, 83, 119, 0.16), transparent 38%),
    radial-gradient(circle at 17% 82%, rgba(116, 43, 61, 0.08), transparent 34%),
    linear-gradient(145deg, #fffdf8, #edf2f4 58%, var(--lapis-pale));
}
.home-brand-visual::before {
  background-image:
    linear-gradient(rgba(54, 51, 46, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 51, 46, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(40, 83, 119, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 83, 119, 0.16) 1px, transparent 1px);
}
.hero-cad-lines .cad-construction-line { stroke: rgba(40, 83, 119, 0.48); }
.hero-cad-lines .cad-dimensions { fill: rgba(23, 54, 79, 0.72); }
.visual-label b { background: linear-gradient(90deg, var(--lapis-deep), var(--lapis-bright)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.card::before { background: linear-gradient(90deg, var(--lapis-deep), var(--lapis-bright) 62%, var(--burgundy-rose)); }
.card-link { color: var(--lapis); }
.featured-card { border-color: rgba(40, 83, 119, 0.34); background: linear-gradient(145deg, var(--lapis-pale), #fffdf8 68%); }
.featured-card::after { color: var(--lapis); }
.home-service-grid .card:first-child {
  background:
    linear-gradient(90deg, rgba(40,83,119,.085) 1px, transparent 1px),
    linear-gradient(rgba(40,83,119,.085) 1px, transparent 1px),
    linear-gradient(145deg, var(--lapis-pale), #fffdf8 72%);
  background-size: 32px 32px, 32px 32px, auto;
}
.services-hero-guidance { border-left-color: var(--lapis); }
.services-hero-guidance .kicker { color: var(--lapis); }

.concrete-services-overview {
  background:
    radial-gradient(circle at 88% 13%, rgba(40, 83, 119, 0.14), transparent 25rem),
    linear-gradient(180deg, rgba(255,253,248,.58), rgba(220,231,237,.24));
}
.concrete-services-title { border-bottom-color: rgba(40, 83, 119, 0.28); }
.concrete-plan-code { color: var(--lapis); }
.service-path-base { stroke: rgba(40, 83, 119, 0.14); }
.service-path-node { color: var(--lapis-deep); border-color: var(--lapis); }
.service-path-item:first-of-type .service-path-node { background: linear-gradient(135deg, var(--burgundy-deep), var(--burgundy-rose)); }
.service-path-item:last-of-type .service-path-node { background: linear-gradient(135deg, var(--lapis-deep), var(--lapis-bright)); }
.service-path-item:hover .service-path-node { background: var(--lapis); }

.service-list li::before { background: linear-gradient(90deg, var(--lapis-deep), var(--lapis-bright), transparent); }
.step::before { background: linear-gradient(135deg, var(--lapis-deep), var(--lapis-bright) 64%, var(--burgundy)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.page-hero { background: radial-gradient(circle at 82% 20%, rgba(40, 83, 119, 0.12), transparent 25rem); }
.estimate-card { border-color: rgba(40, 83, 119, 0.28); background: linear-gradient(145deg, #fffdf8, var(--lapis-pale)); }
.faq-list details { border-left: 3px solid rgba(40, 83, 119, 0.48); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--lapis); box-shadow: 0 0 0 3px rgba(40,83,119,.12); }
.site-footer { background: linear-gradient(120deg, #e7e0d5, #eef2f3 60%, var(--lapis-pale)); }
.footer-links a:hover { color: var(--lapis); }

/* Preserve the concrete customizer's intentionally brighter blue/green system. */
.finish-builder .button-secondary { color: #07130e; background: linear-gradient(135deg, #47d69a, #79e8b8); box-shadow: 0 13px 34px rgba(71,214,154,.2); }

@media (max-width: 900px) {
  .concrete-service-path::before { background: linear-gradient(var(--lapis-deep), var(--lapis), var(--lapis-bright)); }
}

/* Simplified homepage service navigation. */
.service-gateway {
  background:
    linear-gradient(90deg, rgba(40,83,119,.05) 1px, transparent 1px),
    linear-gradient(rgba(40,83,119,.05) 1px, transparent 1px),
    linear-gradient(120deg, #e9e3d9, #edf2f4 62%, var(--lapis-pale));
  background-size: 32px 32px, 32px 32px, auto;
}
.gateway-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-block: 22px;
}
.gateway-item {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding: 36px clamp(28px, 4vw, 54px);
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.96), rgba(248,250,251,.92)) padding-box,
    linear-gradient(110deg, var(--lapis-deep), #69bce2, #d7f3ff, var(--lapis-bright), var(--lapis-deep)) border-box;
  background-size: 100% 100%, 260% 100%;
  box-shadow: 0 12px 30px rgba(22,47,68,.1), 0 0 24px rgba(105,188,226,.08);
  animation: gateway-border-current 8s linear infinite;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.gateway-item + .gateway-item { border-left-width: 2px; }
.gateway-item > div { max-width: 390px; }
.gateway-item strong {
  display: block;
  width: fit-content;
  margin-bottom: 18px;
  color: var(--lapis-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.25vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .95;
}
.gateway-item strong::after {
  content: "";
  width: 68%;
  height: 3px;
  display: block;
  margin-top: 13px;
  background: linear-gradient(90deg, var(--lapis-deep), var(--lapis-bright), transparent);
}
.gateway-item:nth-child(2) strong { color: var(--burgundy-deep); }
.gateway-item:nth-child(2) strong::after { background: linear-gradient(90deg, var(--burgundy-deep), var(--burgundy-rose), transparent); }
.gateway-item:nth-child(3) strong::after { background: linear-gradient(90deg, var(--lapis-deep), var(--lapis-bright), var(--burgundy-rose), transparent); }
.gateway-item span { color: #68645d; font-size: 13px; line-height: 1.6; }
.gateway-item .button { width: 100%; flex: 0 0 auto; }

@keyframes gateway-border-current {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, 260% 0; }
}

.gateway-item:focus-within {
  transform: translateY(-5px);
  filter: saturate(1.12) brightness(1.035);
  box-shadow: 0 18px 38px rgba(27,78,112,.18), 0 0 30px rgba(105,188,226,.24);
  animation-duration: 5s;
}

@media (hover: hover) {
  .gateway-item:hover {
    transform: translateY(-5px);
    filter: saturate(1.12) brightness(1.035);
    box-shadow: 0 18px 38px rgba(27,78,112,.18), 0 0 30px rgba(105,188,226,.24);
    animation-duration: 5s;
  }
}

.home-service-index { border-top: 1px solid rgba(40,83,119,.22); }
.service-index-row {
  min-height: 104px;
  display: grid;
  grid-template-columns: 48px minmax(190px, .8fr) minmax(300px, 1.35fr) 36px;
  gap: 22px;
  align-items: center;
  padding: 18px 14px;
  color: #292722;
  border-bottom: 1px solid rgba(40,83,119,.22);
  transition: color .2s ease, background .2s ease;
}
.service-index-row:hover,
.service-index-row:focus-visible { color: var(--lapis-deep); background: rgba(40,83,119,.065); }
.service-index-number {
  color: var(--lapis);
  font: 850 10px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .12em;
}
.service-index-row strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 500;
  letter-spacing: -.025em;
}
.service-index-row > span:nth-of-type(2) { color: #6a665f; font-size: 13px; line-height: 1.55; }
.service-index-row b {
  color: var(--lapis);
  font-size: 23px;
  font-weight: 500;
  transition: transform .2s ease;
}
.service-index-row:hover b,
.service-index-row:focus-visible b { transform: translateX(6px); }

@media (max-width: 900px) {
  .gateway-grid { grid-template-columns: 1fr; }
  .gateway-item + .gateway-item { border-left-width: 2px; border-top-width: 2px; }
  .service-path-copy > span { margin-inline: 0; }
  .service-index-row {
    grid-template-columns: 40px minmax(0, 1fr) 30px;
    gap: 10px 18px;
  }
  .service-index-row > span:nth-of-type(2) { grid-column: 2; }
  .service-index-row b { grid-column: 3; grid-row: 1 / 3; }
}

@media (max-width: 640px) {
  .gateway-item { min-height: 0; flex-direction: column; align-items: flex-start; padding: 30px 20px; }
  .gateway-item .button { width: 100%; }
  .service-index-row { min-height: 118px; padding-inline: 4px; }
}

/* About introduction: full-width copy without a competing logo panel. */
.about-page-hero { position: relative; overflow: hidden; padding: clamp(42px, 5vw, 68px) 0 clamp(74px, 9vw, 118px); }
.about-hero-single { position: relative; z-index: 1; display: block; }
.about-horse-watermark {
  position: absolute;
  z-index: 0;
  top: 18px;
  right: -2%;
  width: clamp(1440px, 144vw, 2160px);
  height: auto;
  opacity: .09;
  clip-path: inset(0 0 32% 0);
  filter: grayscale(1) contrast(1.2);
  pointer-events: none;
  user-select: none;
}
.about-hero-copy { width: 100%; max-width: none; }
.about-hero-copy h1 { max-width: 1120px; font-size: clamp(2.15rem, 4vw, 3.55rem); }
.about-hero-copy > p:not(.eyebrow) {
  max-width: 1010px;
  color: #706b64;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .01em;
}

@media (max-width: 760px) {
  .about-horse-watermark { top: 34px; right: -300px; width: 1640px; opacity: .07; }
}

/* Homepage clarity: blue bullets, matched service actions, alternating sections. */
.hero-copy .trust-row li { display: flex; align-items: center; gap: 7px; }
.hero-copy .trust-row li::before {
  content: "•";
  width: auto;
  height: auto;
  display: inline;
  color: var(--lapis-bright);
  background: none;
  font-size: 16px;
  line-height: 1;
}
.gateway-item .button {
  justify-content: center;
  color: #fffaf3;
  background: linear-gradient(120deg, var(--burgundy-deep), var(--burgundy), var(--burgundy-rose));
  letter-spacing: .075em;
  text-align: center;
  text-transform: uppercase;
}
.gateway-item .button:hover,
.gateway-item .button:focus-visible { color: #fff; }

.home-focus-section,
.home-timeline-section,
.home-cta-section { background: #fffdf8; }
.home-directory-section,
.home-faq-section {
  border-color: rgba(40,83,119,.2);
  background: #e6ecef;
}

/* One consistent scale for every small section label across all pages. */
.eyebrow,
.kicker {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Current Services: numbered construction ledger instead of cards. */
.services-ledger-section {
  border-top: 1px solid rgba(40,83,119,.17);
  background: linear-gradient(180deg, #f6f6f3, #e9eef0);
}
.services-ledger-heading { margin-bottom: 36px; }
.services-ledger-heading .eyebrow { margin-bottom: 9px; }
.services-ledger-heading h2 { margin: 0; font-size: clamp(3rem, 6vw, 5.7rem); }
.services-ledger { border-top: 1px solid rgba(40,83,119,.28); }
.service-ledger-row {
  min-height: 150px;
  display: grid;
  grid-template-columns: 72px minmax(210px, .85fr) minmax(300px, 1.35fr) minmax(150px, auto);
  gap: 28px;
  align-items: center;
  padding: 28px 14px;
  border-bottom: 1px solid rgba(40,83,119,.28);
  scroll-margin-top: 110px;
  transition: background .2s ease, padding .2s ease;
}
.service-ledger-row:hover,
.service-ledger-row:focus-within { padding-inline: 24px; background: rgba(40,83,119,.065); }
.service-ledger-number {
  color: var(--lapis);
  font: 500 clamp(2.2rem, 4vw, 3.6rem)/1 Georgia, "Times New Roman", serif;
  letter-spacing: -.05em;
}
.service-ledger-title small {
  display: block;
  margin-bottom: 8px;
  color: var(--lapis);
  font: 900 9px/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.service-ledger-title h3 {
  margin: 0;
  color: #272520;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 2.8vw, 2.55rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.03;
}
.service-ledger-row > p { margin: 0; color: #69655e; font-size: 13px; line-height: 1.65; }
.service-ledger-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: var(--burgundy);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .045em;
  text-align: right;
  text-transform: uppercase;
}
.service-ledger-link b { color: var(--lapis); font-size: 24px; font-weight: 500; transition: transform .2s ease; }
.service-ledger-link:hover b,
.service-ledger-link:focus-visible b { transform: translateX(6px); }

/* About wordmark matched to the uploaded black-and-cream logo treatment. */
.about-logo-wordmark {
  width: fit-content;
  display: grid;
  justify-items: center;
  margin-bottom: 34px;
  color: #24211e;
}
.about-logo-wordmark strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5.8vw, 5.8rem);
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1;
  text-transform: uppercase;
}
.about-logo-wordmark span {
  margin-top: 10px;
  color: #24211e;
  font: 700 clamp(.68rem, 1.1vw, .9rem)/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: .48em;
  text-transform: uppercase;
}

/* About workflow shown as a compact, color-coded Gantt chart. */
.about-gantt {
  border: 1px solid rgba(40,83,119,.22);
  background: rgba(255,253,248,.74);
}
.about-gantt-scale {
  display: grid;
  grid-template-columns: 42% repeat(4, 1fr);
  min-height: 42px;
  align-items: center;
  border-bottom: 1px solid rgba(40,83,119,.2);
  background: rgba(40,83,119,.055);
}
.about-gantt-scale::before { content: "Project control"; padding-left: 24px; color: var(--lapis); font: 900 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .13em; text-transform: uppercase; }
.about-gantt-scale span { padding-left: 12px; color: #79746c; border-left: 1px solid rgba(40,83,119,.16); font: 850 8px/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.about-gantt-row {
  --bar-start: 4%;
  --bar-span: 46%;
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 144px;
  border-bottom: 1px solid rgba(40,83,119,.2);
}
.about-gantt-row:last-child { border-bottom: 0; }
.about-gantt-copy { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 28px 24px; }
.about-gantt-copy > span { color: var(--lapis); font: 900 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.about-gantt-copy h3 { margin: -3px 0 8px; color: #292621; font-size: clamp(1.25rem, 2vw, 1.8rem); }
.about-gantt-copy p { margin: 0; color: #6f6a63; font-size: 12px; line-height: 1.6; }
.about-gantt-track {
  position: relative;
  overflow: hidden;
  border-left: 1px solid rgba(40,83,119,.2);
  background-image: linear-gradient(90deg, rgba(40,83,119,.14) 1px, transparent 1px);
  background-size: 25% 100%;
}
.about-gantt-track::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(40,83,119,.14); }
.about-gantt-track i {
  position: absolute;
  z-index: 1;
  left: var(--bar-start);
  top: 50%;
  width: var(--bar-span);
  height: 30px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lapis-deep), var(--lapis), var(--lapis-bright));
  box-shadow: 0 8px 18px rgba(23,54,79,.18);
  transform: translateY(-50%);
}
.gantt-scope { --bar-start: 3%; --bar-span: 44%; }
.gantt-communication { --bar-start: 21%; --bar-span: 72%; }
.gantt-communication .about-gantt-track i { background: linear-gradient(90deg, var(--burgundy-deep), var(--burgundy), var(--burgundy-rose)); box-shadow: 0 8px 18px rgba(77,24,38,.16); }
.gantt-changes { --bar-start: 53%; --bar-span: 43%; }
.gantt-changes .about-gantt-track i { background: linear-gradient(90deg, var(--lapis), var(--lapis-bright), var(--burgundy-rose)); }

@media (max-width: 980px) {
  .service-ledger-row { grid-template-columns: 58px minmax(190px, .8fr) minmax(250px, 1.2fr) 34px; gap: 20px; }
  .service-ledger-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 680px) {
  .service-ledger-row {
    min-height: 0;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    gap: 12px 16px;
    padding: 26px 4px;
  }
  .service-ledger-row:hover,
  .service-ledger-row:focus-within { padding-inline: 8px; }
  .service-ledger-number { grid-row: 1 / 3; font-size: 2rem; }
  .service-ledger-title { grid-column: 2; }
  .service-ledger-row > p { grid-column: 2 / 4; }
  .service-ledger-link { grid-column: 3; grid-row: 1; }
  .about-logo-wordmark { justify-items: start; }
  .about-logo-wordmark span { letter-spacing: .32em; }
  .about-gantt-scale { display: none; }
  .about-gantt-row { grid-template-columns: 1fr; }
  .about-gantt-copy { padding: 24px 20px 18px; }
  .about-gantt-track { min-height: 64px; border-top: 1px solid rgba(40,83,119,.16); border-left: 0; }
}

/* Final micro-label lock: all content labels use the exact same text size. */
:root { --content-label-size: 12px; }
.eyebrow,
.kicker,
.concrete-plan-code,
.service-path-copy > span,
.service-index-number,
.service-ledger-title small,
.about-gantt-scale::before,
.about-gantt-scale span {
  font-size: var(--content-label-size) !important;
}

/* Site-wide section rhythm: cool blue-gray against the darker ivory bands. */
:root {
  --cool-blue-section: #e6ecef;
  --dark-ivory-section: #e3dbcf;
}
.hero,
.page-hero,
.section:not(.muted-section),
.section-tight {
  background:
    linear-gradient(rgba(69,62,54,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69,62,54,.045) 1px, transparent 1px),
    linear-gradient(rgba(40,83,119,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,83,119,.022) 1px, transparent 1px),
    linear-gradient(180deg, #ebe4da 0%, var(--dark-ivory-section) 100%);
  background-size: 28px 28px, 28px 28px, 112px 112px, 112px 112px, auto;
}

/* Exact About-page tick-label treatment everywhere it appears. */
.eyebrow,
.kicker,
.services-ledger-heading .eyebrow {
  font-size: var(--content-label-size) !important;
  font-weight: 850 !important;
  letter-spacing: .16em !important;
  line-height: 1.2 !important;
}

/* Timeline transparency: four-stage path with a continuously moving current. */
.timeline-current {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin-top: 12px;
}
.timeline-current::before,
.timeline-current::after {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 26px;
  height: 4px;
  border-radius: 999px;
}
.timeline-current::before { background: rgba(116,43,61,.2); }
.timeline-current::after {
  z-index: 1;
  background: repeating-linear-gradient(90deg, var(--burgundy-deep) 0 22px, var(--burgundy) 22px 44px, var(--burgundy-rose) 44px 66px, var(--burgundy) 66px 88px);
  background-size: 176px 100%;
  box-shadow: 0 0 12px rgba(116,43,61,.24);
  animation: timeline-current-horizontal 2.4s linear infinite;
}
.timeline-current-step { position: relative; z-index: 2; padding-inline: 8px; text-align: center; }
.timeline-node {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin: 0 auto 28px;
  color: #fffaf3;
  border: 3px solid #e8e1d6;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--burgundy-deep), var(--burgundy), var(--burgundy-rose));
  box-shadow: 0 0 0 6px rgba(227,219,207,.82), 0 12px 25px rgba(77,24,38,.17);
  font: 900 11px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
}
.timeline-current-step h3 { margin-bottom: 10px; font-size: clamp(1.25rem, 2vw, 1.75rem); }
.timeline-current-step p { margin: 0; color: #69645d; font-size: 13px; line-height: 1.65; }

@keyframes timeline-current-horizontal {
  from { background-position: 0 0; }
  to { background-position: 176px 0; }
}
@keyframes timeline-current-vertical {
  from { background-position: 0 0; }
  to { background-position: 0 176px; }
}

@media (max-width: 850px) {
  .timeline-current { grid-template-columns: 1fr; gap: 0; }
  .timeline-current::before,
  .timeline-current::after {
    top: 28px;
    bottom: 28px;
    left: 26px;
    right: auto;
    width: 4px;
    height: auto;
  }
  .timeline-current::after {
    background: repeating-linear-gradient(180deg, var(--burgundy-deep) 0 22px, var(--burgundy) 22px 44px, var(--burgundy-rose) 44px 66px, var(--burgundy) 66px 88px);
    background-size: 100% 176px;
    animation-name: timeline-current-vertical;
  }
  .timeline-current-step {
    min-height: 150px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px 22px;
    align-content: start;
    padding: 0 0 38px;
    text-align: left;
  }
  .timeline-node { grid-row: 1 / 3; margin: 0; }
  .timeline-current-step h3 { margin: 5px 0 2px; }
  .timeline-current-step p { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-current::after { animation: none; }
  .gateway-item { animation: none; transition: none; }
  .gateway-item:hover,
  .gateway-item:focus-within { transform: none; }
}

/* Larger footer wordmark on every page; header sizing remains unchanged. */
.footer-brand .brand { min-width: 230px; }
.footer-brand .brand-mark {
  flex: 0 0 230px;
  width: 230px;
  height: 150px;
}
.footer-brand .brand-mark img { top: -15px; width: 230px; }

@media (max-width: 640px) {
  .footer-brand .brand { min-width: 200px; }
  .footer-brand .brand-mark { flex-basis: 200px; width: 200px; height: 130px; }
  .footer-brand .brand-mark img { top: -13px; width: 200px; }
}
.muted-section {
  border-color: rgba(40,83,119,.18);
  background:
    linear-gradient(rgba(40,83,119,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,83,119,.055) 1px, transparent 1px),
    linear-gradient(rgba(116,43,61,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,43,61,.018) 1px, transparent 1px),
    linear-gradient(180deg, #edf2f4 0%, var(--cool-blue-section) 100%);
  background-size: 28px 28px, 28px 28px, 112px 112px, 112px 112px, auto;
}
.service-gateway {
  background:
    linear-gradient(rgba(40,83,119,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,83,119,.06) 1px, transparent 1px),
    linear-gradient(rgba(116,43,61,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,43,61,.018) 1px, transparent 1px),
    linear-gradient(120deg, #edf2f4, var(--cool-blue-section));
  background-size: 28px 28px, 28px 28px, 112px 112px, 112px 112px, auto;
}