/* =========================================================================
   Oulun Lattiapinta Oy - style.css
   Restrained and elegant. Full-bleed photo hero with a dark overlay, light
   concrete surfaces, charcoal accents, sharp corners, hairline structure.
   Large light Raleway headings carry the identity; orange appears only in
   the logo mark, eyebrow markers, small indexes and primary buttons.
   Two quiet diagonals: the hero's bottom edge and the dark process section.
   Order: Custom Properties -> Reset -> Base -> Typography -> Angular utils ->
   Layout -> Buttons -> Header/Nav -> Hero -> Services -> Note -> About ->
   Process (dark) -> Contact/Form -> Footer -> Utilities -> Animations ->
   Media queries
   ========================================================================= */

/* ----------------------------- Custom Properties ----------------------- */
:root {
  --color-primary: #bd6520;      /* muted work-site orange */
  --color-primary-dark: #964d13; /* hover sweep / pressed */
  --color-accent: #d98d4b;       /* orange for dark surfaces */
  --color-on-primary: #ffffff;
  --color-ink: #1e1f21;          /* headings, strong text */
  --color-ink-deep: #191a1c;     /* hero, footer */
  --color-ink-soft: #2e2f33;     /* dark grey section (process) */
  --color-text: #2b2c2e;
  --color-text-light: #6b6d70;
  --color-text-faint: #9fa1a4;
  --color-bg: #f2f1ee;           /* light concrete page base */
  --color-surface: #ffffff;      /* white sections and panels */
  --color-bg-alt: #e9e7e3;       /* deeper concrete */
  --color-border: #e0deda;       /* hairline on light */
  --color-border-strong: #c6c3bc;
  --color-border-dark: #313236;  /* hairline on dark */
  --color-white: #ffffff;

  /* Form-state colours */
  --color-error: #c0433f;
  --color-error-bg: #fbeceb;
  --color-error-border: #efc6c4;
  --color-error-text: #a8332f;
  --color-success-bg: #e9f6ee;
  --color-success-text: #1c7340;
  --color-success-border: #b4e3c6;

  --font-heading: "Raleway", system-ui, -apple-system, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;

  --max-width: 1200px;
  --shell-width: 1500px;
  --pad-x: clamp(1.25rem, 5vw, 3rem);

  /* Spacing scale */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 7rem;
  --section-y: clamp(4.5rem, 8.5vw, 8rem);

  /* Diagonal section divider depth (kept shallow and quiet) */
  --edge: clamp(24px, 3.6vw, 52px);

  /* Shadows: reserved for the mobile drawer only */
  --shadow-drawer: 0 10px 40px rgba(20, 21, 23, 0.25);

  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Marker shape: the flattened diamond of the logo mark (same 21.6:12.2
     proportion), used for eyebrow and checklist markers instead of a square */
  --shape-mark: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  --mark-w: 15px;
  --mark-h: 8.5px;

  /* Whole-page zoom on large screens; body { zoom } below mirrors this so
     vh-based heights can divide by it. Keep the two in lockstep. */
  --zoom-factor: 1;
}

/* ----------------------------- Large-screen zoom ----------------------- */
@media (min-width: 1400px) {
  body { zoom: 1.11; }
  :root { --zoom-factor: 1.11; }
}
@media (min-width: 1600px) {
  body { zoom: 1.17; }
  :root { --zoom-factor: 1.17; }
}
@media (min-width: 2000px) {
  body { zoom: 1.25; }
  :root { --zoom-factor: 1.25; }
}

/* ----------------------------- Reset & Base ---------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(88px * var(--zoom-factor)); }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 1rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
::selection { background: var(--color-ink); color: var(--color-white); }

/* ----------------------------- Typography ------------------------------ */
/* Large + light Raleway is the identity: elegant, calm, unmistakable. */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  margin: 0;
  color: var(--color-ink);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 520;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.3vw, 4.2rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.03em; font-weight: 540; }
h3 { font-size: 1.22rem; font-weight: 620; letter-spacing: -0.015em; line-height: 1.25; }
h4 { font-size: 1.02rem; font-weight: 620; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }

/* Eyebrow: flattened orange diamond (logo mark shape) + tracked label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 0 0 1.2rem;
}
.eyebrow::before {
  content: "";
  width: var(--mark-w);
  height: var(--mark-h);
  background: var(--color-primary);
  clip-path: var(--shape-mark);
  flex-shrink: 0;
}

.lead { font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--color-text-light); line-height: 1.62; }

/* ----------------------------- Angular utilities ----------------------- */
/* Quiet diagonal section edges. Pair with extra padding so content clears
   the slope; pull the section up with a negative margin so the wedge above
   the top diagonal shows the previous section's surface. */
