:root{
  --bg: #fcf7e0;
  --ink: #0a0a0a;
  --muted: rgba(10,10,10,.72);
  --line: rgba(10,10,10,.16);
  --radius: 18px;
  --max: 1280px;
  --pad: 28px;
}

/* Logos */
.logo{height:60px;width:auto;display:block;max-width:320px}
.logo-dark{display:none}
.logo-light{display:block}
.header.is-solid .logo-light{display:none}
.header.is-solid .logo-dark{display:block}

/* Artistic: grain/noise overlay */
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size:260px 260px;
  z-index:9999;
}

/* Artistic: selection */
::selection{background:#000;color:#fcf7e0}


*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--ink);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
.wrap{ width: min(var(--max), calc(100% - 2*var(--pad))); margin: 0 auto; }
.section{ padding: 110px 0; position:relative; }
.section.tight{ padding: 80px 0; }
.section.black{ background:#000; color: var(--bg); }

.header{
  position:fixed; top:0; left:0; right:0;
  z-index:999;
  padding: 18px 0;
  transition: background .25s ease, backdrop-filter .25s ease;
  background: rgba(0,0,0,0);
}
.header.is-solid{
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(10px);
  color: var(--bg);
}
.header .row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-weight: 900; letter-spacing: -0.02em;
  text-transform: uppercase;
}
.brand-badge{
  width: 38px; height: 38px; border-radius: 10px;
  background:#000; display:grid; place-items:center;
  color: var(--bg); font-weight:900;
}
.header.is-solid .brand-badge{ background: var(--bg); color:#000; }
nav{
  display:flex; gap: 18px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
  opacity:.9;
}
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
  border: 1px solid rgba(10,10,10,.2);
  background: transparent;
}
.header.is-solid .cta{
  background: var(--bg);
  color:#000;
  border-color: rgba(252,247,224,.35);
}

/* Hero */
.hero{
  min-height: 92vh;
  padding-top: 120px;
  display:flex;
  background:#000;
  color: var(--bg);

  align-items:center;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 40px;
  align-items:end;
}
h1{
  margin:0;
  font-weight: 950;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  font-size: clamp(44px, 6.2vw, 96px);
  line-height: .92;
}
.lede{
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 56ch;
}
.hero-actions{
  display:flex; flex-wrap:wrap;
  gap: 12px;
  margin-top: 22px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
  border: 1px solid rgba(10,10,10,.18);
  background: transparent;
}
.btn.primary{
  background:#000; color: var(--bg);
  border-color:#000;
}
.hero-side{
  border-left: 1px solid var(--line);
  padding-left: 22px;
}
.kpi{ display:grid; gap: 14px; }
.kpi-item{
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.35);
}
.kpi-item b{ display:block; font-size: 28px; letter-spacing:-0.02em; }
.kpi-item span{
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}

/* Full image */
.full-image{ padding:0; }
.full-image .media{
  height: 78vh;
  width:100%;
  position:relative;
  overflow:hidden;
}
.full-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
}
.full-image .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));
  display:flex;
  align-items:flex-end;
  padding: 34px var(--pad);
  color: var(--bg);
}
.quote{
  max-width: 52ch;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.15;
}

/* Pinned services */
.pin-shell{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 40px;
  align-items:start;
}
h2{
  margin:0 0 12px 0;
  font-weight: 950;
  letter-spacing:-0.03em;
  text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: .98;
}
.pin-title p{
  margin: 0;
  color: var(--muted);
  line-height:1.7;
  max-width: 44ch;
}
.service-list{ display:flex; flex-direction:column; gap: 22px; }
.service{ border-top: 1px solid var(--line); padding-top: 18px; }
.service h3{
  margin:0 0 10px 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 16px;
}
.service ul{
  margin:0; padding-left: 16px;
  color: var(--muted);
  line-height:1.8;
}

