/* Infrastor Transport & General Contracting — site stylesheet
   Industry design-system tokens retuned to the company-profile brand
   (navy wordmark #0d3870, bright-blue underline #0181fc).
   Fonts (Barlow / Barlow Condensed) are loaded with a <link> in each page head. */

:root {
  --color-bg: #f4f6fa;
  --color-surface: #e9eef5;
  --color-text: #101c30;
  --color-accent: #0d3870;
  --color-accent-2: #0181fc;
  --color-divider: color-mix(in srgb, #101c30 16%, transparent);

  --color-neutral-100: #f5f6f8; --color-neutral-200: #e6e8ec; --color-neutral-300: #d2d5db;
  --color-neutral-400: #b4b8c0; --color-neutral-500: #9498a2; --color-neutral-600: #767a84;
  --color-neutral-700: #595d66; --color-neutral-800: #3f424a; --color-neutral-900: #292b31;

  --color-accent-100: #eaf1fb; --color-accent-200: #d3e2f6; --color-accent-300: #adc6ea;
  --color-accent-400: #7fa2d3; --color-accent-500: #4f7ab7; --color-accent-600: #2a5896;
  --color-accent-700: #0d3870; --color-accent-800: #0a2a55; --color-accent-900: #081d3b;

  --color-accent-2-100: #e8f3ff; --color-accent-2-200: #cde5ff; --color-accent-2-300: #a3cfff;
  --color-accent-2-400: #6db2ff; --color-accent-2-500: #3597ff; --color-accent-2-600: #0181fc;
  --color-accent-2-700: #0066cc; --color-accent-2-800: #004c99; --color-accent-2-900: #003366;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px; --space-2: 6.8px; --space-3: 10.2px; --space-4: 13.6px; --space-6: 20.4px; --space-8: 27.2px;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #0a2a55 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #0a2a55 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #0a2a55 22%, transparent);

  --leading: 24px; --half: 12px;
  --edge: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); }
h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; } h4 { font-size: 20px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-2-700); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
[hidden] { display: none !important; }
.text-muted { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent-2) 30%, transparent); }

