/* Hallmark · macrostructure: Photographic (08) · nav: adapted-N1 · footer: Ft1-extended
 * H6 Photographic-fold hero knobs: image=full-bleed, caption=lower-left, text-below=false
 * F1(services) knobs: tiles=11, spans=irregular, border=none · T4(stats) knobs: layout=4-up
 * motion: reveal-on-scroll(once) · count-up · accordion-grid-rows · scroll-snap slider
 */

/* tokens.css and fonts.css are linked from the page head (parallel loading) — not @imported here */

/* ============================= RESET ============================= */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; }
html, body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ============================= BASE ============================= */
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: inherit;
}

p { max-width: var(--measure); }
p.lede { font-size: var(--text-md); color: var(--color-ink-2); line-height: 1.6; }

.eyebrow {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--dark { background: var(--color-paper-dark); color: var(--color-ink-dark); }
.section--dark p, .section--dark .muted { color: var(--color-muted-dark); }
/* softens the hard light->dark cut at the top of a dark section into a
 * gradual blend, instead of a single hairline seam between sections. Content
 * gets extra top padding so it starts on solid dark, past the fade zone —
 * otherwise a heading can land partway through the transition where contrast
 * is weaker. A crazy-paving stone mosaic (see stonePavingFadeSvg() in
 * templates.mjs — the same motif the header's "MS" mark fills its letters
 * with, rebuilt as a genuinely tileable SVG <pattern>) sits over the
 * transition, fading top-to-bottom via the SVG's own <mask>. */
.section--fade-top {
  position: relative;
  background: linear-gradient(to bottom, var(--color-paper) 0%, var(--color-paper-dark) 9rem);
  padding-top: 15rem;
  padding-bottom: 15rem;
}
.fade-paving {
  position: absolute; top: 0; left: 0; right: 0;
  pointer-events: none;
}
.section--fade-top > .container { position: relative; z-index: 1; }

.muted { color: var(--color-muted); }

.rule { border: none; border-top: 1px solid var(--color-rule); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.skip-link {
  position: fixed; top: -100%; left: var(--space-md); z-index: var(--z-toast);
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm);
  transition: top var(--dur-short) var(--ease-out);
}
.skip-link:focus { top: var(--space-md); }

/* ============================= BUTTONS ============================= */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  white-space: nowrap;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-ink); color: var(--color-paper);
  border: 1px solid var(--color-ink);
}
.btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:disabled { background: var(--color-rule-strong); border-color: var(--color-rule-strong); color: var(--color-neutral); cursor: not-allowed; }

.btn--outline {
  background: transparent; color: var(--color-ink);
  border: 1px solid var(--color-rule-strong);
}
.btn--outline:hover { border-color: var(--color-ink); background: var(--color-paper-2); }

.btn--on-dark { color: var(--color-ink-dark); border-color: var(--color-rule-dark); }
.btn--on-dark:hover { background: var(--color-paper-dark-3); border-color: var(--color-ink-dark); }

.btn--accent {
  background: var(--color-accent); color: var(--color-accent-ink);
  border: 1px solid var(--color-accent);
}
.btn--accent:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }

.btn--sm { padding: 0.6em 1.1em; font-size: var(--text-xs); }
.btn svg { width: 1em; height: 1em; flex: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 600; font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-rule-strong);
  padding-bottom: 0.15em;
  transition: border-color var(--dur-short) var(--ease-out), gap var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.link-arrow:hover { border-color: var(--color-accent); color: var(--color-accent); gap: 0.6em; }
.link-arrow svg { width: 1em; height: 1em; flex: none; }

/* ============================= NAV (adapted-N1, floating/shrink/hide) ============================= */
/* Fixed + floating: starts wide (inset a small fixed margin from both edges),
 * shrinks its side insets into a centered pill once scrolled, and slides off
 * screen when scrolling down / slides back in when scrolling up. `main` gets
 * a top offset (below) since the nav no longer takes up flow space. */
:root { --nav-offset: 6rem; } /* JS refines this to the nav's exact rendered height */

.site-nav {
  position: fixed; top: var(--space-md); left: var(--space-md); right: var(--space-md);
  z-index: var(--z-sticky);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-whisper);
  transition: left var(--dur-long) var(--ease-out), right var(--dur-long) var(--ease-out),
              border-radius var(--dur-long) var(--ease-out), box-shadow var(--dur-short) var(--ease-out),
              transform var(--dur-long) var(--ease-out);
}
.site-nav.is-pill {
  /* half of .container's own 78rem max-width, so the shrunk pill lines up
   * with the same edges as the content sections below it instead of reading
   * narrower. */
  left: max(var(--space-md), calc(50% - 39rem));
  right: max(var(--space-md), calc(50% - 39rem));
  box-shadow: 0 12px 28px oklch(20% 0.02 60 / 0.12);
}
.site-nav.is-hidden { transform: translateY(calc(-100% - var(--space-lg))); }

main { padding-top: var(--nav-offset); }

.site-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-sm);
  /* overrides .container's clamp() padding AND max-width/auto-margin centering —
   * the nav card is already the right width, its content shouldn't cap narrower */
  padding-inline: var(--space-lg);
  max-width: none;
  margin-inline: 0;
}

.site-nav__brand { display: flex; align-items: center; flex: none; }
.site-nav__brand img { height: 28px; width: auto; }

.site-nav__links {
  display: flex; align-items: center; gap: var(--space-xl);
  list-style: none; margin: 0; padding: 0;
}
.site-nav__links a {
  font-size: var(--text-sm); font-weight: 500;
  padding-block: var(--space-2xs);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
  white-space: nowrap;
}
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { border-color: var(--color-accent); color: var(--color-accent-ink); }

