/* ==========================================================================
   Zinvol ouder worden — stylesheet
   Breakpoints: 991px tablet · 767px mobile landscape · 479px mobile
   Headings use fluid clamp() sizes, so they need no per-breakpoint overrides.
   ========================================================================== */

/* ---------- Fonts (self-hosted: no visitor data sent to Google) ---------- */
@font-face {
  font-family: "Allura";
  src: url("fonts/allura-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* colours */
  --ink: #090b14;
  --white: #ffffff;
  --cream: #f4f0e6;
  --forest: #212922;
  --sage: #6e9277;
  --sage-dark: #4f6b57;
  --sage-light: #a3c0aa;   /* sage that stays readable on the dark background */
  --gold: #c9a46a;
  --accent: #38a854;
  --link: #3f5f48;

  /* fonts */
  --font-script: "Allura", cursive;
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;

  /* spacing & shape */
  --gutter: 5vw;
  --gap: clamp(1.25rem, 2.2vw, 2rem);
  --card-pad: clamp(1.5rem, 1rem + 2vw, 3rem);
  --radius: 1.25rem;
  --radius-arch: 999px 999px 1.5rem 1.5rem;
  --container: 1280px;
  --nav-height: 5rem;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }

body {
  margin: 0;
  /* An email address is one unbreakable word. On a narrow phone it is wider
     than the column, and a grid track cannot shrink below its content, so it
     pushed whole sections off-centre. Let such words break. */
  overflow-wrap: break-word;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;   /* 18px: easier reading for an older audience */
  line-height: 1.6;
}

/* Every component sets its own spacing, so start from zero */
h1, h2, h3, p, ul, dl, dd { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--forest); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.container { max-width: var(--container); margin-inline: auto; }

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

/* ==========================================================================
   Loading screen + scroll animations
   Both only apply when JavaScript runs (html.js), so without JS everything is
   simply visible right away. Motion is switched off for prefers-reduced-motion.
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: var(--forest);
  transition: opacity 500ms ease, visibility 500ms;
  /* Failsafe: even if the script never runs, the screen clears itself */
  animation: preloader-failsafe 1ms linear 6s forwards;
}
/* Browsers without scripting never see it at all */
@media (scripting: none) {
  .preloader { display: none; }
}

body.is-loaded .preloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

@keyframes preloader-failsafe {
  to { opacity: 0; visibility: hidden; }
}

.preloader-inner {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  padding: 2rem;
  animation: preloader-in 500ms ease both;
}

.preloader-inner img {
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(201, 164, 106, 0.4);
  border-radius: 50%;
}

.preloader-title {
  color: var(--cream);
  font-family: var(--font-script);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  line-height: 1;
}

/* Thin gold line that slides back and forth while loading */
.preloader-bar {
  position: relative;
  width: 9rem;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(244, 240, 230, 0.16);
}
.preloader-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 2px;
  background: var(--gold);
  animation: preloader-slide 1.1s ease-in-out infinite;
}

@keyframes preloader-in {
  from { opacity: 0; translate: 0 0.75rem; }
}
@keyframes preloader-slide {
  0%   { translate: -100% 0; }
  100% { translate: 250% 0; }
}

/* ---------- Hero: fades in once loading is done ---------- */
.js .hero-in {
  opacity: 0;
  translate: 0 1.25rem;
  transition: opacity 800ms ease, translate 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js body.is-loaded .hero-in { opacity: 1; translate: 0 0; }

.js .hero-in:nth-child(1) { transition-delay: 120ms; }
.js .hero-in:nth-child(2) { transition-delay: 220ms; }
.js .hero-in:nth-child(3) { transition-delay: 320ms; }
.js .hero-in:nth-child(4) { transition-delay: 420ms; }
.js .hero-visual.hero-in  { transition-delay: 260ms; }

/* ---------- Elements that rise into view while scrolling ---------- */
.js [data-reveal],
.js [data-reveal-group] > * {
  transition: opacity 700ms ease, translate 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js [data-reveal]:not(.is-visible),
.js [data-reveal-group]:not(.is-visible) > * {
  opacity: 0;
  translate: 0 1.5rem;
}

/* Groups: each item follows a moment after the previous one */
.js [data-reveal-group] > :nth-child(2) { transition-delay: 120ms; }
.js [data-reveal-group] > :nth-child(3) { transition-delay: 240ms; }
.js [data-reveal-group] > :nth-child(4) { transition-delay: 360ms; }
.js [data-reveal-group] > :nth-child(5) { transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  .preloader-inner,
  .js .preloader-bar::after { animation: none; transition: none; }
  .js .hero-in,
  .js [data-reveal],
  .js [data-reveal-group] > * {
    opacity: 1 !important;
    translate: none !important;
    transition: none;
  }
}

/* ==========================================================================
   Navigation
   Transparent over the hero, tinted glass once the page scrolls.
   ========================================================================== */
.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--nav-height);
  border-bottom: 1px solid transparent;
  transition: background-color 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
}

