/* ============================================================
   PADAHOME – stylesheet
   Palette
     --ink      #141414  text, footer
     --paper    #FFFFFF  page
     --plaster  #EDEBE6  quiet panels
     --line     #D9D6CF  hairlines
     --petrol   #1E4A52  brand accent (from the Pacarada modular panel)
     --overlay  rgba(20,20,20,.72) tile label block
   Type
     Display: Bricolage Grotesque 800  (titles, uppercase)
     Body:    IBM Plex Sans 400/500
     Utility: IBM Plex Mono            (addresses, postcodes, labels)
   ============================================================ */

:root{
  --ink:#141414;
  --paper:#FFFFFF;
  --plaster:#EDEBE6;
  --line:#D9D6CF;
  --petrol:#1E4A52;
  --overlay:rgba(20,20,20,.72);
  --muted:#6B6963;

  /* one self-hosted family, three roles by weight and tracking */
  --display:"DM Sans",Helvetica,Arial,sans-serif;   /* 800, uppercase   */
  --body:"DM Sans",Helvetica,Arial,sans-serif;      /* 400 running text */
  --mono:"DM Sans",Helvetica,Arial,sans-serif;      /* 500, tracked out */

  --max:1440px;
  --gutter:clamp(16px,3vw,48px);
  --gap:24px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}
strong{font-weight:600}

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

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:84px;
}
.logo img{height:42px;width:auto}
.nav{display:flex;align-items:center;gap:32px}
.nav a{
  font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--petrol)}
.lang{display:flex;gap:4px;margin-left:16px}
.lang a{padding:6px 10px;border:1px solid var(--line)}
.lang a[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;
}
.nav-toggle-bars{display:block;width:20px;height:14px;position:relative}
.nav-toggle-bars span{
  position:absolute;left:0;width:100%;height:2px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle-bars span:nth-child(1){top:0}
.nav-toggle-bars span:nth-child(2){top:6px}
.nav-toggle-bars span:nth-child(3){top:12px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){top:6px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){top:6px;transform:rotate(-45deg)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.nav-toggle-bars span{transition:none}}

/* ---------- Page intro ---------- */
.intro{
  padding:clamp(40px,7vw,96px) 0 clamp(28px,4vw,48px);
  border-bottom:1px solid var(--line);
}
.intro h1{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(40px,7vw,104px);line-height:.92;letter-spacing:-.02em;
  max-width:14ch;
}
.intro p{
  margin-top:28px;max-width:60ch;font-size:19px;
}
.intro-foot{
  margin-top:24px;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px 24px;
}
.intro .meta{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(15px,1.15vw,18px);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.intro .pf{margin-top:0}

/* ---------- Project grid ---------- */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(32px,3.5vw,56px) var(--gap);
  padding:clamp(28px,4vw,56px) 0 clamp(48px,6vw,96px);
}
.card-project{display:block;color:inherit;align-self:start}
.cp-img{
  aspect-ratio:4/3;overflow:hidden;background:var(--plaster);margin-bottom:18px;
}
.cp-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card-project.is-link:hover .cp-img img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.cp-img img{transition:none}.card-project.is-link:hover .cp-img img{transform:none}}
.cp-eyebrow{
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;
}
.cp-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(20px,1.7vw,26px);line-height:1.08;letter-spacing:-.01em;
}
.cp-loc{
  font-family:var(--mono);font-weight:500;font-size:13px;line-height:1.5;color:var(--muted);
  margin-top:8px;padding-top:12px;border-top:1px solid var(--line);
}
.cp-more{
  display:inline-block;margin-top:14px;
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:2px solid var(--petrol);padding-bottom:2px;
}
/* status colour on the eyebrow, no ribbon over the photo */
.card-project .cp-eyebrow{color:var(--muted)}
.card-project:has(.cp-eyebrow:not(:empty)) .cp-eyebrow{color:var(--muted)}

/* ---------- Project page ---------- */
.proj{padding:clamp(28px,4vw,48px) 0 clamp(48px,6vw,96px)}
.back{
  display:inline-block;margin-bottom:28px;
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:2px solid var(--petrol);padding-bottom:2px;
}
.proj-eyebrow{
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}
.proj h1{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,4.6vw,64px);line-height:.95;letter-spacing:-.02em;
}
.proj-loc{
  margin-top:12px;font-family:var(--mono);font-weight:500;font-size:14px;color:var(--muted);
}
.proj-hero{margin:clamp(24px,3vw,40px) 0;background:var(--plaster)}
/* show the whole photo at its own ratio — no letterboxing. The status
   flag is a separate bar below the image, not an overlay on it. */