.site-nav__right { display: flex; align-items: center; gap: var(--space-md); flex: none; }
.site-nav__phone { font-family: var(--font-outlier); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.site-nav__phone:hover { color: var(--color-accent); }

/* services dropdown */
.nav-drop { position: relative; }
.nav-drop__trigger { display: inline-flex; align-items: center; gap: 0.35em; }
.nav-drop__trigger svg { width: 0.7em; height: 0.7em; transition: transform var(--dur-short) var(--ease-out); }
.nav-drop.is-open .nav-drop__trigger svg { transform: rotate(180deg); }

.nav-drop__panel {
  position: absolute; top: calc(100% + var(--space-md)); left: 50%; transform: translateX(-50%);
  width: min(46rem, 88vw);
  background: var(--color-paper); border: 1px solid var(--color-rule);
  box-shadow: 0 12px 32px oklch(20% 0.02 60 / 0.14);
  padding: var(--space-lg);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-xl);
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-6px);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility var(--dur-short);
  z-index: var(--z-dropdown);
}
.nav-drop.is-open .nav-drop__panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop__panel a {
  display: block; padding: var(--space-sm) var(--space-sm);
  font-size: var(--text-sm); border-radius: var(--radius-sm);
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.nav-drop__panel a:hover { background: var(--color-paper-2); color: var(--color-accent-ink); }

.nav-toggle { display: none; flex: none; padding: var(--space-xs); }
.nav-toggle svg { width: 22px; height: 22px; }

/* mobile panel */
.mobile-panel {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--color-paper-dark); color: var(--color-ink-dark);
  padding: var(--space-xl) clamp(1.25rem, 6vw, 2.5rem);
  display: flex; flex-direction: column; gap: var(--space-2xl);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out), visibility var(--dur-long);
  overflow-y: auto;
}
.mobile-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-panel__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-panel__top img { height: 26px; filter: brightness(0) invert(1); }
.mobile-panel__close svg { width: 24px; height: 24px; }
.mobile-panel__links { display: flex; flex-direction: column; gap: var(--space-lg); font-family: var(--font-display); }
.mobile-panel__links > li > a { font-size: var(--text-2xl); font-weight: 550; }
.mobile-panel__sub { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); padding-left: var(--space-md); border-left: 1px solid var(--color-rule-dark); }
.mobile-panel__sub a { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-muted-dark); }
.mobile-panel__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-sm); font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted-dark); }

body.nav-open { overflow: hidden; }

/* ============================= HERO — H6 Photographic fold ============================= */
/* page-hero variants: image stands alone, caption sits below it on paper.
 * Homepage hero is different — the eyebrow/lede/CTAs overlay the image itself,
 * anchored over the blank pavement margin below the paver-laid lettering. */
.hero { position: relative; }
.hero__media { position: relative; overflow: hidden; width: 100%; background: var(--color-paper-2); }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

/* homepage hero only — aspect-ratio (not vh) drives the crop so the paver-laid
 * "MIASTONE" lettering stays fully in frame at every viewport width, instead of
 * a fixed vh height that crops more or less aggressively depending on window
 * height. Ratio matches the source photo's own ~1.8:1 ratio (2752×1536) so
 * object-fit: cover needs almost no crop in either direction at any width —
 * the full word stays uncropped top-to-bottom AND left-to-right. Mobile gets a
 * slightly taller ratio since the overlaid lede/CTAs need a little more room
 * below the lettering than the desktop margin alone provides — kept close to
 * 1.8 on purpose so the word doesn't lose its sides to the crop. */
.hero:not(.page-hero) .hero__media { aspect-ratio: 1.8 / 1; max-height: 72vh; }
@media (max-width: 40rem) {
  .hero:not(.page-hero) .hero__media { aspect-ratio: 1.4 / 1; max-height: 78vh; }
}

/* aspect-ratio, not vh min/max-height — vh sizing made this box's shape
 * depend on the browser window's height, so on a normal wide/short desktop
 * window it came out ~5:1 against a ~1.5:1 source photo/video, throwing away
 * 70-80% of the vertical frame no matter what object-position said (same
 * bug already hit and fixed on the homepage hero). aspect-ratio keeps the
 * crop proportional and predictable regardless of window shape. */
.page-hero .hero__media { aspect-ratio: 2.1 / 1; max-height: 60vh; }
@media (max-width: 40rem) {
  .page-hero .hero__media { aspect-ratio: 1.5 / 1; max-height: 70vh; }
}
/* the box is still wider than the source photos, so a centered crop shows
 * background; the actual work usually sits lower in the frame. Per-page
 * focus can override via --hero-focus. */
.page-hero .hero__media img, .page-hero .hero__media video { object-position: var(--hero-focus, 50% 78%); }
.hero__media video { display: block; }
.hero__scrim {
  position: absolute; inset: auto 0 0 0; height: 35%;
  background: linear-gradient(0deg, oklch(12% 0.01 60 / 0.35) 0%, transparent 100%);
  pointer-events: none;
}
/* homepage only — the caption/CTAs sit over the image's own blank pavement
 * margin below the paver-laid lettering, so the scrim only needs to darken
 * that lower band, not the letters themselves. */
.hero:not(.page-hero) .hero__scrim {
  height: 34%;
  background: linear-gradient(0deg, oklch(10% 0.012 60 / 0.8) 0%, oklch(10% 0.012 60 / 0.38) 62%, transparent 100%);
}
.hero__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--space-lg);
  max-width: 78rem; margin-inline: auto;
  color: var(--color-ink-dark);
  text-align: center;
}
.hero__overlay-lede {
  font-family: var(--font-body); font-weight: 500; font-style: normal;
  font-size: clamp(1rem, 0.6vw + 0.85rem, var(--text-md));
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--color-ink-dark);
  max-width: 44ch;
  margin-inline: auto;
}
.hero__overlay-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-sm); margin-top: var(--space-md);
}

