:root{
  --v12-ink:#102236;
  --v12-paper:#f4f0e8;
  --v12-paper2:#ebe4d8;
  --v12-white:#fffdf8;
  --v12-copper:#a77543;
  --v12-sage:#405f55;
  --v12-line:rgba(16,34,54,.12);
  --v12-shadow:0 40px 100px rgba(16,34,54,.13);
}

/* PAGE */
body{
  background:
    radial-gradient(circle at 85% 8%,rgba(167,117,67,.08),transparent 25%),
    radial-gradient(circle at 15% 32%,rgba(64,95,85,.05),transparent 26%),
    var(--v12-paper);
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:100;
  opacity:.22;
  background-image:
    radial-gradient(rgba(16,34,54,.13) .55px,transparent .55px);
  background-size:5px 5px;
  mix-blend-mode:multiply;
}

/* HEADER */
.header{
  background:rgba(244,240,232,.86);
  border-bottom:1px solid rgba(16,34,54,.1);
}

.nav{
  min-height:84px;
}

.brand-hitp{
  font-size:25px;
  letter-spacing:-.06em;
}

.brand-living strong{
  font-size:16px;
}

.navlinks{
  gap:28px;
}

.navlinks a{
  position:relative;
  padding:31px 0;
}

.navlinks a:after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:20px;
  height:1px;
  background:var(--v12-copper);
  transition:.25s ease;
}

.navlinks a:hover:after,
.navlinks a.active:after{
  right:0;
}

/* BUTTONS */
.cta{
  min-height:50px;
  padding:0 24px;
  border-radius:0;
  letter-spacing:.02em;
}

.cta:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(16,34,54,.14);
}

.cta.light{
  background:rgba(255,253,248,.35);
}

/* HERO */
.hero{
  min-height:760px;
  grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
  gap:80px;
  padding:80px 0 100px;
  position:relative;
}

.hero:before{
  content:"01 / LIVING";
  position:absolute;
  top:42px;
  right:0;
  font-size:10px;
  letter-spacing:.22em;
  color:rgba(16,34,54,.35);
}

.eyebrow{
  margin-bottom:30px;
  color:var(--v12-copper);
  letter-spacing:.22em;
}

.hero h1{
  max-width:760px;
  font-size:clamp(58px,6.3vw,92px);
  line-height:1.03;
  letter-spacing:-.055em;
}

.hero .lead{
  max-width:590px;
  font-size:16px;
  line-height:1.95;
}

.hero-actions{
  margin-top:40px;
}

/* REAL VISUAL */
.visual{
  min-height:610px;
  border-radius:2px 110px 2px 2px;
  overflow:hidden;
  box-shadow:var(--v12-shadow);
  background:
    linear-gradient(
      180deg,
      rgba(10,26,42,.05) 10%,
      rgba(10,26,42,.08) 45%,
      rgba(10,26,42,.58) 100%
    ),
    url('/assets/images/hero.jpg') center/cover no-repeat;
}

.visual:before{
  content:"";
  position:absolute;
  inset:26px;
  width:auto;
  height:auto;
  left:26px;
  top:26px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:0 82px 0 0;
  background:transparent;
  box-shadow:none;
}

.visual:after{
  content:"HABITA\A SINGAPORE";
  white-space:pre;
  position:absolute;
  right:31px;
  top:35px;
  width:auto;
  height:auto;
  background:none;
  color:white;
  font-size:10px;
  line-height:1.7;
  letter-spacing:.2em;
  text-align:right;
}

.visual-note{
  left:34px;
  right:34px;
  bottom:34px;
  width:auto;
  border-radius:0;
  padding:27px 30px;
  background:rgba(250,247,240,.92);
  border:0;
}

.visual-note strong{
  max-width:390px;
  font-size:25px;
}

/* SECTIONS */
.section{
  padding:120px 0;
}

.section-head{
  grid-template-columns:.8fr 1.2fr;
  gap:90px;
  margin-bottom:65px;
}

.section-head h2{
  font-size:clamp(42px,4.6vw,66px);
  line-height:1.08;
}

.section-head p{
  font-size:15px;
  line-height:2;
}

/* SERVICE CARDS */
.grid{
  grid-template-columns:1.18fr 1fr 1fr;
  gap:14px;
}

.card{
  min-height:350px;
  border-radius:0;
  padding:34px;
  background:rgba(255,253,248,.58);
  overflow:hidden;
  position:relative;
}

.card:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:transparent;
  transition:.25s;
}

.card:hover:before{
  background:var(--v12-copper);
}

.card:nth-child(1){
  background:var(--v12-ink);
  color:#fff;
}

.card:nth-child(1) p{
  color:rgba(255,255,255,.58);
}

.card h3{
  font-size:29px;
  line-height:1.3;
  margin-top:44px;
}

