/* ==========================================================================
   HOME — page-specific layout (design-system tokens live in main.css)
   ========================================================================== */

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:110px;
}
.hero-eyebrow{ margin-bottom:24px; }
.hero-title{ overflow:hidden; }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line span{ display:inline-block; }
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:24px 48px;
  margin-top:40px;
  align-items:flex-end;
}
.hero-photo{
  position:absolute;
  top:14%;
  right:var(--gutter);
  width:min(20vw, 280px);
  aspect-ratio:4/5;
  overflow:hidden;
  filter:grayscale(1) contrast(1.05);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
@media (max-width:900px){ .hero-photo{ display:none; } }
.hero-scroll{
  position:absolute;
  bottom:40px; left:var(--gutter);
  display:flex; align-items:center; gap:10px;
}

/* ---------- Profile split ---------- */
.profile-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.profile-col{
  padding:clamp(48px,7vw,96px) var(--gutter);
  border-right:1px solid var(--line);
  transition:background var(--dur-page) var(--ease-premium), color var(--dur-page) var(--ease-premium);
  cursor:pointer;
}
.profile-col:last-child{ border-right:none; }
.profile-col:hover{ background:var(--accent); color:var(--accent-ink); }
.profile-col:hover .mono-label{ color:var(--accent-ink); opacity:.7; }
.profile-col h3{ margin-top:16px; }
.profile-col .link-underline{ margin-top:24px; display:inline-block; }
@media (max-width:768px){
  .profile-split{ grid-template-columns:1fr; }
  .profile-col{ border-right:none; border-bottom:1px solid var(--line); }
}

/* ---------- Manifesto (02) ---------- */
.manifesto-grid{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:48px;
  align-items:end;
}
.manifesto-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.manifesto-stats .stat-num{ font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.5rem); text-transform:uppercase; }

/* ---------- Testimonials ---------- */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  margin-top:48px;
}
.testimonial-card{
  background:var(--ink);
  padding:32px;
  transition:background var(--dur-micro) var(--ease-premium);
}
.testimonial-card:hover{ background:var(--ink-raise); }
.testimonial-quote{
  font-size:1.05rem;
  line-height:1.6;
  color:var(--paper);
}
.testimonial-author{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.testimonial-author .name{
  font-family:var(--font-mono);
  font-size:.8125rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--paper);
}
.testimonial-author .role{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--muted-on-ink);
}
@media (max-width:768px){
  .testimonial-grid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .manifesto-grid{ grid-template-columns:1fr; }
  .manifesto-stats{ grid-template-columns:1fr; gap:24px; }
}

/* ---------- Selected Work (03) ---------- */
.work-tabs{ display:flex; gap:32px; margin-bottom:48px; }
.work-tab{
  font-family:var(--font-mono);
  font-size:.8125rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted-on-ink);
  padding-bottom:8px;
  border-bottom:2px solid transparent;
}
.work-tab.is-active{ color:var(--paper); border-color:var(--accent); }

.work-card{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px;
  padding:40px 0;
  border-top:1px solid var(--line);
  position:relative;
}
.work-list .work-card:last-child{ border-bottom:1px solid var(--line); }
.work-card-title{ display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; }
.work-card-title h3{ text-transform:uppercase; }
.work-card-stats{
  display:flex;
  flex-wrap:wrap;
  gap:24px 40px;
  margin-top:16px;
}
.work-card-stats .stat{ font-family:var(--font-mono); font-size:.8125rem; color:var(--muted-on-ink); }
.work-card-stats .stat b{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--paper); text-transform:none; }
.work-card .view-link{ font-family:var(--font-mono); font-size:.8125rem; text-transform:uppercase; white-space:nowrap; }

.work-card.is-soon{ opacity:.5; }
.work-card.is-soon .work-card-title h3{ color:var(--muted); }

/* ---------- Clients marquee (04) ---------- */
.marquee-outer{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.marquee-track{ display:flex; width:max-content; }
.marquee-track img{
  height:56px;
  width:auto;
  margin:40px 56px;
  opacity:.92;
  transition:opacity var(--dur-micro);
}
.marquee-track img:hover{ opacity:1; }
.marquee-track .brand-text{
  margin:40px 56px;
  font-family:var(--font-display);
  font-size:1.75rem;
  text-transform:uppercase;
  color:var(--muted-on-ink);
  white-space:nowrap;
  display:flex;
  align-items:center;
}
@keyframes marquee-x{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee-track{ animation:marquee-x 42s linear infinite; }
.marquee-outer:hover .marquee-track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; overflow-x:auto; } }

