/* Prosperus · v3 elevation layer. Loads after glass.css and fusion.css.
   Type roles, living light, real-feeling glass, scroll reveals, product-first case files. */
:root{ --ease:cubic-bezier(.2,.8,.2,1); --t1:.25s; --t2:.5s; --t3:.9s }

/* ---------- type roles ---------- */
.t-display{font-weight:300; font-size:clamp(3rem,7.6vw,8rem); line-height:.9; letter-spacing:-.05em}
.t-head{font-weight:300; font-size:clamp(2.4rem,4.6vw,4.2rem); line-height:1; letter-spacing:-.035em}
.t-state{font-weight:300; font-size:clamp(2rem,4.6vw,4.4rem); line-height:1.06; letter-spacing:-.03em}
.t-lead{font-size:clamp(17px,1.35vw,19.5px); line-height:1.55}
.t-cap{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute)}
.sec-head h2{font-size:clamp(2.4rem,4.6vw,4.2rem); letter-spacing:-.035em; line-height:1}
.hero4 h1{font-size:clamp(3rem,7.6vw,8rem); line-height:.9; letter-spacing:-.05em}
.hero4 .lead{font-size:clamp(17px,1.35vw,19.5px)}
.state4 p.big{font-size:clamp(2rem,4.6vw,4.4rem); letter-spacing:-.03em; max-width:24ch}
@media (max-width:560px){ .hero4 h1{font-size:2.85rem; line-height:.94; letter-spacing:-.04em} .sec-head h2{font-size:2.2rem} .state4 p.big{font-size:1.9rem} }

/* ---------- surfaces ---------- */
.stone{background:
  radial-gradient(120% 70% at 20% -10%, rgba(255,255,255,.55), transparent 60%),
  radial-gradient(80% 60% at 100% 100%, rgba(245,194,122,.14), transparent 60%),
  var(--lime) var(--stone) center/1100px 1100px}
.sec.dk, .state4.dk{background:
  radial-gradient(90% 60% at 50% 110%, rgba(59,75,92,.55), transparent 60%),
  var(--ink)}

/* ---------- living light ---------- */
.field{filter:blur(56px) saturate(130%)}
.field i{animation:drift var(--dur,48s) ease-in-out infinite alternate; will-change:transform}
.field i:nth-child(1){--dur:46s}
.field i:nth-child(2){--dur:58s; animation-delay:-22s}
.field i:nth-child(3){--dur:52s; animation-delay:-37s}
.field i:nth-child(4){--dur:66s; animation-delay:-11s}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(6%,-5%,0) scale(1.08)} 100%{transform:translate3d(-5%,6%,0) scale(.95)}}
.sweep{position:absolute; inset:0; z-index:0; pointer-events:none; mix-blend-mode:soft-light; opacity:.55;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.9) 50%, transparent 70%); background-size:260% 100%; animation:sweep 18s var(--ease) infinite}
@keyframes sweep{0%{background-position:120% 0} 100%{background-position:-120% 0}}

/* ---------- scroll reveals ---------- */
.rv{opacity:0; transform:translateY(18px); transition:opacity var(--t3) var(--ease), transform var(--t3) var(--ease)}
.rv.in{opacity:1; transform:none}
.rv:nth-child(2){transition-delay:.08s} .rv:nth-child(3){transition-delay:.16s} .rv:nth-child(4){transition-delay:.24s} .rv:nth-child(5){transition-delay:.32s}
html.no-io .rv{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1; transform:none} .field i,.sweep,.obj,.gp{animation:none!important} }

