/* ============================================
   RCK CONSTRUCTION — Design tokens
   Color: ink #0A0A0A, panel #151513, gold-1 #C9A227, gold-2 #F0D27A, ivory #F5F2EC, line rgba(255,255,255,.1)
   Type: Display = Plus Jakarta Sans (700/800), Body = Inter
   ============================================ */

:root{
  --ink:        #0A0A0A;
  --ink-soft:   #14130F;
  --panel:      #17160F;
  --panel-2:    #1D1B13;
  --ivory:      #F6F3EC;
  --ivory-dim:  #C9C5B9;
  --gold-1:     #B88A2E;
  --gold-2:     #E9C465;
  --gold-grad:  linear-gradient(135deg, #E9C465 0%, #B88A2E 100%);
  --line:       rgba(255,255,255,.10);
  --line-soft:  rgba(0,0,0,.08);
  --shadow:     0 20px 50px -20px rgba(0,0,0,.5);
  --radius:     14px;
  --radius-sm:  8px;
  --maxw:       1240px;
  --ff-display: 'Plus Jakarta Sans', sans-serif;
  --ff-body:    'Inter', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

body{
  font-family:var(--ff-body);
  background:var(--ivory);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;background:none;border:none;}
ul{list-style:none;}

:focus-visible{
  outline:2px solid var(--gold-2);
  outline-offset:3px;
  border-radius:4px;
}

.eyebrow{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-1);
  margin-bottom:.85rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.eyebrow::before{
  content:'';
  width:18px;height:2px;
  background:var(--gold-grad);
  display:inline-block;
}

h1,h2,h3{font-family:var(--ff-display); font-weight:800; letter-spacing:-0.01em;}
.accent{color:var(--gold-1); background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--ff-display); font-weight:700; font-size:.92rem;
  padding:.95rem 1.6rem; border-radius:999px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn svg{transition:transform .25s ease;}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{ background:var(--gold-grad); color:#1A1306; box-shadow:0 12px 30px -10px rgba(201,162,39,.55);}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(201,162,39,.7);}
.btn-outline{ border:1.5px solid rgba(255,255,255,.35); color:var(--ivory);}
.btn-outline:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px);}
.btn-ghost{ border:1.5px solid var(--line-soft); color:var(--ink); padding:.75rem 1.3rem; font-size:.85rem;}
.btn-ghost:hover{ background:var(--ink); color:var(--ivory); }

/* ============== HEADER ============== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  padding:1.1rem 0;
}
.site-header.scrolled{
  background:rgba(10,10,10,.88);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 30px -10px rgba(0,0,0,.4);
  padding:.7rem 0;
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 1.6rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.logo{display:flex; align-items:center; gap:.6rem; color:var(--ivory);}
.logo-img{height:58px; width:auto; display:block;}
.logo-mark{color:var(--gold-2); flex-shrink:0;}
.logo-text{font-family:var(--ff-display); font-weight:800; font-size:1.3rem; letter-spacing:.02em; display:flex; flex-direction:column; line-height:1;}
.logo-text small{font-family:var(--ff-body); font-weight:600; font-size:.5rem; letter-spacing:.22em; color:var(--ivory-dim); margin-top:.25rem;}

.main-nav{display:flex; align-items:center; gap:1.9rem; flex:1; justify-content:center;}
.main-nav a{
  font-size:.92rem; font-weight:500; color:var(--ivory-dim);
  position:relative; padding:.3rem 0; transition:color .2s ease;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--gold-grad); transition:width .25s ease;
}
.main-nav a:hover{color:var(--ivory);}
.main-nav a:hover::after{width:100%;}

.header-phone{
  display:flex; align-items:center; gap:.5rem;
  background:var(--gold-grad); color:#1A1306;
  font-family:var(--ff-display); font-weight:700; font-size:.88rem;
  padding:.65rem 1.2rem; border-radius:999px; flex-shrink:0;
  transition:transform .2s ease;
}
.header-phone:hover{transform:translateY(-1px);}

.nav-toggle{display:none; flex-direction:column; gap:5px; padding:.5rem; z-index:110;}
.nav-toggle span{width:22px; height:2px; background:var(--ivory); border-radius:2px; transition:.3s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============== HERO ============== */
.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:9rem 1.6rem 0;
  overflow:hidden;
  background:var(--ink);
}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(8,8,6,.96) 0%, rgba(8,8,6,.78) 38%, rgba(8,8,6,.25) 65%, rgba(8,8,6,.55) 100%),
    linear-gradient(to top, rgba(8,8,6,.95) 0%, rgba(8,8,6,0) 40%);
}
.hero-content{
  position:relative; z-index:1; max-width:680px;
  animation:fadeUp .9s ease both;
}
.hero h1{
  font-size:clamp(2.4rem, 5vw, 3.7rem); line-height:1.08; color:var(--ivory); margin-bottom:1.2rem;
}
.hero-desc{
  color:var(--ivory-dim); font-size:1.05rem; max-width:540px; margin-bottom:2.1rem;
}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap;}

