/* ============================================================
   Stilco — Horeca Akoestiek
   One shared stylesheet. Edit the tokens below, not the rules
   underneath them.
   ============================================================ */

/* ── Self-hosted fonts ───────────────────────────────────────
   Both formats are listed. The browser takes the first one it
   can use, so:

   - Upload only the .ttf files now and it works.
   - Add the .woff2 files later and they take over automatically,
     no code change. Same font, roughly a quarter of the weight.

   Four weights are enough for this design — 400, 400 italic,
   600 and 700. Poppins ships eighteen; the rest are dead weight
   on the server.
   ──────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-regular.woff2") format("woff2"),
       url("/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-italic.woff2") format("woff2"),
       url("/fonts/Poppins-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-semibold.woff2") format("woff2"),
       url("/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-bold.woff2") format("woff2"),
       url("/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Colours, sampled from the mockups */
  --c-bg:      #faf9f5;   /* page */
  --c-ink:     #12383b;   /* logo, headings, checkmarks */
  --c-body:    #4e5353;   /* body copy */
  --c-mint:    #ebf4f3;   /* step cards */
  --c-beige:   #e2ded2;   /* address panel */
  --c-quote:   #99b9bb;   /* the pull quote */
  --c-accent:  #c1863f;   /* step icons */
  --c-line:    #12383b;

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-h1:     clamp(2rem, 3.6vw, 3rem);
  --fs-h2:     clamp(1.6rem, 3.1vw, 2.6rem);
  --fs-lead:   clamp(1.15rem, 2.1vw, 1.75rem);
  --fs-addr:   clamp(1.5rem, 2.9vw, 2.5rem);
  --fs-card-h: clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body:   clamp(0.95rem, 1.15vw, 1.1rem);
  --fs-nav:    clamp(0.9rem, 1.05vw, 1rem);

  --max-w:   1200px;
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --header-h: clamp(4.5rem, 7vw, 6rem);

  --radius:   14px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Reset ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--c-bg);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-body);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
/* ol needs this as much as ul: browsers indent it by 40px to make room
   for the numbering, which pushed the step cards off centre. */
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 1000;
  background: var(--c-ink);
  color: var(--c-bg);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── Buttons ───────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.65rem 1.5rem;
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-ink);
  font-size: var(--fs-nav);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover,
.btn:focus-visible { background: var(--c-ink); color: var(--c-bg); }

.btn svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* ── Header ────────────────────────────────────────────────── */

.site-header {
  position: relative;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
}

.site-header__inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

.brand { grid-column: 1; justify-self: start; display: inline-flex; }
.brand__img { height: clamp(1.5rem, 2.2vw, 2rem); width: auto; }

.nav { grid-column: 2; justify-self: center; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.6rem);
  font-size: var(--fs-nav);
  color: var(--c-ink);
}
.nav__list a {
  text-decoration: none;
  padding: 0.4rem 0;
  position: relative;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--c-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { grid-column: 3; justify-self: end; }

.nav-toggle { display: none; }

/* ── Home ──────────────────────────────────────────────────── */

/* One screen, no scrolling. The header floats over the artwork. */
.page-home .site-header {
  position: absolute;
  inset: 0 0 auto 0;
}

.home {
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;          /* scoped to this section, never the page */
  scroll-margin-top: 0;
}

/* The block the "Meer informatie" menu item jumps to. */
#meer-informatie { scroll-margin-top: clamp(1rem, 4vw, 3rem); }

/* The overlay is 2732x1536. The frame keeps that ratio and fits inside
   the viewport, so the wordmark is never cropped. The area around it is
   the same cream as the plate itself, so the join is invisible. */
.home__frame {
  position: relative;
  container-type: inline-size;
  width: min(100vw, calc(100svh * 2732 / 1536));
}

/* The artwork owns the aspect ratio. The caption lives outside it, so it
   can never stretch the box and leave bare video showing underneath. */
.home__art {
  position: relative;
  aspect-ratio: 2732 / 1536;
  /* If the video will not autoplay — an older phone, low power mode, a
     slow connection — the letters read as black instead of vanishing
     into the cream page. */
  background: #000;
}

.home__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.home__overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Sits in the cream area under the wordmark, at the same spot as in
   the mockup. cqw ties it to the frame, so it scales with the artwork
   instead of with the window. */
.home__caption {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  top: 76%;
  text-align: center;
  color: var(--c-ink);
  padding-inline: var(--gutter);
}

.home__title {
  font-size: clamp(1.2rem, 2.9vw, 2.65rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.home__sub {
  margin-top: 0.3rem;
  font-size: clamp(0.85rem, 1.7vw, 1.3rem);
  line-height: 1.2;
}

/* Links to contact. It needs some affordance or nobody will know it is
   clickable, so the underline sits there faintly and firms up on hover. */
.home__sub a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 0.25s var(--ease);
}
.home__sub a:hover,
.home__sub a:focus-visible { text-decoration-color: currentColor; }

@supports (font-size: 1cqw) {
  .home__title { font-size: 3cqw; }
  .home__sub   { font-size: 1.75cqw; }
}

/* ── Section headings ──────────────────────────────────────── */

.section { padding-block: clamp(2.5rem, 6vw, 5rem); }

.section__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--c-ink);
  text-align: center;
  line-height: 1.2;
  text-wrap: balance;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--c-quote);
  text-align: center;
  line-height: 1.3;
  text-wrap: balance;
}

