/* ============================================================
   STOP INDIAN HATE — concrete & saffron, v2
   Motion-forward, disciplined, professional.
   Saffron #FF9933 = precision accent only.
============================================================ */

:root {
  --char: #17181A;      /* near-black display */
  --ink:  #24262B;      /* raised charcoal */
  --slate:#41454D;      /* body text */
  --worn: #8B8780;      /* muted grey */
  --cement:#CBC7C0;
  --plaster:#ECEAE4;    /* light base */
  --paper:#F5F3EF;      /* lightest */
  --saffron:#FF9933;
  --saffron-ink:#A85D14; /* AA-safe saffron text on light */
  --line:#DAD6CE;
  --line-dark:rgba(255,255,255,0.12);
  --maxw:1180px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  background:var(--paper); color:var(--slate);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px); }
a { color:inherit; }
img { max-width:100%; display:block; }

.display {
  font-family:"Anton","Archivo Black",Impact,sans-serif;
  font-weight:400; text-transform:uppercase;
  letter-spacing:0.005em; line-height:0.94; color:var(--char);
}

.eyebrow {
  font-size:0.74rem; font-weight:700; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--saffron-ink);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before { content:""; width:0; height:3px; background:var(--saffron); transition:width 0.7s var(--ease) 0.15s; }
.reveal.in .eyebrow::before, .eyebrow.in::before { width:34px; }
/* fallback: show rule even without JS reveal */
.no-js .eyebrow::before { width:34px; }

/* ============ MOTION SYSTEM ============ */
.reveal { opacity:0; transform:translateY(26px); transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:0.08s; }
.reveal.d2 { transition-delay:0.16s; }
.reveal.d3 { transition-delay:0.24s; }
.no-js .reveal { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .eyebrow::before { width:34px !important; }
}

/* ============ HEADER ============ */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(245,243,239,0.82);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.scrolled { border-bottom-color:var(--line); box-shadow:0 4px 24px -18px rgba(0,0,0,0.4); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:74px; }

.brand { display:inline-flex; align-items:center; text-decoration:none; height:30px; }
.brand img { height:26px; width:auto; transition:transform 0.4s var(--ease), opacity 0.3s; }
.brand:hover img { transform:scale(1.04); }

.nav { display:flex; align-items:center; gap:2px; }
.nav a {
  position:relative; text-decoration:none; font-size:0.9rem; font-weight:600;
  letter-spacing:0.01em; color:var(--slate); padding:9px 16px; border-radius:2px;
  transition:color 0.2s var(--ease);
}
.nav a:not(.nav-cta)::after {
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px;
  background:var(--saffron); transform:scaleX(0); transform-origin:left;
  transition:transform 0.32s var(--ease);
}
.nav a:not(.nav-cta):hover::after, .nav a.active:not(.nav-cta)::after { transform:scaleX(1); }
.nav a.active { color:var(--char); }
.nav a.nav-cta {
  background:var(--char); color:var(--paper); border:2px solid var(--char);
  margin-left:8px; overflow:hidden; transition:color 0.3s var(--ease);
}
.nav a.nav-cta::before {
  content:""; position:absolute; inset:0; background:var(--saffron);
  transform:translateX(-101%); transition:transform 0.34s var(--ease); z-index:0;
}
.nav a.nav-cta:hover::before { transform:translateX(0); }
.nav a.nav-cta span { position:relative; z-index:1; }
.nav a.nav-cta:hover { color:var(--char); }

.nav-toggle {
  display:none; background:none; border:2px solid var(--char); border-radius:2px;
  padding:7px 11px; cursor:pointer; font-size:1.05rem; color:var(--char); line-height:1;
}

