/* ============================================================================
   Atelier Houtgrein · demo schrijnwerk en interieur
   Eigen compositie bovenop scrollcraft.css (tokens + devices). Niets hier
   restylet [data-sc-*]: dat is het mechanisme.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url("../assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url("../assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --------------------------------------------------------------- tokens -- */
:root {
  --sc-canvas:      #17120D;   /* donker walnoot, de paginagond */
  --sc-surface:     #211A13;   /* licht verhoogd vlak */
  --sc-ink:         #F2EBDD;   /* linnen */
  --sc-ink-soft:    #B3A793;   /* warm grijs, getint */
  --sc-accent:      #D9A25A;   /* honing, messing */
  --sc-accent-ink:  #17120D;
  --sc-hout:        #8C5E34;   /* houttint */

  --sc-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Instrument Sans", system-ui, sans-serif;
}

/* ------------------------------------------------------------ skip-link -- */
.skip {
  position: fixed;
  top: var(--sc-2);
  left: var(--sc-2);
  z-index: 100;
  padding: var(--sc-2) var(--sc-4);
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  border-radius: var(--sc-r-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

section[id] { scroll-margin-top: 4.5rem; }

/* ------------------------------------------------------------------ nav -- */
.hg-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--sc-z-chrome);
  display: flex;
  align-items: center;
  gap: var(--sc-5);
  height: 60px;
  padding-inline: var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 74%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sc-hairline);
}
.hg-nav__merk {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-base);
  letter-spacing: var(--sc-track-snug);
  text-decoration: none;
  white-space: nowrap;
}
.hg-nav__links {
  display: flex;
  gap: var(--sc-5);
  margin-inline: auto;
}
.hg-nav__links a {
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
  text-decoration: none;
  transition: color var(--sc-d-base) var(--sc-ease-out);
}
.hg-nav__links a:hover { color: var(--sc-ink); }

/* ------------------------------------------------------------------ cta -- */
.hg-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-2);
  padding: var(--sc-3) var(--sc-5);
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-snug);
  text-decoration: none;
  border-radius: var(--sc-r-pill);
  box-shadow: var(--sc-e1);
  transition: translate var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.hg-cta:hover { translate: 0 -2px; box-shadow: var(--sc-e2); }
.hg-link {
  color: var(--sc-hout);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.hg-link:hover { color: var(--sc-accent); }

/* ----------------------------------------------------------------- hero -- */
/* Timelapse: één doorlopende opname van zonsopgang tot avond, als losse beelden
   op een canvas, zodat scrollen vooruit en achteruit even vlot spoelt. Het
   posterbeeld is het eerste frame en blijft staan tot het canvas tekent; zonder
   JS of bij reduced motion is het de hele hero. */
.hg-tl { background: #15120E; }
.hg-tl__poster,
.hg-tl__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
}
.hg-tl__canvas { opacity: 0; transition: opacity 0.5s ease; }
.hg-tl.is-live .hg-tl__canvas { opacity: 1; }
/* De scrim mag het bouwen niet toedekken: alleen links onder voor de tekst. */
.hg-tl .sc-scrim--lead { opacity: 0.78; }

.hg-tl__fase {
  position: absolute; z-index: var(--sc-z-copy, 20);
  left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem);
  max-width: 26rem;
  pointer-events: none;
}
.hg-tl__fase p {
  margin: var(--sc-2, 0.5rem) 0 var(--sc-2, 0.5rem);
  font-family: var(--sc-font-display, inherit);
  font-size: clamp(1.9rem, min(3.6vw, 7vh), 3.6rem);
  line-height: 1; color: #fff;
  text-wrap: balance;
}
.hg-tl__fase small {
  display: block; font-size: 1rem; line-height: 1.5;
  color: rgb(255 255 255 / 0.78);
}
.hg-tl__slot { max-width: min(40rem, 52vw); }
.hg-tl__slot .hg-hero__h1 { margin: var(--sc-3, 0.75rem) 0 var(--sc-6, 2rem); }

