/* Prosperus · Fusion layout (homepage + work). Requires glass.css. */

.contact-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,80px); align-items:start}
@media (max-width:960px){ .contact-grid{grid-template-columns:minmax(0,1fr)} }

.dk{background:var(--ink); color:#fff}
.dk p{color:#B8C4D0}
.dk .lbl{color:#8FA0B2}
.dk .lbl b{color:#fff}
.grad{background:var(--prism); -webkit-background-clip:text; background-clip:text; color:transparent}
/* hero: stone scene, the Glass P stands among the sculptures */
.hero4{min-height:clamp(680px,96vh,1020px); display:grid; align-items:center; margin-top:-82px; padding-top:110px}
.hero4 .wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:24px; align-items:center; position:relative; z-index:2}
.hero4 .wrap.sb{display:block}
.hero4 h1{font-size:clamp(3.2rem,7.2vw,7.4rem); line-height:.92; letter-spacing:-.045em}
.hero4 .lead{font-size:clamp(17px,1.4vw,19px); margin-top:24px; max-width:46ch}
.hero4 .ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:36px}
.stage4{position:relative; height:clamp(420px,46vw,640px)}
.stage4 .gp{position:absolute; left:30%; top:12%; font-size:clamp(130px,15vw,230px); z-index:3}
.specbar4{position:relative; z-index:2; margin-top:clamp(28px,4vw,56px); border-radius:22px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.specbar4 div{padding:16px 20px; display:grid; gap:4px}
.specbar4 div + div{border-left:1px solid rgba(255,255,255,.7)}
.specbar4 b{font-weight:400; font-size:17px}
/* statement */
.state4{padding-block:clamp(100px,13vw,180px)}
.state4 p.big{color:#fff; font-weight:300; font-size:clamp(2.1rem,4.8vw,4.4rem); line-height:1.07; letter-spacing:-.025em; max-width:23ch}
/* layers on dark glow */
.layers4{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center}
.stack4{position:relative; height:clamp(380px,40vw,520px)}
.pane4{position:absolute; width:62%; height:58%; border-radius:26px; padding:22px; display:grid; align-content:start; gap:8px; color:#fff}
.pane4 b{font-weight:300; font-size:26px; letter-spacing:-.01em}
.pane4:nth-child(1){left:0; top:0}.pane4:nth-child(2){left:19%; top:21%}.pane4:nth-child(3){left:38%; top:42%}
.layers4 ol{margin:0; padding:0; list-style:none; display:grid; gap:22px}
.layers4 li{display:grid; grid-template-columns:52px minmax(0,1fr); gap:14px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.12)}
.layers4 li .n{font-family:var(--mono); font-size:12px; color:#8FA0B2; padding-top:6px}
.layers4 li h3{font-size:24px; color:#fff}
.layers4 li p{font-size:15px; margin-top:4px}
/* work rail with case-file metadata */
.rail4{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,31%); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--g); padding:4px var(--g) 28px; scrollbar-width:thin}
.case{scroll-snap-align:start; display:grid; gap:0; text-decoration:none; color:var(--ink); border-radius:26px; overflow:hidden; background:#fff; border:1px solid rgba(15,23,32,.07); transition:transform .3s}
.case:hover{transform:translateY(-3px)}
.case .ph{aspect-ratio:.95; overflow:hidden}
.case img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.case:hover img{transform:scale(1.04)}
.case .file4{padding:16px 18px 18px; display:grid; gap:10px}
.case .file4 .top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.case b{font-weight:300; font-size:26px; letter-spacing:-.02em}
.case dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-family:var(--mono); font-size:11.5px; color:var(--slate); padding-top:10px; border-top:1px solid rgba(15,23,32,.08)}
.case dt{color:var(--mute); text-transform:uppercase; letter-spacing:.06em}
.case dd{margin:0}
/* spec table on dark glow */
.specs4{border-radius:26px; overflow:hidden}
.specs4 table{width:100%; border-collapse:collapse; font-size:15px}
.specs4 th,.specs4 td{text-align:left; padding:18px 22px; border-bottom:1px solid rgba(255,255,255,.1); vertical-align:top; color:#DCE6EE}
.specs4 th{font:500 11px/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:#8FA0B2}
.specs4 td:first-child{font-size:20px; font-weight:300; color:#fff; width:24%}
.specs4 td.m{font-family:var(--mono); font-size:13px; color:#B8C4D0}
.specs4 tr:last-child td{border-bottom:0}
.tablewrap{overflow-x:auto}
/* timeline */
.timeline4{display:grid; position:relative; max-width:960px}
.timeline4::before{content:""; position:absolute; left:8px; top:10px; bottom:10px; width:2px; background:linear-gradient(180deg,#7FB4FF,#C7F0E6,#F6C8E0,#F5C27A); box-shadow:0 0 12px rgba(127,180,255,.5)}
.tl4{display:grid; grid-template-columns:40px 160px minmax(0,1fr); gap:16px; padding:22px 0}
.tl4::before{content:""; width:18px; height:18px; border-radius:50%; background:#fff; border:1px solid rgba(15,23,32,.14); margin-top:6px; box-shadow:0 6px 12px -6px rgba(25,50,90,.4)}
.tl4 h3{font-size:26px}
/* featured case */
.feat4{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(24px,4vw,60px); align-items:center}
.feat4 .imgs{display:grid; grid-template-columns:1.3fr 1fr; gap:14px; position:relative}
.feat4 .imgs img{border-radius:22px; width:100%; height:100%; object-fit:cover}
.feat4 .imgs .tall{grid-row:span 2; aspect-ratio:.68}
.feat4 .imgs .sq{aspect-ratio:1}
.feat4 dl{display:grid; grid-template-columns:auto 1fr; gap:10px 22px; margin:0; font-size:15px}
.feat4 dt{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); padding-top:3px}
.feat4 dd{margin:0}
.dk .tier.glass{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#fff}
.dk .tier.glass ul{color:#B8C4D0}
.dk .tier .btn-line{color:#fff; border-color:rgba(255,255,255,.3)}
.dk .tier.feature{background:rgba(255,255,255,.92); color:var(--ink)}
.dk .tier.feature p,.dk .tier.feature ul{color:var(--slate)}
.dk .tier.feature .btn-glass{background:var(--ink); color:#fff}
.dk .sec-head h2{color:#fff}
@media (max-width:960px){
  .hero4 .wrap,.layers4,.feat4{grid-template-columns:minmax(0,1fr)}
  .stage4{height:380px; order:-1}
  .specbar4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .specbar4 div:nth-child(3){border-left:0}
  .rail4{grid-auto-columns:80%}
  .tl4{grid-template-columns:40px minmax(0,1fr)}
  .tl4 .lbl{grid-column:2}
}

/* theme additions */
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 14px; border-radius:10px; text-decoration:none}
.skip:focus{top:12px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.status{grid-column:1/-1; margin:0; padding:12px 14px; border-radius:14px; font-size:14px; max-width:none}
.status.ok{background:rgba(199,240,230,.18); color:#DFF7F0; border:1px solid rgba(199,240,230,.35)}
.status.err{background:rgba(246,200,224,.16); color:#FBE3EF; border:1px solid rgba(246,200,224,.35)}
.case .ph.contain{background:#fff; display:grid; place-items:center; padding:12%}
.case .ph.contain img{object-fit:contain; height:auto}
.prose{max-width:820px}
.prose h1{font-size:clamp(2.6rem,5vw,4.4rem); line-height:1; margin:14px 0 28px}
.entry{font-size:17px; color:var(--slate); line-height:1.7}
.entry h2,.entry h3{color:var(--ink); margin:1.6em 0 .5em}
.entry a{color:var(--ink)}
.dk .contact-grid p a{color:#fff}

/* work archive */
.workhero{margin-top:-82px; padding:150px 0 clamp(60px,8vw,110px)}
.workhero h1{font-size:clamp(3rem,7vw,6.6rem); line-height:.95; letter-spacing:-.04em; margin-top:16px}
.workhero .lead{font-size:clamp(17px,1.4vw,19px); margin-top:22px; max-width:56ch}
.index{margin-top:40px; border-radius:24px; padding:10px; display:flex; flex-wrap:wrap; gap:4px}
.index a{display:flex; gap:10px; align-items:baseline; padding:10px 14px; border-radius:14px; text-decoration:none; font-size:15px}
.index a:hover{background:rgba(255,255,255,.6)}
.casefile{padding-block:clamp(72px,9vw,128px); scroll-margin-top:70px}
.casefile.tint{background:#EEF2F5}
.cf{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center}
.cf.flip .cf-media{order:2}
.cf-media{margin:0}
.cf-ph{display:block; border-radius:28px; overflow:hidden; aspect-ratio:1/1.02; background:#fff; box-shadow:0 40px 70px -46px rgba(25,50,90,.55)}
.cf-ph img{width:100%; height:100%; object-fit:cover}
.cf-ph.contain{display:grid; place-items:center; padding:14%; background:#fff}
.cf-ph.contain img{height:auto; object-fit:contain}
.cf-ph.typo{display:grid; place-items:center; background:#EEF3F7; position:relative}
.cf-ph.typo .field{z-index:0}
.tcard{position:relative; z-index:1; border-radius:22px; padding:26px 28px; display:grid; gap:8px; width:72%}
.tcard b{font-weight:300; font-size:clamp(28px,3.2vw,44px); letter-spacing:-.025em; line-height:1.05}
.cf-body{display:grid; gap:16px; align-content:start}
.cf-body h2{font-size:clamp(2.4rem,4.4vw,3.8rem); line-height:1}
.cf-body .tag{font-weight:300; font-size:clamp(20px,2vw,26px); letter-spacing:-.015em; color:var(--slate); max-width:none; display:grid; gap:12px}
.cf-body .tag::after{content:""; width:90px; height:2px; border-radius:2px; background:var(--prism); box-shadow:0 0 10px rgba(127,180,255,.5)}
.cf-spec{display:grid; grid-template-columns:auto 1fr; gap:8px 22px; margin:6px 0 0; padding-top:16px; border-top:1px solid rgba(15,23,32,.1); font-size:15px}
.cf-spec dt{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); padding-top:3px}
.cf-spec dd{margin:0}
.cf-story{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding-top:16px; border-top:1px solid rgba(15,23,32,.1)}
.cf-story p{font-size:14px; margin-top:6px}
.cf-chips{display:flex; flex-wrap:wrap; gap:6px}
.cf-body .btn{justify-self:start}
@media (max-width:960px){
  .cf{grid-template-columns:minmax(0,1fr)}
  .cf.flip .cf-media{order:0}
  .cf-story{grid-template-columns:minmax(0,1fr)}
}

/* case study page */
.casehero{margin-top:-82px; padding:140px 0 clamp(64px,8vw,110px)}
.ch-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center}
.ch-copy{display:grid; gap:18px; align-content:start}
.ch-copy h1{font-size:clamp(3rem,7vw,6.4rem); line-height:.95; letter-spacing:-.04em}
.ch-copy .tagline{font-weight:300; font-size:clamp(22px,2.2vw,30px); color:var(--slate); max-width:none}
.ch-copy .lead{font-size:17px}
.ch-copy .btn{justify-self:start; margin-top:8px}
.ch-media{margin:0; border-radius:30px; overflow:hidden; box-shadow:0 50px 90px -50px rgba(25,50,90,.6)}
.ch-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:1/1.05}
.story3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.story3 .st{border-radius:24px; padding:26px; display:grid; gap:12px; align-content:start}
.story3 .st p{font-size:16px; color:#DCE6EE}
.spec2{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(28px,5vw,80px)}
.nextcase{display:grid; gap:12px}
.nextcase a{font-weight:300; font-size:clamp(2.4rem,6vw,5rem); letter-spacing:-.035em; line-height:1; text-decoration:none; color:var(--ink)}
.nextcase a:hover{color:var(--slate)}
@media (max-width:960px){ .ch-grid,.story3,.spec2{grid-template-columns:minmax(0,1fr)} }

.cf-actions{display:flex; flex-wrap:wrap; gap:10px}