.edge-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--edge)), 0 100%); }
.edge-both { clip-path: polygon(0 var(--edge), 100% 0, 100% calc(100% - var(--edge)), 0 100%); }

/* ----------------------------- Layout ---------------------------------- */
.container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--pad-x); }

.section { padding-block: var(--section-y); position: relative; }
.section--white { background: var(--color-surface); }
.section--grey { background: var(--color-bg-alt); }
/* Slide a section up under the previous section's bottom diagonal so the
   wedge shows this section's own background, not the page base. The previous
   section must sit higher in the stack (hero and .dark have z-index: 2). */
.section--overlap { margin-top: calc(var(--edge) * -1); }
/* Extra bottom room for a section the diagonal dark section overlaps */
.section--deep { padding-bottom: calc(var(--section-y) + var(--edge)); }

.section-head { max-width: 660px; }
.section-head h2 { margin-top: 0.25rem; }
.section-head p:not(.eyebrow) { color: var(--color-text-light); margin-top: 1.1rem; max-width: 52ch; }

/* Heading left, supporting text and link right */
.section-head--split {
  display: grid;
  gap: 1.25rem 3rem;
  max-width: none;
  align-items: end;
}
.section-head--split .section-head__aside { color: var(--color-text-light); }
.section-head--split .section-head__aside p { font-size: 1rem; margin-bottom: 1rem; max-width: 40ch; }

/* ----------------------------- Buttons --------------------------------- */
/* Sharp rectangles, Raleway. The primary's darker sweep slides in from
   the left on hover. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.6rem;
  font-family: var(--font-heading);
  font-weight: 620;
  font-size: 0.95rem;
  letter-spacing: 0;
  line-height: 1;
  min-height: 52px;
  overflow: hidden;
  transition: color 0.32s var(--ease-soft), border-color 0.25s ease, background-color 0.25s ease, transform 0.12s ease;
  isolation: isolate;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease-soft); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--ease-soft);
  z-index: -1;
}
.btn-primary:hover { color: var(--color-on-primary); }
.btn-primary:hover::before { transform: scaleX(1); }
.btn-primary:hover svg { transform: translateX(3px); }

.btn-secondary { background: transparent; color: var(--color-ink); border: 1px solid var(--color-border-strong); }
.btn-secondary:hover { border-color: var(--color-ink); }
.btn-secondary:hover svg { transform: translateX(3px); }

.btn-ghost { background: transparent; color: var(--color-white); border: 1px solid rgba(255,255,255,0.42); }
.btn-ghost:hover { border-color: var(--color-white); background: rgba(255,255,255,0.06); }
.btn-ghost:hover svg { transform: translateX(3px); }

.btn-block { width: 100%; }
.btn-sm { padding: 0.68rem 1.2rem; min-height: 44px; font-size: 0.9rem; }

/* Quiet text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-weight: 640;
  font-size: 0.93rem;
  color: var(--color-ink);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease-soft); }
.link-arrow:hover svg { transform: translateX(3px); }

/* mobile-only CTA */
.cta-mobile { display: flex; margin-top: var(--spacing-md); }
.cta-mobile .btn { width: 100%; }
@media (min-width: 768px) { .cta-mobile { display: none; } }

/* ----------------------------- Header / Nav ---------------------------- */
.header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  color: var(--color-white);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
  will-change: transform;
}
.header__inner {
  max-width: var(--shell-width);
  margin-inline: auto;
  padding: 0.375rem var(--pad-x);
  min-height: 86px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
}

/* Logo lockup: perspective tile mark (hollow O + orange L) + name */
.logo { display: inline-flex; align-items: center; gap: 0.7rem; transition: opacity 0.25s ease; justify-self: start; }
.logo:hover { opacity: 0.8; }
.logo__mark { width: 46px; height: 27px; flex-shrink: 0; }
.logo__mark .mark-ink { fill: currentColor; transition: fill 0.35s ease; }
.logo__name { font-family: var(--font-heading); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; white-space: nowrap; }
.logo__name em { font-style: normal; font-weight: 450; }

.nav { display: contents; }
.nav__links { display: flex; align-items: center; gap: 0.1rem; justify-self: center; }
.nav__actions { display: flex; align-items: center; gap: 0.55rem; justify-self: end; }
.nav__links a {
  position: relative;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.93rem;
  color: currentColor;
  opacity: 0.88;
  transition: opacity 0.2s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem;
  bottom: 0.36rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease-soft);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-weight: 640;
  font-size: 0.93rem;
  padding-inline: 0.8rem 0.55rem;
  white-space: nowrap;
}
.nav__phone svg { width: 16px; height: 16px; opacity: 0.85; }

