/*
Theme Name: Sierra Asphalt: Clean Line
Author: Dependent Media
Description: Block theme for sierraasphalt.com (v5, 2026-11, Straightedge redrawn closer to Tim Carver's design notes: more white space, larger photos, the logo line once per page): photo-led, light, restrained. Sticky header with phone and quote button, three-photo hero, five service pages, Who We Serve, 24-photo gallery, service-area map, quote and careers forms.
Version: 5.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: sra-cleanline
*/

/* ===================================================================================================================
   White page, charcoal type, the logo's yellow as a thin lane-dash accent and the one strong button. Barlow for headings
   and labels, Source Sans 3 for reading. Motion: the hero crossfade (pausable, off under reduced motion) and a short
   fade-up on scroll. Nothing else moves.
   =================================================================================================================== */
@font-face { font-family: Barlow; font-weight: 500; font-style: normal; font-display: swap; src: url(assets/fonts/barlow-500.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 500; font-style: italic; font-display: swap; src: url(assets/fonts/barlow-500-italic.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 600; font-style: normal; font-display: swap; src: url(assets/fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 700; font-style: normal; font-display: swap; src: url(assets/fonts/barlow-700.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-style: normal; font-display: swap; src: url(assets/fonts/source-sans-3-400.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-style: italic; font-display: swap; src: url(assets/fonts/source-sans-3-400-italic.woff2) format("woff2"); }

:root {
	--ink: #1B1C1F; --ink-2: #45474D; --ink-3: #5F626A; --paper: #FFFFFF; --grey: #F4F4F2; --grey-2: #E9E9E5; --rule: #D8D8D3;
	--dark: #15161A; --dark-2: #1F2024; --yellow: #FFE500; --yellow-deep: #CBB800; --ada: #1F5FBF; --ok: #2E7D32;
	--display: Barlow, "Helvetica Neue", Arial, sans-serif; --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
	--gut: clamp(1rem, 4vw, 2.5rem); --wide: 76rem; --text: 44rem; --r: 3px; --bar: 4.25rem;
	--dash: repeating-linear-gradient(90deg, var(--yellow) 0 22px, transparent 22px 32px);
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
#quote-form { scroll-margin-top: 6.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; overflow-x: clip; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration-thickness: .06em; text-underline-offset: .18em; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--yellow); border-radius: 3px; }
.sra-foot :where(a, button):focus-visible, .sra-hero :where(a, button):focus-visible, .sra-cta :where(a):focus-visible, .sra-bar :where(a):focus-visible { outline-color: var(--yellow); box-shadow: 0 0 0 6px var(--dark); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sra-skip { position: absolute; left: .75rem; top: -4rem; z-index: 100; background: var(--yellow); color: var(--ink); padding: .7rem 1.1rem; border-radius: var(--r); font-family: var(--display); font-weight: 600; text-decoration: none; }
.sra-skip:focus { top: .75rem; }
.sra-ico { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.sra-main { padding: 0 !important; }
.sra-main > .wp-block-post-content { margin: 0 !important; max-width: none !important; }
.sra-main > .wp-block-post-content > * { margin-block: 0; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; margin: 0 0 .6em; text-wrap: balance; color: var(--ink); }
h1 { font-weight: 700; font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); letter-spacing: -.01em; }
h2 { font-weight: 600; font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.35rem); letter-spacing: -.005em; }
h3 { font-weight: 600; font-size: 1.3rem; }
p { text-wrap: pretty; margin: 0 0 1em; }
.sra-lead { font-size: 1.2rem; color: var(--ink-2); line-height: 1.55; }
.sra-kicker { font-family: var(--display); font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .7rem; }
/* The logo's own mark: the tapering horizon line with the Sierra peak (3.0.10, Josh 11-11). Drawn as a mask so it takes --yellow on light and dark bands. The dashed --dash stays for the hover underlines. */
.sra-dash { display: block; width: 9rem; aspect-ratio: 292 / 32; background: var(--yellow); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 32'%3E%3Cpath d='M0 28 124 23v9ZM292 28 168 23v9ZM146 1l34 31h-14L146 14 126 32h-14Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 32'%3E%3Cpath d='M0 28 124 23v9ZM292 28 168 23v9ZM146 1l34 31h-14L146 14 126 32h-14Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; margin: .1rem 0 1.25rem; }
.sra-dash--c { margin-inline: auto; }

/* ---------- buttons ---------- */
.sra-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.sra-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: .01em; text-decoration: none; padding: .8rem 1.3rem; border-radius: var(--r); border: 2px solid transparent; line-height: 1.1; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; white-space: nowrap; }
.sra-btn--quote { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.sra-btn--quote:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.sra-btn--ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.sra-btn--ink:hover { background: #000; border-color: #000; }
.sra-btn--line { color: var(--ink); border-color: var(--ink); background: transparent; }
.sra-btn--line:hover { background: var(--ink); color: #fff; }
.sra-btn--light { color: #fff; border-color: rgba(255, 255, 255, .7); background: transparent; }
.sra-btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.sra-more { font-family: var(--display); font-weight: 600; display: inline-flex; gap: .4rem; align-items: center; text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: .1rem; color: var(--ink); }
.sra-more:hover { border-bottom-color: var(--ink); }
.sra-tel { font-family: var(--display); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.sra-tel:hover { text-decoration: underline; }

/* ---------- header ---------- */
/* WordPress wraps the header part in its own <header>, so that wrapper is what has to stick (a sticky child of a 73 px parent never sticks). */
header.wp-block-template-part { position: sticky; top: 0; z-index: 60; }
.sra-header { position: relative; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--rule); transition: box-shadow .2s; padding: 0 var(--gut) !important; }
.sra-header.is-scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }
.sra-header__row { max-width: var(--wide); margin-inline: auto !important; min-height: 4.5rem; gap: 1.5rem !important; align-items: center; }
.sra-brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); flex: none; }
.sra-logo { width: auto; height: 2.75rem; display: block; }
.sra-logo__word { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: .5px; fill: currentColor; }
.sra-logo__cap { font-size: 44px; }
.sra-logo__small { font-family: var(--display); font-weight: 600; font-size: 11.5px; letter-spacing: 1.2px; fill: currentColor; }
.sra-logo__peak, .sra-logo__rule, .sra-logo__horizon { fill: var(--yellow); }
.sra-brand .sra-logo__peak, .sra-brand .sra-logo__rule, .sra-brand .sra-logo__horizon { fill: var(--yellow-deep); }
.sra-nav { font-family: var(--display); font-weight: 600; font-size: 1rem; margin-left: auto; }
.sra-nav .wp-block-navigation-item a { text-decoration: none; padding: .45rem .15rem; position: relative; color: var(--ink); }
.sra-nav .wp-block-navigation-item a::after { content: ""; position: absolute; left: .15rem; right: .15rem; bottom: .05rem; height: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .18s; }
.sra-nav .wp-block-navigation-item a:hover::after, .sra-nav .is-current > a::after, .sra-nav .is-section > .wp-block-navigation-item__content::after, .sra-nav .is-section > button + a::after { transform: scaleX(1); }
.sra-nav .wp-block-navigation__container { gap: 1.35rem; }
.sra-nav .wp-block-navigation__submenu-icon { color: var(--ink-3); margin-left: .15rem; width: 28px !important; height: 28px !important; padding: 8px !important; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.sra-nav .wp-block-navigation__submenu-container { background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: var(--r); padding: .4rem !important; min-width: 19.5rem !important; width: max-content; box-shadow: 0 10px 30px rgba(0, 0, 0, .1); margin-top: .4rem; }
.sra-nav .wp-block-navigation__submenu-container a { color: var(--ink) !important; padding: .55rem .8rem !important; font-weight: 500; display: block; white-space: nowrap; }
/* Opens under the parent's text and to the right (core right-aligns it for a right-justified menu, off the viewport edge). */
.sra-nav .wp-block-navigation-item > .wp-block-navigation__submenu-container { left: -.65rem !important; right: auto !important; }
.sra-nav .wp-block-navigation__submenu-container a:hover { background: var(--grey); }
.sra-nav .wp-block-navigation__submenu-container a::after { display: none; }
.sra-nav .has-child > .wp-block-navigation-item__content { padding-right: .2rem; }
/* Hover bridge: the gap between the parent and the dropdown stays "inside". */
.sra-nav .has-child::after { content: ""; position: absolute; left: 0; right: 0; height: .6rem; bottom: -.6rem; }
/* Menu button: one 48 px square, two drawn bars centred in it. The Close button sits on exactly the same spot (site.js hands it
   the Menu button's position) and its bars turn from the two lines into the X; closing turns them back. WordPress's own icons are hidden. */
.sra-nav .wp-block-navigation__responsive-container-open, .sra-nav .wp-block-navigation__responsive-container-close { color: var(--ink); width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; margin: 0; position: relative; align-items: center; justify-content: center; }
.sra-nav .wp-block-navigation__responsive-container-open svg, .sra-nav .wp-block-navigation__responsive-container-close svg { display: none; }
.sra-nav .wp-block-navigation__responsive-container-open::before, .sra-nav .wp-block-navigation__responsive-container-open::after,
.sra-nav .wp-block-navigation__responsive-container-close::before, .sra-nav .wp-block-navigation__responsive-container-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 3px; margin: -1.5px 0 0 -15px; background: currentColor; transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.sra-nav .wp-block-navigation__responsive-container-open::before { transform: translateY(-5.5px) rotate(0deg); }
.sra-nav .wp-block-navigation__responsive-container-open::after { transform: translateY(5.5px) rotate(0deg); }
html.has-modal-open .sra-nav .wp-block-navigation__responsive-container-open::before, .sra-nav .wp-block-navigation__responsive-container-close::before { transform: translateY(0) rotate(45deg); }
html.has-modal-open .sra-nav .wp-block-navigation__responsive-container-open::after, .sra-nav .wp-block-navigation__responsive-container-close::after { transform: translateY(0) rotate(-45deg); }
.sra-nav .is-menu-open .wp-block-navigation__responsive-container-close::before { animation: sra-mb-a .3s cubic-bezier(.3, .7, .2, 1) both; }
.sra-nav .is-menu-open .wp-block-navigation__responsive-container-close::after { animation: sra-mb-b .3s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes sra-mb-a { from { transform: translateY(-5.5px) rotate(0deg); } to { transform: translateY(0) rotate(45deg); } }
@keyframes sra-mb-b { from { transform: translateY(5.5px) rotate(0deg); } to { transform: translateY(0) rotate(-45deg); } }
@keyframes sra-menu-in { from { opacity: 0; } to { opacity: 1; } }
.sra-nav .wp-block-navigation__responsive-container-close { position: fixed; top: var(--sra-mb-y, .6rem); left: var(--sra-mb-x, auto); right: var(--gut); }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open { animation: sra-menu-in .12s ease-out both; }
.sra-nav .wp-block-navigation-item__content { white-space: nowrap; }
.sra-nav__num, .sra-nav__actions { display: none; }
/* The open Menu: one left-aligned column on the page's own left edge, large items, the five services numbered beneath Services,
   then the phone number and Request a Quote. The Call / Request a Quote bar stays reachable under it on small screens. */
.sra-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--paper); padding: 5rem var(--gut) calc(var(--bar) + 2.5rem); font-size: 1.5rem; overflow-y: auto; }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0; }
/* The logo stays where it is, top left, above the open menu (the header is the stacking context for both). */
html.has-modal-open .sra-header .sra-brand { position: relative; z-index: 100001; }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display: block; width: 100%; max-width: var(--wide); margin-inline: auto; padding-top: 0; }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; justify-content: flex-start; text-align: left; width: 100%; }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start; width: 100%; }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding: .35rem 0; font-weight: 700; font-size: 1.5rem; white-space: normal; }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; padding: 0 0 .5rem 1.1rem !important; min-width: 0 !important; margin: 0; display: flex; flex-direction: column; gap: 0; width: 100%; }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: flex; align-items: baseline; gap: .6rem; font-size: 1.1rem; font-weight: 500; color: var(--ink-2) !important; padding: .3rem 0 !important; background: transparent; }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none; }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open .sra-nav__num { display: inline; font-weight: 700; font-size: .85rem; color: #7A6C00; font-variant-numeric: tabular-nums; min-width: 1.4em; }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open .sra-nav__actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); width: 100%; max-width: var(--wide); margin-inline: auto; }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open .sra-nav__actions .sra-btn { width: 100%; max-width: 30rem; min-height: 52px; font-size: 1.1rem; box-sizing: border-box; }
.sra-header__act { display: flex; align-items: center; gap: 1.25rem; flex: none; }
.sra-header__act .sra-tel { font-size: 1.05rem; }
/* up to 1279: the seven links do not fit on one line beside the number and the quote button, so the nav is the Menu button
   and the row reads logo … phone, Request a Quote, Menu. Under 900 the bottom bar carries Call and Request a Quote. */
@media (max-width: 1279px) {
	.sra-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.sra-nav .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) { display: none !important; }
	.sra-header__row .sra-nav { order: 3; margin-left: 0; }
	.sra-header__row .sra-header__act { margin-left: auto; } /* two classes: WordPress zeroes margins on flex children */
}
@media (max-width: 899px) { .sra-header__row { min-height: 4rem; gap: .75rem !important; } .sra-logo { height: 2.3rem; } .sra-header__act .sra-tel { display: none; } .sra-header__act .sra-btn { display: none; } }

