/* ============================================================
   intellig.si — editorial design system
   ------------------------------------------------------------
   1. Tokens        5. Navigation     9. Motion states
   2. Reset         6. Components    10. Responsive
   3. Typography    7. Sections      11. Reduced motion
   4. Layout        8. Detail
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */

:root{
  /* surface */
  --bg:        #0B0B0C;
  --bg-raise:  #101012;
  --fg:        #F2F2EF;
  /* --muted must clear 4.5:1 on --bg for WCAG AA. #6E6E6A only reached
     3.84:1 and is used for real body copy, not decoration. #82827C gives
     5.09:1 on --bg and 4.92:1 on --bg-raise. */
  --muted:     #82827C;
  --rule:      #1F1F1D;
  --rule-soft: #161614;
  --accent:    #D4A24C;

  /* type */
  --display: "Clash Display", "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Switzer", "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* fluid scale — 375px → 1600px */
  --t-display: clamp(2.75rem, 9.5vw, 8.5rem);
  --t-h1:      clamp(2.25rem, 6.5vw, 5.5rem);
  --t-h2:      clamp(1.75rem, 4vw, 3.25rem);
  --t-h3:      clamp(1.15rem, 1.8vw, 1.6rem);
  --t-body:    clamp(1rem, 1.05vw, 1.125rem);
  --t-small:   0.875rem;
  --t-label:   0.6875rem;

  /* space */
  --gutter:  clamp(1.25rem, 4vw, 4rem);
  --section: clamp(5rem, 12vw, 11rem);
  --shell:   1560px;
  --measure: 62ch;

  /* detail */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.6s;
}

/* ------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------ */

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Lenis takes over scrolling; html scroll-behavior must not fight it */
html.lenis,html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-stopped{ overflow:hidden }

img,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

::selection{ background:var(--accent); color:var(--bg) }

/* custom scrollbar */
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:var(--bg) }
::-webkit-scrollbar-thumb{ background:#2A2A27; border-radius:0 }
::-webkit-scrollbar-thumb:hover{ background:#3A3A36 }

/* focus — visible, amber, never removed */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  line-height:0.98;
  letter-spacing:-0.025em;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:var(--t-h1) }
h2{ font-size:var(--t-h2) }
h3{ font-size:var(--t-h3); font-weight:500; letter-spacing:-0.015em; line-height:1.15 }

p{ margin:0; max-width:var(--measure); text-wrap:pretty }

.label{
  font-family:var(--mono);
  font-size:var(--t-label);
  font-weight:400;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
}

/* Visually hidden, still announced. Used where a section's heading is carried
   by layout or a mono label rather than a visible h2, so the document outline
   never jumps a level. */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.label--accent{ color:var(--accent) }

.lede{
  font-size:clamp(1.05rem, 1.5vw, 1.375rem);
  line-height:1.5;
  color:var(--muted);
  max-width:48ch;
}

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }

/* display headline — allowed to run past the grid */
.display{
  font-family:var(--display);
  font-size:var(--t-display);
  font-weight:500;
  line-height:0.9;
  letter-spacing:-0.035em;
  margin:0;
}

.accent{ color:var(--accent) }
.muted{ color:var(--muted) }

/* ------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------ */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* full-bleed escape from the shell */
.bleed{
  width:100vw;
  margin-inline:calc(50% - 50vw);
}

.section{
  padding-block:var(--section);
  border-top:1px solid var(--rule);
}

/* editorial 12-col grid; children opt in with --span */
.grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:var(--gutter);
  align-items:start;
}

/* col-3 exists so a row of four stats fills the same 12 columns the
   three-up row used to. Same grid scale, no new visual language. */
.col-3 { grid-column:span 3 }
.col-4 { grid-column:span 4 }
.col-5 { grid-column:span 5 }
.col-6 { grid-column:span 6 }
.col-7 { grid-column:span 7 }
.col-8 { grid-column:span 8 }
.col-12{ grid-column:span 12 }

/* asymmetric offsets — the deliberate grid break */
.off-1{ grid-column-start:2 }
.off-2{ grid-column-start:3 }
.off-6{ grid-column-start:7 }

.rule{ height:1px; background:var(--rule); border:0; margin:0 }

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:2rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(2.5rem,6vw,5rem);
}

/* ------------------------------------------------------------
   5. NAVIGATION
   ------------------------------------------------------------ */

.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:90;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}

