/* ============================================================================
   JADEX ARCHITECTS — PREMIUM DESIGN SYSTEM  (light theme)
   Loaded last on every public page. This is a cohesive design layer, not a
   patch: it re-tunes color, typography, rhythm, and the key components toward
   a restrained, editorial, gallery-grade aesthetic. Photo-backed heroes stay
   dark by design (text over imagery); every solid section is a refined light
   surface with gold used only as a precise accent.
   ============================================================================ */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* Surfaces — cool, gallery-white with a whisper of warmth for depth */
  --p-white:   #FFFFFF;
  --p-bone:    #FAF9F6;   /* alternating section surface */
  --p-linen:   #F2EEE7;   /* deepest light surface / hairline fills */
  --p-ink:     #17140F;   /* near-black display text */
  --p-ink-2:   #57503F;   /* secondary text */
  --p-ink-3:   #8B8272;   /* tertiary / labels */
  --p-line:    rgba(23,20,15,.09);
  --p-line-2:  rgba(23,20,15,.16);
  /* Gold — a single refined tone + a lighter leaf for large marks */
  --p-gold:    #9C7A3C;   /* legible on white */
  --p-gold-2:  #BE9A55;   /* brighter, for on-dark + large glyphs */
  --p-gold-3:  #E7D6B2;   /* soft leaf */
  --p-espresso:#141109;   /* dark anchor (footer) */

  /* Motion */
  --p-ease: cubic-bezier(.22,.61,.28,1);
}

