:root{
  --paper:#F7F4EC;
  --ink:#1E2A22;
  --ink-soft:#5B6459;
  --marigold:#F2A93B;
  --pine:#1F6F5C;
  --brick:#E4572E;
  --cork:#C9A876;
  --mist:#EDE7D8;
  --line:#DCD5C2;
  --card:#FFFEFA;

  --display: "Zilla Slab", Georgia, serif;
  --body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  --container: 1220px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }

:focus-visible{ outline:3px solid var(--pine); outline-offset:3px; }

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

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--pine);
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:500;
}
.eyebrow::before{
  content:"";
  width:8px; height:8px;
  background:var(--brick);
  border-radius:50%;
  display:inline-block;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-0.01em;
  color:var(--ink);
}

/* ---------- NAV ---------- */

header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(247,244,236,0.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; max-width:var(--container); margin:0 auto;
}
.logo{
  font-family:var(--display); font-weight:900; font-size:23px;
  display:flex; align-items:center; gap:2px;
}
.logo span{ color:var(--brick); }

.nav-links{ display:flex; gap:30px; font-family:var(--mono); font-size:13px; }
.nav-links a{ position:relative; padding-bottom:3px; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:var(--brick); transition:width .25s ease;
}
.nav-links a:hover::after{ width:100%; }

.nav-cta{
  font-family:var(--mono); font-size:13px; font-weight:600;
  background:var(--pine); color:var(--paper);
  padding:11px 20px; border-radius:6px; border:1px solid var(--pine);
  transition:background .2s ease, transform .2s ease;
}
.nav-cta:hover{ background:var(--ink); border-color:var(--ink); transform:translateY(-1px); }

@media (max-width:860px){ .nav-links{ display:none; } }

/* ---------- HERO ---------- */

.hero{ padding:150px 0 0; }

.hero-top{ max-width:var(--container); margin:0 auto; padding:0 32px; }

.hero h1{
  font-size:clamp(38px, 5.6vw, 72px);
  max-width:16ch;
  margin:18px 0 22px;
}
.hero h1 em{ font-style:normal; color:var(--pine); }

.hero-sub{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; flex-wrap:wrap;
}
.hero-desc{ max-width:46ch; color:var(--ink-soft); font-size:17px; }

.hero-cta-group{ display:flex; gap:14px; flex-shrink:0; }

.btn{
  font-family:var(--mono); font-size:13.5px; font-weight:600;
  padding:15px 24px; border-radius:6px;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .2s ease, box-shadow .2s ease;
  white-space:nowrap; cursor: pointer;
}
.btn-primary{ background:var(--brick); color:var(--paper); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(228,87,46,0.3); }
.btn-ghost{ border:1.5px solid var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }

/* ---- bulletin board ---- */

.board-band{
  margin-top:56px;
  background:
    radial-gradient(circle at 1px 1px, rgba(30,42,34,0.08) 1px, transparent 0) 0 0/16px 16px,
    var(--cork);
  padding:56px 0 70px;
  position:relative;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.board-grid{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:22px;
  align-items:start;
}

.pin-card{
  background:var(--card);
  border-radius:3px;
  padding:18px 16px 16px;
  box-shadow:0 10px 20px rgba(20,20,10,0.22), 0 2px 4px rgba(20,20,10,0.12);
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
  grid-column:span 2;
}
.pin-card:hover{
  transform:rotate(0deg) scale(1.03) !important;
  box-shadow:0 16px 30px rgba(20,20,10,0.28);
  z-index:5;
}
.pin-card::before{
  content:"";
  position:absolute;
  top:-9px; left:50%;
  transform:translateX(-50%);
  width:15px; height:15px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff8a6a, var(--brick) 70%);
  box-shadow:0 3px 4px rgba(0,0,0,0.35);
}

.pc1{ transform:rotate(-3.5deg); }
.pc2{ transform:rotate(2deg); margin-top:26px; }
.pc3{ transform:rotate(-1.5deg); }
.pc4{ transform:rotate(3deg); margin-top:14px; }
.pc5{ transform:rotate(-2.5deg); }
.pc6{ transform:rotate(1.5deg); margin-top:30px; }
.pc7{ transform:rotate(-1deg); margin-top:10px; }
.pc8{ transform:rotate(2.5deg); margin-top:20px; }

.pin-eyebrow{
  font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--pine); font-weight:600;
}
.pin-title{
  font-family:var(--display); font-weight:700; font-size:18px;
  margin-top:6px; line-height:1.15;
}
.pin-body{ font-size:13px; color:var(--ink-soft); margin-top:8px; line-height:1.45; }