/* Solid state: on scroll, on pages without a hero, and while the mobile menu is open */
.site-nav.is-solid,
.site-nav:has(.nav-menu.is-open) {
  border-bottom-color: rgba(201, 164, 106, 0.28);
  background-color: rgba(14, 19, 15, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-nav.is-solid,
  .site-nav:has(.nav-menu.is-open) { background-color: rgba(14, 19, 15, 0.97); }
}

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--container);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--cream);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 200ms ease;
}
.nav-logo:hover { color: var(--gold); }

.nav-logo img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: cover;
  border: 1px solid rgba(201, 164, 106, 0.4);
  border-radius: 50%;
  background: #0e130f;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  list-style: none;
}

.nav-link {
  position: relative;
  display: block;
  padding: 0.6em 0.9em;
  color: rgba(244, 240, 230, 0.78);
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease;
}
.nav-link:hover { color: var(--cream); }

/* Gold underline that grows from the centre on hover */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.9em;
  right: 0.9em;
  bottom: 0.35em;
  height: 1px;
  background: var(--gold);
  scale: 0 1;
  transition: scale 250ms ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after { scale: 1 1; }

/* Phone number, doubles as the call to action */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.6rem;
  padding: 0.5em 1.1em;
  border: 1px solid rgba(201, 164, 106, 0.55);
  border-radius: 100rem;
  color: var(--gold);
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.nav-cta svg { width: 1.05rem; height: 1.05rem; }
.nav-cta:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: #12160f;
}

.nav-toggle {
  display: none;
  padding: 0.55rem;
  border: 1px solid rgba(244, 240, 230, 0.25);
  border-radius: 0.65rem;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.nav-toggle:hover { border-color: rgba(201, 164, 106, 0.6); background: rgba(244, 240, 230, 0.08); }
.nav-toggle svg { display: block; width: 1.5rem; height: 1.5rem; }

/* ==========================================================================
   Arch-shaped photo with offset gold outline (hero + services)
   ========================================================================== */
.arch {
  --arch-offset: 1.25rem;
  position: relative;
}

.arch::before {
  content: "";
  position: absolute;
  inset: calc(var(--arch-offset) * -1) calc(var(--arch-offset) * -1) var(--arch-offset) var(--arch-offset);
  border: 1px solid var(--gold);
  border-radius: var(--radius-arch);
  pointer-events: none;
}

.arch img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-arch);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  display: flex;
  align-items: center;
  min-height: 100vh;   /* fallback */
  min-height: 100svh;  /* ignores mobile browser toolbars */
  overflow: hidden;
  padding: calc(var(--nav-height) + clamp(0.75rem, 2vh, 1.5rem)) var(--gutter) clamp(2.5rem, 5vh, 5rem);
  /* Bright spot top right. Its radius is fixed and small enough that it has
     faded to nothing long before the bottom of the hero, so the joint with the
     next section stays invisible. */
  background-image: radial-gradient(circle 32rem at 85% 12%, rgba(110, 146, 119, 0.42), transparent);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(3rem, 6vw, 5rem) clamp(3rem, 5vw, 6rem);
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
}

.hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin-bottom: 1.25rem;
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
}