/* ---------- mobile bottom bar: Call / Request a Quote ---------- */
.sra-bar { display: none; }
@media (max-width: 899px) {
	body { padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom)); }
	.sra-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100001; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); }
	.sra-bar a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: calc(var(--bar) - 1px); font-family: var(--display); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
	.sra-bar__call { background: var(--ink); color: #fff; }
	.sra-bar__quote { background: var(--yellow); color: var(--ink); }
}

/* ---------- bands and measure ---------- */
.sra-band { padding: clamp(3rem, 2rem + 4vw, 6rem) var(--gut) !important; position: relative; }
.sra-band--grey { background: var(--grey); }
.sra-band--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) !important; }
.sra-band > * { max-width: var(--wide); margin-inline: auto !important; box-sizing: border-box; }
.sra-band > :where(p, ul.wp-block-list, ol.wp-block-list) { padding-right: max(0px, calc(min(100%, var(--wide)) - var(--text))); }
.sra-band > :where(h2, h3, .wp-block-heading) { padding-right: max(0px, calc(min(100%, var(--wide)) - 50rem)); }
/* Core's flow layout zeroes margin-bottom and sets a block gap on siblings; these set the rhythm we want. */
.sra-band > * + * { margin-block-start: 1.1em; }
.sra-band > .wp-block-heading { margin-block-start: 2.5rem; }
.sra-band > .wp-block-heading + * { margin-block-start: .7rem; }
.sra-band > .wp-block-heading:first-child, .sra-band > .sra-sec + .wp-block-heading { margin-block-start: 0; }
.sra-band > .sra-sec + *, .sra-band > .sra-pair, .sra-band > .sra-pair + *, .sra-band > .sra-grid, .sra-band > .sra-cards, .sra-band > .sra-serve, .sra-band > .sra-area, .sra-band > .sra-names, .sra-band > .sra-lic { margin-block-start: 2rem; }
.sra-band > .sra-sec + * { margin-block-start: 0; }
.sra-band > .sra-checks { margin-block-start: .75rem; }
.sra-col > * + * { margin-block-start: 1.1em; }
.sra-col > .wp-block-heading { margin-block-start: 2rem; }
.sra-col > .wp-block-heading + * { margin-block-start: .7rem; }
.sra-sec { margin-bottom: 1.75rem; }
.sra-sec h2 { margin-bottom: .75rem; }
.sra-sec .sra-lead { max-width: var(--text); margin-bottom: 0; }
.sra-sec--c { text-align: center; }
.sra-sec--c .sra-lead { margin-inline: auto; }
.sra-sec--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.sra-sec--row > div { flex: 1 1 30rem; }
.sra-2col { display: grid; grid-template-columns: 1fr; gap: 2rem 4rem; }
@media (min-width: 900px) { .sra-2col { grid-template-columns: 1fr 1fr; } }
.sra-2col > * > :first-child { margin-top: 0; }
.sra-checks { list-style: none; padding: 0; margin: .5rem 0 1.5rem; display: grid; grid-template-columns: 1fr; gap: .55rem 2rem; }
@media (min-width: 700px) { .sra-checks { grid-template-columns: 1fr 1fr; } }
.sra-checks li { position: relative; padding-left: 1.9rem; }
.sra-checks li::before { content: ""; position: absolute; left: 0; top: .42em; width: 1.05rem; height: .55rem; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(-45deg); }
.sra-checks li::after { content: ""; position: absolute; left: .1rem; top: 1.45em; width: 1rem; height: 3px; background: var(--yellow); }

