/* ============================================================================
   site-design.css — Setia Awan visual chrome.

   Editorial / next-5-years property-developer aesthetic:
   - Confident, quiet, modern. Projects do the talking.
   - Variable serif display + grotesque body (Fraunces + Inter).
   - Generous whitespace, asymmetric grids, numbered sections.
   - Slow-cinema motion. Subtle. No autoplay carousels.

   RULES (enforced for one-knob CI swap):
   - References ONLY Layer 2 semantic tokens (var(--brand-primary), etc.).
   - Zero hex literals except shadow alphas (rgba(0,0,0,.X)).
   - All status/state colours derive from semantic tokens.
   ============================================================================ */


/* ─── Page rhythm ───────────────────────────────────────────────────────── */

/* DEPTH MODEL (per v2-bridge.css):
   - depth-0 outer = full-bleed bg wrapper, NO vertical padding here.
   - depth-1 inner = 1200px boxed content with 64px/24px padding (engine's
     default). We override that for specific section types below at higher
     specificity. NEVER add vertical padding to the outer .section — it
     stacks on top of the engine's inner padding and doubles dead air. */
.section {
    /* No vertical padding here — handled by the engine's depth-1 rule. */
    padding-top: 0;
    padding-bottom: 0;
}
.section--tight  { /* Tight variant — see overrides below for specific cases. */ }
.section--warm   { background: var(--bg-warm); }
.section--tint   { background: var(--bg-tint); }
.section--dark   { background: var(--bg-dark); color: var(--brand-on-primary); }
.section--dark a { color: var(--brand-on-primary); }
.section--brand  { background: var(--brand-primary); color: var(--brand-on-primary); }

/* Generic boxed wrap used inside sections. */
.boxed,
.iw-el--container[data-width-type="boxed"] {
    max-width: var(--max);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* ─── Typography helpers ────────────────────────────────────────────────── */

.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--text-eyebrow);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand-primary);
}
.eyebrow--mut { color: var(--mut); }

.display-h1 {
    font-family: var(--font-serif);
    font-size: var(--text-display);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.025em;
    color: var(--ink);
}
.display-h2 {
    font-family: var(--font-serif);
    font-size: var(--text-h1);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
}
.display-h3 {
    font-family: var(--font-serif);
    font-size: var(--text-h2);
    font-weight: 500;
    line-height: 1.1;
    color: var(--ink);
}
.lede {
    font-size: var(--text-lead);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 640px;
}

/* Section number tag (01 / 02 / 03) — editorial structural device. */
.section-num {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    font-weight: 300;
    color: var(--brand-primary);
    letter-spacing: 0;
    margin-bottom: 18px;
}
.section-num::before { content: '— '; opacity: .5; }

/* sec-hdr no longer adds its own margin-bottom — the parent container in the
   migration already specifies a gap (typically 40-48px). Stacking both caused
   100px+ doubling. Same for eyebrow/headline child margins — let the inner
   flex gap (set in the migration's sec-hdr container, typically 12-14px) be
   the single source. */
.sec-hdr .eyebrow,
.sec-hdr .display-h2,
.sec-hdr .display-h3,
.sec-hdr .lede { margin: 0 auto; }


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

.btn--primary,
.btn--ghost,
.btn--ink,
.btn--inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.btn--primary {
    padding: 16px 28px;
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
}
.btn--primary:hover {
    background: var(--brand-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.btn--ink {
    padding: 16px 28px;
    background: var(--ink);
    color: var(--brand-on-primary);
    border-radius: var(--radius-pill);
}
.btn--ink:hover { background: var(--ink-soft); transform: translateY(-2px); }

.btn--ghost {
    padding: 15px 27px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--radius-pill);
}
.btn--ghost:hover { background: var(--ink); color: var(--brand-on-primary); }

.section--dark .btn--ghost {
    color: var(--brand-on-primary);
    border-color: rgba(255, 255, 255, .55);
}
.section--dark .btn--ghost:hover {
    background: var(--brand-on-primary);
    color: var(--ink);
    border-color: var(--brand-on-primary);
}

.btn--inline {
    padding: 0;
    background: transparent;
    color: var(--brand-primary);
    font-weight: 600;
    border-bottom: 1px solid transparent;
}
.btn--inline:hover {
    color: var(--brand-primary-hover);
    border-bottom-color: var(--brand-primary-hover);
}
.btn--inline::after {
    content: '→';
    transition: transform var(--dur-fast) var(--ease-out);
}
.btn--inline:hover::after { transform: translateX(4px); }


/* ─── Top navigation / header ───────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(1.2) blur(14px);
    -webkit-backdrop-filter: saturate(1.2) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: background var(--dur-med) var(--ease-out);
}
.site-header__inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* Match the section content width (--max = 1200px) so the brand-mark
       and nav line up with content edges below the header. The header lives
       in #iw-global-header (NOT #iw-public-root), so v2-bridge's depth-1
       centering rule doesn't apply — we set width:100% explicitly. */
    width: 100% !important;
    max-width: var(--max) !important;
    margin: 0 auto !important;
    padding: 16px var(--gutter) !important;
    box-sizing: border-box;
}
/* The engine's body inside .site-header__inner is flex-row but does NOT get
   `w-full` Tailwind class for split-layout containers. Force it to span its
   parent so the brand-mark sits at the left content edge and nav sits at the
   right content edge — aligning with section content below. */
.site-header__inner > .iw-el__body {
    width: 100% !important;
}
.brand-mark {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -.005em;
    line-height: 1;
}
.brand-mark__sub {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mut);
    margin-top: 4px;
}

.nav-links {
    display: flex;
    gap: 36px;
    align-items: center;
}
.nav-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color var(--dur-fast) var(--ease-out);
    position: relative;
}
.nav-link:hover,
.nav-link.is-active {
    color: var(--ink);
}
.nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    background: var(--brand-primary);
}