.hero-features{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
  max-width:var(--maxw); margin:4.5rem auto 0 auto; padding-bottom:2.5rem;
  border-top:1px solid var(--line); padding-top:2.2rem; width:100%;
}
.feature-item{display:flex; align-items:flex-start; gap:.8rem; color:var(--ivory);}
.feature-item svg{color:var(--gold-2); flex-shrink:0; margin-top:.15rem;}
.feature-item strong{display:block; font-family:var(--ff-display); font-size:.95rem; margin-bottom:.2rem;}
.feature-item span{font-size:.82rem; color:var(--ivory-dim);}

@keyframes fadeUp{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }

/* ============== WHATSAPP FLOAT ============== */
.whatsapp-float{
  position:fixed; bottom:1.8rem; right:1.8rem; z-index:90;
  display:flex; align-items:center; gap:.75rem;
  background:#1ED85F; color:#06210F;
  padding:1.1rem 1.6rem; border-radius:999px;
  font-family:var(--ff-display); font-weight:700; font-size:1rem;
  box-shadow:0 16px 36px -10px rgba(30,216,95,.7);
  transition:transform .25s ease;
}
.whatsapp-float svg{flex-shrink:0; width:36px; height:36px;}
.whatsapp-float:hover{transform:translateY(-3px);}
@media (max-width:560px){
  .whatsapp-float span{display:none;}
  .whatsapp-float{padding:1rem; bottom:1.2rem; right:1.2rem;}
  .whatsapp-float svg{width:38px; height:38px;}
}

/* ============== ABOUT ============== */
.about{padding:6.5rem 1.6rem; background:var(--ivory);}
.about-inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:4.5rem; align-items:center;
}
.about-media{position:relative;}
.about-media img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.about-badge{
  position:absolute; bottom:-1.4rem; left:-1.4rem;
  background:var(--gold-grad); color:#1A1306;
  border-radius:var(--radius-sm); padding:1.1rem 1.4rem;
  display:flex; flex-direction:column; box-shadow:0 16px 30px -12px rgba(184,138,46,.55);
}
.badge-num{font-family:var(--ff-display); font-weight:800; font-size:2rem; line-height:1;}
.badge-num small{font-size:1.1rem;}
.badge-label{font-size:.78rem; font-weight:600; margin-top:.15rem;}

