/* ============================================================
   RUANG by Suet Yi — website
   Brand system: Forest / Cream / Gold · Cormorant Garamond + DM Sans
   ============================================================ */

:root{
  --forest:#2E3C21;
  --cream:#F1E9DF;
  --gold:#C8A781;
  --offwhite:#FDFAF5;
  --noir:#1E1C1A;
  /* Darkened from #7A6E62 on 2026-08-29: that was 4.12:1 on the cream background,
     under the 4.5:1 WCAG AA asks for body text, and clay carries the section leads,
     the FAQ answers and every form label. This is 4.80:1 and still reads as clay. */
  --clay:#6F6459;
  --stone:#C8BEB3;

  --wa:#25D366;
  /* White on #128C4A was 4.31:1. This is 5.42:1 — the primary CTA of the site
     should not be the thing that fails. */
  --wa-dark:#0F7A40;

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --wrap:1180px;
  --pad:clamp(20px,5vw,40px);
  --radius:2px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

/* [hidden] must win over any display rule below (the lightbox sets display:flex) */
[hidden]{display:none!important}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--cream);
  color:var(--noir);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--forest);color:var(--cream);padding:12px 18px;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
}
.skip-link:focus{left:12px;top:12px}

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

/* ── Type primitives ─────────────────────────────────────── */

.eyebrow{
  font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);margin:0 0 14px;
}
.eyebrow.light{color:var(--gold)}

.section-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,5vw,52px);
  line-height:1.12;letter-spacing:-.01em;
  margin:0 0 18px;
}
.section-title.light{color:var(--cream)}
.section-title em{font-style:italic}

.section-lead{
  max-width:62ch;margin:0 0 40px;
  font-size:clamp(15px,1.6vw,17px);
  color:var(--clay);line-height:1.75;
}
.section-lead.centered{margin-inline:auto;text-align:center}

.section{padding:clamp(64px,9vw,120px) 0}
.section-alt{background:var(--offwhite)}
.section-forest{background:var(--forest);color:var(--cream)}

/* ── Buttons ─────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--sans);font-size:12.5px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:11px 20px;font-size:11.5px}
.btn-lg{padding:18px 38px;font-size:13px}

.btn-gold{background:var(--gold);color:var(--noir)}
.btn-gold:hover{background:#b8946c}

.btn-outline{background:transparent;color:var(--noir);border-color:var(--stone)}
.btn-outline:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}

.btn-ghost-light{background:transparent;color:var(--cream);border-color:rgba(241,233,223,.55)}
.btn-ghost-light:hover{background:var(--cream);color:var(--noir);border-color:var(--cream)}

.btn-wa{background:var(--wa-dark);color:#fff}
.btn-wa:hover{background:#0C6835}
.wa-icon{width:17px;height:17px;flex:none}

/* ── Header ──────────────────────────────────────────────── */

.site-header{
  position:sticky;top:0;z-index:90;
  background:rgba(241,233,223,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--stone)}

.header-inner{display:flex;align-items:center;gap:20px;min-height:72px}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--forest);margin-right:auto}
.brand .arch{width:19px;height:27px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:.34em;color:var(--noir)}
.brand-sub{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--clay);margin-top:3px;letter-spacing:.02em}

.nav{display:flex;gap:28px}
.nav a{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--noir);padding:6px 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right .3s var(--ease);
}
.nav a:hover::after{right:0}

.menu-toggle{
  display:none;width:42px;height:42px;padding:11px 9px;
  background:none;border:1px solid var(--stone);border-radius:var(--radius);cursor:pointer;
  flex-direction:column;justify-content:space-between;
}
.menu-toggle span{display:block;height:1px;background:var(--noir);transition:transform .3s var(--ease),opacity .2s var(--ease)}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.mobile-nav{display:none;flex-direction:column;border-top:1px solid var(--stone);background:var(--cream)}
.mobile-nav a{
  padding:16px var(--pad);text-decoration:none;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid rgba(200,190,179,.5);
}
.mobile-nav.is-open{display:flex}

/* The nav must not shrink: .brand carries margin-right:auto, so a shrinkable
   nav gives its space to the brand and wraps its own labels onto two lines
   instead. Nowrap keeps each label whole. */
.nav{flex:none}
.nav a{white-space:nowrap}

/* .wrap caps the header row at 1180px however wide the screen is, so adding the
   language switch left no room for the WhatsApp label. The button keeps its
   icon, which reads as WhatsApp on its own, and the row fits in all three
   languages with room to spare. */
.header-wa{padding:11px 13px;gap:0;font-size:0}
.header-wa .wa-icon{width:18px;height:18px}

@media (max-width:1150px){
  .nav{display:none}
  .menu-toggle{display:flex}
  /* The guide page carries four nav items and no hamburger to fall back on,
     so its nav stays until there is genuinely no room. */
  .nav.nav-compact{display:flex}
}
@media (max-width:720px){
  .nav.nav-compact{display:none}
}

/* ── Hero ────────────────────────────────────────────────── */

.hero{position:relative;min-height:clamp(520px,86vh,860px);display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(18,24,12,.86) 0%,rgba(18,24,12,.7) 34%,rgba(18,24,12,.34) 62%,rgba(18,24,12,.12) 88%,rgba(18,24,12,.08) 100%),
    linear-gradient(to top,rgba(18,24,12,.7) 0%,rgba(18,24,12,.4) 38%,rgba(18,24,12,.26) 70%,rgba(18,24,12,.34) 100%);
}
@media (max-width:820px){
  .hero-scrim{
    background:linear-gradient(to top,rgba(18,24,12,.9) 0%,rgba(18,24,12,.72) 42%,rgba(18,24,12,.5) 75%,rgba(18,24,12,.45) 100%);
  }
}
.hero-content{position:relative;padding-bottom:clamp(52px,8vw,96px);padding-top:120px;color:var(--cream)}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(42px,8.4vw,88px);line-height:1.03;letter-spacing:-.015em;
  margin:0 0 22px;text-shadow:0 2px 24px rgba(0,0,0,.3);
}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero-sub{
  max-width:52ch;margin:0 0 34px;
  font-size:clamp(15px,1.8vw,18px);line-height:1.7;
  color:rgba(241,233,223,.92);
}
/* The two hero buttons and the two contact buttons are pairs, and a pair reads
   as one thing only if both are the same size — and she wants all four the same, so
   both pairs share one 700px track: same padding (all four are .btn-lg), same width,
   whatever the label. */
.hero-actions,.contact-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;width:min(100%,700px)}
/* The longest label ("See our work on Instagram" with its icon) needs ~340px; below
   this the columns would squeeze it, so the pair stacks instead. */
@media (max-width:760px){.hero-actions,.contact-actions{grid-auto-flow:row;width:100%}}

/* ── Trust strip ─────────────────────────────────────────── */

.trust{background:var(--forest);color:var(--cream);padding:34px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.trust-grid div{display:flex;flex-direction:column;gap:5px}
.trust-grid strong{font-family:var(--serif);font-size:clamp(24px,3vw,34px);font-weight:400;color:var(--gold);line-height:1}
.trust-grid span{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(241,233,223,.72)}
@media (max-width:720px){
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:28px 16px}
}

