/* ═══ LAYOUT ═══ */

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Top bar ── */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  height: 128px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}

.top-bar__top {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 32px;
}

.top-bar__bottom {
  height: 48px;
  background: var(--bg);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-bar__brand {
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  flex-shrink: 0;
}
.top-bar__monogram {
  font-family: var(--f-display);
  font-size: 50px;
  font-weight: 300;
  color: var(--brass);
  letter-spacing: 4px;
  line-height: 1;
}
.top-bar__sep {
  width: 1px;
  height: 50px;
  background: var(--rule);
  flex-shrink: 0;
}
/* Brand name + tagline stacked to the right of the monogram/divider. */
.top-bar__brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.top-bar__name {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg);
}
.top-bar__tagline {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--accent);  /* brass, matching the CE monogram + hero "Elements" */
}

/* ── Top bar actions (CTA + hamburger) ── */
.top-bar__actions {
  position: absolute;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ── Primary nav ── */
.top-nav {
  display: flex;
  height: 48px;
}
.top-nav__item {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 100%;
  /* A label must never wrap: this row is a fixed 48px, so a second line is clipped mid-letter
     rather than making the bar taller. Matters most for "Hoe het werkt" and "Over ons". */
  white-space: nowrap;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-right: 1px solid var(--rule);
  transition: color var(--dur) var(--ease);
  cursor: pointer;
}
.top-nav__item:first-child { border-left: 1px solid var(--rule); }
.top-nav__item:hover    { color: var(--accent); }
.top-nav__item.is-active { color: var(--accent); }

/* ── Mobile nav toggle ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--fg);
  transition: all var(--dur) var(--ease);
}

/* ── Mobile drawer ── */
.mobile-nav {
  display: none;
  position: fixed;
  top: 128px; left: 0; right: 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  z-index: 49;
  flex-direction: column;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav__item {
  padding: 16px 24px;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur) var(--ease);
}
.mobile-nav__item:hover    { color: var(--accent); }
.mobile-nav__item.is-active { color: var(--accent); }

/*
 * THE CODE GATE HOLDS THE FOOTER DOWN. On that one screen the page is a card and nothing else, so
 * without this the footer sat directly under a short section with a field of empty background below
 * it - the page looked truncated rather than finished.
 *
 * A flex column with the main growing, not `position: fixed`: fixed would overlap the card on a
 * short window, and this simply puts the footer at the bottom of the viewport when there is not
 * enough content and pushes it down when there is.
 *
 * Scoped to body.ptr-locked, which partners.php sets only while the gate is showing. The unlocked
 * partner page is a normal long page and needs none of it.
 */
body.ptr-locked { min-height: 100vh; display: flex; flex-direction: column; }
body.ptr-locked .page { flex: 1 0 auto; display: flex; width: 100%; }
/* The section fills the space the footer is not using, so the card sits in the middle of what is
   left rather than at the top of it. */
body.ptr-locked .page > .sec { flex: 1; }
/*
 * width:100% IS LOAD-BEARING, and its absence is what squashed this footer.
 *
 * .page-footer is `max-width: var(--grid-max); margin: 0 auto`, which fills the page and centres
 * itself in the normal document flow. Making the body a flex column turns it into a flex ITEM, and
 * an auto margin on the cross axis CANCELS the default `align-items: stretch` - so the footer stopped
 * filling and shrank to its own content, which pushed the three grid columns (social, mark, legal)
 * together until the CE monogram sat against the legal line. Stating the width restores the stretch
 * that the auto margin took away, and the footer renders exactly as it does on every other page.
 */
body.ptr-locked .page-footer { margin-top: 0; width: 100%; }

/*
 * THE PARTNER PAGE HAS NO NAV ROW, so the bar has to lose that row's height as well.
 *
 * .top-bar is a fixed 128px holding TWO rows: the brand row and the 48px .top-bar__bottom nav. The
 * partner page renders only the brand row - it has nowhere to navigate to - and .top-bar__top is
 * `flex: 1`, so it stretched through the whole 128px and centred the lockup in it. The bar was
 * therefore the same height as everywhere else while the mark inside it sat lower and read larger,
 * which is what "the header is different" is: not the height, the emptiness under the lockup.
 *
 * 80px is 128 minus that nav row, so the lockup lands exactly where it does on the main site.
 *
 * THE OFFSET MOVES WITH THE HEIGHT or the first section slides under a fixed bar. Scoped above
 * 640px on purpose: below that the main site hides its own nav row and both already agree at 72px,
 * so repeating it there would fight a rule that is already correct.
 */
@media (min-width: 641px) {
  body.ptr-page .top-bar { height: 80px; }
  body.ptr-page .page    { padding-top: 80px; }
  body.ptr-page .sec     { scroll-margin-top: 80px; }
}

/* ── Page ── */
.page { padding-top: 128px; }

/* ── Section ── */
.sec { scroll-margin-top: 128px; }
.sec {
  position: relative;
  isolation: isolate;          /* scopes z-index of bg images per section */
  padding: var(--sp-5) var(--sp-5);
  border-bottom: 1px solid var(--rule-soft);
  max-width: var(--grid-max);
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sec--hero { justify-content: flex-end; padding-bottom: var(--sp-5); min-height: 74vh; }
.sec--auto { min-height: auto; justify-content: flex-start; padding-top: var(--sp-5); padding-bottom: var(--sp-5); }

/* ── Section background images (full-bleed) ── */
/*
   Full-bleed trick: even though .sec has max-width,
   left: calc(50% - 50vw) + width: 100vw breaks the image
   out to the full viewport width.
*/
.hero__bg,
.sec-bg {
  position: absolute;
  top: 0;
  left: calc(50% - 50dvw);
  width: 100dvw;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero__bg img,
.sec-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hero: dramatic gradient - dark at bottom where text sits. Darkened through the
   middle/top band so the headline + lede don't wash out against the photo. */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--obsidian) 14%,
    color-mix(in srgb, var(--obsidian) 72%, transparent) 60%,
    color-mix(in srgb, var(--obsidian) 45%, transparent) 100%
  );
}

/* Section bg: heavy overlay so body text stays readable (raised 80% -> 88%). */
.sec-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

/* Section header */
.sec__head {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
}
.sec__head:not(:has(.sec__num)) {
  grid-template-columns: 1fr;
}
.sec__num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.sec__title {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
}
.sec__sub {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-top: 8px;
}

/* ── Page footer ── */
.page-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--rule);
  max-width: var(--grid-max);
  margin: 0 auto;
}
.page-footer__mark {
  font-family: var(--f-display);
  font-size: 96px;
  font-weight: 300;
  color: var(--brass);
  letter-spacing: 8px;
  line-height: 1;
  text-align: center;
  animation: fadeUp 1.2s ease forwards;
}
.page-footer > div:last-child { text-align: right; }
.footer-social {
  display: inline-flex;
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease);
}
.footer-social:hover { color: var(--accent); }
.footer-sep { margin: 0 6px; opacity: 0.5; }
.footer-legal {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer-legal:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── 12-col grid helper ── */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}