/* ---- 2. BASE TYPOGRAPHY -------------------------------------------------- */
/* Refined baseline: warmer ink, a touch more air in body copy. */
body{
  color:var(--p-ink);
  background:var(--p-white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--p-gold);color:#fff}

/* Display headings — Cormorant, light weight, tight tracking, generous size.
   The single biggest premium lever: big, confident, airy serif.
   NOTE: only headings on SOLID LIGHT sections get dark ink here. Headings that
   sit over photography (.pb-title hero, .cta over a photo, .slide h1) are
   handled in the photo-section block below and stay light/cream. */
.sec-head h2,
.about-copy h2,
.intro h2,
.end-cta h2,
.compare-head h2,
.svc-index-head h2{
  font-family:var(--serif)!important;
  font-weight:300!important;
  letter-spacing:-.028em!important;
  line-height:.96!important;
  color:var(--p-ink)!important;
}
/* Italic emphasis in gold — the signature accent (light-section headings) */
.sec-head h2 em,.about-copy h2 em,.intro h2 em,
.end-cta h2 em,.compare-head h2 em,
.svc-index-head h2 em,.faq-a-inner .body em,
.slide-card .info .name em,.p-name em,.svc-card h3 em,
.proc-card h3 em,.svc-block-title em{
  font-style:italic!important;
  font-weight:300!important;
  color:var(--p-gold)!important;
}

/* Eyebrows / kickers / labels — hairline gold tick, wide tracking, small.
   Consistent treatment everywhere ties the whole site together. */
.label,.kicker,.eyebrow,.kick,
.sec-head .lbl,.about-copy .kicker,
.proc-card .checks .lbl,.svc-card .cov-lbl,.svc-card .top .kind,
.compare-head .kick,.tl-kick,.intro .kick,
.cta .kicker,.end-cta .kick,.svc-index-head .lbl,
.pb-eyebrow{
  font-family:var(--sans)!important;
  font-size:10.5px!important;
  letter-spacing:.34em!important;
  text-transform:uppercase!important;
  font-weight:500!important;
  color:var(--p-ink-3)!important;
}
/* Add the hairline gold tick before standalone eyebrows */
.about-copy .kicker::before,
.sec-head .lbl::before,
.intro .kick::before,
.tl-kick::before,
.compare-head .kick::before,
.end-cta .kick::before,
.pb-eyebrow .dash{
  content:""!important;
  display:inline-block!important;
  width:30px!important;height:1px!important;
  background:var(--p-gold)!important;
  vertical-align:middle!important;
  margin-right:14px!important;
}
/* When breadcrumbs are turned off, hide the eyebrow's decorative dash too —
   the whole "Home › …" rail AND its adjacent gold tick disappear together.
   This !important beats the general dash rule above. */
body.no-crumbs .pb-eyebrow .dash{display:none!important}
body.no-crumbs .pb-crumbs{display:none!important}

/* Body copy — settled, readable, refined leading (SOLID LIGHT sections only).
   .pb-lead and .cta text sit over photos and stay light; see photo block. */
.sec-head .side,.about-copy .body,.intro .body,.intro p,
.end-cta .side p{
  color:var(--p-ink-2)!important;
  line-height:1.85!important;
  font-weight:400!important;
}

/* ---- 3. SECTION RHYTHM --------------------------------------------------- */
/* Alternate white / bone so the page breathes and has cadence. */
.folio{background:var(--p-white)!important}
.svcs{background:var(--p-bone)!important}
.about{background:var(--p-white)!important}
.proc{background:var(--p-bone)!important}
.faq{background:var(--p-white)!important}
.intro{background:var(--p-white)!important}
.svc-index{background:var(--p-bone)!important}
.svc-blocks{background:var(--p-white)!important}
.compare{background:var(--p-bone)!important}
.projects{background:var(--p-white)!important}
.phases{background:var(--p-white)!important}

/* Generous vertical rhythm — luxury lives in whitespace */
.folio,.svcs,.about,.proc,.faq,.intro,.svc-index,.compare{
  padding-top:clamp(96px,11vw,180px)!important;
  padding-bottom:clamp(96px,11vw,180px)!important;
}

/* ---- 4. NAVIGATION ------------------------------------------------------- */
.nav.scrolled{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(20px) saturate(1.4)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.4)!important;
  border-color:var(--p-line)!important;
  box-shadow:0 1px 0 rgba(23,20,15,.03)!important;
}
.nav .cta{
  border:1px solid var(--p-line-2)!important;
  letter-spacing:.1em!important;
  font-weight:500!important;
  border-radius:100px!important;
  transition:background .5s var(--p-ease),color .5s var(--p-ease),border-color .5s!important;
}
.nav .cta:hover{background:var(--p-ink)!important;color:#fff!important;border-color:var(--p-ink)!important}
.nav .cta .dot{background:var(--p-gold)!important}

/* ---- 5. BUTTONS ---------------------------------------------------------- */
.pill-btn{
  letter-spacing:.12em!important;
  font-weight:500!important;
  font-size:11px!important;
  border:1px solid var(--p-line-2)!important;
  border-radius:100px!important;
  padding:16px 30px!important;
  transition:background .5s var(--p-ease),color .5s var(--p-ease),border-color .5s!important;
}
.pill-btn:hover{background:var(--p-ink)!important;color:#fff!important;border-color:var(--p-ink)!important}
/* Primary = gold fill, the one place gold goes solid */
.pill-btn.dark{background:var(--p-gold)!important;color:#fff!important;border-color:var(--p-gold)!important}
.pill-btn.dark:hover{background:var(--p-ink)!important;color:#fff!important;border-color:var(--p-ink)!important}
/* On dark sections (hero/cta) buttons stay light-outlined */
.pill-btn.light{border-color:rgba(255,255,255,.5)!important;color:#fff!important}
.pill-btn.light:hover{background:#fff!important;color:var(--p-ink)!important;border-color:#fff!important}

/* Inline text links with underline → gold */
.sec-head .side a{
  border-bottom:1px solid var(--p-gold)!important;
  color:var(--p-ink)!important;
  letter-spacing:.02em!important;
  transition:gap .4s,color .4s!important;
}
.sec-head .side a:hover{color:var(--p-gold)!important}

/* ---- 6. CARDS ------------------------------------------------------------ */
/* Portfolio slider cards — sharp corners, hairline, refined shadow + lift */
.slide-card{
  border-radius:3px!important;
  background:var(--p-white)!important;
  border:1px solid var(--p-line)!important;
  box-shadow:0 1px 2px rgba(23,20,15,.03)!important;
  transition:transform .8s var(--p-ease),box-shadow .6s var(--p-ease)!important;
}
.slide-card:hover{
  transform:translateY(-8px)!important;
  box-shadow:0 40px 80px -32px rgba(23,20,15,.22)!important;
}
.slide-card .info .name{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.012em!important}

/* Service cards — clean white, hairline, gold numeral, generous padding.
   Selectors are scoped to .svcs to out-specify the original dark-carousel CSS. */
.svcs .svc-card,.svc-card{
  background:var(--p-white)!important;
  border:1px solid var(--p-line)!important;
  border-radius:3px!important;
  backdrop-filter:none!important;
  padding:clamp(28px,3vw,44px)!important;
  transition:transform .6s var(--p-ease),box-shadow .6s var(--p-ease),border-color .5s!important;
}
.svcs .svc-card:hover,.svc-card:hover{
  transform:translateY(-8px)!important;
  box-shadow:0 40px 80px -32px rgba(23,20,15,.18)!important;
  border-color:var(--p-line-2)!important;
}
.svcs .svc-card .top .no,.svc-card .top .no{
  color:var(--p-gold)!important;
  font-family:var(--serif)!important;
  font-style:italic!important;
  font-weight:300!important;
}
.svcs .svc-card h3,.svc-card h3{font-family:var(--serif)!important;font-weight:300!important;letter-spacing:-.02em!important;color:var(--p-ink)!important}
.svcs .svc-card h3 em,.svc-card h3 em{color:var(--p-gold)!important}
.svcs .svc-card .lead,.svc-card .lead,.svcs .svc-card p,.svc-card p{color:var(--p-ink-2)!important}
.svcs .svc-card .cov-lbl,.svc-card .cov-lbl,.svcs .svc-card .top .kind,.svc-card .top .kind{color:var(--p-ink-3)!important}
.svcs .svc-card .cov span,.svc-card .cov span{
  border:1px solid var(--p-line-2)!important;
  color:var(--p-ink-2)!important;
  background:transparent!important;
  border-radius:100px!important;
  transition:border-color .4s,color .4s!important;
}
.svcs .svc-card .cov span:hover,.svc-card .cov span:hover{border-color:var(--p-gold)!important;color:var(--p-gold)!important}
.svcs .svc-card .divide{background:var(--p-line)!important}
.svcs .svc-card .link,.svc-card .link{color:var(--p-gold)!important}
/* Belt-and-braces: any hover/on/active state of a service card stays white */
.svcs .svc-card:hover,.svcs .svc-card.on,.svcs .svc-card.active{background:var(--p-white)!important;color:var(--p-ink)!important}

/* Services carousel controls (were light-on-dark) */
.svcs .car-controls{border-top-color:var(--p-line-2)!important}
.svcs .car-controls .progress{background:var(--p-line)!important}
.svcs .car-controls .progress .bar{background:var(--p-gold)!important}
.svcs .car-controls .arr{border-color:var(--p-line-2)!important;color:var(--p-ink)!important}
.svcs .car-controls .arr:hover{background:var(--p-ink)!important;color:#fff!important}
.svcs .car-controls .count{color:var(--p-ink-3)!important}
.svcs .car-controls .count b{color:var(--p-ink)!important}
.svcs .car-controls .count em{color:var(--p-ink-3)!important}
.svcs .sec-head h2,.svcs .sec-head .side{color:var(--p-ink)!important}
.svcs .sec-head h2 em{color:var(--p-gold)!important}
.svcs .sec-head .lbl,.svcs .sec-head .side{color:var(--p-ink-3)!important}

/* Process cards — white with gold stage numbers, refined dividers */
.proc-card{
  background:var(--p-white)!important;
  border:1px solid var(--p-line)!important;
  border-radius:3px!important;
  transition:transform .6s var(--p-ease),box-shadow .6s var(--p-ease)!important;
}
.proc-card:hover{transform:translateY(-8px)!important;box-shadow:0 40px 80px -32px rgba(23,20,15,.18)!important}
.proc-card .stage b{color:var(--p-gold)!important;font-family:var(--serif)!important}
.proc-card h3{font-family:var(--serif)!important;font-weight:300!important;color:var(--p-ink)!important}
.proc-card .checks .item::before{background:var(--p-gold)!important}
.proc-card .dur{color:var(--p-ink-2)!important;font-family:var(--serif)!important;font-style:italic!important}

/* Project cards (our-projects) */
.p-card{transition:transform .7s var(--p-ease)!important}
.p-card:hover{transform:translateY(-8px)!important}
.p-frame{border-radius:3px!important;overflow:hidden!important}
.filter-tab.active{background:var(--p-gold)!important;border-color:var(--p-gold)!important;color:#fff!important}
.filter-tab{border-radius:100px!important;transition:all .4s!important}

/* ---- 7. FAQ -------------------------------------------------------------- */
.faq-item{border-color:var(--p-line)!important}
.faq-q h3{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.01em!important;color:var(--p-ink)!important}
.faq-item.open .faq-q h3{color:var(--p-gold)!important}
.faq-q .toggle{border-color:var(--p-line-2)!important}
.faq-item.open .faq-q .toggle{background:var(--p-gold)!important;border-color:var(--p-gold)!important}

/* ---- 8. STATS ------------------------------------------------------------ */
.about-stats .stat .n,.pb-stats .s b,.stat-n,.stat b{
  font-family:var(--serif)!important;font-weight:300!important;letter-spacing:-.02em!important;
}
.about-stats .stat .n em,.pb-stats .s b em,.stat b em{color:var(--p-gold)!important;font-style:italic!important}
.about-stats .stat .l,.pb-stats .s span,.stat-l{color:var(--p-ink-3)!important;letter-spacing:.24em!important}

/* ---- 9. COMPARISON TABLE (services) -------------------------------------- */
.compare-row{border-color:var(--p-line)!important}
.compare-row .cell{color:var(--p-ink)!important}
.compare-row .cell.name{color:var(--p-ink)!important}
.compare-row .cell.name em,.compare-row .cell.us,.compare-row .tick,.compare-row .cell b em{color:var(--p-gold)!important}
.compare-row .cell .h,.compare-row .colhead,.compare-head .col-label{color:var(--p-ink-3)!important}

/* ---- 10. FOOTER — deep espresso anchor ----------------------------------- */
/* A dark grounding band frames the whole white page. Reads gallery, not web. */
footer{
  background:var(--p-espresso)!important;
  color:rgba(245,241,232,.68)!important;
  border-top:none!important;
}
footer .wm{color:rgba(245,241,232,.96)!important;font-family:var(--serif)!important;font-weight:300!important}
footer .wm em{color:var(--p-gold-2)!important;font-style:italic!important}
footer .col-lbl{color:rgba(245,241,232,.4)!important;letter-spacing:.28em!important}
footer a{color:rgba(245,241,232,.72)!important;transition:color .35s!important}
footer a:hover{color:var(--p-gold-2)!important}
footer li{color:rgba(245,241,232,.72)!important}
footer .end{border-top:1px solid rgba(245,241,232,.1)!important;color:rgba(245,241,232,.42)!important}
footer .end span,footer .end a{color:rgba(245,241,232,.42)!important}
footer .end a:hover{color:var(--p-gold-2)!important}

/* ---- 11. HERO / PHOTO SECTIONS — stay dark, refine the gold ------------- */
/* These sit over photography, so the TEXT stays light/cream for legibility.
   .pb-title / .pb-lead are the sub-page hero; .slide h1 the homepage hero;
   .cta / .cta-v2 the photo-backed CTA. Emphasis words use the soft gold leaf. */
.slide h1,.pb-title{
  font-family:var(--serif)!important;font-weight:300!important;
  letter-spacing:-.03em!important;color:#F6F2E9!important;
}
.slide h1 em,.pb-title em{color:var(--p-gold-3)!important;font-style:italic!important}
.pb-lead{color:rgba(246,242,233,.88)!important;line-height:1.85!important}
.pb-eyebrow,.pb-eyebrow span{color:rgba(246,242,233,.78)!important}
.pb-stats .s b{color:#F6F2E9!important}
.pb-stats .s b em{color:var(--p-gold-3)!important}
.pb-stats .s span{color:rgba(246,242,233,.62)!important}
/* Photo-backed CTA (homepage): keep its text cream, emphasis in gold leaf */
.cta-title,.cta h2,.cta-v2 .cta-title{color:#F6F2E9!important;font-family:var(--serif)!important;font-weight:300!important}
.cta-v2 .cta-title em,.cta .cta-title em,.cta h2 em{color:var(--p-gold-3)!important;font-style:italic!important}
.cta .sub,.cta-lead,.cta-v2 .cta-lead{color:rgba(246,242,233,.82)!important}
.cta .kicker,.cta-v2 .kicker{color:rgba(246,242,233,.6)!important}

/* ---- 12. ENQUIRY POPUP — keep the split dark/white, accent in gold ------- */
.pj-submit{background:var(--p-gold)!important;color:#fff!important;border-color:var(--p-gold)!important;border-radius:100px!important}
.pj-submit:hover{background:var(--p-ink)!important;border-color:var(--p-ink)!important}
.pj-right-head h3 em{color:var(--p-gold)!important}
.pj-label span{color:var(--p-gold)!important}
.pj-input:focus,.pj-select:focus,.pj-textarea:focus{border-color:var(--p-gold)!important;outline:none!important}
.pj-left em{color:var(--p-gold-3)!important}
.pj-foot a{color:var(--p-gold)!important}

/* ---- 13. DETAIL: thin gold rules & marks -------------------------------- */
.cta-rule i,.cta-mark{color:var(--p-gold)!important}
.cta-rule span{background:var(--p-line-2)!important}

/* Refined reveal easing — slower, more graceful */
.reveal{transition:opacity 1.4s var(--p-ease),transform 1.4s var(--p-ease)!important}

/* ---- 14. RESPONSIVE ------------------------------------------------------ */
@media (max-width:768px){
  .folio,.svcs,.about,.proc,.faq,.intro,.svc-index,.compare{
    padding-top:clamp(64px,14vw,96px)!important;
    padding-bottom:clamp(64px,14vw,96px)!important;
  }
  .svc-card{padding:26px 22px!important}
}