.pin-stat-num{
  font-family:var(--display); font-weight:900; font-size:26px; color:var(--brick);
  margin-top:4px;
}
.pin-bar{ height:8px; background:var(--mist); border-radius:4px; margin-top:10px; overflow:hidden; }
.pin-bar span{ display:block; height:100%; background:var(--pine); border-radius:4px; }

.pin-photo{
  aspect-ratio:1/1; border-radius:2px; margin-top:2px;
}
.pin-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pin-caption{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:8px; }

.pin-quote{
  font-family:var(--display); font-style:normal; font-weight:600; font-size:15px;
  line-height:1.3; color:var(--ink);
}
.pin-quote::before{ content:"\201C"; color:var(--brick); font-size:26px; line-height:0; vertical-align:-6px; margin-right:2px; }
.pin-who{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:10px; }

@media (max-width:1200px){
  .board-grid{ grid-template-columns:repeat(6,1fr); }
  .pc7, .pc8 { display: none; }
}

@media (max-width:960px){
  .board-grid{ grid-template-columns:repeat(2,1fr); }
  .pin-card{ grid-column:span 1; margin-top:0 !important; }
}

.board-hint{
  text-align:center;
  font-family:var(--mono); font-size:11.5px; color:var(--paper);
  opacity:.75; margin-top:34px;
}

/* ---------- MARQUEE ---------- */

.marquee-band{
  padding:22px 0; overflow:hidden; background:var(--mist);
  border-bottom:1px solid var(--line);
}
.marquee-track{
  display:flex; gap:64px; width:max-content;
  animation:scroll-x 30s linear infinite;
}
@keyframes scroll-x{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-track span{
  font-family:var(--mono); font-size:13.5px; color:var(--ink-soft);
  white-space:nowrap; letter-spacing:.03em; text-transform:uppercase; font-weight: 600;
}

/* ---------- SHARED SECTION ---------- */

section{ padding:110px 0; }
section:not(.compare-section):not(.cta-band):not(.included-band):nth-of-type(even) { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:30px; margin-bottom:54px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(30px,4vw,50px); max-width:14ch; }
.section-head p{ max-width:38ch; color:var(--ink-soft); }

/* ---------- PROGRAMS (feed list) ---------- */

.programs-feed{ border-top:1px solid var(--line); }
.program-row{
  border-bottom:1px solid var(--line);
  padding:32px 0;
  display:grid;
  grid-template-columns:64px 1.2fr 1.5fr 150px;
  align-items:center; gap:24px;
  transition:background .25s ease;
}
.program-row:hover{ background:var(--mist); }
.program-num{ font-family:var(--mono); font-size:13px; color:var(--ink-soft); }
.program-name{ font-family:var(--display); font-weight:700; font-size:clamp(19px,2.2vw,27px); }
.program-desc{ color:var(--ink-soft); font-size:14.5px; max-width:50ch; }
.program-tag{
  justify-self:end; font-family:var(--mono); font-size:11.5px; text-transform:uppercase;
  background:var(--ink); color:var(--paper); padding:7px 13px; border-radius:100px; white-space:nowrap;
}
.program-row:nth-child(1) .program-tag{ background:var(--pine); }
.program-row:nth-child(2) .program-tag{ background:var(--brick); }
.program-row:nth-child(3) .program-tag{ background:var(--marigold); color:var(--ink); }
.program-row:nth-child(4) .program-tag{ background:var(--ink); }
.program-row:nth-child(5) .program-tag{ background:var(--pine); }
.program-row:nth-child(6) .program-tag{ background:var(--brick); }
.program-row:nth-child(7) .program-tag{ background:var(--cork); color:var(--ink); }
.program-row:nth-child(8) .program-tag{ background:var(--ink); }

@media (max-width:760px){
  .program-row{ grid-template-columns:1fr; gap:10px; }
  .program-tag{ justify-self:start; }
}

/* ---------- WORK GRID ---------- */

.work-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.work-grid.large { grid-template-columns:repeat(2, 1fr); gap: 30px; }
.work-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.work-thumb{ aspect-ratio:1/1; position:relative; background: var(--mist); }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; }
.work-org{
  position:absolute; top:14px; left:14px;
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
  color:#fff; background:rgba(0,0,0,0.25); padding:5px 10px; border-radius:100px;
}
.work-body{ padding:22px; }
.work-kind{ font-family:var(--mono); font-size:11px; color:var(--pine); text-transform:uppercase; letter-spacing:.04em; }
.work-title{ font-family:var(--display); font-weight:700; font-size:20px; margin-top:8px; }

@media (max-width:860px){ .work-grid, .work-grid.large{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .work-grid, .work-grid.large{ grid-template-columns:1fr; } }

/* ---------- WHO WE WORK WITH ---------- */

.who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.who-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 24px; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.who-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

@media (max-width:860px){ .who-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .who-grid{ grid-template-columns:1fr; } }


/* ---------- PLATFORMS GRID ---------- */

.platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.platform-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 24px; display: flex; align-items: center; gap: 14px;
  font-family: var(--body); font-weight: 600; font-size: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.platform-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.platform-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 20px; }