/* ── Photo stack (meer informatie) ─────────────────────────── */

.shots {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.shots img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* ── Step cards ────────────────────────────────────────────── */

.steps {
  margin-top: clamp(1.75rem, 4.5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}

.step {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  background: var(--c-mint);
  border-radius: var(--radius);
}

.step__title {
  font-size: var(--fs-card-h);
  font-weight: 700;
  color: var(--c-ink);
}

.step__text {
  margin-top: clamp(0.9rem, 1.8vw, 1.5rem);
  color: var(--c-body);
}

.step__icon {
  margin-top: auto;
  padding-top: clamp(1.25rem, 3vw, 2.5rem);
  color: var(--c-accent);
}
.step__icon svg { width: clamp(1.6rem, 2.4vw, 2.1rem); height: auto; }

/* ── Pull quote ────────────────────────────────────────────── */

.quote {
  margin-inline: auto;
  max-width: 46ch;
  font-size: var(--fs-lead);
  font-style: italic;
  color: var(--c-quote);
  text-align: center;
  line-height: 1.35;
  text-wrap: balance;
}

/* ── Address block ─────────────────────────────────────────── */

.address {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-beige);
}

.address__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.address__panel {
  padding: clamp(1.5rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.address__title {
  font-size: var(--fs-addr);
  font-weight: 400;
  color: var(--c-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.address__hook {
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--c-ink);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.address__list {
  margin-top: clamp(0.9rem, 2vw, 1.5rem);
  display: grid;
  gap: clamp(0.4rem, 1vw, 0.7rem);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--c-ink);
}
.address__list li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.address__list svg {
  width: 1.1em; height: 1.1em;
  flex: 0 0 auto;
  color: var(--c-ink);
}

.address__actions {
  margin-top: clamp(1.5rem, 3.5vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ── Footer ────────────────────────────────────────────────── */

.site-footer {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
}

.site-footer__brand {
  font-size: clamp(1.75rem, 4.2vw, 3.4rem);
  font-weight: 400;
  color: #000;
  letter-spacing: -0.02em;
}
.site-footer__brand b { font-weight: 700; }

.site-footer__meta {
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  color: #000;
}
.site-footer__meta a { text-decoration: none; }
.site-footer__meta a:hover { text-decoration: underline; }
.site-footer__meta b { font-weight: 700; }

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 860px) {
  /* Stacked and centred: a single wide column of left-aligned text
     reads badly on a phone. */
  .steps { grid-template-columns: 1fr; }
  .step {
    align-items: center;
    text-align: center;
    max-width: 32rem;
    margin-inline: auto;
    width: 100%;
  }
  .step__icon { padding-top: clamp(1rem, 4vw, 1.75rem); }

  .address { grid-template-columns: 1fr; }
  .address__photo { aspect-ratio: 16 / 10; }
}

@media (max-width: 720px) {

  .site-header__inner { grid-template-columns: auto 1fr auto; }

  .brand { grid-column: 1; }

  /* Bellen stays in the header on a phone — on a phone it is one tap
     to the thing this business actually wants people to do. */
  .header-cta {
    grid-column: 2;
    justify-self: end;
    padding-inline: 1.1rem;
  }

  .nav-toggle {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem;
    background: none;
    border: 0;
    color: var(--c-ink);
    cursor: pointer;
    z-index: 2;
  }

  .nav-toggle__box { position: relative; width: 26px; height: 18px; display: block; }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    position: absolute;
    left: 0;
    width: 26px; height: 2px;
    background: var(--c-ink);
    transition: transform 0.3s var(--ease), opacity 0.2s linear;
  }
  .nav-toggle__bars { top: 8px; }
  .nav-toggle__bars::before { content: ""; top: -8px; }
  .nav-toggle__bars::after  { content: ""; top:  8px; }

  .nav {
    position: fixed;
    inset: 0;
    width: 100%;
    justify-self: stretch;
    z-index: 1;
    background: var(--c-bg);      /* fully opaque, not a scrim */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--header-h) var(--gutter) 3rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s var(--ease), visibility 0.28s;
  }

  .nav__list {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    font-size: clamp(1.4rem, 6.5vw, 2rem);
  }
  .nav__list a { padding: 0.7rem 1rem; min-height: 44px; display: block; }
  .nav__list a::after { display: none; }

  body.nav-open .nav { opacity: 1; visibility: visible; }
  body.nav-open .nav-toggle__bars { background: transparent; }
  body.nav-open .nav-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
  body.nav-open .nav-toggle__bars::after  { transform: translateY(-8px) rotate(-45deg); }

  /* No video on a phone: the wordmark reads black against the plate,
     which is steadier than a clip that may or may not autoplay — and it
     saves the visitor the download. The element is removed in JS too, so
     nothing is fetched at all. */
  .home__video { display: none; }

  /* At phone width the artwork is only ~56vw tall, so a caption scaled
     to it would be unreadably small. It moves below instead. */
  .home { height: 100svh; align-content: center; }
  .home__frame { width: 100%; }
  .home__caption {
    position: static;
    margin-top: clamp(1.25rem, 5vw, 2rem);
  }
  @supports (font-size: 1cqw) {
    .home__title { font-size: clamp(1.3rem, 5.9vw, 1.9rem); }
    .home__sub   { font-size: clamp(0.9rem, 3.7vw, 1.2rem); }
  }
  .address__actions .btn { flex: 1 1 auto; justify-content: center; }
  .site-footer__meta { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}