/* FMIS — Apple option (transcript build, 2026-09-16)
   Copy: fmis.ca only. Media: fmis.ca only. Palette + type: fmis.ca (system-ui, #3E3E3E, #2D94CF). */
:root{
  --ink:#3E3E3E; --ink-2:#111111; --grey:#808185; --grey-2:#8C9197;
  --paper:#FFFFFF; --light:#F8F9FA; --line:rgba(62,62,62,.12);
  --blue:#2D94CF; --blue-ink:#1F6F9E; --amber:#F5B62A; --amber-ink:#B77E0A;
  --accent:var(--blue); --accent-ink:var(--blue-ink);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.9s;
  --gutter:clamp(20px,5vw,72px); --max:1180px;
  font-size:100%;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:1.0625rem;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type: size-specific tracking + leading ---------- */
.display{font-size:clamp(2.6rem,7.2vw,6.4rem);line-height:.98;letter-spacing:-.035em;font-weight:600;margin:0}
/* solution-page heroes: size by height as well as width, so wide-but-short screens never crowd the image or the fold */
:where(.vp .hero) .display{font-size:clamp(2.6rem,min(6.2vw,11.5svh),6.4rem)}
@media (max-width:820px){.vp .hero .cue{display:none}}
.h1{font-size:clamp(2.2rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.03em;font-weight:600;margin:0}
.h2{font-size:clamp(1.7rem,3.8vw,3rem);line-height:1.08;letter-spacing:-.024em;font-weight:600;margin:0}
.h3{font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.2;letter-spacing:-.015em;font-weight:600;margin:0}
.lead{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.4;letter-spacing:-.008em;color:var(--ink);margin:0}
.body{font-size:1.0625rem;line-height:1.55;color:var(--ink);margin:0}
.muted{color:var(--grey)}
.eyebrow{font-size:.8125rem;line-height:1;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--grey);margin:0 0 1rem}
.tag{display:inline-block;font-size:.8125rem;letter-spacing:.02em;font-weight:600;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 12%,white);padding:.35em .8em;border-radius:999px}

/* ---------- buttons: feedback on press, instant ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.45em;border-radius:999px;font-weight:600;font-size:1rem;letter-spacing:-.005em;
  background:var(--accent);color:#fff;border:0;cursor:pointer;transition:transform .1s ease-out,background .2s var(--ease);will-change:transform}
.btn:hover{background:var(--accent-ink)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.btn.light{background:#fff;color:var(--ink-2)}
.btn.light:hover{background:#eee}
.link{color:var(--accent-ink);font-weight:600;display:inline-flex;align-items:center;gap:.35em}
.link::after{content:"›";font-size:1.2em;line-height:1;transition:transform .25s var(--ease)}
.link:hover::after{transform:translateX(3px)}

/* ---------- top bar: translucent material, content scrolls under ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;height:64px;display:flex;align-items:center;
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.4);transition:background .4s var(--ease),transform .5s var(--ease)}
.top.scrolled{background:rgba(255,255,255,.78)}
.top .wrap{display:flex;align-items:center;gap:1rem}
.top .brand{margin-right:auto}
.top .logo{display:block;height:34px;width:auto}
.top nav{display:flex;align-items:center;margin-left:auto;gap:clamp(1.1rem,2.6vw,2.4rem);font-size:.9375rem;font-weight:500;color:var(--ink)}
.top nav a{opacity:.85;transition:opacity .2s}
.top nav a:hover{opacity:1}
.top nav a.cta{color:var(--accent-ink)}
@media (max-width:720px){.top nav a:not(.cta):not(.keep){display:none}}
@media (prefers-reduced-transparency:reduce){.top,.subnav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-contrast:more){.top,.subnav{background:#fff;border-bottom:1px solid var(--ink)}}

/* ---------- hero: full-bleed video, lerp parallax on transform ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;color:#fff;display:grid;align-items:end;isolation:isolate}
.hero .media{position:absolute;inset:-8% 0;z-index:-1;will-change:transform}
.hero video,.hero img{width:100%;height:100%;object-fit:cover}
.hero .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.55) 100%)}
.hero .copy{padding-block:clamp(2.5rem,7vh,6rem);will-change:transform,opacity}
.hero .copy .lead{color:rgba(255,255,255,.86);max-width:38ch;margin-top:1.2rem}
.hero .copy .row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.hero .cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:26px;height:42px;border:1.5px solid rgba(255,255,255,.55);border-radius:14px;opacity:.9}
.hero .cue::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* Chemicals hero film (chemicals-beaker.mp4): the shot has limited headroom above the beaker,
   and .hero .media's -8% overhang (needed for the scroll parallax) crops it hard under `cover`.
   Scoped to this hero only — show the full frame instead, backed by near-black so there's no
   visible letterbox seam against the clip's own black background. */
.hero--film .media{background:#0a0a0a}
/* contain shows the full frame; translateX nudges the beaker right so it clears the headline
   (viewport-independent — the exposed left edge is filled by the #0a0a0a media backing) */
.hero--film video{object-fit:contain;object-position:center 20%;transform:translateX(7%)}
@media (max-width:820px){.hero--film video{transform:none}}
/* darker scrim under the nav strip so the transparent nav's white type stays legible */
.hero--film .shade{background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.14) 20%,rgba(0,0,0,.04) 44%,rgba(0,0,0,.62) 100%)}

/* Premium nav over the dark Chemicals hero: transparent with white type at the top,
   gaining its light glass material only after you scroll past the hero. Scoped to theme-chem
   so the homepage nav is untouched. */