.hero__caption {
  padding-block: var(--space-2xl) var(--space-xl);
  max-width: 78rem; margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  color: var(--color-ink);
}
.hero__eyebrow { color: var(--color-accent-ink); font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.hero__title {
  font-size: var(--text-display);
  color: var(--color-ink);
  max-width: 18ch;
  margin-top: var(--space-sm);
}
.hero__lede { color: var(--color-ink-2); max-width: 50ch; margin-top: var(--space-md); font-size: var(--text-md); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }

.hero__below { background: var(--color-paper); }

/* ============================= STATS STRIP — T4 ============================= */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule);
}
.stats__item {
  padding: var(--space-xl) var(--space-lg);
  border-left: 1px solid var(--color-rule);
}
.stats__item:first-child { border-left: none; }
.stats__num {
  font-family: var(--font-outlier); font-weight: 600;
  font-size: var(--text-3xl); font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  display: inline-flex; align-items: baseline; gap: 0.1em;
}
.stats__unit { font-size: 0.5em; color: var(--color-accent-ink); }
.stats__label { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); max-width: 20ch; }

/* ============================= SECTION HEAD — S2 hanging (no eyebrow-left pattern) ============================= */
.section-head { max-width: 42rem; }
.section-head--wide { max-width: 54rem; }
.section-head h2 { font-size: var(--text-3xl); }
.section-head .lede { margin-top: var(--space-md); }
.section-head + * { margin-top: var(--space-2xl); }

/* ============================= SERVICES GRID — irregular spans ============================= */
.services-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: dense; /* the 2-span/3-span card mix doesn't tile evenly for
    every item count on its own — dense packing fills those leftover cells
    instead of leaving them empty (exposing the gap background as a gray patch) */
  gap: 1px;
  background: var(--color-paper);
  border: 1px solid var(--color-paper);
}
.service-card {
  grid-column: span 2;
  background: var(--color-paper);
  padding: var(--space-xl) var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-md);
  transition: background var(--dur-short) var(--ease-out);
  min-height: 15rem;
}
.service-card:hover { background: var(--color-paper-2); }
.service-card--fleet { grid-column: span 3; }
.service-card:nth-child(6n+1), .service-card:nth-child(6n+4) { grid-column: span 3; }
.service-card__num { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-neutral); }
.service-card h3 { font-size: var(--text-lg); font-weight: 600; margin-top: auto; }
.service-card p { font-size: var(--text-sm); color: var(--color-muted); }
.service-card .link-arrow { margin-top: var(--space-xs); }

/* ============================= SERVICE CARDS — 3-up, image fades in from corner ============================= */
.service-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.service-card2 {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--color-paper-dark-2);
  border: 1px solid var(--color-rule-dark);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  min-height: 16rem;
  display: flex; align-items: flex-end;
  transition: border-color var(--dur-short) var(--ease-out), border-style var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.service-card2:hover { border-style: solid; border-color: var(--color-ink-dark); background: var(--color-paper-dark-3); }
.service-card2__image {
  /* full card height, not a shorter box — otherwise the image just stops
   * partway down with a hard rectangular edge, before the diagonal mask
   * below ever gets a chance to taper it off. */
  position: absolute; top: 0; right: 0; bottom: 0; z-index: -1;
  width: 76%; height: 100%;
  object-fit: cover;
  opacity: 0.92;
  /* radial vignette anchored at the top-right corner instead of a single
   * diagonal — a straight diagonal only fades the bottom-left corner, so the
   * box's left edge stayed hard everywhere above that (visible cutoff up
   * near the top of each card). Distance-based fade tapers every direction
   * — left, down, and diagonally — so there's no hard edge on any side. */
  -webkit-mask-image: radial-gradient(circle at 100% 0%, black 0%, black 38%, transparent 70%);
  mask-image: radial-gradient(circle at 100% 0%, black 0%, black 38%, transparent 70%);
  transition: transform var(--dur-long) var(--ease-out);
}
.service-card2:hover .service-card2__image { transform: scale(1.06); }
.service-card2__body h3 { font-size: var(--text-lg); font-weight: 600; color: var(--color-ink-dark); }
.service-card2__body p { font-size: var(--text-sm); color: var(--color-muted-dark); margin-top: var(--space-2xs); max-width: 26ch; }

/* ============================= ABOUT SPLIT ============================= */
.about-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl);
  align-items: center;
}
.about-split__media { position: relative; }
.about-split__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.about-split__inline { display: none; }
.about-split__media::before {
  content: ""; position: absolute; inset: calc(var(--space-lg) * -1) auto auto calc(var(--space-lg) * -1);
  width: 60%; height: 60%; border: 1px solid var(--color-accent); z-index: -1;
}
.about-split__body h2 { font-size: var(--text-3xl); }
.about-split__body p { margin-top: var(--space-md); color: var(--color-ink-2); }
.about-split__facts { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.about-split__facts li { display: flex; gap: var(--space-sm); font-size: var(--text-sm); align-items: baseline; }
.about-split__facts li::before { content: "—"; color: var(--color-accent); flex: none; }

/* 2x2 stats block used in place of the media column on /meist/ — same
 * .stats markup as the homepage's full-bleed 4-across strip, just boxed
 * into a 2-column grid with its own border instead of top/bottom rules. */
.about-split__stats .stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--color-rule);
}
.about-split__stats .stats__item { border-left: 1px solid var(--color-rule); border-top: 1px solid var(--color-rule); }
.about-split__stats .stats__item:nth-child(odd) { border-left: none; }
.about-split__stats .stats__item:nth-child(-n+2) { border-top: none; }

/* ============================= PORTFOLIO SLIDER ============================= */
.portfolio { background: var(--color-paper-dark); color: var(--color-ink-dark); }
/* p.lede's own hardcoded dark ink color otherwise wins over the section's
 * light inherited color, leaving the description unreadable on this dark bg. */