@media (max-width: 900px) {
    .nav-links { display: none; } /* mobile-menu pattern handled in site.js if needed */
}


/* ─── Home hero ─────────────────────────────────────────────────────────── */

.home-hero {
    position: relative;
    min-height: clamp(560px, 88vh, 880px);
    background: var(--bg-dark);
    color: var(--brand-on-primary);
    overflow: hidden;
}
.home-hero__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.home-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 80%, rgba(0, 0, 0, .80) 100%);
}
.home-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(120px, 18vh, 200px) var(--gutter) clamp(48px, 8vh, 96px);
    min-height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.home-hero__eyebrow {
    font-size: var(--text-eyebrow);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: 24px;
}
.home-hero__title {
    font-family: var(--font-serif);
    font-size: var(--text-display);
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: -.025em;
    max-width: 14ch;
    margin: 0 0 28px;
}
.home-hero__sub {
    font-size: var(--text-lead);
    line-height: 1.5;
    max-width: 520px;
    opacity: .92;
    margin: 0 0 40px;
}
.home-hero__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.home-hero__scroll {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .7;
    animation: scroll-hint 2.4s infinite;
}
@keyframes scroll-hint { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }


/* ─── Stats strip ───────────────────────────────────────────────────────── */

/* Stats strip — the WRAPPER is a single column; the BODY laid out by
   engine has grid-cols-4 already. We just style the cards. */
.stats-strip {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.stats-strip > .iw-el__body {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    align-items: stretch !important;
}
@media (max-width: 720px) {
    .stats-strip > .iw-el__body { grid-template-columns: repeat(2, 1fr) !important; }
}
.stat-card {
    padding: 48px 16px !important;
    border-right: 1px solid var(--line);
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
}
.stat-card:last-child { border-right: 0; }
@media (max-width: 720px) {
    .stat-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 36px 16px !important; }
    .stat-card:nth-child(2n) { border-right: 0; }
}
/* Kill the section wrapper's vertical padding when it contains a stats-strip —
   the strip has its own internal padding and the wrapper's --section-py
   doubles the dead air. */
.section.section--tight:has(> .iw-el__body > .stats-strip) { padding-block: 24px !important; }
.stat-num {
    font-family: var(--font-serif);
    font-size: clamp(40px, 4vw, 64px);
    font-weight: 400;
    color: var(--brand-primary);
    line-height: 1;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}
.stat-label {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mut);
}


/* ─── Editorial story splits (image + text) ─────────────────────────────── */

/* The engine's .iw-el__body has display:flex; flex-direction:column from
   v2-bridge.css. To make a 2-col split work, we override flex direction AND
   give children equal flex-basis. (Using grid alone loses against the engine's
   Tailwind `flex-col` utility.) */
.story-split > .iw-el__body {
    display: flex !important;
    flex-direction: row !important;
    gap: 80px !important;
    align-items: center !important;
}
.story-split > .iw-el__body > * {
    flex: 1 1 0 !important;
    min-width: 0;
}
@media (max-width: 900px) {
    .story-split > .iw-el__body {
        flex-direction: column !important;
        gap: 40px !important;
    }
}
.story-split--reverse { direction: rtl; }
.story-split--reverse > * { direction: ltr; }
.story-img {
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.story-copy { padding: 16px 0; }
.story-copy h2 {
    font-family: var(--font-serif);
    font-size: var(--text-h2);
    line-height: 1.08;
    margin: 14px 0 20px;
    font-weight: 500;
    color: var(--ink);
}
.story-copy p {
    color: var(--ink-soft);
    line-height: 1.65;
    margin-bottom: 18px;
}


/* ─── Project shelf wrapper (home page) ─────────────────────────────────── */

.project-shelf {
    margin-top: 24px;
}
.project-shelf__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 20px;
}
.project-shelf__head h2 {
    font-family: var(--font-serif);
    font-size: var(--text-h1);
    margin: 0;
    font-weight: 500;
    color: var(--ink);
}


/* ─── CTA band (full-width dark band) ───────────────────────────────────── */

.cta-band {
    background: var(--bg-dark);
    color: var(--brand-on-primary);
    text-align: center;
    /* No vertical padding here — handled by the depth-1 inner override below.
       Keep horizontal padding 0 so the radial glow can extend to viewport edge. */
    padding: 0;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 20% 30%, var(--brand-primary) 0%, transparent 50%);
    opacity: .25;
    pointer-events: none;
}
.cta-band__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}
.cta-band h2 {
    font-family: var(--font-serif);
    font-size: var(--text-h1);
    line-height: 1.05;
    margin: 0 0 24px;
    font-weight: 400;
}
.cta-band p {
    font-size: var(--text-lead);
    opacity: .9;
    margin: 0 0 36px;
}


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

.site-footer {
    background: var(--bg-dark);
    color: rgba(255, 255, 255, .82);
    padding: clamp(64px, 8vw, 112px) var(--gutter) 32px;
}
.footer-grid {
    max-width: var(--max);
    margin: 0 auto;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* The engine renders 4 html widgets as siblings inside the body. We need the
   BODY to be the grid, with the brand column wider. !important on cols to
   beat the engine's grid-cols-4 Tailwind utility. */
.footer-grid > .iw-el__body {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    gap: 48px !important;
}
@media (max-width: 900px) {
    .footer-grid > .iw-el__body { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 560px) {
    .footer-grid > .iw-el__body { grid-template-columns: 1fr !important; }
}
.footer-brand { min-width: 0; word-break: keep-all; }
.footer-brand {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--brand-on-primary);
    margin-bottom: 16px;
}
.footer-tagline {
    font-size: 14px;
    opacity: .65;
    line-height: 1.55;
    max-width: 320px;
}
.footer-col__h {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand-on-primary);
    margin-bottom: 18px;
    font-weight: 600;
}
.footer-col__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-link {
    font-size: 14px;
    color: rgba(255, 255, 255, .68);
    transition: color var(--dur-fast) var(--ease-out);
}
.footer-link:hover { color: var(--brand-on-primary); }