/* Klok en voortgang: de dag als maat, rechts onder. */
.hg-tl__klok {
  position: absolute; z-index: var(--sc-z-copy, 20);
  right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem);
  display: grid; justify-items: end; gap: 0.7rem;
  pointer-events: none;
}
.hg-tl__tijd {
  font-family: var(--sc-font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);
}
.hg-tl__balk {
  position: relative; width: clamp(8rem, 14vw, 13rem); height: 2px;
  background: rgb(255 255 255 / 0.22); overflow: hidden;
}
.hg-tl__balk i {
  position: absolute; inset: 0; background: var(--sc-accent, #E8A33D);
  transform-origin: left; transform: scaleX(var(--hg-dag, 0));
}
.hg-tl__ai {
  position: absolute; z-index: var(--sc-z-copy, 20);
  right: var(--sc-gutter); bottom: 1rem; margin: 0;
  font-size: 0.68rem; letter-spacing: 0.08em;
  color: rgb(255 255 255 / 0.5);
}

.hg-hero__scroll {
  position: absolute; z-index: 2; left: 50%; bottom: 2.2rem;
  translate: -50% 0;
  display: grid; justify-items: center; gap: 0.6rem;
  font-family: var(--sc-font-mono, ui-monospace, monospace);
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.62);
  opacity: calc(1 - clamp(0, var(--sc-p, 0) * 8, 1));
  pointer-events: none;
}
.hg-hero__scroll::after {
  content: ""; width: 1px; height: 2.6rem;
  background: linear-gradient(rgb(255 255 255 / 0.7), transparent);
  transform-origin: top;
  animation: bb-scroll 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes bb-scroll {
  0%   { transform: scaleY(0); opacity: 1; }
  55%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hg-hero__scroll::after { animation: none; }
}
.hg-hero__copy { max-width: min(44rem, 52vw); }
/* Kop maximaal drie regels en altijd onder de menubalk, ook op lage schermen. */
.hg-hero__h1 { font-size: clamp(2.5rem, min(5.6vw, 10.5vh), 6.25rem); line-height: 0.98; }
.hg-hero__copy .sc-body { margin-top: var(--sc-4); margin-bottom: var(--sc-6); max-width: 32rem; }

/* -------------------------------------------------------------- methode -- */
#methode { padding-block-start: calc(var(--sc-section) * 0.4); }
.hg-methode__lijst {
  margin-top: var(--sc-8);
  display: grid;
  gap: var(--sc-7);
}
.hg-waarheid {
  max-width: 33rem;
  padding-left: var(--sc-4);
  border-left: 1px solid var(--sc-hairline-strong);
}
.hg-waarheid h3 {
  margin: 0 0 var(--sc-2);
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-snug);
}
.hg-waarheid h3::before {
  content: "";
  display: block;
  width: var(--sc-5);
  height: 4px;
  margin-bottom: var(--sc-3);
  background: var(--sc-hout);
  border-radius: var(--sc-r-sm);
}
.hg-waarheid:nth-child(2) { margin-left: 16%; }
.hg-waarheid:nth-child(3) { margin-left: 6%; }
.hg-waarheid:nth-child(4) { margin-left: 28%; }

/* ----------------------------------------------------------------- peak -- */
.hg-peak__f {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity, transform;
}
.hg-peak__f:first-child { opacity: 1; }
.hg-peak__kop {
  position: absolute;
  left: var(--sc-gutter);
  bottom: calc(clamp(3rem, 12vh, 9rem) + 3.6rem);
  z-index: var(--sc-z-copy);
}
.hg-peak__fase {
  position: absolute;
  left: var(--sc-gutter);
  bottom: clamp(3rem, 12vh, 9rem);
  z-index: var(--sc-z-copy);
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-2xl);
  letter-spacing: var(--sc-track-tight);
}