.header.scrolled {
  background: rgba(242, 241, 238, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}
.header.scrolled .nav__links a { color: var(--color-text); }
.header.scrolled .nav__phone { color: var(--color-text); }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
}
.menu-toggle span { display: block; width: 23px; height: 2px; background: currentColor; transition: transform 0.3s var(--ease-soft), opacity 0.2s ease; margin-inline: auto; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------- Hero ------------------------------------ */
/* Full-bleed photo + dark overlay, text left. A quiet diagonal closes the
   section at the bottom: a shallow dip from the left corner down to a low
   point at 22%, then the long rise to the right. */
.hero {
  position: relative;
  min-height: calc(92vh / var(--zoom-factor));
  min-height: calc(92dvh / var(--zoom-factor));
  display: flex;
  /* content sits below centre: the photo breathes above it, the diagonal below */
  align-items: flex-end;
  padding: 8rem var(--pad-x) 4.75rem;
  overflow: hidden;
  background: var(--color-ink-deep);
  isolation: isolate;
  z-index: 2;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--edge)),
    22% 100%,
    0 calc(100% - var(--edge) * 0.3)
  );
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media::after {
  /* left-weighted scrim: a readable text column, the photo breathes right */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(95deg, rgba(17,18,20,0.84) 0%, rgba(17,18,20,0.6) 46%, rgba(17,18,20,0.24) 82%),
    linear-gradient(to bottom, rgba(17,18,20,0.42) 0%, rgba(17,18,20,0.08) 40%, rgba(17,18,20,0.44) 100%);
}
.hero__poster { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; object-fit: cover; z-index: 2; }

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero .eyebrow { color: rgba(255,255,255,0.78); }
.hero h1 { color: var(--color-white); margin: 0.4rem 0 1.4rem; max-width: 17ch; }
.hero__lead { color: rgba(255,255,255,0.82); font-size: clamp(1.02rem, 1.4vw, 1.17rem); max-width: 48ch; margin: 0 0 2.4rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; align-items: center; }

/* ----------------------------- Services -------------------------------- */
/* Photo cards: full-bleed image, dark scrim, light text on top. */
.svc-grid { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); grid-template-columns: 1fr; margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(380px, 44vw, 460px);
  overflow: hidden;
  isolation: isolate;
}
.svc-card__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.65s var(--ease-soft); }
.svc-card:hover .svc-card__media img { transform: scale(1.04); }
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(25,26,28,0.16) 0%, rgba(25,26,28,0.38) 52%, rgba(25,26,28,0.88) 100%);
  transition: opacity 0.4s ease;
}
.svc-card__body { padding: clamp(1.4rem, 2.4vw, 1.9rem); }
.svc-card__num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}
.svc-card h3 { color: var(--color-white); margin-top: 0.45rem; }
.svc-card p { color: rgba(255,255,255,0.8); font-size: 0.95rem; margin: 0.5rem 0 0; }

/* ----------------------------- About / split --------------------------- */
.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.img-chip {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(25, 26, 28, 0.85);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  padding: 0.55rem 1rem;
}
.split__body .lead { margin-top: 1rem; }

/* Diamond-marker rows */
.checklist { display: grid; gap: 0; margin-top: 1.7rem; }
.check { display: grid; grid-template-columns: var(--mark-w) 1fr; gap: 0.9rem; align-items: start; padding: 1.05rem 0; border-top: 1px solid var(--color-border); }
.check:last-child { border-bottom: 1px solid var(--color-border); }
.check i { width: var(--mark-w); height: var(--mark-h); background: var(--color-primary); clip-path: var(--shape-mark); margin-top: 0.55rem; font-style: normal; }
.check b { font-family: var(--font-heading); font-weight: 640; display: block; color: var(--color-ink); }
.check span { color: var(--color-text-light); font-size: 0.95rem; }
.split__actions { margin-top: 2rem; }

