/* ═══════════════════════════════════════════════════════════════
   GCSC — shared stylesheet for the multi-page site
   Bold, photo-led layout modeled on yomabouw.com; emerald/sand palette.
   Type system: Poppins (display + labels) and Inter Tight (body).

   Contents
   1. tokens
   2. base
   3. buttons & links
   4. photo placeholders
   5. chrome — nav
   6. chrome — footer
   7. animations
   8. home sections (split hero, marquee, cards, philosophy, CTA banner)
   9. inner pages (page header, projects, project detail,
      expertise, about, contact)
   10. media queries
   11. reduced motion

   PHOTO SWAP PROCEDURE (when real photography arrives)
   Replace  <figure class="ph ph-4x3" data-label="…"></figure>
   with     <figure class="photo photo-4x3">
              <img src="/images/photos/name.jpg" alt="…" loading="lazy">
            </figure>
   .photo-* shares the same aspect-ratio as .ph-*, so the layout is
   identical. Recommended export sizes:
     hero (split, portrait-ish crop) → 1600×1800 or larger
     hero 21:9 → 2000×857  ·  cards / gallery 4:3 → 1200×900
     portraits 3:4 → 800×1067  ·  squares 1:1 → 1000×1000

   VIDEO SWAP (landing hero) — an mp4 works exactly like a photo:
   Replace  <figure class="ph ph-dark hero-photo" data-label="…"></figure>
   with     <figure class="photo hero-photo">
              <video autoplay muted loop playsinline
                     poster="/images/photos/hero-poster.jpg">
                <source src="/images/photos/hero.mp4" type="video/mp4">
              </video>
            </figure>
   muted + playsinline are required for autoplay on mobile; the poster
   shows during load and for reduced-motion visitors (js/main.js stops
   autoplay for them). Encode H.264, 10–20 s seamless loop, ~1080p,
   ideally under ~8 MB.
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. TOKENS ─────────────────────────────────────────────── */
:root{
  /* brand emeralds */
  --green:        #38B070;   /* bright spring emerald — pills, highlights */
  --green-deep:   #2A9058;   /* CTA banner, footer */
  --green-bright: #4FC787;   /* small highlights on dark surfaces */
  --green-dark:   #17603B;   /* text/buttons on light surfaces (7:1 on cream) */

  /* warm neutrals */
  --page:  #FDFCF8;          /* default body background — near-white warm paper */
  --cream: #FCF7E5;          /* section alternation, highlight blocks */
  --sand:  #F5EACB;          /* section alternation, marquee strip */

  /* text */
  --ink:      #0A2418;       /* also the hero panel background */
  --ink-soft: #0A2418CC;
  --ink-mute: #0A241899;
  --paper:       #FCF7E5;    /* text on dark surfaces */
  --paper-soft:  #FCF7E5F0;
  --paper-mute:  #FCF7E5CC;
  --paper-faint: #FCF7E555;

  /* hairlines */
  --rule-dark:         #0A241824;
  --rule-dark-strong:  #0A241847;
  --rule-light:        #FCF7E52E;
  --rule-light-strong: #FCF7E552;

  /* accents */
  --accent:      #F4B93C;    /* amber — highlights on dark/emerald surfaces */
  --accent-deep: #A36D00;

  /* type */
  --font-display: 'Poppins', sans-serif;
  --font-label:   'Poppins', sans-serif;
  --font-body:    'Inter Tight', sans-serif;

  /* layout */
  --container: 1200px;
  --gutter: 48px;
  --radius: 14px;
}


/* ─── 2. BASE ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* wider variant for image-led grids (featured work, projects index) */
.container-wide{max-width: 1520px;}

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--green-dark);
  outline-offset: 3px;
}

/* small uppercase label above headings */
.kicker{
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* section rhythm */
.section{padding: 96px 0;}
.section-cream{background: var(--cream);}
.section-sand{background: var(--sand); border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark);}