/* ============ BUTTONS ============ */
.btn {
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:2px; font-weight:700; font-size:0.88rem;
  letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  border:2px solid var(--char); overflow:hidden; isolation:isolate;
  transition:transform 0.2s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn span { position:relative; z-index:1; transition:transform 0.3s var(--ease); }
.btn .arr { display:inline-block; transition:transform 0.3s var(--ease); }
.btn:hover .arr { transform:translateX(5px); }
.btn::before { content:""; position:absolute; inset:0; z-index:0; transition:transform 0.36s var(--ease); }

.btn-primary { background:var(--char); color:var(--paper); }
.btn-primary::before { background:var(--saffron); transform:translateY(101%); }
.btn-primary:hover { color:var(--char); border-color:var(--saffron); transform:translateY(-3px); }
.btn-primary:hover::before { transform:translateY(0); }

.btn-saffron { background:var(--saffron); border-color:var(--saffron); color:var(--char); }
.btn-saffron::before { background:var(--char); transform:translateY(101%); }
.btn-saffron:hover { color:var(--paper); transform:translateY(-3px); }
.btn-saffron:hover::before { transform:translateY(0); }

.btn-ghost { background:transparent; color:var(--char); }
.btn-ghost::before { background:var(--char); transform:translateY(101%); }
.btn-ghost:hover { color:var(--paper); transform:translateY(-3px); }
.btn-ghost:hover::before { transform:translateY(0); }

/* ============ HERO ============ */
.hero { position:relative; overflow:hidden; padding:clamp(70px,10vw,116px) 0 clamp(64px,8vw,96px); }
.hero-grid { display:grid; grid-template-columns:1.08fr 0.92fr; gap:clamp(40px,6vw,70px); align-items:center; }

.hero-copy .eyebrow { margin-bottom:26px; }
.hero-headline {
  font-family:"Anton",sans-serif; text-transform:uppercase; line-height:0.98;
  font-size:clamp(2.3rem,5.3vw,4.3rem); max-width:17ch; color:var(--char);
}
.hero-headline .hl { color:var(--saffron); position:relative; }
.hero-sub { margin-top:28px; max-width:50ch; font-size:clamp(1.08rem,1.5vw,1.28rem); font-weight:500; color:var(--slate); line-height:1.5; }
.hero-actions { margin-top:36px; display:flex; flex-wrap:wrap; gap:14px; }

/* Poster: the real logo on charcoal, with ambient motion */
.poster {
  position:relative; background:var(--char); border-radius:4px;
  padding:clamp(38px,5vw,58px) clamp(32px,4vw,48px);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  min-height:clamp(320px,40vw,440px); overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,0.55);
}
.poster::after {
  content:""; position:absolute; width:140%; height:140%; top:-20%; left:-20%;
  background:radial-gradient(circle at 30% 30%, rgba(255,153,51,0.14), transparent 55%);
  animation:drift 14s ease-in-out infinite alternate;
}
@keyframes drift { from{transform:translate(0,0);} to{transform:translate(6%,5%);} }
.poster-logo { position:relative; z-index:1; width:min(78%,340px); height:auto; }
.poster-rule { position:relative; z-index:1; width:52px; height:4px; background:var(--saffron); margin:26px 0 0; transform-origin:left; }
.reveal.in .poster-rule { animation:growrule 0.7s var(--ease) 0.3s both; }
@keyframes growrule { from{transform:scaleX(0);} to{transform:scaleX(1);} }
.poster-tag { position:relative; z-index:1; margin-top:20px; font-size:0.94rem; line-height:1.55; color:rgba(245,243,239,0.72); max-width:34ch; }

/* ============ SECTIONS ============ */
.section { padding:clamp(64px,9vw,100px) 0; }
.section-head { max-width:60ch; margin-bottom:clamp(40px,5vw,54px); }
.section-head .display { font-size:clamp(2rem,4.4vw,3.4rem); margin-top:18px; line-height:0.98; }
.section-head .lede { color:var(--slate); margin-top:20px; font-size:1.08rem; max-width:60ch; }

