/* 48hStudio site system. Black ground, white type, hairline frames. All colour arrives from the work. */
:root{
  --bg:#0B0C0E; --ink:#FFFFFF; --soft:rgba(255,255,255,0.88); --stone:rgba(255,255,255,0.68); --muted:rgba(255,255,255,0.46);
  --panel:#15171C; --hair:rgba(255,255,255,0.16); --hairf:rgba(255,255,255,0.09); --dim:rgba(255,255,255,0.20);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Jost',system-ui,sans-serif; font-weight:300; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img,video{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:1240px; margin:0 auto; padding-inline:20px}
.eyebrow{font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.42em; color:var(--muted)}
h2{font-family:'League Spartan',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:-0.02em; font-size:clamp(1.8rem,4.6vw,3.2rem); line-height:1.02; margin:14px 0 18px; text-wrap:balance}
.big{font-family:'League Spartan',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:-0.03em; line-height:0.94; text-wrap:balance}
p{max-width:64ch}
.sub{color:var(--soft)} .mut{color:var(--stone)}
section{padding-block:clamp(66px,9vw,120px); border-top:1px solid var(--hairf)}
.tnum{font-variant-numeric:tabular-nums}

/* outline hover: the signature interaction */
.oh{transition:color .35s ease; -webkit-text-stroke:1.5px #FFFFFF; cursor:default}
.oh:hover{color:transparent}
@media (prefers-reduced-motion:reduce){ .oh{transition:none} .oh:hover{color:var(--ink)} }

/* nav */
nav.site{position:sticky; top:0; z-index:60; background:rgba(11,12,14,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--hairf)}
.navin{max-width:1240px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:26px}
.logo{font-family:'League Spartan',sans-serif; font-weight:900; font-size:1.7rem; letter-spacing:-0.02em; text-decoration:none; line-height:1}
.logo span{font-weight:600; letter-spacing:0.3em; font-size:0.85rem; margin-left:10px; color:var(--soft)}
.navlinks{display:flex; gap:22px; margin-left:auto}
.navlinks a{font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.66rem; letter-spacing:0.26em; text-transform:uppercase; text-decoration:none; color:var(--stone)}
.navlinks a:hover,.navlinks a.here{color:var(--ink)}
.cta{font-family:'League Spartan',sans-serif; font-weight:800; font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; background:var(--ink); color:#0B0C0E; border:1px solid var(--ink); padding:11px 18px 9px; text-decoration:none; white-space:nowrap; transition:background .3s, color .3s, border-color .3s}
.cta:hover{background:#0B0C0E; color:var(--ink); border-color:var(--ink)}
@media (max-width:820px){
  .navin{flex-wrap:wrap; row-gap:8px; padding-block:12px}
  .navlinks{order:3; width:100%; margin-left:0; gap:18px}
}
@media (max-width:420px){
  .logo{font-size:1.4rem} .logo span{font-size:0.7rem}
  .cta{padding:10px 12px 8px; font-size:0.62rem; letter-spacing:0.16em}
}

/* hero */
header.hero{padding-block:clamp(56px,8vw,100px) 56px}
.hero h1{font-size:clamp(3rem,10vw,7.2rem); margin:24px 0 0}
.hero .sub2{font-family:'League Spartan',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.16em; font-size:clamp(0.9rem,2.3vw,1.2rem); color:var(--soft); margin:20px 0 0}
.countline{font-weight:400; font-size:0.93rem; letter-spacing:0.04em; color:var(--stone); margin-top:24px; font-variant-numeric:tabular-nums}

/* the mosaic */
.mosaic{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:88px; grid-auto-flow:dense; gap:10px; margin-top:46px}
.mtile{position:relative; overflow:hidden; border:1px solid var(--hairf); background:var(--panel)}
.mtile img,.mtile video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease}
.mtile img.show,.mtile video.show{opacity:1}
.mtile:hover img.show,.mtile:hover video.show{opacity:0.75}
.m21{grid-column:span 2; grid-row:span 2}
.m12{grid-column:span 1; grid-row:span 3}
.m22{grid-column:span 2; grid-row:span 3}
.m11{grid-column:span 1; grid-row:span 2}
@media (max-width:760px){ .mosaic{grid-template-columns:repeat(4,1fr); grid-auto-rows:66px} }

/* stats */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--hairf); border:1px solid var(--hairf); margin-top:40px}
.stat{background:var(--bg); padding:22px 20px; min-width:0}
.stat .k{font-family:'League Spartan',sans-serif; font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); font-weight:600}
.stat .v{font-family:'League Spartan',sans-serif; font-weight:900; font-size:clamp(1.6rem,3.5vw,2.4rem); letter-spacing:-0.02em; margin-top:6px; font-variant-numeric:tabular-nums}
.stat .s{font-size:0.85rem; color:var(--stone)}

