/* CO3 grafisch ontwerpers -- rebuild stylesheet
   Colors and type derived from the live Webflow site: https://www.co3.org
   Brand: dark blue gradient hero, black "CO" + blue "3" wordmark, clean white
   content pages, blue category labels.
   Font: Inter (Google Fonts) as a close, license-free stand-in for the
   original site font.
*/

:root {
  --c-blue: #1e6fd9;
  --c-blue-dark: #0b2b4a;
  --c-text: #222;
  --c-muted: #666;
  --c-bg: #fff;
  --nav-height: 64px;
  --nav-border: 1px;
  --max-width: 1100px;
  font-size: 16px;
}

* { box-sizing: border-box; }

/* Reserves scrollbar space consistently, so a fixed-position element (like
   the nav bar, whose width is based on the raw viewport) never ends up a
   few pixels wider than normal-flow content (whose width is based on the
   document, i.e. viewport minus scrollbar) on systems where the browser's
   scrollbar takes up real layout space instead of overlaying the page. */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  color: var(--c-text);
  background: var(--c-bg);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2 { font-weight: 700; margin: 0 0 16px; }
p, blockquote, ul, ol { margin: 0 0 16px; }
p:last-child, blockquote:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

/* ---------- Navigation ----------
   Transparent/light by default (floats over the hero, matching the live
   site's "ghost nav"), swapping to a solid white bar with dark text once
   scrolled past the hero (toggled by the small script in partials.py). */
.nav-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: var(--nav-border) solid transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
.nav-bar.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: #e5e5e5;
}
/* Deliberately NOT constrained to --max-width: the logo and hamburger sit a
   fixed distance from the true viewport edge on every screen size, matching
   the live site, rather than being centered with the rest of the content. */
.nav-container {
  position: relative;
  z-index: 101;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}
/* On the homepage specifically, line the logo up with the project card's
   left edge (40px there) instead of the site-wide 30px. */
.nav-bar.nav-transparent-always .nav-container { padding-left: 40px; }
.img-logo { height: 21px; width: auto; }
/* The wide "CO3 grafisch ontwerpers" wordmark only fits comfortably next to
   the hamburger button once there's real width to spare; below that the
   compact mark-only logo takes over. */
.img-logo-wide { display: none; }
@media (min-width: 700px) {
  .img-logo-wide { display: block; }
  .img-logo-compact { display: none; }
}

