/* Supplements theme.css (the recovered Moon & Baker theme) with the few pieces
   this site needs that the original theme did not have: a brochure page reader,
   a project fact strip, and spec/unit tables. Everything here follows the theme's
   existing language - square corners, black/white, wide-tracked uppercase labels. */

/* ---- page hero for interior pages (matches .hero-section treatment) ---- */
.page-hero{position:relative;width:100%;min-height:58vh;display:flex;align-items:flex-end;
  overflow:hidden;background:#0a0a0a;color:#fff}
.page-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center}
.page-hero .ph-mask{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.35) 55%,rgba(0,0,0,.5))}
.page-hero .ph-body{position:relative;z-index:2;width:100%}
.page-hero.is-short{min-height:42vh}

/* ---- fact strip under a project hero ---- */
.fact-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #e5e5e5}
.fact-strip > div{padding:1.6rem 1.4rem;border-right:1px solid #e5e5e5}
.fact-strip > div:last-child{border-right:0}
.fact-strip dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#737373;
  font-weight:700;margin:0 0 .5rem}
.fact-strip dd{margin:0;font-size:1.02rem;font-weight:600;color:#0a0a0a;line-height:1.35}

/* ---- unit / area tables ---- */
.unit-table{width:100%;border-collapse:collapse;font-size:.92rem}
.unit-table caption{caption-side:top;text-align:left;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:#0a0a0a;padding-bottom:.75rem}
.unit-table th{background:#0a0a0a;color:#fff;text-align:left;padding:.7rem .9rem;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.unit-table td{padding:.62rem .9rem;border-bottom:1px solid #e5e5e5;color:#404040}
.unit-table tbody tr:nth-child(even){background:#fafafa}
.unit-table td:last-child,.unit-table th:last-child{text-align:right;
  font-variant-numeric:tabular-nums}
.unit-table tr.is-total td{font-weight:700;color:#0a0a0a;background:#f5f5f5}

/* ---- spec list ---- */
.spec-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.spec-list li{position:relative;padding-left:1.35rem;font-size:.9rem;line-height:1.6;color:#525252}
.spec-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:#0a0a0a}

/* ---- brochure reader: the actual brochure pages, 1:1 ---- */
/* Justified rows: every page keeps its true proportions, and widths within a
   row are shared out by aspect ratio so all pages in that row land on the same
   height. Portrait covers and landscape spreads therefore tile without leaving
   holes, and page order is preserved. */
.brochure-grid{display:flex;flex-wrap:wrap;gap:1rem;align-items:stretch}
.brochure-page{
  flex:var(--ar,1) 1 calc(var(--ar,1) * 190px);
  min-width:min(100%, calc(var(--ar,1) * 150px));
  background:#f5f5f5;border:1px solid rgba(255,255,255,.14);
  cursor:zoom-in;position:relative;overflow:hidden;padding:0;
}
/* aspect-ratio reserves the correct height before the (lazy) image arrives,
   so rows are level from first paint and nothing shifts as pages load */
.brochure-page img{width:100%;height:auto;aspect-ratio:var(--ar,1);
  object-fit:cover;display:block;transition:transform .6s ease}
.brochure-page:hover img{transform:scale(1.03)}
.brochure-page span{position:absolute;left:0;bottom:0;background:rgba(0,0,0,.72);
  color:#fff;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.35rem .6rem}

@media (max-width:640px){
  .brochure-grid{gap:.6rem}
  /* one spread per row on a phone: anything wider than tall goes full width */
  .brochure-page{flex:1 1 100%;min-width:0}
}

/* lightbox */
.bx{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.94);display:none;
  align-items:center;justify-content:center;padding:2.5rem 1rem}
.bx.is-open{display:flex}
.bx img{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto}
.bx__bar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:center;padding:.9rem 1.1rem;color:#fff;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase}
.bx__btn{background:none;border:1px solid rgba(255,255,255,.45);color:#fff;
  width:44px;height:44px;font-size:1.2rem;line-height:1;display:flex;align-items:center;
  justify-content:center;transition:background .25s}
.bx__btn:hover{background:rgba(255,255,255,.16)}
.bx__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.bx__nav.prev{left:.75rem}
.bx__nav.next{right:.75rem}

/* ---- hero next-project panel (mirrors the theme's hero-next-panel) ---- */
.hero-next-panel{cursor:pointer}
.hero-next-panel .hnp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- misc ---- */
.gold-rule{height:2px;width:64px;background:linear-gradient(90deg,#8C6216,#F2D488,#C8952E);border:0}
.rera-note{font-size:.75rem;letter-spacing:.04em;color:#737373;line-height:1.7}
.rera-note strong{color:#0a0a0a;font-weight:700}

@media (max-width:900px){
  .fact-strip{grid-template-columns:repeat(2,1fr)}
  .fact-strip > div:nth-child(2n){border-right:0}
  .fact-strip > div{border-bottom:1px solid #e5e5e5}
}
@media (max-width:560px){
  .fact-strip{grid-template-columns:1fr}
  .fact-strip > div{border-right:0}
  .brochure-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .page-hero{min-height:46vh}
  .bx{padding:3.5rem .5rem}
}

@media (prefers-reduced-motion:reduce){
  .brochure-page img,.hero-bg-img{transition:none!important}
}

/* ============================================================
   Utilities the purged theme build does not include.
   theme.css ships only the Tailwind classes the original Moon & Baker
   markup used, so anything this site introduces has to be declared here.
   Values match Tailwind's defaults (1 unit = 0.25rem).
   ============================================================ */

/* grid + gaps */
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gap-px{gap:1px}
.gap-10{gap:2.5rem}
.gap-x-10{column-gap:2.5rem}
.gap-x-12{column-gap:3rem}
.gap-y-3{row-gap:.75rem}
.gap-y-9{row-gap:2.25rem}

/* spacing */
.p-6{padding:1.5rem}
.pb-12{padding-bottom:3rem}
.pt-32{padding-top:8rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.mb-9{margin-bottom:2.25rem}
.mb-10{margin-bottom:2.5rem}
.mt-6{margin-top:1.5rem}
.mt-12{margin-top:3rem}
.my-8{margin-top:2rem;margin-bottom:2rem}

/* type */
.text-\[11px\]{font-size:11px}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.tracking-\[0\.18em\]{letter-spacing:.18em}
.tracking-\[0\.28em\]{letter-spacing:.28em}
.max-w-2xl{max-width:42rem}
.whitespace-nowrap{white-space:nowrap}
.items-baseline{align-items:baseline}

/* colour */
.bg-neutral-50{background-color:#fafafa}
.bg-neutral-200{background-color:#e5e5e5}
.bg-white\/85{background-color:rgba(255,255,255,.85)}
.bg-white\/15{background-color:rgba(255,255,255,.15)}
.bg-black\/40{background-color:rgba(0,0,0,.4)}
.bg-black\/45{background-color:rgba(0,0,0,.45)}
.text-neutral-700{color:#404040}
.text-white\/40{color:rgba(255,255,255,.4)}
.text-white\/50{color:rgba(255,255,255,.5)}
.text-white\/55{color:rgba(255,255,255,.55)}
.text-white\/60{color:rgba(255,255,255,.6)}
.text-white\/80{color:rgba(255,255,255,.8)}
.hover\:text-black:hover{color:#000}

/* borders */
.border-y{border-top-width:1px;border-bottom-width:1px;border-top-style:solid;border-bottom-style:solid}
.border-neutral-200{border-color:#e5e5e5}
.border-neutral-300{border-color:#d4d4d4}
.border-white\/15{border-color:rgba(255,255,255,.15)}
.focus\:border-neutral-900:focus{border-color:#171717}

/* position */
.left-8{left:2rem}

/* responsive */
@media (min-width:640px){
  .sm\:gap-6{gap:1.5rem}
  .sm\:text-base{font-size:1rem;line-height:1.5rem}
  .sm\:text-5xl{font-size:3rem;line-height:1}
  .sm\:left-16{left:4rem}
}
@media (min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:left-24{left:6rem}
}
@media (min-width:1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:gap-8{gap:2rem}
  .lg\:py-20{padding-top:5rem;padding-bottom:5rem}
  .lg\:py-24{padding-top:6rem;padding-bottom:6rem}
  .lg\:pb-16{padding-bottom:4rem}
  .lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .lg\:text-6xl{font-size:3.75rem;line-height:1}
  .lg\:left-28{left:7rem}
}

/* The project list makes the mobile drawer taller than the viewport, which the
   original theme never had to handle (it had five links). Keep it scrollable. */
@media (max-width:991px){
  .header .mobile-navs{
    max-height:calc(100dvh - 10dvh);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    gap:1.1rem;
    padding:1.6rem 2rem 2.4rem;
    justify-content:flex-start;
  }
}

/* ---- header: keep the theme's proportions with a square logo ----
   The Moon & Baker mark is a wide lockup; the Pranava stag is nearly square,
   so constrain it by height or it forces the header taller than the original. */
.header-wrapper .logo{max-width:none}
.header-wrapper .logo img{height:54px;width:auto;object-fit:contain}
.header.scrolled{background:#000}
@media (max-width:991px){ .header-wrapper .logo img{height:42px} }

/* utilities the hero controls / next panel need */
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.\[writing-mode\:vertical-rl\]{writing-mode:vertical-rl}
.rotate-180{--tw-rotate:180deg;transform:rotate(180deg)}
.tracking-\[0\.3em\]{letter-spacing:.3em}
.text-\[10px\]{font-size:10px}
.bg-white\/40{background-color:rgba(255,255,255,.4)}
.bg-black\/60{background-color:rgba(0,0,0,.6)}
.border-white\/20{border-color:rgba(255,255,255,.2)}
.w-1\/3{width:33.333333%}
.h-\[1px\]{height:1px}
.mx-1{margin-left:.25rem;margin-right:.25rem}
.my-auto{margin-top:auto;margin-bottom:auto}
.pb-16{padding-bottom:4rem}
.px-4{padding-left:1rem;padding-right:1rem}
.p-1{padding:.25rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.right-6{right:1.5rem}
.bottom-8{bottom:2rem}
.group:hover .group-hover\:bg-black\/40{background-color:rgba(0,0,0,.4)}
.group:hover .group-hover\:scale-110{transform:scale(1.1)}
.group:hover .group-hover\:text-amber-200{color:#fde68a}
@media (min-width:640px){
  .sm\:gap-8{gap:2rem}
  .sm\:bottom-12{bottom:3rem}
  .sm\:right-10{right:2.5rem}
  .sm\:text-sm{font-size:.875rem;line-height:1.25rem}
  .sm\:w-24{width:6rem}
  .sm\:text-xs{font-size:.75rem;line-height:1rem}
  .sm\:text-lg{font-size:1.125rem;line-height:1.75rem}
}
@media (min-width:768px){ .md\:w-36{width:9rem} .md\:text-xl{font-size:1.25rem;line-height:1.75rem} }
@media (min-width:1024px){
  .lg\:bottom-\[36\%\]{bottom:36%}
  .lg\:right-12{right:3rem}
}

/* ============================================================
   Corrections found on review
   ============================================================ */

/* Dark sections: Bootstrap forces headings to --bs-heading-color (near black),
   which made every heading invisible on the dark bands. Override explicitly. */
.section-dark{color:#fff}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4,
.section-dark h5,.section-dark h6{color:#fff}
.section-dark p,.section-dark li,.section-dark span,.section-dark dd{color:rgba(255,255,255,.72)}
.section-dark .spec-list li{color:rgba(255,255,255,.72)}
.section-dark .spec-list li::before{background:#C8952E}
.section-dark a{color:#fff}
.section-dark a:hover{color:#F2D488}

/* Page heroes sit on photography, so they always need light type */
.page-hero h1,.page-hero .eyebrow,.page-hero span,.page-hero p{color:#fff}

/* Cards keep the source aspect ratio - no forced crop, no stretching */
.card-img{display:block;width:100%;line-height:0}
.card-img img{display:block;width:100%;height:auto}

/* Brochure pages: pale artwork on a dark band needs a light mat, dark artwork
   needs breathing room. A neutral mat suits both without cropping anything. */
.brochure-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;align-items:start}
.brochure-page{background:#f5f5f5;border:1px solid rgba(255,255,255,.14);cursor:zoom-in}
.brochure-page img{width:100%;height:auto;object-fit:contain}

/* Nav underline: the theme anchors it to the link box, so the link needs height
   or the rule lands through the middle of the word like a strikethrough. */
.header-wrapper .nav-links li .nav-link{height:auto;padding:.65rem 0;position:relative}
.header-wrapper .nav-links li.main-nav-link .nav-link:before{bottom:-2px}

/* Footer: match the original's rhythm and stop the project list splitting oddly */
.footer .footer-item-list{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem}
.footer .footer-middle-item{margin-bottom:1.75rem}
.footer-social .footer-address-div p{margin-bottom:.65rem;line-height:1.75}

/* Completed-projects grid: even cells, aligned dividers */
.legacy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.legacy-card{background:#0a0a0a;display:flex;flex-direction:column}
.legacy-card .lc-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:#141414}
.legacy-card .lc-img img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .7s ease}
.legacy-card:hover .lc-img img{transform:scale(1.05)}
.legacy-card .lc-body{padding:1.1rem 1.15rem 1.25rem}
.legacy-card b{display:block;font-size:.9rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:#fff}
.legacy-card em{font-style:normal;display:block;font-size:.82rem;color:rgba(255,255,255,.6);margin-top:.3rem}
.legacy-card span{display:block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:#C8952E;margin-top:.55rem}

/* Entrance: the original fades sections up as they arrive */
[data-aos]{opacity:0;transform:translateY(24px);
  transition:opacity .85s cubic-bezier(.22,.7,.28,1),transform .85s cubic-bezier(.22,.7,.28,1)}
[data-aos="fade-right"]{transform:translateX(-28px)}
[data-aos="fade-left"]{transform:translateX(28px)}
[data-aos].aos-animate{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-aos]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ============================================================
   Restored Bootstrap root variables.
   The theme's utility classes are Bootstrap's, and they resolve colours through
   rgba(var(--bs-*-rgb), …). The :root block defining those RGB triplets was lost
   when the stylesheet was recovered from the bundle, so every one of those
   declarations was invalid and silently fell back to the near-black heading
   colour. That is what made .text-white render as dark text.
   ============================================================ */
:root{
  --bs-white-rgb:255,255,255;
  --bs-black-rgb:0,0,0;
  --bs-primary-rgb:13,110,253;
  --bs-secondary-rgb:108,117,125;
  --bs-success-rgb:25,135,84;
  --bs-info-rgb:13,202,240;
  --bs-warning-rgb:255,193,7;
  --bs-danger-rgb:220,53,69;
  --bs-light-rgb:248,249,250;
  --bs-dark-rgb:33,37,41;
  --bs-body-bg-rgb:255,255,255;
  --bs-emphasis-color-rgb:0,0,0;
  --bs-secondary-bg-rgb:233,236,239;
  --bs-tertiary-bg-rgb:248,249,250;
  --bs-link-color-rgb:13,110,253;
  --bs-btn-focus-shadow-rgb:49,132,253;
  --bs-text-opacity:1;
  --bs-bg-opacity:1;
  --bs-border-opacity:1;
}

/* Feature-card caption: a slim strip at the foot, not a band over half the image */
.feature-card > div:last-child{padding:.85rem 1rem}
.feature-card h3{color:#fff;font-size:.72rem;letter-spacing:.08em;line-height:1.4}
@media (min-width:640px){ .feature-card h3{font-size:.78rem} }

/* Tab hover: hover:bg-black / hover:text-white were purged out of the theme, so
   hovering an inactive tab turned the label white on a white button. */
.hover\:bg-black:hover{background-color:#000}
.hover\:text-white:hover{color:#fff}
.hover\:bg-neutral-800:hover{background-color:#262626}
.product-tab-btn{transition:background-color .3s,color .3s,border-color .3s}
.product-tab-btn:hover,.product-tab-btn:focus-visible{background-color:#000;color:#fff;border-color:#000}
.product-tab-btn.active{background-color:#000;color:#fff;border-color:#000}