@import url('tokens.css');
@import url('colors_and_type.css');

/* Prototype-level resets so each homepage renders fullbleed inside DCArtboard */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
p { max-width: none; margin: 0; }

::selection { background: #111; color: #fff; }

/* ============================================================
   Secondary nav drawer (About hover-menu) — shared across pages.
   Drawer overlays the content below the main nav (does NOT push
   content). Pages must locally define --paper / --ink / --line.
   ============================================================ */
.nav-drawer {
  position: fixed; top: 68px; left: 0; right: 0;
  z-index: 75;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid transparent;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height .4s cubic-bezier(.2,.8,.2,1),
    opacity .28s ease,
    border-color .25s ease;
}
.nav-drawer-inner {
  max-width: 1600px; margin: 0 auto;
  padding: 14px 32px;
  display: flex; align-items: center;
  gap: 40px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.nav-drawer a {
  font-size: 14px; font-weight: 400;
  color: var(--ink); text-decoration: none;
  padding: 6px 0;
  position: relative;
  transition: color .2s;
}
.nav-drawer a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav-drawer a:hover::after { transform: scaleX(1); }
.nav-drawer.is-open {
  max-height: 100px;
  opacity: 1;
  border-bottom-color: var(--line);
}
/* Dark-nav variant — drawer adopts dark surface when the nav is dark.
   The .is-dark class is applied dynamically by assets/js/about-drawer.js,
   which reads the nav's computed background so it works regardless of
   whether the page uses .nav.is-dark or .nav:not(.is-on-paper). */
.nav-drawer.is-dark {
  background: #0a0a0a;
  color: var(--paper);
}
.nav-drawer.is-dark.is-open { border-bottom-color: rgba(255,255,255,.12); }
.nav-drawer.is-dark a { color: var(--paper); }
@media (max-width: 700px) {
  .nav-drawer-inner { padding: 12px 20px; gap: 18px; justify-content: flex-start; }
  .nav-drawer.is-open { max-height: 200px; }
}

/* Offset section anchors so they land just below the main nav.
   (Smooth-scroll behavior is requested explicitly by the drawer JS via
   scrollIntoView({ behavior: 'smooth' }); a global `html { scroll-behavior: smooth }`
   conflicts with Lenis-driven smooth scrolling on the home page.) */
#our-approach, #our-origins, #our-people {
  scroll-margin-top: 68px;
}

/* =====================================================================
   Page-loading progress bar
   Thin top-of-viewport bar that sweeps L→R while body has .is-loading.
   currentColor picks up the page's ink shade, so it lands dark on
   light backgrounds and light on dark.
   ===================================================================== */
.page-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s ease;
}
body.is-loading .page-progress { opacity: 1; }
.page-progress::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 30%;
  background: currentColor;
  animation: page-progress-sweep 1.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes page-progress-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(433%); } /* 100% / 30% × 100% to clear right edge */
}