.about-content h2{font-size:clamp(1.8rem, 3vw, 2.5rem); line-height:1.18; margin-bottom:1.2rem;}
.about-desc{color:#5A5648; max-width:560px; margin-bottom:2.3rem;}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;}
.stat{display:flex; flex-direction:column; gap:.5rem;}
.stat svg{color:var(--gold-1);}
.stat strong{font-family:var(--ff-display); font-size:1.5rem; font-weight:800;}
.stat small{font-size:.8rem; color:#7A766A;}

/* ============== SERVICES ============== */
.services{background:var(--ink); padding:6.5rem 1.6rem; color:var(--ivory);}
.section-head{max-width:var(--maxw); margin:0 auto 3rem auto;}
.section-head h2{font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.2; color:var(--ivory);}
.section-head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap;}

.services-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.4rem;
}
.service-card{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--panel); border:1px solid var(--line);
  transition:transform .3s ease, border-color .3s ease;
  min-height:300px; display:flex; flex-direction:column; justify-content:flex-end;
}
.service-card:hover{transform:translateY(-6px); border-color:rgba(233,196,101,.4);}
.service-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:.55; transition:opacity .3s ease, transform .4s ease;
}
.service-card:hover img{opacity:.32; transform:scale(1.06);}
.service-card::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(10,10,8,.96) 10%, rgba(10,10,8,.35) 60%, rgba(10,10,8,.1) 100%);
}
.service-icon{
  position:relative; z-index:2; width:42px; height:42px; border-radius:10px;
  background:var(--gold-grad); display:flex; align-items:center; justify-content:center;
  color:#1A1306; margin:0 1.3rem 1rem;
}
.service-card h3{position:relative; z-index:2; font-size:1.05rem; margin:0 1.3rem .5rem; color:var(--ivory);}
.service-card p{position:relative; z-index:2; font-size:.85rem; color:var(--ivory-dim); margin:0 1.3rem 1.3rem;}

/* ============== PORTFOLIO ============== */
.portfolio{padding:6.5rem 1.6rem; background:var(--ivory);}
.portfolio-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(6,1fr); gap:1rem;
}
.portfolio-item{
  border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:3/4;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.3);
}
.portfolio-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.portfolio-item:hover img{transform:scale(1.08);}