.section-dark { background:var(--char); color:var(--paper); position:relative; }
.section-dark .display { color:#fff; }
.section-dark .lede { color:rgba(245,243,239,0.72); }
.section-dark .eyebrow { color:var(--saffron); }

/* ============ STATEMENT ============ */
.statement { padding:clamp(56px,7vw,88px) 0; }
.statement p {
  font-family:"Anton",sans-serif; text-transform:uppercase; line-height:1.06;
  font-size:clamp(1.7rem,3.6vw,2.9rem); max-width:20ch; color:var(--char); letter-spacing:0.01em;
}
.statement p .hl { color:var(--saffron); }

/* ============ COMMITMENTS ============ */
.commitments { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.commit {
  position:relative; padding:clamp(30px,3.5vw,44px) clamp(26px,2.5vw,34px) clamp(34px,4vw,48px);
  border-right:1px solid var(--line); background:var(--paper);
  transition:background 0.4s var(--ease), transform 0.4s var(--ease);
}
.commit:last-child { border-right:none; }
.commit::before {
  content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--saffron);
  transition:width 0.45s var(--ease);
}
.commit:hover { background:var(--plaster); }
.commit:hover::before { width:100%; }
.commit-num { font-family:"Anton",sans-serif; font-size:0.95rem; color:var(--saffron-ink); letter-spacing:0.08em; }
.commit h3 {
  font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.45rem;
  letter-spacing:0.01em; color:var(--char); line-height:1.04; margin:16px 0 13px;
}
.commit p { color:var(--slate); font-size:0.98rem; }

/* ============ STATS ============ */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(36px,4vw,52px); }
.stat .num {
  font-family:"Anton",sans-serif; text-transform:uppercase; line-height:0.9;
  font-size:clamp(3rem,6vw,4.8rem); color:var(--saffron);
}
.stat .num .unit { font-size:0.4em; color:#fff; display:block; letter-spacing:0.03em; margin-top:6px; line-height:1.2; }
.stat p { margin-top:16px; color:rgba(245,243,239,0.84); font-size:1rem; max-width:32ch; }
.stat .src { display:block; margin-top:14px; font-size:0.78rem; color:rgba(245,243,239,0.48); letter-spacing:0.01em; }

/* ============ CTA STRIP ============ */
.cta-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.cta-strip .wrap { padding:clamp(52px,7vw,72px) clamp(20px,5vw,40px); display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; }
.cta-strip .display { font-size:clamp(1.8rem,3.6vw,2.9rem); max-width:18ch; }
.cta-strip .display .hl { color:var(--saffron); }

/* ============ ABOUT ============ */
.about-hero { padding:clamp(64px,9vw,104px) 0 clamp(30px,4vw,48px); }
.about-hero .display { font-size:clamp(2.5rem,6vw,5rem); max-width:16ch; margin-top:20px; }
.about-hero .lede { color:var(--slate); font-size:1.16rem; max-width:56ch; margin-top:24px; }
.about-hero .lede .hl { color:var(--saffron-ink); font-weight:600; }

.people { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,4vw,44px); }
.person {
  background:var(--paper); border:1px solid var(--line); border-radius:4px; overflow:hidden;
  transition:transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.person:hover { transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(0,0,0,0.4); border-color:var(--cement); }
.person-photo-wrap { position:relative; overflow:hidden; aspect-ratio:1/1; }
.person-photo { width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--ease); }
.person:hover .person-photo { transform:scale(1.05); }
.person-body { padding:clamp(26px,3vw,34px) clamp(26px,3vw,34px) clamp(32px,4vw,40px); }
.person-name { font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.9rem; letter-spacing:0.01em; color:var(--char); line-height:1; }
.person-role { color:var(--saffron-ink); font-weight:700; font-size:0.76rem; letter-spacing:0.16em; text-transform:uppercase; margin-top:10px; }
.person-bio { color:var(--slate); margin-top:20px; font-size:1rem; }
.person-tags { margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; }
.tag {
  font-size:0.76rem; font-weight:600; letter-spacing:0.03em; color:var(--char);
  background:var(--plaster); border:1px solid var(--line); padding:6px 13px; border-radius:2px;
  transition:background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.tag:hover { background:var(--saffron); border-color:var(--saffron); transform:translateY(-2px); }

/* ============ CONTACT ============ */
.contact-hero { padding:clamp(64px,9vw,104px) 0 clamp(26px,3vw,34px); }
.contact-hero .display { font-size:clamp(2.5rem,6vw,4.8rem); max-width:14ch; margin-top:20px; }
.contact-hero .lede { color:var(--slate); font-size:1.16rem; max-width:54ch; margin-top:24px; }

.contact-grid { display:grid; grid-template-columns:1.3fr 0.82fr; gap:clamp(32px,4vw,52px); align-items:start; padding-bottom:40px; }
.form-card { background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:clamp(28px,3.5vw,38px); }
.field { margin-bottom:22px; }
.field label { display:block; font-weight:700; font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--char); margin-bottom:9px; }
.field label span { color:var(--worn); font-weight:500; text-transform:none; letter-spacing:0; }
.field input, .field textarea {
  width:100%; font-family:inherit; font-size:1rem; color:var(--char); background:var(--paper);
  border:2px solid var(--line); border-radius:2px; padding:14px 16px;
  transition:border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--saffron); box-shadow:0 0 0 4px rgba(255,153,51,0.16); background:#fff; }