/* Impact KPIs */
.kpis-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.kpi-black{
  border: 1px solid rgba(252,247,224,.18);
  border-radius: var(--radius);
  padding: 22px;
  background: rgba(255,255,255,.03);
}
.kpi-black b{
  display:block;
  font-size: clamp(34px, 4vw, 64px);
  letter-spacing:-0.03em;
  line-height: .95;
}
.kpi-black span{
  display:block;
  margin-top: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing:.1em;
  font-weight: 850;
  opacity:.85;
}

/* Projects */
.projects-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap: 24px;
  margin-bottom: 26px;
}
.projects-head p{ margin:0; color: var(--muted); max-width: 52ch; line-height:1.7; }
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.card{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.35);
  position:relative;
}
.card img{
  width:100%;
  height: 260px;
  object-fit: cover;
  display:block;
  filter: saturate(1.05);
}
.card .meta{ padding: 14px 14px 16px; }
.card .meta b{ display:block; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.card .meta span{
  display:block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing:.08em;
  font-weight: 800;
}
.card .hover{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  color: var(--bg);
  display:flex; align-items:flex-end;
  padding: 14px;
  opacity:0;
  transition: opacity .25s ease;
}
.card:hover .hover{ opacity:1; }
.pill{
  display:inline-flex;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(252,247,224,.12);
  border: 1px solid rgba(252,247,224,.18);
  text-transform: uppercase;
  letter-spacing:.1em;
  font-weight: 900;
  font-size: 11px;
}

/* CTA */
.cta-box{
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  padding: 44px;
  background: rgba(255,255,255,.35);
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items:center;
}
.cta-box p{ margin:10px 0 0; color: var(--muted); line-height:1.7; }
.cta-right{ display:flex; justify-content:flex-end; }

/* Footer */
footer{ padding: 70px 0; background:#000; color: var(--bg); }
.foot{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.foot h4{
  margin:0 0 14px;
  text-transform: uppercase;
  letter-spacing:.1em;
  font-size: 12px;
  font-weight: 900;
  opacity:.9;
}
.foot a{ display:block; padding: 6px 0; opacity:.85; }
.foot a:hover{ opacity:1; }
.foot-text{ opacity:.85; line-height:1.7; }

/* Reveal defaults */

/* Responsive */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-side{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:18px; }
  .pin-shell{ grid-template-columns: 1fr; }
  .kpis-3{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  nav{ display:none; }
  .cta-box{ grid-template-columns: 1fr; }
  .cta-right{ justify-content:flex-start; }
  .full-image .media{ height: 62vh; }
  .foot{ grid-template-columns: 1fr; }
}

/* Hero overrides */
.hero .lede{color: rgba(252,247,224,.78)}
.hero .btn{border-color: rgba(252,247,224,.28); color: var(--bg)}
.hero .btn.primary{background: var(--bg); color:#000; border-color: var(--bg)}
.hero .hero-side{border-left: 1px solid rgba(252,247,224,.18)}
.hero .kpi-item{background: rgba(255,255,255,.04); border-color: rgba(252,247,224,.18)}
.hero .kpi-item span{color: rgba(252,247,224,.72)}
/* Header in hero: use light logo + light text */
.header{color: var(--bg)}
.header .cta{border-color: rgba(252,247,224,.28); color: var(--bg)}
.header.is-solid{background: rgba(252,247,224,.88); color:#000}
.header.is-solid .cta{background:#000;color:var(--bg);border-color:#000}
.header.is-solid nav a{color:#000}
nav a{color: var(--bg)}
/* Full-image becomes punchy */
.full-image .overlay{background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.72))}

/* Marquee */
.marquee{padding: 26px 0; background:#000; color: var(--bg); border-top:1px solid rgba(252,247,224,.14); border-bottom:1px solid rgba(252,247,224,.14); overflow:hidden}
.marquee-track{transform-origin: left center;}
@keyframes marquee{
  from{transform: translateX(0)}
  to{transform: translateX(-50%)}
}

/* Full video (replaces illustration image) */
.full-video{ padding:0; background:#000; }
.full-video .media{
  height: 78vh;
  width:100%;
  position:relative;
  overflow:hidden;
}
.full-video .bg-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
}
.full-video .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.72));
  display:flex;
  align-items:flex-end;
  padding: 34px var(--pad);
  color: var(--bg);
}
@media (max-width: 980px){
  .full-video .media{ height: 62vh; }
  .logo{height:52px; max-width:280px}
}

/* Header CTAs */
.header-ctas{display:flex; gap:10px; align-items:center}
.cta{white-space:nowrap}
.cta-solid{}
.cta-outline{
  background: transparent !important;
}
/* When header is solid (light background), ensure outline is visible */
.header.is-solid .cta-outline{
  background: transparent !important;
  color:#000 !important;
  border-color: rgba(0,0,0,.25) !important;
}

/* Member form embed */
.member-section .member-head p{margin: 8px 0 0; color: var(--muted); max-width: 60ch; line-height:1.7}
.form-embed{
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: rgba(255,255,255,.35);
  overflow:hidden;
}
.form-embed iframe{
  display:block;
  width:100%;
  border:0;
}
.member-alt{margin-top: 16px}

/* Mobile header buttons */
@media (max-width: 980px){
  .header-ctas{gap:8px}
  .cta{padding:10px 12px; font-size:11px}
  .logo{height:52px; max-width:280px}
  nav{display:none}
}

/* Split media block (video left / text right) */
.split-media{padding:0; background:#000;}
.split-media-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: 78vh;
}
.split-left, .split-right{position:relative;}
.split-video{
  height:100%;
  width:100%;
  position:relative;
  overflow:hidden;
  background:#0b0b0b;
}
.split-video .bg-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  filter: contrast(1.05) saturate(1.05);
}
.split-video:after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1200px 600px at 50% 70%, rgba(0,0,0,.25), rgba(0,0,0,.65));
  pointer-events:none;
}
.split-right{
  background: var(--bg);
  color:#000;
  display:flex;
  align-items:center;
}
.split-text{
  width: min(560px, calc(100% - 2*var(--pad)));
  margin: 0 auto;
}
.split-plus{
  font-weight: 950;
  font-size: clamp(40px, 6vw, 86px);
  line-height:1;
  margin-bottom: 18px;
}
.split-copy{
  font-weight: 950;
  letter-spacing:-0.02em;
  font-size: clamp(34px, 4.2vw, 72px);
  line-height: 1.02;
  text-transform: none;
}
.split-brand{
  margin-top: 18px;
  font-style: italic;
  letter-spacing:-0.03em;
  text-transform: uppercase;
}
@media (max-width: 980px){
  .split-media-grid{grid-template-columns: 1fr; min-height: auto;}
  .split-video{height: 52vh;}
  .split-right{padding: 56px 0;}
  .split-copy{font-size: clamp(30px, 8vw, 48px);}
}

