/* ============================================================
   STICHTING OPEN POLITIEK — design system  (v2)
   Palette: petrol + single orange accent + warm neutrals.
   NO yellow. Light & airy; one dark "product" moment that
   bridges to the (dark) openverkiezingen.nl sister site.
   Fonts unchanged: Plus Jakarta Sans / IBM Plex Mono.
   ============================================================ */
:root{
  --petrol:#006D77;
  --petrol-deep:#014A52;
  --ink:#002529;
  --petrol-light:#D3EAEB;
  --petrol-wash:#eef6f6;
  --orange:#ff6600;
  --paper:#FFF7F1;
  --white:#ffffff;
  --muted:#5a6e70;
  --line:#e6efef;
  --line-strong:#d4e3e3;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.7,.18,1);
  --mono:'Plus Jakarta Sans',system-ui,sans-serif;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --display:'Plus Jakarta Sans',system-ui,sans-serif;
  --facet:url('assets/facet-bg.svg');
  --radius:0px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,.logo,.statement .big,.doen h3,.member h3,.plogo .pname,.cta-card .mailto{font-family:var(--display)}
img{display:block;max-width:100%}
::selection{background:var(--orange);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px}
@media(max-width:640px){.wrap{padding:0 22px}}

/* ---------- type utilities ---------- */
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
.kicker{
  font-family:var(--mono);font-weight:600;letter-spacing:.1em;
  font-size:.74rem;color:var(--petrol);display:inline-flex;align-items:center;
}
.kicker.on-dark{color:#fff}
.dash-accent{color:var(--orange)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-weight:700;font-size:.92rem;padding:14px 26px;border-radius:var(--radius);
  cursor:pointer;border:none;transition:all .25s var(--ease);white-space:nowrap;
}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- NAV ---------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(255,247,241,.85);backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);transition:transform .45s var(--ease);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.02rem;letter-spacing:-.01em}
.logo .mark{width:38px;height:38px;border-radius:9px;flex:none;display:block;box-shadow:0 2px 10px -3px rgba(0,37,41,.4)}
.logo .brand-logo{height:46px;width:auto;display:block}
.foot-logo .brand-logo{height:60px}
.logo small{display:block;font-family:var(--mono);font-weight:400;font-size:.58rem;letter-spacing:.07em;color:var(--muted);text-transform:uppercase;margin-top:1px}
.nav nav{display:flex;align-items:center;gap:2px}
.nav nav a{position:relative;font-size:.73rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:10px 15px;transition:color .2s;white-space:nowrap}
.nav nav a::after{content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav nav a:hover{color:var(--ink)}
.nav nav a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid var(--line-strong);background:var(--white);cursor:pointer;flex:none;padding:0}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:0 auto;transition:transform .3s var(--ease),opacity .2s}
header.nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav.menu-open .nav-toggle span:nth-child(2){opacity:0}
header.nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:920px){
  .nav-toggle{display:flex}
  .nav .wrap{height:88px}
  .nav nav{position:fixed;top:88px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,247,241,.97);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line);
    padding:6px 0 12px;box-shadow:0 22px 40px -28px rgba(0,37,41,.5);
    transform:translateY(-130%);transition:transform .38s var(--ease);visibility:hidden}
  header.nav.menu-open nav{transform:translateY(0);visibility:visible}
  .nav nav a{padding:15px 26px;font-size:.82rem;border-bottom:1px solid var(--line)}
  .nav nav a:last-child{border-bottom:none}
  .nav nav a::after{display:none}
}