.footer-legal {
    max-width: var(--max);
    margin: 32px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    opacity: .5;
}
.footer-legal__nav {
    display: flex;
    gap: 24px;
}


/* ─── Leadership grid (about page) ──────────────────────────────────────── */

.leadership-grid > .iw-el__body {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 36px !important;
}
@media (max-width: 900px) { .leadership-grid > .iw-el__body { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .leadership-grid > .iw-el__body { grid-template-columns: 1fr !important; } }

.leader-card { text-align: left; }
.leader-card__photo {
    aspect-ratio: 4 / 5;
    background: var(--bg-tint);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
    margin-bottom: 18px;
    overflow: hidden;
    filter: saturate(0.85);
    transition: filter var(--dur-med) var(--ease-out);
}
.leader-card:hover .leader-card__photo { filter: saturate(1); }
.leader-card__name {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 4px;
}
.leader-card__title {
    font-size: 13px;
    color: var(--mut);
    letter-spacing: .04em;
}


/* ─── Awards / press logos row ──────────────────────────────────────────── */

.awards-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 56px;
    opacity: .65;
}
.awards-row img {
    max-height: 56px;
    width: auto;
    filter: grayscale(1);
    transition: filter var(--dur-med), opacity var(--dur-med);
    opacity: .85;
}
.awards-row img:hover { filter: none; opacity: 1; }


/* ─── Milestones timeline ───────────────────────────────────────────────── */

.timeline {
    position: relative;
    padding-left: 32px;
    border-left: 1px solid var(--line);
    max-width: 720px;
    margin: 0 auto;
}
.timeline-item {
    position: relative;
    padding: 0 0 56px 24px;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -36px;
    top: 6px;
    width: 10px;
    height: 10px;
    background: var(--brand-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--bg);
}
.timeline-year {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--brand-primary);
    margin-bottom: 6px;
}
.timeline-h {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 6px;
}
.timeline-body {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.6;
}


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

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.contact-block { margin-bottom: 32px; }
.contact-block__h {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mut);
    margin-bottom: 6px;
}
.contact-block__body {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--ink);
    line-height: 1.4;
}

.contact-form .form-field {
    margin-bottom: 18px;
}
.contact-form label {
    display: block;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mut);
    margin-bottom: 6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    transition: border-color var(--dur-fast);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: 0;
    border-bottom-color: var(--brand-primary);
}


/* ─── Sticky bottom CTA (mobile only) ───────────────────────────────────── */

.sticky-mobile-cta {
    display: none;
}
@media (max-width: 720px) {
    .sticky-mobile-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 80;
        background: var(--bg);
        border-top: 1px solid var(--line);
        padding: 10px 12px env(safe-area-inset-bottom);
        gap: 8px;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .06);
    }
    .sticky-mobile-cta a {
        flex: 1;
        text-align: center;
        padding: 14px 8px;
        border-radius: var(--radius-md);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
    }
    .sticky-mobile-cta a.is-primary {
        background: var(--brand-primary);
        color: var(--brand-on-primary);
    }
    .sticky-mobile-cta a.is-ghost {
        background: var(--bg-tint);
        color: var(--ink);
    }
    body { padding-bottom: 76px; }
}


/* ─── Sustainability metric cards ───────────────────────────────────────── */

.metric-grid > .iw-el__body {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}
@media (max-width: 900px) { .metric-grid > .iw-el__body { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .metric-grid > .iw-el__body { grid-template-columns: 1fr !important; } }
.metric-card {
    padding: 36px 28px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-med);
}
.metric-card:hover { border-color: var(--ink); }
.metric-card__num {
    font-family: var(--font-serif);
    font-size: clamp(36px, 3.5vw, 52px);
    font-weight: 400;
    color: var(--brand-primary);
    line-height: 1;
    margin-bottom: 14px;
}
.metric-card__label {
    font-size: 15px;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 8px;
}
.metric-card__sub {
    font-size: 13px;
    color: var(--mut);
    line-height: 1.55;
}


/* ─── News card (news index) ────────────────────────────────────────────── */

.news-grid > .iw-el__body {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
}
@media (max-width: 900px) { .news-grid > .iw-el__body { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .news-grid > .iw-el__body { grid-template-columns: 1fr !important; } }
.news-card { display: block; }
.news-card__img {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
    margin-bottom: 18px;
}
.news-card__date {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mut);
    margin-bottom: 8px;
}
.news-card__title {
    font-family: var(--font-serif);
    font-size: 22px;
    line-height: 1.25;
    color: var(--ink);
    font-weight: 500;
}


/* ─── FAQ ───────────────────────────────────────────────────────────────── */

.faq-item {
    border-bottom: 1px solid var(--line);
    padding: 28px 0;
}
.faq-item__q {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 12px;
}
.faq-item__a {
    color: var(--ink-soft);
    line-height: 1.65;
}


/* ─── Reveal-on-scroll (engine fw-motion.js wires this) ─────────────────── */

[data-fw-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    will-change: transform, opacity;
}
[data-fw-reveal].is-revealed {
    opacity: 1;
    transform: none;
}


/* ─── Misc utility ──────────────────────────────────────────────────────── */