/* ----------------------------- FAQ ------------------------------------- */
/* Hairline-divided question rows in two columns; the same border-top motif
   as the checklist, steps and contact items, so the section sits flush on
   the grey surface with no card boxes. Collapsed only when JS is present
   (same progressive-enhancement gate as .reveal); the 0fr -> 1fr grid row
   gives a smooth 200ms open/close without animating layout properties. */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
  border-bottom: 1px solid var(--color-border-strong);
}
.faq-item { border-top: 1px solid var(--color-border-strong); }
.faq-item__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  text-align: left;
  padding: 1.3rem 0;
  font-family: var(--font-heading);
  font-weight: 620;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--color-ink);
  transition: color 0.2s ease;
}
.faq-item__toggle:hover { color: var(--color-primary-dark); }
.faq-item__icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--color-primary); transition: transform 0.2s var(--ease-soft); }
.faq-item.open .faq-item__icon { transform: rotate(45deg); }
.faq-item__panel { overflow: hidden; }
.js .faq-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s var(--ease-soft); }
.js .faq-item.open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__body { min-height: 0; overflow: hidden; }
.faq-item__body p { margin: 0; padding: 0 2.4rem 1.4rem 0; color: var(--color-text-light); font-size: 0.95rem; line-height: 1.62; max-width: 56ch; }
/* Inline CTA inside an answer: reads as part of the sentence, still clearly a link. */
.faq-link {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.faq-link:hover { color: var(--color-primary); }

/* ----------------------------- Process (dark, diagonal) ---------------- */
.dark {
  background: var(--color-ink-soft);
  color: rgba(255,255,255,0.78);
  position: relative;
  z-index: 2;
  overflow: hidden;
  /* hairlines need to stay visible on the lighter dark-grey surface */
  --color-border-dark: rgba(255,255,255,0.14);
}
.dark.edge-both {
  margin-top: calc(var(--edge) * -1);
  padding-block: calc(var(--section-y) + var(--edge));
}
.dark .eyebrow { color: rgba(255,255,255,0.68); }
.dark .eyebrow::before { background: var(--color-accent); }
.dark h2 { color: var(--color-white); }
.dark .section-head__aside p { color: rgba(255,255,255,0.62); }

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 2.6rem;
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
}
.step { border-top: 1px solid var(--color-border-dark); padding-top: 1.4rem; }
.step__num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}
.step h3 { color: var(--color-white); margin: 0.5rem 0 0.4rem; font-size: 1.12rem; }
.step p { color: rgba(255,255,255,0.6); font-size: 0.94rem; margin: 0; max-width: 30ch; }

/* CTA row inside the dark section */
.dark__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(3rem, 6vw, 4.2rem);
  padding-top: 2.2rem;
  border-top: 1px solid var(--color-border-dark);
}
.dark__cta h3 { color: var(--color-white); font-size: clamp(1.35rem, 2.3vw, 1.7rem); font-weight: 560; }
.dark__cta p { color: rgba(255,255,255,0.6); margin: 0.35rem 0 0; font-size: 0.96rem; }

/* ----------------------------- Contact / form -------------------------- */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.contact__info { display: grid; gap: 0; margin-top: 1.6rem; }
.contact__item { display: grid; grid-template-columns: 24px 1fr; gap: 0.9rem; align-items: start; padding: 1.05rem 0; border-top: 1px solid var(--color-border); }
.contact__item:last-child { border-bottom: 1px solid var(--color-border); }
.contact__item svg { width: 19px; height: 19px; color: var(--color-ink); margin-top: 3px; }
.contact__item b { font-family: var(--font-heading); font-weight: 640; display: block; color: var(--color-ink); font-size: 0.94rem; }
.contact__item a, .contact__item span { color: var(--color-text-light); }
.contact__item a:hover { color: var(--color-ink); }

.form { background: var(--color-bg); border: 1px solid var(--color-border); padding: clamp(1.6rem, 3vw, 2.4rem); }
.form__row { display: grid; gap: 1rem; margin-bottom: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-family: var(--font-heading); font-weight: 640; font-size: 0.87rem; color: var(--color-ink); }
.field label .req { color: var(--color-error); }
.field label .opt { color: var(--color-text-light); font-weight: 400; }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 116px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(30,31,33,0.07); }
.field input.invalid, .field textarea.invalid, .field select.invalid { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(192,67,63,0.1); }
.field__error { color: var(--color-error); font-size: 0.8rem; min-height: 1em; }
.form__status { margin-top: 1rem; font-size: 0.92rem; padding: 0.85rem 1rem; display: none; }
.form__status.ok { display: block; background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.form__status.err { display: block; background: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); }

