/*
Theme Name: Sidh Constructions
Theme URI: https://sidhconstructions.com
Author: Sidh Constructions
Author URI: https://sidhconstructions.com
Description: Custom WordPress theme for Sidh Constructions - "A home that's truly yours." Homepage, About, Why Us, After Possession, Testimonials, Contact, All Projects (Projects CPT archive) and Single Project templates, converted from static HTML into standard WordPress theme files.
Version: 2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sidh-constructions
*/

/* ==========================================================================
   Sidh Constructions — Homepage styles
   HTML5 + CSS3 + Bootstrap 5 (grid/utilities). No frameworks beyond Bootstrap.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family:"Urbanist"; src:url("assets/fonts/Urbanist-Regular.ttf") format("truetype");  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Urbanist"; src:url("assets/fonts/Urbanist-Medium.ttf") format("truetype");   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Urbanist"; src:url("assets/fonts/Urbanist-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Urbanist"; src:url("assets/fonts/Urbanist-Bold.ttf") format("truetype");     font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Urbanist"; src:url("assets/fonts/Urbanist-ExtraBold.ttf") format("truetype");font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Urbanist"; src:url("assets/fonts/Urbanist-Black.ttf") format("truetype");    font-weight:900; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --red-50:#FDECEE; --red-500:#DD1C2E; --red-600:#C21525; --red-700:#9C0F1D;
  --ink-900:#0E0E0F; --ink-800:#141414; --ink-700:#1E1E1F;
  --white:#FFFFFF; --paper:#FAF9F7; --sand-100:#F3F1ED; --sand-300:#D9D5CC;
  --stone-500:#8C877E; --stone-600:#6A655D; --stone-700:#454139;

  --text-strong:var(--ink-800); --text-body:var(--stone-700);
  --text-muted:var(--stone-600); --text-faint:var(--stone-500);
  --border-subtle:var(--sand-300);
  --surface-brand-soft:var(--red-50);

  --font-sans:"Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ls-wide:0.08em;

  --radius-sm:4px; --radius-md:6px; --radius-lg:10px;
  --shadow-md:0 6px 20px rgba(20,20,20,0.09);
  --shadow-lg:0 18px 44px rgba(20,20,20,0.12);
  --shadow-brand:0 12px 30px rgba(221,28,46,0.28);
  --gradient-protect:linear-gradient(180deg, rgba(14,14,15,0) 0%, rgba(14,14,15,0.72) 100%);

  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --dur-fast:140ms; --dur-base:240ms;
}

/* ---------- Base ---------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font-sans); background:var(--paper);
  color:var(--text-strong); -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; }

.sc-container { width:min(1180px, 92vw); margin:0 auto; }

/* Shared section paddings */
.section-white, .section-paper, .section-ink { padding:clamp(4.5rem,9vw,9rem) 0; }
.section-white { background:var(--white); }
.section-paper { background:var(--paper); }
.section-ink   { background:var(--ink-800); }