/* ---------- HERO (light, airy — type-led, single typeface; stands as its own band) ---------- */
.hero{position:relative;min-height:calc(100svh - 142px);padding:120px 0 92px;background:var(--petrol-wash);overflow:hidden;border-bottom:1px solid var(--line-strong);display:flex;flex-direction:column;justify-content:center}
.facets.soft{position:absolute;inset:0;pointer-events:none;opacity:.18}
.hero .facets.soft{background:var(--facet) right center/520px;
  -webkit-mask-image:linear-gradient(105deg,transparent 0%,transparent 40%,rgba(0,0,0,.7) 72%,#000 100%);
  mask-image:linear-gradient(105deg,transparent 0%,transparent 40%,rgba(0,0,0,.7) 72%,#000 100%)}
.hero .wrap{position:relative;z-index:1}
@media(max-width:880px){.hero .facets.soft{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 58%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 58%,#000 100%)}}
.hero-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line-strong);padding-bottom:18px;margin-bottom:5vh}
.hero-top .dash-accent{color:var(--orange)}

.hero-main .kicker{margin-bottom:30px}
.hero h1{font-size:clamp(2.7rem,9vw,7.2rem);line-height:.93;font-weight:800;letter-spacing:-.045em;text-transform:uppercase;color:var(--ink);max-width:13ch;text-wrap:balance}
.hero h1 .dot{color:var(--orange)}
.hero h1 .hl{color:var(--petrol)}

.hero-foot{display:block;
  margin-top:6vh;padding-top:42px;border-top:1px solid var(--line-strong)}
.hero .lede{font-size:1.2rem;color:var(--muted);max-width:40ch;margin:0 0 32px;line-height:1.55}
.hero .lede b{color:var(--ink);font-weight:700}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

.hero-foot-right{justify-self:end;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:22px}
.hero-tag{display:flex;flex-direction:column;gap:1px;font-size:1.06rem;font-weight:500;line-height:1.4;color:var(--ink)}
.hero-tag .b{font-weight:800;color:var(--orange)}

@media(max-width:880px){
  .hero{padding:152px 0 70px}
  .hero h1{max-width:none}
  .hero-foot{grid-template-columns:1fr;gap:38px;align-items:start}
  .hero-foot-right{justify-self:start;text-align:left;align-items:flex-start}
}

/* ---------- generic section shell ---------- */
section.block{padding:96px 0;position:relative}
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start;margin-bottom:52px}
.sec-head .num{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--orange);padding-top:9px;white-space:nowrap}
.sec-head h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.04;max-width:18ch}
.sec-head .lead{color:var(--muted);font-size:1.08rem;max-width:48ch;margin-top:18px;line-height:1.6}
@media(max-width:640px){.sec-head{grid-template-columns:1fr;gap:10px}}
@media(max-width:680px){
  section.block{padding:60px 0}
  .statement{padding:50px 0 64px}
  .doen{padding:30px 26px}
  .doen h3{min-height:0;margin:16px 0 10px}
}

