/* i2platform.com — home page. CSS-driven film: sticky chapters, scroll-driven animations
   (animation-timeline: view()/scroll()) with static fallbacks, no JS motion. Loads after site.css + tokens.css. */
.home main{overflow-x:clip}
.home .wrap{max-width:var(--wrap)}
.tab{font-variant-numeric:tabular-nums}
.rv{opacity:1;transform:none}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
    .rv.d1{animation-range:entry 10% cover 28%}.rv.d2{animation-range:entry 20% cover 34%}.rv.d3{animation-range:entry 30% cover 40%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ── 01 hero: the mark assembles ─────────────────────────────────────────── */
.hero-film{position:relative;min-height:calc(100svh - var(--header-h));display:grid;align-items:center;padding:56px 0 40px;isolation:isolate}
.hero-film::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 50% at 70% 30%,rgba(180,1,1,.07),transparent 60%),
  radial-gradient(circle,rgba(26,26,26,.16) 1px,transparent 1.5px) 0 0/28px 28px;mask-image:linear-gradient(180deg,#000 55%,transparent)}
.hero-film .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero-film h1{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:800}
.hero-film h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero-film .lede{margin-top:26px;max-width:52ch}
.mark-stage{position:relative;aspect-ratio:1;width:min(100%,660px);justify-self:center;display:grid;place-items:center}
.mark-stage::before{content:"";position:absolute;inset:8%;border-radius:50%;background:conic-gradient(from 210deg,rgba(26,26,26,.05),rgba(180,1,1,.10),rgba(26,26,26,.05));filter:blur(18px)}
.hmark{position:relative;width:38%;aspect-ratio:104/132}
.hmark i{position:absolute;left:17.3%;width:30.8%;height:24.2%;border-radius:22%;background:var(--ink);display:block}
.hmark .c1{top:33.3%;animation:cellIn .8s var(--ease-out) .25s both}
.hmark .c2{top:63.6%;animation:cellIn .8s var(--ease-out) .05s both}
.hmark .pt{top:2.3%;left:18.3%;width:28.8%;height:22.7%;border-radius:50%;background:var(--red);animation:ptDrop .9s cubic-bezier(.34,1.56,.64,1) .75s both}
.hmark .two{position:absolute;left:60%;top:28%;width:22%;font-family:var(--f);font-weight:800;font-size:clamp(40px,7.5vw,96px);line-height:1;color:var(--ink);animation:fade .6s ease 1.2s both}
.mark-records{position:absolute;inset:0;pointer-events:none}
.mark-records b{position:absolute;width:6px;height:6px;border-radius:2px;background:var(--ink);opacity:0;animation:recordFly 1.1s var(--ease-out) both}
.mark-records b:nth-child(1){left:8%;top:20%;animation-delay:0s}.mark-records b:nth-child(2){left:88%;top:32%;animation-delay:.06s}
.mark-records b:nth-child(3){left:14%;top:78%;animation-delay:.12s}.mark-records b:nth-child(4){left:84%;top:74%;animation-delay:.18s}
.mark-records b:nth-child(5){left:48%;top:4%;animation-delay:.24s}.mark-records b:nth-child(6){left:4%;top:50%;animation-delay:.3s}
.mark-records b:nth-child(7){left:92%;top:52%;animation-delay:.36s}.mark-records b:nth-child(8){left:52%;top:94%;animation-delay:.42s}
@keyframes cellIn{from{opacity:0;transform:translateY(40px) scale(.7)}to{opacity:1;transform:none}}
@keyframes ptDrop{from{opacity:0;transform:translateY(-60px) scale(.4)}to{opacity:1;transform:none}}
@keyframes pt{to{transform:scale(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes recordFly{0%{opacity:0;transform:scale(1)}30%{opacity:.9}100%{opacity:0;transform:translate(calc(50% - var(--x,0px)),0) scale(.2)}}
.scroll-cue{margin-top:44px;font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.scroll-cue::after{content:"";width:1px;height:28px;background:var(--ink);animation:cue 1.6s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%,100%{transform:scaleY(.3);opacity:.3}50%{transform:scaleY(1);opacity:1}}
@supports (animation-timeline: scroll()){@media (prefers-reduced-motion:no-preference){
  .hero-film .grid{animation:heroOut linear both;animation-timeline:scroll(root);animation-range:0 60vh}
}}
@keyframes heroOut{to{opacity:.2;transform:translateY(-30px)}}

/* ── 02 the record (dark chapter) ────────────────────────────────────────── */
.chapter-dark{background:var(--blackout);color:#fff;--ink:#fff;--ink-2:#D5D3CE;--muted:#8B8B90;--rule:#2A2A2E;--panel:#141416;--panel-2:#1C1C1F}
.record{padding:var(--s-section) 0}
.record .eyebrow{color:#8B8B90}
.record h2{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);max-width:18ch}
.record__figs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.record__fig{border-top:1px solid var(--rule);padding-top:16px}
.record__fig .big{display:block;font-family:var(--m);font-size:var(--t-big);letter-spacing:-.02em;line-height:1}
.record__fig .lab{display:block;margin-top:8px;font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.timeline{margin-top:56px;position:relative;padding-top:26px;view-timeline-name:--tl;view-timeline-axis:block}
.timeline__years{display:flex;justify-content:space-between;font-family:var(--m);font-size:11px;color:var(--muted);letter-spacing:.06em;border-bottom:1px solid var(--rule);padding-bottom:8px}
.track{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:14px;margin-top:14px;font-family:var(--m);font-size:12px;color:var(--ink-2)}
.track .bar{position:relative;height:6px;border-radius:3px;background:#1C1C1F;overflow:visible}
.track .bar i{position:absolute;left:var(--from);right:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#3A3A3D,#CFCDC8);transform-origin:left;transform:scaleX(1)}
.track .bar::after{content:"";position:absolute;right:-5px;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(180,1,1,.18)}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){
  .track .bar i{animation:draw linear both;animation-timeline:--tl;animation-range:entry 30% cover 45%}
  .track .bar::after{animation:fade linear both;animation-timeline:--tl;animation-range:cover 38% cover 50%}
}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.record__p{margin-top:40px;max-width:62ch;color:var(--ink-2);font-size:var(--t-lede);line-height:var(--lh-lede)}

/* ── 03 the stack: raised to every level (signature, sticky) ─────────────── */
.stack{position:relative;height:260vh;view-timeline-name:--stack;view-timeline-axis:block}
.stack__sticky{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));display:grid;align-items:center;overflow:hidden}
.stack__sticky>.wrap{width:100%}
.hero-film>.wrap{width:100%}
.stack__grid{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}
.stack__texts{position:relative;min-height:280px}
.stack__text{position:absolute;inset:0;opacity:0}
.stack__text h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);margin-top:8px}
.stack__text p:last-of-type{margin-top:14px;color:var(--ink-2);max-width:40ch}
.stack__text .link{display:inline-block;margin-top:14px;font-weight:700}
.stack__stage{position:relative;height:62vh;min-height:380px;perspective:1400px;perspective-origin:50% 40%}
.plane{position:absolute;inset:0 auto auto 0;width:100%;transform-style:preserve-3d;transform:translateY(0) rotateX(0)}
.plane .comp{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-plate);padding:22px 24px;min-height:300px}
.stack__point{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(180,1,1,.15);z-index:5}
.stack__caption{position:absolute;bottom:0;left:0}
/* static fallback: fanned stack, all text visible in order */
.stack__text{position:static;opacity:1;margin-bottom:28px}
.plane:nth-of-type(2){transform:translateY(34px) scale(.96)}.plane:nth-of-type(3){transform:translateY(68px) scale(.92)}
.plane:nth-of-type(1){z-index:3}.plane:nth-of-type(2){z-index:2}.plane:nth-of-type(3){z-index:1}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){
  .stack__text{position:absolute;margin:0;opacity:0;animation:textStep linear both;animation-timeline:--stack;animation-range:var(--r)}
  .stack__text[data-i="0"]{--r:contain 0% contain 34%}
  .stack__text[data-i="1"]{--r:contain 33% contain 67%}
  .stack__text[data-i="2"]{--r:contain 66% contain 100%}
  .plane{animation:planeStep linear both;animation-timeline:--stack}
  .plane:nth-of-type(1){animation-name:plane1;animation-range:contain 0% contain 100%}
  .plane:nth-of-type(2){animation-name:plane2;animation-range:contain 0% contain 100%}
  .plane:nth-of-type(3){animation-name:plane3;animation-range:contain 0% contain 100%}
  .stack__point{animation:pointClimb linear both;animation-timeline:--stack;animation-range:contain 0% contain 100%}
}}
@keyframes textStep{0%{opacity:0;transform:translateY(24px)}12%{opacity:1;transform:none}90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-18px)}}
@keyframes plane1{0%{transform:translateY(0) rotateX(0);opacity:1}30%{transform:translateY(0);opacity:1}40%{transform:translateY(120px) rotateX(-10deg) scale(.9);opacity:0}100%{opacity:0}}
@keyframes plane2{0%{transform:translateY(60px) scale(.94);opacity:.22}30%{transform:translateY(60px) scale(.94);opacity:.22}40%{transform:translateY(0) scale(1);opacity:1}63%{transform:translateY(0);opacity:1}73%{transform:translateY(120px) rotateX(-10deg) scale(.9);opacity:0}100%{opacity:0}}
@keyframes plane3{0%{transform:translateY(120px) scale(.88);opacity:.12}63%{transform:translateY(60px) scale(.94);opacity:.22}73%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes pointClimb{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
/* compositions (static, brand-native) */
.comp .comp__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.comp .n{font-family:var(--m);font-variant-numeric:tabular-nums}
.pace{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:end}
.pace .big{font-family:var(--m);font-size:56px;line-height:1;letter-spacing:-.03em}
.pace .big small{font-size:16px;color:var(--muted);margin-left:6px}
.bars{display:flex;align-items:flex-end;gap:6px;height:120px;border-bottom:1px solid var(--rule);padding-bottom:4px}
.bars i{flex:1;background:var(--ink);border-radius:4px 4px 0 0;display:block;transform-origin:bottom}
.bars i.hot{background:var(--red)}
.bars i:nth-child(1){height:34%}.bars i:nth-child(2){height:48%}.bars i:nth-child(3){height:42%}.bars i:nth-child(4){height:58%}.bars i:nth-child(5){height:52%}.bars i:nth-child(6){height:66%}.bars i:nth-child(7){height:61%}.bars i:nth-child(8){height:74%}.bars i:nth-child(9){height:70%}.bars i:nth-child(10){height:82%}.bars i:nth-child(11){height:78%}.bars i:nth-child(12){height:92%}
.axis{display:flex;justify-content:space-between;font-family:var(--m);font-size:10.5px;color:var(--muted);margin-top:6px}
.rows{width:100%;border-collapse:collapse;font-size:14px}
.rows th{font-family:var(--m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 0 8px;border-bottom:1px solid var(--rule);font-weight:500}
.rows td{padding:9px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
.rows td.s{font-family:var(--m);text-align:right;width:52px}
.rows td .why{color:var(--muted);font-size:12.5px;display:block}
.rows tr.top td:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:middle}
.seg{display:inline-flex;gap:2px;margin-left:8px;vertical-align:middle}.seg i{width:9px;height:9px;border-radius:2px;background:var(--rule)}.seg i.on{background:var(--ink)}
.offices{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.offices b{display:block;font-weight:500;font-size:12px;padding:8px 10px;border:1px solid var(--rule);border-radius:8px;position:relative}
.offices b.on::after{content:"";position:absolute;right:8px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--red);transform:translateY(-50%)}
.share{display:flex;gap:28px;align-items:baseline}.share .big{font-family:var(--m);font-size:40px;letter-spacing:-.02em}.share .up{color:var(--ink-2);font-size:14px}

/* ── 04 stats frame: tile to frame ───────────────────────────────────────── */
.frame{padding:var(--s-section) 0}
.frame__head{max-width:60ch}
.frame__head h2{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
.plate{margin:0;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-plate)}
.plate__chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--rule);background:var(--panel-2);font-family:var(--m);font-size:10.5px;color:var(--muted)}
.plate__chrome i{width:9px;height:9px;border-radius:50%;background:var(--rule);display:inline-block}.plate__chrome span{margin-left:8px}
.plate img{display:block;width:100%;height:auto}
.plate-caption{font-family:var(--m);font-size:11.5px;color:var(--muted);margin-top:12px}
.frame__plate{margin-top:40px;transform-origin:50% 100%}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){
  .frame__plate{animation:grow linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
}}
@keyframes grow{from{transform:scale(.86) translateY(40px);border-radius:32px;opacity:.6}to{transform:none;opacity:1}}