.proj-hero img{display:block;width:100%;height:auto}

.proj-body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,72px);align-items:start;
}
.proj-h{
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--ink);
}
.proj-data{margin-top:0}
.proj-data > div{
  display:flex;justify-content:space-between;gap:24px;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.proj-data dt{font-size:15px;color:var(--muted);flex:0 0 auto}
.proj-data dd{font-size:15px;text-align:right}

.proj-video{margin-top:36px}
.video-open{
  position:relative;display:block;width:100%;margin-top:16px;
  padding:0;border:0;cursor:pointer;background:var(--plaster);
  aspect-ratio:16/9;overflow:hidden;
}
.video-open img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.video-open:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.video-open img{transition:none}.video-open:hover img{transform:none}}
.video-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);
}
.video-play::after{
  content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--ink);
}
.video-label{
  position:absolute;left:0;right:0;bottom:0;padding:10px 14px;
  background:rgba(20,20,20,.72);color:#fff;text-align:left;
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.proj-text p{font-size:17px}
.proj-text p+p{margin-top:18px}

/* Pages with no video and no external site: the sidebar would hold the
   address alone, so run the text full width and put the facts on one line. */
.proj-body--wide{display:block}
.proj-body--wide .proj-side{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;
  margin-bottom:clamp(28px,3.5vw,44px);
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.proj-body--wide .proj-h{
  border:0;padding:0;margin:0;flex:0 0 auto;
}
.proj-body--wide .proj-data{display:flex;flex-wrap:wrap;gap:6px 28px;margin:0}
.proj-body--wide .proj-data > div{
  display:flex;gap:10px;padding:0;border:0;
}
.proj-body--wide .proj-data dd{text-align:left}
.proj-body--wide .proj-text{max-width:none}
@media (max-width:760px){
  .proj-body--wide .proj-side{gap:6px 18px}
}

.thumbs{
  display:grid;gap:var(--gap);margin-top:clamp(36px,4vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.thumbs button{border:0;padding:0;cursor:pointer;background:var(--plaster);aspect-ratio:4/3;overflow:hidden}
.thumbs img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.thumbs button:hover img{transform:scale(1.04)}

/* ---------- Project collage: hero large right, gallery stacked left ---------- */
.proj-collage{
  display:grid;grid-template-columns:1fr 2fr;gap:var(--gap);
  margin:clamp(24px,3vw,40px) 0 clamp(32px,4vw,56px);
  align-items:stretch;
}
.proj-collage.is-solo{grid-template-columns:1fr}
.pc-main{grid-column:2;margin:0;display:flex;flex-direction:column;min-width:0}
.proj-collage.is-solo .pc-main{grid-column:1}
.pc-main img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.pc-main .flag{flex:0 0 auto}
.pc-side{
  grid-column:1;grid-row:1;display:grid;gap:var(--gap);
  grid-template-rows:repeat(var(--n,3),1fr);min-height:0;
}
.pc-side button{
  border:0;padding:0;cursor:pointer;background:var(--plaster);
  overflow:hidden;min-height:0;
}
.pc-side img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.pc-side button:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.pc-side img{transition:none}.pc-side button:hover img{transform:none}}
@media (max-width:760px){
  .proj-collage{grid-template-columns:1fr}
  .pc-main{grid-column:1;grid-row:1}
  .pc-side{grid-column:1;grid-row:2;grid-template-rows:none;grid-template-columns:repeat(2,1fr)}
  .pc-side button{aspect-ratio:4/3}
  .pc-main img{height:auto}
}

.proj-next{margin-top:clamp(36px,4vw,56px);padding-top:20px;border-top:1px solid var(--line);text-align:right}
.proj-next span{display:block;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.proj-next strong{font-family:var(--display);font-weight:800;font-size:clamp(20px,2vw,26px)}
.proj-next a:hover strong{color:var(--petrol)}

.proj-cta{
  margin-top:clamp(40px,5vw,72px);padding:clamp(28px,4vw,48px);
  background:var(--plaster);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
.proj-cta h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,32px)}
.proj-cta p{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}

/* lightbox video */

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#fff;padding:clamp(48px,6vw,80px) 0 40px}
.foot-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.2)}
.foot-cols h3{
  font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);
  margin-bottom:16px;
}
.foot-cols ul{list-style:none}
.foot-cols li{margin-bottom:10px}
.foot-cols a:hover{text-decoration:underline}
.foot-brand img{height:96px;width:auto}
@media (max-width:760px){.foot-brand img{height:72px}}
.foot-brand p{margin-top:16px;max-width:36ch;color:rgba(255,255,255,.75);font-size:15px}
.foot-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:24px;font-size:14px;color:rgba(255,255,255,.6)}
.foot-bottom a{color:#fff;margin-left:20px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .partners ul{grid-template-columns:repeat(4,1fr)}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .site-header .wrap{height:72px}
  .logo img{height:34px}
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:72px;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gutter) 16px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 0;width:100%;border-bottom:1px solid var(--line)}
  .lang{margin:12px 0 0}
  .lang a{border-bottom:1px solid var(--line)}
  .proj-body{grid-template-columns:1fr}
  .thumbs{grid-template-columns:repeat(2,1fr)}
  /* a lone photo on the last row spans the width instead of leaving a gap */
  .thumbs > button:last-child:nth-child(odd){grid-column:1 / -1;aspect-ratio:16/9}
  .proj-next{text-align:left}
  .proj-cta{flex-direction:column;align-items:stretch}
  .proj-cta p{flex-direction:column;align-items:stretch;width:100%}
  .proj-cta .btn{width:100%;text-align:center}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .partners ul{grid-template-columns:repeat(3,1fr)}
  .partners img{height:72px}
  .foot-cols{grid-template-columns:1fr}
  .tile .label{padding:20px 16px}
}