/* Hamburger button: three lines that animate into an X when open. */
.nav-toggle {
  width: 32px; height: 22px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-bar.is-scrolled .nav-toggle span { background: var(--c-text); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
.nav-toggle.is-open span { background: #fff; }

/* Full-screen menu overlay */
.nav-menu-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: linear-gradient(160deg, var(--c-blue) 0%, var(--c-blue-dark) 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .4s ease, visibility 0s linear .4s;
}
.nav-menu-overlay.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform .4s ease, visibility 0s linear 0s;
}
.nav-menu-links { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.nav-menu-link {
  font-size: 32px;
  font-weight: 600;
  color: #fff;
}
.nav-menu-link.is-active { color: #4da3ff; }
.nav-menu-contact {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  padding: 12px 40px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
}

/* ---------- Home: stacking reveal panels ----------
   Each panel is `position: sticky; top: 0` inside the normal document flow.
   As you scroll, a panel sticks to the viewport top for the duration of its
   own height, then the next panel (later in DOM order, so it paints on top)
   scrolls up and visually covers it -- the "wipe away, next one underneath"
   effect. No JS needed; this replaces the original site's Webflow-proprietary
   scroll-linked interaction with a plain, robust CSS-only equivalent. */
.reveal-stack { position: relative; }
.reveal-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.hero-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--c-blue) 0%, var(--c-blue-dark) 100%);
  color: #fff;
  text-align: center;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}
.hero-panel-content { position: relative; z-index: 1; padding: 0 24px; }
.hero-logo {
  width: 220px;
  margin: 0 auto;
}
.hero-tagline { max-width: 560px; margin: 16px auto 0; font-size: 17px; font-weight: 500; line-height: 1.5; }
.scroll-hint {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.hero-contact-btn {
  position: absolute;
  right: 30px; bottom: 32px;
  z-index: 1;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  padding: 10px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}
.scroll-hint span {
  display: block;
  width: 22px; height: 34px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 12px;
}
.scroll-hint span::before {
  content: "";
  display: block;
  width: 3px; height: 8px;
  margin: 6px auto 0;
  background: rgba(255,255,255,.9);
  border-radius: 2px;
  animation: scroll-wheel-roll 1.6s ease-in-out infinite;
}
@keyframes scroll-wheel-roll {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  71%  { transform: translateY(0);    opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* Every project's image is a direct child of the one shared .reveal-stack,
   same as the hero panel (via .reveal-panel: sticky, top:0, 100vh). This
   matters: a sticky element only lets go once scrolling passes the bottom
   of ITS OWN containing block, so giving each project its own separate,
   tightly-sized wrapper meant an image was always forced to release ~100vh
   too early -- right as the NEXT image needed to wipe up and cover it,
   breaking the "background stays frozen while the next image slides over
   it" effect. Sharing one long ancestor lets every image stay pinned for as
   long as needed; it only ever becomes invisible once the next (higher
   z-index) image also locks in and fully covers it -- exactly the desired
   handoff, and never actually released "too late" in any way visitors can
   perceive, since paint order (z-index) already hides it by then. */
.home-project-image {
  display: block;
  background-size: cover;
  background-position: center;
  color: #fff;
}

/* The info card is ALSO sticky and a direct sibling of the image, pinned
   near the top once it scrolls into place. It rides the same "shared
   ancestor stays pinned" mechanism as the image, so once it locks at its
   top offset it simply holds there -- for real reading time -- until the
   next project's image wipes up and covers it. The height below controls
   how long that hold lasts: more spacer, more reading time before the next
   reveal takes over. */
.project-panel-card {
  position: sticky;
  top: 96px;
  display: block;
  width: 320px;
  margin: 0 0 0 24px;
  background: rgba(255,255,255,.9);
  color: var(--c-text);
  padding: 24px 28px;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 20px 45px rgba(0,0,0,.25);
}
.project-hold-spacer {
  height: 90vh;
  pointer-events: none;
}
.project-panel-card h3 { font-size: 20px; font-weight: 600; letter-spacing: .3px; line-height: 1.25; margin: 0 0 6px; }
.project-panel-subtitle { font-size: 14px; color: #8a8a8a; letter-spacing: .3px; margin: 0 0 14px; }
.project-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .8px;
  color: var(--c-text);
}
.project-panel-link svg { width: 18px; height: 10px; }

@media (max-width: 480px) {
  .project-panel-card { width: 205px; padding: 14px 16px; margin-left: 16px; top: 72px; }
  .project-panel-card h3 { font-size: 14px; }
  .project-panel-subtitle { font-size: 11px; margin-bottom: 8px; }
  .project-panel-link { font-size: 10px; }
  .project-panel-link svg { width: 13px; height: 8px; }
}

@media (min-width: 700px) {
  .hero-logo { width: 560px; }
  .hero-tagline { font-size: 20px; }
  .project-panel-card { margin-left: 40px; top: 120px; }
}

/* ---------- Portfolio overview ----------
   No hero image on this page (unlike project pages), so the nav needs to be
   solid/dark-icon from the very first pixel, or a white hamburger would sit
   on a near-white background and vanish. */
.nav-bar.nav-solid-always {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: #e5e5e5;
}
.nav-bar.nav-solid-always .nav-toggle span { background: var(--c-text); }

.portfolio-page {
  background: #f2f2f4;
  min-height: 100vh;
  padding-top: calc(var(--nav-height) + var(--nav-border));
  padding-bottom: 64px;
}
.portfolio-intro {
  text-align: center;
  padding: 40px 24px 32px;
}
.portfolio-eyebrow {
  color: var(--c-blue);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.portfolio-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
}
.portfolio-filter {
  background: none;
  border: none;
  padding: 0 0 4px;
  font-size: 15px;
  color: var(--c-muted);
  cursor: pointer;
  font-family: inherit;
}
/* On narrow phones the six category labels don't fit on one line at the
   default size/spacing (they wrap onto a lopsided second line). Tightening
   the gap, font-size and side padding just enough keeps them on one row,
   matching the original site. */
@media (max-width: 480px) {
  .portfolio-intro { padding-left: 12px; padding-right: 12px; }
  .portfolio-filters { gap: 10px; }
  .portfolio-filter { font-size: 13px; }
}
.portfolio-filter.is-active {
  color: var(--c-blue);
  border-bottom: 2px solid var(--c-blue);
}
.portfolio-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 8px 24px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 24px;
}
@media (min-width: 640px) {
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .portfolio-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.portfolio-card { display: block; text-align: center; }
.portfolio-card[hidden] { display: none; }
.portfolio-card-image-frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: #e5e5e5;
  margin-bottom: 16px;
}
.portfolio-card-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .4s ease;
}
.portfolio-card:hover .portfolio-card-image { transform: scale(1.08); }
.portfolio-card-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--c-text);
}
.portfolio-card-subtitle {
  font-size: 14px;
  color: var(--c-muted);
  margin-top: 4px;
}