.portfolio .lede { color: var(--color-muted-dark); }
.portfolio__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.portfolio__controls { display: flex; gap: var(--space-sm); }
.portfolio__controls button {
  width: 44px; height: 44px; border: 1px solid var(--color-rule-dark); border-radius: 50%;
  display: grid; place-items: center;
  transition: background var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.portfolio__controls button:hover { background: var(--color-paper-dark-3); border-color: var(--color-ink-dark); }
.portfolio__controls svg { width: 18px; height: 18px; }

.portfolio__track {
  margin-top: var(--space-xl);
  display: flex; gap: var(--space-lg);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--space-sm);
  scrollbar-width: none;
}
.portfolio__track::-webkit-scrollbar { display: none; }
.portfolio__slide {
  scroll-snap-align: start; flex: 0 0 auto;
  width: min(22rem, 78vw);
}
.portfolio__slide img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.portfolio__slide figcaption { margin-top: var(--space-sm); }
.portfolio__slide .tag { font-family: var(--font-outlier); font-size: var(--text-xs); color: oklch(72% 0.11 48); letter-spacing: 0.06em; text-transform: uppercase; }
.portfolio__slide h3 { font-size: var(--text-md); font-weight: 550; margin-top: 0.2em; }
.portfolio__note { margin-top: var(--space-lg); font-size: var(--text-xs); color: var(--color-muted-dark); }

/* ============================= FAQ — accordion ============================= */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); align-items: start; }
.faq__col { min-width: 0; }
@media (max-width: 60rem) { .faq { grid-template-columns: minmax(0, 1fr); max-width: 52rem; } }
.faq-item { border-bottom: 1px solid var(--color-rule); }
.faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-lg); text-align: left;
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 550;
}
.faq-item__q svg { flex: none; width: 20px; height: 20px; transition: transform var(--dur-short) var(--ease-out); }
.faq-item[data-open="true"] .faq-item__q svg { transform: rotate(45deg); }
.faq-item__a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-long) var(--ease-in-out); }
.faq-item[data-open="true"] .faq-item__a-wrap { grid-template-rows: 1fr; }
.faq-item__a-inner { overflow: hidden; }
.faq-item__a { padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: 60ch; }

/* ============================= CONTACT ============================= */
.contact-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.contact-info h2 { font-size: var(--text-3xl); }
.contact-info__list { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-lg); }
.contact-info__list dt { font-family: var(--font-outlier); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-neutral); }
.contact-info__list dd { margin: 0.25em 0 0; font-size: var(--text-md); }
.contact-info__list dd a:hover { color: var(--color-accent); }

.form-field { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.form-field label { font-size: var(--text-sm); font-weight: 600; }
.form-field input, .form-field textarea {
  background: var(--color-paper); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-sm);
  padding: 0.85em 1em; font-size: var(--text-base);
  transition: border-color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.form-field input:hover, .form-field textarea:hover { border-color: var(--color-neutral); }
.form-field input:focus-visible, .form-field textarea:focus-visible { border-color: var(--color-accent); outline: 2px solid var(--color-focus); outline-offset: 1px; }
.form-field textarea { resize: vertical; min-height: 9rem; }
.form-field.has-error input, .form-field.has-error textarea { border-color: var(--color-error); }
.form-field__error { font-size: var(--text-xs); color: var(--color-error); display: none; }
.form-field.has-error .form-field__error { display: block; }
.form-note { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-sm); }
.service-inquiry-note {
  font-size: var(--text-sm); color: var(--color-accent-ink);
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
}
.service-inquiry-note[hidden] { display: none; }
.form-status { font-size: var(--text-sm); margin-top: var(--space-md); display: none; }
.form-status.is-visible { display: block; }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ============================= CTA STRIP ============================= */
.cta-strip { position: relative; overflow: hidden; isolation: isolate; background: var(--color-paper-dark); color: var(--color-ink-dark); text-align: left; }
/* faint paving texture, fading out toward the footer below */
.cta-strip__paving { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.13; }
.cta-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; }
.cta-strip h2 { color: var(--color-ink-dark); font-size: var(--text-2xl); max-width: 26ch; }

/* ============================= FOOTER — Ft1 extended ============================= */
.site-footer { background: var(--color-paper-dark); color: var(--color-ink-dark); }
.foot-mast { padding-block: var(--space-3xl) var(--space-2xl); }
.foot-mast__wordmark { max-width: 20rem; }
.foot-mast__wordmark img { width: 100%; height: auto; filter: brightness(0) invert(1); opacity: 0.94; }
.foot-mast__tagline { margin-top: var(--space-lg); font-family: var(--font-display); font-size: var(--text-xl); max-width: 22ch; color: var(--color-ink-dark); }

.foot-band {
  border-top: 1px solid var(--color-rule-dark);
  padding-block: var(--space-2xl);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl);
}
.foot-band h4 { font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted-dark); margin-bottom: var(--space-md); font-weight: 500;}
.foot-band ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.foot-band a { font-size: var(--text-sm); color: var(--color-ink-dark); }
.foot-band a:hover { color: var(--color-accent-2); }
.foot-band address { font-style: normal; font-size: var(--text-sm); color: var(--color-muted-dark); line-height: 1.7; }
.foot-band address a { color: var(--color-ink-dark); }
.foot-company__addr { margin-top: 1.7em; } /* one blank line between registry numbers and address, as before */

.foot-legal {
  border-top: 1px solid var(--color-rule-dark);
  padding-block: var(--space-lg);
  display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--color-muted-dark);
}

/* ============================= REVEAL / MOTION ============================= */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-visible {
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
}