/* ---------- Legal pages ---------- */
.legal{max-width:760px;padding:clamp(40px,6vw,80px) 0 clamp(48px,6vw,96px)}
.legal h1{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,4vw,56px);line-height:.95;letter-spacing:-.02em;
  padding-bottom:20px;border-bottom:3px solid var(--ink);margin-bottom:32px;
}
.legal h2{
  font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:36px 0 12px;
}
.legal p{margin-bottom:12px}
.legal address{font-style:normal;line-height:1.7}
.legal a{border-bottom:1px solid var(--petrol)}

/* ---------- About / Contact ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);padding:clamp(40px,6vw,80px) 0 clamp(48px,6vw,96px)}
.about h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(40px,6vw,88px);line-height:.92;letter-spacing:-.02em}
.about .lead{font-size:21px;margin-top:24px;max-width:36ch}
.about .text p+p{margin-top:18px}
.facts{list-style:none;margin-top:40px;border-top:1px solid var(--line)}
.facts li{display:flex;gap:24px;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-weight:500;font-size:14px}
.facts li span:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:12px;min-width:140px;padding-top:2px}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);padding:clamp(40px,6vw,80px) 0 clamp(48px,6vw,96px)}
.contact h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(40px,6vw,88px);line-height:.92;letter-spacing:-.02em}
.contact .lead{font-size:19px;margin-top:24px;max-width:40ch}
.card{background:var(--plaster);padding:clamp(24px,3vw,40px)}
.card h2{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.card address{font-style:normal;line-height:1.7;font-size:18px}
.card p{margin-top:18px}
.card a{border-bottom:2px solid var(--petrol);font-family:var(--mono);font-weight:500;font-size:16px}
.card .big{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.5vw,32px);border:0;display:inline-block;margin-top:6px}

@media (max-width:820px){.about,.contact{grid-template-columns:1fr}}
.card .k{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cp-eyebrow.cp-modular{color:#3E8E4C}
.cp-eyebrow.cp-let{color:#C9541E}

/* ---------- Contact form ---------- */
.contact .lead+.form-wrap{margin-top:32px}
.form-wrap{max-width:560px}
.field{margin-bottom:20px}
.field--narrow{max-width:260px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
label{
  display:block;margin-bottom:6px;
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
label span{color:var(--petrol)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:13px 14px;
  font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:0;
}
textarea{resize:vertical;min-height:150px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--petrol);box-shadow:inset 0 -2px 0 var(--petrol)}
.check label{
  display:flex;gap:12px;align-items:flex-start;
  font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);line-height:1.5;
}
.check input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--petrol)}
.check a{border-bottom:1px solid var(--petrol)}
.check .req{color:var(--petrol)}
.btn{
  margin-top:8px;padding:16px 32px;border:0;cursor:pointer;
  background:var(--ink);color:#fff;
  font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .2s;
}
.btn:hover{background:var(--petrol)}
.hint{margin-top:14px;font-family:var(--mono);font-weight:500;font-size:12px;color:var(--muted)}
.err{margin-top:6px;font-family:var(--mono);font-weight:500;font-size:12px;color:#B3341A}
.notice{padding:24px;margin-bottom:24px;border-left:4px solid var(--petrol);background:var(--plaster)}
.notice--err{border-left-color:#B3341A}
.notice h2{font-family:var(--display);font-weight:800;font-size:22px;margin-bottom:8px}
/* honeypot – hidden from people, visible to bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact .card{margin-bottom:var(--gap)}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.legal p{max-width:70ch}
.legal address{margin:8px 0 16px}
.legal .mono{font-family:var(--mono);font-weight:500;font-size:.92em}
.legal .updated{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}


/* ---------- Lightbox (gallery images + project video) ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);
}
.lightbox.is-open{display:flex}
.lb-stage{
  max-width:min(1400px,100%);max-height:100%;
  display:flex;align-items:center;justify-content:center;
}
.lb-stage img,.lb-stage video{
  max-width:100%;max-height:86vh;object-fit:contain;background:#000;
}
.lightbox button{
  position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-family:var(--mono);font-weight:500;line-height:1;
}
.lightbox .lb-close{top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);font-size:34px;padding:8px 12px}
.lightbox .lb-prev,.lightbox .lb-next{top:50%;transform:translateY(-50%);font-size:46px;padding:16px 20px}
.lightbox .lb-prev{left:clamp(4px,1vw,16px)}
.lightbox .lb-next{right:clamp(4px,1vw,16px)}
.lightbox button:hover{opacity:.7}
.lightbox button[hidden]{display:none}

/* caption over the photo on hover — same idea as the old pacarada.de tiles */
.cp-img{position:relative}
.cp-hover{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:10px;padding:28px 24px;text-align:center;
  background:rgba(20,20,20,.72);color:#fff;
  opacity:0;transition:opacity .25s ease;
}
.card-project:hover .cp-hover,
.card-project:focus-visible .cp-hover{opacity:1}
.cp-hover-title{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(15px,1.25vw,19px);line-height:1.15;letter-spacing:-.01em;
}
.cp-hover-place{
  font-family:var(--mono);font-weight:500;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.85);
}
.cp-hover-more{
  margin-top:6px;font-family:var(--mono);font-weight:500;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid #fff;padding-bottom:3px;
}
@media (hover:none){.cp-hover{display:none}}
@media (prefers-reduced-motion:reduce){.cp-hover{transition:none}}

/* ---------- Partners (scrolling strip) ---------- */
.partners{padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line);overflow:hidden}
.partners h2{
  font-family:var(--display);font-weight:800;text-transform:uppercase;text-align:center;
  font-size:clamp(24px,3vw,40px);margin-bottom:40px;
}
.marquee{position:relative;width:100%;overflow:hidden}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(to right,var(--paper),transparent)}
.marquee::after{right:0;background:linear-gradient(to left,var(--paper),transparent)}
.marquee-track{
  display:flex;align-items:center;gap:clamp(40px,5vw,80px);
  width:max-content;
  animation:pd-marquee 55s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{
  height:86px;width:auto;flex:0 0 auto;object-fit:contain;
}
@keyframes pd-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:28px 40px}
  /* the strip lists every logo twice so it can loop; with no motion, show one set */
  .marquee-track img[aria-hidden="true"]{display:none}
}
@media (max-width:560px){.marquee-track img{height:64px}}

