/* =====================================================================
   SIIA STUDIO® — cinematic scrollytelling site (v2, faithful rebuild)
   Black canvas, white type, gold #FAB300. Display: Archivo Expanded
   (Organetto-Ultrabold-Expanded stand-in). Swap media via [data-media].
   ===================================================================== */

:root{
  --bg:#000; --fg:#fff; --gold:#FAB300; --muted:#8a8a8a;
  --line:rgba(255,255,255,.14);
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(18px,4vw,64px);
  /* white page frame around rounded black panels (matches reference: r=19px, ~13px inset) */
  --frame:13px;      /* left/right inset */
  --gap:10px;        /* vertical gap between panels */
  --radius:19px;
  --headerH:52px;    /* white strip at the very top holding the credit */
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:#fff;color:var(--fg);font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}

/* ---- white page frame: every panel is a rounded black card on white ---- */
#main{padding-top:var(--headerH)}
#main > section,#main > footer{
  margin:0 var(--frame) var(--gap);
  border-radius:var(--radius);
  /* MUST be `clip`, not `hidden`: overflow:hidden turns the section into a
     scroll container and silently kills position:sticky on its children
     (the pinned opening stage would scroll away and leave a black screen). */
  overflow:clip;
  background:#000;
}
/* sticky panels must stick below the white gap, not at 0 */
#main > .showcase,#main > .reveal-media,#main > .split{top:var(--gap)}
.opening__stage{border-radius:var(--radius)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#000}

html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- display type ---------- */
.display{font-family:"Archivo Expanded","Archivo",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.86;font-stretch:125%}
.display--xl{font-size:clamp(52px,12vw,180px)}
.display--hero{font-size:clamp(40px,8.5vw,130px);line-height:.9}
.display--lg{font-size:clamp(34px,6.5vw,92px);line-height:.95}
.display--md{font-size:clamp(20px,3vw,40px);font-weight:700;text-transform:none;letter-spacing:0}
.eyebrow{font-size:clamp(11px,1vw,14px);letter-spacing:.05em;text-transform:lowercase;opacity:.85}
.line{display:block;overflow:hidden}
.line>span{display:block;will-change:transform}

/* =====================================================================
   FIXED CHROME
   ===================================================================== */
/* credit lives in the white strip at the top of the page (dark text on white) */
.site-credit{position:absolute;top:0;left:0;width:100%;height:var(--headerH);z-index:60;
  display:flex;align-items:center;gap:10px;padding:0 calc(var(--frame) + 10px);
  font-size:12px;letter-spacing:.01em;color:#111}
.site-credit__logo{width:30px;height:19px;border-radius:4px;background:#111;display:inline-block;flex:0 0 auto}
.site-credit__text{margin-left:auto}
.site-credit b{font-weight:700;text-decoration:underline}
.site-credit__text{opacity:.9}.site-credit__text b{font-weight:700}
@media(max-width:700px){.site-credit__text{display:none}}
.cta-pill{position:fixed;top:calc(var(--headerH) + 22px);right:calc(var(--frame) + 26px);z-index:60;background:var(--gold);color:#000;border-radius:40px;padding:14px 26px;overflow:hidden;font-family:"Archivo Expanded","Archivo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;box-shadow:0 6px 30px rgba(250,179,0,.25)}
.cta-pill__inner{position:relative;display:block;height:1em;overflow:hidden}
.cta-pill__inner span{display:block;transition:transform .5s var(--ease)}
.cta-pill__inner span:last-child{position:absolute;top:100%;left:0}
.cta-pill:hover .cta-pill__inner span{transform:translateY(-100%)}
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:70;pointer-events:none}
.scroll-progress i{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}

/* =====================================================================
   MEDIA PLACEHOLDER SYSTEM
   ===================================================================== */
[data-media]{position:relative;overflow:hidden;background:#0d0d0f}
[data-media]::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#1a1a1e,#101014 50%,#0a0a0c)}
[data-media]::after{content:attr(data-media);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;font-family:"Archivo",monospace;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.32);z-index:1;border:1px dashed rgba(255,255,255,.12)}
[data-media]>img,[data-media]>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
/* once real media is present, kill the label + dashed border completely
   (transparent PNGs let the label bleed through otherwise) */
[data-media].has-media::before,[data-media].has-media::after{content:none}

/* =====================================================================
   PRISM — signature rainbow background
   ===================================================================== */
.prism{position:absolute;inset:0;overflow:hidden;background:#000}
/* DISTINCT vertical light columns (hard stops) with black at both edges —
   the reference reads as separate slabs of colour, not one blended wash. */
.prism__bars{
  position:absolute;inset:-14% 0;
  /* measured off the reference: separated slabs with real black gaps and a
     wide pale-cream core, NOT a continuous rainbow */
  background:linear-gradient(90deg,
    #000 0%,     #000 7%,
    #0a1a6e 7%,  #0a1a6e 9.5%,
    #000 9.5%,   #000 20%,
    #1464d8 20%, #1464d8 29%,
    #000 29%,    #000 34%,
    #12c0d8 34%, #12c0d8 41%,
    #1fbf9a 41%, #1fbf9a 48%,
    #e8e3b8 48%, #e8e3b8 56%,   /* wide pale cream core */
    #f7d24a 56%, #f7d24a 63%,
    #f79a2a 63%, #f79a2a 70%,
    #f2564e 70%, #f2564e 76%,
    #e0219a 76%, #e0219a 83%,
    #000 83%,    #000 87%,
    #7a2ee0 87%, #7a2ee0 94%,
    #000 94%,    #000 100%);
  background-size:112% 100%;background-position:center;background-repeat:no-repeat;
  /* strong blur turns the hard stops into glowing light columns */
  filter:blur(17px) saturate(1.25) brightness(1.04) contrast(1.02);
  animation:prismBreathe 12s ease-in-out infinite;transform:scaleY(1.35);opacity:1;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 84%,transparent 100%);
}
/* fine vertical slit texture on top of the columns */
.prism__bars::before{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(90deg,rgba(0,0,0,.30) 0,rgba(0,0,0,0) 5px,rgba(255,255,255,.07) 14px,rgba(0,0,0,0) 24px,rgba(0,0,0,.30) 30px);mix-blend-mode:overlay}
.prism__glow{position:absolute;inset:0;z-index:2;background:radial-gradient(90% 70% at 50% 42%,transparent 30%,rgba(0,0,0,.5) 72%,rgba(0,0,0,.9) 100%),linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 22%,transparent 70%,rgba(0,0,0,.75) 100%)}
@keyframes prismBreathe{0%,100%{background-size:118% 100%}50%{background-size:127% 100%}}

/* =====================================================================
   OPENING — pinned scene (sticky stage + scrubbed timeline)
   ===================================================================== */
.opening{position:relative;height:700vh;background:#000}
.opening__stage{position:sticky;top:var(--gap);height:calc(100vh - var(--headerH) - var(--gap));overflow:hidden;background:#000}
.opening__stage>*{position:absolute;inset:0}

/* prism inside stage */
.opening .prism{z-index:1}

/* portrait revealing to full-bleed from the bottom up */
.stage-portrait{z-index:2;clip-path:inset(100% 0% 0% 0%)}
.stage-portrait::after{font-size:12px}
/* keep faces framed: bias portrait crops toward the top of the image */
.stage-portrait>img{object-position:50% 18%}
.showcase__media>img{object-position:50% 30%}

/* oversized translucent brand mark (the big "Ō" behind the headline) */
/* proportions measured off the reference hero: bar 17%x4.3% of the card,
   ring 38%x27% with a ~3.9% stroke, small gap between them */
.brandmark{z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4%;pointer-events:none;mix-blend-mode:multiply}
.brandmark__bar{width:17%;height:4.3%;border-radius:999px;background:#ef7a1a;flex:0 0 auto}
.brandmark__ring{width:38%;height:27%;border-radius:999px;border:2.6vh solid #ef7a1a;flex:0 0 auto}

/* hero cluster — SCROLL HERE only, parked low so it never covers the mark */
.stage-hero{z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:5%}
.capsule{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(340px,52vw);height:min(560px,74vh);border:2px solid rgba(255,255,255,.85);border-radius:999px;box-shadow:0 0 60px rgba(255,255,255,.15) inset,0 0 40px rgba(255,255,255,.1)}
.mark{position:relative;width:clamp(120px,15vw,210px);aspect-ratio:1;border-radius:50%}
.mark::after{font-size:10px}
.stage-scroll{position:relative;font-family:"Archivo Expanded","Archivo",sans-serif;font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:clamp(26px,3.4vw,48px);line-height:.82;text-align:center;color:#fff}
.stage-scroll span{display:block}

/* coins */
.coins{z-index:3;display:flex;gap:clamp(10px,1.6vw,26px);align-items:flex-end;justify-content:center;padding-bottom:8vh}
.coin{width:clamp(48px,6vw,86px);height:clamp(48px,6vw,86px);border-radius:50%;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.coin::before,.coin::after{content:none}
.coin:nth-child(1){background:radial-gradient(circle at 35% 30%,#3ad07a,#0b7a42)}
.coin:nth-child(2){background:radial-gradient(circle at 35% 30%,#ffd24a,#c98a00)}
.coin:nth-child(3){background:radial-gradient(circle at 35% 30%,#ff6a5a,#b21f2d)}
.coin:nth-child(4){background:radial-gradient(circle at 35% 30%,#b083ff,#5a2ea8)}
.coin:nth-child(5){background:radial-gradient(circle at 35% 30%,#5ac8ff,#1f5ab2)}

/* DESIGN YOUR FUTURE — one line, assembles from edges */
/* one line spanning almost the full card width, like the reference */
.dyf{z-index:5;display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.3vw,30px);opacity:0;padding:0 2vw}
.dyf__w{font-family:"Archivo Expanded","Archivo",sans-serif;font-weight:800;font-stretch:125%;
  text-transform:uppercase;letter-spacing:-.02em;color:#fff;
  font-size:clamp(26px,7.7vw,122px);line-height:.9;white-space:nowrap;will-change:transform}

/* circular video portals — alternate left / right / left like the reference */
.stage-portal{z-index:6;display:flex;align-items:center;justify-content:center;opacity:0}
.stage-portal[data-portal="0"]{justify-content:flex-start;padding-left:clamp(20px,7vw,140px)}
.stage-portal[data-portal="1"]{justify-content:flex-end;padding-right:clamp(20px,7vw,140px)}
.stage-portal[data-portal="2"]{justify-content:flex-start;padding-left:clamp(20px,7vw,140px)}
.stage-portal__media{width:min(500px,60vw);aspect-ratio:1;border-radius:50%;overflow:hidden;will-change:transform;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.stage-portal__media::after{font-size:11px}

/* SETTING TRENDS */
.setting{z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;opacity:0}
.setting .display span{display:block;color:#fff}
.setting__sub{font-size:clamp(12px,1.4vw,18px);letter-spacing:.04em;text-transform:uppercase;opacity:.9}

/* =====================================================================
   SHOWCASE — full-bleed vertical reveal + circle wipe + big tagline
   Sticky stacking: each panel pins at top and the next slides up OVER it
   (the rising-panel transition from the reference site).
   ===================================================================== */
.showcase,.reveal-media,.split{position:sticky;top:0}
.showcase{position:sticky;height:calc(100vh - var(--headerH) - var(--gap));overflow:hidden;background:#000;display:flex;align-items:flex-end}
.showcase__media{position:absolute;inset:0;z-index:0;will-change:clip-path,transform}
.showcase__media::after{font-size:12px}
.showcase__copy{position:relative;z-index:2;width:100%;padding:var(--pad);display:flex;flex-direction:column;gap:10px}
.showcase__copy::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}
.showcase__brand{color:var(--gold);font-family:"Archivo Expanded","Archivo";font-weight:700;font-size:clamp(11px,1.1vw,15px);text-transform:uppercase;letter-spacing:.04em}
.showcase .display--hero{color:#fff}
.showcase__tag{font-size:clamp(14px,1.6vw,22px);opacity:.85}
/* per-letter reveal helper — initial offset is set by GSAP (yPercent), not CSS,
   so the reveal tween and the initial state use the same transform channel */
.rw-char{display:inline-block;will-change:transform}
.rw-wrap{display:inline-block;overflow:hidden;vertical-align:top}

/* email / contact-mid showcase */
.showcase--email .showcase__copy{align-items:flex-start;gap:16px;padding-bottom:12vh}
.showcase__mail{color:#fff;transition:color .3s var(--ease);word-break:break-word}
.showcase__mail:hover{color:var(--gold)}
.showcase__credit{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}

/* =====================================================================
   SCROLL-SCRUBBED VIDEO — playback tied to scroll position
   ===================================================================== */
.scrubvid{height:320vh;position:relative;background:#000}
.scrubvid__pin{position:sticky;top:var(--gap);height:calc(100vh - var(--headerH) - var(--gap));overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:var(--radius)}
.scrubvid__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  will-change:transform;transform-origin:52% 48%}
.scrubvid__cap{position:relative;z-index:2;color:#fff;mix-blend-mode:difference;text-align:center}
.scrubvid__pin::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 80% at 50% 50%,transparent 45%,rgba(0,0,0,.55))}

/* =====================================================================
   FULL-BLEED REVEAL MEDIA (interstitial video/image)
   ===================================================================== */
.reveal-media{background:#000;height:calc(100vh - var(--headerH) - var(--gap));display:flex;align-items:center;padding:clamp(20px,4vh,54px) clamp(20px,3vw,48px)}
.reveal-media__frame{position:relative;width:100%;height:clamp(60vh,84vh,100vh);border-radius:18px;overflow:hidden;background:#0d0d0f;will-change:clip-path,transform}
.reveal-media__frame::after{font-size:12px}
.reveal-media__frame>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.mute-btn{position:absolute;right:18px;bottom:18px;z-index:5;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:40px;padding:9px 18px;font-size:11px;letter-spacing:.08em;cursor:pointer;backdrop-filter:blur(6px);text-transform:uppercase}
.mute-btn:hover{background:var(--gold);color:#000;border-color:var(--gold)}

/* split row */
.split{background:#000;height:calc(100vh - var(--headerH) - var(--gap));align-content:center;display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.5vw,22px);padding:clamp(20px,4vh,54px) clamp(20px,3vw,48px)}
.split figure{height:clamp(50vh,76vh,86vh);border-radius:16px;overflow:hidden}
.split__b{transform:translateY(4%)}
@media(max-width:760px){.split{grid-template-columns:1fr}.split__b{transform:none}}

/* =====================================================================
   STATEMENT (CONNECT / closing)
   ===================================================================== */
.statement{position:relative;min-height:100vh;overflow:hidden;display:flex}
.statement--dark{background:#000}
.statement__bg{position:absolute;inset:0;z-index:0}
.statement__bg::after{font-size:12px}
.statement__inner{position:relative;z-index:2;width:100%;padding:var(--pad);display:flex;flex-direction:column;justify-content:center;gap:18px}
.statement--dark .statement__inner,.statement--object .statement__inner{align-items:center;text-align:center}
.statement__inner--bottom{justify-content:flex-end;padding-bottom:8vh}
.statement__inner--center{align-items:center;text-align:center}
.statement__inner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.65))}

/* =====================================================================
   COST — pricing
   ===================================================================== */
.cost{background:#000;padding:clamp(60px,12vh,140px) var(--pad) clamp(80px,14vh,180px)}
.cost__title{text-align:center;margin-bottom:clamp(40px,6vh,80px);color:#fff}
.cost__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,26px);max-width:1400px;margin:0 auto}
.price{border:1px solid var(--line);border-radius:18px;padding:clamp(22px,2.4vw,38px);background:linear-gradient(180deg,#0b0b0d,#050506);display:flex;flex-direction:column;gap:16px;min-height:520px;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.price:hover{border-color:rgba(250,179,0,.5);transform:translateY(-6px)}
.price--featured{border-color:rgba(250,179,0,.45);box-shadow:0 30px 80px rgba(250,179,0,.06)}
.price__head{display:flex;justify-content:space-between;align-items:center}
.price__head h3{font-family:"Archivo Expanded","Archivo";font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:clamp(18px,1.8vw,26px)}
.price__mark{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:0 0 auto}
.price__mark::after{font-size:0}
.price ul{list-style:none;display:flex;flex-direction:column;gap:12px;flex:1;margin-top:8px}
.price li{font-size:clamp(12px,1vw,14px);color:#cfcfcf;padding-bottom:12px;border-bottom:1px solid var(--line)}
.price__timeline{font-size:11px;letter-spacing:.08em;color:var(--gold);text-transform:uppercase}
.price__foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.price__name{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.price__value{font-family:"Archivo Expanded","Archivo";font-weight:800;font-stretch:125%;font-size:clamp(22px,2.4vw,38px);color:#fff}
@media(max-width:900px){.cost__grid{grid-template-columns:1fr}.price{min-height:auto}}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact{min-height:70vh;background:#000;display:flex;align-items:center;justify-content:center;padding:var(--pad);border-top:1px solid var(--line)}
.contact__inner{text-align:center;display:flex;flex-direction:column;gap:22px}
.contact__email{color:#fff;transition:color .3s var(--ease);word-break:break-word}
.contact__email:hover{color:var(--gold)}
.contact__credit{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.contact__credit:hover{color:#fff}

@media(prefers-reduced-motion:reduce){.prism__bars{animation:none}*{scroll-behavior:auto!important}}