/* ----------------------------- Footer ---------------------------------- */
.footer { background: var(--color-ink-deep); color: rgba(255,255,255,0.6); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; }
.footer__top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--color-border-dark); }
.footer__brand .logo { color: var(--color-white); margin-bottom: 1.2rem; }
.footer__brand p { font-size: 0.94rem; max-width: 30ch; }
.footer h3 { color: var(--color-white); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 1.1rem; font-weight: 600; font-family: var(--font-body); }
.footer__col ul { display: grid; gap: 0.65rem; }
.footer__col a, .footer__col span { font-size: 0.94rem; color: rgba(255,255,255,0.6); transition: color 0.2s ease; }
.footer__col a:hover { color: var(--color-white); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 1.8rem; font-size: 0.84rem; }

/* ----------------------------- Utilities / reveal ---------------------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft); }
.js .reveal.in, .js .reveal.is-visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: 0.09s; }
.delay-2 { transition-delay: 0.18s; }
.delay-3 { transition-delay: 0.27s; }
.no-scroll { overflow: hidden; }

/* ----------------------------- Animations ------------------------------ */
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Entrance zoom uses `backwards` (not `both`): a forwards fill would keep
   overriding the JS parallax transform, freezing the poster. */
.hero__poster { animation: heroZoom 1.7s var(--ease-soft) backwards; }
.hero__inner > * { animation: fadeUp 0.85s var(--ease-soft) both; }
.hero__inner > .eyebrow { animation-delay: 0.08s; }
.hero__inner > h1 { animation-delay: 0.2s; }
.hero__inner > .hero__lead { animation-delay: 0.36s; }
.hero__inner > .hero__cta { animation-delay: 0.5s; }

/* ----------------------------- Media queries --------------------------- */
@media (min-width: 600px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 760px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .faq-grid { grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2.5rem, 5vw, 4.5rem); }
  .section-head--split { grid-template-columns: 1.25fr 1fr; }
  .section-head--split .section-head__aside { padding-bottom: 0.3rem; justify-self: end; text-align: right; }
  .section-head--split .section-head__aside p { margin-left: auto; }
  .section-head--split .section-head__aside .link-arrow { justify-content: flex-end; }
}

@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
  .contact__grid { grid-template-columns: 0.85fr 1.15fr; }
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3rem; }
}

@media (min-width: 1024px) {
  .steps-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 980px) {
  .menu-toggle { display: flex; }
  /* A transform OR will-change:transform would make the header a containing
     block for the position:fixed drawer, trapping it in the header box. */
  .header { will-change: auto; }
  .header__inner { display: flex; justify-content: space-between; }
  .nav {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 84vw);
    background: var(--color-bg);
    color: var(--color-text);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-soft);
    box-shadow: var(--shadow-drawer);
    overflow-y: auto;
  }
  .nav.open { transform: translateX(0); }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; justify-self: auto; }
  .nav__links a { padding: 1rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); opacity: 1; }
  .nav__links a::after { display: none; }
  .nav__actions { flex-direction: column; align-items: stretch; gap: 0; width: 100%; justify-self: auto; }
  .nav__phone { color: var(--color-text); padding: 1.2rem 0 0; font-size: 1.02rem; }
  .nav__cta { display: none; }
  .logo { z-index: 2; }
  .menu-toggle { position: relative; z-index: 2; }
  body.no-scroll .header {
    background: var(--color-bg);
    box-shadow: none;
    color: var(--color-text);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(20,21,23,0.45); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 999; }
  .nav-backdrop.show { opacity: 1; visibility: visible; }
}

@media (max-width: 767px) {
  .hero {
    min-height: 88vh;
    min-height: 88dvh;
    /* narrow screens: content sits at the vertical middle, nudged a little
       below it by the margin-top on .hero__inner */
    align-items: center;
    padding: 7rem var(--pad-x) 3.25rem;
  }
  .hero__inner { margin-top: 2rem; }
  .hero__media::after {
    /* narrow screen: the text column spans the full width, so the scrim is
       nearly even instead of left-weighted */
    background:
      linear-gradient(95deg, rgba(17,18,20,0.68) 0%, rgba(17,18,20,0.58) 46%, rgba(17,18,20,0.46) 82%),
      linear-gradient(to bottom, rgba(17,18,20,0.42) 0%, rgba(17,18,20,0.08) 40%, rgba(17,18,20,0.44) 100%);
  }
  .hero h1 { font-size: clamp(2.75rem, 11vw, 3.7rem); max-width: 14ch; }
  .hero__lead { margin-bottom: 1.9rem; }
  .svc-card { min-height: 300px; }
  .split__media { order: 2; }
  .split__media img { aspect-ratio: 3 / 2; }
}

/* ----------------------------- Reduced motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__poster { animation: none; }
}