/* ---------- Services (05) ---------- */
.service-row{
  border-top:1px solid var(--line);
  padding:28px 0;
  display:grid;
  grid-template-columns:80px 1fr 1.2fr;
  align-items:start;
  gap:32px;
  transition:padding-left var(--dur-reveal) var(--ease-premium);
}
.service-row:last-child{ border-bottom:1px solid var(--line); }
.service-row:hover{ padding-left:16px; }
.service-row .mono-num{ font-size:.8125rem; color:var(--accent); padding-top:10px; }
.service-row h3{ text-transform:uppercase; }
.service-row .service-desc{
  opacity:0;
  transform:translateX(16px);
  transition:opacity var(--dur-reveal) var(--ease-premium), transform var(--dur-reveal) var(--ease-premium);
  color:var(--muted);
  font-size:.95rem;
  align-self:center;
}
.service-row:hover .service-desc{ opacity:1; transform:translateX(0); }
@media (max-width:768px){
  .service-row{ grid-template-columns:40px 1fr; }
  .service-row:hover{ padding-left:0; }
  .service-row .service-desc{ grid-column:1/-1; opacity:1; transform:none; height:auto; margin-top:8px; }
}

/* ---------- Philosophy (06) ---------- */
.philosophy{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--ink);
}
.philosophy .h1{ font-size:clamp(2.25rem,7vw,6rem); }
.philosophy .word{ display:inline-block; opacity:.15; }

/* ---------- Blog (07) ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.blog-card{ background:var(--ink); padding:32px; display:flex; flex-direction:column; }
.blog-card .mono-label{ margin-bottom:16px; }
.blog-card h3{ text-transform:none; font-family:var(--font-body); font-weight:700; font-size:1.15rem; text-transform:uppercase; letter-spacing:0; margin-bottom:24px; flex-grow:1; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr; } }

/* ---------- Resources (08) ---------- */
.resource-card{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:48px;
  align-items:center;
  border:1px solid var(--line);
  padding:40px;
}
.resource-card img{ aspect-ratio:3/4; object-fit:cover; }
@media (max-width:768px){ .resource-card{ grid-template-columns:1fr; } .resource-card img{ max-width:200px; } }

/* ---------- Events (09) ---------- */
.event-row{
  display:grid;
  grid-template-columns:80px 140px 100px 1fr 120px;
  gap:24px;
  align-items:center;
  padding:24px 0;
  border-top:1px solid var(--line);
}
.event-row:last-child{ border-bottom:1px solid var(--line); }
.event-poster{ width:80px; aspect-ratio:3/4; overflow:hidden; }
.event-poster img{ width:100%; height:100%; object-fit:cover; }
.event-status{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; padding:4px 10px; border:1px solid currentColor; width:fit-content; }
.event-status.is-open{ color:var(--accent); }
.event-status.is-closed{ color:var(--muted); }
.event-row.is-closed{ opacity:.5; }
@media (max-width:768px){
  .event-row{ grid-template-columns:60px 1fr 1fr; row-gap:8px; }
  .event-poster{ width:60px; }
}

/* ---------- About preview (10) ---------- */
.about-preview{ display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:center; }
.about-preview img{ aspect-ratio:4/5; object-fit:cover; filter:grayscale(1); }
@media (max-width:900px){ .about-preview{ grid-template-columns:1fr; } }

/* ---------- Contact (11) ---------- */
.contact-block{ text-align:left; }
.contact-links{ display:flex; flex-wrap:wrap; gap:16px 40px; margin-top:56px; }

/* ---------- Footer (12) ---------- */
.site-footer{ border-top:1px solid var(--line); padding:80px 0 32px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:96px; }
.footer-top .brand-big{ font-size:clamp(2rem,4vw,3rem); }
.footer-nav a, .footer-social a{ display:block; padding:6px 0; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid var(--line-soft); }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
