:root {
    --hero-base: #0a1628;
    --navy: #0a1628;
    --navy-soft: #15253c;
    --surface: #0d1b30;
    --surface-2: #12233a;
    --heading: #eef0f6;
    --body-muted: #b9becf;
    --gold: #b8923a;
    --gold-soft: #c9a44c;
    --gold-deep: #9a7828;
    --action-inverse: #ffffff;
    --action-inverse-fg: #2f2f33;
    --glass-fill: rgba(201, 164, 76, 0.10);
    --glass-border: rgba(212, 176, 90, 0.28);
    --line: rgba(238, 240, 246, 0.08);
    --stone: #e3e0d9;
    --stone-2: #d9d5cc;
    --stone-3: #cfcabe;
    --ink: #0a1628;
    --ink-muted: #4a5568;
    --ink-line: rgba(10, 22, 40, 0.12);
    --duration-fast: 150ms;
    --ease-entrance: cubic-bezier(0.2, 0, 0, 1);
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --page-pad: 1.25rem;
    --max: 72rem;
    --font-heading: "Bree Serif", "Cairo", serif;
}

@media (min-width: 640px) {
    :root { --page-pad: 2.5rem; }
}

* { margin: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; }
img { max-width: 100%; display: block; }

/* Local placeholders are present in the HTML before the API or photos load. */
.team-photo.content-image-loading,
.work-page .work-thumb.content-image-loading,
.work-dialog-media.content-image-loading {
    background: var(--stone-2) var(--placeholder-image, url("logo.png")) center / 7rem auto no-repeat;
}

.team-photo.content-image-loading img,
.work-thumb.content-image-loading img,
.work-dialog-media.content-image-loading img {
    opacity: 0;
}

.team-photo img.is-image-placeholder,
.work-page .work-thumb img.is-image-placeholder,
.work-dialog-media img.is-image-placeholder {
    object-fit: contain;
    padding: 24%;
    transform: none;
}

.work-dialog-media img.is-image-placeholder { height: min(55svh, 25rem); }

body.site {
    font-family: "Cairo", sans-serif;
    font-weight: 400;
    background: var(--stone);
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.65;
}

body.is-loading { overflow: hidden; }

.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 38%, rgba(201, 164, 76, 0.14), transparent 30rem),
        var(--navy);
    color: var(--heading);
    opacity: 1;
    visibility: visible;
    transition: opacity 180ms var(--ease-entrance), visibility 180ms;
}

html:not([data-environment="production"]) body:not(.work-page) .splash-screen { display: none; }

html.is-localizing body.site > :not(.splash-screen) { visibility: hidden; }
html.is-localizing body.site .splash-screen { display: grid; }
.splash-status [lang="ar"] { display: none; }
html[lang="ar"] .splash-status [lang="en"] { display: none; }
html[lang="ar"] .splash-status [lang="ar"] { display: inline; }
.splash-brand [lang="ar"] { display: none; }
html[lang="ar"] .splash-brand [lang="en"] { display: none; }
html[lang="ar"] .splash-brand [lang="ar"] { display: inline; }

.splash-screen::before,
.splash-screen::after {
    position: absolute;
    content: "";
    width: 130vw;
    height: 28rem;
    border-top: 1px solid rgba(201, 164, 76, 0.24);
    border-radius: 50%;
    transform: rotate(-8deg);
    pointer-events: none;
}

.splash-screen::before { top: 12%; left: -15%; }
.splash-screen::after { bottom: 8%; left: -10%; opacity: .45; transform: rotate(6deg); }

.splash-screen.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }

.splash-inner {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: .9rem;
    width: min(20rem, calc(100% - 3rem));
    text-align: center;
}

.splash-mark {
    display: grid;
    place-items: center;
    width: 7rem;
    height: 7rem;
    border: 1px solid rgba(201, 164, 76, .48);
    border-radius: 50%;
    box-shadow: 0 0 0 1rem rgba(201, 164, 76, .035), 0 0 4rem rgba(201, 164, 76, .16);
    animation: splash-breathe 2.2s ease-in-out infinite;
}

.splash-logo { width: 4.4rem; height: auto; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .3)); }
.splash-brand { color: var(--gold-soft); font-family: "Cinzel", serif; font-size: 1.15rem; letter-spacing: .12em; }
html[lang="ar"] .splash-brand { font-family: "Cairo", sans-serif; letter-spacing: 0; }
.splash-rule { width: 3rem; height: 1px; background: var(--gold-soft); opacity: .72; }
.splash-status { margin: 0; color: var(--body-muted); font-size: .82rem; letter-spacing: .04em; }
.splash-loader { position: relative; width: 7rem; height: 2px; overflow: hidden; background: rgba(238, 240, 246, .16); }
.splash-loader::after { position: absolute; content: ""; inset: 0 auto 0 0; width: 42%; background: var(--gold-soft); animation: splash-progress 1.35s ease-in-out infinite; }

@keyframes splash-breathe { 0%, 100% { transform: scale(.96); opacity: .78; } 50% { transform: scale(1); opacity: 1; } }
@keyframes splash-progress { 0% { transform: translateX(-140%); } 100% { transform: translateX(340%); } }

@media (prefers-reduced-motion: reduce) {
    .splash-mark, .splash-loader::after { animation: none; }
    .splash-screen { transition-duration: 1ms; }
}

/* ?? Header ?? */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem var(--page-pad);
    background: linear-gradient(180deg, rgba(10, 22, 40, 0.96) 0%, rgba(10, 22, 40, 0.78) 70%, transparent 100%);
    backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; flex-shrink: 0; }

.brand-logo {
    height: 3.15rem;
    width: auto;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

@media (min-width: 640px) {
    .brand-logo { height: 3.65rem; }
}

.nav-links {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 2.85rem;
    align-items: center;
    gap: 1.35rem;
    border-radius: 9999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-fill);
    padding: 0 1.35rem;
    backdrop-filter: blur(12px);
}

@media (min-width: 1100px) {
    .nav-links { display: flex; }
}

.nav-links a {
    font-size: 0.88rem;
    color: var(--body-muted);
    transition: color var(--duration-fast) var(--ease-entrance);
    white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.is-active {
    color: var(--gold-soft);
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    border-radius: 9999px;
    background: var(--action-inverse);
    padding: 0 1.125rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--action-inverse-fg);
    transition: background var(--duration-fast) var(--ease-entrance);
    white-space: nowrap;
}

.pill:hover { background: rgba(255, 255, 255, 0.85); }

.pill-ghost {
    background: transparent;
    color: var(--heading);
    border: 1px solid var(--glass-border);
}

.pill-ghost:hover {
    background: var(--glass-fill);
    color: var(--heading);
}

.nav-toggle {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-fill);
    color: var(--heading);
}

@media (min-width: 1100px) {
    .nav-toggle { display: none; }
}

.nav-toggle span {
    display: block;
    width: 1rem;
    height: 1.5px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.mobile-nav {
    display: none;
    position: absolute;
    inset-inline: var(--page-pad);
    top: calc(100% - 0.25rem);
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem;
    border-radius: 1rem;
    border: 1px solid var(--glass-border);
    background: rgba(13, 27, 48, 0.96);
    backdrop-filter: blur(16px);
}

.mobile-nav.is-open { display: flex; }

.mobile-nav a {
    padding: 0.7rem 0.85rem;
    border-radius: 0.65rem;
    color: var(--body-muted);
}

.mobile-nav a:hover,
.mobile-nav a.is-active {
    color: var(--gold-soft);
    background: var(--glass-fill);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.language-toggle {
    min-height: 2.5rem;
    padding: 0 .85rem;
    border: 1px solid var(--glass-border);
    border-radius: 9999px;
    background: var(--glass-fill);
    color: var(--heading);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-entrance), border-color var(--duration-fast) var(--ease-entrance);
}
.language-toggle:hover { background: rgba(255,255,255,.14); border-color: var(--gold-soft); }

.header-actions .pill-cta {
    display: none;
}

@media (min-width: 640px) {
    .header-actions .pill-cta { display: inline-flex; }
}

html[dir="rtl"] body { direction: rtl; font-family: "Cairo", sans-serif; }
html[dir="rtl"] .site-header,
html[dir="rtl"] .nav-links,
html[dir="rtl"] .header-actions,
html[dir="rtl"] .mobile-nav,
html[dir="rtl"] .footer-grid,
html[dir="rtl"] .hero-grid,
html[dir="rtl"] .contact-wrap { direction: rtl; }
html[dir="rtl"] .section-head,
html[dir="rtl"] .page-hero-inner,
html[dir="rtl"] .contact-copy,
html[dir="rtl"] .footer-col { text-align: right; }
html[dir="rtl"] input:not([dir="ltr"]),
html[dir="rtl"] textarea:not([dir="ltr"]),
html[dir="rtl"] select:not([dir="ltr"]) { direction: rtl; text-align: right; }
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"] { direction: ltr; text-align: left; }
html[dir="rtl"] .wa-float { right: auto; left: auto; }
html[dir="rtl"] .work-showcase-inner { direction: rtl; }
html[dir="rtl"] .work-gallery-copy,
html[dir="rtl"] .work-gallery-panel { direction: rtl; }
html[dir="rtl"] .work-gallery-copy { text-align: right; }
html[dir="rtl"] .work-page .filters { justify-content: flex-start; }

/* ?? Page shell ?? */
.page-main {
    padding-bottom: 0;
    background: var(--stone);
    color: var(--ink);
}

.page-hero {
    position: relative;
    padding: 3.5rem var(--page-pad) 2.5rem;
    overflow: hidden;
    color: var(--ink);
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 80% at 90% 0%, rgba(201, 164, 76, 0.16), transparent 55%),
        radial-gradient(55% 65% at 5% 40%, rgba(10, 22, 40, 0.06), transparent 50%),
        linear-gradient(180deg, #ebe8e1 0%, var(--stone) 100%);
    z-index: -1;
}

.page-hero-inner {
    max-width: var(--max);
    margin: 0 auto;
}

.eyebrow {
    display: inline-block;
    color: var(--gold-deep);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.page-hero h1 {
    max-width: 18ch;
    font-size: clamp(1.85rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--navy);
}

.page-hero p {
    margin-top: 0.9rem;
    max-width: 38rem;
    color: var(--ink-muted);
    font-size: 1.05rem;
}

.section {
    padding: 3.5rem var(--page-pad);
}

.section-inner {
    max-width: var(--max);
    margin: 0 auto;
}

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

.section-head h2 {
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--navy);
}

.section-head p {
    margin-top: 0.65rem;
    color: var(--ink-muted);
    font-size: 1.02rem;
}

.section-alt {
    background:
        linear-gradient(180deg, rgba(10, 22, 40, 0.035), transparent 40%),
        var(--stone-2);
}

.section-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 146, 58, 0.45), transparent);
    border: 0;
    margin: 0 var(--page-pad);
}