/* ── Project meta row ────────────────────────────────────── */

.meta-row{
  list-style:none;margin:0 0 28px;padding:20px 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  border-top:1px solid var(--stone);border-bottom:1px solid var(--stone);
}
.meta-row li{display:flex;flex-direction:column;gap:6px}
.meta-row span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--clay)}
.meta-row strong{font-family:var(--serif);font-size:19px;font-weight:400}
@media (max-width:720px){.meta-row{grid-template-columns:repeat(2,1fr);gap:22px 16px}}

/* ── Featured projects ───────────────────────────────────── */

/* One section, several projects. Each project owns its heading, meta-row and
   gallery; the rule between them is the meta-row's own top border, so the only
   thing this adds is breathing room. */
.project + .project{margin-top:clamp(56px,8vw,96px)}
/* Each project is just its name, the labelled facts row, and the photo strip —
   no paragraph. She asked for it that bare (2026-09-14). */
.project-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.4vw,38px);
  line-height:1.15;letter-spacing:-.01em;
  margin:0 0 6px;
}

/* ── Galleries ───────────────────────────────────────────── */

.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.gallery .shot{grid-column:span 3;aspect-ratio:4/3}
.gallery .shot.shot-wide{grid-column:span 6;aspect-ratio:16/9}
@media (min-width:900px){
  .gallery .shot{grid-column:span 2;aspect-ratio:4/3}
  .gallery .shot.shot-wide{grid-column:span 4;grid-row:span 2;aspect-ratio:auto}
}
@media (max-width:600px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .shot{grid-column:span 1}
  .gallery .shot.shot-wide{grid-column:span 2}
}

/* A gallery as a horizontal strip. Same .gallery class so the lightbox still groups
   by it; the tiles keep 4:3 and scroll-snap so a swipe lands on a whole photo. The
   next tile deliberately peeks in from the right edge — that is the affordance.
   Arrows are for mouse users; on touch the strip is simply swiped. */
.strip{position:relative}
.gallery--strip{
  display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:0;
  padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.gallery--strip::-webkit-scrollbar{display:none}
.gallery--strip .shot{
  flex:0 0 auto;width:clamp(260px,42vw,460px);aspect-ratio:4/3;scroll-snap-align:start;
}
.gallery--strip:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.strip-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(253,250,245,.92);border:1px solid var(--stone);color:var(--forest);
  font-size:30px;line-height:1;padding:0 0 3px;
  box-shadow:0 4px 18px rgba(30,28,26,.12);
  transition:opacity .25s var(--ease),background .25s var(--ease);
}
.strip-btn:hover{background:var(--offwhite)}
.strip-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.strip-prev{left:-10px}
.strip-next{right:-10px}
.strip.at-start .strip-prev,.strip.at-end .strip-next{opacity:0;pointer-events:none}
@media (hover:none){.strip-btn{display:none}}
@media (max-width:600px){
  .gallery--strip .shot{width:78vw}
  .gallery--strip{gap:10px}
}

.render-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px;margin-bottom:26px}
.render-grid .shot{aspect-ratio:4/5}

.shot{
  position:relative;padding:0;margin:0;border:none;overflow:hidden;cursor:zoom-in;
  background:var(--stone);border-radius:var(--radius);
}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .4s var(--ease)}
.shot:hover img{transform:scale(1.045)}
.shot::after{
  content:"";position:absolute;inset:0;background:rgba(46,60,33,0);
  transition:background .35s var(--ease);pointer-events:none;
}
.shot:hover::after{background:rgba(46,60,33,.12)}

/* ── Results / ROI ───────────────────────────────────────── */

/* min() so the track can never demand more width than the viewport actually has —
   a bare minmax(340px,…) forces a 340px column on a 320px phone and pushes the
   whole page sideways. */
.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:20px}

.result{
  background:#fff;border:1px solid var(--stone);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:32px clamp(24px,3vw,36px);
}
.result-head{margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--stone)}
.result-head h3{font-family:var(--serif);font-weight:400;font-size:27px;margin:0 0 6px;line-height:1.2}
.result-head p{margin:0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}

.result-flow{display:flex;align-items:center;gap:clamp(12px,3vw,26px);margin-bottom:28px}
.rf-item{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.rf-label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--clay)}
.rf-value{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4.4vw,40px);line-height:1;color:var(--noir)}
.rf-item.is-after .rf-value{color:var(--forest)}
.rf-item small{font-size:12px;color:var(--clay)}
.rf-badge{
  display:inline-block;align-self:flex-start;margin-top:8px;
  background:var(--gold);color:var(--noir);
  padding:4px 11px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;border-radius:var(--radius);
}
.rf-arrow{flex:none;width:clamp(28px,5vw,44px);color:var(--gold)}
.rf-arrow svg{width:100%;height:auto;display:block}

.result-stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px 22px;
}
.result-stats li{display:flex;flex-direction:column;gap:4px}
.result-stats span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.result-stats strong{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--forest);line-height:1.1}

.results-note{
  margin:32px 0 0;font-size:13.5px;line-height:1.75;color:var(--clay);max-width:74ch;
}

@media (max-width:420px){
  .result-flow{flex-direction:column;align-items:stretch;gap:14px}
  .rf-arrow{width:24px;transform:rotate(90deg);align-self:center}
}

/* ── Philosophy ──────────────────────────────────────────── */

.principles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
  gap:34px clamp(24px,4vw,48px);
}
.principle{border-top:1px solid var(--stone);padding-top:22px}
.principle-no{
  display:block;font-family:var(--serif);font-size:26px;line-height:1;
  color:var(--gold);letter-spacing:.06em;margin-bottom:13px;
}
.principle h3{font-family:var(--serif);font-weight:400;font-size:23px;margin:0 0 11px;line-height:1.25}
.principle p{margin:0;font-size:14.5px;line-height:1.75;color:var(--clay)}

.pull-quote{
  margin:clamp(48px,7vw,76px) auto 0;max-width:60ch;text-align:center;
  padding:0 clamp(8px,3vw,24px);
}
.pull-quote p{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(23px,3.4vw,34px);line-height:1.4;margin:0 0 18px;color:var(--forest);
}
.pull-quote cite{
  font-family:var(--sans);font-style:normal;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--clay);
}
.pull-quote::before{
  content:"";display:block;width:44px;height:1px;background:var(--gold);margin:0 auto 26px;
}

/* ── Tabs ────────────────────────────────────────────────── */

.tabs{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px;
  border-bottom:1px solid var(--stone);padding-bottom:0;
}
.tab{
  background:none;border:none;border-bottom:2px solid transparent;
  padding:12px 4px;margin-right:22px;cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;color:var(--clay);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.tab:hover{color:var(--noir)}
.tab.is-active{color:var(--forest);border-bottom-color:var(--gold)}

.panel-note{
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.2vw,21px);
  color:var(--clay);margin:0 0 24px;max-width:58ch;
}
.style-cta{margin-bottom:8px}