/* kicker + heading + optional right-hand link */
.section-header{
  display:flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}
.section-header .kicker{display:block; margin-bottom: 14px;}
.section-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.section-title em{font-style: normal; color: var(--green-dark);}

/* generic in-copy links on light surfaces */
.prose a{
  color: var(--green-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: #17603B59;
  transition: text-decoration-color .25s ease;
}
.prose a:hover{text-decoration-color: var(--green-dark);}


/* ─── 3. BUTTONS & LINKS ────────────────────────────────────── */
/* pill buttons, Yoma-style */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 28px;
  background: var(--green-dark);
  color: var(--cream);
  text-decoration:none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn:hover{background: var(--ink); transform: translateX(2px);}
.btn .arrow{transition: transform .25s ease}
.btn:hover .arrow{transform: translateX(4px);}

/* secondary — hairline outline on light surfaces */
.btn-outline{
  background: transparent;
  color: var(--green-dark);
  border-color: var(--rule-dark-strong);
}
.btn-outline:hover{background: var(--ink); color: var(--cream); border-color: transparent;}

/* light — for emerald surfaces (CTA banner) */
.btn-light{background: var(--paper); color: var(--ink);}
.btn-light:hover{background: var(--accent); color: var(--ink);}

/* underlined uppercase text link */
.link-arrow{
  color: var(--green-dark);
  text-decoration:none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--rule-dark-strong);
  padding-bottom:2px;
  transition: border-color .25s, color .25s;
}
.link-arrow:hover{border-color: var(--green-dark);}
/* variant for dark surfaces */
.link-arrow.on-dark{color: var(--paper); border-bottom-color: var(--paper-faint);}
.link-arrow.on-dark:hover{color: var(--accent); border-bottom-color: var(--accent);}


/* ─── 4. PHOTO PLACEHOLDERS ─────────────────────────────────── */
/* Blocks reserved for photography that arrives later. The centered label
   (from data-label) describes the intended shot so it can be briefed. */
