/* G&W Bouwwerken — one stylesheet, no frameworks, no external fonts. */

:root {
  --blue: #1c77bc;          /* exact blue taken from the old site */
  --blue-dark: #155e96;
  --ink: #444;
  --muted: #777;            /* old site: all body copy is #777 */
  --line: #e2e6ea;
  --alt-bg: #f8f9f9;        /* projects section background, and the bottom bar */
  --wrap: 1140px;
  --pad: 70px;              /* section padding, same as the old site */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 70px; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;   /* old site: 14px — 15px reads a little easier, otherwise identical */
  line-height: 1.7;
  color: var(--muted);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue); color: #fff; padding: 12px 20px;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 68px;
}
.logo {
  font-size: 1.28rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue); text-decoration: none;
  white-space: nowrap;
}
#nav { display: flex; gap: 34px; }
#nav a {
  color: var(--ink); text-decoration: none;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
#nav a:hover, #nav a:focus-visible { color: var(--blue); border-bottom-color: var(--blue); }

.nav-toggle {
  display: none;
  width: 44px; height: 40px; padding: 9px 8px;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  margin: 5px 0;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 666px;   /* height of the old hero */
  display: grid; place-items: center;
  overflow: hidden;
  text-align: center;
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: -2;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,20,32,.45), rgba(10,20,32,.62));
}
.hero-inner { padding: 60px 20px; color: #fff; }
.hero h1 {
  margin: 0 0 .4em;
  font-size: clamp(2.1rem, 6.4vw, 4.3rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
/* The rotating word flips down into place — the same movement as flipInX
   from animate.css, which the old site used. */
.rotate { display: inline-block; backface-visibility: visible; }
.rotate.flip { animation: flipInX 1s ease both; }

@keyframes flipInX {
  from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
  40%  { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; }
  60%  { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
  80%  { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to   { transform: perspective(400px); }
}

.hero-sub {
  margin: 0 auto 1.8em; max-width: 34em;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin: 0; }

/* ---------- buttons ---------- */

/* Base button = the old site's form submit button. */
.btn {
  display: inline-block;
  background: var(--blue); color: #fff;
  padding: 15px 23px;
  border: 1px solid var(--blue); border-radius: 2px;
  font: inherit; font-size: 13px; font-weight: 600;
  line-height: 1.25;   /* otherwise it inherits the body line-height and gets too tall */
  letter-spacing: 1px; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.btn:hover, .btn:focus-visible { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.9); color: rgba(255,255,255,.9); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: #fff; border-color: #fff; color: var(--blue); }
.btn-block { width: 100%; margin-top: 8px; }
.btn[disabled] { opacity: .6; cursor: default; }

/* The two hero buttons are larger and more widely spaced, as they used to be. */
.hero-btns .btn {
  padding: 12px 24px;
  font-size: 17px;
  letter-spacing: normal;
}

/* ---------- sections ---------- */

.section { padding: var(--pad) 0; }
.section-alt { background: var(--alt-bg); }

/* Title + subtitle sit as one block 30px above the content, as before. */
.section-head { margin-bottom: 30px; text-align: center; }

h2 {
  margin: 0;
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);   /* 40px on desktop */
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--blue);
}
.lead {
  margin: 14px auto 0;
  max-width: 40em;
  font-size: 1.25rem;   /* 20px */
  line-height: 1.7;
  color: var(--muted);
  font-weight: 400;
}
.lead strong { color: var(--muted); font-weight: 700; }

/* ---------- about ---------- */

.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
.split-text p { margin: 0 0 1.3em; color: var(--muted); }
.split-text p:last-child { margin-bottom: 0; }
.split-img img { border-radius: 4px; box-shadow: 0 12px 34px rgba(20,35,55,.14); }

/* ---------- gallery ---------- */

/* Brickwork mosaic: full width, 5 columns, 2px joint.
   Every photo keeps its own aspect ratio — portraits stay portrait.

   Without JavaScript the browser fills column by column (these rules).
   With JavaScript the script places the photos row by row, left to right,
   exactly in the old site's order — see .masonry below. */
.gallery {
  columns: 5;
  column-gap: 2px;
}
.shot {
  display: block; width: 100%;
  padding: 0; border: 0; margin: 0 0 2px;
  background: #d9dde1;
  overflow: hidden;
  cursor: zoom-in;
  break-inside: avoid;
  line-height: 0;
}

.gallery.masonry { columns: auto; position: relative; }
.gallery.masonry .shot { position: absolute; margin: 0; }
.shot img {
  width: 100%; height: auto;
  transition: transform .4s ease, opacity .25s;
}
.shot:hover img, .shot:focus-visible img { transform: scale(1.05); opacity: .9; }
.shot:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(36px, 6vw, 70px);
  align-items: start;
}

form label {
  display: block;
  margin-bottom: 7px;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted);
}
.req { color: #d9534f; }

form input, form textarea {
  width: 100%;
  margin-bottom: 22px;
  padding: 13px 15px;
  font: inherit; font-size: 1rem;
  color: var(--ink);
  background: #eef0f2;
  border: 1px solid transparent; border-radius: 3px;
}
form textarea { resize: vertical; min-height: 150px; }
form input:focus, form textarea:focus {
  outline: 0; background: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(22,104,184,.16);
}

/* Honeypot — never visible to people. */
.hp { position: absolute !important; left: -9999px !important; opacity: 0; width: 1px; height: 1px; }

.form-status { margin: 14px 0 0; font-size: .95rem; min-height: 1.5em; color: var(--muted); }
.form-status.ok  { color: #1e7a45; font-weight: 600; }
.form-status.err { color: #b3392f; }

.contact-details { list-style: none; margin: 0; padding: 0; }
.contact-details li {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 26px;
}
.contact-details svg {
  flex: 0 0 40px; width: 40px; height: 40px; padding: 9px;
  fill: #fff; background: var(--blue); border-radius: 50%;
}
.contact-details a {
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.contact-details a:hover, .contact-details a:focus-visible { color: var(--blue); border-bottom-color: currentColor; }

/* ---------- footer ---------- */

.site-footer {
  position: relative;          /* anchor for the back-to-top button */
  background: var(--alt-bg);
  border-top: 1px solid var(--line);
  padding: 28px 0;
  text-align: center;
}
.site-footer p { margin: 0; font-size: .9rem; color: var(--muted); }

/* ---------- back to top ---------- */

/* A square rotated 45 degrees, so a diamond, with only the corner that ends up
   pointing upwards rounded off. The bottom half is hidden inside the bar, so
   only a rounded peak sticks out above it. Same colour as the bar, so the two
   read as one piece. Fixed at the bottom of the page — it does not scroll along.

   After the rotation it is the square's top and right edges that face upwards;
   only those two get a hairline border, so the peak stands out against the
   white above while the rest blends into the bar. */
.to-top {
  position: absolute;
  right: 75px; top: -25px;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: var(--alt-bg); color: var(--muted);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0 20px 0 0;
  transform: rotate(-45deg);
  transition: color .2s linear;
}
.to-top:hover, .to-top:focus-visible { color: var(--blue); }

/* Rotate the arrow back so it sits upright. */
.to-top svg { width: 34px; height: 34px; transform: rotate(45deg); }

@media (max-width: 560px) {
  .to-top { right: 34px; top: -20px; width: 40px; height: 40px; }
  .to-top svg { width: 27px; height: 27px; }
}

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 20px;
  background: rgba(8, 14, 22, .93);
}
.lightbox[hidden] { display: none; }
.lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox img {
  max-width: min(1200px, 84vw); max-height: 80vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 3px;
}
#lb-cap {
  color: #dfe4ea; font-size: .95rem;
  letter-spacing: .04em;
}
.lightbox button {
  background: rgba(255,255,255,.1); color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
  line-height: 1;
  transition: background .18s;
}
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255,255,255,.28); }
.lb-prev, .lb-next { flex: 0 0 52px; width: 52px; height: 52px; font-size: 2.4rem; padding-bottom: 6px; }
.lb-close {
  position: absolute; top: 18px; right: 20px;
  width: 46px; height: 46px; font-size: 2rem;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) { .gallery { columns: 4; } }
@media (max-width: 860px)  { .gallery { columns: 3; } }

@media (max-width: 860px) {
  :root { --pad: 55px; }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .split-img { order: -1; }
  .hero { min-height: 520px; }

  .nav-toggle { display: block; }
  #nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 22px rgba(20,35,55,.09);
    padding: 6px 20px 14px;
  }
  #nav.open { display: flex; }
  #nav a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  #nav a:last-child { border-bottom: 0; }
  .header-inner { position: relative; }
}

@media (max-width: 560px) {
  .gallery { columns: 2; }
  .hero { min-height: 460px; }
  .hero-btns .btn { flex: 1 1 100%; }
  h2 { letter-spacing: 2px; }
  .lb-prev, .lb-next { flex-basis: 40px; width: 40px; height: 40px; font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  /* The word still changes, just without the flip. */
  .rotate.flip { animation: none; }
}