/*
Theme Name: Sierra Asphalt: Hot Mat
Author: Dependent Media
Description: Block theme for sierraasphalt.com (rebuild 2026-10): dawn over the Sierra, a paving train laying a hot mat, parking-stall services, a resurfacing roller, pavement cross-section, service-area map.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: sra-hotmat
*/

/* ===================================================================================================================
   Hot Mat. Fresh asphalt black, logo yellow, stripe white, cone orange, ADA blue, Sierra granite and dawn.
   Loops are keyframe animations (paused by html.sra-paused); entrances are transitions keyed off .is-in.
   =================================================================================================================== */
:root {
	--mat: #141518; --mat-2: #1F2125; --mat-3: #2A2C31; --worn: #4A4B50; --base: #B4A180; --concrete: #EEECE6; --paper: #F8F7F3;
	--line: #FFE500; --machine: #F2BE00; --cone: #FF6A13; --cone-ink: #B4440B; --ada: #1F5FBF; --white: #fff;
	--sierra: #516580; --pine: #203A2E; --dawn: #F6CB8E; --ink-2: #4A4B50;
	--display: Anton, Impact, "Arial Narrow Bold", sans-serif; --stencil: "Saira Stencil One", Impact, sans-serif;
	--body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--gut: clamp(1rem, 4vw, 2.5rem); --wide: 80rem; --r: 10px;
	--agg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.62'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E");
	--agg-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -.55'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--concrete); color: var(--mat); font-family: var(--body); overflow-x: clip; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--line); outline-offset: 3px; box-shadow: 0 0 0 6px var(--mat); border-radius: 4px; }
.sra-band--paper :where(a, button, input, select, textarea):focus-visible, .sra-main :where(.sra-ccard, .sra-form) :where(a, button, input, select, textarea):focus-visible { outline-color: var(--mat); box-shadow: 0 0 0 6px var(--line); }
.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(--line); color: var(--mat); padding: .7rem 1.1rem; border-radius: 6px; font-weight: 700; text-decoration: none; }
.sra-skip:focus { top: .75rem; }
.sra-ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.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; }
.sra-main > .wp-block-post-content > :where(p, h2, h3, ul, ol) { margin-block: 1.1rem; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- type helpers, buttons ---------- */
.sra-kicker { font-family: var(--stencil); color: var(--cone-ink); text-transform: uppercase; letter-spacing: .08em; font-size: clamp(.95rem, .85rem + .4vw, 1.15rem); margin: 0 0 .6rem; }
.sra-hero .sra-kicker, .sra-head .sra-kicker, .sra-band--mat .sra-kicker { color: var(--line); }
.sra-kicker--ink { color: var(--cone-ink) !important; }
.sra-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.sra-btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--stencil); font-size: 1.12rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; padding: .78rem 1.25rem .72rem; border-radius: 6px; border: 3px solid transparent; line-height: 1.1; cursor: pointer; transition: transform .15s, box-shadow .15s, background-color .15s; }
.sra-btn:hover { transform: translateY(-2px); }
.sra-btn--sun { background: var(--line); color: var(--mat); box-shadow: 0 5px 0 #B49D00; }
.sra-btn--sun:hover { box-shadow: 0 7px 0 #B49D00; }
.sra-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .7); }
.sra-btn--ghost:hover { border-color: var(--line); color: var(--line); }
.sra-btn--line { color: var(--line); border-color: var(--line); }
.sra-btn--ink { background: var(--mat); color: var(--line); box-shadow: 0 5px 0 rgba(0, 0, 0, .35); }
.sra-btn--inkline { color: var(--mat); border-color: var(--mat); }