.disclaimer{
  margin:44px 0 0;padding-top:22px;border-top:1px solid var(--stone);
  font-family:var(--serif);font-style:italic;font-size:14.5px;line-height:1.7;
  color:var(--clay);
}

/* ── Step flow ───────────────────────────────────────────── */

.flow{list-style:none;margin:0 0 40px;padding:0;counter-reset:none}
.fstep{border-top:1px solid var(--stone);padding:34px 0}
.fstep:first-child{border-top:none;padding-top:0}

.fstep-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.fstep-num{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--stone);background:transparent;
  font-family:var(--serif);font-size:17px;color:var(--clay);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.fstep.is-done .fstep-num{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.fstep-title{min-width:0}
.fstep-title h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,28px);margin:0 0 4px;line-height:1.2}
.fstep-pick{
  margin:0;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--clay);
}
.fstep.is-done .fstep-pick{color:var(--forest)}
.fstep-body{padding-left:54px}
@media (max-width:640px){
  .fstep-body{padding-left:0}
  .fstep-num{width:32px;height:32px;font-size:15px}
}

/* ── Design cards ────────────────────────────────────────── */

.step-lead{margin:0 0 22px;font-size:14.5px;line-height:1.7;color:var(--clay);max-width:62ch}

.design-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:16px}
.design{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--stone);border-radius:var(--radius);background:var(--offwhite);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.design.is-selected{
  border-color:var(--forest);border-width:1.5px;
  box-shadow:0 14px 34px rgba(46,60,33,.16);
}

/* ── Carousel ────────────────────────────────────────────── */

.design-carousel{position:relative}
.carousel-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-slide{
  flex:0 0 100%;scroll-snap-align:start;
  margin:0;padding:0;border:none;background:none;cursor:zoom-in;
}
.carousel-slide img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
/* the generic .shot hover zoom would fight scroll-snap */
.design-carousel .shot:hover img{transform:none}
.design-carousel .shot::after{content:none}

.carousel-dots{
  position:absolute;left:0;right:0;bottom:10px;
  display:flex;justify-content:center;gap:6px;pointer-events:none;
}
.carousel-dots .dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(253,250,245,.55);box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:background .3s var(--ease),width .3s var(--ease);
}
.carousel-dots .dot.is-on{background:var(--cream);width:16px;border-radius:3px}

.design-cap{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.design-cap h4{font-family:var(--serif);font-weight:400;font-size:19px;margin:0;line-height:1.2}
.design-cap p{margin:0;font-size:12.5px;line-height:1.55;color:var(--clay)}
.design-pick{
  margin-top:auto;width:100%;padding:11px;cursor:pointer;
  background:transparent;border:1px solid var(--stone);border-radius:var(--radius);
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);
  transition:all .25s var(--ease);
}
.design-pick:hover{border-color:var(--forest);color:var(--noir)}
.design-pick[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--cream)}

/* ── Tier bar ────────────────────────────────────────────── */

.tier-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;margin-bottom:40px}
.tier{
  position:relative;background:var(--offwhite);
  border:1px solid var(--stone);border-radius:var(--radius);
  padding:26px 24px;cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.tier:hover{border-color:var(--gold);transform:translateY(-3px)}
.tier.is-selected{
  background:var(--forest);border-color:var(--forest);color:var(--cream);
  box-shadow:0 14px 34px rgba(46,60,33,.16);
}
.tier h3{font-family:var(--serif);font-weight:400;font-size:25px;margin:0 0 8px;line-height:1.15}
.tier-price{
  font-family:var(--serif);font-size:21px;margin:0 0 14px;color:var(--forest);line-height:1;
}
.tier.is-selected .tier-price{color:var(--gold)}
.tier-blurb{margin:0;font-size:13.5px;line-height:1.65;color:var(--clay)}
.tier.is-selected .tier-blurb{color:rgba(241,233,223,.8)}
.tier.is-selected::after{
  content:"✓";position:absolute;top:20px;right:22px;
  color:var(--gold);font-size:15px;
}

/* ── Catalogue ───────────────────────────────────────────── */

.pieces-empty{
  margin:0;padding:30px 26px;text-align:center;
  border:1px dashed var(--stone);border-radius:var(--radius);
  font-family:var(--serif);font-style:italic;font-size:17px;color:var(--clay);
}

.catalogue{display:flex;flex-direction:column;gap:36px}

.cat-group-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid var(--stone);
}
.cat-group-head h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:0;line-height:1.2}
.cat-group-head span{
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--clay);
  white-space:nowrap;
}

.cat-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}

/* After a blocked send, show which groups still need a choice */
.catalogue.show-gaps .cat-group.is-empty .cat-group-head{border-bottom-color:#a4442f}
.catalogue.show-gaps .cat-group.is-empty .cat-group-head span{color:#a4442f}
.catalogue.show-gaps .cat-group.is-empty .cat-group-head span::before{content:"⚠ ";}

.cat-item{display:flex;flex-direction:column}
.cat-img{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--stone);border-radius:var(--radius);background:var(--offwhite);
}
.cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cat-item:not(.is-locked):hover .cat-img img{transform:scale(1.04)}
.cat-item.is-picked .cat-img{border-color:var(--forest);border-width:1.5px}

.cat-item.is-locked .cat-img img{filter:grayscale(.55) brightness(1.06);opacity:.5}
.cat-lock{
  position:absolute;top:10px;left:10px;
  background:rgba(46,60,33,.9);color:var(--cream);
  padding:5px 11px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;border-radius:var(--radius);
}

.cat-body{padding-top:12px;display:flex;flex-direction:column;gap:8px;flex:1}
.cat-name{font-family:var(--serif);font-weight:400;font-size:16px;margin:0;line-height:1.3}
.cat-item.is-locked .cat-name{color:var(--clay)}
/* Locked piece: an invitation to move up a level, not a dead end */
.cat-upgrade{
  margin-top:auto;width:100%;padding:9px 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:transparent;border:1px dashed var(--gold);border-radius:var(--radius);
  font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--clay);transition:all .25s var(--ease);
}
.cat-upgrade span{font-family:var(--serif);font-size:13px;letter-spacing:.02em;text-transform:none;color:var(--forest)}
.cat-upgrade:hover{background:var(--forest);border-color:var(--forest);border-style:solid;color:var(--cream)}
.cat-upgrade:hover span{color:var(--gold)}

/* ── Toast ───────────────────────────────────────────────── */

.toast{
  /* Symmetric insets plus width:fit-content and auto margins — with left:50% and
     right:auto the available width is only half the viewport, so max-width could
     never be reached and every message wrapped into a narrow column. */
  position:fixed;left:16px;right:16px;bottom:96px;z-index:110;
  width:fit-content;margin-inline:auto;transform:translateY(14px);
  max-width:min(92vw,460px);
  background:var(--forest);color:var(--cream);
  border:1px solid rgba(200,167,129,.4);border-radius:var(--radius);
  padding:14px 20px;font-size:13.5px;line-height:1.55;text-align:center;
  box-shadow:0 14px 40px rgba(30,28,26,.28);
  opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease);
  pointer-events:none;
}
.toast.is-visible{opacity:1;transform:none}
/* Clear of the sticky bar at its real measured height, not a guess. */
@media (max-width:560px){.toast{bottom:calc(var(--sticky-h, 130px) + 14px)}}