/* apology */
.apology{text-align:center}
.apology .apobig{margin:22px auto 0; font-size:clamp(1.7rem,4.6vw,3.4rem); max-width:26ch; line-height:1.04}

/* word fill */
.fill b{font-weight:inherit; color:var(--dim); transition:color .4s linear}
.fill b.on{color:var(--ink)}
html:not(.js) .fill b{color:var(--ink)}

/* reveal */
.rev{opacity:1; transform:none}
html.js .rev{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
html.js .rev.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ html.js .rev{opacity:1; transform:none; transition:none} .fill b{transition:none} }

/* ===== villa showcase ===== */
.vshead{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:34px}
.vname{font-family:'League Spartan',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:-0.03em; font-size:clamp(2.2rem,7vw,4.6rem); line-height:1}
.varrow{font-family:'League Spartan',sans-serif; font-weight:600; background:none; border:1px solid rgba(255,255,255,0.45); color:var(--ink); width:64px; height:64px; font-size:1.7rem; cursor:pointer; transition:background .25s,color .25s}
.varrow:hover{background:var(--ink); color:var(--bg)}
.vindex{font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.72rem; letter-spacing:0.3em; color:var(--muted); margin-left:auto}
.vjump{display:flex; gap:26px; flex-wrap:wrap; margin:18px 0 26px}
.vjump a{font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.7rem; letter-spacing:0.26em; text-transform:uppercase; text-decoration:none; color:var(--muted); padding-bottom:5px; border-bottom:1px solid transparent}
.vjump a:hover{color:var(--soft)}
.vjump a.on{color:var(--ink); border-bottom-color:var(--ink)}
.stage{position:relative; border:1px solid var(--hair); aspect-ratio:16/9; overflow:hidden; background:var(--panel)}
.stage .sl{position:absolute; inset:0; opacity:0; transition:opacity .6s ease; display:flex; align-items:center; justify-content:center}
.stage .sl.show{opacity:1}
.stage .sl img.wide,.stage .sl video.wide{width:100%; height:100%; object-fit:cover}
.stage .sl img.tall,.stage .sl video.tall{height:100%; width:auto; max-width:60%; object-fit:cover; border-inline:1px solid var(--hairf)}
.stage .tag{position:absolute; left:18px; top:16px; font-family:'League Spartan',sans-serif; font-weight:700; font-size:0.85rem; letter-spacing:0.2em; text-transform:uppercase; color:#fff; background:#0B0C0E; border:1px solid rgba(255,255,255,0.4); padding:12px 16px 10px; z-index:3}
.stage .tag.plate{font-size:clamp(0.95rem,2vw,1.3rem); background:#fff; color:#0B0C0E; border-color:#fff; font-weight:800}
@media (max-width:600px){
  .stage .tag{font-size:0.6rem; letter-spacing:0.14em; padding:8px 10px 6px; left:10px; top:10px; max-width:70%}
  .stage .tag.plate{font-size:0.7rem}
  .scap{font-size:0.88rem}
}
.sarrow{position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:76px; height:112px; background:rgba(11,12,14,0.68); border:1px solid rgba(255,255,255,0.45); color:#fff; font-size:2.1rem; cursor:pointer; transition:background .25s,border-color .25s; font-family:'League Spartan',sans-serif}
.sarrow:hover{background:#fff; color:#0B0C0E; border-color:#fff}
.sarrow.l{left:16px} .sarrow.r{right:16px}
@media (max-width:760px){ .sarrow{width:54px; height:78px; font-size:1.6rem} }
.sprog{position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,0.12); z-index:4}
.sprog i{display:block; height:100%; width:0; background:#fff}
.scap{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:14px; font-size:1.02rem; color:var(--soft); font-variant-numeric:tabular-nums}
.sdots{display:flex; gap:7px}
.sdots i{width:22px; height:2px; background:var(--hairf); cursor:pointer}
.sdots i.on{background:var(--ink)}

/* wall */
.wall{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin-top:34px}
.wtile{min-width:0}
.wtile .fr{position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--hair); background:var(--panel); cursor:pointer}
.wtile video,.wtile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.wtile .pl{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'League Spartan',sans-serif; font-weight:800; font-size:0.64rem; letter-spacing:0.3em; text-transform:uppercase; background:rgba(11,12,14,0.3); transition:background .3s; z-index:2; color:#fff}
.wtile:hover .pl{background:rgba(11,12,14,0.08)}
.wtile .t{font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.64rem; letter-spacing:0.26em; text-transform:uppercase; margin-top:9px; color:var(--stone)}
.vrail{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:30px}
@media (max-width:760px){ .vrail{grid-template-columns:repeat(2,1fr)} }
.vrcell{min-width:0}
.vrcell .fr{aspect-ratio:9/16; position:relative; overflow:hidden; border:1px solid var(--hair); background:var(--panel); cursor:pointer}
.vrcell video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.vrcell .t{font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.58rem; letter-spacing:0.26em; text-transform:uppercase; margin-top:8px; color:var(--muted)}

/* chips (demo) */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.64rem; letter-spacing:0.22em; text-transform:uppercase; border:1px solid var(--hair); background:none; color:var(--stone); padding:10px 14px 8px; cursor:pointer; transition:background .25s,color .25s,border-color .25s}
.chip:hover{color:var(--ink); border-color:var(--ink)}
.chip.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.frame169{border:1px solid var(--hair); aspect-ratio:16/9; overflow:hidden; background:var(--panel); position:relative}
.frame916{border:1px solid var(--hair); aspect-ratio:9/16; overflow:hidden; background:var(--panel); position:relative}
.frame169 img,.frame916 img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease}
.frame169 img.show,.frame916 img.show{opacity:1}

/* window bar */
.window{margin-top:16px; max-width:640px}
.wbar{position:relative; height:2px; background:var(--hairf)}
.wfill{position:absolute; inset:0 auto 0 0; width:0%; background:var(--ink); transition:width 1.2s cubic-bezier(.2,.6,.2,1)}
.wlab{display:flex; justify-content:space-between; font-family:'League Spartan',sans-serif; font-size:0.58rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--muted); margin-top:9px; font-variant-numeric:tabular-nums}

/* stations (how it works) */
.station{display:grid; grid-template-columns:1fr 1.6fr; gap:26px; align-items:center; border-top:1px solid var(--hairf); padding-block:40px}
.station:nth-child(even){grid-template-columns:1.6fr 1fr}
.station:nth-child(even) .sttxt{order:2}
.station:nth-child(even) .stmed{order:1}
@media (max-width:820px){ .station,.station:nth-child(even){grid-template-columns:1fr} .station:nth-child(even) .sttxt{order:0} }
.stnum{font-family:'League Spartan',sans-serif; font-weight:900; font-size:2rem; color:var(--dim); letter-spacing:-0.02em}
.station h3{font-family:'League Spartan',sans-serif; font-weight:800; text-transform:uppercase; font-size:1.25rem; letter-spacing:-0.01em; margin:8px 0 10px}
.sthour{font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted)}
.station p{font-size:0.97rem; color:var(--soft); margin:0}
.stmed{border:1px solid var(--hair); aspect-ratio:16/9; overflow:hidden; background:var(--panel)}
.stmed img{width:100%; height:100%; object-fit:cover}