/* Split media scroll polish */
.split-video .bg-video{will-change: transform}
.split-text{will-change: transform, opacity}

}

/* Clickable video controls */
.video-controls{
  position:absolute;
  left: 14px;
  bottom: 14px;
  display:flex;
  gap: 10px;
  z-index: 3;
}
.video-btn{
  appearance:none;
  border: 1px solid rgba(252,247,224,.22);
  background: rgba(0,0,0,.55);
  color: var(--bg);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  cursor:pointer;
  backdrop-filter: blur(8px);
}
/* When video is unmuted */
.video-btn.is-on{
  background: rgba(252,247,224,.92);
  color:#000;
  border-color: rgba(252,247,224,.92);
}
/* Ensure controls readable on light side if ever used */
.split-right .video-btn{
  background: rgba(0,0,0,.65);
  color: var(--bg);
}
/* Mobile tap targets */
@media (max-width: 980px){
  .video-controls{left: 12px; bottom: 12px}
  .video-btn{padding: 10px 12px}
}

/* Project video block (aligned with Impact height rhythm) */
.project-video-wrapper{
  margin-top: 32px;
  display:flex;
  justify-content:center;
}
.project-video-inner{
  width: 100%;
  max-width: 1100px;
  height: 300px; /* reduced to match impact visual weight */
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  background:#000;
  position:relative;
}
.project-video-inner video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width: 1200px){
  .project-video-inner{
    height: 260px;
  }
}
@media (max-width: 768px){
  .project-video-inner{
    height: 200px;
  }
}

