/* ===== Design tokens ===== */
:root {
    --color-maroon: #6B1E23;
    --color-maroon-dark: #4A1418;
    --color-gold: #C89B3C;
    --color-gold-light: #E4C77E;
    --color-ivory: #FAF6EE;
    --color-ink: #22262B;
    --color-sage: #3F6B52;
    --color-rose: #F1E4E1;
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Work Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--color-ink);
    background: var(--color-ivory);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

a {
    text-decoration: none;
}

.display-heading {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-maroon-dark);
    line-height: 1.15;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-sage);
    margin-bottom: 0.5rem;
}

.lead-muted {
    color: #4a4f55;
    font-size: 1.05rem;
}

/* ===== Top bar ===== */
.topbar {
    background: var(--color-maroon-dark);
    color: var(--color-gold-light);
    font-size: 0.8rem;
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    flex-wrap: wrap;
}

/* ===== Header / Nav ===== */
.site-header {
    background: var(--color-ivory);
    border-bottom: 1px solid rgba(107,30,35,0.15);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.brand-seal {
    color: var(--color-maroon);
}

.brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.site-footer .brand-logo {
    width: 40px;
    height: 40px;
}

.brand-seal.light {
    color: var(--color-gold-light);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

    .brand-text strong {
        font-family: var(--font-display);
        font-size: 1.2rem;
        color: var(--color-maroon-dark);
    }

    .brand-text small {
        font-size: 0.7rem;
        color: var(--color-sage);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .brand-text.light strong {
        color: var(--color-ivory);
    }

    .brand-text.light small {
        color: var(--color-gold-light);
    }

.nav-link {
    color: var(--color-ink) !important;
    font-weight: 500;
}

    .nav-link:hover {
        color: var(--color-maroon) !important;
    }

.btn-cta {
    background: var(--color-maroon);
    color: var(--color-ivory) !important;
    border: 1px solid var(--color-maroon);
    border-radius: 2px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
}

    .btn-cta:hover {
        background: var(--color-maroon-dark);
        color: var(--color-ivory);
    }

.btn-outline-gold {
    border: 1px solid var(--color-gold);
    color: var(--color-maroon-dark);
    border-radius: 2px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    background: transparent;
}

    .btn-outline-gold:hover {
        background: var(--color-gold);
        color: var(--color-maroon-dark);
    }

/* ===== Ledger divider (signature motif) ===== */
.ledger-divider {
    height: 6px;
    border-top: 1px solid var(--color-gold);
    border-bottom: 1px solid var(--color-gold);
}

/* ===== Hero ===== */
.hero {
    position: relative;
    overflow: hidden;
    padding: 4rem 0 3rem;
    background: linear-gradient(180deg, var(--color-ivory), #f3ecdf);
}

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(107,30,35,0.06) 1.5px, transparent 1.5px);
        background-size: 26px 26px;
        opacity: 0.6;
        pointer-events: none;
    }

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    align-items: center;
}

.hero-copy h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
}

.hero-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.hero-seal {
    max-width: 320px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-seal {
        max-width: 220px;
    }
}

/* ===== Stats bar ===== */
.stats-bar {
    background: var(--color-maroon-dark);
    color: var(--color-ivory);
    padding: 1.75rem 0;
}

.stats-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1.5rem;
    text-align: center;
}

.stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-gold-light);
    font-weight: 700;
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ===== Sections ===== */
.section-plain {
    padding: 4rem 0;
}

.section-tinted {
    padding: 4rem 0;
    background: var(--color-rose);
}

.section-head {
    margin-bottom: 2rem;
}

.page-header {
    padding: 3rem 0 2rem;
    background: var(--color-rose);
}

/* ===== Service / scheme cards ===== */
.service-card, .scheme-card, .board-card, .branch-card {
    background: #fff;
    border: 1px solid rgba(107,30,35,0.12);
    border-radius: 4px;
    padding: 1.75rem;
    height: 100%;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .service-card:hover, .scheme-card:hover {
        box-shadow: 0 8px 24px rgba(107,30,35,0.1);
        transform: translateY(-3px);
    }

.service-icon {
    font-size: 1.75rem;
    color: var(--color-gold);
    margin-bottom: 0.75rem;
    display: block;
}

.service-card h3, .scheme-card h4, .board-card h4, .branch-card h4 {
    font-family: var(--font-display);
    color: var(--color-maroon-dark);
}

.rate-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: var(--color-sage);
    color: #fff;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    margin: 0.4rem 0;
}

/* ===== Rate table ===== */
.rate-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

    .rate-table th, .rate-table td {
        border-bottom: 1px solid rgba(107,30,35,0.15);
        padding: 0.6rem 0.75rem;
        text-align: left;
    }

    .rate-table th {
        color: var(--color-maroon-dark);
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.06em;
    }

/* ===== Notices ===== */
.notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .notice-list li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0;
        border-bottom: 1px dashed rgba(107,30,35,0.25);
        flex-wrap: wrap;
    }

.notice-tag {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    background: var(--color-maroon);
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
}

.notice-title {
    flex: 1;
    font-weight: 500;
}

.notice-date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #777;
}

.notice-download {
    color: var(--color-maroon);
    font-size: 1.1rem;
}

.notice-list.large li {
    padding: 1rem 0;
}

/* ===== Board / Branches ===== */
.board-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-rose);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-maroon);
    margin-bottom: 1rem;
}

.board-role {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-sage);
    text-transform: uppercase;
}

/* ===== Info card / fact list ===== */
.info-card {
    background: var(--color-rose);
    border: none;
    border-radius: 4px;
    padding: 1.75rem;
}

.fact-list div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(107,30,35,0.2);
}

.fact-list dt {
    color: #666;
    font-size: 0.85rem;
}

.fact-list dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.check-list {
    list-style: none;
    padding: 0;
}

    .check-list li {
        padding-left: 1.5rem;
        position: relative;
        margin-bottom: 0.5rem;
    }

        .check-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--color-sage);
            font-weight: 700;
        }

/* ===== CTA banner ===== */
.cta-banner {
    padding: 4rem 0;
    background: var(--color-maroon);
    color: var(--color-ivory);
    text-align: center;
}

    .cta-banner .display-heading {
        color: var(--color-ivory);
    }

    .cta-banner .lead-muted {
        color: #f1e4e1;
    }

/* ===== Footer ===== */
.site-footer {
    background: var(--color-ink);
    color: #cfcfcf;
    padding: 3.5rem 0 1.5rem;
}

.footer-heading {
    color: var(--color-gold-light);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
    padding: 0;
}

    .footer-links li {
        margin-bottom: 0.5rem;
    }

    .footer-links a {
        color: #cfcfcf;
    }

        .footer-links a:hover {
            color: var(--color-gold-light);
        }

.footer-muted {
    color: #a3a3a3;
}

.site-footer .ledger-divider {
    border-color: var(--color-gold);
    opacity: 0.4;
}

/* ===== Focus states (accessibility) ===== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ===== Why Us ===== */
.why-item {
    text-align: center;
    padding: 1rem;
}

.why-icon {
    font-size: 1.8rem;
    color: var(--color-maroon);
    margin-bottom: 0.75rem;
    display: block;
}

.why-item h5 {
    font-family: var(--font-display);
    color: var(--color-maroon-dark);
    margin-bottom: 0.4rem;
}

.why-item p {
    font-size: 0.9rem;
    color: #555;
    margin: 0;
}

/* ===== Step list (Membership / Grievance pages) ===== */
.step-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.step-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.step-num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-maroon);
    color: var(--color-ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
}

.step-item h5 {
    font-family: var(--font-display);
    color: var(--color-maroon-dark);
    margin-bottom: 0.25rem;
}

.step-item p {
    margin: 0;
    color: #4a4f55;
}

/* ===== Mini steps (homepage) ===== */
.mini-step {
    text-align: center;
    padding: 1.25rem 1rem;
    background: #fff;
    border: 1px solid rgba(107,30,35,0.12);
    border-radius: 4px;
    height: 100%;
}

.mini-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-gold);
    color: var(--color-maroon-dark);
    font-family: var(--font-display);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.mini-step h5 {
    font-family: var(--font-display);
    color: var(--color-maroon-dark);
    margin: 0;
    font-size: 1rem;
}

/* ===== Testimonials ===== */
.testimonial-card {
    background: #fff;
    border: 1px solid rgba(107,30,35,0.12);
    border-radius: 4px;
    padding: 1.75rem;
    height: 100%;
}

.testimonial-quote-icon {
    font-size: 1.5rem;
    color: var(--color-gold);
    display: block;
    margin-bottom: 0.5rem;
}

.testimonial-card p {
    font-style: italic;
    color: #444;
}

.testimonial-name {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-sage);
}

/* ===== FAQ accordion ===== */
.faq-category-heading {
    font-family: var(--font-display);
    color: var(--color-maroon-dark);
    margin-bottom: 1rem;
}

.faq-accordion .accordion-item {
    border: 1px solid rgba(107,30,35,0.15);
    border-radius: 4px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.faq-accordion .accordion-button {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-maroon-dark);
    background: #fff;
}

    .faq-accordion .accordion-button:not(.collapsed) {
        background: var(--color-rose);
        color: var(--color-maroon-dark);
        box-shadow: none;
    }

    .faq-accordion .accordion-button:focus {
        box-shadow: 0 0 0 2px var(--color-gold);
    }

    .faq-accordion .accordion-button::after {
        filter: sepia(60%) saturate(300%) hue-rotate(-10deg);
    }

.faq-accordion .accordion-body {
    color: #4a4f55;
}

/* ===== Forms grid (Notices & Downloads) ===== */
.form-card {
    background: #fff;
    border: 1px solid rgba(107,30,35,0.12);
    border-radius: 4px;
    padding: 1.5rem;
    height: 100%;
}

.form-card-icon {
    font-size: 1.5rem;
    color: var(--color-gold);
    margin-bottom: 0.5rem;
    display: block;
}

.form-card h4 {
    font-family: var(--font-display);
    color: var(--color-maroon-dark);
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
}

.form-card p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 1rem;
}

/* ===== Page loader / splash (logo) ===== */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-ivory);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

    .page-loader.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

.page-loader-inner {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-loader-logo {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(107,30,35,0.25);
    animation: loaderPulse 1.3s ease-in-out infinite;
}

.page-loader-ring {
    position: absolute;
    inset: 0;
    border: 3px solid rgba(107,30,35,0.15);
    border-top-color: var(--color-maroon);
    border-radius: 50%;
    animation: loaderSpin 0.9s linear infinite;
}

@keyframes loaderSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loaderPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }
}

/* ===== Page fade-in ===== */
main, .site-header, .site-footer, .topbar {
    opacity: 1;
    transition: opacity 0.6s ease;
}

body.is-loading main,
body.is-loading .site-header,
body.is-loading .site-footer,
body.is-loading .topbar {
    opacity: 0;
}

/* ===== Scroll reveal ===== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

/* ===== Hero seal (logo) ===== */
.hero-seal {
    position: relative;
}

.hero-seal-logo {
    width: 100%;
    height: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    box-shadow: 0 24px 60px rgba(107,30,35,0.28);
    animation: heroFloat 4.5s ease-in-out infinite;
}

.hero-seal-ring {
    position: absolute;
    inset: 50% auto auto 50%;
    width: calc(100% + 36px);
    max-width: 336px;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border: 2px dashed var(--color-gold);
    border-radius: 50%;
    opacity: 0.55;
    animation: heroSpin 40s linear infinite;
}

.hero-seal-ring-2 {
    width: calc(100% + 64px);
    max-width: 364px;
    border-style: solid;
    border-width: 1px;
    opacity: 0.25;
    animation-duration: 60s;
    animation-direction: reverse;
}

@keyframes heroFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes heroSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ===== Page header watermark ===== */
.page-header {
    position: relative;
    overflow: hidden;
}

    .page-header::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -70px;
        width: 240px;
        height: 240px;
        background: url('/images/logo.png') center / contain no-repeat;
        opacity: 0.07;
        transform: translateY(-50%);
        pointer-events: none;
    }

@media (max-width: 767px) {
    .page-header::after {
        width: 150px;
        height: 150px;
        right: -50px;
    }

    .topbar-inner {
        justify-content: center;
        text-align: center;
        font-size: 0.7rem;
        gap: 0.5rem 1rem;
    }

    .hero-seal {
        max-width: 180px;
    }

    .hero-seal-ring, .hero-seal-ring-2 {
        display: none;
    }

    .stats-grid {
        gap: 1rem;
    }
}

@media (max-width: 400px) {
    .brand-text small {
        display: none;
    }
}

/* ===== Nav link underline ===== */
.nav-link {
    position: relative;
}

    .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 2px;
        width: 0;
        height: 2px;
        background: var(--color-gold);
        transition: width 0.25s ease;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        width: 100%;
    }

    /* ===== Dropdown caret (Services / More) ===== */
    .nav-link.dropdown-toggle::after {
        /* neutralize Bootstrap's default border-triangle caret, keep the underline-bar behavior */
        content: "";
        position: absolute;
        left: 0;
        bottom: 2px;
        width: 0;
        height: 2px;
        background: var(--color-gold);
        border: 0;
        margin: 0;
        transition: width 0.25s ease;
    }

    .nav-link.dropdown-toggle::before {
        display: inline-block;
        content: "";
        vertical-align: 0.18em;
        margin-left: 0.4em;
        border-top: 0.32em solid var(--color-maroon);
        border-right: 0.28em solid transparent;
        border-left: 0.28em solid transparent;
        transition: transform 0.2s ease, border-top-color 0.2s ease;
    }

    .nav-link.dropdown-toggle:hover::before,
    .nav-item.show .nav-link.dropdown-toggle::before {
        border-top-color: var(--color-gold);
    }

.nav-item.show .nav-link.dropdown-toggle::before {
    transform: rotate(180deg);
}

/* ===== Dropdown menu (Services / More) ===== */
.dropdown-menu {
    border: 1px solid rgba(107,30,35,0.15);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(107,30,35,0.15);
    padding: 0.4rem 0;
}

.dropdown-item {
    color: var(--color-ink);
    font-weight: 500;
    padding: 0.5rem 1.25rem;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background: var(--color-rose);
        color: var(--color-maroon-dark);
    }

    .dropdown-item.active,
    .dropdown-item:active {
        background: var(--color-maroon);
        color: var(--color-ivory);
    }

/* ===== Button hover polish ===== */
.btn-cta, .btn-outline-gold {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease;
}

    .btn-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(107,30,35,0.3);
    }

    .btn-outline-gold:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(200,155,60,0.28);
    }

/* ===== Extra card hover polish ===== */
.board-card, .branch-card, .testimonial-card, .form-card, .mini-step, .why-item {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

    .board-card:hover, .branch-card:hover, .testimonial-card:hover, .form-card:hover {
        box-shadow: 0 10px 26px rgba(107,30,35,0.12);
        transform: translateY(-3px);
    }

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ===== Image-backed cards (services, schemes) ===== */
.img-card {
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
    min-height: 240px;
    display: flex;
    align-items: flex-end;
}

.img-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(74, 20, 24, 0.35) 0%, rgba(74, 20, 24, 0.92) 100%);
    transition: background 0.3s ease;
}

.img-card:hover .img-card-overlay {
    background: linear-gradient(180deg, rgba(74, 20, 24, 0.5) 0%, rgba(74, 20, 24, 0.95) 100%);
}

.img-card-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.img-card .service-icon {
    color: var(--color-gold-light);
}

.img-card h3, .img-card h4 {
    color: #fff;
}

.img-card p {
    color: #e7d9d2;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.img-card .rate-pill {
    background: var(--color-gold);
    color: var(--color-maroon-dark);
}

