:root{
  --ink:#161b1e; --ink2:#1d2327; --mute:#56636b; --ivory:#f5f7f8; --stone:#e9edef; --line:#d6dcdf; --line-d:#333c41;
  --red:#b3202a; --green:#2f6b4f; --gold:#9fd3cb; --aqua:#cfeae6;
  --serif:'Archivo','Hanken Grotesk',system-ui,sans-serif; --sans:'Hanken Grotesk',system-ui,sans-serif;
  --pad:clamp(1.25rem,5vw,5.5rem);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
body{font:400 1.0625rem/1.75 var(--sans);text-rendering:optimizeLegibility;font-kerning:normal;color:var(--ink);background:var(--ivory);-webkit-font-smoothing:antialiased}
img,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;font-stretch:106%;font-variation-settings:'wdth' 106;letter-spacing:-.015em;line-height:1.22}
.label{font:700 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:2rem}
.dark .label,.hero .kicker{color:var(--gold)}

/* top bar + nav */
.topbar{display:flex;justify-content:space-between;gap:1rem;padding:.6rem var(--pad);background:var(--ink);color:#d3dce0;font:500 .78rem var(--sans);letter-spacing:.06em}
.topbar a{text-decoration:none}.topbar a:hover{color:#fff}
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:2rem;padding:.7rem var(--pad);background:rgba(245,247,248,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand img{height:38px;width:auto}
.links{display:flex;gap:2.2rem;margin-left:auto;align-items:center;font:600 .95rem var(--sans);letter-spacing:.005em}
.links a{text-decoration:none;color:var(--ink);position:relative;padding:.3rem 0}
.links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ink);transition:width .35s}
.links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{border:1px solid var(--ink);padding:.65rem 1.3rem!important;transition:.3s}
.nav-cta:hover{background:var(--ink);color:#fff}
.burger{display:none;background:none;border:0;padding:.5rem;margin-left:auto;cursor:pointer}
.burger span{display:block;width:24px;height:1px;background:var(--ink);margin:7px 0}

/* buttons */
.btn{display:inline-block;font:600 .9rem var(--sans);letter-spacing:.04em;padding:1.05rem 1.9rem;border:1px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;cursor:pointer;transition:.3s;text-align:center}
.btn:hover{background:transparent;color:var(--ink)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:transparent;color:#fff}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.textlink{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;font-weight:500}
.textlink.light{color:#fff;font:600 .95rem var(--sans);letter-spacing:.02em}

/* hero */
.hero{position:relative;min-height:calc(100vh - 110px);min-height:calc(100svh - 110px);display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:#111}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:settle 2.4s ease-out both}
@keyframes settle{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,13,15,.25) 0%,rgba(10,13,15,.1) 35%,rgba(10,13,15,.72) 100%)}
.hero-inner{position:relative;padding:0 var(--pad) 8rem;max-width:62rem}
.hero .kicker{font:600 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.6rem}
.hero h1{font-size:clamp(2.6rem,6.2vw,5.6rem);font-weight:400;margin-bottom:2.5rem}
.hero-links{display:flex;gap:2.2rem;align-items:center;flex-wrap:wrap}
.hero-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:0;display:flex;gap:2.5rem;padding:1.4rem 0;border-top:1px solid rgba(255,255,255,.3);font:600 .8rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.hero-foot .scroll{margin-left:auto;text-decoration:none}

/* sections */
.sec{padding:clamp(4.5rem,9vw,9rem) var(--pad)}
.sec.dark{background:var(--ink);color:#e6ecee}
.sec.stone{background:var(--stone)}
.head{max-width:46rem;margin-bottom:3.5rem}
.head h2{font-size:clamp(1.8rem,3.1vw,2.8rem)}
.head p:last-child{margin-top:1.2rem;color:var(--mute);font-weight:400;font-size:1.05rem}
.dark .head p:last-child{color:#c3cdd2}
.statement{font-size:clamp(1.45rem,2.4vw,2.15rem);font-weight:500;line-height:1.28}

/* intro */
.intro-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,7vw,7rem);align-items:start}
.intro-grid p{color:var(--mute);font-weight:400;font-size:1.05rem}
.facts{margin-top:2.5rem;border-top:1px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.facts dt{color:var(--mute);text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;font-weight:600;padding-top:.2rem}
.facts dd{text-align:right;font-weight:500}

/* tiles */
.tiles{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:1.25rem;height:min(80vw,760px)}
.tile{position:relative;overflow:hidden;background:#222}
.tile.big{grid-row:span 2}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,13,15,.78));pointer-events:none}
.cap{position:absolute;left:1.8rem;right:1.8rem;bottom:1.6rem;z-index:2;color:#fff}
.cap h3{font-size:clamp(1.2rem,1.8vw,1.7rem);font-weight:500}
.cap p{font-size:.9rem;font-weight:400;opacity:.85;margin-top:.4rem;max-width:26rem}

/* studio */
.studio,.sim{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.stage{position:sticky;top:96px;background:#0f1417;display:grid;place-items:center;padding:1.2rem 1.2rem 3rem;border:1px solid var(--line-d)}
.stage canvas{width:100%;height:auto;max-height:70vh;object-fit:contain}
.dims{position:absolute;bottom:.9rem;left:0;right:0;text-align:center;font:500 .78rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#b4c0c6}
.panel{display:grid;gap:2rem}
fieldset{border:0;padding:0;display:grid;gap:1rem}
legend{font:700 .78rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;padding:0;float:left;width:100%}
.panel.light legend,.panel.light label{color:var(--ink)}
label{display:grid;gap:.6rem;font:500 .95rem var(--sans);color:#dde5e8}
label output{float:right;font-weight:500;color:#fff}
.panel.light label output{color:var(--red)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:#6b7a83;outline:none;margin:.9rem 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid var(--ink);cursor:pointer;box-shadow:0 0 0 4px rgba(255,255,255,.12)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid var(--ink);cursor:pointer}
.panel.light input[type=range]{background:#bcc6cb}
.panel.light input[type=range]::-webkit-slider-thumb{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 4px rgba(22,27,30,.08)}
select,input:not([type=range]),textarea{font:400 .95rem var(--sans);color:inherit;background:transparent;border:0;border-bottom:1px solid #6b7a83;padding:.7rem 0;width:100%;border-radius:0;outline:none}
select option{color:#111}
select:focus,input:focus,textarea:focus{border-bottom-color:var(--gold)}
.opts{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.opt{font:500 .95rem var(--sans);background:none;border:0;border-bottom:1px solid transparent;padding:.35rem 0;color:#6a7880;cursor:pointer;transition:.25s}
.opt:hover{color:#fff}
.opt[aria-pressed=true]{color:#fff;border-bottom-color:var(--gold)}
.panel.light .opt{color:var(--mute)}.panel.light .opt:hover{color:var(--ink)}
.panel.light .opt[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--red)}
.swatches{display:flex;gap:1rem;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);cursor:pointer;position:relative;transition:transform .25s}
.sw:hover{transform:scale(1.08)}
.sw[aria-pressed=true]{outline:1px solid var(--gold);outline-offset:4px}
.quote{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:1.6rem 0;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.quote small{display:block;color:#c3cdd2;font-size:.8rem;font-weight:500;letter-spacing:.04em}
.quote strong{display:block;font:500 clamp(1.4rem,1.9vw,1.75rem) var(--serif);font-stretch:106%;letter-spacing:-.02em;margin:.3rem 0}
.fine{font-size:.82rem;color:#a3b0b7;line-height:1.65}
.light .fine,.intro .fine,footer .fine{color:#5b686f}
.light .fine,.fine a{color:var(--mute)}

/* sim */
.room{background:none;line-height:0;aspect-ratio:5/6;max-height:82vh;min-height:420px;overflow:hidden}
.room canvas{width:100%;height:100%;object-fit:cover}
.panel.light{color:var(--ink);padding-top:.5rem}
.meter{display:grid;gap:1rem;padding:0}
.meter div{display:grid;grid-template-columns:8rem 1fr;align-items:center;gap:1rem;font-size:.9rem;font-weight:500;color:var(--mute)}
.meter dd{margin:0;height:2px;background:var(--line)}
.meter i{display:block;height:100%;background:var(--ink);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.meter div:nth-child(2) i{background:var(--red)}

/* brand */
.brandlist{border-top:1px solid #c5cdd1}
.brow{display:grid;grid-template-columns:.8fr 1.4fr 1fr auto;gap:2rem;align-items:start;padding:2.4rem 0;border-bottom:1px solid #c5cdd1}
.brow h3{font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:500}
.brow .tag{display:block;font:600 .76rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:.7rem}
.brow p{color:#3a454c;font-weight:400}
.brow ul{list-style:none;padding:0;font-size:.9rem;color:#3a454c}
.brow li{padding:.35rem 0;border-bottom:1px solid #d5dce0}
.brow li:last-child{border:0}
.brow .textlink{font:600 .9rem var(--sans);letter-spacing:.02em;white-space:nowrap}

/* projects */
.igwrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.25rem;margin-bottom:3rem}
.igwrap .ig{background:#fff;border:1px solid var(--line);overflow:hidden}
.igwrap iframe{width:100%;height:580px;border:0;display:block}
.center{text-align:center}

/* contact */
.cgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,7vw,7rem)}
.cinfo{margin-top:3.5rem;display:grid;gap:1.8rem;color:#d0d9dd;font-weight:400}
.cinfo small{display:block;color:var(--gold);font:700 .76rem var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.4rem}
.cinfo a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}.cinfo a:hover{border-color:#fff}
.cform{display:grid;gap:2rem;align-content:start}

footer{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;padding:2rem var(--pad);border-top:1px solid var(--line);font-size:.82rem;color:var(--mute)}
footer img{height:34px;width:auto}
footer .fine{margin-left:auto;max-width:34rem;text-align:right}
.float{position:fixed;right:1.4rem;bottom:1.4rem;z-index:40;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 10px 28px rgba(10,30,20,.35),0 0 0 0 rgba(37,211,102,.5);transition:transform .3s,box-shadow .3s;animation:wapulse 3.2s ease-out infinite}
.float:hover{transform:scale(1.08);background:#1fbd5b}
@keyframes wapulse{0%{box-shadow:0 10px 28px rgba(10,30,20,.35),0 0 0 0 rgba(37,211,102,.5)}70%,100%{box-shadow:0 10px 28px rgba(10,30,20,.35),0 0 0 16px rgba(37,211,102,0)}}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media(max-width:960px){
  .topbar span:first-child{display:none}.topbar{justify-content:flex-end}
  .intro-grid,.studio,.sim,.cgrid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr;grid-template-rows:none;height:auto}
  .tile,.tile.big{grid-row:auto;aspect-ratio:4/3}
  .stage{position:relative;top:0}
  .brow{grid-template-columns:1fr;gap:1rem}
  .burger{display:block}
  .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--ivory);padding:1.5rem var(--pad);border-bottom:1px solid var(--line);gap:1.2rem}
  .links.open{display:flex}
  .hero-inner{padding-bottom:7rem}
  .hero-foot{gap:1.2rem;font-size:.62rem}
  footer .fine{margin-left:0;text-align:left}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ================= GLASS LAYER ================= */
.glass{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.04) 55%,rgba(255,255,255,.09));
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(150,225,195,.18),inset 0 0 0 1px rgba(150,225,195,.06),0 40px 80px -20px rgba(0,0,0,.45)}
.glass::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.16) 44%,rgba(255,255,255,.04) 52%,transparent 64%);
  background-size:260% 100%;background-position:120% 0;animation:glint 9s ease-in-out infinite}
.glass::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 45%)}
.glass:hover::after{opacity:1}
@keyframes glint{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}

/* hero */
.hero{--px:0;--py:0}
.hero-shade{background:linear-gradient(180deg,rgba(8,11,13,.35) 0%,rgba(8,11,13,.05) 40%,rgba(8,11,13,.65) 100%)}
.hero-img{transform:scale(1.04) translate(calc(var(--px)*-8px),calc(var(--py)*-6px));transition:transform .6s ease-out;animation:none}
.hero-inner{padding:clamp(1.8rem,3.4vw,3.2rem);margin:0 0 7rem var(--pad);max-width:min(52rem,86vw)}
.hero h1{font-size:clamp(1.9rem,3.5vw,3.4rem);margin-bottom:2.2rem;font-weight:500}
.hero h1 em{font-style:normal;color:#cfeae6;font-weight:500}
.hero-inner .kicker{color:#cfeae6}
.slabs{position:absolute;inset:0;pointer-events:none}
.slab{position:absolute;top:8%;bottom:14%;width:clamp(70px,9vw,150px);
  background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 60%,rgba(190,240,215,.1));
  -webkit-backdrop-filter:blur(7px) brightness(1.05);backdrop-filter:blur(7px) brightness(1.05);
  border:1px solid rgba(255,255,255,.28);box-shadow:inset 1px 0 0 rgba(255,255,255,.55),inset -1px 0 0 rgba(150,225,195,.35),0 30px 60px rgba(0,0,0,.25);
  transition:transform .5s ease-out}
.slab::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 48%,transparent 60%)}
.s1{right:calc(8% + 0px);transform:translate(calc(var(--px)*26px),calc(var(--py)*10px))}
.s2{right:calc(8% + clamp(80px,10vw,170px));top:14%;bottom:8%;width:clamp(60px,7vw,120px);transform:translate(calc(var(--px)*14px),calc(var(--py)*6px));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.s3{right:calc(8% + clamp(160px,19vw,320px));top:20%;bottom:20%;width:clamp(40px,5vw,90px);transform:translate(calc(var(--px)*6px),calc(var(--py)*3px));opacity:.7}
.hero::after{content:"";position:absolute;inset:-20% -40%;pointer-events:none;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.1) 50%,transparent 58%);animation:sweep 11s ease-in-out infinite}
@keyframes sweep{0%,60%{transform:translateX(-40%)}100%{transform:translateX(40%)}}

/* tile captions as glass */
.tile::after{background:linear-gradient(180deg,transparent 55%,rgba(10,13,15,.5))}
.cap.glass{position:absolute;left:1.2rem;right:auto;bottom:1.2rem;max-width:min(26rem,calc(100% - 2.4rem));padding:1.2rem 1.4rem;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.06))}

/* glass collection */
.glassroom{position:relative;overflow:hidden;color:#fff;background:#0a0d0f;padding-bottom:clamp(4.5rem,9vw,8rem)}
.gr-bg{position:absolute;inset:0;background:url(images/lobi.jpg) center/cover;filter:saturate(1.1) brightness(.78);transform:scale(1.04)}
.gr-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,13,15,.7),rgba(10,13,15,.15) 45%,rgba(10,13,15,.55))}
.glassroom>*:not(.gr-bg){position:relative;z-index:1}
.head.on-photo p:last-child{color:rgba(255,255,255,.75)}
.head h2 em{font-style:normal;color:#cfeae6;font-weight:500}
.glassroom .label{color:#cfeae6}
.slabrow{display:flex;gap:10px;height:min(72vh,640px)}
.gs{position:relative;flex:1;min-width:0;display:flex;align-items:flex-end;cursor:default;overflow:hidden;outline:none;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.55),inset -1px 0 0 rgba(150,225,195,.4),0 40px 70px -25px rgba(0,0,0,.6);
  transition:flex .8s cubic-bezier(.2,.7,.2,1)}
.gs:hover,.gs:focus{flex:2.6}
.gs::before{content:"";position:absolute;inset:0;background:linear-gradient(108deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 58%);transform:translateX(-60%);transition:transform 1.2s ease}
.gs:hover::before,.gs:focus::before{transform:translateX(60%)}
.gs-in{position:relative;padding:1.4rem;opacity:.95;width:100%;background:linear-gradient(180deg,transparent,rgba(8,11,13,.45))}
.gs-in b{display:block;font:700 .78rem var(--sans);letter-spacing:.14em;color:#cfeae6;margin-bottom:.5rem}
.gs-in h3{font-size:clamp(1.05rem,1.4vw,1.35rem);font-weight:500}
.gs-in p{font-size:.85rem;font-weight:400;max-height:0;opacity:0;overflow:hidden;transition:max-height .7s,opacity .7s,margin .7s;margin-top:0;color:rgba(255,255,255,.85)}
.gs:hover .gs-in p,.gs:focus .gs-in p{max-height:7rem;opacity:1;margin-top:.7rem}
.gs-clear{background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
.gs-tint{background:linear-gradient(160deg,rgba(30,58,52,.62),rgba(18,32,30,.72));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.gs-ref{background:linear-gradient(160deg,rgba(170,200,235,.55),rgba(55,90,140,.5) 55%,rgba(25,45,80,.55));-webkit-backdrop-filter:blur(3px) saturate(130%);backdrop-filter:blur(3px) saturate(130%)}
.gs-tem{background:linear-gradient(160deg,rgba(190,240,222,.16),rgba(120,200,170,.08));-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);box-shadow:inset 0 0 0 3px rgba(150,225,195,.16),inset 1px 0 0 rgba(255,255,255,.55),0 40px 70px -25px rgba(0,0,0,.6)}
.gs-lam{background:linear-gradient(160deg,rgba(215,235,235,.2),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 0 0 6px rgba(255,255,255,.04),inset 0 0 0 7px rgba(255,255,255,.22),0 40px 70px -25px rgba(0,0,0,.6)}
.gs-fro{background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}

/* photo backgrounds for dark sections */
.photo-bg{position:relative;overflow:hidden}
.photo-bg::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(12,16,19,.84),rgba(12,16,19,.9)),url(images/hunian.jpg) center/cover fixed}
.contact.photo-bg::before{background:linear-gradient(rgba(12,16,19,.78),rgba(12,16,19,.88)),url(images/fasad.jpg) center/cover fixed}
.photo-bg>*{position:relative;z-index:1}
#studio .panel.glass{padding:clamp(1.4rem,2.6vw,2.4rem)}
#studio .stage{background:rgba(8,11,13,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:rgba(255,255,255,.14)}
.cform.glass{padding:clamp(1.6rem,3vw,2.8rem)}

/* light-section glass: simulation controls */
.panel.light{padding:clamp(1.4rem,2.6vw,2.4rem);background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.35));border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 30px 60px -30px rgba(30,45,55,.3);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#kaca{background:radial-gradient(900px 500px at 85% 10%,rgba(170,215,225,.35),transparent 60%),var(--ivory)}
.room{box-shadow:0 40px 80px -30px rgba(20,30,38,.5)}

/* refined details */
.sec .label{display:flex;align-items:center;gap:1rem}
.sec .label::after{content:"";height:1px;width:4rem;background:currentColor;opacity:.4}
.head h2{font-weight:500}
h2 em{font-style:normal}
@media(max-width:960px){
  .slabs{opacity:.55}.s2,.s3{display:none}
  .hero-inner{margin:0 var(--pad) 6.5rem}
  .slabrow{flex-direction:column;height:auto;gap:8px}
  .gs{flex:none;min-height:110px}.gs:hover,.gs:focus{flex:none;min-height:190px}
  .gs-in p{max-height:7rem;opacity:1;margin-top:.5rem}
  .photo-bg::before,.contact.photo-bg::before{background-attachment:scroll}
}
@media(prefers-reduced-motion:reduce){.glass::before,.hero::after{animation:none}}

p{max-width:68ch}
.head p:last-child,.intro-grid p,.brow p{font-size:1.0625rem;line-height:1.75}
.intro-grid p,.brow p{color:#3a454c}
.sec{font-size:1.0625rem}
.opt,label,select,input:not([type=range]),textarea{font-size:1rem}
.links{font-size:.95rem}
.cap p,.gs-in p{font-size:.95rem;line-height:1.6}
.hero-foot{letter-spacing:.12em}

/* ================= MOBILE ================= */
@media(max-width:960px){
  .burger{padding:.9rem .7rem;margin-right:-.7rem}
  .links a{padding:.6rem 0;font-size:.85rem}
  .nav-cta{display:inline-block;margin-top:.4rem}
  .room{min-height:0;aspect-ratio:4/5;max-height:none}
  .hero{min-height:calc(100svh - 96px)}
  .brow{padding:1.8rem 0}
  .head{margin-bottom:2.4rem}
}
@media(max-width:600px){
  :root{--pad:1.25rem}
  body{font-size:1rem}
  .sec,.sec.sec{font-size:1rem}
  .topbar{padding:.5rem var(--pad);font-size:.72rem}
  .nav{padding:.55rem var(--pad)}
  .brand img{height:32px}
  /* hero */
  .hero{min-height:calc(100svh - 90px)}
  .hero-inner{margin:0 var(--pad) 5.5rem;padding:1.4rem 1.25rem;max-width:none}
  .hero h1{font-size:clamp(1.6rem,7.4vw,2.1rem);line-height:1.2;margin-bottom:1.5rem}
  .hero .kicker,.hero-inner .kicker{font-size:.66rem;letter-spacing:.14em;margin-bottom:1rem}
  .hero-links{flex-direction:column;align-items:stretch;gap:1rem}
  .hero-links .btn{width:100%}
  .hero-links .textlink{align-self:flex-start}
  .hero-foot{left:var(--pad);right:var(--pad);padding:1rem 0;gap:1rem;font-size:.68rem;letter-spacing:.08em}
  .slabs{display:none}
  /* sections */
  .sec{padding:3.5rem var(--pad)}
  .head h2{font-size:clamp(1.55rem,6.6vw,1.9rem)}
  .statement{font-size:clamp(1.3rem,5.6vw,1.6rem)}
  .label{margin-bottom:1.4rem;font-size:.7rem}
  .sec .label::after{width:2rem}
  .intro-grid{gap:1.8rem}
  .facts div{flex-direction:column;gap:.2rem}.facts dd{text-align:left}
  /* tiles */
  .tile,.tile.big{aspect-ratio:1/1}
  .cap.glass{left:.7rem;bottom:.7rem;max-width:calc(100% - 1.4rem);padding:.9rem 1rem}
  .cap p{font-size:.85rem;line-height:1.45}
  /* glass collection */
  .slabrow{gap:6px}
  .gs{min-height:96px}.gs:hover,.gs:focus{min-height:150px}
  .gs-in{padding:1rem}
  .gs-in p{font-size:.88rem}
  /* studio */
  #studio .panel.glass{padding:1.2rem}
  .stage{padding:.6rem .6rem 3.4rem}
  .stage canvas{max-height:60vh}
  .dims{font-size:.6rem;letter-spacing:.1em;padding:0 .6rem;bottom:.7rem}
  .opts{gap:.2rem 1.2rem}
  .opt{padding:.65rem 0;font-size:.95rem}
  .sw{width:42px;height:42px}
  .swatches{gap:.9rem}
  input[type=range]{margin:1.1rem 0}
  input[type=range]::-webkit-slider-thumb{width:24px;height:24px}
  input[type=range]::-moz-range-thumb{width:22px;height:22px}
  select,input:not([type=range]),textarea{font-size:16px;padding:.85rem 0}
  .quote{flex-direction:column;align-items:stretch;gap:1rem}
  .quote .btn{width:100%}
  /* sim */
  .panel.light{padding:1.2rem}
  .meter div{grid-template-columns:6.5rem 1fr;font-size:.74rem}
  /* brand, contact */
  .brow h3{font-size:1.5rem}
  .igwrap .ig{min-height:0}.igwrap iframe{height:540px}
  .cinfo{margin-top:2rem}
  .cform.glass{padding:1.3rem}
  .cform .btn{width:100%}
  footer{flex-direction:column;align-items:flex-start;gap:1rem}
  .float{right:.9rem;bottom:.9rem;width:54px;height:54px}
}
@media(max-width:360px){
  .hero h1{font-size:1.5rem}
  .hero-foot span:nth-child(3){display:none}
}

/* nav: penanda bagian aktif */
.links a:not(.nav-cta)::after{height:2px;bottom:-2px}
.links a.active:not(.nav-cta){color:var(--ink)}
.links a.active:not(.nav-cta)::after{width:100%;background:var(--red)}
.nav-cta.active{background:var(--ink);color:#fff}
@media(max-width:960px){
  .links a.active:not(.nav-cta)::after{width:2.2rem}
}

/* footer */
.foot{display:block;background:var(--ink);color:#c3cdd2;padding:4rem var(--pad) 2rem;border-top:0;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.4fr .8fr 1.2fr 1.2fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid var(--line-d)}
.foot img{height:40px;width:auto;background:#fff;padding:.5rem .8rem;margin-bottom:1.2rem}
.foot h4{font:700 .78rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.foot a{display:block;text-decoration:none;padding:.25rem 0;color:#e6ecee}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.foot p{max-width:34ch;line-height:1.7}
.foot-copy{padding-top:1.6rem;font-size:.85rem;color:#9aa8af;max-width:none!important}
@media(max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot{padding:3rem var(--pad) 1.6rem}.foot-grid{grid-template-columns:1fr;gap:2rem}}

.btn.slide{width:100%;border-color:rgba(255,255,255,.5);color:#fff}
.btn.slide:hover{background:#fff;color:var(--ink)}
#win{touch-action:pan-y}

/* hero: keterbacaan label atas & tombol WA tidak menutupi "Gulir" */
.hero-inner .kicker{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hero-foot{padding-right:5.2rem}