.text-center { text-align: center; }
.no-pad-top    { padding-top: 0 !important; }
.no-pad-bottom { padding-bottom: 0 !important; }
.divider-line {
    display: block;
    width: 64px;
    height: 1px;
    background: var(--brand-primary);
    margin: 0 0 28px;
}
.text-center .divider-line { margin-left: auto; margin-right: auto; }


/* ============================================================================
   ENGINE WIDGET OVERRIDES
   ─────────────────────────────────────────────────────────────────────────
   The engine renders heading / text / button widgets with built-in Tailwind
   utility classes (text-[80px], font-[400], etc.) and does NOT honor the
   `cssClasses` opt passed in widget settings. We can't change the engine, so
   we style the rendered classes (`.iw-w-heading`, `.iw-w-text`, `.iw-w-button`)
   contextually from known parent containers (which DO honor cssClasses).

   !important is necessary to win against Tailwind utilities at the same
   specificity. Scoped to specific parent classes so it only affects our
   chrome, not arbitrary editor content the client might add later.
   ============================================================================ */


/* ─── Global button baseline (every .iw-w-button) ───────────────────────── */

.iw-w-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    padding: 16px 28px !important;
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
    box-shadow: var(--shadow-md);
}
.iw-w-button:hover {
    background: var(--brand-primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Ghost / secondary button: it's the 2nd button in a CTA pair. */
.home-hero .iw-w-button:nth-of-type(2),
.cta-band .iw-w-button:nth-of-type(2),
.iw-el--container[class*="ctas"] .iw-w-button:nth-of-type(2) {
    background: transparent !important;
    color: var(--brand-on-primary) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    box-shadow: none !important;
}
.home-hero .iw-w-button:nth-of-type(2):hover,
.cta-band .iw-w-button:nth-of-type(2):hover,
.iw-el--container[class*="ctas"] .iw-w-button:nth-of-type(2):hover {
    background: var(--brand-on-primary) !important;
    color: var(--ink) !important;
}


/* ─── Inline text-link buttons (.btn--inline targets via positional hack) ─ */
/* The "View all →" and "Read our story" links are bare buttons inside their
   own containers, no special hook available. We mark them via the engine's
   limited cssClasses-on-container support by inspecting the surrounding
   container class for "inline" pattern. Since we can't easily do that, give
   them a uniform "ink, no bg, with arrow" treatment when they're inside any
   story-copy or shelf-head wrapper. */

.story-copy .iw-w-button,
.project-shelf__head .iw-w-button {
    background: transparent !important;
    color: var(--brand-primary) !important;
    padding: 4px 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid currentColor !important;
    font-weight: 600 !important;
}
.story-copy .iw-w-button:hover,
.project-shelf__head .iw-w-button:hover {
    background: transparent !important;
    color: var(--brand-primary-hover) !important;
    transform: none;
    border-bottom-color: var(--brand-primary-hover) !important;
}


/* ─── Home hero typography overrides ────────────────────────────────────── */

.home-hero {
    /* Fallback fill in case the hero image fails to load (placeholder period). */
    background: linear-gradient(135deg, var(--sa-ink-900) 0%, var(--sa-ink-700) 100%);
}
/* Direct-child only — must not cascade into the CTAs container's flex-row
   body (which would shove the buttons to the right).
   Center content vertically; the cinematic "bottom-anchored caption"
   pattern only works with a real hero photograph behind it. Until photos
   are uploaded, center is the safer + cleaner choice. */
.home-hero > .iw-el__body {
    justify-content: center !important;
    min-height: clamp(520px, 76vh, 760px);
}
.home-hero__inner {
    /* Symmetric padding — body's flex-center handles vertical alignment. */
    padding: 0 var(--gutter) !important;
    max-width: var(--max);
    margin: 0 auto;
    width: 100%;
}
.home-hero .iw-w-heading {
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    letter-spacing: -.025em !important;
    color: var(--brand-on-primary) !important;
    line-height: 1.05 !important;
    margin: 0 0 24px !important;
    /* Cap so it fits ~2 lines on most viewports — buttons stay above fold. */
    font-size: clamp(36px, 5.2vw, 68px) !important;
    max-width: 16ch;
}
.home-hero .iw-w-text {
    color: var(--brand-on-primary) !important;
}
/* Engine wraps each widget in .iw-el--<type>; siblings here are positioned
   by :nth-child since wrapper tags are all <div>. Order:
     1 → eyebrow (text), 2 → title (heading), 3 → sub (text), 4 → CTAs (container). */
.home-hero__inner > .iw-el__body > :nth-child(1) .iw-w-text {
    /* eyebrow */
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    opacity: .85;
    margin: 0 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
.home-hero__inner > .iw-el__body > :nth-child(3) .iw-w-text {
    /* sub */
    font-size: 17px !important;
    line-height: 1.55 !important;
    opacity: .92;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 28px !important;
    max-width: 540px;
}

/* Hero image — fades in to avoid a flash of unstyled image on slow networks.
   The dark gradient on .home-hero remains the fallback if the image fails. */
.home-hero .iw-w-container-bg {
    opacity: 1;
    transition: opacity 400ms ease;
}


/* ─── Stats strip widget overrides ──────────────────────────────────────── */

.stats-strip {
    padding: 24px 0 !important;
}
.stats-strip .iw-w-heading {
    font-family: var(--font-serif) !important;
    color: var(--brand-primary) !important;
    font-weight: 400 !important;
    font-size: clamp(40px, 4vw, 64px) !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
}
.stats-strip .iw-w-text {
    font-size: 12px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    color: var(--mut) !important;
}
/* Add the dividers the migration's $statCard couldn't paint with cssClasses. */
.stats-strip .iw-el__body > * {
    border-right: 1px solid var(--line);
    padding: 24px;
}
.stats-strip .iw-el__body > *:last-child { border-right: 0; }


/* ─── Section header (sec-hdr) sized headings ───────────────────────────── */

.sec-hdr .iw-w-heading {
    font-family: var(--font-serif) !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    letter-spacing: -.015em !important;
    line-height: 1.1 !important;
}
.sec-hdr .iw-w-text:first-of-type {
    color: var(--brand-primary) !important;
}


/* ─── Story splits (image + text) ───────────────────────────────────────── */

.story-copy .iw-w-heading {
    font-family: var(--font-serif) !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    line-height: 1.1 !important;
    /* No margin — parent container's gap (18px from migration) handles spacing. */
    margin: 0 !important;
}
/* Text widgets live inside .iw-el--text wrappers (siblings). :nth-of-type
   on .iw-w-text matches nothing (each is the only .iw-w-text in its wrapper).
   Scope by the WRAPPER's position via :first-of-type / :not(:first-of-type). */
.story-copy > .iw-el__body > .iw-el--text:first-of-type .iw-w-text {
    /* numbered eyebrow (— 01 / — 02 / — 03) */
    color: var(--brand-primary) !important;
    font-family: var(--font-serif) !important;
    font-weight: 300 !important;
    font-size: 24px !important;
}
.story-copy > .iw-el__body > .iw-el--text:not(:first-of-type) .iw-w-text {
    color: var(--ink-soft) !important;
    line-height: 1.65 !important;
    font-size: 17px !important;
}


/* ─── Project shelf head ─────────────────────────────────────────────────── */

.project-shelf__head .iw-w-heading {
    font-family: var(--font-serif) !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    line-height: 1.08 !important;
    font-size: clamp(36px, 4.5vw, 64px) !important;
    /* No margin — parent container's gap handles spacing. */
    margin: 0 !important;
}
/* Sub text under the shelf head (the second .iw-el--text wrapper) — muted. */
.project-shelf__head .iw-el--text:not(:first-of-type) .iw-w-text {
    color: var(--ink-soft) !important;
    font-family: var(--font-sans) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}


/* ─── CTA band ──────────────────────────────────────────────────────────── */

.cta-band .iw-w-heading {
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    color: var(--brand-on-primary) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    margin: 0 0 24px !important;
}
.cta-band .iw-w-text {
    color: var(--brand-on-primary) !important;
    opacity: .9;
    font-size: 18px !important;
    text-align: center !important;
    margin: 0 0 32px !important;
}


/* ─── About hero / Projects hero / page intros ──────────────────────────── */

.iw-el--container.section > .iw-el__body > .iw-el--container > .iw-el__body > .iw-w-heading[class*="iw-w-heading"]:first-of-type {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1.05;
}

/* ─── Page-hero chrome (inner pages: about, projects, contact, etc.) ──────
   Every page hero in the migration is tagged with the `page-hero` class on
   its outer section container. We center it, give it editorial breathing
   room, and place a small red divider line above the eyebrow. */

.page-hero {
    /* Padding lives on the depth-1 inner (override below). Outer is just for
       background + border. */
    padding: 0 !important;
    background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--line);
    text-align: center;
}
.page-hero .iw-el__body {
    align-items: center !important;
}
.page-hero .iw-w-heading {
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    font-size: clamp(40px, 5.5vw, 72px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
    color: var(--ink) !important;
    text-align: center !important;
    margin: 0 0 22px !important;
    max-width: 880px;
}
/* Eyebrow — the first .iw-el--text descendant inside the section. */
.page-hero .iw-el--text:first-of-type .iw-w-text,
.page-hero .iw-el--container > .iw-el__body > .iw-el--text:first-of-type .iw-w-text {
    color: var(--brand-primary) !important;
    font-size: 12px !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    font-weight: 600 !important;
    margin: 0 0 14px !important;
}
/* Lede — every non-first .iw-w-text inside the page hero. */
.page-hero .iw-el--text:not(:first-of-type) .iw-w-text {
    color: var(--ink-soft) !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    text-align: center !important;
    max-width: 640px;
    margin: 0 auto !important;
}
/* Decorative red divider above eyebrow — attach to the deepest body
   (where the eyebrow lives) so it appears immediately above the eyebrow. */
.page-hero .iw-el--container > .iw-el__body::before {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background: var(--brand-primary);
    margin: 0 auto 28px;
}


/* ─── Brand pillars (4-icon row, Sunway SDDA-style) ───────────────────────
   New section between hero and projects on the home page. Translates the
   brand promise into 4 named pillars with icons. */

.pillars > .iw-el__body {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 32px !important;
}
@media (max-width: 900px) { .pillars > .iw-el__body { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; } }
@media (max-width: 560px) { .pillars > .iw-el__body { grid-template-columns: 1fr !important; } }

.pillar {
    text-align: center !important;
    padding: 36px 18px !important;
    background: var(--bg) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.pillar:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}
.pillar > .iw-el__body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
}
.pillar .iw-w-html svg {
    width: 36px;
    height: 36px;
    color: var(--brand-primary);
}
.pillar .iw-w-heading {
    font-family: var(--font-serif) !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: var(--ink) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
.pillar .iw-w-text {
    color: var(--ink-soft) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}


/* ─── Sustainability commitments (timeline-like list, single-column) ─────── */

.commit-list { max-width: 720px; margin: 0 auto; }
.commit-item {
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}
.commit-item > .iw-el__body {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    gap: 24px !important;
    align-items: baseline !important;
}
.commit-item .iw-w-heading {
    font-family: var(--font-serif) !important;
    font-weight: 500 !important;
    color: var(--brand-primary) !important;
    font-size: 22px !important;
}
.commit-item .iw-w-text { color: var(--ink-soft) !important; line-height: 1.6 !important; font-size: 15px !important; }


/* ─── Sales-gallery list (contact page) ──────────────────────────────────── */

.gallery-list > .iw-el__body {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
}
@media (max-width: 720px) { .gallery-list > .iw-el__body { grid-template-columns: 1fr !important; } }
.gallery-card {
    padding: 24px !important;
    background: var(--bg) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}
.gallery-card .iw-w-heading { font-family: var(--font-serif) !important; font-weight: 500 !important; color: var(--ink) !important; font-size: 20px !important; margin-bottom: 10px !important; }
.gallery-card .iw-w-text { color: var(--ink-soft) !important; line-height: 1.5 !important; font-size: 14px !important; }


/* ─── Project price chip (rendered by projects.js when meta.price_from set) */

.proj-card__price {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(255, 255, 255, .94);
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
}
.proj-card__price small { opacity: .65; font-weight: 400; margin-right: 4px; }


/* ─── Mobile hamburger ───────────────────────────────────────────────────── */

.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px;
    color: var(--ink);
}
.nav-toggle svg { display: block; width: 24px; height: 24px; }

/* Mobile-only nav drawer + scrim — hidden on desktop. Below 900px the media
   query block below shows them. */
.nav-drawer, .nav-scrim { display: none; }

@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }
    .nav-drawer, .nav-scrim { display: block; }
    .nav-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(80vw, 360px);
        background: var(--bg);
        z-index: 90;
        transform: translateX(100%);
        transition: transform var(--dur-med) var(--ease-out);
        box-shadow: -16px 0 60px rgba(0, 0, 0, .15);
        padding: 88px 32px 40px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .nav-drawer.is-open { transform: translateX(0); }
    .nav-drawer a {
        font-family: var(--font-serif);
        font-size: 24px;
        font-weight: 500;
        color: var(--ink);
        padding: 10px 0;
        border-bottom: 1px solid var(--line);
    }
    .nav-scrim {
        position: fixed;
        inset: 0;
        z-index: 89;
        background: rgba(15, 20, 25, .35);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-fast);
    }
    .nav-scrim.is-open { opacity: 1; pointer-events: auto; }
}


