/* 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; }
.section--compact { padding-block: 64px; }
.bg-black { background: var(--black); color: #fff; } .bg-black2 { background: var(--black2); color: #fff; } .bg-grey { background: var(--grey-light); }

/* Type scale */
.title-100 { font-size:100px; font-weight:500; line-height:1; letter-spacing:-.025em; }
.title-88  { font-size:88px;  font-weight:500; line-height:1.1; letter-spacing:-.025em; }
.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; }
.title-40  { font-size:40px;  font-weight:500; line-height:1.4; letter-spacing:-.015em; }
.title-32  { font-size:32px;  font-weight:500; line-height:1.4; letter-spacing:-.015em; }
.text-20   { font-size:20px; line-height:1.6; letter-spacing:-.01em; }
.text-16   { font-size:16px; line-height:1.7; letter-spacing:.01em; color: var(--black-80); }
.bg-black .text-16, .bg-black2 .text-16 { color: var(--white-80); }
.text-14   { font-size:14px; line-height:1.7; letter-spacing:.014em; }
@media (max-width:1400px){ .title-100,.title-88{font-size:80px} .title-64{font-size:58px} .title-48{font-size:44px} }
@media (max-width:1199px){ .title-100,.title-88{font-size:64px} .title-64{font-size:54px} .title-48{font-size:40px} .title-40{font-size:36px} .title-32{font-size:28px} .text-20{font-size:18px} }
@media (max-width:1023px){ .title-88{font-size:58px} }
/* 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-100, .title-88 { font-size: var(--t-h1); line-height: var(--t-h1-lh); letter-spacing: -.025em; }
  .title-64, .title-48, .title-40 { font-size: var(--t-h2); line-height: var(--t-h2-lh); letter-spacing: -.02em; }
  .title-32 { font-size: 24px; line-height: 30px; }
  .text-20, .text-16 { font-size: 17px; line-height: 25px; letter-spacing: -.012em; }
  .text-14 { font-size: 15px; line-height: 20px; }
  .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, .bg-black2 .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-88, .animated-title.title-100 { line-height:.9; }
.animated-title.title-64, .animated-title.title-48 { line-height:1.0; }
.animated-title.title-40 { line-height: 1.1; }
@media (max-width:639px) { .animated-title.title-88, .animated-title.title-100 { line-height: var(--t-h1-lh); } .animated-title.title-64, .animated-title.title-48, .animated-title.title-40 { 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; }
.fade-in { opacity:0; transition: opacity var(--dur-reveal) ease; } .fade-in-later { opacity:0; transition: opacity var(--dur-reveal) .3s ease; }
.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 */
.in-view.fade-in, .in-view.fade-in-later { opacity:1; }

/* 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-surface { position:absolute; inset:0; border-radius:inherit; overflow:hidden; transform:translate3d(0,0,0); z-index:-1; pointer-events:none; }
.btn-surface::before { content:""; position:absolute; left:-4px; top:calc(100% + 1px); width:calc(100% + 8px); padding-top:130%;
  border-radius:100rem 100rem 0 0; background:var(--black); transform:translate3d(0,0,0); will-change:transform; transition: transform var(--dur-fill) var(--ease-out-expo); }
.btn:hover .btn-surface::before, .btn:focus-visible .btn-surface::before { transform:translate3d(0,calc(-50% - 2px),0); }
.btn:hover { color:#fff; border-color:var(--black); }
.btn--black { background:var(--black); color:#fff; border-color:var(--black); } .btn--black .btn-surface::before { background:#fff; } .btn--black:hover { color:var(--black); }
.btn--white { background:#fff; color:var(--black); border-color:#fff; } .btn--white:hover, .btn--white:focus-visible { color:#fff; border-color:#fff; }   /* focus brings the same black fill as hover, so the same white label */
.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) .btn-surface::before { background:#fff; }
.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, .fade-in, .fade-in-later { opacity:1 !important; transform:none !important; transition:none !important; } .btn-surface::before{ transition:none; } }

/* Header: transparent over the hero, white when scrolled, hides on scroll-down */
.site-header { position:fixed; inset:0 0 auto 0; z-index:500; height:80px; transition: background .2s ease-in-out, transform .2s ease-in-out; color:#fff; }
.site-header.is-scrolled { background:#fff; color:var(--black); }
.site-header.is-up { transform:translateY(-100%); }

/* Radii and cards */
.img-feature { border-radius:32px; overflow:hidden; } .card { border-radius:24px; padding:40px; background:#fff; } .img-card { border-radius:16px; overflow:hidden; }