.img-card .btn-outline-gold {
    border-color: var(--color-gold-light);
    color: #fff;
}

    .img-card .btn-outline-gold:hover {
        background: var(--color-gold-light);
        color: var(--color-maroon-dark);
    }

/* ===== Testimonial avatar ===== */
.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--color-gold);
    margin-bottom: 0.75rem;
    background: #fff;
}

/* ===== Photo CTA banner ===== */
.cta-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.cta-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(74, 20, 24, 0.88), rgba(74, 20, 24, 0.94));
}

.cta-banner .container {
    position: relative;
    z-index: 2;
}

/* ===== Service detail banner ===== */
.service-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 4rem 0;
    color: #fff;
}

.service-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(74, 20, 24, 0.55), rgba(74, 20, 24, 0.9));
}

.service-banner .container {
    position: relative;
    z-index: 2;
}

.service-banner .eyebrow {
    color: var(--color-gold-light);
}

.service-banner .display-heading {
    color: #fff;
}

.service-banner .lead-muted {
    color: #f1e4e1;
}

/* =========================================================
   NEW HOMEPAGE LAYOUT SYSTEM (modern split-section style)
   ========================================================= */

/* ---- Refined nav (minimal, spaced-out, reference-style) ---- */
.site-header {
    background: rgba(250, 246, 238, 0.94);
    backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid rgba(107,30,35,0.10);
}

.navbar-nav .nav-link {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.5rem 0.85rem !important;
}

/* ---- Trust strip (regulatory badges, replaces "as featured on") ---- */
.trust-strip {
    background: var(--color-ivory);
    border-top: 1px solid rgba(107,30,35,0.08);
    border-bottom: 1px solid rgba(107,30,35,0.08);
    padding: 1.1rem 0;
}

.trust-strip-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 2.5rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-maroon-dark);
    opacity: 0.8;
    white-space: nowrap;
}

    .trust-item i {
        color: var(--color-gold);
        font-size: 1rem;
    }

/* ---- Split story sections (image + text, alternating) ---- */
.story-split {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

    .story-split.reverse {
        grid-template-columns: 1fr 0.85fr;
    }

        .story-split.reverse .story-media {
            order: 2;
        }

        .story-split.reverse .story-copy {
            order: 1;
        }

@media (max-width: 991px) {
    .story-split, .story-split.reverse {
        grid-template-columns: 1fr;
        text-align: left;
    }

        .story-split.reverse .story-media, .story-split.reverse .story-copy {
            order: initial;
        }
}

.story-media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(155deg, var(--color-maroon) 0%, var(--color-maroon-dark) 55%, #2c0d10 100%);
    box-shadow: 0 24px 48px rgba(74,20,24,0.22);
}

    .story-media::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(228,199,126,0.16) 1.5px, transparent 1.5px);
        background-size: 22px 22px;
    }

.story-media-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .story-media-mark img {
        width: 46%;
        max-width: 190px;
        opacity: 0.92;
        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.35));
    }

    .story-media-mark i {
        font-size: 5rem;
        color: var(--color-gold-light);
        opacity: 0.85;
    }

.story-media-badge {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    right: 1.25rem;
    background: rgba(250,246,238,0.96);
    color: var(--color-maroon-dark);
    border-radius: 8px;
    padding: 0.85rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.story-copy .eyebrow {
    color: var(--color-maroon);
}

.accent-italic {
    font-style: italic;
    color: var(--color-maroon);
}

/* ---- Offer cards (photo-style, 3-up) ---- */
.offer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

@media (max-width: 991px) {
    .offer-grid {
        grid-template-columns: 1fr;
    }
}

.offer-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(107,30,35,0.08);
    border: 1px solid rgba(107,30,35,0.07);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .offer-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(107,30,35,0.14);
    }

.offer-card-media {
    position: relative;
    height: 190px;
    background: linear-gradient(150deg, var(--color-maroon-dark), var(--color-maroon));
    display: flex;
    align-items: center;
    justify-content: center;
}

    .offer-card-media i {
        font-size: 2.75rem;
        color: var(--color-gold-light);
    }

.offer-card-body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .offer-card-body h3 {
        font-family: var(--font-display);
        color: var(--color-maroon-dark);
        margin-bottom: 0.6rem;
    }

    .offer-card-body p {
        color: #4a4f55;
        flex: 1;
        margin-bottom: 1.1rem;
    }

/* ---- Impact / stats bar (large numbers, reference-style) ---- */
.impact-bar {
    padding: 3.5rem 0;
    background: var(--color-maroon-dark);
    color: var(--color-ivory);
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 1rem;
    text-align: center;
}

@media (max-width: 767px) {
    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.impact-num {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2.2rem, 4vw, 3rem);
    color: var(--color-gold-light);
    line-height: 1.1;
}

.impact-label {
    font-size: 0.82rem;
    color: #e7d9d2;
    margin-top: 0.35rem;
}

/* ---- Quote-style testimonials (minimal, reference-style) ---- */
.quote-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 991px) {
    .quote-row {
        grid-template-columns: 1fr;
    }
}

.quote-block {
    padding: 1.75rem 0 0;
    border-top: 2px solid var(--color-gold);
}

    .quote-block p {
        font-family: var(--font-display);
        font-size: 1.2rem;
        color: var(--color-ink);
        line-height: 1.5;
        margin-bottom: 1rem;
    }

.quote-name {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-maroon);
}

/* ---- Resource cards ---- */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

@media (max-width: 991px) {
    .resource-grid {
        grid-template-columns: 1fr;
    }
}

.resource-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(107,30,35,0.08);
    padding: 1.9rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.resource-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-sage);
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    margin-bottom: 0.9rem;
    width: fit-content;
}

.resource-card h4 {
    font-family: var(--font-display);
    color: var(--color-maroon-dark);
    margin-bottom: 0.6rem;
}

.resource-card p {
    color: #4a4f55;
    flex: 1;
}

/* ---- Final CTA (full-bleed, reference-style) ---- */
.final-cta {
    position: relative;
    padding: 5rem 0;
    text-align: center;
    background: linear-gradient(160deg, var(--color-maroon-dark) 0%, #2c0d10 100%);
    color: var(--color-ivory);
    overflow: hidden;
}

    .final-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(228,199,126,0.10) 1.5px, transparent 1.5px);
        background-size: 26px 26px;
    }

    .final-cta .container {
        position: relative;
        z-index: 2;
    }

    .final-cta .display-heading {
        color: var(--color-ivory);
    }

    .final-cta .lead-muted {
        color: #e7d9d2;
        max-width: 560px;
        margin: 0 auto 1.5rem;
    }

/* ---- Section heading (left-aligned, oversized, reference-style) ---- */
.section-head-split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

    .section-head-split .display-heading {
        margin-bottom: 0;
        max-width: 560px;
    }

    .section-head-split p {
        max-width: 360px;
        color: #4a4f55;
        margin-bottom: 0;
    }

/* ---- Minimal footer nav row ---- */
.footer-nav-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.75rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    .footer-nav-row a {
        color: #cfcfcf;
        font-size: 0.85rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

        .footer-nav-row a:hover {
            color: var(--color-gold-light);
        }

/* =========================================================
   ADDITIONAL TRANSITIONS & MICRO-ANIMATIONS
   ========================================================= */

/* ---- Staggered reveal for card grids / rows ---- */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

    .reveal-stagger.is-visible > *:nth-child(1) {
        transition-delay: 0.02s;
    }

    .reveal-stagger.is-visible > *:nth-child(2) {
        transition-delay: 0.12s;
    }

    .reveal-stagger.is-visible > *:nth-child(3) {
        transition-delay: 0.22s;
    }

    .reveal-stagger.is-visible > *:nth-child(4) {
        transition-delay: 0.32s;
    }

    .reveal-stagger.is-visible > *:nth-child(5) {
        transition-delay: 0.42s;
    }

    .reveal-stagger.is-visible > *:nth-child(6) {
        transition-delay: 0.52s;
    }

    .reveal-stagger.is-visible > *:nth-child(7) {
        transition-delay: 0.62s;
    }

    .reveal-stagger.is-visible > *:nth-child(8) {
        transition-delay: 0.72s;
    }

/* ---- Sticky header gains depth once the page scrolls ---- */
.site-header {
    transition: box-shadow 0.35s ease, background-color 0.35s ease;
}

    .site-header.is-scrolled {
        box-shadow: 0 8px 24px rgba(74,20,24,0.08);
        background: rgba(250, 246, 238, 0.98);
    }

/* ---- Nav link underline sweep ---- */
.navbar-nav .nav-link {
    position: relative;
    transition: color 0.25s ease;
}

    .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        left: 0.85rem;
        right: 0.85rem;
        bottom: 0.15rem;
        height: 1.5px;
        background: var(--color-gold);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .navbar-nav .nav-link:hover::after {
        transform: scaleX(1);
    }

/* ---- Dropdown fade/slide-in ---- */
.dropdown-menu {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    .dropdown-menu.show {
        animation: dropdownIn 0.22s ease;
    }

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Buttons: lift + soft glow on hover ---- */
.btn-cta, .btn-outline-gold {
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .btn-cta:hover, .btn-outline-gold:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(107,30,35,0.18);
    }

    .btn-cta:active, .btn-outline-gold:active {
        transform: translateY(0);
        box-shadow: none;
    }

/* ---- Hero: staggered entrance on load (not scroll-based) ---- */
.hero-copy > * {
    opacity: 0;
    transform: translateY(18px);
    animation: heroRise 0.7s ease forwards;
}

    .hero-copy > *:nth-child(1) {
        animation-delay: 0.15s;
    }

    .hero-copy > *:nth-child(2) {
        animation-delay: 0.3s;
    }

    .hero-copy > *:nth-child(3) {
        animation-delay: 0.45s;
    }

    .hero-copy > *:nth-child(4) {
        animation-delay: 0.6s;
    }

.hero-seal {
    opacity: 0;
    animation: heroRise 0.9s ease forwards;
    animation-delay: 0.5s;
}

@keyframes heroRise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-copy > *, .hero-seal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---- Trust strip: continuous marquee scroll ---- */
.trust-strip {
    overflow: hidden;
}

.trust-strip-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    animation: trustMarquee 26s linear infinite;
}

.trust-strip:hover .trust-strip-inner {
    animation-play-state: paused;
}

@keyframes trustMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .trust-strip-inner {
        animation: none;
        flex-wrap: wrap;
        width: auto;
    }
}

/* ---- Story media: subtle zoom + glow on hover ---- */
.story-media {
    transition: box-shadow 0.35s ease;
}

.story-media-mark img, .story-media-mark i {
    transition: transform 0.5s ease;
}

.story-split:hover .story-media-mark img,
.story-split:hover .story-media-mark i {
    transform: scale(1.06);
}

/* ---- Offer / resource cards: icon + underline motion on hover ---- */
.offer-card-media i {
    transition: transform 0.35s ease;
}

.offer-card:hover .offer-card-media i {
    transform: scale(1.15) rotate(-4deg);
}

.resource-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .resource-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 34px rgba(107,30,35,0.1);
        border-color: rgba(107,30,35,0.18);
    }

.resource-tag {
    transition: background-color 0.25s ease;
}

/* ---- Quote blocks: gold rule grows in on hover ---- */
.quote-block {
    position: relative;
    transition: transform 0.25s ease;
}

    .quote-block::before {
        content: "";
        position: absolute;
        top: -2px;
        left: 0;
        height: 2px;
        width: 0;
        background: var(--color-maroon);
        transition: width 0.4s ease;
    }

    .quote-block:hover::before {
        width: 100%;
    }

    .quote-block:hover {
        transform: translateY(-3px);
    }

/* ---- Impact numbers: gentle pop when counted up ---- */
.impact-num {
    transition: transform 0.3s ease;
}

.impact-bar.is-visible .impact-num {
    animation: impactPop 0.5s ease;
}

@keyframes impactPop {
    0% {
        transform: scale(0.85);
        opacity: 0.4;
    }

    60% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

/* ---- Final CTA button gentle pulse to draw the eye ---- */
.final-cta .btn-cta {
    animation: ctaPulse 2.4s ease-in-out infinite;
}

    .final-cta .btn-cta:hover {
        animation-play-state: paused;
    }

@keyframes ctaPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(228,199,126,0.35);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(228,199,126,0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .final-cta .btn-cta {
        animation: none;
    }
}

/* =========================================================
   HOME-PAGE ONLY: reference-matched extra components
   ========================================================= */

/* ---- Giant ghost/watermark heading behind a section title ---- */
.watermark-wrap {
    position: relative;
    text-align: center;
    padding: 1.5rem 0 0.5rem;
}

.watermark-text {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.75rem, 11vw, 7rem);
    letter-spacing: 0.02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(107,30,35,0.14);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.impact-bar .watermark-text {
    -webkit-text-stroke: 1px rgba(228,199,126,0.22);
}

.watermark-title {
    position: relative;
    margin-top: -1.6em;
}

    .watermark-title .display-heading {
        margin-bottom: 0;
    }

/* ---- Dual image / "what if" style section ---- */
.duo-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 767px) {
    .duo-media {
        grid-template-columns: 1fr;
    }
}

.duo-media-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(150deg, var(--color-rose) 0%, #ecdad4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 30px rgba(107,30,35,0.12);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

    .duo-media-item:nth-child(2) {
        background: linear-gradient(150deg, var(--color-maroon) 0%, var(--color-maroon-dark) 100%);
        margin-top: 2.25rem;
    }

    .duo-media-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 42px rgba(107,30,35,0.18);
    }

    .duo-media-item i {
        font-size: 3rem;
        color: var(--color-maroon);
        opacity: 0.55;
    }

    .duo-media-item:nth-child(2) i {
        color: var(--color-gold-light);
        opacity: 0.9;
    }

@media (max-width: 767px) {
    .duo-media-item:nth-child(2) {
        margin-top: 0;
    }
}

.duo-copy {
    max-width: 640px;
}

    .duo-copy p {
        color: #4a4f55;
    }

/* ---- Origin story: centered heading + two-column body text ---- */
.origin-block {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.origin-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    text-align: left;
    margin: 2rem 0;
}

@media (max-width: 767px) {
    .origin-columns {
        grid-template-columns: 1fr;
    }
}

.origin-columns p {
    color: #4a4f55;
}

/* ---- Full-bleed photo banner with giant name / motif overlay ---- */
.name-banner {
    position: relative;
    padding: 5.5rem 0 6.5rem;
    background: linear-gradient(160deg, var(--color-maroon-dark) 0%, #2c0d10 100%);
    overflow: hidden;
    text-align: center;
}

    .name-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(228,199,126,0.10) 1.5px, transparent 1.5px);
        background-size: 24px 24px;
    }