/* ---------- Status flag (bar under the photo, not over it) ---------- */
.flag{
  display:block;width:100%;
  background:#3E8E4C;color:#fff;
  font-family:var(--mono);font-weight:500;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  text-align:center;padding:10px 12px;
}
.flag--modular{background:#3E8E4C}
.flag--let{background:#C9541E}
/* on a card: pull the bar flush under the photo, keep the gap to the eyebrow */
.card-project .flag{margin:-18px 0 18px}
@media (max-width:560px){
  .flag{font-size:11px;letter-spacing:.14em;padding:8px 10px}
}

/* ---------- Link to an external project website ---------- */
.proj-site{
  display:block;margin-top:32px;color:inherit;
  background:var(--plaster);
  border-left:3px solid var(--petrol);
  overflow:hidden;transition:background .25s ease;
}
.proj-site:hover{background:#E4E1DA}
.proj-site-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.proj-site-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.proj-site:hover .proj-site-img img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .proj-site-img img{transition:none}
  .proj-site:hover .proj-site-img img{transform:none}
}
.proj-site-body{display:block;padding:22px 24px 24px}
.proj-site-label{
  display:block;font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.proj-site-name{
  display:block;margin-top:8px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(20px,1.8vw,26px);line-height:1.05;letter-spacing:-.01em;
}
.proj-site-text{display:block;margin-top:10px;font-size:15px;color:var(--muted);line-height:1.5}
.proj-site-cta{
  display:inline-block;margin-top:16px;padding-bottom:3px;
  font-family:var(--mono);font-weight:500;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
  border-bottom:2px solid var(--petrol);
}
.proj-site:hover .proj-site-cta{border-bottom-color:var(--ink)}
.lb-error{color:#fff;text-align:center;max-width:60ch;padding:24px}
.lb-error p{font-size:17px;margin-bottom:12px}
.lb-error a{font-family:var(--mono);font-weight:500;font-size:13px;color:#fff;border-bottom:1px solid rgba(255,255,255,.6);word-break:break-all}
/* the video thumbnail is a link now, not a button */
a.video-open{text-decoration:none;color:inherit}

/* ---------- Project filter ---------- */
.pf{display:inline-flex;gap:8px;margin-top:20px}
.pf-btn{
  padding:9px 18px;border:1px solid var(--line);background:var(--paper);color:var(--muted);
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.pf-btn:hover{border-color:var(--ink);color:var(--ink)}
.pf-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pf-empty{
  padding:48px 0;text-align:center;color:var(--muted);
  font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.04em;
}
@media (max-width:560px){.pf{width:100%}.pf-btn{flex:1;text-align:center}}

/* ---------- Headquarters photo (contact page) ---------- */
.hq-photo{
  display:block;margin-top:var(--gap);color:inherit;
  aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--plaster);
}
.hq-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hq-photo:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.hq-photo img{transition:none}.hq-photo:hover img{transform:none}}
.hq-photo-cap{
  position:absolute;left:0;right:0;bottom:0;padding:16px 20px;
  background:rgba(20,20,20,.72);color:#fff;
  font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
}

/* ---------- ESG accordion (about page) ---------- */
.esg{padding:0 0 clamp(56px,7vw,104px);max-width:900px}
.esg-kicker{
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.esg h2{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(28px,4vw,48px);line-height:1;letter-spacing:-.02em;
  margin-bottom:clamp(24px,3vw,40px);
}
.esg-list{border-top:1px solid var(--line)}
.esg-item{border-bottom:1px solid var(--line)}
.esg-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:800;
  font-size:clamp(20px,2.4vw,28px);line-height:1.15;letter-spacing:-.01em;
}
.esg-item summary::-webkit-details-marker{display:none}
.esg-item summary::after{
  content:"";flex:0 0 22px;height:22px;position:relative;
  background:
    linear-gradient(var(--ink),var(--ink)) center/22px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/2px 22px no-repeat;
  transition:transform .25s ease;
}
.esg-item[open] summary::after{
  background:linear-gradient(var(--ink),var(--ink)) center/22px 2px no-repeat;
  transform:rotate(180deg);
}
.esg-item summary:hover{color:var(--petrol)}
.esg-item summary:hover::after{
  background-image:linear-gradient(var(--petrol),var(--petrol)),linear-gradient(var(--petrol),var(--petrol));
}
.esg-item[open] summary:hover::after{background-image:linear-gradient(var(--petrol),var(--petrol))}
.esg-body{padding:0 0 26px;max-width:62ch}
.esg-body p{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.esg-item summary::after{transition:none}}