/* ?? About blocks ?? */
.pillar-grid {
    display: grid;
    gap: 1.75rem;
}

@media (min-width: 768px) {
    .pillar-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.pillar h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gold-deep);
    margin-bottom: 0.55rem;
}

.pillar p {
    color: var(--ink-muted);
    font-size: 0.98rem;
}

.founder {
    display: grid;
    gap: 1.75rem;
    align-items: center;
}

@media (min-width: 800px) {
    .founder {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 3rem;
    }
}

.founder-visual {
    aspect-ratio: 4 / 5;
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 30% 25%, rgba(201, 164, 76, 0.35), transparent 45%),
        linear-gradient(160deg, #1a2f4d, #0a1628 70%);
    border: 1px solid rgba(184, 146, 58, 0.35);
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
    min-height: 16rem;
}

.founder-visual span {
    color: rgba(238, 240, 246, 0.7);
    font-size: 0.9rem;
}

.founder blockquote {
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 500;
    line-height: 1.55;
    color: var(--navy);
}

.founder cite {
    display: block;
    margin-top: 1.25rem;
    font-style: normal;
    color: var(--gold-deep);
    font-size: 0.95rem;
}

.values-list {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 700px) {
    .values-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 2.5rem;
    }
}

.value-item {
    padding-top: 1rem;
    border-top: 1px solid var(--ink-line);
}

.value-item h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--navy);
}

.value-item p {
    color: var(--ink-muted);
    font-size: 0.95rem;
}

/* ?? Services ?? */
/* ?? Service cards ?? */
.service-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .service-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.1rem;
    }
}

@media (min-width: 1024px) {
    .service-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
    }
}

.service-cards-home {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .service-cards-home {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .service-cards-home, .service-cards:not(.service-cards-home) {
        grid-template-columns: repeat(var(--service-columns, 3), minmax(0, 1fr));
    }
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 100%;
    padding: 1.4rem 1.25rem 1.35rem;
    border-radius: 1.15rem;
    border: 1px solid var(--ink-line);
    background:
        linear-gradient(165deg, rgba(201, 164, 76, 0.1), transparent 42%),
        #f0ede7;
    color: var(--navy);
    text-decoration: none;
    overflow: hidden;
    transition:
        background 260ms var(--ease-entrance),
        border-color 260ms var(--ease-entrance),
        color 260ms var(--ease-entrance),
        transform 260ms var(--ease-entrance),
        box-shadow 260ms var(--ease-entrance);
}

.service-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gold-soft), transparent 80%);
    opacity: 0.85;
    transition: opacity 260ms var(--ease-entrance), background 260ms var(--ease-entrance);
}

.service-card:hover,
.service-card:focus-visible {
    background:
        linear-gradient(160deg, rgba(201, 164, 76, 0.22), transparent 48%),
        var(--navy);
    border-color: rgba(201, 164, 76, 0.45);
    color: #eef0f6;
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(10, 22, 40, 0.18);
    outline: none;
}

.service-card:hover::before,
.service-card:focus-visible::before {
    background: linear-gradient(180deg, var(--gold-soft), rgba(201, 164, 76, 0.15));
    opacity: 1;
}

.service-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 0.85rem;
    background: rgba(10, 22, 40, 0.06);
    color: var(--gold-deep);
    flex-shrink: 0;
    transition: background 260ms var(--ease-entrance), color 260ms var(--ease-entrance);
}

.service-card:hover .service-ico,
.service-card:focus-visible .service-ico {
    background: rgba(201, 164, 76, 0.18);
    color: var(--gold-soft);
}

.service-ico svg {
    width: 1.35rem;
    height: 1.35rem;
    display: block;
}

.service-card h3 {
    font-size: 1.12rem;
    font-weight: 600;
    color: inherit;
    letter-spacing: -0.01em;
}

.service-card p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-muted);
    flex: 1;
    transition: color 260ms var(--ease-entrance);
}

.service-card:hover p,
.service-card:focus-visible p {
    color: rgba(238, 240, 246, 0.78);
}

/* legacy rows kept harmless if used elsewhere */
.service-list { display: grid; gap: 0; }
.service-row {
    display: grid;
    gap: 0.65rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--ink-line);
}
.service-row:last-child { border-bottom: 1px solid var(--ink-line); }
.service-row h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gold-deep);
}
.service-row p { color: var(--ink-muted); }

.process {
    display: grid;
    gap: 1.5rem;
    counter-reset: step;
}

@media (min-width: 800px) {
    .process {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }
}

.process-step {
    padding-top: 1rem;
    border-top: 1px solid rgba(184, 146, 58, 0.4);
}

.process-step::before {
    counter-increment: step;
    content: "0" counter(step);
    display: block;
    color: var(--gold-deep);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    letter-spacing: 0.06em;
}

.process-step h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--navy);
}

.process-step p {
    color: var(--ink-muted);
    font-size: 0.92rem;
}

/* Services process: numbered cards, revealed in sequence by the scroll observer. */
.services-page #how .process {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.services-page #how .process-step {
    position: relative;
    min-width: 0;
    padding: clamp(1.35rem, 2.2vw, 1.8rem);
    border: 1px solid rgba(184, 146, 58, 0.22);
    border-radius: 1.5rem;
    background: radial-gradient(12rem 10rem at 100% 0%, rgba(201, 164, 76, 0.1), transparent 75%),
        linear-gradient(145deg, #faf8f3, #f0ede5);
    box-shadow: 0 12px 30px rgba(10, 22, 40, 0.08), 0 2px 6px rgba(10, 22, 40, 0.03);
    transition: transform 320ms var(--ease-out-cubic), box-shadow 320ms var(--ease-out-cubic),
        border-color 320ms var(--ease-out-cubic);
}

.services-page #how .process-step::before {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.35rem;
    border: 1px solid rgba(184, 146, 58, 0.3);
    border-radius: 50%;
    background: rgba(201, 164, 76, 0.12);
    font-size: 0.8rem;
    font-weight: 700;
    transition: background 320ms var(--ease-out-cubic), color 320ms var(--ease-out-cubic);
}

.services-page #how .process-step h3 {
    margin-bottom: 0.7rem;
    font-size: 1.1rem;
    line-height: 1.4;
}

.services-page #how .process-step p { line-height: 1.8; }

@media (min-width: 600px) {
    .services-page #how .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .services-page #how .process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (hover: hover) and (pointer: fine) {
    .services-page #how .process-step:hover {
        transform: translateY(-6px);
        border-color: rgba(184, 146, 58, 0.55);
        box-shadow: 0 22px 42px rgba(10, 22, 40, 0.13), 0 4px 10px rgba(10, 22, 40, 0.04);
    }

    .services-page #how .process-step:hover::before {
        background: var(--gold-soft);
        color: var(--navy);
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-page #how .process-step,
    .services-page #how .process-step::before { transition: none; }
    .services-page #how .process-step:hover { transform: none; }
}

/* ?? Packages ?? */
.packages {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 900px) {
    .packages {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.35rem;
        align-items: stretch;
    }
}

.package {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.35rem 1.35rem;
    border-radius: 1.15rem;
    border: 1px solid var(--ink-line);
    background:
        linear-gradient(165deg, rgba(201, 164, 76, 0.12), transparent 42%),
        #f0ede7;
    box-shadow: 0 10px 28px rgba(10, 22, 40, 0.06);
}

.package.is-featured {
    border-color: rgba(184, 146, 58, 0.55);
    background:
        linear-gradient(165deg, rgba(201, 164, 76, 0.2), transparent 48%),
        #f4f1ea;
}

.package-tag {
    font-size: 0.78rem;
    color: var(--gold-deep);
    font-weight: 600;
    margin-bottom: 0.55rem;
}

.package h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--navy);
}

.package .price {
    margin: 0.85rem 0 1rem;
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--navy);
}

.package .price span {
    font-size: 0.9rem;
    color: var(--ink-muted);
    font-weight: 400;
}

.package ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.35rem;
    flex: 1;
    display: grid;
    gap: 0.55rem;
}

.package li {
    color: var(--ink-muted);
    font-size: 0.92rem;
    padding-inline-start: 1rem;
    position: relative;
}

.package li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.55em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--gold-soft);
}

.package .pill {
    width: 100%;
    background: var(--navy);
    color: #fff;
}

.package .pill:hover {
    background: var(--navy-soft);
}

/* ?? Work studio ?? */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1.75rem;
}

.filter-btn {
    height: 2.35rem;
    padding: 0 1rem;
    border-radius: 9999px;
    border: 1px solid var(--ink-line);
    background: transparent;
    color: var(--ink-muted);
    font-size: 0.88rem;
    transition: background var(--duration-fast) var(--ease-entrance),
                color var(--duration-fast) var(--ease-entrance),
                border-color var(--duration-fast) var(--ease-entrance);
}

.filter-btn:hover {
    color: var(--navy);
    border-color: rgba(184, 146, 58, 0.5);
}

.filter-btn.is-active {
    background: rgba(201, 164, 76, 0.16);
    color: var(--gold-deep);
    border-color: rgba(184, 146, 58, 0.45);
}

.work-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.15rem;
    }
}

@media (min-width: 1024px) {
    .work-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.work-item {
    display: block;
}

.service-card[hidden],
.package[hidden],
.work-item[hidden],
.team-card[hidden],
.about-story-card[hidden],
.vmg-item[hidden],
.why-item[hidden] {
    display: none;
}

.work-thumb {
    aspect-ratio: 4 / 5;
    border-radius: 0.85rem;
    overflow: hidden;
    border: 1px solid var(--ink-line);
    background: var(--stone-2);
    position: relative;
}

.work-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 480ms var(--ease-entrance);
}

.work-item:hover .work-thumb img {
    transform: scale(1.04);
}

.work-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(10, 22, 40, 0.55) 100%);
    opacity: 0.75;
    transition: opacity 280ms var(--ease-entrance);
    pointer-events: none;
}

.work-item:hover .work-thumb::after {
    opacity: 1;
}

.work-meta {
    margin-top: 0.75rem;
}

.work-meta h3 {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--navy);
}

.work-meta p {
    margin-top: 0.2rem;
    color: var(--ink-muted);
    font-size: 0.85rem;
}