.ph{
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, #E7F2EA 0%, #F5EACB 100%);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.ph::after{
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  text-align: center;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* faint crop marks so the block reads as "image frame", not broken styling */
.ph::before{
  content:'';
  position:absolute; inset: 12px;
  border: 1px dashed var(--rule-dark);
  border-radius: calc(var(--radius) - 6px);
  pointer-events: none;
}
/* dark variant — used where light nav text must sit on top (home hero) */
.ph-dark{
  background: linear-gradient(160deg, #10331F 0%, #1E5C3B 55%, #2A9058 100%);
  border: 0;
}
.ph-dark::after{color: var(--paper-mute);}
.ph-dark::before{border-color: var(--rule-light);}

.ph-21x9, .photo-21x9{aspect-ratio: 21 / 9;}
.ph-16x9, .photo-16x9{aspect-ratio: 16 / 9;}
.ph-4x3,  .photo-4x3 {aspect-ratio: 4 / 3;}
.ph-3x4,  .photo-3x4 {aspect-ratio: 3 / 4;}
.ph-1x1,  .photo-1x1 {aspect-ratio: 1 / 1;}

/* real-photo counterpart — identical footprint, see swap procedure up top */
.photo{position: relative; width: 100%; overflow: hidden; border-radius: var(--radius);}
.photo img, .photo video{width: 100%; height: 100%; object-fit: cover; display: block;}


/* ─── 5. CHROME — NAV (injected by js/chrome.js) ────────────── */
.nav{
  position: fixed; top:0; left:0; right:0;
  z-index: 100;
  padding: 18px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
/* solid state: ink bar (on scroll on home, from load on inner pages).
   The bar is dark in every state, so links and logo stay light. */
.nav.solid, .nav.menu-open{
  background: rgba(10, 36, 24, .96);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--rule-light);
}
.nav a:focus-visible, .nav button:focus-visible{outline-color: var(--accent);}

.nav .logo{
  display:flex; align-items:center; gap: 18px;
  text-decoration:none;
  transition: opacity .35s ease, transform .35s ease;
}
.nav .logo-img{height: 26px; width: auto;}
.nav .logo-meta{
  padding-left: 18px;
  border-left: 1px solid var(--rule-light);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  line-height: 1.2;
}

.nav ul{list-style:none; display:flex; gap:32px; align-items:center;}
.nav ul a{
  display: inline-block;
  color: var(--paper-soft);
  text-decoration:none;
  font-size: 12.5px;
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position:relative;
  padding: 10px 0;
  transition: color .3s ease;
}
.nav ul a::after{
  content:''; position:absolute; left:0; bottom:4px;
  width:0; height:2px; background:var(--accent);
  transition: width .3s ease;
}
.nav ul a:hover{color: var(--accent);}
.nav ul a:hover::after{width:100%;}
.nav ul a[aria-current="page"]{color: var(--paper);}
.nav ul a[aria-current="page"]::after{width:100%;}

/* over the home hero (before scrolling): no bar logo — the big boxed logo
   in the hero panel shrinks into this spot on scroll (js/main.js) */
.nav.over-hero:not(.solid):not(.menu-open) .logo{
  opacity: 0;
  pointer-events: none;
}
/* while the shrink animation owns the logo (desktop home), the bar's own
   logo image stays hidden — the parked hero logo takes its place. The
   company name next to it fades in once the logo is fully parked
   (= the moment the bar turns solid). */
.nav.logo-parked .logo{pointer-events: none;}
.nav.logo-parked .logo-img{opacity: 0;}
.nav.logo-parked .logo-meta{opacity: 0; transition: opacity .35s ease;}
.nav.logo-parked.solid .logo-meta{opacity: 1;}

/* the hero logo while the scroll animation steers it (set by js/main.js).
   animation:none is essential — the rise-* entrance animation's fill mode
   would otherwise keep overriding the JS-driven transform forever. */
.hero-logo.is-fixed{
  position: fixed;
  z-index: 101;
  margin: 0;
  will-change: transform;
  animation: none;
}

/* EN · NL toggle */
.nav .lang{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding-left: 24px;
  border-left: 1px solid var(--rule-light);
}
.nav .lang a{padding: 10px 2px;}
.nav .lang a::after{content:none;}
.nav .lang .lang-current{color: var(--paper); font-weight: 700; padding: 10px 2px;}
.nav .lang .lang-sep{color: var(--paper-mute);}

/* hamburger — hidden on desktop */
.nav-toggle{
  display:none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span{
  display:block;
  width: 22px;
  height: 2px;
  transition: transform .3s ease, opacity .2s ease, background .3s ease;
}
.nav-toggle span{background: var(--paper);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform: translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity: 0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform: translateY(-7px) rotate(-45deg);}


/* ─── 6. CHROME — FOOTER (injected by js/chrome.js) ─────────── */
/* Yoma-style: Contact | Follow us | Quick links | boxed logo, on ink */
.footer{
  background: var(--ink);
  color: var(--paper-soft);
  padding: 72px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr auto;
  gap: 56px;
  padding-bottom: 56px;
}
.footer-social{display:flex; gap: 12px;}
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px;
  background: var(--cream);
  border-radius: 8px;
  transition: background .25s ease;
}
.footer-social a:hover{background: var(--accent);}
.footer-social svg{width: 20px; height: 20px; fill: var(--ink);}
.footer-logo-box{
  display:inline-flex;
  border: 2px solid var(--paper);
  border-radius: 4px;
  padding: 16px 22px;
}
.footer-logo-box img{height: 26px; width: auto;}
.footer-col-label{
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 18px;
}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap: 10px;}
.footer-col a{
  color: var(--paper-soft);
  text-decoration: none;
  font-size: 15px;
  transition: color .25s ease;
}
.footer-col a:hover{color: var(--accent);}
.footer-col p{font-size: 15px; color: var(--paper-soft);}
.footer-bottom{
  border-top: 1px solid var(--rule-light);
  padding-top: 24px;
  padding-bottom: 24px;
  display:flex; justify-content:center; gap: 16px; flex-wrap: wrap;
  text-align: center;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper-mute);
}