.hero-title {
  color: var(--cream);
  font-family: var(--font-script);
  font-size: clamp(3.75rem, 2.5rem + 5vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.hero-lead {
  max-width: 34rem;
  margin-bottom: 1rem;
  color: rgba(244, 240, 230, 0.82);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.7;
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: clamp(0.75rem, 1.5vh, 1.25rem) 2rem;
  padding-top: clamp(0.75rem, 2.5vh, 2rem);
  border-top: 1px solid rgba(244, 240, 230, 0.15);
}

.hero-fact dt {
  margin-bottom: 0.3rem;
  color: var(--gold);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-fact dd { color: var(--cream); }

.hero-visual {
  justify-self: center;
  width: 100%;
  max-width: 26rem;
  margin-top: 1rem;
  /* The badge is measured against the PHOTO, not the window, so it keeps the
     same proportion of the arch at every width (see cqw units below). */
  container-type: inline-size;
}

.hero-photo { background: var(--sage); }

.hero-badge {
  position: absolute;
  left: -2rem;
  bottom: 2.5rem;
  padding: 1rem 1.4rem;
  border-radius: 1rem;
  background: var(--cream);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
}

/* Container-query units: 1cqw = 1% of the photo's width. Older browsers keep
   the fixed values above. */
@supports (width: 1cqw) {
  .hero-badge {
    left: -8cqw;
    bottom: 8cqw;
    max-width: 88cqw;
    padding: 4cqw 5.5cqw;
    border-radius: clamp(0.7rem, 4cqw, 1rem);
  }
}

.hero-badge-title {
  margin-bottom: 0.2rem;
  color: var(--forest);
  font-family: var(--font-script);
  font-size: 1.8rem;
  line-height: 1.1;
}
@supports (width: 1cqw) {
  .hero-badge-title { font-size: clamp(1.25rem, 7.5cqw, 1.8rem); }
  .hero-badge a { font-size: clamp(0.9rem, 4.2cqw, 1.05rem); }
}

/* Same hover as the menu links: a gold underline that grows from the centre */
.hero-badge a {
  position: relative;
  display: inline-block;
  padding-bottom: 0.15em;
  color: var(--sage-dark);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 200ms ease;
}
.hero-badge a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--gold);
  scale: 0 1;
  transition: scale 250ms ease;
}
.hero-badge a:hover { color: var(--forest); }
.hero-badge a:hover::after,
.hero-badge a:focus-visible::after { scale: 1 1; }

/* ==========================================================================
   The dark page: ONE background behind all sections
   A slow light-to-dark-to-light ramp, tiled every 240vh so the change is
   actually noticeable while scrolling. First and last stop are the same
   colour, so the tiles join without a seam. Sections stay transparent and add
   their own light pool on top (see --pool further down).
   ========================================================================== */
.page-dark {
  background-color: #1a211b;
  background-image: linear-gradient(
    180deg,
    #27312a 0%,
    #1c231d 45%,
    #171d18 72%,
    #27312a 100%
  );
  background-size: 100% 240vh;
  background-repeat: repeat-y;
  color: var(--cream);
}

/* ---------- Light pools ----------
   Each section gets one soft glow, placed left / right / left down the page
   like lamps along a corridor. The eye reads depth from where the light is
   NOT, so the position alternates and never repeats twice in a row.
   Sections keep no background COLOUR: the page ramp has to show through.

   The glow does NOT sit on the section itself. A section's background stops
   dead at the section's edge, which cuts the fade in half and draws a hard
   line across the page. So each glow goes on a ::before layer that reaches
   25vh past the top and bottom of its section: by the time the layer is cut
   off, the glow is already at zero, and neighbouring glows overlap and blend.
   z-index -1 keeps the layer above the page ramp but behind all content. */
.page-dark { position: relative; z-index: 0; }

.page-dark > section {
  position: relative;
  background-color: transparent;
  background-repeat: no-repeat;
}

.about::before,
.services::before,
.section-green::before,
.contact::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -25vh 0;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* ---------- Grain ----------
   Large flat dark areas band into visible stripes on 8-bit screens. A very
   faint noise layer breaks the bands up and makes the dark read as a material
   rather than a fill. Fixed, so it does not drift while scrolling, and it sits
   under the nav (z-index 1000) and the loading screen (2000). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hairline where one section hands over to the next */
.section-rule { border-top: 1px solid rgba(244, 240, 230, 0.1); }

/* ==========================================================================
   Shared section styles
   ========================================================================== */
/* Staggered two-column layout (Over mij + Diploma's): two independent
   columns, the right one starts lower so the blocks don't line up in rows. */
.stagger {
  --stagger: clamp(3rem, 10vw, 8rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--gap);
}

.stagger-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;   /* grid items default to min-width:auto and refuse to shrink */
}
.stagger-col--offset { margin-top: var(--stagger); }