.card .arro
  letter-spacing:.08em;
}

/* DARK STORY SECTION */
.section.dark{
  position:relative;
  background:
    radial-gradient(circle at 80% 35%,rgba(167,117,67,.18),transparent 28%),
    #102236;
}

.section.dark:after{
  content:"HITP × HABITA";
  position:absolute;
  right:5vw;
  bottom:28px;
  font-family:var(--serif);
  font-size:clamp(55px,8vw,130px);
  color:rgba(255,255,255,.025);
  pointer-events:none;
}

.dark .grid{
  grid-template-columns:repeat(3,1fr);
}

.dark .card{
  min-height:315px;
  background:rgba(255,255,255,.035);
}

/* STATS */
.stats{
  border-radius:0;
  background:rgba(255,253,248,.74);
}

.stat{
  padding:42px 34px;
  position:relative;
}

.stat:before{
  content:"";
  position:absolute;
  top:0;
  left:34px;
  width:35px;
  height:2px;
  background:var(--v12-copper);
}

.stat strong{
  font-size:31px;
}

/* STEPS */
.steps{
  border-top:1px solid var(--v12-line);
  border-bottom:1px solid var(--v12-line);
}

.step{
  min-height:220px;
  padding:32px 25px;
  border-top:0;
  border-right:1px solid var(--v12-line);
}

.step:last-child{
  border-right:0;
}

/* INNER PAGE HERO */
.page-hero{
  position:relative;
  overflow:hidden;
  padding:120px 0 100px;
  background:
    linear-gradient(90deg,rgba(244,240,232,.98),rgba(244,240,232,.72)),
    url('/assets/images/hero.jpg') center 55%/cover no-repeat;
}

.page-hero:after{
  content:"HABITA";
  position:absolute;
  right:-20px;
  bottom:-24px;
  font-family:var(--serif);
  font-size:clamp(100px,18vw,260px);
  line-height:1;
  color:rgba(16,34,54,.035);
  pointer-events:none;
}

.page-hero .shell{
  position:relative;
  z-index:2;
}

.page-hero h1{
  max-width:900px;
  font-size:clamp(52px,6vw,84px);
}

.page-hero p{
  max-width:680px;
  background:rgba(244,240,232,.72);
  backdrop-filter:blur(8px);
  padding:18px 22px;
  border-left:2px solid var(--v12-copper);
}

/* ASSESSMENT */
.form-shell{
  grid-template-columns:380px minmax(0,1fr);
  gap:55px;
  padding:95px 0 130px;
}

.form-intro{
  top:125px;
  overflow:hidden;
  padding:310px 34px 38px;
  background:var(--v12-ink);
  color:white;
  min-height:570px;
}

.form-intro:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:270px;
  background:
    linear-gradient(to bottom,transparent,rgba(16,34,54,.2)),
    url('/assets/images/hero.jpg') center/cover no-repeat;
}

.form-intro h2{
  position:relative;
  font-size:42px;
}

.form-intro p{
  position:relative;
  color:rgba(255,255,255,.58);
}

.form-card{
  border-radius:0;
  padding:48px;
  box-shadow:0 32px 90px rgba(16,34,54,.08);
}

.progress{
  gap:10px;
  margin-bottom:45px;
}

.progress i{
  height:2px;
}

.progress i.on{
  background:var(--v12-copper);
}

.form-step h3{
  font-size:34px;
  margin-bottom:36px;
}

.fields{
  gap:23px 18px;
}

.field input,
.field select,
.field textarea{
  border-radius:0;
  padding:16px 15px;
  background:#f7f4ee;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--v12-copper);
  box-shadow:none;
  background:white;
}

.success{
  border-radius:0;
  padding:45px;
}

/* FOOTER */
.footer{
  padding-top:82px;
}

.footer-brand{
  font-size:28px;
}

/* MOBILE */
@media(max-width:980px){
  .hero{
    min-height:auto;
    grid-template-columns:1fr;
  }

  .visual{
    min-height:520px;
  }

  .grid,
  .dark .grid{
    grid-template-columns:1fr 1fr;
  }

  .form-shell{
    grid-template-columns:1fr;
  }

  .form-intro{
    position:relative;
    top:auto;
    min-height:480px;
  }
}

@media(max-width:640px){
  .hero{
    padding:55px 0 75px;
    gap:35px;
  }

  .hero h1{
    font-size:49px;
  }

  .visual{
    min-height:430px;
    border-radius:0 60px 0 0;
  }

  .section{
    padding:80px 0;
  }

  .grid,
  .dark .grid{
    grid-template-columns:1fr;
  }

  .card{
    min-height:285px;
  }

  .page-hero{
    padding:80px 0 70px;
  }

  .page-hero h1{
    font-size:49px;
  }

  .form-card{
    padding:30px 20px;
  }
}