/* --------------------------------------------------------------- aanpak -- */
.hg-aanpak {
  display: grid;
  place-content: center;
  gap: var(--sc-7);
  padding-inline: var(--sc-gutter);
}
.hg-aanpak__kop { max-width: 40rem; }
.hg-aanpak__inhoud {
  display: grid;
  grid-template-columns: minmax(0, 38rem) auto;
  gap: clamp(2rem, 8vw, var(--sc-9));
  align-items: center;
}
.hg-stappen {
  position: relative;
  min-height: 13rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hg-stappen li { position: absolute; inset: 0 auto auto 0; max-width: 30rem; }
.hg-stappen h3 {
  display: flex;
  align-items: baseline;
  gap: var(--sc-3);
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-2xl);
  letter-spacing: var(--sc-track-tight);
}
.hg-stappen h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sc-hairline-strong);
}
.hg-lijn {
  position: relative;
  width: 2px;
  height: min(44vh, 420px);
  background: var(--sc-hairline);
}
.hg-lijn__vul {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: calc(var(--sc-p, 0) * 100%);
  background: var(--sc-accent);
}
.hg-lijn__punt {
  position: absolute;
  left: 50%;
  top: calc(var(--t) * 100%);
  translate: -50% -50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sc-canvas);
  border: 2px solid var(--sc-hairline-strong);
  transition: background var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out);
}
.hg-lijn__punt.is-aan {
  background: var(--sc-accent);
  border-color: var(--sc-accent);
}

/* -------------------------------------------------------------- offerte -- */
#offerte { padding-block-start: calc(var(--sc-section) * 0.4); }
.hg-offerte { display: grid; gap: var(--sc-7); }
.sc-offerte__demo { color: var(--sc-hout); }
.hg-noscript {
  padding: var(--sc-5);
  border: 1px dashed var(--sc-hairline-strong);
  border-radius: var(--sc-r-md);
}
.hg-form { display: grid; gap: var(--sc-7); }
.hg-step { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sc-4); }
.hg-step legend {
  display: flex;
  align-items: center;
  gap: var(--sc-3);
  padding: 0;
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-snug);
}
.hg-step legend span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: var(--sc-t-sm);
  font-weight: 600;
  color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 16%, transparent);
  border-radius: var(--sc-r-sm);
}
.hg-keuzes { display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.hg-keuzes label {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--sc-2);
  padding: var(--sc-3) var(--sc-5);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-md);
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
  cursor: pointer;
  transition: color var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out);
}
.hg-keuzes label small { color: inherit; opacity: 0.7; }
.hg-keuzes label:hover { color: var(--sc-ink); border-color: var(--sc-ink-soft); }
.hg-keuzes label:has(input:checked) {
  color: var(--sc-ink);
  border-color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 12%, transparent);
}
.hg-keuzes label:has(input:focus-visible) { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.hg-keuzes input { position: absolute; opacity: 0; pointer-events: none; }
.hg-keuzes--sm label { padding: var(--sc-2) var(--sc-4); }

.hg-slider { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sc-4); }
.hg-slider label { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hg-slider output {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hg-slider input[type="range"] { width: 100%; height: 28px; }

.hg-naar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.hg-naar label { display: block; margin-bottom: var(--sc-2); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hg-naar input {
  width: 100%;
  padding: var(--sc-3) var(--sc-4);
  background: color-mix(in oklab, var(--sc-ink) 5%, transparent);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-md);
}
.hg-naar input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 60%, transparent); }

.hg-uitkomst {
  display: grid;
  gap: var(--sc-3);
  padding-top: var(--sc-7);
  border-top: 1px solid var(--sc-hairline);
}
.hg-uitkomst__som { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.hg-uitkomst__bedrag {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: var(--sc-t-3xl);
  letter-spacing: var(--sc-track-tight);
  font-variant-numeric: tabular-nums;
}
.hg-uitkomst__range { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.hg-uitkomst__knoppen { display: flex; flex-wrap: wrap; gap: var(--sc-4); margin-top: var(--sc-2); }
.hg-btn {
  padding: var(--sc-3) var(--sc-5);
  background: transparent;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-pill);
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-sm);
  color: var(--sc-ink);
  cursor: pointer;
  transition: border-color var(--sc-d-base) var(--sc-ease-out);
}
.hg-btn:hover { border-color: var(--sc-accent); }