.section-title {
  max-width: 700px;
  margin-inline: auto;
  color: var(--cream);
  font-size: clamp(1.9rem, 1.2rem + 2.5vw, 3rem);
  text-align: center;
}

/* The small gold label above a section heading, with a rule on either side */
.eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
}

.card {
  padding: var(--card-pad);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);   /* cream cards keep dark text on the dark sections */
}

/* ==========================================================================
   Over mij
   ========================================================================== */
.about {
  padding: clamp(4.5rem, 9vw, 7rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}
.about::before { background-image: radial-gradient(circle 34rem at 12% 38%, rgba(110, 146, 119, 0.24), transparent); }

.about-title {
  margin-bottom: 0.4em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid rgba(201, 164, 106, 0.4);
  color: var(--cream);
  font-size: clamp(1.9rem, 1.2rem + 2.5vw, 3rem);
}

.about-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}
.about-grid .about-portrait { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }

.about-text {
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.25rem);
}
.about-text p + p { margin-top: 1.6em; }

/* ==========================================================================
   Diensten: compact accordion (native <details>, one open at a time)
   ========================================================================== */
/* Gold here instead of sage, so the glows do not read as one stain repeated */
.services {
  padding: clamp(4rem, 8vw, 6rem) var(--gutter) clamp(4.5rem, 9vw, 7rem);
}
.services::before { background-image: radial-gradient(circle 40rem at 88% 24%, rgba(201, 164, 106, 0.12), transparent); }

/* The list sits in a softly lifted panel, so this section reads as "the menu"
   without needing a background colour of its own. */
.service-list {
  max-width: 58rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid rgba(244, 240, 230, 0.1);
  border-radius: clamp(1rem, 2vw, 1.75rem);
  background: rgba(244, 240, 230, 0.035);
}

.service + .service { border-top: 1px solid rgba(244, 240, 230, 0.12); }

.service summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(auto, 15rem);
  align-items: center;
  gap: 0.25rem 2rem;
  padding: 1.35rem 3.5rem 1.35rem 0;
  list-style: none;
  cursor: pointer;
}
.service summary::-webkit-details-marker { display: none; }

/* Plus sign: circle + horizontal bar (::after), vertical bar (::before)
   rotates flat when the service opens, turning the plus into a minus. */
.service summary::after,
.service summary::before {
  content: "";
  position: absolute;
  top: 50%;
}