/* ─── 7. ANIMATIONS ─────────────────────────────────────────── */
@keyframes rise{
  from{opacity:0; transform: translateY(30px);}
  to{opacity:1; transform: translateY(0);}
}
.rise-1{animation: rise 1s cubic-bezier(.2,.7,.2,1) .1s both}
.rise-2{animation: rise 1.1s cubic-bezier(.2,.7,.2,1) .35s both}
.rise-3{animation: rise 1s cubic-bezier(.2,.7,.2,1) .65s both}
.rise-4{animation: rise 1s cubic-bezier(.2,.7,.2,1) .85s both}

/* fade-in-on-scroll waypoints (wired in js/main.js) */
.reveal{opacity:0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1; transform: none;}


/* ─── 8. HOME SECTIONS ──────────────────────────────────────── */
/* Yoma-style split hero: full-height dark panel left (boxed logo, bold
   uppercase headline with highlight blocks, pill CTA), photo right with a
   large curved top-left edge. The photo runs ~96px deeper than the panel,
   so the hand-off into the sand section below has Yoma's uneven, staggered
   edge instead of one straight line. */
.hero{
  display: grid;
  grid-template-columns: minmax(420px, 44%) 1fr;
  background: var(--sand);   /* shows in the stagger gap under the panel */
}
.hero-panel{
  display: flex;
  flex-direction: column;
  align-self: start;
  width: 100%;
  min-height: 100vh;
  padding: 32px 56px 72px;
  background: var(--ink);
  color: var(--paper);
}
/* boxed logo at the top of the panel — big at rest; on scroll js/main.js
   pins it and shrinks it into the bar's top-left corner */
.hero-logo{
  display: inline-flex;
  align-self: flex-start;
  border: 3px solid var(--paper);
  padding: 28px 38px;
  border-radius: 4px;
}
.hero-logo img{height: 68px; width: auto;}