/* ?? Why us ?? */
.why-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .why-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.15rem;
    }
}

.why-item {
    position: relative;
    padding: 1.65rem 1.4rem 1.55rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(10, 22, 40, 0.1);
    background: #f4f1eb;
    box-shadow: 0 10px 28px rgba(10, 22, 40, 0.07);
    overflow: hidden;
    transition:
        transform 260ms var(--ease-entrance),
        box-shadow 260ms var(--ease-entrance),
        background 260ms var(--ease-entrance),
        border-color 260ms var(--ease-entrance);
}

.why-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(201, 164, 76, 0.16), transparent 48%);
    opacity: 0.75;
    pointer-events: none;
    transition: opacity 260ms var(--ease-entrance), background 260ms var(--ease-entrance);
}

.why-item > * {
    position: relative;
    z-index: 1;
}

.why-item:hover {
    transform: translateY(-6px);
    border-color: rgba(201, 164, 76, 0.55);
    background: var(--navy);
    box-shadow: 0 18px 40px rgba(10, 22, 40, 0.22);
}

.why-item:hover::before {
    opacity: 1;
    background: linear-gradient(160deg, rgba(201, 164, 76, 0.28), transparent 55%);
}

.why-item .num {
    display: block;
    color: var(--gold-deep);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-bottom: 0.85rem;
    transition: color 260ms var(--ease-entrance);
}

.why-item h3 {
    font-size: clamp(1.12rem, 2vw, 1.28rem);
    font-weight: 600;
    margin-bottom: 0.55rem;
    color: var(--navy);
    letter-spacing: -0.01em;
    transition: color 260ms var(--ease-entrance);
}

.why-item p {
    color: var(--ink-muted);
    font-size: 0.98rem;
    line-height: 1.6;
    transition: color 260ms var(--ease-entrance);
}

.why-item:hover .num { color: var(--gold-soft); }
.why-item:hover h3 { color: #fff; }
.why-item:hover p { color: rgba(185, 190, 207, 0.95); }

/* ?? Contact ?? */
.contact-wrap {
    display: grid;
    gap: 2rem;
}

@media (min-width: 860px) {
    .contact-wrap {
        grid-template-columns: 1fr 1.1fr;
        gap: 3rem;
        align-items: start;
    }
}

.contact-aside p {
    color: var(--ink-muted);
    margin-top: 0.75rem;
    max-width: 28rem;
}

.contact-channels {
    margin-top: 1.75rem;
    display: grid;
    gap: 0.85rem;
}

.contact-channels a {
    color: var(--gold-deep);
    font-size: 0.98rem;
    font-weight: 500;
}

.contact-channels a:hover {
    color: var(--navy);
}

.contact-form {
    display: grid;
    gap: 0.85rem;
    padding: 1.35rem;
    border-radius: 1.15rem;
    border: 1px solid var(--ink-line);
    background:
        linear-gradient(165deg, rgba(201, 164, 76, 0.1), transparent 40%),
        #f0ede7;
    box-shadow: 0 12px 32px rgba(10, 22, 40, 0.06);
}

.contact-form label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid var(--ink-line);
    background: #f7f5f1;
    color: var(--navy);
    padding: 0.8rem 0.95rem;
    font: inherit;
    outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: rgba(184, 146, 58, 0.55);
}

.contact-form textarea {
    min-height: 8rem;
    resize: vertical;
}

.contact-form .pill {
    margin-top: 0.35rem;
    justify-self: start;
    min-width: 9rem;
    background: var(--navy);
    color: #fff;
}

.contact-form .pill:hover {
    background: var(--navy-soft);
}

/* ?? Site footer ?? */
.site-footer {
    position: relative;
    margin-top: 1rem;
    padding: 3.25rem var(--page-pad) 1.5rem;
    border-top: 1px solid var(--line);
    background:
        radial-gradient(50% 80% at 0% 100%, rgba(201, 164, 76, 0.08), transparent 55%),
        radial-gradient(45% 70% at 100% 0%, rgba(60, 100, 160, 0.1), transparent 50%),
        linear-gradient(180deg, #0b1729 0%, #081320 100%);
    color: var(--body-muted);
}

.site-footer-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    gap: 2.25rem;
}

@media (min-width: 720px) {
    .site-footer-inner {
        grid-template-columns: 1.3fr 1fr 1fr;
        gap: 2rem 2.5rem;
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .site-footer-inner {
        grid-template-columns: 1.35fr 0.85fr 0.85fr 1.15fr;
        gap: 2rem 2rem;
    }
}

.footer-brand {
    display: grid;
    gap: 0.85rem;
    max-width: 18rem;
}

.footer-brand .brand-logo {
    height: 3.4rem;
}

.footer-brand p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--body-muted);
}

.footer-col h3 {
    margin-bottom: 0.9rem;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-soft);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.footer-col a {
    color: var(--body-muted);
    font-size: 0.95rem;
    transition: color var(--duration-fast) var(--ease-entrance);
}

.footer-col a:hover {
    color: var(--heading);
}

.footer-contact-list {
    display: grid;
    gap: 0.65rem;
}

.footer-contact-list a,
.footer-contact-list span {
    display: block;
    font-size: 0.95rem;
    color: var(--body-muted);
}

.footer-contact-list a:hover {
    color: var(--gold-soft);
}

.footer-map {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: var(--surface);
    aspect-ratio: 4 / 3;
    min-height: 12rem;
}

.footer-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.footer-bottom {
    max-width: var(--max);
    margin: 2.25rem auto 0;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.footer-bottom a {
    color: var(--gold-soft);
}

.footer-bottom a:hover {
    color: var(--heading);
}

/* ?? Home below-hero ?? */
.home-band {
    position: relative;
    z-index: 5;
    background: var(--stone);
    color: var(--ink);
}

.about-stage,
.studio-stage {
    position: relative;
    overflow: hidden;
    padding-top: 4.25rem;
    padding-bottom: 4.25rem;
    background:
        radial-gradient(55% 70% at 100% 0%, rgba(201, 164, 76, 0.14), transparent 55%),
        radial-gradient(45% 60% at 0% 80%, rgba(10, 22, 40, 0.05), transparent 50%),
        var(--stone);
}

.studio-stage-top {
    display: grid;
    gap: 2rem;
    margin-bottom: 1.75rem;
    align-items: end;
}

@media (min-width: 900px) {
    .studio-stage-top {
        grid-template-columns: 1.4fr 0.9fr;
        gap: 2.5rem;
    }
}

.studio-stage-copy h2 {
    max-width: 18ch;
    font-size: clamp(1.7rem, 3.4vw, 2.55rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: var(--navy);
}

.studio-stage-copy p {
    margin-top: 0.9rem;
    max-width: 36rem;
    color: var(--ink-muted);
    font-size: 1.05rem;
}

.studio-actions {
    margin-top: 1.35rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.35rem;
}

.studio-actions .pill {
    background: var(--navy);
    color: #fff;
}

.studio-actions .pill:hover {
    background: var(--navy-soft);
}

.studio-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.metric {
    padding: 1.1rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid var(--ink-line);
    background:
        linear-gradient(165deg, rgba(201, 164, 76, 0.12), transparent 45%),
        #f0ede7;
}

.metric strong {
    display: block;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.metric span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.platform-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1.85rem;
    justify-content: flex-start;
}

.platform-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    height: 2.65rem;
    padding: 0 1rem 0 0.45rem;
    border-radius: 9999px;
    border: 1px solid rgba(10, 22, 40, 0.1);
    background: #f7f4ef;
    color: var(--navy);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 16px rgba(10, 22, 40, 0.04);
    transition:
        border-color 200ms var(--ease-entrance),
        background 200ms var(--ease-entrance),
        color 200ms var(--ease-entrance),
        transform 200ms var(--ease-entrance),
        box-shadow 200ms var(--ease-entrance);
}

.platform-chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(10, 22, 40, 0.1);
}

.platform-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9999px;
    background: rgba(184, 146, 58, 0.16);
    color: var(--gold-deep);
    flex-shrink: 0;
    transition: background 200ms var(--ease-entrance), color 200ms var(--ease-entrance),
                transform 200ms var(--ease-entrance);
}