/* ---------- hero: glass that is lit, not drawn ---------- */
.hero4{min-height:clamp(640px,94vh,980px)}
.hero4 .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}
.stage4{--mx:.5; --my:.4; height:clamp(440px,48vw,660px)}
.stage4 .floor{position:absolute; left:4%; right:4%; bottom:5%; height:3%; border-radius:50%; background:rgba(25,50,90,.18); filter:blur(14px)}
.stage4 .obj, .stage4 .gp{animation:breathe var(--bd,11s) ease-in-out infinite alternate}
.stage4 .obj:nth-of-type(2){--bd:13s; animation-delay:-4s} .stage4 .obj:nth-of-type(3){--bd:9s; animation-delay:-2s} .stage4 .obj:nth-of-type(4){--bd:12s; animation-delay:-7s}
@keyframes breathe{0%{transform:translateY(0)} 100%{transform:translateY(-7px)}}
/* sphere: body, inner refraction, chromatic rim, specular */
.stage4 .sphere{position:absolute; overflow:hidden;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,1) 0, rgba(255,255,255,.55) 12%, rgba(220,232,246,.25) 36%, rgba(127,180,255,.18) 62%, rgba(246,200,224,.3) 84%, rgba(255,255,255,.75) 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), inset -12px -16px 36px rgba(110,140,185,.28), inset 10px 12px 26px rgba(255,255,255,.55),
    inset -3px -3px 0 rgba(127,180,255,.35), inset 3px 3px 0 rgba(245,194,122,.28), 0 40px 50px -30px rgba(25,50,90,.5)}
.stage4 .sphere::before{content:""; position:absolute; left:18%; top:22%; width:70%; height:70%; border-radius:50%;
  background:radial-gradient(circle at 60% 70%, rgba(245,194,122,.5), rgba(246,200,224,.35) 30%, rgba(199,240,230,.3) 55%, rgba(127,180,255,.28) 75%, transparent 90%); filter:blur(3px); opacity:.9}
.stage4 .sphere::after{content:""; position:absolute; left:calc(14% + var(--mx)*16%); top:calc(10% + var(--my)*12%); width:34%; height:20%; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,1), rgba(255,255,255,.65) 40%, transparent 72%); transform:rotate(-24deg); filter:blur(1px)}
/* arch: thick glass slab with refraction band and specular edge */
.stage4 .arch{overflow:hidden; background:linear-gradient(105deg, rgba(255,255,255,.7), rgba(255,255,255,.18) 32%, rgba(220,232,246,.3) 55%, rgba(255,255,255,.45) 78%, rgba(255,255,255,.12));
  box-shadow:inset 8px 0 18px rgba(255,255,255,.6), inset -10px 0 24px rgba(110,140,185,.25), inset 0 -2px 0 rgba(245,194,122,.35), inset 0 2px 0 rgba(255,255,255,.95), 0 44px 56px -32px rgba(25,50,90,.5)}
.stage4 .arch::before{content:""; position:absolute; left:22%; top:8%; width:14%; height:84%; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.95) 20%, rgba(255,255,255,.95) 60%, rgba(255,255,255,0)); filter:blur(1.5px); opacity:.9}
.stage4 .arch::after{content:""; position:absolute; right:12%; top:16%; width:5%; height:60%; border-radius:999px;
  background:linear-gradient(180deg, rgba(127,180,255,.5), rgba(199,240,230,.5), rgba(246,200,224,.55), rgba(245,194,122,.5)); filter:blur(2px); opacity:.85}
/* vial with amber liquid */
.stage4 .vial{overflow:hidden; background:linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.85) 28%, rgba(255,255,255,.2) 52%, rgba(255,255,255,.45) 80%, rgba(255,255,255,.2));
  box-shadow:inset 0 1px 0 #fff, inset 2px 0 0 rgba(255,255,255,.7), inset -2px 0 0 rgba(127,180,255,.35), 0 34px 44px -28px rgba(25,50,90,.5)}
.stage4 .vial::before{content:""; position:absolute; left:8%; right:8%; bottom:6%; height:46%; border-radius:999px;
  background:linear-gradient(180deg, rgba(245,194,122,.55), rgba(245,194,122,.85) 30%, rgba(214,150,80,.85)); box-shadow:inset 0 3px 0 rgba(255,255,255,.7)}
