/* A-1 Lawn & Landscaping Service, Inc.: generated by wp-theme/tools/build.mjs from redesign/styles.css. Edit the sources, not this file. */
/* ===== A-1 inside WordPress: the scope the patterns render in (.a1) ===== */

/* Group blocks in a classic theme get an inner wrapper; let its children sit on the group's own grid. */
.a1 .wp-block-group__inner-container { display: contents; }

.a1 { font-family: var(--font); color: var(--ink); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.a1 h1, .a1 h2, .a1 h3, .a1 h4, .a1 p, .a1 figure, .a1 ul, .a1 ol, .a1 dl, .a1 dd, .a1 details, .a1 fieldset,
.a1 .wp-block-buttons, .a1 .wp-block-image, .a1 .wp-block-video, .a1 .wp-block-group { margin: 0; }
.a1 h1, .a1 h2, .a1 h3, .a1 h4 { font-family: inherit; font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: inherit; text-wrap: balance; }
.a1 p { text-wrap: pretty; }
.a1 ul, .a1 ol { padding: 0; list-style: none; }
.a1 img, .a1 video { display: block; max-width: 100%; height: auto; }
.a1 a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; transition: text-decoration-thickness var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .a1 a:hover { text-decoration-thickness: 0.14em; } }
/* Focus: an ink ring inside a yellow halo, so it shows on light, green and yellow grounds alike (beats the button reset below). */
.a1 :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 6px var(--accent); }
.a1 ::selection { background: var(--accent); color: var(--accent-ink); }
.a1 .wp-element-caption { margin: 0; text-align: left; font-size: var(--step-small); color: inherit; }
.a1 .is-cover img, .a1 .is-cover video { width: 100%; height: 100%; object-fit: cover; }
.a1 .wp-block-video video { width: 100%; }

/* Stagger steps for entrances (replaces the inline --i of the static build). */
.a1 .d0 { --i: 0; } .a1 .d1 { --i: 1; } .a1 .d2 { --i: 2; } .a1 .d3 { --i: 3; } .a1 .d4 { --i: 4; } .a1 .d5 { --i: 5; }
.a1 .d6 { --i: 6; } .a1 .d7 { --i: 7; } .a1 .d8 { --i: 8; } .a1 .d9 { --i: 9; } .a1 .d10 { --i: 10; } .a1 .d14 { --i: 14; }

/* Buttons: the block button carries the static build's .button look. */
.a1 .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.a1 .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.4rem; border: 0; border-radius: 0; background: var(--accent); color: var(--accent-ink); font-size: var(--step-body); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; box-shadow: none; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.a1 .wp-block-button__link:active { transform: scale(0.97); }
.a1 .btn-dark .wp-block-button__link { background: var(--ink); color: var(--accent); }
.a1 .btn-small .wp-block-button__link { min-height: 2.75rem; padding: 0 1rem; }
@media (hover: hover) and (pointer: fine) {
  .a1 .wp-block-button__link:hover { background: var(--accent-strong); color: var(--accent-ink); }
  .a1 .btn-dark .wp-block-button__link:hover { background: var(--ink-3); color: var(--accent); }
}

/* Links that read as navigation, not as underlined text. */
.a1 .row h3 a, .a1 .area-link a, .a1 .svc-name, .a1 .footer-links a { text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease, text-decoration-thickness var(--t-hover) ease; }
/* Thumb-sized hit areas (44px) for links that stand alone; the padding is cancelled by a matching
   negative margin, so nothing on the page moves. Links inside running text keep their size. */
.a1 .wp-block-list li > a:only-child, .a1 .area-link a, .a1 .more-link a, .a1 .cta-call a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.a1 .panel-links a, .a1 .card-foot a, .a1 .svc-name { padding-block: 10px; margin-block: -10px; }
@media (hover: hover) and (pointer: fine) { .a1 .row h3 a:hover, .a1 .footer-links a:hover, .a1 .svc-name:hover { text-decoration-color: currentColor; } }
.a1 .more-link a, .a1 .card-foot a, .a1 .cta-call a { font-weight: 600; white-space: nowrap; }
.a1 .panel-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.a1 .panel-links a { text-decoration-color: rgb(247 247 247 / 0.45); }

/* Kadence styles every <button> as a filled button; the sign rows, tabs and choices are plain controls. */
.a1 button, .a1 button:hover, .a1 button:focus { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; cursor: pointer; }
.a1 fieldset { border: 0; padding: 0; min-width: 0; }
/* Kadence spaces images and buttons in post content (.single-content figure.wp-block-image); the board sets its own gaps. */
.a1 figure.wp-block-image, .a1 figure.wp-block-video, .a1 .wp-block-button { margin: 0; }
/* The pinned reasons stage needs a real box as its sticky track. */
.a1 .reasons.is-pinned > .wp-block-group__inner-container { display: block; height: 100%; }

/* Steve's badge (assets/brand), white on the dark tiles. */
.a1 .panel .wordmark { display: flex; align-items: center; gap: 14px; }
.a1 .panel .wordmark::before { content: ""; flex: none; width: 64px; height: 64px; background: url("brand/a1-badge-white.svg") center / contain no-repeat; }
@media (max-width: 720px) { .a1 .panel .wordmark::before { width: 52px; height: 52px; } }
.a1 .mark .b4 { background: var(--ink-3) url("brand/a1-badge-white.svg") center / auto 82% no-repeat; }

/* The estimate form (Kadence Blocks advanced form) on the yellow tile: square white fields, the dark button. */
.a1 .cta-form { width: 100%; max-width: 46rem; }
.a1 .cta-form .wp-block-kadence-advanced-form { --kb-form-font-size: var(--step-body); --kb-form-line-height: 1.4; --kb-form-border-radius: 0; --kb-form-error-color: #8f1414; --kb-form-error-background: #fff; }
.a1 .cta-form .kb-advanced-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.a1 .cta-form .wp-block-kadence-advanced-form-select, .a1 .cta-form .wp-block-kadence-advanced-form-textarea,
.a1 .cta-form .kb-submit-field, .a1 .cta-form .kb-adv-form-message { grid-column: 1 / -1; }
.a1 .cta-form .kb-adv-form-label { margin-bottom: 6px; font-size: max(0.9375rem, var(--step-small)); font-weight: 600; line-height: 1.3; }
.a1 .cta-form .kb-adv-form-required { color: inherit; }
.a1 .cta-form .kb-form-basic-style input:not([type=hidden]), .a1 .cta-form .kb-form-basic-style select, .a1 .cta-form .kb-form-basic-style textarea {
  width: 100%; min-height: 3rem; padding: 10px 14px; border: 2px solid transparent; border-radius: 0; background-color: #fff;
  color: var(--ink); font: inherit; font-size: var(--step-body); box-shadow: none; transition: border-color var(--t-hover) ease; }
.a1 .cta-form .kb-form-basic-style select { padding-right: 40px; }
.a1 .cta-form .kb-form-basic-style textarea { min-height: 6.5rem; resize: vertical; }
.a1 .cta-form .kb-form-basic-style input:focus, .a1 .cta-form .kb-form-basic-style select:focus, .a1 .cta-form .kb-form-basic-style textarea:focus { border-color: var(--ink); outline: 0; }
@media (hover: hover) and (pointer: fine) {
  .a1 .cta-form .kb-form-basic-style :is(input:not([type=hidden]), select, textarea):hover:not(:focus) { border-color: rgb(13 42 28 / 0.35); }
}
.a1 .cta-form .kb-submit-field .kb-adv-form-submit-button { min-height: 3rem; padding: 0 1.4rem; border: 0; border-radius: 0; background: var(--ink); color: var(--accent); font-size: var(--step-body); font-weight: 600; line-height: 1.2; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.a1 .cta-form .kb-submit-field .kb-adv-form-submit-button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .a1 .cta-form .kb-submit-field .kb-adv-form-submit-button:hover { background: var(--ink-3); color: var(--accent); } }
.a1 .cta-form .kb-adv-form-message { margin: 0; padding: 16px 18px; border: 0; border-radius: 0; font-weight: 600; }
.a1 .cta-form .kb-adv-form-success { background: var(--ink); color: var(--accent); }
.a1 .cta-form .kb-adv-form-warning { background: #fff; color: #8f1414; }
.a1 .cta-form .kb-adv-form-loading { background: rgb(246 224 22 / 0.7); }
.a1-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 720px) {
  .a1 .cta-form .kb-advanced-form { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .a1 .cta-form .kb-submit-field .kb-adv-form-submit-button { width: 100%; }
}

/* Home board with eight photos (trial): it sits under the normal site header, so it fills the rest of the
   screen; two taller frames per side column, two wide frames above and below the panel. */
.a1 .hero.hero-eight { height: calc(100svh - 72px); min-height: 600px; }
@media (min-width: 721px) {
  .a1 .hero-eight .col-mid .wide { grid-column: span 2; }
  .a1 .hero-eight .b3 { margin-top: 28px; }
  .a1 .hero-eight .col.wide .frame img { aspect-ratio: 3 / 2; object-position: center 60%; }
}
@media (min-width: 1081px) {
  .a1 .hero-eight .c1 { margin-bottom: -40px; }
  .a1 .hero-eight .c6 { margin-bottom: -70px; }
  .a1 .hero-eight .c1 .frame, .a1 .hero-eight .c6 .frame { flex: 1 1 0; min-height: 0; }
  .a1 .hero-eight .c1 .frame img, .a1 .hero-eight .c6 .frame img { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
}
@media (max-width: 720px) { .a1 .hero.hero-eight { height: auto; min-height: 0; max-height: calc(100svh - 72px); } }

/* The overview pages' service cell: on phones it only needs room for its heading and note. */
@media (max-width: 720px) { .a1 .services-cell.compact { min-height: 0; gap: 28px; } }
/* On wide screens it stays in view while a long list of rows scrolls past it. */
@media (min-width: 1081px) { .a1 .services-cell.compact { position: sticky; top: 24px; align-self: start; } }

/* Google reviews (Trustindex free widget): the plugin's cards restyled as the site's dark tiles. */
.a1 .greviews { margin-top: var(--section); }
.a1 .greviews .wp-block-shortcode,
.a1 .greviews > .ti-widget { margin-top: 40px; padding: 0 var(--margin); }
.a1 .greviews .ti-widget .ti-widget-container { margin: 0 !important; }
.a1 .greviews .ti-widget .ti-reviews-container-wrapper { margin: 0 calc(var(--joint) / -2) !important; }
.a1 .greviews .ti-widget .ti-review-item { padding: calc(var(--joint) / 2) !important; }
.a1 .greviews .ti-widget .ti-review-item > .ti-inner { padding: var(--pad) !important; border: 0 !important; border-radius: 0 !important; background: var(--ink) !important; box-shadow: none !important; color: var(--on-dark); }
.a1 .greviews .ti-widget .ti-review-item:nth-child(3n+2) > .ti-inner { background: var(--ink-2) !important; }
.a1 .greviews .ti-widget .ti-name { color: var(--on-dark) !important; font-size: var(--step-body) !important; font-weight: 600 !important; }
.a1 .greviews .ti-widget .ti-date { color: var(--leaf-3) !important; font-size: var(--step-small) !important; }
.a1 .greviews .ti-widget .ti-review-content,
.a1 .greviews .ti-widget .ti-review-content * { color: var(--on-dark) !important; }
.a1 .greviews .ti-widget .ti-star { filter: none; }
.a1 .greviews .ti-widget .ti-read-more span,
.a1 .greviews .ti-widget .ti-read-more { color: var(--accent) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.a1 .greviews .ti-widget .ti-platform-icon { background: var(--on-dark); border-radius: 50%; padding: 3px; }
.a1 .greviews .ti-widget.ti-goog .ti-load-more-reviews-container .ti-load-more-reviews-button { display: inline-flex; align-items: center; justify-content: center; font-size: var(--step-body) !important; border: 0 !important; border-radius: 0 !important; background: var(--accent) !important; color: var(--accent-ink) !important; font-weight: 600 !important; min-height: 3rem; padding: 0 1.4rem !important; }
.a1 .greviews .ti-widget.ti-goog .ti-load-more-reviews-container .ti-load-more-reviews-button:hover { background: var(--accent-strong) !important; }
.a1 .greviews .greviews-actions { margin-top: 32px; padding: 0 calc(var(--margin) + var(--pad)); gap: 12px; }
@media (max-width: 720px) { .a1 .greviews .greviews-actions { padding-inline: calc(var(--margin) + 8px); } }


/* ===== Design (scoped from the static build) ===== */
:root { --bg: #f7f7f7;
  --surface: #ebebeb;
  --ink: #0d2a1c;
  --ink-2: #163a28;
  --ink-3: #2f5a41;
  --muted: #5f6b64;
  --accent: #f6e016;
  --accent-strong: #e5cf00;
  --accent-ink: #0d2a1c;
  --on-dark: #f7f7f7;
  --leaf-1: #dfe8e1;
  --leaf-2: #cddcd2;
  --leaf-3: #bccfc2;

  --font: "Albert Sans", system-ui, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  
  --step-body: clamp(1rem, 0.95rem + 0.15vw, 1.0625rem);
  --step-lead: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --step-head: clamp(1.75rem, 1.1rem + 2.1vw, 3.25rem);
  --step-display: clamp(3rem, 5.6vw, 5.5rem);

  
  --margin: max(clamp(12px, 2.2vw, 40px), calc((100vw - 1760px) / 2));
  --joint: 8px;
  --pad: clamp(20px, 2.2vw, 36px);
  --section: clamp(6.5rem, 8vw, 7.5rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms; }
.a1 ul { padding: 0; list-style: none; }
.a1 a { color: inherit; }
.a1 p { text-wrap: pretty; }
.a1 .nums { font-variant-numeric: tabular-nums; }
.a1 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .a1 .button:hover { background: var(--accent-strong); }
  .a1 .button-dark:hover { background: var(--ink-3); color: var(--accent); }
  .a1 .link:hover { text-decoration-color: currentColor; }
  .a1 .link-plain:hover { text-decoration-thickness: 0.14em; }
}
.a1 .hero { overflow: hidden; }
.a1 .sheet { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 12px var(--margin) 0; height: 100%; }
.a1 .col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.a1 .c6 { margin-top: -70px; }
.a1 .frame { display: flex; flex-direction: column; min-width: 0; }
.a1 .frame img, .a1 .frame video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.a1 .frame figcaption { height: 28px; padding: 0 10px; font-size: var(--step-small); line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a1 .frame.s1 figcaption { background: var(--ink); color: var(--on-dark); }
.a1 .frame.s2 figcaption { background: var(--accent); color: var(--accent-ink); }
.a1 .frame.s3 figcaption { background: var(--surface); color: var(--ink); }
.a1 .frame.s4 figcaption { background: var(--ink-3); color: var(--on-dark); }
.a1 .col-mid { grid-column: span 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: calc(28svh - 24px) auto clamp(240px, 30svh, 420px); gap: 12px; min-width: 0; }
@media (min-width: 1081px) {
  .a1 .c1, .a1 .c6 { contain: size; }
}
.a1 .frame.top { align-self: end; }
.a1 .frame.top img, .a1 .frame.top video { aspect-ratio: auto; height: 100%; }
.a1 .t2 { height: calc(28svh - 24px + 90px); margin-top: -90px; }
.a1 .t3 { height: calc(28svh - 24px + 40px); margin-top: -40px; }
.a1 .t4 { height: calc(28svh - 24px + 130px); margin-top: -130px; }
.a1 .t5 { height: calc(28svh - 24px + 20px); margin-top: -20px; }
.a1 .col-mid > .col, .a1 .col-mid > .wp-block-group__inner-container > .col { grid-row: 3; }
.a1 .b3 { margin-top: 40px; }
.a1 .b5 { margin-top: 24px; }
.a1 .panel { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-height: 410px; padding: var(--pad); background: var(--ink); color: var(--on-dark); }
.a1 .wordmark { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.a1 .panel h1 { font-size: clamp(2.25rem, 1rem + 3.4vw, 4.25rem); line-height: 0.98; max-width: 13em; }
.a1 .panel-text { max-width: 52ch; }
.a1 .panel-foot { margin-top: auto; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.a1 .panel-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.a1 .panel-links .link { text-decoration-color: rgb(247 247 247 / 0.45); }
.a1 .video-toggle, .a1 .video-toggle:focus { position: absolute; top: 8px; right: 8px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: var(--ink); color: var(--on-dark); cursor: pointer; }
.a1 .video-toggle::before { content: ""; width: 12px; height: 14px; border-inline: 4px solid currentColor; box-sizing: border-box; }
.a1 .video-toggle.is-paused::before { width: 0; height: 0; border: 0; border-left: 12px solid currentColor; border-block: 8px solid transparent; margin-left: 3px; }
@media (hover: hover) and (pointer: fine) {
  .a1 .video-toggle:hover { background: var(--ink-3); }
}
.a1 .hero-swipe { display: none; }
.a1 .intro { margin-top: var(--section); padding-inline: var(--margin); }
.a1 .hero + .intro { margin-top: 64px; }
.a1 .board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: clamp(200px, 30svh, 320px) clamp(200px, 30svh, 320px) auto; gap: var(--joint); }
.a1 .tile { min-width: 0; overflow: hidden; }
.a1 .tile-a { grid-column: 1 / 9; grid-row: 1 / 3; background: var(--ink); color: var(--on-dark); display: flex; align-items: flex-end; padding: var(--pad); }
.a1 .tile-b { grid-column: 9 / 13; grid-row: 1; background: var(--surface); display: flex; align-items: flex-end; padding: var(--pad); }
.a1 .tile-c { grid-column: 9 / 13; grid-row: 2; }
.a1 .slogan { font-size: var(--step-display); line-height: 0.86; letter-spacing: -0.045em; font-weight: 600; }
.a1 .figure { white-space: nowrap; }
.a1 .tile-text { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--joint); padding-block: 40px; }
.a1 .facts { grid-column: 1 / 6; padding-left: var(--pad); font-size: var(--step-lead); line-height: 1.3; font-weight: 500; }
.a1 .facts li + li { margin-top: 0.5em; }
.a1 .statement { grid-column: 7 / 13; padding: 0 40px 0 24px; font-size: var(--step-lead); line-height: 1.38; max-width: none; }
.a1 .services { margin-top: var(--section); display: grid; grid-template-columns: 1fr 1fr; }
.a1 .services-cell { min-height: min(80svh, 720px); background: var(--leaf-1); padding: 40px var(--pad) var(--pad) calc(var(--margin) + var(--pad)); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.a1 .zigzag { font-size: var(--step-head); line-height: 1; }
.a1 .zigzag span { display: block; }
.a1 .zigzag .right { text-align: right; }
.a1 .services-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.a1 .services-foot p { max-width: 30ch; }
.a1 .services-foot .more-link { font-weight: 600; white-space: nowrap; }
.a1 .services-rows { display: grid; grid-auto-rows: 1fr; background: var(--ink); color: var(--on-dark); }
.a1 .row { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 24px; padding: 28px calc(var(--margin) + var(--pad)) 28px 28px; align-items: start; align-content: start; }
.a1 .row:nth-child(even) { background: var(--ink-2); }
.a1 .row h3 { font-size: var(--step-lead); line-height: 1.1; letter-spacing: -0.02em; }
.a1 .row p { line-height: 1.5; }
.a1 .row ul { line-height: 1.6; color: #cfdcd3; }
.a1 .row.is-live { position: relative; transition: background-color var(--t-hover) ease; }
.a1 .row.is-live h3 a { text-decoration-color: currentColor; }
.a1 .row.is-live h3 a::after { content: ""; position: absolute; inset: 0; }
.a1 .row-more { grid-column: 3; color: var(--accent); font-weight: 600; white-space: nowrap; }
.a1 .row-more .arrow { display: inline-block; margin-left: 6px; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .a1 .row.is-live:hover { background-color: var(--ink-3); }
  .a1 .row.is-live:hover .row-more .arrow { transform: translateX(4px); }
}
.a1 .projects { margin-top: var(--section); }
.a1 .projects-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 0 calc(var(--margin) + var(--pad)) 32px; }
.a1 .projects-head h2 { font-size: var(--step-head); }
.a1 .small-link { font-weight: 600; white-space: nowrap; }
.a1 .drag { --h: 68svh; display: flex; gap: 12px; height: var(--h); padding-inline: var(--margin); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--margin); scrollbar-width: none; overscroll-behavior-x: contain; }
.a1 .drag::-webkit-scrollbar { display: none; }
.a1 .m { flex: none; height: 100%; scroll-snap-align: start; }
.a1 .m img, .a1 .m video { width: 100%; height: 100%; object-fit: cover; }
.a1 .m.tall { aspect-ratio: 3 / 4; }
.a1 .m.wide { aspect-ratio: 16 / 10; }
.a1 .m.pair { display: flex; flex-direction: column; gap: 12px; width: calc((var(--h) - 12px) / 2 * 4 / 3); }
.a1 .m.pair figure { flex: 1; min-height: 0; }
.a1 .areas { margin-top: var(--section); padding-inline: var(--margin); }
.a1 .areas-head { padding-left: var(--pad); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--joint); }
.a1 .areas-head h2 { grid-column: 1 / -1; font-size: var(--step-head); }
.a1 .areas-head .lead { grid-column: 1 / 7; margin-top: 24px; font-size: var(--step-lead); line-height: 1.35; }
.a1 .areas-board { margin-top: 72px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.a1 .map { grid-column: 1 / 8; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #d9d6cf; }
.a1 .map img { filter: sepia(0.15) contrast(1.05); }
.a1 .map figcaption { position: absolute; top: 0; right: 0; width: 340px; padding: var(--pad); background: var(--bg); line-height: 1.45; }
.a1 .areas-side { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 24px; }
.a1 .area-tile { background: var(--accent); color: var(--accent-ink); aspect-ratio: 4 / 3.2; padding: var(--pad); display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.a1 .area-link, .a1 .area-link a { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; text-decoration: none; transition: transform var(--t-hover) var(--ease-out); }
.a1 .area-link::after { content: ""; }
@media (hover: hover) and (pointer: fine) {
  .a1 .area-link a:hover { transform: translateX(8px); }
}
.a1 .area-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; padding-inline: var(--pad); }
.a1 .area-facts .dt { font-size: var(--step-small); color: var(--muted); }
.a1 .area-facts .dd { font-weight: 600; }
.a1 .reasons { margin-top: var(--section); }
.a1 .reasons.is-pinned { height: 200svh; }
.a1 .reasons-stage { padding: 0 var(--margin); }
.a1 .reasons.is-pinned .reasons-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.a1 .reasons.is-pinned + .faq { margin-top: 0; }
.a1 .reasons h2 { font-size: var(--step-head); padding-left: var(--pad); margin-bottom: 48px; }
.a1 .deck { display: flex; height: 400px; overflow-x: auto; scrollbar-width: none; gap: 0; }
.a1 .deck::-webkit-scrollbar { display: none; }
.a1 .reasons.is-pinned .deck { overflow: hidden; }
.a1 .card { flex: none; width: 620px; height: 100%; padding: 32px var(--pad); display: flex; flex-direction: column; gap: 16px; overflow: hidden; transition: width 700ms var(--ease-in-out); }
.a1 .card > *, .a1 .card > .wp-block-group__inner-container > * { width: 580px; max-width: 100%; }
.a1 .reasons.is-pinned .card > *, .a1 .reasons.is-pinned .card > .wp-block-group__inner-container > * { max-width: none; }
.a1 .card.tone-1 { background: var(--leaf-1); }
.a1 .card.tone-2 { background: var(--leaf-2); }
.a1 .card.tone-3 { background: var(--leaf-3); }
.a1 .card h3 { font-size: var(--step-lead); line-height: 1.1; letter-spacing: -0.02em; }
.a1 .card p { max-width: 46ch; }
.a1 .card-foot { margin-top: auto; display: flex; justify-content: flex-start; gap: 16px; }
.a1 .card-fact { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.a1 .reasons.is-pinned .card { display: grid; grid-template-columns: minmax(0, 560px) 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 40px; row-gap: 16px; }
.a1 .reasons.is-pinned .card > *, .a1 .reasons.is-pinned .card > .wp-block-group__inner-container > * { grid-column: 1; width: auto; }
.a1 .reasons.is-pinned .card p:not(.card-fact) { font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; }
.a1 .reasons.is-pinned .card .card-fact { grid-column: 2; grid-row: 1 / -1; align-self: end; justify-self: end; font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.04em; white-space: nowrap; text-align: right; }
.a1 .reasons.is-pinned .card .card-foot { grid-row: 4; }
.a1 .reasons.is-pinned .card.is-spine { display: flex; }
.a1 .card.is-spine .card-fact { display: none; }
.a1 .card-foot .link-plain { font-weight: 600; }
.a1 .reasons.is-pinned .card { flex: 0 0 0px; width: auto; padding-inline: 0; visibility: hidden; transition: flex-grow 700ms var(--ease-in-out), flex-basis 700ms var(--ease-in-out), padding 700ms var(--ease-in-out); }
.a1 .reasons.is-pinned .card.is-open { flex: 1 1 0px; padding-inline: var(--pad); visibility: visible; }
.a1 .reasons.is-pinned .card.is-spine { flex: 0 0 120px; padding-inline: var(--pad); visibility: visible; cursor: pointer; }
.a1 .card.is-spine .card-foot, .a1 .card.is-spine p { display: none; }
.a1 .card.is-spine h3 { writing-mode: vertical-rl; transform: rotate(180deg); width: auto; height: auto; max-width: none; font-size: var(--step-body); white-space: nowrap; }
.a1 .deck-foot { margin-top: 48px; padding-left: var(--pad); }
.a1 .faq { margin-top: var(--section); }
.a1 .band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--joint); padding: 56px calc(var(--margin) + var(--pad)); background: var(--bg); }
.a1 .band.alt { background: var(--surface); }
.a1 .band-head { min-height: min(40svh, 360px); align-items: end; background: var(--accent); color: var(--accent-ink); }
.a1 .band-head h2 { grid-column: 1 / -1; font-size: var(--step-display); line-height: 0.92; letter-spacing: -0.045em; }
.a1 .band h3 { grid-column: 1 / 6; font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.02em; }
.a1 .band p { grid-column: 7 / 13; padding-left: 24px; line-height: 1.5; max-width: 60ch; }
.a1 .layers { margin-top: var(--section); padding-inline: var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--joint); align-items: start; }
.a1 .layers-head { grid-column: 1 / 6; padding: 0 var(--pad); display: flex; flex-direction: column; gap: 24px; }
.a1 .layers-head h2 { font-size: var(--step-head); }
.a1 .layers-head > p, .a1 .layers-head > .wp-block-group__inner-container > p { max-width: 46ch; }
.a1 .layers-photo { margin-top: 16px; }
.a1 .layers-photo img { aspect-ratio: 4 / 3; }
.a1 .layers-photo figcaption { margin-top: 8px; font-size: var(--step-small); }
.a1 .layers-stack { grid-column: 6 / 13; display: flex; flex-direction: column; }
.a1 .layer { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; align-items: start; padding: 18px var(--pad); }
.a1 .layer-name { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.a1 .l-pavers { min-height: 120px; background: var(--ink-3); color: var(--on-dark); }
.a1 .l-sand { min-height: 72px; background: var(--accent); color: var(--accent-ink); }
.a1 .l-base { min-height: 168px; background: var(--leaf-3); }
.a1 .l-soil { min-height: 132px; background: var(--ink); color: var(--on-dark); }
.a1 .layers-note { margin-top: 20px; padding-inline: var(--pad); max-width: 60ch; }
.a1 .estimate { margin-top: var(--section); overflow: hidden; }
.a1 .cta-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; padding-inline: var(--margin); }
.a1 .flank { min-height: 360px; }
.a1 .flank-photo { grid-column: 1 / 3; margin-left: calc(var(--margin) * -1 - 40px); overflow: hidden; }
.a1 .flank-photo img { transition: opacity 400ms ease; }
.a1 .flank-colour { grid-column: 11 / 13; margin-right: calc(var(--margin) * -1 - 40px); background: var(--ink-3); }
.a1 .cta-tile { grid-column: 3 / 11; min-height: 360px; background: var(--accent); color: var(--accent-ink); padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; }
.a1 .cta-tile h2 { font-size: var(--step-head); }
.a1 .cta-tile p { max-width: 52ch; }
.a1 .needs { display: flex; flex-wrap: wrap; gap: 8px; }
.a1 .needs label { position: relative; cursor: pointer; }
.a1 .needs input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.a1 .needs span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; background: #ebd512; font-weight: 500; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.a1 .needs input:checked + span { background: var(--ink); color: var(--accent); }
.a1 .needs input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1 .needs label:active span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .a1 .needs label:hover input:not(:checked) + span { background: #dcc700; }
}
.a1 .footer { margin-top: var(--section); background: var(--ink); color: var(--on-dark); padding: 12px var(--margin) 24px; }
.a1 .mark { display: flex; align-items: flex-end; gap: 4px; height: clamp(200px, 28svh, 300px); }
.a1 .block { display: block; overflow: hidden; }
.a1 .block svg { display: block; width: 100%; height: 100%; }
.a1 .block text { fill: var(--ink); font-family: var(--font); font-weight: 600; }
.a1 .b1 { flex: 3; height: 100%; background: var(--accent); }
.a1 .b2 { flex: 2; height: 62%; background: var(--leaf-2); }
.a1 .b3 { flex: 2.2; height: 86%; background: var(--on-dark); }
.a1 .b4 { flex: 4; height: 70%; background: var(--ink-3); }
.a1 .footer-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--joint); padding-inline: var(--pad); }
.a1 .footer-links { grid-column: 1 / 9; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.a1 .footer-h { font-size: var(--step-small); letter-spacing: 0; color: #a9bdb0; margin-bottom: 10px; font-weight: 500; }
.a1 .footer-links li { line-height: 1.8; }
.a1 .footer-contact { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 16px; }
.a1 .footer-contact a { overflow-wrap: anywhere; }
.a1 .footer-last { margin-top: 56px; padding-inline: var(--pad); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.a1 .footer-last .small { font-size: var(--step-small); color: #c4d2c8; max-width: 80ch; }
@media (max-width: 1080px) {
  .a1 .c1, .a1 .c6 { display: none; }
  .a1 .col-mid { grid-column: 1 / -1; }
  .a1 .sheet { grid-template-columns: 1fr; }
  .a1 .services { grid-template-columns: 1fr; }
  .a1 .services-cell { min-height: 60svh; }
  .a1 .row { grid-template-columns: 1fr 1fr; }
  .a1 .row ul { grid-column: 2; }
  .a1 .row-more { grid-column: 2; }
  .a1 .footer-links { grid-column: 1 / -1; }
  .a1 .footer-contact { grid-column: 1 / -1; }
  .a1 .map { grid-column: 1 / -1; }
  .a1 .areas-side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .a1 .areas-head .lead { grid-column: 1 / 11; }
  .a1 .services-cell { min-height: 0; }
  .a1 .board { grid-template-rows: 30svh 30svh auto; }
  .a1 .deck { flex-direction: column; height: auto; gap: 12px; overflow: visible; }
  .a1 .card { width: 100%; height: auto; min-height: 0; }
  .a1 .card > *, .a1 .card > .wp-block-group__inner-container > * { width: auto; }
  .a1 .card-foot { margin-top: 16px; }
  .a1 .flank-photo { grid-column: 1 / 2; }
  .a1 .cta-tile { grid-column: 2 / 12; }
  .a1 .flank-colour { grid-column: 12 / 13; }
}
@media (max-width: 720px) {
  :root { --pad: 20px; }
  .a1 .hero { height: auto; min-height: 0; }
  .a1 .sheet { grid-template-columns: 1fr; gap: 8px; }
  .a1 .col-mid { display: contents; }
  .a1 .frame.top, .a1 .col-mid > .col, .a1 .col-mid > .wp-block-group__inner-container > .col, .a1 .c1, .a1 .c6 { display: none; }
  .a1 .panel { grid-column: 1 / -1; grid-row: 1; min-height: 40svh; gap: 14px; }
  .a1 .hero-swipe { display: flex; gap: 8px; margin: 8px var(--margin) 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .a1 .hero-swipe::-webkit-scrollbar { display: none; }
  .a1 .hero-swipe .frame { flex: 0 0 84%; scroll-snap-align: start; }
  .a1 .hero-swipe .frame img { aspect-ratio: 4 / 5; }
  .a1 .panel h1 { font-size: 1.625rem; line-height: 1.05; }
  .a1 .panel .wp-block-buttons { width: 100%; }
  .a1 .panel-foot { flex-direction: column; align-items: stretch; }
  .a1 .frame figcaption { padding: 0 8px; }
  .a1 .board { grid-template-columns: 1fr 1fr; grid-template-rows: 46svh auto auto; gap: 6px; }
  .a1 .tile-a { grid-column: 1 / -1; grid-row: 1; }
  .a1 .tile-b { grid-column: 1; grid-row: 2; aspect-ratio: 1; }
  .a1 .tile-c { grid-column: 2; grid-row: 2; aspect-ratio: 1; }
  .a1 .tile-text { grid-column: 1 / -1; grid-row: 3; grid-template-columns: 1fr; padding-block: 28px; gap: 24px; }
  .a1 .facts, .a1 .statement { grid-column: 1; padding-inline: var(--pad); }
  .a1 .statement { padding-inline: var(--pad); }
  .a1 .services-cell { min-height: 70svh; padding: 32px var(--pad) 24px; }
  .a1 .services-foot { flex-direction: column; align-items: flex-start; }
  .a1 .row { grid-template-columns: 1fr; gap: 12px; padding: 28px var(--pad); }
  .a1 .row ul { grid-column: 1; display: flex; flex-wrap: wrap; }
  .a1 .row-more { grid-column: 1; }
  .a1 .layers { grid-template-columns: 1fr; }
  .a1 .layers-head, .a1 .layers-stack { grid-column: 1; }
  .a1 .layers-head { padding: 0 8px; }
  .a1 .layer { grid-template-columns: 1fr; gap: 8px; }
  .a1 .row ul li:not(:last-child)::after { content: ","; margin-right: 0.35em; }
  .a1 .projects-head { padding-inline: var(--pad); flex-direction: column; gap: 8px; }
  .a1 .drag { --h: 62svh; gap: 8px; }
  .a1 .m.tall { aspect-ratio: auto; width: 72vw; }
  .a1 .m.pair { width: 64vw; gap: 8px; }
  .a1 .m.wide { aspect-ratio: auto; width: 88vw; height: 70%; align-self: center; }
  .a1 .areas-head { padding-inline: var(--pad); }
  .a1 .areas-head .lead { grid-column: 1 / -1; }
  .a1 .areas-board { margin-top: 40px; gap: 12px; }
  .a1 .map { aspect-ratio: 4 / 3; overflow: visible; }
  .a1 .map img { aspect-ratio: 4 / 3; }
  .a1 .map figcaption { position: static; width: auto; padding: 16px 20px 8px; }
  .a1 .areas-side { grid-template-columns: 1fr; }
  .a1 .area-tile { aspect-ratio: 3 / 2; }
  .a1 .reasons h2 { padding-inline: var(--pad); margin-bottom: 28px; }
  .a1 .deck { flex-direction: column; height: auto; gap: 12px; overflow: visible; }
  .a1 .card { padding: 24px 20px; }
  .a1 .card > *, .a1 .card > .wp-block-group__inner-container > * { width: auto; }
  .a1 .deck-foot { padding-inline: var(--pad); margin-top: 28px; }
  .a1 .band { grid-template-columns: 1fr; gap: 12px; padding: 32px var(--pad); }
  .a1 .band h3, .a1 .band p { grid-column: 1; }
  .a1 .band p { padding-left: 0; }
  .a1 .band-head { min-height: 30svh; }
  .a1 .cta-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .a1 .cta-tile { grid-column: 1 / -1; grid-row: 1; padding: 28px var(--pad); min-height: 300px; }
  .a1 .cta-tile .wp-block-button__link { width: 100%; }
  .a1 .flank { min-height: 120px; height: 120px; margin: 0; }
  .a1 .flank-photo { grid-column: 1; grid-row: 2; }
  .a1 .flank-colour { grid-column: 2; grid-row: 2; }
  .a1 .mark { height: 22svh; min-height: 160px; }
  .a1 .footer-grid { padding-inline: 8px; }
  .a1 .footer-links { grid-template-columns: 1fr 1fr; }
  .a1 .footer-last { padding-inline: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .a1 .hero .shutter { clip-path: inset(0 0 100% 0); animation: open-down 1100ms var(--ease-in-out) forwards; animation-delay: calc(var(--i, 0) * 60ms + 100ms); }
  .js .a1 .hero .shutter img, .js .a1 .hero .shutter video { transform: scale(1.12); animation: settle 1500ms var(--ease-soft) forwards; animation-delay: calc(var(--i, 0) * 60ms + 100ms); }
  .js .a1 .panel > *, .js .a1 .panel > .wp-block-group__inner-container > * { opacity: 0; transform: translateY(18px); animation: rise 800ms var(--ease-out) forwards; animation-delay: calc(var(--n, 0) * 90ms + 500ms); }
  .js .a1 .panel > :nth-child(2), .js .a1 .panel > .wp-block-group__inner-container > :nth-child(2) { --n: 1; }
  .js .a1 .panel > :nth-child(3), .js .a1 .panel > .wp-block-group__inner-container > :nth-child(3) { --n: 2; }
  .js .a1 .panel > :nth-child(4), .js .a1 .panel > .wp-block-group__inner-container > :nth-child(4) { --n: 3; }
  .js .a1 .panel > :nth-child(5), .js .a1 .panel > .wp-block-group__inner-container > :nth-child(5) { --n: 4; }
  .js .a1 .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .a1 .reveal.is-in { opacity: 1; transform: none; }
  .js .a1 .shutter.reveal { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .a1 .shutter.reveal img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
  .js .a1 .shutter.reveal.is-in { clip-path: inset(0); }
  .js .a1 .shutter.reveal.is-in img { transform: none; }
  .js .a1 .services-rows .row:nth-child(2) { --i: 1; }
  .js .a1 .services-rows .row:nth-child(3) { --i: 2; }
  .js .a1 .services-rows .row:nth-child(4) { --i: 3; }
  .js .a1 .services-rows .row:nth-child(5) { --i: 4; }
  .js .a1 .drag .m { opacity: 0; transform: translateX(40px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .a1 .drag.is-in .m { opacity: 1; transform: none; }
}
@keyframes open-down { to { clip-path: inset(0); } }
@keyframes settle { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .a1 .card { transition: none; }
}
.a1 .nowrap { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .a1 .drag { cursor: grab; }
  .a1 .drag.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
}
@media (hover: hover) and (pointer: fine) {
  .a1 .bar-action:hover { background: var(--accent-strong); }
  .a1 .bar-mark:hover { background: var(--ink-3); }
}
.a1 .ihero { padding: var(--joint) var(--margin) 0; }
.a1 .ihero-board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: var(--joint); height: min(calc(100svh - 72px - var(--joint)), 760px); min-height: 600px; }
.a1 .ihero-name { grid-column: 1 / 7; grid-row: 1; display: flex; align-items: flex-end; padding: var(--pad); background: var(--surface); }
.a1 .ihero-name h1 { font-size: clamp(2.25rem, 1rem + 3.4vw, 4.25rem); line-height: 0.98; max-width: 11em; }
.a1 .ihero-pic { overflow: hidden; min-height: 0; }
.a1 .ihero-pic img, .a1 .ihero-pic video { width: 100%; height: 100%; object-fit: cover; }
.a1 .pic-a { grid-column: 7 / 13; grid-row: 1; }
.a1 .pic-b { grid-column: 1 / 7; grid-row: 2; }
.a1 .ihero-say { padding: var(--pad); }
.a1 .ihero-say p { font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.01em; }
.a1 .say-dark { grid-column: 7 / 10; grid-row: 2; background: var(--ink); color: var(--on-dark); }
.a1 .say-leaf { grid-column: 10 / 13; grid-row: 2; background: var(--leaf-2); }
.a1 .signs { margin-top: var(--section); padding-inline: var(--margin); }
.a1 .signs-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--joint); align-items: start; }
.a1 .signs-photo { grid-column: 1 / 6; position: sticky; top: 12vh; }
.a1 .signs-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: opacity 300ms ease; }
.a1 .signs-photo figcaption { margin-top: 10px; padding-left: var(--pad); font-size: var(--step-small); color: var(--muted); }
.a1 .signs-list { grid-column: 7 / 13; padding-right: 20px; }
.a1 .signs-list h2 { font-size: var(--step-head); }
.a1 .signs-intro { margin-top: 24px; max-width: 46ch; }
.a1 .sign-rows { margin-top: 48px; display: grid; gap: 4px; }
.a1 .sign { transition: background-color 300ms ease; }
.a1 .sign.is-active { background: var(--leaf-1); }
.a1 .sign-name { width: 100%; min-height: 58px; padding: 12px 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; text-align: left; color: var(--muted); font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; transition: color var(--t-hover) ease; }
.a1 .sign-fix { flex: none; font-size: var(--step-small); font-weight: 500; letter-spacing: 0; color: var(--muted); text-align: right; }
.a1 .sign.is-active .sign-name, .a1 .sign.is-active .sign-fix { color: var(--ink); }
.a1 .sign-text { padding: 0 20px 20px; max-width: 46ch; }
.js .a1 .sign:not(.is-active) .sign-text { display: none; }
@media (hover: hover) and (pointer: fine) {
  .a1 .sign:not(.is-active) .sign-name:hover { color: var(--ink); }
}
.a1 .fixes { margin-top: var(--section); padding-inline: var(--margin); }
.a1 .mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(96px, auto); grid-auto-flow: dense; gap: var(--joint); }
.a1 .mt { min-width: 0; padding: var(--pad); overflow: hidden; }
.a1 .mt h3 { font-size: var(--step-lead); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 12px; }
.a1 .mt p { max-width: 40ch; }
.a1 .mt-head { grid-column: 1 / 7; grid-row: 1 / 3; background: var(--surface); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.a1 .mt-head h2 { font-size: var(--step-head); max-width: 12em; }
.a1 .mt-photo { grid-column: 7 / 13; grid-row: 1 / 6; padding: 0; }
.a1 .mt-photo2 { grid-column: 10 / 13; grid-row: 6 / 9; padding: 0; }
.a1 .mt-a { grid-column: 1 / 4; grid-row: 3 / 6; }
.a1 .mt-b { grid-column: 4 / 7; grid-row: 3 / 6; }
.a1 .mt-c { grid-column: 1 / 4; grid-row: 6 / 9; }
.a1 .mt-fig { grid-column: 4 / 7; grid-row: 6 / 9; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.a1 .mt-d { grid-column: 7 / 10; grid-row: 6 / 9; }
.a1 .mt-e { grid-column: 1 / 4; grid-row: 9 / 12; }
.a1 .mt-f { grid-column: 4 / 7; grid-row: 9 / 12; }
.a1 .mt-list { grid-column: 7 / 13; grid-row: 9 / 12; }
.a1 .mt-list ul { font-size: var(--step-lead); font-weight: 500; line-height: 1.3; margin-bottom: 16px; }
.a1 .mt-figure { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.045em; line-height: 0.9; }
.a1 .fill-ink { background: var(--ink); color: var(--on-dark); }
.a1 .fill-ink2 { background: var(--ink-2); color: var(--on-dark); }
.a1 .fill-leaf { background: var(--leaf-1); }
.a1 .fill-leaf2 { background: var(--leaf-2); }
.a1 .fill-surface { background: var(--surface); }
.a1 .fill-accent { background: var(--accent); color: var(--accent-ink); }
.a1 .why { margin-top: var(--section); padding-inline: calc(var(--margin) + var(--pad)); }
.a1 .why h2 { font-size: var(--step-head); }
.a1 .why-lead { margin-top: 28px; font-size: var(--step-lead); line-height: 1.3; max-width: 52ch; }
.a1 .why-cols { margin-top: 72px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.a1 .why-cols strong { font-weight: 600; }
.a1 .cost { margin-top: var(--section); padding-inline: var(--margin); }
.a1 .cost-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--joint); }
.a1 .ct { aspect-ratio: 3 / 2; padding: var(--pad); background: var(--surface); font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; max-width: none; }
.a1 .ct:nth-of-type(odd) { background: var(--leaf-1); }
.a1 .cost-board .ct-head { grid-column: span 2; aspect-ratio: auto; background: var(--ink); color: var(--on-dark); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; font-size: var(--step-body); font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.a1 .ct-head h2 { font-size: var(--step-head); }
.a1 .ct-head p { max-width: 56ch; }
.a1 .flow { margin-top: var(--section); padding-inline: var(--margin); }
.a1 .flow-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--joint); padding-inline: var(--pad); align-items: end; }
.a1 .flow-head h2 { grid-column: 1 / 6; font-size: var(--step-head); }
.a1 .flow-head p { grid-column: 7 / 12; padding-left: 4px; }
.a1 .flow-figure { margin-top: 56px; }
.a1 .flow-svg { width: 100%; height: auto; }
.a1 .flow-tall { display: none; }
.a1 .flow-svg .q1 { fill: var(--leaf-2); }
.a1 .flow-svg .q2 { fill: var(--leaf-3); }
.a1 .flow-svg .q3 { fill: var(--ink); }
.a1 .flow-svg .q4 { fill: var(--ink-3); }
.a1 .flow-steps { list-style: none; margin: 40px 0 0; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.a1 .flow-steps .step h3 { font-size: var(--step-lead); letter-spacing: -0.02em; margin-bottom: 10px; }
.a1 .flow-steps .step p { max-width: 40ch; }
.a1 .qa { margin-top: var(--section); padding-inline: var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--joint); align-items: start; }
.a1 .qa-title { grid-column: 1 / 5; position: sticky; top: 96px; padding-left: var(--pad); font-size: var(--step-head); }
.a1 .qa-list { grid-column: 5 / 13; display: grid; gap: var(--joint); }
.a1 .qa details { background: var(--surface); transition: background-color 300ms ease; }
.a1 .qa details[open] { background: var(--accent); }
.a1 .qa summary { list-style: none; cursor: pointer; min-height: 72px; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-weight: 500; line-height: 1.3; }
.a1 .qa summary::-webkit-details-marker { display: none; }
.a1 .qa summary::after { content: "+"; flex: none; font-size: var(--step-lead); font-weight: 500; line-height: 1; }
.a1 .qa details[open] summary::after { content: "\2212"; }
.a1 .qa details p { padding: 0 24px 24px; max-width: 52ch; }
@media (hover: hover) and (pointer: fine) {
  .a1 .qa details:not([open]):hover { background: var(--leaf-1); }
}
.a1 .cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.a1 .cta-call { font-weight: 600; }
.a1 .cta-related { font-size: var(--step-small); }
.a1 .tabs-sec { margin-top: var(--section); padding-inline: var(--margin); }
.a1 .tabs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-left: var(--pad); }
.a1 .tabs-head h2 { font-size: var(--step-head); }
.a1 .tabs-head .soft { color: var(--muted); }
.a1 .tabs-body { margin-top: 56px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
.a1 .tabs { display: grid; gap: 6px; position: sticky; top: 96px; }
.a1 .tab { min-height: 64px; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface); text-align: left; font-weight: 500; line-height: 1.25; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.a1 .tab:active { transform: scale(0.98); }
.a1 .tab.is-active { background: var(--ink); color: var(--on-dark); }
@media (hover: hover) and (pointer: fine) {
  .a1 .tab:not(.is-active):hover { background: var(--leaf-2); }
}
.a1 .tab-note { padding: 0 0 20px 20px; font-size: var(--step-lead); line-height: 1.3; max-width: 46ch; }
.a1 .band-list { display: grid; gap: 4px; }
.a1 .svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: baseline; min-height: 76px; padding: 18px 20px; background: var(--leaf-1); }
.a1 .svc.alt { background: var(--leaf-2); }
.a1 .svc[hidden] { display: none; }
.a1 .svc-name { font-weight: 600; }
.a1 .sheet-sec { margin-top: var(--section); }
.a1 .sheet-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--joint); padding: 0 calc(var(--margin) + var(--pad)); align-items: end; }
.a1 .sheet-head h2 { grid-column: 1 / 8; font-size: var(--step-head); }
.a1 .sheet-head p { grid-column: 9 / 13; max-width: 34ch; }
.a1 .masonry { margin-top: 56px; padding-inline: var(--margin); columns: 6; column-gap: 4px; }
.a1 .masonry figure { break-inside: avoid; margin-bottom: 14px; }
.a1 .masonry img { width: 100%; height: auto; }
.a1 .masonry figcaption { margin-top: 6px; padding-inline: 8px; font-size: var(--step-small); }
.a1 .area-tile.hoods { list-style: none; margin: 0; aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; align-content: end; gap: 6px 16px; font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; padding: 24px 20px; }
@media (max-width: 1080px) {
  .a1 .bar { grid-template-columns: 60px minmax(0, 1fr); }
  .a1 .bar-action { grid-column: 2; grid-row: 1; }
  .a1 .bar-links { grid-column: 1 / -1; grid-row: 2; min-height: 52px; padding: 10px 20px; gap: 6px 24px; }
  .a1 .ihero-board { height: auto; grid-template-rows: auto auto auto; min-height: 0; }
  .a1 .ihero-name { grid-column: 1 / -1; min-height: 34svh; }
  .a1 .pic-a { grid-column: 1 / 7; grid-row: 2; aspect-ratio: 3 / 4; }
  .a1 .pic-b { grid-column: 7 / 13; grid-row: 2; aspect-ratio: 3 / 4; }
  .a1 .say-dark { grid-column: 1 / 7; grid-row: 3; }
  .a1 .say-leaf { grid-column: 7 / 13; grid-row: 3; }
  .a1 .signs-list { grid-column: 6 / 13; }
  .a1 .mosaic > .mt, .a1 .mosaic > .wp-block-group__inner-container > .mt { grid-row: auto; }
  .a1 .mosaic > .mt-head, .a1 .mosaic > .wp-block-group__inner-container > .mt-head, .a1 .mosaic > .mt-photo, .a1 .mosaic > .wp-block-group__inner-container > .mt-photo, .a1 .mosaic > .mt-list, .a1 .mosaic > .wp-block-group__inner-container > .mt-list { grid-column: 1 / -1; }
  .a1 .mosaic > .mt-photo, .a1 .mosaic > .wp-block-group__inner-container > .mt-photo { aspect-ratio: 16 / 10; }
  .a1 .mosaic > .mt-a, .a1 .mosaic > .wp-block-group__inner-container > .mt-a { grid-column: 1 / 8; }
  .a1 .mosaic > .mt-b, .a1 .mosaic > .wp-block-group__inner-container > .mt-b { grid-column: 8 / 13; }
  .a1 .mosaic > .mt-c, .a1 .mosaic > .wp-block-group__inner-container > .mt-c { grid-column: 1 / 6; }
  .a1 .mosaic > .mt-fig, .a1 .mosaic > .wp-block-group__inner-container > .mt-fig { grid-column: 6 / 13; }
  .a1 .mosaic > .mt-d, .a1 .mosaic > .wp-block-group__inner-container > .mt-d { grid-column: 1 / 8; }
  .a1 .mosaic > .mt-photo2, .a1 .mosaic > .wp-block-group__inner-container > .mt-photo2 { grid-column: 8 / 13; }
  .a1 .mosaic > .mt-e, .a1 .mosaic > .wp-block-group__inner-container > .mt-e { grid-column: 1 / 6; }
  .a1 .mosaic > .mt-f, .a1 .mosaic > .wp-block-group__inner-container > .mt-f { grid-column: 6 / 13; }
  .a1 .why-cols { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .a1 .cost-board { grid-template-columns: 1fr 1fr; }
  .a1 .ct-head { grid-column: 1 / -1; }
  .a1 .qa-title { grid-column: 1 / -1; position: static; }
  .a1 .qa-list { grid-column: 1 / -1; }
  .a1 .tabs-body { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
  .a1 .svc { grid-template-columns: 1fr; gap: 6px; }
  .a1 .masonry { columns: 4; }
  .a1 .sheet-head h2, .a1 .sheet-head p { grid-column: 1 / -1; }
  .a1 .sheet-head p { margin-top: 16px; }
  .a1 .flow-head h2 { grid-column: 1 / 7; }
  .a1 .flow-head p { grid-column: 7 / 13; }
}
@media (max-width: 720px) {
  .a1 .bar { grid-template-columns: 60px minmax(0, 1fr); }
  .a1 .bar-action { grid-column: 2; grid-row: 1; }
  .a1 .bar-links { grid-column: 1 / -1; grid-row: 2; min-height: 52px; padding: 10px 20px; gap: 6px 20px; }
  .a1 .ihero-board { grid-template-columns: 1fr 1fr; gap: 6px; }
  .a1 .ihero-name { grid-column: 1 / -1; grid-row: 1; min-height: 30svh; }
  .a1 .ihero-name h1 { font-size: 2.25rem; }
  .a1 .pic-a { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 4 / 3; }
  .a1 .say-dark { grid-column: 1; grid-row: 3; }
  .a1 .say-leaf { grid-column: 2; grid-row: 3; }
  .a1 .ihero-say { padding: 16px; }
  .a1 .ihero-say p { font-size: var(--step-body); }
  .a1 .pic-b { grid-column: 1 / -1; grid-row: 4; aspect-ratio: 4 / 3; }
  .a1 .signs-grid { display: block; }
  .a1 .signs-photo { position: sticky; top: 0; z-index: 1; margin-inline: calc(var(--margin) * -1); padding: 0 var(--margin) 8px; background: var(--bg); }
  .a1 .signs-photo img { aspect-ratio: 4 / 3; max-height: 38svh; }
  .a1 .signs-photo figcaption { margin-top: 6px; }
  .a1 .signs-list { padding-right: 0; margin-top: 24px; }
  .a1 .signs-list h2, .a1 .signs-intro { padding-left: 8px; }
  .a1 .sign-name { flex-direction: column; gap: 4px; min-height: 56px; }
  .a1 .sign-fix { text-align: left; }
  .a1 .mosaic { grid-template-columns: 1fr 1fr; gap: 6px; }
  .a1 .mosaic > .mt, .a1 .mosaic > .wp-block-group__inner-container > .mt, .a1 .mosaic > .mt-head, .a1 .mosaic > .wp-block-group__inner-container > .mt-head, .a1 .mosaic > .mt-photo, .a1 .mosaic > .wp-block-group__inner-container > .mt-photo, .a1 .mosaic > .mt-list, .a1 .mosaic > .wp-block-group__inner-container > .mt-list { grid-column: 1 / -1; grid-row: auto; }
  .a1 .mosaic > .mt-photo, .a1 .mosaic > .wp-block-group__inner-container > .mt-photo { aspect-ratio: 4 / 3; }
  .a1 .mosaic > .mt-a, .a1 .mosaic > .wp-block-group__inner-container > .mt-a, .a1 .mosaic > .mt-b, .a1 .mosaic > .wp-block-group__inner-container > .mt-b, .a1 .mosaic > .mt-c, .a1 .mosaic > .wp-block-group__inner-container > .mt-c, .a1 .mosaic > .mt-d, .a1 .mosaic > .wp-block-group__inner-container > .mt-d, .a1 .mosaic > .mt-e, .a1 .mosaic > .wp-block-group__inner-container > .mt-e, .a1 .mosaic > .mt-f, .a1 .mosaic > .wp-block-group__inner-container > .mt-f { grid-column: 1 / -1; }
  .a1 .mosaic > .mt-fig, .a1 .mosaic > .wp-block-group__inner-container > .mt-fig { grid-column: 1; }
  .a1 .mosaic > .mt-photo2, .a1 .mosaic > .wp-block-group__inner-container > .mt-photo2 { grid-column: 2; }
  .a1 .mt { padding: var(--pad); }
  .a1 .why { padding-inline: calc(var(--margin) + 8px); }
  .a1 .why-cols { grid-template-columns: 1fr; margin-top: 40px; }
  .a1 .cost-board { gap: 6px; }
  .a1 .ct { aspect-ratio: auto; min-height: 120px; padding: 16px; font-size: var(--step-body); }
  .a1 .ct-head { padding: var(--pad); }
  .a1 .flow-head { grid-template-columns: 1fr; padding-inline: 8px; }
  .a1 .flow-head h2, .a1 .flow-head p { grid-column: 1; }
  .a1 .flow-head p { margin-top: 16px; padding-left: 0; }
  .a1 .flow-wide { display: none; }
  .a1 .flow-tall { display: block; max-width: 360px; }
  .a1 .flow-steps { grid-template-columns: 1fr; padding-inline: 8px; }
  .a1 .qa { grid-template-columns: 1fr; }
  .a1 .qa-title { padding-left: 8px; }
  .a1 .qa-list { gap: 6px; }
  .a1 .qa summary { min-height: 64px; padding: 16px var(--pad); }
  .a1 .qa details p { padding: 0 var(--pad) 20px; }
  .a1 .tabs-head { flex-direction: column; align-items: stretch; padding-left: 8px; }
  .a1 .tabs-body { grid-template-columns: 1fr; margin-top: 28px; gap: 16px; }
  .a1 .tabs { display: flex; flex-wrap: wrap; position: static; }
  .a1 .tab { flex: 1 1 auto; min-height: 48px; }
  .a1 .tab-note { padding-left: 8px; font-size: var(--step-body); }
  .a1 .sheet-head { padding-inline: calc(var(--margin) + 8px); }
  .a1 .masonry { columns: 3; padding-inline: 10px; }
  .a1 .area-tile.hoods { font-size: var(--step-body); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .a1 .rise { opacity: 0; transform: translateY(18px); animation: rise 800ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 300ms); }
  .js .a1 .ihero .shutter { clip-path: inset(0 0 100% 0); animation: open-down 1100ms var(--ease-in-out) forwards; animation-delay: calc(var(--i, 0) * 120ms + 100ms); }
  .js .a1 .ihero .shutter img, .js .a1 .ihero .shutter video { transform: scale(1.12); animation: settle 1500ms var(--ease-soft) forwards; animation-delay: calc(var(--i, 0) * 120ms + 100ms); }
  .js .a1 .flow-figure.reveal { opacity: 1; transform: none; }
  .js .a1 .flow-svg rect { opacity: 0; transform: translateX(-24px); transform-box: fill-box; transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--d) * 9ms); }
  .js .a1 .flow-tall rect { transform: translateY(-16px); }
  .js .a1 .flow-figure.is-in rect { opacity: 1; transform: none; }
  .js .a1 .masonry figure { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
  .js .a1 .masonry.is-in figure { opacity: 1; transform: none; }
  .js .a1 .svc { transition: opacity 300ms ease, transform 400ms var(--ease-out); }
  .js .a1 .svc.is-entering { opacity: 0; transform: translateY(10px); }
}

/* ===== Kadence integration: header, footer, page frame ===== */

/* Footer: the A-1 pattern sits in Footer 1; keep it left-aligned and full width. */
.site-footer .a1 { text-align: left; }
.site-footer .a1 .footer { margin-top: 0; padding-top: 0; background: transparent; }
.site-footer .footer-widget-area-inner, .site-footer .footer-widget-area { text-align: left; }
.site-footer .site-bottom-footer-inner-wrap, .site-footer .footer-html { text-align: left; }
.site-footer .site-middle-footer-inner-wrap { padding-top: 12px; }
.site-footer .footer-html-inner p { margin: 0; max-width: 64ch; }

/* Header: three tiles on the board's 8px joints and 12px margins:
   the name on bottle green, the menu on the grey surface, the call button in yellow. */
#masthead .site-header-row-container-inner { background: var(--bg); }
#masthead .site-main-header-wrap .site-container { max-width: none; padding: 12px var(--margin) 0; }
#masthead .site-main-header-inner-wrap { gap: var(--joint); min-height: 60px; align-items: stretch; }
#masthead .site-header-section-left { flex: none; }
#masthead .site-header-section-right { flex: 1 1 auto; display: flex; gap: var(--joint); align-items: stretch; justify-content: flex-end; }
#masthead .site-header-section > .site-header-item { display: flex; align-items: stretch; margin: 0; }
#masthead .site-branding { display: flex; align-items: flex-end; min-height: 60px; padding: 10px 16px; background: var(--ink); }
#masthead .site-branding a.brand { text-decoration: none; }
#masthead .site-branding .site-title { margin: 0; letter-spacing: -0.02em; }
#masthead .site-header-item-main-navigation { flex: 1 1 auto; }
#masthead .site-header-item-main-navigation .main-navigation { display: flex; align-items: center; width: 100%; padding: 0 24px; background: var(--surface); }
#masthead .main-navigation .primary-menu-container > ul { flex-wrap: nowrap; }
#masthead .main-navigation .primary-menu-container > ul > li > a { white-space: nowrap; }
#masthead .main-navigation .primary-menu-container > ul > li > a { padding-block: 0; min-height: 60px; display: flex; align-items: center; }
#masthead .main-navigation .primary-menu-container > ul > li > a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
#masthead .main-navigation .primary-menu-container > ul > li.current-menu-item > a,
#masthead .main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
#masthead .header-navigation .sub-menu { background: var(--ink); box-shadow: 0 12px 24px rgb(13 42 28 / 0.18); }
#masthead .header-navigation .sub-menu a { color: var(--on-dark); }
#masthead .header-button, #masthead .mobile-header-button { display: flex; align-items: center; min-height: 60px; padding: 0 22px; border-radius: 0; font-weight: 600; box-shadow: none; white-space: nowrap; }
#masthead .header-button-wrap, #masthead .header-button-inner-wrap, #masthead .mobile-header-button-wrap, #masthead .mobile-header-button-inner-wrap { display: flex; align-items: stretch; }
#masthead .menu-toggle-open { min-height: 60px; min-width: 60px; justify-content: center; background: var(--surface); border-radius: 0; }
#masthead .site-header-wrap { box-shadow: none; }

/* Tablet: the menu takes its own row under the name and the call button. */
@media (max-width: 1024px) {
  #masthead .site-mobile-header-wrap .site-container { padding: 12px var(--margin) 0; }
  #masthead .site-mobile-header-wrap .site-header-row { gap: var(--joint); }
  #masthead .site-mobile-header-wrap .site-header-section-left { flex: 1 1 auto; }
  #masthead .site-mobile-header-wrap .site-branding { width: 100%; }
}
/* Phones: the full company name fits on two lines beside the badge. */
@media (max-width: 480px) {
  #masthead .site-mobile-header-wrap .site-title { font-size: 0.9375rem; line-height: 1.15; }
}
/* Smallest phones (320–360px): a tighter name and call button so the menu button stays on screen. */
@media (max-width: 360px) {
  #masthead .site-mobile-header-wrap .site-title { font-size: 0.8125rem; }
  #masthead .site-mobile-header-wrap .site-branding img, #masthead .site-mobile-header-wrap .site-branding a.brand::before { width: 34px; height: 34px; }
  #masthead .mobile-header-button { padding: 0 12px; }
}

/* The drawer menu on phones, in the page's green and yellow. */
#mobile-drawer .drawer-inner { background: var(--ink); }
#mobile-drawer .mobile-navigation a { font-weight: 500; font-size: 1.125rem; min-height: 52px; display: flex; align-items: center; }
/* Under the menu: call and estimate as big thumb buttons, then the hours. */
#mobile-drawer .mobile-html { margin: 0; padding: 24px 0 0; }
#mobile-drawer .drawer-actions { display: grid; gap: 8px; }
#mobile-drawer .drawer-actions a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; font-size: 1.0625rem; font-weight: 600; text-decoration: none; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
#mobile-drawer .drawer-actions a:active { transform: scale(0.98); }
#mobile-drawer .drawer-call { background: var(--accent); color: var(--accent-ink); }
#mobile-drawer .drawer-estimate { background: var(--ink-3); color: var(--on-dark); }
#mobile-drawer .drawer-hours { margin: 14px 0 0; color: var(--leaf-2); font-size: 0.9375rem; line-height: 1.5; }
#mobile-drawer :is(a, button):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Sticky header: the call button stays in reach while reading. --stick is the header's height, so
   pinned parts of the pages and jump links (#estimate) stop below it instead of under it. */
:root { --stick: 72px; }
@media (max-width: 1024px) { :root { --stick: 76px; } }
html { scroll-padding-top: calc(var(--stick) + 16px); }
/* The header hides while scrolling down (a1.js sets .header-away); pinned parts then move up to the top. */
html.header-away { --stick: 0px; }
.a1 :is(.reasons-stage, .qa-title, .tabs, .signs-photo, .services-cell.compact) { transition: top 300ms var(--ease-out); }
#masthead .kadence-sticky-header { background: var(--bg); transition: box-shadow var(--t-hover) ease; }
#masthead .kadence-sticky-header.item-is-stuck { box-shadow: 0 1px 0 rgb(13 42 28 / 0.12), 0 8px 20px -14px rgb(13 42 28 / 0.35); }
.a1 .reasons.is-pinned .reasons-stage { top: var(--stick); height: calc(100svh - var(--stick)); }
.a1 .qa-title, .a1 .tabs { top: calc(var(--stick) + 24px); }
.a1 .signs-photo { top: max(12vh, calc(var(--stick) + 24px)); }
@media (min-width: 1081px) { .a1 .services-cell.compact { top: calc(var(--stick) + 24px); } }
@media (max-width: 720px) { .a1 .signs-photo { top: var(--stick); } }

/* Header links: the underline fades in, and the name tile is a full-height tap target. */
#masthead .main-navigation .primary-menu-container > ul > li > a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-hover) ease; }
#masthead .main-navigation .primary-menu-container > ul > li > a:hover { text-decoration-color: currentColor; }
#masthead .main-navigation .primary-menu-container > ul > li:is(.current-menu-item, .current-menu-ancestor) > a { text-decoration-color: currentColor; }
#masthead .header-button, #masthead .mobile-header-button { transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
#masthead .header-button:active, #masthead .mobile-header-button:active { transform: scale(0.97); }
#masthead .site-branding a.brand { min-height: 44px; }
#masthead :is(a, button):focus-visible { outline: 3px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 6px var(--accent); }

/* Google reviews: "Read more" gets a thumb-sized hit area. */
.a1 .greviews .ti-widget .ti-read-more { padding-block: 12px; margin-block: -12px; }

/* Outlined block buttons on pages not yet rebuilt: Kadence colours their text and border with the
   button fill, which is now yellow and unreadable on the light page. Use the A-1 green instead. */
/* Kadence also colours visited outline links with the fill (.is-style-outline … :not(.has-text-color):visited), so cover both states. */
body .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):is(:link, :visited) { color: #0d2a1c; border-color: #0d2a1c; background: transparent; }
@media (hover: hover) and (pointer: fine) {
  body .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):is(:link, :visited):hover { color: #0d2a1c; border-color: #f6e016; background: #f6e016; }
}

/* Header: Steve's badge, white, in front of the name in the green tile. */
#masthead .site-branding { align-items: center; padding-block: 6px; }
#masthead .site-branding a.brand { display: flex; align-items: center; gap: 12px; }
#masthead .site-branding a.brand::before { content: ""; flex: none; width: 46px; height: 46px; background: url("brand/a1-badge-white.svg") center / contain no-repeat; }
@media (max-width: 1024px) { #masthead .site-branding a.brand::before { width: 40px; height: 40px; } #masthead .site-branding a.brand { gap: 10px; } }


/* ===== The warm look ===== */
/* Albert Sans draws "-" nearly as long as a dash; show hyphens (on-site, A-1, phone numbers) in the
   device's plain sans font instead (owner's request, 2026-11-02). */
@font-face { font-family: "A1 Hyphen"; src: local("Arial"), local("Helvetica"), local("Roboto"); unicode-range: U+002D; }
:root { --font: "A1 Hyphen", "Albert Sans", system-ui, sans-serif; }
body, #masthead, #mobile-drawer, .site-title { font-family: var(--font); }
/* Sand and stone grounds instead of grey, rounded tiles, photos and controls, and a soft shadow under
   the tiles. Chosen by the owner on 2026-10-27 over the square "classic" look; it overrides the tokens and
   corners of the scoped design above. */

:root {
  --bg: #f6f1e7;
  --surface: #ebe3d3;
  --muted: #6b675c;
  --on-dark: #f6f1e7;
  --leaf-1: #e3e7d7;
  --leaf-2: #d4dcc6;
  --leaf-3: #c3cfb5;
  --r: 14px;
  --r-control: 10px;
  --lift: 0 1px 2px rgb(52 40 18 / 0.06), 0 12px 28px -18px rgb(52 40 18 / 0.32);
  --lift-hover: 0 2px 4px rgb(52 40 18 / 0.08), 0 18px 36px -18px rgb(52 40 18 / 0.4);
}
body,
.site,
.content-bg,
#masthead .kadence-sticky-header.item-is-fixed > .site-header-row-container-inner { background-color: var(--bg); }

/* Tiles and cards: rounded, lifted off the sand. */
.a1 :is(.mt, .row, .panel, .tile, .card, .col, .area-tile, .cta-tile, .services-cell, .services-rows, .band,
  .ihero-name, .ihero-say, .sign, .svc, .tab, .qa details, .flank, .ct, p.ct, .fact) {
  border-radius: var(--r);
  box-shadow: var(--lift);
}
/* A tile's own inner parts stay square; only the outer card is rounded. */
.a1 :is(.services-rows .row, .mt .mt, .layer) { box-shadow: none; }
.a1 .services-rows { overflow: hidden; }
.a1 .services-rows .row { border-radius: 0; }

/* Photos and video: rounded, the caption inside the corner. */
.a1 :is(figure.wp-block-image, figure.wp-block-video, .ihero-pic, .map) { border-radius: var(--r); overflow: hidden; }
.a1 :is(figure.wp-block-image, figure.wp-block-video) img,
.a1 :is(figure.wp-block-image, figure.wp-block-video) video { border-radius: 0; }
/* The photo is zoomed during its reveal; keep the caption painted above it inside the rounded frame. */
.a1 figure .wp-element-caption { position: relative; z-index: 1; flex: none; }
.a1 .frame img { min-height: 0; }
.a1 .layers > :not(.layers-head) { border-radius: var(--r); overflow: hidden; box-shadow: var(--lift); }

/* Controls: buttons, fields, the video button. */
.a1 :is(.wp-block-button__link, .kt-button, .kb-adv-form-submit-button, .video-toggle),
.a1 .cta-form .kb-form-basic-style :is(input:not([type=hidden]), select, textarea) { border-radius: var(--r-control); }

/* Header: the three tiles rounded. */
#masthead :is(.site-branding, .main-navigation, .header-button, .mobile-header-button, .menu-toggle-open) { border-radius: var(--r-control); }
#masthead .header-navigation .sub-menu { border-radius: var(--r-control); overflow: hidden; }
#mobile-drawer .drawer-actions a { border-radius: var(--r-control); }

/* Google review cards. */
.a1 .greviews .ti-widget .ti-review-item > .ti-inner { border-radius: var(--r) !important; box-shadow: var(--lift) !important; }
.a1 .greviews .ti-widget.ti-goog .ti-load-more-reviews-container .ti-load-more-reviews-button { border-radius: var(--r-control) !important; }

/* Phones: the photo rows show one whole photo per swipe (no cut-off neighbour), with a pager under them. */
@media (max-width: 720px) {
  .a1 .hero-swipe .frame { flex: 0 0 100%; }
  /* The gap is twice the page margin, so the next photo starts beyond the screen edge. */
  .a1 .drag { scroll-snap-type: x mandatory; gap: calc(var(--margin) * 2); }
  .a1 .drag :is(.m, .m.tall, .m.pair, .m.wide):not(.m .m) { flex: 0 0 100%; width: 100%; height: 100%; aspect-ratio: auto; align-self: stretch; scroll-snap-align: center; }
}
.a1 .pager { display: none; }
@media (max-width: 720px) {
  .a1 .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px var(--margin) 0; }
  .a1 .pager-btn, .a1 .pager-btn:hover, .a1 .pager-btn:focus { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1.25rem; line-height: 1; transition: background-color var(--t-hover) ease, opacity var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
  .a1 .pager-btn:active { transform: scale(0.94); }
  .a1 .pager-btn[disabled] { opacity: 0.35; cursor: default; }
  .a1 .pager-count { font-size: var(--step-small); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
  .a1 .pager-dots { display: flex; gap: 6px; }
  .a1 .pager-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--leaf-3); transition: background-color var(--t-hover) ease, width var(--t-hover) ease; }
  .a1 .pager-dots span.is-on { width: 18px; border-radius: 3px; background: var(--ink); }
  .a1 .pager-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
}

/* Videos: the pause button stays out of the way. A click or tap on the video pauses it and shows the
   button for two seconds; it stays while the video is paused, and shows for keyboard users on focus. */
.a1 .video-toggle, .a1 .video-toggle:focus { opacity: 0; background: rgb(13 42 28 / 0.55); transition: opacity 200ms ease, background-color var(--t-hover) ease; }
.a1 .video-toggle:focus-visible, .a1 .video-toggle.is-paused, .a1 .show-toggle > .video-toggle { opacity: 1; }
.a1 video { cursor: pointer; }

/* Hover: clickable cards rise a little. */
.a1 :is(.row.is-live, .area-tile, .tab:not(.is-active), .qa details) { transition: transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover) ease, background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .a1 :is(.row.is-live, .area-tile:has(a), .tab:not(.is-active), .qa details:not([open])):hover { transform: translateY(-2px); box-shadow: var(--lift-hover); }
}
.a1 .row.is-live:active { transform: translateY(0) scale(0.995); }
@media (prefers-reduced-motion: reduce) {
  .a1 :is(.row.is-live, .area-tile, .tab, .qa details) { transition: none; }
  .a1 :is(.row.is-live, .area-tile, .tab, .qa details):hover { transform: none; }
}

/* Home, light green "What we build" cell: a job photo faded into the green behind the words. */
.a1 .services-cell.has-photo { position: relative; overflow: hidden; isolation: isolate; }
.a1 .services-cell.has-photo .cell-photo { position: absolute; inset: 0; z-index: -1; margin: 0; border-radius: 0; box-shadow: none; }
/* The photo shows clearly in the middle; the green deepens only behind the heading and the text. */
.a1 .services-cell.has-photo .cell-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.a1 .services-cell.has-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(227 231 215 / 0.95) 0%, rgb(227 231 215 / 0.6) 16%, rgb(227 231 215 / 0.1) 38%, rgb(227 231 215 / 0.1) 62%, rgb(227 231 215 / 0.75) 82%, rgb(227 231 215 / 0.95) 100%); }
/* Phones: the text starts about two-thirds down, so the green deepens earlier. */
@media (max-width: 720px) {
  .a1 .services-cell.has-photo::after { background: linear-gradient(180deg, rgb(227 231 215 / 0.95) 0%, rgb(227 231 215 / 0.55) 14%, rgb(227 231 215 / 0.1) 30%, rgb(227 231 215 / 0.15) 50%, rgb(227 231 215 / 0.85) 64%, rgb(227 231 215 / 0.92) 100%); }
}

/* Home, "Why homeowners choose A-1": six tiles, all visible at once (replaces the scrolling deck). */
.a1 .choose { margin-top: var(--section); padding: 0 var(--margin); }
.a1 .choose h2 { font-size: var(--step-head); padding-left: var(--pad); margin-bottom: 32px; }
.a1 .choose-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--joint); }
.a1 .choose .card { width: auto; height: auto; min-height: 260px; flex: initial; padding: 28px var(--pad); }
.a1 .choose .card > * { width: auto; max-width: none; }
.a1 .choose .card.tone-call { background: var(--accent); color: var(--accent-ink); }
.a1 .choose .card.tone-call h3 { font-size: var(--step-lead); line-height: 1.1; letter-spacing: -0.02em; }
@media (max-width: 1080px) { .a1 .choose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .a1 .choose { padding: 0 var(--margin); }
  .a1 .choose h2 { padding-left: 8px; margin-bottom: 20px; }
  .a1 .choose-grid { grid-template-columns: minmax(0, 1fr); }
  .a1 .choose .card { min-height: 0; padding: 22px 20px; gap: 12px; }
}

/* Drainage, "Our drainage installation process": three photo cards (replaces the dot diagram). */
.a1 .flow-cards { margin-top: 48px; align-items: stretch; }
.a1 .flow-cards .step { display: flex; flex-direction: column; gap: 12px; padding: 0 0 28px; background: var(--surface); border-radius: var(--r); box-shadow: var(--lift); overflow: hidden; }
.a1 .flow-cards .step > :not(.step-photo) { margin-inline: 24px; }
.a1 .flow-cards .step-photo { margin: 0 0 6px; aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; }
.a1 .flow-cards .step-photo img { width: 100%; height: 100%; object-fit: cover; }
.a1 .flow-cards .step-num { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-top: -40px; position: relative; z-index: 1; border-radius: 50%; background: var(--ink); color: var(--on-dark); font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px var(--surface); }
.a1 .flow-cards .step h3 { margin-bottom: 0; }
@media (max-width: 1080px) { .a1 .flow-cards { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }

/* Mosaic: a figure tile can carry its own small heading. */
.a1 .mt-fig:has(h3) { justify-content: flex-start; }
.a1 .mt-fig h3 { margin-top: auto; font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.1; }

/* Footer: the A-1 logo alone, without the letter tiles (owner's request). */
.a1 .mark.mark-logo { height: clamp(120px, 16svh, 180px); }
.a1 .mark.mark-logo .b4 { flex: 1; height: 100%; border-radius: var(--r); background-size: auto 78%; }

/* Estimate form: the thank-you pop-up. */
dialog.a1-thanks { max-width: min(480px, calc(100vw - 32px)); padding: 32px 28px 24px; border: 0; border-radius: var(--r, 14px); background: #f6f1e7; color: #0d2a1c; box-shadow: 0 24px 60px -20px rgb(13 42 28 / 0.5); font-family: var(--font); }
dialog.a1-thanks::backdrop { background: rgb(13 42 28 / 0.55); }
dialog.a1-thanks h2 { margin: 0 0 12px; font-size: 1.5rem; letter-spacing: -0.02em; }
dialog.a1-thanks p { margin: 0 0 24px; font-size: 1.0625rem; line-height: 1.5; }
dialog.a1-thanks .a1-thanks-close { min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--r-control, 10px); background: #0d2a1c; color: #f6f1e7; font: inherit; font-weight: 600; cursor: pointer; }
dialog.a1-thanks .a1-thanks-close:focus-visible { outline: 3px solid #f6e016; outline-offset: 2px; }


/* ===== Home, calmer (trial page /home-calm) ===== */
/* One ground (sand), one ink (bottle green), yellow only on buttons; cards in one size; no scroll effects. */
.a1-calm { --c-gut: clamp(16px, 4vw, 48px); padding-bottom: clamp(56px, 8vw, 104px); }
.a1-calm .c-wrap { width: min(1200px, 100% - 2 * var(--c-gut)); margin-inline: auto; }
.a1-calm .c-sec { padding-top: clamp(64px, 9vw, 120px); }
.a1-calm h1, .a1-calm h2, .a1-calm h3 { color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.a1-calm h2 { font-size: clamp(2rem, 1.45rem + 1.9vw, 2.9rem); line-height: 1.08; font-weight: 600; }
.a1-calm h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 600; }
.a1-calm p { margin: 0; }
.a1-calm .c-lead { font-size: var(--step-lead); line-height: 1.5; max-width: 60ch; }
.a1-calm .c-link a, .a1-calm .c-call a, .a1-calm .c-est-call a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }
.a1-calm figure { margin: 0; }
.a1-calm .is-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Hero: one photo of a finished job in a rounded panel; the words sit on a soft, misty left side
   (a blurred, sand-tinted veil that fades out towards the middle), so the right side stays sharp. */
.a1-calm .c-cine { position: relative; display: flex; align-items: center; min-height: clamp(560px, 84svh, 840px); margin: 8px clamp(8px, 1.6vw, 24px) 0; border-radius: 22px; overflow: hidden; background: var(--surface); isolation: isolate; }
.a1-calm figure.c-cine-photo { position: absolute; inset: 0; z-index: -2; margin: 0; border-radius: 0; }
.a1-calm .c-cine-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 28%; transform-origin: 70% 40%; }
.a1-calm .c-cine::before, .a1-calm .c-cine::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.a1-calm .c-cine::before { -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 62%); mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 62%); }
.a1-calm .c-cine::after { background: linear-gradient(90deg, rgb(246 241 231 / 0.92) 0%, rgb(246 241 231 / 0.84) 36%, rgb(246 241 231 / 0.4) 54%, rgb(246 241 231 / 0) 70%); }
.a1-calm .c-cine-text { padding-block: clamp(64px, 10vw, 120px); }
.a1-calm .c-cine h1 { color: var(--ink); font-size: clamp(2.8rem, 1.4rem + 5vw, 5.75rem); line-height: 0.98; font-weight: 600; letter-spacing: -0.025em; max-width: 11ch; text-wrap: balance; }
.a1-calm .c-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.a1-calm .c-line > span { display: inline-block; }
.a1-calm .c-cine-lead { margin-top: 26px; max-width: 38ch; color: var(--ink); }
.a1-calm .c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 36px; }
.a1-calm .c-actions .wp-block-buttons { margin: 0; display: flex; flex-wrap: wrap; gap: 12px 14px; }
.a1-calm .c-actions .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; background: var(--accent); color: var(--accent-ink); border-radius: var(--r-control); font-weight: 600; font-size: 1.0625rem; text-decoration: none; box-shadow: 0 0 0 0 rgb(246 224 22 / 0); transition: transform 180ms var(--ease-out), box-shadow 220ms ease, background-color 180ms ease; }
.a1-calm .c-arrow { display: inline-block; transition: transform 220ms var(--ease-out); }
@media (hover: hover) {
  .a1-calm .c-actions .wp-block-button__link:hover { background: var(--accent-strong); transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgb(246 224 22 / 0.55); }
  .a1-calm .c-actions .wp-block-button__link:hover .c-arrow { transform: translateX(4px); }
}
.a1-calm .c-actions .wp-block-button__link:active { transform: translateY(0) scale(0.98); }
.a1-calm .c-actions .wp-block-button__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* The second button: outlined, on a frosted ground; it fills with green on hover. */
.a1-calm .c-actions .c-btn-ghost .wp-block-button__link { background: rgb(255 255 255 / 0.4); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (hover: hover) { .a1-calm .c-actions .c-btn-ghost .wp-block-button__link:hover { background: var(--ink); color: var(--on-dark); box-shadow: inset 0 0 0 1.5px var(--ink), 0 12px 28px -12px rgb(13 42 28 / 0.5); } }
/* Motion only with script and without reduced motion: the photo settles and drifts, the lines rise in turn,
   then the sentence and the buttons. Everything ends in its normal place. */
@media (prefers-reduced-motion: no-preference) {
  .js .a1-calm .c-cine-photo img { animation: c-settle 1.6s var(--ease-out) both, c-drift 28s ease-in-out 1.6s infinite alternate; }
  .js .a1-calm .c-line > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-calm .c-line:nth-child(1) > span { animation-delay: 0.25s; }
  .js .a1-calm .c-line:nth-child(2) > span { animation-delay: 0.4s; }
  .js .a1-calm .c-line:nth-child(3) > span { animation-delay: 0.55s; }
  .js .a1-calm .c-cine-lead { animation: c-up 0.8s var(--ease-out) 0.85s both; }
  .js .a1-calm .c-cine-actions { animation: c-up 0.8s var(--ease-out) 1.05s both; }
}
@keyframes c-settle { from { opacity: 0.4; transform: scale(1.1); } to { opacity: 1; transform: scale(1.04); } }
@keyframes c-drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.2%, -0.8%, 0); } }
@keyframes c-rise { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes c-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Before and after: its own section under the hero. */
.a1-calm .c-ba .c-compare { aspect-ratio: 16 / 9; max-height: 80svh; }

/* The four facts, one quiet row. */
.a1-calm .c-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 6vw, 72px); padding: 28px clamp(20px, 3vw, 36px); background: var(--surface); border-radius: var(--r); }
.a1-calm .c-fact strong { display: block; font-size: 1.0625rem; }
.a1-calm .c-fact span { display: block; color: var(--muted); font-size: 0.9375rem; margin-top: 2px; }

/* Section heads. */
.a1-calm .c-head { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-calm .c-head-row { grid-template-columns: 1fr auto; align-items: end; }

/* Service cards: one size, photo on top, the whole card is the link. */
.a1-calm .c-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.a1-calm .c-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 0 24px; background: #fffdf8; border-radius: var(--r); box-shadow: var(--lift); overflow: hidden; transition: box-shadow var(--t-hover) ease, transform var(--t-hover) ease; }
.a1-calm .c-card :is(h3, p) { margin-inline: 24px; }
.a1-calm .c-card-photo { aspect-ratio: 4 / 3; margin-bottom: 8px; }
.a1-calm .c-card h3 a { color: var(--ink); text-decoration: none; }
.a1-calm .c-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.a1-calm .c-card p { color: var(--muted); }
.a1-calm .c-card .c-more { margin-top: auto; padding-top: 6px; color: var(--ink); font-weight: 600; }
.a1-calm .c-card:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) { .a1-calm .c-card:hover { box-shadow: var(--lift-hover); transform: translateY(-2px); } }
.a1-calm .c-card-all { justify-content: flex-end; padding: 28px 0; background: var(--ink); }
.a1-calm .c-card-all h3 a { color: var(--on-dark); font-size: 1.5rem; }
.a1-calm .c-card-all p { color: rgb(246 241 231 / 0.8); }
.a1-calm .c-card-all .c-more { color: var(--accent); margin-top: 8px; }

/* Steve: photo and words side by side. */
.a1-calm .c-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.a1-calm .c-split-photo { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; }
.a1-calm .c-split-text { display: grid; gap: 20px; }
.a1-calm .c-split-text p:not(.c-link) { font-size: var(--step-lead); line-height: 1.55; max-width: 52ch; }

/* Recent projects: three photos with a caption under each. */
.a1-calm .c-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.a1-calm .c-shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.a1-calm .c-shot figcaption { margin-top: 10px; color: var(--muted); font-size: 0.9375rem; text-align: left; }

/* Areas: one panel, the three cities as big links. */
.a1-calm .c-areas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); background: var(--leaf-1); border-radius: var(--r); }
.a1-calm .c-areas-text { display: grid; gap: 16px; }
.a1-calm .c-hours { color: var(--muted); font-size: 0.9375rem; }
.a1-calm .c-cities { display: grid; gap: 4px; }
.a1-calm .c-cities a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 4px; border-bottom: 1px solid rgb(13 42 28 / 0.15); color: var(--ink); font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); font-weight: 600; text-decoration: none; }
.a1-calm .c-cities a::after { content: "→"; font-weight: 400; }
.a1-calm .c-cities a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Questions: the inner pages' fold-out list, inside the page width. */
.a1-calm .c-qa .qa { padding: 0; margin: 0; width: auto; gap: 24px; }
.a1-calm .c-qa .qa-title { padding-left: 0; font-size: clamp(2rem, 1.45rem + 1.9vw, 2.9rem); line-height: 1.08; font-weight: 600; }
.a1-calm .c-qa .qa details { background: #fffdf8; box-shadow: none; border: 1px solid rgb(13 42 28 / 0.1); }
.a1-calm .c-qa .qa details[open] { background: #fffdf8; border-color: rgb(13 42 28 / 0.25); }
.a1-calm .c-qa .qa summary { font-weight: 600; font-size: 1.0625rem; }
.a1-calm .c-qa .qa details p { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .a1-calm .c-qa .qa details:not([open]):hover { background: #fff; border-color: rgb(13 42 28 / 0.25); } }

/* Estimate: words on the left, the form in a card on the right. */
.a1-calm .c-est { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-calm .c-est-text { display: grid; gap: 16px; position: sticky; top: 120px; }
.a1-calm .c-est-text > p:first-of-type { font-size: var(--step-lead); line-height: 1.5; }
.a1-calm .c-est-call { font-size: 1.25rem; }
.a1-calm .c-est-form { padding: clamp(24px, 3vw, 40px); background: #fffdf8; border-radius: var(--r); box-shadow: var(--lift); }
.a1-calm .c-est-form .kb-form-basic-style :is(input:not([type=hidden]), select, textarea) { background: var(--bg); border: 1px solid rgb(13 42 28 / 0.2); }
.a1-calm .c-est-form .kb-form-basic-style :is(input:not([type=hidden]), select, textarea):focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); outline: 0; }

@media (max-width: 1000px) {
  .a1-calm .c-cards, .a1-calm .c-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-calm .c-shots .c-shot:nth-of-type(3) { display: none; }
  .a1-calm .c-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-calm .c-est { grid-template-columns: minmax(0, 1fr); }
  .a1-calm .c-est-text { position: static; }
}
@media (max-width: 760px) {
  .a1-calm .c-split, .a1-calm .c-areas { grid-template-columns: minmax(0, 1fr); }
  /* Phones: the words sit at the foot of the photo, the misty veil rises from the bottom. */
  .a1-calm .c-cine { align-items: flex-end; min-height: min(88svh, 720px); border-radius: 18px; }
  .a1-calm .c-cine-photo img { object-position: 70% 50%; }
  .a1-calm .c-cine::before { -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 50%, transparent 74%); mask-image: linear-gradient(0deg, #000 0%, #000 50%, transparent 74%); }
  .a1-calm .c-cine::after { background: linear-gradient(0deg, rgb(246 241 231 / 0.94) 0%, rgb(246 241 231 / 0.82) 46%, rgb(246 241 231 / 0.25) 72%, rgb(246 241 231 / 0) 100%); }
  .a1-calm .c-cine-text { padding-block: 120px 40px; }
  .a1-calm .c-ba .c-compare { aspect-ratio: 4 / 3; }
  .a1-calm .c-cards { grid-template-columns: minmax(0, 1fr); }
  .a1-calm .c-head-row { grid-template-columns: minmax(0, 1fr); }
  .a1-calm .c-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .a1-calm .c-trust { gap: 18px 16px; padding: 22px 20px; }
}

/* ===== Projects gallery (the Projects page) ===== */
.a1-gal [hidden] { display: none !important; }
.a1-gal .g-head { padding-top: clamp(32px, 5vw, 64px); display: grid; gap: 20px; }
.a1-gal .g-head h1 { font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.25rem); line-height: 1.02; font-weight: 600; letter-spacing: -0.02em; }
/* The group buttons need the script, so they show only with it. */
.a1-gal .g-filters { display: none; }
.js .a1-gal .g-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.a1-gal .g-filters button { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid rgb(13 42 28 / 0.25); background: #fffdf8; color: var(--ink); font-weight: 600; font-size: 1rem; cursor: pointer; transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.a1-gal .g-filters button span { margin-left: 6px; color: var(--muted); font-weight: 500; }
.a1-gal .g-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.a1-gal .g-filters button[aria-pressed="true"] span { color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-gal .g-filters button[aria-pressed="false"]:hover { border-color: var(--ink); } }

.a1-gal .g-group { padding-top: clamp(48px, 7vw, 88px); }
.a1-gal .g-group-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 24px; }
.a1-gal .g-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.a1-gal .g-item { margin: 0; position: relative; }
.a1-gal .g-item img, .a1-gal .g-item video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--surface); }
.a1-gal .g-item img { cursor: zoom-in; transition: filter var(--t-hover) ease; }
@media (hover: hover) { .a1-gal .g-item img:hover { filter: brightness(1.06); } }
.a1-gal .g-item img:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--accent); }
/* Single photos: the caption is read out (alt) and shown in the large view, not under every thumbnail. */
.a1-gal .g-grid .g-item:not(.g-clip, .g-before, .g-after) figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a1-gal .g-clip figcaption { margin-top: 8px; color: var(--muted); font-size: 0.9375rem; }
/* Before and after: two photos side by side over two columns, labelled on the photo. */
.a1-gal .g-pair { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.a1-gal .g-pair figcaption { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 999px; background: rgb(13 42 28 / 0.82); color: var(--on-dark); font-size: 0.8125rem; font-weight: 600; pointer-events: none; }
.a1-gal .g-pair .g-after figcaption { background: var(--accent); color: var(--accent-ink); }
.a1-gal .g-pair .g-before img { border-radius: var(--r) 0 0 var(--r); }
.a1-gal .g-pair .g-after img { border-radius: 0 var(--r) var(--r) 0; }
@media (max-width: 760px) {
  .a1-gal .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .a1-gal .g-filters button { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
}

/* Large view. */
dialog.a1-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(8 20 13 / 0.97); color: #f6f1e7; }
dialog.a1-lightbox::backdrop { background: rgb(8 20 13 / 0.6); }
dialog.a1-lightbox figure { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; padding: 64px clamp(12px, 6vw, 96px) 20px; box-sizing: border-box; }
dialog.a1-lightbox img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
dialog.a1-lightbox figcaption { text-align: center; padding-top: 14px; font-size: 1.0625rem; line-height: 1.4; }
dialog.a1-lightbox .lb-link { color: #f6e016; font-weight: 600; margin-left: 10px; white-space: nowrap; }
dialog.a1-lightbox .lb-count { position: absolute; top: 20px; left: 20px; margin: 0; font-size: 0.9375rem; color: rgb(246 241 231 / 0.75); }
dialog.a1-lightbox :is(.lb-prev, .lb-next, .lb-close) { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgb(246 241 231 / 0.14); color: #f6f1e7; font-size: 2rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
dialog.a1-lightbox :is(.lb-prev, .lb-next, .lb-close):hover { background: rgb(246 241 231 / 0.26); }
dialog.a1-lightbox :is(.lb-prev, .lb-next, .lb-close):focus-visible { outline: 3px solid #f6e016; outline-offset: 2px; }
dialog.a1-lightbox .lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
dialog.a1-lightbox .lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
dialog.a1-lightbox .lb-close { top: 12px; right: 12px; }
dialog.a1-lightbox form { margin: 0; }
@media (max-width: 760px) {
  dialog.a1-lightbox figure { padding: 64px 8px 84px; }
  dialog.a1-lightbox .lb-prev, dialog.a1-lightbox .lb-next { top: auto; bottom: 16px; transform: none; }
  dialog.a1-lightbox .lb-prev { left: calc(50% - 64px); } dialog.a1-lightbox .lb-next { right: calc(50% - 64px); }
}

/* ===== Home hero: before-and-after compare ===== */
/* Both photos fill the same frame with the same crop, so the house lines up; the before photo is clipped to
   the left of --pos. A transparent range input covers the frame: drag, tap or arrow keys move the line. */
.a1-calm .c-hero-compare { display: grid; gap: 10px; }
.a1-calm .c-compare { --pos: 50%; position: relative; aspect-ratio: 5 / 4; max-height: 78svh; width: 100%; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.a1-calm .c-compare figure { position: absolute; inset: 0; margin: 0; }
.a1-calm .c-compare img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-calm .c-compare .c-compare-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.a1-calm .c-compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.a1-calm .c-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgb(13 42 28 / 0.18); pointer-events: none; }
.a1-calm .c-compare-handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 1.25rem; font-weight: 700; letter-spacing: 2px; box-shadow: var(--lift); }
.a1-calm .c-compare-range:focus-visible + .c-compare-handle::after { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 7px var(--accent); }
.a1-calm .c-compare-tag { position: absolute; top: 14px; padding: 4px 12px; border-radius: 999px; font-size: 0.875rem; font-weight: 600; pointer-events: none; }
.a1-calm .c-compare-tag.is-before { left: 14px; background: rgb(13 42 28 / 0.85); color: var(--on-dark); }
.a1-calm .c-compare-tag.is-after { right: 14px; background: var(--accent); color: var(--accent-ink); }
.a1-calm .c-compare-note { color: var(--muted); font-size: 0.9375rem; }
@media (max-width: 760px) { .a1-calm .c-compare { aspect-ratio: 4 / 3; max-height: none; } }
.a1-calm .c-compare-tag { transition: opacity 160ms ease; }
.a1-calm .c-compare-tag.is-covered { opacity: 0; }
.a1-calm .c-fact a { color: inherit; text-decoration: underline; text-decoration-color: rgb(13 42 28 / 0.35); text-underline-offset: 0.2em; }
.a1-calm .c-fact a:hover { text-decoration-color: currentColor; }

/* ===== Home: service photo cards ===== */
/* Laptop: a bento grid (drainage tall on the left, patios wide). Each card is one photo with the title on a dark
   fade at its foot; the corner badge sits in a cut-out of the page colour. Hover (200-300 ms): the photo zooms a
   little, the card lifts, the arrow slides up-right and the sentence opens. Touch screens and phones always show
   the sentence. */
.a1-calm .c-cards { grid-auto-rows: clamp(230px, 21vw, 290px); gap: 20px; }
.a1-calm .c-card-photo-card { padding: 0; justify-content: flex-end; background: var(--ink); box-shadow: var(--lift); isolation: isolate;
  transition: transform 260ms var(--ease-out), box-shadow 260ms ease; }
.a1-calm .c-card-photo-card .c-card-photo { position: absolute; inset: 0; z-index: -2; margin: 0; aspect-ratio: auto; border-radius: 0; }
.a1-calm .c-card-photo-card .c-card-photo img { transition: transform 300ms var(--ease-out); }
.a1-calm .c-card-photo-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgb(8 20 13 / 0.88) 0%, rgb(8 20 13 / 0.6) 34%, rgb(8 20 13 / 0.08) 62%, rgb(8 20 13 / 0) 100%); }
.a1-calm .c-card-body { padding: 0 24px 22px; display: grid; gap: 0; }
.a1-calm .c-card-photo-card :is(h3, p) { margin-inline: 0; }
.a1-calm .c-card-photo-card h3 { font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem); }
.a1-calm .c-card-photo-card h3 a { color: #fff; }
.a1-calm .c-card-photo-card .c-card-text { color: rgb(246 241 231 / 0.92); line-height: 1.45; max-width: 42ch; padding-top: 8px; }
/* The arrow badge: a green circle in a page-coloured notch, with the two inside corners rounded off. */
.a1-calm .c-card-arrow { position: absolute; top: 0; left: 0; width: 64px; height: 64px; margin: 0; display: grid; place-items: center;
  background: var(--bg); border-bottom-right-radius: 22px; z-index: 1; pointer-events: none; }
.a1-calm .c-card-arrow::before, .a1-calm .c-card-arrow::after { content: ""; position: absolute; width: 22px; height: 22px;
  background: radial-gradient(circle at 100% 100%, transparent 21.5px, var(--bg) 22px); }
.a1-calm .c-card-arrow::before { top: 0; left: 64px; }
.a1-calm .c-card-arrow::after { top: 64px; left: 0; }
.a1-calm .c-card-arrow span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--on-dark);
  font-size: 1.25rem; line-height: 1; overflow: hidden; transition: background-color 240ms ease, color 240ms ease, transform 260ms var(--ease-out); }
.a1-calm .c-card-all .c-card-arrow span { background: var(--accent); color: var(--accent-ink); }
.a1-calm .c-card-all { padding: 28px 24px; }
.a1-calm .c-card-all :is(h3, p) { margin-inline: 0; }
@media (min-width: 1001px) {
  .a1-calm .c-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a1-calm .c-cards .c-card:nth-of-type(1) { grid-row: span 2; }
  .a1-calm .c-cards .c-card:nth-of-type(4) { grid-column: span 2; }
  .a1-calm .c-cards .c-card:nth-of-type(5) { grid-column: span 2; }
}
@media (hover: hover) and (min-width: 761px) {
  .a1-calm .c-card-photo-card .c-card-text { max-height: 0; opacity: 0; padding-top: 0; overflow: hidden;
    transition: max-height 300ms var(--ease-out), opacity 240ms ease, padding-top 300ms var(--ease-out); }
  .a1-calm .c-card-photo-card:is(:hover, :focus-within) .c-card-text { max-height: 8em; opacity: 1; padding-top: 8px; }
  .a1-calm .c-card:is(:hover, :focus-within) { transform: translateY(-4px); box-shadow: var(--lift-hover); }
  .a1-calm .c-card-photo-card:is(:hover, :focus-within) .c-card-photo img { transform: scale(1.06); }
  .a1-calm .c-card:is(:hover, :focus-within) .c-card-arrow span { background: var(--accent); color: var(--accent-ink); transform: translate(3px, -3px); }
  .a1-calm .c-card-all:is(:hover, :focus-within) .c-card-arrow span { background: var(--on-dark); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .a1-calm .c-card, .a1-calm .c-card-photo-card .c-card-photo img, .a1-calm .c-card-arrow span, .a1-calm .c-card-photo-card .c-card-text { transition: none; }
  .a1-calm .c-card-photo-card:is(:hover, :focus-within) .c-card-photo img { transform: none; }
}
@media (max-width: 1000px) { .a1-calm .c-cards { grid-auto-rows: clamp(240px, 42vw, 320px); } }
@media (max-width: 760px) { .a1-calm .c-cards { grid-auto-rows: minmax(260px, auto); gap: 14px; } .a1-calm .c-card-photo-card { min-height: 280px; } }

/* ===== Before-and-after slider, the signature piece (Home and Projects) ===== */
/* A white line with a large round knob (64 px, chevrons), bold BEFORE / AFTER labels that fade when the line
   reaches them, and a clear focus ring for keyboard users. The line follows the pointer directly. */
.a1-calm .c-compare { touch-action: pan-y; box-shadow: var(--lift); }
.a1-calm .c-compare-handle { width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 0 1px rgb(13 42 28 / 0.15), 0 0 18px rgb(0 0 0 / 0.25); }
.a1-calm .c-compare-handle::after { content: none; }
.a1-calm .c-compare-knob { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: #fff; box-shadow: 0 6px 20px rgb(0 0 0 / 0.28); transition: transform 200ms var(--ease-out), box-shadow 200ms ease; }
.a1-calm .c-compare-knob::before, .a1-calm .c-compare-knob::after { content: ""; position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -6px;
  border: solid var(--ink); border-width: 0 0 3px 3px; }
.a1-calm .c-compare-knob::before { left: 15px; transform: rotate(45deg); }
.a1-calm .c-compare-knob::after { right: 15px; transform: rotate(-135deg); }
.a1-calm .c-compare:hover .c-compare-knob, .a1-calm .c-compare.is-dragging .c-compare-knob { transform: scale(1.08); box-shadow: 0 8px 26px rgb(0 0 0 / 0.34); }
.a1-calm .c-compare-range:focus-visible + .c-compare-handle .c-compare-knob { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 8px var(--accent), 0 6px 20px rgb(0 0 0 / 0.28); }
.a1-calm .c-compare-tag { top: 18px; padding: 7px 16px; font-size: clamp(0.875rem, 0.75rem + 0.45vw, 1.125rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 4px 14px rgb(0 0 0 / 0.2); }
.a1-calm .c-compare-tag.is-before { left: 18px; background: rgb(13 42 28 / 0.88); }
.a1-calm .c-compare-tag.is-after { right: 18px; }
@media (max-width: 760px) {
  .a1-calm .c-compare-knob { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .a1-calm .c-compare-knob::before { left: 13px; }
  .a1-calm .c-compare-knob::after { right: 13px; }
  .a1-calm .c-compare-tag { top: 12px; padding: 5px 12px; }
  .a1-calm .c-compare-tag.is-before { left: 12px; }
  .a1-calm .c-compare-tag.is-after { right: 12px; }
}
/* In the gallery: two columns wide, with a caption under it. */
.a1-gal .g-compare { grid-column: span 2; display: grid; gap: 8px; }
.a1-gal .g-compare .c-compare { aspect-ratio: 4 / 3; max-height: none; }
.a1-gal .g-compare .c-compare img { object-position: 50% 60%; }
.a1-gal .g-compare-caption { color: var(--muted); font-size: 0.9375rem; }
@media (max-width: 760px) { .a1-gal .g-compare { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .a1-calm .c-compare-knob { transition: none; } }

/* ===== Portfolio: masonry, curated view, lightbox context ===== */
/* Masonry (script only): tiny 4 px rows, a1.js gives each tile the row span of its real height, so photos keep
   their own shape (tall and wide mixed). Without script the grid stays even 4:3 tiles. */
.a1-gal .g-grid.is-masonry { grid-auto-rows: 4px; grid-auto-flow: row dense; row-gap: 0; align-items: start; }
.a1-gal .g-grid.is-masonry .g-item img { height: auto; object-fit: cover; }
.a1-gal .g-grid.is-masonry .g-pair .g-item img { aspect-ratio: 3 / 4; height: auto; }
.a1-gal .g-grid.is-masonry .g-clip video { aspect-ratio: 4 / 3; }
/* Tiles: a gentle zoom on hover, the caption slides up from the foot of the photo. */
.a1-gal .g-grid .g-item:not(.g-clip) { overflow: hidden; border-radius: var(--r); }
.a1-gal .g-item img { transition: transform 350ms var(--ease-out), filter 250ms ease; }
@media (hover: hover) {
  .a1-gal .g-grid .g-item:not(.g-clip, .g-before, .g-after):hover img { transform: scale(1.04); filter: brightness(1.04); }
}
/* The curated view: the first six tiles of each service; the rest wait behind "See all". */
.a1-gal.is-curated .g-extra { display: none; }
.a1-gal .g-more { display: none; margin-top: 22px; }
.a1-gal.is-curated .g-more { display: inline-flex; }
.a1-gal .g-more { align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer; transition: background-color 250ms ease, color 250ms ease, transform 250ms var(--ease-out); }
.a1-gal .g-more span { transition: transform 250ms var(--ease-out); }
@media (hover: hover) { .a1-gal .g-more:hover { background: var(--ink); color: var(--on-dark); } .a1-gal .g-more:hover span { transform: translateX(4px); } }
.a1-gal .g-more:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 1000px) { .a1-gal .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .a1-gal .g-grid { gap: 10px; } }

/* Lightbox with project context: service and count at the top, caption, service link and estimate button below. */
dialog.a1-lightbox figure { grid-template-rows: 1fr auto; }
dialog.a1-lightbox .lb-count { display: flex; gap: 10px; align-items: center; }
dialog.a1-lightbox .lb-cat { padding: 4px 12px; border-radius: 999px; background: rgb(246 241 231 / 0.14); color: #f6f1e7; font-weight: 600; font-size: 0.875rem; }
dialog.a1-lightbox figcaption { display: grid; justify-items: center; gap: 12px; }
dialog.a1-lightbox .lb-text { font-size: 1.125rem; font-weight: 600; max-width: 60ch; }
dialog.a1-lightbox .lb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; align-items: center; }
dialog.a1-lightbox .lb-link { margin: 0; }
dialog.a1-lightbox .lb-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--r-control); background: #f6e016; color: #0d2a1c; font-weight: 600; text-decoration: none;
  transition: transform 250ms var(--ease-out), background-color 200ms ease; }
@media (hover: hover) { dialog.a1-lightbox .lb-cta:hover { background: #e5cf00; transform: translateY(-2px); } }
dialog.a1-lightbox .lb-cta:focus-visible, dialog.a1-lightbox .lb-link:focus-visible { outline: 3px solid #f6e016; outline-offset: 3px; }
dialog.a1-lightbox .lb-cta:focus-visible { outline-color: #f6f1e7; }
@media (max-width: 760px) { dialog.a1-lightbox figure { padding-bottom: 92px; } dialog.a1-lightbox .lb-text { font-size: 1rem; } }

/* ===== Process journey (service pages) ===== */
/* Laptop: photo and words alternate left and right of a centre line; the green fill runs down the line with the
   scroll (--p), each step's dot fills when the line reaches it, and its photo opens from a slightly zoomed, inset
   frame (--sp). Phones: the line runs down the left edge. */
.a1 .flow-steps.journey { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 7vw, 96px); max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0 var(--pad); --p: 1; }
.a1 .journey-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 3px; background: rgb(13 42 28 / 0.14); }
.a1 .journey-line span { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--p) * 100%); border-radius: inherit; background: var(--ink); }
.a1 .jstep { --sp: 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(56px, 8vw, 120px); align-items: center; }
.a1 .jstep::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--bg); border: 3px solid rgb(13 42 28 / 0.25); transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
.a1 .jstep.is-active::before { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 6px var(--accent); }
.a1 .jstep-photo { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; box-shadow: var(--lift);
  clip-path: inset(calc((1 - var(--sp)) * 10%) round var(--r)); }
.a1 .jstep-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.14 - var(--sp) * 0.14)); }
.a1 .jstep-body { display: grid; gap: 10px; transform: translateY(calc((1 - var(--sp)) * 24px)); }
.a1 .jstep-body h3 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem); }
.a1 .jstep-body p { margin: 0; max-width: 44ch; }
.a1 .jstep-meta { display: flex; align-items: center; gap: 14px; }
.a1 .jstep-num { font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); font-weight: 600; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.a1 .jstep-stage { padding: 4px 12px; border-radius: 999px; background: var(--leaf-1); color: var(--ink); font-size: 0.875rem; font-weight: 600; }
.a1 .jstep.is-active .jstep-stage { background: var(--accent); color: var(--accent-ink); }
/* Alternate sides: odd steps photo left, even steps photo right; steps without a photo sit on alternating sides. */
.a1 .jstep:nth-child(odd) .jstep-photo { order: 2; }
.a1 .jstep:not(.has-photo) .jstep-body { grid-column: 1; text-align: right; justify-items: end; }
.a1 .jstep:not(.has-photo):nth-child(odd) .jstep-body { grid-column: 2; text-align: left; justify-items: start; }
.a1 .jstep:not(.has-photo) .jstep-meta { justify-content: flex-end; }
.a1 .jstep:not(.has-photo):nth-child(odd) .jstep-meta { justify-content: flex-start; }
@media (max-width: 900px) {
  .a1 .flow-steps.journey { padding-left: 52px; gap: 48px; }
  .a1 .journey-line { left: 18px; }
  .a1 .jstep { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .a1 .jstep::before { left: -34px; top: 8px; margin: 0 0 0 -11px; }
  .a1 .jstep:nth-child(odd) .jstep-photo { order: 0; }
  .a1 .jstep:not(.has-photo) .jstep-body, .a1 .jstep:not(.has-photo):nth-child(odd) .jstep-body { grid-column: 1; text-align: left; justify-items: start; }
  .a1 .jstep:not(.has-photo) .jstep-meta { justify-content: flex-start; }
}

/* ===== Home hero: layers and first screen ===== */
/* Layers: photo (back, slowest), misty veil, words, project card (front). On scroll the photo lags behind the
   page and the words rise and fade a little; on laptops the layers shift a few pixels against the pointer.
   a1.js sets --sy (scroll, px), --mx and --my (pointer, -1..1); without script they stay 0. The parallax uses
   the separate `translate` property so it never fights the entrance animations on `transform`. */
.a1-calm .c-cine { display: grid; grid-template-rows: 1fr auto; align-items: center; --sy: 0; --mx: 0; --my: 0; }
.a1-calm .c-cine > *, .a1-calm .c-cine > .wp-block-group__inner-container > * { grid-column: 1; }
.a1-calm figure.c-cine-photo { inset: -3%; translate: calc(var(--mx) * -14px) calc(var(--sy) * 0.32px + var(--my) * -10px); will-change: translate; }
.a1-calm .c-cine-text { grid-row: 1; translate: calc(var(--mx) * 5px) calc(var(--sy) * -0.14px + var(--my) * 3px); opacity: calc(1 - var(--sy) / 900); }
.a1-calm .c-cine .c-trust { grid-row: 2; position: relative; z-index: 1; width: min(1200px, 100% - 2 * var(--c-gut)); margin: 0 auto clamp(14px, 2vw, 24px); padding: 18px clamp(18px, 2.4vw, 30px);
  background: rgb(246 241 231 / 0.8); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 10px 30px -14px rgb(13 42 28 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.5); }
.a1-calm .c-cine .c-fact span { color: #4f5a52; }
.a1-calm .c-cine-card { grid-row: 1; align-self: end; justify-self: end; position: relative; z-index: 1; width: min(300px, 32vw); margin: 0 clamp(20px, 3vw, 44px) 20px 0;
  padding: 16px 18px; border-radius: 16px; display: grid; gap: 4px;
  background: rgb(246 241 231 / 0.84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 34px -16px rgb(13 42 28 / 0.45);
  translate: calc(var(--mx) * 10px) calc(var(--sy) * -0.2px + var(--my) * 7px); }
.a1-calm .c-cine-card p { margin: 0; color: var(--ink); line-height: 1.35; }
.a1-calm .c-cine-kicker { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #4f5a52 !important; }
.a1-calm .c-cine-cardlink a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-calm .c-cine .c-trust { animation: c-up 0.8s var(--ease-out) 1.25s both; }
  .js .a1-calm .c-cine-card { animation: c-up 0.8s var(--ease-out) 1.45s both; }
}
@media (max-width: 1000px) {
  .a1-calm .c-cine-card { display: none; }
}
@media (max-width: 760px) {
  .a1-calm .c-cine .c-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; padding: 14px 16px; margin-bottom: 10px; width: calc(100% - 20px); }
  .a1-calm .c-cine .c-fact strong { font-size: 0.9375rem; }
  .a1-calm .c-cine .c-fact span { font-size: 0.8125rem; }
  .a1-calm .c-cine-text { padding-bottom: 20px; }
}
/* First screen: the hero, with its trust bar, fits the window under the header (laptops and desktops). */
@media (min-width: 761px) {
  .a1-calm .c-cine { min-height: 0; height: clamp(600px, calc(100svh - 92px), 900px); }
  .a1-calm .c-cine-text { padding-block: clamp(24px, 4svh, 56px) 16px; }
  .a1-calm .c-cine h1 { font-size: clamp(2.8rem, min(1.4rem + 5vw, 10.5svh), 5.75rem); }
  .a1-calm .c-cine-lead { margin-top: clamp(14px, 2.6svh, 26px); }
  .a1-calm .c-cine-actions { margin-top: clamp(18px, 3.6svh, 36px); }
}
@media (max-width: 760px) {
  .a1-calm .c-cine h1 { font-size: clamp(2.3rem, min(9.6vw, 6.4svh), 2.9rem); }
  .a1-calm .c-cine-lead { margin-top: 14px; font-size: 1rem; }
  .a1-calm .c-cine-actions { margin-top: 18px; }
  .a1-calm .c-cine-text { padding-top: 96px; }
}
@media (max-width: 760px) {
  /* The words and the trust bar fill most of the phone hero, so the haze reaches higher. */
  .a1-calm .c-cine::before { -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 66%, transparent 88%); mask-image: linear-gradient(0deg, #000 0%, #000 66%, transparent 88%); }
  .a1-calm .c-cine::after { background: linear-gradient(0deg, rgb(246 241 231 / 0.94) 0%, rgb(246 241 231 / 0.86) 62%, rgb(246 241 231 / 0.35) 84%, rgb(246 241 231 / 0) 100%); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  /* Tablets: the headline is wider than the left third, so the misty side reaches further. */
  .a1-calm .c-cine::before { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 78%); mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 78%); }
  .a1-calm .c-cine::after { background: linear-gradient(90deg, rgb(246 241 231 / 0.92) 0%, rgb(246 241 231 / 0.86) 50%, rgb(246 241 231 / 0.4) 70%, rgb(246 241 231 / 0) 86%); }
}
@media (max-width: 760px) {
  .a1-calm .c-cine::before { -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 98%); mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 98%); }
  .a1-calm .c-cine::after { background: linear-gradient(0deg, rgb(246 241 231 / 0.94) 0%, rgb(246 241 231 / 0.88) 72%, rgb(246 241 231 / 0.5) 90%, rgb(246 241 231 / 0.2) 100%); }
}

/* ===== Home service cards: one even grid, every card the same height ===== */
/* Replaces the mixed sizes above. Laptops: three equal columns and rows of one fixed height; tablets: two columns;
   phones: one column, every row as tall as the tallest card. The sentence opens inside the card on hover, so the
   card never changes size. */
@media (min-width: 1001px) {
  .a1-calm .c-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(300px, 24vw, 330px); }
  .a1-calm .c-cards .c-card:nth-of-type(n) { grid-row: auto; grid-column: auto; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .a1-calm .c-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 320px; }
}
@media (max-width: 760px) {
  .a1-calm .c-cards { grid-auto-rows: 1fr; }
  .a1-calm .c-card-photo-card, .a1-calm .c-card-all { min-height: 300px; }
}
.a1-calm .c-card { height: 100%; }
.a1-calm .c-card-body { max-height: calc(100% - 64px); }
.a1-calm .c-card-photo-card h3 { line-height: 1.2; }
/* The last card matches the others: same height, content at the foot, same lift and arrow on hover. */
.a1-calm .c-card-all { justify-content: flex-end; padding: 0 24px 22px; }
.a1-calm .c-card-all .c-more { transition: transform 260ms var(--ease-out); }
@media (hover: hover) { .a1-calm .c-card-all:is(:hover, :focus-within) .c-more { transform: translateX(4px); } }

/* ===== Home: Recent projects previews ===== */
/* Four tall photo tiles, one per service. The service label sits on the photo; the title and "See N photos" sit on
   a dark fade at the foot. The whole tile links into that service's part of the gallery. Hover/focus (250-350 ms):
   the photo zooms, the tile lifts, the label turns yellow and the "See N photos" line slides up into view.
   Touch screens and phones always show it. */
.a1-calm .c-prevs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.a1-calm .c-prev { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden;
  isolation: isolate; background: var(--ink); box-shadow: var(--lift); transition: transform 300ms var(--ease-out), box-shadow 300ms ease; }
.a1-calm .c-prev .c-prev-photo { position: absolute; inset: 0; z-index: -2; margin: 0; border-radius: 0; }
.a1-calm .c-prev .c-prev-photo img { transition: transform 350ms var(--ease-out); }
.a1-calm .c-prev::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgb(8 20 13 / 0.88) 0%, rgb(8 20 13 / 0.55) 32%, rgb(8 20 13 / 0) 58%); }
.a1-calm .c-prev-tag { position: absolute; top: 14px; left: 14px; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgb(246 241 231 / 0.92); color: var(--ink);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; transition: background-color 250ms ease; box-shadow: 0 4px 12px rgb(0 0 0 / 0.18); }
.a1-calm .c-prev-body { padding: 0 18px 18px; display: grid; }
.a1-calm .c-prev h3 { margin: 0; font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem); line-height: 1.25; }
.a1-calm .c-prev h3 a { color: #fff; text-decoration: none; }
.a1-calm .c-prev h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.a1-calm .c-prev-more { margin: 0; padding-top: 8px; color: #f6e016; font-weight: 600; font-size: 0.9375rem; }
.a1-calm .c-prev:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (min-width: 761px) {
  .a1-calm .c-prev-more { max-height: 0; padding-top: 0; opacity: 0; transform: translateY(8px); overflow: hidden;
    transition: max-height 300ms var(--ease-out), padding-top 300ms var(--ease-out), opacity 250ms ease, transform 300ms var(--ease-out); }
  .a1-calm .c-prev:is(:hover, :focus-within) .c-prev-more { max-height: 3em; padding-top: 8px; opacity: 1; transform: none; }
  .a1-calm .c-prev:is(:hover, :focus-within) { transform: translateY(-4px); box-shadow: var(--lift-hover); }
  .a1-calm .c-prev:is(:hover, :focus-within) .c-prev-photo img { transform: scale(1.06); }
  .a1-calm .c-prev:is(:hover, :focus-within) .c-prev-tag { background: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .a1-calm .c-prev, .a1-calm .c-prev .c-prev-photo img, .a1-calm .c-prev-more { transition: none; }
  .a1-calm .c-prev:is(:hover, :focus-within) .c-prev-photo img { transform: none; }
}
@media (max-width: 1000px) { .a1-calm .c-prevs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .a1-calm .c-prevs { gap: 10px; } .a1-calm .c-prev-body { padding: 0 12px 12px; } .a1-calm .c-prev-tag { top: 10px; left: 10px; font-size: 0.75rem; padding: 4px 10px; } .a1-calm .c-prev-more { font-size: 0.8125rem; } }
@media (max-width: 520px) { .a1-calm .c-prev-svc { display: none; } }

/* ===== Phones: Call / Free estimate bar, and a bigger menu close button ===== */
.a1-bar { display: none; }
@media (max-width: 760px) {
  .a1-bar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 90; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
    padding: 6px; border-radius: 16px; background: rgb(13 42 28 / 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 28px -10px rgb(0 0 0 / 0.45);
    transform: translateY(calc(100% + 24px)); transition: transform 300ms var(--ease-out); }
  .a1-bar.is-shown { transform: none; }
  .a1-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 11px; font-weight: 600; font-size: 1rem; text-decoration: none; }
  .a1-bar-call { color: var(--on-dark); background: rgb(246 241 231 / 0.12); }
  .a1-bar-est { color: var(--accent-ink); background: var(--accent); }
  .a1-bar a:active { transform: scale(0.97); }
  .a1-bar a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .a1-bar-call:focus-visible { outline-color: var(--on-dark); }
  .a1-bar-ico { font-size: 1.1rem; line-height: 1; }
  /* Room at the end of the page so the bar never covers the footer's last line. */
  body.has-a1-bar .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* The menu's close button: a full finger-sized target. */
  #mobile-drawer .menu-toggle-close { min-width: 48px; min-height: 48px; justify-content: center; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .a1-bar { transition: none; } }

/* ===== Estimate form: inline checks, sending state, success panel ===== */
.a1 .cta-form .kb-adv-form-field { position: relative; }
.a1 .cta-form .a1-field-msg { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.35; color: #8f1414; font-weight: 600; }
.a1 .cta-form .a1-field-msg:empty { display: none; }
.a1 .cta-form .a1-field-msg::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: #8f1414; color: #fff; font-size: 0.75rem; vertical-align: 1px; }
.a1 .cta-form .a1-invalid :is(input, select, textarea) { border-color: #8f1414 !important; box-shadow: 0 0 0 3px rgb(143 20 20 / 0.12); }
.a1 .cta-form .a1-valid :is(input, select) { border-color: #2f5a41 !important; }
.a1 .cta-form .a1-valid input { padding-right: 40px; }
.a1 .cta-form .a1-valid:not(.wp-block-kadence-advanced-form-select)::after { content: ""; position: absolute; right: 15px; bottom: 20px; width: 12px; height: 7px; border: solid #2f5a41; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); pointer-events: none; }
.a1 .cta-form .a1-form-summary { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border-radius: var(--r-control, 10px); background: #fdf1f1; border: 1.5px solid #8f1414; color: #5c0d0d; }
.a1 .cta-form .a1-form-summary[hidden] { display: none; }
.a1 .cta-form .a1-form-summary p { margin: 0 0 4px; }
.a1 .cta-form .a1-form-summary ul { margin: 0; padding-left: 20px; }
.a1 .cta-form .a1-form-summary a { color: #5c0d0d; font-weight: 600; text-decoration: underline; }
.a1 .cta-form .kb-adv-form-submit-button.is-sending { opacity: 0.85; cursor: progress; display: inline-flex; align-items: center; gap: 10px; }
.a1 .cta-form .a1-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: a1-spin 0.8s linear infinite; }
@keyframes a1-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .a1 .cta-form .a1-spin { animation-duration: 2.4s; } }
/* Success: the fields and Kadence's own line make way for one clear panel. */
.a1 .cta-form.is-done form, .a1 .cta-form.is-done .kb-adv-form-success { display: none !important; }
.a1 .cta-form .a1-form-done { display: grid; gap: 12px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r, 14px); background: #fffdf8; box-shadow: var(--lift); color: var(--ink); }
.a1 .cta-form .a1-form-done:focus { outline: none; }
.a1 .cta-form .a1-form-done h3 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem); color: var(--ink); }
.a1 .cta-form .a1-form-done p { margin: 0; max-width: 52ch; }
.a1 .cta-form .a1-done-check { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); position: relative; }
.a1 .cta-form .a1-done-check::after { content: ""; position: absolute; left: 16px; top: 17px; width: 18px; height: 10px; border: solid var(--ink); border-width: 0 0 3.5px 3.5px; transform: rotate(-45deg); }
.a1 .cta-form .a1-done-steps { margin: 4px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.a1 .cta-form .a1-done-call a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
@media (prefers-reduced-motion: no-preference) {
  .a1 .cta-form .a1-form-done { animation: c-up 0.45s var(--ease-out) both; }
  .a1 .cta-form .a1-done-check { animation: a1-pop 0.5s var(--ease-out) 0.1s both; }
}
@keyframes a1-pop { from { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } to { transform: none; } }
.a1 .cta-form .a1-form-fail { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border-radius: var(--r-control, 10px); background: #fdf1f1; border: 1.5px solid #8f1414; color: #5c0d0d; font-weight: 600; }
.a1 .cta-form .a1-form-fail[hidden] { display: none; }
.a1 .cta-form .a1-form-fail a { color: #5c0d0d; text-decoration: underline; }
/* Fields keep their own height (a neighbour's error line must not stretch them), so the ✓ stays in the box. */
.a1 .cta-form .kb-adv-form-field { align-self: start; }
.a1 .cta-form .a1-valid:not(.wp-block-kadence-advanced-form-select)::after { bottom: 21px; }
.a1 .cta-form .a1-valid:has(.a1-field-msg:not(:empty))::after { display: none; }
/* After success the panel carries the phone number; the separate "Or call" line goes. */
.a1 :is(.cta-tile, .c-est):has(.cta-form.is-done) :is(.cta-call, .c-est-call) { display: none; }

/* ===== Gallery: descriptions, progressive loading, lightbox details ===== */
.a1-gal .g-desc { flex-basis: 100%; margin: 2px 0 0; color: var(--muted); max-width: 64ch; }
/* Tiles wait on a soft shimmer and fade in when their photo has arrived. */
.a1-gal .g-item.is-loading { background: linear-gradient(100deg, var(--surface) 30%, #f3ecdf 50%, var(--surface) 70%) 0 0 / 200% 100%; border-radius: var(--r); }
.a1-gal .g-item.is-loading img { opacity: 0; }
.a1-gal .g-item img { transition: opacity 400ms ease, transform 350ms var(--ease-out), filter 250ms ease; }
@media (prefers-reduced-motion: no-preference) { .a1-gal .g-item.is-loading { animation: a1-shimmer 1.4s linear infinite; } }
@keyframes a1-shimmer { to { background-position: -200% 0; } }
/* Lightbox: opens on the sharp-enough thumbnail, blurred, then the full photo takes over. */
dialog.a1-lightbox img.is-preview { filter: blur(10px); transform: scale(1.01); }
dialog.a1-lightbox figure > img { transition: filter 350ms ease; }
dialog.a1-lightbox .lb-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
dialog.a1-lightbox .lb-ba { padding: 3px 11px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: #f6f1e7; color: #0d2a1c; }
dialog.a1-lightbox .lb-ba.is-after { background: #f6e016; }
dialog.a1-lightbox .lb-ba[hidden] { display: none; }
dialog.a1-lightbox .lb-desc { max-width: 62ch; color: rgb(246 241 231 / 0.78); font-size: 0.9375rem; margin: 0; }
dialog.a1-lightbox .lb-thumbs { display: flex; gap: 6px; overflow-x: auto; max-width: min(100%, 900px); padding: 4px 2px; scrollbar-width: thin; scroll-behavior: smooth; }
dialog.a1-lightbox .lb-thumbs button { flex: none; width: 64px; height: 48px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; opacity: 0.5; outline-offset: 2px;
  background: rgb(246 241 231 / 0.1); transition: opacity 250ms ease, box-shadow 250ms ease; }
dialog.a1-lightbox .lb-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
dialog.a1-lightbox .lb-thumbs button:hover { opacity: 0.85; }
dialog.a1-lightbox .lb-thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px #f6e016; }
dialog.a1-lightbox .lb-thumbs button:focus-visible { outline: 3px solid #f6e016; }
@media (max-width: 760px) { dialog.a1-lightbox .lb-thumbs, dialog.a1-lightbox .lb-desc { display: none; } }
@media (max-height: 700px) { dialog.a1-lightbox .lb-thumbs { display: none; } }
.a1-gal .g-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Before the script has picked the highlights, only the first six tiles of each service exist on screen, so the
   browser does not start fetching photos the visitor will not see. (Without script every photo shows.) */
.js .a1-gal:not(.is-ready) .g-grid > .wp-block-group__inner-container > :nth-child(n+7) { display: none; }
dialog.a1-lightbox { background: #08140d; }

/* ===== Drainage: problem selector ===== */
.a1 .sign { position: relative; overflow: hidden; transition: background-color 300ms ease, box-shadow 300ms ease; }
.a1 .sign::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform 340ms var(--ease-out); }
.a1 .sign.is-active::before { transform: scaleY(1); }
.a1 .sign.is-active { box-shadow: var(--lift-hover); }
.a1 .sign-name { position: relative; transition: color 250ms ease; }
.a1 .sign-name > span:first-child { transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .a1 .sign:not(.is-active):hover { background: rgb(227 231 215 / 0.55); }
  .a1 .sign:not(.is-active):hover .sign-name > span:first-child { transform: translateX(4px); }
}
.a1 .sign-name:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; border-radius: inherit; }
/* The small solution name on the right gives way, inside the opened row, to a clear "Recommended solution". */
.a1 .sign .sign-fix { transition: opacity 250ms ease; }
.js .a1 .sign.is-active .sign-fix { opacity: 0; }
.a1 .sign-body { overflow: hidden; }
.js .a1 .sign:not(.is-active):not(.is-closing) .sign-body { display: none; }
.js .a1 .sign.is-closing .sign-text { display: block; }
.a1 .sign-solution { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 20px 12px; }
.a1 .sign-solution span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.a1 .sign-solution strong { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.9375rem; }
.a1 .sign-solution strong::before { content: "→"; font-weight: 700; }
/* Photo: the new one settles from a slight zoom while the old one fades away on top; a tag names the solution. */
.a1 .signs-photo { overflow: hidden; border-radius: var(--r); }
.a1 .signs-photo .signs-ghost { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; pointer-events: none; }
.a1 .signs-photo img { transition: none; }
.a1 .signs-tag { position: absolute; left: 14px; top: 14px; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgb(13 42 28 / 0.88); color: #fff; font-weight: 600; font-size: 0.9375rem;
  display: flex; gap: 8px; align-items: center; box-shadow: 0 6px 18px rgb(0 0 0 / 0.25); }
.a1 .signs-tag span { color: #f6e016; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.a1 .signs-tag:empty { display: none; }
@media (max-width: 720px) {
  .a1 .signs-photo .signs-ghost { aspect-ratio: 4 / 3; max-height: 38svh; }
  .a1 .signs-tag { left: 10px; top: 10px; font-size: 0.8125rem; padding: 5px 11px; }
  .js .a1 .sign.is-active .sign-fix { display: none; }
}
/* The general button reset (.a1 button:focus) must not strip a focused problem row of its padding and type. */
.a1 .sign .sign-name:is(:hover, :focus) { padding: 12px 20px; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.a1 .sign.is-active .sign-name:is(:hover, :focus) { color: var(--ink); }

/* ===== Services overview: four categories ===== */
.a1 .sv { width: min(1200px, 100% - 2 * clamp(16px, 4vw, 48px)); margin: var(--section) auto 0; }
.a1 .sv-head { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); }
.a1 .sv-head h2 { margin: 0; font-size: clamp(2rem, 1.45rem + 1.9vw, 2.9rem); line-height: 1.08; }
.a1 .sv-intro { margin: 0; max-width: 60ch; font-size: var(--step-lead); line-height: 1.5; }
.a1 .sv-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.a1 .sv-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgb(13 42 28 / 0.25); background: #fffdf8; color: var(--ink);
  font-weight: 600; text-decoration: none; transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease; }
@media (hover: hover) { .a1 .sv-jump a:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); } }
.a1 .sv-jump a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1 .sv-cat { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); gap: clamp(20px, 3vw, 48px); padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid rgb(13 42 28 / 0.14); scroll-margin-top: 96px; }
.a1 .sv-cat-head { align-self: start; position: sticky; top: calc(var(--stick, 72px) + 24px); display: grid; gap: 8px; }
.a1 .sv-num { margin: 0; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.a1 .sv-cat-head h3 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.12; }
.a1 .sv-lead { margin: 0; color: var(--muted); max-width: 32ch; }
.a1 .sv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.a1 .sv-card { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 22px 20px; border-radius: var(--r); background: #fffdf8; box-shadow: var(--lift);
  transition: transform 260ms var(--ease-out), box-shadow 260ms ease; }
.a1 .sv-card h4 { margin: 0; font-size: 1.1875rem; line-height: 1.25; }
.a1 .sv-card h4 a { color: var(--ink); text-decoration: none; }
.a1 .sv-card h4 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.a1 .sv-card h4 a::before { content: "→"; float: right; margin-left: 10px; transition: transform 260ms var(--ease-out); }
.a1 .sv-card p { margin: 0; color: #4f5a52; line-height: 1.5; font-size: 0.9875rem; }
.a1 .sv-terms { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.a1 .sv-terms li { padding: 3px 10px; border-radius: 999px; background: var(--leaf-1); color: var(--ink); font-size: 0.8125rem; font-weight: 600; }
.a1 .sv-card:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
  .a1 .sv-card:hover { transform: translateY(-3px); box-shadow: var(--lift-hover); }
  .a1 .sv-card:hover h4 a::before { transform: translateX(4px); }
}
@media (max-width: 1000px) {
  .a1 .sv-cat { grid-template-columns: minmax(0, 1fr); }
  .a1 .sv-cat-head { position: static; }
  .a1 .sv-lead { max-width: 60ch; }
}
@media (max-width: 640px) { .a1 .sv-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; } .a1 .sv-card { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .a1 .sv-card, .a1 .sv-card h4 a::before { transition: none; } }
@media (max-width: 640px) { .a1 .sv-jump { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a1 .sv-jump a { justify-content: center; text-align: center; padding: 6px 10px; font-size: 0.875rem; line-height: 1.25; } }

/* ===== About: project story ===== */
.a1 .st { width: min(1200px, 100% - 2 * clamp(16px, 4vw, 48px)); margin: var(--section) auto 0; }
.a1 .st-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px); }
.a1 .st-kicker { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.a1 .st-head h2 { margin: 0; font-size: clamp(2rem, 1.45rem + 1.9vw, 2.9rem); line-height: 1.08; }
.a1 .st-lead { margin: 0; max-width: 56ch; font-size: var(--step-lead); line-height: 1.5; }
.a1 .st-body { position: relative; }
.a1 .st-stage { display: none; }
.a1 .st-steps { display: grid; gap: 40px; }
.a1 .st-photo { margin: 0 0 16px; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; box-shadow: var(--lift); }
.a1 .st-meta { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.a1 .st-n { font-size: 2rem; font-weight: 600; line-height: 1; color: var(--ink); }
.a1 .st-day { padding: 4px 12px; border-radius: 999px; background: var(--leaf-1); color: var(--ink); font-size: 0.875rem; font-weight: 700; }
.a1 .st-step h3 { margin: 0 0 6px; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem); }
.a1 .st-step p:last-child { margin: 0; max-width: 46ch; }
.a1 .st-more { margin-top: 28px; }
/* Laptops with script: the photo stays in view on the right and changes as each step reaches the middle. */
@media (min-width: 901px) {
  .js .a1 .st-body { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); }
  .js .a1 .st-stage { display: block; order: 2; position: sticky; top: calc(var(--stick, 72px) + 24px); align-self: start; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; box-shadow: var(--lift); background: var(--surface); }
  .js .a1 .st-frame { position: absolute; inset: 0; margin: 0; border-radius: 0; opacity: 0; transition: opacity 600ms ease; }
  .js .a1 .st-frame img { transform: scale(1.06); transition: transform 1200ms var(--ease-out); }
  .js .a1 .st-frame.is-on { opacity: 1; }
  .js .a1 .st-frame.is-on img { transform: none; }
  .js .a1 .st-steps { gap: 0; }
  .js .a1 .st-step { min-height: 62svh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px 28px; border-left: 3px solid rgb(13 42 28 / 0.14); position: relative; opacity: 0.45; transition: opacity 400ms ease; }
  .js .a1 .st-step::before { content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform 500ms var(--ease-out); }
  .js .a1 .st-step.is-on { opacity: 1; }
  .js .a1 .st-step.is-on::before, .js .a1 .st-step.is-past::before { transform: scaleY(1); }
  .js .a1 .st-step.is-on .st-day { background: var(--accent); }
  .js .a1 .st-step .st-photo { display: none; }
}
@media (prefers-reduced-motion: reduce) { .js .a1 .st-frame, .js .a1 .st-frame img, .js .a1 .st-step, .js .a1 .st-step::before { transition: none; } }

/* ===== FAQs: disclosure motion and controls ===== */
/* The +/− becomes a turning +: it turns into × when the answer is open (and turns back). */
.a1 .qa summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-size: 1.5rem; line-height: 1;
  background: rgb(13 42 28 / 0.07); transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), background-color 250ms ease; }
.a1 .qa details[open] summary::after { content: "+"; transform: rotate(45deg); background: rgb(13 42 28 / 0.12); }
.a1 .qa summary { border-radius: inherit; }
.a1 .qa summary:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--accent); }
.a1 .qa details { transition: background-color 300ms ease, box-shadow 250ms ease, transform 250ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .a1 .qa summary:hover::after { background: rgb(13 42 28 / 0.14); } }
@media (prefers-reduced-motion: reduce) { .a1 .qa summary::after, .a1 .qa details { transition: none; } }

/* A calm hero on a page that is otherwise in the older design (Virginia Beach): no bottom padding from .a1-calm. */
.a1 .a1-calm-hero { padding-bottom: 0; }


/* ===== Virginia Beach page (its own composition, the site's brand) =====
   One timing system: hover 220 ms, state changes 300 ms, reveals 600-700 ms, all on --ease-out. */
.a1-vb { --vb-band: var(--surface); --vb-sec: clamp(72px, 9vw, 128px); }
.a1-vb .vbx-sec { padding-top: var(--vb-sec); }
.a1-vb .vbx-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.a1-vb .vbx-head h2 { margin: 0; }
.a1-vb .vbx-head .c-lead { margin: 0; }
.a1-vb .vbx-head-row { max-width: none; grid-template-columns: 1fr auto; align-items: end; }
.a1-vb .soft { color: var(--muted); }
.a1-vb .vbx-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.a1-vb .c-arrow-down { transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-vb .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }
.a1-vb .vbx-arrow-link a span { display: inline-block; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-vb .vbx-arrow-link a:hover span { transform: translateX(4px); } }

/* Bands: the selector on a sand-grey field, the process on the dark green, so the page moves through clear chapters.
   The colour reaches the screen edges with a spread shadow (no extra width, so no sideways scroll). */
.a1-vb .vbx-band { margin-top: clamp(56px, 7vw, 96px); padding-bottom: var(--vb-sec); background: var(--vb-band); box-shadow: 0 0 0 100vmax var(--vb-band); clip-path: inset(0 -100vmax); }
.a1-vb .vbx-dark { --vb-band: var(--ink); color: var(--on-dark); }
.a1-vb .vbx-dark :is(h2, h3) { color: #fff; }
.a1-vb .vbx-dark .c-lead { color: rgb(246 241 231 / 0.86); }
.a1-vb .vbx-dark .vbx-eyebrow { color: var(--accent); }

/* Shared yellow button (selector, timeline). */
.a1-vb .vbx-cta { display: inline-flex; align-items: center; gap: 2px; min-height: 52px; padding: 0 24px; border-radius: var(--r-control); background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px -14px rgb(13 42 28 / 0.55); transition: background-color 220ms ease, transform 220ms var(--ease-out), box-shadow 220ms ease; }
.a1-vb .vbx-cta span { display: inline-block; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-vb .vbx-cta:hover { background: var(--accent-strong); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgb(13 42 28 / 0.6); } .a1-vb .vbx-cta:hover span { transform: translateX(4px); } }
.a1-vb .vbx-cta:active { transform: translateY(0); }
.a1-vb .vbx-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-vb .vbx-dark .vbx-cta:focus-visible { outline-color: var(--accent); }

/* 1. Hero: a split page, words on the sand and a tall photo that opens from a strip. */
.a1-vb .vbx-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(12px, 2vw, 28px) auto 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 80px); align-items: center; min-height: min(calc(100svh - 110px), 820px); }
.a1-vb .vbx-hero-text { display: grid; gap: 20px; padding-block: clamp(24px, 4vw, 48px); }
.a1-vb .vbx-hero h1 { margin: 0; font-size: clamp(2.6rem, 1.2rem + 3.7vw, 4.75rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-vb .vbx-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-vb .vbx-l > span { display: inline-block; }
.a1-vb .vbx-mark { background: linear-gradient(var(--accent), var(--accent)) 0 90% / 100% 0.16em no-repeat; padding-bottom: 0.02em; }
.a1-vb .vbx-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 36ch; }
.a1-vb .vbx-actions { margin-top: 6px; }
.a1-vb .vbx-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-vb .vbx-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.9375rem; font-weight: 600; }
.a1-vb .vbx-facts li { position: relative; padding-left: 22px; }
.a1-vb .vbx-facts li::before { content: ""; position: absolute; left: 1px; top: 0.4em; width: 11px; height: 6px; border: solid var(--ink-3); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.a1-vb .vbx-call { margin: 0; color: #4f5a52; font-size: 0.9375rem; }
.a1-vb .vbx-call a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-vb .vbx-hero-media { position: relative; height: 100%; min-height: 520px; max-height: 800px; border-radius: 24px; overflow: hidden; box-shadow: var(--lift); background: var(--surface); }
.a1-vb figure.vbx-hero-photo { position: absolute; inset: 0; margin: 0; border-radius: 0; }
.a1-vb .vbx-hero-photo img { object-position: 50% 60%; }
.a1-vb .vbx-tag { position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgb(246 241 231 / 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font-size: 0.875rem; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-vb .vbx-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-vb .vbx-l:nth-child(1) > span { animation-delay: 0.15s; }
  .js .a1-vb .vbx-l:nth-child(2) > span { animation-delay: 0.3s; }
  .js .a1-vb .vbx-mark { animation: vbx-underline 0.8s var(--ease-out) 0.95s both; }
  .js .a1-vb .vbx-hero .vbx-in { animation: c-up 0.7s var(--ease-out) both; }
  .js .a1-vb .vbx-eyebrow.vbx-in { animation-delay: 0.05s; }
  .js .a1-vb .vbx-sub.vbx-in { animation-delay: 0.55s; }
  .js .a1-vb .vbx-actions.vbx-in { animation-delay: 0.7s; }
  .js .a1-vb .vbx-facts.vbx-in { animation-delay: 0.82s; }
  .js .a1-vb .vbx-call.vbx-in { animation-delay: 0.92s; }
  .js .a1-vb .vbx-hero-media { animation: vbx-open 1.1s var(--ease-out) 0.1s both; }
  .js .a1-vb .vbx-hero-photo img { animation: vbx-settle 1.6s var(--ease-out) 0.1s both; transform-origin: 50% 60%; }
  .js .a1-vb .vbx-tag { animation: c-up 0.6s var(--ease-out) 1.1s both; }
}
@keyframes vbx-open { from { clip-path: inset(0 0 0 72% round 24px); } to { clip-path: inset(0 0 0 0 round 24px); } }
@keyframes vbx-settle { from { transform: scale(1.1); } to { transform: scale(1.02); } }
@keyframes vbx-underline { from { background-size: 0% 0.16em; } to { background-size: 100% 0.16em; } }

/* Scroll reveals (only once the script has said it is running, so nothing stays hidden if it is not). */
@media (prefers-reduced-motion: no-preference) {
  .a1-vb.vbx-ready .vbx-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-vb.vbx-ready .vbx-r { transition: opacity 600ms ease, transform 700ms var(--ease-out); }
  .a1-vb.vbx-ready .vbx-r.vbx-d1 { transition-delay: 90ms; }
  .a1-vb.vbx-ready .vbx-r.vbx-d2 { transition-delay: 180ms; }
  .a1-vb.vbx-ready .vbx-r.vbx-d3 { transition-delay: 270ms; }
  .a1-vb.vbx-ready .vbx-row:not(.is-in) .vbx-row-photo { clip-path: inset(0 0 100% 0 round var(--r)); }
  .a1-vb.vbx-ready .vbx-row .vbx-row-photo { clip-path: inset(0 0 0 0 round var(--r)); transition: clip-path 900ms var(--ease-out); }
}

/* 2. Challenges: alternating rows, photo one side, words and related services the other. */
.a1-vb .vbx-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: clamp(40px, 6vw, 80px); }
.a1-vb .vbx-row:nth-of-type(even) .vbx-row-photo { order: 2; }
.a1-vb .vbx-row-photo { margin: 0; aspect-ratio: 5 / 4; border-radius: var(--r); overflow: hidden; box-shadow: var(--lift); }
.a1-vb .vbx-row-photo img { transition: transform 500ms var(--ease-out); }
@media (hover: hover) { .a1-vb .vbx-row:hover .vbx-row-photo img { transform: scale(1.03); } }
.a1-vb .vbx-row-text { display: grid; gap: 12px; max-width: 52ch; }
.a1-vb .vbx-num { margin: 0; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.a1-vb .vbx-row-text h3 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem); line-height: 1.1; }
.a1-vb .vbx-row-text p { margin: 0; }
.a1-vb .vbx-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px !important; }
.a1-vb .vbx-links span { width: 100%; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.a1-vb .vbx-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--leaf-1); color: var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: background-color 220ms ease, color 220ms ease; }
.a1-vb .vbx-links a span { width: auto; font-size: inherit; letter-spacing: 0; text-transform: none; color: inherit; margin-left: 4px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-vb .vbx-links a:hover { background: var(--ink); color: var(--on-dark); } .a1-vb .vbx-links a:hover span { transform: translateX(3px); } }
.a1-vb .vbx-links a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-vb .vbx-notes { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.a1-vb .vbx-note { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: var(--r); background: #fffdf8; box-shadow: var(--lift); }
.a1-vb .vbx-note h3 { margin: 0; font-size: 1.25rem; }
.a1-vb .vbx-note p { margin: 0; }
.a1-vb .vbx-note-fig { background: var(--accent); }
.a1-vb .vbx-fig { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.a1-vb .vbx-ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.a1-vb .vbx-ticks li { position: relative; padding-left: 26px; }
.a1-vb .vbx-ticks li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 12px; height: 7px; border: solid currentColor; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }

/* 3. Property-type selector: choices on the left, one shared stage on the right. */
.a1-vb .vbx-picker { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.a1-vb .vbx-opts { display: none; }
.a1-vb.vbx-ready .vbx-opts { display: grid; gap: 10px; position: sticky; top: calc(var(--stick, 72px) + 24px); }
.a1-vb .vbx-opt { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 14px 18px !important; border-radius: var(--r) !important; background: #fffdf8 !important; color: var(--ink); text-align: left; font-weight: 600 !important; font-size: 1.0625rem !important; line-height: 1.25 !important; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px rgb(13 42 28 / 0.12) !important; transition: background-color 300ms ease, box-shadow 300ms ease, color 300ms ease, transform 220ms var(--ease-out); }
.a1-vb .vbx-opt-n { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--leaf-1); font-size: 0.8125rem; font-weight: 700; transition: background-color 300ms ease, color 300ms ease, transform 300ms var(--ease-out); }
.a1-vb .vbx-opt-go { margin-left: auto; font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity 300ms ease, transform 300ms var(--ease-out); }
.a1-vb .vbx-opt[aria-selected="true"] { background: var(--ink) !important; color: var(--on-dark) !important; box-shadow: 0 14px 28px -14px rgb(13 42 28 / 0.65) !important; }
.a1-vb .vbx-opt[aria-selected="true"] .vbx-opt-n { background: var(--accent); color: var(--accent-ink); transform: scale(1.06); }
.a1-vb .vbx-opt[aria-selected="true"] .vbx-opt-go { opacity: 1; transform: none; color: var(--accent); }
@media (hover: hover) { .a1-vb .vbx-opt[aria-selected="false"]:hover { box-shadow: inset 0 0 0 1.5px var(--ink) !important; transform: translateX(3px); } .a1-vb .vbx-opt[aria-selected="false"]:hover .vbx-opt-n { background: var(--accent); } }
.a1-vb .vbx-opt:active { transform: scale(0.98); }
.a1-vb .vbx-opt:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-vb .vbx-stage { display: grid; gap: 18px; }
.a1-vb .vbx-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 36px); padding: clamp(18px, 2.4vw, 28px); border-radius: 22px; background: #fffdf8; box-shadow: var(--lift); }
/* With the script: every answer in the same grid cell, so the stage is as tall as the tallest and never jumps;
   only the chosen one is visible, the others are hidden from sight, pointer, keyboard and screen readers (inert). */
.a1-vb.vbx-ready .vbx-stage { gap: 0; }
.a1-vb.vbx-ready .vbx-panel { grid-area: 1 / 1; }
.a1-vb.vbx-ready .vbx-panel:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; }
.a1-vb .vbx-panel:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-vb .vbx-panel-photo { margin: 0; position: relative; aspect-ratio: auto; height: 100%; min-height: 420px; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.a1-vb .vbx-panel-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-vb .vbx-panel-photo figcaption { position: absolute; left: 12px; bottom: 12px; padding: 4px 11px; border-radius: 999px; background: rgb(246 241 231 / 0.9); font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.a1-vb .vbx-panel-text { display: flex; flex-direction: column; gap: 12px; }
.a1-vb .vbx-panel-text > * { margin-block: 0; }
.a1-vb .vbx-panel h3 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.1; }
.a1-vb .vbx-panel-note { margin: 0; font-size: var(--step-lead); line-height: 1.5; }
.a1-vb .vbx-panel-k { margin: 8px 0 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.a1-vb .vbx-recs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.a1-vb .vbx-recs a { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 100%; min-height: 52px; padding: 10px 14px; border-radius: 12px; background: var(--bg); color: var(--ink); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; text-decoration: none; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.06); transition: background-color 220ms ease, box-shadow 220ms ease; }
.a1-vb .vbx-recs i { flex: none; font-style: normal; font-weight: 700; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-vb .vbx-recs a:hover { background: var(--leaf-1); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.2); } .a1-vb .vbx-recs a:hover i { transform: translateX(4px); } }
.a1-vb .vbx-recs a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-vb .vbx-panel-cta { margin-top: auto !important; padding-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .a1-vb.vbx-ready .vbx-panel { transition: opacity 300ms ease, visibility 0s linear 0s; }
  .a1-vb.vbx-ready .vbx-panel:not(.is-active) { transition: opacity 300ms ease, visibility 0s linear 300ms; }
  .a1-vb.vbx-ready .vbx-panel-photo img { transition: transform 700ms var(--ease-out); }
  .a1-vb.vbx-ready .vbx-panel:not(.is-active) .vbx-panel-photo img { transform: scale(1.06); }
  .a1-vb.vbx-ready .vbx-panel .vbx-panel-text > * { transition: opacity 300ms ease, transform 300ms var(--ease-out); }
  .a1-vb.vbx-ready .vbx-panel:not(.is-active) .vbx-panel-text > * { opacity: 0; transform: translateY(8px); }
  .a1-vb.vbx-ready .vbx-panel.is-active .vbx-panel-text > :nth-child(2) { transition-delay: 40ms; }
  .a1-vb.vbx-ready .vbx-panel.is-active .vbx-panel-text > :nth-child(n+3) { transition-delay: 80ms; }
  .a1-vb.vbx-ready .vbx-recs li { transition: opacity 260ms ease, transform 260ms var(--ease-out); transition-delay: calc(90ms + var(--i, 0) * 30ms); }
  .a1-vb.vbx-ready .vbx-panel:not(.is-active) .vbx-recs li { opacity: 0; transform: translateX(-8px); transition-delay: 0ms; }
}

/* 4. Featured services: a large feature, two image stories, then the full list on demand. */
.a1-vb .vbx-feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); border-radius: 22px; overflow: hidden; background: var(--ink); color: var(--on-dark); box-shadow: var(--lift); position: relative; }
.a1-vb .vbx-feature-photo { margin: 0; min-height: 380px; border-radius: 0; overflow: hidden; }
.a1-vb .vbx-feature-photo img { transition: transform 500ms var(--ease-out); }
.a1-vb .vbx-feature-text { display: grid; align-content: center; gap: 14px; padding: clamp(24px, 4vw, 48px); }
.a1-vb .vbx-feature .vbx-eyebrow { color: var(--accent); }
.a1-vb .vbx-feature h3 { margin: 0; font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem); line-height: 1.08; }
.a1-vb .vbx-feature h3 a { color: #fff; text-decoration: none; }
.a1-vb .vbx-feature h3 a::after { content: ""; position: absolute; inset: 0; }
.a1-vb .vbx-feature p { margin: 0; color: rgb(246 241 231 / 0.88); font-size: var(--step-lead); line-height: 1.5; }
.a1-vb .vbx-more a { position: relative; z-index: 1; color: var(--accent) !important; font-weight: 700; text-decoration: none; }
.a1-vb .vbx-more a span { display: inline-block; transition: transform 220ms var(--ease-out); }
.a1-vb .vbx-feature:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) { .a1-vb .vbx-feature:hover .vbx-feature-photo img { transform: scale(1.04); } .a1-vb .vbx-feature:hover .vbx-more a span { transform: translateX(4px); } }
.a1-vb .vbx-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.a1-vb .vbx-story { position: relative; display: grid; gap: 10px; align-content: start; }
.a1-vb .vbx-story-photo { margin: 0 0 6px; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; box-shadow: var(--lift); }
.a1-vb .vbx-story-photo img { transition: transform 500ms var(--ease-out); }
.a1-vb .vbx-story h3 { margin: 0; font-size: 1.375rem; }
.a1-vb .vbx-story h3 a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--ink); text-decoration: none; }
.a1-vb .vbx-story h3 a::after { content: ""; position: absolute; inset: 0; }
.a1-vb .vbx-story h3 a::before { content: "→"; order: 1; flex: none; transition: transform 220ms var(--ease-out); }
.a1-vb .vbx-story p { margin: 0; color: #4f5a52; }
.a1-vb .vbx-story:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: var(--r); }
@media (hover: hover) { .a1-vb .vbx-story:hover .vbx-story-photo img { transform: scale(1.05); } .a1-vb .vbx-story:hover h3 a::before { transform: translateX(4px); } }
/* The full list: closed by default, a plain disclosure (keyboard and screen readers get the native control). */
.a1-vb .vbx-dir { margin-top: 28px; border-radius: var(--r); background: #fffdf8; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-vb .vbx-dir summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 20px 24px; cursor: pointer; list-style: none; border-radius: var(--r); }
.a1-vb .vbx-dir summary::-webkit-details-marker { display: none; }
.a1-vb .vbx-dir-t { font-size: 1.25rem; font-weight: 600; }
.a1-vb .vbx-dir-s { grid-column: 1; color: #4f5a52; font-size: 0.9375rem; }
.a1-vb .vbx-dir summary i { grid-column: 2; grid-row: 1 / 3; position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--leaf-1); transition: background-color 220ms ease, transform 300ms var(--ease-out); }
.a1-vb .vbx-dir summary i::before, .a1-vb .vbx-dir summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--ink); transition: transform 300ms var(--ease-out); }
.a1-vb .vbx-dir summary i::after { transform: rotate(90deg); }
.a1-vb .vbx-dir[open] summary i { background: var(--accent); }
.a1-vb .vbx-dir[open] summary i::after { transform: rotate(0deg); }
@media (hover: hover) { .a1-vb .vbx-dir summary:hover i { background: var(--accent); } }
.a1-vb .vbx-dir summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-vb .vbx-dir-body { padding: 0 24px 24px; }
.a1-vb .vbx-dir-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.a1-vb .vbx-dir-list a { display: grid; gap: 3px; height: 100%; padding: 14px 16px; border-radius: 12px; background: var(--bg); color: var(--ink); text-decoration: none; transition: background-color 220ms ease; }
.a1-vb .vbx-dir-list strong { font-size: 1rem; }
.a1-vb .vbx-dir-list strong::after { content: " →"; display: inline-block; opacity: 0.45; transition: transform 220ms var(--ease-out), opacity 220ms ease; }
.a1-vb .vbx-dir-list span { color: #4f5a52; font-size: 0.875rem; line-height: 1.4; }
@media (hover: hover) { .a1-vb .vbx-dir-list a:hover { background: var(--leaf-1); } .a1-vb .vbx-dir-list a:hover strong::after { opacity: 1; transform: translateX(4px); } }
.a1-vb .vbx-dir-list a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-vb .vbx-dir-hub { margin: 16px 0 0; }
.a1-vb .vbx-dir-hub a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-vb .vbx-dir-hub a span { display: inline-block; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-vb .vbx-dir-hub a:hover span { transform: translateX(4px); } }

/* 5. Projects: slider and courtyard pair side by side, four finished projects below. */
.a1-vb .vbx-proj-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(190px, 17vw, 250px)); gap: 14px; }
.a1-vb .vbx-proj-ba { grid-column: 1 / 3; grid-row: 1 / 3; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
.a1-vb .vbx-proj-ba .c-hero-compare, .a1-vb .vbx-proj-ba .c-compare { height: 100%; min-height: 0; }
.a1-vb .vbx-proj-ba .c-compare { aspect-ratio: auto; max-height: none; border-radius: var(--r); }
.a1-vb .vbx-ba-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 48px; }
.a1-vb .vbx-ba-bar .vbx-proj-cap { flex: 1 1 200px; }
.a1-vb .vbx-ba-btns { flex: none; }
.a1-vb .vbx-proj-cap { margin: 0; color: #4f5a52; font-size: 0.9375rem; line-height: 1.4; }
.a1-vb .vbx-proj-cap strong { color: var(--ink); margin-right: 6px; }
.a1-vb .vbx-ba-btns { display: none; }
.a1-vb.vbx-ready .vbx-ba-btns { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--surface); }
.a1-vb .vbx-ba-btns button { min-height: 40px; padding: 0 16px !important; border-radius: 999px !important; background: transparent !important; color: var(--ink) !important; font-size: 0.875rem !important; font-weight: 700 !important; box-shadow: none !important; cursor: pointer; transition: background-color 220ms ease, color 220ms ease; }
.a1-vb .vbx-ba-btns button[aria-pressed="true"] { background: var(--ink) !important; color: var(--on-dark) !important; }
@media (hover: hover) { .a1-vb .vbx-ba-btns button[aria-pressed="false"]:hover { background: rgb(13 42 28 / 0.08) !important; } }
.a1-vb .vbx-ba-btns button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-vb .vbx-shot { position: relative; margin: 0; min-height: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--lift); cursor: zoom-in; background: var(--surface); }
.a1-vb .vbx-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.a1-vb .vbx-shot figcaption { position: absolute; left: 10px; bottom: 10px; margin: 0; padding: 4px 11px; border-radius: 999px; background: rgb(246 241 231 / 0.92); color: var(--ink); font-size: 0.8125rem; font-weight: 600; pointer-events: none; transition: transform 300ms var(--ease-out); }
.a1-vb .vbx-shot::after { content: ""; position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(0.8); transition: opacity 220ms ease, transform 300ms var(--ease-out);
  background: rgb(246 241 231 / 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2a1c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center / 16px no-repeat; }
@media (hover: hover) { .a1-vb .vbx-shot:hover img { transform: scale(1.05); } .a1-vb .vbx-shot:hover::after { opacity: 1; transform: none; } }
.a1-vb .vbx-shot:focus-within::after { opacity: 1; transform: none; }
.a1-vb .vbx-shot img:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

/* 6. Timeline on the dark band: icons on a line that fills as the section scrolls past. */
.a1-vb .vbx-tline { --g: clamp(16px, 2.4vw, 32px); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); --p: 1; }
.a1-vb .vbx-track { position: absolute; top: 23px; left: 24px; right: calc((100% - 3 * var(--g)) / 4 - 24px); height: 3px; border-radius: 3px; background: rgb(246 241 231 / 0.18); }
.a1-vb .vbx-track span { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--accent); }
.a1-vb .vbx-tstep { position: relative; display: grid; gap: 10px; align-content: start; }
.a1-vb .vbx-ticon { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 6px var(--ink); transition: background-color 400ms ease, color 400ms ease, transform 400ms var(--ease-out), box-shadow 400ms ease; }
.a1-vb .vbx-tnum { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.a1-vb .vbx-tstep h3 { margin: 0; font-size: 1.375rem; }
.a1-vb .vbx-tdesc { margin: 0; color: rgb(246 241 231 / 0.82); }
.a1-vb .vbx-time-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: clamp(36px, 5vw, 56px) 0 0; }
.a1-vb .vbx-time-call { color: var(--on-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-vb .vbx-time-call:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* With the script: a step waits, quieter, until the line reaches it, then its icon, label, title and text arrive. */
.a1-vb.vbx-ready .vbx-tstep:not(.is-on) .vbx-ticon { background: var(--ink); color: rgb(246 241 231 / 0.55); box-shadow: 0 0 0 6px var(--ink), inset 0 0 0 2px rgb(246 241 231 / 0.28); }
@media (prefers-reduced-motion: no-preference) {
  .a1-vb.vbx-ready .vbx-tstep:not(.is-on) .vbx-ticon { transform: scale(0.88); }
  .a1-vb.vbx-ready .vbx-tstep :is(.vbx-tnum, h3, .vbx-tdesc) { transition: opacity 400ms ease, transform 500ms var(--ease-out); }
  .a1-vb.vbx-ready .vbx-tstep:not(.is-on) :is(.vbx-tnum, h3, .vbx-tdesc) { opacity: 0.5; transform: translateY(8px); }
  .a1-vb.vbx-ready .vbx-tstep.is-on h3 { transition-delay: 60ms; }
  .a1-vb.vbx-ready .vbx-tstep.is-on .vbx-tdesc { transition-delay: 120ms; }
}

/* 7. Neighborhoods. */
.a1-vb .vbx-hoods { display: block; }
.a1-vb .vbx-hoods-text { display: grid; gap: 14px; }
.a1-vb .vbx-hoods-text h2, .a1-vb .vbx-hoods-text .c-lead { margin: 0; }
.a1-vb .vbx-also { margin: 0; color: #4f5a52; }
.a1-vb .vbx-also a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-vb .vbx-hood-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.a1-vb .vbx-hood-list li { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border-radius: 12px; background: #fffdf8; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); font-weight: 600; transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--ease-out); }
.a1-vb .vbx-hood-list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); transition: background-color 220ms ease, transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-vb .vbx-hood-list li:hover { background: var(--leaf-1); } .a1-vb .vbx-hood-list li:hover::before { background: var(--ink); } }

/* 8-9. FAQ, then the estimate: the words on a dark panel next to the form card. */
.a1-vb .vbx-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-vb .vbx-est { align-items: stretch; }
.a1-vb .vbx-est .c-est-text { position: static; align-content: start; gap: 18px; padding: clamp(28px, 4vw, 48px); border-radius: 22px; background: var(--ink); color: var(--on-dark); box-shadow: var(--lift); }
.a1-vb .vbx-est .c-est-text h2 { margin: 0; color: #fff; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height: 1.05; }
.a1-vb .vbx-est .c-est-text p.vbx-eyebrow { font-size: 0.8125rem; line-height: 1.4; color: var(--accent); }
.a1-vb .vbx-est .c-est-text h2 + p { margin: 0; font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-vb .vbx-est .vbx-ticks { margin: 4px 0 0; font-weight: 600; }
.a1-vb .vbx-est-call { margin: 10px 0 0; padding-top: 22px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-vb .vbx-est-call a { display: grid; gap: 2px; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; letter-spacing: -0.01em; }
.a1-vb .vbx-est-call a span { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-vb .vbx-est-call a:hover { color: var(--accent) !important; } }
.a1-vb .vbx-est-call a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

/* Tablets and small laptops. */
@media (max-width: 1000px) {
  .a1-vb .vbx-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 8px; }
  .a1-vb .vbx-hero-media { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
  .a1-vb .vbx-hero-text { padding-block: 8px 24px; }
  .a1-vb .vbx-row, .a1-vb .vbx-feature { grid-template-columns: minmax(0, 1fr); }
  .a1-vb .vbx-row:nth-of-type(even) .vbx-row-photo { order: 0; }
  .a1-vb .vbx-notes { grid-template-columns: minmax(0, 1fr); }
  .a1-vb .vbx-feature-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .a1-vb .vbx-picker { grid-template-columns: minmax(0, 1fr); }
  .a1-vb.vbx-ready .vbx-opts { position: static; grid-template-columns: 1fr 1fr; }
  .a1-vb .vbx-opt-go { display: none; }
  .a1-vb .vbx-dir-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-vb .vbx-proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .a1-vb .vbx-proj-ba { grid-column: 1 / -1; grid-row: auto; }
  .a1-vb .vbx-proj-ba .c-hero-compare, .a1-vb .vbx-proj-ba .c-compare { height: auto; }
  .a1-vb .vbx-proj-ba .c-compare { aspect-ratio: 4 / 3; }
  .a1-vb .vbx-shot { aspect-ratio: 4 / 3; }
  .a1-vb .vbx-tline { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .a1-vb .vbx-track { display: none; }
  .a1-vb .vbx-est .c-est-text { padding: 28px; }
}
/* Phones. */
@media (max-width: 640px) {
  .a1-vb .vbx-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .a1-vb .vbx-hero-text { gap: 16px; }
  .a1-vb .vbx-sub { font-size: 1.0625rem; }
  .a1-vb .vbx-actions .wp-block-buttons { width: 100%; }
  .a1-vb .vbx-actions .wp-block-button, .a1-vb .vbx-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-vb .vbx-facts { font-size: 0.875rem; gap: 6px 16px; }
  .a1-vb .vbx-hero-media { border-radius: 18px; }
  .a1-vb .vbx-head-row { grid-template-columns: minmax(0, 1fr); }
  .a1-vb .vbx-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 14px; }
  .a1-vb .vbx-panel-photo { aspect-ratio: 16 / 10; }
  .a1-vb .vbx-recs { grid-template-columns: minmax(0, 1fr); }
  .a1-vb .vbx-cta { width: 100%; justify-content: center; }
  .a1-vb.vbx-ready .vbx-opts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .a1-vb .vbx-opt { min-height: 60px; padding: 10px 12px !important; font-size: 0.9375rem !important; gap: 10px; }
  .a1-vb .vbx-opt-n { width: 28px; height: 28px; }
  .a1-vb .vbx-duo { grid-template-columns: minmax(0, 1fr); }
  .a1-vb .vbx-dir summary { padding: 16px 18px; }
  .a1-vb .vbx-dir-body { padding: 0 14px 16px; }
  .a1-vb .vbx-dir-list { grid-template-columns: minmax(0, 1fr); }
  .a1-vb .vbx-proj-grid { gap: 8px; }
  .a1-vb .vbx-ba-bar { display: grid; }
  .a1-vb.vbx-ready .vbx-ba-btns { display: grid; grid-template-columns: repeat(3, 1fr); }
  .a1-vb .vbx-panel-photo { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .a1-vb .vbx-shot figcaption { font-size: 0.75rem; padding: 3px 9px; left: 8px; bottom: 8px; }
  /* The line runs down the left, from the first icon to the last. */
  .a1-vb .vbx-tline { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 64px; row-gap: 32px; }
  .a1-vb .vbx-track { display: block; top: 24px; bottom: var(--last, 0px); left: 23px; right: auto; width: 3px; height: auto; }
  .a1-vb .vbx-track span { inset: 0 0 auto 0; width: 100%; height: calc(var(--p) * 100%); }
  .a1-vb .vbx-ticon { position: absolute; left: -64px; top: 0; margin: 0; }
  .a1-vb .vbx-tstep { min-height: 48px; padding-top: 2px; }
  .a1-vb .vbx-time-cta { display: grid; justify-items: center; }
  .a1-vb .vbx-hood-list { grid-template-columns: 1fr 1fr; }
  .a1-vb .vbx-hood-list li { min-height: 48px; padding: 0 12px; font-size: 0.9375rem; }
}
@media (max-width: 400px) { .a1-vb .vbx-hero-media { aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) {
  .a1-vb .vbx-opt, .a1-vb .vbx-opt-n, .a1-vb .vbx-opt-go, .a1-vb .vbx-recs a, .a1-vb .vbx-shot img, .a1-vb .vbx-story-photo img, .a1-vb .vbx-feature-photo img, .a1-vb .vbx-row-photo img, .a1-vb .vbx-hood-list li, .a1-vb .vbx-ticon, .a1-vb .vbx-cta, .a1-vb .vbx-shot::after { transition: none; }
}

/* ===== Virginia Beach, round 3 ===== */
/* Selector: the words move in the direction of travel (next: from the right, previous: from the left) while the last
   answer leaves the other way. Phones: the stage follows the chosen answer's height (the script eases it), so no
   empty band is left under the shorter answers. */
@media (prefers-reduced-motion: no-preference) {
  .a1-vb.vbx-ready .vbx-panel:not(.is-active) .vbx-panel-text > * { transform: translateX(calc(var(--dir, 1) * 16px)); }
  .a1-vb.vbx-ready .vbx-panel.is-leaving .vbx-panel-text > * { transform: translateX(calc(var(--dir, 1) * -16px)); }
  .a1-vb.vbx-ready .vbx-panel:not(.is-active) .vbx-recs li { transform: translateX(calc(var(--dir, 1) * 10px)); }
}
@media (max-width: 640px) {
  .a1-vb.vbx-ready .vbx-stage { position: relative; }
  .a1-vb.vbx-ready .vbx-panel:not(.is-active) { position: absolute; inset: 0 0 auto 0; }
  .a1-vb .vbx-panel-cta { margin-top: 0 !important; }
}

/* Projects: the courtyard sod job leads, two large photos with an arrow between them, then its story in one line. */
.a1-vb .vbx-lead { display: grid; gap: 18px; margin-bottom: 22px; }
.a1-vb .vbx-lead-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.a1-vb .vbx-lead .vbx-shot { aspect-ratio: 4 / 3; border-radius: 20px; }
.a1-vb .vbx-lead .vbx-shot figcaption { top: 14px; left: 14px; bottom: auto; padding: 6px 14px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.a1-vb .vbx-lead-b figcaption { background: var(--ink) !important; color: var(--on-dark) !important; }
.a1-vb .vbx-lead-a figcaption { background: var(--accent) !important; color: var(--accent-ink) !important; }
.a1-vb .vbx-lead .vbx-shot::after { top: auto; bottom: 14px; right: 14px; }
.a1-vb .vbx-lead-arrow { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 1.5rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 6px var(--bg), 0 10px 24px -10px rgb(13 42 28 / 0.5); pointer-events: none; }
.a1-vb .vbx-lead-text { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 8px 32px; align-items: end; padding-bottom: 22px; border-bottom: 1px solid rgb(13 42 28 / 0.12); }
.a1-vb .vbx-lead-text .vbx-eyebrow { grid-column: 1 / -1; }
.a1-vb .vbx-lead-text h3 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1.1; }
.a1-vb .vbx-lead-text p { margin: 0; }
.a1-vb .vbx-lead-text p:not(.vbx-eyebrow):not(.vbx-lead-link) { color: #4f5a52; }
.a1-vb .vbx-lead-link a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--leaf-1); color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color 220ms ease, color 220ms ease; }
.a1-vb .vbx-lead-link a span { display: inline-block; margin-left: 4px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-vb .vbx-lead-link a:hover { background: var(--ink); color: var(--on-dark); } .a1-vb .vbx-lead-link a:hover span { transform: translateX(4px); } }
.a1-vb .vbx-lead-link a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .a1-vb.vbx-ready .vbx-lead .vbx-shot { clip-path: inset(0 0 0 0 round 20px); transition: clip-path 900ms var(--ease-out); }
  .a1-vb.vbx-ready .vbx-lead .vbx-lead-a { transition-delay: 220ms; }
  .a1-vb.vbx-ready .vbx-lead:not(.is-in) .vbx-lead-b { clip-path: inset(0 100% 0 0 round 20px); }
  .a1-vb.vbx-ready .vbx-lead:not(.is-in) .vbx-lead-a { clip-path: inset(0 0 0 100% round 20px); }
  .a1-vb.vbx-ready .vbx-lead-arrow { transition: transform 500ms var(--ease-out) 650ms, opacity 300ms ease 650ms; }
  .a1-vb.vbx-ready .vbx-lead:not(.is-in) .vbx-lead-arrow { transform: scale(0.4); opacity: 0; }
}
/* Below it: the steps slider and four finished projects (two by two beside it). */
.a1-vb .vbx-proj-grid .vbx-shot { min-height: 0; }

/* Timeline: a small glowing head rides the end of the line; each icon gives one soft pulse when it is reached. */
.a1-vb .vbx-track span::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgb(246 224 22 / 0.22); }
.a1-vb .vbx-ticon { z-index: 1; }
.a1-vb .vbx-ticon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .a1-vb .vbx-track span { transition: width 160ms linear, height 160ms linear; }
  .a1-vb.vbx-ready .vbx-tstep.is-on .vbx-ticon::after { animation: vbx-ping 750ms ease-out 1 both; }
}
@keyframes vbx-ping { from { box-shadow: 0 0 0 0 rgb(246 224 22 / 0.55); } to { box-shadow: 0 0 0 16px rgb(246 224 22 / 0); } }

/* Neighborhoods: the words across the top, the twelve places in a grid, a dark tile for everywhere else. */
.a1-vb .vbx-hoods-text { max-width: 760px; }
.a1-vb .vbx-hood-grid { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.a1-vb .vbx-hood-list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
.a1-vb .vbx-hood-list li { min-height: 58px; transition: background-color 220ms ease; }
.a1-vb .vbx-hood-list li::before { width: 12px; height: 15px; border-radius: 0; background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M6 0a6 6 0 0 1 6 6c0 4-6 9-6 9S0 10 0 6a6 6 0 0 1 6-6zm0 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M6 0a6 6 0 0 1 6 6c0 4-6 9-6 9S0 10 0 6a6 6 0 0 1 6-6zm0 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.a1-vb .vbx-hood-more { display: grid; align-content: start; gap: 12px; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r); background: var(--ink); color: var(--on-dark); box-shadow: var(--lift); }
.a1-vb .vbx-hood-more p { margin: 0; }
.a1-vb .vbx-hood-q { color: #fff; font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.a1-vb .vbx-hood-cta { margin-top: 6px !important; }
.a1-vb .vbx-hood-more .vbx-also { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; }
.a1-vb .vbx-hood-more .vbx-also a { color: #fff; }
.a1-vb .vbx-hood-more .vbx-also a:focus-visible, .a1-vb .vbx-hood-more .vbx-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Estimate form on this page: taller fields, a full-weight send button with an arrow, and what happens next. */
.a1-vb .vbx-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-vb .vbx-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-vb .vbx-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; transition: background-color 220ms ease, transform 220ms var(--ease-out); }
.a1-vb .vbx-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-vb .vbx-est .kb-submit-field .kb-adv-form-submit-button:hover { transform: translateY(-2px); } .a1-vb .vbx-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }
.a1-vb .vbx-est-next { position: relative; margin: 16px 0 0; padding-left: 28px; color: #4f5a52; font-size: 0.9375rem; line-height: 1.45; }
.a1-vb .vbx-est-next::before { content: ""; position: absolute; left: 0; top: 0.1em; width: 18px; height: 18px; background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center / contain no-repeat; }

@media (max-width: 1000px) {
  .a1-vb .vbx-lead-text { grid-template-columns: minmax(0, 1fr) auto; }
  .a1-vb .vbx-lead-text h3 { grid-column: 1 / -1; }
  .a1-vb .vbx-hood-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .a1-vb .vbx-notes { grid-template-columns: minmax(0, 1fr); }
  .a1-vb .vbx-lead-photos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .a1-vb .vbx-lead .vbx-shot { border-radius: 16px; }
  .a1-vb.vbx-ready .vbx-lead .vbx-shot { clip-path: inset(0 0 0 0 round 16px); }
  .a1-vb .vbx-lead-arrow { width: 44px; height: 44px; margin: -22px 0 0 -22px; transform: rotate(90deg); font-size: 1.25rem; }
  .a1-vb.vbx-ready .vbx-lead:not(.is-in) .vbx-lead-arrow { transform: rotate(90deg) scale(0.4); }
  .a1-vb.vbx-ready .vbx-lead:not(.is-in) .vbx-lead-b { clip-path: inset(0 0 100% 0 round 16px); }
  .a1-vb.vbx-ready .vbx-lead:not(.is-in) .vbx-lead-a { clip-path: inset(100% 0 0 0 round 16px); }
  .a1-vb .vbx-lead-text { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .a1-vb .vbx-lead-link a { width: 100%; justify-content: center; }
  .a1-vb .vbx-track span::after { right: auto; left: 50%; top: auto; bottom: -6px; margin: 0 0 0 -6px; }
  .a1-vb .vbx-hood-list { grid-template-columns: 1fr 1fr; }
  .a1-vb .vbx-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-vb .vbx-lead-link a, .a1-vb .vbx-est .kb-submit-field .kb-adv-form-submit-button, .a1-vb .vbx-hood-list li { transition: none; } }
/* Selector: the incoming answer is put at its starting side without animating, then cross-fades in. */
.a1-vb .vbx-panel.vbx-snap, .a1-vb .vbx-panel.vbx-snap * { transition: none !important; }

/* ===== Chesapeake page (problem-led composition, the site's brand) =====
   Timing: hover 220 ms, state changes 300-350 ms, reveals 500-650 ms, all on --ease-out. Everything is scoped to
   .a1-chs; hidden-until-revealed states apply only once the script has added .chs-ready. */
.a1-chs { --chs-sec: clamp(80px, 10vw, 136px); }
.a1-chs .chs-sec { padding-top: var(--chs-sec); }
.a1-chs .chs-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.a1-chs .chs-head h2, .a1-chs .chs-head .c-lead { margin: 0; }
.a1-chs .chs-head-row { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: end; gap: 14px 48px; }
.a1-chs .chs-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-chs .chs-eyebrow::before { content: ""; flex: none; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.a1-chs .chs-k { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.a1-chs .c-arrow-down { transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-chs .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }
.a1-chs .chs-arrow-link a span { display: inline-block; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-chs .chs-arrow-link a:hover span { transform: translateX(4px); } }
.a1-chs .chs-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: var(--r-control); background: var(--accent); color: var(--accent-ink) !important; font-weight: 700; text-decoration: none !important; box-shadow: 0 10px 24px -14px rgb(13 42 28 / 0.55); transition: background-color 220ms ease, transform 220ms var(--ease-out); }
.a1-chs .chs-cta span { display: inline-block; margin-left: 4px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-chs .chs-cta:hover { background: var(--accent-strong); transform: translateY(-2px); } .a1-chs .chs-cta:hover span { transform: translateX(4px); } }
.a1-chs .chs-cta:active { transform: translateY(0); }
.a1-chs .chs-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* 1. Hero: a masthead over a wide photo that rises into view; three facts set into its lower edge. */
.a1-chs .chs-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; }
.a1-chs .chs-hero-top { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); align-items: end; padding-bottom: clamp(24px, 3vw, 40px); }
.a1-chs .chs-hero-title { display: grid; gap: 18px; }
.a1-chs .chs-hero h1 { margin: 0; font-size: clamp(2.5rem, 1.2rem + 4.1vw, 5.1rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-chs .chs-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-chs .chs-l > span { display: inline-block; }
.a1-chs .chs-hero h1 em { font-style: normal; color: var(--ink-3); background: linear-gradient(var(--accent), var(--accent)) 0 92% / 100% 0.18em no-repeat; }
.a1-chs .chs-hero-side { display: grid; gap: 18px; padding-bottom: 6px; }
.a1-chs .chs-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; }
.a1-chs .chs-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-chs .chs-call { margin: 0; color: #4f5a52; font-size: 0.9375rem; }
.a1-chs .chs-call a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-chs .chs-hero-media { position: relative; aspect-ratio: 21 / 9; border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-chs figure.chs-hero-photo { position: absolute; inset: 0; margin: 0; border-radius: 0; }
.a1-chs .chs-hero-photo img { object-position: 50% 58%; }
.a1-chs .chs-facts { position: absolute; right: 0; bottom: 0; margin: 0; padding: 18px 24px; list-style: none; display: grid; grid-template-columns: repeat(3, auto); gap: 30px; border-radius: 20px 0 0 0; background: rgb(246 241 231 / 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.a1-chs .chs-facts li { display: grid; gap: 2px; }
.a1-chs .chs-facts strong { font-size: 1.0625rem; }
.a1-chs .chs-facts span { color: #4f5a52; font-size: 0.875rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-chs .chs-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-chs .chs-l:nth-child(1) > span { animation-delay: 0.12s; }
  .js .a1-chs .chs-l:nth-child(2) > span { animation-delay: 0.26s; }
  .js .a1-chs .chs-hero .chs-in { animation: c-up 0.65s var(--ease-out) both; }
  .js .a1-chs .chs-eyebrow.chs-in { animation-delay: 0.04s; }
  .js .a1-chs .chs-sub.chs-in { animation-delay: 0.45s; }
  .js .a1-chs .chs-actions.chs-in { animation-delay: 0.58s; }
  .js .a1-chs .chs-call.chs-in { animation-delay: 0.7s; }
  .js .a1-chs .chs-hero h1 em { animation: chs-underline 0.7s var(--ease-out) 0.9s both; }
  .js .a1-chs .chs-hero-media { animation: chs-rise 1.1s var(--ease-out) 0.2s both; }
  .js .a1-chs .chs-hero-photo img { animation: chs-settle 1.6s var(--ease-out) 0.2s both; }
  .js .a1-chs .chs-facts { animation: c-up 0.6s var(--ease-out) 1s both; }
}
@keyframes chs-rise { from { clip-path: inset(38% 0 0 0 round 24px); } to { clip-path: inset(0 0 0 0 round 24px); } }
@keyframes chs-settle { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes chs-underline { from { background-size: 0% 0.18em; } to { background-size: 100% 0.18em; } }

/* Scroll reveals. */
@media (prefers-reduced-motion: no-preference) {
  .a1-chs.chs-ready .chs-r:not(.is-in) { opacity: 0; transform: translateY(26px); }
  .a1-chs.chs-ready .chs-r { transition: opacity 550ms ease, transform 650ms var(--ease-out); }
  .a1-chs.chs-ready .chs-r.chs-d1 { transition-delay: 90ms; }
  .a1-chs.chs-ready .chs-r.chs-d2 { transition-delay: 180ms; }
  .a1-chs.chs-ready .chs-r.chs-d3 { transition-delay: 270ms; }
}

/* 2. Yard stories: a large photo with a second one set into its corner, alternating sides. */
.a1-chs .chs-story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-bottom: clamp(64px, 8vw, 112px); }
.a1-chs .chs-story-lawn .chs-story-media { order: 2; }
.a1-chs .chs-story-media { position: relative; padding-bottom: clamp(48px, 6vw, 84px); }
.a1-chs .chs-story-main { width: 84%; margin: 0; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; box-shadow: var(--lift); }
.a1-chs .chs-story-inset { position: absolute; right: 0; bottom: 0; width: 40%; margin: 0; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; border: 6px solid var(--bg); box-shadow: var(--lift); }
.a1-chs .chs-story-lawn .chs-story-main { margin-left: auto; }
.a1-chs .chs-story-lawn .chs-story-inset { right: auto; left: 0; }
.a1-chs .chs-story-media img { transition: transform 600ms var(--ease-out); }
@media (hover: hover) { .a1-chs .chs-story:hover .chs-story-main img { transform: scale(1.03); } }
.a1-chs .chs-story-text { display: grid; gap: 14px; max-width: 56ch; }
.a1-chs .chs-story-text p { margin: 0; }
.a1-chs .chs-story-l { font-size: clamp(3.4rem, 2.6rem + 2.6vw, 5rem); font-weight: 600; line-height: 0.85; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px var(--ink-3); }
.a1-chs .chs-story-text h3 { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.08; }
.a1-chs .chs-story-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 6px; padding-top: 18px; border-top: 1px solid rgb(13 42 28 / 0.14); }
.a1-chs .chs-story-cols ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.a1-chs .chs-story-cols li { position: relative; padding-left: 18px; font-size: 0.9688rem; line-height: 1.45; }
.a1-chs .chs-story-cols li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--ink-3); }
.a1-chs .chs-story-cols div:first-child li::before { background: var(--bg); }
.a1-chs .chs-story-note { color: #4f5a52; font-size: 0.9375rem; font-style: italic; }
.a1-chs .chs-story-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px !important; }
.a1-chs .chs-story-links a, .a1-chs .chs-note-link a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); font-weight: 700; text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 85% / 100% 3px no-repeat; transition: background-size 220ms var(--ease-out); }
.a1-chs .chs-story-links a span, .a1-chs .chs-note-link a span { display: inline-block; margin-left: 4px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-chs .chs-story-links a:hover span, .a1-chs .chs-note-link a:hover span { transform: translateX(4px); } .a1-chs .chs-story-links a:hover, .a1-chs .chs-note-link a:hover { background-size: 100% 40%; } }
.a1-chs .chs-story-links a:focus-visible, .a1-chs .chs-note-link a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .a1-chs.chs-ready .chs-story { transform: none !important; opacity: 1 !important; }
  .a1-chs.chs-ready .chs-story .chs-story-main { clip-path: inset(0 0 0 0 round 20px); transition: clip-path 900ms var(--ease-out); }
  .a1-chs.chs-ready .chs-story:not(.is-in) .chs-story-main { clip-path: inset(0 100% 0 0 round 20px); }
  .a1-chs.chs-ready .chs-story-lawn:not(.is-in) .chs-story-main { clip-path: inset(0 0 0 100% round 20px); }
  .a1-chs.chs-ready .chs-story .chs-story-inset { transition: opacity 500ms ease 450ms, transform 650ms var(--ease-out) 450ms; }
  .a1-chs.chs-ready .chs-story:not(.is-in) .chs-story-inset { opacity: 0; transform: translateY(28px); }
  .a1-chs.chs-ready .chs-story .chs-story-text > * { transition: opacity 500ms ease, transform 600ms var(--ease-out); }
  .a1-chs.chs-ready .chs-story:not(.is-in) .chs-story-text > * { opacity: 0; transform: translateY(16px); }
  .a1-chs.chs-ready .chs-story.is-in .chs-story-text > :nth-child(2) { transition-delay: 120ms; }
  .a1-chs.chs-ready .chs-story.is-in .chs-story-text > :nth-child(3) { transition-delay: 180ms; }
  .a1-chs.chs-ready .chs-story.is-in .chs-story-text > :nth-child(n+4) { transition-delay: 240ms; }
}
.a1-chs .chs-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.a1-chs .chs-note { display: grid; align-content: start; gap: 10px; padding-top: 18px; border-top: 2px solid var(--ink); }
.a1-chs .chs-note h3 { margin: 0; font-size: 1.25rem; }
.a1-chs .chs-note p { margin: 0; color: #3f4a43; }

/* 3. Yard Problem Finder on the dark band: icon buttons with a sliding bar, the answer cross-fading below. */
.a1-chs .chs-find { margin-top: clamp(24px, 4vw, 56px); padding-bottom: var(--chs-sec); background: var(--ink); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); color: var(--on-dark); }
.a1-chs .chs-find :is(h2, h3) { color: #fff; }
.a1-chs .chs-find .c-lead { color: rgb(246 241 231 / 0.84); }
.a1-chs .chs-find .chs-eyebrow { color: var(--accent); }
.a1-chs .chs-find .chs-k { color: rgb(246 241 231 / 0.62); }
.a1-chs .chs-fopts { display: none; }
.a1-chs.chs-ready .chs-fopts { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid rgb(246 241 231 / 0.16); }
.a1-chs .chs-fopt { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 16px 14px 18px !important; border-radius: 14px 14px 0 0 !important; background: transparent !important; color: rgb(246 241 231 / 0.72) !important; box-shadow: none !important; text-align: left; font-size: 1.0625rem !important; font-weight: 600 !important; line-height: 1.25 !important; cursor: pointer; transition: color 300ms ease, background-color 300ms ease; }
.a1-chs .chs-ficon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgb(246 241 231 / 0.08); color: var(--on-dark); transition: background-color 300ms ease, color 300ms ease, transform 300ms var(--ease-out); }
.a1-chs .chs-fopt[aria-selected="true"] { color: #fff !important; }
.a1-chs .chs-fopt[aria-selected="true"] .chs-ficon { background: var(--accent); color: var(--accent-ink); transform: translateY(-2px); }
@media (hover: hover) { .a1-chs .chs-fopt[aria-selected="false"]:hover { background: rgb(246 241 231 / 0.05) !important; color: #fff !important; } .a1-chs .chs-fopt[aria-selected="false"]:hover .chs-ficon { background: rgb(246 241 231 / 0.16); } }
.a1-chs .chs-fopt:active .chs-ficon { transform: scale(0.94); }
.a1-chs .chs-fopt:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.a1-chs .chs-fbar { position: absolute; left: 0; bottom: -2px; width: 25%; height: 3px; border-radius: 3px; background: var(--accent); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 350ms var(--ease-out); }
.a1-chs .chs-fstage { display: grid; gap: 40px; }
.a1-chs .chs-fpanel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.a1-chs.chs-ready .chs-fstage { gap: 0; }
.a1-chs.chs-ready .chs-fpanel { grid-area: 1 / 1; }
.a1-chs.chs-ready .chs-fpanel:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; }
.a1-chs .chs-fpanel:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 12px; }
.a1-chs .chs-fpanel-text { display: grid; gap: 14px; align-content: start; }
.a1-chs .chs-fpanel-text > * { margin: 0; }
.a1-chs .chs-fpanel h3 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.06; }
.a1-chs .chs-fnote { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); max-width: 46ch; }
.a1-chs .chs-fpanel-text .chs-k:not(:first-child) { margin-top: 10px; }
.a1-chs .chs-frecs { padding: 0; list-style: none; display: grid; border-top: 1px solid rgb(246 241 231 / 0.16); }
.a1-chs .chs-frecs a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 4px; border-bottom: 1px solid rgb(246 241 231 / 0.16); color: #fff; font-size: 1.0625rem; font-weight: 600; text-decoration: none; transition: padding 220ms var(--ease-out), color 220ms ease; }
.a1-chs .chs-frecs i { flex: none; font-style: normal; color: var(--accent); transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-chs .chs-frecs a:hover { padding-left: 12px; color: var(--accent); } .a1-chs .chs-frecs a:hover i { transform: translateX(4px); } }
.a1-chs .chs-frecs a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.a1-chs .chs-fcta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 12px !important; }
.a1-chs .chs-fcall { color: var(--on-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-chs .chs-fcall:focus-visible, .a1-chs .chs-find .chs-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.a1-chs .chs-fphoto { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 560px; border-radius: 22px; overflow: hidden; background: rgb(246 241 231 / 0.08); }
.a1-chs .chs-fphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-chs .chs-fphoto figcaption { position: absolute; left: 14px; bottom: 14px; padding: 4px 12px; border-radius: 999px; background: rgb(246 241 231 / 0.92); color: var(--ink); font-size: 0.8125rem; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .a1-chs.chs-ready .chs-fpanel { transition: opacity 300ms ease, visibility 0s linear 0s; }
  .a1-chs.chs-ready .chs-fpanel:not(.is-active) { transition: opacity 300ms ease, visibility 0s linear 300ms; }
  .a1-chs.chs-ready .chs-fphoto img { transition: transform 700ms var(--ease-out), filter 700ms ease; }
  .a1-chs.chs-ready .chs-fpanel:not(.is-active) .chs-fphoto img { transform: scale(1.08); filter: saturate(0.7); }
  .a1-chs.chs-ready .chs-fpanel-text > * { transition: opacity 300ms ease, transform 320ms var(--ease-out); }
  .a1-chs.chs-ready .chs-fpanel:not(.is-active) .chs-fpanel-text > * { opacity: 0; transform: translateY(12px); }
  .a1-chs.chs-ready .chs-fpanel.is-active .chs-fpanel-text > :nth-child(n+3) { transition-delay: 60ms; }
  .a1-chs.chs-ready .chs-fpanel.is-active .chs-fpanel-text > :nth-child(n+5) { transition-delay: 110ms; }
}
.a1-chs .chs-fpanel.chs-snap, .a1-chs .chs-fpanel.chs-snap * { transition: none !important; }

/* 4. Services: drainage and grading as the focus, four image tiles, every other service in one line. */
.a1-chs .chs-focus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.a1-chs .chs-focus-media { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); gap: 14px; align-items: end; }
.a1-chs .chs-focus-a { margin: 0; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; box-shadow: var(--lift); }
.a1-chs .chs-focus-b { margin: 0 0 48px; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; box-shadow: var(--lift); }
.a1-chs .chs-focus-text { display: grid; gap: 14px; }
.a1-chs .chs-focus-text > p, .a1-chs .chs-focus-text h3 { margin: 0; }
.a1-chs .chs-focus-text h3 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); line-height: 1.04; }
.a1-chs .chs-focus-text > p:not(.chs-eyebrow) { font-size: var(--step-lead); line-height: 1.5; }
.a1-chs .chs-focus-links { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid rgb(13 42 28 / 0.14); }
.a1-chs .chs-focus-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 18px 4px; border-bottom: 1px solid rgb(13 42 28 / 0.14); color: var(--ink); text-decoration: none; transition: background-color 220ms ease, padding 220ms var(--ease-out); }
.a1-chs .chs-focus-links strong { font-size: 1.1875rem; }
.a1-chs .chs-focus-links span { grid-column: 1; color: #4f5a52; font-size: 0.9375rem; }
.a1-chs .chs-focus-links i { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); font-style: normal; font-weight: 700; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-chs .chs-focus-links a:hover { padding-left: 12px; background: rgb(13 42 28 / 0.03); } .a1-chs .chs-focus-links a:hover i { transform: translateX(4px); } }
.a1-chs .chs-focus-links a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-chs .chs-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(48px, 6vw, 80px); }
.a1-chs .chs-tile { position: relative; display: grid; gap: 8px; align-content: start; }
.a1-chs .chs-tile-photo { margin: 0 0 6px; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; box-shadow: var(--lift); }
.a1-chs .chs-tile-photo img { transition: transform 500ms var(--ease-out); }
.a1-chs .chs-tile h3 { margin: 0; font-size: 1.1875rem; line-height: 1.25; }
.a1-chs .chs-tile h3 a { color: var(--ink); text-decoration: none; }
.a1-chs .chs-tile h3 a::before { content: ""; position: absolute; inset: 0; }
.a1-chs .chs-tile h3 a::after { content: "→"; display: inline-block; margin-left: 6px; color: var(--ink-3); transition: transform 220ms var(--ease-out); }
.a1-chs .chs-tile p { margin: 0; color: #4f5a52; font-size: 0.9375rem; line-height: 1.45; }
.a1-chs .chs-tile:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 18px; }
@media (hover: hover) { .a1-chs .chs-tile:hover .chs-tile-photo img { transform: scale(1.06); } .a1-chs .chs-tile:hover h3 a::after { transform: translateX(5px); } }
.a1-chs .chs-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: clamp(32px, 4vw, 48px) 0 0; padding-top: 22px; border-top: 1px solid rgb(13 42 28 / 0.14); }
.a1-chs .chs-more > span { color: var(--muted); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.a1-chs .chs-more a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(13 42 28 / 0.3); text-underline-offset: 0.25em; transition: text-decoration-color 220ms ease; }
@media (hover: hover) { .a1-chs .chs-more a:hover { text-decoration-color: var(--ink); } }
.a1-chs .chs-more a.chs-all { margin-left: auto; font-weight: 700; text-decoration: none; }
.a1-chs .chs-more a.chs-all span { display: inline-block; margin-left: 4px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-chs .chs-more a.chs-all:hover span { transform: translateX(4px); } }
.a1-chs .chs-more a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 5. Recent work: featured project beside the front-yard before-and-after, four more photos below. */
.a1-chs .chs-work { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: clamp(380px, 40vw, 560px); gap: 16px; }
.a1-chs .chs-ba { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.a1-chs .chs-ba .c-hero-compare, .a1-chs .chs-ba .c-compare { height: 100%; min-height: 0; }
.a1-chs .chs-ba .c-compare { aspect-ratio: auto; max-height: none; border-radius: 20px; }
.a1-chs .chs-ba-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; }
.a1-chs .chs-cap { margin: 0; color: #4f5a52; font-size: 0.9375rem; line-height: 1.4; flex: 1 1 200px; }
.a1-chs .chs-cap strong { display: block; color: var(--ink); }
.a1-chs .chs-ba-btns { display: none; }
.a1-chs.chs-ready .chs-ba-btns { flex: none; display: inline-flex; gap: 6px; }
.a1-chs .chs-ba-btns button { min-height: 42px; padding: 0 16px !important; border-radius: var(--r-control) !important; background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px rgb(13 42 28 / 0.25) !important; font-size: 0.875rem !important; font-weight: 700 !important; cursor: pointer; transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease; }
.a1-chs .chs-ba-btns button[aria-pressed="true"] { background: var(--ink) !important; color: var(--on-dark) !important; box-shadow: inset 0 0 0 1.5px var(--ink) !important; }
@media (hover: hover) { .a1-chs .chs-ba-btns button[aria-pressed="false"]:hover { box-shadow: inset 0 0 0 1.5px var(--ink) !important; } }
.a1-chs .chs-ba-btns button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-chs .chs-shot { position: relative; margin: 0; min-height: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--lift); background: var(--surface); cursor: zoom-in; }
.a1-chs .chs-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.a1-chs .chs-shot figcaption { position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 6px 13px; border-radius: 10px; background: rgb(13 42 28 / 0.82); color: #fff; font-size: 0.8125rem; font-weight: 600; pointer-events: none; transition: transform 300ms var(--ease-out); }
.a1-chs .chs-feat figcaption { left: 18px; bottom: 18px; padding: 10px 16px; font-size: 0.9375rem; }
@media (hover: hover) { .a1-chs .chs-shot:hover img { transform: scale(1.05); } .a1-chs .chs-shot:hover figcaption { transform: translateY(-3px); } }
.a1-chs .chs-shot img:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.a1-chs .chs-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.a1-chs .chs-strip .chs-shot { aspect-ratio: 4 / 3; border-radius: 16px; }

/* 6. Neighborhoods: words, a "not listed" note and the other cities on the left, a numbered list on the right. */
.a1-chs .chs-areas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.a1-chs .chs-areas-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-chs .chs-areas-text h2, .a1-chs .chs-areas-text .c-lead { margin: 0; }
.a1-chs .chs-areas-cta { display: grid; gap: 10px; padding: 22px 24px; border-radius: 18px; background: var(--leaf-1); }
.a1-chs .chs-areas-cta p { margin: 0; }
.a1-chs .chs-areas-q { font-size: 1.25rem; font-weight: 600; }
.a1-chs .chs-areas-cta .chs-cta { justify-self: start; margin-top: 4px; }
.a1-chs .chs-also { margin: 0; color: #4f5a52; }
.a1-chs .chs-also a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-chs .chs-hoods { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.a1-chs .chs-hoods li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 68px; padding: 10px 12px 10px 4px; border-bottom: 1px solid rgb(13 42 28 / 0.14); transition: background-color 250ms ease, padding 250ms var(--ease-out); }
.a1-chs .chs-hood-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); font-size: 0.8125rem; font-weight: 700; transition: background-color 250ms ease; }
.a1-chs .chs-hood-name { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 600; }
.a1-chs .chs-hood-note { padding: 4px 11px; border-radius: 999px; background: rgb(13 42 28 / 0.06); color: #3f4a43; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
@media (hover: hover) { .a1-chs .chs-hoods li:hover { background: rgb(13 42 28 / 0.03); padding-left: 12px; } .a1-chs .chs-hoods li:hover .chs-hood-n { background: var(--accent); } }

/* 7. Working with A-1: four facts in a row, each under a yellow rule. */
.a1-chs .chs-trust-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.a1-chs .chs-trust-list li { display: grid; align-content: start; gap: 8px; padding-top: 20px; border-top: 4px solid var(--accent); }
.a1-chs .chs-trust-list strong { font-size: 1.25rem; line-height: 1.2; }
.a1-chs .chs-trust-list span { color: #3f4a43; line-height: 1.5; }

/* 8-9. FAQ, then the estimate on a dark band. Form: same block, recipients and spam check as elsewhere. */
.a1-chs .chs-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-chs .chs-est { display: block; margin-top: var(--chs-sec); padding-block: var(--chs-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-chs .chs-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-chs .chs-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-chs .chs-est-text > *, .a1-chs .chs-est-text h2 { margin: 0; }
.a1-chs .chs-est-text h2 { color: #fff; font-size: clamp(2.1rem, 1.4rem + 2vw, 3.4rem); line-height: 1.02; }
.a1-chs .chs-est .chs-eyebrow { color: var(--accent); }
.a1-chs .chs-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-chs .chs-next { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; counter-reset: chs; }
.a1-chs .chs-next li { position: relative; display: grid; gap: 3px; padding-left: 54px; counter-increment: chs; }
.a1-chs .chs-next li::before { content: counter(chs); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.a1-chs .chs-next li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 42px; bottom: -14px; width: 2px; background: rgb(246 241 231 / 0.2); }
.a1-chs .chs-next strong { color: #fff; font-size: 1.0625rem; }
.a1-chs .chs-next span { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.45; }
.a1-chs .chs-est-call { padding-top: 20px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-chs .chs-est-call a { display: grid; gap: 2px; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-chs .chs-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-chs .chs-est-call a:hover { color: var(--accent) !important; } }
.a1-chs .chs-est-call a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.a1-chs .chs-est .c-est-form { color: var(--ink); }
.a1-chs .chs-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-chs .chs-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-chs .chs-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-chs .chs-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-chs .chs-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

/* Tablets and small laptops. */
@media (max-width: 1000px) {
  .a1-chs .chs-hero-top { grid-template-columns: minmax(0, 1fr); }
  .a1-chs .chs-hero-media { aspect-ratio: 16 / 9; }
  .a1-chs .chs-facts { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px 4px 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .a1-chs .chs-story, .a1-chs .chs-focus, .a1-chs .chs-areas, .a1-chs .chs-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-chs .chs-story-lawn .chs-story-media { order: 0; }
  .a1-chs .chs-head-row { grid-template-columns: minmax(0, 1fr); }
  .a1-chs .chs-fopt { flex-direction: column; align-items: flex-start; min-height: 0; font-size: 0.9375rem !important; }
  .a1-chs .chs-fpanel { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .a1-chs .chs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-chs .chs-work { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .a1-chs .chs-feat { aspect-ratio: 4 / 3; }
  .a1-chs .chs-ba .c-hero-compare, .a1-chs .chs-ba .c-compare { height: auto; }
  .a1-chs .chs-ba .c-compare { aspect-ratio: 4 / 3; }
  .a1-chs .chs-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-chs .chs-areas-text, .a1-chs .chs-est-text { position: static; }
  .a1-chs .chs-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones. */
@media (max-width: 640px) {
  .a1-chs .chs-hero h1 { font-size: clamp(2.3rem, 10.5vw, 2.9rem); }
  .a1-chs .chs-hero-title, .a1-chs .chs-hero-side { gap: 14px; }
  .a1-chs .chs-sub { font-size: 1.0625rem; }
  .a1-chs .chs-actions .wp-block-buttons, .a1-chs .chs-actions .wp-block-button, .a1-chs .chs-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-chs .chs-hero-media { aspect-ratio: 4 / 3; border-radius: 18px; }
  .a1-chs .chs-facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .a1-chs .chs-facts li { grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; }
  .a1-chs .chs-story-main { width: 88%; border-radius: 16px; }
  .a1-chs .chs-story-inset { width: 42%; border-width: 4px; }
  .a1-chs .chs-story-cols { grid-template-columns: minmax(0, 1fr); }
  .a1-chs .chs-notes { grid-template-columns: minmax(0, 1fr); }
  .a1-chs.chs-ready .chs-fopts { grid-template-columns: 1fr 1fr; gap: 8px; border-bottom: 0; }
  .a1-chs .chs-fopt { flex-direction: row; align-items: center; min-height: 64px; padding: 10px 12px !important; border-radius: 14px !important; background: rgb(246 241 231 / 0.06) !important; box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.12) !important; font-size: 0.9375rem !important; gap: 10px; }
  .a1-chs .chs-fopt[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--accent) !important; background: rgb(246 241 231 / 0.1) !important; }
  .a1-chs .chs-ficon { width: 38px; height: 38px; border-radius: 11px; }
  .a1-chs .chs-ficon svg { width: 20px; height: 20px; }
  .a1-chs .chs-fbar { display: none; }
  .a1-chs .chs-fpanel { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .a1-chs .chs-fphoto { order: -1; aspect-ratio: 16 / 10; border-radius: 16px; }
  .a1-chs.chs-ready .chs-fstage { position: relative; }
  .a1-chs.chs-ready .chs-fpanel:not(.is-active) { position: absolute; inset: 0 0 auto 0; }
  .a1-chs .chs-fcta { display: grid; justify-items: center; }
  .a1-chs .chs-fcta .chs-cta { width: 100%; }
  .a1-chs .chs-focus-media { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 10px; }
  .a1-chs .chs-focus-b { margin-bottom: 28px; }
  .a1-chs .chs-tiles { gap: 14px; }
  .a1-chs .chs-tile-photo { aspect-ratio: 1 / 1; }
  .a1-chs .chs-tile p { display: none; }
  .a1-chs .chs-more a.chs-all { margin-left: 0; }
  .a1-chs .chs-ba-bar { display: grid; }
  .a1-chs.chs-ready .chs-ba-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .a1-chs .chs-strip { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding-bottom: 6px; scrollbar-width: thin; }
  .a1-chs .chs-strip .chs-shot { scroll-snap-align: start; }
  .a1-chs .chs-hoods li { grid-template-columns: 40px minmax(0, 1fr); min-height: 60px; }
  .a1-chs .chs-hood-note { grid-column: 2; justify-self: start; margin-top: -4px; }
  .a1-chs .chs-areas-cta .chs-cta { justify-self: stretch; }
  .a1-chs .chs-trust-list { grid-template-columns: minmax(0, 1fr); }
  .a1-chs .chs-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .a1-chs .chs-fopt, .a1-chs .chs-ficon, .a1-chs .chs-fbar, .a1-chs .chs-frecs a, .a1-chs .chs-shot img, .a1-chs .chs-tile-photo img, .a1-chs .chs-story-media img, .a1-chs .chs-focus-links a, .a1-chs .chs-hoods li, .a1-chs .chs-cta { transition: none; }
}
/* Chesapeake: story B's corner photo is a landscape shot, so its frame is landscape too. */
.a1-chs .chs-story-lawn .chs-story-inset { width: 50%; aspect-ratio: 4 / 3; }
/* Chesapeake: the dark estimate band runs straight into the footer. */
.a1-calm.a1-chs { padding-bottom: 0; }
/* Tablets and phones: the photo keeps its frame and the three facts sit under it, not over it. */
@media (max-width: 1000px) {
  .a1-chs .chs-hero-media { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  .a1-chs figure.chs-hero-photo { position: relative; inset: auto; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; box-shadow: var(--lift); }
}
@media (max-width: 640px) { .a1-chs figure.chs-hero-photo { aspect-ratio: 4 / 3; border-radius: 18px; } }

/* ===== Norfolk page (makeover-led composition, the site's brand) =====
   Timing: hover 220 ms, state changes 300-350 ms, reveals 500-650 ms, all on --ease-out. Everything is scoped to
   .a1-nfk; hidden-until-revealed states apply only once the script has added .nfk-ready. */
.a1-nfk { --nfk-sec: clamp(80px, 10vw, 136px); }
.a1-nfk .nfk-sec { padding-top: var(--nfk-sec); }
.a1-nfk .nfk-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.a1-nfk .nfk-head h2, .a1-nfk .nfk-head .c-lead { margin: 0; }
.a1-nfk .nfk-head-row { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 48px; }
.a1-nfk .nfk-head-row .c-lead { max-width: 46ch; }
.a1-nfk .nfk-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--leaf-1); color: var(--ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.a1-nfk .nfk-k { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.a1-nfk .c-arrow-down { transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-nfk .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }
.a1-nfk .nfk-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: var(--r-control); background: var(--accent); color: var(--accent-ink) !important; font-weight: 700; text-decoration: none !important; box-shadow: 0 10px 24px -14px rgb(13 42 28 / 0.55); transition: background-color 220ms ease, transform 220ms var(--ease-out); }
.a1-nfk .nfk-cta span { display: inline-block; margin-left: 4px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-nfk .nfk-cta:hover { background: var(--accent-strong); transform: translateY(-2px); } .a1-nfk .nfk-cta:hover span { transform: translateX(4px); } }
.a1-nfk .nfk-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* 1. Hero: words left; the same front entry before (behind) and after (in front), overlapping. */
.a1-nfk .nfk-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 80px); align-items: center; min-height: min(calc(100svh - 120px), 760px); }
.a1-nfk .nfk-hero-text { display: grid; gap: 20px; padding-block: 24px; }
.a1-nfk .nfk-hero h1 { margin: 0; font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; font-weight: 600; }
.a1-nfk .nfk-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-nfk .nfk-l > span { display: inline-block; }
.a1-nfk .nfk-hero h1 em { font-style: normal; position: relative; white-space: nowrap; }
.a1-nfk .nfk-hero h1 em::after { content: ""; position: absolute; left: -0.08em; right: -0.08em; bottom: 0.06em; height: 0.34em; border-radius: 0.1em; background: var(--accent); z-index: -1; transform-origin: 0 50%; }
.a1-nfk .nfk-hero h1 { position: relative; z-index: 0; }
.a1-nfk .nfk-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 40ch; }
.a1-nfk .nfk-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-nfk .nfk-call { margin: 0; color: #4f5a52; font-size: 0.9375rem; max-width: 52ch; }
.a1-nfk .nfk-call a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
.a1-nfk .nfk-hero-media { position: relative; height: min(640px, 72vh); min-height: 460px; }
.a1-nfk .nfk-hero-media figure { position: absolute; margin: 0; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; box-shadow: var(--lift); }
.a1-nfk .nfk-hero-b { left: 0; top: 0; width: 50%; }
.a1-nfk .nfk-hero-a { right: 0; bottom: 34px; width: 60%; z-index: 1; border: 8px solid var(--bg); border-radius: 26px !important; }
.a1-nfk .nfk-hero-media figcaption { position: absolute; left: 14px; top: 14px; margin: 0; padding: 6px 14px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.a1-nfk .nfk-hero-b figcaption { background: var(--ink); color: var(--on-dark); }
.a1-nfk .nfk-hero-a figcaption { background: var(--accent); color: var(--accent-ink); }
.a1-nfk .nfk-hero-cap { position: absolute; left: 0; bottom: 0; margin: 0; color: #4f5a52; font-size: 0.875rem; font-weight: 600; max-width: 36%; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-nfk .nfk-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-nfk .nfk-l:nth-child(1) > span { animation-delay: 0.12s; }
  .js .a1-nfk .nfk-l:nth-child(2) > span { animation-delay: 0.26s; }
  .js .a1-nfk .nfk-hero .nfk-in { animation: c-up 0.65s var(--ease-out) both; }
  .js .a1-nfk .nfk-eyebrow.nfk-in { animation-delay: 0.04s; }
  .js .a1-nfk .nfk-sub.nfk-in { animation-delay: 0.45s; }
  .js .a1-nfk .nfk-actions.nfk-in { animation-delay: 0.58s; }
  .js .a1-nfk .nfk-call.nfk-in { animation-delay: 0.7s; }
  .js .a1-nfk .nfk-hero h1 em::after { animation: nfk-mark 0.6s var(--ease-out) 0.85s both; }
  .js .a1-nfk .nfk-hero-b { animation: nfk-in-left 0.9s var(--ease-out) 0.2s both; }
  .js .a1-nfk .nfk-hero-a { animation: nfk-in-up 1s var(--ease-out) 0.5s both; }
  .js .a1-nfk .nfk-hero-cap { animation: c-up 0.6s var(--ease-out) 1.1s both; }
}
@keyframes nfk-mark { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nfk-in-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes nfk-in-up { from { opacity: 0; transform: translateY(40px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Scroll reveals. */
@media (prefers-reduced-motion: no-preference) {
  .a1-nfk.nfk-ready .nfk-r:not(.is-in) { opacity: 0; transform: translateY(26px); }
  .a1-nfk.nfk-ready .nfk-r { transition: opacity 550ms ease, transform 650ms var(--ease-out); }
}

/* 2. Conditions: on wide screens one photo frame stays in view while the six notes scroll past it. */
.a1-nfk .nfk-scrolly { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.a1-nfk .nfk-frame { display: none; }
.a1-nfk .nfk-cond-list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(28px, 4vw, 48px); }
.a1-nfk .nfk-cond { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 20px; align-items: start; }
.a1-nfk .nfk-cond-n { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-3); padding-top: 0.45em; }
.a1-nfk .nfk-cond h3 { margin: 0 0 8px; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1.1; }
.a1-nfk .nfk-cond p { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 44ch; }
.a1-nfk .nfk-cond-pic { grid-column: 1 / -1; position: relative; margin: 10px 0 0; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-nfk .nfk-cond-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-nfk .nfk-cond-pic figcaption { position: absolute; left: 12px; bottom: 12px; padding: 4px 11px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.75rem; font-weight: 600; }
@media (min-width: 1001px) {
  .a1-nfk.nfk-ready .nfk-scrolly { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .a1-nfk.nfk-ready .nfk-frame { display: block; position: sticky; top: calc(50vh - min(32vh, 300px)); height: min(64vh, 600px); border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
  .a1-nfk .nfk-frame-pic { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 500ms ease, transform 900ms var(--ease-out); transform: scale(1.05); }
  .a1-nfk .nfk-frame-pic.is-on { opacity: 1; transform: none; }
  .a1-nfk .nfk-frame-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .a1-nfk .nfk-frame-n { position: absolute; left: 16px; bottom: 16px; z-index: 1; padding: 6px 14px; border-radius: 999px; background: rgb(13 42 28 / 0.85); color: #fff; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; }
  .a1-nfk.nfk-ready .nfk-cond-list { gap: 0; padding-block: 6vh 22vh; }
  .a1-nfk.nfk-ready .nfk-cond { min-height: 46vh; align-content: center; padding-block: 24px; border-top: 1px solid rgb(13 42 28 / 0.12); transition: opacity 400ms ease; }
  .a1-nfk.nfk-ready .nfk-cond:not(.is-on) { opacity: 0.38; }
  .a1-nfk.nfk-ready .nfk-cond-pic { display: none; }
  .a1-nfk.nfk-ready .nfk-cond-n { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--surface); transition: background-color 300ms ease; }
  .a1-nfk.nfk-ready .nfk-cond.is-on .nfk-cond-n { background: var(--accent); color: var(--accent-ink); }
}

/* 3. Makeover planner on a light-green band: toggles, the plan in order, and the hand-off to the form. */
.a1-nfk .nfk-plan { margin-top: clamp(40px, 6vw, 80px); padding-bottom: var(--nfk-sec); background: var(--leaf-1); box-shadow: 0 0 0 100vmax var(--leaf-1); clip-path: inset(0 -100vmax); }
.a1-nfk .nfk-plan .nfk-eyebrow { background: #fffdf8; }
.a1-nfk .nfk-needs, .a1-nfk .nfk-plan-out { display: none; }
.a1-nfk.nfk-ready .nfk-needs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-nfk.nfk-ready .nfk-plan-out { display: grid; gap: 18px; }
.a1-nfk.nfk-ready .nfk-plan-table { display: none; }
.a1-nfk .nfk-need { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 18px 10px 12px !important; border-radius: 999px !important; background: #fffdf8 !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px rgb(13 42 28 / 0.14) !important; font-size: 1rem !important; font-weight: 600 !important; line-height: 1.25 !important; text-align: left; cursor: pointer; transition: background-color 250ms ease, color 250ms ease, box-shadow 250ms ease, transform 220ms var(--ease-out); }
.a1-nfk .nfk-tick { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgb(13 42 28 / 0.3); transition: background-color 250ms ease, box-shadow 250ms ease; }
.a1-nfk .nfk-tick::after { content: ""; position: absolute; left: 8px; top: 6px; width: 8px; height: 12px; border: solid var(--accent-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform 250ms var(--ease-out); }
.a1-nfk .nfk-need[aria-pressed="true"] { background: var(--ink) !important; color: #fff !important; box-shadow: 0 10px 22px -14px rgb(13 42 28 / 0.6) !important; }
.a1-nfk .nfk-need[aria-pressed="true"] .nfk-tick { background: var(--accent); box-shadow: none; }
.a1-nfk .nfk-need[aria-pressed="true"] .nfk-tick::after { transform: rotate(45deg) scale(1); }
@media (hover: hover) { .a1-nfk .nfk-need[aria-pressed="false"]:hover { box-shadow: inset 0 0 0 1.5px var(--ink) !important; transform: translateY(-1px); } }
.a1-nfk .nfk-need:active { transform: scale(0.98); }
.a1-nfk .nfk-need:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-nfk .nfk-plan-empty { margin: 0; padding: 22px 24px; border-radius: 18px; border: 2px dashed rgb(13 42 28 / 0.2); color: #4f5a52; }
.a1-nfk .nfk-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.a1-nfk .nfk-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px; border-radius: 18px; background: #fffdf8; box-shadow: var(--lift); }
.a1-nfk .nfk-step[hidden] { display: none; }
.a1-nfk .nfk-step-n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--accent); font-weight: 700; }
.a1-nfk .nfk-step h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.a1-nfk .nfk-step p { margin: 0; color: #3f4a43; font-size: 0.9688rem; line-height: 1.45; }
.a1-nfk .nfk-step-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px !important; }
.a1-nfk .nfk-step-links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
.a1-nfk .nfk-step-links a[hidden] { display: none; }
.a1-nfk .nfk-step-links a span { display: inline-block; margin-left: 4px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-nfk .nfk-step-links a:hover span { transform: translateX(4px); } }
.a1-nfk .nfk-step-links a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-nfk .nfk-plan-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 8px 0 0; }
.a1-nfk .nfk-plan-cta[hidden] { display: none; }
.a1-nfk .nfk-plan-note { color: #4f5a52; font-size: 0.875rem; max-width: 42ch; }
.a1-nfk .nfk-plan-table { width: 100%; border-collapse: collapse; background: #fffdf8; border-radius: 14px; overflow: hidden; }
.a1-nfk .nfk-plan-table caption { text-align: left; font-weight: 700; padding-bottom: 10px; }
.a1-nfk .nfk-plan-table :is(th, td) { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgb(13 42 28 / 0.1); vertical-align: top; }

/* 4. Services: a numbered index, each row with a small photo, the arrow sliding on hover. */
.a1-nfk .nfk-svc-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.a1-nfk .nfk-svc a { display: grid; grid-template-columns: 56px minmax(0, 1fr) 132px 48px; gap: 20px; align-items: center; min-height: 112px; padding: 14px 8px; border-bottom: 1px solid rgb(13 42 28 / 0.14); color: var(--ink); text-decoration: none; transition: background-color 250ms ease, padding 250ms var(--ease-out); }
.a1-nfk .nfk-svc-n { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.a1-nfk .nfk-svc-t { display: grid; gap: 4px; }
.a1-nfk .nfk-svc-t strong { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.15; }
.a1-nfk .nfk-svc-t span { color: #4f5a52; font-size: 0.9688rem; line-height: 1.45; }
.a1-nfk .nfk-svc-pic { display: block; width: 132px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--surface); }
.a1-nfk .nfk-svc-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease-out); }
.a1-nfk .nfk-svc-pic-none { display: grid; place-items: center; background: var(--leaf-1); color: var(--ink-3); }
.a1-nfk .nfk-svc i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(13 42 28 / 0.25); font-style: normal; font-weight: 700; transition: background-color 220ms ease, transform 220ms var(--ease-out), box-shadow 220ms ease; }
@media (hover: hover) { .a1-nfk .nfk-svc a:hover { background: rgb(13 42 28 / 0.03); padding-left: 16px; } .a1-nfk .nfk-svc a:hover .nfk-svc-pic img { transform: scale(1.08); } .a1-nfk .nfk-svc a:hover i { background: var(--accent); box-shadow: none; transform: translateX(4px); } }
.a1-nfk .nfk-svc a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-nfk .nfk-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 28px 0 0; }
.a1-nfk .nfk-more > span { color: var(--muted); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.a1-nfk .nfk-more a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(13 42 28 / 0.3); text-underline-offset: 0.25em; }
.a1-nfk .nfk-more a.nfk-all { margin-left: auto; font-weight: 700; text-decoration: none; }
.a1-nfk .nfk-more a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 5. Recent work: a scroll-snap carousel with buttons; captions under the photos. */
.a1-nfk .nfk-car-ctrl { display: flex; align-items: center; gap: 10px; }
.a1-nfk .nfk-car-ctrl button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0 !important; border-radius: 50% !important; background: var(--ink) !important; color: #fff !important; font-size: 1.25rem !important; cursor: pointer; transition: background-color 220ms ease, opacity 220ms ease, transform 220ms var(--ease-out); }
.a1-nfk .nfk-car-ctrl button:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) { .a1-nfk .nfk-car-ctrl button:not(:disabled):hover { background: var(--ink-3) !important; transform: scale(1.05); } }
.a1-nfk .nfk-car-ctrl button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-nfk .nfk-car-ctrl button:not(.is-on) { display: none; }
.a1-nfk.nfk-ready .nfk-car-ctrl button { display: grid; }
.a1-nfk .nfk-car-all { margin-left: 10px; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.22em; }
.a1-nfk .nfk-car-all span { display: inline-block; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-nfk .nfk-car-all:hover span { transform: translateX(4px); } }
.a1-nfk .nfk-car { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 12px; scrollbar-width: thin; }
.a1-nfk .nfk-car:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 12px; }
.a1-nfk .nfk-slide { margin: 0; scroll-snap-align: start; display: grid; gap: 10px; }
.a1-nfk .nfk-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: var(--lift); cursor: zoom-in; transition: transform 500ms var(--ease-out), border-radius 500ms ease; }
@media (hover: hover) { .a1-nfk .nfk-slide:hover img { transform: scale(1.02); border-radius: 22px; } }
.a1-nfk .nfk-slide img:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-nfk .nfk-slide figcaption { font-weight: 600; }
.a1-nfk .nfk-slide figcaption::before { content: "A-1 project · "; color: var(--muted); font-weight: 500; }

/* 6. Neighborhoods: an A-Z index; one dark tile for everywhere else. */
.a1-nfk .nfk-az { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; align-items: start; }
.a1-nfk .nfk-az-group { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding-top: 16px; border-top: 1px solid rgb(13 42 28 / 0.16); }
.a1-nfk .nfk-az-l { margin: 0; font-size: 2.25rem; font-weight: 600; line-height: 0.9; color: var(--ink-3); }
.a1-nfk .nfk-az-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.a1-nfk .nfk-az-group li { display: grid; gap: 2px; font-size: 1.125rem; font-weight: 600; transition: transform 220ms var(--ease-out), color 220ms ease; }
.a1-nfk .nfk-az-group li em { font-style: normal; font-size: 0.8125rem; font-weight: 600; color: #4f5a52; }
@media (hover: hover) { .a1-nfk .nfk-az-group:hover .nfk-az-l { color: var(--ink); } .a1-nfk .nfk-az-group li:hover { transform: translateX(4px); } }
.a1-nfk .nfk-az-more { grid-column: span 2; display: grid; gap: 10px; padding: 24px; border-radius: 18px; background: var(--ink); color: var(--on-dark); }
.a1-nfk .nfk-az-more p { margin: 0; }
.a1-nfk .nfk-az-q { color: #fff; font-size: 1.375rem; font-weight: 600; }
.a1-nfk .nfk-az-more .nfk-cta { justify-self: start; margin-top: 4px; }
.a1-nfk .nfk-az-more .nfk-cta:focus-visible { outline-color: var(--accent); }
.a1-nfk .nfk-also { margin: 28px 0 0; color: #4f5a52; }
.a1-nfk .nfk-also a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }

/* 7. FAQ, then the estimate: heading and facts across the top, a tall photo carrying the next steps, the form. */
.a1-nfk .nfk-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-nfk .nfk-est { padding-top: var(--nfk-sec); }
.a1-nfk .nfk-est-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-nfk .nfk-est-head > :not(.nfk-facts) { grid-column: 1; }
.a1-nfk .nfk-est-head h2, .a1-nfk .nfk-est-head .c-lead { margin: 0; }
.a1-nfk .nfk-est-head h2 { font-size: clamp(2.1rem, 1.4rem + 2vw, 3.4rem); line-height: 1.02; }
.a1-nfk .nfk-facts { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.a1-nfk .nfk-facts li { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--accent); color: #3f4a43; font-size: 0.9375rem; }
.a1-nfk .nfk-facts strong { color: var(--ink); font-size: 1.0625rem; }
.a1-nfk .nfk-est-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.a1-nfk .nfk-est-side { position: relative; min-height: 560px; border-radius: 22px; overflow: hidden; box-shadow: var(--lift); }
.a1-nfk figure.nfk-est-photo { position: absolute; inset: 0; margin: 0; }
.a1-nfk .nfk-est-card { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 14px; padding: 22px 24px; border-radius: 18px; background: rgb(13 42 28 / 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--on-dark); }
.a1-nfk .nfk-est-card .nfk-k { color: var(--accent); }
.a1-nfk .nfk-next { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: nfk; }
.a1-nfk .nfk-next li { position: relative; display: grid; gap: 2px; padding-left: 44px; counter-increment: nfk; }
.a1-nfk .nfk-next li::before { content: counter(nfk); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 0.875rem; }
.a1-nfk .nfk-next strong { color: #fff; }
.a1-nfk .nfk-next span { color: rgb(246 241 231 / 0.82); font-size: 0.9063rem; line-height: 1.4; }
.a1-nfk .nfk-est-call { margin: 0; padding-top: 14px; border-top: 1px solid rgb(246 241 231 / 0.2); }
.a1-nfk .nfk-est-call a { display: grid; color: #fff !important; font-size: 1.5rem; font-weight: 600; text-decoration: none !important; }
.a1-nfk .nfk-est-call a span { font-size: 0.8125rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-nfk .nfk-est-call a:hover { color: var(--accent) !important; } }
.a1-nfk .nfk-est-call a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.a1-nfk .nfk-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-nfk .nfk-est .kb-form-basic-style textarea { min-height: 130px; }
.a1-nfk .nfk-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-nfk .nfk-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-nfk .nfk-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }
.a1-nfk .nfk-form textarea.is-planned { box-shadow: inset 0 0 0 2px var(--accent) !important; }

/* Tablets and small laptops. */
@media (max-width: 1000px) {
  .a1-nfk .nfk-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 20px; }
  .a1-nfk .nfk-hero-media { height: auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .a1-nfk .nfk-hero-media figure { position: relative; inset: auto; width: auto; aspect-ratio: 3 / 4; }
  .a1-nfk .nfk-hero-a { border: 0; bottom: auto; border-radius: 22px !important; }
  .a1-nfk .nfk-hero-cap { position: static; grid-column: 1 / -1; max-width: none; }
  .a1-nfk .nfk-head-row { grid-template-columns: minmax(0, 1fr); }
  .a1-nfk .nfk-car { grid-auto-columns: 46%; }
  .a1-nfk .nfk-az { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-nfk .nfk-est-head { grid-template-columns: minmax(0, 1fr); }
  .a1-nfk .nfk-facts { grid-column: 1; grid-row: auto; }
  .a1-nfk .nfk-est-grid { grid-template-columns: minmax(0, 1fr); }
  .a1-nfk .nfk-est-side { min-height: 0; display: grid; }
  .a1-nfk figure.nfk-est-photo { position: relative; aspect-ratio: 16 / 9; }
  .a1-nfk .nfk-est-card { position: static; border-radius: 0; background: var(--ink); }
}
/* Phones. */
@media (max-width: 640px) {
  .a1-nfk .nfk-hero h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .a1-nfk .nfk-hero-text { gap: 16px; padding-block: 8px; }
  .a1-nfk .nfk-sub { font-size: 1.0625rem; }
  .a1-nfk .nfk-actions .wp-block-buttons, .a1-nfk .nfk-actions .wp-block-button, .a1-nfk .nfk-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-nfk .nfk-hero-media figure { border-radius: 16px !important; }
  .a1-nfk .nfk-cond { grid-template-columns: minmax(0, 1fr); }
  .a1-nfk .nfk-need { width: 100%; }
  .a1-nfk .nfk-plan-cta .nfk-cta { width: 100%; }
  .a1-nfk .nfk-svc a { grid-template-columns: minmax(0, 1fr) 88px; grid-template-rows: auto auto; gap: 8px 14px; min-height: 0; padding: 16px 4px; }
  .a1-nfk .nfk-svc-n { grid-column: 1; }
  .a1-nfk .nfk-svc-t { grid-column: 1; grid-row: 2; }
  .a1-nfk .nfk-svc-pic { grid-column: 2; grid-row: 1 / 3; width: 88px; }
  .a1-nfk .nfk-svc i { display: none; }
  .a1-nfk .nfk-more a.nfk-all { margin-left: 0; }
  .a1-nfk .nfk-car-ctrl { flex-wrap: wrap; }
  .a1-nfk .nfk-car-all { margin-left: 0; flex-basis: 100%; }
  .a1-nfk .nfk-car { grid-auto-columns: 84%; }
  .a1-nfk .nfk-az { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .a1-nfk .nfk-az-more { grid-column: auto; }
  .a1-nfk .nfk-az-more .nfk-cta { justify-self: stretch; }
  .a1-nfk .nfk-facts { grid-template-columns: minmax(0, 1fr); }
  .a1-nfk .nfk-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .a1-nfk .nfk-need, .a1-nfk .nfk-tick, .a1-nfk .nfk-tick::after, .a1-nfk .nfk-svc a, .a1-nfk .nfk-svc-pic img, .a1-nfk .nfk-slide img, .a1-nfk .nfk-frame-pic, .a1-nfk .nfk-cond, .a1-nfk .nfk-cta, .a1-nfk .nfk-az-group li { transition: none; }
  .a1-nfk .nfk-car { scroll-behavior: auto; }
}

/* ===== Service areas page (overview of the three cities, the site's brand) =====
   Timing: hover 220 ms, state changes 300-450 ms, reveals 550-650 ms. Scoped to .a1-hub; hidden-until-revealed states
   apply only once the script has added .hub-ready. */
.a1-hub { --hub-sec: clamp(80px, 10vw, 128px); }
.a1-hub .hub-sec { padding-top: var(--hub-sec); }
.a1-hub .hub-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.a1-hub .hub-head h2, .a1-hub .hub-head .c-lead { margin: 0; }
.a1-hub .hub-head-row { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 14px 48px; }
.a1-hub .hub-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-hub .hub-k { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.a1-hub .c-arrow-down { transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-hub .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }

/* 1. Hero: words above, three city doors below. */
.a1-hub .hub-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; }
.a1-hub .hub-hero-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); align-items: end; padding-bottom: clamp(24px, 3vw, 40px); }
.a1-hub .hub-hero-title { display: grid; gap: 16px; }
.a1-hub .hub-hero h1 { margin: 0; font-size: clamp(2.5rem, 1.3rem + 3.8vw, 4.8rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-hub .hub-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-hub .hub-l > span { display: inline-block; }
.a1-hub .hub-hero-side { display: grid; gap: 14px; }
.a1-hub .hub-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; }
.a1-hub .hub-sub2 { margin: 0; color: #4f5a52; }
.a1-hub .hub-actions { margin-top: 6px; }
.a1-hub .hub-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-hub .hub-doors { margin: 0; padding: 0; list-style: none; display: flex; gap: 14px; height: clamp(440px, 46vw, 600px); }
.a1-hub .hub-door { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--ink); box-shadow: var(--lift); transition: flex-grow 450ms var(--ease-out); }
.a1-hub .hub-door.is-open { flex-grow: 2.2; }
.a1-hub .hub-door a { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.a1-hub .hub-door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.a1-hub .hub-door a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(13 42 28 / 0.88), rgb(13 42 28 / 0.2) 55%, rgb(13 42 28 / 0)); }
.a1-hub .hub-door-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 8px; padding: clamp(18px, 2.4vw, 28px); }
.a1-hub .hub-door-n { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); }
.a1-hub .hub-door strong { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.05; }
.a1-hub .hub-door-line { max-width: 40ch; color: rgb(246 241 231 / 0.9); font-size: 0.9688rem; line-height: 1.45; }
.a1-hub .hub-door-go { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 4px; padding: 10px 16px; border-radius: var(--r-control); background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.a1-hub .hub-door-go i { font-style: normal; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-hub .hub-door:hover img { transform: scale(1.04); } .a1-hub .hub-door:hover .hub-door-go i { transform: translateX(4px); } }
.a1-hub .hub-door a:focus-visible { outline: 3px solid var(--accent); outline-offset: -5px; border-radius: 22px; }
@media (min-width: 1001px) {
  .a1-hub.hub-ready .hub-door:not(.is-open) .hub-door-line, .a1-hub.hub-ready .hub-door:not(.is-open) .hub-door-go { opacity: 0; transform: translateY(8px); }
  .a1-hub.hub-ready .hub-door .hub-door-line, .a1-hub.hub-ready .hub-door .hub-door-go { transition: opacity 300ms ease 120ms, transform 400ms var(--ease-out) 120ms; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .a1-hub .hub-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-hub .hub-l:nth-child(1) > span { animation-delay: 0.12s; }
  .js .a1-hub .hub-l:nth-child(2) > span { animation-delay: 0.26s; }
  .js .a1-hub .hub-hero .hub-in { animation: c-up 0.65s var(--ease-out) both; }
  .js .a1-hub .hub-sub.hub-in { animation-delay: 0.42s; }
  .js .a1-hub .hub-sub2.hub-in { animation-delay: 0.52s; }
  .js .a1-hub .hub-actions.hub-in { animation-delay: 0.62s; }
  .js .a1-hub .hub-door { animation: hub-door 0.8s var(--ease-out) both; }
  .js .a1-hub .hub-door:nth-child(1) { animation-delay: 0.3s; }
  .js .a1-hub .hub-door:nth-child(2) { animation-delay: 0.42s; }
  .js .a1-hub .hub-door:nth-child(3) { animation-delay: 0.54s; }
}
@keyframes hub-door { from { transform: translateY(36px); } to { transform: none; } }

/* Scroll reveals. */
@media (prefers-reduced-motion: no-preference) {
  .a1-hub.hub-ready .hub-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-hub.hub-ready .hub-r { transition: opacity 550ms ease, transform 650ms var(--ease-out); }
}

/* 2. Neighborhood finder: one search box; the three lists below it, the matching names lit as you type. */
.a1-hub .hub-search { display: none; }
.a1-hub.hub-ready .hub-search { display: grid; gap: 10px; max-width: 720px; margin-bottom: 28px; }
.a1-hub .hub-search-label { font-weight: 700; }
.a1-hub .hub-search-box { position: relative; display: flex; align-items: center; }
.a1-hub .hub-search-box svg { position: absolute; left: 18px; color: var(--ink-3); pointer-events: none; }
.a1-hub .hub-search-box input { width: 100%; min-height: 60px; padding: 0 20px 0 54px; border: 0; border-radius: 16px; background: #fffdf8; box-shadow: inset 0 0 0 1.5px rgb(13 42 28 / 0.18), var(--lift); color: var(--ink); font: inherit; font-size: 1.125rem; transition: box-shadow 220ms ease; }
.a1-hub .hub-search-box input:focus { outline: 0; box-shadow: inset 0 0 0 2.5px var(--ink), var(--lift); }
.a1-hub .hub-results { display: grid; gap: 8px; min-height: 24px; }
.a1-hub .hub-hit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 18px; border-radius: 14px; background: var(--ink); color: var(--on-dark); }
.a1-hub .hub-hit strong { color: #fff; font-size: 1.0625rem; }
.a1-hub .hub-hit a { margin-left: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-control); background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.a1-hub .hub-hit a span { display: inline-block; margin-left: 4px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-hub .hub-hit a:hover span { transform: translateX(4px); } }
.a1-hub .hub-hit a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.a1-hub .hub-miss { margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--leaf-1); }
.a1-hub .hub-miss a { color: var(--ink); font-weight: 700; }
.a1-hub .hub-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.a1-hub .hub-list { padding: 22px 24px; border-radius: 18px; background: #fffdf8; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-hub .hub-list h3 { margin: 0 0 14px; font-size: 1.25rem; }
.a1-hub .hub-list h3 a { color: var(--ink); text-decoration: none; }
.a1-hub .hub-list h3 a span { display: inline-block; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-hub .hub-list h3 a:hover span { transform: translateX(4px); } .a1-hub .hub-list h3 a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.a1-hub .hub-list h3 a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-hub .hub-list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.a1-hub .hub-list li { padding: 7px 12px; border-radius: 999px; background: var(--bg); font-size: 0.9375rem; font-weight: 600; transition: background-color 250ms ease, color 250ms ease, opacity 250ms ease; }
.a1-hub .hub-lists.is-filtering li:not(.is-hit) { opacity: 0.4; }
.a1-hub .hub-list li.is-hit { background: var(--accent); color: var(--accent-ink); }

/* 3. Three cities, one crew: three columns with a coloured rule each. */
.a1-hub .hub-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.a1-hub .hub-col { display: grid; align-content: start; gap: 12px; padding-top: 22px; border-top: 4px solid var(--ink); }
.a1-hub .hub-col-chs { border-top-color: var(--ink-3); }
.a1-hub .hub-col-nfk { border-top-color: var(--accent); }
.a1-hub .hub-col h3 { margin: 0 0 4px; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); }
.a1-hub .hub-col ul { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 7px; }
.a1-hub .hub-conds li { position: relative; padding-left: 20px; line-height: 1.45; }
.a1-hub .hub-conds li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.a1-hub .hub-svcs li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(13 42 28 / 0.3); text-underline-offset: 0.25em; }
@media (hover: hover) { .a1-hub .hub-svcs li a:hover { text-decoration-color: var(--ink); } }
.a1-hub .hub-svcs a:focus-visible, .a1-hub .hub-col-go a:focus-visible, .a1-hub .hub-all a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-hub .hub-col-go { margin: 4px 0 0; }
.a1-hub .hub-col-go a, .a1-hub .hub-all a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: var(--r-control); background: var(--ink); color: var(--on-dark); font-weight: 700; text-decoration: none; transition: background-color 220ms ease; }
.a1-hub .hub-col-go a span, .a1-hub .hub-all a span { display: inline-block; margin-left: 4px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-hub .hub-col-go a:hover, .a1-hub .hub-all a:hover { background: var(--ink-3); } .a1-hub .hub-col-go a:hover span, .a1-hub .hub-all a:hover span { transform: translateX(4px); } }
.a1-hub .hub-all { margin: 32px 0 0; }
.a1-hub .hub-all a { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (hover: hover) { .a1-hub .hub-all a:hover { background: rgb(13 42 28 / 0.05); } }

/* 4. The same in every city. */
.a1-hub .hub-same-list { margin: 0; padding: clamp(24px, 3vw, 36px); list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; border-radius: 22px; background: var(--ink); color: var(--on-dark); }
.a1-hub .hub-same-list li { display: grid; gap: 6px; padding-left: 16px; border-left: 3px solid var(--accent); }
.a1-hub .hub-same-list strong { color: #fff; font-size: 1.125rem; }
.a1-hub .hub-same-list span { color: rgb(246 241 231 / 0.82); font-size: 0.9375rem; line-height: 1.45; }

/* 5. FAQ and estimate. */
.a1-hub .hub-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-hub .hub-est-text { gap: 18px; }
.a1-hub .hub-est-text > p:first-of-type { font-size: 0.8125rem; line-height: 1.4; }
.a1-hub .hub-est-text h2 { margin: 0; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height: 1.04; }
.a1-hub .hub-est-text h2 + p { margin: 0; font-size: var(--step-lead); line-height: 1.5; }
.a1-hub .hub-next { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: hub; }
.a1-hub .hub-next li { position: relative; display: grid; gap: 2px; padding-left: 50px; counter-increment: hub; }
.a1-hub .hub-next li::before { content: counter(hub); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--accent); font-weight: 700; }
.a1-hub .hub-next span { color: #4f5a52; font-size: 0.9375rem; line-height: 1.45; }
.a1-hub .hub-est-call { margin: 6px 0 0; padding-top: 18px; border-top: 1px solid rgb(13 42 28 / 0.14); }
.a1-hub .hub-est-call a { display: grid; color: var(--ink) !important; font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); font-weight: 600; text-decoration: none !important; }
.a1-hub .hub-est-call a span { font-size: 0.875rem; color: var(--muted); }
.a1-hub .hub-est-call a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.a1-hub .hub-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-hub .hub-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-hub .hub-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-hub .hub-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1000px) {
  .a1-hub .hub-hero-top, .a1-hub .hub-head-row { grid-template-columns: minmax(0, 1fr); }
  .a1-hub .hub-doors { flex-direction: column; height: auto; }
  .a1-hub .hub-door { flex: none; height: 300px; }
  .a1-hub .hub-lists, .a1-hub .hub-cols { grid-template-columns: minmax(0, 1fr); }
  .a1-hub .hub-same-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .a1-hub .hub-hero h1 { font-size: clamp(2.3rem, 10.5vw, 2.9rem); }
  .a1-hub .hub-sub { font-size: 1.0625rem; }
  .a1-hub .hub-actions .wp-block-buttons, .a1-hub .hub-actions .wp-block-button, .a1-hub .hub-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-hub .hub-door { height: 260px; border-radius: 18px; }
  .a1-hub .hub-hit a { margin-left: 0; width: 100%; justify-content: center; }
  .a1-hub .hub-list { padding: 18px; }
  .a1-hub .hub-same-list { grid-template-columns: minmax(0, 1fr); }
  .a1-hub .hub-col-go a, .a1-hub .hub-all a { width: 100%; justify-content: center; }
  .a1-hub .hub-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .a1-hub .hub-door, .a1-hub .hub-door img, .a1-hub .hub-door-line, .a1-hub .hub-door-go, .a1-hub .hub-list li { transition: none; }
}

/* ===== Services page (the directory of all twelve, the site's brand) =====
   Timing: hover 220-300 ms, filter and content changes 250-400 ms, reveals 550-650 ms. Scoped to .a1-svh;
   hidden-until-revealed states apply only once the script has added .svh-ready. */
.a1-svh { --svh-sec: clamp(80px, 10vw, 128px); }
.a1-svh .svh-sec { padding-top: var(--svh-sec); }
.a1-svh .svh-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-svh .svh-head h2, .a1-svh .svh-head .c-lead, .a1-svh .svh-story-head h2 { margin: 0; }
.a1-svh .svh-head-row { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; gap: 14px 48px; }
.a1-svh .svh-story-head { display: grid; gap: 12px; }
.a1-svh .svh-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-svh .svh-k { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.a1-svh .c-arrow-down { transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-svh .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }
.a1-svh .svh-link a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.22em; }
.a1-svh .svh-link a span { display: inline-block; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-svh .svh-link a:hover span { transform: translateX(4px); } }
.a1-svh .svh-cta { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: var(--r-control); background: var(--accent); color: var(--accent-ink) !important; font-weight: 700; text-decoration: none !important; box-shadow: 0 10px 24px -14px rgb(13 42 28 / 0.55); transition: background-color 220ms ease, transform 220ms var(--ease-out); }
.a1-svh .svh-cta span { display: inline-block; margin-left: 4px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-svh .svh-cta:hover { background: var(--accent-strong); transform: translateY(-2px); } .a1-svh .svh-cta:hover span { transform: translateX(4px); } }
.a1-svh .svh-cta:active { transform: translateY(0); }
.a1-svh .svh-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-svh .svh-terms { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.a1-svh .svh-terms li { padding: 4px 10px; border-radius: 999px; background: var(--bg); font-size: 0.8125rem; font-weight: 600; }
.a1-svh .svh-icon { display: grid; place-items: center; background: var(--leaf-1); color: var(--ink-3); }

/* 1. Hero: a centred masthead, four facts, a strip of five photos rising frame by frame. */
.a1-svh .svh-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(24px, 4vw, 56px) auto 0; }
.a1-svh .svh-hero-text { display: grid; justify-items: center; gap: 18px; max-width: 980px; margin: 0 auto clamp(32px, 4vw, 52px); text-align: center; }
.a1-svh .svh-hero h1 { margin: 0; font-size: clamp(2.3rem, 1.1rem + 3.6vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; font-weight: 600; }
.a1-svh .svh-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-svh .svh-l > span { display: inline-block; }
.a1-svh .svh-l:nth-child(2) > span { color: var(--ink-3); }
.a1-svh .svh-sub { margin: 0; max-width: 58ch; font-size: var(--step-lead); line-height: 1.5; }
.a1-svh .svh-actions { margin-top: 4px; }
.a1-svh .svh-actions .wp-block-buttons { justify-content: center; }
.a1-svh .svh-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-svh .svh-facts { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.a1-svh .svh-facts li { padding: 8px 14px; border-radius: 999px; background: #fffdf8; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); font-size: 0.9375rem; }
.a1-svh .svh-facts strong { color: var(--ink); }
.a1-svh .svh-strip { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1.35fr 1fr 1.35fr 1fr; gap: 12px; align-items: end; }
.a1-svh .svh-frame { position: relative; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); aspect-ratio: 3 / 4; }
.a1-svh .svh-frame:nth-child(even) { aspect-ratio: 4 / 4.4; }
.a1-svh .svh-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a1-svh .svh-frame span { position: absolute; left: 10px; bottom: 10px; padding: 4px 11px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-svh .svh-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-svh .svh-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-svh .svh-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-svh .svh-hero .svh-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-svh .svh-sub.svh-in { animation-delay: 0.42s; }
  .js .a1-svh .svh-actions.svh-in { animation-delay: 0.54s; }
  .js .a1-svh .svh-facts.svh-in { animation-delay: 0.64s; }
  .js .a1-svh .svh-frame { animation: svh-frame 0.9s var(--ease-out) both; }
  .js .a1-svh .svh-frame img { animation: svh-settle 1.4s var(--ease-out) both; }
  .js .a1-svh .svh-frame-1, .js .a1-svh .svh-frame-1 img { animation-delay: 0.3s; }
  .js .a1-svh .svh-frame-2, .js .a1-svh .svh-frame-2 img { animation-delay: 0.38s; }
  .js .a1-svh .svh-frame-3, .js .a1-svh .svh-frame-3 img { animation-delay: 0.46s; }
  .js .a1-svh .svh-frame-4, .js .a1-svh .svh-frame-4 img { animation-delay: 0.54s; }
  .js .a1-svh .svh-frame-5, .js .a1-svh .svh-frame-5 img { animation-delay: 0.62s; }
}
@keyframes svh-frame { from { clip-path: inset(100% 0 0 0 round 18px); } to { clip-path: inset(0 0 0 0 round 18px); } }
@keyframes svh-settle { from { transform: scale(1.12); } to { transform: none; } }

/* Scroll reveals. */
@media (prefers-reduced-motion: no-preference) {
  .a1-svh.svh-ready .svh-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-svh.svh-ready .svh-r { transition: opacity 550ms ease, transform 650ms var(--ease-out); }
}

/* 2. Directory: sticky bar (filter with a sliding marker, live count), then each group: intro, featured card, entries. */
.a1-svh .svh-bar { display: none; }
.a1-svh.svh-ready .svh-bar { position: sticky; top: calc(var(--stick, 72px) + 12px); z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 28px; padding: 8px 8px 8px 8px; border-radius: 999px; background: rgb(246 241 231 / 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1), 0 12px 26px -20px rgb(13 42 28 / 0.6); }
.a1-svh .svh-filter { position: relative; display: flex; gap: 4px; min-width: 0; }
.a1-svh .svh-pill { position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: 999px; background: var(--ink); box-shadow: 0 8px 18px -10px rgb(13 42 28 / 0.7); transition: transform 350ms var(--ease-out), width 350ms var(--ease-out); }
.a1-svh .svh-filter button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px !important; border-radius: 999px !important; background: transparent !important; color: var(--ink) !important; box-shadow: none !important; font-size: 0.9375rem !important; font-weight: 600 !important; white-space: nowrap; cursor: pointer; transition: color 300ms ease; }
.a1-svh .svh-filter button span { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--leaf-1); color: var(--ink); font-size: 0.75rem; font-weight: 700; transition: background-color 300ms ease, color 300ms ease; }
.a1-svh .svh-filter button[aria-pressed="true"] { color: #fff !important; }
.a1-svh .svh-filter button[aria-pressed="true"] span { background: var(--accent); color: var(--accent-ink); }
.a1-svh:not(.svh-pill-on) .svh-filter button[aria-pressed="true"] { background: var(--ink) !important; }
@media (hover: hover) { .a1-svh .svh-filter button[aria-pressed="false"]:hover { background: rgb(13 42 28 / 0.06) !important; } }
.a1-svh .svh-filter button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-svh .svh-count { margin: 0 14px 0 0; flex: none; color: #4f5a52; font-size: 0.875rem; font-weight: 700; }
.a1-svh .svh-groups { display: grid; gap: clamp(56px, 7vw, 88px); }
.a1-svh .svh-group[hidden] { display: none; }
.a1-svh .svh-group { display: grid; gap: 18px; }
.a1-svh .svh-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-bottom: 8px; }
.a1-svh .svh-intro-pic { margin: 0; aspect-ratio: 21 / 9; border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-svh .svh-intro-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-svh .svh-intro-text { display: grid; gap: 8px; }
.a1-svh .svh-intro-text > * { margin: 0; }
.a1-svh .svh-num { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-svh .svh-intro h3 { font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.6rem); line-height: 1.06; }
.a1-svh .svh-intro-text p:last-child { color: #4f5a52; font-size: var(--step-lead); line-height: 1.5; }
/* Featured service: a large card, photo left, words right, the whole card one link. */
.a1-svh .svh-feat-a { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-radius: 22px; overflow: hidden; background: var(--ink); color: var(--on-dark); text-decoration: none; box-shadow: var(--lift); transition: transform 300ms var(--ease-out), box-shadow 300ms ease; }
.a1-svh .svh-feat-pic { margin: 0; min-height: 300px; overflow: hidden; }
.a1-svh .svh-feat-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); }
.a1-svh .svh-feat-body { display: grid; align-content: center; gap: 12px; padding: clamp(24px, 3.4vw, 44px); }
.a1-svh .svh-feat-body > * { margin: 0; }
.a1-svh .svh-feat-body .svh-k { color: var(--accent); }
.a1-svh .svh-feat h4 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.08; }
.a1-svh .svh-feat-body > p:not(.svh-k) { color: rgb(246 241 231 / 0.86); line-height: 1.55; }
.a1-svh .svh-feat .svh-terms li { background: rgb(246 241 231 / 0.1); color: #fff; }
.a1-svh .svh-go { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 6px; padding: 10px 18px; border-radius: var(--r-control); background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.a1-svh .svh-go i { font-style: normal; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-svh .svh-feat-a:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -26px rgb(13 42 28 / 0.7); } .a1-svh .svh-feat-a:hover .svh-feat-pic img { transform: scale(1.05); } .a1-svh .svh-feat-a:hover .svh-go i { transform: translateX(4px); } }
.a1-svh .svh-feat-a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
/* Supporting services: compact entries, thumbnail left, words right. */
.a1-svh .svh-entries { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.a1-svh .svh-entry a { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; height: 100%; padding: 14px 52px 14px 14px; border-radius: 18px; background: #fffdf8; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); color: var(--ink); text-decoration: none; transition: transform 250ms var(--ease-out), box-shadow 250ms ease, background-color 250ms ease; }
.a1-svh .svh-entry-pic { margin: 0; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--surface); }
.a1-svh .svh-entry-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease-out); }
.a1-svh .svh-entry-body { display: grid; align-content: start; gap: 6px; }
.a1-svh .svh-entry-body > * { margin: 0; }
.a1-svh .svh-entry h4 { font-size: 1.1875rem; line-height: 1.2; }
.a1-svh .svh-entry-body p { color: #4f5a52; font-size: 0.9375rem; line-height: 1.45; }
.a1-svh .svh-entry a > i { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(13 42 28 / 0.25); font-style: normal; font-weight: 700; transition: transform 220ms var(--ease-out), background-color 220ms ease, box-shadow 220ms ease; }
@media (hover: hover) { .a1-svh .svh-entry a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.16), 0 18px 30px -22px rgb(13 42 28 / 0.55); } .a1-svh .svh-entry a:hover .svh-entry-pic img { transform: scale(1.07); } .a1-svh .svh-entry a:hover > i { background: var(--accent); box-shadow: none; transform: translateX(3px); } }
.a1-svh .svh-entry a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-svh .svh-mid-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: clamp(40px, 5vw, 64px) 0 0; padding: 20px 20px 20px 28px; border-radius: 20px; background: var(--leaf-1); font-size: 1.125rem; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .a1-svh .svh-groups.is-switching { opacity: 0; transform: translateY(8px); }
  .a1-svh .svh-groups { transition: opacity 260ms ease, transform 320ms var(--ease-out); }
}

/* 3. Start with what you see: a compact two-column index. */
.a1-svh .svh-sign-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.a1-svh .svh-sign-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-content: start; padding: 18px 14px 18px 4px; border-top: 1px solid rgb(13 42 28 / 0.14); border-radius: 0; transition: background-color 250ms ease; }
@media (hover: hover) { .a1-svh .svh-sign-list li:hover { background: rgb(13 42 28 / 0.035); } }
.a1-svh .svh-sign-n { grid-row: span 2; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-3); padding-top: 0.3em; }
.a1-svh .svh-sign-t h3 { margin: 0 0 4px; font-size: 1.1875rem; }
.a1-svh .svh-sign-t p { margin: 0; color: #4f5a52; font-size: 0.9375rem; line-height: 1.5; }
.a1-svh .svh-sign-go { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 0; }
.a1-svh .svh-sign-go a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-svh .svh-sign-go a span { display: inline-block; margin-left: 2px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-svh .svh-sign-go a:hover span { transform: translateX(4px); } }
.a1-svh .svh-sign-go a:focus-visible, .a1-svh .svh-note a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-svh .svh-note { margin: 22px 0 0; padding: 14px 18px; border-radius: 14px; background: #fffdf8; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); color: #3f4a43; font-size: 0.9375rem; }
.a1-svh .svh-note a { color: var(--ink); font-weight: 700; }

/* 4. How services work together: three stages with photos along a rail that fills as the section scrolls past. */
.a1-svh .svh-tl { position: relative; --p: 1; }
.a1-svh .svh-rail { position: relative; height: 4px; margin: 0 0 24px; border-radius: 4px; background: rgb(13 42 28 / 0.12); }
.a1-svh .svh-rail span { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--accent); box-shadow: 0 0 0 1px rgb(13 42 28 / 0.08); transition: width 160ms linear; }
.a1-svh .svh-stages { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.a1-svh .svh-stage { display: grid; align-content: start; gap: 10px; }
.a1-svh .svh-stage > * { margin: 0; }
.a1-svh .svh-stage-pic { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-svh .svh-stage-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease-out), filter 500ms ease; }
.a1-svh .svh-stage-n { display: flex; align-items: center; gap: 10px; margin-top: 6px !important; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-svh .svh-stage-n span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--accent); font-size: 0.9375rem; letter-spacing: 0; transition: background-color 400ms ease, color 400ms ease, transform 400ms var(--ease-out); }
.a1-svh .svh-stage h3 { font-size: 1.5rem; }
.a1-svh .svh-stage > p:not(.svh-stage-n):not(.svh-stage-go) { color: #3f4a43; line-height: 1.55; }
.a1-svh .svh-stage-go a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-svh .svh-stage-go a span { display: inline-block; margin-left: 2px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-svh .svh-stage-go a:hover span { transform: translateX(4px); } }
.a1-svh .svh-stage-go a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-svh .svh-tl-note { margin: 18px 0 0; color: var(--muted); font-size: 0.875rem; }
@media (prefers-reduced-motion: no-preference) {
  .a1-svh.svh-ready .svh-stage:not(.is-on) .svh-stage-pic img { filter: saturate(0.4) brightness(1.05); transform: scale(1.04); }
  .a1-svh.svh-ready .svh-stage:not(.is-on) .svh-stage-n span { background: var(--surface); color: var(--ink); transform: scale(0.9); }
  .a1-svh.svh-ready .svh-stage.is-on .svh-stage-n span { background: var(--accent); color: var(--accent-ink); }
}

/* 5. Recent projects: six photos with what they show and the service, in an even 3 x 2. */
.a1-svh .svh-pics { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
.a1-svh .svh-pic { display: grid; gap: 10px; align-content: start; }
.a1-svh .svh-pic figure { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); cursor: zoom-in; }
.a1-svh .svh-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); }
.a1-svh .svh-pic figure::after { content: ""; position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(0.8); transition: opacity 220ms ease, transform 300ms var(--ease-out);
  background: rgb(246 241 231 / 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2a1c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center / 16px no-repeat; }
@media (hover: hover) { .a1-svh .svh-pic figure:hover img { transform: scale(1.05); } .a1-svh .svh-pic figure:hover::after { opacity: 1; transform: none; } }
.a1-svh .svh-pic figure:focus-within::after { opacity: 1; transform: none; }
.a1-svh .svh-pic img:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.a1-svh .svh-pic-cap { display: grid; gap: 2px; }
.a1-svh .svh-pic-cap p { margin: 0; color: #3f4a43; font-size: 0.9375rem; line-height: 1.4; }
.a1-svh .svh-pic-cap a { justify-self: start; display: inline-flex; align-items: center; min-height: 36px; color: var(--ink); font-weight: 700; text-decoration: none; }
.a1-svh .svh-pic-cap a span { display: inline-block; margin-left: 4px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-svh .svh-pic-cap a:hover { text-decoration: underline; text-underline-offset: 0.2em; } .a1-svh .svh-pic-cap a:hover span { transform: translateX(4px); } }
.a1-svh .svh-pic-cap a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 6. Where we work: one strip. */
.a1-svh .svh-areas-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 48px; align-items: center; padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: var(--leaf-1); }
.a1-svh .svh-areas-in h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); }
.a1-svh .svh-areas-in p { margin: 0; }
.a1-svh .svh-areas-in ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.a1-svh .svh-areas-in a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 18px; border-radius: 14px; background: #fffdf8; color: var(--ink); font-weight: 700; text-decoration: none; transition: background-color 220ms ease, color 220ms ease; }
.a1-svh .svh-areas-in a span { transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-svh .svh-areas-in a:hover { background: var(--ink); color: #fff; } .a1-svh .svh-areas-in a:hover span { transform: translateX(4px); } }
.a1-svh .svh-areas-in a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 7. FAQ, then the estimate on the dark band, running into the footer. */
.a1-svh .svh-faq { padding-top: clamp(72px, 9vw, 120px); scroll-margin-top: 100px; }
.a1-calm.a1-svh { padding-bottom: 0; }
.a1-svh .svh-est { display: block; margin-top: var(--svh-sec); padding-block: var(--svh-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-svh .svh-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-svh .svh-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-svh .svh-est-text > *, .a1-svh .svh-est-text h2 { margin: 0; }
.a1-svh .svh-est .svh-eyebrow { color: var(--accent); }
.a1-svh .svh-est-text h2 { color: #fff; font-size: clamp(2.1rem, 1.4rem + 2vw, 3.4rem); line-height: 1.02; }
.a1-svh .svh-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-svh .svh-next { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: svh; }
.a1-svh .svh-next li { position: relative; display: grid; gap: 2px; padding-left: 50px; counter-increment: svh; }
.a1-svh .svh-next li::before { content: counter(svh); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.a1-svh .svh-next strong { color: #fff; }
.a1-svh .svh-next span { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.45; }
.a1-svh .svh-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-svh .svh-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-svh .svh-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-svh .svh-est-call a:hover { color: var(--accent) !important; } }
.a1-svh .svh-est-call a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.a1-svh .svh-est .c-est-form { color: var(--ink); }
.a1-svh .svh-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-svh .svh-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-svh .svh-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-svh .svh-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .a1-svh .svh-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1100px) {
  .a1-svh.svh-ready .svh-bar { border-radius: 20px; flex-wrap: wrap; }
  .a1-svh .svh-filter { flex-wrap: wrap; }
  .a1-svh .svh-pill { display: none; }
  .a1-svh .svh-filter button[aria-pressed="true"] { background: var(--ink) !important; }
  .a1-svh .svh-count { margin: 0 6px; }
}
@media (max-width: 1000px) {
  .a1-svh .svh-head-row, .a1-svh .svh-intro, .a1-svh .svh-feat-a, .a1-svh .svh-areas-in, .a1-svh .svh-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-svh .svh-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a1-svh .svh-frame:nth-child(n+4) { display: none; }
  .a1-svh .svh-feat-pic { min-height: 0; aspect-ratio: 16 / 9; }
  .a1-svh .svh-stages, .a1-svh .svh-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-svh .svh-stages .svh-stage:last-child { grid-column: 1 / -1; }
  .a1-svh .svh-est-text { position: static; }
}
@media (max-width: 640px) {
  .a1-svh .svh-hero-text { justify-items: start; text-align: left; }
  .a1-svh .svh-hero h1 { font-size: clamp(2.1rem, 9.4vw, 2.7rem); }
  .a1-svh .svh-sub { font-size: 1.0625rem; }
  .a1-svh .svh-actions .wp-block-buttons, .a1-svh .svh-actions .wp-block-button, .a1-svh .svh-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-svh .svh-facts { justify-content: flex-start; }
  .a1-svh .svh-strip { grid-template-columns: 1.3fr 1fr; gap: 8px; }
  .a1-svh .svh-frame:nth-child(n+3) { display: none; }
  .a1-svh .svh-frame { aspect-ratio: 4 / 3 !important; border-radius: 14px; }
  .a1-svh.svh-ready .svh-bar { display: grid; gap: 6px; margin-inline: calc(-1 * var(--c-gut)); padding: 8px var(--c-gut); border-radius: 0; }
  .a1-svh .svh-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .a1-svh .svh-filter::-webkit-scrollbar { display: none; }
  .a1-svh .svh-filter button { flex: none; background: #fffdf8 !important; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.12) !important; }
  .a1-svh .svh-filter button[aria-pressed="true"] { background: var(--ink) !important; box-shadow: none !important; }
  .a1-svh .svh-count { margin: 0; font-size: 0.8125rem; }
  .a1-svh .svh-intro-pic { aspect-ratio: 16 / 9; }
  .a1-svh .svh-entry a { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 44px 12px 12px; }
  .a1-svh .svh-entry a > i { right: 10px; top: 10px; }
  .a1-svh .svh-mid-cta { display: grid; padding: 20px; }
  .a1-svh .svh-mid-cta .svh-cta { justify-content: center; }
  .a1-svh .svh-sign-list { grid-template-columns: minmax(0, 1fr); }
  .a1-svh .svh-stages, .a1-svh .svh-pics { grid-template-columns: minmax(0, 1fr); }
  .a1-svh .svh-stages .svh-stage:last-child { grid-column: auto; }
  /* The rail runs down the left of the stages on phones. */
  .a1-svh .svh-tl { padding-left: 22px; }
  .a1-svh .svh-rail { position: absolute; left: 0; top: 0; bottom: 30px; width: 4px; height: auto; margin: 0; }
  .a1-svh .svh-rail span { inset: 0 0 auto 0; width: 100%; height: calc(var(--p) * 100%); transition: height 160ms linear; }
  .a1-svh .svh-areas-in ul { grid-template-columns: minmax(0, 1fr); }
  .a1-svh .svh-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .a1-svh .svh-pill, .a1-svh .svh-feat-a, .a1-svh .svh-feat-pic img, .a1-svh .svh-entry a, .a1-svh .svh-entry-pic img, .a1-svh .svh-stage-pic img, .a1-svh .svh-pic img, .a1-svh .svh-filter button, .a1-svh .svh-groups, .a1-svh .svh-rail span { transition: none; }
}

/* ===== Services page, round 3: one motion scale, comfortable targets, a scrolling filter on smaller screens,
   connected stages. ===== */
.a1-svh { --svh-hover: 220ms; --svh-change: 320ms; --svh-reveal: 600ms; --svh-ease: var(--ease-out); }
/* One scale for every hover, state change and reveal on the page. */
.a1-svh .svh-cta, .a1-svh .svh-cta span, .a1-svh .svh-go i, .a1-svh .svh-entry a > i, .a1-svh .svh-sign-go a span, .a1-svh .svh-stage-go a span,
.a1-svh .svh-pic-cap a span, .a1-svh .svh-areas-in a, .a1-svh .svh-areas-in a span, .a1-svh .svh-link a span { transition-duration: var(--svh-hover); transition-timing-function: var(--svh-ease); }
.a1-svh .svh-feat-a, .a1-svh .svh-entry a, .a1-svh .svh-pill, .a1-svh .svh-filter button, .a1-svh .svh-filter button span { transition-duration: var(--svh-change); transition-timing-function: var(--svh-ease); }
.a1-svh .svh-feat-pic img, .a1-svh .svh-entry-pic img, .a1-svh .svh-pic img { transition-duration: var(--svh-reveal); }
@media (prefers-reduced-motion: no-preference) {
  .a1-svh.svh-ready .svh-r { transition-duration: var(--svh-reveal), var(--svh-reveal); }
}
/* Touch targets: every text link in the guide, stages and project captions is at least 44 px tall. */
.a1-svh .svh-sign-go a, .a1-svh .svh-stage-go a, .a1-svh .svh-pic-cap a { min-height: 44px; }
/* Guide: four entries now, so two even rows of two. */
.a1-svh .svh-sign-list li:nth-last-child(-n+2) { border-bottom: 1px solid rgb(13 42 28 / 0.14); }
/* Filter below 1100 px: one scrolling row (the marker stays), faded edge, the chosen chip kept in view by the script. */
@media (max-width: 1100px) {
  .a1-svh.svh-ready .svh-bar { display: grid; gap: 6px; border-radius: 20px; padding: 8px; }
  .a1-svh .svh-filter { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: 8px; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .a1-svh .svh-filter.is-end { -webkit-mask: none; mask: none; }
  .a1-svh .svh-filter::-webkit-scrollbar { display: none; }
  .a1-svh .svh-filter button { flex: none; }
  .a1-svh .svh-pill { display: block; }
  .a1-svh .svh-filter button[aria-pressed="true"] { background: transparent !important; }
  .a1-svh:not(.svh-pill-on) .svh-filter button[aria-pressed="true"] { background: var(--ink) !important; }
  .a1-svh .svh-count { margin: 0 8px 2px; font-size: 0.8125rem; }
}
@media (max-width: 640px) {
  .a1-svh .svh-filter button, .a1-svh .svh-filter button[aria-pressed="true"] { background: transparent !important; box-shadow: none !important; }
  .a1-svh:not(.svh-pill-on) .svh-filter button[aria-pressed="true"] { background: var(--ink) !important; }
  .a1-svh .svh-filter button { min-height: 44px; }
  /* Featured card on phones: photo, then words, the button full width. */
  .a1-svh .svh-feat-pic { aspect-ratio: 4 / 3; }
  .a1-svh .svh-feat-body { padding: 22px 20px 24px; }
  .a1-svh .svh-go { justify-self: stretch; justify-content: center; min-height: 48px; }
}
/* Connected stages: a dot on the rail above each stage, an arrow between the photos; each stage's words follow its photo. */
.a1-svh .svh-rail i { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px rgb(13 42 28 / 0.25); transition: background-color var(--svh-change) ease, box-shadow var(--svh-change) ease; }
.a1-svh .svh-rail i:nth-of-type(1) { left: 7px; }
.a1-svh .svh-rail i:nth-of-type(2) { left: calc(100% / 3 + 7px); }
.a1-svh .svh-rail i:nth-of-type(3) { left: calc(200% / 3 + 7px); }
.a1-svh .svh-rail i.is-on { background: var(--accent); box-shadow: 0 0 0 4px rgb(246 224 22 / 0.3); }
.a1-svh .svh-stage { position: relative; }
.a1-svh .svh-stage-pic { position: relative; overflow: visible; }
.a1-svh .svh-stage-pic img { border-radius: 18px; }
.a1-svh .svh-stage:not(:last-child) .svh-stage-pic::after { content: "→"; position: absolute; right: calc(-1 * clamp(16px, 2.4vw, 28px) / 2 - 16px); top: 50%; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; box-shadow: 0 0 0 5px var(--bg); }
@media (prefers-reduced-motion: no-preference) {
  .a1-svh.svh-ready .svh-stage > :not(.svh-stage-pic) { transition: opacity var(--svh-change) ease, transform var(--svh-change) var(--svh-ease); }
  .a1-svh.svh-ready .svh-stage:not(.is-on) > :not(.svh-stage-pic) { opacity: 0.55; transform: translateY(6px); }
  .a1-svh.svh-ready .svh-stage.is-on > h3 { transition-delay: 60ms; }
  .a1-svh.svh-ready .svh-stage.is-on > p:not(.svh-stage-n) { transition-delay: 120ms; }
}
@media (max-width: 1000px) { .a1-svh .svh-stage:not(:last-child) .svh-stage-pic::after { display: none; } .a1-svh .svh-rail i { display: none; } }
@media (max-width: 640px) {
  .a1-svh .svh-stage:not(:last-child) .svh-stage-pic::after { display: grid; content: "↓"; right: auto; left: 50%; top: auto; bottom: -16px; margin: 0 0 0 -16px; }
  .a1-svh .svh-stage { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .a1-svh .svh-rail i { transition: none; } }
/* A stage not reached yet is only greyed, not zoomed: the frame lets the connector arrow overflow, so a zoom would spill. */
@media (prefers-reduced-motion: no-preference) { .a1-svh.svh-ready .svh-stage:not(.is-on) .svh-stage-pic img { transform: none; } }

/* ===== Yard drainage page (the site's new design; the problem selector keeps its own styles above) =====
   One motion scale: hover 220 ms, state changes 320 ms, reveals 600 ms. Scoped to .a1-drn; hidden-until-revealed
   states apply only once the script has added .drn-ready. */
.a1-drn { --drn-sec: clamp(80px, 10vw, 128px); --drn-hover: 220ms; --drn-change: 320ms; --drn-reveal: 600ms; }
.a1-drn .drn-sec { padding-top: var(--drn-sec); }
.a1-drn .drn-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-drn .drn-head h2, .a1-drn .drn-head .c-lead { margin: 0; }
.a1-drn .drn-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-drn .c-arrow-down { transition: transform var(--drn-hover) var(--ease-out); }
@media (hover: hover) { .a1-drn .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }

/* 1. Hero: words left, the crew video right with a trench photo set into its corner. */
.a1-drn .drn-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: min(calc(100svh - 120px), 720px); }
.a1-drn .drn-hero-text { display: grid; gap: 18px; padding-block: 24px; }
.a1-drn .drn-hero h1 { margin: 0; font-size: clamp(2.6rem, 1.3rem + 4vw, 5rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-drn .drn-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-drn .drn-l > span { display: inline-block; }
.a1-drn .drn-l:nth-child(2) > span { color: var(--ink-3); }
.a1-drn .drn-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 44ch; }
.a1-drn .drn-sub2 { margin: 0; color: #4f5a52; max-width: 50ch; }
.a1-drn .drn-actions { margin-top: 6px; }
.a1-drn .drn-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-drn .drn-hero-media { position: relative; padding: 0 0 clamp(40px, 5vw, 64px) clamp(40px, 5vw, 64px); }
.a1-drn .drn-hero-video { margin: 0; aspect-ratio: 4 / 4.4; border-radius: 24px; overflow: hidden; background: var(--ink); box-shadow: var(--lift); }
.a1-drn .drn-hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-drn .drn-hero-inset { position: absolute; left: 0; bottom: 0; width: 42%; margin: 0; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; border: 6px solid var(--bg); box-shadow: var(--lift); }
.a1-drn .drn-tag { position: absolute; right: 16px; top: 16px; margin: 0; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-drn .drn-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-drn .drn-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-drn .drn-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-drn .drn-hero .drn-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-drn .drn-sub.drn-in { animation-delay: 0.42s; }
  .js .a1-drn .drn-sub2.drn-in { animation-delay: 0.5s; }
  .js .a1-drn .drn-actions.drn-in { animation-delay: 0.6s; }
  .js .a1-drn .drn-hero-video { animation: drn-open 1s var(--ease-out) 0.15s both; }
  .js .a1-drn .drn-hero-inset { animation: drn-up 0.8s var(--ease-out) 0.7s both; }
}
@keyframes drn-open { from { clip-path: inset(0 0 100% 0 round 24px); } to { clip-path: inset(0 0 0 0 round 24px); } }
@keyframes drn-up { from { transform: translateY(32px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .a1-drn.drn-ready .drn-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-drn.drn-ready .drn-r { transition: opacity var(--drn-reveal) ease, transform var(--drn-reveal) var(--ease-out); }
}

/* 2. The problem selector sits in the page's width with section spacing. */
.a1-drn .drn-signs { padding-top: var(--drn-sec); }

/* 3. Solutions: words, photo and the one-day note on the left (sticky); the numbered index on the right. */
.a1-drn .drn-sol { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.a1-drn .drn-sol-side { display: grid; gap: 16px; position: sticky; top: 110px; }
.a1-drn .drn-sol-side h2, .a1-drn .drn-sol-side .c-lead { margin: 0; }
.a1-drn .drn-sol-photo { margin: 6px 0 0; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; box-shadow: var(--lift); }
.a1-drn .drn-fig { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px 20px; border-radius: 18px; background: var(--accent); }
.a1-drn .drn-fig-n { margin: 0; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.8rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.a1-drn .drn-fig h3 { margin: 0 0 4px; font-size: 1.125rem; }
.a1-drn .drn-fig p { margin: 0; font-size: 0.9375rem; line-height: 1.45; }
.a1-drn .drn-sol-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.a1-drn .drn-sol-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 22px 8px 22px 4px; border-bottom: 1px solid rgb(13 42 28 / 0.14); scroll-margin-top: 110px; transition: background-color var(--drn-hover) ease; }
@media (hover: hover) { .a1-drn .drn-sol-list li:hover { background: rgb(13 42 28 / 0.03); } }
.a1-drn .drn-sol-list li:target { background: rgb(246 224 22 / 0.18); }
.a1-drn .drn-sol-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); font-size: 0.875rem; font-weight: 700; transition: background-color var(--drn-change) ease; }
@media (hover: hover) { .a1-drn .drn-sol-list li:hover .drn-sol-n { background: var(--accent); } }
.a1-drn .drn-sol-list h3 { margin: 6px 0 6px; font-size: 1.375rem; }
.a1-drn .drn-sol-list p { margin: 0; color: #3f4a43; line-height: 1.55; }
.a1-drn .drn-sol-finish .drn-sol-n { background: var(--ink); color: var(--accent); }

/* 4. Local conditions: one dark band with the four conditions and the three city pages. */
.a1-drn .drn-why-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.a1-drn .drn-why-text h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-drn .drn-why-text p { margin: 0; color: rgb(246 241 231 / 0.86); line-height: 1.55; }
.a1-drn .drn-why-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.a1-drn .drn-why-list li { display: flex; align-items: center; min-height: 64px; padding: 12px 16px; border-radius: 14px; background: rgb(246 241 231 / 0.08); box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.14); color: #fff; font-weight: 600; line-height: 1.3; }
.a1-drn .drn-why-cities { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.16); color: rgb(246 241 231 / 0.8); }
.a1-drn .drn-why-cities a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 0.22em; }
.a1-drn .drn-why-cities a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 5. Process: three photo steps along a line that fills on scroll; then the cost factors. */
.a1-drn .drn-steps { position: relative; --p: 1; }
.a1-drn .drn-line { position: relative; height: 4px; margin-bottom: 24px; border-radius: 4px; background: rgb(13 42 28 / 0.12); }
.a1-drn .drn-line span { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--accent); transition: width 160ms linear; }
.a1-drn .drn-steps ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.a1-drn .drn-step { display: grid; align-content: start; gap: 10px; }
.a1-drn .drn-step > * { margin: 0; }
.a1-drn .drn-step figure { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-drn .drn-step figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter var(--drn-reveal) ease; }
.a1-drn .drn-step-n span { display: grid; place-items: center; width: 36px; height: 36px; margin-top: 4px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; transition: background-color var(--drn-change) ease, color var(--drn-change) ease; }
.a1-drn .drn-step h3 { font-size: 1.375rem; }
.a1-drn .drn-step > p:last-child { color: #3f4a43; line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
  .a1-drn.drn-ready .drn-step:not(.is-on) figure img { filter: saturate(0.4) brightness(1.05); }
  .a1-drn.drn-ready .drn-step:not(.is-on) .drn-step-n span { background: var(--surface); color: var(--ink); }
  .a1-drn.drn-ready .drn-step > :not(figure) { transition: opacity var(--drn-change) ease, transform var(--drn-change) var(--ease-out); }
  .a1-drn.drn-ready .drn-step:not(.is-on) > :not(figure) { opacity: 0.55; transform: translateY(6px); }
}
.a1-drn .drn-cost { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px clamp(28px, 5vw, 64px); align-items: start; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 4vw, 40px); border-top: 2px solid var(--ink); }
.a1-drn .drn-cost-text h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.1; }
.a1-drn .drn-cost-text p { margin: 0; color: #3f4a43; line-height: 1.55; }
.a1-drn .drn-cost-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; counter-reset: drn; }
.a1-drn .drn-cost-list li { position: relative; padding: 14px 14px 14px 48px; border-radius: 14px; background: #fffdf8; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); line-height: 1.45; counter-increment: drn; }
.a1-drn .drn-cost-list li::before { content: counter(drn); position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--leaf-1); font-size: 0.75rem; font-weight: 700; }

/* 6. FAQ, then the estimate on the dark band running into the footer. */
.a1-drn .drn-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-calm.a1-drn { padding-bottom: 0; }
.a1-drn .drn-est { display: block; margin-top: var(--drn-sec); padding-block: var(--drn-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-drn .drn-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-drn .drn-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-drn .drn-est-text > *, .a1-drn .drn-est-text h2 { margin: 0; }
.a1-drn .drn-est .drn-eyebrow { color: var(--accent); }
.a1-drn .drn-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-drn .drn-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-drn .drn-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-drn .drn-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-drn .drn-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-drn .drn-est-call a:hover { color: var(--accent) !important; } }
.a1-drn .drn-est-call a:focus-visible, .a1-drn .drn-related a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-drn .drn-related { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.7; }
.a1-drn .drn-related a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-drn .drn-est .c-est-form { color: var(--ink); }
.a1-drn .drn-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-drn .drn-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-drn .drn-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-drn .drn-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform var(--drn-hover) var(--ease-out); }
@media (hover: hover) { .a1-drn .drn-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1000px) {
  .a1-drn .drn-hero, .a1-drn .drn-sol, .a1-drn .drn-why-in, .a1-drn .drn-cost, .a1-drn .drn-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-drn .drn-hero { min-height: 0; gap: 16px; }
  .a1-drn .drn-hero-video { aspect-ratio: 16 / 10; }
  .a1-drn .drn-hero-inset { width: 30%; }
  .a1-drn .drn-sol-side, .a1-drn .drn-est-text { position: static; }
  .a1-drn .drn-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-drn .drn-steps .drn-step:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .a1-drn .drn-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .a1-drn .drn-sub { font-size: 1.0625rem; }
  .a1-drn .drn-actions .wp-block-buttons, .a1-drn .drn-actions .wp-block-button, .a1-drn .drn-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-drn .drn-hero-media { padding: 0 0 28px 28px; }
  .a1-drn .drn-hero-video { border-radius: 18px; }
  .a1-drn .drn-hero-inset { width: 34%; border-width: 4px; border-radius: 14px; }
  .a1-drn .drn-sol-list li { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .a1-drn .drn-why-list, .a1-drn .drn-cost-list { grid-template-columns: minmax(0, 1fr); }
  .a1-drn .drn-why-list li { min-height: 52px; }
  .a1-drn .drn-steps { padding-left: 22px; }
  .a1-drn .drn-line { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; height: auto; margin: 0; }
  .a1-drn .drn-line span { inset: 0 0 auto 0; width: 100%; height: calc(var(--p) * 100%); transition: height 160ms linear; }
  .a1-drn .drn-steps ol { grid-template-columns: minmax(0, 1fr); }
  .a1-drn .drn-steps .drn-step:last-child { grid-column: auto; }
  .a1-drn .drn-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-drn .drn-line span, .a1-drn .drn-step figure img, .a1-drn .drn-sol-list li { transition: none; } }
/* Drainage: the "1 day" figure beats the site's paragraph size; phones give the hero video a 4:3 frame. */
.a1-drn .drn-fig p.drn-fig-n { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.8rem); font-weight: 600; line-height: 1; white-space: nowrap; }
@media (max-width: 640px) { .a1-drn .drn-hero-video { aspect-ratio: 4 / 3; } }

/* ===== Grading & land clearing page (the site's new design) =====
   Motion scale: hover 220 ms, state 320 ms, reveal 600 ms. Scoped to .a1-grd; hidden-until-revealed states apply only
   once the script has added .grd-ready. */
.a1-grd { --grd-sec: clamp(80px, 10vw, 128px); --grd-hover: 220ms; --grd-change: 320ms; --grd-reveal: 600ms; }
.a1-grd .grd-sec { padding-top: var(--grd-sec); }
.a1-grd .grd-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-grd .grd-head h2, .a1-grd .grd-head .c-lead { margin: 0; }
.a1-grd .grd-head-row { max-width: none; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: 14px 48px; }
.a1-grd .grd-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-grd .c-arrow-down { transition: transform var(--grd-hover) var(--ease-out); }
@media (hover: hover) { .a1-grd .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }

/* 1. Hero: words left, a wide video right. */
.a1-grd .grd-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: min(calc(100svh - 120px), 680px); }
.a1-grd .grd-hero-text { display: grid; gap: 18px; padding-block: 24px; }
.a1-grd .grd-hero h1 { margin: 0; font-size: clamp(2.6rem, 1.3rem + 4vw, 5rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-grd .grd-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-grd .grd-l > span { display: inline-block; }
.a1-grd .grd-l:nth-child(2) > span { color: var(--ink-3); }
.a1-grd .grd-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 42ch; }
.a1-grd .grd-sub2 { margin: 0; color: #4f5a52; }
.a1-grd .grd-actions { margin-top: 6px; }
.a1-grd .grd-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-grd .grd-hero-media { position: relative; }
.a1-grd .grd-hero-video { margin: 0; aspect-ratio: 4 / 3.4; border-radius: 24px; overflow: hidden; background: var(--ink); box-shadow: var(--lift); }
.a1-grd .grd-hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-grd .grd-tag { position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-grd .grd-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-grd .grd-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-grd .grd-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-grd .grd-hero .grd-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-grd .grd-sub.grd-in { animation-delay: 0.42s; }
  .js .a1-grd .grd-sub2.grd-in { animation-delay: 0.5s; }
  .js .a1-grd .grd-actions.grd-in { animation-delay: 0.6s; }
  .js .a1-grd .grd-hero-video { animation: grd-wipe 1s var(--ease-out) 0.15s both; }
}
@keyframes grd-wipe { from { clip-path: inset(0 100% 0 0 round 24px); } to { clip-path: inset(0 0 0 0 round 24px); } }
@media (prefers-reduced-motion: no-preference) {
  .a1-grd.grd-ready .grd-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-grd.grd-ready .grd-r { transition: opacity var(--grd-reveal) ease, transform var(--grd-reveal) var(--ease-out); }
  .a1-grd.grd-ready .grd-stage:nth-child(2) { transition-delay: 80ms; }
  .a1-grd.grd-ready .grd-stage:nth-child(3) { transition-delay: 160ms; }
  .a1-grd.grd-ready .grd-stage:nth-child(4) { transition-delay: 240ms; }
}

/* 2. What's included: four stages joined by arrows; then the finishing points and "when you need it". */
.a1-grd .grd-stages { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.a1-grd .grd-stage { position: relative; display: grid; align-content: start; gap: 8px; }
.a1-grd .grd-stage > * { margin: 0; }
.a1-grd .grd-stage figure { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-grd .grd-stage figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--grd-reveal) var(--ease-out); }
@media (hover: hover) { .a1-grd .grd-stage:hover figure img { transform: scale(1.05); } }
.a1-grd .grd-stage:not(:last-child)::after { content: "→"; position: absolute; top: calc((100% - 120px) / 2); right: calc(-1 * clamp(14px, 2vw, 24px) / 2 - 15px); z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); font-weight: 700; box-shadow: 0 0 0 5px var(--bg); }
.a1-grd .grd-stage-n { margin-top: 6px !important; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-3); }
.a1-grd .grd-stage h3 { font-size: 1.375rem; }
.a1-grd .grd-stage > p:last-child { color: #3f4a43; line-height: 1.5; }
.a1-grd .grd-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 14px; margin-top: clamp(32px, 4vw, 48px); }
.a1-grd .grd-more-item { display: grid; align-content: start; gap: 6px; padding: 20px; border-radius: 18px; background: #fffdf8; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-grd .grd-more-item h3 { margin: 0; font-size: 1.125rem; }
.a1-grd .grd-more-item p { margin: 0; color: #3f4a43; font-size: 0.9375rem; line-height: 1.45; }
.a1-grd .grd-fig { background: var(--accent); box-shadow: none; }
.a1-grd .grd-fig p.grd-fig-n { font-size: clamp(1.9rem, 1.5rem + 1vw, 2.5rem); font-weight: 600; line-height: 1; color: var(--ink); white-space: nowrap; }
.a1-grd .grd-fig p { color: var(--ink); }
.a1-grd .grd-when { padding: 20px 22px; border-radius: 18px; background: var(--ink); color: var(--on-dark); }
.a1-grd .grd-when h3 { margin: 0 0 10px; color: #fff; font-size: 1.125rem; }
.a1-grd .grd-when ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.a1-grd .grd-when li { position: relative; padding-left: 24px; font-size: 0.9375rem; }
.a1-grd .grd-when li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 11px; height: 6px; border: solid var(--accent); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }

/* 3. Why grading matters: the three points beside the slope diagram. */
.a1-grd .grd-why-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: var(--leaf-1); }
.a1-grd .grd-why-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-grd .grd-why-lead { margin: 0 0 18px; font-size: var(--step-lead); line-height: 1.5; }
.a1-grd .grd-why-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.a1-grd .grd-why-list li { padding: 14px 16px; border-radius: 14px; background: #fffdf8; line-height: 1.5; }
.a1-grd .grd-why-list strong { display: block; margin-bottom: 2px; }
.a1-grd .grd-why-links { margin: 16px 0 0; color: #3f4a43; font-size: 0.9375rem; }
.a1-grd .grd-why-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-grd .grd-why-links a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-grd .grd-diagram { margin: 0; display: grid; gap: 10px; padding: 18px; border-radius: 20px; background: #fffdf8; box-shadow: var(--lift); }
.a1-grd .grd-diagram svg { width: 100%; height: auto; display: block; }
.a1-grd .grd-diagram figcaption { color: #3f4a43; font-size: 0.9375rem; }
.a1-grd .grd-d-house { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.a1-grd .grd-d-roof { fill: var(--ink); }
.a1-grd .grd-d-ground { fill: #c9b98f; }
.a1-grd .grd-d-slope { stroke: #4f7a43; stroke-width: 8; stroke-linecap: round; fill: none; }
.a1-grd .grd-d-level { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 6; fill: none; opacity: 0.5; }
.a1-grd .grd-d-dim { stroke: var(--ink); stroke-width: 2; fill: none; }
.a1-grd .grd-d-t { fill: var(--ink); font: 700 18px/1 inherit; font-family: inherit; }
.a1-grd .grd-d-drop circle { fill: #3a7bd5; }
.a1-grd .grd-d-arrow { stroke: #3a7bd5; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .a1-grd.grd-ready .grd-d-drop circle { opacity: 0; }
  .a1-grd.grd-ready .grd-why-in.is-in .grd-d-drop circle { animation: grd-drop 2.4s var(--ease-out) 0.4s 2 both; }
  .a1-grd.grd-ready .grd-why-in.is-in .grd-d-drop circle:nth-child(2) { animation-delay: 0.7s; }
  .a1-grd.grd-ready .grd-why-in.is-in .grd-d-drop circle:nth-child(3) { animation-delay: 1s; }
  .a1-grd.grd-ready .grd-d-arrow { stroke-dasharray: 260; stroke-dashoffset: 260; }
  .a1-grd.grd-ready .grd-why-in.is-in .grd-d-arrow { transition: stroke-dashoffset 1.2s var(--ease-out) 0.3s; stroke-dashoffset: 0; }
}
@keyframes grd-drop { 0% { opacity: 0; transform: translate(0, -14px); } 25% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(150px, 18px); } }

/* 4. Cost and process side by side. */
.a1-grd .grd-work-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.a1-grd .grd-work-in h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.1; }
.a1-grd .grd-work-in > div > p { margin: 0 0 18px; color: #3f4a43; line-height: 1.55; }
.a1-grd .grd-cost ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.a1-grd .grd-cost li { position: relative; padding: 12px 14px 12px 42px; border-radius: 12px; background: #fffdf8; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); line-height: 1.4; }
.a1-grd .grd-cost li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--ink-3); }
.a1-grd .grd-proc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-left: 3px solid rgb(13 42 28 / 0.12); }
.a1-grd .grd-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 0 0 22px 18px; }
.a1-grd .grd-step > span { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -40px; border-radius: 50%; background: var(--surface); font-weight: 700; box-shadow: 0 0 0 5px var(--bg); transition: background-color var(--grd-change) ease, color var(--grd-change) ease; }
.a1-grd .grd-step.is-on > span { background: var(--accent); color: var(--accent-ink); }
.a1-grd .grd-step h3 { margin: 6px 0 4px; font-size: 1.1875rem; }
.a1-grd .grd-step p { margin: 0; color: #3f4a43; line-height: 1.5; }

/* 5. FAQ, then the estimate on the dark band running into the footer. */
.a1-grd .grd-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-calm.a1-grd { padding-bottom: 0; }
.a1-grd .grd-est { display: block; margin-top: var(--grd-sec); padding-block: var(--grd-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-grd .grd-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-grd .grd-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-grd .grd-est-text > *, .a1-grd .grd-est-text h2 { margin: 0; }
.a1-grd .grd-est .grd-eyebrow { color: var(--accent); }
.a1-grd .grd-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-grd .grd-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-grd .grd-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-grd .grd-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-grd .grd-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-grd .grd-est-call a:hover { color: var(--accent) !important; } }
.a1-grd .grd-est-call a:focus-visible, .a1-grd .grd-related a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-grd .grd-related { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.7; }
.a1-grd .grd-related a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-grd .grd-est .c-est-form { color: var(--ink); }
.a1-grd .grd-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-grd .grd-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-grd .grd-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-grd .grd-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform var(--grd-hover) var(--ease-out); }
@media (hover: hover) { .a1-grd .grd-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1000px) {
  .a1-grd .grd-hero, .a1-grd .grd-head-row, .a1-grd .grd-why-in, .a1-grd .grd-work-in, .a1-grd .grd-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-grd .grd-hero { min-height: 0; gap: 12px; }
  .a1-grd .grd-hero-video { aspect-ratio: 16 / 10; }
  .a1-grd .grd-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-grd .grd-stage:nth-child(2)::after { display: none; }
  .a1-grd .grd-more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a1-grd .grd-when { grid-column: 1 / -1; }
  .a1-grd .grd-est-text { position: static; }
}
@media (max-width: 640px) {
  .a1-grd .grd-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .a1-grd .grd-sub { font-size: 1.0625rem; }
  .a1-grd .grd-actions .wp-block-buttons, .a1-grd .grd-actions .wp-block-button, .a1-grd .grd-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-grd .grd-hero-video { aspect-ratio: 4 / 3; border-radius: 18px; }
  .a1-grd .grd-stages { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .a1-grd .grd-stage figure { aspect-ratio: 1 / 1; border-radius: 14px; }
  .a1-grd .grd-stage::after { display: none !important; }
  .a1-grd .grd-stage h3 { font-size: 1.125rem; }
  .a1-grd .grd-stage > p:last-child { font-size: 0.9063rem; }
  .a1-grd .grd-more { grid-template-columns: minmax(0, 1fr); }
  .a1-grd .grd-why-in { padding: 20px; }
  .a1-grd .grd-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-grd .grd-stage figure img, .a1-grd .grd-step > span { transition: none; } }
/* Grading: the step numbers sit on the line, so the list is indented to keep them inside the page on phones. */
.a1-grd .grd-proc ol { margin-left: 22px; }

/* ===== Patios, walkways & walls page (the site's new design) =====
   Motion scale: hover 220 ms, state 320 ms, reveal 600 ms. Scoped to .a1-hrd; hidden-until-revealed states apply only
   once the script has added .hrd-ready, and the pattern and base switches only show then. */
.a1-hrd { --hrd-sec: clamp(80px, 10vw, 128px); --hrd-hover: 220ms; --hrd-change: 320ms; --hrd-reveal: 600ms; --hrd-card: #fffdf8; --hrd-line: rgb(13 42 28 / 0.1); }
.a1-hrd .hrd-sec { padding-top: var(--hrd-sec); }
.a1-hrd .hrd-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-hrd .hrd-head h2, .a1-hrd .hrd-head .c-lead { margin: 0; }
.a1-hrd .hrd-head-row { max-width: none; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: 14px 48px; }
.a1-hrd .hrd-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-hrd .c-arrow-down { transition: transform var(--hrd-hover) var(--ease-out); }
@media (hover: hover) { .a1-hrd .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }

/* 1. Hero: the name across the top with the promise beside it; three finished jobs below, the video in the middle. */
.a1-hrd .hrd-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; }
.a1-hrd .hrd-hero-text { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 18px clamp(28px, 5vw, 72px); align-items: end; }
.a1-hrd .hrd-hero-name { display: grid; gap: 16px; }
.a1-hrd .hrd-hero h1 { margin: 0; font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5.4rem); line-height: 0.96; letter-spacing: -0.03em; font-weight: 600; }
.a1-hrd .hrd-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-hrd .hrd-l > span { display: inline-block; }
.a1-hrd .hrd-l:nth-child(2) > span { color: var(--ink-3); }
.a1-hrd .hrd-hero-side { display: grid; gap: 14px; padding-bottom: 6px; }
.a1-hrd .hrd-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; }
.a1-hrd .hrd-sub2 { margin: 0; color: #4f5a52; }
.a1-hrd .hrd-actions { margin-top: 4px; }
.a1-hrd .hrd-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-hrd .hrd-strip { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.72fr) minmax(0, 1.3fr); gap: clamp(10px, 1.4vw, 18px); align-items: end; margin-top: clamp(24px, 3.6vw, 44px); }
.a1-hrd .hrd-strip figure { margin: 0; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-hrd .hrd-strip-a, .a1-hrd .hrd-strip-b { aspect-ratio: 4 / 3; }
.a1-hrd .hrd-strip-a img, .a1-hrd .hrd-strip-b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-hrd .hrd-strip-v { position: relative; }
.a1-hrd .hrd-strip .hrd-hero-video { aspect-ratio: 3 / 4; background: var(--ink); }
.a1-hrd .hrd-hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-hrd .hrd-tag { position: absolute; left: 12px; bottom: 12px; width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 6px 12px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; line-height: 1.3; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-hrd .hrd-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-hrd .hrd-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-hrd .hrd-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-hrd .hrd-hero .hrd-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-hrd .hrd-sub.hrd-in { animation-delay: 0.36s; }
  .js .a1-hrd .hrd-sub2.hrd-in { animation-delay: 0.44s; }
  .js .a1-hrd .hrd-actions.hrd-in { animation-delay: 0.52s; }
  .js .a1-hrd .hrd-strip > * { animation: hrd-lay 0.8s var(--ease-out) both; }
  .js .a1-hrd .hrd-strip > :nth-child(1) { animation-delay: 0.2s; }
  .js .a1-hrd .hrd-strip > :nth-child(2) { animation-delay: 0.3s; }
  .js .a1-hrd .hrd-strip > :nth-child(3) { animation-delay: 0.4s; }
  .a1-hrd.hrd-ready .hrd-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-hrd.hrd-ready .hrd-r { transition: opacity var(--hrd-reveal) ease, transform var(--hrd-reveal) var(--ease-out); }
  .a1-hrd.hrd-ready .hrd-card:nth-child(3n + 2), .a1-hrd.hrd-ready .hrd-step:nth-child(2), .a1-hrd.hrd-ready .hrd-job li:nth-child(2) { transition-delay: 80ms; }
  .a1-hrd.hrd-ready .hrd-card:nth-child(3n), .a1-hrd.hrd-ready .hrd-step:nth-child(3), .a1-hrd.hrd-ready .hrd-job li:nth-child(3) { transition-delay: 160ms; }
  .a1-hrd.hrd-ready .hrd-job li:nth-child(4) { transition-delay: 240ms; }
}
/* Each picture settles into place like a paver being set: a short drop, transform only, so the photos show at once. */
@keyframes hrd-lay { from { transform: translateY(28px); } to { transform: none; } }

/* 2. What we build: six photo cards, then the pattern sampler band. */
.a1-hrd .hrd-cards { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 36px) clamp(14px, 2vw, 24px); }
.a1-hrd .hrd-card { display: grid; align-content: start; gap: 8px; }
.a1-hrd .hrd-card > * { margin: 0; }
.a1-hrd .hrd-card figure { aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-hrd .hrd-card figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--hrd-reveal) var(--ease-out); }
@media (hover: hover) { .a1-hrd .hrd-card:hover figure img { transform: scale(1.05); } }
.a1-hrd .hrd-card h3 { font-size: 1.3125rem; }
.a1-hrd .hrd-card p { color: #3f4a43; line-height: 1.5; }
.a1-hrd .hrd-pats-band { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(36px, 5vw, 56px); padding: clamp(22px, 3.4vw, 40px); border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.a1-hrd .hrd-pats-text { display: grid; gap: 16px; }
.a1-hrd .hrd-pats-text > * { margin: 0; }
.a1-hrd .hrd-pats-text h3 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.a1-hrd .hrd-pats-text p { color: rgb(246 241 231 / 0.85); line-height: 1.55; }
.a1-hrd .hrd-pats-text a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-hrd .hrd-pats-btns { display: none; flex-wrap: wrap; gap: 8px; }
.a1-hrd.hrd-ready .hrd-pats-btns { display: flex; }
.a1-hrd .hrd-pats-btns button, .a1-hrd .hrd-cut-switch button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: 0.9375rem; cursor: pointer; transition: background-color var(--hrd-change) ease, color var(--hrd-change) ease, box-shadow var(--hrd-change) ease; }
.a1-hrd .hrd-pats-btns button { background: rgb(246 241 231 / 0.1); color: #fff; box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.3); }
.a1-hrd .hrd-pats-btns button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
@media (hover: hover) { .a1-hrd .hrd-pats-btns button[aria-pressed="false"]:hover { background: rgb(246 241 231 / 0.2); } }
.a1-hrd .hrd-pats-btns button:focus-visible, .a1-hrd .hrd-pats-text a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Without the script the three patterns sit side by side; with it they share one frame and the buttons pick one. */
.a1-hrd .hrd-pats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.a1-hrd .hrd-pat { margin: 0; display: grid; gap: 8px; }
.a1-hrd .hrd-pat svg { width: 100%; height: auto; display: block; border-radius: 14px; }
.a1-hrd .hrd-pat figcaption { font-size: 0.875rem; font-weight: 700; color: rgb(246 241 231 / 0.85); }
.a1-hrd.hrd-ready .hrd-pats { grid-template-columns: minmax(0, 1fr); }
.a1-hrd.hrd-ready .hrd-pat { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--hrd-change) ease, visibility 0s linear var(--hrd-change); }
.a1-hrd.hrd-ready .hrd-pat.is-on { opacity: 1; visibility: visible; transition: opacity var(--hrd-change) ease, visibility 0s; }
.a1-hrd.hrd-ready .hrd-pat figcaption { display: none; }
.a1-hrd.hrd-ready .hrd-pat svg { box-shadow: 0 20px 40px -24px rgb(0 0 0 / 0.6); }

/* 3. What goes under the pavers: the text and base photo beside a cut-away of the four layers. */
.a1-hrd .hrd-base-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.a1-hrd .hrd-base-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-hrd .hrd-base-text > * { margin: 0; }
.a1-hrd .hrd-base-text h2 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); line-height: 1.05; }
.a1-hrd .hrd-base-lead { font-size: var(--step-lead); line-height: 1.5; }
.a1-hrd .hrd-base-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.a1-hrd .hrd-base-photo { margin: 0; display: grid; gap: 8px; }
.a1-hrd .hrd-base-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 18px; box-shadow: var(--lift); }
.a1-hrd .hrd-base-photo figcaption { font-size: 0.875rem; color: #4f5a52; }
.a1-hrd .hrd-fig { display: grid; align-content: end; gap: 10px; padding: 20px; border-radius: 18px; background: var(--accent); }
.a1-hrd .hrd-fig p { margin: 0; color: var(--ink); line-height: 1.45; }
.a1-hrd .hrd-fig p.hrd-fig-n { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); font-weight: 600; line-height: 1; white-space: nowrap; }
.a1-hrd .hrd-cut { padding: clamp(18px, 2.6vw, 30px); border-radius: 24px; background: var(--hrd-card); box-shadow: var(--lift); }
.a1-hrd .hrd-cut-switch { display: none; gap: 6px; width: max-content; max-width: 100%; margin-bottom: 18px; padding: 5px; border-radius: 999px; background: var(--leaf-1); }
.a1-hrd.hrd-ready .hrd-cut-switch { display: flex; }
.a1-hrd .hrd-cut-switch button { background: transparent; color: var(--ink); }
.a1-hrd .hrd-cut-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.a1-hrd .hrd-cut-switch button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-hrd .hrd-layers { margin: 0; padding: 0; list-style: none; display: grid; }
.a1-hrd .hrd-layer { display: grid; grid-template-columns: minmax(96px, 0.62fr) minmax(0, 1fr); gap: 0 clamp(16px, 2.4vw, 28px); }
.a1-hrd .hrd-layer > div { align-self: center; padding-block: 12px; }
.a1-hrd .hrd-layer h3 { margin: 0 0 3px; font-size: 1.125rem; }
.a1-hrd .hrd-layer p { margin: 0; color: #3f4a43; font-size: 0.9375rem; line-height: 1.5; }
.a1-hrd .hrd-band { display: block; transition: min-height var(--hrd-change) var(--ease-out); }
.a1-hrd .hrd-l-pavers .hrd-band { min-height: 58px; border-radius: 12px 12px 0 0; background-color: #b29b7e; background-image: linear-gradient(90deg, #ece3d0 2px, transparent 2px), linear-gradient(#ece3d0 2px, transparent 2px); background-size: 38px 100%, 100% 29px; background-position: 9px 0, 0 0; }
.a1-hrd .hrd-l-sand .hrd-band { min-height: 34px; background-color: #e2cd99; background-image: radial-gradient(rgb(120 90 40 / 0.25) 1px, transparent 1.4px); background-size: 7px 7px; }
.a1-hrd .hrd-l-base .hrd-band { min-height: 92px; background-color: #9b968c; background-image: radial-gradient(circle at 30% 30%, #c3beb3 0 3px, transparent 3.5px), radial-gradient(circle at 70% 65%, #7a756b 0 3.5px, transparent 4px); background-size: 16px 16px, 19px 19px; }
.a1-hrd .hrd-cut[data-mode="drive"] .hrd-l-base .hrd-band { min-height: 160px; }
.a1-hrd .hrd-l-soil .hrd-band { min-height: 78px; border-radius: 0 0 12px 12px; background-color: #7b5b3d; background-image: radial-gradient(rgb(40 25 12 / 0.35) 1.5px, transparent 2px); background-size: 11px 11px; }
.a1-hrd .hrd-deep { border-radius: 4px; transition: background-color var(--hrd-change) ease, box-shadow var(--hrd-change) ease; }
.a1-hrd .hrd-cut[data-mode="drive"] .hrd-deep { background: var(--accent); box-shadow: 0 0 0 3px var(--accent); color: var(--ink); }
.a1-hrd .hrd-cut-note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--hrd-line); color: #3f4a43; line-height: 1.55; }
.a1-hrd .hrd-cut-note a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-hrd .hrd-cut-note a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 4. Cost on a light band. */
.a1-hrd .hrd-cost-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--leaf-1); }
.a1-hrd .hrd-cost-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-hrd .hrd-cost-text p { margin: 0; line-height: 1.55; }
.a1-hrd .hrd-cost-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-hrd .hrd-cost-list li { position: relative; padding: 14px 14px 14px 40px; border-radius: 14px; background: var(--hrd-card); line-height: 1.4; }
.a1-hrd .hrd-cost-list li::before { content: ""; position: absolute; left: 15px; top: 1.15em; width: 12px; height: 8px; border-radius: 2px; background: #b29b7e; box-shadow: 0 0 0 2px var(--hrd-card), 0 0 0 3px #8e7a60; }

/* 5. Process: three steps on a line, then four photos of crews at work. */
.a1-hrd .hrd-steps { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.a1-hrd .hrd-steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 3px; background: repeating-linear-gradient(90deg, rgb(13 42 28 / 0.18) 0 10px, transparent 10px 16px); }
.a1-hrd .hrd-step { position: relative; display: grid; align-content: start; gap: 8px; }
.a1-hrd .hrd-step > * { margin: 0; }
.a1-hrd .hrd-step-n { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 1.125rem; box-shadow: 0 0 0 6px var(--bg); }
.a1-hrd .hrd-step h3 { font-size: 1.25rem; }
.a1-hrd .hrd-step p { color: #3f4a43; line-height: 1.5; }
.a1-hrd .hrd-job { margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
.a1-hrd .hrd-job figure { margin: 0; display: grid; gap: 8px; }
.a1-hrd .hrd-job img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 16px; }
.a1-hrd .hrd-job figcaption { font-size: 0.875rem; font-weight: 700; color: #4f5a52; }

/* 6. FAQ, then the estimate on the dark band running into the footer. */
.a1-hrd .hrd-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-calm.a1-hrd { padding-bottom: 0; }
.a1-hrd .hrd-est { display: block; margin-top: var(--hrd-sec); padding-block: var(--hrd-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-hrd .hrd-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-hrd .hrd-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-hrd .hrd-est-text > *, .a1-hrd .hrd-est-text h2 { margin: 0; }
.a1-hrd .hrd-est .hrd-eyebrow { color: var(--accent); }
.a1-hrd .hrd-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-hrd .hrd-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-hrd .hrd-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-hrd .hrd-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-hrd .hrd-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-hrd .hrd-est-call a:hover { color: var(--accent) !important; } }
.a1-hrd .hrd-est-call a:focus-visible, .a1-hrd .hrd-related a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-hrd .hrd-related { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.7; }
.a1-hrd .hrd-related a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-hrd .hrd-est .c-est-form { color: var(--ink); }
.a1-hrd .hrd-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-hrd .hrd-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-hrd .hrd-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-hrd .hrd-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform var(--hrd-hover) var(--ease-out); }
@media (hover: hover) { .a1-hrd .hrd-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1000px) {
  .a1-hrd .hrd-hero-text, .a1-hrd .hrd-head-row, .a1-hrd .hrd-pats-band, .a1-hrd .hrd-base-in, .a1-hrd .hrd-cost-in, .a1-hrd .hrd-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-hrd .hrd-hero-side { max-width: 620px; }
  .a1-hrd .hrd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-hrd .hrd-base-text, .a1-hrd .hrd-est-text { position: static; }
  .a1-hrd .hrd-job { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .a1-hrd .hrd-hero h1 { font-size: clamp(2.4rem, 11.5vw, 3.1rem); }
  .a1-hrd .hrd-sub { font-size: 1.0625rem; }
  .a1-hrd .hrd-actions .wp-block-buttons, .a1-hrd .hrd-actions .wp-block-button, .a1-hrd .hrd-actions .wp-block-button__link { width: 100%; justify-content: center; }
  /* Phones: the video tall on the left, the two photos stacked beside it. */
  .a1-hrd .hrd-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-items: stretch; gap: 10px; }
  .a1-hrd .hrd-strip-v { grid-column: 1; grid-row: 1 / span 2; }
  .a1-hrd .hrd-strip .hrd-hero-video { aspect-ratio: auto; height: 100%; }
  .a1-hrd .hrd-strip-a { grid-column: 2; grid-row: 1; }
  .a1-hrd .hrd-strip-b { grid-column: 2; grid-row: 2; }
  .a1-hrd .hrd-strip figure { border-radius: 16px; }
  .a1-hrd .hrd-tag { left: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: 0.75rem; padding: 5px 10px; }
  .a1-hrd .hrd-cards { gap: 22px 12px; }
  .a1-hrd .hrd-card figure { aspect-ratio: 1 / 1; border-radius: 14px; }
  .a1-hrd .hrd-card h3 { font-size: 1.0625rem; }
  .a1-hrd .hrd-card p { font-size: 0.9063rem; }
  .a1-hrd .hrd-pats-band { padding: 20px; }
  .a1-hrd .hrd-pats-btns button { flex: 1 1 auto; padding-inline: 12px; }
  .a1-hrd .hrd-cut { padding: 16px; }
  .a1-hrd .hrd-cut-switch { width: 100%; }
  .a1-hrd .hrd-cut-switch button { flex: 1 1 0; padding-inline: 10px; }
  .a1-hrd .hrd-layer { grid-template-columns: 74px minmax(0, 1fr); gap: 0 14px; }
  .a1-hrd .hrd-layer p { font-size: 0.875rem; }
  .a1-hrd .hrd-cost-in { padding: 20px; }
  .a1-hrd .hrd-cost-list { grid-template-columns: minmax(0, 1fr); }
  .a1-hrd .hrd-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .a1-hrd .hrd-steps::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 3px; height: auto; background: repeating-linear-gradient(180deg, rgb(13 42 28 / 0.18) 0 10px, transparent 10px 16px); }
  .a1-hrd .hrd-step { grid-template-columns: 46px minmax(0, 1fr); gap: 4px 16px; }
  .a1-hrd .hrd-step-n { grid-row: 1 / span 2; margin-bottom: 0; }
  .a1-hrd .hrd-job { gap: 10px; }
  .a1-hrd .hrd-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-hrd .hrd-card figure img, .a1-hrd .hrd-band, .a1-hrd .hrd-pat, .a1-hrd .hrd-deep, .a1-hrd button { transition: none !important; } }
/* Patios, phones: the photos keep their 4:3 shape at the top of their cells; only the video stretches over both rows. */
@media (max-width: 640px) {
  .a1-hrd .hrd-strip { align-items: start; }
  .a1-hrd .hrd-strip-v { align-self: stretch; display: grid; }
  .a1-hrd .hrd-strip-a, .a1-hrd .hrd-strip-b { width: 100%; }
  .a1-hrd .hrd-tag { border-radius: 10px; }
  .a1-hrd .hrd-base-photo img { aspect-ratio: 4 / 5; }
}
@media (max-width: 640px) {
  .a1-hrd .hrd-pats-btns { flex-wrap: nowrap; gap: 6px; }
  .a1-hrd .hrd-pats-btns button { flex: 1 1 0; min-width: 0; padding-inline: 6px; font-size: 0.8125rem; }
}
@media (min-width: 641px) and (max-width: 1200px) { .a1-hrd .hrd-pats-btns button { padding-inline: 13px; font-size: 0.875rem; } }

/* ===== Outdoor living page (the site's new design) =====
   Motion scale: hover 220 ms, state 320 ms, reveal 600 ms. Scoped to .a1-odl; hidden-until-revealed states apply only
   once the script has added .odl-ready. Without the script the plan shows every part at once. */
.a1-odl { --odl-sec: clamp(80px, 10vw, 128px); --odl-hover: 220ms; --odl-change: 320ms; --odl-reveal: 600ms; --odl-card: #fffdf8; --odl-fire: #c4521f; }
.a1-odl .odl-sec { padding-top: var(--odl-sec); }
.a1-odl .odl-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-odl .odl-head h2, .a1-odl .odl-head .c-lead { margin: 0; }
.a1-odl .odl-head-row { max-width: none; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: 14px 48px; }
.a1-odl .odl-head .c-lead a, .a1-odl .odl-card a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-odl .odl-head .c-lead a:focus-visible, .a1-odl .odl-card a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-odl .odl-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-odl .c-arrow-down { transition: transform var(--odl-hover) var(--ease-out); }
@media (hover: hover) { .a1-odl .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }

/* 1. Hero: words left, two photos right at different heights. */
.a1-odl .odl-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: min(calc(100svh - 120px), 700px); }
.a1-odl .odl-hero-text { display: grid; gap: 18px; padding-block: 24px; }
.a1-odl .odl-hero h1 { margin: 0; font-size: clamp(2.6rem, 1.3rem + 4vw, 5rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-odl .odl-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-odl .odl-l > span { display: inline-block; }
.a1-odl .odl-l:nth-child(2) > span { color: var(--ink-3); }
.a1-odl .odl-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 44ch; }
.a1-odl .odl-sub2 { margin: 0; color: #4f5a52; max-width: 52ch; }
.a1-odl .odl-actions { margin-top: 6px; }
.a1-odl .odl-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-odl .odl-hero-media { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(10px, 1.4vw, 16px); align-items: start; }
.a1-odl .odl-hero-media figure { margin: 0; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-odl .odl-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-odl .odl-hero-a { aspect-ratio: 4 / 5; }
.a1-odl .odl-hero-b { aspect-ratio: 3 / 4; margin-top: clamp(40px, 8vw, 110px) !important; }
.a1-odl .odl-tag { position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-odl .odl-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-odl .odl-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-odl .odl-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-odl .odl-hero .odl-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-odl .odl-sub.odl-in { animation-delay: 0.4s; }
  .js .a1-odl .odl-sub2.odl-in { animation-delay: 0.48s; }
  .js .a1-odl .odl-actions.odl-in { animation-delay: 0.56s; }
  /* The two photos rise into place at slightly different speeds: transform only, so they show at once. */
  .js .a1-odl .odl-hero-a { animation: odl-rise 0.9s var(--ease-out) 0.1s both; }
  .js .a1-odl .odl-hero-b { animation: odl-rise 1.1s var(--ease-out) 0.2s both; }
  .a1-odl.odl-ready .odl-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-odl.odl-ready .odl-r { transition: opacity var(--odl-reveal) ease, transform var(--odl-reveal) var(--ease-out); }
  .a1-odl.odl-ready .odl-card:nth-child(2), .a1-odl.odl-ready .odl-step:nth-child(2) { transition-delay: 80ms; }
  .a1-odl.odl-ready .odl-card:nth-child(3), .a1-odl.odl-ready .odl-step:nth-child(3) { transition-delay: 160ms; }
}
@keyframes odl-rise { from { transform: translateY(32px); } to { transform: none; } }

/* 2. What we build: photo cards, then the drawn cards on a dark band. */
.a1-odl .odl-cards { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.a1-odl .odl-card { display: grid; align-content: start; gap: 8px; }
.a1-odl .odl-card > * { margin: 0; }
.a1-odl .odl-card figure { aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-odl .odl-card figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--odl-reveal) var(--ease-out); }
@media (hover: hover) { .a1-odl .odl-card:hover figure img { transform: scale(1.05); } }
.a1-odl .odl-card h3 { font-size: 1.3125rem; }
.a1-odl .odl-card p { color: #3f4a43; line-height: 1.5; }
.a1-odl .odl-drawn { margin: clamp(28px, 4vw, 44px) 0 0; padding: clamp(18px, 2.6vw, 28px); list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.a1-odl .odl-dcard { display: grid; align-content: start; gap: 8px; padding: 18px; border-radius: 16px; background: rgb(246 241 231 / 0.06); box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.12); transition: background-color var(--odl-hover) ease; }
@media (hover: hover) { .a1-odl .odl-dcard:hover { background: rgb(246 241 231 / 0.11); } }
.a1-odl .odl-dcard > * { margin: 0; }
.a1-odl .odl-dicon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); }
.a1-odl .odl-dcard h3 { color: #fff; font-size: 1.125rem; }
.a1-odl .odl-dcard p { color: rgb(246 241 231 / 0.82); font-size: 0.9375rem; line-height: 1.5; }

/* 3. Planning your space: the three points beside a plan view of a backyard. */
.a1-odl .odl-plan-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--leaf-1); }
.a1-odl .odl-plan-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-odl .odl-plan-lead { margin: 0 0 18px; font-size: var(--step-lead); line-height: 1.5; }
.a1-odl .odl-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.a1-odl .odl-points button { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--odl-card); color: var(--ink); font: inherit; line-height: 1.5; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--odl-change) ease, background-color var(--odl-change) ease; }
.a1-odl .odl-points strong { display: block; margin-bottom: 2px; }
.a1-odl .odl-pt-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); font-weight: 700; transition: background-color var(--odl-change) ease; }
.a1-odl .odl-points button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.a1-odl .odl-points button[aria-pressed="true"] .odl-pt-n { background: var(--accent); }
@media (hover: hover) { .a1-odl .odl-points button[aria-pressed="false"]:hover { box-shadow: inset 0 0 0 2px rgb(13 42 28 / 0.25); } }
.a1-odl .odl-points button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-odl .odl-map { margin: 0; display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: var(--odl-card); box-shadow: var(--lift); }
.a1-odl .odl-map svg { width: 100%; height: auto; display: block; }
.a1-odl .odl-map figcaption { color: #3f4a43; font-size: 0.9375rem; }
.a1-odl .odl-m-lawn { fill: #cfdfb3; }
.a1-odl .odl-m-fence { fill: none; stroke: #8a6a48; stroke-width: 5; stroke-dasharray: 12 6; }
.a1-odl .odl-m-house { fill: #e9e1cf; stroke: var(--ink); stroke-width: 2; }
.a1-odl .odl-m-door { fill: var(--ink); }
.a1-odl .odl-m-patio { fill: #cdb894; stroke: #a8916d; stroke-width: 2; }
.a1-odl .odl-m-tree { fill: #6e9656; }
.a1-odl .odl-m-firepit circle { fill: var(--odl-fire); stroke: #6b2e12; stroke-width: 3; }
.a1-odl .odl-m-grill { fill: #4c5a53; }
.a1-odl .odl-m-t { fill: var(--ink); font: 700 16px/1 inherit; font-family: inherit; }
.a1-odl .odl-m-t-l { fill: #fff; font-size: 14px; }
.a1-odl .odl-m-t-s { font-size: 14px; }
.a1-odl .odl-m-pergola { fill: rgb(122 90 60 / 0.12); stroke: #7a5a3c; stroke-width: 3; }
.a1-odl .odl-m-slats { stroke: #7a5a3c; stroke-width: 2; }
.a1-odl .odl-m-sun { fill: #f6e016; stroke: #c9a800; stroke-width: 2; }
.a1-odl .odl-m-rays { stroke: #c9a800; stroke-width: 3; stroke-linecap: round; }
.a1-odl .odl-m-arrow { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.a1-odl .odl-m-ring { fill: rgb(196 82 31 / 0.08); stroke: var(--odl-fire); stroke-width: 2.5; stroke-dasharray: 8 6; }
.a1-odl .odl-m-dim { stroke: var(--odl-fire); stroke-width: 2.5; stroke-dasharray: 4 4; }
.a1-odl .odl-m-line { fill: none; stroke: #2f6fb5; stroke-width: 3; stroke-dasharray: 9 5; }
.a1-odl .odl-m-lights circle { fill: #f6e016; stroke: #c9a800; stroke-width: 2; }
.a1-odl .odl-p { transition: opacity var(--odl-change) ease; }
.a1-odl [data-odl-plan]:not([data-on="all"]) .odl-p { opacity: 0.12; }
.a1-odl [data-on="sun"] .odl-p-sun, .a1-odl [data-on="dist"] .odl-p-dist, .a1-odl [data-on="util"] .odl-p-util { opacity: 1 !important; }

/* 4. Cost on the dark band, the six things it depends on as a numbered list. */
.a1-odl .odl-cost-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.a1-odl .odl-cost-text h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-odl .odl-cost-text p { margin: 0; line-height: 1.55; color: rgb(246 241 231 / 0.88); }
.a1-odl .odl-cost-list { margin: 0; padding: 0; list-style: none; counter-reset: odl; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-odl .odl-cost-list li { counter-increment: odl; position: relative; padding: 14px 14px 14px 52px; border-radius: 14px; background: rgb(246 241 231 / 0.07); box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.12); line-height: 1.4; }
.a1-odl .odl-cost-list li::before { content: counter(odl, decimal-leading-zero); position: absolute; left: 14px; top: 14px; color: var(--accent); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; }

/* 5. Process: the timeline figure beside three steps. */
.a1-odl .odl-proc-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.a1-odl .odl-proc-head { display: grid; gap: 20px; position: sticky; top: 120px; }
.a1-odl .odl-proc-head h2 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); line-height: 1.05; }
.a1-odl .odl-fig { display: grid; gap: 10px; padding: 22px; border-radius: 18px; background: var(--accent); }
.a1-odl .odl-fig p { margin: 0; color: var(--ink); line-height: 1.45; }
.a1-odl .odl-fig p.odl-fig-n { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); font-weight: 600; line-height: 1; white-space: nowrap; }
.a1-odl .odl-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.a1-odl .odl-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(18px, 2.4vw, 26px); border-radius: 18px; background: var(--odl-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-odl .odl-step-n { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--ink); color: var(--accent); font-weight: 700; font-size: 1.375rem; }
.a1-odl .odl-step h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.a1-odl .odl-step p { margin: 0; color: #3f4a43; line-height: 1.5; }

/* 6. FAQ, then the estimate on the dark band running into the footer. */
.a1-odl .odl-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-calm.a1-odl { padding-bottom: 0; }
.a1-odl .odl-est { display: block; margin-top: var(--odl-sec); padding-block: var(--odl-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-odl .odl-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-odl .odl-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-odl .odl-est-text > *, .a1-odl .odl-est-text h2 { margin: 0; }
.a1-odl .odl-est .odl-eyebrow { color: var(--accent); }
.a1-odl .odl-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-odl .odl-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-odl .odl-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-odl .odl-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-odl .odl-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-odl .odl-est-call a:hover { color: var(--accent) !important; } }
.a1-odl .odl-est-call a:focus-visible, .a1-odl .odl-related a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-odl .odl-related { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.7; }
.a1-odl .odl-related a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-odl .odl-est .c-est-form { color: var(--ink); }
.a1-odl .odl-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-odl .odl-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-odl .odl-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-odl .odl-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform var(--odl-hover) var(--ease-out); }
@media (hover: hover) { .a1-odl .odl-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1000px) {
  .a1-odl .odl-hero, .a1-odl .odl-head-row, .a1-odl .odl-plan-in, .a1-odl .odl-cost-in, .a1-odl .odl-proc-in, .a1-odl .odl-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-odl .odl-hero { min-height: 0; gap: 12px; }
  .a1-odl .odl-hero-a { aspect-ratio: 4 / 3.4; }
  .a1-odl .odl-hero-b { margin-top: clamp(28px, 6vw, 60px) !important; }
  .a1-odl .odl-drawn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-odl .odl-proc-head, .a1-odl .odl-est-text { position: static; }
}
@media (max-width: 640px) {
  .a1-odl .odl-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .a1-odl .odl-sub { font-size: 1.0625rem; }
  .a1-odl .odl-actions .wp-block-buttons, .a1-odl .odl-actions .wp-block-button, .a1-odl .odl-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-odl .odl-hero-media figure { border-radius: 16px; }
  .a1-odl .odl-hero-a { aspect-ratio: 4 / 5; }
  .a1-odl .odl-tag { left: 8px; bottom: 8px; font-size: 0.75rem; padding: 5px 10px; }
  .a1-odl .odl-cards { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .a1-odl .odl-drawn { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 10px; }
  .a1-odl .odl-dcard { grid-template-columns: 48px minmax(0, 1fr); gap: 2px 14px; padding: 14px; }
  .a1-odl .odl-dicon { grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; }
  .a1-odl .odl-dicon svg { width: 32px; height: 32px; }
  .a1-odl .odl-plan-in, .a1-odl .odl-cost-in { padding: 20px; }
  .a1-odl .odl-map { order: -1; padding: 10px; }
  .a1-odl .odl-cost-list { grid-template-columns: minmax(0, 1fr); }
  .a1-odl .odl-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .a1-odl .odl-step-n { width: 44px; height: 44px; font-size: 1.125rem; border-radius: 12px; }
  .a1-odl .odl-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-odl .odl-card figure img, .a1-odl .odl-p, .a1-odl .odl-dcard, .a1-odl button, .a1-odl .odl-pt-n { transition: none !important; } }
/* Outdoor living plan: larger labels, and on phones the drawing sits between the lead and the three points. */
.a1-odl .odl-m-t { font-size: 18px; }
.a1-odl .odl-m-t-s { font-size: 16px; }
.a1-odl .odl-m-t-l { font-size: 15px; }
@media (max-width: 640px) {
  .a1-odl .odl-plan-in { gap: 16px; }
  .a1-odl .odl-plan-text { display: contents; }
  .a1-odl .odl-plan-text h2 { order: 1; margin: 0; }
  .a1-odl .odl-plan-lead { order: 2; margin: 0; }
  .a1-odl .odl-map { order: 3; }
  .a1-odl .odl-points { order: 4; }
  .a1-odl .odl-m-t { font-size: 24px; }
  .a1-odl .odl-m-t-s { font-size: 21px; }
  .a1-odl .odl-m-t-l { font-size: 19px; }
  .a1-odl .odl-map figcaption { font-size: 0.875rem; }
}

/* ===== Landscape design & planting page (the site's new design) =====
   Motion scale: hover 220 ms, state 320 ms, reveal 600 ms. Scoped to .a1-lds; hidden-until-revealed states and the
   one-at-a-time bed finish apply only once the script has added .lds-ready. */
.a1-lds { --lds-sec: clamp(80px, 10vw, 128px); --lds-hover: 220ms; --lds-change: 320ms; --lds-reveal: 600ms; --lds-card: #fffdf8; --lds-mulch: #6b4a32; }
.a1-lds .lds-sec { padding-top: var(--lds-sec); }
.a1-lds .lds-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-lds .lds-head h2, .a1-lds .lds-head .c-lead { margin: 0; }
.a1-lds .lds-head-row { max-width: none; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: 14px 48px; }
.a1-lds .lds-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-lds .c-arrow-down { transition: transform var(--lds-hover) var(--ease-out); }
@media (hover: hover) { .a1-lds .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }
.a1-lds a.lds-link, .a1-lds .lds-cond a, .a1-lds .lds-together a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-lds .lds-cond a:focus-visible, .a1-lds .lds-together a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 1. Hero: words left, four beds right in a 2 x 2 grid. */
.a1-lds .lds-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: min(calc(100svh - 120px), 700px); }
.a1-lds .lds-hero-text { display: grid; gap: 18px; padding-block: 24px; }
.a1-lds .lds-hero h1 { margin: 0; font-size: clamp(2.6rem, 1.3rem + 4vw, 5rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-lds .lds-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-lds .lds-l > span { display: inline-block; }
.a1-lds .lds-l:nth-child(2) > span { color: var(--ink-3); }
.a1-lds .lds-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 44ch; }
.a1-lds .lds-sub2 { margin: 0; color: #4f5a52; max-width: 52ch; }
.a1-lds .lds-actions { margin-top: 6px; }
.a1-lds .lds-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-lds .lds-beds { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
.a1-lds .lds-bed figure { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-lds .lds-bed:nth-child(1) figure, .a1-lds .lds-bed:nth-child(4) figure { border-radius: 20px 20px 20px 56px; }
.a1-lds .lds-bed:nth-child(2) figure, .a1-lds .lds-bed:nth-child(3) figure { border-radius: 56px 20px 20px 20px; }
.a1-lds .lds-bed img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--lds-reveal) var(--ease-out); }
@media (hover: hover) { .a1-lds .lds-bed:hover img { transform: scale(1.05); } }
.a1-lds .lds-bed figcaption { position: absolute; right: 10px; bottom: 10px; padding: 5px 11px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-lds .lds-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-lds .lds-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-lds .lds-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-lds .lds-hero .lds-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-lds .lds-sub.lds-in { animation-delay: 0.4s; }
  .js .a1-lds .lds-sub2.lds-in { animation-delay: 0.48s; }
  .js .a1-lds .lds-actions.lds-in { animation-delay: 0.56s; }
  /* The four beds settle in one after another, like plants set into a bed: transform only, so they show at once. */
  .js .a1-lds .lds-bed { animation: lds-set 0.8s var(--ease-out) both; }
  .js .a1-lds .lds-bed:nth-child(2) { animation-delay: 0.08s; }
  .js .a1-lds .lds-bed:nth-child(3) { animation-delay: 0.16s; }
  .js .a1-lds .lds-bed:nth-child(4) { animation-delay: 0.24s; }
  .a1-lds.lds-ready .lds-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-lds.lds-ready .lds-r { transition: opacity var(--lds-reveal) ease, transform var(--lds-reveal) var(--ease-out); }
  .a1-lds.lds-ready .lds-index li:nth-child(even), .a1-lds.lds-ready .lds-step:nth-child(2) { transition-delay: 80ms; }
  .a1-lds.lds-ready .lds-step:nth-child(3) { transition-delay: 160ms; }
}
@keyframes lds-set { from { transform: translateY(20px) scale(0.97); } to { transform: none; } }

/* 2. What's included: the heading and crew photo beside a numbered index of the work. */
.a1-lds .lds-inc-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.a1-lds .lds-inc-side { display: grid; gap: 16px; position: sticky; top: 120px; }
.a1-lds .lds-inc-side > * { margin: 0; }
.a1-lds .lds-inc-side h2 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); line-height: 1.05; }
.a1-lds .lds-inc-photo { margin: 8px 0 0; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; box-shadow: var(--lift); }
.a1-lds .lds-inc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-lds .lds-index { margin: 0; padding: 0; list-style: none; display: grid; }
.a1-lds .lds-index li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid rgb(13 42 28 / 0.14); }
.a1-lds .lds-index li:last-child { border-bottom: 1px solid rgb(13 42 28 / 0.14); }
.a1-lds .lds-index-n { font-size: 1.75rem; font-weight: 600; line-height: 1; color: #5f7f4f; letter-spacing: -0.02em; }
.a1-lds .lds-index h3 { margin: 0 0 6px; font-size: 1.3125rem; }
.a1-lds .lds-index p { margin: 0; color: #3f4a43; line-height: 1.5; }
.a1-lds .lds-together { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: clamp(28px, 4vw, 40px); padding: 18px 22px; border-radius: 18px; background: var(--leaf-1); }
.a1-lds .lds-together > * { margin: 0; }
.a1-lds .lds-together h3 { font-size: 1.0625rem; }
.a1-lds .lds-together ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.a1-lds .lds-together li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--lds-card); text-decoration: none; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.14); transition: background-color var(--lds-hover) ease, box-shadow var(--lds-hover) ease; }
@media (hover: hover) { .a1-lds .lds-together li a:hover { background: var(--accent); box-shadow: none; } }
.a1-lds .lds-together p { color: #3f4a43; }

/* 3. Mulch, rock or both: the tabs over one large photo with its text; without the script, three side by side. */
.a1-lds .lds-fin-in { padding: clamp(22px, 3.4vw, 40px); border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.a1-lds .lds-fin-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(20px, 3vw, 28px); }
.a1-lds .lds-fin-head h2 { margin: 0; color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-lds .lds-fin-tabs { display: none; gap: 6px; padding: 5px; border-radius: 999px; background: rgb(246 241 231 / 0.1); }
.a1-lds.lds-ready .lds-fin-tabs { display: flex; }
.a1-lds .lds-fin-tabs button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: 0.9375rem; cursor: pointer; transition: background-color var(--lds-change) ease, color var(--lds-change) ease; }
.a1-lds .lds-fin-tabs button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) { .a1-lds .lds-fin-tabs button[aria-pressed="false"]:hover { background: rgb(246 241 231 / 0.16); } }
.a1-lds .lds-fin-tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.a1-lds .lds-fin-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.a1-lds .lds-fin-panel { margin: 0; display: grid; gap: 12px; }
.a1-lds .lds-fin-panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 16px; }
.a1-lds .lds-fin-panel figcaption { color: rgb(246 241 231 / 0.88); line-height: 1.55; }
.a1-lds .lds-fin-panel strong { display: block; margin-bottom: 4px; color: #fff; font-size: 1.125rem; }
.a1-lds.lds-ready .lds-fin-panels { grid-template-columns: minmax(0, 1fr); }
.a1-lds.lds-ready .lds-fin-panel { grid-area: 1 / 1; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: clamp(18px, 3vw, 36px); opacity: 0; visibility: hidden; transition: opacity var(--lds-change) ease, visibility 0s linear var(--lds-change); }
.a1-lds.lds-ready .lds-fin-panel.is-on { opacity: 1; visibility: visible; transition: opacity var(--lds-change) ease, visibility 0s; }
.a1-lds.lds-ready .lds-fin-panel figcaption { font-size: var(--step-lead); }
.a1-lds.lds-ready .lds-fin-panel strong { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: 8px; }

/* 4. Plants for coastal Virginia: the zone figure beside the conditions and the plant tags. */
.a1-lds .lds-plants-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.a1-lds .lds-zone { display: grid; align-content: space-between; gap: 18px; padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: var(--accent); }
.a1-lds .lds-zone p { margin: 0; color: var(--ink); line-height: 1.5; }
.a1-lds .lds-zone p.lds-zone-n { font-size: clamp(3rem, 2rem + 3.4vw, 5.2rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.03em; }
.a1-lds .lds-plants-text h2 { margin: 0 0 16px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-lds .lds-cond { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; }
.a1-lds .lds-cond li { padding: 14px 16px; border-radius: 14px; background: var(--lds-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); line-height: 1.5; }
.a1-lds .lds-cond strong { display: block; margin-bottom: 2px; }
.a1-lds .lds-plants-text h3 { margin: 0 0 10px; font-size: 1.125rem; }
.a1-lds .lds-tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.a1-lds .lds-tags li { position: relative; padding: 8px 14px 8px 30px; border-radius: 999px; background: var(--leaf-1); font-size: 0.9375rem; font-weight: 600; }
.a1-lds .lds-tags li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 10px 0; background: #5f8a4a; }

/* 5. Cost on a light band. */
.a1-lds .lds-cost-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--leaf-1); }
.a1-lds .lds-cost-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-lds .lds-cost-text p { margin: 0; line-height: 1.55; }
.a1-lds .lds-cost-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-lds .lds-cost-list li { position: relative; padding: 14px 14px 14px 40px; border-radius: 14px; background: var(--lds-card); line-height: 1.4; }
.a1-lds .lds-cost-list li::before { content: ""; position: absolute; left: 15px; top: 1.05em; width: 12px; height: 12px; border-radius: 12px 0; background: #5f8a4a; }

/* 6. Process: the planting seasons as a bar, then three steps. */
.a1-lds .lds-seasons { margin: 0 0 clamp(24px, 3vw, 36px); padding: 0; list-style: none; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; }
.a1-lds .lds-seasons li { display: grid; gap: 4px; padding: 16px 18px; }
.a1-lds .lds-seasons strong { font-size: 1.125rem; }
.a1-lds .lds-seasons span { font-size: 0.9375rem; }
.a1-lds .lds-s-fall { border-radius: 16px 0 0 16px; background: var(--accent); color: var(--ink); }
.a1-lds .lds-s-spring { background: #cfe0b4; color: var(--ink); }
.a1-lds .lds-s-summer { border-radius: 0 16px 16px 0; background: var(--leaf-1); color: #3f4a43; }
.a1-lds .lds-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.a1-lds .lds-step { display: grid; align-content: start; gap: 8px; padding: clamp(18px, 2.4vw, 26px); border-radius: 18px; background: var(--lds-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-lds .lds-step > * { margin: 0; }
.a1-lds .lds-step-n { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 22px 0; background: #5f8a4a; color: #fff; font-weight: 700; font-size: 1.125rem; }
.a1-lds .lds-step h3 { font-size: 1.25rem; }
.a1-lds .lds-step p { color: #3f4a43; line-height: 1.5; }

/* 7. FAQ, then the estimate on the dark band running into the footer. */
.a1-lds .lds-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-calm.a1-lds { padding-bottom: 0; }
.a1-lds .lds-est { display: block; margin-top: var(--lds-sec); padding-block: var(--lds-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-lds .lds-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-lds .lds-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-lds .lds-est-text > *, .a1-lds .lds-est-text h2 { margin: 0; }
.a1-lds .lds-est .lds-eyebrow { color: var(--accent); }
.a1-lds .lds-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-lds .lds-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-lds .lds-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-lds .lds-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-lds .lds-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-lds .lds-est-call a:hover { color: var(--accent) !important; } }
.a1-lds .lds-est-call a:focus-visible, .a1-lds .lds-related a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-lds .lds-related { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.7; }
.a1-lds .lds-related a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-lds .lds-est .c-est-form { color: var(--ink); }
.a1-lds .lds-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-lds .lds-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-lds .lds-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-lds .lds-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform var(--lds-hover) var(--ease-out); }
@media (hover: hover) { .a1-lds .lds-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1000px) {
  .a1-lds .lds-hero, .a1-lds .lds-head-row, .a1-lds .lds-inc-in, .a1-lds .lds-plants-in, .a1-lds .lds-cost-in, .a1-lds .lds-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-lds .lds-hero { min-height: 0; gap: 16px; }
  .a1-lds .lds-inc-side, .a1-lds .lds-est-text { position: static; }
  .a1-lds .lds-inc-photo { aspect-ratio: 16 / 9; }
  .a1-lds.lds-ready .lds-fin-panel { grid-template-columns: minmax(0, 1fr); }
  .a1-lds .lds-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .a1-lds .lds-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .a1-lds .lds-sub { font-size: 1.0625rem; }
  .a1-lds .lds-actions .wp-block-buttons, .a1-lds .lds-actions .wp-block-button, .a1-lds .lds-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-lds .lds-beds { gap: 8px; }
  .a1-lds .lds-bed:nth-child(1) figure, .a1-lds .lds-bed:nth-child(4) figure { border-radius: 14px 14px 14px 36px; }
  .a1-lds .lds-bed:nth-child(2) figure, .a1-lds .lds-bed:nth-child(3) figure { border-radius: 36px 14px 14px 14px; }
  .a1-lds .lds-bed figcaption { right: 6px; bottom: 6px; font-size: 0.75rem; padding: 4px 9px; }
  .a1-lds .lds-index li { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 0; }
  .a1-lds .lds-index-n { font-size: 1.375rem; }
  .a1-lds .lds-index h3 { font-size: 1.125rem; }
  .a1-lds .lds-together { padding: 16px; }
  .a1-lds .lds-fin-in { padding: 18px; }
  .a1-lds .lds-fin-head { display: grid; }
  .a1-lds .lds-fin-tabs { width: 100%; }
  .a1-lds .lds-fin-tabs button { flex: 1 1 0; min-width: 0; padding-inline: 8px; font-size: 0.875rem; }
  .a1-lds .lds-fin-panels { grid-template-columns: minmax(0, 1fr); }
  .a1-lds.lds-ready .lds-fin-panel figcaption { font-size: 1rem; }
  .a1-lds .lds-cost-in { padding: 20px; }
  .a1-lds .lds-cost-list { grid-template-columns: minmax(0, 1fr); }
  .a1-lds .lds-seasons { grid-template-columns: minmax(0, 1fr); }
  .a1-lds .lds-s-fall { border-radius: 16px 16px 0 0; }
  .a1-lds .lds-s-summer { border-radius: 0 0 16px 16px; }
  .a1-lds .lds-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-lds .lds-bed img, .a1-lds .lds-fin-panel, .a1-lds button, .a1-lds .lds-together li a { transition: none !important; } }
/* Landscape design: the name fits on two lines on laptops; the zone card hugs its text. */
.a1-lds .lds-hero h1 { font-size: clamp(2.6rem, 1.3rem + 3.4vw, 4.4rem); }
.a1-lds .lds-zone { align-content: start; align-self: start; }
@media (max-width: 640px) { .a1-lds .lds-fin-tabs button { flex: 1 1 auto; white-space: nowrap; padding-inline: 10px; font-size: 0.8125rem; } }

/* ===== Landscape lighting page (the site's new design) =====
   Motion scale: hover 220 ms, state 320 ms, reveal 600 ms. Scoped to .a1-lgt; hidden-until-revealed states and the
   day-to-night dial apply only once the script has added .lgt-ready (without it the scene shows night, every light on).
   The scene's colours all follow one number, --dusk (0 = day, 1 = night), set by the dial. */
.a1-lgt { --lgt-sec: clamp(80px, 10vw, 128px); --lgt-hover: 220ms; --lgt-change: 320ms; --lgt-reveal: 600ms; --lgt-card: #fffdf8; --lgt-warm: #ffd76a; --lgt-night: #0f1b2d; }
.a1-lgt .lgt-sec { padding-top: var(--lgt-sec); }
.a1-lgt .lgt-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-lgt .lgt-head h2, .a1-lgt .lgt-head .c-lead { margin: 0; }
.a1-lgt .lgt-head-row { max-width: none; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: 14px 48px; }
.a1-lgt .lgt-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-lgt .c-arrow-down { transition: transform var(--lgt-hover) var(--ease-out); }

/* 1. Hero on a night-blue band. */
.a1-lgt .lgt-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; padding: clamp(28px, 5vw, 64px); border-radius: 28px; background: radial-gradient(120% 90% at 85% 10%, #1d3147 0%, var(--lgt-night) 62%); color: #e9e4d6; }
.a1-lgt .lgt-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.a1-lgt .lgt-hero-text { display: grid; gap: 18px; }
.a1-lgt .lgt-hero .lgt-eyebrow { color: var(--lgt-warm); }
.a1-lgt .lgt-hero h1 { margin: 0; color: #fff; font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-lgt .lgt-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-lgt .lgt-l > span { display: inline-block; }
.a1-lgt .lgt-l:nth-child(2) > span { color: var(--lgt-warm); }
.a1-lgt .lgt-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; color: #fff; max-width: 40ch; }
.a1-lgt .lgt-sub2 { margin: 0; color: rgb(233 228 214 / 0.8); max-width: 48ch; }
.a1-lgt .lgt-actions { margin-top: 6px; }
.a1-lgt .lgt-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 0 0 0 rgb(255 215 106 / 0), 0 16px 40px -14px rgb(255 215 106 / 0.55); }
.a1-lgt .lgt-ghost .wp-block-button__link { min-height: 58px; padding-inline: 26px; background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 2px rgb(233 228 214 / 0.55); }
@media (hover: hover) { .a1-lgt .lgt-ghost .wp-block-button__link:hover { box-shadow: inset 0 0 0 2px #fff; } .a1-lgt .lgt-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }
.a1-lgt .lgt-ghost .wp-block-button__link:focus-visible, .a1-lgt .lgt-primary .wp-block-button__link:focus-visible { outline: 3px solid var(--lgt-warm); outline-offset: 3px; }
.a1-lgt .lgt-hero-photo { position: relative; margin: 0; aspect-ratio: 4 / 4.4; border-radius: 22px; overflow: hidden; background: #1d3147; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7); }
.a1-lgt .lgt-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-lgt .lgt-hero-photo figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); color: var(--ink); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-lgt .lgt-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-lgt .lgt-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-lgt .lgt-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-lgt .lgt-hero .lgt-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-lgt .lgt-sub.lgt-in { animation-delay: 0.4s; }
  .js .a1-lgt .lgt-sub2.lgt-in { animation-delay: 0.48s; }
  .js .a1-lgt .lgt-actions.lgt-in { animation-delay: 0.56s; }
  .js .a1-lgt .lgt-hero-photo { animation: lgt-rise 0.9s var(--ease-out) 0.15s both; }
  .a1-lgt.lgt-ready .lgt-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-lgt.lgt-ready .lgt-r { transition: opacity var(--lgt-reveal) ease, transform var(--lgt-reveal) var(--ease-out); }
  .a1-lgt.lgt-ready .lgt-daylit li:nth-child(2), .a1-lgt.lgt-ready .lgt-step:nth-child(2) { transition-delay: 80ms; }
  .a1-lgt.lgt-ready .lgt-daylit li:nth-child(3), .a1-lgt.lgt-ready .lgt-step:nth-child(3) { transition-delay: 160ms; }
}
@keyframes lgt-rise { from { transform: translateY(28px); } to { transform: none; } }

/* 2. What we light: the scene with its dial beside the five things we light; then three A-1 beds by day. */
.a1-lgt .lgt-scene-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.a1-lgt .lgt-scene { margin: 0; display: grid; gap: 12px; padding: 14px; border-radius: 24px; background: var(--lgt-night); box-shadow: var(--lift); }
.a1-lgt .lgt-scene svg { width: 100%; height: auto; display: block; border-radius: 14px; }
.a1-lgt .lgt-scene figcaption { color: rgb(233 228 214 / 0.8); font-size: 0.875rem; padding-inline: 4px; }
.a1-lgt .lgt-sky { fill: #cfe3ef; }
.a1-lgt .lgt-sky-n { fill: var(--lgt-night); opacity: var(--dusk); }
.a1-lgt .lgt-stars circle { fill: #f4f1e4; }
.a1-lgt .lgt-stars, .a1-lgt .lgt-moon { opacity: calc(var(--dusk) * var(--dusk)); }
.a1-lgt .lgt-moon { fill: #f4f1e4; }
.a1-lgt .lgt-lawn { fill: #7fa35f; }
.a1-lgt .lgt-lawn-n { fill: #0d1d14; opacity: calc(var(--dusk) * 0.82); }
.a1-lgt .lgt-roof { fill: #5b4a3d; }
.a1-lgt .lgt-house { fill: #d9c7a8; }
.a1-lgt .lgt-win { fill: #9cb4c4; }
.a1-lgt .lgt-door { fill: #4c3a2c; }
.a1-lgt .lgt-house-n { fill: #0b1320; opacity: calc(var(--dusk) * 0.62); }
.a1-lgt .lgt-win-n { fill: #ffcf66; opacity: calc(var(--dusk) * 0.9); }
.a1-lgt .lgt-bed { fill: #5d4330; }
.a1-lgt .lgt-walk { fill: #cdb894; }
.a1-lgt .lgt-patio { fill: #b9a284; }
.a1-lgt .lgt-chair { fill: #3f4a43; }
.a1-lgt .lgt-trunk { fill: #5b4030; }
.a1-lgt .lgt-canopy { fill: #4f7a43; }
.a1-lgt .lgt-post { fill: #2b2b2b; }
.a1-lgt .lgt-bulb { fill: #fff6cf; opacity: calc(0.35 + var(--dusk) * 0.65); }
.a1-lgt .lgt-glow { opacity: var(--dusk); }
/* The walk, patio, tree and bed shapes darken with the lawn; the lights are drawn after them, so they stay bright. */
.a1-lgt [data-lgt-scene] .lgt-walk, .a1-lgt [data-lgt-scene] .lgt-patio, .a1-lgt [data-lgt-scene] .lgt-bed, .a1-lgt [data-lgt-scene] .lgt-canopy, .a1-lgt [data-lgt-scene] .lgt-trunk, .a1-lgt [data-lgt-scene] .lgt-chair { filter: brightness(calc(1 - var(--dusk) * 0.6)); }
.a1-lgt .lgt-z { transition: opacity var(--lgt-change) ease; }
.a1-lgt [data-z]:not([data-z=""]) .lgt-z { opacity: 0.25; }
.a1-lgt [data-z="path"] .lgt-z-path, .a1-lgt [data-z="patio"] .lgt-z-patio, .a1-lgt [data-z="trees"] .lgt-z-trees, .a1-lgt [data-z="front"] .lgt-z-front, .a1-lgt [data-z="beds"] .lgt-z-beds { opacity: 1 !important; }
.a1-lgt .lgt-dial { display: none; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 8px 4px; color: #e9e4d6; font-size: 0.875rem; font-weight: 700; }
.a1-lgt.lgt-ready .lgt-dial { display: grid; }
.a1-lgt .lgt-dial input { width: 100%; min-height: 44px; margin: 0; accent-color: var(--lgt-warm); cursor: pointer; }
.a1-lgt .lgt-dial input:focus-visible { outline: 3px solid var(--lgt-warm); outline-offset: 2px; border-radius: 6px; }
.a1-lgt .lgt-zones { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.a1-lgt .lgt-zones button { display: grid; gap: 3px; width: 100%; padding: 14px 16px 14px 44px; border: 0; border-radius: 14px; position: relative; background: var(--lgt-card); color: var(--ink); font: inherit; text-align: left; line-height: 1.45; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.12); transition: box-shadow var(--lgt-change) ease, background-color var(--lgt-change) ease; }
.a1-lgt .lgt-zones button::before { content: ""; position: absolute; left: 16px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: #d8d1bf; transition: background-color var(--lgt-change) ease, box-shadow var(--lgt-change) ease; }
.a1-lgt .lgt-zones button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.a1-lgt .lgt-zones button[aria-pressed="true"]::before { background: var(--lgt-warm); box-shadow: 0 0 0 4px rgb(255 215 106 / 0.35), 0 0 14px 2px rgb(255 215 106 / 0.8); }
@media (hover: hover) { .a1-lgt .lgt-zones button[aria-pressed="false"]:hover { box-shadow: inset 0 0 0 2px rgb(13 42 28 / 0.3); } }
.a1-lgt .lgt-zones button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-lgt .lgt-zones strong { font-size: 1.0625rem; }
.a1-lgt .lgt-zones span { color: #3f4a43; font-size: 0.9375rem; }
.a1-lgt .lgt-daylit { margin: clamp(22px, 3vw, 32px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); }
.a1-lgt .lgt-daylit figure { margin: 0; display: grid; gap: 8px; }
.a1-lgt .lgt-daylit img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 16px; }
.a1-lgt .lgt-daylit figcaption { font-size: 0.875rem; font-weight: 700; color: #4f5a52; }

/* 3. How it works: the parts as a chain with a warm wire running through the numbers. */
.a1-lgt .lgt-how-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.a1-lgt .lgt-how-head { display: grid; gap: 16px; }
.a1-lgt .lgt-how-head > * { margin: 0; }
.a1-lgt .lgt-how-head h2 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); line-height: 1.05; }
.a1-lgt .lgt-how-head > p { font-size: var(--step-lead); line-height: 1.5; }
.a1-lgt .lgt-fig { display: grid; gap: 8px; margin-top: 8px; padding: 22px; border-radius: 18px; background: var(--accent); }
.a1-lgt .lgt-fig p { margin: 0; color: var(--ink); line-height: 1.45; }
.a1-lgt .lgt-fig p.lgt-fig-n { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); font-weight: 600; line-height: 1; white-space: nowrap; }
.a1-lgt .lgt-chain { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.a1-lgt .lgt-chain::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 3px; border-radius: 3px; background: linear-gradient(#c9a800, var(--lgt-warm)); }
.a1-lgt .lgt-chain li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 18px 16px 0; }
.a1-lgt .lgt-chain-n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lgt-night); color: var(--lgt-warm); font-weight: 700; font-size: 1.125rem; box-shadow: 0 0 0 6px var(--bg); }
.a1-lgt .lgt-chain h3 { margin: 6px 0 4px; font-size: 1.25rem; }
.a1-lgt .lgt-chain p { margin: 0; color: #3f4a43; line-height: 1.5; }

/* 4. Cost on a light band. */
.a1-lgt .lgt-cost-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--leaf-1); }
.a1-lgt .lgt-cost-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-lgt .lgt-cost-text p { margin: 0; line-height: 1.55; }
.a1-lgt .lgt-cost-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-lgt .lgt-cost-list li { position: relative; padding: 14px 14px 14px 40px; border-radius: 14px; background: var(--lgt-card); line-height: 1.4; }
.a1-lgt .lgt-cost-list li::before { content: ""; position: absolute; left: 15px; top: 1.05em; width: 12px; height: 12px; border-radius: 50%; background: var(--lgt-warm); box-shadow: 0 0 0 3px rgb(255 215 106 / 0.35); }

/* 5. Process: the note beside three steps; the last step is set at night. */
.a1-lgt .lgt-proc-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.a1-lgt .lgt-proc-head { display: grid; gap: 20px; position: sticky; top: 120px; }
.a1-lgt .lgt-proc-head h2 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); line-height: 1.05; }
.a1-lgt .lgt-easy { padding: 20px 22px; border-radius: 18px; background: var(--leaf-1); }
.a1-lgt .lgt-easy h3 { margin: 0 0 6px; font-size: 1.125rem; }
.a1-lgt .lgt-easy p { margin: 0; color: #3f4a43; line-height: 1.5; }
.a1-lgt .lgt-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.a1-lgt .lgt-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(18px, 2.4vw, 26px); border-radius: 18px; background: var(--lgt-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-lgt .lgt-step-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 1.25rem; }
.a1-lgt .lgt-step h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.a1-lgt .lgt-step p { margin: 0; color: #3f4a43; line-height: 1.5; }
.a1-lgt .lgt-step-night { background: var(--lgt-night); box-shadow: none; }
.a1-lgt .lgt-step-night h3 { color: #fff; }
.a1-lgt .lgt-step-night p { color: rgb(233 228 214 / 0.85); }
.a1-lgt .lgt-step-night .lgt-step-n { background: var(--lgt-warm); box-shadow: 0 0 18px 2px rgb(255 215 106 / 0.6); }

/* 6. FAQ, then the estimate on the dark band running into the footer. */
.a1-lgt .lgt-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-calm.a1-lgt { padding-bottom: 0; }
.a1-lgt .lgt-est { display: block; margin-top: var(--lgt-sec); padding-block: var(--lgt-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-lgt .lgt-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-lgt .lgt-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-lgt .lgt-est-text > *, .a1-lgt .lgt-est-text h2 { margin: 0; }
.a1-lgt .lgt-est .lgt-eyebrow { color: var(--accent); }
.a1-lgt .lgt-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-lgt .lgt-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-lgt .lgt-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-lgt .lgt-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-lgt .lgt-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-lgt .lgt-est-call a:hover { color: var(--accent) !important; } }
.a1-lgt .lgt-est-call a:focus-visible, .a1-lgt .lgt-related a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-lgt .lgt-related { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.7; }
.a1-lgt .lgt-related a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-lgt .lgt-est .c-est-form { color: var(--ink); }
.a1-lgt .lgt-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-lgt .lgt-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-lgt .lgt-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-lgt .lgt-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform var(--lgt-hover) var(--ease-out); }
@media (hover: hover) { .a1-lgt .lgt-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1000px) {
  .a1-lgt .lgt-hero-in, .a1-lgt .lgt-head-row, .a1-lgt .lgt-scene-in, .a1-lgt .lgt-how-in, .a1-lgt .lgt-cost-in, .a1-lgt .lgt-proc-in, .a1-lgt .lgt-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-lgt .lgt-hero-photo { aspect-ratio: 16 / 10; }
  .a1-lgt .lgt-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-lgt .lgt-proc-head, .a1-lgt .lgt-est-text { position: static; }
}
@media (max-width: 640px) {
  .a1-lgt .lgt-hero { width: calc(100% - 2 * var(--c-gut)); padding: 22px 18px; border-radius: 22px; }
  .a1-lgt .lgt-hero h1 { font-size: clamp(2.3rem, 10.5vw, 2.9rem); }
  .a1-lgt .lgt-sub { font-size: 1.0625rem; }
  .a1-lgt .lgt-actions .wp-block-buttons, .a1-lgt .lgt-actions .wp-block-button, .a1-lgt .lgt-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-lgt .lgt-hero-photo { aspect-ratio: 4 / 3.4; border-radius: 16px; }
  .a1-lgt .lgt-hero-photo figcaption { left: 8px; bottom: 8px; font-size: 0.75rem; padding: 5px 10px; }
  .a1-lgt .lgt-scene { padding: 10px; border-radius: 18px; }
  .a1-lgt .lgt-zones { grid-template-columns: minmax(0, 1fr); }
  .a1-lgt .lgt-zones button { padding: 12px 14px 12px 40px; }
  .a1-lgt .lgt-zones button::before { left: 14px; top: 16px; }
  .a1-lgt .lgt-daylit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .a1-lgt .lgt-daylit li:first-child { grid-column: 1 / -1; }
  .a1-lgt .lgt-cost-in { padding: 20px; }
  .a1-lgt .lgt-cost-list { grid-template-columns: minmax(0, 1fr); }
  .a1-lgt .lgt-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .a1-lgt .lgt-step-n { width: 44px; height: 44px; font-size: 1.125rem; }
  .a1-lgt .lgt-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-lgt .lgt-z, .a1-lgt button, .a1-lgt .lgt-zones button::before { transition: none !important; } }
/* Lighting: the name on two lines on laptops; the dial keeps the browser's own range control, not the form styles. */
.a1-lgt .lgt-hero h1 { font-size: clamp(2.4rem, 1.2rem + 3.2vw, 3.9rem); }
.a1-lgt .lgt-dial input[type=range] { -webkit-appearance: auto; appearance: auto; height: 44px; min-height: 44px; padding: 0 !important; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; }

/* ===== Water features & ponds page (the site's new design) =====
   Motion scale: hover 220 ms, state 320 ms, reveal 600 ms. Scoped to .a1-wtr; hidden-until-revealed states apply only
   once the script has added .wtr-ready. The water in the drawings moves only without a reduced-motion preference, and
   only while it is on screen (.is-flowing). */
.a1-wtr { --wtr-sec: clamp(80px, 10vw, 128px); --wtr-hover: 220ms; --wtr-change: 320ms; --wtr-reveal: 600ms; --wtr-card: #fffdf8; --wtr-blue: #2d6f96; --wtr-sky: #d9ecf3; }
.a1-wtr .wtr-sec { padding-top: var(--wtr-sec); }
.a1-wtr .wtr-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-wtr .wtr-head h2, .a1-wtr .wtr-head .c-lead { margin: 0; }
.a1-wtr .wtr-head-row { max-width: none; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: 14px 48px; }
.a1-wtr .wtr-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-wtr .c-arrow-down { transition: transform var(--wtr-hover) var(--ease-out); }
@media (hover: hover) { .a1-wtr .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }
.a1-wtr .wtr-with a, .a1-wtr .wtr-spot-list a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-wtr .wtr-with a:focus-visible, .a1-wtr .wtr-spot-list a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 1. Hero: words left, the drawn pond right. */
.a1-wtr .wtr-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: min(calc(100svh - 120px), 680px); }
.a1-wtr .wtr-hero-text { display: grid; gap: 18px; padding-block: 24px; }
.a1-wtr .wtr-hero h1 { margin: 0; font-size: clamp(2.6rem, 1.3rem + 3.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-wtr .wtr-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-wtr .wtr-l > span { display: inline-block; }
.a1-wtr .wtr-l:nth-child(2) > span { color: var(--wtr-blue); }
.a1-wtr .wtr-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 44ch; }
.a1-wtr .wtr-sub2 { margin: 0; color: #4f5a52; max-width: 52ch; }
.a1-wtr .wtr-actions { margin-top: 6px; }
.a1-wtr .wtr-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-wtr .wtr-art { margin: 0; display: grid; gap: 10px; }
.a1-wtr .wtr-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 40px rgb(13 42 28 / 0.18)); }
.a1-wtr .wtr-art figcaption { color: #4f5a52; font-size: 0.875rem; }
.a1-wtr .wtr-a-bg { fill: var(--wtr-sky); }
.a1-wtr .wtr-a-gravel { fill: #d8cdb6; }
.a1-wtr .wtr-a-stones ellipse { fill: #9c958a; stroke: #7d776d; stroke-width: 2; }
.a1-wtr .wtr-a-stones ellipse:nth-child(odd) { fill: #b3ada2; }
.a1-wtr .wtr-falls path { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; opacity: 0.75; stroke-dasharray: 14 18; }
.a1-wtr .wtr-ripples ellipse { fill: none; stroke: #e7f5fb; stroke-width: 2; opacity: 0.7; }
.a1-wtr .wtr-ripples ellipse:nth-child(2) { transform: scale(1.4); transform-origin: 190px 300px; opacity: 0.45; }
.a1-wtr .wtr-ripples ellipse:nth-child(3) { transform: scale(1.8); transform-origin: 190px 300px; opacity: 0.25; }
.a1-wtr .wtr-a-plants path { fill: #5f8a4a; }
.a1-wtr .wtr-a-pads ellipse { fill: #6e9656; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-wtr .wtr-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-wtr .wtr-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-wtr .wtr-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-wtr .wtr-hero .wtr-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-wtr .wtr-sub.wtr-in { animation-delay: 0.4s; }
  .js .a1-wtr .wtr-sub2.wtr-in { animation-delay: 0.48s; }
  .js .a1-wtr .wtr-actions.wtr-in { animation-delay: 0.56s; }
  .js .a1-wtr .wtr-art { animation: wtr-rise 0.9s var(--ease-out) 0.15s both; }
  .a1-wtr .is-flowing .wtr-falls path { animation: wtr-fall 1.1s linear infinite; }
  .a1-wtr .is-flowing .wtr-falls path:nth-child(2) { animation-duration: 1.35s; }
  .a1-wtr .is-flowing .wtr-falls path:nth-child(3) { animation-duration: 1.2s; }
  .a1-wtr .is-flowing .wtr-ripples ellipse { animation: wtr-ripple 3.6s ease-out infinite; transform-origin: 190px 300px; }
  .a1-wtr .is-flowing .wtr-ripples ellipse:nth-child(2) { animation-delay: 1.2s; }
  .a1-wtr .is-flowing .wtr-ripples ellipse:nth-child(3) { animation-delay: 2.4s; }
  .a1-wtr.wtr-ready .wtr-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-wtr.wtr-ready .wtr-r { transition: opacity var(--wtr-reveal) ease, transform var(--wtr-reveal) var(--ease-out); }
  .a1-wtr.wtr-ready .wtr-kind:nth-child(3n + 2), .a1-wtr.wtr-ready .wtr-step:nth-child(2) { transition-delay: 80ms; }
  .a1-wtr.wtr-ready .wtr-kind:nth-child(3n), .a1-wtr.wtr-ready .wtr-step:nth-child(3) { transition-delay: 160ms; }
}
@keyframes wtr-rise { from { transform: translateY(28px); } to { transform: none; } }
@keyframes wtr-fall { to { stroke-dashoffset: -64; } }
@keyframes wtr-ripple { from { transform: scale(0.6); opacity: 0.8; } to { transform: scale(2.2); opacity: 0; } }

/* 2. What we build: six cards with line icons, and what they are built with. */
.a1-wtr .wtr-kinds { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); }
.a1-wtr .wtr-kind { display: grid; align-content: start; gap: 8px; padding: clamp(18px, 2.4vw, 26px); border-radius: 20px; background: var(--wtr-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); transition: box-shadow var(--wtr-hover) ease, transform var(--wtr-hover) var(--ease-out); }
@media (hover: hover) { .a1-wtr .wtr-kind:hover { box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1), 0 18px 32px -22px rgb(13 42 28 / 0.45); } }
.a1-wtr .wtr-kind > * { margin: 0; }
.a1-wtr .wtr-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: var(--wtr-sky); color: var(--wtr-blue); }
.a1-wtr .wtr-kind h3 { font-size: 1.25rem; }
.a1-wtr .wtr-kind p { color: #3f4a43; line-height: 1.5; }
.a1-wtr .wtr-with { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: clamp(24px, 3vw, 36px); padding: 18px 22px; border-radius: 18px; background: var(--leaf-1); }
.a1-wtr .wtr-with > * { margin: 0; }
.a1-wtr .wtr-with h3 { font-size: 1.0625rem; }
.a1-wtr .wtr-with ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.a1-wtr .wtr-with li { padding: 8px 14px; border-radius: 999px; background: var(--wtr-card); font-size: 0.9375rem; font-weight: 600; }
.a1-wtr .wtr-with p { color: #3f4a43; }

/* 3. How a pond with biofalls works: the four parts beside the cross-section. */
.a1-wtr .wtr-how-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.a1-wtr .wtr-how-text h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-wtr .wtr-how-lead { margin: 0 0 18px; line-height: 1.55; color: rgb(246 241 231 / 0.88); }
.a1-wtr .wtr-parts { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.a1-wtr .wtr-parts button { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: rgb(246 241 231 / 0.07); color: rgb(246 241 231 / 0.88); font: inherit; font-size: 0.9375rem; line-height: 1.5; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.12); transition: background-color var(--wtr-change) ease, box-shadow var(--wtr-change) ease; }
.a1-wtr .wtr-parts strong { display: block; color: #fff; font-size: 1rem; }
.a1-wtr .wtr-part-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(246 241 231 / 0.14); color: #fff; font-weight: 700; transition: background-color var(--wtr-change) ease, color var(--wtr-change) ease; }
.a1-wtr .wtr-parts button[aria-pressed="true"] { background: rgb(246 241 231 / 0.12); box-shadow: inset 0 0 0 2px var(--accent); }
.a1-wtr .wtr-parts button[aria-pressed="true"] .wtr-part-n { background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) { .a1-wtr .wtr-parts button[aria-pressed="false"]:hover { background: rgb(246 241 231 / 0.12); } }
.a1-wtr .wtr-parts button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.a1-wtr .wtr-cut { margin: 0; display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: var(--wtr-card); }
.a1-wtr .wtr-cut svg { width: 100%; height: auto; display: block; }
.a1-wtr .wtr-cut figcaption { color: #3f4a43; font-size: 0.875rem; }
.a1-wtr .wtr-c-soil { fill: #b89a77; }
.a1-wtr .wtr-c-grass { stroke: #5f8a4a; stroke-width: 8; }
.a1-wtr .wtr-c-mound { fill: #9c958a; stroke: #7d776d; stroke-width: 2; }
.a1-wtr .wtr-c-liner { fill: none; stroke: #2b2b2b; stroke-width: 4; }
.a1-wtr .wtr-c-water { fill: #5aa0c8; }
.a1-wtr .wtr-c-pipe { fill: none; stroke: #59646b; stroke-width: 9; stroke-linecap: round; }
.a1-wtr .wtr-c-flow { fill: none; stroke: #bfe3f2; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 14; }
.a1-wtr .wtr-c-box { fill: #4c5a53; }
.a1-wtr .wtr-c-pumpbox { fill: #2f6fb5; }
.a1-wtr .wtr-c-mouth { stroke: #4c5a53; stroke-width: 6; }
.a1-wtr .wtr-c-leaf { fill: #7a9a3c; }
.a1-wtr .wtr-c-media circle { fill: #c6a56a; }
.a1-wtr .wtr-c-spill { fill: none; stroke: #5aa0c8; stroke-width: 8; stroke-linecap: round; }
.a1-wtr .wtr-c-spill2 { stroke: #bfe3f2; stroke-width: 3; stroke-dasharray: 10 12; }
.a1-wtr .wtr-n circle { fill: var(--ink); stroke: #fff; stroke-width: 2.5; transition: fill var(--wtr-change) ease; }
.a1-wtr .wtr-n text { fill: #fff; font: 700 16px/1 inherit; font-family: inherit; }
.a1-wtr .wtr-p { transition: opacity var(--wtr-change) ease; }
.a1-wtr [data-on]:not([data-on=""]) .wtr-p { opacity: 0.35; }
.a1-wtr [data-on="skim"] .wtr-p-skim, .a1-wtr [data-on="pump"] .wtr-p-pump, .a1-wtr [data-on="bio"] .wtr-p-bio, .a1-wtr [data-on="fall"] .wtr-p-fall { opacity: 1 !important; }
.a1-wtr [data-on="skim"] .wtr-n-skim circle, .a1-wtr [data-on="pump"] .wtr-n-pump circle, .a1-wtr [data-on="bio"] .wtr-n-bio circle, .a1-wtr [data-on="fall"] .wtr-n-fall circle { fill: #c9a800; }
@media (prefers-reduced-motion: no-preference) {
  .a1-wtr .is-flowing .wtr-c-flow { animation: wtr-pipe 2.4s linear infinite; }
  .a1-wtr .is-flowing .wtr-c-spill2 { animation: wtr-pipe 1.2s linear infinite; }
}
@keyframes wtr-pipe { to { stroke-dashoffset: -96; } }

/* 4. Choosing the right spot: the lead beside four points on a light band. */
.a1-wtr .wtr-spot-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--leaf-1); }
.a1-wtr .wtr-spot-head h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-wtr .wtr-spot-head p { margin: 0; font-size: var(--step-lead); line-height: 1.5; }
.a1-wtr .wtr-spot-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-wtr .wtr-spot-list li { padding: 16px; border-radius: 14px; background: var(--wtr-card); line-height: 1.5; }
.a1-wtr .wtr-spot-list strong { display: block; margin-bottom: 2px; }

/* 5. Cost: the text beside six numbered factors. */
.a1-wtr .wtr-cost-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.a1-wtr .wtr-cost-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-wtr .wtr-cost-text p { margin: 0; line-height: 1.55; color: #3f4a43; }
.a1-wtr .wtr-cost-list { margin: 0; padding: 0; list-style: none; counter-reset: wtr; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-wtr .wtr-cost-list li { counter-increment: wtr; position: relative; padding: 14px 14px 14px 50px; border-radius: 14px; background: var(--wtr-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); line-height: 1.4; }
.a1-wtr .wtr-cost-list li::before { content: counter(wtr); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--wtr-sky); color: var(--wtr-blue); font-size: 0.8125rem; font-weight: 700; }

/* 6. Process: the figure beside three steps. */
.a1-wtr .wtr-proc-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.a1-wtr .wtr-proc-head { display: grid; gap: 20px; position: sticky; top: 120px; }
.a1-wtr .wtr-proc-head h2 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); line-height: 1.05; }
.a1-wtr .wtr-fig { display: grid; gap: 10px; padding: 22px; border-radius: 18px; background: var(--accent); }
.a1-wtr .wtr-fig p { margin: 0; color: var(--ink); line-height: 1.45; }
.a1-wtr .wtr-fig p.wtr-fig-n { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); font-weight: 600; line-height: 1; white-space: nowrap; }
.a1-wtr .wtr-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.a1-wtr .wtr-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(18px, 2.4vw, 26px); border-radius: 18px; background: var(--wtr-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-wtr .wtr-step-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--wtr-sky); color: var(--wtr-blue); font-weight: 700; font-size: 1.25rem; }
.a1-wtr .wtr-step h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.a1-wtr .wtr-step p { margin: 0; color: #3f4a43; line-height: 1.5; }

/* 7. FAQ, then the estimate on the dark band running into the footer. */
.a1-wtr .wtr-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-wtr .wtr-faq a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-calm.a1-wtr { padding-bottom: 0; }
.a1-wtr .wtr-est { display: block; margin-top: var(--wtr-sec); padding-block: var(--wtr-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-wtr .wtr-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-wtr .wtr-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-wtr .wtr-est-text > *, .a1-wtr .wtr-est-text h2 { margin: 0; }
.a1-wtr .wtr-est .wtr-eyebrow { color: var(--accent); }
.a1-wtr .wtr-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-wtr .wtr-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-wtr .wtr-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-wtr .wtr-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-wtr .wtr-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-wtr .wtr-est-call a:hover { color: var(--accent) !important; } }
.a1-wtr .wtr-est-call a:focus-visible, .a1-wtr .wtr-related a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-wtr .wtr-related { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.7; }
.a1-wtr .wtr-related a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-wtr .wtr-est .c-est-form { color: var(--ink); }
.a1-wtr .wtr-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-wtr .wtr-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-wtr .wtr-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-wtr .wtr-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform var(--wtr-hover) var(--ease-out); }
@media (hover: hover) { .a1-wtr .wtr-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1000px) {
  .a1-wtr .wtr-hero, .a1-wtr .wtr-head-row, .a1-wtr .wtr-how-in, .a1-wtr .wtr-spot-in, .a1-wtr .wtr-cost-in, .a1-wtr .wtr-proc-in, .a1-wtr .wtr-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-wtr .wtr-hero { min-height: 0; gap: 12px; }
  .a1-wtr .wtr-art { max-width: 620px; }
  .a1-wtr .wtr-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-wtr .wtr-cut { order: -1; }
  .a1-wtr .wtr-proc-head, .a1-wtr .wtr-est-text { position: static; }
}
@media (max-width: 640px) {
  .a1-wtr .wtr-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .a1-wtr .wtr-sub { font-size: 1.0625rem; }
  .a1-wtr .wtr-actions .wp-block-buttons, .a1-wtr .wtr-actions .wp-block-button, .a1-wtr .wtr-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-wtr .wtr-kinds { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .a1-wtr .wtr-kind { grid-template-columns: 48px minmax(0, 1fr); gap: 2px 14px; padding: 16px; }
  .a1-wtr .wtr-icon { grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; }
  .a1-wtr .wtr-icon svg { width: 30px; height: 30px; }
  .a1-wtr .wtr-kind h3 { font-size: 1.125rem; }
  .a1-wtr .wtr-with { padding: 16px; }
  .a1-wtr .wtr-how-in, .a1-wtr .wtr-spot-in { padding: 18px; }
  .a1-wtr .wtr-how-in { display: flex; flex-direction: column; align-items: stretch; }
  .a1-wtr .wtr-how-text { display: contents; }
  .a1-wtr .wtr-how-text h2 { order: 1; margin: 0; }
  .a1-wtr .wtr-how-lead { order: 2; margin: 0; }
  .a1-wtr .wtr-cut { order: 3; padding: 8px; }
  .a1-wtr .wtr-parts { order: 4; }
  .a1-wtr .wtr-n text { font-size: 20px; }
  .a1-wtr .wtr-spot-list, .a1-wtr .wtr-cost-list { grid-template-columns: minmax(0, 1fr); }
  .a1-wtr .wtr-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .a1-wtr .wtr-step-n { width: 44px; height: 44px; font-size: 1.125rem; }
  .a1-wtr .wtr-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-wtr .wtr-p, .a1-wtr button, .a1-wtr .wtr-kind, .a1-wtr .wtr-n circle { transition: none !important; } }
@media (prefers-reduced-motion: reduce) { .a1-wtr .wtr-part-n { transition: none !important; } }

/* ===== Sod & seeding page (the site's new design) =====
   Motion scale: hover 220 ms, state 320 ms, reveal 600 ms. Scoped to .a1-sod; hidden-until-revealed states and the
   sun picker apply only once the script has added .sod-ready (without it every grass shows plainly). */
.a1-sod { --sod-sec: clamp(80px, 10vw, 128px); --sod-hover: 220ms; --sod-change: 320ms; --sod-reveal: 600ms; --sod-card: #fffdf8; --sod-green: #4f7a43; --sod-turf: #6e9656; }
.a1-sod .sod-sec { padding-top: var(--sod-sec); }
.a1-sod .sod-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-sod .sod-head h2, .a1-sod .sod-head .c-lead { margin: 0; }
.a1-sod .sod-head-row { max-width: none; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: 14px 48px; }
.a1-sod .sod-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-sod .c-arrow-down { transition: transform var(--sod-hover) var(--ease-out); }
@media (hover: hover) { .a1-sod .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }
.a1-sod .sod-stage a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-sod .sod-stage a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 1. Hero: words left, the crew photo right on a strip of turf. */
.a1-sod .sod-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: min(calc(100svh - 120px), 680px); }
.a1-sod .sod-hero-text { display: grid; gap: 18px; padding-block: 24px; }
.a1-sod .sod-hero h1 { margin: 0; font-size: clamp(2.6rem, 1.3rem + 3.4vw, 4.4rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-sod .sod-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-sod .sod-l > span { display: inline-block; }
.a1-sod .sod-l:nth-child(2) > span { color: var(--sod-green); }
.a1-sod .sod-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 44ch; }
.a1-sod .sod-sub2 { margin: 0; color: #4f5a52; max-width: 52ch; }
.a1-sod .sod-actions { margin-top: 6px; }
.a1-sod .sod-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-sod .sod-hero-photo { position: relative; margin: 0; aspect-ratio: 4 / 3.6; border-radius: 26px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
/* The bottom edge is a strip of sod seams: staggered rectangles, the pattern the crew lays. */
.a1-sod .sod-hero-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background-color: var(--sod-turf); background-image: linear-gradient(90deg, rgb(255 255 255 / 0.35) 2px, transparent 2px), linear-gradient(90deg, transparent 0 calc(50% - 1px), rgb(255 255 255 / 0.35) calc(50% - 1px) 50%, transparent 50%); background-size: 64px 7px, 64px 7px; background-position: 0 0, 32px 7px; background-repeat: repeat-x; }
.a1-sod .sod-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-sod .sod-hero-photo figcaption { position: absolute; left: 14px; bottom: 28px; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-sod .sod-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-sod .sod-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-sod .sod-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-sod .sod-hero .sod-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-sod .sod-sub.sod-in { animation-delay: 0.4s; }
  .js .a1-sod .sod-sub2.sod-in { animation-delay: 0.48s; }
  .js .a1-sod .sod-actions.sod-in { animation-delay: 0.56s; }
  /* The photo unrolls from the left, like a roll of sod: clip only, so it is visible from the first frame's edge. */
  .js .a1-sod .sod-hero-photo { animation: sod-unroll 1.1s var(--ease-out) 0.1s both; }
  .a1-sod.sod-ready .sod-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-sod.sod-ready .sod-r { transition: opacity var(--sod-reveal) ease, transform var(--sod-reveal) var(--ease-out); }
  .a1-sod.sod-ready .sod-stage:nth-child(2) { transition-delay: 80ms; }
  .a1-sod.sod-ready .sod-stage:nth-child(3) { transition-delay: 160ms; }
  .a1-sod.sod-ready .sod-stage:nth-child(4) { transition-delay: 240ms; }
}
@keyframes sod-unroll { from { clip-path: inset(0 100% 0 0 round 26px); } to { clip-path: inset(0 0 0 0 round 26px); } }

/* 2. What's included: four stages with photos, then sod or seed. */
.a1-sod .sod-stages { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.a1-sod .sod-stage { display: grid; align-content: start; gap: 8px; }
.a1-sod .sod-stage > * { margin: 0; }
.a1-sod .sod-stage figure { position: relative; aspect-ratio: 4 / 4.6; margin-bottom: 6px; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-sod .sod-stage figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--sod-reveal) var(--ease-out); }
@media (hover: hover) { .a1-sod .sod-stage:hover figure img { transform: scale(1.05); } }
.a1-sod .sod-stage-n { position: absolute; left: 10px; top: 10px; display: grid; place-items: center; min-width: 40px; height: 32px; padding: 0 10px; border-radius: 999px; background: rgb(246 241 231 / 0.94); font-size: 0.875rem; font-weight: 700; }
.a1-sod .sod-stage h3 { font-size: 1.25rem; }
.a1-sod .sod-stage > p { color: #3f4a43; line-height: 1.5; }
.a1-sod .sod-choice { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; margin-top: clamp(32px, 4vw, 48px); padding: 10px; border-radius: 22px; background: var(--leaf-1); }
.a1-sod .sod-choice-head { display: grid; align-content: center; gap: 6px; padding: 12px 16px; }
.a1-sod .sod-choice-head > * { margin: 0; }
.a1-sod .sod-choice-head h3 { font-size: 1.375rem; }
.a1-sod .sod-choice-head p { color: #3f4a43; line-height: 1.45; }
.a1-sod .sod-choice-col { display: grid; align-content: start; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--sod-card); }
.a1-sod .sod-choice-col p { margin: 0; line-height: 1.45; }
.a1-sod .sod-choice-k { font-size: 1.25rem; font-weight: 700; }
.a1-sod .sod-choice-x { color: #4f5a52; font-size: 0.875rem; }
.a1-sod .sod-choice-sod { background: var(--sod-turf); color: #fff; }
.a1-sod .sod-choice-both { background: var(--accent); align-content: center; }

/* 3. Which grass grows best here: the sun picker beside the grass cards. */
.a1-sod .sod-grass-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.a1-sod .sod-grass-head { display: grid; gap: 16px; }
.a1-sod .sod-grass-head > * { margin: 0; }
.a1-sod .sod-grass-head h2 { color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-sod .sod-grass-head > p { line-height: 1.55; color: rgb(246 241 231 / 0.88); }
.a1-sod .sod-sun { display: none; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.a1-sod.sod-ready .sod-sun { display: flex; }
.a1-sod .sod-sun-q { flex-basis: 100%; font-weight: 700; color: #fff; }
.a1-sod .sod-sun button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgb(246 241 231 / 0.1); color: #fff; font: inherit; font-weight: 700; font-size: 0.9375rem; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.3); transition: background-color var(--sod-change) ease, color var(--sod-change) ease; }
.a1-sod .sod-sun button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
@media (hover: hover) { .a1-sod .sod-sun button[aria-pressed="false"]:hover { background: rgb(246 241 231 / 0.2); } }
.a1-sod .sod-sun button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.a1-sod .sod-grasses { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-sod .sod-g { position: relative; display: grid; align-content: start; gap: 6px; padding: 18px; border-radius: 16px; background: var(--sod-card); color: var(--ink); transition: opacity var(--sod-change) ease, box-shadow var(--sod-change) ease, transform var(--sod-change) var(--ease-out); }
.a1-sod .sod-g > * { margin: 0; }
.a1-sod .sod-g h3 { font-size: 1.25rem; }
.a1-sod .sod-g p { color: #3f4a43; line-height: 1.5; font-size: 0.9375rem; }
.a1-sod .sod-g .sod-g-kind { color: var(--sod-green); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.a1-sod .sod-g-timing { background: rgb(246 241 231 / 0.08); color: var(--on-dark); box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.18); }
.a1-sod .sod-g-timing p { color: rgb(246 241 231 / 0.85); }
.a1-sod .sod-g-timing .sod-g-kind { color: var(--accent); }
.a1-sod .sod-g-fit { display: none; position: absolute; right: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: var(--accent); font-size: 0.75rem; font-weight: 700; }
.a1-sod [data-sun="sun"] .sod-g[data-fit="sun"] .sod-g-fit, .a1-sod [data-sun="shade"] .sod-g[data-fit="shade"] .sod-g-fit { display: block; }
.a1-sod [data-sun="sun"] .sod-g[data-fit="shade"], .a1-sod [data-sun="shade"] .sod-g[data-fit="sun"] { opacity: 0.45; }
.a1-sod [data-sun="sun"] .sod-g[data-fit="sun"], .a1-sod [data-sun="shade"] .sod-g[data-fit="shade"] { box-shadow: inset 0 0 0 3px var(--accent); }

/* 4. Cost on a light band. */
.a1-sod .sod-cost-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--leaf-1); }
.a1-sod .sod-cost-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-sod .sod-cost-text p { margin: 0; line-height: 1.55; }
.a1-sod .sod-cost-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-sod .sod-cost-list li { position: relative; padding: 14px 14px 14px 42px; border-radius: 14px; background: var(--sod-card); line-height: 1.4; }
.a1-sod .sod-cost-list li::before { content: ""; position: absolute; left: 14px; top: 1.05em; width: 16px; height: 10px; border-radius: 2px; background-color: var(--sod-turf); background-image: linear-gradient(90deg, transparent 7px, rgb(255 255 255 / 0.6) 7px 8px, transparent 8px); }

/* 5. The first few weeks: a timeline along a strip of sod, beside a finished A-1 lawn. */
.a1-sod .sod-care-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.a1-sod .sod-water { margin: 0 0 16px; padding: 14px 18px; border-radius: 14px; background: var(--leaf-1); line-height: 1.5; }
.a1-sod .sod-weeks { position: relative; margin: 0; padding: 26px 0 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); }
.a1-sod .sod-weeks::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #9fbf86, var(--sod-green)); }
.a1-sod .sod-wk { position: relative; display: grid; align-content: start; gap: 6px; padding: 18px; border-radius: 16px; background: var(--sod-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-sod .sod-wk::before { content: ""; position: absolute; left: 18px; top: -26px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.a1-sod .sod-wk > * { margin: 0; }
.a1-sod .sod-wk-when { color: var(--sod-green); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.a1-sod .sod-wk h3 { font-size: 1.1875rem; }
.a1-sod .sod-wk p:last-child { color: #3f4a43; line-height: 1.5; font-size: 0.9375rem; }
.a1-sod .sod-care-photo { margin: 0; display: grid; gap: 8px; }
.a1-sod .sod-care-photo img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; display: block; border-radius: 20px; box-shadow: var(--lift); }
.a1-sod .sod-care-photo figcaption { font-size: 0.875rem; font-weight: 700; color: #4f5a52; }

/* 6. FAQ, then the estimate on the dark band running into the footer. */
.a1-sod .sod-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-sod .sod-faq a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-calm.a1-sod { padding-bottom: 0; }
.a1-sod .sod-est { display: block; margin-top: var(--sod-sec); padding-block: var(--sod-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-sod .sod-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-sod .sod-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-sod .sod-est-text > *, .a1-sod .sod-est-text h2 { margin: 0; }
.a1-sod .sod-est .sod-eyebrow { color: var(--accent); }
.a1-sod .sod-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-sod .sod-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-sod .sod-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-sod .sod-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-sod .sod-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-sod .sod-est-call a:hover { color: var(--accent) !important; } }
.a1-sod .sod-est-call a:focus-visible, .a1-sod .sod-related a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-sod .sod-related { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.7; }
.a1-sod .sod-related a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-sod .sod-est .c-est-form { color: var(--ink); }
.a1-sod .sod-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-sod .sod-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-sod .sod-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-sod .sod-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform var(--sod-hover) var(--ease-out); }
@media (hover: hover) { .a1-sod .sod-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1000px) {
  .a1-sod .sod-hero, .a1-sod .sod-head-row, .a1-sod .sod-grass-in, .a1-sod .sod-cost-in, .a1-sod .sod-care-in, .a1-sod .sod-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-sod .sod-hero { min-height: 0; gap: 12px; }
  .a1-sod .sod-hero-photo { aspect-ratio: 16 / 10; }
  .a1-sod .sod-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-sod .sod-choice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a1-sod .sod-choice-head { grid-column: 1 / -1; }
  .a1-sod .sod-care-photo img { aspect-ratio: 16 / 9; }
  .a1-sod .sod-est-text { position: static; }
}
@media (max-width: 640px) {
  .a1-sod .sod-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .a1-sod .sod-sub { font-size: 1.0625rem; }
  .a1-sod .sod-actions .wp-block-buttons, .a1-sod .sod-actions .wp-block-button, .a1-sod .sod-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-sod .sod-hero-photo { aspect-ratio: 4 / 3.4; border-radius: 18px; }
  .a1-sod .sod-hero-photo figcaption { left: 8px; bottom: 22px; font-size: 0.75rem; padding: 5px 10px; }
  .a1-sod .sod-stages { gap: 18px 12px; }
  .a1-sod .sod-stage figure { aspect-ratio: 1 / 1; border-radius: 14px; }
  .a1-sod .sod-stage h3 { font-size: 1.0625rem; }
  .a1-sod .sod-stage > p { font-size: 0.9063rem; }
  .a1-sod .sod-choice { grid-template-columns: minmax(0, 1fr); }
  .a1-sod .sod-grass-in, .a1-sod .sod-cost-in { padding: 20px; }
  .a1-sod .sod-sun button { flex: 1 1 0; }
  .a1-sod .sod-grasses, .a1-sod .sod-cost-list { grid-template-columns: minmax(0, 1fr); }
  .a1-sod .sod-weeks { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 28px; gap: 12px; }
  .a1-sod .sod-weeks::before { left: 0; right: auto; top: 0; bottom: 0; width: 12px; height: auto; background: linear-gradient(180deg, #9fbf86, var(--sod-green)); }
  .a1-sod .sod-wk::before { left: -24px; top: 20px; }
  .a1-sod .sod-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-sod .sod-stage figure img, .a1-sod .sod-g, .a1-sod button { transition: none !important; } }

/* ===== Irrigation & wells page (the site's new design) =====
   Motion scale: hover 220 ms, state 320 ms, reveal 600 ms. Scoped to .a1-irr; hidden-until-revealed states apply only
   once the script has added .irr-ready. The spray arcs in the yard plan pulse only without a reduced-motion preference. */
.a1-irr { --irr-sec: clamp(80px, 10vw, 128px); --irr-hover: 220ms; --irr-change: 320ms; --irr-reveal: 600ms; --irr-card: #fffdf8; --irr-blue: #2f6fb5; --irr-mist: #dbeaf5; --irr-turf: #7fa35f; }
.a1-irr .irr-sec { padding-top: var(--irr-sec); }
.a1-irr .irr-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-irr .irr-head h2, .a1-irr .irr-head .c-lead { margin: 0; }
.a1-irr .irr-head-row { max-width: none; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: 14px 48px; }
.a1-irr .irr-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-irr .c-arrow-down { transition: transform var(--irr-hover) var(--ease-out); }
@media (hover: hover) { .a1-irr .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }
.a1-irr .irr-head .c-lead a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-irr .irr-head .c-lead a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 1. Hero: words left, the sprinkler clip right. */
.a1-irr .irr-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: min(calc(100svh - 120px), 680px); }
.a1-irr .irr-hero-text { display: grid; gap: 18px; padding-block: 24px; }
.a1-irr .irr-hero h1 { margin: 0; font-size: clamp(2.6rem, 1.3rem + 3.4vw, 4.4rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-irr .irr-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-irr .irr-l > span { display: inline-block; }
.a1-irr .irr-l:nth-child(2) > span { color: var(--irr-blue); }
.a1-irr .irr-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 44ch; }
.a1-irr .irr-sub2 { margin: 0; color: #4f5a52; max-width: 52ch; }
.a1-irr .irr-actions { margin-top: 6px; }
.a1-irr .irr-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-irr .irr-hero-media { position: relative; }
.a1-irr .irr-hero-video { margin: 0; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: var(--ink); box-shadow: var(--lift); }
.a1-irr .irr-hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-irr .irr-tag { position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-irr .irr-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-irr .irr-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-irr .irr-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-irr .irr-hero .irr-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-irr .irr-sub.irr-in { animation-delay: 0.4s; }
  .js .a1-irr .irr-sub2.irr-in { animation-delay: 0.48s; }
  .js .a1-irr .irr-actions.irr-in { animation-delay: 0.56s; }
  .js .a1-irr .irr-hero-video { animation: irr-rise 0.9s var(--ease-out) 0.15s both; }
  .a1-irr.irr-ready .irr-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-irr.irr-ready .irr-r { transition: opacity var(--irr-reveal) ease, transform var(--irr-reveal) var(--ease-out); }
  .a1-irr.irr-ready .irr-svc li:nth-child(even), .a1-irr.irr-ready .irr-step:nth-child(2) { transition-delay: 80ms; }
  .a1-irr.irr-ready .irr-step:nth-child(3) { transition-delay: 160ms; }
}
@keyframes irr-rise { from { transform: translateY(28px); } to { transform: none; } }

/* 2. What we do: a photo beside a numbered list, the "1 inch" figure as a band under the list. */
.a1-irr .irr-work-in { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.a1-irr .irr-work-photo { position: sticky; top: 120px; margin: 0; aspect-ratio: 4 / 4.4; border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-irr .irr-work-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-irr .irr-work-photo figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; }
.a1-irr .irr-svc { margin: 0; padding: 0; list-style: none; display: grid; }
.a1-irr .irr-svc li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid rgb(13 42 28 / 0.14); }
.a1-irr .irr-svc li:last-child { border-bottom: 1px solid rgb(13 42 28 / 0.14); }
.a1-irr .irr-svc-n { font-size: 1.625rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--irr-blue); }
.a1-irr .irr-svc h3 { margin: 0 0 6px; font-size: 1.3125rem; }
.a1-irr .irr-svc p { margin: 0; color: #3f4a43; line-height: 1.5; }
.a1-irr .irr-svc a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-irr .irr-svc a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-irr .irr-inch { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 18px 22px; border-radius: 18px; background: var(--accent); }
.a1-irr .irr-inch p { margin: 0; color: var(--ink); line-height: 1.45; }
.a1-irr .irr-inch p.irr-fig-n { flex: none; font-size: clamp(2rem, 1.5rem + 1.4vw, 2.8rem); font-weight: 600; line-height: 1; white-space: nowrap; }

/* 3. How a good system saves water: the heads beside the yard plan; then the four points. */
.a1-irr .irr-saves-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--irr-mist); }
.a1-irr .irr-saves-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-irr .irr-saves-lead { margin: 0 0 18px; font-size: var(--step-lead); line-height: 1.5; }
.a1-irr .irr-heads-t { margin: 0 0 10px; font-size: 1.0625rem; }
.a1-irr .irr-heads { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.a1-irr .irr-heads button { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 13px 15px; border: 0; border-radius: 14px; background: var(--irr-card); color: var(--ink); font: inherit; font-size: 0.9375rem; line-height: 1.5; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--irr-change) ease; }
.a1-irr .irr-heads strong { display: block; font-size: 1rem; }
.a1-irr .irr-heads span:last-child { color: #3f4a43; }
.a1-irr .irr-heads strong { color: var(--ink); }
.a1-irr .irr-dot { width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; }
.a1-irr .irr-dot-rotor { background: var(--irr-blue); }
.a1-irr .irr-dot-spray { background: #5aa0c8; }
.a1-irr .irr-dot-drip { background: #6b4a32; box-shadow: inset 0 0 0 5px #6b4a32, inset 0 0 0 9px var(--irr-card); }
.a1-irr .irr-heads button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
@media (hover: hover) { .a1-irr .irr-heads button[aria-pressed="false"]:hover { box-shadow: inset 0 0 0 2px rgb(13 42 28 / 0.25); } }
.a1-irr .irr-heads button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-irr .irr-plan { margin: 0; display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: var(--irr-card); box-shadow: var(--lift); }
.a1-irr .irr-plan svg { width: 100%; height: auto; display: block; }
.a1-irr .irr-plan figcaption { color: #3f4a43; font-size: 0.875rem; }
.a1-irr .irr-p-ground { fill: #e8e0cc; }
.a1-irr .irr-p-lawn { fill: var(--irr-turf); }
.a1-irr .irr-p-house { fill: #d9c7a8; stroke: var(--ink); stroke-width: 2; }
.a1-irr .irr-p-bed { fill: #6b4a32; }
.a1-irr .irr-p-t { fill: var(--ink); font: 700 17px/1 inherit; font-family: inherit; }
.a1-irr .irr-p-z { fill: #fff; font: 700 15px/1 inherit; font-family: inherit; }
.a1-irr .irr-p-z-l { fill: var(--ink); }
.a1-irr .irr-spray-a { fill: rgb(47 111 181 / 0.14); stroke: rgb(47 111 181 / 0.55); stroke-width: 2; stroke-dasharray: 6 6; }
.a1-irr .irr-spray-b { fill: rgb(90 160 200 / 0.22); stroke: rgb(90 160 200 / 0.8); stroke-width: 2; stroke-dasharray: 5 5; }
.a1-irr .irr-head { stroke: #fff; stroke-width: 2.5; }
.a1-irr .irr-head-rotor { fill: var(--irr-blue); }
.a1-irr .irr-head-spray { fill: #5aa0c8; }
.a1-irr .irr-drip { stroke: #2b2b2b; stroke-width: 3; fill: none; }
.a1-irr .irr-emit { fill: #5aa0c8; }
.a1-irr .irr-z { transition: opacity var(--irr-change) ease; }
.a1-irr [data-on]:not([data-on=""]) .irr-z { opacity: 0.15; }
.a1-irr [data-on="rotor"] .irr-z-rotor, .a1-irr [data-on="spray"] .irr-z-spray, .a1-irr [data-on="drip"] .irr-z-drip { opacity: 1 !important; }
@media (prefers-reduced-motion: no-preference) {
  .a1-irr .is-on-screen .irr-spray-a, .a1-irr .is-on-screen .irr-spray-b { animation: irr-mist 2.6s ease-in-out infinite; }
  .a1-irr .is-on-screen .irr-emit { animation: irr-drop 1.8s ease-in-out infinite; }
  .a1-irr .is-on-screen .irr-emit:nth-of-type(even) { animation-delay: 0.9s; }
}
@keyframes irr-mist { 0%, 100% { fill-opacity: 0.6; } 50% { fill-opacity: 1.4; } }
@keyframes irr-drop { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.a1-irr .irr-points { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.a1-irr .irr-points li { padding: 16px; border-radius: 14px; background: var(--irr-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); line-height: 1.5; font-size: 0.9375rem; }
.a1-irr .irr-points strong { display: block; margin-bottom: 2px; font-size: 1rem; }

/* 4. Irrigation wells here: dark band, points beside the drawn well. */
.a1-irr .irr-wells-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.a1-irr .irr-wells-text h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-irr .irr-wells-text > p { margin: 0 0 18px; line-height: 1.55; color: rgb(246 241 231 / 0.88); }
.a1-irr .irr-well-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-irr .irr-well-list li { padding: 16px; border-radius: 14px; background: rgb(246 241 231 / 0.07); box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.12); line-height: 1.5; font-size: 0.9375rem; color: rgb(246 241 231 / 0.85); }
.a1-irr .irr-well-list strong { display: block; margin-bottom: 4px; color: var(--accent); font-size: 1rem; }
.a1-irr .irr-well { margin: 0; display: grid; gap: 10px; }
.a1-irr .irr-well svg { width: 100%; max-width: 320px; height: auto; display: block; margin-inline: auto; border-radius: 16px; overflow: hidden; }
.a1-irr .irr-well figcaption { color: rgb(246 241 231 / 0.75); font-size: 0.875rem; }
.a1-irr .irr-w-sky { fill: #cfe3ef; }
.a1-irr .irr-w-grass { fill: var(--irr-turf); }
.a1-irr .irr-w-soil { fill: #b89a77; }
.a1-irr .irr-w-wet { fill: #8e7a64; }
.a1-irr .irr-w-table { fill: none; stroke: #5aa0c8; stroke-width: 4; stroke-dasharray: 10 6; }
.a1-irr .irr-w-pump { fill: var(--irr-blue); }
.a1-irr .irr-w-casing { fill: #d9d4c8; stroke: #59646b; stroke-width: 2; }
.a1-irr .irr-w-screen { fill: url(#none); fill: #9fb6c4; stroke: #59646b; stroke-width: 2; stroke-dasharray: 3 3; }
.a1-irr .irr-w-pipe { fill: none; stroke: #59646b; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.a1-irr .irr-w-t { fill: var(--ink); font: 700 14px/1 inherit; font-family: inherit; }
.a1-irr .irr-w-t-l { fill: #fff; }

/* 5. Cost on a light band. */
.a1-irr .irr-cost-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--leaf-1); }
.a1-irr .irr-cost-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-irr .irr-cost-text p { margin: 0; line-height: 1.55; }
.a1-irr .irr-cost-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-irr .irr-cost-list li { position: relative; padding: 14px 14px 14px 40px; border-radius: 14px; background: var(--irr-card); line-height: 1.4; }
.a1-irr .irr-cost-list li::before { content: ""; position: absolute; left: 15px; top: 1.05em; width: 11px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #5aa0c8; transform: rotate(180deg); }

/* 6. Process: three steps beside a photo. */
.a1-irr .irr-proc-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.a1-irr .irr-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.a1-irr .irr-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(18px, 2.4vw, 26px); border-radius: 18px; background: var(--irr-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-irr .irr-step-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--irr-mist); color: var(--irr-blue); font-weight: 700; font-size: 1.25rem; }
.a1-irr .irr-step h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.a1-irr .irr-step p { margin: 0; color: #3f4a43; line-height: 1.5; }
.a1-irr .irr-proc-photo { margin: 0; display: grid; gap: 8px; }
.a1-irr .irr-proc-photo img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; display: block; border-radius: 20px; box-shadow: var(--lift); }
.a1-irr .irr-proc-photo figcaption { font-size: 0.875rem; font-weight: 700; color: #4f5a52; }

/* 7. FAQ, then the estimate on the dark band running into the footer. */
.a1-irr .irr-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-calm.a1-irr { padding-bottom: 0; }
.a1-irr .irr-est { display: block; margin-top: var(--irr-sec); padding-block: var(--irr-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-irr .irr-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-irr .irr-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-irr .irr-est-text > *, .a1-irr .irr-est-text h2 { margin: 0; }
.a1-irr .irr-est .irr-eyebrow { color: var(--accent); }
.a1-irr .irr-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-irr .irr-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-irr .irr-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-irr .irr-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-irr .irr-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-irr .irr-est-call a:hover { color: var(--accent) !important; } }
.a1-irr .irr-est-call a:focus-visible, .a1-irr .irr-related a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-irr .irr-related { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.7; }
.a1-irr .irr-related a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-irr .irr-est .c-est-form { color: var(--ink); }
.a1-irr .irr-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-irr .irr-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-irr .irr-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-irr .irr-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform var(--irr-hover) var(--ease-out); }
@media (hover: hover) { .a1-irr .irr-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1000px) {
  .a1-irr .irr-hero, .a1-irr .irr-head-row, .a1-irr .irr-saves-in, .a1-irr .irr-wells-in, .a1-irr .irr-cost-in, .a1-irr .irr-proc-in, .a1-irr .irr-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-irr .irr-hero { min-height: 0; gap: 12px; }
  .a1-irr .irr-hero-video { aspect-ratio: 16 / 10; }
  .a1-irr .irr-work-in { grid-template-columns: minmax(0, 1fr); }
  .a1-irr .irr-work-photo { position: relative; top: auto; aspect-ratio: 16 / 10; }
  .a1-irr .irr-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-irr .irr-proc-photo img { aspect-ratio: 16 / 9; }
  .a1-irr .irr-est-text { position: static; }
}
@media (max-width: 640px) {
  .a1-irr .irr-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .a1-irr .irr-sub { font-size: 1.0625rem; }
  .a1-irr .irr-actions .wp-block-buttons, .a1-irr .irr-actions .wp-block-button, .a1-irr .irr-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-irr .irr-hero-video { aspect-ratio: 4 / 3; border-radius: 18px; }
  .a1-irr .irr-tag { left: 8px; bottom: 8px; font-size: 0.75rem; padding: 5px 10px; }
  .a1-irr .irr-work-photo { aspect-ratio: 4 / 3; border-radius: 18px; }
  .a1-irr .irr-work-photo figcaption { left: 8px; bottom: 8px; font-size: 0.75rem; padding: 5px 10px; }
  .a1-irr .irr-svc li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 18px 0; }
  .a1-irr .irr-svc-n { font-size: 1.3125rem; }
  .a1-irr .irr-svc h3 { font-size: 1.125rem; }
  .a1-irr .irr-inch { flex-direction: column; align-items: flex-start; gap: 8px; }
  .a1-irr .irr-saves-in, .a1-irr .irr-wells-in, .a1-irr .irr-cost-in { padding: 18px; }
  .a1-irr .irr-saves-in { display: flex; flex-direction: column; align-items: stretch; }
  .a1-irr .irr-saves-text { display: contents; }
  .a1-irr .irr-saves-text h2 { order: 1; margin: 0; }
  .a1-irr .irr-saves-lead { order: 2; margin: 0; }
  .a1-irr .irr-plan { order: 3; padding: 8px; }
  .a1-irr .irr-heads-t { order: 4; margin: 0; }
  .a1-irr .irr-heads { order: 5; }
  .a1-irr .irr-p-z { font-size: 20px; }
  .a1-irr .irr-p-t { font-size: 22px; }
  .a1-irr .irr-points, .a1-irr .irr-well-list, .a1-irr .irr-cost-list { grid-template-columns: minmax(0, 1fr); }
  .a1-irr .irr-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .a1-irr .irr-step-n { width: 44px; height: 44px; font-size: 1.125rem; }
  .a1-irr .irr-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-irr .irr-z, .a1-irr button { transition: none !important; } }
/* Irrigation, tablets too: the yard plan sits between the lead and the head buttons, so a tap shows its result. */
@media (max-width: 1000px) {
  .a1-irr .irr-saves-in { display: flex; flex-direction: column; align-items: stretch; }
  .a1-irr .irr-saves-text { display: contents; }
  .a1-irr .irr-saves-text h2 { order: 1; margin: 0; }
  .a1-irr .irr-saves-lead { order: 2; margin: 0; }
  .a1-irr .irr-plan { order: 3; }
  .a1-irr .irr-heads-t { order: 4; margin: 0; }
  .a1-irr .irr-heads { order: 5; }
}

/* ===== Tree removal & trimming page (the site's new design) =====
   Motion scale: hover 220 ms, state 320 ms, reveal 600 ms. Scoped to .a1-tre; hidden-until-revealed states and the
   checker's one-verdict-at-a-time apply only once the script has added .tre-ready (without it both verdicts show). */
.a1-tre { --tre-sec: clamp(80px, 10vw, 128px); --tre-hover: 220ms; --tre-change: 320ms; --tre-reveal: 600ms; --tre-card: #fffdf8; --tre-bark: #6b4a32; --tre-leaf: #4f7a43; }
.a1-tre .tre-sec { padding-top: var(--tre-sec); }
.a1-tre .tre-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-tre .tre-head h2, .a1-tre .tre-head .c-lead { margin: 0; }
.a1-tre .tre-head-row { max-width: none; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: 14px 48px; }
.a1-tre .tre-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-tre .c-arrow-down { transition: transform var(--tre-hover) var(--ease-out); }
@media (hover: hover) { .a1-tre .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }
.a1-tre .tre-head .c-lead a, .a1-tre .tre-card a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-tre .tre-head .c-lead a:focus-visible, .a1-tre .tre-card a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 1. Hero: words left, the job photo right. */
.a1-tre .tre-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: min(calc(100svh - 120px), 680px); }
.a1-tre .tre-hero-text { display: grid; gap: 18px; padding-block: 24px; }
.a1-tre .tre-hero h1 { margin: 0; font-size: clamp(2.6rem, 1.3rem + 3.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-tre .tre-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-tre .tre-l > span { display: inline-block; }
.a1-tre .tre-l:nth-child(2) > span { color: var(--tre-leaf); }
.a1-tre .tre-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 44ch; }
.a1-tre .tre-sub2 { margin: 0; color: #4f5a52; max-width: 52ch; }
.a1-tre .tre-actions { margin-top: 6px; }
.a1-tre .tre-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-tre .tre-hero-photo { position: relative; margin: 0; aspect-ratio: 4 / 3.4; border-radius: 26px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-tre .tre-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-tre .tre-hero-photo figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-tre .tre-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-tre .tre-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-tre .tre-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-tre .tre-hero .tre-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-tre .tre-sub.tre-in { animation-delay: 0.4s; }
  .js .a1-tre .tre-sub2.tre-in { animation-delay: 0.48s; }
  .js .a1-tre .tre-actions.tre-in { animation-delay: 0.56s; }
  .js .a1-tre .tre-hero-photo { animation: tre-rise 0.9s var(--ease-out) 0.15s both; }
  .a1-tre.tre-ready .tre-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-tre.tre-ready .tre-r { transition: opacity var(--tre-reveal) ease, transform var(--tre-reveal) var(--ease-out); }
  .a1-tre.tre-ready .tre-card:nth-child(3n + 2), .a1-tre.tre-ready .tre-step:nth-child(2), .a1-tre.tre-ready .tre-after-row li:nth-child(2) { transition-delay: 80ms; }
  .a1-tre.tre-ready .tre-card:nth-child(3n), .a1-tre.tre-ready .tre-step:nth-child(3), .a1-tre.tre-ready .tre-after-row li:nth-child(3) { transition-delay: 160ms; }
}
@keyframes tre-rise { from { transform: translateY(28px); } to { transform: none; } }

/* 2. What we do: six cards with line icons. */
.a1-tre .tre-cards { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); }
.a1-tre .tre-card { display: grid; align-content: start; gap: 8px; padding: clamp(18px, 2.4vw, 26px); border-radius: 20px; background: var(--tre-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-tre .tre-card > * { margin: 0; }
.a1-tre .tre-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 16px; background: var(--leaf-1); color: var(--tre-leaf); }
.a1-tre .tre-card h3 { font-size: 1.25rem; }
.a1-tre .tre-card p { color: #3f4a43; line-height: 1.5; }

/* 3. Remove or trim? The signs as checkboxes beside the text; the verdict appears under them. */
.a1-tre .tre-check-in { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.a1-tre .tre-check-text { display: grid; gap: 12px; }
.a1-tre .tre-check-text > * { margin: 0; }
.a1-tre .tre-check-text h2 { color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-tre .tre-check-text p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-tre .tre-check-hint { display: none; font-size: 1rem !important; color: var(--accent) !important; font-weight: 700; }
.a1-tre.tre-ready .tre-check-hint { display: block; }
.a1-tre .tre-signs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-tre .tre-sign { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; height: 100%; padding: 14px 16px; border-radius: 14px; background: rgb(246 241 231 / 0.07); box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.14); color: rgb(246 241 231 / 0.88); line-height: 1.5; font-size: 0.9375rem; cursor: pointer; transition: background-color var(--tre-change) ease, box-shadow var(--tre-change) ease; }
.a1-tre .tre-sign strong { display: block; color: #fff; font-size: 1rem; }
.a1-tre .tre-sign input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.a1-tre .tre-tick { width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; box-shadow: inset 0 0 0 2px rgb(246 241 231 / 0.55); transition: background-color var(--tre-change) ease, box-shadow var(--tre-change) ease; }
.a1-tre .tre-sign input:checked + .tre-tick { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230d2a1c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: none; }
.a1-tre .tre-sign:has(input:checked) { background: rgb(246 241 231 / 0.13); box-shadow: inset 0 0 0 2px var(--accent); }
@media (hover: hover) { .a1-tre .tre-sign:hover { background: rgb(246 241 231 / 0.12); } }
.a1-tre .tre-sign:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.a1-tre .tre-verdicts { display: grid; gap: 10px; margin-top: 14px; }
.a1-tre .tre-verdict { margin: 0; padding: 16px 18px; border-radius: 14px; line-height: 1.5; }
.a1-tre .tre-verdict strong { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; font-size: 0.875rem; }
.a1-tre .tre-v-trim { background: var(--leaf-1); color: var(--ink); }
.a1-tre .tre-v-trim strong { background: var(--tre-leaf); color: #fff; }
.a1-tre .tre-v-remove { background: var(--accent); color: var(--ink); }
.a1-tre .tre-v-remove strong { background: var(--ink); color: #fff; }
.a1-tre.tre-ready .tre-verdict { display: none; }
.a1-tre.tre-ready [data-verdict="trim"] .tre-v-trim, .a1-tre.tre-ready [data-verdict="remove"] .tre-v-remove { display: block; animation: tre-show var(--tre-change) var(--ease-out); }
@keyframes tre-show { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 4. What comes after: one large photo and two smaller ones. */
.a1-tre .tre-after-row { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(10px, 1.6vw, 18px); }
.a1-tre .tre-after-row figure { margin: 0; display: grid; gap: 8px; }
.a1-tre .tre-after-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 18px; box-shadow: var(--lift); }
.a1-tre .tre-after-big { grid-row: 1 / span 2; }
.a1-tre .tre-after-big img { aspect-ratio: auto; height: calc(100% - 30px); min-height: 320px; }
.a1-tre .tre-after-row figcaption { font-size: 0.875rem; font-weight: 700; color: #4f5a52; }

/* 5. Cost on a light band. */
.a1-tre .tre-cost-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--leaf-1); }
.a1-tre .tre-cost-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-tre .tre-cost-text p { margin: 0; line-height: 1.55; }
.a1-tre .tre-cost-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-tre .tre-cost-list li { position: relative; padding: 14px 14px 14px 40px; border-radius: 14px; background: var(--tre-card); line-height: 1.4; }
.a1-tre .tre-cost-list li::before { content: ""; position: absolute; left: 15px; top: 1.05em; width: 12px; height: 12px; border-radius: 12px 0; background: var(--tre-leaf); }

/* 6. Process: the timing card beside three steps. */
.a1-tre .tre-proc-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.a1-tre .tre-proc-head { display: grid; gap: 20px; position: sticky; top: 120px; }
.a1-tre .tre-proc-head h2 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); line-height: 1.05; }
.a1-tre .tre-fig { display: grid; gap: 10px; padding: 22px; border-radius: 18px; background: var(--accent); }
.a1-tre .tre-fig p { margin: 0; color: var(--ink); line-height: 1.45; }
.a1-tre .tre-fig p.tre-fig-n { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); font-weight: 600; line-height: 1; white-space: nowrap; }
.a1-tre .tre-fig p.tre-fig-more { padding-top: 10px; border-top: 1px solid rgb(13 42 28 / 0.2); font-size: 0.9375rem; }
.a1-tre .tre-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.a1-tre .tre-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(18px, 2.4vw, 26px); border-radius: 18px; background: var(--tre-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-tre .tre-step-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--leaf-1); color: var(--tre-leaf); font-weight: 700; font-size: 1.25rem; }
.a1-tre .tre-step h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.a1-tre .tre-step p { margin: 0; color: #3f4a43; line-height: 1.5; }

/* 7. Good to know: two notes side by side. */
.a1-tre .tre-know-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 14px; }
.a1-tre .tre-note { display: grid; align-content: start; gap: 8px; padding: clamp(20px, 2.6vw, 28px); border-radius: 20px; }
.a1-tre .tre-note > * { margin: 0; }
.a1-tre .tre-note h3 { font-size: 1.25rem; }
.a1-tre .tre-note p { line-height: 1.55; }
.a1-tre .tre-note-power { background: var(--accent); }
.a1-tre .tre-note-permit { background: var(--tre-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.12); }
.a1-tre .tre-note-permit p { color: #3f4a43; }

/* 8. Estimate on the dark band running into the footer. */
.a1-calm.a1-tre { padding-bottom: 0; }
.a1-tre .tre-est { display: block; margin-top: var(--tre-sec); padding-block: var(--tre-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-tre .tre-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-tre .tre-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-tre .tre-est-text > *, .a1-tre .tre-est-text h2 { margin: 0; }
.a1-tre .tre-est .tre-eyebrow { color: var(--accent); }
.a1-tre .tre-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-tre .tre-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-tre .tre-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-tre .tre-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-tre .tre-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-tre .tre-est-call a:hover { color: var(--accent) !important; } }
.a1-tre .tre-est-call a:focus-visible, .a1-tre .tre-related a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-tre .tre-related { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.7; }
.a1-tre .tre-related a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-tre .tre-est .c-est-form { color: var(--ink); }
.a1-tre .tre-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-tre .tre-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-tre .tre-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-tre .tre-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform var(--tre-hover) var(--ease-out); }
@media (hover: hover) { .a1-tre .tre-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1000px) {
  .a1-tre .tre-hero, .a1-tre .tre-head-row, .a1-tre .tre-check-in, .a1-tre .tre-cost-in, .a1-tre .tre-proc-in, .a1-tre .tre-know-in, .a1-tre .tre-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-tre .tre-hero { min-height: 0; gap: 12px; }
  .a1-tre .tre-hero-photo { aspect-ratio: 16 / 10; }
  .a1-tre .tre-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-tre .tre-proc-head, .a1-tre .tre-est-text { position: static; }
}
@media (max-width: 640px) {
  .a1-tre .tre-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .a1-tre .tre-sub { font-size: 1.0625rem; }
  .a1-tre .tre-actions .wp-block-buttons, .a1-tre .tre-actions .wp-block-button, .a1-tre .tre-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-tre .tre-hero-photo { aspect-ratio: 4 / 3.2; border-radius: 18px; }
  .a1-tre .tre-hero-photo figcaption { left: 8px; bottom: 8px; font-size: 0.75rem; padding: 5px 10px; }
  .a1-tre .tre-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .a1-tre .tre-card { grid-template-columns: 48px minmax(0, 1fr); gap: 2px 14px; padding: 16px; }
  .a1-tre .tre-icon { grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; border-radius: 14px; }
  .a1-tre .tre-icon svg { width: 30px; height: 30px; }
  .a1-tre .tre-card h3 { font-size: 1.125rem; }
  .a1-tre .tre-check-in, .a1-tre .tre-cost-in { padding: 18px; }
  .a1-tre .tre-signs, .a1-tre .tre-cost-list { grid-template-columns: minmax(0, 1fr); }
  .a1-tre .tre-after-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .a1-tre .tre-after-big { grid-column: 1 / -1; grid-row: auto; }
  .a1-tre .tre-after-big img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .a1-tre .tre-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .a1-tre .tre-step-n { width: 44px; height: 44px; font-size: 1.125rem; }
  .a1-tre .tre-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-tre .tre-sign, .a1-tre .tre-tick { transition: none !important; } .a1-tre.tre-ready [data-verdict] .tre-verdict { animation: none !important; } }
/* Tree page: the large "after" photo fills exactly the height of the two photos beside it. */
.a1-tre .tre-after-big figure { position: relative; height: 100%; min-height: 320px; align-content: end; }
.a1-tre .tre-after-big img { position: absolute; inset: 0 0 30px 0; width: 100%; height: calc(100% - 30px); min-height: 0; aspect-ratio: auto; }
@media (max-width: 640px) {
  .a1-tre .tre-after-big figure { position: static; height: auto; min-height: 0; }
  .a1-tre .tre-after-big img { position: static; height: auto; aspect-ratio: 4 / 3; }
}

/* Lighting: Steve's night clips. The hero clip takes the photo's place; the row under the scene starts with the
   walkway clip at night, then three A-1 beds by day, all at the same upright shape. */
.a1-lgt .lgt-hero-media { position: relative; }
.a1-lgt .lgt-hero-video { margin: 0; aspect-ratio: 4 / 4.4; border-radius: 22px; overflow: hidden; background: #0b1320; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7); }
.a1-lgt .lgt-hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-lgt .lgt-tag { position: absolute; left: 14px; bottom: 14px; z-index: 1; margin: 0; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); color: var(--ink); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .js .a1-lgt .lgt-hero-video { animation: lgt-rise 0.9s var(--ease-out) 0.15s both; } }
.a1-lgt .lgt-real-k { margin: clamp(26px, 3.4vw, 40px) 0 12px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-lgt .lgt-daylit { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a1-lgt .lgt-daylit img, .a1-lgt .lgt-daylit video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 16px; }
.a1-lgt .lgt-night-clip figure { position: relative; }
.a1-lgt .lgt-night-clip video { background: #0b1320; box-shadow: 0 0 0 3px var(--lgt-warm); }
.a1-lgt .lgt-night-clip figcaption { color: var(--ink); }
@media (max-width: 1000px) {
  .a1-lgt .lgt-hero-video { aspect-ratio: 16 / 11; }
  .a1-lgt .lgt-daylit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .a1-lgt .lgt-hero-video { aspect-ratio: 4 / 4; border-radius: 16px; }
  .a1-lgt .lgt-tag { left: 8px; bottom: 8px; font-size: 0.75rem; padding: 5px 10px; }
  .a1-lgt .lgt-daylit li:first-child { grid-column: auto; }
}

/* ===== Bulkheads page (the site's new design) =====
   Motion scale: hover 220 ms, state 320 ms, reveal 600 ms. Scoped to .a1-blk; hidden-until-revealed states apply only
   once the script has added .blk-ready. Without the script every sign shows in the drawing at once. */
.a1-blk { --blk-sec: clamp(80px, 10vw, 128px); --blk-hover: 220ms; --blk-change: 320ms; --blk-reveal: 600ms; --blk-card: #fffdf8; --blk-tide: #2d6f96; --blk-wood: #8a6a48; }
.a1-blk .blk-sec { padding-top: var(--blk-sec); }
.a1-blk .blk-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-blk .blk-head h2, .a1-blk .blk-head .c-lead { margin: 0; }
.a1-blk .blk-head-row { max-width: none; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: 14px 48px; }
.a1-blk .blk-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-blk .c-arrow-down { transition: transform var(--blk-hover) var(--ease-out); }
@media (hover: hover) { .a1-blk .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }
.a1-blk .blk-card a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-blk .blk-card a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 1. Hero: words left, the crew clip right. */
.a1-blk .blk-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: min(calc(100svh - 120px), 680px); }
.a1-blk .blk-hero-text { display: grid; gap: 18px; padding-block: 24px; }
.a1-blk .blk-hero h1 { margin: 0; font-size: clamp(2.6rem, 1.3rem + 3.8vw, 4.8rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-blk .blk-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-blk .blk-l > span { display: inline-block; }
.a1-blk .blk-l:nth-child(2) > span { color: var(--blk-tide); }
.a1-blk .blk-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 44ch; }
.a1-blk .blk-sub2 { margin: 0; color: #4f5a52; max-width: 52ch; }
.a1-blk .blk-actions { margin-top: 6px; }
.a1-blk .blk-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-blk .blk-hero-media { position: relative; }
.a1-blk .blk-hero-video { margin: 0; aspect-ratio: 4 / 3.4; border-radius: 26px; overflow: hidden; background: var(--ink); box-shadow: var(--lift); }
.a1-blk .blk-hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-blk .blk-tag { position: absolute; left: 14px; bottom: 14px; z-index: 1; margin: 0; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-blk .blk-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-blk .blk-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-blk .blk-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-blk .blk-hero .blk-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-blk .blk-sub.blk-in { animation-delay: 0.4s; }
  .js .a1-blk .blk-sub2.blk-in { animation-delay: 0.48s; }
  .js .a1-blk .blk-actions.blk-in { animation-delay: 0.56s; }
  .js .a1-blk .blk-hero-video { animation: blk-rise 0.9s var(--ease-out) 0.15s both; }
  .a1-blk.blk-ready .blk-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-blk.blk-ready .blk-r { transition: opacity var(--blk-reveal) ease, transform var(--blk-reveal) var(--ease-out); }
  .a1-blk.blk-ready .blk-card:nth-child(2), .a1-blk.blk-ready .blk-step:nth-child(2) { transition-delay: 80ms; }
  .a1-blk.blk-ready .blk-card:nth-child(3), .a1-blk.blk-ready .blk-step:nth-child(3) { transition-delay: 160ms; }
  .a1-blk.blk-ready .blk-card:nth-child(4) { transition-delay: 240ms; }
}
@keyframes blk-rise { from { transform: translateY(28px); } to { transform: none; } }

/* 2. What we do: four cards, then the early-check note. */
.a1-blk .blk-cards { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); }
.a1-blk .blk-card { display: grid; align-content: start; gap: 8px; padding: clamp(18px, 2.4vw, 26px); border-radius: 20px; background: var(--blk-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-blk .blk-card > * { margin: 0; }
.a1-blk .blk-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 16px; background: #dbeaf5; color: var(--blk-tide); }
.a1-blk .blk-card h3 { font-size: 1.25rem; }
.a1-blk .blk-card p { color: #3f4a43; line-height: 1.5; }
.a1-blk .blk-early { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 24px; margin-top: clamp(16px, 2vw, 24px); padding: 20px 24px; border-radius: 18px; background: var(--accent); }
.a1-blk .blk-early > * { margin: 0; }
.a1-blk .blk-early h3 { font-size: 1.25rem; white-space: nowrap; }
.a1-blk .blk-early p { line-height: 1.5; }

/* 3. Signs: the four signs beside the cross-section on the dark band. */
.a1-blk .blk-signs-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.a1-blk .blk-signs-text h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-blk .blk-signs-lead { margin: 0 0 18px; line-height: 1.55; font-size: var(--step-lead); color: rgb(246 241 231 / 0.88); }
.a1-blk .blk-sign-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.a1-blk .blk-sign-list button { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: rgb(246 241 231 / 0.07); color: rgb(246 241 231 / 0.88); font: inherit; font-size: 0.9375rem; line-height: 1.5; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.12); transition: background-color var(--blk-change) ease, box-shadow var(--blk-change) ease; }
.a1-blk .blk-sign-list strong { display: block; color: #fff; font-size: 1rem; }
.a1-blk .blk-sign-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(246 241 231 / 0.14); color: #fff; font-weight: 700; }
.a1-blk .blk-sign-list button[aria-pressed="true"] { background: rgb(246 241 231 / 0.12); box-shadow: inset 0 0 0 2px var(--accent); }
.a1-blk .blk-sign-list button[aria-pressed="true"] .blk-sign-n { background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) { .a1-blk .blk-sign-list button[aria-pressed="false"]:hover { background: rgb(246 241 231 / 0.12); } }
.a1-blk .blk-sign-list button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.a1-blk .blk-cut { margin: 0; display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: var(--blk-card); }
.a1-blk .blk-cut svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.a1-blk .blk-cut figcaption { color: #3f4a43; font-size: 0.875rem; }
.a1-blk .blk-c-sky { fill: #dbeaf5; }
.a1-blk .blk-c-water { fill: #5aa0c8; }
.a1-blk .blk-c-tide { fill: none; stroke: #e7f5fb; stroke-width: 3; }
.a1-blk .blk-c-mud { fill: #7d6a52; }
.a1-blk .blk-c-soil { fill: #b89a77; }
.a1-blk .blk-c-grass { fill: #6e9656; }
.a1-blk .blk-c-wall rect { fill: var(--blk-wood); }
.a1-blk .blk-c-wall .blk-c-wale { fill: #6b4f33; }
.a1-blk .blk-c-rod { stroke: #4c5a53; stroke-width: 4; }
.a1-blk .blk-c-deadman { fill: #6b4f33; }
.a1-blk .blk-c-t { fill: var(--ink); font: 700 15px/1 inherit; font-family: inherit; }
.a1-blk .blk-c-hole { fill: #8e7a64; }
.a1-blk .blk-c-pool { fill: #5aa0c8; opacity: 0.85; }
.a1-blk .blk-c-loss { fill: none; stroke: #b89a77; stroke-width: 10; stroke-linecap: round; }
.a1-blk .blk-c-arrow { fill: none; stroke: #c4521f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.a1-blk .blk-c-ghost { fill: rgb(196 82 31 / 0.12); stroke: #c4521f; stroke-width: 2.5; stroke-dasharray: 7 5; }
.a1-blk .blk-c-crack { fill: none; stroke: #2b1d10; stroke-width: 2.5; stroke-linecap: round; }
.a1-blk .blk-c-rot { fill: rgb(196 82 31 / 0.55); }
.a1-blk .blk-c-mark { fill: #c4521f; stroke: #fff; stroke-width: 2.5; }
.a1-blk .blk-c-n { fill: #fff; font: 700 15px/1 inherit; font-family: inherit; }
.a1-blk .blk-s { transition: opacity var(--blk-change) ease; }
.a1-blk [data-on]:not([data-on=""]) .blk-s { opacity: 0.12; }
.a1-blk [data-on="holes"] .blk-s-holes, .a1-blk [data-on="soil"] .blk-s-soil, .a1-blk [data-on="lean"] .blk-s-lean, .a1-blk [data-on="wood"] .blk-s-wood { opacity: 1 !important; }

/* 4. Cost on a light band. */
.a1-blk .blk-cost-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--leaf-1); }
.a1-blk .blk-cost-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-blk .blk-cost-text p { margin: 0; line-height: 1.55; }
.a1-blk .blk-cost-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-blk .blk-cost-list li { position: relative; padding: 14px 14px 14px 40px; border-radius: 14px; background: var(--blk-card); line-height: 1.4; }
.a1-blk .blk-cost-list li::before { content: ""; position: absolute; left: 15px; top: 0.9em; width: 6px; height: 18px; border-radius: 2px; background: var(--blk-wood); box-shadow: 8px 0 0 var(--blk-wood); }

/* 5. Permits and process: the plan-ahead card beside three steps. */
.a1-blk .blk-proc-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.a1-blk .blk-proc-head { display: grid; gap: 20px; position: sticky; top: 120px; }
.a1-blk .blk-proc-head h2 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); line-height: 1.05; }
.a1-blk .blk-fig { display: grid; gap: 10px; padding: 22px; border-radius: 18px; background: var(--accent); }
.a1-blk .blk-fig p { margin: 0; color: var(--ink); line-height: 1.45; }
.a1-blk .blk-fig p.blk-fig-n { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); font-weight: 600; line-height: 1; white-space: nowrap; }
.a1-blk .blk-fig p.blk-fig-more { padding-top: 10px; border-top: 1px solid rgb(13 42 28 / 0.2); font-size: 0.9375rem; }
.a1-blk .blk-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.a1-blk .blk-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(18px, 2.4vw, 26px); border-radius: 18px; background: var(--blk-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-blk .blk-step-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #dbeaf5; color: var(--blk-tide); font-weight: 700; font-size: 1.25rem; }
.a1-blk .blk-step h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.a1-blk .blk-step p { margin: 0; color: #3f4a43; line-height: 1.5; }

/* 6. FAQ, then the estimate on the dark band running into the footer. */
.a1-blk .blk-faq { padding-top: clamp(72px, 9vw, 120px); }
.a1-calm.a1-blk { padding-bottom: 0; }
.a1-blk .blk-est { display: block; margin-top: var(--blk-sec); padding-block: var(--blk-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-blk .blk-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-blk .blk-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-blk .blk-est-text > *, .a1-blk .blk-est-text h2 { margin: 0; }
.a1-blk .blk-est .blk-eyebrow { color: var(--accent); }
.a1-blk .blk-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-blk .blk-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-blk .blk-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-blk .blk-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-blk .blk-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-blk .blk-est-call a:hover { color: var(--accent) !important; } }
.a1-blk .blk-est-call a:focus-visible, .a1-blk .blk-related a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-blk .blk-related { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.7; }
.a1-blk .blk-related a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-blk .blk-est .c-est-form { color: var(--ink); }
.a1-blk .blk-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-blk .blk-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-blk .blk-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-blk .blk-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform var(--blk-hover) var(--ease-out); }
@media (hover: hover) { .a1-blk .blk-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1000px) {
  .a1-blk .blk-hero, .a1-blk .blk-head-row, .a1-blk .blk-cost-in, .a1-blk .blk-proc-in, .a1-blk .blk-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-blk .blk-hero { min-height: 0; gap: 12px; }
  .a1-blk .blk-hero-video { aspect-ratio: 16 / 10; }
  .a1-blk .blk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The drawing sits between the lead and the signs, so a tap shows its result. */
  .a1-blk .blk-signs-in { display: flex; flex-direction: column; align-items: stretch; }
  .a1-blk .blk-signs-text { display: contents; }
  .a1-blk .blk-signs-text h2 { order: 1; margin: 0; }
  .a1-blk .blk-signs-lead { order: 2; margin: 0; }
  .a1-blk .blk-cut { order: 3; }
  .a1-blk .blk-sign-list { order: 4; }
  .a1-blk .blk-proc-head, .a1-blk .blk-est-text { position: static; }
}
@media (max-width: 640px) {
  .a1-blk .blk-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .a1-blk .blk-sub { font-size: 1.0625rem; }
  .a1-blk .blk-actions .wp-block-buttons, .a1-blk .blk-actions .wp-block-button, .a1-blk .blk-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-blk .blk-hero-video { aspect-ratio: 4 / 3; border-radius: 18px; }
  .a1-blk .blk-tag { left: 8px; bottom: 8px; font-size: 0.75rem; padding: 5px 10px; }
  .a1-blk .blk-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .a1-blk .blk-card { grid-template-columns: 48px minmax(0, 1fr); gap: 2px 14px; padding: 16px; }
  .a1-blk .blk-icon { grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; border-radius: 14px; }
  .a1-blk .blk-icon svg { width: 30px; height: 30px; }
  .a1-blk .blk-card h3 { font-size: 1.125rem; }
  .a1-blk .blk-early { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .a1-blk .blk-signs-in, .a1-blk .blk-cost-in { padding: 18px; }
  .a1-blk .blk-cut { padding: 8px; }
  .a1-blk .blk-c-t, .a1-blk .blk-c-n { font-size: 20px; }
  .a1-blk .blk-cost-list { grid-template-columns: minmax(0, 1fr); }
  .a1-blk .blk-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .a1-blk .blk-step-n { width: 44px; height: 44px; font-size: 1.125rem; }
  .a1-blk .blk-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-blk .blk-s, .a1-blk button, .a1-blk .blk-sign-n { transition: none !important; } }

/* Bulkheads hero: photo 27, upright, in the place of the clip. */
.a1-blk .blk-hero-photo { position: relative; margin: 0; aspect-ratio: 4 / 4.4; border-radius: 26px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-blk .blk-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
.a1-blk .blk-hero-photo figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .js .a1-blk .blk-hero-photo { animation: blk-rise 0.9s var(--ease-out) 0.15s both; } }
@media (max-width: 1000px) { .a1-blk .blk-hero-photo { aspect-ratio: 16 / 11; } }
@media (max-width: 640px) { .a1-blk .blk-hero-photo { aspect-ratio: 4 / 4.2; border-radius: 18px; } .a1-blk .blk-hero-photo figcaption { left: 8px; bottom: 8px; font-size: 0.75rem; padding: 5px 10px; } }

/* ===== Commercial & HOA page (the site's new design) =====
   Motion scale: hover 220 ms, state 320 ms, reveal 600 ms. Scoped to .a1-com; hidden-until-revealed states and the
   project-list controls apply only once the script has added .com-ready (without it the services read as a list). */
.a1-com { --com-sec: clamp(80px, 10vw, 128px); --com-hover: 220ms; --com-change: 320ms; --com-reveal: 600ms; --com-card: #fffdf8; --com-slate: #34505e; }
.a1-com .com-sec { padding-top: var(--com-sec); }
.a1-com .com-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.a1-com .com-head h2, .a1-com .com-head .c-lead { margin: 0; }
.a1-com .com-head-row { max-width: none; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: end; gap: 14px 48px; }
.a1-com .com-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-com .c-arrow-down { transition: transform var(--com-hover) var(--ease-out); }
@media (hover: hover) { .a1-com .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }

/* 1. Hero: words left, the entrance bed right. */
.a1-com .com-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: min(calc(100svh - 120px), 680px); }
.a1-com .com-hero-text { display: grid; gap: 18px; padding-block: 24px; }
.a1-com .com-hero h1 { margin: 0; font-size: clamp(2.6rem, 1.3rem + 3.4vw, 4.4rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-com .com-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-com .com-l > span { display: inline-block; }
.a1-com .com-l:nth-child(2) > span { color: var(--com-slate); }
.a1-com .com-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 46ch; }
.a1-com .com-sub2 { margin: 0; color: #4f5a52; max-width: 52ch; }
.a1-com .com-actions { margin-top: 6px; }
.a1-com .com-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-com .com-hero-photo { position: relative; margin: 0; aspect-ratio: 4 / 3.4; border-radius: 26px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-com .com-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-com .com-hero-photo figcaption, .a1-com .com-how-photo figcaption, .a1-com .com-proc-photo figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-com .com-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-com .com-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-com .com-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-com .com-hero .com-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-com .com-sub.com-in { animation-delay: 0.4s; }
  .js .a1-com .com-sub2.com-in { animation-delay: 0.48s; }
  .js .a1-com .com-actions.com-in { animation-delay: 0.56s; }
  .js .a1-com .com-hero-photo { animation: com-rise 0.9s var(--ease-out) 0.15s both; }
  .a1-com.com-ready .com-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-com.com-ready .com-r { transition: opacity var(--com-reveal) ease, transform var(--com-reveal) var(--ease-out); }
  .a1-com.com-ready .com-step:nth-child(2) { transition-delay: 80ms; }
  .a1-com.com-ready .com-step:nth-child(3) { transition-delay: 160ms; }
}
@keyframes com-rise { from { transform: translateY(28px); } to { transform: none; } }

/* 2. What we do: the project list, then the one-contact band. */
.a1-com .com-scope-in { padding: clamp(18px, 2.6vw, 28px); border-radius: 24px; background: var(--leaf-1); }
.a1-com .com-scope-hint { display: none; margin: 0 0 14px; font-weight: 700; color: var(--com-slate); }
.a1-com.com-ready .com-scope-hint { display: block; }
.a1-com .com-items { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.a1-com .com-item { display: grid; grid-template-rows: 1fr auto; border-radius: 16px; background: var(--com-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); transition: box-shadow var(--com-change) ease; }
.a1-com .com-pick { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px 16px 8px; color: #3f4a43; font-size: 0.9375rem; line-height: 1.5; }
.a1-com .com-pick strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 1.0625rem; }
.a1-com .com-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.a1-com .com-tick { display: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; box-shadow: inset 0 0 0 2px rgb(13 42 28 / 0.4); transition: background-color var(--com-change) ease, box-shadow var(--com-change) ease; }
.a1-com.com-ready .com-tick { display: block; }
.a1-com:not(.com-ready) .com-pick { grid-template-columns: minmax(0, 1fr); }
.a1-com.com-ready .com-pick { cursor: pointer; }
.a1-com .com-pick input:checked + .com-tick { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230d2a1c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: none; }
.a1-com .com-item:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.a1-com .com-pick:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: -3px; border-radius: 16px; }
.a1-com .com-more { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: 0 16px 6px 54px; color: var(--ink); font-size: 0.875rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-com:not(.com-ready) .com-more { margin-left: 16px; }
.a1-com .com-more:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.a1-com .com-scope-bar { display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 14px; }
.a1-com.com-ready .com-scope-bar { display: flex; }
.a1-com .com-scope-count { margin: 0; font-weight: 700; }
.a1-com .com-add { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background-color var(--com-hover) ease, opacity var(--com-hover) ease; }
.a1-com .com-add:disabled { opacity: 0.4; cursor: not-allowed; }
@media (hover: hover) { .a1-com .com-add:not(:disabled):hover { background: var(--com-slate); } }
.a1-com .com-add:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-com .com-one { display: flex; align-items: center; gap: 18px 24px; margin-top: 14px; padding: 18px 22px; border-radius: 18px; background: var(--accent); }
.a1-com .com-one p { margin: 0; color: var(--ink); line-height: 1.45; }
.a1-com .com-one p.com-one-n { flex: none; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem); font-weight: 600; line-height: 1; white-space: nowrap; }

/* 3. Working with a commercial client: text, who, points beside a photo. */
.a1-com .com-how-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.a1-com .com-how-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-com .com-how-lead { margin: 0 0 18px; font-size: var(--step-lead); line-height: 1.5; }
.a1-com .com-who-t { margin: 0 0 8px; font-size: 1rem; }
.a1-com .com-who { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.a1-com .com-who li { padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.9375rem; font-weight: 600; }
.a1-com .com-points { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-com .com-points li { padding: 14px 16px; border-radius: 14px; background: var(--com-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); line-height: 1.5; font-size: 0.9375rem; }
.a1-com .com-points strong { display: block; margin-bottom: 2px; font-size: 1rem; }
.a1-com .com-how-photo { position: relative; margin: 0; aspect-ratio: 4 / 4.4; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-com .com-how-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 4. Cost on the dark band. */
.a1-com .com-cost-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.a1-com .com-cost-text h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-com .com-cost-text p { margin: 0; line-height: 1.55; color: rgb(246 241 231 / 0.88); }
.a1-com .com-cost-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-com .com-cost-list li { position: relative; padding: 14px 14px 14px 40px; border-radius: 14px; background: rgb(246 241 231 / 0.07); box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.12); line-height: 1.4; }
.a1-com .com-cost-list li::before { content: ""; position: absolute; left: 15px; top: 1.05em; width: 12px; height: 12px; border-radius: 3px; background: var(--accent); }

/* 5. Process: the crew photo beside three steps. */
.a1-com .com-proc-in { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.a1-com .com-proc-photo { position: relative; margin: 0; aspect-ratio: 4 / 3.6; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-com .com-proc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-com .com-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.a1-com .com-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(18px, 2.4vw, 26px); border-radius: 18px; background: var(--com-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-com .com-step-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--ink); color: var(--accent); font-weight: 700; font-size: 1.25rem; }
.a1-com .com-step h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.a1-com .com-step p { margin: 0; color: #3f4a43; line-height: 1.5; }

/* 6. Estimate on the dark band running into the footer. */
.a1-calm.a1-com { padding-bottom: 0; }
.a1-com .com-est { display: block; margin-top: var(--com-sec); padding-block: var(--com-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-com .com-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-com .com-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-com .com-est-text > *, .a1-com .com-est-text h2 { margin: 0; }
.a1-com .com-est .com-eyebrow { color: var(--accent); }
.a1-com .com-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-com .com-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-com .com-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-com .com-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-com .com-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-com .com-est-call a:hover { color: var(--accent) !important; } }
.a1-com .com-est-call a:focus-visible, .a1-com .com-related a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-com .com-related { color: rgb(246 241 231 / 0.8); font-size: 0.9375rem; line-height: 1.7; }
.a1-com .com-related a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.a1-com .com-est .c-est-form { color: var(--ink); }
.a1-com .com-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-com .com-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-com .com-est textarea.com-filled { box-shadow: 0 0 0 3px var(--accent) !important; transition: box-shadow 1.2s ease; }
.a1-com .com-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }
.a1-com .com-est .kb-submit-field .kb-adv-form-submit-button:not(.is-sending)::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform var(--com-hover) var(--ease-out); }
@media (hover: hover) { .a1-com .com-est .kb-submit-field .kb-adv-form-submit-button:hover::after { transform: translateX(4px); } }

@media (max-width: 1000px) {
  .a1-com .com-hero, .a1-com .com-head-row, .a1-com .com-how-in, .a1-com .com-cost-in, .a1-com .com-proc-in, .a1-com .com-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-com .com-hero { min-height: 0; gap: 12px; }
  .a1-com .com-hero-photo { aspect-ratio: 16 / 10; }
  .a1-com .com-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-com .com-how-photo { aspect-ratio: 16 / 10; }
  .a1-com .com-est-text { position: static; }
}
@media (max-width: 640px) {
  .a1-com .com-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .a1-com .com-sub { font-size: 1.0625rem; }
  .a1-com .com-actions .wp-block-buttons, .a1-com .com-actions .wp-block-button, .a1-com .com-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-com .com-hero-photo, .a1-com .com-how-photo, .a1-com .com-proc-photo { aspect-ratio: 4 / 3.2; border-radius: 18px; }
  .a1-com .com-hero-photo figcaption, .a1-com .com-how-photo figcaption, .a1-com .com-proc-photo figcaption { left: 8px; bottom: 8px; font-size: 0.75rem; padding: 5px 10px; }
  .a1-com .com-scope-in { padding: 14px; }
  .a1-com .com-items { grid-template-columns: minmax(0, 1fr); }
  .a1-com .com-add { width: 100%; }
  .a1-com .com-one { flex-direction: column; align-items: flex-start; gap: 8px; }
  .a1-com .com-points, .a1-com .com-cost-list { grid-template-columns: minmax(0, 1fr); }
  .a1-com .com-cost-in { padding: 20px; }
  .a1-com .com-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .a1-com .com-step-n { width: 44px; height: 44px; font-size: 1.125rem; }
  .a1-com .com-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-com .com-item, .a1-com .com-tick, .a1-com .com-add, .a1-com .com-est textarea.com-filled { transition: none !important; } }

/* ===== Reviews & awards page (the site's new design) =====
   Motion scale: hover 220 ms, state 320 ms, reveal 600 ms. Scoped to .a1-rev; hidden-until-revealed states and the
   review filter apply only once the script has added .rev-ready (without it every review shows and no filter is drawn). */
.a1-rev { --rev-sec: clamp(80px, 10vw, 128px); --rev-hover: 220ms; --rev-change: 320ms; --rev-reveal: 600ms; --rev-card: #fffdf8; }
.a1-rev .rev-sec { padding-top: var(--rev-sec); }
.a1-rev .rev-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(22px, 3vw, 32px); }
.a1-rev .rev-head h2, .a1-rev .rev-head .c-lead { margin: 0; }
.a1-rev .rev-head-row { max-width: none; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: end; gap: 14px 48px; }
.a1-rev .rev-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-rev .c-arrow-down { transition: transform var(--rev-hover) var(--ease-out); }
@media (hover: hover) { .a1-rev .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }

/* 1. Hero: words and ratings left, the front lawn right. */
.a1-rev .rev-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: min(calc(100svh - 120px), 660px); }
.a1-rev .rev-hero-text { display: grid; gap: 18px; padding-block: 24px; }
.a1-rev .rev-hero h1 { margin: 0; font-size: clamp(2.6rem, 1.3rem + 3.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-rev .rev-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-rev .rev-l > span { display: inline-block; }
.a1-rev .rev-l:nth-child(2) > span { color: var(--ink-2, #24503a); }
.a1-rev .rev-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 40ch; }
.a1-rev .rev-sub2 { margin: 0; color: #4f5a52; max-width: 52ch; }
.a1-rev .rev-actions { margin-top: 6px; }
.a1-rev .rev-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-rev .rev-hero-photo { position: relative; margin: 0; aspect-ratio: 4 / 3.3; border-radius: 26px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-rev .rev-hero-photo img, .a1-rev .rev-owner-photo img, .a1-rev .rev-ask-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-rev .rev-hero-photo figcaption, .a1-rev .rev-owner-photo figcaption, .a1-rev .rev-ask-photo figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); font-size: 0.8125rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-rev .rev-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) both; }
  .js .a1-rev .rev-l:nth-child(1) > span { animation-delay: 0.1s; }
  .js .a1-rev .rev-l:nth-child(2) > span { animation-delay: 0.24s; }
  .js .a1-rev .rev-hero .rev-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-rev .rev-sub.rev-in { animation-delay: 0.4s; }
  .js .a1-rev .rev-sub2.rev-in { animation-delay: 0.48s; }
  .js .a1-rev .rev-actions.rev-in { animation-delay: 0.56s; }
  .js .a1-rev .rev-hero-photo { animation: rev-rise 0.9s var(--ease-out) 0.15s both; }
  .a1-rev.rev-ready .rev-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-rev.rev-ready .rev-r { transition: opacity var(--rev-reveal) ease, transform var(--rev-reveal) var(--ease-out); }
}
@keyframes rev-rise { from { transform: translateY(28px); } to { transform: none; } }

/* 2. Google reviews: the filter, then the widget as light cards (overrides the older dark card style). */
.a1-rev .rev-filter { display: none; margin-bottom: 18px; }
.a1-rev.rev-ready .rev-filter { display: grid; gap: 10px; }
.a1-rev .rev-filter-t { margin: 0; font-weight: 700; font-size: 0.9375rem; }
.a1-rev .rev-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.a1-rev .rev-chips button.rev-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--rev-card); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgb(13 42 28 / 0.22); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background-color var(--rev-change) ease, color var(--rev-change) ease, box-shadow var(--rev-change) ease; }
.a1-rev .rev-chips button.rev-chip .rev-n { min-width: 1.6em; padding: 1px 7px; border-radius: 999px; background: rgb(13 42 28 / 0.08); font-size: 0.8125rem; text-align: center; transition: background-color var(--rev-change) ease; }
.a1-rev .rev-chips button.rev-chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.a1-rev .rev-chips button.rev-chip[aria-pressed="true"] .rev-n { background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) { .a1-rev .rev-chips button.rev-chip[aria-pressed="false"]:hover { box-shadow: inset 0 0 0 2px var(--ink); } }
.a1-rev .rev-chips button.rev-chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-rev .rev-filter-note { margin: 0; min-height: 1.5em; color: #4f5a52; font-size: 0.9375rem; }
.a1-rev .greviews { margin-top: 0; }
.a1-rev .greviews > .ti-widget, .a1-rev .greviews .wp-block-shortcode { margin-top: 0; padding: 0; }
.a1-rev .greviews .ti-widget .ti-review-item.rev-off { display: none !important; }
.a1-rev .greviews .ti-widget .ti-review-item > .ti-inner { background: var(--rev-card) !important; border-radius: 18px !important; box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1) !important; }
.a1-rev .greviews .ti-widget .ti-review-item:nth-child(3n+2) > .ti-inner { background: var(--leaf-1) !important; }
.a1-rev .greviews .ti-widget .ti-name { color: var(--ink) !important; }
.a1-rev .greviews .ti-widget .ti-date { color: #5d675f !important; }
.a1-rev .greviews .ti-widget .ti-review-content, .a1-rev .greviews .ti-widget .ti-review-content * { color: #2f3a33 !important; line-height: 1.55 !important; }
.a1-rev .greviews .ti-widget .ti-read-more, .a1-rev .greviews .ti-widget .ti-read-more span { color: var(--ink) !important; text-decoration-color: var(--accent) !important; text-decoration-thickness: 3px !important; }
.a1-rev .greviews .ti-widget .ti-platform-icon { background: #fff; }
.a1-rev .greviews .ti-widget.ti-goog .ti-load-more-reviews-container .ti-load-more-reviews-button { background: var(--ink) !important; color: #fff !important; border-radius: 999px !important; }
.a1-rev.rev-filtered .greviews .ti-load-more-reviews-container { display: none !important; }
/* While a filter is on, the widget's three columns give way to one grid so the matching cards sit side by side. */
.a1-rev.rev-filtered .greviews .ti-widget .ti-reviews-container-wrapper { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); align-items: start; }
.a1-rev.rev-filtered .greviews .ti-widget .ti-column { display: contents !important; }
.a1-rev.rev-filtered .greviews .ti-widget .ti-review-item { width: auto !important; }
.a1-rev .rev-google-more { margin-top: 22px; }
/* The plugin keeps the widget at height 0 until it is in view, then opens it (about 770 px at every width, since it
   shows a fixed number of reviews before "load more"); hold that room meanwhile so the sections below do not jump. */
.a1-rev .rev-widget:has(.ti-widget[style*="height: 0"]) { min-height: 760px; }

/* 3. Owner on every job: the crew photo beside the line, and the live count. */
.a1-rev .rev-owner-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.a1-rev .rev-owner-photo { position: relative; margin: 0; aspect-ratio: 4 / 3.2; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-rev .rev-owner-text h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); line-height: 1.05; }
.a1-rev .rev-owner-lead { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 34ch; }
.a1-rev .rev-owner-count { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 0; padding: 16px 20px; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-weight: 600; line-height: 1.35; max-width: 30rem; }
.a1-rev .rev-owner-count[hidden] { display: none; }
.a1-rev .rev-owner-count strong { flex: none; font-size: 2rem; line-height: 1; }

/* 4. The award on the dark band. */
.a1-rev .rev-angi-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 52px); border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.a1-rev .rev-angi-text h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-rev .rev-angi-text p { margin: 0; line-height: 1.55; color: rgb(246 241 231 / 0.88); max-width: 46ch; }
.a1-rev .rev-angi-text .rev-angi-note { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgb(246 241 231 / 0.18); font-size: 0.9375rem; color: rgb(246 241 231 / 0.75); }
.a1-rev .rev-angi-n { margin: 0; color: var(--accent); font-size: clamp(3rem, 2rem + 3.4vw, 5rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.03em; }
.a1-rev .rev-angi-sub { margin: 10px 0 0; color: #fff; font-size: var(--step-lead); line-height: 1.4; }
.a1-rev .rev-angi-t { margin: 20px 0 10px; color: rgb(246 241 231 / 0.75); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.a1-rev .rev-years { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
.a1-rev .rev-years li { display: grid; place-items: end center; height: 64px; padding-bottom: 8px; border-radius: 8px 8px 4px 4px; background: linear-gradient(to top, rgb(246 224 22 / 0.95), rgb(246 224 22 / 0.55)); color: var(--accent-ink); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .a1-rev.rev-ready .rev-angi-in:not(.is-in) .rev-years li { transform: scaleY(0.25); opacity: 0.3; }
  .a1-rev.rev-ready .rev-years li { transition: transform 500ms var(--ease-out), opacity 500ms ease; transform-origin: bottom; transition-delay: calc(var(--i, 0) * 40ms); }
}

/* 5. Worked with us? */
.a1-rev .rev-ask-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: var(--leaf-1); }
.a1-rev .rev-ask-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-rev .rev-ask-text p { margin: 0; line-height: 1.55; max-width: 48ch; }
.a1-rev .rev-ask-btn { margin-top: 22px !important; }
.a1-rev .rev-ask-btn a { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: var(--r-control); background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; transition: background-color var(--rev-hover) ease, transform var(--rev-hover) var(--ease-out); }
@media (hover: hover) { .a1-rev .rev-ask-btn a:hover { background: var(--ink-2, #24503a); transform: translateY(-2px); } .a1-rev .rev-ask-btn a:hover .c-arrow { transform: translateX(4px); } }
.a1-rev .rev-ask-btn a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a1-rev .rev-ask-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--surface); }

/* 6. Estimate on the dark band running into the footer. */
.a1-calm.a1-rev { padding-bottom: 0; }
.a1-rev .rev-est { display: block; margin-top: var(--rev-sec); padding-block: var(--rev-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-rev .rev-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-rev .rev-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-rev .rev-est-text > *, .a1-rev .rev-est-text h2 { margin: 0; }
.a1-rev .rev-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-rev .rev-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-rev .rev-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-rev .rev-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-rev .rev-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-rev .rev-est-call a:hover { color: var(--accent) !important; } }
.a1-rev .rev-est-call a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-rev .rev-est .c-est-form { color: var(--ink); }
.a1-rev .rev-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-rev .rev-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-rev .rev-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }

@media (max-width: 1000px) {
  .a1-rev .rev-hero, .a1-rev .rev-head-row, .a1-rev .rev-owner-in, .a1-rev .rev-angi-in, .a1-rev .rev-ask-in, .a1-rev .rev-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-rev .rev-hero { min-height: 0; gap: 12px; }
  .a1-rev .rev-hero-photo, .a1-rev .rev-owner-photo { aspect-ratio: 16 / 10; }
  .a1-rev .rev-est-text { position: static; }
}
@media (max-width: 640px) {
  .a1-rev .rev-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .a1-rev .rev-sub { font-size: 1.0625rem; }
  .a1-rev .rev-actions .wp-block-buttons, .a1-rev .rev-actions .wp-block-button, .a1-rev .rev-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-rev .rev-hero-photo, .a1-rev .rev-owner-photo, .a1-rev .rev-ask-photo { aspect-ratio: 4 / 3.2; border-radius: 18px; }
  .a1-rev .rev-hero-photo figcaption, .a1-rev .rev-owner-photo figcaption, .a1-rev .rev-ask-photo figcaption { left: 8px; bottom: 8px; font-size: 0.75rem; padding: 5px 10px; }
  .a1-rev .rev-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--c-gut)); padding: 3px var(--c-gut) 6px; scrollbar-width: none; }
  .a1-rev .rev-chips::-webkit-scrollbar { display: none; }
  .a1-rev .rev-chips button.rev-chip { flex: none; }
  .a1-rev .rev-angi-in, .a1-rev .rev-ask-in { padding: 20px; }
  .a1-rev .rev-years { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .a1-rev .rev-years li { height: 56px; }
  .a1-rev .rev-ask-btn a { width: 100%; justify-content: center; }
  .a1-rev .rev-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-rev .rev-chips button.rev-chip, .a1-rev .rev-chips button.rev-chip .rev-n, .a1-rev .rev-years li, .a1-rev .rev-ask-btn a { transition: none !important; } }

/* ===== About page (the site's new design) =====
   Motion scale: hover 220 ms, reveal 600 ms. Scoped to .a1-abt; hidden-until-revealed states apply only once the
   script has added .abt-ready. The pool-yard story keeps the shared .st styles and script. */
.a1-abt { --abt-sec: clamp(80px, 10vw, 128px); --abt-hover: 220ms; --abt-reveal: 600ms; --abt-card: #fffdf8; }
.a1-abt .abt-sec { padding-top: var(--abt-sec); }
.a1-abt .abt-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-abt .c-arrow-down { transition: transform var(--abt-hover) var(--ease-out); }
@media (hover: hover) { .a1-abt .c-btn-ghost .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }
.a1-abt figure figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); color: var(--ink); font-size: 0.8125rem; font-weight: 700; }
.a1-abt :is(.abt-hero-photo, .abt-owner-photo, .abt-why-photo, .abt-details-photo) { position: relative; margin: 0; overflow: hidden; background: var(--surface); }
.a1-abt :is(.abt-hero-photo, .abt-owner-photo, .abt-why-photo, .abt-details-photo) img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 1. Hero: words left, the A-1 office right. */
.a1-abt .abt-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: min(calc(100svh - 120px), 660px); }
.a1-abt .abt-hero-text { display: grid; gap: 18px; padding-block: 24px; }
.a1-abt .abt-hero h1 { margin: 0; font-size: clamp(2.8rem, 1.4rem + 4vw, 5rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-abt .abt-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-abt .abt-l > span { display: inline-block; }
.a1-abt .abt-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 40ch; }
.a1-abt .abt-sub2 { margin: 0; color: #4f5a52; max-width: 50ch; }
.a1-abt .abt-actions { margin-top: 6px; }
.a1-abt .abt-primary .wp-block-button__link { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; box-shadow: 0 16px 32px -18px rgb(13 42 28 / 0.6); }
.a1-abt .abt-hero-photo { aspect-ratio: 4 / 3.3; border-radius: 26px; box-shadow: var(--lift); }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-abt .abt-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) 0.1s both; }
  .js .a1-abt .abt-hero .abt-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-abt .abt-sub.abt-in { animation-delay: 0.32s; }
  .js .a1-abt .abt-sub2.abt-in { animation-delay: 0.4s; }
  .js .a1-abt .abt-actions.abt-in { animation-delay: 0.48s; }
  .js .a1-abt .abt-hero-photo { animation: abt-rise 0.9s var(--ease-out) 0.15s both; }
  .a1-abt.abt-ready .abt-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-abt.abt-ready .abt-r { transition: opacity var(--abt-reveal) ease, transform var(--abt-reveal) var(--ease-out); }
}
@keyframes abt-rise { from { transform: translateY(28px); } to { transform: none; } }

/* 2. Owner-supervised: lead and four points beside the crew. */
.a1-abt .abt-owner-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.a1-abt .abt-owner-text h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); line-height: 1.05; max-width: 18ch; }
.a1-abt .abt-owner-lead { margin: 0 0 22px; font-size: var(--step-lead); line-height: 1.5; max-width: 46ch; }
.a1-abt .abt-points { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-abt .abt-points li { padding: 16px 18px; border-radius: 16px; background: var(--abt-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); line-height: 1.5; font-size: 0.9375rem; color: #3f4a43; }
.a1-abt .abt-points strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 1.0625rem; }
.a1-abt .abt-points a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }
.a1-abt .abt-points a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.a1-abt .abt-owner-photo { aspect-ratio: 4 / 4.4; border-radius: 22px; box-shadow: var(--lift); }

/* 3. The story keeps the shared .st look; only its spacing follows this page. */
.a1-abt .abt-story { margin-top: var(--abt-sec); }

/* 4. Why customers choose A-1, on the dark band. */
.a1-abt .abt-why-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 52px); border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.a1-abt .abt-why-text h2 { margin: 0 0 20px; color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-abt .abt-fig { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 22px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid rgb(246 241 231 / 0.18); }
.a1-abt .abt-fig-n { margin: 0; color: var(--accent); font-size: clamp(3.2rem, 2rem + 3.6vw, 5.2rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.03em; }
.a1-abt .abt-fig p:last-child { margin: 0; color: rgb(246 241 231 / 0.9); line-height: 1.5; max-width: 34ch; }
.a1-abt .abt-why-list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.a1-abt .abt-why-list li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: rgb(246 241 231 / 0.07); box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.12); line-height: 1.45; }
.a1-abt .abt-why-list strong { color: #fff; }
.a1-abt .abt-why-list span { color: rgb(246 241 231 / 0.82); font-size: 0.9375rem; }
.a1-abt .abt-why-list a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.a1-abt .abt-why-list a, .a1-abt .abt-facts a { display: inline-block; padding-block: 6px; margin-block: -6px; }
.a1-abt .abt-why-list a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.a1-abt .abt-why-photo { aspect-ratio: 4 / 3.4; border-radius: 18px; }

/* 5. Company details. */
.a1-abt .abt-details-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.a1-abt .abt-details-text h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.a1-abt .abt-details-lead { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 44ch; }
.a1-abt .abt-facts { margin: 0; display: grid; border-radius: 18px; background: var(--abt-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-abt .abt-facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 16px; padding: 14px 20px; }
.a1-abt .abt-facts > div + div { border-top: 1px solid rgb(13 42 28 / 0.1); }
.a1-abt .abt-facts dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.a1-abt .abt-facts dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.a1-abt .abt-facts a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.a1-abt .abt-facts a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* 6. Estimate on the dark band running into the footer. */
.a1-calm.a1-abt { padding-bottom: 0; }
.a1-abt .abt-est { display: block; margin-top: var(--abt-sec); padding-block: var(--abt-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-abt .abt-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-abt .abt-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-abt .abt-est-text > *, .a1-abt .abt-est-text h2 { margin: 0; }
.a1-abt .abt-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-abt .abt-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-abt .abt-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-abt .abt-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-abt .abt-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-abt .abt-est-call a:hover { color: var(--accent) !important; } }
.a1-abt .abt-est-call a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-abt .abt-est .c-est-form { color: var(--ink); }
.a1-abt .abt-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-abt .abt-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-abt .abt-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }

@media (max-width: 1000px) {
  .a1-abt .abt-hero, .a1-abt .abt-owner-in, .a1-abt .abt-why-in, .a1-abt .abt-details-in, .a1-abt .abt-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-abt .abt-hero { min-height: 0; gap: 12px; }
  .a1-abt .abt-hero-photo, .a1-abt .abt-owner-photo { aspect-ratio: 16 / 10; }
  .a1-abt .abt-est-text { position: static; }
}
@media (max-width: 640px) {
  .a1-abt .abt-hero h1 { font-size: clamp(2.6rem, 12vw, 3.2rem); }
  .a1-abt .abt-sub { font-size: 1.0625rem; }
  .a1-abt .abt-actions .wp-block-buttons, .a1-abt .abt-actions .wp-block-button, .a1-abt .abt-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-abt :is(.abt-hero-photo, .abt-owner-photo, .abt-why-photo, .abt-details-photo) { aspect-ratio: 4 / 3.2; border-radius: 18px; }
  .a1-abt figure figcaption { left: 8px; bottom: 8px; font-size: 0.75rem; padding: 5px 10px; }
  .a1-abt .abt-points, .a1-abt .abt-why-list { grid-template-columns: minmax(0, 1fr); }
  .a1-abt .abt-why-in { padding: 20px; }
  .a1-abt .abt-fig { grid-template-columns: minmax(0, 1fr); }
  .a1-abt .abt-facts > div { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .a1-abt .abt-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}

/* ===== Contact page (the site's new design) =====
   Motion scale: hover 220 ms, reveal 600 ms. Scoped to .a1-con; hidden-until-revealed states apply only once the
   script has added .con-ready. */
.a1-con { --con-sec: clamp(80px, 10vw, 128px); --con-hover: 220ms; --con-reveal: 600ms; --con-card: #fffdf8; }
.a1-con .con-sec { padding-top: var(--con-sec); }
.a1-con .con-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.a1-con .c-arrow-down { transition: transform var(--con-hover) var(--ease-out); }
@media (hover: hover) { .a1-con .con-primary .wp-block-button__link:hover .c-arrow-down { transform: translateY(3px); } }
.a1-con figure figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 13px; border-radius: 999px; background: rgb(246 241 231 / 0.92); color: var(--ink); font-size: 0.8125rem; font-weight: 700; }
.a1-con :is(.con-hero-photo, .con-next-photo) { position: relative; margin: 0; overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.a1-con :is(.con-hero-photo, .con-next-photo) img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 1. Hero: words and the contact card left, the lawn right. */
.a1-con .con-hero { width: min(1320px, 100% - 2 * var(--c-gut)); margin: clamp(16px, 3vw, 40px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.a1-con .con-hero-text { display: grid; gap: 18px; padding-block: 24px; }
.a1-con .con-hero h1 { margin: 0; font-size: clamp(2.8rem, 1.4rem + 4vw, 5rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; }
.a1-con .con-l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.a1-con .con-l > span { display: inline-block; }
.a1-con .con-sub { margin: 0; font-size: var(--step-lead); line-height: 1.5; max-width: 40ch; }
.a1-con .con-sub2 { margin: 0; color: #4f5a52; max-width: 50ch; }
.a1-con .con-card { margin-top: 4px; padding: clamp(18px, 2.4vw, 26px); border-radius: 22px; background: var(--con-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1), 0 18px 40px -28px rgb(13 42 28 / 0.45); }
.a1-con .con-card-t { margin: 0 0 6px; font-size: 1.25rem; }
.a1-con .con-card-note { margin: 0 0 14px; color: #3f4a43; font-size: 0.9375rem; line-height: 1.5; }
.a1-con .con-call { margin: 0 0 6px; }
.a1-con .con-call a { display: inline-flex; align-items: baseline; gap: 12px; min-height: 48px; color: var(--ink); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; transition: color var(--con-hover) ease; }
.a1-con .con-call-k { padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transform: translateY(-4px); }
@media (hover: hover) { .a1-con .con-call a:hover { color: var(--ink-2, #24503a); } }
.a1-con .con-call a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.a1-con .con-facts { margin: 0; display: grid; }
.a1-con .con-facts > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 4px 14px; padding: 12px 0; border-top: 1px solid rgb(13 42 28 / 0.1); }
.a1-con .con-facts dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.a1-con .con-facts dd { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.a1-con .con-facts a { display: inline-block; padding-block: 5px; margin-block: -5px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.a1-con .con-facts a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.a1-con .con-open { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.875rem; font-weight: 700; color: #6b4b12; }
.a1-con .con-open[hidden] { display: none; }
.a1-con .con-open::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #c98a1b; }
.a1-con .con-open.is-open { color: #1f6b3a; }
.a1-con .con-open.is-open::before { background: #2f9e57; box-shadow: 0 0 0 4px rgb(47 158 87 / 0.18); }
.a1-con .con-primary .wp-block-button__link { min-height: 56px; padding-inline: 28px; font-size: 1.0625rem; }
.a1-con .con-hero-photo { aspect-ratio: 4 / 4.6; border-radius: 26px; }
@media (prefers-reduced-motion: no-preference) {
  .js .a1-con .con-l > span { transform: translateY(105%); animation: c-rise 0.9s var(--ease-out) 0.1s both; }
  .js .a1-con .con-hero .con-in { animation: c-up 0.6s var(--ease-out) both; }
  .js .a1-con .con-sub.con-in { animation-delay: 0.32s; }
  .js .a1-con .con-sub2.con-in { animation-delay: 0.4s; }
  .js .a1-con .con-card.con-in { animation-delay: 0.48s; }
  .js .a1-con .con-actions.con-in { animation-delay: 0.56s; }
  .js .a1-con .con-hero-photo { animation: con-rise 0.9s var(--ease-out) 0.15s both; }
  .a1-con.con-ready .con-r:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .a1-con.con-ready .con-r { transition: opacity var(--con-reveal) ease, transform var(--con-reveal) var(--ease-out); }
}
@keyframes con-rise { from { transform: translateY(28px); } to { transform: none; } }

/* 2. What happens next. */
.a1-con .con-next-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.a1-con .con-next-photo { aspect-ratio: 4 / 3.6; border-radius: 22px; }
.a1-con .con-next-text h2 { margin: 0 0 12px; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); line-height: 1.05; }
.a1-con .con-next-lead { margin: 0 0 22px; font-size: var(--step-lead); line-height: 1.5; max-width: 46ch; }
.a1-con .con-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.a1-con .con-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; border-radius: 18px; background: var(--con-card); box-shadow: inset 0 0 0 1px rgb(13 42 28 / 0.1); }
.a1-con .con-step-n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ink); color: var(--accent); font-weight: 700; font-size: 1.125rem; }
.a1-con .con-step h3 { margin: 2px 0 4px; font-size: 1.1875rem; }
.a1-con .con-step p { margin: 0; color: #3f4a43; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .a1-con.con-ready .con-next-in:not(.is-in) .con-step { opacity: 0; transform: translateX(16px); }
  .a1-con.con-ready .con-step { transition: opacity 500ms ease, transform 500ms var(--ease-out); }
  .a1-con.con-ready .con-step:nth-child(2) { transition-delay: 90ms; }
  .a1-con.con-ready .con-step:nth-child(3) { transition-delay: 180ms; }
}

/* 3. Estimate on the dark band running into the footer. */
.a1-calm.a1-con { padding-bottom: 0; }
.a1-con .con-est { display: block; margin-top: var(--con-sec); padding-block: var(--con-sec); background: var(--ink); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.a1-con .con-est-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.a1-con .con-est-text { display: grid; gap: 18px; position: sticky; top: 120px; }
.a1-con .con-est-text > *, .a1-con .con-est-text h2 { margin: 0; }
.a1-con .con-est-text h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem); line-height: 1.04; }
.a1-con .con-est-text h2 + p { font-size: var(--step-lead); line-height: 1.5; color: rgb(246 241 231 / 0.88); }
.a1-con .con-est-note { padding: 16px 18px; border-radius: 16px; background: rgb(246 241 231 / 0.07); box-shadow: inset 0 0 0 1px rgb(246 241 231 / 0.12); color: rgb(246 241 231 / 0.88); line-height: 1.55; }
.a1-con .con-est-call { padding-top: 18px; border-top: 1px solid rgb(246 241 231 / 0.18); }
.a1-con .con-est-call a { display: grid; color: #fff !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; text-decoration: none !important; }
.a1-con .con-est-call a span { font-size: 0.875rem; color: rgb(246 241 231 / 0.75); }
@media (hover: hover) { .a1-con .con-est-call a:hover { color: var(--accent) !important; } }
.a1-con .con-est-call a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.a1-con .con-est .c-est-form { color: var(--ink); }
.a1-con .con-est .kb-form-basic-style :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) { min-height: 52px; }
.a1-con .con-est .kb-form-basic-style textarea { min-height: 120px; }
.a1-con .con-est .kb-submit-field .kb-adv-form-submit-button { min-height: 54px; padding-inline: 30px !important; font-size: 1.0625rem !important; }

@media (max-width: 1000px) {
  .a1-con .con-hero, .a1-con .con-next-in, .a1-con .con-est-in { grid-template-columns: minmax(0, 1fr); }
  .a1-con .con-hero { gap: 12px; }
  .a1-con .con-hero-photo, .a1-con .con-next-photo { aspect-ratio: 16 / 10; }
  .a1-con .con-est-text { position: static; }
}
@media (max-width: 640px) {
  .a1-con .con-hero h1 { font-size: clamp(2.6rem, 12vw, 3.2rem); }
  .a1-con .con-sub { font-size: 1.0625rem; }
  .a1-con .con-actions .wp-block-buttons, .a1-con .con-actions .wp-block-button, .a1-con .con-actions .wp-block-button__link { width: 100%; justify-content: center; }
  .a1-con :is(.con-hero-photo, .con-next-photo) { aspect-ratio: 4 / 3.2; border-radius: 18px; }
  .a1-con figure figcaption { left: 8px; bottom: 8px; font-size: 0.75rem; padding: 5px 10px; }
  .a1-con .con-facts > div { grid-template-columns: minmax(0, 1fr); }
  .a1-con .con-step { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
  .a1-con .con-step-n { width: 42px; height: 42px; }
  .a1-con .con-est .kb-submit-field .kb-adv-form-submit-button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a1-con .con-call a { transition: none !important; } }