.platform-ico svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.platform-chip.is-ig:hover,
.platform-chip.is-fb:hover,
.platform-chip.is-tt:hover,
.platform-chip.is-in:hover,
.platform-chip.is-yt:hover,
.platform-chip.is-wa:hover,
.platform-chip:hover {
    background: linear-gradient(145deg, #d4b45a, var(--gold-soft) 45%, var(--gold));
    border-color: rgba(184, 146, 58, 0.65);
    color: var(--navy);
    box-shadow: 0 12px 26px rgba(184, 146, 58, 0.28);
}

.platform-chip.is-ig:hover .platform-ico,
.platform-chip.is-fb:hover .platform-ico,
.platform-chip.is-tt:hover .platform-ico,
.platform-chip.is-in:hover .platform-ico,
.platform-chip.is-yt:hover .platform-ico,
.platform-chip.is-wa:hover .platform-ico,
.platform-chip:hover .platform-ico {
    background: var(--navy);
    color: var(--gold-soft);
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.55rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 9999px;
    border: 1px solid var(--glass-border);
    background: rgba(201, 164, 76, 0.08);
    color: var(--gold-soft);
    font-size: 0;
    transition: background 180ms var(--ease-entrance), color 180ms var(--ease-entrance),
                border-color 180ms var(--ease-entrance), transform 180ms var(--ease-entrance);
}

.footer-social a:hover {
    background: var(--gold-soft);
    color: var(--navy);
    border-color: var(--gold-soft);
    transform: translateY(-2px);
}

.footer-social a svg {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

.studio-mosaic {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .studio-mosaic {
        grid-template-columns: 1.4fr 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .mosaic-wide {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }

    .mosaic-tall {
        grid-column: 2 / 4;
    }
}

.mosaic-card {
    position: relative;
    border-radius: 1.1rem;
    overflow: hidden;
    border: 1px solid var(--ink-line);
    min-height: 14rem;
    background: var(--stone-2);
}

.mosaic-wide { min-height: 22rem; }
.mosaic-tall { min-height: 16rem; }

.mosaic-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
    transition: transform 560ms var(--ease-entrance);
}

.mosaic-card:hover img {
    transform: scale(1.05);
}

.mosaic-caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    padding: 1.15rem 1.1rem;
    background: linear-gradient(180deg, transparent, rgba(10, 22, 40, 0.78));
    color: #eef0f6;
}

.mosaic-caption span {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: 0.25rem;
}

.mosaic-caption strong {
    font-size: 1.05rem;
    font-weight: 600;
}

/* Floating WhatsApp ? hidden on hero, visible after */
.wa-float {
    position: fixed;
    z-index: 80;
    inset-inline-end: var(--page-pad);
    bottom: max(1.15rem, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #25d366;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24), 0 3px 10px rgba(37, 211, 102, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    pointer-events: none;
    transition: opacity 280ms var(--ease-entrance), transform 280ms var(--ease-entrance),
                visibility 280ms;
}

.wa-float.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.wa-float:hover {
    background: #1ebe5d;
}

.wa-float svg {
    display: block;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
}

.wa-float:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.wa-float.is-visible:hover {
    transform: translateY(-3px) scale(1.04);
}

.wa-float span {
    display: none;
}

@media (max-width: 640px) {
    .wa-float {
        inset-inline-end: 1rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
        width: 3.35rem;
        height: 3.35rem;
    }
}

.about-stage::before {
    content: none;
}

.about-stage-head {
    display: grid;
    gap: 2rem;
    margin-bottom: 2.75rem;
    align-items: end;
}

@media (min-width: 860px) {
    .about-stage-head {
        grid-template-columns: 1.35fr 0.65fr;
        gap: 3rem;
    }
}

.about-stage-copy .eyebrow {
    margin-bottom: 0.85rem;
}

.about-stage-copy h2 {
    max-width: 16ch;
    font-size: clamp(1.7rem, 3.4vw, 2.55rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: var(--navy);
}

.about-stage-copy p {
    margin-top: 0.9rem;
    max-width: 34rem;
    color: var(--ink-muted);
    font-size: 1.05rem;
}

.about-stage-copy .pill {
    margin-top: 1.35rem;
    background: var(--navy);
    color: #fff;
}

.about-stage-copy .pill:hover {
    background: var(--navy-soft);
}

.about-stage-mark {
    display: none;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0.15rem;
    min-height: 8rem;
    padding: 1.25rem 1.35rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(184, 146, 58, 0.35);
    background:
        linear-gradient(145deg, rgba(201, 164, 76, 0.18), transparent 48%),
        #efece5;
}

@media (min-width: 860px) {
    .about-stage-mark { display: flex; }
}

.about-stage-mark span {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.1;
    color: var(--gold-deep);
}

.about-stage-mark span:last-child {
    color: var(--navy);
    opacity: 0.7;
    letter-spacing: 0.28em;
    font-size: clamp(0.85rem, 1.4vw, 1.05rem);
}

.about-pillar-rail {
    display: grid;
    gap: 0.9rem;
}

@media (min-width: 800px) {
    .about-pillar-rail {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.1rem;
    }
}

.about-pillar {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: 1.35rem 1.2rem 1.4rem;
    border-radius: 1.1rem;
    border: 1px solid var(--ink-line);
    background:
        linear-gradient(165deg, rgba(201, 164, 76, 0.1), transparent 40%),
        #f0ede7;
    overflow: hidden;
    transition: border-color 220ms var(--ease-entrance), transform 220ms var(--ease-entrance),
                box-shadow 220ms var(--ease-entrance);
}

.about-pillar::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--gold-soft), transparent 85%);
}

.about-pillar:hover {
    border-color: rgba(184, 146, 58, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(10, 22, 40, 0.08);
}

.about-pillar-num {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--gold-deep);
}

.about-pillar-body h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: var(--navy);
}

.about-pillar-body p {
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.section-cta {
    margin-top: 1.75rem;
}

.text-link {
    color: var(--gold-deep);
    font-size: 0.98rem;
    font-weight: 600;
    transition: color var(--duration-fast) var(--ease-entrance);
}

.text-link:hover {
    color: var(--navy);
}

.contact-title {
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--navy);
}

.form-note {
    color: var(--gold-deep);
    font-size: 0.9rem;
}

.work-grid-home {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .work-grid-home {
        grid-template-columns: repeat(3, 1fr);
    }
}

.team-grid {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.35rem;
    }
}

.team-card {
    display: grid;
    gap: 0;
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1px solid var(--ink-line);
    background: #f0ede7;
    transition: transform 220ms var(--ease-entrance), box-shadow 220ms var(--ease-entrance),
                border-color 220ms var(--ease-entrance);
}

.team-card:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 146, 58, 0.4);
    box-shadow: 0 16px 36px rgba(10, 22, 40, 0.08);
}

.team-photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--stone-2);
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 480ms var(--ease-entrance);
}

.team-card:hover .team-photo img {
    transform: scale(1.04);
}

.team-info {
    padding: 1.15rem 1.15rem 1.3rem;
}

.team-info h3 {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.25rem;
}

.team-role {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gold-deep);
    margin-bottom: 0.55rem;
}

.team-info p:last-child {
    font-size: 0.92rem;
    color: var(--ink-muted);
    line-height: 1.5;
}

.team-grid-home .team-card:nth-child(n + 4) {
    display: none;
}