/* caustics */
.stage4 .caustic{filter:blur(18px); opacity:.95; mix-blend-mode:multiply}
.stage4 .caustic.sharp{filter:blur(6px); opacity:.55; height:2.5%; width:38%; left:30%; bottom:8.5%; border-radius:50%;
  background:linear-gradient(90deg, #7FB4FF, #C7F0E6, #F6C8E0, #F5C27A); mix-blend-mode:normal}
/* Glass P: chromatic rim and a cursor-following highlight */
.stage4 .gp .rod, .stage4 .gp .disc{box-shadow:inset 0 .02em 0 rgba(255,255,255,.95), inset -.02em -.02em 0 rgba(127,180,255,.4), inset .02em .02em 0 rgba(245,194,122,.3), 0 .35em .6em -.3em rgba(25,50,90,.5)}
.stage4 .gp .disc{background:linear-gradient(140deg, rgba(255,255,255,.6), rgba(199,240,230,.4) 45%, rgba(246,200,224,.42) 75%, rgba(245,194,122,.4))}
.stage4 .gp .disc::before{content:""; position:absolute; left:calc(12% + var(--mx)*22%); top:calc(8% + var(--my)*14%); width:42%; height:22%; border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,255,255,.95), transparent 70%); transform:rotate(-20deg)}
.stage4 .gp{filter:drop-shadow(0 .5em .8em rgba(25,50,90,.25))}
@media (max-width:960px){
  .hero4{min-height:0; padding-top:96px; padding-bottom:40px}
  .hero4 .wrap{grid-template-columns:minmax(0,1fr)}
  .stage4{order:0; height:300px; margin-top:12px}
  .stage4 .gp{font-size:120px}
}

/* ---------- case files: product first ---------- */
.rail4{grid-auto-columns:minmax(300px,32%)}
.case{border-radius:28px; box-shadow:0 30px 60px -44px rgba(25,50,90,.45)}
.case .ph{aspect-ratio:.86; background:var(--lime) var(--stone) center/900px 900px}
.case .ph.plate{display:grid; place-items:center; padding:9% 14%}
.case .ph.plate img{object-fit:contain; height:auto; filter:drop-shadow(0 30px 30px rgba(25,50,90,.28))}
.case .file4{padding:18px 20px 20px; gap:8px}
.case .file4 .top{align-items:center}
.case b{font-size:24px}
.case .one{font-size:14px; color:var(--slate)}
.case dl{display:none}
.case .site{position:absolute; right:12px; bottom:12px; width:32%; aspect-ratio:1.4; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.9); box-shadow:0 14px 24px -14px rgba(25,50,90,.6); opacity:0; transform:translateY(8px); transition:opacity var(--t2) var(--ease), transform var(--t2) var(--ease)}
.case .site img{width:100%; height:100%; object-fit:cover; object-position:top}
.case .ph{position:relative}
.case:hover .site{opacity:1; transform:none}
.case:hover{transform:translateY(-5px); box-shadow:0 44px 70px -40px rgba(25,50,90,.55)}

/* ---------- founder beat ---------- */
.founder{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,80px); align-items:center}
.founder .seal{position:relative; aspect-ratio:1; border-radius:32px; display:grid; place-items:center; overflow:hidden}
.founder .seal .gp{font-size:clamp(120px,14vw,200px); z-index:2}
.founder .seal .caustic{width:70%; height:10%; left:15%; bottom:12%}
.founder .copy{display:grid; gap:20px}
.founder .copy p{font-size:17px}
.founder .name{display:grid; gap:4px; padding-top:18px; border-top:1px solid rgba(15,23,32,.1)}
.founder .name b{font-weight:400; font-size:22px; letter-spacing:-.01em}
@media (max-width:860px){ .founder{grid-template-columns:minmax(0,1fr)} .founder .seal{max-width:360px} }

/* ---------- proof strip ---------- */
.proof{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:clamp(36px,5vw,64px)}
.proof div{padding:22px 24px; border-radius:22px; display:grid; gap:6px}
.proof b{font-weight:300; font-size:clamp(2rem,3.4vw,3rem); letter-spacing:-.03em; line-height:1}
.proof span{font-size:14px; color:var(--slate)}
@media (max-width:860px){ .proof{grid-template-columns:1fr 1fr} }