/* ---------- MISSION statement ---------- */
.statement{padding:100px 0 104px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.statement .facets.soft{background:var(--facet) left bottom/460px;opacity:.14;
  -webkit-mask-image:radial-gradient(130% 130% at 0% 100%,#000 0%,transparent 52%);
  mask-image:radial-gradient(130% 130% at 0% 100%,#000 0%,transparent 52%)}
.statement .wrap{position:relative;z-index:1}
.statement .kicker{margin-bottom:38px;color:var(--orange)}
.statement .big{font-size:clamp(1.6rem,3.3vw,2.6rem);font-weight:300;letter-spacing:-.02em;line-height:1.34;max-width:24ch}
.statement .big b{font-weight:800}
.statement .big .u{color:var(--petrol);font-weight:700}

/* ---------- FLAGSHIP (the single dark/product moment) ---------- */
.flagship{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.flagship .facets{position:absolute;inset:0;background:var(--facet) center/640px;opacity:.1}
.flagship .wrap{position:relative;z-index:1}
.flag-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:74px;align-items:center}
.flag-copy h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin:22px 0 18px}
.flag-copy h2 .o{color:var(--orange)}
.flag-copy p{color:rgba(255,255,255,.8);font-size:1.06rem;margin-bottom:30px;max-width:44ch}
.flag-actions{display:flex;gap:14px;flex-wrap:wrap}
.flag-meta{display:flex;gap:22px;flex-wrap:nowrap;margin-top:8px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.flag-meta>div{flex:1 1 auto}
.flag-meta-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:34px}
.flag-meta div{font-family:var(--mono)}
.flag-meta .n{font-size:1.5rem;font-weight:600;color:#fff;letter-spacing:-.02em}
.flag-meta .l{font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px;line-height:1.35;white-space:nowrap}

/* real device photos — MacBook with iPhone composited in front */
.devices{position:relative;width:100%;margin-left:auto}
.dev-macbook{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 52px rgba(0,0,0,.45))}
.dev-phone{position:absolute;width:44%;height:auto;right:-7%;bottom:-12%;filter:drop-shadow(0 24px 40px rgba(0,0,0,.5));z-index:2}
@media(prefers-reduced-motion:no-preference){
  .dev-macbook{animation:deviceFloat 9s ease-in-out infinite alternate;transform-origin:45% 55%}
  .dev-phone{animation:deviceFloat 7.5s ease-in-out .6s infinite alternate;transform-origin:50% 60%}
}
@keyframes deviceFloat{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-1.6%) scale(1.014)}}
@media(max-width:880px){.flag-grid{grid-template-columns:1fr;gap:48px}.devices{margin:0 auto;max-width:600px}.dev-phone{width:40%;right:-4%;bottom:-10%}}
@media(max-width:560px){.flag-meta{gap:14px}.flag-meta .l{white-space:normal}}

/* ---------- WAT WE DOEN (compact, light) ---------- */
#werk{overflow:hidden}
#werk .facets.soft{background:var(--facet) right bottom/460px;opacity:.1;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 100%,#000 0%,transparent 55%);
  mask-image:radial-gradient(120% 120% at 100% 100%,#000 0%,transparent 55%)}
#werk .wrap{position:relative;z-index:1}
.doen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.doen{background:var(--white);border:1px solid var(--line);padding:38px 34px;transition:.3s var(--ease);position:relative;overflow:hidden}
.doen::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.doen:hover{transform:translateY(-4px);box-shadow:0 28px 56px -42px rgba(0,37,41,.4);border-color:var(--line-strong)}
.doen:hover::after{transform:scaleX(1)}
.doen .dn,.doen h3,.doen p{position:relative;z-index:1}
.doen .dn{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--orange);font-weight:600}
.doen h3{font-size:1.32rem;font-weight:700;letter-spacing:-.02em;margin:22px 0 12px;line-height:1.18;min-height:2.36em}
.doen p{color:var(--muted);font-size:.97rem;line-height:1.6}
@media(max-width:780px){.doen-grid{grid-template-columns:1fr}}

/* ---------- BESTUUR (board) ---------- */
.bestuur{background:var(--petrol-wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.member{background:var(--white);border:1px solid var(--line);transition:.3s var(--ease);padding:16px}
.member:hover{transform:translateY(-4px);box-shadow:0 28px 56px -42px rgba(0,37,41,.45)}
.member .photo{aspect-ratio:4/3;background:var(--petrol-light);position:relative;display:grid;place-items:center;overflow:hidden}
.member img.photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.member .photo .ph{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol);opacity:.7}
.member .photo .initials{font-family:var(--mono);font-weight:600;font-size:2.2rem;color:var(--petrol)}
.member .photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:.35s var(--ease)}
.member:hover .photo::after{transform:scaleX(1)}
.member .mc{padding:20px 8px 10px;display:flex;flex-direction:column;height:100%}
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.member-mail{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);background:var(--petrol-wash);font-family:var(--mono);font-size:.95rem;font-weight:600;line-height:1;color:var(--petrol);transition:.25s var(--ease)}
.member-mail:hover{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.member .role{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--orange);font-weight:600;margin-bottom:8px}
.member h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.member p{color:var(--muted);font-size:.9rem;margin-top:8px}
.board-track{display:none}
@media(max-width:860px){
  .board-grid{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;padding:4px 0 16px}
  .board-grid::-webkit-scrollbar{display:none}
  .member{flex:0 0 44vw;scroll-snap-align:start}
  /* on the mobile swipe-rail, show members immediately instead of revealing on scroll */
  .bestuur .member.reveal{opacity:1;transform:none;transition:.3s var(--ease)}
  /* let a swipe that starts on the photo scroll the slider instead of being swallowed by the image */
  .bestuur .member img.photo{pointer-events:none}
  .board-track{display:block;height:3px;background:var(--line);position:relative;border-radius:2px;overflow:hidden;margin-top:4px}
  .board-thumb{position:absolute;left:0;top:0;height:100%;background:var(--petrol);border-radius:2px;transition:left .08s linear,width .15s ease}
}
@media(max-width:560px){
  .board-grid{gap:14px}
  /* leave room so the next card's photo clearly peeks in — signals there's more to swipe */
  .member{flex:0 0 calc(100% - 64px)}
}
.board-note{margin-top:26px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted)}
.board-note em{color:var(--orange);font-style:normal}
.board-note a{color:var(--petrol);font-weight:600;border-bottom:1.5px solid var(--orange)}