.hero-panel-body{margin: auto 0; padding: 72px 0 40px;}
.hero-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 4.2vw, 66px);
  /* enough leading that the highlight blocks don't crowd the line above */
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
}
/* highlighted words — cream blocks like Yoma's white blocks */
.hero-title em{
  font-style: normal;
  background: var(--cream);
  color: var(--ink);
  padding: 2px 14px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.hero-cta{margin-top: 44px; display:flex; gap:28px; align-items:center; flex-wrap: wrap;}
/* bright emerald pill on the dark panel */
.hero .btn{background: var(--green); color: var(--ink); font-weight: 700;}
.hero .btn:hover{background: var(--accent); color: var(--ink);}

.hero-media{
  --curve: clamp(140px, 20vw, 380px);  /* curve radius of the video */
  /* band width matches the nav bar's height, so the links sit centered
     in the top band (nav: 18px padding ×2 + ~40px link row) */
  --band: 76px;
  --stair: 44px;   /* one step of the double stagger: ink → green → video */
  position: relative;
  /* the emerald frame around the video — filling the whole column keeps
     the strip behind the nav links green at every window width. The double
     step at the bottom: the green column runs one --stair deeper than the
     ink panel (100% = the panel-defined row), and the video another
     --stair deeper than the green. */
  height: calc(100% + var(--stair));
  background: linear-gradient(160deg, #10331F 0%, #1E5C3B 55%, #2A9058 100%);
}
.hero-photo{
  position: absolute;
  /* inset from top and left — the visible green band; the bottom overhangs
     the green by one more --stair, completing the double step */
  inset: var(--band) 0 auto var(--band);
  width: auto;
  height: calc(100% - var(--band) + var(--stair));
  min-height: 0;
  border: 0;
  border-radius: 0;
  /* the signature curve: a large rounded top-left edge on the video */
  border-top-left-radius: var(--curve);
}
/* scrim so the light nav links stay readable over any future photo */
.hero-photo::before{
  content:'';
  position: absolute; inset: 0;
  border: 0;
  border-radius: 0;
  border-top-left-radius: inherit;
  background: linear-gradient(180deg, rgba(10,36,24,.45), transparent 28%);
  pointer-events: none;
}

/* trusted-by logo marquee */
.trusted{
  background: var(--sand);
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  padding: 36px var(--gutter) 8px;
}
.trusted-label{
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-align:center;
}
.trusted-list{
  /* marquee viewport: clips the translating track (two identical logo groups) */
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trusted-track{
  display: flex;
  width: max-content;
  animation: trusted-pan 60s linear infinite;
}
.trusted-list:hover .trusted-track{animation-play-state: paused;}
.trusted-group{
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;   /* matches gap so the join between the two copies stays rhythmic */
  flex-shrink: 0;
}
/* track translates exactly one group-width per cycle, so the wrap is invisible */
@keyframes trusted-pan{
  from{transform: translateX(0);}
  to  {transform: translateX(-50%);}
}
.trusted-logo{
  flex: 0 0 auto;
  display:flex; align-items:center; justify-content:center;
  height: 56px;
}
.trusted-logo img{
  max-height: 100%;
  max-width: 180px;
  width: auto; height: auto;
  object-fit: contain;
  /* desaturate at rest so mixed-brand logos read as one row */
  filter: grayscale(100%) contrast(0.9);
  opacity: .55;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
/* per-logo optical size compensation (source files differ in padding/aspect) */
.trusted-logo.logo-tall{height: 110px;}
.trusted-logo.logo-tall img{max-width: 140px;}
.trusted-logo.logo-xtall{height: 170px;}
.trusted-logo.logo-xtall img{max-width: 195px;}
.trusted-logo.logo-wide{height: 44px;}
.trusted-logo:hover img{
  filter: grayscale(0%) contrast(1);
  opacity: 1;
  transform: translateY(-2px);
}

/* featured work (home) — copied from Yoma's homepage loop: sand section,
   plain bold heading, 2-column grid of borderless image cards
   (image → title → excerpt), centered button below */
.featured{border-top: 0;}   /* flows straight out of the hero's sand stagger */
.featured .section-title{margin-bottom: 48px;}
.featured-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 40px;
}
.feature-card{
  display:block;
  text-decoration:none;
  color: var(--ink);
}
.feature-card .ph, .feature-card .photo{margin-bottom: 22px;}
/* small arrow badge in the photo corner of project cards */
.feature-card .photo::after,
.card .photo::after{
  content: '\203A';  /* › chevron, escaped so charset can never mangle it */
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: var(--ink);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  padding-bottom: 3px; /* optical centering of the chevron */
  border-radius: 6px;  /* square badge, softened corners */
  transition: background .25s ease, transform .25s ease;
}
.feature-card:hover .photo::after,
.card:hover .photo::after{
  background: var(--accent);
  transform: translateX(3px);
}
.feature-card .photo img{transition: transform .5s ease;}
.feature-card:hover .photo img{transform: scale(1.03);}
.feature-card h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.25;
  margin-bottom: 10px;
  transition: color .25s ease;
}
.feature-card:hover h3{color: var(--green-dark);}
.feature-card p{font-size: 15.5px; line-height: 1.65; color: var(--ink-soft);}
.featured-more{display:flex; justify-content:center; margin-top: 64px;}

/* card grid — used for the projects index and home expertise cards */
.card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.card{
  display:flex; flex-direction:column;
  background: #FFFFFF;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .3s ease, transform .3s ease;
}
.card:hover{
  box-shadow: 0 18px 40px -18px #0A241833;
  transform: translateY(-4px);
}
.card .ph, .card .photo{border: 0; border-radius: 0; border-bottom: 1px solid var(--rule-dark);}
.card .ph::before{border-radius: 0;}
.card .photo img{transition: transform .5s ease;}
.card:hover .photo img{transform: scale(1.03);}
.card-body{padding: 24px 24px 28px; display:flex; flex-direction:column; gap: 12px; flex: 1;}
.card-kicker{
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.card-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  transition: color .25s ease;
}
.card:hover .card-title{color: var(--green-dark);}
.card-excerpt{font-size: 15px; line-height: 1.6; color: var(--ink-soft);}

/* tag chip — static on cards, interactive (button) in the projects filter */
.chip{
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--rule-dark);
  border-radius: 999px;
  padding: 5px 14px;
  background: transparent;
}

/* philosophy teaser — large statement on cream */
.philosophy .kicker{display:block; margin-bottom: 24px;}
.philosophy-text{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.35;
  color: var(--ink);
  max-width: 1000px;
}
.philosophy-text em{font-style: normal; font-weight: 700; color: var(--green-dark);}
.philosophy-sub{
  max-width: 640px;
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.philosophy-sub em{font-style: normal; font-weight: 600; color: var(--green-dark);}
.philosophy .btn{margin-top: 36px;}
/* statement with a small photo beside it (about page) */
.philosophy-split{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 64px;
  align-items: center;
}
.philosophy-split .philosophy-text{max-width: none;}

/* expertise teaser cards (home) — numbered, no image */
.expertise-card{
  background: #FFFFFF;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  padding: 28px 28px 32px;
  text-decoration:none;
  color: var(--ink);
  display:flex; flex-direction:column;
  transition: box-shadow .3s ease, transform .3s ease;
}
.expertise-card:hover{
  box-shadow: 0 18px 40px -18px #0A241833;
  transform: translateY(-4px);
}
.expertise-card .card-title{margin-bottom: 12px;}
.expertise-card .card-excerpt{margin-bottom: 0;}

/* ─── 9. INNER PAGES ────────────────────────────────────────── */
/* page header under the fixed nav */
.page-header{
  padding-top: 168px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule-dark);
}
/* project detail pages: the hero photo follows directly, so the header's
   divider line would float oddly right above the image */
.page-header:has(+ .detail-hero){border-bottom: 0; padding-bottom: 24px;}
.page-header .kicker{display:block; margin-bottom: 16px;}
.page-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.page-title em{
  font-style: normal;
  background: var(--green-dark);
  color: var(--cream);
  padding: 2px 12px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.page-intro{
  max-width: 640px;
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* project detail pages */
.breadcrumb{
  display:inline-block;
  margin-bottom: 28px;
  color: var(--ink-mute);
  text-decoration:none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.breadcrumb:hover{color: var(--green-dark);}
.detail-sub{
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--ink-mute);
  margin-top: 12px;
}

/* horizontal meta bar: Partner / Timeline / Status / link */
.meta-bar{
  display:flex; flex-wrap:wrap;
  gap: 24px 64px;
  padding: 24px 0;
  margin-top: 40px;
  border-top: 1px solid var(--rule-dark);
}
.meta-item{display:flex; flex-direction:column; gap: 5px;}
.meta-label{
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.meta-val{font-weight: 500; font-size: 16px; color: var(--ink);}
.meta-val a{color: var(--green-dark);}

.detail-hero{margin-top: 0;}

/* article body: label column + prose column */
.detail-body{padding: 72px 0 8px;}
.detail-lede{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  color: var(--ink);
  max-width: 900px;
  margin-bottom: 64px;
}
.detail-lede em{font-style: normal; font-weight: 700; color: var(--green-dark);}
.detail-section{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 24px 64px;
  padding: 28px 0;
  border-top: 1px solid var(--rule-dark);
}
.detail-label{
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 5px;
}
.detail-prose{font-size: 16.5px; line-height: 1.7; color: var(--ink); max-width: 760px;}
.detail-prose em{font-style: normal; font-weight: 600; color: var(--green-dark);}
.detail-bullets{
  list-style: none;
  display: grid; gap: 18px;
  max-width: 760px;
}
.detail-bullets li{
  padding-left: 22px;
  position: relative;
  font-size: 16.5px; line-height: 1.65;
}
.detail-bullets li::before{
  content:'\2192';
  position: absolute; left: 0; top: 0;
  color: var(--green-dark);
}
.detail-bullets strong{font-weight: 600;}

.detail-fund{
  font-size: 13.5px;
  color: var(--ink-mute);
  padding: 24px 0 8px;
}
.detail-logos{
  display: flex; flex-wrap: wrap; gap: 24px 56px;
  align-items: center;
  padding: 8px 0 24px;
}
.detail-logos .project-logo{height: 56px; display:flex; align-items:center;}
.detail-logos .project-logo img{
  max-height: 100%; max-width: 180px; width:auto; height:auto;
  object-fit: contain;
  filter: grayscale(100%) contrast(.9); opacity: .6;
  transition: filter .3s ease, opacity .3s ease;
}
.detail-logos .project-logo.logo-xtall{height: 75px;}
.detail-logos .project-logo.logo-xtall img{max-width: 130px;}
.detail-logos .project-logo:hover img{filter: none; opacity: 1;}

/* prev / next project navigation: green pill buttons like the home page */
.detail-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 72px;
  /* equal breathing room above (below the rule) and below (before the footer) */
  padding: 56px 0;
  border-top: 1px solid var(--rule-dark);
}

/* expertise page — alternating text/image blocks */
.expertise-block{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 72px 0;
  border-top: 1px solid var(--rule-dark);
}
.expertise-block:first-of-type{border-top: 0;}
.expertise-block.flip .expertise-block-media{order: -1;}
.expertise-block h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 18px;
}
.expertise-block p{font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 14px; max-width: 620px;}

/* about page — team grid */
.team-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.team-card{
  background: #FFFFFF;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  overflow: hidden;
  display:flex; flex-direction:column;
}
.team-card .ph, .team-card .photo{border: 0; border-radius: 0; border-bottom: 1px solid var(--rule-dark);}
.team-card .ph::before{border-radius: 0;}
.team-card-body{padding: 24px 24px 28px;}
.team-id{
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  color: var(--green-dark);
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.team-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}
.team-titles{
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.team-role{font-size: 15px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 20px;}
.team-links{display:flex; gap: 20px; align-items:center;}
.team-links a{
  color: var(--ink-soft);
  text-decoration:none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--rule-dark);
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.team-links a:hover{color: var(--green-dark); border-color: var(--green-dark);}

/* about page — static partner logo grid */
.partner-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.partner-cell{
  background: #FFFFFF;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  /* fixed height: logos scale inside, the cards themselves never change */
  height: 176px;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
.partner-cell img{
  max-height: 64px; max-width: 175px;
  width:auto; height:auto;
  object-fit: contain;
  filter: grayscale(100%) contrast(.9);
  opacity: .6;
  transition: filter .3s ease, opacity .3s ease;
}
.partner-cell:hover img{filter:none; opacity:1;}
/* per-logo compensation for padding/aspect baked into the source files,
   so all marks read at the same optical size. Cell order (both languages):
   1 VenFeld · 2 Yomabouw · 3 Van Langen · 4 Kansen voor West · 5 EU · 6 Provincie Utrecht */
.partner-cell:nth-child(1) img{max-height: 126px; max-width: 240px;}
.partner-cell:nth-child(4) img{max-height: 80px; max-width: 190px;}
.partner-cell:nth-child(5) img{max-height: 80px; max-width: 190px;}
.partner-cell:nth-child(6) img{max-height: 100px; max-width: 215px;}

/* contact page */
.contact-page{padding-top: 170px;}
.contact-media{margin-top: 72px;}
.contact-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact-headline{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 76px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.contact-headline em{
  font-style: normal;
  background: var(--green-dark);
  color: var(--cream);
  padding: 2px 14px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.contact-info{display:flex; flex-direction:column; gap: 24px;}
.contact-block{border-top: 1px solid var(--rule-dark); padding-top: 16px;}
.contact-block-label{
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.contact-block a, .contact-block p{
  color: var(--ink);
  text-decoration:none;
  font-weight: 500;
  font-size: 17px;
}
.contact-block a:hover{color: var(--green-dark);}


/* ─── 10. MEDIA QUERIES ─────────────────────────────────────── */
@media (max-width: 1024px){
  .card-grid{grid-template-columns: repeat(2, 1fr);}
  .team-grid{grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 880px){
  :root{--gutter: 24px;}

  /* nav collapses to logo + hamburger with a slide-down panel */
  .nav{padding: 14px var(--gutter); flex-wrap: wrap;}
  .nav .logo-meta{display:none;}
  .nav-toggle{display:flex;}
  .nav ul{
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    order: 3;
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid var(--rule-dark);
  }
  .nav ul.open{display: flex;}
  .nav ul li{padding: 6px 0;}
  .nav ul a{font-size: 14px;}
  .nav .lang{border-left: 0; padding-left: 0; padding-top: 10px;}

  .section{padding: 72px 0;}
  .section-header{flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 36px;}

  /* hero stacks: dark panel on top, curved photo below (sand peeks out
     underneath the photo before the featured section begins) */
  .hero{grid-template-columns: 1fr;}
  .hero-panel{min-height: 0; padding: 96px 24px 56px;}
  .hero-logo{display: none;} /* the bar shows the logo on mobile instead */
  .hero-panel-body{padding: 0;}
  .hero-title{font-size: clamp(32px, 8.5vw, 44px);}
  .hero-media{
    --curve: clamp(80px, 22vw, 140px);
    --band: 32px;
    --stair: 28px;
    height: calc(62vw + var(--band) + var(--stair));
    max-height: 560px;
  }

  .trusted-group{gap: 40px; padding-right: 40px;}
  .trusted-track{animation-duration: 20s;} /* narrower viewport → faster cycle */

  .card-grid{grid-template-columns: 1fr;}
  .featured-grid{grid-template-columns: 1fr; gap: 48px;}
  .team-grid{grid-template-columns: 1fr;}
  .partner-grid{grid-template-columns: repeat(2, 1fr);}

  .page-header{padding-top: 130px; padding-bottom: 40px;}

  .detail-section{grid-template-columns: 1fr; gap: 10px;}
  .detail-label{padding-top: 0;}

  .expertise-block{grid-template-columns: 1fr; gap: 32px; padding: 48px 0;}
  .expertise-block.flip .expertise-block-media{order: 0;}

  .philosophy-split{grid-template-columns: 1fr; gap: 32px;}

  .contact-grid{grid-template-columns: 1fr; gap: 48px;}

  .footer-grid{grid-template-columns: 1fr; gap: 40px;}
  .footer-bottom{flex-direction: column; gap: 8px;}
}

@media (max-width: 640px){
  .trusted-group{gap: 32px; padding-right: 32px;}
  .partner-grid{grid-template-columns: repeat(2, 1fr); gap: 16px;}
}

/* On the stacked mobile hero the bar logo stays visible (the panel's
   boxed logo is hidden there, and the shrink animation is desktop-only). */
@media (max-width: 880px){
  .nav.over-hero:not(.solid):not(.menu-open) .logo{opacity: 1; pointer-events: auto;}
}


/* ─── 11. REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important;}
  /* hold the marquee still and let users scroll it manually */
  .trusted-list{overflow-x: auto;}
  /* reveal waypoints must not hide content when transitions are disabled */
  .reveal{opacity: 1; transform: none;}
}