/* ─── About page timeline — each item has wrapped widgets; scope by wrapper. */
.timeline-item > .iw-el__body > .iw-el--text:first-of-type .iw-w-text {
    color: var(--brand-primary) !important;
    font-family: var(--font-serif) !important;
    font-weight: 500 !important;
    font-size: 28px !important;
}
.timeline-item > .iw-el__body > .iw-el--text:not(:first-of-type) .iw-w-text {
    color: var(--ink-soft) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}
.timeline .iw-w-heading { font-family: var(--font-serif) !important; font-weight: 500 !important; color: var(--ink) !important; font-size: 20px !important; }


/* ─── Leadership cards ──────────────────────────────────────────────────── */

.leader-card .iw-w-heading { font-family: var(--font-serif) !important; font-weight: 500 !important; color: var(--ink) !important; font-size: 22px !important; margin: 18px 0 4px !important; }
.leader-card .iw-w-text    { color: var(--mut) !important; font-size: 13px !important; }


/* ─── Site header (top nav rendered via raw HTML) ───────────────────────── */
/* Already styled via .site-header in the chrome above — no engine override needed. */


/* (Removed — old .section { padding-block: 96px } duplicate. The engine's
   depth-1 inner padding is the single source of vertical rhythm; see the
   high-specificity overrides at the end of this file.) */