.theme-chem .top{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.theme-chem .top nav{color:#fff}
.theme-chem .top nav a.cta{color:var(--amber)}
.theme-chem .top .logo{filter:brightness(0) invert(1)}
.theme-chem .top.scrolled{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom-color:rgba(62,62,62,.1)}
.theme-chem .top.scrolled nav{color:var(--ink)}
.theme-chem .top.scrolled nav a.cta{color:var(--amber-ink)}
.theme-chem .top.scrolled .logo{filter:none}
@media (prefers-reduced-transparency:reduce){.theme-chem .top:not(.scrolled){background:rgba(0,0,0,.55)}}

/* ---------- statement: words reveal as you scroll ---------- */
.statement{height:220vh;background:var(--paper);position:relative}
.statement .pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding-inline:var(--gutter)}
.statement p{max-width:20ch;text-align:center;color:var(--ink-2);font-size:clamp(2.2rem,5.2vw,4.8rem);line-height:1.04;letter-spacing:-.03em;font-weight:600;margin:0}
.statement .w{display:inline-block;opacity:.14;transition:opacity .3s var(--ease)}
.statement .w.on{opacity:1}
html:not(.anim) .statement{height:auto;padding-block:16vh}html:not(.anim) .statement .pin{position:static;height:auto}html:not(.anim) .statement .w{opacity:1}

/* ---------- Our Solutions: closer-look gallery (S3). Normal flow, click/drag-driven track, six equal 16:10.3 tiles,
   12px gaps, light-grey tiles r28 no shadow, active tile anchored at the content column's left edge, grey captions with
   the key phrase in ink, two grey arrow circles centred below. ---------- */
.sol{background:var(--paper);color:var(--ink-2);padding-block:clamp(2.5rem,5vh,4rem) clamp(2.5rem,5vh,4rem);position:relative;
  --tw:min(900px,56vw);--th:min(calc(var(--tw) * .645),58vh);--gap:12px}   /* tiles take the height the viewport gives, width follows at 16:10.3 */
.sol .head{margin-bottom:clamp(1.1rem,2.4vh,1.6rem)}
.sol .head .t{margin:0;max-width:30ch;font-size:clamp(1.9rem,3.6vw,3.25rem);line-height:1.05;letter-spacing:-.03em;font-weight:600;color:var(--ink-2)}
.sol .gal{position:relative;overflow:hidden;width:100%;cursor:grab;touch-action:pan-y;outline:none}
.sol .gal:focus-visible{box-shadow:0 0 0 3px var(--accent) inset;border-radius:28px}
.sol .gal.drag{cursor:grabbing}
.sol .track{display:flex;gap:var(--gap);width:max-content;will-change:transform;align-items:flex-start}
.sol .tile{flex:none;width:calc(var(--th) / .645)}
.sol .frame{position:relative;height:var(--th);border-radius:28px;overflow:hidden;background:var(--light);isolation:isolate}
.sol .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;pointer-events:none}
.sol .cap{margin:16px 0 0;padding-inline:2px;font-size:1.0625rem;line-height:1.5;color:var(--grey)}
.sol .cap b{color:var(--ink-2);font-weight:600}
.sol .cap .link{font-size:1.0625rem;margin-left:.35em;vertical-align:baseline}
.sol .nav{display:flex;justify-content:center;gap:12px;margin-top:clamp(1.4rem,2.8vh,2rem)}
.sol .nav button{width:36px;height:36px;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink) 9%,white);color:var(--ink-2);transition:background .2s var(--ease),transform .1s ease-out,opacity .3s}
.sol .nav button svg{width:14px;height:14px;display:block}
.sol .nav button:hover{background:color-mix(in srgb,var(--ink) 16%,white)}
.sol .nav button:active{transform:scale(.92)}
.sol .nav button[disabled]{opacity:.32;cursor:default;background:color-mix(in srgb,var(--ink) 9%,white)}
.sol .nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:820px){.sol{--tw:84vw;--th:min(calc(var(--tw) * .645),40vh)}.sol .frame{border-radius:20px}.sol .cap,.sol .cap .link{font-size:.9375rem}}
html.no-js .sol .gal{overflow-x:auto}html.no-js .sol .nav{display:none}