/* ============================= SERVICE DETAIL PAGE ============================= */
.service-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-2xl); align-items: start; }
.service-detail__body h1 { font-size: var(--text-3xl); }
.service-detail__list { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.service-detail__list li { display: flex; gap: var(--space-sm); font-size: var(--text-md); }
.service-detail__list li::before { content: "✔"; color: var(--color-accent); flex: none; }
.service-detail__aside {
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  padding: var(--space-xl);
}
.service-detail__aside h3 { font-size: var(--text-md); }
.service-detail__aside ul { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.service-detail__aside a { font-size: var(--text-sm); padding-block: var(--space-2xs); display: block; }
.service-detail__aside a:hover { color: var(--color-accent); }

.related-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.portfolio-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.portfolio-card .tag {
  display: block; margin-top: var(--space-sm);
  font-family: var(--font-outlier); font-size: var(--text-xs);
  color: oklch(72% 0.11 48); letter-spacing: 0.06em; text-transform: uppercase;
}
.portfolio-card h3 { font-size: var(--text-md); font-weight: 550; margin-top: 0.2em; }

/* ============================= BREADCRUMB ============================= */
.breadcrumb { font-size: var(--text-xs); color: var(--color-muted); display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--color-accent); }

/* breadcrumb overlaid on a page-hero's own photo instead of sitting in the
 * page flow below it — a small translucent chip so it stays legible
 * regardless of how bright or busy the underlying photo is. */
.hero__crumb {
  position: absolute; top: var(--space-lg); left: clamp(1.25rem, 4vw, 3rem); z-index: 1;
}
.hero__crumb .breadcrumb {
  color: var(--color-ink-dark);
  background: oklch(12% 0.01 60 / 0.45);
  backdrop-filter: blur(6px);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
}
.hero__crumb .breadcrumb a { color: inherit; opacity: 0.8; }
.hero__crumb .breadcrumb a:hover { opacity: 1; color: var(--color-ink-dark); }

/* ============================= RESPONSIVE ============================= */
@media (max-width: 60rem) {
  .site-nav__links, .site-nav__phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero__title { max-width: 14ch; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__item:nth-child(3) { border-left: none; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card, .service-card:nth-child(6n+1), .service-card:nth-child(6n+4) { grid-column: span 1; }
  .service-card--fleet { grid-column: 1 / -1; }
  .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-split, .contact-split, .service-detail { grid-template-columns: minmax(0, 1fr); }
  /* single column: the photo sits between the headline and the paragraph instead of above the headline */
  .about-split__media { display: none; }
  .about-split__inline { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; margin-top: var(--space-lg); }
  .foot-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .related-services { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .container { padding-inline: 1rem; }
  .hero__title { font-size: var(--text-display-s); max-width: 13ch; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-band { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .foot-legal { flex-direction: column; gap: var(--space-xs); }
  .cta-strip__inner { flex-direction: column; align-items: flex-start; }
  .portfolio__slide { width: 82vw; }
  .btn { width: 100%; justify-content: center; }
  .hero__actions .btn { width: auto; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  /* hero overlay CTAs stay compact/inline here — full-width stacked buttons
   * would push the mobile hero out taller than it needs to be */
  .hero__overlay-actions .btn { width: auto; }
  .hero__overlay { padding-bottom: var(--space-md); }
  .hero__overlay-actions { gap: var(--space-xs); }
  .service-cards { grid-template-columns: minmax(0, 1fr); }
  .service-card2 { min-height: 13rem; }
}

/* ============================= COOKIE CONSENT ============================= */
.btn--light { background: var(--color-ink-dark); color: var(--color-paper-dark); border: 1px solid var(--color-ink-dark); }
.btn--light:hover { background: var(--color-muted-dark); border-color: var(--color-muted-dark); }

.cookie-bar {
  position: fixed; bottom: var(--space-sm); left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 1rem), 64rem); z-index: 200;
  background: var(--color-paper-dark); color: var(--color-ink-dark);
  border: 1px solid var(--color-rule-dark); border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
  box-shadow: 0 20px 50px -20px oklch(10% 0 0 / 0.5);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { color: var(--color-muted-dark); font-size: var(--text-sm); margin: 0; max-width: 52ch; }
.cookie-bar__title { font-family: var(--font-display); color: var(--color-ink-dark) !important; font-size: var(--text-md) !important; margin-bottom: 0.25rem !important; }
.cookie-bar__text a { color: var(--color-ink-dark); text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar__text a:hover { color: var(--color-accent-2); }
.cookie-bar__actions { display: flex; gap: var(--space-xs); flex: none; flex-wrap: wrap; }
.cookie-bar__actions .btn, .cookie-panel__foot .btn { justify-content: center; }
@media (max-width: 40rem) {
  .cookie-bar { padding: var(--space-md); }
  .cookie-bar__actions { width: 100%; }
  .cookie-bar__actions .btn { flex: 1 1 0; padding-inline: 0.5rem; }
}

.cookie-panel { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1rem; }
.cookie-panel[hidden] { display: none; }
.cookie-panel__backdrop { position: absolute; inset: 0; background: oklch(10% 0.01 60 / 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cookie-panel__box {
  position: relative; width: min(30rem, 100%); max-height: calc(100svh - 2rem); overflow-y: auto;
  background: var(--color-paper-dark); color: var(--color-ink-dark); border: 1px solid var(--color-rule-dark);
  border-radius: var(--radius-md); padding: var(--space-lg); box-shadow: 0 30px 70px -20px oklch(5% 0 0 / 0.7);
}
.cookie-panel__box:focus { outline: none; }
.cookie-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-md); }
.cookie-panel__head h2 { color: var(--color-ink-dark); font-size: var(--text-xl); margin: 0; }
.cookie-panel__x {
  width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.75rem; line-height: 1; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-muted-dark);
}
.cookie-panel__x:hover { color: var(--color-ink-dark); border-color: var(--color-rule-dark); }
.cookie-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; border-top: 1px solid var(--color-rule-dark); }
.cookie-row__text p { margin: 0; font-size: var(--text-sm); color: var(--color-muted-dark); }
.cookie-row__text .cookie-row__label { color: var(--color-ink-dark); font-weight: 600; font-size: var(--text-base); margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cookie-badge { font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 999px; border: 1px solid var(--color-rule-dark); color: var(--color-muted-dark); }
.cookie-badge--on { border-color: transparent; background: color-mix(in oklab, var(--color-success) 28%, transparent); color: oklch(88% 0.12 150); }

.cookie-switch { position: relative; flex: none; display: inline-block; width: 3rem; height: 1.75rem; margin-top: 0.15rem; cursor: pointer; }
.cookie-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cookie-switch__ui { position: absolute; inset: 0; border-radius: 999px; background: var(--color-paper-dark-3); border: 1px solid var(--color-rule-dark); transition: background 0.2s; pointer-events: none; }
.cookie-switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--color-ink-dark); transition: transform 0.2s; }
.cookie-switch input:checked + .cookie-switch__ui { background: var(--color-accent); border-color: var(--color-accent); }
.cookie-switch input:checked + .cookie-switch__ui::after { transform: translateX(1.2rem); background: var(--color-accent-ink); }
.cookie-switch input:disabled { cursor: not-allowed; }
.cookie-switch input:disabled + .cookie-switch__ui { opacity: 0.55; }
.cookie-switch input:focus-visible + .cookie-switch__ui { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.cookie-panel__foot { display: flex; gap: var(--space-xs); justify-content: flex-end; padding-top: var(--space-md); border-top: 1px solid var(--color-rule-dark); }
@media (max-width: 40rem) {
  .cookie-panel { place-items: end center; padding: 0; }
  .cookie-panel__box { border-radius: var(--radius-md) var(--radius-md) 0 0; max-height: 92svh; padding: var(--space-md); }
  .cookie-panel__foot .btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .cookie-switch__ui, .cookie-switch__ui::after { transition: none; } }

/* ---- footer legal links ---- */
.foot-legal__links { display: inline-flex; gap: var(--space-md); flex-wrap: wrap; }
.foot-legal__links a, .foot-legal__btn { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot-legal__btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.foot-legal__links a:hover, .foot-legal__btn:hover { color: var(--color-accent-2); }
/* "Lehe tegi ZAIS" credit — the black logo is inverted to white like the footer wordmark */
.foot-credit { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; }
.foot-credit img { height: 16px; width: auto; filter: brightness(0) invert(1); opacity: 0.7; transition: opacity var(--dur-short) var(--ease-out); }
.foot-credit:hover img, .foot-credit:focus-visible img { opacity: 1; }

/* ---- contact form: privacy consent ---- */
.form-field--check { margin-bottom: var(--space-md); }
.form-field .check { display: flex; align-items: flex-start; gap: 0.65rem; font-weight: 500; font-size: var(--text-sm); cursor: pointer; line-height: 1.45; }
.form-field .check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; padding: 0; accent-color: var(--color-accent); cursor: pointer; }
.form-field .check a { text-decoration: underline; text-underline-offset: 3px; color: var(--color-accent-ink); font-weight: 600; }
.form-field--check.has-error .check { color: var(--color-error); }

/* ---- privacy policy page ---- */
.legal-head h1 { font-size: var(--text-3xl); margin-top: var(--space-md); }
.legal-head .lede { margin-top: var(--space-sm); color: var(--color-muted); }
.legal-head { padding-bottom: 0; }
.legal { max-width: var(--measure, 46rem); }
.legal section { margin-top: var(--space-xl); scroll-margin-top: 6rem; }
.legal section:first-of-type { margin-top: var(--space-lg); }
.legal h2 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.legal__h3 { font-size: var(--text-md); margin: var(--space-md) 0 var(--space-2xs); }
.legal p, .legal li { color: var(--color-ink-2); }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: var(--space-sm); }
.legal ul { padding-left: 1.25rem; margin: var(--space-xs) 0 0; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal__link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--color-accent-ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.legal__toc { background: #fff; border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); }
.legal__toc-title { font-family: var(--font-outlier); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin: 0 0 var(--space-xs); }
.legal__toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.25rem; }
.legal__table { width: 100%; border-collapse: collapse; margin-top: var(--space-md); }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); }
.legal__table th { font-family: var(--font-outlier); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); font-weight: 500; }
.legal__table td:first-child { color: var(--color-ink); font-weight: 600; width: 28%; }
.legal__table .mono { font-family: var(--font-outlier); font-size: var(--text-xs); }
@media (max-width: 40rem) {
  .legal__table thead { display: none; }
  .legal__table tr { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--color-rule); }
  .legal__table td { display: block; padding: 0.1rem 0; width: auto !important; border-bottom: 0; }
}

/* ============================= PROJECT POP-UP ============================= */
[data-project] { cursor: pointer; }
.project-media { position: relative; display: block; overflow: hidden; }
.project-media img { transition: transform var(--dur-long) var(--ease-out); }
[data-project]:hover .project-media img { transform: scale(1.03); }
.project-open { color: inherit; text-decoration: none; }
[data-project]:hover .project-open, .project-open:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.project-count {
  position: absolute; right: var(--space-xs); bottom: var(--space-xs);
  font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.04em;
  background: oklch(17% 0.012 60 / 0.82); color: var(--color-ink-dark);
  padding: 0.25rem 0.55rem; border-radius: var(--radius-sm);
}

.project-dialog {
  width: min(70rem, calc(100% - 2rem)); max-width: none; max-height: calc(100svh - 2rem); margin: auto; padding: 0; border: 1px solid var(--color-rule-dark);
  border-radius: var(--radius-md); background: var(--color-paper-dark); color: var(--color-ink-dark);
  overflow: hidden;
}
.project-dialog[open] { display: flex; flex-direction: column; }
.project-dialog::backdrop { background: oklch(10% 0.01 60 / 0.82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.project-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); }
.project-dialog__head .tag { font-family: var(--font-outlier); font-size: var(--text-xs); color: oklch(72% 0.11 48); letter-spacing: 0.06em; text-transform: uppercase; }
.project-dialog__head h2 { color: var(--color-ink-dark); font-size: var(--text-lg); margin: 0.15em 0 0; }
.project-dialog__close {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.75rem; line-height: 1; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-muted-dark);
}
.project-dialog__close:hover { color: var(--color-ink-dark); border-color: var(--color-rule-dark); }
.project-dialog__stage { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; background: oklch(12% 0.01 60); }
.project-dialog__stage img { display: block; max-width: 100%; max-height: min(68svh, 46rem); width: auto; height: auto; object-fit: contain; user-select: none; }
.project-dialog__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  background: oklch(17% 0.012 60 / 0.75); color: var(--color-ink-dark); border: 1px solid var(--color-rule-dark); border-radius: 999px;
}
.project-dialog__nav:hover { background: var(--color-paper-dark-3); border-color: var(--color-ink-dark); }
.project-dialog__nav[hidden] { display: none; }
.project-dialog__nav svg { width: 18px; height: 18px; }
.project-dialog__nav--prev { left: var(--space-sm); }
.project-dialog__nav--next { right: var(--space-sm); }
.project-dialog__foot { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); min-height: 3.25rem; }
.project-dialog__counter { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted-dark); flex: none; }
.project-dialog__thumbs { display: flex; gap: var(--space-xs); overflow-x: auto; padding-block: 2px; }
.project-dialog__thumbs[hidden] { display: none; }
.project-dialog__thumbs button { flex: none; width: 4.5rem; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: none; opacity: 0.6; }
.project-dialog__thumbs button[aria-current="true"] { border-color: var(--color-accent); opacity: 1; }
.project-dialog__thumbs button:hover { opacity: 1; }
.project-dialog__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-dialog :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 40rem) {
  .project-dialog { width: 100%; max-height: 100svh; height: 100svh; border: 0; border-radius: 0; }
  .project-dialog__head, .project-dialog__foot { padding-inline: var(--space-md); }
  .project-dialog__stage img { max-height: 100%; }
  .project-dialog__nav { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .project-media img { transition: none; } [data-project]:hover .project-media img { transform: none; } }

/* ============================= MOBILE POLISH (≤ 40rem) =============================
 * Phone-first refinements layered on top of the base rules: a calmer type scale,
 * a homepage hero that shows the whole paver-laid lettering with the headline
 * below it, comfortable 44px touch targets and tighter vertical rhythm. */
@media (max-width: 40rem) {
  :root {
    --text-md: 1.1rem;
    --text-lg: 1.28rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.1rem;
  }

  /* rhythm */
  .section { padding-block: var(--space-2xl); }
  .section--tight { padding-block: var(--space-xl); }
  .section-head + * { margin-top: var(--space-xl); }
  .hero__caption { padding-block: var(--space-xl) var(--space-lg); }

  /* header: roomier touch targets, tighter inset */
  .site-nav { top: var(--space-sm); left: var(--space-sm); right: var(--space-sm); }
  .site-nav__inner { padding: 0.4rem var(--space-sm) 0.4rem var(--space-md); gap: var(--space-sm); }
  .site-nav__brand { min-height: 44px; padding-right: var(--space-sm); }
  .site-nav__right { gap: var(--space-xs); }
  .site-nav__right .btn { min-height: 44px; padding-inline: 1rem; width: auto; }
  .nav-toggle { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; }

  /* homepage hero: full lettering in a 1.8:1 frame, headline + actions on paper beneath */
  .hero:not(.page-hero) .hero__media { aspect-ratio: auto; max-height: none; overflow: visible; background: var(--color-paper); }
  .hero:not(.page-hero) .hero__media video { width: 100%; height: auto; aspect-ratio: 1.8 / 1; object-fit: cover; }
  .hero:not(.page-hero) .hero__scrim { display: none; }
  .hero:not(.page-hero) .hero__overlay {
    position: static; max-width: none; margin: 0; text-align: left; color: var(--color-ink);
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }
  .hero:not(.page-hero) .hero__overlay-lede {
    font-family: var(--font-display); font-weight: 600; letter-spacing: -0.012em; line-height: 1.2;
    font-size: clamp(1.35rem, 5.9vw, 1.6rem); color: var(--color-ink); max-width: none; margin: 0;
    overflow-wrap: anywhere;
  }
  .hero:not(.page-hero) .hero__overlay-actions { justify-content: stretch; flex-wrap: nowrap; margin-top: var(--space-lg); gap: var(--space-sm); }
  .hero:not(.page-hero) .hero__overlay-actions .btn { flex: 1 1 0; width: auto; justify-content: center; min-height: 48px; padding-inline: 0.5rem; }
  .hero:not(.page-hero) .hero__overlay .btn--on-dark { color: var(--color-ink); border-color: var(--color-rule-strong); }
  .hero:not(.page-hero) .hero__overlay .btn--on-dark:hover { background: var(--color-paper-2); border-color: var(--color-ink); }

  /* page heroes: a touch more height so the work stays in frame */
  .page-hero .hero__media { aspect-ratio: 1.35 / 1; }
  .hero__crumb { top: var(--space-sm); left: var(--space-sm); }

  /* stats: numbers support the headline instead of out-shouting it */
  .stats__item { padding: var(--space-lg) var(--space-md); }
  .hero__below .stats__item:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
  .stats__num { font-size: clamp(1.7rem, 7.6vw, 2rem); }
  .stats__label { max-width: none; line-height: 1.35; }

  /* long statement headline in the about split */
  .about-split__body h2 { font-size: clamp(1.4rem, 6vw, 1.7rem); line-height: 1.22; }
  .about-split { gap: var(--space-xl); }
  .about-split__media::before { display: none; }

  /* services overview: one comfortable column instead of cramped halves */
  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card { min-height: 0; }
  .service-card h3 { margin-top: var(--space-md); }

  /* call-to-action strip */
  .cta-strip .btn { width: 100%; justify-content: center; min-height: 52px; background: var(--color-ink-dark); color: var(--color-paper-dark); border-color: var(--color-ink-dark); }
  .cta-strip .btn:hover { background: var(--color-muted-dark); border-color: var(--color-muted-dark); }

  /* footer */
  .foot-mast { padding-block: var(--space-2xl) var(--space-xl); }
  .foot-mast__wordmark { max-width: 15rem; }
  .foot-band ul { gap: 0; }
  .foot-band li > a { display: inline-block; padding-block: 0.7rem; }
  .foot-band li.muted { color: var(--color-muted-dark); padding-block: 0.7rem; }
  /* compact: company | address side by side, menu in 3 columns, phone | e-mail side by side */
  .foot-band { padding-block: var(--space-xl); gap: var(--space-lg); }
  .foot-band h4 { margin-bottom: var(--space-sm); }
  .foot-company { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-md); }
  .foot-company h4 { grid-column: 1 / -1; }
  .foot-company__addr { margin-top: 0; }
  .foot-band > div:nth-child(2) ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: var(--space-sm); }
  .foot-band > div:nth-child(3) ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-sm); }
  .foot-band > div:nth-child(3) li.muted { grid-column: 1 / -1; padding-block: 0.4rem 0; font-size: var(--text-sm); }
  .foot-legal__links { gap: 0 var(--space-md); }
  .foot-legal__links a, .foot-legal__btn, .foot-credit { display: inline-flex; align-items: center; min-height: 44px; }

  /* service detail aside + breadcrumb + inline text actions: bigger hit areas */
  .service-detail__aside a { padding-block: 0.7rem; }
  .link-arrow, .breadcrumb a, .legal__link-btn { position: relative; }
  .link-arrow::after, .breadcrumb a::after, .legal__link-btn::after { content: ""; position: absolute; inset: -12px -6px; }

  /* cookie bar: compact so it never takes over the screen */
  .cookie-bar { padding: 0.75rem 0.9rem; bottom: 0.4rem; gap: 0.6rem; }
  .cookie-bar__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; }
  .cookie-bar__title { margin: 0 !important; font-size: var(--text-base) !important; }
  .cookie-bar p { font-size: 0.8rem; }
  .cookie-bar__actions .btn { min-height: 44px; padding: 0.35rem 0.5rem; }
}