/* ------------------------------------------------------------------ over -- */
.hg-over__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hg-over__copy { max-width: 30rem; }

/* ------------------------------------------------------------------- faq -- */
.hg-faq__lijst { margin-top: var(--sc-7); border-top: 1px solid var(--sc-hairline); }
.hg-vraag { border-bottom: 1px solid var(--sc-hairline); }
.hg-vraag h3 { margin: 0; }
.hg-vraag button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-4);
  padding: var(--sc-5) 0;
  background: none;
  border: 0;
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-snug);
  text-align: left;
  cursor: pointer;
}
.hg-vraag button i {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.hg-vraag button i::before,
.hg-vraag button i::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  translate: 0 -50%;
  background: var(--sc-accent);
  border-radius: var(--sc-r-sm);
  transition: rotate var(--sc-d-base) var(--sc-ease-out);
}
.hg-vraag button i::after { rotate: 90deg; }
.hg-vraag button[aria-expanded="true"] i::after { rotate: 0deg; }
.hg-antwoord { padding-bottom: var(--sc-5); }

/* --------------------------------------------------------------- contact -- */
.hg-close__licht {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    620px circle at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--sc-accent) 8%, transparent),
    transparent 72%
  );
}
.hg-close__inner {
  display: grid;
  place-content: center;
  gap: var(--sc-4);
  height: 100%;
  max-width: 44rem;
  padding-inline: var(--sc-gutter);
}
.hg-close__inner .sc-body { max-width: 34rem; }
.hg-close__inner .hg-cta { justify-self: start; margin-top: var(--sc-2); }
.hg-contactmid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-5);
  margin-top: var(--sc-2);
  font-style: normal;
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
}
.hg-contactmid a:hover { color: var(--sc-accent); }
.hg-voet {
  position: absolute;
  inset: auto var(--sc-gutter) var(--sc-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sc-3);
  font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
}
.hg-voet p { margin: 0; }
.hg-voet__klein { opacity: 0.75; }

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  
  .hg-lijn__punt { transition: none; }
}

/* -------------------------------------------------------------- mobiel -- */
@media (max-width: 767px) {
  .hg-nav { gap: var(--sc-3); height: 56px; }
  .hg-nav__links { display: none; }
    /* Staand scherm: een 16:9-film op volle hoogte toont maar een kwart van de
     breedte (geen kraan, alleen gevel). Daarom de bovenste 68 %, zacht
     overlopend in donker, met de tekst eronder. */
  .hg-tl__poster, .hg-tl__canvas {
    height: 68%; object-position: 45% 50%;
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
  }
  .hg-hero__scroll { display: none; }
  .hg-tl__fase { right: var(--sc-gutter); bottom: 2.5rem; }
  .hg-tl__slot { max-width: none; }
  .hg-tl__klok { top: 72px; bottom: auto; }
  .hg-tl__balk { width: 6.5rem; }
  .hg-hero__copy { max-width: none; }
  .hg-hero__copy .sc-body { margin-bottom: var(--sc-5); }
  .hg-waarheid:nth-child(n) { margin-left: 0; }
  .hg-aanpak__inhoud { grid-template-columns: 1fr; }
  .hg-lijn { display: none; }
  .hg-naar { grid-template-columns: 1fr; }
  .hg-voet { flex-direction: column; gap: var(--sc-1); }
}

