/* ============================================================
   Berghs Advanced Online · "Gravity" v2
   Static internal-audience proposal site.
   Berghs palette + Inter. Single voice. Full-bleed colour.
   Particle field = a low-opacity full-page OVERLAY (speckles over
   every section), vibrant on the hero + the journey arc.
   No framework, no build, no fetch. file:// safe.
   ============================================================ */

:root {
  --blue:   #0F4FFF;
  --red:    #F70000;
  --purple: #7300F0;
  --orange: #FF6E00;
  --green:  #00C947;
  --yellow: #FFC400;

  --ink:    #08080C;
  --ink-2:  #14141B;
  --paper:  #F7F6F2;
  --paper-2:#FFFFFF;
  --white:  #FFFFFF;
  --muted:  rgba(255,255,255,0.72);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --maxw: 1120px;
  --matw: min(96vw, 1500px);
  --pad: clamp(1.25rem, 5vw, 4rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--white);
  line-height: 1.5;
  letter-spacing: -0.011em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
em { font-style: italic; }

/* ===== The gravity field → fixed overlay above the sections, below the wordmark ===== */
#gravity {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  pointer-events: none;
}
main, .footer { position: relative; z-index: 1; }

/* ===== Wordmark (always "Berghs Advanced Online") ===== */
.wordmark {
  position: fixed;
  top: clamp(0.8rem, 2.2vw, 1.4rem);
  left: clamp(0.8rem, 2.2vw, 1.4rem);
  z-index: 30;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--white);
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 0.5em 0.85em;
  border-radius: 999px;
  background: rgba(8, 8, 12, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.wordmark-tag { font-weight: 500; opacity: 0.82; }

/* ===== Sections / full-bleed colour ===== */
.sec {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 12vh, 9rem) 0;
}
.sec.detail { min-height: auto; }
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.sec[data-bg="ink"]    { background: var(--ink);    color: var(--white); }
.sec[data-bg="paper"]  { background: var(--paper);  color: var(--ink); }
.sec[data-bg="blue"]   { background: var(--blue);   color: var(--white); }
.sec[data-bg="purple"] { background: var(--purple); color: var(--white); }
.sec[data-bg="orange"] { background: var(--orange); color: var(--white); }
.sec[data-bg="green"]  { background: var(--green);  color: var(--ink); }

/* ===== Type primitives ===== */
.eyebrow, .kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.82;
  margin-bottom: 1.3rem;
}
.kicker.on-dark { color: var(--white); }
.kicker.mt { margin-top: clamp(2.4rem, 6vh, 4rem); }

.h2 {
  font-size: clamp(1.8rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 22ch;
  margin-bottom: 1.3rem;
}
.h2.on-dark { color: var(--white); }
.h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 0.7rem;
}
.lede {
  max-width: 64ch;
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  opacity: 0.85;
}
.note {
  margin-top: 1.4rem;
  max-width: 66ch;
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  opacity: 0.8;
}
.big-line {
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  max-width: 26ch;
  margin-top: clamp(2rem, 5vh, 3.4rem);
}
.mt { margin-top: clamp(1.6rem, 4vh, 2.6rem); }