/* ---------- hero ---------- */
.sra-hero { position: relative; height: clamp(26rem, 72vh, 47rem); background: var(--dark); color: #fff; overflow: clip; isolation: isolate; }
.sra-hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.sra-hero__slide.is-on { opacity: 1; }
.sra-hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); }
/* the outgoing photo keeps its push-in (.is-out, set by site.js) until its fade has finished, so it never snaps back to full size mid-dissolve */
.sra-hero__slide.is-on img, .sra-hero__slide.is-out img { animation: sra-drift 9s linear forwards; }
@keyframes sra-drift { from { transform: scale(1); } to { transform: scale(1.045); } }
.sra-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55) 100%), linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 70%); pointer-events: none; }
.sra-hero__inner { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 var(--gut) clamp(2.5rem, 6vh, 4.5rem); }
.sra-hero__text { max-width: var(--wide); width: 100%; margin-inline: auto; }
.sra-hero__text > * { max-width: 40rem; }
.sra-hero .sra-dash { margin-bottom: 1rem; }
.sra-hero h1 { color: #fff; margin-bottom: .4em; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.sra-hero__sub { font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); color: rgba(255, 255, 255, .92); margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.sra-hero .sra-actions { margin-top: 1.4rem; }
.sra-hero__ctl { position: absolute; right: var(--gut); bottom: 1.1rem; display: flex; align-items: center; gap: .6rem; }
.sra-hero__dots { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
/* 24 px targets (WCAG 2.5.8) drawn as 11 px dots. */
.sra-hero__dot { width: 1.5rem; height: 1.5rem; border: 0; background: transparent; padding: 0; cursor: pointer; position: relative; border-radius: 50%; }
.sra-hero__dot::before { content: ""; position: absolute; inset: .4rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); }
.sra-hero__dot[aria-current="true"]::before { background: var(--yellow); border-color: var(--yellow); }
.sra-hero__pause { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); background: rgba(0, 0, 0, .35); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sra-hero__pause .sra-ico { width: 1.1rem; height: 1.1rem; }
.sra-hero__pause .sra-ico--play, .sra-hero.is-paused .sra-hero__pause .sra-ico--pause { display: none; }
.sra-hero.is-paused .sra-hero__pause .sra-ico--play { display: block; }
.sra-hero.is-paused .sra-hero__slide img { animation-play-state: paused; }
@media (max-width: 899px) { .sra-hero { height: clamp(24rem, 68svh, 38rem); } .sra-hero__ctl { bottom: .8rem; } .sra-hero__inner { padding-bottom: 3.6rem; } }

/* ---------- page head ---------- */
.sra-head { background: var(--grey); padding: clamp(2.5rem, 2rem + 3vw, 5rem) var(--gut) !important; }
.sra-head__inner { max-width: var(--wide); margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .sra-head__inner--photo { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }
.sra-head h1 { margin-bottom: .5em; }
.sra-head .sra-lead { margin-bottom: 0; }
.sra-head__fig { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--grey-2); }
.sra-head__fig img { width: 100%; height: 100%; object-fit: cover; }
.sra-crumbs { font-family: var(--display); font-weight: 500; font-size: .9rem; color: var(--ink-3); margin: 0 0 1rem; }
.sra-crumbs a { color: var(--ink-3); text-decoration: none; }
.sra-crumbs a:hover { text-decoration: underline; }

/* ---------- cards: services, who we serve ---------- */
.sra-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1.75rem 1.5rem; }
.sra-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.sra-band--grey .sra-card { border-color: transparent; }
.sra-card__fig { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey-2); position: relative; }
.sra-card__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sra-card:hover .sra-card__fig img { transform: scale(1.035); }
.sra-card__fig::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--dash); transition: width .35s ease; }
.sra-card:hover .sra-card__fig::after, .sra-card:focus-visible .sra-card__fig::after { width: 100%; }
.sra-card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.sra-card h3 { margin-bottom: .4rem; }
.sra-card p { color: var(--ink-2); margin: 0 0 1rem; }
.sra-card .sra-more { margin-top: auto; align-self: flex-start; }
/* Five service cards, never an empty slot: 1 column on phones; 2 + 2 + 1 wide; from 900 two large over three. */
.sra-cards--5 { grid-template-columns: 1fr; gap: 2.5rem 1.75rem; }
@media (min-width: 560px) {
	.sra-cards--5 { grid-template-columns: repeat(2, 1fr); }
	.sra-cards--5 > :nth-child(5) { grid-column: 1 / -1; }
	.sra-cards--5 > :nth-child(5) .sra-card__fig { aspect-ratio: 5 / 2; }
}
@media (min-width: 900px) {
	.sra-cards--5 { grid-template-columns: repeat(6, 1fr); gap: 3.25rem 2rem; }
	.sra-cards--5 > * { grid-column: span 2; }
	.sra-cards--5 > :nth-child(-n+2) { grid-column: span 3; }
	.sra-cards--5 > :nth-child(-n+2) .sra-card__fig { aspect-ratio: 16 / 9; }
	.sra-cards--5 > :nth-child(5) { grid-column: span 2; }
	.sra-cards--5 > :nth-child(5) .sra-card__fig { aspect-ratio: 3 / 2; }
}
.sra-serve { display: grid; gap: 3rem; }
.sra-serve__item { display: grid; grid-template-columns: 1fr; gap: 1.5rem 3.5rem; align-items: center; }
@media (min-width: 900px) { .sra-serve__item { grid-template-columns: 1fr 1fr; } .sra-serve__item:nth-child(even) .sra-serve__fig { order: 2; } }
.sra-serve__fig { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--grey-2); }
.sra-serve__fig img { width: 100%; height: 100%; object-fit: cover; }
.sra-serve__item h3 { font-size: 1.55rem; }
.sra-serve__item p:last-child { margin-bottom: 0; }