/* ---- /tehtud-tood/ grid: 3 columns on desktop, 2 on tablets, 1 on phones ---- */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); margin-top: 2.5rem; }
@media (max-width: 60rem) { .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .portfolio-grid { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-lg); } }

@media (max-width: 40rem) {
  /* registry numbers live in the footer — keep the form close to the top on phones */
  .contact-info__list > div:nth-child(n+5) { display: none; }
  .contact-info__list dd a { display: inline-block; padding-block: 0.3rem; }
}

/* the width/height attributes on these <img>s would otherwise fix the height at 480px and fight aspect-ratio */
.portfolio__slide img, .portfolio-grid img, .portfolio-card img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 40rem) {
  .foot-band li > a { display: block; }
  .contact-info__list dd a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
}

/* ---- mobile menu: collapsible "Teenused" so the whole menu fits one screen ---- */
.mobile-panel__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.mobile-panel__row > a { font-size: var(--text-2xl); font-weight: 550; }
.mobile-panel__expand { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--color-muted-dark); border: 1px solid var(--color-rule-dark); border-radius: 999px; }
.mobile-panel__expand svg { width: 16px; height: 16px; transition: transform var(--dur-short) var(--ease-out); }
.mobile-panel__expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-panel__sub[hidden] { display: none; }
.mobile-panel__sub { gap: 0; }
.mobile-panel__sub a { display: block; padding-block: 0.7rem; }