@media (min-width: 1024px) {
    .team-grid-home {
        grid-template-columns: repeat(3, 1fr);
    }
}
.thumb-b { background: linear-gradient(160deg, #2a2218 0%, #0a1628 50%, #1a4060 100%); }
.thumb-c { background: linear-gradient(135deg, #14283f, #0a1628 40%, #5a4520); }
.thumb-d { background: linear-gradient(180deg, #24384f, #0d1b30 60%, #4a3818); }
.thumb-e { background: linear-gradient(155deg, #0f2438, #1a3048 40%, #0a1628 80%); }
.thumb-f { background: linear-gradient(140deg, #3a2a12, #0a1628 45%, #1c3550); }
.thumb-g { background: linear-gradient(170deg, #152033, #0a1628, #2c2410); }
.thumb-h { background: linear-gradient(150deg, #1b2f48, #102030 50%, #463518); }
.thumb-i { background: linear-gradient(145deg, #0c1a2c, #243044 40%, #0a1628); }

/* ?? Shared brand lockup (inner pages) ?? */
.brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.hero-brand {
    margin: 0;
    font-family: "Cinzel", serif;
    font-size: clamp(2.2rem, 6vw, 3.8rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c9a44c;
}

.brand-rule {
    display: block;
    width: min(9.5rem, 42%);
    height: 2px;
    margin: 1rem auto 0.9rem;
    background: linear-gradient(90deg,
        transparent 0%,
        #b8923a 18%,
        #e8c56a 50%,
        #b8923a 82%,
        transparent 100%);
}

.hero-brand-sub {
    margin: 0;
    font-family: "Cairo", sans-serif;
    font-size: clamp(0.9rem, 1.9vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.pill-ghost-light {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(212, 176, 90, 0.45);
}

.pill-ghost-light:hover {
    background: rgba(201, 164, 76, 0.14);
    color: #fff;
}

/* ?? About page ?? */
.about-hero {
    position: relative;
    min-height: 100lvh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6.75rem var(--page-pad) 5rem;
    overflow: hidden;
    background: var(--hero-base);
    color: #eef0f6;
}

.about-hero-glow {
    position: absolute;
    inset: -12% -8%;
    background:
        radial-gradient(42% 48% at 50% 32%, rgba(201, 164, 76, 0.22), transparent 62%),
        radial-gradient(55% 50% at 18% 82%, rgba(60, 100, 160, 0.18), transparent 55%),
        radial-gradient(48% 42% at 88% 68%, rgba(201, 164, 76, 0.12), transparent 52%);
    animation: about-glow 11s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes about-glow {
    from { transform: scale(1) translateY(0); opacity: 0.82; }
    to { transform: scale(1.07) translateY(-2.5%); opacity: 1; }
}

.about-hero-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(95% 85% at 50% 42%,
        rgba(10, 22, 40, 0.15) 0%,
        rgba(10, 22, 40, 0.52) 52%,
        rgba(10, 22, 40, 0.82) 100%);
    pointer-events: none;
}

.about-hero-lines {
    position: absolute;
    inset: 18% 8% 22%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    animation: about-lines-in 1.6s var(--ease-entrance) 0.9s forwards;
}

.about-hero-lines span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(201, 164, 76, 0.18) 20%,
        rgba(201, 164, 76, 0.32) 50%,
        rgba(201, 164, 76, 0.18) 80%,
        transparent);
}

.about-hero-lines span:nth-child(1) { top: 18%; }
.about-hero-lines span:nth-child(2) { top: 48%; opacity: 0.7; }
.about-hero-lines span:nth-child(3) { top: 78%; opacity: 0.45; }

@keyframes about-lines-in {
    from { opacity: 0; transform: scaleX(0.88); }
    to { opacity: 1; transform: scaleX(1); }
}

.about-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-hero-logo {
    margin-bottom: 1.1rem;
    opacity: 0;
    transform: translateY(1.2rem) scale(0.94);
    animation: about-enter 1.05s var(--ease-entrance) 0.15s forwards;
}

.about-hero-logo img {
    width: auto;
    height: auto;
    max-width: 12rem;
    max-height: 24vh;
    filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.5));
    animation: about-logo-drift 7s ease-in-out 1.4s infinite;
}

@keyframes about-logo-drift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-0.5rem) rotate(2deg); }
}

@keyframes about-enter {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 640px) {
    .about-hero-logo img { max-width: 15rem; max-height: 28vh; }
}

.about-hero-lockup .hero-brand,
.about-hero-lockup .brand-rule,
.about-hero-lockup .hero-brand-sub,
.about-hero-lead,
.about-hero-actions {
    opacity: 0;
    transform: translateY(1.1rem);
    animation: about-enter 0.95s var(--ease-entrance) forwards;
}

.about-hero-lockup .hero-brand { animation-delay: 0.32s; }
.about-hero-lockup .brand-rule { animation-delay: 0.48s; }
.about-hero-lockup .hero-brand-sub { animation-delay: 0.58s; }
.about-hero-lead { animation-delay: 0.72s; }
.about-hero-actions { animation-delay: 0.88s; }

.about-hero-lead {
    margin-top: 1.35rem;
    max-width: 34rem;
    color: rgba(185, 190, 207, 0.95);
    font-size: clamp(0.98rem, 1.7vw, 1.12rem);
    line-height: 1.65;
}

.about-hero-actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.about-hero-actions .pill {
    background: #fff;
    color: var(--action-inverse-fg);
    transition: transform 220ms var(--ease-entrance), box-shadow 220ms var(--ease-entrance);
}

.about-hero-actions .pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.about-hero-scroll {
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    color: rgba(238, 240, 246, 0.55);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0;
    transform: translate(-50%, 0.8rem);
    animation: about-scroll-enter 0.9s var(--ease-entrance) 1.15s forwards;
}

@keyframes about-scroll-enter {
    to { opacity: 1; transform: translate(-50%, 0); }
}

.about-hero-scroll i {
    display: block;
    width: 1px;
    height: 2.2rem;
    background: linear-gradient(180deg, rgba(201, 164, 76, 0.7), transparent);
    animation: about-scroll-line 1.8s ease-in-out infinite;
}

@keyframes about-scroll-line {
    0%, 100% { transform: scaleY(0.55); opacity: 0.4; transform-origin: top; }
    50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

.about-page .page-main {
    background: var(--stone);
}

.about-page-hero {
    padding-top: 4rem;
    padding-bottom: 3rem;
}

.about-page-hero h1 {
    max-width: 16ch;
}

.section-head-wide {
    max-width: 44rem;
}

/* Story ? three principles */
.about-story-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 800px) {
    .about-story-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.15rem;
    }
}

.about-story-card {
    position: relative;
    padding: 1.65rem 1.4rem 1.55rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(10, 22, 40, 0.1);
    background: #f4f1eb;
    box-shadow: 0 10px 28px rgba(10, 22, 40, 0.07);
    overflow: hidden;
    transition:
        transform 260ms var(--ease-entrance),
        box-shadow 260ms var(--ease-entrance),
        background 260ms var(--ease-entrance),
        border-color 260ms var(--ease-entrance);
}

.about-story-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(201, 164, 76, 0.16), transparent 48%);
    opacity: 0.75;
    pointer-events: none;
    transition: opacity 260ms var(--ease-entrance), background 260ms var(--ease-entrance);
}

.about-story-card > * {
    position: relative;
    z-index: 1;
}

.about-story-card:hover {
    transform: translateY(-6px);
    border-color: rgba(201, 164, 76, 0.55);
    background: var(--navy);
    box-shadow: 0 18px 40px rgba(10, 22, 40, 0.22);
}

.about-story-card:hover::before {
    opacity: 1;
    background: linear-gradient(160deg, rgba(201, 164, 76, 0.28), transparent 55%);
}

.about-story-num {
    display: block;
    color: var(--gold-deep);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-bottom: 0.85rem;
    transition: color 260ms var(--ease-entrance);
}

.about-story-card h3 {
    color: var(--navy);
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    font-weight: 600;
    margin-bottom: 0.55rem;
    letter-spacing: -0.01em;
    transition: color 260ms var(--ease-entrance);
}

.about-story-card p {
    color: var(--ink-muted);
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 28ch;
    transition: color 260ms var(--ease-entrance);
}

.about-story-card:hover .about-story-num { color: var(--gold-soft); }
.about-story-card:hover h3 { color: #fff; }
.about-story-card:hover p { color: rgba(185, 190, 207, 0.95); }

.home-vmg {
    margin-top: 3.25rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(184, 146, 58, 0.28);
}

.vmg-stack {
    display: grid;
    gap: 1rem;
}

@media (min-width: 800px) {
    .vmg-stack {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.15rem;
    }
}

.vmg-item {
    position: relative;
    display: grid;
    gap: 0.85rem;
    padding: 1.55rem 1.35rem 1.5rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(10, 22, 40, 0.1);
    background: #f4f1eb;
    box-shadow: 0 10px 28px rgba(10, 22, 40, 0.07);
    overflow: hidden;
    transition:
        transform 260ms var(--ease-entrance),
        box-shadow 260ms var(--ease-entrance),
        background 260ms var(--ease-entrance),
        border-color 260ms var(--ease-entrance);
}

.vmg-item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gold-soft), transparent 85%);
    transition: width 260ms var(--ease-entrance), background 260ms var(--ease-entrance);
}

.vmg-item:hover {
    transform: translateY(-6px);
    border-color: rgba(201, 164, 76, 0.55);
    background: var(--navy);
    box-shadow: 0 18px 40px rgba(10, 22, 40, 0.22);
}

.vmg-item:hover::before {
    width: 4px;
    background: linear-gradient(180deg, #e8c56a, rgba(201, 164, 76, 0.2));
}

.vmg-label {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.vmg-label span {
    color: var(--gold-deep);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    transition: color 260ms var(--ease-entrance);
}

.vmg-label h3 {
    color: var(--navy);
    font-size: clamp(1.2rem, 2.2vw, 1.4rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    transition: color 260ms var(--ease-entrance);
}

.vmg-item p {
    color: var(--ink-muted);
    font-size: 0.98rem;
    line-height: 1.6;
    transition: color 260ms var(--ease-entrance);
}

.vmg-item:hover .vmg-label span { color: var(--gold-soft); }
.vmg-item:hover .vmg-label h3 { color: #fff; }
.vmg-item:hover p { color: rgba(185, 190, 207, 0.95); }
/* Founder */
.about-page .founder-visual {
    position: relative;
    overflow: hidden;
    padding: 0;
    display: block;
    min-height: 22rem;
}

.about-page .founder-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.about-founder-copy {
    display: grid;
    gap: 0.85rem;
    align-content: center;
}

.about-founder-copy h2 {
    color: var(--navy);
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.about-founder-copy .text-link {
    justify-self: start;
    margin-top: 0.35rem;
}

.about-founder-copy .text-link:hover {
    transform: translateX(4px);
}

/* Values ? editorial rows */
.about-values-list {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(10, 22, 40, 0.12);
}

.about-value-row {
    display: grid;
    gap: 0.45rem;
    padding: 1.45rem 0;
    border-bottom: 1px solid rgba(10, 22, 40, 0.1);
}

@media (min-width: 700px) {
    .about-value-row {
        grid-template-columns: minmax(10rem, 16rem) 1fr;
        gap: 2rem;
        align-items: baseline;
        padding: 1.6rem 0;
    }
}

.about-value-row h3 {
    color: var(--navy);
    font-size: 1.12rem;
    font-weight: 600;
}

.about-value-row p {
    color: var(--ink-muted);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 38rem;
}

.about-cta-band {
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(201, 164, 76, 0.18), transparent 55%),
        radial-gradient(40% 60% at 0% 100%, rgba(60, 100, 160, 0.14), transparent 50%),
        var(--navy);
    color: #eef0f6;
}

.about-cta-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.about-cta-band .eyebrow { color: var(--gold-soft); }
.about-cta-band h2 {
    color: #fff;
    font-size: clamp(1.5rem, 3.2vw, 2.2rem);
    font-weight: 600;
    max-width: 18ch;
    line-height: 1.2;
    margin-top: 0.35rem;
}
.about-cta-band p {
    margin-top: 0.55rem;
    color: rgba(185, 190, 207, 0.95);
    max-width: 32rem;
}
.about-cta-band .pill {
    background: #fff;
    color: var(--action-inverse-fg);
    transition: transform 220ms var(--ease-entrance), box-shadow 220ms var(--ease-entrance);
}
.about-cta-band .pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}
/* Armed only after the scroll observer is ready; layout stays stable. */
[data-scroll-pending] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-scroll-pending] { opacity: 1; }
}

@media print {
    [data-scroll-pending] { opacity: 1; }
}

/* Home page: a clearer social studio system */
.home-band > .section { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.home-band .section-head { max-width: 46rem; margin-bottom: 2.35rem; }
.home-band .section-head .eyebrow {
    padding: 0.3rem 0.75rem;
    border: 1px solid rgba(184, 146, 58, 0.28);
    border-radius: 999px;
    background: rgba(201, 164, 76, 0.1);
}
.home-band :is(#about-preview, #services-preview, #packages-preview, #why-us) > .section-inner > .section-head h2,
.home-band .home-vmg > .section-head h2,
.home-band #contact .contact-title,
.services-page .page-hero h1,
.team-page .page-hero h1,
.packages-page .page-hero h1,
.packages-page #package-fit-title,
.team-page #team-founder-title,
.services-page #how .section-head h2 {
    max-width: 21ch;
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.5vw, 2.65rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
}
.home-band .section-head p { max-width: 39rem; line-height: 1.7; }

/* A small, goal-led guide beneath the packages. */
.package-fit { padding-top: 1rem; padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.package-fit-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.package-fit-intro { max-width: 45ch; margin-top: 1rem; color: var(--ink-muted); line-height: 1.8; }
.package-fit-options { display: grid; gap: .8rem; margin-top: 1.75rem; }
.package-fit-option {
    display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1.1rem;
    gap: .9rem; align-items: center; width: 100%; padding: 1.1rem;
    border: 1px solid var(--ink-line); border-radius: 1rem; text-align: start;
    background: rgba(255, 255, 255, .36); color: var(--navy);
    transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.package-fit-option:hover { transform: translateY(-2px); border-color: var(--gold); }
.package-fit-option[aria-pressed="true"] { border-color: var(--gold); background: #f7f2e5; box-shadow: 0 5px 18px rgba(10, 22, 40, .045); }
.package-fit-number { color: var(--gold-deep); font-size: .8rem; letter-spacing: .08em; }
.package-fit-option strong { display: block; font-size: 1rem; font-weight: 600; }
.package-fit-option strong + span { display: block; margin-top: .2rem; color: var(--ink-muted); font-size: .84rem; line-height: 1.6; }
.package-fit-radio { width: 1.05rem; height: 1.05rem; border: 1px solid #9a927f; border-radius: 50%; }
.package-fit-option[aria-pressed="true"] .package-fit-radio { border: 5px solid var(--gold); background: var(--navy); }
.package-fit-option:focus-visible, .package-fit-actions a:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.package-fit-result {
    position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.5rem, 3vw, 2.75rem);
    border: 1px solid rgba(201, 164, 76, .35); border-radius: 1.65rem;
    background: radial-gradient(ellipse at 100% 0%, rgba(201, 164, 76, .18), transparent 60%), linear-gradient(140deg, #102238, #081424);
    box-shadow: 0 22px 55px rgba(10, 22, 40, .14); color: #fff;
}
.package-fit-orbit { position: absolute; z-index: -1; width: 25rem; height: 25rem; inset-block-start: -14rem; inset-inline-end: -10rem; border: 1px solid rgba(201, 164, 76, .2); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(201, 164, 76, .035), 0 0 0 4rem rgba(201, 164, 76, .025); pointer-events: none; }
.package-fit-result .eyebrow { color: var(--gold-soft); }
.package-fit-answer h3 { margin-block: .4rem 1rem; font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.package-fit-answer > p { color: var(--body-muted); line-height: 1.8; }
.package-fit-answer ul { display: grid; gap: .75rem; padding: 0; margin-block: 1.5rem; list-style: none; }
.package-fit-answer li { display: flex; gap: .65rem; color: #e3e7ee; font-size: .92rem; line-height: 1.6; }
.package-fit-answer li::before { content: "✓"; color: var(--gold-soft); }
.package-fit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.package-fit-actions .pill { background: var(--gold-soft); color: var(--navy); font-weight: 600; }
.package-fit-actions .pill:hover { background: #dfba61; }
.package-fit-actions .text-link { color: #e1c67f; font-size: .9rem; }
.package-fit-note { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .12); color: #b9becf; font-size: .8rem; line-height: 1.8; }
.packages-page .package { scroll-margin-top: 7rem; }
.process-step { border-radius: var(--card-radius, 1.35rem); }
.packages-page .package:focus { outline: 2px solid var(--gold); outline-offset: 5px; }
@media (max-width: 800px) { .package-fit-layout { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .package-fit-option { transition: none; } .package-fit-option:hover { transform: none; } }

/* A founder's welcome leads into the team, without a repeated list heading. */
.team-founder-section { padding-block: clamp(2rem, 4vw, 3.5rem) 1.5rem; }
.team-founder-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    overflow: hidden;
    border: 1px solid rgba(184, 146, 58, .3);
    border-radius: 1.5rem;
    background: radial-gradient(ellipse at top left, rgba(201, 164, 76, .13), transparent 65%), var(--navy);
    box-shadow: 0 20px 50px rgba(10, 22, 40, .12);
}
.team-founder-copy { padding: clamp(1.5rem, 3.5vw, 3rem); align-self: center; }
.team-founder-copy .eyebrow { color: var(--gold-soft); }
.team-page #team-founder-title { max-width: 24ch; color: #fff; }
.team-founder-copy blockquote { margin-top: 1.25rem; }
.team-founder-copy blockquote p { max-width: 58ch; color: var(--body-muted); font-size: 1.05rem; line-height: 1.9; }
.team-founder-signature {
    display: grid; gap: .2rem; margin-top: 1.5rem; padding-inline-start: 1rem;
    border-inline-start: 2px solid var(--gold); color: #fff;
}
.team-founder-signature [data-founder-name] { font-weight: 700; }
.team-founder-signature [data-founder-role] { color: var(--gold-soft); font-size: .85rem; }
.team-founder-photo { aspect-ratio: auto; min-height: 24rem; }
.team-founder-photo img { object-position: center 30%; }
.team-page .team-list { padding-top: .75rem; }
.team-page .team-list .team-card { grid-template-rows: auto 1fr; }
.team-page .team-list .team-photo {
    aspect-ratio: auto;
    height: var(--team-photo-height, 280px);
}
.team-page .team-list .team-photo img { object-position: center 15%; }
.team-page .team-list .team-info { padding: 1rem 1.1rem 1.15rem; }
.team-page .page-hero { padding-block: 2rem 1.75rem; }
@media (max-width: 700px) {
    .team-page .team-list .team-photo { height: min(var(--team-photo-height, 280px), 224px); }
    .team-founder-card { grid-template-columns: minmax(0, 1fr); }
    .team-founder-photo { min-height: 0; height: 22rem; }
    .team-founder-photo img { object-position: center 25%; }
}
.home-band .section-line { max-width: var(--max); margin-inline: auto; }

.about-story-card,
.vmg-item,
.service-card,
.package,
.why-item,
.team-card,
.contact-form,
.metric,
.mosaic-card { border-radius: var(--card-radius, 1.35rem); }

.about-story-card,
.service-card,
.package,
.why-item,
.team-card,
.contact-form,
.metric { box-shadow: 0 14px 34px rgba(10, 22, 40, 0.075); }

.about-story-card { min-height: 12.5rem; padding: 1.75rem; }
.about-story-num,
.why-item .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(184, 146, 58, 0.3);
    border-radius: 50%;
    background: rgba(201, 164, 76, 0.12);
}
.about-story-card p { max-width: 34ch; }

.home-vmg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: clamp(3rem, 6vw, 5rem);
    padding: clamp(1.25rem, 4vw, 3rem);
    border: 1px solid rgba(201, 164, 76, 0.22);
    border-radius: 1.75rem;
    background:
        radial-gradient(ellipse at 95% 10%, rgba(201, 164, 76, .19), transparent 54%),
        radial-gradient(ellipse at 5% 100%, rgba(50, 87, 125, .2), transparent 60%),
        linear-gradient(125deg, #081424, #122238 65%, #0a1628);
    box-shadow: 0 24px 60px rgba(10, 22, 40, 0.16);
}
.home-vmg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--direction-bg-opacity, .28);
    background-image: var(--direction-background-image, none), repeating-radial-gradient(ellipse at 100% 115%, transparent 0 3.8rem, rgba(201, 164, 76, .5) 3.85rem 3.9rem, transparent 3.95rem 6.5rem);
    background-size: cover;
    background-position: center;
    mask-image: linear-gradient(110deg, transparent 5%, #000 80%);
}
.home-vmg::after {
    content: "";
    position: absolute;
    inset-block-start: -3rem;
    inset-inline-end: 1.5rem;
    width: min(var(--direction-logo-size, 17rem), 44vw);
    aspect-ratio: 1;
    z-index: -1;
    pointer-events: none;
    background: var(--direction-logo-image, url("logo.png")) center / contain no-repeat;
    opacity: var(--direction-logo-opacity, .075);
    mix-blend-mode: screen;
    transform: rotate(-12deg);
}
.home-vmg .section-head { position: relative; z-index: 1; }
.home-vmg .section-head .eyebrow { color: var(--gold-soft); }
.home-vmg .section-head h2 { color: #fff; }
.home-band .home-vmg > .section-head { max-width: none; }
.home-band .home-vmg > .section-head h2 { max-width: none; }
.vmg-item {
    align-content: start;
    min-height: 13rem;
    border-color: rgba(238, 240, 246, 0.14);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: none;
}
.vmg-item:hover { background: rgba(255, 255, 255, 0.1); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16); }
.vmg-label h3 { color: #fff; }
.vmg-item p { color: rgba(238, 240, 246, 0.76); }

.studio-stage {
    background: radial-gradient(44rem 27rem at 100% 0%, rgba(201, 164, 76, 0.2), transparent 70%), linear-gradient(145deg, #ece8df, #e1ddd4 62%, #e9e5dc);
}
.studio-stage-top { gap: clamp(1.5rem, 3vw, 3rem); }
.studio-stage-copy h2 { max-width: 16ch; }
.metric { border-color: rgba(184, 146, 58, 0.25); background: linear-gradient(150deg, #faf8f3, #eae6dc); }
.metric strong { color: var(--gold-deep); }
.platform-strip { gap: 0.6rem; }
.platform-chip { background: rgba(255, 255, 255, 0.68); }
.studio-mosaic { gap: 1rem; }
.mosaic-card { min-height: 17rem; border-color: rgba(10, 22, 40, 0.16); box-shadow: 0 16px 36px rgba(10, 22, 40, 0.1); }
.mosaic-wide { min-height: 25rem; }
.mosaic-tall { min-height: 18rem; }
.mosaic-caption { padding: 1.35rem; background: linear-gradient(180deg, transparent 4%, rgba(10, 22, 40, 0.84)); }
.mosaic-caption strong { font-size: 1.15rem; }

.service-card {
    min-height: 17rem;
    padding: 1.6rem;
    background: radial-gradient(16rem 12rem at 100% 0%, rgba(201, 164, 76, 0.16), transparent 75%), linear-gradient(145deg, #f8f6f1, #ece8df);
}
.service-card:hover,
.service-card:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(10, 22, 40, 0.2); }
.service-ico { width: 3.2rem; height: 3.2rem; border: 1px solid rgba(184, 146, 58, 0.25); background: rgba(201, 164, 76, 0.12); }

.package { padding: 1.8rem; background: linear-gradient(145deg, #faf8f3, #ebe7de); }
.package.is-featured {
    border-color: rgba(184, 146, 58, 0.7);
    background: radial-gradient(22rem 18rem at 100% 0%, rgba(201, 164, 76, 0.23), transparent 75%), linear-gradient(145deg, #f8f4e9, #e8e1d1);
    box-shadow: 0 20px 44px rgba(10, 22, 40, 0.14);
}
.package-tag { align-self: flex-start; padding: 0.25rem 0.65rem; border: 1px solid rgba(184, 146, 58, 0.24); border-radius: 999px; background: rgba(201, 164, 76, 0.12); }

/* A darker pause between the light home sections, with the current brand mark. */
.home-band #packages-preview {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #f7f4ed;
    background:
        radial-gradient(ellipse at 90% 8%, rgba(201, 164, 76, .17), transparent 47%),
        radial-gradient(ellipse at 3% 96%, rgba(81, 117, 142, .19), transparent 55%),
        linear-gradient(125deg, #0b1a2b 0%, #142b3d 54%, #0a1828 100%);
}
.home-band #packages-preview::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset-block-start: clamp(1rem, 5vw, 4rem);
    inset-inline-end: clamp(-4rem, 5vw, 5rem);
    width: clamp(15rem, 27vw, 26rem);
    aspect-ratio: 1;
    background: var(--packages-logo-image, url("logo.png")) center / contain no-repeat;
    opacity: .105;
    pointer-events: none;
}
.home-band #packages-preview::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: repeating-radial-gradient(ellipse at 92% 4%, transparent 0 5rem, rgba(201, 164, 76, .13) 5.05rem 5.1rem, transparent 5.15rem 8rem);
    mask-image: linear-gradient(270deg, #000, transparent 73%);
    pointer-events: none;
}
.home-band #packages-preview > .section-inner { position: relative; z-index: 1; }
.home-band #packages-preview .section-head h2 { color: #fff; }
.home-band #packages-preview .section-head p { color: #c5d0dc; }
.home-band #packages-preview .section-head .eyebrow {
    color: #e8c978;
    border-color: rgba(232, 201, 120, .34);
    background: rgba(232, 201, 120, .12);
}
.home-band #packages-preview .package {
    border-color: rgba(255, 255, 255, .52);
    box-shadow: 0 22px 42px rgba(3, 11, 21, .2);
}
.home-band #packages-preview .package.is-featured {
    border-color: #d7b45d;
    background: radial-gradient(23rem 15rem at 100% 0%, rgba(201, 164, 76, .3), transparent 72%), linear-gradient(150deg, #faf7ed, #eae3d3);
    box-shadow: 0 26px 50px rgba(3, 11, 21, .29);
}
.home-band #packages-preview .package .pill:focus-visible { outline: 3px solid #e8c978; outline-offset: 3px; }
@media (max-width: 639px) {
    .home-band #packages-preview::before { inset-block-start: 2rem; inset-inline-end: -4rem; width: 15rem; opacity: .09; }
    .home-band #packages-preview::after { opacity: .55; }
}

/* Packages get their own visual chapter so the page does not read as one long stone canvas. */
.packages-page .packages-showcase {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 1rem;
    padding-block: clamp(3rem, 6vw, 5rem);
    background:
        radial-gradient(34rem 20rem at 8% 10%, rgba(201, 164, 76, 0.14), transparent 70%),
        radial-gradient(30rem 18rem at 94% 90%, rgba(10, 22, 40, 0.08), transparent 72%),
        linear-gradient(145deg, #e8e3d9, #dcd7cd);
}
.packages-page .packages-showcase::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -14rem -8rem auto auto;
    width: 38rem;
    height: 38rem;
    border: 1px solid rgba(184, 146, 58, 0.18);
    border-radius: 50%;
    box-shadow: 0 0 0 2rem rgba(184, 146, 58, 0.035), 0 0 0 5rem rgba(184, 146, 58, 0.025);
    pointer-events: none;
}
.packages-page .packages-showcase > .section-inner { position: relative; z-index: 1; }
.packages-page .packages-showcase .package { min-height: 29rem; }
.packages-page .packages-showcase .package.is-featured {
    border-color: rgba(201, 164, 76, 0.78);
    background:
        radial-gradient(24rem 16rem at 100% 0%, rgba(201, 164, 76, 0.22), transparent 70%),
        linear-gradient(145deg, #12243a, #0a1628 72%);
    box-shadow: 0 24px 48px rgba(10, 22, 40, 0.24);
    transform: translateY(-0.65rem);
}
.packages-page .packages-showcase .package.is-featured h3,
.packages-page .packages-showcase .package.is-featured .price { color: #fff; }
.packages-page .packages-showcase .package.is-featured .package-tag {
    border-color: rgba(201, 164, 76, 0.5);
    background: rgba(201, 164, 76, 0.16);
    color: #e7c56a;
}
.packages-page .packages-showcase .package.is-featured .price span,
.packages-page .packages-showcase .package.is-featured li { color: rgba(238, 240, 246, 0.78); }
.packages-page .packages-showcase .package.is-featured li::before { background: #e7c56a; }
.packages-page .packages-showcase .package.is-featured .pill { background: #d1aa4b; color: #0a1628; }
.packages-page .packages-showcase .package.is-featured .pill:hover { background: #e7c56a; }
@media (max-width: 899px) {
    .packages-page .packages-showcase .package.is-featured { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .packages-page .packages-showcase .package.is-featured { transform: none; }
}

.work-grid-home .work-item {
    overflow: hidden;
    border: 1px solid rgba(10, 22, 40, 0.12);
    border-radius: 1.35rem;
    background: #f7f4ed;
    box-shadow: 0 12px 30px rgba(10, 22, 40, 0.07);
    transition: transform 240ms var(--ease-entrance), box-shadow 240ms var(--ease-entrance);
}
.work-grid-home .work-item:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(10, 22, 40, 0.14); }
.work-grid-home .work-thumb { aspect-ratio: 4 / 3; border: 0; border-radius: 0; }
.work-grid-home .work-meta { margin: 0; padding: 1.1rem 1.2rem 1.25rem; }

.why-item { min-height: 14rem; padding: 1.7rem; background: linear-gradient(145deg, #faf8f3, #ebe7de); }
.team-grid-home .team-card { background: #f8f6f0; }
.team-grid-home .team-photo { aspect-ratio: 4 / 3; }
.team-grid-home .team-info { padding: 1.25rem 1.35rem 1.5rem; }

@media (min-width: 640px) and (max-width: 899px) {
    .packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.home-band #contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--heading);
    background:
        radial-gradient(ellipse at 85% 15%, rgba(201, 164, 76, 0.14), transparent 55%),
        linear-gradient(135deg, #081424, #12243a 60%, #0a1628);
}

.home-band #contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--contact-bg-opacity, 0.18);
    background:
        var(--contact-background-image, none), repeating-radial-gradient(ellipse at 0% 110%, transparent 0 4.4rem, rgba(201, 164, 76, 0.65) 4.45rem 4.5rem, transparent 4.55rem 7rem);
    background-size: cover;
    background-position: center;
    mask-image: linear-gradient(90deg, #000, transparent 80%);
}

.home-band #contact .contact-aside { max-width: 28rem; min-width: 0; }

.home-band #contact .contact-aside::after {
    content: "";
    display: block;
    width: min(var(--contact-logo-size, 18rem), 75%);
    aspect-ratio: 1;
    margin: 1.25rem auto 0;
    pointer-events: none;
    background: var(--contact-logo-image, url("logo.png")) center / contain no-repeat;
    opacity: var(--contact-logo-opacity, 0.07);
    mix-blend-mode: screen;
}

#contact .contact-aside .eyebrow { color: var(--gold-soft); }
#contact .contact-title { max-width: 16ch; color: #fff; }
#contact .contact-aside p { color: rgba(238, 240, 246, 0.74); }
#contact .contact-form {
    border-color: rgba(238, 240, 246, 0.14);
    background: rgba(22, 36, 54, 0.82);
    backdrop-filter: blur(8px);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.2);
}
#contact .contact-form label { color: rgba(238, 240, 246, 0.82); }
#contact .contact-form input,
#contact .contact-form textarea,
#contact .contact-form select {
    border-color: rgba(238, 240, 246, 0.16);
    background: rgba(5, 14, 27, 0.56);
    color: #fff;
}
#contact .contact-form input::placeholder,
#contact .contact-form textarea::placeholder { color: rgba(185, 190, 207, 0.72); }
#contact .contact-form .pill { background: var(--gold-soft); color: var(--navy); font-weight: 700; }
#contact .contact-form .pill:hover { background: #e3be61; }
#contact .form-note { color: #e5c56f; }

@media (min-width: 480px) and (max-width: 839px) {
    .studio-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mosaic-wide,
    .mosaic-tall { grid-column: 1 / -1; }
    .mosaic-wide { min-height: 24rem; }
    .mosaic-tall { min-height: 16rem; }
}

@media (min-width: 840px) {
    .studio-mosaic { grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: minmax(11rem, 1fr) minmax(11rem, 1fr); }
    .mosaic-wide { grid-column: 1; grid-row: 1 / 3; min-height: 24rem; }
    .mosaic-tall { grid-column: 2 / 4; min-height: 15rem; }
}

@media (max-width: 479px) {
    .home-vmg { border-radius: 1.3rem; }
    .studio-metrics { gap: 0.5rem; }
    .metric { padding: 0.9rem 0.65rem; }
    .metric span { font-size: 0.75rem; line-height: 1.35; }
    .service-card { min-height: 15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .home-band .work-grid-home .work-item,
    .home-band .service-card,
    .home-band .platform-chip,
    .home-band .mosaic-card img { transition-duration: 1ms; }
}

/* Work: a scroll-driven falling card deck, inspired by the supplied video. */
.work-page-main {
    --deck-accent: var(--gold);
    background: var(--stone);
    min-height: calc(100svh - 90px);
}
.work-showcase { padding: 2.5rem var(--page-pad) 4rem; }
.work-showcase-inner {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 4vw, 5rem);
    max-width: var(--max);
    margin-inline: auto;
    direction: ltr;
}
.work-gallery-copy { align-self: center; min-width: 0; text-align: start; }
.work-copy-kicker {
    display: block;
    margin-bottom: 1.65rem;
    color: var(--gold-deep);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
}
.work-copy-kicker > span:first-child { margin-inline: .65rem; opacity: .45; }
.work-gallery-copy h1 {
    max-width: none;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 3.5vw, 2.65rem);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.work-gallery-copy h1.is-long-title { max-width: none; }
.work-title-accent {
    display: block;
    padding-inline-end: .12em;
    color: var(--gold-deep);
    font-style: normal;
    letter-spacing: 0;
}
.work-gallery-copy > [data-work-intro] {
    max-width: 28rem;
    margin-top: 1.4rem;
    color: var(--ink-muted);
    font-size: 1rem;
    line-height: 1.8;
}
.work-deck-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.8rem; }
.work-explore { gap: 1.2rem; height: 2.8rem; background: var(--navy); color: #fff; font-size: .85rem; box-shadow: 0 8px 22px rgba(10, 22, 40, .1); }
.work-explore > span {
    display: grid; place-items: center; width: 1.4rem; height: 1.4rem;
    border-radius: 50%; background: rgba(201,164,76,.18); color: var(--gold-soft);
}
.work-explore:hover { background: var(--navy-soft); }
.work-contact-link { color: var(--gold-deep); font-size: .85rem; }
.work-contact-link:hover { color: var(--navy); }
.work-scroll-hint { display: flex; gap: .65rem; align-items: center; margin-top: 3rem; color: var(--ink-muted); font-size: .74rem; }
.work-scroll-hint > span:first-child { color: var(--gold-deep); }
.work-gallery-panel { min-width: 0; position: relative; }
.work-gallery-toolbar { margin-bottom: 1.5rem; }
.work-page .filters { justify-content: flex-start; gap: .4rem; margin: 0; }
.work-page .filter-btn {
    flex: 0 0 auto; height: 2.25rem; padding-inline: .9rem;
    border-color: rgba(184,146,58,.25); background: rgba(250,248,243,.65);
    color: var(--ink-muted); font-size: .76rem;
}
.work-page .filter-btn.is-active { background: var(--navy); border-color: var(--gold); color: #fff; }
.work-page .filter-btn:hover:not(.is-active) { border-color: var(--gold); color: var(--gold-deep); background: #f7f2e5; }
.work-page .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.work-page .work-meta h3 { color: var(--navy); }
.work-deck-progress, .work-deck-navigation, .work-deck-empty { display: none; }

/* Pin the stage, leaving native page scrolling in charge of every card. */
.work-showcase.is-deck-ready {
    padding: 0 var(--page-pad);
    height: var(--deck-scroll-height);
    min-height: var(--deck-viewport);
}
.is-deck-ready .work-showcase-inner {
    position: sticky;
    top: var(--work-header-height);
    height: var(--deck-viewport);
    gap: clamp(1.5rem, 5vw, 6rem);
}
.is-deck-ready .work-gallery-copy { padding-block: 1.5rem; }
.is-deck-ready .work-gallery-panel { height: 100%; min-height: 0; }
.is-deck-ready .work-gallery-toolbar {
    position: absolute; inset-inline: 0; top: 1.5rem;
    z-index: 20; margin: 0; padding-inline-end: 2.5rem;
}
.is-deck-ready .work-grid {
    display: block; position: absolute; inset-block: 4.25rem 4rem; inset-inline: 0 3.5rem;
    perspective: 1400px; overflow: clip; transition: opacity 240ms ease;
}
.is-deck-ready.is-deck-looping .work-grid { opacity: 0; }
.is-deck-ready .work-item {
    position: absolute;
    top: 56%;
    left: 50%;
    width: min(90%, var(--work-card-width, 28.75rem));
    height: clamp(15rem, 49svh, var(--work-card-height, 25rem));
    margin: 0;
    border: 1px solid rgba(184,146,58,.35);
    border-radius: var(--card-radius, 1.35rem);
    box-shadow: 0 18px 36px rgba(10,22,40,.16), 0 2px 6px rgba(10,22,40,.1);
    background: var(--navy);
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    backface-visibility: hidden;
    pointer-events: none;
}
.is-deck-ready .work-item.is-current { pointer-events: auto; }
.is-deck-ready .work-thumb {
    width: 100%; height: 100%; aspect-ratio: auto;
    border: 0; border-radius: inherit; background: radial-gradient(ellipse at 100% 0%, rgba(201,164,76,.18), transparent 65%), var(--navy);
}
.is-deck-ready .work-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.is-deck-ready .work-thumb::after { background: linear-gradient(180deg, transparent 46%, rgba(8,13,30,.82) 100%); opacity: 1; }
.is-deck-ready .work-meta {
    position: absolute; inset-inline: 1.35rem; bottom: 1.3rem; z-index: 2;
    margin: 0; opacity: 0; pointer-events: none; transition: opacity 220ms;
}
.is-deck-ready .is-current .work-meta { opacity: 1; }
.is-deck-ready .work-meta h3 { color: #fff; font-size: 1.45rem; font-weight: 600; line-height: 1.25; }
.is-deck-ready .work-meta p { margin-top: .4rem; color: rgba(255,255,255,.75); font-size: .7rem; }
.work-project-open { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border-radius: inherit; }
.work-project-open:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: -7px; }

.is-deck-ready .work-deck-progress {
    position: absolute; inset-inline-end: 0; top: 22%;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    width: 2.6rem; height: 54%; z-index: 10; direction: ltr;
}
.work-deck-current { color: var(--navy); font-size: 1.8rem; font-weight: 700; letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.work-deck-total { color: var(--ink-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.work-deck-rail { position: relative; flex: 1; width: 1px; background: rgba(184,146,58,.3); }
.work-deck-fill { position: absolute; inset: 0; background: var(--gold); transform: scaleY(var(--deck-progress, 0)); transform-origin: top; }
.work-deck-dot {
    position: absolute; top: calc(var(--deck-progress, 0) * 100%); left: 50%;
    width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%, -50%);
    background: var(--gold); box-shadow: 0 0 0 4px rgba(184,146,58,.1), 0 0 13px rgba(184,146,58,.35);
}
.is-deck-ready .work-deck-navigation {
    position: absolute; inset-inline: 0 3.5rem; bottom: 1.2rem; z-index: 20;
    display: flex; align-items: center; justify-content: center; gap: .8rem;
    width: max-content; max-width: calc(100% - 3.5rem); margin-inline: auto;
    padding: .35rem .55rem; border: 1px solid rgba(184,146,58,.24); border-radius: 999px;
    background: rgba(248,246,240,.94); backdrop-filter: blur(8px);
}
.work-deck-arrow {
    flex: 0 0 auto; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
    border: 1px solid rgba(184,146,58,.3); border-radius: 50%; background: rgba(255,255,255,.45);
    color: var(--navy); transition: background 180ms, border-color 180ms;
}
.work-deck-arrow:hover:not(:disabled) { background: #f7f2e5; border-color: var(--gold); }
.work-deck-arrow:disabled { opacity: .3; cursor: default; }
.work-deck-arrow:focus-visible, .work-explore:focus-visible, .work-page .filter-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.work-deck-caption { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); font-size: .72rem; }
.work-deck-empty[hidden] { display: none; }
.is-deck-ready .is-empty .work-deck-empty { position: absolute; inset: 35% 0 auto; display: block; text-align: center; color: var(--ink-muted); }
.is-deck-ready .is-empty :is(.work-deck-progress, .work-deck-navigation) { display: none; }

/* Native dialog keeps focus and keyboard navigation inside the project preview. */
.work-dialog-is-open { overflow: hidden; }
.work-project-dialog {
    width: min(64rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem);
    margin: auto; padding: 0; border: 1px solid rgba(184,146,58,.35); border-radius: 1.35rem;
    background: var(--stone); color: var(--navy); box-shadow: 0 30px 100px rgba(0,0,0,.3);
    font-family: "Cairo", sans-serif;
}
.work-project-dialog::backdrop { background: rgba(8,16,29,.76); backdrop-filter: blur(9px); }
.work-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem; }
.work-dialog-category { display: block; color: var(--gold-deep); font-size: .75rem; }
.work-dialog-header h2 { margin-top: .2rem; font-family: var(--font-heading); font-weight: 500; font-size: 1.2rem; line-height: 1.4; }
.work-dialog-close { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(0,0,0,.04); }
.work-dialog-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.work-dialog-media { display: grid; place-items: center; min-height: 12rem; background: var(--stone-2); }
.work-dialog-media img { width: 100%; max-height: calc(100svh - 13rem); object-fit: contain; }
.work-dialog-footer { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: .75rem; color: var(--ink-muted); font-size: .8rem; direction: ltr; }

@media (max-width: 760px) {
    .work-showcase-inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .work-showcase { padding: 1.5rem 1.15rem 3rem; }
    .work-copy-kicker { margin-bottom: .65rem; font-size: .56rem; }
    .work-gallery-copy h1, .work-gallery-copy h1.is-long-title { font-size: clamp(1.5rem, 5.4vw, 2.2rem); max-width: none; letter-spacing: 0; line-height: 1.3; }
    .work-title-accent { display: inline; }
    .work-gallery-copy > [data-work-intro] { margin-top: .6rem; font-size: .72rem; line-height: 1.65; max-width: 34rem; }
    .work-deck-actions { margin-top: .85rem; gap: 1rem; }
    .work-explore { height: 2.1rem; font-size: .65rem; padding-inline: .85rem; }
    .work-explore > span { width: 1.1rem; height: 1.1rem; }
    .work-contact-link { font-size: .64rem; }
    .work-scroll-hint { display: none; }
    .work-showcase.is-deck-ready { padding-inline: 1.15rem; }
    .is-deck-ready .work-showcase-inner { grid-template-rows: auto minmax(0, 1fr); gap: .6rem; }
    .is-deck-ready .work-gallery-copy { align-self: start; padding-block: 1rem .1rem; }
    .is-deck-ready .work-gallery-toolbar { top: 0; padding-inline-end: 0; }
    .work-page .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
    .work-page .filters::-webkit-scrollbar { display: none; }
    .work-page .filter-btn { height: 1.75rem; padding-inline: .7rem; font-size: .61rem; }
    .is-deck-ready .work-grid { inset-block: 2.3rem 2.7rem; inset-inline: 0 2.6rem; }
    .is-deck-ready .work-item { width: min(92%, 22rem); height: min(70%, 21rem); top: 60%; min-height: 10rem; border-radius: .9rem; }
    .is-deck-ready .work-meta { inset-inline: 1rem; bottom: 1rem; }
    .is-deck-ready .work-meta h3 { font-size: 1.14rem; }
    .is-deck-ready .work-meta p { font-size: .62rem; }
    .is-deck-ready .work-deck-progress { width: 2rem; height: 53%; top: 30%; }
    .work-deck-current { font-size: 1.4rem; }
    .is-deck-ready .work-deck-navigation { bottom: .5rem; inset-inline-end: 2.6rem; gap: .6rem; }
    .work-deck-arrow { width: 1.8rem; height: 1.8rem; font-size: .8rem; }
    .work-deck-caption { font-size: .58rem; max-width: 10rem; }
    .work-dialog-header { padding: .85rem; }
    .work-dialog-header h2 { font-size: 1rem; }
}
@media (min-width: 761px) and (max-height: 650px) {
    .work-gallery-copy h1, .work-gallery-copy h1.is-long-title { font-size: clamp(1.6rem, 3.7vw, 2.5rem); }
    .work-copy-kicker { margin-bottom: .8rem; }
    .work-gallery-copy > [data-work-intro] { font-size: .8rem; margin-top: .8rem; }
    .work-deck-actions { margin-top: 1rem; }
    .work-scroll-hint { display: none; }
    .is-deck-ready .work-grid { inset-block: 3.5rem 3rem; }
    .is-deck-ready .work-item { height: min(85%, 20rem); width: min(78%, 26rem); }
}
@media (max-width: 760px) and (max-height: 650px) {
    .work-gallery-copy > [data-work-intro] { display: none; }
    .is-deck-ready .work-item { height: 65%; }
}
@media (prefers-reduced-motion: reduce) {
    .work-page .work-thumb img, .work-page .work-meta, .work-deck-arrow { transition: none; }
    .work-page .work-item:hover .work-thumb img { transform: none; }
    .is-deck-ready .work-grid { transition: none; }
}
@media print {
    .work-showcase.is-deck-ready { height: auto; }
    .is-deck-ready .work-showcase-inner { position: static; height: auto; display: block; }
    .is-deck-ready .work-grid { position: static; display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; }
    .is-deck-ready .work-item { position: relative; inset: auto; width: 100%; height: 22rem; opacity: 1 !important; visibility: visible !important; transform: none !important; break-inside: avoid; }
    .is-deck-ready .work-meta { opacity: 1; }
    .is-deck-ready :is(.work-deck-progress, .work-deck-navigation, .work-gallery-toolbar, .work-deck-actions) { display: none; }
}

/* Arabic display type follows the English headline hierarchy; card copy stays Cairo. */
html[lang="ar"] body.site :is(h1, h2):not(.work-dialog-header h2) {
    font-family: "Lalezar", "Cairo", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0;
    line-height: 1.35 !important;
}