.name-banner-figure {
    position: relative;
    z-index: 2;
    width: 130px;
    height: 130px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: rgba(250,246,238,0.08);
    border: 1px solid rgba(228,199,126,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .name-banner-figure img {
        width: 62%;
        opacity: 0.95;
    }

    .name-banner-figure i {
        font-size: 3.2rem;
        color: var(--color-gold-light);
    }

.name-banner-caption {
    position: relative;
    z-index: 2;
    color: #f1e4e1;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    max-width: 480px;
    margin: 0 auto;
}

.name-banner-watermark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.35em;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 13vw, 8.5rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(228,199,126,0.10);
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

/* ---- Service list rows (alternative to card grid) ---- */
.offer-list {
    border-top: 1px solid rgba(107,30,35,0.12);
}

.offer-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.75rem 0;
    border-bottom: 1px solid rgba(107,30,35,0.12);
    transition: background-color 0.3s ease, padding-left 0.3s ease;
}

    .offer-row:hover {
        background: rgba(200,155,60,0.06);
        padding-left: 0.75rem;
    }

.offer-row-icon {
    font-size: 1.6rem;
    color: var(--color-gold);
    text-align: center;
}

.offer-row-body h3 {
    font-family: var(--font-display);
    color: var(--color-maroon-dark);
    margin-bottom: 0.35rem;
}

.offer-row-body p {
    color: #4a4f55;
    margin-bottom: 0;
    max-width: 560px;
}

@media (max-width: 767px) {
    .offer-row {
        grid-template-columns: 40px 1fr;
    }

    .offer-row-cta {
        grid-column: 1 / -1;
        margin-top: 0.75rem;
    }
}

/* ---- Testimonial carousel (spotlight style) ---- */
.spotlight-carousel {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.spotlight-track {
    position: relative;
    min-height: 190px;
}

.spotlight-slide {
    display: none;
    animation: fadeInSlide 0.5s ease;
}

    .spotlight-slide.is-active {
        display: block;
    }

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.spotlight-name {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-maroon);
    margin-bottom: 1rem;
    display: block;
}

.spotlight-slide p {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--color-ink);
    line-height: 1.55;
}

.spotlight-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.spotlight-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-gold);
    background: transparent;
    color: var(--color-maroon-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    cursor: pointer;
}

    .spotlight-arrow:hover {
        background: var(--color-gold);
        color: var(--color-maroon-dark);
        transform: scale(1.08);
    }

.spotlight-dots {
    display: flex;
    gap: 0.4rem;
}

.spotlight-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(107,30,35,0.25);
    transition: background-color 0.25s ease, transform 0.25s ease;
    cursor: pointer;
    border: none;
    padding: 0;
}

    .spotlight-dot.is-active {
        background: var(--color-maroon);
        transform: scale(1.3);
    }

/* ---- Boxed quote cards (secondary testimonial style) ---- */
.quote-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 991px) {
    .quote-card-grid {
        grid-template-columns: 1fr;
    }
}

.quote-card {
    background: #fff;
    border-radius: 10px;
    padding: 1.75rem;
    box-shadow: 0 10px 26px rgba(107,30,35,0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .quote-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 34px rgba(107,30,35,0.12);
    }

    .quote-card p {
        color: #3d4147;
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

.quote-card-name {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--color-maroon);
}

/* ---- Follow / social-style closing grid ---- */
.follow-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.6rem;
}

@media (max-width: 767px) {
    .follow-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.follow-grid-item {
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: linear-gradient(150deg, var(--color-maroon) 0%, var(--color-maroon-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-light);
    font-size: 1.3rem;
    opacity: 0.85;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

    .follow-grid-item:nth-child(even) {
        background: linear-gradient(150deg, var(--color-sage) 0%, #2a4536 100%);
    }

    .follow-grid-item:hover {
        transform: translateY(-4px) scale(1.03);
        opacity: 1;
    }

/* ===== Content photo frame (About / Membership) ===== */
.photo-frame {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(107,30,35,0.18);
    border: 4px solid #fff;
    display: block;
}

.photo-caption {
    font-size: 0.85rem;
    color: var(--color-sage);
    margin-top: 0.5rem;
}

/* ===== Map embed (Contact) ===== */
.map-frame {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(107,30,35,0.18);
    display: block;
}

.map-card {
    height: 100%;
    min-height: 320px;
}

/* ================================================================
   SHAHU URBAN — CINEMATIC EDITORIAL HOMEPAGE OVERRIDES
   The homepage uses a separate visual system so inner pages retain
   their existing Bootstrap-friendly styling.
================================================================ */
.su-home {
    --su-ink: #1b1c14;
    --su-cream: #f2f0e8;
    --su-paper: #f8f7f1;
    --su-line: rgba(27,28,20,.16);
    --su-accent: #c9a66a;
    --su-muted: #78786e;
    position: relative;
    overflow: hidden;
    background: var(--su-paper);
    color: var(--su-ink)
}

    .su-home * {
        box-sizing: border-box
    }

    .su-home .container {
        position: relative;
        z-index: 2
    }

    .su-home a {
        text-decoration: none
    }

    .su-home .su-grain {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 50;
        opacity: .045;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")
    }

    .su-home .su-cursor {
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        width: 18px;
        height: 18px;
        border: 1px solid rgba(242,240,232,.7);
        border-radius: 50%;
        pointer-events: none;
        transform: translate(-50%,-50%);
        mix-blend-mode: difference;
        transition: width .25s,height .25s,background .25s
    }

        .su-home .su-cursor span {
            position: absolute;
            width: 3px;
            height: 3px;
            background: #fff;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%)
        }

.su-display {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(3rem,6.2vw,6.8rem);
    line-height: .9;
    letter-spacing: -.045em;
    font-weight: 600;
    margin: 0
}

    .su-display em {
        font-weight: 500;
        font-style: italic
    }

    .su-display.light {
        color: var(--su-paper)
    }

.su-kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: 'JetBrains Mono',monospace;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #d5c69e
}

    .su-kicker.dark {
        color: #66675e
    }

.su-section-meta {
    display: flex;
    justify-content: space-between;
    font-family: 'JetBrains Mono',monospace;
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #77776d;
    border-top: 1px solid var(--su-line);
    padding-top: 1rem
}

    .su-section-meta.light {
        color: #aaa99f;
        border-color: rgba(255,255,255,.2)
    }

.su-hero {
    min-height: calc(100vh - 72px);
    position: relative;
    display: flex;
    align-items: center;
    background: #1b1c14;
    color: var(--su-paper);
    overflow: hidden
}

.su-hero-inner {
    padding: 3.5rem 1rem 2rem
}

.su-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(242,240,232,.17);
    padding-bottom: 1rem
}

.su-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c9a66a;
    box-shadow: 0 0 0 0 rgba(201,166,106,.7);
    animation: suPulse 2s infinite
}

.su-hero-index {
    font-family: 'JetBrains Mono',monospace;
    font-size: .68rem;
    color: #8f9087
}

.su-hero-grid {
    display: grid;
    grid-template-columns: 1.03fr .97fr;
    gap: 4rem;
    align-items: center;
    padding: 4.5rem 0 2rem
}

.su-wordmark {
    font-family: 'Work Sans',sans-serif;
    font-size: .68rem;
    letter-spacing: .28em;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #aaa99f
}

    .su-wordmark span {
        font-weight: 400;
        color: #c9a66a;
        margin-left: .25rem
    }

.su-hero-title {
    font-size: clamp(4rem,8vw,8.7rem);
    color: #f6f4ec
}

    .su-hero-title em {
        color: #d6bd88
    }

.su-hero-lead {
    max-width: 520px;
    margin: 2rem 0 0;
    color: #aaa99f;
    font-size: 1rem;
    line-height: 1.8
}

.su-actions {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin-top: 2.2rem
}

    .su-actions.center {
        justify-content: center
    }

.su-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-width: 190px;
    padding: 1rem 1.15rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 700;
    transition: transform .35s cubic-bezier(.2,.8,.2,1),background .35s,color .35s
}

    .su-btn i {
        font-size: 1rem
    }

.su-btn-light {
    background: #f2f0e8;
    color: #1b1c14
}

    .su-btn-light:hover {
        background: #c9a66a;
        color: #1b1c14;
        transform: translateY(-4px)
    }

.su-btn-dark {
    background: #1b1c14;
    color: #f2f0e8
}

    .su-btn-dark:hover {
        background: #c9a66a;
        color: #1b1c14;
        transform: translateY(-4px)
    }

.su-text-link {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: #f2f0e8;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em
}

    .su-text-link i {
        transition: transform .3s
    }

    .su-text-link:hover i {
        transform: translateX(5px)
    }

    .su-text-link.light {
        color: #f2f0e8
    }

.su-hero-art {
    min-height: 590px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.su-art-backdrop {
    position: absolute;
    width: 76%;
    aspect-ratio: 1;
    border-radius: 48% 52% 50% 50%;
    background: linear-gradient(145deg,#d8d5c9,#7d7e72);
    transform: rotate(8deg);
    opacity: .96
}

    .su-art-backdrop:before {
        content: "";
        position: absolute;
        inset: 8%;
        border: 1px solid rgba(27,28,20,.35);
        border-radius: 50%;
        transform: rotate(-15deg)
    }

.su-art-card {
    position: absolute;
    box-shadow: 0 35px 70px rgba(0,0,0,.32)
}

.su-art-card-main {
    width: min(330px,72%);
    aspect-ratio: 1.18/1.5;
    background: #27281f;
    border: 1px solid rgba(242,240,232,.25);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: rotate(-8deg);
    animation: suFloat 6s ease-in-out infinite
}

.su-card-top, .su-card-bottom {
    display: flex;
    justify-content: space-between;
    font-family: 'JetBrains Mono',monospace;
    font-size: .52rem;
    letter-spacing: .08em;
    color: #a8a89d
}

.su-card-mark {
    font-family: 'Cormorant Garamond',serif;
    font-size: 9rem;
    line-height: .7;
    color: #e7dfca;
    letter-spacing: -.12em
}

.su-card-bottom {
    color: #c9a66a
}

.su-art-card-float {
    right: 2%;
    top: 20%;
    width: 190px;
    padding: 1.3rem;
    background: #e9e5d8;
    color: #1b1c14;
    transform: rotate(8deg);
    animation: suFloat 5s ease-in-out -1s infinite
}

.su-mini-label {
    font-family: 'JetBrains Mono',monospace;
    font-size: .5rem;
    letter-spacing: .1em
}

.su-art-card-float strong {
    display: block;
    font-family: 'Cormorant Garamond',serif;
    font-size: 2.4rem;
    line-height: .8;
    margin: 2.5rem 0
}

.su-art-card-float em {
    color: #8f6f3e
}

.su-mini-line {
    display: block;
    width: 100%;
    height: 1px;
    background: #1b1c14
}

.su-art-seal {
    position: absolute;
    left: 4%;
    bottom: 13%;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(242,240,232,.4);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #c9a66a;
    animation: suSpin 22s linear infinite
}

    .su-art-seal span {
        position: absolute;
        font-family: 'JetBrains Mono',monospace;
        font-size: .45rem;
        letter-spacing: .12em;
        white-space: nowrap
    }

    .su-art-seal b {
        font-family: 'Cormorant Garamond',serif;
        font-size: 2rem
    }

.su-hero-orbit {
    position: absolute;
    border: 1px solid rgba(201,166,106,.18);
    border-radius: 50%;
    pointer-events: none
}

.su-orbit-one {
    width: 800px;
    height: 800px;
    right: -280px;
    top: -220px
}

.su-orbit-two {
    width: 450px;
    height: 450px;
    left: -330px;
    bottom: -220px
}

.su-hero-noise {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 50%,rgba(201,166,106,.08),transparent 35%)
}

.su-hero-foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: 'JetBrains Mono',monospace;
    font-size: .55rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #797a70
}

.su-scroll-line {
    height: 1px;
    width: 90px;
    background: rgba(242,240,232,.2);
    position: relative;
    overflow: hidden
}

    .su-scroll-line span {
        position: absolute;
        left: -20%;
        width: 25%;
        height: 100%;
        background: #c9a66a;
        animation: suSlide 2s linear infinite
    }

.su-marquee {
    overflow: hidden;
    background: #c9a66a;
    color: #1b1c14;
    border-bottom: 1px solid #1b1c14
}

.su-marquee-track {
    display: flex;
    width: max-content;
    animation: suMarquee 24s linear infinite
}

.su-marquee-set {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    padding: .75rem 1.1rem;
    white-space: nowrap;
    font-family: 'JetBrains Mono',monospace;
    font-size: .67rem;
    letter-spacing: .1em
}

    .su-marquee-set b {
        font-size: .75rem
    }

.su-section-light {
    background: var(--su-paper)
}

.su-section-cream {
    background: #e9e7de
}

.su-intro {
    padding: 8rem 0
}

.su-intro-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 8rem;
    margin-top: 4.5rem
}

.su-intro-statement .su-display {
    margin-top: 1.5rem
}

.su-intro-copy {
    padding-top: 4.5rem
}

.su-big-copy {
    font-family: 'Cormorant Garamond',serif;
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -.025em
}

.su-intro-copy > p:not(.su-big-copy) {
    color: #64655d;
    line-height: 1.8;
    margin-top: 1.5rem
}

.su-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid #1b1c14;
    color: #1b1c14;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .68rem;
    font-weight: 700;
    padding: 1rem 0
}

    .su-pill-link i {
        transition: transform .3s
    }

    .su-pill-link:hover i {
        transform: translate(4px,-4px)
    }

.su-story {
    padding: 9rem 0
}

.su-story-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 8rem;
    align-items: center
}

.su-story-visual {
    height: 650px;
    position: relative;
    overflow: hidden;
    background: #25261e
}

.su-visual-label {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    color: #c9a66a;
    font-family: 'JetBrains Mono',monospace;
    font-size: .6rem;
    z-index: 3
}

.su-visual-circle {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: linear-gradient(145deg,#b9b5a9,#4d4e47);
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

    .su-visual-circle:after {
        content: "";
        position: absolute;
        inset: 12%;
        border: 1px solid rgba(242,240,232,.45);
        border-radius: 50%
    }

.su-visual-panel {
    position: absolute;
    left: 11%;
    bottom: 9%;
    background: #e9e7de;
    padding: 1.6rem;
    width: 62%;
    transform: rotate(-5deg);
    box-shadow: 20px 20px 50px rgba(0,0,0,.2)
}

    .su-visual-panel span {
        font-family: 'JetBrains Mono',monospace;
        font-size: .55rem;
        letter-spacing: .18em
    }

    .su-visual-panel strong {
        display: block;
        font-family: 'Cormorant Garamond',serif;
        font-size: 3.3rem;
        line-height: .8;
        margin: 1rem 0
    }

    .su-visual-panel small {
        font-size: .48rem;
        letter-spacing: .1em
    }

.su-visual-stamp {
    position: absolute;
    right: 7%;
    top: 15%;
    width: 90px;
    height: 90px;
    border: 1px solid #c9a66a;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    color: #c9a66a;
    font-family: 'JetBrains Mono',monospace;
    font-size: .55rem;
    line-height: 1.1
}

    .su-visual-stamp small {
        font-size: .4rem
    }

.su-story-copy .su-display {
    margin: 1.6rem 0 2rem
}

.su-story-copy > p {
    color: #65665d;
    line-height: 1.85
}

.su-stat-line {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 2.5rem 0;
    border-top: 1px solid var(--su-line);
    border-bottom: 1px solid var(--su-line);
    padding: 1.4rem 0
}

    .su-stat-line strong {
        font-family: 'Cormorant Garamond',serif;
        font-size: 4rem;
        font-weight: 500;
        line-height: .7
    }

    .su-stat-line span {
        font-family: 'JetBrains Mono',monospace;
        font-size: .57rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #66675f
    }

.su-services {
    padding: 8rem 0;
    background: #1b1c14;
    color: #f2f0e8
}

.su-services-head {
    display: grid;
    grid-template-columns: 1fr .55fr;
    gap: 4rem;
    align-items: end;
    margin: 3.5rem 0 4rem
}

    .su-services-head .su-display {
        margin-top: 1rem
    }

    .su-services-head p {
        color: #92938a;
        line-height: 1.8
    }

.su-service-stack {
    border-top: 1px solid rgba(242,240,232,.2)
}

.su-service-row {
    display: grid;
    grid-template-columns: 55px 70px 1fr 55px;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(242,240,232,.2);
    color: #f2f0e8;
    transition: padding .4s,background .4s
}

    .su-service-row:hover {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
        background: rgba(242,240,232,.045)
    }

.su-service-number {
    font-family: 'JetBrains Mono',monospace;
    font-size: .6rem;
    color: #77786f
}

.su-service-icon {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(201,166,106,.55);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #c9a66a;
    font-size: 1.1rem
}

.su-service-copy strong {
    display: block;
    font-family: 'Cormorant Garamond',serif;
    font-size: 2.1rem;
    font-weight: 600
}

.su-service-copy small {
    display: block;
    color: #8e8f86;
    margin-top: .2rem;
    font-size: .78rem;
    max-width: 620px
}

.su-service-arrow {
    justify-self: end;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(242,240,232,.25);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: transform .35s,background .35s,color .35s
}

.su-service-row:hover .su-service-arrow {
    transform: rotate(45deg);
    background: #c9a66a;
    color: #1b1c14
}

.su-statement {
    padding: 11rem 0;
    position: relative;
    overflow: hidden
}

.su-statement-word {
    position: absolute;
    white-space: nowrap;
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(8rem,21vw,25rem);
    line-height: .7;
    color: rgba(27,28,20,.035);
    left: -3%;
    top: 45%;
    transform: translateY(-50%);
    pointer-events: none
}

.su-statement-inner {
    max-width: 900px
}

    .su-statement-inner .su-display {
        margin: 1.5rem 0 2rem
    }

    .su-statement-inner > p {
        max-width: 570px;
        color: #66675e;
        line-height: 1.8;
        font-size: 1rem
    }

.su-checks {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    font-family: 'JetBrains Mono',monospace;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .08em
}

    .su-checks span {
        display: inline-flex;
        align-items: center;
        gap: .5rem
    }

    .su-checks i {
        color: #a17e45;
        font-size: 1rem
    }

.su-rates {
    padding: 8rem 0
}

.su-rates-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 7rem;
    align-items: center
}

.su-rates-copy .su-display {
    margin: 1.5rem 0 2rem
}

.su-rates-copy > p {
    color: #6a6b62;
    line-height: 1.8;
    max-width: 500px
}

.su-rate-card {
    background: #1b1c14;
    color: #f2f0e8;
    padding: 1.5rem;
    box-shadow: 20px 25px 70px rgba(27,28,20,.16)
}

.su-rate-top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1rem;
    color: #9b9c92;
    font-family: 'JetBrains Mono',monospace;
    font-size: .55rem;
    letter-spacing: .1em
}