/* ---------- photo pairs and figures ---------- */
.sra-pair { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 2rem 0; }
@media (min-width: 700px) { .sra-pair { grid-template-columns: 1fr 1fr; } }
.sra-fig { margin: 0; }
.sra-fig__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--grey-2); }
.sra-fig__img img { width: 100%; height: 100%; object-fit: cover; }
.sra-fig figcaption { font-family: var(--display); font-weight: 500; font-size: .92rem; color: var(--ink-3); margin-top: .55rem; }
.sra-fig--wide .sra-fig__img { aspect-ratio: 16 / 9; }
.sra-fig--natural .sra-fig__img { aspect-ratio: auto; border-radius: 2px; background: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .1); }
.sra-fig--natural .sra-fig__img img { height: auto; display: block; }
.sra-fig--natural figcaption { margin-top: .8rem; }

/* ---------- gallery ---------- */
.sra-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 700px) { .sra-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.sra-grid__item { margin: 0; }
.sra-grid__item a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--grey-2); position: relative; }
.sra-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sra-grid__item a:hover img { transform: scale(1.035); }
.sra-grid__item a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--dash); transition: width .35s; }
.sra-grid__item a:hover::after, .sra-grid__item a:focus-visible::after { width: 100%; }
.sra-grid__item figcaption { font-family: var(--display); font-weight: 500; font-size: .9rem; color: var(--ink-3); margin-top: .45rem; }
/* The viewer is one fixed-size stage, so Previous / Next / Close never move from photo to photo (3.0.10, Josh 11-11). */
.sra-lb { border: 0; padding: 0; background: transparent; width: min(96vw, 1400px); max-width: none; height: 94vh; height: 94dvh; max-height: none; overflow: hidden; color: #fff; }
.sra-lb::backdrop { background: rgba(10, 10, 12, .92); }
.sra-lb__box { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; }
.sra-lb__img { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; object-fit: contain; }
.sra-lb__cap { flex: none; min-height: 1.5em; font-family: var(--display); font-weight: 500; margin: .8rem 0 .2rem; text-align: center; color: rgba(255, 255, 255, .9); }
.sra-lb__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .45); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sra-lb__btn .sra-ico { width: 1.3rem; height: 1.3rem; }
.sra-lb__prev { left: .5rem; } .sra-lb__next { right: .5rem; }
.sra-lb__close { position: absolute; top: .5rem; right: .5rem; transform: none; }
@media (max-width: 699px) { .sra-lb__btn { width: 2.4rem; height: 2.4rem; } }