@media (max-width: 40rem) {
  /* services overview on phones: a clean ruled list aligned to the page gutters */
  .services-grid { gap: 0; border: 0; background: transparent; }
  .service-card { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); background: transparent; }
  .service-card:last-child { border-bottom: 0; }
}

/* ---- 404 page ---- */
.notfound { min-height: 55vh; display: flex; align-items: center; }
.notfound h1 { font-size: var(--text-3xl); margin-top: var(--space-sm); max-width: 16ch; }
.notfound .lede { margin-top: var(--space-md); max-width: 40ch; color: var(--color-muted); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
@media (max-width: 40rem) { .notfound__actions .btn { flex: 1 1 100%; } }

@media (max-width: 40rem) {
  /* the paving strip is 9rem tall — the heading must start below it, on the dark band */
  .section--fade-top { padding-top: 11.5rem; padding-bottom: var(--space-2xl); }
}

/* ============================= TEHNIKAPARK ============================= */
.machine { padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.machine:first-of-type { border-top: 0; }
.machine__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.machine--flip .machine__media { order: 2; }
.machine__media { cursor: pointer; }
.machine__media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.machine__body h2 { font-size: var(--text-2xl); margin-top: 0.2em; }
.machine__body .lede { margin-top: var(--space-sm); color: var(--color-muted); }
.machine__specs { display: flex; flex-wrap: wrap; margin: var(--space-lg) 0 0; padding: 1px 1px 0 0; }
.machine__spec { flex: 1 1 8.5rem; border: 1px solid var(--color-rule); margin: 0 -1px -1px 0; padding: var(--space-sm) var(--space-md); }
.machine__spec dt { font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.machine__spec dd { margin: 0.15rem 0 0; font-weight: 600; }
.machine__h3 { font-size: var(--text-base); font-weight: 600; margin: var(--space-lg) 0 var(--space-xs); }
.machine__uses { margin-top: 0; gap: var(--space-xs); }
.machine__uses li { font-size: var(--text-base); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.chip { font-size: var(--text-sm); padding: 0.3rem 0.8rem; border: 1px solid var(--color-rule-strong); border-radius: 999px; color: var(--color-ink-2); }
.machine__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.machine__actions .link-arrow { background: none; cursor: pointer; }

.fleet-terms { background: var(--color-paper-2); }
.fleet-terms__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.fleet-terms__item h3 { font-size: var(--text-md); }
.fleet-terms__item p { margin-top: var(--space-xs); color: var(--color-muted); }
.fleet-note { margin-top: var(--space-xl); font-size: var(--text-xs); color: var(--color-muted); }

.service-card2--wide { grid-column: span 2; }
.service-fleet-link { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

@media (max-width: 60rem) {
  .machine__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .machine--flip .machine__media { order: 0; }
  .fleet-terms__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .machine { padding-block: var(--space-xl); }
  .machine__actions .btn { flex: 1 1 100%; justify-content: center; }
  .service-card2--wide { grid-column: 1 / -1; }
}