/* coglogic — shared site styles.
   Tokens: canvas #0b0a08 · ink #f3efe6 · muted #c8c2b6 · faint #6f6a60 · amber #e6b45c
   Hairline: rgba(243,239,230,0.08–0.12). CSS only, no JavaScript.
   One-off values (per-section padding, unique gradients, size overrides) stay
   inline in the pages; this file holds everything the pages share. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0b0a08;
  color: #f3efe6;
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(230,180,92,0.28); color: #fff8ec; }

/* ---- keyframes ---- */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift {
  0%   { transform: translate(-3%, 2%) scale(1.08); }
  50%  { transform: translate(3%, -2%) scale(1.14); }
  100% { transform: translate(-3%, 2%) scale(1.08); }
}
@keyframes breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }
@keyframes breathe-low { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
@keyframes growline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- page scaffold ---- */
.page { position: relative; min-height: 100vh; }
.page--column { display: flex; flex-direction: column; }
.page--column .footer { margin-top: auto; }
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/></filter><rect width=%22200%22 height=%22200%22 filter=%22url(%23n)%22/></svg>');
}
.section { position: relative; z-index: 2; }
.section--rule { border-top: 1px solid rgba(243,239,230,0.08); }
.section--clip { overflow: hidden; }
.wrap { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; }
.wrap--narrow { max-width: 1000px; }
.wrap--cols { display: flex; flex-wrap: wrap; gap: 32px clamp(48px, 8vw, 120px); align-items: flex-start; }
.col-label { flex: 1 1 180px; max-width: 260px; }
.col-prose { flex: 3 1 460px; display: flex; flex-direction: column; gap: 26px; }
.glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px;
  padding: 18px clamp(20px, 6vw, 96px);
  background: rgba(11,10,8,0.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(243,239,230,0.08);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #f3efe6; }
.brand-dot { width: 9px; height: 9px; background: #e6b45c; border-radius: 2px; box-shadow: 0 0 14px rgba(230,180,92,0.7); }
.brand-name { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.nav-links {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px);
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.nav-links a { color: #c8c2b6; text-decoration: none; transition: color 0.3s; }
.nav-links a:hover { color: #f3efe6; }
.nav-links a[aria-current="page"] { color: #e6b45c; transition: none; }
.nav-links a[aria-current="page"]:hover { color: #e6b45c; }

/* ---- footer ---- */
.footer {
  position: relative; z-index: 2;
  padding: 46px clamp(24px, 6vw, 96px);
  border-top: 1px solid rgba(243,239,230,0.08);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
}
.footer .brand-dot { width: 8px; height: 8px; box-shadow: none; }
.footer .brand-name { font-size: 15px; letter-spacing: -0.01em; }
.footer-meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #6f6a60; }

/* ---- eyebrows & kickers ---- */
.eyebrow {
  display: flex; align-items: baseline; gap: 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #6f6a60;
  animation: fade both linear; animation-timeline: view(); animation-range: entry 0% cover 22%;
}
.eyebrow--head { margin-bottom: 56px; }
.eyebrow-mark { color: #e6b45c; }
.eyebrow-line {
  width: 60px; height: 1px; background: rgba(230,180,92,0.5); transform-origin: left;
  animation: growline both linear; animation-timeline: view(); animation-range: entry 0% cover 25%;
}
.eyebrow-title { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; margin: 0; }
.kicker {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: #e6b45c;
  margin-bottom: 34px; opacity: 0; animation: fade 1s ease 0.1s forwards;
}
.scroll-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #6f6a60;
}

/* ---- type ---- */
.hero-h1 { font-size: clamp(38px, 6.4vw, 88px); line-height: 1.04; letter-spacing: -0.032em; font-weight: 500; margin: 0; }
.hero-sub { font-size: clamp(18px, 2vw, 23px); line-height: 1.55; color: #c8c2b6; margin: 40px 0 0; font-weight: 400; }
.lead { font-size: clamp(24px, 3vw, 38px); line-height: 1.24; letter-spacing: -0.015em; color: #f3efe6; margin: 0; font-weight: 500; }
.body { font-size: 18px; line-height: 1.62; color: #c8c2b6; margin: 0; }
.body--tall { line-height: 1.64; }
.gold { display: block; margin-top: 0.1em; font-family: 'Newsreader', serif; font-style: italic; font-weight: 300; color: #e6b45c; }

/* ---- card grids ---- */
.cells { gap: 1px; background: rgba(243,239,230,0.1); border: 1px solid rgba(243,239,230,0.1); }
.cells--row { display: flex; flex-wrap: wrap; }
.cells--col { display: flex; flex-direction: column; }
.cells--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.cell { background: #0b0a08; }
.cell--pillar { flex: 1 1 300px; padding: 42px 34px; display: flex; flex-direction: column; gap: 16px; }
.cell--feature { padding: 44px 34px; display: flex; flex-direction: column; gap: 16px; }
.cell--step { padding: 30px 32px; display: flex; gap: 24px; align-items: baseline; }
.cell-tag { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: #e6b45c; margin: 0; }
.cell-text { font-size: 17px; line-height: 1.55; color: #c8c2b6; margin: 0; }
.cell-text--roomy { line-height: 1.6; }

/* ---- numbered items ---- */
.item { display: flex; gap: 22px; align-items: baseline; }
.item-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.1em; color: #e6b45c; flex: none; }
.item-title { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 10px; }
.item-text { font-size: 17px; line-height: 1.62; color: #c8c2b6; margin: 0; }
.step-title { font-size: 20px; font-weight: 500; margin: 0 0 8px; }

/* ---- buttons & links ---- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; text-transform: uppercase; text-decoration: none;
  border-radius: 2px;
}
.btn--solid { letter-spacing: 0.14em; color: #0b0a08; background: #e6b45c; padding: 15px 26px; transition: transform 0.3s, box-shadow 0.3s; }
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(230,180,92,0.25); }
.btn--ghost { letter-spacing: 0.16em; color: #f3efe6; border: 1px solid rgba(243,239,230,0.25); padding: 16px 30px; transition: border-color 0.3s, background 0.3s; }
.btn--ghost:hover { border-color: rgba(230,180,92,0.8); background: rgba(230,180,92,0.06); }
.btn-arrow { font-size: 15px; }
.mail {
  display: inline-flex; align-items: baseline; gap: 14px; align-self: flex-start;
  font-family: 'Schibsted Grotesk', sans-serif; font-size: clamp(28px, 4.6vw, 52px); font-weight: 500; letter-spacing: -0.02em;
  color: #f3efe6; text-decoration: none; border-bottom: 1px solid rgba(230,180,92,0.4); padding-bottom: 8px;
  transition: color 0.3s, border-color 0.3s;
}
.mail:hover { color: #e6b45c; border-color: rgba(230,180,92,1); }
.mail-arrow { font-family: 'JetBrains Mono', monospace; font-size: 15px; letter-spacing: 0.1em; color: #e6b45c; }

/* ---- scroll-driven reveals ---- */
.rv { animation: rise both linear; animation-timeline: view(); animation-range: entry 0% cover 34%; }
.fv { animation: fade both linear; animation-timeline: view(); animation-range: entry 0% cover 22%; }
.r30 { animation-range: entry 0% cover 30%; }
.r32 { animation-range: entry 0% cover 32%; }
.r36 { animation-range: entry 0% cover 36%; }
.r40 { animation-range: entry 0% cover 40%; }
.r42 { animation-range: entry 0% cover 42%; }

/* ---- load-in reveals ---- */
.in-fade { opacity: 0; animation: fade 1s ease 0.1s forwards; }
.in-rise { opacity: 0; animation: rise 1.1s cubic-bezier(0.16,1,0.3,1) 0.25s forwards; }
.d20 { animation-delay: 0.2s; }
.d45 { animation-delay: 0.45s; }
.d50 { animation-delay: 0.5s; }
.d100 { animation-delay: 1s; }

/* ---- reduced motion: settle everything into its final, visible state ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow { animation: none !important; } /* glows animate via inline style; !important is required to beat it */
  .rv, .fv, .eyebrow, .eyebrow-line { animation: none; }
  .kicker, .scroll-cue, .in-fade, .in-rise {
    animation-duration: 0.001s; animation-delay: 0s;
  }
}