/* ---------- contact: two doors ---------- */
.doors{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px}
.door{border-radius:24px; padding:22px; display:grid; gap:10px; color:#fff; text-decoration:none; align-content:start; transition:transform var(--t1) var(--ease), background var(--t1)}
.door:hover{transform:translateY(-2px); background:rgba(255,255,255,.11)}
.door b{font-weight:300; font-size:24px; letter-spacing:-.015em}
.door span{font-size:14px; color:#B8C4D0}
.next3{display:grid; gap:10px; margin-top:6px}
.next3 .lbl{display:grid; grid-template-columns:28px 1fr; gap:10px; text-transform:none; letter-spacing:.02em; font-size:12.5px; color:#8FA0B2}
.next3 .lbl i{font-style:normal; color:#fff}
@media (max-width:560px){ .doors{grid-template-columns:1fr} }

/* ---------- footer ---------- */
.foot{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); padding-block:72px 48px}
.foot .brand{font-size:28px}
.foot .who{font-size:14px; color:var(--slate); display:grid; gap:4px}
.foot .who b{font-weight:400; color:var(--ink)}
.footwrap{position:relative; overflow:hidden; isolation:isolate; background:var(--clear)}
.footwrap .field{opacity:.35}
@media (max-width:860px){ .foot{grid-template-columns:1fr 1fr} }

/* spec table and tiers: a little more air */
.specs4 td:first-child{font-size:21px}
.tier{padding:34px; border-radius:28px}
.tier h3{font-size:30px}
.tl4 h3{font-size:28px}

/* ---------- v3 inner pages ---------- */
.workhero, .casehero{position:relative}
.workhero .wrap, .casehero .wrap{position:relative; z-index:2}
.plateframe{position:relative}
.plateframe .site2{position:absolute; right:-6%; bottom:6%; width:46%; aspect-ratio:1.45; border-radius:18px; overflow:hidden; padding:0; transition:transform .5s var(--ease)}
.plateframe .site2 img{width:100%; height:100%; object-fit:cover; object-position:top; border-radius:inherit}
.cf-media:hover .site2{transform:translateY(-6px) rotate(-1deg)}
.cf-ph.glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 50px 90px -50px rgba(25,50,90,.55)}
.cf-ph.contain{padding:10%}
.cf-ph.contain img{filter:drop-shadow(0 30px 30px rgba(25,50,90,.28))}
.casefile{scroll-margin-top:90px}
.index{gap:4px}
.index a{font-size:15px}
.sheet{border-radius:28px; padding:clamp(22px,3vw,34px)}
.svc-body.sheet{gap:22px}
.svc-body .btn{justify-self:start}
.ch-media.glass{padding:0}
.ch-media.contain{display:grid; place-items:center; padding:10%}
.ch-media.contain img{aspect-ratio:auto; height:auto; object-fit:contain; filter:drop-shadow(0 30px 30px rgba(25,50,90,.28))}
.gallery{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px}
.gallery figure{margin:0; border-radius:26px; overflow:hidden; position:relative; aspect-ratio:1.5}
.gallery figure.g-tall{aspect-ratio:auto}
.gallery figure img{width:100%; height:100%; object-fit:cover}
.gallery figure.contain{display:grid; place-items:center; padding:10%}
.gallery figure.contain img{object-fit:contain; height:auto; filter:drop-shadow(0 30px 30px rgba(25,50,90,.28))}
.gallery figcaption{position:absolute; left:16px; bottom:14px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.75); color:var(--ink); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.nextcase{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:24px; align-items:center; border-radius:30px; padding:clamp(22px,3vw,36px); text-decoration:none; color:var(--ink)}
.nextcase .nc-copy{display:grid; gap:10px}
.nextcase .nc-title{font-weight:300; font-size:clamp(2.6rem,6vw,5.2rem); letter-spacing:-.04em; line-height:.95}
.nextcase .nc-tag{font-size:17px; color:var(--slate)}
.nextcase .nc-ph{aspect-ratio:1.2; border-radius:22px; overflow:hidden; display:block}
.nextcase .nc-ph img{width:100%; height:100%; object-fit:cover}
.nextcase .nc-ph.contain{display:grid; place-items:center; padding:8%}
.nextcase .nc-ph.contain img{object-fit:contain; height:auto}
.nextcase:hover{color:var(--ink)}
.steps3 .st{border-radius:26px}
@media (max-width:960px){ .gallery, .nextcase{grid-template-columns:minmax(0,1fr)} .plateframe .site2{right:4%} }