.nav-inner{
  max-width:var(--shell);
  margin-inline:auto;
  padding:1.1rem var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.wordmark{
  font-family:var(--display);
  font-size:1.0625rem;
  font-weight:600;
  letter-spacing:-0.01em;
  display:flex;
  align-items:center;
  gap:.5rem;
}
/* Pyramid mark. A data URI rather than an inline <svg> so the mark has one
   source of truth across all six pages (the 404 included). The two faces are
   what make it read as a pyramid rather than a plain triangle — lit left face
   at full amber, right face held back toward the background. */
.wordmark::before{
  content:"";
  width:13px; height:11px;
  flex-shrink:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M12 1 23.5 19H12Z' fill='%23D4A24C' fill-opacity='.62'/%3E%3Cpath d='M12 1 12 19H.5Z' fill='%23D4A24C'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  display:block;
}

.nav-menu{ display:flex; align-items:center; gap:2.25rem }
.nav-menu a{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .2s var(--ease);
}
.nav-menu a:hover,
.nav-menu a[aria-current]{ color:var(--fg) }

.nav-cta{
  border:1px solid var(--rule);
  padding:.6rem 1.15rem;
  color:var(--fg) !important;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.nav-cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--bg) !important }

.nav-toggle{ display:none; padding:.4rem; border:1px solid var(--rule) }
.nav-toggle span{ display:block; width:18px; height:1px; background:var(--fg); margin:4px 0 }

/* ------------------------------------------------------------
   6. COMPONENTS
   ------------------------------------------------------------ */

/* --- buttons --- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:1.05rem 1.75rem;
  border:1px solid var(--fg);
  color:var(--bg);
  background:var(--fg);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover{ background:transparent; color:var(--fg) }

.btn--ghost{
  background:transparent;
  color:var(--fg);
  border-color:var(--rule);
}
.btn--ghost:hover{ border-color:var(--fg); background:transparent }

.btn__arrow{ transition:transform .3s var(--ease) }
.btn:hover .btn__arrow{ transform:translateX(4px) }

/* --- link with rule underline --- */
.link{
  display:inline-block;
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.link:hover{ border-color:var(--accent); color:var(--accent) }

/* --- phase panels --- */
.phase{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:2.5rem;
  padding:clamp(2rem,3vw,3rem) 0;
  border-top:1px solid var(--rule);
  min-height:clamp(20rem,42vh,28rem);
}
.phase__num{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:0.18em;
  color:var(--accent);
}
.phase__body{ display:flex; flex-direction:column; gap:1rem }
.phase__list{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.85rem }
.phase__list li{
  font-size:var(--t-small);
  color:var(--muted);
  padding-left:1.4rem;
  position:relative;
  line-height:1.5;
}
.phase__list li::before{
  content:"";
  position:absolute;
  left:0; top:.6em;
  width:8px; height:1px;
  background:var(--accent);
}
.phase__list strong{ color:var(--fg); font-weight:500; display:block }

/* --- stat --- */
.stat{ display:flex; flex-direction:column; gap:.5rem; padding-block:2rem; border-top:1px solid var(--rule) }
.stat__value{
  font-family:var(--display);
  font-size:clamp(2.75rem,6vw,5rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-0.035em;
  font-variant-numeric:tabular-nums;
}
.stat__desc{ font-size:var(--t-small); color:var(--muted); max-width:32ch }

/* --- case card --- */
.case{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  padding-top:1.75rem;
  border-top:1px solid var(--rule);
  transition:border-color .35s var(--ease);
  height:100%;   /* fill the grid cell so the top rules line up across a row */
}
/* pin whatever closes the card to its bottom edge, so mixed cards still align */
.case > :last-child{ margin-top:auto }
/* .grid sets align-items:start, so card columns would size to content and end
   raggedly. Stretch only the columns that actually hold a card. */
.col-4:has(> .case){ align-self:stretch; perspective:1000px }
.case:hover{ border-color:var(--accent) }
.case__tag{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
}
.case__title{ font-size:var(--t-h3) }
.case__desc{ font-size:var(--t-small); color:var(--muted); max-width:40ch }
.case__metric{
  font-family:var(--display);
  font-size:clamp(1.75rem,3vw,2.75rem);
  font-weight:500;
  letter-spacing:-0.03em;
  line-height:1;
  margin-top:auto;
  padding-top:1.5rem;
  font-variant-numeric:tabular-nums;
}
.case__metric small{
  display:block;
  font-family:var(--body);
  font-size:var(--t-small);
  font-weight:400;
  letter-spacing:0;
  color:var(--muted);
  margin-top:.4rem;
}

/* --- marquee --- */
.marquee{
  overflow:hidden;
  padding-block:clamp(1.5rem,3vw,2.5rem);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
  display:flex;
}
.marquee__track{
  display:flex;
  flex-shrink:0;
  align-items:center;
  gap:3.5rem;
  padding-right:3.5rem;
  will-change:transform;
  animation:marquee 38s linear infinite;
}
.marquee__item{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.2vw,2.75rem);
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:3.5rem;
}
.marquee__item::after{
  content:"";
  width:7px; height:7px;
  background:var(--accent);
  flex-shrink:0;
}
@keyframes marquee{ to{ transform:translateX(-100%) } }

/* --- sticky section index --- */
.index-rail{
  position:fixed;
  left:var(--gutter);
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  display:none;
  flex-direction:column;
  gap:1rem;
}
.index-rail a{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:.75rem;
  transition:color .25s var(--ease);
}
.index-rail a::before{
  content:"";
  width:16px; height:1px;
  background:currentColor;
  transition:width .3s var(--ease);
}
.index-rail a:hover,
.index-rail a.is-active{ color:var(--accent) }
.index-rail a.is-active::before{ width:30px }

/* --- custom cursor --- */
.cursor{
  position:fixed;
  top:0; left:0;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--fg);
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  display:none;
  will-change:transform;
}

