.a-hero {
padding-block: clamp(var(--space-layout-4), 11vw, 150px);
background:
radial-gradient(120% 90% at 8% 0%, var(--accent-subtle) 0%, transparent 58%),
var(--surface-page);
}
.a-hero .s-h1 { max-width: 20ch; }
.a-hero .s-lead { margin-top: var(--space-comp-5); max-width: 54ch; }
.a-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-comp-4);
margin-top: var(--space-layout-1);
}
.a-facts { padding-block: var(--space-layout-2); }
.a-facts__grid {
display: grid;
gap: var(--space-layout-1);
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.a-fact__n {
display: block;
font-family: var(--font-display);
font-size: var(--step-4);
font-weight: 400;
letter-spacing: -0.028em;
line-height: 1.05;
color: var(--text-strong);
font-variant-numeric: tabular-nums;
}
.a-fact__l {
display: block;
margin-top: var(--space-comp-2);
font-size: var(--step--1);
color: var(--text-muted);
}
#fleet, #reporting, #inside { container-type: inline-size; }
.a-grid {
display: grid;
gap: var(--space-layout-1);
grid-template-columns: 1fr;
}
@container (min-width: 620px) {
.a-grid { grid-template-columns: repeat(2, 1fr); }
}
@supports not (container-type: inline-size) {
@media screen and (min-width: 760px) {
.a-grid { grid-template-columns: repeat(2, 1fr); }
}
}
.a-card p { margin-top: var(--space-comp-3); color: var(--text-body); }
.a-rows { margin-top: var(--space-layout-2); }
.a-row {
padding-block: var(--space-layout-1);
border-top: 1px solid var(--hairline);
}
.a-row:last-child { border-bottom: 1px solid var(--hairline); }
.a-row p { margin-top: var(--space-comp-3); }
.a-steps {
counter-reset: step;
list-style: none;
padding: 0;
margin: var(--space-layout-2) 0 0;
display: grid;
gap: var(--space-layout-1);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.a-steps li {
counter-increment: step;
padding-top: var(--space-comp-5);
border-top: 2px solid var(--accent);
color: var(--text-body);
max-width: 40ch;
}
.a-steps li::before {
content: counter(step, decimal-leading-zero);
display: block;
margin-bottom: var(--space-comp-3);
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.a-steps strong { color: var(--text-strong); }
.a-split {
display: grid;
gap: var(--space-layout-2);
align-items: center;
grid-template-columns: 1fr;
}
@container (min-width: 720px) {
.a-split { grid-template-columns: 1fr 1fr; }
}
@supports not (container-type: inline-size) {
@media screen and (min-width: 860px) {
.a-split { grid-template-columns: 1fr 1fr; }
}
}
.a-figure { margin: 0; }
.a-figure img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-container);
border: 1px solid var(--hairline);
background: var(--surface-sunken);
}
.a-figure figcaption {
margin-top: var(--space-comp-3);
font-size: var(--step--1);
color: var(--text-muted);
}
.a-cta { border-top: 1px solid var(--hairline); }
.a-cta .s-lead { margin-top: var(--space-comp-4); }
.a-fine {
margin-top: var(--space-layout-1);
font-size: var(--step--1);
color: var(--text-muted);
}
.a-foot {
display: grid;
gap: var(--space-layout-1);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.a-foot p { margin-top: var(--space-comp-4); max-width: 40ch; }
.a-legal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: var(--space-comp-3) var(--space-layout-1);
margin-top: var(--space-layout-2);
padding-top: var(--space-comp-5);
border-top: 1px solid var(--hairline);
font-size: var(--step--1);
color: var(--text-muted);
}
.a-legal p { margin: 0; }
.a-legal__by a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.a-legal__by a:hover,
.a-legal__by a:focus-visible {
color: var(--accent-on-subtle);
border-bottom-color: currentColor;
}
.s-brand img, .a-foot img { display: block; width: auto; }
.s-brand {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 2px;
}
@media print {
.s-header, .s-burger, .a-actions, .s-mobile { display: none !important; }
.a-hero { background: none; padding-block: var(--space-layout-1); }
.s-section { padding-block: var(--space-layout-1); }
}
.a-foot a,
.a-fine a {
display: inline-block;
padding-block: var(--space-comp-3);
min-height: 44px;
}
.a-row a { padding-block: 6px; display: inline-block; }
.a-dark {
background: var(--surface-invert);
color: var(--text-on-invert);
}
.a-dark .s-h2 { color: var(--text-on-invert); }
.a-dark .s-eyebrow { color: var(--text-on-invert); opacity: 0.66; }
.a-dark .s-lead { color: var(--text-on-invert); opacity: 0.86; }
.a-gal {
margin-top: var(--space-layout-2);
display: grid;
gap: var(--space-layout-1);
}
@container (min-width: 820px) {
.a-gal { grid-template-columns: 2fr 1fr; align-items: start; }
}
@supports not (container-type: inline-size) {
@media screen and (min-width: 940px) {
.a-gal { grid-template-columns: 2fr 1fr; align-items: start; }
}
}
.a-gal__stage img {
width: 100%;
max-width: 640px;
height: auto;
display: block;
border-radius: var(--radius-container);
border: 1px solid rgb(255 255 255 / 0.14);
background: rgb(0 0 0 / 0.35);
}
.a-gal__cap {
margin-top: var(--space-comp-4);
font-size: var(--step--1);
color: var(--text-on-invert);
opacity: 0.72;
}
.a-gal__thumbs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-comp-4);
}
@container (min-width: 820px) {
.a-gal__thumbs { grid-template-columns: repeat(2, 1fr); }
}
.a-gal__thumbs button {
padding: 0;
border: 1px solid rgb(255 255 255 / 0.16);
border-radius: var(--radius-action);
background: none;
cursor: pointer;
overflow: hidden;
line-height: 0;
transition: transform var(--t-micro) var(--ease), opacity var(--t-micro) var(--ease);
opacity: 0.62;
}
.a-gal__thumbs img { width: 100%; height: auto; display: block; }
.a-gal__thumbs button:hover { opacity: 1; transform: translateY(-2px); }
.a-gal__thumbs button:active { transform: scale(0.97); }
.a-gal__thumbs button[aria-selected="true"] {
opacity: 1;
box-shadow: 0 0 0 2px var(--accent);
border-color: transparent;
}
.a-gal__thumbs button:focus-visible {
outline: 3px solid var(--focus, var(--accent));
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.a-gal__thumbs button { transition: none; }
.a-gal__thumbs button:hover,
.a-gal__thumbs button:active { transform: none; }
}
.a-hero { container-type: inline-size; }
.a-hero__grid { display: grid; gap: var(--space-layout-2); align-items: center; }
@container (min-width: 860px) {
.a-hero__grid { grid-template-columns: 1.05fr 1fr; }
}
@supports not (container-type: inline-size) {
@media screen and (min-width: 980px) {
.a-hero__grid { grid-template-columns: 1.05fr 1fr; }
}
}
.a-hero__copy .s-h1 { max-width: 16ch; }
.a-hero__media { margin: 0; }
.a-hero__media img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-container);
border: 1px solid var(--hairline);
background: var(--surface-sunken);
box-shadow: var(--elev-3, 0 18px 50px rgb(0 0 0 / 0.14));
}
.a-hero__media figcaption {
margin-top: var(--space-comp-3);
font-size: var(--step--1);
color: var(--text-muted);
}
.a-ticks { list-style: none; padding: 0; margin: var(--space-comp-4) 0 0; }
.a-ticks li {
position: relative;
padding-left: 1.5em;
margin-bottom: var(--space-comp-3);
color: var(--text-body);
font-size: var(--step-0);
}
.a-ticks li::before {
content: '';
position: absolute;
left: 0; top: 0.55em;
width: 0.7em; height: 0.36em;
border-left: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(-45deg);
}
#main .a-contact {
display: grid;
gap: var(--space-layout-2);
align-items: start;
}
.s-section--panel { container-type: inline-size; }
@container (min-width: 760px) {
#main .a-contact { grid-template-columns: 1fr 1fr; }
}
@supports not (container-type: inline-size) {
@media screen and (min-width: 880px) {
#main .a-contact { grid-template-columns: 1fr 1fr; }
}
}
.a-dl { margin: var(--space-layout-1) 0 0; }
.a-dl > div {
padding-block: var(--space-comp-4);
border-bottom: 1px solid var(--hairline);
}
.a-dl dt {
font-size: var(--step--1);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--space-comp-2);
}
.a-dl dd {
margin: 0;
font-size: var(--step-1);
color: var(--text-strong);
}
.a-dl dd a {
color: var(--accent);
display: inline-block;
padding-block: 6px;
min-height: 44px;
}
.a-hours {
width: 100%;
border-collapse: collapse;
margin-top: var(--space-layout-1);
}
.a-hours th, .a-hours td {
text-align: left;
padding-block: var(--space-comp-4);
border-bottom: 1px solid var(--hairline);
font-weight: 400;
}
.a-hours th { color: var(--text-body); }
.a-hours td {
color: var(--text-strong);
text-align: right;
font-variant-numeric: tabular-nums;
}
.a-hero { padding-block: clamp(var(--space-layout-2), 7vw, var(--space-layout-4)); }
@container (min-width: 860px) {
.a-hero__grid { grid-template-columns: 1fr 1fr; }
}
.a-hero__copy .s-h1 { max-width: 22ch; font-size: clamp(var(--step-4), 3.4vw, var(--step-5)); }
.a-hero__media img { aspect-ratio: 3 / 2; object-fit: cover; }
.a-bento {
display: grid;
gap: var(--space-comp-5);
margin-top: var(--space-layout-2);
grid-template-columns: 1fr;
}
.a-tile {
display: flex;
flex-direction: column;
gap: var(--space-comp-3);
padding: var(--space-layout-1);
border-radius: var(--radius-container);
background: var(--surface-raised);
box-shadow: var(--elev-ring), var(--elev-1);
}
.a-tile p { color: var(--text-body); }
.a-bento__photo { margin: 0; padding: 0; overflow: hidden; background: var(--surface-invert); }
.a-bento__photo picture, .a-bento__photo img { display: block; width: 100%; }
.a-bento__photo img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 40%; }
.a-bento__photo figcaption {
padding: var(--space-comp-4) var(--space-layout-1) var(--space-comp-5);
font-size: var(--step--1);
color: var(--text-on-invert);
}
.a-bento__trucks {
justify-content: flex-end;
position: relative;
overflow: hidden;
background:
radial-gradient(135% 105% at 6% 0%,
color-mix(in srgb, var(--accent) 30%, transparent) 0%,
color-mix(in srgb, var(--accent) 9%, transparent) 42%,
transparent 72%),
linear-gradient(158deg, var(--accent-subtle) 0%, var(--surface-raised) 78%);
border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--accent) 30%, transparent),
0 28px 64px -36px rgba(0,0,0,.85);
}
.a-bento__trucks::after {
content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
background: linear-gradient(90deg, var(--accent), transparent 72%);
}
.a-bento__trucks .s-h3 { color: var(--text-strong); }
.a-bento__trucks p     { color: var(--text-body); }
.a-bento__trucks .a-big {
position: absolute;
right: clamp(-8px, 1vw, 18px);
top: 50%;
transform: translateY(-52%);
margin: 0;
font-size: clamp(9rem, 20vw, 17rem);
line-height: .8;
color: var(--accent-on-subtle);
opacity: .17;
pointer-events: none;
user-select: none;
}
.a-bento__trucks .s-h3, .a-bento__trucks p { position: relative; z-index: 1; max-width: 46ch; }
.a-big {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(var(--step-6), 10vw, 8rem);
line-height: 0.85;
letter-spacing: -0.04em;
color: var(--accent-fg);
font-variant-numeric: tabular-nums;
}
.a-bento__shop { background: var(--surface-sunken); box-shadow: none; }
@container (min-width: 820px) {
.a-bento { grid-template-columns: 1.05fr 1fr 1fr; grid-template-rows: minmax(260px, auto) auto; }
.a-bento__photo { grid-row: 1 / span 2; position: relative; min-height: 520px; }
.a-bento__photo picture { position: absolute; inset: 0 0 3.25rem 0; }
.a-bento__photo img { height: 100%; aspect-ratio: auto; }
.a-bento__photo figcaption { position: absolute; inset: auto 0 0 0; }
.a-bento__trucks { grid-column: 2 / span 2; }
}
@supports not (container-type: inline-size) {
@media screen and (min-width: 900px) {
.a-bento { grid-template-columns: 1.05fr 1fr 1fr; }
.a-bento__photo { grid-row: 1 / span 2; }
.a-bento__trucks { grid-column: 2 / span 2; }
}
}
#services { container-type: inline-size; }
@container (min-width: 820px) {
.a-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-layout-3); }
.a-row:nth-last-child(2) { border-bottom: 1px solid var(--hairline); }
}
.a-cta { background: var(--accent-subtle); border-top: 0; }
.a-cta .s-h2 { max-width: 22ch; }
.a-phone {
display: inline-block;
margin-top: var(--space-layout-1);
padding-block: 4px;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(var(--step-4), 6vw, var(--step-6));
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--accent-on-subtle);
text-decoration: none;
font-variant-numeric: tabular-nums;
}
.a-phone:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.14em; }
.a-phone:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-action); }
.a-callbar { display: none; }
@media screen and (max-width: 759px) {
:root { --callbar-h: 68px; }
.a-callbar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-comp-2);
position: fixed;
inset: auto 0 0 0;
z-index: 40;
padding: 10px var(--space-comp-3) calc(10px + env(safe-area-inset-bottom, 0px));
background: var(--surface-raised);
border-top: 1px solid var(--hairline);
box-shadow: var(--elev-4);
}
.a-callbar .s-btn {
justify-content: center;
min-height: 48px;
padding-inline: var(--space-comp-3);
white-space: nowrap;
}
body { padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px) + var(--space-comp-3)); }
}
@media print { .a-callbar { display: none !important; } }
.s-btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
.s-btn:active { transform: none; }
}
.a-gal__thumbs button:hover { transform: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.a-gal__thumbs button:hover { transform: translateY(-2px); }
}
.a-hero__frame {
position: relative;
overflow: hidden;
border-radius: var(--radius-container);
border: 1px solid var(--hairline);
background: var(--surface-sunken);
box-shadow: var(--elev-3);
aspect-ratio: 3 / 2;
}
.a-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.a-hero__vidctl {
position: absolute;
right: var(--space-comp-3);
bottom: var(--space-comp-3);
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid color-mix(in srgb, var(--text-on-invert) 28%, transparent);
border-radius: 50%;
background: color-mix(in srgb, var(--surface-invert) 72%, transparent);
color: var(--text-on-invert);
cursor: pointer;
backdrop-filter: blur(6px);
transition: background-color 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.a-hero__vidctl[hidden] { display: none; }
.a-hero__vidctl svg { width: 18px; height: 18px; }
.a-hero__vidctl:active { transform: scale(0.94); }
.a-hero__vidctl:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
.a-hero__vidctl:hover { background: color-mix(in srgb, var(--surface-invert) 88%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .a-hero__vidctl:active { transform: none; } }
@media print { .a-hero__vidctl { display: none; } }
.s-brand .a-logo { height: 40px; width: auto; }
.a-foot   .a-logo { height: 30px; width: auto; }
.s-brand .a-logo--dark, .a-foot .a-logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .s-brand .a-logo--light,
:root:not([data-theme="light"]) .a-foot .a-logo--light { display: none; }
:root:not([data-theme="light"]) .s-brand .a-logo--dark,
:root:not([data-theme="light"]) .a-foot .a-logo--dark { display: block; }
}
:root[data-theme="dark"] .s-brand .a-logo--light,
:root[data-theme="dark"] .a-foot .a-logo--light { display: none; }
:root[data-theme="dark"] .s-brand .a-logo--dark,
:root[data-theme="dark"] .a-foot .a-logo--dark { display: block; }
.s-nav { margin-left: auto; }
.a-hdr-tools { display: flex; align-items: center; gap: var(--space-comp-2); }
.a-theme {
width: 48px;
height: 48px;
display: inline-grid;
place-items: center;
background: none;
border: 1px solid var(--border);
border-radius: var(--radius-action);
color: var(--text-strong);
cursor: pointer;
transition: background-color 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.a-theme svg { width: 20px; height: 20px; }
.a-theme:active { transform: scale(0.94); }
.a-theme:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .a-theme:hover { background: var(--surface-sunken); } }
@media (prefers-reduced-motion: reduce) { .a-theme:active { transform: none; } }
.a-theme__sun { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .a-theme__sun { display: block; }
:root:not([data-theme="light"]) .a-theme__moon { display: none; }
}
:root[data-theme="dark"] .a-theme__sun { display: block; }
:root[data-theme="dark"] .a-theme__moon { display: none; }
@media print { .a-theme { display: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
#how > .s-wrap { container-type: inline-size; }
.a-job { display: grid; gap: var(--space-layout-1); margin-top: var(--space-layout-1); }
@container (min-width: 820px) {
.a-job { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.a-job__list { display: grid; gap: 2px; align-content: start; }
.a-job__tab {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-comp-3);
text-align: left;
padding: var(--space-comp-4);
border: 0;
border-left: 3px solid var(--hairline);
border-radius: 0 var(--radius-action) var(--radius-action) 0;
background: transparent;
color: var(--text-body);
font: inherit;
cursor: pointer;
transition: background-color 200ms ease, border-color 200ms ease;
}
.a-job__tab[aria-selected="true"] { border-left-color: var(--accent); background: var(--surface-raised); }
.a-job__tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
.a-job__tab:not([aria-selected="true"]):hover { background: color-mix(in srgb, var(--surface-raised) 60%, transparent); }
}
.a-job__n { font: 600 var(--step--1)/1.7 var(--font-body); letter-spacing: 0.1em; color: var(--text-muted); }
.a-job__tab[aria-selected="true"] .a-job__n { color: var(--text-strong); }
.a-job__txt { line-height: 1.6; }
.a-job__txt strong { color: var(--text-strong); }
@container (max-width: 819px) {
.a-job__tab:not([aria-selected="true"]) .a-job__more { display: none; }
}
.a-job__panel { margin: 0; }
.a-job__panel[hidden] { display: none; }
.a-job__panel img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius-container);
border: 1px solid var(--hairline);
background: var(--surface-sunken);
box-shadow: var(--elev-3);
}
.a-job__panel--report img { aspect-ratio: auto; object-fit: contain; }
.a-job__panel figcaption { margin-top: var(--space-comp-3); font-size: var(--step--1); color: var(--text-muted); }
.a-job__panel--call {
display: grid;
align-content: end;
justify-items: start;
gap: var(--space-comp-4);
aspect-ratio: 16 / 9;
min-height: auto;
padding: var(--space-layout-1);
border-radius: var(--radius-container);
background-color: var(--surface-invert);
background-image:
linear-gradient(180deg,
rgba(8,12,16,.30) 0%, rgba(8,12,16,.48) 34%,
rgba(8,12,16,.86) 66%, rgba(8,12,16,.96) 100%),
image-set(url('../assets/images/job/job-call-1200.webp') 1x,
url('../assets/images/job/job-call-1200.webp') 2x);
background-size: cover, cover;
background-position: center, center;
color: var(--text-on-invert);
box-shadow: var(--elev-3);
}
.a-job__kicker { margin: 0; font: 600 var(--step--1)/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.a-job__num {
display: inline-block;
min-height: 44px;
padding-block: 4px;
font: 400 var(--step-4)/1.2 var(--font-display);
letter-spacing: -0.02em;
color: inherit;
text-decoration: none;
}
.a-job__num:hover { text-decoration: underline; text-underline-offset: 0.12em; }
.a-job__acts { display: flex; flex-wrap: wrap; gap: var(--space-comp-3); }
.a-job__panel--call .s-btn--ghost {
color: var(--text-on-invert);
border-color: color-mix(in srgb, var(--text-on-invert) 45%, transparent);
}
.a-job__panel--call .s-btn--ghost:hover,
.a-job__panel--call .s-btn--ghost:active { border-color: var(--text-on-invert); }
.a-job__small { margin: 0; font-size: var(--step--1); opacity: 0.8; }
.a-job__small a { color: inherit; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
.a-job__panel.is-entering { animation: job-in 240ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes job-in { from { opacity: 0; transform: translateY(6px); } }
}
@media (prefers-reduced-motion: reduce) {
.a-job__panel.is-entering { animation: job-fade 160ms ease-out; }
@keyframes job-fade { from { opacity: 0; } }
}
@media screen and (min-width: 1200px) {
.s-wrap { max-width: none; padding-inline: clamp(24px, 4.5vw, 112px); }
.s-wrap--narrow { max-width: min(70vw, 900px); }
}
html, body { margin: 0; }
.s-body a:not(.btn):not(.s-btn):not(.co-cta),
.s-lead a:not(.btn):not(.s-btn),
p a:not(.btn):not(.s-btn):not(.co-cta) {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
padding-bottom: 1px;
transition: color .2s ease, border-color .2s ease;
}
.s-body a:not(.btn):not(.s-btn):not(.co-cta):hover,
.s-body a:not(.btn):not(.s-btn):not(.co-cta):active,
.s-lead a:not(.btn):not(.s-btn):hover,
.s-lead a:not(.btn):not(.s-btn):active,
p a:not(.btn):not(.s-btn):not(.co-cta):hover,
p a:not(.btn):not(.s-btn):not(.co-cta):active {
color: var(--accent-hover);
border-bottom-color: var(--accent-hover);
}
.s-body a:focus-visible, .s-lead a:focus-visible, p a:focus-visible {
outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}
.a-finds { position: relative; margin-top: var(--space-layout-2); }
.a-finds__spine {
position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px;
background: linear-gradient(180deg,
transparent 0%,
color-mix(in srgb, var(--accent) 55%, transparent) 8%,
color-mix(in srgb, var(--accent) 55%, transparent) 92%,
transparent 100%);
}
.a-find {
position: relative;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: clamp(18px, 3vw, 34px);
align-items: start;
padding: clamp(20px, 2.4vw, 30px) 0;
border-bottom: 1px solid var(--border-subtle, color-mix(in srgb, var(--border) 38%, transparent));
}
.a-find:last-child { border-bottom: 0; }
.a-find__mark {
position: relative; z-index: 1;
width: 44px; height: 44px; border-radius: 50%;
display: grid; place-items: center;
background: var(--surface-page);
border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
box-shadow: 0 0 0 5px var(--surface-page),
inset 0 1px 0 color-mix(in srgb, var(--accent) 26%, transparent);
transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.a-find__mark span {
font: 700 12px/1 'Inter', system-ui, sans-serif;
letter-spacing: .06em;
color: var(--accent-on-subtle, var(--accent));
font-variant-numeric: tabular-nums;
}
.a-find__body { padding-top: 3px; }
.a-find__body .s-h3 { margin: 0 0 8px; }
.a-find__body .s-body { margin: 0; max-width: 62ch; }
.a-find:hover .a-find__mark,
.a-find:focus-within .a-find__mark {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 0 0 5px var(--surface-page),
0 10px 22px -10px color-mix(in srgb, var(--accent) 70%, transparent),
inset 0 1px 0 color-mix(in srgb, var(--accent) 34%, transparent);
}
@media (min-width: 900px) {
.a-find { grid-template-columns: 44px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.a-find__mark { transition: none; }
.a-find:hover .a-find__mark, .a-find:focus-within .a-find__mark { transform: none; }
}
.a-map {
position: relative;
border-radius: var(--radius-container);
overflow: hidden;
border: 1px solid var(--border);
background: var(--surface-panel);
aspect-ratio: 16 / 9;
box-shadow: var(--elev-3, 0 24px 56px -30px rgba(0,0,0,.6));
}
.a-map__tiles {
position: absolute; top: 50%; left: 50%;
width: 1536px; height: 1024px;
transform: translate(-722px, -735px);
}
.a-map__tiles img { display: block; width: 1536px; height: 1024px; }
.a-map__pin {
position: absolute; top: 50%; left: 50%;
width: 18px; height: 18px; margin: -9px 0 0 -9px;
border-radius: 50%;
background: var(--accent);
border: 3px solid #fff;
box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent),
0 6px 14px rgba(0,0,0,.45);
}
.a-map__bar {
position: absolute; left: 0; right: 0; bottom: 0;
display: flex; flex-wrap: wrap; gap: var(--space-comp-3);
align-items: center; justify-content: space-between;
padding: var(--space-comp-3) var(--space-comp-4);
background: linear-gradient(180deg, transparent, rgba(8,12,16,.88) 42%);
color: #fff;
}
.a-map__addr { margin: 0; font-size: var(--step--1); line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.a-map__cred {
position: absolute; top: 6px; right: 8px;
font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 4px;
background: rgba(255,255,255,.78); color: #222; text-decoration: none;
}
@media (max-width: 640px) {
.a-map { aspect-ratio: 4 / 3; }
.a-map__bar { flex-direction: column; align-items: stretch; }
.a-map__bar .s-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .a-map * { transition: none; } }
.a-install {
position: fixed; left: 12px; right: 12px;
bottom: calc(var(--callbar-h, 0px) + env(safe-area-inset-bottom, 0px) + var(--space-comp-3));
z-index: 60;
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-comp-3);
padding: var(--space-comp-3) var(--space-comp-4);
border-radius: var(--radius-container);
background: var(--surface-raised);
border: 1px solid var(--border);
box-shadow: 0 18px 44px -18px rgba(0,0,0,.75);
}
.a-install__txt { margin: 0; flex: 1 1 190px; font-size: var(--step--1); color: var(--text-body); }
.a-install__x {
background: none; border: 0; padding: 8px 4px; min-height: 44px;
color: var(--text-muted); font: inherit; font-size: var(--step--1); cursor: pointer;
}
.a-install__x:hover { color: var(--text-body); text-decoration: underline; }
@media (min-width: 760px) { .a-install { left: auto; right: 20px; bottom: 20px; max-width: 420px; } }
.a-run {
position: relative;
height: 280vh;
}
.a-run__stage {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
display: grid;
place-items: center;
overflow: hidden;
background: var(--surface-invert);
}
.a-run__frames {
position: relative;
width: 100%;
height: 100%;
}
.a-run__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
}
.a-run__frame[data-active="true"] { opacity: 1; }
.a-run__panel {
position: absolute;
left: var(--space-layout-3);
bottom: calc(var(--space-layout-3) + 18px);
z-index: 2;
max-width: min(34rem, calc(100% - var(--space-layout-3) * 2));
padding: var(--space-comp-4) var(--space-comp-5);
border-radius: var(--radius-container);
background: var(--surface-invert);
border: 1px solid var(--border);
box-shadow: 0 24px 60px -22px rgba(0,0,0,.85);
}
.a-run__panel h2 { margin: 0 0 var(--space-comp-2); color: var(--text-on-invert); }
.a-run__panel p {
margin: 0;
max-width: var(--measure);
color: var(--text-on-invert);
font-size: var(--step--1);
opacity: .86;
}
.a-run__scale {
position: absolute;
left: clamp(16px, 3vw, 34px);
right: clamp(16px, 3vw, 34px);
bottom: clamp(10px, 1.6vh, 18px);
z-index: 2;
display: flex;
align-items: center;
gap: var(--space-comp-3);
}
.a-run__mark {
font-size: var(--step--1);
font-weight: 600;
letter-spacing: .04em;
color: color-mix(in srgb, var(--text-on-invert) 80%, var(--surface-invert));
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.a-run__scale .a-run__rail {
position: static;
flex: 1 1 auto;
}
.a-run__rail {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 3;
height: 3px;
background: var(--hairline);
}
.a-run__rail i {
display: block;
height: 100%;
background: var(--accent);
transform: scaleX(0);
transform-origin: 0 50%;
}
.a-run__stage {
display: grid;
place-items: center;
padding: clamp(12px, 2.5vh, 28px) clamp(12px, 3vw, 36px)
calc(clamp(12px, 2.5vh, 28px) + 18px);
}
.a-run__monitor {
position: relative;
width: min(96vw, calc((100svh - 90px) * 4 / 3));
aspect-ratio: 4 / 3;
max-height: calc(100svh - 90px);
border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
border-radius: 3px;
box-shadow: 0 24px 60px -24px rgb(0 0 0 / .8);
overflow: hidden;
background: #000;
}
.a-run__frames {
position: relative;
position: absolute;
inset: 0;
width: auto;
height: auto;
}
.a-run__frame { object-fit: contain; }
@media screen and (max-aspect-ratio: 1/1) {
.a-run__monitor { width: min(96vw, 620px); max-height: none; }
}
.a-run__panel {
position: absolute;
left: 0; right: 0; bottom: 0;
width: auto;
max-width: none;
padding: clamp(40px, 8vh, 96px) clamp(16px, 3vw, 34px) calc(clamp(14px, 2.4vh, 26px) + 16px);
background: linear-gradient(180deg, rgb(8 12 16 / 0) 0%, rgb(8 12 16 / .72) 42%, rgb(8 12 16 / .94) 100%);
border: 0;
border-radius: 0;
pointer-events: none;
}
.a-run__panel h2 { max-width: 22ch; }
.a-run__panel p { max-width: 62ch; }
@media screen and (max-width: 760px) {
.a-run { height: 240vh; }
.a-run__stage {
padding-top: calc(var(--header-h, 72px) + var(--space-comp-3));
padding-bottom: calc(var(--callbar-h, 68px) + env(safe-area-inset-bottom, 0px) + var(--space-comp-3));
}
.a-run__monitor {
width: 100%;
max-width: 620px;
aspect-ratio: auto;
max-height: none;
overflow: visible;
display: grid;
gap: var(--space-comp-4);
border: 0;
border-radius: 0;
box-shadow: none;
background: none;
}
.a-run__frames {
position: relative;
inset: auto;
aspect-ratio: 4 / 3;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
border-radius: 3px;
box-shadow: 0 18px 44px -20px rgb(0 0 0 / .8);
background: #000;
}
.a-run__panel {
position: static;
max-width: none;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
pointer-events: auto;
}
.a-run__panel h2 { max-width: 24ch; }
.a-run__scale { position: static; }
}
@media (prefers-reduced-motion: reduce) {
.a-run, .a-run__stage { height: auto; }
.a-run__stage { position: static; }
.a-run__frames { height: auto; aspect-ratio: 4 / 3; max-height: none; }
.a-run__frame { position: absolute; }
.a-run__frame[data-active="true"] { opacity: 1; }
.a-run__rail { display: none; }
}
.a-run[data-static="true"], .a-run[data-static="true"] .a-run__stage { height: auto; }
.a-run[data-static="true"] .a-run__stage { position: static; }
.a-run[data-static="true"] .a-run__frames { height: auto; aspect-ratio: 4 / 3; max-height: none; }
.a-run[data-static="true"] .a-run__rail { display: none; }
@media print {
.a-run, .a-run__stage { height: auto; position: static; }
.a-run__frames { height: auto; aspect-ratio: 4 / 3; max-height: none; }
.a-run__rail { display: none; }
}
@media screen and (min-width: 1200px) {
:root {
--step-4: clamp(2.441rem, 1.60vw + 1.55rem, 4.3rem);
--step-5: clamp(3.052rem, 2.10vw + 1.85rem, 5.4rem);
--step-6: clamp(3.815rem, 2.70vw + 2.30rem, 6.8rem);
--step-0: clamp(1rem, 0.22vw + 0.88rem, 1.19rem);
--step-1: clamp(1.25rem, 0.30vw + 1.09rem, 1.5rem);
}
.s-section { padding-block: clamp(var(--space-layout-4), 6.4vw, 168px); }
}
@media screen and (min-width: 1200px) {
#services > .s-wrap {
display: grid;
grid-template-columns: minmax(26ch, 0.72fr) minmax(0, 1.28fr);
column-gap: clamp(48px, 6vw, 130px);
align-items: start;
}
#services > .s-wrap > .s-h2 {
position: sticky;
top: calc(var(--header-h, 72px) + 32px);
margin: 0;
}
#services .a-finds { margin-top: 0; }
#services .a-find__body .s-body { max-width: 54ch; }
}
.a-proj-band {
background:
radial-gradient(120% 80% at 12% 0%, var(--accent-subtle) 0%, transparent 62%),
var(--surface-page);
}
.a-proj {
margin-top: var(--space-layout-2);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
gap: clamp(14px, 1.6vw, 22px);
}
.a-proj__item { margin: 0; position: relative; }
.a-proj__btn {
display: block;
width: 100%;
padding: 0;
border: 1px solid var(--hairline);
border-radius: var(--radius-container);
overflow: hidden;
background: var(--surface-sunken);
cursor: zoom-in;
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.a-proj__btn { aspect-ratio: 4 / 3; }
.a-proj__btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.a-proj__btn img { transition: transform .5s cubic-bezier(.22,.61,.36,1), filter .35s ease; }
.a-proj__btn:hover img,
.a-proj__btn:focus-visible img { transform: scale(1.06); filter: saturate(1.06); }
.a-proj__btn:hover,
.a-proj__btn:focus-visible {
border-color: color-mix(in srgb, var(--accent) 60%, transparent);
transform: translateY(-3px);
box-shadow:
0 2px 0 color-mix(in srgb, var(--accent) 22%, transparent) inset,
0 26px 48px -26px rgb(0 0 0 / .9),
0 10px 22px -18px color-mix(in srgb, var(--accent) 80%, transparent);
}
.a-proj__btn:active { transform: translateY(0); }
.a-proj__item figcaption {
position: absolute;
inset: auto 0 0 0;
padding: clamp(28px, 5vw, 44px) var(--space-comp-4) var(--space-comp-4);
border-radius: 0 0 var(--radius-container) var(--radius-container);
background: linear-gradient(180deg,
rgb(8 12 16 / 0) 0%, rgb(8 12 16 / .55) 38%, rgb(8 12 16 / .92) 100%);
pointer-events: none;
}
.a-proj__item figcaption strong {
display: block;
color: #fff;
font-weight: 600;
line-height: 1.3;
text-shadow: 0 1px 12px rgb(0 0 0 / .55);
}
.a-proj__when {
display: block;
margin-top: 2px;
font-size: var(--step--2);
color: rgb(255 255 255 / .72);
font-variant-numeric: tabular-nums;
}
.a-proj__cap {
display: block;
margin-top: var(--space-comp-2);
font-size: var(--step--1);
line-height: 1.5;
color: rgb(255 255 255 / .86);
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height .32s ease, opacity .32s ease, margin-top .32s ease;
}
.a-proj__btn:hover + figcaption .a-proj__cap,
.a-proj__btn:focus-visible + figcaption .a-proj__cap,
.a-proj__item:hover .a-proj__cap { max-height: 8em; opacity: 1; }
@media (hover: none) {
.a-proj__cap { max-height: 8em; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.a-proj__btn img, .a-proj__cap { transition: none; }
.a-proj__btn:hover img, .a-proj__btn:focus-visible img { transform: none; }
}
.a-proj__empty {
margin-top: var(--space-layout-2);
max-width: var(--measure);
color: var(--text-muted);
}
.a-lb {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(8px, 2vw, 24px);
padding: clamp(12px, 4vw, 48px);
background: rgb(8 12 16 / .92);
}
.a-lb[hidden] { display: none; }
.a-lb__fig { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.a-lb__fig img {
display: block;
max-width: 100%;
max-height: 76vh;
height: auto;
margin-inline: auto;
border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
background: #000;
}
.a-lb__fig figcaption {
margin-top: var(--space-comp-4);
color: var(--text-on-invert);
font-size: var(--step--1);
line-height: 1.55;
max-width: 62ch;
margin-inline: auto;
}
.a-lb__close,
.a-lb__nav {
flex: 0 0 auto;
width: 48px; height: 48px;
display: grid; place-items: center;
font-size: 30px; line-height: 1;
color: var(--text-on-invert);
background: rgb(255 255 255 / .08);
border: 1px solid rgb(255 255 255 / .22);
border-radius: 50%;
cursor: pointer;
}
.a-lb__close { position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.a-lb__close:hover, .a-lb__nav:hover,
.a-lb__close:focus-visible, .a-lb__nav:focus-visible { background: rgb(255 255 255 / .18); }
.a-lb__nav[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.a-proj__btn { transition: none; }
.a-proj__btn:hover, .a-proj__btn:focus-visible { transform: none; }
}
.a-job__lead {
margin: 0 0 var(--space-comp-5);
color: var(--text-on-invert);
max-width: 34ch;
line-height: 1.6;
}
.a-notice {
background: var(--accent-subtle);
border-block-end: 1px solid var(--border);
color: var(--accent-on-subtle);
}
.a-notice[hidden] { display: none; }
.a-notice__in { padding-block: 14px 16px; }
.a-notice__head {
margin: 0 0 2px;
font-size: var(--step--1, 0.8125rem);
font-weight: 650;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent-on-subtle);
}
.a-notice__body {
margin: 0;
max-width: var(--measure, 68ch);
color: var(--text-strong);
line-height: 1.5;
}
.a-notice__body strong { color: var(--accent-on-subtle); }
.a-notice--preview {
border: 1px solid var(--border);
border-radius: 8px;
}
.a-notice--preview .a-notice__in { padding-inline: 18px; }
.a-job__shots {
display: flex;
gap: var(--space-comp-3);
margin: 0;
padding: 0;
list-style: none;
}
.a-job__shots li { flex: 0 1 132px; min-width: 0; }
.a-job__shots img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius-control);
border: 1px solid color-mix(in srgb, var(--text-on-invert) 28%, transparent);
box-shadow: var(--elev-2);
}
@media screen and (max-width: 560px) {
.a-job__shots li { flex: 0 1 96px; }
}
.a-bento__trucks--photo {
position: relative;
isolation: isolate;
justify-content: flex-end;
}
.a-bento__shot {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
}
.a-bento__trucks--photo::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
to top,
color-mix(in srgb, var(--surface-invert) 94%, transparent) 0%,
color-mix(in srgb, var(--surface-invert) 88%, transparent) 45%,
color-mix(in srgb, var(--surface-invert) 80%, transparent) 80%,
color-mix(in srgb, var(--surface-invert) 74%, transparent) 100%);
}
.a-bento__trucks--photo .s-h3,
.a-bento__trucks--photo .a-big { color: var(--text-on-invert); }
.a-bento__trucks--photo p      { color: var(--text-on-invert); }
.a-bento__trucks--photo .a-big { opacity: 0.22; }