/* accessibility helpers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--edge); top: -100px; z-index: 100; padding: 8px 14px; background: var(--color-accent); color: #fff; font-family: var(--font-heading); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.skip-link:focus { top: 8px; color: #fff; }

/* blueprint frame + registration marks */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }
.blueprint > .corner { position: absolute; width: 15px; height: 15px; color: color-mix(in srgb, var(--color-text) 55%, transparent); pointer-events: none; }
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 7px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 7px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -8px; left: -8px; }
.blueprint > .corner.tr { top: -8px; right: -8px; }
.blueprint > .corner.bl { bottom: -8px; left: -8px; }
.blueprint > .corner.br { bottom: -8px; right: -8px; }
.on-dark > .corner { color: color-mix(in srgb, #fff 70%, transparent); }
.on-dark.blueprint { border-color: color-mix(in srgb, #fff 28%, transparent); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid var(--color-divider); padding: 11px 18px; border-radius: 0; }
.btn svg { display: block; }
.btn { height: auto; min-height: 42px; }
.btn-icon { width: 42px; padding: 0; }
.btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; }
.btn-primary:active { background: var(--color-accent-800); }
.btn-bright { background: var(--color-accent-2); color: #fff; border-color: var(--color-accent-2); }
.btn-bright:hover { background: var(--color-accent-2-700); border-color: var(--color-accent-2-700); color: #fff; }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent-700); border-color: transparent; padding-inline: 6px; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-inverse { color: #fff; border-color: color-mix(in srgb, #fff 45%, transparent); }
.btn-inverse:hover { background: color-mix(in srgb, #fff 12%, transparent); color: #fff; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: progress; }

/* forms */
.field > label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input { width: 100%; min-height: 42px; padding: 8px 12px; font: inherit; font-size: 15px; color: var(--color-text); caret-color: var(--color-accent-2); background: #fff; border: 1px solid var(--color-divider); border-radius: 0; }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent-2); outline-offset: 0; }
textarea.input { min-height: 120px; resize: vertical; }
select.input { appearance: none; }
.form-status { margin: 0; padding: var(--half) var(--leading); font-size: 14px; line-height: 20px; border: 1px solid #b00020; color: #b00020; background: #fff5f6; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* tags */
.tag { display: inline-flex; align-items: center; font-size: 12px; letter-spacing: .04em; padding: 4px 10px; border-radius: 0; text-decoration: none; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-outline { border: 1px solid var(--color-divider); color: var(--color-text); }
a.tag-outline:hover { border-color: var(--color-accent-2); color: var(--color-accent-2-700); }

/* nav */
.nav { display: flex; align-items: center; gap: var(--space-6); padding: 14px var(--edge); border-bottom: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; }
.nav-brand { margin-right: auto; display: flex; align-items: center; }
.nav-brand img { height: 52px; width: auto; margin-block: -4.5px; } /* larger wordmark; negative margin keeps the bar height */
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav a { color: inherit; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.nav a:hover { color: var(--color-accent-2-700); }
.nav a[aria-current='page'] { color: var(--color-accent-700); box-shadow: inset 0 -2px 0 var(--color-accent-2); }
.nav a.btn { box-shadow: none; color: #fff; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; background: transparent; border: 1px solid var(--color-divider); color: var(--color-text); cursor: pointer; }
.nav-toggle:hover { border-color: var(--color-accent-2); color: var(--color-accent-2-700); }
.nav-toggle svg { display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--half) var(--edge) var(--leading); background: var(--color-bg); border-bottom: 1px solid var(--color-divider); box-shadow: var(--shadow-md); }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a { padding: var(--half) 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
  .nav-links a[aria-current='page'] { box-shadow: inset 3px 0 0 var(--color-accent-2); padding-left: var(--half); }
  .nav-links a.btn { margin-top: var(--half); border-bottom: 0; justify-content: center; }
}

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--color-text) 70%, transparent); padding: var(--half) var(--half); border-bottom: 1px solid var(--color-divider); }
.table td { padding: var(--half) var(--half); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); vertical-align: top; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
.table .num { font-family: var(--font-heading); font-weight: 600; font-size: 22px; font-feature-settings: "tnum" 1; color: var(--color-accent-700); }

/* page grammar */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.kicker { display: block; font-size: 13px; line-height: var(--half); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-2-700); font-feature-settings: "tnum" 1; margin: 0 0 var(--half); }
.caption-rule { height: 1px; border: 0; margin: 0 0 var(--leading); background: var(--color-divider); }
.display { font-family: var(--font-heading); font-weight: 700; font-size: clamp(44px, 6.4vw, 88px); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 0 -0.04em; }
.display .line { display: block; }
.section-title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; margin: 0; }
.cell-title { font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: var(--leading); letter-spacing: .02em; text-transform: uppercase; margin: 0; }
.cell-frame { position: relative; border: 1px solid var(--color-divider); padding: var(--leading); display: flex; flex-direction: column; gap: var(--half); }
.cell-frame p { margin: 0; font-size: 15px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.section { padding-top: calc(3 * var(--leading)); padding-bottom: calc(3 * var(--leading)); } /* longhand so .wrap keeps its side padding */
.grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .section { padding-top: calc(2 * var(--leading)); padding-bottom: calc(2 * var(--leading)); } }

/* steel field — navy ground, type reversed */
.field-dark { background: var(--color-accent-800); color: #fff; }
.field-dark .kicker { color: var(--color-accent-2-400); }
.field-dark .caption-rule { background: color-mix(in srgb, #fff 24%, transparent); }
.field-dark .cell-frame { border-color: color-mix(in srgb, #fff 28%, transparent); }
.field-dark .cell-frame p { color: color-mix(in srgb, #fff 82%, transparent); }
.field-dark .blueprint > .corner { color: color-mix(in srgb, #fff 70%, transparent); }
.field-dark .table th { color: color-mix(in srgb, #fff 75%, transparent); border-color: color-mix(in srgb, #fff 28%, transparent); }
.field-dark .table td { border-color: color-mix(in srgb, #fff 14%, transparent); }
.field-dark .table .num { color: var(--color-accent-2-400); }
.field-dark .table tbody tr:hover { background: color-mix(in srgb, #fff 5%, transparent); }
.field-dark a { color: #fff; }

/* figure — photographs shown in full colour, filling their frame */
.figure { position: relative; aspect-ratio: 4 / 3; }
.figure > img { width: 100%; height: 100%; object-fit: cover; }

/* home hero — full-bleed photograph / looping video under a dark scrim, copy reversed to white (canvas "hero-full") */
.hero-full { position: relative; isolation: isolate; display: grid; align-items: end; min-height: min(88vh, 860px); min-height: min(88svh, 860px); margin-bottom: calc(3 * var(--leading)); color: #fff; overflow: hidden; }
.hero-full .hero-media { position: absolute; inset: 0; z-index: -2; background: var(--color-accent-900); }
.hero-full .hero-media > img, .hero-full .hero-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; }
.hero-full .hero-video { opacity: 0; transition: opacity 900ms ease; } /* motion.js adds .is-playing once the video runs; the poster shows until then */
.hero-full .hero-video.is-playing { opacity: 1; }
.hero-full .hero-scrim { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, color-mix(in srgb, var(--color-accent-900) 55%, transparent) 0%, transparent 28%, transparent 55%, color-mix(in srgb, var(--color-accent-900) 88%, transparent) 100%),
  linear-gradient(90deg, color-mix(in srgb, var(--color-accent-900) 62%, transparent) 0%, color-mix(in srgb, var(--color-accent-900) 20%, transparent) 55%, transparent 100%); }
.hero-full .hero-copy { position: relative; width: 100%; padding-top: calc(4 * var(--leading)); padding-bottom: calc(3 * var(--leading)); }
.hero-full .hero-copy > .kicker { color: #fff; }
/* the wordmark is a CSS mask so it can be reversed to white and lit by the sweep; browsers without mask support get the white PNG */
.hero-full .hero-mark { position: relative; width: min(100%, 520px); aspect-ratio: 900 / 314; margin: 0 0 var(--leading); background: #fff;
  -webkit-mask: url("../img/logo-wordmark.png") left center / contain no-repeat; mask: url("../img/logo-wordmark.png") left center / contain no-repeat; }
@supports not ((mask: url("#m")) or (-webkit-mask: url("#m"))) {
  .hero-full .hero-mark { background: url("../img/logo-reverse.png") left center / contain no-repeat; }
  .hero-full .hero-shine { display: none; }
}
.hero-full .hero-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, var(--color-accent-2-300) 48%, #fff 52%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; opacity: 0; }
.hero-full .display .line:nth-child(2) { color: var(--color-accent-2-300); }
@media (max-width: 880px) {
  .hero-full { min-height: min(78vh, 720px); min-height: min(78svh, 720px); }
  .hero-full .hero-media > img, .hero-full .hero-media > video { object-position: 70% 50%; }
  .hero-full .hero-mark { width: min(100%, 320px); }
}
.figure figcaption { position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--color-accent-900); color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; }

/* footer */
.footer { border-top: 1px solid var(--color-divider); padding: calc(2 * var(--leading)) 0; font-size: 14px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--color-accent-2-700); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--leading) clamp(20px, 4vw, 60px); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h2 { font-family: var(--font-heading); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text); margin: 0 0 var(--half); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stat-num { font-family: var(--font-heading); font-weight: 700; font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: -.01em; font-feature-settings: "tnum" 1; }
.list-rule { list-style: none; margin: 0; padding: 0; }
.list-rule li { padding: var(--half) 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); display: flex; gap: var(--half); align-items: baseline; font-size: 15px; line-height: var(--leading); }
.list-rule li::before { content: "+"; color: var(--color-accent-2-700); font-weight: 700; flex: none; width: 14px; }

/* prose pages (privacy policy, 404) */
.prose { max-width: 70ch; font-size: 16px; line-height: var(--leading); }
.prose h2 { font-family: var(--font-heading); font-weight: 600; font-size: 24px; letter-spacing: .02em; text-transform: uppercase; margin: calc(1.5 * var(--leading)) 0 var(--half); }
.prose p, .prose ul { margin: 0 0 var(--half); color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 4px; }

/* ── motion: easing tokens, press feedback and hover states (hover only on fine pointers) ── */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); }
.btn { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out); }
.btn:active { transform: scale(.97); }
.input { transition: border-color 140ms ease; }
.cell-title { transition: color 180ms ease; }
.cell-frame { transition: transform 220ms var(--ease-out), border-color 200ms ease, background-color 200ms ease; }
.blueprint > .corner { transition: color 200ms ease; }
.figure:not(.blueprint) { overflow: hidden; }
.figure:not(.blueprint) > img { transition: transform 600ms var(--ease-out); }
.table tbody tr { transition: background-color 140ms ease; }
.nav a:not(.nav-brand):not(.btn) { position: relative; transition: color 150ms ease; }
.nav a:not(.nav-brand):not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--color-accent-2); transform: scaleX(0); transform-origin: left; transition: transform 160ms var(--ease-out); }
.footer a, .list-rule li { transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  a.cell-frame:hover { transform: translateY(-2px); border-color: var(--color-accent-2); background: color-mix(in srgb, var(--color-accent-2) 4%, transparent); }
  a.cell-frame:hover .cell-title { color: var(--color-accent-700); }
  a.cell-frame:hover > .corner { color: var(--color-accent-2); }
  a.cell-frame:active { transform: translateY(-1px) scale(.995); }
  .figure:not(.blueprint):hover > img { transform: scale(1.035); }
  .blueprint.figure:hover > .corner { color: var(--color-accent-2); }
  .nav a:not(.nav-brand):not(.btn):not([aria-current]):hover::after { transform: scaleX(1); }
}

/* scroll reveal — motion.js marks blocks with data-reveal and adds .is-in as they enter the viewport */
html.js-motion [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
html.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* hero entrance — motion.js sets .hero-arm (from-state) then .hero-go (release) on <html>; visible is the base state.
   The wordmark wipes in along its own slant, a light sweep passes over it, then the copy follows. */
.hero-arm .hero-full .hero-copy > *, .hero-arm .hero-full .display .line { opacity: 0; transform: translateY(14px); }
.hero-arm .hero-full .display { opacity: 1; transform: none; }
.hero-arm .hero-full .hero-copy > .caption-rule { transform: scaleX(0); transform-origin: left; }
.hero-arm .hero-full .hero-mark { opacity: 1; transform: none; clip-path: polygon(-12% 0, 0 0, -12% 100%, -24% 100%); }
.hero-arm .hero-full .hero-media { transform: scale(1.06); }
.hero-go .hero-full .hero-copy > *, .hero-go .hero-full .display .line { opacity: 1; transform: none; transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); transition-delay: var(--d, 0ms); }
.hero-go .hero-full .hero-copy > .caption-rule { transform: none; }
.hero-go .hero-full .hero-mark { clip-path: polygon(0 0, 112% 0, 124% 100%, 12% 100%); transition: clip-path 1000ms var(--ease-out) 220ms; }
.hero-go .hero-full .hero-media { transform: none; transition: transform 2400ms var(--ease-out); }
.hero-go .hero-full .hero-shine { animation: hero-shine 1100ms var(--ease-in-out) 1150ms 1 both; }
@keyframes hero-shine { 0% { opacity: 0; background-position: 130% 0; } 15% { opacity: .9; } 85% { opacity: .9; } 100% { opacity: 0; background-position: -30% 0; } }
.hero-full .hero-copy > .kicker        { --d: 60ms; }
.hero-full .hero-copy > .caption-rule  { --d: 120ms; }
.hero-full .hero-copy > .hero-mark     { --d: 220ms; }
.hero-full .display .line:nth-child(1) { --d: 900ms; }
.hero-full .display .line:nth-child(2) { --d: 980ms; }
.hero-full .hero-copy > p              { --d: 1080ms; }
.hero-full .hero-copy > .hero-actions  { --d: 1180ms; }

/* certificate plates (Home + About) */
.cert-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .cert-row { grid-template-columns: 1fr; } }
.cert-plate .cert-link { transition: color 150ms ease; }
.cert-thumb > img { transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cert-plate:hover .cert-link { color: var(--color-accent-2); }
  .cert-plate:hover .cert-thumb > img { transform: scale(1.03); }
}

/* sliders — Home services cards and Fleet equipment gallery; site.js drives the buttons, counter and mouse drag */
.slider-track { cursor: grab; user-select: none; -webkit-user-select: none; scroll-behavior: smooth; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 4px; }
.slider-track img { pointer-events: none; }
.slider-card { transition: transform 240ms var(--ease-out); }
.slider-btn { background: transparent; transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, opacity 150ms ease; }
.slider-btn:disabled { opacity: .35; cursor: default; }
.slider-btn:active:not(:disabled) { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .slider-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-text); }
  .slider-btn.on-dark:hover:not(:disabled) { background: color-mix(in srgb, #fff 10%, transparent); border-color: #fff; }
}

/* "What we do" — single-card stage: one square photo card at a time, round arrows over the edges, dots below */
.svc-card img { transition: transform 700ms var(--ease-out); }
.svc-card .cell-title { transition: color 180ms ease; }
.svc-card > .corner { color: color-mix(in srgb, #fff 70%, transparent); }
.svc-card:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .svc-card:hover img { transform: scale(1.04); }
  .svc-card:hover .cell-title { color: var(--color-accent-2-300); }
  .svc-card:active img { transform: scale(1.02); }
}
.svc-arrow { position: absolute; top: calc(50% - 22px); z-index: 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #fff; color: var(--color-accent); border: 1px solid var(--color-divider); box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--color-accent-900) 35%, transparent);
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, opacity 200ms ease; }
.svc-arrow-prev { left: 0; } .svc-arrow-next { right: 0; }
.svc-arrow:disabled { opacity: 0; pointer-events: none; }
.svc-arrow:active:not(:disabled) { transform: scale(.94); }
.svc-arrow:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .svc-arrow:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } }
.svc-dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.svc-dot i { display: block; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--color-text) 22%, transparent); transition: transform 200ms var(--ease-out), background-color 200ms ease; }
.svc-dot[aria-selected="true"] i { background: var(--color-accent); transform: scale(1.35); }
@media (hover: hover) and (pointer: fine) { .svc-dot:hover i { background: color-mix(in srgb, var(--color-text) 45%, transparent); } .svc-dot[aria-selected="true"]:hover i { background: var(--color-accent); } }
.svc-dot:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 1px; border-radius: 50%; }
@media (max-width: 600px) { .svc-stage { padding: 0 !important; } .svc-arrow { width: 44px; height: 44px; top: calc(50% - 30px); } .svc-arrow-prev { left: 8px; } .svc-arrow-next { right: 8px; } }

/* "About the company" intro — copy slides in from the left in sequence, the photo rises and un-clips upward.
   motion.js adds .is-in to the [data-own-motion] block when it comes into view; visible is the base state. */
html.js-motion .about-intro .ai-in { opacity: 0; transform: translateX(-48px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
html.js-motion .about-intro .ai-img { opacity: 0; transform: translateY(64px); transition: opacity 600ms var(--ease-out), transform 1100ms var(--ease-out); transition-delay: 100ms; }
html.js-motion .about-intro .ai-clip { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease-in-out) 100ms; }
html.js-motion .about-intro .ai-clip img { transform: scale(1.12); transition: transform 1600ms var(--ease-out) 100ms; }
html.js-motion .about-intro.is-in .ai-in,
html.js-motion .about-intro.is-in .ai-img { opacity: 1; transform: none; }
html.js-motion .about-intro.is-in .ai-clip { clip-path: inset(0 0 0 0); }
html.js-motion .about-intro.is-in .ai-clip img { transform: none; }

/* "why Infrastor" photo cards */
.why-card .figure img { transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .why-card:hover .figure img { transform: scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active, a.cell-frame:hover, a.cell-frame:active, .figure:not(.blueprint):hover > img { transform: none; }
  html.js-motion [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-arm .hero-full .hero-copy > *, .hero-arm .hero-full .display .line { opacity: 1; transform: none; }
  .hero-arm .hero-full .hero-mark { clip-path: none; }
  .hero-arm .hero-full .hero-media { transform: none; }
  .hero-go .hero-full .hero-shine { animation: none; }
  .hero-full .hero-video { display: none; }
  .cert-plate:hover .cert-thumb > img, .why-card:hover .figure img, .svc-card img, .svc-card:hover img { transform: none; transition: none; }
  .slider-track { scroll-behavior: auto; }
  .slider-btn:active:not(:disabled), .svc-arrow:active:not(:disabled) { transform: none; }
  html.js-motion .about-intro .ai-in, html.js-motion .about-intro .ai-img { transform: none; transition: opacity 300ms ease; transition-delay: 0ms; }
  html.js-motion .about-intro .ai-clip { clip-path: none; transition: none; }
  html.js-motion .about-intro .ai-clip img { transform: none; transition: none; }
}

@media print {
  .nav, .skip-link, .footer .btn { display: none !important; }
  .field-dark { background: #fff !important; color: var(--color-text) !important; }
}