.cat-add{
  margin-top:auto;width:100%;padding:10px;cursor:pointer;
  background:transparent;border:1px solid var(--stone);border-radius:var(--radius);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);
  transition:all .25s var(--ease);
}
.cat-add:hover{border-color:var(--forest);color:var(--noir)}
.cat-add[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--cream)}

.cat-note{
  margin:32px 0 0;font-size:13px;line-height:1.75;color:var(--clay);max-width:74ch;
}

@media (max-width:520px){
  .cat-row{grid-template-columns:repeat(2,1fr);gap:12px}
  .cat-name{font-size:14px}
  .cat-add{font-size:9.5px;padding:9px 4px}
}

/* ── Packages ────────────────────────────────────────────── */

.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px;margin-bottom:44px}

.pkg{
  position:relative;display:flex;flex-direction:column;
  background:var(--offwhite);border:1px solid var(--stone);border-radius:var(--radius);
  padding:32px 28px 26px;cursor:pointer;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.pkg:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 12px 34px rgba(46,60,33,.09)}
.pkg.is-selected{
  border-color:var(--forest);border-width:1.5px;
  box-shadow:0 14px 38px rgba(46,60,33,.14);background:#fff;
}
.pkg.is-selected::before{
  content:"✓ Selected";position:absolute;top:-11px;left:26px;
  background:var(--forest);color:var(--cream);
  padding:4px 12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;border-radius:var(--radius);
}

.pkg-flag{
  position:absolute;top:-11px;right:26px;margin:0;
  background:var(--gold);color:var(--noir);
  padding:4px 12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;border-radius:var(--radius);
}
.pkg.is-selected .pkg-flag{opacity:0}

.pkg-head{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--stone)}
.pkg-head h3{font-family:var(--serif);font-weight:400;font-size:29px;margin:0 0 8px;line-height:1.15}
.price{font-family:var(--serif);font-size:31px;font-weight:500;margin:0;line-height:1;color:var(--forest)}
.price .from{
  display:block;font-family:var(--sans);font-size:10.5px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin-bottom:6px;
}

.pkg-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.pkg-list li{position:relative;padding-left:19px;font-size:14px;line-height:1.6;color:var(--noir)}
.pkg-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--gold)}
.pkg-list li.soft{color:var(--clay);font-style:italic;font-family:var(--serif);font-size:15px}

.pkg-select{
  display:block;text-align:center;padding:12px;
  border:1px solid var(--stone);border-radius:var(--radius);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.pkg:hover .pkg-select{border-color:var(--gold);color:var(--noir)}
.pkg.is-selected .pkg-select{background:var(--forest);border-color:var(--forest);color:var(--cream);font-size:0}
.pkg.is-selected .pkg-select::after{content:"✓ Selected";font-size:11.5px}

/* ── Included ────────────────────────────────────────────── */

.included{
  background:var(--forest);color:var(--cream);
  padding:34px clamp(24px,4vw,40px);border-radius:var(--radius);margin-bottom:44px;
}
.included-title{
  font-family:var(--sans);font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 20px;
}
.included-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:14px 28px;
}
.included-list li{position:relative;padding-left:22px;font-size:14.5px;color:rgba(241,233,223,.94)}
.included-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-size:13px}

/* ── Add-ons + style chips ───────────────────────────────── */

.addons,.style-pick{margin-bottom:40px}
.addons-title{font-family:var(--serif);font-weight:400;font-size:25px;margin:0 0 6px}
.addons-sub{font-size:14px;color:var(--clay);margin:0 0 20px}

.addon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px}
.addon{
  display:flex;flex-direction:column;gap:5px;text-align:left;
  background:var(--offwhite);border:1px solid var(--stone);border-radius:var(--radius);
  padding:20px 22px;cursor:pointer;font-family:var(--sans);
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.addon:hover{border-color:var(--gold);transform:translateY(-2px)}
.addon[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.addon-name{font-size:15px;font-weight:400;position:relative;padding-right:24px}
.addon[aria-pressed="true"] .addon-name::after{content:"✓";position:absolute;right:0;top:0;color:var(--gold)}
.addon-note{font-size:12px;color:var(--clay);line-height:1.5}
.addon[aria-pressed="true"] .addon-note{color:rgba(241,233,223,.66)}
.addon-price{font-family:var(--serif);font-size:17px;color:var(--forest);margin-top:3px}
.addon[aria-pressed="true"] .addon-price{color:var(--gold)}

.style-chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  background:transparent;border:1px solid var(--stone);border-radius:100px;
  padding:10px 20px;cursor:pointer;font-family:var(--sans);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);
  transition:all .25s var(--ease);
}
.chip:hover{border-color:var(--gold);color:var(--noir)}
.chip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--cream)}

/* ── Details form ────────────────────────────────────────── */

.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:20px 22px}
.field{margin:0;display:flex;flex-direction:column;gap:8px}
/* A label that wraps to two lines is taller than its neighbours, and the inputs
   in that row stop lining up. The fields stretch to the grid row, so pushing
   their contents to the bottom bottom-aligns every input regardless of how many
   lines each label takes. Five fields sit in this grid since 2026-09-02. */
.calc-form .field{justify-content:flex-end}
.field label{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);
}
.field .opt{text-transform:none;letter-spacing:.02em;font-style:italic;font-size:11px}
.field input{
  font-family:var(--sans);font-size:15px;font-weight:300;color:var(--noir);
  background:var(--offwhite);border:1px solid var(--stone);border-radius:var(--radius);
  padding:13px 15px;width:100%;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.field input::placeholder{color:var(--clay);opacity:.85}
.field input:focus{outline:none;border-color:var(--forest);background:#fff}
.field input.is-invalid{border-color:#a4442f;background:#fdf3f0}
.field-note{
  margin:20px 0 0;font-size:12.5px;line-height:1.7;color:var(--clay);max-width:66ch;
}

/* ── Letting ─────────────────────────────────────────────── */

.letting-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px);align-items:start}
@media (max-width:820px){.letting-grid{grid-template-columns:1fr}}

.letting-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.letting-list li{
  position:relative;padding-left:26px;font-size:15px;line-height:1.65;
  padding-bottom:16px;border-bottom:1px solid var(--stone);
}
.letting-list li:last-child{border-bottom:none;padding-bottom:0}
.letting-list li::before{
  content:"";position:absolute;left:0;top:11px;
  width:9px;height:9px;border:1px solid var(--gold);border-radius:50%;
}

.offer{
  background:var(--forest);color:var(--cream);
  border-radius:var(--radius);padding:clamp(28px,4vw,40px);
}
.offer-label{
  margin:0 0 18px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.offer-figure{
  margin:0 0 8px;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.6vw,42px);line-height:1;
}
.offer-half{font-size:1.5em;color:var(--gold);margin-right:.08em}
.offer-compare{
  margin:0 0 22px;font-size:13px;color:rgba(241,233,223,.62);
}
.offer-compare s{text-decoration-thickness:1px;text-underline-offset:2px}
.offer-body{
  margin:0 0 26px;font-size:14.5px;line-height:1.75;color:rgba(241,233,223,.88);
}
.offer-body strong{color:var(--gold);font-weight:400}

/* ── Summary ─────────────────────────────────────────────── */

.summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px;justify-content:space-between;
  background:var(--offwhite);border:1px solid var(--stone);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:26px clamp(22px,3vw,32px);
}
.summary-body{flex:1;min-width:240px}
.summary-label{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);margin:0 0 8px;
}
.summary-text{font-family:var(--serif);font-size:clamp(17px,2.2vw,21px);line-height:1.5;margin:0}
.summary-text .muted{color:var(--clay);font-style:italic}
.summary-text b{font-weight:500}