/* Marquee artistic variation */
.marquee-track{transform-origin: left center;}


  to{transform:translateX(-50%)}
}

/* Scroll-controlled marquee */
.marquee{
  position: relative;
  overflow: hidden;
  background:#000;
  color: var(--bg);
  border-top:1px solid rgba(252,247,224,.14);
  border-bottom:1px solid rgba(252,247,224,.14);
}

.marquee-track{transform-origin: left center;}

.marquee-scroll{
  display:flex;
  gap: 32px;
  white-space: nowrap;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size: clamp(18px, 3vw, 28px);
}

.marquee-word{white-space:nowrap;}
.marquee-sep{opacity:.35;}

/* Marquee scale origin */
.marquee-track{transform-origin: left center;}


/* Marquee (pinned band, no page offset) */
.marquee{
  padding: 26px 0 !important;
  min-height: auto !important;
  display:block !important;
  background:#000;
  color: var(--bg);
  overflow:hidden;
}
.marquee-track{
  padding: 0 !important;
  border-top:1px solid rgba(252,247,224,.14);
  border-bottom:1px solid rgba(252,247,224,.14);
  width: max-content;
  transform-origin: left center;
}

/* Marquee non-pin loop safety */
.marquee{position:relative; overflow:hidden;}
.marquee-track{display:flex; width:max-content; will-change: transform;}


/* Mission pinned layout safety (avoid visual "void") */
.pin-shell{align-items: stretch;}
.pin-section{position: relative;}
.pin-left{position: relative;}

/* Reveal defaults: visible if JS fails, hidden only when JS is active */
.reveal, .reveal-item{ opacity:1; transform:none; }
.js .reveal, .js .reveal-item{ opacity:0; transform: translateY(18px); }

/* Anchor offset for fixed header */
section[id], main[id], div[id] { scroll-margin-top: 120px; }

/* Header safety */
.header{ z-index: 2000; }

/* Marquee safety */
.marquee{ position:relative; overflow:hidden; }
.marquee-track{ will-change: transform; transform-origin: left center; }

/* Contact layout */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 40px;
}
.contact-info a{
  display:block;
  font-weight: 800;
  margin-bottom: 18px;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.contact-form input,
.contact-form textarea{
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  font-family: inherit;
  outline: none;
}
.contact-form textarea{ min-height: 140px; resize: vertical; }
.contact-form button{
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid #000;
  background: #000;
  color: var(--bg);
  cursor: pointer;
}
.contact-form .btn.mailto{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid rgba(0,0,0,.22);
  background: transparent;
  color: #000;
  text-decoration:none;
}
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr; gap: 26px;}
}

/* Toast (beyond-like) */
.ds-toast{
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 999px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
  animation: dsToastIn .6s ease forwards;
}
.ds-toast[data-toast="success"]{
  background: rgba(0,0,0,.92);
  color: var(--bg);
  border: 1px solid rgba(0,0,0,.92);
}
.ds-toast[data-toast="error"]{
  background: rgba(255,255,255,.9);
  color: #000;
  border: 1px solid rgba(0,0,0,.18);
}
@keyframes dsToastIn{ to{ opacity:1; transform: translateY(0); } }

.adhesion-embed iframe{
  border:1px solid rgba(0,0,0,.1);
  border-radius:16px;
  background:#fff;
}

/* Membership embed */
.form-embed iframe{
  border:1px solid rgba(0,0,0,.1);
  border-radius:16px;
  background:#fff;
}