/* ── 05 proof reel (horizontal, scroll-snap) ─────────────────────────────── */
.reel{padding:var(--s-section) 0;background:var(--panel-2)}
.reel__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.reel__head h2{font-size:var(--t-h2);letter-spacing:var(--ls-h2)}
.reel__track{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,760px);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px 0 18px;scrollbar-width:thin}
.reel__track>figure{scroll-snap-align:start}
.reel__track .plate{transform:scale(.98);transition:transform .4s var(--ease-out)}.reel__track figure:hover .plate{transform:scale(1)}
.reel figcaption{margin-top:12px}.reel figcaption b{display:block;font-size:17px}.reel figcaption span{color:var(--ink-2);font-size:14px}
.reel__cue{font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ── 05b decks: Market Mastery, included ─────────────────────────────────── */
.decks{padding:var(--s-section) 0}
.decks .reel__head h2{font-size:var(--t-h2);letter-spacing:var(--ls-h2);max-width:20ch}
.decks .reel__track{grid-auto-columns:min(72vw,700px)}
.decks .reel__track figure{margin:0}.decks figcaption span{color:var(--ink-2);font-size:14px}
.decks__cards{margin-top:28px}.decks .card h3{font-size:19px}
/* ── 06 measured, not asserted ───────────────────────────────────────────── */
.measured{padding:var(--s-section) 0}
.measured h2{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);max-width:14ch}
.measured__dek{margin-top:20px}
.measured__panels{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.mpanel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);padding:22px 24px;min-height:220px;display:flex;flex-direction:column;gap:10px}
.mpanel .big{font-family:var(--m);font-size:52px;line-height:1;letter-spacing:-.03em;position:relative;display:inline-block}
.mpanel .big.withheld::after{content:"";position:absolute;inset:6% -4% 6% -4%;background:var(--ink);border-radius:4px}
.mpanel .src{font-family:var(--m);font-size:11px;color:var(--muted);letter-spacing:.04em;margin-top:auto}
.mpanel .cmp{display:grid;gap:10px;margin-top:6px}.mpanel .cmp div{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:13px}
.mpanel .cmp i{height:10px;border-radius:5px;background:var(--ink);display:block;transform-origin:left}.mpanel .cmp i.b{background:var(--rule)}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){.mpanel .cmp i{animation:draw linear both;animation-timeline:view();animation-range:entry 40% cover 40%}}}
.fine-note{font-family:var(--m);font-size:11.5px;color:var(--muted)}
.measured__note{margin-top:22px}