.excludes{margin:26px 0 0;font-size:13px;line-height:1.7;color:var(--clay);max-width:76ch}

/* ── Process ─────────────────────────────────────────────── */

.steps{
  list-style:none;margin:44px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:36px 28px;
  counter-reset:none;
}
.steps li{border-top:1px solid rgba(200,167,129,.4);padding-top:22px}
.step-no{
  display:block;font-family:var(--serif);font-size:28px;line-height:1;
  color:var(--gold);letter-spacing:.06em;margin-bottom:14px;
}
.steps h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 10px;color:var(--cream)}
.steps p{margin:0;font-size:14.5px;line-height:1.7;color:rgba(241,233,223,.78)}

/* ── Contact ─────────────────────────────────────────────── */

.contact{background:var(--offwhite);text-align:center}
.contact-inner{display:flex;flex-direction:column;align-items:center}

/* ── Footer ──────────────────────────────────────────────── */

.site-footer{background:var(--forest);color:var(--cream);padding:56px 0 40px}
.footer-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.footer-brand{display:flex;align-items:center;gap:11px;color:var(--cream)}
.footer-brand .arch{width:19px;height:27px}
.footer-brand .brand-name{color:var(--cream)}
.footer-brand .brand-sub{color:var(--gold)}
.footer-tag{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,233,223,.68)}
.footer-links{margin:6px 0 0}
.footer-links a{color:var(--gold);text-decoration:none;font-size:14px;letter-spacing:.06em;border-bottom:1px solid rgba(200,167,129,.4);padding-bottom:2px}
.footer-links a:hover{color:var(--cream);border-color:var(--cream)}
.footer-fine{margin:14px 0 0;font-size:11.5px;line-height:1.7;color:rgba(241,233,223,.44);max-width:60ch}

/* ── Sticky enquiry bar ──────────────────────────────────── */

.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--forest);color:var(--cream);
  border-top:1px solid rgba(200,167,129,.35);
  box-shadow:0 -8px 30px rgba(30,28,26,.2);
  transform:translateY(100%);transition:transform .4s var(--ease);
}
.sticky-bar.is-visible{transform:translateY(0)}
/* keep the footer clear of the fixed bar */
/* Reserve exactly what the bar occupies. script.js measures it into --sticky-h;
   the literals are the no-JS fallback, and the mobile one is above the 126px the
   bar reaches with a wrapped summary and a two-line estimate. */
body.has-sticky{padding-bottom:calc(var(--sticky-h, 74px) + 8px)}
@media (max-width:560px){body.has-sticky{padding-bottom:calc(var(--sticky-h, 130px) + 8px)}}
.sticky-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;padding-block:13px;flex-wrap:wrap}
.sticky-main{flex:1;min-width:180px;display:flex;flex-direction:column;gap:3px}
.sticky-text{margin:0;font-size:13px;line-height:1.4;color:rgba(241,233,223,.8)}
.sticky-text b{font-weight:500;color:var(--gold)}

.sticky-estimate{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.sticky-estimate .est-label{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(241,233,223,.55);
}
.sticky-estimate b{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--cream);line-height:1}
.sticky-estimate .est-sum{font-size:11px;color:rgba(241,233,223,.5);letter-spacing:.02em}
.sticky-actions{display:flex;align-items:center;gap:14px}
.sticky-clear{
  background:none;border:none;cursor:pointer;color:rgba(241,233,223,.6);
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px;text-decoration:underline;text-underline-offset:3px;
}
.sticky-clear:hover{color:var(--cream)}
@media (max-width:560px){
  .sticky-inner{gap:10px}
  .sticky-text{font-size:13px;width:100%}
  .sticky-actions{width:100%;justify-content:space-between}
}

/* ── Lightbox ────────────────────────────────────────────── */

.lightbox{
  position:fixed;inset:0;z-index:120;
  background:rgba(20,24,16,.97);
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:clamp(16px,4vw,48px);
  opacity:0;transition:opacity .3s var(--ease);
}
.lightbox.is-open{opacity:1}
.lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%;max-height:100%}
.lb-figure img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--radius)}
.lb-figure figcaption{
  font-family:var(--serif);font-style:italic;font-size:16px;
  color:rgba(241,233,223,.85);text-align:center;
}
.lb-close{
  position:absolute;top:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px);
  width:46px;height:46px;background:none;border:1px solid rgba(241,233,223,.3);
  color:var(--cream);font-size:26px;line-height:1;cursor:pointer;border-radius:50%;
  transition:background .25s var(--ease);
}
.lb-close:hover{background:rgba(241,233,223,.14)}
.lb-nav{
  flex:none;width:52px;height:52px;background:none;
  border:1px solid rgba(241,233,223,.26);border-radius:50%;
  color:var(--cream);font-size:30px;line-height:1;cursor:pointer;
  transition:background .25s var(--ease);
}
.lb-nav:hover{background:rgba(241,233,223,.14)}
@media (max-width:640px){
  .lb-nav{position:absolute;bottom:22px;width:46px;height:46px}
  .lb-prev{left:22px}
  .lb-next{right:22px}
  .lb-figure figcaption{padding-bottom:60px}
}

/* ── Reveal on scroll ────────────────────────────────────── */

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════
   MOBILE — the page is long, so tighten everything that
   costs vertical space without costing clarity.
   ═══════════════════════════════════════════════════════════ */

@media (max-width:640px){
  /* sections and steps breathe less */
  .section{padding:clamp(44px,10vw,64px) 0}
  .fstep{padding:26px 0}
  .section-lead{margin-bottom:28px}
  .flow{margin-bottom:28px}

  /* the work gallery is 5 large photos — halve its height */
  .gallery{grid-template-columns:repeat(2,1fr);gap:8px}
  .gallery .shot{aspect-ratio:1}
  .gallery .shot.shot-wide{grid-column:span 2;aspect-ratio:4/3}

  /* package cards: the long inclusion lists dominate the screen */
  .pkg{padding:24px 20px 20px}
  .pkg-list{gap:8px;margin-bottom:18px}
  .pkg-list li{font-size:13px;line-height:1.5}
  .pkg-head{margin-bottom:16px;padding-bottom:14px}
  .pkg-head h3{font-size:24px}
  .price{font-size:27px}

  /* catalogue: two per row, smaller type, less gap */
  .catalogue{gap:26px}
  .cat-group-head{margin-bottom:12px}
  .cat-group-head h3{font-size:18px}
  .cat-group-head span{font-size:9.5px}

  /* principles / letting / results stack tighter */
  .principles{gap:24px}
  .principle{padding-top:16px}
  .letting-list li{padding-bottom:12px;font-size:14px}
  .result{padding:24px 20px}
  .steps{gap:26px 20px}

  /* level + design cards */
  .tier{padding:20px 18px}
  .tier h3{font-size:22px}
  .tier-blurb{font-size:12.5px}
  .design-grid{gap:12px}

  /* trust strip and meta rows */
  .trust{padding:26px 0}
  .meta-row{padding:18px 0;margin-bottom:28px}
}

