/* ============ FUTURISE — Credentials Deck ============ */
@font-face{font-family:"Unitea Sans";src:url("/fonts/UniteaSans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Unitea Sans";src:url("/fonts/UniteaSans-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Unitea Sans";src:url("/fonts/UniteaSans-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Unitea Sans";src:url("/fonts/UniteaSans-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Unitea Sans";src:url("/fonts/UniteaSans-ExtraBold.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Unitea Sans";src:url("/fonts/UniteaSans-Black.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"RCL Morland";src:url("/fonts/RCLMorland-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"RCL Morland";src:url("/fonts/RCLMorland-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"RCL Morland";src:url("/fonts/RCLMorland-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"RCL Morland";src:url("/fonts/RCLMorland-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}

:root{
  --yellow:#FFC20E; --black:#000; --white:#fff; --ink:#0b0b0c;
  --grey:#E6E7E8; --slate:#58595B; --graphite:#414042; --offwhite:#F1F2F2; --twilight:#231E60;
  --sans:"Unitea Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --serif:"RCL Morland",Georgia,serif;
  --pad:clamp(28px,5vw,96px);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:var(--sans);background:#000;color:#fff;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
em{font-style:normal;font-family:var(--serif);font-style:italic;color:var(--yellow);font-weight:500}

/* ---------- deck engine ---------- */
.deck{position:fixed;inset:0;display:flex;height:100%;width:max-content;
  transition:transform .72s cubic-bezier(.76,0,.24,1);will-change:transform}
.slide{width:100vw;height:100vh;flex:0 0 100vw;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:var(--pad)}
.slide__no{position:absolute;top:clamp(20px,3.4vh,34px);left:var(--pad);font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:600}
.slide.light .slide__no{color:rgba(0,0,0,.4)}

/* chrome: progress, counter, arrows, brand */
.chrome{position:fixed;inset:0;z-index:50;pointer-events:none}
.bar{position:absolute;top:0;left:0;height:3px;background:var(--yellow);width:0;transition:width .5s cubic-bezier(.76,0,.24,1);box-shadow:0 0 12px rgba(255,194,14,.6)}
.brandmark{position:absolute;top:22px;right:var(--pad);height:17px;opacity:.9}
.bm-light{display:none}
body.on-light .bm-dark{display:none}
body.on-light .bm-light{display:block}
.counter{position:absolute;bottom:22px;right:var(--pad);font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.55);font-weight:600;font-variant-numeric:tabular-nums}
.counter b{color:var(--yellow)}
.arrows{position:absolute;bottom:20px;left:var(--pad);display:flex;gap:10px;pointer-events:auto}
.arrows button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;font-size:16px;display:grid;place-items:center;transition:.2s;backdrop-filter:blur(6px)}
.arrows button:hover{background:var(--yellow);color:#000;border-color:var(--yellow)}
.arrows button:disabled{opacity:.25;cursor:default}
.hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.3);font-weight:600;transition:opacity .5s}
/* invert chrome on light slides via body class set by JS */
body.on-light .counter{color:rgba(0,0,0,.5)} body.on-light .counter b{color:#000}
body.on-light .arrows button{border-color:rgba(0,0,0,.2);color:#000}
body.on-light .arrows button:hover{background:#000;color:#fff;border-color:#000}
body.on-light .hint{color:rgba(0,0,0,.3)}

/* ---------- Core circles motif ---------- */
.core-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.core-bg span{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 35%,#1c1c1e,#0a0a0b)}
.c1{width:44vw;height:44vw;top:-14vw;left:-10vw}
.c2{width:52vw;height:52vw;bottom:-20vw;right:-8vw}
.dotglow{position:absolute;width:12vw;height:12vw;border-radius:50%;background:radial-gradient(circle,#FFE38A,#FFC20E 55%,rgba(255,194,14,0) 72%);filter:blur(2px)}

/* ---------- COVER ---------- */
.cover{background:#000}
.cover .wm{width:min(52vw,560px);position:relative;z-index:2}
.cover .eyebrow{position:relative;z-index:2;font-size:12.5px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600;margin-bottom:30px}
.cover .sub{position:relative;z-index:2;margin-top:30px;font-size:clamp(15px,1.7vw,20px);color:rgba(255,255,255,.66);max-width:46ch;font-weight:400}
.cover .dotglow{right:22vw;top:34vh}

/* ---------- STATEMENT ---------- */
.statement{background:#000}
.statement h2{font-size:clamp(30px,4.8vw,68px);font-weight:800;line-height:1.05;letter-spacing:-.025em;max-width:20ch;position:relative;z-index:2}
.statement .k{position:relative;z-index:2;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--yellow);font-weight:600;margin-bottom:34px}

/* ---------- MANIFESTO ---------- */
.manifesto{background:var(--yellow);color:#000}
.manifesto p{font-size:clamp(22px,3vw,42px);font-weight:600;line-height:1.22;letter-spacing:-.02em;max-width:24ch}
.manifesto em{color:#000;font-family:var(--serif);font-style:italic}
.manifesto .k{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#000;opacity:.55;font-weight:700;margin-bottom:30px}

/* ---------- STATS ---------- */
.stats{background:#000;align-items:flex-start}
.stats .row{display:flex;flex-wrap:wrap;gap:clamp(30px,6vw,90px);align-items:baseline;position:relative;z-index:2}
.stat b{display:block;font-size:clamp(56px,11vw,150px);font-weight:900;letter-spacing:-.04em;line-height:.9}
.stat span{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;margin-top:12px;display:block}
.stat b em{color:var(--yellow)}
.stats .lead{font-size:clamp(20px,2.4vw,32px);font-weight:700;letter-spacing:-.02em;margin-bottom:56px;max-width:24ch;position:relative;z-index:2}

/* ---------- CAPABILITIES ---------- */
.caps{background:var(--white);color:#000;justify-content:flex-start;padding-top:clamp(64px,11vh,120px)}
.caps h2{font-size:clamp(30px,4.4vw,58px);font-weight:800;letter-spacing:-.025em;margin-bottom:40px}
.caps h2 em{color:#B98600}
.capgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.12)}
.cap{background:#fff;padding:26px 24px;min-height:150px}
.cap b{font-size:17px;font-weight:700;display:block;margin-bottom:9px}
.cap b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--yellow);margin-right:9px;vertical-align:middle}
.cap p{font-size:13.5px;line-height:1.5;color:#4a4a4a}
@media(max-width:900px){.capgrid{grid-template-columns:repeat(2,1fr)}}

/* ---------- PROCESS ---------- */
.process{background:#000;justify-content:flex-start;padding-top:clamp(64px,11vh,120px)}
.process h2{font-size:clamp(28px,4vw,54px);font-weight:800;letter-spacing:-.025em;margin-bottom:46px}
.process h2 em{color:var(--yellow)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{border-top:2px solid var(--yellow);padding-top:22px}
.step .n{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--yellow)}
.step h3{font-size:22px;font-weight:700;margin:10px 0 12px}
.step p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.62)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}

/* ---------- DIVIDER ---------- */
.divider{background:#000;align-items:flex-start}
.divider h2{font-size:clamp(44px,9vw,140px);font-weight:900;letter-spacing:-.04em;line-height:.9;position:relative;z-index:2}
.divider h2 em{color:var(--yellow)}
.divider .k{position:relative;z-index:2;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;margin-bottom:26px}

/* ---------- WORK ---------- */
.work{background:#0a0a0b;display:grid;grid-template-columns:minmax(260px,32%) 1fr;gap:clamp(28px,4vw,64px);align-items:center;padding:var(--pad)}
.work.light{background:var(--offwhite);color:#000}
.work__text{max-width:40ch}
.work__tag{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);font-weight:600;margin-bottom:20px}
.work.light .work__tag{color:#B98600}
.work__name{font-size:clamp(30px,3.6vw,52px);font-weight:800;letter-spacing:-.025em;line-height:1}
.work__head{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.9vw,26px);color:var(--yellow);margin-top:14px;font-weight:500}
.work.light .work__head{color:#B98600}
.work__head.is-med{font-size:clamp(16px,1.6vw,22px);line-height:1.25}
.work__head.is-long{font-size:clamp(15px,1.4vw,19px);line-height:1.3}
.work--mosaic .work__text{max-width:34ch}
.work--mosaic .work__name{font-size:clamp(26px,3vw,42px)}
.work__blurb{margin-top:20px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.66);max-width:38ch}
.work.light .work__blurb{color:#444}
.work__meta{margin-top:22px;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.4);font-weight:500}
.work.light .work__meta{color:#777}
.work__scope{margin-top:16px;font-size:12.5px;letter-spacing:.04em;line-height:1.7;color:rgba(255,255,255,.55);max-width:38ch}
.work__scope b{color:var(--yellow);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:10.5px}
.work.light .work__scope{color:#555}
.work.light .work__scope b{color:#B98600}
/* untampered gallery: fixed HEIGHT frames, width follows native ratio -> never stretched */
.gallery{display:flex;height:80vh;align-items:center;justify-content:center;gap:16px}
.gallery--stack{flex-direction:column}
.gallery--row{flex-direction:row;flex-wrap:wrap}
.grow-row{display:flex;gap:16px;justify-content:center;align-items:center}
.frame{height:26vh;aspect-ratio:var(--r);width:auto;flex:0 0 auto;border-radius:10px;overflow:hidden;
  background:#111;box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.work.light .frame{background:#e3e3e3;box-shadow:0 24px 60px -34px rgba(0,0,0,.5)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame--hero{height:46vh}
.frame--tall{height:58vh}
@media(max-width:920px){
  .work{grid-template-columns:1fr;gap:22px;overflow-y:auto;justify-content:start}
  .gallery{height:auto;flex-direction:column}
  .grow-row{flex-wrap:wrap}
  .frame,.frame--hero,.frame--tall{height:auto;width:min(78vw,420px)}
  .mrow{flex-wrap:wrap;height:auto!important}
  .mrow .frame{height:auto;width:min(78vw,420px)}
  .frame img{height:auto;aspect-ratio:var(--r)}
}

/* ---- work layout VARIANTS (creative variety) ---- */
/* text on the right (alternate rhythm) */
.work.rev{grid-template-columns:1fr minmax(260px,34%)}
/* feature: one large image-dominant hero */
.work--feature .frame--hero{height:74vh}
.work--feature .gallery{flex-direction:column}
/* grid: a set of equal frames (packaging / collateral suites) */
.gallery--grid{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;height:80vh;align-content:center}
.gallery--grid .frame{height:34vh}
.gallery--grid.four .frame{height:33vh}
/* dense mosaic: rows of mixed-ratio frames; row heights computed by build.py */
.gallery--mosaic{flex-direction:column;height:auto;max-height:82vh;gap:2.2vh}
.mrow{display:flex;gap:14px;justify-content:center;align-items:stretch;flex:0 0 auto}
.mrow .frame{height:100%}
.work--mosaic{grid-template-columns:minmax(240px,26%) 1fr}
.work--mosaic.rev{grid-template-columns:1fr minmax(240px,26%)}
/* living mosaic: independent tile drift; hover freezes ONE tile, rest keep moving */
@keyframes drift0{0%,100%{transform:translate(0,0)}33%{transform:translate(7px,-9px)}66%{transform:translate(-6px,6px)}}
@keyframes drift1{0%,100%{transform:translate(0,0)}33%{transform:translate(-8px,7px)}66%{transform:translate(6px,-6px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(9px,8px)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-9px,-7px)}}
.gallery--mosaic .frame{animation-duration:var(--dd,15s);animation-delay:var(--dph,0s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-play-state:running}
.slide.is-active .gallery--mosaic .drift-0{animation-name:drift0}
.slide.is-active .gallery--mosaic .drift-1{animation-name:drift1}
.slide.is-active .gallery--mosaic .drift-2{animation-name:drift2}
.slide.is-active .gallery--mosaic .drift-3{animation-name:drift3}
.gallery--mosaic .frame{transition:box-shadow .35s ease}
.gallery--mosaic .frame img{transition:transform .45s ease}
.gallery--mosaic .frame:hover{animation-play-state:paused;z-index:2;box-shadow:0 18px 60px -16px rgba(255,194,14,.28)}
.gallery--mosaic .frame:hover img{transform:scale(1.045)}
@media (prefers-reduced-motion: reduce){
  .gallery--mosaic .frame{animation:none!important}
  .gallery--mosaic .frame img{transition:none}
}
/* brand-tinted dark grounds for a few slides */
.work.tint-green{background:#07110d}
.work.tint-plum{background:#140912}
.work.tint-navy{background:#080b16}
.work.tint-warm{background:#130c07}

/* ---- MARQUEE (Federal Bank etc.) ---- */
.marquee{background:#05070e;display:flex;flex-direction:column;justify-content:center;gap:0;padding:var(--pad)}
.marquee .mq-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px}
.marquee .mq-tag{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);font-weight:600}
.marquee h2{font-size:clamp(34px,5vw,66px);font-weight:800;letter-spacing:-.03em;line-height:1}
.marquee .mq-head{font-family:var(--serif);font-style:italic;color:var(--yellow);font-size:clamp(17px,1.9vw,26px);margin-top:8px;font-weight:500}
.marquee .mq-blurb{max-width:52ch;color:rgba(255,255,255,.66);font-size:15px;line-height:1.55;text-align:right;max-width:40ch}
.marquee .mq-gal{display:flex;gap:18px;align-items:center;justify-content:center;height:60vh}
.marquee .frame{height:52vh}
.marquee .frame.sm{height:34vh}
@media(max-width:920px){.marquee{overflow-y:auto;justify-content:flex-start;padding-top:70px}.marquee .mq-top{flex-direction:column;align-items:flex-start;gap:12px}.marquee .mq-gal{flex-wrap:wrap;height:auto}.marquee .frame,.marquee .frame.sm{height:auto;width:min(80vw,420px)}.marquee .frame img{height:auto;aspect-ratio:var(--r)}.marquee .mq-blurb{text-align:left}}

/* ---- SOFTWARE section ---- */
.soft{background:#0a0a0b;display:grid;grid-template-columns:minmax(260px,34%) 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.soft__tag{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);font-weight:600;margin-bottom:18px}
.soft__name{font-size:clamp(26px,3.2vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1}
.soft__head{font-family:var(--serif);font-style:italic;color:var(--yellow);font-size:clamp(17px,1.8vw,24px);margin-top:12px;font-weight:500}
.soft__blurb{margin-top:18px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.66);max-width:38ch}
.soft__stack{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.soft__stack span{font-size:11.5px;border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:5px 12px;color:rgba(255,255,255,.7)}
/* browser-chrome frame for app screenshots */
.screen{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px -30px rgba(0,0,0,.9);background:#111}
.screen__bar{height:34px;background:#1a1a1c;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.screen__bar i{width:11px;height:11px;border-radius:50%;background:#3a3a3d;display:block}
.screen__bar i:first-child{background:#ff5f57}.screen__bar i:nth-child(2){background:#febc2e}.screen__bar i:nth-child(3){background:#28c840}
.soft__screens{display:flex;gap:16px;align-items:center;justify-content:center;height:78vh}
.soft__screens .screen{max-height:76vh}
.soft__screens .screen img{display:block;width:auto;max-height:calc(76vh - 34px);max-width:100%}
.soft__screens .screen.tall img{max-height:70vh}
@media(max-width:920px){.soft{grid-template-columns:1fr;overflow-y:auto;justify-content:start;align-items:start;padding-top:70px}.soft__screens{height:auto;flex-wrap:wrap}.soft__screens .screen img{max-height:none;width:min(80vw,520px)}}

/* ---------- ROSTER ---------- */
.roster{background:#000;justify-content:flex-start;padding-top:clamp(60px,10vh,110px)}
.roster .k{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--yellow);font-weight:600;margin-bottom:14px}
.roster h2{font-size:clamp(22px,2.6vw,36px);font-weight:700;letter-spacing:-.02em;margin-bottom:44px;max-width:30ch;color:rgba(255,255,255,.9)}
.names{display:flex;flex-wrap:wrap;gap:12px 30px;max-width:1200px}
.names span{font-size:clamp(18px,2.1vw,30px);font-weight:600;color:rgba(255,255,255,.34);letter-spacing:-.01em;transition:color .3s}
.names span:hover{color:#fff}
.names span.hi{color:#fff}

/* ---------- ENGAGE ---------- */
.engage{background:var(--white);color:#000;justify-content:flex-start;padding-top:clamp(64px,11vh,120px)}
.engage h2{font-size:clamp(28px,4vw,54px);font-weight:800;letter-spacing:-.025em;margin-bottom:40px}
.engage h2 em{color:#B98600}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.way{border:1px solid rgba(0,0,0,.12);border-radius:16px;padding:32px;min-height:240px;display:flex;flex-direction:column}
.way .n{font-family:var(--serif);font-style:italic;font-size:26px;color:#B98600}
.way h3{font-size:24px;font-weight:800;margin:14px 0 10px;letter-spacing:-.02em}
.way p{font-size:14px;line-height:1.55;color:#4a4a4a}
.way .best{margin-top:auto;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#B98600;font-weight:600;padding-top:16px}
@media(max-width:900px){.ways{grid-template-columns:1fr}}

/* ---------- CLOSE ---------- */
.close{background:#000;align-items:flex-start;justify-content:center}
.close h2{font-size:clamp(44px,8vw,120px);font-weight:900;letter-spacing:-.04em;line-height:.92;position:relative;z-index:2}
.close h2 em{color:var(--yellow)}
.close .cta{position:relative;z-index:2;margin-top:40px;display:inline-flex;align-items:center;gap:12px;background:var(--yellow);color:#000;text-decoration:none;font-weight:700;font-size:16px;padding:16px 30px;border-radius:99px;width:fit-content}
.close .contact{position:relative;z-index:2;margin-top:34px;font-size:16px;color:rgba(255,255,255,.7)}
.close .contact a{color:var(--yellow);text-decoration:none}
.close .wm{position:relative;z-index:2;height:22px;margin-top:60px;opacity:.85}

@media(prefers-reduced-motion:reduce){.deck{transition:none}}

/* ---- MOBILE: mosaic slides stack (must come AFTER the .work--mosaic grid rules,
       which otherwise override the earlier max-width:920px block) ---- */
@media(max-width:920px){
  .work--mosaic,.work--mosaic.rev{grid-template-columns:1fr;gap:20px;overflow-y:auto;justify-content:start;align-items:start;padding-top:76px;padding-bottom:80px}
  .work--mosaic .work__text{max-width:none}
  .work--mosaic .work__name{font-size:clamp(26px,7vw,38px)}
  .gallery--mosaic{max-height:none;height:auto;gap:12px;width:100%}
  .mrow{flex-wrap:wrap;height:auto!important;gap:12px;width:100%}
  .mrow .frame{height:auto!important;width:min(86vw,420px);flex:0 0 auto}
  .mrow .frame img{height:auto;aspect-ratio:var(--r)}
  /* no drift on phones — saves battery and avoids jitter while scrolling */
  .gallery--mosaic .frame{animation:none!important}
}

/* ---- MOBILE: tall content slides must scroll, not clip.
       caps / roster / engage overflow 812px on a phone; without this the last
       capabilities, most client names and the 3rd engagement model are unreachable. ---- */
@media(max-width:920px){
  .slide.caps,.slide.roster,.slide.engage,.slide.process,.slide.stats{
    overflow-y:auto;justify-content:flex-start;align-items:stretch;
    padding-top:76px;padding-bottom:88px;-webkit-overflow-scrolling:touch}
  .slide.roster .names{font-size:13px;gap:8px 14px}
  .slide.caps .capgrid{gap:16px}
}