.su-rate-row {
    display: grid;
    grid-template-columns: 1fr auto 45px;
    align-items: end;
    gap: 1rem;
    border-top: 1px solid rgba(242,240,232,.16);
    padding: 1.15rem 0
}

    .su-rate-row span {
        font-family: 'JetBrains Mono',monospace;
        font-size: .6rem;
        text-transform: uppercase;
        color: #9b9c92
    }

    .su-rate-row strong {
        font-family: 'Cormorant Garamond',serif;
        font-size: 3rem;
        font-weight: 500;
        line-height: .7;
        color: #e9e3d3
    }

    .su-rate-row small {
        font-family: 'JetBrains Mono',monospace;
        font-size: .52rem;
        color: #c9a66a
    }

    .su-rate-row.featured {
        background: rgba(201,166,106,.09);
        padding-left: 1rem;
        padding-right: 1rem
    }

        .su-rate-row.featured strong {
            color: #c9a66a
        }

.su-rate-note {
    border-top: 1px solid rgba(242,240,232,.16);
    padding-top: 1rem;
    color: #8f9087;
    font-size: .67rem;
    line-height: 1.7
}

.su-testimonials {
    padding: 8rem 0
}

.su-testimonial-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: 3rem 0
}

.su-slider-controls {
    display: flex;
    gap: .5rem
}

    .su-slider-controls button {
        width: 48px;
        height: 48px;
        border: 1px solid var(--su-line);
        border-radius: 50%;
        background: transparent;
        color: #1b1c14;
        transition: .3s
    }

        .su-slider-controls button:hover {
            background: #1b1c14;
            color: #f2f0e8
        }

.su-testimonial-window {
    overflow: hidden
}

.su-testimonial-track {
    display: flex;
    gap: 1rem;
    transition: transform .7s cubic-bezier(.2,.8,.2,1)
}

.su-testimonial-card {
    flex: 0 0 calc(33.333% - .67rem);
    min-height: 390px;
    padding: 1.6rem;
    background: #e9e7de;
    border: 1px solid rgba(27,28,20,.08);
    display: flex;
    flex-direction: column;
    position: relative
}

    .su-testimonial-card > span {
        font-family: 'JetBrains Mono',monospace;
        font-size: .58rem;
        color: #8b8b82
    }

    .su-testimonial-card > i {
        font-size: 2.2rem;
        margin-top: auto;
        color: #b18c52
    }

    .su-testimonial-card p {
        font-family: 'Cormorant Garamond',serif;
        font-size: 1.9rem;
        line-height: .98;
        letter-spacing: -.02em;
        margin: 1rem 0 2rem
    }

    .su-testimonial-card strong {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em
    }

    .su-testimonial-card small {
        color: #818178;
        margin-top: .25rem
    }

.su-notices {
    padding: 8rem 0
}

.su-notices-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: 3rem 0
}

.su-notice-list {
    border-top: 1px solid var(--su-line)
}

.su-notice {
    display: grid;
    grid-template-columns: 110px 1fr 130px 30px;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--su-line);
    color: #1b1c14;
    transition: padding .35s,background .35s
}

    .su-notice:hover {
        padding-left: 1rem;
        padding-right: 1rem;
        background: rgba(255,255,255,.45)
    }

    .su-notice-tag, .su-notice time {
        font-family: 'JetBrains Mono',monospace;
        font-size: .55rem;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: #77786f
    }

    .su-notice strong {
        font-family: 'Cormorant Garamond',serif;
        font-size: 1.55rem;
        font-weight: 600
    }

    .su-notice > i {
        justify-self: end
    }

.su-empty-notice {
    padding: 2rem 0;
    color: #77786f;
    font-family: 'JetBrains Mono',monospace;
    font-size: .65rem;
    text-transform: uppercase
}

.su-final {
    position: relative;
    min-height: 85vh;
    display: grid;
    place-items: center;
    background: #1b1c14;
    color: #f2f0e8;
    text-align: center;
    overflow: hidden
}

.su-final-inner {
    max-width: 850px;
    padding: 7rem 0
}

    .su-final-inner .su-display {
        margin: 1.5rem 0
    }

    .su-final-inner > p {
        max-width: 480px;
        margin: 0 auto;
        color: #9c9d94;
        line-height: 1.8
    }

.su-final-word {
    position: absolute;
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(12rem,32vw,35rem);
    line-height: .65;
    color: rgba(242,240,232,.035);
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.su-final-ring {
    position: absolute;
    width: 540px;
    height: 540px;
    border: 1px solid rgba(201,166,106,.2);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    animation: suPulseRing 7s ease-in-out infinite
}

    .su-final-ring:after {
        content: "";
        position: absolute;
        inset: 35px;
        border: 1px solid rgba(201,166,106,.13);
        border-radius: 50%
    }

.su-home .reveal, .su-home .reveal-stagger {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)
}

    .su-home .reveal.is-visible, .su-home .reveal-stagger.is-visible {
        opacity: 1;
        transform: none
    }

    .su-home .reveal-stagger > * {
        opacity: 0;
        transform: translateY(25px);
        transition: opacity .7s,transform .7s
    }

    .su-home .reveal-stagger.is-visible > * {
        opacity: 1;
        transform: none
    }

        .su-home .reveal-stagger.is-visible > *:nth-child(2) {
            transition-delay: .08s
        }

        .su-home .reveal-stagger.is-visible > *:nth-child(3) {
            transition-delay: .16s
        }

        .su-home .reveal-stagger.is-visible > *:nth-child(4) {
            transition-delay: .24s
        }

        .su-home .reveal-stagger.is-visible > *:nth-child(5) {
            transition-delay: .32s
        }

@keyframes suFloat {
    0%,100% {
        translate: 0 0
    }

    50% {
        translate: 0 -14px
    }
}

@keyframes suSpin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes suPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(201,166,106,.6)
    }

    70% {
        box-shadow: 0 0 0 9px rgba(201,166,106,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(201,166,106,0)
    }
}

@keyframes suSlide {
    to {
        left: 120%
    }
}

@keyframes suMarquee {
    to {
        transform: translateX(-50%)
    }
}

@keyframes suPulseRing {
    0%,100% {
        transform: translate(-50%,-50%) scale(.95);
        opacity: .6
    }

    50% {
        transform: translate(-50%,-50%) scale(1.05);
        opacity: 1
    }
}

@media (pointer:fine) {
    .su-home .magnetic-card, .su-home .magnetic {
        will-change: transform
    }
}

@media (max-width:991px) {
    .su-hero {
        min-height: auto
    }

    .su-hero-grid, .su-intro-grid, .su-story-grid, .su-services-head, .su-rates-grid {
        grid-template-columns: 1fr;
        gap: 3rem
    }

    .su-hero-grid {
        padding-top: 3rem
    }

    .su-hero-art {
        min-height: 500px
    }

    .su-intro-copy {
        padding-top: 0
    }

    .su-story-visual {
        height: 560px
    }

    .su-testimonial-card {
        flex-basis: calc(50% - .5rem)
    }

    .su-services-head {
        margin-bottom: 2.5rem
    }

    .su-notice {
        grid-template-columns: 90px 1fr 30px
    }

        .su-notice time {
            display: none
        }
}

@media (max-width:767px) {
    .su-home .su-cursor {
        display: none
    }

    .su-hero-inner {
        padding-top: 2rem
    }

    .su-hero-grid {
        padding: 3.5rem 0 1rem
    }

    .su-hero-title {
        font-size: clamp(4rem,17vw,6.4rem)
    }

    .su-hero-art {
        min-height: 410px;
        margin-top: -1rem
    }

    .su-art-card-main {
        width: 58%;
    }

    .su-art-card-float {
        width: 145px;
        right: 0;
        top: 15%
    }

        .su-art-card-float strong {
            font-size: 1.8rem
        }

    .su-art-seal {
        width: 80px;
        height: 80px;
        left: 0
    }

        .su-art-seal span {
            font-size: .36rem
        }

    .su-display {
        font-size: clamp(3.2rem,14vw,5rem)
    }

    .su-intro, .su-story, .su-services, .su-rates, .su-testimonials, .su-notices {
        padding: 6rem 0
    }

    .su-intro-grid {
        margin-top: 3rem
    }

    .su-story-visual {
        height: 450px
    }

    .su-visual-circle {
        width: 340px;
        height: 340px
    }

    .su-visual-panel {
        width: 75%;
        padding: 1.1rem
    }

        .su-visual-panel strong {
            font-size: 2.6rem
        }

    .su-service-row {
        grid-template-columns: 38px 52px 1fr 42px;
        gap: .7rem
    }

    .su-service-copy strong {
        font-size: 1.55rem
    }

    .su-service-copy small {
        font-size: .7rem
    }

    .su-service-icon {
        width: 45px;
        height: 45px
    }

    .su-testimonial-head, .su-notices-head {
        align-items: start;
        gap: 2rem;
        flex-direction: column
    }

    .su-testimonial-card {
        flex-basis: 88%;
        min-height: 350px
    }

    .su-notice {
        grid-template-columns: 1fr 30px
    }

    .su-notice-tag {
        grid-column: 1
    }

    .su-notice strong {
        grid-column: 1;
        font-size: 1.35rem
    }

    .su-notice > i {
        grid-column: 2;
        grid-row: 1/3
    }

    .su-final {
        min-height: 75vh
    }

    .su-final-inner {
        padding: 6rem 1rem
    }

    .su-final-ring {
        width: 360px;
        height: 360px
    }
}

@media (prefers-reduced-motion:reduce) {
    .su-home *, .su-home *:before, .su-home *:after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important
    }

    .su-home .reveal, .su-home .reveal-stagger, .su-home .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important
    }

    .su-home .su-cursor {
        display: none
    }
}

/* Homepage shell: turn the existing shared header/footer into part of the art direction. */
body:has(.su-home) {
    background: #1b1c14
}

    body:has(.su-home) .topbar {
        display: none
    }

    body:has(.su-home) .site-header {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 40;
        background: transparent;
        border-bottom: 1px solid rgba(242,240,232,.16)
    }

        body:has(.su-home) .site-header .navbar {
            min-height: 76px
        }

        body:has(.su-home) .site-header .brand-text strong {
            color: #f2f0e8
        }

        body:has(.su-home) .site-header .brand-text small {
            color: #c9a66a
        }

        body:has(.su-home) .site-header .brand-logo {
            border: 1px solid rgba(242,240,232,.35)
        }

        body:has(.su-home) .site-header .nav-link {
            color: #d8d7ce !important;
            font-size: .76rem;
            text-transform: uppercase;
            letter-spacing: .04em
        }

            body:has(.su-home) .site-header .nav-link:hover {
                color: #c9a66a !important
            }

        body:has(.su-home) .site-header .dropdown-menu {
            background: #25261e;
            border: 1px solid rgba(242,240,232,.12)
        }

        body:has(.su-home) .site-header .dropdown-item {
            color: #dddcd3
        }

            body:has(.su-home) .site-header .dropdown-item:hover {
                background: #303129;
                color: #c9a66a
            }

        body:has(.su-home) .site-header .navbar-toggler {
            border-color: rgba(242,240,232,.35)
        }

        body:has(.su-home) .site-header .navbar-toggler-icon {
            filter: invert(1) opacity(.8)
        }

        body:has(.su-home) .site-header .btn-cta {
            background: #f2f0e8;
            color: #1b1c14 !important;
            border-color: #f2f0e8;
            border-radius: 999px;
            padding: .65rem 1.2rem;
            font-size: .68rem;
            text-transform: uppercase;
            letter-spacing: .06em
        }

            body:has(.su-home) .site-header .btn-cta:hover {
                background: #c9a66a;
                border-color: #c9a66a
            }

    body:has(.su-home) .site-footer {
        background: #1b1c14;
        border-top: 1px solid rgba(242,240,232,.16);
        color: #f2f0e8
    }

        body:has(.su-home) .site-footer .footer-nav-row {
            border-bottom-color: rgba(242,240,232,.16)
        }

        body:has(.su-home) .site-footer .footer-heading {
            color: #c9a66a
        }

        body:has(.su-home) .site-footer .footer-links a, body:has(.su-home) .site-footer .footer-muted {
            color: #96978e
        }

            body:has(.su-home) .site-footer .footer-links a:hover {
                color: #f2f0e8
            }

@media(max-width:991px) {
    body:has(.su-home) .site-header .navbar-collapse {
        background: #1b1c14;
        margin: 0 -1rem;
        padding: 1rem;
        border-bottom: 1px solid rgba(242,240,232,.15)
    }
}


/* =========================================================
   SHAHU URBAN BRAND LAYER — logo-led colour + photography
   ========================================================= */
:root {
    --color-maroon: #A62D32;
    --color-maroon-dark: #7F2026;
    --color-gold: #FFD140;
    --color-gold-light: #FFE27A;
    --color-ivory: #FFF8EF;
    --color-ink: #241D1A;
    --color-sage: #6D594B;
    --color-rose: #F8E5D9;
    --su-maroon: #A62D32;
    --su-orange: #F05B23;
    --su-yellow: #FFD140;
    --su-magenta: #EC008C;
    --su-paper: #FFF8EF;
    --su-ink: #241D1A;
}