/* ─── Hide broken-image icons globally for missing hero/story images ────── */
/* Browsers vary in how they render <img> 404s. This is a safety net for the
   placeholder period before real photography is uploaded. */
img.iw-w-container-bg {
    background: var(--bg-tint);
}


/* ─── Body padding-bottom for sticky mobile CTA — only when CTA exists ──── */

body:has(.sticky-mobile-cta) { padding-bottom: 76px; }
@media (min-width: 721px) {
    body:has(.sticky-mobile-cta) { padding-bottom: 0; }
}


/* ============================================================================
   VIBRANCY + MOTION LAYER
   ─────────────────────────────────────────────────────────────────────────
   The editorial-quiet pass is good for hierarchy. This layer adds the energy:
   bolder type, color, movement. Adds — never overrides structural fixes.
   ============================================================================ */


/* ─── EYEBROWS — small caps tracked text, with a short colored underline
   below the headline (EcoWorld vocabulary). The underline is rendered
   via the headline's ::before in a later rule. */

.page-hero .iw-el--container > .iw-el__body > .iw-el--text:first-of-type .iw-w-text,
.page-hero > .iw-el__body > .iw-el--text:first-of-type .iw-w-text,
.sec-hdr > .iw-el__body > .iw-el--text:first-of-type .iw-w-text,
.project-shelf__head .iw-el--text:first-of-type .iw-w-text,
.story-copy > .iw-el__body > .iw-el--text:first-of-type .iw-w-text {
    display: block !important;
    background: transparent !important;
    color: var(--ink-soft) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    text-align: inherit !important;
    margin: 0 0 28px !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

/* Story-copy eyebrows align left */
.story-copy > .iw-el__body > .iw-el--text:first-of-type .iw-w-text {
    text-align: left !important;
}


/* ─── DISPLAY HEADLINES — confident, calm (EcoWorld vocabulary) ────── */

/* Fraunces at weight 600 for editorial bold display */
.home-hero .iw-w-heading,
.page-hero .iw-w-heading,
.sec-hdr .iw-w-heading,
.story-copy .iw-w-heading,
.project-shelf__head .iw-w-heading {
    font-weight: 600 !important;
}

/* Project shelf headline goes biggest */
.project-shelf__head .iw-w-heading {
    font-size: clamp(48px, 7vw, 96px) !important;
    line-height: .98 !important;
    letter-spacing: -.025em !important;
}

/* EcoWorld accent: short colored underline below the section headline. */
.sec-hdr > .iw-el__body > .iw-el--heading::after,
.page-hero .iw-el--container > .iw-el__body > .iw-el--heading::after,
.story-copy > .iw-el__body > .iw-el--heading::after,
.project-shelf__head .iw-el--heading::after,
.home-hero__inner > .iw-el__body > .iw-el--heading::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--brand-primary);
    margin-top: 24px;
}
/* Center-align the underline under centered headlines */
.sec-hdr > .iw-el__body > .iw-el--heading::after,
.page-hero .iw-el--container > .iw-el__body > .iw-el--heading::after {
    margin-left: auto;
    margin-right: auto;
}