/* intake: five big numbered frames + the clock box */
.intake{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:36px}
.icell{border:1px solid rgba(255,255,255,0.32); padding:24px 20px 20px; min-width:0; transition:border-color .3s, transform .3s}
.icell:hover{border-color:#fff; transform:translateY(-6px)}
.icell .n{font-family:'League Spartan',sans-serif; font-weight:900; font-size:2.8rem; line-height:1; letter-spacing:-0.03em}
.icell .t{font-family:'League Spartan',sans-serif; font-weight:700; font-size:0.95rem; letter-spacing:0.08em; text-transform:uppercase; margin:14px 0 10px}
.icell p{font-size:0.92rem; color:var(--stone); margin:0; line-height:1.5}
@media (max-width:1020px){ .intake{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .intake{grid-template-columns:1fr} }
.clockbox{background:#FFFFFF; color:#0B0C0E; padding:28px 30px; margin-top:14px; display:flex; gap:10px 36px; align-items:baseline; flex-wrap:wrap}
.clockbox .t{font-family:'League Spartan',sans-serif; font-weight:900; font-size:clamp(1.2rem,2.6vw,1.7rem); text-transform:uppercase; letter-spacing:-0.01em; white-space:nowrap}
.clockbox p{margin:0; color:#15171C; font-weight:400; font-size:1.02rem; max-width:52ch}

/* the matrix: white box, black text */
.matrix{background:#FFFFFF; border:none; padding:10px 28px 6px}
.matrix table{color:#15171C}
.matrix th{color:rgba(21,23,28,0.6); border-bottom:2px solid #0B0C0E; padding-top:22px}
.matrix td{color:#15171C; border-bottom:1px solid rgba(21,23,28,0.12)}
.matrix td:first-child{color:#0B0C0E; font-weight:500}
.matrix th:not(:first-child), .matrix td:not(:first-child){text-align:center; padding-inline:12px; min-width:110px}
.matrix tr:last-child td{border-bottom:none; font-weight:700; font-size:1.05rem; padding-block:18px}
.matrix td b{font-weight:700}

/* two-column text + image */
.duo{display:grid; grid-template-columns:1.05fr 1fr; gap:36px; align-items:center; margin-top:10px}
.duo p{color:rgba(255,255,255,0.92); font-size:1.02rem}
@media (max-width:820px){ .duo{grid-template-columns:1fr} }

/* lists, tables, tiers */
ul.plain{padding-left:20px; margin:0 0 14px; max-width:70ch; color:var(--soft)}
ul.plain li{margin-bottom:8px}
.tablebox{overflow-x:auto; margin:24px 0}
table{border-collapse:collapse; width:100%; font-size:0.93rem}
th{font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); text-align:left; padding:0 16px 10px 0; border-bottom:1px solid var(--hair)}
td{padding:12px 16px 12px 0; border-bottom:1px solid var(--hairf); vertical-align:top; color:var(--soft); font-variant-numeric:tabular-nums}
td:first-child{font-weight:500; color:var(--ink)}
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px; margin-top:36px}
.tier{background:var(--bg); padding:30px 26px; min-width:0; display:flex; flex-direction:column; position:relative; border:1px solid rgba(255,255,255,0.30); transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s}
.tier:hover{transform:translateY(-10px); border-color:#fff; box-shadow:0 26px 60px rgba(0,0,0,0.6)}
html.js .rev.in .tier{animation:riseIn .7s cubic-bezier(.2,.7,.2,1) backwards}
.tiers .tier:nth-child(1){animation-delay:.05s} .tiers .tier:nth-child(2){animation-delay:.18s} .tiers .tier:nth-child(3){animation-delay:.31s}
@keyframes riseIn{from{opacity:0; transform:translateY(30px)}}
.tier .thead{margin:-30px -26px 22px; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--hairf)}
.tier .thead img{width:100%; height:100%; object-fit:cover}
.bannerframe{border:1px solid var(--hair); aspect-ratio:21/9; overflow:hidden; background:var(--panel); margin-top:40px}
.bannerframe img{width:100%; height:100%; object-fit:cover}
.bannercap{font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); margin-top:10px}
.tier .tname{font-family:'League Spartan',sans-serif; font-weight:900; font-size:1.7rem; text-transform:uppercase}
.tier .tprice{font-family:'League Spartan',sans-serif; font-weight:800; font-size:2.2rem; margin:12px 0 2px; font-variant-numeric:tabular-nums}
.tier .tsla{display:inline-block; font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; border:1px solid var(--ink); padding:7px 11px 5px; margin:12px 0 18px; align-self:flex-start}
.tier ul{margin:0 0 22px; padding-left:17px; font-size:0.93rem; color:var(--soft)}
.tier li{margin-bottom:7px}
.tier .cta{margin-top:auto; text-align:center; position:relative; overflow:hidden; transition:letter-spacing .3s ease, background .3s}
.tier .cta::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:38%; background:linear-gradient(100deg,transparent,rgba(11,12,14,0.22),transparent); transform:skewX(-18deg); animation:ctasweep 4.6s ease-in-out infinite}
.tier .cta:hover{letter-spacing:0.3em}
@keyframes ctasweep{0%,55%{left:-60%}85%,100%{left:120%}}
.tier.mid{border:2px solid #fff; transform:scale(1.035)}
.tier.mid:hover{transform:translateY(-10px) scale(1.035)}
@media (max-width:860px){ .tier.mid{transform:none} .tier.mid:hover{transform:translateY(-6px)} .tiers{margin-top:44px} }
.tier.mid::before{content:"Most chosen"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-family:'League Spartan',sans-serif; font-weight:800; font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; background:#fff; color:#0B0C0E; padding:7px 13px 5px; white-space:nowrap}
@media (prefers-reduced-motion:reduce){ html.js .rev.in .tier{animation:none} .tier .cta::after{animation:none} .tier,.tier.mid{transition:none} }

/* guarantee + footer */
.guarantee{text-align:center}
.guarantee .gbig{font-size:clamp(2rem,6.4vw,4.2rem); margin:18px 0 26px}
.ctarow{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px}
.cta2{font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; border:1px solid var(--hair); color:var(--ink); padding:13px 20px 11px; text-decoration:none}
.cta2:hover{border-color:var(--ink)}
footer.site{border-top:1px solid var(--hairf); padding:60px 0 70px}
.fquote{font-size:clamp(1.7rem,4.4vw,3.1rem); line-height:1.05; margin-bottom:40px; max-width:26ch; text-wrap:balance}
.fgrid{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:baseline}
.fmark{font-family:'League Spartan',sans-serif; font-weight:900; font-size:2.6rem; line-height:1}
.fsign{font-style:italic; color:var(--stone)}
.fsmall{font-size:0.78rem; color:var(--muted); margin-top:26px; max-width:none}
.flinks{display:flex; gap:20px; flex-wrap:wrap; margin-top:16px}
.flinks a{font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.62rem; letter-spacing:0.26em; text-transform:uppercase; text-decoration:none; color:var(--stone)}
.flinks a:hover{color:var(--ink)}

/* page hero (subpages) */
.phero{padding-block:clamp(56px,8vw,96px) 10px}
.phero h1{font-size:clamp(2.4rem,7.6vw,5.4rem); margin:22px 0 0}
.numrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; background:var(--hairf); border:1px solid var(--hairf); margin-top:40px}
.numrow .stat .v{font-size:clamp(1.4rem,3vw,2rem)}
.pstrip{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-top:34px}
.pcell{min-width:0}
.pcell .fr{aspect-ratio:16/9; overflow:hidden; border:1px solid var(--hair)}
.pcell img{width:100%; height:100%; object-fit:cover}
.pcell .t{font-family:'League Spartan',sans-serif; font-weight:600; font-size:0.6rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); margin-top:8px}
.hvduo{display:grid; grid-template-columns:2.3fr 1fr; gap:14px; align-items:stretch; margin-top:22px}
.hvduo .frame916{height:100%; aspect-ratio:auto}
@media (max-width:760px){ .hvduo{grid-template-columns:1fr} .hvduo .frame916{aspect-ratio:9/16; height:auto; max-width:300px} }