/* Very small phones: one design card at a time reads better than two cramped */
@media (max-width:420px){
  .design-grid{grid-template-columns:1fr}
  .cat-row{gap:10px}
}

/* ── Collapsible steps (phones only) ─────────────────────── */

@media (max-width:640px){
  .fstep-head{cursor:pointer;position:relative;padding-right:30px}
  .fstep-head::after{
    content:"";position:absolute;right:4px;top:14px;
    width:8px;height:8px;border-right:1.5px solid var(--clay);border-bottom:1.5px solid var(--clay);
    transform:rotate(45deg);transition:transform .3s var(--ease);
  }
  .fstep.is-open .fstep-head::after{transform:rotate(-135deg)}
  .fstep:not(.is-open) .fstep-body{display:none}
  .fstep:not(.is-open) .fstep-head{margin-bottom:0}
  .fstep.is-open{padding-bottom:30px}
}

/* ── Socials ─────────────────────────────────────────────── */

.socials{display:flex;justify-content:center;gap:18px;margin-top:4px}
.social{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:rgba(241,233,223,.75);font-size:13px;letter-spacing:.05em;
  padding:6px 2px;transition:color .25s var(--ease);
}
.social svg{width:17px;height:17px;flex:none}
.social:hover{color:var(--gold)}

/* ── Cookie consent ───────────────────────────────────────────
   Sits above the sticky estimate bar (z-index 60) so the two never fight,
   and is dismissed for good once a choice is stored.
   ------------------------------------------------------------ */
.consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:80;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;
  max-width:640px;margin-inline:auto;
  background:var(--noir);color:var(--cream);
  padding:16px 20px;border-radius:14px;
  box-shadow:0 16px 40px rgba(30,28,26,.28);
  opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.consent.is-visible{opacity:1;transform:translateY(0)}
.consent-text{margin:0;flex:1;min-width:200px;font-size:13px;line-height:1.6;color:rgba(241,233,223,.85)}
.consent-actions{display:flex;gap:10px;flex-shrink:0}
.consent button{
  font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);
}
.consent-no{background:none;border:1px solid rgba(241,233,223,.35);color:rgba(241,233,223,.8)}
.consent-no:hover{border-color:var(--cream);color:var(--cream)}
.consent-yes{background:var(--gold);border:1px solid var(--gold);color:var(--noir)}
.consent-yes:hover{background:var(--cream);border-color:var(--cream)}
/* Once a package is chosen the sticky estimate bar appears at the bottom; lift the
   consent banner clear of it rather than stacking one on top of the other. */
body.has-sticky .consent{bottom:calc(16px + var(--sticky-h, 92px))}

@media (max-width:560px){
  .consent{left:10px;right:10px;bottom:10px;padding:14px 16px;gap:12px}
  body.has-sticky .consent{bottom:calc(10px + var(--sticky-h, 100px))}
  .consent-actions{width:100%}
  .consent button{flex:1}
}

/* ── FAQ ──────────────────────────────────────────────────────
   <details> keeps the page short on a phone while leaving every answer in the
   HTML, so search engines and AI assistants still read all of it.
   ------------------------------------------------------------ */
.faq{max-width:820px;margin-top:34px;border-top:1px solid var(--stone)}
.faq-item{border-bottom:1px solid var(--stone)}
.faq-item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:22px 44px 22px 0;
  transition:color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(18px,2.2vw,21px);
  line-height:1.35;margin:0;display:inline;
}
.faq-item summary::after{
  content:"";position:absolute;right:6px;top:31px;
  width:9px;height:9px;border-right:1.5px solid var(--clay);border-bottom:1.5px solid var(--clay);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item summary:hover h3{color:var(--gold)}
.faq-body{padding:0 44px 26px 0}
.faq-body p{margin:0 0 14px;font-size:14.5px;line-height:1.75;color:var(--clay);max-width:66ch}
.faq-body p:last-child{margin-bottom:0}
.faq-body strong{color:var(--noir);font-weight:500}
.faq-body a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
/* Sub-headings inside a long answer (the DLP one), so covered / not-covered
   read as separate lists rather than one wall of bullets. */
.faq-body h4{
  margin:22px 0 8px;font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--noir);
}
.faq-body h4:first-child{margin-top:0}
@media (max-width:640px){
  .faq-item summary{padding:18px 36px 18px 0}
  .faq-item summary::after{top:26px}
  .faq-body{padding:0 0 22px}
}

/* ── Article pages (guides) ───────────────────────────────────
   Used by /cost-to-furnish-a-condo-in-kl/. Long-form reading measure, and
   tables that scroll on their own rather than pushing the page sideways.
   ------------------------------------------------------------ */
.article{padding-top:calc(var(--header-h, 72px) + 48px)}
.article-wrap{max-width:760px}
.crumbs{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);margin-bottom:26px}
.crumbs a{color:var(--clay);text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:var(--forest)}
.crumbs span[aria-hidden]{margin:0 6px;opacity:.6}

.article-title{
  font-family:var(--serif);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(30px,5.2vw,50px);line-height:1.12;margin:0 0 20px;
}
.article-lead{font-size:clamp(16px,2vw,18.5px);line-height:1.7;color:var(--clay);margin:0 0 44px;max-width:64ch}