/* ---------- customers, licensing, contact card, placeholder ---------- */
.sra-names { list-style: none; margin: 0; padding: 1.5rem 1.75rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); display: grid; grid-template-columns: 1fr; gap: .55rem 2rem; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
@media (min-width: 600px) { .sra-names { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .sra-names { grid-template-columns: 1fr 1fr 1fr; } }
.sra-names li { padding-left: 1.1rem; position: relative; }
.sra-names li::before { content: ""; position: absolute; left: 0; top: .72em; width: .5rem; height: 3px; background: var(--yellow-deep); }
.sra-lic { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.5rem 0 0; }
@media (min-width: 700px) { .sra-lic { grid-template-columns: repeat(3, 1fr); } }
.sra-lic > div { border: 1px solid var(--rule); border-radius: var(--r); padding: 1.1rem 1.25rem; background: var(--paper); }
.sra-lic dt { font-family: var(--display); font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .3rem; }
.sra-lic dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.sra-lic dd small { display: block; font-family: var(--body); font-weight: 400; font-size: .95rem; color: var(--ink-2); margin-top: .15rem; }
.sra-ccard { border: 1px solid var(--rule); border-radius: var(--r); padding: 1.5rem 1.6rem; background: var(--paper); }
.sra-ccard__big { font-family: var(--display); font-weight: 700; font-size: 1.7rem; margin: 0 0 1rem; }
.sra-ccard__big a { text-decoration: none; }
.sra-ccard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.sra-ccard__list li { display: flex; gap: .7rem; align-items: flex-start; }
.sra-ccard__list .sra-ico { margin-top: .3rem; color: var(--ink-3); }
.sra-ccard__list a { text-decoration: none; }
.sra-ccard__list a:hover { text-decoration: underline; }
.sra-hold { aspect-ratio: 4 / 3; border: 2px dashed var(--rule); border-radius: var(--r); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; color: var(--ink-3); font-family: var(--display); font-weight: 500; background: var(--grey); }

/* ---------- service area ---------- */
.sra-area { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .sra-area--home { grid-template-columns: 1.3fr .7fr; gap: 3.5rem; align-items: center; } }
.sra-area__map { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); }
.sra-area__map img { width: 100%; }
.sra-cities { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; font-family: var(--display); font-weight: 500; }
@media (min-width: 700px) { .sra-cities { columns: 3; } }
@media (min-width: 900px) { .sra-cities { columns: 4; } }
.sra-cities li { padding: .2rem 0; break-inside: avoid; }