.section-paper .sc-container .section-head{
	max-width:720px;
}
.accent { color:var(--red-500); }
.sc-dot { width:8px; height:8px; border-radius:50%; background:var(--red-500); display:inline-block; flex:0 0 auto; }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:0.6rem;
  font-weight:700; font-size:0.75rem; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--ink-800);
}
.eyebrow-light { color:#fff; }

/* ---------- Section head ---------- */
.section-head { max-width:620px; margin-bottom:3rem; display:flex; flex-direction:column; gap:1rem; }
.section-title {
  margin:0; font-weight:800; font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.06; letter-spacing:-0.02em; color:var(--ink-800);
}

/* ==========================================================================
   Logo lockup
   ========================================================================== */
.sc-logo { display:inline-flex; align-items:center; gap:0.56rem; text-decoration:none; }
.sc-logo-mark { height:27px; width:auto; }
.sc-logo-text { display:flex; flex-direction:column; line-height:0.98; }
.sc-logo-text span { font-weight:700; font-size:15.6px; letter-spacing:-0.01em; color:var(--ink-800); }
.sc-logo-light .sc-logo-text span { color:#fff; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-sc {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family:var(--font-sans); font-weight:700; letter-spacing:0.01em; line-height:1;
  border:2px solid transparent; border-radius:var(--radius-sm); cursor:pointer;
  text-decoration:none; white-space:nowrap;
  font-size:0.9375rem; padding:0.7rem 1.25rem;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.btn-sc-sm { font-size:0.8125rem; padding:0.5rem 0.9rem; }
.btn-sc-lg { font-size:1.0625rem; padding:0.9rem 1.7rem; }

.btn-sc-primary { background:var(--red-500); color:#fff; border-color:var(--red-500); }
.btn-sc-primary:hover { background:var(--red-600); border-color:var(--red-600); color:#fff; transform:translateY(-1px); }

.btn-sc-ink { background:var(--ink-800); color:#fff; border-color:var(--ink-800); }
.btn-sc-ink:hover { background:var(--ink-700); border-color:var(--ink-700); color:#fff; transform:translateY(-1px); }

.btn-sc-outline { background:transparent; color:var(--text-strong); border-color:var(--ink-800); }
.btn-sc-outline:hover { background:var(--ink-800); color:#fff; transform:translateY(-1px); }

.btn-sc-glass { background:rgba(255,255,255,0.1); color:#fff; border-color:rgba(255,255,255,0.45); backdrop-filter:blur(4px); }
.btn-sc-glass:hover { background:rgba(255,255,255,0.2); color:#fff; transform:translateY(-1px); }

/* CTA hover micro-animation — arrow nudge + red glow */
.sc-ico { transition:transform 0.28s var(--ease-out); }
.cta:hover .sc-ico { transform:translateX(4px); }
.cta.btn-sc-primary:hover { box-shadow:var(--shadow-brand); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position:sticky; top:0; z-index:50; background:var(--white);
  border-bottom:1px solid var(--border-subtle);
  transition:background var(--dur-base) var(--ease-out);
}
.site-header > .sc-container { height:74px; }
.site-header.scrolled { background:rgba(255,255,255,0.94); backdrop-filter:saturate(1.2) blur(10px); }

.sc-nav { gap:0.15rem; }
.sc-nav-link {
  padding:0.5rem 0.7rem; font-weight:600; font-size:0.9rem; color:var(--text-muted);
  text-decoration:none; border-radius:var(--radius-sm); white-space:nowrap;
  background:none; border:none; cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out);
}
.sc-nav-link:hover { color:var(--text-strong); }
.sc-nav-link.active { font-weight:700; color:var(--text-strong); }

/* Projects dropdown */
.sc-dropdown { position:relative; }
.sc-dropdown-toggle { display:inline-flex; align-items:center; gap:0.28rem; }
.sc-caret { transition:transform var(--dur-base) var(--ease-out); }
.sc-dropdown.open .sc-dropdown-toggle { color:var(--red-600); }
.sc-dropdown.open .sc-caret { transform:rotate(180deg); }

.sc-dropdown-menu {
  position:absolute; top:calc(100% + 6px); left:0; min-width:250px;
  background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:0.5rem; z-index:60;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.sc-dropdown.open .sc-dropdown-menu { opacity:1; transform:translateY(0); pointer-events:auto; }
.sc-dropdown-item { display:flex; flex-direction:column; gap:2px; padding:0.6rem 0.75rem; border-radius:var(--radius-sm); text-decoration:none; }
.sc-dropdown-item:hover { background:var(--surface-brand-soft); }
.sc-di-title { display:flex; align-items:center; gap:0.5rem; font-weight:700; font-size:0.92rem; color:var(--ink-800); }
.sc-di-note { font-size:0.75rem; color:var(--text-faint); padding-left:1rem; }

/* Burger + mobile nav */
.sc-burger { width:42px; height:42px; border:1px solid var(--border-subtle); border-radius:var(--radius-sm); background:var(--white); display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; }
.sc-burger span { width:18px; height:2px; background:var(--ink-800); border-radius:2px; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.sc-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.sc-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.sc-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

.sc-mobile-nav { display:none; flex-direction:column; padding:0.5rem 4vw 1.5rem; background:var(--white); border-bottom:1px solid var(--border-subtle); }
.sc-mobile-nav.open { display:flex; }
.sc-mnav-link { padding:0.7rem 0.2rem; font-weight:600; font-size:1rem; color:var(--text-body); text-decoration:none; border-bottom:1px solid var(--sand-100); }
.sc-mnav-group summary { padding:0.7rem 0.2rem; font-weight:600; font-size:1rem; color:var(--text-body); cursor:pointer; border-bottom:1px solid var(--sand-100); list-style:none; }
.sc-mnav-group summary::-webkit-details-marker { display:none; }
.sc-mnav-sub { display:block; padding:0.5rem 0.2rem 0.5rem 1.1rem; font-weight:600; font-size:0.92rem; color:var(--text-muted); text-decoration:none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position:relative; overflow:hidden; min-height:clamp(560px,88vh,900px);
  display:flex; align-items:center; background:var(--ink-900);
}
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-scrim { position:absolute; inset:0; z-index:1; }
.hero-scrim-x { background:linear-gradient(90deg, rgba(14,14,15,0.82) 0%, rgba(14,14,15,0.62) 42%, rgba(14,14,15,0.28) 100%); }
.hero-scrim-y { background:linear-gradient(180deg, rgba(14,14,15,0.35) 0%, rgba(14,14,15,0) 30%, rgba(14,14,15,0.45) 100%); }
.hero-inner { position:relative; z-index:2; padding:clamp(3rem,7vw,5rem) 0; }
.hero-copy { display:flex; flex-direction:column; gap:1.7rem; max-width:720px; }
.hero-title {
  margin:0; font-weight:900; font-size:clamp(3rem,7vw,6rem); line-height:0.96;
  letter-spacing:-0.03em; color:#fff; text-shadow:0 2px 30px rgba(0,0,0,0.35);
}
.hero-lead { margin:0; max-width:520px; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.6; color:rgba(255,255,255,0.9); }
.hero-actions { display:flex; gap:0.9rem; flex-wrap:wrap; margin-top:0.3rem; }
.hero-scroll-cue {
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px; color:rgba(255,255,255,0.7);
}
.hero-scroll-cue span { font-size:0.7rem; font-weight:700; letter-spacing:var(--ls-wide); text-transform:uppercase; }

/* ==========================================================================
   Why We're Here
   ========================================================================== */
.whyhere { width:min(880px,90vw); margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.whyhere-statement { margin:0; font-weight:700; font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1.28; letter-spacing:-0.015em; color:var(--ink-800); text-wrap:balance; }
.whyhere-tag { margin:0; font-weight:600; font-size:clamp(1.15rem,2vw,1.4rem); color:var(--red-600); }

/* ==========================================================================
   Featured — Sidh Pearl
   ========================================================================== */
.featured-card { background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.featured-media { position:relative; min-height:460px; height:100%; }
.featured-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.featured-media .badge-sc { position:absolute; top:22px; left:22px; }
.featured-body { padding:clamp(2rem,3.5vw,3.4rem) clamp(2rem,3vw,3rem); display:flex; flex-direction:column; justify-content:center; gap:1.2rem; height:100%; }
.featured-title { margin:0; font-weight:900; font-size:clamp(2.4rem,4vw,3.4rem); letter-spacing:-0.02em; line-height:1; color:var(--ink-800); }
.featured-loc { margin:0; display:flex; align-items:center; gap:0.5rem; font-weight:600; color:var(--text-muted); font-size:0.98rem; }
.featured-loc svg { color:var(--red-500); flex:0 0 auto; }
.featured-desc { margin:0; color:var(--text-body); font-size:1.05rem; line-height:1.62; }
.featured-specs { display:flex; gap:2.2rem; margin:0.4rem 0 0.6rem; flex-wrap:wrap; }
.spec-n { font-weight:900; font-size:1.9rem; letter-spacing:-0.02em; color:var(--ink-800); }
.spec-rule { width:32px; height:3px; background:var(--red-500); margin:6px 0; }
.spec-l { font-size:0.72rem; font-weight:700; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--text-faint); }

/* Badge */
.badge-sc { display:inline-flex; align-items:center; gap:0.35rem; font-weight:700; font-size:0.75rem; letter-spacing:var(--ls-wide); text-transform:uppercase; padding:0.28rem 0.6rem; border-radius:var(--radius-sm); line-height:1; }
.badge-sc-solid { background:var(--red-500); color:#fff; }
.badge-sc-success { background:var(--sand-100); color:var(--stone-700); }
.badge-sc-success::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:#2E7D46; margin-right:0.35rem; }
.badge-sc-neutral { background:var(--sand-100); color:var(--text-faint); }

/* ==========================================================================
   Pillars
   ========================================================================== */
.pillar { height:100%; border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:2rem 1.8rem; background:var(--paper); display:flex; flex-direction:column; gap:1.1rem; }
.pillar-ico { width:52px; height:52px; border-radius:var(--radius-sm); background:var(--red-500); display:grid; place-items:center; color:#fff; }
.pillar-title { margin:0; font-weight:800; font-size:1.35rem; letter-spacing:-0.01em; color:var(--ink-800); }
.pillar-desc { margin:0; color:var(--text-muted); font-size:0.98rem; line-height:1.6; }

/* ==========================================================================
   Numbers
   ========================================================================== */
.stat { display:flex; flex-direction:column; gap:0.6rem; }
.stat-v { font-weight:900; font-size:clamp(3rem,6vw,5rem); line-height:1; letter-spacing:-0.03em; color:#fff; }
.stat-rule { width:44px; height:4px; background:var(--red-500); }
.stat-l { font-weight:600; font-size:0.95rem; color:rgba(255,255,255,0.65); }
@media (min-width:768px) {
  .stat-bordered { border-left:1px solid var(--ink-700); padding-left:clamp(1rem,3vw,2.6rem); }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testi-head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1.5rem; margin-bottom:2.6rem; }
.testi-card { position:relative; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-subtle); aspect-ratio:4/5; }
.testi-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.testi-grad { position:absolute; inset:0; background:var(--gradient-protect); pointer-events:none; }
.testi-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:62px; height:62px; border-radius:50%; background:var(--red-500); display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-brand); }
.testi-cap { position:absolute; left:18px; bottom:16px; color:#fff; }
.testi-name { font-weight:800; font-size:1.05rem; }
.testi-note { font-size:0.82rem; opacity:0.85; display:flex; align-items:center; gap:6px; }
.testi-note .sc-dot { width:6px; height:6px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background:var(--ink-900); color:#fff; }
.footer-cta { border-bottom:1px solid var(--ink-700); }
.footer-cta > .sc-container { padding:clamp(2.6rem,5vw,4rem) 0; }
.footer-cta-title { margin:0; font-weight:900; font-size:clamp(1.8rem,3.4vw,2.8rem); letter-spacing:-0.02em; color:#fff; }
.footer-main { padding:clamp(3rem,5vw,4.5rem) 0 2rem; }
.footer-brand { display:flex; flex-direction:column; gap:1.1rem; max-width:320px; }
.footer-blurb { margin:0; color:rgba(255,255,255,0.55); font-size:0.92rem; line-height:1.6; }
.footer-social { display:flex; gap:0.6rem; }
.footer-social a { width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--ink-700); display:grid; place-items:center; color:rgba(255,255,255,0.75); text-decoration:none; transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.footer-social a:hover { border-color:var(--red-500); color:#fff; }
.footer-col-h { margin:0 0 1rem; font-size:0.76rem; font-weight:700; letter-spacing:var(--ls-wide); text-transform:uppercase; color:rgba(255,255,255,0.45); }
.footer-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.7rem; }
.footer-list a { color:rgba(255,255,255,0.8); text-decoration:none; font-size:0.92rem; font-weight:500; }
.footer-list a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:1rem; padding-top:1.6rem; border-top:1px solid var(--ink-700); color:rgba(255,255,255,0.45); font-size:0.85rem; }
.footer-legal { display:flex; gap:1.4rem; }
.footer-legal a { color:inherit; text-decoration:none; }

/* ==========================================================================
   Scroll-reveal animations — fade + rise + subtle scale as each fold
   enters the viewport, with cascading stagger for card grids.
   Hidden state is gated behind .js-reveal so content is always visible
   if JS/transitions don't run (see js/script.js for the class toggling).
   ========================================================================== */
@media (prefers-reduced-motion:no-preference) {

  .reveal {
    transition:
      opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .js-reveal .reveal:not(.in) {
    opacity: 0;
    transform: translateY(42px) scale(0.96);
  }
  .reveal.in {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .reveal[data-delay="1"]  { transition-delay: 90ms; }
  .reveal[data-delay="2"]  { transition-delay: 180ms; }
  .reveal[data-delay="1b"] { transition-delay: 110ms; }
  .reveal[data-delay="2b"] { transition-delay: 220ms; }

  .row.g-4 > div:nth-child(1) .reveal,
  .row.g-4 > div:nth-child(1).reveal { transition-delay: 0ms; }
  .row.g-4 > div:nth-child(2) .reveal,
  .row.g-4 > div:nth-child(2).reveal { transition-delay: 90ms; }
  .row.g-4 > div:nth-child(3) .reveal,
  .row.g-4 > div:nth-child(3).reveal { transition-delay: 180ms; }
  .row.g-4 > div:nth-child(4) .reveal,
  .row.g-4 > div:nth-child(4).reveal { transition-delay: 270ms; }

  .featured-specs .spec:nth-child(1) { transition-delay: 0ms; }
  .featured-specs .spec:nth-child(2) { transition-delay: 80ms; }
  .featured-specs .spec:nth-child(3) { transition-delay: 160ms; }

  .hero-copy.reveal { transition-duration: 1s; }
  .js-reveal .hero-copy.reveal:not(.in) { transform: translateY(56px) scale(0.98); }

  .js-reveal .featured-card.reveal:not(.in) { transform: translateX(-32px) translateY(24px) scale(0.97); }
  .featured-card.reveal.in { transform: translateX(0) translateY(0) scale(1); }

  .js-reveal .testi-card.reveal:not(.in) { transform: translateY(50px) scale(0.94); }

  .hero-scroll-cue { animation: sc-bounce 2.2s ease-in-out infinite; }
  @keyframes sc-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:991.98px) {
  .featured-media { min-height:320px; }
  .testi-head { align-items:flex-start; }
}
@media (max-width:575.98px) {
  .hero-actions .btn-sc { flex:1 1 100%; }
}

/* ==========================================================================
   About page
   ========================================================================== */
/* Page hero (ink banner) */
.page-hero { position:relative; overflow:hidden; background:var(--ink-900); color:#fff; min-height:100vh; display:flex; align-items:center; }
.page-hero-image { position:absolute; right:129px; top:47px; width:868px; height:860px; object-fit:cover; z-index:1; }
.page-hero-inner { position:relative; z-index:2; padding:clamp(4.5rem,10vw,8.5rem) 0 clamp(3.5rem,7vw,6rem); }
.page-hero-copy { max-width:780px; display:flex; flex-direction:column; gap:1.5rem; }
.page-hero-title { margin:0; font-weight:900; font-size:clamp(2.6rem,6vw,5rem); line-height:0.98; letter-spacing:-0.03em; color:#fff; }
.page-hero-lead { margin:0; max-width:600px; font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.6; color:rgba(255,255,255,0.82); }
.page-hero-note { margin:0; font-weight:600; font-size:clamp(1rem,1.5vw,1.18rem); color:#fff; }

/* Editorial two-column (How It Started) */
.editorial { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.editorial-body { display:flex; flex-direction:column; gap:1.3rem; }
.editorial-body p { margin:0; font-size:1.12rem; line-height:1.68; color:var(--text-body); }
.editorial-body .lead-line { font-weight:700; font-size:1.35rem; color:var(--ink-800); }

/* Vision / Mission cards */
.vm-card { height:100%; background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:clamp(2rem,3vw,2.8rem); display:flex; flex-direction:column; gap:1rem; box-shadow:var(--shadow-md); }
.vm-card.vm-ink { background:var(--ink-800); border-color:var(--ink-700); }
.vm-kicker { display:inline-flex; align-items:center; gap:0.55rem; font-weight:700; font-size:0.75rem; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--red-500); }
.vm-ink .vm-kicker { color:#fff; }
.vm-title { margin:0; font-weight:800; font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:-0.015em; color:var(--ink-800); }
.vm-ink .vm-title { color:#fff; }
.vm-text { margin:0; font-size:1.05rem; line-height:1.6; color:var(--text-muted); }
.vm-ink .vm-text { color:rgba(255,255,255,0.7); }

/* Values grid (What We Won't Compromise On) */
.value { height:100%; display:flex; flex-direction:column; gap:0.7rem; padding:1.8rem 0 0; border-top:2px solid var(--ink-800); }
.value-n { font-weight:900; font-size:0.85rem; color:var(--red-500); letter-spacing:0.02em; }
.value-title { margin:0; font-weight:800; font-size:1.28rem; letter-spacing:-0.01em; color:var(--ink-800); }
.value-desc { margin:0; font-size:0.98rem; line-height:1.6; color:var(--text-muted); }

/* Team (People Behind the Promise) */
.team-card { height:100%; background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; }
.team-photo { position:relative; aspect-ratio:1/1; background:linear-gradient(160deg, var(--sand-100), var(--sand-300)); display:grid; place-items:center; color:var(--stone-500); }
.team-photo svg { width:64px; height:64px; opacity:0.55; }
.team-tri { position:absolute; left:0; bottom:0; width:70px; height:70px; background:var(--red-500); clip-path:polygon(0 0, 0 100%, 100% 100%); }
.team-body { padding:1.3rem 1.4rem 1.6rem; }
.team-name { margin:0 0 0.15rem; font-weight:800; font-size:1.18rem; color:var(--ink-800); }
.team-role { margin:0 0 0.7rem; font-weight:700; font-size:0.72rem; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--red-600); }
.team-bio { margin:0; font-size:0.94rem; line-height:1.55; color:var(--text-muted); }

/* Recognition placeholders */
.awards-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.award-tile { aspect-ratio:16/9; border:1px dashed var(--sand-400,#BBB6AC); border-radius:var(--radius-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; color:var(--text-faint); background:var(--paper); text-align:center; padding:1rem; }
.award-tile svg { opacity:0.5; }
.award-tile span { font-size:0.78rem; font-weight:600; letter-spacing:0.02em; }

/* About CTA band (reuses .footer-cta look on paper) */
.about-cta { background:var(--paper); border-top:1px solid var(--border-subtle); }
.about-cta-inner { padding:clamp(3.5rem,7vw,6rem) 0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.6rem; }
.about-cta-title { margin:0; font-weight:800; font-size:clamp(1.8rem,3.6vw,3rem); letter-spacing:-0.02em; color:var(--ink-800); max-width:780px; text-wrap:balance; }

@media (max-width:991.98px) {
  .editorial { grid-template-columns:1fr; gap:1.5rem; }
  .awards-row { grid-template-columns:repeat(2,1fr); }
  .page-hero { min-height:auto; flex-direction:column; align-items:stretch; }
  .page-hero-image { position:static; max-width:100%; width:100%; height:320px; order:-1; }
  .page-hero-inner { display:flex; flex-direction:column; }
}
@media (max-width:575.98px) {
  .awards-row { grid-template-columns:1fr; }
}

/* ==========================================================================
   After Possession page
   ========================================================================== */
.ap-lede { display:flex; flex-direction:column; gap:1.4rem; }
.ap-lede p { margin:0; font-size:1.12rem; line-height:1.68; color:var(--text-body); }

.ap-directory { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.2rem; }
.ap-dir-card { border-top:2px solid var(--ink-800); padding:1.4rem 0 0; display:flex; flex-direction:column; gap:0.6rem; }
.ap-dir-title { margin:0; font-weight:800; font-size:1.1rem; letter-spacing:-0.01em; color:var(--ink-800); }
.ap-dir-desc { margin:0; font-size:0.9rem; line-height:1.55; color:var(--text-muted); }
.ap-dir-contact { margin-top:0.3rem; font-size:0.85rem; color:var(--red-600); font-weight:700; }
.ap-dir-contact span { display:block; color:var(--text-faint); font-weight:600; font-size:0.78rem; margin-top:2px; }

.ap-support { background:var(--ink-900); color:#fff; }
.ap-support-inner { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.ap-support-copy { display:flex; flex-direction:column; gap:1.2rem; }
.ap-support-copy p { margin:0; font-size:1.05rem; line-height:1.6; color:rgba(255,255,255,0.72); max-width:460px; }
.ap-channels { display:flex; flex-direction:column; gap:0.9rem; }
.ap-channels .proj-meta-chip { min-width:180px; }
.ap-support-cta { display:flex; justify-content:center; }

.ap-cta { background:var(--paper); border-top:1px solid var(--border-subtle); }
.ap-cta-inner { padding:clamp(3.5rem,7vw,6rem) 0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.2rem; }
.ap-cta-title { margin:0; font-weight:800; font-size:clamp(1.8rem,3.6vw,3rem); letter-spacing:-0.02em; color:var(--ink-800); max-width:700px; text-wrap:balance; }
.ap-cta-note { margin:0; font-size:1.05rem; color:var(--text-muted); max-width:560px; }

@media (max-width:991.98px) {
  .ap-directory { grid-template-columns:repeat(2,1fr); }
  .ap-support-inner { grid-template-columns:1fr; }
}
@media (max-width:575.98px) {
  .ap-directory { grid-template-columns:1fr; }
}

/* ==========================================================================
   Testimonials page
   ========================================================================== */
.star-row { display:flex; gap:2px; color:var(--red-500); }
.star-row svg { fill:currentColor; }

.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.review-card { background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:1.6rem; display:flex; flex-direction:column; gap:0.9rem; }
.review-person { display:flex; align-items:center; gap:0.8rem; }
.review-avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:linear-gradient(160deg, var(--sand-100), var(--sand-300)); }
.review-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.review-name { margin:0; font-weight:800; font-size:1rem; color:var(--ink-800); }
.review-project { margin:0; font-size:0.8rem; color:var(--red-600); font-weight:700; }
.review-quote { margin:0; font-size:0.98rem; line-height:1.6; color:var(--text-body); }
.review-card[hidden] { display:none; }

.story-list { display:flex; flex-direction:column; gap:0; }
.story-card { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,4vw,3.2rem); align-items:center; padding:clamp(2.4rem,4vw,3.6rem) 0; border-bottom:1px solid var(--border-subtle); }
.story-list .story-card:last-child { border-bottom:none; }
.story-media { position:relative; aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-subtle); }
.story-media img { width:100%; height:100%; object-fit:cover; display:block; }
.story-body { display:flex; flex-direction:column; gap:0.9rem; }
.story-kicker { display:flex; align-items:center; gap:0.6rem; font-weight:700; font-size:0.75rem; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--red-600); }
.story-title { margin:0; font-weight:800; font-size:clamp(1.4rem,2.4vw,1.9rem); letter-spacing:-0.01em; color:var(--ink-800); }
.story-text { margin:0; font-size:1.02rem; line-height:1.7; color:var(--text-body); }
.story-list .story-card:nth-child(even) .story-media { order:2; }

.testi-cta { background:var(--paper); border-top:1px solid var(--border-subtle); }
.testi-cta-inner { padding:clamp(3.5rem,7vw,6rem) 0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.2rem; }
.testi-cta-title { margin:0; font-weight:800; font-size:clamp(1.8rem,3.6vw,3rem); letter-spacing:-0.02em; color:var(--ink-800); max-width:700px; text-wrap:balance; }
.testi-cta-note { margin:0; font-size:1.05rem; color:var(--text-muted); max-width:560px; }

@media (max-width:991.98px) {
  .review-grid { grid-template-columns:repeat(2,1fr); }
  .story-card, .story-list .story-card:nth-child(even) { grid-template-columns:1fr; }
  .story-list .story-card:nth-child(even) .story-media { order:0; }
}
@media (max-width:575.98px) {
  .review-grid { grid-template-columns:1fr; }
}

/* Single Story (blog inner) page */
.single-story-meta { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1.1rem; margin-top:1rem; }
.single-story-meta .m-item { display:flex; align-items:center; gap:0.4rem; font-size:0.92rem; color:#fff; }
.single-story-meta .m-item b { color:var(--ink-800); font-weight:700; }
.single-story-cover { width:100%; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:16/8; margin-top:0; position:relative; z-index:3; background:linear-gradient(160deg, var(--sand-100), var(--sand-300)); }
.single-story-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.single-story-body { margin:0 auto; font-size:1.08rem; line-height:1.8; color:var(--text-body); }
.single-story-body p { margin:0 0 1.4rem; }
.single-story-quote { max-width:720px; margin:2.4rem auto; padding:1.6rem 1.8rem; border-left:3px solid var(--red-500); background:var(--paper); border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:1.2rem; font-style:italic; font-weight:600; color:var(--ink-800); line-height:1.6; }
.single-story-back { display:inline-flex; align-items:center; gap:0.5rem; font-weight:700; font-size:0.9rem; color:rgba(255,255,255,0.7); text-decoration:none; }
.single-story-back:hover { color:#fff; }

.more-stories-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.more-story-card { display:block; text-decoration:none; color:inherit; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-subtle); background:var(--white); transition:box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.more-story-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.more-story-media { aspect-ratio:4/3; background:linear-gradient(160deg, var(--sand-100), var(--sand-300)); }
.more-story-media img { width:100%; height:100%; object-fit:cover; display:block; }
.more-story-body { padding:1.2rem 1.3rem 1.4rem; }
.more-story-kicker { font-size:0.75rem; font-weight:700; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--red-600); }
.more-story-title { margin:0.4rem 0 0; font-weight:800; font-size:1.05rem; color:var(--ink-800); line-height:1.35; }

@media (max-width:991.98px) {
  .more-stories-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575.98px) {
  .single-story-body { font-size:1rem; }
  .single-story-quote { font-size:1.05rem; padding:1.2rem 1.4rem; margin:1.8rem auto; }
  .more-stories-grid { grid-template-columns:1fr; }
}

/* ==========================================================================
   Contact Us page
   ========================================================================== */
.contact-hero { background:var(--ink-900); color:#fff; }
.contact-hero-inner { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start; padding:clamp(4rem,8vw,7rem) 0; }
.contact-intro { display:flex; flex-direction:column; gap:1.4rem; position:sticky; top:110px; }
.contact-intro-title { margin:0; font-weight:900; font-size:clamp(2.4rem,5vw,4rem); line-height:1; letter-spacing:-0.03em; color:#fff; }
.contact-intro-lead { margin:0; max-width:420px; font-size:1.08rem; line-height:1.65; color:rgba(255,255,255,0.72); }
.contact-intro-badge { display:inline-flex; align-items:center; gap:0.6rem; font-weight:700; font-size:0.85rem; color:#fff; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:var(--radius-pill,999px); padding:0.5rem 1rem; width:fit-content; }

.contact-form-card { background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:clamp(2rem,3.5vw,2.8rem); }
.contact-form-title { margin:0 0 1.6rem; font-weight:800; font-size:1.4rem; letter-spacing:-0.01em; color:var(--ink-800); }

.form-field { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.2rem; }
.form-field label { font-weight:700; font-size:0.85rem; color:var(--ink-800); }
.form-field input, .form-field select, .form-field textarea {
  font-family:var(--font-sans); font-size:0.98rem; color:var(--text-strong);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:0.75rem 0.95rem;
  background:var(--white); transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline:none; border-color:var(--red-500); box-shadow:0 0 0 3px var(--surface-brand-soft);
}
.form-field textarea { resize:vertical; min-height:110px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }

.contact-band { display:flex; width:min(1180px, 92vw); margin:0 auto; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; }
.contact-band-map { flex:1.1; min-height:420px; }
.contact-band-map iframe { width:100%; height:100%; border:0; display:block; }
.contact-band-info { flex:0.9; padding:clamp(2.4rem,4vw,3.6rem); display:flex; flex-direction:column; justify-content:center; gap:1.3rem; background:var(--paper); }
.contact-addr { margin:0; font-size:1.05rem; line-height:1.6; color:var(--text-body); }
.contact-hours { display:flex; flex-direction:column; gap:0.3rem; font-size:0.95rem; color:var(--text-muted); }
.contact-hours b { color:var(--ink-800); }

.call-band { background:var(--ink-800); color:#fff; }
.call-band-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2rem; padding:clamp(2.6rem,5vw,3.6rem) 0; }
.call-band-copy h2 { margin:0; font-weight:800; font-size:clamp(1.8rem,3.2vw,2.6rem); letter-spacing:-0.02em; color:#fff; }
.call-band-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.call-chip { display:flex; align-items:center; gap:0.7rem; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); border-radius:var(--radius-md); padding:0.8rem 1.3rem; text-decoration:none; color:#fff; font-weight:700; }
.call-chip svg { color:var(--red-500); flex:0 0 auto; }
.call-chip:hover { background:rgba(255,255,255,0.15); }

.wa-band { background:linear-gradient(135deg, var(--red-500) 0%, var(--red-700) 100%); color:#fff; }
.wa-band-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.6rem; padding:clamp(2.8rem,5vw,4rem) 0; }
.wa-band-copy { display:flex; flex-direction:column; gap:0.6rem; max-width:560px; }
.wa-band-copy h2 { margin:0; font-weight:800; font-size:clamp(1.7rem,3vw,2.3rem); letter-spacing:-0.02em; color:#fff; }
.wa-band-copy p { margin:0; font-size:1rem; color:rgba(255,255,255,0.85); line-height:1.55; }

@media (max-width:991.98px) {
  .contact-hero-inner { grid-template-columns:1fr; }
  .contact-intro { position:static; }
  .contact-band { flex-direction:column; }
  .contact-band-map { min-height:320px; }
  .form-row { grid-template-columns:1fr; }
}

/* ==========================================================================
   Why Us page
   ========================================================================== */
.page-hero-image-contain { position:absolute; right:40px; top:50%; transform:translateY(-50%); width:auto; height:78%; max-width:48%; object-fit:contain; z-index:1; }

/* Comparison table */
.compare-wrap { background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.compare-row { display:grid; grid-template-columns:1fr 1fr; }
.compare-row + .compare-row { border-top:1px solid var(--border-subtle); }
.compare-head .compare-cell { font-weight:700; font-size:0.78rem; letter-spacing:var(--ls-wide); text-transform:uppercase; padding:1.1rem 1.6rem; }
.compare-head .compare-cell:first-child { background:var(--sand-100); color:var(--text-faint); }
.compare-head .compare-cell:last-child { background:var(--ink-800); color:#fff; }
.compare-cell { padding:1.2rem 1.6rem; font-size:1rem; line-height:1.5; }
.compare-row:not(.compare-head) .compare-cell:first-child { color:var(--text-muted); border-right:1px solid var(--border-subtle); }
.compare-row:not(.compare-head) .compare-cell:last-child { color:var(--ink-800); font-weight:600; background:var(--surface-brand-soft); }
.compare-row:not(.compare-head) .compare-cell:last-child::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--red-500); margin-right:0.6rem; vertical-align:middle; }

/* Timeline (Month 1 / 3 / 6 / Year 1 / Always) */
.timeline { display:flex; flex-direction:column; }
.tl-item { display:grid; grid-template-columns:160px 1fr; gap:1.6rem; padding:1.8rem 0; border-top:1px solid var(--border-subtle); }
.tl-item:first-child { border-top:none; }
.tl-when { font-weight:800; font-size:1.15rem; color:var(--red-600); letter-spacing:-0.01em; }
.tl-title { margin:0 0 0.4rem; font-weight:800; font-size:1.3rem; color:var(--ink-800); letter-spacing:-0.01em; }
.tl-desc { margin:0; font-size:1rem; line-height:1.6; color:var(--text-muted); max-width:640px; }

/* Paperwork placeholder tiles reuse .award-tile */
.paperwork-lead { max-width:620px; margin-bottom:2.2rem; }

@media (max-width:767.98px) {
  .compare-row { grid-template-columns:1fr; }
  .compare-row:not(.compare-head) .compare-cell:first-child { border-right:none; border-bottom:1px solid var(--border-subtle); }
  .tl-item { grid-template-columns:1fr; gap:0.4rem; }
}
@media (max-width:991.98px) {
  .page-hero-image-contain { position:static; height:280px; max-width:100%; width:100%; transform:none; order:-1; margin-bottom:1rem; }
}

/* ==========================================================================
   All Projects page
   ========================================================================== */
.page-hero-compact { min-height:auto; }
.page-hero-compact .page-hero-inner { padding:clamp(3rem,6vw,4.5rem) 0 clamp(2.2rem,4vw,3rem); }
.page-hero-compact .page-hero-copy { max-width:640px; align-items:flex-start; text-align:left; }
.page-hero-compact .page-hero-title { font-size:clamp(2.2rem,4.6vw,3.6rem); }

/* Filter bar */
.filter-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; padding:1.4rem 0; border-bottom:1px solid var(--border-subtle); margin-bottom:2.6rem; }
.filter-group { display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem; }
.filter-label { font-weight:700; font-size:0.75rem; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--text-faint); margin-right:0.3rem; }
.filter-chip { font-family:var(--font-sans); font-weight:600; font-size:0.86rem; color:var(--text-body); background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-pill,999px); padding:0.42rem 0.95rem; cursor:pointer; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.filter-chip:hover { border-color:var(--ink-800); }
.filter-chip.active { background:var(--ink-800); color:#fff; border-color:var(--ink-800); }
.view-toggle { display:flex; border:1px solid var(--border-subtle); border-radius:var(--radius-sm); overflow:hidden; }
.view-toggle button { display:inline-flex; align-items:center; justify-content:center; width:40px; height:36px; background:var(--white); border:none; color:var(--text-faint); cursor:pointer; }
.view-toggle button + button { border-left:1px solid var(--border-subtle); }
.view-toggle button.active { background:var(--ink-800); color:#fff; }

/* Section kicker above project list */
.projects-kicker { font-weight:700; font-size:0.78rem; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--red-600); margin-bottom:1.2rem; display:flex; align-items:center; gap:0.55rem; }

/* Project cards (grid view = default) */
.projects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
.projects-grid.is-list { grid-template-columns:1fr; }
.pj-card { background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-md); }
.projects-grid.is-list .pj-card { flex-direction:row; }
.pj-media { position:relative; z-index:0; aspect-ratio:16/10; background:linear-gradient(160deg, var(--sand-100), var(--sand-300)); display:flex; align-items:center; justify-content:center; color:var(--stone-500); flex:0 0 auto; overflow:hidden; }
.pj-media img { z-index:0; }
.projects-grid.is-list .pj-media { width:320px; aspect-ratio:auto; }
.pj-media svg { width:52px; height:52px; opacity:0.5; }
.pj-media .badge-sc { position:absolute; top:18px; left:18px; z-index:2; }
.pj-body { padding:1.6rem 1.7rem 1.9rem; display:flex; flex-direction:column; gap:0.8rem; flex:1; }
.pj-kicker { font-weight:700; font-size:0.72rem; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--text-faint); }
.pj-title { margin:0; font-weight:800; font-size:1.5rem; letter-spacing:-0.015em; color:var(--ink-800); }
.pj-desc { margin:0; font-size:0.96rem; line-height:1.58; color:var(--text-muted); flex:1; }
.pj-loc { display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; font-weight:600; color:var(--text-faint); }
.pj-loc svg { color:var(--red-500); flex:0 0 auto; }
.pj-types { display:flex; flex-wrap:wrap; gap:0.5rem; }
.pj-type-tag { font-size:0.76rem; font-weight:700; letter-spacing:0.02em; color:var(--text-muted); background:var(--sand-100); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:0.28rem 0.65rem; }
.pj-foot { display:flex; justify-content:space-between; align-items:center; margin-top:0.4rem; }

/* Filtering fade + pagination (All Projects) */
.pj-card { transition: opacity .22s ease, transform .22s ease; }
.projects-grid.is-filtering .pj-card { opacity: 0; transform: translateY(8px); }
.story-card { transition: opacity .22s ease, transform .22s ease; }
.story-list.is-filtering .story-card { opacity: 0; transform: translateY(8px); }
.pj-empty { grid-column: 1 / -1; text-align: center; padding: 2rem 0; color: var(--text-muted); font-size: 1rem; }
.pj-pagination { display:flex; align-items:center; justify-content:center; gap:0.5rem; margin-top:2.4rem; flex-wrap:wrap; }
.pj-page-btn { font-family:var(--font-sans); font-weight:600; font-size:0.86rem; color:var(--text-body); background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); min-width:38px; height:38px; padding:0 0.7rem; cursor:pointer; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.pj-page-btn:hover:not(:disabled) { border-color:var(--ink-800); }
.pj-page-btn.active { background:var(--ink-800); color:#fff; border-color:var(--ink-800); }
.pj-page-btn:disabled { opacity:0.4; cursor:default; }

@media (max-width:767.98px) {
  .projects-grid { grid-template-columns:1fr; }
  .projects-grid.is-list .pj-card { flex-direction:column; }
  .projects-grid.is-list .pj-media { width:100%; aspect-ratio:16/10; }
  .filter-bar { align-items:flex-start; }
}

/* ==========================================================================
   Individual Project page (Sidh Pearl template)
   ========================================================================== */
.proj-hero { position:relative; overflow:hidden; background:var(--ink-900); color:#fff; min-height:clamp(480px,72vh,760px); display:flex; align-items:flex-end; }
.proj-hero-media { position:absolute; inset:0; z-index:0; }
.proj-hero-media img { width:100%; height:100%; object-fit:cover; display:block; }
.proj-hero-scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(14,14,15,0.15) 0%, rgba(14,14,15,0.35) 45%, rgba(14,14,15,0.92) 100%); }
.proj-hero-inner { position:relative; z-index:2; padding:clamp(3rem,7vw,4.5rem) 0 clamp(2.2rem,4vw,3rem); display:flex; flex-direction:column; gap:1.3rem; }
.proj-hero-cta { position:absolute; right:0; bottom:clamp(2.2rem,4vw,3rem); z-index:2; display:flex; justify-content:flex-end; }
.proj-hero-title { margin:0; font-weight:900; font-size:clamp(2.6rem,6vw,4.6rem); letter-spacing:-0.03em; line-height:0.98; color:#fff; }
.proj-hero-loc { display:flex; align-items:center; gap:0.55rem; font-size:1.05rem; font-weight:600; color:rgba(255,255,255,0.85); }
.proj-hero-loc svg { color:var(--red-500); flex:0 0 auto; }
.proj-hero-meta { display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:0.4rem; }
.proj-meta-chip { display:flex; flex-direction:column; gap:0.25rem; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:var(--radius-md); padding:0.7rem 1.1rem; backdrop-filter:blur(6px); }
.proj-meta-chip .l { font-size:0.68rem; font-weight:700; letter-spacing:var(--ls-wide); text-transform:uppercase; color:rgba(255,255,255,0.55); }
.proj-meta-chip .v { font-size:0.98rem; font-weight:800; color:#fff; }

/* Layout stats (Fold 2) */
.layout-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.layout-stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.layout-stat { background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:1.4rem 1.5rem; display:flex; flex-direction:column; gap:0.4rem; }
.layout-stat .n { font-weight:900; font-size:2.1rem; letter-spacing:-0.02em; color:var(--ink-800); }
.layout-stat .l { font-size:0.82rem; font-weight:600; color:var(--text-muted); line-height:1.4; }
.layout-visual { background:var(--ink-800); border-radius:var(--radius-lg); padding:2rem; color:#fff; display:flex; flex-direction:column; gap:1.2rem; }
.layout-visual .row { display:flex; justify-content:space-between; align-items:center; padding:0.9rem 0; border-bottom:1px solid var(--ink-700); }
.layout-visual .row:last-child { border-bottom:none; }
.layout-visual .row b { font-weight:800; font-size:1.05rem; }
.layout-visual .row span { color:rgba(255,255,255,0.55); font-size:0.85rem; font-weight:600; }

/* Spec tabs (Fold 3) */
.spec-tabs { display:flex; gap:0.6rem; margin-bottom:2rem; }
.spec-tab { font-family:var(--font-sans); font-weight:700; font-size:0.95rem; color:var(--text-muted); background:var(--white); border:2px solid var(--border-subtle); border-radius:var(--radius-sm); padding:0.7rem 1.4rem; cursor:pointer; transition:all var(--dur-fast) var(--ease-out); }
.spec-tab.active { background:var(--ink-800); color:#fff; border-color:var(--ink-800); }
.spec-panel { display:none; }
.spec-panel.active { display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.spec-size { display:flex; flex-direction:column; gap:0.6rem; }
.spec-size .n { font-weight:900; font-size:clamp(2.6rem,4vw,3.4rem); letter-spacing:-0.02em; color:var(--ink-800); }
.spec-size .u { font-size:1rem; font-weight:600; color:var(--text-muted); }
.spec-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0.8rem 1.4rem; }
.spec-list li { display:flex; align-items:flex-start; gap:0.6rem; font-size:0.98rem; color:var(--text-body); line-height:1.45; }
.spec-list li svg { color:var(--red-500); flex:0 0 auto; margin-top:2px; }

/* Finishes list (Fold 4) */
.finish-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.9rem 2rem; }
.finish-item { display:flex; align-items:flex-start; gap:0.7rem; font-size:1rem; color:var(--text-body); line-height:1.5; padding:0.7rem 0; border-bottom:1px solid var(--border-subtle); }
.finish-item svg { color:var(--red-500); flex:0 0 auto; margin-top:2px; }

/* Amenities icon grid (Fold 5) */
.amenity-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.amenity-tile { background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:1.4rem 1.1rem; display:flex; flex-direction:column; gap:0.8rem; align-items:flex-start; }
.amenity-tile .ic { width:44px; height:44px; border-radius:var(--radius-sm); background:var(--surface-brand-soft); color:var(--red-500); display:grid; place-items:center; }
.amenity-tile .t { font-size:0.92rem; font-weight:700; color:var(--ink-800); line-height:1.35; }

/* Location (Fold 6) */
.loc-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3rem); align-items:start; }
.loc-map { width:100%; aspect-ratio:4/3; border-radius:var(--radius-md); border:1px solid var(--border-subtle); overflow:hidden; }
.loc-map iframe { width:100%; height:100%; border:0; display:block; }
.loc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.loc-list li { display:flex; justify-content:space-between; align-items:center; padding:0.9rem 0; border-bottom:1px solid var(--border-subtle); font-size:0.98rem; color:var(--text-body); }
.loc-list li b { color:var(--red-600); font-weight:800; white-space:nowrap; margin-left:1rem; }

/* Image carousel (Fold 1.5) */
.carousel-wrap { position:relative; }
.carousel-track { display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.carousel-track::-webkit-scrollbar { display:none; }
.carousel-slide { flex:0 0 auto; width:min(560px,78vw); aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-subtle); scroll-snap-align:start; }
.carousel-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.carousel-nav { display:flex; gap:0.6rem; justify-content:flex-end; margin-top:1rem; }
.carousel-nav button { width:42px; height:42px; border-radius:50%; border:1px solid var(--border-subtle); background:var(--white); color:var(--ink-800); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.carousel-nav button:hover { background:var(--ink-800); color:#fff; }

/* Gallery (Fold 7) */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gallery-tile { position:relative; aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-subtle); }
.gallery-tile img { width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:991.98px) {
  .layout-grid, .loc-grid { grid-template-columns:1fr; }
  .spec-panel.active { grid-template-columns:1fr; }
  .amenity-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575.98px) {
  .layout-stats, .finish-grid { grid-template-columns:1fr; }
  .amenity-grid, .gallery-grid { grid-template-columns:1fr; }
  .spec-list { grid-template-columns:1fr; }
}