.article h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,29px);
  line-height:1.25;margin:52px 0 16px;
}
.article p{font-size:15.5px;line-height:1.8;margin:0 0 16px;max-width:68ch}
.article strong{font-weight:500;color:var(--noir)}
.article a:not(.btn){color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.article .note{font-size:13.5px;line-height:1.7;color:var(--clay);border-left:2px solid var(--stone);padding-left:16px;margin-top:26px}

.reasons{margin:0 0 16px;padding-left:20px;max-width:68ch}
.reasons li{font-size:15.5px;line-height:1.8;margin-bottom:12px}

/* display:block on a <table> makes a screen reader stop announcing it as a
   table — the row and column relationships vanish. The horizontal scroll
   belongs on a wrapper instead, which is what .tbl-scroll is for. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0 28px}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:min(100%,420px)}
.tbl caption{
  caption-side:top;text-align:left;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--clay);padding-bottom:12px;
}
.tbl th,.tbl td{border-top:1px solid var(--stone);padding:12px 16px 12px 0;text-align:left;vertical-align:top;line-height:1.6}
.tbl thead th{border-top:none;border-bottom:1px solid var(--noir);font-weight:500;color:var(--noir);white-space:nowrap}
.tbl tbody th{font-weight:400;color:var(--clay)}
.tbl tbody td{color:var(--noir)}
.tbl-narrow tbody td{font-weight:500}

.article-cta{display:flex;gap:12px;flex-wrap:wrap;margin:40px 0 8px}

@media (max-width:640px){
  .article{padding-top:calc(var(--header-h, 64px) + 28px)}
  .article h2{margin-top:40px}
  .tbl th,.tbl td{padding-right:12px}
}

/* Ordered conditions inside an FAQ answer (e.g. what must be done before the
   30 working days start counting). */
.faq-list{margin:0 0 14px;padding-left:20px;max-width:64ch}
.faq-list li{font-size:14.5px;line-height:1.75;color:var(--clay);margin-bottom:5px}

/* ── Returns calculator & advisory promise ────────────────────
   Deliberately quiet styling — this section is meant to read as counsel, not as
   a conversion widget.
   ------------------------------------------------------------ */
.calc{margin-top:34px;max-width:900px}
.calc-form{margin:0}

.calc-out{display:block;margin-top:30px;padding:26px 28px;background:var(--offwhite);border:1px solid var(--stone);border-radius:var(--radius)}
.calc-stats{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:18px 26px}
.calc-stats li{display:flex;flex-direction:column;gap:5px}
.calc-stats span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.calc-stats strong{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.6vw,26px);color:var(--noir);line-height:1}

.calc-verdict{margin:0 0 14px;font-size:15px;line-height:1.75;padding-left:16px;border-left:3px solid var(--stone)}
.calc-verdict.is-good{border-left-color:var(--forest)}
.calc-verdict.is-ok{border-left-color:var(--gold)}
.calc-verdict.is-bad{border-left-color:#a4442f}

.calc-gap{margin:0 0 14px;font-size:14.5px;line-height:1.75;color:var(--clay)}
.calc-gap strong{color:var(--noir);font-weight:500}
.calc-gap.is-good strong{color:var(--forest)}
.calc-caveat{margin:18px 0 0;font-size:12.5px;line-height:1.7;color:var(--clay);max-width:70ch}

.promise{margin-top:46px;padding-top:34px;border-top:1px solid var(--stone);max-width:900px}
.promise h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.6vw,25px);margin:0 0 20px}
.promise-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px 30px}
.promise-list li{font-size:14.5px;line-height:1.75;color:var(--clay);padding-left:18px;position:relative}
.promise-list li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.promise-list strong{color:var(--noir);font-weight:500}
.promise-note{margin:26px 0 0;font-size:13.5px;line-height:1.8;color:var(--clay);font-style:italic;max-width:70ch}

@media (max-width:640px){
  .calc-out{padding:20px}
  .calc-stats{gap:16px 20px}
}

/* iOS Safari zooms the whole page when a focused input is under 16px, which on a
   phone reads as the page lurching sideways the moment you tap a field. Bump to
   16px on small screens only; desktop keeps the lighter 15px. */
@media (max-width:640px){
  .field input{font-size:16px}
}

/* The "which level" ladder inside the calculator result. */
.calc-ladder{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--stone)}
.calc-ladder-title{margin:0 0 14px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.calc-stats-tight strong{font-size:clamp(18px,2.2vw,21px)}
.calc-ladder-note{margin:16px 0 0;font-size:13px;line-height:1.75;color:var(--clay);max-width:68ch}

/* ── Spending against the ceiling ─────────────────────────────
   The head-to-head between two budgets. Quiet like the calculator above it —
   the two paybacks are the argument, so nothing here should look like a chart
   competing for attention.
   ------------------------------------------------------------ */
.ceiling{margin-top:52px;padding-top:38px;border-top:1px solid var(--stone);max-width:900px}
.ceiling-title{font-family:var(--serif);font-weight:400;font-size:clamp(23px,3.4vw,32px);line-height:1.2;margin:0 0 16px}
.ceiling-lead{margin:0 0 28px;font-size:15px;line-height:1.85;color:var(--clay);max-width:70ch}
/* Her plain statement of the argument, set in noir so it carries more weight
   than the clay body copy around it. The e-hailing note below only illustrates
   what this paragraph says outright. */
.ceiling-point{margin:26px 0 0;font-size:15.5px;line-height:1.85;color:var(--noir);max-width:70ch}
.ceiling-note{margin:20px 0 0;font-size:14px;line-height:1.85;color:var(--clay);max-width:68ch;padding-left:16px;border-left:3px solid var(--gold)}

.vs-out{display:block;margin-top:24px}
.vs-basis{margin:0 0 16px;font-size:12.5px;line-height:1.7;color:var(--clay)}

.vs-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px}
.vs-card{padding:22px 24px;background:var(--offwhite);border:1px solid var(--stone);border-radius:var(--radius)}
.vs-card.is-lean{border-color:var(--forest)}
.vs-kicker{margin:0 0 4px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.vs-cost{margin:0 0 18px;font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.6vw,32px);line-height:1;color:var(--noir)}
.vs-card.is-lean .vs-cost{color:var(--forest)}
.vs-rows{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vs-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-bottom:1px solid var(--stone);padding-bottom:9px}
.vs-rows li:last-child{border-bottom:0;padding-bottom:0}
.vs-rows span{font-size:12.5px;line-height:1.5;color:var(--clay)}
.vs-rows strong{font-family:var(--serif);font-weight:500;font-size:19px;line-height:1;color:var(--noir);white-space:nowrap}

/* The payback bar. Both cards share one axis (set in script.js), so the two
   widths are directly comparable — that is the whole point of drawing it. */
.vs-track{margin-top:18px;height:6px;background:var(--cream);border-radius:3px;overflow:hidden}
.vs-card.is-lean .vs-track{background:#E3DDD3}
.vs-track span{display:block;height:100%;background:var(--stone);border-radius:3px}
.vs-card.is-lean .vs-track span{background:var(--forest)}
.vs-axis{margin:10px 0 0;font-size:11px;letter-spacing:.06em;color:var(--clay)}

.vs-verdict{margin:22px 0 0;font-size:15px;line-height:1.8;padding-left:16px;border-left:3px solid var(--forest)}
.vs-verdict strong{font-weight:500;color:var(--forest)}
.vs-caveat{margin:16px 0 0;font-size:12.5px;line-height:1.75;color:var(--clay);max-width:70ch}

/* ── What it costs to keep ────────────────────────────────────
   Loose against fitted, over a hold. The loose card is the recommendation and
   carries the forest rule; the built-in card is neutral, not a warning — Ruang
   quotes built-ins on request and the copy has to stay fair to them.
   ------------------------------------------------------------ */
.ownership{margin-top:52px;padding-top:38px;border-top:1px solid var(--stone);max-width:900px}
.ownership h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.6vw,25px);margin:0 0 14px}
.own-lead{margin:0 0 26px;font-size:15px;line-height:1.85;color:var(--clay);max-width:70ch}
.own-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px}
.own-card{padding:22px 24px;background:var(--offwhite);border:1px solid var(--stone);border-radius:var(--radius)}
.own-card.is-loose{border-color:var(--forest)}
.own-kicker{margin:0 0 16px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.own-card.is-loose .own-kicker{color:var(--forest)}
.own-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.own-list li{font-size:14px;line-height:1.75;color:var(--clay);padding-left:18px;position:relative}
.own-list li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--stone)}
.own-card.is-loose .own-list li::before{background:var(--gold)}
.own-list strong{color:var(--noir);font-weight:500}
.own-note{margin:24px 0 0;font-size:13.5px;line-height:1.8;color:var(--clay);max-width:70ch}

