/* -------------------------
   Reset & Base
-------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: 'Neue Haas Grotesk', system-ui, sans-serif; line-height:1.5; color:#0D0D0D; scroll-behavior:smooth; }

/* -------------------------
   Self-hosted font-face
-------------------------- */
@font-face { font-family:'Neue Haas Grotesk'; src:url('fonts/NeueHaasDisplayXXThin.ttf') format('truetype'); font-weight:100; font-style:normal; font-display:swap; }
/* Add other weights and italics as needed... */

/* -------------------------
   Header height variable
-------------------------- */
:root { --header-height: 96px; }

/* -------------------------
   Container
-------------------------- */
.container { max-width:1200px; margin:0 auto; padding:2rem; }

/* -------------------------
   Site Header (fixed overlay)
-------------------------- */
.site-header {
  position: fixed;
  top:0; left:0;
  width:100%; height:var(--header-height);
  z-index:1000;
  display:flex; align-items:center; padding:0 2rem;
  background-color: rgba(13,13,13,0);
  backdrop-filter: blur(0px);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.scrolled {
  background-color: rgba(13,13,13,0.8);
  backdrop-filter: blur(6px);
}

.header-inner { display:flex; justify-content:space-between; align-items:center; width:100%; }
.header-logo a, .header-nav a { color:#f7f7f7; text-decoration:none; font-weight:200; }
.header-nav { display:flex; gap:1.5rem; }
.nav-toggle { display:none; font-size:1.5rem; background:none; border:none; color:#f7f7f7; cursor:pointer; }

/* -------------------------
   Hero & Slideshow
-------------------------- */
.hero { position:relative; width:100%; height:100vh; overflow:hidden; }
.hero-slideshow { position:absolute; inset:0; z-index:1; background-color:#0D0D0D; }
.hero-slideshow .slide {
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  z-index:0;
  transition:opacity 0.5s ease-in-out;
  will-change:opacity;
}
.hero-slideshow .slide.active { opacity:1; z-index:2; }
.hero-slideshow .slide.previous { opacity:0; z-index:1; }

.hero-content {
  position:relative; z-index:5;
  display:flex; align-items:flex-start; justify-content:flex-start;
  height:100%;
  max-width:1200px; margin:0 auto;
  padding-top:var(--header-height); padding-left:2rem; padding-right:2rem;
}
.hero-content h1 { font-size:5.5em; line-height:110%; letter-spacing:0.01em; color:#ffffff; max-width:12ch; margin:0; font-weight:400; }

/* -------------------------
   Paragraph Sections (dark)
-------------------------- */
.paragraph-section-wrapper { width:100%; background-color:#0D0D0D; color:#ffffff; }
.three-paragraph-section, .six-paragraph-section { margin-bottom:3rem; height:90vh; min-height:32rem; display:flex; flex-direction:column; justify-content:center; }
.three-paragraph-section .section-title, .six-paragraph-section .section-title { margin-bottom:1.25rem; font-size:1.25rem; color:#ffffff; }
.paragraph-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.paragraph-grid p { margin:0; max-width:40rem; color:#ffffff; }

/* -------------------------
   Column Section (light)
-------------------------- */
.column-section-wrapper { width:100%; background-color:#f7f7f7; color:#0D0D0D; }
.three-column-layout { display:flex; align-items:center; margin:0 auto; height:auto; min-height:32rem; }
@media (min-width:769px) { .three-column-layout { min-height:90vh; align-items:center; } }
.three-column-inner { display:grid; grid-template-columns:1fr 2fr; gap:1.4rem; align-items:start; width:100%; }
.column { display:flex; flex-direction:column; }
.column h2 { margin-bottom:0.75rem; color:#0D0D0D; }
.column ul, .column .flowing-list { list-style:none; padding-left:0; margin:0; }
.column ul li, .column .flowing-list li { margin-bottom:0.5rem; break-inside:avoid; color:inherit; }
.flowing-list { column-count:2; column-gap:1.4rem; }

/* -------------------------
   Case Studies section
-------------------------- */
#case-studies-section { background-color:#f7f7f7; color:#0D0D0D; }
#case-studies-section .section-title, #case-studies-section p, #case-studies-section a { color:#0D0D0D; }

/* -------------------------
   Responsive
-------------------------- */
@media (max-width:1024px) { .three-column-inner { grid-template-columns:1fr; } .flowing-list { column-count:2; } }
@media (max-width:768px) {
  .header-nav { display:none; flex-direction:column; background-color:rgba(0,0,0,0.9); position:absolute; top:100%; right:0; width:200px; padding:1rem; border-radius:0 0 5px 5px; }
  .header-nav a { margin:0.5rem 0; }
  .nav-toggle { display:block; }
  .header-nav.active { display:flex; }
}
@media (max-width:640px) {
  .container { padding:1rem; }
  .three-column-inner { grid-template-columns:1fr; }
  .flowing-list { column-count:1; column-gap:0; padding-left:1.1rem; }
  .paragraph-grid { grid-template-columns:1fr; }
  .hero-content { padding-left:1rem; padding-right:1rem; }
  .hero-content h1 { font-size:clamp(2rem,6vw,4rem); max-width:100%; }
}