/* ===== 1 · HERO ===== */
.hero-h1 {
  font-size: clamp(2.6rem, 8.4vw, 6.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: 1.6rem;
}
.grav-word {
  white-space: nowrap;
  background: linear-gradient(90deg, var(--yellow), var(--orange), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  font-weight: 400;
  max-width: 44ch;
  opacity: 0.92;
}
.scrollcue {
  margin-top: clamp(2.4rem, 8vh, 5rem);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
  animation: bob 2.4s var(--ease-io) infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ===== 2 · NUTSHELL ===== */
.facts { list-style: none; display: grid; gap: clamp(0.6rem, 1.6vh, 1.1rem); margin: 1rem 0; }
.fact {
  display: flex; align-items: baseline; gap: 1.1rem;
  border-top: 1px solid rgba(0,0,0,0.12);
  padding-top: clamp(0.6rem, 1.6vh, 1.1rem);
}
.fact-num {
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  min-width: 1.7em; color: var(--blue);
}
.fact:nth-child(2) .fact-num { color: var(--red); }
.fact:nth-child(3) .fact-num { color: var(--purple); }
.fact:nth-child(4) .fact-num { color: var(--orange); }
.fact:nth-child(5) .fact-num { color: var(--green); }
.fact-lab { font-size: clamp(0.95rem, 1.7vw, 1.18rem); font-weight: 500; opacity: 0.86; }
.nutshell .big-line { color: var(--ink); }

/* ===== Full-width matrices ===== */
.matrix-full {
  width: var(--matw);
  margin: clamp(1.6rem, 4vh, 3rem) auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.matrix {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper-2);
  color: var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(8,8,12,0.12);
  font-size: clamp(0.82rem, 1.15vw, 0.98rem);
}
.matrix thead th {
  background: var(--ink);
  color: var(--white);
  text-align: left;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.9rem 1rem;
  position: sticky;
  top: 0;
  z-index: 4;
}
.matrix tbody td {
  padding: 0.78rem 1rem;
  border-bottom: 1px solid rgba(8,8,12,0.09);
  vertical-align: top;
}
.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix .m-k { font-weight: 700; }
.matrix .m-keep  { color: var(--green);  font-weight: 700; }
.matrix .m-change{ color: var(--purple); font-weight: 700; }
.matrix .m-flag  { background: rgba(115,0,240,0.07); }
.matrix .m-flag .m-k { color: var(--purple); }
.matrix .m-self  { background: rgba(15,79,255,0.08); }
.matrix .m-self .m-k { color: var(--blue); }
/* week-matrix module + week accents */
.matrix .m-m1 { color: var(--blue);   font-weight: 700; }
.matrix .m-m2 { color: var(--purple); font-weight: 700; }
.matrix .m-m3 { color: var(--green);  font-weight: 700; }
.matrix .m-off  { background: rgba(255,196,0,0.13); }
.matrix .m-peak { background: rgba(247,0,0,0.06); }
.matrix .m-peak td:first-child { font-weight: 800; color: var(--red); }
#detail .matrix-weeks { min-width: 900px; }
#faithful .matrix { min-width: 560px; }

/* ===== Colour-section body copy (who / round / phases) ===== */
.who-body { margin-top: clamp(1.4rem, 3.5vh, 2.4rem); max-width: 60ch; font-size: clamp(1.02rem, 1.6vw, 1.22rem); }
.who-body p { margin-bottom: 1rem; }
.who-also { list-style: none; display: grid; gap: 0.7rem; max-width: 64ch; margin-top: 1.4rem; }
.who-also li { font-size: clamp(0.95rem, 1.5vw, 1.1rem); opacity: 0.94; }

/* ===== 6a · THE ARC (particle journey, Launch = crescendo) ===== */
.arc-stage {
  position: relative;
  height: clamp(280px, 44vh, 400px);
  margin: clamp(2rem, 5vh, 3.5rem) 0 clamp(1rem, 3vh, 2rem);
}
.arc-mod {
  position: absolute; bottom: 0;
  display: flex; flex-direction: column; gap: 0.15rem; font-weight: 700;
}
.arc-m1 { left: 3%;  color: var(--blue); }
.arc-m2 { left: 39%; color: var(--purple); }
.arc-m3 { left: 73%; color: var(--green); }
.arc-mlab { font-size: clamp(0.95rem, 1.8vw, 1.25rem); }
.arc-msub { font-size: 0.74rem; font-weight: 500; opacity: 0.72; color: var(--white); }
.arc-node {
  position: absolute;
  display: flex; flex-direction: column; gap: 0.2rem;
  font-weight: 800;
}
.arc-node span { font-size: clamp(1.05rem, 2.3vw, 1.6rem); letter-spacing: -0.02em; }
.arc-node small { font-size: 0.72rem; font-weight: 500; opacity: 0.82; color: var(--white); }
/* Roundtable → a high point (week 10, two-thirds across) */
.arc-round  { left: 60%; top: 27%; color: var(--yellow); }
/* Launch → the crescendo, sits highest and furthest right (week 15) */
.arc-launch { right: 2%; top: 5%; text-align: right; color: var(--orange); }
.arc-note { max-width: 60ch; opacity: 0.85; }

/* ===== 8 · WHAT MAKES IT CURRENT ===== */
.two-beats {
  margin-top: clamp(1.8rem, 4.5vh, 3rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem);
}
.beat p { font-size: clamp(0.98rem, 1.5vw, 1.12rem); opacity: 0.86; max-width: 42ch; }

/* ===== 9 · TWO PHASES ===== */
.phase-grid {
  margin-top: clamp(1.8rem, 4.5vh, 3rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 2.6rem);
}
.phase { border-top: 2px solid rgba(255,255,255,0.45); padding-top: 1.1rem; }
.phase-tag { display: inline-block; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.7rem; }
.phase p { font-size: clamp(0.98rem, 1.5vw, 1.14rem); opacity: 0.95; max-width: 46ch; }
.phase-hybrid {
  margin-top: clamp(1.4rem, 3.5vh, 2.4rem);
  max-width: 72ch;
  font-size: clamp(0.98rem, 1.5vw, 1.14rem);
  opacity: 0.96;
  border-top: 2px solid rgba(255,255,255,0.45);
  padding-top: 1.1rem;
}
.phase-hybrid .city { white-space: nowrap; font-weight: 700; }

/* ===== Non-teaching weeks list ===== */
.weeks-list { list-style: none; display: grid; gap: 0.8rem; max-width: 70ch; margin: 1rem 0 0; }
.weeks-list li { padding-left: 1.2rem; position: relative; font-size: clamp(0.96rem, 1.5vw, 1.1rem); }
.weeks-list li::before { content: "→"; position: absolute; left: 0; color: var(--red); font-weight: 700; }

/* ===== 10 · CLOSE ===== */
.close-wrap { text-align: center; }
.close-tag {
  font-size: clamp(1.6rem, 4.4vw, 3.2rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.06;
  max-width: 18ch; margin: 0 auto clamp(2rem, 5vh, 3rem);
}
.cta {
  display: inline-block;
  background: var(--ink); color: var(--white);
  font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.2rem);
  letter-spacing: -0.01em; padding: 1em 2em; border-radius: 999px;
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.cta:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(8,8,12,0.3); }
.cta-note { margin-top: 1.2rem; font-size: 0.9rem; opacity: 0.78; }

/* ===== Footer ===== */
.footer { background: var(--ink); color: var(--muted); text-align: center; padding: 2.6rem var(--pad); font-size: 0.85rem; }
.footer a { color: var(--white); text-decoration: underline; text-underline-offset: 0.2em; }

/* ===== Reveal animation ===== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--rd, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 820px) {
  .two-beats, .phase-grid { grid-template-columns: 1fr; }
  .arc-m2 { left: 42%; }
  .arc-m3 { left: 70%; }
}
@media (max-width: 560px) {
  .wordmark-tag { display: inline; }
  .arc-stage { height: clamp(300px, 56vh, 380px); }
  .arc-msub, .arc-node small { display: none; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scrollcue { animation: none; }
}