.brand-logo {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 8px 22px rgba(127,32,38,.18);
}

.site-header {
    background: rgba(255,248,239,.94);
    border-bottom-color: rgba(166,45,50,.16);
}

.nav-link:hover {
    color: var(--su-maroon) !important;
}

.btn-cta {
    background: var(--su-maroon);
    border-color: var(--su-maroon);
}

    .btn-cta:hover {
        background: var(--color-maroon-dark);
    }

/* Hero photo + real logo */
.su-hero-art {
    min-height: 620px;
}

.su-art-backdrop {
    background: radial-gradient(circle at 35% 30%, #FFD140 0%, #F05B23 38%, #A62D32 72%, #6E1D23 100%);
    width: 82%;
    box-shadow: 0 35px 90px rgba(0,0,0,.28);
}

.su-hero-photo-main {
    position: absolute;
    width: min(320px,62%);
    aspect-ratio: 4/5;
    right: 8%;
    top: 11%;
    overflow: hidden;
    border: 8px solid rgba(255,248,239,.9);
    border-radius: 48% 48% 18% 18%;
    transform: rotate(5deg);
    box-shadow: 0 30px 65px rgba(0,0,0,.32);
    z-index: 2;
}

    .su-hero-photo-main img, .su-story-photo img, .su-service-feature-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.su-logo-orbit {
    position: absolute;
    z-index: 4;
    left: 4%;
    bottom: 8%;
    width: 155px;
    height: 155px;
    padding: 8px;
    border-radius: 50%;
    background: var(--su-yellow);
    box-shadow: 0 20px 45px rgba(0,0,0,.28);
    animation: suFloat 5s ease-in-out infinite;
}

    .su-logo-orbit::before {
        content: "";
        position: absolute;
        inset: -10px;
        border: 1px solid rgba(255,248,239,.7);
        border-radius: 50%;
    }

    .su-logo-orbit img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

.su-art-card-float {
    border-top: 4px solid var(--su-orange);
}

    .su-art-card-float strong em {
        color: var(--su-maroon);
    }

.su-art-seal {
    border-color: rgba(255,209,64,.6);
    color: var(--su-yellow);
}

.su-pulse {
    background: var(--su-orange);
    box-shadow: 0 0 0 0 rgba(240,91,35,.7);
}

.su-scroll-line span {
    background: var(--su-orange);
}

.su-hero-title em {
    color: var(--su-yellow);
}

.su-btn-light:hover {
    background: var(--su-yellow);
}

.su-btn-dark:hover {
    background: var(--su-orange);
    color: #fff;
}

/* Story photography */
.su-story-visual {
    background: var(--su-maroon);
}

.su-visual-circle {
    background: linear-gradient(145deg,#F05B23,#7F2026);
    opacity: .92;
}

.su-story-photo {
    position: absolute;
    width: 62%;
    height: 55%;
    right: 6%;
    top: 14%;
    z-index: 2;
    overflow: hidden;
    border: 7px solid var(--su-paper);
    border-radius: 8px 70px 8px 70px;
    transform: rotate(4deg);
    box-shadow: 0 25px 55px rgba(0,0,0,.28);
}

    .su-story-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(166,45,50,.05), rgba(166,45,50,.38));
        pointer-events: none;
    }

.su-visual-panel {
    z-index: 3;
    border-left: 5px solid var(--su-yellow);
}

.su-visual-stamp {
    color: var(--su-yellow);
    border-color: var(--su-yellow);
}

.su-stat-line strong {
    color: var(--su-maroon);
}

/* Service feature image */
.su-service-feature-image {
    position: relative;
    height: 330px;
    margin: 0 0 4rem;
    overflow: hidden;
    border-radius: 2px 90px 2px 90px;
    border: 1px solid rgba(255,248,239,.14);
    box-shadow: 0 30px 70px rgba(0,0,0,.22);
}

    .su-service-feature-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(36,29,26,.86), rgba(166,45,50,.20) 65%, rgba(240,91,35,.35));
    }

    .su-service-feature-image > div {
        position: absolute;
        z-index: 2;
        left: 2rem;
        bottom: 2rem;
        max-width: 520px;
    }

    .su-service-feature-image span {
        display: block;
        color: var(--su-yellow);
        font-family: 'JetBrains Mono',monospace;
        font-size: .6rem;
        letter-spacing: .14em;
    }

    .su-service-feature-image strong {
        display: block;
        color: #fff;
        font-family: 'Cormorant Garamond',serif;
        font-size: clamp(2.2rem,4vw,4rem);
        line-height: .95;
        margin-top: .7rem;
    }

/* Logo-driven accents across the editorial sections */
.su-section-meta span:first-child {
    color: var(--su-orange);
}

.su-kicker.dark {
    color: var(--su-maroon);
}

.su-pill-link {
    border-bottom-color: var(--su-maroon);
}

    .su-pill-link:hover {
        color: var(--su-maroon);
    }

.su-service-icon {
    color: var(--su-yellow);
    border-color: rgba(255,209,64,.6);
}

.su-service-row:hover .su-service-arrow {
    background: var(--su-orange);
    color: #fff;
}

.su-checks i {
    color: var(--su-orange);
}

.su-rate-row.featured {
    background: linear-gradient(90deg,var(--su-maroon),var(--su-orange));
}

.su-rate-row strong {
    color: var(--su-yellow);
}

.su-notice-tag {
    background: var(--su-maroon);
}

.su-final {
    background: linear-gradient(135deg,#7F2026 0%,#A62D32 45%,#F05B23 100%);
}

.su-final-ring {
    border-color: rgba(255,209,64,.24);
}

@media (max-width: 991px) {
    .su-hero-art {
        min-height: 500px;
        margin-top: 1rem;
    }

    .su-hero-photo-main {
        right: 12%;
        width: 48%;
    }

    .su-logo-orbit {
        width: 120px;
        height: 120px;
        left: 4%;
        bottom: 5%;
    }

    .su-story-photo {
        width: 66%;
        height: 52%;
    }
}

@media (max-width: 575px) {
    .brand-logo {
        width: 48px;
        height: 48px;
    }

    .su-hero-art {
        min-height: 430px;
    }

    .su-hero-photo-main {
        width: 55%;
        right: 7%;
        top: 12%;
    }

    .su-logo-orbit {
        width: 92px;
        height: 92px;
        left: 2%;
        bottom: 7%;
    }

    .su-art-card-float {
        width: 145px;
        right: 0;
        top: 50%;
    }

    .su-service-feature-image {
        height: 260px;
        border-radius: 2px 50px 2px 50px;
    }

        .su-service-feature-image > div {
            left: 1.2rem;
            bottom: 1.2rem;
        }

    .su-story-photo {
        width: 68%;
        height: 45%;
        right: 4%;
    }
}

/* =========================================================
   SHAHU URBAN — CINEMATIC SIDE NAVIGATION
   Inspired by the supplied Johnston reference:
   compact pill trigger + full-height editorial drawer.
========================================================= */
body:has(.su-home) .site-header {
    position: absolute !important;
    inset: 0 0 auto 0;
    width: 100%;
    z-index: 1200;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.su-nav-shell {
    min-height: 92px;
    padding: 18px clamp(20px, 5vw, 78px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.su-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: #fff;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

.su-nav-logo-wrap {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f4eee2;
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 8px 30px rgba(0,0,0,.22);
}

.su-nav-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.su-nav-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

    .su-nav-wordmark strong {
        font-family: "Work Sans", sans-serif;
        font-size: 1.02rem;
        font-weight: 700;
        letter-spacing: -.045em;
    }

        .su-nav-wordmark strong em {
            color: #ffd140;
            font-style: normal;
        }

    .su-nav-wordmark small {
        margin-top: 6px;
        color: rgba(255,255,255,.62);
        font-family: "JetBrains Mono", monospace;
        font-size: .48rem;
        letter-spacing: .09em;
    }

.su-menu-trigger,
.su-menu-close {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.09);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    font-family: "JetBrains Mono", monospace;
    font-size: .63rem;
    font-weight: 600;
    letter-spacing: .08em;
    transition: .35s ease;
}

.su-menu-trigger {
    padding: 6px 7px 6px 16px;
    position: relative;
    z-index: 1250;
}

    .su-menu-trigger:hover,
    .su-menu-close:hover {
        background: #fff;
        color: #1b1a14;
        border-color: #fff;
        transform: translateY(-2px);
    }

.su-menu-icon,
.su-menu-close b {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f4f1e8;
    color: #1b1a14;
    display: grid;
    place-items: center;
}

.su-menu-icon {
    position: relative;
}

    .su-menu-icon i {
        position: absolute;
        width: 15px;
        height: 1px;
        background: currentColor;
        transition: transform .35s ease;
    }

        .su-menu-icon i:first-child {
            transform: translateY(-3px);
        }

        .su-menu-icon i:last-child {
            transform: translateY(3px);
        }

body.su-menu-open .su-menu-icon i:first-child {
    transform: rotate(45deg);
}

body.su-menu-open .su-menu-icon i:last-child {
    transform: rotate(-45deg);
}

.su-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(10,9,7,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .55s cubic-bezier(.77,0,.18,1);
}

.su-menu-panel {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: min(660px, calc(100vw - 24px));
    z-index: 1150;
    overflow: hidden;
    color: #f7f3e9;
    background: #a62d32;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 30px;
    box-shadow: -30px 35px 100px rgba(0,0,0,.35);
    transform: translateX(calc(100% + 40px));
    transition: transform .7s cubic-bezier(.77,0,.18,1);
}

    .su-menu-panel::before {
        content: "SHAHU";
        position: absolute;
        right: -35px;
        bottom: -100px;
        font-family: "Cormorant Garamond", serif;
        font-size: 17rem;
        line-height: .7;
        font-weight: 700;
        color: rgba(255,255,255,.055);
        pointer-events: none;
    }

body.su-menu-open {
    overflow: hidden;
}

    body.su-menu-open .su-menu-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    body.su-menu-open .su-menu-panel {
        transform: translateX(0);
    }

.su-menu-panel-top {
    min-height: 80px;
    padding: 20px 24px 12px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.su-menu-overline,
.su-menu-contact-card small,
.su-menu-meta,
.su-menu-service-strip a {
    font-family: "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.su-menu-overline {
    font-size: .55rem;
    color: rgba(255,255,255,.62);
}

.su-menu-close {
    padding: 5px 6px 5px 15px;
    background: rgba(0,0,0,.14);
}

    .su-menu-close b {
        font-family: "Work Sans", sans-serif;
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1;
    }

.su-menu-content {
    height: calc(100% - 80px);
    padding: 10px clamp(30px, 6vw, 70px) 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.su-menu-links {
    display: flex;
    flex-direction: column;
}

    .su-menu-links a {
        color: #fff;
        text-decoration: none;
        display: flex;
        align-items: flex-start;
        gap: 9px;
        width: max-content;
        max-width: 100%;
        position: relative;
        font-family: "Work Sans", sans-serif;
        font-size: clamp(2.9rem, 5vw, 5.1rem);
        line-height: .95;
        letter-spacing: -.065em;
        font-weight: 400;
        transition: color .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
    }

        .su-menu-links a::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -5px;
            height: 1px;
            background: #ffd140;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .45s ease;
        }

        .su-menu-links a:hover {
            color: #ffd140;
            transform: translateX(10px);
        }

            .su-menu-links a:hover::after {
                transform: scaleX(1);
            }

    .su-menu-links small {
        color: rgba(255,255,255,.48);
        font-family: "JetBrains Mono", monospace;
        font-size: .54rem;
        letter-spacing: .02em;
        transform: translateY(5px);
    }

.su-menu-service-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 22px;
}

    .su-menu-service-strip a {
        color: rgba(255,255,255,.72);
        text-decoration: none;
        font-size: .53rem;
        border: 1px solid rgba(255,255,255,.2);
        padding: 9px 12px;
        border-radius: 999px;
        transition: .3s ease;
    }

        .su-menu-service-strip a:hover {
            background: #ffd140;
            border-color: #ffd140;
            color: #7d2227;
        }

.su-menu-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(160px, .8fr);
    gap: 20px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.17);
}

.su-menu-contact-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 18px;
    color: #211714;
    background: #ffd140;
    text-decoration: none;
    transition: transform .35s ease;
}

    .su-menu-contact-card:hover {
        color: #211714;
        transform: translateY(-3px);
    }

.su-menu-contact-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.4);
    font-size: 1.25rem;
}

.su-menu-contact-card small {
    display: block;
    font-size: .47rem;
    opacity: .62;
}

.su-menu-contact-card strong {
    display: block;
    margin-top: 4px;
    font-family: "Work Sans", sans-serif;
    font-size: .76rem;
    overflow-wrap: anywhere;
}

.su-menu-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    color: rgba(255,255,255,.58);
    font-size: .47rem;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .su-nav-shell {
        min-height: 78px;
        padding: 12px 16px;
    }

    .su-nav-logo-wrap {
        width: 46px;
        height: 46px;
    }

    .su-nav-wordmark strong {
        font-size: .86rem;
    }

    .su-nav-wordmark small {
        font-size: .4rem;
    }

    .su-menu-trigger {
        padding-left: 12px;
        font-size: .55rem;
    }

    .su-menu-icon, .su-menu-close b {
        width: 34px;
        height: 34px;
    }

    .su-menu-panel {
        top: 7px;
        right: 7px;
        bottom: 7px;
        width: calc(100vw - 14px);
        border-radius: 22px;
    }

    .su-menu-panel-top {
        min-height: 68px;
        padding: 14px 16px 8px 20px;
    }

    .su-menu-content {
        height: calc(100% - 68px);
        padding: 8px 22px 22px;
        overflow-y: auto;
    }

    .su-menu-links a {
        font-size: clamp(2.45rem, 13vw, 4rem);
    }

    .su-menu-bottom {
        grid-template-columns: 1fr;
    }

    .su-menu-meta {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .su-menu-panel, .su-menu-overlay, .su-menu-links a, .su-menu-trigger {
        transition: none !important;
    }
}


/* ===== Cinematic hero video + enhanced motion ===== */
.su-hero-video {
    isolation: isolate;
    min-height: min(900px, calc(100svh - 74px));
    display: flex;
    align-items: center;
    background: #160b0d;
}

.su-hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: -5;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.88) contrast(1.08) brightness(.72);
    transform: scale(1.035);
    animation: heroVideoBreath 14s ease-in-out infinite alternate;
}

.su-hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: -4;
    background: radial-gradient(circle at 72% 44%, rgba(255,209,64,.16), transparent 30%), linear-gradient(90deg, rgba(24,8,10,.92) 0%, rgba(24,8,10,.72) 42%, rgba(24,8,10,.28) 100%), linear-gradient(180deg, rgba(7,3,4,.52) 0%, transparent 38%, rgba(7,3,4,.7) 100%);
}

.su-hero-video::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0, rgba(255,255,255,.022) 1px, transparent 1px, transparent 5px);
    mix-blend-mode: soft-light;
    opacity: .5;
}

.su-hero-video .su-hero-inner {
    z-index: 2;
}

.su-hero-video .su-hero-title,
.su-hero-video .su-hero-lead,
.su-hero-video .su-kicker,
.su-hero-video .su-hero-index,
.su-hero-video .su-hero-foot,
.su-hero-video .su-wordmark {
    color: #fff;
}

    .su-hero-video .su-wordmark span {
        color: #ffd140;
    }

.su-hero-video .su-hero-lead {
    color: rgba(255,255,255,.78);
}