.design-note{margin:40px 0 0;font-size:15px;line-height:1.85;color:var(--clay);max-width:70ch;font-style:italic}

@media (max-width:640px){
  .vs-card,.own-card{padding:18px 20px}
  .ceiling,.ownership{margin-top:40px;padding-top:30px}
}

/* Very narrow phones (320px and similar). `white-space:nowrap` plus 38px of
   horizontal padding makes a long button label intrinsically wider than the
   screen — the button then pushes the whole document sideways and everything
   fixed to it, including the sticky bar, widens with it. Let labels wrap and
   trim the padding at this size. */
@media (max-width:400px){
  .btn{white-space:normal;text-align:center;padding-inline:20px}
  .btn-lg{padding:16px 20px}
  .btn-lg,.btn{max-width:100%}
}

/* Hero footnote — the practical facts that used to sit in the eyebrow, moved
   below the buttons now that the headline leads on returns. */
.hero-note{
  margin:22px 0 0;font-size:12px;letter-spacing:.06em;
  color:rgba(241,233,223,.72);line-height:1.7;
}

/* ── Language switch ──────────────────────────────────────
   EN · BM · 中文, as real links to /, /ms/ and /zh/ — those are separate
   pre-rendered pages, so a crawler has to be able to follow them and a phone
   has to be able to tap them. Sits in the header at every width: the mobile nav
   is behind a hamburger and a Malay or Chinese-reading owner should not have to
   go hunting. */

.lang-switch{
  display:flex;flex:none;
  border:1px solid var(--stone);border-radius:var(--radius);overflow:hidden;
}
.lang-switch a{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:11px;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  min-height:44px;padding:0 11px;line-height:1;
  border-left:1px solid var(--stone);
  color:var(--clay);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.lang-switch a:first-child{border-left:0}
.lang-switch a:hover{color:var(--noir)}
.lang-switch a.is-on{background:var(--forest);color:var(--cream)}
.lang-switch a[hreflang^="zh"]{letter-spacing:.06em;font-size:12px;padding:0 10px}

@media (max-width:1150px){
  .header-inner{gap:12px}
  .lang-switch a{padding:0 9px;font-size:10.5px}
  .lang-switch a[hreflang^="zh"]{font-size:11.5px;padding:0 9px}
}

/* ── Chinese typography ───────────────────────────────────
   Cormorant Garamond and DM Sans carry no CJK glyphs, so the font stacks gain a
   system CJK face behind them. Latin characters still render in the brand
   fonts — only the Chinese falls through. A webfont with real CJK coverage runs
   to several megabytes, which is not worth it on a phone on mobile data.

   Keyed off <html lang>, which build.py stamps into the pre-rendered page, so
   the right fonts apply on the very first paint with no JavaScript involved.

   Synthesised italics on Chinese are slanted, not italic, and read as a
   rendering fault; emphasis keeps the gold instead. */

html[lang^="zh"]{
  --serif:"Cormorant Garamond","Songti SC","Noto Serif CJK SC","Source Han Serif SC",Georgia,serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
         "Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
}
html[lang^="zh"] .hero h1 em,
html[lang^="zh"] .section-title em{font-style:normal}
html[lang^="zh"] .brand-name,
html[lang^="zh"] .brand-sub{font-family:var(--serif)}

/* Bahasa Malaysia runs roughly 15% longer than English. The uppercase,
   wide-tracked nav is where that first bites, so it loosens slightly rather
   than wrapping mid-item. */
html[lang^="ms"] .nav{gap:22px}
html[lang^="ms"] .nav a{letter-spacing:.1em}

/* ── Touch targets ────────────────────────────────────────
   Measured at 375px with the builder open: the buttons below came out between
   20 and 43 CSS px tall, which is under what a thumb reliably hits. WCAG 2.2 AA
   asks for 24px; Android and iOS both design to 44–48. These are the controls a
   visitor actually has to press to get a quote out. */

.btn{min-height:44px}
.btn-sm{min-height:44px}
.cat-add,.cat-upgrade{min-height:44px}
.sticky-clear{min-height:44px;padding:6px 10px}
.social{min-height:44px}
.lang-switch a{min-width:40px}

/* The hamburger is the only way to the nav on a phone, and as a shrinkable flex
   item next to the language switch it was collapsing to 20px wide. */
.menu-toggle{flex:none}

/* Chrome and Safari both need this before they will honour a keyboard focus
   ring on a <summary>; the FAQ rows are the one place that bites. */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── The header on a phone ────────────────────────────────
   Four things now share that row: brand, language switch, WhatsApp, hamburger.
   At 375px they came to 407px and pushed the whole page sideways. The brand
   gives up the space — it is the one element that still reads at a smaller
   size, and the other three are all controls. */

@media (max-width:480px){
  .header-inner{gap:8px}
  .brand{gap:8px}
  .brand .arch{width:16px;height:23px}
  .brand-name{font-size:13px;letter-spacing:.22em}
  .brand-sub{font-size:11px;margin-top:2px}
  .lang-switch a{min-width:34px;padding:0 7px}
  .lang-switch a[hreflang^="zh"]{padding:0 7px}
  .header-wa{padding:11px}
  .menu-toggle{width:44px}
}
.brand{min-height:44px}
.menu-toggle{width:44px;height:44px}

/* ── The guide's photograph ───────────────────────────────
   The article ran to two thousand words with nothing to look at, and its
   Article schema declared an image the page did not contain. */
.article-fig{margin:0 0 40px}
.article-fig img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.article-fig figcaption{
  margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--clay);
}

/* ── Disclosure button inside each step heading ───────────
   The six step headings used to be a <div role="button">, which made their <h3>
   a presentational child and removed all six from the document outline. The
   control is now a real button inside the heading; this keeps it looking exactly
   like the heading text it replaced. */
.fstep-toggle{
  appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;
  text-align:left;cursor:pointer;
}
.fstep-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* "Choose this" is the builder's primary action and was set at 10.5px. */
.cat-add{font-size:11.5px}
@media (max-width:640px){.cat-add{font-size:12px}}

/* Clear asks once before wiping the enquiry. */
.sticky-clear.is-armed{color:var(--gold);text-decoration-thickness:2px}

/* At 320px the header still ran a couple of pixels over. */
@media (max-width:360px){
  .header-inner{gap:6px}
  .brand-sub{display:none}
  .lang-switch a{min-width:32px;padding:0 5px}
  .lang-switch a[hreflang^="zh"]{padding:0 5px}
  .header-wa{padding:11px 9px}
}