/* ── 07 signals ──────────────────────────────────────────────────────────── */
.signals{padding:var(--s-section) 0;background:var(--panel-2)}
.signals__grid{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:start}
.signals h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.signals .comp{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--shadow-card)}
.signals__plate{margin-top:22px}
.score{display:inline-block;width:64px;height:6px;border-radius:3px;background:var(--rule);vertical-align:middle;margin-right:8px;overflow:hidden}
.score i{display:block;height:100%;background:var(--ink);width:var(--w);transform-origin:left}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){.score i{animation:draw linear both;animation-timeline:view();animation-range:entry 0% cover 35%}}}

/* ── 08 origin rail ──────────────────────────────────────────────────────── */
.origin{padding:var(--s-section) 0}
.origin__grid{display:grid;grid-template-columns:5fr 7fr;gap:48px}
.origin__text{position:sticky;top:96px;align-self:start}
.origin__text h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.origin__rail{position:relative;padding-left:34px}
.origin__rail::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--rule)}
.origin__fill{position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--ink);transform-origin:top;transform:scaleY(1)}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){.origin__fill{animation:drawY linear both;animation-timeline:view();animation-range:entry 30% exit 40%}}}
@keyframes drawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.origin__item{position:relative;margin-bottom:48px}
.origin__dot{position:absolute;left:-30px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--paper)}
.origin__dot.is-pt{background:var(--red)}
.origin__year{display:block;margin-bottom:12px}
.label{font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sheet{width:100%;border-collapse:collapse;font-family:var(--m);font-size:11.5px;background:var(--panel);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.sheet th,.sheet td{padding:6px 8px;border-bottom:1px solid var(--rule);text-align:left;white-space:nowrap}
.sheet th{background:var(--panel-2);color:var(--muted);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.sheet td.n{text-align:right}
.origin .bars{height:90px}

/* ── 09 pricing in one breath ────────────────────────────────────────────── */
.breath{padding:var(--s-section) 0;background:var(--panel-2)}
.breath h2{font-size:var(--t-h2);letter-spacing:var(--ls-h2)}
.breath__cards{margin-top:36px}
.breath .card{display:flex;flex-direction:column;gap:12px;min-height:200px}
.glyph{display:grid;gap:4px;width:22px}
.glyph i{display:block;width:22px;height:22px;border-radius:6px;background:var(--ink)}
.glyph i.pt{width:14px;height:14px;border-radius:50%;background:var(--red);margin:0 4px 4px}
.breath .card h3{margin-top:6px}
.breath .card p{color:var(--ink-2);font-size:15.5px;margin:0}
.lens{display:flex;gap:18px;font-family:var(--m);font-size:12.5px;color:var(--muted);margin-top:26px;flex-wrap:wrap}
.lens .on{color:var(--ink);border-bottom:2px solid var(--red);padding-bottom:4px}
.breath__cta{margin-top:24px;font-weight:700}

/* ── 10 close ────────────────────────────────────────────────────────────── */
.close{padding:var(--s-section) 0}
.close .band{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding:56px}
.close h2{font-size:var(--t-h2);letter-spacing:var(--ls-h2);color:#fff;max-width:18ch}
.close p{color:#8B8B90;margin:12px 0 0;max-width:44ch}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .hero-film .grid,.stack__grid,.signals__grid,.origin__grid{grid-template-columns:1fr}
  .mark-stage{max-width:340px}
  .record__figs{grid-template-columns:1fr 1fr}
  .stack{height:auto}.stack__sticky{position:static;height:auto;overflow:visible}
  .stack__text{position:static!important;opacity:1!important;animation:none!important;margin-bottom:24px}
  .stack__stage{height:auto;min-height:0;display:grid;gap:16px}.plane{position:static;transform:none!important;animation:none!important;opacity:1!important}
  .stack__point,.stack__caption{display:none}
  .measured__panels{grid-template-columns:1fr}
  .origin__text{position:static}
  .offices{grid-template-columns:repeat(3,1fr)}
  .close .band{padding:36px 28px}
}