.su-hero-video .su-hero-art {
    transform: translate3d(0,0,0);
    transition: transform 1s cubic-bezier(.2,.8,.2,1);
}

.su-hero-video .su-art-backdrop {
    background: rgba(255,209,64,.12);
    border-color: rgba(255,255,255,.25);
    backdrop-filter: blur(10px);
}

.su-hero-video .su-hero-photo-main {
    box-shadow: 0 35px 100px rgba(0,0,0,.38);
}

.su-hero-floating-note {
    position: absolute;
    right: 3vw;
    bottom: 13%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(20,8,9,.28);
    color: rgba(255,255,255,.72);
    backdrop-filter: blur(12px);
    font-family: var(--font-mono);
    font-size: .54rem;
    letter-spacing: .12em;
    animation: floatNote 4s ease-in-out infinite;
}

    .su-hero-floating-note span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ffd140;
        box-shadow: 0 0 0 0 rgba(255,209,64,.65);
        animation: livePulse 2s infinite;
    }

.su-hero .reveal {
    transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}

.su-hero .su-hero-top {
    transition-delay: .05s;
}

.su-hero .su-wordmark {
    transition-delay: .12s;
}

.su-hero .su-hero-title {
    transition-delay: .2s;
}

.su-hero .su-hero-lead {
    transition-delay: .34s;
}

.su-hero .su-actions {
    transition-delay: .46s;
}

.su-hero .su-hero-art {
    transition-delay: .24s;
}

.su-hero .su-hero-foot {
    transition-delay: .58s;
}

@keyframes heroVideoBreath {
    from {
        transform: scale(1.035);
    }

    to {
        transform: scale(1.09);
    }
}

@keyframes floatNote {
    0%,100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-12px) rotate(1deg);
    }
}

@keyframes livePulse {
    70% {
        box-shadow: 0 0 0 8px rgba(255,209,64,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255,209,64,0);
    }
}

/* More cinematic hover motion */
.su-btn, .su-text-link, .su-pill-link, .su-service-row, .su-menu-trigger {
    will-change: transform;
}

.su-btn {
    overflow: hidden;
    position: relative;
}

    .su-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-105%) skewX(-15deg);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
        transition: transform .7s ease;
    }

    .su-btn:hover::before {
        transform: translateX(105%) skewX(-15deg);
    }

.su-service-row {
    position: relative;
    overflow: hidden;
}

    .su-service-row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: #ffd140;
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform .45s cubic-bezier(.2,.8,.2,1);
    }

    .su-service-row:hover::before {
        transform: scaleY(1);
    }

@media (max-width: 991px) {
    .su-hero-video {
        min-height: 820px;
    }

    .su-hero-video-bg {
        object-position: 58% center;
    }

    .su-hero-floating-note {
        right: 6vw;
        bottom: 10%;
    }
}

@media (max-width: 767px) {
    .su-hero-video {
        min-height: 780px;
    }

    .su-hero-video-overlay {
        background: linear-gradient(180deg, rgba(24,8,10,.82), rgba(24,8,10,.56) 50%, rgba(7,3,4,.9));
    }

    .su-hero-video-bg {
        object-position: 62% center;
        animation-duration: 18s;
    }

    .su-hero-floating-note {
        right: 16px;
        bottom: 84px;
        font-size: .45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .su-hero-video-bg, .su-hero-floating-note, .su-hero-floating-note span {
        animation: none !important;
    }
}


/* =========================================================
   HERO CLEANUP — VIDEO-ONLY HERO
   The decorative photo/logo orbit artwork has been removed.
   The supplied hero video is now the sole visual focus.
========================================================= */
.su-hero-video .su-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 980px;
    margin-inline: auto;
    min-height: min(68vh, 720px);
    align-items: center;
}

.su-hero-video .su-hero-copy {
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

.su-hero-video .su-wordmark {
    display: inline-block;
}

.su-hero-video .su-hero-lead {
    margin-inline: auto;
    max-width: 650px;
}

.su-hero-video .su-actions {
    justify-content: center;
}

.su-hero-video .su-hero-top {
    position: relative;
    z-index: 3;
}

.su-hero-video .su-hero-foot {
    justify-content: center;
}

@media (max-width: 767px) {
    .su-hero-video .su-hero-grid {
        min-height: 68vh;
        padding: 3rem 0 1rem;
    }

    .su-hero-video .su-hero-title {
        font-size: clamp(3.5rem, 16vw, 5.8rem);
    }

    .su-hero-video .su-hero-lead {
        font-size: .9rem;
    }
}

/* =========================================================
   CINEMATIC INTRO — THE DIFFERENCE
   ========================================================= */
.su-intro-cinematic {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 900px;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 78% 24%, rgba(166,45,50,.08), transparent 25%), radial-gradient(circle at 16% 82%, rgba(240,91,35,.06), transparent 28%), #f6f3eb;
}

    .su-intro-cinematic::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 0 42%, rgba(166,45,50,.035) 42.2%, transparent 42.5%);
        pointer-events: none;
        z-index: -1;
    }

.su-intro-glow {
    position: absolute;
    width: 42vw;
    height: 42vw;
    max-width: 680px;
    max-height: 680px;
    right: -12vw;
    top: 7%;
    border: 1px solid rgba(166,45,50,.14);
    border-radius: 50%;
    transform: scale(.78);
    transition: transform 1.5s cubic-bezier(.16,1,.3,1), opacity 1.5s ease;
    opacity: .5;
    z-index: -1;
}

    .su-intro-glow::before,
    .su-intro-glow::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        inset: 11%;
        border: 1px solid rgba(240,91,35,.13);
    }

    .su-intro-glow::after {
        inset: 23%;
        border-color: rgba(255,209,64,.18);
    }

.su-intro-cinematic.is-visible .su-intro-glow,
.su-intro-cinematic:has(.is-visible) .su-intro-glow {
    transform: scale(1);
    opacity: 1;
}

.su-intro-grid-lines {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: linear-gradient(rgba(35,32,26,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(35,32,26,.06) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
    pointer-events: none;
}

.su-intro-container {
    position: relative;
    width: 100%;
}

.su-intro-meta {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 18px;
}

    .su-intro-meta .su-meta-line {
        height: 1px;
        background: linear-gradient(90deg, rgba(35,32,26,.28), transparent);
        transform-origin: left;
        transform: scaleX(0);
        transition: transform 1s cubic-bezier(.16,1,.3,1) .2s;
    }

    .su-intro-meta.is-visible .su-meta-line {
        transform: scaleX(1);
    }

.su-intro-grid {
    position: relative;
    z-index: 2;
}

.su-intro-statement {
    position: relative;
    padding-right: 4vw;
}

.su-intro-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

    .su-intro-kicker i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #f05b23;
        box-shadow: 0 0 0 0 rgba(240,91,35,.3);
        animation: suIntroPulse 2.2s infinite;
    }

@keyframes suIntroPulse {
    50% {
        box-shadow: 0 0 0 9px rgba(240,91,35,0);
    }
}

.su-intro-title {
    max-width: 780px;
    margin-top: 28px;
    text-wrap: balance;
}

    .su-intro-title em {
        position: relative;
        display: inline-block;
    }

        .su-intro-title em::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: .08em;
            height: 2px;
            background: #a62d32;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 1.2s cubic-bezier(.16,1,.3,1) .7s;
        }

.su-intro-statement.is-visible .su-intro-title em::after {
    transform: scaleX(1);
}

.su-intro-number {
    position: absolute;
    right: 0;
    top: 9%;
    font: 600 clamp(5rem, 12vw, 11rem)/1 Georgia, serif;
    color: rgba(166,45,50,.045);
    transform: translateY(30px);
    transition: transform 1.4s cubic-bezier(.16,1,.3,1), opacity 1s ease;
    opacity: 0;
    pointer-events: none;
}

.su-intro-statement.is-visible .su-intro-number {
    transform: translateY(0);
    opacity: 1;
}

.su-intro-copy {
    position: relative;
    padding-top: 6.5rem;
    max-width: 560px;
}

.su-intro-copy-mark {
    display: flex;
    gap: 7px;
    margin-bottom: 25px;
}

    .su-intro-copy-mark span {
        display: block;
        width: 24px;
        height: 3px;
        background: #a62d32;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .65s cubic-bezier(.16,1,.3,1);
    }

        .su-intro-copy-mark span:nth-child(2) {
            background: #f05b23;
            transition-delay: .12s;
            width: 15px;
        }

        .su-intro-copy-mark span:nth-child(3) {
            background: #ffd140;
            transition-delay: .24s;
            width: 8px;
        }

.su-intro-copy.is-visible .su-intro-copy-mark span {
    transform: scaleX(1);
}

.su-intro-copy .su-big-copy {
    font-size: clamp(1.6rem, 2.5vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.su-intro-copy > p:not(.su-big-copy) {
    max-width: 490px;
}

.su-intro-link {
    margin-top: 25px;
    position: relative;
    overflow: hidden;
}

    .su-intro-link::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #a62d32;
        transform: translateX(-105%);
        transition: transform .5s cubic-bezier(.16,1,.3,1);
        z-index: -1;
    }

    .su-intro-link:hover {
        color: #fff;
        border-color: #a62d32;
    }

        .su-intro-link:hover::before {
            transform: translateX(0);
        }

    .su-intro-link i {
        transition: transform .4s ease;
    }

    .su-intro-link:hover i {
        transform: translate(4px,-4px);
    }

.su-intro-footnote {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 58px;
    font-size: .56rem;
    letter-spacing: .18em;
    font-weight: 700;
    color: rgba(35,32,26,.5);
}

    .su-intro-footnote b {
        color: #f05b23;
    }

.su-intro-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(35,32,26,.08);
    overflow: hidden;
}

    .su-intro-progress span {
        display: block;
        height: 100%;
        width: 0;
        background: linear-gradient(90deg, #a62d32, #f05b23, #ffd140);
        transition: width 1.8s cubic-bezier(.16,1,.3,1) .3s;
    }

.su-intro-cinematic.is-active .su-intro-progress span {
    width: 100%;
}

/* Replace the generic reveal motion inside this section with a more editorial entrance. */
.su-intro-cinematic .reveal {
    transform: translateY(70px);
    opacity: 0;
    filter: blur(8px);
    transition: opacity 1s ease, transform 1.05s cubic-bezier(.16,1,.3,1), filter 1s ease;
}

.su-intro-cinematic .intro-copy-animate {
    transition-delay: .16s;
}

.su-intro-cinematic .reveal.is-visible {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
}

@media (max-width: 991px) {
    .su-intro-cinematic {
        min-height: 820px;
    }

    .su-intro-number {
        right: 2%;
        top: 0;
    }

    .su-intro-copy {
        padding-top: 2rem;
    }
}

@media (max-width: 767px) {
    .su-intro-cinematic {
        min-height: auto;
        padding: 100px 0 80px;
    }

    .su-intro-grid-lines {
        background-size: 45px 45px;
    }

    .su-intro-glow {
        width: 100vw;
        height: 100vw;
        right: -55vw;
        top: 28%;
    }

    .su-intro-meta {
        gap: 9px;
        font-size: .48rem;
    }

    .su-intro-title {
        margin-top: 20px;
    }

    .su-intro-number {
        top: -5%;
        right: -2%;
        font-size: 7rem;
    }

    .su-intro-copy {
        padding-top: 1.5rem;
    }

        .su-intro-copy .su-big-copy {
            font-size: 1.45rem;
        }

    .su-intro-footnote {
        margin-top: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .su-intro-cinematic *, .su-intro-cinematic::before {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .su-intro-cinematic .reveal {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .su-intro-progress span {
        width: 100%;
    }
}

/* =========================================================
   SHAHU URBAN — OUR ORIGIN / CINEMATIC STORY MOTION
   Scroll choreography: image parallax + rotating orbit +
   editorial text reveal + progressive reading line.
========================================================= */
.su-story {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    .su-story::before {
        content: "03";
        position: absolute;
        top: 4rem;
        right: -2rem;
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(10rem, 22vw, 24rem);
        line-height: .7;
        font-weight: 500;
        color: rgba(166,45,50,.045);
        pointer-events: none;
        z-index: -1;
        transform: translateY(var(--story-watermark, 0px));
        transition: transform .15s linear;
    }

.su-story-grid {
    perspective: 1400px;
}

.su-story-visual,
.su-story-copy {
    opacity: 0;
    transform: translateY(80px);
    filter: blur(8px);
    transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1), filter 1.1s ease;
}

.su-story-visual {
    transform: translate3d(-70px, 80px, 0) rotateY(7deg) rotateZ(-1deg);
    transform-origin: center left;
}

.su-story-copy {
    transform: translate3d(70px, 80px, 0);
    transition-delay: .12s;
}

.su-story.is-active .su-story-visual,
.su-story.is-active .su-story-copy {
    opacity: 1;
    transform: translate3d(0,0,0) rotateY(0) rotateZ(0);
    filter: blur(0);
}

.su-story-visual {
    box-shadow: 0 35px 90px rgba(92,25,29,.20);
}

    .su-story-visual::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background: linear-gradient(115deg, rgba(255,209,64,.15), transparent 32%, transparent 68%, rgba(240,91,35,.16));
        mix-blend-mode: screen;
        opacity: 0;
        transition: opacity 1.2s ease .35s;
    }

.su-story.is-active .su-story-visual::before {
    opacity: 1;
}

.su-story-visual::after {
    content: "";
    position: absolute;
    width: 150%;
    height: 1px;
    left: -25%;
    top: 50%;
    background: rgba(255,248,239,.22);
    transform: rotate(-22deg) translateX(-110%);
    z-index: 6;
    pointer-events: none;
}

.su-story.is-active .su-story-visual::after {
    animation: suStorySweep 1.5s cubic-bezier(.16,1,.3,1) .45s forwards;
}

@keyframes suStorySweep {
    to {
        transform: rotate(-22deg) translateX(110%);
    }
}

.su-visual-circle {
    transition: transform 1.5s cubic-bezier(.16,1,.3,1), filter 1.2s ease;
}

.su-story.is-active .su-visual-circle {
    transform: translate(-50%,-50%) scale(1.03);
    filter: saturate(1.12);
}

.su-visual-circle::before {
    content: "";
    position: absolute;
    inset: -28px;
    border: 1px solid rgba(255,209,64,.32);
    border-radius: 50%;
    transform: scale(.7);
    opacity: 0;
}

.su-story.is-active .su-visual-circle::before {
    opacity: 1;
    animation: suOrbitIn 1.5s cubic-bezier(.16,1,.3,1) .2s forwards, suOrbitSpin 18s linear 1.8s infinite;
}

@keyframes suOrbitIn {
    to {
        transform: scale(1);
    }
}

@keyframes suOrbitSpin {
    to {
        transform: rotate(360deg);
    }
}

.su-story-photo {
    transform: translate3d(0,40px,0) rotate(7deg) scale(.94);
    opacity: 0;
    transition: transform 1.25s cubic-bezier(.16,1,.3,1) .35s, opacity .9s ease .35s;
}

.su-story.is-active .su-story-photo {
    transform: translate3d(0,0,0) rotate(4deg) scale(1);
    opacity: 1;
}

.su-story-photo img {
    transform: scale(1.14);
    transition: transform 1.8s cubic-bezier(.16,1,.3,1) .45s;
}

.su-story.is-active .su-story-photo img {
    transform: scale(1);
}

.su-story-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(255,255,255,.18), transparent 35%);
    transform: translateX(-120%);
    z-index: 3;
    pointer-events: none;
}

.su-story.is-active .su-story-photo::before {
    animation: suPhotoShine 1.4s cubic-bezier(.16,1,.3,1) .9s forwards;
}

@keyframes suPhotoShine {
    to {
        transform: translateX(120%);
    }
}

.su-visual-panel {
    opacity: 0;
    transform: translate3d(-35px,25px,0) rotate(-8deg);
    transition: opacity .75s ease .85s, transform 1s cubic-bezier(.16,1,.3,1) .85s;
}

.su-story.is-active .su-visual-panel {
    opacity: 1;
    transform: translate3d(0,0,0) rotate(-5deg);
}

.su-visual-stamp {
    opacity: 0;
    transform: scale(.4) rotate(-80deg);
    transition: opacity .8s ease 1s, transform 1s cubic-bezier(.16,1,.3,1) 1s;
}

.su-story.is-active .su-visual-stamp {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.su-story-copy .su-kicker {
    display: inline-flex;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .9s cubic-bezier(.16,1,.3,1) .25s;
}

.su-story.is-active .su-story-copy .su-kicker {
    clip-path: inset(0 0 0 0);
}

.su-story-copy .su-display {
    position: relative;
    overflow: hidden;
    transform: translateY(22px);
    opacity: 0;
    transition: opacity .9s ease .38s, transform 1s cubic-bezier(.16,1,.3,1) .38s;
}

.su-story.is-active .su-story-copy .su-display {
    opacity: 1;
    transform: translateY(0);
}

.su-story-copy .su-display::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--su-paper, #f4f1e9);
    transform: translateX(0);
    transition: transform 1.25s cubic-bezier(.16,1,.3,1) .52s;
    pointer-events: none;
}

.su-story.is-active .su-story-copy .su-display::after {
    transform: translateX(105%);
}

.su-story-copy > p {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1);
}