/* ─── BUTTONS — calm, EcoWorld vocabulary ───────────────────────────── */
/* Default: solid black, no gradient, no shadow theatrics. */
.iw-w-button {
    background: var(--ink) !important;
    color: var(--brand-on-primary) !important;
    border: 1px solid var(--ink) !important;
    box-shadow: none !important;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.iw-w-button:hover {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Ghost / secondary — outline only, transparent fill (EcoWorld's signature). */
.home-hero .iw-w-button:nth-of-type(2),
.cta-band .iw-w-button:nth-of-type(2),
.iw-el--container[class*="ctas"] .iw-w-button:nth-of-type(2) {
    background: transparent !important;
    color: var(--brand-on-primary) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
}
.home-hero .iw-w-button:nth-of-type(2):hover,
.cta-band .iw-w-button:nth-of-type(2):hover,
.iw-el--container[class*="ctas"] .iw-w-button:nth-of-type(2):hover {
    background: var(--brand-on-primary) !important;
    color: var(--ink) !important;
    border-color: var(--brand-on-primary) !important;
}

/* Inline/text-style links inside story-copy and shelf head — minimal, with
   a small arrow chevron that slides on hover. */
.story-copy .iw-w-button,
.project-shelf__head .iw-w-button {
    background: transparent !important;
    color: var(--ink) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ink) !important;
    border-radius: 0 !important;
    padding: 6px 0 !important;
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .04em !important;
}
.story-copy .iw-w-button::after,
.project-shelf__head .iw-w-button::after {
    content: ' →';
    margin-left: 8px;
    display: inline-block;
    transition: transform var(--dur-fast);
}
.story-copy .iw-w-button:hover,
.project-shelf__head .iw-w-button:hover {
    background: transparent !important;
    color: var(--brand-primary) !important;
    border-bottom-color: var(--brand-primary) !important;
}
.story-copy .iw-w-button:hover::after,
.project-shelf__head .iw-w-button:hover::after { transform: translateX(4px); }


/* ─── PROJECT CARD — calm hover, no 3D tilt ─────────────────────────── */

.proj-card {
    transition: transform .3s ease, box-shadow .3s ease, border-color .25s ease !important;
}
.proj-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 24px 48px rgba(15, 20, 25, .10) !important;
}
.proj-card__status {
    background: var(--brand-primary) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    box-shadow: none !important;
}
.proj-card__status--coming_soon {
    background: var(--ink) !important;
}
.proj-card__status--completed {
    background: #10b981 !important;
}
.proj-card__title {
    font-family: var(--font-serif) !important;
    font-weight: 600 !important;
    font-size: clamp(22px, 1.8vw, 26px) !important;
}
.proj-card__loc {
    font-family: var(--font-display) !important;
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
    letter-spacing: .1em !important;
}
.proj-card__price {
    background: var(--ink) !important;
    color: var(--brand-on-primary) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(15, 20, 25, .25);
}
.proj-card__price small { color: rgba(255, 255, 255, .65) !important; }


/* ─── PILLARS — calm hover (EcoWorld vocabulary) ──────────────────── */

.pillar {
    transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease !important;
}
.pillar:hover {
    transform: translateY(-4px) !important;
    border-color: var(--ink) !important;
    box-shadow: 0 16px 32px rgba(15, 20, 25, .08) !important;
}
.pillar .iw-w-heading {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: -.005em !important;
}
.pillar .iw-w-html svg {
    transition: color .2s ease;
    color: var(--ink) !important;
}
.pillar:hover .iw-w-html svg {
    color: var(--brand-primary) !important;
}


/* ─── MARQUEE STRIP — dropped per EcoWorld restyle. ─────────────────── */
/* (Marquee CSS removed; the migration's marquee section now renders as a
   thin invisible band. Hide it entirely to keep the home page calm.) */
.marquee-section { display: none !important; }


/* ─── DECORATIVE FLOATING SHAPES — dropped per EcoWorld restyle. ────── */
/* (Blob animations removed. Sections stay quiet.) */


/* ─── HERO — calm, image-led (EcoWorld vocabulary) ─────────────────── */

.home-hero {
    overflow: hidden;
}
/* Lighter overlay — let the photograph breathe. Sits between the
   <img class="iw-w-container-bg"> (z:0) and the body (z:2). */
.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(15, 20, 25, .25) 0%,
        rgba(15, 20, 25, .15) 50%,
        rgba(15, 20, 25, .55) 100%
    );
}
/* EcoWorld-style geometric brand accent: a red triangle cutting in from
   bottom-left. Calm, deliberate. No animation. */
.home-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 220px;
    height: 220px;
    background: var(--brand-primary);
    clip-path: polygon(0 100%, 100% 100%, 0 0);
    opacity: .92;
    pointer-events: none;
    z-index: 1;
}
.home-hero__inner { position: relative; z-index: 2; }

/* Home hero eyebrow — plain caps tracked text, white over the photograph
   (matches the EcoWorld restraint). */