.service summary::after {
  right: 0.25rem;
  width: 2.25rem;
  height: 2.25rem;
  translate: 0 -50%;
  border: 1px solid rgba(201, 164, 106, 0.45);
  border-radius: 50%;
  background: linear-gradient(var(--gold), var(--gold)) center / 0.8rem 1.5px no-repeat;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.service summary:hover::after {
  border-color: var(--gold);
  background-color: rgba(201, 164, 106, 0.14);
}

.service summary::before {
  z-index: 1;
  right: calc(0.25rem + 1.125rem - 0.75px);
  width: 1.5px;
  height: 0.8rem;
  translate: 0 -50%;
  background: var(--gold);
  transition: rotate 350ms cubic-bezier(0.3, 0, 0.2, 1);
}
.service[open]:not(.is-closing) summary::before { rotate: 90deg; }

@media (prefers-reduced-motion: reduce) {
  .service summary::before { transition: none; }
}

.service-question {
  color: var(--sage-light);
  font-family: var(--font-script);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  line-height: 1.15;
}

.service-name {
  color: var(--cream);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  text-align: right;
}

.service-body {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  align-items: start;
  gap: 3rem;
  padding: 1.75rem 0 3rem 1rem;
}

.service-body .arch { --arch-offset: 0.6rem; }
.service-body p {
  max-width: 38rem;
  color: rgba(244, 240, 230, 0.85);
}

/* ==========================================================================
   Green section (Diploma's)
   ========================================================================== */
.section-green {
  /* Clips sideways only (the reveal animation rotates cards out of the page),
     so the glow layer can still reach past the top and bottom. */
  overflow-x: clip;
  overflow-y: visible;
  padding: clamp(4.5rem, 9vw, 7rem) var(--gutter);
}
.section-green::before { background-image: radial-gradient(circle 36rem at 8% 68%, rgba(110, 146, 119, 0.22), transparent); }

/* ---------- Diploma cards ---------- */
.cards { padding-top: clamp(2rem, 5vw, 3rem); }

.cards .card {
  border: 1px solid rgba(201, 164, 106, 0.2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

.card h3 {
  margin: 20px 0 30px;
  font-size: clamp(1.25rem, 0.8rem + 2vw, 2.37rem);
}

/* Scroll-in animation: cards rotate into place */
.reveal { transition: transform 700ms ease, opacity 700ms ease; }
.reveal-left  { transform-origin: 0% 100%; }
.reveal-right { transform-origin: 100% 100%; }
.js .reveal:not(.is-visible) { opacity: 0; }
.js .reveal-left:not(.is-visible)  { transform: rotate(-6deg); }
.js .reveal-right:not(.is-visible) { transform: rotate(6deg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; }
  .js .reveal:not(.is-visible) { opacity: 1; transform: none; }
}

/* ==========================================================================
   Contact: dark closing panel, everything centred
   ========================================================================== */
.contact {
  padding: clamp(4.5rem, 9vw, 7rem) var(--gutter) clamp(5rem, 10vw, 8rem);
  /* Same bright spot, centred behind the closing block. Kept compact so it
     never reaches the top or bottom edge of the section. */
  text-align: center;
}
.contact::before { background-image: radial-gradient(circle 26rem at 50% 50%, rgba(110, 146, 119, 0.32), transparent); }

.contact .container { max-width: 58rem; }

.contact-title {
  max-width: 24ch;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  color: var(--cream);
  font-size: clamp(1.9rem, 1.2rem + 2.5vw, 3rem);
}

.contact-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 6vw, 4rem);
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-badge {
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem;
  border: 1px solid rgba(201, 164, 106, 0.45);
  border-radius: 100rem;
  color: var(--gold);
  background-color: rgba(201, 164, 106, 0.08);
}
.icon-badge svg { width: 100%; height: 100%; }

.contact-list h3 {
  margin-bottom: 0.5em;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-list p { font-size: 1.1rem; }

.contact-list a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 164, 106, 0.5);
  padding-bottom: 0.1em;
  transition: color 200ms ease, border-color 200ms ease;
}
.contact-list a:hover { color: var(--gold); border-color: var(--gold); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding: clamp(3rem, 5vw, 4rem) var(--gutter);
  background: var(--ink);
  color: var(--white);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-block;
  padding-block: 0.35em;
  color: var(--white);
  text-decoration: none;
}
.footer-links a:hover { color: var(--white); text-decoration: underline; }

/* Legally required identification details, on every page */
.footer-legal {
  flex-basis: 100%;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 240, 230, 0.12);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
}

/* ==========================================================================
   Legal pages (privacy, cookies, terms, disclaimer)
   ========================================================================== */
.legal {
  max-width: calc(760px + 2 * var(--gutter));
  margin-inline: auto;
  padding: calc(var(--nav-height) + 3rem) var(--gutter) 5rem;
}

/* "Back to the home page" button at the top of every legal page */
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 2.5rem;
  padding: 0.6em 1.2em;
  border: 1px solid rgba(33, 41, 34, 0.25);
  border-radius: 100rem;
  color: var(--forest);
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.legal-back svg { width: 1.1rem; height: 1.1rem; }
.legal-back:hover {
  border-color: var(--sage);
  background: var(--cream);
  color: var(--forest);
}

.legal h1 { margin-bottom: 0.3em; font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.37rem); }
.legal h2 { margin: 2.5rem 0 0.35em; font-size: 1.33rem; line-height: 1.3; }
.legal h3 { margin: 1.75rem 0 0.3em; font-size: 1.1rem; line-height: 1.35; }
.legal p,
.legal ul,
.legal dl { margin-bottom: 0.7em; }
.legal ul { padding-left: 1.25rem; }
.legal .updated { margin-bottom: 2rem; color: rgba(9, 11, 20, 0.6); }

.legal-definitions dt { margin-top: 0.75rem; font-weight: 700; }
.legal-definitions dd { margin-left: 0; }

.legal code {
  padding: 0.1em 0.4em;
  border-radius: 0.35rem;
  background: var(--cream);
  font-size: 0.95em;
}

/* Tables scroll on their own so the page never scrolls sideways */
.legal-table {
  margin: 1rem 0 1.5rem;
  overflow-x: auto;
}

.legal-table table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 1rem;
}