/* ── Responsive ── */
@media (max-width: 960px) {
  /* Match the configurator bar, which is 108px from 960px down. */
  .top-bar { height: 108px; }
  .top-bar__top { padding: 0 20px; }
  .top-bar__sep { display: none; }
  .top-bar__name { display: none; }
  /* Tagline is desktop-only; it would crowd the compact tablet/phone header. */
  .top-bar__tagline { display: none; }
  /* 10px, not 14px, since "Over ons" made this eight items (v1.173.0). The nav row is only hidden
     below 640px, so between 640 and 960 all eight sit on one 48px line - and in Dutch that is the
     long language ("Hoe het werkt", "Ontwerpen", "Projecten"), landing around 620px against a 641px
     viewport. There is no flex-wrap here and html/body carry overflow-x:hidden, so going over does
     not scroll or wrap: it silently CLIPS, and the first thing to disappear is Contact. The four
     pixels per side buy about 64px of headroom, which covers being wrong about the letter widths. */
  .top-nav__item { padding: 0 10px; font-size: 8px; }
  .page { padding-top: 108px; }
  .sec { scroll-margin-top: 108px; padding: var(--sp-4) var(--sp-4); }
}

@media (max-width: 640px) {
  /* Phone: the nav row is hidden, so this is a single logo row. Size it to the
     configurator's logo-row height (~the top 60px of its 108px two-row bar)
     rather than the configurator's full height, so it doesn't look oversized. */
  .top-bar { height: 72px; }
  .top-bar__top { justify-content: flex-start; }
  .top-bar__bottom { display: none; }
  .top-bar__sep { display: block; height: 34px; }
  .top-bar__monogram { font-size: 34px; }
  .top-bar__name { display: block; }
  /* Bring the tagline back on phones (the name is shown here). Smaller + wrapping
     within a capped width so it can't run under the hamburger on narrow screens. */
  .top-bar__brand-text { gap: 3px; }
  .top-bar__tagline { display: block; font-size: 11px; line-height: 1.3; max-width: 52vw; }
  .nav-toggle { display: flex; }
  .mobile-nav { top: 72px; }
  .page { padding-top: 72px; }
  .sec { scroll-margin-top: 72px; padding: var(--sp-4) var(--sp-3); }
  /* Pull the hero up on mobile: half the top padding + a shorter min-height
     so the "Crafted Elements" headline sits closer to the top bar. */
  .sec--hero { padding-top: var(--sp-4); min-height: 62vh; }
  .sec__head { grid-template-columns: 48px 1fr; gap: 16px; }
  .page-footer { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .page-footer > div:last-child { text-align: center; }
}

@media (max-width: 440px) {
  .top-bar__monogram { font-size: 30px; }
  .top-bar__sep { height: 30px; }
}