.home-hero .iw-el--text:first-of-type .iw-w-text {
    display: block !important;
    background: transparent !important;
    color: var(--brand-on-primary) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .26em !important;
    text-transform: uppercase !important;
    margin: 0 0 28px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    opacity: .92;
}


/* ─── STAT NUMBERS — bolder, brand color glow ────────────────────────── */

.stat-card .stat-num-display,
.stats-strip .stat-num-display {
    display: inline-block;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: var(--brand-primary) !important;
    text-shadow: 0 4px 24px rgba(235, 34, 34, .15);
    font-feature-settings: "tnum" 1;
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -.02em;
}
.stat-card .stat-num-wrap {
    text-align: center;
    margin-bottom: 8px;
}
.stat-card .stat-card-label,
.stats-strip .stat-card-label {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mut);
    font-weight: 600;
    text-align: center;
}


/* ─── ANIMATED ENTRY (stagger reveal) ────────────────────────────────── */
/* Each top-level section transitions in with a stagger when js-reveal-armed
   is on <html>. We extend the engine's data-fw-reveal + .is-revealed pattern
   with a longer/punchier transform. */

[data-fw-reveal] {
    opacity: 0;
    transform: translateY(40px) scale(.985);
    transition: opacity 800ms cubic-bezier(.2, .7, .2, 1),
                transform 800ms cubic-bezier(.2, .7, .2, 1);
}
[data-fw-reveal].is-revealed {
    opacity: 1;
    transform: none;
}
/* Stagger nested cards within revealed sections */
[data-fw-reveal].is-revealed .pillar,
[data-fw-reveal].is-revealed .proj-card,
[data-fw-reveal].is-revealed .stat-card,
[data-fw-reveal].is-revealed .metric-card,
[data-fw-reveal].is-revealed .gallery-card,
[data-fw-reveal].is-revealed .leader-card {
    animation: card-rise 700ms cubic-bezier(.2, .7, .2, 1) backwards;
}
[data-fw-reveal].is-revealed > :nth-child(1) .pillar:nth-child(1),
[data-fw-reveal].is-revealed > :nth-child(1) .stat-card:nth-child(1) { animation-delay: 100ms; }
[data-fw-reveal].is-revealed > * .pillar:nth-child(2),
[data-fw-reveal].is-revealed > * .stat-card:nth-child(2) { animation-delay: 180ms; }
[data-fw-reveal].is-revealed > * .pillar:nth-child(3),
[data-fw-reveal].is-revealed > * .stat-card:nth-child(3) { animation-delay: 260ms; }
[data-fw-reveal].is-revealed > * .pillar:nth-child(4),
[data-fw-reveal].is-revealed > * .stat-card:nth-child(4) { animation-delay: 340ms; }
@keyframes card-rise {
    from { opacity: 0; transform: translateY(28px) scale(.96); }
    to   { opacity: 1; transform: none; }
}


/* ─── HOVER TINT ON SECTION HEADER (subtle) ─────────────────────────── */

.sec-hdr .iw-w-heading {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}


/* ─── SCROLL-PROGRESS BAR (top of viewport) ─────────────────────────── */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sa-brand-500), var(--sa-brand-700));
    z-index: 100;
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
    transition: opacity .2s;
}


/* ============================================================================
   DEPTH-1 INNER PADDING OVERRIDES
   ─────────────────────────────────────────────────────────────────────────
   The engine's v2-bridge.css applies `padding: 64px 24px !important` to every
   depth-1 inner container inside a section. To override that without going
   through the engine, we use selectors matching v2-bridge's specificity
   (ID + depth-0 + body + depth-1 = 4 classes + ID = ~140 specificity).
   This is the ONE place to tune per-section vertical padding.
   ============================================================================ */

/* Default — tighten the engine's 64/64 to a more compact 48/48 for marketing
   sections that don't need so much room. */
#iw-public-root > .iw-el--container.iw-el--depth-0.section
  > .iw-el__body
  > .iw-el--container.iw-el--depth-1 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}
@media (max-width: 720px) {
    #iw-public-root > .iw-el--container.iw-el--depth-0.section
      > .iw-el__body
      > .iw-el--container.iw-el--depth-1 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* Page-hero sections — taller, with the editorial chrome we authored. */
#iw-public-root > .iw-el--container.iw-el--depth-0.page-hero
  > .iw-el__body
  > .iw-el--container.iw-el--depth-1 {
    padding-top: clamp(80px, 12vh, 128px) !important;
    padding-bottom: clamp(80px, 12vh, 128px) !important;
}

/* Stats strip — fully tight; the stat-card padding inside already gives breathing. */
#iw-public-root > .iw-el--container.iw-el--depth-0.section
  > .iw-el__body
  > .iw-el--container.iw-el--depth-1.stats-strip {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Marquee strip — zero padding; marquee has its own internal 18px. */
#iw-public-root > .iw-el--container.iw-el--depth-0.marquee-section
  > .iw-el__body {
    padding: 0 !important;
}
.marquee-section { padding: 0 !important; }

/* CTA band — dramatic padding, but applied ONCE on the depth-1 inner. */
#iw-public-root > .iw-el--container.iw-el--depth-0.cta-band
  > .iw-el__body
  > .iw-el--container.iw-el--depth-1 {
    padding-top: clamp(96px, 11vw, 144px) !important;
    padding-bottom: clamp(96px, 11vw, 144px) !important;
}

/* Home hero — no inner padding (its own positioning logic handles layout) */
#iw-public-root > .iw-el--container.iw-el--depth-0.home-hero
  > .iw-el__body
  > .iw-el--container.iw-el--depth-1.home-hero__inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ─── REDUCED-MOTION ESCAPE HATCH ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .marquee-track { animation: none; }
    .home-hero .iw-w-container-bg { animation: none; }
}