.field textarea { resize:vertical; min-height:150px; }
.form-note { font-size:0.84rem; color:var(--worn); margin-top:8px; }

.aside-card { border-radius:4px; padding:clamp(26px,3vw,34px); margin-bottom:20px; }
.aside-dark { background:var(--char); color:var(--paper); }
.aside-dark h3 { font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.4rem; letter-spacing:0.01em; margin-bottom:14px; }
.aside-dark p { color:rgba(245,243,239,0.78); font-size:0.96rem; }
.aside-dark .contact-points { margin-top:20px; display:grid; gap:14px; }
.aside-dark .cp { display:flex; align-items:flex-start; gap:12px; font-size:0.94rem; color:rgba(245,243,239,0.9); }
.aside-dark .cp .ic { color:var(--saffron); flex:none; font-size:1.05rem; line-height:1.4; }
.aside-light { background:var(--plaster); color:var(--char); border:1px solid var(--line); }
.aside-light h3 { font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.3rem; letter-spacing:0.01em; margin-bottom:12px; }
.aside-light p { color:var(--slate); font-size:0.94rem; }

.form-status { margin-top:18px; font-size:0.96rem; min-height:1.2em; }

/* ============ FOOTER ============ */
.site-footer { background:var(--char); color:rgba(245,243,239,0.68); padding:clamp(48px,6vw,62px) 0 42px; }
.site-footer .wrap { display:flex; justify-content:space-between; align-items:flex-start; gap:34px; flex-wrap:wrap; }
.footer-logo { height:24px; width:auto; margin-bottom:14px; }
.footer-desc { max-width:34ch; font-size:0.92rem; color:rgba(245,243,239,0.6); }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a { position:relative; color:rgba(245,243,239,0.72); text-decoration:none; font-size:0.92rem; font-weight:600; letter-spacing:0.02em; transition:color 0.25s var(--ease); }
.footer-links a:hover { color:var(--saffron); }
.footer-bottom { margin-top:36px; padding-top:24px; border-top:1px solid var(--line-dark); font-size:0.83rem; color:rgba(245,243,239,0.44); }

/* ============ RESPONSIVE ============ */
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .poster { order:-1; min-height:auto; }
  .commitments { grid-template-columns:1fr; }
  .commit { border-right:none; border-bottom:1px solid var(--line); }
  .commit:last-child { border-bottom:none; }
  .stats-grid { grid-template-columns:1fr; gap:38px; }
  .people { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; gap:32px; }
  .nav {
    position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:2px; background:var(--paper); border-bottom:1px solid var(--line);
    padding:14px 20px 20px; display:none;
  }
  .nav.open { display:flex; animation:navdrop 0.3s var(--ease); }
  @keyframes navdrop { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;} }
  .nav a { padding:13px 15px; }
  .nav a.nav-cta { margin-left:0; margin-top:6px; text-align:center; justify-content:center; }
  .nav-toggle { display:block; }
}