/* ---------- reveal (IntersectionObserver) ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.scale{transform:translateY(18px) scale(.96)}
.js .reveal.scale.in{transform:none}
.js .stagger>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>*:nth-child(2){transition-delay:.08s}.js .stagger.in>*:nth-child(3){transition-delay:.16s}.js .stagger.in>*:nth-child(4){transition-delay:.24s}
.js .stagger.in>*:nth-child(5){transition-delay:.32s}.js .stagger.in>*:nth-child(6){transition-delay:.4s}.js .stagger.in>*:nth-child(7){transition-delay:.48s}
.js .stagger.in>*:nth-child(8){transition-delay:.56s}.js .stagger.in>*:nth-child(9){transition-delay:.64s}.js .stagger.in>*:nth-child(10){transition-delay:.72s}
.js .stagger.in>*:nth-child(n+11){transition-delay:.8s}

/* ---------- pinned chapter: six lines, media flips as you scroll ---------- */
.chapter{position:relative;background:var(--ink-2);color:#fff}
.chapter .stage{position:sticky;top:0;height:100svh;overflow:hidden}
.chapter .layer{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);will-change:opacity}
.chapter .layer.on{opacity:1}
.chapter .layer video,.chapter .layer img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 2.4s var(--ease)}
.chapter .layer.on video,.chapter .layer.on img{transform:scale(1)}
.chapter .stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,.15) 100%);pointer-events:none}
.chapter .text{position:absolute;inset:0;display:grid;align-items:center;padding-inline:var(--gutter);z-index:2}
.chapter .panel{grid-area:1/1;max-width:min(560px,90vw);opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.chapter .panel.on{opacity:1;transform:none;pointer-events:auto}
.chapter .panel .eyebrow{color:rgba(255,255,255,.7)}
.chapter .panel .h1{color:#fff}
.chapter .panel .body{color:rgba(255,255,255,.86);margin-top:1.1rem;max-width:44ch}
.chapter .panel .link{color:#fff;margin-top:1.4rem}
.chapter .dots{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);display:grid;gap:14px;z-index:3}
.chapter .dots a{display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:transform .35s var(--ease),background .35s}
.chapter .dots a.on{background:#fff;transform:scale(1.5)}
.chapter .steps{position:relative;z-index:1}
.chapter .step{height:100svh}
.chapter .index{position:absolute;left:var(--gutter);bottom:28px;z-index:3;display:flex;gap:1.2rem;font-size:.875rem;color:rgba(255,255,255,.7);letter-spacing:.02em}
.chapter .index b{color:#fff;font-weight:600}
.no-js .chapter .stage{display:none}
.no-js .chapter .step{height:auto;padding:3rem var(--gutter)}
@media (max-width:720px){.chapter .dots{display:none}.chapter .text{align-items:end;padding-bottom:20vh}}

/* ---------- sequence: how (large numerals) ---------- */
.seq{padding-block:clamp(5rem,14vh,10rem);background:var(--light)}
.seq .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:3rem}
.seq .n{font-size:clamp(3.4rem,7vw,6rem);line-height:1;letter-spacing:-.04em;font-weight:600;color:var(--accent);margin:0 0 .6rem}
.seq .grid p:not(.n){margin:0;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.4;letter-spacing:-.008em;max-width:24ch}

/* ---------- media band: image + copy (alternating) ---------- */
.band{padding-block:clamp(4rem,10vh,8rem)}
.band .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.band .split.flip>:first-child{order:2}
.band figure{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:var(--light)}
.band figure img,.band figure video{width:100%;height:100%;object-fit:cover}
/* native-size photo: never upscale a low-resolution source; shown at its own pixels, centred in the column, until a high-res photograph arrives */
.band figure.native{width:294px;max-width:100%;height:auto;aspect-ratio:294/768;justify-self:center}
.band figure.native img{object-fit:contain;display:block}
@media (max-width:820px){.band .split{grid-template-columns:1fr}.band .split.flip>:first-child{order:0}}

/* ---------- logo walls ---------- */
.logos{padding-block:clamp(4rem,10vh,8rem)}
.logos .wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.2rem;margin-top:2.5rem}
.logos .cell{display:grid;place-items:center;aspect-ratio:3/2;background:var(--light);border-radius:18px;padding:1.4rem;transition:background .3s var(--ease),transform .5s var(--ease)}
.logos .cell:hover{background:#fff;box-shadow:0 12px 40px rgba(0,0,0,.08);transform:translateY(-3px)}
.logos .cell img{max-height:56px;width:auto;max-width:82%;object-fit:contain;filter:grayscale(1) contrast(1.25);opacity:.92;transition:filter .4s var(--ease),opacity .4s}
.logos .cell:hover img{filter:none;opacity:1}
.logos .cell span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.logos.tint{background:var(--light)}
.logos.tint .cell{background:#fff}
.logos.tint .cell img{filter:none;opacity:1;max-height:64px}
.logos.dark{background:var(--ink-2);color:#fff}
.logos.dark .cell{background:rgba(255,255,255,.06)}
.logos.dark .cell:hover{background:rgba(255,255,255,.12);box-shadow:none}
.logos.dark .cell img{filter:grayscale(1) invert(1) brightness(1.4);opacity:.8}
.logos.dark .cell:hover img{filter:none;opacity:1}
.logos.dark .muted{color:rgba(255,255,255,.7)}

/* ---------- curtain: image opens as you scroll ---------- */
.curtain{position:relative;background:var(--paper)}
.curtain .pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.curtain .frame{position:absolute;inset:0;clip-path:inset(30% 22% 30% 22% round 28px);will-change:clip-path;transition:clip-path .15s linear}
.curtain .frame img,.curtain .frame video{width:100%;height:100%;object-fit:cover}
.curtain .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55))}
.curtain .over{position:relative;z-index:2;color:#fff;text-align:center;max-width:min(760px,88vw);opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.curtain .over.on{opacity:1;transform:none}
.curtain .over .lead{color:rgba(255,255,255,.9);margin-top:1.2rem}
.curtain .over .eyebrow{color:rgba(255,255,255,.75)}
.curtain .spacer{height:140svh}
.no-js .curtain .spacer{display:none}
.no-js .curtain .frame{clip-path:none}
.no-js .curtain .over{opacity:1;transform:none}

/* ---------- contact ---------- */
.contact{padding-block:clamp(6rem,18vh,12rem);text-align:center;background:var(--light)}
.contact .lead{margin:1.2rem auto 0;max-width:40ch}
.contact .row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.contact .lines{margin-top:2.5rem;display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;color:var(--grey);font-size:.9375rem}
.contact .lines a:hover{color:var(--ink)}

/* ---------- footer ---------- */
.foot{padding-block:3.5rem 2.5rem;border-top:1px solid var(--line);font-size:.9375rem}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
.foot .logo{height:26px;width:auto;margin-bottom:1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.foot h4{margin:0 0 .8rem;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.foot a:hover{color:var(--accent-ink)}
.foot .map{border-radius:14px;overflow:hidden;background:var(--light)}
.foot .copy{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--grey);font-size:.875rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
@media (max-width:820px){.foot .cols{grid-template-columns:1fr 1fr}}

/* ---------- sub-page: sticky section nav (Apple product-page style) ---------- */
.subnav{position:sticky;top:64px;z-index:40;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;align-items:center;gap:1rem;height:52px}
.subnav .name{font-weight:600;letter-spacing:-.01em;margin-right:auto;white-space:nowrap}
.subnav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(.8rem,2vw,1.6rem);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav li a{font-size:.875rem;white-space:nowrap;color:var(--grey);padding:.4em 0;border-bottom:2px solid transparent;transition:color .2s,border-color .3s var(--ease)}
.subnav li a.on,.subnav li a:hover{color:var(--ink-2);border-color:var(--accent)}
@media (max-width:720px){.subnav .name{display:none}}

/* ---------- sub-page blocks ---------- */
.block{padding-block:clamp(4.5rem,12vh,9rem);scroll-margin-top:110px}
.block.tint{background:var(--light)}
.block.dark{background:var(--ink-2);color:#fff}
.block.dark .muted{color:rgba(255,255,255,.7)}
.block.dark .body,.block.dark .lead{color:rgba(255,255,255,.88)}
.block .intro{max-width:66ch}
.block .intro .body{margin-top:1.2rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.chips span{font-size:.9375rem;padding:.5em .95em;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.chips.solid span{background:var(--accent);border-color:transparent;color:#1a1a1a;font-weight:500}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;margin-top:2.5rem}
.card{background:#fff;border-radius:22px;padding:1.6rem 1.5rem;border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.08)}
.card h3{margin:0 0 .6rem;font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;color:var(--accent-ink)}
.card h3.plain{text-transform:none;letter-spacing:-.01em;color:var(--ink-2);font-size:1.25rem}
.card p{margin:0;color:var(--ink);font-size:1rem;line-height:1.5}
.card ul{margin:0;padding:0;list-style:none;columns:2;column-gap:1.2rem;font-size:.9375rem;line-height:1.55;color:var(--ink)}
.card ul.one{columns:1}
.card ul li{break-inside:avoid}
.card.wide{grid-column:1/-1}
.card.wide ul{columns:3}
@media (max-width:820px){.card.wide ul{columns:2}}
@media (max-width:520px){.card ul,.card.wide ul{columns:1}}
.dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.dark .card p,.dark .card ul{color:rgba(255,255,255,.86)}
.dark .card h3{color:var(--amber)}
.dark .card h3.plain{color:#fff}
.dark .card:hover{box-shadow:none;background:rgba(255,255,255,.1)}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:3rem}
.feature .big{font-size:clamp(2.6rem,6vw,5rem);line-height:1;letter-spacing:-.035em;font-weight:600;margin:0}
.feature .big em{font-style:normal;color:var(--amber)}
@media (max-width:820px){.feature{grid-template-columns:1fr}}
.list{margin:2.2rem 0 0;padding:0;list-style:none;display:grid;gap:0}
.list li{display:grid;grid-template-columns:minmax(150px,.7fr) 2fr;gap:1.2rem;padding:1.05rem 0;border-top:1px solid var(--line);align-items:baseline}
.list li:last-child{border-bottom:1px solid var(--line)}
.list li b{font-weight:600;letter-spacing:-.01em;color:var(--ink-2)}
.dark .list li{border-color:rgba(255,255,255,.12)}
.dark .list li b{color:#fff}
@media (max-width:600px){.list li{grid-template-columns:1fr;gap:.25rem}}
.ring{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;margin-top:2rem}
.ring span{padding:1.1rem 1rem;border-radius:16px;background:#fff;border:1px solid var(--line);font-weight:500;font-size:.9375rem;letter-spacing:-.005em}
.dark .ring span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
details.more{margin-top:2.5rem;border-top:1px solid var(--line)}
details.more summary{cursor:pointer;list-style:none;padding:1.2rem 0;font-weight:600;display:flex;justify-content:space-between;align-items:center;letter-spacing:-.01em}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"+";font-size:1.5rem;font-weight:400;transition:transform .35s var(--ease)}
details.more[open] summary::after{transform:rotate(45deg)}
details.more .products{display:grid;gap:0;padding-bottom:2rem}
details.more .products>div{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(150px,.7fr) 2fr;gap:1rem;padding:.9rem 0;border-top:1px solid var(--line);font-size:.9375rem;align-items:baseline}
details.more .products>div b{text-transform:uppercase;letter-spacing:.04em;font-size:.8125rem;color:var(--amber-ink)}
details.more .products>div i{font-style:normal;font-weight:600;color:var(--ink-2)}
details.more .products>div i small{display:block;font-weight:600}
details.more .products>div p{margin:0}
details.more .products>div p+p{margin-top:.3rem}
@media (max-width:720px){details.more .products>div{grid-template-columns:1fr;gap:.2rem}}

/* ---------- theme switch: chemicals uses fmis.ca chemicals amber ---------- */
.theme-chem{--accent:var(--amber);--accent-ink:var(--amber-ink)}
.theme-chem .btn{color:#1a1a1a}
.theme-chem .btn:hover{background:#E1A21C}
.theme-chem .top nav a.cta{color:var(--amber-ink)}

/* ---------- reduced motion: cross-fade only, no transforms ---------- */
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .stagger>*{transform:none!important;transition:opacity .3s ease}
  .hero .media,.hero .copy{transform:none!important}
  .hero .cue::after{animation:none}
  .chapter .layer video,.chapter .layer img{transform:none!important;transition:none}
  .chapter .panel{transform:none!important;transition:opacity .3s ease}
  .curtain .frame{clip-path:none!important}
  .btn,.card,.logos .cell{transition:none}
  .btn:active{transform:none}
}

/* ============================================================
   V2 overrides — three.js dissolve stage + GSAP reveals
   ============================================================ */
/* reveals hide only when the GSAP engine is live; if it fails, show everything */
html:not(.anim) .reveal,
html:not(.anim) .stagger>*{opacity:1!important;transform:none!important}

/* Lenis owns smoothness — disable native smooth-scroll so they don't fight */
html.lenis,html.lenis body{scroll-behavior:auto}
html.lenis{height:auto}
/* six-line stage becomes a WebGL canvas (GSAP pins it).
   The stage is a normal 100vh block; GSAP's pin creates the scroll length.
   Do NOT inflate .chapter height — that plus pinSpacing makes a huge dead zone. */
.chapter{background:#000}
.chapter .stage{position:relative;top:auto;height:100vh;overflow:hidden;background:#000;display:block}
.chapter .stage::after{content:none}
.stage .gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.stage .videos{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden}
.stage .videos video{position:absolute;top:0;left:0;width:2px;height:2px;opacity:.01;pointer-events:none}
.stage .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.42) 46%,rgba(0,0,0,.12) 100%)}
.stage .text{position:absolute;inset:0;display:grid;align-items:center;padding-inline:var(--gutter);z-index:3}
.stage .panel{grid-area:1/1;max-width:min(560px,90vw);opacity:0;transform:translateY(26px);
  will-change:opacity,transform;pointer-events:none;transition:none}
.stage .panel.on{pointer-events:auto}
.stage .panel .eyebrow{color:rgba(255,255,255,.72)}
.stage .panel .h1{color:#fff}
.stage .panel .body{color:rgba(255,255,255,.88);margin-top:1.1rem;max-width:44ch}
.stage .panel .link{color:#fff;margin-top:1.4rem}
.stage .dots{z-index:4}
.stage .index{z-index:4}

/* fallback: no WebGL / reduced-motion → stacked video crossfade */
.stage.no-gl .gl{display:none}
.stage.no-gl .videos{position:absolute;inset:0;width:100%;height:100%}
.stage.no-gl .videos video{position:absolute;inset:0;width:100%;height:100%;opacity:0;object-fit:cover;
  transition:opacity .8s var(--ease)}
.stage.no-gl .videos video.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .stage .panel{transition:opacity .3s ease}
}

/* ---- edge alignment (user 2026-09-16): header spans the full banner, hero copy hard-left ---- */
.top .wrap{max-width:none;padding-inline:clamp(24px,3vw,52px)}
.hero .copy{max-width:var(--max);margin-inline:0;padding-inline:clamp(28px,4vw,56px)}

/* ============================================================
   Portal — We Speak Digital (the interface is the image, no device frame)
   Full-bleed stage pinned via position:sticky; the four steps sit as a lit list at the left, the way
   Apple's product pages let the UI itself carry the section. Re-keyed light 2026-09-22 (was dark): a
   hairline border on the stage is the only cue this is a screen, not the page.
   ============================================================ */
.portal{height:440vh;background:var(--paper);color:var(--ink-2);position:relative}
.portal-pin{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(280px,30%) 1fr}
.portal-pin::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 90% at 18% 8%,#fff 0%,var(--light) 60%)}
.portal-copy{padding:calc(64px + 6vh) clamp(1.5rem,4vw,3.5rem) 6vh clamp(1.5rem,4vw,3.5rem);display:grid;
  grid-template-rows:auto 1fr;position:relative;z-index:2}
.portal-copy .eyebrow{color:var(--amber-ink);margin:0 0 .5rem}
.portal-h{font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.1;letter-spacing:-.022em;font-weight:600;margin:0;max-width:14ch}
.portal-steps{align-self:end;display:grid;gap:1.4rem;padding-bottom:2vh}
.portal-step{display:grid;grid-template-columns:auto 1fr;gap:.9rem;opacity:.4;transition:opacity .4s var(--ease)}
.portal-step.on{opacity:1}
.portal-step .num{font-size:1rem;font-weight:600;color:var(--amber-ink);font-variant-numeric:tabular-nums;padding-top:.15em}
.portal-step h4{margin:0 0 .3rem;font-size:clamp(.98rem,1.15vw,1.1rem);font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--ink-2)}
.portal-step p{margin:0;font-size:.875rem;line-height:1.5;color:var(--grey);max-width:38ch;
  max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.portal-step.on p{max-height:5em}
.portal-line{height:2px;width:100%;background:var(--line);border-radius:2px;position:relative;margin-top:.5rem}
.portal-line i{position:absolute;left:0;top:0;bottom:0;width:25%;background:var(--amber);border-radius:2px;transition:width .55s var(--ease)}

/* the stage: full-bleed to the section's right edge — the interface is the whole frame, no browser chrome */
.portal-stage{position:relative;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.portal-stage .render{position:absolute;inset:0;opacity:0;will-change:opacity,transform,filter}
.portal-stage .scr{height:100%;font-size:clamp(13px,1.05vw,19px)}
.portal-stage .scr .chrome{display:none}
.portal-stage .scr .view{inset:0}
.portal-stage .scr:has(.circles) .view{display:grid;align-content:center;padding-bottom:4vh}
.portal-stage .scr .q{padding-top:0;font-size:1.5em;color:var(--ink-2)}
.portal-stage .scr .circles{margin-top:2.4em;gap:2.4em}
.portal-stage .scr .circles div{color:var(--grey)}
.portal-stage .scr .circles span{width:4.4em;height:4.4em;border:1.5px solid var(--line);background:none}
.portal-stage .scr .circles span::after{background:var(--grey-2)}
.portal-stage .scr .circles .on span{background:var(--accent);border-color:var(--accent)}
.portal-stage .scr .circles .on span::after{background:#fff}
.portal-stage .scr .circles .on{color:var(--ink-2);font-weight:600}
.portal-stage .scr .circles.big{gap:3.6em}.portal-stage .scr .circles.big span{width:5.6em;height:5.6em}
.portal-stage .scr .cat{padding:2.4em 3em 0}
.portal-stage .scr .tabs{font-size:.92em}
.portal-stage .scr .foot{left:3em;right:3em;bottom:3em;font-size:.85em}
.portal-stage .scr .foot span:first-child{color:var(--grey)}
.portal-stage .scr .modal{width:44%}
/* the pressed selection: a brief accent flash where the choice was made, standing in for a true shared-element move */
.portal-stage .render .flash{position:absolute;width:1px;height:1px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(245,182,42,.55),transparent 70%);opacity:0;transform:translate(-50%,-50%) scale(1)}
.portal-stage .render.flashing .flash{opacity:1;animation:portalFlash .6s var(--ease) forwards}
@keyframes portalFlash{from{transform:translate(-50%,-50%) scale(.2)}to{transform:translate(-50%,-50%) scale(22)}}

/* engine off → show first screen + all step copy statically, tidy layout */
html:not(.anim) .portal-stage .render:first-child{opacity:1}
html:not(.anim) .portal-step{opacity:1}
html:not(.anim) .portal-step p{max-height:5em}
@media (max-width:900px){
  .portal-pin{grid-template-columns:1fr}
  .portal-copy{padding-top:calc(64px + 3vh);grid-template-rows:auto auto;gap:2vh}
  .portal-steps{align-self:auto;padding-bottom:1vh}
  .portal-stage{min-height:46vh}
  .portal{height:520vh}
}
@media (prefers-reduced-motion:reduce){
  .portal{height:auto}.portal-pin{position:static;height:auto;grid-template-columns:1fr}
  .portal-stage{aspect-ratio:16/10}.portal-stage .render{position:static;opacity:1!important}
  .portal-stage .render:not(:first-child){display:none}
  .portal-step{opacity:1}.portal-step p{max-height:5em}
}

/* premium render frame (upgraded feel) + fmis.ca portal screen internals (unchanged design) */
.render{position:relative;border-radius:14px;overflow:hidden;background:#111;
  box-shadow:0 2px 4px rgba(0,0,0,.4),0 36px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06) inset}
.render::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 14%)}
.scr{position:relative;height:100%;overflow:hidden;background:#fff;font-size:clamp(8px,.82vw,13px);line-height:1.35;color:#1d1d1f;user-select:none}
.scr .chrome{height:2.4em;display:flex;align-items:center;gap:.6em;padding:0 .9em;background:#f3f3f5;border-bottom:1px solid rgba(0,0,0,.06)}
.scr .chrome i{width:.7em;height:.7em;border-radius:50%;background:#d6d6da;display:inline-block}
.scr .chrome .url{flex:1;margin-left:.6em;height:1.5em;border-radius:.75em;background:#fff;border:1px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font-size:.85em;color:#6e6e73;white-space:nowrap;overflow:hidden}
.scr .chrome .url b{color:#1d1d1f;font-weight:600;margin-left:.4em}
.scr .view{position:absolute;inset:2.4em 0 0 0}
.scr.dark .view{background:#1c1c1e;color:#fff}
.scr .q{text-align:center;font-weight:600;font-size:1.3em;letter-spacing:-.01em;padding-top:1.7em}
.scr .circles{display:flex;justify-content:center;gap:1.6em;margin-top:1.7em}
.scr .circles div{display:grid;justify-items:center;gap:.5em;font-size:.85em;color:rgba(255,255,255,.75)}
.scr .circles span{width:3.2em;height:3.2em;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);display:grid;place-items:center}
.scr .circles span::after{content:"";width:1.1em;height:1.1em;border-radius:.25em;background:rgba(255,255,255,.55)}
.scr .circles .on span{background:#fff;border-color:#fff}.scr .circles .on span::after{background:#1c1c1e}.scr .circles .on{color:#fff}
.scr .circles.big{gap:3em;margin-top:2.2em}.scr .circles.big span{width:4.6em;height:4.6em}
.scr .foot{position:absolute;left:1.2em;right:1.2em;bottom:1em;display:flex;justify-content:space-between;align-items:center;font-size:.72em;color:rgba(255,255,255,.55)}
.scr:not(.dark) .foot{color:#6e6e73}
.scr .cta{background:#F5B62A;color:#1d1d1f;font-weight:600;border-radius:.4em;padding:.5em 1.1em;font-size:1.05em}
.scr .tabs{display:flex;background:#2b2b2e;color:rgba(255,255,255,.7);font-size:.8em}.scr .tabs span{flex:1;text-align:center;padding:.85em .3em}.scr .tabs .on{background:#1c1c1e;color:#fff;font-weight:600}
.scr .cat{padding:.9em 1.1em}.scr .cat .hd{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:1.05em}
.scr .cat .hd small{display:flex;gap:.5em}.scr .cat .hd small span{border:1px solid rgba(0,0,0,.12);border-radius:1em;padding:.2em .7em;font-weight:500;font-size:.75em;color:#6e6e73}
.scr .rw{display:grid;grid-template-columns:2.6em 1fr auto;gap:.8em;align-items:center;padding:.6em 0;border-top:1px solid rgba(0,0,0,.07)}
.scr .rw .sw{width:2.6em;height:2.6em;border-radius:.4em;background:linear-gradient(160deg,#ff7a1a,#d9480f)}.scr .rw .sw.b{background:linear-gradient(160deg,#ff9a3c,#c23b00)}.scr .rw .sw.c{background:linear-gradient(160deg,#ffb37a,#ff6a00)}
.scr .rw b{display:block;font-size:.95em}.scr .rw b em{font-style:normal;color:#e0332d;font-size:.7em;margin-right:.4em;font-weight:700}.scr .rw p{margin:0;font-size:.72em;color:#6e6e73}
.scr .rw .add{border:1px solid rgba(0,0,0,.14);border-radius:.4em;padding:.35em .8em;font-size:.8em;font-weight:600}.scr .rw .add.y{background:#F5B62A;border-color:transparent}
.scr .dim{position:absolute;inset:0;background:rgba(0,0,0,.42)}
.scr .modal{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:66%;background:#fff;border-radius:.9em;box-shadow:0 30px 80px rgba(0,0,0,.35);padding:1.1em 1.2em .9em;font-size:.86em}
.scr .modal h5{margin:0 0 .6em;font-size:1.1em}.scr .modal .n{display:grid;grid-template-columns:1.2em 1fr;gap:.6em;margin:.4em 0;color:#3a3a3c}
.scr .modal .n i{width:1em;height:1em;border-radius:50%;background:#F5B62A;margin-top:.15em}.scr .modal .n i.g{background:#34c759}
.scr .modal .cta{display:block;text-align:center;margin-top:.8em}.scr .modal .cancel{text-align:center;color:#e0332d;margin:.6em 0 .4em;font-weight:600}
.scr .modal .more{border-top:1px solid rgba(0,0,0,.08);padding-top:.6em;text-align:center;color:#6e6e73;font-size:.9em}.scr .modal .more div{display:flex;justify-content:center;gap:1.2em;margin-top:.4em;color:#1d1d1f;font-weight:600}
@media (prefers-reduced-transparency:reduce){.portal-pin::before{background:#0b0c0e}}

/* ---------- digest (A1, 2026-09-21): type as the image. Copy verbatim from fmis.ca; no media. ---------- */
.digest{height:280vh;background:var(--paper);color:var(--ink-2);position:relative}
.digest-pin{position:sticky;top:0;height:100vh;display:grid;align-items:center;overflow:hidden}
.digest-inner{position:relative;display:grid;align-items:center}
.digest-copy{position:relative;z-index:1}
.nb{white-space:nowrap}
.digest-lines{margin:0;display:grid;gap:.14em}
.digest-lines .ln{display:block;font-size:clamp(1.9rem,3.7vw,3.5rem);line-height:1.05;letter-spacing:-.032em;font-weight:600;max-width:30ch;
  color:color-mix(in srgb,var(--ink-2) calc(var(--k,0) * 100%),#D3D5D9);
  transform:translate3d(calc((1 - var(--k,0)) * -.22em),0,0);will-change:transform}
.digest-rule{display:block;height:3px;width:min(300px,42%);margin-top:1.8rem;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--amber));transform:scaleX(var(--r,0));transform-origin:left center;will-change:transform}
.digest-num{position:absolute;right:calc(-.04em);top:54%;transform:translateY(-50%);z-index:0;height:1em;width:1.3em;
  font-size:clamp(9rem,20vw,18rem);line-height:1;letter-spacing:-.06em;font-weight:600;color:#ECEEF1;font-variant-numeric:tabular-nums;user-select:none;pointer-events:none}
.digest-num span{position:absolute;right:0;top:0;transform:translate3d(0,calc(var(--o,0) * 58%),0);opacity:var(--a,0);will-change:transform,opacity}
html:not(.anim) .digest-lines .ln{--k:1}
html:not(.anim) .digest-rule{--r:1}
html:not(.anim) .digest-num span:first-child{--a:1}
@media (max-width:820px){.digest-num{font-size:9rem;top:12%;transform:none}}
@media (prefers-reduced-motion:reduce){
  .digest{height:auto}.digest-pin{position:static;height:auto;padding-block:22vh}
  .digest-lines .ln{--k:1!important;transform:none!important}.digest-rule{--r:1!important}
  .digest-num span{display:none}.digest-num span:last-child{display:block;--a:1;--o:0}
}

/* We digest — DARK re-key (2026-09-22). Same type & motion as the light version; only the tonal key changes.
   Ink matches the hero type layer and the Who We Are curtain, so the page alternates light → dark → light. */
.digest.dark{background:var(--ink-2);color:#fff}
.digest.dark .digest-lines .ln{color:color-mix(in srgb,#fff calc(var(--k,0) * 100%),#78787C)}
.digest.dark .digest-num{color:rgba(255,255,255,.08)}
html:not(.anim) .digest.dark .digest-lines .ln{--k:1}

/* ---------- partners (C1, 2026-09-21): one honest row. No tiles; marks trimmed + sized to equal visual area. ---------- */
.partners2{padding-block:clamp(5rem,12vh,9rem) clamp(4rem,9vh,7rem);background:var(--paper);overflow:hidden}
.partners2 .lead{margin-top:1.1rem;max-width:52ch}
.marks{margin-top:clamp(3rem,6.5vh,4.75rem);display:grid;gap:clamp(2.2rem,4.5vh,3.25rem)}
.marks .row{display:flex;justify-content:center;align-items:center;gap:clamp(2.4rem,6vw,5.75rem);flex-wrap:wrap;will-change:transform}
.marks a{display:block;line-height:0;filter:grayscale(1);opacity:.58;transition:filter .45s var(--ease),opacity .45s var(--ease)}
.marks a:hover{filter:none;opacity:1}
.marks img{width:auto;display:block;transition:transform .5s var(--ease)}
.marks a:hover img{transform:translateY(-2px)}
.m-evonik img{height:47px}.m-aecom img{height:44px}.m-canadian img{height:42px}.m-brenntag img{height:41px}
.m-marks img{height:41px}.m-univar img{height:37px}.m-snf img{height:70px}
.partners2 .hair{border:0;height:1px;background:var(--line);margin:clamp(4rem,9vh,6.5rem) 0 clamp(2.5rem,5vh,3.5rem)}
.reg{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(2rem,5vw,5rem)}
.reg .h3{margin:0;max-width:11ch;text-wrap:balance}
.reg-row{display:flex;justify-content:flex-end;align-items:center;gap:clamp(1.4rem,3vw,2.75rem);flex-wrap:wrap}
.reg-row img{width:auto;display:block;opacity:.9}
.r-oilsands img{height:40px}.r-avetta img{height:37px}.r-aboriginal img{height:29px}.r-isn img{height:27px}.r-indigenous img{height:26px}
@media (max-width:820px){
  .reg{grid-template-columns:1fr;gap:1.4rem}.reg-row{justify-content:flex-start}
  .m-evonik img{height:36px}.m-aecom img{height:34px}.m-canadian img{height:32px}.m-brenntag img{height:31px}
  .m-marks img{height:31px}.m-univar img{height:28px}.m-snf img{height:54px}
  .marks .row{gap:2rem 2.4rem}
}
@media (prefers-reduced-motion:reduce){.marks .row{transform:none!important}}


/* ============================================================
   Portal — Intelligent Order Life Cycle (six-step, 2026-09-22)
   Apple intro beat + two-column chapter; the six screens are a
   drag/arrow/wheel/key gallery in the right stage, steps synced.
   ============================================================ */
.pintro{height:150vh;background:var(--paper);position:relative}
.pintro-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;align-content:center;text-align:center;padding-inline:var(--gutter);overflow:hidden}
.pintro-open{will-change:opacity,transform}
.pintro-open .eyebrow{color:var(--amber-ink);margin:0 0 1.1rem}
.pintro-open .t{margin:0 auto;max-width:16ch;font-size:clamp(2.4rem,5.6vw,4.8rem);line-height:1.0;letter-spacing:-.035em;font-weight:600;color:var(--ink-2)}
.pintro-open .sub{margin:1.3rem auto 0;max-width:46ch;font-size:clamp(1.05rem,1.55vw,1.35rem);line-height:1.4;letter-spacing:-.008em;font-weight:500;color:var(--ink)}
.pintro-cue{position:absolute;left:50%;bottom:34px;width:22px;height:34px;margin-left:-11px;border:2px solid rgba(17,17,17,.4);border-radius:12px}
.pintro-cue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--ink-2);animation:cue 1.8s var(--ease) infinite}
.pintro-open.rise .eyebrow,.pintro-open.rise .t,.pintro-open.rise .sub{opacity:0;animation:heroRise .95s var(--ease) both}
.pintro-open.rise .t{animation-delay:.12s}.pintro-open.rise .sub{animation-delay:.3s}
@keyframes heroRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.ptwo{min-height:100vh;background:var(--paper);color:var(--ink-2);display:grid;align-items:center;padding-block:4vh;overflow:hidden}
.ptwo-in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(240px,26%) 1fr;gap:clamp(1.25rem,3.2vw,2.75rem);align-items:center;
  opacity:0;transform:scale(.965);filter:blur(6px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.ptwo.in .ptwo-in{opacity:1;transform:none;filter:none}
.ptwo-copy .eyebrow{color:var(--amber-ink);margin:0 0 .5rem}
.ptwo-h{font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.08;letter-spacing:-.024em;font-weight:600;margin:0;max-width:13ch}
.ptwo-steps{display:grid;gap:.85rem;margin-top:1.8rem}
.pstep{display:grid;grid-template-columns:auto 1fr;gap:.85rem;opacity:.4;cursor:pointer;transition:opacity .4s var(--ease),transform .1s ease-out;text-align:left;border:0;background:none;font:inherit;padding:0;color:inherit}
.pstep:active{transform:scale(.99)}
.pstep.on{opacity:1}
.pstep .num{font-size:.9rem;font-weight:600;color:var(--amber-ink);font-variant-numeric:tabular-nums;padding-top:.15em}
.pstep h4{margin:0;font-size:clamp(.95rem,1.1vw,1.05rem);font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink-2)}
.pstep p{margin:.25rem 0 0;font-size:.85rem;line-height:1.45;color:var(--grey);max-width:40ch;max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.pstep.on p{max-height:6em}
.pline{height:2px;width:100%;max-width:300px;background:var(--line);border-radius:2px;position:relative;margin-top:1.4rem}
.pline i{position:absolute;left:0;top:0;bottom:0;width:16.6%;background:var(--amber);border-radius:2px;transition:width .55s var(--ease)}
.ptwo-nav{display:flex;gap:12px;margin-top:1.5rem}
.ptwo-nav button{width:38px;height:38px;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 9%,white);color:var(--ink-2);transition:background .2s var(--ease),transform .1s ease-out,opacity .3s}
.ptwo-nav button svg{width:14px;height:14px;display:block}
.ptwo-nav button:hover{background:color-mix(in srgb,var(--ink) 16%,white)}
.ptwo-nav button:active{transform:scale(.92)}
.ptwo-nav button[disabled]{opacity:.32;cursor:default}
.ptwo-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pstage{position:relative;overflow:hidden;height:clamp(460px,80vh,840px);padding:18px;background:transparent;cursor:grab;touch-action:pan-y;outline:none}
.pstage:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pstage.drag{cursor:grabbing}
.pstrip{display:flex;height:100%;width:100%;gap:24px;will-change:transform}
.pscreen{flex:0 0 100%;height:100%;position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.10)}
.pscreen .portal-stage{position:absolute;inset:0;background:transparent;box-shadow:none;overflow:hidden}
.pscreen .render{position:absolute;inset:0;opacity:1;transform:none;filter:none}   /* neutralise the old fade-in fade: screens are always visible in the gallery */
.pscreen .scr{position:absolute;inset:0;height:100%;font-size:clamp(13px,1.05vw,18px)}
.pscreen .scr .chrome{display:none}
.pscreen .scr .view{inset:0}
.pscreen .scr:has(.circles) .view{display:grid;align-content:center;padding-bottom:4vh}
.pscreen .scr .q{padding-top:0;font-size:1.5em;color:var(--ink-2)}
.pscreen .scr .circles{margin-top:2.2em;gap:2.2em}
.pscreen .scr .circles div{color:var(--grey)}
.pscreen .scr .circles span{width:4.2em;height:4.2em;border:1.5px solid var(--line);background:none}
.pscreen .scr .circles span::after{background:var(--grey-2)}
.pscreen .scr .circles .on span{background:var(--accent);border-color:var(--accent)}
.pscreen .scr .circles .on span::after{background:#fff}
.pscreen .scr .circles .on{color:var(--ink-2);font-weight:600}
.pscreen .scr .circles.big{gap:3.4em}.pscreen .scr .circles.big span{width:5.4em;height:5.4em}
.pscreen .scr .cat{padding:1.8em 2.4em 0}
.pscreen .scr .foot{left:2.4em;right:2.4em;bottom:2.2em;font-size:.85em}
.pscreen .scr .foot span:first-child{color:var(--grey)}
.pscreen .scr .modal{width:52%}
.pscreen .scr .ohg{margin:1em 0 .2em;font-size:.72em;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--amber-ink)}
.pscreen .scr .bvA{margin-top:1.2em;display:grid;gap:1.1em}
.pscreen .scr .bvA .bar{display:grid;grid-template-columns:6.5em 1fr 2.6em;gap:.9em;align-items:center;font-size:.9em}
.pscreen .scr .bvA .bar span{color:var(--grey)}
.pscreen .scr .bvA .tk{height:.7em;border-radius:.35em;background:var(--line)}
.pscreen .scr .bvA .tk i{display:block;height:100%;border-radius:.35em;background:linear-gradient(90deg,var(--blue),var(--amber))}
.pscreen .scr .bvA .bar b{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
@media (max-width:900px){.ptwo-in{grid-template-columns:1fr;gap:1.5rem}.pstage{order:-1}}
@media (prefers-reduced-motion:reduce){
  .pintro{height:auto}.pintro-pin{position:static;height:auto;padding-block:16vh}.pintro-cue{display:none}
  .ptwo-in{opacity:1!important;transform:none!important;filter:none!important}
}
html:not(.js) .pintro{height:auto}html:not(.js) .pintro-pin{position:static;height:auto;padding-block:16vh}
html:not(.js) .pintro-cue{display:none}html:not(.js) .ptwo-in{opacity:1;transform:none;filter:none}


/* ============================================================
   Proof band — Why FMIS (2026-09-22). Turns "guaranteed results"
   into evidence: count-up figures + real registrations. Figures
   are placeholders until leadership confirms real numbers.
   ============================================================ */
.proof{background:var(--paper);color:var(--ink-2);padding-block:clamp(5rem,13vh,9rem);position:relative}
.proof .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);text-align:center}
.proof .eyebrow{color:var(--amber-ink)}
.proof-h{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.03em;font-weight:600;margin:.6rem auto 0;max-width:18ch;color:var(--ink-2)}
.proof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(2.5rem,6vh,4.5rem);border-top:1px solid var(--line);padding-top:clamp(2rem,5vh,3.5rem)}
.proof-stat{position:relative;display:grid;gap:.5rem;justify-items:center}
.proof-stat + .proof-stat::before{content:"";position:absolute;left:calc(-.5 * clamp(1.5rem,4vw,4rem) - .5px);top:6%;bottom:6%;width:1px;background:var(--line)}
.proof-num{font-size:clamp(2.8rem,6vw,4.6rem);line-height:1;letter-spacing:-.04em;font-weight:600;font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,var(--blue-ink),var(--amber-ink));-webkit-background-clip:text;background-clip:text;color:transparent;
  border-bottom:2px dotted color-mix(in srgb,var(--amber) 55%,transparent);padding-bottom:.06em}
.proof-lab{font-size:.95rem;line-height:1.4;color:var(--grey);max-width:18ch}
.proof-kicker{margin:clamp(2.2rem,5vh,3.5rem) auto 0;max-width:44ch;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.4;letter-spacing:-.008em;color:var(--ink);font-weight:500}
.proof-creds{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;margin-top:2rem;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;color:var(--grey-2)}
.proof-creds span{display:inline-flex;align-items:center;gap:.5em}
.proof-creds span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.proof-samp{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:2;font-size:.72rem;letter-spacing:.05em;font-weight:600;color:var(--amber-ink);
  background:color-mix(in srgb,var(--amber) 16%,white);border:1px solid color-mix(in srgb,var(--amber) 40%,white);border-radius:999px;padding:.35em .9em}
@media (max-width:760px){.proof-stats{grid-template-columns:1fr;gap:2.5rem}.proof-stat + .proof-stat::before{display:none}}

/* Who We Are image (aerial) — replaces the low-res beadwork; portrait, covered, rounded */
.band figure.nation-fig{aspect-ratio:3/4;max-height:none;width:auto;border-radius:22px;overflow:hidden;background:var(--light);justify-self:auto}
.band figure.nation-fig img{width:100%;height:100%;object-fit:cover;display:block}


/* Proof band — DARK re-key (2026-09-22): a touch of dark to break the long light stretch between the
   portal and Solution Partners; ink matches We digest and the Who We Are curtain. */
.proof{background:var(--ink-2);color:#fff}
.proof .eyebrow{color:var(--amber)}
.proof-h{color:#fff}
.proof-stats{border-top-color:rgba(255,255,255,.14)}
.proof-stat + .proof-stat::before{background:rgba(255,255,255,.14)}
.proof-num{background:linear-gradient(90deg,#4aa8e0,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent;border-bottom-color:color-mix(in srgb,var(--amber) 60%,transparent)}
.proof-lab{color:rgba(255,255,255,.62)}
.proof-kicker{color:rgba(255,255,255,.92)}
.proof-creds{color:rgba(255,255,255,.55)}
.proof-samp{color:var(--amber);background:rgba(245,182,42,.16);border-color:rgba(245,182,42,.45)}