/* Self-hosted fonts, no request to Google (LG München I, 3 O 17493/20). Inter + Geist Mono, SIL OFL, see fonts/ */
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/geist-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --night: #0D1720;     /* hero, inquiry, footer */
  --night-2: #16222C;   /* inputs on dark */
  --paper: #F4F5F6;
  --ink: #0F1B24;
  --mute: #6B7780;      /* secondary text on light */
  --mute-dark: #8E9AA3; /* secondary text on dark */
  --line: #DDE1E4;
  --steel: #B8C4CC;     /* coolant/steel tint from the hero photo */
  --edge: max(1rem, calc((100vw - 72rem) / 2));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
main :focus-visible { outline-color: var(--ink); }
.inquiry :focus-visible { outline-color: #fff; }

.eyebrow { font: 500 0.8rem/1 "Geist Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; color: var(--mute); }
.eyebrow::before { content: ""; width: 0.55rem; height: 0.55rem; background: currentColor; }

.btn { display: inline-block; font: 500 0.95rem "Inter", sans-serif; padding: 0.8rem 1.3rem; border-radius: 4px; text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--steel); }
.btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { border-color: #fff; }

/* Nav sits on top of the hero photo */
.nav { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: center; gap: 2.5rem; padding: 1rem var(--edge); color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); }
.nav nav { display: flex; gap: 1.75rem; margin-right: auto; font-size: 0.95rem; }
.nav nav a { text-decoration: none; opacity: .85; }
.nav nav a:hover { opacity: 1; }
.mark { font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; text-decoration: none; }

/* Hero: full-bleed shop-floor photo, headline bottom-left, second half of the headline muted */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  background: linear-gradient(180deg, rgba(13,23,32,.55) 0%, rgba(13,23,32,.2) 35%, rgba(13,23,32,.92) 82%, var(--night) 100%), url(hero.jpg) center 40% / cover no-repeat var(--night); }
.hero-text { padding: 8rem var(--edge) 3rem; }
.hero .eyebrow { color: #fff; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.04; max-width: 17ch; }
.hero h1 span { color: var(--mute-dark); }
.hero .lede { max-width: 38rem; margin-top: 1.5rem; font-size: 1.15rem; color: #D5DCE1; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.strip { list-style: none; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; padding: 1.25rem var(--edge); border-top: 1px solid rgba(255,255,255,.12); background: var(--night);
  font: 500 0.8rem "Geist Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mute-dark); }

main > section { padding: clamp(4rem, 9vw, 7rem) var(--edge); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1; max-width: 22ch; }
.body { max-width: 40rem; margin-top: 1.5rem; font-size: 1.15rem; color: var(--mute); }

.values { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4rem; border-top: 1px solid var(--ink); }
.values div { padding: 1.5rem 1.5rem 0 0; }
.values h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.values p { color: var(--mute); max-width: 20rem; }

.process { background: #fff; }
.process ol { list-style: none; counter-reset: s; margin: 3.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.process li { counter-increment: s; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.process li::before { content: counter(s, decimal-leading-zero); display: block; font: 500 0.8rem "Geist Mono", monospace; color: var(--mute); margin-bottom: 2.5rem; }
.process h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.process p { color: var(--mute); font-size: 0.97rem; }

.faq { display: grid; grid-template-columns: 1fr 1.4fr; grid-template-rows: auto 1fr; gap: 0 4rem; align-items: start; }
.faq .eyebrow, .faq h2 { grid-column: 1; }
.faq .qa { grid-column: 2; grid-row: 1 / span 2; }
.faq details { border-top: 1px solid var(--line); padding: 1.2rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-weight: 500; font-size: 1.1rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--mute); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 0.7rem; color: var(--mute); max-width: 36rem; }

/* Inquiry: dark closing section with the form */
.inquiry { background: var(--night); color: #fff; display: grid; grid-template-columns: 1fr 1.6fr; gap: 3rem 4rem; }
.inquiry .eyebrow { color: var(--mute-dark); }
.inquiry-head p:last-child { color: var(--mute-dark); margin-top: 1.25rem; max-width: 22rem; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; color: var(--mute-dark); }
.grid .wide, .grid .full { grid-column: 1 / -1; }
.grid input, .grid select, .grid textarea { font: 400 1rem "Inter", sans-serif; color: #fff; background: var(--night-2); border: 1px solid #2A3844; border-radius: 4px; padding: 0.75rem 0.85rem; width: 100%; }
.grid input:focus, .grid select:focus, .grid textarea:focus { outline: none; border-color: var(--steel); }
.grid input[type=file] { padding: 0.6rem; color: var(--mute-dark); }
.grid input[type=date] { color-scheme: dark; }
::placeholder { color: #5E6B75; }
.consent { border: 0; padding: 0; margin: 1.75rem 0; }
.consent legend { font-weight: 500; margin-bottom: 0.75rem; }
.check { display: flex; gap: 0.65rem; align-items: flex-start; margin-bottom: 0.65rem; color: #D5DCE1; }
.check input { margin-top: 0.3rem; width: 1rem; height: 1rem; accent-color: #fff; flex: none; }
.small { font-size: 0.85rem; color: var(--mute-dark); }
.hp { position: absolute; left: -9999px; }

.foot { background: var(--night); color: var(--mute-dark); border-top: 1px solid #1F2C37; padding: 3.5rem var(--edge) 2rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; font-size: 0.95rem; }
.foot .mark { color: #fff; display: block; margin-bottom: 0.75rem; }
.foot h4 { color: #fff; font-size: 0.95rem; margin-bottom: 0.75rem; }
.foot div > a:not(.mark) { display: block; text-decoration: none; margin-bottom: 0.4rem; }
.foot a:hover { color: #fff; }
.copy { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid #1F2C37; font-size: 0.85rem; }

/* Legal pages */
.page-head { background: var(--night); color: #fff; padding: 7rem var(--edge) 3rem; }
.legal { padding: 3rem var(--edge) 5rem; }
.legal > * { max-width: 46rem; }
.legal h2 { font-size: 1.25rem; margin: 2rem 0 0.6rem; }
.legal p { color: #33414C; margin-bottom: 0.8rem; }
.todo { background: #FFF1C2; padding: 0 0.25rem; }

@media (max-width: 900px) {
  .nav nav { display: none; }
  .nav { justify-content: space-between; }
  .process ol { grid-template-columns: 1fr 1fr; }
  .faq, .inquiry { grid-template-columns: 1fr; }
  .faq .qa { grid-column: 1; grid-row: auto; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot-main { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  /* narrow screens: text sits over the busy part of the photo, darken more */
  .hero { background: linear-gradient(180deg, rgba(13,23,32,.6) 0%, rgba(13,23,32,.75) 30%, rgba(13,23,32,.95) 60%, var(--night) 100%), url(hero.jpg) 30% 20% / cover no-repeat var(--night); }
  .hero h1 span { color: #A9B4BC; }
  .process li::before { margin-bottom: 0.75rem; }
  .values, .process ol, .grid { grid-template-columns: 1fr; }
  .values div { padding-right: 0; }
  .strip { justify-content: flex-start; }
  .nav .btn { padding: 0.6rem 0.9rem; font-size: 0.9rem; }
}