/* ---------- PARTNERS ---------- */
.partners .plead{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:34px}
.plogos{display:flex;flex-wrap:wrap;justify-content:center;gap:48px 64px;align-items:center}
.plogo{text-align:center;opacity:.78;transition:.25s}
.plogo:hover{opacity:1}
.plogo .pname{font-weight:800;font-size:1.18rem;letter-spacing:-.02em;color:var(--ink)}
.plogo .pname small{display:block;font-family:var(--mono);font-weight:400;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}

/* ---------- AGENDA ---------- */
.agenda{background:var(--petrol-wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.agenda .facets.soft{background:var(--facet) right top/480px;opacity:.13;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 0%,#000 0%,transparent 55%);
  mask-image:radial-gradient(120% 120% at 100% 0%,#000 0%,transparent 55%)}
.agenda .wrap{position:relative;z-index:1}
.events{display:flex;flex-direction:column;gap:16px}
.event{display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center;
  background:var(--white);border:1px solid var(--line);padding:24px 30px;transition:.28s var(--ease)}
.event:hover{border-color:var(--line-strong);transform:translateX(5px);box-shadow:0 26px 52px -42px rgba(0,37,41,.45)}
.event-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:88px;padding:14px 0;background:var(--petrol-wash);border:1px solid var(--line)}
.event-date .d{font-family:var(--display);font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.event-date .m{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;margin-top:5px;color:var(--petrol);font-weight:600}
.event-date .y{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--muted);margin-top:3px}
.event-kind{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--orange);font-weight:600}
.event-body h3{font-size:1.32rem;font-weight:700;letter-spacing:-.02em;margin:9px 0 8px;line-height:1.15;color:var(--ink)}
.event-body p{color:var(--muted);font-size:.97rem;line-height:1.55;max-width:62ch}
.event-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:13px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.event-meta span{display:inline-flex;align-items:center;gap:8px}
.event-meta span::before{content:"";width:5px;height:5px;background:var(--petrol);border-radius:50%}
.event-go{font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol);white-space:nowrap;transition:.25s}
.event:hover .event-go{color:var(--orange)}
.agenda-note{margin-top:26px;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--muted)}
.agenda-note a{color:var(--petrol);font-weight:600;border-bottom:1.5px solid var(--orange)}
@media(max-width:680px){
  .event{grid-template-columns:auto 1fr;gap:16px 20px;align-items:start}
  .event-go{grid-column:2;justify-self:start;margin-top:18px;padding:9px 15px;border:1.5px solid var(--line-strong);background:var(--petrol-wash);color:var(--petrol)}
}