/* --- grain --- */
.grain{
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* --- forms --- */
.form{ display:grid; gap:1.5rem; max-width:640px }
.field{ display:grid; gap:.6rem }
.field label{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.field input,
.field textarea,
.field select{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule);
  padding:.85rem 0;
  color:var(--fg);
  font-family:var(--body);
  font-size:var(--t-body);
  width:100%;
  transition:border-color .25s var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-bottom-color:var(--accent);
}
.field textarea{ min-height:120px; resize:vertical }
.field input::placeholder,
.field textarea::placeholder{ color:#3A3A36 }

/* --- team --- */
.person{ display:flex; flex-direction:column; gap:1rem; padding-top:1.75rem; border-top:1px solid var(--rule) }
.person__mark{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--rule);
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:0.1em;
  color:var(--accent);
}
.person p{ font-size:var(--t-small); color:var(--muted) }

/* ------------------------------------------------------------
   7. SECTIONS
   ------------------------------------------------------------ */

/* hero */
.hero{
  padding-top:clamp(9rem,18vw,15rem);
  padding-bottom:clamp(4rem,8vw,7rem);
  min-height:clamp(30rem,86vh,54rem);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.hero__meta{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  padding-bottom:clamp(2rem,5vw,4rem);
  flex-wrap:wrap;
}
.hero .display{ max-width:15ch }
.hero__foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:3rem;
  flex-wrap:wrap;
  margin-top:clamp(2.5rem,5vw,4.5rem);
}

/* --- hero flow field ---
   Decorative canvas behind the hero copy. Masked toward the bottom so the
   streaks dissolve instead of stopping on a hard line where the hero meets
   the marquee. Empty and invisible when JS is off. */
.hero-stage{ position:relative; isolation:isolate }
.hero-field{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%);
}
.hero-stage > .hero{ position:relative; z-index:1 }

/* --- scroll progress hairline ---
   Injected by animations.js, so it is absent with JS off. */
.progress{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:0 50%;
  z-index:120;
  pointer-events:none;
  will-change:transform;
}

/* pin container for the horizontal phase sequence.
   Track is a flex rail wider than the viewport, so ScrollTrigger
   has real distance to scrub through while the section is pinned. */
.pin-wrap{
  position:relative;
  width:100vw;
  margin-inline:calc(50% - 50vw);
  overflow:hidden;
}
.pin-track{
  display:flex;
  gap:0;
  padding-inline:var(--gutter);
  will-change:transform;
}
.pin-track .phase{
  flex:0 0 clamp(17rem, 46vw, 40rem);
  border-top:0;
  border-left:1px solid var(--rule);
  padding-inline:clamp(1.5rem,3vw,3rem);
}
.pin-track .phase:first-child{ border-left:0; padding-left:0 }
.pin-track .phase:last-child{ padding-right:var(--gutter) }

/* closing */
.closing{ text-align:left }
.closing .display{ max-width:16ch; margin-bottom:clamp(2rem,4vw,3rem) }