/* ============== TESTIMONIALS ============== */
.testimonials{background:var(--ink); padding:6.5rem 1.6rem; color:var(--ivory); text-align:center;}
.testimonials .section-head{text-align:center;}
.testimonials .eyebrow{justify-content:center;}
.testimonial-track-wrap{
  max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:1rem;
}
.testimonial-grid{
  flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; text-align:left;
}
.t-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem; position:relative;
}
.quote-mark{
  font-family:var(--ff-display); font-size:3rem; color:var(--gold-1); opacity:.5;
  line-height:1; display:block; margin-bottom:.3rem;
}
.t-card blockquote{font-size:.92rem; color:var(--ivory-dim); margin-bottom:1.1rem; line-height:1.6;}
.t-stars{color:var(--gold-2); font-size:.85rem; letter-spacing:.15em; margin-bottom:1rem;}
.t-card figcaption{display:flex; align-items:center; gap:.7rem;}
.t-card figcaption img{width:38px; height:38px; border-radius:50%; object-fit:cover;}
.t-card figcaption strong{display:block; font-size:.88rem; font-family:var(--ff-display);}
.t-card figcaption span{font-size:.75rem; color:var(--ivory-dim);}
.t-nav{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ivory);
  flex-shrink:0; transition:background .2s ease, border-color .2s ease;
}
.t-nav:hover{background:var(--gold-grad); color:#1A1306; border-color:transparent;}

/* ============== CTA BAND ============== */
.cta-band{
  background:var(--gold-grad); padding:5.5rem 1.6rem; text-align:center;
}
.cta-inner{max-width:680px; margin:0 auto;}
.cta-band h2{font-size:clamp(1.7rem,3vw,2.3rem); color:#1A1306; margin-bottom:.9rem;}
.cta-band p{color:#4A3A12; margin-bottom:2rem; font-size:1rem;}
.cta-actions{justify-content:center;}
.cta-warranty{margin-top:1.6rem !important; font-size:.85rem; color:#4A3A12; font-weight:600; letter-spacing:.2px;}
.cta-band .btn-primary{background:#1A1306; color:var(--gold-2); box-shadow:0 12px 30px -10px rgba(0,0,0,.35);}
.cta-band .btn-outline{border-color:rgba(26,19,6,.4); color:#1A1306;}
.cta-band .btn-outline:hover{background:rgba(26,19,6,.08);}

/* ============== FOOTER ============== */
.site-footer{background:#080705; color:var(--ivory-dim); padding:5rem 1.6rem 0;}
.footer-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr 1fr; gap:2.5rem;
  padding-bottom:3.5rem; border-bottom:1px solid var(--line);
}
.footer-brand p{font-size:.85rem; margin-top:1rem; max-width:280px; line-height:1.6;}
.footer-col h4{font-family:var(--ff-display); color:var(--ivory); font-size:.92rem; margin-bottom:1.1rem;}
.footer-col a{display:block; font-size:.86rem; margin-bottom:.7rem; transition:color .2s ease;}
.footer-col a:hover{color:var(--gold-2);}
.footer-contact{display:flex; align-items:flex-start; gap:.55rem; font-size:.84rem; margin-bottom:.85rem; line-height:1.5;}
.footer-contact svg{flex-shrink:0; margin-top:.15rem; color:var(--gold-1);}
.social-row{display:flex; gap:.6rem;}
.social-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, border-color .2s ease;
}
.social-btn:hover{background:var(--gold-grad); color:#1A1306; border-color:transparent;}
.footer-bottom{max-width:var(--maxw); margin:0 auto; padding:1.6rem 0; text-align:center; font-size:.8rem;}

/* ============== RESPONSIVE ============== */
@media (max-width: 1080px){
  .services-grid{grid-template-columns:repeat(3,1fr);}
  .portfolio-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
  .hero-features{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 920px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--ink); flex-direction:column; justify-content:center; align-items:flex-start;
    gap:1.6rem; padding:2rem 2.2rem; transform:translateX(100%); transition:transform .35s ease;
    box-shadow:-20px 0 50px rgba(0,0,0,.4);
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{font-size:1.05rem;}
  .nav-toggle{display:flex;}
  .header-phone span{display:inline;}
  .about-inner{grid-template-columns:1fr; gap:3rem;}
  .about-media{max-width:380px; margin:0 auto;}
  .stat-grid{grid-template-columns:repeat(2,1fr); gap:1.8rem;}
  .hero-features{grid-template-columns:1fr; gap:1.4rem;}
}

@media (max-width: 720px){
  .header-phone{display:none;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .testimonial-grid{grid-template-columns:1fr;}
  .t-nav{display:none;}
  .hero{padding-top:7.5rem;}
  .section-head-row{flex-direction:column; align-items:flex-start;}
}

@media (max-width: 480px){
  .services-grid{grid-template-columns:1fr;}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .about-badge{left:1rem; bottom:-1.2rem; padding:.9rem 1.1rem;}
}

/* ============== PORTFOLIO ENHANCEMENTS ============== */
.portfolio-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap:1rem;
}
.portfolio-item{
  border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:3/4;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.3);
  position:relative;
}
.portfolio-item--tall{
  grid-row: span 2;
  aspect-ratio: unset;
}
.portfolio-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,8,.85) 0%, rgba(10,10,8,0) 50%);
  display:flex; align-items:flex-end; padding:1.2rem;
  opacity:0; transition:opacity .35s ease;
}
.portfolio-item:hover .portfolio-overlay{ opacity:1; }
.portfolio-overlay span{
  font-family:var(--ff-display); font-weight:700; font-size:.88rem;
  color:var(--ivory); background:var(--gold-grad);
  padding:.35rem .85rem; border-radius:999px;
}

/* ============== PORTFOLIO FILTER TABS ============== */
.portfolio-filter{
  max-width:var(--maxw); margin:0 auto 2rem;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.pf-btn{
  padding:.45rem 1.1rem; border-radius:999px;
  border:1.5px solid var(--line); background:transparent;
  font-family:var(--ff-display); font-size:.82rem; font-weight:600;
  color:var(--ink); cursor:pointer; transition:all .25s ease;
}
.pf-btn:hover{ border-color:var(--gold-1); color:var(--gold-1); }
.pf-btn.active{ background:var(--gold-grad); border-color:transparent; color:#1A1306; }
.portfolio-item{ transition: opacity .3s ease, transform .3s ease; }
.portfolio-item.hidden{ display:none; }

/* ============== CTA BAND EYEBROW FIX ============== */
.cta-band .eyebrow::before{ background:linear-gradient(135deg,#7A5C1E,#B88A2E); }

/* ============== FOOTER MAP ============== */
.footer-map{ margin-top:.8rem; }

/* ============== SECTION DIVIDER ============== */
.section-divider{
  height:1px; background:linear-gradient(90deg, transparent, var(--line-soft), transparent);
  max-width:var(--maxw); margin:0 auto;
}

/* ============== HOVER LIFT on stat cards ============== */
.stat{
  background:rgba(201,162,39,.06); border:1px solid rgba(201,162,39,.12);
  border-radius:var(--radius-sm); padding:1.1rem 1.2rem;
  transition:border-color .25s ease, transform .25s ease;
}
.stat:hover{ border-color:rgba(201,162,39,.35); transform:translateY(-3px); }

/* ============== PORTFOLIO RESPONSIVE FIX ============== */
@media (max-width:720px){
  .portfolio-grid{ grid-template-columns:repeat(2,1fr); }
  .portfolio-item--tall{ grid-row:span 1; aspect-ratio:3/4; }
}
@media (max-width:480px){
  .portfolio-grid{ grid-template-columns:1fr 1fr; }
}

/* ============== TESTIMONIAL CAROUSEL (12 cards) ============== */
.testi-sub{
  color:var(--ivory-dim); font-size:.95rem; margin-top:.5rem; text-align:center;
}
.testi-carousel-wrap{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:1rem; padding:0 0 .5rem;
  position:relative;
}
.testi-viewport{
  flex:1; overflow:hidden; border-radius:var(--radius);
}
.testi-track{
  display:flex; gap:1.4rem;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.testi-track .t-card{
  flex:0 0 calc((100% - 2*1.4rem) / 3);
  min-width:0;
}
.testi-dots{
  display:flex; justify-content:center; gap:.5rem; margin-top:1.8rem;
}
.testi-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.2); border:none; cursor:pointer;
  transition:background .25s ease, transform .25s ease;
  padding:0;
}
.testi-dot.active{
  background:var(--gold-2); transform:scale(1.35);
}

/* t-card photo square crop */
.t-card figcaption img{
  width:46px; height:46px; border-radius:50%; object-fit:cover;
  object-position:center top;
  border:2px solid var(--gold-1);
  flex-shrink:0;
}

@media (max-width:900px){
  .testi-track .t-card{ flex:0 0 calc((100% - 1.4rem) / 2); }
}
@media (max-width:600px){
  .testi-track .t-card{ flex:0 0 100%; }
  .t-nav{ display:flex; }
}

/* ============== KALKULATOR ESTIMASI BIAYA (scoped) ============== */

  @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Archivo+Expanded:wght@700;800&family=JetBrains+Mono:wght@400;500&display=swap');

  .calc-section{
    --charcoal: #1c1a17;
    --charcoal-2: #262320;
    --paper: #f3efe6;
    --gold: #c9a24a;
    --gold-bright: #e3bd63;
    --concrete: #8c8579;
    --line: rgba(243,239,230,0.14);
    --ok: #7fae6e;
  }

  .calc-section, .calc-section *{box-sizing:border-box;}
  .calc-section *{margin:0; padding:0;}
  .calc-section{
    background: var(--charcoal);
    color: var(--paper);
    font-family:'Archivo', sans-serif;
    -webkit-font-smoothing:antialiased;
    padding: 0;
    position:relative;
    overflow:hidden;
  }

  .calc-grain{
    position:absolute; inset:0; pointer-events:none; opacity:0.035; z-index:1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .calc-wrap{
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 24px 80px;
    position:relative; z-index:2;
  }

  /* ---------- HEADER ---------- */
  .calc-section header{
    display:flex; align-items:center; gap:14px;
    margin-bottom: 8px;
  }
  .calc-mark{
    width:44px; height:44px; border:1.5px solid var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:'Archivo Expanded', sans-serif; font-weight:800; font-size:15px;
    color: var(--gold); letter-spacing:0.5px; flex-shrink:0;
  }
  .calc-brandline{ line-height:1.15; }
  .calc-brandline .calc-name{ font-family:'Archivo Expanded', sans-serif; font-weight:800; font-size:15px; letter-spacing:1px; }
  .calc-brandline .calc-tag{ font-size:11px; color: var(--concrete); letter-spacing:1.5px; text-transform:uppercase; margin-top:2px;}

  .calc-hero{
    margin-top: 36px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 32px;
  }
  .calc-eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size: 12px; color: var(--gold-bright);
    letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 14px;
  }
  .calc-section h1{
    font-family:'Archivo Expanded', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 6vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.5px;
  }
  .calc-section h1 em{
    font-style: normal;
    color: var(--gold-bright);
  }
  .calc-sub{
    margin-top:16px; max-width: 50ch;
    color: var(--concrete); font-size: 15.5px; line-height:1.6;
  }

  /* ---------- FORM SECTION ---------- */
  .calc-stepnum{
    font-family:'JetBrains Mono', monospace;
    font-size:12px; color:var(--gold);
    letter-spacing:1px;
  }
  section.calc-block{
    padding: 36px 0;
    border-bottom: 1px solid var(--line);
  }
  .calc-block-title{
    font-family:'Archivo Expanded', sans-serif;
    font-weight:700; font-size:20px;
    margin-top:8px; margin-bottom:20px;
  }

  /* Layanan pills */
  .calc-pillrow{ display:flex; gap:10px; flex-wrap:wrap; }
  .calc-pill{
    border:1px solid var(--line);
    background: transparent;
    color: var(--paper);
    padding: 13px 20px;
    font-family:'Archivo', sans-serif; font-weight:600; font-size:14.5px;
    cursor:pointer; transition: all 0.18s ease;
    flex: 1 1 auto; min-width: 140px; text-align:center;
  }
  .calc-pill:hover{ border-color: var(--gold); }
  .calc-pill.calc-active{
    background: var(--gold); border-color: var(--gold);
    color: var(--charcoal);
  }

  /* Inputs */
  .calc-field{ margin-bottom: 22px; }
  .calc-field label{
    display:block; font-size: 13px; color: var(--concrete);
    margin-bottom: 9px; letter-spacing:0.3px;
  }
  .calc-luas-input{
    display:flex; align-items:stretch; border:1px solid var(--line);
    transition: border-color 0.18s ease;
  }
  .calc-luas-input:focus-within{ border-color: var(--gold); }
  .calc-luas-input input{
    flex:1; background:transparent; border:none; outline:none;
    color: var(--paper); font-family:'JetBrains Mono', monospace;
    font-size: 22px; padding: 14px 16px; width: 100%;
  }
  .calc-luas-input input::placeholder{ color: rgba(243,239,230,0.25); }
  .calc-luas-input .calc-unit{
    display:flex; align-items:center; padding: 0 18px;
    background: var(--charcoal-2); color: var(--concrete);
    font-family:'JetBrains Mono', monospace; font-size:13px;
  }

  .calc-lantai-row{ display:flex; gap:10px; }
  .calc-lantai-btn{
    flex:1; border:1px solid var(--line); background:transparent;
    color:var(--paper); padding:11px; font-family:'JetBrains Mono', monospace;
    font-size:14px; cursor:pointer; transition: all 0.18s ease;
  }
  .calc-lantai-btn.calc-active{ background: var(--gold); color: var(--charcoal); border-color: var(--gold);}

  /* Spesifikasi radio cards */
  .calc-spec-grid{ display:grid; gap:10px; }
  .calc-spec-card{
    border:1px solid var(--line); padding:16px 18px;
    cursor:pointer; transition: all 0.18s ease;
    display:flex; justify-content:space-between; align-items:center; gap:12px;
  }
  .calc-spec-card:hover{ border-color: var(--gold); }
  .calc-spec-card.calc-active{ border-color: var(--gold); background: rgba(201,162,74,0.08); }
  .calc-spec-left .calc-spec-name{ font-weight:700; font-size:15px; }
  .calc-spec-left .calc-spec-desc{ font-size:12.5px; color: var(--concrete); margin-top:3px; }
  .calc-spec-right{
    font-family:'JetBrains Mono', monospace; font-size:12.5px;
    color: var(--gold-bright); white-space:nowrap;
  }
  .calc-radio-dot{
    width:16px; height:16px; border-radius:50%; border:1.5px solid var(--concrete);
    flex-shrink:0; position:relative;
  }
  .calc-spec-card.calc-active .calc-radio-dot{ border-color: var(--gold); }
  .calc-spec-card.calc-active .calc-radio-dot::after{
    content:''; position:absolute; inset:3px; border-radius:50%; background: var(--gold);
  }
  .calc-spec-card-inner{ display:flex; align-items:center; gap:14px; }

  /* ---------- RESULT ---------- */
  .calc-result{
    margin-top: 36px;
    border: 1px solid var(--gold);
    padding: 32px 28px;
    position: relative;
    background: linear-gradient(180deg, rgba(201,162,74,0.06), transparent 60%);
  }
  .calc-result::before{
    content:'ESTIMASI';
    position:absolute; top:-11px; left:24px;
    background: var(--charcoal); padding:0 10px;
    font-family:'JetBrains Mono', monospace; font-size:11px;
    letter-spacing:2px; color: var(--gold);
  }
  .calc-result-range{
    font-family:'Archivo Expanded', sans-serif; font-weight:800;
    font-size: clamp(26px, 5vw, 38px);
    line-height: 1.1; color: var(--paper);
    margin-bottom: 6px;
  }
  .calc-result-range .calc-to{ color: var(--concrete); font-size: 0.55em; padding: 0 8px; }
  .calc-result-note{
    font-size: 13px; color: var(--concrete); line-height:1.6;
    margin-top: 14px; padding-top:16px; border-top: 1px solid var(--line);
  }
  .calc-result-breakdown{
    margin-top:16px; display:flex; flex-direction:column; gap:8px;
  }
  .calc-bd-row{
    display:flex; justify-content:space-between; font-size:13.5px;
    font-family:'JetBrains Mono', monospace; color: var(--concrete);
  }
  .calc-bd-row span:last-child{ color: var(--paper); }

  /* CTA */
  .calc-cta{
    margin-top: 24px;
    display:flex; gap:12px; flex-wrap:wrap;
  }
  .calc-btn{
    flex:1; min-width:220px;
    padding: 17px 24px;
    text-align:center;
    font-family:'Archivo', sans-serif; font-weight:700; font-size:15px;
    text-decoration:none; cursor:pointer; border:none;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .calc-btn:active{ transform: scale(0.98); }
  .calc-btn-primary{
    background: var(--gold); color: var(--charcoal);
  }
  .calc-btn-primary:hover{ background: var(--gold-bright); }
  .calc-btn-ghost{
    background: transparent; color: var(--paper);
    border: 1px solid var(--line);
  }
  .calc-btn-ghost:hover{ border-color: var(--gold); }

  .calc-disclaimer{
    margin-top: 28px; font-size: 12px; color: var(--concrete);
    line-height: 1.7; border-left: 2px solid var(--line); padding-left: 14px;
  }

  .calc-section footer{
    margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size: 12.5px; color: var(--concrete);
  }
  .calc-section footer a{ color: var(--gold-bright); text-decoration:none; }

  .calc-hidden{ display:none; }

  @media (max-width: 480px){
    .calc-wrap{ padding: 32px 18px 60px; }
    .calc-pillrow{ flex-direction:column; }
    .calc-pill{ min-width: 0; }
  }