/* ---------- IN DE MEDIA (horizontal rail) ---------- */
.media-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:46px}
.media-head .sec-head{margin-bottom:0;flex:1 1 auto}
.rail-nav{display:flex;gap:10px;flex:none}
.rail-btn{width:50px;height:50px;border:1px solid var(--line-strong);background:var(--white);color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;border-radius:var(--radius);transition:.22s var(--ease);display:grid;place-items:center}
.rail-btn:hover:not(:disabled){background:var(--petrol);color:#fff;border-color:var(--petrol)}
.rail-btn:disabled{opacity:.32;cursor:default}

.rail-viewport{position:relative}
.rail-viewport::before,.rail-viewport::after{content:"";position:absolute;top:0;bottom:0;width:48px;z-index:2;pointer-events:none;transition:opacity .25s}
.rail-viewport::before{left:0;background:linear-gradient(90deg,var(--paper),transparent);opacity:0}
.rail-viewport::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.rail-viewport[data-at-start="false"]::before{opacity:1}
.rail-viewport[data-at-end="true"]::after{opacity:0}

.media-rail{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 22px;-ms-overflow-style:none;scrollbar-width:none;cursor:grab}
.media-rail::-webkit-scrollbar{display:none}
.media-rail.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.media-rail.dragging .mcard{pointer-events:none}

.mcard{flex:0 0 340px;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);overflow:hidden;border-radius:var(--radius)}
.mcard:hover{box-shadow:0 28px 56px -42px rgba(0,37,41,.4);border-color:var(--line-strong)}
.mcard .mshot{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:#fff}
.mcard-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.mcard-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mcard-meta .outlet{font-family:var(--display);font-weight:800;font-size:1.04rem;letter-spacing:-.01em;color:var(--ink)}
.mcard-meta .date{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mcard-desc{color:var(--muted);font-size:.92rem;line-height:1.5;margin:0}
.mcard-go{margin-top:auto;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol);transition:.25s}
.mcard:hover .mcard-go{color:var(--orange)}

.rail-track{height:3px;background:var(--line);margin-top:6px;position:relative;border-radius:2px;overflow:hidden}
.rail-thumb{position:absolute;left:0;top:0;height:100%;background:var(--petrol);border-radius:2px;transition:left .08s linear,width .15s ease}

/* keep media-rail gap in step with the board carousel across breakpoints */
@media(max-width:860px){.media-rail{gap:18px}}
@media(max-width:640px){.mcard{flex-basis:78vw}.rail-nav{display:none}}
@media(max-width:560px){.media-rail{gap:14px}}

/* ---------- CONTACT / CTA (petrol, friendly — not dark) ---------- */
.cta{background:var(--petrol);color:#fff;position:relative;overflow:hidden}
.cta .facets{position:absolute;inset:0;background:var(--facet) center/560px;opacity:.12}
.cta .wrap{position:relative;z-index:1}
.cta-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center}
.cta h2{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin:16px 0 18px}
.cta .lead{color:rgba(255,255,255,.88);font-size:1.08rem;margin-bottom:28px;max-width:40ch}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}
.cta-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:26px 28px}
.cta-card .label{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:14px}
.cta-card .mailto{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;display:block;margin-bottom:18px}
.cta-card .cta-card-text{color:rgba(255,255,255,.78);font-size:.98rem;line-height:1.55;margin:-6px 0 20px}
.cta-card .rows{display:grid;gap:10px}
.cta-card .rows a{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:.78rem;color:rgba(255,255,255,.85);padding:9px 0;border-top:1px solid rgba(255,255,255,.16);transition:.2s}
.cta-card .rows a:hover{color:#fff;padding-left:6px}
.cta-card .rows a .arr{color:var(--orange)}
@media(max-width:840px){.cta-grid{grid-template-columns:1fr;gap:40px}}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.6);padding:72px 0 38px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.14)}
footer .logo{color:#fff;margin-bottom:16px}
footer .logo small{color:rgba(255,255,255,.5)}
.foot-about{font-size:.94rem;max-width:38ch;line-height:1.7}
.foot-col h3{font-family:var(--mono);color:#fff;font-size:.64rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.foot-col a{display:block;font-size:.92rem;margin-bottom:10px;transition:.2s}
.foot-col a:hover{color:#fff;padding-left:5px}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-legal a{color:rgba(255,255,255,.6);transition:.2s}
.foot-legal a:hover{color:#fff}
@media(max-width:680px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.foot-grid{grid-template-columns:1fr}}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.hero .reveal{transition-delay:var(--d,0s)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.typing i{animation:none}}

/* ---------- COOKIE CONSENT ---------- */
.cookiebar{position:fixed;left:18px;bottom:18px;z-index:120;width:calc(100% - 36px);max-width:540px;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 26px 64px -26px rgba(0,0,0,.7);transform:translateY(150%);opacity:0;transition:transform .42s var(--ease),opacity .42s var(--ease)}
.cookiebar.show{transform:translateY(0);opacity:1}
.cookiebar-inner{padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.cookiebar-text{font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.84);margin:0}
.cookiebar-text a{color:#fff;border-bottom:1.5px solid var(--orange);font-weight:600}
.cookiebar-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.cookiebar .btn{font-size:.78rem;padding:11px 20px}
.cookiebar .cb-decline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.42)}
.cookiebar .cb-decline:hover{background:rgba(255,255,255,.12)}
@media(max-width:560px){.cookiebar{left:12px;bottom:12px;width:calc(100% - 24px)}.cookiebar .btn{flex:1}}