/* ---------- CTA band ---------- */
.sra-cta { background: var(--dark); color: #fff; padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--gut) !important; }
.sra-cta__inner { max-width: var(--wide); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.sra-cta__inner > div:first-child { flex: 1 1 28rem; }
.sra-cta h2 { color: #fff; margin-bottom: .4em; }
.sra-cta p { color: rgba(255, 255, 255, .85); margin: 0; max-width: 40rem; font-size: 1.1rem; }
.sra-cta .sra-actions { margin-top: 0; }
.sra-cta .sra-dash { margin-bottom: 1rem; }

/* ---------- forms (Ninja Forms, styled here) ---------- */
.sra-form { margin: 1.5rem 0 0; }
.sra-nf .nf-form-fields-required { color: var(--ink-3); font-size: .95rem; margin: 0 0 1rem; }
.sra-nf .nf-field-container { margin-bottom: 1.15rem; }
.sra-nf .nf-field-label label { font-family: var(--display); font-weight: 600; font-size: 1rem; margin-bottom: .35rem; display: block; }
.sra-nf .nf-field-label .ninja-forms-req-symbol { color: var(--ink-3); }
.sra-nf .nf-field-element input:not([type="submit"]):not([type="button"]), .sra-nf .nf-field-element textarea, .sra-nf .nf-field-element select { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--ink-3); border-radius: var(--r); padding: .7rem .85rem; }
.sra-nf .nf-field-element textarea { min-height: 9rem; }
.sra-nf .nf-field-element input:focus, .sra-nf .nf-field-element textarea:focus, .sra-nf .nf-field-element select:focus { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--yellow); }
.sra-nf .nf-field-description { font-size: .92rem; color: var(--ink-3); margin-top: .3rem; }
.sra-nf .sra-nf-note { margin: .25rem 0 0; color: var(--ink-2); }
.sra-nf .nf-field-container.html-container { margin-bottom: .6rem; }
.sra-nf .nf-field-container:has(.nf-error-msg) .nf-field-element input, .sra-nf .nf-field-container:has(.nf-error-msg) .nf-field-element textarea { border-color: #B3261E; border-width: 2px; }
.sra-cities-text { font-size: .98rem; color: var(--ink-2); margin: 1rem 0 0; }
.sra-nf .nf-error-msg, .sra-nf .nf-form-errors .nf-error-msg { color: #B3261E; font-weight: 600; margin-top: .3rem; }
.sra-nf input[type="button"], .sra-nf input[type="submit"] { font-family: var(--display); font-weight: 600; font-size: 1.05rem; background: var(--yellow); color: var(--ink); border: 2px solid var(--yellow); border-radius: var(--r); padding: .85rem 1.6rem; cursor: pointer; transition: background-color .15s, color .15s; }
.sra-nf input[type="button"]:hover, .sra-nf input[type="submit"]:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.sra-nf .nf-field-container.sra-half { display: inline-block; width: calc(50% - .6rem); vertical-align: top; }
.sra-nf .nf-field-container.sra-half + .sra-half { margin-left: 1.2rem; }
@media (max-width: 599px) { .sra-nf .nf-field-container.sra-half { display: block; width: 100%; } .sra-nf .nf-field-container.sra-half + .sra-half { margin-left: 0; } }
.sra-nf .nf-field-container.sra-hp { position: absolute !important; left: -9999px; }
.sra-success { border: 1px solid var(--rule); border-left: 5px solid var(--ok); border-radius: var(--r); padding: 1.5rem 1.75rem; background: var(--paper); }
.sra-success__h { font-size: 1.5rem; margin-bottom: .4em; display: flex; gap: .6rem; align-items: center; }
.sra-success__h .sra-ico { color: var(--ok); width: 1.4rem; height: 1.4rem; }
.sra-success p:last-child { margin-bottom: 0; }
.sra-contact { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .sra-contact { grid-template-columns: 1.2fr .8fr; gap: 4rem; } .sra-contact__side { position: sticky; top: 5.5rem; } }
.sra-contact__side > * + * { margin-top: 1.25rem; }

/* ---------- footer ---------- */
.sra-foot { background: var(--dark); color: rgba(255, 255, 255, .86); padding: clamp(3rem, 2rem + 3vw, 4.5rem) var(--gut) 1.5rem !important; }
.sra-foot a { color: #fff; }
.sra-foot__inner { max-width: var(--wide); margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: 2.5rem 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, .15); }
@media (min-width: 700px) { .sra-foot__inner { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .sra-foot__inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.sra-foot .sra-logo { height: 3.1rem; color: #fff; }
.sra-foot a.sra-btn--quote { color: var(--ink); }
.sra-foot a.sra-btn--quote:hover { background: #fff; border-color: #fff; color: var(--ink); }
.sra-foot__tag { margin: 1.1rem 0 1.25rem; max-width: 24rem; color: rgba(255, 255, 255, .8); }
.sra-foot__h { font-family: var(--display); font-weight: 600; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin: 0 0 .9rem; }
.sra-foot__col > .sra-foot__h ~ .sra-foot__h { margin-top: 1.6rem; }
.sra-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sra-foot__list li { display: flex; gap: .6rem; align-items: flex-start; }
.sra-foot__list .sra-ico { margin-top: .28rem; color: var(--yellow); }
.sra-foot__list a { text-decoration: none; }
.sra-foot__list a:hover { text-decoration: underline; }
.sra-foot__base { max-width: var(--wide); margin: 1.25rem auto 0; display: flex; flex-wrap: wrap; gap: .4rem 2rem; justify-content: space-between; font-size: .95rem; color: rgba(255, 255, 255, .75); }
.sra-foot__base p { margin: 0; }
.sra-foot__base a.sra-credit { color: rgba(255, 255, 255, .85); text-decoration: underline; text-underline-offset: .18em; text-decoration-color: rgba(255, 255, 255, .55); }
.sra-foot__base a.sra-credit:hover, .sra-foot__base a.sra-credit:focus { text-decoration-color: #fff; }

/* ---------- reveal on scroll ---------- */
[data-sra-anim] { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
[data-sra-anim].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-sra-anim] { opacity: 1; transform: none; transition: none; }
	.sra-hero__slide { transition: none; }
	.sra-nav [class*="responsive-container"], .sra-nav [class*="responsive-container-"]::before, .sra-nav [class*="responsive-container-"]::after { animation: none !important; transition: none !important; }
	.sra-hero__slide.is-on img, .sra-hero__slide.is-out img { animation: none; }
	.sra-card__fig img, .sra-grid__item img { transition: none; }
}

/* ---------- misc content ---------- */
.sra-main--plain { padding: 3rem var(--gut) 4rem !important; }
.sra-main--plain > * { max-width: var(--text); margin-inline: auto !important; }
.sra-note { border-left: 4px solid var(--yellow); background: var(--grey); padding: 1rem 1.25rem; border-radius: 0 var(--r) var(--r) 0; }
.sra-note p:last-child { margin-bottom: 0; }

/* ===================================================================================================================
   v5 "Clean Line" (2026-11-11). Tim's notes: simple and refined, generous white space, restrained colour, large real
   photos, clear navigation, prominent phone and Request a Quote, nothing excessive. So: wider measure and taller bands,
   photos without boxes around them, section headings set beside their intro text, and the logo's horizon line used
   once per page (home hero, inner page head). Section labels carry a short plain paint stripe instead.
   =================================================================================================================== */
:root { --wide: 80rem; --grey: #F5F5F2; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); letter-spacing: -.015em; }
h2 { font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.75rem); letter-spacing: -.012em; }
.sra-kicker { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.sra-kicker::before { content: ""; flex: none; width: 1.75rem; height: 3px; background: var(--yellow-deep); }
.sra-sec--c .sra-kicker { justify-content: center; }
.sra-band { padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem) !important; }
.sra-band--tight { padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 4rem) !important; }
.sra-sec { margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.sra-sec h2 { margin-bottom: .6rem; }
.sra-col .sra-sec { margin-bottom: 1.25rem; }
@media (min-width: 1000px) {
	.sra-band > .sra-sec--split > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4.5rem; align-items: end; }
	.sra-band > .sra-sec--split .sra-kicker { grid-column: 1 / -1; }
	.sra-band > .sra-sec--split h2 { margin-bottom: 0; }
	.sra-band > .sra-sec--split .sra-lead { margin: 0 0 .3rem; max-width: none; }
}

/* hero: a little taller, the type a little larger */
.sra-hero { height: clamp(27rem, 78vh, 50rem); }
.sra-hero__text > * { max-width: 46rem; }
@media (max-width: 899px) { .sra-hero { height: clamp(24rem, 68svh, 38rem); } }

/* page head: white, closed with a hairline */
.sra-head { background: var(--paper); border-bottom: 1px solid var(--rule); }
.sra-head__fig { aspect-ratio: 3 / 2; }

/* cards: the photo, then the words; no box */
.sra-cards { gap: 2.5rem 2rem; }
.sra-card, .sra-band--grey .sra-card { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.sra-card__fig { border-radius: var(--r); aspect-ratio: 3 / 2; }
.sra-card__body { padding: 1.15rem 0 0; }
.sra-card h3 { font-size: 1.4rem; margin-bottom: .45rem; text-decoration: underline transparent; text-decoration-thickness: 3px; text-underline-offset: .22em; transition: text-decoration-color .18s; }
.sra-card:hover h3, .sra-card:focus-visible h3 { text-decoration-color: var(--yellow); }
.sra-card p { max-width: 34rem; }
.sra-card .sra-more { border-bottom: 0; padding-bottom: 0; }
.sra-card .sra-more .sra-ico { transition: transform .2s; }
.sra-card:hover .sra-more .sra-ico { transform: translateX(4px); }

/* home: selected projects, the first photo large */
.sra-grid { gap: 1.5rem 1.25rem; }
@media (min-width: 700px) {
	.sra-grid { gap: 2rem 1.75rem; }
	.sra-grid--feature > :first-child { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
	.sra-grid--feature > :first-child a { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
	.sra-grid--feature > :first-child img { position: absolute; inset: 0; }
}
@media (max-width: 699px) { .sra-grid--feature > :first-child { grid-column: 1 / -1; } .sra-grid--feature > :first-child a { aspect-ratio: 3 / 2; } }

/* service area on the home page: the map gets the room */
@media (min-width: 900px) { .sra-area--home { grid-template-columns: 1.45fr .55fr; gap: 4rem; } }
.sra-area--home h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); }

/* call to action: light, large, so the footer is the page's one dark block */
.sra-cta { background: var(--grey); color: var(--ink); border-top: 1px solid var(--rule); padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem) !important; }
.sra-band--grey + .sra-cta, .wp-block-group.sra-band--grey + .sra-cta { background: var(--paper); }
.sra-cta h2 { color: var(--ink); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); }
.sra-cta p { color: var(--ink-2); font-size: 1.15rem; }
.sra-cta .sra-btn { font-size: 1.1rem; padding: .95rem 1.5rem; }
.sra-cta :where(a):focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 6px var(--yellow); }
@media (prefers-reduced-motion: reduce) { .sra-card h3, .sra-card .sra-more .sra-ico { transition: none; } }