/* 404 */
.notfound{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2rem;
}

/* ------------------------------------------------------------
   8. DETAIL
   ------------------------------------------------------------ */

footer{
  padding-block:3.5rem 4.5rem;
  border-top:1px solid var(--rule);
  font-size:var(--t-small);
  color:var(--muted);
}
.foot-inner{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem 3rem;
  justify-content:space-between;
  align-items:center;
}
.foot-links{ display:flex; gap:2rem; flex-wrap:wrap; font-family:var(--mono); font-size:var(--t-label); letter-spacing:0.14em; text-transform:uppercase }
.foot-links a:hover{ color:var(--accent) }

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--accent);
  color:var(--bg);
  padding:.85rem 1.25rem;
  z-index:999;
  font-family:var(--mono);
  font-size:var(--t-label);
}
.skip:focus{ left:var(--gutter); top:1rem }

/* ------------------------------------------------------------
   9. MOTION STATES
   ------------------------------------------------------------ */

/* Elements are hidden ONLY once the inline head script has
   confirmed JS is available. With JS off, nothing is hidden and
   the page renders complete. showAll() in site.js clears these
   again if GSAP or motion support is missing. */

.js .reveal{ opacity:0 }
.js .hero-anim{ opacity:0; transform:translateY(22px) }
.js [data-hero-title],
.js [data-split]{ opacity:0 }

.js.cursor-ready .cursor{ display:block }

/* ------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------ */

/* The rail needs real margin to live in — only show it on wide screens.

   The arithmetic, so this does not get "corrected" back down: the rail is
   ~95px wide anchored at left:var(--gutter), and .shell puts its content at
   exactly the same edge. It is only clear once the centred shell leaves a
   wider margin than the rail itself —
     (vw - 1560) / 2  >  95 (rail) + ~24 (breathing room)
     vw > 1798
   1400px was well below that, so from 1400-1798px the rail was painted
   straight over the hero headline and every section heading beneath it. */
@media (min-width:1800px){
  .index-rail{ display:flex }
}

/* Must stay strictly below the GSAP pin breakpoint in animations.js
   (min-width:1100px). At exactly 1100px both used to match, which pinned
   the section while forcing transform:none — a dead scroll zone. */
@media (max-width:1099.98px){
  .index-rail{ display:none !important }
  .pin-wrap{ overflow:visible }
  .pin-track{ flex-direction:column; padding-inline:var(--gutter); transform:none !important }
  .pin-track .phase{
    flex:1 1 auto;
    border-left:0;
    padding-inline:0;
    border-top:1px solid var(--rule);
    min-height:0;
  }
}

@media (max-width:820px){
  .grid{ grid-template-columns:repeat(6, minmax(0,1fr)) }
  .col-3,.col-4,.col-5,.col-6{ grid-column:span 6 }
  .col-7,.col-8{ grid-column:span 6 }
  .off-1,.off-2,.off-6{ grid-column-start:auto }

  .nav-menu{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:1.5rem;
    padding:1.75rem var(--gutter) 2.25rem;
    background:var(--bg);
    border-bottom:1px solid var(--rule);
    display:none;
  }
  .nav-menu.is-open{ display:flex }
  .nav-toggle{ display:block }

  .hero__foot{ flex-direction:column; align-items:flex-start }
  .cursor{ display:none !important }

  /* With JS off the toggle cannot open the menu, so the primary nav would
     be unreachable on small screens (the footer links were the only way
     through). Show the menu inline and wrapped instead. Scoped to this
     breakpoint because above 820px the menu is already visible. */
  .no-js .nav-toggle{ display:none }
  .no-js .nav-inner{ flex-wrap:wrap; gap:1rem }
  .no-js .nav-menu{
    display:flex;
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    width:100%;
    gap:.85rem 1.5rem;
    padding:0;
    background:none;
    border:0;
  }
}

@media (max-width:520px){
  .section-head{ flex-direction:column; align-items:flex-start; gap:.75rem }
}

/* ------------------------------------------------------------
   11. REDUCED MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .marquee__track{ animation:none; transform:none }
  .hero-field{ display:none }
  .js .reveal,
  .js .hero-anim,
  .js [data-hero-title],
  .js [data-split]{ opacity:1 !important; transform:none !important }
  .cursor{ display:none !important }
}

/* no-JS safety: if the .js class never lands, nothing is hidden */
.no-js .reveal{ opacity:1 }