@media (max-width:860px){ .platform-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .platform-grid{ grid-template-columns:1fr; } }

/* ---------- PROCESS TIMELINE ---------- */

.timeline{ position:relative; padding-left:34px; border-left:2px solid var(--line); }
.tl-item{ position:relative; padding-bottom:52px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-41px; top:4px;
  width:16px; height:16px; border-radius:50%;
  background:var(--paper); border:3px solid var(--pine);
}
.tl-item:nth-child(2)::before{ border-color:var(--brick); }
.tl-item:nth-child(3)::before{ border-color:var(--marigold); }
.tl-item:nth-child(4)::before{ border-color:var(--cork); }
.tl-item:nth-child(5)::before{ border-color:var(--pine); }
.tl-item:nth-child(6)::before{ border-color:var(--brick); }

.tl-when{
  font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.05em; font-weight: 600;
}
.tl-item h3{ font-size:clamp(21px,2.4vw,29px); margin:8px 0 10px; }
.tl-item p{ color:var(--ink-soft); max-width:58ch; font-size:15px; }


/* ---------- COMPARISON ---------- */

.compare-section { background: var(--ink) !important; color: var(--paper); padding: 110px 0; border: none !important; }
.compare-section .section-head h2 { color: var(--paper); }
.compare-section .section-head p { color: #B7BFB9; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.compare-col {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 40px;
}
.compare-col.highlight {
  background: var(--paper); border-color: var(--paper); color: var(--ink);
}
.compare-title { font-family: var(--display); font-size: 24px; font-weight: 700; margin-bottom: 24px; }
.compare-item {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; font-size: 15px;
}
.compare-item svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.compare-item.no svg { color: #E4572E; }
.compare-item.yes svg { color: #1F6F5C; }
.compare-bottom { text-align: center; font-family: var(--display); font-size: 24px; font-weight: 700; margin-top: 50px; color: var(--marigold); }

@media (max-width:860px){ .compare-grid{ grid-template-columns:1fr; } }


/* ---------- CHECKLIST (What's Included) ---------- */
.included-band { padding: 90px 0; background: var(--mist); border-top: 1px solid var(--line); }
.included-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px;
}
.included-item {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: var(--body); font-weight: 600; font-size: 16px;
  background: var(--paper); padding: 20px; border-radius: 8px; border: 1px solid var(--line);
}
.included-item svg { width: 20px; height: 20px; color: var(--pine); flex-shrink: 0; }

@media (max-width:960px){ .included-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .included-grid{ grid-template-columns:1fr; } }


/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line); padding: 24px 0;
  display: flex; flex-direction: column; gap: 14px;
}
.faq-q { 
  font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.faq-icon {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 24px; color: var(--brick); font-weight: 400;
  transition: transform 0.3s ease;
}
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-a {
  font-family: var(--body); font-size: 16px; color: var(--ink-soft); line-height: 1.6;
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.faq-item.active .faq-a { max-height: 200px; opacity: 1; margin-top: 6px; }

/* ---------- CTA ---------- */

.cta-band{
  background:var(--brick) !important; color:var(--paper); text-align:center; padding:120px 0; border: none !important;
}
.cta-band h2{ color:var(--paper); font-size:clamp(26px,4.5vw,56px); max-width:40ch; margin:0 auto 30px; line-height: 1.2; }
.cta-band .btn-primary{ background:var(--paper); color:var(--ink); }
.cta-band .btn-primary:hover{ box-shadow:0 10px 22px rgba(0,0,0,0.25); }
.cta-sub{ font-family:var(--body); font-size: 18px; opacity:.9; margin: 0 auto 30px; max-width: 60ch;}

/* ---------- FOOTER ---------- */

footer{ padding:70px 0 34px; background: var(--paper); }
.footer-top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:50px; border-bottom:1px solid var(--line);
}
.footer-brand .logo{ font-size:26px; margin-bottom:14px; }
.footer-brand p{ color:var(--ink-soft); max-width:32ch; font-size:14.5px; }
.footer-col h4{
  font-family:var(--mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-soft); margin-bottom:14px;
}
.footer-col a{ display:block; padding:6px 0; font-size:14.5px; transition:color .2s ease; font-weight: 500; }
.footer-col a:hover{ color:var(--brick); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:26px;
  font-family:var(--mono); font-size:12px; color:var(--ink-soft); flex-wrap:wrap; gap:12px;
}
@media (max-width:760px){ .footer-top{ grid-template-columns:1fr 1fr; } }