.su-story.is-active .su-story-copy > p:nth-of-type(1) {
    transition-delay: .72s;
}

.su-story.is-active .su-story-copy > p:nth-of-type(2) {
    transition-delay: .84s;
}

.su-story.is-active .su-story-copy > p {
    opacity: 1;
    transform: translateY(0);
}

.su-stat-line {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity .8s ease .98s, transform .9s cubic-bezier(.16,1,.3,1) .98s;
}

.su-story.is-active .su-stat-line {
    opacity: 1;
    transform: translateX(0);
}

.su-stat-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 0;
    background: linear-gradient(90deg, var(--su-maroon), var(--su-orange), var(--su-yellow));
    transition: width 1.2s cubic-bezier(.16,1,.3,1) 1.05s;
}

.su-story.is-active .su-stat-line::before {
    width: 100%;
}

.su-stat-line strong {
    display: inline-block;
    transition: transform .7s cubic-bezier(.16,1,.3,1) 1.05s;
}

.su-story.is-active .su-stat-line strong {
    transform: translateX(0);
}

.su-story-copy .su-btn {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease 1.12s, transform .8s cubic-bezier(.16,1,.3,1) 1.12s, background .3s ease, color .3s ease;
}

.su-story.is-active .su-story-copy .su-btn {
    opacity: 1;
    transform: translateY(0);
}

/* Reading-progress accent that follows the section while scrolling. */
.su-story-copy::after {
    content: "";
    display: block;
    width: var(--story-progress, 0%);
    max-width: 100%;
    height: 3px;
    margin-top: 2.2rem;
    background: linear-gradient(90deg, var(--su-maroon), var(--su-orange), var(--su-yellow));
    transform-origin: left center;
    transition: width .08s linear;
}

@media (pointer:fine) {
    .su-story-visual {
        will-change: transform;
    }

    .su-story-photo {
        will-change: transform;
    }

    .su-story-copy {
        will-change: transform;
    }
}

@media (max-width: 991px) {
    .su-story-visual,
    .su-story-copy {
        transform: translateY(55px);
    }

    .su-story-visual {
        transform: translate3d(0,55px,0) rotateY(0);
    }

    .su-story-copy {
        transform: translate3d(0,55px,0);
    }

    .su-story.is-active .su-story-visual,
    .su-story.is-active .su-story-copy {
        transform: translate3d(0,0,0);
    }
}

@media (max-width: 575px) {
    .su-story::before {
        right: -1rem;
        top: 2rem;
        font-size: 10rem;
    }

    .su-story-photo {
        transform: translate3d(0,25px,0) rotate(5deg) scale(.96);
    }

    .su-story.is-active .su-story-photo {
        transform: translate3d(0,0,0) rotate(4deg) scale(1);
    }

    .su-story-copy .su-display::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .su-story::before,
    .su-story-visual,
    .su-story-copy,
    .su-story-photo,
    .su-story-photo img,
    .su-visual-panel,
    .su-visual-stamp,
    .su-story-copy .su-display,
    .su-story-copy > p,
    .su-stat-line,
    .su-story-copy .su-btn {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

        .su-story-copy .su-display::after,
        .su-story-copy .su-kicker {
            clip-path: none !important;
            transform: none !important;
        }

        .su-story-visual::after,
        .su-story-photo::before {
            display: none;
        }

        .su-story-copy::after {
            width: 100%;
        }
}

/* =========================================================
   THE PROMISE — cinematic editorial choreography
   ========================================================= */
.su-promise-section {
    min-height: 100vh;
    padding: clamp(8rem,13vw,12rem) 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #f4f1e9;
    --promise-p: 0;
    --promise-y: 0px;
}

    .su-promise-section:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 76% 48%,rgba(166,45,50,.10),transparent 27%),radial-gradient(circle at 12% 70%,rgba(240,91,35,.055),transparent 24%);
        pointer-events: none;
        z-index: -2;
    }

.su-promise-noise {
    position: absolute;
    inset: -50%;
    opacity: .045;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    transform: translate3d(0,var(--promise-y),0);
}

.su-promise-inner {
    position: relative;
    z-index: 2;
    max-width: 1120px;
}

.su-promise-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(27,28,20,.16);
    padding-top: 1rem;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .9s ease .05s,transform 1s cubic-bezier(.2,.8,.2,1) .05s;
}

.su-promise-section.is-active .su-promise-topline {
    opacity: 1;
    transform: none
}

.su-promise-topline .promise-kicker {
    margin: 0;
    letter-spacing: .16em
}

.promise-kicker b {
    color: #a62d32;
    margin-right: .45rem
}

.su-promise-side-label {
    font: 600 .55rem/1 'JetBrains Mono',monospace;
    letter-spacing: .18em;
    color: #73736a;
    text-transform: uppercase;
}

.su-promise-heading-wrap {
    position: relative;
    margin: clamp(4rem,7vw,6.5rem) 0 3rem;
}

.su-promise-word-mark {
    position: absolute;
    left: -5vw;
    top: 50%;
    transform: translateY(calc(-50% + var(--promise-y))) translateX(calc((1 - var(--promise-p))*-5%));
    font: 400 clamp(7rem,20vw,20rem)/.72 'Cormorant Garamond',serif;
    letter-spacing: -.055em;
    color: rgba(27,28,20,.045);
    white-space: nowrap;
    pointer-events: none;
    transition: transform .1s linear;
}

.su-promise-title {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: clamp(3.7rem,7.5vw,8.2rem);
    line-height: .86;
    letter-spacing: -.045em;
    max-width: 1050px;
}

    .su-promise-title span, .su-promise-title em {
        display: block;
        overflow: hidden;
        padding-bottom: .04em;
    }

        .su-promise-title span:after, .su-promise-title em:after {
            content: "";
            display: block;
            height: 100%;
            background: #f4f1e9;
            transform: translateX(0);
            transition: transform 1.15s cubic-bezier(.76,0,.24,1);
        }

.su-promise-section.is-active .su-promise-title span:after, .su-promise-section.is-active .su-promise-title em:after {
    transform: translateX(102%)
}

.su-promise-title span:nth-child(2):after {
    transition-delay: .12s
}

.su-promise-title em:after {
    transition-delay: .22s
}

.su-promise-title em {
    font-size: 1.03em;
    margin-left: 7.5vw;
    position: relative;
    color: #24231e;
}

    .su-promise-title em:before {
        content: "";
        position: absolute;
        left: -7.5vw;
        top: 58%;
        width: 5.7vw;
        height: 2px;
        background: #f05b23;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 1s cubic-bezier(.2,.8,.2,1) .9s;
    }

.su-promise-section.is-active .su-promise-title em:before {
    transform: scaleX(1)
}

.su-promise-lower {
    display: grid;
    grid-template-columns: minmax(110px,.35fr) minmax(320px,1.4fr) 150px;
    gap: 2rem;
    align-items: start;
    margin-top: clamp(2rem,4vw,4rem);
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .9s ease .55s,transform 1s cubic-bezier(.2,.8,.2,1) .55s;
}

.su-promise-section.is-active .su-promise-lower {
    opacity: 1;
    transform: none
}

.su-promise-rule {
    height: 100%;
    min-height: 120px;
    border-left: 1px solid rgba(27,28,20,.16);
    position: relative;
    overflow: hidden
}

    .su-promise-rule span {
        display: block;
        position: absolute;
        left: -1px;
        top: 0;
        width: 2px;
        height: 0;
        background: linear-gradient(#a62d32,#f05b23,#ffd140);
        transition: height 1.3s cubic-bezier(.2,.8,.2,1) 1s
    }

.su-promise-section.is-active .su-promise-rule span {
    height: 100%
}

.su-promise-copy p {
    max-width: 620px;
    color: #6d6d64;
    line-height: 1.85;
    font-size: clamp(.95rem,1.2vw,1.08rem);
    margin: 0;
}

.su-promise-checks {
    gap: 1rem 2.2rem;
    margin-top: 2.1rem
}

    .su-promise-checks span {
        font-size: .58rem;
        color: #34332e;
        transition: transform .35s ease
    }

        .su-promise-checks span:hover {
            transform: translateX(7px)
        }

    .su-promise-checks b {
        color: #a62d32;
        font-weight: 500;
        margin-right: .15rem
    }

    .su-promise-checks i {
        color: #f05b23
    }

.su-promise-seal {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    position: relative;
    justify-self: end;
    display: grid;
    place-items: center;
    transform: rotate(-18deg) scale(.7);
    opacity: 0;
    transition: transform 1.1s cubic-bezier(.16,1,.3,1) .85s,opacity .7s ease .85s;
}

.su-promise-section.is-active .su-promise-seal {
    transform: rotate(0) scale(1);
    opacity: 1
}

.su-promise-seal-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(166,45,50,.38);
    border-radius: 50%;
}

    .su-promise-seal-ring:before {
        content: "";
        position: absolute;
        inset: 9px;
        border: 1px dashed rgba(240,91,35,.5);
        border-radius: 50%;
        animation: promiseSpin 18s linear infinite
    }

.su-promise-seal-text {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    font: 600 .36rem/1.15 'JetBrains Mono',monospace;
    letter-spacing: .11em;
    text-align: center;
    color: #a62d32;
    animation: promiseSpinReverse 16s linear infinite
}

.su-promise-seal-core {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #a62d32;
    color: #ffd140;
    font: 700 1rem/1 'Cormorant Garamond',serif;
    box-shadow: 0 0 0 7px rgba(166,45,50,.07)
}

@keyframes promiseSpin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes promiseSpinReverse {
    to {
        transform: rotate(-360deg)
    }
}

.su-promise-orbit {
    position: absolute;
    border: 1px solid rgba(166,45,50,.13);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0
}

.su-promise-orbit-a {
    width: 44vw;
    height: 44vw;
    right: -17vw;
    top: 18%;
    animation: promiseOrbit 22s linear infinite
}

.su-promise-orbit-b {
    width: 20vw;
    height: 20vw;
    left: -10vw;
    bottom: 5%;
    border-color: rgba(240,91,35,.12);
    animation: promiseOrbit 15s linear infinite reverse
}

@keyframes promiseOrbit {
    to {
        transform: rotate(360deg)
    }
}

.su-promise-glow {
    position: absolute;
    width: 35vw;
    height: 35vw;
    right: -13vw;
    top: 25%;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(255,209,64,.16),rgba(240,91,35,.05) 38%,transparent 70%);
    filter: blur(12px);
    transform: translate3d(calc(var(--promise-p)*-25px),var(--promise-y),0);
    pointer-events: none;
}

