/* EZForms — brand site. U-Build-inspired: white space, technical line drawings, one red accent. */
/* Jost: open-licence geometric sans modelled on Futura, the closest web-safe match to the Futura-style
   engraving on the panels. Futura BT on the workstation is a desktop licence, so it isn't embedded here. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/jost-var-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/jetbrains-mono-var-latin.woff2") format("woff2"); }

:root {
  --ink: #111110;
  --ink-2: #1a1917;
  --paper: #fafaf8;
  --paper-2: #f3f2ee;
  --line: #e0ddd6;
  --mute: #6f6c66;
  --red: #c8503c;
  --red-d: #a8402f;
  --wide: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(16px, 4vw, 48px);
  --sec: clamp(40px, 5vw, 72px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--wide); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }

/* ---------- Nav: split left / wordmark / right ---------- */
.nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 14px var(--pad); background: rgba(250,250,248,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav__side { display: flex; gap: 24px; font-size: 14px; font-weight: 500; }
.nav__side--right { justify-content: flex-end; align-items: center; }
.nav__side a { text-decoration: none; }
.nav__side a:hover { color: var(--red); }
.nav__mark { font-weight: 500; font-size: 22px; letter-spacing: 0; text-decoration: none; opacity: 0; transition: opacity .3s; }
.nav.is-scrolled .nav__mark { opacity: 1; }
.nav__shop { padding: 8px 16px; border: 1.5px solid var(--red); color: var(--red); border-radius: 999px; }
.nav__shop:hover { background: var(--red); color: #fff !important; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px; font: 600 15px var(--wide); text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.btn--outline { border: 1.5px solid var(--red); color: var(--red); }
.btn--outline:hover { background: var(--red); color: #fff; }
.btn--solid { background: var(--red); color: #fff; border: 1.5px solid var(--red); }
.btn--solid:hover { background: var(--red-d); border-color: var(--red-d); }
.btn--text { padding: 0 6px; }
.btn--text:hover { color: var(--red); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
:is(a, button):focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(calc(100svh - 64px), 760px); display: grid; grid-template-rows: auto 1fr auto; padding: clamp(24px, 5vw, 56px) var(--pad) 32px; overflow: hidden; }
.hero__word { text-align: center; font-weight: 500; font-size: clamp(64px, 17vw, 270px); line-height: .9; letter-spacing: -.01em; }
.hero__drawing { position: relative; width: 100%; max-width: 1240px; height: 100%; min-height: 300px; margin: 0 auto; padding: 2vh 0; }
.hero__drawing svg { width: 100%; height: 100%; overflow: visible; }
.hero__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.hero__tag { margin: 0; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.45; max-width: 520px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Assembly animation: each build step slides in from behind the face sheet and settles. */
.assemble g[data-lvl] { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); }
.assemble.is-on g[data-lvl] { animation: assemble 1.1s cubic-bezier(.2,.75,.25,1) var(--delay, 0s) forwards; }
@keyframes assemble { 0% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .assemble g[data-lvl] { opacity: 1; transform: none; } .assemble.is-on g[data-lvl] { animation: none; } }

/* ---------- Trust bar ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-2); }
.trust ul { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(4, 1fr); }
.trust li { padding: 22px 0; display: flex; flex-direction: column; gap: 2px; }
.trust li + li { border-left: 1px solid var(--line); padding-left: 24px; }
.trust b { font-weight: 700; font-size: 18px; }
.trust span { font-size: 13px; color: var(--mute); }

/* ---------- Section scaffolding ---------- */
.eyebrow { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.eyebrow--light { color: #e07a66; }
.sec-head { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: baseline; padding: var(--sec) var(--pad) 24px; }
.sec-head__lead { margin: 0; font-weight: 600; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -.01em; }
.mono { font-family: var(--mono); font-size: 13px; color: var(--mute); margin: 4px 0 10px; }

/* ---------- Applications: column, slab, plinth side by side at one scale ---------- */
.apps { padding: var(--sec) var(--pad) calc(var(--sec) * .6); }
.apps__head { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: baseline; margin-bottom: 28px; }
.apps__lead { margin: 0; font-weight: 600; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -.01em; }
.apps__row { display: grid; grid-template-columns: 628fr 1380fr 1376fr; grid-template-rows: auto auto; column-gap: clamp(16px, 3vw, 44px); }
.app { margin: 0; min-width: 0; grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 14px; }
.app img { width: 100%; align-self: end; }
.app figcaption { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 12px; }
.app figcaption b { font-size: 20px; font-weight: 700; }
.app figcaption .mono { margin: 0; }

/* ---------- Why: four compact cards ---------- */
.why { padding: var(--sec) var(--pad); }
.why > .eyebrow { margin-bottom: 24px; }
.why__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why__card { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 32px); background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.why__num { font-family: var(--mono); color: var(--red); font-size: 14px; }
.why__card h3 { font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.1; letter-spacing: -.01em; }
.why__card p { margin: 0; font-size: 15px; color: #3b3935; }

/* ---------- Load: one bakkie ---------- */
.load { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; padding: 0 var(--pad) var(--sec); }
.load__photo { margin: 0; }
.load__photo img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: center 55%; border-radius: 18px; }
.load__lead { font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 14px; }
.load__copy p { margin: 0; color: #3b3935; font-size: 17px; }
.load__tools { margin: 22px 0 0; display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center; }
.load__tools img { width: 140px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.load__tools figcaption { font-family: var(--mono); font-size: 12px; color: var(--mute); }
/* ---------- Products ---------- */
.products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0 var(--pad) var(--sec); }
.product { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
.product__drawing, .product__photo { aspect-ratio: 4 / 3; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; }
.product__drawing { padding: 24px; }
.product__drawing svg { width: 100%; height: 100%; }
.product__drawing--img { display: block; }
.product__drawing--img img { width: 100%; height: 100%; object-fit: contain; }
.product__photo img { width: 100%; height: 100%; object-fit: cover; }
.product__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.product__body h3 { font-weight: 700; font-size: 22px; }
.product__body p:not(.mono) { margin: 0 0 18px; color: #3b3935; font-size: 15px; flex: 1; }
.product__body .btn { align-self: flex-start; }

/* ---------- How it works (dark) ---------- */
.how { background: var(--ink); color: var(--paper); padding: var(--sec) var(--pad); }
.how__steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.how__steps li { position: relative; }
.how__steps img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; filter: grayscale(.25) contrast(1.05); }
.how__n { position: absolute; top: 12px; left: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font: 700 15px var(--mono); }
.how__steps h3 { margin-top: 16px; font-weight: 700; font-size: 22px; }
.how__steps p { margin: 6px 0 0; color: #c9c6be; font-size: 15px; }

/* ---------- Projects ---------- */
.projects__case { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); padding: 0 var(--pad); align-items: start; }
.projects__hero { margin: 0; grid-column: 1 / -1; }
.projects__hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 60%; border-radius: 18px; }
.projects__copy { display: contents; }
.projects__copy > h3 { grid-column: 1; }
.projects__copy > .facts { grid-column: 1; }
.projects__copy > p { grid-column: 2; grid-row: 2 / span 2; margin: 0; font-size: 17px; }
.projects__hero figcaption { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--mute); }
.projects__copy h3 { font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 20px; }
.projects__copy p { color: #3b3935; }
.facts { margin: 0 0 20px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 110px 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding-top: 3px; }
.facts dd { margin: 0; font-weight: 600; }
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 28px var(--pad) var(--sec); }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }

/* ---------- Made here ---------- */
.made { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; padding: var(--sec) var(--pad); background: var(--paper-2); }
.made__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; }
.made__lead { font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; letter-spacing: -.02em; margin: 14px 0; }
.made__copy p { color: #3b3935; }
.made__inline { margin-top: 18px; border-radius: 14px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* ---------- CTA + footer ---------- */
.cta { text-align: center; padding: clamp(72px, 10vw, 140px) var(--pad); }
.cta h2 { font-weight: 600; font-size: clamp(34px, 6vw, 84px); line-height: 1; letter-spacing: -.02em; max-width: 14ch; margin: 0 auto; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.cta__small { margin-top: 26px; font-size: 14px; color: var(--mute); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 22px var(--pad); border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.foot__mark { font-weight: 500; font-size: 20px; color: var(--ink); }

/* Fade-up on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero { min-height: 0; }
  .hero__drawing { height: auto; aspect-ratio: 16 / 11; min-height: 0; }
  .nav { grid-template-columns: 1fr auto; }
  .nav__side:first-child { display: none; }
  .nav__mark { opacity: 1; }
  .trust ul { grid-template-columns: repeat(2, 1fr); }
  .trust li:nth-child(3) { border-left: 0; padding-left: 0; }
  .sec-head, .projects__case, .made { grid-template-columns: 1fr; }
  .projects__copy > * { grid-column: 1 !important; grid-row: auto !important; }
  .projects__hero img { aspect-ratio: 16 / 10; }
  .why__track { grid-template-columns: repeat(2, 1fr); }
  .apps__head, .load { grid-template-columns: 1fr; }
  .products__grid { grid-template-columns: 1fr; }
  .how__steps { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .nav__side--right a:not(.nav__shop) { display: none; }
  .how__steps { grid-template-columns: 1fr; }
  .why__track { grid-template-columns: 1fr; }
  .apps__row { grid-template-columns: 1fr; row-gap: 28px; }
  .app img { max-height: 360px; object-fit: contain; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .trust b { font-size: 16px; }
}