/* 07_pitch: experimental pitch build, NOT Questum house style. Questum's web system: 06_production-context/web/ */
/* Questum web motion kit — rebuilt from questumtraining.com (theme "questum"), 2026-09-30.
   Values are theirs; the code is a clean rewrite (no jQuery). Pair with questum-motion.js.
   Font: Rules is commercial (Blaze Type). Use a licensed copy or the Inter fallback below. */

:root {
  --black: #000; --black2: #111; --black3: #2B2B2B;
  --black-80: rgba(0,0,0,.8); --black-60: rgba(0,0,0,.6); --black-20: rgba(0,0,0,.2); --black-10: rgba(0,0,0,.1);
  --white: #fff; --white-80: rgba(255,255,255,.8); --white-60: rgba(255,255,255,.6); --white-20: rgba(255,255,255,.2);
  --grey-light: #F2F2F2;
  --purple2: #54479C; --purple3: #7166C6; --purple4: #8F84DA; --purple5: #ADA2ED; --purple7: #BFBAF4;
  --ease-out-expo: cubic-bezier(.19,1,.22,1);
  --dur-micro: .2s; --dur-fill: .8s; --dur-reveal: 1s;
  --font: "Rules", "Inter", sans-serif;
  --gutter: 80px;
}
@media (max-width:1400px){ :root{ --gutter: 5%; } }
@media (max-width:1199px){ :root{ --gutter: 4%; } }
@media (max-width:1023px){ :root{ --gutter: 30px; } }
@media (max-width:639px) { :root{ --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p { margin: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body { font-family: var(--font); line-height: 1.5; color: var(--black); background: #fff; -webkit-font-smoothing: antialiased; }
.container { width: 100%; max-width: 1720px; margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: 120px; }
.bg-black { background: var(--black); color: #fff; }  .bg-grey { background: var(--grey-light); }

/* Type scale */
.title-64  { font-size:64px;  font-weight:500; line-height:1.08; letter-spacing:-.016em; }
.title-48  { font-size:48px;  font-weight:500; line-height:1.28; letter-spacing:-.015em; }
.text-20   { font-size:20px; line-height:1.6; letter-spacing:-.01em; }
@media (max-width:1400px){  .title-64{font-size:58px} .title-48{font-size:44px} }
@media (max-width:1199px){  .title-64{font-size:54px} .title-48{font-size:40px}   .text-20{font-size:18px} }

/* phones (2026-10-04, pitch fork; Fable + Sol, Apple's iPhone-page steps): one scale per level, on whole-pixel line boxes.
   Display (h1) 48/52, every section headline 40/44 (title-64/48/40 alike), body 17/25. The weight stays 500 (the font is
   400–500), so distinctness comes from size, the copy's 60% tone and a 32px headline → copy gap (pitch.css). */
@media (max-width:639px) {
  :root { --t-h1: 48px; --t-h1-lh: 52px; --t-h2: 40px; --t-h2-lh: 44px; }
  .title-64, .title-48{ font-size: var(--t-h2); line-height: var(--t-h2-lh); letter-spacing: -.02em; }
  .text-20{ font-size: 17px; line-height: 25px; letter-spacing: -.012em; }
  .btn { line-height: 22px; }   /* a 54px button on whole pixels */
}

/* Section label with the brand-stroke ornament (10x20, a \ slash like the brand stroke) */
.section-label { display:flex; align-items:center; gap:16px; font-size:20px; line-height:1.7; font-weight:500; color: var(--purple2); margin-bottom:16px; }
.bg-black .section-label{ color: var(--purple5); }
.section-label::before, .section-label.has-after::after { content:""; width:10px; height:20px; flex:none;
  background: linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)); }
@media (max-width:1199px){ .section-label{font-size:18px} } @media (max-width:639px){ .section-label{font-size:16px;line-height:24px} }

/* Title reveal: chars rise from 140% below, 1.2s expo, 30 ms stagger per word */
.animated-title { opacity:0; }
.animated-title.in-view { opacity:1; }
/* Computed on their site: animated display titles run tighter than the static scale */
.animated-title.title-64, .animated-title.title-48 { line-height:1.0; }
@media (max-width:639px) {  .animated-title.title-64, .animated-title.title-48{ line-height: var(--t-h2-lh); } }   /* phones: the scale's own line boxes */
.animated-title .word { display:inline-block; overflow:hidden; padding:.12em .02em .11em; margin:-.12em -.02em 0; white-space: nowrap; }   /* headroom for Ž, Ū carons; baseline unchanged */
/* Each word rises as one piece (.wi, questum-motion.js): same 0.9s expo and 30ms word stagger as their site, but the letters
   of a word never move independently, and the layer is kept (will-change) so the word does not re-rasterise and snap
   by a sub-pixel when it lands. */
.animated-title .wi { display:inline-block; transform:translate3d(0,140%,0); will-change: transform; transition: transform .9s var(--ease-out-expo); transition-delay: calc(30ms * var(--word-index)); }   /* continuous motion, with no quantised one-pixel jumps */
.animated-title.in-view .wi { transform:translate3d(0,0,0); }

/* Block reveals */
.fade-up, .fade-up-later, .fade-up-late { opacity:0; transform:translate3d(0,20px,0); will-change: transform, opacity; transition: opacity .8s cubic-bezier(.33, 0, .15, 1), transform var(--dur-reveal) var(--ease-out-expo); }   /* opacity on the page's arrival curve (Fable rhythm pass) */
.fade-up-later { transition-delay:.2s; } .fade-up-late { transition-delay:.4s; }
.in-view.fade-up, .in-view.fade-up-later, .in-view.fade-up-late { opacity:1; transform:translate3d(0,0,0); }   /* keeps its layer: no landing snap */

/* Buttons: pill with a rising arch fill on hover */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font: 400 16px/1.4 var(--font); letter-spacing:.01em;
  padding:15px 32px; border-radius:30px; border:1px solid var(--black-20); color:var(--black); background:transparent;
  position:relative; isolation:isolate; cursor:pointer; text-decoration:none; transition: color var(--dur-micro), border-color var(--dur-micro); }
/* A stationary clipped surface owns the rounded edge; only the arch inside it moves. The link's focus outline stays outside. */
.btn:hover { color:#fff; border-color:var(--black); }
.bg-black .btn:not(.btn--white):not(.btn--black) { color:#fff; border-color:var(--white-20); }
.bg-black .btn:not(.btn--white):not(.btn--black):hover { color:var(--black); border-color:#fff; }
@media (prefers-reduced-motion: reduce){ .animated-title, .animated-title .wi, .fade-up, .fade-up-later, .fade-up-late{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* Header: transparent over the hero, white when scrolled, hides on scroll-down */

/* Radii and cards */