/* ---------------------------------------------------------------- print -- */
@media print {
  body { background: #fff; color: #000; }
  .hg-nav, .sc-grain, [data-sc-progress], .skip,
  #hero, #methode, #peak, #aanpak, #over, #faq, #contact,
  .hg-form, .hg-uitkomst__knoppen { display: none !important; }
  #offerte { display: block; padding: 0; }
  #offerte * { color: #000 !important; }
  .hg-uitkomst { border-color: #000; }
  .hg-uitkomst__bedrag { font-size: 2.4rem; }
}

/* ------------------------------------------------- layout vóór de engine --
   De engine zet pas na mount .sc-stage en de akte-hoogte (span x 100vh). Tot
   dan hadden de gepinde aktes hoogte 0: de pagina sprong bij het laden
   (CLS 0,78) en zonder JS was de hero onzichtbaar. Hier dezelfde waarden
   vooraf, zodat mount niets meer verschuift. */
[data-sc-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
#hero { height: 600vh; }
#over, #contact { height: 125vh; }
#materiaal { height: 200vh; }
#peak { height: 250vh; }
#aanpak { height: 170vh; }

/* ------------------------------------------------- layout vóór de engine --
   Dezelfde waarden als de engine na mount zet, zodat er niets verspringt (CLS)
   en zonder JS de hero zichtbaar blijft. */
[data-sc-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
#hero { height: 600vh; }
#over, #contact { height: 125vh; }
#peak { height: 250vh; }
#aanpak { height: 170vh; }

/* ------------------------------------------------------------ typografie -- */
body { font-family: var(--sc-font-text); }
.sc-display { font-weight: 400; letter-spacing: -0.018em; hanging-punctuation: first; }
.sc-display em, .hg-nav__merk em { font-style: italic; color: var(--sc-accent); }
.hg-nav__merk { font-weight: 400; font-size: 1.15rem; }
.hg-nav__merk em { font-weight: 400; }
.sc-label { letter-spacing: 0.14em; }
.hg-waarheid h3, .hg-stappen h3, .hg-plank__tekst h3 {
  font-family: var(--sc-font-display); font-weight: 400; letter-spacing: -0.01em;
}
.hg-nav__cta {
  font-size: var(--sc-t-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  padding: 0.55rem 1rem; border-radius: 999px;
  transition: translate var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.hg-nav__cta:hover { translate: 0 -1px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.35); }

/* ------------------------------------------------- signature: jaarringen -- */
.ring { color: var(--sc-ink-soft); display: grid; place-items: center; order: 2; }
.hg-nav__links { margin-inline: auto 0; }
.hg-nav__cta { order: 3; }
.ring svg { overflow: visible; }
.ring.is-js .rg {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--hk, 0) - var(--a, 0)) / 0.14, 1));
  transform: rotate(-90deg); transform-origin: 24px 24px;
  opacity: 0.95;
}
.ring .r0 { --a: 0.0; } .ring .r1 { --a: 0.12; } .ring .r2 { --a: 0.32; }
.ring .r3 { --a: 0.54; } .ring .r4 { --a: 0.76; }
.ring .rg { transition: stroke 0.6s var(--sc-ease-out); }
.ring.f1 .r1, .ring.f2 .r2, .ring.f3 .r3 { stroke: color-mix(in oklab, var(--sc-accent) 55%, var(--sc-ink-soft)); }
.ring.f4 .r4 { stroke: var(--sc-accent); }
.ring.f4 .r0 { stroke: var(--sc-accent); }

/* ---------------------------------------------------------- houtstalen -- */
@property --w1 { syntax: "<color>"; inherits: true; initial-value: #C99B5C; }
@property --w2 { syntax: "<color>"; inherits: true; initial-value: #A87A3F; }
[data-soort="eik"]      { --w1: #C99B5C; --w2: #A87A3F; --korrel: 0.55; }
[data-soort="notelaar"] { --w1: #6E4A32; --w2: #4A2F1E; --korrel: 0.7; }
[data-soort="es"]       { --w1: #D8C198; --w2: #BFA474; --korrel: 0.4; }
[data-soort="zwart"]    { --w1: #3A2F27; --w2: #231B15; --korrel: 0.65; }

.hg-hout { display: grid; gap: var(--sc-7); }
.hg-stalen { display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.hg-stalen button {
  display: flex; align-items: center; gap: var(--sc-3);
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  background: transparent; color: var(--sc-ink-soft);
  border: 1px solid var(--sc-hairline-strong); border-radius: 999px;
  font: inherit; font-size: var(--sc-t-sm); cursor: pointer;
  transition: color var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out);
}
.hg-stalen button i {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background:
    repeating-linear-gradient(94deg, transparent 0 4px, rgb(0 0 0 / 0.16) 4px 5px, transparent 5px 9px, rgb(255 255 255 / 0.05) 9px 10px),
    linear-gradient(160deg, var(--w1), var(--w2));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
.hg-stalen button[data-soort="eik"] i      { --w1: #C99B5C; --w2: #A87A3F; }
.hg-stalen button[data-soort="notelaar"] i { --w1: #6E4A32; --w2: #4A2F1E; }
.hg-stalen button[data-soort="es"] i       { --w1: #D8C198; --w2: #BFA474; }
.hg-stalen button[data-soort="zwart"] i    { --w1: #3A2F27; --w2: #231B15; }
.hg-stalen button:hover { color: var(--sc-ink); border-color: var(--sc-ink-soft); }
.hg-stalen button[aria-checked="true"] { color: var(--sc-ink); border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 10%, transparent); }
.hg-stalen button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

.hg-plank { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, var(--sc-9)); align-items: center; }
.hg-plank__vlak {
  position: relative; aspect-ratio: 16 / 7; border-radius: 6px; overflow: hidden;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='400'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.0035 0.24' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.5 -0.45'/></filter><rect width='900' height='400' filter='url(%23n)'/></svg>") center/cover,
    repeating-linear-gradient(1deg, transparent 0 26px, rgb(0 0 0 / 0.18) 26px 28px, transparent 28px 61px, rgb(255 255 255 / 0.05) 61px 63px),
    linear-gradient(172deg, var(--w1), var(--w2));
  box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.08);
  transition: --w1 0.7s var(--sc-ease-out), --w2 0.7s var(--sc-ease-out);
}
.hg-plank__vlak::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 244 220 / 0.14) 50%, transparent 70%);
  translate: -60% 0; opacity: 0;
}
.hg-plank.is-wissel .hg-plank__vlak::after { animation: hg-glans 1.1s var(--sc-ease-out); }
@keyframes hg-glans { 0% { translate: -60% 0; opacity: 1; } 100% { translate: 60% 0; opacity: 1; } }
.hg-plank__tekst { display: grid; gap: var(--sc-3); align-content: center; }
.hg-plank__tekst h3 { font-size: var(--sc-t-2xl); margin: 0; line-height: 1.05; }
.hg-plank__eig { margin: 0; font-size: var(--sc-t-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); }

/* ------------------------------------------------------------- overigen -- */
.hg-offerte__demo { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-style: italic; }
.hg-uitkomst__bedrag { font-family: var(--sc-font-display); }
.hg-peak__fase { font-weight: 400; font-style: italic; }
.hg-over { background: var(--sc-canvas); }

@media (max-width: 767px) {
  .ring { display: none; }
  .hg-nav__cta { margin-left: auto; padding: 0.5rem 0.85rem; }
  .hg-plank { grid-template-columns: 1fr; }
  .hg-plank__vlak { aspect-ratio: 16 / 9; }
  #hero { height: 600vh; }
}
@media (prefers-reduced-motion: reduce) {
  .hg-plank__vlak { transition: none; }
  .hg-plank.is-wissel .hg-plank__vlak::after { animation: none; }
}
@media print {
  #hout { display: none !important; }
}

/* Leeg-scherm: op mobiel staat de kop van de scrub bovenaan de stage, zodat de
   stage die van onderen binnenschuift meteen tekst draagt en geen kaal beeld. */
@media (max-width: 767px) {
  .hg-peak__kop { bottom: auto; top: 5rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
}