/* ---------- Project pages ---------- */
/* Light gray band behind the hero photo + meta/body/hashtags, ending right
   after the hashtags. Padding (not the hero's own margin) creates the nav
   clearance, so the band's top edge is exact rather than relying on margin
   collapsing between this wrapper and its first child. */
.project-top-band {
  background: #f2f2f4;
  padding-top: calc(var(--nav-height) + var(--nav-border) - 1px);
}
/* Filter/title/subtitle/opdrachtgever sit above the hero photo now, matched
   to the same (narrower) column width as the running text below the hero --
   the hero photo itself stays wider, at --max-width. */
.project-meta {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 24px;
}
/* Two columns once there's room: title+subtitle on the left (~2/3), the
   opdrachtgever info starting around the 2/3 mark on the right, both
   top-aligned so their first lines run level with each other. Stacks on
   narrow screens, where a second column would get too cramped. */
.project-meta-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) {
  .project-meta-columns { grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
}
.project-hero {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 8px 24px 0;
}
.project-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Running text sits centered under the hero photo, in a narrower column so
   centered paragraphs still read comfortably. */
.project-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  text-align: left;
}

.project-category {
  color: var(--c-blue);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.project-meta h1, .project-client-name { font-size: 15px; font-weight: 700; line-height: 1.4; }
.project-meta h1 { margin: 0 0 4px; }
.project-client-name { display: block; color: var(--c-text); }
.project-subtitle { color: var(--c-muted); font-size: 15px; line-height: 1.4; margin: 0; }
.project-client { margin-top: 0; font-size: 14px; }
.meta-label { display: block; color: var(--c-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.project-link { margin-top: 16px; font-size: 14px; }
.project-link a { color: var(--c-blue); text-decoration: underline; }
.project-link-plain { color: var(--c-muted); font-style: italic; }

.project-body p { font-size: 16px; }
.project-image { margin: 24px auto; }
.image-caption { font-size: 13px; color: var(--c-muted); margin-top: 8px; }
.project-hashtags { font-size: 13px; font-weight: 600; color: var(--c-text); margin-top: 56px; line-height: 1.8; }

/* ---------- Meer werk ---------- */
.meer-werk-section {
  background: #fff;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 64px;
  border-top: 1px solid #eee;
  padding-top: 48px;
  text-align: center;
}
.meer-werk-heading { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-muted); margin-bottom: 24px; }
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}
.teaser-card { display: block; }
.teaser-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 10px; background: #f2f2f2; }
.teaser-category { color: var(--c-blue); font-weight: 600; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.teaser-title { font-weight: 700; font-size: 14px; }
.zie-al-het-werk {
  display: table;
  margin: 0 auto;
  border: 2px solid rgba(34, 34, 34, .55);
  background: transparent;
  color: rgba(34, 34, 34, .75);
  padding: 10px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}

/* ---------- Opdrachtgevers ---------- */
.opdrachtgevers-section {
  background: #f2f2f4;
}
.opdrachtgevers-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.opdrachtgevers-heading { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-muted); margin-bottom: 16px; text-align: center; }
.opdrachtgevers-list { font-size: 13px; color: var(--c-muted); line-height: 1.9; }

/* ---------- Contact ---------- */
.contact-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 80px;
}
.contact-section h2 { font-size: 20px; margin-bottom: 20px; }
.contact-fallback { font-size: 15px; }
.contact-fallback a { color: var(--c-blue); text-decoration: underline; }

/* ---------- Contact page ---------- */
.contact-hero {
  height: 280px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-hero h1 { color: #fff; font-size: 34px; margin: 0; }
.contact-team-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 24px 64px;
  text-align: center;
}
.contact-team-eyebrow {
  color: var(--c-blue);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.contact-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (min-width: 700px) {
  .contact-team-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.contact-person h3 { font-size: 15px; margin: 0 0 8px; }
.contact-person-link { display: block; font-size: 14px; color: var(--c-muted); line-height: 1.6; margin-bottom: 8px; }
.contact-person-address { font-size: 14px; color: var(--c-muted); line-height: 1.6; }
.contact-cta-btn {
  display: table;
  margin: 0 auto;
  background: var(--c-text);
  color: #fff;
  padding: 12px 28px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 15px;
}

/* ---------- Footer ---------- */
.site-footer { background: #fafafa; border-top: 1px solid #eee; }
.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 24px;
  font-size: 13px;
  color: #999;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-container a { color: #999; }