/* ---------- full-width bands used by the pages ---------- */
.sra-band { padding: clamp(3rem, 2rem + 5vw, 6rem) var(--gut) !important; position: relative; }
.sra-band > * { max-width: var(--wide); margin-inline: auto !important; }
.sra-band > :where(p, h2, h3, ul.wp-block-list, ol.wp-block-list, .wp-block-heading, div.sra-actions) { max-width: 46rem; margin-left: auto !important; margin-right: auto !important; }
.sra-band--mat { background: var(--mat) var(--agg); color: #E9E7E1; }
.sra-band--mat a { color: #fff; }
.sra-band--mat h2, .sra-band--mat h3 { color: #fff; }
.sra-band--paper { background: var(--paper); }
.sra-band--concrete { background: var(--concrete) var(--agg-dark); }
.sra-band--base { background: #D9CDB4 var(--agg-dark); }
.sra-band--yellow { background: var(--line); color: var(--mat); }
.sra-band--tight { padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem) !important; }
.sra-band h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); margin: 0 0 1rem; letter-spacing: .01em; }
.sra-band .sra-lede { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.sra-center { text-align: center; }
.sra-2col { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .sra-2col { grid-template-columns: 1.1fr .9fr; } .sra-2col--even { grid-template-columns: 1fr 1fr; } .sra-2col--narrow-left { grid-template-columns: .8fr 1.2fr; } }
.sra-2col > * { margin: 0; }
.sra-2col p:first-child, .sra-2col h2:first-child { margin-top: 0; }
.sra-double { height: 14px; border: 0; margin: 0 auto !important; max-width: var(--wide); background: linear-gradient(var(--line) 0 4px, transparent 4px 10px, var(--line) 10px 14px); }

/* ---------- top strip + header ---------- */
.sra-strip { background: #0C0D0F; color: #D6D3CB; font-size: .9rem; padding: .4rem var(--gut) !important; }
.sra-strip__row { max-width: var(--wide); margin: 0 auto; display: flex; gap: 1.25rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.sra-strip__row > span { display: inline-flex; align-items: center; gap: .4rem; }
.sra-strip__row .sra-open { margin-right: auto; }
.sra-strip a { color: #fff; text-decoration: none; font-weight: 600; }
.sra-strip a:hover { color: var(--line); }
.sra-strip .sra-ico { color: var(--line); }
@media (max-width: 640px) { .sra-strip__lic { display: none !important; } .sra-strip__row { gap: .6rem; } }
.sra-open__lamp { width: .8rem; height: .8rem; border-radius: 50%; background: #5B5D63; display: inline-block; flex: none; }
.sra-open.is-open .sra-open__lamp { background: #FF9A1F; box-shadow: 0 0 0 0 rgba(255, 154, 31, .8); animation: sra-beacon-ring 1.6s ease-out infinite; }
@keyframes sra-beacon-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 154, 31, .75); } 100% { box-shadow: 0 0 0 10px rgba(255, 154, 31, 0); } }

.sra-header { background: var(--mat) var(--agg); color: #fff; padding: .55rem var(--gut) !important; position: relative; z-index: 30; }
.sra-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(var(--line) 0 3px, var(--mat) 3px 7px, var(--line) 7px 10px); }
.sra-header__row { gap: 1rem; align-items: center; }
.sra-brand { display: block; width: clamp(170px, 14vw + 90px, 236px); flex: none; line-height: 0; }
.sra-logo { width: 100%; height: auto; overflow: visible; }
.sra-logo__horizon, .sra-logo__peak, .sra-logo__rule { fill: var(--line); }
.sra-logo__word { font-family: var(--body); font-weight: 800; font-size: 31px; letter-spacing: .5px; fill: #fff; }
.sra-logo__cap { font-size: 38px; }
.sra-logo__small { font-family: var(--body); font-weight: 700; font-size: 10.5px; letter-spacing: 2.2px; fill: #fff; }
.sra-brand:hover .sra-logo__peak { animation: sra-peak-hop .5s ease-out 1; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sra-peak-hop { 40% { transform: translateY(-4px) scaleY(1.15); } }

.sra-nav { font-weight: 600; font-size: 1rem; }
.sra-nav .wp-block-navigation__container { gap: .1rem; }
.sra-nav .wp-block-navigation-item__content { padding: .45rem .7rem !important; border-radius: 6px; color: #fff; text-decoration: none; }
.sra-nav .wp-block-navigation-item__content:hover { color: var(--line); }
.sra-nav .is-current > .wp-block-navigation-item__content, .sra-nav .is-section > .wp-block-navigation-item__content { color: var(--line); box-shadow: inset 0 -3px 0 var(--line); border-radius: 0; }
/* Submenus (Josh: small dropdowns, text under the parent's text, open to the right, hover bridge). */
.sra-nav .wp-block-navigation-submenu { position: relative; }
.sra-nav .wp-block-navigation__submenu-icon { margin-left: -.35rem !important; width: .7em; height: .7em; color: var(--line); }
.sra-nav .wp-block-navigation__submenu-container { left: 0 !important; top: 100% !important; min-width: 14.5rem !important; background: var(--mat-2) !important; border: 0 !important; border-top: 3px solid var(--line) !important; border-radius: 0 0 8px 8px; padding: .4rem 0 !important; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .6); }
.sra-nav .wp-block-navigation__submenu-container::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.sra-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .5rem .7rem !important; display: block; width: 100%; }
.sra-nav .wp-block-navigation__responsive-container-open, .sra-nav .wp-block-navigation__responsive-container-close { width: 2.9rem; height: 2.9rem; border-radius: 6px; background: var(--line); color: var(--mat); align-items: center; justify-content: center; }
.sra-nav .wp-block-navigation__responsive-container-open svg, .sra-nav .wp-block-navigation__responsive-container-close svg { fill: currentColor; }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--mat) var(--agg) !important; color: #fff !important; padding: 1.25rem; }
.sra-nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; padding-top: 3.5rem !important; }
.sra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: .2rem !important; align-items: flex-start !important; }
.sra-nav .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; }
.sra-nav .is-menu-open .wp-block-navigation-item__content { font-family: var(--display); text-transform: uppercase; font-size: clamp(2rem, 1.4rem + 4vw, 3.2rem) !important; font-weight: 400; line-height: 1.05; padding: .1rem 0 !important; }
.sra-nav .is-menu-open .wp-block-navigation__submenu-container { border-top: 0 !important; background: transparent !important; box-shadow: none; padding: 0 0 .4rem 1rem !important; }
.sra-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-family: var(--body); text-transform: none; font-size: 1.15rem !important; padding: .25rem 0 !important; color: #D6D3CB; }
.sra-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none; }
.sra-nav .is-menu-open .wp-block-navigation__container::after { content: ""; display: block; width: 8rem; height: 6px; margin-top: 1rem; background: repeating-linear-gradient(90deg, var(--line) 0 2rem, transparent 2rem 3rem); }
@media (min-width: 600px) and (max-width: 1099px) {
	.sra-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.sra-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
	.sra-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex !important; }
}
@media (max-width: 1099px) { .sra-header__row > .sra-nav { margin-left: auto !important; } }
@media (min-width: 1100px) and (max-width: 1260px) { .sra-nav { font-size: .95rem; } .sra-nav .wp-block-navigation-item__content { padding: .4rem .45rem !important; } }
.sra-head-btn { font-family: var(--stencil); text-transform: uppercase; letter-spacing: .04em; background: var(--line); color: var(--mat); padding: .6rem .95rem .55rem; border-radius: 6px; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 0 #B49D00; transition: transform .15s; }
.sra-head-btn:hover { transform: translateY(-2px); }
@media (max-width: 520px) { .sra-head-btn__long { display: none; } .sra-head-btn { padding: .55rem .7rem .5rem; font-size: .95rem; } }
@media (max-width: 380px) { .sra-brand { width: 150px; } }

/* ---------- hero ---------- */
.sra-hero { position: relative; display: flex; flex-direction: column; overflow: hidden; color: #fff; background: linear-gradient(180deg, #0A1220 0%, #12203A 38%, #1F3355 62%, #34496B 82%, #4E5F80 100%); margin-top: 10px; }
.sra-hero__text { position: relative; z-index: 2; width: 100%; max-width: var(--wide); margin: 0 auto; padding: clamp(2rem, 1.4rem + 3vw, 3.6rem) var(--gut) 0; box-sizing: border-box; }
.sra-hero__text > * { max-width: 44rem; }
.sra-hero__h { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.9rem, 1.6rem + 5.2vw, 5.6rem); line-height: .95; margin: 0; letter-spacing: .005em; }
.sra-hero__h span { display: block; color: var(--line); }
.sra-hero__lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.5; color: #E3E6EE; margin: 1rem 0 0; max-width: 40rem; }
.sra-scene { position: relative; z-index: 1; display: block; width: 100%; height: 300px; margin-top: -2.5rem; flex: none; }
@media (min-width: 700px) { .sra-scene { height: auto; aspect-ratio: 1600 / 470; margin-top: -4vw; } }
.sra-scene__brand { font-family: var(--stencil); font-size: 15px; fill: #1C1D21; letter-spacing: 1px; }
.sra-scene__brand--big { font-size: 20px; }
.sra-train { --rest: 760px; transform: translateX(var(--rest)) translateY(616px); }
@media (max-width: 700px) { .sra-train { --rest: 660px; } }
html.sra-js .sra-scene:not(.is-in) .sra-train { transform: translateX(calc(var(--rest) - 1150px)) translateY(616px); }
html.sra-js .sra-scene.is-in .sra-train { animation: sra-drive 6s cubic-bezier(.22, .7, .25, 1) .1s both; }
@keyframes sra-drive { from { transform: translateX(calc(var(--rest) - 1150px)) translateY(616px); } to { transform: translateX(var(--rest)) translateY(616px); } }
.sra-train-push { transform: translateX(var(--sra-push, 0px)); }
.sra-steam path { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: sra-steam 3.6s ease-out infinite; animation-delay: calc(var(--i) * -.45s); }
@keyframes sra-steam { 0% { opacity: 0; transform: translateY(8px) scale(.6, .5); } 25% { opacity: .55; } 100% { opacity: 0; transform: translateY(-46px) scale(1.25, 1.1); } }
.sra-smoke circle { opacity: 0; animation: sra-smoke 2.4s ease-out infinite; animation-delay: calc(var(--i) * -.8s); transform-box: fill-box; transform-origin: center; }
@keyframes sra-smoke { 0% { opacity: .0; transform: translate(0, 0) scale(.6); } 20% { opacity: .55; } 100% { opacity: 0; transform: translate(-28px, -46px) scale(2.2); } }
.sra-beacon { animation: sra-beacon 1.1s steps(2, jump-none) infinite; }
.sra-beacon__glow { animation: sra-glow 1.1s steps(2, jump-none) infinite; }
@keyframes sra-beacon { 0%, 49% { fill: #FFB443; } 50%, 100% { fill: #9A5300; } }
@keyframes sra-glow { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.sra-tread { animation: sra-tread .5s linear infinite; }
@keyframes sra-tread { to { stroke-dashoffset: -14; } }
.sra-roller__move { animation: sra-roll 4.2s ease-in-out infinite alternate; }
@keyframes sra-roll { from { transform: translateX(0); } to { transform: translateX(-120px); } }
.sra-drum { animation: sra-drum 4.2s ease-in-out infinite alternate; transform-box: view-box; }
@keyframes sra-drum { from { transform: rotate(0); } to { transform: rotate(-191deg); } }
.sra-lute { transform-box: fill-box; transform-origin: 0 0; animation: sra-lute 1.8s ease-in-out infinite alternate; }
@keyframes sra-lute { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
.sra-sun { animation: sra-sunrise 7s ease-out both; }
@keyframes sra-sunrise { from { transform: translateY(70px); } to { transform: translateY(0); } }
.sra-sun__glow { transform-box: fill-box; transform-origin: center; animation: sra-breathe 5s ease-in-out infinite alternate; }
@keyframes sra-breathe { to { transform: scale(1.12); opacity: .8; } }
.sra-chevron { stroke-dasharray: 200; stroke-dashoffset: 200; animation: sra-draw 1.4s ease-out 2.2s forwards; }
@keyframes sra-draw { to { stroke-dashoffset: 0; } }
.sra-birds { animation: sra-birds 46s linear infinite; }
@keyframes sra-birds { from { transform: translate(-120px, 150px); } to { transform: translate(1700px, 90px); } }
.sra-seal { position: absolute; z-index: 2; right: clamp(1.5rem, 6vw, 7rem); top: clamp(2rem, 6vw, 4.5rem); width: clamp(120px, 11vw, 170px); }
.sra-seal svg { width: 100%; display: block; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.sra-seal__ring { transform-origin: 100px 100px; animation: sra-spin 26s linear infinite; }
.sra-seal__ring text { font-family: var(--stencil); font-size: 15px; letter-spacing: 1.2px; fill: var(--line); }
.sra-seal__year { font-family: var(--display); font-size: 30px; fill: var(--mat); }
@keyframes sra-spin { to { transform: rotate(360deg); } }
@media (max-width: 899px) { .sra-seal { display: none; } }

/* ---------- inner page head: the striper paints the line under the title ---------- */
.sra-head { position: relative; overflow: hidden; background: var(--mat) var(--agg); color: #fff; margin-top: 10px; padding: clamp(2.5rem, 1.8rem + 4vw, 5rem) var(--gut) clamp(2.2rem, 1.5rem + 3vw, 4rem); }
.sra-head__inner { max-width: var(--wide); margin: 0 auto; position: relative; z-index: 2; }
.sra-head__h { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem); line-height: .98; margin: 0; max-width: 18ch; }
.sra-head__h span { color: var(--line); }
.sra-head__lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); color: #D9D7D0; max-width: 44rem; margin: 1.3rem 0 0; }
.sra-paint { position: relative; height: 12px; width: min(100%, 34rem); margin-top: 1.1rem; }
.sra-paint__line { position: absolute; inset: 0; background: var(--line); transform-origin: 0 50%; }
.sra-paint__rig { position: absolute; bottom: -14px; left: 100%; width: 74px; transform: translateX(-88%); }
.sra-striper { display: block; width: 100%; height: auto; overflow: visible; }
.sra-striper__t { font-family: var(--stencil); font-size: 9px; fill: var(--mat); }
.sra-striper__lamp { animation: sra-glow 1s steps(2, jump-none) infinite; }
html.sra-js .sra-head:not(.is-in) .sra-paint__line { transform: scaleX(0); }
html.sra-js .sra-head:not(.is-in) .sra-paint__rig { left: 0; }
html.sra-js .sra-head .sra-paint__line { transition: transform 2.4s linear .3s; }
html.sra-js .sra-head .sra-paint__rig { transition: left 2.4s linear .3s; }
.sra-head.is-painting .sra-striper__spray { animation: sra-spray .18s linear infinite; }
@keyframes sra-spray { 50% { opacity: .3; transform: translateY(1px); } }
.sra-head__art { position: absolute; z-index: 1; right: clamp(1rem, 6vw, 7rem); bottom: 0; display: flex; align-items: flex-end; gap: .4rem; }
.sra-head__art--cones .sra-cone { width: clamp(34px, 4vw, 56px); height: auto; }
.sra-head__art--cones .sra-cone:nth-child(2) { width: clamp(44px, 5vw, 72px); }
.sra-head__art--hat { bottom: 1.2rem; }
.sra-head__art--hat .sra-hat { width: clamp(90px, 10vw, 150px); animation: sra-bob 3s ease-in-out infinite; }
@keyframes sra-bob { 50% { transform: translateY(-8px) rotate(-3deg); } }
@media (max-width: 700px) { .sra-head__art { opacity: .35; } }

/* ---------- reveal on scroll ---------- */
html.sra-js [data-sra-anim]:not(.is-in) .sra-rv, html.sra-js .sra-rv-self[data-sra-anim]:not(.is-in) { opacity: 0; transform: translateY(18px); }

/* ---------- tiles (services hub) ---------- */
.sra-tile { background: #fff; border-radius: 12px; padding: clamp(1.3rem, 1rem + 1.5vw, 2.2rem); border-top: 10px solid var(--mat); box-shadow: 0 18px 34px -26px rgba(0, 0, 0, .55); }
.sra-tile--new { border-top-color: var(--line); }
.sra-tile h2 { margin-top: 0 !important; }
.sra-tile ul { columns: 2 12rem; column-gap: 1.5rem; padding-left: 1.1rem; }
.sra-tile li { margin-bottom: .35rem; break-inside: avoid; }
.sra-more { font-weight: 700; display: inline-flex; gap: .4rem; align-items: center; }

/* ---------- grade stakes ---------- */
.sra-stakes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1rem; }
@media (min-width: 860px) { .sra-stakes { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .sra-stake__wood { min-height: 9.5rem; } .sra-stakes { gap: 1.8rem .8rem; } }
.sra-stake { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 1.6rem; }
.sra-stake__wood { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 6.6rem; min-height: 11.5rem; padding: .9rem .3rem 1rem; background: linear-gradient(90deg, #D8B880, #E8CF9C 40%, #CFAE74); clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); color: #2B2116; box-sizing: border-box; }
.sra-stake__wood strong { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .02em; }
.sra-stake__label { font-family: var(--stencil); text-transform: uppercase; font-size: .74rem; letter-spacing: .03em; margin-top: .5rem; }
.sra-stake__note { margin-top: .7rem; font-size: .95rem; max-width: 13rem; }
.sra-stake__tape { position: absolute; top: 1.2rem; left: 50%; width: 3rem; height: 1rem; transform: translateX(-10%); }
.sra-stake__tape i { position: absolute; left: 0; top: 0; width: 3.2rem; height: .7rem; background: #FF2E8A; border-radius: 0 3px 3px 0; transform-origin: 0 50%; animation: sra-flutter 1.3s ease-in-out infinite alternate; }
.sra-stake__tape i + i { top: .45rem; width: 2.6rem; background: #FF4FA0; animation-duration: 1.05s; animation-delay: -.4s; }
@keyframes sra-flutter { from { transform: rotate(10deg) skewY(6deg) scaleX(.9); } to { transform: rotate(-14deg) skewY(-8deg) scaleX(1.05); } }
.sra-band--mat .sra-stake__note { color: #D9D7D0; }
html.sra-js .sra-stakes .sra-stake__wood { transition: transform .7s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * .15s), opacity .3s calc(var(--i) * .15s); }
html.sra-js .sra-stakes:not(.is-in) .sra-stake__wood { transform: translateY(-60px); opacity: 0; }

/* ---------- services as parking stalls ---------- */
.sra-lot { position: relative; overflow: hidden; background: var(--mat) var(--agg); border-radius: 14px; padding: 1.6rem 1rem; box-shadow: 0 0 0 10px #C9C5BA, 0 0 0 13px #A9A59A; margin-block: 1rem 2rem !important; }
.sra-lot__row { display: grid; grid-template-columns: 1fr; position: relative; }
.sra-stall { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem 1.2rem 1.4rem; min-height: 7.5rem; text-decoration: none; color: #fff; overflow: hidden; transition: background-color .2s; }
.sra-stall__lines i { position: absolute; background: #F6F4EE; transform-origin: 0 0; transition: transform .5s ease-out calc(var(--i) * .3s + .2s), background-color .2s; }
.sra-stall__lines i:first-child { left: 0; right: 0; top: 0; height: 6px; }
.sra-stall__lines i + i { display: none; }
.sra-stall__ico { color: var(--line); }
.sra-stall__ico .sra-ico { width: 2rem; height: 2rem; }
.sra-stall__t { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; line-height: 1.05; }
.sra-stall__d { color: #CFCCC4; font-size: .98rem; max-width: 24rem; }
.sra-stall__stop { position: absolute; right: 1rem; top: 50%; width: 10px; height: 54px; margin-top: -27px; background: #BDB9AF; border-radius: 4px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); }
.sra-stall__park { position: absolute; right: -80px; top: 50%; width: 46px; color: #C9302C; transform: translateY(-50%) rotate(-90deg); transition: right .45s cubic-bezier(.3, 1.3, .5, 1); }
.sra-stall:hover, .sra-stall:focus-visible { background: rgba(255, 229, 0, .06); }
.sra-stall:hover .sra-stall__lines i, .sra-stall:focus-visible .sra-stall__lines i { background: var(--line); }
.sra-stall:hover .sra-stall__park, .sra-stall:focus-visible .sra-stall__park { right: 1.8rem; }
.sra-stall--ada { background: rgba(31, 95, 191, .9); }
.sra-stall--ada .sra-stall__ico { color: #fff; }
.sra-stall--ada .sra-stall__d { color: #E6EEFA; }
.sra-stall--ada:hover, .sra-stall--ada:focus-visible { background: var(--ada); }
.sra-lot__aisle { display: none; }
.sra-lot__rig { position: absolute; top: 2px; left: .5rem; width: 64px; display: none; }
html.sra-js .sra-lot:not(.is-in) .sra-stall__lines i { transform: scaleX(0); }
@media (min-width: 760px) {
	.sra-lot { padding: 2.2rem 1.4rem; }
	.sra-lot__row { grid-template-columns: repeat(4, 1fr); }
	.sra-stall { min-height: 12.5rem; padding: 2rem 1.2rem 3.4rem; }
	.sra-lot__row--b .sra-stall { padding: 3.4rem 1.2rem 2rem; }
	.sra-stall__lines i:first-child { left: 0; right: auto; top: 0; bottom: 0; width: 6px; height: auto; transform-origin: 50% 0; }
	.sra-stall:last-child .sra-stall__lines i + i { display: block; right: 0; top: 0; bottom: 0; width: 6px; transform-origin: 50% 0; }
	.sra-lot__row--b .sra-stall__lines i { transform-origin: 50% 100% !important; }
	html.sra-js .sra-lot:not(.is-in) .sra-stall__lines i { transform: scaleY(0); }
	.sra-stall__stop { right: auto; left: 50%; top: auto; bottom: auto; width: 56%; height: 10px; margin: 0; transform: translateX(-50%); top: .5rem; }
	.sra-lot__row:not(.sra-lot__row--b) .sra-stall__stop { top: auto; bottom: .55rem; display: none; }
	.sra-lot__row--b .sra-stall__stop { top: auto; bottom: .55rem; }
	.sra-lot__row:not(.sra-lot__row--b) .sra-stall__stop { display: block; top: .55rem; bottom: auto; }
	.sra-stall__park { right: auto; left: 50%; top: auto; bottom: -110px; width: 52px; transform: translateX(-50%); transition: bottom .5s cubic-bezier(.3, 1.3, .5, 1); }
	.sra-lot__row--b .sra-stall__park { bottom: auto; top: -110px; transform: translateX(-50%) rotate(180deg); transition: top .5s cubic-bezier(.3, 1.3, .5, 1); }
	.sra-stall:hover .sra-stall__park, .sra-stall:focus-visible .sra-stall__park { right: auto; bottom: -44px; }
	.sra-lot__row--b .sra-stall:hover .sra-stall__park, .sra-lot__row--b .sra-stall:focus-visible .sra-stall__park { top: -44px; bottom: auto; }
	.sra-stall--ada::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 26%; background: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(255, 255, 255, .55) 9px 13px); pointer-events: none; }
	.sra-lot__aisle { display: block; position: relative; height: 5.5rem; overflow: hidden; }
	.sra-lot__aisle::before { content: ""; position: absolute; left: 1rem; right: 1rem; top: 50%; height: 5px; margin-top: -2.5px; background: repeating-linear-gradient(90deg, var(--line) 0 3rem, transparent 3rem 5rem); opacity: .9; }
	.sra-lot__arrow { position: absolute; left: 1.4rem; top: 50%; transform: translateY(-120%); color: #F6F4EE; opacity: .8; }
	.sra-lot__arrow .sra-ico { width: 3rem; height: 3rem; }
	.sra-lot__car { position: absolute; top: calc(50% - 26px); left: 0; width: 40px; line-height: 0; color: #3D6FB6; transform: translateX(-80px) rotate(90deg); animation: sra-cruise 11s linear infinite; }
	.sra-lot__car svg { display: block; }
	.sra-lot__rig { display: block; transition: left 2.4s linear .2s; }
	html.sra-js .sra-lot:not(.is-in) .sra-lot__rig { left: -4rem; }
	html.sra-js .sra-lot.is-in .sra-lot__rig { left: calc(100% - 4.6rem); }
}
@keyframes sra-cruise { 0% { left: 0; } 100% { left: calc(100% + 80px); } }

/* ---------- service cards ---------- */
.sra-svc { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.sra-svc__item { position: relative; background: #fff; border-radius: var(--r); padding: 1.3rem 1.3rem 1.2rem; border-left: 7px solid var(--line); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 12px 24px -18px rgba(0, 0, 0, .35); scroll-margin-top: 6rem; }
.sra-svc__ico { display: inline-flex; width: 2.8rem; height: 2.8rem; align-items: center; justify-content: center; background: var(--mat); color: var(--line); border-radius: 8px; }
.sra-svc__ico .sra-ico { width: 1.6rem; height: 1.6rem; }
.sra-svc__t { font-size: 1.35rem; margin: .7rem 0 .35rem; }
.sra-svc__item p { margin: 0; }
.sra-svc__item:target { box-shadow: 0 0 0 4px var(--line), 0 12px 24px -18px rgba(0, 0, 0, .35); }
html.sra-js .sra-svc .sra-svc__item { transition: transform .5s ease-out calc(var(--i) * .06s), opacity .5s calc(var(--i) * .06s); }
html.sra-js .sra-svc:not(.is-in) .sra-svc__item { transform: translateY(22px); opacity: 0; }

/* ---------- before / after roller ---------- */
.sra-ba { margin: 1rem 0 0; }
.sra-ba__stage { position: relative; aspect-ratio: 20 / 9; border-radius: 12px; overflow: hidden; background: #333; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6); }
@media (max-width: 600px) { .sra-ba__stage { aspect-ratio: 4 / 3; } }
.sra-ba__old, .sra-ba__new { position: absolute; inset: 0; }
.sra-ba__old svg, .sra-ba__new svg { width: 100%; height: 100%; display: block; }
.sra-ba__new { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.sra-ba__tag { position: absolute; top: .8rem; right: .8rem; background: rgba(20, 21, 24, .85); color: #fff; font-family: var(--stencil); text-transform: uppercase; font-size: .9rem; letter-spacing: .04em; padding: .35rem .6rem; border-radius: 4px; }
.sra-ba__tag--new { right: auto; left: .8rem; background: var(--line); color: var(--mat); }
.sra-ba__rig { position: absolute; top: 0; bottom: 0; left: var(--pos); width: clamp(60px, 9vw, 116px); transform: translateX(-50%); pointer-events: none; display: flex; align-items: center; }
.sra-ba__rig::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--line); box-shadow: 0 0 10px rgba(255, 229, 0, .7); }
.sra-ba__roller { position: relative; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.sra-ba.is-rolling .sra-ba__drumlines { animation: sra-drumlines .25s linear infinite; }
@keyframes sra-drumlines { to { transform: translateY(8px); } }
.sra-ba__label { display: block; font-weight: 700; margin: 1rem 0 .35rem; }
.sra-ba__range { width: 100%; accent-color: var(--machine); height: 2.4rem; cursor: grab; }

/* ---------- phases ---------- */
.sra-phases { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .sra-phases { grid-template-columns: 1.2fr .8fr; } }
.sra-phases__lot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #C9C5BA; padding: 6px; border-radius: 10px; }
.sra-phases__zone { position: relative; min-height: 12rem; background: var(--worn) var(--agg); border-radius: 6px; overflow: hidden; animation: sra-phase 9s steps(1) infinite; animation-delay: calc((var(--n) - 1) * 3s - 9s); }
@keyframes sra-phase { 0% { background-color: #2B2C30; } 33.33% { background-color: #141518; } 66.66% { background-color: #141518; } }
.sra-phases__num { position: absolute; left: .6rem; top: .5rem; font-family: var(--stencil); color: #fff; text-transform: uppercase; font-size: .95rem; }
.sra-phases__cones { position: absolute; left: 0; right: 0; bottom: .4rem; display: flex; justify-content: space-around; opacity: 0; animation: sra-cones-on 9s steps(1) infinite; animation-delay: inherit; }
.sra-phases__cones .sra-cone { width: 26px; }
@keyframes sra-cones-on { 0% { opacity: 1; } 33.33% { opacity: 0; } }
.sra-phases__cars { position: absolute; inset: 2.2rem .5rem 3rem; display: grid; grid-template-rows: repeat(3, 1fr); gap: .5rem; animation: sra-cars-off 9s steps(1) infinite; animation-delay: inherit; }
.sra-phases__cars i { display: block; width: 58%; height: 100%; max-height: 1.8rem; border-radius: 7px; background: #E2E0D9; margin-left: auto; }
.sra-phases__cars i:nth-child(2) { background: #C9302C; margin-left: 0; }
.sra-phases__cars i:nth-child(3) { background: #3D6FB6; }
@keyframes sra-cars-off { 0% { opacity: 0; } 33.33% { opacity: 1; } }
.sra-phases__list { margin: 0; padding-left: 1.2rem; }
.sra-phases__list li { margin-bottom: .6rem; }

/* ---------- new construction cross-section ---------- */
.sra-xs { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .sra-xs { grid-template-columns: 1.15fr .85fr; gap: 3rem; } .sra-xs__stick { position: sticky; top: 5.5rem; } }
.sra-xs__fig { position: relative; }
.sra-xs__svg { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .6); background: #E7EEF2; }
@media (max-width: 899px) { .sra-xs__fig { position: sticky; top: 0; z-index: 3; padding-top: .5rem; background: var(--paper); } }
.sra-xs__l { opacity: 0; transition: opacity .4s, transform .6s cubic-bezier(.3, 1.4, .5, 1); transform: translateY(-26px); }
.sra-xs__l[data-l="1"] { opacity: 1; transform: none; }
.sra-xs[data-step="1"] .sra-xs__l[data-l="1"] { animation: sra-crack 1s ease-in 1 forwards; }
.sra-xs:not([data-step="0"]):not([data-step="1"]) .sra-xs__l[data-l="1"] { opacity: 0; }
@keyframes sra-crack { 30% { transform: rotate(-3deg); } 100% { transform: translateY(40px) rotate(6deg); opacity: 0; } }
.sra-xs__dirt { transition: transform .6s; transform-origin: 50% 100%; }
.sra-xs:not([data-step="0"]):not([data-step="1"]) .sra-xs__dirt { transform: scaleY(.4); }
.sra-xs[data-step="2"] .sra-xs__l[data-l="2"], .sra-xs[data-step="3"] .sra-xs__l:is([data-l="2"], [data-l="3"]), .sra-xs[data-step="4"] .sra-xs__l:is([data-l="2"], [data-l="3"], [data-l="4"]),
.sra-xs[data-step="5"] .sra-xs__l:is([data-l="2"], [data-l="3"], [data-l="4"], [data-l="5"]), .sra-xs[data-step="6"] .sra-xs__l:is([data-l="2"], [data-l="3"], [data-l="4"], [data-l="5"], [data-l="6"]),
.sra-xs[data-step="7"] .sra-xs__l:is([data-l="2"], [data-l="3"], [data-l="4"], [data-l="5"], [data-l="6"], [data-l="7"]), .sra-xs[data-step="8"] .sra-xs__l:not([data-l="1"]):not([data-l="9"]), .sra-xs[data-step="9"] .sra-xs__l:not([data-l="1"]) { opacity: 1; transform: none; }
.sra-xs__steam path { animation: sra-steam 3s ease-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.sra-xs__steam path:nth-child(2) { animation-delay: -1s; } .sra-xs__steam path:nth-child(3) { animation-delay: -2s; }
.sra-xs__t, .sra-xs__lab { font-family: var(--stencil); font-size: 15px; fill: #2B2116; }
.sra-xs__lab { fill: #F6F4EE; font-size: 13px; opacity: 0; transition: opacity .4s; }
.sra-xs__lab--lt { fill: #F6F4EE; }
.sra-xs__lab:not([data-l]) { opacity: .9; }
.sra-xs[data-step="3"] .sra-xs__lab[data-l="3"], .sra-xs:is([data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"], [data-step="8"], [data-step="9"]) .sra-xs__lab[data-l="3"],
.sra-xs:is([data-step="6"], [data-step="7"], [data-step="8"], [data-step="9"]) .sra-xs__lab[data-l="6"], .sra-xs:is([data-step="7"], [data-step="8"], [data-step="9"]) .sra-xs__lab[data-l="7"] { opacity: 1; }
.sra-xs__now { margin: .7rem 0 0; font-family: var(--stencil); text-transform: uppercase; letter-spacing: .04em; color: var(--cone-ink); }
.sra-xs__steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.sra-xs__step { position: relative; padding: 1.4rem 0 1.4rem 4.2rem; border-top: 2px dashed #CFCBC2; scroll-margin-top: 7rem; }
.sra-xs__step h3 { color: var(--ink-2); transition: color .3s; }
.sra-xs__step.is-now h3, .sra-xs__step:target h3 { color: var(--mat); }
.sra-xs__step .sra-xs__n { background: #6B6A65; transition: background-color .3s, color .3s; }
.sra-xs__step.is-now .sra-xs__n { background: var(--line); color: var(--mat); }
@media (min-width: 900px) { .sra-xs__step { min-height: 9rem; padding-block: 2.4rem; } }
.sra-xs__n { position: absolute; left: 0; top: 1.3rem; width: 3rem; height: 3rem; border-radius: 50%; background: var(--mat); color: var(--line); font-family: var(--display); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; }
@media (min-width: 900px) { .sra-xs__n { top: 2.3rem; } }

.sra-xs__ico { display: none; }
.sra-xs__step h3 { margin: 0 0 .3rem; font-size: 1.5rem; }
.sra-xs__step p { margin: 0; }

/* ---------- photos, job board, lightbox ---------- */
.sra-strip-photos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.sra-photo { margin: 0; background: #fff; padding: .5rem .5rem .7rem; border-radius: 6px; box-shadow: 0 14px 24px -18px rgba(0, 0, 0, .55); }
.sra-photo img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 3px; }
.sra-photo figcaption { font-size: .92rem; font-weight: 600; margin-top: .5rem; }
html.sra-js .sra-strip-photos .sra-photo { transition: transform .5s ease-out calc(var(--i) * .08s), opacity .5s calc(var(--i) * .08s); }
html.sra-js .sra-strip-photos:not(.is-in) .sra-photo { transform: translateY(24px) rotate(-1.5deg); opacity: 0; }
.sra-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .6rem; }
.sra-chip { font: inherit; font-weight: 600; font-size: .95rem; padding: .45rem .85rem; border-radius: 999px; border: 2px solid var(--mat); background: transparent; color: var(--mat); cursor: pointer; }
.sra-chip:hover { background: rgba(20, 21, 24, .08); }
.sra-chip.is-on { background: var(--mat); color: var(--line); }
.sra-filter__count { font-size: .95rem; margin: 0 0 1rem; color: var(--ink-2); }
.sra-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.sra-job[hidden] { display: none; }
.sra-job__a { display: block; position: relative; text-decoration: none; color: inherit; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 16px 26px -20px rgba(0, 0, 0, .6); transition: transform .2s; }
.sra-job__a:hover { transform: translateY(-4px) rotate(-.4deg); }
.sra-job__a img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sra-job__ticket { display: block; padding: .7rem .9rem .85rem; border-top: 5px solid var(--line); position: relative; }
.sra-job__ticket::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 5px; background: repeating-linear-gradient(90deg, var(--line) 0 14px, var(--mat) 14px 28px); }
.sra-job__type { display: block; font-family: var(--stencil); text-transform: uppercase; font-size: .82rem; letter-spacing: .05em; color: var(--cone-ink); }
.sra-job__t { display: block; font-weight: 600; line-height: 1.35; }
html.sra-js .sra-jobs .sra-job { transition: transform .5s ease-out calc(var(--i) * .07s), opacity .5s calc(var(--i) * .07s); }
html.sra-js .sra-jobs:not(.is-in) .sra-job { transform: translateY(26px); opacity: 0; }
.sra-band--mat .sra-job__a { color: var(--mat); }
.sra-lb { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); width: 100%; overflow: visible; }
.sra-lb::backdrop { background: rgba(10, 11, 13, .9); }
.sra-lb figure { margin: 0; text-align: center; }
.sra-lb img { max-width: 100%; max-height: 78vh; width: auto; border-radius: 6px; background: #222; }
.sra-lb figcaption { color: #fff; font-weight: 600; margin-top: .6rem; }
.sra-lb__btn { position: absolute; top: 50%; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: var(--line); color: var(--mat); display: flex; align-items: center; justify-content: center; cursor: pointer; transform: translateY(-50%); }
.sra-lb__prev { left: .4rem; } .sra-lb__next { right: .4rem; }
.sra-lb__close { top: -.4rem; right: -.2rem; transform: translateY(-100%); }

/* ---------- public / private signs, types, clients ---------- */
.sra-signs { display: grid; gap: 2rem 1.5rem; }
@media (min-width: 760px) { .sra-signs { grid-template-columns: 1fr 1fr; } }
.sra-sign { position: relative; display: block; text-decoration: none; padding-bottom: 3.5rem; }
.sra-sign__post { position: absolute; left: 50%; bottom: 0; width: 12px; height: 5rem; margin-left: -6px; background: linear-gradient(90deg, #8C8F96, #C4C7CD, #8C8F96); }
.sra-sign__face { position: relative; display: flex; flex-direction: column; gap: .4rem; align-items: center; text-align: center; padding: 1.6rem 1.2rem; border-radius: 10px; transform-origin: 50% 0; transition: transform .3s; }
.sra-sign:hover .sra-sign__face, .sra-sign:focus-visible .sra-sign__face { animation: sra-swing 1.2s ease-in-out 1; }
@keyframes sra-swing { 20% { transform: rotate(3deg); } 45% { transform: rotate(-2.2deg); } 70% { transform: rotate(1.2deg); } 100% { transform: none; } }
.sra-sign--public .sra-sign__face { background: var(--cone); color: var(--mat); box-shadow: inset 0 0 0 5px var(--cone), inset 0 0 0 8px var(--mat); }
.sra-sign--private .sra-sign__face { background: #fff; color: var(--mat); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 8px var(--mat), 0 14px 26px -18px rgba(0, 0, 0, .5); }
.sra-sign__small { font-family: var(--stencil); text-transform: uppercase; letter-spacing: .06em; }
.sra-sign__big { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); line-height: 1.05; }
.sra-sign__go { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; border-bottom: 3px solid currentColor; }
.sra-types { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.sra-types li { display: flex; align-items: center; gap: .8rem; background: var(--mat) var(--agg); color: #fff; padding: .9rem 1rem; border-radius: 8px; font-weight: 600; border-left: 6px solid #F6F4EE; }
.sra-types--public li { border-left-color: var(--cone); }
.sra-types__n { font-family: var(--display); font-size: 1.7rem; color: var(--line); line-height: 1; }
html.sra-js .sra-types li { transition: transform .45s ease-out calc(var(--i) * .06s), opacity .45s calc(var(--i) * .06s); }
html.sra-js .sra-types:not(.is-in) li { transform: translateY(16px); opacity: 0; }
.sra-clients { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sra-clients li { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; font-size: 1.05rem; }
.sra-clients .sra-ico { color: var(--cone-ink); margin-top: .15rem; }
.sra-band--mat .sra-clients .sra-ico { color: var(--line); }

/* ---------- service-area map ---------- */
.sra-map { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .sra-map:not(.sra-map--mini) { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.sra-map__fig { margin: 0; }
.sra-map__svg { width: 100%; height: auto; display: block; background: #F3F1EA; border-radius: 12px; box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .6); }
.sra-map--mini .sra-map__fig { max-width: 34rem; margin-inline: auto; }
.sra-map__note { font-size: .85rem; color: var(--ink-2); margin: .5rem 0 0; }
.sra-map__hills { fill: #DCE5D7; }
.sra-map__ridge { fill: none; stroke: #8FA88A; stroke-width: 3; stroke-linejoin: round; }
.sra-map__river { fill: none; stroke: #9CC3DA; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sra-map__hull { fill: rgba(255, 229, 0, .18); stroke: #B39600; stroke-width: 2.5; stroke-dasharray: 8 6; stroke-linejoin: round; }
.sra-map__road { fill: none; stroke: #6F6A60; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1400; stroke-dashoffset: 0; }
html.sra-js .sra-map:not(.is-in) .sra-map__road { stroke-dashoffset: 1400; }
html.sra-js .sra-map .sra-map__road { transition: stroke-dashoffset 2.6s ease-out .2s; }
.sra-map__shield path { fill: #fff; stroke: #2B2C30; stroke-width: 2; }
.sra-map__shield text { font-family: var(--display); font-size: 14px; fill: var(--mat); }
.sra-map__city circle { fill: var(--mat); stroke: #fff; stroke-width: 2.5; }
.sra-map__city text { font-family: var(--body); font-weight: 700; font-size: 15px; fill: var(--mat); paint-order: stroke; stroke: #F3F1EA; stroke-width: 4px; stroke-linejoin: round; }
.sra-map__city.is-minor text { font-size: 13px; font-weight: 600; }
.sra-map--mini .sra-map__city text { font-size: 24px; }
.sra-map--mini .sra-map__hq text { font-size: 22px; }
.sra-map--mini .sra-map__hq .sra-map__yard { font-size: 18px; }
@media (max-width: 700px) { .sra-map__city.is-minor text { display: none; } .sra-map__city text { font-size: 24px; } .sra-map__hq text { font-size: 22px; } }
html.sra-js .sra-map .sra-map__city { transition: opacity .4s calc(var(--i, 0) * .04s + .8s); }
html.sra-js .sra-map:not(.is-in) .sra-map__city { opacity: 0; }
.sra-map__city.is-hit circle { fill: var(--cone); stroke: var(--mat); stroke-width: 3; transform: scale(1.7); }
.sra-map__city.is-hit text { display: inline; fill: var(--cone-ink); font-size: 20px; }
.sra-map__hq path { fill: var(--line); stroke: var(--mat); stroke-width: 2.5; stroke-linejoin: round; }
.sra-map__hq text { font-family: var(--stencil); font-size: 15px; fill: var(--mat); paint-order: stroke; stroke: #F3F1EA; stroke-width: 4px; }
.sra-map__hq .sra-map__yard { font-family: var(--body); font-size: 13px; font-weight: 600; }
.sra-map__hq.is-hit path { fill: var(--cone); }
.sra-map__pulse { fill: rgba(255, 154, 31, .35); transform-box: fill-box; transform-origin: center; animation: sra-pulse 2s ease-out infinite; }
@keyframes sra-pulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.sra-finder { background: var(--mat) var(--agg); color: #fff; padding: 1.3rem; border-radius: 12px; }
.sra-finder label { display: block; font-family: var(--display); text-transform: uppercase; font-size: 1.6rem; margin-bottom: .6rem; }
.sra-finder__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.sra-finder input { flex: 1 1 12rem; min-width: 0; font: inherit; font-size: 1.05rem; padding: .7rem .85rem; border-radius: 6px; border: 3px solid var(--line); background: #fff; color: var(--mat); }
.sra-finder__out { min-height: 1.6em; margin: .8rem 0 0; font-weight: 600; color: var(--line); }
.sra-finder__out a { color: #fff; }
.sra-map__h { font-size: 1.6rem !important; margin: 1.6rem 0 .8rem !important; }
.sra-towns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .4rem; }
.sra-town { width: 100%; text-align: left; font: inherit; font-weight: 600; background: #fff; border: 2px solid #D6D2C8; border-radius: 6px; padding: .45rem .65rem; cursor: pointer; color: var(--mat); }
.sra-town:hover, .sra-town.is-on { border-color: var(--mat); background: var(--line); }

/* ---------- about: exit sign + values ---------- */
.sra-exit { position: relative; max-width: 30rem; margin: 0 auto; padding-top: 2.2rem; }
.sra-exit__tab { position: absolute; top: 0; right: 1.4rem; background: #0F6B3D; color: #fff; border: 3px solid #fff; border-bottom: 0; border-radius: 8px 8px 0 0; padding: .35rem .9rem .2rem; font-weight: 700; letter-spacing: .06em; box-shadow: 0 0 0 3px #0F6B3D; }
.sra-exit__tab span { font-family: var(--display); font-size: 1.3rem; letter-spacing: .02em; }
.sra-exit__sign { position: relative; background: #0F6B3D; color: #fff; border-radius: 12px; padding: 1.4rem 1.6rem 1.6rem; box-shadow: inset 0 0 0 4px #0F6B3D, inset 0 0 0 7px #fff, 0 22px 40px -24px rgba(0, 0, 0, .7); transform-origin: 50% 0; }
.sra-exit__name { font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); line-height: 1.05; margin: 0; }
.sra-exit__sub { margin: .2rem 0 .8rem; font-weight: 500; }
.sra-exit__years { margin: 0; font-weight: 700; font-size: 1.2rem; }
.sra-exit__num { font-family: var(--display); font-size: 3.2rem; line-height: 1; color: var(--line); vertical-align: -.25em; display: inline-block; min-width: 2ch; }
.sra-exit__arrow { position: absolute; right: 1.2rem; bottom: 1.2rem; transform: rotate(-45deg); }
.sra-exit__arrow .sra-ico { width: 3rem; height: 3rem; stroke-width: 3; }
.sra-exit__posts { display: flex; justify-content: space-around; height: 4rem; }
.sra-exit__posts i { width: 12px; background: linear-gradient(90deg, #8C8F96, #C4C7CD, #8C8F96); }
html.sra-js .sra-exit:not(.is-in) .sra-exit__sign { transform: rotate(-4deg) translateY(-20px); opacity: 0; }
html.sra-js .sra-exit .sra-exit__sign { transition: transform .8s cubic-bezier(.3, 1.5, .5, 1), opacity .4s; }
.sra-values { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.sra-values li { position: relative; background: var(--mat) var(--agg); color: #E9E7E1; padding: 1.4rem 1.3rem; border-radius: 10px; overflow: hidden; }
.sra-values__legend { display: block; font-family: var(--display); text-transform: uppercase; color: #F6F4EE; font-size: 2.6rem; line-height: .9; transform: scaleY(1.45); transform-origin: 0 0; margin-bottom: 1.6rem; opacity: .95; }
.sra-values__t { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0 !important; }
.sra-values li p { margin: 0; }
html.sra-js .sra-values li { transition: transform .5s ease-out calc(var(--i) * .1s), opacity .5s calc(var(--i) * .1s); }
html.sra-js .sra-values:not(.is-in) li { transform: translateY(24px); opacity: 0; }

/* ---------- careers: hard hats + swinging sign ---------- */
.sra-trades { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(46%, 10rem), 1fr)); }
.sra-trades li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 1.4rem; }
.sra-trades__hook { position: absolute; top: 0; left: 50%; width: 4px; height: 1.6rem; background: #8C8F96; margin-left: -2px; }
.sra-trades .sra-hat { width: 6.5rem; transform-origin: 50% 0; animation: sra-hang 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.55s); }
@keyframes sra-hang { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.sra-trades__t { font-weight: 700; margin-top: .5rem; }
.sra-crew { position: relative; width: clamp(150px, 18vw, 220px); margin: 0 auto; }
.sra-crew__sign { width: 70%; aspect-ratio: 1; margin: 0 auto; background: var(--cone); transform: rotate(45deg); border-radius: 10px; box-shadow: inset 0 0 0 5px var(--cone), inset 0 0 0 9px var(--mat); display: flex; align-items: center; justify-content: center; animation: sra-signswing 3s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.sra-crew__sign span { transform: rotate(-45deg); font-family: var(--display); text-transform: uppercase; text-align: center; color: var(--mat); font-size: clamp(1rem, .8rem + 1vw, 1.45rem); line-height: 1; }
.sra-crew__sign small { font-size: .75em; }
@keyframes sra-signswing { from { transform: rotate(41deg); } to { transform: rotate(49deg); } }
.sra-crew__legs { display: flex; justify-content: space-between; width: 80%; margin: -.4rem auto 0; height: 3.4rem; }
.sra-crew__legs i { width: 8px; background: #8C8F96; }
.sra-crew__legs i:first-child { transform: rotate(14deg); transform-origin: 50% 0; } .sra-crew__legs i:last-child { transform: rotate(-14deg); transform-origin: 50% 0; }
.sra-crew__bar { height: 14px; width: 92%; margin: -2.2rem auto 0; background: repeating-linear-gradient(-45deg, var(--cone) 0 14px, #fff 14px 28px); border-radius: 3px; position: relative; }

/* ---------- CTA ---------- */
.sra-cta { position: relative; overflow: hidden; background: var(--line); color: var(--mat); padding: clamp(3rem, 2rem + 4vw, 5rem) var(--gut); }
.sra-cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(-45deg, var(--mat) 0 18px, var(--line) 18px 36px); }
.sra-cta__inner { position: relative; z-index: 2; max-width: var(--wide); margin: 0 auto; }
.sra-cta__inner > * { max-width: 40rem; }
.sra-cta__h { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.3rem, 1.6rem + 3vw, 4rem); line-height: 1; margin: 0 0 .7rem; }
.sra-cta p { font-size: 1.15rem; margin: 0; }
.sra-cta__cones { position: absolute; right: clamp(1rem, 6vw, 7rem); bottom: 0; display: flex; align-items: flex-end; gap: .6rem; }
.sra-cta__cones .sra-cone { width: clamp(40px, 5vw, 70px); }
.sra-cta__cones .sra-cone:nth-child(2) { width: clamp(52px, 6.5vw, 92px); }
html.sra-js .sra-cta .sra-cone { transition: transform .6s cubic-bezier(.3, 1.7, .5, 1); }
html.sra-js .sra-cta:not(.is-in) .sra-cone { transform: translateY(-120px); }
.sra-cta .sra-cone:nth-child(2) { transition-delay: .12s; } .sra-cta .sra-cone:nth-child(3) { transition-delay: .24s; }
@media (max-width: 760px) { .sra-cta__cones { opacity: .3; } }
.sra-cta .sra-btn--inkline:focus-visible, .sra-cta .sra-btn--ink:focus-visible { outline-color: var(--mat); box-shadow: 0 0 0 6px #fff; }

/* ---------- contact card + forms ---------- */
.sra-ccard { background: var(--mat) var(--agg); color: #E9E7E1; border-radius: 12px; padding: 1.5rem; border-top: 8px solid var(--line); }
.sra-ccard a { color: #fff; }
.sra-ccard__open { margin: 0 0 .8rem; font-weight: 600; display: flex; }
.sra-ccard__open .sra-open { display: inline-flex; align-items: center; gap: .5rem; }
.sra-ccard__big { font-family: var(--display); font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.5rem); margin: 0 0 1rem; display: flex; gap: .6rem; align-items: center; }
.sra-ccard__big a { text-decoration: none; color: var(--line); }
.sra-ccard__big .sra-ico { color: var(--line); }
.sra-ccard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.sra-ccard__list li { display: flex; gap: .7rem; align-items: flex-start; }
.sra-ccard__list .sra-ico { color: var(--line); margin-top: .2rem; }
.sra-form { background: #fff; border-radius: 12px; padding: clamp(1.1rem, 1rem + 1.5vw, 2rem); box-shadow: 0 18px 36px -26px rgba(0, 0, 0, .55); border-top: 8px solid var(--mat); }
.sra-nf .nf-form-fields-required { font-size: .92rem; color: var(--ink-2); margin-bottom: 1rem; }
.sra-nf nf-field > .nf-field-container { margin-bottom: 1.05rem; }
.sra-nf .nf-field-label label, .sra-nf .nf-field-label .nf-label-span { font-weight: 700; font-size: 1rem; color: var(--mat); }
.sra-nf .nf-field-element input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]), .sra-nf .nf-field-element select, .sra-nf .nf-field-element textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.02rem; padding: .7rem .8rem; border: 2px solid #B9B5AB; border-radius: 6px; background: #FBFAF7; color: var(--mat); }
.sra-nf .nf-field-element textarea { min-height: 9rem; }
.sra-nf .nf-field-element input:focus, .sra-nf .nf-field-element select:focus, .sra-nf .nf-field-element textarea:focus { border-color: var(--mat); outline: 3px solid var(--line); outline-offset: 0; }
.sra-nf .list-checkbox-wrap ul, .sra-nf .list-radio-wrap ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .35rem .9rem; margin: .2rem 0 0 !important; padding: 0 !important; }
.sra-nf .list-checkbox-wrap li, .sra-nf .list-radio-wrap li { display: flex; align-items: flex-start; gap: .45rem; margin: 0 !important; }
.sra-nf .list-checkbox-wrap li label, .sra-nf .list-radio-wrap li label { font-weight: 500 !important; margin: 0 !important; }
.sra-nf input[type=checkbox], .sra-nf input[type=radio] { width: 1.15rem; height: 1.15rem; accent-color: var(--mat); margin-top: .2rem; flex: none; }
.sra-nf .nf-field-description { font-size: .9rem; color: var(--ink-2); margin-top: .25rem; }
.sra-nf .nf-error-msg, .sra-nf .nf-error .nf-error-msg { color: #B3261E; font-weight: 600; font-size: .92rem; }
.sra-nf .nf-error .nf-field-element input, .sra-nf .nf-error .nf-field-element textarea, .sra-nf .nf-error .nf-field-element select { border-color: #B3261E; }
.sra-nf input[type=submit], .sra-nf input[type=button] { font-family: var(--stencil); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em; background: var(--line); color: var(--mat); border: 0; border-radius: 6px; padding: .9rem 1.6rem .85rem; cursor: pointer; box-shadow: 0 5px 0 #B49D00; }
.sra-nf input[type=submit]:hover { transform: translateY(-2px); }
.sra-nf .html-container, .sra-nf .nf-field-container.html-container { font-size: .98rem; }
.sra-nf .sra-nf-section { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; margin: 1.2rem 0 .2rem; padding-top: 1rem; border-top: 4px solid var(--mat); }
.sra-nf .sra-nf-legal { font-size: .88rem; color: var(--ink-2); background: var(--concrete); padding: .9rem 1rem; border-radius: 6px; }
.sra-nf .sra-nf-legal p { margin: 0 0 .6rem; }
@media (min-width: 700px) { .sra-nf .sra-half { display: inline-block; width: calc(50% - .6rem); vertical-align: top; } .sra-nf .sra-half + .sra-half { margin-left: 1rem; } .sra-nf .sra-third { display: inline-block; width: calc(33.33% - .7rem); vertical-align: top; } .sra-nf .sra-third + .sra-third { margin-left: 1rem; } }
.sra-nf .nf-form-hp { position: absolute; left: -9999px; }
.sra-success { text-align: center; padding: 1rem .5rem; outline: none; }
.sra-success__art { width: min(100%, 420px); height: auto; display: block; margin: 0 auto .8rem; overflow: visible; }
.sra-success__h { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 1.8rem + 3vw, 3.6rem); line-height: 1; margin: .2rem 0 .8rem; }
.sra-success__h span { display: block; color: var(--cone-ink); }
.sra-success p { font-size: 1.1rem; max-width: 34rem; margin: .4rem auto; }
.sra-success .sra-actions { justify-content: center; }
.sra-s-roller { animation: sra-s-roll 1.6s cubic-bezier(.3, .8, .4, 1) both; }
@keyframes sra-s-roll { from { transform: translateX(-340px); } to { transform: translateX(0); } }
.sra-s-word { clip-path: inset(0 100% 0 0); animation: sra-s-word 1.6s cubic-bezier(.3, .8, .4, 1) both; }
@keyframes sra-s-word { to { clip-path: inset(0 0 0 0); } }
.sra-s-hat { animation: sra-s-hat 1s cubic-bezier(.3, 1.6, .5, 1) 1.4s both; }
@keyframes sra-s-hat { from { transform: translateY(-160px) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.sra-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }

/* ---------- footer ---------- */
.sra-foot { position: relative; background: #0C0D0F var(--agg); color: #CFCCC4; padding: 0 var(--gut) 5.5rem !important; margin-top: 70px; }
.sra-foot__ridge { position: absolute; left: 0; right: 0; top: -60px; height: 61px; line-height: 0; }
.sra-foot__ridge svg { width: 100%; height: 100%; fill: #0C0D0F; }
.sra-foot__inner { max-width: var(--wide); margin: 0 auto; display: grid; gap: 2rem; padding-top: 1.5rem; }
@media (min-width: 760px) { .sra-foot__inner { grid-template-columns: 1.3fr 1fr 1fr; } .sra-foot__brand { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .sra-foot__inner { grid-template-columns: 1.4fr 1.1fr 1fr .8fr; } .sra-foot__brand { grid-column: auto; } }
.sra-foot .sra-logo--foot { width: 230px; display: block; }
.sra-foot__tag { margin: 1rem 0 1.2rem; max-width: 22rem; }
.sra-foot__h { font-family: var(--stencil); font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--line); margin: 0 0 .7rem; }
.sra-foot__list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.sra-foot__list li { display: flex; gap: .55rem; align-items: flex-start; }
.sra-foot__list .sra-ico { color: var(--line); margin-top: .2rem; }
.sra-foot a { color: #fff; }
.sra-foot a:hover { color: var(--line); }
.sra-foot__list--plain a { text-decoration: none; }
.sra-foot__base { max-width: var(--wide); margin: 1.5rem auto 0; border-top: 1px solid #2E3035; padding-top: 1rem; font-size: .9rem; }
.sra-foot__base p { margin: 0; }

/* ---------- pause pill ---------- */
.sra-motion { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 70; display: inline-flex; align-items: center; gap: .45rem; background: rgba(20, 21, 24, .94); color: var(--line); border: 2px solid var(--line); border-radius: 999px; padding: .5rem .95rem .5rem .75rem; font-family: var(--body); font-weight: 700; font-size: .95rem; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .65); }
.sra-motion:hover { background: var(--mat); color: #fff; }
.sra-motion__play { display: none; }
html.sra-paused .sra-motion__pause { display: none; }
html.sra-paused .sra-motion__play { display: inline; }

/* ---------- 404 detour ---------- */
.sra-detour { max-width: var(--wide); margin: 0 auto; padding: 3rem var(--gut) 4rem; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 760px) { .sra-detour { grid-template-columns: 1fr 1fr; } }
.sra-barricade { position: relative; width: min(100%, 360px); margin: 0 auto; padding-top: 1.4rem; }
.sra-barricade__board { height: 34px; margin-bottom: 18px; border-radius: 4px; background: repeating-linear-gradient(-45deg, var(--cone) 0 22px, #fff 22px 44px); box-shadow: 0 0 0 3px var(--mat); }
.sra-barricade__legs { display: flex; justify-content: space-between; padding: 0 12%; height: 70px; margin-top: -88px; position: relative; z-index: -1; }
.sra-barricade__legs i { width: 12px; background: #8C8F96; }
.sra-barricade__lamp { position: absolute; top: 0; left: 8%; width: 22px; height: 22px; border-radius: 50%; background: #FFB443; animation: sra-glow 1s steps(2, jump-none) infinite; box-shadow: 0 0 18px #FF9A1F; }
.sra-barricade__lamp--r { left: auto; right: 8%; animation-delay: -.5s; }
.sra-detour__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sra-detour__list a { display: flex; align-items: center; gap: .6rem; font-family: var(--display); text-transform: uppercase; font-size: 1.7rem; text-decoration: none; }
.sra-detour__list a::before { content: "➜"; color: var(--cone-ink); font-family: var(--body); font-size: 1.2rem; }

/* ---------- motion: paused + reduced ---------- */
html.sra-paused *, html.sra-paused *::before, html.sra-paused *::after, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }
html.sra-paused .sra-train, html.sra-paused .sra-sun, html.sra-paused .sra-chevron { animation-play-state: running !important; animation-duration: .01s !important; animation-delay: 0s !important; }
html.sra-paused .sra-train-push { transform: none; }
@media (prefers-reduced-motion: reduce) {
	html:not(.sra-motion-on) *, html:not(.sra-motion-on) *::before, html:not(.sra-motion-on) *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition: none !important; scroll-behavior: auto !important; }
	html:not(.sra-motion-on) .sra-steam path, html:not(.sra-motion-on) .sra-smoke circle { animation: none !important; opacity: .3; }
	html:not(.sra-motion-on) .sra-phases__zone, html:not(.sra-motion-on) .sra-phases__cones, html:not(.sra-motion-on) .sra-phases__cars { animation: none !important; }
	html:not(.sra-motion-on) .sra-lot__car { animation: none !important; left: 40%; }
}