.su-promise-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: rgba(27,28,20,.06)
}

    .su-promise-progress span {
        display: block;
        height: 100%;
        width: calc(var(--promise-p)*100%);
        background: linear-gradient(90deg,#a62d32,#f05b23,#ffd140);
        transform-origin: left
    }

.su-promise-section .su-statement-word {
    transform: translate3d(calc(var(--promise-p)*-8vw),calc(-50% + var(--promise-y)),0);
    transition: none;
}

@media(max-width:800px) {
    .su-promise-section {
        min-height: auto;
        padding: 7rem 0 6rem
    }

    .su-promise-side-label {
        display: none
    }

    .su-promise-topline {
        padding-top: .8rem
    }

    .su-promise-heading-wrap {
        margin: 4rem 0 2.5rem
    }

    .su-promise-title {
        font-size: clamp(3.2rem,14vw,5rem)
    }

        .su-promise-title em {
            margin-left: 0
        }

            .su-promise-title em:before {
                left: 0;
                top: auto;
                bottom: -.25rem;
                width: 4rem
            }

    .su-promise-lower {
        grid-template-columns: 1fr;
        margin-top: 2rem;
        gap: 1.7rem
    }

    .su-promise-rule {
        display: none
    }

    .su-promise-seal {
        justify-self: start;
        width: 105px;
        height: 105px
    }

    .su-promise-orbit-a {
        width: 80vw;
        height: 80vw;
        right: -40vw;
        top: 38%
    }

    .su-promise-word-mark {
        font-size: 32vw;
        left: -12vw
    }

    .su-promise-checks {
        flex-direction: column;
        gap: .8rem
    }

    .su-promise-progress {
        height: 2px
    }
}

@media(prefers-reduced-motion:reduce) {
    .su-promise-section *, .su-promise-section:before {
        animation: none !important;
        transition: none !important
    }

    .su-promise-topline, .su-promise-lower {
        opacity: 1;
        transform: none
    }

    .su-promise-title span:after, .su-promise-title em:after {
        display: none
    }

    .su-promise-title em:before {
        transform: scaleX(1)
    }

    .su-promise-seal {
        opacity: 1;
        transform: none
    }

    .su-promise-rule span {
        height: 100%
    }
}


/* =========================================================
   SHAHU URBAN — ALL SECTION CINEMATIC MOTION SYSTEM
   Applies a distinct entrance/transition language to every
   homepage section while preserving existing content/markup.
   ========================================================= */
.su-home {
    --section-ease: cubic-bezier(.16,1,.3,1);
    --section-duration: .95s;
}

    .su-home > section {
        --section-p: 0;
        position: relative;
        isolation: isolate;
        transform: translate3d(0, 0, 0);
        will-change: transform;
    }

        /* Every section gets a soft cinematic reveal rather than a hard cut. */
        .su-home > section.su-section-motion:not(.su-marquee) {
            opacity: .92;
            clip-path: inset(4.5% 0 4.5% 0 round 0);
            transition: opacity .95s var(--section-ease), clip-path 1.15s var(--section-ease), transform .95s var(--section-ease);
        }

        .su-home > section.su-section-motion.is-inview:not(.su-marquee) {
            opacity: 1;
            clip-path: inset(0 0 0 0 round 0);
        }

        /* Cinematic section separator / light sweep. */
        .su-home > section.su-section-motion:not(.su-marquee)::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 20;
            pointer-events: none;
            background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.12) 50%, rgba(255,255,255,0) 62%, transparent 100%);
            transform: translateX(-120%);
            transition: transform 1.35s var(--section-ease);
        }

        .su-home > section.su-section-motion.is-inview:not(.su-marquee)::before {
            transform: translateX(120%);
        }

        /* Section internals receive a coordinated stagger. */
        .su-home > section.su-section-motion:not(.su-marquee) .su-section-meta,
        .su-home > section.su-section-motion:not(.su-marquee) .su-services-head,
        .su-home > section.su-section-motion:not(.su-marquee) .su-story-visual,
        .su-home > section.su-section-motion:not(.su-marquee) .su-story-copy,
        .su-home > section.su-section-motion:not(.su-marquee) .su-rates-copy,
        .su-home > section.su-section-motion:not(.su-marquee) .su-rate-card,
        .su-home > section.su-section-motion:not(.su-marquee) .su-testimonial-head,
        .su-home > section.su-section-motion:not(.su-marquee) .su-testimonial-window,
        .su-home > section.su-section-motion:not(.su-marquee) .su-notices-head,
        .su-home > section.su-section-motion:not(.su-marquee) .su-final-inner,
        .su-home > section.su-section-motion:not(.su-marquee) .su-service-feature-image {
            opacity: 0;
            transform: translate3d(0, 38px, 0);
            transition: opacity .8s var(--section-ease), transform 1s var(--section-ease);
        }

        .su-home > section.su-section-motion.is-inview:not(.su-marquee) .su-section-meta,
        .su-home > section.su-section-motion.is-inview:not(.su-marquee) .su-services-head,
        .su-home > section.su-section-motion.is-inview:not(.su-marquee) .su-story-visual,
        .su-home > section.su-section-motion.is-inview:not(.su-marquee) .su-story-copy,
        .su-home > section.su-section-motion.is-inview:not(.su-marquee) .su-rates-copy,
        .su-home > section.su-section-motion.is-inview:not(.su-marquee) .su-rate-card,
        .su-home > section.su-section-motion.is-inview:not(.su-marquee) .su-testimonial-head,
        .su-home > section.su-section-motion.is-inview:not(.su-marquee) .su-testimonial-window,
        .su-home > section.su-section-motion.is-inview:not(.su-marquee) .su-notices-head,
        .su-home > section.su-section-motion.is-inview:not(.su-marquee) .su-final-inner,
        .su-home > section.su-section-motion.is-inview:not(.su-marquee) .su-service-feature-image {
            opacity: 1;
            transform: translate3d(0,0,0);
        }

        .su-home > section.su-section-motion.is-inview .su-section-meta {
            transition-delay: .05s;
        }

        .su-home > section.su-section-motion.is-inview .su-services-head {
            transition-delay: .12s;
        }

        .su-home > section.su-section-motion.is-inview .su-story-visual {
            transition-delay: .12s;
        }

        .su-home > section.su-section-motion.is-inview .su-story-copy {
            transition-delay: .22s;
        }

        .su-home > section.su-section-motion.is-inview .su-rates-copy {
            transition-delay: .12s;
        }

        .su-home > section.su-section-motion.is-inview .su-rate-card {
            transition-delay: .24s;
        }

        .su-home > section.su-section-motion.is-inview .su-testimonial-head {
            transition-delay: .12s;
        }

        .su-home > section.su-section-motion.is-inview .su-testimonial-window {
            transition-delay: .24s;
        }

        .su-home > section.su-section-motion.is-inview .su-notices-head {
            transition-delay: .12s;
        }

        .su-home > section.su-section-motion.is-inview .su-final-inner {
            transition-delay: .14s;
        }

        .su-home > section.su-section-motion.is-inview .su-service-feature-image {
            transition-delay: .22s;
        }

    /* Hero: layered entrance on top of the existing video motion. */
    .su-home > .su-hero.su-section-motion .su-hero-top,
    .su-home > .su-hero.su-section-motion .su-wordmark,
    .su-home > .su-hero.su-section-motion .su-hero-title,
    .su-home > .su-hero.su-section-motion .su-hero-lead,
    .su-home > .su-hero.su-section-motion .su-actions,
    .su-home > .su-hero.su-section-motion .su-hero-foot {
        opacity: 0;
        transform: translate3d(0, 34px, 0);
        transition: opacity .8s var(--section-ease), transform 1s var(--section-ease);
    }

    .su-home > .su-hero.su-section-motion.is-inview .su-hero-top {
        opacity: 1;
        transform: none;
        transition-delay: .15s;
    }

    .su-home > .su-hero.su-section-motion.is-inview .su-wordmark {
        opacity: 1;
        transform: none;
        transition-delay: .25s;
    }

    .su-home > .su-hero.su-section-motion.is-inview .su-hero-title {
        opacity: 1;
        transform: none;
        transition-delay: .36s;
    }

    .su-home > .su-hero.su-section-motion.is-inview .su-hero-lead {
        opacity: 1;
        transform: none;
        transition-delay: .52s;
    }

    .su-home > .su-hero.su-section-motion.is-inview .su-actions {
        opacity: 1;
        transform: none;
        transition-delay: .64s;
    }

    .su-home > .su-hero.su-section-motion.is-inview .su-hero-foot {
        opacity: 1;
        transform: none;
        transition-delay: .78s;
    }

    /* Difference section — statement enters from left, copy from right. */
    .su-home > .su-intro.su-section-motion .su-intro-statement {
        transform: translate3d(-55px, 25px, 0) scale(.985);
    }

    .su-home > .su-intro.su-section-motion .su-intro-copy {
        transform: translate3d(55px, 35px, 0);
    }

    .su-home > .su-intro.su-section-motion.is-inview .su-intro-statement,
    .su-home > .su-intro.su-section-motion.is-inview .su-intro-copy {
        opacity: 1;
        transform: translate3d(0,0,0);
    }

    /* Origin — image and copy move in opposite directions. */
    .su-home > .su-story.su-section-motion .su-story-visual {
        transform: translate3d(-65px, 40px, 0) rotate(-1.5deg);
    }

    .su-home > .su-story.su-section-motion .su-story-copy {
        transform: translate3d(65px, 40px, 0);
    }

    .su-home > .su-story.su-section-motion.is-inview .su-story-visual,
    .su-home > .su-story.su-section-motion.is-inview .su-story-copy {
        transform: translate3d(0,0,0) rotate(0);
    }

    /* Services — feature image rises, rows follow like a curtain. */
    .su-home > .su-services.su-section-motion .su-service-stack > * {
        opacity: 0;
        transform: translate3d(0, 42px, 0) scale(.985);
        transition: opacity .7s var(--section-ease), transform .85s var(--section-ease), background .4s ease;
    }

    .su-home > .su-services.su-section-motion.is-inview .su-service-stack > * {
        opacity: 1;
        transform: none;
    }

        .su-home > .su-services.su-section-motion.is-inview .su-service-stack > *:nth-child(1) {
            transition-delay: .28s;
        }

        .su-home > .su-services.su-section-motion.is-inview .su-service-stack > *:nth-child(2) {
            transition-delay: .4s;
        }

        .su-home > .su-services.su-section-motion.is-inview .su-service-stack > *:nth-child(3) {
            transition-delay: .52s;
        }

    /* Promise — typography breathes in with a vertical reveal. */
    .su-home > .su-promise-section.su-section-motion .su-promise-topline,
    .su-home > .su-promise-section.su-section-motion .su-promise-heading-wrap,
    .su-home > .su-promise-section.su-section-motion .su-promise-lower {
        opacity: 0;
        transform: translate3d(0,55px,0);
        transition: opacity .85s var(--section-ease), transform 1s var(--section-ease);
    }

    .su-home > .su-promise-section.su-section-motion.is-inview .su-promise-topline {
        opacity: 1;
        transform: none;
        transition-delay: .05s;
    }

    .su-home > .su-promise-section.su-section-motion.is-inview .su-promise-heading-wrap {
        opacity: 1;
        transform: none;
        transition-delay: .18s;
    }

    .su-home > .su-promise-section.su-section-motion.is-inview .su-promise-lower {
        opacity: 1;
        transform: none;
        transition-delay: .38s;
    }

    /* Rates — card gets a subtle 3D lift. */
    .su-home > .su-rates.su-section-motion .su-rate-card {
        transform: perspective(1000px) rotateY(-8deg) translate3d(45px,35px,0);
    }

    .su-home > .su-rates.su-section-motion.is-inview .su-rate-card {
        transform: perspective(1000px) rotateY(0) translate3d(0,0,0);
    }

    .su-home > .su-rates.su-section-motion .su-rate-row {
        opacity: 0;
        transform: translateX(28px);
        transition: opacity .55s ease, transform .65s var(--section-ease), background .35s ease;
    }

    .su-home > .su-rates.su-section-motion.is-inview .su-rate-row {
        opacity: 1;
        transform: none;
    }

        .su-home > .su-rates.su-section-motion.is-inview .su-rate-row:nth-child(2) {
            transition-delay: .34s;
        }

        .su-home > .su-rates.su-section-motion.is-inview .su-rate-row:nth-child(3) {
            transition-delay: .43s;
        }

        .su-home > .su-rates.su-section-motion.is-inview .su-rate-row:nth-child(4) {
            transition-delay: .52s;
        }

        .su-home > .su-rates.su-section-motion.is-inview .su-rate-row:nth-child(5) {
            transition-delay: .61s;
        }

    /* Testimonials — horizontal depth / cards cascade. */
    .su-home > .su-testimonials.su-section-motion .su-testimonial-card {
        opacity: 0;
        transform: translate3d(60px,35px,0) rotate(1deg);
        transition: opacity .7s var(--section-ease), transform .9s var(--section-ease), box-shadow .4s ease;
    }

    .su-home > .su-testimonials.su-section-motion.is-inview .su-testimonial-card {
        opacity: 1;
        transform: none;
    }

        .su-home > .su-testimonials.su-section-motion.is-inview .su-testimonial-card:nth-child(1) {
            transition-delay: .28s;
        }

        .su-home > .su-testimonials.su-section-motion.is-inview .su-testimonial-card:nth-child(2) {
            transition-delay: .4s;
        }

        .su-home > .su-testimonials.su-section-motion.is-inview .su-testimonial-card:nth-child(3) {
            transition-delay: .52s;
        }

    /* Notices — each row behaves like a magnetic editorial list. */
    .su-home > .su-notices.su-section-motion .su-notice {
        opacity: 0;
        transform: translate3d(-35px,0,0);
        transition: opacity .65s ease, transform .75s var(--section-ease), background .4s ease, padding .4s ease;
    }

    .su-home > .su-notices.su-section-motion.is-inview .su-notice {
        opacity: 1;
        transform: none;
    }

        .su-home > .su-notices.su-section-motion.is-inview .su-notice:nth-child(1) {
            transition-delay: .22s;
        }

        .su-home > .su-notices.su-section-motion.is-inview .su-notice:nth-child(2) {
            transition-delay: .32s;
        }

        .su-home > .su-notices.su-section-motion.is-inview .su-notice:nth-child(3) {
            transition-delay: .42s;
        }

        .su-home > .su-notices.su-section-motion.is-inview .su-notice:nth-child(4) {
            transition-delay: .52s;
        }

        .su-home > .su-notices.su-section-motion.is-inview .su-notice:nth-child(5) {
            transition-delay: .62s;
        }

    /* Final CTA — scale/blur style arrival. */
    .su-home > .su-final.su-section-motion .su-final-inner {
        opacity: 0;
        transform: translate3d(0,55px,0) scale(.96);
        filter: blur(5px);
        transition: opacity 1s var(--section-ease), transform 1.1s var(--section-ease), filter 1.1s ease;
    }

    .su-home > .su-final.su-section-motion.is-inview .su-final-inner {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }

    /* Scroll-linked depth. JS writes --section-p from 0→1. */
    .su-home > section.su-section-motion:not(.su-marquee) .su-statement-word,
    .su-home > section.su-section-motion:not(.su-marquee) .su-final-word,
    .su-home > section.su-section-motion:not(.su-marquee) .su-intro-number {
        transform: translate3d(calc((var(--section-p) - .5) * -34px),0,0);
        transition: transform .15s linear;
    }

    /* Continuous marquee becomes a visual bridge between sections. */
    .su-home > .su-marquee.su-section-motion {
        transform: translate3d(0,0,0);
        transition: transform .6s var(--section-ease), filter .6s ease;
    }

        .su-home > .su-marquee.su-section-motion.is-inview {
            filter: saturate(1.08) contrast(1.02);
        }

        .su-home > .su-marquee.su-section-motion .su-marquee-track {
            animation-duration: 20s;
        }

/* Mobile: reduce travel distance, keep the choreography. */
@media (max-width: 767px) {
    .su-home > section.su-section-motion:not(.su-marquee) {
        clip-path: inset(2.5% 0 2.5% 0);
    }

    .su-home > .su-intro.su-section-motion .su-intro-statement,
    .su-home > .su-intro.su-section-motion .su-intro-copy,
    .su-home > .su-story.su-section-motion .su-story-visual,
    .su-home > .su-story.su-section-motion .su-story-copy {
        transform: translate3d(0,28px,0);
    }

    .su-home > .su-rates.su-section-motion .su-rate-card {
        transform: translate3d(0,35px,0);
    }

    .su-home > .su-testimonials.su-section-motion .su-testimonial-card {
        transform: translate3d(0,28px,0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .su-home > section.su-section-motion,
    .su-home > section.su-section-motion::before,
    .su-home > section.su-section-motion * {
        clip-path: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   HERO CAROUSEL MENU POSITION
   Places the existing MENU control on the right edge of the
   hero/carousel instead of the top navigation row.
========================================================= */
body:has(.su-home) .su-menu-trigger {
    position: fixed;
    top: 50%;
    right: clamp(18px, 2.8vw, 48px);
    z-index: 1300;
    transform: translateY(-50%);
    padding: 7px 7px 7px 18px;
    min-width: 112px;
    justify-content: space-between;
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
    animation: suMenuEdgeFloat 4.5s ease-in-out infinite;
}

    body:has(.su-home) .su-menu-trigger::before {
        content: "";
        position: absolute;
        inset: -8px;
        border: 1px solid rgba(255,209,64,.28);
        border-radius: 999px;
        opacity: 0;
        transform: scale(.82);
        transition: opacity .35s ease, transform .35s ease;
        pointer-events: none;
    }

    body:has(.su-home) .su-menu-trigger:hover {
        transform: translateY(-50%) translateX(-5px) scale(1.04);
        animation-play-state: paused;
    }

        body:has(.su-home) .su-menu-trigger:hover::before {
            opacity: 1;
            transform: scale(1);
        }

    body:has(.su-home) .su-menu-trigger .su-menu-icon {
        width: 40px;
        height: 40px;
    }

@keyframes suMenuEdgeFloat {
    0%, 100% {
        margin-top: 0;
    }

    50% {
        margin-top: -6px;
    }
}

/* Keep the trigger above the hero video and effects. */
body:has(.su-home) .site-header {
    pointer-events: none;
}

body:has(.su-home) .su-menu-trigger,
body:has(.su-home) .su-nav-brand,
body:has(.su-home) .su-menu-panel,
body:has(.su-home) .su-menu-overlay {
    pointer-events: auto;
}

@media (max-width: 768px) {
    body:has(.su-home) .su-menu-trigger {
        top: auto;
        right: 16px;
        bottom: 28px;
        transform: none;
        min-width: 104px;
        padding-left: 14px;
    }

        body:has(.su-home) .su-menu-trigger:hover {
            transform: translateX(-4px) scale(1.03);
        }
}

@media (prefers-reduced-motion: reduce) {
    body:has(.su-home) .su-menu-trigger {
        animation: none;
    }
}