.legal-table th,
.legal-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(33, 41, 34, 0.15);
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  border-bottom-color: rgba(33, 41, 34, 0.35);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-table tr:last-child td { border-bottom: 0; }

/* Marks information that Pascale still has to supply. Deliberately loud:
   these must all be gone before the pages go online. */
.legal-todo {
  padding: 0.1em 0.45em;
  border: 1px dashed #b4802a;
  border-radius: 0.35rem;
  background: #fdf3df;
  color: #8a5d10;
  font-size: 0.95em;
  font-weight: 600;
}

/* ==========================================================================
   Tablet — max 991px
   ========================================================================== */
@media (max-width: 991px) {
  .nav-toggle { display: block; }

  .nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline: var(--gutter);
    max-height: calc(100dvh - 8rem);
    overflow: auto;
    padding: 0.5rem;
    border: 1px solid rgba(201, 164, 106, 0.28);
    border-radius: 1rem;
    background: rgba(14, 19, 15, 0.97);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }
  .nav-menu.is-open { display: block; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li + li { border-top: 1px solid rgba(244, 240, 230, 0.1); }
  .nav-list .nav-cta-item { border-top: 0; padding: 0.75rem 0.4rem 0.4rem; }

  .nav-link { padding: 0.9em 0.8em; font-size: 1.05rem; }
  .nav-link::after { display: none; }
  .nav-link:hover { color: var(--gold); }

  .nav-cta { justify-content: center; margin: 0; width: 100%; }

  /* 1fr 1fr used to squeeze the text column, which pushed the hero past the
     fold on short windows. The text keeps the larger share. */
  .hero-inner {
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  }
  .hero-visual { max-width: 20rem; }
}

/* ==========================================================================
   Two columns stop working well before 767px: the cards get so narrow that
   lines run under 30 characters. Everything staggered folds to one column
   here instead, capped at a comfortable reading width.
   ========================================================================== */
@media (max-width: 900px) {
  .stagger { grid-template-columns: 1fr; }
  .stagger-col--offset { margin-top: 0; }

  .about-grid { max-width: 34rem; margin-inline: auto; }

  /* Diploma's: merge the two columns back into the original reading order */
  .cards { display: flex; flex-direction: column; gap: var(--gap); max-width: 38rem; margin-inline: auto; }
  .cards .stagger-col { display: contents; }
  .cards .stagger-col > :nth-child(1) { order: 1; }
  .cards .stagger-col > :nth-child(2) { order: 3; }
  .cards .stagger-col > :nth-child(3) { order: 5; }
  .cards .stagger-col--offset > :nth-child(1) { order: 2; }
  .cards .stagger-col--offset > :nth-child(2) { order: 4; }
  .cards .stagger-col--offset > :nth-child(3) { order: 6; }
}

/* ==========================================================================
   Mobile landscape — max 767px
   ========================================================================== */
@media (max-width: 767px) {
  .hero-inner,
  .contact-list { grid-template-columns: 1fr; }

  /* Stacked, a hero can no longer be one screen: text, photo and badge simply
     do not fit. Forcing 100svh only cut it off at an arbitrary point, so the
     hero becomes an ordinary block with its own breathing room. The photo
     shrinks enough that its top edge still shows above the fold. */
  .hero {
    min-height: 0;
    padding-bottom: clamp(3rem, 7vh, 4.5rem);
  }
  .hero-inner { gap: clamp(2.25rem, 6vw, 3rem); }
  .hero-visual { max-width: 17rem; margin-top: 0; }

  .service summary { grid-template-columns: 1fr; }
  .service-name { text-align: left; }
  .service-body { grid-template-columns: 1fr; gap: 1.5rem; padding-left: 0; }
  .service-body .arch { width: 9rem; margin-left: 0.6rem; }
}

/* Short laptop windows: below this the hero cannot fit one screen at any
   sensible type size, so it stops pretending to. */
@media (min-width: 768px) and (max-height: 560px) {
  .hero { min-height: 0; }
}

/* ==========================================================================
   Mobile portrait — max 479px
   ========================================================================== */
@media (max-width: 479px) {
  :root { --gutter: 7vw; }

  .hero { padding-bottom: 4.5rem; }
  .arch { --arch-offset: 0.75rem; }
  .hero-badge { left: -1.5cqw; }

  .footer-links { flex-direction: column; align-items: flex-start; }
}